npm - @ongov/ontario-design-system-component-library - Versions diffs - 5.0.0-alpha.6 → 6.0.0-alpha.1 - Mend

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

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (2485) hide show

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

	@@ -1 +1 @@
1	- {"file":"ontario-table.js","mappings":"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","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/fonts.variables' as fonts;\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:\n\t\tlinear-gradient(to right, colours.$ontario-colour-white 30%, $ontario-table-shadow--cover),\n\t\tlinear-gradient(to right, $ontario-table-shadow--cover, colours.$ontario-colour-white 70%) 0 100%,\n\t\tlinear-gradient(to right, $ontario-table-shadow--black 0%, $ontario-table-shadow--clear 100.01%),\n\t\tlinear-gradient(to left, $ontario-table-shadow--black 0%, $ontario-table-shadow--clear 100.01%);\n\tbackground-repeat: no-repeat;\n\tbackground-size:\n\t\tglobalFunctions.px-to-rem(40) 100%,\n\t\tglobalFunctions.px-to-rem(40) 100%,\n\t\tglobalFunctions.px-to-rem(14) 100%,\n\t\tglobalFunctions.px-to-rem(14) 100%;\n\tbackground-position:\n\t\t0 0,\n\t\t100%,\n\t\t0 0,\n\t\t100%;\n\tbackground-attachment: local, local, scroll, scroll;\n\toverflow-x: auto;\n\n\t@media screen and (max-width: breakpoints.$small-breakpoint) {\n\t\toverflow-x: scroll;\n\t}\n}\n\n.ontario-table-scroll--wrapper {\n\theight: $ontario-table-scroller--height;\n\toverflow-x: auto;\n\toverflow-y: hidden;\n\tdisplay: block;\n}\n\n.ontario-table-container table {\n\tborder-collapse: collapse;\n\tdisplay: table;\n\tfont-size: globalFunctions.px-to-rem(17);\n\tfont-weight: fontWeights.$ontario-font-weights-normal;\n\tline-height: globalFunctions.px-to-rem(26);\n\n\t&.ontario-table--full-container-width {\n\t\tdisplay: table;\n\t\twidth: 100%;\n\t}\n\n\t&.ontario-table--zebra-stripes-enabled {\n\t\ttbody {\n\t\t\ttr:nth-child(even) {\n\t\t\t\tbackground-color: $ontario-table-zebra-striping;\n\t\t\t}\n\t\t}\n\t}\n\n\t&:not(.ontario-table--no-zebra-stripes) {\n\t\ttbody {\n\t\t\ttr:first-child:nth-last-child(n + 6),\n\t\t\ttr:first-child:nth-last-child(n + 6) ~ tr {\n\t\t\t\t&:nth-child(even) {\n\t\t\t\t\tbackground-color: $ontario-table-zebra-striping;\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\t}\n\n\t@media screen and (max-width: breakpoints.$small-breakpoint) {\n\t\tfont-size: fontSizes.$ontario-font-size-standard-body-text;\n\t}\n}\n\n.ontario-table-container caption {\n\tbackground-color: $ontario-table-caption-background;\n\tdisplay: table-caption;\n\tfont-size: globalFunctions.px-to-rem(22);\n\tfont-weight: fontWeights.$ontario-font-weights-bold;\n\tline-height: globalFunctions.px-to-rem(35);\n\tpadding: $ontario-table-caption-custom-spacing spacing.$spacing-4 $ontario-table-caption-custom-spacing\n\t\tspacing.$spacing-5;\n\ttext-align: left;\n\n\t@media screen and (max-width: breakpoints.$small-breakpoint) {\n\t\tfont-size: fontSizes.$ontario-font-size-large;\n\t\tline-height: globalFunctions.px-to-rem(30);\n\t\tpadding-left: spacing.$spacing-4;\n\t}\n}\n\n.ontario-table-container table thead {\n\tborder: solid;\n\tborder-width: globalFunctions.px-to-rem(3) 0;\n\tborder-color: colours.$ontario-colour-black;\n\tvertical-align: text-top;\n\n\tth {\n\t\tfont-size: globalFunctions.px-to-rem(18);\n\t\tline-height: lineHeights.$ontario-line-height-7;\n\t\tmargin: spacing.$spacing-0;\n\t\tpadding: (spacing.$spacing-5 + spacing.$spacing-1) spacing.$spacing-4 (spacing.$spacing-5 + spacing.$spacing-1)\n\t\t\tspacing.$spacing-5;\n\t\ttext-align: left;\n\t\ttext-size-adjust: none;\n\t\t-webkit-text-size-adjust: none;\n\n\t\t@media screen and (max-width: breakpoints.$small-breakpoint) {\n\t\t\tfont-size: fontSizes.$ontario-font-size-standard-body-text;\n\t\t\tline-height: globalFunctions.px-to-rem(21);\n\t\t\tpadding: spacing.$spacing-5 spacing.$spacing-2 spacing.$spacing-5 spacing.$spacing-4;\n\t\t}\n\t}\n\n\tth.ontario-table-cell--numeric {\n\t\tpadding: (spacing.$spacing-5 + spacing.$spacing-1) spacing.$spacing-5 (spacing.$spacing-5 + spacing.$spacing-1)\n\t\t\tspacing.$spacing-4;\n\t\ttext-align: right;\n\n\t\t@media screen and (max-width: breakpoints.$small-breakpoint) {\n\t\t\tpadding: spacing.$spacing-5 spacing.$spacing-4 spacing.$spacing-5 spacing.$spacing-2;\n\t\t}\n\t}\n}\n\n.ontario-table-container table tbody {\n\tfont-size: fontSizes.$ontario-font-size-standard-body-text;\n\tvertical-align: text-top;\n\n\ttr {\n\t\tborder: solid;\n\t\tborder-width: globalFunctions.px-to-rem(1) 0;\n\t\tborder-color: $ontario-table-row-divider;\n\t}\n\n\ttr:last-child {\n\t\tborder-width: globalFunctions.px-to-rem(3) 0;\n\t\tborder-top-width: 0;\n\t\tborder-color: colours.$ontario-colour-black;\n\t}\n\n\ttr.ontario-table-row--highlight {\n\t\tbackground-color: $ontario-table-highlight !important; // the important flag is needed to override zebra stripe background colour classes\n\n\t\tth {\n\t\t\tpadding-left: spacing.$spacing-5;\n\t\t\tdisplay: flex;\n\t\t\tposition: relative;\n\n\t\t\timg.ontario-table--highlight-indicator {\n\t\t\t\t// Width of yellow triangle svg\n\t\t\t\twidth: globalFunctions.px-to-rem(8);\n\t\t\t\tposition: absolute;\n\t\t\t\t// Distance from top of svg to top of container\n\t\t\t\ttop: globalFunctions.px-to-rem(24);\n\t\t\t\tleft: 0;\n\t\t\t}\n\t\t}\n\t}\n\n\ttr.ontario-table-row--subtotal {\n\t\tbackground-color: $ontario-table-subtotal !important; // the important flag is needed to override zebra stripe background colour classes\n\t}\n}\n\n.ontario-table-container tbody th,\n.ontario-table-container tfoot th,\n.ontario-table-container table td {\n\tpadding: globalFunctions.px-to-rem(19) spacing.$spacing-4 globalFunctions.px-to-rem(19) spacing.$spacing-5;\n\ttext-align: left;\n\tletter-spacing: globalFunctions.px-to-rem(0.4);\n}\n\n.ontario-table-container tbody th,\n.ontario-table-container tfoot th {\n\tfont-weight: fontWeights.$ontario-font-weights-bold;\n\n\t@media screen and (max-width: breakpoints.$small-breakpoint) {\n\t\tfont-size: fontSizes.$ontario-font-size-standard-body-text;\n\t\tline-height: globalFunctions.px-to-rem(26);\n\t\tpadding-right: spacing.$spacing-2;\n\t\tpadding-left: spacing.$spacing-4;\n\t}\n}\n\n.ontario-table-container table td {\n\timg {\n\t\tvertical-align: top;\n\n\t\t@media screen and (max-width: breakpoints.$small-breakpoint) {\n\t\t\tmax-width: none;\n\t\t}\n\t}\n\n\t&.ontario-table-cell--numeric {\n\t\tfont-family: fonts.$ontario-font-courier-prime;\n\t\tfont-size: globalFunctions.px-to-rem(17);\n\t\tpadding: globalFunctions.px-to-rem(19) spacing.$spacing-5 globalFunctions.px-to-rem(19) spacing.$spacing-4;\n\t\ttext-align: right;\n\n\t\tstrong {\n\t\t\tfont-family: fonts.$ontario-font-courier-prime;\n\t\t}\n\t}\n}\n\n.ontario-table-container tbody tr.ontario-table-row--subtotal,\n.ontario-table-container tfoot tr {\n\tborder: solid;\n\tborder-width: globalFunctions.px-to-rem(3) 0;\n\tfont-size: fontSizes.$ontario-font-size-standard-body-text;\n\tborder-color: colours.$ontario-colour-black;\n\n\tth {\n\t\tpadding: globalFunctions.px-to-rem(23) spacing.$spacing-4 globalFunctions.px-to-rem(23) spacing.$spacing-5;\n\t}\n\n\ttd {\n\t\tfont-weight: fontWeights.$ontario-font-weights-bold;\n\t\tpadding: globalFunctions.px-to-rem(23) spacing.$spacing-4 globalFunctions.px-to-rem(23) spacing.$spacing-5;\n\t}\n}\n\n.ontario-table-container tfoot {\n\tvertical-align: text-top;\n\n\ttr {\n\t\tbackground-color: $ontario-table-total !important; // the important flag is needed to override zebra stripe background colour classes\n\t}\n}\n\n// Column classes\n.ontario-table-header--column-span-1 {\n\t//Equivalent to 1 grid columns\n\tmin-width: 8.33333vw;\n}\n\n.ontario-table-header--column-span-2 {\n\t//Equivalent to 2 grid columns\n\tmin-width: 16.66666vw;\n}\n\n.ontario-table-header--column-span-3 {\n\t//Equivalent to 3 grid columns\n\tmin-width: 25vw;\n}\n\n.ontario-table-header--column-span-4 {\n\t//Equivalent to 4 grid columns\n\tmin-width: 33.33333vw;\n}\n\n.ontario-table-header--column-span-5 {\n\t//Equivalent to 5 grid columns\n\tmin-width: 41.66666vw;\n}\n\n.ontario-table-header--column-span-6 {\n\t//Equivalent to 6 grid columns\n\tmin-width: 50vw;\n}\n\n.ontario-table-header--column-span-7 {\n\t//Equivalent to 7 grid columns\n\tmin-width: 58.33333vw;\n}\n\n.ontario-table-header--column-span-8 {\n\t//Equivalent to 8 grid columns\n\tmin-width: 66.66666vw;\n}\n\n.ontario-table-header--column-span-9 {\n\t//Equivalent to 9 grid columns\n\tmin-width: 75vw;\n}\n\n.ontario-table-header--column-span-10 {\n\t//Equivalent to 10 grid columns\n\tmin-width: 83.33333vw;\n}\n\n.ontario-table-header--column-span-11 {\n\t//Equivalent to 11 grid columns\n\tmin-width: 91.66666vw;\n}\n\n.ontario-table-header--column-span-12 {\n\t//Equivalent to 12 grid columns\n\tmin-width: 100vw;\n}\n\n// Condensed tables\n.ontario-table-container .ontario-table--condensed {\n\ttd {\n\t\tpadding: spacing.$spacing-3 spacing.$spacing-4 spacing.$spacing-3 spacing.$spacing-5;\n\t\ttext-align: left;\n\t}\n\n\ttd.ontario-table-cell--numeric {\n\t\tpadding: spacing.$spacing-3 spacing.$spacing-5 spacing.$spacing-3 spacing.$spacing-4;\n\t\tfont-size: globalFunctions.px-to-rem(17);\n\t\ttext-align: right;\n\t}\n\n\ttbody th,\n\ttfoot th {\n\t\tpadding: spacing.$spacing-3 spacing.$spacing-4 spacing.$spacing-3 spacing.$spacing-5;\n\t}\n\n\ttr.ontario-table-row--highlight th img.ontario-table--highlight-indicator {\n\t\ttop: globalFunctions.px-to-rem(17);\n\t}\n\n\ttr.ontario-table-row--subtotal,\n\ttfoot tr {\n\t\tth,\n\t\ttd {\n\t\t\tpadding: spacing.$spacing-4 spacing.$spacing-4 spacing.$spacing-4 spacing.$spacing-5;\n\t\t}\n\n\t\ttd.ontario-table-cell--numeric {\n\t\t\ttext-align: right;\n\t\t\tpadding: spacing.$spacing-4 spacing.$spacing-5 spacing.$spacing-4 spacing.$spacing-4;\n\t\t}\n\t}\n\n\t@media screen and (max-width: breakpoints.$small-breakpoint) {\n\t\ttd {\n\t\t\tpadding: spacing.$spacing-3 spacing.$spacing-2 spacing.$spacing-3 spacing.$spacing-4;\n\t\t\tfont-size: fontSizes.$ontario-font-size-standard-body-text;\n\t\t}\n\n\t\ttd.ontario-table-cell--numeric {\n\t\t\tpadding: spacing.$spacing-3 spacing.$spacing-4 spacing.$spacing-3 spacing.$spacing-2;\n\t\t}\n\n\t\ttbody th {\n\t\t\tpadding: spacing.$spacing-3 spacing.$spacing-2 spacing.$spacing-3 spacing.$spacing-4;\n\t\t}\n\n\t\ttr.ontario-table-row--subtotal,\n\t\ttfoot tr {\n\t\t\tth,\n\t\t\ttd {\n\t\t\t\tpadding: spacing.$spacing-4 spacing.$spacing-2 spacing.$spacing-4 spacing.$spacing-4;\n\t\t\t}\n\n\t\t\ttd.ontario-table-cell--numeric {\n\t\t\t\ttext-align: right;\n\t\t\t\tpadding: spacing.$spacing-4 spacing.$spacing-4 spacing.$spacing-4 spacing.$spacing-2;\n\t\t\t}\n\t\t}\n\t}\n}\n","import { Component, h, Element, Prop, State, Watch, getAssetPath } from '@stencil/core';\n\nimport { Table, TableColumnOptions, TableRowOptions } from './table.interface';\n\nimport { validateTableColumns, validateTableRowOptions } from './utils/ontario-table-validation';\n\nimport { ConsoleMessageClass } from '../../utils/console-message/console-message';\nimport { ConsoleType } from '../../utils/console-message/console-message.enum';\nimport { extractValuesByKey, organizeObjectKeys, removeObjectsBySpecificKey } from '../../utils/helper/utils';\n\n@Component({\n\ttag: 'ontario-table',\n\tstyleUrl: 'ontario-table.scss',\n\tshadow: true,\n\tassetsDirs: ['./assets'],\n})\nexport class OntarioTable implements Table {\n\t@Element() element: HTMLElement;\n\tprivate tableScrollWrapper: HTMLElement;\n\tprivate tableScrollDiv: HTMLElement;\n\tprivate table: HTMLElement;\n\n\t/*\n\t Specifies the caption (or title) of the table.\n\t \n\t This is optional.\n\t /\n\t@Prop() caption?: string \| undefined;\n\n\t/\n\t Used to define the columns of the table.\n\t \n\t @example;\n\t * <ontario-table\n\t * table-columns='[\n\t * { \"title\": \"Type of service\", \"key\": \"service\" },\n\t * { \"title\": \"Processing and delivery\", \"key\": \"processing\" },\n\t * { \"title\": \"Cost\", \"key\": \"cost\", \"type\": \"numeric\" }\n\t * ]'\n\t * >\n\t * </ontario-table>\n\t /\n\t@Prop() tableColumns: string \| TableColumnOptions[];\n\n\t/\n\t Used to define the table body data. Note that the keys passed to the `data` object in the tableData should match the keys of the columns defined in the tableColumns prop.\n\t \n\t @example\n\t * <ontario-table\n\t * table-data='[\n\t * {\n\t * \"data\": {\n\t * \"service\": \"Regular service (online)\",\n\t * \"processing\": \"15 business days plus delivery by Canada Post\",\n\t * \"cost\": \"$15\"\n\t * }\n\t * },\n\t * {\n\t * \"data\": {\n\t * \"service\": \"Premium service (online)\",\n\t * \"cost\": \"$45\",\n\t * \"processing\": \"5 business days including delivery by courier\"\n\t * }\n\t * }\n\t * ]'\n\t * >\n\t * </ontario-table>\n\t /\n\t@Prop() tableData: string \| TableRowOptions[];\n\n\t/\n\t Indicates whether or not the table data should have alternate row zebra striping.\n\t \n\t This is optional. By default, zebra striping will be added when the table rows extend 5 rows. If zebra striping is needed to table rows less than 5 rows, the prop should be set to “enabled”. If no zebra stripes are needed, it should be set to “disabled”.\n\t \n\t The default will be set to “auto”.\n\t /\n\t@Prop() zebraStripes?: 'auto' \| 'disabled' \| 'enabled' \| undefined = 'auto';\n\n\t/\n\t Used to specify whether or not table data in cells should have reduced top and bottom padding. This is useful for pages with multiple data-heavy tables such as a budget or financial data.\n\t \n\t This is optional. By default it will be set to “false”.\n\t /\n\t@Prop() condensed?: boolean \| undefined = false;\n\n\t/\n\t Used to specify whether or not the table should extend the full width of its container.\n\t \n\t This is optional. By default, it will be set to “false”\n\t */\n\t@Prop() fullWidth?: boolean \| undefined = false;\n\n\t@State() private tableColumnsState: TableColumnOptions[];\n\n\t@State() private tableDataState: TableRowOptions[];\n\n\t@State() private tableFooterState: TableRowOptions[];\n\n\t@Watch('tableColumns')\n\tprivate processTableColumns() {\n\t\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\t? `ontario-table--zebra-stripes-enabled`\n\t\t\t\t: ``;\n\t};\n\n\tprivate getTableClasses = () => {\n\t\tlet tableClass = '';\n\t\tif (this.condensed && this.fullWidth) {\n\t\t\ttableClass = `ontario-table--condensed ontario-table--full-container-width`;\n\t\t} else if (this.condensed) {\n\t\t\ttableClass = `ontario-table--condensed`;\n\t\t} else if (this.fullWidth) {\n\t\t\ttableClass = `ontario-table--full-container-width`;\n\t\t}\n\n\t\tconst zebraStripesClass = this.getZebraStripeClass();\n\t\tif (tableClass) {\n\t\t\ttableClass = `${tableClass} ${zebraStripesClass}`;\n\t\t} else {\n\t\t\ttableClass = zebraStripesClass;\n\t\t}\n\n\t\treturn tableClass;\n\t};\n\n\tprivate getColumnClasses = (columnData: TableColumnOptions) => {\n\t\tif (columnData.type === 'numeric' && columnData.colSpan) {\n\t\t\treturn `ontario-table-cell--numeric ontario-table-header--column-span-${columnData.colSpan}`;\n\t\t} else if (columnData.type === 'numeric') {\n\t\t\treturn `ontario-table-cell--numeric`;\n\t\t} else if (columnData.colSpan) {\n\t\t\treturn `ontario-table-header--column-span-${columnData.colSpan}`;\n\t\t}\n\n\t\treturn;\n\t};\n\n\t// A function used to generate the table header and table definitions for the table body and table footer sections.\n\tprivate generateTableDataHTML = (\n\t\tdataType: 'tableData' \| 'tableFooter',\n\t\trowData: any,\n\t\tcolumns: (string \| number \| undefined)[],\n\t\trowClass?: string \| undefined,\n\t) => {\n\t\treturn (\n\t\t\t<tr class={dataType === 'tableData' ? rowClass : ''}>\n\t\t\t\t{this.tableColumnsState.map((column, index) => {\n\t\t\t\t\tconst type = column.type;\n\t\t\t\t\tconst tdClass = type === 'numeric' ? `ontario-table-cell--numeric` : '';\n\n\t\t\t\t\treturn index === 0 ? (\n\t\t\t\t\t\t<th scope=\"row\" innerHTML={rowData.data[`${columns[0]}`]}>\n\t\t\t\t\t\t\t{dataType === 'tableData' && rowData.highlight && (\n\t\t\t\t\t\t\t\t<img\n\t\t\t\t\t\t\t\t\tclass=\"ontario-table--highlight-indicator\"\n\t\t\t\t\t\t\t\t\tsrc={getAssetPath('./assets/highlight-indicator.svg')}\n\t\t\t\t\t\t\t\t></img>\n\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t</th>\n\t\t\t\t\t) : (\n\t\t\t\t\t\t<td class={tdClass} innerHTML={rowData.data[`${columns[index]}`]}></td>\n\t\t\t\t\t);\n\t\t\t\t})}\n\t\t\t</tr>\n\t\t);\n\t};\n\n\t// Helper function to apply the scrollbar styles to the tops of tables\n\tprivate applyScrollbar(tableElement: Element, scrollerDiv: HTMLElement) {\n\t\tscrollerDiv.style.visibility = 'visible';\n\t\tscrollerDiv.style.height = '20px';\n\t\tscrollerDiv.style.width = `${tableElement.scrollWidth}px`;\n\t}\n\n\t// The following logic adds scrollbar functionality to the tops of tables depending on their size.\n\tcomponentDidLoad() {\n\t\tconst tables = this.table;\n\t\tconst scrollerDivs = this.tableScrollDiv;\n\t\tconst scrollerWrappers = this.tableScrollWrapper;\n\n\t\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\t? `ontario-table-row--subtotal`\n\t\t\t\t\t\t\t\t\t\t\t: undefined;\n\n\t\t\t\t\t\t\t\t\treturn this.generateTableDataHTML('tableData', rowData, columns, rowClass);\n\t\t\t\t\t\t\t\t})}\n\t\t\t\t\t\t\t</tbody>\n\t\t\t\t\t\t)}\n\t\t\t\t\t\t{!!this.tableFooterState.length && (\n\t\t\t\t\t\t\t<tfoot>\n\t\t\t\t\t\t\t\t{this.tableFooterState.map((footerData) => {\n\t\t\t\t\t\t\t\t\treturn this.generateTableDataHTML('tableData', footerData, columns, undefined);\n\t\t\t\t\t\t\t\t})}\n\t\t\t\t\t\t\t</tfoot>\n\t\t\t\t\t\t)}\n\t\t\t\t\t</table>\n\t\t\t\t</div>\n\t\t\t</div>\n\t\t);\n\t}\n}\n"],"version":3}
1	+ {"file":"ontario-table.js","mappings":"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","names":["OntarioTable","__stencil_proxyCustomElement","HTMLElement"],"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/fonts.variables' as fonts;\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:\n\t\tlinear-gradient(to right, colours.$ontario-colour-white 30%, $ontario-table-shadow--cover),\n\t\tlinear-gradient(to right, $ontario-table-shadow--cover, colours.$ontario-colour-white 70%) 0 100%,\n\t\tlinear-gradient(to right, $ontario-table-shadow--black 0%, $ontario-table-shadow--clear 100.01%),\n\t\tlinear-gradient(to left, $ontario-table-shadow--black 0%, $ontario-table-shadow--clear 100.01%);\n\tbackground-repeat: no-repeat;\n\tbackground-size:\n\t\tglobalFunctions.px-to-rem(40) 100%,\n\t\tglobalFunctions.px-to-rem(40) 100%,\n\t\tglobalFunctions.px-to-rem(14) 100%,\n\t\tglobalFunctions.px-to-rem(14) 100%;\n\tbackground-position:\n\t\t0 0,\n\t\t100%,\n\t\t0 0,\n\t\t100%;\n\tbackground-attachment: local, local, scroll, scroll;\n\toverflow-x: auto;\n\n\t@media screen and (max-width: breakpoints.$small-breakpoint) {\n\t\toverflow-x: scroll;\n\t}\n}\n\n.ontario-table-scroll--wrapper {\n\theight: $ontario-table-scroller--height;\n\toverflow-x: auto;\n\toverflow-y: hidden;\n\tdisplay: block;\n}\n\n.ontario-table-container table {\n\tborder-collapse: collapse;\n\tdisplay: table;\n\tfont-size: globalFunctions.px-to-rem(17);\n\tfont-weight: fontWeights.$ontario-font-weights-normal;\n\tline-height: globalFunctions.px-to-rem(26);\n\n\t&.ontario-table--full-container-width {\n\t\tdisplay: table;\n\t\twidth: 100%;\n\t}\n\n\t&.ontario-table--zebra-stripes-enabled {\n\t\ttbody {\n\t\t\ttr:nth-child(even) {\n\t\t\t\tbackground-color: $ontario-table-zebra-striping;\n\t\t\t}\n\t\t}\n\t}\n\n\t&:not(.ontario-table--no-zebra-stripes) {\n\t\ttbody {\n\t\t\ttr:first-child:nth-last-child(n + 6),\n\t\t\ttr:first-child:nth-last-child(n + 6) ~ tr {\n\t\t\t\t&:nth-child(even) {\n\t\t\t\t\tbackground-color: $ontario-table-zebra-striping;\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\t}\n\n\t@media screen and (max-width: breakpoints.$small-breakpoint) {\n\t\tfont-size: fontSizes.$ontario-font-size-standard-body-text;\n\t}\n}\n\n.ontario-table-container caption {\n\tbackground-color: $ontario-table-caption-background;\n\tdisplay: table-caption;\n\tfont-size: globalFunctions.px-to-rem(22);\n\tfont-weight: fontWeights.$ontario-font-weights-bold;\n\tline-height: globalFunctions.px-to-rem(35);\n\tpadding: $ontario-table-caption-custom-spacing spacing.$spacing-4 $ontario-table-caption-custom-spacing\n\t\tspacing.$spacing-5;\n\ttext-align: left;\n\n\t@media screen and (max-width: breakpoints.$small-breakpoint) {\n\t\tfont-size: fontSizes.$ontario-font-size-large;\n\t\tline-height: globalFunctions.px-to-rem(30);\n\t\tpadding-left: spacing.$spacing-4;\n\t}\n}\n\n.ontario-table-container table thead {\n\tborder: solid;\n\tborder-width: globalFunctions.px-to-rem(3) 0;\n\tborder-color: colours.$ontario-colour-black;\n\tvertical-align: text-top;\n\n\tth {\n\t\tfont-size: globalFunctions.px-to-rem(18);\n\t\tline-height: lineHeights.$ontario-line-height-7;\n\t\tmargin: spacing.$spacing-0;\n\t\tpadding: (spacing.$spacing-5 + spacing.$spacing-1) spacing.$spacing-4 (spacing.$spacing-5 + spacing.$spacing-1)\n\t\t\tspacing.$spacing-5;\n\t\ttext-align: left;\n\t\ttext-size-adjust: none;\n\t\t-webkit-text-size-adjust: none;\n\n\t\t@media screen and (max-width: breakpoints.$small-breakpoint) {\n\t\t\tfont-size: fontSizes.$ontario-font-size-standard-body-text;\n\t\t\tline-height: globalFunctions.px-to-rem(21);\n\t\t\tpadding: spacing.$spacing-5 spacing.$spacing-2 spacing.$spacing-5 spacing.$spacing-4;\n\t\t}\n\t}\n\n\tth.ontario-table-cell--numeric {\n\t\tpadding: (spacing.$spacing-5 + spacing.$spacing-1) spacing.$spacing-5 (spacing.$spacing-5 + spacing.$spacing-1)\n\t\t\tspacing.$spacing-4;\n\t\ttext-align: right;\n\n\t\t@media screen and (max-width: breakpoints.$small-breakpoint) {\n\t\t\tpadding: spacing.$spacing-5 spacing.$spacing-4 spacing.$spacing-5 spacing.$spacing-2;\n\t\t}\n\t}\n}\n\n.ontario-table-container table tbody {\n\tfont-size: fontSizes.$ontario-font-size-standard-body-text;\n\tvertical-align: text-top;\n\n\ttr {\n\t\tborder: solid;\n\t\tborder-width: globalFunctions.px-to-rem(1) 0;\n\t\tborder-color: $ontario-table-row-divider;\n\t}\n\n\ttr:last-child {\n\t\tborder-width: globalFunctions.px-to-rem(3) 0;\n\t\tborder-top-width: 0;\n\t\tborder-color: colours.$ontario-colour-black;\n\t}\n\n\ttr.ontario-table-row--highlight {\n\t\tbackground-color: $ontario-table-highlight !important; // the important flag is needed to override zebra stripe background colour classes\n\n\t\tth {\n\t\t\tpadding-left: spacing.$spacing-5;\n\t\t\tdisplay: flex;\n\t\t\tposition: relative;\n\n\t\t\timg.ontario-table--highlight-indicator {\n\t\t\t\t// Width of yellow triangle svg\n\t\t\t\twidth: globalFunctions.px-to-rem(8);\n\t\t\t\tposition: absolute;\n\t\t\t\t// Distance from top of svg to top of container\n\t\t\t\ttop: globalFunctions.px-to-rem(24);\n\t\t\t\tleft: 0;\n\t\t\t}\n\t\t}\n\t}\n\n\ttr.ontario-table-row--subtotal {\n\t\tbackground-color: $ontario-table-subtotal !important; // the important flag is needed to override zebra stripe background colour classes\n\t}\n}\n\n.ontario-table-container tbody th,\n.ontario-table-container tfoot th,\n.ontario-table-container table td {\n\tpadding: globalFunctions.px-to-rem(19) spacing.$spacing-4 globalFunctions.px-to-rem(19) spacing.$spacing-5;\n\ttext-align: left;\n\tletter-spacing: globalFunctions.px-to-rem(0.4);\n}\n\n.ontario-table-container tbody th,\n.ontario-table-container tfoot th {\n\tfont-weight: fontWeights.$ontario-font-weights-bold;\n\n\t@media screen and (max-width: breakpoints.$small-breakpoint) {\n\t\tfont-size: fontSizes.$ontario-font-size-standard-body-text;\n\t\tline-height: globalFunctions.px-to-rem(26);\n\t\tpadding-right: spacing.$spacing-2;\n\t\tpadding-left: spacing.$spacing-4;\n\t}\n}\n\n.ontario-table-container table td {\n\timg {\n\t\tvertical-align: top;\n\n\t\t@media screen and (max-width: breakpoints.$small-breakpoint) {\n\t\t\tmax-width: none;\n\t\t}\n\t}\n\n\t&.ontario-table-cell--numeric {\n\t\tfont-family: fonts.$ontario-font-courier-prime;\n\t\tfont-size: globalFunctions.px-to-rem(17);\n\t\tpadding: globalFunctions.px-to-rem(19) spacing.$spacing-5 globalFunctions.px-to-rem(19) spacing.$spacing-4;\n\t\ttext-align: right;\n\n\t\tstrong {\n\t\t\tfont-family: fonts.$ontario-font-courier-prime;\n\t\t}\n\t}\n}\n\n.ontario-table-container tbody tr.ontario-table-row--subtotal,\n.ontario-table-container tfoot tr {\n\tborder: solid;\n\tborder-width: globalFunctions.px-to-rem(3) 0;\n\tfont-size: fontSizes.$ontario-font-size-standard-body-text;\n\tborder-color: colours.$ontario-colour-black;\n\n\tth {\n\t\tpadding: globalFunctions.px-to-rem(23) spacing.$spacing-4 globalFunctions.px-to-rem(23) spacing.$spacing-5;\n\t}\n\n\ttd {\n\t\tfont-weight: fontWeights.$ontario-font-weights-bold;\n\t\tpadding: globalFunctions.px-to-rem(23) spacing.$spacing-4 globalFunctions.px-to-rem(23) spacing.$spacing-5;\n\t}\n}\n\n.ontario-table-container tfoot {\n\tvertical-align: text-top;\n\n\ttr {\n\t\tbackground-color: $ontario-table-total !important; // the important flag is needed to override zebra stripe background colour classes\n\t}\n}\n\n// Column classes\n.ontario-table-header--column-span-1 {\n\t//Equivalent to 1 grid columns\n\tmin-width: 8.33333vw;\n}\n\n.ontario-table-header--column-span-2 {\n\t//Equivalent to 2 grid columns\n\tmin-width: 16.66666vw;\n}\n\n.ontario-table-header--column-span-3 {\n\t//Equivalent to 3 grid columns\n\tmin-width: 25vw;\n}\n\n.ontario-table-header--column-span-4 {\n\t//Equivalent to 4 grid columns\n\tmin-width: 33.33333vw;\n}\n\n.ontario-table-header--column-span-5 {\n\t//Equivalent to 5 grid columns\n\tmin-width: 41.66666vw;\n}\n\n.ontario-table-header--column-span-6 {\n\t//Equivalent to 6 grid columns\n\tmin-width: 50vw;\n}\n\n.ontario-table-header--column-span-7 {\n\t//Equivalent to 7 grid columns\n\tmin-width: 58.33333vw;\n}\n\n.ontario-table-header--column-span-8 {\n\t//Equivalent to 8 grid columns\n\tmin-width: 66.66666vw;\n}\n\n.ontario-table-header--column-span-9 {\n\t//Equivalent to 9 grid columns\n\tmin-width: 75vw;\n}\n\n.ontario-table-header--column-span-10 {\n\t//Equivalent to 10 grid columns\n\tmin-width: 83.33333vw;\n}\n\n.ontario-table-header--column-span-11 {\n\t//Equivalent to 11 grid columns\n\tmin-width: 91.66666vw;\n}\n\n.ontario-table-header--column-span-12 {\n\t//Equivalent to 12 grid columns\n\tmin-width: 100vw;\n}\n\n// Condensed tables\n.ontario-table-container .ontario-table--condensed {\n\ttd {\n\t\tpadding: spacing.$spacing-3 spacing.$spacing-4 spacing.$spacing-3 spacing.$spacing-5;\n\t\ttext-align: left;\n\t}\n\n\ttd.ontario-table-cell--numeric {\n\t\tpadding: spacing.$spacing-3 spacing.$spacing-5 spacing.$spacing-3 spacing.$spacing-4;\n\t\tfont-size: globalFunctions.px-to-rem(17);\n\t\ttext-align: right;\n\t}\n\n\ttbody th,\n\ttfoot th {\n\t\tpadding: spacing.$spacing-3 spacing.$spacing-4 spacing.$spacing-3 spacing.$spacing-5;\n\t}\n\n\ttr.ontario-table-row--highlight th img.ontario-table--highlight-indicator {\n\t\ttop: globalFunctions.px-to-rem(17);\n\t}\n\n\ttr.ontario-table-row--subtotal,\n\ttfoot tr {\n\t\tth,\n\t\ttd {\n\t\t\tpadding: spacing.$spacing-4 spacing.$spacing-4 spacing.$spacing-4 spacing.$spacing-5;\n\t\t}\n\n\t\ttd.ontario-table-cell--numeric {\n\t\t\ttext-align: right;\n\t\t\tpadding: spacing.$spacing-4 spacing.$spacing-5 spacing.$spacing-4 spacing.$spacing-4;\n\t\t}\n\t}\n\n\t@media screen and (max-width: breakpoints.$small-breakpoint) {\n\t\ttd {\n\t\t\tpadding: spacing.$spacing-3 spacing.$spacing-2 spacing.$spacing-3 spacing.$spacing-4;\n\t\t\tfont-size: fontSizes.$ontario-font-size-standard-body-text;\n\t\t}\n\n\t\ttd.ontario-table-cell--numeric {\n\t\t\tpadding: spacing.$spacing-3 spacing.$spacing-4 spacing.$spacing-3 spacing.$spacing-2;\n\t\t}\n\n\t\ttbody th {\n\t\t\tpadding: spacing.$spacing-3 spacing.$spacing-2 spacing.$spacing-3 spacing.$spacing-4;\n\t\t}\n\n\t\ttr.ontario-table-row--subtotal,\n\t\ttfoot tr {\n\t\t\tth,\n\t\t\ttd {\n\t\t\t\tpadding: spacing.$spacing-4 spacing.$spacing-2 spacing.$spacing-4 spacing.$spacing-4;\n\t\t\t}\n\n\t\t\ttd.ontario-table-cell--numeric {\n\t\t\t\ttext-align: right;\n\t\t\t\tpadding: spacing.$spacing-4 spacing.$spacing-4 spacing.$spacing-4 spacing.$spacing-2;\n\t\t\t}\n\t\t}\n\t}\n}\n","import { Component, h, Element, Prop, State, Watch, getAssetPath } from '@stencil/core';\n\nimport { Table, TableColumnOptions, TableRowOptions } from './table.interface';\n\nimport { validateTableColumns, validateTableRowOptions } from './utils/ontario-table-validation';\n\nimport { ConsoleMessageClass } from '../../utils/console-message/console-message';\nimport { ConsoleType } from '../../utils/console-message/console-message.enum';\nimport { extractValuesByKey, organizeObjectKeys, removeObjectsBySpecificKey } from '../../utils/helper/utils';\n\n@Component({\n\ttag: 'ontario-table',\n\tstyleUrl: 'ontario-table.scss',\n\tshadow: true,\n\tassetsDirs: ['./assets'],\n})\nexport class OntarioTable implements Table {\n\t@Element() element: HTMLElement;\n\tprivate tableScrollWrapper: HTMLElement;\n\tprivate tableScrollDiv: HTMLElement;\n\tprivate table: HTMLElement;\n\n\t/*\n\t Specifies the caption (or title) of the table.\n\t \n\t This is optional.\n\t /\n\t@Prop() caption?: string \| undefined;\n\n\t/\n\t Used to define the columns of the table.\n\t \n\t @example;\n\t * <ontario-table\n\t * table-columns='[\n\t * { \"title\": \"Type of service\", \"key\": \"service\" },\n\t * { \"title\": \"Processing and delivery\", \"key\": \"processing\" },\n\t * { \"title\": \"Cost\", \"key\": \"cost\", \"type\": \"numeric\" }\n\t * ]'\n\t * >\n\t * </ontario-table>\n\t /\n\t@Prop() tableColumns: string \| TableColumnOptions[];\n\n\t/\n\t Used to define the table body data. Note that the keys passed to the `data` object in the tableData should match the keys of the columns defined in the tableColumns prop.\n\t \n\t @example\n\t * <ontario-table\n\t * table-data='[\n\t * {\n\t * \"data\": {\n\t * \"service\": \"Regular service (online)\",\n\t * \"processing\": \"15 business days plus delivery by Canada Post\",\n\t * \"cost\": \"$15\"\n\t * }\n\t * },\n\t * {\n\t * \"data\": {\n\t * \"service\": \"Premium service (online)\",\n\t * \"cost\": \"$45\",\n\t * \"processing\": \"5 business days including delivery by courier\"\n\t * }\n\t * }\n\t * ]'\n\t * >\n\t * </ontario-table>\n\t /\n\t@Prop() tableData: string \| TableRowOptions[];\n\n\t/\n\t Indicates whether or not the table data should have alternate row zebra striping.\n\t \n\t This is optional. By default, zebra striping will be added when the table rows extend 5 rows. If zebra striping is needed to table rows less than 5 rows, the prop should be set to “enabled”. If no zebra stripes are needed, it should be set to “disabled”.\n\t \n\t The default will be set to “auto”.\n\t /\n\t@Prop() zebraStripes?: 'auto' \| 'disabled' \| 'enabled' \| undefined = 'auto';\n\n\t/\n\t Used to specify whether or not table data in cells should have reduced top and bottom padding. This is useful for pages with multiple data-heavy tables such as a budget or financial data.\n\t \n\t This is optional. By default it will be set to “false”.\n\t /\n\t@Prop() condensed?: boolean \| undefined = false;\n\n\t/\n\t Used to specify whether or not the table should extend the full width of its container.\n\t \n\t This is optional. By default, it will be set to “false”\n\t */\n\t@Prop() fullWidth?: boolean \| undefined = false;\n\n\t@State() private tableColumnsState: TableColumnOptions[];\n\n\t@State() private tableDataState: TableRowOptions[];\n\n\t@State() private tableFooterState: TableRowOptions[];\n\n\t@Watch('tableColumns')\n\tprivate processTableColumns() {\n\t\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\t? `ontario-table--zebra-stripes-enabled`\n\t\t\t\t: ``;\n\t};\n\n\tprivate getTableClasses = () => {\n\t\tlet tableClass = '';\n\t\tif (this.condensed && this.fullWidth) {\n\t\t\ttableClass = `ontario-table--condensed ontario-table--full-container-width`;\n\t\t} else if (this.condensed) {\n\t\t\ttableClass = `ontario-table--condensed`;\n\t\t} else if (this.fullWidth) {\n\t\t\ttableClass = `ontario-table--full-container-width`;\n\t\t}\n\n\t\tconst zebraStripesClass = this.getZebraStripeClass();\n\t\tif (tableClass) {\n\t\t\ttableClass = `${tableClass} ${zebraStripesClass}`;\n\t\t} else {\n\t\t\ttableClass = zebraStripesClass;\n\t\t}\n\n\t\treturn tableClass;\n\t};\n\n\tprivate getColumnClasses = (columnData: TableColumnOptions) => {\n\t\tif (columnData.type === 'numeric' && columnData.colSpan) {\n\t\t\treturn `ontario-table-cell--numeric ontario-table-header--column-span-${columnData.colSpan}`;\n\t\t} else if (columnData.type === 'numeric') {\n\t\t\treturn `ontario-table-cell--numeric`;\n\t\t} else if (columnData.colSpan) {\n\t\t\treturn `ontario-table-header--column-span-${columnData.colSpan}`;\n\t\t}\n\n\t\treturn;\n\t};\n\n\t// A function used to generate the table header and table definitions for the table body and table footer sections.\n\tprivate generateTableDataHTML = (\n\t\tdataType: 'tableData' \| 'tableFooter',\n\t\trowData: any,\n\t\tcolumns: (string \| number \| undefined)[],\n\t\trowClass?: string \| undefined,\n\t) => {\n\t\treturn (\n\t\t\t<tr class={dataType === 'tableData' ? rowClass : ''}>\n\t\t\t\t{this.tableColumnsState.map((column, index) => {\n\t\t\t\t\tconst type = column.type;\n\t\t\t\t\tconst tdClass = type === 'numeric' ? `ontario-table-cell--numeric` : '';\n\n\t\t\t\t\treturn index === 0 ? (\n\t\t\t\t\t\t<th scope=\"row\" innerHTML={rowData.data[`${columns[0]}`]}>\n\t\t\t\t\t\t\t{dataType === 'tableData' && rowData.highlight && (\n\t\t\t\t\t\t\t\t<img\n\t\t\t\t\t\t\t\t\tclass=\"ontario-table--highlight-indicator\"\n\t\t\t\t\t\t\t\t\tsrc={getAssetPath('./assets/highlight-indicator.svg')}\n\t\t\t\t\t\t\t\t></img>\n\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t</th>\n\t\t\t\t\t) : (\n\t\t\t\t\t\t<td class={tdClass} innerHTML={rowData.data[`${columns[index]}`]}></td>\n\t\t\t\t\t);\n\t\t\t\t})}\n\t\t\t</tr>\n\t\t);\n\t};\n\n\t// Helper function to apply the scrollbar styles to the tops of tables\n\tprivate applyScrollbar(tableElement: Element, scrollerDiv: HTMLElement) {\n\t\tscrollerDiv.style.visibility = 'visible';\n\t\tscrollerDiv.style.height = '20px';\n\t\tscrollerDiv.style.width = `${tableElement.scrollWidth}px`;\n\t}\n\n\t// The following logic adds scrollbar functionality to the tops of tables depending on their size.\n\tcomponentDidLoad() {\n\t\tconst tables = this.table;\n\t\tconst scrollerDivs = this.tableScrollDiv;\n\t\tconst scrollerWrappers = this.tableScrollWrapper;\n\n\t\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\t? `ontario-table-row--subtotal`\n\t\t\t\t\t\t\t\t\t\t\t: undefined;\n\n\t\t\t\t\t\t\t\t\treturn this.generateTableDataHTML('tableData', rowData, columns, rowClass);\n\t\t\t\t\t\t\t\t})}\n\t\t\t\t\t\t\t</tbody>\n\t\t\t\t\t\t)}\n\t\t\t\t\t\t{!!this.tableFooterState.length && (\n\t\t\t\t\t\t\t<tfoot>\n\t\t\t\t\t\t\t\t{this.tableFooterState.map((footerData) => {\n\t\t\t\t\t\t\t\t\treturn this.generateTableDataHTML('tableData', footerData, columns, undefined);\n\t\t\t\t\t\t\t\t})}\n\t\t\t\t\t\t\t</tfoot>\n\t\t\t\t\t\t)}\n\t\t\t\t\t</table>\n\t\t\t\t</div>\n\t\t\t</div>\n\t\t);\n\t}\n}\n"],"version":3}

package/dist/components/ontario-task-list.d.ts ADDED Viewed

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

package/dist/components/ontario-task-list.js ADDED Viewed

@@ -0,0 +1,212 @@
+import { p as proxyCustomElement, H, h } from './index.js';
+import { C as ConsoleMessageClass } from './p-CJXRCL8b.js';
+import { v as validateValueAgainstArray, b as validateLanguage } from './p-CNqFEifG.js';
+import { t as translations } from './p-DgMhpSmi.js';
+import { T as TaskStatuses } from './p-A8xwC5QP.js';
+const ontarioTaskListCss =
+	'.ontario-task-list{border-top:0.125rem solid #cccccc;padding:0}.ontario-task-list__item{max-width:100%;list-style-type:none}';
+const OntarioTaskList$1 = /*@__PURE__*/ proxyCustomElement(
+	class OntarioTaskList extends H {
+		constructor() {
+			super();
+			this.__registerHost();
+			this.__attachShadow();
+		}
+		get el() {
+			return this;
+		}
+		/**
+		 * The label prop used for the task list heading.
+		 */
+		label;
+		/**
+		 * Allows consumers to define the heading level for the task list component.
+		 *
+		 * Accepts 'h1', 'h2', 'h3' or 'h4'. Default is 'h2'.
+		 */
+		headingLevel = 'h2';
+		/**
+		 * The language of the component.
+		 * This is used for translations, and is by default set through event listeners checking for a language property from the header. If none are passed, it will default to English.
+		 */
+		language = 'en';
+		/**
+		 * State to track the number of completed tasks.
+		 */
+		completedTasks = 0;
+		/**
+		 * State to track the total number of tasks.
+		 */
+		totalTasks = 0;
+		/**
+		 * Class-level constant for task count delay in milliseconds.
+		 *
+		 * This delay ensures that the `ontario-task` custom elements are fully upgraded and rendered
+		 * in the DOM before the `countTasks` method is executed. Without this delay, the component
+		 * might attempt to query or count tasks before they are properly initialized, leading to
+		 * inaccurate task counts.
+		 */
+		static TASK_COUNT_DELAY_MS = 50;
+		/**
+		 * Watch for changes in `headingLevel` prop to validate its value.
+		 */
+		validateHeadingLevel(newValue) {
+			const allowedValues = ['h1', 'h2', 'h3', 'h4', 'h5'];
+			// Validate the new value against the allowed values
+			const isValid = validateValueAgainstArray(newValue, allowedValues);
+			if (!isValid) {
+				const message = new ConsoleMessageClass();
+				message
+					.addDesignSystemTag()
+					.addMonospaceText(' headingLevel ')
+					.addRegularText('on')
+					.addMonospaceText(' <ontario-task-list> ')
+					.addRegularText('was set to an invalid value; only ')
+					.addMonospaceText(allowedValues.join(', '))
+					.addRegularText(' are supported. The default value ')
+					.addMonospaceText('h2')
+					.addRegularText(' is assumed.')
+					.printMessage();
+				this.headingLevel = 'h2';
+			}
+		}
+		/**
+		 * Counts the total tasks and completed tasks by querying for `ontario-task` elements.
+		 */
+		countTasks() {
+			const slot = this.el.shadowRoot?.querySelector('slot');
+			const tasks = slot ? slot.assignedElements().filter((el) => el.tagName.toLowerCase() === 'ontario-task') : [];
+			this.totalTasks = tasks.length;
+			this.completedTasks = tasks.filter((task) => {
+				// Get the status directly from the light DOM
+				const status = task.getAttribute('data-task-status');
+				return status === TaskStatuses.Completed;
+			}).length;
+		}
+		/**
+		 * Lifecycle method: before the component loads, validate heading level.
+		 */
+		async componentWillLoad() {
+			this.validateHeadingLevel(this.headingLevel);
+		}
+		/**
+		 * Ensure tasks are counted after custom elements are fully upgraded.
+		 */
+		connectedCallback() {
+			// Wait for the custom element to be fully defined before counting
+			customElements.whenDefined('ontario-task').then(() => {
+				setTimeout(() => {
+					this.countTasks();
+				}, OntarioTaskList.TASK_COUNT_DELAY_MS);
+			});
+		}
+		/**
+		 * Use slotchange and MutationObserver to track changes in slot content.
+		 */
+		componentDidLoad() {
+			const slot = this.el.shadowRoot?.querySelector('slot');
+			if (slot) {
+				slot.addEventListener('slotchange', () => {
+					this.countTasks();
+				});
+			}
+			// Observe changes to the light DOM for accurate counting
+			const observer = new MutationObserver((_mutations) => {
+				this.countTasks();
+			});
+			observer.observe(this.el, {
+				childList: true,
+				subtree: true,
+				attributes: true,
+				attributeFilter: ['data-task-status'],
+			});
+		}
+		componentDidRender() {
+			setTimeout(() => {
+				this.countTasks();
+			}, OntarioTaskList.TASK_COUNT_DELAY_MS);
+		}
+		render() {
+			// Resolve the language to ensure valid translations are used.
+			const resolvedLanguage = validateLanguage(this.language);
+			const headingProps = {
+				class: { 'ontario-task-list__heading': true },
+			};
+			return h(
+				'div',
+				{ key: 'fb26534c596025f0bbbf729d923210760e31ff60', class: 'ontario-task-list__container' },
+				h(this.headingLevel, headingProps, this.label),
+				h(
+					'p',
+					{
+						'key': '8344876cd43f5b4c06685a41d0f49a55817cb1ee',
+						'class': 'ontario-task-list__completion-text',
+						'aria-live': 'polite',
+					},
+					translations.taskGroup.completed[resolvedLanguage],
+					'\u00A0',
+					this.completedTasks,
+					'\u00A0',
+					translations.taskGroup.outOf[resolvedLanguage],
+					'\u00A0',
+					this.totalTasks,
+					'\u00A0',
+					translations.taskGroup.tasks[resolvedLanguage],
+				),
+				h(
+					'ul',
+					{ key: '42962ee4027bf4df1309ef409106e040f98c5fd2', class: 'ontario-task-list', role: 'list' },
+					h('slot', { key: 'd226bd26241b20557f13a0acdb161ae474c915e1' }),
+				),
+			);
+		}
+		static get watchers() {
+			return {
+				headingLevel: ['validateHeadingLevel'],
+			};
+		}
+		static get style() {
+			return ontarioTaskListCss;
+		}
+	},
+	[
+		1,
+		'ontario-task-list',
+		{
+			label: [1],
+			headingLevel: [1, 'heading-level'],
+			language: [1025],
+			completedTasks: [32],
+			totalTasks: [32],
+		},
+		undefined,
+		{
+			headingLevel: ['validateHeadingLevel'],
+		},
+	],
+);
+function defineCustomElement$1() {
+	if (typeof customElements === 'undefined') {
+		return;
+	}
+	const components = ['ontario-task-list'];
+	components.forEach((tagName) => {
+		switch (tagName) {
+			case 'ontario-task-list':
+				if (!customElements.get(tagName)) {
+					customElements.define(tagName, OntarioTaskList$1);
+				}
+				break;
+		}
+	});
+}
+const OntarioTaskList = OntarioTaskList$1;
+const defineCustomElement = defineCustomElement$1;
+export { OntarioTaskList, defineCustomElement };
+//# sourceMappingURL=ontario-task-list.js.map
+//# sourceMappingURL=ontario-task-list.js.map

package/dist/components/ontario-task-list.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"file":"ontario-task-list.js","mappings":"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","names":["OntarioTaskList","__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/ontario-task-list/ontario-task-list.scss?tag=ontario-task-list&encapsulation=shadow","src/components/ontario-task-list/ontario-task-list.tsx"],"sourcesContent":["@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/2-tools/functions/global.functions' as globalFunctions;\n@use '@ongov/ontario-design-system-global-styles/dist/styles/scss/1-variables/global.variables' as globalVariables;\n@use '@ongov/ontario-design-system-global-styles/dist/styles/scss/1-variables/spacing.variables' as spacing;\n\n.ontario-task-list {\n\tborder-top: globalFunctions.px-to-rem(2) solid colours.$ontario-greyscale-20;\n\tpadding: spacing.$spacing-0;\n}\n\n.ontario-task-list__item {\n\tmax-width: globalVariables.$full-width;\n\tlist-style-type: none;\n}\n","import { h, Component, Element, Prop, State, Watch } from '@stencil/core';\nimport { Language } from '../../utils/common/language-types';\nimport { ConsoleMessageClass } from '../../utils/console-message/console-message';\nimport { validateLanguage } from '../../utils/validation/validation-functions';\nimport translations from '../../translations/global.i18n.json';\nimport { HeadingLevel } from '../../utils/common/common.interface';\nimport { validateValueAgainstArray } from '../../utils/validation/validation-functions';\nimport { TaskStatuses } from '../../utils/common/task-statuses.enum';\nexport type TaskListHeadingLevel = 'h1' | Exclude<HeadingLevel, 'h6'>;\n\n@Component({\n\ttag: 'ontario-task-list',\n\tstyleUrl: 'ontario-task-list.scss',\n\tshadow: true,\n})\nexport class OntarioTaskList {\n\t@Element() el: HTMLElement;\n\n\t/**\n\t * The label prop used for the task list heading.\n\t */\n\t@Prop() label: string;\n\n\t/**\n\t * Allows consumers to define the heading level for the task list component.\n\t *\n\t * Accepts 'h1', 'h2', 'h3' or 'h4'. Default is 'h2'.\n\t */\n\t@Prop() headingLevel: TaskListHeadingLevel = 'h2';\n\n\t/**\n\t * The language of the component.\n\t * This is used for translations, and is by default set through event listeners checking for a language property from the header. If none are passed, it will default to English.\n\t */\n\t@Prop({ mutable: true }) language?: Language = 'en';\n\n\t/**\n\t * State to track the number of completed tasks.\n\t */\n\t@State() completedTasks: number = 0;\n\n\t/**\n\t * State to track the total number of tasks.\n\t */\n\t@State() totalTasks: number = 0;\n\n\t/**\n\t * Class-level constant for task count delay in milliseconds.\n\t *\n\t * This delay ensures that the `ontario-task` custom elements are fully upgraded and rendered\n\t * in the DOM before the `countTasks` method is executed. Without this delay, the component\n\t * might attempt to query or count tasks before they are properly initialized, leading to\n\t * inaccurate task counts.\n\t */\n\tprivate static readonly TASK_COUNT_DELAY_MS = 50;\n\n\t/**\n\t * Watch for changes in `headingLevel` prop to validate its value.\n\t */\n\t@Watch('headingLevel')\n\tvalidateHeadingLevel(newValue: string) {\n\t\tconst allowedValues: TaskListHeadingLevel[] = ['h1', 'h2', 'h3', 'h4', 'h5'];\n\n\t\t// Validate the new value against the allowed values\n\t\tconst isValid = validateValueAgainstArray(newValue, allowedValues);\n\n\t\tif (!isValid) {\n\t\t\tconst message = new ConsoleMessageClass();\n\t\t\tmessage\n\t\t\t\t.addDesignSystemTag()\n\t\t\t\t.addMonospaceText(' headingLevel ')\n\t\t\t\t.addRegularText('on')\n\t\t\t\t.addMonospaceText(' <ontario-task-list> ')\n\t\t\t\t.addRegularText('was set to an invalid value; only ')\n\t\t\t\t.addMonospaceText(allowedValues.join(', '))\n\t\t\t\t.addRegularText(' are supported. The default value ')\n\t\t\t\t.addMonospaceText('h2')\n\t\t\t\t.addRegularText(' is assumed.')\n\t\t\t\t.printMessage();\n\n\t\t\tthis.headingLevel = 'h2';\n\t\t}\n\t}\n\n\t/**\n\t * Counts the total tasks and completed tasks by querying for `ontario-task` elements.\n\t */\n\tcountTasks() {\n\t\tconst slot = this.el.shadowRoot?.querySelector('slot');\n\t\tconst tasks = slot\n\t\t\t? (slot.assignedElements().filter((el) => el.tagName.toLowerCase() === 'ontario-task') as HTMLElement[])\n\t\t\t: [];\n\n\t\tthis.totalTasks = tasks.length;\n\n\t\tthis.completedTasks = tasks.filter((task) => {\n\t\t\t// Get the status directly from the light DOM\n\t\t\tconst status = task.getAttribute('data-task-status');\n\t\t\treturn status === TaskStatuses.Completed;\n\t\t}).length;\n\t}\n\n\t/**\n\t * Lifecycle method: before the component loads, validate heading level.\n\t */\n\tasync componentWillLoad() {\n\t\tthis.validateHeadingLevel(this.headingLevel);\n\t}\n\n\t/**\n\t * Ensure tasks are counted after custom elements are fully upgraded.\n\t */\n\tconnectedCallback() {\n\t\t// Wait for the custom element to be fully defined before counting\n\t\tcustomElements.whenDefined('ontario-task').then(() => {\n\t\t\tsetTimeout(() => {\n\t\t\t\tthis.countTasks();\n\t\t\t}, OntarioTaskList.TASK_COUNT_DELAY_MS);\n\t\t});\n\t}\n\n\t/**\n\t * Use slotchange and MutationObserver to track changes in slot content.\n\t */\n\tcomponentDidLoad() {\n\t\tconst slot = this.el.shadowRoot?.querySelector('slot');\n\t\tif (slot) {\n\t\t\tslot.addEventListener('slotchange', () => {\n\t\t\t\tthis.countTasks();\n\t\t\t});\n\t\t}\n\n\t\t// Observe changes to the light DOM for accurate counting\n\t\tconst observer = new MutationObserver((_mutations) => {\n\t\t\tthis.countTasks();\n\t\t});\n\t\tobserver.observe(this.el, {\n\t\t\tchildList: true,\n\t\t\tsubtree: true,\n\t\t\tattributes: true,\n\t\t\tattributeFilter: ['data-task-status'],\n\t\t});\n\t}\n\n\tcomponentDidRender() {\n\t\tsetTimeout(() => {\n\t\t\tthis.countTasks();\n\t\t}, OntarioTaskList.TASK_COUNT_DELAY_MS);\n\t}\n\n\trender() {\n\t\t// Resolve the language to ensure valid translations are used.\n\t\tconst resolvedLanguage = validateLanguage(this.language);\n\n\t\tconst headingProps = {\n\t\t\tclass: { 'ontario-task-list__heading': true },\n\t\t};\n\n\t\treturn (\n\t\t\t<div class=\"ontario-task-list__container\">\n\t\t\t\t{h(this.headingLevel, headingProps, this.label)}\n\n\t\t\t\t<p class=\"ontario-task-list__completion-text\" aria-live=\"polite\">\n\t\t\t\t\t{translations.taskGroup.completed[resolvedLanguage]} \n\t\t\t\t\t{this.completedTasks} \n\t\t\t\t\t{translations.taskGroup.outOf[resolvedLanguage]} \n\t\t\t\t\t{this.totalTasks} \n\t\t\t\t\t{translations.taskGroup.tasks[resolvedLanguage]}\n\t\t\t\t</p>\n\n\t\t\t\t<ul class=\"ontario-task-list\" role=\"list\">\n\t\t\t\t\t<slot></slot>\n\t\t\t\t</ul>\n\t\t\t</div>\n\t\t);\n\t}\n}\n"],"version":3}

package/dist/components/ontario-task.d.ts ADDED Viewed

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