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

@ongov/ontario-design-system-component-library 5.0.0 → 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 (1193) hide show

package/dist/components/ontario-step-indicator.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"ontario-step-indicator.js","mappings":"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","names":["OntarioStepIndicator","__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/ontario-step-indicator/ontario-step-indicator.scss?tag=ontario-step-indicator&encapsulation=shadow","src/components/ontario-step-indicator/ontario-step-indicator.tsx"],"sourcesContent":["@use 'sass:math';\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@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/4-elements/_global.elements.scss';\n@use '../ontario-button/ontario-button.scss';\n\n$ontario-icon-size: 24px;\n\n.ontario-step-indicator {\n\tmargin-bottom: spacing.$spacing-7;\n}\n\n.ontario-step-indicator .ontario-step-indicator--with-back-button--false,\n.ontario-step-indicator .ontario-step-indicator--with-back-button--true,\n// Fractal component style coverage ↓\n.ontario-step-indicator .ontario-step-indicator--without-back-button,\n.ontario-step-indicator .ontario-step-indicator--with-back-button {\n\tdisplay: flex;\n\talign-items: center;\n\tjustify-content: space-between;\n}\n\n.ontario-step-indicator .ontario-step-indicator--with-back-button--false,\n// Fractal component style coverage ↓\n.ontario-step-indicator .ontario-step-indicator--without-back-button {\n\tjustify-content: flex-end;\n}\n\n.ontario-step-indicator .ontario-h4 {\n\tmargin: (spacing.$spacing-4 + spacing.$spacing-1) 0;\n\n\t@media screen and (max-width: breakpoints.$small-breakpoint) {\n\t\tmargin: spacing.$spacing-4 0;\n\t\ttext-align: right;\n\t}\n}\n\n/*\n Tertiary button defaults are overridden to achieve the mini-button specifications\n* width is unset in small screen size to remove unnecessary space being added to the button\n* min-width and max-width are set for small screen size to ensure the \"back\" button doesn't break and protrude into the text to the right\n/\n.ontario-step-indicator .ontario-button.ontario-button--tertiary {\n\tdisplay: flex;\n\talign-items: center;\n\tmargin: spacing.$spacing-3 spacing.$spacing-0;\n\tpadding-left: spacing.$spacing-2;\n\tpadding-right: spacing.$spacing-4;\n\tmin-width: spacing.$spacing-8;\n\n\t@media screen and (max-width: breakpoints.$small-breakpoint) {\n\t\twidth: unset;\n\t}\n\n\t.ontario-icon {\n\t\tmargin: spacing.$spacing-0 math.div(spacing.$spacing-3, 2) spacing.$spacing-0 spacing.$spacing-0;\n\t\tpadding: spacing.$spacing-0;\n\t\tmin-width: $ontario-icon-size;\n\t\tmin-height: $ontario-icon-size;\n\t}\n}\n\n.ontario-step-indicator hr {\n\tpadding: spacing.$spacing-0;\n\tmargin: spacing.$spacing-0;\n}\n","import { Component, Prop, Element, h, State, Listen } from '@stencil/core';\nimport { Language } from '../../utils/common/language-types';\nimport { validateLanguage } from '../../utils/validation/validation-functions';\nimport translations from '../../translations/global.i18n.json';\n\n@Component({\n\ttag: 'ontario-step-indicator',\n\tstyleUrl: 'ontario-step-indicator.scss',\n\tshadow: true,\n})\nexport class OntarioStepIndicator {\n\t@Element() host: HTMLElement;\n\n\t/\n\t A boolean value to determine whether or not the back button is displayed for the step indicator.\n\t \n\t This is optional. If no prop is passed, it will default to `false`.\n\t /\n\t@Prop() showBackButton?: boolean = false;\n\n\t/\n\t URL for the back element to set a path for where the link will lead.\n\t \n\t If a URL is passed in, the back element will display as an anchor tag.\n\t * The back element will require either the backButtonURL prop or the customOnClick prop to be passed in order for the back element to display.\n\t /\n\t@Prop() backButtonUrl?: string;\n\n\t/\n\t A number value to indicate which step the user is currently on.\n\t /\n\t@Prop() currentStep?: number;\n\n\t/\n\t A number value to indicate to the user the total number of steps the form has.\n\t /\n\t@Prop() numberOfSteps?: number;\n\n\t/\n\t A number value to indicate to the user the percentage of the form that has been completed.\n\t /\n\n\t@Prop() percentageComplete?: number;\n\n\t/\n\t Used to add a custom function to the back button onClick event.\n\t \n\t If this function is passed in, the back element will display as a button.\n\t * The back element will require either the backButtonURL prop or the customOnClick prop to be passed in order for the back element to display.\n\t /\n\t@Prop() customOnClick?: (event: globalThis.Event) => void;\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;\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 input 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@State() translations: any = translations;\n\n\tprivate handleCustomOnClick = (e: globalThis.Event) => {\n\t\tthis.customOnClick && this.customOnClick(e);\n\t};\n\n\tcomponentWillLoad() {\n\t\tthis.language = validateLanguage(this.language);\n\t}\n\n\trender() {\n\t\treturn (\n\t\t\t<div class=\"ontario-step-indicator\">\n\t\t\t\t<div class=\"ontario-row\">\n\t\t\t\t\t<div class=\"ontario-columns ontario-small-12\">\n\t\t\t\t\t\t<div class={`ontario-step-indicator--with-back-button--${this.showBackButton}`}>\n\t\t\t\t\t\t\t{this.showBackButton === true && !this.backButtonUrl && (\n\t\t\t\t\t\t\t\t<button class=\"ontario-button ontario-button--tertiary\" onClick={(e) => this.handleCustomOnClick(e)}>\n\t\t\t\t\t\t\t\t\t<ontario-icon-chevron-left colour=\"blue\"></ontario-icon-chevron-left>\n\t\t\t\t\t\t\t\t\t{this.translations.stepIndicator.back[`${this.language}`]}\n\t\t\t\t\t\t\t\t</button>\n\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t\t{this.showBackButton === true && this.backButtonUrl && (\n\t\t\t\t\t\t\t\t<a class=\"ontario-button ontario-button--tertiary\" href={this.backButtonUrl}>\n\t\t\t\t\t\t\t\t\t<ontario-icon-chevron-left colour=\"blue\"></ontario-icon-chevron-left>\n\t\t\t\t\t\t\t\t\t{this.translations.stepIndicator.back[`${this.language}`]}\n\t\t\t\t\t\t\t\t</a>\n\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t\t{this.percentageComplete ? (\n\t\t\t\t\t\t\t\t<span class=\"ontario-h4\">\n\t\t\t\t\t\t\t\t\t{this.percentageComplete}\n\t\t\t\t\t\t\t\t\t{this.language === 'en' ? '%' : <span> %</span>}{' '}\n\t\t\t\t\t\t\t\t\t{this.translations.stepIndicator.complete[`${this.language}`]}\n\t\t\t\t\t\t\t\t</span>\n\t\t\t\t\t\t\t) : (\n\t\t\t\t\t\t\t\t<span class=\"ontario-h4\">\n\t\t\t\t\t\t\t\t\t{this.translations.stepIndicator.step[`${this.language}`]} {this.currentStep}{' '}\n\t\t\t\t\t\t\t\t\t{this.translations.stepIndicator.of[`${this.language}`]} {this.numberOfSteps}\n\t\t\t\t\t\t\t\t</span>\n\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t</div>\n\t\t\t\t\t\t<hr />\n\t\t\t\t\t</div>\n\t\t\t\t</div>\n\t\t\t</div>\n\t\t);\n\t}\n}\n"],"version":3}
1	+ {"file":"ontario-step-indicator.js","mappings":"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","names":["OntarioStepIndicator","__stencil_proxyCustomElement"],"sources":["src/components/ontario-step-indicator/ontario-step-indicator.scss?tag=ontario-step-indicator&encapsulation=shadow","src/components/ontario-step-indicator/ontario-step-indicator.tsx"],"sourcesContent":["@use 'sass:math';\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@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/4-elements/_global.elements.scss';\n@use '../ontario-button/ontario-button.scss';\n\n$ontario-icon-size: 24px;\n\n.ontario-step-indicator {\n\tmargin-bottom: spacing.$spacing-7;\n}\n\n.ontario-step-indicator .ontario-step-indicator--with-back-button--false,\n.ontario-step-indicator .ontario-step-indicator--with-back-button--true,\n// Fractal component style coverage ↓\n.ontario-step-indicator .ontario-step-indicator--without-back-button,\n.ontario-step-indicator .ontario-step-indicator--with-back-button {\n\tdisplay: flex;\n\talign-items: center;\n\tjustify-content: space-between;\n}\n\n.ontario-step-indicator .ontario-step-indicator--with-back-button--false,\n// Fractal component style coverage ↓\n.ontario-step-indicator .ontario-step-indicator--without-back-button {\n\tjustify-content: flex-end;\n}\n\n.ontario-step-indicator .ontario-h4 {\n\tmargin: (spacing.$spacing-4 + spacing.$spacing-1) 0;\n\n\t@media screen and (max-width: breakpoints.$small-breakpoint) {\n\t\tmargin: spacing.$spacing-4 0;\n\t\ttext-align: right;\n\t}\n}\n\n/*\n Tertiary button defaults are overridden to achieve the mini-button specifications\n* width is unset in small screen size to remove unnecessary space being added to the button\n* min-width and max-width are set for small screen size to ensure the \"back\" button doesn't break and protrude into the text to the right\n/\n.ontario-step-indicator .ontario-button.ontario-button--tertiary {\n\tdisplay: flex;\n\talign-items: center;\n\tmargin: spacing.$spacing-3 spacing.$spacing-0;\n\tpadding-left: spacing.$spacing-2;\n\tpadding-right: spacing.$spacing-4;\n\tmin-width: spacing.$spacing-8;\n\n\t@media screen and (max-width: breakpoints.$small-breakpoint) {\n\t\twidth: unset;\n\t}\n\n\t.ontario-icon {\n\t\tmargin: spacing.$spacing-0 math.div(spacing.$spacing-3, 2) spacing.$spacing-0 spacing.$spacing-0;\n\t\tpadding: spacing.$spacing-0;\n\t\tmin-width: $ontario-icon-size;\n\t\tmin-height: $ontario-icon-size;\n\t}\n}\n\n.ontario-step-indicator hr {\n\tpadding: spacing.$spacing-0;\n\tmargin: spacing.$spacing-0;\n}\n","import { Component, Prop, Element, h, State, Listen } from '@stencil/core';\nimport { Language } from '../../utils/common/language-types';\nimport { validateLanguage } from '../../utils/validation/validation-functions';\nimport translations from '../../translations/global.i18n.json';\n\n@Component({\n\ttag: 'ontario-step-indicator',\n\tstyleUrl: 'ontario-step-indicator.scss',\n\tshadow: true,\n})\nexport class OntarioStepIndicator {\n\t@Element() host: HTMLElement;\n\n\t/\n\t A boolean value to determine whether or not the back button is displayed for the step indicator.\n\t \n\t This is optional. If no prop is passed, it will default to `false`.\n\t /\n\t@Prop() showBackButton?: boolean = false;\n\n\t/\n\t URL for the back element to set a path for where the link will lead.\n\t \n\t If a URL is passed in, the back element will display as an anchor tag.\n\t * The back element will require either the backButtonURL prop or the customOnClick prop to be passed in order for the back element to display.\n\t /\n\t@Prop() backButtonUrl?: string;\n\n\t/\n\t A number value to indicate which step the user is currently on.\n\t /\n\t@Prop() currentStep?: number;\n\n\t/\n\t A number value to indicate to the user the total number of steps the form has.\n\t /\n\t@Prop() numberOfSteps?: number;\n\n\t/\n\t A number value to indicate to the user the percentage of the form that has been completed.\n\t /\n\n\t@Prop() percentageComplete?: number;\n\n\t/\n\t Used to add a custom function to the back button onClick event.\n\t \n\t If this function is passed in, the back element will display as a button.\n\t * The back element will require either the backButtonURL prop or the customOnClick prop to be passed in order for the back element to display.\n\t /\n\t@Prop() customOnClick?: (event: globalThis.Event) => void;\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;\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 input 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@State() translations: any = translations;\n\n\tprivate handleCustomOnClick = (e: globalThis.Event) => {\n\t\tthis.customOnClick && this.customOnClick(e);\n\t};\n\n\tcomponentWillLoad() {\n\t\tthis.language = validateLanguage(this.language);\n\t}\n\n\trender() {\n\t\treturn (\n\t\t\t<div class=\"ontario-step-indicator\">\n\t\t\t\t<div class=\"ontario-row\">\n\t\t\t\t\t<div class=\"ontario-columns ontario-small-12\">\n\t\t\t\t\t\t<div class={`ontario-step-indicator--with-back-button--${this.showBackButton}`}>\n\t\t\t\t\t\t\t{this.showBackButton === true && !this.backButtonUrl && (\n\t\t\t\t\t\t\t\t<button class=\"ontario-button ontario-button--tertiary\" onClick={(e) => this.handleCustomOnClick(e)}>\n\t\t\t\t\t\t\t\t\t<ontario-icon-chevron-left colour=\"blue\"></ontario-icon-chevron-left>\n\t\t\t\t\t\t\t\t\t{this.translations.stepIndicator.back[`${this.language}`]}\n\t\t\t\t\t\t\t\t</button>\n\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t\t{this.showBackButton === true && this.backButtonUrl && (\n\t\t\t\t\t\t\t\t<a class=\"ontario-button ontario-button--tertiary\" href={this.backButtonUrl}>\n\t\t\t\t\t\t\t\t\t<ontario-icon-chevron-left colour=\"blue\"></ontario-icon-chevron-left>\n\t\t\t\t\t\t\t\t\t{this.translations.stepIndicator.back[`${this.language}`]}\n\t\t\t\t\t\t\t\t</a>\n\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t\t{this.percentageComplete ? (\n\t\t\t\t\t\t\t\t<span class=\"ontario-h4\">\n\t\t\t\t\t\t\t\t\t{this.percentageComplete}\n\t\t\t\t\t\t\t\t\t{this.language === 'en' ? '%' : <span> %</span>}{' '}\n\t\t\t\t\t\t\t\t\t{this.translations.stepIndicator.complete[`${this.language}`]}\n\t\t\t\t\t\t\t\t</span>\n\t\t\t\t\t\t\t) : (\n\t\t\t\t\t\t\t\t<span class=\"ontario-h4\">\n\t\t\t\t\t\t\t\t\t{this.translations.stepIndicator.step[`${this.language}`]} {this.currentStep}{' '}\n\t\t\t\t\t\t\t\t\t{this.translations.stepIndicator.of[`${this.language}`]} {this.numberOfSteps}\n\t\t\t\t\t\t\t\t</span>\n\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t</div>\n\t\t\t\t\t\t<hr />\n\t\t\t\t\t</div>\n\t\t\t\t</div>\n\t\t\t</div>\n\t\t);\n\t}\n}\n"],"version":3}

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

@@ -1,6 +1,6 @@
-import { p as proxyCustomElement, H, h, getAssetPath } from './index.js';
-import { C as ConsoleMessageClass, a as ConsoleType } from './p-CJXRCL8b.js';
-import { e as extractValuesByKey, o as organizeObjectKeys, a as removeObjectsBySpecificKey } from './p-DQi-JVyL.js';
+import { proxyCustomElement, HTMLElement, h, getAssetPath } from '@stencil/core/internal/client';
+import { C as ConsoleMessageClass, a as ConsoleType } from './console-message.js';
+import { e as extractValuesByKey, o as organizeObjectKeys, a as removeObjectsBySpecificKey } from './utils.js';
 const minimumGridColumns = 1;
 const maximumGridColumns = 12;
@@ -70,7 +70,7 @@ const ontarioTableCss =
 	'.ontario-table-container{position:relative;margin:0.5rem 0 2.5rem}.ontario-table-div{background:linear-gradient(to right, #FFFFFF 30%, rgba(255, 255, 255, 0)), linear-gradient(to right, rgba(255, 255, 255, 0), #FFFFFF 70%) 0 100%, linear-gradient(to right, rgba(0, 0, 0, 0.2) 0%, rgba(252, 0, 0, 0) 100.01%), linear-gradient(to left, rgba(0, 0, 0, 0.2) 0%, rgba(252, 0, 0, 0) 100.01%);background-repeat:no-repeat;background-size:2.5rem 100%, 2.5rem 100%, 0.875rem 100%, 0.875rem 100%;background-position:0 0, 100%, 0 0, 100%;background-attachment:local, local, scroll, scroll;overflow-x:auto}@media screen and (max-width: 40em){.ontario-table-div{overflow-x:scroll}}.ontario-table-scroll--wrapper{height:20px;overflow-x:auto;overflow-y:hidden;display:block}.ontario-table-container table{border-collapse:collapse;display:table;font-size:1.0625rem;font-weight:400;line-height:1.625rem}.ontario-table-container table.ontario-table--full-container-width{display:table;width:100%}.ontario-table-container table.ontario-table--zebra-stripes-enabled tbody tr:nth-child(even){background-color:rgba(0, 0, 0, 0.0509803922)}.ontario-table-container table:not(.ontario-table--no-zebra-stripes) tbody tr:first-child:nth-last-child(n+6):nth-child(even),.ontario-table-container table:not(.ontario-table--no-zebra-stripes) tbody tr:first-child:nth-last-child(n+6)~tr:nth-child(even){background-color:rgba(0, 0, 0, 0.0509803922)}@media screen and (max-width: 40em){.ontario-table-container table{font-size:1rem}}.ontario-table-container caption{background-color:rgba(0, 0, 0, 0.1019607843);display:table-caption;font-size:1.375rem;font-weight:700;line-height:2.1875rem;padding:1.125rem 1rem 1.125rem 1.5rem;text-align:left}@media screen and (max-width: 40em){.ontario-table-container caption{font-size:1.25rem;line-height:1.875rem;padding-left:1rem}}.ontario-table-container table thead{border:solid;border-width:0.1875rem 0;border-color:#1a1a1a;vertical-align:text-top}.ontario-table-container table thead th{font-size:1.125rem;line-height:1.5;margin:0;padding:1.75rem 1rem 1.75rem 1.5rem;text-align:left;text-size-adjust:none;-webkit-text-size-adjust:none}@media screen and (max-width: 40em){.ontario-table-container table thead th{font-size:1rem;line-height:1.3125rem;padding:1.5rem 0.5rem 1.5rem 1rem}}.ontario-table-container table thead th.ontario-table-cell--numeric{padding:1.75rem 1.5rem 1.75rem 1rem;text-align:right}@media screen and (max-width: 40em){.ontario-table-container table thead th.ontario-table-cell--numeric{padding:1.5rem 1rem 1.5rem 0.5rem}}.ontario-table-container table tbody{font-size:1rem;vertical-align:text-top}.ontario-table-container table tbody tr{border:solid;border-width:0.0625rem 0;border-color:rgba(0, 0, 0, 0.3019607843)}.ontario-table-container table tbody tr:last-child{border-width:0.1875rem 0;border-top-width:0;border-color:#1a1a1a}.ontario-table-container table tbody tr.ontario-table-row--highlight{background-color:rgba(225, 145, 0, 0.2352941176) !important}.ontario-table-container table tbody tr.ontario-table-row--highlight th{padding-left:1.5rem;display:flex;position:relative}.ontario-table-container table tbody tr.ontario-table-row--highlight th img.ontario-table--highlight-indicator{width:0.5rem;position:absolute;top:1.5rem;left:0}.ontario-table-container table tbody tr.ontario-table-row--subtotal{background-color:rgba(0, 123, 158, 0.1137254902) !important}.ontario-table-container tbody th,.ontario-table-container tfoot th,.ontario-table-container table td{padding:1.1875rem 1rem 1.1875rem 1.5rem;text-align:left;letter-spacing:0.025rem}.ontario-table-container tbody th,.ontario-table-container tfoot th{font-weight:700}@media screen and (max-width: 40em){.ontario-table-container tbody th,.ontario-table-container tfoot th{font-size:1rem;line-height:1.625rem;padding-right:0.5rem;padding-left:1rem}}.ontario-table-container table td img{vertical-align:top}@media screen and (max-width: 40em){.ontario-table-container table td img{max-width:none}}.ontario-table-container table td.ontario-table-cell--numeric{font-family:"Courier Prime", Courier, "Courier New", monospace;font-size:1.0625rem;padding:1.1875rem 1.5rem 1.1875rem 1rem;text-align:right}.ontario-table-container table td.ontario-table-cell--numeric strong{font-family:"Courier Prime", Courier, "Courier New", monospace}.ontario-table-container tbody tr.ontario-table-row--subtotal,.ontario-table-container tfoot tr{border:solid;border-width:0.1875rem 0;font-size:1rem;border-color:#1a1a1a}.ontario-table-container tbody tr.ontario-table-row--subtotal th,.ontario-table-container tfoot tr th{padding:1.4375rem 1rem 1.4375rem 1.5rem}.ontario-table-container tbody tr.ontario-table-row--subtotal td,.ontario-table-container tfoot tr td{font-weight:700;padding:1.4375rem 1rem 1.4375rem 1.5rem}.ontario-table-container tfoot{vertical-align:text-top}.ontario-table-container tfoot tr{background-color:rgba(0, 119, 160, 0.337254902) !important}.ontario-table-header--column-span-1{min-width:8.33333vw}.ontario-table-header--column-span-2{min-width:16.66666vw}.ontario-table-header--column-span-3{min-width:25vw}.ontario-table-header--column-span-4{min-width:33.33333vw}.ontario-table-header--column-span-5{min-width:41.66666vw}.ontario-table-header--column-span-6{min-width:50vw}.ontario-table-header--column-span-7{min-width:58.33333vw}.ontario-table-header--column-span-8{min-width:66.66666vw}.ontario-table-header--column-span-9{min-width:75vw}.ontario-table-header--column-span-10{min-width:83.33333vw}.ontario-table-header--column-span-11{min-width:91.66666vw}.ontario-table-header--column-span-12{min-width:100vw}.ontario-table-container .ontario-table--condensed td{padding:0.75rem 1rem 0.75rem 1.5rem;text-align:left}.ontario-table-container .ontario-table--condensed td.ontario-table-cell--numeric{padding:0.75rem 1.5rem 0.75rem 1rem;font-size:1.0625rem;text-align:right}.ontario-table-container .ontario-table--condensed tbody th,.ontario-table-container .ontario-table--condensed tfoot th{padding:0.75rem 1rem 0.75rem 1.5rem}.ontario-table-container .ontario-table--condensed tr.ontario-table-row--highlight th img.ontario-table--highlight-indicator{top:1.0625rem}.ontario-table-container .ontario-table--condensed tr.ontario-table-row--subtotal th,.ontario-table-container .ontario-table--condensed tr.ontario-table-row--subtotal td,.ontario-table-container .ontario-table--condensed tfoot tr th,.ontario-table-container .ontario-table--condensed tfoot tr td{padding:1rem 1rem 1rem 1.5rem}.ontario-table-container .ontario-table--condensed tr.ontario-table-row--subtotal td.ontario-table-cell--numeric,.ontario-table-container .ontario-table--condensed tfoot tr td.ontario-table-cell--numeric{text-align:right;padding:1rem 1.5rem 1rem 1rem}@media screen and (max-width: 40em){.ontario-table-container .ontario-table--condensed td{padding:0.75rem 0.5rem 0.75rem 1rem;font-size:1rem}.ontario-table-container .ontario-table--condensed td.ontario-table-cell--numeric{padding:0.75rem 1rem 0.75rem 0.5rem}.ontario-table-container .ontario-table--condensed tbody th{padding:0.75rem 0.5rem 0.75rem 1rem}.ontario-table-container .ontario-table--condensed tr.ontario-table-row--subtotal th,.ontario-table-container .ontario-table--condensed tr.ontario-table-row--subtotal td,.ontario-table-container .ontario-table--condensed tfoot tr th,.ontario-table-container .ontario-table--condensed tfoot tr td{padding:1rem 0.5rem 1rem 1rem}.ontario-table-container .ontario-table--condensed tr.ontario-table-row--subtotal td.ontario-table-cell--numeric,.ontario-table-container .ontario-table--condensed tfoot tr td.ontario-table-cell--numeric{text-align:right;padding:1rem 1rem 1rem 0.5rem}}';
 const OntarioTable$1 = /*@__PURE__*/ proxyCustomElement(
-	class OntarioTable extends H {
+	class OntarioTable extends HTMLElement {
 		constructor() {
 			super();
 			this.__registerHost();

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":"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","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-DFHrahxt.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", "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", "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", "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}';
+	'@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() {