@ongov/ontario-design-system-component-library 5.0.0-alpha.5 → 5.0.0-alpha.6

package/dist/components/ontario-critical-alert.js.map

@@ -1 +1 @@
-{"file":"ontario-critical-alert.js","mappings":";;;;;;;;;;;AAAA,MAAM,uBAAuB,GAAG,osuBAAosuB,CAAC;AACruuB,mCAAe,uBAAuB;;MCYzBA,sBAAoB;;;;;;;;;;;;;;IAyBhC,4BAA4B,CAAC,QAA8B;;QAE1D,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC,WAAW,EAAE;YAC3B,IAAI,kBAAkB,CAAC,QAAQ,CAAC,EAAE;;;;gBAIjC,MAAM,OAAO,GAAG,IAAI,mBAAmB,EAAE,CAAC;gBAC1C,OAAO;qBACL,kBAAkB,EAAE;qBACpB,gBAAgB,CAAC,WAAW,CAAC;qBAC7B,cAAc,CAAC,KAAK,CAAC;qBACrB,gBAAgB,CAAC,4BAA4B,CAAC;qBAC9C,cAAc,CAAC,mBAAmB,CAAC;qBACnC,YAAY,EAAE,CAAC;aACjB;SACD;KACD;IAEO,aAAa;QACpB,MAAM,OAAO,GAAG,IAAI,CAAC,OAAO,CAAC;QAE7B,IAAI,OAAO,OAAO,KAAK,QAAQ,EAAE;YAChC,OAAO,OAAO,CAAC;SACf;QAED,OAAO,eAAQ,CAAC;KAChB;IAED,iBAAiB;QAChB,IAAI,CAAC,4BAA4B,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC;KAChD;IAED,MAAM;QACL,QACC,4DAAK,KAAK,EAAC,wBAAwB,IAClC,4DAAK,KAAK,EAAC,aAAa,IACvB,4DAAK,KAAK,EAAC,iCAAiC,IAC3C,4DAAK,KAAK,EAAC,8BAA8B,IACxC,4DAAK,KAAK,EAAC,8BAA8B,EAAC,SAAS,EAAE,+BAA+B,GAAQ,EAC5F,4DAAI,IAAI,CAAC,aAAa,EAAE,CAAK,CACxB,CACD,CACD,CACD,EACL;KACF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["OntarioCriticalAlert"],"sources":["src/components/ontario-critical-alert/ontario-critical-alert.scss?tag=ontario-critical-alert&encapsulation=shadow","src/components/ontario-critical-alert/ontario-critical-alert.tsx"],"sourcesContent":["@use '@ongov/ontario-design-system-global-styles/dist/styles/scss/1-variables/spacing.variables' as spacing;\n@use '@ongov/ontario-design-system-global-styles/dist/styles/scss/1-variables/colours.variables' as colours;\n@use '@ongov/ontario-design-system-global-styles/dist/styles/scss/1-variables/font-weights.variables' as fontWeights;\n@use '../../styles/grid.scss';\n\n$ontario-critical-alert-icon-size: 28px;\n$ontario-critical-alert-z-index: 10;\n$ontario-critical-alert-svg-margin--custom: 0.85rem;\n$ontario-critical-alert-line-height: 1.8;\n\n.ontario-critical-alert {\n\tbackground-color: colours.$ontario-colour-warning;\n\tfont-weight: fontWeights.$ontario-font-weights-normal;\n\tmargin: spacing.$spacing-0;\n\tpadding: spacing.$spacing-4 spacing.$spacing-0;\n\tposition: relative;\n\tz-index: $ontario-critical-alert-z-index;\n}\n\n.ontario-critical-alert__body {\n\tdisplay: flex;\n\tflex-wrap: nowrap;\n}\n\n.ontario-critical-alert__icon {\n\tdisplay: flex;\n\n\tsvg {\n\t\twidth: $ontario-critical-alert-icon-size;\n\t\theight: $ontario-critical-alert-icon-size;\n\t\tmargin: spacing.$spacing-0 $ontario-critical-alert-svg-margin--custom spacing.$spacing-0 spacing.$spacing-0;\n\t}\n}\n\n.ontario-critical-alert p {\n\tmargin: spacing.$spacing-0;\n\tpadding: spacing.$spacing-0;\n\tline-height: $ontario-critical-alert-line-height;\n}\n\n.ontario-critical-alert a {\n\tcolor: colours.$ontario-colour-black;\n\tfont-weight: fontWeights.$ontario-font-weights-bold;\n\n\t&:hover,\n\t&:focus {\n\t\ttext-decoration: none;\n\t}\n\n\t&:visited {\n\t\tcolor: colours.$ontario-colour-black;\n\t}\n}\n\n// Slotted content styles\n.ontario-critical-alert ::slotted(a) {\n\tcolor: colours.$ontario-colour-black !important;\n\tfont-weight: fontWeights.$ontario-font-weights-bold;\n}\n\n.ontario-critical-alert ::slotted(a:hover),\n.ontario-critical-alert ::slotted(a:focus) {\n\ttext-decoration: none !important;\n}\n\n.ontario-critical-alert ::slotted(a:visited) {\n\tcolor: colours.$ontario-colour-black;\n}\n","import { Component, h, Prop, Watch, Element } from '@stencil/core';\n\nimport { CriticalAlert } from './ontario-critical-alert.interface';\nimport OntarioIconCriticalAlertWarning from '../ontario-icon/assets/ontario-icon-critical-alert-warning.svg';\n\nimport { validatePropExists } from '../../utils/validation/validation-functions';\nimport { ConsoleMessageClass } from '../../utils/console-message/console-message';\n\n@Component({\n\ttag: 'ontario-critical-alert',\n\tstyleUrl: 'ontario-critical-alert.scss',\n\tshadow: true,\n})\nexport class OntarioCriticalAlert implements CriticalAlert {\n\t@Element() host: HTMLElement;\n\n\t/**\n\t * Content for critical alert message. It can be either string or HTML content. The content is already wrapped in a paragraph tag, so if using HTML content, the paragraph tag can be ommitted.\n\t *\n\t * @example\n\t * <ontario-critical-alert content=\"COVID-19 State of emergency extended until May 12, 2020.\"></ontario-critical-alert>\n\t *\n\t * or\n\t *\n\t * <ontario-critical-alert>\n\t *  <a href=\"#\">COVID-19 State of emergency</a> extended until May 12, 2020.\n\t * </ontario-critical-alert>\n\t */\n\t@Prop() content: string | HTMLElement;\n\n\t/**\n\t * Watch for changes to the `content` prop value.\n\t *\n\t * If no `content` prop was passed, or no host element textContent exists, a warning message will be printed.\n\t *\n\t * @param newValue string | HTMLElement\n\t */\n\t@Watch('content')\n\tvalidateCriticalAlertContent(newValue: string | HTMLElement) {\n\t\t// if no slot is passed, run the `validatePropExists` function\n\t\tif (!this.host.textContent) {\n\t\t\tif (validatePropExists(newValue)) {\n\t\t\t\t/**\n\t\t\t\t * Print the quote warning message\n\t\t\t\t */\n\t\t\t\tconst message = new ConsoleMessageClass();\n\t\t\t\tmessage\n\t\t\t\t\t.addDesignSystemTag()\n\t\t\t\t\t.addMonospaceText(' content ')\n\t\t\t\t\t.addRegularText('for')\n\t\t\t\t\t.addMonospaceText(' <ontario-critical-alert> ')\n\t\t\t\t\t.addRegularText('was not provided.')\n\t\t\t\t\t.printMessage();\n\t\t\t}\n\t\t}\n\t}\n\n\tprivate renderContent() {\n\t\tconst content = this.content;\n\n\t\tif (typeof content === 'string') {\n\t\t\treturn content;\n\t\t}\n\n\t\treturn <slot />;\n\t}\n\n\tcomponentWillLoad() {\n\t\tthis.validateCriticalAlertContent(this.content);\n\t}\n\n\trender() {\n\t\treturn (\n\t\t\t<div class=\"ontario-critical-alert\">\n\t\t\t\t<div class=\"ontario-row\">\n\t\t\t\t\t<div class=\"ontario-column ontario-small-12\">\n\t\t\t\t\t\t<div class=\"ontario-critical-alert__body\">\n\t\t\t\t\t\t\t<div class=\"ontario-critical-alert__icon\" innerHTML={OntarioIconCriticalAlertWarning}></div>\n\t\t\t\t\t\t\t<p>{this.renderContent()}</p>\n\t\t\t\t\t\t</div>\n\t\t\t\t\t</div>\n\t\t\t\t</div>\n\t\t\t</div>\n\t\t);\n\t}\n}\n"],"version":3}
+{"file":"ontario-critical-alert.js","mappings":";;;;;;;;;;;AAAA,MAAM,uBAAuB,GAAG,osuBAAosuB,CAAC;AACruuB,mCAAe,uBAAuB;;MCYzBA,sBAAoB;;;;;;;;;;;;;;;;;;;IAexB,OAAO,CAAuB;;;;;;;;IAUtC,4BAA4B,CAAC,QAA8B;;QAE1D,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC,WAAW,EAAE;YAC3B,IAAI,kBAAkB,CAAC,QAAQ,CAAC,EAAE;;;;gBAIjC,MAAM,OAAO,GAAG,IAAI,mBAAmB,EAAE,CAAC;gBAC1C,OAAO;qBACL,kBAAkB,EAAE;qBACpB,gBAAgB,CAAC,WAAW,CAAC;qBAC7B,cAAc,CAAC,KAAK,CAAC;qBACrB,gBAAgB,CAAC,4BAA4B,CAAC;qBAC9C,cAAc,CAAC,mBAAmB,CAAC;qBACnC,YAAY,EAAE,CAAC;aACjB;SACD;KACD;IAEO,aAAa;QACpB,MAAM,OAAO,GAAG,IAAI,CAAC,OAAO,CAAC;QAE7B,IAAI,OAAO,OAAO,KAAK,QAAQ,EAAE;YAChC,OAAO,OAAO,CAAC;SACf;QAED,OAAO,eAAQ,CAAC;KAChB;IAED,iBAAiB;QAChB,IAAI,CAAC,4BAA4B,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC;KAChD;IAED,MAAM;QACL,QACC,4DAAK,KAAK,EAAC,wBAAwB,IAClC,4DAAK,KAAK,EAAC,aAAa,IACvB,4DAAK,KAAK,EAAC,iCAAiC,IAC3C,4DAAK,KAAK,EAAC,8BAA8B,IACxC,4DAAK,KAAK,EAAC,8BAA8B,EAAC,SAAS,EAAE,+BAA+B,GAAQ,EAC5F,4DAAI,IAAI,CAAC,aAAa,EAAE,CAAK,CACxB,CACD,CACD,CACD,EACL;KACF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["OntarioCriticalAlert"],"sources":["src/components/ontario-critical-alert/ontario-critical-alert.scss?tag=ontario-critical-alert&encapsulation=shadow","src/components/ontario-critical-alert/ontario-critical-alert.tsx"],"sourcesContent":["@use '@ongov/ontario-design-system-global-styles/dist/styles/scss/1-variables/spacing.variables' as spacing;\n@use '@ongov/ontario-design-system-global-styles/dist/styles/scss/1-variables/colours.variables' as colours;\n@use '@ongov/ontario-design-system-global-styles/dist/styles/scss/1-variables/font-weights.variables' as fontWeights;\n@use '../../styles/grid.scss';\n\n$ontario-critical-alert-icon-size: 28px;\n$ontario-critical-alert-z-index: 10;\n$ontario-critical-alert-svg-margin--custom: 0.85rem;\n$ontario-critical-alert-line-height: 1.8;\n\n.ontario-critical-alert {\n\tbackground-color: colours.$ontario-colour-warning;\n\tfont-weight: fontWeights.$ontario-font-weights-normal;\n\tmargin: spacing.$spacing-0;\n\tpadding: spacing.$spacing-4 spacing.$spacing-0;\n\tposition: relative;\n\tz-index: $ontario-critical-alert-z-index;\n}\n\n.ontario-critical-alert__body {\n\tdisplay: flex;\n\tflex-wrap: nowrap;\n}\n\n.ontario-critical-alert__icon {\n\tdisplay: flex;\n\n\tsvg {\n\t\twidth: $ontario-critical-alert-icon-size;\n\t\theight: $ontario-critical-alert-icon-size;\n\t\tmargin: spacing.$spacing-0 $ontario-critical-alert-svg-margin--custom spacing.$spacing-0 spacing.$spacing-0;\n\t}\n}\n\n.ontario-critical-alert p {\n\tmargin: spacing.$spacing-0;\n\tpadding: spacing.$spacing-0;\n\tline-height: $ontario-critical-alert-line-height;\n}\n\n.ontario-critical-alert a {\n\tcolor: colours.$ontario-colour-black;\n\tfont-weight: fontWeights.$ontario-font-weights-bold;\n\n\t&:hover,\n\t&:focus {\n\t\ttext-decoration: none;\n\t}\n\n\t&:visited {\n\t\tcolor: colours.$ontario-colour-black;\n\t}\n}\n\n// Slotted content styles\n.ontario-critical-alert ::slotted(a) {\n\tcolor: colours.$ontario-colour-black !important;\n\tfont-weight: fontWeights.$ontario-font-weights-bold;\n}\n\n.ontario-critical-alert ::slotted(a:hover),\n.ontario-critical-alert ::slotted(a:focus) {\n\ttext-decoration: none !important;\n}\n\n.ontario-critical-alert ::slotted(a:visited) {\n\tcolor: colours.$ontario-colour-black;\n}\n","import { Component, h, Prop, Watch, Element } from '@stencil/core';\n\nimport { CriticalAlert } from './ontario-critical-alert.interface';\nimport OntarioIconCriticalAlertWarning from '../ontario-icon/assets/ontario-icon-critical-alert-warning.svg';\n\nimport { validatePropExists } from '../../utils/validation/validation-functions';\nimport { ConsoleMessageClass } from '../../utils/console-message/console-message';\n\n@Component({\n\ttag: 'ontario-critical-alert',\n\tstyleUrl: 'ontario-critical-alert.scss',\n\tshadow: true,\n})\nexport class OntarioCriticalAlert implements CriticalAlert {\n\t@Element() host: HTMLElement;\n\n\t/**\n\t * Content for critical alert message. It can be either string or HTML content. The content is already wrapped in a paragraph tag, so if using HTML content, the paragraph tag can be ommitted.\n\t *\n\t * @example\n\t * <ontario-critical-alert content=\"COVID-19 State of emergency extended until May 12, 2020.\"></ontario-critical-alert>\n\t *\n\t * or\n\t *\n\t * <ontario-critical-alert>\n\t *  <a href=\"#\">COVID-19 State of emergency</a> extended until May 12, 2020.\n\t * </ontario-critical-alert>\n\t */\n\t@Prop() content: string | HTMLElement;\n\n\t/**\n\t * Watch for changes to the `content` prop value.\n\t *\n\t * If no `content` prop was passed, or no host element textContent exists, a warning message will be printed.\n\t *\n\t * @param newValue string | HTMLElement\n\t */\n\t@Watch('content')\n\tvalidateCriticalAlertContent(newValue: string | HTMLElement) {\n\t\t// if no slot is passed, run the `validatePropExists` function\n\t\tif (!this.host.textContent) {\n\t\t\tif (validatePropExists(newValue)) {\n\t\t\t\t/**\n\t\t\t\t * Print the quote warning message\n\t\t\t\t */\n\t\t\t\tconst message = new ConsoleMessageClass();\n\t\t\t\tmessage\n\t\t\t\t\t.addDesignSystemTag()\n\t\t\t\t\t.addMonospaceText(' content ')\n\t\t\t\t\t.addRegularText('for')\n\t\t\t\t\t.addMonospaceText(' <ontario-critical-alert> ')\n\t\t\t\t\t.addRegularText('was not provided.')\n\t\t\t\t\t.printMessage();\n\t\t\t}\n\t\t}\n\t}\n\n\tprivate renderContent() {\n\t\tconst content = this.content;\n\n\t\tif (typeof content === 'string') {\n\t\t\treturn content;\n\t\t}\n\n\t\treturn <slot />;\n\t}\n\n\tcomponentWillLoad() {\n\t\tthis.validateCriticalAlertContent(this.content);\n\t}\n\n\trender() {\n\t\treturn (\n\t\t\t<div class=\"ontario-critical-alert\">\n\t\t\t\t<div class=\"ontario-row\">\n\t\t\t\t\t<div class=\"ontario-column ontario-small-12\">\n\t\t\t\t\t\t<div class=\"ontario-critical-alert__body\">\n\t\t\t\t\t\t\t<div class=\"ontario-critical-alert__icon\" innerHTML={OntarioIconCriticalAlertWarning}></div>\n\t\t\t\t\t\t\t<p>{this.renderContent()}</p>\n\t\t\t\t\t\t</div>\n\t\t\t\t\t</div>\n\t\t\t\t</div>\n\t\t\t</div>\n\t\t);\n\t}\n}\n"],"version":3}

package/dist/components/ontario-date-input.js

@@ -1,13 +1,13 @@
-import { h, proxyCustomElement, HTMLElement, createEvent } from '@stencil/core/internal/client';
-import { v as validateLanguage } from './validation-functions.js';
-import { t as translations } from './global.i18n.js';
-import { I as Input$1 } from './input.js';
-import { i as isEmpty, a as isNumber } from './utils.js';
-import { E as ErrorMessage } from './error-message.js';
-import { a as ConsoleType, C as ConsoleMessageClass } from './console-message.js';
-import { e as emitEvent, I as InputCaption } from './event-handler.js';
-import { d as defineCustomElement$2 } from './ontario-icon-alert-error2.js';
-import { v as v4 } from './v4.js';
+import { h, p as proxyCustomElement, H, d as createEvent } from './p-846438ed.js';
+import { v as validateLanguage } from './p-edb765a1.js';
+import { t as translations } from './p-a5331e15.js';
+import { I as Input$1 } from './p-7caacdde.js';
+import { i as isEmpty, a as isNumber } from './p-083804e2.js';
+import { E as ErrorMessage } from './p-8874216e.js';
+import { a as ConsoleType, C as ConsoleMessageClass } from './p-b2019a19.js';
+import { I as InputCaption, e as emitEvent } from './p-3fa830a3.js';
+import { d as defineCustomElement$2 } from './p-c13fee12.js';
+import { v as v4 } from './p-a8cac0fc.js';
 
 const Input = ({
 	id,
@@ -24,15 +24,11 @@ const Input = ({
 	required = false,
 }) => {
 	const handleInputInput = (event) => {
-		var _a, _b;
-		const newValue =
-			(_b = (_a = event.target) === null || _a === void 0 ? void 0 : _a.value) !== null && _b !== void 0 ? _b : '';
+		const newValue = event.target?.value ?? '';
 		onInput(newValue, type);
 	};
 	const handleInputChange = (event) => {
-		var _a, _b;
-		const newValue =
-			(_b = (_a = event.target) === null || _a === void 0 ? void 0 : _a.value) !== null && _b !== void 0 ? _b : '';
+		const newValue = event.target?.value ?? '';
 		onChange(newValue, type);
 	};
 	const handleInputFocus = () => {
@@ -233,7 +229,7 @@ const ontarioDateInputCss =
 const OntarioDateInputStyle0 = ontarioDateInputCss;
 
 const OntarioDateInput$1 = /*@__PURE__*/ proxyCustomElement(
-	class OntarioDateInput extends HTMLElement {
+	class OntarioDateInput extends H {
 		constructor() {
 			super();
 			this.__registerHost();
@@ -244,101 +240,103 @@ const OntarioDateInput$1 = /*@__PURE__*/ proxyCustomElement(
 			this.inputOnFocus = createEvent(this, 'inputOnFocus', 7);
 			this.inputErrorOccurred = createEvent(this, 'inputErrorOccurred', 7);
 			this.internals = this.attachInternals();
-			this.isInvalidDate = () => {
-				return this.dayInvalid || this.monthInvalid || this.yearInvalid;
-			};
-			this.resetErrorState = () => {
-				if (!this.isInvalidDate()) {
-					return;
-				}
-				this.dayInvalid = false;
-				this.monthInvalid = false;
-				this.yearInvalid = false;
-				this.errorMessage = '';
-			};
-			this.updateDateState = (value, inputFieldType) => {
-				switch (inputFieldType) {
-					case 'day':
-						this.day = value;
-						break;
-					case 'month':
-						this.month = value;
-						break;
-					case 'year':
-						this.year = value;
-						break;
-				}
-			};
-			this.handleDateUpdates = (value, fieldType) => {
-				var _a, _b;
-				// set boolean indicating user interaction with the component for validation
-				if (!this.isDateTyped) {
-					this.isDateTyped = true;
-				}
-				// reset error state when user starts typing
-				this.resetErrorState();
-				// update date state
-				this.updateDateState(value, fieldType);
-				// TODO: verify are all the values numbers?
-				if (this.year && this.month && this.day) {
-					const desiredDate = new Date(
-						Date.UTC(parseInt(this.year), parseInt(this.month) - 1, parseInt(this.day), 0, 0, 0, 0),
-					);
-					(_b = (_a = this.internals) === null || _a === void 0 ? void 0 : _a.setFormValue) === null || _b === void 0
-						? void 0
-						: _b.call(_a, desiredDate.toISOString());
-				}
-			};
-			this.handleDateInput = (value, fieldType) => {
-				this.handleDateUpdates(value, fieldType);
-				// emit date change event
-				this.inputOnInput.emit({ value, fieldType });
-			};
-			this.handleDateChanged = (value, fieldType) => {
-				this.handleDateUpdates(value, fieldType);
-				// emit date change event
-				this.inputOnChange.emit({ value, fieldType });
-				// emit change event
-				emitEvent(this.element, 'change', { value, fieldType });
-			};
-			this.handleDateFocus = (fieldType) => {
-				// emit date field focus event
-				this.inputOnFocus.emit(fieldType);
-			};
-			this.handleDateBlur = (fieldType) => {
-				// emit date field focus event
-				this.inputOnBlur.emit(fieldType);
-			};
-			this.language = undefined;
-			this.required = false;
-			this.placeholder = undefined;
-			this.caption = undefined;
-			this.elementId = undefined;
-			this.minYear = undefined;
-			this.maxYear = undefined;
-			this.hintText = undefined;
-			this.dateOptions = ['day', 'month', 'year'];
-			this.dateValidator = undefined;
-			this.translations = translations;
-			this.captionState = undefined;
-			this.isDateTyped = false;
-			this.dayInvalid = false;
-			this.monthInvalid = false;
-			this.yearInvalid = false;
-			this.errorMessage = undefined;
-			this.day = '';
-			this.month = '';
-			this.year = '';
-			this.placeholderState = undefined;
-			this.dateOptionsState = undefined;
 		}
+		get element() {
+			return this;
+		}
+		internals;
+		/**
+		 * The language of the component.
+		 * This is used for translations, and is by default set through event listeners checking for a language property from the header. If none are passed, it will default to English.
+		 */
+		language;
+		/**
+		 * A boolean value to determine whether or not the date input is required.
+		 *
+		 * This is optional. If no prop is passed, it will default to `false`.
+		 */
+		required = false;
+		/**
+		 * An object value used to set the placeholder text for the day, month and year input fields. Any combination of the three input fields (i.e day, month, year)
+		 * of the date component can be overridden.
+		 *
+		 * This is optional. If no prop is passed, it will not display any placeholder text.
+		 */
+		placeholder;
+		/**
+		 * The text to display as the input label
+		 *
+		 * @example
+		 * <ontario-date-input
+		 *   caption='{
+		 *     "captionText": "Exact Date",
+		 *     "captionType": "heading",
+		 *   }
+		 *   required="true"
+		 *   ...>
+		 * </ontario-date-input>
+		 */
+		caption;
+		/**
+		 * The unique identifier of the input. This is optional - if no ID is passed, one will be generated.
+		 */
+		elementId;
+		/**
+		 * A number value indicating minimum value allowed for year input field of the date component.
+		 *
+		 * This is optional. If no prop is passed, it will default to `999`.
+		 */
+		minYear;
+		/**
+		 * A number value indicating maximum value allowed for year input field of the date component.
+		 *
+		 * This is optional. If no prop is passed, it will default to `9999`.
+		 */
+		maxYear;
+		/**
+		 * Used to include the ontario-hint-text component for the date input group.
+		 *
+		 * This is optional.
+		 */
+		hintText;
+		/**
+		 * An array value used to display date options. For example, only the day and month fields can be displayed by
+		 * specifying the dateOptions as `["day", "month"]`, etc.
+		 *
+		 * This is optional. If no prop for `dateOptions` is passed, it will default to `["day", "month", "year"]`.
+		 */
+		dateOptions = ['day', 'month', 'year'];
+		/**
+		 * A function used to override internal date validation logic, which takes three arguments (i.e day, month and year) and returns
+		 * an object of type `DateValidatorReturnType`
+		 *
+		 * This is optional. If no prop for `dateValidator` is passed, it will default to internal validation function to validate
+		 * the date input.
+		 */
+		dateValidator;
+		/**
+		 * Emitted when an `input` event occurs within the component.
+		 */
+		inputOnInput;
+		/**
+		 * Emitted when a `change` event occurs within the component.
+		 */
+		inputOnChange;
+		/**
+		 * Emitted when a keyboard input event occurs when an input has lost focus.
+		 */
+		inputOnBlur;
+		/**
+		 * Emitted when a keyboard input event occurs when an input has gained focus.
+		 */
+		inputOnFocus;
+		/**
+		 * Emitted when an error message is reported to the component.
+		 */
+		inputErrorOccurred;
 		broadcastInputErrorOccurredEvent() {
-			var _a;
 			// Emit event to notify anyone who wants to listen for errors occurring
-			this.inputErrorOccurred.emit({
-				inputId: this.getId(),
-				errorMessage: (_a = this.errorMessage) !== null && _a !== void 0 ? _a : '',
-			});
+			this.inputErrorOccurred.emit({ inputId: this.getId(), errorMessage: this.errorMessage ?? '' });
 		}
 		/**
 		 * This listens for the `setAppLanguage` event sent from the test language toggler when it is is connected to the DOM. It is used for the initial language when the input component loads.
@@ -371,12 +369,24 @@ const OntarioDateInput$1 = /*@__PURE__*/ proxyCustomElement(
 						dayVisible,
 						monthVisible,
 						yearVisible,
-				  });
+					});
 			this.dayInvalid = dayInvalid;
 			this.monthInvalid = monthInvalid;
 			this.yearInvalid = yearInvalid;
 			this.errorMessage = errorMessage;
 		}
+		translations = translations;
+		captionState;
+		isDateTyped = false;
+		dayInvalid = false;
+		monthInvalid = false;
+		yearInvalid = false;
+		errorMessage;
+		day = '';
+		month = '';
+		year = '';
+		placeholderState;
+		dateOptionsState;
 		/**
 		 * Watch for changes to the `caption` prop.
 		 *
@@ -429,19 +439,78 @@ const OntarioDateInput$1 = /*@__PURE__*/ proxyCustomElement(
 					.printMessage(ConsoleType.Error);
 			}
 		}
+		isInvalidDate = () => {
+			return this.dayInvalid || this.monthInvalid || this.yearInvalid;
+		};
+		resetErrorState = () => {
+			if (!this.isInvalidDate()) {
+				return;
+			}
+			this.dayInvalid = false;
+			this.monthInvalid = false;
+			this.yearInvalid = false;
+			this.errorMessage = '';
+		};
+		updateDateState = (value, inputFieldType) => {
+			switch (inputFieldType) {
+				case 'day':
+					this.day = value;
+					break;
+				case 'month':
+					this.month = value;
+					break;
+				case 'year':
+					this.year = value;
+					break;
+			}
+		};
+		handleDateUpdates = (value, fieldType) => {
+			// set boolean indicating user interaction with the component for validation
+			if (!this.isDateTyped) {
+				this.isDateTyped = true;
+			}
+			// reset error state when user starts typing
+			this.resetErrorState();
+			// update date state
+			this.updateDateState(value, fieldType);
+			// TODO: verify are all the values numbers?
+			if (this.year && this.month && this.day) {
+				const desiredDate = new Date(
+					Date.UTC(parseInt(this.year), parseInt(this.month) - 1, parseInt(this.day), 0, 0, 0, 0),
+				);
+				this.internals?.setFormValue?.(desiredDate.toISOString());
+			}
+		};
+		handleDateInput = (value, fieldType) => {
+			this.handleDateUpdates(value, fieldType);
+			// emit date change event
+			this.inputOnInput.emit({ value, fieldType });
+		};
+		handleDateChanged = (value, fieldType) => {
+			this.handleDateUpdates(value, fieldType);
+			// emit date change event
+			this.inputOnChange.emit({ value, fieldType });
+			// emit change event
+			emitEvent(this.element, 'change', { value, fieldType });
+		};
+		handleDateFocus = (fieldType) => {
+			// emit date field focus event
+			this.inputOnFocus.emit(fieldType);
+		};
+		handleDateBlur = (fieldType) => {
+			// emit date field focus event
+			this.inputOnBlur.emit(fieldType);
+		};
 		getLanguage() {
-			var _a;
-			return (_a = this.language) !== null && _a !== void 0 ? _a : 'en';
+			return this.language ?? 'en';
 		}
 		getCaption() {
-			var _a;
 			const language = this.getLanguage();
 			const captionText = translations.dateInput.caption[language];
-			return (_a = this.caption) !== null && _a !== void 0 ? _a : { captionText, captionType: 'default' };
+			return this.caption ?? { captionText, captionType: 'default' };
 		}
 		getId() {
-			var _a;
-			return (_a = this.elementId) !== null && _a !== void 0 ? _a : '';
+			return this.elementId ?? '';
 		}
 		getHintTextId() {
 			return `date-input-hint-${this.getId()}`;
@@ -454,39 +523,44 @@ const OntarioDateInput$1 = /*@__PURE__*/ proxyCustomElement(
 			return { dayId, monthId, yearId };
 		}
 		componentWillLoad() {
-			var _a;
 			this.processPlaceholder();
 			this.processDateOptions();
 			this.updateCaptionState(this.getCaption());
-			this.elementId = (_a = this.elementId) !== null && _a !== void 0 ? _a : v4();
+			this.elementId = this.elementId ?? v4();
 			this.language = validateLanguage(this.language);
 		}
 		render() {
 			const { dateOptionsState, required, translations, hintText, placeholderState } = this;
 			const language = this.getLanguage();
 			const dateStrings = translations.dateInput;
-			const placeholderText = placeholderState !== null && placeholderState !== void 0 ? placeholderState : {};
+			const placeholderText = placeholderState ?? {};
 			const { dayVisible, monthVisible, yearVisible } = getVisibleDateFields(dateOptionsState);
 			const { dayId, monthId, yearId } = this.getInputIds();
 			const hintTextId = this.getHintTextId();
 			return h(
 				'div',
-				{ key: 'ab801171336165869e88dcd7499b0f1965191c54', class: 'ontario-form-group' },
+				{ key: '561a15eb3d9690a42601f07f48bb4eb1e01edc41', class: 'ontario-form-group' },
 				h(
 					'fieldset',
-					{ key: '940f421f9fc5ac5034cccbf7887ef2d7ab99b6a3', role: 'group', class: 'ontario-fieldset' },
+					{ key: '3b42d97a8f9c5d232183b635944d5d1643424ab0', role: 'group', class: 'ontario-fieldset' },
 					this.captionState.getCaption(),
-					!!hintText && h('p', { id: hintTextId, class: 'ontario-hint' }, hintText),
+					!!hintText &&
+						h(
+							'p',
+							{ key: '0a50712b9a45f672256130a843037b4a902e062b', id: hintTextId, class: 'ontario-hint' },
+							hintText,
+						),
 					h(ErrorMessage, {
-						key: '013c78e7f6d02826cfd36cf198892973591acd1e',
+						key: 'e3da4a9a7e9c198c2422a6d95a51f336367ab05e',
 						message: this.errorMessage,
 						error: this.isInvalidDate(),
 					}),
 					h(
 						'div',
-						{ key: '2bc27bdd3275b0333e3213e24254ac6e38150a12', class: 'ontario-date__group' },
+						{ key: '9d8253315677870ea2d0a4ec379fa5d0633ad321', class: 'ontario-date__group' },
 						yearVisible &&
 							h(Input, {
+								key: '7321e849f5f57839bc7fd4fabc2f1aecdeb22ba5',
 								id: yearId,
 								type: 'year',
 								label: dateStrings.year.label[language],
@@ -502,6 +576,7 @@ const OntarioDateInput$1 = /*@__PURE__*/ proxyCustomElement(
 							}),
 						monthVisible &&
 							h(Input, {
+								key: 'cc1743b3e15b8ce55708e2825e86afd4f3cf3a8d',
 								id: monthId,
 								type: 'month',
 								label: dateStrings.month.label[language],
@@ -517,6 +592,7 @@ const OntarioDateInput$1 = /*@__PURE__*/ proxyCustomElement(
 							}),
 						dayVisible &&
 							h(Input, {
+								key: '4581a7e1f0603e44fbdee0e4c48d6286c7593eec',
 								id: dayId,
 								type: 'day',
 								label: dateStrings.day.label[language],
@@ -537,9 +613,6 @@ const OntarioDateInput$1 = /*@__PURE__*/ proxyCustomElement(
 		static get formAssociated() {
 			return true;
 		}
-		get element() {
-			return this;
-		}
 		static get watchers() {
 			return {
 				errorMessage: ['broadcastInputErrorOccurredEvent'],

package/dist/components/ontario-date-input.js.map

@@ -1 +1 @@
-{"file":"ontario-date-input.js","mappings":"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","names":["CommonInput","OntarioDateInput","uuid"],"sources":["src/components/ontario-date-input/components/input.tsx","src/components/ontario-date-input/constants/date-input-constants.ts","src/components/ontario-date-input/utils/date-validation-utils.ts","src/components/ontario-date-input/utils/date-options-utils.ts","src/components/ontario-date-input/ontario-date-input.scss?tag=ontario-date-input&encapsulation=shadow","src/components/ontario-date-input/ontario-date-input.tsx"],"sourcesContent":["import { FunctionalComponent, h } from '@stencil/core';\nimport { DateInputFieldType } from '../ontario-date-input-interface';\nimport { Input as CommonInput } from '../../../utils/common/input/input';\n\nexport type InputProps = {\n\tid: string;\n\ttype: DateInputFieldType;\n\tlabel: string;\n\taccessibilityLabel: string;\n\terror?: boolean;\n\tonInput: (value: string, fieldType: DateInputFieldType) => void;\n\tonChange: (value: string, fieldType: DateInputFieldType) => void;\n\tonBlur: (fieldType: DateInputFieldType) => void;\n\tonFocus: (fieldType: DateInputFieldType) => void;\n\tplaceholder?: string;\n\trequired?: boolean;\n\tariaDescribedBy?: string;\n};\n\nexport const Input: FunctionalComponent<InputProps> = ({\n\tid,\n\ttype,\n\tlabel,\n\taccessibilityLabel,\n\tplaceholder,\n\tonInput,\n\tonChange,\n\tonFocus,\n\tonBlur,\n\tariaDescribedBy,\n\terror = false,\n\trequired = false,\n}) => {\n\tconst handleInputInput = (event: Event) => {\n\t\tconst newValue = (event.target as HTMLInputElement)?.value ?? '';\n\t\tonInput(newValue, type);\n\t};\n\n\tconst handleInputChange = (event: Event) => {\n\t\tconst newValue = (event.target as HTMLInputElement)?.value ?? '';\n\t\tonChange(newValue, type);\n\t};\n\n\tconst handleInputFocus = () => {\n\t\tonFocus(type);\n\t};\n\n\tconst handleInputBlur = () => {\n\t\tonBlur(type);\n\t};\n\n\treturn (\n\t\t<div class={`ontario-date__group-input ${error ? 'ontario-date--error' : ''}`}>\n\t\t\t<label htmlFor={id}>\n\t\t\t\t{label}\n\t\t\t\t<span class=\"ontario-show-for-sr\">({accessibilityLabel})</span>\n\t\t\t</label>\n\t\t\t<CommonInput\n\t\t\t\tclassName=\"ontario-input ontario-input--4-char-width\"\n\t\t\t\ttype=\"text\"\n\t\t\t\tinputMode=\"numeric\"\n\t\t\t\tid={id}\n\t\t\t\trequired={!!required}\n\t\t\t\tplaceholder={placeholder}\n\t\t\t\tonInput={handleInputInput}\n\t\t\t\tonChange={handleInputChange}\n\t\t\t\tonFocus={handleInputFocus}\n\t\t\t\tonBlur={handleInputBlur}\n\t\t\t\tariaInvalid={error}\n\t\t\t\tariaDescribedBy={ariaDescribedBy}\n\t\t\t/>\n\t\t</div>\n\t);\n};\n","export const DAY_MIN_VALUE = 1;\nexport const DAY_MAX_VALUE = 31;\nexport const MONTH_MIN_VALUE = 1;\nexport const MONTH_MAX_VALUE = 12;\nexport const YEAR_MIN_VALUE = 999;\nexport const YEAR_MAX_VALUE = 9999;\n","import {\n\tDAY_MIN_VALUE,\n\tDAY_MAX_VALUE,\n\tMONTH_MIN_VALUE,\n\tMONTH_MAX_VALUE,\n\tYEAR_MIN_VALUE,\n\tYEAR_MAX_VALUE,\n} from '../constants';\nimport { DateValidatorReturnType } from '../ontario-date-input-interface';\nimport { isNumber, isEmpty } from '../../../utils/helper/utils';\nimport { Translations } from '../../../translations';\n/*\n * Day field should be a number, not negative, no greater than “31”\n */\nconst isInvalidDay = (value: string) => {\n\tif (!isNumber(value)) {\n\t\treturn true;\n\t}\n\n\tconst day = Number(value);\n\n\treturn day < DAY_MIN_VALUE || day > DAY_MAX_VALUE;\n};\n\n/*\n * Month field should be a number, not negative, no greater than “12”\n */\nconst isInvalidMonth = (value: string) => {\n\tif (!isNumber(value)) {\n\t\treturn true;\n\t}\n\n\tconst month = Number(value);\n\n\treturn month < MONTH_MIN_VALUE || month > MONTH_MAX_VALUE;\n};\n\n/**\n * Valid value year against minimum and maximum year range (defaulted if not provided.)\n *\n * Year field should be a number and not written out; it has no concept of positive and negative.\n *\n * Suggestion:\n * - `< 0` B.C.E.\n * - `>= 0` A.C.E.\n *\n * @param value value to check for validity\n * @param minYear minimum valid year to validate against\n * @param maxYear maximum valid year to validate against\n */\nexport const isInvalidYear = (\n\tvalue: string | number,\n\tminYear: number = YEAR_MIN_VALUE,\n\tmaxYear: number = YEAR_MAX_VALUE,\n) => {\n\tif (!isNumber(value)) {\n\t\treturn true;\n\t}\n\n\tconst year = Number(value);\n\n\treturn year < minYear || year > maxYear;\n};\n\ntype GetDateErrorArg = {\n\tdayValue: string;\n\tmonthValue: string;\n\tyearValue: string;\n\terrorMessages: Translations['dateInput']['error']['en'];\n\tminYear?: number;\n\tmaxYear?: number;\n\tdayVisible: boolean;\n\tmonthVisible: boolean;\n\tyearVisible: boolean;\n};\n/**\n * Helper function to get error message for birthdate validation\n */\nexport const getDateErrorMessage = ({\n\tdayValue,\n\tmonthValue,\n\tyearValue,\n\terrorMessages,\n\tminYear,\n\tmaxYear,\n\tdayVisible,\n\tmonthVisible,\n\tyearVisible,\n}: GetDateErrorArg): DateValidatorReturnType => {\n\tconst {\n\t\temptyDay,\n\t\temptyMonth,\n\t\temptyYear,\n\t\temptyDayAndMonth,\n\t\temptyDayAndYear,\n\t\temptyMonthAndYear,\n\t\tinvalidDate,\n\t\tinvalidDay,\n\t\tinvalidMonth,\n\t\tinvalidYear,\n\t} = errorMessages;\n\n\tlet error = '';\n\tlet dayInvalid = false;\n\tlet monthInvalid = false;\n\tlet yearInvalid = false;\n\n\tconst isDayEmpty = dayVisible && isEmpty(dayValue);\n\tconst isMonthEmpty = monthVisible && isEmpty(monthValue);\n\tconst isYearEmpty = yearVisible && isEmpty(yearValue);\n\t/*\n\t *  If one ore more fields are valid but others are empty:\n\t *  1 field empty:\n\t *  Day as empty - “Enter the day.”\n\t *  Month as empty - “Enter the month.”\n\t *  Year as empty - “Enter the year.”\n\t *  2 fields empty:\n\t *  Month and day empty - “Enter the month and day.”\n\t *  Year and day empty - “Enter the year and day.”\n\t *  Year and month empty - “Enter the year and month.”\n\t */\n\tif (isDayEmpty && isMonthEmpty && isYearEmpty) {\n\t\terror = invalidDate;\n\t\tdayInvalid = true;\n\t\tmonthInvalid = true;\n\t\tyearInvalid = true;\n\t} else if (isDayEmpty && isMonthEmpty) {\n\t\terror = emptyDayAndMonth;\n\t\tdayInvalid = true;\n\t\tmonthInvalid = true;\n\t} else if (isDayEmpty && isYearEmpty) {\n\t\terror = emptyDayAndYear;\n\t\tdayInvalid = true;\n\t\tyearInvalid = true;\n\t} else if (isMonthEmpty && isYearEmpty) {\n\t\terror = emptyMonthAndYear;\n\t\tyearInvalid = true;\n\t\tmonthInvalid = true;\n\t} else if (isDayEmpty) {\n\t\terror = emptyDay;\n\t\tdayInvalid = true;\n\t} else if (isMonthEmpty) {\n\t\terror = emptyMonth;\n\t\tmonthInvalid = true;\n\t} else if (isYearEmpty) {\n\t\terror = emptyYear;\n\t\tyearInvalid = true;\n\t}\n\n\tconst isDayInvalid = dayVisible && isInvalidDay(dayValue);\n\tconst isMonthInvalid = monthVisible && isInvalidMonth(monthValue);\n\tconst isYearInvalid = yearVisible && isInvalidYear(yearValue, minYear, maxYear);\n\t/*\n\t *  If only one error, specify where the error occurs\n\t *  E.g. “Enter a valid day.”, “Enter a valid month.” Or “Enter a valid year.”\n\t *  If 2 or more fields have error (or all 3), say “Enter a valid date.”\n\t *  If one or more fields are invalid but the others are empty say: “Enter a valid date.”\n\t */\n\tif (isEmpty(error)) {\n\t\tif (isDayInvalid && isMonthInvalid && isYearInvalid) {\n\t\t\terror = invalidDate;\n\t\t\tdayInvalid = true;\n\t\t\tmonthInvalid = true;\n\t\t\tyearInvalid = true;\n\t\t} else if (isDayInvalid && isMonthInvalid) {\n\t\t\terror = invalidDate;\n\t\t\tdayInvalid = true;\n\t\t\tmonthInvalid = true;\n\t\t} else if (isDayInvalid && isYearInvalid) {\n\t\t\terror = invalidDate;\n\t\t\tdayInvalid = true;\n\t\t\tyearInvalid = true;\n\t\t} else if (isMonthInvalid && isYearInvalid) {\n\t\t\terror = invalidDate;\n\t\t\tmonthInvalid = true;\n\t\t\tyearInvalid = true;\n\t\t} else if (isYearInvalid) {\n\t\t\terror = invalidYear;\n\t\t\tyearInvalid = true;\n\t\t} else if (isMonthInvalid) {\n\t\t\terror = invalidMonth;\n\t\t\tmonthInvalid = true;\n\t\t} else if (isDayInvalid) {\n\t\t\terror = invalidDay;\n\t\t\tdayInvalid = true;\n\t\t}\n\t}\n\n\treturn { errorMessage: error, dayInvalid, monthInvalid, yearInvalid };\n};\n","import { DateInputFieldType } from '../ontario-date-input-interface';\n\nexport const getVisibleDateFields = (dateOptions: Array<DateInputFieldType>) => {\n\tconst dayVisible = dateOptions.includes('day');\n\tconst monthVisible = dateOptions.includes('month');\n\tconst yearVisible = dateOptions.includes('year');\n\n\treturn { dayVisible, monthVisible, yearVisible };\n};\n","@use '@ongov/ontario-design-system-global-styles/dist/styles/scss/1-variables/colours.variables' as colours;\n@use '@ongov/ontario-design-system-global-styles/dist/styles/scss/1-variables/spacing.variables' as spacing;\n@use '@ongov/ontario-design-system-global-styles/dist/styles/scss/1-variables/font-weights.variables' as fontWeights;\n@use '@ongov/ontario-design-system-global-styles/dist/styles/scss/1-variables/global.variables' as globalVariables;\n@use '@ongov/ontario-design-system-global-styles/dist/styles/scss/4-elements/_global.elements.scss';\n@use '../../styles/form.scss';\n@forward '../../utils/components/error-message/error-message';\n\n.ontario-date__group {\n\tdisplay: flex;\n\n\tlabel {\n\t\tfont-weight: fontWeights.$ontario-font-weights-semi-bold;\n\t}\n\n\tinput {\n\t\tmargin-top: spacing.$spacing-4;\n\t}\n}\n\n.ontario-date__group-input {\n\tdisplay: flex;\n\tflex-direction: column;\n\tmargin-right: spacing.$spacing-5;\n}\n\n.ontario-date--error {\n\tinput {\n\t\tborder: 0.125rem solid colours.$ontario-colour-alert;\n\t}\n}\n","import { Component, EventEmitter, Element, Watch, Event, Prop, h, State, Listen, AttachInternals } from '@stencil/core';\nimport { v4 as uuid } from 'uuid';\nimport { Language } from '../../utils/common/language-types';\nimport { validateLanguage } from '../../utils/validation/validation-functions';\nimport { translations, Translations } from '../../translations';\nimport { Input } from './components';\nimport { getDateErrorMessage, getVisibleDateFields } from './utils';\nimport { DateInputFieldType, DateInputPlaceholder, DateValidatorReturnType } from './ontario-date-input-interface';\nimport { ErrorMessage } from '../../utils/components/error-message/error-message';\nimport { ConsoleMessageClass } from '../../utils/console-message/console-message';\nimport { ConsoleType } from '../../utils/console-message/console-message.enum';\nimport { InputCaption } from '../../utils/common/input-caption/input-caption';\nimport { Caption } from '../../utils/common/input-caption/caption.interface';\nimport { emitEvent } from '../../utils/events/event-handler';\n\n@Component({\n\ttag: 'ontario-date-input',\n\tstyleUrl: 'ontario-date-input.scss',\n\tshadow: true,\n\tformAssociated: true,\n})\nexport class OntarioDateInput {\n\t@Element() element: HTMLElement;\n\t@AttachInternals() internals: ElementInternals;\n\n\t/**\n\t * The language of the component.\n\t * This is used for translations, and is by default set through event listeners checking for a language property from the header. If none are passed, it will default to English.\n\t */\n\t@Prop({ mutable: true }) language?: Language;\n\n\t/**\n\t * A boolean value to determine whether or not the date input is required.\n\t *\n\t * This is optional. If no prop is passed, it will default to `false`.\n\t */\n\t@Prop() required?: boolean = false;\n\n\t/**\n\t * An object value used to set the placeholder text for the day, month and year input fields. Any combination of the three input fields (i.e day, month, year)\n\t * of the date component can be overridden.\n\t *\n\t * This is optional. If no prop is passed, it will not display any placeholder text.\n\t */\n\t@Prop() placeholder?: DateInputPlaceholder | string;\n\n\t/**\n\t * The text to display as the input label\n\t *\n\t * @example\n\t * <ontario-date-input\n\t *   caption='{\n\t *     \"captionText\": \"Exact Date\",\n\t *     \"captionType\": \"heading\",\n\t *   }\n\t *   required=\"true\"\n\t *   ...>\n\t * </ontario-date-input>\n\t */\n\t@Prop() caption: Caption | string;\n\n\t/**\n\t * The unique identifier of the input. This is optional - if no ID is passed, one will be generated.\n\t */\n\t@Prop({ mutable: true }) elementId?: string;\n\n\t/**\n\t * A number value indicating minimum value allowed for year input field of the date component.\n\t *\n\t * This is optional. If no prop is passed, it will default to `999`.\n\t */\n\t@Prop() minYear?: number;\n\n\t/**\n\t * A number value indicating maximum value allowed for year input field of the date component.\n\t *\n\t * This is optional. If no prop is passed, it will default to `9999`.\n\t */\n\t@Prop() maxYear?: number;\n\n\t/**\n\t * Used to include the ontario-hint-text component for the date input group.\n\t *\n\t * This is optional.\n\t */\n\t@Prop() hintText?: string;\n\n\t/**\n\t * An array value used to display date options. For example, only the day and month fields can be displayed by\n\t * specifying the dateOptions as `[\"day\", \"month\"]`, etc.\n\t *\n\t * This is optional. If no prop for `dateOptions` is passed, it will default to `[\"day\", \"month\", \"year\"]`.\n\t */\n\t@Prop() dateOptions?: string | Array<DateInputFieldType> = ['day', 'month', 'year'];\n\n\t/**\n\t * A function used to override internal date validation logic, which takes three arguments (i.e day, month and year) and returns\n\t * an object of type `DateValidatorReturnType`\n\t *\n\t * This is optional. If no prop for `dateValidator` is passed, it will default to internal validation function to validate\n\t * the date input.\n\t */\n\t@Prop() dateValidator?: (day: string, month: string, year: string) => DateValidatorReturnType;\n\n\t/**\n\t * Emitted when an `input` event occurs within the component.\n\t */\n\t@Event() inputOnInput: EventEmitter<{\n\t\tvalue: string;\n\t\tfieldType: 'day' | 'month' | 'year';\n\t}>;\n\n\t/**\n\t * Emitted when a `change` event occurs within the component.\n\t */\n\t@Event() inputOnChange: EventEmitter<{\n\t\tvalue: string;\n\t\tfieldType: 'day' | 'month' | 'year';\n\t}>;\n\n\t/**\n\t * Emitted when a keyboard input event occurs when an input has lost focus.\n\t */\n\t@Event() inputOnBlur: EventEmitter<'day' | 'month' | 'year'>;\n\n\t/**\n\t * Emitted when a keyboard input event occurs when an input has gained focus.\n\t */\n\t@Event() inputOnFocus: EventEmitter<'day' | 'month' | 'year'>;\n\n\t/**\n\t * Emitted when an error message is reported to the component.\n\t */\n\t@Event() inputErrorOccurred: EventEmitter<{ inputId: string; errorMessage: string }>;\n\n\t@Watch('errorMessage')\n\tbroadcastInputErrorOccurredEvent() {\n\t\t// Emit event to notify anyone who wants to listen for errors occurring\n\t\tthis.inputErrorOccurred.emit({ inputId: this.getId(), errorMessage: this.errorMessage ?? '' });\n\t}\n\n\t/**\n\t * This listens for the `setAppLanguage` event sent from the test language toggler when it is is connected to the DOM. It is used for the initial language when the input component loads.\n\t */\n\t@Listen('setAppLanguage', { target: 'window' })\n\thandleSetAppLanguage(event: CustomEvent<Language>) {\n\t\tif (!this.language) {\n\t\t\tthis.language = validateLanguage(event);\n\t\t}\n\t}\n\n\t@Listen('headerLanguageToggled', { target: 'window' })\n\thandleHeaderLanguageToggled(event: CustomEvent<Language>) {\n\t\tthis.language = validateLanguage(event);\n\t}\n\n\t@Listen('blur', { capture: true })\n\thandleComponentBlur() {\n\t\tconst { day, month, year, minYear, maxYear, dateValidator, dateOptionsState } = this;\n\t\tconst { dayVisible, monthVisible, yearVisible } = getVisibleDateFields(dateOptionsState);\n\n\t\t// if user has not interacted with the component, skip validation\n\t\tif (!this.isDateTyped) {\n\t\t\treturn;\n\t\t}\n\t\tconst errorMessages = translations.dateInput.error[this.getLanguage()];\n\t\tconst { dayInvalid, monthInvalid, yearInvalid, errorMessage } = dateValidator\n\t\t\t? dateValidator(day, month, year)\n\t\t\t: getDateErrorMessage({\n\t\t\t\t\tdayValue: day,\n\t\t\t\t\tmonthValue: month,\n\t\t\t\t\tyearValue: year,\n\t\t\t\t\terrorMessages,\n\t\t\t\t\tminYear,\n\t\t\t\t\tmaxYear,\n\t\t\t\t\tdayVisible,\n\t\t\t\t\tmonthVisible,\n\t\t\t\t\tyearVisible,\n\t\t\t  });\n\n\t\tthis.dayInvalid = dayInvalid;\n\t\tthis.monthInvalid = monthInvalid;\n\t\tthis.yearInvalid = yearInvalid;\n\t\tthis.errorMessage = errorMessage;\n\t}\n\n\t@State() private translations: Translations = translations;\n\t@State() private captionState: InputCaption;\n\n\t@State() private isDateTyped: boolean = false;\n\t@State() private dayInvalid: boolean = false;\n\t@State() private monthInvalid: boolean = false;\n\t@State() private yearInvalid: boolean = false;\n\t@State() private errorMessage: string | undefined;\n\n\t@State() private day: string = '';\n\t@State() private month: string = '';\n\t@State() private year: string = '';\n\n\t@State() private placeholderState: DateInputPlaceholder;\n\t@State() private dateOptionsState: Array<DateInputFieldType>;\n\n\t/**\n\t * Watch for changes to the `caption` prop.\n\t *\n\t * The caption will be run through the InputCaption constructor to convert it to the correct format, and set the result to the `captionState` state.\n\t * @param newValue: Caption | string\n\t */\n\t@Watch('caption')\n\tprivate updateCaptionState(newValue: Caption | string) {\n\t\tthis.captionState = new InputCaption(\n\t\t\tthis.element.tagName,\n\t\t\tnewValue,\n\t\t\ttranslations,\n\t\t\tthis.language,\n\t\t\ttrue,\n\t\t\tthis.required,\n\t\t);\n\t}\n\n\t/**\n\t * Watch for changes in the `language` prop to render either the English or French translations\n\t */\n\t@Watch('language')\n\tupdateLanguage() {\n\t\tthis.updateCaptionState(this.caption);\n\t}\n\n\tprivate processPlaceholder() {\n\t\tthis.parseOptions(this.placeholder);\n\t}\n\n\tprivate processDateOptions() {\n\t\tthis.parseOptions(this.dateOptions);\n\t}\n\n\tprivate parseOptions(options: any) {\n\t\tconst isString = typeof options === 'string';\n\t\tif (!options) {\n\t\t\treturn;\n\t\t}\n\n\t\ttry {\n\t\t\tif (options === this.placeholder) {\n\t\t\t\tthis.placeholderState = isString ? JSON.parse(options) : options;\n\t\t\t} else if (options === this.dateOptions) {\n\t\t\t\tthis.dateOptionsState = isString ? JSON.parse(options) : options;\n\t\t\t}\n\t\t} catch (error) {\n\t\t\tconst message = new ConsoleMessageClass();\n\t\t\tmessage\n\t\t\t\t.addDesignSystemTag()\n\t\t\t\t.addRegularText(' failed to parse props for ')\n\t\t\t\t.addMonospaceText('<ontario-date-input>')\n\t\t\t\t.addRegularText(' in ')\n\t\t\t\t.addMonospaceText('parseOptions()')\n\t\t\t\t.addRegularText(' method \\n ')\n\t\t\t\t.addMonospaceText(error.stack)\n\t\t\t\t.printMessage(ConsoleType.Error);\n\t\t}\n\t}\n\n\tprivate isInvalidDate = () => {\n\t\treturn this.dayInvalid || this.monthInvalid || this.yearInvalid;\n\t};\n\n\tprivate resetErrorState = () => {\n\t\tif (!this.isInvalidDate()) {\n\t\t\treturn;\n\t\t}\n\n\t\tthis.dayInvalid = false;\n\t\tthis.monthInvalid = false;\n\t\tthis.yearInvalid = false;\n\t\tthis.errorMessage = '';\n\t};\n\n\tprivate updateDateState = (value: string, inputFieldType: DateInputFieldType) => {\n\t\tswitch (inputFieldType) {\n\t\t\tcase 'day':\n\t\t\t\tthis.day = value;\n\t\t\t\tbreak;\n\t\t\tcase 'month':\n\t\t\t\tthis.month = value;\n\t\t\t\tbreak;\n\t\t\tcase 'year':\n\t\t\t\tthis.year = value;\n\t\t\t\tbreak;\n\t\t}\n\t};\n\n\tprivate handleDateUpdates = (value: string, fieldType: DateInputFieldType) => {\n\t\t// set boolean indicating user interaction with the component for validation\n\t\tif (!this.isDateTyped) {\n\t\t\tthis.isDateTyped = true;\n\t\t}\n\n\t\t// reset error state when user starts typing\n\t\tthis.resetErrorState();\n\n\t\t// update date state\n\t\tthis.updateDateState(value, fieldType);\n\n\t\t// TODO: verify are all the values numbers?\n\t\tif (this.year && this.month && this.day) {\n\t\t\tconst desiredDate = new Date(\n\t\t\t\tDate.UTC(parseInt(this.year), parseInt(this.month) - 1, parseInt(this.day), 0, 0, 0, 0),\n\t\t\t);\n\t\t\tthis.internals?.setFormValue?.(desiredDate.toISOString());\n\t\t}\n\t};\n\n\tprivate handleDateInput = (value: string, fieldType: DateInputFieldType) => {\n\t\tthis.handleDateUpdates(value, fieldType);\n\n\t\t// emit date change event\n\t\tthis.inputOnInput.emit({ value, fieldType });\n\t};\n\n\tprivate handleDateChanged = (value: string, fieldType: DateInputFieldType) => {\n\t\tthis.handleDateUpdates(value, fieldType);\n\n\t\t// emit date change event\n\t\tthis.inputOnChange.emit({ value, fieldType });\n\n\t\t// emit change event\n\t\temitEvent(this.element, 'change', { value, fieldType });\n\t};\n\n\tprivate handleDateFocus = (fieldType: DateInputFieldType) => {\n\t\t// emit date field focus event\n\t\tthis.inputOnFocus.emit(fieldType);\n\t};\n\n\tprivate handleDateBlur = (fieldType: DateInputFieldType) => {\n\t\t// emit date field focus event\n\t\tthis.inputOnBlur.emit(fieldType);\n\t};\n\n\tprivate getLanguage(): Language {\n\t\treturn this.language ?? 'en';\n\t}\n\n\tprivate getCaption(): Caption | string {\n\t\tconst language = this.getLanguage();\n\t\tconst captionText = translations.dateInput.caption[language];\n\n\t\treturn this.caption ?? { captionText, captionType: 'default' };\n\t}\n\n\tprivate getId(): string {\n\t\treturn this.elementId ?? '';\n\t}\n\n\tprivate getHintTextId(): string {\n\t\treturn `date-input-hint-${this.getId()}`;\n\t}\n\n\tprivate getInputIds() {\n\t\tconst id = this.getId();\n\n\t\tconst dayId = `day-${id}`;\n\t\tconst monthId = `month-${id}`;\n\t\tconst yearId = `year-${id}`;\n\n\t\treturn { dayId, monthId, yearId };\n\t}\n\n\tcomponentWillLoad() {\n\t\tthis.processPlaceholder();\n\t\tthis.processDateOptions();\n\n\t\tthis.updateCaptionState(this.getCaption());\n\t\tthis.elementId = this.elementId ?? uuid();\n\n\t\tthis.language = validateLanguage(this.language) as Language;\n\t}\n\n\trender() {\n\t\tconst { dateOptionsState, required, translations, hintText, placeholderState } = this;\n\t\tconst language = this.getLanguage();\n\t\tconst dateStrings = translations.dateInput;\n\t\tconst placeholderText = placeholderState ?? {};\n\t\tconst { dayVisible, monthVisible, yearVisible } = getVisibleDateFields(dateOptionsState);\n\t\tconst { dayId, monthId, yearId } = this.getInputIds();\n\t\tconst hintTextId = this.getHintTextId();\n\n\t\treturn (\n\t\t\t<div class=\"ontario-form-group\">\n\t\t\t\t<fieldset role=\"group\" class=\"ontario-fieldset\">\n\t\t\t\t\t{this.captionState.getCaption()}\n\t\t\t\t\t{!!hintText && (\n\t\t\t\t\t\t<p id={hintTextId} class=\"ontario-hint\">\n\t\t\t\t\t\t\t{hintText}\n\t\t\t\t\t\t</p>\n\t\t\t\t\t)}\n\t\t\t\t\t<ErrorMessage message={this.errorMessage} error={this.isInvalidDate()} />\n\t\t\t\t\t<div class=\"ontario-date__group\">\n\t\t\t\t\t\t{yearVisible && (\n\t\t\t\t\t\t\t<Input\n\t\t\t\t\t\t\t\tid={yearId}\n\t\t\t\t\t\t\t\ttype=\"year\"\n\t\t\t\t\t\t\t\tlabel={dateStrings.year.label[language]}\n\t\t\t\t\t\t\t\taccessibilityLabel={dateStrings.year.accessibility[language]}\n\t\t\t\t\t\t\t\trequired={!!required}\n\t\t\t\t\t\t\t\terror={this.yearInvalid}\n\t\t\t\t\t\t\t\tplaceholder={placeholderText.year}\n\t\t\t\t\t\t\t\tonInput={this.handleDateInput}\n\t\t\t\t\t\t\t\tonChange={this.handleDateChanged}\n\t\t\t\t\t\t\t\tonBlur={this.handleDateBlur}\n\t\t\t\t\t\t\t\tonFocus={this.handleDateFocus}\n\t\t\t\t\t\t\t\tariaDescribedBy={hintTextId}\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t)}\n\t\t\t\t\t\t{monthVisible && (\n\t\t\t\t\t\t\t<Input\n\t\t\t\t\t\t\t\tid={monthId}\n\t\t\t\t\t\t\t\ttype=\"month\"\n\t\t\t\t\t\t\t\tlabel={dateStrings.month.label[language]}\n\t\t\t\t\t\t\t\taccessibilityLabel={dateStrings.month.accessibility[language]}\n\t\t\t\t\t\t\t\trequired={!!required}\n\t\t\t\t\t\t\t\terror={this.monthInvalid}\n\t\t\t\t\t\t\t\tplaceholder={placeholderText.month}\n\t\t\t\t\t\t\t\tonInput={this.handleDateInput}\n\t\t\t\t\t\t\t\tonChange={this.handleDateChanged}\n\t\t\t\t\t\t\t\tonBlur={this.handleDateBlur}\n\t\t\t\t\t\t\t\tonFocus={this.handleDateFocus}\n\t\t\t\t\t\t\t\tariaDescribedBy={hintTextId}\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t)}\n\t\t\t\t\t\t{dayVisible && (\n\t\t\t\t\t\t\t<Input\n\t\t\t\t\t\t\t\tid={dayId}\n\t\t\t\t\t\t\t\ttype=\"day\"\n\t\t\t\t\t\t\t\tlabel={dateStrings.day.label[language]}\n\t\t\t\t\t\t\t\taccessibilityLabel={dateStrings.day.accessibility[language]}\n\t\t\t\t\t\t\t\trequired={!!required}\n\t\t\t\t\t\t\t\terror={this.dayInvalid}\n\t\t\t\t\t\t\t\tplaceholder={placeholderText.day}\n\t\t\t\t\t\t\t\tonInput={this.handleDateInput}\n\t\t\t\t\t\t\t\tonChange={this.handleDateChanged}\n\t\t\t\t\t\t\t\tonBlur={this.handleDateBlur}\n\t\t\t\t\t\t\t\tonFocus={this.handleDateFocus}\n\t\t\t\t\t\t\t\tariaDescribedBy={hintTextId}\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t)}\n\t\t\t\t\t</div>\n\t\t\t\t</fieldset>\n\t\t\t</div>\n\t\t);\n\t}\n}\n"],"version":3}
+{"file":"ontario-date-input.js","mappings":"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","names":["CommonInput","OntarioDateInput","uuid"],"sources":["src/components/ontario-date-input/components/input.tsx","src/components/ontario-date-input/constants/date-input-constants.ts","src/components/ontario-date-input/utils/date-validation-utils.ts","src/components/ontario-date-input/utils/date-options-utils.ts","src/components/ontario-date-input/ontario-date-input.scss?tag=ontario-date-input&encapsulation=shadow","src/components/ontario-date-input/ontario-date-input.tsx"],"sourcesContent":["import { FunctionalComponent, h } from '@stencil/core';\nimport { DateInputFieldType } from '../ontario-date-input-interface';\nimport { Input as CommonInput } from '../../../utils/common/input/input';\n\nexport type InputProps = {\n\tid: string;\n\ttype: DateInputFieldType;\n\tlabel: string;\n\taccessibilityLabel: string;\n\terror?: boolean;\n\tonInput: (value: string, fieldType: DateInputFieldType) => void;\n\tonChange: (value: string, fieldType: DateInputFieldType) => void;\n\tonBlur: (fieldType: DateInputFieldType) => void;\n\tonFocus: (fieldType: DateInputFieldType) => void;\n\tplaceholder?: string;\n\trequired?: boolean;\n\tariaDescribedBy?: string;\n};\n\nexport const Input: FunctionalComponent<InputProps> = ({\n\tid,\n\ttype,\n\tlabel,\n\taccessibilityLabel,\n\tplaceholder,\n\tonInput,\n\tonChange,\n\tonFocus,\n\tonBlur,\n\tariaDescribedBy,\n\terror = false,\n\trequired = false,\n}) => {\n\tconst handleInputInput = (event: Event) => {\n\t\tconst newValue = (event.target as HTMLInputElement)?.value ?? '';\n\t\tonInput(newValue, type);\n\t};\n\n\tconst handleInputChange = (event: Event) => {\n\t\tconst newValue = (event.target as HTMLInputElement)?.value ?? '';\n\t\tonChange(newValue, type);\n\t};\n\n\tconst handleInputFocus = () => {\n\t\tonFocus(type);\n\t};\n\n\tconst handleInputBlur = () => {\n\t\tonBlur(type);\n\t};\n\n\treturn (\n\t\t<div class={`ontario-date__group-input ${error ? 'ontario-date--error' : ''}`}>\n\t\t\t<label htmlFor={id}>\n\t\t\t\t{label}\n\t\t\t\t<span class=\"ontario-show-for-sr\">({accessibilityLabel})</span>\n\t\t\t</label>\n\t\t\t<CommonInput\n\t\t\t\tclassName=\"ontario-input ontario-input--4-char-width\"\n\t\t\t\ttype=\"text\"\n\t\t\t\tinputMode=\"numeric\"\n\t\t\t\tid={id}\n\t\t\t\trequired={!!required}\n\t\t\t\tplaceholder={placeholder}\n\t\t\t\tonInput={handleInputInput}\n\t\t\t\tonChange={handleInputChange}\n\t\t\t\tonFocus={handleInputFocus}\n\t\t\t\tonBlur={handleInputBlur}\n\t\t\t\tariaInvalid={error}\n\t\t\t\tariaDescribedBy={ariaDescribedBy}\n\t\t\t/>\n\t\t</div>\n\t);\n};\n","export const DAY_MIN_VALUE = 1;\nexport const DAY_MAX_VALUE = 31;\nexport const MONTH_MIN_VALUE = 1;\nexport const MONTH_MAX_VALUE = 12;\nexport const YEAR_MIN_VALUE = 999;\nexport const YEAR_MAX_VALUE = 9999;\n","import {\n\tDAY_MIN_VALUE,\n\tDAY_MAX_VALUE,\n\tMONTH_MIN_VALUE,\n\tMONTH_MAX_VALUE,\n\tYEAR_MIN_VALUE,\n\tYEAR_MAX_VALUE,\n} from '../constants';\nimport { DateValidatorReturnType } from '../ontario-date-input-interface';\nimport { isNumber, isEmpty } from '../../../utils/helper/utils';\nimport { Translations } from '../../../translations';\n/*\n * Day field should be a number, not negative, no greater than “31”\n */\nconst isInvalidDay = (value: string) => {\n\tif (!isNumber(value)) {\n\t\treturn true;\n\t}\n\n\tconst day = Number(value);\n\n\treturn day < DAY_MIN_VALUE || day > DAY_MAX_VALUE;\n};\n\n/*\n * Month field should be a number, not negative, no greater than “12”\n */\nconst isInvalidMonth = (value: string) => {\n\tif (!isNumber(value)) {\n\t\treturn true;\n\t}\n\n\tconst month = Number(value);\n\n\treturn month < MONTH_MIN_VALUE || month > MONTH_MAX_VALUE;\n};\n\n/**\n * Valid value year against minimum and maximum year range (defaulted if not provided.)\n *\n * Year field should be a number and not written out; it has no concept of positive and negative.\n *\n * Suggestion:\n * - `< 0` B.C.E.\n * - `>= 0` A.C.E.\n *\n * @param value value to check for validity\n * @param minYear minimum valid year to validate against\n * @param maxYear maximum valid year to validate against\n */\nexport const isInvalidYear = (\n\tvalue: string | number,\n\tminYear: number = YEAR_MIN_VALUE,\n\tmaxYear: number = YEAR_MAX_VALUE,\n) => {\n\tif (!isNumber(value)) {\n\t\treturn true;\n\t}\n\n\tconst year = Number(value);\n\n\treturn year < minYear || year > maxYear;\n};\n\ntype GetDateErrorArg = {\n\tdayValue: string;\n\tmonthValue: string;\n\tyearValue: string;\n\terrorMessages: Translations['dateInput']['error']['en'];\n\tminYear?: number;\n\tmaxYear?: number;\n\tdayVisible: boolean;\n\tmonthVisible: boolean;\n\tyearVisible: boolean;\n};\n/**\n * Helper function to get error message for birthdate validation\n */\nexport const getDateErrorMessage = ({\n\tdayValue,\n\tmonthValue,\n\tyearValue,\n\terrorMessages,\n\tminYear,\n\tmaxYear,\n\tdayVisible,\n\tmonthVisible,\n\tyearVisible,\n}: GetDateErrorArg): DateValidatorReturnType => {\n\tconst {\n\t\temptyDay,\n\t\temptyMonth,\n\t\temptyYear,\n\t\temptyDayAndMonth,\n\t\temptyDayAndYear,\n\t\temptyMonthAndYear,\n\t\tinvalidDate,\n\t\tinvalidDay,\n\t\tinvalidMonth,\n\t\tinvalidYear,\n\t} = errorMessages;\n\n\tlet error = '';\n\tlet dayInvalid = false;\n\tlet monthInvalid = false;\n\tlet yearInvalid = false;\n\n\tconst isDayEmpty = dayVisible && isEmpty(dayValue);\n\tconst isMonthEmpty = monthVisible && isEmpty(monthValue);\n\tconst isYearEmpty = yearVisible && isEmpty(yearValue);\n\t/*\n\t *  If one ore more fields are valid but others are empty:\n\t *  1 field empty:\n\t *  Day as empty - “Enter the day.”\n\t *  Month as empty - “Enter the month.”\n\t *  Year as empty - “Enter the year.”\n\t *  2 fields empty:\n\t *  Month and day empty - “Enter the month and day.”\n\t *  Year and day empty - “Enter the year and day.”\n\t *  Year and month empty - “Enter the year and month.”\n\t */\n\tif (isDayEmpty && isMonthEmpty && isYearEmpty) {\n\t\terror = invalidDate;\n\t\tdayInvalid = true;\n\t\tmonthInvalid = true;\n\t\tyearInvalid = true;\n\t} else if (isDayEmpty && isMonthEmpty) {\n\t\terror = emptyDayAndMonth;\n\t\tdayInvalid = true;\n\t\tmonthInvalid = true;\n\t} else if (isDayEmpty && isYearEmpty) {\n\t\terror = emptyDayAndYear;\n\t\tdayInvalid = true;\n\t\tyearInvalid = true;\n\t} else if (isMonthEmpty && isYearEmpty) {\n\t\terror = emptyMonthAndYear;\n\t\tyearInvalid = true;\n\t\tmonthInvalid = true;\n\t} else if (isDayEmpty) {\n\t\terror = emptyDay;\n\t\tdayInvalid = true;\n\t} else if (isMonthEmpty) {\n\t\terror = emptyMonth;\n\t\tmonthInvalid = true;\n\t} else if (isYearEmpty) {\n\t\terror = emptyYear;\n\t\tyearInvalid = true;\n\t}\n\n\tconst isDayInvalid = dayVisible && isInvalidDay(dayValue);\n\tconst isMonthInvalid = monthVisible && isInvalidMonth(monthValue);\n\tconst isYearInvalid = yearVisible && isInvalidYear(yearValue, minYear, maxYear);\n\t/*\n\t *  If only one error, specify where the error occurs\n\t *  E.g. “Enter a valid day.”, “Enter a valid month.” Or “Enter a valid year.”\n\t *  If 2 or more fields have error (or all 3), say “Enter a valid date.”\n\t *  If one or more fields are invalid but the others are empty say: “Enter a valid date.”\n\t */\n\tif (isEmpty(error)) {\n\t\tif (isDayInvalid && isMonthInvalid && isYearInvalid) {\n\t\t\terror = invalidDate;\n\t\t\tdayInvalid = true;\n\t\t\tmonthInvalid = true;\n\t\t\tyearInvalid = true;\n\t\t} else if (isDayInvalid && isMonthInvalid) {\n\t\t\terror = invalidDate;\n\t\t\tdayInvalid = true;\n\t\t\tmonthInvalid = true;\n\t\t} else if (isDayInvalid && isYearInvalid) {\n\t\t\terror = invalidDate;\n\t\t\tdayInvalid = true;\n\t\t\tyearInvalid = true;\n\t\t} else if (isMonthInvalid && isYearInvalid) {\n\t\t\terror = invalidDate;\n\t\t\tmonthInvalid = true;\n\t\t\tyearInvalid = true;\n\t\t} else if (isYearInvalid) {\n\t\t\terror = invalidYear;\n\t\t\tyearInvalid = true;\n\t\t} else if (isMonthInvalid) {\n\t\t\terror = invalidMonth;\n\t\t\tmonthInvalid = true;\n\t\t} else if (isDayInvalid) {\n\t\t\terror = invalidDay;\n\t\t\tdayInvalid = true;\n\t\t}\n\t}\n\n\treturn { errorMessage: error, dayInvalid, monthInvalid, yearInvalid };\n};\n","import { DateInputFieldType } from '../ontario-date-input-interface';\n\nexport const getVisibleDateFields = (dateOptions: Array<DateInputFieldType>) => {\n\tconst dayVisible = dateOptions.includes('day');\n\tconst monthVisible = dateOptions.includes('month');\n\tconst yearVisible = dateOptions.includes('year');\n\n\treturn { dayVisible, monthVisible, yearVisible };\n};\n","@use '@ongov/ontario-design-system-global-styles/dist/styles/scss/1-variables/colours.variables' as colours;\n@use '@ongov/ontario-design-system-global-styles/dist/styles/scss/1-variables/spacing.variables' as spacing;\n@use '@ongov/ontario-design-system-global-styles/dist/styles/scss/1-variables/font-weights.variables' as fontWeights;\n@use '@ongov/ontario-design-system-global-styles/dist/styles/scss/1-variables/global.variables' as globalVariables;\n@use '@ongov/ontario-design-system-global-styles/dist/styles/scss/4-elements/_global.elements.scss';\n@use '../../styles/form.scss';\n@forward '../../utils/components/error-message/error-message';\n\n.ontario-date__group {\n\tdisplay: flex;\n\n\tlabel {\n\t\tfont-weight: fontWeights.$ontario-font-weights-semi-bold;\n\t}\n\n\tinput {\n\t\tmargin-top: spacing.$spacing-4;\n\t}\n}\n\n.ontario-date__group-input {\n\tdisplay: flex;\n\tflex-direction: column;\n\tmargin-right: spacing.$spacing-5;\n}\n\n.ontario-date--error {\n\tinput {\n\t\tborder: 0.125rem solid colours.$ontario-colour-alert;\n\t}\n}\n","import { Component, EventEmitter, Element, Watch, Event, Prop, h, State, Listen, AttachInternals } from '@stencil/core';\nimport { v4 as uuid } from 'uuid';\nimport { Language } from '../../utils/common/language-types';\nimport { validateLanguage } from '../../utils/validation/validation-functions';\nimport { translations, Translations } from '../../translations';\nimport { Input } from './components';\nimport { getDateErrorMessage, getVisibleDateFields } from './utils';\nimport { DateInputFieldType, DateInputPlaceholder, DateValidatorReturnType } from './ontario-date-input-interface';\nimport { ErrorMessage } from '../../utils/components/error-message/error-message';\nimport { ConsoleMessageClass } from '../../utils/console-message/console-message';\nimport { ConsoleType } from '../../utils/console-message/console-message.enum';\nimport { InputCaption } from '../../utils/common/input-caption/input-caption';\nimport { Caption } from '../../utils/common/input-caption/caption.interface';\nimport { emitEvent } from '../../utils/events/event-handler';\n\n@Component({\n\ttag: 'ontario-date-input',\n\tstyleUrl: 'ontario-date-input.scss',\n\tshadow: true,\n\tformAssociated: true,\n})\nexport class OntarioDateInput {\n\t@Element() element: HTMLElement;\n\t@AttachInternals() internals: ElementInternals;\n\n\t/**\n\t * The language of the component.\n\t * This is used for translations, and is by default set through event listeners checking for a language property from the header. If none are passed, it will default to English.\n\t */\n\t@Prop({ mutable: true }) language?: Language;\n\n\t/**\n\t * A boolean value to determine whether or not the date input is required.\n\t *\n\t * This is optional. If no prop is passed, it will default to `false`.\n\t */\n\t@Prop() required?: boolean = false;\n\n\t/**\n\t * An object value used to set the placeholder text for the day, month and year input fields. Any combination of the three input fields (i.e day, month, year)\n\t * of the date component can be overridden.\n\t *\n\t * This is optional. If no prop is passed, it will not display any placeholder text.\n\t */\n\t@Prop() placeholder?: DateInputPlaceholder | string;\n\n\t/**\n\t * The text to display as the input label\n\t *\n\t * @example\n\t * <ontario-date-input\n\t *   caption='{\n\t *     \"captionText\": \"Exact Date\",\n\t *     \"captionType\": \"heading\",\n\t *   }\n\t *   required=\"true\"\n\t *   ...>\n\t * </ontario-date-input>\n\t */\n\t@Prop() caption: Caption | string;\n\n\t/**\n\t * The unique identifier of the input. This is optional - if no ID is passed, one will be generated.\n\t */\n\t@Prop({ mutable: true }) elementId?: string;\n\n\t/**\n\t * A number value indicating minimum value allowed for year input field of the date component.\n\t *\n\t * This is optional. If no prop is passed, it will default to `999`.\n\t */\n\t@Prop() minYear?: number;\n\n\t/**\n\t * A number value indicating maximum value allowed for year input field of the date component.\n\t *\n\t * This is optional. If no prop is passed, it will default to `9999`.\n\t */\n\t@Prop() maxYear?: number;\n\n\t/**\n\t * Used to include the ontario-hint-text component for the date input group.\n\t *\n\t * This is optional.\n\t */\n\t@Prop() hintText?: string;\n\n\t/**\n\t * An array value used to display date options. For example, only the day and month fields can be displayed by\n\t * specifying the dateOptions as `[\"day\", \"month\"]`, etc.\n\t *\n\t * This is optional. If no prop for `dateOptions` is passed, it will default to `[\"day\", \"month\", \"year\"]`.\n\t */\n\t@Prop() dateOptions?: string | Array<DateInputFieldType> = ['day', 'month', 'year'];\n\n\t/**\n\t * A function used to override internal date validation logic, which takes three arguments (i.e day, month and year) and returns\n\t * an object of type `DateValidatorReturnType`\n\t *\n\t * This is optional. If no prop for `dateValidator` is passed, it will default to internal validation function to validate\n\t * the date input.\n\t */\n\t@Prop() dateValidator?: (day: string, month: string, year: string) => DateValidatorReturnType;\n\n\t/**\n\t * Emitted when an `input` event occurs within the component.\n\t */\n\t@Event() inputOnInput: EventEmitter<{\n\t\tvalue: string;\n\t\tfieldType: 'day' | 'month' | 'year';\n\t}>;\n\n\t/**\n\t * Emitted when a `change` event occurs within the component.\n\t */\n\t@Event() inputOnChange: EventEmitter<{\n\t\tvalue: string;\n\t\tfieldType: 'day' | 'month' | 'year';\n\t}>;\n\n\t/**\n\t * Emitted when a keyboard input event occurs when an input has lost focus.\n\t */\n\t@Event() inputOnBlur: EventEmitter<'day' | 'month' | 'year'>;\n\n\t/**\n\t * Emitted when a keyboard input event occurs when an input has gained focus.\n\t */\n\t@Event() inputOnFocus: EventEmitter<'day' | 'month' | 'year'>;\n\n\t/**\n\t * Emitted when an error message is reported to the component.\n\t */\n\t@Event() inputErrorOccurred: EventEmitter<{ inputId: string; errorMessage: string }>;\n\n\t@Watch('errorMessage')\n\tbroadcastInputErrorOccurredEvent() {\n\t\t// Emit event to notify anyone who wants to listen for errors occurring\n\t\tthis.inputErrorOccurred.emit({ inputId: this.getId(), errorMessage: this.errorMessage ?? '' });\n\t}\n\n\t/**\n\t * This listens for the `setAppLanguage` event sent from the test language toggler when it is is connected to the DOM. It is used for the initial language when the input component loads.\n\t */\n\t@Listen('setAppLanguage', { target: 'window' })\n\thandleSetAppLanguage(event: CustomEvent<Language>) {\n\t\tif (!this.language) {\n\t\t\tthis.language = validateLanguage(event);\n\t\t}\n\t}\n\n\t@Listen('headerLanguageToggled', { target: 'window' })\n\thandleHeaderLanguageToggled(event: CustomEvent<Language>) {\n\t\tthis.language = validateLanguage(event);\n\t}\n\n\t@Listen('blur', { capture: true })\n\thandleComponentBlur() {\n\t\tconst { day, month, year, minYear, maxYear, dateValidator, dateOptionsState } = this;\n\t\tconst { dayVisible, monthVisible, yearVisible } = getVisibleDateFields(dateOptionsState);\n\n\t\t// if user has not interacted with the component, skip validation\n\t\tif (!this.isDateTyped) {\n\t\t\treturn;\n\t\t}\n\t\tconst errorMessages = translations.dateInput.error[this.getLanguage()];\n\t\tconst { dayInvalid, monthInvalid, yearInvalid, errorMessage } = dateValidator\n\t\t\t? dateValidator(day, month, year)\n\t\t\t: getDateErrorMessage({\n\t\t\t\t\tdayValue: day,\n\t\t\t\t\tmonthValue: month,\n\t\t\t\t\tyearValue: year,\n\t\t\t\t\terrorMessages,\n\t\t\t\t\tminYear,\n\t\t\t\t\tmaxYear,\n\t\t\t\t\tdayVisible,\n\t\t\t\t\tmonthVisible,\n\t\t\t\t\tyearVisible,\n\t\t\t\t});\n\n\t\tthis.dayInvalid = dayInvalid;\n\t\tthis.monthInvalid = monthInvalid;\n\t\tthis.yearInvalid = yearInvalid;\n\t\tthis.errorMessage = errorMessage;\n\t}\n\n\t@State() private translations: Translations = translations;\n\t@State() private captionState: InputCaption;\n\n\t@State() private isDateTyped: boolean = false;\n\t@State() private dayInvalid: boolean = false;\n\t@State() private monthInvalid: boolean = false;\n\t@State() private yearInvalid: boolean = false;\n\t@State() private errorMessage: string | undefined;\n\n\t@State() private day: string = '';\n\t@State() private month: string = '';\n\t@State() private year: string = '';\n\n\t@State() private placeholderState: DateInputPlaceholder;\n\t@State() private dateOptionsState: Array<DateInputFieldType>;\n\n\t/**\n\t * Watch for changes to the `caption` prop.\n\t *\n\t * The caption will be run through the InputCaption constructor to convert it to the correct format, and set the result to the `captionState` state.\n\t * @param newValue: Caption | string\n\t */\n\t@Watch('caption')\n\tprivate updateCaptionState(newValue: Caption | string) {\n\t\tthis.captionState = new InputCaption(\n\t\t\tthis.element.tagName,\n\t\t\tnewValue,\n\t\t\ttranslations,\n\t\t\tthis.language,\n\t\t\ttrue,\n\t\t\tthis.required,\n\t\t);\n\t}\n\n\t/**\n\t * Watch for changes in the `language` prop to render either the English or French translations\n\t */\n\t@Watch('language')\n\tupdateLanguage() {\n\t\tthis.updateCaptionState(this.caption);\n\t}\n\n\tprivate processPlaceholder() {\n\t\tthis.parseOptions(this.placeholder);\n\t}\n\n\tprivate processDateOptions() {\n\t\tthis.parseOptions(this.dateOptions);\n\t}\n\n\tprivate parseOptions(options: any) {\n\t\tconst isString = typeof options === 'string';\n\t\tif (!options) {\n\t\t\treturn;\n\t\t}\n\n\t\ttry {\n\t\t\tif (options === this.placeholder) {\n\t\t\t\tthis.placeholderState = isString ? JSON.parse(options) : options;\n\t\t\t} else if (options === this.dateOptions) {\n\t\t\t\tthis.dateOptionsState = isString ? JSON.parse(options) : options;\n\t\t\t}\n\t\t} catch (error) {\n\t\t\tconst message = new ConsoleMessageClass();\n\t\t\tmessage\n\t\t\t\t.addDesignSystemTag()\n\t\t\t\t.addRegularText(' failed to parse props for ')\n\t\t\t\t.addMonospaceText('<ontario-date-input>')\n\t\t\t\t.addRegularText(' in ')\n\t\t\t\t.addMonospaceText('parseOptions()')\n\t\t\t\t.addRegularText(' method \\n ')\n\t\t\t\t.addMonospaceText(error.stack)\n\t\t\t\t.printMessage(ConsoleType.Error);\n\t\t}\n\t}\n\n\tprivate isInvalidDate = () => {\n\t\treturn this.dayInvalid || this.monthInvalid || this.yearInvalid;\n\t};\n\n\tprivate resetErrorState = () => {\n\t\tif (!this.isInvalidDate()) {\n\t\t\treturn;\n\t\t}\n\n\t\tthis.dayInvalid = false;\n\t\tthis.monthInvalid = false;\n\t\tthis.yearInvalid = false;\n\t\tthis.errorMessage = '';\n\t};\n\n\tprivate updateDateState = (value: string, inputFieldType: DateInputFieldType) => {\n\t\tswitch (inputFieldType) {\n\t\t\tcase 'day':\n\t\t\t\tthis.day = value;\n\t\t\t\tbreak;\n\t\t\tcase 'month':\n\t\t\t\tthis.month = value;\n\t\t\t\tbreak;\n\t\t\tcase 'year':\n\t\t\t\tthis.year = value;\n\t\t\t\tbreak;\n\t\t}\n\t};\n\n\tprivate handleDateUpdates = (value: string, fieldType: DateInputFieldType) => {\n\t\t// set boolean indicating user interaction with the component for validation\n\t\tif (!this.isDateTyped) {\n\t\t\tthis.isDateTyped = true;\n\t\t}\n\n\t\t// reset error state when user starts typing\n\t\tthis.resetErrorState();\n\n\t\t// update date state\n\t\tthis.updateDateState(value, fieldType);\n\n\t\t// TODO: verify are all the values numbers?\n\t\tif (this.year && this.month && this.day) {\n\t\t\tconst desiredDate = new Date(\n\t\t\t\tDate.UTC(parseInt(this.year), parseInt(this.month) - 1, parseInt(this.day), 0, 0, 0, 0),\n\t\t\t);\n\t\t\tthis.internals?.setFormValue?.(desiredDate.toISOString());\n\t\t}\n\t};\n\n\tprivate handleDateInput = (value: string, fieldType: DateInputFieldType) => {\n\t\tthis.handleDateUpdates(value, fieldType);\n\n\t\t// emit date change event\n\t\tthis.inputOnInput.emit({ value, fieldType });\n\t};\n\n\tprivate handleDateChanged = (value: string, fieldType: DateInputFieldType) => {\n\t\tthis.handleDateUpdates(value, fieldType);\n\n\t\t// emit date change event\n\t\tthis.inputOnChange.emit({ value, fieldType });\n\n\t\t// emit change event\n\t\temitEvent(this.element, 'change', { value, fieldType });\n\t};\n\n\tprivate handleDateFocus = (fieldType: DateInputFieldType) => {\n\t\t// emit date field focus event\n\t\tthis.inputOnFocus.emit(fieldType);\n\t};\n\n\tprivate handleDateBlur = (fieldType: DateInputFieldType) => {\n\t\t// emit date field focus event\n\t\tthis.inputOnBlur.emit(fieldType);\n\t};\n\n\tprivate getLanguage(): Language {\n\t\treturn this.language ?? 'en';\n\t}\n\n\tprivate getCaption(): Caption | string {\n\t\tconst language = this.getLanguage();\n\t\tconst captionText = translations.dateInput.caption[language];\n\n\t\treturn this.caption ?? { captionText, captionType: 'default' };\n\t}\n\n\tprivate getId(): string {\n\t\treturn this.elementId ?? '';\n\t}\n\n\tprivate getHintTextId(): string {\n\t\treturn `date-input-hint-${this.getId()}`;\n\t}\n\n\tprivate getInputIds() {\n\t\tconst id = this.getId();\n\n\t\tconst dayId = `day-${id}`;\n\t\tconst monthId = `month-${id}`;\n\t\tconst yearId = `year-${id}`;\n\n\t\treturn { dayId, monthId, yearId };\n\t}\n\n\tcomponentWillLoad() {\n\t\tthis.processPlaceholder();\n\t\tthis.processDateOptions();\n\n\t\tthis.updateCaptionState(this.getCaption());\n\t\tthis.elementId = this.elementId ?? uuid();\n\n\t\tthis.language = validateLanguage(this.language) as Language;\n\t}\n\n\trender() {\n\t\tconst { dateOptionsState, required, translations, hintText, placeholderState } = this;\n\t\tconst language = this.getLanguage();\n\t\tconst dateStrings = translations.dateInput;\n\t\tconst placeholderText = placeholderState ?? {};\n\t\tconst { dayVisible, monthVisible, yearVisible } = getVisibleDateFields(dateOptionsState);\n\t\tconst { dayId, monthId, yearId } = this.getInputIds();\n\t\tconst hintTextId = this.getHintTextId();\n\n\t\treturn (\n\t\t\t<div class=\"ontario-form-group\">\n\t\t\t\t<fieldset role=\"group\" class=\"ontario-fieldset\">\n\t\t\t\t\t{this.captionState.getCaption()}\n\t\t\t\t\t{!!hintText && (\n\t\t\t\t\t\t<p id={hintTextId} class=\"ontario-hint\">\n\t\t\t\t\t\t\t{hintText}\n\t\t\t\t\t\t</p>\n\t\t\t\t\t)}\n\t\t\t\t\t<ErrorMessage message={this.errorMessage} error={this.isInvalidDate()} />\n\t\t\t\t\t<div class=\"ontario-date__group\">\n\t\t\t\t\t\t{yearVisible && (\n\t\t\t\t\t\t\t<Input\n\t\t\t\t\t\t\t\tid={yearId}\n\t\t\t\t\t\t\t\ttype=\"year\"\n\t\t\t\t\t\t\t\tlabel={dateStrings.year.label[language]}\n\t\t\t\t\t\t\t\taccessibilityLabel={dateStrings.year.accessibility[language]}\n\t\t\t\t\t\t\t\trequired={!!required}\n\t\t\t\t\t\t\t\terror={this.yearInvalid}\n\t\t\t\t\t\t\t\tplaceholder={placeholderText.year}\n\t\t\t\t\t\t\t\tonInput={this.handleDateInput}\n\t\t\t\t\t\t\t\tonChange={this.handleDateChanged}\n\t\t\t\t\t\t\t\tonBlur={this.handleDateBlur}\n\t\t\t\t\t\t\t\tonFocus={this.handleDateFocus}\n\t\t\t\t\t\t\t\tariaDescribedBy={hintTextId}\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t)}\n\t\t\t\t\t\t{monthVisible && (\n\t\t\t\t\t\t\t<Input\n\t\t\t\t\t\t\t\tid={monthId}\n\t\t\t\t\t\t\t\ttype=\"month\"\n\t\t\t\t\t\t\t\tlabel={dateStrings.month.label[language]}\n\t\t\t\t\t\t\t\taccessibilityLabel={dateStrings.month.accessibility[language]}\n\t\t\t\t\t\t\t\trequired={!!required}\n\t\t\t\t\t\t\t\terror={this.monthInvalid}\n\t\t\t\t\t\t\t\tplaceholder={placeholderText.month}\n\t\t\t\t\t\t\t\tonInput={this.handleDateInput}\n\t\t\t\t\t\t\t\tonChange={this.handleDateChanged}\n\t\t\t\t\t\t\t\tonBlur={this.handleDateBlur}\n\t\t\t\t\t\t\t\tonFocus={this.handleDateFocus}\n\t\t\t\t\t\t\t\tariaDescribedBy={hintTextId}\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t)}\n\t\t\t\t\t\t{dayVisible && (\n\t\t\t\t\t\t\t<Input\n\t\t\t\t\t\t\t\tid={dayId}\n\t\t\t\t\t\t\t\ttype=\"day\"\n\t\t\t\t\t\t\t\tlabel={dateStrings.day.label[language]}\n\t\t\t\t\t\t\t\taccessibilityLabel={dateStrings.day.accessibility[language]}\n\t\t\t\t\t\t\t\trequired={!!required}\n\t\t\t\t\t\t\t\terror={this.dayInvalid}\n\t\t\t\t\t\t\t\tplaceholder={placeholderText.day}\n\t\t\t\t\t\t\t\tonInput={this.handleDateInput}\n\t\t\t\t\t\t\t\tonChange={this.handleDateChanged}\n\t\t\t\t\t\t\t\tonBlur={this.handleDateBlur}\n\t\t\t\t\t\t\t\tonFocus={this.handleDateFocus}\n\t\t\t\t\t\t\t\tariaDescribedBy={hintTextId}\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t)}\n\t\t\t\t\t</div>\n\t\t\t\t</fieldset>\n\t\t\t</div>\n\t\t);\n\t}\n}\n"],"version":3}