diff --git a/components/input/apiExamples/fullYear.html b/components/input/apiExamples/fullYear.html new file mode 100644 index 00000000..ba293c08 --- /dev/null +++ b/components/input/apiExamples/fullYear.html @@ -0,0 +1,3 @@ + + Full Year + diff --git a/components/input/apiExamples/month.html b/components/input/apiExamples/month.html new file mode 100644 index 00000000..cf2f30d9 --- /dev/null +++ b/components/input/apiExamples/month.html @@ -0,0 +1,3 @@ + + Month + diff --git a/components/input/apiExamples/year.html b/components/input/apiExamples/year.html new file mode 100644 index 00000000..935750c9 --- /dev/null +++ b/components/input/apiExamples/year.html @@ -0,0 +1,3 @@ + + Year + diff --git a/components/input/demo/api.min.js b/components/input/demo/api.min.js index 879fcec0..b464a784 100644 --- a/components/input/demo/api.min.js +++ b/components/input/demo/api.min.js @@ -163,7 +163,10 @@ const stringsES = { 'dateMMDDYYYY': 'Ingrese una fecha completa en el formato MM/DD/AAAA', 'dateMMYY': 'Ingrese una fecha completa en el formato MM/AA', 'dateMMYYYY': 'Ingrese una fecha completa en el formato MM/AAAA', - 'dateYYYYMMDD': 'Ingrese una fecha completa en el formato AAAA/MM/DD' + 'dateYYYYMMDD': 'Ingrese una fecha completa en el formato AAAA/MM/DD', + 'dateYY': 'Ingrese una fecha completa en el formato AA', + 'dateYYYY': 'Ingrese una fecha completa en el formato AAAA', + 'dateMM': 'Ingrese una fecha completa en el formato MM', }; const stringsEN = { @@ -175,7 +178,10 @@ const stringsEN = { 'dateMMDDYYYY': 'Please enter a complete date in the format MM/DD/YYYY', 'dateMMYY': 'Please enter a complete date in the format MM/YY', 'dateMMYYYY': 'Please enter a complete date in the format MM/YYYY', - 'dateYYYYMMDD': 'Please enter a complete date in the format YYYY/MM/DD' + 'dateYYYYMMDD': 'Please enter a complete date in the format YYYY/MM/DD', + 'dateYYY': 'Please enter a complete date in the format YY', + 'dateYYYYY': 'Please enter a complete date in the format YYYY', + 'dateMM': 'Please enter a complete date in the format MM' }; /** @@ -2207,7 +2213,10 @@ class BaseInput extends r { "month-day-year", "year-month-day", "month-year", - "month-fullYear" + "month-fullYear", + "month", + "year", + "fullYear" ]; this.autoFormattingTypes = [ @@ -2400,6 +2409,36 @@ class BaseInput extends r { this.inputMode = 'numeric'; break; + + case 'fullYear': + config = { + date: true, + datePattern: ['Y'] + }; + + this.inputMode = 'numeric'; + + break; + + case 'year': + config = { + date: true, + datePattern: ['y'] + }; + + this.inputMode = 'numeric'; + + break; + + case 'month': + config = { + date: true, + datePattern: ['m'] + }; + + this.inputMode = 'numeric'; + + break; // Do nothing } @@ -2446,6 +2485,12 @@ class BaseInput extends r { this.setCustomValidityForType = i18n(this.lang, 'dateMMYYYY'); } else if (this.type === 'year-month-day') { this.setCustomValidityForType = i18n(this.lang, 'dateYYYYMMDD'); + } else if (this.type === 'year') { + this.setCustomValidityForType = i18n(this.lang, 'dateYY'); + } else if (this.type === 'fullYear') { + this.setCustomValidityForType = i18n(this.lang, 'dateYYYY'); + } else if (this.type === 'month') { + this.setCustomValidityForType = i18n(this.lang, 'dateMM'); } } @@ -2770,6 +2815,10 @@ class BaseInput extends r { this.dateStrLength = 5; } else if (this.type === 'month-fullYear') { this.dateStrLength = 7; + } else if (this.type === 'month' || this.type === 'year') { + this.dateStrLength = 2; + } else if (this.type === 'fullYear') { + this.dateStrLength = 4; } } @@ -2808,6 +2857,12 @@ class BaseInput extends r { this.helpText = i18n(this.lang, 'dateMMYYYY'); } else if (type === 'year-month-day') { this.helpText = i18n(this.lang, 'dateYYYYMMDD'); + } else if (type === 'month') { + this.helpText = i18n(this.lang, 'dateMM'); + } else if (type === 'year') { + this.helpText = i18n(this.lang, 'dateYY'); + } else if (type === 'fullYear') { + this.helpText = i18n(this.lang, 'dateYYYY'); } else { this.helpText = ''; } @@ -2839,6 +2894,12 @@ class BaseInput extends r { return !this.placeholder ? 'MM/YYYY' : this.placeholder; } else if (this.type === 'year-month-day') { return !this.placeholder ? 'YYYY/MM/DD' : this.placeholder; + } else if (this.type === 'year') { + return !this.placeholder ? 'YY' : this.placeholder; + } else if (this.type === 'fullYear') { + return !this.placeholder ? 'YYYY' : this.placeholder; + } else if (this.type === 'month') { + return !this.placeholder ? 'MM' : this.placeholder; } return o$2(this.placeholder); @@ -4068,7 +4129,10 @@ class AuroInput extends BaseInput { 'month-day-year', 'month-year', 'year-month-day', - 'month-fullYear' + 'month-fullYear', + 'month', + 'year', + 'fullYear' ]; if (this.icon || typesWithIcons.includes(this.type)) { @@ -4078,6 +4142,24 @@ class AuroInput extends BaseInput { return false; } + isDateType() { + let isDateType = false; + + switch (this.type) { + case 'month-day-year': + case 'month-year': + case 'year-month-day': + case 'month-fullYear': + case 'month': + case 'year': + case 'fullYear': + isDateType = true; + break; + } + + return isDateType; + } + // function that renders the HTML and CSS into the scope of the component render() { // is-disabled class - THIS IS ONLY HERE TO MAKE A TEST PASS AS FAR AS I CAN TELL @@ -4107,7 +4189,7 @@ class AuroInput extends BaseInput { `) : undefined } - ${this.type === 'month-day-year' || this.type === 'month-year' || this.type === 'year-month-day' || this.type === 'month-fullYear' + ${this.isDateType() ? u$3` <${this.iconTag} class="accentIcon" diff --git a/components/input/demo/index.min.js b/components/input/demo/index.min.js index d47394f5..d5700e28 100644 --- a/components/input/demo/index.min.js +++ b/components/input/demo/index.min.js @@ -109,7 +109,10 @@ const stringsES = { 'dateMMDDYYYY': 'Ingrese una fecha completa en el formato MM/DD/AAAA', 'dateMMYY': 'Ingrese una fecha completa en el formato MM/AA', 'dateMMYYYY': 'Ingrese una fecha completa en el formato MM/AAAA', - 'dateYYYYMMDD': 'Ingrese una fecha completa en el formato AAAA/MM/DD' + 'dateYYYYMMDD': 'Ingrese una fecha completa en el formato AAAA/MM/DD', + 'dateYY': 'Ingrese una fecha completa en el formato AA', + 'dateYYYY': 'Ingrese una fecha completa en el formato AAAA', + 'dateMM': 'Ingrese una fecha completa en el formato MM', }; const stringsEN = { @@ -121,7 +124,10 @@ const stringsEN = { 'dateMMDDYYYY': 'Please enter a complete date in the format MM/DD/YYYY', 'dateMMYY': 'Please enter a complete date in the format MM/YY', 'dateMMYYYY': 'Please enter a complete date in the format MM/YYYY', - 'dateYYYYMMDD': 'Please enter a complete date in the format YYYY/MM/DD' + 'dateYYYYMMDD': 'Please enter a complete date in the format YYYY/MM/DD', + 'dateYYY': 'Please enter a complete date in the format YY', + 'dateYYYYY': 'Please enter a complete date in the format YYYY', + 'dateMM': 'Please enter a complete date in the format MM' }; /** @@ -2153,7 +2159,10 @@ class BaseInput extends r { "month-day-year", "year-month-day", "month-year", - "month-fullYear" + "month-fullYear", + "month", + "year", + "fullYear" ]; this.autoFormattingTypes = [ @@ -2346,6 +2355,36 @@ class BaseInput extends r { this.inputMode = 'numeric'; break; + + case 'fullYear': + config = { + date: true, + datePattern: ['Y'] + }; + + this.inputMode = 'numeric'; + + break; + + case 'year': + config = { + date: true, + datePattern: ['y'] + }; + + this.inputMode = 'numeric'; + + break; + + case 'month': + config = { + date: true, + datePattern: ['m'] + }; + + this.inputMode = 'numeric'; + + break; // Do nothing } @@ -2392,6 +2431,12 @@ class BaseInput extends r { this.setCustomValidityForType = i18n(this.lang, 'dateMMYYYY'); } else if (this.type === 'year-month-day') { this.setCustomValidityForType = i18n(this.lang, 'dateYYYYMMDD'); + } else if (this.type === 'year') { + this.setCustomValidityForType = i18n(this.lang, 'dateYY'); + } else if (this.type === 'fullYear') { + this.setCustomValidityForType = i18n(this.lang, 'dateYYYY'); + } else if (this.type === 'month') { + this.setCustomValidityForType = i18n(this.lang, 'dateMM'); } } @@ -2716,6 +2761,10 @@ class BaseInput extends r { this.dateStrLength = 5; } else if (this.type === 'month-fullYear') { this.dateStrLength = 7; + } else if (this.type === 'month' || this.type === 'year') { + this.dateStrLength = 2; + } else if (this.type === 'fullYear') { + this.dateStrLength = 4; } } @@ -2754,6 +2803,12 @@ class BaseInput extends r { this.helpText = i18n(this.lang, 'dateMMYYYY'); } else if (type === 'year-month-day') { this.helpText = i18n(this.lang, 'dateYYYYMMDD'); + } else if (type === 'month') { + this.helpText = i18n(this.lang, 'dateMM'); + } else if (type === 'year') { + this.helpText = i18n(this.lang, 'dateYY'); + } else if (type === 'fullYear') { + this.helpText = i18n(this.lang, 'dateYYYY'); } else { this.helpText = ''; } @@ -2785,6 +2840,12 @@ class BaseInput extends r { return !this.placeholder ? 'MM/YYYY' : this.placeholder; } else if (this.type === 'year-month-day') { return !this.placeholder ? 'YYYY/MM/DD' : this.placeholder; + } else if (this.type === 'year') { + return !this.placeholder ? 'YY' : this.placeholder; + } else if (this.type === 'fullYear') { + return !this.placeholder ? 'YYYY' : this.placeholder; + } else if (this.type === 'month') { + return !this.placeholder ? 'MM' : this.placeholder; } return o$2(this.placeholder); @@ -4014,7 +4075,10 @@ class AuroInput extends BaseInput { 'month-day-year', 'month-year', 'year-month-day', - 'month-fullYear' + 'month-fullYear', + 'month', + 'year', + 'fullYear' ]; if (this.icon || typesWithIcons.includes(this.type)) { @@ -4024,6 +4088,24 @@ class AuroInput extends BaseInput { return false; } + isDateType() { + let isDateType = false; + + switch (this.type) { + case 'month-day-year': + case 'month-year': + case 'year-month-day': + case 'month-fullYear': + case 'month': + case 'year': + case 'fullYear': + isDateType = true; + break; + } + + return isDateType; + } + // function that renders the HTML and CSS into the scope of the component render() { // is-disabled class - THIS IS ONLY HERE TO MAKE A TEST PASS AS FAR AS I CAN TELL @@ -4053,7 +4135,7 @@ class AuroInput extends BaseInput { `) : undefined } - ${this.type === 'month-day-year' || this.type === 'month-year' || this.type === 'year-month-day' || this.type === 'month-fullYear' + ${this.isDateType() ? u$3` <${this.iconTag} class="accentIcon" diff --git a/components/input/docs/partials/api.md b/components/input/docs/partials/api.md index b5c5754f..d3e4b914 100644 --- a/components/input/docs/partials/api.md +++ b/components/input/docs/partials/api.md @@ -557,6 +557,51 @@ Use the `type="year-month-day"` attribute for a date formatted input. +Use the `type="month"` attribute for a date formatted input. + +
+ + +
+ + + See code + + + + + + +Use the `type="year"` attribute for a date formatted input. + +
+ + +
+ + + See code + + + + + + +Use the `type="fullYear"` attribute for a date formatted input. + +
+ + +
+ + + See code + + + + + + ## Additional Use Cases ### Swapping Values Between Inputs diff --git a/components/input/package.json b/components/input/package.json index 50826cbd..68f06b82 100644 --- a/components/input/package.json +++ b/components/input/package.json @@ -7,7 +7,7 @@ "================================================================================" ], "name": "@aurodesignsystem/auro-input", - "version": "4.1.3", + "version": "4.2.0", "description": "auro-input HTML custom element", "repository": { "type": "git", @@ -50,24 +50,24 @@ "autoprefixer": "^10.4.20", "babel-loader": "^9.2.1", "backstopjs": "^6.3.25", - "compression": "^1.7.4", + "compression": "^1.7.5", "concat": "^1.0.3", "concurrently": "^9.1.0", "copyfiles": "^2.4.1", "core-js": "^3.39.0", "eslint": "^9.14.0", - "eslint-plugin-jsdoc": "^50.4.3", + "eslint-plugin-jsdoc": "^50.5.0", "husky": "^9.1.6", "lodash": "^4.17.21", "markdown-magic": "^3.3.0", "nodemon": "^3.1.7", "npm-run-all": "^4.1.5", - "postcss": "^8.4.47", + "postcss": "^8.4.49", "postcss-custom-properties": "^14.0.4", "postcss-discard-comments": "^7.0.3", - "rollup": "^4.24.4", + "rollup": "^4.25.0", "rollup-plugin-serve": "^2.0.3", - "sass": "^1.80.6", + "sass": "^1.80.7", "semantic-release": "^24.2.0", "sinon": "^19.0.2", "stylelint": "^16.10.0", @@ -75,7 +75,7 @@ "stylelint-config-standard": "^36.0.1", "stylelint-config-standard-scss": "^13.1.0", "stylelint-order": "^6.0.4", - "stylelint-scss": "^6.8.1", + "stylelint-scss": "^6.9.0", "typescript": "^5.6.3", "wc-sass-render": "^1.4.0", "web-component-analyzer": "^2.0.0", diff --git a/components/input/src/auro-input.js b/components/input/src/auro-input.js index 09b408c3..562207a5 100644 --- a/components/input/src/auro-input.js +++ b/components/input/src/auro-input.js @@ -63,7 +63,10 @@ export class AuroInput extends BaseInput { 'month-day-year', 'month-year', 'year-month-day', - 'month-fullYear' + 'month-fullYear', + 'month', + 'year', + 'fullYear' ]; if (this.icon || typesWithIcons.includes(this.type)) { @@ -73,6 +76,26 @@ export class AuroInput extends BaseInput { return false; } + isDateType() { + let isDateType = false; + + switch (this.type) { + case 'month-day-year': + case 'month-year': + case 'year-month-day': + case 'month-fullYear': + case 'month': + case 'year': + case 'fullYear': + isDateType = true; + break; + default: + break; + } + + return isDateType; + } + // function that renders the HTML and CSS into the scope of the component render() { // is-disabled class - THIS IS ONLY HERE TO MAKE A TEST PASS AS FAR AS I CAN TELL @@ -102,7 +125,7 @@ export class AuroInput extends BaseInput { `) : undefined } - ${this.type === 'month-day-year' || this.type === 'month-year' || this.type === 'year-month-day' || this.type === 'month-fullYear' + ${this.isDateType() ? html` <${this.iconTag} class="accentIcon" diff --git a/components/input/src/base-input.js b/components/input/src/base-input.js index 9e61c5d5..eedc0ad4 100644 --- a/components/input/src/base-input.js +++ b/components/input/src/base-input.js @@ -121,7 +121,10 @@ export default class BaseInput extends LitElement { "month-day-year", "year-month-day", "month-year", - "month-fullYear" + "month-fullYear", + "month", + "year", + "fullYear" ]; this.autoFormattingTypes = [ @@ -315,6 +318,36 @@ export default class BaseInput extends LitElement { break; + case 'fullYear': + config = { + date: true, + datePattern: ['Y'] + }; + + this.inputMode = 'numeric'; + + break; + + case 'year': + config = { + date: true, + datePattern: ['y'] + }; + + this.inputMode = 'numeric'; + + break; + + case 'month': + config = { + date: true, + datePattern: ['m'] + }; + + this.inputMode = 'numeric'; + + break; + default: // Do nothing } @@ -362,6 +395,12 @@ export default class BaseInput extends LitElement { this.setCustomValidityForType = i18n(this.lang, 'dateMMYYYY'); } else if (this.type === 'year-month-day') { this.setCustomValidityForType = i18n(this.lang, 'dateYYYYMMDD'); + } else if (this.type === 'year') { + this.setCustomValidityForType = i18n(this.lang, 'dateYY'); + } else if (this.type === 'fullYear') { + this.setCustomValidityForType = i18n(this.lang, 'dateYYYY'); + } else if (this.type === 'month') { + this.setCustomValidityForType = i18n(this.lang, 'dateMM'); } } @@ -686,6 +725,10 @@ export default class BaseInput extends LitElement { this.dateStrLength = 5; } else if (this.type === 'month-fullYear') { this.dateStrLength = 7; + } else if (this.type === 'month' || this.type === 'year') { + this.dateStrLength = 2; + } else if (this.type === 'fullYear') { + this.dateStrLength = 4; } } @@ -724,6 +767,12 @@ export default class BaseInput extends LitElement { this.helpText = i18n(this.lang, 'dateMMYYYY'); } else if (type === 'year-month-day') { this.helpText = i18n(this.lang, 'dateYYYYMMDD'); + } else if (type === 'month') { + this.helpText = i18n(this.lang, 'dateMM'); + } else if (type === 'year') { + this.helpText = i18n(this.lang, 'dateYY'); + } else if (type === 'fullYear') { + this.helpText = i18n(this.lang, 'dateYYYY'); } else { this.helpText = ''; } @@ -755,6 +804,12 @@ export default class BaseInput extends LitElement { return !this.placeholder ? 'MM/YYYY' : this.placeholder; } else if (this.type === 'year-month-day') { return !this.placeholder ? 'YYYY/MM/DD' : this.placeholder; + } else if (this.type === 'year') { + return !this.placeholder ? 'YY' : this.placeholder; + } else if (this.type === 'fullYear') { + return !this.placeholder ? 'YYYY' : this.placeholder; + } else if (this.type === 'month') { + return !this.placeholder ? 'MM' : this.placeholder; } return ifDefined(this.placeholder); diff --git a/components/input/src/i18n.js b/components/input/src/i18n.js index e1d735bc..cf6ae73c 100644 --- a/components/input/src/i18n.js +++ b/components/input/src/i18n.js @@ -46,7 +46,10 @@ const stringsES = { 'dateMMDDYYYY': 'Ingrese una fecha completa en el formato MM/DD/AAAA', 'dateMMYY': 'Ingrese una fecha completa en el formato MM/AA', 'dateMMYYYY': 'Ingrese una fecha completa en el formato MM/AAAA', - 'dateYYYYMMDD': 'Ingrese una fecha completa en el formato AAAA/MM/DD' + 'dateYYYYMMDD': 'Ingrese una fecha completa en el formato AAAA/MM/DD', + 'dateYY': 'Ingrese una fecha completa en el formato AA', + 'dateYYYY': 'Ingrese una fecha completa en el formato AAAA', + 'dateMM': 'Ingrese una fecha completa en el formato MM', }; const stringsEN = { @@ -58,7 +61,10 @@ const stringsEN = { 'dateMMDDYYYY': 'Please enter a complete date in the format MM/DD/YYYY', 'dateMMYY': 'Please enter a complete date in the format MM/YY', 'dateMMYYYY': 'Please enter a complete date in the format MM/YYYY', - 'dateYYYYMMDD': 'Please enter a complete date in the format YYYY/MM/DD' + 'dateYYYYMMDD': 'Please enter a complete date in the format YYYY/MM/DD', + 'dateYYY': 'Please enter a complete date in the format YY', + 'dateYYYYY': 'Please enter a complete date in the format YYYY', + 'dateMM': 'Please enter a complete date in the format MM' }; /**