@ongov/ontario-design-system-component-library 5.0.0-alpha.5 → 5.0.0-alpha.6

package/dist/collection/components/ontario-search-box/ontario-search-box.css

@@ -28,15 +28,35 @@
 /* icon colours */
 /* service ontario header colours */
 /*** 1 - Breakpoint sizes for media queries ***/ /* -------------------------------
-    Global font-weight variables
+    Global font variables
 --------------------------------- */
 /* -------------------------------
-    Global letter-spacing variables
+    Global line-height variables
+--------------------------------- */
+/* -------------------------------
+    Global font-weight variables
 --------------------------------- */
 /* Rem calc function */
 /* Pixel to REM Conversion */
 /* -------------------------------
-    Global line-height variables
+    Focus placeholder variables
+--------------------------------- */
+/* -------------------------------
+    Focus placeholder
+--------------------------------- */
+.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;
+}
+
+/* -------------------------------
+    Global font-size variables
+--------------------------------- */
+/* -------------------------------
+    Global letter-spacing variables
 --------------------------------- */
 /* -------------------------------
     Global typography variables
@@ -183,23 +203,6 @@ h6,
 	}
 }
 
-/* -------------------------------
-    Focus placeholder variables
---------------------------------- */
-/* -------------------------------
-    Focus placeholder
---------------------------------- */
-.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;
-}
-
-/* -------------------------------
-    Global font-size variables
---------------------------------- */
 /*
 *  Global elements
 *

package/dist/collection/components/ontario-search-box/ontario-search-box.js

@@ -7,28 +7,134 @@ import { InputCaption } from '../../utils/common/input-caption/input-caption';
 import { default as translations } from '../../translations/global.i18n.json';
 import { constructHintTextObject } from '../../utils/components/hints/hints';
 export class OntarioSearchBox {
-	constructor() {
-		/**
-		 * when the reset button is clicked this function gets called
-		 */
-		this.handleFocus = () => {
-			this.setFocus(this.inputFieldRef);
-		};
-		this.language = 'en';
-		this.elementId = undefined;
-		this.value = undefined;
-		this.caption = undefined;
-		this.required = false;
-		this.performSearch = undefined;
-		this.hintText = undefined;
-		this.customOnInput = undefined;
-		this.customOnChange = undefined;
-		this.customOnBlur = undefined;
-		this.customOnFocus = undefined;
-		this.internalHintText = undefined;
-		this.captionState = undefined;
-		this.hintTextId = undefined;
-	}
+	element;
+	internals;
+	/**
+	 * This Ref is used get a direct reference to the hint text element
+	 */
+	hintTextRef;
+	/**
+	 * This Ref is used get a direct reference to the search input element
+	 */
+	inputFieldRef;
+	/**
+	 * The language of the component.
+	 * This is used for translations. If none is passed, it will default to English.
+	 */
+	language = 'en';
+	/**
+	 * The unique identifier of the search-box component. This is optional - if no ID is passed, one will be generated.
+	 */
+	elementId;
+	/**
+	 * The value of the search term.
+	 * This is optional.
+	 */
+	value;
+	/**
+    * The text to display as the input label
+    *
+    * @example
+    * <ontario-search-box
+    *      caption='{
+                    "captionText": "Search directory",
+                    "captionType": "default"
+                    }'
+                required = "true"
+    >
+    </ontario-search-box>
+    */
+	caption;
+	/**
+	 * 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).
+	 */
+	required = false;
+	/**
+	 * This Function to perform a search operation.
+	 * This function will be called when the search submit button is triggered.
+	 * The value argument is used for as search term to use for the search operation. This parameter is optional.
+	 * The performSearch prop can be set dynamically using JavaScript, allowing you to define custom search functionality when the search form is submitted.
+	 *
+	 * @example
+	 * <ontario-search-box
+	 *	  id="ontario-search-box"
+	 *	  caption='Search directory'
+	 * ></ontario-search-box>
+	 *
+	 * <script>
+	 *	window.addEventListener('load', () => {
+	 *		const searchBox = document.getElementById('ontario-search-box');
+	 *		searchBox.performSearch = async (value) => {
+	 * 			console.log('Performing search with value:', value);
+	 *		};
+	 *	});
+	 * </script>
+	 */
+	performSearch;
+	/**
+	 * Used to include the ontario-hint-text component for the search-box.
+	 * This is optional.
+	 */
+	hintText;
+	/**
+	 * Used to add a custom function to the input onInput event.
+	 */
+	customOnInput;
+	/**
+	 * Used to add a custom function to the input onChange event.
+	 */
+	customOnChange;
+	/**
+	 * Used to add a custom function to the input onBlur event.
+	 */
+	customOnBlur;
+	/**
+	 * Used to add a custom function to the input onFocus event.
+	 */
+	customOnFocus;
+	/**
+	 * Emitted when the search is submitted.
+	 * Below is an example on how to hook into the event to get the event details.
+	 *
+	 * @example
+	 *	<script>
+	 *		document.getElementById('ontario-search-box').addEventListener('searchOnSubmit', (event) => {
+	 *	 		const searchValue = event.detail;
+	 *			console.log('Search submitted with value:', searchValue);
+	 *	  };
+	 * 	</script>
+	 */
+	searchOnSubmit;
+	/**
+	 * Emitted when a input  occurs when an input has been changed.
+	 */
+	inputOnInput;
+	/**
+	 * Emitted when a keyboard input or mouse event occurs when an input has been changed.
+	 */
+	inputOnChange;
+	/**
+	 * Emitted when a keyboard input event occurs when an input has lost focus.
+	 */
+	inputOnBlur;
+	/**
+	 * Emitted when a keyboard input event occurs when an input has gained focus.
+	 */
+	inputOnFocus;
+	/**
+	 * The hint text options are re-assigned to the internalHintText array.
+	 */
+	internalHintText;
+	/**
+	 * Instantiate an InputCaption object for internal logic use
+	 */
+	captionState;
+	/**
+	 * Used for the `aria-describedby` value of the dropdown list. This will match with the id of the hint text.
+	 */
+	hintTextId;
 	/**
 	 * Watch for changes to the `hintText` prop.
 	 *
@@ -66,8 +172,7 @@ export class OntarioSearchBox {
 	 * 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());
+		this.hintTextId = await this.hintTextRef?.getHintTextId();
 	}
 	componentWillLoad() {
 		this.elementId = this.elementId;
@@ -78,13 +183,10 @@ export class OntarioSearchBox {
 	 * Function to handle input events and the information pertaining to the input to emit.
 	 */
 	handleEvent(event, eventType) {
-		var _a, _b, _c;
 		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;
-		(_b = (_a = this.internals) === null || _a === void 0 ? void 0 : _a.setFormValue) === null || _b === void 0
-			? void 0
-			: _b.call(_a, (_c = this.value) !== null && _c !== void 0 ? _c : '');
+		this.value = input?.value;
+		this.internals?.setFormValue?.(this.value ?? '');
 		handleInputEvent(
 			event,
 			eventType,
@@ -110,12 +212,10 @@ export class OntarioSearchBox {
 		this.performSearch && (await this.performSearch(this.value));
 	}
 	getId() {
-		var _a;
-		return (_a = this.elementId) !== null && _a !== void 0 ? _a : '';
+		return this.elementId ?? '';
 	}
 	getValue() {
-		var _a;
-		return (_a = this.value) !== null && _a !== void 0 ? _a : '';
+		return this.value ?? '';
 	}
 	/**
 	 *This function ensures that the focus returns to the search input field when the reset button is clicked.
@@ -125,12 +225,18 @@ export class OntarioSearchBox {
 			inputRef.focus();
 		}
 	}
+	/**
+	 * when the reset button is clicked this function gets called
+	 */
+	handleFocus = () => {
+		this.setFocus(this.inputFieldRef);
+	};
 	render() {
 		const searchInputFieldId = 'ontario-search-input-field';
 		return h(
 			'form',
 			{
-				key: 'd38c48ed5a4e2301afa130f1557ea721ac9b7909',
+				key: '8a8bfd7fdd089c43a11287e0115d3bf2b5a3bd21',
 				name: 'searchForm',
 				id: 'ontario-search-form-container',
 				class:
@@ -140,15 +246,16 @@ export class OntarioSearchBox {
 			this.captionState.getCaption(searchInputFieldId, false, true) /* Note the _required_ text is disabled */,
 			this.internalHintText &&
 				h('ontario-hint-text', {
+					key: 'e98d90f117beefbe3378190ea46779204d20749f',
 					hint: this.internalHintText.hint,
 					hintContentType: this.internalHintText.hintContentType,
 					ref: (el) => (this.hintTextRef = el),
 				}),
 			h(
 				'div',
-				{ key: '2d495d8e26c97c92ffdf8e3e7f0828224d74825c', class: 'ontario-search__input-container' },
+				{ key: '8af1a575ea9b9c50515f1852118e1e93094410de', class: 'ontario-search__input-container' },
 				h(Input, {
-					'key': '38f2cdf8f04aa749958c619174ca40ee32b1d2f4',
+					'key': '2bfb969811790843eee9d5b2e0299e54f138eb51',
 					'aria-describedBy': this.hintTextId,
 					'type': 'search',
 					'name': 'search',
@@ -165,7 +272,7 @@ export class OntarioSearchBox {
 					'value': this.getValue(),
 				}),
 				h(Input, {
-					key: '20395baddaa5943e9f300eee043b97994e63c0af',
+					key: '95bad003daf908fe81f4076f7f070ccd7acabb9c',
 					className: 'ontario-search__reset',
 					id: 'ontario-search-reset',
 					type: 'reset',
@@ -175,13 +282,13 @@ export class OntarioSearchBox {
 				h(
 					'button',
 					{
-						key: '89fe9b0762da6f292348b8a4e895bc9637d7253c',
+						key: '226cb3d74887d03690e3f42b461136f5921cf5cf',
 						class: 'ontario-search__submit',
 						type: 'submit',
 						id: 'ontario-search-box__submit',
 						onClick: (e) => this.handleSearch(e),
 					},
-					h('span', { key: '1091746da37710e5addeeb77780ad92aac33950f', innerHTML: OntarioIconSearch }),
+					h('span', { key: '8bd9fc49df75ba6b6bd15eac19c77d2f6c01c747', innerHTML: OntarioIconSearch }),
 				),
 			),
 		);
@@ -224,6 +331,8 @@ export class OntarioSearchBox {
 					tags: [],
 					text: 'The language of the component.\nThis is used for translations. If none is passed, it will default to English.',
 				},
+				getter: false,
+				setter: false,
 				attribute: 'language',
 				reflect: false,
 				defaultValue: "'en'",
@@ -242,6 +351,8 @@ export class OntarioSearchBox {
 					tags: [],
 					text: 'The unique identifier of the search-box component. This is optional - if no ID is passed, one will be generated.',
 				},
+				getter: false,
+				setter: false,
 				attribute: 'element-id',
 				reflect: false,
 			},
@@ -259,6 +370,8 @@ export class OntarioSearchBox {
 					tags: [],
 					text: 'The value of the search term.\nThis is optional.',
 				},
+				getter: false,
+				setter: false,
 				attribute: 'value',
 				reflect: false,
 			},
@@ -287,6 +400,8 @@ export class OntarioSearchBox {
 					],
 					text: 'The text to display as the input label',
 				},
+				getter: false,
+				setter: false,
 				attribute: 'caption',
 				reflect: false,
 			},
@@ -304,6 +419,8 @@ export class OntarioSearchBox {
 					tags: [],
 					text: 'This is used to determine whether the dropdown list is required or not.\nThis prop gets passed to the InputCaption utility to display either an optional or required flag in the label.\nIf no prop is set, it will default to false (optional).',
 				},
+				getter: false,
+				setter: false,
 				attribute: 'required',
 				reflect: false,
 				defaultValue: 'false',
@@ -332,6 +449,8 @@ export class OntarioSearchBox {
 					],
 					text: 'This Function to perform a search operation.\nThis function will be called when the search submit button is triggered.\nThe value argument is used for as search term to use for the search operation. This parameter is optional.\nThe performSearch prop can be set dynamically using JavaScript, allowing you to define custom search functionality when the search form is submitted.',
 				},
+				getter: false,
+				setter: false,
 			},
 			hintText: {
 				type: 'string',
@@ -353,6 +472,8 @@ export class OntarioSearchBox {
 					tags: [],
 					text: 'Used to include the ontario-hint-text component for the search-box.\nThis is optional.',
 				},
+				getter: false,
+				setter: false,
 				attribute: 'hint-text',
 				reflect: false,
 			},
@@ -375,6 +496,8 @@ export class OntarioSearchBox {
 					tags: [],
 					text: 'Used to add a custom function to the input onInput event.',
 				},
+				getter: false,
+				setter: false,
 			},
 			customOnChange: {
 				type: 'unknown',
@@ -395,6 +518,8 @@ export class OntarioSearchBox {
 					tags: [],
 					text: 'Used to add a custom function to the input onChange event.',
 				},
+				getter: false,
+				setter: false,
 			},
 			customOnBlur: {
 				type: 'unknown',
@@ -415,6 +540,8 @@ export class OntarioSearchBox {
 					tags: [],
 					text: 'Used to add a custom function to the input onBlur event.',
 				},
+				getter: false,
+				setter: false,
 			},
 			customOnFocus: {
 				type: 'unknown',
@@ -435,6 +562,8 @@ export class OntarioSearchBox {
 					tags: [],
 					text: 'Used to add a custom function to the input onFocus event.',
 				},
+				getter: false,
+				setter: false,
 			},
 		};
 	}

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

@@ -1 +1 @@
-{"version":3,"file":"ontario-search-box.js","sourceRoot":"","sources":["../../../src/components/ontario-search-box/ontario-search-box.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Prop, h, Element, EventEmitter, Event, AttachInternals, State, Watch } from '@stencil/core';\nimport { Input } from '../../utils/common/input/input';\nimport { Language } from '../../utils/common/language-types';\nimport OntarioIconSearch from '../ontario-icon/assets/ontario-icon-search.svg';\nimport { Hint } from '../../utils/common/common.interface';\nimport { handleInputEvent } from '../../utils/events/event-handler';\nimport {\n\tInputFocusBlurEvent,\n\tEventType,\n\tInputInteractionEvent,\n\tInputInputEvent,\n} from '../../utils/events/event-handler.interface';\nimport { Caption } from '../../utils/common/input-caption/caption.interface';\nimport { InputCaption } from '../../utils/common/input-caption/input-caption';\nimport { default as translations } from '../../translations/global.i18n.json';\nimport { constructHintTextObject } from '../../utils/components/hints/hints';\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\t\"captionText\": \"Search directory\",\n\t\t\t\t\t\"captionType\": \"default\"\n\t\t\t\t\t}'\n\t\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/**\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\ttranslations,\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\tthis.internals?.setFormValue?.(this.value ?? '');\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 (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 innerHTML={OntarioIconSearch} />\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,"file":"ontario-search-box.js","sourceRoot":"","sources":["../../../src/components/ontario-search-box/ontario-search-box.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Prop, h, Element, EventEmitter, Event, AttachInternals, State, Watch } from '@stencil/core';\nimport { Input } from '../../utils/common/input/input';\nimport { Language } from '../../utils/common/language-types';\nimport OntarioIconSearch from '../ontario-icon/assets/ontario-icon-search.svg';\nimport { Hint } from '../../utils/common/common.interface';\nimport { handleInputEvent } from '../../utils/events/event-handler';\nimport {\n\tInputFocusBlurEvent,\n\tEventType,\n\tInputInteractionEvent,\n\tInputInputEvent,\n} from '../../utils/events/event-handler.interface';\nimport { Caption } from '../../utils/common/input-caption/caption.interface';\nimport { InputCaption } from '../../utils/common/input-caption/input-caption';\nimport { default as translations } from '../../translations/global.i18n.json';\nimport { constructHintTextObject } from '../../utils/components/hints/hints';\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\t\"captionText\": \"Search directory\",\n\t\t\t\t\t\"captionType\": \"default\"\n\t\t\t\t\t}'\n\t\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/**\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\ttranslations,\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\tthis.internals?.setFormValue?.(this.value ?? '');\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 (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 innerHTML={OntarioIconSearch} />\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"]}

package/dist/collection/components/ontario-step-indicator/ontario-step-indicator.css

@@ -34,6 +34,9 @@
 /* -------------------------------
     Global font-size variables
 --------------------------------- */
+/* -------------------------------
+    Global font variables
+--------------------------------- */
 /* -------------------------------
     Global letter-spacing variables
 --------------------------------- */
@@ -463,12 +466,16 @@ p + ol {
 .ontario-button--primary:focus {
 	background-color: #00478f;
 	color: #ffffff;
-	transition: background-color 0.2s ease-out, box-shadow 0.1s ease-in-out;
+	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;
+	transition:
+		background-color 0s,
+		box-shadow 0.1s ease-in-out;
 }
 .ontario-button--primary:visited {
 	color: #ffffff;
@@ -490,13 +497,17 @@ p + ol {
 	background-color: #e0f0ff;
 	border-color: #00478f;
 	color: #00478f;
-	transition: background-color 0.2s ease-out, box-shadow 0.1s ease-in-out;
+	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;
+	transition:
+		background-color 0s,
+		box-shadow 0.1s ease-in-out;
 }
 .ontario-button--secondary:visited {
 	color: #0066cc;
@@ -516,13 +527,17 @@ p + ol {
 	background-color: #e8e8e8;
 	color: #00478f;
 	text-decoration: underline;
-	transition: background-color 0.2s ease-out, box-shadow 0.1s ease-in-out;
+	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;
+	transition:
+		background-color 0s,
+		box-shadow 0.1s ease-in-out;
 }
 .ontario-button--tertiary:visited {
 	color: #0066cc;
@@ -538,11 +553,15 @@ p + ol {
 }
 .ontario-button--internalThemeDark:focus {
 	background-color: #4d4d4d;
-	transition: background-color 0.2s ease-out, box-shadow 0.1s ease-in-out;
+	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;
+	transition:
+		background-color 0s,
+		box-shadow 0.1s ease-in-out;
 }
 .ontario-button--internalThemeDark:visited {
 	color: #0066cc;