@ongov/ontario-design-system-component-library 4.2.0-alpha.1 → 4.3.0-alpha.1

package/dist/collection/components/ontario-textarea/ontario-textarea.js.map

@@ -1 +1 @@
-{"version":3,"file":"ontario-textarea.js","sourceRoot":"","sources":["../../../src/components/ontario-textarea/ontario-textarea.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Event, h, Prop, State, Listen, Watch, Element, EventEmitter, AttachInternals } from '@stencil/core';\nimport { v4 as uuid } from 'uuid';\n\nimport { HintExpander } from '../ontario-hint-expander/hint-expander.interface';\n\nimport { Hint, Input } from '../../utils/common/common.interface';\nimport { InputCaption } from '../../utils/common/input-caption/input-caption';\nimport { Caption } from '../../utils/common/input-caption/caption.interface';\nimport { validatePropExists, validateLanguage } 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\tEventType,\n\tInputInteractionEvent,\n\tInputInputEvent,\n} from '../../utils/events/event-handler.interface';\nimport { handleInputEvent } from '../../utils/events/event-handler';\n\nimport { default as translations } from '../../translations/global.i18n.json';\n\n@Component({\n\ttag: 'ontario-textarea',\n\tstyleUrl: 'ontario-textarea.scss',\n\tshadow: true,\n\tformAssociated: true,\n})\nexport class OntarioTextarea implements Input {\n\t@Element() element: HTMLElement;\n\t@AttachInternals() internals: ElementInternals;\n\n\thintTextRef: HTMLOntarioHintTextElement | undefined;\n\n\t/**\n\t * The text to display as the textarea label.\n\t *\n\t * @example\n\t * <ontario-input\n\t *   caption='{\n\t *     \"captionText\": \"Address\",\n\t *     \"captionType\": \"heading\",\n\t *   }'\n\t *   required=\"true\"\n\t *   ...>\n\t * </ontario-input>\n\t */\n\t@Prop() caption: Caption | string;\n\n\t/**\n\t * The name assigned to the textarea. 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 * The unique identifier of the textarea. 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 * This is used to determine whether the textarea 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 textarea content value.\n\t */\n\t@Prop({ mutable: true }) value?: string;\n\n\t/**\n\t * Used to include the ontario-hint-text component for the textarea.\n\t * This is optional.\n\n\t */\n\t@Prop() hintText?: string | Hint;\n\n\t/**\n\t * Used to include the ontario-hint-expander component for the textarea component.\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-textarea\n\t *   caption='{\n\t *     \"captionText\": \"What are your thoughts\",\n\t *     \"captionType\": \"heading\",\n\t *   }'\n\t * \t name: \"textarea\"\n\t *   hint-expander='{\n\t *     \"hint\": \"This is the hint expander\",\n\t *     \"content\": \"This is the content for the hint expander\"\n\t *   }'\n\t *   required=\"true\"\n\t * >\n\t * </ontario-textarea>\n\t */\n\t@Prop() hintExpander?: HintExpander | string;\n\n\t/**\n\t * The language of the component.\n\t * This is used for translations, and is by default set through event listeners checking for a language property from the header. If no language is passed, it will default to English.\n\t */\n\t@Prop({ mutable: true }) language?: Language;\n\n\t/**\n\t * Used to add a custom function to the textarea 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 textarea 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 textarea 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 textarea 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 textarea. 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 * Instantiate an InputCaption object for internal logic use\n\t */\n\t@State() private captionState: InputCaption;\n\n\t/**\n\t * Emitted when a input event 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 * 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 textarea 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 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-textarea> ')\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\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 * Function to handle textarea events and the information pertaining to the textarea to emit.\n\t */\n\tprivate handleEvent(event: Event, eventType: EventType) {\n\t\tconst input = event.target as HTMLTextAreaElement | null;\n\n\t\tthis.internals?.setFormValue?.(input?.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\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\tprivate getClass(): string {\n\t\treturn this.hintExpander ? `ontario-textarea ontario-textarea-hint-expander--true` : `ontario-textarea`;\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 textarea `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.elementId = this.elementId ?? uuid();\n\t\tthis.parseHintText();\n\t\tthis.parseHintExpander();\n\t\tthis.validateName(this.name);\n\t\tthis.language = validateLanguage(this.language);\n\t}\n\n\trender() {\n\t\treturn (\n\t\t\t<div class=\"ontario-form-group\">\n\t\t\t\t{this.captionState.getCaption(this.getId(), !!this.internalHintExpander)}\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\t\t\t\t<textarea\n\t\t\t\t\taria-describedby={this.hintTextId}\n\t\t\t\t\tclass={this.getClass()}\n\t\t\t\t\tid={this.getId()}\n\t\t\t\t\tname={this.name}\n\t\t\t\t\tvalue={this.getValue()}\n\t\t\t\t\tonInput={(e) => this.handleEvent(e, EventType.Input)}\n\t\t\t\t\tonChange={(e) => this.handleEvent(e, EventType.Change)}\n\t\t\t\t\tonBlur={(e) => this.handleEvent(e, EventType.Blur)}\n\t\t\t\t\tonFocus={(e) => this.handleEvent(e, EventType.Focus)}\n\t\t\t\t\trequired={!!this.required}\n\t\t\t\t></textarea>\n\t\t\t\t{this.internalHintExpander && (\n\t\t\t\t\t<ontario-hint-expander\n\t\t\t\t\t\thint={this.internalHintExpander.hint}\n\t\t\t\t\t\tcontent={this.internalHintExpander.content}\n\t\t\t\t\t\thintContentType={this.internalHintExpander.hintContentType}\n\t\t\t\t\t\tinput-exists\n\t\t\t\t\t></ontario-hint-expander>\n\t\t\t\t)}\n\t\t\t</div>\n\t\t);\n\t}\n}\n"]}
+{"version":3,"file":"ontario-textarea.js","sourceRoot":"","sources":["../../../src/components/ontario-textarea/ontario-textarea.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Event, h, Prop, State, Listen, Watch, Element, EventEmitter, AttachInternals } from '@stencil/core';\nimport { v4 as uuid } from 'uuid';\n\nimport { HintExpander } from '../ontario-hint-expander/hint-expander.interface';\n\nimport { Hint, Input } from '../../utils/common/common.interface';\nimport { InputCaption } from '../../utils/common/input-caption/input-caption';\nimport { Caption } from '../../utils/common/input-caption/caption.interface';\nimport { validatePropExists, validateLanguage } 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\tEventType,\n\tInputInteractionEvent,\n\tInputInputEvent,\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-textarea',\n\tstyleUrl: 'ontario-textarea.scss',\n\tshadow: true,\n\tformAssociated: true,\n})\nexport class OntarioTextarea implements Input {\n\t@Element() element: HTMLElement;\n\t@AttachInternals() internals: ElementInternals;\n\n\thintTextRef: HTMLOntarioHintTextElement | undefined;\n\n\t/**\n\t * The text to display as the textarea label.\n\t *\n\t * @example\n\t * <ontario-input\n\t *   caption='{\n\t *     \"captionText\": \"Address\",\n\t *     \"captionType\": \"heading\",\n\t *   }'\n\t *   required=\"true\"\n\t *   ...>\n\t * </ontario-input>\n\t */\n\t@Prop() caption: Caption | string;\n\n\t/**\n\t * The name assigned to the textarea. 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 * The unique identifier of the textarea. 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 * This is used to determine whether the textarea 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 textarea content value.\n\t */\n\t@Prop({ mutable: true }) value?: string;\n\n\t/**\n\t * Used to include the ontario-hint-text component for the textarea.\n\t * This is optional.\n\n\t */\n\t@Prop() hintText?: string | Hint;\n\n\t/**\n\t * Used to include the ontario-hint-expander component for the textarea component.\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-textarea\n\t *   caption='{\n\t *     \"captionText\": \"What are your thoughts\",\n\t *     \"captionType\": \"heading\",\n\t *   }'\n\t * \t name: \"textarea\"\n\t *   hint-expander='{\n\t *     \"hint\": \"This is the hint expander\",\n\t *     \"content\": \"This is the content for the hint expander\"\n\t *   }'\n\t *   required=\"true\"\n\t * >\n\t * </ontario-textarea>\n\t */\n\t@Prop() hintExpander?: HintExpander | string;\n\n\t/**\n\t * The language of the component.\n\t * This is used for translations, and is by default set through event listeners checking for a language property from the header. If no language is passed, it will default to English.\n\t */\n\t@Prop({ mutable: true }) language?: Language;\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 textarea 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 textarea 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 textarea 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 textarea 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 textarea. 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 * Instantiate an InputCaption object for internal logic use\n\t */\n\t@State() private captionState: InputCaption;\n\n\t/**\n\t * Emitted when a input event 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 * Emitted when an error message is reported to the component.\n\t */\n\t@Event() inputErrorOccurred: EventEmitter<{ inputId: string; 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 textarea 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 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-textarea> ')\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\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@Watch('errorMessage')\n\tbroadcastInputErrorOccurredEvent() {\n\t\t// Emit event to notify anyone who wants to listen for errors occurring\n\t\tthis.inputErrorOccurred.emit({ inputId: this.getId(), errorMessage: this.errorMessage ?? '' });\n\t}\n\n\t/**\n\t * Function to handle textarea events and the information pertaining to the textarea to emit.\n\t */\n\tprivate handleEvent(event: Event, eventType: EventType) {\n\t\tconst input = event.target as HTMLTextAreaElement | null;\n\n\t\tthis.internals?.setFormValue?.(input?.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\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\tprivate getClass(): string {\n\t\treturn this.hintExpander ? `ontario-textarea ontario-textarea-hint-expander--true` : `ontario-textarea`;\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 textarea `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.elementId = this.elementId ?? uuid();\n\t\tthis.parseHintText();\n\t\tthis.parseHintExpander();\n\t\tthis.validateName(this.name);\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-textarea--error' : ''}`}>\n\t\t\t\t{this.captionState.getCaption(this.getId(), !!this.internalHintExpander)}\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\t\t\t\t<ErrorMessage message={this.errorMessage} error={error} />\n\t\t\t\t<textarea\n\t\t\t\t\taria-describedby={this.hintTextId}\n\t\t\t\t\tclass={this.getClass()}\n\t\t\t\t\tid={this.getId()}\n\t\t\t\t\tname={this.name}\n\t\t\t\t\tvalue={this.getValue()}\n\t\t\t\t\tonInput={(e) => this.handleEvent(e, EventType.Input)}\n\t\t\t\t\tonChange={(e) => this.handleEvent(e, EventType.Change)}\n\t\t\t\t\tonBlur={(e) => this.handleEvent(e, EventType.Blur)}\n\t\t\t\t\tonFocus={(e) => this.handleEvent(e, EventType.Focus)}\n\t\t\t\t\trequired={!!this.required}\n\t\t\t\t></textarea>\n\t\t\t\t{this.internalHintExpander && (\n\t\t\t\t\t<ontario-hint-expander\n\t\t\t\t\t\thint={this.internalHintExpander.hint}\n\t\t\t\t\t\tcontent={this.internalHintExpander.content}\n\t\t\t\t\t\thintContentType={this.internalHintExpander.hintContentType}\n\t\t\t\t\t\tinput-exists\n\t\t\t\t\t></ontario-hint-expander>\n\t\t\t\t)}\n\t\t\t</div>\n\t\t);\n\t}\n}\n"]}

package/dist/collection/components/ontario-textarea/test/ontario-textarea.spec.js

@@ -26,6 +26,10 @@ describe('ontario-textarea', () => {
 									(optional)
 								</span>
 							</label>
+							<div class="ontario-error-messaging ontario-error__hidden" role="alert">
+								<ontario-icon-alert-error></ontario-icon-alert-error>
+								<div class="ontario-error-messaging__content"></div>
+							</div>
 							<textarea class="ontario-textarea" id="ontario-textarea" name="ontario-textarea" value=""></textarea>
 						</div>
 					</mock:shadow-root>

package/dist/collection/components/ontario-textarea/test/ontario-textarea.spec.js.map

@@ -1 +1 @@
-{"version":3,"file":"ontario-textarea.spec.js","sourceRoot":"","sources":["../../../../src/components/ontario-textarea/test/ontario-textarea.spec.tsx"],"names":[],"mappings":"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","sourcesContent":["import { newSpecPage } from '@stencil/core/testing';\nimport { OntarioTextarea } from '../ontario-textarea';\n\ndescribe('ontario-textarea', () => {\n\tdescribe('snapshot', () => {\n\t\tit('should render the expected html', async () => {\n\t\t\tconst page = await newSpecPage({\n\t\t\t\tcomponents: [OntarioTextarea],\n\t\t\t\thtml: `<ontario-textarea name=\"ontario-textarea\" element-id=\"ontario-textarea\" caption='{\"captionText\": \"Ontario Textarea\"}'></ontario-textarea>`,\n\t\t\t});\n\n\t\t\texpect(page.root).toMatchSnapshot();\n\t\t});\n\t});\n\n\tdescribe('render', () => {\n\t\tit('should render a default textarea element', async () => {\n\t\t\tconst page = await newSpecPage({\n\t\t\t\tcomponents: [OntarioTextarea],\n\t\t\t\thtml: `<ontario-textarea name=\"ontario-textarea\" element-id=\"ontario-textarea\" caption='{\"captionText\": \"Ontario Textarea\"}'></ontario-textarea>`,\n\t\t\t});\n\t\t\texpect(page.root).toEqualHtml(`\n\t\t\t\t<ontario-textarea name=\"ontario-textarea\" element-id=\"ontario-textarea\" caption='{\"captionText\": \"Ontario Textarea\"}'>\n\t\t\t\t\t<mock:shadow-root>\n\t\t\t\t\t\t<div class=\"ontario-form-group\">\n\t\t\t\t\t\t\t<label htmlfor=\"ontario-textarea\" class=\"ontario-label\">\n\t\t\t\t\t\t\t\tOntario Textarea\n\t\t\t\t\t\t\t\t<span class=\"ontario-label__flag\">\n\t\t\t\t\t\t\t\t\t(optional)\n\t\t\t\t\t\t\t\t</span>\n\t\t\t\t\t\t\t</label>\n\t\t\t\t\t\t\t<textarea class=\"ontario-textarea\" id=\"ontario-textarea\" name=\"ontario-textarea\" value=\"\"></textarea>\n\t\t\t\t\t\t</div>\n\t\t\t\t\t</mock:shadow-root>\n\t\t\t\t</ontario-textarea>\n\t\t\t`);\n\t\t});\n\n\t\tit('should reflect attributes/props being set', async () => {\n\t\t\tconst page = await newSpecPage({\n\t\t\t\tcomponents: [OntarioTextarea],\n\t\t\t\thtml: `<ontario-textarea\n\t\t\t\t\tname=\"textarea-name\"\n\t\t\t\t\trequired=\"true\"\n\t\t\t\t\telement-id=\"textarea-id\"\n\t\t\t\t\tvalue=\"textarea value\"\n\t\t\t\t\tcaption='{\"captionText\": \"Ontario Textarea\"}'\n\t\t\t\t></ontario-textarea>`,\n\t\t\t});\n\n\t\t\texpect(page.rootInstance.name).toBe('textarea-name');\n\t\t\texpect(page.rootInstance.value).toBe('textarea value');\n\t\t\texpect(page.rootInstance.elementId).toBe('textarea-id');\n\t\t\texpect(page.rootInstance.captionState.captionText).toBe('Ontario Textarea');\n\t\t});\n\t});\n\n\tdescribe('events/methods', () => {\n\t\tit('should emit a keyboard event on change', async () => {\n\t\t\tconst page = await newSpecPage({\n\t\t\t\tcomponents: [OntarioTextarea],\n\t\t\t\thtml: `<ontario-textarea\n\t\t\t\t\tname=\"textarea-name\"\n\t\t\t\t\trequired=\"true\"\n\t\t\t\t\telement-id=\"textarea-id\"\n\t\t\t\t\tcaption=\"Ontario Textarea\"\n\t\t\t\t></ontario-textarea>`,\n\t\t\t});\n\n\t\t\tconst emitSpy = jest.fn();\n\t\t\tconst leftArrowKeyCode = 37;\n\t\t\tpage.doc.addEventListener('inputOnChange', emitSpy);\n\t\t\tpage.rootInstance.handleEvent(\n\t\t\t\tnew KeyboardEvent('keydown', {\n\t\t\t\t\tkeyCode: leftArrowKeyCode,\n\t\t\t\t}),\n\t\t\t\t'change',\n\t\t\t);\n\t\t\tawait page.waitForChanges();\n\t\t\texpect(emitSpy).toHaveBeenCalled();\n\t\t});\n\n\t\tit('should update the textarea value on a change event', async () => {\n\t\t\tconst page = await newSpecPage({\n\t\t\t\tcomponents: [OntarioTextarea],\n\t\t\t\thtml: `<ontario-textarea\n\t\t\t\t\tname=\"textarea-name\"\n\t\t\t\t\trequired=\"true\"\n\t\t\t\t\telement-id=\"textarea-id\"\n\t\t\t\t\tcaption=\"Ontario Textarea\"\n\t\t\t\t></ontario-textarea>`,\n\t\t\t});\n\n\t\t\tconst emitSpy = jest.fn();\n\t\t\tconst testValue = 'This is a test';\n\t\t\tconst leftArrowKeyCode = 37;\n\t\t\tpage.doc.addEventListener('inputOnChange', emitSpy);\n\t\t\tpage.rootInstance.value = testValue;\n\t\t\tpage.rootInstance.handleEvent(\n\t\t\t\tnew KeyboardEvent('keydown', {\n\t\t\t\t\tkeyCode: leftArrowKeyCode,\n\t\t\t\t}),\n\t\t\t\t'change',\n\t\t\t);\n\t\t\tawait page.waitForChanges();\n\t\t\texpect(page.rootInstance.value).toBe(testValue);\n\t\t});\n\n\t\tit('should return the textarea id when using the getId method', async () => {\n\t\t\tconst page = await newSpecPage({\n\t\t\t\tcomponents: [OntarioTextarea],\n\t\t\t\thtml: `<ontario-textarea\n\t\t\t\t\tname=\"textarea-name\"\n\t\t\t\t\trequired=\"true\"\n\t\t\t\t\telement-id=\"textarea-id\"\n\t\t\t\t\tcaption=\"Ontario Textarea\"\n\t\t\t\t></ontario-textarea>`,\n\t\t\t});\n\n\t\t\texpect(page.rootInstance.getId()).toEqual('textarea-id');\n\t\t});\n\t});\n});\n"]}
+{"version":3,"file":"ontario-textarea.spec.js","sourceRoot":"","sources":["../../../../src/components/ontario-textarea/test/ontario-textarea.spec.tsx"],"names":[],"mappings":"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","sourcesContent":["import { newSpecPage } from '@stencil/core/testing';\nimport { OntarioTextarea } from '../ontario-textarea';\n\ndescribe('ontario-textarea', () => {\n\tdescribe('snapshot', () => {\n\t\tit('should render the expected html', async () => {\n\t\t\tconst page = await newSpecPage({\n\t\t\t\tcomponents: [OntarioTextarea],\n\t\t\t\thtml: `<ontario-textarea name=\"ontario-textarea\" element-id=\"ontario-textarea\" caption='{\"captionText\": \"Ontario Textarea\"}'></ontario-textarea>`,\n\t\t\t});\n\t\t\texpect(page.root).toMatchSnapshot();\n\t\t});\n\t});\n\n\tdescribe('render', () => {\n\t\tit('should render a default textarea element', async () => {\n\t\t\tconst page = await newSpecPage({\n\t\t\t\tcomponents: [OntarioTextarea],\n\t\t\t\thtml: `<ontario-textarea name=\"ontario-textarea\" element-id=\"ontario-textarea\" caption='{\"captionText\": \"Ontario Textarea\"}'></ontario-textarea>`,\n\t\t\t});\n\t\t\texpect(page.root).toEqualHtml(`\n\t\t\t\t<ontario-textarea name=\"ontario-textarea\" element-id=\"ontario-textarea\" caption='{\"captionText\": \"Ontario Textarea\"}'>\n\t\t\t\t\t<mock:shadow-root>\n\t\t\t\t\t\t<div class=\"ontario-form-group\">\n\t\t\t\t\t\t\t<label htmlfor=\"ontario-textarea\" class=\"ontario-label\">\n\t\t\t\t\t\t\t\tOntario Textarea\n\t\t\t\t\t\t\t\t<span class=\"ontario-label__flag\">\n\t\t\t\t\t\t\t\t\t(optional)\n\t\t\t\t\t\t\t\t</span>\n\t\t\t\t\t\t\t</label>\n\t\t\t\t\t\t\t<div class=\"ontario-error-messaging ontario-error__hidden\" role=\"alert\">\n\t\t\t\t\t\t\t\t<ontario-icon-alert-error></ontario-icon-alert-error>\n\t\t\t\t\t\t\t\t<div class=\"ontario-error-messaging__content\"></div>\n\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t<textarea class=\"ontario-textarea\" id=\"ontario-textarea\" name=\"ontario-textarea\" value=\"\"></textarea>\n\t\t\t\t\t\t</div>\n\t\t\t\t\t</mock:shadow-root>\n\t\t\t\t</ontario-textarea>\n\t\t\t`);\n\t\t});\n\n\t\tit('should reflect attributes/props being set', async () => {\n\t\t\tconst page = await newSpecPage({\n\t\t\t\tcomponents: [OntarioTextarea],\n\t\t\t\thtml: `<ontario-textarea\n\t\t\t\t\tname=\"textarea-name\"\n\t\t\t\t\trequired=\"true\"\n\t\t\t\t\telement-id=\"textarea-id\"\n\t\t\t\t\tvalue=\"textarea value\"\n\t\t\t\t\tcaption='{\"captionText\": \"Ontario Textarea\"}'\n\t\t\t\t></ontario-textarea>`,\n\t\t\t});\n\n\t\t\texpect(page.rootInstance.name).toBe('textarea-name');\n\t\t\texpect(page.rootInstance.value).toBe('textarea value');\n\t\t\texpect(page.rootInstance.elementId).toBe('textarea-id');\n\t\t\texpect(page.rootInstance.captionState.captionText).toBe('Ontario Textarea');\n\t\t});\n\t});\n\n\tdescribe('events/methods', () => {\n\t\tit('should emit a keyboard event on change', async () => {\n\t\t\tconst page = await newSpecPage({\n\t\t\t\tcomponents: [OntarioTextarea],\n\t\t\t\thtml: `<ontario-textarea\n\t\t\t\t\tname=\"textarea-name\"\n\t\t\t\t\trequired=\"true\"\n\t\t\t\t\telement-id=\"textarea-id\"\n\t\t\t\t\tcaption=\"Ontario Textarea\"\n\t\t\t\t></ontario-textarea>`,\n\t\t\t});\n\n\t\t\tconst emitSpy = jest.fn();\n\t\t\tconst leftArrowKeyCode = 37;\n\t\t\tpage.doc.addEventListener('inputOnChange', emitSpy);\n\t\t\tpage.rootInstance.handleEvent(\n\t\t\t\tnew KeyboardEvent('keydown', {\n\t\t\t\t\tkeyCode: leftArrowKeyCode,\n\t\t\t\t}),\n\t\t\t\t'change',\n\t\t\t);\n\t\t\tawait page.waitForChanges();\n\t\t\texpect(emitSpy).toHaveBeenCalled();\n\t\t});\n\n\t\tit('should update the textarea value on a change event', async () => {\n\t\t\tconst page = await newSpecPage({\n\t\t\t\tcomponents: [OntarioTextarea],\n\t\t\t\thtml: `<ontario-textarea\n\t\t\t\t\tname=\"textarea-name\"\n\t\t\t\t\trequired=\"true\"\n\t\t\t\t\telement-id=\"textarea-id\"\n\t\t\t\t\tcaption=\"Ontario Textarea\"\n\t\t\t\t></ontario-textarea>`,\n\t\t\t});\n\n\t\t\tconst emitSpy = jest.fn();\n\t\t\tconst testValue = 'This is a test';\n\t\t\tconst leftArrowKeyCode = 37;\n\t\t\tpage.doc.addEventListener('inputOnChange', emitSpy);\n\t\t\tpage.rootInstance.value = testValue;\n\t\t\tpage.rootInstance.handleEvent(\n\t\t\t\tnew KeyboardEvent('keydown', {\n\t\t\t\t\tkeyCode: leftArrowKeyCode,\n\t\t\t\t}),\n\t\t\t\t'change',\n\t\t\t);\n\t\t\tawait page.waitForChanges();\n\t\t\texpect(page.rootInstance.value).toBe(testValue);\n\t\t});\n\n\t\tit('should return the textarea id when using the getId method', async () => {\n\t\t\tconst page = await newSpecPage({\n\t\t\t\tcomponents: [OntarioTextarea],\n\t\t\t\thtml: `<ontario-textarea\n\t\t\t\t\tname=\"textarea-name\"\n\t\t\t\t\trequired=\"true\"\n\t\t\t\t\telement-id=\"textarea-id\"\n\t\t\t\t\tcaption=\"Ontario Textarea\"\n\t\t\t\t></ontario-textarea>`,\n\t\t\t});\n\n\t\t\texpect(page.rootInstance.getId()).toEqual('textarea-id');\n\t\t});\n\t});\n});\n"]}

package/dist/collection/utils/components/callout-aside/callout-aside-helpers.js

@@ -38,8 +38,8 @@ const generateHeading = (type, headingType, headingContentType, headingContent)
 };
 export const generateCalloutAside = (
 	type,
-	headingType,
 	headingContentType,
+	headingType,
 	headingContent,
 	content,
 	highlightColour,
@@ -49,14 +49,14 @@ export const generateCalloutAside = (
 		? h(
 				'div',
 				{ class: generateClasses(type, highlightColour) },
-				generateHeading(type, headingType, headingContentType, headingContent),
+				headingContent ? generateHeading(type, headingType, headingContentType, headingContent) : '',
 				contentIsString ? h('p', null, content) : h('slot', null),
 		  )
 		: h(
 				'aside',
 				{ class: generateClasses(type, highlightColour) },
-				generateHeading(type, headingType, headingContentType, headingContent),
-				contentIsString ? h('p', null, content) : h('slot', null),
+				headingContent ? generateHeading(type, headingType, headingContentType, headingContent) : '',
+				contentIsString ? (content ? h('p', null, content) : '') : h('slot', null),
 		  );
 };
 //# sourceMappingURL=callout-aside-helpers.js.map

package/dist/collection/utils/components/callout-aside/callout-aside-helpers.js.map

@@ -1 +1 @@
-{"version":3,"file":"callout-aside-helpers.js","sourceRoot":"","sources":["../../../../src/utils/components/callout-aside/callout-aside-helpers.tsx"],"names":[],"mappings":"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","sourcesContent":["import { h } from '@stencil/core';\nimport {\n\tCalloutAsideType,\n\tHeadingLevel,\n\tHeadingLevelOptions,\n\tHeadingContentType,\n\tHighlightColours,\n\tHighlightColourOptions,\n} from './callout-aside.interface';\n\nexport const isValidHighlightColour = (colour: HighlightColourOptions): colour is HighlightColourOptions =>\n\tHighlightColours.includes(colour);\n\nexport const isValidHeadingLevel = (level: HeadingLevelOptions): level is HeadingLevelOptions =>\n\tHeadingLevel.includes(level);\n\nconst generateClasses = (type: CalloutAsideType, highlightColor?: HighlightColourOptions) => {\n\tconst componentType = type === 'callout' ? `ontario-callout` : `ontario-aside`;\n\tconst borderColor = `ontario-border-highlight--${highlightColor}`;\n\n\treturn highlightColor ? `${componentType} ${borderColor}` : `${componentType}`;\n};\n\nconst generateHeading = (\n\ttype: CalloutAsideType,\n\theadingType: HeadingLevelOptions,\n\theadingContentType: HeadingContentType,\n\theadingContent: string,\n) => {\n\tconst headingContentIsHTML = headingContentType === 'html';\n\n\tswitch (headingType) {\n\t\tcase 'h2':\n\t\t\treturn headingContentIsHTML ? (\n\t\t\t\t<h2 class={`ontario-${type}__title ontario-h5`} innerHTML={headingContent}></h2>\n\t\t\t) : (\n\t\t\t\t<h2 class={`ontario-${type}__title ontario-h5`}>{headingContent}</h2>\n\t\t\t);\n\t\tcase 'h3':\n\t\t\treturn headingContentIsHTML ? (\n\t\t\t\t<h3 class={`ontario-${type}__title ontario-h5`} innerHTML={headingContent}></h3>\n\t\t\t) : (\n\t\t\t\t<h3 class={`ontario-${type}__title ontario-h5`}>{headingContent}</h3>\n\t\t\t);\n\t\tcase 'h4':\n\t\t\treturn headingContentIsHTML ? (\n\t\t\t\t<h4 class={`ontario-${type}__title ontario-h5`} innerHTML={headingContent}></h4>\n\t\t\t) : (\n\t\t\t\t<h4 class={`ontario-${type}__title ontario-h5`}>{headingContent}</h4>\n\t\t\t);\n\t\tcase 'h5':\n\t\t\treturn headingContentIsHTML ? (\n\t\t\t\t<h5 class={`ontario-${type}__title ontario-h5`} innerHTML={headingContent}></h5>\n\t\t\t) : (\n\t\t\t\t<h5 class={`ontario-${type}__title ontario-h5`}>{headingContent}</h5>\n\t\t\t);\n\t\tcase 'h6':\n\t\t\treturn headingContentIsHTML ? (\n\t\t\t\t<h6 class={`ontario-${type}__title ontario-h5`} innerHTML={headingContent}></h6>\n\t\t\t) : (\n\t\t\t\t<h6 class={`ontario-${type}__title ontario-h5`}>{headingContent}</h6>\n\t\t\t);\n\t\tdefault:\n\t\t\treturn headingContentIsHTML ? (\n\t\t\t\t<h2 class={`ontario-${type}__title ontario-h5`} innerHTML={headingContent}></h2>\n\t\t\t) : (\n\t\t\t\t<h2 class={`ontario-${type}__title ontario-h5`}>{headingContent}</h2>\n\t\t\t);\n\t}\n};\n\nexport const generateCalloutAside = (\n\ttype: CalloutAsideType,\n\theadingType: HeadingLevelOptions,\n\theadingContentType: HeadingContentType,\n\theadingContent: string,\n\tcontent?: string | HTMLElement,\n\thighlightColour?: HighlightColourOptions,\n) => {\n\tconst contentIsString = typeof content === 'string';\n\n\treturn type === 'callout' ? (\n\t\t<div class={generateClasses(type, highlightColour)}>\n\t\t\t{generateHeading(type, headingType, headingContentType, headingContent)}\n\t\t\t{contentIsString ? <p>{content}</p> : <slot />}\n\t\t</div>\n\t) : (\n\t\t<aside class={generateClasses(type, highlightColour)}>\n\t\t\t{generateHeading(type, headingType, headingContentType, headingContent)}\n\t\t\t{contentIsString ? <p>{content}</p> : <slot />}\n\t\t</aside>\n\t);\n};\n"]}
+{"version":3,"file":"callout-aside-helpers.js","sourceRoot":"","sources":["../../../../src/utils/components/callout-aside/callout-aside-helpers.tsx"],"names":[],"mappings":"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","sourcesContent":["import { h } from '@stencil/core';\nimport {\n\tCalloutAsideType,\n\tHeadingLevel,\n\tHeadingLevelOptions,\n\tHeadingContentType,\n\tHighlightColours,\n\tHighlightColourOptions,\n} from './callout-aside.interface';\n\nexport const isValidHighlightColour = (colour: HighlightColourOptions): colour is HighlightColourOptions =>\n\tHighlightColours.includes(colour);\n\nexport const isValidHeadingLevel = (level: HeadingLevelOptions): level is HeadingLevelOptions =>\n\tHeadingLevel.includes(level);\n\nconst generateClasses = (type: CalloutAsideType, highlightColor?: HighlightColourOptions) => {\n\tconst componentType = type === 'callout' ? `ontario-callout` : `ontario-aside`;\n\tconst borderColor = `ontario-border-highlight--${highlightColor}`;\n\n\treturn highlightColor ? `${componentType} ${borderColor}` : `${componentType}`;\n};\n\nconst generateHeading = (\n\ttype: CalloutAsideType,\n\theadingType: HeadingLevelOptions | undefined,\n\theadingContentType: HeadingContentType,\n\theadingContent: string,\n) => {\n\tconst headingContentIsHTML = headingContentType === 'html';\n\n\tswitch (headingType) {\n\t\tcase 'h2':\n\t\t\treturn headingContentIsHTML ? (\n\t\t\t\t<h2 class={`ontario-${type}__title ontario-h5`} innerHTML={headingContent}></h2>\n\t\t\t) : (\n\t\t\t\t<h2 class={`ontario-${type}__title ontario-h5`}>{headingContent}</h2>\n\t\t\t);\n\t\tcase 'h3':\n\t\t\treturn headingContentIsHTML ? (\n\t\t\t\t<h3 class={`ontario-${type}__title ontario-h5`} innerHTML={headingContent}></h3>\n\t\t\t) : (\n\t\t\t\t<h3 class={`ontario-${type}__title ontario-h5`}>{headingContent}</h3>\n\t\t\t);\n\t\tcase 'h4':\n\t\t\treturn headingContentIsHTML ? (\n\t\t\t\t<h4 class={`ontario-${type}__title ontario-h5`} innerHTML={headingContent}></h4>\n\t\t\t) : (\n\t\t\t\t<h4 class={`ontario-${type}__title ontario-h5`}>{headingContent}</h4>\n\t\t\t);\n\t\tcase 'h5':\n\t\t\treturn headingContentIsHTML ? (\n\t\t\t\t<h5 class={`ontario-${type}__title ontario-h5`} innerHTML={headingContent}></h5>\n\t\t\t) : (\n\t\t\t\t<h5 class={`ontario-${type}__title ontario-h5`}>{headingContent}</h5>\n\t\t\t);\n\t\tcase 'h6':\n\t\t\treturn headingContentIsHTML ? (\n\t\t\t\t<h6 class={`ontario-${type}__title ontario-h5`} innerHTML={headingContent}></h6>\n\t\t\t) : (\n\t\t\t\t<h6 class={`ontario-${type}__title ontario-h5`}>{headingContent}</h6>\n\t\t\t);\n\t\tdefault:\n\t\t\treturn headingContentIsHTML ? (\n\t\t\t\t<h2 class={`ontario-${type}__title ontario-h5`} innerHTML={headingContent}></h2>\n\t\t\t) : (\n\t\t\t\t<h2 class={`ontario-${type}__title ontario-h5`}>{headingContent}</h2>\n\t\t\t);\n\t}\n};\n\nexport const generateCalloutAside = (\n\ttype: CalloutAsideType,\n\theadingContentType: HeadingContentType,\n\theadingType?: HeadingLevelOptions,\n\theadingContent?: string,\n\tcontent?: string | HTMLElement,\n\thighlightColour?: HighlightColourOptions,\n) => {\n\tconst contentIsString = typeof content === 'string';\n\n\treturn type === 'callout' ? (\n\t\t<div class={generateClasses(type, highlightColour)}>\n\t\t\t{headingContent ? generateHeading(type, headingType, headingContentType, headingContent) : ''}\n\t\t\t{contentIsString ? <p>{content}</p> : <slot />}\n\t\t</div>\n\t) : (\n\t\t<aside class={generateClasses(type, highlightColour)}>\n\t\t\t{headingContent ? generateHeading(type, headingType, headingContentType, headingContent) : ''}\n\t\t\t{contentIsString ? content ? <p>{content}</p> : '' : <slot />}\n\t\t</aside>\n\t);\n};\n"]}

package/dist/collection/utils/components/callout-aside/callout-aside.interface.js.map

@@ -1 +1 @@
-{"version":3,"file":"callout-aside.interface.js","sourceRoot":"","sources":["../../../../src/utils/components/callout-aside/callout-aside.interface.ts"],"names":[],"mappings":"AAEA,MAAM,CAAC,MAAM,YAAY,GAAG,CAAC,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,CAAU,CAAC;AAIpE,MAAM,CAAC,MAAM,gBAAgB,GAAG,CAAC,MAAM,EAAE,MAAM,EAAE,QAAQ,EAAE,OAAO,EAAE,OAAO,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,EAAE,QAAQ,CAAU,CAAC;AAQvH,MAAM,CAAC,MAAM,mBAAmB,GAAG,CAAC,QAAQ,EAAE,MAAM,CAAU,CAAC","sourcesContent":["import { Base } from '../../common/common.interface';\n\nexport const HeadingLevel = ['h2', 'h3', 'h4', 'h5', 'h6'] as const;\n\nexport type HeadingLevelOptions = (typeof HeadingLevel)[number];\n\nexport const HighlightColours = ['teal', 'gold', 'yellow', 'taupe', 'green', 'lime', 'sky', 'blue', 'purple'] as const;\n\nexport type HighlightColourOptions = (typeof HighlightColours)[number];\n\nexport type CalloutAsideType = 'callout' | 'aside';\n\nexport type HeadingContentType = 'string' | 'html';\n\nexport const HeadingContentTypes = ['string', 'html'] as const;\n\nexport interface CalloutAside extends Base {\n\t/**\n\t * The heading level of the callout/aside heading.\n\t */\n\theadingType: HeadingLevelOptions;\n\n\t/**\n\t * The type of the heading content. If no prop is passed, it will default to string.\n\t */\n\theadingContentType: HeadingContentType;\n\n\t/**\n\t * Text or HTML to be displayed as the heading of the callout/aside. If the heading content should be displayed as HTML, the `headingContentType` needs to be set to `html`.\n\t */\n\theadingContent: string;\n\n\t/**\n\t * Optional text to be displayed as the content for the callout/aside component. If a string is passed, it will automatically be nested in a paragraph tag.\n\t *\n\t * HTML content can also be passed as the child/children of the callout/aside component if additional/different elements for the content are needed.\n\t */\n\tcontent?: string | HTMLElement;\n\n\t/**\n\t * Optional prop to choose the border colour of the callout/aside. If none is passed, the default colour will be teal.\n\t */\n\thighlightColor?: HighlightColourOptions | undefined;\n}\n"]}
+{"version":3,"file":"callout-aside.interface.js","sourceRoot":"","sources":["../../../../src/utils/components/callout-aside/callout-aside.interface.ts"],"names":[],"mappings":"AAEA,MAAM,CAAC,MAAM,YAAY,GAAG,CAAC,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,CAAU,CAAC;AAIpE,MAAM,CAAC,MAAM,gBAAgB,GAAG,CAAC,MAAM,EAAE,MAAM,EAAE,QAAQ,EAAE,OAAO,EAAE,OAAO,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,EAAE,QAAQ,CAAU,CAAC;AAQvH,MAAM,CAAC,MAAM,mBAAmB,GAAG,CAAC,QAAQ,EAAE,MAAM,CAAU,CAAC","sourcesContent":["import { Base } from '../../common/common.interface';\n\nexport const HeadingLevel = ['h2', 'h3', 'h4', 'h5', 'h6'] as const;\n\nexport type HeadingLevelOptions = (typeof HeadingLevel)[number];\n\nexport const HighlightColours = ['teal', 'gold', 'yellow', 'taupe', 'green', 'lime', 'sky', 'blue', 'purple'] as const;\n\nexport type HighlightColourOptions = (typeof HighlightColours)[number];\n\nexport type CalloutAsideType = 'callout' | 'aside';\n\nexport type HeadingContentType = 'string' | 'html';\n\nexport const HeadingContentTypes = ['string', 'html'] as const;\n\nexport interface CalloutAside extends Base {\n\t/**\n\t * The heading level of the callout/aside heading.\n\t */\n\theadingType?: HeadingLevelOptions;\n\n\t/**\n\t * The type of the heading content. If no prop is passed, it will default to string.\n\t */\n\theadingContentType: HeadingContentType;\n\n\t/**\n\t * Text or HTML to be displayed as the heading of the callout/aside. If the heading content should be displayed as HTML, the `headingContentType` needs to be set to `html`.\n\t */\n\theadingContent?: string;\n\n\t/**\n\t * Optional text to be displayed as the content for the callout/aside component. If a string is passed, it will automatically be nested in a paragraph tag.\n\t *\n\t * HTML content can also be passed as the child/children of the callout/aside component if additional/different elements for the content are needed.\n\t */\n\tcontent?: string | HTMLElement;\n\n\t/**\n\t * Optional prop to choose the border colour of the callout/aside. If none is passed, the default colour will be teal.\n\t */\n\thighlightColor?: HighlightColourOptions | undefined;\n}\n"]}

package/dist/components/callout-aside-helpers.js

@@ -40,20 +40,20 @@ const generateHeading = (type, headingType, headingContentType, headingContent)
 				: h('h2', { class: `ontario-${type}__title ontario-h5` }, headingContent);
 	}
 };
-const generateCalloutAside = (type, headingType, headingContentType, headingContent, content, highlightColour) => {
+const generateCalloutAside = (type, headingContentType, headingType, headingContent, content, highlightColour) => {
 	const contentIsString = typeof content === 'string';
 	return type === 'callout'
 		? h(
 				'div',
 				{ class: generateClasses(type, highlightColour) },
-				generateHeading(type, headingType, headingContentType, headingContent),
+				headingContent ? generateHeading(type, headingType, headingContentType, headingContent) : '',
 				contentIsString ? h('p', null, content) : h('slot', null),
 		  )
 		: h(
 				'aside',
 				{ class: generateClasses(type, highlightColour) },
-				generateHeading(type, headingType, headingContentType, headingContent),
-				contentIsString ? h('p', null, content) : h('slot', null),
+				headingContent ? generateHeading(type, headingType, headingContentType, headingContent) : '',
+				contentIsString ? (content ? h('p', null, content) : '') : h('slot', null),
 		  );
 };
 

package/dist/components/callout-aside-helpers.js.map

@@ -1 +1 @@
-{"file":"callout-aside-helpers.js","mappings":"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","names":[],"sources":["src/utils/components/callout-aside/callout-aside.interface.ts","src/utils/components/callout-aside/callout-aside-helpers.tsx"],"sourcesContent":["import { Base } from '../../common/common.interface';\n\nexport const HeadingLevel = ['h2', 'h3', 'h4', 'h5', 'h6'] as const;\n\nexport type HeadingLevelOptions = (typeof HeadingLevel)[number];\n\nexport const HighlightColours = ['teal', 'gold', 'yellow', 'taupe', 'green', 'lime', 'sky', 'blue', 'purple'] as const;\n\nexport type HighlightColourOptions = (typeof HighlightColours)[number];\n\nexport type CalloutAsideType = 'callout' | 'aside';\n\nexport type HeadingContentType = 'string' | 'html';\n\nexport const HeadingContentTypes = ['string', 'html'] as const;\n\nexport interface CalloutAside extends Base {\n\t/**\n\t * The heading level of the callout/aside heading.\n\t */\n\theadingType: HeadingLevelOptions;\n\n\t/**\n\t * The type of the heading content. If no prop is passed, it will default to string.\n\t */\n\theadingContentType: HeadingContentType;\n\n\t/**\n\t * Text or HTML to be displayed as the heading of the callout/aside. If the heading content should be displayed as HTML, the `headingContentType` needs to be set to `html`.\n\t */\n\theadingContent: string;\n\n\t/**\n\t * Optional text to be displayed as the content for the callout/aside component. If a string is passed, it will automatically be nested in a paragraph tag.\n\t *\n\t * HTML content can also be passed as the child/children of the callout/aside component if additional/different elements for the content are needed.\n\t */\n\tcontent?: string | HTMLElement;\n\n\t/**\n\t * Optional prop to choose the border colour of the callout/aside. If none is passed, the default colour will be teal.\n\t */\n\thighlightColor?: HighlightColourOptions | undefined;\n}\n","import { h } from '@stencil/core';\nimport {\n\tCalloutAsideType,\n\tHeadingLevel,\n\tHeadingLevelOptions,\n\tHeadingContentType,\n\tHighlightColours,\n\tHighlightColourOptions,\n} from './callout-aside.interface';\n\nexport const isValidHighlightColour = (colour: HighlightColourOptions): colour is HighlightColourOptions =>\n\tHighlightColours.includes(colour);\n\nexport const isValidHeadingLevel = (level: HeadingLevelOptions): level is HeadingLevelOptions =>\n\tHeadingLevel.includes(level);\n\nconst generateClasses = (type: CalloutAsideType, highlightColor?: HighlightColourOptions) => {\n\tconst componentType = type === 'callout' ? `ontario-callout` : `ontario-aside`;\n\tconst borderColor = `ontario-border-highlight--${highlightColor}`;\n\n\treturn highlightColor ? `${componentType} ${borderColor}` : `${componentType}`;\n};\n\nconst generateHeading = (\n\ttype: CalloutAsideType,\n\theadingType: HeadingLevelOptions,\n\theadingContentType: HeadingContentType,\n\theadingContent: string,\n) => {\n\tconst headingContentIsHTML = headingContentType === 'html';\n\n\tswitch (headingType) {\n\t\tcase 'h2':\n\t\t\treturn headingContentIsHTML ? (\n\t\t\t\t<h2 class={`ontario-${type}__title ontario-h5`} innerHTML={headingContent}></h2>\n\t\t\t) : (\n\t\t\t\t<h2 class={`ontario-${type}__title ontario-h5`}>{headingContent}</h2>\n\t\t\t);\n\t\tcase 'h3':\n\t\t\treturn headingContentIsHTML ? (\n\t\t\t\t<h3 class={`ontario-${type}__title ontario-h5`} innerHTML={headingContent}></h3>\n\t\t\t) : (\n\t\t\t\t<h3 class={`ontario-${type}__title ontario-h5`}>{headingContent}</h3>\n\t\t\t);\n\t\tcase 'h4':\n\t\t\treturn headingContentIsHTML ? (\n\t\t\t\t<h4 class={`ontario-${type}__title ontario-h5`} innerHTML={headingContent}></h4>\n\t\t\t) : (\n\t\t\t\t<h4 class={`ontario-${type}__title ontario-h5`}>{headingContent}</h4>\n\t\t\t);\n\t\tcase 'h5':\n\t\t\treturn headingContentIsHTML ? (\n\t\t\t\t<h5 class={`ontario-${type}__title ontario-h5`} innerHTML={headingContent}></h5>\n\t\t\t) : (\n\t\t\t\t<h5 class={`ontario-${type}__title ontario-h5`}>{headingContent}</h5>\n\t\t\t);\n\t\tcase 'h6':\n\t\t\treturn headingContentIsHTML ? (\n\t\t\t\t<h6 class={`ontario-${type}__title ontario-h5`} innerHTML={headingContent}></h6>\n\t\t\t) : (\n\t\t\t\t<h6 class={`ontario-${type}__title ontario-h5`}>{headingContent}</h6>\n\t\t\t);\n\t\tdefault:\n\t\t\treturn headingContentIsHTML ? (\n\t\t\t\t<h2 class={`ontario-${type}__title ontario-h5`} innerHTML={headingContent}></h2>\n\t\t\t) : (\n\t\t\t\t<h2 class={`ontario-${type}__title ontario-h5`}>{headingContent}</h2>\n\t\t\t);\n\t}\n};\n\nexport const generateCalloutAside = (\n\ttype: CalloutAsideType,\n\theadingType: HeadingLevelOptions,\n\theadingContentType: HeadingContentType,\n\theadingContent: string,\n\tcontent?: string | HTMLElement,\n\thighlightColour?: HighlightColourOptions,\n) => {\n\tconst contentIsString = typeof content === 'string';\n\n\treturn type === 'callout' ? (\n\t\t<div class={generateClasses(type, highlightColour)}>\n\t\t\t{generateHeading(type, headingType, headingContentType, headingContent)}\n\t\t\t{contentIsString ? <p>{content}</p> : <slot />}\n\t\t</div>\n\t) : (\n\t\t<aside class={generateClasses(type, highlightColour)}>\n\t\t\t{generateHeading(type, headingType, headingContentType, headingContent)}\n\t\t\t{contentIsString ? <p>{content}</p> : <slot />}\n\t\t</aside>\n\t);\n};\n"],"version":3}
+{"file":"callout-aside-helpers.js","mappings":"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","names":[],"sources":["src/utils/components/callout-aside/callout-aside.interface.ts","src/utils/components/callout-aside/callout-aside-helpers.tsx"],"sourcesContent":["import { Base } from '../../common/common.interface';\n\nexport const HeadingLevel = ['h2', 'h3', 'h4', 'h5', 'h6'] as const;\n\nexport type HeadingLevelOptions = (typeof HeadingLevel)[number];\n\nexport const HighlightColours = ['teal', 'gold', 'yellow', 'taupe', 'green', 'lime', 'sky', 'blue', 'purple'] as const;\n\nexport type HighlightColourOptions = (typeof HighlightColours)[number];\n\nexport type CalloutAsideType = 'callout' | 'aside';\n\nexport type HeadingContentType = 'string' | 'html';\n\nexport const HeadingContentTypes = ['string', 'html'] as const;\n\nexport interface CalloutAside extends Base {\n\t/**\n\t * The heading level of the callout/aside heading.\n\t */\n\theadingType?: HeadingLevelOptions;\n\n\t/**\n\t * The type of the heading content. If no prop is passed, it will default to string.\n\t */\n\theadingContentType: HeadingContentType;\n\n\t/**\n\t * Text or HTML to be displayed as the heading of the callout/aside. If the heading content should be displayed as HTML, the `headingContentType` needs to be set to `html`.\n\t */\n\theadingContent?: string;\n\n\t/**\n\t * Optional text to be displayed as the content for the callout/aside component. If a string is passed, it will automatically be nested in a paragraph tag.\n\t *\n\t * HTML content can also be passed as the child/children of the callout/aside component if additional/different elements for the content are needed.\n\t */\n\tcontent?: string | HTMLElement;\n\n\t/**\n\t * Optional prop to choose the border colour of the callout/aside. If none is passed, the default colour will be teal.\n\t */\n\thighlightColor?: HighlightColourOptions | undefined;\n}\n","import { h } from '@stencil/core';\nimport {\n\tCalloutAsideType,\n\tHeadingLevel,\n\tHeadingLevelOptions,\n\tHeadingContentType,\n\tHighlightColours,\n\tHighlightColourOptions,\n} from './callout-aside.interface';\n\nexport const isValidHighlightColour = (colour: HighlightColourOptions): colour is HighlightColourOptions =>\n\tHighlightColours.includes(colour);\n\nexport const isValidHeadingLevel = (level: HeadingLevelOptions): level is HeadingLevelOptions =>\n\tHeadingLevel.includes(level);\n\nconst generateClasses = (type: CalloutAsideType, highlightColor?: HighlightColourOptions) => {\n\tconst componentType = type === 'callout' ? `ontario-callout` : `ontario-aside`;\n\tconst borderColor = `ontario-border-highlight--${highlightColor}`;\n\n\treturn highlightColor ? `${componentType} ${borderColor}` : `${componentType}`;\n};\n\nconst generateHeading = (\n\ttype: CalloutAsideType,\n\theadingType: HeadingLevelOptions | undefined,\n\theadingContentType: HeadingContentType,\n\theadingContent: string,\n) => {\n\tconst headingContentIsHTML = headingContentType === 'html';\n\n\tswitch (headingType) {\n\t\tcase 'h2':\n\t\t\treturn headingContentIsHTML ? (\n\t\t\t\t<h2 class={`ontario-${type}__title ontario-h5`} innerHTML={headingContent}></h2>\n\t\t\t) : (\n\t\t\t\t<h2 class={`ontario-${type}__title ontario-h5`}>{headingContent}</h2>\n\t\t\t);\n\t\tcase 'h3':\n\t\t\treturn headingContentIsHTML ? (\n\t\t\t\t<h3 class={`ontario-${type}__title ontario-h5`} innerHTML={headingContent}></h3>\n\t\t\t) : (\n\t\t\t\t<h3 class={`ontario-${type}__title ontario-h5`}>{headingContent}</h3>\n\t\t\t);\n\t\tcase 'h4':\n\t\t\treturn headingContentIsHTML ? (\n\t\t\t\t<h4 class={`ontario-${type}__title ontario-h5`} innerHTML={headingContent}></h4>\n\t\t\t) : (\n\t\t\t\t<h4 class={`ontario-${type}__title ontario-h5`}>{headingContent}</h4>\n\t\t\t);\n\t\tcase 'h5':\n\t\t\treturn headingContentIsHTML ? (\n\t\t\t\t<h5 class={`ontario-${type}__title ontario-h5`} innerHTML={headingContent}></h5>\n\t\t\t) : (\n\t\t\t\t<h5 class={`ontario-${type}__title ontario-h5`}>{headingContent}</h5>\n\t\t\t);\n\t\tcase 'h6':\n\t\t\treturn headingContentIsHTML ? (\n\t\t\t\t<h6 class={`ontario-${type}__title ontario-h5`} innerHTML={headingContent}></h6>\n\t\t\t) : (\n\t\t\t\t<h6 class={`ontario-${type}__title ontario-h5`}>{headingContent}</h6>\n\t\t\t);\n\t\tdefault:\n\t\t\treturn headingContentIsHTML ? (\n\t\t\t\t<h2 class={`ontario-${type}__title ontario-h5`} innerHTML={headingContent}></h2>\n\t\t\t) : (\n\t\t\t\t<h2 class={`ontario-${type}__title ontario-h5`}>{headingContent}</h2>\n\t\t\t);\n\t}\n};\n\nexport const generateCalloutAside = (\n\ttype: CalloutAsideType,\n\theadingContentType: HeadingContentType,\n\theadingType?: HeadingLevelOptions,\n\theadingContent?: string,\n\tcontent?: string | HTMLElement,\n\thighlightColour?: HighlightColourOptions,\n) => {\n\tconst contentIsString = typeof content === 'string';\n\n\treturn type === 'callout' ? (\n\t\t<div class={generateClasses(type, highlightColour)}>\n\t\t\t{headingContent ? generateHeading(type, headingType, headingContentType, headingContent) : ''}\n\t\t\t{contentIsString ? <p>{content}</p> : <slot />}\n\t\t</div>\n\t) : (\n\t\t<aside class={generateClasses(type, highlightColour)}>\n\t\t\t{headingContent ? generateHeading(type, headingType, headingContentType, headingContent) : ''}\n\t\t\t{contentIsString ? content ? <p>{content}</p> : '' : <slot />}\n\t\t</aside>\n\t);\n};\n"],"version":3}

package/dist/components/error-message.js

@@ -1,6 +1,329 @@
 import { h } from '@stencil/core/internal/client';
+import { C as CaptionTypes } from './input-caption.types.js';
+import { C as ConsoleMessageClass } from './console-message.js';
 import { i as isEmpty } from './utils.js';
 
+var MessageContentType;
+(function (MessageContentType) {
+	MessageContentType['UndefinedCaptionObject'] = 'undefinedCaptionObject';
+	MessageContentType['UndefinedCaptionText'] = 'undefinedCaption';
+	MessageContentType['EmptyCaptionText'] = 'emptyCaption';
+	MessageContentType['UndefinedCaptionType'] = 'undefinedCaptionType';
+	MessageContentType['IncorrectCaptionType'] = 'incorrectCaptionType';
+})(MessageContentType || (MessageContentType = {}));
+
+class InputCaption {
+	/**
+	 * Set the class members
+	 * Output a console warning message if the provided `label` type is incorrect
+	 * @param caption object containing the essential data to configure the input label
+	 */
+	constructor(componentTagName, caption, translations, language, isLegend = false, required = false) {
+		/**
+		 * The type of caption to render.
+		 */
+		this.captionType = 'default';
+		/**
+		 * Determine whether the input field is required.
+		 */
+		this.required = false;
+		/**
+		 * Determine whether the rendered element is a `<label>` or `<legend>`.
+		 */
+		this.isLegend = false;
+		this.language = 'en';
+		/**
+		 * Return the `<label>` element for text inputs
+		 * @param captionFor Set the `htmlFor` attribute
+		 * @returns element containing the caption for the input
+		 */
+		this.getCaption = (captionFor, hasHintExpander = false) => {
+			const captionText = this.captionText && this.captionText.toLowerCase();
+			const captionContent = this.isLegend
+				? h(
+						'legend',
+						{ class: this.getClass() },
+						this.captionType === 'heading' ? h('h1', null, this.captionText) : this.captionText,
+						this.getRequiredFlagElement(),
+						hasHintExpander && this.getHintExpanderAccessibilityText(captionText, false),
+				  )
+				: h(
+						'label',
+						{ htmlFor: captionFor, class: this.getClass() },
+						this.captionText,
+						this.getRequiredFlagElement(),
+						hasHintExpander && this.getHintExpanderAccessibilityText(captionText, false),
+				  );
+			// with `this.captionType` already set to one of the enum values, the comparison no longer needs the `toLowerCase()` transform
+			return this.captionType === 'heading' && !this.isLegend ? h('h1', null, captionContent) : captionContent;
+		};
+		let captionObject;
+		if (typeof caption === 'string') {
+			try {
+				captionObject = JSON.parse(caption);
+			} catch (_a) {
+				captionObject = { captionText: caption, captionType: 'default' };
+			}
+		} else {
+			captionObject = caption;
+		}
+		this.componentTagName = componentTagName.toLocaleLowerCase();
+		this.captionText = captionObject === null || captionObject === void 0 ? void 0 : captionObject.captionText;
+		this.captionType =
+			((captionObject === null || captionObject === void 0 ? void 0 : captionObject.captionType) &&
+				CaptionTypes.find((type) => {
+					var _a;
+					return type === ((_a = captionObject.captionType) === null || _a === void 0 ? void 0 : _a.toLowerCase());
+				})) ||
+			'default';
+		this.required = required;
+		this.isLegend = isLegend;
+		this.translations = translations;
+		this.language = language;
+		this.validateCaption(this);
+	}
+	getHintExpanderAccessibilityText(captionText, hasHintExpanderOnOption = false) {
+		const multipleOptionsMessage = h(
+			'span',
+			{ class: 'ontario-show-for-sr' },
+			this.translations.accessibility.moreInfo[this.language],
+			' "',
+			captionText.toLowerCase(),
+			'"',
+			' ',
+			this.translations.accessibility.checkboxHintExpander[this.language],
+		);
+		const singleOptionMessage = h(
+			'span',
+			{ class: 'ontario-show-for-sr' },
+			this.translations.accessibility.moreInfo[this.language],
+			' "',
+			captionText.toLowerCase(),
+			'"',
+			' ',
+			this.translations.accessibility.singleHintExpander[this.language],
+		);
+		return this.componentTagName === 'ontario-checkboxes'
+			? !hasHintExpanderOnOption
+				? multipleOptionsMessage
+				: singleOptionMessage
+			: singleOptionMessage;
+	}
+	/**
+	 * Determines which flag text to use between `required` and `optional`
+	 * @returns `required` or `optional` flag text
+	 */
+	getRequiredFlagText() {
+		return this.required
+			? this.translations && `(${this.translations.required[this.language]})`
+			: this.translations && `(${this.translations.optional[this.language]})`;
+	}
+	/**
+	 * Get the HTML for the required/optional flag.
+	 * @returns CSS class for the label/legend.
+	 */
+	getRequiredFlagElement() {
+		return h('span', { class: 'ontario-label__flag' }, this.getRequiredFlagText());
+	}
+	/**
+	 * Get the CSS class for the `label` element.
+	 * @returns CSS class for the `label` element.
+	 */
+	getClass() {
+		return this.captionType === 'large' || this.captionType === 'heading'
+			? this.isLegend
+				? `ontario-fieldset__legend ontario-fieldset__legend--${this.captionType}`
+				: `ontario-label ontario-label--${this.captionType}`
+			: this.isLegend
+			? 'ontario-fieldset__legend'
+			: 'ontario-label';
+	}
+	/**
+	 * Validate caption input by user and output warning message to the console if:
+	 * 1. the `caption` object is not provided
+	 * 2. the `captionText` property of the `caption` object is not provided
+	 * 3. the `captionText` property of the `caption` object is empty or contain only spaces
+	 * 4. the `captionType` property of the `caption` object is not provided
+	 * 5. the `captionType` property of the `caption` object is incorrect
+	 */
+	validateCaption(caption) {
+		var _a;
+		let messageType;
+		// undefined `caption` object
+		if (!caption || Object.keys(caption).length <= 0) {
+			messageType = MessageContentType.UndefinedCaptionObject;
+		} else {
+			// undefined `captionText` property
+			if (!caption.captionText) {
+				messageType = MessageContentType.UndefinedCaptionText;
+			} else {
+				// `captionText` that is empty or contains only spaces
+				if (/^\s*$/.test(caption.captionText)) {
+					messageType = MessageContentType.EmptyCaptionText;
+				}
+			}
+			// undefined `captionType`
+			if (!caption.captionType) {
+				messageType = MessageContentType.UndefinedCaptionType;
+			} else {
+				// incorrect `captionType`
+				if (
+					!CaptionTypes.includes(
+						(_a = caption === null || caption === void 0 ? void 0 : caption.captionType) === null || _a === void 0
+							? void 0
+							: _a.toLowerCase(),
+					)
+				) {
+					messageType = MessageContentType.IncorrectCaptionType;
+				}
+			}
+		}
+		if (messageType) {
+			const message = new ConsoleMessageClass().addDesignSystemTag();
+			if (messageType !== MessageContentType.UndefinedCaptionObject) {
+				message
+					.addMonospaceText(
+						` ${
+							messageType === MessageContentType.EmptyCaptionText ||
+							messageType === MessageContentType.UndefinedCaptionText
+								? 'caption or captionText'
+								: 'captionType'
+						} `,
+					)
+					.addRegularText('object or property of');
+			}
+			message.addMonospaceText(' caption ').addRegularText('object on').addMonospaceText(` ${this.componentTagName} `);
+			this.printConsoleMessage(messageType, message, this.getRequiredFlagText());
+		}
+	}
+	/**
+	 * Generate the content of warning message to be printed to the console
+	 * @param messageType determine the content of warning message to output
+	 * @param componentTagName the tag name of the component that's emitting the warning message
+	 * @param requiredFlagText accepts a string value to be used as the required flag text and defaults to `(optional)` if not set
+	 * @returns an array of `ConsoleMessage` objects containing the message and associated styles to be printed to the console
+	 */
+	printConsoleMessage(messageType, message, requiredFlagText = '(optional)') {
+		switch (messageType) {
+			// undefinedCaptionObject example: caption object on <ontario-input> is required but not defined. A blank followed by a (optional) flag is assumed.
+			// undefinedCaptionText example: captionText property of caption object on <ontario-input> is required but not defined. A blank followed by a (optional) flag is assumed.
+			// EmptyCaptionText example: captionText property of caption object on <ontario-input> is empty or contains only spaces. A blank followed by a (optional) flag is assumed.
+			case MessageContentType.UndefinedCaptionObject:
+			case MessageContentType.UndefinedCaptionText:
+			case MessageContentType.EmptyCaptionText:
+				message
+					.addRegularText(
+						`${
+							messageType === MessageContentType.EmptyCaptionText
+								? 'is empty or contains only spaces'
+								: 'is required but not defined'
+						}. A blank followed by a`,
+					)
+					.addMonospaceText(` ${requiredFlagText} `)
+					.addRegularText('flag is assumed.');
+				break;
+			// UndefinedCaptionType example: captionType property of caption object on <ontario-input> is not defined. The default type is assumed.
+			case MessageContentType.UndefinedCaptionType:
+				message.addRegularText('is not defined. The').addMonospaceText(' default ').addRegularText('type is assumed.');
+				break;
+			// IncorrectCaptionType example: captionType property of caption object on <ontario-input> was set to an incorrect type; only default, heading or large type is allowed. The default type is assumed.
+			case MessageContentType.IncorrectCaptionType:
+				message
+					.addRegularText('was set to an incorrect type; only')
+					.addMonospaceText(' default, heading, ')
+					.addRegularText('or')
+					.addMonospaceText(' large ')
+					.addRegularText('type is allowed. The')
+					.addMonospaceText(' default ')
+					.addRegularText('type is assumed.');
+				break;
+		}
+		message.printMessage();
+	}
+}
+
+var EventType;
+(function (EventType) {
+	EventType['Change'] = 'change';
+	EventType['Blur'] = 'blur';
+	EventType['Focus'] = 'focus';
+	EventType['Input'] = 'input';
+})(EventType || (EventType = {}));
+
+const handleInputEvent = (
+	event,
+	eventType,
+	input,
+	inputChangeEvent,
+	inputFocusEvent,
+	inputBlurEvent,
+	inputInputEvent,
+	type,
+	customChangeFunction,
+	customFocusFunction,
+	customBlurFunction,
+	customInputFunction,
+	hostElement,
+) => {
+	var _a;
+	if (eventType === EventType.Input) {
+		inputInputEvent === null || inputInputEvent === void 0
+			? void 0
+			: inputInputEvent.emit({
+					id: input === null || input === void 0 ? void 0 : input.id,
+					value: (_a = event.data) !== null && _a !== void 0 ? _a : undefined,
+					inputType: event.inputType,
+			  });
+		customInputFunction && customInputFunction(event);
+	}
+	if (eventType === EventType.Change) {
+		if (type === 'radio' || type === 'checkbox') {
+			if (input instanceof HTMLInputElement) {
+				inputChangeEvent.emit({
+					checked: input === null || input === void 0 ? void 0 : input.checked,
+					id: input === null || input === void 0 ? void 0 : input.id,
+					value: input === null || input === void 0 ? void 0 : input.value,
+				});
+			}
+		} else {
+			inputChangeEvent.emit({
+				id: input === null || input === void 0 ? void 0 : input.id,
+				value: input === null || input === void 0 ? void 0 : input.value,
+			});
+		}
+		customChangeFunction && customChangeFunction(event);
+		// Note: Change events don't have composable set to true and don't cross the ShadowDOM boundary.
+		// This will emit an event so the normal `onChange` event pattern is maintained.
+		hostElement && emitEvent(hostElement, eventType, event);
+	}
+	if (eventType === EventType.Focus) {
+		inputFocusEvent.emit({
+			id: input === null || input === void 0 ? void 0 : input.id,
+			focused: true,
+			value: input === null || input === void 0 ? void 0 : input.value,
+		});
+		customFocusFunction && customFocusFunction(event);
+	}
+	if (eventType === EventType.Blur) {
+		inputBlurEvent.emit({
+			id: input === null || input === void 0 ? void 0 : input.id,
+			focused: false,
+			value: input === null || input === void 0 ? void 0 : input.value,
+		});
+		customBlurFunction && customBlurFunction(event);
+	}
+};
+/**
+ * Emit a custom event that can be subscribed to by an event listener.
+ *
+ * @param element Component host element, see https://stenciljs.com/docs/host-element
+ * @param name name of the event
+ * @param detail any relevant details, like the original event
+ */
+const emitEvent = (element, name, detail) => {
+	element.dispatchEvent(new CustomEvent(name, { composed: true, bubbles: true, detail }));
+};
+
 const ErrorMessage = ({ message, error = false }) => {
 	const hideError = !error || isEmpty(message);
 	return h(
@@ -11,6 +334,6 @@ const ErrorMessage = ({ message, error = false }) => {
 	);
 };
 
-export { ErrorMessage as E };
+export { ErrorMessage as E, InputCaption as I, EventType as a, emitEvent as e, handleInputEvent as h };
 
 //# sourceMappingURL=error-message.js.map