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

package/dist/collection/components/ontario-input/ontario-input.js

@@ -221,7 +221,7 @@ export class OntarioInput {
 		return h(
 			'div',
 			{
-				key: '6824b3fc596dd144fac82b9483d4a30e6cd0c164',
+				key: '19fd39e773a95bac6b8df0c69fb27dd5cf9781f5',
 				class: `ontario-form-group ${error ? 'ontario-input--error' : ''}`,
 			},
 			this.captionState.getCaption(this.getId(), !!this.internalHintExpander),
@@ -231,9 +231,9 @@ export class OntarioInput {
 					hintContentType: this.internalHintText.hintContentType,
 					ref: (el) => (this.hintTextRef = el),
 				}),
-			h(ErrorMessage, { key: 'd46e5883decc5d9bac5b322804d6d69dcf6952af', message: this.errorMessage, error: error }),
+			h(ErrorMessage, { key: 'f3b04d71952331e85a6ef31e979074cba6d32283', message: this.errorMessage, error: error }),
 			h(Input, {
-				'key': '64b93de051e0b52ce75d23b00166558b121558f3',
+				'key': '30bb5731540a27fb091654c65ce652e40395a533',
 				'aria-describedBy': this.hintTextId,
 				'className': this.getClass(),
 				'id': this.getId(),

package/dist/collection/components/ontario-language-toggle/ontario-language-toggle.js

@@ -55,7 +55,7 @@ export class OntarioLanguageToggle {
 		return h(
 			'a',
 			{
-				'key': '8f86da95ae38c7dccea2f86898a14aa81fa45d86',
+				'key': 'bfd26a1a33f145d4150d6e416137e70491cbfb17',
 				'class':
 					this.size === 'default'
 						? 'ontario-language-toggler ontario-language-toggler--default'

package/dist/collection/components/ontario-page-alert/ontario-page-alert.js

@@ -34,22 +34,22 @@ export class OntarioPageAlert {
 	render() {
 		return h(
 			'div',
-			{ key: '8d9ce139b254b12b7b718695fa033ca38370a49c', class: this.getClass() },
+			{ key: '0ee280b8e10ac06a2d9190bb21d1fb0368da231e', class: this.getClass() },
 			h(
 				'div',
-				{ key: '1a64f71f87f6f21da11d9354f800a2bcb4ddbeda', class: 'ontario-alert__header' },
+				{ key: '3a5abb74ea10fb09583670e58cd8c0cf6a23e719', class: 'ontario-alert__header' },
 				h(
 					'div',
-					{ key: '1a5566b6f44fa1fbf8a6358d9670bd9d85ebf569', class: 'ontario-alert__header-icon' },
+					{ key: '4b8b00ca30c6a9f846f59fa172a36b0098cec44e', class: 'ontario-alert__header-icon' },
 					this.renderIcon(),
 				),
 				h(
 					'h2',
-					{ key: '19f4f2ae3faa8b8c9ab1281b46b653d2b2a43d46', class: 'ontario-alert__header-title ontario-h4' },
+					{ key: '3927f1e5c89f6169904efdad127fbb4b18758946', class: 'ontario-alert__header-title ontario-h4' },
 					this.heading,
 				),
 			),
-			h('div', { key: 'cebd1ecddd5419b454dcd36512dbc4e1a3dcb684', class: 'ontario-alert__body' }, this.renderContent()),
+			h('div', { key: 'f9a6a390fb5d211d32c679afb6bce8ecbb60335a', class: 'ontario-alert__body' }, this.renderContent()),
 		);
 	}
 	static get is() {

package/dist/collection/components/ontario-radio-buttons/ontario-radio-buttons.css

@@ -189,7 +189,9 @@ h6,
 /* -------------------------------
     Focus placeholder
 --------------------------------- */
-.ontario-radios__input:focus + .ontario-radios__label:before {
+.ontario-radios__input:focus + .ontario-radios__label:before,
+.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;
@@ -428,6 +430,10 @@ p + 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;
 }
@@ -607,6 +613,76 @@ p + ol {
 		display: block !important;
 	}
 }
+/*
+*  Text Inputs
+*/
+.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-error-messaging {
+	display: flex;
+	align-items: flex-start;
+	margin: -0.25rem 0 0.5rem 0;
+	color: #d81a21;
+	max-width: 48rem;
+}
+
+.ontario-error-messaging__content {
+	margin-left: 0.5rem;
+}
+
+.ontario-input__error {
+	border-color: #d81a21 !important;
+}
+
+.ontario-error__hidden {
+	display: none;
+}
+
 .ontario-radios__item {
 	position: relative;
 	display: block;

package/dist/collection/components/ontario-radio-buttons/ontario-radio-buttons.js

@@ -11,6 +11,7 @@ import { constructHintTextObject } from '../../utils/components/hints/hints';
 import { EventType } from '../../utils/events/event-handler.interface';
 import { handleInputEvent } from '../../utils/events/event-handler';
 import { default as translations } from '../../translations/global.i18n.json';
+import { ErrorMessage } from '../../utils/components/error-message/error-message';
 export class OntarioRadioButtons {
 	constructor() {
 		this.caption = undefined;
@@ -20,6 +21,7 @@ export class OntarioRadioButtons {
 		this.hintExpander = undefined;
 		this.required = false;
 		this.options = undefined;
+		this.errorMessage = undefined;
 		this.customOnChange = undefined;
 		this.customOnBlur = undefined;
 		this.customOnFocus = undefined;
@@ -135,6 +137,11 @@ export class OntarioRadioButtons {
 	updateLanguage() {
 		this.updateCaptionState(this.caption);
 	}
+	broadcastInputErrorOccurredEvent() {
+		var _a;
+		// Emit event to notify anyone who wants to listen for errors occurring
+		this.inputErrorOccurred.emit({ errorMessage: (_a = this.errorMessage) !== null && _a !== void 0 ? _a : '' });
+	}
 	/**
 	 * Function to handle radio buttons events and the information pertaining to the radio buttons to emit.
 	 */
@@ -197,13 +204,17 @@ export class OntarioRadioButtons {
 	}
 	render() {
 		var _a;
+		const error = !!this.errorMessage;
 		return h(
 			'div',
-			{ key: '9fd6c87b909d245e3882608e88643b67f1a41e73', class: 'ontario-form-group' },
+			{
+				key: 'cd2768ead5807b07f7e7a404e5f0de21d00f9927',
+				class: `ontario-form-group ${error ? 'ontario-input--error' : ''}`,
+			},
 			h(
 				'fieldset',
 				{
-					'key': '27803aa186170a926e5708daa44b9e316a308099',
+					'key': '86e3e4e74c7019a67491bc2656a7f0a8ea944c0f',
 					'class': 'ontario-fieldset',
 					'aria-describedby': this.hintTextId,
 				},
@@ -216,7 +227,12 @@ export class OntarioRadioButtons {
 					}),
 				h(
 					'div',
-					{ key: '34e4053d111ea70f6b5f841ba9cbbaab240334a3', class: 'ontario-radios' },
+					{ key: '278e15dc532e4f2721b40868a22631a351e1f4dc', class: 'ontario-radios' },
+					h(ErrorMessage, {
+						key: '19cc552fc1f4c7c834efca26f98c8d6e007b66ad',
+						message: this.errorMessage,
+						error: error,
+					}),
 					(_a = this.internalOptions) === null || _a === void 0
 						? void 0
 						: _a.map((radioOption) =>
@@ -456,6 +472,23 @@ export class OntarioRadioButtons {
 				attribute: 'options',
 				reflect: false,
 			},
+			errorMessage: {
+				type: 'string',
+				mutable: true,
+				complexType: {
+					original: 'string',
+					resolved: 'string | undefined',
+					references: {},
+				},
+				required: false,
+				optional: true,
+				docs: {
+					tags: [],
+					text: 'Set this to display an error message',
+				},
+				attribute: 'error-message',
+				reflect: false,
+			},
 			customOnChange: {
 				type: 'unknown',
 				mutable: false,
@@ -595,6 +628,22 @@ export class OntarioRadioButtons {
 					},
 				},
 			},
+			{
+				method: 'inputErrorOccurred',
+				name: 'inputErrorOccurred',
+				bubbles: true,
+				cancelable: true,
+				composed: true,
+				docs: {
+					tags: [],
+					text: 'Emitted when an error message is reported to the component.',
+				},
+				complexType: {
+					original: '{ errorMessage: string }',
+					resolved: '{ errorMessage: string; }',
+					references: {},
+				},
+			},
 		];
 	}
 	static get elementRef() {
@@ -630,6 +679,10 @@ export class OntarioRadioButtons {
 				propName: 'language',
 				methodName: 'updateLanguage',
 			},
+			{
+				propName: 'errorMessage',
+				methodName: 'broadcastInputErrorOccurredEvent',
+			},
 		];
 	}
 	static get listeners() {

package/dist/collection/components/ontario-radio-buttons/ontario-radio-buttons.js.map

@@ -1 +1 @@
-{"version":3,"file":"ontario-radio-buttons.js","sourceRoot":"","sources":["../../../src/components/ontario-radio-buttons/ontario-radio-buttons.tsx"],"names":[],"mappings":"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","sourcesContent":["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';\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\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 * 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 * 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/**\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\treturn (\n\t\t\t<div class=\"ontario-form-group\">\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\t\t\t\t\t<div class=\"ontario-radios\">\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,"file":"ontario-radio-buttons.js","sourceRoot":"","sources":["../../../src/components/ontario-radio-buttons/ontario-radio-buttons.tsx"],"names":[],"mappings":"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","sourcesContent":["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"]}

package/dist/collection/components/ontario-radio-buttons/test/ontario-radio-button.spec.js

@@ -16,7 +16,12 @@ describe('ontario-radio-buttons', () => {
                     (optional)
                   </span>
                 </legend>
-              <div class="ontario-radios"></div>
+              <div class="ontario-radios">
+                <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>
+              </div>
             </fieldset>
           </div>
         </mock:shadow-root>

package/dist/collection/components/ontario-radio-buttons/test/ontario-radio-button.spec.js.map

@@ -1 +1 @@
-{"version":3,"file":"ontario-radio-button.spec.js","sourceRoot":"","sources":["../../../../src/components/ontario-radio-buttons/test/ontario-radio-button.spec.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,MAAM,uBAAuB,CAAC;AACpD,OAAO,EAAE,mBAAmB,EAAE,MAAM,0BAA0B,CAAC;AAE/D,QAAQ,CAAC,uBAAuB,EAAE,GAAG,EAAE;IACtC,EAAE,CAAC,SAAS,EAAE,KAAK,IAAI,EAAE;QACxB,MAAM,IAAI,GAAG,MAAM,WAAW,CAAC;YAC9B,UAAU,EAAE,CAAC,mBAAmB,CAAC;YACjC,IAAI,EAAE,iDAAiD;SACvD,CAAC,CAAC;QACH,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,WAAW,CAAC;;;;;;;;;;;;;;;KAe3B,CAAC,CAAC;IACN,CAAC,CAAC,CAAC;AACJ,CAAC,CAAC,CAAC","sourcesContent":["import { newSpecPage } from '@stencil/core/testing';\nimport { OntarioRadioButtons } from '../ontario-radio-buttons';\n\ndescribe('ontario-radio-buttons', () => {\n\tit('renders', async () => {\n\t\tconst page = await newSpecPage({\n\t\t\tcomponents: [OntarioRadioButtons],\n\t\t\thtml: `<ontario-radio-buttons></ontario-radio-buttons>`,\n\t\t});\n\t\texpect(page.root).toEqualHtml(`\n      <ontario-radio-buttons>\n        <mock:shadow-root>\n          <div class=\"ontario-form-group\">\n            <fieldset class=\"ontario-fieldset\">\n                <legend class=\"ontario-fieldset__legend\">\n                  <span class=\"ontario-label__flag\">\n                    (optional)\n                  </span>\n                </legend>\n              <div class=\"ontario-radios\"></div>\n            </fieldset>\n          </div>\n        </mock:shadow-root>\n      </ontario-radio-buttons>\n    `);\n\t});\n});\n"]}
+{"version":3,"file":"ontario-radio-button.spec.js","sourceRoot":"","sources":["../../../../src/components/ontario-radio-buttons/test/ontario-radio-button.spec.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,MAAM,uBAAuB,CAAC;AACpD,OAAO,EAAE,mBAAmB,EAAE,MAAM,0BAA0B,CAAC;AAE/D,QAAQ,CAAC,uBAAuB,EAAE,GAAG,EAAE;IACtC,EAAE,CAAC,SAAS,EAAE,KAAK,IAAI,EAAE;QACxB,MAAM,IAAI,GAAG,MAAM,WAAW,CAAC;YAC9B,UAAU,EAAE,CAAC,mBAAmB,CAAC;YACjC,IAAI,EAAE,iDAAiD;SACvD,CAAC,CAAC;QACH,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,WAAW,CAAC;;;;;;;;;;;;;;;;;;;;KAoB3B,CAAC,CAAC;IACN,CAAC,CAAC,CAAC;AACJ,CAAC,CAAC,CAAC","sourcesContent":["import { newSpecPage } from '@stencil/core/testing';\nimport { OntarioRadioButtons } from '../ontario-radio-buttons';\n\ndescribe('ontario-radio-buttons', () => {\n\tit('renders', async () => {\n\t\tconst page = await newSpecPage({\n\t\t\tcomponents: [OntarioRadioButtons],\n\t\t\thtml: `<ontario-radio-buttons></ontario-radio-buttons>`,\n\t\t});\n\t\texpect(page.root).toEqualHtml(`\n      <ontario-radio-buttons>\n        <mock:shadow-root>\n          <div class=\"ontario-form-group\">\n            <fieldset class=\"ontario-fieldset\">\n                <legend class=\"ontario-fieldset__legend\">\n                  <span class=\"ontario-label__flag\">\n                    (optional)\n                  </span>\n                </legend>\n              <div class=\"ontario-radios\">\n                <div class=\"ontario-error-messaging ontario-error__hidden\" role=\"alert\">\n                  <ontario-icon-alert-error></ontario-icon-alert-error>\n                  <div class=\"ontario-error-messaging__content\"></div>\n                </div>\n              </div>\n            </fieldset>\n          </div>\n        </mock:shadow-root>\n      </ontario-radio-buttons>\n    `);\n\t});\n});\n"]}

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

@@ -32,17 +32,17 @@ export class OntarioStepIndicator {
 	render() {
 		return h(
 			'div',
-			{ key: 'd0409bc6e29e154adc63b98808d0763946cbffaf', class: 'ontario-step-indicator' },
+			{ key: '7c06f9b29a811529ce9daeb84d8a06c4a2aedda2', class: 'ontario-step-indicator' },
 			h(
 				'div',
-				{ key: '04dbd24ee41638675a0b3ece3a2ef8c479235b78', class: 'ontario-row' },
+				{ key: '34ef450a2b83cdbe06bdeb2344d30a7f914334a7', class: 'ontario-row' },
 				h(
 					'div',
-					{ key: 'faa631380f1f0cb18ca72bf2fbb31221292d04f2', class: 'ontario-columns ontario-small-12' },
+					{ key: 'f3d6fcc4c934895328528a8f61721bdbb2ce33ed', class: 'ontario-columns ontario-small-12' },
 					h(
 						'div',
 						{
-							key: 'a5f0eae9768f9bce57db3d31cc016e79e83ce73d',
+							key: '93a3e72a049dcdfe96bf4ffbf34fcfff7401a02d',
 							class: `ontario-step-indicator--with-back-button--${this.showBackButton}`,
 						},
 						this.showBackButton === true &&
@@ -82,7 +82,7 @@ export class OntarioStepIndicator {
 									this.numberOfSteps,
 							  ),
 					),
-					h('hr', { key: '10575f02752bf93aefff4ce1bc8eaf02d5a78c08' }),
+					h('hr', { key: '0c10bfd4f8d44dffa0ec9080b1571f89b51affd1' }),
 				),
 			),
 		);

package/dist/collection/components/ontario-table/ontario-table.js

@@ -150,26 +150,26 @@ export class OntarioTable {
 		const columns = extractValuesByKey(this.tableColumnsState, 'key');
 		return h(
 			'div',
-			{ key: 'f2f1c8359a5b09b1f1812501f45617b8793d62c4', class: 'ontario-table-container' },
+			{ key: 'a1d179ae715dec16427df0d3f99a3d3d373d02b7', class: 'ontario-table-container' },
 			h(
 				'div',
 				{
-					key: 'f406a56cb585bc6afc47b6d2857cc81a6eaab30a',
+					key: 'c8cb93075eeebe49046f5756c0a594ce95b0e3a1',
 					class: 'ontario-table-scroll--wrapper',
 					ref: (el) => (this.tableScrollWrapper = el),
 				},
 				h('div', {
-					key: 'dc0a7056f365450fc0196ccd5ccd231e6a258b16',
+					key: '0aad7a350074d1e4ce03db4d3e25a79c1c7f8a39',
 					class: 'ontario-table-scroll--div',
 					ref: (el) => (this.tableScrollDiv = el),
 				}),
 			),
 			h(
 				'div',
-				{ key: '6f9a07ab7d4914f0404cf95264ce122cb64605fc', class: 'ontario-table-div', ref: (el) => (this.table = el) },
+				{ key: '59c9e79e5442151a19ba7b3ffc17ad6a5084d7c7', class: 'ontario-table-div', ref: (el) => (this.table = el) },
 				h(
 					'table',
-					{ key: 'b0c400ff0d59973556860dca7fa0b8dcbd85040d', class: this.getTableClasses() },
+					{ key: '9ea1c8596d837b85723b90e4b5a3b1b0c735c6c2', class: this.getTableClasses() },
 					this.caption && h('caption', null, this.caption),
 					this.tableColumnsState &&
 						h(

package/dist/collection/components/ontario-textarea/ontario-textarea.css

@@ -434,6 +434,10 @@ p + 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;
 }
@@ -712,6 +716,26 @@ h1 > .ontario-label--heading {
 		display: block !important;
 	}
 }
+.ontario-error-messaging {
+	display: flex;
+	align-items: flex-start;
+	margin: -0.25rem 0 0.5rem 0;
+	color: #d81a21;
+	max-width: 48rem;
+}
+
+.ontario-error-messaging__content {
+	margin-left: 0.5rem;
+}
+
+.ontario-input__error {
+	border-color: #d81a21 !important;
+}
+
+.ontario-error__hidden {
+	display: none;
+}
+
 .ontario-textarea {
 	border: 2px solid #1a1a1a;
 	border-radius: 4px;
@@ -732,3 +756,7 @@ h1 > .ontario-label--heading {
 .ontario-textarea.ontario-textarea-hint-expander--true {
 	margin-bottom: 1rem;
 }
+
+.ontario-textarea--error textarea {
+	border: 0.125rem solid #cd0000;
+}

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

@@ -7,6 +7,7 @@ import { constructHintTextObject } from '../../utils/components/hints/hints';
 import { EventType } from '../../utils/events/event-handler.interface';
 import { handleInputEvent } from '../../utils/events/event-handler';
 import { default as translations } from '../../translations/global.i18n.json';
+import { ErrorMessage } from '../../utils/components/error-message/error-message';
 export class OntarioTextarea {
 	constructor() {
 		this.caption = undefined;
@@ -17,6 +18,7 @@ export class OntarioTextarea {
 		this.hintText = undefined;
 		this.hintExpander = undefined;
 		this.language = undefined;
+		this.errorMessage = undefined;
 		this.customOnInput = undefined;
 		this.customOnChange = undefined;
 		this.customOnBlur = undefined;
@@ -100,6 +102,14 @@ export class OntarioTextarea {
 	updateLanguage() {
 		this.updateCaptionState(this.caption);
 	}
+	broadcastInputErrorOccurredEvent() {
+		var _a;
+		// Emit event to notify anyone who wants to listen for errors occurring
+		this.inputErrorOccurred.emit({
+			inputId: this.getId(),
+			errorMessage: (_a = this.errorMessage) !== null && _a !== void 0 ? _a : '',
+		});
+	}
 	/**
 	 * Function to handle textarea events and the information pertaining to the textarea to emit.
 	 */
@@ -156,9 +166,13 @@ export class OntarioTextarea {
 		this.language = validateLanguage(this.language);
 	}
 	render() {
+		const error = !!this.errorMessage;
 		return h(
 			'div',
-			{ key: 'ca65ae6963ca2bf19e4285413494b31cac66fbc5', class: 'ontario-form-group' },
+			{
+				key: '56037303dc9042c630cdbeaf48bac3b98f2c606b',
+				class: `ontario-form-group ${error ? 'ontario-textarea--error' : ''}`,
+			},
 			this.captionState.getCaption(this.getId(), !!this.internalHintExpander),
 			this.internalHintText &&
 				h('ontario-hint-text', {
@@ -166,8 +180,9 @@ export class OntarioTextarea {
 					hintContentType: this.internalHintText.hintContentType,
 					ref: (el) => (this.hintTextRef = el),
 				}),
+			h(ErrorMessage, { key: '7c8546075b845dbc1537b318aaa518af5a60befc', message: this.errorMessage, error: error }),
 			h('textarea', {
-				'key': '9b20c5156e0977b440786d3a3cf8bbabf9f69649',
+				'key': '5b31918ec1e67fc1cd910fdc99a843cfdf4bc571',
 				'aria-describedby': this.hintTextId,
 				'class': this.getClass(),
 				'id': this.getId(),
@@ -380,6 +395,23 @@ export class OntarioTextarea {
 				attribute: 'language',
 				reflect: false,
 			},
+			errorMessage: {
+				type: 'string',
+				mutable: true,
+				complexType: {
+					original: 'string',
+					resolved: 'string | undefined',
+					references: {},
+				},
+				required: false,
+				optional: true,
+				docs: {
+					tags: [],
+					text: 'Set this to display an error message',
+				},
+				attribute: 'error-message',
+				reflect: false,
+			},
 			customOnInput: {
 				type: 'unknown',
 				mutable: false,
@@ -560,6 +592,22 @@ export class OntarioTextarea {
 					},
 				},
 			},
+			{
+				method: 'inputErrorOccurred',
+				name: 'inputErrorOccurred',
+				bubbles: true,
+				cancelable: true,
+				composed: true,
+				docs: {
+					tags: [],
+					text: 'Emitted when an error message is reported to the component.',
+				},
+				complexType: {
+					original: '{ inputId: string; errorMessage: string }',
+					resolved: '{ inputId: string; errorMessage: string; }',
+					references: {},
+				},
+			},
 		];
 	}
 	static get elementRef() {
@@ -587,6 +635,10 @@ export class OntarioTextarea {
 				propName: 'language',
 				methodName: 'updateLanguage',
 			},
+			{
+				propName: 'errorMessage',
+				methodName: 'broadcastInputErrorOccurredEvent',
+			},
 		];
 	}
 	static get listeners() {