npm - @ongov/ontario-design-system-component-library - Versions diffs - 6.0.0-alpha.3 → 6.0.0-alpha.4 - Mend

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

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 (1873) hide show

package/dist/collection/components/ontario-accordion/ontario-accordion.js CHANGED Viewed

@@ -1,13 +1,11 @@
 import { h } from '@stencil/core';
+import { v4 as uuid } from 'uuid';
+import { AccordionChangeDetailReasons } from './accordion.interface';
 import { validateLanguage } from '../../utils/validation/validation-functions';
 import { ConsoleMessageClass } from '../../utils/console-message/console-message';
 import translations from '../../translations/global.i18n.json';
 export class OntarioAccordion {
 	constructor() {
-		/**
-		 * Used to show whether the accordion is opened or closed.
-		 */
-		this.isOpen = false;
 		/**
 		 * Store the translation dictionary for use within the component.
 		 */
@@ -20,6 +18,8 @@ export class OntarioAccordion {
 		 * This state tracks which accordions are open.
 		 */
 		this.openAccordionIndexes = [];
+		/** Unique prefix for a11y ids */
+		this.uidPrefix = `ontario-accordion-${uuid()}`;
 	}
 	/**
 	 * 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.
@@ -30,24 +30,43 @@ export class OntarioAccordion {
 		}
 	}
 	/**
-	 * Handle the language being toggled from the `<ontario-header>`.
-	 * @param event Event object passed when the event is fired.
+	 * Handles an update to the language should the user request a language update from the language toggle.
+	 * @param {CustomEvent} - The language that has been selected.
 	 */
 	handleHeaderLanguageToggled(event) {
-		this.language = validateLanguage(event);
+		this.language = validateLanguage(event.detail.newLanguage);
 	}
 	/**
 	 * Parse Accordion data, this is used to handle JSON strings from HTML.
 	 */
 	parseAccordionData() {
 		try {
-			if (typeof this.accordionData !== 'undefined') {
-				this.internalAccordionData = Array.isArray(this.accordionData)
-					? this.accordionData
-					: JSON.parse(this.accordionData);
-			}
+			const parsed = Array.isArray(this.accordionData) ? this.accordionData : JSON.parse(this.accordionData || '[]');
+			// Normalize and type-guard
+			this.internalAccordionData = parsed.length
+				? parsed.map((prop) => {
+						var _a, _b, _c;
+						return {
+							label: (_a = prop === null || prop === void 0 ? void 0 : prop.label) !== null && _a !== void 0 ? _a : '',
+							content:
+								(_b = prop === null || prop === void 0 ? void 0 : prop.content) !== null && _b !== void 0 ? _b : '',
+							accordionContentType:
+								(_c = prop === null || prop === void 0 ? void 0 : prop.accordionContentType) !== null && _c !== void 0
+									? _c
+									: 'string',
+							isOpen: Boolean(prop === null || prop === void 0 ? void 0 : prop.isOpen),
+							ariaLabelText: prop === null || prop === void 0 ? void 0 : prop.ariaLabelText,
+						};
+					})
+				: [];
+			// Seed the openAccordionIndexes based on the isOpen properties
+			this.seedOpenIndexesFromItems();
 			// Initialize the label based on the initial accordion state
 			this.updateLabel();
+			this.emitAccordionChange({
+				openIndexes: this.openAccordionIndexes,
+				reason: AccordionChangeDetailReasons.Init,
+			});
 		} catch (_a) {
 			const message = new ConsoleMessageClass();
 			message
@@ -58,6 +77,12 @@ export class OntarioAccordion {
 				.addRegularText('could not be parsed. Please ensure it is valid JSON.')
 				.printMessage();
 			this.internalAccordionData = [];
+			this.openAccordionIndexes = [];
+			this.updateLabel();
+			this.emitAccordionChange({
+				openIndexes: this.openAccordionIndexes,
+				reason: AccordionChangeDetailReasons.Init,
+			});
 		}
 	}
 	/**
@@ -84,16 +109,41 @@ export class OntarioAccordion {
 			}
 		}
 	}
+	/**
+	 * Emits a typed change event whenever the open/closed state changes.
+	 *
+	 * Consumers can listen for `accordionChange` to:
+	 *  - Read the full set of `openIndexes`
+	 *  - Know which index changed on single-item toggles (`changedIndex`)
+	 *  - Detect bulk actions like expand/collapse all (`isBulk`)
+	 *  - Understand why the change happened (`reason`)
+	 *
+	 * Always call this AFTER updating `openAccordionIndexes` and `expandCollapseLabel`.
+	 */
+	emitAccordionChange(detail) {
+		this.accordionChange.emit(detail);
+	}
+	// Seed the openAccordionIndexes based on the isOpen properties of the accordion items
+	seedOpenIndexesFromItems() {
+		this.openAccordionIndexes = this.internalAccordionData
+			.map((accordionItem, index) =>
+				(accordionItem === null || accordionItem === void 0 ? void 0 : accordionItem.isOpen) ? index : -1,
+			)
+			.filter((accordionIndex) => accordionIndex !== -1);
+	}
 	// Toggle the accordion state when it's clicked
 	toggleAccordion(index) {
 		if (this.openAccordionIndexes.includes(index)) {
-			// If the accordion is already open, close it
 			this.openAccordionIndexes = this.openAccordionIndexes.filter((i) => i !== index);
 		} else {
-			// If the accordion is closed, open it
 			this.openAccordionIndexes = [...this.openAccordionIndexes, index];
 		}
 		this.updateLabel();
+		this.emitAccordionChange({
+			openIndexes: this.openAccordionIndexes,
+			changedIndex: index,
+			reason: AccordionChangeDetailReasons.ToggleOne,
+		});
 	}
 	/**
 	 * Toggle all accordions open/close
@@ -107,6 +157,11 @@ export class OntarioAccordion {
 			this.openAccordionIndexes = this.internalAccordionData.map((_, index) => index);
 		}
 		this.updateLabel();
+		this.emitAccordionChange({
+			openIndexes: this.openAccordionIndexes,
+			isBulk: true,
+			reason: AccordionChangeDetailReasons.ToggleAll,
+		});
 	}
 	/**
 	 * Update the label based on the current accordion state
@@ -130,18 +185,18 @@ export class OntarioAccordion {
 		var _a, _b, _c, _d, _e, _f;
 		return h(
 			'div',
-			{ key: 'd13c7fb5418aa5127ffa61e6773c1bd7a23b2342' },
-			h('h2', { key: '266fae60347cdf1d6f83d79e14edce073ccd4af3' }, this.name),
+			{ key: 'da27c5ce718dcbbd5e8a7bb66e03491d5da59db4' },
+			h('h2', { key: '3a1c6c4fc39f29b6f2e8756dc7835d71c393ca83' }, this.name),
 			h(
 				'div',
-				{ key: '2a0aa6004143440a144c62ee799c1a39af3bc506', class: 'ontario-accordions__container' },
+				{ key: 'fb589625eeb5e65ef78ea14dd7a07f10b26f1eb1', class: 'ontario-accordions__container' },
 				h(
 					'div',
-					{ key: 'df45f17c5612da550d8580b1a993fc4c1d4eccfb', class: 'ontario-accordion__controls' },
+					{ key: '154dd1f975d95b584eee10606246c1030096f8e6', class: 'ontario-accordion__controls' },
 					h(
 						'button',
 						{
-							'key': 'df41e45756aa88f8a0539d8e28a1a409cc20c6e6',
+							'key': '630718017aec87c8ecf14a17dfe603b54c562c13',
 							'class': 'ontario-accordion__button--expand-all',
 							'onClick': () => this.toggleAll(),
 							'aria-expanded':
@@ -151,7 +206,7 @@ export class OntarioAccordion {
 						},
 						h(
 							'span',
-							{ key: '6af2b3a31343eecf539ce6b65882182c1ab3e89d', class: 'ontario-accordion--expand-open-all' },
+							{ key: '81701e74455e661cb4db276d1d409805a6baaa9c', class: 'ontario-accordion--expand-open-all' },
 							this.expandCollapseLabel === 'expand'
 								? h(
 										'div',
@@ -178,36 +233,36 @@ export class OntarioAccordion {
 				),
 				(_f = this.internalAccordionData) === null || _f === void 0
 					? void 0
-					: _f.map((accordion, index) =>
-							h(
+					: _f.map((accordion, index) => {
+							const buttonId = `${this.uidPrefix}__button--${index}`;
+							const sectionId = `${this.uidPrefix}__section--${index}`;
+							const isOpen = this.openAccordionIndexes.includes(index);
+							return h(
 								'div',
-								{
-									class: `ontario-accordion ${this.openAccordionIndexes.includes(index) ? 'open' : ''}`,
-									key: `accordion-${index}`,
-								},
+								{ class: `ontario-accordion ${isOpen ? 'open' : ''}`, key: `accordion-${index}` },
 								h(
 									'h3',
-									{
-										class: `ontario-accordion__heading ${this.openAccordionIndexes.includes(index) ? 'ontario-expander--active' : ''}`,
-									},
+									{ class: `ontario-accordion__heading ${isOpen ? 'ontario-expander--active' : ''}` },
 									h(
 										'button',
 										{
+											'id': buttonId,
 											'class': 'ontario-accordion__button',
-											'aria-expanded': this.openAccordionIndexes.includes(index) ? 'true' : 'false',
+											'aria-expanded': isOpen ? 'true' : 'false',
 											'data-toggle': 'ontario-collapse',
+											'aria-controls': sectionId,
 											'onClick': () => this.toggleAccordion(index),
 											'aria-label': accordion.ariaLabelText,
 										},
 										h(
 											'span',
 											{ class: 'ontario-accordion__button-icon--close' },
-											h('ontario-icon-chevron-up', { colour: 'blue' }),
+											h('ontario-icon-chevron-up', { 'colour': 'blue', 'aria-hidden': 'true' }),
 										),
 										h(
 											'span',
 											{ class: 'ontario-accordion__button-icon--open' },
-											h('ontario-icon-chevron-down', { colour: 'blue' }),
+											h('ontario-icon-chevron-down', { 'colour': 'blue', 'aria-hidden': 'true' }),
 										),
 										accordion.label,
 									),
@@ -215,20 +270,19 @@ export class OntarioAccordion {
 								h(
 									'section',
 									{
-										'class': `ontario-accordion__content ${
-											this.openAccordionIndexes.includes(index)
-												? 'ontario-accordion__content--opened'
-												: 'ontario-accordion__content--closed'
-										}`,
-										'aria-hidden': !this.openAccordionIndexes.includes(index),
+										'id': sectionId,
+										'class': `ontario-accordion__content ${isOpen ? 'ontario-expander__content--opened' : 'ontario-accordion__content--closed'}`,
+										'aria-labelledby': buttonId,
+										'role': 'region',
+										'aria-hidden': isOpen ? 'false' : 'true',
 										'data-toggle': 'ontario-expander-content',
 									},
 									accordion.accordionContentType === 'html'
 										? h('div', { innerHTML: accordion.content }) // Render HTML content
 										: h('div', null, accordion.content),
 								),
-							),
-						),
+							);
+						}),
 			),
 		);
 	}
@@ -318,36 +372,20 @@ export class OntarioAccordion {
 				optional: false,
 				docs: {
 					tags: [
+						{
+							name: 'see',
+							text: 'Accordion *',
+						},
 						{
 							name: 'example',
-							text: '\t<ontario-accordion\n\tname="My Accordion"\n\taccordion-data=\'[\n\t\t{"label": "Accordion 1", "content": "This is a string"},\n\t\t{"label": "Accordion 2", "accordionContentType": "html", "content": "<ul><li>List A</li><li>List B</li><li>List C</li></ul>"}\n\t]\'\n></ontario-accordion>',
+							text: '\t<ontario-accordion\n\tname="My Accordion"\n\taccordion-data=\'[\n\t\t{"label": "Accordion 1", "content": "This is a string", "isOpen": true},\n\t\t{"label": "Accordion 2", "accordionContentType": "html", "content": "<ul><li>List A</li><li>List B</li><li>List C</li></ul>"}\n\t]\'\n></ontario-accordion>',
 						},
 					],
-					text: 'Used to include individual accordion data for the accordion component.\nThis is passed in as an array of objects with key-value pairs.\n\nThe `content` is expecting a string, that can either be written as HTML or a just a plain string, depending on the accordionContentType.',
-				},
-				getter: false,
-				setter: false,
-				reflect: false,
-			},
-			isOpen: {
-				type: 'boolean',
-				attribute: 'is-open',
-				mutable: false,
-				complexType: {
-					original: 'boolean',
-					resolved: 'boolean',
-					references: {},
-				},
-				required: false,
-				optional: false,
-				docs: {
-					tags: [],
-					text: 'Used to show whether the accordion is opened or closed.',
+					text: 'Used to include individual accordion data for the accordion component.\nAccepts an array of Accordion (@see Accordion) items or a JSON string of that array.\n\nThe `content` is rendered either as plain text or HTML depending on `accordionContentType`.',
 				},
 				getter: false,
 				setter: false,
 				reflect: false,
-				defaultValue: 'false',
 			},
 			language: {
 				type: 'string',
@@ -383,8 +421,35 @@ export class OntarioAccordion {
 			internalExpandCollapseLabelDetails: {},
 			internalAccordionData: {},
 			openAccordionIndexes: {},
+			uidPrefix: {},
 		};
 	}
+	static get events() {
+		return [
+			{
+				method: 'accordionChange',
+				name: 'accordionChange',
+				bubbles: true,
+				cancelable: true,
+				composed: true,
+				docs: {
+					tags: [],
+					text: 'Emits when open indexes change',
+				},
+				complexType: {
+					original: 'AccordionChangeDetail',
+					resolved: 'AccordionChangeDetail',
+					references: {
+						AccordionChangeDetail: {
+							location: 'import',
+							path: './accordion.interface',
+							id: 'src/components/ontario-accordion/accordion.interface.ts::AccordionChangeDetail',
+						},
+					},
+				},
+			},
+		];
+	}
 	static get elementRef() {
 		return 'host';
 	}

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

	@@ -1 +1 @@
1	- {"version":3,"file":"ontario-accordion.js","sourceRoot":"","sources":["../../../src/components/ontario-accordion/ontario-accordion.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Prop, Element, State, h, Listen, Watch } from '@stencil/core';\nimport { Accordion } from './accordion.interface';\nimport { ExpandCollapseButtonDetails } from './expandCollapseButtonDetails.interface';\nimport { Language } from '../../utils/common/language-types';\nimport { validateLanguage } from '../../utils/validation/validation-functions';\nimport { ConsoleMessageClass } from '../../utils/console-message/console-message';\nimport translations from '../../translations/global.i18n.json';\n\n@Component({\n\ttag: 'ontario-accordion',\n\tstyleUrl: 'ontario-accordion.scss',\n\tshadow: true,\n})\nexport class OntarioAccordion {\n\t@Element() host: HTMLElement;\n\n\t/*\n\t The name of the accordion component.\n\t \n\t This is not optional.\n\t /\n\t@Prop() name: string;\n\n\t/\n\t Custom Expand/Collapse button text.\n\t \n\t @example\n\t * <ontario-accordion\n\t \t\tname=\"My Accordion\"\n\t \t\texpand-collapse-button='{\n\t \t\t\t\"expandAllSectionsLabel\": \"Expand All\",\n\t \t\t\t\"collapseAllSectionsLabel\": \"Collapse All\"\n\t \t\t}'\n\t \t\taccordion-data='[\n\t \t\t\t{\"label\": \"Accordion 1\", \"content\": [\"Item 1\", \"Item 2\", \"Item 3\"]},\n\t \t\t\t{\"label\": \"Accordion 2\", \"content\": [\"Item A\", \"Item B\", \"Item C\"]}\n\t \t\t]'\n\t \t></ontario-accordion>\n\t /\n\t@Prop() expandCollapseButton?: string \| ExpandCollapseButtonDetails;\n\n\t/\n\t Used to include individual accordion data for the accordion component.\n\t * This is passed in as an array of objects with key-value pairs.\n\t \n\t The `content` is expecting a string, that can either be written as HTML or a just a plain string, depending on the accordionContentType.\n\t \n\t @example\n\t * \t<ontario-accordion\n\t \t\tname=\"My Accordion\"\n\t \t\taccordion-data='[\n\t \t\t\t{\"label\": \"Accordion 1\", \"content\": \"This is a string\"},\n\t \t\t\t{\"label\": \"Accordion 2\", \"accordionContentType\": \"html\", \"content\": \"<ul><li>List A</li><li>List B</li><li>List C</li></ul>\"}\n\t \t\t]'\n\t \t></ontario-accordion>\n\t /\n\t@Prop() accordionData: string \| Accordion[];\n\n\t/\n\t Used to show whether the accordion is opened or closed.\n\t /\n\t@Prop() isOpen: boolean = false;\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 none are passed, it will default to English.\n\t /\n\t@Prop({ mutable: true }) language?: Language;\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/\n\t Handle the language being toggled from the `<ontario-header>`.\n\t * @param event Event object passed when the event is fired.\n\t /\n\t@Listen('headerLanguageToggled', { target: 'window' })\n\thandleHeaderLanguageToggled(event: CustomEvent<Language>) {\n\t\tthis.language = validateLanguage(event);\n\t}\n\n\t/\n\t Store the translation dictionary for use within the component.\n\t /\n\t@State() translations: any = translations;\n\n\t/\n\t The label for the expand/collapse button.\n\t * This is internal and udpdated dynamically.\n\t /\n\t@State() private expandCollapseLabel: 'expand' \| 'collapse';\n\n\t/\n\t Internal state of the expand/collapse label information.\n\t /\n\t@State() private internalExpandCollapseLabelDetails: ExpandCollapseButtonDetails;\n\n\t/\n\t Internal state containing the parsed Accordion Data\n\t /\n\t@State() private internalAccordionData: Accordion[] = [];\n\n\t/\n\t This state tracks which accordions are open.\n\t /\n\t@State() private openAccordionIndexes: number[] = [];\n\n\t/\n\t Parse Accordion data, this is used to handle JSON strings from HTML.\n\t /\n\t@Watch('accordionData')\n\tprivate parseAccordionData() {\n\t\ttry {\n\t\t\tif (typeof this.accordionData !== 'undefined') {\n\t\t\t\tthis.internalAccordionData = Array.isArray(this.accordionData)\n\t\t\t\t\t? this.accordionData\n\t\t\t\t\t: JSON.parse(this.accordionData);\n\t\t\t}\n\n\t\t\t// Initialize the label based on the initial accordion state\n\t\t\tthis.updateLabel();\n\t\t} catch {\n\t\t\tconst message = new ConsoleMessageClass();\n\t\t\tmessage\n\t\t\t\t.addDesignSystemTag()\n\t\t\t\t.addMonospaceText(' accordionData ')\n\t\t\t\t.addRegularText('for')\n\t\t\t\t.addMonospaceText(' <ontario-accordion> ')\n\t\t\t\t.addRegularText('could not be parsed. Please ensure it is valid JSON.')\n\t\t\t\t.printMessage();\n\n\t\t\tthis.internalAccordionData = [];\n\t\t}\n\t}\n\n\t/\n\t Parse Expand/Collapse Button Details. This handles both object and JSON string formats\n\t * passed from HTML, with safe error handling for invalid JSON.\n\t /\n\t@Watch('expandCollapseButton')\n\tprivate parseExpandCollapseButtonDetails() {\n\t\tif (typeof this.expandCollapseButton !== 'undefined') {\n\t\t\tif (typeof this.expandCollapseButton === 'string') {\n\t\t\t\ttry {\n\t\t\t\t\tthis.internalExpandCollapseLabelDetails = JSON.parse(this.expandCollapseButton);\n\t\t\t\t} catch {\n\t\t\t\t\tconst message = new ConsoleMessageClass();\n\t\t\t\t\tmessage\n\t\t\t\t\t\t.addDesignSystemTag()\n\t\t\t\t\t\t.addMonospaceText(' expandCollapseButton ')\n\t\t\t\t\t\t.addRegularText('for')\n\t\t\t\t\t\t.addMonospaceText(' <ontario-accordion> ')\n\t\t\t\t\t\t.addRegularText('could not be parsed from a string. Please ensure it is valid JSON.')\n\t\t\t\t\t\t.printMessage();\n\t\t\t\t}\n\t\t\t} else {\n\t\t\t\tthis.internalExpandCollapseLabelDetails = this.expandCollapseButton;\n\t\t\t}\n\t\t}\n\t}\n\n\t// Toggle the accordion state when it's clicked\n\tprivate toggleAccordion(index: number) {\n\t\tif (this.openAccordionIndexes.includes(index)) {\n\t\t\t// If the accordion is already open, close it\n\t\t\tthis.openAccordionIndexes = this.openAccordionIndexes.filter((i) => i !== index);\n\t\t} else {\n\t\t\t// If the accordion is closed, open it\n\t\t\tthis.openAccordionIndexes = [...this.openAccordionIndexes, index];\n\t\t}\n\t\tthis.updateLabel();\n\t}\n\n\t/\n\t Toggle all accordions open/close\n\t /\n\tprivate toggleAll() {\n\t\tif (this.openAccordionIndexes.length === this.internalAccordionData.length) {\n\t\t\t// All accordions are open, close all\n\t\t\tthis.openAccordionIndexes = [];\n\t\t} else {\n\t\t\t// At least one accordion is closed, open all\n\t\t\tthis.openAccordionIndexes = this.internalAccordionData.map((_, index) => index);\n\t\t}\n\t\tthis.updateLabel();\n\t}\n\n\t/\n\t Update the label based on the current accordion state\n\t */\n\tprivate updateLabel() {\n\t\tconst allOpen = this.internalAccordionData.every((_, index) => this.openAccordionIndexes.includes(index));\n\n\t\tif (allOpen) {\n\t\t\t// All accordions are open, set label to \"Collapse all\"\n\t\t\tthis.expandCollapseLabel = 'collapse';\n\t\t} else {\n\t\t\t// At least one accordion is closed, set label to \"Expand all\"\n\t\t\tthis.expandCollapseLabel = 'expand';\n\t\t}\n\t}\n\n\tcomponentWillLoad() {\n\t\tthis.parseAccordionData();\n\t\tthis.parseExpandCollapseButtonDetails();\n\t\tthis.language = validateLanguage(this.language);\n\t}\n\n\trender() {\n\t\treturn (\n\t\t\t<div>\n\t\t\t\t<h2>{this.name}</h2>\n\t\t\t\t<div class=\"ontario-accordions__container\">\n\t\t\t\t\t<div class=\"ontario-accordion__controls\">\n\t\t\t\t\t\t<button\n\t\t\t\t\t\t\tclass=\"ontario-accordion__button--expand-all\"\n\t\t\t\t\t\t\tonClick={() => this.toggleAll()}\n\t\t\t\t\t\t\taria-expanded={this.openAccordionIndexes.length === this.internalAccordionData.length ? 'true' : 'false'}\n\t\t\t\t\t\t\taria-label={this.internalExpandCollapseLabelDetails?.ariaLabelText}\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t<span class=\"ontario-accordion--expand-open-all\">\n\t\t\t\t\t\t\t\t{this.expandCollapseLabel === 'expand' ? (\n\t\t\t\t\t\t\t\t\t<div>\n\t\t\t\t\t\t\t\t\t\t{this.internalExpandCollapseLabelDetails?.expandAllSectionsLabel ??\n\t\t\t\t\t\t\t\t\t\t\tthis.translations.accordion.expand[`${this.language}`]}\n\t\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t\t) : (\n\t\t\t\t\t\t\t\t\t<div>\n\t\t\t\t\t\t\t\t\t\t{this.internalExpandCollapseLabelDetails?.collapseAllSectionsLabel ??\n\t\t\t\t\t\t\t\t\t\t\tthis.translations.accordion.collapse[`${this.language}`]}\n\t\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t\t</span>\n\t\t\t\t\t\t</button>\n\t\t\t\t\t</div>\n\t\t\t\t\t{this.internalAccordionData?.map((accordion, index) => (\n\t\t\t\t\t\t<div\n\t\t\t\t\t\t\tclass={`ontario-accordion ${this.openAccordionIndexes.includes(index) ? 'open' : ''}`}\n\t\t\t\t\t\t\tkey={`accordion-${index}`}\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t<h3\n\t\t\t\t\t\t\t\tclass={`ontario-accordion__heading ${\n\t\t\t\t\t\t\t\t\tthis.openAccordionIndexes.includes(index) ? 'ontario-expander--active' : ''\n\t\t\t\t\t\t\t\t}`}\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t<button\n\t\t\t\t\t\t\t\t\tclass=\"ontario-accordion__button\"\n\t\t\t\t\t\t\t\t\taria-expanded={this.openAccordionIndexes.includes(index) ? 'true' : 'false'}\n\t\t\t\t\t\t\t\t\tdata-toggle=\"ontario-collapse\"\n\t\t\t\t\t\t\t\t\tonClick={() => this.toggleAccordion(index)}\n\t\t\t\t\t\t\t\t\taria-label={accordion.ariaLabelText}\n\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t<span class=\"ontario-accordion__button-icon--close\">\n\t\t\t\t\t\t\t\t\t\t<ontario-icon-chevron-up colour=\"blue\"></ontario-icon-chevron-up>\n\t\t\t\t\t\t\t\t\t</span>\n\t\t\t\t\t\t\t\t\t<span class=\"ontario-accordion__button-icon--open\">\n\t\t\t\t\t\t\t\t\t\t<ontario-icon-chevron-down colour=\"blue\"></ontario-icon-chevron-down>\n\t\t\t\t\t\t\t\t\t</span>\n\t\t\t\t\t\t\t\t\t{accordion.label}\n\t\t\t\t\t\t\t\t</button>\n\t\t\t\t\t\t\t</h3>\n\t\t\t\t\t\t\t<section\n\t\t\t\t\t\t\t\tclass={`ontario-accordion__content ${\n\t\t\t\t\t\t\t\t\tthis.openAccordionIndexes.includes(index)\n\t\t\t\t\t\t\t\t\t\t? 'ontario-accordion__content--opened'\n\t\t\t\t\t\t\t\t\t\t: 'ontario-accordion__content--closed'\n\t\t\t\t\t\t\t\t}`}\n\t\t\t\t\t\t\t\taria-hidden={!this.openAccordionIndexes.includes(index)}\n\t\t\t\t\t\t\t\tdata-toggle=\"ontario-expander-content\"\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t{accordion.accordionContentType === 'html' ? (\n\t\t\t\t\t\t\t\t\t<div innerHTML={accordion.content}></div> // Render HTML content\n\t\t\t\t\t\t\t\t) : (\n\t\t\t\t\t\t\t\t\t<div>{accordion.content}</div>\n\t\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t\t</section>\n\t\t\t\t\t\t</div>\n\t\t\t\t\t))}\n\t\t\t\t</div>\n\t\t\t</div>\n\t\t);\n\t}\n}\n"]}
1	+ {"version":3,"file":"ontario-accordion.js","sourceRoot":"","sources":["../../../src/components/ontario-accordion/ontario-accordion.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,OAAO,EAAE,KAAK,EAAgB,KAAK,EAAE,CAAC,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,eAAe,CAAC;AACvG,OAAO,EAAE,EAAE,IAAI,IAAI,EAAE,MAAM,MAAM,CAAC;AAElC,OAAO,EAAoC,4BAA4B,EAAE,MAAM,uBAAuB,CAAC;AAIvG,OAAO,EAAE,gBAAgB,EAAE,MAAM,6CAA6C,CAAC;AAC/E,OAAO,EAAE,mBAAmB,EAAE,MAAM,6CAA6C,CAAC;AAGlF,OAAO,YAAY,MAAM,qCAAqC,CAAC;AAO/D,MAAM,OAAO,gBAAgB;IAL7B;QA8DC;;WAEG;QACM,iBAAY,GAAQ,YAAY,CAAC;QAa1C;;WAEG;QACc,0BAAqB,GAAgB,EAAE,CAAC;QAEzD;;WAEG;QACc,yBAAoB,GAAa,EAAE,CAAC;QAErD,iCAAiC;QAChB,cAAS,GAAW,qBAAqB,IAAI,EAAE,EAAE,CAAC;KA8PnE;IA5PA;;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;IAED;;;OAGG;IAEH,2BAA2B,CAAC,KAAoD;QAC/E,IAAI,CAAC,QAAQ,GAAG,gBAAgB,CAAC,KAAK,CAAC,MAAM,CAAC,WAAW,CAAC,CAAC;IAC5D,CAAC;IAED;;OAEG;IAEK,kBAAkB;QACzB,IAAI,CAAC;YACJ,MAAM,MAAM,GAAG,KAAK,CAAC,OAAO,CAAC,IAAI,CAAC,aAAa,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,aAAa,CAAC,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,aAAa,IAAI,IAAI,CAAC,CAAC;YAE/G,2BAA2B;YAC3B,IAAI,CAAC,qBAAqB,GAAG,MAAM,CAAC,MAAM;gBACzC,CAAC,CAAC,MAAM,CAAC,GAAG,CAAC,CAAC,IAAe,EAAE,EAAE;;oBAAC,OAAA,CAAC;wBACjC,KAAK,EAAE,MAAA,IAAI,aAAJ,IAAI,uBAAJ,IAAI,CAAE,KAAK,mCAAI,EAAE;wBACxB,OAAO,EAAE,MAAA,IAAI,aAAJ,IAAI,uBAAJ,IAAI,CAAE,OAAO,mCAAI,EAAE;wBAC5B,oBAAoB,EAAE,CAAC,MAAA,IAAI,aAAJ,IAAI,uBAAJ,IAAI,CAAE,oBAAoB,mCAAI,QAAQ,CAAsB;wBACnF,MAAM,EAAE,OAAO,CAAC,IAAI,aAAJ,IAAI,uBAAJ,IAAI,CAAE,MAAM,CAAC;wBAC7B,aAAa,EAAE,IAAI,aAAJ,IAAI,uBAAJ,IAAI,CAAE,aAAa;qBAClC,CAAC,CAAA;iBAAA,CAAC;gBACJ,CAAC,CAAC,EAAE,CAAC;YAEN,+DAA+D;YAC/D,IAAI,CAAC,wBAAwB,EAAE,CAAC;YAEhC,4DAA4D;YAC5D,IAAI,CAAC,WAAW,EAAE,CAAC;YAEnB,IAAI,CAAC,mBAAmB,CAAC;gBACxB,WAAW,EAAE,IAAI,CAAC,oBAAoB;gBACtC,MAAM,EAAE,4BAA4B,CAAC,IAAI;aACzC,CAAC,CAAC;QACJ,CAAC;QAAC,WAAM,CAAC;YACR,MAAM,OAAO,GAAG,IAAI,mBAAmB,EAAE,CAAC;YAC1C,OAAO;iBACL,kBAAkB,EAAE;iBACpB,gBAAgB,CAAC,iBAAiB,CAAC;iBACnC,cAAc,CAAC,KAAK,CAAC;iBACrB,gBAAgB,CAAC,uBAAuB,CAAC;iBACzC,cAAc,CAAC,sDAAsD,CAAC;iBACtE,YAAY,EAAE,CAAC;YAEjB,IAAI,CAAC,qBAAqB,GAAG,EAAE,CAAC;YAChC,IAAI,CAAC,oBAAoB,GAAG,EAAE,CAAC;YAC/B,IAAI,CAAC,WAAW,EAAE,CAAC;YAEnB,IAAI,CAAC,mBAAmB,CAAC;gBACxB,WAAW,EAAE,IAAI,CAAC,oBAAoB;gBACtC,MAAM,EAAE,4BAA4B,CAAC,IAAI;aACzC,CAAC,CAAC;QACJ,CAAC;IACF,CAAC;IAED;;;OAGG;IAEK,gCAAgC;QACvC,IAAI,OAAO,IAAI,CAAC,oBAAoB,KAAK,WAAW,EAAE,CAAC;YACtD,IAAI,OAAO,IAAI,CAAC,oBAAoB,KAAK,QAAQ,EAAE,CAAC;gBACnD,IAAI,CAAC;oBACJ,IAAI,CAAC,kCAAkC,GAAG,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,oBAAoB,CAAC,CAAC;gBACjF,CAAC;gBAAC,WAAM,CAAC;oBACR,MAAM,OAAO,GAAG,IAAI,mBAAmB,EAAE,CAAC;oBAC1C,OAAO;yBACL,kBAAkB,EAAE;yBACpB,gBAAgB,CAAC,wBAAwB,CAAC;yBAC1C,cAAc,CAAC,KAAK,CAAC;yBACrB,gBAAgB,CAAC,uBAAuB,CAAC;yBACzC,cAAc,CAAC,oEAAoE,CAAC;yBACpF,YAAY,EAAE,CAAC;gBAClB,CAAC;YACF,CAAC;iBAAM,CAAC;gBACP,IAAI,CAAC,kCAAkC,GAAG,IAAI,CAAC,oBAAoB,CAAC;YACrE,CAAC;QACF,CAAC;IACF,CAAC;IAED;;;;;;;;;;OAUG;IACK,mBAAmB,CAAC,MAA6B;QACxD,IAAI,CAAC,eAAe,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC;IACnC,CAAC;IAED,sFAAsF;IAC9E,wBAAwB;QAC/B,IAAI,CAAC,oBAAoB,GAAG,IAAI,CAAC,qBAAqB;aACpD,GAAG,CAAC,CAAC,aAAa,EAAE,KAAK,EAAE,EAAE,CAAC,CAAC,CAAA,aAAa,aAAb,aAAa,uBAAb,aAAa,CAAE,MAAM,EAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;aACnE,MAAM,CAAC,CAAC,cAAc,EAAE,EAAE,CAAC,cAAc,KAAK,CAAC,CAAC,CAAC,CAAC;IACrD,CAAC;IAED,+CAA+C;IACvC,eAAe,CAAC,KAAa;QACpC,IAAI,IAAI,CAAC,oBAAoB,CAAC,QAAQ,CAAC,KAAK,CAAC,EAAE,CAAC;YAC/C,IAAI,CAAC,oBAAoB,GAAG,IAAI,CAAC,oBAAoB,CAAC,MAAM,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,KAAK,KAAK,CAAC,CAAC;QAClF,CAAC;aAAM,CAAC;YACP,IAAI,CAAC,oBAAoB,GAAG,CAAC,GAAG,IAAI,CAAC,oBAAoB,EAAE,KAAK,CAAC,CAAC;QACnE,CAAC;QAED,IAAI,CAAC,WAAW,EAAE,CAAC;QAEnB,IAAI,CAAC,mBAAmB,CAAC;YACxB,WAAW,EAAE,IAAI,CAAC,oBAAoB;YACtC,YAAY,EAAE,KAAK;YACnB,MAAM,EAAE,4BAA4B,CAAC,SAAS;SAC9C,CAAC,CAAC;IACJ,CAAC;IAED;;OAEG;IACK,SAAS;QAChB,IAAI,IAAI,CAAC,oBAAoB,CAAC,MAAM,KAAK,IAAI,CAAC,qBAAqB,CAAC,MAAM,EAAE,CAAC;YAC5E,qCAAqC;YACrC,IAAI,CAAC,oBAAoB,GAAG,EAAE,CAAC;QAChC,CAAC;aAAM,CAAC;YACP,6CAA6C;YAC7C,IAAI,CAAC,oBAAoB,GAAG,IAAI,CAAC,qBAAqB,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,KAAK,EAAE,EAAE,CAAC,KAAK,CAAC,CAAC;QACjF,CAAC;QAED,IAAI,CAAC,WAAW,EAAE,CAAC;QAEnB,IAAI,CAAC,mBAAmB,CAAC;YACxB,WAAW,EAAE,IAAI,CAAC,oBAAoB;YACtC,MAAM,EAAE,IAAI;YACZ,MAAM,EAAE,4BAA4B,CAAC,SAAS;SAC9C,CAAC,CAAC;IACJ,CAAC;IAED;;OAEG;IACK,WAAW;QAClB,MAAM,OAAO,GAAG,IAAI,CAAC,qBAAqB,CAAC,KAAK,CAAC,CAAC,CAAC,EAAE,KAAK,EAAE,EAAE,CAAC,IAAI,CAAC,oBAAoB,CAAC,QAAQ,CAAC,KAAK,CAAC,CAAC,CAAC;QAE1G,IAAI,OAAO,EAAE,CAAC;YACb,uDAAuD;YACvD,IAAI,CAAC,mBAAmB,GAAG,UAAU,CAAC;QACvC,CAAC;aAAM,CAAC;YACP,8DAA8D;YAC9D,IAAI,CAAC,mBAAmB,GAAG,QAAQ,CAAC;QACrC,CAAC;IACF,CAAC;IAED,iBAAiB;QAChB,IAAI,CAAC,kBAAkB,EAAE,CAAC;QAC1B,IAAI,CAAC,gCAAgC,EAAE,CAAC;QACxC,IAAI,CAAC,QAAQ,GAAG,gBAAgB,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC;IACjD,CAAC;IAED,MAAM;;QACL,OAAO,CACN;YACC,6DAAK,IAAI,CAAC,IAAI,CAAM;YACpB,4DAAK,KAAK,EAAC,+BAA+B;gBACzC,4DAAK,KAAK,EAAC,6BAA6B;oBACvC,+DACC,KAAK,EAAC,uCAAuC,EAC7C,OAAO,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,SAAS,EAAE,mBAChB,IAAI,CAAC,oBAAoB,CAAC,MAAM,KAAK,IAAI,CAAC,qBAAqB,CAAC,MAAM,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,OAAO,gBAC5F,MAAA,IAAI,CAAC,kCAAkC,0CAAE,aAAa;wBAElE,6DAAM,KAAK,EAAC,oCAAoC,IAC9C,IAAI,CAAC,mBAAmB,KAAK,QAAQ,CAAC,CAAC,CAAC,CACxC,eACE,MAAA,MAAA,IAAI,CAAC,kCAAkC,0CAAE,sBAAsB,mCAC/D,IAAI,CAAC,YAAY,CAAC,SAAS,CAAC,MAAM,CAAC,GAAG,IAAI,CAAC,QAAQ,EAAE,CAAC,CAClD,CACN,CAAC,CAAC,CAAC,CACH,eACE,MAAA,MAAA,IAAI,CAAC,kCAAkC,0CAAE,wBAAwB,mCACjE,IAAI,CAAC,YAAY,CAAC,SAAS,CAAC,QAAQ,CAAC,GAAG,IAAI,CAAC,QAAQ,EAAE,CAAC,CACpD,CACN,CACK,CACC,CACJ,EACL,MAAA,IAAI,CAAC,qBAAqB;mBAAE,GAAG,CAAC,CAAC,SAAS,EAAE,KAAK,EAAE,EAAE;oBACrD,MAAM,QAAQ,GAAG,GAAG,IAAI,CAAC,SAAS,aAAa,KAAK,EAAE,CAAC;oBACvD,MAAM,SAAS,GAAG,GAAG,IAAI,CAAC,SAAS,cAAc,KAAK,EAAE,CAAC;oBACzD,MAAM,MAAM,GAAG,IAAI,CAAC,oBAAoB,CAAC,QAAQ,CAAC,KAAK,CAAC,CAAC;oBAEzD,OAAO,CACN,WAAK,KAAK,EAAE,qBAAqB,MAAM,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,EAAE,EAAE,EAAE,GAAG,EAAE,aAAa,KAAK,EAAE;wBACjF,UAAI,KAAK,EAAE,8BAA8B,MAAM,CAAC,CAAC,CAAC,0BAA0B,CAAC,CAAC,CAAC,EAAE,EAAE;4BAClF,cACC,EAAE,EAAE,QAAQ,EACZ,KAAK,EAAC,2BAA2B,mBAClB,MAAM,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,OAAO,iBAC5B,kBAAkB,mBACf,SAAS,EACxB,OAAO,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,eAAe,CAAC,KAAK,CAAC,gBAC9B,SAAS,CAAC,aAAa;gCAEnC,YAAM,KAAK,EAAC,uCAAuC;oCAClD,+BAAyB,MAAM,EAAC,MAAM,iBAAa,MAAM,GAA2B,CAC9E;gCACP,YAAM,KAAK,EAAC,sCAAsC;oCACjD,iCAA2B,MAAM,EAAC,MAAM,iBAAa,MAAM,GAA6B,CAClF;gCACN,SAAS,CAAC,KAAK,CACR,CACL;wBACL,eACC,EAAE,EAAE,SAAS,EACb,KAAK,EAAE,8BACN,MAAM,CAAC,CAAC,CAAC,mCAAmC,CAAC,CAAC,CAAC,oCAChD,EAAE,qBACe,QAAQ,EACzB,IAAI,EAAC,QAAQ,iBACA,MAAM,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,MAAM,iBAC1B,0BAA0B,IAErC,SAAS,CAAC,oBAAoB,KAAK,MAAM,CAAC,CAAC,CAAC,CAC5C,WAAK,SAAS,EAAE,SAAS,CAAC,OAAO,GAAQ,CAAC,sBAAsB;yBAChE,CAAC,CAAC,CAAC,CACH,eAAM,SAAS,CAAC,OAAO,CAAO,CAC9B,CACQ,CACL,CACN,CAAC;gBACH,CAAC,CAAC,CACG,CACD,CACN,CAAC;IACH,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACD","sourcesContent":["import { Component, Prop, Element, Event, EventEmitter, State, h, Listen, Watch } from '@stencil/core';\nimport { v4 as uuid } from 'uuid';\n\nimport { Accordion, AccordionChangeDetail, AccordionChangeDetailReasons } from './accordion.interface';\nimport { ExpandCollapseButtonDetails } from './expandCollapseButtonDetails.interface';\n\nimport { Language } from '../../utils/common/language-types';\nimport { validateLanguage } from '../../utils/validation/validation-functions';\nimport { ConsoleMessageClass } from '../../utils/console-message/console-message';\nimport { HeaderLanguageToggleEventDetails } from '../../utils/events/common-events.interface';\n\nimport translations from '../../translations/global.i18n.json';\n\n@Component({\n\ttag: 'ontario-accordion',\n\tstyleUrl: 'ontario-accordion.scss',\n\tshadow: true,\n})\nexport class OntarioAccordion {\n\t@Element() host: HTMLElement;\n\n\t/*\n\t The name of the accordion component.\n\t \n\t This is not optional.\n\t /\n\t@Prop() name: string;\n\n\t/\n\t Custom Expand/Collapse button text.\n\t \n\t @example\n\t * <ontario-accordion\n\t \t\tname=\"My Accordion\"\n\t \t\texpand-collapse-button='{\n\t \t\t\t\"expandAllSectionsLabel\": \"Expand All\",\n\t \t\t\t\"collapseAllSectionsLabel\": \"Collapse All\"\n\t \t\t}'\n\t \t\taccordion-data='[\n\t \t\t\t{\"label\": \"Accordion 1\", \"content\": [\"Item 1\", \"Item 2\", \"Item 3\"]},\n\t \t\t\t{\"label\": \"Accordion 2\", \"content\": [\"Item A\", \"Item B\", \"Item C\"]}\n\t \t\t]'\n\t \t></ontario-accordion>\n\t /\n\t@Prop() expandCollapseButton?: string \| ExpandCollapseButtonDetails;\n\n\t/\n\t Used to include individual accordion data for the accordion component.\n\t * Accepts an array of Accordion (@see Accordion) items or a JSON string of that array.\n\t \n\t The `content` is rendered either as plain text or HTML depending on `accordionContentType`.\n\t \n\t @see Accordion\n\t * @example\n\t * \t<ontario-accordion\n\t \t\tname=\"My Accordion\"\n\t \t\taccordion-data='[\n\t \t\t\t{\"label\": \"Accordion 1\", \"content\": \"This is a string\", \"isOpen\": true},\n\t \t\t\t{\"label\": \"Accordion 2\", \"accordionContentType\": \"html\", \"content\": \"<ul><li>List A</li><li>List B</li><li>List C</li></ul>\"}\n\t \t\t]'\n\t \t></ontario-accordion>\n\t /\n\t@Prop() accordionData: string \| Accordion[];\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 none are passed, it will default to English.\n\t /\n\t@Prop({ mutable: true }) language?: Language;\n\n\t/\n\t Emits when open indexes change\n\t /\n\t@Event() accordionChange: EventEmitter<AccordionChangeDetail>;\n\n\t/\n\t Store the translation dictionary for use within the component.\n\t /\n\t@State() translations: any = translations;\n\n\t/\n\t The label for the expand/collapse button.\n\t * This is internal and udpdated dynamically.\n\t /\n\t@State() private expandCollapseLabel: 'expand' \| 'collapse';\n\n\t/\n\t Internal state of the expand/collapse label information.\n\t /\n\t@State() private internalExpandCollapseLabelDetails: ExpandCollapseButtonDetails;\n\n\t/\n\t Internal state containing the parsed Accordion Data\n\t /\n\t@State() private internalAccordionData: Accordion[] = [];\n\n\t/\n\t This state tracks which accordions are open.\n\t /\n\t@State() private openAccordionIndexes: number[] = [];\n\n\t/* Unique prefix for a11y ids /\n\t@State() private uidPrefix: string = `ontario-accordion-${uuid()}`;\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/\n\t Handles an update to the language should the user request a language update from the language toggle.\n\t * @param {CustomEvent} - The language that has been selected.\n\t /\n\t@Listen('headerLanguageToggled', { target: 'window' })\n\thandleHeaderLanguageToggled(event: CustomEvent<HeaderLanguageToggleEventDetails>) {\n\t\tthis.language = validateLanguage(event.detail.newLanguage);\n\t}\n\n\t/\n\t Parse Accordion data, this is used to handle JSON strings from HTML.\n\t /\n\t@Watch('accordionData')\n\tprivate parseAccordionData() {\n\t\ttry {\n\t\t\tconst parsed = Array.isArray(this.accordionData) ? this.accordionData : JSON.parse(this.accordionData \|\| '[]');\n\n\t\t\t// Normalize and type-guard\n\t\t\tthis.internalAccordionData = parsed.length\n\t\t\t\t? parsed.map((prop: Accordion) => ({\n\t\t\t\t\t\tlabel: prop?.label ?? '',\n\t\t\t\t\t\tcontent: prop?.content ?? '',\n\t\t\t\t\t\taccordionContentType: (prop?.accordionContentType ?? 'string') as 'string' \| 'html',\n\t\t\t\t\t\tisOpen: Boolean(prop?.isOpen),\n\t\t\t\t\t\tariaLabelText: prop?.ariaLabelText,\n\t\t\t\t\t}))\n\t\t\t\t: [];\n\n\t\t\t// Seed the openAccordionIndexes based on the isOpen properties\n\t\t\tthis.seedOpenIndexesFromItems();\n\n\t\t\t// Initialize the label based on the initial accordion state\n\t\t\tthis.updateLabel();\n\n\t\t\tthis.emitAccordionChange({\n\t\t\t\topenIndexes: this.openAccordionIndexes,\n\t\t\t\treason: AccordionChangeDetailReasons.Init,\n\t\t\t});\n\t\t} catch {\n\t\t\tconst message = new ConsoleMessageClass();\n\t\t\tmessage\n\t\t\t\t.addDesignSystemTag()\n\t\t\t\t.addMonospaceText(' accordionData ')\n\t\t\t\t.addRegularText('for')\n\t\t\t\t.addMonospaceText(' <ontario-accordion> ')\n\t\t\t\t.addRegularText('could not be parsed. Please ensure it is valid JSON.')\n\t\t\t\t.printMessage();\n\n\t\t\tthis.internalAccordionData = [];\n\t\t\tthis.openAccordionIndexes = [];\n\t\t\tthis.updateLabel();\n\n\t\t\tthis.emitAccordionChange({\n\t\t\t\topenIndexes: this.openAccordionIndexes,\n\t\t\t\treason: AccordionChangeDetailReasons.Init,\n\t\t\t});\n\t\t}\n\t}\n\n\t/\n\t Parse Expand/Collapse Button Details. This handles both object and JSON string formats\n\t * passed from HTML, with safe error handling for invalid JSON.\n\t /\n\t@Watch('expandCollapseButton')\n\tprivate parseExpandCollapseButtonDetails() {\n\t\tif (typeof this.expandCollapseButton !== 'undefined') {\n\t\t\tif (typeof this.expandCollapseButton === 'string') {\n\t\t\t\ttry {\n\t\t\t\t\tthis.internalExpandCollapseLabelDetails = JSON.parse(this.expandCollapseButton);\n\t\t\t\t} catch {\n\t\t\t\t\tconst message = new ConsoleMessageClass();\n\t\t\t\t\tmessage\n\t\t\t\t\t\t.addDesignSystemTag()\n\t\t\t\t\t\t.addMonospaceText(' expandCollapseButton ')\n\t\t\t\t\t\t.addRegularText('for')\n\t\t\t\t\t\t.addMonospaceText(' <ontario-accordion> ')\n\t\t\t\t\t\t.addRegularText('could not be parsed from a string. Please ensure it is valid JSON.')\n\t\t\t\t\t\t.printMessage();\n\t\t\t\t}\n\t\t\t} else {\n\t\t\t\tthis.internalExpandCollapseLabelDetails = this.expandCollapseButton;\n\t\t\t}\n\t\t}\n\t}\n\n\t/\n\t Emits a typed change event whenever the open/closed state changes.\n\t \n\t Consumers can listen for `accordionChange` to:\n\t * - Read the full set of `openIndexes`\n\t * - Know which index changed on single-item toggles (`changedIndex`)\n\t * - Detect bulk actions like expand/collapse all (`isBulk`)\n\t * - Understand why the change happened (`reason`)\n\t \n\t Always call this AFTER updating `openAccordionIndexes` and `expandCollapseLabel`.\n\t /\n\tprivate emitAccordionChange(detail: AccordionChangeDetail) {\n\t\tthis.accordionChange.emit(detail);\n\t}\n\n\t// Seed the openAccordionIndexes based on the isOpen properties of the accordion items\n\tprivate seedOpenIndexesFromItems() {\n\t\tthis.openAccordionIndexes = this.internalAccordionData\n\t\t\t.map((accordionItem, index) => (accordionItem?.isOpen ? index : -1))\n\t\t\t.filter((accordionIndex) => accordionIndex !== -1);\n\t}\n\n\t// Toggle the accordion state when it's clicked\n\tprivate toggleAccordion(index: number) {\n\t\tif (this.openAccordionIndexes.includes(index)) {\n\t\t\tthis.openAccordionIndexes = this.openAccordionIndexes.filter((i) => i !== index);\n\t\t} else {\n\t\t\tthis.openAccordionIndexes = [...this.openAccordionIndexes, index];\n\t\t}\n\n\t\tthis.updateLabel();\n\n\t\tthis.emitAccordionChange({\n\t\t\topenIndexes: this.openAccordionIndexes,\n\t\t\tchangedIndex: index,\n\t\t\treason: AccordionChangeDetailReasons.ToggleOne,\n\t\t});\n\t}\n\n\t/\n\t Toggle all accordions open/close\n\t /\n\tprivate toggleAll() {\n\t\tif (this.openAccordionIndexes.length === this.internalAccordionData.length) {\n\t\t\t// All accordions are open, close all\n\t\t\tthis.openAccordionIndexes = [];\n\t\t} else {\n\t\t\t// At least one accordion is closed, open all\n\t\t\tthis.openAccordionIndexes = this.internalAccordionData.map((_, index) => index);\n\t\t}\n\n\t\tthis.updateLabel();\n\n\t\tthis.emitAccordionChange({\n\t\t\topenIndexes: this.openAccordionIndexes,\n\t\t\tisBulk: true,\n\t\t\treason: AccordionChangeDetailReasons.ToggleAll,\n\t\t});\n\t}\n\n\t/\n\t Update the label based on the current accordion state\n\t */\n\tprivate updateLabel() {\n\t\tconst allOpen = this.internalAccordionData.every((_, index) => this.openAccordionIndexes.includes(index));\n\n\t\tif (allOpen) {\n\t\t\t// All accordions are open, set label to \"Collapse all\"\n\t\t\tthis.expandCollapseLabel = 'collapse';\n\t\t} else {\n\t\t\t// At least one accordion is closed, set label to \"Expand all\"\n\t\t\tthis.expandCollapseLabel = 'expand';\n\t\t}\n\t}\n\n\tcomponentWillLoad() {\n\t\tthis.parseAccordionData();\n\t\tthis.parseExpandCollapseButtonDetails();\n\t\tthis.language = validateLanguage(this.language);\n\t}\n\n\trender() {\n\t\treturn (\n\t\t\t<div>\n\t\t\t\t<h2>{this.name}</h2>\n\t\t\t\t<div class=\"ontario-accordions__container\">\n\t\t\t\t\t<div class=\"ontario-accordion__controls\">\n\t\t\t\t\t\t<button\n\t\t\t\t\t\t\tclass=\"ontario-accordion__button--expand-all\"\n\t\t\t\t\t\t\tonClick={() => this.toggleAll()}\n\t\t\t\t\t\t\taria-expanded={this.openAccordionIndexes.length === this.internalAccordionData.length ? 'true' : 'false'}\n\t\t\t\t\t\t\taria-label={this.internalExpandCollapseLabelDetails?.ariaLabelText}\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t<span class=\"ontario-accordion--expand-open-all\">\n\t\t\t\t\t\t\t\t{this.expandCollapseLabel === 'expand' ? (\n\t\t\t\t\t\t\t\t\t<div>\n\t\t\t\t\t\t\t\t\t\t{this.internalExpandCollapseLabelDetails?.expandAllSectionsLabel ??\n\t\t\t\t\t\t\t\t\t\t\tthis.translations.accordion.expand[`${this.language}`]}\n\t\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t\t) : (\n\t\t\t\t\t\t\t\t\t<div>\n\t\t\t\t\t\t\t\t\t\t{this.internalExpandCollapseLabelDetails?.collapseAllSectionsLabel ??\n\t\t\t\t\t\t\t\t\t\t\tthis.translations.accordion.collapse[`${this.language}`]}\n\t\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t\t</span>\n\t\t\t\t\t\t</button>\n\t\t\t\t\t</div>\n\t\t\t\t\t{this.internalAccordionData?.map((accordion, index) => {\n\t\t\t\t\t\tconst buttonId = `${this.uidPrefix}__button--${index}`;\n\t\t\t\t\t\tconst sectionId = `${this.uidPrefix}__section--${index}`;\n\t\t\t\t\t\tconst isOpen = this.openAccordionIndexes.includes(index);\n\n\t\t\t\t\t\treturn (\n\t\t\t\t\t\t\t<div class={`ontario-accordion ${isOpen ? 'open' : ''}`} key={`accordion-${index}`}>\n\t\t\t\t\t\t\t\t<h3 class={`ontario-accordion__heading ${isOpen ? 'ontario-expander--active' : ''}`}>\n\t\t\t\t\t\t\t\t\t<button\n\t\t\t\t\t\t\t\t\t\tid={buttonId}\n\t\t\t\t\t\t\t\t\t\tclass=\"ontario-accordion__button\"\n\t\t\t\t\t\t\t\t\t\taria-expanded={isOpen ? 'true' : 'false'}\n\t\t\t\t\t\t\t\t\t\tdata-toggle=\"ontario-collapse\"\n\t\t\t\t\t\t\t\t\t\taria-controls={sectionId}\n\t\t\t\t\t\t\t\t\t\tonClick={() => this.toggleAccordion(index)}\n\t\t\t\t\t\t\t\t\t\taria-label={accordion.ariaLabelText}\n\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t<span class=\"ontario-accordion__button-icon--close\">\n\t\t\t\t\t\t\t\t\t\t\t<ontario-icon-chevron-up colour=\"blue\" aria-hidden=\"true\"></ontario-icon-chevron-up>\n\t\t\t\t\t\t\t\t\t\t</span>\n\t\t\t\t\t\t\t\t\t\t<span class=\"ontario-accordion__button-icon--open\">\n\t\t\t\t\t\t\t\t\t\t\t<ontario-icon-chevron-down colour=\"blue\" aria-hidden=\"true\"></ontario-icon-chevron-down>\n\t\t\t\t\t\t\t\t\t\t</span>\n\t\t\t\t\t\t\t\t\t\t{accordion.label}\n\t\t\t\t\t\t\t\t\t</button>\n\t\t\t\t\t\t\t\t</h3>\n\t\t\t\t\t\t\t\t<section\n\t\t\t\t\t\t\t\t\tid={sectionId}\n\t\t\t\t\t\t\t\t\tclass={`ontario-accordion__content ${\n\t\t\t\t\t\t\t\t\t\tisOpen ? 'ontario-expander__content--opened' : 'ontario-accordion__content--closed'\n\t\t\t\t\t\t\t\t\t}`}\n\t\t\t\t\t\t\t\t\taria-labelledby={buttonId}\n\t\t\t\t\t\t\t\t\trole=\"region\"\n\t\t\t\t\t\t\t\t\taria-hidden={isOpen ? 'false' : 'true'}\n\t\t\t\t\t\t\t\t\tdata-toggle=\"ontario-expander-content\"\n\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t{accordion.accordionContentType === 'html' ? (\n\t\t\t\t\t\t\t\t\t\t<div innerHTML={accordion.content}></div> // Render HTML content\n\t\t\t\t\t\t\t\t\t) : (\n\t\t\t\t\t\t\t\t\t\t<div>{accordion.content}</div>\n\t\t\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t\t\t</section>\n\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t);\n\t\t\t\t\t})}\n\t\t\t\t</div>\n\t\t\t</div>\n\t\t);\n\t}\n}\n"]}

package/dist/collection/components/ontario-aside/ontario-aside.css CHANGED Viewed

@@ -27,7 +27,8 @@
 *
 *  Used across multiple components
 */
-/*** 1 - Breakpoint sizes for media queries ***/ /* -------------------------------
+/*** 1 - Breakpoint sizes for media queries ***/
+/* -------------------------------
     Global font-weight variables
 --------------------------------- */
 /* -------------------------------
@@ -201,7 +202,7 @@ body {
 	font-size: 1rem;
 	line-height: 1.6;
 	background-color: #ffffff;
-	color: #1a1a1a;
+	color: rgb(25.5, 25.5, 25.5);
 	margin: 0;
 }
@@ -246,7 +247,7 @@ hr {
 /* Horizontal Rule */
 hr.ontario-hr--dark {
-	border-bottom: 4px solid #1a1a1a;
+	border-bottom: 4px solid rgb(25.5, 25.5, 25.5);
 }
 a {
@@ -421,7 +422,8 @@ p + ol {
 .ontario-aside * {
 	max-width: 48rem;
 }
-.ontario-aside *:last-child {
+.ontario-aside *:last-child,
+.ontario-aside *:last-of-type {
 	margin-bottom: 0.5rem;
 }
 @media screen and (max-width: 40em) {

package/dist/collection/components/ontario-back-to-top/ontario-back-to-top.css CHANGED Viewed

@@ -26,7 +26,8 @@
 /* callout backgrounds */
 /* icon colours */
 /* service ontario header colours */
-/*** 1 - Breakpoint sizes for media queries ***/ /* -------------------------------
+/*** 1 - Breakpoint sizes for media queries ***/
+/* -------------------------------
     Global font variables
 --------------------------------- */
 /* Rem calc function */
@@ -59,9 +60,9 @@
 	background: #e6e6e6;
 	border: 0.125rem solid #ffffff;
 	border-radius: 4px;
-	box-shadow: 0 0.125rem 0.25rem rgba(26, 26, 26, 0.6);
+	box-shadow: 0 0.125rem 0.25rem rgba(25.5, 25.5, 25.5, 0.6);
 	box-sizing: border-box;
-	color: #1a1a1a;
+	color: rgb(25.5, 25.5, 25.5);
 	line-height: 1.25rem;
 	font-size: 1rem;
 	font-family: 'Open Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
@@ -122,9 +123,13 @@
 		width: 3rem;
 		height: 3rem;
 	}
+	.ontario-back-to-top span,
+	.ontario-back-to-top--default span {
+		display: block;
+	}
 	.ontario-back-to-top .ontario-icon,
 	.ontario-back-to-top--default .ontario-icon {
-		margin: 0.5rem 0 0 0;
+		margin: 0.125rem 0 0 0;
 	}
 	@-moz-document url-prefix() {
 		.ontario-back-to-top .ontario-icon,

package/dist/collection/components/ontario-back-to-top/ontario-back-to-top.js CHANGED Viewed

@@ -25,8 +25,12 @@ export class OntarioBackToTop {
 			this.language = validateLanguage(event);
 		}
 	}
+	/**
+	 * Handles an update to the language should the user request a language update from the language toggle.
+	 * @param {CustomEvent} - The language that has been selected.
+	 */
 	handleHeaderLanguageToggled(event) {
-		this.language = validateLanguage(event);
+		this.language = validateLanguage(event.detail.newLanguage);
 	}
 	/**
 	 * Scroll to top functionality when the Back to Top button is clicked
@@ -43,13 +47,13 @@ export class OntarioBackToTop {
 		return h(
 			'button',
 			{
-				'key': '454fc6f2fd9028854de7cc8ed128247b29539611',
+				'key': '9f8cd23fef9cc1e4c241b7d56f977d7fecbbf515',
 				'class': this.displayBackToTop ? `ontario-back-to-top active` : `ontario-back-to-top`,
 				'onClick': this.scrollToTop,
 				'aria-label': this.translations.backToTop.ariaLabel[`${this.language}`],
 			},
 			h('span', {
-				'key': 'af915d7d130fdc36c8a06ed978571510766ea989',
+				'key': '98f7983d4c3e8581a2bb693f1331d766841e39aa',
 				'aria-hidden': 'true',
 				'innerHTML': OntarioIconArrowUp,
 			}),

package/dist/collection/components/ontario-back-to-top/ontario-back-to-top.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"ontario-back-to-top.js","sourceRoot":"","sources":["../../../src/components/ontario-back-to-top/ontario-back-to-top.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,eAAe,CAAC;AAE3E,OAAO,kBAAkB,MAAM,kDAAkD,CAAC;AAElF,OAAO,EAAE,gBAAgB,EAAE,MAAM,6CAA6C,CAAC;AAE/E,OAAO,YAAY,MAAM,qCAAqC,CAAC;AAC/D,OAAO,EAAE,qBAAqB,EAAE,MAAM,gCAAgC,CAAC;~~AAOvE~~,MAAM,OAAO,gBAAgB;IAL7B;QAcU,iBAAY,GAAQ,YAAY,CAAC;QAEzB,qBAAgB,GAAY,KAAK,CAAC;QAElC,iBAAY,GAAW,GAAG,CAAC;~~KAoD5C~~;~~IAlDA~~;;OAEG;IAEH,mBAAmB;QAClB,IAAI,qBAAqB,EAAE,EAAE,CAAC;YAC7B,IAAI,CAAC,gBAAgB,GAAG,MAAM,CAAC,OAAO,GAAG,IAAI,CAAC,YAAY,CAAC;QAC5D,CAAC;IACF,CAAC;IAED;;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;IACK,WAAW;QAClB,IAAI,qBAAqB,EAAE,EAAE,CAAC;YAC7B,MAAM,CAAC,QAAQ,CAAC,EAAE,GAAG,EAAE,CAAC,EAAE,IAAI,EAAE,CAAC,EAAE,QAAQ,EAAE,QAAQ,EAAE,CAAC,CAAC;QAC1D,CAAC;IACF,CAAC;IAED,iBAAiB;QAChB,IAAI,CAAC,QAAQ,GAAG,gBAAgB,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC;IACjD,CAAC;IAED,MAAM;QACL,OAAO,CACN,+DACC,KAAK,EAAE,IAAI,CAAC,gBAAgB,CAAC,CAAC,CAAC,4BAA4B,CAAC,CAAC,CAAC,qBAAqB,EACnF,OAAO,EAAE,IAAI,CAAC,WAAW,gBACb,IAAI,CAAC,YAAY,CAAC,SAAS,CAAC,SAAS,CAAC,GAAG,IAAI,CAAC,QAAQ,EAAE,CAAC;YAErE,4EAAkB,MAAM,EAAC,SAAS,EAAE,kBAAkB,GAAS;YAC9D,IAAI,CAAC,YAAY,CAAC,SAAS,CAAC,GAAG,CAAC,GAAG,IAAI,CAAC,QAAQ,EAAE,CAAC,CAC5C,CACT,CAAC;IACH,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACD","sourcesContent":["import { Component, h, Element, Prop, Listen, State } from '@stencil/core';\n\nimport OntarioIconArrowUp from '../ontario-icon/assets/ontario-icon-arrow-up.svg';\nimport { Language } from '../../utils/common/language-types';\nimport { validateLanguage } from '../../utils/validation/validation-functions';\n\nimport translations from '../../translations/global.i18n.json';\nimport { isClientSideRendering } from '../../utils/common/environment';\n\n@Component({\n\ttag: 'ontario-back-to-top',\n\tstyleUrl: 'ontario-back-to-top.scss',\n\tshadow: true,\n})\nexport class OntarioBackToTop {\n\t@Element() element: HTMLElement;\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 prop 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@State() private displayBackToTop: boolean = false;\n\n\t@State() private scrollYValue: number = 200;\n\n\t/\n\t This listens for the window Y scroll value to be above 200 pixels. Once it is, the Back to Top button will toggle the `displayBackToTop` state which will set an active class to control the components' visibility.\n\t /\n\t@Listen('scroll', { target: 'window' })\n\tshowBackToTopButton() {\n\t\tif (isClientSideRendering()) {\n\t\t\tthis.displayBackToTop = window.scrollY > this.scrollYValue;\n\t\t}\n\t}\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 Scroll to top functionality when the Back to Top button is clicked\n\t */\n\tprivate scrollToTop() {\n\t\tif (isClientSideRendering()) {\n\t\t\twindow.scrollTo({ top: 0, left: 0, behavior: 'smooth' });\n\t\t}\n\t}\n\n\tcomponentWillLoad() {\n\t\tthis.language = validateLanguage(this.language);\n\t}\n\n\trender() {\n\t\treturn (\n\t\t\t<button\n\t\t\t\tclass={this.displayBackToTop ? `ontario-back-to-top active` : `ontario-back-to-top`}\n\t\t\t\tonClick={this.scrollToTop}\n\t\t\t\taria-label={this.translations.backToTop.ariaLabel[`${this.language}`]}\n\t\t\t>\n\t\t\t\t<span aria-hidden=\"true\" innerHTML={OntarioIconArrowUp}></span>\n\t\t\t\t{this.translations.backToTop.top[`${this.language}`]}\n\t\t\t</button>\n\t\t);\n\t}\n}\n"]}
1	+ {"version":3,"file":"ontario-back-to-top.js","sourceRoot":"","sources":["../../../src/components/ontario-back-to-top/ontario-back-to-top.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,eAAe,CAAC;AAE3E,OAAO,kBAAkB,MAAM,kDAAkD,CAAC;AAElF,OAAO,EAAE,gBAAgB,EAAE,MAAM,6CAA6C,CAAC;AAE/E,OAAO,YAAY,MAAM,qCAAqC,CAAC;AAC/D,OAAO,EAAE,qBAAqB,EAAE,MAAM,gCAAgC,CAAC;AAQvE,MAAM,OAAO,gBAAgB;IAL7B;QAcU,iBAAY,GAAQ,YAAY,CAAC;QAEzB,qBAAgB,GAAY,KAAK,CAAC;QAElC,iBAAY,GAAW,GAAG,CAAC;KAuD5C;IArDA;;OAEG;IAEH,mBAAmB;QAClB,IAAI,qBAAqB,EAAE,EAAE,CAAC;YAC7B,IAAI,CAAC,gBAAgB,GAAG,MAAM,CAAC,OAAO,GAAG,IAAI,CAAC,YAAY,CAAC;QAC5D,CAAC;IACF,CAAC;IAED;;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;IAED;;;OAGG;IAEH,2BAA2B,CAAC,KAAoD;QAC/E,IAAI,CAAC,QAAQ,GAAG,gBAAgB,CAAC,KAAK,CAAC,MAAM,CAAC,WAAW,CAAC,CAAC;IAC5D,CAAC;IACD;;OAEG;IACK,WAAW;QAClB,IAAI,qBAAqB,EAAE,EAAE,CAAC;YAC7B,MAAM,CAAC,QAAQ,CAAC,EAAE,GAAG,EAAE,CAAC,EAAE,IAAI,EAAE,CAAC,EAAE,QAAQ,EAAE,QAAQ,EAAE,CAAC,CAAC;QAC1D,CAAC;IACF,CAAC;IAED,iBAAiB;QAChB,IAAI,CAAC,QAAQ,GAAG,gBAAgB,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC;IACjD,CAAC;IAED,MAAM;QACL,OAAO,CACN,+DACC,KAAK,EAAE,IAAI,CAAC,gBAAgB,CAAC,CAAC,CAAC,4BAA4B,CAAC,CAAC,CAAC,qBAAqB,EACnF,OAAO,EAAE,IAAI,CAAC,WAAW,gBACb,IAAI,CAAC,YAAY,CAAC,SAAS,CAAC,SAAS,CAAC,GAAG,IAAI,CAAC,QAAQ,EAAE,CAAC;YAErE,4EAAkB,MAAM,EAAC,SAAS,EAAE,kBAAkB,GAAS;YAC9D,IAAI,CAAC,YAAY,CAAC,SAAS,CAAC,GAAG,CAAC,GAAG,IAAI,CAAC,QAAQ,EAAE,CAAC,CAC5C,CACT,CAAC;IACH,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACD","sourcesContent":["import { Component, h, Element, Prop, Listen, State } from '@stencil/core';\n\nimport OntarioIconArrowUp from '../ontario-icon/assets/ontario-icon-arrow-up.svg';\nimport { Language } from '../../utils/common/language-types';\nimport { validateLanguage } from '../../utils/validation/validation-functions';\n\nimport translations from '../../translations/global.i18n.json';\nimport { isClientSideRendering } from '../../utils/common/environment';\nimport { HeaderLanguageToggleEventDetails } from '../../utils/events/common-events.interface';\n\n@Component({\n\ttag: 'ontario-back-to-top',\n\tstyleUrl: 'ontario-back-to-top.scss',\n\tshadow: true,\n})\nexport class OntarioBackToTop {\n\t@Element() element: HTMLElement;\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 prop 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@State() private displayBackToTop: boolean = false;\n\n\t@State() private scrollYValue: number = 200;\n\n\t/\n\t This listens for the window Y scroll value to be above 200 pixels. Once it is, the Back to Top button will toggle the `displayBackToTop` state which will set an active class to control the components' visibility.\n\t /\n\t@Listen('scroll', { target: 'window' })\n\tshowBackToTopButton() {\n\t\tif (isClientSideRendering()) {\n\t\t\tthis.displayBackToTop = window.scrollY > this.scrollYValue;\n\t\t}\n\t}\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/\n\t Handles an update to the language should the user request a language update from the language toggle.\n\t * @param {CustomEvent} - The language that has been selected.\n\t /\n\t@Listen('headerLanguageToggled', { target: 'window' })\n\thandleHeaderLanguageToggled(event: CustomEvent<HeaderLanguageToggleEventDetails>) {\n\t\tthis.language = validateLanguage(event.detail.newLanguage);\n\t}\n\t/\n\t Scroll to top functionality when the Back to Top button is clicked\n\t */\n\tprivate scrollToTop() {\n\t\tif (isClientSideRendering()) {\n\t\t\twindow.scrollTo({ top: 0, left: 0, behavior: 'smooth' });\n\t\t}\n\t}\n\n\tcomponentWillLoad() {\n\t\tthis.language = validateLanguage(this.language);\n\t}\n\n\trender() {\n\t\treturn (\n\t\t\t<button\n\t\t\t\tclass={this.displayBackToTop ? `ontario-back-to-top active` : `ontario-back-to-top`}\n\t\t\t\tonClick={this.scrollToTop}\n\t\t\t\taria-label={this.translations.backToTop.ariaLabel[`${this.language}`]}\n\t\t\t>\n\t\t\t\t<span aria-hidden=\"true\" innerHTML={OntarioIconArrowUp}></span>\n\t\t\t\t{this.translations.backToTop.top[`${this.language}`]}\n\t\t\t</button>\n\t\t);\n\t}\n}\n"]}

package/dist/collection/components/ontario-badge/ontario-badge.css CHANGED Viewed

@@ -46,13 +46,13 @@
 	font-weight: 600;
 	margin-bottom: 0.75rem;
 	font-size: 0.875rem;
-	color: #4d4d4d;
+	color: rgb(76.5, 76.5, 76.5);
 }
 .ontario-badge {
 	display: inline-block;
 	background-color: #e2f0f4;
-	color: #4d4d4d;
+	color: rgb(76.5, 76.5, 76.5);
 	padding: 0.25rem 0.5rem;
 	font-family: 'Raleway Modified', 'Open Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
 	font-size: 1rem;
@@ -64,7 +64,7 @@
 .ontario-badge--default-light {
 	background-color: #e2f0f4;
-	color: #4d4d4d;
+	color: rgb(76.5, 76.5, 76.5);
 }
 .ontario-badge--default-heavy {
@@ -73,12 +73,12 @@
 }
 .ontario-badge--neutral-light {
-	background-color: #f2f2f2;
-	color: #4d4d4d;
+	background-color: rgb(242.25, 242.25, 242.25);
+	color: rgb(76.5, 76.5, 76.5);
 }
 .ontario-badge--neutral-heavy {
-	background-color: #1a1a1a;
+	background-color: rgb(25.5, 25.5, 25.5);
 	color: #ffffff;
 }
@@ -89,7 +89,7 @@
 .ontario-badge--warning-heavy {
 	background-color: #ffd440;
-	color: #1a1a1a;
+	color: rgb(25.5, 25.5, 25.5);
 }
 .ontario-badge--success-heavy {
@@ -99,11 +99,11 @@
 .ontario-badge--white {
 	background-color: #ffffff;
-	color: #4d4d4d;
-	border: 0.0625rem solid #4d4d4d;
+	color: rgb(76.5, 76.5, 76.5);
+	border: 0.0625rem solid rgb(76.5, 76.5, 76.5);
 }
 .ontario-badge--grey {
 	background-color: #cccccc;
-	color: #1a1a1a;
+	color: rgb(25.5, 25.5, 25.5);
 }

package/dist/collection/components/ontario-badge/ontario-badge.js CHANGED Viewed

@@ -90,7 +90,7 @@ export class OntarioBadge {
 		return h(
 			'span',
 			{
-				'key': 'ca2c3472bd4299d740d72e905e75ced508ec933a',
+				'key': '8cc536810ec1ebad05bbe2a14b0bbdc360d0cf54',
 				'class': `ontario-badge ${BadgeColourToClass[this.colour]}`,
 				'aria-label': this.ariaLabelText,
 			},

package/dist/collection/components/ontario-blockquote/ontario-blockquote.css CHANGED Viewed

@@ -27,7 +27,8 @@
 /* callout backgrounds */
 /* icon colours */
 /* service ontario header colours */
-/*** 1 - Breakpoint sizes for media queries ***/ /* -------------------------------
+/*** 1 - Breakpoint sizes for media queries ***/
+/* -------------------------------
     Global font variables
 --------------------------------- */
 /* -------------------------------
@@ -39,7 +40,7 @@
 /* Rem calc function */
 /* Pixel to REM Conversion */
 .ontario-blockquote {
-	border-left: 4px solid #4d4d4d;
+	border-left: 4px solid rgb(76.5, 76.5, 76.5);
 	font-family: 'Raleway Modified', 'Open Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
 	font-size: 1.1875rem;
 	font-weight: 400;