npm - @ongov/ontario-design-system-component-library - Versions diffs - 5.0.0-alpha.5 → 5.0.0-alpha.6 - Mend

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

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (2351) hide show

package/dist/collection/components/ontario-language-toggle/ontario-language-toggle.js CHANGED Viewed

@@ -5,24 +5,41 @@ import { validateValueAgainstArray } from '../../utils/validation/validation-fun
 import { ConsoleMessageClass } from '../../utils/console-message/console-message';
 import { printArray, getRootHTMLElement } from '../../utils/helper/utils';
 export class OntarioLanguageToggle {
-	constructor() {
-		/*
-		 * Updates the <html> lang attribute based on component languageState.
-		 */
-		this.updateHTMLLang = () => {
-			const htmlElement = getRootHTMLElement();
-			if (htmlElement) {
-				htmlElement.setAttribute('lang', this.languageState);
-			}
-		};
-		this.language = undefined;
-		this.size = 'default';
-		this.url = undefined;
-		this.customLanguageToggle = undefined;
-		this.translations = translations;
-		this.languageState = undefined;
-		this.oppositeLanguageLabel = undefined;
-	}
+	/**
+	 * 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.
 	 */
@@ -36,6 +53,18 @@ export class OntarioLanguageToggle {
 		}
 		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).
 	 *
@@ -46,9 +75,8 @@ export class OntarioLanguageToggle {
 	 * 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;
+		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) {
@@ -128,6 +156,15 @@ export class OntarioLanguageToggle {
 			? 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.
 	 *
@@ -173,43 +210,32 @@ export class OntarioLanguageToggle {
 		}
 	}
 	render() {
-		var _a, _b, _c, _d, _e, _f, _g;
 		return h(
 			'a',
 			{
-				'key': 'f43e42110b4272a268801c310a8d14e31342f426',
-				'aria-label':
-					this.translations.languageToggle.ariaLabel[
-						`${(_a = this.oppositeLanguageLabel) === null || _a === void 0 ? void 0 : _a.abbreviation}`
-					],
+				'key': '2c4187c7dae4d03af41e7967b568cf361b3b5c59',
+				'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': (_b = this.oppositeLanguageLabel) === null || _b === void 0 ? void 0 : _b.abbreviation,
-				'lang': (_c = this.oppositeLanguageLabel) === null || _c === void 0 ? void 0 : _c.abbreviation,
+				'hreflang': this.oppositeLanguageLabel?.abbreviation,
+				'lang': this.oppositeLanguageLabel?.abbreviation,
 				'onClick': (e) => this.handleHeaderLanguageToggled(this.languageState, e),
 			},
 			this.size === 'small'
-				? h('span', null, (_d = this.oppositeLanguageLabel) === null || _d === void 0 ? void 0 : _d.fullWord)
+				? h('span', null, this.oppositeLanguageLabel?.fullWord)
 				: h(
 						Fragment,
 						null,
 						h(
 							'abbr',
-							{
-								title: (_e = this.oppositeLanguageLabel) === null || _e === void 0 ? void 0 : _e.fullWord,
-								class: 'ontario-show-for-small-only',
-							},
-							(_f = this.oppositeLanguageLabel) === null || _f === void 0 ? void 0 : _f.abbreviation.toUpperCase(),
-						),
-						h(
-							'span',
-							{ class: 'ontario-show-for-medium' },
-							(_g = this.oppositeLanguageLabel) === null || _g === void 0 ? void 0 : _g.fullWord,
+							{ 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 is() {
@@ -250,6 +276,8 @@ export class OntarioLanguageToggle {
 					tags: [],
 					text: 'The language of the component.\n\nIn most cases, the language toggle should be the source of truth for determining the site language.\n\nOnly pass a language value here if necessary.',
 				},
+				getter: false,
+				setter: false,
 				attribute: 'language',
 				reflect: false,
 			},
@@ -267,6 +295,8 @@ export class OntarioLanguageToggle {
 					tags: [],
 					text: 'The size of the language toggle button.\n\nIf no prop is passed, it will be set to the `default` size.',
 				},
+				getter: false,
+				setter: false,
 				attribute: 'size',
 				reflect: false,
 				defaultValue: "'default'",
@@ -285,6 +315,8 @@ export class OntarioLanguageToggle {
 					tags: [],
 					text: 'The URL to change to when the language toggle button is clicked.\n\nThis is optional.',
 				},
+				getter: false,
+				setter: false,
 				attribute: 'url',
 				reflect: false,
 			},
@@ -307,6 +339,8 @@ export class OntarioLanguageToggle {
 					tags: [],
 					text: 'A custom function to pass to the language toggle button.\n\nThis is optional.',
 				},
+				getter: false,
+				setter: false,
 			},
 		};
 	}

package/dist/collection/components/ontario-language-toggle/ontario-language-toggle.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"ontario-language-toggle.js","sourceRoot":"","sources":["../../../src/components/ontario-language-toggle/ontario-language-toggle.tsx"],"names":[],"mappings":"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","sourcesContent":["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"]}
1	+ {"version":3,"file":"ontario-language-toggle.js","sourceRoot":"","sources":["../../../src/components/ontario-language-toggle/ontario-language-toggle.tsx"],"names":[],"mappings":"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","sourcesContent":["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"]}

package/dist/collection/components/ontario-loading-indicator/ontario-loading-indicator.css CHANGED Viewed

@@ -22,19 +22,16 @@
 /* icon colours */
 /* service ontario header colours */
 /* -------------------------------
-    Global font-weight variables
---------------------------------- */
-/*** 1 - Breakpoint sizes for media queries ***/ /* -------------------------------
-    Global letter-spacing variables
+    Global font variables
 --------------------------------- */
-/* Rem calc function */
-/* Pixel to REM Conversion */
 /* -------------------------------
-    Global line-height variables
+    Global font-weight variables
 --------------------------------- */
 /* -------------------------------
-    Global typography variables
+    Global line-height variables
 --------------------------------- */
+/* Rem calc function */
+/* Pixel to REM Conversion */
 .ontario-loading-indicator__overlay,
 .ontario-loading-indicator__overlay--within-container {
 	position: fixed;

package/dist/collection/components/ontario-loading-indicator/ontario-loading-indicator.js CHANGED Viewed

@@ -4,16 +4,38 @@ import { validateValueAgainstArray } from '../../utils/validation/validation-fun
 import { ConsoleMessageClass } from '../../utils/console-message/console-message';
 import translations from '../../translations/global.i18n.json';
 export class OntarioLoadingIndicator {
-	constructor() {
-		this.type = 'large';
-		this.isLoading = false;
-		this.message = undefined;
-		this.fullScreenOverlay = true;
-		this.language = undefined;
-		this.translations = translations;
-		this.isLoadingState = undefined;
-		this.typeState = undefined;
-	}
+	/**
+	 * The type of loading indicator to render.
+	 */
+	type = 'large';
+	/**
+	 * A boolean value to determine whether or not the loading indicator is loading (i.e: is visible) or not.
+	 */
+	isLoading = false;
+	/**
+	 * The message that tells the user what is happening or why the user is waiting.
+	 * If no message prop is passed, it will default to "Loading". Translations for this default message are included.
+	 *
+	 * This is optional.
+	 */
+	message;
+	/**
+	 * A boolean value to determine whether the loading indicator overlay covers the full page or not. By default, this is set to `true`.
+	 *
+	 * If set to `false`, the loading indicator overlay will be positioned absolutely relative to its container. Note that this will only work if the containing element has a style rule specifying it to be positioned relatively.
+	 */
+	fullScreenOverlay = true;
+	/**
+	 * The language of the component.
+	 * This is used for translations, and is by default set through event listeners checking for a language property from the header. If no language is passed, it will default to English.
+	 */
+	language;
+	translations = translations;
+	/**
+	 * Mutable variables, for internal use only.
+	 */
+	isLoadingState;
+	typeState;
 	/**
 	 * This listens for the `setAppLanguage` event sent from the test language toggler when it is is connected to the DOM. It is used for the initial language when the input component loads.
 	 */
@@ -70,7 +92,6 @@ export class OntarioLoadingIndicator {
 		this.isLoadingState = this.isLoading;
 	}
 	render() {
-		var _a;
 		return this.typeState === 'large'
 			? h(
 					'div',
@@ -94,13 +115,9 @@ export class OntarioLoadingIndicator {
 							},
 							h('circle', { 'cx': '50', 'cy': '50', 'r': '20', 'fill': 'none', 'stroke-width': '4' }),
 						),
-						h(
-							'p',
-							null,
-							(_a = this.message) !== null && _a !== void 0 ? _a : this.translations.loading[`${this.language}`],
-						),
+						h('p', null, this.message ?? this.translations.loading[`${this.language}`]),
 					),
-			  )
+				)
 			: h('p', null, 'The small loading indicator is still under development.');
 	}
 	static get is() {
@@ -135,6 +152,8 @@ export class OntarioLoadingIndicator {
 					tags: [],
 					text: 'The type of loading indicator to render.',
 				},
+				getter: false,
+				setter: false,
 				attribute: 'type',
 				reflect: false,
 				defaultValue: "'large'",
@@ -153,6 +172,8 @@ export class OntarioLoadingIndicator {
 					tags: [],
 					text: 'A boolean value to determine whether or not the loading indicator is loading (i.e: is visible) or not.',
 				},
+				getter: false,
+				setter: false,
 				attribute: 'is-loading',
 				reflect: false,
 				defaultValue: 'false',
@@ -171,6 +192,8 @@ export class OntarioLoadingIndicator {
 					tags: [],
 					text: 'The message that tells the user what is happening or why the user is waiting.\nIf no message prop is passed, it will default to "Loading". Translations for this default message are included.\n\nThis is optional.',
 				},
+				getter: false,
+				setter: false,
 				attribute: 'message',
 				reflect: false,
 			},
@@ -188,6 +211,8 @@ export class OntarioLoadingIndicator {
 					tags: [],
 					text: 'A boolean value to determine whether the loading indicator overlay covers the full page or not. By default, this is set to `true`.\n\nIf set to `false`, the loading indicator overlay will be positioned absolutely relative to its container. Note that this will only work if the containing element has a style rule specifying it to be positioned relatively.',
 				},
+				getter: false,
+				setter: false,
 				attribute: 'full-screen-overlay',
 				reflect: false,
 				defaultValue: 'true',
@@ -212,6 +237,8 @@ export class OntarioLoadingIndicator {
 					tags: [],
 					text: 'The language of the component.\nThis is used for translations, and is by default set through event listeners checking for a language property from the header. If no language is passed, it will default to English.',
 				},
+				getter: false,
+				setter: false,
 				attribute: 'language',
 				reflect: false,
 			},

package/dist/collection/components/ontario-loading-indicator/ontario-loading-indicator.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"ontario-loading-indicator.js","sourceRoot":"","sources":["../../../src/components/ontario-loading-indicator/ontario-loading-indicator.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,KAAK,EAAE,KAAK,EAAE,MAAM,eAAe,CAAC;AAEzE,OAAO,EAAE,gBAAgB,EAAE,MAAM,6CAA6C,CAAC;AAC/E,OAAO,EAAE,yBAAyB,EAAE,MAAM,6CAA6C,CAAC;AACxF,OAAO,EAAE,mBAAmB,EAAE,MAAM,6CAA6C,CAAC;AAElF,OAAO,YAAY,MAAM,qCAAqC,CAAC;AAO/D,MAAM,OAAO,uBAAuB;;~~oBAID~~,OAAO;~~yBAKZ~~,KAAK~~;;iCAeI~~,IAAI~~;;4BAQb~~,YAAY~~;;;;IAQzC~~;;OAEG;IAEH,oBAAoB,CAAC,KAA4B;QAChD,IAAI,CAAC,IAAI,CAAC,QAAQ,EAAE,CAAC;YACpB,IAAI,CAAC,QAAQ,GAAG,gBAAgB,CAAC,KAAK,CAAC,CAAC;QACzC,CAAC;IACF,CAAC;IAGD,2BAA2B,CAAC,KAA4B;QACvD,IAAI,CAAC,QAAQ,GAAG,gBAAgB,CAAC,KAAK,CAAC,CAAC;IACzC,CAAC;IAED;;OAEG;IAEH,gBAAgB,CAAC,YAAqB;QACrC,IAAI,CAAC,cAAc,GAAG,YAAY,CAAC;IACpC,CAAC;IAED;;;;;OAKG;IAEH,YAAY;QACX,MAAM,OAAO,GAAG,yBAAyB,CAAC,IAAI,CAAC,IAAI,EAAE,CAAC,OAAO,EAAE,OAAO,CAAC,CAAC,CAAC;QACzE,IAAI,OAAO,EAAE,CAAC;YACb,OAAO,CAAC,IAAI,CAAC,SAAS,GAAG,IAAI,CAAC,IAAI,CAAC,CAAC;QACrC,CAAC;aAAM,CAAC;YACP,IAAI,CAAC,eAAe,EAAE,CAAC;YACvB,OAAO,CAAC,IAAI,CAAC,SAAS,GAAG,OAAO,CAAC,CAAC;QACnC,CAAC;IACF,CAAC;IAED;;;OAGG;IACK,eAAe;QACtB,MAAM,OAAO,GAAG,IAAI,mBAAmB,EAAE,CAAC;QAC1C,OAAO;aACL,kBAAkB,EAAE;aACpB,gBAAgB,CAAC,QAAQ,CAAC;aAC1B,cAAc,CAAC,IAAI,CAAC;aACpB,gBAAgB,CAAC,+BAA+B,CAAC;aACjD,cAAc,CAAC,kCAAkC,CAAC;aAClD,gBAAgB,CAAC,kBAAkB,CAAC;aACpC,cAAc,CAAC,iCAAiC,CAAC;aACjD,gBAAgB,CAAC,SAAS,CAAC;aAC3B,cAAc,CAAC,aAAa,CAAC;aAC7B,YAAY,EAAE,CAAC;IAClB,CAAC;IAED,iBAAiB;QAChB,IAAI,CAAC,QAAQ,GAAG,gBAAgB,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC;QAChD,IAAI,CAAC,YAAY,EAAE,CAAC;QACpB,IAAI,CAAC,cAAc,GAAG,IAAI,CAAC,SAAS,CAAC;IACtC,CAAC;IAED,MAAM;;QACL,OAAO,IAAI,CAAC,SAAS,KAAK,OAAO,CAAC,CAAC,CAAC,CACnC,WACC,KAAK,EACJ,IAAI,CAAC,iBAAiB;gBACrB,CAAC,CAAC,oCAAoC;gBACtC,CAAC,CAAC,sDAAsD,iBAE7C,IAAI,CAAC,cAAc,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,MAAM,EACnD,IAAI,EAAC,OAAO,eACF,WAAW;YAErB,WAAK,KAAK,EAAC,2BAA2B;gBACrC,WAAK,KAAK,EAAC,oCAAoC,EAAC,OAAO,EAAC,aAAa,EAAC,KAAK,EAAC,4BAA4B;oBACvG,cAAQ,EAAE,EAAC,IAAI,EAAC,EAAE,EAAC,IAAI,EAAC,CAAC,EAAC,IAAI,EAAC,IAAI,EAAC,MAAM,kBAAc,GAAG,GAAG,CACzD;gBACN,aAAI,~~MAAA,~~IAAI,CAAC,OAAO,~~mCAAI~~,IAAI,CAAC,YAAY,CAAC,OAAO,CAAC,GAAG,IAAI,CAAC,QAAQ,EAAE,CAAC,CAAK,CACjE,CACD,CACN,CAAC,CAAC,CAAC,CACH,uEAA8D,CAC9D,CAAC;IACH,CAAC~~;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;~~CACD","sourcesContent":["import { Component, h, Prop, Listen, State, Watch } from '@stencil/core';\nimport { Language } from '../../utils/common/language-types';\nimport { validateLanguage } from '../../utils/validation/validation-functions';\nimport { validateValueAgainstArray } from '../../utils/validation/validation-functions';\nimport { ConsoleMessageClass } from '../../utils/console-message/console-message';\n\nimport translations from '../../translations/global.i18n.json';\n\n@Component({\n\ttag: 'ontario-loading-indicator',\n\tstyleUrl: 'ontario-loading-indicator.scss',\n\tshadow: true,\n})\nexport class OntarioLoadingIndicator {\n\t/*\n\t The type of loading indicator to render.\n\t /\n\t@Prop() type: 'small' \| 'large' = 'large';\n\n\t/\n\t A boolean value to determine whether or not the loading indicator is loading (i.e: is visible) or not.\n\t /\n\t@Prop() isLoading: boolean = false;\n\n\t/\n\t The message that tells the user what is happening or why the user is waiting.\n\t * If no message prop is passed, it will default to \"Loading\". Translations for this default message are included.\n\t \n\t This is optional.\n\t /\n\t@Prop() message?: string;\n\n\t/\n\t A boolean value to determine whether the loading indicator overlay covers the full page or not. By default, this is set to `true`.\n\t \n\t If set to `false`, the loading indicator overlay will be positioned absolutely relative to its container. Note that this will only work if the containing element has a style rule specifying it to be positioned relatively.\n\t /\n\t@Prop() fullScreenOverlay?: boolean = true;\n\n\t/\n\t The language of the component.\n\t * This is used for translations, and is by default set through event listeners checking for a language property from the header. If no language is passed, it will default to English.\n\t /\n\t@Prop({ mutable: true }) language?: Language;\n\n\t@State() translations: any = translations;\n\n\t/\n\t Mutable variables, for internal use only.\n\t /\n\t@State() private isLoadingState: boolean;\n\t@State() private typeState: 'small' \| 'large';\n\n\t/\n\t This listens for the `setAppLanguage` event sent from the test language toggler when it is is connected to the DOM. It is used for the initial language when the input component loads.\n\t /\n\t@Listen('setAppLanguage', { target: 'window' })\n\thandleSetAppLanguage(event: CustomEvent<Language>) {\n\t\tif (!this.language) {\n\t\t\tthis.language = validateLanguage(event);\n\t\t}\n\t}\n\n\t@Listen('headerLanguageToggled', { target: 'window' })\n\thandleHeaderLanguageToggled(event: CustomEvent<Language>) {\n\t\tthis.language = validateLanguage(event);\n\t}\n\n\t/\n\t Watch for changes in the `isLoading` prop.\n\t /\n\t@Watch('isLoading')\n\tisLoadingChanged(newIsLoading: boolean) {\n\t\tthis.isLoadingState = newIsLoading;\n\t}\n\n\t/\n\t Watch for changes in the `type` variable for validation purposes.\n\t \n\t If the user input doesn't match one of the array values then `type` will be set to its default (`large`).\n\t * If a match is found in one of the array values then `type` will be set to the matching array key value.\n\t /\n\t@Watch('type')\n\tvalidateType() {\n\t\tconst isValid = validateValueAgainstArray(this.type, ['large', 'small']);\n\t\tif (isValid) {\n\t\t\treturn (this.typeState = this.type);\n\t\t} else {\n\t\t\tthis.warnDefaultType();\n\t\t\treturn (this.typeState = 'large');\n\t\t}\n\t}\n\n\t/\n\t Print the invalid `type` warning message.\n\t * @returns default type ('large')\n\t */\n\tprivate warnDefaultType() {\n\t\tconst message = new ConsoleMessageClass();\n\t\tmessage\n\t\t\t.addDesignSystemTag()\n\t\t\t.addMonospaceText(' type ')\n\t\t\t.addRegularText('on')\n\t\t\t.addMonospaceText(' <ontario-loading-indicator> ')\n\t\t\t.addRegularText('was set to an invalid type; only')\n\t\t\t.addMonospaceText(' large or small ')\n\t\t\t.addRegularText('are supported. The default type')\n\t\t\t.addMonospaceText(' large ')\n\t\t\t.addRegularText('is assumed.')\n\t\t\t.printMessage();\n\t}\n\n\tcomponentWillLoad() {\n\t\tthis.language = validateLanguage(this.language);\n\t\tthis.validateType();\n\t\tthis.isLoadingState = this.isLoading;\n\t}\n\n\trender() {\n\t\treturn this.typeState === 'large' ? (\n\t\t\t<div\n\t\t\t\tclass={\n\t\t\t\t\tthis.fullScreenOverlay\n\t\t\t\t\t\t? `ontario-loading-indicator__overlay`\n\t\t\t\t\t\t: `ontario-loading-indicator__overlay--within-container`\n\t\t\t\t}\n\t\t\t\taria-hidden={this.isLoadingState ? 'false' : 'true'}\n\t\t\t\trole=\"alert\"\n\t\t\t\taria-live=\"assertive\"\n\t\t\t>\n\t\t\t\t<div class=\"ontario-loading-indicator\">\n\t\t\t\t\t<svg class=\"ontario-loading-indicator__spinner\" viewBox=\"25 25 50 50\" xmlns=\"http://www.w3.org/2000/svg\">\n\t\t\t\t\t\t<circle cx=\"50\" cy=\"50\" r=\"20\" fill=\"none\" stroke-width=\"4\" />\n\t\t\t\t\t</svg>\n\t\t\t\t\t<p>{this.message ?? this.translations.loading[`${this.language}`]}</p>\n\t\t\t\t</div>\n\t\t\t</div>\n\t\t) : (\n\t\t\t<p>The small loading indicator is still under development.</p>\n\t\t);\n\t}\n}\n"]}
1	+ {"version":3,"file":"ontario-loading-indicator.js","sourceRoot":"","sources":["../../../src/components/ontario-loading-indicator/ontario-loading-indicator.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, h, Prop, Listen, State, Watch } from '@stencil/core';\nimport { Language } from '../../utils/common/language-types';\nimport { validateLanguage } from '../../utils/validation/validation-functions';\nimport { validateValueAgainstArray } from '../../utils/validation/validation-functions';\nimport { ConsoleMessageClass } from '../../utils/console-message/console-message';\n\nimport translations from '../../translations/global.i18n.json';\n\n@Component({\n\ttag: 'ontario-loading-indicator',\n\tstyleUrl: 'ontario-loading-indicator.scss',\n\tshadow: true,\n})\nexport class OntarioLoadingIndicator {\n\t/*\n\t The type of loading indicator to render.\n\t /\n\t@Prop() type: 'small' \| 'large' = 'large';\n\n\t/\n\t A boolean value to determine whether or not the loading indicator is loading (i.e: is visible) or not.\n\t /\n\t@Prop() isLoading: boolean = false;\n\n\t/\n\t The message that tells the user what is happening or why the user is waiting.\n\t * If no message prop is passed, it will default to \"Loading\". Translations for this default message are included.\n\t \n\t This is optional.\n\t /\n\t@Prop() message?: string;\n\n\t/\n\t A boolean value to determine whether the loading indicator overlay covers the full page or not. By default, this is set to `true`.\n\t \n\t If set to `false`, the loading indicator overlay will be positioned absolutely relative to its container. Note that this will only work if the containing element has a style rule specifying it to be positioned relatively.\n\t /\n\t@Prop() fullScreenOverlay?: boolean = true;\n\n\t/\n\t The language of the component.\n\t * This is used for translations, and is by default set through event listeners checking for a language property from the header. If no language is passed, it will default to English.\n\t /\n\t@Prop({ mutable: true }) language?: Language;\n\n\t@State() translations: any = translations;\n\n\t/\n\t Mutable variables, for internal use only.\n\t /\n\t@State() private isLoadingState: boolean;\n\t@State() private typeState: 'small' \| 'large';\n\n\t/\n\t This listens for the `setAppLanguage` event sent from the test language toggler when it is is connected to the DOM. It is used for the initial language when the input component loads.\n\t /\n\t@Listen('setAppLanguage', { target: 'window' })\n\thandleSetAppLanguage(event: CustomEvent<Language>) {\n\t\tif (!this.language) {\n\t\t\tthis.language = validateLanguage(event);\n\t\t}\n\t}\n\n\t@Listen('headerLanguageToggled', { target: 'window' })\n\thandleHeaderLanguageToggled(event: CustomEvent<Language>) {\n\t\tthis.language = validateLanguage(event);\n\t}\n\n\t/\n\t Watch for changes in the `isLoading` prop.\n\t /\n\t@Watch('isLoading')\n\tisLoadingChanged(newIsLoading: boolean) {\n\t\tthis.isLoadingState = newIsLoading;\n\t}\n\n\t/\n\t Watch for changes in the `type` variable for validation purposes.\n\t \n\t If the user input doesn't match one of the array values then `type` will be set to its default (`large`).\n\t * If a match is found in one of the array values then `type` will be set to the matching array key value.\n\t /\n\t@Watch('type')\n\tvalidateType() {\n\t\tconst isValid = validateValueAgainstArray(this.type, ['large', 'small']);\n\t\tif (isValid) {\n\t\t\treturn (this.typeState = this.type);\n\t\t} else {\n\t\t\tthis.warnDefaultType();\n\t\t\treturn (this.typeState = 'large');\n\t\t}\n\t}\n\n\t/\n\t Print the invalid `type` warning message.\n\t * @returns default type ('large')\n\t */\n\tprivate warnDefaultType() {\n\t\tconst message = new ConsoleMessageClass();\n\t\tmessage\n\t\t\t.addDesignSystemTag()\n\t\t\t.addMonospaceText(' type ')\n\t\t\t.addRegularText('on')\n\t\t\t.addMonospaceText(' <ontario-loading-indicator> ')\n\t\t\t.addRegularText('was set to an invalid type; only')\n\t\t\t.addMonospaceText(' large or small ')\n\t\t\t.addRegularText('are supported. The default type')\n\t\t\t.addMonospaceText(' large ')\n\t\t\t.addRegularText('is assumed.')\n\t\t\t.printMessage();\n\t}\n\n\tcomponentWillLoad() {\n\t\tthis.language = validateLanguage(this.language);\n\t\tthis.validateType();\n\t\tthis.isLoadingState = this.isLoading;\n\t}\n\n\trender() {\n\t\treturn this.typeState === 'large' ? (\n\t\t\t<div\n\t\t\t\tclass={\n\t\t\t\t\tthis.fullScreenOverlay\n\t\t\t\t\t\t? `ontario-loading-indicator__overlay`\n\t\t\t\t\t\t: `ontario-loading-indicator__overlay--within-container`\n\t\t\t\t}\n\t\t\t\taria-hidden={this.isLoadingState ? 'false' : 'true'}\n\t\t\t\trole=\"alert\"\n\t\t\t\taria-live=\"assertive\"\n\t\t\t>\n\t\t\t\t<div class=\"ontario-loading-indicator\">\n\t\t\t\t\t<svg class=\"ontario-loading-indicator__spinner\" viewBox=\"25 25 50 50\" xmlns=\"http://www.w3.org/2000/svg\">\n\t\t\t\t\t\t<circle cx=\"50\" cy=\"50\" r=\"20\" fill=\"none\" stroke-width=\"4\" />\n\t\t\t\t\t</svg>\n\t\t\t\t\t<p>{this.message ?? this.translations.loading[`${this.language}`]}</p>\n\t\t\t\t</div>\n\t\t\t</div>\n\t\t) : (\n\t\t\t<p>The small loading indicator is still under development.</p>\n\t\t);\n\t}\n}\n"]}

package/dist/collection/components/ontario-page-alert/ontario-page-alert.css CHANGED Viewed

@@ -35,6 +35,9 @@
 /* -------------------------------
     Global font-size variables
 --------------------------------- */
+/* -------------------------------
+    Global font variables
+--------------------------------- */
 /* -------------------------------
     Global letter-spacing variables
 --------------------------------- */

package/dist/collection/components/ontario-page-alert/ontario-page-alert.js CHANGED Viewed

@@ -1,10 +1,37 @@
 import { h } from '@stencil/core';
 export class OntarioPageAlert {
-	constructor() {
-		this.type = 'informational';
-		this.heading = undefined;
-		this.content = undefined;
-	}
+	/**
+	 * The type of page alert to render. If no value is provided, the `informational` type alert would be rendered.
+	 *
+	 * There are four possible values for page alert: `informational`, `warning`, `success` or `error`.
+	 *
+	 * @example
+	 * <ontario-page-alert type="error">
+	 * </ontario-page-alert>
+	 */
+	type = 'informational';
+	/**
+	 * The heading for the page alert.
+	 *
+	 * @example
+	 * <ontario-page-alert heading="Licence plates">
+	 * </ontario-page-alert>
+	 */
+	heading;
+	/**
+	 * The main content for the page alert. This can be rendered as either string or HTML content.
+	 *
+	 * @example
+	 * <ontario-page-alert content="Please look out for an email confirmation with your receipt and order number.">
+	 * </ontario-page-alert>
+	 *
+	 * or
+	 *
+	 * <ontario-page-alert>
+	 *  <p>This is a sample page alert component using slots. <a href="#">Learn more</a>.</p>
+	 * </ontario-page-alert>
+	 */
+	content;
 	/**
 	 * @returns the classes of the page alert container based on the alert `type`.
 	 */
@@ -15,13 +42,13 @@ export class OntarioPageAlert {
 		const iconProps = { 'icon-width': 36 };
 		switch (this.type) {
 			case 'informational':
-				return h('ontario-icon-alert-information', Object.assign({}, iconProps));
+				return h('ontario-icon-alert-information', { ...iconProps });
 			case 'success':
-				return h('ontario-icon-alert-success', Object.assign({}, iconProps));
+				return h('ontario-icon-alert-success', { ...iconProps });
 			case 'warning':
-				return h('ontario-icon-alert-warning', Object.assign({}, iconProps));
+				return h('ontario-icon-alert-warning', { ...iconProps });
 			case 'error':
-				return h('ontario-icon-alert-error', Object.assign({}, iconProps));
+				return h('ontario-icon-alert-error', { ...iconProps });
 		}
 	}
 	renderContent() {
@@ -34,22 +61,22 @@ export class OntarioPageAlert {
 	render() {
 		return h(
 			'div',
-			{ key: 'b7be1540605a28b6ec84a8ff7b4fed1b64419d60', class: this.getClass() },
+			{ key: '177966a73a196ca3424eecdf1bea139918e2207f', class: this.getClass() },
 			h(
 				'div',
-				{ key: 'b87f534be5886b7d1e4c26a9fb417967e20d0c33', class: 'ontario-alert__header' },
+				{ key: '52cf48c4fd84a7bd17233acbfaffefc2f3ceb2f2', class: 'ontario-alert__header' },
 				h(
 					'div',
-					{ key: 'a274877a27a1da493112910dad58473f37f2be92', class: 'ontario-alert__header-icon' },
+					{ key: 'e7d36d8f358c8dd362512377346bece42fcd688d', class: 'ontario-alert__header-icon' },
 					this.renderIcon(),
 				),
 				h(
 					'h2',
-					{ key: 'ce02cf4b32e61f1ef07adefe935a5bdd90ca74ce', class: 'ontario-alert__header-title ontario-h4' },
+					{ key: '32d9d21ad979b969f157f3d0bc9e15499c23a54c', class: 'ontario-alert__header-title ontario-h4' },
 					this.heading,
 				),
 			),
-			h('div', { key: 'c90e23ac314300fd2066cd2292088a8e8d954c21', class: 'ontario-alert__body' }, this.renderContent()),
+			h('div', { key: '6a4a21d2ed84fe9a2eae2b26c239871fb8514612', class: 'ontario-alert__body' }, this.renderContent()),
 		);
 	}
 	static get is() {
@@ -95,6 +122,8 @@ export class OntarioPageAlert {
 					],
 					text: 'The type of page alert to render. If no value is provided, the `informational` type alert would be rendered.\n\nThere are four possible values for page alert: `informational`, `warning`, `success` or `error`.',
 				},
+				getter: false,
+				setter: false,
 				attribute: 'type',
 				reflect: false,
 				defaultValue: "'informational'",
@@ -118,6 +147,8 @@ export class OntarioPageAlert {
 					],
 					text: 'The heading for the page alert.',
 				},
+				getter: false,
+				setter: false,
 				attribute: 'heading',
 				reflect: false,
 			},
@@ -140,6 +171,8 @@ export class OntarioPageAlert {
 					],
 					text: 'The main content for the page alert. This can be rendered as either string or HTML content.',
 				},
+				getter: false,
+				setter: false,
 				attribute: 'content',
 				reflect: false,
 			},

package/dist/collection/components/ontario-page-alert/ontario-page-alert.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"ontario-page-alert.js","sourceRoot":"","sources":["../../../src/components/ontario-page-alert/ontario-page-alert.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,CAAC,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AAQnD,MAAM,OAAO,gBAAgB~~;;oBAUE~~,eAAe~~;;;;IA0B7C~~;;OAEG;IACK,QAAQ;QACf,OAAO,gCAAgC,IAAI,CAAC,IAAI,EAAE,CAAC;IACpD,CAAC;IAED,UAAU;QACT,MAAM,SAAS,GAAG,EAAE,YAAY,EAAE,EAAE,EAAE,CAAC;QAEvC,QAAQ,IAAI,CAAC,IAAI,EAAE,CAAC;YACnB,KAAK,eAAe;gBACnB,OAAO,~~sDAAoC~~,SAAS,~~EAAI~~,CAAC;YAE1D,KAAK,SAAS;gBACb,OAAO,~~kDAAgC~~,SAAS,~~EAAI~~,CAAC;YAEtD,KAAK,SAAS;gBACb,OAAO,~~kDAAgC~~,SAAS,~~EAAI~~,CAAC;YAEtD,KAAK,OAAO;gBACX,OAAO,~~gDAA8B~~,SAAS,~~EAAI~~,CAAC;QACrD,CAAC;IACF,CAAC;IAED,aAAa;QACZ,MAAM,IAAI,GAAG,IAAI,CAAC,OAAO,CAAC;QAE1B,IAAI,OAAO,IAAI,KAAK,QAAQ,EAAE,CAAC;YAC9B,OAAO,aAAI,IAAI,CAAK,CAAC;QACtB,CAAC;QAED,OAAO,eAAQ,CAAC;IACjB,CAAC;IAED,MAAM;QACL,OAAO,CACN,4DAAK,KAAK,EAAE,IAAI,CAAC,QAAQ,EAAE;YAC1B,4DAAK,KAAK,EAAC,uBAAuB;gBACjC,4DAAK,KAAK,EAAC,4BAA4B,IAAE,IAAI,CAAC,UAAU,EAAE,CAAO;gBACjE,2DAAI,KAAK,EAAC,wCAAwC,IAAE,IAAI,CAAC,OAAO,CAAM,CACjE;YACN,4DAAK,KAAK,EAAC,qBAAqB,IAAE,IAAI,CAAC,aAAa,EAAE,CAAO,CACxD,CACN,CAAC;IACH,CAAC~~;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;~~CACD","sourcesContent":["import { Component, h, Prop } from '@stencil/core';\nimport { PageAlert, PageAlertType } from './ontario-page-alert.interface';\n\n@Component({\n\ttag: 'ontario-page-alert',\n\tstyleUrl: 'ontario-page-alert.scss',\n\tshadow: true,\n})\nexport class OntarioPageAlert implements PageAlert {\n\t/*\n\t The type of page alert to render. If no value is provided, the `informational` type alert would be rendered.\n\t \n\t There are four possible values for page alert: `informational`, `warning`, `success` or `error`.\n\t \n\t @example\n\t * <ontario-page-alert type=\"error\">\n\t * </ontario-page-alert>\n\t /\n\t@Prop() type: PageAlertType = 'informational';\n\n\t/\n\t The heading for the page alert.\n\t \n\t @example\n\t * <ontario-page-alert heading=\"Licence plates\">\n\t * </ontario-page-alert>\n\t /\n\t@Prop() heading: string;\n\n\t/\n\t The main content for the page alert. This can be rendered as either string or HTML content.\n\t \n\t @example\n\t * <ontario-page-alert content=\"Please look out for an email confirmation with your receipt and order number.\">\n\t * </ontario-page-alert>\n\t \n\t or\n\t \n\t <ontario-page-alert>\n\t * <p>This is a sample page alert component using slots. <a href=\"#\">Learn more</a>.</p>\n\t * </ontario-page-alert>\n\t /\n\t@Prop() content: string;\n\n\t/\n\t @returns the classes of the page alert container based on the alert `type`.\n\t */\n\tprivate getClass() {\n\t\treturn `ontario-alert ontario-alert--${this.type}`;\n\t}\n\n\trenderIcon() {\n\t\tconst iconProps = { 'icon-width': 36 };\n\n\t\tswitch (this.type) {\n\t\t\tcase 'informational':\n\t\t\t\treturn <ontario-icon-alert-information {...iconProps} />;\n\n\t\t\tcase 'success':\n\t\t\t\treturn <ontario-icon-alert-success {...iconProps} />;\n\n\t\t\tcase 'warning':\n\t\t\t\treturn <ontario-icon-alert-warning {...iconProps} />;\n\n\t\t\tcase 'error':\n\t\t\t\treturn <ontario-icon-alert-error {...iconProps} />;\n\t\t}\n\t}\n\n\trenderContent() {\n\t\tconst body = this.content;\n\n\t\tif (typeof body === 'string') {\n\t\t\treturn <p>{body}</p>;\n\t\t}\n\n\t\treturn <slot />;\n\t}\n\n\trender() {\n\t\treturn (\n\t\t\t<div class={this.getClass()}>\n\t\t\t\t<div class=\"ontario-alert__header\">\n\t\t\t\t\t<div class=\"ontario-alert__header-icon\">{this.renderIcon()}</div>\n\t\t\t\t\t<h2 class=\"ontario-alert__header-title ontario-h4\">{this.heading}</h2>\n\t\t\t\t</div>\n\t\t\t\t<div class=\"ontario-alert__body\">{this.renderContent()}</div>\n\t\t\t</div>\n\t\t);\n\t}\n}\n"]}
1	+ {"version":3,"file":"ontario-page-alert.js","sourceRoot":"","sources":["../../../src/components/ontario-page-alert/ontario-page-alert.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,CAAC,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AAQnD,MAAM,OAAO,gBAAgB;IAC5B;;;;;;;;OAQG;IACK,IAAI,GAAkB,eAAe,CAAC;IAE9C;;;;;;OAMG;IACK,OAAO,CAAS;IAExB;;;;;;;;;;;;OAYG;IACK,OAAO,CAAS;IAExB;;OAEG;IACK,QAAQ;QACf,OAAO,gCAAgC,IAAI,CAAC,IAAI,EAAE,CAAC;IACpD,CAAC;IAED,UAAU;QACT,MAAM,SAAS,GAAG,EAAE,YAAY,EAAE,EAAE,EAAE,CAAC;QAEvC,QAAQ,IAAI,CAAC,IAAI,EAAE,CAAC;YACnB,KAAK,eAAe;gBACnB,OAAO,yCAAoC,SAAS,GAAI,CAAC;YAE1D,KAAK,SAAS;gBACb,OAAO,qCAAgC,SAAS,GAAI,CAAC;YAEtD,KAAK,SAAS;gBACb,OAAO,qCAAgC,SAAS,GAAI,CAAC;YAEtD,KAAK,OAAO;gBACX,OAAO,mCAA8B,SAAS,GAAI,CAAC;QACrD,CAAC;IACF,CAAC;IAED,aAAa;QACZ,MAAM,IAAI,GAAG,IAAI,CAAC,OAAO,CAAC;QAE1B,IAAI,OAAO,IAAI,KAAK,QAAQ,EAAE,CAAC;YAC9B,OAAO,aAAI,IAAI,CAAK,CAAC;QACtB,CAAC;QAED,OAAO,eAAQ,CAAC;IACjB,CAAC;IAED,MAAM;QACL,OAAO,CACN,4DAAK,KAAK,EAAE,IAAI,CAAC,QAAQ,EAAE;YAC1B,4DAAK,KAAK,EAAC,uBAAuB;gBACjC,4DAAK,KAAK,EAAC,4BAA4B,IAAE,IAAI,CAAC,UAAU,EAAE,CAAO;gBACjE,2DAAI,KAAK,EAAC,wCAAwC,IAAE,IAAI,CAAC,OAAO,CAAM,CACjE;YACN,4DAAK,KAAK,EAAC,qBAAqB,IAAE,IAAI,CAAC,aAAa,EAAE,CAAO,CACxD,CACN,CAAC;IACH,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACD","sourcesContent":["import { Component, h, Prop } from '@stencil/core';\nimport { PageAlert, PageAlertType } from './ontario-page-alert.interface';\n\n@Component({\n\ttag: 'ontario-page-alert',\n\tstyleUrl: 'ontario-page-alert.scss',\n\tshadow: true,\n})\nexport class OntarioPageAlert implements PageAlert {\n\t/*\n\t The type of page alert to render. If no value is provided, the `informational` type alert would be rendered.\n\t \n\t There are four possible values for page alert: `informational`, `warning`, `success` or `error`.\n\t \n\t @example\n\t * <ontario-page-alert type=\"error\">\n\t * </ontario-page-alert>\n\t /\n\t@Prop() type: PageAlertType = 'informational';\n\n\t/\n\t The heading for the page alert.\n\t \n\t @example\n\t * <ontario-page-alert heading=\"Licence plates\">\n\t * </ontario-page-alert>\n\t /\n\t@Prop() heading: string;\n\n\t/\n\t The main content for the page alert. This can be rendered as either string or HTML content.\n\t \n\t @example\n\t * <ontario-page-alert content=\"Please look out for an email confirmation with your receipt and order number.\">\n\t * </ontario-page-alert>\n\t \n\t or\n\t \n\t <ontario-page-alert>\n\t * <p>This is a sample page alert component using slots. <a href=\"#\">Learn more</a>.</p>\n\t * </ontario-page-alert>\n\t /\n\t@Prop() content: string;\n\n\t/\n\t @returns the classes of the page alert container based on the alert `type`.\n\t */\n\tprivate getClass() {\n\t\treturn `ontario-alert ontario-alert--${this.type}`;\n\t}\n\n\trenderIcon() {\n\t\tconst iconProps = { 'icon-width': 36 };\n\n\t\tswitch (this.type) {\n\t\t\tcase 'informational':\n\t\t\t\treturn <ontario-icon-alert-information {...iconProps} />;\n\n\t\t\tcase 'success':\n\t\t\t\treturn <ontario-icon-alert-success {...iconProps} />;\n\n\t\t\tcase 'warning':\n\t\t\t\treturn <ontario-icon-alert-warning {...iconProps} />;\n\n\t\t\tcase 'error':\n\t\t\t\treturn <ontario-icon-alert-error {...iconProps} />;\n\t\t}\n\t}\n\n\trenderContent() {\n\t\tconst body = this.content;\n\n\t\tif (typeof body === 'string') {\n\t\t\treturn <p>{body}</p>;\n\t\t}\n\n\t\treturn <slot />;\n\t}\n\n\trender() {\n\t\treturn (\n\t\t\t<div class={this.getClass()}>\n\t\t\t\t<div class=\"ontario-alert__header\">\n\t\t\t\t\t<div class=\"ontario-alert__header-icon\">{this.renderIcon()}</div>\n\t\t\t\t\t<h2 class=\"ontario-alert__header-title ontario-h4\">{this.heading}</h2>\n\t\t\t\t</div>\n\t\t\t\t<div class=\"ontario-alert__body\">{this.renderContent()}</div>\n\t\t\t</div>\n\t\t);\n\t}\n}\n"]}