npm - @ongov/ontario-design-system-component-library - Versions diffs - 5.0.0-alpha.5 → 5.0.0-alpha.6 - Mend

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

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (2351) hide show

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

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

package/dist/components/ontario-search-box.js CHANGED Viewed

@@ -1,17 +1,17 @@
-import { proxyCustomElement, HTMLElement, createEvent, h } from '@stencil/core/internal/client';
-import { I as Input } from './input.js';
-import { O as OntarioIconSearch } from './ontario-icon-search2.js';
-import { I as InputCaption, h as handleInputEvent, E as EventType } from './event-handler.js';
-import { t as translations } from './global.i18n.js';
-import { c as constructHintTextObject } from './hints.js';
-import { d as defineCustomElement$2 } from './ontario-hint-text2.js';
+import { p as proxyCustomElement, H, d as createEvent, h } from './p-846438ed.js';
+import { I as Input } from './p-7caacdde.js';
+import { O as OntarioIconSearch } from './p-fe2e0534.js';
+import { I as InputCaption, h as handleInputEvent, E as EventType } from './p-3fa830a3.js';
+import { t as translations } from './p-a5331e15.js';
+import { c as constructHintTextObject } from './p-e77d78ce.js';
+import { d as defineCustomElement$2 } from './p-226df20b.js';
 const ontarioSearchBoxCss =
-	'@charset "UTF-8";h6,.ontario-h6,h5,.ontario-h5,h4,.ontario-h4,h3,.ontario-h3,h2,.ontario-h2,h1>.ontario-label--heading,.ontario-fieldset__legend--large h1,.ontario-fieldset__legend--heading h1,h1,.ontario-h1{font-style:normal;font-weight:700;text-rendering:optimizeLegibility;margin-bottom:1rem;font-feature-settings:normal;font-family:"Raleway", "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif}h1>.ontario-label--heading,.ontario-fieldset__legend--large h1,.ontario-fieldset__legend--heading h1,h1,.ontario-h1{font-size:2rem;letter-spacing:0.04rem;line-height:1.29;margin:2.5rem 0 1.5rem 0;max-width:70rem}@media screen and (min-width: 40em){h1>.ontario-label--heading,.ontario-fieldset__legend--large h1,.ontario-fieldset__legend--heading h1,h1,.ontario-h1{font-size:2.5rem;letter-spacing:0.04rem;line-height:1.2}}h2,.ontario-h2{font-size:1.6875rem;letter-spacing:0.03rem;line-height:1.37;margin:0 0 0.75rem 0;max-width:48rem}@media screen and (min-width: 40em){h2,.ontario-h2{font-size:2.0625rem;letter-spacing:0.02rem;line-height:1.33}}h3,.ontario-h3{font-size:1.4375rem;letter-spacing:0.02rem;line-height:1.39;margin:0 0 0.75rem 0;max-width:48rem}@media screen and (min-width: 40em){h3,.ontario-h3{font-size:1.75rem;letter-spacing:0.02rem;line-height:1.43}}h4,.ontario-h4{font-size:1.25rem;letter-spacing:0.03rem;line-height:1.5;margin:0 0 0.75rem 0;max-width:48rem}@media screen and (min-width: 40em){h4,.ontario-h4{font-size:1.5rem;letter-spacing:0.0313rem;line-height:1.5}}h5,.ontario-h5{font-size:1.125rem;letter-spacing:0.03rem;line-height:1.56;margin:0 0 0.75rem 0;max-width:48rem}@media screen and (min-width: 40em){h5,.ontario-h5{font-size:1.1875rem;letter-spacing:0.025rem;line-height:1.5}}h6,.ontario-h6{font-size:1rem;line-height:1.56;letter-spacing:0.03rem;max-width:48rem;margin:0 0 0.75rem 0}@media screen and (min-width: 40em){h6,.ontario-h6{font-size:1rem;letter-spacing:0.025rem;line-height:1.5}}.ontario-lead-statement{font-size:1.25rem;line-height:1.6;max-width:70rem}@media screen and (min-width: 40em){.ontario-lead-statement{font-size:1.375rem}}.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}html{font-family:"Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;font-size:1rem}body{font-size:1rem;line-height:1.6;background-color:#FFFFFF;color:#1a1a1a;margin:0}p{font-size:inherit;margin-bottom:1.25rem;text-rendering:optimizeLegibility;margin:0 0 1.5rem 0}cite{font-style:italic;line-height:inherit}strong{font-weight:700;line-height:inherit}*,*::before,*::after{box-sizing:inherit}main p,main p:not(.ontario-lead-statement),main dd,main li{max-width:48rem}hr{border:0;padding:0;margin:2.5rem 0;border-bottom:4px solid #cccccc}hr.ontario-hr--dark{border-bottom:4px solid #1a1a1a}a{color:#0066CC;text-decoration:underline}a:visited{color:#551A8B}a:hover{color:#00478F}a:active{color:#002142}a:focus{-moz-box-shadow:0 0 0 4px #009ADB;-webkit-box-shadow:0 0 0 4px #009ADB;box-shadow:0 0 0 4px #009ADB;outline:4px solid transparent;transition:all 0.1s ease-in-out}p{margin:0 0 1.5rem 0}p+h1,p+h2,p+h3,p+h4,p+h5,p+h6,ul+h1,ul+h2,ul+h3,ul+h4,ul+h5,ul+h6,ol+h1,ol+h2,ol+h3,ol+h4,ol+h5,ol+h6,h1+h2,h2+h3,h3+h4,h4+h5,h5+h6{margin-top:2rem}p code,td code,li code{line-height:2.25rem}input[type=text],input[type=number],input[type=email],input[type=date],input[type=color],input[type=search],input[type=tel],textarea{background-origin:initial;height:auto;-webkit-appearance:none;-moz-appearance:none}input[type=checkbox]+label,input[type=radio]+label{font-family:"Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;font-size:1rem;font-weight:400;margin-left:0;margin-right:0}fieldset{border:0;margin:0;padding:0;page-break-inside:avoid}legend,label{display:block;margin:0}select{background-origin:initial;height:auto;-webkit-appearance:none;-moz-appearance:none}ul,ol{padding:0}ul{margin-left:2rem}ul li{padding:0 0 0.75rem 0}ol{margin-left:1.75rem}ol li{padding:0 0 0.75rem 0.25rem}ul li:last-child,ol li:last-child{padding-bottom:0}ul[class*=columns-] li:last-child,ol[class*=columns-] li:last-child{padding-bottom:0.75rem}ul ul,ol ul{margin:0.5rem 0 0.5rem 2rem}ul ol,ol ol{margin:0.5rem 0 0.5rem 1.75rem}p+ul,p+ol{margin-top:-0.75rem}@media screen and (min-width: 40em){ul{margin:0.5rem 0 1.5rem 3rem}ol{margin:0.5rem 0 1.5rem 2.75rem}ul ul,ol ul{margin:0.5rem 0 0.5rem 3rem}ul ol,ol ol{margin:0.5rem 0 0.5rem 2.75rem}}.ontario-form-group:last-of-type{margin-bottom:2.5rem}.ontario-form-group:last-of-type{margin-bottom:3rem}.ontario-fieldset__legend{color:#1a1a1a;font-family:"Raleway", "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;font-size:1.1875rem;font-weight:700;margin:0 0 1rem 0;line-height:1.5;max-width:38.75em;white-space:normal;width:100%;hyphens:auto}@media screen and (max-width: 40em){.ontario-fieldset__legend{font-size:1.125rem;line-height:1.56}}.ontario-fieldset__legend--large,.ontario-fieldset__legend--heading{letter-spacing:0.02rem;line-height:1.2}.ontario-fieldset__legend--large h1,.ontario-fieldset__legend--heading h1{display:inline-block;margin:0}@media screen and (max-width: 40em){.ontario-fieldset__legend--large,.ontario-fieldset__legend--heading{font-size:1.4375rem;line-height:1.39}}.ontario-fieldset__legend--large{font-size:1.75rem}.ontario-fieldset__legend-required-flag,.ontario-fieldset__legend-optional-flag{font-family:"Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;font-size:1rem;font-weight:400}.ontario-fieldset__legend-required-flag:before,.ontario-fieldset__legend-optional-flag:before{content:" "}.ontario-label__flag{font-family:"Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;font-size:1rem;font-weight:400}.ontario-label__flag:before{content:" "}.ontario-label{cursor:pointer;color:#1a1a1a;font-family:"Raleway", "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;font-size:1.1875rem;font-weight:700;line-height:1.5;margin:0 0 1rem 0;max-width:38.75em;white-space:normal;width:100%;hyphens:auto}@media screen and (max-width: 40em){.ontario-label{font-size:1.125rem;line-height:1.56}}.ontario-label--large{font-size:1.75rem;letter-spacing:0.02rem;line-height:1.2;max-width:26.25em}@media screen and (max-width: 40em){.ontario-label--large{font-size:1.4375rem;line-height:1.39}}h1>.ontario-label--heading{display:inline-block;margin:0}.ontario-label__flag{font-family:"Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;font-size:1rem;font-weight:400}.ontario-label__flag:before{content:" "}.ontario-input{border:2px solid #1a1a1a;border-radius:4px;box-sizing:border-box;color:#1a1a1a;display:block;font-size:1rem;font-family:"Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;line-height:1.5;margin:0 0 2.5rem;max-width:48rem;width:100%;padding:0.625rem 1rem;transition:box-shadow 0.1s ease-in-out}.ontario-input--2-char-width{max-width:8ex}.ontario-input--3-char-width{max-width:10ex}.ontario-input--4-char-width{max-width:12ex}.ontario-input--5-char-width{max-width:14ex}.ontario-input--7-char-width{max-width:17ex}.ontario-input--10-char-width{max-width:23ex}.ontario-input--20-char-width{max-width:41ex}.ontario-form-group:last-of-type{margin-bottom:2.5rem}.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}.ontario-search__input-container{position:relative}.ontario-search__input.ontario-input{border:2px solid #1a1a1a;margin-bottom:0;height:3rem;padding-left:0.75rem;padding-right:8.5rem;width:100%}.ontario-search__input.ontario-input:invalid+input[type=reset]{display:none}input[type=reset].ontario-search__reset{position:absolute;display:flex;align-items:center;top:0.75rem;right:6rem;height:1.5rem;width:1.5rem;color:#1a1a1a;margin:0;padding:0.25rem;background-size:1.5rem;background-image:url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgZmlsbD0ibm9uZSI+PHBhdGggZD0iTTE5IDYuNEwxNy42IDUgMTIgMTAuNiA2LjQgNSA1IDYuNGw1LjYgNS42TDUgMTcuNiA2LjQgMTlsNS42LTUuNiA1LjYgNS42IDEuNC0xLjQtNS42LTUuNkwxOSA2LjR6IiBmaWxsPSIjMDAwIi8+PC9zdmc+);background-position:center center;background-repeat:no-repeat;background-color:transparent;outline:none;border:none;cursor:pointer}input[type=reset].ontario-search__reset:focus{box-shadow:inset 0 0 0 4px #009ADB}@media screen and (max-width: 40em){input[type=reset].ontario-search__reset{right:5.5rem}}.ontario-search__submit{border:0;border-radius:0 3px 3px 0;background-color:#0066CC;color:#1a1a1a;display:flex;justify-content:center;align-items:center;font-family:"Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;font-weight:600;font-size:1.125rem;width:5rem;line-height:1.56;position:absolute;right:0;bottom:0;top:0;cursor:pointer}.ontario-search__submit:hover{background-color:#00478F;color:#FFFFFF}.ontario-search__submit:focus{outline:none;box-shadow:0 0 0 4px #009ADB;background-color:#00478F;color:#FFFFFF}.ontario-search__submit:active{background-color:#002142;color:#FFFFFF}.ontario-search__submit svg{fill:#FFFFFF;margin-right:0;margin-bottom:0;width:2rem;height:2rem;display:inline-block;vertical-align:middle;overflow:hidden}@media screen and (max-width: 40em){.ontario-search__submit{width:3rem}}input[type=search].ontario-search__input::-webkit-search-decoration,input[type=search].ontario-search__input::-webkit-search-cancel-button,input[type=search].ontario-search__input::-webkit-search-results-button,input[type=search].ontario-search__input::-webkit-search-results-decoration{-webkit-appearance:none}';
+	'@charset "UTF-8";.ontario-search__input.ontario-input:focus,.ontario-input:focus,.ontario-input:active{box-shadow:0 0 0 4px #009ADB;outline:4px solid transparent;transition:box-shadow 0.1s ease-in-out}h6,.ontario-h6,h5,.ontario-h5,h4,.ontario-h4,h3,.ontario-h3,h2,.ontario-h2,h1>.ontario-label--heading,.ontario-fieldset__legend--large h1,.ontario-fieldset__legend--heading h1,h1,.ontario-h1{font-style:normal;font-weight:700;text-rendering:optimizeLegibility;margin-bottom:1rem;font-feature-settings:normal;font-family:"Raleway", "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif}h1>.ontario-label--heading,.ontario-fieldset__legend--large h1,.ontario-fieldset__legend--heading h1,h1,.ontario-h1{font-size:2rem;letter-spacing:0.04rem;line-height:1.29;margin:2.5rem 0 1.5rem 0;max-width:70rem}@media screen and (min-width: 40em){h1>.ontario-label--heading,.ontario-fieldset__legend--large h1,.ontario-fieldset__legend--heading h1,h1,.ontario-h1{font-size:2.5rem;letter-spacing:0.04rem;line-height:1.2}}h2,.ontario-h2{font-size:1.6875rem;letter-spacing:0.03rem;line-height:1.37;margin:0 0 0.75rem 0;max-width:48rem}@media screen and (min-width: 40em){h2,.ontario-h2{font-size:2.0625rem;letter-spacing:0.02rem;line-height:1.33}}h3,.ontario-h3{font-size:1.4375rem;letter-spacing:0.02rem;line-height:1.39;margin:0 0 0.75rem 0;max-width:48rem}@media screen and (min-width: 40em){h3,.ontario-h3{font-size:1.75rem;letter-spacing:0.02rem;line-height:1.43}}h4,.ontario-h4{font-size:1.25rem;letter-spacing:0.03rem;line-height:1.5;margin:0 0 0.75rem 0;max-width:48rem}@media screen and (min-width: 40em){h4,.ontario-h4{font-size:1.5rem;letter-spacing:0.0313rem;line-height:1.5}}h5,.ontario-h5{font-size:1.125rem;letter-spacing:0.03rem;line-height:1.56;margin:0 0 0.75rem 0;max-width:48rem}@media screen and (min-width: 40em){h5,.ontario-h5{font-size:1.1875rem;letter-spacing:0.025rem;line-height:1.5}}h6,.ontario-h6{font-size:1rem;line-height:1.56;letter-spacing:0.03rem;max-width:48rem;margin:0 0 0.75rem 0}@media screen and (min-width: 40em){h6,.ontario-h6{font-size:1rem;letter-spacing:0.025rem;line-height:1.5}}.ontario-lead-statement{font-size:1.25rem;line-height:1.6;max-width:70rem}@media screen and (min-width: 40em){.ontario-lead-statement{font-size:1.375rem}}html{font-family:"Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;font-size:1rem}body{font-size:1rem;line-height:1.6;background-color:#FFFFFF;color:#1a1a1a;margin:0}p{font-size:inherit;margin-bottom:1.25rem;text-rendering:optimizeLegibility;margin:0 0 1.5rem 0}cite{font-style:italic;line-height:inherit}strong{font-weight:700;line-height:inherit}*,*::before,*::after{box-sizing:inherit}main p,main p:not(.ontario-lead-statement),main dd,main li{max-width:48rem}hr{border:0;padding:0;margin:2.5rem 0;border-bottom:4px solid #cccccc}hr.ontario-hr--dark{border-bottom:4px solid #1a1a1a}a{color:#0066CC;text-decoration:underline}a:visited{color:#551A8B}a:hover{color:#00478F}a:active{color:#002142}a:focus{-moz-box-shadow:0 0 0 4px #009ADB;-webkit-box-shadow:0 0 0 4px #009ADB;box-shadow:0 0 0 4px #009ADB;outline:4px solid transparent;transition:all 0.1s ease-in-out}p{margin:0 0 1.5rem 0}p+h1,p+h2,p+h3,p+h4,p+h5,p+h6,ul+h1,ul+h2,ul+h3,ul+h4,ul+h5,ul+h6,ol+h1,ol+h2,ol+h3,ol+h4,ol+h5,ol+h6,h1+h2,h2+h3,h3+h4,h4+h5,h5+h6{margin-top:2rem}p code,td code,li code{line-height:2.25rem}input[type=text],input[type=number],input[type=email],input[type=date],input[type=color],input[type=search],input[type=tel],textarea{background-origin:initial;height:auto;-webkit-appearance:none;-moz-appearance:none}input[type=checkbox]+label,input[type=radio]+label{font-family:"Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;font-size:1rem;font-weight:400;margin-left:0;margin-right:0}fieldset{border:0;margin:0;padding:0;page-break-inside:avoid}legend,label{display:block;margin:0}select{background-origin:initial;height:auto;-webkit-appearance:none;-moz-appearance:none}ul,ol{padding:0}ul{margin-left:2rem}ul li{padding:0 0 0.75rem 0}ol{margin-left:1.75rem}ol li{padding:0 0 0.75rem 0.25rem}ul li:last-child,ol li:last-child{padding-bottom:0}ul[class*=columns-] li:last-child,ol[class*=columns-] li:last-child{padding-bottom:0.75rem}ul ul,ol ul{margin:0.5rem 0 0.5rem 2rem}ul ol,ol ol{margin:0.5rem 0 0.5rem 1.75rem}p+ul,p+ol{margin-top:-0.75rem}@media screen and (min-width: 40em){ul{margin:0.5rem 0 1.5rem 3rem}ol{margin:0.5rem 0 1.5rem 2.75rem}ul ul,ol ul{margin:0.5rem 0 0.5rem 3rem}ul ol,ol ol{margin:0.5rem 0 0.5rem 2.75rem}}.ontario-form-group:last-of-type{margin-bottom:2.5rem}.ontario-form-group:last-of-type{margin-bottom:3rem}.ontario-fieldset__legend{color:#1a1a1a;font-family:"Raleway", "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;font-size:1.1875rem;font-weight:700;margin:0 0 1rem 0;line-height:1.5;max-width:38.75em;white-space:normal;width:100%;hyphens:auto}@media screen and (max-width: 40em){.ontario-fieldset__legend{font-size:1.125rem;line-height:1.56}}.ontario-fieldset__legend--large,.ontario-fieldset__legend--heading{letter-spacing:0.02rem;line-height:1.2}.ontario-fieldset__legend--large h1,.ontario-fieldset__legend--heading h1{display:inline-block;margin:0}@media screen and (max-width: 40em){.ontario-fieldset__legend--large,.ontario-fieldset__legend--heading{font-size:1.4375rem;line-height:1.39}}.ontario-fieldset__legend--large{font-size:1.75rem}.ontario-fieldset__legend-required-flag,.ontario-fieldset__legend-optional-flag{font-family:"Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;font-size:1rem;font-weight:400}.ontario-fieldset__legend-required-flag:before,.ontario-fieldset__legend-optional-flag:before{content:" "}.ontario-label__flag{font-family:"Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;font-size:1rem;font-weight:400}.ontario-label__flag:before{content:" "}.ontario-label{cursor:pointer;color:#1a1a1a;font-family:"Raleway", "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;font-size:1.1875rem;font-weight:700;line-height:1.5;margin:0 0 1rem 0;max-width:38.75em;white-space:normal;width:100%;hyphens:auto}@media screen and (max-width: 40em){.ontario-label{font-size:1.125rem;line-height:1.56}}.ontario-label--large{font-size:1.75rem;letter-spacing:0.02rem;line-height:1.2;max-width:26.25em}@media screen and (max-width: 40em){.ontario-label--large{font-size:1.4375rem;line-height:1.39}}h1>.ontario-label--heading{display:inline-block;margin:0}.ontario-label__flag{font-family:"Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;font-size:1rem;font-weight:400}.ontario-label__flag:before{content:" "}.ontario-input{border:2px solid #1a1a1a;border-radius:4px;box-sizing:border-box;color:#1a1a1a;display:block;font-size:1rem;font-family:"Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;line-height:1.5;margin:0 0 2.5rem;max-width:48rem;width:100%;padding:0.625rem 1rem;transition:box-shadow 0.1s ease-in-out}.ontario-input--2-char-width{max-width:8ex}.ontario-input--3-char-width{max-width:10ex}.ontario-input--4-char-width{max-width:12ex}.ontario-input--5-char-width{max-width:14ex}.ontario-input--7-char-width{max-width:17ex}.ontario-input--10-char-width{max-width:23ex}.ontario-input--20-char-width{max-width:41ex}.ontario-form-group:last-of-type{margin-bottom:2.5rem}.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}.ontario-search__input-container{position:relative}.ontario-search__input.ontario-input{border:2px solid #1a1a1a;margin-bottom:0;height:3rem;padding-left:0.75rem;padding-right:8.5rem;width:100%}.ontario-search__input.ontario-input:invalid+input[type=reset]{display:none}input[type=reset].ontario-search__reset{position:absolute;display:flex;align-items:center;top:0.75rem;right:6rem;height:1.5rem;width:1.5rem;color:#1a1a1a;margin:0;padding:0.25rem;background-size:1.5rem;background-image:url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgZmlsbD0ibm9uZSI+PHBhdGggZD0iTTE5IDYuNEwxNy42IDUgMTIgMTAuNiA2LjQgNSA1IDYuNGw1LjYgNS42TDUgMTcuNiA2LjQgMTlsNS42LTUuNiA1LjYgNS42IDEuNC0xLjQtNS42LTUuNkwxOSA2LjR6IiBmaWxsPSIjMDAwIi8+PC9zdmc+);background-position:center center;background-repeat:no-repeat;background-color:transparent;outline:none;border:none;cursor:pointer}input[type=reset].ontario-search__reset:focus{box-shadow:inset 0 0 0 4px #009ADB}@media screen and (max-width: 40em){input[type=reset].ontario-search__reset{right:5.5rem}}.ontario-search__submit{border:0;border-radius:0 3px 3px 0;background-color:#0066CC;color:#1a1a1a;display:flex;justify-content:center;align-items:center;font-family:"Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;font-weight:600;font-size:1.125rem;width:5rem;line-height:1.56;position:absolute;right:0;bottom:0;top:0;cursor:pointer}.ontario-search__submit:hover{background-color:#00478F;color:#FFFFFF}.ontario-search__submit:focus{outline:none;box-shadow:0 0 0 4px #009ADB;background-color:#00478F;color:#FFFFFF}.ontario-search__submit:active{background-color:#002142;color:#FFFFFF}.ontario-search__submit svg{fill:#FFFFFF;margin-right:0;margin-bottom:0;width:2rem;height:2rem;display:inline-block;vertical-align:middle;overflow:hidden}@media screen and (max-width: 40em){.ontario-search__submit{width:3rem}}input[type=search].ontario-search__input::-webkit-search-decoration,input[type=search].ontario-search__input::-webkit-search-cancel-button,input[type=search].ontario-search__input::-webkit-search-results-button,input[type=search].ontario-search__input::-webkit-search-results-decoration{-webkit-appearance:none}';
 const OntarioSearchBoxStyle0 = ontarioSearchBoxCss;
 const OntarioSearchBox$1 = /*@__PURE__*/ proxyCustomElement(
-	class OntarioSearchBox extends HTMLElement {
+	class OntarioSearchBox extends H {
 		constructor() {
 			super();
 			this.__registerHost();
@@ -21,27 +21,137 @@ const OntarioSearchBox$1 = /*@__PURE__*/ proxyCustomElement(
 			this.inputOnChange = createEvent(this, 'inputOnChange', 7);
 			this.inputOnBlur = createEvent(this, 'inputOnBlur', 7);
 			this.inputOnFocus = createEvent(this, 'inputOnFocus', 7);
-			/**
-			 * 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;
 		}
+		get element() {
+			return this;
+		}
+		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.
 		 *
@@ -79,8 +189,7 @@ const OntarioSearchBox$1 = /*@__PURE__*/ proxyCustomElement(
 		 * 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;
@@ -91,13 +200,10 @@ const OntarioSearchBox$1 = /*@__PURE__*/ proxyCustomElement(
 		 * 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,
@@ -123,12 +229,10 @@ const OntarioSearchBox$1 = /*@__PURE__*/ proxyCustomElement(
 			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.
@@ -138,12 +242,18 @@ const OntarioSearchBox$1 = /*@__PURE__*/ proxyCustomElement(
 				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:
@@ -153,15 +263,16 @@ const OntarioSearchBox$1 = /*@__PURE__*/ proxyCustomElement(
 				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',
@@ -178,7 +289,7 @@ const OntarioSearchBox$1 = /*@__PURE__*/ proxyCustomElement(
 						'value': this.getValue(),
 					}),
 					h(Input, {
-						key: '20395baddaa5943e9f300eee043b97994e63c0af',
+						key: '95bad003daf908fe81f4076f7f070ccd7acabb9c',
 						className: 'ontario-search__reset',
 						id: 'ontario-search-reset',
 						type: 'reset',
@@ -188,20 +299,17 @@ const OntarioSearchBox$1 = /*@__PURE__*/ proxyCustomElement(
 					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 }),
 					),
 				),
 			);
 		}
-		get element() {
-			return this;
-		}
 		static get watchers() {
 			return {
 				hintText: ['parseHintText'],

package/dist/components/ontario-search-box.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"ontario-search-box.js","mappings":"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","names":["OntarioSearchBox"],"sources":["src/components/ontario-search-box/ontario-search-box.scss?tag=ontario-search-box&encapsulation=shadow","src/components/ontario-search-box/ontario-search-box.tsx"],"sourcesContent":["@use 'sass:math';\n@use '@ongov/ontario-design-system-global-styles/dist/styles/scss/1-variables/global.variables' as globalVariables;\n@use '@ongov/ontario-design-system-global-styles/dist/styles/scss/1-variables/spacing.variables' as spacing;\n@use '@ongov/ontario-design-system-global-styles/dist/styles/scss/1-variables/colours.variables' as colours;\n@use '@ongov/ontario-design-system-global-styles/dist/styles/scss/1-variables/breakpoints.variables' as breakpoints;\n@use '@ongov/ontario-design-system-global-styles/dist/styles/scss/1-variables/typography.variables' as typography;\n@use '@ongov/ontario-design-system-global-styles/dist/styles/scss/1-variables/line-heights.variables' as lineheight;\n@use '@ongov/ontario-design-system-global-styles/dist/styles/scss/1-variables/font-weights.variables' as fontWeights;\n@use '@ongov/ontario-design-system-global-styles/dist/styles/scss/2-tools/functions/global.functions' as globalFunctions;\n@use '@ongov/ontario-design-system-global-styles/dist/styles/scss/2-tools/placeholder/focus.placeholders' as\n\tfocusPlaceholders;\n@use '@ongov/ontario-design-system-global-styles/dist/styles/scss/4-elements/_global.elements.scss';\n@use '../../styles/form.scss';\n\n$ontario-input-height: globalFunctions.px-to-rem(48);\n$ontario-search-icon-size: 2rem;\n$ontario-reset-icon-size: 1.5rem;\n$ontario-search-button-width: 5rem;\n$ontario-search-button-width--mobile: 3rem;\n$ontario-search-input-padding: 8.5rem;\n$ontario-search-input-padding--mobile: 7.75rem;\n$ontario-search-desktop-width: 34rem;\n$ontario-search-mobile-width: 20.5rem;\n\n.ontario-search__container {\n\tmax-width: $ontario-search-desktop-width;\n\tmargin-bottom: spacing.$spacing-7;\n}\n\n.ontario-search__input-container {\n\tposition: relative;\n}\n\n.ontario-search__input.ontario-input {\n\tborder: 2px solid colours.$ontario-colour-black;\n\tmargin-bottom: spacing.$spacing-0;\n\theight: $ontario-input-height;\n\tpadding-left: spacing.$spacing-3;\n\tpadding-right: $ontario-search-input-padding;\n\twidth: 100%;\n\n\t&:invalid + input[type='reset'] {\n\t\tdisplay: none;\n\t}\n\n\t&:focus {\n\t\t@extend %ontario-focus;\n\t}\n}\n\ninput[type='reset'].ontario-search__reset {\n\tposition: absolute;\n\tdisplay: flex;\n\talign-items: center;\n\ttop: spacing.$spacing-3;\n\tright: $ontario-search-button-width + spacing.$spacing-4;\n\theight: $ontario-reset-icon-size;\n\twidth: $ontario-reset-icon-size;\n\tcolor: colours.$ontario-colour-black;\n\tmargin: spacing.$spacing-0;\n\tpadding: spacing.$spacing-1;\n\tbackground-size: $ontario-reset-icon-size;\n\tbackground-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgZmlsbD0ibm9uZSI+PHBhdGggZD0iTTE5IDYuNEwxNy42IDUgMTIgMTAuNiA2LjQgNSA1IDYuNGw1LjYgNS42TDUgMTcuNiA2LjQgMTlsNS42LTUuNiA1LjYgNS42IDEuNC0xLjQtNS42LTUuNkwxOSA2LjR6IiBmaWxsPSIjMDAwIi8+PC9zdmc+);\n\tbackground-position: center center;\n\tbackground-repeat: no-repeat;\n\tbackground-color: transparent;\n\toutline: none;\n\tborder: none;\n\tcursor: pointer;\n\n\t&:focus {\n\t\tbox-shadow: inset 0 0 0 globalVariables.$global-radius colours.$ontario-colour-focus;\n\t}\n\n\t@media screen and (max-width: breakpoints.$small-breakpoint) {\n\t\tright: $ontario-search-button-width--mobile + spacing.$spacing-7;\n\t}\n}\n\n.ontario-search__submit {\n\tborder: 0;\n\tborder-radius: 0 3px 3px 0;\n\tbackground-color: colours.$ontario-colour-link;\n\tcolor: colours.$ontario-colour-black;\n\n\tdisplay: flex;\n\tjustify-content: center;\n\talign-items: center;\n\n\tfont-family: typography.$ontario-font-open-sans;\n\tfont-weight: fontWeights.$ontario-font-weights-semi-bold;\n\tfont-size: 1.125rem;\n\twidth: $ontario-search-button-width;\n\tline-height: lineheight.$ontario-line-height-8;\n\n\tposition: absolute;\n\tright: spacing.$spacing-0;\n\tbottom: spacing.$spacing-0;\n\ttop: spacing.$spacing-0;\n\tcursor: pointer;\n\n\t&:hover {\n\t\tbackground-color: colours.$ontario-colour-link--hover;\n\t\tcolor: colours.$ontario-colour-white;\n\t}\n\n\t&:focus {\n\t\toutline: none;\n\t\tbox-shadow: 0 0 0 globalVariables.$global-radius colours.$ontario-colour-focus;\n\t\tbackground-color: colours.$ontario-colour-link--hover;\n\t\tcolor: colours.$ontario-colour-white;\n\t}\n\n\t&:active {\n\t\tbackground-color: colours.$ontario-colour-link--active;\n\t\tcolor: colours.$ontario-colour-white;\n\t}\n\n\tsvg {\n\t\tfill: colours.$ontario-colour-white;\n\t\tmargin-right: spacing.$spacing-0;\n\t\tmargin-bottom: spacing.$spacing-0;\n\t\twidth: $ontario-search-icon-size;\n\t\theight: $ontario-search-icon-size;\n\t\tdisplay: inline-block;\n\t\tvertical-align: middle;\n\t\toverflow: hidden;\n\t}\n\n\t@media screen and (max-width: breakpoints.$small-breakpoint) {\n\t\twidth: $ontario-search-button-width--mobile;\n\t}\n}\n\n// remove default cancel button for input with type=\"search\"\ninput[type='search'].ontario-search__input::-webkit-search-decoration,\ninput[type='search'].ontario-search__input::-webkit-search-cancel-button,\ninput[type='search'].ontario-search__input::-webkit-search-results-button,\ninput[type='search'].ontario-search__input::-webkit-search-results-decoration {\n\t-webkit-appearance: none;\n}\n","import { Component, Prop, h, Element, EventEmitter, Event, AttachInternals, State, Watch } from '@stencil/core';\nimport { 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}
1	+ {"file":"ontario-search-box.js","mappings":"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","names":["OntarioSearchBox"],"sources":["src/components/ontario-search-box/ontario-search-box.scss?tag=ontario-search-box&encapsulation=shadow","src/components/ontario-search-box/ontario-search-box.tsx"],"sourcesContent":["@use 'sass:math';\n@use '@ongov/ontario-design-system-global-styles/dist/styles/scss/1-variables/global.variables' as globalVariables;\n@use '@ongov/ontario-design-system-global-styles/dist/styles/scss/1-variables/spacing.variables' as spacing;\n@use '@ongov/ontario-design-system-global-styles/dist/styles/scss/1-variables/colours.variables' as colours;\n@use '@ongov/ontario-design-system-global-styles/dist/styles/scss/1-variables/breakpoints.variables' as breakpoints;\n@use '@ongov/ontario-design-system-global-styles/dist/styles/scss/1-variables/fonts.variables' as fonts;\n@use '@ongov/ontario-design-system-global-styles/dist/styles/scss/1-variables/line-heights.variables' as lineheight;\n@use '@ongov/ontario-design-system-global-styles/dist/styles/scss/1-variables/font-weights.variables' as fontWeights;\n@use '@ongov/ontario-design-system-global-styles/dist/styles/scss/2-tools/functions/global.functions' as globalFunctions;\n@use '@ongov/ontario-design-system-global-styles/dist/styles/scss/2-tools/placeholder/focus.placeholders' as\n\tfocusPlaceholders;\n@use '@ongov/ontario-design-system-global-styles/dist/styles/scss/4-elements/_global.elements.scss';\n@use '../../styles/form.scss';\n\n$ontario-input-height: globalFunctions.px-to-rem(48);\n$ontario-search-icon-size: 2rem;\n$ontario-reset-icon-size: 1.5rem;\n$ontario-search-button-width: 5rem;\n$ontario-search-button-width--mobile: 3rem;\n$ontario-search-input-padding: 8.5rem;\n$ontario-search-input-padding--mobile: 7.75rem;\n$ontario-search-desktop-width: 34rem;\n$ontario-search-mobile-width: 20.5rem;\n\n.ontario-search__container {\n\tmax-width: $ontario-search-desktop-width;\n\tmargin-bottom: spacing.$spacing-7;\n}\n\n.ontario-search__input-container {\n\tposition: relative;\n}\n\n.ontario-search__input.ontario-input {\n\tborder: 2px solid colours.$ontario-colour-black;\n\tmargin-bottom: spacing.$spacing-0;\n\theight: $ontario-input-height;\n\tpadding-left: spacing.$spacing-3;\n\tpadding-right: $ontario-search-input-padding;\n\twidth: 100%;\n\n\t&:invalid + input[type='reset'] {\n\t\tdisplay: none;\n\t}\n\n\t&:focus {\n\t\t@extend %ontario-focus;\n\t}\n}\n\ninput[type='reset'].ontario-search__reset {\n\tposition: absolute;\n\tdisplay: flex;\n\talign-items: center;\n\ttop: spacing.$spacing-3;\n\tright: $ontario-search-button-width + spacing.$spacing-4;\n\theight: $ontario-reset-icon-size;\n\twidth: $ontario-reset-icon-size;\n\tcolor: colours.$ontario-colour-black;\n\tmargin: spacing.$spacing-0;\n\tpadding: spacing.$spacing-1;\n\tbackground-size: $ontario-reset-icon-size;\n\tbackground-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgZmlsbD0ibm9uZSI+PHBhdGggZD0iTTE5IDYuNEwxNy42IDUgMTIgMTAuNiA2LjQgNSA1IDYuNGw1LjYgNS42TDUgMTcuNiA2LjQgMTlsNS42LTUuNiA1LjYgNS42IDEuNC0xLjQtNS42LTUuNkwxOSA2LjR6IiBmaWxsPSIjMDAwIi8+PC9zdmc+);\n\tbackground-position: center center;\n\tbackground-repeat: no-repeat;\n\tbackground-color: transparent;\n\toutline: none;\n\tborder: none;\n\tcursor: pointer;\n\n\t&:focus {\n\t\tbox-shadow: inset 0 0 0 globalVariables.$global-radius colours.$ontario-colour-focus;\n\t}\n\n\t@media screen and (max-width: breakpoints.$small-breakpoint) {\n\t\tright: $ontario-search-button-width--mobile + spacing.$spacing-7;\n\t}\n}\n\n.ontario-search__submit {\n\tborder: 0;\n\tborder-radius: 0 3px 3px 0;\n\tbackground-color: colours.$ontario-colour-link;\n\tcolor: colours.$ontario-colour-black;\n\n\tdisplay: flex;\n\tjustify-content: center;\n\talign-items: center;\n\n\tfont-family: fonts.$ontario-font-open-sans;\n\tfont-weight: fontWeights.$ontario-font-weights-semi-bold;\n\tfont-size: 1.125rem;\n\twidth: $ontario-search-button-width;\n\tline-height: lineheight.$ontario-line-height-8;\n\n\tposition: absolute;\n\tright: spacing.$spacing-0;\n\tbottom: spacing.$spacing-0;\n\ttop: spacing.$spacing-0;\n\tcursor: pointer;\n\n\t&:hover {\n\t\tbackground-color: colours.$ontario-colour-link--hover;\n\t\tcolor: colours.$ontario-colour-white;\n\t}\n\n\t&:focus {\n\t\toutline: none;\n\t\tbox-shadow: 0 0 0 globalVariables.$global-radius colours.$ontario-colour-focus;\n\t\tbackground-color: colours.$ontario-colour-link--hover;\n\t\tcolor: colours.$ontario-colour-white;\n\t}\n\n\t&:active {\n\t\tbackground-color: colours.$ontario-colour-link--active;\n\t\tcolor: colours.$ontario-colour-white;\n\t}\n\n\tsvg {\n\t\tfill: colours.$ontario-colour-white;\n\t\tmargin-right: spacing.$spacing-0;\n\t\tmargin-bottom: spacing.$spacing-0;\n\t\twidth: $ontario-search-icon-size;\n\t\theight: $ontario-search-icon-size;\n\t\tdisplay: inline-block;\n\t\tvertical-align: middle;\n\t\toverflow: hidden;\n\t}\n\n\t@media screen and (max-width: breakpoints.$small-breakpoint) {\n\t\twidth: $ontario-search-button-width--mobile;\n\t}\n}\n\n// remove default cancel button for input with type=\"search\"\ninput[type='search'].ontario-search__input::-webkit-search-decoration,\ninput[type='search'].ontario-search__input::-webkit-search-cancel-button,\ninput[type='search'].ontario-search__input::-webkit-search-results-button,\ninput[type='search'].ontario-search__input::-webkit-search-results-decoration {\n\t-webkit-appearance: none;\n}\n","import { Component, Prop, h, Element, EventEmitter, Event, AttachInternals, State, Watch } from '@stencil/core';\nimport { 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}