@ongov/ontario-design-system-component-library 6.0.0-alpha.5 → 6.0.0-alpha.8

package/components/p-CI209psv.js

@@ -0,0 +1,271 @@
+import { p as proxyCustomElement, H, c as createEvent, h } from './index.js';
+import { a as validatePropExists } from './p-CNqFEifG.js';
+import { C as ConsoleMessageClass } from './p-Cdm-Ot0O.js';
+import { d as defineCustomElement$2 } from './p-DJOzeqZ-.js';
+import { d as defineCustomElement$1 } from './p-CRMogYVY.js';
+import { v as v4 } from './p-BF0_OXTe.js';
+
+const ontarioHintExpanderCss =
+	'.ontario-hint-expander__button:focus,.ontario-hint-expander__button:active{box-shadow:0 0 0 4px #009ADB;outline:4px solid transparent;transition:box-shadow 0.1s ease-in-out}.ontario-hint-expander__container{max-width:48rem}.ontario-hint-expander__button{color:#0066CC;cursor:pointer;background:none;border:none;display:flex;align-items:center;font-family:"Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;font-weight:400;font-size:1rem;text-align:left;margin:0 0 1rem 0;padding:0 0.25rem 0 0}.ontario-hint-expander__button-icon--close{display:none;margin-right:0.25rem}.ontario-hint-expander__button-icon--open{display:inline-block;margin-right:0.25rem}.ontario-hint-expander__button:hover{color:#00478F}.ontario-hint-expander__button:active{color:#002142}.ontario-hint-expander__button>*{pointer-events:none}.ontario-hint-expander__content{border-left:4px solid #cccccc;color:rgb(25.5, 25.5, 25.5);background-color:rgb(242.25, 242.25, 242.25);display:none;padding:1rem 1rem 1rem calc(1rem + 0.25rem);margin:0 0 1rem 0.25rem}.ontario-hint-expander__content *:first-child{margin-top:0}.ontario-hint-expander__content *:last-child{margin-bottom:0}.ontario-hint-expander__content img{width:100%}@media screen and (min-width: 40em){.ontario-hint-expander__content img{width:50%}}.ontario-hint-expander__content.ontario-expander__content--opened{display:block}.ontario-hint-expander__container.ontario-expander--active .ontario-hint-expander__button-icon--close{display:inline-block}.ontario-hint-expander__container.ontario-expander--active .ontario-hint-expander__button-icon--open{display:none}.ontario-hint-expander__checkbox-exists-true{margin:0.75rem 0 0 0.5rem}@media screen and (max-width: 40em){.ontario-hint-expander__checkbox-exists-true{margin-top:1rem}}.ontario-input+.ontario-hint-expander__container{margin-top:-1.5rem !important}.ontario-checkboxes__item .ontario-hint-expander__container,.ontario-radios__item .ontario-hint-expander__container{margin-left:0.5rem}.ontario-checkboxes__label+.ontario-hint-expander__container,.ontario-radios__label+.ontario-hint-expander__container{margin-top:0.75rem}@media screen and (max-width: 40em){.ontario-checkboxes__label+.ontario-hint-expander__container,.ontario-radios__label+.ontario-hint-expander__container{margin-top:1rem}}';
+
+const OntarioHintExpander = /*@__PURE__*/ proxyCustomElement(
+	class OntarioHintExpander extends H {
+		constructor() {
+			super();
+			this.__registerHost();
+			this.__attachShadow();
+			this.toggleExpanderEvent = createEvent(this, 'toggleExpanderEvent');
+			/**
+			 * 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';
+			this.onClick = (ev) => {
+				const hintExpander = ev.target;
+				const hintExpanderParent =
+					hintExpander === null || hintExpander === void 0 ? void 0 : hintExpander.parentElement;
+				hintExpanderParent === null || hintExpanderParent === void 0
+					? void 0
+					: hintExpanderParent.classList.toggle('ontario-expander--active');
+				let content =
+					hintExpanderParent === null || hintExpanderParent === void 0
+						? void 0
+						: hintExpanderParent.querySelector("[data-toggle='ontario-expander-content']");
+				content === null || content === void 0 ? void 0 : content.classList.toggle('ontario-expander__content--opened');
+				(
+					content === null || content === void 0
+						? void 0
+						: content.classList.contains('ontario-expander__content--opened')
+				)
+					? content.setAttribute('aria-hidden', 'false')
+					: content === null || content === void 0
+						? void 0
+						: content.setAttribute('aria-hidden', 'true');
+				(
+					hintExpanderParent === null || hintExpanderParent === void 0
+						? void 0
+						: hintExpanderParent.classList.contains('ontario-expander--active')
+				)
+					? hintExpanderParent === null || hintExpanderParent === void 0
+						? void 0
+						: hintExpanderParent.setAttribute('aria-expanded', 'true')
+					: hintExpanderParent === null || hintExpanderParent === void 0
+						? void 0
+						: hintExpanderParent.setAttribute('aria-expanded', 'false');
+				this.toggleExpanderEvent.emit(ev);
+			};
+		}
+		/**
+		 * 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.validateHint(this.hintState);
+		}
+		/*
+		 * Watch for changes to the `content` prop for validation purposes.
+		 *
+		 * Validate the `content` and make sure the `content` has a value.
+		 * Log a warning if user doesn't input a value for the `content` or element content.
+		 */
+		validateContent(newValue) {
+			if (validatePropExists(newValue)) {
+				const message = new ConsoleMessageClass();
+				message
+					.addDesignSystemTag()
+					.addMonospaceText(' content ')
+					.addRegularText('for')
+					.addMonospaceText(' <ontario-hint-expander> ')
+					.addRegularText('was not provided')
+					.printMessage();
+			}
+		}
+		/*
+		 * Watch for changes in the `hint` prop for validation purposes.
+		 *
+		 * Validate the `hint` and make sure the `hint` has a value.
+		 * Log a warning if user doesn't input a value for the `hint`.
+		 */
+		validateHint(newValue) {
+			if (validatePropExists(newValue)) {
+				const message = new ConsoleMessageClass();
+				message
+					.addDesignSystemTag()
+					.addMonospaceText(' hint ')
+					.addRegularText('for')
+					.addMonospaceText(' <ontario-hint-expander> ')
+					.addRegularText('was not provided')
+					.printMessage();
+			}
+		}
+		/**
+		 * Set `hint` using internal component logic
+		 */
+		componentWillLoad() {
+			var _a;
+			this.elementId = (_a = this.elementId) !== null && _a !== void 0 ? _a : v4();
+			this.updateHintContent();
+			this.checkHintContentType();
+			this.validateContent(this.content);
+		}
+		/**
+		 * 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);
+		}
+		getId() {
+			var _a;
+			return (_a = this.elementId) !== null && _a !== void 0 ? _a : '';
+		}
+		render() {
+			return h(
+				'div',
+				{ key: '9f18296bf5ede4a16d648b0821f1e26acb813fde', class: 'ontario-hint-expander__container' },
+				h(
+					'button',
+					{
+						'key': '3e5c2325098f5b8e77a580e394601f666994ad2a',
+						'class': 'ontario-hint-expander__button',
+						'onClick': this.onClick,
+						'id': `hint-expander-button-${this.getId()}`,
+						'aria-controls': `hint-expander-content-${this.getId()}`,
+						'aria-expanded': 'false',
+						'data-toggle': 'ontario-collapse',
+					},
+					h(
+						'span',
+						{
+							key: 'f77bd6008272beb4646b70616c1d16d13d8e2722',
+							class: 'ontario-hint-expander__button-icon--close ontario-icon',
+						},
+						h('ontario-icon-chevron-up', {
+							'key': '09fe2a1d2d5e68cb7237ed23daf18f4d5d524afc',
+							'colour': 'inherit',
+							'aria-hidden': 'true',
+						}),
+					),
+					h(
+						'span',
+						{ key: '66934abdf7d3f29f20a4a966370bfb7ae2ec487c', class: 'ontario-hint-expander__button-icon--open' },
+						h('ontario-icon-chevron-down', {
+							'key': 'ea41b4ce0d21f9c9f315ec86f82dd26528cd220e',
+							'colour': 'inherit',
+							'aria-hidden': 'true',
+						}),
+					),
+					this.hint,
+				),
+				h(
+					'div',
+					{
+						'key': '488bcbb0a0ad44edac9d02f4304c19df6e7d4acf',
+						'class': 'ontario-hint-expander__content',
+						'id': `hint-expander-content-${this.getId()}`,
+						'aria-labelledby': `hint-expander-button-${this.getId()}`,
+						'aria-hidden': 'true',
+						'data-toggle': 'ontario-expander-content',
+					},
+					this.hintContentType === 'string' && this.content
+						? this.content
+						: this.hintContentType === 'html' && this.content
+							? h('span', { innerHTML: this.content })
+							: h('slot', null),
+				),
+			);
+		}
+		get host() {
+			return this;
+		}
+		static get watchers() {
+			return {
+				hintContentType: ['checkHintContentType'],
+				hint: ['updateHintContent'],
+				content: ['validateContent'],
+			};
+		}
+		static get style() {
+			return ontarioHintExpanderCss;
+		}
+	},
+	[
+		257,
+		'ontario-hint-expander',
+		{
+			hintContentType: [1025, 'hint-content-type'],
+			hint: [1],
+			content: [1025],
+			elementId: [1025, 'element-id'],
+			hintState: [32],
+		},
+		undefined,
+		{
+			hintContentType: ['checkHintContentType'],
+			hint: ['updateHintContent'],
+			content: ['validateContent'],
+		},
+	],
+);
+function defineCustomElement() {
+	if (typeof customElements === 'undefined') {
+		return;
+	}
+	const components = ['ontario-hint-expander', 'ontario-icon-chevron-down', 'ontario-icon-chevron-up'];
+	components.forEach((tagName) => {
+		switch (tagName) {
+			case 'ontario-hint-expander':
+				if (!customElements.get(tagName)) {
+					customElements.define(tagName, OntarioHintExpander);
+				}
+				break;
+			case 'ontario-icon-chevron-down':
+				if (!customElements.get(tagName)) {
+					defineCustomElement$2();
+				}
+				break;
+			case 'ontario-icon-chevron-up':
+				if (!customElements.get(tagName)) {
+					defineCustomElement$1();
+				}
+				break;
+		}
+	});
+}
+defineCustomElement();
+
+export { OntarioHintExpander as O, defineCustomElement as d };
+//# sourceMappingURL=p-CI209psv.js.map
+
+//# sourceMappingURL=p-CI209psv.js.map

package/components/p-CI209psv.js.map

@@ -0,0 +1 @@
+{"file":"p-CI209psv.js","mappings":"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","names":["__stencil_proxyCustomElement","HTMLElement","uuid"],"sources":["src/components/ontario-hint-expander/ontario-hint-expander.scss?tag=ontario-hint-expander&encapsulation=shadow","src/components/ontario-hint-expander/ontario-hint-expander.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@use 'pkg:@ongov/ontario-design-system-global-styles/dist/styles/scss/1-variables/breakpoints.variables' as breakpoints;\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/2-tools/placeholder/focus.placeholders' as\n\tplaceholders;\n@use 'pkg:@ongov/ontario-design-system-global-styles/dist/styles/scss/1-variables/font-sizes.variables' as fontSizes;\n@use 'pkg:@ongov/ontario-design-system-global-styles/dist/styles/scss/1-variables/font-weights.variables' as fontWeights;\n\n.ontario-hint-expander__container {\n\tmax-width: globalVariables.$standard-width;\n}\n\n.ontario-hint-expander__button {\n\tcolor: colours.$ontario-colour-link;\n\tcursor: pointer;\n\tbackground: none;\n\tborder: none;\n\tdisplay: flex;\n\talign-items: center;\n\tfont-family: fonts.$ontario-font-open-sans;\n\tfont-weight: fontWeights.$ontario-font-weights-normal;\n\tfont-size: fontSizes.$ontario-font-size-standard-body-text;\n\ttext-align: left;\n\tmargin: spacing.$spacing-0 spacing.$spacing-0 spacing.$spacing-4 spacing.$spacing-0;\n\tpadding: spacing.$spacing-0 spacing.$spacing-1 spacing.$spacing-0 spacing.$spacing-0;\n\n\t&-icon--close {\n\t\tdisplay: none;\n\t\tmargin-right: spacing.$spacing-1;\n\t}\n\n\t&-icon--open {\n\t\tdisplay: inline-block;\n\t\tmargin-right: spacing.$spacing-1;\n\t}\n\n\t&:hover {\n\t\tcolor: colours.$ontario-colour-link--hover;\n\t}\n\n\t&:active {\n\t\tcolor: colours.$ontario-colour-link--active;\n\t}\n\n\t&:focus,\n\t&:active {\n\t\t@extend %ontario-focus;\n\t}\n\n\t& > * {\n\t\tpointer-events: none;\n\t}\n}\n\n.ontario-hint-expander__content {\n\tborder-left: 4px solid colours.$ontario-greyscale-20;\n\tcolor: colours.$ontario-colour-black;\n\tbackground-color: colours.$ontario-greyscale-5;\n\tdisplay: none;\n\tpadding: spacing.$spacing-4 spacing.$spacing-4 spacing.$spacing-4 calc(#{spacing.$spacing-4} + #{spacing.$spacing-1});\n\tmargin: spacing.$spacing-0 spacing.$spacing-0 spacing.$spacing-4 spacing.$spacing-1;\n\n\t& *:first-child {\n\t\tmargin-top: spacing.$spacing-0;\n\t}\n\n\t& *:last-child {\n\t\tmargin-bottom: spacing.$spacing-0;\n\t}\n\n\t& img {\n\t\twidth: globalVariables.$full-width;\n\n\t\t@media screen and (min-width: breakpoints.$small-breakpoint) {\n\t\t\twidth: 50%;\n\t\t}\n\t}\n}\n\n.ontario-hint-expander__content.ontario-expander__content--opened {\n\tdisplay: block;\n}\n\n.ontario-hint-expander__container.ontario-expander--active {\n\t.ontario-hint-expander__button-icon--close {\n\t\tdisplay: inline-block;\n\t}\n\n\t.ontario-hint-expander__button-icon--open {\n\t\tdisplay: none;\n\t}\n}\n\n.ontario-hint-expander__checkbox-exists-true {\n\tmargin: spacing.$spacing-3 spacing.$spacing-0 spacing.$spacing-0 spacing.$spacing-2;\n\n\t@media screen and (max-width: breakpoints.$small-breakpoint) {\n\t\tmargin-top: spacing.$spacing-4;\n\t}\n}\n\n// Fractal component style coverage ↓\n.ontario-input + .ontario-hint-expander__container {\n\tmargin-top: -1 * spacing.$spacing-5 !important;\n}\n\n.ontario-checkboxes__item .ontario-hint-expander__container,\n.ontario-radios__item .ontario-hint-expander__container {\n\tmargin-left: spacing.$spacing-2;\n}\n\n.ontario-checkboxes__label + .ontario-hint-expander__container,\n.ontario-radios__label + .ontario-hint-expander__container {\n\tmargin-top: spacing.$spacing-3;\n\n\t@media screen and (max-width: breakpoints.$small-breakpoint) {\n\t\tmargin-top: spacing.$spacing-4;\n\t}\n}\n","import { Component, Element, Event, EventEmitter, h, Prop, Watch, State } from '@stencil/core';\nimport { v4 as uuid } from 'uuid';\n\nimport { HintExpander } from './hint-expander.interface';\nimport { HintContentType } from '../../utils/common/common.interface';\n\nimport { validatePropExists } from '../../utils/validation/validation-functions';\nimport { ConsoleMessageClass } from '../../utils/console-message/console-message';\n\n@Component({\n\ttag: 'ontario-hint-expander',\n\tstyleUrl: 'ontario-hint-expander.scss',\n\tshadow: true,\n})\nexport class OntarioHintExpander implements HintExpander {\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 expander question/statement\n\t */\n\t@Prop() hint: string;\n\n\t/**\n\t * Content to display as the hint, once the expander is toggled open.\n\t * Please note that any content that is passed into this prop will only be displayed as a string.\n\t * If you would like to add HTML content, supply child content to the component.\n\t *\n\t * @example\n\t * <ontario-hint-expander hint=\"This is the hint\"\n\t *   <img src=\"https://www.jquery-az.com/html/images/banana.jpg\" title=\"Title of image\" alt=\"alt text here\"/>\n\t *   <p> Here is the content beside the image </p>\n\t * </ontario-hint-expander>\n\t */\n\t@Prop({ mutable: true }) content: string;\n\n\t/**\n\t * Used to used to establish a relationship between hint text content and elements using aria-describedby. This is optional - if no ID is passed, one will be generated.\n\t */\n\t@Prop({ mutable: true }) elementId?: string;\n\n\t@State() hintState: string;\n\n\t/**\n\t * Emitted when a keyboard input or mouse event occurs.\n\t */\n\t@Event() toggleExpanderEvent!: EventEmitter<MouseEvent | KeyboardEvent>;\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.validateHint(this.hintState);\n\t}\n\n\t/*\n\t * Watch for changes to the `content` prop for validation purposes.\n\t *\n\t * Validate the `content` and make sure the `content` has a value.\n\t * Log a warning if user doesn't input a value for the `content` or element content.\n\t */\n\t@Watch('content')\n\tvalidateContent(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(' content ')\n\t\t\t\t.addRegularText('for')\n\t\t\t\t.addMonospaceText(' <ontario-hint-expander> ')\n\t\t\t\t.addRegularText('was not provided')\n\t\t\t\t.printMessage();\n\t\t}\n\t}\n\n\tprivate onClick = (ev: Event) => {\n\t\tconst hintExpander = ev.target as HTMLButtonElement | null;\n\t\tconst hintExpanderParent = hintExpander?.parentElement;\n\n\t\thintExpanderParent?.classList.toggle('ontario-expander--active');\n\t\tlet content = hintExpanderParent?.querySelector(\"[data-toggle='ontario-expander-content']\");\n\t\tcontent?.classList.toggle('ontario-expander__content--opened');\n\t\tcontent?.classList.contains('ontario-expander__content--opened')\n\t\t\t? content.setAttribute('aria-hidden', 'false')\n\t\t\t: content?.setAttribute('aria-hidden', 'true');\n\t\thintExpanderParent?.classList.contains('ontario-expander--active')\n\t\t\t? hintExpanderParent?.setAttribute('aria-expanded', 'true')\n\t\t\t: hintExpanderParent?.setAttribute('aria-expanded', 'false');\n\n\t\tthis.toggleExpanderEvent.emit(ev as MouseEvent);\n\t};\n\n\t/*\n\t * Watch for changes in the `hint` prop for validation purposes.\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`.\n\t */\n\tvalidateHint(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(' hint ')\n\t\t\t\t.addRegularText('for')\n\t\t\t\t.addMonospaceText(' <ontario-hint-expander> ')\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 * Set `hint` using internal component logic\n\t */\n\tcomponentWillLoad() {\n\t\tthis.elementId = this.elementId ?? uuid();\n\t\tthis.updateHintContent();\n\t\tthis.checkHintContentType();\n\t\tthis.validateContent(this.content);\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\tpublic getId(): string {\n\t\treturn this.elementId ?? '';\n\t}\n\n\trender() {\n\t\treturn (\n\t\t\t<div class=\"ontario-hint-expander__container\">\n\t\t\t\t<button\n\t\t\t\t\tclass=\"ontario-hint-expander__button\"\n\t\t\t\t\tonClick={this.onClick}\n\t\t\t\t\tid={`hint-expander-button-${this.getId()}`}\n\t\t\t\t\taria-controls={`hint-expander-content-${this.getId()}`}\n\t\t\t\t\taria-expanded=\"false\"\n\t\t\t\t\tdata-toggle=\"ontario-collapse\"\n\t\t\t\t>\n\t\t\t\t\t<span class=\"ontario-hint-expander__button-icon--close ontario-icon\">\n\t\t\t\t\t\t<ontario-icon-chevron-up colour=\"inherit\" aria-hidden=\"true\"></ontario-icon-chevron-up>\n\t\t\t\t\t</span>\n\t\t\t\t\t<span class=\"ontario-hint-expander__button-icon--open\">\n\t\t\t\t\t\t<ontario-icon-chevron-down colour=\"inherit\" aria-hidden=\"true\"></ontario-icon-chevron-down>\n\t\t\t\t\t</span>\n\t\t\t\t\t{this.hint}\n\t\t\t\t</button>\n\t\t\t\t<div\n\t\t\t\t\tclass=\"ontario-hint-expander__content\"\n\t\t\t\t\tid={`hint-expander-content-${this.getId()}`}\n\t\t\t\t\taria-labelledby={`hint-expander-button-${this.getId()}`}\n\t\t\t\t\taria-hidden=\"true\"\n\t\t\t\t\tdata-toggle=\"ontario-expander-content\"\n\t\t\t\t>\n\t\t\t\t\t{this.hintContentType === 'string' && this.content ? (\n\t\t\t\t\t\tthis.content\n\t\t\t\t\t) : this.hintContentType === 'html' && this.content ? (\n\t\t\t\t\t\t<span innerHTML={this.content}></span>\n\t\t\t\t\t) : (\n\t\t\t\t\t\t<slot />\n\t\t\t\t\t)}\n\t\t\t\t</div>\n\t\t\t</div>\n\t\t);\n\t}\n}\n"],"version":3}

package/components/p-CIdZS10A.js

@@ -0,0 +1,20 @@
+const constructHintTextObject = (hintText) => {
+	let hintTextObject = { hint: '', hintContentType: 'string' };
+	if (hintText) {
+		if (typeof hintText === 'string') {
+			try {
+				hintTextObject = JSON.parse(hintText);
+			} catch (_a) {
+				hintTextObject = { hint: hintText, hintContentType: 'string' };
+			}
+		} else {
+			hintTextObject = hintText;
+		}
+	}
+	return hintTextObject;
+};
+
+export { constructHintTextObject as c };
+//# sourceMappingURL=p-CIdZS10A.js.map
+
+//# sourceMappingURL=p-CIdZS10A.js.map

package/components/p-CIdZS10A.js.map

@@ -0,0 +1 @@
+{"file":"p-CIdZS10A.js","mappings":"AAEa,MAAA,uBAAuB,GAAG,CAAC,QAAuB,KAAI;IAClE,IAAI,cAAc,GAAS,EAAE,IAAI,EAAE,EAAE,EAAE,eAAe,EAAE,QAAQ,EAAE;IAElE,IAAI,QAAQ,EAAE;AACb,QAAA,IAAI,OAAO,QAAQ,KAAK,QAAQ,EAAE;AACjC,YAAA,IAAI;AACH,gBAAA,cAAc,GAAG,IAAI,CAAC,KAAK,CAAC,QAAQ,CAAS;;AAC5C,YAAA,OAAA,EAAA,EAAM;gBACP,cAAc,GAAG,EAAE,IAAI,EAAE,QAAQ,EAAE,eAAe,EAAE,QAAQ,EAAE;;;aAEzD;YACN,cAAc,GAAG,QAAQ;;;AAI3B,IAAA,OAAO,cAAc;AACtB;;;;","names":[],"sources":["src/utils/components/hints/hints.ts"],"sourcesContent":["import { Hint } from '../../common/common.interface';\n\nexport const constructHintTextObject = (hintText: string | Hint) => {\n\tlet hintTextObject: Hint = { hint: '', hintContentType: 'string' };\n\n\tif (hintText) {\n\t\tif (typeof hintText === 'string') {\n\t\t\ttry {\n\t\t\t\thintTextObject = JSON.parse(hintText) as Hint;\n\t\t\t} catch {\n\t\t\t\thintTextObject = { hint: hintText, hintContentType: 'string' };\n\t\t\t}\n\t\t} else {\n\t\t\thintTextObject = hintText;\n\t\t}\n\t}\n\n\treturn hintTextObject;\n};\n"],"version":3}

package/components/p-CNDrx73J.js

@@ -0,0 +1,145 @@
+import { p as proxyCustomElement, H, h } from './index.js';
+import { C as ConsoleMessageClass } from './p-Cdm-Ot0O.js';
+
+const ontarioIconCss =
+	'.ontario-icon svg,.ontario-icon{display:inline-block;stroke-width:0;stroke:currentColor;fill:currentColor;vertical-align:middle;overflow:hidden}.ontario-icon--blue svg{stroke:#0066CC;fill:#0066CC}.ontario-icon--grey svg{stroke:#666666;fill:#666666}.ontario-icon--black svg{stroke:#1A1A1A;fill:#1A1A1A}.ontario-icon--white svg{stroke:#FFFFFF;fill:#FFFFFF}.ontario-icon--white svg{stroke:#FFFFFF;fill:#FFFFFF}';
+
+const OntarioIconAlertSuccess = /*@__PURE__*/ proxyCustomElement(
+	class OntarioIconAlertSuccess extends H {
+		constructor() {
+			super();
+			this.__registerHost();
+			this.__attachShadow();
+			/**
+			 * The icon width will autogenerate the height since the icons are in square format, thus preserving
+			 * the aspect ratio.
+			 */
+			this.iconWidth = 24;
+		}
+		/**
+		 * Watch for changes in the `iconWidth` variable for validation purpose.
+		 * If the user input is not a number or is a negative number then `iconWidth` will be set to its default (24).
+		 */
+		validateWidth() {
+			if (isNaN(this.iconWidth) || (!isNaN(this.iconWidth) && this.iconWidth <= 0)) {
+				const message = new ConsoleMessageClass();
+				message
+					.addDesignSystemTag()
+					.addMonospaceText(' icon-width ')
+					.addRegularText('on')
+					.addMonospaceText(' <ontario-icon-alert-success> ')
+					.addRegularText(
+						`${isNaN(this.iconWidth) ? 'was set to a non-numeric value' : 'was set to a negative number'}; only a positive number is allowed. The default size of`,
+					)
+					.addMonospaceText(' 24px ')
+					.addRegularText('was assumed.')
+					.printMessage();
+				this.iconWidthState = 24;
+			} else {
+				this.iconWidthState = this.iconWidth;
+			}
+		}
+		/**
+		 * Validate that the `colour` attribute is not set by users
+		 * Prints a warning message if the `colour` attribute is set
+		 */
+		validateColour() {
+			if (this.host.hasAttribute('colour')) {
+				const message = new ConsoleMessageClass();
+				message
+					.addDesignSystemTag()
+					.addMonospaceText(' colour ')
+					.addRegularText('on')
+					.addMonospaceText(' <ontario-icon-alert-success> ')
+					.addRegularText('cannot be set. The provided colour is ignored.')
+					.printMessage();
+			}
+		}
+		/**
+		 * Stencil component lifecycle method that is called once after the component is first connected to the DOM.
+		 */
+		componentWillLoad() {
+			this.validateColour();
+			this.validateWidth();
+		}
+		/**
+		 * Returns the HTML code to be rendered into a custom element.
+		 */
+		render() {
+			return h(
+				'div',
+				{
+					key: '4555775fd1afc998fa19ca9363015c3f5f13a78f',
+					class: `ontario-icon ontario-icon--width-${this.iconWidthState}`,
+					style: { width: `${this.iconWidthState}px` },
+				},
+				h(
+					'svg',
+					{
+						key: '1c45e63acb87f983a596876e0af83cb8ca98b17e',
+						class: 'svg-icon',
+						role: 'img',
+						xmlns: 'http://www.w3.org/2000/svg',
+						fill: 'none',
+						viewBox: '0 0 24 24',
+						id: 'alert-success',
+					},
+					h('path', {
+						key: '97854a5f82264ddba5800e462ae4ab5dcd1008c7',
+						d: 'M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 15l-5-5 1.4-1.4 3.6 3.58L17.17 7l1.4 1.42L10 17z',
+						fill: '#118847',
+					}),
+					h('path', {
+						key: 'c6787bbe00231808d3e7e1632b5a4d32f35b8b53',
+						d: 'M5 12l5 5 8.58-8.58L17.17 7 10 14.17 6.4 10.6 5 12z',
+						fill: '#fff',
+					}),
+				),
+			);
+		}
+		get host() {
+			return this;
+		}
+		static get watchers() {
+			return {
+				iconWidth: ['validateWidth'],
+			};
+		}
+		static get style() {
+			return ontarioIconCss;
+		}
+	},
+	[
+		257,
+		'ontario-icon-alert-success',
+		{
+			iconWidth: [2, 'icon-width'],
+			iconWidthState: [32],
+		},
+		undefined,
+		{
+			iconWidth: ['validateWidth'],
+		},
+	],
+);
+function defineCustomElement() {
+	if (typeof customElements === 'undefined') {
+		return;
+	}
+	const components = ['ontario-icon-alert-success'];
+	components.forEach((tagName) => {
+		switch (tagName) {
+			case 'ontario-icon-alert-success':
+				if (!customElements.get(tagName)) {
+					customElements.define(tagName, OntarioIconAlertSuccess);
+				}
+				break;
+		}
+	});
+}
+defineCustomElement();
+
+export { OntarioIconAlertSuccess as O, defineCustomElement as d };
+//# sourceMappingURL=p-CNDrx73J.js.map
+
+//# sourceMappingURL=p-CNDrx73J.js.map

package/components/p-CNDrx73J.js.map

@@ -0,0 +1 @@
+{"file":"p-CNDrx73J.js","mappings":";;;AAAA,MAAM,cAAc,GAAG,yZAAyZ;;MCWna,uBAAuB,iBAAAA,kBAAA,CAAA,MAAA,uBAAA,SAAAC,CAAA,CAAA;AALpC,IAAA,WAAA,GAAA;;;;AAMC;;;AAGG;AACK,QAAA,IAAS,CAAA,SAAA,GAAa,EAAE;AA4FhC;AApFA;;;AAGG;IAEH,aAAa,GAAA;QACZ,IAAI,KAAK,CAAC,IAAI,CAAC,SAAS,CAAC,KAAK,CAAC,KAAK,CAAC,IAAI,CAAC,SAAS,CAAC,IAAI,IAAI,CAAC,SAAS,IAAI,CAAC,CAAC,EAAE;AAC7E,YAAA,MAAM,OAAO,GAAG,IAAI,mBAAmB,EAAE;YACzC;AACE,iBAAA,kBAAkB;iBAClB,gBAAgB,CAAC,cAAc;iBAC/B,cAAc,CAAC,IAAI;iBACnB,gBAAgB,CAAC,gCAAgC;AACjD,iBAAA,cAAc,CACd,CACC,EAAA,KAAK,CAAC,IAAI,CAAC,SAAS,CAAC,GAAG,gCAAgC,GAAG,8BAC5D,0DAA0D;iBAE1D,gBAAgB,CAAC,QAAQ;iBACzB,cAAc,CAAC,cAAc;AAC7B,iBAAA,YAAY,EAAE;AAChB,YAAA,IAAI,CAAC,cAAc,GAAG,EAAE;;aAClB;AACN,YAAA,IAAI,CAAC,cAAc,GAAG,IAAI,CAAC,SAAS;;;AAUtC;;;AAGG;IACH,cAAc,GAAA;QACb,IAAI,IAAI,CAAC,IAAI,CAAC,YAAY,CAAC,QAAQ,CAAC,EAAE;AACrC,YAAA,MAAM,OAAO,GAAG,IAAI,mBAAmB,EAAE;YACzC;AACE,iBAAA,kBAAkB;iBAClB,gBAAgB,CAAC,UAAU;iBAC3B,cAAc,CAAC,IAAI;iBACnB,gBAAgB,CAAC,gCAAgC;iBACjD,cAAc,CAAC,gDAAgD;AAC/D,iBAAA,YAAY,EAAE;;;AAIlB;;AAEG;IACH,iBAAiB,GAAA;QAChB,IAAI,CAAC,cAAc,EAAE;QACrB,IAAI,CAAC,aAAa,EAAE;;AAGrB;;AAEG;IACH,MAAM,GAAA;QACL,QACC,4DACC,KAAK,EAAE,CAAoC,iCAAA,EAAA,IAAI,CAAC,cAAc,CAAE,CAAA,EAChE,KAAK,EAAE,EAAE,KAAK,EAAE,CAAG,EAAA,IAAI,CAAC,cAAc,CAAA,EAAA,CAAI,EAAE,EAAA,EAE5C,CACC,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,UAAU,EAChB,IAAI,EAAC,KAAK,EACV,KAAK,EAAC,4BAA4B,EAClC,IAAI,EAAC,MAAM,EACX,OAAO,EAAC,WAAW,EACnB,EAAE,EAAC,eAAe,EAAA,EAElB,CAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EACC,CAAC,EAAC,wHAAwH,EAC1H,IAAI,EAAC,SAAS,EACb,CAAA,EACF,CAAM,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAC,EAAC,qDAAqD,EAAC,IAAI,EAAC,MAAM,EAAG,CAAA,CACvE,CACD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/ontario-icon/ontario-icon.scss?tag=ontario-icon-alert-success&encapsulation=shadow","src/components/ontario-icon/ontario-icon-alert-success.tsx"],"sourcesContent":["@use 'pkg:@ongov/ontario-design-system-global-styles/dist/styles/scss/1-variables/colours.variables' as colours;\n\n.ontario-icon svg,\n// Fractal component style coverage ↓\n.ontario-icon {\n\tdisplay: inline-block;\n\tstroke-width: 0;\n\tstroke: currentColor;\n\tfill: currentColor;\n\t/* The default vertical-align is `baseline`, which leaves a few pixels of space below the icon. Using `center` prevents this. For icons shown alongside text, you may want to use a more precise value, e.g. `vertical-align: -4px` or `vertical-align: -0.15em`. */\n\tvertical-align: middle;\n\t/* Paths and strokes that overflow the viewBox can show in IE11. */\n\toverflow: hidden;\n}\n\n.ontario-icon--blue svg {\n\tstroke: colours.$ontario-colour-icon-blue;\n\tfill: colours.$ontario-colour-icon-blue;\n}\n\n.ontario-icon--grey svg {\n\tstroke: colours.$ontario-colour-icon-grey;\n\tfill: colours.$ontario-colour-icon-grey;\n}\n\n.ontario-icon--black svg {\n\tstroke: colours.$ontario-colour-icon-black;\n\tfill: colours.$ontario-colour-icon-black;\n}\n\n.ontario-icon--white svg {\n\tstroke: colours.$ontario-colour-icon-white;\n\tfill: colours.$ontario-colour-icon-white;\n}\n\n.ontario-icon--white svg {\n\tstroke: colours.$ontario-colour-white;\n\tfill: colours.$ontario-colour-white;\n}\n","// content automatically generated by `generate-icons.js` begins\nimport { Component, Prop, h, Watch, State, Element } from '@stencil/core';\nimport { Icon } from './icon.interface';\nimport { IconSize } from './icon.types';\nimport { ConsoleMessageClass } from '../../utils/console-message/console-message';\n\n@Component({\n\ttag: 'ontario-icon-alert-success',\n\tstyleUrl: 'ontario-icon.scss',\n\tshadow: true,\n})\nexport class OntarioIconAlertSuccess implements Icon {\n\t/**\n\t * The icon width will autogenerate the height since the icons are in square format, thus preserving\n\t * the aspect ratio.\n\t */\n\t@Prop() iconWidth: IconSize = 24;\n\n\t/**\n\t * Mutable variable, for internal use only.\n\t * Set the icon's width depending on validation result.\n\t */\n\t@State() iconWidthState: number;\n\n\t/**\n\t * Watch for changes in the `iconWidth` variable for validation purpose.\n\t * If the user input is not a number or is a negative number then `iconWidth` will be set to its default (24).\n\t */\n\t@Watch('iconWidth')\n\tvalidateWidth() {\n\t\tif (isNaN(this.iconWidth) || (!isNaN(this.iconWidth) && this.iconWidth <= 0)) {\n\t\t\tconst message = new ConsoleMessageClass();\n\t\t\tmessage\n\t\t\t\t.addDesignSystemTag()\n\t\t\t\t.addMonospaceText(' icon-width ')\n\t\t\t\t.addRegularText('on')\n\t\t\t\t.addMonospaceText(' <ontario-icon-alert-success> ')\n\t\t\t\t.addRegularText(\n\t\t\t\t\t`${\n\t\t\t\t\t\tisNaN(this.iconWidth) ? 'was set to a non-numeric value' : 'was set to a negative number'\n\t\t\t\t\t}; only a positive number is allowed. The default size of`,\n\t\t\t\t)\n\t\t\t\t.addMonospaceText(' 24px ')\n\t\t\t\t.addRegularText('was assumed.')\n\t\t\t\t.printMessage();\n\t\t\tthis.iconWidthState = 24;\n\t\t} else {\n\t\t\tthis.iconWidthState = this.iconWidth;\n\t\t}\n\t}\n\n\t/**\n\t * Reference to the host element\n\t * Use to check if the host element has the `colour` attribute set\n\t */\n\t@Element() host: HTMLElement;\n\n\t/**\n\t * Validate that the `colour` attribute is not set by users\n\t * Prints a warning message if the `colour` attribute is set\n\t */\n\tvalidateColour() {\n\t\tif (this.host.hasAttribute('colour')) {\n\t\t\tconst message = new ConsoleMessageClass();\n\t\t\tmessage\n\t\t\t\t.addDesignSystemTag()\n\t\t\t\t.addMonospaceText(' colour ')\n\t\t\t\t.addRegularText('on')\n\t\t\t\t.addMonospaceText(' <ontario-icon-alert-success> ')\n\t\t\t\t.addRegularText('cannot be set. The provided colour is ignored.')\n\t\t\t\t.printMessage();\n\t\t}\n\t}\n\n\t/**\n\t * Stencil component lifecycle method that is called once after the component is first connected to the DOM.\n\t */\n\tcomponentWillLoad() {\n\t\tthis.validateColour();\n\t\tthis.validateWidth();\n\t}\n\n\t/**\n\t * Returns the HTML code to be rendered into a custom element.\n\t */\n\trender() {\n\t\treturn (\n\t\t\t<div\n\t\t\t\tclass={`ontario-icon ontario-icon--width-${this.iconWidthState}`}\n\t\t\t\tstyle={{ width: `${this.iconWidthState}px` }}\n\t\t\t>\n\t\t\t\t<svg\n\t\t\t\t\tclass=\"svg-icon\"\n\t\t\t\t\trole=\"img\"\n\t\t\t\t\txmlns=\"http://www.w3.org/2000/svg\"\n\t\t\t\t\tfill=\"none\"\n\t\t\t\t\tviewBox=\"0 0 24 24\"\n\t\t\t\t\tid=\"alert-success\"\n\t\t\t\t>\n\t\t\t\t\t<path\n\t\t\t\t\t\td=\"M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 15l-5-5 1.4-1.4 3.6 3.58L17.17 7l1.4 1.42L10 17z\"\n\t\t\t\t\t\tfill=\"#118847\"\n\t\t\t\t\t/>\n\t\t\t\t\t<path d=\"M5 12l5 5 8.58-8.58L17.17 7 10 14.17 6.4 10.6 5 12z\" fill=\"#fff\" />\n\t\t\t\t</svg>\n\t\t\t</div>\n\t\t);\n\t}\n}\n// content automatically generated by `generate-icons.js` ends\n"],"version":3}

package/components/p-CNqFEifG.js

@@ -0,0 +1,34 @@
+function validatePropExists(newValue) {
+	// Check if new value that is passed in is a string and is not empty
+	const isNewValueBlank = typeof newValue !== 'string' || newValue === '';
+	// Return true if new value is both a string and is not empty
+	return isNewValueBlank;
+}
+function validateObjectExists(newValue) {
+	// Check if new value that is passed in is a string and is not empty
+	const isNewValueBlank = typeof newValue !== 'object';
+	// Return true if new value is both a string and is not empty
+	return isNewValueBlank;
+}
+/**
+ * Validate value against keys
+ * @param value value to be compared against keys
+ * @param keys of values provided by caller
+ * @returns true if a match is found or false if no matches are found
+ */
+function validateValueAgainstArray(value, keys) {
+	return keys.includes(value);
+}
+function validateLanguage(language) {
+	if (language) {
+		const toggledLanguage = typeof language !== 'string' ? language.detail : language;
+		if (toggledLanguage && (toggledLanguage === 'en' || toggledLanguage === 'fr')) return toggledLanguage;
+		else return 'en';
+	}
+	return 'en';
+}
+
+export { validatePropExists as a, validateLanguage as b, validateObjectExists as c, validateValueAgainstArray as v };
+//# sourceMappingURL=p-CNqFEifG.js.map
+
+//# sourceMappingURL=p-CNqFEifG.js.map

package/components/p-CNqFEifG.js.map

@@ -0,0 +1 @@
+{"file":"p-CNqFEifG.js","mappings":"AAEM,SAAU,kBAAkB,CAAC,QAA8B,EAAA;;IAEhE,MAAM,eAAe,GAAG,OAAO,QAAQ,KAAK,QAAQ,IAAI,QAAQ,KAAK,EAAE;;AAGvE,IAAA,OAAO,eAAe;AACvB;AAaM,SAAU,oBAAoB,CAAC,QAAgB,EAAA;;AAEpD,IAAA,MAAM,eAAe,GAAG,OAAO,QAAQ,KAAK,QAAQ;;AAGpD,IAAA,OAAO,eAAe;AACvB;AAEA;;;;;AAKG;AACa,SAAA,yBAAyB,CAAmB,KAAQ,EAAE,IAA2B,EAAA;AAChG,IAAA,OAAO,IAAI,CAAC,QAAQ,CAAC,KAAK,CAAC;AAC5B;AAEM,SAAU,gBAAgB,CAAC,QAAoD,EAAA;IACpF,IAAI,QAAQ,EAAE;AACb,QAAA,MAAM,eAAe,GAAG,OAAO,QAAQ,KAAK,QAAQ,GAAG,QAAQ,CAAC,MAAM,GAAG,QAAQ;QACjF,IAAI,eAAe,KAAK,eAAe,KAAK,IAAI,IAAI,eAAe,KAAK,IAAI,CAAC;AAAE,YAAA,OAAO,eAAe;;AAChG,YAAA,OAAO,IAAI;;AAGjB,IAAA,OAAO,IAAI;AACZ;;;;","names":[],"sources":["src/utils/validation/validation-functions.ts"],"sourcesContent":["import { Language } from '../common/language-types';\n\nexport function validatePropExists(newValue: string | HTMLElement): boolean {\n\t// Check if new value that is passed in is a string and is not empty\n\tconst isNewValueBlank = typeof newValue !== 'string' || newValue === '';\n\n\t// Return true if new value is both a string and is not empty\n\treturn isNewValueBlank;\n}\n\n/**\n * Validate value against enumType\n * T must extends String to gain access to the `toLowerCase()` function\n * @param value value to be compared against enumType\n * @param enumType list of enum values provided by caller\n * @returns enum value if a match is found or undefined if no matches are found\n */\nexport function validateValueAgainstEnum<T extends String, E extends Object>(value: T, enumType: E): T {\n\treturn Object.values(enumType).find((type) => type === value.toLowerCase());\n}\n\nexport function validateObjectExists(newValue: object): boolean {\n\t// Check if new value that is passed in is a string and is not empty\n\tconst isNewValueBlank = typeof newValue !== 'object';\n\n\t// Return true if new value is both a string and is not empty\n\treturn isNewValueBlank;\n}\n\n/**\n * Validate value against keys\n * @param value value to be compared against keys\n * @param keys of values provided by caller\n * @returns true if a match is found or false if no matches are found\n */\nexport function validateValueAgainstArray<T extends string>(value: T, keys: ReadonlyArray<string>): boolean {\n\treturn keys.includes(value);\n}\n\nexport function validateLanguage(language: CustomEvent<Language> | string | undefined) {\n\tif (language) {\n\t\tconst toggledLanguage = typeof language !== 'string' ? language.detail : language;\n\t\tif (toggledLanguage && (toggledLanguage === 'en' || toggledLanguage === 'fr')) return toggledLanguage;\n\t\telse return 'en';\n\t}\n\n\treturn 'en';\n}\n"],"version":3}