@ongov/ontario-design-system-component-library 4.3.1-alpha.1 → 5.0.0-alpha.10

package/dist/components/input.js.map

@@ -1 +1 @@
-{"file":"input.js","mappings":";;;;;;;;;;;;;MAuBa,KAAK,GAAoC,CAAC,EAoBtD;QApBsD,EACtD,YAAY,EACZ,SAAS,EACT,EAAE,EACF,IAAI,EACJ,WAAW,EACX,IAAI,EACJ,KAAK,EACL,OAAO,EACP,QAAQ,EACR,SAAS,EACT,OAAO,EACP,QAAQ,EACR,MAAM,EACN,OAAO,EACP,WAAW,EACX,eAAe,EACf,GAAG,EACH,SAAS,OAET,EADG,KAAK,cAnB8C,iNAoBtD,CADQ;IAER,QACC,2BACC,YAAY,EAAE,YAAY,EAC1B,KAAK,EAAE,SAAS,EAChB,EAAE,EAAE,EAAE,EACN,IAAI,EAAE,IAAI,EACV,IAAI,EAAE,IAAI,EACV,KAAK,EAAE,KAAK,EACZ,OAAO,EAAE,OAAO,EAChB,WAAW,EAAE,WAAW,EACxB,QAAQ,EAAE,CAAC,CAAC,QAAQ,EACpB,SAAS,EAAE,SAAS,EACpB,OAAO,EAAE,OAAO,EAChB,QAAQ,EAAE,QAAQ,EAClB,MAAM,EAAE,MAAM,EACd,OAAO,EAAE,OAAO,EAChB,SAAS,EAAE,SAAS,EACpB,GAAG,EAAE,GAAG,kBACM,WAAW,sBACP,eAAe,IAC7B,KAAK,EACR,EACD;AACH;;;;","names":[],"sources":["src/utils/common/input/input.tsx"],"sourcesContent":["import { FunctionalComponent, h } from '@stencil/core';\n\nexport type InputProps = {\n\tautoComplete?: string;\n\tclassName?: string;\n\tid: string;\n\tname?: string;\n\ttype: string;\n\tvalue?: string | number;\n\tchecked?: boolean;\n\trequired?: boolean;\n\tinputMode?: string;\n\tplaceholder?: string;\n\tariaInvalid?: boolean;\n\tariaDescribedBy?: string;\n\tonKeyDown?: ((event: Event) => void) | undefined;\n\tonInput?: ((event: Event) => void) | undefined;\n\tonChange?: ((event: Event) => void) | undefined;\n\tonBlur?: ((event: Event) => void) | undefined;\n\tonFocus?: ((event: Event) => void) | undefined;\n\tref?: (el: any) => HTMLElement;\n};\n\nexport const Input: FunctionalComponent<InputProps> = ({\n\tautoComplete,\n\tclassName,\n\tid,\n\tname,\n\tplaceholder,\n\ttype,\n\tvalue,\n\tchecked,\n\trequired,\n\tonKeyDown,\n\tonInput,\n\tonChange,\n\tonBlur,\n\tonFocus,\n\tariaInvalid,\n\tariaDescribedBy,\n\tref,\n\tinputMode,\n\t...props\n}) => {\n\treturn (\n\t\t<input\n\t\t\tautoComplete={autoComplete}\n\t\t\tclass={className}\n\t\t\tid={id}\n\t\t\tname={name}\n\t\t\ttype={type}\n\t\t\tvalue={value}\n\t\t\tchecked={checked}\n\t\t\tplaceholder={placeholder}\n\t\t\trequired={!!required}\n\t\t\tonKeyDown={onKeyDown}\n\t\t\tonInput={onInput}\n\t\t\tonChange={onChange}\n\t\t\tonBlur={onBlur}\n\t\t\tonFocus={onFocus}\n\t\t\tinputMode={inputMode}\n\t\t\tref={ref}\n\t\t\taria-invalid={ariaInvalid}\n\t\t\taria-describedby={ariaDescribedBy}\n\t\t\t{...props}\n\t\t/>\n\t);\n};\n"],"version":3}
+{"file":"input.js","mappings":";;MAwBa,KAAK,GAAoC,CAAC,EACtD,YAAY,EACZ,SAAS,EACT,EAAE,EACF,IAAI,EACJ,WAAW,EACX,IAAI,EACJ,KAAK,EACL,OAAO,EACP,QAAQ,EACR,SAAS,EACT,OAAO,EACP,QAAQ,EACR,MAAM,EACN,OAAO,EACP,OAAO,EACP,WAAW,EACX,eAAe,EACf,GAAG,EACH,SAAS,EACT,GAAG,KAAK,EACR;IACA,QACC,aACC,YAAY,EAAE,YAAY,EAC1B,KAAK,EAAE,SAAS,EAChB,EAAE,EAAE,EAAE,EACN,IAAI,EAAE,IAAI,EACV,IAAI,EAAE,IAAI,EACV,KAAK,EAAE,KAAK,EACZ,OAAO,EAAE,OAAO,EAChB,WAAW,EAAE,WAAW,EACxB,QAAQ,EAAE,CAAC,CAAC,QAAQ,EACpB,SAAS,EAAE,SAAS,EACpB,OAAO,EAAE,OAAO,EAChB,QAAQ,EAAE,QAAQ,EAClB,MAAM,EAAE,MAAM,EACd,OAAO,EAAE,OAAO,EAChB,OAAO,EAAE,OAAO,EAChB,SAAS,EAAE,SAAS,EACpB,GAAG,EAAE,GAAG,kBACM,WAAW,sBACP,eAAe,KAC7B,KAAK,GACR,EACD;AACH;;;;","names":[],"sources":["src/utils/common/input/input.tsx"],"sourcesContent":["import { FunctionalComponent, h } from '@stencil/core';\n\nexport type InputProps = {\n\tautoComplete?: string;\n\tclassName?: string;\n\tid: string;\n\tname?: string;\n\ttype: string;\n\tvalue?: string | number;\n\tchecked?: boolean;\n\trequired?: boolean;\n\tinputMode?: string;\n\tplaceholder?: string;\n\tariaInvalid?: boolean;\n\tariaDescribedBy?: string;\n\tonKeyDown?: ((event: Event) => void) | undefined;\n\tonInput?: ((event: Event) => void) | undefined;\n\tonChange?: ((event: Event) => void) | undefined;\n\tonBlur?: ((event: Event) => void) | undefined;\n\tonFocus?: ((event: Event) => void) | undefined;\n\tonClick?: ((event: Event) => void) | undefined;\n\tref?: (el: HTMLInputElement) => HTMLElement;\n};\n\nexport const Input: FunctionalComponent<InputProps> = ({\n\tautoComplete,\n\tclassName,\n\tid,\n\tname,\n\tplaceholder,\n\ttype,\n\tvalue,\n\tchecked,\n\trequired,\n\tonKeyDown,\n\tonInput,\n\tonChange,\n\tonBlur,\n\tonFocus,\n\tonClick,\n\tariaInvalid,\n\tariaDescribedBy,\n\tref,\n\tinputMode,\n\t...props\n}) => {\n\treturn (\n\t\t<input\n\t\t\tautoComplete={autoComplete}\n\t\t\tclass={className}\n\t\t\tid={id}\n\t\t\tname={name}\n\t\t\ttype={type}\n\t\t\tvalue={value}\n\t\t\tchecked={checked}\n\t\t\tplaceholder={placeholder}\n\t\t\trequired={!!required}\n\t\t\tonKeyDown={onKeyDown}\n\t\t\tonInput={onInput}\n\t\t\tonChange={onChange}\n\t\t\tonBlur={onBlur}\n\t\t\tonFocus={onFocus}\n\t\t\tonClick={onClick}\n\t\t\tinputMode={inputMode}\n\t\t\tref={ref}\n\t\t\taria-invalid={ariaInvalid}\n\t\t\taria-describedby={ariaDescribedBy}\n\t\t\t{...props}\n\t\t/>\n\t);\n};\n"],"version":3}

package/dist/components/ontario-accordion.js

@@ -1,30 +1,71 @@
-import { proxyCustomElement, HTMLElement, h } from '@stencil/core/internal/client';
-import { v as validateLanguage } from './validation-functions.js';
-import { t as translations } from './global.i18n.js';
-import { d as defineCustomElement$3 } from './ontario-icon-chevron-down2.js';
-import { d as defineCustomElement$2 } from './ontario-icon-chevron-up2.js';
+import { p as proxyCustomElement, H, h } from './p-846438ed.js';
+import { v as validateLanguage } from './p-edb765a1.js';
+import { t as translations } from './p-a5331e15.js';
+import { d as defineCustomElement$3 } from './p-1dc1dba8.js';
+import { d as defineCustomElement$2 } from './p-77545837.js';
 
 const ontarioAccordionCss =
 	'.ontario-accordion__button--expand-all:focus,.ontario-accordion__button:focus{box-shadow:0 0 0 4px #009ADB;outline:4px solid transparent;transition:box-shadow 0.1s ease-in-out}.ontario-accordion__button{font-style:normal;font-weight:700;text-rendering:optimizeLegibility;margin-bottom:1rem;font-feature-settings:normal;font-family:"Raleway", "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif}.ontario-accordion__button{font-size:1.25rem;letter-spacing:0.03rem;line-height:1.5;margin:0 0 0.75rem 0;max-width:48rem}@media screen and (min-width: 40em){.ontario-accordion__button{font-size:1.5rem;letter-spacing:0.0313rem;line-height:1.5}}.ontario-accordions__container{max-width:48rem;width:100%}.ontario-accordion{border-top:2px solid #cccccc}.ontario-accordion:last-of-type{border-bottom:2px solid #cccccc}.ontario-accordion__controls{display:flex;justify-content:flex-end}.ontario-accordion__button,.ontario-accordion__button--expand-all{background:none;border:0;box-sizing:border-box}.ontario-accordion__button--expand-all{font-size:1rem;margin-bottom:0.5rem;color:#0066CC;cursor:pointer}.ontario-accordion__button--expand-all:focus,.ontario-accordion__button--expand-all:hover{color:#00478F;text-decoration:underline}.ontario-accordion__button--expand-all:active{color:#002142;text-decoration:underline}.ontario-accordion--expand-close-all{display:none}.ontario-accordion__controls--active .ontario-accordion--expand-close-all{display:block}.ontario-accordion__controls--active .ontario-accordion--expand-open-all{display:none}.ontario-accordion__button{display:flex;align-items:flex-start;color:#0066CC;cursor:pointer;padding:0.75rem 0.5rem;text-align:left;width:100%;margin-bottom:0}.ontario-accordion__button .ontario-accordion__button-icon--close,.ontario-accordion__button .ontario-accordion__button-icon--open{margin-right:0.5rem}.ontario-accordion__button .ontario-icon{width:1.75rem;height:1.75rem}.ontario-accordion__button:focus,.ontario-accordion__button:hover{background-color:#f2f2f2;color:#00478F}.ontario-accordion__button:focus{box-shadow:0 0 0 4px #009ADB inset}.ontario-accordion__button:active{color:#002142}.ontario-accordion__content{display:none;padding:0.75rem 0.75rem 2rem 0.75rem;margin-left:0}@media screen and (min-width: 40em){.ontario-accordion__content{margin-left:2rem}}.ontario-accordion__content *{margin-top:0;max-width:48rem;width:100%}.ontario-accordion__content ul,.ontario-accordion__content ol{max-width:calc(100% - 3rem)}.ontario-accordion__content>:last-child{margin-bottom:0}.ontario-accordion__button-icon--close,.ontario-expander--active .ontario-accordion__button-icon--open{display:none}.ontario-expander--active~.ontario-accordion__content,.ontario-expander--active .ontario-accordion__button-icon--close{display:block}.ontario-accordions__container .ontario-h1,.ontario-accordions__container .ontario-h2,.ontario-accordions__container .ontario-h3,.ontario-accordions__container .ontario-h4,.ontario-accordions__container .ontario-h5,.ontario-accordions__container p,.ontario-accordions__container h1,.ontario-accordions__container h2,.ontario-accordions__container h3,.ontario-accordions__container h4,.ontario-accordions__container h5,.ontario-accordions__container h6{margin:0}';
 const OntarioAccordionStyle0 = ontarioAccordionCss;
 
 const OntarioAccordion$1 = /*@__PURE__*/ proxyCustomElement(
-	class OntarioAccordion extends HTMLElement {
+	class OntarioAccordion extends H {
 		constructor() {
 			super();
 			this.__registerHost();
 			this.__attachShadow();
-			this.name = undefined;
-			this.expandCollapseButton = undefined;
-			this.accordionData = undefined;
-			this.isOpen = false;
-			this.language = undefined;
-			this.translations = translations;
-			this.expandCollapseLabel = undefined;
-			this.internalExpandCollapseLabelDetails = undefined;
-			this.internalAccordionData = [];
-			this.openAccordionIndexes = [];
 		}
+		get host() {
+			return this;
+		}
+		/**
+		 * The name of the accordion component.
+		 *
+		 * This is not optional.
+		 */
+		name;
+		/**
+		 * Custom Expand/Collapse button text.
+		 *
+		 * @example
+		 *  <ontario-accordion
+		 *		name="My Accordion"
+		 *		expand-collapse-button='{
+		 *			"expandAllSectionsLabel": "Expand All",
+		 *			"collapseAllSectionsLabel": "Collapse All"
+		 *		}'
+		 *		accordion-data='[
+		 *			{"label": "Accordion 1", "content": ["Item 1", "Item 2", "Item 3"]},
+		 *			{"label": "Accordion 2", "content": ["Item A", "Item B", "Item C"]}
+		 *		]'
+		 *	></ontario-accordion>
+		 */
+		expandCollapseButton;
+		/**
+		 * Used to include individual accordion data for the accordion component.
+		 * This is passed in as an array of objects with key-value pairs.
+		 *
+		 * The `content` is expecting a string, that can either be written as HTML or a just a plain string, depending on the accordionContentType.
+		 *
+		 * @example
+		 * 	<ontario-accordion
+		 *		name="My Accordion"
+		 *		accordion-data='[
+		 *			{"label": "Accordion 1", "content": "This is a string"},
+		 *			{"label": "Accordion 2", "accordionContentType": "html", "content": "<ul><li>List A</li><li>List B</li><li>List C</li></ul>"}
+		 *		]'
+		 *	></ontario-accordion>
+		 */
+		accordionData;
+		/**
+		 * Used to show whether the accordion is opened or closed.
+		 */
+		isOpen = false;
+		/**
+		 * The language of the component.
+		 * This is used for translations, and is by default set through event listeners checking for a language property from the header. If none are passed, it will default to English.
+		 */
+		language;
 		/**
 		 * 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.
 		 */
@@ -40,6 +81,27 @@ const OntarioAccordion$1 = /*@__PURE__*/ proxyCustomElement(
 		handleHeaderLanguageToggled(event) {
 			this.language = validateLanguage(event);
 		}
+		/**
+		 * Store the translation dictionary for use within the component.
+		 */
+		translations = translations;
+		/**
+		 * The label for the expand/collapse button.
+		 * This is internal and udpdated dynamically.
+		 */
+		expandCollapseLabel;
+		/**
+		 * Internal state of the expand/collapse label information.
+		 */
+		internalExpandCollapseLabelDetails;
+		/**
+		 * Internal state containing the parsed Accordion Data
+		 */
+		internalAccordionData = [];
+		/**
+		 * This state tracks which accordions are open.
+		 */
+		openAccordionIndexes = [];
 		/**
 		 * Parse Accordion data, this is used to handle JSON strings from HTML.
 		 */
@@ -106,7 +168,6 @@ const OntarioAccordion$1 = /*@__PURE__*/ proxyCustomElement(
 			this.language = validateLanguage(this.language);
 		}
 		render() {
-			var _a, _b, _c, _d, _e, _f;
 			return h(
 				'div',
 				{ key: '3d024ea02e809459320c06b2952a45dcddba4f46' },
@@ -125,8 +186,7 @@ const OntarioAccordion$1 = /*@__PURE__*/ proxyCustomElement(
 								'onClick': () => this.toggleAll(),
 								'aria-expanded':
 									this.openAccordionIndexes.length === this.internalAccordionData.length ? 'true' : 'false',
-								'aria-label':
-									(_a = this.internalExpandCollapseLabelDetails) === null || _a === void 0 ? void 0 : _a.ariaLabelText,
+								'aria-label': this.internalExpandCollapseLabelDetails?.ariaLabelText,
 							},
 							h(
 								'span',
@@ -135,87 +195,72 @@ const OntarioAccordion$1 = /*@__PURE__*/ proxyCustomElement(
 									? h(
 											'div',
 											null,
-											(_c =
-												(_b = this.internalExpandCollapseLabelDetails) === null || _b === void 0
-													? void 0
-													: _b.expandAllSectionsLabel) !== null && _c !== void 0
-												? _c
-												: this.translations.accordion.expand[`${this.language}`],
-									  )
+											this.internalExpandCollapseLabelDetails?.expandAllSectionsLabel ??
+												this.translations.accordion.expand[`${this.language}`],
+										)
 									: h(
 											'div',
 											null,
-											(_e =
-												(_d = this.internalExpandCollapseLabelDetails) === null || _d === void 0
-													? void 0
-													: _d.collapseAllSectionsLabel) !== null && _e !== void 0
-												? _e
-												: this.translations.accordion.collapse[`${this.language}`],
-									  ),
+											this.internalExpandCollapseLabelDetails?.collapseAllSectionsLabel ??
+												this.translations.accordion.collapse[`${this.language}`],
+										),
 							),
 						),
 					),
-					(_f = this.internalAccordionData) === null || _f === void 0
-						? void 0
-						: _f.map((accordion, index) =>
+					this.internalAccordionData?.map((accordion, index) =>
+						h(
+							'div',
+							{
+								class: `ontario-accordion ${this.openAccordionIndexes.includes(index) ? 'open' : ''}`,
+								key: `accordion-${index}`,
+							},
+							h(
+								'h3',
+								{
+									class: `ontario-accordion__heading ${this.openAccordionIndexes.includes(index) ? 'ontario-expander--active' : ''}`,
+								},
 								h(
-									'div',
+									'button',
 									{
-										class: `ontario-accordion ${this.openAccordionIndexes.includes(index) ? 'open' : ''}`,
-										key: `accordion-${index}`,
+										'class': 'ontario-accordion__button',
+										'aria-expanded': this.openAccordionIndexes.includes(index) ? 'true' : 'false',
+										'data-toggle': 'ontario-collapse',
+										'onClick': () => this.toggleAccordion(index),
+										'aria-label': accordion.ariaLabelText,
 									},
 									h(
-										'h3',
-										{
-											class: `ontario-accordion__heading ${
-												this.openAccordionIndexes.includes(index) ? 'ontario-expander--active' : ''
-											}`,
-										},
-										h(
-											'button',
-											{
-												'class': 'ontario-accordion__button',
-												'aria-expanded': this.openAccordionIndexes.includes(index) ? 'true' : 'false',
-												'data-toggle': 'ontario-collapse',
-												'onClick': () => this.toggleAccordion(index),
-												'aria-label': accordion.ariaLabelText,
-											},
-											h(
-												'span',
-												{ class: 'ontario-accordion__button-icon--close' },
-												h('ontario-icon-chevron-up', { colour: 'blue' }),
-											),
-											h(
-												'span',
-												{ class: 'ontario-accordion__button-icon--open' },
-												h('ontario-icon-chevron-down', { colour: 'blue' }),
-											),
-											accordion.label,
-										),
+										'span',
+										{ class: 'ontario-accordion__button-icon--close' },
+										h('ontario-icon-chevron-up', { colour: 'blue' }),
 									),
 									h(
-										'section',
-										{
-											'class': `ontario-accordion__content ${
-												this.openAccordionIndexes.includes(index)
-													? 'ontario-accordion__content--opened'
-													: 'ontario-accordion__content--closed'
-											}`,
-											'aria-hidden': !this.openAccordionIndexes.includes(index),
-											'data-toggle': 'ontario-expander-content',
-										},
-										accordion.accordionContentType === 'html'
-											? h('div', { innerHTML: accordion.content }) // Render HTML content
-											: h('div', null, accordion.content),
+										'span',
+										{ class: 'ontario-accordion__button-icon--open' },
+										h('ontario-icon-chevron-down', { colour: 'blue' }),
 									),
+									accordion.label,
 								),
-						  ),
+							),
+							h(
+								'section',
+								{
+									'class': `ontario-accordion__content ${
+										this.openAccordionIndexes.includes(index)
+											? 'ontario-accordion__content--opened'
+											: 'ontario-accordion__content--closed'
+									}`,
+									'aria-hidden': !this.openAccordionIndexes.includes(index),
+									'data-toggle': 'ontario-expander-content',
+								},
+								accordion.accordionContentType === 'html'
+									? h('div', { innerHTML: accordion.content }) // Render HTML content
+									: h('div', null, accordion.content),
+							),
+						),
+					),
 				),
 			);
 		}
-		get host() {
-			return this;
-		}
 		static get watchers() {
 			return {
 				accordionData: ['parseAccordionData'],

package/dist/components/ontario-accordion.js.map

@@ -1 +1 @@
-{"file":"ontario-accordion.js","mappings":"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","names":["OntarioAccordion"],"sources":["src/components/ontario-accordion/ontario-accordion.scss?tag=ontario-accordion&encapsulation=shadow","src/components/ontario-accordion/ontario-accordion.tsx"],"sourcesContent":["@use '@ongov/ontario-design-system-global-styles/dist/styles/scss/1-variables/global.variables' as globalVariables;\n@use '@ongov/ontario-design-system-global-styles/dist/styles/scss/1-variables/spacing.variables' as spacing;\n@use '@ongov/ontario-design-system-global-styles/dist/styles/scss/1-variables/colours.variables' as colours;\n@use '@ongov/ontario-design-system-global-styles/dist/styles/scss/1-variables/breakpoints.variables' as breakpoints;\n@use '@ongov/ontario-design-system-global-styles/dist/styles/scss/2-tools/placeholder/focus.placeholders' as\n\tplaceholders;\n@use '@ongov/ontario-design-system-global-styles/dist/styles/scss/1-variables/typography.variables' as typography;\n@use '@ongov/ontario-design-system-global-styles/dist/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, State, h, Listen, Watch } from '@stencil/core';\nimport { Accordion } from './accordion.interface';\nimport { ExpandCollapseButtonDetails } from './expandCollapseButtonDetails.interface';\nimport { Language } from '../../utils/common/language-types';\nimport { validateLanguage } from '../../utils/validation/validation-functions';\nimport translations from '../../translations/global.i18n.json';\n\n@Component({\n\ttag: 'ontario-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 * This is passed in as an array of objects with key-value pairs.\n\t *\n\t * The `content` is expecting a string, that can either be written as HTML or a just a plain string, depending on the accordionContentType.\n\t *\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\"},\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 * Used to show whether the accordion is opened or closed.\n\t */\n\t@Prop() isOpen: boolean = false;\n\n\t/**\n\t * The language of the component.\n\t * This is used for translations, and is by default set through event listeners checking for a language property from the header. If none are passed, it will default to English.\n\t */\n\t@Prop({ mutable: true }) language?: Language;\n\n\t/**\n\t * This listens for the `setAppLanguage` event sent from the test language toggler when it is is connected to the DOM. It is used for the initial language when the input component loads.\n\t */\n\t@Listen('setAppLanguage', { target: 'window' })\n\thandleSetAppLanguage(event: CustomEvent<Language>) {\n\t\tif (!this.language) {\n\t\t\tthis.language = validateLanguage(event);\n\t\t}\n\t}\n\n\t/**\n\t * Handle the language being toggled from the `<ontario-header>`.\n\t * @param event Event object passed when the event is fired.\n\t */\n\t@Listen('headerLanguageToggled', { target: 'window' })\n\thandleHeaderLanguageToggled(event: CustomEvent<Language>) {\n\t\tthis.language = validateLanguage(event);\n\t}\n\n\t/**\n\t * 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/**\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\tif (typeof this.accordionData !== 'undefined') {\n\t\t\tthis.internalAccordionData = Array.isArray(this.accordionData)\n\t\t\t\t? this.accordionData\n\t\t\t\t: JSON.parse(this.accordionData);\n\t\t}\n\n\t\t// Initialize the label based on the initial accordion state\n\t\tthis.updateLabel();\n\t}\n\n\t/**\n\t * Parse Expand/Collapse Button Details, this is used to handle JSON strings from HTML.\n\t */\n\t@Watch('expandCollapseButton')\n\tprivate parseExpandCollapseButtonDetails() {\n\t\tif (typeof this.expandCollapseButton !== 'undefined') {\n\t\t\tthis.internalExpandCollapseLabelDetails =\n\t\t\t\ttypeof this.expandCollapseButton === 'string'\n\t\t\t\t\t? JSON.parse(this.expandCollapseButton)\n\t\t\t\t\t: this.expandCollapseButton;\n\t\t}\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\t// If the accordion is already open, close it\n\t\t\tthis.openAccordionIndexes = this.openAccordionIndexes.filter((i) => i !== index);\n\t\t} else {\n\t\t\t// If the accordion is closed, open it\n\t\t\tthis.openAccordionIndexes = [...this.openAccordionIndexes, index];\n\t\t}\n\t\tthis.updateLabel();\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\t\tthis.updateLabel();\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\t<div\n\t\t\t\t\t\t\tclass={`ontario-accordion ${this.openAccordionIndexes.includes(index) ? 'open' : ''}`}\n\t\t\t\t\t\t\tkey={`accordion-${index}`}\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t<h3\n\t\t\t\t\t\t\t\tclass={`ontario-accordion__heading ${\n\t\t\t\t\t\t\t\t\tthis.openAccordionIndexes.includes(index) ? 'ontario-expander--active' : ''\n\t\t\t\t\t\t\t\t}`}\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t<button\n\t\t\t\t\t\t\t\t\tclass=\"ontario-accordion__button\"\n\t\t\t\t\t\t\t\t\taria-expanded={this.openAccordionIndexes.includes(index) ? 'true' : 'false'}\n\t\t\t\t\t\t\t\t\tdata-toggle=\"ontario-collapse\"\n\t\t\t\t\t\t\t\t\tonClick={() => this.toggleAccordion(index)}\n\t\t\t\t\t\t\t\t\taria-label={accordion.ariaLabelText}\n\t\t\t\t\t\t\t\t>\n\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<ontario-icon-chevron-up colour=\"blue\"></ontario-icon-chevron-up>\n\t\t\t\t\t\t\t\t\t</span>\n\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<ontario-icon-chevron-down colour=\"blue\"></ontario-icon-chevron-down>\n\t\t\t\t\t\t\t\t\t</span>\n\t\t\t\t\t\t\t\t\t{accordion.label}\n\t\t\t\t\t\t\t\t</button>\n\t\t\t\t\t\t\t</h3>\n\t\t\t\t\t\t\t<section\n\t\t\t\t\t\t\t\tclass={`ontario-accordion__content ${\n\t\t\t\t\t\t\t\t\tthis.openAccordionIndexes.includes(index)\n\t\t\t\t\t\t\t\t\t\t? 'ontario-accordion__content--opened'\n\t\t\t\t\t\t\t\t\t\t: 'ontario-accordion__content--closed'\n\t\t\t\t\t\t\t\t}`}\n\t\t\t\t\t\t\t\taria-hidden={!this.openAccordionIndexes.includes(index)}\n\t\t\t\t\t\t\t\tdata-toggle=\"ontario-expander-content\"\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t{accordion.accordionContentType === 'html' ? (\n\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) : (\n\t\t\t\t\t\t\t\t\t<div>{accordion.content}</div>\n\t\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t\t</section>\n\t\t\t\t\t\t</div>\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"],"sources":["src/components/ontario-accordion/ontario-accordion.scss?tag=ontario-accordion&encapsulation=shadow","src/components/ontario-accordion/ontario-accordion.tsx"],"sourcesContent":["@use '@ongov/ontario-design-system-global-styles/dist/styles/scss/1-variables/global.variables' as globalVariables;\n@use '@ongov/ontario-design-system-global-styles/dist/styles/scss/1-variables/spacing.variables' as spacing;\n@use '@ongov/ontario-design-system-global-styles/dist/styles/scss/1-variables/colours.variables' as colours;\n@use '@ongov/ontario-design-system-global-styles/dist/styles/scss/1-variables/breakpoints.variables' as breakpoints;\n@use '@ongov/ontario-design-system-global-styles/dist/styles/scss/2-tools/placeholder/focus.placeholders' as\n\tplaceholders;\n@use '@ongov/ontario-design-system-global-styles/dist/styles/scss/1-variables/typography.variables' as typography;\n@use '@ongov/ontario-design-system-global-styles/dist/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, State, h, Listen, Watch } from '@stencil/core';\nimport { Accordion } from './accordion.interface';\nimport { ExpandCollapseButtonDetails } from './expandCollapseButtonDetails.interface';\nimport { Language } from '../../utils/common/language-types';\nimport { validateLanguage } from '../../utils/validation/validation-functions';\nimport translations from '../../translations/global.i18n.json';\n\n@Component({\n\ttag: 'ontario-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 * This is passed in as an array of objects with key-value pairs.\n\t *\n\t * The `content` is expecting a string, that can either be written as HTML or a just a plain string, depending on the accordionContentType.\n\t *\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\"},\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 * Used to show whether the accordion is opened or closed.\n\t */\n\t@Prop() isOpen: boolean = false;\n\n\t/**\n\t * The language of the component.\n\t * This is used for translations, and is by default set through event listeners checking for a language property from the header. If none are passed, it will default to English.\n\t */\n\t@Prop({ mutable: true }) language?: Language;\n\n\t/**\n\t * This listens for the `setAppLanguage` event sent from the test language toggler when it is is connected to the DOM. It is used for the initial language when the input component loads.\n\t */\n\t@Listen('setAppLanguage', { target: 'window' })\n\thandleSetAppLanguage(event: CustomEvent<Language>) {\n\t\tif (!this.language) {\n\t\t\tthis.language = validateLanguage(event);\n\t\t}\n\t}\n\n\t/**\n\t * Handle the language being toggled from the `<ontario-header>`.\n\t * @param event Event object passed when the event is fired.\n\t */\n\t@Listen('headerLanguageToggled', { target: 'window' })\n\thandleHeaderLanguageToggled(event: CustomEvent<Language>) {\n\t\tthis.language = validateLanguage(event);\n\t}\n\n\t/**\n\t * 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/**\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\tif (typeof this.accordionData !== 'undefined') {\n\t\t\tthis.internalAccordionData = Array.isArray(this.accordionData)\n\t\t\t\t? this.accordionData\n\t\t\t\t: JSON.parse(this.accordionData);\n\t\t}\n\n\t\t// Initialize the label based on the initial accordion state\n\t\tthis.updateLabel();\n\t}\n\n\t/**\n\t * Parse Expand/Collapse Button Details, this is used to handle JSON strings from HTML.\n\t */\n\t@Watch('expandCollapseButton')\n\tprivate parseExpandCollapseButtonDetails() {\n\t\tif (typeof this.expandCollapseButton !== 'undefined') {\n\t\t\tthis.internalExpandCollapseLabelDetails =\n\t\t\t\ttypeof this.expandCollapseButton === 'string'\n\t\t\t\t\t? JSON.parse(this.expandCollapseButton)\n\t\t\t\t\t: this.expandCollapseButton;\n\t\t}\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\t// If the accordion is already open, close it\n\t\t\tthis.openAccordionIndexes = this.openAccordionIndexes.filter((i) => i !== index);\n\t\t} else {\n\t\t\t// If the accordion is closed, open it\n\t\t\tthis.openAccordionIndexes = [...this.openAccordionIndexes, index];\n\t\t}\n\t\tthis.updateLabel();\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\t\tthis.updateLabel();\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\t<div\n\t\t\t\t\t\t\tclass={`ontario-accordion ${this.openAccordionIndexes.includes(index) ? 'open' : ''}`}\n\t\t\t\t\t\t\tkey={`accordion-${index}`}\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t<h3\n\t\t\t\t\t\t\t\tclass={`ontario-accordion__heading ${\n\t\t\t\t\t\t\t\t\tthis.openAccordionIndexes.includes(index) ? 'ontario-expander--active' : ''\n\t\t\t\t\t\t\t\t}`}\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t<button\n\t\t\t\t\t\t\t\t\tclass=\"ontario-accordion__button\"\n\t\t\t\t\t\t\t\t\taria-expanded={this.openAccordionIndexes.includes(index) ? 'true' : 'false'}\n\t\t\t\t\t\t\t\t\tdata-toggle=\"ontario-collapse\"\n\t\t\t\t\t\t\t\t\tonClick={() => this.toggleAccordion(index)}\n\t\t\t\t\t\t\t\t\taria-label={accordion.ariaLabelText}\n\t\t\t\t\t\t\t\t>\n\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<ontario-icon-chevron-up colour=\"blue\"></ontario-icon-chevron-up>\n\t\t\t\t\t\t\t\t\t</span>\n\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<ontario-icon-chevron-down colour=\"blue\"></ontario-icon-chevron-down>\n\t\t\t\t\t\t\t\t\t</span>\n\t\t\t\t\t\t\t\t\t{accordion.label}\n\t\t\t\t\t\t\t\t</button>\n\t\t\t\t\t\t\t</h3>\n\t\t\t\t\t\t\t<section\n\t\t\t\t\t\t\t\tclass={`ontario-accordion__content ${\n\t\t\t\t\t\t\t\t\tthis.openAccordionIndexes.includes(index)\n\t\t\t\t\t\t\t\t\t\t? 'ontario-accordion__content--opened'\n\t\t\t\t\t\t\t\t\t\t: 'ontario-accordion__content--closed'\n\t\t\t\t\t\t\t\t}`}\n\t\t\t\t\t\t\t\taria-hidden={!this.openAccordionIndexes.includes(index)}\n\t\t\t\t\t\t\t\tdata-toggle=\"ontario-expander-content\"\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t{accordion.accordionContentType === 'html' ? (\n\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) : (\n\t\t\t\t\t\t\t\t\t<div>{accordion.content}</div>\n\t\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t\t</section>\n\t\t\t\t\t\t</div>\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/dist/components/ontario-aside.js

@@ -1,29 +1,49 @@
-import { proxyCustomElement, HTMLElement } from '@stencil/core/internal/client';
+import { p as proxyCustomElement, H } from './p-846438ed.js';
 import {
 	i as isValidHeadingLevel,
 	H as HeadingContentTypes,
 	a as isValidHighlightColour,
 	g as generateCalloutAside,
-} from './callout-aside-helpers.js';
-import { a as validateValueAgainstArray } from './validation-functions.js';
-import { C as ConsoleMessageClass } from './console-message.js';
+} from './p-7b0a81fd.js';
+import { a as validateValueAgainstArray } from './p-edb765a1.js';
+import { C as ConsoleMessageClass } from './p-b2019a19.js';
 
 const ontarioAsideCss =
 	'@charset "UTF-8";h6,.ontario-h6,h5,.ontario-h5,h4,.ontario-h4,h3,.ontario-h3,h2,.ontario-h2,h1,.ontario-h1{font-style:normal;font-weight:700;text-rendering:optimizeLegibility;margin-bottom:1rem;font-feature-settings:normal;font-family:"Raleway", "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif}h1,.ontario-h1{font-size:2rem;letter-spacing:0.04rem;line-height:1.29;margin:2.5rem 0 1.5rem 0;max-width:70rem}@media screen and (min-width: 40em){h1,.ontario-h1{font-size:2.5rem;letter-spacing:0.04rem;line-height:1.2}}h2,.ontario-h2{font-size:1.6875rem;letter-spacing:0.03rem;line-height:1.37;margin:0 0 0.75rem 0;max-width:48rem}@media screen and (min-width: 40em){h2,.ontario-h2{font-size:2.0625rem;letter-spacing:0.02rem;line-height:1.33}}h3,.ontario-h3{font-size:1.4375rem;letter-spacing:0.02rem;line-height:1.39;margin:0 0 0.75rem 0;max-width:48rem}@media screen and (min-width: 40em){h3,.ontario-h3{font-size:1.75rem;letter-spacing:0.02rem;line-height:1.43}}h4,.ontario-h4{font-size:1.25rem;letter-spacing:0.03rem;line-height:1.5;margin:0 0 0.75rem 0;max-width:48rem}@media screen and (min-width: 40em){h4,.ontario-h4{font-size:1.5rem;letter-spacing:0.0313rem;line-height:1.5}}h5,.ontario-h5{font-size:1.125rem;letter-spacing:0.03rem;line-height:1.56;margin:0 0 0.75rem 0;max-width:48rem}@media screen and (min-width: 40em){h5,.ontario-h5{font-size:1.1875rem;letter-spacing:0.025rem;line-height:1.5}}h6,.ontario-h6{font-size:1rem;line-height:1.56;letter-spacing:0.03rem;max-width:48rem;margin:0 0 0.75rem 0}@media screen and (min-width: 40em){h6,.ontario-h6{font-size:1rem;letter-spacing:0.025rem;line-height:1.5}}.ontario-lead-statement{font-size:1.25rem;line-height:1.6;max-width:70rem}@media screen and (min-width: 40em){.ontario-lead-statement{font-size:1.375rem}}html{font-family:"Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;font-size:1rem}body{font-size:1rem;line-height:1.6;background-color:#FFFFFF;color:#1a1a1a;margin:0}p{font-size:inherit;margin-bottom:1.25rem;text-rendering:optimizeLegibility;margin:0 0 1.5rem 0}cite{font-style:italic;line-height:inherit}strong{font-weight:700;line-height:inherit}*,*::before,*::after{box-sizing:inherit}main p,main p:not(.ontario-lead-statement),main dd,main li{max-width:48rem}hr{border:0;padding:0;margin:2.5rem 0;border-bottom:4px solid #cccccc}hr.ontario-hr--dark{border-bottom:4px solid #1a1a1a}a{color:#0066CC;text-decoration:underline}a:visited{color:#551A8B}a:hover{color:#00478F}a:active{color:#002142}a:focus{-moz-box-shadow:0 0 0 4px #009ADB;-webkit-box-shadow:0 0 0 4px #009ADB;box-shadow:0 0 0 4px #009ADB;outline:4px solid transparent;transition:all 0.1s ease-in-out}​p{margin:0 0 1.5rem 0}​p+h1,p+h2,p+h3,p+h4,p+h5,p+h6,ul+h1,ul+h2,ul+h3,ul+h4,ul+h5,ul+h6,ol+h1,ol+h2,ol+h3,ol+h4,ol+h5,ol+h6,h1+h2,h2+h3,h3+h4,h4+h5,h5+h6{margin-top:2rem}p code,td code,li code{line-height:2.25rem}input[type=text],input[type=number],input[type=email],input[type=date],input[type=color],input[type=search],input[type=tel],textarea{background-origin:initial;height:auto;-webkit-appearance:none;-moz-appearance:none}input[type=checkbox]+label,input[type=radio]+label{font-family:"Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;font-size:1rem;font-weight:400;margin-left:0;margin-right:0}fieldset{border:0;margin:0;padding:0;page-break-inside:avoid}legend,label{display:block;margin:0}select{background-origin:initial;height:auto;-webkit-appearance:none;-moz-appearance:none}ul,ol{padding:0}ul{margin-left:2rem}ul li{padding:0 0 0.75rem 0}ol{margin-left:1.75rem}ol li{padding:0 0 0.75rem 0.25rem}ul li:last-child,ol li:last-child{padding-bottom:0}ul[class*=columns-] li:last-child,ol[class*=columns-] li:last-child{padding-bottom:0.75rem}ul ul,ol ul{margin:0.5rem 0 0.5rem 2rem}ul ol,ol ol{margin:0.5rem 0 0.5rem 1.75rem}p+ul,p+ol{margin-top:-0.75rem}@media screen and (min-width: 40em){ul{margin:0.5rem 0 1.5rem 3rem}ol{margin:0.5rem 0 1.5rem 2.75rem}ul ul,ol ul{margin:0.5rem 0 0.5rem 3rem}ul ol,ol ol{margin:0.5rem 0 0.5rem 2.75rem}}.ontario-aside{border-left:0.25rem solid #367A76;padding:1.5rem;margin:2rem 0 2.5rem 2rem}.ontario-aside *{max-width:48rem}.ontario-aside *:last-child{margin-bottom:0.5rem}@media screen and (max-width: 40em){.ontario-aside .ontario-aside{margin:2rem 0 2.5rem 1rem}}.ontario-aside__title{margin:0 0 1rem}.ontario-border-highlight--teal{border-color:#367A76 !important}.ontario-border-highlight--gold{border-color:#86743D !important}.ontario-border-highlight--yellow{border-color:#8A600D !important}.ontario-border-highlight--taupe{border-color:#7B725C !important}.ontario-border-highlight--green{border-color:#2B8737 !important}.ontario-border-highlight--lime{border-color:#5F8129 !important}.ontario-border-highlight--sky{border-color:#1080A6 !important}.ontario-border-highlight--blue{border-color:#0369ac !important}.ontario-border-highlight--purple{border-color:#92278F !important}';
 const OntarioAsideStyle0 = ontarioAsideCss;
 
 const OntarioAside$1 = /*@__PURE__*/ proxyCustomElement(
-	class OntarioAside extends HTMLElement {
+	class OntarioAside extends H {
 		constructor() {
 			super();
 			this.__registerHost();
 			this.__attachShadow();
-			this.headingType = undefined;
-			this.headingContentType = 'string';
-			this.headingContent = undefined;
-			this.content = undefined;
-			this.highlightColour = 'teal';
 		}
+		/**
+		 * The heading level of the aside heading.
+		 */
+		headingType;
+		/**
+		 * The type of the heading content. If no prop is passed, it will default to string.
+		 */
+		headingContentType = 'string';
+		/**
+		 * 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`.
+		 */
+		headingContent;
+		/**
+		 * 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.
+		 *
+		 * HTML content can also be passed as the child/children of the aside component if additional/different elements for the content are needed.
+		 *
+		 * @example
+		 * <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>
+		 */
+		content;
+		/**
+		 * Optional prop to choose the border colour of the aside. If none is passed, the default colour will be teal.
+		 */
+		highlightColour = 'teal';
 		/**
 		 * Watch for changes to the `headingType` prop.
 		 *

package/dist/components/ontario-aside.js.map

@@ -1 +1 @@
-{"file":"ontario-aside.js","mappings":";;;;;AAAA,MAAM,eAAe,GAAG,yzJAAyzJ,CAAC;AACl1J,2BAAe,eAAe;;MCqBjBA,cAAY;;;;;;kCAS0C,QAAQ;;;+BAoBN,MAAM;;;;;;;IAQ1E,mBAAmB;QAClB,IAAI,CAAC,CAAC,IAAI,CAAC,WAAW,EAAE;YACvB,IAAI,mBAAmB,CAAC,IAAI,CAAC,WAAW,CAAC;gBAAE,OAAO,IAAI,CAAC,WAAW,CAAC;YAEnE,MAAM,OAAO,GAAG,IAAI,mBAAmB,EAAE,CAAC;YAC1C,OAAO,OAAO;iBACZ,kBAAkB,EAAE;iBACpB,gBAAgB,CAAC,gBAAgB,IAAI,CAAC,WAAW,GAAG,CAAC;iBACrD,cAAc,CAAC,KAAK,CAAC;iBACrB,gBAAgB,CAAC,mBAAmB,CAAC;iBACrC,cAAc,CAAC,4FAA4F,CAAC;iBAC5G,YAAY,EAAE,CAAC;SACjB;KACD;;;;;;;IASD,0BAA0B;QACzB,MAAM,OAAO,GAAG,yBAAyB,CAAC,IAAI,CAAC,kBAAkB,EAAE,mBAAmB,CAAC,CAAC;QACxF,IAAI,OAAO,EAAE;YACZ,OAAO,IAAI,CAAC,kBAAkB,CAAC;SAC/B;aAAM;YACN,OAAO,IAAI,CAAC,eAAe,EAAE,CAAC;SAC9B;KACD;;;;;;IAQD,uBAAuB;QACtB,IAAI,IAAI,CAAC,eAAe,EAAE;YACzB,IAAI,sBAAsB,CAAC,IAAI,CAAC,eAAe,CAAC;gBAAE,OAAO,IAAI,CAAC,eAAe,CAAC;iBACzE;gBACJ,MAAM,OAAO,GAAG,IAAI,mBAAmB,EAAE,CAAC;gBAC1C,OAAO;qBACL,kBAAkB,EAAE;qBACpB,gBAAgB,CAAC,oBAAoB,IAAI,CAAC,eAAe,GAAG,CAAC;qBAC7D,cAAc,CAAC,KAAK,CAAC;qBACrB,gBAAgB,CAAC,mBAAmB,CAAC;qBACrC,cAAc,CACd,oGAAoG,CACpG;qBACA,YAAY,EAAE,CAAC;aACjB;SACD;;QAGD,OAAO,MAAM,CAAC;KACd;;;;;IAMO,eAAe;QACtB,MAAM,OAAO,GAAG,IAAI,mBAAmB,EAAE,CAAC;QAC1C,OAAO;aACL,kBAAkB,EAAE;aACpB,gBAAgB,CAAC,sBAAsB,CAAC;aACxC,cAAc,CAAC,IAAI,CAAC;aACpB,gBAAgB,CAAC,mBAAmB,CAAC;aACrC,cAAc,CAAC,kCAAkC,CAAC;aAClD,gBAAgB,CAAC,kBAAkB,CAAC;aACpC,cAAc,CAAC,iCAAiC,CAAC;aACjD,gBAAgB,CAAC,UAAU,CAAC;aAC5B,cAAc,CAAC,aAAa,CAAC;aAC7B,YAAY,EAAE,CAAC;QACjB,QAAQ,IAAI,CAAC,kBAAkB,GAAG,QAAQ,EAAE;KAC5C;IAED,iBAAiB;QAChB,IAAI,CAAC,uBAAuB,EAAE,CAAC;QAC/B,IAAI,CAAC,mBAAmB,EAAE,CAAC;QAC3B,IAAI,CAAC,0BAA0B,EAAE,CAAC;KAClC;IAED,MAAM;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,CAAC;KACF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["OntarioAside"],"sources":["src/components/ontario-aside/ontario-aside.scss?tag=ontario-aside&encapsulation=shadow","src/components/ontario-aside/ontario-aside.tsx"],"sourcesContent":["@use '@ongov/ontario-design-system-global-styles/dist/styles/scss/1-variables/spacing.variables' as spacing;\n@use '@ongov/ontario-design-system-global-styles/dist/styles/scss/1-variables/colours.variables' as colours;\n@use '@ongov/ontario-design-system-global-styles/dist/styles/scss/1-variables/global.variables' as globalVariables;\n@use '@ongov/ontario-design-system-global-styles/dist/styles/scss/1-variables/breakpoints.variables' as breakpoints;\n@use '@ongov/ontario-design-system-global-styles/dist/styles/scss/4-elements/global.elements';\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\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,yzJAAyzJ,CAAC;AACl1J,2BAAe,eAAe;;MCqBjBA,cAAY;;;;;;;;;IAIC,WAAW,CAAuB;;;;IAKlC,kBAAkB,GAAuB,QAAQ,CAAC;;;;IAKnE,cAAc,CAAU;;;;;;;;;IAUxB,OAAO,CAAU;;;;IAKA,eAAe,GAA4B,MAAM,CAAC;;;;;;IAQ3E,mBAAmB;QAClB,IAAI,CAAC,CAAC,IAAI,CAAC,WAAW,EAAE;YACvB,IAAI,mBAAmB,CAAC,IAAI,CAAC,WAAW,CAAC;gBAAE,OAAO,IAAI,CAAC,WAAW,CAAC;YAEnE,MAAM,OAAO,GAAG,IAAI,mBAAmB,EAAE,CAAC;YAC1C,OAAO,OAAO;iBACZ,kBAAkB,EAAE;iBACpB,gBAAgB,CAAC,gBAAgB,IAAI,CAAC,WAAW,GAAG,CAAC;iBACrD,cAAc,CAAC,KAAK,CAAC;iBACrB,gBAAgB,CAAC,mBAAmB,CAAC;iBACrC,cAAc,CAAC,4FAA4F,CAAC;iBAC5G,YAAY,EAAE,CAAC;SACjB;KACD;;;;;;;IASD,0BAA0B;QACzB,MAAM,OAAO,GAAG,yBAAyB,CAAC,IAAI,CAAC,kBAAkB,EAAE,mBAAmB,CAAC,CAAC;QACxF,IAAI,OAAO,EAAE;YACZ,OAAO,IAAI,CAAC,kBAAkB,CAAC;SAC/B;aAAM;YACN,OAAO,IAAI,CAAC,eAAe,EAAE,CAAC;SAC9B;KACD;;;;;;IAQD,uBAAuB;QACtB,IAAI,IAAI,CAAC,eAAe,EAAE;YACzB,IAAI,sBAAsB,CAAC,IAAI,CAAC,eAAe,CAAC;gBAAE,OAAO,IAAI,CAAC,eAAe,CAAC;iBACzE;gBACJ,MAAM,OAAO,GAAG,IAAI,mBAAmB,EAAE,CAAC;gBAC1C,OAAO;qBACL,kBAAkB,EAAE;qBACpB,gBAAgB,CAAC,oBAAoB,IAAI,CAAC,eAAe,GAAG,CAAC;qBAC7D,cAAc,CAAC,KAAK,CAAC;qBACrB,gBAAgB,CAAC,mBAAmB,CAAC;qBACrC,cAAc,CACd,oGAAoG,CACpG;qBACA,YAAY,EAAE,CAAC;aACjB;SACD;;QAGD,OAAO,MAAM,CAAC;KACd;;;;;IAMO,eAAe;QACtB,MAAM,OAAO,GAAG,IAAI,mBAAmB,EAAE,CAAC;QAC1C,OAAO;aACL,kBAAkB,EAAE;aACpB,gBAAgB,CAAC,sBAAsB,CAAC;aACxC,cAAc,CAAC,IAAI,CAAC;aACpB,gBAAgB,CAAC,mBAAmB,CAAC;aACrC,cAAc,CAAC,kCAAkC,CAAC;aAClD,gBAAgB,CAAC,kBAAkB,CAAC;aACpC,cAAc,CAAC,iCAAiC,CAAC;aACjD,gBAAgB,CAAC,UAAU,CAAC;aAC5B,cAAc,CAAC,aAAa,CAAC;aAC7B,YAAY,EAAE,CAAC;QACjB,QAAQ,IAAI,CAAC,kBAAkB,GAAG,QAAQ,EAAE;KAC5C;IAED,iBAAiB;QAChB,IAAI,CAAC,uBAAuB,EAAE,CAAC;QAC/B,IAAI,CAAC,mBAAmB,EAAE,CAAC;QAC3B,IAAI,CAAC,0BAA0B,EAAE,CAAC;KAClC;IAED,MAAM;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,CAAC;KACF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["OntarioAside"],"sources":["src/components/ontario-aside/ontario-aside.scss?tag=ontario-aside&encapsulation=shadow","src/components/ontario-aside/ontario-aside.tsx"],"sourcesContent":["@use '@ongov/ontario-design-system-global-styles/dist/styles/scss/1-variables/spacing.variables' as spacing;\n@use '@ongov/ontario-design-system-global-styles/dist/styles/scss/1-variables/colours.variables' as colours;\n@use '@ongov/ontario-design-system-global-styles/dist/styles/scss/1-variables/global.variables' as globalVariables;\n@use '@ongov/ontario-design-system-global-styles/dist/styles/scss/1-variables/breakpoints.variables' as breakpoints;\n@use '@ongov/ontario-design-system-global-styles/dist/styles/scss/4-elements/global.elements';\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\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}

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

@@ -1,6 +1,6 @@
-import { proxyCustomElement, HTMLElement, h } from '@stencil/core/internal/client';
-import { v as validateLanguage } from './validation-functions.js';
-import { t as translations } from './global.i18n.js';
+import { p as proxyCustomElement, H, h } from './p-846438ed.js';
+import { v as validateLanguage } from './p-edb765a1.js';
+import { t as translations } from './p-a5331e15.js';
 
 const OntarioIconArrowUp = `<svg class="ontario-icon" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="#000000"><path d="M0 0h24v24H0V0z" fill="none"/><path d="M4 12l1.41 1.41L11 7.83V20h2V7.83l5.58 5.59L20 12l-8-8-8 8z"/></svg>
 `;
@@ -10,16 +10,23 @@ const ontarioBackToTopCss =
 const OntarioBackToTopStyle0 = ontarioBackToTopCss;
 
 const OntarioBackToTop$1 = /*@__PURE__*/ proxyCustomElement(
-	class OntarioBackToTop extends HTMLElement {
+	class OntarioBackToTop extends H {
 		constructor() {
 			super();
 			this.__registerHost();
 			this.__attachShadow();
-			this.language = undefined;
-			this.translations = translations;
-			this.displayBackToTop = false;
-			this.scrollYValue = 200;
 		}
+		get element() {
+			return this;
+		}
+		/**
+		 * The language of the component.
+		 * This is used for translations, and is by default set through event listeners checking for a language property from the header. If no language prop is passed, it will default to English.
+		 */
+		language;
+		translations = translations;
+		displayBackToTop = false;
+		scrollYValue = 200;
 		/**
 		 * 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.
 		 */
@@ -63,9 +70,6 @@ const OntarioBackToTop$1 = /*@__PURE__*/ proxyCustomElement(
 				this.translations.backToTop.top[`${this.language}`],
 			);
 		}
-		get element() {
-			return this;
-		}
 		static get style() {
 			return OntarioBackToTopStyle0;
 		}

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

@@ -1 +1 @@
-{"file":"ontario-back-to-top.js","mappings":";;;;;;;AAAA,MAAM,mBAAmB,GAAG,kgEAAkgE,CAAC;AAC/hE,+BAAe,mBAAmB;;MCYrBA,kBAAgB;;;;;;4BASC,YAAY;gCAEI,KAAK;4BAEV,GAAG;;;;;IAM3C,mBAAmB;QAClB,IAAI,CAAC,gBAAgB,GAAG,MAAM,CAAC,OAAO,GAAG,IAAI,CAAC,YAAY,CAAC;KAC3D;;;;IAMD,oBAAoB,CAAC,KAA4B;QAChD,IAAI,CAAC,IAAI,CAAC,QAAQ,EAAE;YACnB,IAAI,CAAC,QAAQ,GAAG,gBAAgB,CAAC,KAAK,CAAC,CAAC;SACxC;KACD;IAGD,2BAA2B,CAAC,KAA4B;QACvD,IAAI,CAAC,QAAQ,GAAG,gBAAgB,CAAC,KAAK,CAAC,CAAC;KACxC;;;;IAKO,WAAW;QAClB,MAAM,CAAC,QAAQ,CAAC,EAAE,GAAG,EAAE,CAAC,EAAE,IAAI,EAAE,CAAC,EAAE,QAAQ,EAAE,QAAQ,EAAE,CAAC,CAAC;KACzD;IAED,iBAAiB;QAChB,IAAI,CAAC,QAAQ,GAAG,gBAAgB,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC;KAChD;IAED,MAAM;QACL,QACC,+DACC,KAAK,EAAE,IAAI,CAAC,gBAAgB,GAAG,4BAA4B,GAAG,qBAAqB,EACnF,OAAO,EAAE,IAAI,CAAC,WAAW,gBACb,IAAI,CAAC,YAAY,CAAC,SAAS,CAAC,SAAS,CAAC,GAAG,IAAI,CAAC,QAAQ,EAAE,CAAC,IAErE,4EAAkB,MAAM,EAAC,SAAS,EAAE,kBAAkB,GAAS,EAC9D,IAAI,CAAC,YAAY,CAAC,SAAS,CAAC,GAAG,CAAC,GAAG,IAAI,CAAC,QAAQ,EAAE,CAAC,CAC5C,EACR;KACF;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["OntarioBackToTop"],"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 '@ongov/ontario-design-system-global-styles/dist/styles/scss/1-variables/global.variables' as globalVariables;\n@use '@ongov/ontario-design-system-global-styles/dist/styles/scss/1-variables/spacing.variables' as spacing;\n@use '@ongov/ontario-design-system-global-styles/dist/styles/scss/1-variables/colours.variables' as colours;\n@use '@ongov/ontario-design-system-global-styles/dist/styles/scss/1-variables/breakpoints.variables' as breakpoints;\n@use '@ongov/ontario-design-system-global-styles/dist/styles/scss/1-variables/typography.variables' as typography;\n@use '@ongov/ontario-design-system-global-styles/dist/styles/scss/2-tools/functions/global.functions' as globalFunctions;\n@use '@ongov/ontario-design-system-global-styles/dist/styles/scss/1-variables/font-sizes.variables' as fontSizes;\n@use '@ongov/ontario-design-system-global-styles/dist/styles/scss/1-variables/font-weights.variables' as fontWeights;\n@use '@ongov/ontario-design-system-global-styles/dist/styles/scss/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: typography.$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: 0 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: 0 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: background-color 0s, focusPlaceholders.$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\t.ontario-icon {\n\t\t\tmargin: spacing.$spacing-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';\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\tthis.displayBackToTop = window.scrollY > this.scrollYValue;\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@Listen('headerLanguageToggled', { target: 'window' })\n\thandleHeaderLanguageToggled(event: CustomEvent<Language>) {\n\t\tthis.language = validateLanguage(event);\n\t}\n\n\t/**\n\t * Scroll to top functionality when the Back to Top button is clicked\n\t */\n\tprivate scrollToTop() {\n\t\twindow.scrollTo({ top: 0, left: 0, behavior: 'smooth' });\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,kgEAAkgE,CAAC;AAC/hE,+BAAe,mBAAmB;;MCYrBA,kBAAgB;;;;;;;;;;;IAOH,QAAQ,CAAY;IAEpC,YAAY,GAAQ,YAAY,CAAC;IAEzB,gBAAgB,GAAY,KAAK,CAAC;IAElC,YAAY,GAAW,GAAG,CAAC;;;;IAM5C,mBAAmB;QAClB,IAAI,CAAC,gBAAgB,GAAG,MAAM,CAAC,OAAO,GAAG,IAAI,CAAC,YAAY,CAAC;KAC3D;;;;IAMD,oBAAoB,CAAC,KAA4B;QAChD,IAAI,CAAC,IAAI,CAAC,QAAQ,EAAE;YACnB,IAAI,CAAC,QAAQ,GAAG,gBAAgB,CAAC,KAAK,CAAC,CAAC;SACxC;KACD;IAGD,2BAA2B,CAAC,KAA4B;QACvD,IAAI,CAAC,QAAQ,GAAG,gBAAgB,CAAC,KAAK,CAAC,CAAC;KACxC;;;;IAKO,WAAW;QAClB,MAAM,CAAC,QAAQ,CAAC,EAAE,GAAG,EAAE,CAAC,EAAE,IAAI,EAAE,CAAC,EAAE,QAAQ,EAAE,QAAQ,EAAE,CAAC,CAAC;KACzD;IAED,iBAAiB;QAChB,IAAI,CAAC,QAAQ,GAAG,gBAAgB,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC;KAChD;IAED,MAAM;QACL,QACC,+DACC,KAAK,EAAE,IAAI,CAAC,gBAAgB,GAAG,4BAA4B,GAAG,qBAAqB,EACnF,OAAO,EAAE,IAAI,CAAC,WAAW,gBACb,IAAI,CAAC,YAAY,CAAC,SAAS,CAAC,SAAS,CAAC,GAAG,IAAI,CAAC,QAAQ,EAAE,CAAC,IAErE,4EAAkB,MAAM,EAAC,SAAS,EAAE,kBAAkB,GAAS,EAC9D,IAAI,CAAC,YAAY,CAAC,SAAS,CAAC,GAAG,CAAC,GAAG,IAAI,CAAC,QAAQ,EAAE,CAAC,CAC5C,EACR;KACF;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["OntarioBackToTop"],"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 '@ongov/ontario-design-system-global-styles/dist/styles/scss/1-variables/global.variables' as globalVariables;\n@use '@ongov/ontario-design-system-global-styles/dist/styles/scss/1-variables/spacing.variables' as spacing;\n@use '@ongov/ontario-design-system-global-styles/dist/styles/scss/1-variables/colours.variables' as colours;\n@use '@ongov/ontario-design-system-global-styles/dist/styles/scss/1-variables/breakpoints.variables' as breakpoints;\n@use '@ongov/ontario-design-system-global-styles/dist/styles/scss/1-variables/fonts.variables' as fonts;\n@use '@ongov/ontario-design-system-global-styles/dist/styles/scss/2-tools/functions/global.functions' as globalFunctions;\n@use '@ongov/ontario-design-system-global-styles/dist/styles/scss/1-variables/font-sizes.variables' as fontSizes;\n@use '@ongov/ontario-design-system-global-styles/dist/styles/scss/1-variables/font-weights.variables' as fontWeights;\n@use '@ongov/ontario-design-system-global-styles/dist/styles/scss/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\t.ontario-icon {\n\t\t\tmargin: spacing.$spacing-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';\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\tthis.displayBackToTop = window.scrollY > this.scrollYValue;\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@Listen('headerLanguageToggled', { target: 'window' })\n\thandleHeaderLanguageToggled(event: CustomEvent<Language>) {\n\t\tthis.language = validateLanguage(event);\n\t}\n\n\t/**\n\t * Scroll to top functionality when the Back to Top button is clicked\n\t */\n\tprivate scrollToTop() {\n\t\twindow.scrollTo({ top: 0, left: 0, behavior: 'smooth' });\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}