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

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

@@ -28,16 +28,36 @@
 /* icon colours */
 /* service ontario header colours */
 /*** 1 - Breakpoint sizes for media queries ***/ /* -------------------------------
+    Global font variables
+--------------------------------- */
+/* -------------------------------
+    Global font-size variables
+--------------------------------- */
+/* -------------------------------
+    Global line-height variables
+--------------------------------- */
+/* -------------------------------
     Global font-weight variables
 --------------------------------- */
+/* -------------------------------
+    Focus placeholder variables
+--------------------------------- */
+/* -------------------------------
+    Focus placeholder
+--------------------------------- */
+.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;
+}
+
 /* -------------------------------
     Global letter-spacing variables
 --------------------------------- */
 /* Rem calc function */
 /* Pixel to REM Conversion */
-/* -------------------------------
-    Global line-height variables
---------------------------------- */
 /* -------------------------------
     Global typography variables
 --------------------------------- */
@@ -180,23 +200,6 @@ h6,
 	}
 }
 
-/* -------------------------------
-    Global font-size variables
---------------------------------- */
-/* -------------------------------
-    Focus placeholder variables
---------------------------------- */
-/* -------------------------------
-    Focus placeholder
---------------------------------- */
-.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;
-}
-
 /*
 *  Global elements
 *

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

@@ -13,24 +13,166 @@ 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;
-		this.language = undefined;
-		this.name = undefined;
-		this.hintText = undefined;
-		this.hintExpander = undefined;
-		this.required = false;
-		this.options = undefined;
-		this.errorMessage = undefined;
-		this.customOnChange = undefined;
-		this.customOnBlur = undefined;
-		this.customOnFocus = undefined;
-		this.hintTextId = undefined;
-		this.internalHintText = undefined;
-		this.internalHintExpander = undefined;
-		this.internalOptions = undefined;
-		this.captionState = undefined;
-	}
+	element;
+	internals;
+	hintTextRef;
+	/**
+	 * The text to display for the radio button legend.
+	 *
+	 * @example
+	 * <ontario-radio-buttons
+	 *   caption='{
+	 *     "captionText": "Radio legend",
+	 *     "captionType": "heading",
+	 *    }'
+	 *   required="true"
+	 *   ...>
+	 * </ontario-radio-buttons>
+	 */
+	caption;
+	/**
+	 * The language of the component.
+	 * 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.
+	 */
+	language;
+	/**
+	 * The name assigned to the radio button. The name value is used to reference form data after a form is submitted.
+	 */
+	name;
+	/**
+	 * Used to include the ontario-hint-text component for radio button group.
+	 * This is optional.
+	 */
+	hintText;
+	/**
+	 * Used to include the ontario-hint-expander component for the radio button group.
+	 * This is passed in as an object with key-value pairs.
+	 *
+	 * This is optional.
+	 *
+	 * @example
+	 * <ontario-radio-buttons
+	 *   caption='{
+	 *     "captionText": "Radio legend",
+	 *     "captionType": "heading",
+	 *   }'
+	 * 	 name="radios"
+	 *   options='[
+	 * 	   {
+	 *        "value": "radio-option-1",
+	 * 		  "elementId": "radio-1",
+	 *        "label": "Radio option 1 label",
+	 *        "hintExpander": {
+	 *			  "hint": "Hint expander for radio option 1",
+	 * 		      "content": "Example hint expander content for radio option 1."
+	 *		  }
+	 *     }
+	 *   ]'
+	 *   hint-expander='{
+	 *     "hint": "Hint expander for the radio button group",
+	 *     "content": "Example hint expander content for the radio button group."
+	 *   }'
+	 *   required="true"
+	 * >
+	 * </ontario-radio-buttons>
+	 */
+	hintExpander;
+	/**
+	 * This is used to determine whether the radio button is required or not.
+	 * This prop also gets passed to the InputCaption utility to display either an optional or required flag in the label.
+	 * If no prop is set, it will default to false (optional).
+	 */
+	required = false;
+	/**
+	 * The options for the radio button group.
+	 *
+	 * Each property will be passed in through an object in the options array.
+	 * This can either be passed in as an object directly (if using react), or as a string in HTML.
+	 * If there are multiple radio buttons in a group, each radio button will be displayed as an option.
+	 *
+	 * 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.
+	 *
+	 * @example
+	 * <ontario-radio-buttons
+	 *   caption='{
+	 *     "captionText": "Radio legend",
+	 *     "captionType": "heading",
+	 *   }'
+	 *   name="radios"
+	 *   hint-text="Hint text for the radio button group."
+	 *   options='[
+	 *     {
+	 *        "value": "radio-option-1",
+	 * 		  "elementId": "radio-1",
+	 *        "label": "Radio option 1 label"
+	 *     },
+	 *     {
+	 *        "value": "radio-option-2",
+	 * 		  "elementId": "radio-2",
+	 *        "label": "Radio option 2 label",
+	 *        "hintExpander": {
+	 *			  "hint": "Hint expander for radio option 2",
+	 * 		      "content": "Example hint expander content for radio option 2."
+	 *		  }
+	 *      }
+	 *   ]'
+	 *   required="true"
+	 * >
+	 * </ontario-radio-buttons>
+	 */
+	options;
+	/**
+	 * Set this to display an error message
+	 */
+	errorMessage;
+	/**
+	 * Used to add a custom function to the radio input onChange event.
+	 */
+	customOnChange;
+	/**
+	 * Used to add a custom function to the radio input onBlur event.
+	 */
+	customOnBlur;
+	/**
+	 * Used to add a custom function to the radio input onFocus event.
+	 */
+	customOnFocus;
+	/**
+	 * Used for the `aria-describedby` value of the radio button group. This will match with the id of the hint text.
+	 */
+	hintTextId;
+	/**
+	 * The hint text options are re-assigned to the internalHintText array.
+	 */
+	internalHintText;
+	/**
+	 * The hint expander options are re-assigned to the internalHintExpander array.
+	 */
+	internalHintExpander;
+	/**
+	 * The options are re-assigned to the internalOptions array.
+	 */
+	internalOptions;
+	/**
+	 * Instantiate an InputCaption object for internal logic use
+	 */
+	captionState;
+	/**
+	 * Emitted when a keyboard input or mouse event occurs when a radio option has been changed.
+	 */
+	radioOnChange;
+	/**
+	 * Emitted when a keyboard input event occurs when a radio option has lost focus.
+	 */
+	radioOnBlur;
+	/**
+	 * Emitted when a keyboard input event occurs when a radio option has gained focus.
+	 */
+	radioOnFocus;
+	/**
+	 * Emitted when an error message is reported to the component.
+	 */
+	inputErrorOccurred;
 	/**
 	 * 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.
 	 */
@@ -138,15 +280,13 @@ export class OntarioRadioButtons {
 		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 : '' });
+		this.inputErrorOccurred.emit({ errorMessage: this.errorMessage ?? '' });
 	}
 	/**
 	 * Function to handle radio buttons events and the information pertaining to the radio buttons to emit.
 	 */
 	handleEvent(event, eventType) {
-		var _a, _b;
 		const input = event.target;
 		// Reset all internalOptions checked states
 		const changedOption = this.internalOptions
@@ -154,22 +294,18 @@ export class OntarioRadioButtons {
 				x.checked = false;
 				return x;
 			})
-			.find((x) => x.value === (input === null || input === void 0 ? void 0 : input.value));
+			.find((x) => x.value === input?.value);
 		// Set the new checked state for the selected value
-		if (changedOption)
-			changedOption.checked = !(changedOption === null || changedOption === void 0 ? void 0 : changedOption.checked);
+		if (changedOption) changedOption.checked = !changedOption?.checked;
 		// Set the value within the form
-		(_b = (_a = this.internals) === null || _a === void 0 ? void 0 : _a.setFormValue) === null || _b === void 0
-			? void 0
-			: _b.call(
-					_a,
-					this.internalOptions
-						.filter((x) => !!x.checked)
-						.reduce((formData, currentValue) => {
-							formData.append(this.name, currentValue.value);
-							return formData;
-						}, new FormData()),
-			  );
+		this.internals?.setFormValue?.(
+			this.internalOptions
+				.filter((x) => !!x.checked)
+				.reduce((formData, currentValue) => {
+					formData.append(this.name, currentValue.value);
+					return formData;
+				}, new FormData()),
+		);
 		handleInputEvent(
 			event,
 			eventType,
@@ -190,8 +326,7 @@ export class OntarioRadioButtons {
 	 * 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.
 	 */
 	async componentDidLoad() {
-		var _a;
-		this.hintTextId = await ((_a = this.hintTextRef) === null || _a === void 0 ? void 0 : _a.getHintTextId());
+		this.hintTextId = await this.hintTextRef?.getHintTextId();
 	}
 	componentWillLoad() {
 		this.updateCaptionState(this.caption);
@@ -203,79 +338,77 @@ export class OntarioRadioButtons {
 		this.language = validateLanguage(this.language);
 	}
 	render() {
-		var _a;
 		const error = !!this.errorMessage;
 		return h(
 			'div',
 			{
-				key: '786a43f11d02ef7643ae2c0663dc219f2886ab34',
+				key: 'a72d3814a73c41fe295bbe7267a57e4de4f09c6f',
 				class: `ontario-form-group ${error ? 'ontario-input--error' : ''}`,
 			},
 			h(
 				'fieldset',
 				{
-					'key': '3c1938738101c7eb60b84a1e3c14b76b0dd63a2d',
+					'key': 'b3a4bf7f2e8351107125ccf3aaac96f088dea4d6',
 					'class': 'ontario-fieldset',
 					'aria-describedby': this.hintTextId,
 				},
 				this.captionState.getCaption(undefined, !!this.internalHintExpander),
 				this.internalHintText &&
 					h('ontario-hint-text', {
+						key: '4a59f75d053edd397eeeb7f0f75b8d301c872e8c',
 						hint: this.internalHintText.hint,
 						hintContentType: this.internalHintText.hintContentType,
 						ref: (el) => (this.hintTextRef = el),
 					}),
 				h(
 					'div',
-					{ key: '4a3b23f679bd473813b6af12af8dfebc8fb0fc34', class: 'ontario-radios' },
+					{ key: 'f38ba7f77cc5bb712529d10df095c13affa90f4e', class: 'ontario-radios' },
 					h(ErrorMessage, {
-						key: 'b8e1f00d67e47f0f132a3d82d890b285d39a14cb',
+						key: '1d48ccc837cde3c9687b6f8f357b52a452d2fbba',
 						message: this.errorMessage,
 						error: error,
 					}),
-					(_a = this.internalOptions) === null || _a === void 0
-						? void 0
-						: _a.map((radioOption) =>
+					this.internalOptions?.map((radioOption) =>
+						h(
+							'div',
+							{ class: 'ontario-radios__item' },
+							h(Input, {
+								className: 'ontario-radios__input',
+								id: radioOption.elementId,
+								name: this.name,
+								type: 'radio',
+								value: radioOption.value,
+								required: !!this.required,
+								checked: !!radioOption.checked,
+								onChange: (e) => this.handleEvent(e, EventType.Change),
+								onBlur: (e) => this.handleEvent(e, EventType.Blur),
+								onFocus: (e) => this.handleEvent(e, EventType.Focus),
+							}),
+							h(
+								'label',
+								{ class: 'ontario-radios__label', htmlFor: radioOption.elementId },
+								radioOption.label,
+								radioOption.hintExpander && this.captionState.getHintExpanderAccessibilityText(radioOption.label, true),
+							),
+							radioOption.hintExpander &&
 								h(
 									'div',
-									{ class: 'ontario-radios__item' },
-									h(Input, {
-										className: 'ontario-radios__input',
-										id: radioOption.elementId,
-										name: this.name,
-										type: 'radio',
-										value: radioOption.value,
-										required: !!this.required,
-										checked: !!radioOption.checked,
-										onChange: (e) => this.handleEvent(e, EventType.Change),
-										onBlur: (e) => this.handleEvent(e, EventType.Blur),
-										onFocus: (e) => this.handleEvent(e, EventType.Focus),
+									{ class: 'ontario-radios__hint-expander' },
+									h('ontario-hint-expander', {
+										'hint': radioOption.hintExpander.hint,
+										'content': radioOption.hintExpander.content,
+										'hintContentType': radioOption.hintExpander.hintContentType,
+										'input-exists': true,
 									}),
-									h(
-										'label',
-										{ class: 'ontario-radios__label', htmlFor: radioOption.elementId },
-										radioOption.label,
-										radioOption.hintExpander &&
-											this.captionState.getHintExpanderAccessibilityText(radioOption.label, true),
-									),
-									radioOption.hintExpander &&
-										h(
-											'div',
-											{ class: 'ontario-radios__hint-expander' },
-											h('ontario-hint-expander', {
-												'hint': radioOption.hintExpander.hint,
-												'content': radioOption.hintExpander.content,
-												'hintContentType': radioOption.hintExpander.hintContentType,
-												'input-exists': true,
-											}),
-										),
 								),
-						  ),
+						),
+					),
 					this.internalHintExpander &&
 						h(
 							'div',
-							{ class: 'ontario-radios__hint-expander' },
+							{ key: '7474fc0072c87dd627f576fb4b1ed92078ac9d40', class: 'ontario-radios__hint-expander' },
 							h('ontario-hint-expander', {
+								'key': '29777790764d03b3a8a6fd2c2b50c196f520e939',
 								'hint': this.internalHintExpander.hint,
 								'content': this.internalHintExpander.content,
 								'hintContentType': this.internalHintExpander.hintContentType,
@@ -332,6 +465,8 @@ export class OntarioRadioButtons {
 					],
 					text: 'The text to display for the radio button legend.',
 				},
+				getter: false,
+				setter: false,
 				attribute: 'caption',
 				reflect: false,
 			},
@@ -355,6 +490,8 @@ export class OntarioRadioButtons {
 					tags: [],
 					text: 'The language of the component.\nThis 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.',
 				},
+				getter: false,
+				setter: false,
 				attribute: 'language',
 				reflect: false,
 			},
@@ -372,6 +509,8 @@ export class OntarioRadioButtons {
 					tags: [],
 					text: 'The name assigned to the radio button. The name value is used to reference form data after a form is submitted.',
 				},
+				getter: false,
+				setter: false,
 				attribute: 'name',
 				reflect: false,
 			},
@@ -395,6 +534,8 @@ export class OntarioRadioButtons {
 					tags: [],
 					text: 'Used to include the ontario-hint-text component for radio button group.\nThis is optional.',
 				},
+				getter: false,
+				setter: false,
 				attribute: 'hint-text',
 				reflect: false,
 			},
@@ -423,6 +564,8 @@ export class OntarioRadioButtons {
 					],
 					text: 'Used to include the ontario-hint-expander component for the radio button group.\nThis is passed in as an object with key-value pairs.\n\nThis is optional.',
 				},
+				getter: false,
+				setter: false,
 				attribute: 'hint-expander',
 				reflect: false,
 			},
@@ -440,6 +583,8 @@ export class OntarioRadioButtons {
 					tags: [],
 					text: 'This is used to determine whether the radio button is required or not.\nThis prop also gets passed to the InputCaption utility to display either an optional or required flag in the label.\nIf no prop is set, it will default to false (optional).',
 				},
+				getter: false,
+				setter: false,
 				attribute: 'required',
 				reflect: false,
 				defaultValue: 'false',
@@ -469,6 +614,8 @@ export class OntarioRadioButtons {
 					],
 					text: 'The options for the radio button group.\n\nEach property will be passed in through an object in the options array.\nThis can either be passed in as an object directly (if using react), or as a string in HTML.\nIf there are multiple radio buttons in a group, each radio button will be displayed as an option.\n\nIn the example below, the options are being passed in as a string and there are two radio buttons to be displayed in the group.',
 				},
+				getter: false,
+				setter: false,
 				attribute: 'options',
 				reflect: false,
 			},
@@ -486,6 +633,8 @@ export class OntarioRadioButtons {
 					tags: [],
 					text: 'Set this to display an error message',
 				},
+				getter: false,
+				setter: false,
 				attribute: 'error-message',
 				reflect: false,
 			},
@@ -508,6 +657,8 @@ export class OntarioRadioButtons {
 					tags: [],
 					text: 'Used to add a custom function to the radio input onChange event.',
 				},
+				getter: false,
+				setter: false,
 			},
 			customOnBlur: {
 				type: 'unknown',
@@ -528,6 +679,8 @@ export class OntarioRadioButtons {
 					tags: [],
 					text: 'Used to add a custom function to the radio input onBlur event.',
 				},
+				getter: false,
+				setter: false,
 			},
 			customOnFocus: {
 				type: 'unknown',
@@ -548,6 +701,8 @@ export class OntarioRadioButtons {
 					tags: [],
 					text: 'Used to add a custom function to the radio input onFocus event.',
 				},
+				getter: false,
+				setter: false,
 			},
 		};
 	}

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';\nimport { ErrorMessage } from '../../utils/components/error-message/error-message';\n\n@Component({\n\ttag: 'ontario-radio-buttons',\n\tstyleUrl: 'ontario-radio-buttons.scss',\n\tshadow: true,\n\tformAssociated: true,\n})\nexport class OntarioRadioButtons implements RadioButtons {\n\t@Element() element: HTMLElement;\n\t@AttachInternals() internals: ElementInternals;\n\n\thintTextRef: HTMLOntarioHintTextElement | undefined;\n\n\t/**\n\t * The text to display for the radio button legend.\n\t *\n\t * @example\n\t * <ontario-radio-buttons\n\t *   caption='{\n\t *     \"captionText\": \"Radio legend\",\n\t *     \"captionType\": \"heading\",\n\t *    }'\n\t *   required=\"true\"\n\t *   ...>\n\t * </ontario-radio-buttons>\n\t */\n\t@Prop() caption: Caption | string;\n\t/**\n\t * The language of the component.\n\t * This is used for translations, and is by default set through event listeners checking for a language property from the header. If no language is passed, it will default to English.\n\t */\n\t@Prop({ mutable: true }) language?: Language;\n\n\t/**\n\t * The name assigned to the radio button. The name value is used to reference form data after a form is submitted.\n\t */\n\t@Prop() name: string;\n\n\t/**\n\t * Used to include the ontario-hint-text component for radio button group.\n\t * This is optional.\n\t */\n\t@Prop() hintText?: string | Hint;\n\n\t/**\n\t * Used to include the ontario-hint-expander component for the radio button group.\n\t * This is passed in as an object with key-value pairs.\n\t *\n\t * This is optional.\n\t *\n\t * @example\n\t * <ontario-radio-buttons\n\t *   caption='{\n\t *     \"captionText\": \"Radio legend\",\n\t *     \"captionType\": \"heading\",\n\t *   }'\n\t * \t name=\"radios\"\n\t *   options='[\n\t * \t   {\n\t *        \"value\": \"radio-option-1\",\n\t * \t\t  \"elementId\": \"radio-1\",\n\t *        \"label\": \"Radio option 1 label\",\n\t *        \"hintExpander\": {\n\t *\t\t\t  \"hint\": \"Hint expander for radio option 1\",\n\t * \t\t      \"content\": \"Example hint expander content for radio option 1.\"\n\t *\t\t  }\n\t *     }\n\t *   ]'\n\t *   hint-expander='{\n\t *     \"hint\": \"Hint expander for the radio button group\",\n\t *     \"content\": \"Example hint expander content for the radio button group.\"\n\t *   }'\n\t *   required=\"true\"\n\t * >\n\t * </ontario-radio-buttons>\n\t */\n\t@Prop() hintExpander?: HintExpander | string;\n\n\t/**\n\t * This is used to determine whether the radio button is required or not.\n\t * This prop also gets passed to the InputCaption utility to display either an optional or required flag in the label.\n\t * If no prop is set, it will default to false (optional).\n\t */\n\t@Prop() required?: boolean = false;\n\n\t/**\n\t * The options for the radio button group.\n\t *\n\t * Each property will be passed in through an object in the options array.\n\t * This can either be passed in as an object directly (if using react), or as a string in HTML.\n\t * If there are multiple radio buttons in a group, each radio button will be displayed as an option.\n\t *\n\t * In the example below, the options are being passed in as a string and there are two radio buttons to be displayed in the group.\n\t *\n\t * @example\n\t * <ontario-radio-buttons\n\t *   caption='{\n\t *     \"captionText\": \"Radio legend\",\n\t *     \"captionType\": \"heading\",\n\t *   }'\n\t *   name=\"radios\"\n\t *   hint-text=\"Hint text for the radio button group.\"\n\t *   options='[\n\t *     {\n\t *        \"value\": \"radio-option-1\",\n\t * \t\t  \"elementId\": \"radio-1\",\n\t *        \"label\": \"Radio option 1 label\"\n\t *     },\n\t *     {\n\t *        \"value\": \"radio-option-2\",\n\t * \t\t  \"elementId\": \"radio-2\",\n\t *        \"label\": \"Radio option 2 label\",\n\t *        \"hintExpander\": {\n\t *\t\t\t  \"hint\": \"Hint expander for radio option 2\",\n\t * \t\t      \"content\": \"Example hint expander content for radio option 2.\"\n\t *\t\t  }\n\t *      }\n\t *   ]'\n\t *   required=\"true\"\n\t * >\n\t * </ontario-radio-buttons>\n\t */\n\t@Prop() options: string | RadioOption[];\n\n\t/**\n\t * Set this to display an error message\n\t */\n\t@Prop({ mutable: true }) errorMessage?: string;\n\n\t/**\n\t * Used to add a custom function to the radio input onChange event.\n\t */\n\t@Prop() customOnChange?: (event: globalThis.Event) => void;\n\n\t/**\n\t * Used to add a custom function to the radio input onBlur event.\n\t */\n\t@Prop() customOnBlur?: (event: globalThis.Event) => void;\n\n\t/**\n\t * Used to add a custom function to the radio input onFocus event.\n\t */\n\t@Prop() customOnFocus?: (event: globalThis.Event) => void;\n\n\t/**\n\t * Used for the `aria-describedby` value of the radio button group. This will match with the id of the hint text.\n\t */\n\t@State() hintTextId: string | null | undefined;\n\n\t/**\n\t * The hint text options are re-assigned to the internalHintText array.\n\t */\n\t@State() private internalHintText: Hint;\n\n\t/**\n\t * The hint expander options are re-assigned to the internalHintExpander array.\n\t */\n\t@State() private internalHintExpander: HintExpander;\n\n\t/**\n\t * The options are re-assigned to the internalOptions array.\n\t */\n\t@State() private internalOptions: RadioOption[];\n\n\t/**\n\t * Instantiate an InputCaption object for internal logic use\n\t */\n\t@State() private captionState: InputCaption;\n\n\t/**\n\t * Emitted when a keyboard input or mouse event occurs when a radio option has been changed.\n\t */\n\t@Event({ eventName: 'radioOnChange' }) radioOnChange: EventEmitter<RadioAndCheckboxChangeEvent>;\n\n\t/**\n\t * Emitted when a keyboard input event occurs when a radio option has lost focus.\n\t */\n\t@Event({ eventName: 'radioOnBlur' }) radioOnBlur: EventEmitter<InputFocusBlurEvent>;\n\n\t/**\n\t * Emitted when a keyboard input event occurs when a radio option has gained focus.\n\t */\n\t@Event({ eventName: 'radioOnFocus' }) radioOnFocus: EventEmitter<InputFocusBlurEvent>;\n\n\t/**\n\t * Emitted when an error message is reported to the component.\n\t */\n\t@Event() inputErrorOccurred: EventEmitter<{ errorMessage: string }>;\n\n\t/**\n\t * This listens for the `setAppLanguage` event sent from the test language toggler when it is is connected to the DOM. It is used for the initial language when the input component loads.\n\t */\n\t@Listen('setAppLanguage', { target: 'window' })\n\thandleSetAppLanguage(event: CustomEvent<Language>) {\n\t\tif (!this.language) {\n\t\t\tthis.language = validateLanguage(event);\n\t\t}\n\t}\n\n\t@Listen('headerLanguageToggled', { target: 'window' })\n\thandleHeaderLanguageToggled(event: CustomEvent<Language>) {\n\t\tthis.language = validateLanguage(event);\n\t}\n\n\t/**\n\t * Watch for changes to the `hintText` prop.\n\t *\n\t * If a `hintText` prop is passed, the `constructHintTextObject` function will convert it to the correct format, and set the result to the `internalHintText` state.\n\t */\n\t@Watch('hintText')\n\tprivate parseHintText() {\n\t\tif (this.hintText) {\n\t\t\tconst hintTextObject = constructHintTextObject(this.hintText);\n\t\t\tthis.internalHintText = hintTextObject;\n\t\t}\n\t}\n\n\t/**\n\t * Watch for changes to the `hintExpander` prop.\n\t *\n\t * If a `hintExpander` prop is passed, it will be parsed (if it is a string), and the result will be set to the `internalHintExpander` state.\n\t */\n\t@Watch('hintExpander')\n\tprivate parseHintExpander() {\n\t\tconst hintExpander = this.hintExpander;\n\t\tif (hintExpander) {\n\t\t\tif (typeof hintExpander === 'string') this.internalHintExpander = JSON.parse(hintExpander);\n\t\t\telse this.internalHintExpander = hintExpander;\n\t\t}\n\t}\n\n\t/**\n\t * Watch for changes to the `options` prop.\n\t *\n\t * If an `options` prop is passed, it will be parsed (if it is a string), and the result will be set to the `internalOptions` state. The result will be run through a validation function.\n\t */\n\t@Watch('options')\n\tparseOptions() {\n\t\tif (typeof this.options !== 'undefined') {\n\t\t\tif (!Array.isArray(this.options)) {\n\t\t\t\tthis.internalOptions = JSON.parse(this.options);\n\t\t\t} else {\n\t\t\t\tthis.internalOptions = this.options;\n\t\t\t}\n\t\t}\n\t}\n\n\t/*\n\t * Watch for changes in the `name` prop for validation purposes.\n\t *\n\t * Validate the `name` and make sure the `name` prop has a value.\n\t * Log a warning if user doesn't input a value for the `name`.\n\t */\n\t@Watch('name')\n\tvalidateName(newValue: string) {\n\t\tif (validatePropExists(newValue)) {\n\t\t\tconst message = new ConsoleMessageClass();\n\t\t\tmessage\n\t\t\t\t.addDesignSystemTag()\n\t\t\t\t.addMonospaceText(' name ')\n\t\t\t\t.addRegularText('for')\n\t\t\t\t.addMonospaceText(' <ontario-radio-buttons> ')\n\t\t\t\t.addRegularText('was not provided')\n\t\t\t\t.printMessage();\n\t\t}\n\t}\n\n\t/*\n\t * Watch for changes in the `options` prop for validation purposes.\n\n\t * Validate the `options` and make sure the `options` prop has a value.\n\t * Log a warning if user doesn't input a value for the `options`.\n\t */\n\t@Watch('options')\n\tvalidateOptions(newValue: object) {\n\t\tif (validateObjectExists(newValue)) {\n\t\t\tconst message = new ConsoleMessageClass();\n\t\t\tmessage\n\t\t\t\t.addDesignSystemTag()\n\t\t\t\t.addMonospaceText(' options ')\n\t\t\t\t.addRegularText('for')\n\t\t\t\t.addMonospaceText(' <ontario-radio-buttons> ')\n\t\t\t\t.addRegularText('was not provided')\n\t\t\t\t.printMessage();\n\t\t}\n\t}\n\n\t/**\n\t * Watch for changes to the `caption` prop.\n\t *\n\t * The caption will be run through the InputCaption constructor to convert it to the correct format, and set the result to the `captionState` state.\n\t * @param newValue: Caption | string\n\t */\n\t@Watch('caption')\n\tupdateCaptionState(newValue: Caption | string) {\n\t\tthis.captionState = new InputCaption(\n\t\t\tthis.element.tagName,\n\t\t\tnewValue,\n\t\t\ttranslations,\n\t\t\tthis.language,\n\t\t\ttrue,\n\t\t\tthis.required,\n\t\t);\n\t}\n\n\t/**\n\t * Watch for changes to the `language` prop to render either the English or French translations\n\t */\n\t@Watch('language')\n\tupdateLanguage() {\n\t\tthis.updateCaptionState(this.caption);\n\t}\n\n\t@Watch('errorMessage')\n\tbroadcastInputErrorOccurredEvent() {\n\t\t// Emit event to notify anyone who wants to listen for errors occurring\n\t\tthis.inputErrorOccurred.emit({ errorMessage: this.errorMessage ?? '' });\n\t}\n\n\t/**\n\t * Function to handle radio buttons events and the information pertaining to the radio buttons to emit.\n\t */\n\tprivate handleEvent(event: Event, eventType: EventType) {\n\t\tconst input = event.target as HTMLInputElement | null;\n\n\t\t// Reset all internalOptions checked states\n\t\tconst changedOption = this.internalOptions\n\t\t\t.map((x) => {\n\t\t\t\tx.checked = false;\n\t\t\t\treturn x;\n\t\t\t})\n\t\t\t.find((x) => x.value === input?.value);\n\t\t// Set the new checked state for the selected value\n\t\tif (changedOption) changedOption.checked = !changedOption?.checked;\n\n\t\t// Set the value within the form\n\t\tthis.internals?.setFormValue?.(\n\t\t\tthis.internalOptions\n\t\t\t\t.filter((x) => !!x.checked)\n\t\t\t\t.reduce((formData, currentValue) => {\n\t\t\t\t\tformData.append(this.name, currentValue.value);\n\t\t\t\t\treturn formData;\n\t\t\t\t}, new FormData()),\n\t\t);\n\n\t\thandleInputEvent(\n\t\t\tevent,\n\t\t\teventType,\n\t\t\tinput,\n\t\t\tthis.radioOnChange,\n\t\t\tthis.radioOnFocus,\n\t\t\tthis.radioOnBlur,\n\t\t\tundefined,\n\t\t\t'radio',\n\t\t\tthis.customOnChange,\n\t\t\tthis.customOnFocus,\n\t\t\tthis.customOnBlur,\n\t\t\tundefined,\n\t\t\tthis.element,\n\t\t);\n\t}\n\n\t/**\n\t * If a `hintText` prop is passed, the id generated from it will be set to the internal `hintTextId` state to match with the fieldset `aria-describedBy` attribute.\n\t */\n\tasync componentDidLoad() {\n\t\tthis.hintTextId = await this.hintTextRef?.getHintTextId();\n\t}\n\n\tcomponentWillLoad() {\n\t\tthis.updateCaptionState(this.caption);\n\t\tthis.parseOptions();\n\t\tthis.parseHintText();\n\t\tthis.parseHintExpander();\n\t\tthis.validateName(this.name);\n\t\tthis.validateOptions(this.internalOptions);\n\t\tthis.language = validateLanguage(this.language);\n\t}\n\n\trender() {\n\t\tconst error = !!this.errorMessage;\n\t\treturn (\n\t\t\t<div class={`ontario-form-group ${error ? 'ontario-input--error' : ''}`}>\n\t\t\t\t<fieldset class=\"ontario-fieldset\" aria-describedby={this.hintTextId}>\n\t\t\t\t\t{this.captionState.getCaption(undefined, !!this.internalHintExpander)}\n\t\t\t\t\t{this.internalHintText && (\n\t\t\t\t\t\t<ontario-hint-text\n\t\t\t\t\t\t\thint={this.internalHintText.hint}\n\t\t\t\t\t\t\thintContentType={this.internalHintText.hintContentType}\n\t\t\t\t\t\t\tref={(el) => (this.hintTextRef = el)}\n\t\t\t\t\t\t></ontario-hint-text>\n\t\t\t\t\t)}\n\n\t\t\t\t\t<div class=\"ontario-radios\">\n\t\t\t\t\t\t<ErrorMessage message={this.errorMessage} error={error} />\n\t\t\t\t\t\t{this.internalOptions?.map((radioOption) => (\n\t\t\t\t\t\t\t<div class=\"ontario-radios__item\">\n\t\t\t\t\t\t\t\t<Input\n\t\t\t\t\t\t\t\t\tclassName=\"ontario-radios__input\"\n\t\t\t\t\t\t\t\t\tid={radioOption.elementId}\n\t\t\t\t\t\t\t\t\tname={this.name}\n\t\t\t\t\t\t\t\t\ttype=\"radio\"\n\t\t\t\t\t\t\t\t\tvalue={radioOption.value}\n\t\t\t\t\t\t\t\t\trequired={!!this.required}\n\t\t\t\t\t\t\t\t\tchecked={!!radioOption.checked}\n\t\t\t\t\t\t\t\t\tonChange={(e) => this.handleEvent(e, EventType.Change)}\n\t\t\t\t\t\t\t\t\tonBlur={(e) => this.handleEvent(e, EventType.Blur)}\n\t\t\t\t\t\t\t\t\tonFocus={(e) => this.handleEvent(e, EventType.Focus)}\n\t\t\t\t\t\t\t\t></Input>\n\t\t\t\t\t\t\t\t<label class=\"ontario-radios__label\" htmlFor={radioOption.elementId}>\n\t\t\t\t\t\t\t\t\t{radioOption.label}\n\t\t\t\t\t\t\t\t\t{radioOption.hintExpander &&\n\t\t\t\t\t\t\t\t\t\tthis.captionState.getHintExpanderAccessibilityText(radioOption.label, true)}\n\t\t\t\t\t\t\t\t</label>\n\n\t\t\t\t\t\t\t\t{radioOption.hintExpander && (\n\t\t\t\t\t\t\t\t\t<div class=\"ontario-radios__hint-expander\">\n\t\t\t\t\t\t\t\t\t\t<ontario-hint-expander\n\t\t\t\t\t\t\t\t\t\t\thint={radioOption.hintExpander.hint}\n\t\t\t\t\t\t\t\t\t\t\tcontent={radioOption.hintExpander.content}\n\t\t\t\t\t\t\t\t\t\t\thintContentType={radioOption.hintExpander.hintContentType}\n\t\t\t\t\t\t\t\t\t\t\tinput-exists\n\t\t\t\t\t\t\t\t\t\t></ontario-hint-expander>\n\t\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t))}\n\n\t\t\t\t\t\t{this.internalHintExpander && (\n\t\t\t\t\t\t\t<div class=\"ontario-radios__hint-expander\">\n\t\t\t\t\t\t\t\t<ontario-hint-expander\n\t\t\t\t\t\t\t\t\thint={this.internalHintExpander.hint}\n\t\t\t\t\t\t\t\t\tcontent={this.internalHintExpander.content}\n\t\t\t\t\t\t\t\t\thintContentType={this.internalHintExpander.hintContentType}\n\t\t\t\t\t\t\t\t\tinput-exists\n\t\t\t\t\t\t\t\t></ontario-hint-expander>\n\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t)}\n\t\t\t\t\t</div>\n\t\t\t\t</fieldset>\n\t\t\t</div>\n\t\t);\n\t}\n}\n"]}
+{"version":3,"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"]}