@ongov/ontario-design-system-component-library 8.0.0 → 8.1.0-alpha.1

package/components/ontario-accordion.js

@@ -2,8 +2,8 @@ import { p as proxyCustomElement, H, c as createEvent, h } from './index.js';
 import { v as validateLanguage } from './p-CqeFgkuV.js';
 import { C as ConsoleMessageClass } from './p-Cdm-Ot0O.js';
 import { t as translations } from './p-BSYYKAjY.js';
-import { d as defineCustomElement$3 } from './p-D5zWKgjq.js';
-import { d as defineCustomElement$2 } from './p-ByGkPLVQ.js';
+import { d as defineCustomElement$3 } from './p-BaRRVoHc.js';
+import { d as defineCustomElement$2 } from './p-4_yLspxh.js';
 import { v as v4 } from './p-BF0_OXTe.js';
 
 var AccordionChangeDetailReasons;
@@ -203,18 +203,18 @@ const OntarioAccordion$1 = /*@__PURE__*/ proxyCustomElement(
 			var _a, _b, _c, _d, _e, _f;
 			return h(
 				'div',
-				{ key: 'da27c5ce718dcbbd5e8a7bb66e03491d5da59db4' },
-				h('h2', { key: '3a1c6c4fc39f29b6f2e8756dc7835d71c393ca83' }, this.name),
+				{ key: 'c5b5b88d25bb7c243ec2ba9c39ca07bf45f12ff7' },
+				h('h2', { key: '8ab65a6a2864b47b96d65308927435f7da52d63a' }, this.name),
 				h(
 					'div',
-					{ key: 'fb589625eeb5e65ef78ea14dd7a07f10b26f1eb1', class: 'ontario-accordions__container' },
+					{ key: 'a72d4fbc18e89e6086ffd9f0092ccd713100d86f', class: 'ontario-accordions__container' },
 					h(
 						'div',
-						{ key: '154dd1f975d95b584eee10606246c1030096f8e6', class: 'ontario-accordion__controls' },
+						{ key: '761678cadda887400932620ae219b135f942f16d', class: 'ontario-accordion__controls' },
 						h(
 							'button',
 							{
-								'key': '630718017aec87c8ecf14a17dfe603b54c562c13',
+								'key': '2468f6735f7f569cda55ca5d5f9208849cf8cf79',
 								'class': 'ontario-accordion__button--expand-all',
 								'onClick': () => this.toggleAll(),
 								'aria-expanded':
@@ -224,7 +224,7 @@ const OntarioAccordion$1 = /*@__PURE__*/ proxyCustomElement(
 							},
 							h(
 								'span',
-								{ key: '81701e74455e661cb4db276d1d409805a6baaa9c', class: 'ontario-accordion--expand-open-all' },
+								{ key: '6dbc113a58454573f7894b466bff208075b477ac', class: 'ontario-accordion--expand-open-all' },
 								this.expandCollapseLabel === 'expand'
 									? h(
 											'div',

package/components/ontario-accordion.js.map

@@ -1 +1 @@
-{"file":"ontario-accordion.js","mappings":"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","names":["OntarioAccordion","__stencil_proxyCustomElement","HTMLElement","uuid"],"sources":["src/components/ontario-accordion/accordion.interface.ts","src/components/ontario-accordion/ontario-accordion.scss?tag=ontario-accordion&encapsulation=shadow","src/components/ontario-accordion/ontario-accordion.tsx"],"sourcesContent":["import { Base } from '../../utils/common/common.interface';\n\nexport interface Accordion extends Base {\n\t/**\n\t * The label for the individual accordion button.\n\t */\n\tlabel: string;\n\n\t/**\n\t * The content type of the accordion.\n\t * If no prop is passed, it will default to a string.\n\t * If the accordion requires multiple lines or HTML, the `accordionContentType` prop should be set to `html`.\n\t */\n\n\taccordionContentType: 'string' | 'html';\n\n\t/**\n\t * The content that is passed into each accordion.\n\t */\n\tcontent: string;\n\n\t/**\n\t * A boolean to track whether the accordion is expanded or collapsed.\n\t */\n\tisOpen: boolean;\n\n\t/**\n\t * Custom Aria Label text for the section.\n\t */\n\tariaLabelText: string;\n}\n\nexport enum AccordionChangeDetailReasons {\n\tInit = 'init',\n\tToggleOne = 'toggle-one',\n\tToggleAll = 'toggle-all',\n}\n\n/**\n * The event detail payload emitted by the accordion component.\n */\nexport interface AccordionChangeDetail {\n\t/** Array of indexes currently open */\n\topenIndexes: number[];\n\n\t/** The index that was just toggled (if applicable) */\n\tchangedIndex?: number;\n\n\t/** True if triggered by expand/collapse all */\n\tisBulk?: boolean;\n\n\t/** Optional description of what triggered the event */\n\treason?: AccordionChangeDetailReasons;\n}\n","@use 'pkg:@ongov/ontario-design-system-global-styles/styles/scss/1-variables/global.variables' as globalVariables;\n@use 'pkg:@ongov/ontario-design-system-global-styles/styles/scss/1-variables/spacing.variables' as spacing;\n@use 'pkg:@ongov/ontario-design-system-global-styles/styles/scss/1-variables/colours.variables' as colours;\n@use 'pkg:@ongov/ontario-design-system-global-styles/styles/scss/1-variables/breakpoints.variables' as breakpoints;\n@use 'pkg:@ongov/ontario-design-system-global-styles/styles/scss/2-tools/placeholder/focus.placeholders' as placeholders;\n@use 'pkg:@ongov/ontario-design-system-global-styles/styles/scss/1-variables/typography.variables' as typography;\n@use 'pkg:@ongov/ontario-design-system-global-styles/styles/scss/1-variables/font-sizes.variables' as fontSizes;\n\n.ontario-accordions__container {\n\tmax-width: globalVariables.$standard-width;\n\twidth: globalVariables.$full-width;\n}\n\n.ontario-accordion {\n\tborder-top: 2px solid colours.$ontario-greyscale-20;\n\n\t&:last-of-type {\n\t\tborder-bottom: 2px solid colours.$ontario-greyscale-20;\n\t}\n}\n\n.ontario-accordion__controls {\n\tdisplay: flex;\n\tjustify-content: flex-end;\n}\n\n.ontario-accordion__button,\n.ontario-accordion__button--expand-all {\n\tbackground: none;\n\tborder: 0;\n\tbox-sizing: border-box;\n}\n\n.ontario-accordion__button--expand-all {\n\tfont-size: fontSizes.$ontario-font-size-standard-body-text;\n\tmargin-bottom: spacing.$spacing-2;\n\tcolor: colours.$ontario-colour-link;\n\tcursor: pointer;\n\n\t&:focus,\n\t&:hover {\n\t\tcolor: colours.$ontario-colour-link--hover;\n\t\ttext-decoration: underline;\n\t}\n\n\t&:focus {\n\t\t@extend %ontario-focus;\n\t}\n\n\t&:active {\n\t\tcolor: colours.$ontario-colour-link--active;\n\t\ttext-decoration: underline;\n\t}\n}\n\n.ontario-accordion--expand-close-all {\n\tdisplay: none;\n}\n\n.ontario-accordion__controls--active {\n\t.ontario-accordion--expand-close-all {\n\t\tdisplay: block;\n\t}\n\n\t.ontario-accordion--expand-open-all {\n\t\tdisplay: none;\n\t}\n}\n\n.ontario-accordion__button {\n\tdisplay: flex;\n\talign-items: flex-start;\n\tcolor: colours.$ontario-colour-link;\n\tcursor: pointer;\n\tpadding: spacing.$spacing-3 spacing.$spacing-2;\n\ttext-align: left;\n\twidth: globalVariables.$full-width;\n\t@extend %h4-styles;\n\tmargin-bottom: spacing.$spacing-0;\n\n\t.ontario-accordion__button-icon--close,\n\t.ontario-accordion__button-icon--open {\n\t\tmargin-right: spacing.$spacing-2;\n\t}\n\n\t.ontario-icon {\n\t\twidth: 1.75rem;\n\t\theight: 1.75rem;\n\t}\n\n\t&:focus,\n\t&:hover {\n\t\tbackground-color: colours.$ontario-greyscale-5;\n\t\tcolor: colours.$ontario-colour-link--hover;\n\t}\n\n\t&:focus {\n\t\t@extend %ontario-focus;\n\t\tbox-shadow: 0 0 0 4px colours.$ontario-colour-focus inset;\n\t}\n\n\t&:active {\n\t\tcolor: colours.$ontario-colour-link--active;\n\t}\n}\n\n.ontario-accordion__content {\n\tdisplay: none;\n\tpadding: spacing.$spacing-3 spacing.$spacing-3 spacing.$spacing-6 spacing.$spacing-3;\n\tmargin-left: spacing.$spacing-0;\n\n\t@media screen and (min-width: breakpoints.$small-breakpoint) {\n\t\tmargin-left: spacing.$spacing-6;\n\t}\n\n\t* {\n\t\tmargin-top: spacing.$spacing-0;\n\t\tmax-width: globalVariables.$standard-width;\n\t\twidth: globalVariables.$full-width;\n\t}\n\n\tul,\n\tol {\n\t\tmax-width: calc(100% - spacing.$spacing-8);\n\t}\n\n\t& > :last-child {\n\t\tmargin-bottom: spacing.$spacing-0;\n\t}\n}\n\n.ontario-accordion__button-icon--close,\n.ontario-expander--active .ontario-accordion__button-icon--open {\n\tdisplay: none;\n}\n\n.ontario-expander--active ~ .ontario-accordion__content,\n.ontario-expander--active .ontario-accordion__button-icon--close {\n\tdisplay: block;\n}\n\n.ontario-accordions__container {\n\t.ontario-h1,\n\t.ontario-h2,\n\t.ontario-h3,\n\t.ontario-h4,\n\t.ontario-h5,\n\tp,\n\th1,\n\th2,\n\th3,\n\th4,\n\th5,\n\th6 {\n\t\tmargin: spacing.$spacing-0;\n\t}\n}\n","import { Component, Prop, Element, Event, EventEmitter, State, h, Listen, Watch } from '@stencil/core';\nimport { v4 as uuid } from 'uuid';\n\nimport { Accordion, AccordionChangeDetail, AccordionChangeDetailReasons } from './accordion.interface';\nimport { ExpandCollapseButtonDetails } from './expandCollapseButtonDetails.interface';\n\nimport { Language } from '../../utils/common/language-types';\nimport { validateLanguage } from '../../utils/validation/validation-functions';\nimport { ConsoleMessageClass } from '../../utils/console-message/console-message';\nimport { HeaderLanguageToggleEventDetails } from '../../utils/events/common-events.interface';\n\nimport translations from '../../translations/global.i18n.json';\n\n@Component({\n\ttag: 'ontario-accordion',\n\tstyleUrl: 'ontario-accordion.scss',\n\tshadow: true,\n})\nexport class OntarioAccordion {\n\t@Element() host: HTMLElement;\n\n\t/**\n\t * The name of the accordion component.\n\t *\n\t * This is not optional.\n\t */\n\t@Prop() name: string;\n\n\t/**\n\t * Custom Expand/Collapse button text.\n\t *\n\t * @example\n\t *  <ontario-accordion\n\t *\t\tname=\"My Accordion\"\n\t *\t\texpand-collapse-button='{\n\t *\t\t\t\"expandAllSectionsLabel\": \"Expand All\",\n\t *\t\t\t\"collapseAllSectionsLabel\": \"Collapse All\"\n\t *\t\t}'\n\t *\t\taccordion-data='[\n\t *\t\t\t{\"label\": \"Accordion 1\", \"content\": [\"Item 1\", \"Item 2\", \"Item 3\"]},\n\t *\t\t\t{\"label\": \"Accordion 2\", \"content\": [\"Item A\", \"Item B\", \"Item C\"]}\n\t *\t\t]'\n\t *\t></ontario-accordion>\n\t */\n\t@Prop() expandCollapseButton?: string | ExpandCollapseButtonDetails;\n\n\t/**\n\t * Used to include individual accordion data for the accordion component.\n\t * Accepts an array of Accordion (@see Accordion) items or a JSON string of that array.\n\t *\n\t * The `content` is rendered either as plain text or HTML depending on `accordionContentType`.\n\t *\n\t * @see Accordion\n\t * @example\n\t * \t<ontario-accordion\n\t *\t\tname=\"My Accordion\"\n\t *\t\taccordion-data='[\n\t *\t\t\t{\"label\": \"Accordion 1\", \"content\": \"This is a string\", \"isOpen\": true},\n\t *\t\t\t{\"label\": \"Accordion 2\", \"accordionContentType\": \"html\", \"content\": \"<ul><li>List A</li><li>List B</li><li>List C</li></ul>\"}\n\t *\t\t]'\n\t *\t></ontario-accordion>\n\t */\n\t@Prop() accordionData: string | Accordion[];\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 * Emits when open indexes change\n\t */\n\t@Event() accordionChange: EventEmitter<AccordionChangeDetail>;\n\n\t/**\n\t * Store the translation dictionary for use within the component.\n\t */\n\t@State() translations: any = translations;\n\n\t/**\n\t * The label for the expand/collapse button.\n\t * This is internal and udpdated dynamically.\n\t */\n\t@State() private expandCollapseLabel: 'expand' | 'collapse';\n\n\t/**\n\t * Internal state of the expand/collapse label information.\n\t */\n\t@State() private internalExpandCollapseLabelDetails: ExpandCollapseButtonDetails;\n\n\t/**\n\t * Internal state containing the parsed Accordion Data\n\t */\n\t@State() private internalAccordionData: Accordion[] = [];\n\n\t/**\n\t * This state tracks which accordions are open.\n\t */\n\t@State() private openAccordionIndexes: number[] = [];\n\n\t/** Unique prefix for a11y ids */\n\t@State() private uidPrefix: string = `ontario-accordion-${uuid()}`;\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/**\n\t * Handles an update to the language should the user request a language update from the language toggle.\n\t * @param {CustomEvent} - The language that has been selected.\n\t */\n\t@Listen('headerLanguageToggled', { target: 'window' })\n\thandleHeaderLanguageToggled(event: CustomEvent<HeaderLanguageToggleEventDetails>) {\n\t\tthis.language = validateLanguage(event.detail.newLanguage);\n\t}\n\n\t/**\n\t * Parse Accordion data, this is used to handle JSON strings from HTML.\n\t */\n\t@Watch('accordionData')\n\tprivate parseAccordionData() {\n\t\ttry {\n\t\t\tconst parsed = Array.isArray(this.accordionData) ? this.accordionData : JSON.parse(this.accordionData || '[]');\n\n\t\t\t// Normalize and type-guard\n\t\t\tthis.internalAccordionData = parsed.length\n\t\t\t\t? parsed.map((prop: Accordion) => ({\n\t\t\t\t\t\tlabel: prop?.label ?? '',\n\t\t\t\t\t\tcontent: prop?.content ?? '',\n\t\t\t\t\t\taccordionContentType: (prop?.accordionContentType ?? 'string') as 'string' | 'html',\n\t\t\t\t\t\tisOpen: Boolean(prop?.isOpen),\n\t\t\t\t\t\tariaLabelText: prop?.ariaLabelText,\n\t\t\t\t\t}))\n\t\t\t\t: [];\n\n\t\t\t// Seed the openAccordionIndexes based on the isOpen properties\n\t\t\tthis.seedOpenIndexesFromItems();\n\n\t\t\t// Initialize the label based on the initial accordion state\n\t\t\tthis.updateLabel();\n\n\t\t\tthis.emitAccordionChange({\n\t\t\t\topenIndexes: this.openAccordionIndexes,\n\t\t\t\treason: AccordionChangeDetailReasons.Init,\n\t\t\t});\n\t\t} catch {\n\t\t\tconst message = new ConsoleMessageClass();\n\t\t\tmessage\n\t\t\t\t.addDesignSystemTag()\n\t\t\t\t.addMonospaceText(' accordionData ')\n\t\t\t\t.addRegularText('for')\n\t\t\t\t.addMonospaceText(' <ontario-accordion> ')\n\t\t\t\t.addRegularText('could not be parsed. Please ensure it is valid JSON.')\n\t\t\t\t.printMessage();\n\n\t\t\tthis.internalAccordionData = [];\n\t\t\tthis.openAccordionIndexes = [];\n\t\t\tthis.updateLabel();\n\n\t\t\tthis.emitAccordionChange({\n\t\t\t\topenIndexes: this.openAccordionIndexes,\n\t\t\t\treason: AccordionChangeDetailReasons.Init,\n\t\t\t});\n\t\t}\n\t}\n\n\t/**\n\t * Parse Expand/Collapse Button Details. This handles both object and JSON string formats\n\t * passed from HTML, with safe error handling for invalid JSON.\n\t */\n\t@Watch('expandCollapseButton')\n\tprivate parseExpandCollapseButtonDetails() {\n\t\tif (typeof this.expandCollapseButton !== 'undefined') {\n\t\t\tif (typeof this.expandCollapseButton === 'string') {\n\t\t\t\ttry {\n\t\t\t\t\tthis.internalExpandCollapseLabelDetails = JSON.parse(this.expandCollapseButton);\n\t\t\t\t} catch {\n\t\t\t\t\tconst message = new ConsoleMessageClass();\n\t\t\t\t\tmessage\n\t\t\t\t\t\t.addDesignSystemTag()\n\t\t\t\t\t\t.addMonospaceText(' expandCollapseButton ')\n\t\t\t\t\t\t.addRegularText('for')\n\t\t\t\t\t\t.addMonospaceText(' <ontario-accordion> ')\n\t\t\t\t\t\t.addRegularText('could not be parsed from a string. Please ensure it is valid JSON.')\n\t\t\t\t\t\t.printMessage();\n\t\t\t\t}\n\t\t\t} else {\n\t\t\t\tthis.internalExpandCollapseLabelDetails = this.expandCollapseButton;\n\t\t\t}\n\t\t}\n\t}\n\n\t/**\n\t * Emits a typed change event whenever the open/closed state changes.\n\t *\n\t * Consumers can listen for `accordionChange` to:\n\t *  - Read the full set of `openIndexes`\n\t *  - Know which index changed on single-item toggles (`changedIndex`)\n\t *  - Detect bulk actions like expand/collapse all (`isBulk`)\n\t *  - Understand why the change happened (`reason`)\n\t *\n\t * Always call this AFTER updating `openAccordionIndexes` and `expandCollapseLabel`.\n\t */\n\tprivate emitAccordionChange(detail: AccordionChangeDetail) {\n\t\tthis.accordionChange.emit(detail);\n\t}\n\n\t// Seed the openAccordionIndexes based on the isOpen properties of the accordion items\n\tprivate seedOpenIndexesFromItems() {\n\t\tthis.openAccordionIndexes = this.internalAccordionData\n\t\t\t.map((accordionItem, index) => (accordionItem?.isOpen ? index : -1))\n\t\t\t.filter((accordionIndex) => accordionIndex !== -1);\n\t}\n\n\t// Toggle the accordion state when it's clicked\n\tprivate toggleAccordion(index: number) {\n\t\tif (this.openAccordionIndexes.includes(index)) {\n\t\t\tthis.openAccordionIndexes = this.openAccordionIndexes.filter((i) => i !== index);\n\t\t} else {\n\t\t\tthis.openAccordionIndexes = [...this.openAccordionIndexes, index];\n\t\t}\n\n\t\tthis.updateLabel();\n\n\t\tthis.emitAccordionChange({\n\t\t\topenIndexes: this.openAccordionIndexes,\n\t\t\tchangedIndex: index,\n\t\t\treason: AccordionChangeDetailReasons.ToggleOne,\n\t\t});\n\t}\n\n\t/**\n\t * Toggle all accordions open/close\n\t */\n\tprivate toggleAll() {\n\t\tif (this.openAccordionIndexes.length === this.internalAccordionData.length) {\n\t\t\t// All accordions are open, close all\n\t\t\tthis.openAccordionIndexes = [];\n\t\t} else {\n\t\t\t// At least one accordion is closed, open all\n\t\t\tthis.openAccordionIndexes = this.internalAccordionData.map((_, index) => index);\n\t\t}\n\n\t\tthis.updateLabel();\n\n\t\tthis.emitAccordionChange({\n\t\t\topenIndexes: this.openAccordionIndexes,\n\t\t\tisBulk: true,\n\t\t\treason: AccordionChangeDetailReasons.ToggleAll,\n\t\t});\n\t}\n\n\t/**\n\t * Update the label based on the current accordion state\n\t */\n\tprivate updateLabel() {\n\t\tconst allOpen = this.internalAccordionData.every((_, index) => this.openAccordionIndexes.includes(index));\n\n\t\tif (allOpen) {\n\t\t\t// All accordions are open, set label to \"Collapse all\"\n\t\t\tthis.expandCollapseLabel = 'collapse';\n\t\t} else {\n\t\t\t// At least one accordion is closed, set label to \"Expand all\"\n\t\t\tthis.expandCollapseLabel = 'expand';\n\t\t}\n\t}\n\n\tcomponentWillLoad() {\n\t\tthis.parseAccordionData();\n\t\tthis.parseExpandCollapseButtonDetails();\n\t\tthis.language = validateLanguage(this.language);\n\t}\n\n\trender() {\n\t\treturn (\n\t\t\t<div>\n\t\t\t\t<h2>{this.name}</h2>\n\t\t\t\t<div class=\"ontario-accordions__container\">\n\t\t\t\t\t<div class=\"ontario-accordion__controls\">\n\t\t\t\t\t\t<button\n\t\t\t\t\t\t\tclass=\"ontario-accordion__button--expand-all\"\n\t\t\t\t\t\t\tonClick={() => this.toggleAll()}\n\t\t\t\t\t\t\taria-expanded={this.openAccordionIndexes.length === this.internalAccordionData.length ? 'true' : 'false'}\n\t\t\t\t\t\t\taria-label={this.internalExpandCollapseLabelDetails?.ariaLabelText}\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t<span class=\"ontario-accordion--expand-open-all\">\n\t\t\t\t\t\t\t\t{this.expandCollapseLabel === 'expand' ? (\n\t\t\t\t\t\t\t\t\t<div>\n\t\t\t\t\t\t\t\t\t\t{this.internalExpandCollapseLabelDetails?.expandAllSectionsLabel ??\n\t\t\t\t\t\t\t\t\t\t\tthis.translations.accordion.expand[`${this.language}`]}\n\t\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t\t) : (\n\t\t\t\t\t\t\t\t\t<div>\n\t\t\t\t\t\t\t\t\t\t{this.internalExpandCollapseLabelDetails?.collapseAllSectionsLabel ??\n\t\t\t\t\t\t\t\t\t\t\tthis.translations.accordion.collapse[`${this.language}`]}\n\t\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t\t</span>\n\t\t\t\t\t\t</button>\n\t\t\t\t\t</div>\n\t\t\t\t\t{this.internalAccordionData?.map((accordion, index) => {\n\t\t\t\t\t\tconst buttonId = `${this.uidPrefix}__button--${index}`;\n\t\t\t\t\t\tconst sectionId = `${this.uidPrefix}__section--${index}`;\n\t\t\t\t\t\tconst isOpen = this.openAccordionIndexes.includes(index);\n\n\t\t\t\t\t\treturn (\n\t\t\t\t\t\t\t<div class={`ontario-accordion ${isOpen ? 'open' : ''}`} key={`accordion-${index}`}>\n\t\t\t\t\t\t\t\t<h3 class={`ontario-accordion__heading ${isOpen ? 'ontario-expander--active' : ''}`}>\n\t\t\t\t\t\t\t\t\t<button\n\t\t\t\t\t\t\t\t\t\tid={buttonId}\n\t\t\t\t\t\t\t\t\t\tclass=\"ontario-accordion__button\"\n\t\t\t\t\t\t\t\t\t\taria-expanded={isOpen ? 'true' : 'false'}\n\t\t\t\t\t\t\t\t\t\tdata-toggle=\"ontario-collapse\"\n\t\t\t\t\t\t\t\t\t\taria-controls={sectionId}\n\t\t\t\t\t\t\t\t\t\tonClick={() => this.toggleAccordion(index)}\n\t\t\t\t\t\t\t\t\t\taria-label={accordion.ariaLabelText}\n\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t<span class=\"ontario-accordion__button-icon--close\">\n\t\t\t\t\t\t\t\t\t\t\t<ontario-icon-chevron-up colour=\"blue\" aria-hidden=\"true\"></ontario-icon-chevron-up>\n\t\t\t\t\t\t\t\t\t\t</span>\n\t\t\t\t\t\t\t\t\t\t<span class=\"ontario-accordion__button-icon--open\">\n\t\t\t\t\t\t\t\t\t\t\t<ontario-icon-chevron-down colour=\"blue\" aria-hidden=\"true\"></ontario-icon-chevron-down>\n\t\t\t\t\t\t\t\t\t\t</span>\n\t\t\t\t\t\t\t\t\t\t{accordion.label}\n\t\t\t\t\t\t\t\t\t</button>\n\t\t\t\t\t\t\t\t</h3>\n\t\t\t\t\t\t\t\t<section\n\t\t\t\t\t\t\t\t\tid={sectionId}\n\t\t\t\t\t\t\t\t\tclass={`ontario-accordion__content ${\n\t\t\t\t\t\t\t\t\t\tisOpen ? 'ontario-expander__content--opened' : 'ontario-accordion__content--closed'\n\t\t\t\t\t\t\t\t\t}`}\n\t\t\t\t\t\t\t\t\taria-labelledby={buttonId}\n\t\t\t\t\t\t\t\t\trole=\"region\"\n\t\t\t\t\t\t\t\t\taria-hidden={isOpen ? 'false' : 'true'}\n\t\t\t\t\t\t\t\t\tdata-toggle=\"ontario-expander-content\"\n\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t{accordion.accordionContentType === 'html' ? (\n\t\t\t\t\t\t\t\t\t\t<div innerHTML={accordion.content}></div> // Render HTML content\n\t\t\t\t\t\t\t\t\t) : (\n\t\t\t\t\t\t\t\t\t\t<div>{accordion.content}</div>\n\t\t\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t\t\t</section>\n\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t);\n\t\t\t\t\t})}\n\t\t\t\t</div>\n\t\t\t</div>\n\t\t);\n\t}\n}\n"],"version":3}
+{"file":"ontario-accordion.js","mappings":"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","names":["OntarioAccordion","__stencil_proxyCustomElement","HTMLElement","uuid"],"sources":["src/components/ontario-accordion/accordion.interface.ts","src/components/ontario-accordion/ontario-accordion.scss?tag=ontario-accordion&encapsulation=shadow","src/components/ontario-accordion/ontario-accordion.tsx"],"sourcesContent":["import { Base } from '../../utils/common/common.interface';\n\nexport interface Accordion extends Base {\n\t/**\n\t * The label for the individual accordion button.\n\t */\n\tlabel: string;\n\n\t/**\n\t * The content type of the accordion.\n\t * If no prop is passed, it will default to a string.\n\t * If the accordion requires multiple lines or HTML, the `accordionContentType` prop should be set to `html`.\n\t */\n\n\taccordionContentType: 'string' | 'html';\n\n\t/**\n\t * The content that is passed into each accordion.\n\t */\n\tcontent: string;\n\n\t/**\n\t * A boolean to track whether the accordion is expanded or collapsed.\n\t */\n\tisOpen: boolean;\n\n\t/**\n\t * Custom Aria Label text for the section.\n\t */\n\tariaLabelText: string;\n}\n\nexport enum AccordionChangeDetailReasons {\n\tInit = 'init',\n\tToggleOne = 'toggle-one',\n\tToggleAll = 'toggle-all',\n}\n\n/**\n * The event detail payload emitted by the accordion component.\n */\nexport interface AccordionChangeDetail {\n\t/** Array of indexes currently open */\n\topenIndexes: number[];\n\n\t/** The index that was just toggled (if applicable) */\n\tchangedIndex?: number;\n\n\t/** True if triggered by expand/collapse all */\n\tisBulk?: boolean;\n\n\t/** Optional description of what triggered the event */\n\treason?: AccordionChangeDetailReasons;\n}\n","@use 'pkg:@ongov/ontario-design-system-global-styles/styles/scss/1-variables/global.variables' as globalVariables;\n@use 'pkg:@ongov/ontario-design-system-global-styles/styles/scss/1-variables/spacing.variables' as spacing;\n@use 'pkg:@ongov/ontario-design-system-global-styles/styles/scss/1-variables/colours.variables' as colours;\n@use 'pkg:@ongov/ontario-design-system-global-styles/styles/scss/1-variables/breakpoints.variables' as breakpoints;\n@use 'pkg:@ongov/ontario-design-system-global-styles/styles/scss/2-tools/placeholder/focus.placeholders' as placeholders;\n@use 'pkg:@ongov/ontario-design-system-global-styles/styles/scss/1-variables/typography.variables' as typography;\n@use 'pkg:@ongov/ontario-design-system-global-styles/styles/scss/1-variables/font-sizes.variables' as fontSizes;\n\n.ontario-accordions__container {\n\tmax-width: globalVariables.$standard-width;\n\twidth: globalVariables.$full-width;\n}\n\n.ontario-accordion {\n\tborder-top: 2px solid colours.$ontario-greyscale-20;\n\n\t&:last-of-type {\n\t\tborder-bottom: 2px solid colours.$ontario-greyscale-20;\n\t}\n}\n\n.ontario-accordion__controls {\n\tdisplay: flex;\n\tjustify-content: flex-end;\n}\n\n.ontario-accordion__button,\n.ontario-accordion__button--expand-all {\n\tbackground: none;\n\tborder: 0;\n\tbox-sizing: border-box;\n}\n\n.ontario-accordion__button--expand-all {\n\tfont-size: fontSizes.$ontario-font-size-standard-body-text;\n\tmargin-bottom: spacing.$spacing-2;\n\tcolor: colours.$ontario-colour-link;\n\tcursor: pointer;\n\n\t&:focus,\n\t&:hover {\n\t\tcolor: colours.$ontario-colour-link--hover;\n\t\ttext-decoration: underline;\n\t}\n\n\t&:focus {\n\t\t@extend %ontario-focus;\n\t}\n\n\t&:active {\n\t\tcolor: colours.$ontario-colour-link--active;\n\t\ttext-decoration: underline;\n\t}\n}\n\n.ontario-accordion--expand-close-all {\n\tdisplay: none;\n}\n\n.ontario-accordion__controls--active {\n\t.ontario-accordion--expand-close-all {\n\t\tdisplay: block;\n\t}\n\n\t.ontario-accordion--expand-open-all {\n\t\tdisplay: none;\n\t}\n}\n\n.ontario-accordion__button {\n\tdisplay: flex;\n\talign-items: flex-start;\n\tcolor: colours.$ontario-colour-link;\n\tcursor: pointer;\n\tpadding: spacing.$spacing-3 spacing.$spacing-2;\n\ttext-align: left;\n\twidth: globalVariables.$full-width;\n\t@extend %h4-styles;\n\tmargin-bottom: spacing.$spacing-0;\n\n\t.ontario-accordion__button-icon--close,\n\t.ontario-accordion__button-icon--open {\n\t\tmargin-right: spacing.$spacing-2;\n\t}\n\n\t.ontario-icon {\n\t\twidth: 1.75rem;\n\t\theight: 1.75rem;\n\t}\n\n\t&:focus,\n\t&:hover {\n\t\tbackground-color: colours.$ontario-greyscale-5;\n\t\tcolor: colours.$ontario-colour-link--hover;\n\t}\n\n\t&:focus {\n\t\t@extend %ontario-focus;\n\t\tbox-shadow: 0 0 0 4px colours.$ontario-colour-focus inset;\n\t}\n\n\t&:active {\n\t\tcolor: colours.$ontario-colour-link--active;\n\t}\n}\n\n.ontario-accordion__content {\n\tdisplay: none;\n\tpadding: spacing.$spacing-3 spacing.$spacing-3 spacing.$spacing-6 spacing.$spacing-3;\n\tmargin-left: spacing.$spacing-0;\n\n\t@media screen and (min-width: breakpoints.$small-breakpoint) {\n\t\tmargin-left: spacing.$spacing-6;\n\t}\n\n\t* {\n\t\tmargin-top: spacing.$spacing-0;\n\t\tmax-width: globalVariables.$standard-width;\n\t\twidth: globalVariables.$full-width;\n\t}\n\n\tul,\n\tol {\n\t\tmax-width: calc(100% - spacing.$spacing-8);\n\t}\n\n\t& > :last-child {\n\t\tmargin-bottom: spacing.$spacing-0;\n\t}\n}\n\n.ontario-accordion__button-icon--close,\n.ontario-expander--active .ontario-accordion__button-icon--open {\n\tdisplay: none;\n}\n\n.ontario-expander--active ~ .ontario-accordion__content,\n.ontario-expander--active .ontario-accordion__button-icon--close {\n\tdisplay: block;\n}\n\n.ontario-accordions__container {\n\t.ontario-h1,\n\t.ontario-h2,\n\t.ontario-h3,\n\t.ontario-h4,\n\t.ontario-h5,\n\tp,\n\th1,\n\th2,\n\th3,\n\th4,\n\th5,\n\th6 {\n\t\tmargin: spacing.$spacing-0;\n\t}\n}\n","import { Component, Prop, Element, Event, EventEmitter, State, h, Listen, Watch } from '@stencil/core';\nimport { v4 as uuid } from 'uuid';\n\nimport { Accordion, AccordionChangeDetail, AccordionChangeDetailReasons } from './accordion.interface';\nimport { ExpandCollapseButtonDetails } from './expandCollapseButtonDetails.interface';\n\nimport { Language } from '../../utils/common/language-types';\nimport { validateLanguage } from '../../utils/validation/validation-functions';\nimport { ConsoleMessageClass } from '../../utils/console-message/console-message';\nimport { HeaderLanguageToggleEventDetails } from '../../utils/events/common-events.interface';\n\nimport translations from '../../translations/global.i18n.json';\n\n/**\n * Ontario Accordion presents collapsible sections of content.\n *\n * For component guidance, see:\n * - https://designsystem.ontario.ca/components/detail/accordions.html\n * - https://designsystem.ontario.ca/developer-docs/components/ontario-accordion/\n */\n@Component({\n\ttag: 'ontario-accordion',\n\tstyleUrl: 'ontario-accordion.scss',\n\tshadow: true,\n})\nexport class OntarioAccordion {\n\t@Element() host: HTMLElement;\n\n\t/**\n\t * The name of the accordion component.\n\t *\n\t * This is not optional.\n\t */\n\t@Prop() name: string;\n\n\t/**\n\t * Custom Expand/Collapse button text.\n\t *\n\t * @example\n\t *  <ontario-accordion\n\t *\t\tname=\"My Accordion\"\n\t *\t\texpand-collapse-button='{\n\t *\t\t\t\"expandAllSectionsLabel\": \"Expand All\",\n\t *\t\t\t\"collapseAllSectionsLabel\": \"Collapse All\"\n\t *\t\t}'\n\t *\t\taccordion-data='[\n\t *\t\t\t{\"label\": \"Accordion 1\", \"content\": [\"Item 1\", \"Item 2\", \"Item 3\"]},\n\t *\t\t\t{\"label\": \"Accordion 2\", \"content\": [\"Item A\", \"Item B\", \"Item C\"]}\n\t *\t\t]'\n\t *\t></ontario-accordion>\n\t */\n\t@Prop() expandCollapseButton?: string | ExpandCollapseButtonDetails;\n\n\t/**\n\t * Used to include individual accordion data for the accordion component.\n\t * Accepts an array of Accordion (@see Accordion) items or a JSON string of that array.\n\t *\n\t * The `content` is rendered either as plain text or HTML depending on `accordionContentType`.\n\t *\n\t * @see Accordion\n\t * @example\n\t * \t<ontario-accordion\n\t *\t\tname=\"My Accordion\"\n\t *\t\taccordion-data='[\n\t *\t\t\t{\"label\": \"Accordion 1\", \"content\": \"This is a string\", \"isOpen\": true},\n\t *\t\t\t{\"label\": \"Accordion 2\", \"accordionContentType\": \"html\", \"content\": \"<ul><li>List A</li><li>List B</li><li>List C</li></ul>\"}\n\t *\t\t]'\n\t *\t></ontario-accordion>\n\t */\n\t@Prop() accordionData: string | Accordion[];\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 * Emits when open indexes change\n\t */\n\t@Event() accordionChange: EventEmitter<AccordionChangeDetail>;\n\n\t/**\n\t * Store the translation dictionary for use within the component.\n\t */\n\t@State() translations: any = translations;\n\n\t/**\n\t * The label for the expand/collapse button.\n\t * This is internal and udpdated dynamically.\n\t */\n\t@State() private expandCollapseLabel: 'expand' | 'collapse';\n\n\t/**\n\t * Internal state of the expand/collapse label information.\n\t */\n\t@State() private internalExpandCollapseLabelDetails: ExpandCollapseButtonDetails;\n\n\t/**\n\t * Internal state containing the parsed Accordion Data\n\t */\n\t@State() private internalAccordionData: Accordion[] = [];\n\n\t/**\n\t * This state tracks which accordions are open.\n\t */\n\t@State() private openAccordionIndexes: number[] = [];\n\n\t/** Unique prefix for a11y ids */\n\t@State() private uidPrefix: string = `ontario-accordion-${uuid()}`;\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/**\n\t * Handles an update to the language should the user request a language update from the language toggle.\n\t * @param {CustomEvent} - The language that has been selected.\n\t */\n\t@Listen('headerLanguageToggled', { target: 'window' })\n\thandleHeaderLanguageToggled(event: CustomEvent<HeaderLanguageToggleEventDetails>) {\n\t\tthis.language = validateLanguage(event.detail.newLanguage);\n\t}\n\n\t/**\n\t * Parse Accordion data, this is used to handle JSON strings from HTML.\n\t */\n\t@Watch('accordionData')\n\tprivate parseAccordionData() {\n\t\ttry {\n\t\t\tconst parsed = Array.isArray(this.accordionData) ? this.accordionData : JSON.parse(this.accordionData || '[]');\n\n\t\t\t// Normalize and type-guard\n\t\t\tthis.internalAccordionData = parsed.length\n\t\t\t\t? parsed.map((prop: Accordion) => ({\n\t\t\t\t\t\tlabel: prop?.label ?? '',\n\t\t\t\t\t\tcontent: prop?.content ?? '',\n\t\t\t\t\t\taccordionContentType: (prop?.accordionContentType ?? 'string') as 'string' | 'html',\n\t\t\t\t\t\tisOpen: Boolean(prop?.isOpen),\n\t\t\t\t\t\tariaLabelText: prop?.ariaLabelText,\n\t\t\t\t\t}))\n\t\t\t\t: [];\n\n\t\t\t// Seed the openAccordionIndexes based on the isOpen properties\n\t\t\tthis.seedOpenIndexesFromItems();\n\n\t\t\t// Initialize the label based on the initial accordion state\n\t\t\tthis.updateLabel();\n\n\t\t\tthis.emitAccordionChange({\n\t\t\t\topenIndexes: this.openAccordionIndexes,\n\t\t\t\treason: AccordionChangeDetailReasons.Init,\n\t\t\t});\n\t\t} catch {\n\t\t\tconst message = new ConsoleMessageClass();\n\t\t\tmessage\n\t\t\t\t.addDesignSystemTag()\n\t\t\t\t.addMonospaceText(' accordionData ')\n\t\t\t\t.addRegularText('for')\n\t\t\t\t.addMonospaceText(' <ontario-accordion> ')\n\t\t\t\t.addRegularText('could not be parsed. Please ensure it is valid JSON.')\n\t\t\t\t.printMessage();\n\n\t\t\tthis.internalAccordionData = [];\n\t\t\tthis.openAccordionIndexes = [];\n\t\t\tthis.updateLabel();\n\n\t\t\tthis.emitAccordionChange({\n\t\t\t\topenIndexes: this.openAccordionIndexes,\n\t\t\t\treason: AccordionChangeDetailReasons.Init,\n\t\t\t});\n\t\t}\n\t}\n\n\t/**\n\t * Parse Expand/Collapse Button Details. This handles both object and JSON string formats\n\t * passed from HTML, with safe error handling for invalid JSON.\n\t */\n\t@Watch('expandCollapseButton')\n\tprivate parseExpandCollapseButtonDetails() {\n\t\tif (typeof this.expandCollapseButton !== 'undefined') {\n\t\t\tif (typeof this.expandCollapseButton === 'string') {\n\t\t\t\ttry {\n\t\t\t\t\tthis.internalExpandCollapseLabelDetails = JSON.parse(this.expandCollapseButton);\n\t\t\t\t} catch {\n\t\t\t\t\tconst message = new ConsoleMessageClass();\n\t\t\t\t\tmessage\n\t\t\t\t\t\t.addDesignSystemTag()\n\t\t\t\t\t\t.addMonospaceText(' expandCollapseButton ')\n\t\t\t\t\t\t.addRegularText('for')\n\t\t\t\t\t\t.addMonospaceText(' <ontario-accordion> ')\n\t\t\t\t\t\t.addRegularText('could not be parsed from a string. Please ensure it is valid JSON.')\n\t\t\t\t\t\t.printMessage();\n\t\t\t\t}\n\t\t\t} else {\n\t\t\t\tthis.internalExpandCollapseLabelDetails = this.expandCollapseButton;\n\t\t\t}\n\t\t}\n\t}\n\n\t/**\n\t * Emits a typed change event whenever the open/closed state changes.\n\t *\n\t * Consumers can listen for `accordionChange` to:\n\t *  - Read the full set of `openIndexes`\n\t *  - Know which index changed on single-item toggles (`changedIndex`)\n\t *  - Detect bulk actions like expand/collapse all (`isBulk`)\n\t *  - Understand why the change happened (`reason`)\n\t *\n\t * Always call this AFTER updating `openAccordionIndexes` and `expandCollapseLabel`.\n\t */\n\tprivate emitAccordionChange(detail: AccordionChangeDetail) {\n\t\tthis.accordionChange.emit(detail);\n\t}\n\n\t// Seed the openAccordionIndexes based on the isOpen properties of the accordion items\n\tprivate seedOpenIndexesFromItems() {\n\t\tthis.openAccordionIndexes = this.internalAccordionData\n\t\t\t.map((accordionItem, index) => (accordionItem?.isOpen ? index : -1))\n\t\t\t.filter((accordionIndex) => accordionIndex !== -1);\n\t}\n\n\t// Toggle the accordion state when it's clicked\n\tprivate toggleAccordion(index: number) {\n\t\tif (this.openAccordionIndexes.includes(index)) {\n\t\t\tthis.openAccordionIndexes = this.openAccordionIndexes.filter((i) => i !== index);\n\t\t} else {\n\t\t\tthis.openAccordionIndexes = [...this.openAccordionIndexes, index];\n\t\t}\n\n\t\tthis.updateLabel();\n\n\t\tthis.emitAccordionChange({\n\t\t\topenIndexes: this.openAccordionIndexes,\n\t\t\tchangedIndex: index,\n\t\t\treason: AccordionChangeDetailReasons.ToggleOne,\n\t\t});\n\t}\n\n\t/**\n\t * Toggle all accordions open/close\n\t */\n\tprivate toggleAll() {\n\t\tif (this.openAccordionIndexes.length === this.internalAccordionData.length) {\n\t\t\t// All accordions are open, close all\n\t\t\tthis.openAccordionIndexes = [];\n\t\t} else {\n\t\t\t// At least one accordion is closed, open all\n\t\t\tthis.openAccordionIndexes = this.internalAccordionData.map((_, index) => index);\n\t\t}\n\n\t\tthis.updateLabel();\n\n\t\tthis.emitAccordionChange({\n\t\t\topenIndexes: this.openAccordionIndexes,\n\t\t\tisBulk: true,\n\t\t\treason: AccordionChangeDetailReasons.ToggleAll,\n\t\t});\n\t}\n\n\t/**\n\t * Update the label based on the current accordion state\n\t */\n\tprivate updateLabel() {\n\t\tconst allOpen = this.internalAccordionData.every((_, index) => this.openAccordionIndexes.includes(index));\n\n\t\tif (allOpen) {\n\t\t\t// All accordions are open, set label to \"Collapse all\"\n\t\t\tthis.expandCollapseLabel = 'collapse';\n\t\t} else {\n\t\t\t// At least one accordion is closed, set label to \"Expand all\"\n\t\t\tthis.expandCollapseLabel = 'expand';\n\t\t}\n\t}\n\n\tcomponentWillLoad() {\n\t\tthis.parseAccordionData();\n\t\tthis.parseExpandCollapseButtonDetails();\n\t\tthis.language = validateLanguage(this.language);\n\t}\n\n\trender() {\n\t\treturn (\n\t\t\t<div>\n\t\t\t\t<h2>{this.name}</h2>\n\t\t\t\t<div class=\"ontario-accordions__container\">\n\t\t\t\t\t<div class=\"ontario-accordion__controls\">\n\t\t\t\t\t\t<button\n\t\t\t\t\t\t\tclass=\"ontario-accordion__button--expand-all\"\n\t\t\t\t\t\t\tonClick={() => this.toggleAll()}\n\t\t\t\t\t\t\taria-expanded={this.openAccordionIndexes.length === this.internalAccordionData.length ? 'true' : 'false'}\n\t\t\t\t\t\t\taria-label={this.internalExpandCollapseLabelDetails?.ariaLabelText}\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t<span class=\"ontario-accordion--expand-open-all\">\n\t\t\t\t\t\t\t\t{this.expandCollapseLabel === 'expand' ? (\n\t\t\t\t\t\t\t\t\t<div>\n\t\t\t\t\t\t\t\t\t\t{this.internalExpandCollapseLabelDetails?.expandAllSectionsLabel ??\n\t\t\t\t\t\t\t\t\t\t\tthis.translations.accordion.expand[`${this.language}`]}\n\t\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t\t) : (\n\t\t\t\t\t\t\t\t\t<div>\n\t\t\t\t\t\t\t\t\t\t{this.internalExpandCollapseLabelDetails?.collapseAllSectionsLabel ??\n\t\t\t\t\t\t\t\t\t\t\tthis.translations.accordion.collapse[`${this.language}`]}\n\t\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t\t</span>\n\t\t\t\t\t\t</button>\n\t\t\t\t\t</div>\n\t\t\t\t\t{this.internalAccordionData?.map((accordion, index) => {\n\t\t\t\t\t\tconst buttonId = `${this.uidPrefix}__button--${index}`;\n\t\t\t\t\t\tconst sectionId = `${this.uidPrefix}__section--${index}`;\n\t\t\t\t\t\tconst isOpen = this.openAccordionIndexes.includes(index);\n\n\t\t\t\t\t\treturn (\n\t\t\t\t\t\t\t<div class={`ontario-accordion ${isOpen ? 'open' : ''}`} key={`accordion-${index}`}>\n\t\t\t\t\t\t\t\t<h3 class={`ontario-accordion__heading ${isOpen ? 'ontario-expander--active' : ''}`}>\n\t\t\t\t\t\t\t\t\t<button\n\t\t\t\t\t\t\t\t\t\tid={buttonId}\n\t\t\t\t\t\t\t\t\t\tclass=\"ontario-accordion__button\"\n\t\t\t\t\t\t\t\t\t\taria-expanded={isOpen ? 'true' : 'false'}\n\t\t\t\t\t\t\t\t\t\tdata-toggle=\"ontario-collapse\"\n\t\t\t\t\t\t\t\t\t\taria-controls={sectionId}\n\t\t\t\t\t\t\t\t\t\tonClick={() => this.toggleAccordion(index)}\n\t\t\t\t\t\t\t\t\t\taria-label={accordion.ariaLabelText}\n\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t<span class=\"ontario-accordion__button-icon--close\">\n\t\t\t\t\t\t\t\t\t\t\t<ontario-icon-chevron-up colour=\"blue\" aria-hidden=\"true\"></ontario-icon-chevron-up>\n\t\t\t\t\t\t\t\t\t\t</span>\n\t\t\t\t\t\t\t\t\t\t<span class=\"ontario-accordion__button-icon--open\">\n\t\t\t\t\t\t\t\t\t\t\t<ontario-icon-chevron-down colour=\"blue\" aria-hidden=\"true\"></ontario-icon-chevron-down>\n\t\t\t\t\t\t\t\t\t\t</span>\n\t\t\t\t\t\t\t\t\t\t{accordion.label}\n\t\t\t\t\t\t\t\t\t</button>\n\t\t\t\t\t\t\t\t</h3>\n\t\t\t\t\t\t\t\t<section\n\t\t\t\t\t\t\t\t\tid={sectionId}\n\t\t\t\t\t\t\t\t\tclass={`ontario-accordion__content ${\n\t\t\t\t\t\t\t\t\t\tisOpen ? 'ontario-expander__content--opened' : 'ontario-accordion__content--closed'\n\t\t\t\t\t\t\t\t\t}`}\n\t\t\t\t\t\t\t\t\taria-labelledby={buttonId}\n\t\t\t\t\t\t\t\t\trole=\"region\"\n\t\t\t\t\t\t\t\t\taria-hidden={isOpen ? 'false' : 'true'}\n\t\t\t\t\t\t\t\t\tdata-toggle=\"ontario-expander-content\"\n\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t{accordion.accordionContentType === 'html' ? (\n\t\t\t\t\t\t\t\t\t\t<div innerHTML={accordion.content}></div> // Render HTML content\n\t\t\t\t\t\t\t\t\t) : (\n\t\t\t\t\t\t\t\t\t\t<div>{accordion.content}</div>\n\t\t\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t\t\t</section>\n\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t);\n\t\t\t\t\t})}\n\t\t\t\t</div>\n\t\t\t</div>\n\t\t);\n\t}\n}\n"],"version":3}

package/components/ontario-aside.js.map

@@ -1 +1 @@
-{"file":"ontario-aside.js","mappings":";;;;;AAAA,MAAM,eAAe,GAAG,43JAA43J;;MCsBv4JA,cAAY,iBAAAC,kBAAA,CAAA,MAAA,YAAA,SAAAC,CAAA,CAAA;AALzB,IAAA,WAAA,GAAA;;;;AAWC;;AAEG;AACsB,QAAA,IAAkB,CAAA,kBAAA,GAAuB,QAAQ;AAiB1E;;AAEG;AACsB,QAAA,IAAe,CAAA,eAAA,GAA4B,MAAM;AAsG1E;AApGA;;;;AAIG;IAEH,mBAAmB,GAAA;AAClB,QAAA,IAAI,CAAC,CAAC,IAAI,CAAC,WAAW,EAAE;AACvB,YAAA,IAAI,mBAAmB,CAAC,IAAI,CAAC,WAAW,CAAC;gBAAE,OAAO,IAAI,CAAC,WAAW;AAElE,YAAA,MAAM,OAAO,GAAG,IAAI,mBAAmB,EAAE;AACzC,YAAA,OAAO;AACL,iBAAA,kBAAkB;AAClB,iBAAA,gBAAgB,CAAC,CAAgB,aAAA,EAAA,IAAI,CAAC,WAAW,GAAG;iBACpD,cAAc,CAAC,KAAK;iBACpB,gBAAgB,CAAC,mBAAmB;iBACpC,cAAc,CAAC,4FAA4F;AAC3G,iBAAA,YAAY,EAAE;;;AAIlB;;;;;AAKG;IAEH,0BAA0B,GAAA;QACzB,MAAM,OAAO,GAAG,yBAAyB,CAAC,IAAI,CAAC,kBAAkB,EAAE,mBAAmB,CAAC;QACvF,IAAI,OAAO,EAAE;YACZ,OAAO,IAAI,CAAC,kBAAkB;;aACxB;AACN,YAAA,OAAO,IAAI,CAAC,eAAe,EAAE;;;AAI/B;;;;AAIG;IAEH,uBAAuB,GAAA;AACtB,QAAA,IAAI,IAAI,CAAC,eAAe,EAAE;AACzB,YAAA,IAAI,sBAAsB,CAAC,IAAI,CAAC,eAAe,CAAC;gBAAE,OAAO,IAAI,CAAC,eAAe;iBACxE;AACJ,gBAAA,MAAM,OAAO,GAAG,IAAI,mBAAmB,EAAE;gBACzC;AACE,qBAAA,kBAAkB;AAClB,qBAAA,gBAAgB,CAAC,CAAoB,iBAAA,EAAA,IAAI,CAAC,eAAe,GAAG;qBAC5D,cAAc,CAAC,KAAK;qBACpB,gBAAgB,CAAC,mBAAmB;qBACpC,cAAc,CACd,oGAAoG;AAEpG,qBAAA,YAAY,EAAE;;;;AAKlB,QAAA,OAAO,MAAM;;AAGd;;;AAGG;IACK,eAAe,GAAA;AACtB,QAAA,MAAM,OAAO,GAAG,IAAI,mBAAmB,EAAE;QACzC;AACE,aAAA,kBAAkB;aAClB,gBAAgB,CAAC,sBAAsB;aACvC,cAAc,CAAC,IAAI;aACnB,gBAAgB,CAAC,mBAAmB;aACpC,cAAc,CAAC,kCAAkC;aACjD,gBAAgB,CAAC,kBAAkB;aACnC,cAAc,CAAC,iCAAiC;aAChD,gBAAgB,CAAC,UAAU;aAC3B,cAAc,CAAC,aAAa;AAC5B,aAAA,YAAY,EAAE;AAChB,QAAA,QAAQ,IAAI,CAAC,kBAAkB,GAAG,QAAQ;;IAG3C,iBAAiB,GAAA;QAChB,IAAI,CAAC,uBAAuB,EAAE;QAC9B,IAAI,CAAC,mBAAmB,EAAE;QAC1B,IAAI,CAAC,0BAA0B,EAAE;;IAGlC,MAAM,GAAA;QACL,OAAO,oBAAoB,CAC1B,OAAO,EACP,IAAI,CAAC,kBAAkB,EACvB,IAAI,CAAC,WAAW,EAChB,IAAI,CAAC,cAAc,EACnB,IAAI,CAAC,OAAO,EACZ,IAAI,CAAC,eAAe,CACpB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["OntarioAside","__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/ontario-aside/ontario-aside.scss?tag=ontario-aside&encapsulation=shadow","src/components/ontario-aside/ontario-aside.tsx"],"sourcesContent":["@use 'pkg:@ongov/ontario-design-system-global-styles/styles/scss/1-variables/spacing.variables' as spacing;\n@use 'pkg:@ongov/ontario-design-system-global-styles/styles/scss/1-variables/colours.variables' as colours;\n@use 'pkg:@ongov/ontario-design-system-global-styles/styles/scss/1-variables/global.variables' as globalVariables;\n@use 'pkg:@ongov/ontario-design-system-global-styles/styles/scss/1-variables/breakpoints.variables' as breakpoints;\n@use 'pkg:@ongov/ontario-design-system-global-styles/styles/scss/4-elements/global.elements';\n\n.ontario-aside {\n\tborder-left: spacing.$spacing-1 solid colours.$ontario-colour-dark-teal;\n\tpadding: spacing.$spacing-5;\n\tmargin: spacing.$spacing-6 spacing.$spacing-0 spacing.$spacing-7 spacing.$spacing-6;\n\n\t* {\n\t\tmax-width: globalVariables.$standard-width;\n\n\t\t&:last-child,\n\t\t&:last-of-type {\n\t\t\tmargin-bottom: spacing.$spacing-2;\n\t\t}\n\t}\n\n\t@media screen and (max-width: breakpoints.$small-breakpoint) {\n\t\t.ontario-aside {\n\t\t\tmargin: spacing.$spacing-6 spacing.$spacing-0 spacing.$spacing-7 spacing.$spacing-4;\n\t\t}\n\t}\n}\n\n.ontario-aside__title {\n\tmargin: spacing.$spacing-0 spacing.$spacing-0 spacing.$spacing-4;\n}\n\n$aside-highlight-colours: (\n\t'teal': colours.$ontario-colour-dark-teal,\n\t'gold': colours.$ontario-colour-dark-gold,\n\t'yellow': colours.$ontario-colour-dark-yellow,\n\t'taupe': colours.$ontario-colour-dark-taupe,\n\t'green': colours.$ontario-colour-dark-green,\n\t'lime': colours.$ontario-colour-dark-lime,\n\t'sky': colours.$ontario-colour-dark-sky,\n\t'blue': colours.$ontario-colour-dark-blue,\n\t'purple': colours.$ontario-colour-dark-purple,\n);\n\n@each $colour-name, $hex in $aside-highlight-colours {\n\t.ontario-border-highlight--#{$colour-name} {\n\t\tborder-color: $hex !important;\n\t}\n}\n","import { Component, Prop, Watch } from '@stencil/core';\n\nimport {\n\tCalloutAside,\n\tHeadingLevelOptions,\n\tHeadingContentType,\n\tHeadingContentTypes,\n\tHighlightColourOptions,\n} from '../../utils/components/callout-aside/callout-aside.interface';\nimport {\n\tisValidHighlightColour,\n\tgenerateCalloutAside,\n\tisValidHeadingLevel,\n} from '../../utils/components/callout-aside/callout-aside-helpers';\nimport { validateValueAgainstArray } from '../../utils/validation/validation-functions';\nimport { ConsoleMessageClass } from '../../utils/console-message/console-message';\n\n@Component({\n\ttag: 'ontario-aside',\n\tstyleUrl: 'ontario-aside.scss',\n\tshadow: true,\n})\nexport class OntarioAside implements CalloutAside {\n\t/**\n\t * The heading level of the aside heading.\n\t */\n\t@Prop({ mutable: true }) headingType?: HeadingLevelOptions;\n\n\t/**\n\t * The type of the heading content. If no prop is passed, it will default to string.\n\t */\n\t@Prop({ mutable: true }) headingContentType: HeadingContentType = 'string';\n\n\t/**\n\t * Text or HTML to be displayed as the heading of the aside. If the heading content should be displayed as HTML, the `headingContentType` needs to be set to `html`.\n\t */\n\t@Prop() headingContent?: string;\n\n\t/**\n\t * Optional text to be displayed as the content for the aside component. If a string is passed, it will automatically be nested in a paragraph tag.\n\t *\n\t * HTML content can also be passed as the child/children of the aside component if additional/different elements for the content are needed.\n\t *\n\t * @example\n\t * <ontario-aside headingType='h3' headingContent='This is the aside heading'><p>This is the first sentence of the aside content.</p><p>This is the second sentence of the aside content.</p></ontario-aside>\n\t */\n\t@Prop() content?: string;\n\n\t/**\n\t * Optional prop to choose the border colour of the aside. If none is passed, the default colour will be teal.\n\t */\n\t@Prop({ mutable: true }) highlightColour?: HighlightColourOptions = 'teal';\n\n\t/**\n\t * Watch for changes to the `headingType` prop.\n\t *\n\t * This is for validation purposes to make sure the `headingType` matches one of the `HeadingLevelOptions`.\n\t */\n\t@Watch('headingType')\n\tvalidateHeadingType() {\n\t\tif (!!this.headingType) {\n\t\t\tif (isValidHeadingLevel(this.headingType)) return this.headingType;\n\n\t\t\tconst message = new ConsoleMessageClass();\n\t\t\treturn message\n\t\t\t\t.addDesignSystemTag()\n\t\t\t\t.addMonospaceText(` headingType ${this.headingType} `)\n\t\t\t\t.addRegularText('for')\n\t\t\t\t.addMonospaceText(' <ontario-aside> ')\n\t\t\t\t.addRegularText('is not a valid type. Please ensure your heading type matches one of the headingType types.')\n\t\t\t\t.printMessage();\n\t\t}\n\t}\n\n\t/**\n\t * Watch for changes in the `headingContentType` prop for validation purposes.\n\t *\n\t * If the user input doesn't match one of the array values then `headingContentType` will be set to its default (`string`).\n\t * If a match is found in one of the array values then `headingContentType` will be set to the matching array key value.\n\t */\n\t@Watch('headingContentType')\n\tvalidateHeadingContentType() {\n\t\tconst isValid = validateValueAgainstArray(this.headingContentType, HeadingContentTypes);\n\t\tif (isValid) {\n\t\t\treturn this.headingContentType;\n\t\t} else {\n\t\t\treturn this.warnDefaultType();\n\t\t}\n\t}\n\n\t/**\n\t * Watch for changes to the `highlightColour` prop.\n\t *\n\t * If no `highlightColour` is passed, or if the `highlightColour` does not match the `highlightColour` options, a default value of 'teal' will be applied.\n\t */\n\t@Watch('highlightColour')\n\tvalidateHighlightColour() {\n\t\tif (this.highlightColour) {\n\t\t\tif (isValidHighlightColour(this.highlightColour)) return this.highlightColour;\n\t\t\telse {\n\t\t\t\tconst message = new ConsoleMessageClass();\n\t\t\t\tmessage\n\t\t\t\t\t.addDesignSystemTag()\n\t\t\t\t\t.addMonospaceText(` highlightColour ${this.highlightColour} `)\n\t\t\t\t\t.addRegularText('for')\n\t\t\t\t\t.addMonospaceText(' <ontario-aside> ')\n\t\t\t\t\t.addRegularText(\n\t\t\t\t\t\t'does not match one of the valid highlightColour types. A default colour of `teal` will be applied.',\n\t\t\t\t\t)\n\t\t\t\t\t.printMessage();\n\t\t\t}\n\t\t}\n\n\t\t// if no highlight colour is passed, return 'teal'\n\t\treturn 'teal';\n\t}\n\n\t/**\n\t * Print the invalid `type` warning message.\n\t * @returns default type ('string')\n\t */\n\tprivate warnDefaultType() {\n\t\tconst message = new ConsoleMessageClass();\n\t\tmessage\n\t\t\t.addDesignSystemTag()\n\t\t\t.addMonospaceText(' headingContentType ')\n\t\t\t.addRegularText('on')\n\t\t\t.addMonospaceText(' <ontario-aside> ')\n\t\t\t.addRegularText('was set to an invalid type; only')\n\t\t\t.addMonospaceText(' string or html ')\n\t\t\t.addRegularText('are supported. The default type')\n\t\t\t.addMonospaceText(' string ')\n\t\t\t.addRegularText('is assumed.')\n\t\t\t.printMessage();\n\t\treturn (this.headingContentType = 'string');\n\t}\n\n\tcomponentWillLoad() {\n\t\tthis.validateHighlightColour();\n\t\tthis.validateHeadingType();\n\t\tthis.validateHeadingContentType();\n\t}\n\n\trender() {\n\t\treturn generateCalloutAside(\n\t\t\t'aside',\n\t\t\tthis.headingContentType,\n\t\t\tthis.headingType,\n\t\t\tthis.headingContent,\n\t\t\tthis.content,\n\t\t\tthis.highlightColour,\n\t\t);\n\t}\n}\n"],"version":3}
+{"file":"ontario-aside.js","mappings":";;;;;AAAA,MAAM,eAAe,GAAG,43JAA43J;;MC8Bv4JA,cAAY,iBAAAC,kBAAA,CAAA,MAAA,YAAA,SAAAC,CAAA,CAAA;AALzB,IAAA,WAAA,GAAA;;;;AAWC;;AAEG;AACsB,QAAA,IAAkB,CAAA,kBAAA,GAAuB,QAAQ;AAiB1E;;AAEG;AACsB,QAAA,IAAe,CAAA,eAAA,GAA4B,MAAM;AAsG1E;AApGA;;;;AAIG;IAEH,mBAAmB,GAAA;AAClB,QAAA,IAAI,CAAC,CAAC,IAAI,CAAC,WAAW,EAAE;AACvB,YAAA,IAAI,mBAAmB,CAAC,IAAI,CAAC,WAAW,CAAC;gBAAE,OAAO,IAAI,CAAC,WAAW;AAElE,YAAA,MAAM,OAAO,GAAG,IAAI,mBAAmB,EAAE;AACzC,YAAA,OAAO;AACL,iBAAA,kBAAkB;AAClB,iBAAA,gBAAgB,CAAC,CAAgB,aAAA,EAAA,IAAI,CAAC,WAAW,GAAG;iBACpD,cAAc,CAAC,KAAK;iBACpB,gBAAgB,CAAC,mBAAmB;iBACpC,cAAc,CAAC,4FAA4F;AAC3G,iBAAA,YAAY,EAAE;;;AAIlB;;;;;AAKG;IAEH,0BAA0B,GAAA;QACzB,MAAM,OAAO,GAAG,yBAAyB,CAAC,IAAI,CAAC,kBAAkB,EAAE,mBAAmB,CAAC;QACvF,IAAI,OAAO,EAAE;YACZ,OAAO,IAAI,CAAC,kBAAkB;;aACxB;AACN,YAAA,OAAO,IAAI,CAAC,eAAe,EAAE;;;AAI/B;;;;AAIG;IAEH,uBAAuB,GAAA;AACtB,QAAA,IAAI,IAAI,CAAC,eAAe,EAAE;AACzB,YAAA,IAAI,sBAAsB,CAAC,IAAI,CAAC,eAAe,CAAC;gBAAE,OAAO,IAAI,CAAC,eAAe;iBACxE;AACJ,gBAAA,MAAM,OAAO,GAAG,IAAI,mBAAmB,EAAE;gBACzC;AACE,qBAAA,kBAAkB;AAClB,qBAAA,gBAAgB,CAAC,CAAoB,iBAAA,EAAA,IAAI,CAAC,eAAe,GAAG;qBAC5D,cAAc,CAAC,KAAK;qBACpB,gBAAgB,CAAC,mBAAmB;qBACpC,cAAc,CACd,oGAAoG;AAEpG,qBAAA,YAAY,EAAE;;;;AAKlB,QAAA,OAAO,MAAM;;AAGd;;;AAGG;IACK,eAAe,GAAA;AACtB,QAAA,MAAM,OAAO,GAAG,IAAI,mBAAmB,EAAE;QACzC;AACE,aAAA,kBAAkB;aAClB,gBAAgB,CAAC,sBAAsB;aACvC,cAAc,CAAC,IAAI;aACnB,gBAAgB,CAAC,mBAAmB;aACpC,cAAc,CAAC,kCAAkC;aACjD,gBAAgB,CAAC,kBAAkB;aACnC,cAAc,CAAC,iCAAiC;aAChD,gBAAgB,CAAC,UAAU;aAC3B,cAAc,CAAC,aAAa;AAC5B,aAAA,YAAY,EAAE;AAChB,QAAA,QAAQ,IAAI,CAAC,kBAAkB,GAAG,QAAQ;;IAG3C,iBAAiB,GAAA;QAChB,IAAI,CAAC,uBAAuB,EAAE;QAC9B,IAAI,CAAC,mBAAmB,EAAE;QAC1B,IAAI,CAAC,0BAA0B,EAAE;;IAGlC,MAAM,GAAA;QACL,OAAO,oBAAoB,CAC1B,OAAO,EACP,IAAI,CAAC,kBAAkB,EACvB,IAAI,CAAC,WAAW,EAChB,IAAI,CAAC,cAAc,EACnB,IAAI,CAAC,OAAO,EACZ,IAAI,CAAC,eAAe,CACpB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["OntarioAside","__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/ontario-aside/ontario-aside.scss?tag=ontario-aside&encapsulation=shadow","src/components/ontario-aside/ontario-aside.tsx"],"sourcesContent":["@use 'pkg:@ongov/ontario-design-system-global-styles/styles/scss/1-variables/spacing.variables' as spacing;\n@use 'pkg:@ongov/ontario-design-system-global-styles/styles/scss/1-variables/colours.variables' as colours;\n@use 'pkg:@ongov/ontario-design-system-global-styles/styles/scss/1-variables/global.variables' as globalVariables;\n@use 'pkg:@ongov/ontario-design-system-global-styles/styles/scss/1-variables/breakpoints.variables' as breakpoints;\n@use 'pkg:@ongov/ontario-design-system-global-styles/styles/scss/4-elements/global.elements';\n\n.ontario-aside {\n\tborder-left: spacing.$spacing-1 solid colours.$ontario-colour-dark-teal;\n\tpadding: spacing.$spacing-5;\n\tmargin: spacing.$spacing-6 spacing.$spacing-0 spacing.$spacing-7 spacing.$spacing-6;\n\n\t* {\n\t\tmax-width: globalVariables.$standard-width;\n\n\t\t&:last-child,\n\t\t&:last-of-type {\n\t\t\tmargin-bottom: spacing.$spacing-2;\n\t\t}\n\t}\n\n\t@media screen and (max-width: breakpoints.$small-breakpoint) {\n\t\t.ontario-aside {\n\t\t\tmargin: spacing.$spacing-6 spacing.$spacing-0 spacing.$spacing-7 spacing.$spacing-4;\n\t\t}\n\t}\n}\n\n.ontario-aside__title {\n\tmargin: spacing.$spacing-0 spacing.$spacing-0 spacing.$spacing-4;\n}\n\n$aside-highlight-colours: (\n\t'teal': colours.$ontario-colour-dark-teal,\n\t'gold': colours.$ontario-colour-dark-gold,\n\t'yellow': colours.$ontario-colour-dark-yellow,\n\t'taupe': colours.$ontario-colour-dark-taupe,\n\t'green': colours.$ontario-colour-dark-green,\n\t'lime': colours.$ontario-colour-dark-lime,\n\t'sky': colours.$ontario-colour-dark-sky,\n\t'blue': colours.$ontario-colour-dark-blue,\n\t'purple': colours.$ontario-colour-dark-purple,\n);\n\n@each $colour-name, $hex in $aside-highlight-colours {\n\t.ontario-border-highlight--#{$colour-name} {\n\t\tborder-color: $hex !important;\n\t}\n}\n","import { Component, Prop, Watch } from '@stencil/core';\n\nimport {\n\tCalloutAside,\n\tHeadingLevelOptions,\n\tHeadingContentType,\n\tHeadingContentTypes,\n\tHighlightColourOptions,\n} from '../../utils/components/callout-aside/callout-aside.interface';\nimport {\n\tisValidHighlightColour,\n\tgenerateCalloutAside,\n\tisValidHeadingLevel,\n} from '../../utils/components/callout-aside/callout-aside-helpers';\nimport { validateValueAgainstArray } from '../../utils/validation/validation-functions';\nimport { ConsoleMessageClass } from '../../utils/console-message/console-message';\n\n/**\n * Ontario Aside is used for related, non-essential information that supports content beside the main task flow.\n *\n * For component selection guidance, see:\n * - https://designsystem.ontario.ca/components/detail/callouts-asides.html\n * - https://designsystem.ontario.ca/components/detail/page-alerts.html\n * - https://designsystem.ontario.ca/developer-docs/components/ontario-aside/\n */\n@Component({\n\ttag: 'ontario-aside',\n\tstyleUrl: 'ontario-aside.scss',\n\tshadow: true,\n})\nexport class OntarioAside implements CalloutAside {\n\t/**\n\t * The heading level of the aside heading.\n\t */\n\t@Prop({ mutable: true }) headingType?: HeadingLevelOptions;\n\n\t/**\n\t * The type of the heading content. If no prop is passed, it will default to string.\n\t */\n\t@Prop({ mutable: true }) headingContentType: HeadingContentType = 'string';\n\n\t/**\n\t * Text or HTML to be displayed as the heading of the aside. If the heading content should be displayed as HTML, the `headingContentType` needs to be set to `html`.\n\t */\n\t@Prop() headingContent?: string;\n\n\t/**\n\t * Optional text to be displayed as the content for the aside component. If a string is passed, it will automatically be nested in a paragraph tag.\n\t *\n\t * HTML content can also be passed as the child/children of the aside component if additional/different elements for the content are needed.\n\t *\n\t * @example\n\t * <ontario-aside headingType='h3' headingContent='This is the aside heading'><p>This is the first sentence of the aside content.</p><p>This is the second sentence of the aside content.</p></ontario-aside>\n\t */\n\t@Prop() content?: string;\n\n\t/**\n\t * Optional prop to choose the border colour of the aside. If none is passed, the default colour will be teal.\n\t */\n\t@Prop({ mutable: true }) highlightColour?: HighlightColourOptions = 'teal';\n\n\t/**\n\t * Watch for changes to the `headingType` prop.\n\t *\n\t * This is for validation purposes to make sure the `headingType` matches one of the `HeadingLevelOptions`.\n\t */\n\t@Watch('headingType')\n\tvalidateHeadingType() {\n\t\tif (!!this.headingType) {\n\t\t\tif (isValidHeadingLevel(this.headingType)) return this.headingType;\n\n\t\t\tconst message = new ConsoleMessageClass();\n\t\t\treturn message\n\t\t\t\t.addDesignSystemTag()\n\t\t\t\t.addMonospaceText(` headingType ${this.headingType} `)\n\t\t\t\t.addRegularText('for')\n\t\t\t\t.addMonospaceText(' <ontario-aside> ')\n\t\t\t\t.addRegularText('is not a valid type. Please ensure your heading type matches one of the headingType types.')\n\t\t\t\t.printMessage();\n\t\t}\n\t}\n\n\t/**\n\t * Watch for changes in the `headingContentType` prop for validation purposes.\n\t *\n\t * If the user input doesn't match one of the array values then `headingContentType` will be set to its default (`string`).\n\t * If a match is found in one of the array values then `headingContentType` will be set to the matching array key value.\n\t */\n\t@Watch('headingContentType')\n\tvalidateHeadingContentType() {\n\t\tconst isValid = validateValueAgainstArray(this.headingContentType, HeadingContentTypes);\n\t\tif (isValid) {\n\t\t\treturn this.headingContentType;\n\t\t} else {\n\t\t\treturn this.warnDefaultType();\n\t\t}\n\t}\n\n\t/**\n\t * Watch for changes to the `highlightColour` prop.\n\t *\n\t * If no `highlightColour` is passed, or if the `highlightColour` does not match the `highlightColour` options, a default value of 'teal' will be applied.\n\t */\n\t@Watch('highlightColour')\n\tvalidateHighlightColour() {\n\t\tif (this.highlightColour) {\n\t\t\tif (isValidHighlightColour(this.highlightColour)) return this.highlightColour;\n\t\t\telse {\n\t\t\t\tconst message = new ConsoleMessageClass();\n\t\t\t\tmessage\n\t\t\t\t\t.addDesignSystemTag()\n\t\t\t\t\t.addMonospaceText(` highlightColour ${this.highlightColour} `)\n\t\t\t\t\t.addRegularText('for')\n\t\t\t\t\t.addMonospaceText(' <ontario-aside> ')\n\t\t\t\t\t.addRegularText(\n\t\t\t\t\t\t'does not match one of the valid highlightColour types. A default colour of `teal` will be applied.',\n\t\t\t\t\t)\n\t\t\t\t\t.printMessage();\n\t\t\t}\n\t\t}\n\n\t\t// if no highlight colour is passed, return 'teal'\n\t\treturn 'teal';\n\t}\n\n\t/**\n\t * Print the invalid `type` warning message.\n\t * @returns default type ('string')\n\t */\n\tprivate warnDefaultType() {\n\t\tconst message = new ConsoleMessageClass();\n\t\tmessage\n\t\t\t.addDesignSystemTag()\n\t\t\t.addMonospaceText(' headingContentType ')\n\t\t\t.addRegularText('on')\n\t\t\t.addMonospaceText(' <ontario-aside> ')\n\t\t\t.addRegularText('was set to an invalid type; only')\n\t\t\t.addMonospaceText(' string or html ')\n\t\t\t.addRegularText('are supported. The default type')\n\t\t\t.addMonospaceText(' string ')\n\t\t\t.addRegularText('is assumed.')\n\t\t\t.printMessage();\n\t\treturn (this.headingContentType = 'string');\n\t}\n\n\tcomponentWillLoad() {\n\t\tthis.validateHighlightColour();\n\t\tthis.validateHeadingType();\n\t\tthis.validateHeadingContentType();\n\t}\n\n\trender() {\n\t\treturn generateCalloutAside(\n\t\t\t'aside',\n\t\t\tthis.headingContentType,\n\t\t\tthis.headingType,\n\t\t\tthis.headingContent,\n\t\t\tthis.content,\n\t\t\tthis.highlightColour,\n\t\t);\n\t}\n}\n"],"version":3}

package/components/ontario-back-to-top.js

@@ -57,13 +57,13 @@ const OntarioBackToTop$1 = /*@__PURE__*/ proxyCustomElement(
 			return h(
 				'button',
 				{
-					'key': '9f8cd23fef9cc1e4c241b7d56f977d7fecbbf515',
+					'key': 'db7301b3d49d7564fc0eb8d51d08c82fe23a4272',
 					'class': this.displayBackToTop ? `ontario-back-to-top active` : `ontario-back-to-top`,
 					'onClick': this.scrollToTop,
 					'aria-label': this.translations.backToTop.ariaLabel[`${this.language}`],
 				},
 				h('span', {
-					'key': '98f7983d4c3e8581a2bb693f1331d766841e39aa',
+					'key': 'eb031b01e3a9d343f22921850d103b45b503b5aa',
 					'aria-hidden': 'true',
 					'innerHTML': OntarioIconArrowUp,
 				}),

package/components/ontario-back-to-top.js.map

@@ -1 +1 @@
-{"file":"ontario-back-to-top.js","mappings":";;;;;;;;AAAA,MAAM,mBAAmB,GAAG,mmEAAmmE;;MCelnEA,kBAAgB,iBAAAC,kBAAA,CAAA,MAAA,gBAAA,SAAAC,CAAA,CAAA;AAL7B,IAAA,WAAA,GAAA;;;;AAcU,QAAA,IAAY,CAAA,YAAA,GAAQ,YAAY;AAExB,QAAA,IAAgB,CAAA,gBAAA,GAAY,KAAK;AAEjC,QAAA,IAAY,CAAA,YAAA,GAAW,GAAG;AAuD3C;AArDA;;AAEG;IAEH,mBAAmB,GAAA;QAClB,IAAI,qBAAqB,EAAE,EAAE;YAC5B,IAAI,CAAC,gBAAgB,GAAG,MAAM,CAAC,OAAO,GAAG,IAAI,CAAC,YAAY;;;AAI5D;;AAEG;AAEH,IAAA,oBAAoB,CAAC,KAA4B,EAAA;AAChD,QAAA,IAAI,CAAC,IAAI,CAAC,QAAQ,EAAE;AACnB,YAAA,IAAI,CAAC,QAAQ,GAAG,gBAAgB,CAAC,KAAK,CAAC;;;AAIzC;;;AAGG;AAEH,IAAA,2BAA2B,CAAC,KAAoD,EAAA;QAC/E,IAAI,CAAC,QAAQ,GAAG,gBAAgB,CAAC,KAAK,CAAC,MAAM,CAAC,WAAW,CAAC;;AAE3D;;AAEG;IACK,WAAW,GAAA;QAClB,IAAI,qBAAqB,EAAE,EAAE;AAC5B,YAAA,MAAM,CAAC,QAAQ,CAAC,EAAE,GAAG,EAAE,CAAC,EAAE,IAAI,EAAE,CAAC,EAAE,QAAQ,EAAE,QAAQ,EAAE,CAAC;;;IAI1D,iBAAiB,GAAA;QAChB,IAAI,CAAC,QAAQ,GAAG,gBAAgB,CAAC,IAAI,CAAC,QAAQ,CAAC;;IAGhD,MAAM,GAAA;AACL,QAAA,QACC,CAAA,CAAA,QAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EACC,KAAK,EAAE,IAAI,CAAC,gBAAgB,GAAG,CAAA,0BAAA,CAA4B,GAAG,CAAqB,mBAAA,CAAA,EACnF,OAAO,EAAE,IAAI,CAAC,WAAW,EAAA,YAAA,EACb,IAAI,CAAC,YAAY,CAAC,SAAS,CAAC,SAAS,CAAC,CAAA,EAAG,IAAI,CAAC,QAAQ,CAAE,CAAA,CAAC,EAAA,EAErE,CAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,aAAA,EAAkB,MAAM,EAAC,SAAS,EAAE,kBAAkB,EAAS,CAAA,EAC9D,IAAI,CAAC,YAAY,CAAC,SAAS,CAAC,GAAG,CAAC,CAAA,EAAG,IAAI,CAAC,QAAQ,EAAE,CAAC,CAC5C;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["OntarioBackToTop","__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/ontario-back-to-top/ontario-back-to-top.scss?tag=ontario-back-to-top&encapsulation=shadow","src/components/ontario-back-to-top/ontario-back-to-top.tsx"],"sourcesContent":["@use 'sass:math';\n@use 'pkg:@ongov/ontario-design-system-global-styles/styles/scss/1-variables/global.variables' as globalVariables;\n@use 'pkg:@ongov/ontario-design-system-global-styles/styles/scss/1-variables/spacing.variables' as spacing;\n@use 'pkg:@ongov/ontario-design-system-global-styles/styles/scss/1-variables/colours.variables' as colours;\n@use 'pkg:@ongov/ontario-design-system-global-styles/styles/scss/1-variables/breakpoints.variables' as breakpoints;\n@use 'pkg:@ongov/ontario-design-system-global-styles/styles/scss/1-variables/fonts.variables' as fonts;\n@use 'pkg:@ongov/ontario-design-system-global-styles/styles/scss/2-tools/functions/global.functions' as globalFunctions;\n@use 'pkg:@ongov/ontario-design-system-global-styles/styles/scss/1-variables/font-sizes.variables' as fontSizes;\n@use 'pkg:@ongov/ontario-design-system-global-styles/styles/scss/1-variables/font-weights.variables' as fontWeights;\n@use 'pkg:@ongov/ontario-design-system-global-styles/styles/scss/2-tools/placeholder/focus.placeholders' as\n\tfocusPlaceholders;\n\n$ontario-icon-margin-top: 0.125rem;\n\n// Colour variables\n$ontario-colour-back-to-top-background: #e6e6e6;\n$ontario-colour-back-to-top--active-background: #b2b2b2;\n\n.ontario-back-to-top,\n// Fractal component style coverage ↓\n.ontario-back-to-top--default {\n\tposition: fixed;\n\tbottom: 5%;\n\tright: 2%;\n\tvisibility: hidden;\n\topacity: 0;\n\ttransition: 0.1s ease-in-out;\n\tdisplay: flex;\n\tjustify-content: center;\n\talign-items: center;\n\theight: globalFunctions.px-to-rem(48);\n\tpadding: spacing.$spacing-2 spacing.$spacing-4 spacing.$spacing-2 spacing.$spacing-3;\n\tbackground: $ontario-colour-back-to-top-background;\n\tborder: globalFunctions.px-to-rem(2) solid colours.$ontario-colour-white;\n\tborder-radius: globalVariables.$global-radius;\n\tbox-shadow: 0 globalFunctions.px-to-rem(2) globalFunctions.px-to-rem(4) rgba(colours.$ontario-colour-black, 0.6);\n\tbox-sizing: border-box;\n\tcolor: colours.$ontario-colour-black;\n\tline-height: globalFunctions.px-to-rem(20);\n\tfont-size: fontSizes.$ontario-font-size-standard-body-text;\n\tfont-family: fonts.$ontario-font-open-sans;\n\tfont-weight: fontWeights.$ontario-font-weights-semi-bold;\n\tz-index: 10000;\n\tcursor: pointer;\n\n\t.ontario-icon {\n\t\tmargin: $ontario-icon-margin-top spacing.$spacing-2 spacing.$spacing-0 spacing.$spacing-0;\n\t\twidth: globalFunctions.px-to-rem(32);\n\t\theight: globalFunctions.px-to-rem(32);\n\t}\n\n\t&:hover {\n\t\tbackground-color: colours.$ontario-greyscale-20;\n\t}\n\n\t&:focus {\n\t\tbackground-color: $ontario-colour-back-to-top-background;\n\t\tbox-shadow:\n\t\t\t0 0 0 globalFunctions.px-to-rem(4) colours.$ontario-colour-focus,\n\t\t\t0 globalFunctions.px-to-rem(3) globalFunctions.px-to-rem(5) globalFunctions.px-to-rem(3) rgba(0, 0, 0, 0.6);\n\t\toutline: globalFunctions.px-to-rem(4) solid transparent;\n\t\ttransition: 0.1s ease-in-out;\n\t}\n\n\t&:active {\n\t\tbackground-color: $ontario-colour-back-to-top--active-background;\n\t\tbox-shadow:\n\t\t\t0 0 0 globalFunctions.px-to-rem(4) colours.$ontario-colour-focus,\n\t\t\t0 globalFunctions.px-to-rem(5) globalFunctions.px-to-rem(7) globalFunctions.px-to-rem(3) rgba(0, 0, 0, 0.6);\n\t\toutline: globalFunctions.px-to-rem(4) solid transparent;\n\t\ttransition:\n\t\t\tbackground-color 0s,\n\t\t\tfocusPlaceholders.$ontario-focus-transition;\n\t}\n\n\t@media screen and (max-width: breakpoints.$medium-breakpoint) {\n\t\tflex-direction: column;\n\t\theight: globalFunctions.px-to-rem(76);\n\t\tpadding: globalFunctions.px-to-rem(6) spacing.$spacing-3 globalFunctions.px-to-rem(9) spacing.$spacing-3;\n\n\t\t.ontario-icon {\n\t\t\tmargin: globalFunctions.px-to-rem(1) spacing.$spacing-0 spacing.$spacing-1 spacing.$spacing-0;\n\t\t\twidth: globalFunctions.px-to-rem(32);\n\t\t\theight: globalFunctions.px-to-rem(32);\n\t\t}\n\t}\n\n\t@media screen and (max-width: breakpoints.$small-breakpoint) {\n\t\tdisplay: block;\n\t\tpadding: spacing.$spacing-1;\n\t\tfont-size: 0;\n\t\twidth: globalFunctions.px-to-rem(48);\n\t\theight: globalFunctions.px-to-rem(48);\n\n\t\tspan {\n\t\t\tdisplay: block;\n\t\t}\n\n\t\t.ontario-icon {\n\t\t\tmargin: math.div(spacing.$spacing-1, 2) spacing.$spacing-0 spacing.$spacing-0 spacing.$spacing-0;\n\n\t\t\t@-moz-document url-prefix() {\n\t\t\t\tmargin-top: $ontario-icon-margin-top;\n\t\t\t}\n\t\t}\n\t}\n\n\t&.active {\n\t\tvisibility: visible;\n\t\topacity: 1;\n\t}\n}\n","import { Component, h, Element, Prop, Listen, State } from '@stencil/core';\n\nimport OntarioIconArrowUp from '../ontario-icon/assets/ontario-icon-arrow-up.svg';\nimport { Language } from '../../utils/common/language-types';\nimport { validateLanguage } from '../../utils/validation/validation-functions';\n\nimport translations from '../../translations/global.i18n.json';\nimport { isClientSideRendering } from '../../utils/common/environment';\nimport { HeaderLanguageToggleEventDetails } from '../../utils/events/common-events.interface';\n\n@Component({\n\ttag: 'ontario-back-to-top',\n\tstyleUrl: 'ontario-back-to-top.scss',\n\tshadow: true,\n})\nexport class OntarioBackToTop {\n\t@Element() element: HTMLElement;\n\n\t/**\n\t * The language of the component.\n\t * This is used for translations, and is by default set through event listeners checking for a language property from the header. If no language prop is passed, it will default to English.\n\t */\n\t@Prop({ mutable: true }) language?: Language;\n\n\t@State() translations: any = translations;\n\n\t@State() private displayBackToTop: boolean = false;\n\n\t@State() private scrollYValue: number = 200;\n\n\t/**\n\t * This listens for the window Y scroll value to be above 200 pixels. Once it is, the Back to Top button will toggle the `displayBackToTop` state which will set an active class to control the components' visibility.\n\t */\n\t@Listen('scroll', { target: 'window' })\n\tshowBackToTopButton() {\n\t\tif (isClientSideRendering()) {\n\t\t\tthis.displayBackToTop = window.scrollY > this.scrollYValue;\n\t\t}\n\t}\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/**\n\t * Handles an update to the language should the user request a language update from the language toggle.\n\t * @param {CustomEvent} - The language that has been selected.\n\t */\n\t@Listen('headerLanguageToggled', { target: 'window' })\n\thandleHeaderLanguageToggled(event: CustomEvent<HeaderLanguageToggleEventDetails>) {\n\t\tthis.language = validateLanguage(event.detail.newLanguage);\n\t}\n\t/**\n\t * Scroll to top functionality when the Back to Top button is clicked\n\t */\n\tprivate scrollToTop() {\n\t\tif (isClientSideRendering()) {\n\t\t\twindow.scrollTo({ top: 0, left: 0, behavior: 'smooth' });\n\t\t}\n\t}\n\n\tcomponentWillLoad() {\n\t\tthis.language = validateLanguage(this.language);\n\t}\n\n\trender() {\n\t\treturn (\n\t\t\t<button\n\t\t\t\tclass={this.displayBackToTop ? `ontario-back-to-top active` : `ontario-back-to-top`}\n\t\t\t\tonClick={this.scrollToTop}\n\t\t\t\taria-label={this.translations.backToTop.ariaLabel[`${this.language}`]}\n\t\t\t>\n\t\t\t\t<span aria-hidden=\"true\" innerHTML={OntarioIconArrowUp}></span>\n\t\t\t\t{this.translations.backToTop.top[`${this.language}`]}\n\t\t\t</button>\n\t\t);\n\t}\n}\n"],"version":3}
+{"file":"ontario-back-to-top.js","mappings":";;;;;;;;AAAA,MAAM,mBAAmB,GAAG,mmEAAmmE;;MCsBlnEA,kBAAgB,iBAAAC,kBAAA,CAAA,MAAA,gBAAA,SAAAC,CAAA,CAAA;AAL7B,IAAA,WAAA,GAAA;;;;AAcU,QAAA,IAAY,CAAA,YAAA,GAAQ,YAAY;AAExB,QAAA,IAAgB,CAAA,gBAAA,GAAY,KAAK;AAEjC,QAAA,IAAY,CAAA,YAAA,GAAW,GAAG;AAuD3C;AArDA;;AAEG;IAEH,mBAAmB,GAAA;QAClB,IAAI,qBAAqB,EAAE,EAAE;YAC5B,IAAI,CAAC,gBAAgB,GAAG,MAAM,CAAC,OAAO,GAAG,IAAI,CAAC,YAAY;;;AAI5D;;AAEG;AAEH,IAAA,oBAAoB,CAAC,KAA4B,EAAA;AAChD,QAAA,IAAI,CAAC,IAAI,CAAC,QAAQ,EAAE;AACnB,YAAA,IAAI,CAAC,QAAQ,GAAG,gBAAgB,CAAC,KAAK,CAAC;;;AAIzC;;;AAGG;AAEH,IAAA,2BAA2B,CAAC,KAAoD,EAAA;QAC/E,IAAI,CAAC,QAAQ,GAAG,gBAAgB,CAAC,KAAK,CAAC,MAAM,CAAC,WAAW,CAAC;;AAE3D;;AAEG;IACK,WAAW,GAAA;QAClB,IAAI,qBAAqB,EAAE,EAAE;AAC5B,YAAA,MAAM,CAAC,QAAQ,CAAC,EAAE,GAAG,EAAE,CAAC,EAAE,IAAI,EAAE,CAAC,EAAE,QAAQ,EAAE,QAAQ,EAAE,CAAC;;;IAI1D,iBAAiB,GAAA;QAChB,IAAI,CAAC,QAAQ,GAAG,gBAAgB,CAAC,IAAI,CAAC,QAAQ,CAAC;;IAGhD,MAAM,GAAA;AACL,QAAA,QACC,CAAA,CAAA,QAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EACC,KAAK,EAAE,IAAI,CAAC,gBAAgB,GAAG,CAAA,0BAAA,CAA4B,GAAG,CAAqB,mBAAA,CAAA,EACnF,OAAO,EAAE,IAAI,CAAC,WAAW,EAAA,YAAA,EACb,IAAI,CAAC,YAAY,CAAC,SAAS,CAAC,SAAS,CAAC,CAAA,EAAG,IAAI,CAAC,QAAQ,CAAE,CAAA,CAAC,EAAA,EAErE,CAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,aAAA,EAAkB,MAAM,EAAC,SAAS,EAAE,kBAAkB,EAAS,CAAA,EAC9D,IAAI,CAAC,YAAY,CAAC,SAAS,CAAC,GAAG,CAAC,CAAA,EAAG,IAAI,CAAC,QAAQ,EAAE,CAAC,CAC5C;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["OntarioBackToTop","__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/ontario-back-to-top/ontario-back-to-top.scss?tag=ontario-back-to-top&encapsulation=shadow","src/components/ontario-back-to-top/ontario-back-to-top.tsx"],"sourcesContent":["@use 'sass:math';\n@use 'pkg:@ongov/ontario-design-system-global-styles/styles/scss/1-variables/global.variables' as globalVariables;\n@use 'pkg:@ongov/ontario-design-system-global-styles/styles/scss/1-variables/spacing.variables' as spacing;\n@use 'pkg:@ongov/ontario-design-system-global-styles/styles/scss/1-variables/colours.variables' as colours;\n@use 'pkg:@ongov/ontario-design-system-global-styles/styles/scss/1-variables/breakpoints.variables' as breakpoints;\n@use 'pkg:@ongov/ontario-design-system-global-styles/styles/scss/1-variables/fonts.variables' as fonts;\n@use 'pkg:@ongov/ontario-design-system-global-styles/styles/scss/2-tools/functions/global.functions' as globalFunctions;\n@use 'pkg:@ongov/ontario-design-system-global-styles/styles/scss/1-variables/font-sizes.variables' as fontSizes;\n@use 'pkg:@ongov/ontario-design-system-global-styles/styles/scss/1-variables/font-weights.variables' as fontWeights;\n@use 'pkg:@ongov/ontario-design-system-global-styles/styles/scss/2-tools/placeholder/focus.placeholders' as\n\tfocusPlaceholders;\n\n$ontario-icon-margin-top: 0.125rem;\n\n// Colour variables\n$ontario-colour-back-to-top-background: #e6e6e6;\n$ontario-colour-back-to-top--active-background: #b2b2b2;\n\n.ontario-back-to-top,\n// Fractal component style coverage ↓\n.ontario-back-to-top--default {\n\tposition: fixed;\n\tbottom: 5%;\n\tright: 2%;\n\tvisibility: hidden;\n\topacity: 0;\n\ttransition: 0.1s ease-in-out;\n\tdisplay: flex;\n\tjustify-content: center;\n\talign-items: center;\n\theight: globalFunctions.px-to-rem(48);\n\tpadding: spacing.$spacing-2 spacing.$spacing-4 spacing.$spacing-2 spacing.$spacing-3;\n\tbackground: $ontario-colour-back-to-top-background;\n\tborder: globalFunctions.px-to-rem(2) solid colours.$ontario-colour-white;\n\tborder-radius: globalVariables.$global-radius;\n\tbox-shadow: 0 globalFunctions.px-to-rem(2) globalFunctions.px-to-rem(4) rgba(colours.$ontario-colour-black, 0.6);\n\tbox-sizing: border-box;\n\tcolor: colours.$ontario-colour-black;\n\tline-height: globalFunctions.px-to-rem(20);\n\tfont-size: fontSizes.$ontario-font-size-standard-body-text;\n\tfont-family: fonts.$ontario-font-open-sans;\n\tfont-weight: fontWeights.$ontario-font-weights-semi-bold;\n\tz-index: 10000;\n\tcursor: pointer;\n\n\t.ontario-icon {\n\t\tmargin: $ontario-icon-margin-top spacing.$spacing-2 spacing.$spacing-0 spacing.$spacing-0;\n\t\twidth: globalFunctions.px-to-rem(32);\n\t\theight: globalFunctions.px-to-rem(32);\n\t}\n\n\t&:hover {\n\t\tbackground-color: colours.$ontario-greyscale-20;\n\t}\n\n\t&:focus {\n\t\tbackground-color: $ontario-colour-back-to-top-background;\n\t\tbox-shadow:\n\t\t\t0 0 0 globalFunctions.px-to-rem(4) colours.$ontario-colour-focus,\n\t\t\t0 globalFunctions.px-to-rem(3) globalFunctions.px-to-rem(5) globalFunctions.px-to-rem(3) rgba(0, 0, 0, 0.6);\n\t\toutline: globalFunctions.px-to-rem(4) solid transparent;\n\t\ttransition: 0.1s ease-in-out;\n\t}\n\n\t&:active {\n\t\tbackground-color: $ontario-colour-back-to-top--active-background;\n\t\tbox-shadow:\n\t\t\t0 0 0 globalFunctions.px-to-rem(4) colours.$ontario-colour-focus,\n\t\t\t0 globalFunctions.px-to-rem(5) globalFunctions.px-to-rem(7) globalFunctions.px-to-rem(3) rgba(0, 0, 0, 0.6);\n\t\toutline: globalFunctions.px-to-rem(4) solid transparent;\n\t\ttransition:\n\t\t\tbackground-color 0s,\n\t\t\tfocusPlaceholders.$ontario-focus-transition;\n\t}\n\n\t@media screen and (max-width: breakpoints.$medium-breakpoint) {\n\t\tflex-direction: column;\n\t\theight: globalFunctions.px-to-rem(76);\n\t\tpadding: globalFunctions.px-to-rem(6) spacing.$spacing-3 globalFunctions.px-to-rem(9) spacing.$spacing-3;\n\n\t\t.ontario-icon {\n\t\t\tmargin: globalFunctions.px-to-rem(1) spacing.$spacing-0 spacing.$spacing-1 spacing.$spacing-0;\n\t\t\twidth: globalFunctions.px-to-rem(32);\n\t\t\theight: globalFunctions.px-to-rem(32);\n\t\t}\n\t}\n\n\t@media screen and (max-width: breakpoints.$small-breakpoint) {\n\t\tdisplay: block;\n\t\tpadding: spacing.$spacing-1;\n\t\tfont-size: 0;\n\t\twidth: globalFunctions.px-to-rem(48);\n\t\theight: globalFunctions.px-to-rem(48);\n\n\t\tspan {\n\t\t\tdisplay: block;\n\t\t}\n\n\t\t.ontario-icon {\n\t\t\tmargin: math.div(spacing.$spacing-1, 2) spacing.$spacing-0 spacing.$spacing-0 spacing.$spacing-0;\n\n\t\t\t@-moz-document url-prefix() {\n\t\t\t\tmargin-top: $ontario-icon-margin-top;\n\t\t\t}\n\t\t}\n\t}\n\n\t&.active {\n\t\tvisibility: visible;\n\t\topacity: 1;\n\t}\n}\n","import { Component, h, Element, Prop, Listen, State } from '@stencil/core';\n\nimport OntarioIconArrowUp from '../ontario-icon/assets/ontario-icon-arrow-up.svg';\nimport { Language } from '../../utils/common/language-types';\nimport { validateLanguage } from '../../utils/validation/validation-functions';\n\nimport translations from '../../translations/global.i18n.json';\nimport { isClientSideRendering } from '../../utils/common/environment';\nimport { HeaderLanguageToggleEventDetails } from '../../utils/events/common-events.interface';\n\n/**\n * Ontario Back to Top helps users quickly return to the top of long pages.\n *\n * For component guidance, see:\n * - https://designsystem.ontario.ca/components/detail/back-to-top.html\n * - https://designsystem.ontario.ca/developer-docs/components/ontario-back-to-top/\n */\n@Component({\n\ttag: 'ontario-back-to-top',\n\tstyleUrl: 'ontario-back-to-top.scss',\n\tshadow: true,\n})\nexport class OntarioBackToTop {\n\t@Element() element: HTMLElement;\n\n\t/**\n\t * The language of the component.\n\t * This is used for translations, and is by default set through event listeners checking for a language property from the header. If no language prop is passed, it will default to English.\n\t */\n\t@Prop({ mutable: true }) language?: Language;\n\n\t@State() translations: any = translations;\n\n\t@State() private displayBackToTop: boolean = false;\n\n\t@State() private scrollYValue: number = 200;\n\n\t/**\n\t * This listens for the window Y scroll value to be above 200 pixels. Once it is, the Back to Top button will toggle the `displayBackToTop` state which will set an active class to control the components' visibility.\n\t */\n\t@Listen('scroll', { target: 'window' })\n\tshowBackToTopButton() {\n\t\tif (isClientSideRendering()) {\n\t\t\tthis.displayBackToTop = window.scrollY > this.scrollYValue;\n\t\t}\n\t}\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/**\n\t * Handles an update to the language should the user request a language update from the language toggle.\n\t * @param {CustomEvent} - The language that has been selected.\n\t */\n\t@Listen('headerLanguageToggled', { target: 'window' })\n\thandleHeaderLanguageToggled(event: CustomEvent<HeaderLanguageToggleEventDetails>) {\n\t\tthis.language = validateLanguage(event.detail.newLanguage);\n\t}\n\t/**\n\t * Scroll to top functionality when the Back to Top button is clicked\n\t */\n\tprivate scrollToTop() {\n\t\tif (isClientSideRendering()) {\n\t\t\twindow.scrollTo({ top: 0, left: 0, behavior: 'smooth' });\n\t\t}\n\t}\n\n\tcomponentWillLoad() {\n\t\tthis.language = validateLanguage(this.language);\n\t}\n\n\trender() {\n\t\treturn (\n\t\t\t<button\n\t\t\t\tclass={this.displayBackToTop ? `ontario-back-to-top active` : `ontario-back-to-top`}\n\t\t\t\tonClick={this.scrollToTop}\n\t\t\t\taria-label={this.translations.backToTop.ariaLabel[`${this.language}`]}\n\t\t\t>\n\t\t\t\t<span aria-hidden=\"true\" innerHTML={OntarioIconArrowUp}></span>\n\t\t\t\t{this.translations.backToTop.top[`${this.language}`]}\n\t\t\t</button>\n\t\t);\n\t}\n}\n"],"version":3}

package/components/ontario-badge.js

@@ -1,4 +1,4 @@
-import { O as OntarioBadge$1, d as defineCustomElement$1 } from './p-B9L7blax.js';
+import { O as OntarioBadge$1, d as defineCustomElement$1 } from './p-B5IpRx1m.js';
 
 const OntarioBadge = OntarioBadge$1;
 const defineCustomElement = defineCustomElement$1;

package/components/ontario-blockquote.js

@@ -72,20 +72,20 @@ const OntarioBlockquote$1 = /*@__PURE__*/ proxyCustomElement(
 			return h(
 				'blockquote',
 				{
-					key: 'd61a06f46cdda3c01d3de4df119cff2c003e3431',
+					key: '89cdac31dcd2d13cead2a16dcac7e1c39b187ec1',
 					class: this.shortQuote ? `ontario-blockquote ontario-blockquote--short` : `ontario-blockquote`,
 				},
-				h('p', { key: '3f1dd19b694ad312e3386788e5719614a4f574eb' }, this.quoteState),
+				h('p', { key: 'f67fa72f93a8db5359eb9a959787bc21705d849d' }, this.quoteState),
 				this.attribution &&
 					h(
 						'cite',
-						{ key: '2d05950682b2eb288b58c8dc50f18aa00189b5b7', class: 'ontario-blockquote__attribution' },
+						{ key: 'a264983b9b5e179fd6dca9aaddafd7578c31adb2', class: 'ontario-blockquote__attribution' },
 						this.attribution,
 					),
 				this.byline &&
 					h(
 						'cite',
-						{ key: '8a14d547450f556a5c1d64324a7767c7910748e5', class: 'ontario-blockquote__byline' },
+						{ key: '2f77be83d292dca5fb6fb87007755b2c63c6fcf1', class: 'ontario-blockquote__byline' },
 						this.byline,
 					),
 			);

package/components/ontario-blockquote.js.map

@@ -1 +1 @@
-{"file":"ontario-blockquote.js","mappings":";;;;;AAAA,MAAM,oBAAoB,GAAG,uuCAAuuC;;MCavvCA,mBAAiB,iBAAAC,kBAAA,CAAA,MAAA,iBAAA,SAAAC,CAAA,CAAA;AAL9B,IAAA,WAAA,GAAA;;;;AAyBU,QAAA,IAAgB,CAAA,gBAAA,GAAW,GAAG;AAE9B,QAAA,IAAU,CAAA,UAAA,GAAY,KAAK;AAoEpC;AAhEA;;;;;AAKG;IAEH,aAAa,GAAA;;QACZ,IAAI,qBAAqB,EAAE,EAAE;;YAE5B,IAAI,CAAC,UAAU,GAAG,CAAA,EAAA,GAAA,IAAI,CAAC,KAAK,MAAI,IAAA,IAAA,EAAA,KAAA,MAAA,GAAA,EAAA,GAAA,EAAE;;aAC5B;YACN,IAAI,CAAC,UAAU,GAAG,CAAA,EAAA,GAAA,CAAA,EAAA,GAAA,IAAI,CAAC,KAAK,MAAI,IAAA,IAAA,EAAA,KAAA,MAAA,GAAA,EAAA,GAAA,IAAI,CAAC,IAAI,CAAC,WAAW,MAAA,IAAA,IAAA,EAAA,KAAA,MAAA,GAAA,EAAA,GAAI,EAAE;;AAG5D,QAAA,IAAI,CAAC,oBAAoB,CAAC,IAAI,CAAC,UAAU,CAAC;AAC1C,QAAA,IAAI,CAAC,UAAU,GAAG,CAAA,MAAA,IAAI,CAAC,UAAU,MAAA,IAAA,IAAA,EAAA,KAAA,MAAA,GAAA,MAAA,GAAA,EAAA,CAAE,MAAM,KAAI,IAAI,CAAC,gBAAgB;;AAGnE;;AAEG;AACH,IAAA,oBAAoB,CAAC,QAAgB,EAAA;AACpC,QAAA,IAAI,kBAAkB,CAAC,QAAQ,CAAC,EAAE;AACjC,YAAA,MAAM,OAAO,GAAG,IAAI,mBAAmB,EAAE;YACzC;AACE,iBAAA,kBAAkB;iBAClB,gBAAgB,CAAC,SAAS;iBAC1B,cAAc,CAAC,KAAK;iBACpB,gBAAgB,CAAC,wBAAwB;iBACzC,cAAc,CAAC,kBAAkB;AACjC,iBAAA,YAAY,EAAE;;;IAIlB,iBAAiB,GAAA;QAChB,IAAI,CAAC,aAAa,EAAE;;AAGrB;;AAEG;IACH,gBAAgB,GAAA;QACf,MAAM,QAAQ,GAAG,IAAI,gBAAgB,CAAC,CAAC,SAAS,KAAI;AACnD,YAAA,SAAS,CAAC,OAAO,CAAC,CAAC,QAAQ,KAAI;AAC9B,gBAAA,IAAI,QAAQ,CAAC,IAAI,KAAK,YAAY,EAAE;oBACnC,IAAI,CAAC,aAAa,EAAE;;AAEtB,aAAC,CAAC;AACH,SAAC,CAAC;AAEF,QAAA,MAAM,OAAO,GAAG,EAAE,UAAU,EAAE,IAAI,EAAE;QACpC,QAAQ,CAAC,OAAO,CAAC,IAAI,CAAC,IAAI,EAAE,OAAO,CAAC;;IAGrC,MAAM,GAAA;AACL,QAAA,QACC,CAAA,CAAA,YAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAY,KAAK,EAAE,IAAI,CAAC,UAAU,GAAG,CAA8C,4CAAA,CAAA,GAAG,oBAAoB,EAAA,EACzG,CAAI,CAAA,GAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,EAAA,IAAI,CAAC,UAAU,CAAK,EACvB,IAAI,CAAC,WAAW,IAAI,CAAM,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,iCAAiC,EAAE,EAAA,IAAI,CAAC,WAAW,CAAQ,EAC3F,IAAI,CAAC,MAAM,IAAI,CAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAM,KAAK,EAAC,4BAA4B,EAAE,EAAA,IAAI,CAAC,MAAM,CAAQ,CACjE;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["OntarioBlockquote","__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/ontario-blockquote/ontario-blockquote.scss?tag=ontario-blockquote&encapsulation=shadow","src/components/ontario-blockquote/ontario-blockquote.tsx"],"sourcesContent":["@use 'pkg:@ongov/ontario-design-system-global-styles/styles/scss/1-variables/global.variables' as globalVariables;\n@use 'pkg:@ongov/ontario-design-system-global-styles/styles/scss/1-variables/spacing.variables' as spacing;\n@use 'pkg:@ongov/ontario-design-system-global-styles/styles/scss/1-variables/colours.variables' as colours;\n@use 'pkg:@ongov/ontario-design-system-global-styles/styles/scss/1-variables/breakpoints.variables' as breakpoints;\n@use 'pkg:@ongov/ontario-design-system-global-styles/styles/scss/1-variables/fonts.variables' as fonts;\n@use 'pkg:@ongov/ontario-design-system-global-styles/styles/scss/1-variables/line-heights.variables' as lineHeights;\n@use 'pkg:@ongov/ontario-design-system-global-styles/styles/scss/1-variables/font-weights.variables' as fontWeights;\n@use 'pkg:@ongov/ontario-design-system-global-styles/styles/scss/2-tools/functions/global.functions' as globalFunctions;\n\n.ontario-blockquote {\n\tborder-left: 4px solid colours.$ontario-greyscale-70;\n\tfont-family: fonts.$ontario-font-raleway-modified;\n\tfont-size: globalFunctions.px-to-rem(19);\n\tfont-weight: fontWeights.$ontario-font-weights-normal;\n\tletter-spacing: 0.025rem;\n\tline-height: lineHeights.$ontario-line-height-8;\n\tmax-width: globalVariables.$standard-width;\n\tmargin: spacing.$spacing-6;\n\tpadding: spacing.$spacing-5 0 spacing.$spacing-5 spacing.$spacing-5;\n\tquotes: '\\201C' '\\201D';\n\n\t@media screen and (max-width: breakpoints.$small-breakpoint) {\n\t\tfont-size: globalFunctions.px-to-rem(18);\n\t\tletter-spacing: 0.03rem;\n\t\tline-height: lineHeights.$ontario-line-height-7;\n\t\tmargin: spacing.$spacing-5 spacing.$spacing-0 spacing.$spacing-6 spacing.$spacing-0;\n\t}\n}\n\n.ontario-blockquote p {\n\tmargin: spacing.$spacing-0 spacing.$spacing-0 spacing.$spacing-5 spacing.$spacing-0;\n\n\t&::before {\n\t\tcontent: open-quote;\n\t}\n\n\t&::after {\n\t\tcontent: close-quote;\n\t}\n}\n\n.ontario-blockquote--short {\n\tfont-size: globalFunctions.px-to-rem(28);\n\tletter-spacing: 0.02rem;\n\tline-height: lineHeights.$ontario-line-height-7;\n\n\t@media screen and (max-width: breakpoints.$small-breakpoint) {\n\t\tfont-size: globalFunctions.px-to-rem(23);\n\t\tline-height: lineHeights.$ontario-line-height-6;\n\t}\n}\n\n.ontario-blockquote__attribution,\n.ontario-blockquote__byline {\n\tdisplay: block;\n\tfont-size: globalFunctions.px-to-rem(16);\n\tletter-spacing: 0.025rem;\n\tline-height: lineHeights.$ontario-line-height-8;\n\ttext-align: right;\n\n\t@media screen and (max-width: breakpoints.$small-breakpoint) {\n\t\tletter-spacing: 0.03rem;\n\t\tline-height: lineHeights.$ontario-line-height-7;\n\t}\n}\n\n.ontario-blockquote__attribution {\n\tfont-style: normal;\n\tfont-weight: fontWeights.$ontario-font-weights-bold;\n\n\t&::before {\n\t\tcontent: '\\2014 \\0020';\n\t}\n}\n\nhtml[lang='fr'] blockquote {\n\tquotes: '« ' ' »';\n}\n","import { Component, h, Element, Prop, State, Watch } from '@stencil/core';\n\nimport { Blockquote } from './blockquote.interface';\n\nimport { validatePropExists } from '../../utils/validation/validation-functions';\nimport { ConsoleMessageClass } from '../../utils/console-message/console-message';\nimport { isServerSideRendering } from '../../utils/common/environment';\n\n@Component({\n\ttag: 'ontario-blockquote',\n\tstyleUrl: 'ontario-blockquote.scss',\n\tshadow: true,\n})\nexport class OntarioBlockquote implements Blockquote {\n\t@Element() host: HTMLElement;\n\n\t/**\n\t * Text to be displayed as the quote.\n\t *\n\t * Note that wrapping the quotes in quotations is not needed - this is handled through the component styles\n\t */\n\t@Prop({ mutable: true }) quote: string;\n\n\t/**\n\t * Optional text to be displayed as the attribution (the author) of the quote.\n\t */\n\t@Prop() attribution?: string;\n\n\t/**\n\t * Optional text to be displayed for additional information about the attribution/author.\n\t */\n\t@Prop() byline?: string;\n\n\t@State() shortQuoteLength: number = 140;\n\n\t@State() shortQuote: boolean = false;\n\n\t@State() private quoteState: string;\n\n\t/*\n\t * Watch for changes in the `quote` prop for validation purposes.\n\t *\n\t * If the `quote` prop is not provided, set the `quote` prop to the host textContent (if it exists).\n\t * If the `quote` prop length is 140 characters or less, set the `shortQuote` state to true - this will add additonal classes for the blockquote styles.\n\t */\n\t@Watch('quote')\n\tvalidateQuote() {\n\t\tif (isServerSideRendering()) {\n\t\t\t// Ensure host and its textContent are defined and accessible (safe for SSR environments)\n\t\t\tthis.quoteState = this.quote ?? '';\n\t\t} else {\n\t\t\tthis.quoteState = this.quote ?? this.host.textContent ?? '';\n\t\t}\n\n\t\tthis.validateQuoteContent(this.quoteState);\n\t\tthis.shortQuote = this.quoteState?.length <= this.shortQuoteLength;\n\t}\n\n\t/**\n\t * Print the missing `quote` prop warning message\n\t */\n\tvalidateQuoteContent(newValue: string) {\n\t\tif (validatePropExists(newValue)) {\n\t\t\tconst message = new ConsoleMessageClass();\n\t\t\tmessage\n\t\t\t\t.addDesignSystemTag()\n\t\t\t\t.addMonospaceText(' quote ')\n\t\t\t\t.addRegularText('for')\n\t\t\t\t.addMonospaceText(' <ontario-blockquote> ')\n\t\t\t\t.addRegularText('was not provided')\n\t\t\t\t.printMessage();\n\t\t}\n\t}\n\n\tcomponentWillLoad() {\n\t\tthis.validateQuote();\n\t}\n\n\t/**\n\t * This helper is used to help load translations for any slots + text content passed in by the user.\n\t */\n\tcomponentDidLoad() {\n\t\tconst observer = new MutationObserver((mutations) => {\n\t\t\tmutations.forEach((mutation) => {\n\t\t\t\tif (mutation.type === 'attributes') {\n\t\t\t\t\tthis.validateQuote();\n\t\t\t\t}\n\t\t\t});\n\t\t});\n\n\t\tconst options = { attributes: true };\n\t\tobserver.observe(this.host, options);\n\t}\n\n\trender() {\n\t\treturn (\n\t\t\t<blockquote class={this.shortQuote ? `ontario-blockquote ontario-blockquote--short` : `ontario-blockquote`}>\n\t\t\t\t<p>{this.quoteState}</p>\n\t\t\t\t{this.attribution && <cite class=\"ontario-blockquote__attribution\">{this.attribution}</cite>}\n\t\t\t\t{this.byline && <cite class=\"ontario-blockquote__byline\">{this.byline}</cite>}\n\t\t\t</blockquote>\n\t\t);\n\t}\n}\n"],"version":3}
+{"file":"ontario-blockquote.js","mappings":";;;;;AAAA,MAAM,oBAAoB,GAAG,uuCAAuuC;;MCoBvvCA,mBAAiB,iBAAAC,kBAAA,CAAA,MAAA,iBAAA,SAAAC,CAAA,CAAA;AAL9B,IAAA,WAAA,GAAA;;;;AAyBU,QAAA,IAAgB,CAAA,gBAAA,GAAW,GAAG;AAE9B,QAAA,IAAU,CAAA,UAAA,GAAY,KAAK;AAoEpC;AAhEA;;;;;AAKG;IAEH,aAAa,GAAA;;QACZ,IAAI,qBAAqB,EAAE,EAAE;;YAE5B,IAAI,CAAC,UAAU,GAAG,CAAA,EAAA,GAAA,IAAI,CAAC,KAAK,MAAI,IAAA,IAAA,EAAA,KAAA,MAAA,GAAA,EAAA,GAAA,EAAE;;aAC5B;YACN,IAAI,CAAC,UAAU,GAAG,CAAA,EAAA,GAAA,CAAA,EAAA,GAAA,IAAI,CAAC,KAAK,MAAI,IAAA,IAAA,EAAA,KAAA,MAAA,GAAA,EAAA,GAAA,IAAI,CAAC,IAAI,CAAC,WAAW,MAAA,IAAA,IAAA,EAAA,KAAA,MAAA,GAAA,EAAA,GAAI,EAAE;;AAG5D,QAAA,IAAI,CAAC,oBAAoB,CAAC,IAAI,CAAC,UAAU,CAAC;AAC1C,QAAA,IAAI,CAAC,UAAU,GAAG,CAAA,MAAA,IAAI,CAAC,UAAU,MAAA,IAAA,IAAA,EAAA,KAAA,MAAA,GAAA,MAAA,GAAA,EAAA,CAAE,MAAM,KAAI,IAAI,CAAC,gBAAgB;;AAGnE;;AAEG;AACH,IAAA,oBAAoB,CAAC,QAAgB,EAAA;AACpC,QAAA,IAAI,kBAAkB,CAAC,QAAQ,CAAC,EAAE;AACjC,YAAA,MAAM,OAAO,GAAG,IAAI,mBAAmB,EAAE;YACzC;AACE,iBAAA,kBAAkB;iBAClB,gBAAgB,CAAC,SAAS;iBAC1B,cAAc,CAAC,KAAK;iBACpB,gBAAgB,CAAC,wBAAwB;iBACzC,cAAc,CAAC,kBAAkB;AACjC,iBAAA,YAAY,EAAE;;;IAIlB,iBAAiB,GAAA;QAChB,IAAI,CAAC,aAAa,EAAE;;AAGrB;;AAEG;IACH,gBAAgB,GAAA;QACf,MAAM,QAAQ,GAAG,IAAI,gBAAgB,CAAC,CAAC,SAAS,KAAI;AACnD,YAAA,SAAS,CAAC,OAAO,CAAC,CAAC,QAAQ,KAAI;AAC9B,gBAAA,IAAI,QAAQ,CAAC,IAAI,KAAK,YAAY,EAAE;oBACnC,IAAI,CAAC,aAAa,EAAE;;AAEtB,aAAC,CAAC;AACH,SAAC,CAAC;AAEF,QAAA,MAAM,OAAO,GAAG,EAAE,UAAU,EAAE,IAAI,EAAE;QACpC,QAAQ,CAAC,OAAO,CAAC,IAAI,CAAC,IAAI,EAAE,OAAO,CAAC;;IAGrC,MAAM,GAAA;AACL,QAAA,QACC,CAAA,CAAA,YAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAY,KAAK,EAAE,IAAI,CAAC,UAAU,GAAG,CAA8C,4CAAA,CAAA,GAAG,oBAAoB,EAAA,EACzG,CAAI,CAAA,GAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,EAAA,IAAI,CAAC,UAAU,CAAK,EACvB,IAAI,CAAC,WAAW,IAAI,CAAM,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,iCAAiC,EAAE,EAAA,IAAI,CAAC,WAAW,CAAQ,EAC3F,IAAI,CAAC,MAAM,IAAI,CAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAM,KAAK,EAAC,4BAA4B,EAAE,EAAA,IAAI,CAAC,MAAM,CAAQ,CACjE;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["OntarioBlockquote","__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/ontario-blockquote/ontario-blockquote.scss?tag=ontario-blockquote&encapsulation=shadow","src/components/ontario-blockquote/ontario-blockquote.tsx"],"sourcesContent":["@use 'pkg:@ongov/ontario-design-system-global-styles/styles/scss/1-variables/global.variables' as globalVariables;\n@use 'pkg:@ongov/ontario-design-system-global-styles/styles/scss/1-variables/spacing.variables' as spacing;\n@use 'pkg:@ongov/ontario-design-system-global-styles/styles/scss/1-variables/colours.variables' as colours;\n@use 'pkg:@ongov/ontario-design-system-global-styles/styles/scss/1-variables/breakpoints.variables' as breakpoints;\n@use 'pkg:@ongov/ontario-design-system-global-styles/styles/scss/1-variables/fonts.variables' as fonts;\n@use 'pkg:@ongov/ontario-design-system-global-styles/styles/scss/1-variables/line-heights.variables' as lineHeights;\n@use 'pkg:@ongov/ontario-design-system-global-styles/styles/scss/1-variables/font-weights.variables' as fontWeights;\n@use 'pkg:@ongov/ontario-design-system-global-styles/styles/scss/2-tools/functions/global.functions' as globalFunctions;\n\n.ontario-blockquote {\n\tborder-left: 4px solid colours.$ontario-greyscale-70;\n\tfont-family: fonts.$ontario-font-raleway-modified;\n\tfont-size: globalFunctions.px-to-rem(19);\n\tfont-weight: fontWeights.$ontario-font-weights-normal;\n\tletter-spacing: 0.025rem;\n\tline-height: lineHeights.$ontario-line-height-8;\n\tmax-width: globalVariables.$standard-width;\n\tmargin: spacing.$spacing-6;\n\tpadding: spacing.$spacing-5 0 spacing.$spacing-5 spacing.$spacing-5;\n\tquotes: '\\201C' '\\201D';\n\n\t@media screen and (max-width: breakpoints.$small-breakpoint) {\n\t\tfont-size: globalFunctions.px-to-rem(18);\n\t\tletter-spacing: 0.03rem;\n\t\tline-height: lineHeights.$ontario-line-height-7;\n\t\tmargin: spacing.$spacing-5 spacing.$spacing-0 spacing.$spacing-6 spacing.$spacing-0;\n\t}\n}\n\n.ontario-blockquote p {\n\tmargin: spacing.$spacing-0 spacing.$spacing-0 spacing.$spacing-5 spacing.$spacing-0;\n\n\t&::before {\n\t\tcontent: open-quote;\n\t}\n\n\t&::after {\n\t\tcontent: close-quote;\n\t}\n}\n\n.ontario-blockquote--short {\n\tfont-size: globalFunctions.px-to-rem(28);\n\tletter-spacing: 0.02rem;\n\tline-height: lineHeights.$ontario-line-height-7;\n\n\t@media screen and (max-width: breakpoints.$small-breakpoint) {\n\t\tfont-size: globalFunctions.px-to-rem(23);\n\t\tline-height: lineHeights.$ontario-line-height-6;\n\t}\n}\n\n.ontario-blockquote__attribution,\n.ontario-blockquote__byline {\n\tdisplay: block;\n\tfont-size: globalFunctions.px-to-rem(16);\n\tletter-spacing: 0.025rem;\n\tline-height: lineHeights.$ontario-line-height-8;\n\ttext-align: right;\n\n\t@media screen and (max-width: breakpoints.$small-breakpoint) {\n\t\tletter-spacing: 0.03rem;\n\t\tline-height: lineHeights.$ontario-line-height-7;\n\t}\n}\n\n.ontario-blockquote__attribution {\n\tfont-style: normal;\n\tfont-weight: fontWeights.$ontario-font-weights-bold;\n\n\t&::before {\n\t\tcontent: '\\2014 \\0020';\n\t}\n}\n\nhtml[lang='fr'] blockquote {\n\tquotes: '« ' ' »';\n}\n","import { Component, h, Element, Prop, State, Watch } from '@stencil/core';\n\nimport { Blockquote } from './blockquote.interface';\n\nimport { validatePropExists } from '../../utils/validation/validation-functions';\nimport { ConsoleMessageClass } from '../../utils/console-message/console-message';\nimport { isServerSideRendering } from '../../utils/common/environment';\n\n/**\n * Ontario Blockquote displays quoted content with optional attribution.\n *\n * For component guidance, see:\n * - https://designsystem.ontario.ca/components/detail/blockquote.html\n * - https://designsystem.ontario.ca/developer-docs/components/ontario-blockquote/\n */\n@Component({\n\ttag: 'ontario-blockquote',\n\tstyleUrl: 'ontario-blockquote.scss',\n\tshadow: true,\n})\nexport class OntarioBlockquote implements Blockquote {\n\t@Element() host: HTMLElement;\n\n\t/**\n\t * Text to be displayed as the quote.\n\t *\n\t * Note that wrapping the quotes in quotations is not needed - this is handled through the component styles\n\t */\n\t@Prop({ mutable: true }) quote: string;\n\n\t/**\n\t * Optional text to be displayed as the attribution (the author) of the quote.\n\t */\n\t@Prop() attribution?: string;\n\n\t/**\n\t * Optional text to be displayed for additional information about the attribution/author.\n\t */\n\t@Prop() byline?: string;\n\n\t@State() shortQuoteLength: number = 140;\n\n\t@State() shortQuote: boolean = false;\n\n\t@State() private quoteState: string;\n\n\t/*\n\t * Watch for changes in the `quote` prop for validation purposes.\n\t *\n\t * If the `quote` prop is not provided, set the `quote` prop to the host textContent (if it exists).\n\t * If the `quote` prop length is 140 characters or less, set the `shortQuote` state to true - this will add additonal classes for the blockquote styles.\n\t */\n\t@Watch('quote')\n\tvalidateQuote() {\n\t\tif (isServerSideRendering()) {\n\t\t\t// Ensure host and its textContent are defined and accessible (safe for SSR environments)\n\t\t\tthis.quoteState = this.quote ?? '';\n\t\t} else {\n\t\t\tthis.quoteState = this.quote ?? this.host.textContent ?? '';\n\t\t}\n\n\t\tthis.validateQuoteContent(this.quoteState);\n\t\tthis.shortQuote = this.quoteState?.length <= this.shortQuoteLength;\n\t}\n\n\t/**\n\t * Print the missing `quote` prop warning message\n\t */\n\tvalidateQuoteContent(newValue: string) {\n\t\tif (validatePropExists(newValue)) {\n\t\t\tconst message = new ConsoleMessageClass();\n\t\t\tmessage\n\t\t\t\t.addDesignSystemTag()\n\t\t\t\t.addMonospaceText(' quote ')\n\t\t\t\t.addRegularText('for')\n\t\t\t\t.addMonospaceText(' <ontario-blockquote> ')\n\t\t\t\t.addRegularText('was not provided')\n\t\t\t\t.printMessage();\n\t\t}\n\t}\n\n\tcomponentWillLoad() {\n\t\tthis.validateQuote();\n\t}\n\n\t/**\n\t * This helper is used to help load translations for any slots + text content passed in by the user.\n\t */\n\tcomponentDidLoad() {\n\t\tconst observer = new MutationObserver((mutations) => {\n\t\t\tmutations.forEach((mutation) => {\n\t\t\t\tif (mutation.type === 'attributes') {\n\t\t\t\t\tthis.validateQuote();\n\t\t\t\t}\n\t\t\t});\n\t\t});\n\n\t\tconst options = { attributes: true };\n\t\tobserver.observe(this.host, options);\n\t}\n\n\trender() {\n\t\treturn (\n\t\t\t<blockquote class={this.shortQuote ? `ontario-blockquote ontario-blockquote--short` : `ontario-blockquote`}>\n\t\t\t\t<p>{this.quoteState}</p>\n\t\t\t\t{this.attribution && <cite class=\"ontario-blockquote__attribution\">{this.attribution}</cite>}\n\t\t\t\t{this.byline && <cite class=\"ontario-blockquote__byline\">{this.byline}</cite>}\n\t\t\t</blockquote>\n\t\t);\n\t}\n}\n"],"version":3}

package/components/ontario-button.js

@@ -25,9 +25,12 @@ const OntarioButton$1 = /*@__PURE__*/ proxyCustomElement(
 			/**
 			 * The native HTML button type the button should use.
 			 *
-			 * If no htmlType is passed, it will default to 'button'.
+			 * If no `htmlType` is passed, it will default to `'button'`.
+			 * This prop only affects the component when it renders as a native `<button>`.
+			 * If `href` is provided, the component renders as a native `<a>` and `htmlType` is ignored.
 			 */
 			this.htmlType = 'button';
+			this.hasWarnedLinkHtmlTypeConflict = false;
 		}
 		/*
 		 * Watch for changes to the `label` property for validation purposes.
@@ -126,6 +129,25 @@ const OntarioButton$1 = /*@__PURE__*/ proxyCustomElement(
 		getClass() {
 			return `ontario-button ontario-button--${this.typeState}`;
 		}
+		isLinkMode() {
+			return !!this.href;
+		}
+		warnIgnoredHtmlTypeInLinkMode() {
+			if (this.hasWarnedLinkHtmlTypeConflict || !this.isLinkMode() || this.htmlTypeState === 'button') {
+				return;
+			}
+			const message = new ConsoleMessageClass();
+			message
+				.addDesignSystemTag()
+				.addMonospaceText(' htmlType ')
+				.addRegularText('on')
+				.addMonospaceText(' <ontario-button> ')
+				.addRegularText('is ignored when')
+				.addMonospaceText(' href ')
+				.addRegularText('is provided. The component renders as a native link instead.')
+				.printMessage();
+			this.hasWarnedLinkHtmlTypeConflict = true;
+		}
 		getId() {
 			var _a;
 			return (_a = this.elementId) !== null && _a !== void 0 ? _a : '';
@@ -140,6 +162,9 @@ const OntarioButton$1 = /*@__PURE__*/ proxyCustomElement(
 			this.validateType();
 			this.ariaLabelText = (_a = this.ariaLabelText) !== null && _a !== void 0 ? _a : this.labelState;
 		}
+		componentWillRender() {
+			this.warnIgnoredHtmlTypeInLinkMode();
+		}
 		componentDidLoad() {
 			// Used to help load translations for any slots + text content passed in by the user.
 			const observer = new MutationObserver((mutations) => {
@@ -152,7 +177,7 @@ const OntarioButton$1 = /*@__PURE__*/ proxyCustomElement(
 			const options = { attributes: true };
 			observer.observe(this.host, options);
 			// Add a click event listener to handle submitting a form
-			if (this.htmlTypeState === 'submit') {
+			if (!this.isLinkMode() && this.htmlTypeState === 'submit') {
 				this.buttonRef.addEventListener('click', () => {
 					const { form } = this.internals;
 					form === null || form === void 0 ? void 0 : form.requestSubmit();
@@ -160,10 +185,23 @@ const OntarioButton$1 = /*@__PURE__*/ proxyCustomElement(
 			}
 		}
 		render() {
+			if (this.isLinkMode()) {
+				return h(
+					'a',
+					{
+						'href': this.href,
+						'target': this.target,
+						'rel': this.rel,
+						'class': this.getClass(),
+						'aria-label': this.ariaLabelText,
+						'id': this.getId(),
+					},
+					this.labelState,
+				);
+			}
 			return h(
 				'button',
 				{
-					'key': '2b24f84f2c57c08178ee8c6fd43a0b68d44ba578',
 					'ref': (el) => (this.buttonRef = el),
 					'type': this.htmlTypeState,
 					'class': this.getClass(),
@@ -196,6 +234,9 @@ const OntarioButton$1 = /*@__PURE__*/ proxyCustomElement(
 		{
 			type: [1],
 			htmlType: [1, 'html-type'],
+			href: [1],
+			target: [1],
+			rel: [1],
 			label: [1],
 			ariaLabelText: [1025, 'aria-label-text'],
 			elementId: [1025, 'element-id'],

package/components/ontario-button.js.map

@@ -1 +1 @@
-{"file":"ontario-button.js","mappings":"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","names":["OntarioButton","__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/ontario-button/ontario-button.types.ts","src/components/ontario-button/ontario-button.scss?tag=ontario-button&encapsulation=shadow","src/components/ontario-button/ontario-button.tsx"],"sourcesContent":["export const ButtonTypes = ['primary', 'secondary', 'tertiary', 'internalThemeDark'] as const;\nexport const HtmlTypes = ['button', 'reset', 'submit'] as const;\n\nexport type ButtonType = (typeof ButtonTypes)[number];\nexport type HtmlType = (typeof HtmlTypes)[number];\n","@use 'sass:math';\n@use 'pkg:@ongov/ontario-design-system-global-styles/styles/scss/1-variables/global.variables' as globalVariables;\n@use 'pkg:@ongov/ontario-design-system-global-styles/styles/scss/1-variables/spacing.variables' as spacing;\n@use 'pkg:@ongov/ontario-design-system-global-styles/styles/scss/1-variables/colours.variables' as colours;\n@use 'pkg:@ongov/ontario-design-system-global-styles/styles/scss/1-variables/breakpoints.variables' as breakpoints;\n@use 'pkg:@ongov/ontario-design-system-global-styles/styles/scss/1-variables/font-weights.variables' as fontWeights;\n@use 'pkg:@ongov/ontario-design-system-global-styles/styles/scss/1-variables/fonts.variables' as fonts;\n@use 'pkg:@ongov/ontario-design-system-global-styles/styles/scss/2-tools/placeholder/focus.placeholders' as placeholders;\n@use 'pkg:@ongov/ontario-design-system-global-styles/styles/scss/2-tools/placeholder/focus.placeholders' as\n\tfocusPlaceholders;\n\n$ontario-button-bg-primary: colours.$ontario-colour-link;\n$ontario-button-bg-primary--hover: colours.$ontario-colour-link--hover;\n$ontario-button-bg-primary--active: colours.$ontario-colour-link--active;\n$ontario-button-bg-secondary: colours.$ontario-colour-white;\n\n// Make the host box-level so its width/height/margins apply (was inline by default).\n// This also stabilizes VRT by giving the component predictable intrinsic sizing.\n:host {\n\tdisplay: inline-block;\n}\n\n.ontario-button {\n\tborder: none;\n\tborder-radius: globalVariables.$global-radius;\n\tbox-sizing: border-box;\n\tbox-shadow: none;\n\tdisplay: inline-block;\n\tfont-size: 1.125rem;\n\tfont-family: fonts.$ontario-font-open-sans;\n\tfont-weight: fontWeights.$ontario-font-weights-semi-bold;\n\tline-height: math.div(14, 9);\n\tmargin: spacing.$spacing-0;\n\tmin-width: 10rem;\n\tpadding: math.div((spacing.$spacing-4 + spacing.$spacing-1), 2) spacing.$spacing-5;\n\ttext-align: center;\n\ttext-decoration: none;\n\tcursor: pointer;\n\n\t&:focus,\n\t&:active {\n\t\t@extend %ontario-focus;\n\t}\n\n\t@media screen and (max-width: breakpoints.$small-breakpoint) {\n\t\tmargin-right: 0;\n\t\tdisplay: block;\n\t\twidth: 100%;\n\t}\n\n\t.ontario-icon {\n\t\tmargin-right: 4px;\n\t}\n}\n\n.ontario-button--primary {\n\tbackground-color: $ontario-button-bg-primary;\n\tcolor: colours.$ontario-colour-white;\n\n\t&:hover {\n\t\tbackground-color: $ontario-button-bg-primary--hover;\n\t\tcolor: colours.$ontario-colour-white;\n\t}\n\n\t&:focus {\n\t\tbackground-color: $ontario-button-bg-primary--hover;\n\t\tcolor: colours.$ontario-colour-white;\n\t\ttransition:\n\t\t\tbackground-color 0.2s ease-out,\n\t\t\tfocusPlaceholders.$ontario-focus-transition;\n\t}\n\n\t&:active {\n\t\tbackground-color: $ontario-button-bg-primary--active;\n\t\tcolor: colours.$ontario-colour-white;\n\t\ttransition:\n\t\t\tbackground-color 0s,\n\t\t\tfocusPlaceholders.$ontario-focus-transition;\n\t}\n\n\t&:visited {\n\t\tcolor: colours.$ontario-colour-white;\n\t}\n}\n\n.ontario-button--secondary {\n\tbackground-color: $ontario-button-bg-secondary;\n\tborder: globalVariables.$border-size-standard solid colours.$ontario-colour-link;\n\tcolor: colours.$ontario-colour-link;\n\tpadding-top: spacing.$spacing-2;\n\tpadding-bottom: spacing.$spacing-2;\n\n\t&:hover {\n\t\tbackground-color: colours.$ontario-colour-button-secondary--hover;\n\t\tborder-color: colours.$ontario-colour-link--hover;\n\t\tcolor: colours.$ontario-colour-link--hover;\n\t}\n\n\t&:focus {\n\t\tbackground-color: colours.$ontario-colour-button-secondary--hover;\n\t\tborder-color: colours.$ontario-colour-link--hover;\n\t\tcolor: colours.$ontario-colour-link--hover;\n\t\ttransition:\n\t\t\tbackground-color 0.2s ease-out,\n\t\t\tfocusPlaceholders.$ontario-focus-transition;\n\t}\n\n\t&:active {\n\t\tbackground-color: colours.$ontario-colour-button-secondary--active;\n\t\tborder-color: colours.$ontario-colour-link--active;\n\t\tcolor: colours.$ontario-colour-link--active;\n\t\ttransition:\n\t\t\tbackground-color 0s,\n\t\t\tfocusPlaceholders.$ontario-focus-transition;\n\t}\n\n\t&:visited {\n\t\tcolor: colours.$ontario-colour-link;\n\t}\n}\n\n.ontario-button--tertiary {\n\tbackground-color: transparent;\n\tcolor: colours.$ontario-colour-link;\n\ttext-decoration: underline;\n\n\t&:hover {\n\t\tbackground-color: colours.$ontario-colour-button-tertiary--hover;\n\t\tcolor: $ontario-button-bg-primary--hover;\n\t\ttext-decoration: underline;\n\t}\n\n\t&:focus {\n\t\tbackground-color: colours.$ontario-colour-button-tertiary--hover;\n\t\tcolor: colours.$ontario-colour-link--hover;\n\t\ttext-decoration: underline;\n\t\ttransition:\n\t\t\tbackground-color 0.2s ease-out,\n\t\t\tfocusPlaceholders.$ontario-focus-transition;\n\t}\n\n\t&:active {\n\t\tbackground-color: colours.$ontario-colour-button-tertiary--active;\n\t\tcolor: colours.$ontario-colour-link--active;\n\t\ttext-decoration: underline;\n\t\ttransition:\n\t\t\tbackground-color 0s,\n\t\t\tfocusPlaceholders.$ontario-focus-transition;\n\t}\n\n\t&:visited {\n\t\tcolor: colours.$ontario-colour-link;\n\t}\n}\n\n.ontario-button--internalThemeDark {\n\tbackground-color: colours.$ontario-colour-black;\n\tborder: globalVariables.$border-size-standard solid colours.$ontario-colour-white;\n\tcolor: colours.$ontario-colour-white;\n\n\t&:hover {\n\t\tbackground-color: colours.$ontario-greyscale-70;\n\t}\n\n\t&:focus {\n\t\tbackground-color: colours.$ontario-greyscale-70;\n\t\ttransition:\n\t\t\tbackground-color 0.2s ease-out,\n\t\t\tfocusPlaceholders.$ontario-focus-transition;\n\t}\n\n\t&:active {\n\t\tbackground-color: colours.$ontario-greyscale-70;\n\t\ttransition:\n\t\t\tbackground-color 0s,\n\t\t\tfocusPlaceholders.$ontario-focus-transition;\n\t}\n\n\t&:visited {\n\t\tcolor: colours.$ontario-colour-link;\n\t}\n}\n","import { Component, Prop, Element, h, Watch, State, AttachInternals } from '@stencil/core';\n\nimport { Button } from './button.interface';\nimport { ButtonType, ButtonTypes, HtmlType, HtmlTypes } from './ontario-button.types';\n\nimport { validatePropExists, validateValueAgainstArray } from '../../utils/validation/validation-functions';\nimport { ConsoleMessageClass } from '../../utils/console-message/console-message';\nimport { isServerSideRendering } from '../../utils/common/environment';\n\n@Component({\n\ttag: 'ontario-button',\n\tstyleUrl: 'ontario-button.scss',\n\tshadow: true,\n\tformAssociated: true,\n})\nexport class OntarioButton implements Button {\n\t@Element() host: HTMLElement;\n\t@AttachInternals() internals: ElementInternals;\n\n\t/**\n\t * The type of button to render.\n\t *\n\t * If no type is passed, it will default to 'secondary'.\n\t */\n\t@Prop() type: ButtonType = 'secondary';\n\n\t/**\n\t * The native HTML button type the button should use.\n\t *\n\t * If no htmlType is passed, it will default to 'button'.\n\t */\n\t@Prop() htmlType: HtmlType = 'button';\n\n\t/**\n\t * Text to be displayed within the button. This will override the text provided through the host element textContent.\n\t *\n\t * @example\n\t * <ontario-button label=\"Label Text\">Text</ontario-button>\n\t *\n\t * The resulting button will have the label `\"Label Text\"`.\n\t */\n\t@Prop() label?: string;\n\n\t/**\n\t * Provides more context as to what the button interaction is doing. This should only be used for accessibility purposes, if the button interaction requires more description than what the text provides.\n\t *\n\t *  This is optional.\n\t *\n\t * @example\n\t * <ontario-button aria-label-text=\"Click button to open map\">Open</ontario button>\n\t */\n\t@Prop({ mutable: true }) ariaLabelText?: string;\n\n\t/**\n\t * The unique identifier of the button. This is optional - if no ID is passed, one will be generated.\n\t */\n\t@Prop({ mutable: true }) elementId?: string;\n\n\t/**\n\t * Mutable variable, for internal use only.\n\t * Set the button's type depending on validation result.\n\t */\n\t@State() private typeState: string;\n\n\t/**\n\t * Mutable variable, for internal use only.\n\t * Set the native HTML button type depending on validation result.\n\t */\n\t@State() private htmlTypeState: string;\n\n\t@State() private labelState: string;\n\n\t/**\n\t * A reference to the internal button element.\n\t */\n\n\tprivate buttonRef: HTMLButtonElement;\n\n\t/*\n\t * Watch for changes to the `label` property for validation purposes.\n\t *\n\t * If  no `label` prop is provided, the `label` prop will be set to the host element textContent (if it exists).\n\t */\n\t@Watch('label')\n\tprivate updateLabelContent() {\n\t\tif (isServerSideRendering()) {\n\t\t\t// Ensure host and its textContent are defined and accessible (safe for SSR environments)\n\t\t\tthis.labelState = this.label ?? '';\n\t\t} else {\n\t\t\tthis.labelState = this.label ?? this.host.textContent ?? '';\n\t\t}\n\t\tthis.validateLabelContent(this.labelState);\n\t}\n\n\t/**\n\t * Watch for changes to the `type` property for validation purposes.\n\t *\n\t * If the user input doesn't match one of the array values then `type` will be set to its default (`secondary`).\n\t * If a match is found in one of the array values then `type` will be set to the matching array key value.\n\t */\n\t@Watch('type')\n\tvalidateType() {\n\t\tconst isValid = validateValueAgainstArray(this.type, ButtonTypes);\n\t\tthis.typeState = isValid ? this.type : this.warnDefaultType();\n\t}\n\n\t/**\n\t *  Watch for changes to the `htmlType` property for validation purposes.\n\t *\n\t * If the user input doesn't match one of the array values then `htmlType` will be set to its default (`submit`).\n\t * If a match is found in one of the array values then `htmlType` will be set to the matching array key value.\n\t */\n\t@Watch('htmlType')\n\tvalidateHtmlType() {\n\t\tconst isValid = validateValueAgainstArray(this.htmlType, HtmlTypes);\n\t\tthis.htmlTypeState = isValid ? this.htmlType : this.warnDefaultHtmlType();\n\t}\n\n\t/**\n\t * Print the missing `label` prop warning message\n\t */\n\tvalidateLabelContent(newValue: string) {\n\t\tif (validatePropExists(newValue)) {\n\t\t\tconst message = new ConsoleMessageClass();\n\t\t\tmessage\n\t\t\t\t.addDesignSystemTag()\n\t\t\t\t.addMonospaceText(' label ')\n\t\t\t\t.addRegularText('for')\n\t\t\t\t.addMonospaceText(' <ontario-button> ')\n\t\t\t\t.addRegularText('was not provided')\n\t\t\t\t.printMessage();\n\t\t}\n\t}\n\n\t/**\n\t * Print the invalid `type` prop warning message\n\t * @returns default type (secondary)\n\t */\n\tprivate warnDefaultType(): ButtonType {\n\t\tconst message = new ConsoleMessageClass();\n\t\tmessage\n\t\t\t.addDesignSystemTag()\n\t\t\t.addMonospaceText(' type ')\n\t\t\t.addRegularText('on')\n\t\t\t.addMonospaceText(' <ontario-button> ')\n\t\t\t.addRegularText('was set to an invalid type; only')\n\t\t\t.addMonospaceText(' primary, secondary, or tertiary ')\n\t\t\t.addRegularText('are supported. The default type')\n\t\t\t.addMonospaceText(' secondary ')\n\t\t\t.addRegularText('is assumed.')\n\t\t\t.printMessage();\n\t\treturn 'secondary';\n\t}\n\n\t/**\n\t * Print the invalid `htmlType` warning message\n\t * @returns default htmlType (button)\n\t */\n\tprivate warnDefaultHtmlType(): HtmlType {\n\t\tconst message = new ConsoleMessageClass();\n\t\tmessage\n\t\t\t.addDesignSystemTag()\n\t\t\t.addMonospaceText(' htmlType ')\n\t\t\t.addRegularText('on')\n\t\t\t.addMonospaceText(' <ontario-button> ')\n\t\t\t.addRegularText('was set to an invalid htmlType; only')\n\t\t\t.addMonospaceText(' button, reset, or submit ')\n\t\t\t.addRegularText('are supported. The default type')\n\t\t\t.addMonospaceText(' button ')\n\t\t\t.addRegularText('is assumed.')\n\t\t\t.printMessage();\n\t\treturn 'button';\n\t}\n\n\t/**\n\t * @returns the classes of the button based of the button's `type`.\n\t */\n\tprivate getClass() {\n\t\treturn `ontario-button ontario-button--${this.typeState}`;\n\t}\n\n\tpublic getId(): string {\n\t\treturn this.elementId ?? '';\n\t}\n\n\t/**\n\t * Set `buttonId`, `label`, and `ariaLabel` using internal component logic.\n\t */\n\tcomponentWillLoad() {\n\t\tthis.updateLabelContent();\n\t\tthis.validateHtmlType();\n\t\tthis.validateType();\n\t\tthis.ariaLabelText = this.ariaLabelText ?? this.labelState;\n\t}\n\n\tcomponentDidLoad() {\n\t\t// Used to help load translations for any slots + text content passed in by the user.\n\t\tconst observer = new MutationObserver((mutations) => {\n\t\t\tmutations.forEach((mutation) => {\n\t\t\t\tif (mutation.type === 'attributes') {\n\t\t\t\t\tthis.updateLabelContent();\n\t\t\t\t}\n\t\t\t});\n\t\t});\n\n\t\tconst options = { attributes: true };\n\t\tobserver.observe(this.host, options);\n\n\t\t// Add a click event listener to handle submitting a form\n\t\tif (this.htmlTypeState === 'submit') {\n\t\t\tthis.buttonRef.addEventListener('click', () => {\n\t\t\t\tconst { form } = this.internals;\n\t\t\t\tform?.requestSubmit();\n\t\t\t});\n\t\t}\n\t}\n\n\trender() {\n\t\treturn (\n\t\t\t<button\n\t\t\t\tref={(el) => (this.buttonRef = el as HTMLButtonElement)}\n\t\t\t\ttype={this.htmlTypeState}\n\t\t\t\tclass={this.getClass()}\n\t\t\t\taria-label={this.ariaLabelText}\n\t\t\t\tid={this.getId()}\n\t\t\t>\n\t\t\t\t{this.labelState}\n\t\t\t</button>\n\t\t);\n\t}\n}\n"],"version":3}
+{"file":"ontario-button.js","mappings":"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","names":["OntarioButton","__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/ontario-button/ontario-button.types.ts","src/components/ontario-button/ontario-button.scss?tag=ontario-button&encapsulation=shadow","src/components/ontario-button/ontario-button.tsx"],"sourcesContent":["export const ButtonTypes = ['primary', 'secondary', 'tertiary', 'internalThemeDark'] as const;\nexport const HtmlTypes = ['button', 'reset', 'submit'] as const;\n\nexport type ButtonType = (typeof ButtonTypes)[number];\nexport type HtmlType = (typeof HtmlTypes)[number];\n","@use 'sass:math';\n@use 'pkg:@ongov/ontario-design-system-global-styles/styles/scss/1-variables/global.variables' as globalVariables;\n@use 'pkg:@ongov/ontario-design-system-global-styles/styles/scss/1-variables/spacing.variables' as spacing;\n@use 'pkg:@ongov/ontario-design-system-global-styles/styles/scss/1-variables/colours.variables' as colours;\n@use 'pkg:@ongov/ontario-design-system-global-styles/styles/scss/1-variables/breakpoints.variables' as breakpoints;\n@use 'pkg:@ongov/ontario-design-system-global-styles/styles/scss/1-variables/font-weights.variables' as fontWeights;\n@use 'pkg:@ongov/ontario-design-system-global-styles/styles/scss/1-variables/fonts.variables' as fonts;\n@use 'pkg:@ongov/ontario-design-system-global-styles/styles/scss/2-tools/placeholder/focus.placeholders' as placeholders;\n@use 'pkg:@ongov/ontario-design-system-global-styles/styles/scss/2-tools/placeholder/focus.placeholders' as\n\tfocusPlaceholders;\n\n$ontario-button-bg-primary: colours.$ontario-colour-link;\n$ontario-button-bg-primary--hover: colours.$ontario-colour-link--hover;\n$ontario-button-bg-primary--active: colours.$ontario-colour-link--active;\n$ontario-button-bg-secondary: colours.$ontario-colour-white;\n\n// Make the host box-level so its width/height/margins apply (was inline by default).\n// This also stabilizes VRT by giving the component predictable intrinsic sizing.\n:host {\n\tdisplay: inline-block;\n}\n\n.ontario-button {\n\tborder: none;\n\tborder-radius: globalVariables.$global-radius;\n\tbox-sizing: border-box;\n\tbox-shadow: none;\n\tdisplay: inline-block;\n\tfont-size: 1.125rem;\n\tfont-family: fonts.$ontario-font-open-sans;\n\tfont-weight: fontWeights.$ontario-font-weights-semi-bold;\n\tline-height: math.div(14, 9);\n\tmargin: spacing.$spacing-0;\n\tmin-width: 10rem;\n\tpadding: math.div((spacing.$spacing-4 + spacing.$spacing-1), 2) spacing.$spacing-5;\n\ttext-align: center;\n\ttext-decoration: none;\n\tcursor: pointer;\n\n\t&:focus,\n\t&:active {\n\t\t@extend %ontario-focus;\n\t}\n\n\t@media screen and (max-width: breakpoints.$small-breakpoint) {\n\t\tmargin-right: 0;\n\t\tdisplay: block;\n\t\twidth: 100%;\n\t}\n\n\t.ontario-icon {\n\t\tmargin-right: 4px;\n\t}\n}\n\n.ontario-button--primary {\n\tbackground-color: $ontario-button-bg-primary;\n\tcolor: colours.$ontario-colour-white;\n\n\t&:hover {\n\t\tbackground-color: $ontario-button-bg-primary--hover;\n\t\tcolor: colours.$ontario-colour-white;\n\t}\n\n\t&:focus {\n\t\tbackground-color: $ontario-button-bg-primary--hover;\n\t\tcolor: colours.$ontario-colour-white;\n\t\ttransition:\n\t\t\tbackground-color 0.2s ease-out,\n\t\t\tfocusPlaceholders.$ontario-focus-transition;\n\t}\n\n\t&:active {\n\t\tbackground-color: $ontario-button-bg-primary--active;\n\t\tcolor: colours.$ontario-colour-white;\n\t\ttransition:\n\t\t\tbackground-color 0s,\n\t\t\tfocusPlaceholders.$ontario-focus-transition;\n\t}\n\n\t&:visited {\n\t\tcolor: colours.$ontario-colour-white;\n\t}\n}\n\n.ontario-button--secondary {\n\tbackground-color: $ontario-button-bg-secondary;\n\tborder: globalVariables.$border-size-standard solid colours.$ontario-colour-link;\n\tcolor: colours.$ontario-colour-link;\n\tpadding-top: spacing.$spacing-2;\n\tpadding-bottom: spacing.$spacing-2;\n\n\t&:hover {\n\t\tbackground-color: colours.$ontario-colour-button-secondary--hover;\n\t\tborder-color: colours.$ontario-colour-link--hover;\n\t\tcolor: colours.$ontario-colour-link--hover;\n\t}\n\n\t&:focus {\n\t\tbackground-color: colours.$ontario-colour-button-secondary--hover;\n\t\tborder-color: colours.$ontario-colour-link--hover;\n\t\tcolor: colours.$ontario-colour-link--hover;\n\t\ttransition:\n\t\t\tbackground-color 0.2s ease-out,\n\t\t\tfocusPlaceholders.$ontario-focus-transition;\n\t}\n\n\t&:active {\n\t\tbackground-color: colours.$ontario-colour-button-secondary--active;\n\t\tborder-color: colours.$ontario-colour-link--active;\n\t\tcolor: colours.$ontario-colour-link--active;\n\t\ttransition:\n\t\t\tbackground-color 0s,\n\t\t\tfocusPlaceholders.$ontario-focus-transition;\n\t}\n\n\t&:visited {\n\t\tcolor: colours.$ontario-colour-link;\n\t}\n}\n\n.ontario-button--tertiary {\n\tbackground-color: transparent;\n\tcolor: colours.$ontario-colour-link;\n\ttext-decoration: underline;\n\n\t&:hover {\n\t\tbackground-color: colours.$ontario-colour-button-tertiary--hover;\n\t\tcolor: $ontario-button-bg-primary--hover;\n\t\ttext-decoration: underline;\n\t}\n\n\t&:focus {\n\t\tbackground-color: colours.$ontario-colour-button-tertiary--hover;\n\t\tcolor: colours.$ontario-colour-link--hover;\n\t\ttext-decoration: underline;\n\t\ttransition:\n\t\t\tbackground-color 0.2s ease-out,\n\t\t\tfocusPlaceholders.$ontario-focus-transition;\n\t}\n\n\t&:active {\n\t\tbackground-color: colours.$ontario-colour-button-tertiary--active;\n\t\tcolor: colours.$ontario-colour-link--active;\n\t\ttext-decoration: underline;\n\t\ttransition:\n\t\t\tbackground-color 0s,\n\t\t\tfocusPlaceholders.$ontario-focus-transition;\n\t}\n\n\t&:visited {\n\t\tcolor: colours.$ontario-colour-link;\n\t}\n}\n\n.ontario-button--internalThemeDark {\n\tbackground-color: colours.$ontario-colour-black;\n\tborder: globalVariables.$border-size-standard solid colours.$ontario-colour-white;\n\tcolor: colours.$ontario-colour-white;\n\n\t&:hover {\n\t\tbackground-color: colours.$ontario-greyscale-70;\n\t}\n\n\t&:focus {\n\t\tbackground-color: colours.$ontario-greyscale-70;\n\t\ttransition:\n\t\t\tbackground-color 0.2s ease-out,\n\t\t\tfocusPlaceholders.$ontario-focus-transition;\n\t}\n\n\t&:active {\n\t\tbackground-color: colours.$ontario-greyscale-70;\n\t\ttransition:\n\t\t\tbackground-color 0s,\n\t\t\tfocusPlaceholders.$ontario-focus-transition;\n\t}\n\n\t&:visited {\n\t\tcolor: colours.$ontario-colour-link;\n\t}\n}\n","import { Component, Prop, Element, h, Watch, State, AttachInternals } from '@stencil/core';\n\nimport { Button } from './button.interface';\nimport { ButtonType, ButtonTypes, HtmlType, HtmlTypes } from './ontario-button.types';\n\nimport { validatePropExists, validateValueAgainstArray } from '../../utils/validation/validation-functions';\nimport { ConsoleMessageClass } from '../../utils/console-message/console-message';\nimport { isServerSideRendering } from '../../utils/common/environment';\n\n/**\n * Ontario Button triggers actions and supports button or link behavior.\n *\n * This component intentionally does not expose a `disabled` prop.\n *\n * To support accessible and understandable form completion:\n * - keep actions available\n * - use validation and error messaging to guide corrections instead of disabling\n *\n * For component guidance, see:\n * - https://designsystem.ontario.ca/components/detail/buttons.html\n * - https://designsystem.ontario.ca/developer-docs/components/ontario-button/\n *\n * Disabled/read-only policy source:\n * - https://designsystem.ontario.ca/components/detail/buttons.html#disabled-buttons\n */\n@Component({\n\ttag: 'ontario-button',\n\tstyleUrl: 'ontario-button.scss',\n\tshadow: true,\n\tformAssociated: true,\n})\nexport class OntarioButton implements Button {\n\t@Element() host: HTMLElement;\n\t@AttachInternals() internals: ElementInternals;\n\n\t/**\n\t * The type of button to render.\n\t *\n\t * If no type is passed, it will default to 'secondary'.\n\t */\n\t@Prop() type: ButtonType = 'secondary';\n\n\t/**\n\t * The native HTML button type the button should use.\n\t *\n\t * If no `htmlType` is passed, it will default to `'button'`.\n\t * This prop only affects the component when it renders as a native `<button>`.\n\t * If `href` is provided, the component renders as a native `<a>` and `htmlType` is ignored.\n\t */\n\t@Prop() htmlType: HtmlType = 'button';\n\n\t/**\n\t * When provided, the component renders as a native anchor for navigation use cases.\n\t * This takes precedence over `htmlType`, so form-submission behaviour is disabled in link mode.\n\t */\n\t@Prop() href?: string;\n\n\t/**\n\t * Specifies where to open the linked document when `href` is provided.\n\t * This prop has no effect unless the component is in link mode.\n\t */\n\t@Prop() target?: string;\n\n\t/**\n\t * Specifies the relationship of the linked document to the current document when `href` is provided.\n\t * This prop has no effect unless the component is in link mode.\n\t */\n\t@Prop() rel?: string;\n\n\t/**\n\t * Text to be displayed within the button. This will override the text provided through the host element textContent.\n\t *\n\t * @example\n\t * <ontario-button label=\"Label Text\">Text</ontario-button>\n\t *\n\t * The resulting button will have the label `\"Label Text\"`.\n\t */\n\t@Prop() label?: string;\n\n\t/**\n\t * Provides more context as to what the button interaction is doing. This should only be used for accessibility purposes, if the button interaction requires more description than what the text provides.\n\t *\n\t *  This is optional.\n\t *\n\t * @example\n\t * <ontario-button aria-label-text=\"Click button to open map\">Open</ontario button>\n\t */\n\t@Prop({ mutable: true }) ariaLabelText?: string;\n\n\t/**\n\t * The unique identifier of the button. This is optional - if no ID is passed, one will be generated.\n\t */\n\t@Prop({ mutable: true }) elementId?: string;\n\n\t/**\n\t * Mutable variable, for internal use only.\n\t * Set the button's type depending on validation result.\n\t */\n\t@State() private typeState: string;\n\n\t/**\n\t * Mutable variable, for internal use only.\n\t * Set the native HTML button type depending on validation result.\n\t */\n\t@State() private htmlTypeState: string;\n\n\t@State() private labelState: string;\n\n\t/**\n\t * A reference to the internal button element.\n\t */\n\n\tprivate buttonRef: HTMLButtonElement;\n\n\tprivate hasWarnedLinkHtmlTypeConflict = false;\n\n\t/*\n\t * Watch for changes to the `label` property for validation purposes.\n\t *\n\t * If  no `label` prop is provided, the `label` prop will be set to the host element textContent (if it exists).\n\t */\n\t@Watch('label')\n\tprivate updateLabelContent() {\n\t\tif (isServerSideRendering()) {\n\t\t\t// Ensure host and its textContent are defined and accessible (safe for SSR environments)\n\t\t\tthis.labelState = this.label ?? '';\n\t\t} else {\n\t\t\tthis.labelState = this.label ?? this.host.textContent ?? '';\n\t\t}\n\t\tthis.validateLabelContent(this.labelState);\n\t}\n\n\t/**\n\t * Watch for changes to the `type` property for validation purposes.\n\t *\n\t * If the user input doesn't match one of the array values then `type` will be set to its default (`secondary`).\n\t * If a match is found in one of the array values then `type` will be set to the matching array key value.\n\t */\n\t@Watch('type')\n\tvalidateType() {\n\t\tconst isValid = validateValueAgainstArray(this.type, ButtonTypes);\n\t\tthis.typeState = isValid ? this.type : this.warnDefaultType();\n\t}\n\n\t/**\n\t *  Watch for changes to the `htmlType` property for validation purposes.\n\t *\n\t * If the user input doesn't match one of the array values then `htmlType` will be set to its default (`submit`).\n\t * If a match is found in one of the array values then `htmlType` will be set to the matching array key value.\n\t */\n\t@Watch('htmlType')\n\tvalidateHtmlType() {\n\t\tconst isValid = validateValueAgainstArray(this.htmlType, HtmlTypes);\n\t\tthis.htmlTypeState = isValid ? this.htmlType : this.warnDefaultHtmlType();\n\t}\n\n\t/**\n\t * Print the missing `label` prop warning message\n\t */\n\tvalidateLabelContent(newValue: string) {\n\t\tif (validatePropExists(newValue)) {\n\t\t\tconst message = new ConsoleMessageClass();\n\t\t\tmessage\n\t\t\t\t.addDesignSystemTag()\n\t\t\t\t.addMonospaceText(' label ')\n\t\t\t\t.addRegularText('for')\n\t\t\t\t.addMonospaceText(' <ontario-button> ')\n\t\t\t\t.addRegularText('was not provided')\n\t\t\t\t.printMessage();\n\t\t}\n\t}\n\n\t/**\n\t * Print the invalid `type` prop warning message\n\t * @returns default type (secondary)\n\t */\n\tprivate warnDefaultType(): ButtonType {\n\t\tconst message = new ConsoleMessageClass();\n\t\tmessage\n\t\t\t.addDesignSystemTag()\n\t\t\t.addMonospaceText(' type ')\n\t\t\t.addRegularText('on')\n\t\t\t.addMonospaceText(' <ontario-button> ')\n\t\t\t.addRegularText('was set to an invalid type; only')\n\t\t\t.addMonospaceText(' primary, secondary, or tertiary ')\n\t\t\t.addRegularText('are supported. The default type')\n\t\t\t.addMonospaceText(' secondary ')\n\t\t\t.addRegularText('is assumed.')\n\t\t\t.printMessage();\n\t\treturn 'secondary';\n\t}\n\n\t/**\n\t * Print the invalid `htmlType` warning message\n\t * @returns default htmlType (button)\n\t */\n\tprivate warnDefaultHtmlType(): HtmlType {\n\t\tconst message = new ConsoleMessageClass();\n\t\tmessage\n\t\t\t.addDesignSystemTag()\n\t\t\t.addMonospaceText(' htmlType ')\n\t\t\t.addRegularText('on')\n\t\t\t.addMonospaceText(' <ontario-button> ')\n\t\t\t.addRegularText('was set to an invalid htmlType; only')\n\t\t\t.addMonospaceText(' button, reset, or submit ')\n\t\t\t.addRegularText('are supported. The default type')\n\t\t\t.addMonospaceText(' button ')\n\t\t\t.addRegularText('is assumed.')\n\t\t\t.printMessage();\n\t\treturn 'button';\n\t}\n\n\t/**\n\t * @returns the classes of the button based of the button's `type`.\n\t */\n\tprivate getClass() {\n\t\treturn `ontario-button ontario-button--${this.typeState}`;\n\t}\n\n\tprivate isLinkMode() {\n\t\treturn !!this.href;\n\t}\n\n\tprivate warnIgnoredHtmlTypeInLinkMode() {\n\t\tif (this.hasWarnedLinkHtmlTypeConflict || !this.isLinkMode() || this.htmlTypeState === 'button') {\n\t\t\treturn;\n\t\t}\n\n\t\tconst message = new ConsoleMessageClass();\n\t\tmessage\n\t\t\t.addDesignSystemTag()\n\t\t\t.addMonospaceText(' htmlType ')\n\t\t\t.addRegularText('on')\n\t\t\t.addMonospaceText(' <ontario-button> ')\n\t\t\t.addRegularText('is ignored when')\n\t\t\t.addMonospaceText(' href ')\n\t\t\t.addRegularText('is provided. The component renders as a native link instead.')\n\t\t\t.printMessage();\n\n\t\tthis.hasWarnedLinkHtmlTypeConflict = true;\n\t}\n\n\tpublic getId(): string {\n\t\treturn this.elementId ?? '';\n\t}\n\n\t/**\n\t * Set `buttonId`, `label`, and `ariaLabel` using internal component logic.\n\t */\n\tcomponentWillLoad() {\n\t\tthis.updateLabelContent();\n\t\tthis.validateHtmlType();\n\t\tthis.validateType();\n\t\tthis.ariaLabelText = this.ariaLabelText ?? this.labelState;\n\t}\n\n\tcomponentWillRender() {\n\t\tthis.warnIgnoredHtmlTypeInLinkMode();\n\t}\n\n\tcomponentDidLoad() {\n\t\t// Used to help load translations for any slots + text content passed in by the user.\n\t\tconst observer = new MutationObserver((mutations) => {\n\t\t\tmutations.forEach((mutation) => {\n\t\t\t\tif (mutation.type === 'attributes') {\n\t\t\t\t\tthis.updateLabelContent();\n\t\t\t\t}\n\t\t\t});\n\t\t});\n\n\t\tconst options = { attributes: true };\n\t\tobserver.observe(this.host, options);\n\n\t\t// Add a click event listener to handle submitting a form\n\t\tif (!this.isLinkMode() && this.htmlTypeState === 'submit') {\n\t\t\tthis.buttonRef.addEventListener('click', () => {\n\t\t\t\tconst { form } = this.internals;\n\t\t\t\tform?.requestSubmit();\n\t\t\t});\n\t\t}\n\t}\n\n\trender() {\n\t\tif (this.isLinkMode()) {\n\t\t\treturn (\n\t\t\t\t<a\n\t\t\t\t\thref={this.href}\n\t\t\t\t\ttarget={this.target}\n\t\t\t\t\trel={this.rel}\n\t\t\t\t\tclass={this.getClass()}\n\t\t\t\t\taria-label={this.ariaLabelText}\n\t\t\t\t\tid={this.getId()}\n\t\t\t\t>\n\t\t\t\t\t{this.labelState}\n\t\t\t\t</a>\n\t\t\t);\n\t\t}\n\n\t\treturn (\n\t\t\t<button\n\t\t\t\tref={(el) => (this.buttonRef = el as HTMLButtonElement)}\n\t\t\t\ttype={this.htmlTypeState}\n\t\t\t\tclass={this.getClass()}\n\t\t\t\taria-label={this.ariaLabelText}\n\t\t\t\tid={this.getId()}\n\t\t\t>\n\t\t\t\t{this.labelState}\n\t\t\t</button>\n\t\t);\n\t}\n}\n"],"version":3}