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

package/dist/types/components/ontario-card/ontario-card-types.d.ts

@@ -1,8 +1,8 @@
-export declare const CardTypes: readonly ['basic', 'image', 'title', 'horizontal'];
-export declare const HeaderTypes: readonly ['default', 'light', 'dark'];
+export declare const Layouts: readonly ['vertical', 'horizontal'];
 export declare const HorizontalImagePositionTypes: readonly ['left', 'right'];
 export declare const HorizontalImageSizeTypes: readonly ['one-fourth', 'one-third'];
-export type CardType = (typeof CardTypes)[number];
-export type HeaderType = (typeof HeaderTypes)[number];
+export type Layout = (typeof Layouts)[number];
 export type HorizontalImagePositionType = (typeof HorizontalImagePositionTypes)[number];
 export type HorizontalImageSizeType = (typeof HorizontalImageSizeTypes)[number];
+export declare const HeaderColours: string[];
+export type HeaderColour = (typeof HeaderColours)[number];

package/dist/types/components/ontario-card/ontario-card.d.ts

@@ -1,4 +1,4 @@
-import { CardType, HeaderType, HorizontalImagePositionType, HorizontalImageSizeType } from './ontario-card-types';
+import { HeaderColour, HorizontalImagePositionType, HorizontalImageSizeType, Layout } from './ontario-card-types';
 export declare class OntarioCard {
 	host: HTMLElement;
 	/**
@@ -32,18 +32,18 @@ export declare class OntarioCard {
 	 */
 	cardLink?: string;
 	/**
-	 * The type of card to render.
+	 * The layout oritnetation of the card.
 	 *
-	 * If no type is passed, it will default to 'basic'.
+	 * If no type is passed, it will default to 'vertical'.
 	 *
 	 */
-	cardType: CardType;
+	layout?: Layout;
 	/**
-	 * The type of header to render.
+	 * Set the card's header colour.
 	 *
-	 * If no type is passed, it will default to 'default'.
+	 * This is optional.
 	 */
-	headerType: HeaderType;
+	headerColour?: HeaderColour;
 	/**
 	 * The position of the image when the card-type is set to 'horizontal'.
 	 *
@@ -87,43 +87,54 @@ export declare class OntarioCard {
 	ariaLabelText?: string;
 	/**
 	 * Mutable variable, for internal use only.
-	 * Set the card's type depending on validation result.
+	 * Set the card's layout depending on validation result.
 	 */
-	private cardTypeState;
+	private layoutState;
 	/**
-	 * Mutable variable, for internal use only.
-	 * Set the card's header type depending on validation result.
+	 * Watch for changes to the `layout` property for validation purposes.
+	 *
+	 * If the user input doesn't match one of the array values then `layout` will be set to its default (`vertical`).
+	 * If a match is found in one of the array values then `layoutState` will be set to the matching array key value.
 	 */
-	private headerTypeState;
+	validateLayout(): void;
 	/**
-	 * Watch for changes to the `cardType` property for validation purposes.
+	 * Watch for changes to the `headerColour` property for validation purposes.
 	 *
-	 * If the user input doesn't match one of the array values then `cardType` will be set to its default (`basic`).
-	 * If a match is found in one of the array values then `cardType` will be set to the matching array key value.
+	 * If the user input doesn't match one of the array values then `headerColour` will be kept empty ('').
+	 * If a match is found in one of the array values then `headerColour` will be set to the matching array key value.
 	 */
-	validateCardType(): void;
+	validateHeaderColour(): void;
 	/**
-	 * Watch for changes to the `headerType` property for validation purposes.
-	 *
-	 * If the user input doesn't match one of the array values then `headerType` will be set to its default (`default`).
-	 * If a match is found in one of the array values then `headerType` will be set to the matching array key value.
+	 * Print the invalid `layout` prop warning message.
+	 */
+	private warnDefaultLayout;
+	/**
+	 * Print the invalid `headerColour` prop warning message.
 	 */
-	validateHeaderType(): void;
+	private warnDefaultHeaderColour;
 	/**
-	 * Print the invalid `cardType` prop warning message.
-	 * @returns default type (basic).
+	 * Returns the top level classes of the card.
+	 *
+	 * @returns {string}
 	 */
-	private warnDefaultCardType;
+	private getCardClasses;
 	/**
-	 * Print the invalid `headerType` prop warning message.
-	 * @returns default type (default).
+	 * Returns the heading classes of the card.
+	 *
+	 * @returns {string}
 	 */
-	private warnDefaultHeaderType;
+	private getCardHeadingClasses;
 	/**
-	 * @returns the classes of the ontario cards based off the `cardType` and `headerType`.
+	 * Returns the url that the card links to.
+	 *
+	 * @returns {string}
 	 */
-	private getClass;
 	private getHref;
+	/**
+	 * Component life cycle hook.
+	 *
+	 * https://stenciljs.com/docs/component-lifecycle#connectedcallback
+	 */
 	componentWillLoad(): void;
 	render(): any;
 }

package/dist/types/components/ontario-search-box/ontario-search-box.d.ts

@@ -0,0 +1,180 @@
+import { EventEmitter } from '../../stencil-public-runtime';
+import { Language } from '../../utils/common/language-types';
+import { Hint } from '../../utils/common/common.interface';
+import {
+	InputFocusBlurEvent,
+	InputInteractionEvent,
+	InputInputEvent,
+} from '../../utils/events/event-handler.interface';
+import { Caption } from '../../utils/common/input-caption/caption.interface';
+export declare class OntarioSearchBox {
+	element: HTMLElement;
+	internals: ElementInternals;
+	/**
+	 * This Ref is used get a direct reference to the hint text element
+	 */
+	private hintTextRef?;
+	/**
+	 * This Ref is used get a direct reference to the search input element
+	 */
+	private inputFieldRef?;
+	/**
+	 * The language of the component.
+	 * This is used for translations. If none is passed, it will default to English.
+	 */
+	language?: Language;
+	/**
+	 * The unique identifier of the search-box component. This is optional - if no ID is passed, one will be generated.
+	 */
+	elementId?: string;
+	/**
+	 * The value of the search term.
+	 * This is optional.
+	 */
+	value?: string;
+	/**
+    * The text to display as the input label
+    *
+    * @example
+    * <ontario-search-box
+    *      caption='{
+                    "captionText": "Search directory",
+                    "captionType": "default"
+                    }'
+                required = "true"
+    >
+    </ontario-search-box>
+    */
+	caption: Caption | string;
+	/**
+	 * 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?: boolean;
+	/**
+	 * 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?: (value?: string) => Promise<void>;
+	/**
+	 * Used to include the ontario-hint-text component for the search-box.
+	 * This is optional.
+	 */
+	hintText?: string | Hint;
+	/**
+	 * Used to add a custom function to the input onInput event.
+	 */
+	customOnInput?: (event: globalThis.Event) => void;
+	/**
+	 * Used to add a custom function to the input onChange event.
+	 */
+	customOnChange?: (event: globalThis.Event) => void;
+	/**
+	 * Used to add a custom function to the input onBlur event.
+	 */
+	customOnBlur?: (event: globalThis.Event) => void;
+	/**
+	 * Used to add a custom function to the input onFocus event.
+	 */
+	customOnFocus?: (event: globalThis.Event) => void;
+	/**
+	 * 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: EventEmitter<string>;
+	/**
+	 * Emitted when a input  occurs when an input has been changed.
+	 */
+	inputOnInput: EventEmitter<InputInputEvent>;
+	/**
+	 * Emitted when a keyboard input or mouse event occurs when an input has been changed.
+	 */
+	inputOnChange: EventEmitter<InputInteractionEvent>;
+	/**
+	 * Emitted when a keyboard input event occurs when an input has lost focus.
+	 */
+	inputOnBlur: EventEmitter<InputFocusBlurEvent>;
+	/**
+	 * Emitted when a keyboard input event occurs when an input has gained focus.
+	 */
+	inputOnFocus: EventEmitter<InputFocusBlurEvent>;
+	/**
+	 * The hint text options are re-assigned to the internalHintText array.
+	 */
+	private internalHintText;
+	/**
+	 * Instantiate an InputCaption object for internal logic use
+	 */
+	private captionState;
+	/**
+	 * Used for the `aria-describedby` value of the dropdown list. This will match with the id of the hint text.
+	 */
+	hintTextId: string | null | undefined;
+	/**
+	 * 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.
+	 */
+	private parseHintText;
+	/**
+	 * 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
+	 */
+	private updateCaptionState;
+	/**
+	 * Watch for changes to the `language` prop to render either the English or French translations
+	 */
+	updateLanguage(): void;
+	/**
+	 * 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.
+	 */
+	componentDidLoad(): Promise<void>;
+	componentWillLoad(): void;
+	/**
+	 * Function to handle input events and the information pertaining to the input to emit.
+	 */
+	private handleEvent;
+	/**
+	 * handleSearch function is called when the search submit button is clicked
+	 */
+	handleSearch(event: MouseEvent): Promise<void>;
+	getId(): string;
+	private getValue;
+	/**
+	 *This function ensures that the focus returns to the search input field when the reset button is clicked.
+	 */
+	private setFocus;
+	/**
+	 * when the reset button is clicked this function gets called
+	 */
+	handleFocus: () => void;
+	render(): any;
+}

package/dist/types/components.d.ts

@@ -16,10 +16,10 @@ import {
 import { BadgeColour } from './components/ontario-badge/ontario-badge.types';
 import { ButtonType, HtmlType } from './components/ontario-button/ontario-button.types';
 import {
-	CardType,
-	HeaderType,
+	HeaderColour,
 	HorizontalImagePositionType,
 	HorizontalImageSizeType,
+	Layout,
 } from './components/ontario-card/ontario-card-types';
 import { CardsPerRow } from './components/ontario-card-collection/ontario-collection-card-types';
 import { Caption } from './utils/common/input-caption/caption.interface';
@@ -68,10 +68,10 @@ export {
 export { BadgeColour } from './components/ontario-badge/ontario-badge.types';
 export { ButtonType, HtmlType } from './components/ontario-button/ontario-button.types';
 export {
-	CardType,
-	HeaderType,
+	HeaderColour,
 	HorizontalImagePositionType,
 	HorizontalImageSizeType,
+	Layout,
 } from './components/ontario-card/ontario-card-types';
 export { CardsPerRow } from './components/ontario-card-collection/ontario-collection-card-types';
 export { Caption } from './utils/common/input-caption/caption.interface';
@@ -248,18 +248,14 @@ export namespace Components {
 		 * Action link for when the card is clicked.  This is optional.
 		 */
 		cardLink?: string;
-		/**
-		 * The type of card to render.  If no type is passed, it will default to 'basic'.
-		 */
-		cardType: CardType;
 		/**
 		 * Text to be displayed within the card description container.  This is optional.
 		 */
 		description?: string;
 		/**
-		 * The type of header to render.  If no type is passed, it will default to 'default'.
+		 * Set the card's header colour.  This is optional.
 		 */
-		headerType: HeaderType;
+		headerColour?: HeaderColour;
 		/**
 		 * The position of the image when the card-type is set to 'horizontal'.  This prop is only necessry when the card-type is set to 'horizontal'.
 		 * @example 	<ontario-card 	card-type="horizontal" 	label="Card Title 1" 	image="https://picsum.photos/200/300" 	horizontal-image-position-type="left" 	horizontal-image-size-type="one-fourth"   description="Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum" > </ontario-card>
@@ -279,6 +275,10 @@ export namespace Components {
 		 * @example <ontario-card 	header-type="dark" 	card-type="horizontal" 	label="Card Title 1" 	description="Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum" >
 		 */
 		label: string;
+		/**
+		 * The layout oritnetation of the card.  If no type is passed, it will default to 'vertical'.
+		 */
+		layout?: Layout;
 	}
 	interface OntarioCardCollection {
 		/**
@@ -1826,6 +1826,54 @@ export namespace Components {
 		 */
 		required?: boolean;
 	}
+	interface OntarioSearchBox {
+		/**
+		 * The text to display as the input label
+		 * @example <ontario-search-box      caption='{ 		"captionText": "Search directory", 		"captionType": "default" 		}' 	required = "true" > </ontario-search-box>
+		 */
+		caption: Caption | string;
+		/**
+		 * Used to add a custom function to the input onBlur event.
+		 */
+		customOnBlur?: (event: globalThis.Event) => void;
+		/**
+		 * Used to add a custom function to the input onChange event.
+		 */
+		customOnChange?: (event: globalThis.Event) => void;
+		/**
+		 * Used to add a custom function to the input onFocus event.
+		 */
+		customOnFocus?: (event: globalThis.Event) => void;
+		/**
+		 * Used to add a custom function to the input onInput event.
+		 */
+		customOnInput?: (event: globalThis.Event) => void;
+		/**
+		 * The unique identifier of the search-box component. This is optional - if no ID is passed, one will be generated.
+		 */
+		elementId?: string;
+		/**
+		 * Used to include the ontario-hint-text component for the search-box. This is optional.
+		 */
+		hintText?: string | Hint;
+		/**
+		 * The language of the component. This is used for translations. If none is passed, it will default to English.
+		 */
+		language?: Language;
+		/**
+		 * 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?: (value?: string) => Promise<void>;
+		/**
+		 * 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?: boolean;
+		/**
+		 * The value of the search term. This is optional.
+		 */
+		value?: string;
+	}
 	interface OntarioStepIndicator {
 		/**
 		 * URL for the back element to set a path for where the link will lead.  If a URL is passed in, the back element will display as an anchor tag. The back element will require either the backButtonURL prop or the customOnClick prop to be passed in order for the back element to display.
@@ -1969,6 +2017,10 @@ export interface OntarioRadioButtonsCustomEvent<T> extends CustomEvent<T> {
 	detail: T;
 	target: HTMLOntarioRadioButtonsElement;
 }
+export interface OntarioSearchBoxCustomEvent<T> extends CustomEvent<T> {
+	detail: T;
+	target: HTMLOntarioSearchBoxElement;
+}
 export interface OntarioTextareaCustomEvent<T> extends CustomEvent<T> {
 	detail: T;
 	target: HTMLOntarioTextareaElement;
@@ -3019,6 +3071,65 @@ declare global {
 		prototype: HTMLOntarioRadioButtonsElement;
 		new (): HTMLOntarioRadioButtonsElement;
 	};
+	interface HTMLOntarioSearchBoxElementEventMap {
+		searchOnSubmit: string;
+		inputOnInput: InputInputEvent;
+		inputOnChange: InputInteractionEvent;
+		inputOnBlur: InputFocusBlurEvent;
+		inputOnFocus: InputFocusBlurEvent;
+	}
+	interface HTMLOntarioSearchBoxElement extends Components.OntarioSearchBox, HTMLStencilElement {
+		addEventListener<K extends keyof HTMLOntarioSearchBoxElementEventMap>(
+			type: K,
+			listener: (
+				this: HTMLOntarioSearchBoxElement,
+				ev: OntarioSearchBoxCustomEvent<HTMLOntarioSearchBoxElementEventMap[K]>,
+			) => any,
+			options?: boolean | AddEventListenerOptions,
+		): void;
+		addEventListener<K extends keyof DocumentEventMap>(
+			type: K,
+			listener: (this: Document, ev: DocumentEventMap[K]) => any,
+			options?: boolean | AddEventListenerOptions,
+		): void;
+		addEventListener<K extends keyof HTMLElementEventMap>(
+			type: K,
+			listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any,
+			options?: boolean | AddEventListenerOptions,
+		): void;
+		addEventListener(
+			type: string,
+			listener: EventListenerOrEventListenerObject,
+			options?: boolean | AddEventListenerOptions,
+		): void;
+		removeEventListener<K extends keyof HTMLOntarioSearchBoxElementEventMap>(
+			type: K,
+			listener: (
+				this: HTMLOntarioSearchBoxElement,
+				ev: OntarioSearchBoxCustomEvent<HTMLOntarioSearchBoxElementEventMap[K]>,
+			) => any,
+			options?: boolean | EventListenerOptions,
+		): void;
+		removeEventListener<K extends keyof DocumentEventMap>(
+			type: K,
+			listener: (this: Document, ev: DocumentEventMap[K]) => any,
+			options?: boolean | EventListenerOptions,
+		): void;
+		removeEventListener<K extends keyof HTMLElementEventMap>(
+			type: K,
+			listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any,
+			options?: boolean | EventListenerOptions,
+		): void;
+		removeEventListener(
+			type: string,
+			listener: EventListenerOrEventListenerObject,
+			options?: boolean | EventListenerOptions,
+		): void;
+	}
+	var HTMLOntarioSearchBoxElement: {
+		prototype: HTMLOntarioSearchBoxElement;
+		new (): HTMLOntarioSearchBoxElement;
+	};
 	interface HTMLOntarioStepIndicatorElement extends Components.OntarioStepIndicator, HTMLStencilElement {}
 	var HTMLOntarioStepIndicatorElement: {
 		prototype: HTMLOntarioStepIndicatorElement;
@@ -3224,6 +3335,7 @@ declare global {
 		'ontario-loading-indicator': HTMLOntarioLoadingIndicatorElement;
 		'ontario-page-alert': HTMLOntarioPageAlertElement;
 		'ontario-radio-buttons': HTMLOntarioRadioButtonsElement;
+		'ontario-search-box': HTMLOntarioSearchBoxElement;
 		'ontario-step-indicator': HTMLOntarioStepIndicatorElement;
 		'ontario-table': HTMLOntarioTableElement;
 		'ontario-textarea': HTMLOntarioTextareaElement;
@@ -3368,18 +3480,14 @@ declare namespace LocalJSX {
 		 * Action link for when the card is clicked.  This is optional.
 		 */
 		cardLink?: string;
-		/**
-		 * The type of card to render.  If no type is passed, it will default to 'basic'.
-		 */
-		cardType?: CardType;
 		/**
 		 * Text to be displayed within the card description container.  This is optional.
 		 */
 		description?: string;
 		/**
-		 * The type of header to render.  If no type is passed, it will default to 'default'.
+		 * Set the card's header colour.  This is optional.
 		 */
-		headerType?: HeaderType;
+		headerColour?: HeaderColour;
 		/**
 		 * The position of the image when the card-type is set to 'horizontal'.  This prop is only necessry when the card-type is set to 'horizontal'.
 		 * @example 	<ontario-card 	card-type="horizontal" 	label="Card Title 1" 	image="https://picsum.photos/200/300" 	horizontal-image-position-type="left" 	horizontal-image-size-type="one-fourth"   description="Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum" > </ontario-card>
@@ -3399,6 +3507,10 @@ declare namespace LocalJSX {
 		 * @example <ontario-card 	header-type="dark" 	card-type="horizontal" 	label="Card Title 1" 	description="Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum" >
 		 */
 		label?: string;
+		/**
+		 * The layout oritnetation of the card.  If no type is passed, it will default to 'vertical'.
+		 */
+		layout?: Layout;
 	}
 	interface OntarioCardCollection {
 		/**
@@ -5051,6 +5163,75 @@ declare namespace LocalJSX {
 		 */
 		required?: boolean;
 	}
+	interface OntarioSearchBox {
+		/**
+		 * The text to display as the input label
+		 * @example <ontario-search-box      caption='{ 		"captionText": "Search directory", 		"captionType": "default" 		}' 	required = "true" > </ontario-search-box>
+		 */
+		caption?: Caption | string;
+		/**
+		 * Used to add a custom function to the input onBlur event.
+		 */
+		customOnBlur?: (event: globalThis.Event) => void;
+		/**
+		 * Used to add a custom function to the input onChange event.
+		 */
+		customOnChange?: (event: globalThis.Event) => void;
+		/**
+		 * Used to add a custom function to the input onFocus event.
+		 */
+		customOnFocus?: (event: globalThis.Event) => void;
+		/**
+		 * Used to add a custom function to the input onInput event.
+		 */
+		customOnInput?: (event: globalThis.Event) => void;
+		/**
+		 * The unique identifier of the search-box component. This is optional - if no ID is passed, one will be generated.
+		 */
+		elementId?: string;
+		/**
+		 * Used to include the ontario-hint-text component for the search-box. This is optional.
+		 */
+		hintText?: string | Hint;
+		/**
+		 * The language of the component. This is used for translations. If none is passed, it will default to English.
+		 */
+		language?: Language;
+		/**
+		 * Emitted when a keyboard input event occurs when an input has lost focus.
+		 */
+		onInputOnBlur?: (event: OntarioSearchBoxCustomEvent<InputFocusBlurEvent>) => void;
+		/**
+		 * Emitted when a keyboard input or mouse event occurs when an input has been changed.
+		 */
+		onInputOnChange?: (event: OntarioSearchBoxCustomEvent<InputInteractionEvent>) => void;
+		/**
+		 * Emitted when a keyboard input event occurs when an input has gained focus.
+		 */
+		onInputOnFocus?: (event: OntarioSearchBoxCustomEvent<InputFocusBlurEvent>) => void;
+		/**
+		 * Emitted when a input  occurs when an input has been changed.
+		 */
+		onInputOnInput?: (event: OntarioSearchBoxCustomEvent<InputInputEvent>) => void;
+		/**
+		 * 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>
+		 */
+		onSearchOnSubmit?: (event: OntarioSearchBoxCustomEvent<string>) => void;
+		/**
+		 * 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?: (value?: string) => Promise<void>;
+		/**
+		 * 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?: boolean;
+		/**
+		 * The value of the search term. This is optional.
+		 */
+		value?: string;
+	}
 	interface OntarioStepIndicator {
 		/**
 		 * URL for the back element to set a path for where the link will lead.  If a URL is passed in, the back element will display as an anchor tag. The back element will require either the backButtonURL prop or the customOnClick prop to be passed in order for the back element to display.
@@ -5321,6 +5502,7 @@ declare namespace LocalJSX {
 		'ontario-loading-indicator': OntarioLoadingIndicator;
 		'ontario-page-alert': OntarioPageAlert;
 		'ontario-radio-buttons': OntarioRadioButtons;
+		'ontario-search-box': OntarioSearchBox;
 		'ontario-step-indicator': OntarioStepIndicator;
 		'ontario-table': OntarioTable;
 		'ontario-textarea': OntarioTextarea;
@@ -5525,6 +5707,7 @@ declare module '@stencil/core' {
 				JSXBase.HTMLAttributes<HTMLOntarioLoadingIndicatorElement>;
 			'ontario-page-alert': LocalJSX.OntarioPageAlert & JSXBase.HTMLAttributes<HTMLOntarioPageAlertElement>;
 			'ontario-radio-buttons': LocalJSX.OntarioRadioButtons & JSXBase.HTMLAttributes<HTMLOntarioRadioButtonsElement>;
+			'ontario-search-box': LocalJSX.OntarioSearchBox & JSXBase.HTMLAttributes<HTMLOntarioSearchBoxElement>;
 			'ontario-step-indicator': LocalJSX.OntarioStepIndicator & JSXBase.HTMLAttributes<HTMLOntarioStepIndicatorElement>;
 			'ontario-table': LocalJSX.OntarioTable & JSXBase.HTMLAttributes<HTMLOntarioTableElement>;
 			'ontario-textarea': LocalJSX.OntarioTextarea & JSXBase.HTMLAttributes<HTMLOntarioTextareaElement>;

package/dist/types/utils/common/input/input.d.ts

@@ -17,6 +17,7 @@ export type InputProps = {
 	onChange?: ((event: Event) => void) | undefined;
 	onBlur?: ((event: Event) => void) | undefined;
 	onFocus?: ((event: Event) => void) | undefined;
-	ref?: (el: any) => HTMLElement;
+	onClick?: ((event: Event) => void) | undefined;
+	ref?: (el: HTMLInputElement) => HTMLElement;
 };
 export declare const Input: FunctionalComponent<InputProps>;

package/dist/types/utils/common/input-caption/input-caption.d.ts

@@ -40,9 +40,15 @@ export declare class InputCaption implements CaptionInfo {
 	/**
 	 * Return the `<label>` element for text inputs
 	 * @param captionFor Set the `htmlFor` attribute
+	 * @param hasHintExpander Indicate whether the component the label is for has a hint expander or not
+	 * @param disableRequiredFlag Disable the required/optional label text _(only use in highly special cases)_
 	 * @returns element containing the caption for the input
 	 */
-	getCaption: (captionFor?: string | undefined, hasHintExpander?: boolean) => HTMLElement;
+	getCaption: (
+		captionFor?: string | undefined,
+		hasHintExpander?: boolean,
+		disableRequiredFlag?: boolean,
+	) => HTMLElement;
 	getHintExpanderAccessibilityText(captionText: string, hasHintExpanderOnOption?: boolean): HTMLElement;
 	/**
 	 * Determines which flag text to use between `required` and `optional`

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@ongov/ontario-design-system-component-library",
-	"version": "4.3.1-alpha.1",
+	"version": "5.0.0-alpha.1",
 	"private": false,
 	"description": "Ontario Design System Component Library",
 	"license": "Apache-2.0",
@@ -102,5 +102,5 @@
 	"collection:main": "dist/collection/index.js",
 	"es2015": "dist/esm/index.mjs",
 	"es2017": "dist/esm/index.mjs",
-	"gitHead": "ab7fc8a847e4155ec0ad01347484aaed6dc2d981"
+	"gitHead": "2941db5cb66d3a161e359f36543b489922853b02"
 }