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

package/dist/components/ontario-radio-buttons.js

@@ -0,0 +1,385 @@
+import { proxyCustomElement, HTMLElement, createEvent, h } from '@stencil/core/internal/client';
+import { I as Input } from './input.js';
+import { I as InputCaption, h as handleInputEvent, E as EventType } from './event-handler.js';
+import { v as validateLanguage, b as validatePropExists, c as validateObjectExists } from './validation-functions.js';
+import { C as ConsoleMessageClass } from './console-message.js';
+import { c as constructHintTextObject } from './hints.js';
+import { t as translations } from './global.i18n.js';
+import { d as defineCustomElement$5 } from './ontario-hint-expander2.js';
+import { d as defineCustomElement$4 } from './ontario-hint-text2.js';
+import { d as defineCustomElement$3 } from './ontario-icon-chevron-down2.js';
+import { d as defineCustomElement$2 } from './ontario-icon-chevron-up2.js';
+
+const ontarioRadioButtonsCss =
+	'@charset "UTF-8";h6,.ontario-h6,h5,.ontario-h5,h4,.ontario-h4,h3,.ontario-h3,h2,.ontario-h2,.ontario-fieldset__legend--large h1,.ontario-fieldset__legend--heading h1,h1,.ontario-h1{font-style:normal;font-weight:700;text-rendering:optimizeLegibility;margin-bottom:1rem;font-feature-settings:normal;font-family:"Raleway", "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif}.ontario-fieldset__legend--large h1,.ontario-fieldset__legend--heading h1,h1,.ontario-h1{font-size:2rem;letter-spacing:0.04rem;line-height:1.29;margin:2.5rem 0 1.5rem 0;max-width:70rem}@media screen and (min-width: 40em){.ontario-fieldset__legend--large h1,.ontario-fieldset__legend--heading h1,h1,.ontario-h1{font-size:2.5rem;letter-spacing:0.04rem;line-height:1.2}}h2,.ontario-h2{font-size:1.6875rem;letter-spacing:0.03rem;line-height:1.37;margin:0 0 0.75rem 0;max-width:48rem}@media screen and (min-width: 40em){h2,.ontario-h2{font-size:2.0625rem;letter-spacing:0.02rem;line-height:1.33}}h3,.ontario-h3{font-size:1.4375rem;letter-spacing:0.02rem;line-height:1.39;margin:0 0 0.75rem 0;max-width:48rem}@media screen and (min-width: 40em){h3,.ontario-h3{font-size:1.75rem;letter-spacing:0.02rem;line-height:1.43}}h4,.ontario-h4{font-size:1.25rem;letter-spacing:0.03rem;line-height:1.5;margin:0 0 0.75rem 0;max-width:48rem}@media screen and (min-width: 40em){h4,.ontario-h4{font-size:1.5rem;letter-spacing:0.0313rem;line-height:1.5}}h5,.ontario-h5{font-size:1.125rem;letter-spacing:0.03rem;line-height:1.56;margin:0 0 0.75rem 0;max-width:48rem}@media screen and (min-width: 40em){h5,.ontario-h5{font-size:1.1875rem;letter-spacing:0.025rem;line-height:1.5}}h6,.ontario-h6{font-size:1rem;line-height:1.56;letter-spacing:0.03rem;max-width:48rem;margin:0 0 0.75rem 0}@media screen and (min-width: 40em){h6,.ontario-h6{font-size:1rem;letter-spacing:0.025rem;line-height:1.5}}.ontario-lead-statement{font-size:1.25rem;line-height:1.6;max-width:70rem}@media screen and (min-width: 40em){.ontario-lead-statement{font-size:1.375rem}}.ontario-radios__input:focus+.ontario-radios__label:before{box-shadow:0 0 0 4px #009ADB;outline:4px solid transparent;transition:box-shadow 0.1s ease-in-out}html{font-family:"Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;font-size:1rem}body{font-size:1rem;line-height:1.6;background-color:#FFFFFF;color:#1a1a1a;margin:0}p{font-size:inherit;margin-bottom:1.25rem;text-rendering:optimizeLegibility;margin:0 0 1.5rem 0}cite{font-style:italic;line-height:inherit}strong{font-weight:700;line-height:inherit}*,*::before,*::after{box-sizing:inherit}main p,main p:not(.ontario-lead-statement),main dd,main li{max-width:48rem}hr{border:0;padding:0;margin:2.5rem 0;border-bottom:4px solid #cccccc}hr.ontario-hr--dark{border-bottom:4px solid #1a1a1a}a{color:#0066CC;text-decoration:underline}a:visited{color:#551A8B}a:hover{color:#00478F}a:active{color:#002142}a:focus{-moz-box-shadow:0 0 0 4px #009ADB;-webkit-box-shadow:0 0 0 4px #009ADB;box-shadow:0 0 0 4px #009ADB;outline:4px solid transparent;transition:all 0.1s ease-in-out}​p{margin:0 0 1.5rem 0}​p+h1,p+h2,p+h3,p+h4,p+h5,p+h6,ul+h1,ul+h2,ul+h3,ul+h4,ul+h5,ul+h6,ol+h1,ol+h2,ol+h3,ol+h4,ol+h5,ol+h6,h1+h2,h2+h3,h3+h4,h4+h5,h5+h6{margin-top:2rem}p code,td code,li code{line-height:2.25rem}input[type=text],input[type=number],input[type=email],input[type=date],input[type=color],input[type=search],input[type=tel],textarea{background-origin:initial;height:auto;-webkit-appearance:none;-moz-appearance:none}input[type=checkbox]+label,input[type=radio]+label{font-family:"Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;font-size:1rem;font-weight:400;margin-left:0;margin-right:0}fieldset{border:0;margin:0;padding:0;page-break-inside:avoid}legend,label{display:block;margin:0}select{background-origin:initial;height:auto;-webkit-appearance:none;-moz-appearance:none}ul,ol{padding:0}ul{margin-left:2rem}ul li{padding:0 0 0.75rem 0}ol{margin-left:1.75rem}ol li{padding:0 0 0.75rem 0.25rem}ul li:last-child,ol li:last-child{padding-bottom:0}ul[class*=columns-] li:last-child,ol[class*=columns-] li:last-child{padding-bottom:0.75rem}ul ul,ol ul{margin:0.5rem 0 0.5rem 2rem}ul ol,ol ol{margin:0.5rem 0 0.5rem 1.75rem}p+ul,p+ol{margin-top:-0.75rem}@media screen and (min-width: 40em){ul{margin:0.5rem 0 1.5rem 3rem}ol{margin:0.5rem 0 1.5rem 2.75rem}ul ul,ol ul{margin:0.5rem 0 0.5rem 3rem}ul ol,ol ol{margin:0.5rem 0 0.5rem 2.75rem}}.ontario-form-group:last-of-type{margin-bottom:3rem}.ontario-fieldset__legend{color:#1a1a1a;font-family:"Raleway", "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;font-size:1.1875rem;font-weight:700;margin:0 0 1rem 0;line-height:1.5;max-width:38.75em;white-space:normal;width:100%}@media screen and (max-width: 40em){.ontario-fieldset__legend{font-size:1.125rem;line-height:1.56}}.ontario-fieldset__legend--large,.ontario-fieldset__legend--heading{letter-spacing:0.02rem;line-height:1.2}.ontario-fieldset__legend--large h1,.ontario-fieldset__legend--heading h1{display:inline-block;margin:0}@media screen and (max-width: 40em){.ontario-fieldset__legend--large,.ontario-fieldset__legend--heading{font-size:1.4375rem;line-height:1.39}}.ontario-fieldset__legend--large{font-size:1.75rem}.ontario-fieldset__legend-required-flag,.ontario-fieldset__legend-optional-flag{font-family:"Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;font-size:1rem;font-weight:400}.ontario-fieldset__legend-required-flag:before,.ontario-fieldset__legend-optional-flag:before{content:" "}.ontario-label__flag{font-family:"Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;font-size:1rem;font-weight:400}.ontario-label__flag:before{content:" "}.ontario-hide{display:none !important}.ontario-invisible{visibility:hidden !important}@media screen and (max-width: 39.937em){.ontario-hide-for-small-only{display:none !important}}@media screen and (max-width: 0em), screen and (min-width: 40em){.ontario-show-for-small-only{display:none !important}}@media print, screen and (min-width: 40em){.ontario-hide-for-medium{display:none !important}}@media screen and (max-width: 39.937em){.ontario-show-for-medium{display:none !important}}@media screen and (min-width: 40em) and (max-width: 72.937em){.ontario-hide-for-medium-only{display:none !important}}@media screen and (max-width: 39.937em), screen and (min-width: 73em){.ontario-show-for-medium-only{display:none !important}}@media print, screen and (min-width: 73em){.ontario-hide-for-large{display:none !important}}@media screen and (max-width: 72.937em){.ontario-show-for-large{display:none !important}}@media screen and (min-width: 73em) and (max-width: 95.937em){.ontario-hide-for-large-only{display:none !important}}@media screen and (max-width: 72.937em), screen and (min-width: 96em){.ontario-show-for-large-only{display:none !important}}.ontario-show-for-sr,.ontario-show-on-focus{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0, 0, 0, 0)}.ontario-show-on-focus:active,.ontario-show-on-focus:focus{position:static;width:auto;height:auto;overflow:visible;clip:auto}.ontario-show-for-landscape,.ontario-hide-for-portrait{display:block !important}@media screen and (orientation: landscape){.ontario-show-for-landscape,.ontario-hide-for-portrait{display:block !important}}@media screen and (orientation: portrait){.ontario-show-for-landscape,.ontario-hide-for-portrait{display:none !important}}.ontario-hide-for-landscape,.ontario-show-for-portrait{display:none !important}@media screen and (orientation: landscape){.ontario-hide-for-landscape,.ontario-show-for-portrait{display:none !important}}@media screen and (orientation: portrait){.ontario-hide-for-landscape,.ontario-show-for-portrait{display:block !important}}.ontario-radios__item{position:relative;display:block;margin:0 0 1rem;padding:0 2rem 0}.ontario-radios__item:last-of-type{margin-bottom:0}.ontario-radios__input{cursor:pointer;margin:0;position:absolute;opacity:0;top:-2px;left:-2px;width:36px;height:36px;z-index:0}@media screen and (max-width: 40em){.ontario-radios__input{width:40px;height:40px;top:-1.5px;left:-1.5px}}.ontario-radios__label{cursor:pointer;color:#1a1a1a;display:inline-block;font-family:"Raleway", "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;font-size:1rem;font-weight:700;line-height:1.5;margin:0.2rem 0;max-width:38.75em;padding:0 0.75rem;touch-action:manipulation;white-space:normal;width:auto;white-space:normal}@media screen and (max-width: 40em){.ontario-radios__label{margin:0.3rem 0;padding:0 1rem}}.ontario-radios__label:before{content:"";border:2px solid #1a1a1a;border-radius:50%;box-sizing:border-box;position:absolute;top:0;left:0;width:32px;height:32px;transition:border 0.1s ease-in-out}@media screen and (max-width: 40em){.ontario-radios__label:before{width:36px;height:36px}}.ontario-radios__label:after{content:"";border-radius:50%;border:10px solid #1a1a1a;position:absolute;top:0;left:0;transform:translate(6px, 6px);opacity:0}@media screen and (max-width: 40em){.ontario-radios__label:after{border:12px solid #1a1a1a}}.ontario-radios__input:focus+.ontario-radios__label:before{-moz-box-shadow:0 0 0 4px #009ADB;-webkit-box-shadow:#009ADB}.ontario-radios__input:checked+.ontario-radios__label:after{opacity:1}.ontario-radios__hint-expander{margin:0.75rem 0 0 0.5rem}@media screen and (max-width: 40em){.ontario-radios__hint-expander{margin-top:1rem}}';
+const OntarioRadioButtonsStyle0 = ontarioRadioButtonsCss;
+
+const OntarioRadioButtons$1 = /*@__PURE__*/ proxyCustomElement(
+	class OntarioRadioButtons extends HTMLElement {
+		constructor() {
+			super();
+			this.__registerHost();
+			this.__attachShadow();
+			this.radioOnChange = createEvent(this, 'radioOnChange', 7);
+			this.radioOnBlur = createEvent(this, 'radioOnBlur', 7);
+			this.radioOnFocus = createEvent(this, 'radioOnFocus', 7);
+			this.internals = this.attachInternals();
+			this.caption = undefined;
+			this.language = undefined;
+			this.name = undefined;
+			this.hintText = undefined;
+			this.hintExpander = undefined;
+			this.required = false;
+			this.options = undefined;
+			this.customOnChange = undefined;
+			this.customOnBlur = undefined;
+			this.customOnFocus = undefined;
+			this.hintTextId = undefined;
+			this.internalHintText = undefined;
+			this.internalHintExpander = undefined;
+			this.internalOptions = undefined;
+			this.captionState = undefined;
+		}
+		/**
+		 * 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);
+			}
+		}
+		handleHeaderLanguageToggled(event) {
+			this.language = validateLanguage(event);
+		}
+		/**
+		 * Watch for changes to the `hintText` prop.
+		 *
+		 * If a `hintText` prop is passed, the `constructHintTextObject` function will convert it to the correct format, and set the result to the `internalHintText` state.
+		 */
+		parseHintText() {
+			if (this.hintText) {
+				const hintTextObject = constructHintTextObject(this.hintText);
+				this.internalHintText = hintTextObject;
+			}
+		}
+		/**
+		 * Watch for changes to the `hintExpander` prop.
+		 *
+		 * If a `hintExpander` prop is passed, it will be parsed (if it is a string), and the result will be set to the `internalHintExpander` state.
+		 */
+		parseHintExpander() {
+			const hintExpander = this.hintExpander;
+			if (hintExpander) {
+				if (typeof hintExpander === 'string') this.internalHintExpander = JSON.parse(hintExpander);
+				else this.internalHintExpander = hintExpander;
+			}
+		}
+		/**
+		 * Watch for changes to the `options` prop.
+		 *
+		 * If an `options` prop is passed, it will be parsed (if it is a string), and the result will be set to the `internalOptions` state. The result will be run through a validation function.
+		 */
+		parseOptions() {
+			if (typeof this.options !== 'undefined') {
+				if (!Array.isArray(this.options)) {
+					this.internalOptions = JSON.parse(this.options);
+				} else {
+					this.internalOptions = this.options;
+				}
+			}
+		}
+		/*
+		 * Watch for changes in the `name` prop for validation purposes.
+		 *
+		 * Validate the `name` and make sure the `name` prop has a value.
+		 * Log a warning if user doesn't input a value for the `name`.
+		 */
+		validateName(newValue) {
+			if (validatePropExists(newValue)) {
+				const message = new ConsoleMessageClass();
+				message
+					.addDesignSystemTag()
+					.addMonospaceText(' name ')
+					.addRegularText('for')
+					.addMonospaceText(' <ontario-radio-buttons> ')
+					.addRegularText('was not provided')
+					.printMessage();
+			}
+		}
+		/*
+     * Watch for changes in the `options` prop for validation purposes.
+
+     * Validate the `options` and make sure the `options` prop has a value.
+     * Log a warning if user doesn't input a value for the `options`.
+     */
+		validateOptions(newValue) {
+			if (validateObjectExists(newValue)) {
+				const message = new ConsoleMessageClass();
+				message
+					.addDesignSystemTag()
+					.addMonospaceText(' options ')
+					.addRegularText('for')
+					.addMonospaceText(' <ontario-radio-buttons> ')
+					.addRegularText('was not provided')
+					.printMessage();
+			}
+		}
+		/**
+		 * Watch for changes to the `caption` prop.
+		 *
+		 * The caption will be run through the InputCaption constructor to convert it to the correct format, and set the result to the `captionState` state.
+		 * @param newValue: Caption | string
+		 */
+		updateCaptionState(newValue) {
+			this.captionState = new InputCaption(
+				this.element.tagName,
+				newValue,
+				translations,
+				this.language,
+				true,
+				this.required,
+			);
+		}
+		/**
+		 * Watch for changes to the `language` prop to render either the English or French translations
+		 */
+		updateLanguage() {
+			this.updateCaptionState(this.caption);
+		}
+		/**
+		 * Function to handle radio buttons events and the information pertaining to the radio buttons to emit.
+		 */
+		handleEvent(event, eventType) {
+			var _a, _b;
+			const input = event.target;
+			// Reset all internalOptions checked states
+			const changedOption = this.internalOptions
+				.map((x) => {
+					x.checked = false;
+					return x;
+				})
+				.find((x) => x.value === (input === null || input === void 0 ? void 0 : input.value));
+			// Set the new checked state for the selected value
+			if (changedOption)
+				changedOption.checked = !(changedOption === null || changedOption === void 0 ? void 0 : changedOption.checked);
+			// Set the value within the form
+			(_b = (_a = this.internals) === null || _a === void 0 ? void 0 : _a.setFormValue) === null || _b === void 0
+				? void 0
+				: _b.call(
+						_a,
+						this.internalOptions
+							.filter((x) => !!x.checked)
+							.reduce((formData, currentValue) => {
+								formData.append(this.name, currentValue.value);
+								return formData;
+							}, new FormData()),
+				  );
+			handleInputEvent(
+				event,
+				eventType,
+				input,
+				this.radioOnChange,
+				this.radioOnFocus,
+				this.radioOnBlur,
+				undefined,
+				'radio',
+				this.customOnChange,
+				this.customOnFocus,
+				this.customOnBlur,
+				undefined,
+				this.element,
+			);
+		}
+		/**
+		 * If a `hintText` prop is passed, the id generated from it will be set to the internal `hintTextId` state to match with the fieldset `aria-describedBy` attribute.
+		 */
+		async componentDidLoad() {
+			var _a;
+			this.hintTextId = await ((_a = this.hintTextRef) === null || _a === void 0 ? void 0 : _a.getHintTextId());
+		}
+		componentWillLoad() {
+			this.updateCaptionState(this.caption);
+			this.parseOptions();
+			this.parseHintText();
+			this.parseHintExpander();
+			this.validateName(this.name);
+			this.validateOptions(this.internalOptions);
+			this.language = validateLanguage(this.language);
+		}
+		render() {
+			var _a;
+			return h(
+				'div',
+				{ key: '9fd6c87b909d245e3882608e88643b67f1a41e73', class: 'ontario-form-group' },
+				h(
+					'fieldset',
+					{
+						'key': '27803aa186170a926e5708daa44b9e316a308099',
+						'class': 'ontario-fieldset',
+						'aria-describedby': this.hintTextId,
+					},
+					this.captionState.getCaption(undefined, !!this.internalHintExpander),
+					this.internalHintText &&
+						h('ontario-hint-text', {
+							hint: this.internalHintText.hint,
+							hintContentType: this.internalHintText.hintContentType,
+							ref: (el) => (this.hintTextRef = el),
+						}),
+					h(
+						'div',
+						{ key: '34e4053d111ea70f6b5f841ba9cbbaab240334a3', class: 'ontario-radios' },
+						(_a = this.internalOptions) === null || _a === void 0
+							? void 0
+							: _a.map((radioOption) =>
+									h(
+										'div',
+										{ class: 'ontario-radios__item' },
+										h(Input, {
+											className: 'ontario-radios__input',
+											id: radioOption.elementId,
+											name: this.name,
+											type: 'radio',
+											value: radioOption.value,
+											required: !!this.required,
+											checked: !!radioOption.checked,
+											onChange: (e) => this.handleEvent(e, EventType.Change),
+											onBlur: (e) => this.handleEvent(e, EventType.Blur),
+											onFocus: (e) => this.handleEvent(e, EventType.Focus),
+										}),
+										h(
+											'label',
+											{ class: 'ontario-radios__label', htmlFor: radioOption.elementId },
+											radioOption.label,
+											radioOption.hintExpander &&
+												this.captionState.getHintExpanderAccessibilityText(radioOption.label, true),
+										),
+										radioOption.hintExpander &&
+											h(
+												'div',
+												{ class: 'ontario-radios__hint-expander' },
+												h('ontario-hint-expander', {
+													'hint': radioOption.hintExpander.hint,
+													'content': radioOption.hintExpander.content,
+													'hintContentType': radioOption.hintExpander.hintContentType,
+													'input-exists': true,
+												}),
+											),
+									),
+							  ),
+						this.internalHintExpander &&
+							h(
+								'div',
+								{ class: 'ontario-radios__hint-expander' },
+								h('ontario-hint-expander', {
+									'hint': this.internalHintExpander.hint,
+									'content': this.internalHintExpander.content,
+									'hintContentType': this.internalHintExpander.hintContentType,
+									'input-exists': true,
+								}),
+							),
+					),
+				),
+			);
+		}
+		static get formAssociated() {
+			return true;
+		}
+		get element() {
+			return this;
+		}
+		static get watchers() {
+			return {
+				hintText: ['parseHintText'],
+				hintExpander: ['parseHintExpander'],
+				options: ['parseOptions', 'validateOptions'],
+				name: ['validateName'],
+				caption: ['updateCaptionState'],
+				language: ['updateLanguage'],
+			};
+		}
+		static get style() {
+			return OntarioRadioButtonsStyle0;
+		}
+	},
+	[
+		65,
+		'ontario-radio-buttons',
+		{
+			caption: [1],
+			language: [1025],
+			name: [1],
+			hintText: [1, 'hint-text'],
+			hintExpander: [1, 'hint-expander'],
+			required: [4],
+			options: [1],
+			customOnChange: [16],
+			customOnBlur: [16],
+			customOnFocus: [16],
+			hintTextId: [32],
+			internalHintText: [32],
+			internalHintExpander: [32],
+			internalOptions: [32],
+			captionState: [32],
+		},
+		[
+			[8, 'setAppLanguage', 'handleSetAppLanguage'],
+			[8, 'headerLanguageToggled', 'handleHeaderLanguageToggled'],
+		],
+		{
+			hintText: ['parseHintText'],
+			hintExpander: ['parseHintExpander'],
+			options: ['parseOptions', 'validateOptions'],
+			name: ['validateName'],
+			caption: ['updateCaptionState'],
+			language: ['updateLanguage'],
+		},
+	],
+);
+function defineCustomElement$1() {
+	if (typeof customElements === 'undefined') {
+		return;
+	}
+	const components = [
+		'ontario-radio-buttons',
+		'ontario-hint-expander',
+		'ontario-hint-text',
+		'ontario-icon-chevron-down',
+		'ontario-icon-chevron-up',
+	];
+	components.forEach((tagName) => {
+		switch (tagName) {
+			case 'ontario-radio-buttons':
+				if (!customElements.get(tagName)) {
+					customElements.define(tagName, OntarioRadioButtons$1);
+				}
+				break;
+			case 'ontario-hint-expander':
+				if (!customElements.get(tagName)) {
+					defineCustomElement$5();
+				}
+				break;
+			case 'ontario-hint-text':
+				if (!customElements.get(tagName)) {
+					defineCustomElement$4();
+				}
+				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 OntarioRadioButtons = OntarioRadioButtons$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { OntarioRadioButtons, defineCustomElement };
+
+//# sourceMappingURL=ontario-radio-buttons.js.map

package/dist/components/ontario-radio-buttons.js.map

@@ -0,0 +1 @@
+{"file":"ontario-radio-buttons.js","mappings":"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","names":["OntarioRadioButtons"],"sources":["src/components/ontario-radio-buttons/ontario-radio-buttons.scss?tag=ontario-radio-buttons&encapsulation=shadow","src/components/ontario-radio-buttons/ontario-radio-buttons.tsx"],"sourcesContent":["@use 'sass:math';\n@use '@ongov/ontario-design-system-global-styles/dist/styles/scss/1-variables/global.variables' as globalVariables;\n@use '@ongov/ontario-design-system-global-styles/dist/styles/scss/1-variables/spacing.variables' as spacing;\n@use '@ongov/ontario-design-system-global-styles/dist/styles/scss/1-variables/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/1-variables/z-index.variables' as zIndex;\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/line-heights.variables' as lineheight;\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\tplaceholders;\n@use '@ongov/ontario-design-system-global-styles/dist/styles/scss/4-elements/_global.elements.scss';\n@use '@ongov/ontario-design-system-global-styles/dist/styles/scss/6-components/_form.component.scss';\n@use '@ongov/ontario-design-system-global-styles/dist/styles/scss/7-overrides/_visibility.overrides.scss';\n\n$ontario-radios-size: 32px;\n$ontario-radios-size-mobile: 36px;\n$ontario-input-offset: math.div((globalVariables.$touch-target-size - $ontario-radios-size), 2);\n\n.ontario-radios__item {\n\tposition: relative;\n\tdisplay: block;\n\tmargin: spacing.$spacing-0 spacing.$spacing-0 spacing.$spacing-4;\n\tpadding: spacing.$spacing-0 spacing.$spacing-6 spacing.$spacing-0;\n\n\t&:last-of-type {\n\t\tmargin-bottom: spacing.$spacing-0;\n\t}\n}\n\n.ontario-radios__input {\n\tcursor: pointer;\n\tmargin: spacing.$spacing-0;\n\tposition: absolute;\n\topacity: 0;\n\ttop: $ontario-input-offset * -1;\n\tleft: $ontario-input-offset * -1;\n\twidth: globalVariables.$touch-target-size;\n\theight: globalVariables.$touch-target-size;\n\tz-index: zIndex.$ontario-z-index-neutral;\n\n\t@media screen and (max-width: breakpoints.$small-breakpoint) {\n\t\twidth: globalVariables.$touch-target-size-mobile;\n\t\theight: globalVariables.$touch-target-size-mobile;\n\t\ttop: $ontario-input-offset * -0.75;\n\t\tleft: $ontario-input-offset * -0.75;\n\t}\n}\n\n.ontario-radios__label {\n\tcursor: pointer;\n\tcolor: colours.$ontario-colour-black;\n\tdisplay: inline-block;\n\tfont-family: typography.$ontario-font-raleway-modified;\n\tfont-size: fontSizes.$ontario-font-size-standard-body-text;\n\tfont-weight: fontWeights.$ontario-font-weights-bold;\n\tline-height: globalVariables.$line-height-default;\n\t// Specific spacing required in order to visually align label with input\n\tmargin: 0.2rem 0;\n\tmax-width: globalVariables.$narrow-width;\n\tpadding: spacing.$spacing-0 spacing.$spacing-3;\n\t// remove 300ms pause on mobile\n\ttouch-action: manipulation;\n\twhite-space: normal;\n\twidth: auto;\n\twhite-space: normal;\n\n\t@media screen and (max-width: breakpoints.$small-breakpoint) {\n\t\t// Specific spacing required in order to visually align label with input\n\t\tmargin: 0.3rem spacing.$spacing-0;\n\t\tpadding: spacing.$spacing-0 spacing.$spacing-4;\n\t}\n\n\t&:before {\n\t\tcontent: '';\n\t\tborder: globalVariables.$border-size-standard solid colours.$ontario-colour-black;\n\t\tborder-radius: 50%;\n\t\tbox-sizing: border-box;\n\t\tposition: absolute;\n\t\ttop: 0;\n\t\tleft: 0;\n\t\twidth: $ontario-radios-size;\n\t\theight: $ontario-radios-size;\n\t\ttransition: border 0.1s ease-in-out;\n\n\t\t@media screen and (max-width: breakpoints.$small-breakpoint) {\n\t\t\twidth: $ontario-radios-size-mobile;\n\t\t\theight: $ontario-radios-size-mobile;\n\t\t}\n\t}\n\n\t&:after {\n\t\tcontent: '';\n\t\tborder-radius: 50%;\n\t\tborder: 10px solid colours.$ontario-colour-black;\n\t\tposition: absolute;\n\t\ttop: 0;\n\t\tleft: 0;\n\t\ttransform: translate($ontario-input-offset * 3, $ontario-input-offset * 3);\n\t\topacity: 0;\n\n\t\t@media screen and (max-width: breakpoints.$small-breakpoint) {\n\t\t\tborder: 12px solid colours.$ontario-colour-black;\n\t\t}\n\t}\n}\n\n.ontario-radios__input:focus + .ontario-radios__label:before {\n\t-moz-box-shadow: placeholders.$ontario-focus-box-shadow;\n\t-webkit-box-shadow: colours.$ontario-colour-focus;\n\t@extend %ontario-focus;\n}\n\n.ontario-radios__input:checked + .ontario-radios__label:after {\n\topacity: 1;\n}\n\n.ontario-radios__hint-expander {\n\tmargin: spacing.$spacing-3 spacing.$spacing-0 spacing.$spacing-0 spacing.$spacing-2;\n\n\t@media screen and (max-width: breakpoints.$small-breakpoint) {\n\t\tmargin-top: spacing.$spacing-4;\n\t}\n}\n","import { Component, h, Prop, State, Event, Listen, Watch, Element, EventEmitter, AttachInternals } from '@stencil/core';\nimport { RadioButtons } from './radio-buttons.interface';\nimport { RadioOption } from './radio-option.interface';\n\nimport { Input } from '../../utils/common/input/input';\nimport { Hint } from '../../utils/common/common.interface';\nimport { InputCaption } from '../../utils/common/input-caption/input-caption';\nimport { Caption } from '../../utils/common/input-caption/caption.interface';\nimport { HintExpander } from '../ontario-hint-expander/hint-expander.interface';\nimport {\n\tvalidateObjectExists,\n\tvalidatePropExists,\n\tvalidateLanguage,\n} from '../../utils/validation/validation-functions';\nimport { ConsoleMessageClass } from '../../utils/console-message/console-message';\nimport { Language } from '../../utils/common/language-types';\nimport { constructHintTextObject } from '../../utils/components/hints/hints';\nimport {\n\tInputFocusBlurEvent,\n\tRadioAndCheckboxChangeEvent,\n\tEventType,\n} from '../../utils/events/event-handler.interface';\nimport { handleInputEvent } from '../../utils/events/event-handler';\n\nimport { default as translations } from '../../translations/global.i18n.json';\n\n@Component({\n\ttag: 'ontario-radio-buttons',\n\tstyleUrl: 'ontario-radio-buttons.scss',\n\tshadow: true,\n\tformAssociated: true,\n})\nexport class OntarioRadioButtons implements RadioButtons {\n\t@Element() element: HTMLElement;\n\t@AttachInternals() internals: ElementInternals;\n\n\thintTextRef: HTMLOntarioHintTextElement | undefined;\n\n\t/**\n\t * The text to display for the radio button legend.\n\t *\n\t * @example\n\t * <ontario-radio-buttons\n\t *   caption='{\n\t *     \"captionText\": \"Radio legend\",\n\t *     \"captionType\": \"heading\",\n\t *    }'\n\t *   required=\"true\"\n\t *   ...>\n\t * </ontario-radio-buttons>\n\t */\n\t@Prop() caption: Caption | string;\n\n\t/**\n\t * The language of the component.\n\t * This is used for translations, and is by default set through event listeners checking for a language property from the header. If no language is passed, it will default to English.\n\t */\n\t@Prop({ mutable: true }) language?: Language;\n\n\t/**\n\t * The name assigned to the radio button. The name value is used to reference form data after a form is submitted.\n\t */\n\t@Prop() name: string;\n\n\t/**\n\t * Used to include the ontario-hint-text component for radio button group.\n\t * This is optional.\n\t */\n\t@Prop() hintText?: string | Hint;\n\n\t/**\n\t * Used to include the ontario-hint-expander component for the radio button group.\n\t * This is passed in as an object with key-value pairs.\n\t *\n\t * This is optional.\n\t *\n\t * @example\n\t * <ontario-radio-buttons\n\t *   caption='{\n\t *     \"captionText\": \"Radio legend\",\n\t *     \"captionType\": \"heading\",\n\t *   }'\n\t * \t name=\"radios\"\n\t *   options='[\n\t * \t   {\n\t *        \"value\": \"radio-option-1\",\n\t * \t\t  \"elementId\": \"radio-1\",\n\t *        \"label\": \"Radio option 1 label\",\n\t *        \"hintExpander\": {\n\t *\t\t\t  \"hint\": \"Hint expander for radio option 1\",\n\t * \t\t      \"content\": \"Example hint expander content for radio option 1.\"\n\t *\t\t  }\n\t *     }\n\t *   ]'\n\t *   hint-expander='{\n\t *     \"hint\": \"Hint expander for the radio button group\",\n\t *     \"content\": \"Example hint expander content for the radio button group.\"\n\t *   }'\n\t *   required=\"true\"\n\t * >\n\t * </ontario-radio-buttons>\n\t */\n\t@Prop() hintExpander?: HintExpander | string;\n\n\t/**\n\t * This is used to determine whether the radio button is required or not.\n\t * This prop also gets passed to the InputCaption utility to display either an optional or required flag in the label.\n\t * If no prop is set, it will default to false (optional).\n\t */\n\t@Prop() required?: boolean = false;\n\n\t/**\n\t * The options for the radio button group.\n\t *\n\t * Each property will be passed in through an object in the options array.\n\t * This can either be passed in as an object directly (if using react), or as a string in HTML.\n\t * If there are multiple radio buttons in a group, each radio button will be displayed as an option.\n\t *\n\t * In the example below, the options are being passed in as a string and there are two radio buttons to be displayed in the group.\n\t *\n\t * @example\n\t * <ontario-radio-buttons\n\t *   caption='{\n\t *     \"captionText\": \"Radio legend\",\n\t *     \"captionType\": \"heading\",\n\t *   }'\n\t *   name=\"radios\"\n\t *   hint-text=\"Hint text for the radio button group.\"\n\t *   options='[\n\t *     {\n\t *        \"value\": \"radio-option-1\",\n\t * \t\t  \"elementId\": \"radio-1\",\n\t *        \"label\": \"Radio option 1 label\"\n\t *     },\n\t *     {\n\t *        \"value\": \"radio-option-2\",\n\t * \t\t  \"elementId\": \"radio-2\",\n\t *        \"label\": \"Radio option 2 label\",\n\t *        \"hintExpander\": {\n\t *\t\t\t  \"hint\": \"Hint expander for radio option 2\",\n\t * \t\t      \"content\": \"Example hint expander content for radio option 2.\"\n\t *\t\t  }\n\t *      }\n\t *   ]'\n\t *   required=\"true\"\n\t * >\n\t * </ontario-radio-buttons>\n\t */\n\t@Prop() options: string | RadioOption[];\n\n\t/**\n\t * Used to add a custom function to the radio input onChange event.\n\t */\n\t@Prop() customOnChange?: (event: globalThis.Event) => void;\n\n\t/**\n\t * Used to add a custom function to the radio input onBlur event.\n\t */\n\t@Prop() customOnBlur?: (event: globalThis.Event) => void;\n\n\t/**\n\t * Used to add a custom function to the radio input onFocus event.\n\t */\n\t@Prop() customOnFocus?: (event: globalThis.Event) => void;\n\n\t/**\n\t * Used for the `aria-describedby` value of the radio button group. This will match with the id of the hint text.\n\t */\n\t@State() hintTextId: string | null | undefined;\n\n\t/**\n\t * The hint text options are re-assigned to the internalHintText array.\n\t */\n\t@State() private internalHintText: Hint;\n\n\t/**\n\t * The hint expander options are re-assigned to the internalHintExpander array.\n\t */\n\t@State() private internalHintExpander: HintExpander;\n\n\t/**\n\t * The options are re-assigned to the internalOptions array.\n\t */\n\t@State() private internalOptions: RadioOption[];\n\n\t/**\n\t * Instantiate an InputCaption object for internal logic use\n\t */\n\t@State() private captionState: InputCaption;\n\n\t/**\n\t * Emitted when a keyboard input or mouse event occurs when a radio option has been changed.\n\t */\n\t@Event({ eventName: 'radioOnChange' }) radioOnChange: EventEmitter<RadioAndCheckboxChangeEvent>;\n\n\t/**\n\t * Emitted when a keyboard input event occurs when a radio option has lost focus.\n\t */\n\t@Event({ eventName: 'radioOnBlur' }) radioOnBlur: EventEmitter<InputFocusBlurEvent>;\n\n\t/**\n\t * Emitted when a keyboard input event occurs when a radio option has gained focus.\n\t */\n\t@Event({ eventName: 'radioOnFocus' }) radioOnFocus: EventEmitter<InputFocusBlurEvent>;\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 * Watch for changes to the `hintText` prop.\n\t *\n\t * If a `hintText` prop is passed, the `constructHintTextObject` function will convert it to the correct format, and set the result to the `internalHintText` state.\n\t */\n\t@Watch('hintText')\n\tprivate parseHintText() {\n\t\tif (this.hintText) {\n\t\t\tconst hintTextObject = constructHintTextObject(this.hintText);\n\t\t\tthis.internalHintText = hintTextObject;\n\t\t}\n\t}\n\n\t/**\n\t * Watch for changes to the `hintExpander` prop.\n\t *\n\t * If a `hintExpander` prop is passed, it will be parsed (if it is a string), and the result will be set to the `internalHintExpander` state.\n\t */\n\t@Watch('hintExpander')\n\tprivate parseHintExpander() {\n\t\tconst hintExpander = this.hintExpander;\n\t\tif (hintExpander) {\n\t\t\tif (typeof hintExpander === 'string') this.internalHintExpander = JSON.parse(hintExpander);\n\t\t\telse this.internalHintExpander = hintExpander;\n\t\t}\n\t}\n\n\t/**\n\t * Watch for changes to the `options` prop.\n\t *\n\t * If an `options` prop is passed, it will be parsed (if it is a string), and the result will be set to the `internalOptions` state. The result will be run through a validation function.\n\t */\n\t@Watch('options')\n\tparseOptions() {\n\t\tif (typeof this.options !== 'undefined') {\n\t\t\tif (!Array.isArray(this.options)) {\n\t\t\t\tthis.internalOptions = JSON.parse(this.options);\n\t\t\t} else {\n\t\t\t\tthis.internalOptions = this.options;\n\t\t\t}\n\t\t}\n\t}\n\n\t/*\n\t * Watch for changes in the `name` prop for validation purposes.\n\t *\n\t * Validate the `name` and make sure the `name` prop has a value.\n\t * Log a warning if user doesn't input a value for the `name`.\n\t */\n\t@Watch('name')\n\tvalidateName(newValue: string) {\n\t\tif (validatePropExists(newValue)) {\n\t\t\tconst message = new ConsoleMessageClass();\n\t\t\tmessage\n\t\t\t\t.addDesignSystemTag()\n\t\t\t\t.addMonospaceText(' name ')\n\t\t\t\t.addRegularText('for')\n\t\t\t\t.addMonospaceText(' <ontario-radio-buttons> ')\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 in the `options` prop for validation purposes.\n\n\t * Validate the `options` and make sure the `options` prop has a value.\n\t * Log a warning if user doesn't input a value for the `options`.\n\t */\n\t@Watch('options')\n\tvalidateOptions(newValue: object) {\n\t\tif (validateObjectExists(newValue)) {\n\t\t\tconst message = new ConsoleMessageClass();\n\t\t\tmessage\n\t\t\t\t.addDesignSystemTag()\n\t\t\t\t.addMonospaceText(' options ')\n\t\t\t\t.addRegularText('for')\n\t\t\t\t.addMonospaceText(' <ontario-radio-buttons> ')\n\t\t\t\t.addRegularText('was not provided')\n\t\t\t\t.printMessage();\n\t\t}\n\t}\n\n\t/**\n\t * Watch for changes to the `caption` prop.\n\t *\n\t * The caption will be run through the InputCaption constructor to convert it to the correct format, and set the result to the `captionState` state.\n\t * @param newValue: Caption | string\n\t */\n\t@Watch('caption')\n\tupdateCaptionState(newValue: Caption | string) {\n\t\tthis.captionState = new InputCaption(\n\t\t\tthis.element.tagName,\n\t\t\tnewValue,\n\t\t\ttranslations,\n\t\t\tthis.language,\n\t\t\ttrue,\n\t\t\tthis.required,\n\t\t);\n\t}\n\n\t/**\n\t * Watch for changes to the `language` prop to render either the English or French translations\n\t */\n\t@Watch('language')\n\tupdateLanguage() {\n\t\tthis.updateCaptionState(this.caption);\n\t}\n\n\t/**\n\t * Function to handle radio buttons events and the information pertaining to the radio buttons to emit.\n\t */\n\tprivate handleEvent(event: Event, eventType: EventType) {\n\t\tconst input = event.target as HTMLInputElement | null;\n\n\t\t// Reset all internalOptions checked states\n\t\tconst changedOption = this.internalOptions\n\t\t\t.map((x) => {\n\t\t\t\tx.checked = false;\n\t\t\t\treturn x;\n\t\t\t})\n\t\t\t.find((x) => x.value === input?.value);\n\t\t// Set the new checked state for the selected value\n\t\tif (changedOption) changedOption.checked = !changedOption?.checked;\n\n\t\t// Set the value within the form\n\t\tthis.internals?.setFormValue?.(\n\t\t\tthis.internalOptions\n\t\t\t\t.filter((x) => !!x.checked)\n\t\t\t\t.reduce((formData, currentValue) => {\n\t\t\t\t\tformData.append(this.name, currentValue.value);\n\t\t\t\t\treturn formData;\n\t\t\t\t}, new FormData()),\n\t\t);\n\n\t\thandleInputEvent(\n\t\t\tevent,\n\t\t\teventType,\n\t\t\tinput,\n\t\t\tthis.radioOnChange,\n\t\t\tthis.radioOnFocus,\n\t\t\tthis.radioOnBlur,\n\t\t\tundefined,\n\t\t\t'radio',\n\t\t\tthis.customOnChange,\n\t\t\tthis.customOnFocus,\n\t\t\tthis.customOnBlur,\n\t\t\tundefined,\n\t\t\tthis.element,\n\t\t);\n\t}\n\n\t/**\n\t * If a `hintText` prop is passed, the id generated from it will be set to the internal `hintTextId` state to match with the fieldset `aria-describedBy` attribute.\n\t */\n\tasync componentDidLoad() {\n\t\tthis.hintTextId = await this.hintTextRef?.getHintTextId();\n\t}\n\n\tcomponentWillLoad() {\n\t\tthis.updateCaptionState(this.caption);\n\t\tthis.parseOptions();\n\t\tthis.parseHintText();\n\t\tthis.parseHintExpander();\n\t\tthis.validateName(this.name);\n\t\tthis.validateOptions(this.internalOptions);\n\t\tthis.language = validateLanguage(this.language);\n\t}\n\n\trender() {\n\t\treturn (\n\t\t\t<div class=\"ontario-form-group\">\n\t\t\t\t<fieldset class=\"ontario-fieldset\" aria-describedby={this.hintTextId}>\n\t\t\t\t\t{this.captionState.getCaption(undefined, !!this.internalHintExpander)}\n\t\t\t\t\t{this.internalHintText && (\n\t\t\t\t\t\t<ontario-hint-text\n\t\t\t\t\t\t\thint={this.internalHintText.hint}\n\t\t\t\t\t\t\thintContentType={this.internalHintText.hintContentType}\n\t\t\t\t\t\t\tref={(el) => (this.hintTextRef = el)}\n\t\t\t\t\t\t></ontario-hint-text>\n\t\t\t\t\t)}\n\t\t\t\t\t<div class=\"ontario-radios\">\n\t\t\t\t\t\t{this.internalOptions?.map((radioOption) => (\n\t\t\t\t\t\t\t<div class=\"ontario-radios__item\">\n\t\t\t\t\t\t\t\t<Input\n\t\t\t\t\t\t\t\t\tclassName=\"ontario-radios__input\"\n\t\t\t\t\t\t\t\t\tid={radioOption.elementId}\n\t\t\t\t\t\t\t\t\tname={this.name}\n\t\t\t\t\t\t\t\t\ttype=\"radio\"\n\t\t\t\t\t\t\t\t\tvalue={radioOption.value}\n\t\t\t\t\t\t\t\t\trequired={!!this.required}\n\t\t\t\t\t\t\t\t\tchecked={!!radioOption.checked}\n\t\t\t\t\t\t\t\t\tonChange={(e) => this.handleEvent(e, EventType.Change)}\n\t\t\t\t\t\t\t\t\tonBlur={(e) => this.handleEvent(e, EventType.Blur)}\n\t\t\t\t\t\t\t\t\tonFocus={(e) => this.handleEvent(e, EventType.Focus)}\n\t\t\t\t\t\t\t\t></Input>\n\t\t\t\t\t\t\t\t<label class=\"ontario-radios__label\" htmlFor={radioOption.elementId}>\n\t\t\t\t\t\t\t\t\t{radioOption.label}\n\t\t\t\t\t\t\t\t\t{radioOption.hintExpander &&\n\t\t\t\t\t\t\t\t\t\tthis.captionState.getHintExpanderAccessibilityText(radioOption.label, true)}\n\t\t\t\t\t\t\t\t</label>\n\n\t\t\t\t\t\t\t\t{radioOption.hintExpander && (\n\t\t\t\t\t\t\t\t\t<div class=\"ontario-radios__hint-expander\">\n\t\t\t\t\t\t\t\t\t\t<ontario-hint-expander\n\t\t\t\t\t\t\t\t\t\t\thint={radioOption.hintExpander.hint}\n\t\t\t\t\t\t\t\t\t\t\tcontent={radioOption.hintExpander.content}\n\t\t\t\t\t\t\t\t\t\t\thintContentType={radioOption.hintExpander.hintContentType}\n\t\t\t\t\t\t\t\t\t\t\tinput-exists\n\t\t\t\t\t\t\t\t\t\t></ontario-hint-expander>\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</div>\n\t\t\t\t\t\t))}\n\n\t\t\t\t\t\t{this.internalHintExpander && (\n\t\t\t\t\t\t\t<div class=\"ontario-radios__hint-expander\">\n\t\t\t\t\t\t\t\t<ontario-hint-expander\n\t\t\t\t\t\t\t\t\thint={this.internalHintExpander.hint}\n\t\t\t\t\t\t\t\t\tcontent={this.internalHintExpander.content}\n\t\t\t\t\t\t\t\t\thintContentType={this.internalHintExpander.hintContentType}\n\t\t\t\t\t\t\t\t\tinput-exists\n\t\t\t\t\t\t\t\t></ontario-hint-expander>\n\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t)}\n\t\t\t\t\t</div>\n\t\t\t\t</fieldset>\n\t\t\t</div>\n\t\t);\n\t}\n}\n"],"version":3}

package/dist/components/ontario-step-indicator.d.ts

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

package/dist/components/ontario-step-indicator.js

@@ -0,0 +1,152 @@
+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$2 } from './ontario-icon-chevron-left2.js';
+
+const ontarioStepIndicatorCss =
+	'@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-button:focus,.ontario-button:active{box-shadow:0 0 0 4px #009ADB;outline:4px solid transparent;transition:box-shadow 0.1s ease-in-out}.ontario-button{border:none;border-radius:4px;box-sizing:border-box;box-shadow:none;display:inline-block;font-size:1.125rem;font-family:"Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;font-weight:600;line-height:1.5555555556;margin:0 1.75rem 1.5rem 0;min-width:10rem;padding:0.625rem 1.5rem;text-align:center;text-decoration:none;cursor:pointer}@media screen and (max-width: 40em){.ontario-button{margin-right:0;display:block;width:100%}}.ontario-button .ontario-icon{margin-right:4px}.ontario-button--primary{background-color:#0066CC;color:#FFFFFF}.ontario-button--primary:hover{background-color:#00478F;color:#FFFFFF}.ontario-button--primary:focus{background-color:#00478F;color:#FFFFFF;transition:background-color 0.2s ease-out, box-shadow 0.1s ease-in-out}.ontario-button--primary:active{background-color:#002142;color:#FFFFFF;transition:background-color 0s, box-shadow 0.1s ease-in-out}.ontario-button--primary:visited{color:#FFFFFF}.ontario-button--secondary{background-color:#FFFFFF;border:2px solid #0066CC;color:#0066CC;padding-top:0.5rem;padding-bottom:0.5rem}.ontario-button--secondary:hover{background-color:#e0f0ff;border-color:#00478F;color:#00478F}.ontario-button--secondary:focus{background-color:#e0f0ff;border-color:#00478F;color:#00478F;transition:background-color 0.2s ease-out, box-shadow 0.1s ease-in-out}.ontario-button--secondary:active{background-color:#c2e0ff;border-color:#002142;color:#002142;transition:background-color 0s, box-shadow 0.1s ease-in-out}.ontario-button--secondary:visited{color:#0066CC}.ontario-button--tertiary{background-color:transparent;color:#0066CC;text-decoration:underline}.ontario-button--tertiary:hover{background-color:#e8e8e8;color:#00478F;text-decoration:underline}.ontario-button--tertiary:focus{background-color:#e8e8e8;color:#00478F;text-decoration:underline;transition:background-color 0.2s ease-out, box-shadow 0.1s ease-in-out}.ontario-button--tertiary:active{background-color:#d1d1d1;color:#002142;text-decoration:underline;transition:background-color 0s, box-shadow 0.1s ease-in-out}.ontario-button--tertiary:visited{color:#0066CC}.ontario-button--internalThemeDark{background-color:#1a1a1a;border:2px solid #FFFFFF;color:#FFFFFF}.ontario-button--internalThemeDark:hover{background-color:#4d4d4d}.ontario-button--internalThemeDark:focus{background-color:#4d4d4d;transition:background-color 0.2s ease-out, box-shadow 0.1s ease-in-out}.ontario-button--internalThemeDark:active{background-color:#4d4d4d;transition:background-color 0s, box-shadow 0.1s ease-in-out}.ontario-button--internalThemeDark:visited{color:#0066CC}.ontario-step-indicator{margin-bottom:2.5rem}.ontario-step-indicator .ontario-step-indicator--with-back-button--false,.ontario-step-indicator .ontario-step-indicator--with-back-button--true,.ontario-step-indicator .ontario-step-indicator--without-back-button,.ontario-step-indicator .ontario-step-indicator--with-back-button{display:flex;align-items:center;justify-content:space-between}.ontario-step-indicator .ontario-step-indicator--with-back-button--false,.ontario-step-indicator .ontario-step-indicator--without-back-button{justify-content:flex-end}.ontario-step-indicator .ontario-h4{margin:1.25rem 0}@media screen and (max-width: 40em){.ontario-step-indicator .ontario-h4{margin:1rem 0;text-align:right}}.ontario-step-indicator .ontario-button.ontario-button--tertiary{display:flex;align-items:center;margin:0.75rem 0;padding-left:0.5rem;padding-right:1rem;min-width:3rem}@media screen and (max-width: 40em){.ontario-step-indicator .ontario-button.ontario-button--tertiary{width:unset}}.ontario-step-indicator .ontario-button.ontario-button--tertiary .ontario-icon{margin:0 0.375rem 0 0;padding:0;min-width:24px;min-height:24px}.ontario-step-indicator hr{padding:0;margin:0}';
+const OntarioStepIndicatorStyle0 = ontarioStepIndicatorCss;
+
+const OntarioStepIndicator$1 = /*@__PURE__*/ proxyCustomElement(
+	class OntarioStepIndicator extends HTMLElement {
+		constructor() {
+			super();
+			this.__registerHost();
+			this.__attachShadow();
+			this.handleCustomOnClick = (e) => {
+				this.customOnClick && this.customOnClick(e);
+			};
+			this.showBackButton = false;
+			this.backButtonUrl = undefined;
+			this.currentStep = undefined;
+			this.numberOfSteps = undefined;
+			this.percentageComplete = undefined;
+			this.customOnClick = undefined;
+			this.language = undefined;
+			this.translations = translations;
+		}
+		/**
+		 * 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);
+			}
+		}
+		handleHeaderLanguageToggled(event) {
+			this.language = validateLanguage(event);
+		}
+		componentWillLoad() {
+			this.language = validateLanguage(this.language);
+		}
+		render() {
+			return h(
+				'div',
+				{ key: 'd0409bc6e29e154adc63b98808d0763946cbffaf', class: 'ontario-step-indicator' },
+				h(
+					'div',
+					{ key: '04dbd24ee41638675a0b3ece3a2ef8c479235b78', class: 'ontario-row' },
+					h(
+						'div',
+						{ key: 'faa631380f1f0cb18ca72bf2fbb31221292d04f2', class: 'ontario-columns ontario-small-12' },
+						h(
+							'div',
+							{
+								key: 'a5f0eae9768f9bce57db3d31cc016e79e83ce73d',
+								class: `ontario-step-indicator--with-back-button--${this.showBackButton}`,
+							},
+							this.showBackButton === true &&
+								!this.backButtonUrl &&
+								h(
+									'button',
+									{ class: 'ontario-button ontario-button--tertiary', onClick: (e) => this.handleCustomOnClick(e) },
+									h('ontario-icon-chevron-left', { colour: 'blue' }),
+									this.translations.stepIndicator.back[`${this.language}`],
+								),
+							this.showBackButton === true &&
+								this.backButtonUrl &&
+								h(
+									'a',
+									{ class: 'ontario-button ontario-button--tertiary', href: this.backButtonUrl },
+									h('ontario-icon-chevron-left', { colour: 'blue' }),
+									this.translations.stepIndicator.back[`${this.language}`],
+								),
+							this.percentageComplete
+								? h(
+										'span',
+										{ class: 'ontario-h4' },
+										this.percentageComplete,
+										this.language === 'en' ? '%' : h('span', null, '\u00A0%'),
+										' ',
+										this.translations.stepIndicator.complete[`${this.language}`],
+								  )
+								: h(
+										'span',
+										{ class: 'ontario-h4' },
+										this.translations.stepIndicator.step[`${this.language}`],
+										'\u00A0',
+										this.currentStep,
+										' ',
+										this.translations.stepIndicator.of[`${this.language}`],
+										'\u00A0',
+										this.numberOfSteps,
+								  ),
+						),
+						h('hr', { key: '10575f02752bf93aefff4ce1bc8eaf02d5a78c08' }),
+					),
+				),
+			);
+		}
+		get host() {
+			return this;
+		}
+		static get style() {
+			return OntarioStepIndicatorStyle0;
+		}
+	},
+	[
+		1,
+		'ontario-step-indicator',
+		{
+			showBackButton: [4, 'show-back-button'],
+			backButtonUrl: [1, 'back-button-url'],
+			currentStep: [2, 'current-step'],
+			numberOfSteps: [2, 'number-of-steps'],
+			percentageComplete: [2, 'percentage-complete'],
+			customOnClick: [16],
+			language: [1025],
+			translations: [32],
+		},
+		[
+			[8, 'setAppLanguage', 'handleSetAppLanguage'],
+			[8, 'headerLanguageToggled', 'handleHeaderLanguageToggled'],
+		],
+	],
+);
+function defineCustomElement$1() {
+	if (typeof customElements === 'undefined') {
+		return;
+	}
+	const components = ['ontario-step-indicator', 'ontario-icon-chevron-left'];
+	components.forEach((tagName) => {
+		switch (tagName) {
+			case 'ontario-step-indicator':
+				if (!customElements.get(tagName)) {
+					customElements.define(tagName, OntarioStepIndicator$1);
+				}
+				break;
+			case 'ontario-icon-chevron-left':
+				if (!customElements.get(tagName)) {
+					defineCustomElement$2();
+				}
+				break;
+		}
+	});
+}
+
+const OntarioStepIndicator = OntarioStepIndicator$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { OntarioStepIndicator, defineCustomElement };
+
+//# sourceMappingURL=ontario-step-indicator.js.map

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

@@ -0,0 +1 @@
+{"file":"ontario-step-indicator.js","mappings":";;;;;AAAA,MAAM,uBAAuB,GAAG,uxPAAuxP,CAAC;AACxzP,mCAAe,uBAAuB;;MCSzBA,sBAAoB;;;;;QAiExB,wBAAmB,GAAG,CAAC,CAAmB;YACjD,IAAI,CAAC,aAAa,IAAI,IAAI,CAAC,aAAa,CAAC,CAAC,CAAC,CAAC;SAC5C,CAAC;8BA3DiC,KAAK;;;;;;;4BAuDX,YAAY;;;;;IAXzC,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;IAQD,iBAAiB;QAChB,IAAI,CAAC,QAAQ,GAAG,gBAAgB,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC;KAChD;IAED,MAAM;QACL,QACC,4DAAK,KAAK,EAAC,wBAAwB,IAClC,4DAAK,KAAK,EAAC,aAAa,IACvB,4DAAK,KAAK,EAAC,kCAAkC,IAC5C,4DAAK,KAAK,EAAE,6CAA6C,IAAI,CAAC,cAAc,EAAE,IAC5E,IAAI,CAAC,cAAc,KAAK,IAAI,IAAI,CAAC,IAAI,CAAC,aAAa,KACnD,cAAQ,KAAK,EAAC,yCAAyC,EAAC,OAAO,EAAE,CAAC,CAAC,KAAK,IAAI,CAAC,mBAAmB,CAAC,CAAC,CAAC,IAClG,iCAA2B,MAAM,EAAC,MAAM,GAA6B,EACpE,IAAI,CAAC,YAAY,CAAC,aAAa,CAAC,IAAI,CAAC,GAAG,IAAI,CAAC,QAAQ,EAAE,CAAC,CACjD,CACT,EACA,IAAI,CAAC,cAAc,KAAK,IAAI,IAAI,IAAI,CAAC,aAAa,KAClD,SAAG,KAAK,EAAC,yCAAyC,EAAC,IAAI,EAAE,IAAI,CAAC,aAAa,IAC1E,iCAA2B,MAAM,EAAC,MAAM,GAA6B,EACpE,IAAI,CAAC,YAAY,CAAC,aAAa,CAAC,IAAI,CAAC,GAAG,IAAI,CAAC,QAAQ,EAAE,CAAC,CACtD,CACJ,EACA,IAAI,CAAC,kBAAkB,IACvB,YAAM,KAAK,EAAC,YAAY,IACtB,IAAI,CAAC,kBAAkB,EACvB,IAAI,CAAC,QAAQ,KAAK,IAAI,GAAG,GAAG,GAAG,0BAAoB,EAAE,GAAG,EACxD,IAAI,CAAC,YAAY,CAAC,aAAa,CAAC,QAAQ,CAAC,GAAG,IAAI,CAAC,QAAQ,EAAE,CAAC,CACvD,KAEP,YAAM,KAAK,EAAC,YAAY,IACtB,IAAI,CAAC,YAAY,CAAC,aAAa,CAAC,IAAI,CAAC,GAAG,IAAI,CAAC,QAAQ,EAAE,CAAC,YAAQ,IAAI,CAAC,WAAW,EAAE,GAAG,EACrF,IAAI,CAAC,YAAY,CAAC,aAAa,CAAC,EAAE,CAAC,GAAG,IAAI,CAAC,QAAQ,EAAE,CAAC,YAAQ,IAAI,CAAC,aAAa,CAC3E,CACP,CACI,EACN,4DAAM,CACD,CACD,CACD,EACL;KACF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["OntarioStepIndicator"],"sources":["src/components/ontario-step-indicator/ontario-step-indicator.scss?tag=ontario-step-indicator&encapsulation=shadow","src/components/ontario-step-indicator/ontario-step-indicator.tsx"],"sourcesContent":["@use 'sass:math';\n@use '@ongov/ontario-design-system-global-styles/dist/styles/scss/1-variables/global.variables' as globalVariables;\n@use '@ongov/ontario-design-system-global-styles/dist/styles/scss/1-variables/spacing.variables' as spacing;\n@use '@ongov/ontario-design-system-global-styles/dist/styles/scss/1-variables/breakpoints.variables' as breakpoints;\n@use '@ongov/ontario-design-system-global-styles/dist/styles/scss/4-elements/_global.elements.scss';\n@use '../ontario-button/ontario-button.scss';\n\n$ontario-icon-size: 24px;\n\n.ontario-step-indicator {\n\tmargin-bottom: spacing.$spacing-7;\n}\n\n.ontario-step-indicator .ontario-step-indicator--with-back-button--false,\n.ontario-step-indicator .ontario-step-indicator--with-back-button--true,\n// Fractal component style coverage ↓\n.ontario-step-indicator .ontario-step-indicator--without-back-button,\n.ontario-step-indicator .ontario-step-indicator--with-back-button {\n\tdisplay: flex;\n\talign-items: center;\n\tjustify-content: space-between;\n}\n\n.ontario-step-indicator .ontario-step-indicator--with-back-button--false,\n// Fractal component style coverage ↓\n.ontario-step-indicator .ontario-step-indicator--without-back-button {\n\tjustify-content: flex-end;\n}\n\n.ontario-step-indicator .ontario-h4 {\n\tmargin: (spacing.$spacing-4 + spacing.$spacing-1) 0;\n\n\t@media screen and (max-width: breakpoints.$small-breakpoint) {\n\t\tmargin: spacing.$spacing-4 0;\n\t\ttext-align: right;\n\t}\n}\n\n/**\n* Tertiary button defaults are overridden to achieve the mini-button specifications\n* width is unset in small screen size to remove unnecessary space being added to the button\n* min-width and max-width are set for small screen size to ensure the \"back\" button doesn't break and protrude into the text to the right\n*/\n.ontario-step-indicator .ontario-button.ontario-button--tertiary {\n\tdisplay: flex;\n\talign-items: center;\n\tmargin: spacing.$spacing-3 spacing.$spacing-0;\n\tpadding-left: spacing.$spacing-2;\n\tpadding-right: spacing.$spacing-4;\n\tmin-width: spacing.$spacing-8;\n\n\t@media screen and (max-width: breakpoints.$small-breakpoint) {\n\t\twidth: unset;\n\t}\n\n\t.ontario-icon {\n\t\tmargin: spacing.$spacing-0 math.div(spacing.$spacing-3, 2) spacing.$spacing-0 spacing.$spacing-0;\n\t\tpadding: spacing.$spacing-0;\n\t\tmin-width: $ontario-icon-size;\n\t\tmin-height: $ontario-icon-size;\n\t}\n}\n\n.ontario-step-indicator hr {\n\tpadding: spacing.$spacing-0;\n\tmargin: spacing.$spacing-0;\n}\n","import { Component, Prop, Element, h, State, Listen } from '@stencil/core';\nimport { Language } from '../../utils/common/language-types';\nimport { validateLanguage } from '../../utils/validation/validation-functions';\nimport translations from '../../translations/global.i18n.json';\n\n@Component({\n\ttag: 'ontario-step-indicator',\n\tstyleUrl: 'ontario-step-indicator.scss',\n\tshadow: true,\n})\nexport class OntarioStepIndicator {\n\t@Element() host: HTMLElement;\n\n\t/**\n\t * A boolean value to determine whether or not the back button is displayed for the step indicator.\n\t *\n\t * This is optional. If no prop is passed, it will default to `false`.\n\t */\n\t@Prop() showBackButton?: boolean = false;\n\n\t/**\n\t * URL for the back element to set a path for where the link will lead.\n\t *\n\t * If a URL is passed in, the back element will display as an anchor tag.\n\t * The back element will require either the backButtonURL prop or the customOnClick prop to be passed in order for the back element to display.\n\t */\n\t@Prop() backButtonUrl?: string;\n\n\t/**\n\t * A number value to indicate which step the user is currently on.\n\t */\n\t@Prop() currentStep?: number;\n\n\t/**\n\t * A number value to indicate to the user the total number of steps the form has.\n\t */\n\t@Prop() numberOfSteps?: number;\n\n\t/**\n\t * A number value to indicate to the user the percentage of the form that has been completed.\n\t */\n\n\t@Prop() percentageComplete?: number;\n\n\t/**\n\t * Used to add a custom function to the back button onClick event.\n\t *\n\t * If this function is passed in, the back element will display as a button.\n\t * The back element will require either the backButtonURL prop or the customOnClick prop to be passed in order for the back element to display.\n\t */\n\t@Prop() customOnClick?: (event: globalThis.Event) => void;\n\n\t/**\n\t * The language of the component.\n\t * This is used for translations, and is by default set through event listeners checking for a language property from the header. If none are passed, it will default to English.\n\t */\n\t@Prop({ mutable: true }) language?: Language;\n\n\t/**\n\t * This listens for the `setAppLanguage` event sent from the test language toggler when it is is connected to the DOM. It is used for the initial language when the input component loads.\n\t */\n\t@Listen('setAppLanguage', { target: 'window' })\n\thandleSetAppLanguage(event: CustomEvent<Language>) {\n\t\tif (!this.language) {\n\t\t\tthis.language = validateLanguage(event);\n\t\t}\n\t}\n\n\t@Listen('headerLanguageToggled', { target: 'window' })\n\thandleHeaderLanguageToggled(event: CustomEvent<Language>) {\n\t\tthis.language = validateLanguage(event);\n\t}\n\n\t@State() translations: any = translations;\n\n\tprivate handleCustomOnClick = (e: globalThis.Event) => {\n\t\tthis.customOnClick && this.customOnClick(e);\n\t};\n\n\tcomponentWillLoad() {\n\t\tthis.language = validateLanguage(this.language);\n\t}\n\n\trender() {\n\t\treturn (\n\t\t\t<div class=\"ontario-step-indicator\">\n\t\t\t\t<div class=\"ontario-row\">\n\t\t\t\t\t<div class=\"ontario-columns ontario-small-12\">\n\t\t\t\t\t\t<div class={`ontario-step-indicator--with-back-button--${this.showBackButton}`}>\n\t\t\t\t\t\t\t{this.showBackButton === true && !this.backButtonUrl && (\n\t\t\t\t\t\t\t\t<button class=\"ontario-button ontario-button--tertiary\" onClick={(e) => this.handleCustomOnClick(e)}>\n\t\t\t\t\t\t\t\t\t<ontario-icon-chevron-left colour=\"blue\"></ontario-icon-chevron-left>\n\t\t\t\t\t\t\t\t\t{this.translations.stepIndicator.back[`${this.language}`]}\n\t\t\t\t\t\t\t\t</button>\n\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t\t{this.showBackButton === true && this.backButtonUrl && (\n\t\t\t\t\t\t\t\t<a class=\"ontario-button ontario-button--tertiary\" href={this.backButtonUrl}>\n\t\t\t\t\t\t\t\t\t<ontario-icon-chevron-left colour=\"blue\"></ontario-icon-chevron-left>\n\t\t\t\t\t\t\t\t\t{this.translations.stepIndicator.back[`${this.language}`]}\n\t\t\t\t\t\t\t\t</a>\n\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t\t{this.percentageComplete ? (\n\t\t\t\t\t\t\t\t<span class=\"ontario-h4\">\n\t\t\t\t\t\t\t\t\t{this.percentageComplete}\n\t\t\t\t\t\t\t\t\t{this.language === 'en' ? '%' : <span>&nbsp;%</span>}{' '}\n\t\t\t\t\t\t\t\t\t{this.translations.stepIndicator.complete[`${this.language}`]}\n\t\t\t\t\t\t\t\t</span>\n\t\t\t\t\t\t\t) : (\n\t\t\t\t\t\t\t\t<span class=\"ontario-h4\">\n\t\t\t\t\t\t\t\t\t{this.translations.stepIndicator.step[`${this.language}`]}&nbsp;{this.currentStep}{' '}\n\t\t\t\t\t\t\t\t\t{this.translations.stepIndicator.of[`${this.language}`]}&nbsp;{this.numberOfSteps}\n\t\t\t\t\t\t\t\t</span>\n\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t</div>\n\t\t\t\t\t\t<hr />\n\t\t\t\t\t</div>\n\t\t\t\t</div>\n\t\t\t</div>\n\t\t);\n\t}\n}\n"],"version":3}