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-step-indicator/ontario-step-indicator.js CHANGED Viewed

@@ -22,8 +22,12 @@ export class OntarioStepIndicator {
 			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);
 	}
 	componentWillLoad() {
 		this.language = validateLanguage(this.language);
@@ -31,17 +35,17 @@ export class OntarioStepIndicator {
 	render() {
 		return h(
 			'div',
-			{ key: '1d5561079ce3ae5eb546688b2338cf6925790f71', class: 'ontario-step-indicator' },
+			{ key: 'ad283fa3f5971b83b4684443d0eed21a60a8b9d3', class: 'ontario-step-indicator' },
 			h(
 				'div',
-				{ key: '47a0c6aac01ab2c4a249fc0c11f8c9fa403e30b4', class: 'ontario-row' },
+				{ key: '194901e35a08acf92c1e8d7605f1654fe9534a66', class: 'ontario-row' },
 				h(
 					'div',
-					{ key: '9d77d6979e2f7007263ed2755906b8ff13c99c94', class: 'ontario-columns ontario-small-12' },
+					{ key: 'ff9d0b746566595a2be034dcdbaf9af64c7d5e7f', class: 'ontario-columns ontario-small-12' },
 					h(
 						'div',
 						{
-							key: 'a15b5eff64babb32432594fe0752083709845d6a',
+							key: '1f11c62e02ac264a82bbbcfc5935925e17818097',
 							class: `ontario-step-indicator--with-back-button--${this.showBackButton}`,
 						},
 						this.showBackButton === true &&
@@ -49,11 +53,15 @@ export class OntarioStepIndicator {
 							h(
 								'button',
 								{
-									key: '97a892d715502f6b8799ea6cb045564c0851d98d',
+									key: '9c943bfed1a042b1d7f7dbbedcc314e04b1c9c0a',
 									class: 'ontario-button ontario-button--tertiary',
 									onClick: (e) => this.handleCustomOnClick(e),
 								},
-								h('ontario-icon-chevron-left', { key: '15d155fd6ebe485ffff99328988c4dd55debf2b1', colour: 'blue' }),
+								h('ontario-icon-chevron-left', {
+									'key': 'f551ad3b5987f4f029e8abf30ebaddb37e846a28',
+									'colour': 'blue',
+									'aria-hidden': 'true',
+								}),
 								this.translations.stepIndicator.back[`${this.language}`],
 							),
 						this.showBackButton === true &&
@@ -61,11 +69,15 @@ export class OntarioStepIndicator {
 							h(
 								'a',
 								{
-									key: 'ace5d57f0c02afefd42c019b33190a2f03a900b1',
+									key: '7061772b5cdaf095081a4b96f6d35eceb929555c',
 									class: 'ontario-button ontario-button--tertiary',
 									href: this.backButtonUrl,
 								},
-								h('ontario-icon-chevron-left', { key: '621c016609d8b1c0141d1b910041da54380306c1', colour: 'blue' }),
+								h('ontario-icon-chevron-left', {
+									'key': '3000b0cf3122d66553171a13172cedf00debe827',
+									'colour': 'blue',
+									'aria-hidden': 'true',
+								}),
 								this.translations.stepIndicator.back[`${this.language}`],
 							),
 						this.percentageComplete
@@ -89,7 +101,7 @@ export class OntarioStepIndicator {
 									this.numberOfSteps,
 								),
 					),
-					h('hr', { key: '48b12d10fa3f3efce011bc138f620a1cd05f7259' }),
+					h('hr', { key: '6dcb3ae82ce02c96d8944786e4707f80eb9849f0' }),
 				),
 			),
 		);

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

	@@ -1 +1 @@
1	- {"version":3,"file":"ontario-step-indicator.js","sourceRoot":"","sources":["../../../src/components/ontario-step-indicator/ontario-step-indicator.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC,EAAE,KAAK,EAAE,MAAM,EAAE,MAAM,eAAe,CAAC;AAE3E,OAAO,EAAE,gBAAgB,EAAE,MAAM,6CAA6C,CAAC;AAC/E,OAAO,YAAY,MAAM,qCAAqC,CAAC;~~AAO~~/D,MAAM,OAAO,oBAAoB;IALjC;QAQC;;;;WAIG;QACK,mBAAc,GAAa,KAAK,CAAC;~~QAuDhC~~,iBAAY,GAAQ,YAAY,CAAC;QAElC,wBAAmB,GAAG,CAAC,CAAmB,EAAE,EAAE;YACrD,IAAI,CAAC,aAAa,IAAI,IAAI,CAAC,aAAa,CAAC,CAAC,CAAC,CAAC;QAC7C,CAAC,CAAC;KA2CF;~~IA9DA~~;;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;IAQD,iBAAiB;QAChB,IAAI,CAAC,QAAQ,GAAG,gBAAgB,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC;IACjD,CAAC;IAED,MAAM;QACL,OAAO,CACN,4DAAK,KAAK,EAAC,wBAAwB;YAClC,4DAAK,KAAK,EAAC,aAAa;gBACvB,4DAAK,KAAK,EAAC,kCAAkC;oBAC5C,4DAAK,KAAK,EAAE,6CAA6C,IAAI,CAAC,cAAc,EAAE;wBAC5E,IAAI,CAAC,cAAc,KAAK,IAAI,IAAI,CAAC,IAAI,CAAC,aAAa,IAAI,CACvD,+DAAQ,KAAK,EAAC,yCAAyC,EAAC,OAAO,EAAE,CAAC,CAAC,EAAE,EAAE,CAAC,IAAI,CAAC,mBAAmB,CAAC,CAAC,CAAC;4BAClG,kFAA2B,MAAM,EAAC,MAAM,GAA6B;~~4BACpE~~,IAAI,CAAC,YAAY,CAAC,aAAa,CAAC,IAAI,CAAC,GAAG,IAAI,CAAC,QAAQ,EAAE,CAAC,CACjD,CACT;wBACA,IAAI,CAAC,cAAc,KAAK,IAAI,IAAI,IAAI,CAAC,aAAa,IAAI,CACtD,0DAAG,KAAK,EAAC,yCAAyC,EAAC,IAAI,EAAE,IAAI,CAAC,aAAa;4BAC1E,kFAA2B,MAAM,EAAC,MAAM,GAA6B;~~4BACpE~~,IAAI,CAAC,YAAY,CAAC,aAAa,CAAC,IAAI,CAAC,GAAG,IAAI,CAAC,QAAQ,EAAE,CAAC,CACtD,CACJ;wBACA,IAAI,CAAC,kBAAkB,CAAC,CAAC,CAAC,CAC1B,YAAM,KAAK,EAAC,YAAY;4BACtB,IAAI,CAAC,kBAAkB;4BACvB,IAAI,CAAC,QAAQ,KAAK,IAAI,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,0BAAoB;4BAAE,GAAG;4BACxD,IAAI,CAAC,YAAY,CAAC,aAAa,CAAC,QAAQ,CAAC,GAAG,IAAI,CAAC,QAAQ,EAAE,CAAC,CACvD,CACP,CAAC,CAAC,CAAC,CACH,YAAM,KAAK,EAAC,YAAY;4BACtB,IAAI,CAAC,YAAY,CAAC,aAAa,CAAC,IAAI,CAAC,GAAG,IAAI,CAAC,QAAQ,EAAE,CAAC;;4BAAQ,IAAI,CAAC,WAAW;4BAAE,GAAG;4BACrF,IAAI,CAAC,YAAY,CAAC,aAAa,CAAC,EAAE,CAAC,GAAG,IAAI,CAAC,QAAQ,EAAE,CAAC;;4BAAQ,IAAI,CAAC,aAAa,CAC3E,CACP,CACI;oBACN,4DAAM,CACD,CACD,CACD,CACN,CAAC;IACH,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACD","sourcesContent":["import { Component, Prop, Element, h, State, Listen } from '@stencil/core';\nimport { Language } from '../../utils/common/language-types';\nimport { validateLanguage } from '../../utils/validation/validation-functions';\nimport translations from '../../translations/global.i18n.json';\n\n@Component({\n\ttag: 'ontario-step-indicator',\n\tstyleUrl: 'ontario-step-indicator.scss',\n\tshadow: true,\n})\nexport class OntarioStepIndicator {\n\t@Element() host: HTMLElement;\n\n\t/*\n\t A boolean value to determine whether or not the back button is displayed for the step indicator.\n\t \n\t This is optional. If no prop is passed, it will default to `false`.\n\t /\n\t@Prop() showBackButton?: boolean = false;\n\n\t/\n\t URL for the back element to set a path for where the link will lead.\n\t \n\t If a URL is passed in, the back element will display as an anchor tag.\n\t * The back element will require either the backButtonURL prop or the customOnClick prop to be passed in order for the back element to display.\n\t /\n\t@Prop() backButtonUrl?: string;\n\n\t/\n\t A number value to indicate which step the user is currently on.\n\t /\n\t@Prop() currentStep?: number;\n\n\t/\n\t A number value to indicate to the user the total number of steps the form has.\n\t /\n\t@Prop() numberOfSteps?: number;\n\n\t/\n\t A number value to indicate to the user the percentage of the form that has been completed.\n\t /\n\n\t@Prop() percentageComplete?: number;\n\n\t/\n\t Used to add a custom function to the back button onClick event.\n\t \n\t If this function is passed in, the back element will display as a button.\n\t * The back element will require either the backButtonURL prop or the customOnClick prop to be passed in order for the back element to display.\n\t /\n\t@Prop() customOnClick?: (event: globalThis.Event) => void;\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@Listen('headerLanguageToggled', { target: 'window' })\n\thandleHeaderLanguageToggled(event: CustomEvent<~~Language~~>) {\n\t\tthis.language = validateLanguage(event);\n\t}\n\n\t@State() translations: any = translations;\n\n\tprivate handleCustomOnClick = (e: globalThis.Event) => {\n\t\tthis.customOnClick && this.customOnClick(e);\n\t};\n\n\tcomponentWillLoad() {\n\t\tthis.language = validateLanguage(this.language);\n\t}\n\n\trender() {\n\t\treturn (\n\t\t\t<div class=\"ontario-step-indicator\">\n\t\t\t\t<div class=\"ontario-row\">\n\t\t\t\t\t<div class=\"ontario-columns ontario-small-12\">\n\t\t\t\t\t\t<div class={`ontario-step-indicator--with-back-button--${this.showBackButton}`}>\n\t\t\t\t\t\t\t{this.showBackButton === true && !this.backButtonUrl && (\n\t\t\t\t\t\t\t\t<button class=\"ontario-button ontario-button--tertiary\" onClick={(e) => this.handleCustomOnClick(e)}>\n\t\t\t\t\t\t\t\t\t<ontario-icon-chevron-left colour=\"blue\"></ontario-icon-chevron-left>\n\t\t\t\t\t\t\t\t\t{this.translations.stepIndicator.back[`${this.language}`]}\n\t\t\t\t\t\t\t\t</button>\n\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t\t{this.showBackButton === true && this.backButtonUrl && (\n\t\t\t\t\t\t\t\t<a class=\"ontario-button ontario-button--tertiary\" href={this.backButtonUrl}>\n\t\t\t\t\t\t\t\t\t<ontario-icon-chevron-left colour=\"blue\"></ontario-icon-chevron-left>\n\t\t\t\t\t\t\t\t\t{this.translations.stepIndicator.back[`${this.language}`]}\n\t\t\t\t\t\t\t\t</a>\n\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t\t{this.percentageComplete ? (\n\t\t\t\t\t\t\t\t<span class=\"ontario-h4\">\n\t\t\t\t\t\t\t\t\t{this.percentageComplete}\n\t\t\t\t\t\t\t\t\t{this.language === 'en' ? '%' : <span> %</span>}{' '}\n\t\t\t\t\t\t\t\t\t{this.translations.stepIndicator.complete[`${this.language}`]}\n\t\t\t\t\t\t\t\t</span>\n\t\t\t\t\t\t\t) : (\n\t\t\t\t\t\t\t\t<span class=\"ontario-h4\">\n\t\t\t\t\t\t\t\t\t{this.translations.stepIndicator.step[`${this.language}`]} {this.currentStep}{' '}\n\t\t\t\t\t\t\t\t\t{this.translations.stepIndicator.of[`${this.language}`]} {this.numberOfSteps}\n\t\t\t\t\t\t\t\t</span>\n\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t</div>\n\t\t\t\t\t\t<hr />\n\t\t\t\t\t</div>\n\t\t\t\t</div>\n\t\t\t</div>\n\t\t);\n\t}\n}\n"]}
1	+ {"version":3,"file":"ontario-step-indicator.js","sourceRoot":"","sources":["../../../src/components/ontario-step-indicator/ontario-step-indicator.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Prop, Element, h, State, Listen } from '@stencil/core';\nimport { Language } from '../../utils/common/language-types';\nimport { validateLanguage } from '../../utils/validation/validation-functions';\nimport translations from '../../translations/global.i18n.json';\nimport { HeaderLanguageToggleEventDetails } from '../../utils/events/common-events.interface';\n\n@Component({\n\ttag: 'ontario-step-indicator',\n\tstyleUrl: 'ontario-step-indicator.scss',\n\tshadow: true,\n})\nexport class OntarioStepIndicator {\n\t@Element() host: HTMLElement;\n\n\t/*\n\t A boolean value to determine whether or not the back button is displayed for the step indicator.\n\t \n\t This is optional. If no prop is passed, it will default to `false`.\n\t /\n\t@Prop() showBackButton?: boolean = false;\n\n\t/\n\t URL for the back element to set a path for where the link will lead.\n\t \n\t If a URL is passed in, the back element will display as an anchor tag.\n\t * The back element will require either the backButtonURL prop or the customOnClick prop to be passed in order for the back element to display.\n\t /\n\t@Prop() backButtonUrl?: string;\n\n\t/\n\t A number value to indicate which step the user is currently on.\n\t /\n\t@Prop() currentStep?: number;\n\n\t/\n\t A number value to indicate to the user the total number of steps the form has.\n\t /\n\t@Prop() numberOfSteps?: number;\n\n\t/\n\t A number value to indicate to the user the percentage of the form that has been completed.\n\t /\n\n\t@Prop() percentageComplete?: number;\n\n\t/\n\t Used to add a custom function to the back button onClick event.\n\t \n\t If this function is passed in, the back element will display as a button.\n\t * The back element will require either the backButtonURL prop or the customOnClick prop to be passed in order for the back element to display.\n\t /\n\t@Prop() customOnClick?: (event: globalThis.Event) => void;\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 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@State() translations: any = translations;\n\n\tprivate handleCustomOnClick = (e: globalThis.Event) => {\n\t\tthis.customOnClick && this.customOnClick(e);\n\t};\n\n\tcomponentWillLoad() {\n\t\tthis.language = validateLanguage(this.language);\n\t}\n\n\trender() {\n\t\treturn (\n\t\t\t<div class=\"ontario-step-indicator\">\n\t\t\t\t<div class=\"ontario-row\">\n\t\t\t\t\t<div class=\"ontario-columns ontario-small-12\">\n\t\t\t\t\t\t<div class={`ontario-step-indicator--with-back-button--${this.showBackButton}`}>\n\t\t\t\t\t\t\t{this.showBackButton === true && !this.backButtonUrl && (\n\t\t\t\t\t\t\t\t<button class=\"ontario-button ontario-button--tertiary\" onClick={(e) => this.handleCustomOnClick(e)}>\n\t\t\t\t\t\t\t\t\t<ontario-icon-chevron-left colour=\"blue\" aria-hidden=\"true\"></ontario-icon-chevron-left>\n\t\t\t\t\t\t\t\t\t{this.translations.stepIndicator.back[`${this.language}`]}\n\t\t\t\t\t\t\t\t</button>\n\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t\t{this.showBackButton === true && this.backButtonUrl && (\n\t\t\t\t\t\t\t\t<a class=\"ontario-button ontario-button--tertiary\" href={this.backButtonUrl}>\n\t\t\t\t\t\t\t\t\t<ontario-icon-chevron-left colour=\"blue\" aria-hidden=\"true\"></ontario-icon-chevron-left>\n\t\t\t\t\t\t\t\t\t{this.translations.stepIndicator.back[`${this.language}`]}\n\t\t\t\t\t\t\t\t</a>\n\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t\t{this.percentageComplete ? (\n\t\t\t\t\t\t\t\t<span class=\"ontario-h4\">\n\t\t\t\t\t\t\t\t\t{this.percentageComplete}\n\t\t\t\t\t\t\t\t\t{this.language === 'en' ? '%' : <span> %</span>}{' '}\n\t\t\t\t\t\t\t\t\t{this.translations.stepIndicator.complete[`${this.language}`]}\n\t\t\t\t\t\t\t\t</span>\n\t\t\t\t\t\t\t) : (\n\t\t\t\t\t\t\t\t<span class=\"ontario-h4\">\n\t\t\t\t\t\t\t\t\t{this.translations.stepIndicator.step[`${this.language}`]} {this.currentStep}{' '}\n\t\t\t\t\t\t\t\t\t{this.translations.stepIndicator.of[`${this.language}`]} {this.numberOfSteps}\n\t\t\t\t\t\t\t\t</span>\n\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t</div>\n\t\t\t\t\t\t<hr />\n\t\t\t\t\t</div>\n\t\t\t\t</div>\n\t\t\t</div>\n\t\t);\n\t}\n}\n"]}

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

@@ -21,7 +21,8 @@
 /* callout backgrounds */
 /* icon colours */
 /* service ontario header colours */
-/*** 1 - Breakpoint sizes for media queries ***/ /* -------------------------------
+/*** 1 - Breakpoint sizes for media queries ***/
+/* -------------------------------
     Global font-size variables
 --------------------------------- */
 /* -------------------------------
@@ -124,7 +125,7 @@
 .ontario-table-container table thead {
 	border: solid;
 	border-width: 0.1875rem 0;
-	border-color: #1a1a1a;
+	border-color: rgb(25.5, 25.5, 25.5);
 	vertical-align: text-top;
 }
 .ontario-table-container table thead th {
@@ -165,7 +166,7 @@
 .ontario-table-container table tbody tr:last-child {
 	border-width: 0.1875rem 0;
 	border-top-width: 0;
-	border-color: #1a1a1a;
+	border-color: rgb(25.5, 25.5, 25.5);
 }
 .ontario-table-container table tbody tr.ontario-table-row--highlight {
 	background-color: rgba(225, 145, 0, 0.2352941176) !important;
@@ -230,7 +231,7 @@
 	border: solid;
 	border-width: 0.1875rem 0;
 	font-size: 1rem;
-	border-color: #1a1a1a;
+	border-color: rgb(25.5, 25.5, 25.5);
 }
 .ontario-table-container tbody tr.ontario-table-row--subtotal th,
 .ontario-table-container tfoot tr th {

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

@@ -84,8 +84,9 @@ export class OntarioTable {
 								dataType === 'tableData' &&
 									rowData.highlight &&
 									h('img', {
-										class: 'ontario-table--highlight-indicator',
-										src: getAssetPath('./assets/highlight-indicator.svg'),
+										'class': 'ontario-table--highlight-indicator',
+										'src': getAssetPath('./assets/highlight-indicator.svg'),
+										'aria-hidden': 'true',
 									}),
 							)
 						: h('td', { class: tdClass, innerHTML: rowData.data[`${columns[index]}`] });
@@ -186,34 +187,34 @@ export class OntarioTable {
 		const columns = extractValuesByKey(this.tableColumnsState, 'key');
 		return h(
 			'div',
-			{ key: 'ed96044a5a2a228bbc449013d64ab3ceac5509c1', class: 'ontario-table-container' },
+			{ key: '7392f8264100a5e367c83776a856b2f78e7d6fe5', class: 'ontario-table-container' },
 			h(
 				'div',
 				{
-					key: '48ee1178ff1512ee3a0304cfb590faca2d68bd27',
+					key: 'a8c4ced72fe67e18f80b174d7130443664a3b639',
 					class: 'ontario-table-scroll--wrapper',
 					ref: (el) => (this.tableScrollWrapper = el),
 				},
 				h('div', {
-					key: 'e57b1f576d4010e4667c1aacb50e5220bc599cd2',
+					key: '6b29eeab56d7b7d435a3eb423f6ffc6cbe08827e',
 					class: 'ontario-table-scroll--div',
 					ref: (el) => (this.tableScrollDiv = el),
 				}),
 			),
 			h(
 				'div',
-				{ key: '240ee0cab61fef7aee6021aeceec73c139ec8b58', class: 'ontario-table-div', ref: (el) => (this.table = el) },
+				{ key: 'b3cc116969637280f7a9036c94f755af240bef21', class: 'ontario-table-div', ref: (el) => (this.table = el) },
 				h(
 					'table',
-					{ key: '8511b7e004e066e7cea94a7fec8a6275d24cd8dc', class: this.getTableClasses() },
-					this.caption && h('caption', { key: '00c5ac079e73d6d5fbc44e842c2d7508aff2a4fc' }, this.caption),
+					{ key: '868feb697860c799daa6bb6351f7c1f53dfa923d', class: this.getTableClasses() },
+					this.caption && h('caption', { key: '2016e5dfa99bf0c20f26d5ff527ee40e9bb5d53a' }, this.caption),
 					this.tableColumnsState &&
 						h(
 							'thead',
-							{ key: 'afc2e24e90ce56fc444d9cd400a27935e74ded04' },
+							{ key: '46d10ab535ed163c5bcd08f12d8ee88a20030b9a' },
 							h(
 								'tr',
-								{ key: 'c0bbedf6e521aae829b5d79e3acf306088b15581' },
+								{ key: '62035ec53c7dc13b2b5c278c634e2181aaf3e6bd' },
 								this.tableColumnsState.map((columnData) => {
 									const columnClass = this.getColumnClasses(columnData);
 									return h('th', {
@@ -229,7 +230,7 @@ export class OntarioTable {
 					this.tableDataState &&
 						h(
 							'tbody',
-							{ key: '8fa2b47b34b5cb421ec50fb29c3e0691012312da' },
+							{ key: '40bb3dbeddde83477c7ec50ba78f530668f210b1' },
 							this.tableDataState.map((rowData) => {
 								const rowClass = rowData.highlight
 									? `ontario-table-row--highlight`
@@ -242,7 +243,7 @@ export class OntarioTable {
 					!!this.tableFooterState.length &&
 						h(
 							'tfoot',
-							{ key: '89f89d646a5d82c664c8a357131bd76094510894' },
+							{ key: '23efbc7926aa1d30df2e49520ba51e2a7ebbcf32' },
 							this.tableFooterState.map((footerData) => {
 								return this.generateTableDataHTML('tableData', footerData, columns, undefined);
 							}),

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

	@@ -1 +1 @@
1	- {"version":3,"file":"ontario-table.js","sourceRoot":"","sources":["../../../src/components/ontario-table/ontario-table.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, h, Element, Prop, State, Watch, getAssetPath } from '@stencil/core';\n\nimport { Table, TableColumnOptions, TableRowOptions } from './table.interface';\n\nimport { validateTableColumns, validateTableRowOptions } from './utils/ontario-table-validation';\n\nimport { ConsoleMessageClass } from '../../utils/console-message/console-message';\nimport { ConsoleType } from '../../utils/console-message/console-message.enum';\nimport { extractValuesByKey, organizeObjectKeys, removeObjectsBySpecificKey } from '../../utils/helper/utils';\n\n@Component({\n\ttag: 'ontario-table',\n\tstyleUrl: 'ontario-table.scss',\n\tshadow: true,\n\tassetsDirs: ['./assets'],\n})\nexport class OntarioTable implements Table {\n\t@Element() element: HTMLElement;\n\tprivate tableScrollWrapper: HTMLElement;\n\tprivate tableScrollDiv: HTMLElement;\n\tprivate table: HTMLElement;\n\n\t/*\n\t Specifies the caption (or title) of the table.\n\t \n\t This is optional.\n\t /\n\t@Prop() caption?: string \| undefined;\n\n\t/\n\t Used to define the columns of the table.\n\t \n\t @example;\n\t * <ontario-table\n\t * table-columns='[\n\t * { \"title\": \"Type of service\", \"key\": \"service\" },\n\t * { \"title\": \"Processing and delivery\", \"key\": \"processing\" },\n\t * { \"title\": \"Cost\", \"key\": \"cost\", \"type\": \"numeric\" }\n\t * ]'\n\t * >\n\t * </ontario-table>\n\t /\n\t@Prop() tableColumns: string \| TableColumnOptions[];\n\n\t/\n\t Used to define the table body data. Note that the keys passed to the `data` object in the tableData should match the keys of the columns defined in the tableColumns prop.\n\t \n\t @example\n\t * <ontario-table\n\t * table-data='[\n\t * {\n\t * \"data\": {\n\t * \"service\": \"Regular service (online)\",\n\t * \"processing\": \"15 business days plus delivery by Canada Post\",\n\t * \"cost\": \"$15\"\n\t * }\n\t * },\n\t * {\n\t * \"data\": {\n\t * \"service\": \"Premium service (online)\",\n\t * \"cost\": \"$45\",\n\t * \"processing\": \"5 business days including delivery by courier\"\n\t * }\n\t * }\n\t * ]'\n\t * >\n\t * </ontario-table>\n\t /\n\t@Prop() tableData: string \| TableRowOptions[];\n\n\t/\n\t Indicates whether or not the table data should have alternate row zebra striping.\n\t \n\t This is optional. By default, zebra striping will be added when the table rows extend 5 rows. If zebra striping is needed to table rows less than 5 rows, the prop should be set to “enabled”. If no zebra stripes are needed, it should be set to “disabled”.\n\t \n\t The default will be set to “auto”.\n\t /\n\t@Prop() zebraStripes?: 'auto' \| 'disabled' \| 'enabled' \| undefined = 'auto';\n\n\t/\n\t Used to specify whether or not table data in cells should have reduced top and bottom padding. This is useful for pages with multiple data-heavy tables such as a budget or financial data.\n\t \n\t This is optional. By default it will be set to “false”.\n\t /\n\t@Prop() condensed?: boolean \| undefined = false;\n\n\t/\n\t Used to specify whether or not the table should extend the full width of its container.\n\t \n\t This is optional. By default, it will be set to “false”\n\t /\n\t@Prop() fullWidth?: boolean \| undefined = false;\n\n\t@State() private tableColumnsState: TableColumnOptions[];\n\n\t@State() private tableDataState: TableRowOptions[];\n\n\t@State() private tableFooterState: TableRowOptions[];\n\n\t@Watch('tableColumns')\n\tprivate processTableColumns() {\n\t\tif (this.tableColumns) this.parseTableColumns(this.tableColumns);\n\t}\n\n\t@Watch('tableData')\n\tprivate processTableData() {\n\t\tif (this.tableData) this.parseTableData(this.tableData);\n\t}\n\n\t/\n\t Parsse and validates the `tableColumns` prop.\n\t * If the prop is a string, it will be parsed as JSON.\n\t * Validated output is stored in `tableColumnsState`.\n\t \n\t If parsing or validation fails, an error message is logged and the state is set to an empty array as a fallback.\n\t /\n\tprivate parseTableColumns(columns: string \| TableColumnOptions[]) {\n\t\ttry {\n\t\t\tthis.tableColumnsState = typeof columns === 'string' ? JSON.parse(columns) : columns;\n\t\t\tvalidateTableColumns(this.tableColumnsState);\n\t\t} catch (error) {\n\t\t\tconst message = new ConsoleMessageClass();\n\t\t\tmessage\n\t\t\t\t.addDesignSystemTag()\n\t\t\t\t.addRegularText(' failed to parse ')\n\t\t\t\t.addMonospaceText('tableColumns')\n\t\t\t\t.addRegularText(' for ')\n\t\t\t\t.addMonospaceText('<ontario-table>')\n\t\t\t\t.addRegularText(' — check for valid JSON format or structure.\\n')\n\t\t\t\t.addMonospaceText(error.stack)\n\t\t\t\t.printMessage(ConsoleType.Error);\n\t\t\tthis.tableColumnsState = []; // Fallback to prevent render failure\n\t\t}\n\t}\n\n\t/\n\t Parses and validates the `tableData` prop.\n\t * If the prop is a string, it will be parsed as JSON.\n\t * The parsed object is transformed for internal use and stored in `tableDataState` and `tableFooterState`.\n\t \n\t If parsing or validation fails, logs an error and sets both data states to empty arrays as a fallback.\n\t */\n\tprivate parseTableData(data: string \| TableRowOptions[]) {\n\t\ttry {\n\t\t\tconst parsed = typeof data === 'string' ? JSON.parse(data) : data;\n\t\t\tthis.transformTableData(parsed);\n\t\t\tvalidateTableRowOptions(parsed);\n\t\t} catch (error) {\n\t\t\tconst message = new ConsoleMessageClass();\n\t\t\tmessage\n\t\t\t\t.addDesignSystemTag()\n\t\t\t\t.addRegularText(' failed to parse ')\n\t\t\t\t.addMonospaceText('tableData')\n\t\t\t\t.addRegularText(' for ')\n\t\t\t\t.addMonospaceText('<ontario-table>')\n\t\t\t\t.addRegularText(' — check for valid JSON format or structure.\\n')\n\t\t\t\t.addMonospaceText(error.stack)\n\t\t\t\t.printMessage(ConsoleType.Error);\n\t\t\tthis.tableDataState = [];\n\t\t\tthis.tableFooterState = []; // Prevents render issues when data is invalid\n\t\t}\n\t}\n\n\tprivate transformTableData = (tableData: TableRowOptions[]) => {\n\t\t// get column keys\n\t\tconst columns = extractValuesByKey<TableColumnOptions>(this.tableColumnsState, 'key').filter(\n\t\t\t(column): column is keyof TableRowOptions => column !== undefined,\n\t\t);\n\n\t\t// organize table data data object according to the order of the column keys\n\t\tconst organizedTableData = organizeObjectKeys(tableData, columns);\n\n\t\t// remove the footer table data into it's own state so that it can be rendered in a `tfoot` element\n\t\tconst [updatedTableData, tableFooterData] = removeObjectsBySpecificKey(organizedTableData, 'footer', true);\n\n\t\tthis.tableDataState = updatedTableData;\n\t\tthis.tableFooterState = tableFooterData;\n\t};\n\n\tprivate getZebraStripeClass = () => {\n\t\treturn this.zebraStripes === 'disabled'\n\t\t\t? `ontario-table--no-zebra-stripes`\n\t\t\t: this.zebraStripes === 'enabled'\n\t\t\t\t? `ontario-table--zebra-stripes-enabled`\n\t\t\t\t: ``;\n\t};\n\n\tprivate getTableClasses = () => {\n\t\tlet tableClass = '';\n\t\tif (this.condensed && this.fullWidth) {\n\t\t\ttableClass = `ontario-table--condensed ontario-table--full-container-width`;\n\t\t} else if (this.condensed) {\n\t\t\ttableClass = `ontario-table--condensed`;\n\t\t} else if (this.fullWidth) {\n\t\t\ttableClass = `ontario-table--full-container-width`;\n\t\t}\n\n\t\tconst zebraStripesClass = this.getZebraStripeClass();\n\t\tif (tableClass) {\n\t\t\ttableClass = `${tableClass} ${zebraStripesClass}`;\n\t\t} else {\n\t\t\ttableClass = zebraStripesClass;\n\t\t}\n\n\t\treturn tableClass;\n\t};\n\n\tprivate getColumnClasses = (columnData: TableColumnOptions) => {\n\t\tif (columnData.type === 'numeric' && columnData.colSpan) {\n\t\t\treturn `ontario-table-cell--numeric ontario-table-header--column-span-${columnData.colSpan}`;\n\t\t} else if (columnData.type === 'numeric') {\n\t\t\treturn `ontario-table-cell--numeric`;\n\t\t} else if (columnData.colSpan) {\n\t\t\treturn `ontario-table-header--column-span-${columnData.colSpan}`;\n\t\t}\n\n\t\treturn;\n\t};\n\n\t// A function used to generate the table header and table definitions for the table body and table footer sections.\n\tprivate generateTableDataHTML = (\n\t\tdataType: 'tableData' \| 'tableFooter',\n\t\trowData: any,\n\t\tcolumns: (string \| number \| undefined)[],\n\t\trowClass?: string \| undefined,\n\t) => {\n\t\treturn (\n\t\t\t<tr class={dataType === 'tableData' ? rowClass : ''}>\n\t\t\t\t{this.tableColumnsState.map((column, index) => {\n\t\t\t\t\tconst type = column.type;\n\t\t\t\t\tconst tdClass = type === 'numeric' ? `ontario-table-cell--numeric` : '';\n\n\t\t\t\t\treturn index === 0 ? (\n\t\t\t\t\t\t<th scope=\"row\" innerHTML={rowData.data[`${columns[0]}`]}>\n\t\t\t\t\t\t\t{dataType === 'tableData' && rowData.highlight && (\n\t\t\t\t\t\t\t\t<img\n\t\t\t\t\t\t\t\t\tclass=\"ontario-table--highlight-indicator\"\n\t\t\t\t\t\t\t\t\tsrc={getAssetPath('./assets/highlight-indicator.svg')}\n\t\t\t\t\t\t\t\t></img>\n\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t</th>\n\t\t\t\t\t) : (\n\t\t\t\t\t\t<td class={tdClass} innerHTML={rowData.data[`${columns[index]}`]}></td>\n\t\t\t\t\t);\n\t\t\t\t})}\n\t\t\t</tr>\n\t\t);\n\t};\n\n\t// Helper function to apply the scrollbar styles to the tops of tables\n\tprivate applyScrollbar(tableElement: Element, scrollerDiv: HTMLElement) {\n\t\tscrollerDiv.style.visibility = 'visible';\n\t\tscrollerDiv.style.height = '20px';\n\t\tscrollerDiv.style.width = `${tableElement.scrollWidth}px`;\n\t}\n\n\t// The following logic adds scrollbar functionality to the tops of tables depending on their size.\n\tcomponentDidLoad() {\n\t\tconst tables = this.table;\n\t\tconst scrollerDivs = this.tableScrollDiv;\n\t\tconst scrollerWrappers = this.tableScrollWrapper;\n\n\t\tif (typeof window !== 'undefined') {\n\t\t\tlet resizeObserver = new ResizeObserver(() => {\n\t\t\t\tthis.applyScrollbar(tables, scrollerDivs);\n\t\t\t});\n\n\t\t\tthis.applyScrollbar(tables, scrollerDivs);\n\t\t\tresizeObserver.observe(tables);\n\n\t\t\ttables.addEventListener('scroll', () => {\n\t\t\t\tthis.applyScrollbar(tables, scrollerDivs);\n\n\t\t\t\tscrollerWrappers.scrollLeft = tables.scrollLeft;\n\t\t\t});\n\n\t\t\tscrollerWrappers.addEventListener('scroll', () => {\n\t\t\t\tthis.applyScrollbar(tables, scrollerDivs);\n\n\t\t\t\ttables.scrollLeft = scrollerWrappers.scrollLeft;\n\t\t\t});\n\t\t}\n\t}\n\n\tcomponentWillLoad() {\n\t\tthis.processTableColumns();\n\t\tthis.processTableData();\n\t}\n\n\trender() {\n\t\tconst columns = extractValuesByKey(this.tableColumnsState, 'key');\n\n\t\treturn (\n\t\t\t<div class=\"ontario-table-container\">\n\t\t\t\t<div class=\"ontario-table-scroll--wrapper\" ref={(el) => (this.tableScrollWrapper = el as HTMLElement)}>\n\t\t\t\t\t<div class=\"ontario-table-scroll--div\" ref={(el) => (this.tableScrollDiv = el as HTMLElement)}></div>\n\t\t\t\t</div>\n\t\t\t\t<div class=\"ontario-table-div\" ref={(el) => (this.table = el as HTMLElement)}>\n\t\t\t\t\t<table class={this.getTableClasses()}>\n\t\t\t\t\t\t{this.caption && <caption>{this.caption}</caption>}\n\t\t\t\t\t\t{this.tableColumnsState && (\n\t\t\t\t\t\t\t<thead>\n\t\t\t\t\t\t\t\t<tr>\n\t\t\t\t\t\t\t\t\t{this.tableColumnsState.map((columnData) => {\n\t\t\t\t\t\t\t\t\t\tconst columnClass = this.getColumnClasses(columnData);\n\t\t\t\t\t\t\t\t\t\treturn (\n\t\t\t\t\t\t\t\t\t\t\t<th\n\t\t\t\t\t\t\t\t\t\t\t\tscope=\"col\"\n\t\t\t\t\t\t\t\t\t\t\t\tkey={columnData.key}\n\t\t\t\t\t\t\t\t\t\t\t\tdata-type={columnData.type}\n\t\t\t\t\t\t\t\t\t\t\t\tclass={columnClass}\n\t\t\t\t\t\t\t\t\t\t\t\tinnerHTML={columnData.title}\n\t\t\t\t\t\t\t\t\t\t\t></th>\n\t\t\t\t\t\t\t\t\t\t);\n\t\t\t\t\t\t\t\t\t})}\n\t\t\t\t\t\t\t\t</tr>\n\t\t\t\t\t\t\t</thead>\n\t\t\t\t\t\t)}\n\t\t\t\t\t\t{this.tableDataState && (\n\t\t\t\t\t\t\t<tbody>\n\t\t\t\t\t\t\t\t{this.tableDataState.map((rowData) => {\n\t\t\t\t\t\t\t\t\tconst rowClass = rowData.highlight\n\t\t\t\t\t\t\t\t\t\t? `ontario-table-row--highlight`\n\t\t\t\t\t\t\t\t\t\t: rowData.subtotal\n\t\t\t\t\t\t\t\t\t\t\t? `ontario-table-row--subtotal`\n\t\t\t\t\t\t\t\t\t\t\t: undefined;\n\n\t\t\t\t\t\t\t\t\treturn this.generateTableDataHTML('tableData', rowData, columns, rowClass);\n\t\t\t\t\t\t\t\t})}\n\t\t\t\t\t\t\t</tbody>\n\t\t\t\t\t\t)}\n\t\t\t\t\t\t{!!this.tableFooterState.length && (\n\t\t\t\t\t\t\t<tfoot>\n\t\t\t\t\t\t\t\t{this.tableFooterState.map((footerData) => {\n\t\t\t\t\t\t\t\t\treturn this.generateTableDataHTML('tableData', footerData, columns, undefined);\n\t\t\t\t\t\t\t\t})}\n\t\t\t\t\t\t\t</tfoot>\n\t\t\t\t\t\t)}\n\t\t\t\t\t</table>\n\t\t\t\t</div>\n\t\t\t</div>\n\t\t);\n\t}\n}\n"]}
1	+ {"version":3,"file":"ontario-table.js","sourceRoot":"","sources":["../../../src/components/ontario-table/ontario-table.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, h, Element, Prop, State, Watch, getAssetPath } from '@stencil/core';\n\nimport { Table, TableColumnOptions, TableRowOptions } from './table.interface';\n\nimport { validateTableColumns, validateTableRowOptions } from './utils/ontario-table-validation';\n\nimport { ConsoleMessageClass } from '../../utils/console-message/console-message';\nimport { ConsoleType } from '../../utils/console-message/console-message.enum';\nimport { extractValuesByKey, organizeObjectKeys, removeObjectsBySpecificKey } from '../../utils/helper/utils';\n\n@Component({\n\ttag: 'ontario-table',\n\tstyleUrl: 'ontario-table.scss',\n\tshadow: true,\n\tassetsDirs: ['./assets'],\n})\nexport class OntarioTable implements Table {\n\t@Element() element: HTMLElement;\n\tprivate tableScrollWrapper: HTMLElement;\n\tprivate tableScrollDiv: HTMLElement;\n\tprivate table: HTMLElement;\n\n\t/*\n\t Specifies the caption (or title) of the table.\n\t \n\t This is optional.\n\t /\n\t@Prop() caption?: string \| undefined;\n\n\t/\n\t Used to define the columns of the table.\n\t \n\t @example;\n\t * <ontario-table\n\t * table-columns='[\n\t * { \"title\": \"Type of service\", \"key\": \"service\" },\n\t * { \"title\": \"Processing and delivery\", \"key\": \"processing\" },\n\t * { \"title\": \"Cost\", \"key\": \"cost\", \"type\": \"numeric\" }\n\t * ]'\n\t * >\n\t * </ontario-table>\n\t /\n\t@Prop() tableColumns: string \| TableColumnOptions[];\n\n\t/\n\t Used to define the table body data. Note that the keys passed to the `data` object in the tableData should match the keys of the columns defined in the tableColumns prop.\n\t \n\t @example\n\t * <ontario-table\n\t * table-data='[\n\t * {\n\t * \"data\": {\n\t * \"service\": \"Regular service (online)\",\n\t * \"processing\": \"15 business days plus delivery by Canada Post\",\n\t * \"cost\": \"$15\"\n\t * }\n\t * },\n\t * {\n\t * \"data\": {\n\t * \"service\": \"Premium service (online)\",\n\t * \"cost\": \"$45\",\n\t * \"processing\": \"5 business days including delivery by courier\"\n\t * }\n\t * }\n\t * ]'\n\t * >\n\t * </ontario-table>\n\t /\n\t@Prop() tableData: string \| TableRowOptions[];\n\n\t/\n\t Indicates whether or not the table data should have alternate row zebra striping.\n\t \n\t This is optional. By default, zebra striping will be added when the table rows extend 5 rows. If zebra striping is needed to table rows less than 5 rows, the prop should be set to “enabled”. If no zebra stripes are needed, it should be set to “disabled”.\n\t \n\t The default will be set to “auto”.\n\t /\n\t@Prop() zebraStripes?: 'auto' \| 'disabled' \| 'enabled' \| undefined = 'auto';\n\n\t/\n\t Used to specify whether or not table data in cells should have reduced top and bottom padding. This is useful for pages with multiple data-heavy tables such as a budget or financial data.\n\t \n\t This is optional. By default it will be set to “false”.\n\t /\n\t@Prop() condensed?: boolean \| undefined = false;\n\n\t/\n\t Used to specify whether or not the table should extend the full width of its container.\n\t \n\t This is optional. By default, it will be set to “false”\n\t /\n\t@Prop() fullWidth?: boolean \| undefined = false;\n\n\t@State() private tableColumnsState: TableColumnOptions[];\n\n\t@State() private tableDataState: TableRowOptions[];\n\n\t@State() private tableFooterState: TableRowOptions[];\n\n\t@Watch('tableColumns')\n\tprivate processTableColumns() {\n\t\tif (this.tableColumns) this.parseTableColumns(this.tableColumns);\n\t}\n\n\t@Watch('tableData')\n\tprivate processTableData() {\n\t\tif (this.tableData) this.parseTableData(this.tableData);\n\t}\n\n\t/\n\t Parsse and validates the `tableColumns` prop.\n\t * If the prop is a string, it will be parsed as JSON.\n\t * Validated output is stored in `tableColumnsState`.\n\t \n\t If parsing or validation fails, an error message is logged and the state is set to an empty array as a fallback.\n\t /\n\tprivate parseTableColumns(columns: string \| TableColumnOptions[]) {\n\t\ttry {\n\t\t\tthis.tableColumnsState = typeof columns === 'string' ? JSON.parse(columns) : columns;\n\t\t\tvalidateTableColumns(this.tableColumnsState);\n\t\t} catch (error) {\n\t\t\tconst message = new ConsoleMessageClass();\n\t\t\tmessage\n\t\t\t\t.addDesignSystemTag()\n\t\t\t\t.addRegularText(' failed to parse ')\n\t\t\t\t.addMonospaceText('tableColumns')\n\t\t\t\t.addRegularText(' for ')\n\t\t\t\t.addMonospaceText('<ontario-table>')\n\t\t\t\t.addRegularText(' — check for valid JSON format or structure.\\n')\n\t\t\t\t.addMonospaceText(error.stack)\n\t\t\t\t.printMessage(ConsoleType.Error);\n\t\t\tthis.tableColumnsState = []; // Fallback to prevent render failure\n\t\t}\n\t}\n\n\t/\n\t Parses and validates the `tableData` prop.\n\t * If the prop is a string, it will be parsed as JSON.\n\t * The parsed object is transformed for internal use and stored in `tableDataState` and `tableFooterState`.\n\t \n\t If parsing or validation fails, logs an error and sets both data states to empty arrays as a fallback.\n\t */\n\tprivate parseTableData(data: string \| TableRowOptions[]) {\n\t\ttry {\n\t\t\tconst parsed = typeof data === 'string' ? JSON.parse(data) : data;\n\t\t\tthis.transformTableData(parsed);\n\t\t\tvalidateTableRowOptions(parsed);\n\t\t} catch (error) {\n\t\t\tconst message = new ConsoleMessageClass();\n\t\t\tmessage\n\t\t\t\t.addDesignSystemTag()\n\t\t\t\t.addRegularText(' failed to parse ')\n\t\t\t\t.addMonospaceText('tableData')\n\t\t\t\t.addRegularText(' for ')\n\t\t\t\t.addMonospaceText('<ontario-table>')\n\t\t\t\t.addRegularText(' — check for valid JSON format or structure.\\n')\n\t\t\t\t.addMonospaceText(error.stack)\n\t\t\t\t.printMessage(ConsoleType.Error);\n\t\t\tthis.tableDataState = [];\n\t\t\tthis.tableFooterState = []; // Prevents render issues when data is invalid\n\t\t}\n\t}\n\n\tprivate transformTableData = (tableData: TableRowOptions[]) => {\n\t\t// get column keys\n\t\tconst columns = extractValuesByKey<TableColumnOptions>(this.tableColumnsState, 'key').filter(\n\t\t\t(column): column is keyof TableRowOptions => column !== undefined,\n\t\t);\n\n\t\t// organize table data data object according to the order of the column keys\n\t\tconst organizedTableData = organizeObjectKeys(tableData, columns);\n\n\t\t// remove the footer table data into it's own state so that it can be rendered in a `tfoot` element\n\t\tconst [updatedTableData, tableFooterData] = removeObjectsBySpecificKey(organizedTableData, 'footer', true);\n\n\t\tthis.tableDataState = updatedTableData;\n\t\tthis.tableFooterState = tableFooterData;\n\t};\n\n\tprivate getZebraStripeClass = () => {\n\t\treturn this.zebraStripes === 'disabled'\n\t\t\t? `ontario-table--no-zebra-stripes`\n\t\t\t: this.zebraStripes === 'enabled'\n\t\t\t\t? `ontario-table--zebra-stripes-enabled`\n\t\t\t\t: ``;\n\t};\n\n\tprivate getTableClasses = () => {\n\t\tlet tableClass = '';\n\t\tif (this.condensed && this.fullWidth) {\n\t\t\ttableClass = `ontario-table--condensed ontario-table--full-container-width`;\n\t\t} else if (this.condensed) {\n\t\t\ttableClass = `ontario-table--condensed`;\n\t\t} else if (this.fullWidth) {\n\t\t\ttableClass = `ontario-table--full-container-width`;\n\t\t}\n\n\t\tconst zebraStripesClass = this.getZebraStripeClass();\n\t\tif (tableClass) {\n\t\t\ttableClass = `${tableClass} ${zebraStripesClass}`;\n\t\t} else {\n\t\t\ttableClass = zebraStripesClass;\n\t\t}\n\n\t\treturn tableClass;\n\t};\n\n\tprivate getColumnClasses = (columnData: TableColumnOptions) => {\n\t\tif (columnData.type === 'numeric' && columnData.colSpan) {\n\t\t\treturn `ontario-table-cell--numeric ontario-table-header--column-span-${columnData.colSpan}`;\n\t\t} else if (columnData.type === 'numeric') {\n\t\t\treturn `ontario-table-cell--numeric`;\n\t\t} else if (columnData.colSpan) {\n\t\t\treturn `ontario-table-header--column-span-${columnData.colSpan}`;\n\t\t}\n\n\t\treturn;\n\t};\n\n\t// A function used to generate the table header and table definitions for the table body and table footer sections.\n\tprivate generateTableDataHTML = (\n\t\tdataType: 'tableData' \| 'tableFooter',\n\t\trowData: any,\n\t\tcolumns: (string \| number \| undefined)[],\n\t\trowClass?: string \| undefined,\n\t) => {\n\t\treturn (\n\t\t\t<tr class={dataType === 'tableData' ? rowClass : ''}>\n\t\t\t\t{this.tableColumnsState.map((column, index) => {\n\t\t\t\t\tconst type = column.type;\n\t\t\t\t\tconst tdClass = type === 'numeric' ? `ontario-table-cell--numeric` : '';\n\n\t\t\t\t\treturn index === 0 ? (\n\t\t\t\t\t\t<th scope=\"row\" innerHTML={rowData.data[`${columns[0]}`]}>\n\t\t\t\t\t\t\t{dataType === 'tableData' && rowData.highlight && (\n\t\t\t\t\t\t\t\t<img\n\t\t\t\t\t\t\t\t\tclass=\"ontario-table--highlight-indicator\"\n\t\t\t\t\t\t\t\t\tsrc={getAssetPath('./assets/highlight-indicator.svg')}\n\t\t\t\t\t\t\t\t\taria-hidden=\"true\"\n\t\t\t\t\t\t\t\t></img>\n\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t</th>\n\t\t\t\t\t) : (\n\t\t\t\t\t\t<td class={tdClass} innerHTML={rowData.data[`${columns[index]}`]}></td>\n\t\t\t\t\t);\n\t\t\t\t})}\n\t\t\t</tr>\n\t\t);\n\t};\n\n\t// Helper function to apply the scrollbar styles to the tops of tables\n\tprivate applyScrollbar(tableElement: Element, scrollerDiv: HTMLElement) {\n\t\tscrollerDiv.style.visibility = 'visible';\n\t\tscrollerDiv.style.height = '20px';\n\t\tscrollerDiv.style.width = `${tableElement.scrollWidth}px`;\n\t}\n\n\t// The following logic adds scrollbar functionality to the tops of tables depending on their size.\n\tcomponentDidLoad() {\n\t\tconst tables = this.table;\n\t\tconst scrollerDivs = this.tableScrollDiv;\n\t\tconst scrollerWrappers = this.tableScrollWrapper;\n\n\t\tif (typeof window !== 'undefined') {\n\t\t\tlet resizeObserver = new ResizeObserver(() => {\n\t\t\t\tthis.applyScrollbar(tables, scrollerDivs);\n\t\t\t});\n\n\t\t\tthis.applyScrollbar(tables, scrollerDivs);\n\t\t\tresizeObserver.observe(tables);\n\n\t\t\ttables.addEventListener('scroll', () => {\n\t\t\t\tthis.applyScrollbar(tables, scrollerDivs);\n\n\t\t\t\tscrollerWrappers.scrollLeft = tables.scrollLeft;\n\t\t\t});\n\n\t\t\tscrollerWrappers.addEventListener('scroll', () => {\n\t\t\t\tthis.applyScrollbar(tables, scrollerDivs);\n\n\t\t\t\ttables.scrollLeft = scrollerWrappers.scrollLeft;\n\t\t\t});\n\t\t}\n\t}\n\n\tcomponentWillLoad() {\n\t\tthis.processTableColumns();\n\t\tthis.processTableData();\n\t}\n\n\trender() {\n\t\tconst columns = extractValuesByKey(this.tableColumnsState, 'key');\n\n\t\treturn (\n\t\t\t<div class=\"ontario-table-container\">\n\t\t\t\t<div class=\"ontario-table-scroll--wrapper\" ref={(el) => (this.tableScrollWrapper = el as HTMLElement)}>\n\t\t\t\t\t<div class=\"ontario-table-scroll--div\" ref={(el) => (this.tableScrollDiv = el as HTMLElement)}></div>\n\t\t\t\t</div>\n\t\t\t\t<div class=\"ontario-table-div\" ref={(el) => (this.table = el as HTMLElement)}>\n\t\t\t\t\t<table class={this.getTableClasses()}>\n\t\t\t\t\t\t{this.caption && <caption>{this.caption}</caption>}\n\t\t\t\t\t\t{this.tableColumnsState && (\n\t\t\t\t\t\t\t<thead>\n\t\t\t\t\t\t\t\t<tr>\n\t\t\t\t\t\t\t\t\t{this.tableColumnsState.map((columnData) => {\n\t\t\t\t\t\t\t\t\t\tconst columnClass = this.getColumnClasses(columnData);\n\t\t\t\t\t\t\t\t\t\treturn (\n\t\t\t\t\t\t\t\t\t\t\t<th\n\t\t\t\t\t\t\t\t\t\t\t\tscope=\"col\"\n\t\t\t\t\t\t\t\t\t\t\t\tkey={columnData.key}\n\t\t\t\t\t\t\t\t\t\t\t\tdata-type={columnData.type}\n\t\t\t\t\t\t\t\t\t\t\t\tclass={columnClass}\n\t\t\t\t\t\t\t\t\t\t\t\tinnerHTML={columnData.title}\n\t\t\t\t\t\t\t\t\t\t\t></th>\n\t\t\t\t\t\t\t\t\t\t);\n\t\t\t\t\t\t\t\t\t})}\n\t\t\t\t\t\t\t\t</tr>\n\t\t\t\t\t\t\t</thead>\n\t\t\t\t\t\t)}\n\t\t\t\t\t\t{this.tableDataState && (\n\t\t\t\t\t\t\t<tbody>\n\t\t\t\t\t\t\t\t{this.tableDataState.map((rowData) => {\n\t\t\t\t\t\t\t\t\tconst rowClass = rowData.highlight\n\t\t\t\t\t\t\t\t\t\t? `ontario-table-row--highlight`\n\t\t\t\t\t\t\t\t\t\t: rowData.subtotal\n\t\t\t\t\t\t\t\t\t\t\t? `ontario-table-row--subtotal`\n\t\t\t\t\t\t\t\t\t\t\t: undefined;\n\n\t\t\t\t\t\t\t\t\treturn this.generateTableDataHTML('tableData', rowData, columns, rowClass);\n\t\t\t\t\t\t\t\t})}\n\t\t\t\t\t\t\t</tbody>\n\t\t\t\t\t\t)}\n\t\t\t\t\t\t{!!this.tableFooterState.length && (\n\t\t\t\t\t\t\t<tfoot>\n\t\t\t\t\t\t\t\t{this.tableFooterState.map((footerData) => {\n\t\t\t\t\t\t\t\t\treturn this.generateTableDataHTML('tableData', footerData, columns, undefined);\n\t\t\t\t\t\t\t\t})}\n\t\t\t\t\t\t\t</tfoot>\n\t\t\t\t\t\t)}\n\t\t\t\t\t</table>\n\t\t\t\t</div>\n\t\t\t</div>\n\t\t);\n\t}\n}\n"]}

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

@@ -23,38 +23,40 @@
 /* service ontario header colours */
 /* Rem calc function */
 /* Pixel to REM Conversion */
-/*** 1 - Breakpoint sizes for media queries ***/ /* -------------------------------
+/*** 1 - Breakpoint sizes for media queries ***/
+/* -------------------------------
     Focus placeholder variables
 --------------------------------- */
 /* -------------------------------
     Focus placeholder
 --------------------------------- */
-.ontario-task__link:focus .ontario-task__label {
-	box-shadow: 0 0 0 4px #009adb;
-	outline: 4px solid transparent;
-	transition: box-shadow 0.1s ease-in-out;
-}
 /* -------------------------------
     Global font-weight variables
 --------------------------------- */
 .ontario-task {
 	border-bottom: 0.125rem solid #cccccc;
-	padding: 1.1875rem 0;
+	padding: 1.25rem 0;
 	list-style: none;
 }
 .ontario-task__content {
 	display: flex;
+	flex-direction: row;
+	align-items: flex-start;
 	justify-content: space-between;
-	align-items: center;
+	gap: 1rem;
 }
 @media screen and (max-width: 40em) {
 	.ontario-task__content {
-		display: flex;
 		flex-direction: column;
 		align-items: flex-start;
+		justify-content: flex-start;
+		gap: 0.5rem;
 	}
 }
+.ontario-task .ontario-task__text {
+	display: flex;
+	flex-direction: column;
+}
 .ontario-task__label {
 	text-align: left;
 	margin: 0;
@@ -76,24 +78,37 @@
 }
 .ontario-task__link {
 	display: block;
-	text-decoration: underline;
+	text-decoration: none;
 	color: #0066cc;
 	font-weight: normal;
 }
 .ontario-task__hint-text--true {
 	margin-bottom: 0.5rem;
 }
+.ontario-task--error {
+	padding-left: 1rem;
+	border-left: 0.25rem solid #cd0000;
+	margin-left: -0.125rem;
+}
+.ontario-task .ontario-hint {
+	margin-bottom: 0;
+}
+.ontario-task:focus-within {
+	outline: 4px solid #009adb;
+}
+.ontario-task__link .ontario-task__label {
+	text-decoration: underline;
+}
 .ontario-task__link:focus {
 	outline: none;
 	box-shadow: none;
 }
-.ontario-task__link:focus .ontario-task__label {
-	box-shadow: 0 0 0 4px #009adb inset;
-}
 .ontario-task:has(.ontario-task__link):hover {
-	background-color: #f2f2f2;
+	background-color: rgb(242.25, 242.25, 242.25);
 }
 .ontario-task--status-completed .ontario-task__link .ontario-task__label,
@@ -129,8 +144,3 @@
 ontario-hint-text::part(hint-text) {
 	margin: 0;
 }
-@media screen and (max-width: 40em) {
-	ontario-hint-text::part(hint-text) {
-		margin-top: 0.5rem;
-	}
-}

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

@@ -1,4 +1,4 @@
-import { h, Fragment } from '@stencil/core';
+import { h } from '@stencil/core';
 import { ConsoleMessageClass } from '../../utils/console-message/console-message';
 import { TaskStatuses, TaskToBadgeColour } from '../../utils/common/task-statuses.enum';
 import { validateLanguage, validateValueAgainstArray } from '../../utils/validation/validation-functions';
@@ -95,11 +95,11 @@ export class OntarioTask {
 		}
 	}
 	/**
-	 * This listens for the `headerLanguageToggled` event sent from the language toggle when it is connected to the DOM.
-	 * It is used for changing the component language after the language toggle has been activated.
+	 * 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);
 	}
 	/**
 	 * Determines the badge colour based on the current `taskStatusState`.
@@ -175,7 +175,7 @@ export class OntarioTask {
 		return h(
 			'div',
 			{ class: 'ontario-task__content' },
-			h(this.headingLevel, headingProps, this.label),
+			h('div', { class: 'ontario-task__text' }, h(this.headingLevel, headingProps, this.label), this.renderHintText()),
 			this.taskStatusState &&
 				h(
 					'ontario-badge',
@@ -217,16 +217,10 @@ export class OntarioTask {
 		const isLinkActive = this.link && !this.deactivateLink;
 		const taskStatusClass = `ontario-task-status--${this.taskStatusState.replace(/([a-z])([A-Z])/g, '$1-$2').toLowerCase()}`;
 		const describedBy = this.internalHintText ? `hint-text--${this.taskId}` : undefined;
-		const taskContent = h(
-			Fragment,
-			{ key: 'b3dfad004eeb8aa853b232b08d84d8c1407ffb0a' },
-			this.renderTaskContent(),
-			this.renderHintText(),
-		);
 		return h(
 			'li',
 			{
-				'key': '1d134827d45c73163af64f03e370cf385a792976',
+				'key': 'b00f95cd8b17f1e40daae5a16e0198b80de392e6',
 				'class': `ontario-task ${taskStatusClass}`,
 				'role': 'group',
 				'aria-labelledby': `task-label--${this.taskId}`,
@@ -234,8 +228,12 @@ export class OntarioTask {
 				'aria-describedby': describedBy,
 			},
 			isLinkActive
-				? h('a', { 'href': this.link, 'class': 'ontario-task__link', 'aria-label': this.label }, taskContent)
-				: h('div', null, taskContent),
+				? h(
+						'a',
+						{ 'href': this.link, 'class': 'ontario-task__link', 'aria-label': this.label },
+						this.renderTaskContent(),
+					)
+				: h('div', null, this.renderTaskContent()),
 		);
 	}
 	static get is() {

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

	@@ -1 +1 @@
1	- {"version":3,"file":"ontario-task.js","sourceRoot":"","sources":["../../../src/components/ontario-task/ontario-task.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,CAAC,EAAE,SAAS,EAAE,IAAI,EAAE,KAAK,EAAE,KAAK,EAAE,MAAM,EAAE,OAAO,EAAE,QAAQ,EAAE,MAAM,eAAe,CAAC;AAC5F,OAAO,EAAE,mBAAmB,EAAE,MAAM,6CAA6C,CAAC;AAClF,OAAO,EAAE,YAAY,EAAmB,iBAAiB,EAAE,MAAM,uCAAuC,CAAC;AACzG,OAAO,EAAE,gBAAgB,EAAE,yBAAyB,EAAE,MAAM,6CAA6C,CAAC;AAG1G,OAAO,EAAE,uBAAuB,EAAE,MAAM,oCAAoC,CAAC;AAC7E,OAAO,YAAY,MAAM,qCAAqC,CAAC;AAS/D,MAAM,OAAO,WAAW;IALxB;QAgCC;;;;WAIG;QACK,mBAAc,GAAY,KAAK,CAAC;QAgBxC;;;;WAIG;QACH;;;;WAIG;QACK,eAAU,GAAiB,YAAY,CAAC,UAAU,CAAC;QAE3D;;;;WAIG;QACK,iBAAY,GAAqB,IAAI,CAAC;QAO9C;;;;WAIG;QACc,oBAAe,GAAiB,YAAY,CAAC,UAAU,CAAC;KA8OzE;IA5OA;;OAEG;IAEH,oBAAoB,CAAC,QAAgB;QACpC,MAAM,aAAa,GAAuB,CAAC,IAAI,EAAE,IAAI,EAAE,IAAI,CAAC,CAAC;QAE7D,oDAAoD;QACpD,MAAM,OAAO,GAAG,yBAAyB,CAAC,QAAQ,EAAE,aAAa,CAAC,CAAC;QAEnE,IAAI,CAAC,OAAO,EAAE,CAAC;YACd,MAAM,OAAO,GAAG,IAAI,mBAAmB,EAAE,CAAC;YAC1C,OAAO;iBACL,kBAAkB,EAAE;iBACpB,gBAAgB,CAAC,gBAAgB,CAAC;iBAClC,cAAc,CAAC,IAAI,CAAC;iBACpB,gBAAgB,CAAC,kBAAkB,CAAC;iBACpC,cAAc,CAAC,oCAAoC,CAAC;iBACpD,gBAAgB,CAAC,aAAa,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;iBAC1C,cAAc,CAAC,oCAAoC,CAAC;iBACpD,gBAAgB,CAAC,IAAI,CAAC;iBACtB,cAAc,CAAC,cAAc,CAAC;iBAC9B,YAAY,EAAE,CAAC;YAEjB,IAAI,CAAC,YAAY,GAAG,IAAI,CAAC;QAC1B,CAAC;IACF,CAAC;IAED;;;;;OAKG;IAEK,aAAa;QACpB,IAAI,IAAI,CAAC,QAAQ,EAAE,CAAC;YACnB,MAAM,cAAc,GAAG,uBAAuB,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC;YAC9D,IAAI,CAAC,gBAAgB,GAAG,cAAc,CAAC;QACxC,CAAC;IACF,CAAC;IAED;;OAEG;IAEH,kBAAkB,CAAC,QAAsB;QACxC,MAAM,aAAa,GAAG,MAAM,CAAC,MAAM,CAAC,YAAY,CAAC,CAAC;QAClD,MAAM,aAAa,GAAG,aAAa,CAAC,QAAQ,CAAC,QAAQ,CAAC,CAAC;QAEvD,IAAI,aAAa,EAAE,CAAC;YACnB,IAAI,CAAC,eAAe,GAAG,QAAQ,CAAC;QACjC,CAAC;aAAM,CAAC;YACP,8DAA8D;YAC9D,IAAI,CAAC,eAAe,GAAG,IAAI,CAAC,2BAA2B,EAAE,CAAC;QAC3D,CAAC;QAED,0CAA0C;QAC1C,IAAI,CAAC,EAAE,CAAC,YAAY,CAAC,kBAAkB,EAAE,IAAI,CAAC,eAAe,CAAC,CAAC;IAChE,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,KAA4B;QACvD,IAAI,CAAC,QAAQ,GAAG,gBAAgB,CAAC,KAAK,CAAC,CAAC;IACzC,CAAC;IAED;;;;OAIG;IACK,cAAc;QACrB,OAAO,iBAAiB,CAAC,IAAI,CAAC,eAAe,CAAC,IAAI,MAAM,CAAC;IAC1D,CAAC;IAED;;OAEG;IACK,uBAAuB;QAC9B,MAAM,gBAAgB,GAAG,gBAAgB,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC;QACzD,OAAO,YAAY,CAAC,UAAU,CAAC,IAAI,CAAC,eAAe,CAAC,CAAC,gBAAgB,CAAC,CAAC;IACxE,CAAC;IAED;;OAEG;IACK,cAAc;QACrB,IAAI,IAAI,CAAC,gBAAgB,EAAE,CAAC;YAC3B,OAAO,CACN,yBACC,IAAI,EAAE,IAAI,CAAC,gBAAgB,CAAC,IAAI,EAChC,eAAe,EAAE,IAAI,CAAC,gBAAgB,CAAC,eAAe,EACtD,SAAS,EAAE,cAAc,IAAI,CAAC,MAAM,EAAE,EACtC,GAAG,EAAE,CAAC,EAAE,EAAE,EAAE,CAAC,CAAC,IAAI,CAAC,WAAW,GAAG,EAAE,CAAC,GAChB,CACrB,CAAC;QACH,CAAC;QACD,OAAO,IAAI,CAAC;IACb,CAAC;IAED;;OAEG;IACK,QAAQ;QACf,OAAO,CAAC,qBAAqB,EAAE,IAAI,CAAC,QAAQ,IAAI,+BAA+B,CAAC,CAAC,MAAM,CAAC,OAAO,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;IAC5G,CAAC;IAED;;;;;;;;OAQG;IACK,2BAA2B;QAClC,MAAM,aAAa,GAAG,MAAM,CAAC,MAAM,CAAC,YAAY,CAAC,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;QAC7D,MAAM,OAAO,GAAG,IAAI,mBAAmB,EAAE,CAAC;QAC1C,OAAO;aACL,kBAAkB,EAAE;aACpB,gBAAgB,CAAC,cAAc,CAAC;aAChC,cAAc,CAAC,IAAI,CAAC;aACpB,gBAAgB,CAAC,kBAAkB,CAAC;aACpC,cAAc,CAAC,yCAAyC,CAAC;aACzD,gBAAgB,CAAC,aAAa,CAAC;aAC/B,cAAc,CAAC,yCAAyC,CAAC;aACzD,gBAAgB,CAAC,YAAY,CAAC,UAAU,CAAC;aACzC,cAAc,CAAC,cAAc,CAAC;aAC9B,YAAY,EAAE,CAAC;QACjB,OAAO,YAAY,CAAC,UAAU,CAAC;IAChC,CAAC;IAED;;;;;OAKG;IACK,iBAAiB;QACxB,MAAM,YAAY,GAAQ;YACzB,EAAE,EAAE,eAAe,IAAI,CAAC,MAAM,EAAE;YAChC,KAAK,EAAE,IAAI,CAAC,QAAQ,EAAE;SACtB,CAAC;QAEF,OAAO,CACN,WAAK,KAAK,EAAC,uBAAuB;YAChC,CAAC,CAAC,IAAI,CAAC,YAAY,EAAE,YAAY,EAAE,IAAI,CAAC,KAAK,CAAC;YAC9C,IAAI,CAAC,eAAe,IAAI,CACxB,qBACC,KAAK,EAAC,qBAAqB,EAC3B,IAAI,EAAC,QAAQ,gBACD,GACX,YAAY,CAAC,UAAU,CAAC,UAAU,CAAC,gBAAgB,CAAC,IAAI,CAAC,QAAQ,CAAC,CACnE,IAAI,IAAI,CAAC,uBAAuB,EAAE,KAAK,IAAI,CAAC,eAAe,GAAG,EAC9D,MAAM,EAAE,IAAI,CAAC,cAAc,EAAE,IAE5B,IAAI,CAAC,uBAAuB,EAAE,CAChB,CAChB,CACI,CACN,CAAC;IACH,CAAC;IAED;;;OAGG;IACH,KAAK,CAAC,gBAAgB;QACrB,IAAI,IAAI,CAAC,WAAW,EAAE,CAAC;YACtB,IAAI,UAAU,GAAG,IAAI,CAAC,WAAW,CAAC,SAAS,CAAC;YAE5C,IAAI,CAAC,UAAU,EAAE,CAAC;gBACjB,UAAU,GAAG,cAAc,IAAI,CAAC,MAAM,EAAE,CAAC;gBACzC,IAAI,CAAC,WAAW,CAAC,SAAS,GAAG,UAAU,CAAC;YACzC,CAAC;QACF,CAAC;IACF,CAAC;IAED;;;OAGG;IACH,KAAK,CAAC,iBAAiB;QACtB,IAAI,CAAC,aAAa,EAAE,CAAC;QACrB,IAAI,CAAC,QAAQ,GAAG,gBAAgB,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC;QAChD,IAAI,CAAC,oBAAoB,CAAC,IAAI,CAAC,YAAY,CAAC,CAAC;QAE7C,2DAA2D;QAC3D,IAAI,CAAC,kBAAkB,CAAC,IAAI,CAAC,UAAU,CAAC,CAAC;IAC1C,CAAC;IAED,MAAM;QACL,MAAM,YAAY,GAAG,IAAI,CAAC,IAAI,IAAI,CAAC,IAAI,CAAC,cAAc,CAAC;QACvD,MAAM,eAAe,GAAG,wBAAwB,IAAI,CAAC,eAAe,CAAC,OAAO,CAAC,iBAAiB,EAAE,OAAO,CAAC,CAAC,WAAW,EAAE,EAAE,CAAC;QACzH,MAAM,WAAW,GAAG,IAAI,CAAC,gBAAgB,CAAC,CAAC,CAAC,cAAc,IAAI,CAAC,MAAM,EAAE,CAAC,CAAC,CAAC,SAAS,CAAC;QAEpF,MAAM,WAAW,GAAG,CACnB,EAAC,QAAQ;YACP,IAAI,CAAC,iBAAiB,EAAE;YACxB,IAAI,CAAC,cAAc,EAAE,CACZ,CACX,CAAC;QAEF,OAAO,CACN,2DACC,KAAK,EAAE,gBAAgB,eAAe,EAAE,EACxC,IAAI,EAAC,OAAO,qBACK,eAAe,IAAI,CAAC,MAAM,EAAE,sBAC3B,IAAI,CAAC,eAAe,sBACpB,WAAW,IAE5B,YAAY,CAAC,CAAC,CAAC,CACf,SAAG,IAAI,EAAE,IAAI,CAAC,IAAI,EAAE,KAAK,EAAC,oBAAoB,gBAAa,IAAI,CAAC,KAAK,IACnE,WAAW,CACT,CACJ,CAAC,CAAC,CAAC,CACH,eAAM,WAAW,CAAO,CACxB,CACG,CACL,CAAC;IACH,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACD","sourcesContent":["import { h, Component, Prop, Watch, State, Listen, Element, Fragment } from '@stencil/core';\nimport { ConsoleMessageClass } from '../../utils/console-message/console-message';\nimport { TaskStatuses, TaskBadgeColour, TaskToBadgeColour } from '../../utils/common/task-statuses.enum';\nimport { validateLanguage, validateValueAgainstArray } from '../../utils/validation/validation-functions';\nimport { Hint } from '../../utils/common/common.interface';\nimport { Language } from '../../utils/common/language-types';\nimport { constructHintTextObject } from '../../utils/components/hints/hints';\nimport translations from '../../translations/global.i18n.json';\nimport { HeadingLevel } from '../../utils/common/common.interface';\nexport type TaskHeadingLevel = Extract<HeadingLevel, 'h2' \| 'h3' \| 'h4'>;\n\n@Component({\n\ttag: 'ontario-task',\n\tstyleUrl: 'ontario-task.scss',\n\tshadow: true,\n})\nexport class OntarioTask {\n\t@Element() el: HTMLElement;\n\n\t// Reference to the ontario-hint-text element for this task.\n\thintTextRef?: HTMLOntarioHintTextElement \| undefined;\n\n\t/*\n\t Specifies the label of the task.\n\t \n\t This is required to provide the name of the task.\n\t /\n\t@Prop() label: string;\n\n\t/\n\t A unique id for the task.\n\t \n\t This is required.\n\t /\n\t@Prop() taskId: string;\n\n\t/\n\t Specifies an optional link associated with the task.\n\t \n\t If provided, clicking the task will navigate to this URL.\n\t /\n\t@Prop() link?: string;\n\n\t/\n\t Disables the task link when set to `true`.\n\t \n\t Default is `false`, meaning the link will be active if provided.\n\t /\n\t@Prop() deactivateLink: boolean = false;\n\n\t/\n\t The language of the component.\n\t \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/\n\t Used to include the ontario-hint-text component for the task.\n\t \n\t This is optional.\n\t /\n\t@Prop({ mutable: true }) hintText?: string \| Hint;\n\n\t/\n\t Defines the status of the task, with default set to 'NotStarted'.\n\t \n\t Accepts values from `TaskStatuses` enum: `NotStarted`, `InProgress`, `Completed`.\n\t /\n\t/\n\t Defines the status of the task, with default set to 'NotStarted'.\n\t \n\t Accepts values from `TaskStatuses` enum: `NotStarted`, `InProgress`, `Completed`, etc.\n\t /\n\t@Prop() taskStatus: TaskStatuses = TaskStatuses.NotStarted;\n\n\t/\n\t Allows consumers to define the heading level for the task label.\n\t \n\t Accepts 'h2', 'h3' or 'h4'. Default is 'h3'.\n\t /\n\t@Prop() headingLevel: TaskHeadingLevel = 'h3';\n\n\t/\n\t The hint text options are re-assigned to the internalHintText state.\n\t /\n\t@State() private internalHintText: Hint;\n\n\t/\n\t Mutable variable, for internal use only.\n\t \n\t Set the task's status state depending on validation result.\n\t /\n\t@State() private taskStatusState: TaskStatuses = TaskStatuses.NotStarted;\n\n\t/\n\t Watch for changes in `headingLevel` prop to validate its value.\n\t /\n\t@Watch('headingLevel')\n\tvalidateHeadingLevel(newValue: string) {\n\t\tconst allowedValues: TaskHeadingLevel[] = ['h2', 'h3', 'h4'];\n\n\t\t// Validate the new value against the allowed values\n\t\tconst isValid = validateValueAgainstArray(newValue, allowedValues);\n\n\t\tif (!isValid) {\n\t\t\tconst message = new ConsoleMessageClass();\n\t\t\tmessage\n\t\t\t\t.addDesignSystemTag()\n\t\t\t\t.addMonospaceText(' headingLevel ')\n\t\t\t\t.addRegularText('on')\n\t\t\t\t.addMonospaceText(' <ontario-task> ')\n\t\t\t\t.addRegularText('was set to an invalid value; only ')\n\t\t\t\t.addMonospaceText(allowedValues.join(', '))\n\t\t\t\t.addRegularText(' are supported. The default value ')\n\t\t\t\t.addMonospaceText('h3')\n\t\t\t\t.addRegularText(' is assumed.')\n\t\t\t\t.printMessage();\n\n\t\t\tthis.headingLevel = 'h3';\n\t\t}\n\t}\n\n\t/\n\t Watch for changes in `hintText` prop and parse it if available.\n\t \n\t If a `hintText` prop is passed, the `constructHintTextObject` function will convert it to the correct format,\n\t * and the result will be stored in the `internalHintText` state.\n\t /\n\t@Watch('hintText')\n\tprivate parseHintText() {\n\t\tif (this.hintText) {\n\t\t\tconst hintTextObject = constructHintTextObject(this.hintText);\n\t\t\tthis.internalHintText = hintTextObject;\n\t\t}\n\t}\n\n\t/\n\t Watch for changes in `taskStatus` prop to validate its value.\n\t /\n\t@Watch('taskStatus')\n\tvalidateTaskStatus(newValue: TaskStatuses) {\n\t\tconst validStatuses = Object.values(TaskStatuses);\n\t\tconst isValidStatus = validStatuses.includes(newValue);\n\n\t\tif (isValidStatus) {\n\t\t\tthis.taskStatusState = newValue;\n\t\t} else {\n\t\t\t// If the status is invalid, log a warning and use the default\n\t\t\tthis.taskStatusState = this.warnAndGetDefaultTaskStatus();\n\t\t}\n\n\t\t// Update the `data-task-status` attribute\n\t\tthis.el.setAttribute('data-task-status', this.taskStatusState);\n\t}\n\n\t/\n\t Listen for app language settings on the window to update the component language.\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 This listens for the `headerLanguageToggled` event sent from the language toggle when it is connected to the DOM.\n\t * It is used for changing the component language after the language toggle has been activated.\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 Determines the badge colour based on the current `taskStatusState`.\n\t \n\t @returns {TaskBadgeColour}\n\t /\n\tprivate getBadgeColour(): TaskBadgeColour {\n\t\treturn TaskToBadgeColour[this.taskStatusState] \|\| 'grey';\n\t}\n\n\t/\n\t Provides a translated task status string based on the current language.\n\t /\n\tprivate getTranslatedTaskStatus(): string {\n\t\tconst resolvedLanguage = validateLanguage(this.language);\n\t\treturn translations.taskStatus[this.taskStatusState][resolvedLanguage];\n\t}\n\n\t/\n\t Renders hint text if available.\n\t /\n\tprivate renderHintText() {\n\t\tif (this.internalHintText) {\n\t\t\treturn (\n\t\t\t\t<ontario-hint-text\n\t\t\t\t\thint={this.internalHintText.hint}\n\t\t\t\t\thintContentType={this.internalHintText.hintContentType}\n\t\t\t\t\telementId={`hint-text--${this.taskId}`}\n\t\t\t\t\tref={(el) => (this.hintTextRef = el)}\n\t\t\t\t></ontario-hint-text>\n\t\t\t);\n\t\t}\n\t\treturn null;\n\t}\n\n\t/\n\t Returns the class name(s) for the task label.\n\t /\n\tprivate getClass(): string {\n\t\treturn ['ontario-task__label', this.hintText && 'ontario-task__hint-text--true'].filter(Boolean).join(' ');\n\t}\n\n\t/\n\t Logs a warning to the console if the `taskStatus` prop is set to an invalid value.\n\t \n\t This function informs developers that the provided `taskStatus` is not recognized\n\t * and resets the status to the default value of `'notStarted'`. The warning message\n\t * specifies the valid task statuses to help guide correct usage.\n\t \n\t @returns The default task status `'notStarted'`.\n\t /\n\tprivate warnAndGetDefaultTaskStatus(): TaskStatuses {\n\t\tconst validStatuses = Object.values(TaskStatuses).join(', ');\n\t\tconst message = new ConsoleMessageClass();\n\t\tmessage\n\t\t\t.addDesignSystemTag()\n\t\t\t.addMonospaceText(' taskStatus ')\n\t\t\t.addRegularText('on')\n\t\t\t.addMonospaceText(' <ontario-task> ')\n\t\t\t.addRegularText('was set to an invalid taskStatus; only ')\n\t\t\t.addMonospaceText(validStatuses)\n\t\t\t.addRegularText(' are supported. The default taskStatus ')\n\t\t\t.addMonospaceText(TaskStatuses.NotStarted)\n\t\t\t.addRegularText(' is assumed.')\n\t\t\t.printMessage();\n\t\treturn TaskStatuses.NotStarted;\n\t}\n\n\t/\n\t Renders the task label and status content.\n\t \n\t This includes dynamically rendering the heading element (h2, h3, or h4) based on the `headingLevel` prop,\n\t * as well as the badge indicating the task status.\n\t /\n\tprivate renderTaskContent() {\n\t\tconst headingProps: any = {\n\t\t\tid: `task-label--${this.taskId}`,\n\t\t\tclass: this.getClass(),\n\t\t};\n\n\t\treturn (\n\t\t\t<div class=\"ontario-task__content\">\n\t\t\t\t{h(this.headingLevel, headingProps, this.label)}\n\t\t\t\t{this.taskStatusState && (\n\t\t\t\t\t<ontario-badge\n\t\t\t\t\t\tclass=\"ontario-task__badge\"\n\t\t\t\t\t\trole=\"status\"\n\t\t\t\t\t\taria-label={`${\n\t\t\t\t\t\t\ttranslations.taskStatus.taskStatus[validateLanguage(this.language)]\n\t\t\t\t\t\t} ${this.getTranslatedTaskStatus()} (${this.taskStatusState})`}\n\t\t\t\t\t\tcolour={this.getBadgeColour()}\n\t\t\t\t\t>\n\t\t\t\t\t\t{this.getTranslatedTaskStatus()}\n\t\t\t\t\t</ontario-badge>\n\t\t\t\t)}\n\t\t\t</div>\n\t\t);\n\t}\n\n\t/\n\t After the component loads, retrieve the hint text ID (if available) from the hintText component,\n\t * and set it for the `aria-describedby` attribute.\n\t /\n\tasync componentDidLoad() {\n\t\tif (this.hintTextRef) {\n\t\t\tlet hintTextId = this.hintTextRef.elementId;\n\n\t\t\tif (!hintTextId) {\n\t\t\t\thintTextId = `hint-text--${this.taskId}`;\n\t\t\t\tthis.hintTextRef.elementId = hintTextId;\n\t\t\t}\n\t\t}\n\t}\n\n\t/\n\t Lifecycle method: before the component loads, parse the hint text and\n\t * validate language and task status and heading level.\n\t */\n\tasync componentWillLoad() {\n\t\tthis.parseHintText();\n\t\tthis.language = validateLanguage(this.language);\n\t\tthis.validateHeadingLevel(this.headingLevel);\n\n\t\t// Ensure the taskStatus is set initially based on the prop\n\t\tthis.validateTaskStatus(this.taskStatus);\n\t}\n\n\trender() {\n\t\tconst isLinkActive = this.link && !this.deactivateLink;\n\t\tconst taskStatusClass = `ontario-task-status--${this.taskStatusState.replace(/([a-z])([A-Z])/g, '$1-$2').toLowerCase()}`;\n\t\tconst describedBy = this.internalHintText ? `hint-text--${this.taskId}` : undefined;\n\n\t\tconst taskContent = (\n\t\t\t<Fragment>\n\t\t\t\t{this.renderTaskContent()}\n\t\t\t\t{this.renderHintText()}\n\t\t\t</Fragment>\n\t\t);\n\n\t\treturn (\n\t\t\t<li\n\t\t\t\tclass={`ontario-task ${taskStatusClass}`}\n\t\t\t\trole=\"group\"\n\t\t\t\taria-labelledby={`task-label--${this.taskId}`}\n\t\t\t\tdata-task-status={this.taskStatusState}\n\t\t\t\taria-describedby={describedBy}\n\t\t\t>\n\t\t\t\t{isLinkActive ? (\n\t\t\t\t\t<a href={this.link} class=\"ontario-task__link\" aria-label={this.label}>\n\t\t\t\t\t\t{taskContent}\n\t\t\t\t\t</a>\n\t\t\t\t) : (\n\t\t\t\t\t<div>{taskContent}</div>\n\t\t\t\t)}\n\t\t\t</li>\n\t\t);\n\t}\n}\n"]}
1	+ {"version":3,"file":"ontario-task.js","sourceRoot":"","sources":["../../../src/components/ontario-task/ontario-task.tsx"],"names":[],"mappings":"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","sourcesContent":["import { h, Component, Prop, Watch, State, Listen, Element } from '@stencil/core';\nimport { ConsoleMessageClass } from '../../utils/console-message/console-message';\nimport { TaskStatuses, TaskBadgeColour, TaskToBadgeColour } from '../../utils/common/task-statuses.enum';\nimport { validateLanguage, validateValueAgainstArray } from '../../utils/validation/validation-functions';\nimport { Hint } from '../../utils/common/common.interface';\nimport { Language } from '../../utils/common/language-types';\nimport { constructHintTextObject } from '../../utils/components/hints/hints';\nimport translations from '../../translations/global.i18n.json';\nimport { HeadingLevel } from '../../utils/common/common.interface';\nimport { HeaderLanguageToggleEventDetails } from '../../utils/events/common-events.interface';\nexport type TaskHeadingLevel = Extract<HeadingLevel, 'h2' \| 'h3' \| 'h4'>;\n\n@Component({\n\ttag: 'ontario-task',\n\tstyleUrl: 'ontario-task.scss',\n\tshadow: true,\n})\nexport class OntarioTask {\n\t@Element() el: HTMLElement;\n\n\t// Reference to the ontario-hint-text element for this task.\n\thintTextRef?: HTMLOntarioHintTextElement \| undefined;\n\n\t/*\n\t Specifies the label of the task.\n\t \n\t This is required to provide the name of the task.\n\t /\n\t@Prop() label: string;\n\n\t/\n\t A unique id for the task.\n\t \n\t This is required.\n\t /\n\t@Prop() taskId: string;\n\n\t/\n\t Specifies an optional link associated with the task.\n\t \n\t If provided, clicking the task will navigate to this URL.\n\t /\n\t@Prop() link?: string;\n\n\t/\n\t Disables the task link when set to `true`.\n\t \n\t Default is `false`, meaning the link will be active if provided.\n\t /\n\t@Prop() deactivateLink: boolean = false;\n\n\t/\n\t The language of the component.\n\t \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/\n\t Used to include the ontario-hint-text component for the task.\n\t \n\t This is optional.\n\t /\n\t@Prop({ mutable: true }) hintText?: string \| Hint;\n\n\t/\n\t Defines the status of the task, with default set to 'NotStarted'.\n\t \n\t Accepts values from `TaskStatuses` enum: `NotStarted`, `InProgress`, `Completed`.\n\t /\n\t/\n\t Defines the status of the task, with default set to 'NotStarted'.\n\t \n\t Accepts values from `TaskStatuses` enum: `NotStarted`, `InProgress`, `Completed`, etc.\n\t /\n\t@Prop() taskStatus: TaskStatuses = TaskStatuses.NotStarted;\n\n\t/\n\t Allows consumers to define the heading level for the task label.\n\t \n\t Accepts 'h2', 'h3' or 'h4'. Default is 'h3'.\n\t /\n\t@Prop() headingLevel: TaskHeadingLevel = 'h3';\n\n\t/\n\t The hint text options are re-assigned to the internalHintText state.\n\t /\n\t@State() private internalHintText: Hint;\n\n\t/\n\t Mutable variable, for internal use only.\n\t \n\t Set the task's status state depending on validation result.\n\t /\n\t@State() private taskStatusState: TaskStatuses = TaskStatuses.NotStarted;\n\n\t/\n\t Watch for changes in `headingLevel` prop to validate its value.\n\t /\n\t@Watch('headingLevel')\n\tvalidateHeadingLevel(newValue: string) {\n\t\tconst allowedValues: TaskHeadingLevel[] = ['h2', 'h3', 'h4'];\n\n\t\t// Validate the new value against the allowed values\n\t\tconst isValid = validateValueAgainstArray(newValue, allowedValues);\n\n\t\tif (!isValid) {\n\t\t\tconst message = new ConsoleMessageClass();\n\t\t\tmessage\n\t\t\t\t.addDesignSystemTag()\n\t\t\t\t.addMonospaceText(' headingLevel ')\n\t\t\t\t.addRegularText('on')\n\t\t\t\t.addMonospaceText(' <ontario-task> ')\n\t\t\t\t.addRegularText('was set to an invalid value; only ')\n\t\t\t\t.addMonospaceText(allowedValues.join(', '))\n\t\t\t\t.addRegularText(' are supported. The default value ')\n\t\t\t\t.addMonospaceText('h3')\n\t\t\t\t.addRegularText(' is assumed.')\n\t\t\t\t.printMessage();\n\n\t\t\tthis.headingLevel = 'h3';\n\t\t}\n\t}\n\n\t/\n\t Watch for changes in `hintText` prop and parse it if available.\n\t \n\t If a `hintText` prop is passed, the `constructHintTextObject` function will convert it to the correct format,\n\t * and the result will be stored in the `internalHintText` state.\n\t /\n\t@Watch('hintText')\n\tprivate parseHintText() {\n\t\tif (this.hintText) {\n\t\t\tconst hintTextObject = constructHintTextObject(this.hintText);\n\t\t\tthis.internalHintText = hintTextObject;\n\t\t}\n\t}\n\n\t/\n\t Watch for changes in `taskStatus` prop to validate its value.\n\t /\n\t@Watch('taskStatus')\n\tvalidateTaskStatus(newValue: TaskStatuses) {\n\t\tconst validStatuses = Object.values(TaskStatuses);\n\t\tconst isValidStatus = validStatuses.includes(newValue);\n\n\t\tif (isValidStatus) {\n\t\t\tthis.taskStatusState = newValue;\n\t\t} else {\n\t\t\t// If the status is invalid, log a warning and use the default\n\t\t\tthis.taskStatusState = this.warnAndGetDefaultTaskStatus();\n\t\t}\n\n\t\t// Update the `data-task-status` attribute\n\t\tthis.el.setAttribute('data-task-status', this.taskStatusState);\n\t}\n\n\t/\n\t Listen for app language settings on the window to update the component language.\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 Determines the badge colour based on the current `taskStatusState`.\n\t \n\t @returns {TaskBadgeColour}\n\t /\n\tprivate getBadgeColour(): TaskBadgeColour {\n\t\treturn TaskToBadgeColour[this.taskStatusState] \|\| 'grey';\n\t}\n\n\t/\n\t Provides a translated task status string based on the current language.\n\t /\n\tprivate getTranslatedTaskStatus(): string {\n\t\tconst resolvedLanguage = validateLanguage(this.language);\n\t\treturn translations.taskStatus[this.taskStatusState][resolvedLanguage];\n\t}\n\n\t/\n\t Renders hint text if available.\n\t /\n\tprivate renderHintText() {\n\t\tif (this.internalHintText) {\n\t\t\treturn (\n\t\t\t\t<ontario-hint-text\n\t\t\t\t\thint={this.internalHintText.hint}\n\t\t\t\t\thintContentType={this.internalHintText.hintContentType}\n\t\t\t\t\telementId={`hint-text--${this.taskId}`}\n\t\t\t\t\tref={(el) => (this.hintTextRef = el)}\n\t\t\t\t></ontario-hint-text>\n\t\t\t);\n\t\t}\n\t\treturn null;\n\t}\n\n\t/\n\t Returns the class name(s) for the task label.\n\t /\n\tprivate getClass(): string {\n\t\treturn ['ontario-task__label', this.hintText && 'ontario-task__hint-text--true'].filter(Boolean).join(' ');\n\t}\n\n\t/\n\t Logs a warning to the console if the `taskStatus` prop is set to an invalid value.\n\t \n\t This function informs developers that the provided `taskStatus` is not recognized\n\t * and resets the status to the default value of `'notStarted'`. The warning message\n\t * specifies the valid task statuses to help guide correct usage.\n\t \n\t @returns The default task status `'notStarted'`.\n\t /\n\tprivate warnAndGetDefaultTaskStatus(): TaskStatuses {\n\t\tconst validStatuses = Object.values(TaskStatuses).join(', ');\n\t\tconst message = new ConsoleMessageClass();\n\t\tmessage\n\t\t\t.addDesignSystemTag()\n\t\t\t.addMonospaceText(' taskStatus ')\n\t\t\t.addRegularText('on')\n\t\t\t.addMonospaceText(' <ontario-task> ')\n\t\t\t.addRegularText('was set to an invalid taskStatus; only ')\n\t\t\t.addMonospaceText(validStatuses)\n\t\t\t.addRegularText(' are supported. The default taskStatus ')\n\t\t\t.addMonospaceText(TaskStatuses.NotStarted)\n\t\t\t.addRegularText(' is assumed.')\n\t\t\t.printMessage();\n\t\treturn TaskStatuses.NotStarted;\n\t}\n\n\t/\n\t Renders the task label and status content.\n\t \n\t This includes dynamically rendering the heading element (h2, h3, or h4) based on the `headingLevel` prop,\n\t * as well as the badge indicating the task status.\n\t /\n\tprivate renderTaskContent() {\n\t\tconst headingProps: any = {\n\t\t\tid: `task-label--${this.taskId}`,\n\t\t\tclass: this.getClass(),\n\t\t};\n\n\t\treturn (\n\t\t\t<div class=\"ontario-task__content\">\n\t\t\t\t<div class=\"ontario-task__text\">\n\t\t\t\t\t{h(this.headingLevel, headingProps, this.label)}\n\t\t\t\t\t{this.renderHintText()}\n\t\t\t\t</div>\n\t\t\t\t{this.taskStatusState && (\n\t\t\t\t\t<ontario-badge\n\t\t\t\t\t\tclass=\"ontario-task__badge\"\n\t\t\t\t\t\trole=\"status\"\n\t\t\t\t\t\taria-label={`${\n\t\t\t\t\t\t\ttranslations.taskStatus.taskStatus[validateLanguage(this.language)]\n\t\t\t\t\t\t} ${this.getTranslatedTaskStatus()} (${this.taskStatusState})`}\n\t\t\t\t\t\tcolour={this.getBadgeColour()}\n\t\t\t\t\t>\n\t\t\t\t\t\t{this.getTranslatedTaskStatus()}\n\t\t\t\t\t</ontario-badge>\n\t\t\t\t)}\n\t\t\t</div>\n\t\t);\n\t}\n\t/\n\t After the component loads, retrieve the hint text ID (if available) from the hintText component,\n\t * and set it for the `aria-describedby` attribute.\n\t /\n\tasync componentDidLoad() {\n\t\tif (this.hintTextRef) {\n\t\t\tlet hintTextId = this.hintTextRef.elementId;\n\n\t\t\tif (!hintTextId) {\n\t\t\t\thintTextId = `hint-text--${this.taskId}`;\n\t\t\t\tthis.hintTextRef.elementId = hintTextId;\n\t\t\t}\n\t\t}\n\t}\n\n\t/\n\t Lifecycle method: before the component loads, parse the hint text and\n\t * validate language and task status and heading level.\n\t */\n\tasync componentWillLoad() {\n\t\tthis.parseHintText();\n\t\tthis.language = validateLanguage(this.language);\n\t\tthis.validateHeadingLevel(this.headingLevel);\n\n\t\t// Ensure the taskStatus is set initially based on the prop\n\t\tthis.validateTaskStatus(this.taskStatus);\n\t}\n\n\trender() {\n\t\tconst isLinkActive = this.link && !this.deactivateLink;\n\t\tconst taskStatusClass = `ontario-task-status--${this.taskStatusState.replace(/([a-z])([A-Z])/g, '$1-$2').toLowerCase()}`;\n\t\tconst describedBy = this.internalHintText ? `hint-text--${this.taskId}` : undefined;\n\n\t\treturn (\n\t\t\t<li\n\t\t\t\tclass={`ontario-task ${taskStatusClass}`}\n\t\t\t\trole=\"group\"\n\t\t\t\taria-labelledby={`task-label--${this.taskId}`}\n\t\t\t\tdata-task-status={this.taskStatusState}\n\t\t\t\taria-describedby={describedBy}\n\t\t\t>\n\t\t\t\t{isLinkActive ? (\n\t\t\t\t\t<a href={this.link} class=\"ontario-task__link\" aria-label={this.label}>\n\t\t\t\t\t\t{this.renderTaskContent()}\n\t\t\t\t\t</a>\n\t\t\t\t) : (\n\t\t\t\t\t<div>{this.renderTaskContent()}</div>\n\t\t\t\t)}\n\t\t\t</li>\n\t\t);\n\t}\n}\n"]}

package/dist/collection/components/ontario-task-list/ontario-task-list.css CHANGED Viewed

@@ -31,6 +31,7 @@
 .ontario-task-list {
 	border-top: 0.125rem solid #cccccc;
 	padding: 0;
+	margin: 0 0.5rem;
 }
 .ontario-task-list__item {

package/dist/collection/components/ontario-task-list/ontario-task-list.js CHANGED Viewed

@@ -115,12 +115,12 @@ export class OntarioTaskList {
 		};
 		return h(
 			'div',
-			{ key: 'fb26534c596025f0bbbf729d923210760e31ff60', class: 'ontario-task-list__container' },
+			{ key: 'a389053e03a8d52095e0a04f2600d4d901ede22b', class: 'ontario-task-list__container' },
 			h(this.headingLevel, headingProps, this.label),
 			h(
 				'p',
 				{
-					'key': '8344876cd43f5b4c06685a41d0f49a55817cb1ee',
+					'key': '042d4bdcb20ea407a5447ce39086bc1bfae79697',
 					'class': 'ontario-task-list__completion-text',
 					'aria-live': 'polite',
 				},
@@ -136,8 +136,8 @@ export class OntarioTaskList {
 			),
 			h(
 				'ul',
-				{ key: '42962ee4027bf4df1309ef409106e040f98c5fd2', class: 'ontario-task-list', role: 'list' },
-				h('slot', { key: 'd226bd26241b20557f13a0acdb161ae474c915e1' }),
+				{ key: 'bbb9b7ce952f9c83cc090b504f87e5253bde8368', class: 'ontario-task-list', role: 'list' },
+				h('slot', { key: '4337d382dcc73690ef4b9cb98a3ed69972f9e20e' }),
 			),
 		);
 	}