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

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

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 (883) 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","__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}
1	+ {"file":"ontario-table.js","mappings":"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","names":["OntarioTable","__stencil_proxyCustomElement"],"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.js CHANGED Viewed

@@ -1,14 +1,14 @@
-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';
+import { proxyCustomElement, HTMLElement, h } from '@stencil/core/internal/client';
+import { C as ConsoleMessageClass } from './console-message.js';
+import { v as validateValueAgainstArray, b as validateLanguage } from './validation-functions.js';
+import { t as translations } from './global.i18n.js';
+import { T as TaskStatuses } from './task-statuses.enum.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 {
+	class OntarioTaskList extends HTMLElement {
 		constructor() {
 			super();
 			this.__registerHost();

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

	@@ -1 +1 @@
1	- {"file":"ontario-task-list.js","mappings":";;;;;;AAAA,MAAM,kBAAkB,GAAG,8HAA8H;;MCe5IA,iBAAe,iBAAAC,kBAAA,CAAA,MAAA,eAAA,~~SAAAC~~,~~CAAA~~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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}
1	+ {"file":"ontario-task-list.js","mappings":";;;;;;AAAA,MAAM,kBAAkB,GAAG,8HAA8H;;MCe5IA,iBAAe,iBAAAC,kBAAA,CAAA,MAAA,eAAA,SAAA,WAAA,CAAA;;;;;;;AAG3B;;AAEG;AACK,IAAA,KAAK;AAEb;;;;AAIG;IACK,YAAY,GAAyB,IAAI;AAEjD;;;AAGG;IACsB,QAAQ,GAAc,IAAI;AAEnD;;AAEG;IACM,cAAc,GAAW,CAAC;AAEnC;;AAEG;IACM,UAAU,GAAW,CAAC;AAE/B;;;;;;;AAOG;AACK,IAAA,OAAgB,mBAAmB,GAAG,EAAE;AAEhD;;AAEG;AAEH,IAAA,oBAAoB,CAAC,QAAgB,EAAA;AACpC,QAAA,MAAM,aAAa,GAA2B,CAAC,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,CAAC;;QAG5E,MAAM,OAAO,GAAG,yBAAyB,CAAC,QAAQ,EAAE,aAAa,CAAC;QAElE,IAAI,CAAC,OAAO,EAAE;AACb,YAAA,MAAM,OAAO,GAAG,IAAI,mBAAmB,EAAE;YACzC;AACE,iBAAA,kBAAkB;iBAClB,gBAAgB,CAAC,gBAAgB;iBACjC,cAAc,CAAC,IAAI;iBACnB,gBAAgB,CAAC,uBAAuB;iBACxC,cAAc,CAAC,oCAAoC;AACnD,iBAAA,gBAAgB,CAAC,aAAa,CAAC,IAAI,CAAC,IAAI,CAAC;iBACzC,cAAc,CAAC,oCAAoC;iBACnD,gBAAgB,CAAC,IAAI;iBACrB,cAAc,CAAC,cAAc;AAC7B,iBAAA,YAAY,EAAE;AAEhB,YAAA,IAAI,CAAC,YAAY,GAAG,IAAI;;;AAI1B;;AAEG;IACH,UAAU,GAAA;AACT,QAAA,MAAM,IAAI,GAAG,IAAI,CAAC,EAAE,CAAC,UAAU,EAAE,aAAa,CAAC,MAAM,CAAC;QACtD,MAAM,KAAK,GAAG;cACV,IAAI,CAAC,gBAAgB,EAAE,CAAC,MAAM,CAAC,CAAC,EAAE,KAAK,EAAE,CAAC,OAAO,CAAC,WAAW,EAAE,KAAK,cAAc;cACnF,EAAE;AAEL,QAAA,IAAI,CAAC,UAAU,GAAG,KAAK,CAAC,MAAM;QAE9B,IAAI,CAAC,cAAc,GAAG,KAAK,CAAC,MAAM,CAAC,CAAC,IAAI,KAAI;;YAE3C,MAAM,MAAM,GAAG,IAAI,CAAC,YAAY,CAAC,kBAAkB,CAAC;AACpD,YAAA,OAAO,MAAM,KAAK,YAAY,CAAC,SAAS;SACxC,CAAC,CAAC,MAAM;;AAGV;;AAEG;AACH,IAAA,MAAM,iBAAiB,GAAA;AACtB,QAAA,IAAI,CAAC,oBAAoB,CAAC,IAAI,CAAC,YAAY,CAAC;;AAG7C;;AAEG;IACH,iBAAiB,GAAA;;QAEhB,cAAc,CAAC,WAAW,CAAC,cAAc,CAAC,CAAC,IAAI,CAAC,MAAK;YACpD,UAAU,CAAC,MAAK;gBACf,IAAI,CAAC,UAAU,EAAE;AAClB,aAAC,EAAE,eAAe,CAAC,mBAAmB,CAAC;AACxC,SAAC,CAAC;;AAGH;;AAEG;IACH,gBAAgB,GAAA;AACf,QAAA,MAAM,IAAI,GAAG,IAAI,CAAC,EAAE,CAAC,UAAU,EAAE,aAAa,CAAC,MAAM,CAAC;QACtD,IAAI,IAAI,EAAE;AACT,YAAA,IAAI,CAAC,gBAAgB,CAAC,YAAY,EAAE,MAAK;gBACxC,IAAI,CAAC,UAAU,EAAE;AAClB,aAAC,CAAC;;;QAIH,MAAM,QAAQ,GAAG,IAAI,gBAAgB,CAAC,CAAC,UAAU,KAAI;YACpD,IAAI,CAAC,UAAU,EAAE;AAClB,SAAC,CAAC;AACF,QAAA,QAAQ,CAAC,OAAO,CAAC,IAAI,CAAC,EAAE,EAAE;AACzB,YAAA,SAAS,EAAE,IAAI;AACf,YAAA,OAAO,EAAE,IAAI;AACb,YAAA,UAAU,EAAE,IAAI;YAChB,eAAe,EAAE,CAAC,kBAAkB,CAAC;AACrC,SAAA,CAAC;;IAGH,kBAAkB,GAAA;QACjB,UAAU,CAAC,MAAK;YACf,IAAI,CAAC,UAAU,EAAE;AAClB,SAAC,EAAE,eAAe,CAAC,mBAAmB,CAAC;;IAGxC,MAAM,GAAA;;QAEL,MAAM,gBAAgB,GAAG,gBAAgB,CAAC,IAAI,CAAC,QAAQ,CAAC;AAExD,QAAA,MAAM,YAAY,GAAG;AACpB,YAAA,KAAK,EAAE,EAAE,4BAA4B,EAAE,IAAI,EAAE;SAC7C;QAED,QACC,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAK,KAAK,EAAC,8BAA8B,EAAA,EACvC,CAAC,CAAC,IAAI,CAAC,YAAY,EAAE,YAAY,EAAE,IAAI,CAAC,KAAK,CAAC,EAE/C,CAAA,CAAA,GAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAG,KAAK,EAAC,oCAAoC,EAAA,WAAA,EAAW,QAAQ,EAAA,EAC9D,YAAY,CAAC,SAAS,CAAC,SAAS,CAAC,gBAAgB,CAAC,YAClD,IAAI,CAAC,cAAc,YACnB,YAAY,CAAC,SAAS,CAAC,KAAK,CAAC,gBAAgB,CAAC,YAC9C,IAAI,CAAC,UAAU,YACf,YAAY,CAAC,SAAS,CAAC,KAAK,CAAC,gBAAgB,CAAC,CAC5C,EAEJ,CAAA,CAAA,IAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAI,KAAK,EAAC,mBAAmB,EAAC,IAAI,EAAC,MAAM,EAAA,EACxC,CAAa,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAA,CACT,CACA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["OntarioTaskList","__stencil_proxyCustomElement"],"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.js CHANGED Viewed

@@ -1,17 +1,17 @@
-import { p as proxyCustomElement, H, h, F as Fragment } from './index.js';
-import { C as ConsoleMessageClass } from './p-CJXRCL8b.js';
-import { T as TaskStatuses, a as TaskToBadgeColour } from './p-A8xwC5QP.js';
-import { v as validateValueAgainstArray, b as validateLanguage } from './p-CNqFEifG.js';
-import { c as constructHintTextObject } from './p-CkusvkRr.js';
-import { t as translations } from './p-DgMhpSmi.js';
-import { d as defineCustomElement$3 } from './p-CfKaEpHy.js';
-import { d as defineCustomElement$2 } from './p-Br8HOVJk.js';
+import { proxyCustomElement, HTMLElement, h, Fragment } from '@stencil/core/internal/client';
+import { C as ConsoleMessageClass } from './console-message.js';
+import { T as TaskStatuses, a as TaskToBadgeColour } from './task-statuses.enum.js';
+import { v as validateValueAgainstArray, b as validateLanguage } from './validation-functions.js';
+import { c as constructHintTextObject } from './hints.js';
+import { t as translations } from './global.i18n.js';
+import { d as defineCustomElement$3 } from './ontario-badge2.js';
+import { d as defineCustomElement$2 } from './ontario-hint-text2.js';
 const ontarioTaskCss =
 	'.ontario-task__link:focus .ontario-task__label{box-shadow:0 0 0 4px #009ADB;outline:4px solid transparent;transition:box-shadow 0.1s ease-in-out}.ontario-task{border-bottom:0.125rem solid #cccccc;padding:1.1875rem 0;list-style:none}.ontario-task__content{display:flex;justify-content:space-between;align-items:center}@media screen and (max-width: 40em){.ontario-task__content{display:flex;flex-direction:column;align-items:flex-start}}.ontario-task__label{text-align:left;margin:0;font-size:1.1875rem;font-weight:600;display:inline-block}@media screen and (max-width: 40em){.ontario-task__label{margin-bottom:0.5rem}}.ontario-task__label a{text-decoration:none;color:inherit}.ontario-task__label a:hover{text-decoration:underline}.ontario-task__link{display:block;text-decoration:underline;color:#0066CC;font-weight:normal}.ontario-task__hint-text--true{margin-bottom:0.5rem}.ontario-task__link:focus{outline:none;box-shadow:none}.ontario-task__link:focus .ontario-task__label{box-shadow:0 0 0 4px #009ADB inset}.ontario-task:has(.ontario-task__link):hover{background-color:#f2f2f2}.ontario-task--status-completed .ontario-task__link .ontario-task__label,.ontario-task--status-inprogress .ontario-task__link .ontario-task__label,.ontario-task--status-notstarted .ontario-task__link .ontario-task__label,.ontario-task--status-optional .ontario-task__link .ontario-task__label,.ontario-task--status-error .ontario-task__link .ontario-task__label{color:#0066CC;text-decoration:underline}.ontario-task--status-completed .ontario-task__link:visited .ontario-task__label,.ontario-task--status-inprogress .ontario-task__link:visited .ontario-task__label,.ontario-task--status-notstarted .ontario-task__link:visited .ontario-task__label,.ontario-task--status-optional .ontario-task__link:visited .ontario-task__label,.ontario-task--status-error .ontario-task__link:visited .ontario-task__label{color:#551A8B}.ontario-task--status-completed .ontario-task__link:hover .ontario-task__label,.ontario-task--status-inprogress .ontario-task__link:hover .ontario-task__label,.ontario-task--status-notstarted .ontario-task__link:hover .ontario-task__label,.ontario-task--status-optional .ontario-task__link:hover .ontario-task__label,.ontario-task--status-error .ontario-task__link:hover .ontario-task__label{color:#00478F}.ontario-task--status-completed .ontario-task__link:active .ontario-task__label,.ontario-task--status-inprogress .ontario-task__link:active .ontario-task__label,.ontario-task--status-notstarted .ontario-task__link:active .ontario-task__label,.ontario-task--status-optional .ontario-task__link:active .ontario-task__label,.ontario-task--status-error .ontario-task__link:active .ontario-task__label{color:#002142}ontario-hint-text::part(hint-text){margin:0}@media screen and (max-width: 40em){ontario-hint-text::part(hint-text){margin-top:0.5rem}}';
 const OntarioTask$1 = /*@__PURE__*/ proxyCustomElement(
-	class OntarioTask extends H {
+	class OntarioTask extends HTMLElement {
 		constructor() {
 			super();
 			this.__registerHost();

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

	@@ -1 +1 @@
1	- {"file":"ontario-task.js","mappings":"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","names":["OntarioTask","__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/ontario-task/ontario-task.scss?tag=ontario-task&encapsulation=shadow","src/components/ontario-task/ontario-task.tsx"],"sourcesContent":["@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/2-tools/functions/global.functions' as globalFunctions;\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/2-tools/placeholder/focus.placeholders' as\n\tplaceholders;\n@use '@ongov/ontario-design-system-global-styles/dist/styles/scss/1-variables/font-weights.variables' as fontWeights;\n\n.ontario-task {\n\tborder-bottom: globalFunctions.px-to-rem(2) solid colours.$ontario-greyscale-20;\n\tpadding: globalFunctions.px-to-rem(19) spacing.$spacing-0;\n\tlist-style: none;\n\n\t&__content {\n\t\tdisplay: flex;\n\t\tjustify-content: space-between;\n\t\talign-items: center;\n\n\t\t@media screen and (max-width: breakpoints.$small-breakpoint) {\n\t\t\tdisplay: flex;\n\t\t\tflex-direction: column;\n\t\t\talign-items: flex-start;\n\t\t}\n\t}\n\n\t&__label {\n\t\ttext-align: left;\n\t\tmargin: spacing.$spacing-0;\n\t\tfont-size: globalFunctions.px-to-rem(19);\n\t\tfont-weight: fontWeights.$ontario-font-weights-semi-bold;\n\t\tdisplay: inline-block;\n\n\t\t@media screen and (max-width: breakpoints.$small-breakpoint) {\n\t\t\tmargin-bottom: spacing.$spacing-2;\n\t\t}\n\n\t\ta {\n\t\t\ttext-decoration: none;\n\t\t\tcolor: inherit;\n\n\t\t\t&:hover {\n\t\t\t\ttext-decoration: underline;\n\t\t\t}\n\t\t}\n\t}\n\n\t&__link {\n\t\tdisplay: block;\n\t\ttext-decoration: underline;\n\t\tcolor: colours.$ontario-colour-link;\n\t\tfont-weight: normal;\n\t}\n\n\t&__hint-text--true {\n\t\tmargin-bottom: spacing.$spacing-2;\n\t}\n}\n\n.ontario-task__link:focus {\n\toutline: none;\n\tbox-shadow: none;\n\n\t.ontario-task__label {\n\t\t@extend %ontario-focus;\n\t\tbox-shadow: 0 0 0 4px colours.$ontario-colour-focus inset;\n\t}\n}\n\n.ontario-task:has(.ontario-task__link) {\n\t&:hover {\n\t\tbackground-color: colours.$ontario-greyscale-5;\n\t}\n}\n\n@mixin link-states {\n\t&:visited .ontario-task__label {\n\t\tcolor: colours.$ontario-colour-link--visited;\n\t}\n\t&:hover .ontario-task__label {\n\t\tcolor: colours.$ontario-colour-link--hover;\n\t}\n\t&:active .ontario-task__label {\n\t\tcolor: colours.$ontario-colour-link--active;\n\t}\n}\n\n.ontario-task {\n\t&--status-completed,\n\t&--status-inprogress,\n\t&--status-notstarted,\n\t&--status-optional,\n\t&--status-error {\n\t\t.ontario-task__link {\n\t\t\t.ontario-task__label {\n\t\t\t\tcolor: colours.$ontario-colour-link;\n\t\t\t\ttext-decoration: underline;\n\t\t\t}\n\t\t\t@include link-states;\n\t\t}\n\t}\n}\n\nontario-hint-text::part(hint-text) {\n\tmargin: spacing.$spacing-0;\n\n\t@media screen and (max-width: breakpoints.$small-breakpoint) {\n\t\tmargin-top: spacing.$spacing-2;\n\t}\n}\n","import { h, Component, Prop, Watch, State, Listen, Element, Fragment } from '@stencil/core';\nimport { ConsoleMessageClass } from '../../utils/console-message/console-message';\nimport { TaskStatuses, TaskBadgeColour, TaskToBadgeColour } from '../../utils/common/task-statuses.enum';\nimport { validateLanguage, validateValueAgainstArray } from '../../utils/validation/validation-functions';\nimport { Hint } from '../../utils/common/common.interface';\nimport { Language } from '../../utils/common/language-types';\nimport { constructHintTextObject } from '../../utils/components/hints/hints';\nimport translations from '../../translations/global.i18n.json';\nimport { HeadingLevel } from '../../utils/common/common.interface';\nexport type TaskHeadingLevel = Extract<HeadingLevel, 'h2' \| 'h3' \| 'h4'>;\n\n@Component({\n\ttag: 'ontario-task',\n\tstyleUrl: 'ontario-task.scss',\n\tshadow: true,\n})\nexport class OntarioTask {\n\t@Element() el: HTMLElement;\n\n\t// Reference to the ontario-hint-text element for this task.\n\thintTextRef?: HTMLOntarioHintTextElement \| undefined;\n\n\t/*\n\t Specifies the label of the task.\n\t \n\t This is required to provide the name of the task.\n\t /\n\t@Prop() label: string;\n\n\t/\n\t A unique id for the task.\n\t \n\t This is required.\n\t /\n\t@Prop() taskId: string;\n\n\t/\n\t Specifies an optional link associated with the task.\n\t \n\t If provided, clicking the task will navigate to this URL.\n\t /\n\t@Prop() link?: string;\n\n\t/\n\t Disables the task link when set to `true`.\n\t \n\t Default is `false`, meaning the link will be active if provided.\n\t /\n\t@Prop() deactivateLink: boolean = false;\n\n\t/\n\t The language of the component.\n\t \n\t This is used for translations, and is by default set through event listeners checking for a language property from the header. If no language is passed, it will default to English.\n\t /\n\t@Prop({ mutable: true }) language?: Language;\n\n\t/\n\t Used to include the ontario-hint-text component for the task.\n\t \n\t This is optional.\n\t /\n\t@Prop({ mutable: true }) hintText?: string \| Hint;\n\n\t/\n\t Defines the status of the task, with default set to 'NotStarted'.\n\t \n\t Accepts values from `TaskStatuses` enum: `NotStarted`, `InProgress`, `Completed`.\n\t /\n\t/\n\t Defines the status of the task, with default set to 'NotStarted'.\n\t \n\t Accepts values from `TaskStatuses` enum: `NotStarted`, `InProgress`, `Completed`, etc.\n\t /\n\t@Prop() taskStatus: TaskStatuses = TaskStatuses.NotStarted;\n\n\t/\n\t Allows consumers to define the heading level for the task label.\n\t \n\t Accepts 'h2', 'h3' or 'h4'. Default is 'h3'.\n\t /\n\t@Prop() headingLevel: TaskHeadingLevel = 'h3';\n\n\t/\n\t The hint text options are re-assigned to the internalHintText state.\n\t /\n\t@State() private internalHintText: Hint;\n\n\t/\n\t Mutable variable, for internal use only.\n\t \n\t Set the task's status state depending on validation result.\n\t /\n\t@State() private taskStatusState: TaskStatuses = TaskStatuses.NotStarted;\n\t/\n\t Watch for changes in `taskStatus` prop to validate its value.\n\t /\n\t@Watch('taskStatus')\n\tvalidateTaskStatus() {\n\t\tconst validStatuses = Object.values(TaskStatuses);\n\t\tconst isValidStatus = validStatuses.includes(this.taskStatus);\n\t\tthis.taskStatusState = isValidStatus ? this.taskStatus : this.warnAndGetDefaultTaskStatus();\n\n\t\t// Update the `data-task-status` attribute\n\t\tthis.el.setAttribute('data-task-status', this.taskStatusState);\n\t}\n\n\t/\n\t Logs a warning to the console if the `taskStatus` prop is set to an invalid value.\n\t \n\t This function informs developers that the provided `taskStatus` is not recognized\n\t * and resets the status to the default value of `'notStarted'`. The warning message\n\t * specifies the valid task statuses to help guide correct usage.\n\t \n\t @returns The default task status `'notStarted'`.\n\t /\n\tprivate warnAndGetDefaultTaskStatus(): TaskStatuses {\n\t\tconst validStatuses = Object.values(TaskStatuses).join(', ');\n\t\tconst message = new ConsoleMessageClass();\n\t\tmessage\n\t\t\t.addDesignSystemTag()\n\t\t\t.addMonospaceText(' taskStatus ')\n\t\t\t.addRegularText('on')\n\t\t\t.addMonospaceText(' <ontario-task> ')\n\t\t\t.addRegularText('was set to an invalid taskStatus; only ')\n\t\t\t.addMonospaceText(validStatuses)\n\t\t\t.addRegularText(' are supported. The default taskStatus ')\n\t\t\t.addMonospaceText(TaskStatuses.NotStarted)\n\t\t\t.addRegularText(' is assumed.')\n\t\t\t.printMessage();\n\t\treturn TaskStatuses.NotStarted;\n\t}\n\n\t/\n\t Watch for changes in `headingLevel` prop to validate its value.\n\t /\n\t@Watch('headingLevel')\n\tvalidateHeadingLevel(newValue: string) {\n\t\tconst allowedValues: TaskHeadingLevel[] = ['h2', 'h3', 'h4'];\n\n\t\t// Validate the new value against the allowed values\n\t\tconst isValid = validateValueAgainstArray(newValue, allowedValues);\n\n\t\tif (!isValid) {\n\t\t\tconst message = new ConsoleMessageClass();\n\t\t\tmessage\n\t\t\t\t.addDesignSystemTag()\n\t\t\t\t.addMonospaceText(' headingLevel ')\n\t\t\t\t.addRegularText('on')\n\t\t\t\t.addMonospaceText(' <ontario-task> ')\n\t\t\t\t.addRegularText('was set to an invalid value; only ')\n\t\t\t\t.addMonospaceText(allowedValues.join(', '))\n\t\t\t\t.addRegularText(' are supported. The default value ')\n\t\t\t\t.addMonospaceText('h3')\n\t\t\t\t.addRegularText(' is assumed.')\n\t\t\t\t.printMessage();\n\n\t\t\tthis.headingLevel = 'h3';\n\t\t}\n\t}\n\n\t/\n\t Watch for changes in `hintText` prop and parse it if available.\n\t \n\t If a `hintText` prop is passed, the `constructHintTextObject` function will convert it to the correct format,\n\t * and the result will be stored in the `internalHintText` state.\n\t /\n\t@Watch('hintText')\n\tprivate parseHintText() {\n\t\tif (this.hintText) {\n\t\t\tconst hintTextObject = constructHintTextObject(this.hintText);\n\t\t\tthis.internalHintText = hintTextObject;\n\t\t}\n\t}\n\n\t/\n\t Listen for app language settings on the window to update the component language.\n\t /\n\t@Listen('setAppLanguage', { target: 'window' })\n\thandleSetAppLanguage(event: CustomEvent<Language>) {\n\t\tif (!this.language) {\n\t\t\tthis.language = validateLanguage(event);\n\t\t}\n\t}\n\n\t/\n\t This listens for the `headerLanguageToggled` event sent from the language toggle when it is connected to the DOM.\n\t * It is used for changing the component language after the language toggle has been activated.\n\t /\n\t@Listen('headerLanguageToggled', { target: 'window' })\n\thandleHeaderLanguageToggled(event: CustomEvent<Language>) {\n\t\tthis.language = validateLanguage(event);\n\t}\n\n\t/\n\t Determines the badge colour based on the current `taskStatusState`.\n\t \n\t @returns {TaskBadgeColour}\n\t /\n\tprivate getBadgeColour(): TaskBadgeColour {\n\t\treturn TaskToBadgeColour[this.taskStatusState] \|\| 'grey';\n\t}\n\n\t/\n\t Provides a translated task status string based on the current language.\n\t /\n\tprivate getTranslatedTaskStatus(): string {\n\t\tconst resolvedLanguage = validateLanguage(this.language);\n\t\treturn translations.taskStatus[this.taskStatusState][resolvedLanguage];\n\t}\n\n\t/\n\t Renders hint text if available.\n\t /\n\tprivate renderHintText() {\n\t\tif (this.internalHintText) {\n\t\t\treturn (\n\t\t\t\t<ontario-hint-text\n\t\t\t\t\thint={this.internalHintText.hint}\n\t\t\t\t\thintContentType={this.internalHintText.hintContentType}\n\t\t\t\t\tref={(el) => (this.hintTextRef = el)}\n\t\t\t\t></ontario-hint-text>\n\t\t\t);\n\t\t}\n\t\treturn null;\n\t}\n\n\t/\n\t Returns the class name(s) for the task label.\n\t /\n\tprivate getClass(): string {\n\t\treturn ['ontario-task__label', this.hintText && 'ontario-task__hint-text--true'].filter(Boolean).join(' ');\n\t}\n\n\t/\n\t Renders the task label and status content.\n\t \n\t This includes dynamically rendering the heading element (h2, h3, or h4) based on the `headingLevel` prop,\n\t * as well as the badge indicating the task status.\n\t /\n\tprivate renderTaskContent() {\n\t\tconst headingProps: any = {\n\t\t\tid: `task-label--${this.taskId}`,\n\t\t\tclass: this.getClass(),\n\t\t};\n\n\t\treturn (\n\t\t\t<div class=\"ontario-task__content\">\n\t\t\t\t{h(this.headingLevel, headingProps, this.label)}\n\t\t\t\t{this.taskStatusState && (\n\t\t\t\t\t<ontario-badge\n\t\t\t\t\t\tclass=\"ontario-task__badge\"\n\t\t\t\t\t\trole=\"status\"\n\t\t\t\t\t\taria-label={`${\n\t\t\t\t\t\t\ttranslations.taskStatus.taskStatus[validateLanguage(this.language)]\n\t\t\t\t\t\t} ${this.getTranslatedTaskStatus()} (${this.taskStatusState})`}\n\t\t\t\t\t\tcolour={this.getBadgeColour()}\n\t\t\t\t\t>\n\t\t\t\t\t\t{this.getTranslatedTaskStatus()}\n\t\t\t\t\t</ontario-badge>\n\t\t\t\t)}\n\t\t\t</div>\n\t\t);\n\t}\n\n\t/\n\t After the component loads, retrieve the hint text ID (if available) from the hintText component,\n\t * and set it for the `aria-describedby` attribute.\n\t /\n\tasync componentDidLoad() {\n\t\tif (this.hintTextRef) {\n\t\t\tlet hintTextId = this.hintTextRef.elementId;\n\n\t\t\tif (!hintTextId) {\n\t\t\t\thintTextId = `hint-text--${this.taskId}`;\n\t\t\t\tthis.hintTextRef.elementId = hintTextId;\n\t\t\t}\n\n\t\t\tconst taskElement = this.el.shadowRoot?.querySelector('li');\n\t\t\tif (taskElement) {\n\t\t\t\ttaskElement.setAttribute('aria-describedby', hintTextId);\n\t\t\t}\n\t\t}\n\t}\n\n\t/\n\t Lifecycle method: before the component loads, parse the hint text and\n\t * validate language and task status and heading level.\n\t */\n\tasync componentWillLoad() {\n\t\tthis.parseHintText();\n\t\tthis.language = validateLanguage(this.language);\n\t\tthis.validateTaskStatus();\n\t\tthis.validateHeadingLevel(this.headingLevel);\n\t}\n\n\trender() {\n\t\tconst isLinkActive = this.link && !this.deactivateLink;\n\t\tconst taskStatusClass = `ontario-task-status--${this.taskStatusState.replace(/([a-z])([A-Z])/g, '$1-$2').toLowerCase()}`;\n\n\t\tconst taskContent = (\n\t\t\t<Fragment>\n\t\t\t\t{this.renderTaskContent()}\n\t\t\t\t{this.renderHintText()}\n\t\t\t</Fragment>\n\t\t);\n\n\t\treturn (\n\t\t\t<li\n\t\t\t\tclass={`ontario-task ${taskStatusClass}`}\n\t\t\t\trole=\"group\"\n\t\t\t\taria-labelledby={`task-label--${this.taskId}`}\n\t\t\t\tdata-task-status={this.taskStatusState}\n\t\t\t>\n\t\t\t\t{isLinkActive ? (\n\t\t\t\t\t<a href={this.link} class=\"ontario-task__link\" aria-label={this.label}>\n\t\t\t\t\t\t{taskContent}\n\t\t\t\t\t</a>\n\t\t\t\t) : (\n\t\t\t\t\t<div>{taskContent}</div>\n\t\t\t\t)}\n\t\t\t</li>\n\t\t);\n\t}\n}\n"],"version":3}
1	+ {"file":"ontario-task.js","mappings":"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","names":["OntarioTask","__stencil_proxyCustomElement"],"sources":["src/components/ontario-task/ontario-task.scss?tag=ontario-task&encapsulation=shadow","src/components/ontario-task/ontario-task.tsx"],"sourcesContent":["@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/2-tools/functions/global.functions' as globalFunctions;\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/2-tools/placeholder/focus.placeholders' as\n\tplaceholders;\n@use '@ongov/ontario-design-system-global-styles/dist/styles/scss/1-variables/font-weights.variables' as fontWeights;\n\n.ontario-task {\n\tborder-bottom: globalFunctions.px-to-rem(2) solid colours.$ontario-greyscale-20;\n\tpadding: globalFunctions.px-to-rem(19) spacing.$spacing-0;\n\tlist-style: none;\n\n\t&__content {\n\t\tdisplay: flex;\n\t\tjustify-content: space-between;\n\t\talign-items: center;\n\n\t\t@media screen and (max-width: breakpoints.$small-breakpoint) {\n\t\t\tdisplay: flex;\n\t\t\tflex-direction: column;\n\t\t\talign-items: flex-start;\n\t\t}\n\t}\n\n\t&__label {\n\t\ttext-align: left;\n\t\tmargin: spacing.$spacing-0;\n\t\tfont-size: globalFunctions.px-to-rem(19);\n\t\tfont-weight: fontWeights.$ontario-font-weights-semi-bold;\n\t\tdisplay: inline-block;\n\n\t\t@media screen and (max-width: breakpoints.$small-breakpoint) {\n\t\t\tmargin-bottom: spacing.$spacing-2;\n\t\t}\n\n\t\ta {\n\t\t\ttext-decoration: none;\n\t\t\tcolor: inherit;\n\n\t\t\t&:hover {\n\t\t\t\ttext-decoration: underline;\n\t\t\t}\n\t\t}\n\t}\n\n\t&__link {\n\t\tdisplay: block;\n\t\ttext-decoration: underline;\n\t\tcolor: colours.$ontario-colour-link;\n\t\tfont-weight: normal;\n\t}\n\n\t&__hint-text--true {\n\t\tmargin-bottom: spacing.$spacing-2;\n\t}\n}\n\n.ontario-task__link:focus {\n\toutline: none;\n\tbox-shadow: none;\n\n\t.ontario-task__label {\n\t\t@extend %ontario-focus;\n\t\tbox-shadow: 0 0 0 4px colours.$ontario-colour-focus inset;\n\t}\n}\n\n.ontario-task:has(.ontario-task__link) {\n\t&:hover {\n\t\tbackground-color: colours.$ontario-greyscale-5;\n\t}\n}\n\n@mixin link-states {\n\t&:visited .ontario-task__label {\n\t\tcolor: colours.$ontario-colour-link--visited;\n\t}\n\t&:hover .ontario-task__label {\n\t\tcolor: colours.$ontario-colour-link--hover;\n\t}\n\t&:active .ontario-task__label {\n\t\tcolor: colours.$ontario-colour-link--active;\n\t}\n}\n\n.ontario-task {\n\t&--status-completed,\n\t&--status-inprogress,\n\t&--status-notstarted,\n\t&--status-optional,\n\t&--status-error {\n\t\t.ontario-task__link {\n\t\t\t.ontario-task__label {\n\t\t\t\tcolor: colours.$ontario-colour-link;\n\t\t\t\ttext-decoration: underline;\n\t\t\t}\n\t\t\t@include link-states;\n\t\t}\n\t}\n}\n\nontario-hint-text::part(hint-text) {\n\tmargin: spacing.$spacing-0;\n\n\t@media screen and (max-width: breakpoints.$small-breakpoint) {\n\t\tmargin-top: spacing.$spacing-2;\n\t}\n}\n","import { h, Component, Prop, Watch, State, Listen, Element, Fragment } from '@stencil/core';\nimport { ConsoleMessageClass } from '../../utils/console-message/console-message';\nimport { TaskStatuses, TaskBadgeColour, TaskToBadgeColour } from '../../utils/common/task-statuses.enum';\nimport { validateLanguage, validateValueAgainstArray } from '../../utils/validation/validation-functions';\nimport { Hint } from '../../utils/common/common.interface';\nimport { Language } from '../../utils/common/language-types';\nimport { constructHintTextObject } from '../../utils/components/hints/hints';\nimport translations from '../../translations/global.i18n.json';\nimport { HeadingLevel } from '../../utils/common/common.interface';\nexport type TaskHeadingLevel = Extract<HeadingLevel, 'h2' \| 'h3' \| 'h4'>;\n\n@Component({\n\ttag: 'ontario-task',\n\tstyleUrl: 'ontario-task.scss',\n\tshadow: true,\n})\nexport class OntarioTask {\n\t@Element() el: HTMLElement;\n\n\t// Reference to the ontario-hint-text element for this task.\n\thintTextRef?: HTMLOntarioHintTextElement \| undefined;\n\n\t/*\n\t Specifies the label of the task.\n\t \n\t This is required to provide the name of the task.\n\t /\n\t@Prop() label: string;\n\n\t/\n\t A unique id for the task.\n\t \n\t This is required.\n\t /\n\t@Prop() taskId: string;\n\n\t/\n\t Specifies an optional link associated with the task.\n\t \n\t If provided, clicking the task will navigate to this URL.\n\t /\n\t@Prop() link?: string;\n\n\t/\n\t Disables the task link when set to `true`.\n\t \n\t Default is `false`, meaning the link will be active if provided.\n\t /\n\t@Prop() deactivateLink: boolean = false;\n\n\t/\n\t The language of the component.\n\t \n\t This is used for translations, and is by default set through event listeners checking for a language property from the header. If no language is passed, it will default to English.\n\t /\n\t@Prop({ mutable: true }) language?: Language;\n\n\t/\n\t Used to include the ontario-hint-text component for the task.\n\t \n\t This is optional.\n\t /\n\t@Prop({ mutable: true }) hintText?: string \| Hint;\n\n\t/\n\t Defines the status of the task, with default set to 'NotStarted'.\n\t \n\t Accepts values from `TaskStatuses` enum: `NotStarted`, `InProgress`, `Completed`.\n\t /\n\t/\n\t Defines the status of the task, with default set to 'NotStarted'.\n\t \n\t Accepts values from `TaskStatuses` enum: `NotStarted`, `InProgress`, `Completed`, etc.\n\t /\n\t@Prop() taskStatus: TaskStatuses = TaskStatuses.NotStarted;\n\n\t/\n\t Allows consumers to define the heading level for the task label.\n\t \n\t Accepts 'h2', 'h3' or 'h4'. Default is 'h3'.\n\t /\n\t@Prop() headingLevel: TaskHeadingLevel = 'h3';\n\n\t/\n\t The hint text options are re-assigned to the internalHintText state.\n\t /\n\t@State() private internalHintText: Hint;\n\n\t/\n\t Mutable variable, for internal use only.\n\t \n\t Set the task's status state depending on validation result.\n\t /\n\t@State() private taskStatusState: TaskStatuses = TaskStatuses.NotStarted;\n\t/\n\t Watch for changes in `taskStatus` prop to validate its value.\n\t /\n\t@Watch('taskStatus')\n\tvalidateTaskStatus() {\n\t\tconst validStatuses = Object.values(TaskStatuses);\n\t\tconst isValidStatus = validStatuses.includes(this.taskStatus);\n\t\tthis.taskStatusState = isValidStatus ? this.taskStatus : this.warnAndGetDefaultTaskStatus();\n\n\t\t// Update the `data-task-status` attribute\n\t\tthis.el.setAttribute('data-task-status', this.taskStatusState);\n\t}\n\n\t/\n\t Logs a warning to the console if the `taskStatus` prop is set to an invalid value.\n\t \n\t This function informs developers that the provided `taskStatus` is not recognized\n\t * and resets the status to the default value of `'notStarted'`. The warning message\n\t * specifies the valid task statuses to help guide correct usage.\n\t \n\t @returns The default task status `'notStarted'`.\n\t /\n\tprivate warnAndGetDefaultTaskStatus(): TaskStatuses {\n\t\tconst validStatuses = Object.values(TaskStatuses).join(', ');\n\t\tconst message = new ConsoleMessageClass();\n\t\tmessage\n\t\t\t.addDesignSystemTag()\n\t\t\t.addMonospaceText(' taskStatus ')\n\t\t\t.addRegularText('on')\n\t\t\t.addMonospaceText(' <ontario-task> ')\n\t\t\t.addRegularText('was set to an invalid taskStatus; only ')\n\t\t\t.addMonospaceText(validStatuses)\n\t\t\t.addRegularText(' are supported. The default taskStatus ')\n\t\t\t.addMonospaceText(TaskStatuses.NotStarted)\n\t\t\t.addRegularText(' is assumed.')\n\t\t\t.printMessage();\n\t\treturn TaskStatuses.NotStarted;\n\t}\n\n\t/\n\t Watch for changes in `headingLevel` prop to validate its value.\n\t /\n\t@Watch('headingLevel')\n\tvalidateHeadingLevel(newValue: string) {\n\t\tconst allowedValues: TaskHeadingLevel[] = ['h2', 'h3', 'h4'];\n\n\t\t// Validate the new value against the allowed values\n\t\tconst isValid = validateValueAgainstArray(newValue, allowedValues);\n\n\t\tif (!isValid) {\n\t\t\tconst message = new ConsoleMessageClass();\n\t\t\tmessage\n\t\t\t\t.addDesignSystemTag()\n\t\t\t\t.addMonospaceText(' headingLevel ')\n\t\t\t\t.addRegularText('on')\n\t\t\t\t.addMonospaceText(' <ontario-task> ')\n\t\t\t\t.addRegularText('was set to an invalid value; only ')\n\t\t\t\t.addMonospaceText(allowedValues.join(', '))\n\t\t\t\t.addRegularText(' are supported. The default value ')\n\t\t\t\t.addMonospaceText('h3')\n\t\t\t\t.addRegularText(' is assumed.')\n\t\t\t\t.printMessage();\n\n\t\t\tthis.headingLevel = 'h3';\n\t\t}\n\t}\n\n\t/\n\t Watch for changes in `hintText` prop and parse it if available.\n\t \n\t If a `hintText` prop is passed, the `constructHintTextObject` function will convert it to the correct format,\n\t * and the result will be stored in the `internalHintText` state.\n\t /\n\t@Watch('hintText')\n\tprivate parseHintText() {\n\t\tif (this.hintText) {\n\t\t\tconst hintTextObject = constructHintTextObject(this.hintText);\n\t\t\tthis.internalHintText = hintTextObject;\n\t\t}\n\t}\n\n\t/\n\t Listen for app language settings on the window to update the component language.\n\t /\n\t@Listen('setAppLanguage', { target: 'window' })\n\thandleSetAppLanguage(event: CustomEvent<Language>) {\n\t\tif (!this.language) {\n\t\t\tthis.language = validateLanguage(event);\n\t\t}\n\t}\n\n\t/\n\t This listens for the `headerLanguageToggled` event sent from the language toggle when it is connected to the DOM.\n\t * It is used for changing the component language after the language toggle has been activated.\n\t /\n\t@Listen('headerLanguageToggled', { target: 'window' })\n\thandleHeaderLanguageToggled(event: CustomEvent<Language>) {\n\t\tthis.language = validateLanguage(event);\n\t}\n\n\t/\n\t Determines the badge colour based on the current `taskStatusState`.\n\t \n\t @returns {TaskBadgeColour}\n\t /\n\tprivate getBadgeColour(): TaskBadgeColour {\n\t\treturn TaskToBadgeColour[this.taskStatusState] \|\| 'grey';\n\t}\n\n\t/\n\t Provides a translated task status string based on the current language.\n\t /\n\tprivate getTranslatedTaskStatus(): string {\n\t\tconst resolvedLanguage = validateLanguage(this.language);\n\t\treturn translations.taskStatus[this.taskStatusState][resolvedLanguage];\n\t}\n\n\t/\n\t Renders hint text if available.\n\t /\n\tprivate renderHintText() {\n\t\tif (this.internalHintText) {\n\t\t\treturn (\n\t\t\t\t<ontario-hint-text\n\t\t\t\t\thint={this.internalHintText.hint}\n\t\t\t\t\thintContentType={this.internalHintText.hintContentType}\n\t\t\t\t\tref={(el) => (this.hintTextRef = el)}\n\t\t\t\t></ontario-hint-text>\n\t\t\t);\n\t\t}\n\t\treturn null;\n\t}\n\n\t/\n\t Returns the class name(s) for the task label.\n\t /\n\tprivate getClass(): string {\n\t\treturn ['ontario-task__label', this.hintText && 'ontario-task__hint-text--true'].filter(Boolean).join(' ');\n\t}\n\n\t/\n\t Renders the task label and status content.\n\t \n\t This includes dynamically rendering the heading element (h2, h3, or h4) based on the `headingLevel` prop,\n\t * as well as the badge indicating the task status.\n\t /\n\tprivate renderTaskContent() {\n\t\tconst headingProps: any = {\n\t\t\tid: `task-label--${this.taskId}`,\n\t\t\tclass: this.getClass(),\n\t\t};\n\n\t\treturn (\n\t\t\t<div class=\"ontario-task__content\">\n\t\t\t\t{h(this.headingLevel, headingProps, this.label)}\n\t\t\t\t{this.taskStatusState && (\n\t\t\t\t\t<ontario-badge\n\t\t\t\t\t\tclass=\"ontario-task__badge\"\n\t\t\t\t\t\trole=\"status\"\n\t\t\t\t\t\taria-label={`${\n\t\t\t\t\t\t\ttranslations.taskStatus.taskStatus[validateLanguage(this.language)]\n\t\t\t\t\t\t} ${this.getTranslatedTaskStatus()} (${this.taskStatusState})`}\n\t\t\t\t\t\tcolour={this.getBadgeColour()}\n\t\t\t\t\t>\n\t\t\t\t\t\t{this.getTranslatedTaskStatus()}\n\t\t\t\t\t</ontario-badge>\n\t\t\t\t)}\n\t\t\t</div>\n\t\t);\n\t}\n\n\t/\n\t After the component loads, retrieve the hint text ID (if available) from the hintText component,\n\t * and set it for the `aria-describedby` attribute.\n\t /\n\tasync componentDidLoad() {\n\t\tif (this.hintTextRef) {\n\t\t\tlet hintTextId = this.hintTextRef.elementId;\n\n\t\t\tif (!hintTextId) {\n\t\t\t\thintTextId = `hint-text--${this.taskId}`;\n\t\t\t\tthis.hintTextRef.elementId = hintTextId;\n\t\t\t}\n\n\t\t\tconst taskElement = this.el.shadowRoot?.querySelector('li');\n\t\t\tif (taskElement) {\n\t\t\t\ttaskElement.setAttribute('aria-describedby', hintTextId);\n\t\t\t}\n\t\t}\n\t}\n\n\t/\n\t Lifecycle method: before the component loads, parse the hint text and\n\t * validate language and task status and heading level.\n\t */\n\tasync componentWillLoad() {\n\t\tthis.parseHintText();\n\t\tthis.language = validateLanguage(this.language);\n\t\tthis.validateTaskStatus();\n\t\tthis.validateHeadingLevel(this.headingLevel);\n\t}\n\n\trender() {\n\t\tconst isLinkActive = this.link && !this.deactivateLink;\n\t\tconst taskStatusClass = `ontario-task-status--${this.taskStatusState.replace(/([a-z])([A-Z])/g, '$1-$2').toLowerCase()}`;\n\n\t\tconst taskContent = (\n\t\t\t<Fragment>\n\t\t\t\t{this.renderTaskContent()}\n\t\t\t\t{this.renderHintText()}\n\t\t\t</Fragment>\n\t\t);\n\n\t\treturn (\n\t\t\t<li\n\t\t\t\tclass={`ontario-task ${taskStatusClass}`}\n\t\t\t\trole=\"group\"\n\t\t\t\taria-labelledby={`task-label--${this.taskId}`}\n\t\t\t\tdata-task-status={this.taskStatusState}\n\t\t\t>\n\t\t\t\t{isLinkActive ? (\n\t\t\t\t\t<a href={this.link} class=\"ontario-task__link\" aria-label={this.label}>\n\t\t\t\t\t\t{taskContent}\n\t\t\t\t\t</a>\n\t\t\t\t) : (\n\t\t\t\t\t<div>{taskContent}</div>\n\t\t\t\t)}\n\t\t\t</li>\n\t\t);\n\t}\n}\n"],"version":3}

package/dist/components/ontario-textarea.js CHANGED Viewed

@@ -1,31 +1,31 @@
-import { p as proxyCustomElement, H, c as createEvent, h } from './index.js';
-import { I as InputCaption, h as handleInputEvent, E as EventType } from './p-CJ1sSyqT.js';
-import { b as validateLanguage, a as validatePropExists } from './p-CNqFEifG.js';
-import { C as ConsoleMessageClass } from './p-CJXRCL8b.js';
-import { c as constructHintTextObject } from './p-CkusvkRr.js';
-import { t as translations } from './p-DgMhpSmi.js';
-import { E as ErrorMessage } from './p-DcoC7PVV.js';
-import { d as defineCustomElement$6 } from './p-orSa-v1r.js';
-import { d as defineCustomElement$5 } from './p-Br8HOVJk.js';
-import { d as defineCustomElement$4 } from './p-BeNeXjVo.js';
-import { d as defineCustomElement$3 } from './p-DyZbYpqr.js';
-import { d as defineCustomElement$2 } from './p-pYZtHvSO.js';
-import { v as v4 } from './p-BF0_OXTe.js';
+import { proxyCustomElement, HTMLElement, createEvent, h } from '@stencil/core/internal/client';
+import { I as InputCaption, h as handleInputEvent, E as EventType } from './event-handler.js';
+import { b as validateLanguage, a as validatePropExists } from './validation-functions.js';
+import { C as ConsoleMessageClass } from './console-message.js';
+import { c as constructHintTextObject } from './hints.js';
+import { t as translations } from './global.i18n.js';
+import { E as ErrorMessage } from './error-message.js';
+import { d as defineCustomElement$6 } from './ontario-hint-expander2.js';
+import { d as defineCustomElement$5 } from './ontario-hint-text2.js';
+import { d as defineCustomElement$4 } from './ontario-icon-alert-error2.js';
+import { d as defineCustomElement$3 } from './ontario-icon-chevron-down2.js';
+import { d as defineCustomElement$2 } from './ontario-icon-chevron-up2.js';
+import { v as v4 } from './v4.js';
 const ontarioTextareaCss =
 	'@charset "UTF-8";.ontario-textarea:focus,.ontario-textarea:active,.ontario-input:focus,.ontario-input:active{box-shadow:0 0 0 4px #009ADB;outline:4px solid transparent;transition:box-shadow 0.1s ease-in-out}h6,.ontario-h6,h5,.ontario-h5,h4,.ontario-h4,h3,.ontario-h3,h2,.ontario-h2,h1>.ontario-label--heading,.ontario-fieldset__legend--large h1,.ontario-fieldset__legend--heading h1,h1,.ontario-h1{font-style:normal;font-weight:700;text-rendering:optimizeLegibility;margin-bottom:1rem;font-feature-settings:normal;font-family:"Raleway Modified", "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif}h1>.ontario-label--heading,.ontario-fieldset__legend--large h1,.ontario-fieldset__legend--heading h1,h1,.ontario-h1{font-size:2rem;letter-spacing:0.04rem;line-height:1.29;margin:2.5rem 0 1.5rem 0;max-width:70rem}@media screen and (min-width: 40em){h1>.ontario-label--heading,.ontario-fieldset__legend--large h1,.ontario-fieldset__legend--heading h1,h1,.ontario-h1{font-size:2.5rem;letter-spacing:0.04rem;line-height:1.2}}h2,.ontario-h2{font-size:1.6875rem;letter-spacing:0.03rem;line-height:1.37;margin:0 0 0.75rem 0;max-width:48rem}@media screen and (min-width: 40em){h2,.ontario-h2{font-size:2.0625rem;letter-spacing:0.02rem;line-height:1.33}}h3,.ontario-h3{font-size:1.4375rem;letter-spacing:0.02rem;line-height:1.39;margin:0 0 0.75rem 0;max-width:48rem}@media screen and (min-width: 40em){h3,.ontario-h3{font-size:1.75rem;letter-spacing:0.02rem;line-height:1.43}}h4,.ontario-h4{font-size:1.25rem;letter-spacing:0.03rem;line-height:1.5;margin:0 0 0.75rem 0;max-width:48rem}@media screen and (min-width: 40em){h4,.ontario-h4{font-size:1.5rem;letter-spacing:0.0313rem;line-height:1.5}}h5,.ontario-h5{font-size:1.125rem;letter-spacing:0.03rem;line-height:1.56;margin:0 0 0.75rem 0;max-width:48rem}@media screen and (min-width: 40em){h5,.ontario-h5{font-size:1.1875rem;letter-spacing:0.025rem;line-height:1.5}}h6,.ontario-h6{font-size:1rem;line-height:1.56;letter-spacing:0.03rem;max-width:48rem;margin:0 0 0.75rem 0}@media screen and (min-width: 40em){h6,.ontario-h6{font-size:1rem;letter-spacing:0.025rem;line-height:1.5}}.ontario-lead-statement{font-size:1.25rem;line-height:1.6;max-width:70rem}@media screen and (min-width: 40em){.ontario-lead-statement{font-size:1.375rem}}html{font-family:"Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;font-size:1rem}body{font-size:1rem;line-height:1.6;background-color:#FFFFFF;color:#1a1a1a;margin:0}p{font-size:inherit;margin-bottom:1.25rem;text-rendering:optimizeLegibility;margin:0 0 1.5rem 0}cite{font-style:italic;line-height:inherit}strong{font-weight:700;line-height:inherit}*,*::before,*::after{box-sizing:inherit}main p,main p:not(.ontario-lead-statement),main dd,main li{max-width:48rem}hr{border:0;padding:0;margin:2.5rem 0;border-bottom:4px solid #cccccc}hr.ontario-hr--dark{border-bottom:4px solid #1a1a1a}a{color:#0066CC;text-decoration:underline}a:visited{color:#551A8B}a:hover{color:#00478F}a:active{color:#002142}a:focus{-moz-box-shadow:0 0 0 4px #009ADB;-webkit-box-shadow:0 0 0 4px #009ADB;box-shadow:0 0 0 4px #009ADB;outline:4px solid transparent;transition:all 0.1s ease-in-out}p{margin:0 0 1.5rem 0}p+h1,p+h2,p+h3,p+h4,p+h5,p+h6,ul+h1,ul+h2,ul+h3,ul+h4,ul+h5,ul+h6,ol+h1,ol+h2,ol+h3,ol+h4,ol+h5,ol+h6,h1+h2,h2+h3,h3+h4,h4+h5,h5+h6{margin-top:2rem}p code,td code,li code{line-height:2.25rem}input[type=text],input[type=number],input[type=email],input[type=date],input[type=color],input[type=search],input[type=tel],textarea{background-origin:initial;height:auto;-webkit-appearance:none;-moz-appearance:none}input[type=checkbox]+label,input[type=radio]+label{font-family:"Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;font-size:1rem;font-weight:400;margin-left:0;margin-right:0}fieldset{border:0;margin:0;padding:0;page-break-inside:avoid}legend,label{display:block;margin:0}select{background-origin:initial;height:auto;-webkit-appearance:none;-moz-appearance:none}ul,ol{padding:0}ul{margin-left:2rem}ul li{padding:0 0 0.75rem 0}ol{margin-left:1.75rem}ol li{padding:0 0 0.75rem 0.25rem}ul li:last-child,ol li:last-child{padding-bottom:0}ul[class*=columns-] li:last-child,ol[class*=columns-] li:last-child{padding-bottom:0.75rem}ul ul,ol ul{margin:0.5rem 0 0.5rem 2rem}ul ol,ol ol{margin:0.5rem 0 0.5rem 1.75rem}p+ul,p+ol{margin-top:-0.75rem}@media screen and (min-width: 40em){ul{margin:0.5rem 0 1.5rem 3rem}ol{margin:0.5rem 0 1.5rem 2.75rem}ul ul,ol ul{margin:0.5rem 0 0.5rem 3rem}ul ol,ol ol{margin:0.5rem 0 0.5rem 2.75rem}}.ontario-form-group:last-of-type{margin-bottom:2.5rem}.ontario-form-group:last-of-type{margin-bottom:3rem}.ontario-fieldset__legend{color:#1a1a1a;font-family:"Raleway Modified", "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;font-size:1.1875rem;font-weight:700;margin:0 0 1rem 0;line-height:1.5;max-width:38.75em;white-space:normal;width:100%;hyphens:auto}@media screen and (max-width: 40em){.ontario-fieldset__legend{font-size:1.125rem;line-height:1.56}}.ontario-fieldset__legend--large,.ontario-fieldset__legend--heading{letter-spacing:0.02rem;line-height:1.2}.ontario-fieldset__legend--large h1,.ontario-fieldset__legend--heading h1{display:inline-block;margin:0}@media screen and (max-width: 40em){.ontario-fieldset__legend--large,.ontario-fieldset__legend--heading{font-size:1.4375rem;line-height:1.39}}.ontario-fieldset__legend--large{font-size:1.75rem}.ontario-fieldset__legend-required-flag,.ontario-fieldset__legend-optional-flag{font-family:"Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;font-size:1rem;font-weight:400}.ontario-fieldset__legend-required-flag:before,.ontario-fieldset__legend-optional-flag:before{content:" "}.ontario-label__flag{font-family:"Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;font-size:1rem;font-weight:400}.ontario-label__flag:before{content:" "}.ontario-label{cursor:pointer;color:#1a1a1a;font-family:"Raleway Modified", "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;font-size:1.1875rem;font-weight:700;line-height:1.5;margin:0 0 1rem 0;max-width:38.75em;white-space:normal;width:100%;hyphens:auto}@media screen and (max-width: 40em){.ontario-label{font-size:1.125rem;line-height:1.56}}.ontario-label--large{font-size:1.75rem;letter-spacing:0.02rem;line-height:1.2;max-width:26.25em}@media screen and (max-width: 40em){.ontario-label--large{font-size:1.4375rem;line-height:1.39}}h1>.ontario-label--heading{display:inline-block;margin:0}.ontario-label__flag{font-family:"Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;font-size:1rem;font-weight:400}.ontario-label__flag:before{content:" "}.ontario-input{border:2px solid #1a1a1a;border-radius:4px;box-sizing:border-box;color:#1a1a1a;display:block;font-size:1rem;font-family:"Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;line-height:1.5;margin:0 0 2.5rem;max-width:48rem;width:100%;padding:0.625rem 1rem;transition:box-shadow 0.1s ease-in-out}.ontario-input--2-char-width{max-width:8ex}.ontario-input--3-char-width{max-width:10ex}.ontario-input--4-char-width{max-width:12ex}.ontario-input--5-char-width{max-width:14ex}.ontario-input--7-char-width{max-width:17ex}.ontario-input--10-char-width{max-width:23ex}.ontario-input--20-char-width{max-width:41ex}.ontario-form-group:last-of-type{margin-bottom:2.5rem}.ontario-hide{display:none !important}.ontario-invisible{visibility:hidden !important}@media screen and (max-width: 39.99875em){.ontario-hide-for-small-only{display:none !important}}@media screen and (max-width: 0em), screen and (min-width: 40em){.ontario-show-for-small-only{display:none !important}}@media print, screen and (min-width: 40em){.ontario-hide-for-medium{display:none !important}}@media screen and (max-width: 39.99875em){.ontario-show-for-medium{display:none !important}}@media screen and (min-width: 40em) and (max-width: 72.99875em){.ontario-hide-for-medium-only{display:none !important}}@media screen and (max-width: 39.99875em), screen and (min-width: 73em){.ontario-show-for-medium-only{display:none !important}}@media print, screen and (min-width: 73em){.ontario-hide-for-large{display:none !important}}@media screen and (max-width: 72.99875em){.ontario-show-for-large{display:none !important}}@media screen and (min-width: 73em) and (max-width: 95.99875em){.ontario-hide-for-large-only{display:none !important}}@media screen and (max-width: 72.99875em), screen and (min-width: 96em){.ontario-show-for-large-only{display:none !important}}.ontario-show-for-sr,.ontario-show-on-focus{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0, 0, 0, 0)}.ontario-show-on-focus:active,.ontario-show-on-focus:focus{position:static;width:auto;height:auto;overflow:visible;clip:auto}.ontario-show-for-landscape,.ontario-hide-for-portrait{display:block !important}@media screen and (orientation: landscape){.ontario-show-for-landscape,.ontario-hide-for-portrait{display:block !important}}@media screen and (orientation: portrait){.ontario-show-for-landscape,.ontario-hide-for-portrait{display:none !important}}.ontario-hide-for-landscape,.ontario-show-for-portrait{display:none !important}@media screen and (orientation: landscape){.ontario-hide-for-landscape,.ontario-show-for-portrait{display:none !important}}@media screen and (orientation: portrait){.ontario-hide-for-landscape,.ontario-show-for-portrait{display:block !important}}.ontario-error-messaging{display:flex;align-items:flex-start;margin:-0.25rem 0 0.5rem 0;color:#D81A21;max-width:48rem}.ontario-error-messaging__content{margin-left:0.5rem}.ontario-input__error{border-color:#D81A21 !important}.ontario-error__hidden{display:none}.ontario-textarea{border:2px solid #1a1a1a;border-radius:4px;box-sizing:border-box;color:#1a1a1a;font-size:1rem;font-family:"Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;line-height:1.5;display:block;max-width:48rem;min-height:144px;margin:0 0 2.5rem;padding:0.625rem 1rem;transition:box-shadow 0.1s ease-in-out;white-space:pre-wrap;width:100%}.ontario-textarea.ontario-textarea-hint-expander--true{margin-bottom:1rem}.ontario-textarea--error textarea{border:0.125rem solid #CD0000}';
 const OntarioTextarea$1 = /*@__PURE__*/ proxyCustomElement(
-	class OntarioTextarea extends H {
+	class OntarioTextarea extends HTMLElement {
 		constructor() {
 			super();
 			this.__registerHost();
 			this.__attachShadow();
-			this.inputOnInput = createEvent(this, 'inputOnInput');
-			this.inputOnChange = createEvent(this, 'inputOnChange');
-			this.inputOnBlur = createEvent(this, 'inputOnBlur');
-			this.inputOnFocus = createEvent(this, 'inputOnFocus');
-			this.inputErrorOccurred = createEvent(this, 'inputErrorOccurred');
+			this.inputOnInput = createEvent(this, 'inputOnInput', 7);
+			this.inputOnChange = createEvent(this, 'inputOnChange', 7);
+			this.inputOnBlur = createEvent(this, 'inputOnBlur', 7);
+			this.inputOnFocus = createEvent(this, 'inputOnFocus', 7);
+			this.inputErrorOccurred = createEvent(this, 'inputErrorOccurred', 7);
 			this.internals = this.attachInternals();
 		}
 		get element() {

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

	@@ -1 +1 @@
1	- {"file":"ontario-textarea.js","mappings":"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","names":["OntarioTextarea","__stencil_proxyCustomElement","HTMLElement","uuid"],"sources":["src/components/ontario-textarea/ontario-textarea.scss?tag=ontario-textarea&encapsulation=shadow","src/components/ontario-textarea/ontario-textarea.tsx"],"sourcesContent":["@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@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/fonts.variables' as fonts;\n@use '@ongov/ontario-design-system-global-styles/dist/styles/scss/2-tools/placeholder/focus.placeholders' as\n\tfocusPlaceholders;\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/4-elements/_global.elements.scss';\n@use '../../styles/form.scss';\n@forward '../../utils/components/error-message/error-message';\n\n$ontario-textarea-border-width: 0.125rem;\n\n.ontario-textarea {\n\tborder: globalVariables.$border-size-standard solid colours.$ontario-colour-black;\n\tborder-radius: globalVariables.$global-radius;\n\tbox-sizing: border-box;\n\tcolor: colours.$ontario-colour-black;\n\tfont-size: fontSizes.$ontario-font-size-standard-body-text;\n\tfont-family: fonts.$ontario-font-open-sans;\n\tline-height: globalVariables.$line-height-default;\n\tdisplay: block;\n\tmax-width: globalVariables.$standard-width;\n\tmin-height: 144px;\n\tmargin: 0 0 spacing.$spacing-7;\n\tpadding: 0.625rem spacing.$spacing-4;\n\ttransition: focusPlaceholders.$ontario-focus-transition;\n\twhite-space: pre-wrap;\n\twidth: globalVariables.$full-width;\n\n\t&:focus,\n\t&:active {\n\t\t@extend %ontario-focus;\n\t}\n}\n\n.ontario-textarea.ontario-textarea-hint-expander--true {\n\tmargin-bottom: spacing.$spacing-4;\n}\n\n.ontario-textarea--error {\n\ttextarea {\n\t\tborder: $ontario-textarea-border-width solid colours.$ontario-colour-alert;\n\t}\n}\n","import { Component, Event, h, Prop, State, Listen, Watch, Element, EventEmitter, AttachInternals } from '@stencil/core';\nimport { v4 as uuid } from 'uuid';\n\nimport { HintExpander } from '../ontario-hint-expander/hint-expander.interface';\n\nimport { Hint, Input } from '../../utils/common/common.interface';\nimport { InputCaption } from '../../utils/common/input-caption/input-caption';\nimport { Caption } from '../../utils/common/input-caption/caption.interface';\nimport { validatePropExists, validateLanguage } from '../../utils/validation/validation-functions';\nimport { ConsoleMessageClass } from '../../utils/console-message/console-message';\nimport { Language } from '../../utils/common/language-types';\nimport { constructHintTextObject } from '../../utils/components/hints/hints';\nimport {\n\tInputFocusBlurEvent,\n\tEventType,\n\tInputInteractionEvent,\n\tInputInputEvent,\n} from '../../utils/events/event-handler.interface';\nimport { handleInputEvent } from '../../utils/events/event-handler';\n\nimport { default as translations } from '../../translations/global.i18n.json';\nimport { ErrorMessage } from '../../utils/components/error-message/error-message';\n\n@Component({\n\ttag: 'ontario-textarea',\n\tstyleUrl: 'ontario-textarea.scss',\n\tshadow: true,\n\tformAssociated: true,\n})\nexport class OntarioTextarea implements Input {\n\t@Element() element: HTMLElement;\n\t@AttachInternals() internals: ElementInternals;\n\n\thintTextRef: HTMLOntarioHintTextElement \| undefined;\n\n\t/*\n\t The text to display as the textarea label.\n\t \n\t @example\n\t * <ontario-input\n\t * caption='{\n\t * \"captionText\": \"Address\",\n\t * \"captionType\": \"heading\",\n\t * }'\n\t * required=\"true\"\n\t * ...>\n\t * </ontario-input>\n\t /\n\t@Prop() caption: Caption \| string;\n\n\t/\n\t The name assigned to the textarea. The name value is used to reference form data after a form is submitted.\n\t /\n\t@Prop() name: string;\n\n\t/\n\t The unique identifier of the textarea. This is optional - if no ID is passed, one will be generated.\n\t /\n\t@Prop({ mutable: true }) elementId?: string;\n\n\t/\n\t This is used to determine whether the textarea is required or not.\n\t * This prop also gets passed to the InputCaption utility to display either an optional or required flag in the label.\n\t * If no prop is set, it will default to false (optional).\n\t /\n\t@Prop() required?: boolean = false;\n\n\t/\n\t The textarea content value.\n\t /\n\t@Prop({ mutable: true }) value?: string;\n\n\t/\n\t Used to include the ontario-hint-text component for the textarea.\n\t * This is optional.\n\n\t /\n\t@Prop() hintText?: string \| Hint;\n\n\t/\n\t Used to include the ontario-hint-expander component for the textarea component.\n\t * This is passed in as an object with key-value pairs.\n\t \n\t This is optional.\n\t \n\t @example\n\t * <ontario-textarea\n\t * caption='{\n\t * \"captionText\": \"What are your thoughts\",\n\t * \"captionType\": \"heading\",\n\t * }'\n\t * \t name: \"textarea\"\n\t * hint-expander='{\n\t * \"hint\": \"This is the hint expander\",\n\t * \"content\": \"This is the content for the hint expander\"\n\t * }'\n\t * required=\"true\"\n\t * >\n\t * </ontario-textarea>\n\t /\n\t@Prop() hintExpander?: HintExpander \| string;\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 no language is passed, it will default to English.\n\t /\n\t@Prop({ mutable: true }) language?: Language;\n\n\t/\n\t Set this to display an error message\n\t /\n\t@Prop({ mutable: true }) errorMessage?: string;\n\n\t/\n\t Used to add a custom function to the textarea onInput event.\n\t /\n\t@Prop() customOnInput?: (event: globalThis.Event) => void;\n\n\t/\n\t Used to add a custom function to the textarea onChange event.\n\t /\n\t@Prop() customOnChange?: (event: globalThis.Event) => void;\n\n\t/\n\t Used to add a custom function to the textarea onBlur event.\n\t /\n\t@Prop() customOnBlur?: (event: globalThis.Event) => void;\n\n\t/\n\t Used to add a custom function to the textarea onFocus event.\n\t /\n\t@Prop() customOnFocus?: (event: globalThis.Event) => void;\n\n\t/\n\t Used for the `aria-describedby` value of the textarea. This will match with the id of the hint text.\n\t /\n\t@State() hintTextId: string \| null \| undefined;\n\n\t/\n\t The hint text options are re-assigned to the internalHintText array.\n\t /\n\t@State() private internalHintText: Hint;\n\n\t/\n\t The hint expander options are re-assigned to the internalHintExpander array.\n\t /\n\t@State() private internalHintExpander: HintExpander;\n\n\t/\n\t Instantiate an InputCaption object for internal logic use\n\t /\n\t@State() private captionState: InputCaption;\n\n\t/\n\t Emitted when a input event occurs when an input has been changed.\n\t /\n\t@Event() inputOnInput: EventEmitter<InputInputEvent>;\n\n\t/\n\t Emitted when a keyboard input or mouse event occurs when an input has been changed.\n\t /\n\t@Event() inputOnChange: EventEmitter<InputInteractionEvent>;\n\n\t/\n\t Emitted when a keyboard input event occurs when an input has lost focus.\n\t /\n\t@Event() inputOnBlur: EventEmitter<InputFocusBlurEvent>;\n\n\t/\n\t Emitted when a keyboard input event occurs when an input has gained focus.\n\t /\n\t@Event() inputOnFocus: EventEmitter<InputFocusBlurEvent>;\n\n\t/\n\t Emitted when an error message is reported to the component.\n\t /\n\t@Event() inputErrorOccurred: EventEmitter<{ inputId: string; errorMessage: string }>;\n\n\t/\n\t This listens for the `setAppLanguage` event sent from the test language toggler when it is is connected to the DOM. It is used for the initial language when the textarea component loads.\n\t /\n\t@Listen('setAppLanguage', { target: 'window' })\n\thandleSetAppLanguage(event: CustomEvent<Language>) {\n\t\tif (!this.language) {\n\t\t\tthis.language = validateLanguage(event);\n\t\t}\n\t}\n\n\t@Listen('headerLanguageToggled', { target: 'window' })\n\thandleHeaderLanguageToggled(event: CustomEvent<Language>) {\n\t\tthis.language = validateLanguage(event);\n\t}\n\n\t/\n\t Watch for changes to the `hintText` prop.\n\t \n\t If a `hintText` prop is passed, the `constructHintTextObject` function will convert it to the correct format, and set the result to the `internalHintText` state.\n\t /\n\t@Watch('hintText')\n\tprivate parseHintText() {\n\t\tif (this.hintText) {\n\t\t\tconst hintTextObject = constructHintTextObject(this.hintText);\n\t\t\tthis.internalHintText = hintTextObject;\n\t\t}\n\t}\n\n\t/\n\t Watch for changes to the `hintExpander` prop.\n\t \n\t If a `hintExpander` prop is passed, it will be parsed (if it is a string), and the result will be set to the `internalHintExpander` state.\n\t /\n\t@Watch('hintExpander')\n\tprivate parseHintExpander() {\n\t\tconst hintExpander = this.hintExpander;\n\t\tif (hintExpander) {\n\t\t\tif (typeof hintExpander === 'string') this.internalHintExpander = JSON.parse(hintExpander);\n\t\t\telse this.internalHintExpander = hintExpander;\n\t\t}\n\t}\n\n\t/\n\t * Watch for changes in the `name` prop for validation purposes.\n\t \n\t Validate the `name` and make sure the `name` prop has a value.\n\t * Log a warning if user doesn't input a value for the `name`.\n\t /\n\t@Watch('name')\n\tvalidateName(newValue: string) {\n\t\tif (validatePropExists(newValue)) {\n\t\t\tconst message = new ConsoleMessageClass();\n\t\t\tmessage\n\t\t\t\t.addDesignSystemTag()\n\t\t\t\t.addMonospaceText(' name ')\n\t\t\t\t.addRegularText('for')\n\t\t\t\t.addMonospaceText(' <ontario-textarea> ')\n\t\t\t\t.addRegularText('was not provided')\n\t\t\t\t.printMessage();\n\t\t}\n\t}\n\n\t/\n\t Watch for changes to the `caption` prop.\n\t \n\t The caption will be run through the InputCaption constructor to convert it to the correct format, and set the result to the `captionState` state.\n\t * @param newValue: Caption \| string\n\t /\n\t@Watch('caption')\n\tprivate updateCaptionState(newValue: Caption \| string) {\n\t\tthis.captionState = new InputCaption(\n\t\t\tthis.element.tagName,\n\t\t\tnewValue,\n\t\t\ttranslations,\n\t\t\tthis.language,\n\t\t\tfalse,\n\t\t\tthis.required,\n\t\t);\n\t}\n\n\t/\n\t Watch for changes to the `language` prop to render either the English or French translations\n\t /\n\t@Watch('language')\n\tupdateLanguage() {\n\t\tthis.updateCaptionState(this.caption);\n\t}\n\n\t@Watch('errorMessage')\n\tbroadcastInputErrorOccurredEvent() {\n\t\t// Emit event to notify anyone who wants to listen for errors occurring\n\t\tthis.inputErrorOccurred.emit({ inputId: this.getId(), errorMessage: this.errorMessage ?? '' });\n\t}\n\n\t/\n\t Function to handle textarea events and the information pertaining to the textarea to emit.\n\t /\n\tprivate handleEvent(event: Event, eventType: EventType) {\n\t\tconst input = event.target as HTMLTextAreaElement \| null;\n\n\t\tthis.internals?.setFormValue?.(input?.value ?? '');\n\n\t\thandleInputEvent(\n\t\t\tevent,\n\t\t\teventType,\n\t\t\tinput,\n\t\t\tthis.inputOnChange,\n\t\t\tthis.inputOnFocus,\n\t\t\tthis.inputOnBlur,\n\t\t\tthis.inputOnInput,\n\t\t\t'input',\n\t\t\tthis.customOnChange,\n\t\t\tthis.customOnFocus,\n\t\t\tthis.customOnBlur,\n\t\t\tthis.customOnInput,\n\t\t\tthis.element,\n\t\t);\n\t}\n\n\tpublic getId(): string {\n\t\treturn this.elementId ?? '';\n\t}\n\n\tprivate getValue(): string \| number {\n\t\treturn this.value ?? '';\n\t}\n\n\tprivate getClass(): string {\n\t\treturn this.hintExpander ? `ontario-textarea ontario-textarea-hint-expander--true` : `ontario-textarea`;\n\t}\n\n\t/\n\t If a `hintText` prop is passed, the id generated from it will be set to the internal `hintTextId` state to match with the textarea `aria-describedBy` attribute.\n\t */\n\tasync componentDidLoad() {\n\t\tthis.hintTextId = await this.hintTextRef?.getHintTextId();\n\t}\n\n\tcomponentWillLoad() {\n\t\tthis.updateCaptionState(this.caption);\n\t\tthis.elementId = this.elementId ?? uuid();\n\t\tthis.parseHintText();\n\t\tthis.parseHintExpander();\n\t\tthis.validateName(this.name);\n\t\tthis.language = validateLanguage(this.language);\n\t}\n\n\trender() {\n\t\tconst error = !!this.errorMessage;\n\t\treturn (\n\t\t\t<div class={`ontario-form-group ${error ? 'ontario-textarea--error' : ''}`}>\n\t\t\t\t{this.captionState.getCaption(this.getId(), !!this.internalHintExpander)}\n\t\t\t\t{this.internalHintText && (\n\t\t\t\t\t<ontario-hint-text\n\t\t\t\t\t\thint={this.internalHintText.hint}\n\t\t\t\t\t\thintContentType={this.internalHintText.hintContentType}\n\t\t\t\t\t\tref={(el) => (this.hintTextRef = el)}\n\t\t\t\t\t></ontario-hint-text>\n\t\t\t\t)}\n\t\t\t\t<ErrorMessage message={this.errorMessage} error={error} />\n\t\t\t\t<textarea\n\t\t\t\t\taria-describedby={this.hintTextId}\n\t\t\t\t\tclass={this.getClass()}\n\t\t\t\t\tid={this.getId()}\n\t\t\t\t\tname={this.name}\n\t\t\t\t\tvalue={this.getValue()}\n\t\t\t\t\tonInput={(e) => this.handleEvent(e, EventType.Input)}\n\t\t\t\t\tonChange={(e) => this.handleEvent(e, EventType.Change)}\n\t\t\t\t\tonBlur={(e) => this.handleEvent(e, EventType.Blur)}\n\t\t\t\t\tonFocus={(e) => this.handleEvent(e, EventType.Focus)}\n\t\t\t\t\trequired={!!this.required}\n\t\t\t\t></textarea>\n\t\t\t\t{this.internalHintExpander && (\n\t\t\t\t\t<ontario-hint-expander\n\t\t\t\t\t\thint={this.internalHintExpander.hint}\n\t\t\t\t\t\tcontent={this.internalHintExpander.content}\n\t\t\t\t\t\thintContentType={this.internalHintExpander.hintContentType}\n\t\t\t\t\t\tinput-exists\n\t\t\t\t\t></ontario-hint-expander>\n\t\t\t\t)}\n\t\t\t</div>\n\t\t);\n\t}\n}\n"],"version":3}
1	+ {"file":"ontario-textarea.js","mappings":"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","names":["OntarioTextarea","__stencil_proxyCustomElement","uuid"],"sources":["src/components/ontario-textarea/ontario-textarea.scss?tag=ontario-textarea&encapsulation=shadow","src/components/ontario-textarea/ontario-textarea.tsx"],"sourcesContent":["@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@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/fonts.variables' as fonts;\n@use '@ongov/ontario-design-system-global-styles/dist/styles/scss/2-tools/placeholder/focus.placeholders' as\n\tfocusPlaceholders;\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/4-elements/_global.elements.scss';\n@use '../../styles/form.scss';\n@forward '../../utils/components/error-message/error-message';\n\n$ontario-textarea-border-width: 0.125rem;\n\n.ontario-textarea {\n\tborder: globalVariables.$border-size-standard solid colours.$ontario-colour-black;\n\tborder-radius: globalVariables.$global-radius;\n\tbox-sizing: border-box;\n\tcolor: colours.$ontario-colour-black;\n\tfont-size: fontSizes.$ontario-font-size-standard-body-text;\n\tfont-family: fonts.$ontario-font-open-sans;\n\tline-height: globalVariables.$line-height-default;\n\tdisplay: block;\n\tmax-width: globalVariables.$standard-width;\n\tmin-height: 144px;\n\tmargin: 0 0 spacing.$spacing-7;\n\tpadding: 0.625rem spacing.$spacing-4;\n\ttransition: focusPlaceholders.$ontario-focus-transition;\n\twhite-space: pre-wrap;\n\twidth: globalVariables.$full-width;\n\n\t&:focus,\n\t&:active {\n\t\t@extend %ontario-focus;\n\t}\n}\n\n.ontario-textarea.ontario-textarea-hint-expander--true {\n\tmargin-bottom: spacing.$spacing-4;\n}\n\n.ontario-textarea--error {\n\ttextarea {\n\t\tborder: $ontario-textarea-border-width solid colours.$ontario-colour-alert;\n\t}\n}\n","import { Component, Event, h, Prop, State, Listen, Watch, Element, EventEmitter, AttachInternals } from '@stencil/core';\nimport { v4 as uuid } from 'uuid';\n\nimport { HintExpander } from '../ontario-hint-expander/hint-expander.interface';\n\nimport { Hint, Input } from '../../utils/common/common.interface';\nimport { InputCaption } from '../../utils/common/input-caption/input-caption';\nimport { Caption } from '../../utils/common/input-caption/caption.interface';\nimport { validatePropExists, validateLanguage } from '../../utils/validation/validation-functions';\nimport { ConsoleMessageClass } from '../../utils/console-message/console-message';\nimport { Language } from '../../utils/common/language-types';\nimport { constructHintTextObject } from '../../utils/components/hints/hints';\nimport {\n\tInputFocusBlurEvent,\n\tEventType,\n\tInputInteractionEvent,\n\tInputInputEvent,\n} from '../../utils/events/event-handler.interface';\nimport { handleInputEvent } from '../../utils/events/event-handler';\n\nimport { default as translations } from '../../translations/global.i18n.json';\nimport { ErrorMessage } from '../../utils/components/error-message/error-message';\n\n@Component({\n\ttag: 'ontario-textarea',\n\tstyleUrl: 'ontario-textarea.scss',\n\tshadow: true,\n\tformAssociated: true,\n})\nexport class OntarioTextarea implements Input {\n\t@Element() element: HTMLElement;\n\t@AttachInternals() internals: ElementInternals;\n\n\thintTextRef: HTMLOntarioHintTextElement \| undefined;\n\n\t/*\n\t The text to display as the textarea label.\n\t \n\t @example\n\t * <ontario-input\n\t * caption='{\n\t * \"captionText\": \"Address\",\n\t * \"captionType\": \"heading\",\n\t * }'\n\t * required=\"true\"\n\t * ...>\n\t * </ontario-input>\n\t /\n\t@Prop() caption: Caption \| string;\n\n\t/\n\t The name assigned to the textarea. The name value is used to reference form data after a form is submitted.\n\t /\n\t@Prop() name: string;\n\n\t/\n\t The unique identifier of the textarea. This is optional - if no ID is passed, one will be generated.\n\t /\n\t@Prop({ mutable: true }) elementId?: string;\n\n\t/\n\t This is used to determine whether the textarea is required or not.\n\t * This prop also gets passed to the InputCaption utility to display either an optional or required flag in the label.\n\t * If no prop is set, it will default to false (optional).\n\t /\n\t@Prop() required?: boolean = false;\n\n\t/\n\t The textarea content value.\n\t /\n\t@Prop({ mutable: true }) value?: string;\n\n\t/\n\t Used to include the ontario-hint-text component for the textarea.\n\t * This is optional.\n\n\t /\n\t@Prop() hintText?: string \| Hint;\n\n\t/\n\t Used to include the ontario-hint-expander component for the textarea component.\n\t * This is passed in as an object with key-value pairs.\n\t \n\t This is optional.\n\t \n\t @example\n\t * <ontario-textarea\n\t * caption='{\n\t * \"captionText\": \"What are your thoughts\",\n\t * \"captionType\": \"heading\",\n\t * }'\n\t * \t name: \"textarea\"\n\t * hint-expander='{\n\t * \"hint\": \"This is the hint expander\",\n\t * \"content\": \"This is the content for the hint expander\"\n\t * }'\n\t * required=\"true\"\n\t * >\n\t * </ontario-textarea>\n\t /\n\t@Prop() hintExpander?: HintExpander \| string;\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 no language is passed, it will default to English.\n\t /\n\t@Prop({ mutable: true }) language?: Language;\n\n\t/\n\t Set this to display an error message\n\t /\n\t@Prop({ mutable: true }) errorMessage?: string;\n\n\t/\n\t Used to add a custom function to the textarea onInput event.\n\t /\n\t@Prop() customOnInput?: (event: globalThis.Event) => void;\n\n\t/\n\t Used to add a custom function to the textarea onChange event.\n\t /\n\t@Prop() customOnChange?: (event: globalThis.Event) => void;\n\n\t/\n\t Used to add a custom function to the textarea onBlur event.\n\t /\n\t@Prop() customOnBlur?: (event: globalThis.Event) => void;\n\n\t/\n\t Used to add a custom function to the textarea onFocus event.\n\t /\n\t@Prop() customOnFocus?: (event: globalThis.Event) => void;\n\n\t/\n\t Used for the `aria-describedby` value of the textarea. This will match with the id of the hint text.\n\t /\n\t@State() hintTextId: string \| null \| undefined;\n\n\t/\n\t The hint text options are re-assigned to the internalHintText array.\n\t /\n\t@State() private internalHintText: Hint;\n\n\t/\n\t The hint expander options are re-assigned to the internalHintExpander array.\n\t /\n\t@State() private internalHintExpander: HintExpander;\n\n\t/\n\t Instantiate an InputCaption object for internal logic use\n\t /\n\t@State() private captionState: InputCaption;\n\n\t/\n\t Emitted when a input event occurs when an input has been changed.\n\t /\n\t@Event() inputOnInput: EventEmitter<InputInputEvent>;\n\n\t/\n\t Emitted when a keyboard input or mouse event occurs when an input has been changed.\n\t /\n\t@Event() inputOnChange: EventEmitter<InputInteractionEvent>;\n\n\t/\n\t Emitted when a keyboard input event occurs when an input has lost focus.\n\t /\n\t@Event() inputOnBlur: EventEmitter<InputFocusBlurEvent>;\n\n\t/\n\t Emitted when a keyboard input event occurs when an input has gained focus.\n\t /\n\t@Event() inputOnFocus: EventEmitter<InputFocusBlurEvent>;\n\n\t/\n\t Emitted when an error message is reported to the component.\n\t /\n\t@Event() inputErrorOccurred: EventEmitter<{ inputId: string; errorMessage: string }>;\n\n\t/\n\t This listens for the `setAppLanguage` event sent from the test language toggler when it is is connected to the DOM. It is used for the initial language when the textarea component loads.\n\t /\n\t@Listen('setAppLanguage', { target: 'window' })\n\thandleSetAppLanguage(event: CustomEvent<Language>) {\n\t\tif (!this.language) {\n\t\t\tthis.language = validateLanguage(event);\n\t\t}\n\t}\n\n\t@Listen('headerLanguageToggled', { target: 'window' })\n\thandleHeaderLanguageToggled(event: CustomEvent<Language>) {\n\t\tthis.language = validateLanguage(event);\n\t}\n\n\t/\n\t Watch for changes to the `hintText` prop.\n\t \n\t If a `hintText` prop is passed, the `constructHintTextObject` function will convert it to the correct format, and set the result to the `internalHintText` state.\n\t /\n\t@Watch('hintText')\n\tprivate parseHintText() {\n\t\tif (this.hintText) {\n\t\t\tconst hintTextObject = constructHintTextObject(this.hintText);\n\t\t\tthis.internalHintText = hintTextObject;\n\t\t}\n\t}\n\n\t/\n\t Watch for changes to the `hintExpander` prop.\n\t \n\t If a `hintExpander` prop is passed, it will be parsed (if it is a string), and the result will be set to the `internalHintExpander` state.\n\t /\n\t@Watch('hintExpander')\n\tprivate parseHintExpander() {\n\t\tconst hintExpander = this.hintExpander;\n\t\tif (hintExpander) {\n\t\t\tif (typeof hintExpander === 'string') this.internalHintExpander = JSON.parse(hintExpander);\n\t\t\telse this.internalHintExpander = hintExpander;\n\t\t}\n\t}\n\n\t/\n\t * Watch for changes in the `name` prop for validation purposes.\n\t \n\t Validate the `name` and make sure the `name` prop has a value.\n\t * Log a warning if user doesn't input a value for the `name`.\n\t /\n\t@Watch('name')\n\tvalidateName(newValue: string) {\n\t\tif (validatePropExists(newValue)) {\n\t\t\tconst message = new ConsoleMessageClass();\n\t\t\tmessage\n\t\t\t\t.addDesignSystemTag()\n\t\t\t\t.addMonospaceText(' name ')\n\t\t\t\t.addRegularText('for')\n\t\t\t\t.addMonospaceText(' <ontario-textarea> ')\n\t\t\t\t.addRegularText('was not provided')\n\t\t\t\t.printMessage();\n\t\t}\n\t}\n\n\t/\n\t Watch for changes to the `caption` prop.\n\t \n\t The caption will be run through the InputCaption constructor to convert it to the correct format, and set the result to the `captionState` state.\n\t * @param newValue: Caption \| string\n\t /\n\t@Watch('caption')\n\tprivate updateCaptionState(newValue: Caption \| string) {\n\t\tthis.captionState = new InputCaption(\n\t\t\tthis.element.tagName,\n\t\t\tnewValue,\n\t\t\ttranslations,\n\t\t\tthis.language,\n\t\t\tfalse,\n\t\t\tthis.required,\n\t\t);\n\t}\n\n\t/\n\t Watch for changes to the `language` prop to render either the English or French translations\n\t /\n\t@Watch('language')\n\tupdateLanguage() {\n\t\tthis.updateCaptionState(this.caption);\n\t}\n\n\t@Watch('errorMessage')\n\tbroadcastInputErrorOccurredEvent() {\n\t\t// Emit event to notify anyone who wants to listen for errors occurring\n\t\tthis.inputErrorOccurred.emit({ inputId: this.getId(), errorMessage: this.errorMessage ?? '' });\n\t}\n\n\t/\n\t Function to handle textarea events and the information pertaining to the textarea to emit.\n\t /\n\tprivate handleEvent(event: Event, eventType: EventType) {\n\t\tconst input = event.target as HTMLTextAreaElement \| null;\n\n\t\tthis.internals?.setFormValue?.(input?.value ?? '');\n\n\t\thandleInputEvent(\n\t\t\tevent,\n\t\t\teventType,\n\t\t\tinput,\n\t\t\tthis.inputOnChange,\n\t\t\tthis.inputOnFocus,\n\t\t\tthis.inputOnBlur,\n\t\t\tthis.inputOnInput,\n\t\t\t'input',\n\t\t\tthis.customOnChange,\n\t\t\tthis.customOnFocus,\n\t\t\tthis.customOnBlur,\n\t\t\tthis.customOnInput,\n\t\t\tthis.element,\n\t\t);\n\t}\n\n\tpublic getId(): string {\n\t\treturn this.elementId ?? '';\n\t}\n\n\tprivate getValue(): string \| number {\n\t\treturn this.value ?? '';\n\t}\n\n\tprivate getClass(): string {\n\t\treturn this.hintExpander ? `ontario-textarea ontario-textarea-hint-expander--true` : `ontario-textarea`;\n\t}\n\n\t/\n\t If a `hintText` prop is passed, the id generated from it will be set to the internal `hintTextId` state to match with the textarea `aria-describedBy` attribute.\n\t */\n\tasync componentDidLoad() {\n\t\tthis.hintTextId = await this.hintTextRef?.getHintTextId();\n\t}\n\n\tcomponentWillLoad() {\n\t\tthis.updateCaptionState(this.caption);\n\t\tthis.elementId = this.elementId ?? uuid();\n\t\tthis.parseHintText();\n\t\tthis.parseHintExpander();\n\t\tthis.validateName(this.name);\n\t\tthis.language = validateLanguage(this.language);\n\t}\n\n\trender() {\n\t\tconst error = !!this.errorMessage;\n\t\treturn (\n\t\t\t<div class={`ontario-form-group ${error ? 'ontario-textarea--error' : ''}`}>\n\t\t\t\t{this.captionState.getCaption(this.getId(), !!this.internalHintExpander)}\n\t\t\t\t{this.internalHintText && (\n\t\t\t\t\t<ontario-hint-text\n\t\t\t\t\t\thint={this.internalHintText.hint}\n\t\t\t\t\t\thintContentType={this.internalHintText.hintContentType}\n\t\t\t\t\t\tref={(el) => (this.hintTextRef = el)}\n\t\t\t\t\t></ontario-hint-text>\n\t\t\t\t)}\n\t\t\t\t<ErrorMessage message={this.errorMessage} error={error} />\n\t\t\t\t<textarea\n\t\t\t\t\taria-describedby={this.hintTextId}\n\t\t\t\t\tclass={this.getClass()}\n\t\t\t\t\tid={this.getId()}\n\t\t\t\t\tname={this.name}\n\t\t\t\t\tvalue={this.getValue()}\n\t\t\t\t\tonInput={(e) => this.handleEvent(e, EventType.Input)}\n\t\t\t\t\tonChange={(e) => this.handleEvent(e, EventType.Change)}\n\t\t\t\t\tonBlur={(e) => this.handleEvent(e, EventType.Blur)}\n\t\t\t\t\tonFocus={(e) => this.handleEvent(e, EventType.Focus)}\n\t\t\t\t\trequired={!!this.required}\n\t\t\t\t></textarea>\n\t\t\t\t{this.internalHintExpander && (\n\t\t\t\t\t<ontario-hint-expander\n\t\t\t\t\t\thint={this.internalHintExpander.hint}\n\t\t\t\t\t\tcontent={this.internalHintExpander.content}\n\t\t\t\t\t\thintContentType={this.internalHintExpander.hintContentType}\n\t\t\t\t\t\tinput-exists\n\t\t\t\t\t></ontario-hint-expander>\n\t\t\t\t)}\n\t\t\t</div>\n\t\t);\n\t}\n}\n"],"version":3}

package/dist/components/utils.js CHANGED Viewed

@@ -98,8 +98,8 @@ function getRootHTMLElement() {
 }
 export {
-	isNumber as a,
-	removeObjectsBySpecificKey as b,
+	removeObjectsBySpecificKey as a,
+	isNumber as b,
 	extractValuesByKey as e,
 	getRootHTMLElement as g,
 	hasMultipleTrueValues as h,

package/dist/components/validation-functions.js CHANGED Viewed

@@ -28,7 +28,7 @@ function validateLanguage(language) {
 	return 'en';
 }
-export { validateValueAgainstArray as a, validatePropExists as b, validateObjectExists as c, validateLanguage as v };
+export { validatePropExists as a, validateLanguage as b, validateObjectExists as c, validateValueAgainstArray as v };
 //# sourceMappingURL=validation-functions.js.map
 //# sourceMappingURL=validation-functions.js.map

package/dist/esm/{index-DMZw5oVx.js → index-Z6XKfgxi.js} RENAMED Viewed

@@ -5,6 +5,8 @@ const BUILD = /* ontario-design-system-components */ {
 	updatable: true,
 };
+/* Place your global variable definitons here */
 const globalFn = () => {};
 const globalScripts = globalFn;
@@ -2129,6 +2131,6 @@ export {
 	registerInstance as r,
 	setNonce as s,
 };
-//# sourceMappingURL=index-DMZw5oVx.js.map
+//# sourceMappingURL=index-Z6XKfgxi.js.map
-//# sourceMappingURL=index-DMZw5oVx.js.map
+//# sourceMappingURL=index-Z6XKfgxi.js.map