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

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

@@ -0,0 +1,391 @@
+import { h, getAssetPath } from '@stencil/core';
+import { validateTableColumns, validateTableRowOptions } from './utils/ontario-table-validation';
+import { ConsoleMessageClass } from '../../utils/console-message/console-message';
+import { ConsoleType } from '../../utils/console-message/console-message.enum';
+import { extractValuesByKey, organizeObjectKeys, removeObjectsBySpecificKey } from '../../utils/helper/utils';
+export class OntarioTable {
+	constructor() {
+		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 is() {
+		return 'ontario-table';
+	}
+	static get encapsulation() {
+		return 'shadow';
+	}
+	static get originalStyleUrls() {
+		return {
+			$: ['ontario-table.scss'],
+		};
+	}
+	static get styleUrls() {
+		return {
+			$: ['ontario-table.css'],
+		};
+	}
+	static get assetsDirs() {
+		return ['./assets'];
+	}
+	static get properties() {
+		return {
+			caption: {
+				type: 'string',
+				mutable: false,
+				complexType: {
+					original: 'string | undefined',
+					resolved: 'string | undefined',
+					references: {},
+				},
+				required: false,
+				optional: true,
+				docs: {
+					tags: [],
+					text: 'Specifies the caption (or title) of the table.\n\nThis is optional.',
+				},
+				attribute: 'caption',
+				reflect: false,
+			},
+			tableColumns: {
+				type: 'string',
+				mutable: false,
+				complexType: {
+					original: 'string | TableColumnOptions[]',
+					resolved: 'TableColumnOptions[] | string',
+					references: {
+						TableColumnOptions: {
+							location: 'import',
+							path: './table.interface',
+							id: 'src/components/ontario-table/table.interface.ts::TableColumnOptions',
+						},
+					},
+				},
+				required: false,
+				optional: false,
+				docs: {
+					tags: [
+						{
+							name: 'example',
+							text: ';\n<ontario-table\ntable-columns=\'[\n{ "title": "Type of service", "key": "service" },\n{ "title": "Processing and delivery", "key": "processing" },\n{ "title": "Cost", "key": "cost", "type": "numeric" }\n]\'\n>\n</ontario-table>',
+						},
+					],
+					text: 'Used to define the columns of the table.',
+				},
+				attribute: 'table-columns',
+				reflect: false,
+			},
+			tableData: {
+				type: 'string',
+				mutable: false,
+				complexType: {
+					original: 'string | TableRowOptions[]',
+					resolved: 'TableRowOptions[] | string',
+					references: {
+						TableRowOptions: {
+							location: 'import',
+							path: './table.interface',
+							id: 'src/components/ontario-table/table.interface.ts::TableRowOptions',
+						},
+					},
+				},
+				required: false,
+				optional: false,
+				docs: {
+					tags: [
+						{
+							name: 'example',
+							text: '<ontario-table\n table-data=\'[\n   {\n     "data": {\n       "service": "Regular service (online)",\n       "processing": "15 business days plus delivery by Canada Post",\n       "cost": "$15"\n     }\n   },\n   {\n     "data": {\n       "service": "Premium service (online)",\n       "cost": "$45",\n       "processing": "5 business days including delivery by courier"\n     }\n   }\n ]\'\n>\n</ontario-table>',
+						},
+					],
+					text: '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.',
+				},
+				attribute: 'table-data',
+				reflect: false,
+			},
+			zebraStripes: {
+				type: 'string',
+				mutable: false,
+				complexType: {
+					original: "'auto' | 'disabled' | 'enabled' | undefined",
+					resolved: '"auto" | "disabled" | "enabled" | undefined',
+					references: {},
+				},
+				required: false,
+				optional: true,
+				docs: {
+					tags: [],
+					text: 'Indicates whether or not the table data should have alternate row zebra striping.\n\nThis 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 \u201Cenabled\u201D. If no zebra stripes are needed, it should be set to \u201Cdisabled\u201D.\n\nThe default will be set to \u201Cauto\u201D.',
+				},
+				attribute: 'zebra-stripes',
+				reflect: false,
+				defaultValue: "'auto'",
+			},
+			condensed: {
+				type: 'boolean',
+				mutable: false,
+				complexType: {
+					original: 'boolean | undefined',
+					resolved: 'boolean | undefined',
+					references: {},
+				},
+				required: false,
+				optional: true,
+				docs: {
+					tags: [],
+					text: '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\nThis is optional. By default it will be set to \u201Cfalse\u201D.',
+				},
+				attribute: 'condensed',
+				reflect: false,
+				defaultValue: 'false',
+			},
+			fullWidth: {
+				type: 'boolean',
+				mutable: false,
+				complexType: {
+					original: 'boolean | undefined',
+					resolved: 'boolean | undefined',
+					references: {},
+				},
+				required: false,
+				optional: true,
+				docs: {
+					tags: [],
+					text: 'Used to specify whether or not the table should extend the full width of its container.\n\nThis is optional. By default, it will be set to \u201Cfalse\u201D',
+				},
+				attribute: 'full-width',
+				reflect: false,
+				defaultValue: 'false',
+			},
+		};
+	}
+	static get states() {
+		return {
+			tableColumnsState: {},
+			tableDataState: {},
+			tableFooterState: {},
+		};
+	}
+	static get elementRef() {
+		return 'element';
+	}
+	static get watchers() {
+		return [
+			{
+				propName: 'tableColumns',
+				methodName: 'processTableColumns',
+			},
+			{
+				propName: 'tableData',
+				methodName: 'processTableData',
+			},
+		];
+	}
+}
+//# sourceMappingURL=ontario-table.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ontario-table.js","sourceRoot":"","sources":["../../../src/components/ontario-table/ontario-table.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, h, Element, Prop, State, Watch, getAssetPath } from '@stencil/core';\n\nimport { Table, TableColumnOptions, TableRowOptions } from './table.interface';\n\nimport { validateTableColumns, validateTableRowOptions } from './utils/ontario-table-validation';\n\nimport { ConsoleMessageClass } from '../../utils/console-message/console-message';\nimport { ConsoleType } from '../../utils/console-message/console-message.enum';\nimport { extractValuesByKey, organizeObjectKeys, removeObjectsBySpecificKey } from '../../utils/helper/utils';\n\n@Component({\n\ttag: 'ontario-table',\n\tstyleUrl: 'ontario-table.scss',\n\tshadow: true,\n\tassetsDirs: ['./assets'],\n})\nexport class OntarioTable implements Table {\n\t@Element() element: HTMLElement;\n\tprivate tableScrollWrapper: HTMLElement;\n\tprivate tableScrollDiv: HTMLElement;\n\tprivate table: HTMLElement;\n\n\t/**\n\t * Specifies the caption (or title) of the table.\n\t *\n\t * This is optional.\n\t */\n\t@Prop() caption?: string | undefined;\n\n\t/**\n\t * Used to define the columns of the table.\n\t *\n\t * @example;\n\t * <ontario-table\n\t *    table-columns='[\n\t *      { \"title\": \"Type of service\", \"key\": \"service\" },\n\t *      { \"title\": \"Processing and delivery\", \"key\": \"processing\" },\n\t *      { \"title\": \"Cost\", \"key\": \"cost\", \"type\": \"numeric\" }\n\t *    ]'\n\t * >\n\t * </ontario-table>\n\t */\n\t@Prop() tableColumns: string | TableColumnOptions[];\n\n\t/**\n\t * Used to define the table body data. Note that the keys passed to the `data` object in the tableData should match the keys of the columns defined in the tableColumns prop.\n\t *\n\t * @example\n\t * <ontario-table\n\t *  table-data='[\n\t *    {\n\t *      \"data\": {\n\t *        \"service\": \"Regular service (online)\",\n\t *        \"processing\": \"15 business days plus delivery by Canada Post\",\n\t *        \"cost\": \"$15\"\n\t *      }\n\t *    },\n\t *    {\n\t *      \"data\": {\n\t *        \"service\": \"Premium service (online)\",\n\t *        \"cost\": \"$45\",\n\t *        \"processing\": \"5 business days including delivery by courier\"\n\t *      }\n\t *    }\n\t *  ]'\n\t * >\n\t * </ontario-table>\n\t */\n\t@Prop() tableData: string | TableRowOptions[];\n\n\t/**\n\t * Indicates whether or not the table data should have alternate row zebra striping.\n\t *\n\t * This is optional. By default, zebra striping will be added when the table rows extend 5 rows. If zebra striping is needed to table rows less than 5 rows, the prop should be set to “enabled”. If no zebra stripes are needed, it should be set to “disabled”.\n\t *\n\t * The default will be set to “auto”.\n\t */\n\t@Prop() zebraStripes?: 'auto' | 'disabled' | 'enabled' | undefined = 'auto';\n\n\t/**\n\t * Used to specify whether or not table data in cells should have reduced top and bottom padding. This is useful for pages with multiple data-heavy tables such as a budget or financial data.\n\t *\n\t * This is optional. By default it will be set to “false”.\n\t */\n\t@Prop() condensed?: boolean | undefined = false;\n\n\t/**\n\t * Used to specify whether or not the table should extend the full width of its container.\n\t *\n\t * This is optional. By default, it will be set to “false”\n\t */\n\t@Prop() fullWidth?: boolean | undefined = false;\n\n\t@State() private tableColumnsState: TableColumnOptions[];\n\n\t@State() private tableDataState: TableRowOptions[];\n\n\t@State() private tableFooterState: TableRowOptions[];\n\n\t@Watch('tableColumns')\n\tprivate processTableColumns() {\n\t\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"]}

package/dist/collection/components/ontario-table/table.interface.js

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=table.interface.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"table.interface.js","sourceRoot":"","sources":["../../../src/components/ontario-table/table.interface.ts"],"names":[],"mappings":"","sourcesContent":["export interface TableColumnOptions {\n\t/**\n\t * The text for the column.\n\t */\n\ttitle: string;\n\n\t/**\n\t * The unique key of the column. This will be the reference point for the table data rows.\n\t */\n\tkey: string | number;\n\n\t/**\n\t * The type of display for the data that falls under this column. This can either be set to “string” or “numeric”.\n\t *\n\t * This is optional. If no prop is passed, the default will be set to “string”.\n\t */\n\ttype?: 'string' | 'numeric' | undefined;\n\n\t/**\n\t * The width of the column. The number values are equivalent to the grid column width values.\n\t *\n\t * This is optional. By default the column width will fit its max content.\n\t */\n\tcolSpan?: 1 | 2 | 3 | 4 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | undefined;\n}\n\nexport interface TableRowOptions {\n\t/**\n\t * The data to input into the table rows.\n\t *\n\t * The keys for the data objects passed in should reflect the respective keys of the TableColumnOptions.\n\t */\n\tdata: { [key: string]: string | number | undefined };\n\n\t/**\n\t * A boolean value to indicate whether or not the row should be highlighted.\n\t *\n\t * This is optional. If no prop is passed, it will default to false.\n\t */\n\thighlight?: boolean | undefined;\n\n\t/**\n\t * A boolean value to indicate whether or not the row should be styled as a subtotal.\n\t *\n\t * This is optional. If no prop is passed, it will default to false.\n\t */\n\tsubtotal?: boolean | undefined;\n\n\t/**\n\t * A boolean value to indicate whether or not the row should be coded as a table footer.\n\t *\n\t * This is optional. If no prop is passed, it will default to false.\n\t */\n\tfooter?: boolean | undefined;\n}\n\nexport interface Table {\n\t/**\n\t * Specifies the caption (or title) of the table.\n\t *\n\t * This is optional.\n\t */\n\tcaption?: string | undefined;\n\n\t/**\n\t * Used to define the columns of the table.\n\t */\n\ttableColumns: 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\ttableData: 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\tzebraStripes?: 'auto' | 'disabled' | 'enabled' | undefined;\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\tcondensed?: boolean | undefined;\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\tfullWidth?: boolean | undefined;\n}\n"]}

package/dist/collection/components/ontario-table/test/ontario-table.e2e.js

@@ -0,0 +1,166 @@
+import { newE2EPage } from '@stencil/core/testing';
+describe('ontario-table', () => {
+	it('renders', async () => {
+		const page = await newE2EPage();
+		await page.setContent(`
+		<ontario-table
+			caption="Marriage certificate: cost and delivery"
+			table-columns='[
+				{ "title": "Type of service", "key": "service" },
+				{ "title": "Processing and delivery", "key": "processing" }
+			]'
+			table-data='[
+				{
+					"data" : {
+						"service": "Regular service (online)",
+						"processing": "15 business days plus delivery by Canada Post"
+					}
+				},
+				{
+					"data" : {
+						"service": "Premium service (online)",
+						"processing": "5 business days including delivery by courier"
+					}
+				}
+			]'
+		></ontario-table>
+		`);
+		const component = await page.find('ontario-table');
+		const element = await page.find('ontario-table >>> div');
+		expect(component).toHaveClass('hydrated');
+		expect(element).toHaveClass('ontario-table-container');
+	});
+	it('should render the default table when no optional props are passed', async () => {
+		const page = await newE2EPage();
+		await page.setContent(`
+		<ontario-table
+			caption="Marriage certificate: cost and delivery"
+			table-columns='[
+				{ "title": "Type of service", "key": "service" },
+				{ "title": "Processing and delivery", "key": "processing" }
+			]'
+			table-data='[
+				{
+					"data" : {
+						"service": "Regular service (online)",
+						"processing": "15 business days plus delivery by Canada Post"
+					}
+				},
+				{
+					"data" : {
+						"service": "Premium service (online)",
+						"processing": "5 business days including delivery by courier"
+					}
+				}
+			]'
+		></ontario-table>
+		`);
+		const element = await page.find('ontario-table >>> table');
+		expect(element).not.toHaveClasses(['ontario-table--condensed', 'ontario-table--full-container-width']);
+		const twoColumnHeader = await page.find('ontario-table >>> .ontario-table-header--column-span-2');
+		expect(twoColumnHeader).toBeNull();
+		const numericTableCells = await page.find('ontario-table >>> .ontario-table-cell--numeric');
+		expect(numericTableCells).toBeNull();
+		const highlightClass = await page.find('ontario-table >>> .ontario-table-row--highlight');
+		expect(highlightClass).toBeNull();
+		const subtotalRowClass = await page.find('ontario-table >>> .ontario-table-row--subtotal');
+		expect(subtotalRowClass).toBeNull();
+		const footer = await page.find('ontario-table >>> tfoot');
+		expect(footer).toBeNull();
+	});
+	it('should render the correct classes when multiple props are passed', async () => {
+		const page = await newE2EPage();
+		await page.setContent(`
+		<ontario-table
+			caption="Number of engagement sessions by business area from 2016–2020"
+			zebra-stripes="enabled"
+			full-width="true"
+			condensed="true"
+			table-columns='[
+				{ "title": "Business area", "key": "business", "colSpan": 2 },
+				{ "title": "April 2016 – March 2017", "key": "date1", "type": "numeric" },
+				{ "title": "April 2017 - March 2018", "key": "date2", "type": "numeric" },
+				{ "title": "April 2018 - March 2019", "key": "date3", "type": "numeric" },
+				{ "title": "April 2019 - March 2020", "key": "date4", "type": "numeric" }
+			]'
+			table-data='[
+				{
+					"data" : {
+						"business": "Aggregates and petroleum",
+						"date1": "35",
+						"date2": "32",
+						"date3": "45",
+						"date4": "71"
+					}
+				},
+				{
+					"data" : {
+						"business": "Fish and wildlife",
+						"date1": "162",
+						"date2": "240",
+						"date3": "178",
+						"date4": "162"
+					}
+				},
+				{
+					"data": {
+						"business": "Forestry",
+						"date1": "182",
+						"date2": "170",
+						"date3": "235",
+						"date4": "242"
+					},
+					"highlight": "true"
+				},
+				{
+					"data": {
+						"business": "Lands and water",
+						"date1": "79",
+						"date2": "101",
+						"date3": "42",
+						"date4": "70"
+					}
+				},
+				{
+					"data": {
+						"business": "General",
+						"date1": "56",
+						"date2": "37",
+						"date3": "64",
+						"date4": "46"
+					},
+					"subtotal": "true"
+				},
+				{ 
+					"data": {
+						"business": "Total row",
+						"date1": "514",
+						"date2": "580",
+						"date3": "564",
+						"date4": "591"
+					},
+					"footer": true
+				}
+			]'
+		>
+		</ontario-table>
+		`);
+		const element = await page.find('ontario-table >>> table');
+		expect(element).toHaveClasses([
+			'ontario-table--condensed',
+			'ontario-table--full-container-width',
+			'ontario-table--zebra-stripes-enabled',
+		]);
+		const twoColumnHeader = await page.find('ontario-table >>> .ontario-table-header--column-span-2');
+		expect(twoColumnHeader).not.toBeNull();
+		const numericTableCells = await page.find('ontario-table >>> .ontario-table-cell--numeric');
+		expect(numericTableCells).not.toBeNull();
+		const highlightClass = await page.find('ontario-table >>> .ontario-table-row--highlight');
+		expect(highlightClass).not.toBeNull();
+		const subtotalRowClass = await page.find('ontario-table >>> .ontario-table-row--subtotal');
+		expect(subtotalRowClass).not.toBeNull();
+		const footer = await page.find('ontario-table >>> tfoot');
+		expect(footer).not.toBeNull();
+	});
+});
+//# sourceMappingURL=ontario-table.e2e.js.map

package/dist/collection/components/ontario-table/test/ontario-table.e2e.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ontario-table.e2e.js","sourceRoot":"","sources":["../../../../src/components/ontario-table/test/ontario-table.e2e.ts"],"names":[],"mappings":"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","sourcesContent":["import { newE2EPage } from '@stencil/core/testing';\n\ndescribe('ontario-table', () => {\n\tit('renders', async () => {\n\t\tconst page = await newE2EPage();\n\t\tawait page.setContent(`\n\t\t<ontario-table\n\t\t\tcaption=\"Marriage certificate: cost and delivery\"\n\t\t\ttable-columns='[\n\t\t\t\t{ \"title\": \"Type of service\", \"key\": \"service\" },\n\t\t\t\t{ \"title\": \"Processing and delivery\", \"key\": \"processing\" }\n\t\t\t]'\n\t\t\ttable-data='[\n\t\t\t\t{\n\t\t\t\t\t\"data\" : {\n\t\t\t\t\t\t\"service\": \"Regular service (online)\",\n\t\t\t\t\t\t\"processing\": \"15 business days plus delivery by Canada Post\"\n\t\t\t\t\t}\n\t\t\t\t},\n\t\t\t\t{\n\t\t\t\t\t\"data\" : {\n\t\t\t\t\t\t\"service\": \"Premium service (online)\",\n\t\t\t\t\t\t\"processing\": \"5 business days including delivery by courier\"\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t]'\n\t\t></ontario-table>\n\t\t`);\n\t\tconst component = await page.find('ontario-table');\n\t\tconst element = await page.find('ontario-table >>> div');\n\n\t\texpect(component).toHaveClass('hydrated');\n\t\texpect(element).toHaveClass('ontario-table-container');\n\t});\n\n\tit('should render the default table when no optional props are passed', async () => {\n\t\tconst page = await newE2EPage();\n\t\tawait page.setContent(`\n\t\t<ontario-table\n\t\t\tcaption=\"Marriage certificate: cost and delivery\"\n\t\t\ttable-columns='[\n\t\t\t\t{ \"title\": \"Type of service\", \"key\": \"service\" },\n\t\t\t\t{ \"title\": \"Processing and delivery\", \"key\": \"processing\" }\n\t\t\t]'\n\t\t\ttable-data='[\n\t\t\t\t{\n\t\t\t\t\t\"data\" : {\n\t\t\t\t\t\t\"service\": \"Regular service (online)\",\n\t\t\t\t\t\t\"processing\": \"15 business days plus delivery by Canada Post\"\n\t\t\t\t\t}\n\t\t\t\t},\n\t\t\t\t{\n\t\t\t\t\t\"data\" : {\n\t\t\t\t\t\t\"service\": \"Premium service (online)\",\n\t\t\t\t\t\t\"processing\": \"5 business days including delivery by courier\"\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t]'\n\t\t></ontario-table>\n\t\t`);\n\t\tconst element = await page.find('ontario-table >>> table');\n\t\texpect(element).not.toHaveClasses(['ontario-table--condensed', 'ontario-table--full-container-width']);\n\n\t\tconst twoColumnHeader = await page.find('ontario-table >>> .ontario-table-header--column-span-2');\n\t\texpect(twoColumnHeader).toBeNull();\n\n\t\tconst numericTableCells = await page.find('ontario-table >>> .ontario-table-cell--numeric');\n\t\texpect(numericTableCells).toBeNull();\n\n\t\tconst highlightClass = await page.find('ontario-table >>> .ontario-table-row--highlight');\n\t\texpect(highlightClass).toBeNull();\n\n\t\tconst subtotalRowClass = await page.find('ontario-table >>> .ontario-table-row--subtotal');\n\t\texpect(subtotalRowClass).toBeNull();\n\n\t\tconst footer = await page.find('ontario-table >>> tfoot');\n\t\texpect(footer).toBeNull();\n\t});\n\n\tit('should render the correct classes when multiple props are passed', async () => {\n\t\tconst page = await newE2EPage();\n\t\tawait page.setContent(`\n\t\t<ontario-table\n\t\t\tcaption=\"Number of engagement sessions by business area from 2016–2020\"\n\t\t\tzebra-stripes=\"enabled\"\n\t\t\tfull-width=\"true\"\n\t\t\tcondensed=\"true\"\n\t\t\ttable-columns='[\n\t\t\t\t{ \"title\": \"Business area\", \"key\": \"business\", \"colSpan\": 2 },\n\t\t\t\t{ \"title\": \"April 2016 – March 2017\", \"key\": \"date1\", \"type\": \"numeric\" },\n\t\t\t\t{ \"title\": \"April 2017 - March 2018\", \"key\": \"date2\", \"type\": \"numeric\" },\n\t\t\t\t{ \"title\": \"April 2018 - March 2019\", \"key\": \"date3\", \"type\": \"numeric\" },\n\t\t\t\t{ \"title\": \"April 2019 - March 2020\", \"key\": \"date4\", \"type\": \"numeric\" }\n\t\t\t]'\n\t\t\ttable-data='[\n\t\t\t\t{\n\t\t\t\t\t\"data\" : {\n\t\t\t\t\t\t\"business\": \"Aggregates and petroleum\",\n\t\t\t\t\t\t\"date1\": \"35\",\n\t\t\t\t\t\t\"date2\": \"32\",\n\t\t\t\t\t\t\"date3\": \"45\",\n\t\t\t\t\t\t\"date4\": \"71\"\n\t\t\t\t\t}\n\t\t\t\t},\n\t\t\t\t{\n\t\t\t\t\t\"data\" : {\n\t\t\t\t\t\t\"business\": \"Fish and wildlife\",\n\t\t\t\t\t\t\"date1\": \"162\",\n\t\t\t\t\t\t\"date2\": \"240\",\n\t\t\t\t\t\t\"date3\": \"178\",\n\t\t\t\t\t\t\"date4\": \"162\"\n\t\t\t\t\t}\n\t\t\t\t},\n\t\t\t\t{\n\t\t\t\t\t\"data\": {\n\t\t\t\t\t\t\"business\": \"Forestry\",\n\t\t\t\t\t\t\"date1\": \"182\",\n\t\t\t\t\t\t\"date2\": \"170\",\n\t\t\t\t\t\t\"date3\": \"235\",\n\t\t\t\t\t\t\"date4\": \"242\"\n\t\t\t\t\t},\n\t\t\t\t\t\"highlight\": \"true\"\n\t\t\t\t},\n\t\t\t\t{\n\t\t\t\t\t\"data\": {\n\t\t\t\t\t\t\"business\": \"Lands and water\",\n\t\t\t\t\t\t\"date1\": \"79\",\n\t\t\t\t\t\t\"date2\": \"101\",\n\t\t\t\t\t\t\"date3\": \"42\",\n\t\t\t\t\t\t\"date4\": \"70\"\n\t\t\t\t\t}\n\t\t\t\t},\n\t\t\t\t{\n\t\t\t\t\t\"data\": {\n\t\t\t\t\t\t\"business\": \"General\",\n\t\t\t\t\t\t\"date1\": \"56\",\n\t\t\t\t\t\t\"date2\": \"37\",\n\t\t\t\t\t\t\"date3\": \"64\",\n\t\t\t\t\t\t\"date4\": \"46\"\n\t\t\t\t\t},\n\t\t\t\t\t\"subtotal\": \"true\"\n\t\t\t\t},\n\t\t\t\t{ \n\t\t\t\t\t\"data\": {\n\t\t\t\t\t\t\"business\": \"Total row\",\n\t\t\t\t\t\t\"date1\": \"514\",\n\t\t\t\t\t\t\"date2\": \"580\",\n\t\t\t\t\t\t\"date3\": \"564\",\n\t\t\t\t\t\t\"date4\": \"591\"\n\t\t\t\t\t},\n\t\t\t\t\t\"footer\": true\n\t\t\t\t}\n\t\t\t]'\n\t\t>\n\t\t</ontario-table>\n\t\t`);\n\n\t\tconst element = await page.find('ontario-table >>> table');\n\t\texpect(element).toHaveClasses([\n\t\t\t'ontario-table--condensed',\n\t\t\t'ontario-table--full-container-width',\n\t\t\t'ontario-table--zebra-stripes-enabled',\n\t\t]);\n\n\t\tconst twoColumnHeader = await page.find('ontario-table >>> .ontario-table-header--column-span-2');\n\t\texpect(twoColumnHeader).not.toBeNull();\n\n\t\tconst numericTableCells = await page.find('ontario-table >>> .ontario-table-cell--numeric');\n\t\texpect(numericTableCells).not.toBeNull();\n\n\t\tconst highlightClass = await page.find('ontario-table >>> .ontario-table-row--highlight');\n\t\texpect(highlightClass).not.toBeNull();\n\n\t\tconst subtotalRowClass = await page.find('ontario-table >>> .ontario-table-row--subtotal');\n\t\texpect(subtotalRowClass).not.toBeNull();\n\n\t\tconst footer = await page.find('ontario-table >>> tfoot');\n\t\texpect(footer).not.toBeNull();\n\t});\n});\n"]}