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

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

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

Files changed (2351) hide show

package/dist/components/ontario-dropdown-list.js CHANGED Viewed

@@ -1,24 +1,24 @@
-import { proxyCustomElement, HTMLElement, createEvent, getAssetPath, h } from '@stencil/core/internal/client';
-import { I as InputCaption, h as handleInputEvent, E as EventType } from './event-handler.js';
-import { v as validateLanguage, b as validatePropExists, c as validateObjectExists } from './validation-functions.js';
-import { C as ConsoleMessageClass } from './console-message.js';
-import { h as hasMultipleTrueValues } from './utils.js';
-import { c as constructHintTextObject } from './hints.js';
-import { t as translations } from './global.i18n.js';
-import { E as ErrorMessage } from './error-message.js';
-import { d as defineCustomElement$6 } from './ontario-hint-expander2.js';
-import { d as defineCustomElement$5 } from './ontario-hint-text2.js';
-import { d as defineCustomElement$4 } from './ontario-icon-alert-error2.js';
-import { d as defineCustomElement$3 } from './ontario-icon-chevron-down2.js';
-import { d as defineCustomElement$2 } from './ontario-icon-chevron-up2.js';
-import { v as v4 } from './v4.js';
+import { p as proxyCustomElement, H, d as createEvent, g as getAssetPath, h } from './p-846438ed.js';
+import { I as InputCaption, h as handleInputEvent, E as EventType } from './p-3fa830a3.js';
+import { v as validateLanguage, b as validatePropExists, c as validateObjectExists } from './p-edb765a1.js';
+import { C as ConsoleMessageClass } from './p-b2019a19.js';
+import { h as hasMultipleTrueValues } from './p-083804e2.js';
+import { c as constructHintTextObject } from './p-e77d78ce.js';
+import { t as translations } from './p-a5331e15.js';
+import { E as ErrorMessage } from './p-8874216e.js';
+import { d as defineCustomElement$6 } from './p-9c61c9bc.js';
+import { d as defineCustomElement$5 } from './p-226df20b.js';
+import { d as defineCustomElement$4 } from './p-c13fee12.js';
+import { d as defineCustomElement$3 } from './p-1dc1dba8.js';
+import { d as defineCustomElement$2 } from './p-77545837.js';
+import { v as v4 } from './p-a8cac0fc.js';
 const ontarioDropdownListCss =
 	'@charset "UTF-8";h6,.ontario-h6,h5,.ontario-h5,h4,.ontario-h4,h3,.ontario-h3,h2,.ontario-h2,h1>.ontario-label--heading,.ontario-fieldset__legend--large h1,.ontario-fieldset__legend--heading h1,h1,.ontario-h1{font-style:normal;font-weight:700;text-rendering:optimizeLegibility;margin-bottom:1rem;font-feature-settings:normal;font-family:"Raleway", "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif}h1>.ontario-label--heading,.ontario-fieldset__legend--large h1,.ontario-fieldset__legend--heading h1,h1,.ontario-h1{font-size:2rem;letter-spacing:0.04rem;line-height:1.29;margin:2.5rem 0 1.5rem 0;max-width:70rem}@media screen and (min-width: 40em){h1>.ontario-label--heading,.ontario-fieldset__legend--large h1,.ontario-fieldset__legend--heading h1,h1,.ontario-h1{font-size:2.5rem;letter-spacing:0.04rem;line-height:1.2}}h2,.ontario-h2{font-size:1.6875rem;letter-spacing:0.03rem;line-height:1.37;margin:0 0 0.75rem 0;max-width:48rem}@media screen and (min-width: 40em){h2,.ontario-h2{font-size:2.0625rem;letter-spacing:0.02rem;line-height:1.33}}h3,.ontario-h3{font-size:1.4375rem;letter-spacing:0.02rem;line-height:1.39;margin:0 0 0.75rem 0;max-width:48rem}@media screen and (min-width: 40em){h3,.ontario-h3{font-size:1.75rem;letter-spacing:0.02rem;line-height:1.43}}h4,.ontario-h4{font-size:1.25rem;letter-spacing:0.03rem;line-height:1.5;margin:0 0 0.75rem 0;max-width:48rem}@media screen and (min-width: 40em){h4,.ontario-h4{font-size:1.5rem;letter-spacing:0.0313rem;line-height:1.5}}h5,.ontario-h5{font-size:1.125rem;letter-spacing:0.03rem;line-height:1.56;margin:0 0 0.75rem 0;max-width:48rem}@media screen and (min-width: 40em){h5,.ontario-h5{font-size:1.1875rem;letter-spacing:0.025rem;line-height:1.5}}h6,.ontario-h6{font-size:1rem;line-height:1.56;letter-spacing:0.03rem;max-width:48rem;margin:0 0 0.75rem 0}@media screen and (min-width: 40em){h6,.ontario-h6{font-size:1rem;letter-spacing:0.025rem;line-height:1.5}}.ontario-lead-statement{font-size:1.25rem;line-height:1.6;max-width:70rem}@media screen and (min-width: 40em){.ontario-lead-statement{font-size:1.375rem}}html{font-family:"Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;font-size:1rem}body{font-size:1rem;line-height:1.6;background-color:#FFFFFF;color:#1a1a1a;margin:0}p{font-size:inherit;margin-bottom:1.25rem;text-rendering:optimizeLegibility;margin:0 0 1.5rem 0}cite{font-style:italic;line-height:inherit}strong{font-weight:700;line-height:inherit}*,*::before,*::after{box-sizing:inherit}main p,main p:not(.ontario-lead-statement),main dd,main li{max-width:48rem}hr{border:0;padding:0;margin:2.5rem 0;border-bottom:4px solid #cccccc}hr.ontario-hr--dark{border-bottom:4px solid #1a1a1a}a{color:#0066CC;text-decoration:underline}a:visited{color:#551A8B}a:hover{color:#00478F}a:active{color:#002142}a:focus{-moz-box-shadow:0 0 0 4px #009ADB;-webkit-box-shadow:0 0 0 4px #009ADB;box-shadow:0 0 0 4px #009ADB;outline:4px solid transparent;transition:all 0.1s ease-in-out}p{margin:0 0 1.5rem 0}p+h1,p+h2,p+h3,p+h4,p+h5,p+h6,ul+h1,ul+h2,ul+h3,ul+h4,ul+h5,ul+h6,ol+h1,ol+h2,ol+h3,ol+h4,ol+h5,ol+h6,h1+h2,h2+h3,h3+h4,h4+h5,h5+h6{margin-top:2rem}p code,td code,li code{line-height:2.25rem}input[type=text],input[type=number],input[type=email],input[type=date],input[type=color],input[type=search],input[type=tel],textarea{background-origin:initial;height:auto;-webkit-appearance:none;-moz-appearance:none}input[type=checkbox]+label,input[type=radio]+label{font-family:"Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;font-size:1rem;font-weight:400;margin-left:0;margin-right:0}fieldset{border:0;margin:0;padding:0;page-break-inside:avoid}legend,label{display:block;margin:0}select{background-origin:initial;height:auto;-webkit-appearance:none;-moz-appearance:none}ul,ol{padding:0}ul{margin-left:2rem}ul li{padding:0 0 0.75rem 0}ol{margin-left:1.75rem}ol li{padding:0 0 0.75rem 0.25rem}ul li:last-child,ol li:last-child{padding-bottom:0}ul[class*=columns-] li:last-child,ol[class*=columns-] li:last-child{padding-bottom:0.75rem}ul ul,ol ul{margin:0.5rem 0 0.5rem 2rem}ul ol,ol ol{margin:0.5rem 0 0.5rem 1.75rem}p+ul,p+ol{margin-top:-0.75rem}@media screen and (min-width: 40em){ul{margin:0.5rem 0 1.5rem 3rem}ol{margin:0.5rem 0 1.5rem 2.75rem}ul ul,ol ul{margin:0.5rem 0 0.5rem 3rem}ul ol,ol ol{margin:0.5rem 0 0.5rem 2.75rem}}.ontario-form-group:last-of-type{margin-bottom:2.5rem}.ontario-form-group:last-of-type{margin-bottom:3rem}.ontario-fieldset__legend{color:#1a1a1a;font-family:"Raleway", "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;font-size:1.1875rem;font-weight:700;margin:0 0 1rem 0;line-height:1.5;max-width:38.75em;white-space:normal;width:100%;hyphens:auto}@media screen and (max-width: 40em){.ontario-fieldset__legend{font-size:1.125rem;line-height:1.56}}.ontario-fieldset__legend--large,.ontario-fieldset__legend--heading{letter-spacing:0.02rem;line-height:1.2}.ontario-fieldset__legend--large h1,.ontario-fieldset__legend--heading h1{display:inline-block;margin:0}@media screen and (max-width: 40em){.ontario-fieldset__legend--large,.ontario-fieldset__legend--heading{font-size:1.4375rem;line-height:1.39}}.ontario-fieldset__legend--large{font-size:1.75rem}.ontario-fieldset__legend-required-flag,.ontario-fieldset__legend-optional-flag{font-family:"Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;font-size:1rem;font-weight:400}.ontario-fieldset__legend-required-flag:before,.ontario-fieldset__legend-optional-flag:before{content:" "}.ontario-label__flag{font-family:"Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;font-size:1rem;font-weight:400}.ontario-label__flag:before{content:" "}.ontario-label{cursor:pointer;color:#1a1a1a;font-family:"Raleway", "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;font-size:1.1875rem;font-weight:700;line-height:1.5;margin:0 0 1rem 0;max-width:38.75em;white-space:normal;width:100%;hyphens:auto}@media screen and (max-width: 40em){.ontario-label{font-size:1.125rem;line-height:1.56}}.ontario-label--large{font-size:1.75rem;letter-spacing:0.02rem;line-height:1.2;max-width:26.25em}@media screen and (max-width: 40em){.ontario-label--large{font-size:1.4375rem;line-height:1.39}}h1>.ontario-label--heading{display:inline-block;margin:0}.ontario-label__flag{font-family:"Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;font-size:1rem;font-weight:400}.ontario-label__flag:before{content:" "}.ontario-input:focus,.ontario-input:active{box-shadow:0 0 0 4px #009ADB;outline:4px solid transparent;transition:box-shadow 0.1s ease-in-out}.ontario-input{border:2px solid #1a1a1a;border-radius:4px;box-sizing:border-box;color:#1a1a1a;display:block;font-size:1rem;font-family:"Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;line-height:1.5;margin:0 0 2.5rem;max-width:48rem;width:100%;padding:0.625rem 1rem;transition:box-shadow 0.1s ease-in-out}.ontario-input--2-char-width{max-width:8ex}.ontario-input--3-char-width{max-width:10ex}.ontario-input--4-char-width{max-width:12ex}.ontario-input--5-char-width{max-width:14ex}.ontario-input--7-char-width{max-width:17ex}.ontario-input--10-char-width{max-width:23ex}.ontario-input--20-char-width{max-width:41ex}.ontario-form-group:last-of-type{margin-bottom:2.5rem}.ontario-hide{display:none !important}.ontario-invisible{visibility:hidden !important}@media screen and (max-width: 39.99875em){.ontario-hide-for-small-only{display:none !important}}@media screen and (max-width: 0em), screen and (min-width: 40em){.ontario-show-for-small-only{display:none !important}}@media print, screen and (min-width: 40em){.ontario-hide-for-medium{display:none !important}}@media screen and (max-width: 39.99875em){.ontario-show-for-medium{display:none !important}}@media screen and (min-width: 40em) and (max-width: 72.99875em){.ontario-hide-for-medium-only{display:none !important}}@media screen and (max-width: 39.99875em), screen and (min-width: 73em){.ontario-show-for-medium-only{display:none !important}}@media print, screen and (min-width: 73em){.ontario-hide-for-large{display:none !important}}@media screen and (max-width: 72.99875em){.ontario-show-for-large{display:none !important}}@media screen and (min-width: 73em) and (max-width: 95.99875em){.ontario-hide-for-large-only{display:none !important}}@media screen and (max-width: 72.99875em), screen and (min-width: 96em){.ontario-show-for-large-only{display:none !important}}.ontario-show-for-sr,.ontario-show-on-focus{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0, 0, 0, 0)}.ontario-show-on-focus:active,.ontario-show-on-focus:focus{position:static;width:auto;height:auto;overflow:visible;clip:auto}.ontario-show-for-landscape,.ontario-hide-for-portrait{display:block !important}@media screen and (orientation: landscape){.ontario-show-for-landscape,.ontario-hide-for-portrait{display:block !important}}@media screen and (orientation: portrait){.ontario-show-for-landscape,.ontario-hide-for-portrait{display:none !important}}.ontario-hide-for-landscape,.ontario-show-for-portrait{display:none !important}@media screen and (orientation: landscape){.ontario-hide-for-landscape,.ontario-show-for-portrait{display:none !important}}@media screen and (orientation: portrait){.ontario-hide-for-landscape,.ontario-show-for-portrait{display:block !important}}.ontario-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-dropdown{background-color:#FFFFFF;background-position:right 0.5rem center;background-repeat:no-repeat;background-size:2rem;padding-right:2.25rem;cursor:pointer}.ontario-dropdown.ontario-dropdown-hint-expander--true{margin-bottom:1rem}.ontario-dropdown::-ms-expand{display:none}.ontario-dropdown option{font-weight:normal}.ontario-dropdown--error select{border:0.125rem solid #CD0000}';
 const OntarioDropdownListStyle0 = ontarioDropdownListCss;
 const OntarioDropdownList$1 = /*@__PURE__*/ proxyCustomElement(
-	class OntarioDropdownList extends HTMLElement {
+	class OntarioDropdownList extends H {
 		constructor() {
 			super();
 			this.__registerHost();
@@ -28,26 +28,187 @@ const OntarioDropdownList$1 = /*@__PURE__*/ proxyCustomElement(
 			this.dropdownOnFocus = createEvent(this, 'dropdownOnFocus', 7);
 			this.inputErrorOccurred = createEvent(this, 'inputErrorOccurred', 7);
 			this.internals = this.attachInternals();
-			this.caption = undefined;
-			this.language = undefined;
-			this.name = undefined;
-			this.elementId = undefined;
-			this.options = undefined;
-			this.required = false;
-			this.isEmptyStartOption = false;
-			this.hintText = undefined;
-			this.hintExpander = undefined;
-			this.errorMessage = undefined;
-			this.customOnChange = undefined;
-			this.customOnBlur = undefined;
-			this.customOnFocus = undefined;
-			this.hintTextId = undefined;
-			this.captionState = undefined;
-			this.internalOptions = undefined;
-			this.internalHintText = undefined;
-			this.internalHintExpander = undefined;
-			this.translations = translations;
 		}
+		get element() {
+			return this;
+		}
+		internals;
+		hintTextRef;
+		/**
+		 * The text to display for the dropdown list label.
+		 *
+		 * @example
+		 * <ontario-dropdown-list
+		 *   name="ontario-dropdown-list"
+		 *   caption='{
+		 *     "captionText": "Label",
+		 *     "captionType": "heading",
+		 *   }'
+		 *   ...>
+		 * </ontario-dropdown-list>
+		 */
+		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 for the dropdown list. The name value is used to reference form data after a form is submitted.
+		 */
+		name;
+		/**
+		 * The ID for the dropdown list.
+		 * If no ID is provided, one will be generated.
+		 */
+		elementId;
+		/**
+		 * The options for dropdown list.
+		 *
+		 * Each option 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.
+		 *
+		 * In the example below, the options are being passed in as a string and there are three dropdown options displayed.
+		 *
+		 * @example
+		 * <ontario-dropdown-list
+		 *   caption='{
+		 *     "captionText": "Label",
+		 *     "captionType": "heading",
+		 *   }'
+		 *   name="ontario-dropdown-list"
+		 *   options='[
+		 *     {
+		 *       "value": "dropdown-option-1",
+		 *       "label": "Option 1",
+		 *       "selected": "true"
+		 *     },
+		 *     {
+		 *       "value": "dropdown-option-2",
+		 *       "label": "Option 2"
+		 *     },
+		 *     {
+		 *       "value": "dropdown-option-3",
+		 *       "label": "Option 3"
+		 *     }
+		 *   ]'
+		 * >
+		 * </ontario-dropdown-list>
+		 */
+		options;
+		/**
+		 * This is used to determine whether the dropdown list 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;
+		/**
+		 * This prop is used to determine whether or not the initial option displayed is empty.
+		 * If set to `true`, it will render the default “select” text.
+		 * If set to a string, it will render the string value.
+		 *
+		 * @example
+		 * <ontario-dropdown-list is-empty-start-option="true"></ontario-dropdown-list>
+		 *
+		 * or
+		 *
+		 * <ontario-dropdown-list is-empty-start-option="Please select"></ontario-dropdown-list>
+		 */
+		isEmptyStartOption = false;
+		/**
+		 * Used to include the ontario-hint-text component for the dropdown list.
+		 * This is optional.
+		 */
+		hintText;
+		/**
+		 * Used to include the ontario-hint-expander component for the dropdown list component.
+		 * This is passed in as an object with key-value pairs.
+		 *
+		 * This is optional.
+		 *
+		 * @example
+		 * <ontario-dropdown-list
+		 *   caption='{
+		 *     "caption": "What province do you live in?",
+		 *     "captionType": "heading",
+		 *   }
+		 *   name="ontario-dropdown-list"
+		 *   options='[
+		 *     {
+		 *       "value": "dropdown-option-1",
+		 *       "label": "Option 1",
+		 *       "selected": "true"
+		 *     },
+		 *     {
+		 *       "value": "dropdown-option-2",
+		 *       "label": "Option 2"
+		 *     },
+		 *     {
+		 *       "value": "dropdown-option-3",
+		 *       "label": "Option 3"
+		 *     }
+		 *   ]'
+		 *   hint-expander='{
+		 *    "hint": "Hint expander for the dropdown list",
+		 *    "content": "Example hint expander content for the dropdown list."
+		 *   }'
+		 * >
+		 * </ontario-dropdown-list>
+		 */
+		hintExpander;
+		/**
+		 * Set this to display an error message
+		 */
+		errorMessage;
+		/**
+		 * Used to add a custom function to the dropdown onChange event.
+		 */
+		customOnChange;
+		/**
+		 * Used to add a custom function to the dropdown onBlur event.
+		 */
+		customOnBlur;
+		/**
+		 * Used to add a custom function to the dropdown onFocus event.
+		 */
+		customOnFocus;
+		/**
+		 * Used for the `aria-describedby` value of the dropdown list. This will match with the id of the hint text.
+		 */
+		hintTextId;
+		/**
+		 * Instantiate an InputCaption object for internal logic use
+		 */
+		captionState;
+		/**
+		 * The options are re-assigned to the internalOptions array.
+		 */
+		internalOptions;
+		/**
+		 * The hint text options are re-assigned to the internalHintText array.
+		 */
+		internalHintText;
+		/**
+		 * The hint expander options are re-assigned to the internalHintExpander array.
+		 */
+		internalHintExpander;
+		translations = translations;
+		/**
+		 * Emitted when a keyboard input or mouse event occurs when a dropdown list has been changed.
+		 */
+		dropdownOnChange;
+		/**
+		 * Emitted when a keyboard input event occurs when a dropdown list has lost focus.
+		 */
+		dropdownOnBlur;
+		/**
+		 * Emitted when a keyboard input event occurs when a dropdown list has gained focus.
+		 */
+		dropdownOnFocus;
+		/**
+		 * 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.
 		 */
@@ -157,22 +318,15 @@ const OntarioDropdownList$1 = /*@__PURE__*/ proxyCustomElement(
 			}
 		}
 		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 dropdown list events and the information pertaining to the dropdown list to emit.
 		 */
 		handleEvent(event, eventType) {
-			var _a, _b, _c;
 			const input = event.target;
-			(_b = (_a = this.internals) === null || _a === void 0 ? void 0 : _a.setFormValue) === null || _b === void 0
-				? void 0
-				: _b.call(
-						_a,
-						(_c = input === null || input === void 0 ? void 0 : input.value) !== null && _c !== void 0 ? _c : '',
-				  );
+			this.internals?.setFormValue?.(input?.value ?? '');
 			handleInputEvent(
 				event,
 				eventType,
@@ -190,8 +344,7 @@ const OntarioDropdownList$1 = /*@__PURE__*/ proxyCustomElement(
 			);
 		}
 		getId() {
-			var _a;
-			return (_a = this.elementId) !== null && _a !== void 0 ? _a : '';
+			return this.elementId ?? '';
 		}
 		/**
 		 * This function will set a selected key to `false` for each dropdown if no selected value is passed.
@@ -235,41 +388,39 @@ const OntarioDropdownList$1 = /*@__PURE__*/ proxyCustomElement(
 		 * If a `hintText` prop is passed, the id generated from it will be set to the internal `hintTextId` state to match with the select `aria-describedBy` attribute.
 		 */
 		async componentDidLoad() {
-			var _a;
-			this.hintTextId = await ((_a = this.hintTextRef) === null || _a === void 0 ? void 0 : _a.getHintTextId());
+			this.hintTextId = await this.hintTextRef?.getHintTextId();
 		}
 		componentWillLoad() {
-			var _a;
 			this.updateCaptionState(this.caption);
 			this.parseOptions();
 			this.validateName(this.name);
 			this.validateOptions(this.internalOptions);
-			this.elementId = (_a = this.elementId) !== null && _a !== void 0 ? _a : v4();
+			this.elementId = this.elementId ?? v4();
 			this.parseHintText();
 			this.parseHintExpander();
 			this.language = validateLanguage(this.language);
 		}
 		render() {
-			var _a, _b;
 			const error = !!this.errorMessage;
 			return h(
 				'div',
 				{
-					key: 'ca643f766df1fc328e3205081d431019d30dc0cd',
+					key: 'b1f20baa914cb2e6b5aa3adbf65874405d4e4a41',
 					class: `ontario-form-group ${error ? 'ontario-dropdown--error' : ''}`,
 				},
 				this.captionState.getCaption(this.getId(), !!this.internalHintExpander),
 				this.internalHintText &&
 					h('ontario-hint-text', {
+						key: '17c59f4034c2d5e06a85fce40a2d01b3d6281b69',
 						hint: this.internalHintText.hint,
 						hintContentType: this.internalHintText.hintContentType,
 						ref: (el) => (this.hintTextRef = el),
 					}),
-				h(ErrorMessage, { key: '3de2a252ed98bec1fa87c05e167e1353c03bb9af', message: this.errorMessage, error: error }),
+				h(ErrorMessage, { key: 'a6f87a75fd1e2524070cb8568f3f4794f6f4a3c7', message: this.errorMessage, error: error }),
 				h(
 					'select',
 					{
-						'key': '4f0955df8834e24b4c3ab1afe6add517d6c78155',
+						'key': 'a1dd7b8def235882b70b0b453eab5f1ea24f6984',
 						'class': this.getClass(),
 						'aria-describedby': this.hintTextId,
 						'id': this.getId(),
@@ -284,17 +435,13 @@ const OntarioDropdownList$1 = /*@__PURE__*/ proxyCustomElement(
 						(this.isEmptyStartOption === true || this.isEmptyStartOption === 'true'
 							? h('option', null, this.translations.dropdownList.select[`${this.language}`])
 							: h('option', null, this.isEmptyStartOption)),
-					(_b =
-						(_a = this.internalOptions) === null || _a === void 0
-							? void 0
-							: _a.map((dropdown) =>
-									h('option', { value: dropdown.value, selected: dropdown.selected }, dropdown.label),
-							  )) !== null && _b !== void 0
-						? _b
-						: '',
+					this.internalOptions?.map((dropdown) =>
+						h('option', { value: dropdown.value, selected: dropdown.selected }, dropdown.label),
+					) ?? '',
 				),
 				this.internalHintExpander &&
 					h('ontario-hint-expander', {
+						key: '42eaeb6098f2120d6e4ba5517ee3e398ff8769d8',
 						hint: this.internalHintExpander.hint,
 						content: this.internalHintExpander.content,
 						hintContentType: this.internalHintExpander.hintContentType,
@@ -307,9 +454,6 @@ const OntarioDropdownList$1 = /*@__PURE__*/ proxyCustomElement(
 		static get assetsDirs() {
 			return ['./assets'];
 		}
-		get element() {
-			return this;
-		}
 		static get watchers() {
 			return {
 				name: ['validateName'],

package/dist/components/ontario-dropdown-list.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"ontario-dropdown-list.js","mappings":"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","names":["OntarioDropdownList","uuid"],"sources":["src/components/ontario-dropdown-list/ontario-dropdown-list.scss?tag=ontario-dropdown-list&encapsulation=shadow","src/components/ontario-dropdown-list/ontario-dropdown-list.tsx"],"sourcesContent":["@use '@ongov/ontario-design-system-global-styles/dist/styles/scss/1-variables/spacing.variables' as spacing;\n@use '@ongov/ontario-design-system-global-styles/dist/styles/scss/1-variables/colours.variables' as colours;\n@use '@ongov/ontario-design-system-global-styles/dist/styles/scss/4-elements/_global.elements.scss';\n@use '../../styles/form.scss';\n@forward '../../utils/components/error-message/error-message';\n\n$ontario-dropdown-border-width: 0.125rem;\n\n.ontario-dropdown {\n\tbackground-color: colours.$ontario-colour-white;\n\tbackground-position: right spacing.$spacing-2 center;\n\tbackground-repeat: no-repeat;\n\tbackground-size: spacing.$spacing-6;\n\tpadding-right: (spacing.$spacing-4 * 2.25);\n\tcursor: pointer;\n\n\t&.ontario-dropdown-hint-expander--true {\n\t\tmargin-bottom: spacing.$spacing-4;\n\t}\n}\n\n/* These styles are to fix differences in default styling for dropdowns in IE /\n.ontario-dropdown::-ms-expand {\n\tdisplay: none;\n}\n\n.ontario-dropdown option {\n\tfont-weight: normal;\n}\n\n.ontario-dropdown--error {\n\tselect {\n\t\tborder: $ontario-dropdown-border-width solid colours.$ontario-colour-alert;\n\t}\n}\n","import {\n\tComponent,\n\tState,\n\tElement,\n\th,\n\tProp,\n\tEvent,\n\tListen,\n\tWatch,\n\tgetAssetPath,\n\tEventEmitter,\n\tAttachInternals,\n} from '@stencil/core';\nimport { v4 as uuid } from 'uuid';\n\nimport { DropdownOption } from './dropdown-option.interface';\nimport { Dropdown } from './dropdown.interface';\nimport { HintExpander } from '../ontario-hint-expander/hint-expander.interface';\n\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 {\n\tvalidateObjectExists,\n\tvalidatePropExists,\n\tvalidateLanguage,\n} from '../../utils/validation/validation-functions';\nimport { ConsoleMessageClass } from '../../utils/console-message/console-message';\nimport { hasMultipleTrueValues } from '../../utils/helper/utils';\nimport { Language } from '../../utils/common/language-types';\nimport { constructHintTextObject } from '../../utils/components/hints/hints';\nimport { InputFocusBlurEvent, EventType, InputInteractionEvent } 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-dropdown-list',\n\tstyleUrl: 'ontario-dropdown-list.scss',\n\tshadow: true,\n\tformAssociated: true,\n\tassetsDirs: ['./assets'],\n})\nexport class OntarioDropdownList implements Dropdown {\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 dropdown list label.\n\t \n\t @example\n\t * <ontario-dropdown-list\n\t * name=\"ontario-dropdown-list\"\n\t * caption='{\n\t * \"captionText\": \"Label\",\n\t * \"captionType\": \"heading\",\n\t * }'\n\t * ...>\n\t * </ontario-dropdown-list>\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 for the dropdown list. The name value is used to reference form data after a form is submitted.\n\t /\n\t@Prop() name: string;\n\n\t/\n\t The ID for the dropdown list.\n\t * If no ID is provided, one will be generated.\n\t /\n\t@Prop({ mutable: true }) elementId?: string;\n\n\t/\n\t The options for dropdown list.\n\t \n\t Each option 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 \n\t In the example below, the options are being passed in as a string and there are three dropdown options displayed.\n\t \n\t @example\n\t * <ontario-dropdown-list\n\t * caption='{\n\t * \"captionText\": \"Label\",\n\t * \"captionType\": \"heading\",\n\t * }'\n\t * name=\"ontario-dropdown-list\"\n\t * options='[\n\t * {\n\t * \"value\": \"dropdown-option-1\",\n\t * \"label\": \"Option 1\",\n\t * \"selected\": \"true\"\n\t * },\n\t * {\n\t * \"value\": \"dropdown-option-2\",\n\t * \"label\": \"Option 2\"\n\t * },\n\t * {\n\t * \"value\": \"dropdown-option-3\",\n\t * \"label\": \"Option 3\"\n\t * }\n\t * ]'\n\t * >\n\t * </ontario-dropdown-list>\n\t /\n\t@Prop() options: string \| DropdownOption[];\n\n\t/\n\t This is used to determine whether the dropdown list 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 This prop is used to determine whether or not the initial option displayed is empty.\n\t * If set to `true`, it will render the default “select” text.\n\t * If set to a string, it will render the string value.\n\t \n\t @example\n\t * <ontario-dropdown-list is-empty-start-option=\"true\"></ontario-dropdown-list>\n\t \n\t or\n\t \n\t <ontario-dropdown-list is-empty-start-option=\"Please select\"></ontario-dropdown-list>\n\t /\n\t@Prop() isEmptyStartOption?: boolean \| string = false;\n\n\t/\n\t Used to include the ontario-hint-text component for the dropdown list.\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 dropdown list component.\n\t * This is passed in as an object with key-value pairs.\n\t \n\t This is optional.\n\t \n\t @example\n\t * <ontario-dropdown-list\n\t * caption='{\n\t * \"caption\": \"What province do you live in?\",\n\t * \"captionType\": \"heading\",\n\t * }\n\t * name=\"ontario-dropdown-list\"\n\t * options='[\n\t * {\n\t * \"value\": \"dropdown-option-1\",\n\t * \"label\": \"Option 1\",\n\t * \"selected\": \"true\"\n\t * },\n\t * {\n\t * \"value\": \"dropdown-option-2\",\n\t * \"label\": \"Option 2\"\n\t * },\n\t * {\n\t * \"value\": \"dropdown-option-3\",\n\t * \"label\": \"Option 3\"\n\t * }\n\t * ]'\n\t * hint-expander='{\n\t * \"hint\": \"Hint expander for the dropdown list\",\n\t * \"content\": \"Example hint expander content for the dropdown list.\"\n\t * }'\n\t * >\n\t * </ontario-dropdown-list>\n\t /\n\t@Prop() hintExpander?: HintExpander \| string;\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 dropdown 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 dropdown 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 dropdown 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 dropdown list. This will match with the id of the hint text.\n\t /\n\t@State() hintTextId: string \| null \| undefined;\n\n\t/\n\t Instantiate an InputCaption object for internal logic use\n\t /\n\t@State() private captionState: InputCaption;\n\n\t/\n\t The options are re-assigned to the internalOptions array.\n\t /\n\t@State() private internalOptions: DropdownOption[];\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@State() translations: any = translations;\n\n\t/\n\t Emitted when a keyboard input or mouse event occurs when a dropdown list has been changed.\n\t /\n\t@Event() dropdownOnChange: EventEmitter<InputInteractionEvent>;\n\n\t/\n\t Emitted when a keyboard input event occurs when a dropdown list has lost focus.\n\t /\n\t@Event() dropdownOnBlur: EventEmitter<InputFocusBlurEvent>;\n\n\t/\n\t Emitted when a keyboard input event occurs when a dropdown list has gained focus.\n\t /\n\t@Event() dropdownOnFocus: 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 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-dropdown-list> ')\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\t \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-dropdown-list> ')\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 `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\n\t\t// Check selected status of options and set the selectedValue\n\t\tthis.validateSelectedOption(this.internalOptions);\n\t}\n\n\t/\n\t Watch for changes to the `caption` prop.\n\t \n\t The caption will be run through the InputCaption constructor to convert it to the correct format, and set the result to the `captionState` state.\n\t * @param newValue: Caption \| string\n\t /\n\t@Watch('caption')\n\tprivate updateCaptionState(newValue: Caption \| string) {\n\t\tthis.captionState = new InputCaption(\n\t\t\tthis.element.tagName,\n\t\t\tnewValue,\n\t\t\ttranslations,\n\t\t\tthis.language,\n\t\t\tfalse,\n\t\t\tthis.required,\n\t\t);\n\t}\n\n\t/\n\t Watch for changes to the `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 `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 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@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 dropdown list events and the information pertaining to the dropdown list to emit.\n\t /\n\tprivate handleEvent(event: Event, eventType: EventType) {\n\t\tconst input = event.target as HTMLSelectElement \| null;\n\n\t\tthis.internals?.setFormValue?.(input?.value ?? '');\n\n\t\thandleInputEvent(\n\t\t\tevent,\n\t\t\teventType,\n\t\t\tinput,\n\t\t\tthis.dropdownOnChange,\n\t\t\tthis.dropdownOnFocus,\n\t\t\tthis.dropdownOnBlur,\n\t\t\tundefined,\n\t\t\t'dropdown',\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\tpublic getId(): string {\n\t\treturn this.elementId ?? '';\n\t}\n\n\t/\n\t This function will set a selected key to `false` for each dropdown if no selected value is passed.\n\t \n\t It will also pass a warning to the user if multiple `true` selected values are passed.\n\t \n\t @param options\n\t * @returns options\n\t /\n\tprivate validateSelectedOption(options: DropdownOption[]) {\n\t\tconst selected = 'selected';\n\n\t\toptions.forEach((singleOption) => {\n\t\t\t// if no selected key is passed, set a default key to false\n\t\t\tif (!singleOption.hasOwnProperty(selected)) {\n\t\t\t\tsingleOption.selected = false;\n\t\t\t}\n\t\t});\n\n\t\tif (hasMultipleTrueValues(options, selected)) {\n\t\t\tconst message = new ConsoleMessageClass();\n\t\t\tmessage\n\t\t\t\t.addDesignSystemTag()\n\t\t\t\t.addMonospaceText(' There are duplicate truthy `selected` values ')\n\t\t\t\t.addRegularText('for')\n\t\t\t\t.addMonospaceText(' <ontario-dropdown-list> ')\n\t\t\t\t.addRegularText('options. Please update options so only one truthy `selected` value exists.')\n\t\t\t\t.printMessage();\n\t\t}\n\n\t\treturn options;\n\t}\n\n\tprivate getDropdownArrow() {\n\t\treturn {\n\t\t\tbackgroundImage: `url(${getAssetPath('./assets/ontario-material-dropdown-arrow-48px.svg')})`,\n\t\t};\n\t}\n\n\tprivate getClass(): string {\n\t\treturn this.hintExpander\n\t\t\t? `ontario-input ontario-dropdown ontario-dropdown-hint-expander--true`\n\t\t\t: `ontario-input ontario-dropdown`;\n\t}\n\n\t/\n\t If a `hintText` prop is passed, the id generated from it will be set to the internal `hintTextId` state to match with the select `aria-describedBy` attribute.\n\t */\n\tasync componentDidLoad() {\n\t\tthis.hintTextId = await this.hintTextRef?.getHintTextId();\n\t}\n\n\tcomponentWillLoad() {\n\t\tthis.updateCaptionState(this.caption);\n\t\tthis.parseOptions();\n\t\tthis.validateName(this.name);\n\t\tthis.validateOptions(this.internalOptions);\n\t\tthis.elementId = this.elementId ?? uuid();\n\t\tthis.parseHintText();\n\t\tthis.parseHintExpander();\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-dropdown--error' : ''}`}>\n\t\t\t\t{this.captionState.getCaption(this.getId(), !!this.internalHintExpander)}\n\t\t\t\t{this.internalHintText && (\n\t\t\t\t\t<ontario-hint-text\n\t\t\t\t\t\thint={this.internalHintText.hint}\n\t\t\t\t\t\thintContentType={this.internalHintText.hintContentType}\n\t\t\t\t\t\tref={(el) => (this.hintTextRef = el)}\n\t\t\t\t\t></ontario-hint-text>\n\t\t\t\t)}\n\t\t\t\t<ErrorMessage message={this.errorMessage} error={error} />\n\t\t\t\t<select\n\t\t\t\t\tclass={this.getClass()}\n\t\t\t\t\taria-describedby={this.hintTextId}\n\t\t\t\t\tid={this.getId()}\n\t\t\t\t\tname={this.name}\n\t\t\t\t\tstyle={this.getDropdownArrow()}\n\t\t\t\t\tonChange={(e) => this.handleEvent(e, EventType.Change)}\n\t\t\t\t\tonBlur={(e) => this.handleEvent(e, EventType.Blur)}\n\t\t\t\t\tonFocus={(e) => this.handleEvent(e, EventType.Focus)}\n\t\t\t\t\trequired={!!this.required}\n\t\t\t\t>\n\t\t\t\t\t{this.isEmptyStartOption &&\n\t\t\t\t\t\t(this.isEmptyStartOption === true \|\| this.isEmptyStartOption === 'true' ? (\n\t\t\t\t\t\t\t<option>{this.translations.dropdownList.select[`${this.language}`]}</option>\n\t\t\t\t\t\t) : (\n\t\t\t\t\t\t\t<option>{this.isEmptyStartOption}</option>\n\t\t\t\t\t\t))}\n\n\t\t\t\t\t{this.internalOptions?.map((dropdown) => (\n\t\t\t\t\t\t<option value={dropdown.value} selected={dropdown.selected}>\n\t\t\t\t\t\t\t{dropdown.label}\n\t\t\t\t\t\t</option>\n\t\t\t\t\t)) ?? ''}\n\t\t\t\t</select>\n\t\t\t\t{this.internalHintExpander && (\n\t\t\t\t\t<ontario-hint-expander\n\t\t\t\t\t\thint={this.internalHintExpander.hint}\n\t\t\t\t\t\tcontent={this.internalHintExpander.content}\n\t\t\t\t\t\thintContentType={this.internalHintExpander.hintContentType}\n\t\t\t\t\t></ontario-hint-expander>\n\t\t\t\t)}\n\t\t\t</div>\n\t\t);\n\t}\n}\n"],"version":3}
1	+ {"file":"ontario-dropdown-list.js","mappings":"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","names":["OntarioDropdownList","uuid"],"sources":["src/components/ontario-dropdown-list/ontario-dropdown-list.scss?tag=ontario-dropdown-list&encapsulation=shadow","src/components/ontario-dropdown-list/ontario-dropdown-list.tsx"],"sourcesContent":["@use '@ongov/ontario-design-system-global-styles/dist/styles/scss/1-variables/spacing.variables' as spacing;\n@use '@ongov/ontario-design-system-global-styles/dist/styles/scss/1-variables/colours.variables' as colours;\n@use '@ongov/ontario-design-system-global-styles/dist/styles/scss/4-elements/_global.elements.scss';\n@use '../../styles/form.scss';\n@forward '../../utils/components/error-message/error-message';\n\n$ontario-dropdown-border-width: 0.125rem;\n\n.ontario-dropdown {\n\tbackground-color: colours.$ontario-colour-white;\n\tbackground-position: right spacing.$spacing-2 center;\n\tbackground-repeat: no-repeat;\n\tbackground-size: spacing.$spacing-6;\n\tpadding-right: (spacing.$spacing-4 * 2.25);\n\tcursor: pointer;\n\n\t&.ontario-dropdown-hint-expander--true {\n\t\tmargin-bottom: spacing.$spacing-4;\n\t}\n}\n\n/* These styles are to fix differences in default styling for dropdowns in IE /\n.ontario-dropdown::-ms-expand {\n\tdisplay: none;\n}\n\n.ontario-dropdown option {\n\tfont-weight: normal;\n}\n\n.ontario-dropdown--error {\n\tselect {\n\t\tborder: $ontario-dropdown-border-width solid colours.$ontario-colour-alert;\n\t}\n}\n","import {\n\tComponent,\n\tState,\n\tElement,\n\th,\n\tProp,\n\tEvent,\n\tListen,\n\tWatch,\n\tgetAssetPath,\n\tEventEmitter,\n\tAttachInternals,\n} from '@stencil/core';\nimport { v4 as uuid } from 'uuid';\n\nimport { DropdownOption } from './dropdown-option.interface';\nimport { Dropdown } from './dropdown.interface';\nimport { HintExpander } from '../ontario-hint-expander/hint-expander.interface';\n\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 {\n\tvalidateObjectExists,\n\tvalidatePropExists,\n\tvalidateLanguage,\n} from '../../utils/validation/validation-functions';\nimport { ConsoleMessageClass } from '../../utils/console-message/console-message';\nimport { hasMultipleTrueValues } from '../../utils/helper/utils';\nimport { Language } from '../../utils/common/language-types';\nimport { constructHintTextObject } from '../../utils/components/hints/hints';\nimport { InputFocusBlurEvent, EventType, InputInteractionEvent } 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-dropdown-list',\n\tstyleUrl: 'ontario-dropdown-list.scss',\n\tshadow: true,\n\tformAssociated: true,\n\tassetsDirs: ['./assets'],\n})\nexport class OntarioDropdownList implements Dropdown {\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 dropdown list label.\n\t \n\t @example\n\t * <ontario-dropdown-list\n\t * name=\"ontario-dropdown-list\"\n\t * caption='{\n\t * \"captionText\": \"Label\",\n\t * \"captionType\": \"heading\",\n\t * }'\n\t * ...>\n\t * </ontario-dropdown-list>\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 for the dropdown list. The name value is used to reference form data after a form is submitted.\n\t /\n\t@Prop() name: string;\n\n\t/\n\t The ID for the dropdown list.\n\t * If no ID is provided, one will be generated.\n\t /\n\t@Prop({ mutable: true }) elementId?: string;\n\n\t/\n\t The options for dropdown list.\n\t \n\t Each option 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 \n\t In the example below, the options are being passed in as a string and there are three dropdown options displayed.\n\t \n\t @example\n\t * <ontario-dropdown-list\n\t * caption='{\n\t * \"captionText\": \"Label\",\n\t * \"captionType\": \"heading\",\n\t * }'\n\t * name=\"ontario-dropdown-list\"\n\t * options='[\n\t * {\n\t * \"value\": \"dropdown-option-1\",\n\t * \"label\": \"Option 1\",\n\t * \"selected\": \"true\"\n\t * },\n\t * {\n\t * \"value\": \"dropdown-option-2\",\n\t * \"label\": \"Option 2\"\n\t * },\n\t * {\n\t * \"value\": \"dropdown-option-3\",\n\t * \"label\": \"Option 3\"\n\t * }\n\t * ]'\n\t * >\n\t * </ontario-dropdown-list>\n\t /\n\t@Prop() options: string \| DropdownOption[];\n\n\t/\n\t This is used to determine whether the dropdown list 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 This prop is used to determine whether or not the initial option displayed is empty.\n\t * If set to `true`, it will render the default “select” text.\n\t * If set to a string, it will render the string value.\n\t \n\t @example\n\t * <ontario-dropdown-list is-empty-start-option=\"true\"></ontario-dropdown-list>\n\t \n\t or\n\t \n\t <ontario-dropdown-list is-empty-start-option=\"Please select\"></ontario-dropdown-list>\n\t /\n\t@Prop() isEmptyStartOption?: boolean \| string = false;\n\n\t/\n\t Used to include the ontario-hint-text component for the dropdown list.\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 dropdown list component.\n\t * This is passed in as an object with key-value pairs.\n\t \n\t This is optional.\n\t \n\t @example\n\t * <ontario-dropdown-list\n\t * caption='{\n\t * \"caption\": \"What province do you live in?\",\n\t * \"captionType\": \"heading\",\n\t * }\n\t * name=\"ontario-dropdown-list\"\n\t * options='[\n\t * {\n\t * \"value\": \"dropdown-option-1\",\n\t * \"label\": \"Option 1\",\n\t * \"selected\": \"true\"\n\t * },\n\t * {\n\t * \"value\": \"dropdown-option-2\",\n\t * \"label\": \"Option 2\"\n\t * },\n\t * {\n\t * \"value\": \"dropdown-option-3\",\n\t * \"label\": \"Option 3\"\n\t * }\n\t * ]'\n\t * hint-expander='{\n\t * \"hint\": \"Hint expander for the dropdown list\",\n\t * \"content\": \"Example hint expander content for the dropdown list.\"\n\t * }'\n\t * >\n\t * </ontario-dropdown-list>\n\t /\n\t@Prop() hintExpander?: HintExpander \| string;\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 dropdown 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 dropdown 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 dropdown 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 dropdown list. This will match with the id of the hint text.\n\t /\n\t@State() hintTextId: string \| null \| undefined;\n\n\t/\n\t Instantiate an InputCaption object for internal logic use\n\t /\n\t@State() private captionState: InputCaption;\n\n\t/\n\t The options are re-assigned to the internalOptions array.\n\t /\n\t@State() private internalOptions: DropdownOption[];\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@State() translations: any = translations;\n\n\t/\n\t Emitted when a keyboard input or mouse event occurs when a dropdown list has been changed.\n\t /\n\t@Event() dropdownOnChange: EventEmitter<InputInteractionEvent>;\n\n\t/\n\t Emitted when a keyboard input event occurs when a dropdown list has lost focus.\n\t /\n\t@Event() dropdownOnBlur: EventEmitter<InputFocusBlurEvent>;\n\n\t/\n\t Emitted when a keyboard input event occurs when a dropdown list has gained focus.\n\t /\n\t@Event() dropdownOnFocus: 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 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-dropdown-list> ')\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\t \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-dropdown-list> ')\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 `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\n\t\t// Check selected status of options and set the selectedValue\n\t\tthis.validateSelectedOption(this.internalOptions);\n\t}\n\n\t/\n\t Watch for changes to the `caption` prop.\n\t \n\t The caption will be run through the InputCaption constructor to convert it to the correct format, and set the result to the `captionState` state.\n\t * @param newValue: Caption \| string\n\t /\n\t@Watch('caption')\n\tprivate updateCaptionState(newValue: Caption \| string) {\n\t\tthis.captionState = new InputCaption(\n\t\t\tthis.element.tagName,\n\t\t\tnewValue,\n\t\t\ttranslations,\n\t\t\tthis.language,\n\t\t\tfalse,\n\t\t\tthis.required,\n\t\t);\n\t}\n\n\t/\n\t Watch for changes to the `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 `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 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@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 dropdown list events and the information pertaining to the dropdown list to emit.\n\t /\n\tprivate handleEvent(event: Event, eventType: EventType) {\n\t\tconst input = event.target as HTMLSelectElement \| null;\n\n\t\tthis.internals?.setFormValue?.(input?.value ?? '');\n\n\t\thandleInputEvent(\n\t\t\tevent,\n\t\t\teventType,\n\t\t\tinput,\n\t\t\tthis.dropdownOnChange,\n\t\t\tthis.dropdownOnFocus,\n\t\t\tthis.dropdownOnBlur,\n\t\t\tundefined,\n\t\t\t'dropdown',\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\tpublic getId(): string {\n\t\treturn this.elementId ?? '';\n\t}\n\n\t/\n\t This function will set a selected key to `false` for each dropdown if no selected value is passed.\n\t \n\t It will also pass a warning to the user if multiple `true` selected values are passed.\n\t \n\t @param options\n\t * @returns options\n\t /\n\tprivate validateSelectedOption(options: DropdownOption[]) {\n\t\tconst selected = 'selected';\n\n\t\toptions.forEach((singleOption) => {\n\t\t\t// if no selected key is passed, set a default key to false\n\t\t\tif (!singleOption.hasOwnProperty(selected)) {\n\t\t\t\tsingleOption.selected = false;\n\t\t\t}\n\t\t});\n\n\t\tif (hasMultipleTrueValues(options, selected)) {\n\t\t\tconst message = new ConsoleMessageClass();\n\t\t\tmessage\n\t\t\t\t.addDesignSystemTag()\n\t\t\t\t.addMonospaceText(' There are duplicate truthy `selected` values ')\n\t\t\t\t.addRegularText('for')\n\t\t\t\t.addMonospaceText(' <ontario-dropdown-list> ')\n\t\t\t\t.addRegularText('options. Please update options so only one truthy `selected` value exists.')\n\t\t\t\t.printMessage();\n\t\t}\n\n\t\treturn options;\n\t}\n\n\tprivate getDropdownArrow() {\n\t\treturn {\n\t\t\tbackgroundImage: `url(${getAssetPath('./assets/ontario-material-dropdown-arrow-48px.svg')})`,\n\t\t};\n\t}\n\n\tprivate getClass(): string {\n\t\treturn this.hintExpander\n\t\t\t? `ontario-input ontario-dropdown ontario-dropdown-hint-expander--true`\n\t\t\t: `ontario-input ontario-dropdown`;\n\t}\n\n\t/\n\t If a `hintText` prop is passed, the id generated from it will be set to the internal `hintTextId` state to match with the select `aria-describedBy` attribute.\n\t */\n\tasync componentDidLoad() {\n\t\tthis.hintTextId = await this.hintTextRef?.getHintTextId();\n\t}\n\n\tcomponentWillLoad() {\n\t\tthis.updateCaptionState(this.caption);\n\t\tthis.parseOptions();\n\t\tthis.validateName(this.name);\n\t\tthis.validateOptions(this.internalOptions);\n\t\tthis.elementId = this.elementId ?? uuid();\n\t\tthis.parseHintText();\n\t\tthis.parseHintExpander();\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-dropdown--error' : ''}`}>\n\t\t\t\t{this.captionState.getCaption(this.getId(), !!this.internalHintExpander)}\n\t\t\t\t{this.internalHintText && (\n\t\t\t\t\t<ontario-hint-text\n\t\t\t\t\t\thint={this.internalHintText.hint}\n\t\t\t\t\t\thintContentType={this.internalHintText.hintContentType}\n\t\t\t\t\t\tref={(el) => (this.hintTextRef = el)}\n\t\t\t\t\t></ontario-hint-text>\n\t\t\t\t)}\n\t\t\t\t<ErrorMessage message={this.errorMessage} error={error} />\n\t\t\t\t<select\n\t\t\t\t\tclass={this.getClass()}\n\t\t\t\t\taria-describedby={this.hintTextId}\n\t\t\t\t\tid={this.getId()}\n\t\t\t\t\tname={this.name}\n\t\t\t\t\tstyle={this.getDropdownArrow()}\n\t\t\t\t\tonChange={(e) => this.handleEvent(e, EventType.Change)}\n\t\t\t\t\tonBlur={(e) => this.handleEvent(e, EventType.Blur)}\n\t\t\t\t\tonFocus={(e) => this.handleEvent(e, EventType.Focus)}\n\t\t\t\t\trequired={!!this.required}\n\t\t\t\t>\n\t\t\t\t\t{this.isEmptyStartOption &&\n\t\t\t\t\t\t(this.isEmptyStartOption === true \|\| this.isEmptyStartOption === 'true' ? (\n\t\t\t\t\t\t\t<option>{this.translations.dropdownList.select[`${this.language}`]}</option>\n\t\t\t\t\t\t) : (\n\t\t\t\t\t\t\t<option>{this.isEmptyStartOption}</option>\n\t\t\t\t\t\t))}\n\n\t\t\t\t\t{this.internalOptions?.map((dropdown) => (\n\t\t\t\t\t\t<option value={dropdown.value} selected={dropdown.selected}>\n\t\t\t\t\t\t\t{dropdown.label}\n\t\t\t\t\t\t</option>\n\t\t\t\t\t)) ?? ''}\n\t\t\t\t</select>\n\t\t\t\t{this.internalHintExpander && (\n\t\t\t\t\t<ontario-hint-expander\n\t\t\t\t\t\thint={this.internalHintExpander.hint}\n\t\t\t\t\t\tcontent={this.internalHintExpander.content}\n\t\t\t\t\t\thintContentType={this.internalHintExpander.hintContentType}\n\t\t\t\t\t></ontario-hint-expander>\n\t\t\t\t)}\n\t\t\t</div>\n\t\t);\n\t}\n}\n"],"version":3}

package/dist/components/ontario-fieldset.js CHANGED Viewed

@@ -1,21 +1,27 @@
-import { proxyCustomElement, HTMLElement, h } from '@stencil/core/internal/client';
-import { C as CaptionTypes } from './input-caption.types.js';
-import { C as ConsoleMessageClass } from './console-message.js';
-import { a as validateValueAgainstArray, b as validatePropExists } from './validation-functions.js';
+import { p as proxyCustomElement, H, h } from './p-846438ed.js';
+import { C as CaptionTypes } from './p-6f4d13e4.js';
+import { C as ConsoleMessageClass } from './p-b2019a19.js';
+import { a as validateValueAgainstArray, b as validatePropExists } from './p-edb765a1.js';
 const ontarioFieldsetCss =
 	'@charset "UTF-8";h6,.ontario-h6,h5,.ontario-h5,h4,.ontario-h4,h3,.ontario-h3,h2,.ontario-h2,.ontario-fieldset__legend--large h1,.ontario-fieldset__legend--heading h1,h1,.ontario-h1{font-style:normal;font-weight:700;text-rendering:optimizeLegibility;margin-bottom:1rem;font-feature-settings:normal;font-family:"Raleway", "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif}.ontario-fieldset__legend--large h1,.ontario-fieldset__legend--heading h1,h1,.ontario-h1{font-size:2rem;letter-spacing:0.04rem;line-height:1.29;margin:2.5rem 0 1.5rem 0;max-width:70rem}@media screen and (min-width: 40em){.ontario-fieldset__legend--large h1,.ontario-fieldset__legend--heading h1,h1,.ontario-h1{font-size:2.5rem;letter-spacing:0.04rem;line-height:1.2}}h2,.ontario-h2{font-size:1.6875rem;letter-spacing:0.03rem;line-height:1.37;margin:0 0 0.75rem 0;max-width:48rem}@media screen and (min-width: 40em){h2,.ontario-h2{font-size:2.0625rem;letter-spacing:0.02rem;line-height:1.33}}h3,.ontario-h3{font-size:1.4375rem;letter-spacing:0.02rem;line-height:1.39;margin:0 0 0.75rem 0;max-width:48rem}@media screen and (min-width: 40em){h3,.ontario-h3{font-size:1.75rem;letter-spacing:0.02rem;line-height:1.43}}h4,.ontario-h4{font-size:1.25rem;letter-spacing:0.03rem;line-height:1.5;margin:0 0 0.75rem 0;max-width:48rem}@media screen and (min-width: 40em){h4,.ontario-h4{font-size:1.5rem;letter-spacing:0.0313rem;line-height:1.5}}h5,.ontario-h5{font-size:1.125rem;letter-spacing:0.03rem;line-height:1.56;margin:0 0 0.75rem 0;max-width:48rem}@media screen and (min-width: 40em){h5,.ontario-h5{font-size:1.1875rem;letter-spacing:0.025rem;line-height:1.5}}h6,.ontario-h6{font-size:1rem;line-height:1.56;letter-spacing:0.03rem;max-width:48rem;margin:0 0 0.75rem 0}@media screen and (min-width: 40em){h6,.ontario-h6{font-size:1rem;letter-spacing:0.025rem;line-height:1.5}}.ontario-lead-statement{font-size:1.25rem;line-height:1.6;max-width:70rem}@media screen and (min-width: 40em){.ontario-lead-statement{font-size:1.375rem}}html{font-family:"Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;font-size:1rem}body{font-size:1rem;line-height:1.6;background-color:#FFFFFF;color:#1a1a1a;margin:0}p{font-size:inherit;margin-bottom:1.25rem;text-rendering:optimizeLegibility;margin:0 0 1.5rem 0}cite{font-style:italic;line-height:inherit}strong{font-weight:700;line-height:inherit}*,*::before,*::after{box-sizing:inherit}main p,main p:not(.ontario-lead-statement),main dd,main li{max-width:48rem}hr{border:0;padding:0;margin:2.5rem 0;border-bottom:4px solid #cccccc}hr.ontario-hr--dark{border-bottom:4px solid #1a1a1a}a{color:#0066CC;text-decoration:underline}a:visited{color:#551A8B}a:hover{color:#00478F}a:active{color:#002142}a:focus{-moz-box-shadow:0 0 0 4px #009ADB;-webkit-box-shadow:0 0 0 4px #009ADB;box-shadow:0 0 0 4px #009ADB;outline:4px solid transparent;transition:all 0.1s ease-in-out}p{margin:0 0 1.5rem 0}p+h1,p+h2,p+h3,p+h4,p+h5,p+h6,ul+h1,ul+h2,ul+h3,ul+h4,ul+h5,ul+h6,ol+h1,ol+h2,ol+h3,ol+h4,ol+h5,ol+h6,h1+h2,h2+h3,h3+h4,h4+h5,h5+h6{margin-top:2rem}p code,td code,li code{line-height:2.25rem}input[type=text],input[type=number],input[type=email],input[type=date],input[type=color],input[type=search],input[type=tel],textarea{background-origin:initial;height:auto;-webkit-appearance:none;-moz-appearance:none}input[type=checkbox]+label,input[type=radio]+label{font-family:"Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;font-size:1rem;font-weight:400;margin-left:0;margin-right:0}fieldset{border:0;margin:0;padding:0;page-break-inside:avoid}legend,label{display:block;margin:0}select{background-origin:initial;height:auto;-webkit-appearance:none;-moz-appearance:none}ul,ol{padding:0}ul{margin-left:2rem}ul li{padding:0 0 0.75rem 0}ol{margin-left:1.75rem}ol li{padding:0 0 0.75rem 0.25rem}ul li:last-child,ol li:last-child{padding-bottom:0}ul[class*=columns-] li:last-child,ol[class*=columns-] li:last-child{padding-bottom:0.75rem}ul ul,ol ul{margin:0.5rem 0 0.5rem 2rem}ul ol,ol ol{margin:0.5rem 0 0.5rem 1.75rem}p+ul,p+ol{margin-top:-0.75rem}@media screen and (min-width: 40em){ul{margin:0.5rem 0 1.5rem 3rem}ol{margin:0.5rem 0 1.5rem 2.75rem}ul ul,ol ul{margin:0.5rem 0 0.5rem 3rem}ul ol,ol ol{margin:0.5rem 0 0.5rem 2.75rem}}.ontario-form-group:last-of-type{margin-bottom:2.5rem}.ontario-form-group:last-of-type{margin-bottom:3rem}.ontario-fieldset__legend{color:#1a1a1a;font-family:"Raleway", "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;font-size:1.1875rem;font-weight:700;margin:0 0 1rem 0;line-height:1.5;max-width:38.75em;white-space:normal;width:100%;hyphens:auto}@media screen and (max-width: 40em){.ontario-fieldset__legend{font-size:1.125rem;line-height:1.56}}.ontario-fieldset__legend--large,.ontario-fieldset__legend--heading{letter-spacing:0.02rem;line-height:1.2}.ontario-fieldset__legend--large h1,.ontario-fieldset__legend--heading h1{display:inline-block;margin:0}@media screen and (max-width: 40em){.ontario-fieldset__legend--large,.ontario-fieldset__legend--heading{font-size:1.4375rem;line-height:1.39}}.ontario-fieldset__legend--large{font-size:1.75rem}.ontario-fieldset__legend-required-flag,.ontario-fieldset__legend-optional-flag{font-family:"Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;font-size:1rem;font-weight:400}.ontario-fieldset__legend-required-flag:before,.ontario-fieldset__legend-optional-flag:before{content:" "}.ontario-label__flag{font-family:"Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;font-size:1rem;font-weight:400}.ontario-label__flag:before{content:" "}';
 const OntarioFieldsetStyle0 = ontarioFieldsetCss;
 const OntarioFieldset$1 = /*@__PURE__*/ proxyCustomElement(
-	class OntarioFieldset extends HTMLElement {
+	class OntarioFieldset extends H {
 		constructor() {
 			super();
 			this.__registerHost();
 			this.__attachShadow();
-			this.legend = undefined;
-			this.legendSize = 'default';
 		}
+		/**
+		 * The text value used for the legend of the fieldset.
+		 */
+		legend;
+		/**
+		 * The size of the fieldset legend. If no prop is passed, it will be `default`.
+		 */
+		legendSize = 'default';
 		/**
 		 * Watch for changes to the legendSize prop.
 		 * This is for validation purposes to make sure the legendSize matches one of the CaptionTypes.
@@ -75,16 +81,16 @@ const OntarioFieldset$1 = /*@__PURE__*/ proxyCustomElement(
 		render() {
 			return h(
 				'div',
-				{ key: 'b67eb0cfb89097276405ce512b45538201d524b7', class: 'ontario-form-group' },
+				{ key: 'bbde722517332cabab85b82a66f693357623f01b', class: 'ontario-form-group' },
 				h(
 					'fieldset',
-					{ key: '2b734fbca04ee66e7a1beaa389e96e4968257a0e', class: 'ontario-fieldset' },
+					{ key: 'd30876d0eb8cb861ca174e3a45bf1a2c53c68b9e', class: 'ontario-fieldset' },
 					h(
 						'legend',
-						{ key: 'b020a125d2257db804dc733d0f9cb81f63d0006d', class: this.getClass() },
+						{ key: 'c23b2c2c914297771abcb82ac9a04f7ec91b5459', class: this.getClass() },
 						this.legendSize === 'heading' ? h('h1', null, this.legend) : this.legend,
 					),
-					h('slot', { key: '8d46ec07de3ce88928468671d14d45d2e0ccc0ab' }),
+					h('slot', { key: 'b9a8f8cfc3dc2444119d24b52f36f0a57172774f' }),
 				),
 			);
 		}

package/dist/components/ontario-fieldset.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"ontario-fieldset.js","mappings":";;;;;AAAA,MAAM,kBAAkB,GAAG,y9KAAy9K,CAAC;AACr/K,8BAAe,kBAAkB;;MCYpBA,iBAAe~~;;;;;;0BASwB~~,SAAS~~;;;;;;IAO5D~~,kBAAkB;QACjB,MAAM,OAAO,GAAG,yBAAyB,CAAC,IAAI,CAAC,UAAU,EAAE,YAAY,CAAC,CAAC;QAEzE,IAAI,OAAO,EAAE;YACZ,OAAO,IAAI,CAAC,UAAU,CAAC;SACvB;aAAM;YACN,MAAM,OAAO,GAAG,IAAI,mBAAmB,EAAE,CAAC;YAC1C,OAAO;iBACL,kBAAkB,EAAE;iBACpB,gBAAgB,CAAC,eAAe,IAAI,CAAC,UAAU,GAAG,CAAC;iBACnD,cAAc,CAAC,KAAK,CAAC;iBACrB,gBAAgB,CAAC,sBAAsB,CAAC;iBACxC,cAAc,CAAC,sDAAsD,CAAC;iBACtE,YAAY,EAAE,CAAC;YAEjB,OAAO,SAAS,CAAC;SACjB;KACD;;;;IAMD,cAAc;QACb,IAAI,CAAC,kBAAkB,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC;KACrC;;;;IAKD,kBAAkB,CAAC,QAAgB;QAClC,IAAI,kBAAkB,CAAC,QAAQ,CAAC,EAAE;YACjC,MAAM,OAAO,GAAG,IAAI,mBAAmB,EAAE,CAAC;YAC1C,OAAO;iBACL,kBAAkB,EAAE;iBACpB,gBAAgB,CAAC,UAAU,CAAC;iBAC5B,cAAc,CAAC,KAAK,CAAC;iBACrB,gBAAgB,CAAC,sBAAsB,CAAC;iBACxC,cAAc,CAAC,kBAAkB,CAAC;iBAClC,YAAY,EAAE,CAAC;SACjB;KACD;IACD,iBAAiB;QAChB,IAAI,CAAC,cAAc,EAAE,CAAC;QACtB,IAAI,CAAC,kBAAkB,EAAE,CAAC;KAC1B;IAEO,QAAQ;QACf,QAAQ,IAAI,CAAC,UAAU;YACtB,KAAK,OAAO;gBACX,OAAO,0DAA0D,CAAC;YACnE,KAAK,SAAS;gBACb,OAAO,4DAA4D,CAAC;YACrE,KAAK,SAAS,CAAC;YACf;gBACC,OAAO,0BAA0B,CAAC;SACnC;KACD;IAED,MAAM;QACL,QACC,4DAAK,KAAK,EAAC,oBAAoB,IAC9B,iEAAU,KAAK,EAAC,kBAAkB,IACjC,+DAAQ,KAAK,EAAE,IAAI,CAAC,QAAQ,EAAE,IAC5B,IAAI,CAAC,UAAU,KAAK,SAAS,GAAG,cAAK,IAAI,CAAC,MAAM,CAAM,GAAG,IAAI,CAAC,MAAM,CAC7D,EACT,8DAAQ,CACE,CACN,EACL;KACF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["OntarioFieldset"],"sources":["src/components/ontario-fieldset/ontario-fieldset.scss?tag=ontario-fieldset&encapsulation=shadow","src/components/ontario-fieldset/ontario-fieldset.tsx"],"sourcesContent":["@use '@ongov/ontario-design-system-global-styles/dist/styles/scss/4-elements/_global.elements.scss';\n@use '@ongov/ontario-design-system-global-styles/dist/styles/scss/6-components/_form.component.scss';\n","import { Component, h, Prop, Watch } from '@stencil/core';\n\nimport { Fieldset } from './ontario-fieldset.interface';\n\nimport { CaptionType, CaptionTypes } from '../../utils/common/input-caption/input-caption.types';\nimport { ConsoleMessageClass } from '../../utils/console-message/console-message';\nimport { validatePropExists, validateValueAgainstArray } from '../../utils/validation/validation-functions';\n\n@Component({\n\ttag: 'ontario-fieldset',\n\tstyleUrl: 'ontario-fieldset.scss',\n\tshadow: true,\n})\nexport class OntarioFieldset implements Fieldset {\n\t/*\n\t The text value used for the legend of the fieldset.\n\t /\n\t@Prop({ mutable: true }) legend: string;\n\n\t/\n\t The size of the fieldset legend. If no prop is passed, it will be `default`.\n\t /\n\t@Prop({ mutable: true }) legendSize: CaptionType = 'default';\n\n\t/\n\t Watch for changes to the legendSize prop.\n\t * This is for validation purposes to make sure the legendSize matches one of the CaptionTypes.\n\t /\n\t@Watch('legendSize')\n\tvalidateLegendSize() {\n\t\tconst isValid = validateValueAgainstArray(this.legendSize, CaptionTypes);\n\n\t\tif (isValid) {\n\t\t\treturn this.legendSize;\n\t\t} else {\n\t\t\tconst message = new ConsoleMessageClass();\n\t\t\tmessage\n\t\t\t\t.addDesignSystemTag()\n\t\t\t\t.addMonospaceText(` legendSize ${this.legendSize} `)\n\t\t\t\t.addRegularText('for')\n\t\t\t\t.addMonospaceText(' <ontario-fieldset> ')\n\t\t\t\t.addRegularText('is not a valid type. A default size will be applied.')\n\t\t\t\t.printMessage();\n\n\t\t\treturn 'default';\n\t\t}\n\t}\n\n\t/\n\t * Watch for changes in the `legend` prop for validation purposes.\n\t /\n\t@Watch('legend')\n\tvalidateLegend() {\n\t\tthis.validateLegendText(this.legend);\n\t}\n\n\t/\n\t Print the legend warning message\n\t */\n\tvalidateLegendText(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(' legend ')\n\t\t\t\t.addRegularText('for')\n\t\t\t\t.addMonospaceText(' <ontario-fieldset> ')\n\t\t\t\t.addRegularText('was not provided')\n\t\t\t\t.printMessage();\n\t\t}\n\t}\n\tcomponentWillLoad() {\n\t\tthis.validateLegend();\n\t\tthis.validateLegendSize();\n\t}\n\n\tprivate getClass() {\n\t\tswitch (this.legendSize) {\n\t\t\tcase 'large':\n\t\t\t\treturn `ontario-fieldset__legend ontario-fieldset__legend--large`;\n\t\t\tcase 'heading':\n\t\t\t\treturn `ontario-fieldset__legend ontario-fieldset__legend--heading`;\n\t\t\tcase 'default':\n\t\t\tdefault:\n\t\t\t\treturn `ontario-fieldset__legend`;\n\t\t}\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\">\n\t\t\t\t\t<legend class={this.getClass()}>\n\t\t\t\t\t\t{this.legendSize === 'heading' ? <h1>{this.legend}</h1> : this.legend}\n\t\t\t\t\t</legend>\n\t\t\t\t\t<slot />\n\t\t\t\t</fieldset>\n\t\t\t</div>\n\t\t);\n\t}\n}\n"],"version":3}
1	+ {"file":"ontario-fieldset.js","mappings":";;;;;AAAA,MAAM,kBAAkB,GAAG,y9KAAy9K,CAAC;AACr/K,8BAAe,kBAAkB;;MCYpBA,iBAAe;;;;;;;;;IAIF,MAAM,CAAS;;;;IAKf,UAAU,GAAgB,SAAS,CAAC;;;;;IAO7D,kBAAkB;QACjB,MAAM,OAAO,GAAG,yBAAyB,CAAC,IAAI,CAAC,UAAU,EAAE,YAAY,CAAC,CAAC;QAEzE,IAAI,OAAO,EAAE;YACZ,OAAO,IAAI,CAAC,UAAU,CAAC;SACvB;aAAM;YACN,MAAM,OAAO,GAAG,IAAI,mBAAmB,EAAE,CAAC;YAC1C,OAAO;iBACL,kBAAkB,EAAE;iBACpB,gBAAgB,CAAC,eAAe,IAAI,CAAC,UAAU,GAAG,CAAC;iBACnD,cAAc,CAAC,KAAK,CAAC;iBACrB,gBAAgB,CAAC,sBAAsB,CAAC;iBACxC,cAAc,CAAC,sDAAsD,CAAC;iBACtE,YAAY,EAAE,CAAC;YAEjB,OAAO,SAAS,CAAC;SACjB;KACD;;;;IAMD,cAAc;QACb,IAAI,CAAC,kBAAkB,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC;KACrC;;;;IAKD,kBAAkB,CAAC,QAAgB;QAClC,IAAI,kBAAkB,CAAC,QAAQ,CAAC,EAAE;YACjC,MAAM,OAAO,GAAG,IAAI,mBAAmB,EAAE,CAAC;YAC1C,OAAO;iBACL,kBAAkB,EAAE;iBACpB,gBAAgB,CAAC,UAAU,CAAC;iBAC5B,cAAc,CAAC,KAAK,CAAC;iBACrB,gBAAgB,CAAC,sBAAsB,CAAC;iBACxC,cAAc,CAAC,kBAAkB,CAAC;iBAClC,YAAY,EAAE,CAAC;SACjB;KACD;IACD,iBAAiB;QAChB,IAAI,CAAC,cAAc,EAAE,CAAC;QACtB,IAAI,CAAC,kBAAkB,EAAE,CAAC;KAC1B;IAEO,QAAQ;QACf,QAAQ,IAAI,CAAC,UAAU;YACtB,KAAK,OAAO;gBACX,OAAO,0DAA0D,CAAC;YACnE,KAAK,SAAS;gBACb,OAAO,4DAA4D,CAAC;YACrE,KAAK,SAAS,CAAC;YACf;gBACC,OAAO,0BAA0B,CAAC;SACnC;KACD;IAED,MAAM;QACL,QACC,4DAAK,KAAK,EAAC,oBAAoB,IAC9B,iEAAU,KAAK,EAAC,kBAAkB,IACjC,+DAAQ,KAAK,EAAE,IAAI,CAAC,QAAQ,EAAE,IAC5B,IAAI,CAAC,UAAU,KAAK,SAAS,GAAG,cAAK,IAAI,CAAC,MAAM,CAAM,GAAG,IAAI,CAAC,MAAM,CAC7D,EACT,8DAAQ,CACE,CACN,EACL;KACF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["OntarioFieldset"],"sources":["src/components/ontario-fieldset/ontario-fieldset.scss?tag=ontario-fieldset&encapsulation=shadow","src/components/ontario-fieldset/ontario-fieldset.tsx"],"sourcesContent":["@use '@ongov/ontario-design-system-global-styles/dist/styles/scss/4-elements/_global.elements.scss';\n@use '@ongov/ontario-design-system-global-styles/dist/styles/scss/6-components/_form.component.scss';\n","import { Component, h, Prop, Watch } from '@stencil/core';\n\nimport { Fieldset } from './ontario-fieldset.interface';\n\nimport { CaptionType, CaptionTypes } from '../../utils/common/input-caption/input-caption.types';\nimport { ConsoleMessageClass } from '../../utils/console-message/console-message';\nimport { validatePropExists, validateValueAgainstArray } from '../../utils/validation/validation-functions';\n\n@Component({\n\ttag: 'ontario-fieldset',\n\tstyleUrl: 'ontario-fieldset.scss',\n\tshadow: true,\n})\nexport class OntarioFieldset implements Fieldset {\n\t/*\n\t The text value used for the legend of the fieldset.\n\t /\n\t@Prop({ mutable: true }) legend: string;\n\n\t/\n\t The size of the fieldset legend. If no prop is passed, it will be `default`.\n\t /\n\t@Prop({ mutable: true }) legendSize: CaptionType = 'default';\n\n\t/\n\t Watch for changes to the legendSize prop.\n\t * This is for validation purposes to make sure the legendSize matches one of the CaptionTypes.\n\t /\n\t@Watch('legendSize')\n\tvalidateLegendSize() {\n\t\tconst isValid = validateValueAgainstArray(this.legendSize, CaptionTypes);\n\n\t\tif (isValid) {\n\t\t\treturn this.legendSize;\n\t\t} else {\n\t\t\tconst message = new ConsoleMessageClass();\n\t\t\tmessage\n\t\t\t\t.addDesignSystemTag()\n\t\t\t\t.addMonospaceText(` legendSize ${this.legendSize} `)\n\t\t\t\t.addRegularText('for')\n\t\t\t\t.addMonospaceText(' <ontario-fieldset> ')\n\t\t\t\t.addRegularText('is not a valid type. A default size will be applied.')\n\t\t\t\t.printMessage();\n\n\t\t\treturn 'default';\n\t\t}\n\t}\n\n\t/\n\t * Watch for changes in the `legend` prop for validation purposes.\n\t /\n\t@Watch('legend')\n\tvalidateLegend() {\n\t\tthis.validateLegendText(this.legend);\n\t}\n\n\t/\n\t Print the legend warning message\n\t */\n\tvalidateLegendText(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(' legend ')\n\t\t\t\t.addRegularText('for')\n\t\t\t\t.addMonospaceText(' <ontario-fieldset> ')\n\t\t\t\t.addRegularText('was not provided')\n\t\t\t\t.printMessage();\n\t\t}\n\t}\n\tcomponentWillLoad() {\n\t\tthis.validateLegend();\n\t\tthis.validateLegendSize();\n\t}\n\n\tprivate getClass() {\n\t\tswitch (this.legendSize) {\n\t\t\tcase 'large':\n\t\t\t\treturn `ontario-fieldset__legend ontario-fieldset__legend--large`;\n\t\t\tcase 'heading':\n\t\t\t\treturn `ontario-fieldset__legend ontario-fieldset__legend--heading`;\n\t\t\tcase 'default':\n\t\t\tdefault:\n\t\t\t\treturn `ontario-fieldset__legend`;\n\t\t}\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\">\n\t\t\t\t\t<legend class={this.getClass()}>\n\t\t\t\t\t\t{this.legendSize === 'heading' ? <h1>{this.legend}</h1> : this.legend}\n\t\t\t\t\t</legend>\n\t\t\t\t\t<slot />\n\t\t\t\t</fieldset>\n\t\t\t</div>\n\t\t);\n\t}\n}\n"],"version":3}