@ongov/ontario-design-system-component-library 4.2.0-alpha.1

package/dist/components/ontario-table.d.ts

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

package/dist/components/ontario-table.js

@@ -0,0 +1,351 @@
+import { proxyCustomElement, HTMLElement, h, getAssetPath } from '@stencil/core/internal/client';
+import { a as ConsoleType, C as ConsoleMessageClass } from './console-message.js';
+import { e as extractValuesByKey, o as organizeObjectKeys, r as removeObjectsBySpecificKey } from './utils.js';
+
+const minimumGridColumns = 1;
+const maximumGridColumns = 12;
+
+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:#1a1a1a;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:#1a1a1a}.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:#1a1a1a}.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 OntarioTableStyle0 = ontarioTableCss;
+
+const OntarioTable$1 = /*@__PURE__*/ proxyCustomElement(
+	class OntarioTable extends HTMLElement {
+		constructor() {
+			super();
+			this.__registerHost();
+			this.__attachShadow();
+			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'),
+										}),
+							  )
+							: h('td', { class: tdClass, innerHTML: rowData.data[`${columns[index]}`] });
+					}),
+				);
+			};
+			this.caption = undefined;
+			this.tableColumns = undefined;
+			this.tableData = undefined;
+			this.zebraStripes = 'auto';
+			this.condensed = false;
+			this.fullWidth = false;
+			this.tableColumnsState = undefined;
+			this.tableDataState = undefined;
+			this.tableFooterState = undefined;
+		}
+		processTableColumns() {
+			this.tableColumns && this.parseOptions(this.tableColumns);
+			validateTableColumns(this.tableColumnsState);
+		}
+		processTableData() {
+			this.tableData && this.parseOptions(this.tableData);
+			validateTableRowOptions(this.tableDataState);
+		}
+		// Parse the tableColumn & tableData options if they are strings
+		// Transforms the data and stores it in respective state objects
+		parseOptions(options) {
+			const isString = typeof options === 'string';
+			if (!options) {
+				return;
+			}
+			try {
+				if (options === this.tableColumns) {
+					this.tableColumnsState = isString ? JSON.parse(options) : options;
+				} else {
+					this.tableDataState = isString ? JSON.parse(options) : options;
+					this.transformTableData(this.tableDataState);
+				}
+			} catch (error) {
+				const message = new ConsoleMessageClass();
+				message
+					.addDesignSystemTag()
+					.addRegularText(' failed to parse props for ')
+					.addMonospaceText('<ontario-table>')
+					.addRegularText(' in ')
+					.addMonospaceText('parseOptions()')
+					.addRegularText(' method \n ')
+					.addMonospaceText(error.stack)
+					.printMessage(ConsoleType.Error);
+			}
+		}
+		// 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;
+			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: 'f2f1c8359a5b09b1f1812501f45617b8793d62c4', class: 'ontario-table-container' },
+				h(
+					'div',
+					{
+						key: 'f406a56cb585bc6afc47b6d2857cc81a6eaab30a',
+						class: 'ontario-table-scroll--wrapper',
+						ref: (el) => (this.tableScrollWrapper = el),
+					},
+					h('div', {
+						key: 'dc0a7056f365450fc0196ccd5ccd231e6a258b16',
+						class: 'ontario-table-scroll--div',
+						ref: (el) => (this.tableScrollDiv = el),
+					}),
+				),
+				h(
+					'div',
+					{
+						key: '6f9a07ab7d4914f0404cf95264ce122cb64605fc',
+						class: 'ontario-table-div',
+						ref: (el) => (this.table = el),
+					},
+					h(
+						'table',
+						{ key: 'b0c400ff0d59973556860dca7fa0b8dcbd85040d', class: this.getTableClasses() },
+						this.caption && h('caption', null, this.caption),
+						this.tableColumnsState &&
+							h(
+								'thead',
+								null,
+								h(
+									'tr',
+									null,
+									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',
+								null,
+								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',
+								null,
+								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 OntarioTableStyle0;
+		}
+	},
+	[
+		1,
+		'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;
+		}
+	});
+}
+
+const OntarioTable = OntarioTable$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { OntarioTable, defineCustomElement };
+
+//# sourceMappingURL=ontario-table.js.map

package/dist/components/ontario-table.js.map

@@ -0,0 +1 @@
+{"file":"ontario-table.js","mappings":";;;;AAAO,MAAM,kBAAkB,GAAG,CAAC,CAAC;AAC7B,MAAM,kBAAkB,GAAG,EAAE;;SCKpB,oBAAoB,CAAC,OAA6B;IACjE,KAAK,MAAM,MAAM,IAAI,OAAO,EAAE;QAC7B,IAAI,CAAC,MAAM,CAAC,KAAK,IAAI,CAAC,MAAM,CAAC,GAAG,EAAE;YACjC,MAAM,OAAO,GAAG,IAAI,mBAAmB,EAAE,CAAC;YAC1C,OAAO;iBACL,kBAAkB,EAAE;iBACpB,cAAc,CAAC,yBAAyB,CAAC;iBACzC,gBAAgB,CAAC,OAAO,CAAC;iBACzB,cAAc,CAAC,UAAU,CAAC;iBAC1B,gBAAgB,CAAC,KAAK,CAAC;iBACvB,cAAc,CAAC,UAAU,CAAC;iBAC1B,gBAAgB,CAAC,8BAA8B,CAAC;iBAChD,cAAc,CAAC,8BAA8B,CAAC;iBAC9C,YAAY,CAAC,WAAW,CAAC,KAAK,CAAC,CAAC;YAClC,OAAO,KAAK,CAAC;SACb;QAED,IAAI,MAAM,CAAC,IAAI,IAAI,MAAM,CAAC,IAAI,KAAK,QAAQ,IAAI,MAAM,CAAC,IAAI,KAAK,SAAS,EAAE;YACzE,MAAM,OAAO,GAAG,IAAI,mBAAmB,EAAE,CAAC;YAC1C,OAAO;iBACL,kBAAkB,EAAE;iBACpB,cAAc,CAAC,OAAO,CAAC;iBACvB,gBAAgB,CAAC,MAAM,CAAC;iBACxB,cAAc,CAAC,cAAc,CAAC;iBAC9B,gBAAgB,CAAC,8BAA8B,CAAC;iBAChD,cAAc,CAAC,2EAA2E,CAAC;iBAC3F,YAAY,EAAE,CAAC;YACjB,OAAO,KAAK,CAAC;SACb;QAED,IAAI,MAAM,CAAC,OAAO,IAAI,EAAE,MAAM,CAAC,OAAO,IAAI,kBAAkB,IAAI,MAAM,CAAC,OAAO,IAAI,kBAAkB,CAAC,EAAE;YACtG,MAAM,OAAO,GAAG,IAAI,mBAAmB,EAAE,CAAC;YAC1C,OAAO;iBACL,kBAAkB,EAAE;iBACpB,cAAc,CAAC,OAAO,CAAC;iBACvB,gBAAgB,CAAC,SAAS,CAAC;iBAC3B,cAAc,CAAC,UAAU,CAAC;iBAC1B,gBAAgB,CAAC,8BAA8B,CAAC;iBAChD,cAAc,CAAC,0EAA0E,CAAC;iBAC1F,YAAY,EAAE,CAAC;YACjB,OAAO,KAAK,CAAC;SACb;KACD;IAED,OAAO,IAAI,CAAC;AACb,CAAC;SAEe,uBAAuB,CAAC,OAA0B;IACjE,KAAK,MAAM,MAAM,IAAI,OAAO,EAAE;QAC7B,IAAI,CAAC,MAAM,CAAC,IAAI,IAAI,MAAM,CAAC,IAAI,CAAC,MAAM,CAAC,IAAI,CAAC,CAAC,MAAM,KAAK,CAAC,EAAE;YAC1D,MAAM,OAAO,GAAG,IAAI,mBAAmB,EAAE,CAAC;YAC1C,OAAO;iBACL,kBAAkB,EAAE;iBACpB,cAAc,CAAC,wBAAwB,CAAC;iBACxC,gBAAgB,CAAC,MAAM,CAAC;iBACxB,cAAc,CAAC,UAAU,CAAC;iBAC1B,gBAAgB,CAAC,2BAA2B,CAAC;iBAC7C,cAAc,CAAC,6BAA6B,CAAC;iBAC7C,YAAY,CAAC,WAAW,CAAC,KAAK,CAAC,CAAC;YAClC,OAAO,KAAK,CAAC;SACb;KACD;IAED,OAAO,IAAI,CAAC;AACb;;ACtEA,MAAM,eAAe,GAAG,khPAAkhP,CAAC;AAC3iP,2BAAe,eAAe;;MCejBA,cAAY;;;;;QA6HhB,uBAAkB,GAAG,CAAC,SAA4B;;YAEzD,MAAM,OAAO,GAAG,kBAAkB,CAAqB,IAAI,CAAC,iBAAiB,EAAE,KAAK,CAAC,CAAC,MAAM,CAC3F,CAAC,MAAM,KAAsC,MAAM,KAAK,SAAS,CACjE,CAAC;;YAGF,MAAM,kBAAkB,GAAG,kBAAkB,CAAC,SAAS,EAAE,OAAO,CAAC,CAAC;;YAGlE,MAAM,CAAC,gBAAgB,EAAE,eAAe,CAAC,GAAG,0BAA0B,CAAC,kBAAkB,EAAE,QAAQ,EAAE,IAAI,CAAC,CAAC;YAE3G,IAAI,CAAC,cAAc,GAAG,gBAAgB,CAAC;YACvC,IAAI,CAAC,gBAAgB,GAAG,eAAe,CAAC;SACxC,CAAC;QAEM,wBAAmB,GAAG;YAC7B,OAAO,IAAI,CAAC,YAAY,KAAK,UAAU;kBACpC,iCAAiC;kBACjC,IAAI,CAAC,YAAY,KAAK,SAAS;sBAC/B,sCAAsC;sBACtC,EAAE,CAAC;SACN,CAAC;QAEM,oBAAe,GAAG;YACzB,IAAI,UAAU,GAAG,EAAE,CAAC;YACpB,IAAI,IAAI,CAAC,SAAS,IAAI,IAAI,CAAC,SAAS,EAAE;gBACrC,UAAU,GAAG,8DAA8D,CAAC;aAC5E;iBAAM,IAAI,IAAI,CAAC,SAAS,EAAE;gBAC1B,UAAU,GAAG,0BAA0B,CAAC;aACxC;iBAAM,IAAI,IAAI,CAAC,SAAS,EAAE;gBAC1B,UAAU,GAAG,qCAAqC,CAAC;aACnD;YAED,MAAM,iBAAiB,GAAG,IAAI,CAAC,mBAAmB,EAAE,CAAC;YACrD,IAAI,UAAU,EAAE;gBACf,UAAU,GAAG,GAAG,UAAU,IAAI,iBAAiB,EAAE,CAAC;aAClD;iBAAM;gBACN,UAAU,GAAG,iBAAiB,CAAC;aAC/B;YAED,OAAO,UAAU,CAAC;SAClB,CAAC;QAEM,qBAAgB,GAAG,CAAC,UAA8B;YACzD,IAAI,UAAU,CAAC,IAAI,KAAK,SAAS,IAAI,UAAU,CAAC,OAAO,EAAE;gBACxD,OAAO,iEAAiE,UAAU,CAAC,OAAO,EAAE,CAAC;aAC7F;iBAAM,IAAI,UAAU,CAAC,IAAI,KAAK,SAAS,EAAE;gBACzC,OAAO,6BAA6B,CAAC;aACrC;iBAAM,IAAI,UAAU,CAAC,OAAO,EAAE;gBAC9B,OAAO,qCAAqC,UAAU,CAAC,OAAO,EAAE,CAAC;aACjE;YAED,OAAO;SACP,CAAC;;QAGM,0BAAqB,GAAG,CAC/B,QAAqC,EACrC,OAAY,EACZ,OAAwC,EACxC,QAA6B;YAE7B,QACC,UAAI,KAAK,EAAE,QAAQ,KAAK,WAAW,GAAG,QAAQ,GAAG,EAAE,IACjD,IAAI,CAAC,iBAAiB,CAAC,GAAG,CAAC,CAAC,MAAM,EAAE,KAAK;gBACzC,MAAM,IAAI,GAAG,MAAM,CAAC,IAAI,CAAC;gBACzB,MAAM,OAAO,GAAG,IAAI,KAAK,SAAS,GAAG,6BAA6B,GAAG,EAAE,CAAC;gBAExE,OAAO,KAAK,KAAK,CAAC,IACjB,UAAI,KAAK,EAAC,KAAK,EAAC,SAAS,EAAE,OAAO,CAAC,IAAI,CAAC,GAAG,OAAO,CAAC,CAAC,CAAC,EAAE,CAAC,IACtD,QAAQ,KAAK,WAAW,IAAI,OAAO,CAAC,SAAS,KAC7C,WACC,KAAK,EAAC,oCAAoC,EAC1C,GAAG,EAAE,YAAY,CAAC,kCAAkC,CAAC,GAC/C,CACP,CACG,KAEL,UAAI,KAAK,EAAE,OAAO,EAAE,SAAS,EAAE,OAAO,CAAC,IAAI,CAAC,GAAG,OAAO,CAAC,KAAK,CAAC,EAAE,CAAC,GAAO,CACvE,CAAC;aACF,CAAC,CACE,EACJ;SACF,CAAC;;;;4BApJmE,MAAM;yBAOjC,KAAK;yBAOL,KAAK;;;;;IASvC,mBAAmB;QAC1B,IAAI,CAAC,YAAY,IAAI,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC,YAAY,CAAC,CAAC;QAC1D,oBAAoB,CAAC,IAAI,CAAC,iBAAiB,CAAC,CAAC;KAC7C;IAGO,gBAAgB;QACvB,IAAI,CAAC,SAAS,IAAI,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC;QACpD,uBAAuB,CAAC,IAAI,CAAC,cAAc,CAAC,CAAC;KAC7C;;;IAIO,YAAY,CAAC,OAAY;QAChC,MAAM,QAAQ,GAAG,OAAO,OAAO,KAAK,QAAQ,CAAC;QAE7C,IAAI,CAAC,OAAO,EAAE;YACb,OAAO;SACP;QAED,IAAI;YACH,IAAI,OAAO,KAAK,IAAI,CAAC,YAAY,EAAE;gBAClC,IAAI,CAAC,iBAAiB,GAAG,QAAQ,GAAG,IAAI,CAAC,KAAK,CAAC,OAAO,CAAC,GAAG,OAAO,CAAC;aAClE;iBAAM;gBACN,IAAI,CAAC,cAAc,GAAG,QAAQ,GAAG,IAAI,CAAC,KAAK,CAAC,OAAO,CAAC,GAAG,OAAO,CAAC;gBAC/D,IAAI,CAAC,kBAAkB,CAAC,IAAI,CAAC,cAAc,CAAC,CAAC;aAC7C;SACD;QAAC,OAAO,KAAK,EAAE;YACf,MAAM,OAAO,GAAG,IAAI,mBAAmB,EAAE,CAAC;YAC1C,OAAO;iBACL,kBAAkB,EAAE;iBACpB,cAAc,CAAC,6BAA6B,CAAC;iBAC7C,gBAAgB,CAAC,iBAAiB,CAAC;iBACnC,cAAc,CAAC,MAAM,CAAC;iBACtB,gBAAgB,CAAC,gBAAgB,CAAC;iBAClC,cAAc,CAAC,aAAa,CAAC;iBAC7B,gBAAgB,CAAC,KAAK,CAAC,KAAK,CAAC;iBAC7B,YAAY,CAAC,WAAW,CAAC,KAAK,CAAC,CAAC;SAClC;KACD;;IAyFO,cAAc,CAAC,YAAqB,EAAE,WAAwB;QACrE,WAAW,CAAC,KAAK,CAAC,UAAU,GAAG,SAAS,CAAC;QACzC,WAAW,CAAC,KAAK,CAAC,MAAM,GAAG,MAAM,CAAC;QAClC,WAAW,CAAC,KAAK,CAAC,KAAK,GAAG,GAAG,YAAY,CAAC,WAAW,IAAI,CAAC;KAC1D;;IAGD,gBAAgB;QACf,MAAM,MAAM,GAAG,IAAI,CAAC,KAAK,CAAC;QAC1B,MAAM,YAAY,GAAG,IAAI,CAAC,cAAc,CAAC;QACzC,MAAM,gBAAgB,GAAG,IAAI,CAAC,kBAAkB,CAAC;QAEjD,IAAI,cAAc,GAAG,IAAI,cAAc,CAAC;YACvC,IAAI,CAAC,cAAc,CAAC,MAAM,EAAE,YAAY,CAAC,CAAC;SAC1C,CAAC,CAAC;QAEH,IAAI,CAAC,cAAc,CAAC,MAAM,EAAE,YAAY,CAAC,CAAC;QAC1C,cAAc,CAAC,OAAO,CAAC,MAAM,CAAC,CAAC;QAE/B,MAAM,CAAC,gBAAgB,CAAC,QAAQ,EAAE;YACjC,IAAI,CAAC,cAAc,CAAC,MAAM,EAAE,YAAY,CAAC,CAAC;YAE1C,gBAAgB,CAAC,UAAU,GAAG,MAAM,CAAC,UAAU,CAAC;SAChD,CAAC,CAAC;QAEH,gBAAgB,CAAC,gBAAgB,CAAC,QAAQ,EAAE;YAC3C,IAAI,CAAC,cAAc,CAAC,MAAM,EAAE,YAAY,CAAC,CAAC;YAE1C,MAAM,CAAC,UAAU,GAAG,gBAAgB,CAAC,UAAU,CAAC;SAChD,CAAC,CAAC;KACH;IAED,iBAAiB;QAChB,IAAI,CAAC,mBAAmB,EAAE,CAAC;QAC3B,IAAI,CAAC,gBAAgB,EAAE,CAAC;KACxB;IAED,MAAM;QACL,MAAM,OAAO,GAAG,kBAAkB,CAAC,IAAI,CAAC,iBAAiB,EAAE,KAAK,CAAC,CAAC;QAElE,QACC,4DAAK,KAAK,EAAC,yBAAyB,IACnC,4DAAK,KAAK,EAAC,+BAA+B,EAAC,GAAG,EAAE,CAAC,EAAE,MAAM,IAAI,CAAC,kBAAkB,GAAG,EAAiB,CAAC,IACpG,4DAAK,KAAK,EAAC,2BAA2B,EAAC,GAAG,EAAE,CAAC,EAAE,MAAM,IAAI,CAAC,cAAc,GAAG,EAAiB,CAAC,GAAQ,CAChG,EACN,4DAAK,KAAK,EAAC,mBAAmB,EAAC,GAAG,EAAE,CAAC,EAAE,MAAM,IAAI,CAAC,KAAK,GAAG,EAAiB,CAAC,IAC3E,8DAAO,KAAK,EAAE,IAAI,CAAC,eAAe,EAAE,IAClC,IAAI,CAAC,OAAO,IAAI,mBAAU,IAAI,CAAC,OAAO,CAAW,EACjD,IAAI,CAAC,iBAAiB,KACtB,iBACC,cACE,IAAI,CAAC,iBAAiB,CAAC,GAAG,CAAC,CAAC,UAAU;YACtC,MAAM,WAAW,GAAG,IAAI,CAAC,gBAAgB,CAAC,UAAU,CAAC,CAAC;YACtD,QACC,UACC,KAAK,EAAC,KAAK,EACX,GAAG,EAAE,UAAU,CAAC,GAAG,eACR,UAAU,CAAC,IAAI,EAC1B,KAAK,EAAE,WAAW,EAClB,SAAS,EAAE,UAAU,CAAC,KAAK,GACtB,EACL;SACF,CAAC,CACE,CACE,CACR,EACA,IAAI,CAAC,cAAc,KACnB,iBACE,IAAI,CAAC,cAAc,CAAC,GAAG,CAAC,CAAC,OAAO;YAChC,MAAM,QAAQ,GAAG,OAAO,CAAC,SAAS;kBAC/B,8BAA8B;kBAC9B,OAAO,CAAC,QAAQ;sBAChB,6BAA6B;sBAC7B,SAAS,CAAC;YAEb,OAAO,IAAI,CAAC,qBAAqB,CAAC,WAAW,EAAE,OAAO,EAAE,OAAO,EAAE,QAAQ,CAAC,CAAC;SAC3E,CAAC,CACK,CACR,EACA,CAAC,CAAC,IAAI,CAAC,gBAAgB,CAAC,MAAM,KAC9B,iBACE,IAAI,CAAC,gBAAgB,CAAC,GAAG,CAAC,CAAC,UAAU;YACrC,OAAO,IAAI,CAAC,qBAAqB,CAAC,WAAW,EAAE,UAAU,EAAE,OAAO,EAAE,SAAS,CAAC,CAAC;SAC/E,CAAC,CACK,CACR,CACM,CACH,CACD,EACL;KACF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["OntarioTable"],"sources":["src/utils/common/common.variables.ts","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":["export const minimumGridColumns = 1;\nexport const maximumGridColumns = 12;\n","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 '@ongov/ontario-design-system-global-styles/dist/styles/scss/1-variables/spacing.variables' as spacing;\n@use '@ongov/ontario-design-system-global-styles/dist/styles/scss/1-variables/colours.variables' as colours;\n@use '@ongov/ontario-design-system-global-styles/dist/styles/scss/1-variables/breakpoints.variables' as breakpoints;\n@use '@ongov/ontario-design-system-global-styles/dist/styles/scss/1-variables/font-sizes.variables' as fontSizes;\n@use '@ongov/ontario-design-system-global-styles/dist/styles/scss/1-variables/font-weights.variables' as fontWeights;\n@use '@ongov/ontario-design-system-global-styles/dist/styles/scss/1-variables/line-heights.variables' as lineHeights;\n@use '@ongov/ontario-design-system-global-styles/dist/styles/scss/1-variables/typography.variables' as typography;\n@use '@ongov/ontario-design-system-global-styles/dist/styles/scss/2-tools/functions/global.functions' as globalFunctions;\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: linear-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: globalFunctions.px-to-rem(40) 100%, globalFunctions.px-to-rem(40) 100%,\n\t\tglobalFunctions.px-to-rem(14) 100%, globalFunctions.px-to-rem(14) 100%;\n\tbackground-position: 0 0, 100%, 0 0, 100%;\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: typography.$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: typography.$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\tthis.tableColumns && this.parseOptions(this.tableColumns);\n\t\tvalidateTableColumns(this.tableColumnsState);\n\t}\n\n\t@Watch('tableData')\n\tprivate processTableData() {\n\t\tthis.tableData && this.parseOptions(this.tableData);\n\t\tvalidateTableRowOptions(this.tableDataState);\n\t}\n\n\t// Parse the tableColumn & tableData options if they are strings\n\t// Transforms the data and stores it in respective state objects\n\tprivate parseOptions(options: any) {\n\t\tconst isString = typeof options === 'string';\n\n\t\tif (!options) {\n\t\t\treturn;\n\t\t}\n\n\t\ttry {\n\t\t\tif (options === this.tableColumns) {\n\t\t\t\tthis.tableColumnsState = isString ? JSON.parse(options) : options;\n\t\t\t} else {\n\t\t\t\tthis.tableDataState = isString ? JSON.parse(options) : options;\n\t\t\t\tthis.transformTableData(this.tableDataState);\n\t\t\t}\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 props for ')\n\t\t\t\t.addMonospaceText('<ontario-table>')\n\t\t\t\t.addRegularText(' in ')\n\t\t\t\t.addMonospaceText('parseOptions()')\n\t\t\t\t.addRegularText(' method \\n ')\n\t\t\t\t.addMonospaceText(error.stack)\n\t\t\t\t.printMessage(ConsoleType.Error);\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? `ontario-table--zebra-stripes-enabled`\n\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\tlet resizeObserver = new ResizeObserver(() => {\n\t\t\tthis.applyScrollbar(tables, scrollerDivs);\n\t\t});\n\n\t\tthis.applyScrollbar(tables, scrollerDivs);\n\t\tresizeObserver.observe(tables);\n\n\t\ttables.addEventListener('scroll', () => {\n\t\t\tthis.applyScrollbar(tables, scrollerDivs);\n\n\t\t\tscrollerWrappers.scrollLeft = tables.scrollLeft;\n\t\t});\n\n\t\tscrollerWrappers.addEventListener('scroll', () => {\n\t\t\tthis.applyScrollbar(tables, scrollerDivs);\n\n\t\t\ttables.scrollLeft = scrollerWrappers.scrollLeft;\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? `ontario-table-row--subtotal`\n\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/dist/components/ontario-textarea.d.ts

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