@ongov/ontario-design-system-component-library 6.0.0-alpha.4 → 6.0.0-alpha.6

package/components/ontario-search-box.js

@@ -0,0 +1,283 @@
+import { p as proxyCustomElement, H, c as createEvent, h } from './index.js';
+import { O as OntarioIconSearch } from './p-CXfntdg5.js';
+import { I as Input } from './p-C73HZQcq.js';
+import { I as InputCaption, h as handleInputEvent, E as EventType } from './p-CeFeBwzQ.js';
+import { a as isClientSideRendering } from './p-TS9NoIOc.js';
+import { c as constructHintTextObject } from './p-CIdZS10A.js';
+import { t as translations } from './p-DgMhpSmi.js';
+import { d as defineCustomElement$2 } from './p-BBhl-3u7.js';
+
+const ontarioSearchBoxCss =
+	'@charset "UTF-8";.ontario-search__input.ontario-input:focus,.ontario-input:focus,.ontario-input:active{box-shadow:0 0 0 4px #009ADB;outline:4px solid transparent;transition:box-shadow 0.1s ease-in-out}h6,.ontario-h6,h5,.ontario-h5,h4,.ontario-h4,h3,.ontario-h3,h2,.ontario-h2,h1>.ontario-label--heading,.ontario-fieldset__legend--large h1,.ontario-fieldset__legend--heading h1,h1,.ontario-h1{font-style:normal;font-weight:700;text-rendering:optimizeLegibility;margin-bottom:1rem;font-feature-settings:normal;font-family:"Raleway Modified", "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif}h1>.ontario-label--heading,.ontario-fieldset__legend--large h1,.ontario-fieldset__legend--heading h1,h1,.ontario-h1{font-size:2rem;letter-spacing:0.04rem;line-height:1.29;margin:2.5rem 0 1.5rem 0;max-width:70rem}@media screen and (min-width: 40em){h1>.ontario-label--heading,.ontario-fieldset__legend--large h1,.ontario-fieldset__legend--heading h1,h1,.ontario-h1{font-size:2.5rem;letter-spacing:0.04rem;line-height:1.2}}h2,.ontario-h2{font-size:1.6875rem;letter-spacing:0.03rem;line-height:1.37;margin:0 0 0.75rem 0;max-width:48rem}@media screen and (min-width: 40em){h2,.ontario-h2{font-size:2.0625rem;letter-spacing:0.02rem;line-height:1.33}}h3,.ontario-h3{font-size:1.4375rem;letter-spacing:0.02rem;line-height:1.39;margin:0 0 0.75rem 0;max-width:48rem}@media screen and (min-width: 40em){h3,.ontario-h3{font-size:1.75rem;letter-spacing:0.02rem;line-height:1.43}}h4,.ontario-h4{font-size:1.25rem;letter-spacing:0.03rem;line-height:1.5;margin:0 0 0.75rem 0;max-width:48rem}@media screen and (min-width: 40em){h4,.ontario-h4{font-size:1.5rem;letter-spacing:0.0313rem;line-height:1.5}}h5,.ontario-h5{font-size:1.125rem;letter-spacing:0.03rem;line-height:1.56;margin:0 0 0.75rem 0;max-width:48rem}@media screen and (min-width: 40em){h5,.ontario-h5{font-size:1.1875rem;letter-spacing:0.025rem;line-height:1.5}}h6,.ontario-h6{font-size:1rem;line-height:1.56;letter-spacing:0.03rem;max-width:48rem;margin:0 0 0.75rem 0}@media screen and (min-width: 40em){h6,.ontario-h6{font-size:1rem;letter-spacing:0.025rem;line-height:1.5}}.ontario-lead-statement{font-size:1.25rem;line-height:1.6;max-width:70rem}@media screen and (min-width: 40em){.ontario-lead-statement{font-size:1.375rem}}html{font-family:"Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;font-size:1rem}body{font-size:1rem;line-height:1.6;background-color:#FFFFFF;color:rgb(25.5, 25.5, 25.5);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 rgb(25.5, 25.5, 25.5)}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-hide{display:none !important}.ontario-invisible{visibility:hidden !important}@media screen and (max-width: 39.99875em){.ontario-hide-for-small-only{display:none !important}}@media screen and (max-width: 0em), screen and (min-width: 40em){.ontario-show-for-small-only{display:none !important}}@media print, screen and (min-width: 40em){.ontario-hide-for-medium{display:none !important}}@media screen and (max-width: 39.99875em){.ontario-show-for-medium{display:none !important}}@media screen and (min-width: 40em) and (max-width: 72.99875em){.ontario-hide-for-medium-only{display:none !important}}@media screen and (max-width: 39.99875em), screen and (min-width: 73em){.ontario-show-for-medium-only{display:none !important}}@media print, screen and (min-width: 73em){.ontario-hide-for-large{display:none !important}}@media screen and (max-width: 72.99875em){.ontario-show-for-large{display:none !important}}@media screen and (min-width: 73em) and (max-width: 95.99875em){.ontario-hide-for-large-only{display:none !important}}@media screen and (max-width: 72.99875em), screen and (min-width: 96em){.ontario-show-for-large-only{display:none !important}}.ontario-show-for-sr,.ontario-show-on-focus{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0, 0, 0, 0)}.ontario-show-on-focus:active,.ontario-show-on-focus:focus{position:static;width:auto;height:auto;overflow:visible;clip:auto}.ontario-show-for-landscape,.ontario-hide-for-portrait{display:block !important}@media screen and (orientation: landscape){.ontario-show-for-landscape,.ontario-hide-for-portrait{display:block !important}}@media screen and (orientation: portrait){.ontario-show-for-landscape,.ontario-hide-for-portrait{display:none !important}}.ontario-hide-for-landscape,.ontario-show-for-portrait{display:none !important}@media screen and (orientation: landscape){.ontario-hide-for-landscape,.ontario-show-for-portrait{display:none !important}}@media screen and (orientation: portrait){.ontario-hide-for-landscape,.ontario-show-for-portrait{display:block !important}}.ontario-fieldset__legend{color:rgb(25.5, 25.5, 25.5);font-family:"Raleway Modified", "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;font-size:1.1875rem;font-weight:700;margin:0 0 1rem 0;line-height:1.5;max-width:38.75em;white-space:normal;width:100%;hyphens:auto}@media screen and (max-width: 40em){.ontario-fieldset__legend{font-size:1.125rem;line-height:1.56}}.ontario-fieldset__legend--large,.ontario-fieldset__legend--heading{letter-spacing:0.02rem;line-height:1.2}.ontario-fieldset__legend--large h1,.ontario-fieldset__legend--heading h1{display:inline-block;margin:0}@media screen and (max-width: 40em){.ontario-fieldset__legend--large,.ontario-fieldset__legend--heading{font-size:1.4375rem;line-height:1.39}}.ontario-fieldset__legend--large{font-size:1.75rem}.ontario-fieldset__legend-required-flag,.ontario-fieldset__legend-optional-flag{font-family:"Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;font-size:1rem;font-weight:400}.ontario-fieldset__legend-required-flag:before,.ontario-fieldset__legend-optional-flag:before{content:" "}.ontario-label{cursor:pointer;color:rgb(25.5, 25.5, 25.5);font-family:"Raleway Modified", "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;font-size:1.1875rem;font-weight:700;line-height:1.5;margin:0 0 1rem 0;max-width:38.75em;white-space:normal;width:100%;hyphens:auto}@media screen and (max-width: 40em){.ontario-label{font-size:1.125rem;line-height:1.56}}.ontario-label--large{font-size:1.75rem;letter-spacing:0.02rem;line-height:1.2;max-width:26.25em}@media screen and (max-width: 40em){.ontario-label--large{font-size:1.4375rem;line-height:1.39}}h1>.ontario-label--heading{display:inline-block;margin:0}.ontario-label__flag{font-family:"Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;font-size:1rem;font-weight:400}.ontario-label__flag:before{content:" "}.ontario-input{border:2px solid rgb(25.5, 25.5, 25.5);border-radius:4px;box-sizing:border-box;color:rgb(25.5, 25.5, 25.5);display:block;font-size:1rem;font-family:"Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;line-height:1.5;margin:0;max-width:48rem;width:100%;padding:0.625rem 1rem;transition:box-shadow 0.1s ease-in-out}.ontario-input--2-char-width{max-width:8ex}.ontario-input--3-char-width{max-width:10ex}.ontario-input--4-char-width{max-width:12ex}.ontario-input--5-char-width{max-width:14ex}.ontario-input--7-char-width{max-width:17ex}.ontario-input--10-char-width{max-width:23ex}.ontario-input--20-char-width{max-width:41ex}.ontario-search__container{max-width:34rem;margin-bottom:2.5rem}.ontario-search__input-container{position:relative}.ontario-search__input.ontario-input{border:2px solid rgb(25.5, 25.5, 25.5);margin-bottom:0;height:3rem;padding-left:0.75rem;padding-right:8.5rem;width:100%}.ontario-search__input.ontario-input:invalid+input[type=reset]{display:none}input[type=reset].ontario-search__reset{position:absolute;display:flex;align-items:center;top:0.75rem;right:6rem;height:1.5rem;width:1.5rem;color:rgb(25.5, 25.5, 25.5);margin:0;padding:0.25rem;background-size:1.5rem;background-image:url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgZmlsbD0ibm9uZSI+PHBhdGggZD0iTTE5IDYuNEwxNy42IDUgMTIgMTAuNiA2LjQgNSA1IDYuNGw1LjYgNS42TDUgMTcuNiA2LjQgMTlsNS42LTUuNiA1LjYgNS42IDEuNC0xLjQtNS42LTUuNkwxOSA2LjR6IiBmaWxsPSIjMDAwIi8+PC9zdmc+);background-position:center center;background-repeat:no-repeat;background-color:transparent;outline:none;border:none;cursor:pointer}input[type=reset].ontario-search__reset:focus{box-shadow:inset 0 0 0 4px #009ADB}@media screen and (max-width: 40em){input[type=reset].ontario-search__reset{right:5.5rem}}.ontario-search__submit{border:0;border-radius:0 3px 3px 0;background-color:#0066CC;color:rgb(25.5, 25.5, 25.5);display:flex;justify-content:center;align-items:center;font-family:"Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;font-weight:600;font-size:1.125rem;width:5rem;line-height:1.56;position:absolute;right:0;bottom:0;top:0;cursor:pointer}.ontario-search__submit:hover{background-color:#00478F;color:#FFFFFF}.ontario-search__submit:focus{outline:none;box-shadow:0 0 0 4px #009ADB;background-color:#00478F;color:#FFFFFF}.ontario-search__submit:active{background-color:#002142;color:#FFFFFF}.ontario-search__submit svg{fill:#FFFFFF;margin-right:0;margin-bottom:0;width:2rem;height:2rem;display:inline-block;vertical-align:middle;overflow:hidden}@media screen and (max-width: 40em){.ontario-search__submit{width:3rem}}input[type=search].ontario-search__input::-webkit-search-decoration,input[type=search].ontario-search__input::-webkit-search-cancel-button,input[type=search].ontario-search__input::-webkit-search-results-button,input[type=search].ontario-search__input::-webkit-search-results-decoration{-webkit-appearance:none}';
+
+const OntarioSearchBox$1 = /*@__PURE__*/ proxyCustomElement(
+	class OntarioSearchBox extends H {
+		constructor() {
+			super();
+			this.__registerHost();
+			this.__attachShadow();
+			this.searchOnSubmit = createEvent(this, 'searchOnSubmit');
+			this.inputOnInput = createEvent(this, 'inputOnInput');
+			this.inputOnChange = createEvent(this, 'inputOnChange');
+			this.inputOnBlur = createEvent(this, 'inputOnBlur');
+			this.inputOnFocus = createEvent(this, 'inputOnFocus');
+			this.internals = this.attachInternals();
+			/**
+			 * The language of the component.
+			 * This is used for translations. If none is passed, it will default to English.
+			 */
+			this.language = 'en';
+			/**
+			 * This is used to determine whether the dropdown list is required or not.
+			 * This prop gets passed to the InputCaption utility to display either an optional or required flag in the label.
+			 * If no prop is set, it will default to false (optional).
+			 */
+			this.required = false;
+			this.translations = translations;
+			/**
+			 * when the reset button is clicked this function gets called
+			 */
+			this.handleFocus = () => {
+				this.setFocus(this.inputFieldRef);
+			};
+		}
+		/**
+		 * 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 `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,
+				this.translations,
+				this.language,
+				false,
+				this.required,
+			);
+		}
+		/**
+		 * Watch for changes to the `language` prop to render either the English or French translations
+		 */
+		updateLanguage() {
+			this.updateCaptionState(this.caption);
+		}
+		/**
+		 * If a `hintText` prop is passed, the id generated from it will be set to the internal `hintTextId` state to match with the select `aria-describedBy` attribute.
+		 */
+		async componentDidLoad() {
+			var _a;
+			this.hintTextId = await ((_a = this.hintTextRef) === null || _a === void 0 ? void 0 : _a.getHintTextId());
+		}
+		componentWillLoad() {
+			this.elementId = this.elementId;
+			this.parseHintText();
+			this.updateCaptionState(this.caption);
+		}
+		/**
+		 * Function to handle input events and the information pertaining to the input to emit.
+		 */
+		handleEvent(event, eventType) {
+			var _a, _b;
+			const input = event.target;
+			// Update the component value to match the value of the input element.
+			this.value = input === null || input === void 0 ? void 0 : input.value;
+			// Guard usage of `this.internals` to ensure this logic only runs in the browser.
+			// `ElementInternals` is not available during SSR, and unguarded access can cause hydration errors.
+			if (typeof ((_a = this.internals) === null || _a === void 0 ? void 0 : _a.setFormValue) === 'function') {
+				this.internals.setFormValue((_b = this.value) !== null && _b !== void 0 ? _b : '');
+			}
+			handleInputEvent(
+				event,
+				eventType,
+				input,
+				this.inputOnChange,
+				this.inputOnFocus,
+				this.inputOnBlur,
+				this.inputOnInput,
+				'input',
+				this.customOnChange,
+				this.customOnFocus,
+				this.customOnBlur,
+				this.customOnInput,
+				this.element,
+			);
+		}
+		/**
+		 * handleSearch function is called when the search submit button is clicked
+		 */
+		async handleSearch(event) {
+			event.preventDefault();
+			this.searchOnSubmit.emit(this.value);
+			this.performSearch && (await this.performSearch(this.value));
+		}
+		getId() {
+			var _a;
+			return (_a = this.elementId) !== null && _a !== void 0 ? _a : '';
+		}
+		getValue() {
+			var _a;
+			return (_a = this.value) !== null && _a !== void 0 ? _a : '';
+		}
+		/**
+		 *This function ensures that the focus returns to the search input field when the reset button is clicked.
+		 */
+		setFocus(inputRef) {
+			if (isClientSideRendering() && inputRef) {
+				inputRef.focus();
+			}
+		}
+		render() {
+			const searchInputFieldId = 'ontario-search-input-field';
+			return h(
+				'form',
+				{
+					key: '8b078645a41fd84b73c9f947b91621c2ea98e8aa',
+					name: 'searchForm',
+					id: 'ontario-search-form-container',
+					class:
+						'ontario-search__container ontario-columns ontario-small-10 ontario-medium-offset-3 ontario-medium-6 ontario-large-offset-0 ontario-large-6',
+					novalidate: true,
+				},
+				this.captionState.getCaption(searchInputFieldId, false, true) /* Note the _required_ text is disabled */,
+				this.internalHintText &&
+					h('ontario-hint-text', {
+						key: '45d432b9e9c00ff879462163fd2e8e994fcabb29',
+						hint: this.internalHintText.hint,
+						hintContentType: this.internalHintText.hintContentType,
+						ref: (el) => (this.hintTextRef = el),
+					}),
+				h(
+					'div',
+					{ key: '623480110e0b7118d66202b23a6ce64b2fba568d', class: 'ontario-search__input-container' },
+					h(Input, {
+						'key': 'bc76e1297685a3a881a48470fc811e352c4479f2',
+						'aria-describedBy': this.hintTextId,
+						'type': 'search',
+						'name': 'search',
+						'id': searchInputFieldId,
+						'autoComplete': 'off',
+						'aria-autocomplete': 'none',
+						'className': 'ontario-search__input ontario-input',
+						'required': true,
+						'ref': (el) => (this.inputFieldRef = el),
+						'onInput': (e) => this.handleEvent(e, EventType.Input),
+						'onChange': (e) => this.handleEvent(e, EventType.Change),
+						'onBlur': (e) => this.handleEvent(e, EventType.Blur),
+						'onFocus': (e) => this.handleEvent(e, EventType.Focus),
+						'value': this.getValue(),
+					}),
+					h(Input, {
+						key: '126c0a3f0ccb790dbfc87043dbc98d73f44bd131',
+						className: 'ontario-search__reset',
+						id: 'ontario-search-reset',
+						type: 'reset',
+						value: '',
+						onClick: () => this.handleFocus(),
+					}),
+					h(
+						'button',
+						{
+							key: '18cd5489b8a04d6006ac20a74a9c91b7a89e229e',
+							class: 'ontario-search__submit',
+							type: 'submit',
+							id: 'ontario-search-box__submit',
+							onClick: (e) => this.handleSearch(e),
+						},
+						h(
+							'span',
+							{ key: '9473b1a4da14d0ec4eacc86ab1b6e51f11a1c24a', class: 'ontario-show-for-sr' },
+							this.translations.header.submit[`${this.language}`],
+						),
+						h('span', {
+							'key': 'ea8463e8481ed6c3d79ff86dfe2ee9385d44bc55',
+							'innerHTML': OntarioIconSearch,
+							'aria-hidden': 'true',
+						}),
+					),
+				),
+			);
+		}
+		get element() {
+			return this;
+		}
+		static get watchers() {
+			return {
+				hintText: ['parseHintText'],
+				caption: ['updateCaptionState'],
+				language: ['updateLanguage'],
+			};
+		}
+		static get style() {
+			return ontarioSearchBoxCss;
+		}
+	},
+	[
+		257,
+		'ontario-search-box',
+		{
+			language: [1025],
+			elementId: [1025, 'element-id'],
+			value: [1025],
+			caption: [1],
+			required: [4],
+			performSearch: [16, 'perform-search'],
+			hintText: [1, 'hint-text'],
+			customOnInput: [16, 'custom-on-input'],
+			customOnChange: [16, 'custom-on-change'],
+			customOnBlur: [16, 'custom-on-blur'],
+			customOnFocus: [16, 'custom-on-focus'],
+			internalHintText: [32],
+			captionState: [32],
+			hintTextId: [32],
+			translations: [32],
+		},
+		undefined,
+		{
+			hintText: ['parseHintText'],
+			caption: ['updateCaptionState'],
+			language: ['updateLanguage'],
+		},
+	],
+);
+function defineCustomElement$1() {
+	if (typeof customElements === 'undefined') {
+		return;
+	}
+	const components = ['ontario-search-box', 'ontario-hint-text'];
+	components.forEach((tagName) => {
+		switch (tagName) {
+			case 'ontario-search-box':
+				if (!customElements.get(tagName)) {
+					customElements.define(tagName, OntarioSearchBox$1);
+				}
+				break;
+			case 'ontario-hint-text':
+				if (!customElements.get(tagName)) {
+					defineCustomElement$2();
+				}
+				break;
+		}
+	});
+}
+defineCustomElement$1();
+
+const OntarioSearchBox = OntarioSearchBox$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { OntarioSearchBox, defineCustomElement };
+//# sourceMappingURL=ontario-search-box.js.map
+
+//# sourceMappingURL=ontario-search-box.js.map

package/components/ontario-search-box.js.map

@@ -0,0 +1 @@
+{"file":"ontario-search-box.js","mappings":"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","names":["OntarioSearchBox","__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/ontario-search-box/ontario-search-box.scss?tag=ontario-search-box&encapsulation=shadow","src/components/ontario-search-box/ontario-search-box.tsx"],"sourcesContent":["@use 'sass:math';\n@use 'pkg:@ongov/ontario-design-system-global-styles/dist/styles/scss/1-variables/global.variables' as globalVariables;\n@use 'pkg:@ongov/ontario-design-system-global-styles/dist/styles/scss/1-variables/spacing.variables' as spacing;\n@use 'pkg:@ongov/ontario-design-system-global-styles/dist/styles/scss/1-variables/colours.variables' as colours;\n@use 'pkg:@ongov/ontario-design-system-global-styles/dist/styles/scss/1-variables/breakpoints.variables' as breakpoints;\n@use 'pkg:@ongov/ontario-design-system-global-styles/dist/styles/scss/1-variables/fonts.variables' as fonts;\n@use 'pkg:@ongov/ontario-design-system-global-styles/dist/styles/scss/1-variables/line-heights.variables' as lineheight;\n@use 'pkg:@ongov/ontario-design-system-global-styles/dist/styles/scss/1-variables/font-weights.variables' as fontWeights;\n@use 'pkg:@ongov/ontario-design-system-global-styles/dist/styles/scss/2-tools/functions/global.functions' as\n\tglobalFunctions;\n@use 'pkg:@ongov/ontario-design-system-global-styles/dist/styles/scss/2-tools/placeholder/focus.placeholders' as\n\tfocusPlaceholders;\n@use 'pkg:@ongov/ontario-design-system-global-styles/dist/styles/scss/4-elements/_global.elements.scss';\n@use 'pkg:@ongov/ontario-design-system-global-styles/dist/styles/scss/7-overrides/_visibility.overrides.scss';\n\n@use '../../styles/fieldsets.scss';\n@use '../../styles/labels.scss';\n@use '../../styles/text-inputs.scss';\n\n$ontario-input-height: globalFunctions.px-to-rem(48);\n$ontario-search-icon-size: 2rem;\n$ontario-reset-icon-size: 1.5rem;\n$ontario-search-button-width: 5rem;\n$ontario-search-button-width--mobile: 3rem;\n$ontario-search-input-padding: 8.5rem;\n$ontario-search-input-padding--mobile: 7.75rem;\n$ontario-search-desktop-width: 34rem;\n$ontario-search-mobile-width: 20.5rem;\n\n.ontario-search__container {\n\tmax-width: $ontario-search-desktop-width;\n\tmargin-bottom: spacing.$spacing-7;\n}\n\n.ontario-search__input-container {\n\tposition: relative;\n}\n\n.ontario-search__input.ontario-input {\n\tborder: 2px solid colours.$ontario-colour-black;\n\tmargin-bottom: spacing.$spacing-0;\n\theight: $ontario-input-height;\n\tpadding-left: spacing.$spacing-3;\n\tpadding-right: $ontario-search-input-padding;\n\twidth: 100%;\n\n\t&:invalid + input[type='reset'] {\n\t\tdisplay: none;\n\t}\n\n\t&:focus {\n\t\t@extend %ontario-focus;\n\t}\n}\n\ninput[type='reset'].ontario-search__reset {\n\tposition: absolute;\n\tdisplay: flex;\n\talign-items: center;\n\ttop: spacing.$spacing-3;\n\tright: $ontario-search-button-width + spacing.$spacing-4;\n\theight: $ontario-reset-icon-size;\n\twidth: $ontario-reset-icon-size;\n\tcolor: colours.$ontario-colour-black;\n\tmargin: spacing.$spacing-0;\n\tpadding: spacing.$spacing-1;\n\tbackground-size: $ontario-reset-icon-size;\n\tbackground-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgZmlsbD0ibm9uZSI+PHBhdGggZD0iTTE5IDYuNEwxNy42IDUgMTIgMTAuNiA2LjQgNSA1IDYuNGw1LjYgNS42TDUgMTcuNiA2LjQgMTlsNS42LTUuNiA1LjYgNS42IDEuNC0xLjQtNS42LTUuNkwxOSA2LjR6IiBmaWxsPSIjMDAwIi8+PC9zdmc+);\n\tbackground-position: center center;\n\tbackground-repeat: no-repeat;\n\tbackground-color: transparent;\n\toutline: none;\n\tborder: none;\n\tcursor: pointer;\n\n\t&:focus {\n\t\tbox-shadow: inset 0 0 0 globalVariables.$global-radius colours.$ontario-colour-focus;\n\t}\n\n\t@media screen and (max-width: breakpoints.$small-breakpoint) {\n\t\tright: $ontario-search-button-width--mobile + spacing.$spacing-7;\n\t}\n}\n\n.ontario-search__submit {\n\tborder: 0;\n\tborder-radius: 0 3px 3px 0;\n\tbackground-color: colours.$ontario-colour-link;\n\tcolor: colours.$ontario-colour-black;\n\n\tdisplay: flex;\n\tjustify-content: center;\n\talign-items: center;\n\n\tfont-family: fonts.$ontario-font-open-sans;\n\tfont-weight: fontWeights.$ontario-font-weights-semi-bold;\n\tfont-size: 1.125rem;\n\twidth: $ontario-search-button-width;\n\tline-height: lineheight.$ontario-line-height-8;\n\n\tposition: absolute;\n\tright: spacing.$spacing-0;\n\tbottom: spacing.$spacing-0;\n\ttop: spacing.$spacing-0;\n\tcursor: pointer;\n\n\t&:hover {\n\t\tbackground-color: colours.$ontario-colour-link--hover;\n\t\tcolor: colours.$ontario-colour-white;\n\t}\n\n\t&:focus {\n\t\toutline: none;\n\t\tbox-shadow: 0 0 0 globalVariables.$global-radius colours.$ontario-colour-focus;\n\t\tbackground-color: colours.$ontario-colour-link--hover;\n\t\tcolor: colours.$ontario-colour-white;\n\t}\n\n\t&:active {\n\t\tbackground-color: colours.$ontario-colour-link--active;\n\t\tcolor: colours.$ontario-colour-white;\n\t}\n\n\tsvg {\n\t\tfill: colours.$ontario-colour-white;\n\t\tmargin-right: spacing.$spacing-0;\n\t\tmargin-bottom: spacing.$spacing-0;\n\t\twidth: $ontario-search-icon-size;\n\t\theight: $ontario-search-icon-size;\n\t\tdisplay: inline-block;\n\t\tvertical-align: middle;\n\t\toverflow: hidden;\n\t}\n\n\t@media screen and (max-width: breakpoints.$small-breakpoint) {\n\t\twidth: $ontario-search-button-width--mobile;\n\t}\n}\n\n// remove default cancel button for input with type=\"search\"\ninput[type='search'].ontario-search__input::-webkit-search-decoration,\ninput[type='search'].ontario-search__input::-webkit-search-cancel-button,\ninput[type='search'].ontario-search__input::-webkit-search-results-button,\ninput[type='search'].ontario-search__input::-webkit-search-results-decoration {\n\t-webkit-appearance: none;\n}\n","import { Component, Prop, h, Element, EventEmitter, Event, AttachInternals, State, Watch } from '@stencil/core';\nimport OntarioIconSearch from '../ontario-icon/assets/ontario-icon-search.svg';\n\nimport { Input } from '../../utils/common/input/input';\nimport { Caption } from '../../utils/common/input-caption/caption.interface';\nimport { InputCaption } from '../../utils/common/input-caption/input-caption';\nimport { Language } from '../../utils/common/language-types';\nimport { Hint } from '../../utils/common/common.interface';\nimport { isClientSideRendering } from '../../utils/common/environment';\nimport { constructHintTextObject } from '../../utils/components/hints/hints';\nimport { handleInputEvent } from '../../utils/events/event-handler';\nimport {\n\tInputFocusBlurEvent,\n\tEventType,\n\tInputInteractionEvent,\n\tInputInputEvent,\n} from '../../utils/events/event-handler.interface';\n\nimport translations from '../../translations/global.i18n.json';\n\n@Component({\n\ttag: 'ontario-search-box',\n\tstyleUrl: 'ontario-search-box.scss',\n\tshadow: true,\n})\nexport class OntarioSearchBox {\n\t@Element() element: HTMLElement;\n\t@AttachInternals() internals: ElementInternals;\n\n\t/**\n\t * This Ref is used get a direct reference to the hint text element\n\t */\n\tprivate hintTextRef?: HTMLOntarioHintTextElement;\n\n\t/**\n\t * This Ref is used get a direct reference to the search input element\n\t */\n\tprivate inputFieldRef?: HTMLInputElement;\n\n\t/**\n\t * The language of the component.\n\t * This is used for translations. If none is passed, it will default to English.\n\t */\n\t@Prop({ mutable: true }) language?: Language = 'en';\n\n\t/**\n\t * The unique identifier of the search-box component. This is optional - if no ID is passed, one will be generated.\n\t */\n\t@Prop({ mutable: true }) elementId?: string;\n\n\t/**\n\t * The value of the search term.\n\t * This is optional.\n\t */\n\t@Prop({ mutable: true }) value?: string;\n\n\t/**\n\t * The text to display as the input label\n\t *\n\t * @example\n\t * <ontario-search-box\n\t *   caption='{\n\t *\t\t\t\"captionText\": \"Search directory\",\n\t *\t\t\t\"captionType\": \"default\"\n\t *\t\t}'\n\t *\t\trequired = \"true\"\n\t * >\n\t * </ontario-search-box>\n\t */\n\t@Prop() caption: Caption | string;\n\n\t/**\n\t * This is used to determine whether the dropdown list is required or not.\n\t * This prop 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 * This Function to perform a search operation.\n\t * This function will be called when the search submit button is triggered.\n\t * The value argument is used for as search term to use for the search operation. This parameter is optional.\n\t * The performSearch prop can be set dynamically using JavaScript, allowing you to define custom search functionality when the search form is submitted.\n\t *\n\t * @example\n\t * <ontario-search-box\n\t *\t  id=\"ontario-search-box\"\n\t *\t  caption='Search directory'\n\t * ></ontario-search-box>\n\t *\n\t * <script>\n\t *\twindow.addEventListener('load', () => {\n\t *\t\tconst searchBox = document.getElementById('ontario-search-box');\n\t *\t\tsearchBox.performSearch = async (value) => {\n\t * \t\t\tconsole.log('Performing search with value:', value);\n\t *\t\t};\n\t *\t});\n\t * </script>\n\t */\n\t@Prop() performSearch?: (value?: string) => Promise<void>;\n\n\t/**\n\t * Used to include the ontario-hint-text component for the search-box.\n\t * This is optional.\n\t */\n\t@Prop() hintText?: string | Hint;\n\n\t/**\n\t * Used to add a custom function to the input onInput event.\n\t */\n\t@Prop() customOnInput?: (event: globalThis.Event) => void;\n\n\t/**\n\t * Used to add a custom function to the 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 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 input onFocus event.\n\t */\n\t@Prop() customOnFocus?: (event: globalThis.Event) => void;\n\n\t/**\n\t * Emitted when the search is submitted.\n\t * Below is an example on how to hook into the event to get the event details.\n\t *\n\t * @example\n\t *\t<script>\n\t *\t\tdocument.getElementById('ontario-search-box').addEventListener('searchOnSubmit', (event) => {\n\t *\t \t\tconst searchValue = event.detail;\n\t *\t\t\tconsole.log('Search submitted with value:', searchValue);\n\t *\t  };\n\t * \t</script>\n\t */\n\t@Event() searchOnSubmit: EventEmitter<string>;\n\n\t/**\n\t * Emitted when a input  occurs when an input has been changed.\n\t */\n\t@Event() inputOnInput: EventEmitter<InputInputEvent>;\n\n\t/**\n\t * Emitted when a keyboard input or mouse event occurs when an input has been changed.\n\t */\n\t@Event() inputOnChange: EventEmitter<InputInteractionEvent>;\n\n\t/**\n\t * Emitted when a keyboard input event occurs when an input has lost focus.\n\t */\n\t@Event() inputOnBlur: EventEmitter<InputFocusBlurEvent>;\n\n\t/**\n\t * Emitted when a keyboard input event occurs when an input has gained focus.\n\t */\n\t@Event() inputOnFocus: EventEmitter<InputFocusBlurEvent>;\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 * Instantiate an InputCaption object for internal logic use\n\t */\n\t@State() private captionState: InputCaption;\n\n\t/**\n\t * Used for the `aria-describedby` value of the dropdown list. This will match with the id of the hint text.\n\t */\n\t@State() hintTextId: string | null | undefined;\n\n\t@State() translations: any = translations;\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 `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\tprivate updateCaptionState(newValue: Caption | string) {\n\t\tthis.captionState = new InputCaption(\n\t\t\tthis.element.tagName,\n\t\t\tnewValue,\n\t\t\tthis.translations,\n\t\t\tthis.language,\n\t\t\tfalse,\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 * If a `hintText` prop is passed, the id generated from it will be set to the internal `hintTextId` state to match with the select `aria-describedBy` attribute.\n\t */\n\tasync componentDidLoad() {\n\t\tthis.hintTextId = await this.hintTextRef?.getHintTextId();\n\t}\n\n\tcomponentWillLoad() {\n\t\tthis.elementId = this.elementId;\n\t\tthis.parseHintText();\n\t\tthis.updateCaptionState(this.caption);\n\t}\n\n\t/**\n\t * Function to handle input events and the information pertaining to the input to emit.\n\t */\n\tprivate handleEvent(event: globalThis.Event, eventType: EventType) {\n\t\tconst input = event.target as HTMLInputElement | null;\n\n\t\t// Update the component value to match the value of the input element.\n\t\tthis.value = input?.value;\n\n\t\t// Guard usage of `this.internals` to ensure this logic only runs in the browser.\n\t\t// `ElementInternals` is not available during SSR, and unguarded access can cause hydration errors.\n\t\tif (typeof this.internals?.setFormValue === 'function') {\n\t\t\tthis.internals.setFormValue(this.value ?? '');\n\t\t}\n\n\t\thandleInputEvent(\n\t\t\tevent,\n\t\t\teventType,\n\t\t\tinput,\n\t\t\tthis.inputOnChange,\n\t\t\tthis.inputOnFocus,\n\t\t\tthis.inputOnBlur,\n\t\t\tthis.inputOnInput,\n\t\t\t'input',\n\t\t\tthis.customOnChange,\n\t\t\tthis.customOnFocus,\n\t\t\tthis.customOnBlur,\n\t\t\tthis.customOnInput,\n\t\t\tthis.element,\n\t\t);\n\t}\n\n\t/**\n\t * handleSearch function is called when the search submit button is clicked\n\t */\n\tasync handleSearch(event: MouseEvent) {\n\t\tevent.preventDefault();\n\t\tthis.searchOnSubmit.emit(this.value);\n\t\tthis.performSearch && (await this.performSearch(this.value));\n\t}\n\n\tpublic getId(): string {\n\t\treturn this.elementId ?? '';\n\t}\n\n\tprivate getValue(): string | number {\n\t\treturn this.value ?? '';\n\t}\n\n\t/**\n\t *This function ensures that the focus returns to the search input field when the reset button is clicked.\n\t */\n\tprivate setFocus(inputRef?: HTMLInputElement) {\n\t\tif (isClientSideRendering() && inputRef) {\n\t\t\tinputRef.focus();\n\t\t}\n\t}\n\n\t/**\n\t * when the reset button is clicked this function gets called\n\t */\n\thandleFocus = () => {\n\t\tthis.setFocus(this.inputFieldRef);\n\t};\n\n\trender() {\n\t\tconst searchInputFieldId: string = 'ontario-search-input-field';\n\t\treturn (\n\t\t\t<form\n\t\t\t\tname=\"searchForm\"\n\t\t\t\tid=\"ontario-search-form-container\"\n\t\t\t\tclass=\"ontario-search__container ontario-columns ontario-small-10 ontario-medium-offset-3 ontario-medium-6 ontario-large-offset-0 ontario-large-6\"\n\t\t\t\tnovalidate\n\t\t\t>\n\t\t\t\t{this.captionState.getCaption(searchInputFieldId, false, true) /* Note the _required_ text is disabled */}\n\t\t\t\t{this.internalHintText && (\n\t\t\t\t\t<ontario-hint-text\n\t\t\t\t\t\thint={this.internalHintText.hint}\n\t\t\t\t\t\thintContentType={this.internalHintText.hintContentType}\n\t\t\t\t\t\tref={(el) => (this.hintTextRef = el)}\n\t\t\t\t\t></ontario-hint-text>\n\t\t\t\t)}\n\n\t\t\t\t<div class=\"ontario-search__input-container\">\n\t\t\t\t\t<Input\n\t\t\t\t\t\taria-describedBy={this.hintTextId}\n\t\t\t\t\t\ttype=\"search\"\n\t\t\t\t\t\tname=\"search\"\n\t\t\t\t\t\tid={searchInputFieldId}\n\t\t\t\t\t\tautoComplete=\"off\"\n\t\t\t\t\t\taria-autocomplete=\"none\"\n\t\t\t\t\t\tclassName=\"ontario-search__input ontario-input\"\n\t\t\t\t\t\trequired={true}\n\t\t\t\t\t\tref={(el) => (this.inputFieldRef = el)}\n\t\t\t\t\t\tonInput={(e) => this.handleEvent(e, EventType.Input)}\n\t\t\t\t\t\tonChange={(e) => this.handleEvent(e, EventType.Change)}\n\t\t\t\t\t\tonBlur={(e) => this.handleEvent(e, EventType.Blur)}\n\t\t\t\t\t\tonFocus={(e) => this.handleEvent(e, EventType.Focus)}\n\t\t\t\t\t\tvalue={this.getValue()}\n\t\t\t\t\t></Input>\n\t\t\t\t\t<Input\n\t\t\t\t\t\tclassName=\"ontario-search__reset\"\n\t\t\t\t\t\tid=\"ontario-search-reset\"\n\t\t\t\t\t\ttype=\"reset\"\n\t\t\t\t\t\tvalue=\"\"\n\t\t\t\t\t\tonClick={() => this.handleFocus()}\n\t\t\t\t\t></Input>\n\t\t\t\t\t<button\n\t\t\t\t\t\tclass=\"ontario-search__submit\"\n\t\t\t\t\t\ttype=\"submit\"\n\t\t\t\t\t\tid=\"ontario-search-box__submit\"\n\t\t\t\t\t\tonClick={(e) => this.handleSearch(e)}\n\t\t\t\t\t>\n\t\t\t\t\t\t<span class=\"ontario-show-for-sr\">{this.translations.header.submit[`${this.language}`]}</span>\n\t\t\t\t\t\t<span innerHTML={OntarioIconSearch} aria-hidden=\"true\" />\n\t\t\t\t\t</button>\n\t\t\t\t</div>\n\t\t\t</form>\n\t\t);\n\t}\n}\n"],"version":3}

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

@@ -0,0 +1,11 @@
+import type { Components, JSX } from '../dist/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/components/ontario-step-indicator.js

@@ -0,0 +1,172 @@
+import { p as proxyCustomElement, H, h } from './index.js';
+import { b as validateLanguage } from './p-CNqFEifG.js';
+import { t as translations } from './p-DgMhpSmi.js';
+import { d as defineCustomElement$2 } from './p-DGFFJaKo.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 Modified", "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:rgb(25.5, 25.5, 25.5);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 rgb(25.5, 25.5, 25.5)}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}:host{display:inline-block}.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;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:rgb(224.4, 239.7, 255);border-color:#00478F;color:#00478F}.ontario-button--secondary:focus{background-color:rgb(224.4, 239.7, 255);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:rgb(193.8, 224.4, 255);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:rgb(232.05, 232.05, 232.05);color:#00478F;text-decoration:underline}.ontario-button--tertiary:focus{background-color:rgb(232.05, 232.05, 232.05);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:rgb(209.1, 209.1, 209.1);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:rgb(25.5, 25.5, 25.5);border:2px solid #FFFFFF;color:#FFFFFF}.ontario-button--internalThemeDark:hover{background-color:rgb(76.5, 76.5, 76.5)}.ontario-button--internalThemeDark:focus{background-color:rgb(76.5, 76.5, 76.5);transition:background-color 0.2s ease-out, box-shadow 0.1s ease-in-out}.ontario-button--internalThemeDark:active{background-color:rgb(76.5, 76.5, 76.5);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 OntarioStepIndicator$1 = /*@__PURE__*/ proxyCustomElement(
+	class OntarioStepIndicator extends H {
+		constructor() {
+			super();
+			this.__registerHost();
+			this.__attachShadow();
+			/**
+			 * A boolean value to determine whether or not the back button is displayed for the step indicator.
+			 *
+			 * This is optional. If no prop is passed, it will default to `false`.
+			 */
+			this.showBackButton = false;
+			this.translations = translations;
+			this.handleCustomOnClick = (e) => {
+				this.customOnClick && this.customOnClick(e);
+			};
+		}
+		/**
+		 * 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);
+			}
+		}
+		/**
+		 * Handles an update to the language should the user request a language update from the language toggle.
+		 * @param {CustomEvent} - The language that has been selected.
+		 */
+		handleHeaderLanguageToggled(event) {
+			this.language = validateLanguage(event.detail.newLanguage);
+		}
+		componentWillLoad() {
+			this.language = validateLanguage(this.language);
+		}
+		render() {
+			return h(
+				'div',
+				{ key: '70cb5fade27aff8a750c7340220c915f67f81f39', class: 'ontario-step-indicator' },
+				h(
+					'div',
+					{ key: '3ec3b89888b0be5d3f0b0743237f24889eadaf63', class: 'ontario-row' },
+					h(
+						'div',
+						{ key: 'f235de1daf15555cb9ec79da68a95a06df3462ce', class: 'ontario-columns ontario-small-12' },
+						h(
+							'div',
+							{
+								key: '74f8286768579314fcbeaa24ddd4a0adfeb83fc3',
+								class: `ontario-step-indicator--with-back-button--${this.showBackButton}`,
+							},
+							this.showBackButton === true &&
+								!this.backButtonUrl &&
+								h(
+									'button',
+									{
+										key: 'fad9ae7d30dbe0ace2be5bfd6ac6aab6db872170',
+										class: 'ontario-button ontario-button--tertiary',
+										onClick: (e) => this.handleCustomOnClick(e),
+									},
+									h('ontario-icon-chevron-left', {
+										'key': 'a973d248916df0f152a99156edcf138c472723a4',
+										'colour': 'blue',
+										'aria-hidden': 'true',
+									}),
+									this.translations.stepIndicator.back[`${this.language}`],
+								),
+							this.showBackButton === true &&
+								this.backButtonUrl &&
+								h(
+									'a',
+									{
+										key: '89c024a52d45680eda5417d95944d24466514c09',
+										class: 'ontario-button ontario-button--tertiary',
+										href: this.backButtonUrl,
+									},
+									h('ontario-icon-chevron-left', {
+										'key': '6d0b23249d7b78ec2ba75ec2333bec3710b395d5',
+										'colour': 'blue',
+										'aria-hidden': 'true',
+									}),
+									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: '94e50f45f9acba752c08da71f76148b31d5c7f0f' }),
+					),
+				),
+			);
+		}
+		get host() {
+			return this;
+		}
+		static get style() {
+			return ontarioStepIndicatorCss;
+		}
+	},
+	[
+		257,
+		'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, 'custom-on-click'],
+			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;
+		}
+	});
+}
+defineCustomElement$1();
+
+const OntarioStepIndicator = OntarioStepIndicator$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { OntarioStepIndicator, defineCustomElement };
+//# sourceMappingURL=ontario-step-indicator.js.map
+
+//# sourceMappingURL=ontario-step-indicator.js.map

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

@@ -0,0 +1 @@
+{"file":"ontario-step-indicator.js","mappings":"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","names":["OntarioStepIndicator","__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/ontario-step-indicator/ontario-step-indicator.scss?tag=ontario-step-indicator&encapsulation=shadow","src/components/ontario-step-indicator/ontario-step-indicator.tsx"],"sourcesContent":["@use 'sass:math';\n@use 'pkg:@ongov/ontario-design-system-global-styles/dist/styles/scss/1-variables/global.variables' as globalVariables;\n@use 'pkg:@ongov/ontario-design-system-global-styles/dist/styles/scss/1-variables/spacing.variables' as spacing;\n@use 'pkg:@ongov/ontario-design-system-global-styles/dist/styles/scss/1-variables/breakpoints.variables' as breakpoints;\n@use 'pkg:@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';\nimport { HeaderLanguageToggleEventDetails } from '../../utils/events/common-events.interface';\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/**\n\t * Handles an update to the language should the user request a language update from the language toggle.\n\t * @param {CustomEvent} - The language that has been selected.\n\t */\n\t@Listen('headerLanguageToggled', { target: 'window' })\n\thandleHeaderLanguageToggled(event: CustomEvent<HeaderLanguageToggleEventDetails>) {\n\t\tthis.language = validateLanguage(event.detail.newLanguage);\n\t}\n\n\t@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\" aria-hidden=\"true\"></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\" aria-hidden=\"true\"></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}

package/components/ontario-table.d.ts

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