@ongov/ontario-design-system-component-library 4.3.0-alpha.3 → 4.3.1-alpha.1

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

@@ -1,6 +1,10 @@
 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';
+import { a as validateValueAgainstArray } from './validation-functions.js';
+import { C as ConsoleMessageClass } from './console-message.js';
+import { g as getRootHTMLElement, p as printArray } from './utils.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:#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}';
@@ -14,74 +18,211 @@ const OntarioLanguageToggle = /*@__PURE__*/ proxyCustomElement(
 			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');
-					}
+			/*
+			 * Updates the <html> lang attribute based on component languageState.
+			 */
+			this.updateHTMLLang = () => {
+				const htmlElement = getRootHTMLElement();
+				if (htmlElement) {
+					htmlElement.setAttribute('lang', this.languageState);
 				}
-				return;
 			};
 			this.language = undefined;
 			this.size = 'default';
 			this.url = undefined;
 			this.customLanguageToggle = undefined;
 			this.translations = translations;
+			this.languageState = undefined;
+			this.oppositeLanguageLabel = undefined;
 		}
-		setAppLanguageHandler() {
-			let lang;
+		/**
+		 * Updates the language and languageState props when changes to the language prop are detected.
+		 */
+		updateLanguage() {
 			if (this.language) {
-				lang = this.language;
-			} else if (document.documentElement.lang) {
-				lang = document.documentElement.lang;
-			} else {
-				lang = 'en';
+				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;
+			const rootLang = (_a = getRootHTMLElement()) === null || _a === void 0 ? void 0 : _a.lang;
+			// If languageState is not set, set it equal to the following cadence:
+			// language prop value, <html> tag lang attribute, or default to "en"
+			if (!this.languageState) {
+				if (this.language) {
+					this.languageState = this.language;
+				} else if (rootLang) {
+					if (validateValueAgainstArray(rootLang, supportedLanguages)) {
+						this.languageState = rootLang;
+					} else {
+						this.showLanguageWarning(rootLang, 'document');
+						this.languageState = defaultLang;
+					}
+				} else {
+					this.languageState = defaultLang;
+				}
 			}
-			this.language = lang;
-			this.setAppLanguage.emit(lang);
-			this.updateHTMLLang(lang);
+			this.setAppLanguage.emit(this.languageState);
+			this.oppositeLanguageLabel = {
+				fullWord: this.getOppositeLanguageFullWord(),
+				abbreviation: this.getOppositeLanguageAbbrievation(),
+			};
+			this.updateHTMLLang();
 		}
-		handleHeaderLanguageToggled(language, event) {
-			const toggledLanguage = language === 'en' ? 'fr' : 'en';
-			this.language = toggledLanguage;
-			this.headerLanguageToggled.emit({ oldLanguage: language, newLanguage: toggledLanguage });
-			this.updateHTMLLang(toggledLanguage);
+		/**
+		 * 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);
 			}
 		}
-		updateLanguage() {
-			this.language = validateLanguage(this.language);
-			this.setAppLanguageHandler();
+		/**
+		 * 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.updateLanguage();
+			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 (getRootHTMLElement()) {
+				const options = { attributes: true };
+				observer.observe(getRootHTMLElement(), options);
+			}
 		}
 		render() {
-			const language = this.language === 'en' ? 'Français' : 'English';
-			const abbreviatedLanguage = this.language === 'en' ? 'FR' : 'EN';
+			var _a, _b, _c, _d, _e, _f, _g;
 			return h(
 				'a',
 				{
-					'key': 'ac43f7a7e95a21f5170f087d97a8c04884e70e2a',
+					'key': 'f43e42110b4272a268801c310a8d14e31342f426',
+					'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 : '#',
-					'aria-label': this.translations.languageToggle.ariaLabel[`${this.language}`],
-					'onClick': (e) => this.handleHeaderLanguageToggled(this.language, e),
+					'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, language)
+					? h('span', null, (_d = this.oppositeLanguageLabel) === null || _d === void 0 ? void 0 : _d.fullWord)
 					: h(
 							Fragment,
 							null,
-							h('abbr', { title: language, class: 'ontario-show-for-small-only' }, abbreviatedLanguage),
-							h('span', { class: 'ontario-show-for-medium' }, language),
+							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,
+							),
 					  ),
 			);
 		}
@@ -103,6 +244,8 @@ const OntarioLanguageToggle = /*@__PURE__*/ proxyCustomElement(
 			url: [1025],
 			customLanguageToggle: [16],
 			translations: [32],
+			languageState: [32],
+			oppositeLanguageLabel: [32],
 		},
 		undefined,
 		{

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

@@ -1 +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}
+{"file":"ontario-language-toggle2.js","mappings":"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","names":[],"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 '@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 { supportedLanguages, Language } from '../../utils/common/language-types';\n\nimport { default as translations } from '../../translations/global.i18n.json';\nimport { HeaderLanguageToggleEventDetails } from '../../utils/events/common-events.interface';\nimport { validateValueAgainstArray } from '../../utils/validation/validation-functions';\nimport { ConsoleMessageClass } from '../../utils/console-message/console-message';\nimport { printArray, getRootHTMLElement } from '../../utils/helper/utils';\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\t\tconst rootLang = getRootHTMLElement()?.lang;\n\n\t\t// If languageState is not set, set it equal to the following cadence:\n\t\t// language prop value, <html> tag lang attribute, or default to \"en\"\n\t\tif (!this.languageState) {\n\t\t\tif (this.language) {\n\t\t\t\tthis.languageState = this.language;\n\t\t\t} else if (rootLang) {\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\tthis.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\tthis.languageState = defaultLang;\n\t\t\t}\n\t\t}\n\n\t\tthis.setAppLanguage.emit(this.languageState);\n\n\t\tthis.oppositeLanguageLabel = {\n\t\t\tfullWord: this.getOppositeLanguageFullWord(),\n\t\t\tabbreviation: this.getOppositeLanguageAbbrievation(),\n\t\t};\n\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 (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}

package/dist/components/utils.js

@@ -68,14 +68,42 @@ function isEmpty(str) {
 function retrieveEnumKeys(enumObject) {
 	return Object.keys(enumObject).filter(isNumber);
 }
+/**
+ * Prints an array as a comma delimited list, with the last element being preceded by a conjunction.
+ * As per ontario.ca content guidelines, there is no Oxford comma.
+ *
+ * @param {Array<any>} arr - The array that you wish to print.
+ * @param {Conjunction} conjunctionType - Whether you want the sentence to end with 'and value.' or 'or value.'
+ *
+ * @returns {string}
+ */
+function printArray(arr, conjunctionType = 'and') {
+	return [...arr].reduce(
+		(text, value, i, array) => text + (i < array.length - 1 ? ', ' : ` ${conjunctionType} `) + value,
+	);
+}
+/**
+ * Grabs the HTML element of the page.
+ *
+ * More targetted than document.documentElement as the documentElement could
+ * in theory be any element that is the top level. e.g. <div> if the page is not
+ * set up to be semantically correct.
+ *
+ * @returns {HTMLElement}
+ */
+function getRootHTMLElement() {
+	return document.getElementsByTagName('html')[0];
+}
 
 export {
 	isNumber as a,
 	removeObjectsBySpecificKey as b,
 	extractValuesByKey as e,
+	getRootHTMLElement as g,
 	hasMultipleTrueValues as h,
 	isEmpty as i,
 	organizeObjectKeys as o,
+	printArray as p,
 	retrieveEnumKeys as r,
 };
 

package/dist/components/utils.js.map

@@ -1 +1 @@
-{"file":"utils.js","mappings":"SAIgB,qBAAqB,CAAI,GAAQ,EAAE,GAAY;IAC9D,IAAI,KAAK,GAAG,CAAC,CAAC;IAEd,KAAK,MAAM,GAAG,IAAI,GAAG,EAAE;QACtB,IAAI,GAAG,CAAC,GAAG,CAAC,KAAK,IAAI,IAAI,GAAG,CAAC,GAAG,CAAC,KAAK,MAAM,EAAE;YAC7C,KAAK,EAAE,CAAC;YACR,IAAI,KAAK,GAAG,CAAC,EAAE;gBACd,OAAO,IAAI,CAAC;aACZ;SACD;KACD;IAED,OAAO,KAAK,CAAC;AACd,CAAC;SAEe,kBAAkB,CAAI,OAAY,EAAE,GAAY;IAC/D,OAAO,OAAO,CAAC,GAAG,CAAC,CAAC,GAAG,KAAK,GAAG,CAAC,GAAG,CAAC,CAAC,CAAC;AACvC,CAAC;SAEe,kBAAkB,CAAC,IAAW,EAAE,OAAiB;IAChE,OAAO,IAAI,CAAC,GAAG,CAAC,CAAC,IAAI;QACpB,MAAM,OAAO,GAAQ,EAAE,CAAC;QACxB,MAAM,SAAS,GAAQ,EAAE,CAAC;;QAG1B,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,OAAO,CAAC,CAAC,GAAG;YAC7B,IAAI,GAAG,KAAK,MAAM,EAAE;;gBAEnB,OAAO,CAAC,OAAO,CAAC,CAAC,MAAM;oBACtB,IAAI,MAAM,IAAI,IAAI,CAAC,IAAI,EAAE;wBACxB,OAAO,CAAC,MAAM,CAAC,GAAG,IAAI,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC;qBACpC;iBACD,CAAC,CAAC;aACH;iBAAM;;gBAEN,SAAS,CAAC,GAAG,CAAC,GAAG,IAAI,CAAC,GAAG,CAAC,CAAC;aAC3B;SACD,CAAC,CAAC;QAEH,uBAAS,IAAI,EAAE,OAAO,IAAK,SAAS,EAAG;KACvC,CAAC,CAAC;AACJ,CAAC;SAEe,0BAA0B,CAAI,OAAY,EAAE,GAAY,EAAE,KAAuB;IAChG,MAAM,cAAc,GAAQ,EAAE,CAAC;IAC/B,MAAM,eAAe,GAAG,OAAO,CAAC,MAAM,CAAC,CAAC,GAAG;QAC1C,IAAI,GAAG,CAAC,GAAG,CAAC,KAAK,KAAK,EAAE;YACvB,cAAc,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;YACzB,OAAO,KAAK,CAAC;SACb;QACD,OAAO,IAAI,CAAC;KACZ,CAAC,CAAC;IACH,OAAO,CAAC,eAAe,EAAE,cAAc,CAAC,CAAC;AAC1C,CAAC;AAED;;;;;;;SAOgB,QAAQ,CAAC,KAAsB;IAC9C,OAAO,KAAK,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC,KAAK,IAAI,CAAC;AACtC,CAAC;SAEe,OAAO,CAAC,GAA8B;IACrD,OAAO,CAAC,GAAG,IAAI,CAAA,GAAG,aAAH,GAAG,uBAAH,GAAG,CAAE,MAAM,KAAI,CAAC,CAAC;AACjC,CAAC;AAED;;;;;;;SAOgB,gBAAgB,CAAC,UAAkB;IAClD,OAAO,MAAM,CAAC,IAAI,CAAC,UAAU,CAAC,CAAC,MAAM,CAAC,QAAQ,CAAC,CAAC;AACjD;;;;","names":[],"sources":["src/utils/helper/utils.ts"],"sourcesContent":["export function format(first: string | undefined, middle: string | undefined, last: string | undefined): string {\n\treturn (first || '') + (middle ? ` ${middle}` : '') + (last ? ` ${last}` : '');\n}\n\nexport function hasMultipleTrueValues<T>(arr: T[], key: keyof T): boolean {\n\tlet count = 0;\n\n\tfor (const obj of arr) {\n\t\tif (obj[key] === true || obj[key] === 'true') {\n\t\t\tcount++;\n\t\t\tif (count > 1) {\n\t\t\t\treturn true;\n\t\t\t}\n\t\t}\n\t}\n\n\treturn false;\n}\n\nexport function extractValuesByKey<T>(objects: T[], key: keyof T): Array<T[keyof T]> {\n\treturn objects.map((obj) => obj[key]);\n}\n\nexport function organizeObjectKeys(data: any[], columns: string[]): any[] {\n\treturn data.map((item) => {\n\t\tconst newData: any = {};\n\t\tconst otherKeys: any = {};\n\n\t\t// Iterate through each key in the item\n\t\tObject.keys(item).forEach((key) => {\n\t\t\tif (key === 'data') {\n\t\t\t\t// Organize keys in the 'data' object\n\t\t\t\tcolumns.forEach((column) => {\n\t\t\t\t\tif (column in item.data) {\n\t\t\t\t\t\tnewData[column] = item.data[column];\n\t\t\t\t\t}\n\t\t\t\t});\n\t\t\t} else {\n\t\t\t\t// Preserve other keys\n\t\t\t\totherKeys[key] = item[key];\n\t\t\t}\n\t\t});\n\n\t\treturn { data: newData, ...otherKeys };\n\t});\n}\n\nexport function removeObjectsBySpecificKey<T>(objects: T[], key: keyof T, value: boolean | 'true'): [T[], T[]] {\n\tconst removedObjects: T[] = [];\n\tconst filteredObjects = objects.filter((obj) => {\n\t\tif (obj[key] === value) {\n\t\t\tremovedObjects.push(obj);\n\t\t\treturn false;\n\t\t}\n\t\treturn true;\n\t});\n\treturn [filteredObjects, removedObjects];\n}\n\n/**\n * Takes an input value and determines whether or not it is a number.\n *\n * @param {string | number} value - The value you would like to test against.\n *\n * @returns {boolean}\n */\nexport function isNumber(value: string | number): boolean {\n\treturn isNaN(Number(value)) === true;\n}\n\nexport function isEmpty(str: string | undefined | null): boolean {\n\treturn !str || str?.length <= 0;\n}\n\n/**\n * Retrieves the keys from an enum and lists them in an array.\n *\n * @param {object} enumObject - The enum you wish to get the keys of.\n *\n * @returns {string[]}\n */\nexport function retrieveEnumKeys(enumObject: object): string[] {\n\treturn Object.keys(enumObject).filter(isNumber);\n}\n"],"version":3}
+{"file":"utils.js","mappings":"SAMgB,qBAAqB,CAAI,GAAQ,EAAE,GAAY;IAC9D,IAAI,KAAK,GAAG,CAAC,CAAC;IAEd,KAAK,MAAM,GAAG,IAAI,GAAG,EAAE;QACtB,IAAI,GAAG,CAAC,GAAG,CAAC,KAAK,IAAI,IAAI,GAAG,CAAC,GAAG,CAAC,KAAK,MAAM,EAAE;YAC7C,KAAK,EAAE,CAAC;YACR,IAAI,KAAK,GAAG,CAAC,EAAE;gBACd,OAAO,IAAI,CAAC;aACZ;SACD;KACD;IAED,OAAO,KAAK,CAAC;AACd,CAAC;SAEe,kBAAkB,CAAI,OAAY,EAAE,GAAY;IAC/D,OAAO,OAAO,CAAC,GAAG,CAAC,CAAC,GAAG,KAAK,GAAG,CAAC,GAAG,CAAC,CAAC,CAAC;AACvC,CAAC;SAEe,kBAAkB,CAAC,IAAW,EAAE,OAAiB;IAChE,OAAO,IAAI,CAAC,GAAG,CAAC,CAAC,IAAI;QACpB,MAAM,OAAO,GAAQ,EAAE,CAAC;QACxB,MAAM,SAAS,GAAQ,EAAE,CAAC;;QAG1B,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,OAAO,CAAC,CAAC,GAAG;YAC7B,IAAI,GAAG,KAAK,MAAM,EAAE;;gBAEnB,OAAO,CAAC,OAAO,CAAC,CAAC,MAAM;oBACtB,IAAI,MAAM,IAAI,IAAI,CAAC,IAAI,EAAE;wBACxB,OAAO,CAAC,MAAM,CAAC,GAAG,IAAI,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC;qBACpC;iBACD,CAAC,CAAC;aACH;iBAAM;;gBAEN,SAAS,CAAC,GAAG,CAAC,GAAG,IAAI,CAAC,GAAG,CAAC,CAAC;aAC3B;SACD,CAAC,CAAC;QAEH,uBAAS,IAAI,EAAE,OAAO,IAAK,SAAS,EAAG;KACvC,CAAC,CAAC;AACJ,CAAC;SAEe,0BAA0B,CAAI,OAAY,EAAE,GAAY,EAAE,KAAuB;IAChG,MAAM,cAAc,GAAQ,EAAE,CAAC;IAC/B,MAAM,eAAe,GAAG,OAAO,CAAC,MAAM,CAAC,CAAC,GAAG;QAC1C,IAAI,GAAG,CAAC,GAAG,CAAC,KAAK,KAAK,EAAE;YACvB,cAAc,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;YACzB,OAAO,KAAK,CAAC;SACb;QACD,OAAO,IAAI,CAAC;KACZ,CAAC,CAAC;IACH,OAAO,CAAC,eAAe,EAAE,cAAc,CAAC,CAAC;AAC1C,CAAC;AAED;;;;;;;SAOgB,QAAQ,CAAC,KAAsB;IAC9C,OAAO,KAAK,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC,KAAK,IAAI,CAAC;AACtC,CAAC;SAEe,OAAO,CAAC,GAA8B;IACrD,OAAO,CAAC,GAAG,IAAI,CAAA,GAAG,aAAH,GAAG,uBAAH,GAAG,CAAE,MAAM,KAAI,CAAC,CAAC;AACjC,CAAC;AAED;;;;;;;SAOgB,gBAAgB,CAAC,UAAkB;IAClD,OAAO,MAAM,CAAC,IAAI,CAAC,UAAU,CAAC,CAAC,MAAM,CAAC,QAAQ,CAAC,CAAC;AACjD,CAAC;AAED;;;;;;;;;SASgB,UAAU,CAAC,GAAe,EAAE,kBAA+B,KAAK;IAC/E,OAAO,CAAC,GAAG,GAAG,CAAC,CAAC,MAAM,CACrB,CAAC,IAAI,EAAE,KAAK,EAAE,CAAC,EAAE,KAAK,KAAK,IAAI,IAAI,CAAC,GAAG,KAAK,CAAC,MAAM,GAAG,CAAC,GAAG,IAAI,GAAG,IAAI,eAAe,GAAG,CAAC,GAAG,KAAK,CAChG,CAAC;AACH,CAAC;AAED;;;;;;;;;SASgB,kBAAkB;IACjC,OAAO,QAAQ,CAAC,oBAAoB,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,CAAC;AACjD;;;;","names":[],"sources":["src/utils/helper/utils.ts"],"sourcesContent":["import { Conjunction } from './utils-types';\n\nexport function format(first: string | undefined, middle: string | undefined, last: string | undefined): string {\n\treturn (first || '') + (middle ? ` ${middle}` : '') + (last ? ` ${last}` : '');\n}\n\nexport function hasMultipleTrueValues<T>(arr: T[], key: keyof T): boolean {\n\tlet count = 0;\n\n\tfor (const obj of arr) {\n\t\tif (obj[key] === true || obj[key] === 'true') {\n\t\t\tcount++;\n\t\t\tif (count > 1) {\n\t\t\t\treturn true;\n\t\t\t}\n\t\t}\n\t}\n\n\treturn false;\n}\n\nexport function extractValuesByKey<T>(objects: T[], key: keyof T): Array<T[keyof T]> {\n\treturn objects.map((obj) => obj[key]);\n}\n\nexport function organizeObjectKeys(data: any[], columns: string[]): any[] {\n\treturn data.map((item) => {\n\t\tconst newData: any = {};\n\t\tconst otherKeys: any = {};\n\n\t\t// Iterate through each key in the item\n\t\tObject.keys(item).forEach((key) => {\n\t\t\tif (key === 'data') {\n\t\t\t\t// Organize keys in the 'data' object\n\t\t\t\tcolumns.forEach((column) => {\n\t\t\t\t\tif (column in item.data) {\n\t\t\t\t\t\tnewData[column] = item.data[column];\n\t\t\t\t\t}\n\t\t\t\t});\n\t\t\t} else {\n\t\t\t\t// Preserve other keys\n\t\t\t\totherKeys[key] = item[key];\n\t\t\t}\n\t\t});\n\n\t\treturn { data: newData, ...otherKeys };\n\t});\n}\n\nexport function removeObjectsBySpecificKey<T>(objects: T[], key: keyof T, value: boolean | 'true'): [T[], T[]] {\n\tconst removedObjects: T[] = [];\n\tconst filteredObjects = objects.filter((obj) => {\n\t\tif (obj[key] === value) {\n\t\t\tremovedObjects.push(obj);\n\t\t\treturn false;\n\t\t}\n\t\treturn true;\n\t});\n\treturn [filteredObjects, removedObjects];\n}\n\n/**\n * Takes an input value and determines whether or not it is a number.\n *\n * @param {string | number} value - The value you would like to test against.\n *\n * @returns {boolean}\n */\nexport function isNumber(value: string | number): boolean {\n\treturn isNaN(Number(value)) === true;\n}\n\nexport function isEmpty(str: string | undefined | null): boolean {\n\treturn !str || str?.length <= 0;\n}\n\n/**\n * Retrieves the keys from an enum and lists them in an array.\n *\n * @param {object} enumObject - The enum you wish to get the keys of.\n *\n * @returns {string[]}\n */\nexport function retrieveEnumKeys(enumObject: object): string[] {\n\treturn Object.keys(enumObject).filter(isNumber);\n}\n\n/**\n * Prints an array as a comma delimited list, with the last element being preceded by a conjunction.\n * As per ontario.ca content guidelines, there is no Oxford comma.\n *\n * @param {Array<any>} arr - The array that you wish to print.\n * @param {Conjunction} conjunctionType - Whether you want the sentence to end with 'and value.' or 'or value.'\n *\n * @returns {string}\n */\nexport function printArray(arr: Array<any>, conjunctionType: Conjunction = 'and'): string {\n\treturn [...arr].reduce(\n\t\t(text, value, i, array) => text + (i < array.length - 1 ? ', ' : ` ${conjunctionType} `) + value,\n\t);\n}\n\n/**\n * Grabs the HTML element of the page.\n *\n * More targetted than document.documentElement as the documentElement could\n * in theory be any element that is the top level. e.g. <div> if the page is not\n * set up to be semantically correct.\n *\n * @returns {HTMLElement}\n */\nexport function getRootHTMLElement(): HTMLElement {\n\treturn document.getElementsByTagName('html')[0];\n}\n"],"version":3}