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

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

@@ -27,7 +27,8 @@
 /* callout backgrounds */
 /* icon colours */
 /* service ontario header colours */
-/*** 1 - Breakpoint sizes for media queries ***/ /* -------------------------------
+/*** 1 - Breakpoint sizes for media queries ***/
+/* -------------------------------
     Global font variables
 --------------------------------- */
 /* -------------------------------
@@ -224,7 +225,7 @@ body {
 	font-size: 1rem;
 	line-height: 1.6;
 	background-color: #ffffff;
-	color: #1a1a1a;
+	color: rgb(25.5, 25.5, 25.5);
 	margin: 0;
 }
 
@@ -269,7 +270,7 @@ hr {
 
 /* Horizontal Rule */
 hr.ontario-hr--dark {
-	border-bottom: 4px solid #1a1a1a;
+	border-bottom: 4px solid rgb(25.5, 25.5, 25.5);
 }
 
 a {
@@ -436,16 +437,123 @@ p + ol {
 		margin: 0.5rem 0 0.5rem 2.75rem;
 	}
 }
-.ontario-form-group:last-of-type {
-	margin-bottom: 2.5rem;
+/*
+* Visibility
+*
+* Helper classes to determine visibility of elements
+*/
+.ontario-hide {
+	display: none !important;
 }
 
-.ontario-form-group:last-of-type {
-	margin-bottom: 3rem;
+.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: #1a1a1a;
+	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;
@@ -496,21 +604,9 @@ p + ol {
 	content: ' ';
 }
 
-.ontario-label__flag {
-	font-family: 'Open Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
-	font-size: 1rem;
-	font-weight: 400;
-}
-.ontario-label__flag:before {
-	content: ' ';
-}
-
-/*
-*  Labels
-*/
 .ontario-label {
 	cursor: pointer;
-	color: #1a1a1a;
+	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;
@@ -555,19 +651,16 @@ h1 > .ontario-label--heading {
 	content: ' ';
 }
 
-/*
-*  Text Inputs
-*/
 .ontario-input {
-	border: 2px solid #1a1a1a;
+	border: 2px solid rgb(25.5, 25.5, 25.5);
 	border-radius: 4px;
 	box-sizing: border-box;
-	color: #1a1a1a;
+	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 0 2.5rem;
+	margin: 0;
 	max-width: 48rem;
 	width: 100%;
 	padding: 0.625rem 1rem;
@@ -601,125 +694,6 @@ h1 > .ontario-label--heading {
 	max-width: 41ex;
 }
 
-.ontario-form-group:last-of-type {
-	margin-bottom: 2.5rem;
-}
-
-/*
-* Visibility
-*
-* Helper classes to determine visibility of elements
-*/
-.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-search__container {
 	max-width: 34rem;
 	margin-bottom: 2.5rem;
@@ -730,7 +704,7 @@ h1 > .ontario-label--heading {
 }
 
 .ontario-search__input.ontario-input {
-	border: 2px solid #1a1a1a;
+	border: 2px solid rgb(25.5, 25.5, 25.5);
 	margin-bottom: 0;
 	height: 3rem;
 	padding-left: 0.75rem;
@@ -748,7 +722,7 @@ input[type='reset'].ontario-search__reset {
 	right: 6rem;
 	height: 1.5rem;
 	width: 1.5rem;
-	color: #1a1a1a;
+	color: rgb(25.5, 25.5, 25.5);
 	margin: 0;
 	padding: 0.25rem;
 	background-size: 1.5rem;
@@ -773,7 +747,7 @@ input[type='reset'].ontario-search__reset:focus {
 	border: 0;
 	border-radius: 0 3px 3px 0;
 	background-color: #0066cc;
-	color: #1a1a1a;
+	color: rgb(25.5, 25.5, 25.5);
 	display: flex;
 	justify-content: center;
 	align-items: center;

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

@@ -6,7 +6,7 @@ import { isClientSideRendering } from '../../utils/common/environment';
 import { constructHintTextObject } from '../../utils/components/hints/hints';
 import { handleInputEvent } from '../../utils/events/event-handler';
 import { EventType } from '../../utils/events/event-handler.interface';
-import { default as translations } from '../../translations/global.i18n.json';
+import translations from '../../translations/global.i18n.json';
 export class OntarioSearchBox {
 	constructor() {
 		/**
@@ -20,6 +20,7 @@ export class OntarioSearchBox {
 		 * 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
 		 */
@@ -48,7 +49,7 @@ export class OntarioSearchBox {
 		this.captionState = new InputCaption(
 			this.element.tagName,
 			newValue,
-			translations,
+			this.translations,
 			this.language,
 			false,
 			this.required,
@@ -130,7 +131,7 @@ export class OntarioSearchBox {
 		return h(
 			'form',
 			{
-				key: '8dc7723f528267d70de2d021fa53afb8d3061459',
+				key: '49a214acee31f5fc0694e79c74791a64973d55d2',
 				name: 'searchForm',
 				id: 'ontario-search-form-container',
 				class:
@@ -140,16 +141,16 @@ export class OntarioSearchBox {
 			this.captionState.getCaption(searchInputFieldId, false, true) /* Note the _required_ text is disabled */,
 			this.internalHintText &&
 				h('ontario-hint-text', {
-					key: '7a0a3a2c04dbb5d4c41d0364e8bcf5aeb7d63eb1',
+					key: '34fe58434b6bbb73543eb03bfdce28a230d48c9c',
 					hint: this.internalHintText.hint,
 					hintContentType: this.internalHintText.hintContentType,
 					ref: (el) => (this.hintTextRef = el),
 				}),
 			h(
 				'div',
-				{ key: '8585afb19fa677f34f28ffeac4f792e468569dfc', class: 'ontario-search__input-container' },
+				{ key: '5e06eb8f6fbab511ff8720a7edde5b086494d403', class: 'ontario-search__input-container' },
 				h(Input, {
-					'key': 'f02005493b2cb6685342c2c925bee6fd245a0698',
+					'key': '91d020dee70f193697cb01be44662c3c81389573',
 					'aria-describedBy': this.hintTextId,
 					'type': 'search',
 					'name': 'search',
@@ -166,7 +167,7 @@ export class OntarioSearchBox {
 					'value': this.getValue(),
 				}),
 				h(Input, {
-					key: 'af85d91d47dcd0c0114c7f3128abdc530fe5f3ee',
+					key: 'b9e105d849049dc1826e74abfa65f42a991755dd',
 					className: 'ontario-search__reset',
 					id: 'ontario-search-reset',
 					type: 'reset',
@@ -176,13 +177,22 @@ export class OntarioSearchBox {
 				h(
 					'button',
 					{
-						key: '19b4fa58141c21acec066e588c95e4e4779b7ccf',
+						key: 'ef2847a7baac7da11a76cc98ba565e14c7d67026',
 						class: 'ontario-search__submit',
 						type: 'submit',
 						id: 'ontario-search-box__submit',
 						onClick: (e) => this.handleSearch(e),
 					},
-					h('span', { key: '1c37309ba2e946ebfa867974ec4e6f768dc317ec', innerHTML: OntarioIconSearch }),
+					h(
+						'span',
+						{ key: 'a2cc490a3921d811e385d361bb3acfe6d98f0824', class: 'ontario-show-for-sr' },
+						this.translations.header.submit[`${this.language}`],
+					),
+					h('span', {
+						'key': 'ad664fcbcf6667c9e37c12be0f245a7413b54e1b',
+						'innerHTML': OntarioIconSearch,
+						'aria-hidden': 'true',
+					}),
 				),
 			),
 		);
@@ -471,6 +481,7 @@ export class OntarioSearchBox {
 			internalHintText: {},
 			captionState: {},
 			hintTextId: {},
+			translations: {},
 		};
 	}
 	static get events() {

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 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 { default as 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/**\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\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 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 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"]}

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

@@ -202,7 +202,7 @@ body {
 	font-size: 1rem;
 	line-height: 1.6;
 	background-color: #ffffff;
-	color: #1a1a1a;
+	color: rgb(25.5, 25.5, 25.5);
 	margin: 0;
 }
 
@@ -247,7 +247,7 @@ hr {
 
 /* Horizontal Rule */
 hr.ontario-hr--dark {
-	border-bottom: 4px solid #1a1a1a;
+	border-bottom: 4px solid rgb(25.5, 25.5, 25.5);
 }
 
 a {
@@ -427,6 +427,10 @@ p + ol {
 	transition: box-shadow 0.1s ease-in-out;
 }
 
+:host {
+	display: inline-block;
+}
+
 .ontario-button {
 	border: none;
 	border-radius: 4px;
@@ -437,7 +441,7 @@ p + ol {
 	font-family: 'Open Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
 	font-weight: 600;
 	line-height: 1.5555555556;
-	margin: 0 1.75rem 1.5rem 0;
+	margin: 0;
 	min-width: 10rem;
 	padding: 0.625rem 1.5rem;
 	text-align: center;
@@ -489,12 +493,12 @@ p + ol {
 	padding-bottom: 0.5rem;
 }
 .ontario-button--secondary:hover {
-	background-color: #e0f0ff;
+	background-color: rgb(224.4, 239.7, 255);
 	border-color: #00478f;
 	color: #00478f;
 }
 .ontario-button--secondary:focus {
-	background-color: #e0f0ff;
+	background-color: rgb(224.4, 239.7, 255);
 	border-color: #00478f;
 	color: #00478f;
 	transition:
@@ -502,7 +506,7 @@ p + ol {
 		box-shadow 0.1s ease-in-out;
 }
 .ontario-button--secondary:active {
-	background-color: #c2e0ff;
+	background-color: rgb(193.8, 224.4, 255);
 	border-color: #002142;
 	color: #002142;
 	transition:
@@ -519,12 +523,12 @@ p + ol {
 	text-decoration: underline;
 }
 .ontario-button--tertiary:hover {
-	background-color: #e8e8e8;
+	background-color: rgb(232.05, 232.05, 232.05);
 	color: #00478f;
 	text-decoration: underline;
 }
 .ontario-button--tertiary:focus {
-	background-color: #e8e8e8;
+	background-color: rgb(232.05, 232.05, 232.05);
 	color: #00478f;
 	text-decoration: underline;
 	transition:
@@ -532,7 +536,7 @@ p + ol {
 		box-shadow 0.1s ease-in-out;
 }
 .ontario-button--tertiary:active {
-	background-color: #d1d1d1;
+	background-color: rgb(209.1, 209.1, 209.1);
 	color: #002142;
 	text-decoration: underline;
 	transition:
@@ -544,21 +548,21 @@ p + ol {
 }
 
 .ontario-button--internalThemeDark {
-	background-color: #1a1a1a;
+	background-color: rgb(25.5, 25.5, 25.5);
 	border: 2px solid #ffffff;
 	color: #ffffff;
 }
 .ontario-button--internalThemeDark:hover {
-	background-color: #4d4d4d;
+	background-color: rgb(76.5, 76.5, 76.5);
 }
 .ontario-button--internalThemeDark:focus {
-	background-color: #4d4d4d;
+	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: #4d4d4d;
+	background-color: rgb(76.5, 76.5, 76.5);
 	transition:
 		background-color 0s,
 		box-shadow 0.1s ease-in-out;