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

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

@@ -10,102 +10,100 @@ import { ConsoleType } from '../../utils/console-message/console-message.enum';
 import { InputCaption } from '../../utils/common/input-caption/input-caption';
 import { emitEvent } from '../../utils/events/event-handler';
 export class OntarioDateInput {
-	constructor() {
-		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;
-	}
+	element;
+	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.
@@ -138,12 +136,24 @@ export class OntarioDateInput {
 					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.
 	 *
@@ -196,19 +206,78 @@ export class OntarioDateInput {
 				.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()}`;
@@ -221,39 +290,40 @@ export class OntarioDateInput {
 		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 : uuid();
+		this.elementId = this.elementId ?? uuid();
 		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],
@@ -269,6 +339,7 @@ export class OntarioDateInput {
 						}),
 					monthVisible &&
 						h(Input, {
+							key: 'cc1743b3e15b8ce55708e2825e86afd4f3cf3a8d',
 							id: monthId,
 							type: 'month',
 							label: dateStrings.month.label[language],
@@ -284,6 +355,7 @@ export class OntarioDateInput {
 						}),
 					dayVisible &&
 						h(Input, {
+							key: '4581a7e1f0603e44fbdee0e4c48d6286c7593eec',
 							id: dayId,
 							type: 'day',
 							label: dateStrings.day.label[language],
@@ -342,6 +414,8 @@ export class OntarioDateInput {
 					tags: [],
 					text: 'The language of the component.\nThis 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.',
 				},
+				getter: false,
+				setter: false,
 				attribute: 'language',
 				reflect: false,
 			},
@@ -359,6 +433,8 @@ export class OntarioDateInput {
 					tags: [],
 					text: 'A boolean value to determine whether or not the date input is required.\n\nThis is optional. If no prop is passed, it will default to `false`.',
 				},
+				getter: false,
+				setter: false,
 				attribute: 'required',
 				reflect: false,
 				defaultValue: 'false',
@@ -384,6 +460,8 @@ export class OntarioDateInput {
 					tags: [],
 					text: '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)\nof the date component can be overridden.\n\nThis is optional. If no prop is passed, it will not display any placeholder text.',
 				},
+				getter: false,
+				setter: false,
 				attribute: 'placeholder',
 				reflect: false,
 			},
@@ -412,6 +490,8 @@ export class OntarioDateInput {
 					],
 					text: 'The text to display as the input label',
 				},
+				getter: false,
+				setter: false,
 				attribute: 'caption',
 				reflect: false,
 			},
@@ -429,6 +509,8 @@ export class OntarioDateInput {
 					tags: [],
 					text: 'The unique identifier of the input. This is optional - if no ID is passed, one will be generated.',
 				},
+				getter: false,
+				setter: false,
 				attribute: 'element-id',
 				reflect: false,
 			},
@@ -446,6 +528,8 @@ export class OntarioDateInput {
 					tags: [],
 					text: 'A number value indicating minimum value allowed for year input field of the date component.\n\nThis is optional. If no prop is passed, it will default to `999`.',
 				},
+				getter: false,
+				setter: false,
 				attribute: 'min-year',
 				reflect: false,
 			},
@@ -463,6 +547,8 @@ export class OntarioDateInput {
 					tags: [],
 					text: 'A number value indicating maximum value allowed for year input field of the date component.\n\nThis is optional. If no prop is passed, it will default to `9999`.',
 				},
+				getter: false,
+				setter: false,
 				attribute: 'max-year',
 				reflect: false,
 			},
@@ -480,6 +566,8 @@ export class OntarioDateInput {
 					tags: [],
 					text: 'Used to include the ontario-hint-text component for the date input group.\n\nThis is optional.',
 				},
+				getter: false,
+				setter: false,
 				attribute: 'hint-text',
 				reflect: false,
 			},
@@ -507,6 +595,8 @@ export class OntarioDateInput {
 					tags: [],
 					text: 'An array value used to display date options. For example, only the day and month fields can be displayed by\nspecifying the dateOptions as `["day", "month"]`, etc.\n\nThis is optional. If no prop for `dateOptions` is passed, it will default to `["day", "month", "year"]`.',
 				},
+				getter: false,
+				setter: false,
 				attribute: 'date-options',
 				reflect: false,
 				defaultValue: "['day', 'month', 'year']",
@@ -531,6 +621,8 @@ export class OntarioDateInput {
 					tags: [],
 					text: 'A function used to override internal date validation logic, which takes three arguments (i.e day, month and year) and returns\nan object of type `DateValidatorReturnType`\n\nThis is optional. If no prop for `dateValidator` is passed, it will default to internal validation function to validate\nthe date input.',
 				},
+				getter: false,
+				setter: false,
 			},
 		};
 	}

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

@@ -1 +1 @@
-{"version":3,"file":"ontario-date-input.js","sourceRoot":"","sources":["../../../src/components/ontario-date-input/ontario-date-input.tsx"],"names":[],"mappings":"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","sourcesContent":["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","sourceRoot":"","sources":["../../../src/components/ontario-date-input/ontario-date-input.tsx"],"names":[],"mappings":"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","sourcesContent":["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"]}

package/dist/collection/components/ontario-dropdown-list/ontario-dropdown-list.css

@@ -28,6 +28,9 @@
 /* -------------------------------
     Global font-size variables
 --------------------------------- */
+/* -------------------------------
+    Global font variables
+--------------------------------- */
 /*** 1 - Breakpoint sizes for media queries ***/ /* -------------------------------
     Global letter-spacing variables
 --------------------------------- */