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

package/components/ontario-table.js

@@ -0,0 +1,392 @@
+import { p as proxyCustomElement, H, h, getAssetPath } from './index.js';
+import { C as ConsoleMessageClass, a as ConsoleType } from './p-Cdm-Ot0O.js';
+import {
+	m as minimumGridColumns,
+	a as maximumGridColumns,
+	e as extractValuesByKey,
+	o as organizeObjectKeys,
+	b as removeObjectsBySpecificKey,
+} from './p-DIe1tcOp.js';
+
+function validateTableColumns(columns) {
+	for (const column of columns) {
+		if (!column.title || !column.key) {
+			const message = new ConsoleMessageClass();
+			message
+				.addDesignSystemTag()
+				.addRegularText(' The required keys for ')
+				.addMonospaceText('title')
+				.addRegularText(' and/or ')
+				.addMonospaceText('key')
+				.addRegularText(' in the ')
+				.addMonospaceText('<ontario-table> tableColumns')
+				.addRegularText(' options were not provided. ')
+				.printMessage(ConsoleType.Error);
+			return false; // Required keys are missing
+		}
+		if (column.type && column.type !== 'string' && column.type !== 'numeric') {
+			const message = new ConsoleMessageClass();
+			message
+				.addDesignSystemTag()
+				.addRegularText(' The ')
+				.addMonospaceText('type')
+				.addRegularText(' key in the ')
+				.addMonospaceText('<ontario-table> tableColumns')
+				.addRegularText(' options is not a valid type. A default type of `string` will be applied.')
+				.printMessage();
+			return false; // Invalid type for 'type' key
+		}
+		if (column.colSpan && !(column.colSpan >= minimumGridColumns && column.colSpan <= maximumGridColumns)) {
+			const message = new ConsoleMessageClass();
+			message
+				.addDesignSystemTag()
+				.addRegularText(' The ')
+				.addMonospaceText('colSpan')
+				.addRegularText(' in the ')
+				.addMonospaceText('<ontario-table> tableColumns')
+				.addRegularText(' options is not a valid type. The default colSpan value will be applied.')
+				.printMessage();
+			return false; // Invalid value for 'colSpan' key
+		}
+	}
+	return true; // All validations passed
+}
+function validateTableRowOptions(options) {
+	for (const option of options) {
+		if (!option.data || Object.keys(option.data).length === 0) {
+			const message = new ConsoleMessageClass();
+			message
+				.addDesignSystemTag()
+				.addRegularText(' The required key for ')
+				.addMonospaceText('data')
+				.addRegularText(' in the ')
+				.addMonospaceText('<ontario-table> tableData')
+				.addRegularText(' options was not provided. ')
+				.printMessage(ConsoleType.Error);
+			return false; // Required key 'data' is missing
+		}
+	}
+	return true; // All validations passed
+}
+
+const ontarioTableCss =
+	'.ontario-table-container{position:relative;margin:0.5rem 0 2.5rem}.ontario-table-div{background:linear-gradient(to right, #FFFFFF 30%, rgba(255, 255, 255, 0)), linear-gradient(to right, rgba(255, 255, 255, 0), #FFFFFF 70%) 0 100%, linear-gradient(to right, rgba(0, 0, 0, 0.2) 0%, rgba(252, 0, 0, 0) 100.01%), linear-gradient(to left, rgba(0, 0, 0, 0.2) 0%, rgba(252, 0, 0, 0) 100.01%);background-repeat:no-repeat;background-size:2.5rem 100%, 2.5rem 100%, 0.875rem 100%, 0.875rem 100%;background-position:0 0, 100%, 0 0, 100%;background-attachment:local, local, scroll, scroll;overflow-x:auto}@media screen and (max-width: 40em){.ontario-table-div{overflow-x:scroll}}.ontario-table-scroll--wrapper{height:20px;overflow-x:auto;overflow-y:hidden;display:block}.ontario-table-container table{border-collapse:collapse;display:table;font-size:1.0625rem;font-weight:400;line-height:1.625rem}.ontario-table-container table.ontario-table--full-container-width{display:table;width:100%}.ontario-table-container table.ontario-table--zebra-stripes-enabled tbody tr:nth-child(even){background-color:rgba(0, 0, 0, 0.0509803922)}.ontario-table-container table:not(.ontario-table--no-zebra-stripes) tbody tr:first-child:nth-last-child(n+6):nth-child(even),.ontario-table-container table:not(.ontario-table--no-zebra-stripes) tbody tr:first-child:nth-last-child(n+6)~tr:nth-child(even){background-color:rgba(0, 0, 0, 0.0509803922)}@media screen and (max-width: 40em){.ontario-table-container table{font-size:1rem}}.ontario-table-container caption{background-color:rgba(0, 0, 0, 0.1019607843);display:table-caption;font-size:1.375rem;font-weight:700;line-height:2.1875rem;padding:1.125rem 1rem 1.125rem 1.5rem;text-align:left}@media screen and (max-width: 40em){.ontario-table-container caption{font-size:1.25rem;line-height:1.875rem;padding-left:1rem}}.ontario-table-container table thead{border:solid;border-width:0.1875rem 0;border-color:rgb(25.5, 25.5, 25.5);vertical-align:text-top}.ontario-table-container table thead th{font-size:1.125rem;line-height:1.5;margin:0;padding:1.75rem 1rem 1.75rem 1.5rem;text-align:left;text-size-adjust:none;-webkit-text-size-adjust:none}@media screen and (max-width: 40em){.ontario-table-container table thead th{font-size:1rem;line-height:1.3125rem;padding:1.5rem 0.5rem 1.5rem 1rem}}.ontario-table-container table thead th.ontario-table-cell--numeric{padding:1.75rem 1.5rem 1.75rem 1rem;text-align:right}@media screen and (max-width: 40em){.ontario-table-container table thead th.ontario-table-cell--numeric{padding:1.5rem 1rem 1.5rem 0.5rem}}.ontario-table-container table tbody{font-size:1rem;vertical-align:text-top}.ontario-table-container table tbody tr{border:solid;border-width:0.0625rem 0;border-color:rgba(0, 0, 0, 0.3019607843)}.ontario-table-container table tbody tr:last-child{border-width:0.1875rem 0;border-top-width:0;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}.ontario-table-container table tbody tr.ontario-table-row--highlight th{padding-left:1.5rem;display:flex;position:relative}.ontario-table-container table tbody tr.ontario-table-row--highlight th img.ontario-table--highlight-indicator{width:0.5rem;position:absolute;top:1.5rem;left:0}.ontario-table-container table tbody tr.ontario-table-row--subtotal{background-color:rgba(0, 123, 158, 0.1137254902) !important}.ontario-table-container tbody th,.ontario-table-container tfoot th,.ontario-table-container table td{padding:1.1875rem 1rem 1.1875rem 1.5rem;text-align:left;letter-spacing:0.025rem}.ontario-table-container tbody th,.ontario-table-container tfoot th{font-weight:700}@media screen and (max-width: 40em){.ontario-table-container tbody th,.ontario-table-container tfoot th{font-size:1rem;line-height:1.625rem;padding-right:0.5rem;padding-left:1rem}}.ontario-table-container table td img{vertical-align:top}@media screen and (max-width: 40em){.ontario-table-container table td img{max-width:none}}.ontario-table-container table td.ontario-table-cell--numeric{font-family:"Courier Prime", Courier, "Courier New", monospace;font-size:1.0625rem;padding:1.1875rem 1.5rem 1.1875rem 1rem;text-align:right}.ontario-table-container table td.ontario-table-cell--numeric strong{font-family:"Courier Prime", Courier, "Courier New", monospace}.ontario-table-container tbody tr.ontario-table-row--subtotal,.ontario-table-container tfoot tr{border:solid;border-width:0.1875rem 0;font-size:1rem;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{padding:1.4375rem 1rem 1.4375rem 1.5rem}.ontario-table-container tbody tr.ontario-table-row--subtotal td,.ontario-table-container tfoot tr td{font-weight:700;padding:1.4375rem 1rem 1.4375rem 1.5rem}.ontario-table-container tfoot{vertical-align:text-top}.ontario-table-container tfoot tr{background-color:rgba(0, 119, 160, 0.337254902) !important}.ontario-table-header--column-span-1{min-width:8.33333vw}.ontario-table-header--column-span-2{min-width:16.66666vw}.ontario-table-header--column-span-3{min-width:25vw}.ontario-table-header--column-span-4{min-width:33.33333vw}.ontario-table-header--column-span-5{min-width:41.66666vw}.ontario-table-header--column-span-6{min-width:50vw}.ontario-table-header--column-span-7{min-width:58.33333vw}.ontario-table-header--column-span-8{min-width:66.66666vw}.ontario-table-header--column-span-9{min-width:75vw}.ontario-table-header--column-span-10{min-width:83.33333vw}.ontario-table-header--column-span-11{min-width:91.66666vw}.ontario-table-header--column-span-12{min-width:100vw}.ontario-table-container .ontario-table--condensed td{padding:0.75rem 1rem 0.75rem 1.5rem;text-align:left}.ontario-table-container .ontario-table--condensed td.ontario-table-cell--numeric{padding:0.75rem 1.5rem 0.75rem 1rem;font-size:1.0625rem;text-align:right}.ontario-table-container .ontario-table--condensed tbody th,.ontario-table-container .ontario-table--condensed tfoot th{padding:0.75rem 1rem 0.75rem 1.5rem}.ontario-table-container .ontario-table--condensed tr.ontario-table-row--highlight th img.ontario-table--highlight-indicator{top:1.0625rem}.ontario-table-container .ontario-table--condensed tr.ontario-table-row--subtotal th,.ontario-table-container .ontario-table--condensed tr.ontario-table-row--subtotal td,.ontario-table-container .ontario-table--condensed tfoot tr th,.ontario-table-container .ontario-table--condensed tfoot tr td{padding:1rem 1rem 1rem 1.5rem}.ontario-table-container .ontario-table--condensed tr.ontario-table-row--subtotal td.ontario-table-cell--numeric,.ontario-table-container .ontario-table--condensed tfoot tr td.ontario-table-cell--numeric{text-align:right;padding:1rem 1.5rem 1rem 1rem}@media screen and (max-width: 40em){.ontario-table-container .ontario-table--condensed td{padding:0.75rem 0.5rem 0.75rem 1rem;font-size:1rem}.ontario-table-container .ontario-table--condensed td.ontario-table-cell--numeric{padding:0.75rem 1rem 0.75rem 0.5rem}.ontario-table-container .ontario-table--condensed tbody th{padding:0.75rem 0.5rem 0.75rem 1rem}.ontario-table-container .ontario-table--condensed tr.ontario-table-row--subtotal th,.ontario-table-container .ontario-table--condensed tr.ontario-table-row--subtotal td,.ontario-table-container .ontario-table--condensed tfoot tr th,.ontario-table-container .ontario-table--condensed tfoot tr td{padding:1rem 0.5rem 1rem 1rem}.ontario-table-container .ontario-table--condensed tr.ontario-table-row--subtotal td.ontario-table-cell--numeric,.ontario-table-container .ontario-table--condensed tfoot tr td.ontario-table-cell--numeric{text-align:right;padding:1rem 1rem 1rem 0.5rem}}';
+
+const OntarioTable$1 = /*@__PURE__*/ proxyCustomElement(
+	class OntarioTable extends H {
+		constructor() {
+			super();
+			this.__registerHost();
+			this.__attachShadow();
+			/**
+			 * Indicates whether or not the table data should have alternate row zebra striping.
+			 *
+			 * 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”.
+			 *
+			 * The default will be set to “auto”.
+			 */
+			this.zebraStripes = 'auto';
+			/**
+			 * 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.
+			 *
+			 * This is optional. By default it will be set to “false”.
+			 */
+			this.condensed = false;
+			/**
+			 * Used to specify whether or not the table should extend the full width of its container.
+			 *
+			 * This is optional. By default, it will be set to “false”
+			 */
+			this.fullWidth = false;
+			this.transformTableData = (tableData) => {
+				// get column keys
+				const columns = extractValuesByKey(this.tableColumnsState, 'key').filter((column) => column !== undefined);
+				// organize table data data object according to the order of the column keys
+				const organizedTableData = organizeObjectKeys(tableData, columns);
+				// remove the footer table data into it's own state so that it can be rendered in a `tfoot` element
+				const [updatedTableData, tableFooterData] = removeObjectsBySpecificKey(organizedTableData, 'footer', true);
+				this.tableDataState = updatedTableData;
+				this.tableFooterState = tableFooterData;
+			};
+			this.getZebraStripeClass = () => {
+				return this.zebraStripes === 'disabled'
+					? `ontario-table--no-zebra-stripes`
+					: this.zebraStripes === 'enabled'
+						? `ontario-table--zebra-stripes-enabled`
+						: ``;
+			};
+			this.getTableClasses = () => {
+				let tableClass = '';
+				if (this.condensed && this.fullWidth) {
+					tableClass = `ontario-table--condensed ontario-table--full-container-width`;
+				} else if (this.condensed) {
+					tableClass = `ontario-table--condensed`;
+				} else if (this.fullWidth) {
+					tableClass = `ontario-table--full-container-width`;
+				}
+				const zebraStripesClass = this.getZebraStripeClass();
+				if (tableClass) {
+					tableClass = `${tableClass} ${zebraStripesClass}`;
+				} else {
+					tableClass = zebraStripesClass;
+				}
+				return tableClass;
+			};
+			this.getColumnClasses = (columnData) => {
+				if (columnData.type === 'numeric' && columnData.colSpan) {
+					return `ontario-table-cell--numeric ontario-table-header--column-span-${columnData.colSpan}`;
+				} else if (columnData.type === 'numeric') {
+					return `ontario-table-cell--numeric`;
+				} else if (columnData.colSpan) {
+					return `ontario-table-header--column-span-${columnData.colSpan}`;
+				}
+				return;
+			};
+			// A function used to generate the table header and table definitions for the table body and table footer sections.
+			this.generateTableDataHTML = (dataType, rowData, columns, rowClass) => {
+				return h(
+					'tr',
+					{ class: dataType === 'tableData' ? rowClass : '' },
+					this.tableColumnsState.map((column, index) => {
+						const type = column.type;
+						const tdClass = type === 'numeric' ? `ontario-table-cell--numeric` : '';
+						return index === 0
+							? h(
+									'th',
+									{ scope: 'row', innerHTML: rowData.data[`${columns[0]}`] },
+									dataType === 'tableData' &&
+										rowData.highlight &&
+										h('img', {
+											'class': 'ontario-table--highlight-indicator',
+											'src': getAssetPath('./assets/highlight-indicator.svg'),
+											'aria-hidden': 'true',
+										}),
+								)
+							: h('td', { class: tdClass, innerHTML: rowData.data[`${columns[index]}`] });
+					}),
+				);
+			};
+		}
+		processTableColumns() {
+			if (this.tableColumns) this.parseTableColumns(this.tableColumns);
+		}
+		processTableData() {
+			if (this.tableData) this.parseTableData(this.tableData);
+		}
+		/**
+		 * Parsse and validates the `tableColumns` prop.
+		 * If the prop is a string, it will be parsed as JSON.
+		 * Validated output is stored in `tableColumnsState`.
+		 *
+		 * If parsing or validation fails, an error message is logged and the state is set to an empty array as a fallback.
+		 */
+		parseTableColumns(columns) {
+			try {
+				this.tableColumnsState = typeof columns === 'string' ? JSON.parse(columns) : columns;
+				validateTableColumns(this.tableColumnsState);
+			} catch (error) {
+				const message = new ConsoleMessageClass();
+				message
+					.addDesignSystemTag()
+					.addRegularText(' failed to parse ')
+					.addMonospaceText('tableColumns')
+					.addRegularText(' for ')
+					.addMonospaceText('<ontario-table>')
+					.addRegularText(' — check for valid JSON format or structure.\n')
+					.addMonospaceText(error.stack)
+					.printMessage(ConsoleType.Error);
+				this.tableColumnsState = []; // Fallback to prevent render failure
+			}
+		}
+		/**
+		 * Parses and validates the `tableData` prop.
+		 * If the prop is a string, it will be parsed as JSON.
+		 * The parsed object is transformed for internal use and stored in `tableDataState` and `tableFooterState`.
+		 *
+		 * If parsing or validation fails, logs an error and sets both data states to empty arrays as a fallback.
+		 */
+		parseTableData(data) {
+			try {
+				const parsed = typeof data === 'string' ? JSON.parse(data) : data;
+				this.transformTableData(parsed);
+				validateTableRowOptions(parsed);
+			} catch (error) {
+				const message = new ConsoleMessageClass();
+				message
+					.addDesignSystemTag()
+					.addRegularText(' failed to parse ')
+					.addMonospaceText('tableData')
+					.addRegularText(' for ')
+					.addMonospaceText('<ontario-table>')
+					.addRegularText(' — check for valid JSON format or structure.\n')
+					.addMonospaceText(error.stack)
+					.printMessage(ConsoleType.Error);
+				this.tableDataState = [];
+				this.tableFooterState = []; // Prevents render issues when data is invalid
+			}
+		}
+		// Helper function to apply the scrollbar styles to the tops of tables
+		applyScrollbar(tableElement, scrollerDiv) {
+			scrollerDiv.style.visibility = 'visible';
+			scrollerDiv.style.height = '20px';
+			scrollerDiv.style.width = `${tableElement.scrollWidth}px`;
+		}
+		// The following logic adds scrollbar functionality to the tops of tables depending on their size.
+		componentDidLoad() {
+			const tables = this.table;
+			const scrollerDivs = this.tableScrollDiv;
+			const scrollerWrappers = this.tableScrollWrapper;
+			if (typeof window !== 'undefined') {
+				let resizeObserver = new ResizeObserver(() => {
+					this.applyScrollbar(tables, scrollerDivs);
+				});
+				this.applyScrollbar(tables, scrollerDivs);
+				resizeObserver.observe(tables);
+				tables.addEventListener('scroll', () => {
+					this.applyScrollbar(tables, scrollerDivs);
+					scrollerWrappers.scrollLeft = tables.scrollLeft;
+				});
+				scrollerWrappers.addEventListener('scroll', () => {
+					this.applyScrollbar(tables, scrollerDivs);
+					tables.scrollLeft = scrollerWrappers.scrollLeft;
+				});
+			}
+		}
+		componentWillLoad() {
+			this.processTableColumns();
+			this.processTableData();
+		}
+		render() {
+			const columns = extractValuesByKey(this.tableColumnsState, 'key');
+			return h(
+				'div',
+				{ key: '8925b3075957dbb88313e90a3291179411aa8e4a', class: 'ontario-table-container' },
+				h(
+					'div',
+					{
+						key: '9ef3a24d734f6088e174fdc6e8f1791766ab4a8e',
+						class: 'ontario-table-scroll--wrapper',
+						ref: (el) => (this.tableScrollWrapper = el),
+					},
+					h('div', {
+						key: 'fc0ccdc60920eff3a3ee88492d5fc04552d52b55',
+						class: 'ontario-table-scroll--div',
+						ref: (el) => (this.tableScrollDiv = el),
+					}),
+				),
+				h(
+					'div',
+					{
+						key: '3166b888c89f078e952f68cfffff4a9837465a15',
+						class: 'ontario-table-div',
+						ref: (el) => (this.table = el),
+					},
+					h(
+						'table',
+						{ key: '2db866dbaadf156af4af556626a469d2f2a9003f', class: this.getTableClasses() },
+						this.caption && h('caption', { key: '989773d7eacf6b550f4fef2e85cdba11fcdb7e34' }, this.caption),
+						this.tableColumnsState &&
+							h(
+								'thead',
+								{ key: '01384f77e02208ec1703104d0fd2ebccbf5be274' },
+								h(
+									'tr',
+									{ key: 'b8dcfd0a8d124f566a3b9d7e0c614cc1cfec91a1' },
+									this.tableColumnsState.map((columnData) => {
+										const columnClass = this.getColumnClasses(columnData);
+										return h('th', {
+											'scope': 'col',
+											'key': columnData.key,
+											'data-type': columnData.type,
+											'class': columnClass,
+											'innerHTML': columnData.title,
+										});
+									}),
+								),
+							),
+						this.tableDataState &&
+							h(
+								'tbody',
+								{ key: '51df8cf9670948399f9366fb4d754f07885d3ed7' },
+								this.tableDataState.map((rowData) => {
+									const rowClass = rowData.highlight
+										? `ontario-table-row--highlight`
+										: rowData.subtotal
+											? `ontario-table-row--subtotal`
+											: undefined;
+									return this.generateTableDataHTML('tableData', rowData, columns, rowClass);
+								}),
+							),
+						!!this.tableFooterState.length &&
+							h(
+								'tfoot',
+								{ key: 'd46c630519cbe1e68063329dbdaec7c7b291df96' },
+								this.tableFooterState.map((footerData) => {
+									return this.generateTableDataHTML('tableData', footerData, columns, undefined);
+								}),
+							),
+					),
+				),
+			);
+		}
+		static get assetsDirs() {
+			return ['./assets'];
+		}
+		get element() {
+			return this;
+		}
+		static get watchers() {
+			return {
+				tableColumns: ['processTableColumns'],
+				tableData: ['processTableData'],
+			};
+		}
+		static get style() {
+			return ontarioTableCss;
+		}
+	},
+	[
+		257,
+		'ontario-table',
+		{
+			caption: [1],
+			tableColumns: [1, 'table-columns'],
+			tableData: [1, 'table-data'],
+			zebraStripes: [1, 'zebra-stripes'],
+			condensed: [4],
+			fullWidth: [4, 'full-width'],
+			tableColumnsState: [32],
+			tableDataState: [32],
+			tableFooterState: [32],
+		},
+		undefined,
+		{
+			tableColumns: ['processTableColumns'],
+			tableData: ['processTableData'],
+		},
+	],
+);
+function defineCustomElement$1() {
+	if (typeof customElements === 'undefined') {
+		return;
+	}
+	const components = ['ontario-table'];
+	components.forEach((tagName) => {
+		switch (tagName) {
+			case 'ontario-table':
+				if (!customElements.get(tagName)) {
+					customElements.define(tagName, OntarioTable$1);
+				}
+				break;
+		}
+	});
+}
+defineCustomElement$1();
+
+const OntarioTable = OntarioTable$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { OntarioTable, defineCustomElement };
+//# sourceMappingURL=ontario-table.js.map
+
+//# sourceMappingURL=ontario-table.js.map

package/components/ontario-table.js.map

@@ -0,0 +1 @@
+{"file":"ontario-table.js","mappings":"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","names":["OntarioTable","__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/ontario-table/utils/ontario-table-validation.ts","src/components/ontario-table/ontario-table.scss?tag=ontario-table&encapsulation=shadow","src/components/ontario-table/ontario-table.tsx"],"sourcesContent":["import { TableColumnOptions, TableRowOptions } from '../table.interface';\n\nimport { ConsoleMessageClass } from '../../../utils/console-message/console-message';\nimport { ConsoleType } from '../../../utils/console-message/console-message.enum';\nimport { minimumGridColumns, maximumGridColumns } from '../../../utils/common/common.variables';\n\nexport function validateTableColumns(columns: TableColumnOptions[]): boolean {\n\tfor (const column of columns) {\n\t\tif (!column.title || !column.key) {\n\t\t\tconst message = new ConsoleMessageClass();\n\t\t\tmessage\n\t\t\t\t.addDesignSystemTag()\n\t\t\t\t.addRegularText(' The required keys for ')\n\t\t\t\t.addMonospaceText('title')\n\t\t\t\t.addRegularText(' and/or ')\n\t\t\t\t.addMonospaceText('key')\n\t\t\t\t.addRegularText(' in the ')\n\t\t\t\t.addMonospaceText('<ontario-table> tableColumns')\n\t\t\t\t.addRegularText(' options were not provided. ')\n\t\t\t\t.printMessage(ConsoleType.Error);\n\t\t\treturn false; // Required keys are missing\n\t\t}\n\n\t\tif (column.type && column.type !== 'string' && column.type !== 'numeric') {\n\t\t\tconst message = new ConsoleMessageClass();\n\t\t\tmessage\n\t\t\t\t.addDesignSystemTag()\n\t\t\t\t.addRegularText(' The ')\n\t\t\t\t.addMonospaceText('type')\n\t\t\t\t.addRegularText(' key in the ')\n\t\t\t\t.addMonospaceText('<ontario-table> tableColumns')\n\t\t\t\t.addRegularText(' options is not a valid type. A default type of `string` will be applied.')\n\t\t\t\t.printMessage();\n\t\t\treturn false; // Invalid type for 'type' key\n\t\t}\n\n\t\tif (column.colSpan && !(column.colSpan >= minimumGridColumns && column.colSpan <= maximumGridColumns)) {\n\t\t\tconst message = new ConsoleMessageClass();\n\t\t\tmessage\n\t\t\t\t.addDesignSystemTag()\n\t\t\t\t.addRegularText(' The ')\n\t\t\t\t.addMonospaceText('colSpan')\n\t\t\t\t.addRegularText(' in the ')\n\t\t\t\t.addMonospaceText('<ontario-table> tableColumns')\n\t\t\t\t.addRegularText(' options is not a valid type. The default colSpan value will be applied.')\n\t\t\t\t.printMessage();\n\t\t\treturn false; // Invalid value for 'colSpan' key\n\t\t}\n\t}\n\n\treturn true; // All validations passed\n}\n\nexport function validateTableRowOptions(options: TableRowOptions[]): boolean {\n\tfor (const option of options) {\n\t\tif (!option.data || Object.keys(option.data).length === 0) {\n\t\t\tconst message = new ConsoleMessageClass();\n\t\t\tmessage\n\t\t\t\t.addDesignSystemTag()\n\t\t\t\t.addRegularText(' The required key for ')\n\t\t\t\t.addMonospaceText('data')\n\t\t\t\t.addRegularText(' in the ')\n\t\t\t\t.addMonospaceText('<ontario-table> tableData')\n\t\t\t\t.addRegularText(' options was not provided. ')\n\t\t\t\t.printMessage(ConsoleType.Error);\n\t\t\treturn false; // Required key 'data' is missing\n\t\t}\n\t}\n\n\treturn true; // All validations passed\n}\n","@use 'sass:math';\n@use 'pkg:@ongov/ontario-design-system-global-styles/dist/styles/scss/1-variables/spacing.variables' as spacing;\n@use 'pkg:@ongov/ontario-design-system-global-styles/dist/styles/scss/1-variables/colours.variables' as colours;\n@use 'pkg:@ongov/ontario-design-system-global-styles/dist/styles/scss/1-variables/breakpoints.variables' as breakpoints;\n@use 'pkg:@ongov/ontario-design-system-global-styles/dist/styles/scss/1-variables/font-sizes.variables' as fontSizes;\n@use 'pkg:@ongov/ontario-design-system-global-styles/dist/styles/scss/1-variables/font-weights.variables' as fontWeights;\n@use 'pkg:@ongov/ontario-design-system-global-styles/dist/styles/scss/1-variables/line-heights.variables' as lineHeights;\n@use 'pkg:@ongov/ontario-design-system-global-styles/dist/styles/scss/1-variables/fonts.variables' as fonts;\n@use 'pkg:@ongov/ontario-design-system-global-styles/dist/styles/scss/2-tools/functions/global.functions' as\n\tglobalFunctions;\n\n$ontario-table-caption-background: #0000001a;\n$ontario-table-total: #0077a056;\n$ontario-table-subtotal: #007b9e1d;\n$ontario-table-highlight: #e191003c;\n$ontario-table-row-divider: #0000004d;\n$ontario-table-zebra-striping: #0000000d;\n$ontario-table-shadow--cover: rgba(255, 255, 255, 0);\n$ontario-table-shadow--black: rgba(0, 0, 0, 0.2);\n$ontario-table-shadow--clear: rgba(252, 0, 0, 0);\n\n$ontario-table-scroller--height: 20px;\n\n$ontario-table-caption-custom-spacing: spacing.$spacing-4 + math.div(spacing.$spacing-1, 2);\n\n.ontario-table-container {\n\tposition: relative;\n\tmargin: spacing.$spacing-2 spacing.$spacing-0 spacing.$spacing-7;\n}\n\n.ontario-table-div {\n\tbackground:\n\t\tlinear-gradient(to right, colours.$ontario-colour-white 30%, $ontario-table-shadow--cover),\n\t\tlinear-gradient(to right, $ontario-table-shadow--cover, colours.$ontario-colour-white 70%) 0 100%,\n\t\tlinear-gradient(to right, $ontario-table-shadow--black 0%, $ontario-table-shadow--clear 100.01%),\n\t\tlinear-gradient(to left, $ontario-table-shadow--black 0%, $ontario-table-shadow--clear 100.01%);\n\tbackground-repeat: no-repeat;\n\tbackground-size:\n\t\tglobalFunctions.px-to-rem(40) 100%,\n\t\tglobalFunctions.px-to-rem(40) 100%,\n\t\tglobalFunctions.px-to-rem(14) 100%,\n\t\tglobalFunctions.px-to-rem(14) 100%;\n\tbackground-position:\n\t\t0 0,\n\t\t100%,\n\t\t0 0,\n\t\t100%;\n\tbackground-attachment: local, local, scroll, scroll;\n\toverflow-x: auto;\n\n\t@media screen and (max-width: breakpoints.$small-breakpoint) {\n\t\toverflow-x: scroll;\n\t}\n}\n\n.ontario-table-scroll--wrapper {\n\theight: $ontario-table-scroller--height;\n\toverflow-x: auto;\n\toverflow-y: hidden;\n\tdisplay: block;\n}\n\n.ontario-table-container table {\n\tborder-collapse: collapse;\n\tdisplay: table;\n\tfont-size: globalFunctions.px-to-rem(17);\n\tfont-weight: fontWeights.$ontario-font-weights-normal;\n\tline-height: globalFunctions.px-to-rem(26);\n\n\t&.ontario-table--full-container-width {\n\t\tdisplay: table;\n\t\twidth: 100%;\n\t}\n\n\t&.ontario-table--zebra-stripes-enabled {\n\t\ttbody {\n\t\t\ttr:nth-child(even) {\n\t\t\t\tbackground-color: $ontario-table-zebra-striping;\n\t\t\t}\n\t\t}\n\t}\n\n\t&:not(.ontario-table--no-zebra-stripes) {\n\t\ttbody {\n\t\t\ttr:first-child:nth-last-child(n + 6),\n\t\t\ttr:first-child:nth-last-child(n + 6) ~ tr {\n\t\t\t\t&:nth-child(even) {\n\t\t\t\t\tbackground-color: $ontario-table-zebra-striping;\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\t}\n\n\t@media screen and (max-width: breakpoints.$small-breakpoint) {\n\t\tfont-size: fontSizes.$ontario-font-size-standard-body-text;\n\t}\n}\n\n.ontario-table-container caption {\n\tbackground-color: $ontario-table-caption-background;\n\tdisplay: table-caption;\n\tfont-size: globalFunctions.px-to-rem(22);\n\tfont-weight: fontWeights.$ontario-font-weights-bold;\n\tline-height: globalFunctions.px-to-rem(35);\n\tpadding: $ontario-table-caption-custom-spacing spacing.$spacing-4 $ontario-table-caption-custom-spacing\n\t\tspacing.$spacing-5;\n\ttext-align: left;\n\n\t@media screen and (max-width: breakpoints.$small-breakpoint) {\n\t\tfont-size: fontSizes.$ontario-font-size-large;\n\t\tline-height: globalFunctions.px-to-rem(30);\n\t\tpadding-left: spacing.$spacing-4;\n\t}\n}\n\n.ontario-table-container table thead {\n\tborder: solid;\n\tborder-width: globalFunctions.px-to-rem(3) 0;\n\tborder-color: colours.$ontario-colour-black;\n\tvertical-align: text-top;\n\n\tth {\n\t\tfont-size: globalFunctions.px-to-rem(18);\n\t\tline-height: lineHeights.$ontario-line-height-7;\n\t\tmargin: spacing.$spacing-0;\n\t\tpadding: (spacing.$spacing-5 + spacing.$spacing-1) spacing.$spacing-4 (spacing.$spacing-5 + spacing.$spacing-1)\n\t\t\tspacing.$spacing-5;\n\t\ttext-align: left;\n\t\ttext-size-adjust: none;\n\t\t-webkit-text-size-adjust: none;\n\n\t\t@media screen and (max-width: breakpoints.$small-breakpoint) {\n\t\t\tfont-size: fontSizes.$ontario-font-size-standard-body-text;\n\t\t\tline-height: globalFunctions.px-to-rem(21);\n\t\t\tpadding: spacing.$spacing-5 spacing.$spacing-2 spacing.$spacing-5 spacing.$spacing-4;\n\t\t}\n\t}\n\n\tth.ontario-table-cell--numeric {\n\t\tpadding: (spacing.$spacing-5 + spacing.$spacing-1) spacing.$spacing-5 (spacing.$spacing-5 + spacing.$spacing-1)\n\t\t\tspacing.$spacing-4;\n\t\ttext-align: right;\n\n\t\t@media screen and (max-width: breakpoints.$small-breakpoint) {\n\t\t\tpadding: spacing.$spacing-5 spacing.$spacing-4 spacing.$spacing-5 spacing.$spacing-2;\n\t\t}\n\t}\n}\n\n.ontario-table-container table tbody {\n\tfont-size: fontSizes.$ontario-font-size-standard-body-text;\n\tvertical-align: text-top;\n\n\ttr {\n\t\tborder: solid;\n\t\tborder-width: globalFunctions.px-to-rem(1) 0;\n\t\tborder-color: $ontario-table-row-divider;\n\t}\n\n\ttr:last-child {\n\t\tborder-width: globalFunctions.px-to-rem(3) 0;\n\t\tborder-top-width: 0;\n\t\tborder-color: colours.$ontario-colour-black;\n\t}\n\n\ttr.ontario-table-row--highlight {\n\t\tbackground-color: $ontario-table-highlight !important; // the important flag is needed to override zebra stripe background colour classes\n\n\t\tth {\n\t\t\tpadding-left: spacing.$spacing-5;\n\t\t\tdisplay: flex;\n\t\t\tposition: relative;\n\n\t\t\timg.ontario-table--highlight-indicator {\n\t\t\t\t// Width of yellow triangle svg\n\t\t\t\twidth: globalFunctions.px-to-rem(8);\n\t\t\t\tposition: absolute;\n\t\t\t\t// Distance from top of svg to top of container\n\t\t\t\ttop: globalFunctions.px-to-rem(24);\n\t\t\t\tleft: 0;\n\t\t\t}\n\t\t}\n\t}\n\n\ttr.ontario-table-row--subtotal {\n\t\tbackground-color: $ontario-table-subtotal !important; // the important flag is needed to override zebra stripe background colour classes\n\t}\n}\n\n.ontario-table-container tbody th,\n.ontario-table-container tfoot th,\n.ontario-table-container table td {\n\tpadding: globalFunctions.px-to-rem(19) spacing.$spacing-4 globalFunctions.px-to-rem(19) spacing.$spacing-5;\n\ttext-align: left;\n\tletter-spacing: globalFunctions.px-to-rem(0.4);\n}\n\n.ontario-table-container tbody th,\n.ontario-table-container tfoot th {\n\tfont-weight: fontWeights.$ontario-font-weights-bold;\n\n\t@media screen and (max-width: breakpoints.$small-breakpoint) {\n\t\tfont-size: fontSizes.$ontario-font-size-standard-body-text;\n\t\tline-height: globalFunctions.px-to-rem(26);\n\t\tpadding-right: spacing.$spacing-2;\n\t\tpadding-left: spacing.$spacing-4;\n\t}\n}\n\n.ontario-table-container table td {\n\timg {\n\t\tvertical-align: top;\n\n\t\t@media screen and (max-width: breakpoints.$small-breakpoint) {\n\t\t\tmax-width: none;\n\t\t}\n\t}\n\n\t&.ontario-table-cell--numeric {\n\t\tfont-family: fonts.$ontario-font-courier-prime;\n\t\tfont-size: globalFunctions.px-to-rem(17);\n\t\tpadding: globalFunctions.px-to-rem(19) spacing.$spacing-5 globalFunctions.px-to-rem(19) spacing.$spacing-4;\n\t\ttext-align: right;\n\n\t\tstrong {\n\t\t\tfont-family: fonts.$ontario-font-courier-prime;\n\t\t}\n\t}\n}\n\n.ontario-table-container tbody tr.ontario-table-row--subtotal,\n.ontario-table-container tfoot tr {\n\tborder: solid;\n\tborder-width: globalFunctions.px-to-rem(3) 0;\n\tfont-size: fontSizes.$ontario-font-size-standard-body-text;\n\tborder-color: colours.$ontario-colour-black;\n\n\tth {\n\t\tpadding: globalFunctions.px-to-rem(23) spacing.$spacing-4 globalFunctions.px-to-rem(23) spacing.$spacing-5;\n\t}\n\n\ttd {\n\t\tfont-weight: fontWeights.$ontario-font-weights-bold;\n\t\tpadding: globalFunctions.px-to-rem(23) spacing.$spacing-4 globalFunctions.px-to-rem(23) spacing.$spacing-5;\n\t}\n}\n\n.ontario-table-container tfoot {\n\tvertical-align: text-top;\n\n\ttr {\n\t\tbackground-color: $ontario-table-total !important; // the important flag is needed to override zebra stripe background colour classes\n\t}\n}\n\n// Column classes\n.ontario-table-header--column-span-1 {\n\t//Equivalent to 1 grid columns\n\tmin-width: 8.33333vw;\n}\n\n.ontario-table-header--column-span-2 {\n\t//Equivalent to 2 grid columns\n\tmin-width: 16.66666vw;\n}\n\n.ontario-table-header--column-span-3 {\n\t//Equivalent to 3 grid columns\n\tmin-width: 25vw;\n}\n\n.ontario-table-header--column-span-4 {\n\t//Equivalent to 4 grid columns\n\tmin-width: 33.33333vw;\n}\n\n.ontario-table-header--column-span-5 {\n\t//Equivalent to 5 grid columns\n\tmin-width: 41.66666vw;\n}\n\n.ontario-table-header--column-span-6 {\n\t//Equivalent to 6 grid columns\n\tmin-width: 50vw;\n}\n\n.ontario-table-header--column-span-7 {\n\t//Equivalent to 7 grid columns\n\tmin-width: 58.33333vw;\n}\n\n.ontario-table-header--column-span-8 {\n\t//Equivalent to 8 grid columns\n\tmin-width: 66.66666vw;\n}\n\n.ontario-table-header--column-span-9 {\n\t//Equivalent to 9 grid columns\n\tmin-width: 75vw;\n}\n\n.ontario-table-header--column-span-10 {\n\t//Equivalent to 10 grid columns\n\tmin-width: 83.33333vw;\n}\n\n.ontario-table-header--column-span-11 {\n\t//Equivalent to 11 grid columns\n\tmin-width: 91.66666vw;\n}\n\n.ontario-table-header--column-span-12 {\n\t//Equivalent to 12 grid columns\n\tmin-width: 100vw;\n}\n\n// Condensed tables\n.ontario-table-container .ontario-table--condensed {\n\ttd {\n\t\tpadding: spacing.$spacing-3 spacing.$spacing-4 spacing.$spacing-3 spacing.$spacing-5;\n\t\ttext-align: left;\n\t}\n\n\ttd.ontario-table-cell--numeric {\n\t\tpadding: spacing.$spacing-3 spacing.$spacing-5 spacing.$spacing-3 spacing.$spacing-4;\n\t\tfont-size: globalFunctions.px-to-rem(17);\n\t\ttext-align: right;\n\t}\n\n\ttbody th,\n\ttfoot th {\n\t\tpadding: spacing.$spacing-3 spacing.$spacing-4 spacing.$spacing-3 spacing.$spacing-5;\n\t}\n\n\ttr.ontario-table-row--highlight th img.ontario-table--highlight-indicator {\n\t\ttop: globalFunctions.px-to-rem(17);\n\t}\n\n\ttr.ontario-table-row--subtotal,\n\ttfoot tr {\n\t\tth,\n\t\ttd {\n\t\t\tpadding: spacing.$spacing-4 spacing.$spacing-4 spacing.$spacing-4 spacing.$spacing-5;\n\t\t}\n\n\t\ttd.ontario-table-cell--numeric {\n\t\t\ttext-align: right;\n\t\t\tpadding: spacing.$spacing-4 spacing.$spacing-5 spacing.$spacing-4 spacing.$spacing-4;\n\t\t}\n\t}\n\n\t@media screen and (max-width: breakpoints.$small-breakpoint) {\n\t\ttd {\n\t\t\tpadding: spacing.$spacing-3 spacing.$spacing-2 spacing.$spacing-3 spacing.$spacing-4;\n\t\t\tfont-size: fontSizes.$ontario-font-size-standard-body-text;\n\t\t}\n\n\t\ttd.ontario-table-cell--numeric {\n\t\t\tpadding: spacing.$spacing-3 spacing.$spacing-4 spacing.$spacing-3 spacing.$spacing-2;\n\t\t}\n\n\t\ttbody th {\n\t\t\tpadding: spacing.$spacing-3 spacing.$spacing-2 spacing.$spacing-3 spacing.$spacing-4;\n\t\t}\n\n\t\ttr.ontario-table-row--subtotal,\n\t\ttfoot tr {\n\t\t\tth,\n\t\t\ttd {\n\t\t\t\tpadding: spacing.$spacing-4 spacing.$spacing-2 spacing.$spacing-4 spacing.$spacing-4;\n\t\t\t}\n\n\t\t\ttd.ontario-table-cell--numeric {\n\t\t\t\ttext-align: right;\n\t\t\t\tpadding: spacing.$spacing-4 spacing.$spacing-4 spacing.$spacing-4 spacing.$spacing-2;\n\t\t\t}\n\t\t}\n\t}\n}\n","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"],"version":3}

package/components/ontario-task-list.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from '../dist/types/components';
+
+interface OntarioTaskList extends Components.OntarioTaskList, HTMLElement {}
+export const OntarioTaskList: {
+	prototype: OntarioTaskList;
+	new (): OntarioTaskList;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;