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'
};
/**