@ongov/ontario-design-system-component-library 4.2.0-alpha.1

package/dist/components/input.js

@@ -0,0 +1,85 @@
+import { h } from '@stencil/core/internal/client';
+
+var __rest =
+	(undefined && undefined.__rest) ||
+	function (s, e) {
+		var t = {};
+		for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0) t[p] = s[p];
+		if (s != null && typeof Object.getOwnPropertySymbols === 'function')
+			for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+				if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i])) t[p[i]] = s[p[i]];
+			}
+		return t;
+	};
+const Input = (_a) => {
+	var {
+			autoComplete,
+			className,
+			id,
+			name,
+			placeholder,
+			type,
+			value,
+			checked,
+			required,
+			onKeyDown,
+			onInput,
+			onChange,
+			onBlur,
+			onFocus,
+			ariaInvalid,
+			ariaDescribedBy,
+			ref,
+			inputMode,
+		} = _a,
+		props = __rest(_a, [
+			'autoComplete',
+			'className',
+			'id',
+			'name',
+			'placeholder',
+			'type',
+			'value',
+			'checked',
+			'required',
+			'onKeyDown',
+			'onInput',
+			'onChange',
+			'onBlur',
+			'onFocus',
+			'ariaInvalid',
+			'ariaDescribedBy',
+			'ref',
+			'inputMode',
+		]);
+	return h(
+		'input',
+		Object.assign(
+			{
+				'autoComplete': autoComplete,
+				'class': className,
+				'id': id,
+				'name': name,
+				'type': type,
+				'value': value,
+				'checked': checked,
+				'placeholder': placeholder,
+				'required': !!required,
+				'onKeyDown': onKeyDown,
+				'onInput': onInput,
+				'onChange': onChange,
+				'onBlur': onBlur,
+				'onFocus': onFocus,
+				'inputMode': inputMode,
+				'ref': ref,
+				'aria-invalid': ariaInvalid,
+				'aria-describedby': ariaDescribedBy,
+			},
+			props,
+		),
+	);
+};
+
+export { Input as I };
+
+//# sourceMappingURL=input.js.map

package/dist/components/input.js.map

@@ -0,0 +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}

package/dist/components/ontario-accordion.d.ts

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

package/dist/components/ontario-accordion.js

@@ -0,0 +1,285 @@
+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';
+
+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 {
+		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 = [];
+		}
+		/**
+		 * 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.
+		 */
+		handleSetAppLanguage(event) {
+			if (!this.language) {
+				this.language = validateLanguage(event);
+			}
+		}
+		/**
+		 * Handle the language being toggled from the `<ontario-header>`.
+		 * @param event Event object passed when the event is fired.
+		 */
+		handleHeaderLanguageToggled(event) {
+			this.language = validateLanguage(event);
+		}
+		/**
+		 * Parse Accordion data, this is used to handle JSON strings from HTML.
+		 */
+		parseAccordionData() {
+			if (typeof this.accordionData !== 'undefined') {
+				this.internalAccordionData = Array.isArray(this.accordionData)
+					? this.accordionData
+					: JSON.parse(this.accordionData);
+			}
+			// Initialize the label based on the initial accordion state
+			this.updateLabel();
+		}
+		/**
+		 * Parse Expand/Collapse Button Details, this is used to handle JSON strings from HTML.
+		 */
+		parseExpandCollapseButtonDetails() {
+			if (typeof this.expandCollapseButton !== 'undefined') {
+				this.internalExpandCollapseLabelDetails =
+					typeof this.expandCollapseButton === 'string'
+						? JSON.parse(this.expandCollapseButton)
+						: this.expandCollapseButton;
+			}
+		}
+		// Toggle the accordion state when it's clicked
+		toggleAccordion(index) {
+			if (this.openAccordionIndexes.includes(index)) {
+				// If the accordion is already open, close it
+				this.openAccordionIndexes = this.openAccordionIndexes.filter((i) => i !== index);
+			} else {
+				// If the accordion is closed, open it
+				this.openAccordionIndexes = [...this.openAccordionIndexes, index];
+			}
+			this.updateLabel();
+		}
+		/**
+		 * Toggle all accordions open/close
+		 */
+		toggleAll() {
+			if (this.openAccordionIndexes.length === this.internalAccordionData.length) {
+				// All accordions are open, close all
+				this.openAccordionIndexes = [];
+			} else {
+				// At least one accordion is closed, open all
+				this.openAccordionIndexes = this.internalAccordionData.map((_, index) => index);
+			}
+			this.updateLabel();
+		}
+		/**
+		 * Update the label based on the current accordion state
+		 */
+		updateLabel() {
+			const allOpen = this.internalAccordionData.every((_, index) => this.openAccordionIndexes.includes(index));
+			if (allOpen) {
+				// All accordions are open, set label to "Collapse all"
+				this.expandCollapseLabel = 'collapse';
+			} else {
+				// At least one accordion is closed, set label to "Expand all"
+				this.expandCollapseLabel = 'expand';
+			}
+		}
+		componentWillLoad() {
+			this.parseAccordionData();
+			this.parseExpandCollapseButtonDetails();
+			this.language = validateLanguage(this.language);
+		}
+		render() {
+			var _a, _b, _c, _d, _e, _f;
+			return h(
+				'div',
+				{ key: '3d024ea02e809459320c06b2952a45dcddba4f46' },
+				h('h2', { key: 'e12b9f0940111c6467a5451fe9bd4fbd2bd5ffc3' }, this.name),
+				h(
+					'div',
+					{ key: '52cb77f0c1b3df890b65fad742b94d7e353e8bd3', class: 'ontario-accordions__container' },
+					h(
+						'div',
+						{ key: '7c19c5bec0ff393075ffde690770a9e77f9c8eb9', class: 'ontario-accordion__controls' },
+						h(
+							'button',
+							{
+								'key': 'dfc002b4a720909c9284827fcd86f85b9598ee33',
+								'class': 'ontario-accordion__button--expand-all',
+								'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,
+							},
+							h(
+								'span',
+								{ key: '302cb41727337a1ae7156b3aa6f3d145c726e611', class: 'ontario-accordion--expand-open-all' },
+								this.expandCollapseLabel === 'expand'
+									? 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}`],
+									  )
+									: 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}`],
+									  ),
+							),
+						),
+					),
+					(_f = this.internalAccordionData) === null || _f === void 0
+						? void 0
+						: _f.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(
+											'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,
+										),
+									),
+									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'],
+				expandCollapseButton: ['parseExpandCollapseButtonDetails'],
+			};
+		}
+		static get style() {
+			return OntarioAccordionStyle0;
+		}
+	},
+	[
+		1,
+		'ontario-accordion',
+		{
+			name: [1],
+			expandCollapseButton: [1, 'expand-collapse-button'],
+			accordionData: [1, 'accordion-data'],
+			isOpen: [4, 'is-open'],
+			language: [1025],
+			translations: [32],
+			expandCollapseLabel: [32],
+			internalExpandCollapseLabelDetails: [32],
+			internalAccordionData: [32],
+			openAccordionIndexes: [32],
+		},
+		[
+			[8, 'setAppLanguage', 'handleSetAppLanguage'],
+			[8, 'headerLanguageToggled', 'handleHeaderLanguageToggled'],
+		],
+		{
+			accordionData: ['parseAccordionData'],
+			expandCollapseButton: ['parseExpandCollapseButtonDetails'],
+		},
+	],
+);
+function defineCustomElement$1() {
+	if (typeof customElements === 'undefined') {
+		return;
+	}
+	const components = ['ontario-accordion', 'ontario-icon-chevron-down', 'ontario-icon-chevron-up'];
+	components.forEach((tagName) => {
+		switch (tagName) {
+			case 'ontario-accordion':
+				if (!customElements.get(tagName)) {
+					customElements.define(tagName, OntarioAccordion$1);
+				}
+				break;
+			case 'ontario-icon-chevron-down':
+				if (!customElements.get(tagName)) {
+					defineCustomElement$3();
+				}
+				break;
+			case 'ontario-icon-chevron-up':
+				if (!customElements.get(tagName)) {
+					defineCustomElement$2();
+				}
+				break;
+		}
+	});
+}
+
+const OntarioAccordion = OntarioAccordion$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { OntarioAccordion, defineCustomElement };
+
+//# sourceMappingURL=ontario-accordion.js.map

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

@@ -0,0 +1 @@
+{"file":"ontario-accordion.js","mappings":";;;;;;AAAA,MAAM,mBAAmB,GAAG,+qGAA+qG,CAAC;AAC5sG,+BAAe,mBAAmB;;MCWrBA,kBAAgB;;;;;;;;sBAgDF,KAAK;;4BA8BF,YAAY;;;qCAgBa,EAAE;oCAKN,EAAE;;;;;IAvCpD,oBAAoB,CAAC,KAA4B;QAChD,IAAI,CAAC,IAAI,CAAC,QAAQ,EAAE;YACnB,IAAI,CAAC,QAAQ,GAAG,gBAAgB,CAAC,KAAK,CAAC,CAAC;SACxC;KACD;;;;;IAOD,2BAA2B,CAAC,KAA4B;QACvD,IAAI,CAAC,QAAQ,GAAG,gBAAgB,CAAC,KAAK,CAAC,CAAC;KACxC;;;;IAgCO,kBAAkB;QACzB,IAAI,OAAO,IAAI,CAAC,aAAa,KAAK,WAAW,EAAE;YAC9C,IAAI,CAAC,qBAAqB,GAAG,KAAK,CAAC,OAAO,CAAC,IAAI,CAAC,aAAa,CAAC;kBAC3D,IAAI,CAAC,aAAa;kBAClB,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,aAAa,CAAC,CAAC;SAClC;;QAGD,IAAI,CAAC,WAAW,EAAE,CAAC;KACnB;;;;IAMO,gCAAgC;QACvC,IAAI,OAAO,IAAI,CAAC,oBAAoB,KAAK,WAAW,EAAE;YACrD,IAAI,CAAC,kCAAkC;gBACtC,OAAO,IAAI,CAAC,oBAAoB,KAAK,QAAQ;sBAC1C,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,oBAAoB,CAAC;sBACrC,IAAI,CAAC,oBAAoB,CAAC;SAC9B;KACD;;IAGO,eAAe,CAAC,KAAa;QACpC,IAAI,IAAI,CAAC,oBAAoB,CAAC,QAAQ,CAAC,KAAK,CAAC,EAAE;;YAE9C,IAAI,CAAC,oBAAoB,GAAG,IAAI,CAAC,oBAAoB,CAAC,MAAM,CAAC,CAAC,CAAC,KAAK,CAAC,KAAK,KAAK,CAAC,CAAC;SACjF;aAAM;;YAEN,IAAI,CAAC,oBAAoB,GAAG,CAAC,GAAG,IAAI,CAAC,oBAAoB,EAAE,KAAK,CAAC,CAAC;SAClE;QACD,IAAI,CAAC,WAAW,EAAE,CAAC;KACnB;;;;IAKO,SAAS;QAChB,IAAI,IAAI,CAAC,oBAAoB,CAAC,MAAM,KAAK,IAAI,CAAC,qBAAqB,CAAC,MAAM,EAAE;;YAE3E,IAAI,CAAC,oBAAoB,GAAG,EAAE,CAAC;SAC/B;aAAM;;YAEN,IAAI,CAAC,oBAAoB,GAAG,IAAI,CAAC,qBAAqB,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,KAAK,KAAK,KAAK,CAAC,CAAC;SAChF;QACD,IAAI,CAAC,WAAW,EAAE,CAAC;KACnB;;;;IAKO,WAAW;QAClB,MAAM,OAAO,GAAG,IAAI,CAAC,qBAAqB,CAAC,KAAK,CAAC,CAAC,CAAC,EAAE,KAAK,KAAK,IAAI,CAAC,oBAAoB,CAAC,QAAQ,CAAC,KAAK,CAAC,CAAC,CAAC;QAE1G,IAAI,OAAO,EAAE;;YAEZ,IAAI,CAAC,mBAAmB,GAAG,UAAU,CAAC;SACtC;aAAM;;YAEN,IAAI,CAAC,mBAAmB,GAAG,QAAQ,CAAC;SACpC;KACD;IAED,iBAAiB;QAChB,IAAI,CAAC,kBAAkB,EAAE,CAAC;QAC1B,IAAI,CAAC,gCAAgC,EAAE,CAAC;QACxC,IAAI,CAAC,QAAQ,GAAG,gBAAgB,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC;KAChD;IAED,MAAM;;QACL,QACC,8DACC,6DAAK,IAAI,CAAC,IAAI,CAAM,EACpB,4DAAK,KAAK,EAAC,+BAA+B,IACzC,4DAAK,KAAK,EAAC,6BAA6B,IACvC,+DACC,KAAK,EAAC,uCAAuC,EAC7C,OAAO,EAAE,MAAM,IAAI,CAAC,SAAS,EAAE,mBAChB,IAAI,CAAC,oBAAoB,CAAC,MAAM,KAAK,IAAI,CAAC,qBAAqB,CAAC,MAAM,GAAG,MAAM,GAAG,OAAO,gBAC5F,MAAA,IAAI,CAAC,kCAAkC,0CAAE,aAAa,IAElE,6DAAM,KAAK,EAAC,oCAAoC,IAC9C,IAAI,CAAC,mBAAmB,KAAK,QAAQ,IACrC,eACE,MAAA,MAAA,IAAI,CAAC,kCAAkC,0CAAE,sBAAsB,mCAC/D,IAAI,CAAC,YAAY,CAAC,SAAS,CAAC,MAAM,CAAC,GAAG,IAAI,CAAC,QAAQ,EAAE,CAAC,CAClD,KAEN,eACE,MAAA,MAAA,IAAI,CAAC,kCAAkC,0CAAE,wBAAwB,mCACjE,IAAI,CAAC,YAAY,CAAC,SAAS,CAAC,QAAQ,CAAC,GAAG,IAAI,CAAC,QAAQ,EAAE,CAAC,CACpD,CACN,CACK,CACC,CACJ,EACL,MAAA,IAAI,CAAC,qBAAqB;eAAE,GAAG,CAAC,CAAC,SAAS,EAAE,KAAK,MACjD,WACC,KAAK,EAAE,qBAAqB,IAAI,CAAC,oBAAoB,CAAC,QAAQ,CAAC,KAAK,CAAC,GAAG,MAAM,GAAG,EAAE,EAAE,EACrF,GAAG,EAAE,aAAa,KAAK,EAAE,IAEzB,UACC,KAAK,EAAE,8BACN,IAAI,CAAC,oBAAoB,CAAC,QAAQ,CAAC,KAAK,CAAC,GAAG,0BAA0B,GAAG,EAC1E,EAAE,IAEF,cACC,KAAK,EAAC,2BAA2B,mBAClB,IAAI,CAAC,oBAAoB,CAAC,QAAQ,CAAC,KAAK,CAAC,GAAG,MAAM,GAAG,OAAO,iBAC/D,kBAAkB,EAC9B,OAAO,EAAE,MAAM,IAAI,CAAC,eAAe,CAAC,KAAK,CAAC,gBAC9B,SAAS,CAAC,aAAa,IAEnC,YAAM,KAAK,EAAC,uCAAuC,IAClD,+BAAyB,MAAM,EAAC,MAAM,GAA2B,CAC3D,EACP,YAAM,KAAK,EAAC,sCAAsC,IACjD,iCAA2B,MAAM,EAAC,MAAM,GAA6B,CAC/D,EACN,SAAS,CAAC,KAAK,CACR,CACL,EACL,eACC,KAAK,EAAE,8BACN,IAAI,CAAC,oBAAoB,CAAC,QAAQ,CAAC,KAAK,CAAC;sBACtC,oCAAoC;sBACpC,oCACJ,EAAE,iBACW,CAAC,IAAI,CAAC,oBAAoB,CAAC,QAAQ,CAAC,KAAK,CAAC,iBAC3C,0BAA0B,IAErC,SAAS,CAAC,oBAAoB,KAAK,MAAM,IACzC,WAAK,SAAS,EAAE,SAAS,CAAC,OAAO,GAAQ;iBAEzC,eAAM,SAAS,CAAC,OAAO,CAAO,CAC9B,CACQ,CACL,CACN,CAAC,CACG,CACD,EACL;KACF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","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.d.ts

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

package/dist/components/ontario-aside.js

@@ -0,0 +1,185 @@
+import { proxyCustomElement, HTMLElement } from '@stencil/core/internal/client';
+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';
+
+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 {
+		constructor() {
+			super();
+			this.__registerHost();
+			this.__attachShadow();
+			this.headingType = undefined;
+			this.headingContentType = undefined;
+			this.headingContent = undefined;
+			this.content = undefined;
+			this.highlightColour = 'teal';
+		}
+		/**
+		 * Watch for changes to the `headingType` prop.
+		 *
+		 * This is for validation purposes to make sure the `headingType` matches one of the `HeadingLevelOptions`.
+		 */
+		validateHeadingType() {
+			if (isValidHeadingLevel(this.headingType)) return this.headingType;
+			const message = new ConsoleMessageClass();
+			return message
+				.addDesignSystemTag()
+				.addMonospaceText(` headingType ${this.headingType} `)
+				.addRegularText('for')
+				.addMonospaceText(' <ontario-aside> ')
+				.addRegularText('is not a valid type. Please ensure your heading type matches one of the headingType types.')
+				.printMessage();
+		}
+		/**
+		 * Watch for changes in the `headingContentType` prop for validation purposes.
+		 *
+		 * If the user input doesn't match one of the array values then `headingContentType` will be set to its default (`string`).
+		 * If a match is found in one of the array values then `headingContentType` will be set to the matching array key value.
+		 */
+		validateHeadingContentType() {
+			const isValid = validateValueAgainstArray(this.headingContentType, HeadingContentTypes);
+			if (isValid) {
+				return this.headingContentType;
+			} else {
+				return this.warnDefaultType();
+			}
+		}
+		/**
+		 * Watch for changes in the `headingContent` prop for validation purposes.
+		 *
+		 * If no `headingContent` value is provided, a warning message will be printed.
+		 */
+		validateHeadingContent() {
+			if (!this.headingContent) {
+				const message = new ConsoleMessageClass();
+				message
+					.addDesignSystemTag()
+					.addMonospaceText(' headingContent ')
+					.addRegularText('for')
+					.addMonospaceText(' <ontario-aside> ')
+					.addRegularText('was not provided.')
+					.printMessage();
+			}
+		}
+		/**
+		 * Watch for changes to the `highlightColour` prop.
+		 *
+		 * If no `highlightColour` is passed, or if the `highlightColour` does not match the `highlightColour` options, a default value of 'teal' will be applied.
+		 */
+		validateHighlightColour() {
+			if (this.highlightColour) {
+				if (isValidHighlightColour(this.highlightColour)) return this.highlightColour;
+				else {
+					const message = new ConsoleMessageClass();
+					message
+						.addDesignSystemTag()
+						.addMonospaceText(` highlightColour ${this.highlightColour} `)
+						.addRegularText('for')
+						.addMonospaceText(' <ontario-aside> ')
+						.addRegularText(
+							'does not match one of the valid highlightColour types. A default colour of `teal` will be applied.',
+						)
+						.printMessage();
+				}
+			}
+			// if no highlight colour is passed, return 'teal'
+			return 'teal';
+		}
+		/**
+		 * Print the invalid `type` warning message.
+		 * @returns default type ('string')
+		 */
+		warnDefaultType() {
+			const message = new ConsoleMessageClass();
+			message
+				.addDesignSystemTag()
+				.addMonospaceText(' headingContentType ')
+				.addRegularText('on')
+				.addMonospaceText(' <ontario-aside> ')
+				.addRegularText('was set to an invalid type; only')
+				.addMonospaceText(' string or html ')
+				.addRegularText('are supported. The default type')
+				.addMonospaceText(' string ')
+				.addRegularText('is assumed.')
+				.printMessage();
+			return (this.headingContentType = 'string');
+		}
+		componentWillLoad() {
+			this.validateHighlightColour();
+			this.validateHeadingContent();
+			this.validateHeadingType();
+			this.validateHeadingContentType();
+		}
+		render() {
+			return generateCalloutAside(
+				'aside',
+				this.headingType,
+				this.headingContentType,
+				this.headingContent,
+				this.content,
+				this.highlightColour,
+			);
+		}
+		static get watchers() {
+			return {
+				headingType: ['validateHeadingType'],
+				headingContentType: ['validateHeadingContentType'],
+				headingContent: ['validateHeadingContent'],
+				highlightColour: ['validateHighlightColour'],
+			};
+		}
+		static get style() {
+			return OntarioAsideStyle0;
+		}
+	},
+	[
+		1,
+		'ontario-aside',
+		{
+			headingType: [1025, 'heading-type'],
+			headingContentType: [1025, 'heading-content-type'],
+			headingContent: [1, 'heading-content'],
+			content: [1],
+			highlightColour: [1025, 'highlight-colour'],
+		},
+		undefined,
+		{
+			headingType: ['validateHeadingType'],
+			headingContentType: ['validateHeadingContentType'],
+			headingContent: ['validateHeadingContent'],
+			highlightColour: ['validateHighlightColour'],
+		},
+	],
+);
+function defineCustomElement$1() {
+	if (typeof customElements === 'undefined') {
+		return;
+	}
+	const components = ['ontario-aside'];
+	components.forEach((tagName) => {
+		switch (tagName) {
+			case 'ontario-aside':
+				if (!customElements.get(tagName)) {
+					customElements.define(tagName, OntarioAside$1);
+				}
+				break;
+		}
+	});
+}
+
+const OntarioAside = OntarioAside$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { OntarioAside, defineCustomElement };
+
+//# sourceMappingURL=ontario-aside.js.map

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

@@ -0,0 +1 @@
+{"file":"ontario-aside.js","mappings":"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","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;\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 (isValidHeadingLevel(this.headingType)) return this.headingType;\n\n\t\tconst message = new ConsoleMessageClass();\n\t\treturn message\n\t\t\t.addDesignSystemTag()\n\t\t\t.addMonospaceText(` headingType ${this.headingType} `)\n\t\t\t.addRegularText('for')\n\t\t\t.addMonospaceText(' <ontario-aside> ')\n\t\t\t.addRegularText('is not a valid type. Please ensure your heading type matches one of the headingType types.')\n\t\t\t.printMessage();\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 in the `headingContent` prop for validation purposes.\n\t *\n\t * If no `headingContent` value is provided, a warning message will be printed.\n\t */\n\t@Watch('headingContent')\n\tvalidateHeadingContent() {\n\t\tif (!this.headingContent) {\n\t\t\tconst message = new ConsoleMessageClass();\n\t\t\tmessage\n\t\t\t\t.addDesignSystemTag()\n\t\t\t\t.addMonospaceText(' headingContent ')\n\t\t\t\t.addRegularText('for')\n\t\t\t\t.addMonospaceText(' <ontario-aside> ')\n\t\t\t\t.addRegularText('was not provided.')\n\t\t\t\t.printMessage();\n\t\t}\n\t}\n\n\t/**\n\t * Watch for changes to the `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.validateHeadingContent();\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.headingType,\n\t\t\tthis.headingContentType,\n\t\t\tthis.headingContent,\n\t\t\tthis.content,\n\t\t\tthis.highlightColour,\n\t\t);\n\t}\n}\n"],"version":3}