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

package/dist/components/p-DDlYnmsc.js

@@ -0,0 +1,302 @@
+import { p as proxyCustomElement, H, c as createEvent, h, F as Fragment } from './index.js';
+import { t as translations } from './p-DgMhpSmi.js';
+import { v as validateValueAgainstArray } from './p-CNqFEifG.js';
+import { C as ConsoleMessageClass } from './p-CJXRCL8b.js';
+import { g as getRootHTMLElement, p as printArray } from './p-DQi-JVyL.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}';
+
+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 language of the component.
+		 *
+		 * In most cases, the language toggle should be the source of truth for determining the site language.
+		 *
+		 * Only pass a language value here if necessary.
+		 */
+		language;
+		/**
+		 * The size of the language toggle button.
+		 *
+		 * If no prop is passed, it will be set to the `default` size.
+		 */
+		size = 'default';
+		/**
+		 * The URL to change to when the language toggle button is clicked.
+		 *
+		 * This is optional.
+		 */
+		url;
+		/**
+		 * A custom function to pass to the language toggle button.
+		 *
+		 * This is optional.
+		 */
+		customLanguageToggle;
+		translations = translations;
+		/**
+		 * Internal state used as the source of truth for component language.
+		 */
+		languageState;
+		/**
+		 * Internal state used to render the text on the language toggle UI.
+		 */
+		oppositeLanguageLabel = undefined;
+		/**
+		 * 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();
+		}
+		/**
+		 * Event that fires during the setAppLanguageHandler() method.
+		 *
+		 * The event contains the current language (after language logic has already occurred).
+		 */
+		setAppLanguage;
+		/**
+		 * Event that fires when the language toggle is pressed/clicked.
+		 *
+		 * The event contains the oldLanguage along with the newLanguage.
+		 */
+		headerLanguageToggled;
+		/**
+		 * 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() {
+			const defaultLang = this.translations.siteLanguage.abbreviation.en;
+			const rootLang = getRootHTMLElement()?.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.setAppLanguage.emit(this.languageState);
+			this.oppositeLanguageLabel = {
+				fullWord: this.getOppositeLanguageFullWord(),
+				abbreviation: this.getOppositeLanguageAbbrievation(),
+			};
+			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;
+		}
+		/*
+		 * Updates the <html> lang attribute based on component languageState.
+		 */
+		updateHTMLLang = () => {
+			const htmlElement = getRootHTMLElement();
+			if (htmlElement) {
+				htmlElement.setAttribute('lang', this.languageState);
+			}
+		};
+		/**
+		 * 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 (getRootHTMLElement()) {
+				const options = { attributes: true };
+				observer.observe(getRootHTMLElement(), options);
+			}
+		}
+		render() {
+			return h(
+				'a',
+				{
+					'key': '6c86a21b82c98dfad80eb1095af399847286c6bd',
+					'aria-label': this.translations.languageToggle.ariaLabel[`${this.oppositeLanguageLabel?.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': this.oppositeLanguageLabel?.abbreviation,
+					'lang': this.oppositeLanguageLabel?.abbreviation,
+					'onClick': (e) => this.handleHeaderLanguageToggled(this.languageState, e),
+				},
+				this.size === 'small'
+					? h('span', null, this.oppositeLanguageLabel?.fullWord)
+					: h(
+							Fragment,
+							null,
+							h(
+								'abbr',
+								{ title: this.oppositeLanguageLabel?.fullWord, class: 'ontario-show-for-small-only' },
+								this.oppositeLanguageLabel?.abbreviation.toUpperCase(),
+							),
+							h('span', { class: 'ontario-show-for-medium' }, this.oppositeLanguageLabel?.fullWord),
+						),
+			);
+		}
+		static get watchers() {
+			return {
+				language: ['updateLanguage'],
+			};
+		}
+		static get style() {
+			return ontarioLanguageToggleCss;
+		}
+	},
+	[
+		1,
+		'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;
+		}
+	});
+}
+
+export { OntarioLanguageToggle as O, defineCustomElement as d };
+//# sourceMappingURL=p-DDlYnmsc.js.map
+
+//# sourceMappingURL=p-DDlYnmsc.js.map

package/dist/components/p-DDlYnmsc.js.map

@@ -0,0 +1 @@
+{"file":"p-DDlYnmsc.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 '@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/fonts.variables' as fonts;\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: 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\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/p-DFHrahxt.js

@@ -0,0 +1,178 @@
+import { p as proxyCustomElement, H, h } from './index.js';
+import { r as retrieveEnumKeys } from './p-DQi-JVyL.js';
+import { C as ConsoleMessageClass } from './p-CJXRCL8b.js';
+import { v as validateValueAgainstArray } from './p-CNqFEifG.js';
+
+var BadgeColourToClass;
+(function (BadgeColourToClass) {
+	BadgeColourToClass['teal'] = 'ontario-badge--default-heavy';
+	BadgeColourToClass['lightTeal'] = 'ontario-badge--default-light';
+	BadgeColourToClass['black'] = 'ontario-badge--neutral-heavy';
+	BadgeColourToClass['grey'] = 'ontario-badge--neutral-light';
+	BadgeColourToClass['red'] = 'ontario-badge--alert-heavy';
+	BadgeColourToClass['yellow'] = 'ontario-badge--warning-heavy';
+	BadgeColourToClass['green'] = 'ontario-badge--success-heavy';
+	BadgeColourToClass['white'] = 'ontario-badge--white';
+	BadgeColourToClass['darkGrey'] = 'ontario-badge--grey';
+})(BadgeColourToClass || (BadgeColourToClass = {}));
+const BadgeColours = retrieveEnumKeys(BadgeColourToClass);
+
+const ontarioBadgeCss =
+	'.ontario-badge__container{display:flex;flex-direction:column;gap:2.5rem;align-items:flex-start;padding:1.5rem 1rem}.ontario-badge__label{display:block;text-align:left;font-weight:600;margin-bottom:0.75rem;font-size:0.875rem;color:#4d4d4d}.ontario-badge{display:inline-block;background-color:#E2F0F4;color:#4d4d4d;padding:0.25rem 0.5rem;font-family:"Raleway", "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;font-size:1rem;font-weight:700;line-height:1.5625rem;letter-spacing:0.03rem;text-transform:uppercase}.ontario-badge--default-light{background-color:#E2F0F4;color:#4d4d4d}.ontario-badge--default-heavy{background-color:#1080A6;color:#FFFFFF}.ontario-badge--neutral-light{background-color:#f2f2f2;color:#4d4d4d}.ontario-badge--neutral-heavy{background-color:#1a1a1a;color:#FFFFFF}.ontario-badge--alert-heavy{background-color:#CD0000;color:#FFFFFF}.ontario-badge--warning-heavy{background-color:#FFD440;color:#1a1a1a}.ontario-badge--success-heavy{background-color:#118847;color:#FFFFFF}.ontario-badge--white{background-color:#FFFFFF;color:#4d4d4d;border:0.0625rem solid #4d4d4d}.ontario-badge--grey{background-color:#cccccc;color:#1a1a1a}';
+
+const OntarioBadge = /*@__PURE__*/ proxyCustomElement(
+	class OntarioBadge extends H {
+		constructor() {
+			super();
+			this.__registerHost();
+			this.__attachShadow();
+		}
+		get host() {
+			return this;
+		}
+		internals;
+		/**
+		 * The colour of the badge.
+		 */
+		colour = 'teal';
+		/**
+		 * The label for the badge.
+		 *
+		 * Offical guidance is to keep the label length within 15 characters.
+		 */
+		label;
+		/**
+		 * An aria label for screen readers.
+		 *
+		 * Used to provide more context to screen readers if necessary.
+		 *
+		 * This property is optional.
+		 *
+		 * @example
+		 * <ontario-badge aria-label-text="This training is currently in progress.">In progress</ontario-badge>
+		 */
+		ariaLabelText;
+		/**
+		 * Watch for changes in the `label` prop for validation purposes.
+		 *
+		 * If no `label` value or host.textContent is provided, a warning message will be printed.
+		 */
+		validateLabel() {
+			if (!this.getBadgeLabel()) {
+				const message = new ConsoleMessageClass();
+				message
+					.addDesignSystemTag()
+					.addMonospaceText(' a label ')
+					.addRegularText('for')
+					.addMonospaceText(' <ontario-badge> ')
+					.addRegularText('was not provided.')
+					.printMessage();
+			}
+		}
+		/**
+		 * Watch for changes to the `colour` prop.
+		 *
+		 * If no `colour` is passed, or if the `colour` does not match the `colour` options, a default value of 'teal' will be applied.
+		 *
+		 * @returns {BadgeColour}
+		 */
+		validateColour() {
+			if (this.colour) {
+				if (validateValueAgainstArray(this.colour, BadgeColours)) {
+					return this.colour;
+				} else {
+					const message = new ConsoleMessageClass();
+					message
+						.addDesignSystemTag()
+						.addMonospaceText(` colour ${this.colour} `)
+						.addRegularText('for')
+						.addMonospaceText(' <ontario-badge> ')
+						.addRegularText('does not match one of the valid colour types. A default colour of `teal` will be applied.')
+						.printMessage();
+				}
+			}
+			return this.setBadgeColour('teal');
+		}
+		/**
+		 * Programatically set and return the colour prop.
+		 *
+		 * @prop {BadgeColour} colour
+		 *
+		 * @returns {BadgeColour}
+		 */
+		setBadgeColour(colour) {
+			this.colour = colour;
+			return this.colour;
+		}
+		/**
+		 * Returns badge label depending on if the label prop was set or
+		 * if the host.textContent (text in-between the opening and closing tag) was set.
+		 *
+		 * The label prop takes priority.
+		 *
+		 * @returns {string | null}
+		 */
+		getBadgeLabel() {
+			const badgeLabel = this.label ? this.label : this.host.textContent;
+			return badgeLabel;
+		}
+		componentWillLoad() {
+			this.validateColour();
+			this.validateLabel();
+		}
+		render() {
+			return h(
+				'span',
+				{
+					'key': '9fec2518bba42350d3bb2f744ae831d0bbc73265',
+					'class': `ontario-badge ${BadgeColourToClass[this.colour]}`,
+					'aria-label': this.ariaLabelText,
+				},
+				this.getBadgeLabel(),
+			);
+		}
+		static get watchers() {
+			return {
+				label: ['validateLabel'],
+				colour: ['validateColour'],
+			};
+		}
+		static get style() {
+			return ontarioBadgeCss;
+		}
+	},
+	[
+		1,
+		'ontario-badge',
+		{
+			colour: [1025],
+			label: [1],
+			ariaLabelText: [1025, 'aria-label-text'],
+		},
+		undefined,
+		{
+			label: ['validateLabel'],
+			colour: ['validateColour'],
+		},
+	],
+);
+function defineCustomElement() {
+	if (typeof customElements === 'undefined') {
+		return;
+	}
+	const components = ['ontario-badge'];
+	components.forEach((tagName) => {
+		switch (tagName) {
+			case 'ontario-badge':
+				if (!customElements.get(tagName)) {
+					customElements.define(tagName, OntarioBadge);
+				}
+				break;
+		}
+	});
+}
+
+export { OntarioBadge as O, defineCustomElement as d };
+//# sourceMappingURL=p-DFHrahxt.js.map
+
+//# sourceMappingURL=p-DFHrahxt.js.map

package/dist/components/p-DFHrahxt.js.map

@@ -0,0 +1 @@
+{"file":"p-DFHrahxt.js","mappings":";;;;;AAEA,IAAY,kBAUX;AAVD,CAAA,UAAY,kBAAkB,EAAA;AAC7B,IAAA,kBAAA,CAAA,MAAA,CAAA,GAAA,8BAAqC;AACrC,IAAA,kBAAA,CAAA,WAAA,CAAA,GAAA,8BAA0C;AAC1C,IAAA,kBAAA,CAAA,OAAA,CAAA,GAAA,8BAAsC;AACtC,IAAA,kBAAA,CAAA,MAAA,CAAA,GAAA,8BAAqC;AACrC,IAAA,kBAAA,CAAA,KAAA,CAAA,GAAA,4BAAkC;AAClC,IAAA,kBAAA,CAAA,QAAA,CAAA,GAAA,8BAAuC;AACvC,IAAA,kBAAA,CAAA,OAAA,CAAA,GAAA,8BAAsC;AACtC,IAAA,kBAAA,CAAA,OAAA,CAAA,GAAA,sBAA8B;AAC9B,IAAA,kBAAA,CAAA,UAAA,CAAA,GAAA,qBAAgC;AACjC,CAAC,EAVW,kBAAkB,KAAlB,kBAAkB,GAU7B,EAAA,CAAA,CAAA;AAEM,MAAM,YAAY,GAAG,gBAAgB,CAAC,kBAAkB,CAAC;;ACdhE,MAAM,eAAe,GAAG,yoCAAyoC;;MCWppC,YAAY,iBAAAA,kBAAA,CAAA,MAAA,YAAA,SAAAC,CAAA,CAAA;;;;;;;AAEL,IAAA,SAAS;AAE5B;;AAEG;IACsB,MAAM,GAAgB,MAAM;AAErD;;;;AAIG;AACK,IAAA,KAAK;AAEb;;;;;;;;;AASG;AACsB,IAAA,aAAa;AAEtC;;;;AAIG;IAEH,aAAa,GAAA;AACZ,QAAA,IAAI,CAAC,IAAI,CAAC,aAAa,EAAE,EAAE;AAC1B,YAAA,MAAM,OAAO,GAAG,IAAI,mBAAmB,EAAE;YACzC;AACE,iBAAA,kBAAkB;iBAClB,gBAAgB,CAAC,WAAW;iBAC5B,cAAc,CAAC,KAAK;iBACpB,gBAAgB,CAAC,mBAAmB;iBACpC,cAAc,CAAC,mBAAmB;AAClC,iBAAA,YAAY,EAAE;;;AAIlB;;;;;;AAMG;IAEH,cAAc,GAAA;AACb,QAAA,IAAI,IAAI,CAAC,MAAM,EAAE;YAChB,IAAI,yBAAyB,CAAC,IAAI,CAAC,MAAM,EAAE,YAAY,CAAC,EAAE;gBACzD,OAAO,IAAI,CAAC,MAAM;;iBACZ;AACN,gBAAA,MAAM,OAAO,GAAG,IAAI,mBAAmB,EAAE;gBACzC;AACE,qBAAA,kBAAkB;AAClB,qBAAA,gBAAgB,CAAC,CAAW,QAAA,EAAA,IAAI,CAAC,MAAM,GAAG;qBAC1C,cAAc,CAAC,KAAK;qBACpB,gBAAgB,CAAC,mBAAmB;qBACpC,cAAc,CAAC,2FAA2F;AAC1G,qBAAA,YAAY,EAAE;;;AAIlB,QAAA,OAAO,IAAI,CAAC,cAAc,CAAC,MAAM,CAAC;;AAGnC;;;;;;AAMG;AACH,IAAA,cAAc,CAAC,MAAmB,EAAA;AACjC,QAAA,IAAI,CAAC,MAAM,GAAG,MAAM;QACpB,OAAO,IAAI,CAAC,MAAM;;AAGnB;;;;;;;AAOG;IACH,aAAa,GAAA;AACZ,QAAA,MAAM,UAAU,GAAG,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC,IAAI,CAAC,WAAW;AAClE,QAAA,OAAO,UAAU;;IAGlB,iBAAiB,GAAA;QAChB,IAAI,CAAC,cAAc,EAAE;QACrB,IAAI,CAAC,aAAa,EAAE;;IAGrB,MAAM,GAAA;AACL,QAAA,QACC,6DAAM,KAAK,EAAE,CAAiB,cAAA,EAAA,kBAAkB,CAAC,IAAI,CAAC,MAAM,CAAC,CAAE,CAAA,EAAc,YAAA,EAAA,IAAI,CAAC,aAAa,EAC7F,EAAA,IAAI,CAAC,aAAa,EAAE,CACf;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/ontario-badge/ontario-badge.types.ts","src/components/ontario-badge/ontario-badge.scss?tag=ontario-badge&encapsulation=shadow","src/components/ontario-badge/ontario-badge.tsx"],"sourcesContent":["import { retrieveEnumKeys } from '../../utils/helper/utils';\n\nexport enum BadgeColourToClass {\n\tteal = 'ontario-badge--default-heavy',\n\tlightTeal = 'ontario-badge--default-light',\n\tblack = 'ontario-badge--neutral-heavy',\n\tgrey = 'ontario-badge--neutral-light',\n\tred = 'ontario-badge--alert-heavy',\n\tyellow = 'ontario-badge--warning-heavy',\n\tgreen = 'ontario-badge--success-heavy',\n\twhite = 'ontario-badge--white',\n\tdarkGrey = 'ontario-badge--grey',\n}\n\nexport const BadgeColours = retrieveEnumKeys(BadgeColourToClass);\n\nexport type BadgeColour = keyof typeof BadgeColourToClass;\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/fonts.variables' as fonts;\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/font-weights.variables' as fontWeights;\n@use '@ongov/ontario-design-system-global-styles/dist/styles/scss/1-variables/font-sizes.variables' as fontSizes;\n@use '@ongov/ontario-design-system-global-styles/dist/styles/scss/2-tools/functions/global.functions' as globalFunctions;\n\n.ontario-badge__container {\n\tdisplay: flex;\n\tflex-direction: column;\n\tgap: spacing.$spacing-7;\n\talign-items: flex-start;\n\tpadding: spacing.$spacing-5 spacing.$spacing-4;\n}\n\n.ontario-badge__label {\n\tdisplay: block;\n\ttext-align: left;\n\tfont-weight: fontWeights.$ontario-font-weights-semi-bold;\n\tmargin-bottom: spacing.$spacing-3;\n\tfont-size: fontSizes.$ontario-font-size-small;\n\tcolor: colours.$ontario-greyscale-70;\n}\n\n.ontario-badge {\n\tdisplay: inline-block;\n\tbackground-color: colours.$ontario-colour-information-light;\n\tcolor: colours.$ontario-greyscale-70;\n\tpadding: spacing.$spacing-1 spacing.$spacing-2;\n\tfont-family: fonts.$ontario-font-raleway;\n\tfont-size: fontSizes.$ontario-font-size-standard-body-text;\n\tfont-weight: fontWeights.$ontario-font-weights-bold;\n\tline-height: globalFunctions.px-to-rem(25);\n\tletter-spacing: 0.03rem;\n\ttext-transform: uppercase;\n}\n\n.ontario-badge--default-light {\n\tbackground-color: colours.$ontario-colour-information-light;\n\tcolor: colours.$ontario-greyscale-70;\n}\n\n.ontario-badge--default-heavy {\n\tbackground-color: colours.$ontario-colour-information;\n\tcolor: colours.$ontario-colour-white;\n}\n\n.ontario-badge--neutral-light {\n\tbackground-color: colours.$ontario-greyscale-5;\n\tcolor: colours.$ontario-greyscale-70;\n}\n\n.ontario-badge--neutral-heavy {\n\tbackground-color: colours.$ontario-colour-black;\n\tcolor: colours.$ontario-colour-white;\n}\n\n.ontario-badge--alert-heavy {\n\tbackground-color: colours.$ontario-colour-alert;\n\tcolor: colours.$ontario-colour-white;\n}\n\n.ontario-badge--warning-heavy {\n\tbackground-color: colours.$ontario-colour-warning;\n\tcolor: colours.$ontario-colour-black;\n}\n\n.ontario-badge--success-heavy {\n\tbackground-color: colours.$ontario-colour-success;\n\tcolor: colours.$ontario-colour-white;\n}\n\n.ontario-badge--white {\n\tbackground-color: colours.$ontario-colour-white;\n\tcolor: colours.$ontario-greyscale-70;\n\tborder: globalFunctions.px-to-rem(1) solid colours.$ontario-greyscale-70;\n}\n\n.ontario-badge--grey {\n\tbackground-color: colours.$ontario-greyscale-20;\n\tcolor: colours.$ontario-colour-black;\n}\n","import { Component, Prop, Element, h, Watch, AttachInternals } from '@stencil/core';\n\nimport { BadgeColour, BadgeColours, BadgeColourToClass } from './ontario-badge.types';\nimport { ConsoleMessageClass } from '../../utils/console-message/console-message';\nimport { validateValueAgainstArray } from '../../utils/validation/validation-functions';\n\n@Component({\n\ttag: 'ontario-badge',\n\tstyleUrl: 'ontario-badge.scss',\n\tshadow: true,\n})\nexport class OntarioBadge {\n\t@Element() host: HTMLElement;\n\t@AttachInternals() internals: ElementInternals;\n\n\t/**\n\t * The colour of the badge.\n\t */\n\t@Prop({ mutable: true }) colour: BadgeColour = 'teal';\n\n\t/**\n\t * The label for the badge.\n\t *\n\t * Offical guidance is to keep the label length within 15 characters.\n\t */\n\t@Prop() label: string;\n\n\t/**\n\t * An aria label for screen readers.\n\t *\n\t * Used to provide more context to screen readers if necessary.\n\t *\n\t * This property is optional.\n\t *\n\t * @example\n\t * <ontario-badge aria-label-text=\"This training is currently in progress.\">In progress</ontario-badge>\n\t */\n\t@Prop({ mutable: true }) ariaLabelText?: string;\n\n\t/**\n\t * Watch for changes in the `label` prop for validation purposes.\n\t *\n\t * If no `label` value or host.textContent is provided, a warning message will be printed.\n\t */\n\t@Watch('label')\n\tvalidateLabel() {\n\t\tif (!this.getBadgeLabel()) {\n\t\t\tconst message = new ConsoleMessageClass();\n\t\t\tmessage\n\t\t\t\t.addDesignSystemTag()\n\t\t\t\t.addMonospaceText(' a label ')\n\t\t\t\t.addRegularText('for')\n\t\t\t\t.addMonospaceText(' <ontario-badge> ')\n\t\t\t\t.addRegularText('was not provided.')\n\t\t\t\t.printMessage();\n\t\t}\n\t}\n\n\t/**\n\t * Watch for changes to the `colour` prop.\n\t *\n\t * If no `colour` is passed, or if the `colour` does not match the `colour` options, a default value of 'teal' will be applied.\n\t *\n\t * @returns {BadgeColour}\n\t */\n\t@Watch('colour')\n\tvalidateColour(): BadgeColour {\n\t\tif (this.colour) {\n\t\t\tif (validateValueAgainstArray(this.colour, BadgeColours)) {\n\t\t\t\treturn this.colour;\n\t\t\t} else {\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(` colour ${this.colour} `)\n\t\t\t\t\t.addRegularText('for')\n\t\t\t\t\t.addMonospaceText(' <ontario-badge> ')\n\t\t\t\t\t.addRegularText('does not match one of the valid colour types. A default colour of `teal` will be applied.')\n\t\t\t\t\t.printMessage();\n\t\t\t}\n\t\t}\n\n\t\treturn this.setBadgeColour('teal');\n\t}\n\n\t/**\n\t * Programatically set and return the colour prop.\n\t *\n\t * @prop {BadgeColour} colour\n\t *\n\t * @returns {BadgeColour}\n\t */\n\tsetBadgeColour(colour: BadgeColour): BadgeColour {\n\t\tthis.colour = colour;\n\t\treturn this.colour;\n\t}\n\n\t/**\n\t * Returns badge label depending on if the label prop was set or\n\t * if the host.textContent (text in-between the opening and closing tag) was set.\n\t *\n\t * The label prop takes priority.\n\t *\n\t * @returns {string | null}\n\t */\n\tgetBadgeLabel(): string | null {\n\t\tconst badgeLabel = this.label ? this.label : this.host.textContent;\n\t\treturn badgeLabel;\n\t}\n\n\tcomponentWillLoad() {\n\t\tthis.validateColour();\n\t\tthis.validateLabel();\n\t}\n\n\trender() {\n\t\treturn (\n\t\t\t<span class={`ontario-badge ${BadgeColourToClass[this.colour]}`} aria-label={this.ariaLabelText}>\n\t\t\t\t{this.getBadgeLabel()}\n\t\t\t</span>\n\t\t);\n\t}\n}\n"],"version":3}

package/dist/components/p-DMH_JI3w.js

@@ -0,0 +1,6 @@
+const CaptionTypes = ['default', 'large', 'heading'];
+
+export { CaptionTypes as C };
+//# sourceMappingURL=p-DMH_JI3w.js.map
+
+//# sourceMappingURL=p-DMH_JI3w.js.map

package/dist/components/p-DMH_JI3w.js.map

@@ -0,0 +1 @@
+{"file":"p-DMH_JI3w.js","mappings":"AAAa,MAAA,YAAY,GAAG,CAAC,SAAS,EAAE,OAAO,EAAE,SAAS;;;;","names":[],"sources":["src/utils/common/input-caption/input-caption.types.ts"],"sourcesContent":["export const CaptionTypes = ['default', 'large', 'heading'] as const;\nexport type CaptionType = (typeof CaptionTypes)[number];\n"],"version":3}

package/dist/components/p-DQi-JVyL.js

@@ -0,0 +1,113 @@
+function hasMultipleTrueValues(arr, key) {
+	let count = 0;
+	for (const obj of arr) {
+		if (obj[key] === true || obj[key] === 'true') {
+			count++;
+			if (count > 1) {
+				return true;
+			}
+		}
+	}
+	return false;
+}
+function extractValuesByKey(objects, key) {
+	return objects.map((obj) => obj[key]);
+}
+function organizeObjectKeys(data, columns) {
+	return data.map((item) => {
+		const newData = {};
+		const otherKeys = {};
+		// Iterate through each key in the item
+		Object.keys(item).forEach((key) => {
+			if (key === 'data') {
+				// Organize keys in the 'data' object
+				columns.forEach((column) => {
+					if (column in item.data) {
+						newData[column] = item.data[column];
+					}
+				});
+			} else {
+				// Preserve other keys
+				otherKeys[key] = item[key];
+			}
+		});
+		return { data: newData, ...otherKeys };
+	});
+}
+function removeObjectsBySpecificKey(objects, key, value) {
+	const removedObjects = [];
+	const filteredObjects = objects.filter((obj) => {
+		if (obj[key] === value) {
+			removedObjects.push(obj);
+			return false;
+		}
+		return true;
+	});
+	return [filteredObjects, removedObjects];
+}
+/**
+ * Takes an input value and determines whether or not it is a number.
+ *
+ * @param {string | number} value - The value you would like to test against.
+ *
+ * @returns {boolean}
+ */
+function isNumber(value) {
+	if (value === undefined || value === null) return false;
+	return isNaN(Number(value)) === false;
+}
+function isEmpty(str) {
+	return !str || str?.length <= 0;
+}
+/**
+ * Retrieves the keys from an enum and lists them in an array.
+ *
+ * @param {object} enumObject - The enum you wish to get the keys of.
+ *
+ * @returns {string[]}
+ */
+function retrieveEnumKeys(enumObject) {
+	if (enumObject === undefined || enumObject === null) return new Array(0);
+	return Object.keys(enumObject).filter((key) => !isNumber(key));
+}
+/**
+ * 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 {
+	removeObjectsBySpecificKey as a,
+	isNumber as b,
+	extractValuesByKey as e,
+	getRootHTMLElement as g,
+	hasMultipleTrueValues as h,
+	isEmpty as i,
+	organizeObjectKeys as o,
+	printArray as p,
+	retrieveEnumKeys as r,
+};
+//# sourceMappingURL=p-DQi-JVyL.js.map
+
+//# sourceMappingURL=p-DQi-JVyL.js.map