@ongov/ontario-design-system-component-library 4.2.0-alpha.1

package/dist/components/ontario-input.js

@@ -0,0 +1,394 @@
+import { proxyCustomElement, HTMLElement, createEvent, h } from '@stencil/core/internal/client';
+import { I as Input } from './input.js';
+import { I as InputCaption, h as handleInputEvent, E as EventType } from './event-handler.js';
+import { v as validateLanguage, b as validatePropExists } from './validation-functions.js';
+import { t as translations } from './global.i18n.js';
+import { c as constructHintTextObject } from './hints.js';
+import { C as ConsoleMessageClass } from './console-message.js';
+import { E as ErrorMessage } from './error-message.js';
+import { d as defineCustomElement$6 } from './ontario-hint-expander2.js';
+import { d as defineCustomElement$5 } from './ontario-hint-text2.js';
+import { d as defineCustomElement$4 } from './ontario-icon-alert-error2.js';
+import { d as defineCustomElement$3 } from './ontario-icon-chevron-down2.js';
+import { d as defineCustomElement$2 } from './ontario-icon-chevron-up2.js';
+import { v as v4 } from './v4.js';
+
+const ontarioInputCss =
+	'@charset "UTF-8";h6,.ontario-h6,h5,.ontario-h5,h4,.ontario-h4,h3,.ontario-h3,h2,.ontario-h2,h1>.ontario-label--heading,.ontario-fieldset__legend--large h1,.ontario-fieldset__legend--heading h1,h1,.ontario-h1{font-style:normal;font-weight:700;text-rendering:optimizeLegibility;margin-bottom:1rem;font-feature-settings:normal;font-family:"Raleway", "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif}h1>.ontario-label--heading,.ontario-fieldset__legend--large h1,.ontario-fieldset__legend--heading h1,h1,.ontario-h1{font-size:2rem;letter-spacing:0.04rem;line-height:1.29;margin:2.5rem 0 1.5rem 0;max-width:70rem}@media screen and (min-width: 40em){h1>.ontario-label--heading,.ontario-fieldset__legend--large h1,.ontario-fieldset__legend--heading h1,h1,.ontario-h1{font-size:2.5rem;letter-spacing:0.04rem;line-height:1.2}}h2,.ontario-h2{font-size:1.6875rem;letter-spacing:0.03rem;line-height:1.37;margin:0 0 0.75rem 0;max-width:48rem}@media screen and (min-width: 40em){h2,.ontario-h2{font-size:2.0625rem;letter-spacing:0.02rem;line-height:1.33}}h3,.ontario-h3{font-size:1.4375rem;letter-spacing:0.02rem;line-height:1.39;margin:0 0 0.75rem 0;max-width:48rem}@media screen and (min-width: 40em){h3,.ontario-h3{font-size:1.75rem;letter-spacing:0.02rem;line-height:1.43}}h4,.ontario-h4{font-size:1.25rem;letter-spacing:0.03rem;line-height:1.5;margin:0 0 0.75rem 0;max-width:48rem}@media screen and (min-width: 40em){h4,.ontario-h4{font-size:1.5rem;letter-spacing:0.0313rem;line-height:1.5}}h5,.ontario-h5{font-size:1.125rem;letter-spacing:0.03rem;line-height:1.56;margin:0 0 0.75rem 0;max-width:48rem}@media screen and (min-width: 40em){h5,.ontario-h5{font-size:1.1875rem;letter-spacing:0.025rem;line-height:1.5}}h6,.ontario-h6{font-size:1rem;line-height:1.56;letter-spacing:0.03rem;max-width:48rem;margin:0 0 0.75rem 0}@media screen and (min-width: 40em){h6,.ontario-h6{font-size:1rem;letter-spacing:0.025rem;line-height:1.5}}.ontario-lead-statement{font-size:1.25rem;line-height:1.6;max-width:70rem}@media screen and (min-width: 40em){.ontario-lead-statement{font-size:1.375rem}}.ontario-input:focus,.ontario-input:active{box-shadow:0 0 0 4px #009ADB;outline:4px solid transparent;transition:box-shadow 0.1s ease-in-out}html{font-family:"Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;font-size:1rem}body{font-size:1rem;line-height:1.6;background-color:#FFFFFF;color:#1a1a1a;margin:0}p{font-size:inherit;margin-bottom:1.25rem;text-rendering:optimizeLegibility;margin:0 0 1.5rem 0}cite{font-style:italic;line-height:inherit}strong{font-weight:700;line-height:inherit}*,*::before,*::after{box-sizing:inherit}main p,main p:not(.ontario-lead-statement),main dd,main li{max-width:48rem}hr{border:0;padding:0;margin:2.5rem 0;border-bottom:4px solid #cccccc}hr.ontario-hr--dark{border-bottom:4px solid #1a1a1a}a{color:#0066CC;text-decoration:underline}a:visited{color:#551A8B}a:hover{color:#00478F}a:active{color:#002142}a:focus{-moz-box-shadow:0 0 0 4px #009ADB;-webkit-box-shadow:0 0 0 4px #009ADB;box-shadow:0 0 0 4px #009ADB;outline:4px solid transparent;transition:all 0.1s ease-in-out}​p{margin:0 0 1.5rem 0}​p+h1,p+h2,p+h3,p+h4,p+h5,p+h6,ul+h1,ul+h2,ul+h3,ul+h4,ul+h5,ul+h6,ol+h1,ol+h2,ol+h3,ol+h4,ol+h5,ol+h6,h1+h2,h2+h3,h3+h4,h4+h5,h5+h6{margin-top:2rem}p code,td code,li code{line-height:2.25rem}input[type=text],input[type=number],input[type=email],input[type=date],input[type=color],input[type=search],input[type=tel],textarea{background-origin:initial;height:auto;-webkit-appearance:none;-moz-appearance:none}input[type=checkbox]+label,input[type=radio]+label{font-family:"Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;font-size:1rem;font-weight:400;margin-left:0;margin-right:0}fieldset{border:0;margin:0;padding:0;page-break-inside:avoid}legend,label{display:block;margin:0}select{background-origin:initial;height:auto;-webkit-appearance:none;-moz-appearance:none}ul,ol{padding:0}ul{margin-left:2rem}ul li{padding:0 0 0.75rem 0}ol{margin-left:1.75rem}ol li{padding:0 0 0.75rem 0.25rem}ul li:last-child,ol li:last-child{padding-bottom:0}ul[class*=columns-] li:last-child,ol[class*=columns-] li:last-child{padding-bottom:0.75rem}ul ul,ol ul{margin:0.5rem 0 0.5rem 2rem}ul ol,ol ol{margin:0.5rem 0 0.5rem 1.75rem}p+ul,p+ol{margin-top:-0.75rem}@media screen and (min-width: 40em){ul{margin:0.5rem 0 1.5rem 3rem}ol{margin:0.5rem 0 1.5rem 2.75rem}ul ul,ol ul{margin:0.5rem 0 0.5rem 3rem}ul ol,ol ol{margin:0.5rem 0 0.5rem 2.75rem}}.ontario-form-group:last-of-type{margin-bottom:3rem}.ontario-fieldset__legend{color:#1a1a1a;font-family:"Raleway", "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;font-size:1.1875rem;font-weight:700;margin:0 0 1rem 0;line-height:1.5;max-width:38.75em;white-space:normal;width:100%}@media screen and (max-width: 40em){.ontario-fieldset__legend{font-size:1.125rem;line-height:1.56}}.ontario-fieldset__legend--large,.ontario-fieldset__legend--heading{letter-spacing:0.02rem;line-height:1.2}.ontario-fieldset__legend--large h1,.ontario-fieldset__legend--heading h1{display:inline-block;margin:0}@media screen and (max-width: 40em){.ontario-fieldset__legend--large,.ontario-fieldset__legend--heading{font-size:1.4375rem;line-height:1.39}}.ontario-fieldset__legend--large{font-size:1.75rem}.ontario-fieldset__legend-required-flag,.ontario-fieldset__legend-optional-flag{font-family:"Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;font-size:1rem;font-weight:400}.ontario-fieldset__legend-required-flag:before,.ontario-fieldset__legend-optional-flag:before{content:" "}.ontario-label__flag{font-family:"Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;font-size:1rem;font-weight:400}.ontario-label__flag:before{content:" "}.ontario-label{cursor:pointer;color:#1a1a1a;font-family:"Raleway", "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;font-size:1.1875rem;font-weight:700;line-height:1.5;margin:0 0 1rem 0;max-width:38.75em;white-space:normal;width:100%}@media screen and (max-width: 40em){.ontario-label{font-size:1.125rem;line-height:1.56}}.ontario-label--large{font-size:1.75rem;letter-spacing:0.02rem;line-height:1.2;max-width:26.25em}@media screen and (max-width: 40em){.ontario-label--large{font-size:1.4375rem;line-height:1.39}}h1>.ontario-label--heading{display:inline-block;margin:0}.ontario-label__flag{font-family:"Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;font-size:1rem;font-weight:400}.ontario-label__flag:before{content:" "}.ontario-input{border:2px solid #1a1a1a;border-radius:4px;box-sizing:border-box;color:#1a1a1a;display:block;font-size:1rem;font-family:"Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;line-height:1.5;margin:0 0 2.5rem;max-width:48rem;width:100%;padding:0.625rem 1rem;transition:box-shadow 0.1s ease-in-out}.ontario-input--2-char-width{max-width:8ex}.ontario-input--3-char-width{max-width:10ex}.ontario-input--4-char-width{max-width:12ex}.ontario-input--5-char-width{max-width:14ex}.ontario-input--7-char-width{max-width:17ex}.ontario-input--10-char-width{max-width:23ex}.ontario-input--20-char-width{max-width:41ex}.ontario-form-group:last-of-type{margin-bottom:2.5rem}.ontario-hide{display:none !important}.ontario-invisible{visibility:hidden !important}@media screen and (max-width: 39.937em){.ontario-hide-for-small-only{display:none !important}}@media screen and (max-width: 0em), screen and (min-width: 40em){.ontario-show-for-small-only{display:none !important}}@media print, screen and (min-width: 40em){.ontario-hide-for-medium{display:none !important}}@media screen and (max-width: 39.937em){.ontario-show-for-medium{display:none !important}}@media screen and (min-width: 40em) and (max-width: 72.937em){.ontario-hide-for-medium-only{display:none !important}}@media screen and (max-width: 39.937em), screen and (min-width: 73em){.ontario-show-for-medium-only{display:none !important}}@media print, screen and (min-width: 73em){.ontario-hide-for-large{display:none !important}}@media screen and (max-width: 72.937em){.ontario-show-for-large{display:none !important}}@media screen and (min-width: 73em) and (max-width: 95.937em){.ontario-hide-for-large-only{display:none !important}}@media screen and (max-width: 72.937em), screen and (min-width: 96em){.ontario-show-for-large-only{display:none !important}}.ontario-show-for-sr,.ontario-show-on-focus{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0, 0, 0, 0)}.ontario-show-on-focus:active,.ontario-show-on-focus:focus{position:static;width:auto;height:auto;overflow:visible;clip:auto}.ontario-show-for-landscape,.ontario-hide-for-portrait{display:block !important}@media screen and (orientation: landscape){.ontario-show-for-landscape,.ontario-hide-for-portrait{display:block !important}}@media screen and (orientation: portrait){.ontario-show-for-landscape,.ontario-hide-for-portrait{display:none !important}}.ontario-hide-for-landscape,.ontario-show-for-portrait{display:none !important}@media screen and (orientation: landscape){.ontario-hide-for-landscape,.ontario-show-for-portrait{display:none !important}}@media screen and (orientation: portrait){.ontario-hide-for-landscape,.ontario-show-for-portrait{display:block !important}}.ontario-error-messaging{display:flex;align-items:flex-start;margin:-0.25rem 0 0.5rem 0;color:#D81A21;max-width:48rem}.ontario-error-messaging__content{margin-left:0.5rem}.ontario-input__error{border-color:#D81A21 !important}.ontario-error__hidden{display:none}.ontario-input{border:2px solid #1a1a1a;border-radius:4px;box-sizing:border-box;color:#1a1a1a;display:block;font-size:1rem;font-family:"Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;line-height:1.5;margin:0 0 2.5rem;max-width:48rem;padding:0.625rem 1rem;transition:box-shadow 0.1s ease-in-out;width:100%}.ontario-input-hint-expander--true{margin-bottom:1rem}.ontario-input--2-char-width{max-width:8ex}.ontario-input--3-char-width{max-width:10ex}.ontario-input--4-char-width{max-width:12ex}.ontario-input--5-char-width{max-width:14ex}.ontario-input--7-char-width{max-width:17ex}.ontario-input--10-char-width{max-width:23ex}.ontario-input--20-char-width{max-width:41ex}.ontario-input--error input{border:0.125rem solid #CD0000}';
+const OntarioInputStyle0 = ontarioInputCss;
+
+const OntarioInput$1 = /*@__PURE__*/ proxyCustomElement(
+	class OntarioInput extends HTMLElement {
+		constructor() {
+			super();
+			this.__registerHost();
+			this.__attachShadow();
+			this.inputOnInput = createEvent(this, 'inputOnInput', 7);
+			this.inputOnChange = createEvent(this, 'inputOnChange', 7);
+			this.inputOnBlur = createEvent(this, 'inputOnBlur', 7);
+			this.inputOnFocus = createEvent(this, 'inputOnFocus', 7);
+			this.inputErrorOccurred = createEvent(this, 'inputErrorOccurred', 7);
+			this.internals = this.attachInternals();
+			this.caption = undefined;
+			this.elementId = undefined;
+			this.inputWidth = 'default';
+			this.name = undefined;
+			this.hintText = undefined;
+			this.required = false;
+			this.type = 'text';
+			this.value = undefined;
+			this.errorMessage = undefined;
+			this.language = 'en';
+			this.hintExpander = undefined;
+			this.hintTextId = undefined;
+			this.enableLiveValidation = false;
+			this.inputValidator = undefined;
+			this.customOnInput = undefined;
+			this.customOnChange = undefined;
+			this.customOnBlur = undefined;
+			this.customOnFocus = undefined;
+			this.requiredValidationMessage = undefined;
+			this.internalHintText = undefined;
+			this.internalHintExpander = undefined;
+			this.captionState = undefined;
+			this.hasBeenInteractedWith = false;
+			this.translations = translations;
+		}
+		/**
+		 * 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.
+		 * @param event The language that has been selected.
+		 */
+		handleSetAppLanguage(event) {
+			this.language = validateLanguage(event);
+		}
+		/**
+		 * Handles an update to the language should the user request a language update from the language toggle.
+		 * @param event The language that has been selected.
+		 */
+		handleHeaderLanguageToggled(event) {
+			this.language = validateLanguage(event.detail.newLanguage);
+		}
+		/**
+		 * Handle the change in the `value` property and validate if the input has been interacted with by
+		 * the user to aid in determining if the required state should produce an error.
+		 */
+		handleValueChange() {
+			this.hasBeenInteractedWith = this.hasBeenInteractedWith || !!this.value;
+		}
+		/*
+		 * Watch for changes in the `name` prop for validation purposes.
+		 *
+		 * Validate the `name` and make sure the `name` prop has a value.
+		 * Log a warning if user doesn't input a value for the `name`.
+		 */
+		validateName(newValue) {
+			if (validatePropExists(newValue)) {
+				const message = new ConsoleMessageClass();
+				message
+					.addDesignSystemTag()
+					.addMonospaceText(' name ')
+					.addRegularText('for')
+					.addMonospaceText(' <ontario-input> ')
+					.addRegularText('was not provided')
+					.printMessage();
+			}
+		}
+		/**
+		 * Watch for changes to the `hintText` prop.
+		 *
+		 * If a `hintText` prop is passed, the `constructHintTextObject` function will convert it to the correct format, and set the result to the `internalHintText` state.
+		 */
+		parseHintText() {
+			if (this.hintText) {
+				const hintTextObject = constructHintTextObject(this.hintText);
+				this.internalHintText = hintTextObject;
+			}
+		}
+		/**
+		 * Watch for changes to the `hintExpander` prop.
+		 *
+		 * If a `hintExpander` prop is passed, it will be parsed (if it is a string), and the result will be set to the `internalHintExpander` state.
+		 */
+		parseHintExpander() {
+			const hintExpander = this.hintExpander;
+			if (hintExpander) {
+				if (typeof hintExpander === 'string') this.internalHintExpander = JSON.parse(hintExpander);
+				else this.internalHintExpander = hintExpander;
+			}
+		}
+		/**
+		 * Watch for changes to the `caption` prop.
+		 *
+		 * The caption will be run through the InputCaption constructor to convert it to the correct format, and set the result to the `captionState` state.
+		 * @param newValue: Caption | string
+		 */
+		updateCaptionState(newValue) {
+			this.captionState = new InputCaption(
+				this.element.tagName,
+				newValue,
+				this.translations,
+				this.language,
+				false,
+				this.required,
+			);
+		}
+		/**
+		 * Watch for changes in the `language` prop to render either the English or French translations
+		 */
+		updateLanguage() {
+			this.updateCaptionState(this.caption);
+		}
+		/**
+		 * Handle the component being blurred and perform validation logic on the input.  Custom validation
+		 * takes persistance, followed by validating the required state.
+		 *
+		 * Finally, an event is emitted to notify anything listening for the `inputErrorOccurred` that
+		 * an error occurred.
+		 */
+		async handleComponentBlur() {
+			if (this.enableLiveValidation) {
+				// Call inputValidator function to perform custom validation
+				const validationResult = this.inputValidator && this.inputValidator(this.value);
+				await (validationResult === null || validationResult === void 0
+					? void 0
+					: validationResult.then((x) => (this.errorMessage = x === null || x === void 0 ? void 0 : x.errorMessage)));
+				// Validate the `required` field
+				// Only report a required error if no other error message is reported via validation
+				if (this.required && this.hasBeenInteractedWith && !validationResult)
+					if (!this.value)
+						this.errorMessage =
+							this.requiredValidationMessage || this.translations.input.requiredFieldError[this.getComponentLanguage()];
+					else this.errorMessage = undefined;
+			}
+		}
+		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 : '',
+			});
+		}
+		/**
+		 * Function to handle input events and the information pertaining to the input to emit.
+		 */
+		handleEvent(event, eventType) {
+			var _a, _b, _c;
+			const input = event.target;
+			// Update the component value to match the value of the input element.
+			this.value = input === null || input === void 0 ? void 0 : input.value;
+			(_b = (_a = this.internals) === null || _a === void 0 ? void 0 : _a.setFormValue) === null || _b === void 0
+				? void 0
+				: _b.call(_a, (_c = this.value) !== null && _c !== void 0 ? _c : '');
+			handleInputEvent(
+				event,
+				eventType,
+				input,
+				this.inputOnChange,
+				this.inputOnFocus,
+				this.inputOnBlur,
+				this.inputOnInput,
+				'input',
+				this.customOnChange,
+				this.customOnFocus,
+				this.customOnBlur,
+				this.customOnInput,
+				this.element,
+			);
+		}
+		getId() {
+			var _a;
+			// A UUID is assigned in `componentWillLoad` if there is no given `elementId`.
+			return (_a = this.elementId) !== null && _a !== void 0 ? _a : '';
+		}
+		getValue() {
+			var _a;
+			return (_a = this.value) !== null && _a !== void 0 ? _a : '';
+		}
+		getClass() {
+			if (this.hintExpander) {
+				return this.inputWidth === 'default'
+					? `ontario-input ontario-input-hint-expander--true`
+					: `ontario-input ontario-input--${this.inputWidth} ontario-input-hint-expander--true`;
+			} else {
+				return this.inputWidth === 'default' ? `ontario-input` : `ontario-input ontario-input--${this.inputWidth}`;
+			}
+		}
+		getComponentLanguage() {
+			var _a;
+			return (_a = this.language) !== null && _a !== void 0 ? _a : 'en';
+		}
+		/**
+		 * If a `hintText` prop is passed, the id generated from it will be set to the internal `hintTextId` state to match with the input `aria-describedBy` attribute.
+		 */
+		async componentDidLoad() {
+			var _a;
+			this.hintTextId = await ((_a = this.hintTextRef) === null || _a === void 0 ? void 0 : _a.getHintTextId());
+		}
+		componentWillLoad() {
+			var _a;
+			this.updateCaptionState(this.caption);
+			this.elementId = (_a = this.elementId) !== null && _a !== void 0 ? _a : v4();
+			this.parseHintText();
+			this.parseHintExpander();
+			this.validateName(this.name);
+			this.language = validateLanguage(this.language);
+		}
+		render() {
+			const error = !!this.errorMessage;
+			return h(
+				'div',
+				{
+					key: '6824b3fc596dd144fac82b9483d4a30e6cd0c164',
+					class: `ontario-form-group ${error ? 'ontario-input--error' : ''}`,
+				},
+				this.captionState.getCaption(this.getId(), !!this.internalHintExpander),
+				this.internalHintText &&
+					h('ontario-hint-text', {
+						hint: this.internalHintText.hint,
+						hintContentType: this.internalHintText.hintContentType,
+						ref: (el) => (this.hintTextRef = el),
+					}),
+				h(ErrorMessage, { key: 'd46e5883decc5d9bac5b322804d6d69dcf6952af', message: this.errorMessage, error: error }),
+				h(Input, {
+					'key': '64b93de051e0b52ce75d23b00166558b121558f3',
+					'aria-describedBy': this.hintTextId,
+					'className': this.getClass(),
+					'id': this.getId(),
+					'name': this.name,
+					'onInput': (e) => this.handleEvent(e, EventType.Input),
+					'onChange': (e) => this.handleEvent(e, EventType.Change),
+					'onBlur': (e) => this.handleEvent(e, EventType.Blur),
+					'onFocus': (e) => this.handleEvent(e, EventType.Focus),
+					'type': this.type,
+					'value': this.getValue(),
+					'required': !!this.required,
+				}),
+				this.internalHintExpander &&
+					h('ontario-hint-expander', {
+						hint: this.internalHintExpander.hint,
+						content: this.internalHintExpander.content,
+						hintContentType: this.internalHintExpander.hintContentType,
+					}),
+			);
+		}
+		static get formAssociated() {
+			return true;
+		}
+		get element() {
+			return this;
+		}
+		static get watchers() {
+			return {
+				value: ['handleValueChange'],
+				name: ['validateName'],
+				hintText: ['parseHintText'],
+				hintExpander: ['parseHintExpander'],
+				caption: ['updateCaptionState'],
+				language: ['updateLanguage'],
+				errorMessage: ['broadcastInputErrorOccurredEvent'],
+			};
+		}
+		static get style() {
+			return OntarioInputStyle0;
+		}
+	},
+	[
+		65,
+		'ontario-input',
+		{
+			caption: [1],
+			elementId: [1025, 'element-id'],
+			inputWidth: [1025, 'input-width'],
+			name: [1],
+			hintText: [1, 'hint-text'],
+			required: [4],
+			type: [1025],
+			value: [1025],
+			errorMessage: [1025, 'error-message'],
+			language: [1025],
+			hintExpander: [1, 'hint-expander'],
+			enableLiveValidation: [4, 'enable-live-validation'],
+			inputValidator: [16],
+			customOnInput: [16],
+			customOnChange: [16],
+			customOnBlur: [16],
+			customOnFocus: [16],
+			requiredValidationMessage: [1, 'required-validation-message'],
+			hintTextId: [32],
+			internalHintText: [32],
+			internalHintExpander: [32],
+			captionState: [32],
+			hasBeenInteractedWith: [32],
+			translations: [32],
+		},
+		[
+			[8, 'setAppLanguage', 'handleSetAppLanguage'],
+			[8, 'headerLanguageToggled', 'handleHeaderLanguageToggled'],
+			[2, 'blur', 'handleComponentBlur'],
+		],
+		{
+			value: ['handleValueChange'],
+			name: ['validateName'],
+			hintText: ['parseHintText'],
+			hintExpander: ['parseHintExpander'],
+			caption: ['updateCaptionState'],
+			language: ['updateLanguage'],
+			errorMessage: ['broadcastInputErrorOccurredEvent'],
+		},
+	],
+);
+function defineCustomElement$1() {
+	if (typeof customElements === 'undefined') {
+		return;
+	}
+	const components = [
+		'ontario-input',
+		'ontario-hint-expander',
+		'ontario-hint-text',
+		'ontario-icon-alert-error',
+		'ontario-icon-chevron-down',
+		'ontario-icon-chevron-up',
+	];
+	components.forEach((tagName) => {
+		switch (tagName) {
+			case 'ontario-input':
+				if (!customElements.get(tagName)) {
+					customElements.define(tagName, OntarioInput$1);
+				}
+				break;
+			case 'ontario-hint-expander':
+				if (!customElements.get(tagName)) {
+					defineCustomElement$6();
+				}
+				break;
+			case 'ontario-hint-text':
+				if (!customElements.get(tagName)) {
+					defineCustomElement$5();
+				}
+				break;
+			case 'ontario-icon-alert-error':
+				if (!customElements.get(tagName)) {
+					defineCustomElement$4();
+				}
+				break;
+			case 'ontario-icon-chevron-down':
+				if (!customElements.get(tagName)) {
+					defineCustomElement$3();
+				}
+				break;
+			case 'ontario-icon-chevron-up':
+				if (!customElements.get(tagName)) {
+					defineCustomElement$2();
+				}
+				break;
+		}
+	});
+}
+
+const OntarioInput = OntarioInput$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { OntarioInput, defineCustomElement };
+
+//# sourceMappingURL=ontario-input.js.map

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

@@ -0,0 +1 @@
+{"file":"ontario-input.js","mappings":"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","names":["OntarioInput","globalTranslations","uuid"],"sources":["src/components/ontario-input/ontario-input.scss?tag=ontario-input&encapsulation=shadow","src/components/ontario-input/ontario-input.tsx"],"sourcesContent":["@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/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/typography.variables' as typography;\n@use '@ongov/ontario-design-system-global-styles/dist/styles/scss/2-tools/placeholder/focus.placeholders' as\n\tfocusPlaceholders;\n@use '@ongov/ontario-design-system-global-styles/dist/styles/scss/1-variables/font-sizes.variables' as fontSizes;\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-input-padding: 0.625rem;\n$ontario-input-border-width: 0.125rem;\n\n.ontario-input {\n\tborder: globalVariables.$border-size-standard solid colours.$ontario-colour-black;\n\tborder-radius: globalVariables.$global-radius;\n\tbox-sizing: border-box;\n\tcolor: colours.$ontario-colour-black;\n\tdisplay: block;\n\tfont-size: fontSizes.$ontario-font-size-standard-body-text;\n\tfont-family: typography.$ontario-font-open-sans;\n\tline-height: globalVariables.$line-height-default;\n\tmargin: spacing.$spacing-0 spacing.$spacing-0 spacing.$spacing-7;\n\tmax-width: globalVariables.$standard-width;\n\tpadding: $ontario-input-padding spacing.$spacing-4;\n\ttransition: focusPlaceholders.$ontario-focus-transition;\n\twidth: globalVariables.$full-width;\n\n\t&:focus,\n\t&:active {\n\t\t@extend %ontario-focus !optional;\n\t}\n}\n\n.ontario-input-hint-expander--true {\n\tmargin-bottom: spacing.$spacing-4;\n}\n\n.ontario-input--2-char-width {\n\tmax-width: 8ex;\n}\n\n.ontario-input--3-char-width {\n\tmax-width: 10ex;\n}\n\n.ontario-input--4-char-width {\n\tmax-width: 12ex;\n}\n\n.ontario-input--5-char-width {\n\tmax-width: 14ex;\n}\n\n.ontario-input--7-char-width {\n\tmax-width: 17ex;\n}\n\n.ontario-input--10-char-width {\n\tmax-width: 23ex;\n}\n\n.ontario-input--20-char-width {\n\tmax-width: 41ex;\n}\n\n.ontario-input--error {\n\tinput {\n\t\tborder: $ontario-input-border-width solid colours.$ontario-colour-alert;\n\t}\n}\n","import { Component, Event, h, Prop, State, Listen, Element, Watch, EventEmitter, AttachInternals } from '@stencil/core';\nimport { v4 as uuid } from 'uuid';\n\nimport { Input } from '../../utils/common/input/input';\nimport { TextInput } from './input.interface';\nimport { HintExpander } from '../ontario-hint-expander/hint-expander.interface';\n\nimport { Hint } from '../../utils/common/common.interface';\nimport { InputCaption } from '../../utils/common/input-caption/input-caption';\nimport { Caption } from '../../utils/common/input-caption/caption.interface';\nimport { Language } from '../../utils/common/language-types';\nimport { validateLanguage, validatePropExists } from '../../utils/validation/validation-functions';\nimport { translations as globalTranslations, Translations } from '../../translations';\nimport { constructHintTextObject } from '../../utils/components/hints/hints';\nimport {\n\tInputFocusBlurEvent,\n\tEventType,\n\tInputInteractionEvent,\n\tInputInputEvent,\n} from '../../utils/events/event-handler.interface';\nimport { handleInputEvent } from '../../utils/events/event-handler';\nimport { ConsoleMessageClass } from '../../utils/console-message/console-message';\n\nimport { ErrorMessage } from '../../utils/components/error-message/error-message';\nimport { HeaderLanguageToggleEventDetails } from '../../utils/events/common-events.interface';\n\n@Component({\n\ttag: 'ontario-input',\n\tstyleUrl: 'ontario-input.scss',\n\tshadow: true,\n\tformAssociated: true,\n})\nexport class OntarioInput implements TextInput {\n\t@Element() element: HTMLElement;\n\t@AttachInternals() internals: ElementInternals;\n\n\thintTextRef: HTMLOntarioHintTextElement | undefined;\n\n\t/**\n\t * The text to display as the input label\n\t *\n\t * @example\n\t * <ontario-input\n\t *   caption='{\n\t *     \"captionText\": \"Address\",\n\t *     \"captionType\": \"heading\",\n\t *   }\n\t *   required=\"true\"\n\t *   ...>\n\t * </ontario-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 * The width of the input field. If no value is assigned, it will present as the `default` input width.\n\t */\n\t@Prop({ mutable: true }) inputWidth:\n\t\t| '2-char-width'\n\t\t| '3-char-width'\n\t\t| '4-char-width'\n\t\t| '5-char-width'\n\t\t| '7-char-width'\n\t\t| '10-char-width'\n\t\t| '20-char-width'\n\t\t| 'default' = 'default';\n\n\t/**\n\t * The name assigned to the input. The name value is used to reference form data after a form is submitted.\n\t */\n\t@Prop() name: string;\n\n\t/**\n\t * Used to include the ontario-hint-text component for the input.\n\t * This is optional.\n\t */\n\t@Prop() hintText?: string | Hint;\n\n\t/**\n\t * This is used to determine whether the input is required or not.\n\t * This prop also gets passed to the InputCaption utility to display either an optional or required flag in the label.\n\t * If no prop is set, it will default to false (optional).\n\t *\n\t * _Please add a validation messaging using `requiredValidationMessage` if setting this property._\n\t *\n\t * @example\n\t * <ontario-input\n\t *\t\tid=\"address-line-1\"\n\t *\t\tcaption=\"Address line 1\"\n\t *\t\trequired\n\t *\t\trequired-validation-message=\"Please enter an address, including street number and street name\"\n\t *\t\tname=\"address-line-1\"\n\t *\t\thint-text=\"Street and number or P.O. box.\"\n\t *\t></ontario-input>\n\t */\n\t@Prop() required?: boolean = false;\n\n\t/**\n\t * The input type value.\n\t *\n\t * If no `type` is provided, it will default to 'text'.\n\t */\n\t@Prop({ mutable: true }) type: 'text' | 'tel' | 'email' | 'password' = 'text';\n\n\t/**\n\t * The input content value.\n\t *\n\t * This is optional.\n\t */\n\t@Prop({ mutable: true }) value?: string;\n\n\t/**\n\t * Set this to display an\n\t */\n\t@Prop({ mutable: true }) errorMessage?: string;\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 no language is passed, it will default to English.\n\t */\n\t@Prop({ mutable: true }) language?: Language = 'en';\n\n\t/**\n\t * Used to include the ontario-hint-expander component for the input component.\n\t * This is passed in as an object with key-value pairs.\n\t *\n\t * This is optional.\n\t *\n\t * @example\n\t * <ontario-input\n\t *   caption='{\n\t *     \"caption\": \"Address\",\n\t *     \"captionType\": \"heading\",\n\t *   }\n\t *   hint-expander='{\n\t *    \"hint\": \"Hint expander\",\n\t *    \"content\": \"This is the content\"\n\t *   }'\n\t *   required=\"true\"\n\t * >\n\t * </ontario-input>\n\t */\n\t@Prop() hintExpander?: HintExpander | string;\n\n\t/**\n\t * Used for the `aria-describedby` value of the input. This will match with the id of the hint text.\n\t */\n\t@State() hintTextId: string | undefined;\n\n\t/**\n\t * Enable live validation on the input.  Custom live validation can be performed using an `inputValidator`\n\t * validation function.  It will also validate the `required` state if no errors are returned from\n\t * the `inputValidator`.  Please set a `requiredValidationMessage` to report concisely to the end user what\n\t * they are required to set.\n\t */\n\t@Prop() enableLiveValidation: boolean = false;\n\n\t/**\n\t * Validate the validity of the input value `onBlur`.  This `async` function should return a result\n\t * to trigger an error message.  Returning `undefined` or `null` will clear it.\n\t */\n\t@Prop() inputValidator?: (value?: string) => Promise<{ errorMessage?: string } | null | undefined>;\n\n\t/**\n\t * Used to add a custom function to the input onInput event.\n\t */\n\t@Prop() customOnInput?: (event: globalThis.Event) => void;\n\n\t/**\n\t * Used to add a custom function to the input onChange event.\n\t */\n\t@Prop() customOnChange?: (event: globalThis.Event) => void;\n\n\t/**\n\t * Used to add a custom function to the input onBlur event.\n\t */\n\t@Prop() customOnBlur?: (event: globalThis.Event) => void;\n\n\t/**\n\t * Used to add a custom function to the input onFocus event.\n\t */\n\t@Prop() customOnFocus?: (event: globalThis.Event) => void;\n\n\t/**\n\t * Custom error message to display if a required field is not filled out.  _Please add a\n\t * custom message when setting an input as required_.\n\t */\n\t@Prop() requiredValidationMessage: string;\n\n\t/**\n\t * The hint text options are re-assigned to the internalHintText array.\n\t */\n\t@State() private internalHintText: Hint;\n\n\t/**\n\t * The hint expander options are re-assigned to the internalHintExpander array.\n\t */\n\t@State() private internalHintExpander: HintExpander;\n\n\t/**\n\t * Instantiate an InputCaption object for internal logic use\n\t */\n\t@State() private captionState: InputCaption;\n\n\t/**\n\t * Track if the input has been interacted with, used to validate if\n\t * a `required` field is in error.\n\t */\n\t@State() private hasBeenInteractedWith: boolean = false;\n\n\t/**\n\t * Global translations for accessing built-in translations\n\t */\n\t@State() private translations: Translations = globalTranslations;\n\n\t/**\n\t * Emitted when a input  occurs when an input has been changed.\n\t */\n\t@Event() inputOnInput: EventEmitter<InputInputEvent>;\n\n\t/**\n\t * Emitted when a keyboard input or mouse event occurs when an input has been changed.\n\t */\n\t@Event() inputOnChange: EventEmitter<InputInteractionEvent>;\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<InputFocusBlurEvent>;\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<InputFocusBlurEvent>;\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/**\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 * @param event The language that has been selected.\n\t */\n\t@Listen('setAppLanguage', { target: 'window' })\n\thandleSetAppLanguage(event: CustomEvent<Language>) {\n\t\tthis.language = validateLanguage(event);\n\t}\n\n\t/**\n\t * Handles an update to the language should the user request a language update from the language toggle.\n\t * @param event The language that has been selected.\n\t */\n\t@Listen('headerLanguageToggled', { target: 'window' })\n\thandleHeaderLanguageToggled(event: CustomEvent<HeaderLanguageToggleEventDetails>) {\n\t\tthis.language = validateLanguage(event.detail.newLanguage);\n\t}\n\n\t/**\n\t * Handle the change in the `value` property and validate if the input has been interacted with by\n\t * the user to aid in determining if the required state should produce an error.\n\t */\n\t@Watch('value')\n\thandleValueChange() {\n\t\tthis.hasBeenInteractedWith = this.hasBeenInteractedWith || !!this.value;\n\t}\n\n\t/*\n\t * Watch for changes in the `name` prop for validation purposes.\n\t *\n\t * Validate the `name` and make sure the `name` prop has a value.\n\t * Log a warning if user doesn't input a value for the `name`.\n\t */\n\t@Watch('name')\n\tvalidateName(newValue: string) {\n\t\tif (validatePropExists(newValue)) {\n\t\t\tconst message = new ConsoleMessageClass();\n\t\t\tmessage\n\t\t\t\t.addDesignSystemTag()\n\t\t\t\t.addMonospaceText(' name ')\n\t\t\t\t.addRegularText('for')\n\t\t\t\t.addMonospaceText(' <ontario-input> ')\n\t\t\t\t.addRegularText('was not provided')\n\t\t\t\t.printMessage();\n\t\t}\n\t}\n\n\t/**\n\t * Watch for changes to the `hintText` prop.\n\t *\n\t * If a `hintText` prop is passed, the `constructHintTextObject` function will convert it to the correct format, and set the result to the `internalHintText` state.\n\t */\n\t@Watch('hintText')\n\tprivate parseHintText() {\n\t\tif (this.hintText) {\n\t\t\tconst hintTextObject = constructHintTextObject(this.hintText);\n\t\t\tthis.internalHintText = hintTextObject;\n\t\t}\n\t}\n\n\t/**\n\t * Watch for changes to the `hintExpander` prop.\n\t *\n\t * If a `hintExpander` prop is passed, it will be parsed (if it is a string), and the result will be set to the `internalHintExpander` state.\n\t */\n\t@Watch('hintExpander')\n\tprivate parseHintExpander() {\n\t\tconst hintExpander = this.hintExpander;\n\t\tif (hintExpander) {\n\t\t\tif (typeof hintExpander === 'string') this.internalHintExpander = JSON.parse(hintExpander);\n\t\t\telse this.internalHintExpander = hintExpander;\n\t\t}\n\t}\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\tthis.translations,\n\t\t\tthis.language,\n\t\t\tfalse,\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\t/**\n\t * Handle the component being blurred and perform validation logic on the input.  Custom validation\n\t * takes persistance, followed by validating the required state.\n\t *\n\t * Finally, an event is emitted to notify anything listening for the `inputErrorOccurred` that\n\t * an error occurred.\n\t */\n\t@Listen('blur', { capture: true })\n\tasync handleComponentBlur() {\n\t\tif (this.enableLiveValidation) {\n\t\t\t// Call inputValidator function to perform custom validation\n\t\t\tconst validationResult = this.inputValidator && this.inputValidator(this.value);\n\t\t\tawait validationResult?.then((x) => (this.errorMessage = x?.errorMessage));\n\n\t\t\t// Validate the `required` field\n\t\t\t// Only report a required error if no other error message is reported via validation\n\t\t\tif (this.required && this.hasBeenInteractedWith && !validationResult)\n\t\t\t\tif (!this.value)\n\t\t\t\t\tthis.errorMessage =\n\t\t\t\t\t\tthis.requiredValidationMessage || this.translations.input.requiredFieldError[this.getComponentLanguage()];\n\t\t\t\telse this.errorMessage = undefined;\n\t\t}\n\t}\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 * Function to handle input events and the information pertaining to the input to emit.\n\t */\n\tprivate handleEvent(event: globalThis.Event, eventType: EventType) {\n\t\tconst input = event.target as HTMLInputElement | null;\n\n\t\t// Update the component value to match the value of the input element.\n\t\tthis.value = input?.value;\n\n\t\tthis.internals?.setFormValue?.(this.value ?? '');\n\n\t\thandleInputEvent(\n\t\t\tevent,\n\t\t\teventType,\n\t\t\tinput,\n\t\t\tthis.inputOnChange,\n\t\t\tthis.inputOnFocus,\n\t\t\tthis.inputOnBlur,\n\t\t\tthis.inputOnInput,\n\t\t\t'input',\n\t\t\tthis.customOnChange,\n\t\t\tthis.customOnFocus,\n\t\t\tthis.customOnBlur,\n\t\t\tthis.customOnInput,\n\t\t\tthis.element,\n\t\t);\n\t}\n\n\tpublic getId(): string {\n\t\t// A UUID is assigned in `componentWillLoad` if there is no given `elementId`.\n\t\treturn this.elementId ?? '';\n\t}\n\n\tprivate getValue(): string | number {\n\t\treturn this.value ?? '';\n\t}\n\n\tprivate getClass(): string {\n\t\tif (this.hintExpander) {\n\t\t\treturn this.inputWidth === 'default'\n\t\t\t\t? `ontario-input ontario-input-hint-expander--true`\n\t\t\t\t: `ontario-input ontario-input--${this.inputWidth} ontario-input-hint-expander--true`;\n\t\t} else {\n\t\t\treturn this.inputWidth === 'default' ? `ontario-input` : `ontario-input ontario-input--${this.inputWidth}`;\n\t\t}\n\t}\n\n\tprivate getComponentLanguage() {\n\t\treturn this.language ?? 'en';\n\t}\n\n\t/**\n\t * If a `hintText` prop is passed, the id generated from it will be set to the internal `hintTextId` state to match with the input `aria-describedBy` attribute.\n\t */\n\tasync componentDidLoad() {\n\t\tthis.hintTextId = await this.hintTextRef?.getHintTextId();\n\t}\n\n\tcomponentWillLoad() {\n\t\tthis.updateCaptionState(this.caption);\n\t\tthis.elementId = this.elementId ?? uuid();\n\t\tthis.parseHintText();\n\t\tthis.parseHintExpander();\n\t\tthis.validateName(this.name);\n\t\tthis.language = validateLanguage(this.language);\n\t}\n\n\trender() {\n\t\tconst error = !!this.errorMessage;\n\t\treturn (\n\t\t\t<div class={`ontario-form-group ${error ? 'ontario-input--error' : ''}`}>\n\t\t\t\t{this.captionState.getCaption(this.getId(), !!this.internalHintExpander)}\n\t\t\t\t{this.internalHintText && (\n\t\t\t\t\t<ontario-hint-text\n\t\t\t\t\t\thint={this.internalHintText.hint}\n\t\t\t\t\t\thintContentType={this.internalHintText.hintContentType}\n\t\t\t\t\t\tref={(el) => (this.hintTextRef = el)}\n\t\t\t\t\t></ontario-hint-text>\n\t\t\t\t)}\n\t\t\t\t<ErrorMessage message={this.errorMessage} error={error} />\n\t\t\t\t<Input\n\t\t\t\t\taria-describedBy={this.hintTextId}\n\t\t\t\t\tclassName={this.getClass()}\n\t\t\t\t\tid={this.getId()}\n\t\t\t\t\tname={this.name}\n\t\t\t\t\tonInput={(e) => this.handleEvent(e, EventType.Input)}\n\t\t\t\t\tonChange={(e) => this.handleEvent(e, EventType.Change)}\n\t\t\t\t\tonBlur={(e) => this.handleEvent(e, EventType.Blur)}\n\t\t\t\t\tonFocus={(e) => this.handleEvent(e, EventType.Focus)}\n\t\t\t\t\ttype={this.type}\n\t\t\t\t\tvalue={this.getValue()}\n\t\t\t\t\trequired={!!this.required}\n\t\t\t\t></Input>\n\t\t\t\t{this.internalHintExpander && (\n\t\t\t\t\t<ontario-hint-expander\n\t\t\t\t\t\thint={this.internalHintExpander.hint}\n\t\t\t\t\t\tcontent={this.internalHintExpander.content}\n\t\t\t\t\t\thintContentType={this.internalHintExpander.hintContentType}\n\t\t\t\t\t></ontario-hint-expander>\n\t\t\t\t)}\n\t\t\t</div>\n\t\t);\n\t}\n}\n"],"version":3}

package/dist/components/ontario-language-toggle.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from '../types/components';
+
+interface OntarioLanguageToggle extends Components.OntarioLanguageToggle, HTMLElement {}
+export const OntarioLanguageToggle: {
+	prototype: OntarioLanguageToggle;
+	new (): OntarioLanguageToggle;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;

package/dist/components/ontario-language-toggle.js

@@ -0,0 +1,8 @@
+import { O as OntarioLanguageToggle$1, d as defineCustomElement$1 } from './ontario-language-toggle2.js';
+
+const OntarioLanguageToggle = OntarioLanguageToggle$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { OntarioLanguageToggle, defineCustomElement };
+
+//# sourceMappingURL=ontario-language-toggle.js.map

package/dist/components/ontario-language-toggle.js.map

@@ -0,0 +1 @@
+{"file":"ontario-language-toggle.js","mappings":";;;;;;;","names":[],"sources":[],"sourcesContent":[],"version":3}

package/dist/components/ontario-language-toggle2.js

@@ -0,0 +1,131 @@
+import { proxyCustomElement, HTMLElement, createEvent, h, Fragment } from '@stencil/core/internal/client';
+import { v as validateLanguage } from './validation-functions.js';
+import { t as translations } from './global.i18n.js';
+
+const ontarioLanguageToggleCss =
+	'.ontario-language-toggler:focus{box-shadow:0 0 0 4px #009ADB;outline:4px solid transparent;transition:box-shadow 0.1s ease-in-out}.ontario-hide{display:none !important}.ontario-invisible{visibility:hidden !important}@media screen and (max-width: 39.937em){.ontario-hide-for-small-only{display:none !important}}@media screen and (max-width: 0em), screen and (min-width: 40em){.ontario-show-for-small-only{display:none !important}}@media print, screen and (min-width: 40em){.ontario-hide-for-medium{display:none !important}}@media screen and (max-width: 39.937em){.ontario-show-for-medium{display:none !important}}@media screen and (min-width: 40em) and (max-width: 72.937em){.ontario-hide-for-medium-only{display:none !important}}@media screen and (max-width: 39.937em), screen and (min-width: 73em){.ontario-show-for-medium-only{display:none !important}}@media print, screen and (min-width: 73em){.ontario-hide-for-large{display:none !important}}@media screen and (max-width: 72.937em){.ontario-show-for-large{display:none !important}}@media screen and (min-width: 73em) and (max-width: 95.937em){.ontario-hide-for-large-only{display:none !important}}@media screen and (max-width: 72.937em), screen and (min-width: 96em){.ontario-show-for-large-only{display:none !important}}.ontario-show-for-sr,.ontario-show-on-focus{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0, 0, 0, 0)}.ontario-show-on-focus:active,.ontario-show-on-focus:focus{position:static;width:auto;height:auto;overflow:visible;clip:auto}.ontario-show-for-landscape,.ontario-hide-for-portrait{display:block !important}@media screen and (orientation: landscape){.ontario-show-for-landscape,.ontario-hide-for-portrait{display:block !important}}@media screen and (orientation: portrait){.ontario-show-for-landscape,.ontario-hide-for-portrait{display:none !important}}.ontario-hide-for-landscape,.ontario-show-for-portrait{display:none !important}@media screen and (orientation: landscape){.ontario-hide-for-landscape,.ontario-show-for-portrait{display:none !important}}@media screen and (orientation: portrait){.ontario-hide-for-landscape,.ontario-show-for-portrait{display:block !important}}.ontario-language-toggler{background-color:#1a1a1a;border:none;border-radius:4px;box-sizing:border-box;box-shadow:none;color:#FFFFFF;cursor:pointer;display:flex;align-items:center;font-size:1.125rem;font-weight:600;font-family:"Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;height:48px;line-height:1.5555555556;text-align:center;text-decoration:none}.ontario-language-toggler:hover{background-color:#4d4d4d}.ontario-language-toggler:active{background-color:#666666;color:#FFFFFF}.ontario-language-toggler:focus{background-color:#4d4d4d;color:#FFFFFF}.ontario-language-toggler:visited{color:#FFFFFF}.ontario-language-toggler abbr[title]{text-decoration:none}.ontario-language-toggler--default{padding:0.75rem}.ontario-language-toggler--small{font-size:1rem;line-height:1.375rem;height:auto;outline:none;padding:0.5rem 0.75rem}';
+const OntarioLanguageToggleStyle0 = ontarioLanguageToggleCss;
+
+const OntarioLanguageToggle = /*@__PURE__*/ proxyCustomElement(
+	class OntarioLanguageToggle extends HTMLElement {
+		constructor() {
+			super();
+			this.__registerHost();
+			this.__attachShadow();
+			this.setAppLanguage = createEvent(this, 'setAppLanguage', 7);
+			this.headerLanguageToggled = createEvent(this, 'headerLanguageToggled', 7);
+			this.updateHTMLLang = (lang) => {
+				const htmlElement = document.firstElementChild;
+				if ((htmlElement === null || htmlElement === void 0 ? void 0 : htmlElement.tagName.toLowerCase()) === 'html') {
+					if (lang) {
+						htmlElement.setAttribute('lang', lang);
+					} else {
+						htmlElement.setAttribute('lang', 'en');
+					}
+				}
+				return;
+			};
+			this.language = undefined;
+			this.size = 'default';
+			this.url = undefined;
+			this.customLanguageToggle = undefined;
+			this.translations = translations;
+		}
+		setAppLanguageHandler() {
+			let lang;
+			if (this.language) {
+				lang = this.language;
+			} else if (document.documentElement.lang) {
+				lang = document.documentElement.lang;
+			} else {
+				lang = 'en';
+			}
+			this.language = lang;
+			this.setAppLanguage.emit(lang);
+			this.updateHTMLLang(lang);
+		}
+		handleHeaderLanguageToggled(language, event) {
+			const toggledLanguage = language === 'en' ? 'fr' : 'en';
+			this.language = toggledLanguage;
+			this.headerLanguageToggled.emit({ oldLanguage: language, newLanguage: toggledLanguage });
+			this.updateHTMLLang(toggledLanguage);
+			if (this.customLanguageToggle && event) {
+				this.customLanguageToggle(event);
+			}
+		}
+		updateLanguage() {
+			this.language = validateLanguage(this.language);
+			this.setAppLanguageHandler();
+		}
+		connectedCallback() {
+			this.updateLanguage();
+		}
+		render() {
+			const language = this.language === 'en' ? 'Français' : 'English';
+			const abbreviatedLanguage = this.language === 'en' ? 'FR' : 'EN';
+			return h(
+				'a',
+				{
+					'key': '8f86da95ae38c7dccea2f86898a14aa81fa45d86',
+					'class':
+						this.size === 'default'
+							? 'ontario-language-toggler ontario-language-toggler--default'
+							: 'ontario-language-toggler ontario-language-toggler--small',
+					'href': this.url ? this.url : '#',
+					'aria-label': this.translations.languageToggle.ariaLabel[`${this.language}`],
+					'onClick': (e) => this.handleHeaderLanguageToggled(this.language, e),
+				},
+				this.size === 'small'
+					? h('span', null, language)
+					: h(
+							Fragment,
+							null,
+							h('abbr', { title: language, class: 'ontario-show-for-small-only' }, abbreviatedLanguage),
+							h('span', { class: 'ontario-show-for-medium' }, language),
+					  ),
+			);
+		}
+		static get watchers() {
+			return {
+				language: ['updateLanguage'],
+			};
+		}
+		static get style() {
+			return OntarioLanguageToggleStyle0;
+		}
+	},
+	[
+		1,
+		'ontario-language-toggle',
+		{
+			language: [1025],
+			size: [1],
+			url: [1025],
+			customLanguageToggle: [16],
+			translations: [32],
+		},
+		undefined,
+		{
+			language: ['updateLanguage'],
+		},
+	],
+);
+function defineCustomElement() {
+	if (typeof customElements === 'undefined') {
+		return;
+	}
+	const components = ['ontario-language-toggle'];
+	components.forEach((tagName) => {
+		switch (tagName) {
+			case 'ontario-language-toggle':
+				if (!customElements.get(tagName)) {
+					customElements.define(tagName, OntarioLanguageToggle);
+				}
+				break;
+		}
+	});
+}
+
+export { OntarioLanguageToggle as O, defineCustomElement as d };
+
+//# sourceMappingURL=ontario-language-toggle2.js.map

package/dist/components/ontario-language-toggle2.js.map

@@ -0,0 +1 @@
+{"file":"ontario-language-toggle2.js","mappings":"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","names":[],"sources":["src/components/ontario-language-toggle/ontario-language-toggle.scss?tag=ontario-language-toggle&encapsulation=shadow","src/components/ontario-language-toggle/ontario-language-toggle.tsx"],"sourcesContent":["@use 'sass:math';\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/global.variables' as globalVariables;\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/typography.variables' as typography;\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/2-tools/functions/global.functions' as globalFunctions;\n@use '@ongov/ontario-design-system-global-styles/dist/styles/scss/2-tools/placeholder/focus.placeholders' as\n\tfocusPlaceholders;\n\n@forward '@ongov/ontario-design-system-global-styles/dist/styles/scss/7-overrides/_visibility.overrides.scss';\n\n.ontario-language-toggler {\n\tbackground-color: colours.$ontario-colour-black;\n\tborder: none;\n\tborder-radius: globalVariables.$global-radius;\n\tbox-sizing: border-box;\n\tbox-shadow: none;\n\tcolor: colours.$ontario-colour-white;\n\tcursor: pointer;\n\tdisplay: flex;\n\talign-items: center;\n\tfont-size: 1.125rem;\n\tfont-weight: fontWeights.$ontario-font-weights-semi-bold;\n\tfont-family: typography.$ontario-font-open-sans;\n\theight: globalVariables.$standard-input-height;\n\tline-height: math.div(14, 9);\n\ttext-align: center;\n\ttext-decoration: none;\n\n\t&:hover {\n\t\tbackground-color: colours.$ontario-greyscale-70;\n\t}\n\n\t&:active {\n\t\tbackground-color: colours.$ontario-greyscale-60;\n\t\tcolor: colours.$ontario-colour-white;\n\t}\n\n\t&:focus {\n\t\tbackground-color: colours.$ontario-greyscale-70;\n\t\tcolor: colours.$ontario-colour-white;\n\t\t@extend %ontario-focus;\n\t}\n\n\t&:visited {\n\t\tcolor: colours.$ontario-colour-white;\n\t}\n\n\tabbr[title] {\n\t\ttext-decoration: none;\n\t}\n}\n\n.ontario-language-toggler--default {\n\tpadding: spacing.$spacing-3;\n}\n\n.ontario-language-toggler--small {\n\tfont-size: globalFunctions.px-to-rem(16);\n\tline-height: globalFunctions.px-to-rem(22);\n\theight: auto;\n\toutline: none;\n\tpadding: spacing.$spacing-2 spacing.$spacing-3;\n}\n","import { Component, Prop, State, Event, EventEmitter, Watch, h, Fragment } from '@stencil/core';\n\nimport { Language } from '../../utils/common/language-types';\nimport { validateLanguage } from '../../utils/validation/validation-functions';\n\nimport { default as translations } from '../../translations/global.i18n.json';\nimport { HeaderLanguageToggleEventDetails } from '../../utils/events/common-events.interface';\n\n@Component({\n\ttag: 'ontario-language-toggle',\n\tstyleUrl: 'ontario-language-toggle.scss',\n\tshadow: true,\n})\nexport class OntarioLanguageToggle {\n\t@Prop({ mutable: true }) language: Language | string;\n\n\t/**\n\t * The size of the language toggle button.\n\t *\n\t * If no prop is passed, it will be set to the `default` size.\n\t */\n\t@Prop() size?: 'default' | 'small' = 'default';\n\n\t/**\n\t * The URL to change to when the language toggle button is clicked.\n\t *\n\t * This is optional.\n\t */\n\t@Prop({ mutable: true }) url?: string;\n\n\t/**\n\t * A custom function to pass to the language toggle button.\n\t *\n\t * This is optional.\n\t */\n\t@Prop() customLanguageToggle?: (event: globalThis.Event) => void;\n\n\t@State() translations: any = translations;\n\n\t/**\n\t * An event to set the Document's HTML lang property, and emit the toggled language to other components.\n\t */\n\t@Event() setAppLanguage: EventEmitter<string>;\n\tsetAppLanguageHandler() {\n\t\tlet lang: string | Language;\n\t\tif (this.language) {\n\t\t\tlang = this.language;\n\t\t} else if (document.documentElement.lang) {\n\t\t\tlang = document.documentElement.lang;\n\t\t} else {\n\t\t\tlang = 'en';\n\t\t}\n\n\t\tthis.language = lang;\n\t\tthis.setAppLanguage.emit(lang);\n\n\t\tthis.updateHTMLLang(lang);\n\t}\n\n\t/**\n\t * An event that emits to other components that the language toggle button has been toggled.\n\t */\n\t@Event() headerLanguageToggled: EventEmitter<HeaderLanguageToggleEventDetails>;\n\thandleHeaderLanguageToggled(language: string, event?: globalThis.Event) {\n\t\tconst toggledLanguage = language === 'en' ? 'fr' : 'en';\n\t\tthis.language = toggledLanguage;\n\n\t\tthis.headerLanguageToggled.emit({ oldLanguage: language, newLanguage: toggledLanguage });\n\n\t\tthis.updateHTMLLang(toggledLanguage);\n\n\t\tif (this.customLanguageToggle && event) {\n\t\t\tthis.customLanguageToggle(event);\n\t\t}\n\t}\n\n\t@Watch('language')\n\tupdateLanguage() {\n\t\tthis.language = validateLanguage(this.language);\n\t\tthis.setAppLanguageHandler();\n\t}\n\n\tupdateHTMLLang = (lang: string) => {\n\t\tconst htmlElement = document.firstElementChild;\n\n\t\tif (htmlElement?.tagName.toLowerCase() === 'html') {\n\t\t\tif (lang) {\n\t\t\t\thtmlElement.setAttribute('lang', lang);\n\t\t\t} else {\n\t\t\t\thtmlElement.setAttribute('lang', 'en');\n\t\t\t}\n\t\t}\n\n\t\treturn;\n\t};\n\n\tconnectedCallback() {\n\t\tthis.updateLanguage();\n\t}\n\n\trender() {\n\t\tconst language = this.language === 'en' ? 'Français' : 'English';\n\t\tconst abbreviatedLanguage = this.language === 'en' ? 'FR' : 'EN';\n\n\t\treturn (\n\t\t\t<a\n\t\t\t\tclass={\n\t\t\t\t\tthis.size === 'default'\n\t\t\t\t\t\t? 'ontario-language-toggler ontario-language-toggler--default'\n\t\t\t\t\t\t: 'ontario-language-toggler ontario-language-toggler--small'\n\t\t\t\t}\n\t\t\t\thref={this.url ? this.url : '#'}\n\t\t\t\taria-label={this.translations.languageToggle.ariaLabel[`${this.language}`]}\n\t\t\t\tonClick={(e) => this.handleHeaderLanguageToggled(this.language, e)}\n\t\t\t>\n\t\t\t\t{this.size === 'small' ? (\n\t\t\t\t\t<span>{language}</span>\n\t\t\t\t) : (\n\t\t\t\t\t<Fragment>\n\t\t\t\t\t\t<abbr title={language} class=\"ontario-show-for-small-only\">\n\t\t\t\t\t\t\t{abbreviatedLanguage}\n\t\t\t\t\t\t</abbr>\n\t\t\t\t\t\t<span class=\"ontario-show-for-medium\">{language}</span>\n\t\t\t\t\t</Fragment>\n\t\t\t\t)}\n\t\t\t</a>\n\t\t);\n\t}\n}\n"],"version":3}

package/dist/components/ontario-loading-indicator.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from '../types/components';
+
+interface OntarioLoadingIndicator extends Components.OntarioLoadingIndicator, HTMLElement {}
+export const OntarioLoadingIndicator: {
+	prototype: OntarioLoadingIndicator;
+	new (): OntarioLoadingIndicator;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;