@ongov/ontario-design-system-component-library 6.0.0-alpha.4 → 6.0.0-alpha.6

package/components/p-BBhl-3u7.js

@@ -0,0 +1,169 @@
+import { p as proxyCustomElement, H, h } from './index.js';
+import { a as validatePropExists } from './p-CNqFEifG.js';
+import { C as ConsoleMessageClass } from './p-Cdm-Ot0O.js';
+import { v as v4 } from './p-BF0_OXTe.js';
+
+const ontarioHintTextCss =
+	'.ontario-hint{color:rgb(76.5, 76.5, 76.5);display:inline-block;margin:0 0 1rem 0;width:100%;max-width:48rem}.ontario-hint p{margin-bottom:1rem}.ontario-hint p:first-of-type{margin-top:0}.ontario-hint p:last-of-type{margin-bottom:0}.ontario-hint a[x-apple-data-detectors]{color:inherit;cursor:none;text-decoration:none}';
+
+const OntarioHintText = /*@__PURE__*/ proxyCustomElement(
+	class OntarioHintText extends H {
+		constructor() {
+			super();
+			this.__registerHost();
+			this.__attachShadow();
+			/**
+			 * The content type of the hint.
+			 * If no prop is passed, it will default to a string.
+			 * If the hint requires multiple lines or HTML, the `hintContentType` prop should be set to `html`.
+			 */
+			this.hintContentType = 'string';
+		}
+		/**
+		 * @part hint-text - The container for the hint text content. This part can be used to apply custom styles to the hint text.
+		 */
+		/**
+		 * Watch for changes to the `hintContentType` prop for validation purposes.
+		 * If none is provided, or the wrong type is provided, it will default to `string`.
+		 */
+		checkHintContentType() {
+			if (this.hintContentType !== 'string' && this.hintContentType !== 'html') {
+				const message = new ConsoleMessageClass();
+				message
+					.addDesignSystemTag()
+					.addMonospaceText(' hintContentType ')
+					.addRegularText('for')
+					.addMonospaceText(' <ontario-hint-text> ')
+					.addRegularText('was not one of the permitted types. A default type of `string` will be applied.')
+					.printMessage();
+				return (this.hintContentType = 'string');
+			}
+			return this.hintContentType;
+		}
+		/*
+		 * Watch for changes in the `hint` prop for validation purposes.
+		 * If no `hint` prop is provided, the `hint` will be set to the host element textContent (if it exists).
+		 */
+		updateHintContent() {
+			var _a, _b;
+			this.hintState =
+				(_b = (_a = this.hint) !== null && _a !== void 0 ? _a : this.host.textContent) !== null && _b !== void 0
+					? _b
+					: '';
+			this.validateHintContent(this.hintState);
+		}
+		/*
+		 * Validate the `hint` and make sure the `hint` has a value.
+		 * Log a warning if user doesn't input a value for the `hint` or element content.
+		 */
+		validateHintContent(newValue) {
+			// If element content is not provided, check whether prop exists
+			if (!this.host.textContent) {
+				if (validatePropExists(newValue)) {
+					const message = new ConsoleMessageClass();
+					message
+						.addDesignSystemTag()
+						.addMonospaceText(' hint ')
+						.addRegularText('for')
+						.addMonospaceText(' <ontario-hint-text> ')
+						.addRegularText('was not provided')
+						.printMessage();
+				}
+			}
+		}
+		getId() {
+			var _a;
+			return (_a = this.elementId) !== null && _a !== void 0 ? _a : '';
+		}
+		/**
+		 * This method returns the ontario-hint-text id. It is used to make sure the hint text and `aria-describedby` value of other form components match when the internal hint text props are used.
+		 *
+		 * @returns {Promise<string | undefined>} The ID of the hint text element, or undefined if no ID is set.
+		 */
+		async getHintTextId() {
+			return this.elementId;
+		}
+		/**
+		 * Set `hint` using internal component logic
+		 */
+		componentWillLoad() {
+			var _a;
+			this.updateHintContent();
+			this.checkHintContentType();
+			this.elementId = (_a = this.elementId) !== null && _a !== void 0 ? _a : v4();
+		}
+		/**
+		 * This helper is used to help load translations for any slots + text content passed in by the user.
+		 */
+		componentDidLoad() {
+			const observer = new MutationObserver((mutations) => {
+				mutations.forEach((mutation) => {
+					if (mutation.type === 'attributes') {
+						this.updateHintContent();
+					}
+				});
+			});
+			const options = { attributes: true };
+			observer.observe(this.host, options);
+		}
+		render() {
+			if (this.hintContentType === 'html') {
+				return h(
+					'div',
+					{ id: this.getId(), class: 'ontario-hint', innerHTML: this.hintState },
+					!this.hintState && h('slot', null),
+				);
+			}
+			return h('p', { part: 'hint-text', id: this.getId(), class: 'ontario-hint' }, this.hintState || h('slot', null));
+		}
+		get host() {
+			return this;
+		}
+		static get watchers() {
+			return {
+				hintContentType: ['checkHintContentType'],
+				hint: ['updateHintContent'],
+			};
+		}
+		static get style() {
+			return ontarioHintTextCss;
+		}
+	},
+	[
+		257,
+		'ontario-hint-text',
+		{
+			hintContentType: [1025, 'hint-content-type'],
+			hint: [1],
+			elementId: [1025, 'element-id'],
+			hintState: [32],
+			getHintTextId: [64],
+		},
+		undefined,
+		{
+			hintContentType: ['checkHintContentType'],
+			hint: ['updateHintContent'],
+		},
+	],
+);
+function defineCustomElement() {
+	if (typeof customElements === 'undefined') {
+		return;
+	}
+	const components = ['ontario-hint-text'];
+	components.forEach((tagName) => {
+		switch (tagName) {
+			case 'ontario-hint-text':
+				if (!customElements.get(tagName)) {
+					customElements.define(tagName, OntarioHintText);
+				}
+				break;
+		}
+	});
+}
+defineCustomElement();
+
+export { OntarioHintText as O, defineCustomElement as d };
+//# sourceMappingURL=p-BBhl-3u7.js.map
+
+//# sourceMappingURL=p-BBhl-3u7.js.map

package/components/p-BBhl-3u7.js.map

@@ -0,0 +1 @@
+{"file":"p-BBhl-3u7.js","mappings":";;;;;AAAA,MAAM,kBAAkB,GAAG,gUAAgU;;MCkB9U,eAAe,iBAAAA,kBAAA,CAAA,MAAA,eAAA,SAAAC,CAAA,CAAA;AAL5B,IAAA,WAAA,GAAA;;;;AAQC;;;;AAIG;AACsB,QAAA,IAAe,CAAA,eAAA,GAAqB,QAAQ;AAmIrE;AA9GA;;AAEG;AAEH;;;AAGG;IAEK,oBAAoB,GAAA;AAC3B,QAAA,IAAI,IAAI,CAAC,eAAe,KAAK,QAAQ,IAAI,IAAI,CAAC,eAAe,KAAK,MAAM,EAAE;AACzE,YAAA,MAAM,OAAO,GAAG,IAAI,mBAAmB,EAAE;YACzC;AACE,iBAAA,kBAAkB;iBAClB,gBAAgB,CAAC,mBAAmB;iBACpC,cAAc,CAAC,KAAK;iBACpB,gBAAgB,CAAC,uBAAuB;iBACxC,cAAc,CAAC,iFAAiF;AAChG,iBAAA,YAAY,EAAE;AAEhB,YAAA,QAAQ,IAAI,CAAC,eAAe,GAAG,QAAQ;;QAGxC,OAAO,IAAI,CAAC,eAAe;;AAG5B;;;AAGG;IAEK,iBAAiB,GAAA;;QACxB,IAAI,CAAC,SAAS,GAAG,CAAA,EAAA,GAAA,CAAA,EAAA,GAAA,IAAI,CAAC,IAAI,MAAI,IAAA,IAAA,EAAA,KAAA,MAAA,GAAA,EAAA,GAAA,IAAI,CAAC,IAAI,CAAC,WAAW,MAAA,IAAA,IAAA,EAAA,KAAA,MAAA,GAAA,EAAA,GAAI,EAAE;AACzD,QAAA,IAAI,CAAC,mBAAmB,CAAC,IAAI,CAAC,SAAS,CAAC;;AAGzC;;;AAGG;AACH,IAAA,mBAAmB,CAAC,QAAgB,EAAA;;AAEnC,QAAA,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC,WAAW,EAAE;AAC3B,YAAA,IAAI,kBAAkB,CAAC,QAAQ,CAAC,EAAE;AACjC,gBAAA,MAAM,OAAO,GAAG,IAAI,mBAAmB,EAAE;gBACzC;AACE,qBAAA,kBAAkB;qBAClB,gBAAgB,CAAC,QAAQ;qBACzB,cAAc,CAAC,KAAK;qBACpB,gBAAgB,CAAC,uBAAuB;qBACxC,cAAc,CAAC,kBAAkB;AACjC,qBAAA,YAAY,EAAE;;;;IAKZ,KAAK,GAAA;;QACX,OAAO,MAAA,IAAI,CAAC,SAAS,MAAA,IAAA,IAAA,EAAA,KAAA,MAAA,GAAA,EAAA,GAAI,EAAE;;AAG5B;;;;AAIG;AAEH,IAAA,MAAM,aAAa,GAAA;QAClB,OAAO,IAAI,CAAC,SAAS;;AAGtB;;AAEG;IACH,iBAAiB,GAAA;;QAChB,IAAI,CAAC,iBAAiB,EAAE;QACxB,IAAI,CAAC,oBAAoB,EAAE;QAC3B,IAAI,CAAC,SAAS,GAAG,CAAA,EAAA,GAAA,IAAI,CAAC,SAAS,MAAA,IAAA,IAAA,EAAA,KAAA,MAAA,GAAA,EAAA,GAAIC,EAAI,EAAE;;AAG1C;;AAEG;IACH,gBAAgB,GAAA;QACf,MAAM,QAAQ,GAAG,IAAI,gBAAgB,CAAC,CAAC,SAAS,KAAI;AACnD,YAAA,SAAS,CAAC,OAAO,CAAC,CAAC,QAAQ,KAAI;AAC9B,gBAAA,IAAI,QAAQ,CAAC,IAAI,KAAK,YAAY,EAAE;oBACnC,IAAI,CAAC,iBAAiB,EAAE;;AAE1B,aAAC,CAAC;AACH,SAAC,CAAC;AAEF,QAAA,MAAM,OAAO,GAAG,EAAE,UAAU,EAAE,IAAI,EAAE;QACpC,QAAQ,CAAC,OAAO,CAAC,IAAI,CAAC,IAAI,EAAE,OAAO,CAAC;;IAGrC,MAAM,GAAA;AACL,QAAA,IAAI,IAAI,CAAC,eAAe,KAAK,MAAM,EAAE;AACpC,YAAA,QACC,CAAK,CAAA,KAAA,EAAA,EAAA,EAAE,EAAE,IAAI,CAAC,KAAK,EAAE,EAAE,KAAK,EAAC,cAAc,EAAC,SAAS,EAAE,IAAI,CAAC,SAAS,EAAA,EACnE,CAAC,IAAI,CAAC,SAAS,IAAI,CAAA,CAAA,MAAA,EAAA,IAAA,CAAQ,CACvB;;AAIR,QAAA,QACC,CAAG,CAAA,GAAA,EAAA,EAAA,IAAI,EAAC,WAAW,EAAC,EAAE,EAAE,IAAI,CAAC,KAAK,EAAE,EAAE,KAAK,EAAC,cAAc,EAAA,EACxD,IAAI,CAAC,SAAS,IAAI,CAAA,CAAA,MAAA,EAAA,IAAA,CAAQ,CACxB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["__stencil_proxyCustomElement","HTMLElement","uuid"],"sources":["src/components/ontario-hint-text/ontario-hint-text.scss?tag=ontario-hint-text&encapsulation=shadow","src/components/ontario-hint-text/ontario-hint-text.tsx"],"sourcesContent":["@use 'pkg:@ongov/ontario-design-system-global-styles/dist/styles/scss/1-variables/global.variables' as globalVariables;\n@use 'pkg:@ongov/ontario-design-system-global-styles/dist/styles/scss/1-variables/spacing.variables' as spacing;\n@use 'pkg:@ongov/ontario-design-system-global-styles/dist/styles/scss/1-variables/colours.variables' as colours;\n\n.ontario-hint {\n\tcolor: colours.$ontario-greyscale-70;\n\tdisplay: inline-block;\n\tmargin: spacing.$spacing-0 spacing.$spacing-0 spacing.$spacing-4 spacing.$spacing-0;\n\twidth: globalVariables.$full-width;\n\tmax-width: globalVariables.$standard-width;\n\n\tp {\n\t\tmargin-bottom: spacing.$spacing-4;\n\n\t\t&:first-of-type {\n\t\t\tmargin-top: spacing.$spacing-0;\n\t\t}\n\n\t\t&:last-of-type {\n\t\t\tmargin-bottom: spacing.$spacing-0;\n\t\t}\n\t}\n\n\t// Fractal component style coverage ↓\n\t// This is a fix to prevent auto-detection of phone numbers in Firefox & Safari on iPhone devices\n\ta[x-apple-data-detectors] {\n\t\tcolor: inherit;\n\t\tcursor: none;\n\t\ttext-decoration: none;\n\t}\n}\n","import { Component, Prop, Element, h, Watch, State, Method } from '@stencil/core';\nimport { v4 as uuid } from 'uuid';\n\nimport { Hint, HintContentType } from '../../utils/common/common.interface';\n\nimport { validatePropExists } from '../../utils/validation/validation-functions';\nimport { ConsoleMessageClass } from '../../utils/console-message/console-message';\n\n/**\n * Use hint text to help users understand how to complete fields in a form.\n *\n * @part hint-text - The container for the hint text content. This part can be used to apply custom styles to the hint text.\n */\n@Component({\n\ttag: 'ontario-hint-text',\n\tstyleUrl: 'ontario-hint-text.scss',\n\tshadow: true,\n})\nexport class OntarioHintText implements Hint {\n\t@Element() host: HTMLElement;\n\n\t/**\n\t * The content type of the hint.\n\t * If no prop is passed, it will default to a string.\n\t * If the hint requires multiple lines or HTML, the `hintContentType` prop should be set to `html`.\n\t */\n\t@Prop({ mutable: true }) hintContentType?: HintContentType = 'string';\n\n\t/**\n\t * Text to display as the hint text statement.\n\t *\n\t * Setting the hint can be done using the host element textContent or through setting this property.  This property will take precedence.\n\t *\n\t * @example\n\t * <ontario-hint-text hint=\"Override Hint Text\">Hint Text</ontario-button>\n\t *\n\t * The resulting hint text will display `\"Override Hint Text\"`.\n\t */\n\t@Prop() hint: string;\n\n\t/*\n\t * Used to establish a relationship between the hint text content and elements using aria-describedby. This is optional -  if no ID is provided, one will be generated.\n\t */\n\t@Prop({ mutable: true }) elementId?: string;\n\n\t@State() hintState: string;\n\n\t/**\n\t * @part hint-text - The container for the hint text content. This part can be used to apply custom styles to the hint text.\n\t */\n\n\t/**\n\t * Watch for changes to the `hintContentType` prop for validation purposes.\n\t * If none is provided, or the wrong type is provided, it will default to `string`.\n\t */\n\t@Watch('hintContentType')\n\tprivate checkHintContentType() {\n\t\tif (this.hintContentType !== 'string' && this.hintContentType !== 'html') {\n\t\t\tconst message = new ConsoleMessageClass();\n\t\t\tmessage\n\t\t\t\t.addDesignSystemTag()\n\t\t\t\t.addMonospaceText(' hintContentType ')\n\t\t\t\t.addRegularText('for')\n\t\t\t\t.addMonospaceText(' <ontario-hint-text> ')\n\t\t\t\t.addRegularText('was not one of the permitted types. A default type of `string` will be applied.')\n\t\t\t\t.printMessage();\n\n\t\t\treturn (this.hintContentType = 'string');\n\t\t}\n\n\t\treturn this.hintContentType;\n\t}\n\n\t/*\n\t * Watch for changes in the `hint` prop for validation purposes.\n\t * If no `hint` prop is provided, the `hint` will be set to the host element textContent (if it exists).\n\t */\n\t@Watch('hint')\n\tprivate updateHintContent() {\n\t\tthis.hintState = this.hint ?? this.host.textContent ?? '';\n\t\tthis.validateHintContent(this.hintState);\n\t}\n\n\t/*\n\t * Validate the `hint` and make sure the `hint` has a value.\n\t * Log a warning if user doesn't input a value for the `hint` or element content.\n\t */\n\tvalidateHintContent(newValue: string) {\n\t\t// If element content is not provided, check whether prop exists\n\t\tif (!this.host.textContent) {\n\t\t\tif (validatePropExists(newValue)) {\n\t\t\t\tconst message = new ConsoleMessageClass();\n\t\t\t\tmessage\n\t\t\t\t\t.addDesignSystemTag()\n\t\t\t\t\t.addMonospaceText(' hint ')\n\t\t\t\t\t.addRegularText('for')\n\t\t\t\t\t.addMonospaceText(' <ontario-hint-text> ')\n\t\t\t\t\t.addRegularText('was not provided')\n\t\t\t\t\t.printMessage();\n\t\t\t}\n\t\t}\n\t}\n\n\tpublic getId(): string {\n\t\treturn this.elementId ?? '';\n\t}\n\n\t/**\n\t * This method returns the ontario-hint-text id. It is used to make sure the hint text and `aria-describedby` value of other form components match when the internal hint text props are used.\n\t *\n\t * @returns {Promise<string | undefined>} The ID of the hint text element, or undefined if no ID is set.\n\t */\n\t@Method()\n\tasync getHintTextId(): Promise<string | undefined> {\n\t\treturn this.elementId;\n\t}\n\n\t/**\n\t * Set `hint` using internal component logic\n\t */\n\tcomponentWillLoad() {\n\t\tthis.updateHintContent();\n\t\tthis.checkHintContentType();\n\t\tthis.elementId = this.elementId ?? uuid();\n\t}\n\n\t/**\n\t * This helper is used to help load translations for any slots + text content passed in by the user.\n\t */\n\tcomponentDidLoad() {\n\t\tconst observer = new MutationObserver((mutations) => {\n\t\t\tmutations.forEach((mutation) => {\n\t\t\t\tif (mutation.type === 'attributes') {\n\t\t\t\t\tthis.updateHintContent();\n\t\t\t\t}\n\t\t\t});\n\t\t});\n\n\t\tconst options = { attributes: true };\n\t\tobserver.observe(this.host, options);\n\t}\n\n\trender() {\n\t\tif (this.hintContentType === 'html') {\n\t\t\treturn (\n\t\t\t\t<div id={this.getId()} class=\"ontario-hint\" innerHTML={this.hintState}>\n\t\t\t\t\t{!this.hintState && <slot />}\n\t\t\t\t</div>\n\t\t\t);\n\t\t}\n\n\t\treturn (\n\t\t\t<p part=\"hint-text\" id={this.getId()} class=\"ontario-hint\">\n\t\t\t\t{this.hintState || <slot />}\n\t\t\t</p>\n\t\t);\n\t}\n}\n"],"version":3}

package/components/p-BF0_OXTe.js

@@ -0,0 +1,64 @@
+const byteToHex = [];
+for (let i = 0; i < 256; ++i) {
+	byteToHex.push((i + 0x100).toString(16).slice(1));
+}
+function unsafeStringify(arr, offset = 0) {
+	return (
+		byteToHex[arr[offset + 0]] +
+		byteToHex[arr[offset + 1]] +
+		byteToHex[arr[offset + 2]] +
+		byteToHex[arr[offset + 3]] +
+		'-' +
+		byteToHex[arr[offset + 4]] +
+		byteToHex[arr[offset + 5]] +
+		'-' +
+		byteToHex[arr[offset + 6]] +
+		byteToHex[arr[offset + 7]] +
+		'-' +
+		byteToHex[arr[offset + 8]] +
+		byteToHex[arr[offset + 9]] +
+		'-' +
+		byteToHex[arr[offset + 10]] +
+		byteToHex[arr[offset + 11]] +
+		byteToHex[arr[offset + 12]] +
+		byteToHex[arr[offset + 13]] +
+		byteToHex[arr[offset + 14]] +
+		byteToHex[arr[offset + 15]]
+	).toLowerCase();
+}
+
+let getRandomValues;
+const rnds8 = new Uint8Array(16);
+function rng() {
+	if (!getRandomValues) {
+		if (typeof crypto === 'undefined' || !crypto.getRandomValues) {
+			throw new Error(
+				'crypto.getRandomValues() not supported. See https://github.com/uuidjs/uuid#getrandomvalues-not-supported',
+			);
+		}
+		getRandomValues = crypto.getRandomValues.bind(crypto);
+	}
+	return getRandomValues(rnds8);
+}
+
+const randomUUID = typeof crypto !== 'undefined' && crypto.randomUUID && crypto.randomUUID.bind(crypto);
+var native = { randomUUID };
+
+function v4(options, buf, offset) {
+	if (native.randomUUID && true && !options) {
+		return native.randomUUID();
+	}
+	options = options || {};
+	const rnds = options.random ?? options.rng?.() ?? rng();
+	if (rnds.length < 16) {
+		throw new Error('Random bytes length must be >= 16');
+	}
+	rnds[6] = (rnds[6] & 0x0f) | 0x40;
+	rnds[8] = (rnds[8] & 0x3f) | 0x80;
+	return unsafeStringify(rnds);
+}
+
+export { v4 as v };
+//# sourceMappingURL=p-BF0_OXTe.js.map
+
+//# sourceMappingURL=p-BF0_OXTe.js.map

package/components/p-BF0_OXTe.js.map

@@ -0,0 +1 @@
+{"file":"p-BF0_OXTe.js","mappings":"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","names":[],"sources":["../../node_modules/.pnpm/uuid@11.0.5/node_modules/uuid/dist/esm-browser/stringify.js","../../node_modules/.pnpm/uuid@11.0.5/node_modules/uuid/dist/esm-browser/rng.js","../../node_modules/.pnpm/uuid@11.0.5/node_modules/uuid/dist/esm-browser/native.js","../../node_modules/.pnpm/uuid@11.0.5/node_modules/uuid/dist/esm-browser/v4.js"],"sourcesContent":["import validate from './validate.js';\nconst byteToHex = [];\nfor (let i = 0; i < 256; ++i) {\n    byteToHex.push((i + 0x100).toString(16).slice(1));\n}\nexport function unsafeStringify(arr, offset = 0) {\n    return (byteToHex[arr[offset + 0]] +\n        byteToHex[arr[offset + 1]] +\n        byteToHex[arr[offset + 2]] +\n        byteToHex[arr[offset + 3]] +\n        '-' +\n        byteToHex[arr[offset + 4]] +\n        byteToHex[arr[offset + 5]] +\n        '-' +\n        byteToHex[arr[offset + 6]] +\n        byteToHex[arr[offset + 7]] +\n        '-' +\n        byteToHex[arr[offset + 8]] +\n        byteToHex[arr[offset + 9]] +\n        '-' +\n        byteToHex[arr[offset + 10]] +\n        byteToHex[arr[offset + 11]] +\n        byteToHex[arr[offset + 12]] +\n        byteToHex[arr[offset + 13]] +\n        byteToHex[arr[offset + 14]] +\n        byteToHex[arr[offset + 15]]).toLowerCase();\n}\nfunction stringify(arr, offset = 0) {\n    const uuid = unsafeStringify(arr, offset);\n    if (!validate(uuid)) {\n        throw TypeError('Stringified UUID is invalid');\n    }\n    return uuid;\n}\nexport default stringify;\n","let getRandomValues;\nconst rnds8 = new Uint8Array(16);\nexport default function rng() {\n    if (!getRandomValues) {\n        if (typeof crypto === 'undefined' || !crypto.getRandomValues) {\n            throw new Error('crypto.getRandomValues() not supported. See https://github.com/uuidjs/uuid#getrandomvalues-not-supported');\n        }\n        getRandomValues = crypto.getRandomValues.bind(crypto);\n    }\n    return getRandomValues(rnds8);\n}\n","const randomUUID = typeof crypto !== 'undefined' && crypto.randomUUID && crypto.randomUUID.bind(crypto);\nexport default { randomUUID };\n","import native from './native.js';\nimport rng from './rng.js';\nimport { unsafeStringify } from './stringify.js';\nfunction v4(options, buf, offset) {\n    if (native.randomUUID && !buf && !options) {\n        return native.randomUUID();\n    }\n    options = options || {};\n    const rnds = options.random ?? options.rng?.() ?? rng();\n    if (rnds.length < 16) {\n        throw new Error('Random bytes length must be >= 16');\n    }\n    rnds[6] = (rnds[6] & 0x0f) | 0x40;\n    rnds[8] = (rnds[8] & 0x3f) | 0x80;\n    if (buf) {\n        offset = offset || 0;\n        if (offset < 0 || offset + 16 > buf.length) {\n            throw new RangeError(`UUID byte range ${offset}:${offset + 15} is out of buffer bounds`);\n        }\n        for (let i = 0; i < 16; ++i) {\n            buf[offset + i] = rnds[i];\n        }\n        return buf;\n    }\n    return unsafeStringify(rnds);\n}\nexport default v4;\n"],"version":3}

package/components/p-BHTls9cv.js

@@ -0,0 +1,286 @@
+import { p as proxyCustomElement, H, c as createEvent, h, F as Fragment } from './index.js';
+import { a as isClientSideRendering } from './p-TS9NoIOc.js';
+import { C as ConsoleMessageClass } from './p-Cdm-Ot0O.js';
+import { g as getRootHTMLElement, p as printArray } from './p-DIe1tcOp.js';
+import { v as validateValueAgainstArray } from './p-CNqFEifG.js';
+import { t as translations } from './p-DgMhpSmi.js';
+
+const supportedLanguages = ['en', 'fr'];
+
+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.99875em){.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.99875em){.ontario-show-for-medium{display:none !important}}@media screen and (min-width: 40em) and (max-width: 72.99875em){.ontario-hide-for-medium-only{display:none !important}}@media screen and (max-width: 39.99875em), 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.99875em){.ontario-show-for-large{display:none !important}}@media screen and (min-width: 73em) and (max-width: 95.99875em){.ontario-hide-for-large-only{display:none !important}}@media screen and (max-width: 72.99875em), 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:rgb(25.5, 25.5, 25.5);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{color:#FFFFFF;background-color:rgb(76.5, 76.5, 76.5);color:#FFFFFF}.ontario-language-toggler:active{background-color:#666666;color:#FFFFFF}.ontario-language-toggler:focus{background-color:rgb(76.5, 76.5, 76.5);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 OntarioLanguageToggle = /*@__PURE__*/ proxyCustomElement(
+	class OntarioLanguageToggle extends H {
+		constructor() {
+			super();
+			this.__registerHost();
+			this.__attachShadow();
+			this.setAppLanguage = createEvent(this, 'setAppLanguage');
+			this.headerLanguageToggled = createEvent(this, 'headerLanguageToggled');
+			/**
+			 * The size of the language toggle button.
+			 *
+			 * If no prop is passed, it will be set to the `default` size.
+			 */
+			this.size = 'default';
+			this.translations = translations;
+			/**
+			 * Internal state used to render the text on the language toggle UI.
+			 */
+			this.oppositeLanguageLabel = undefined;
+			/*
+			 * Updates the <html> lang attribute based on component languageState.
+			 */
+			this.updateHTMLLang = () => {
+				const htmlElement = getRootHTMLElement();
+				if (htmlElement) {
+					htmlElement.setAttribute('lang', this.languageState);
+				}
+			};
+		}
+		/**
+		 * Updates the language and languageState props when changes to the language prop are detected.
+		 */
+		updateLanguage() {
+			if (this.language) {
+				if (!validateValueAgainstArray(this.language, supportedLanguages)) {
+					this.showLanguageWarning(this.language);
+					this.language = this.translations.siteLanguage.abbreviation.en;
+				}
+				this.languageState = this.language;
+			}
+			this.setAppLanguageHandler();
+		}
+		/**
+		 * This function sets the languageState (if not already set).
+		 *
+		 * It also emits the setAppLanguage() event, updates the component language label, and
+		 * updates the <html> tag lang attribute with the languageState value.
+		 *
+		 * It gets called by the connectedCallback() component lifecycle hook, and by the
+		 * updateLanguage() method, which is fired on the watch for the language prop.
+		 */
+		setAppLanguageHandler() {
+			var _a;
+			const defaultLang = this.translations.siteLanguage.abbreviation.en;
+			// If internal language state isn't already set, determine the best language source
+			if (!this.languageState) {
+				if (this.language) {
+					// Use explicitly passed prop value if available
+					this.languageState = this.language;
+				} else if (typeof window !== 'undefined') {
+					// On the client, try to derive from <html lang=""> if no prop was passed
+					const rootLang = (_a = getRootHTMLElement()) === null || _a === void 0 ? void 0 : _a.lang;
+					if (validateValueAgainstArray(rootLang, supportedLanguages)) {
+						this.languageState = rootLang;
+					} else {
+						// Log a warning if <html lang=""> is invalid, and fallback
+						if (rootLang) this.showLanguageWarning(rootLang, 'document');
+						this.languageState = defaultLang;
+					}
+				} else {
+					// Fallback for SSR: use default language when document is not accessible
+					this.languageState = defaultLang;
+				}
+			}
+			// Emit the language value to notify other components or app logic
+			this.setAppLanguage.emit(this.languageState);
+			// Update label shown in the UI for toggling languages (e.g., "Français" if current is "en")
+			this.oppositeLanguageLabel = {
+				fullWord: this.getOppositeLanguageFullWord(),
+				abbreviation: this.getOppositeLanguageAbbrievation(),
+			};
+			// Update <html lang=""> to match selected language (helps with screen readers & SEO)
+			this.updateHTMLLang();
+		}
+		/**
+		 * An event that emits to other components that the language toggle button has been toggled.
+		 *
+		 * @param {Language} oldLanguage - The language prior to the language toggle being pressed.
+		 * @param {globalThis.Event} event - event that triggered the function (e.g. onclick).
+		 */
+		handleHeaderLanguageToggled(oldLanguage, event) {
+			this.languageState =
+				oldLanguage === this.translations.siteLanguage.abbreviation.en
+					? this.translations.siteLanguage.abbreviation.fr
+					: this.translations.siteLanguage.abbreviation.en;
+			this.headerLanguageToggled.emit({ oldLanguage: oldLanguage, newLanguage: this.languageState });
+			this.updateHTMLLang();
+			if (this.customLanguageToggle && event) {
+				this.customLanguageToggle(event);
+			}
+		}
+		/**
+		 * Prints a warning message to the console about using an incorrect language for the component.
+		 *
+		 * @param {string} lang - The incorrect language that was received.
+		 * @param {string} type - prop/document | Where the incorrect language is coming from.
+		 */
+		showLanguageWarning(lang, type = 'prop') {
+			const propOrDocumentMessage =
+				type === 'prop' ? `The language prop value of ${lang} ` : `The HTML document lang attribute value of ${lang} `;
+			const message = new ConsoleMessageClass();
+			message
+				.addDesignSystemTag()
+				.addRegularText(propOrDocumentMessage)
+				.addRegularText('is not a valid language value for the ')
+				.addMonospaceText(' <ontario-language-toggle> ')
+				.addRegularText(`component. Valid language values are ${printArray([...supportedLanguages])}. `)
+				.addRegularText(
+					`A default language value of ${this.translations.siteLanguage.abbreviation.en} will be applied.`,
+				)
+				.printMessage();
+		}
+		/**
+		 * Returns abbreviated text for the opposite language.
+		 *
+		 * @returns {Language}
+		 */
+		getOppositeLanguageAbbrievation() {
+			return this.languageState === this.translations.siteLanguage.abbreviation.en
+				? this.translations.siteLanguage.abbreviation.fr
+				: this.translations.siteLanguage.abbreviation.en;
+		}
+		/**
+		 * Returns full word text for the opposite language.
+		 *
+		 * @returns {string}
+		 */
+		getOppositeLanguageFullWord() {
+			return this.languageState === this.translations.siteLanguage.abbreviation.en
+				? this.translations.siteLanguage.fullWord.fr
+				: this.translations.siteLanguage.fullWord.en;
+		}
+		/**
+		 * Component life cycle hook.
+		 *
+		 * https://stenciljs.com/docs/component-lifecycle#connectedcallback
+		 */
+		connectedCallback() {
+			this.setAppLanguageHandler();
+		}
+		/**
+		 * Component life cycle hook.
+		 *
+		 * https://stenciljs.com/docs/component-lifecycle#componentdidload
+		 */
+		componentDidLoad() {
+			/**
+			 * Creates a MutationObserver (a type of watch) on the <html> tag lang attribute.
+			 *
+			 * When changes occur, the oppositeLanguageLabel state variable regenerates.
+			 *
+			 * This is to act as a form of callback and create a subtle delay between page content
+			 * updating and the language toggle label updating.
+			 */
+			const observer = new MutationObserver((mutations) => {
+				mutations.forEach((mutation) => {
+					switch (mutation.type) {
+						case 'attributes':
+							switch (mutation.attributeName) {
+								case 'lang':
+									this.oppositeLanguageLabel = {
+										fullWord: this.getOppositeLanguageFullWord(),
+										abbreviation: this.getOppositeLanguageAbbrievation(),
+									};
+									break;
+							}
+							break;
+					}
+				});
+			});
+			// Only create/trigger the MutationObserver if the <html> element exists.
+			if (isClientSideRendering() && getRootHTMLElement()) {
+				const options = { attributes: true };
+				observer.observe(getRootHTMLElement(), options);
+			}
+		}
+		render() {
+			var _a, _b, _c, _d, _e, _f, _g;
+			return h(
+				'a',
+				{
+					'key': '34da7ec668c3f5df4e9985df380059fb9aa6eb45',
+					'aria-label':
+						this.translations.languageToggle.ariaLabel[
+							`${(_a = this.oppositeLanguageLabel) === null || _a === void 0 ? void 0 : _a.abbreviation}`
+						],
+					'class':
+						this.size === 'default'
+							? 'ontario-language-toggler ontario-language-toggler--default'
+							: 'ontario-language-toggler ontario-language-toggler--small',
+					'href': this.url ? this.url : '#',
+					'hreflang': (_b = this.oppositeLanguageLabel) === null || _b === void 0 ? void 0 : _b.abbreviation,
+					'lang': (_c = this.oppositeLanguageLabel) === null || _c === void 0 ? void 0 : _c.abbreviation,
+					'onClick': (e) => this.handleHeaderLanguageToggled(this.languageState, e),
+				},
+				this.size === 'small'
+					? h('span', null, (_d = this.oppositeLanguageLabel) === null || _d === void 0 ? void 0 : _d.fullWord)
+					: h(
+							Fragment,
+							null,
+							h(
+								'abbr',
+								{
+									title: (_e = this.oppositeLanguageLabel) === null || _e === void 0 ? void 0 : _e.fullWord,
+									class: 'ontario-show-for-small-only',
+								},
+								(_f = this.oppositeLanguageLabel) === null || _f === void 0 ? void 0 : _f.abbreviation.toUpperCase(),
+							),
+							h(
+								'span',
+								{ class: 'ontario-show-for-medium' },
+								(_g = this.oppositeLanguageLabel) === null || _g === void 0 ? void 0 : _g.fullWord,
+							),
+						),
+			);
+		}
+		static get watchers() {
+			return {
+				language: ['updateLanguage'],
+			};
+		}
+		static get style() {
+			return ontarioLanguageToggleCss;
+		}
+	},
+	[
+		257,
+		'ontario-language-toggle',
+		{
+			language: [1025],
+			size: [1],
+			url: [1025],
+			customLanguageToggle: [16, 'custom-language-toggle'],
+			translations: [32],
+			languageState: [32],
+			oppositeLanguageLabel: [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;
+		}
+	});
+}
+defineCustomElement();
+
+export { OntarioLanguageToggle as O, defineCustomElement as d };
+//# sourceMappingURL=p-BHTls9cv.js.map
+
+//# sourceMappingURL=p-BHTls9cv.js.map

package/components/p-BHTls9cv.js.map

@@ -0,0 +1 @@
+{"file":"p-BHTls9cv.js","mappings":"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","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/utils/common/language-types.ts","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":["export const supportedLanguages = ['en', 'fr'] as const;\nexport type Language = (typeof supportedLanguages)[number];\n","@use 'sass:math';\n@use 'pkg:@ongov/ontario-design-system-global-styles/dist/styles/scss/1-variables/spacing.variables' as spacing;\n@use 'pkg:@ongov/ontario-design-system-global-styles/dist/styles/scss/1-variables/global.variables' as globalVariables;\n@use 'pkg:@ongov/ontario-design-system-global-styles/dist/styles/scss/1-variables/colours.variables' as colours;\n@use 'pkg:@ongov/ontario-design-system-global-styles/dist/styles/scss/1-variables/fonts.variables' as fonts;\n@use 'pkg:@ongov/ontario-design-system-global-styles/dist/styles/scss/1-variables/font-weights.variables' as fontWeights;\n@use 'pkg:@ongov/ontario-design-system-global-styles/dist/styles/scss/2-tools/functions/global.functions' as\n\tglobalFunctions;\n@use 'pkg:@ongov/ontario-design-system-global-styles/dist/styles/scss/2-tools/placeholder/focus.placeholders' as\n\tfocusPlaceholders;\n\n@forward 'pkg:@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: fonts.$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\tcolor: colours.$ontario-colour-white;\n\t\tbackground-color: colours.$ontario-greyscale-70;\n\t\tcolor: colours.$ontario-colour-white;\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 { supportedLanguages, Language } from '../../utils/common/language-types';\nimport { isClientSideRendering } from '../../utils/common/environment';\nimport { ConsoleMessageClass } from '../../utils/console-message/console-message';\nimport { HeaderLanguageToggleEventDetails } from '../../utils/events/common-events.interface';\nimport { printArray, getRootHTMLElement } from '../../utils/helper/utils';\nimport { validateValueAgainstArray } from '../../utils/validation/validation-functions';\n\nimport { default as translations } from '../../translations/global.i18n.json';\n\n@Component({\n\ttag: 'ontario-language-toggle',\n\tstyleUrl: 'ontario-language-toggle.scss',\n\tshadow: true,\n})\nexport class OntarioLanguageToggle {\n\t/**\n\t * The language of the component.\n\t *\n\t * In most cases, the language toggle should be the source of truth for determining the site language.\n\t *\n\t * Only pass a language value here if necessary.\n\t */\n\t@Prop({ mutable: true }) language?: Language;\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 * Internal state used as the source of truth for component language.\n\t */\n\t@State() private languageState: Language;\n\n\t/**\n\t * Internal state used to render the text on the language toggle UI.\n\t */\n\t@State() private oppositeLanguageLabel: { fullWord: string; abbreviation: Language } | undefined = undefined;\n\n\t/**\n\t * Updates the language and languageState props when changes to the language prop are detected.\n\t */\n\t@Watch('language')\n\tupdateLanguage() {\n\t\tif (this.language) {\n\t\t\tif (!validateValueAgainstArray(this.language, supportedLanguages)) {\n\t\t\t\tthis.showLanguageWarning(this.language);\n\t\t\t\tthis.language = this.translations.siteLanguage.abbreviation.en as Language;\n\t\t\t}\n\t\t\tthis.languageState = this.language;\n\t\t}\n\t\tthis.setAppLanguageHandler();\n\t}\n\n\t/**\n\t * Event that fires during the setAppLanguageHandler() method.\n\t *\n\t * The event contains the current language (after language logic has already occurred).\n\t */\n\t@Event() setAppLanguage: EventEmitter<Language>;\n\n\t/**\n\t * Event that fires when the language toggle is pressed/clicked.\n\t *\n\t * The event contains the oldLanguage along with the newLanguage.\n\t */\n\t@Event() headerLanguageToggled: EventEmitter<HeaderLanguageToggleEventDetails>;\n\n\t/**\n\t * This function sets the languageState (if not already set).\n\t *\n\t * It also emits the setAppLanguage() event, updates the component language label, and\n\t * updates the <html> tag lang attribute with the languageState value.\n\t *\n\t * It gets called by the connectedCallback() component lifecycle hook, and by the\n\t * updateLanguage() method, which is fired on the watch for the language prop.\n\t */\n\tprivate setAppLanguageHandler() {\n\t\tconst defaultLang = this.translations.siteLanguage.abbreviation.en;\n\n\t\t// If internal language state isn't already set, determine the best language source\n\t\tif (!this.languageState) {\n\t\t\tif (this.language) {\n\t\t\t\t// Use explicitly passed prop value if available\n\t\t\t\tthis.languageState = this.language;\n\t\t\t} else if (typeof window !== 'undefined') {\n\t\t\t\t// On the client, try to derive from <html lang=\"\"> if no prop was passed\n\t\t\t\tconst rootLang = getRootHTMLElement()?.lang;\n\t\t\t\tif (validateValueAgainstArray(rootLang, supportedLanguages)) {\n\t\t\t\t\tthis.languageState = rootLang as Language;\n\t\t\t\t} else {\n\t\t\t\t\t// Log a warning if <html lang=\"\"> is invalid, and fallback\n\t\t\t\t\tif (rootLang) this.showLanguageWarning(rootLang, 'document');\n\t\t\t\t\tthis.languageState = defaultLang;\n\t\t\t\t}\n\t\t\t} else {\n\t\t\t\t// Fallback for SSR: use default language when document is not accessible\n\t\t\t\tthis.languageState = defaultLang;\n\t\t\t}\n\t\t}\n\n\t\t// Emit the language value to notify other components or app logic\n\t\tthis.setAppLanguage.emit(this.languageState);\n\n\t\t// Update label shown in the UI for toggling languages (e.g., \"Français\" if current is \"en\")\n\t\tthis.oppositeLanguageLabel = {\n\t\t\tfullWord: this.getOppositeLanguageFullWord(),\n\t\t\tabbreviation: this.getOppositeLanguageAbbrievation(),\n\t\t};\n\n\t\t// Update <html lang=\"\"> to match selected language (helps with screen readers & SEO)\n\t\tthis.updateHTMLLang();\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 * @param {Language} oldLanguage - The language prior to the language toggle being pressed.\n\t * @param {globalThis.Event} event - event that triggered the function (e.g. onclick).\n\t */\n\tprivate handleHeaderLanguageToggled(oldLanguage: Language, event?: globalThis.Event) {\n\t\tthis.languageState =\n\t\t\toldLanguage === this.translations.siteLanguage.abbreviation.en\n\t\t\t\t? this.translations.siteLanguage.abbreviation.fr\n\t\t\t\t: this.translations.siteLanguage.abbreviation.en;\n\n\t\tthis.headerLanguageToggled.emit({ oldLanguage: oldLanguage, newLanguage: this.languageState });\n\n\t\tthis.updateHTMLLang();\n\n\t\tif (this.customLanguageToggle && event) {\n\t\t\tthis.customLanguageToggle(event);\n\t\t}\n\t}\n\n\t/**\n\t * Prints a warning message to the console about using an incorrect language for the component.\n\t *\n\t * @param {string} lang - The incorrect language that was received.\n\t * @param {string} type - prop/document | Where the incorrect language is coming from.\n\t */\n\tprivate showLanguageWarning(lang: string, type: 'prop' | 'document' = 'prop') {\n\t\tconst propOrDocumentMessage =\n\t\t\ttype === 'prop' ? `The language prop value of ${lang} ` : `The HTML document lang attribute value of ${lang} `;\n\t\tconst message = new ConsoleMessageClass();\n\t\tmessage\n\t\t\t.addDesignSystemTag()\n\t\t\t.addRegularText(propOrDocumentMessage)\n\t\t\t.addRegularText('is not a valid language value for the ')\n\t\t\t.addMonospaceText(' <ontario-language-toggle> ')\n\t\t\t.addRegularText(`component. Valid language values are ${printArray([...supportedLanguages])}. `)\n\t\t\t.addRegularText(`A default language value of ${this.translations.siteLanguage.abbreviation.en} will be applied.`)\n\t\t\t.printMessage();\n\t}\n\n\t/**\n\t * Returns abbreviated text for the opposite language.\n\t *\n\t * @returns {Language}\n\t */\n\tprivate getOppositeLanguageAbbrievation(): Language {\n\t\treturn this.languageState === this.translations.siteLanguage.abbreviation.en\n\t\t\t? this.translations.siteLanguage.abbreviation.fr\n\t\t\t: this.translations.siteLanguage.abbreviation.en;\n\t}\n\n\t/**\n\t * Returns full word text for the opposite language.\n\t *\n\t * @returns {string}\n\t */\n\tprivate getOppositeLanguageFullWord(): string {\n\t\treturn this.languageState === this.translations.siteLanguage.abbreviation.en\n\t\t\t? this.translations.siteLanguage.fullWord.fr\n\t\t\t: this.translations.siteLanguage.fullWord.en;\n\t}\n\n\t/*\n\t * Updates the <html> lang attribute based on component languageState.\n\t */\n\tprivate updateHTMLLang = () => {\n\t\tconst htmlElement = getRootHTMLElement();\n\n\t\tif (htmlElement) {\n\t\t\thtmlElement.setAttribute('lang', this.languageState);\n\t\t}\n\t};\n\n\t/**\n\t * Component life cycle hook.\n\t *\n\t * https://stenciljs.com/docs/component-lifecycle#connectedcallback\n\t */\n\tconnectedCallback() {\n\t\tthis.setAppLanguageHandler();\n\t}\n\n\t/**\n\t * Component life cycle hook.\n\t *\n\t * https://stenciljs.com/docs/component-lifecycle#componentdidload\n\t */\n\tcomponentDidLoad() {\n\t\t/**\n\t\t * Creates a MutationObserver (a type of watch) on the <html> tag lang attribute.\n\t\t *\n\t\t * When changes occur, the oppositeLanguageLabel state variable regenerates.\n\t\t *\n\t\t * This is to act as a form of callback and create a subtle delay between page content\n\t\t * updating and the language toggle label updating.\n\t\t */\n\t\tconst observer = new MutationObserver((mutations) => {\n\t\t\tmutations.forEach((mutation) => {\n\t\t\t\tswitch (mutation.type) {\n\t\t\t\t\tcase 'attributes':\n\t\t\t\t\t\tswitch (mutation.attributeName) {\n\t\t\t\t\t\t\tcase 'lang':\n\t\t\t\t\t\t\t\tthis.oppositeLanguageLabel = {\n\t\t\t\t\t\t\t\t\tfullWord: this.getOppositeLanguageFullWord(),\n\t\t\t\t\t\t\t\t\tabbreviation: this.getOppositeLanguageAbbrievation(),\n\t\t\t\t\t\t\t\t};\n\t\t\t\t\t\t\t\tbreak;\n\t\t\t\t\t\t}\n\t\t\t\t\t\tbreak;\n\t\t\t\t}\n\t\t\t});\n\t\t});\n\n\t\t// Only create/trigger the MutationObserver if the <html> element exists.\n\t\tif (isClientSideRendering() && getRootHTMLElement()) {\n\t\t\tconst options = { attributes: true };\n\t\t\tobserver.observe(getRootHTMLElement(), options);\n\t\t}\n\t}\n\n\trender() {\n\t\treturn (\n\t\t\t<a\n\t\t\t\taria-label={this.translations.languageToggle.ariaLabel[`${this.oppositeLanguageLabel?.abbreviation}`]}\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\threflang={this.oppositeLanguageLabel?.abbreviation}\n\t\t\t\tlang={this.oppositeLanguageLabel?.abbreviation}\n\t\t\t\tonClick={(e) => this.handleHeaderLanguageToggled(this.languageState, e)}\n\t\t\t>\n\t\t\t\t{this.size === 'small' ? (\n\t\t\t\t\t<span>{this.oppositeLanguageLabel?.fullWord}</span>\n\t\t\t\t) : (\n\t\t\t\t\t<Fragment>\n\t\t\t\t\t\t<abbr title={this.oppositeLanguageLabel?.fullWord} class=\"ontario-show-for-small-only\">\n\t\t\t\t\t\t\t{this.oppositeLanguageLabel?.abbreviation.toUpperCase()}\n\t\t\t\t\t\t</abbr>\n\t\t\t\t\t\t<span class=\"ontario-show-for-medium\">{this.oppositeLanguageLabel?.fullWord}</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}