@gov-design-system-ce/components 4.0.8-rc23 → 4.1.0-rc1

package/dist/collection/components/gov-form/select/gov-form-select.js

@@ -1,40 +1,32 @@
 import { h, Host } from "@stencil/core";
 import { govForm } from "../../../helpers/Dom/form";
 import { govHost, toBoolAttr, toBoolAttrIfDefined } from "../../../helpers/Dom/template";
-import { canValidateWcagOnRender } from "../../../helpers/Dom/win";
 import { validateProp } from "../../../helpers/Validate/props";
-import { validateWcagLabelFor, validateWcagRef } from "../../../helpers/Validate/wcag";
 import { createID } from "../../../utils/string.utils";
-import { delay } from "../../../utils/utils";
-import { FormSelectClass, FormSelectSizes, FormSelectVariants } from "./constants";
+import { FormSelectClass, FormSelectSizes, } from "./constants";
 import { propsValueToArray } from "../../../utils/array.utils";
 import { tick } from "../../../utils/stencil.utils";
+import { AttributeObserver } from "../../../helpers/Dom/attribute";
+import { ariaAttributes } from "../../../helpers/Accessibility/attributes";
+import { inheritAriaAttributes } from "../../../helpers/Accessibility/accessibility";
 export class GovFormSelect {
     constructor() {
         this.value = undefined;
         this.options = undefined;
         this.identifier = undefined;
-        this.variant = 'secondary';
         this.size = 'm';
         this.name = undefined;
         this.required = false;
         this.success = undefined;
         this.disabled = false;
         this.invalid = undefined;
-        this.wcagActiveDescendant = undefined;
-        this.wcagControls = undefined;
-        this.wcagDescribedBy = undefined;
-        this.wcagLabelledBy = undefined;
-        this.wcagOwns = undefined;
         this.focused = undefined;
         this.optionsState = [];
+        this.inheritedAttributes = {};
         this.h = govHost(this.host);
         this.f = govForm(this.h);
         this.selectId = createID('GovSelect');
     }
-    validateVariant(newValue) {
-        validateProp(FormSelectVariants, newValue, FormSelectClass.root);
-    }
     validateSize(newValue) {
         validateProp(FormSelectSizes, newValue, FormSelectClass.root);
     }
@@ -54,21 +46,30 @@ export class GovFormSelect {
         this.f.passAttrToControl('disabled', toBoolAttr(this.disabled));
         this.f.passAttrToControl('type', 'select');
     }
+    componentDidLoad() {
+        this.attributeObserver = new AttributeObserver(this.host, (attributeName, newValue) => {
+            this.onAriaAttributeChange(attributeName, newValue);
+        });
+        this.attributeObserver.startObserving(ariaAttributes);
+    }
+    disconnectedCallback() {
+        this.attributeObserver.stopObserving();
+    }
     componentWillLoad() {
-        this.validateVariant(this.variant);
         this.validateSize(this.size);
         this.markSelectedValue();
         this.optionsState = propsValueToArray(this.options);
+        this.inheritedAttributes = inheritAriaAttributes(this.host);
     }
     async componentDidRender() {
         this.passControlAttrs();
         this.f.passAttrToLabel('required', String(this.required));
-        if (canValidateWcagOnRender()) {
-            await delay(500);
-            await this.validateWcag();
-        }
         tick(() => this.markSelectedValue());
     }
+    onAriaAttributeChange(attributeName, newValue) {
+        this.host.removeAttribute(attributeName);
+        this.inheritedAttributes = Object.assign(Object.assign({}, this.inheritedAttributes), { [attributeName]: newValue });
+    }
     markSelectedValue() {
         this.host.querySelectorAll('option').forEach((option) => {
             if (option.value === this.value) {
@@ -80,10 +81,10 @@ export class GovFormSelect {
         });
     }
     render() {
-        return (h(Host, { key: 'ad730683b3c90c1f843e0b623ccb90620d850f38', class: FormSelectClass.root, size: this.size, variant: this.variant }, this.h.hasSlot('prefix') && h("slot", { key: 'a502060ea1fe99bdc99c6d41ec724a028e953936', name: "prefix" }), h("span", { key: 'c1145ad7d689eedd3364a036cbbc84e2651bf2f3', class: "element" }, h("gov-icon", { key: '4064afe2f528385e0488d9b0d4de823468d5291b', slot: "right-icon", name: "chevron-down", class: "icon-arrow" }), this.h.hasSlot('right-icon') && !(this.success || this.invalid) && h("slot", { key: '3be3d76095659ad871ad56c301455d845ad2228c', name: "right-icon" }), this.success && h("gov-icon", { key: 'fa6b68bbd864c09ba5b5dab1118dab5acba21875', slot: "right-icon", class: "icon-validation", name: "check-lg" }), this.invalid && h("gov-icon", { key: '956ce3b961a6cce2f815a787bc16daed467a519e', slot: "right-icon", class: "icon-validation", name: "exclamation-lg" }), h("select", { key: 'f176ad1c96c7b1c2fa080332a82b5c4a0847ceb0', id: this.identifier || this.selectId, onFocus: this.onFocusHandler.bind(this), onChange: this.onChangeHandler.bind(this), onBlur: this.onBlurHandler.bind(this), required: this.required, name: this.name, disabled: this.disabled, ref: el => (this.selectRef = el), "aria-disabled": toBoolAttrIfDefined(this.disabled), "aria-activedescendant": this.wcagActiveDescendant, "aria-controls": this.wcagControls, "aria-required": toBoolAttrIfDefined(this.required), "aria-invalid": toBoolAttrIfDefined(this.invalid), "aria-describedby": this.wcagDescribedBy, "aria-labelledby": this.wcagLabelledBy, "aria-owns": this.wcagOwns }, h("slot", { key: '1021bfce70fc2896c420df6e16e36aa63dfe0b37' }), Array.isArray(this.optionsState) && this.optionsState.map((option) => {
+        return (h(Host, { key: '1603b487cb27e87d0c7d894c52179fc0f10f5889', class: FormSelectClass.root, size: this.size }, this.h.hasSlot('prefix') && h("slot", { key: '6ccaee3373fff628f817bc5c64846dbe70b2a0e1', name: "prefix" }), h("span", { key: '71c8144f67cfb19874fadbc56a5e3b14be80de35', class: "element" }, h("gov-icon", { key: '2a95e7d17ae06b1fef26fb7c6b6bca6229992a73', slot: "right-icon", name: "chevron-down", class: "icon-arrow" }), this.h.hasSlot('right-icon') && !(this.success || this.invalid) && h("slot", { key: '35b5bd9fb11ed7e7aecefa7a2dc5e32552eb44e5', name: "right-icon" }), this.success && h("gov-icon", { key: 'c35c20feca720276afc86378338a124c31ae72e7', slot: "validation-icon", name: "check-lg" }), this.invalid && h("gov-icon", { key: 'dff3726140aef5632b7ae1f73144a69c042c43eb', slot: "validation-icon", name: "exclamation-lg" }), h("select", Object.assign({ key: '1174e88bc1ad6b60c843addd245b936e778a49e4', id: this.identifier || this.selectId, onFocus: this.onFocusHandler.bind(this), onChange: this.onChangeHandler.bind(this), onBlur: this.onBlurHandler.bind(this), required: this.required, name: this.name, disabled: this.disabled, ref: el => (this.selectRef = el) }, this.inheritedAttributes, { "aria-disabled": toBoolAttrIfDefined(this.disabled), "aria-required": toBoolAttrIfDefined(this.required), "aria-invalid": toBoolAttrIfDefined(this.invalid) }), h("slot", { key: '1cfedcf253a859a468bfc0be2125d8c8da8d92aa' }), Array.isArray(this.optionsState) && this.optionsState.map((option) => {
             var _a;
             return (h("option", { value: option.value, selected: option.value === this.value, disabled: option === null || option === void 0 ? void 0 : option.disabled }, (_a = option.label) !== null && _a !== void 0 ? _a : option.value));
-        }))), this.h.hasSlot('sufix') && h("slot", { key: 'c1900ebfcba04e86829852c2a164a2c3492f1895', name: "sufix" })));
+        }))), this.h.hasSlot('sufix') && h("slot", { key: 'f9f301a9b9e64aa83df509479ad21e382052e13a', name: "sufix" })));
     }
     onFocusHandler(e) {
         this.focused = true;
@@ -122,27 +123,7 @@ export class GovFormSelect {
     async getRef() {
         return this.selectRef;
     }
-    /**
-     * Validate the WCAG attributes of the component
-     */
-    async validateWcag() {
-        validateWcagRef(this.wcagActiveDescendant, 'wcag-active-descendant', FormSelectClass.root);
-        validateWcagRef(this.wcagControls, 'wcag-controls', FormSelectClass.root);
-        validateWcagRef(this.wcagDescribedBy, 'wcag-described-by', FormSelectClass.root);
-        validateWcagRef(this.wcagOwns, 'wcag-owns', FormSelectClass.root);
-        validateWcagLabelFor(this.identifier || this.selectId, this.wcagLabelledBy, FormSelectClass.root);
-    }
     static get is() { return "gov-form-select"; }
-    static get originalStyleUrls() {
-        return {
-            "$": ["gov-form-select.scss"]
-        };
-    }
-    static get styleUrls() {
-        return {
-            "$": ["gov-form-select.css"]
-        };
-    }
     static get properties() {
         return {
             "value": {
@@ -202,36 +183,12 @@ export class GovFormSelect {
                 "attribute": "identifier",
                 "reflect": false
             },
-            "variant": {
-                "type": "string",
-                "mutable": false,
-                "complexType": {
-                    "original": "FormSelectVariantType",
-                    "resolved": "\"primary\" | \"secondary\"",
-                    "references": {
-                        "FormSelectVariantType": {
-                            "location": "import",
-                            "path": "./constants",
-                            "id": "../../../packages/core/src/components/gov-form/select/constants.ts::FormSelectVariantType"
-                        }
-                    }
-                },
-                "required": false,
-                "optional": true,
-                "docs": {
-                    "tags": [],
-                    "text": "Style variation of the form select."
-                },
-                "attribute": "variant",
-                "reflect": false,
-                "defaultValue": "'secondary'"
-            },
             "size": {
                 "type": "string",
                 "mutable": false,
                 "complexType": {
                     "original": "FormSelectSizesType",
-                    "resolved": "\"l\" | \"m\" | \"s\" | \"xl\"",
+                    "resolved": "\"l\" | \"m\" | \"s\" | \"xl\" | \"xs\"",
                     "references": {
                         "FormSelectSizesType": {
                             "location": "import",
@@ -336,98 +293,14 @@ export class GovFormSelect {
                 },
                 "attribute": "invalid",
                 "reflect": false
-            },
-            "wcagActiveDescendant": {
-                "type": "string",
-                "mutable": false,
-                "complexType": {
-                    "original": "string",
-                    "resolved": "string",
-                    "references": {}
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": "Indicates the id of a related component\u2019s visually focused element."
-                },
-                "attribute": "wcag-active-descendant",
-                "reflect": false
-            },
-            "wcagControls": {
-                "type": "string",
-                "mutable": false,
-                "complexType": {
-                    "original": "string",
-                    "resolved": "string",
-                    "references": {}
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": "Use this prop to add an aria-controls attribute. Use the attribute to indicate the id of a component controlled by this component."
-                },
-                "attribute": "wcag-controls",
-                "reflect": false
-            },
-            "wcagDescribedBy": {
-                "type": "string",
-                "mutable": false,
-                "complexType": {
-                    "original": "string",
-                    "resolved": "string",
-                    "references": {}
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": "Indicates the id of a component that describes the input."
-                },
-                "attribute": "wcag-described-by",
-                "reflect": false
-            },
-            "wcagLabelledBy": {
-                "type": "string",
-                "mutable": false,
-                "complexType": {
-                    "original": "string",
-                    "resolved": "string",
-                    "references": {}
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": "Indicates the id of a component that labels the input."
-                },
-                "attribute": "wcag-labelled-by",
-                "reflect": false
-            },
-            "wcagOwns": {
-                "type": "string",
-                "mutable": false,
-                "complexType": {
-                    "original": "string",
-                    "resolved": "string",
-                    "references": {}
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": "Indicates the id of a component that describes the input."
-                },
-                "attribute": "wcag-owns",
-                "reflect": false
             }
         };
     }
     static get states() {
         return {
             "focused": {},
-            "optionsState": {}
+            "optionsState": {},
+            "inheritedAttributes": {}
         };
     }
     static get events() {
@@ -543,32 +416,12 @@ export class GovFormSelect {
                     "text": "Returns an instance of the native html select element",
                     "tags": []
                 }
-            },
-            "validateWcag": {
-                "complexType": {
-                    "signature": "() => Promise<void>",
-                    "parameters": [],
-                    "references": {
-                        "Promise": {
-                            "location": "global",
-                            "id": "global::Promise"
-                        }
-                    },
-                    "return": "Promise<void>"
-                },
-                "docs": {
-                    "text": "Validate the WCAG attributes of the component",
-                    "tags": []
-                }
             }
         };
     }
     static get elementRef() { return "host"; }
     static get watchers() {
         return [{
-                "propName": "variant",
-                "methodName": "validateVariant"
-            }, {
                 "propName": "size",
                 "methodName": "validateSize"
             }, {

package/dist/collection/components/gov-form/select/gov-form-select.js.map

@@ -1 +1 @@
-{"version":3,"file":"gov-form-select.js","sourceRoot":"","sources":["../../../../../../../src/components/gov-form/select/gov-form-select.tsx"],"names":[],"mappings":"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","sourcesContent":["import {Component, Element, Event, EventEmitter, h, Host, Method, Prop, State, Watch} from '@stencil/core'\nimport {govForm} from '../../../helpers/Dom/form'\nimport {GovForm} from '../../../helpers/Dom/form.types'\nimport {govHost, toBoolAttr, toBoolAttrIfDefined} from '../../../helpers/Dom/template'\nimport {GovHost} from '../../../helpers/Dom/template.types'\nimport {canValidateWcagOnRender} from '../../../helpers/Dom/win'\nimport {validateProp} from '../../../helpers/Validate/props'\nimport {validateWcagLabelFor, validateWcagRef} from '../../../helpers/Validate/wcag'\nimport {createID} from '../../../utils/string.utils'\nimport {delay} from '../../../utils/utils'\nimport {\n\tFormSelectClass,\n\tFormSelectSizes,\n\tFormSelectSizesType,\n\tFormSelectVariants,\n\tFormSelectVariantType\n} from './constants'\nimport {FormSelectEvent, FormSelectOption} from './gov-form-select.types'\nimport {propsValueToArray} from \"../../../utils/array.utils\";\nimport {tick} from \"../../../utils/stencil.utils\";\n\n@Component({\n\ttag: 'gov-form-select',\n\tstyleUrl: 'gov-form-select.scss',\n})\nexport class GovFormSelect {\n\tprivate f: GovForm\n\tprivate readonly h: GovHost\n\tprivate selectRef?: HTMLSelectElement\n\n\tprivate readonly selectId: string\n\n\tconstructor() {\n\t\tthis.h = govHost(this.host)\n\t\tthis.f = govForm(this.h)\n\t\tthis.selectId = createID('GovSelect')\n\t}\n\n\t@Element() host: HTMLGovFormSelectElement\n\t/**\n\t * Value of select\n\t */\n\t@Prop({reflect: true, mutable: true}) value: string\n\t/**\n\t * Options of select\n\t */\n\t@Prop({reflect: true, mutable: true}) options?: string | FormSelectOption[]\n\t/**\n\t * Custom select identifier.\n\t */\n\t@Prop({attribute: 'identifier'}) readonly identifier: string\n\t/**\n\t * Style variation of the form select.\n\t */\n\t@Prop() readonly variant?: FormSelectVariantType = 'secondary'\n\t/**\n\t * Select’s size.\n\t */\n\t@Prop() readonly size?: FormSelectSizesType = 'm'\n\t/**\n\t * Name of the select.\n\t */\n\t@Prop() readonly name: string\n\t/**\n\t * Set whether the input is required or not. Please note that this is necessary for accessible inputs when the user is required to fill them.\n\t * When using this property you need to also set “novalidate” attribute to your form element to prevent browser from displaying its own validation errors.\n\t */\n\t@Prop() readonly required: boolean = false\n\t/**\n\t * Indicates the entered value of child form element does conform to the format expected by the application.\n\t */\n\t@Prop() readonly success: boolean\n\t/**\n\t * Makes the select component disabled.\n\t * This prevents users from being able to interact with the select, and conveys its inactive state to assistive technologies.\n\t */\n\t@Prop() readonly disabled: boolean = false\n\t/**\n\t * Indicates the entered value does not conform to the format expected by the application.\n\t */\n\t@Prop() readonly invalid: boolean\n\t/**\n\t * Indicates the id of a related component’s visually focused element.\n\t */\n\t@Prop({attribute: 'wcag-active-descendant'}) readonly wcagActiveDescendant: string\n\t/**\n\t * Use this prop to add an aria-controls attribute. Use the attribute to indicate the id of a component controlled by this component.\n\t */\n\t@Prop({attribute: 'wcag-controls'}) readonly wcagControls: string\n\t/**\n\t * Indicates the id of a component that describes the input.\n\t */\n\t@Prop({attribute: 'wcag-described-by'}) readonly wcagDescribedBy: string\n\t/**\n\t * Indicates the id of a component that labels the input.\n\t */\n\t@Prop({attribute: 'wcag-labelled-by'}) readonly wcagLabelledBy: string\n\t/**\n\t * Indicates the id of a component that describes the input.\n\t */\n\t@Prop({attribute: 'wcag-owns'}) readonly wcagOwns: string\n\t/**\n\t * Emitted when the select has focus.\n\t */\n\t@Event({eventName: 'gov-focus'}) govFocus: EventEmitter<FormSelectEvent>\n\t/**\n\t * Emitted when the select loses focus.\n\t */\n\t@Event({eventName: 'gov-blur'}) govBlur: EventEmitter<FormSelectEvent>\n\t/**\n\t * Emitted when the select change value.\n\t */\n\t@Event({eventName: 'gov-change'}) govChange: EventEmitter<FormSelectEvent>\n\t@State() focused: boolean\n\t@State() optionsState: FormSelectOption[] = []\n\n\t@Watch('variant')\n\tvalidateVariant(newValue: string): void {\n\t\tvalidateProp(FormSelectVariants, newValue, FormSelectClass.root)\n\t}\n\n\t@Watch('size')\n\tvalidateSize(newValue: string): void {\n\t\tvalidateProp(FormSelectSizes, newValue, FormSelectClass.root)\n\t}\n\n\t@Watch('options')\n\twatchOptions(newValue: string | FormSelectOption[]): void {\n\t\tthis.optionsState = propsValueToArray(newValue)\n\t}\n\n\t@Watch('disabled')\n\t@Watch('invalid')\n\t@Watch('success')\n\t@Watch('size')\n\twatchControlAttrs(): void {\n\t\tthis.passControlAttrs()\n\t}\n\n\t@Watch('value')\n\twatchValue(): void {\n\t\tthis.markSelectedValue()\n\t}\n\n\tprivate passControlAttrs() {\n\t\tthis.f.passAttrToControl('size', this.size)\n\t\tthis.f.passAttrToControl('invalid', toBoolAttr(this.invalid))\n\t\tthis.f.passAttrToControl('success', toBoolAttr(this.success))\n\t\tthis.f.passAttrToControl('disabled', toBoolAttr(this.disabled))\n\t\tthis.f.passAttrToControl('type', 'select')\n\t}\n\n\tcomponentWillLoad() {\n\t\tthis.validateVariant(this.variant)\n\t\tthis.validateSize(this.size)\n\n\t\tthis.markSelectedValue()\n\n\t\tthis.optionsState = propsValueToArray(this.options)\n\t}\n\n\tasync componentDidRender() {\n\t\tthis.passControlAttrs()\n\t\tthis.f.passAttrToLabel('required', String(this.required))\n\n\t\tif (canValidateWcagOnRender()) {\n\t\t\tawait delay(500)\n\t\t\tawait this.validateWcag()\n\t\t}\n\t\ttick(() => this.markSelectedValue())\n\t}\n\n\tprivate markSelectedValue() {\n\t\tthis.host.querySelectorAll('option').forEach((option: HTMLOptionElement) => {\n\t\t\tif (option.value === this.value) {\n\t\t\t\toption.setAttribute('selected', 'selected')\n\t\t\t} else {\n\t\t\t\toption.removeAttribute('selected')\n\t\t\t}\n\t\t})\n\t}\n\n\trender() {\n\t\treturn (\n\t\t\t<Host class={FormSelectClass.root} size={this.size} variant={this.variant}>\n\t\t\t\t{this.h.hasSlot('prefix') && <slot name=\"prefix\"></slot>}\n\t\t\t\t<span class=\"element\">\n\t\t\t\t\t<gov-icon slot=\"right-icon\" name=\"chevron-down\" class=\"icon-arrow\"></gov-icon>\n\t\t\t\t\t{this.h.hasSlot('right-icon') && !(this.success || this.invalid) && <slot name=\"right-icon\"/>}\n\t\t\t\t\t{this.success && <gov-icon slot=\"right-icon\" class=\"icon-validation\" name=\"check-lg\"></gov-icon>}\n\t\t\t\t\t{this.invalid && <gov-icon slot=\"right-icon\" class=\"icon-validation\" name=\"exclamation-lg\"></gov-icon>}\n\t\t\t\t\t<select\n\t\t\t\t\t\tid={this.identifier || this.selectId}\n\t\t\t\t\t\tonFocus={this.onFocusHandler.bind(this)}\n\t\t\t\t\t\tonChange={this.onChangeHandler.bind(this)}\n\t\t\t\t\t\tonBlur={this.onBlurHandler.bind(this)}\n\t\t\t\t\t\trequired={this.required}\n\t\t\t\t\t\tname={this.name}\n\t\t\t\t\t\tdisabled={this.disabled}\n\t\t\t\t\t\tref={el => (this.selectRef = el as HTMLSelectElement)}\n\t\t\t\t\t\taria-disabled={toBoolAttrIfDefined(this.disabled)}\n\t\t\t\t\t\taria-activedescendant={this.wcagActiveDescendant}\n\t\t\t\t\t\taria-controls={this.wcagControls}\n\t\t\t\t\t\taria-required={toBoolAttrIfDefined(this.required)}\n\t\t\t\t\t\taria-invalid={toBoolAttrIfDefined(this.invalid)}\n\t\t\t\t\t\taria-describedby={this.wcagDescribedBy}\n\t\t\t\t\t\taria-labelledby={this.wcagLabelledBy}\n\t\t\t\t\t\taria-owns={this.wcagOwns}\n\t\t\t\t\t>\n\t\t\t\t\t\t<slot></slot>\n\t\t\t\t\t\t{Array.isArray(this.optionsState) && this.optionsState.map((option) => {\n\t\t\t\t\t\t\treturn (<option value={option.value} selected={option.value === this.value}\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tdisabled={option?.disabled}>{option.label ?? option.value}</option>)\n\t\t\t\t\t\t})}\n\t\t\t\t\t</select>\n\t\t\t\t</span>\n\t\t\t\t{this.h.hasSlot('sufix') && <slot name=\"sufix\"></slot>}\n\t\t\t</Host>\n\t\t)\n\t}\n\n\tprivate onFocusHandler(e: FocusEvent) {\n\t\tthis.focused = true\n\t\tthis.govFocus.emit({\n\t\t\tcomponent: FormSelectClass.root,\n\t\t\toriginalEvent: e,\n\t\t\tvalue: this.value,\n\t\t})\n\t}\n\n\tprivate onBlurHandler(e: FocusEvent) {\n\t\tthis.focused = false\n\t\tthis.govBlur.emit({\n\t\t\tcomponent: FormSelectClass.root,\n\t\t\toriginalEvent: e,\n\t\t\tvalue: this.value,\n\t\t})\n\t}\n\n\tprivate onChangeHandler(e: Event) {\n\t\tthis.value = (e.target as HTMLSelectElement).value\n\t\te.stopPropagation()\n\t\tthis.govChange.emit({\n\t\t\tcomponent: FormSelectClass.root,\n\t\t\toriginalEvent: e,\n\t\t\tvalue: this.value,\n\t\t})\n\t}\n\n\t/**\n\t * Returns the current state of the component\n\t */\n\t@Method()\n\tasync setFocus(options?: FocusOptions): Promise<void> {\n\t\treturn this.selectRef.focus(options)\n\t}\n\n\t/**\n\t * Returns an instance of the native html select element\n\t */\n\t@Method()\n\tasync getRef(): Promise<HTMLSelectElement> {\n\t\treturn this.selectRef\n\t}\n\n\t/**\n\t * Validate the WCAG attributes of the component\n\t */\n\t@Method()\n\tasync validateWcag(): Promise<void> {\n\t\tvalidateWcagRef(this.wcagActiveDescendant, 'wcag-active-descendant', FormSelectClass.root)\n\t\tvalidateWcagRef(this.wcagControls, 'wcag-controls', FormSelectClass.root)\n\t\tvalidateWcagRef(this.wcagDescribedBy, 'wcag-described-by', FormSelectClass.root)\n\t\tvalidateWcagRef(this.wcagOwns, 'wcag-owns', FormSelectClass.root)\n\t\tvalidateWcagLabelFor(this.identifier || this.selectId, this.wcagLabelledBy, FormSelectClass.root)\n\t}\n}\n"]}
+{"version":3,"file":"gov-form-select.js","sourceRoot":"","sources":["../../../../../../../src/components/gov-form/select/gov-form-select.tsx"],"names":[],"mappings":"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","sourcesContent":["import {Component, Element, Event, EventEmitter, h, Host, Method, Prop, State, Watch} from '@stencil/core'\nimport {govForm} from '../../../helpers/Dom/form'\nimport {GovForm} from '../../../helpers/Dom/form.types'\nimport {govHost, toBoolAttr, toBoolAttrIfDefined} from '../../../helpers/Dom/template'\nimport {GovHost} from '../../../helpers/Dom/template.types'\nimport {validateProp} from '../../../helpers/Validate/props'\nimport {createID} from '../../../utils/string.utils'\nimport {FormSelectClass, FormSelectSizes, FormSelectSizesType,} from './constants'\nimport {FormSelectEvent, FormSelectOption} from './gov-form-select.types'\nimport {propsValueToArray} from \"../../../utils/array.utils\";\nimport {tick} from \"../../../utils/stencil.utils\";\nimport {AttributeObserver, Attributes} from \"../../../helpers/Dom/attribute\";\nimport {ariaAttributes} from \"../../../helpers/Accessibility/attributes\";\nimport {inheritAriaAttributes} from \"../../../helpers/Accessibility/accessibility\";\n\n@Component({\n\ttag: 'gov-form-select',\n})\nexport class GovFormSelect {\n\tprivate f: GovForm\n\tprivate readonly h: GovHost\n\tprivate selectRef?: HTMLSelectElement\n\tprivate attributeObserver: AttributeObserver\n\n\tprivate readonly selectId: string\n\n\tconstructor() {\n\t\tthis.h = govHost(this.host)\n\t\tthis.f = govForm(this.h)\n\t\tthis.selectId = createID('GovSelect')\n\t}\n\n\t@Element() host: HTMLGovFormSelectElement\n\t/**\n\t * Value of select\n\t */\n\t@Prop({reflect: true, mutable: true}) value: string\n\t/**\n\t * Options of select\n\t */\n\t@Prop({reflect: true, mutable: true}) options?: string | FormSelectOption[]\n\t/**\n\t * Custom select identifier.\n\t */\n\t@Prop({attribute: 'identifier'}) readonly identifier: string\n\t/**\n\t * Select’s size.\n\t */\n\t@Prop() readonly size?: FormSelectSizesType = 'm'\n\t/**\n\t * Name of the select.\n\t */\n\t@Prop() readonly name: string\n\t/**\n\t * Set whether the input is required or not. Please note that this is necessary for accessible inputs when the user is required to fill them.\n\t * When using this property you need to also set “novalidate” attribute to your form element to prevent browser from displaying its own validation errors.\n\t */\n\t@Prop() readonly required: boolean = false\n\t/**\n\t * Indicates the entered value of child form element does conform to the format expected by the application.\n\t */\n\t@Prop() readonly success: boolean\n\t/**\n\t * Makes the select component disabled.\n\t * This prevents users from being able to interact with the select, and conveys its inactive state to assistive technologies.\n\t */\n\t@Prop() readonly disabled: boolean = false\n\t/**\n\t * Indicates the entered value does not conform to the format expected by the application.\n\t */\n\t@Prop() readonly invalid: boolean\n\t/**\n\t * Emitted when the select has focus.\n\t */\n\t@Event({eventName: 'gov-focus'}) govFocus: EventEmitter<FormSelectEvent>\n\t/**\n\t * Emitted when the select loses focus.\n\t */\n\t@Event({eventName: 'gov-blur'}) govBlur: EventEmitter<FormSelectEvent>\n\t/**\n\t * Emitted when the select change value.\n\t */\n\t@Event({eventName: 'gov-change'}) govChange: EventEmitter<FormSelectEvent>\n\t@State() focused: boolean\n\t@State() optionsState: FormSelectOption[] = []\n\n\t@Watch('size')\n\tvalidateSize(newValue: string): void {\n\t\tvalidateProp(FormSelectSizes, newValue, FormSelectClass.root)\n\t}\n\n\t@Watch('options')\n\twatchOptions(newValue: string | FormSelectOption[]): void {\n\t\tthis.optionsState = propsValueToArray(newValue)\n\t}\n\n\t@Watch('disabled')\n\t@Watch('invalid')\n\t@Watch('success')\n\t@Watch('size')\n\twatchControlAttrs(): void {\n\t\tthis.passControlAttrs()\n\t}\n\n\t@Watch('value')\n\twatchValue(): void {\n\t\tthis.markSelectedValue()\n\t}\n\n\t@State() inheritedAttributes: Attributes = {}\n\n\tprivate passControlAttrs() {\n\t\tthis.f.passAttrToControl('size', this.size)\n\t\tthis.f.passAttrToControl('invalid', toBoolAttr(this.invalid))\n\t\tthis.f.passAttrToControl('success', toBoolAttr(this.success))\n\t\tthis.f.passAttrToControl('disabled', toBoolAttr(this.disabled))\n\t\tthis.f.passAttrToControl('type', 'select')\n\t}\n\n\tcomponentDidLoad() {\n\t\tthis.attributeObserver = new AttributeObserver(this.host, (attributeName, newValue) => {\n\t\t\tthis.onAriaAttributeChange(attributeName, newValue);\n\t\t});\n\n\t\tthis.attributeObserver.startObserving(ariaAttributes);\n\t}\n\n\tdisconnectedCallback() {\n\t\tthis.attributeObserver.stopObserving();\n\t}\n\n\tcomponentWillLoad() {\n\t\tthis.validateSize(this.size)\n\n\t\tthis.markSelectedValue()\n\n\t\tthis.optionsState = propsValueToArray(this.options)\n\t\tthis.inheritedAttributes = inheritAriaAttributes(this.host);\n\t}\n\n\tasync componentDidRender() {\n\t\tthis.passControlAttrs()\n\t\tthis.f.passAttrToLabel('required', String(this.required))\n\t\ttick(() => this.markSelectedValue())\n\t}\n\n\tonAriaAttributeChange(attributeName: string, newValue: string) {\n\t\tthis.host.removeAttribute(attributeName)\n\t\tthis.inheritedAttributes = {...this.inheritedAttributes, [attributeName]: newValue};\n\t}\n\n\tprivate markSelectedValue() {\n\t\tthis.host.querySelectorAll('option').forEach((option: HTMLOptionElement) => {\n\t\t\tif (option.value === this.value) {\n\t\t\t\toption.setAttribute('selected', 'selected')\n\t\t\t} else {\n\t\t\t\toption.removeAttribute('selected')\n\t\t\t}\n\t\t})\n\t}\n\n\trender() {\n\t\treturn (\n\t\t\t<Host class={FormSelectClass.root} size={this.size}>\n\t\t\t\t{this.h.hasSlot('prefix') && <slot name=\"prefix\"></slot>}\n\t\t\t\t<span class=\"element\">\n\t\t\t\t\t<gov-icon slot=\"right-icon\" name=\"chevron-down\" class=\"icon-arrow\"></gov-icon>\n\t\t\t\t\t{this.h.hasSlot('right-icon') && !(this.success || this.invalid) && <slot name=\"right-icon\"/>}\n\t\t\t\t\t{this.success && <gov-icon slot=\"validation-icon\" name=\"check-lg\"></gov-icon>}\n\t\t\t\t\t{this.invalid && <gov-icon slot=\"validation-icon\" name=\"exclamation-lg\"></gov-icon>}\n\t\t\t\t\t<select\n\t\t\t\t\t\tid={this.identifier || this.selectId}\n\t\t\t\t\t\tonFocus={this.onFocusHandler.bind(this)}\n\t\t\t\t\t\tonChange={this.onChangeHandler.bind(this)}\n\t\t\t\t\t\tonBlur={this.onBlurHandler.bind(this)}\n\t\t\t\t\t\trequired={this.required}\n\t\t\t\t\t\tname={this.name}\n\t\t\t\t\t\tdisabled={this.disabled}\n\t\t\t\t\t\tref={el => (this.selectRef = el as HTMLSelectElement)}\n\t\t\t\t\t\t{...this.inheritedAttributes}\n\t\t\t\t\t\taria-disabled={toBoolAttrIfDefined(this.disabled)}\n\t\t\t\t\t\taria-required={toBoolAttrIfDefined(this.required)}\n\t\t\t\t\t\taria-invalid={toBoolAttrIfDefined(this.invalid)}\n\t\t\t\t\t>\n\t\t\t\t\t\t<slot></slot>\n\t\t\t\t\t\t{Array.isArray(this.optionsState) && this.optionsState.map((option) => {\n\t\t\t\t\t\t\treturn (<option value={option.value} selected={option.value === this.value}\n\t\t\t\t\t\t\t\t\t\t\tdisabled={option?.disabled}>{option.label ?? option.value}</option>)\n\t\t\t\t\t\t})}\n\t\t\t\t\t</select>\n\t\t\t\t</span>\n\t\t\t\t{this.h.hasSlot('sufix') && <slot name=\"sufix\"></slot>}\n\t\t\t</Host>\n\t\t)\n\t}\n\n\tprivate onFocusHandler(e: FocusEvent) {\n\t\tthis.focused = true\n\t\tthis.govFocus.emit({\n\t\t\tcomponent: FormSelectClass.root,\n\t\t\toriginalEvent: e,\n\t\t\tvalue: this.value,\n\t\t})\n\t}\n\n\tprivate onBlurHandler(e: FocusEvent) {\n\t\tthis.focused = false\n\t\tthis.govBlur.emit({\n\t\t\tcomponent: FormSelectClass.root,\n\t\t\toriginalEvent: e,\n\t\t\tvalue: this.value,\n\t\t})\n\t}\n\n\tprivate onChangeHandler(e: Event) {\n\t\tthis.value = (e.target as HTMLSelectElement).value\n\t\te.stopPropagation()\n\t\tthis.govChange.emit({\n\t\t\tcomponent: FormSelectClass.root,\n\t\t\toriginalEvent: e,\n\t\t\tvalue: this.value,\n\t\t})\n\t}\n\n\t/**\n\t * Returns the current state of the component\n\t */\n\t@Method()\n\tasync setFocus(options?: FocusOptions): Promise<void> {\n\t\treturn this.selectRef.focus(options)\n\t}\n\n\t/**\n\t * Returns an instance of the native html select element\n\t */\n\t@Method()\n\tasync getRef(): Promise<HTMLSelectElement> {\n\t\treturn this.selectRef\n\t}\n}\n"]}

package/dist/collection/components/gov-form/switch/constants.js

@@ -6,5 +6,6 @@ export const FormSwitchClass = {
     holder: 'gov-form-switch__holder',
     input: 'gov-form-switch__input',
     indicator: 'gov-form-switch__indicator',
+    label: 'gov-form-switch__label',
 };
 //# sourceMappingURL=constants.js.map

package/dist/collection/components/gov-form/switch/constants.js.map

@@ -1 +1 @@
-{"version":3,"file":"constants.js","sourceRoot":"","sources":["../../../../../../../src/components/gov-form/switch/constants.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,EAAE,MAAM,+BAA+B,CAAA;AAErD,OAAO,EAAE,IAAI,EAAE,MAAM,sBAAsB,CAAA;AAE3C,MAAM,CAAC,MAAM,eAAe,GAAG,IAAI,CAAC,KAAK,EAAE,CAAC,KAAK,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,CAAC,CAAC,CAAA;AAGrE,MAAM,CAAC,MAAM,eAAe,GAAG;IAC9B,IAAI,EAAE,iBAAiB;IACvB,MAAM,EAAE,yBAAyB;IACjC,KAAK,EAAE,wBAAwB;IAC/B,SAAS,EAAE,4BAA4B;CACvC,CAAA","sourcesContent":["import { Sizes } from '../../../core/constants/sizes'\nimport { ValueOf } from '../../../types/interfaces'\nimport { pick } from '../../../utils/utils'\n\nexport const FormSwitchSizes = pick(Sizes, ['_XS', '_S', '_M', '_L'])\nexport type FormSwitchSizesType = `${ValueOf<typeof FormSwitchSizes>}`\n\nexport const FormSwitchClass = {\n\troot: 'gov-form-switch',\n\tholder: 'gov-form-switch__holder',\n\tinput: 'gov-form-switch__input',\n\tindicator: 'gov-form-switch__indicator',\n}\n"]}
+{"version":3,"file":"constants.js","sourceRoot":"","sources":["../../../../../../../src/components/gov-form/switch/constants.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,EAAE,MAAM,+BAA+B,CAAA;AAErD,OAAO,EAAE,IAAI,EAAE,MAAM,sBAAsB,CAAA;AAE3C,MAAM,CAAC,MAAM,eAAe,GAAG,IAAI,CAAC,KAAK,EAAE,CAAC,KAAK,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,CAAC,CAAC,CAAA;AAGrE,MAAM,CAAC,MAAM,eAAe,GAAG;IAC9B,IAAI,EAAE,iBAAiB;IACvB,MAAM,EAAE,yBAAyB;IACjC,KAAK,EAAE,wBAAwB;IAC/B,SAAS,EAAE,4BAA4B;IACvC,KAAK,EAAE,wBAAwB;CAC/B,CAAA","sourcesContent":["import { Sizes } from '../../../core/constants/sizes'\nimport { ValueOf } from '../../../types/interfaces'\nimport { pick } from '../../../utils/utils'\n\nexport const FormSwitchSizes = pick(Sizes, ['_XS', '_S', '_M', '_L'])\nexport type FormSwitchSizesType = `${ValueOf<typeof FormSwitchSizes>}`\n\nexport const FormSwitchClass = {\n\troot: 'gov-form-switch',\n\tholder: 'gov-form-switch__holder',\n\tinput: 'gov-form-switch__input',\n\tindicator: 'gov-form-switch__indicator',\n\tlabel: 'gov-form-switch__label',\n}\n"]}

package/dist/collection/components/gov-form/switch/gov-form-switch.js

@@ -3,11 +3,11 @@ import { createID } from "../../../utils/string.utils";
 import { validateProp } from "../../../helpers/Validate/props";
 import { FormSwitchClass, FormSwitchSizes } from "./constants";
 import { govHost, toBoolAttr, toBoolAttrIfDefined } from "../../../helpers/Dom/template";
-import { validateWcagLabelFor, validateWcagRef } from "../../../helpers/Validate/wcag";
-import { canValidateWcagOnRender } from "../../../helpers/Dom/win";
-import { delay } from "../../../utils/utils";
 import { govForm } from "../../../helpers/Dom/form";
 import Fragment from "../../../helpers/Fragment";
+import { AttributeObserver } from "../../../helpers/Dom/attribute";
+import { ariaAttributes } from "../../../helpers/Accessibility/attributes";
+import { inheritAriaAttributes } from "../../../helpers/Accessibility/accessibility";
 export class GovFormSwitch {
     constructor() {
         this.hydrated = false;
@@ -20,8 +20,7 @@ export class GovFormSwitch {
         this.size = "m";
         this.identifier = undefined;
         this.invalid = undefined;
-        this.wcagDescribedBy = undefined;
-        this.wcagLabelledBy = undefined;
+        this.inheritedAttributes = {};
         this.checkboxId = createID("GovCheckbox");
         this.h = govHost(this.host);
         this.f = govForm(this.h);
@@ -38,26 +37,39 @@ export class GovFormSwitch {
         this.f.passAttrToControl("disabled", toBoolAttr(this.disabled));
         this.f.passAttrToControl("type", "switch");
     }
+    componentDidLoad() {
+        this.attributeObserver = new AttributeObserver(this.host, (attributeName, newValue) => {
+            this.onAriaAttributeChange(attributeName, newValue);
+        });
+        this.attributeObserver.startObserving(ariaAttributes);
+    }
+    componentWillLoad() {
+        this.passControlAttrs();
+        this.inheritedAttributes = inheritAriaAttributes(this.host);
+    }
+    disconnectedCallback() {
+        this.attributeObserver.stopObserving();
+    }
     async componentDidRender() {
         this.f.passAttrToLabel("identifier", this.identifier || this.checkboxId);
         this.f.passAttrToLabel("required", String(this.required));
         this.passControlAttrs();
-        if (canValidateWcagOnRender()) {
-            await delay(500);
-            await this.validateWcag();
-        }
     }
     connectedCallback() {
         this.hydrated = true;
     }
+    onAriaAttributeChange(attributeName, newValue) {
+        this.host.removeAttribute(attributeName);
+        this.inheritedAttributes = Object.assign(Object.assign({}, this.inheritedAttributes), { [attributeName]: newValue });
+    }
     render() {
         const wrapCheckbox = (children) => {
             if (this.noLabel) {
-                return (h("label", null, children));
+                return (h("label", { class: FormSwitchClass.label }, children));
             }
             return children;
         };
-        return (h(Host, { class: this.h.classes(FormSwitchClass.root), hydrated: this.hydrated, checked: this.checked, size: this.size, invalid: toBoolAttrIfDefined(this.invalid) }, h("div", { class: FormSwitchClass.holder }, wrapCheckbox(h(Fragment, null, h("input", { class: FormSwitchClass.input, id: this.identifier || this.checkboxId, type: "checkbox", value: this.value, name: this.name, disabled: this.disabled, checked: this.checked, onClick: this.onClickHandler.bind(this), onChange: this.onChangeHandler.bind(this), onFocus: this.onFocusHandler.bind(this), onBlur: this.onBlurHandler.bind(this), ref: el => (this.inputRef = el), required: this.required, "aria-checked": this.checked, "aria-required": toBoolAttrIfDefined(this.required), "aria-invalid": toBoolAttrIfDefined(this.invalid), "aria-describedby": this.wcagDescribedBy, "aria-labelledby": this.wcagLabelledBy, "aria-disabled": toBoolAttrIfDefined(this.disabled) }), h("span", { class: FormSwitchClass.indicator }), h("slot", { name: "label" }))))));
+        return (h(Host, { class: this.h.classes(FormSwitchClass.root), hydrated: this.hydrated, checked: this.checked, size: this.size, invalid: toBoolAttrIfDefined(this.invalid) }, wrapCheckbox(h(Fragment, null, h("input", Object.assign({ class: FormSwitchClass.input, id: this.identifier || this.checkboxId, type: "checkbox", value: this.value, name: this.name, disabled: this.disabled, checked: this.checked, onClick: this.onClickHandler.bind(this), onChange: this.onChangeHandler.bind(this), onFocus: this.onFocusHandler.bind(this), onBlur: this.onBlurHandler.bind(this), ref: el => (this.inputRef = el), required: this.required }, this.inheritedAttributes, { "aria-checked": this.checked, "aria-required": toBoolAttrIfDefined(this.required), "aria-invalid": toBoolAttrIfDefined(this.invalid), "aria-disabled": toBoolAttrIfDefined(this.disabled) })), h("span", null, h("span", { class: FormSwitchClass.indicator }, this.checked && h("gov-icon", { type: "basic", name: "check-lg" })), h("slot", { name: "label" }))))));
     }
     onClickHandler(e) {
         e.stopPropagation();
@@ -96,25 +108,7 @@ export class GovFormSwitch {
     async getRef() {
         return this.inputRef;
     }
-    /**
-     * Validate the WCAG attributes of the component
-     */
-    async validateWcag() {
-        validateWcagRef(this.wcagDescribedBy, "wcag-described-by", FormSwitchClass.root);
-        validateWcagRef(this.wcagLabelledBy, "wcag-labelled-by", FormSwitchClass.root);
-        validateWcagLabelFor(this.identifier || this.checkboxId, this.wcagLabelledBy, FormSwitchClass.root);
-    }
     static get is() { return "gov-form-switch"; }
-    static get originalStyleUrls() {
-        return {
-            "$": ["gov-form-switch.scss"]
-        };
-    }
-    static get styleUrls() {
-        return {
-            "$": ["gov-form-switch.css"]
-        };
-    }
     static get properties() {
         return {
             "value": {
@@ -182,7 +176,7 @@ export class GovFormSwitch {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "Set whether the input is required or not. Please note that this is necessary for accessible inputs when the user is required to fill them.\nWhen using this property you need to also set \u201Cnovalidate\u201D attribute to your form element to prevent browser from displaying its own validation errors."
+                    "text": "Set whether the input is required or not. Please note that this is necessary for accessible inputs when the user is required to fill them."
                 },
                 "attribute": "required",
                 "reflect": false,
@@ -200,7 +194,7 @@ export class GovFormSwitch {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "Makes the switch component disabled.\nThis prevents users from being able to interact with the switch, and conveys its inactive state to assistive technologies."
+                    "text": "Makes the switch component disabled."
                 },
                 "attribute": "disabled",
                 "reflect": false,
@@ -280,43 +274,14 @@ export class GovFormSwitch {
                 },
                 "attribute": "invalid",
                 "reflect": false
-            },
-            "wcagDescribedBy": {
-                "type": "string",
-                "mutable": false,
-                "complexType": {
-                    "original": "string",
-                    "resolved": "string",
-                    "references": {}
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": "Indicates the id of a component that describes the input."
-                },
-                "attribute": "wcag-described-by",
-                "reflect": false
-            },
-            "wcagLabelledBy": {
-                "type": "string",
-                "mutable": false,
-                "complexType": {
-                    "original": "string",
-                    "resolved": "string",
-                    "references": {}
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": "Indicates the id of a component that labels the input."
-                },
-                "attribute": "wcag-labelled-by",
-                "reflect": false
             }
         };
     }
+    static get states() {
+        return {
+            "inheritedAttributes": {}
+        };
+    }
     static get events() {
         return [{
                 "method": "govFocus",
@@ -405,23 +370,6 @@ export class GovFormSwitch {
                     "text": "Returns the reference of the native element",
                     "tags": []
                 }
-            },
-            "validateWcag": {
-                "complexType": {
-                    "signature": "() => Promise<void>",
-                    "parameters": [],
-                    "references": {
-                        "Promise": {
-                            "location": "global",
-                            "id": "global::Promise"
-                        }
-                    },
-                    "return": "Promise<void>"
-                },
-                "docs": {
-                    "text": "Validate the WCAG attributes of the component",
-                    "tags": []
-                }
             }
         };
     }

package/dist/collection/components/gov-form/switch/gov-form-switch.js.map

@@ -1 +1 @@
-{"version":3,"file":"gov-form-switch.js","sourceRoot":"","sources":["../../../../../../../src/components/gov-form/switch/gov-form-switch.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Element, Event, EventEmitter, h, Host, Method, Prop, Watch } from \"@stencil/core\"\nimport { createID } from \"../../../utils/string.utils\"\nimport { validateProp } from \"../../../helpers/Validate/props\"\nimport { FormSwitchClass, FormSwitchSizes, FormSwitchSizesType } from \"./constants\"\nimport { govHost, toBoolAttr, toBoolAttrIfDefined } from \"../../../helpers/Dom/template\"\nimport { validateWcagLabelFor, validateWcagRef } from \"../../../helpers/Validate/wcag\"\nimport { canValidateWcagOnRender } from \"../../../helpers/Dom/win\"\nimport { delay } from \"../../../utils/utils\"\nimport { GovForm } from \"../../../helpers/Dom/form.types\"\nimport { GovHost } from \"../../../helpers/Dom/template.types\"\nimport { govForm } from \"../../../helpers/Dom/form\"\nimport Fragment from \"../../../helpers/Fragment\"\nimport { FormSwitchEvent } from \"./gov-form-switch.types\"\n\n@Component({\n\ttag: \"gov-form-switch\",\n\tstyleUrl: \"gov-form-switch.scss\",\n})\nexport class GovFormSwitch {\n\tprivate readonly h: GovHost\n\tprivate f: GovForm\n\tprivate inputRef?: HTMLInputElement\n\n\tprivate readonly checkboxId: string\n\tprivate hydrated = false\n\n\tconstructor() {\n\t\tthis.checkboxId = createID(\"GovCheckbox\")\n\n\t\tthis.h = govHost(this.host)\n\t\tthis.f = govForm(this.h)\n\t}\n\n\t@Element() host: HTMLGovFormSwitchElement\n\t/**\n\t * Value of switch\n\t */\n\t@Prop() readonly value: string\n\t/**\n\t * When you can't use the form label.\n\t */\n\t@Prop({ attribute: \"no-label\" }) readonly noLabel: boolean = false\n\t/**\n\t * Switch button state\n\t */\n\t@Prop({ reflect: true, mutable: true }) checked = false\n\t/**\n\t * Set whether the input is required or not. Please note that this is necessary for accessible inputs when the user is required to fill them.\n\t * When using this property you need to also set “novalidate” attribute to your form element to prevent browser from displaying its own validation errors.\n\t */\n\t@Prop() readonly required: boolean = false\n\t/**\n\t * Makes the switch component disabled.\n\t * This prevents users from being able to interact with the switch, and conveys its inactive state to assistive technologies.\n\t */\n\t@Prop() readonly disabled: boolean = false\n\t/**\n\t * Name of the switch.\n\t */\n\t@Prop() readonly name: string\n\t/**\n\t * Switch's size.\n\t */\n\t@Prop() readonly size?: FormSwitchSizesType = \"m\"\n\t/**\n\t * Custom switch identifier.\n\t */\n\t@Prop({ attribute: \"identifier\" }) readonly identifier: string\n\t/**\n\t * Indicates the entered value does not conform to the format expected by the application.\n\t */\n\t@Prop() readonly invalid: boolean\n\t/**\n\t * Indicates the id of a component that describes the input.\n\t */\n\t@Prop({ attribute: \"wcag-described-by\" }) readonly wcagDescribedBy: string\n\t/**\n\t * Indicates the id of a component that labels the input.\n\t */\n\t@Prop({ attribute: \"wcag-labelled-by\" }) readonly wcagLabelledBy: string\n\t/**\n\t * Emitted when the switch has focus.\n\t */\n\t@Event({ eventName: \"gov-focus\" }) govFocus: EventEmitter<FormSwitchEvent>\n\t/**\n\t * Emitted when the switch loses focus.\n\t */\n\t@Event({ eventName: \"gov-blur\" }) govBlur: EventEmitter<FormSwitchEvent>\n\t/**\n\t * Emitted when the switch change value.\n\t */\n\t@Event({ eventName: \"gov-change\" }) govChange: EventEmitter<FormSwitchEvent>\n\n\t@Watch(\"size\")\n\tvalidateSize(newValue: string): void {\n\t\tvalidateProp(FormSwitchSizes, newValue, FormSwitchClass.root)\n\t}\n\n\t@Watch(\"disabled\")\n\t@Watch(\"invalid\")\n\t@Watch(\"size\")\n\twatchDisabled(): void {\n\t\tthis.passControlAttrs()\n\t}\n\n\tprivate passControlAttrs() {\n\t\tthis.f.passAttrToControl(\"size\", this.size)\n\t\tthis.f.passAttrToControl(\"invalid\", toBoolAttr(this.invalid))\n\t\tthis.f.passAttrToControl(\"disabled\", toBoolAttr(this.disabled))\n\t\tthis.f.passAttrToControl(\"type\", \"switch\")\n\t}\n\n\tasync componentDidRender() {\n\t\tthis.f.passAttrToLabel(\"identifier\", this.identifier || this.checkboxId)\n\t\tthis.f.passAttrToLabel(\"required\", String(this.required))\n\t\tthis.passControlAttrs()\n\t\tif (canValidateWcagOnRender()) {\n\t\t\tawait delay(500)\n\t\t\tawait this.validateWcag()\n\t\t}\n\t}\n\n\tconnectedCallback() {\n\t\tthis.hydrated = true\n\t}\n\n\trender() {\n\t\tconst wrapCheckbox = (children) => {\n\t\t\tif (this.noLabel) {\n\t\t\t\treturn (\n\t\t\t\t\t<label>\n\t\t\t\t\t\t{children}\n\t\t\t\t\t</label>\n\t\t\t\t)\n\t\t\t}\n\t\t\treturn children\n\t\t}\n\n\t\treturn (\n\t\t\t<Host class={this.h.classes(FormSwitchClass.root)} hydrated={this.hydrated} checked={this.checked} size={this.size} invalid={toBoolAttrIfDefined(this.invalid)}>\n\t\t\t\t<div class={FormSwitchClass.holder}>\n\t\t\t\t\t{wrapCheckbox(\n\t\t\t\t\t\t<Fragment>\n\t\t\t\t\t\t\t<input\n\t\t\t\t\t\t\t\tclass={FormSwitchClass.input}\n\t\t\t\t\t\t\t\tid={this.identifier || this.checkboxId}\n\t\t\t\t\t\t\t\ttype=\"checkbox\"\n\t\t\t\t\t\t\t\tvalue={this.value}\n\t\t\t\t\t\t\t\tname={this.name}\n\t\t\t\t\t\t\t\tdisabled={this.disabled}\n\t\t\t\t\t\t\t\tchecked={this.checked}\n\t\t\t\t\t\t\t\tonClick={this.onClickHandler.bind(this)}\n\t\t\t\t\t\t\t\tonChange={this.onChangeHandler.bind(this)}\n\t\t\t\t\t\t\t\tonFocus={this.onFocusHandler.bind(this)}\n\t\t\t\t\t\t\t\tonBlur={this.onBlurHandler.bind(this)}\n\t\t\t\t\t\t\t\tref={el => (this.inputRef = el as HTMLInputElement)}\n\t\t\t\t\t\t\t\trequired={this.required}\n\t\t\t\t\t\t\t\taria-checked={this.checked}\n\t\t\t\t\t\t\t\taria-required={toBoolAttrIfDefined(this.required)}\n\t\t\t\t\t\t\t\taria-invalid={toBoolAttrIfDefined(this.invalid)}\n\t\t\t\t\t\t\t\taria-describedby={this.wcagDescribedBy}\n\t\t\t\t\t\t\t\taria-labelledby={this.wcagLabelledBy}\n\t\t\t\t\t\t\t\taria-disabled={toBoolAttrIfDefined(this.disabled)}\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t<span class={FormSwitchClass.indicator}></span>\n\t\t\t\t\t\t\t<slot name=\"label\"></slot>\n\t\t\t\t\t\t</Fragment>,\n\t\t\t\t\t)}\n\t\t\t\t</div>\n\t\t\t</Host>\n\t\t)\n\t}\n\n\tprivate onClickHandler(e: Event) {\n\t\te.stopPropagation()\n\t}\n\n\tprivate onFocusHandler(e: FocusEvent) {\n\t\te.stopPropagation()\n\t\tthis.govFocus.emit({\n\t\t\tcomponent: FormSwitchClass.root,\n\t\t\tchecked: this.checked,\n\t\t\tvalue: this.value,\n\t\t\toriginalEvent: e,\n\t\t})\n\t}\n\n\tprivate onBlurHandler(e: FocusEvent) {\n\t\te.stopPropagation()\n\t\tthis.govBlur.emit({\n\t\t\tcomponent: FormSwitchClass.root,\n\t\t\tchecked: this.checked,\n\t\t\tvalue: this.value,\n\t\t\toriginalEvent: e,\n\t\t})\n\t}\n\n\tprivate onChangeHandler(e: Event) {\n\t\tthis.checked = (e.target as HTMLInputElement).checked\n\t\te.stopPropagation()\n\t\tthis.govChange.emit({\n\t\t\tcomponent: FormSwitchClass.root,\n\t\t\tchecked: this.checked,\n\t\t\tvalue: this.value,\n\t\t\toriginalEvent: e,\n\t\t})\n\t}\n\n\t/**\n\t * Returns the reference of the native element\n\t */\n\t@Method()\n\tasync getRef(): Promise<HTMLInputElement> {\n\t\treturn this.inputRef\n\t}\n\n\t/**\n\t * Validate the WCAG attributes of the component\n\t */\n\t@Method()\n\tasync validateWcag(): Promise<void> {\n\t\tvalidateWcagRef(this.wcagDescribedBy, \"wcag-described-by\", FormSwitchClass.root)\n\t\tvalidateWcagRef(this.wcagLabelledBy, \"wcag-labelled-by\", FormSwitchClass.root)\n\t\tvalidateWcagLabelFor(this.identifier || this.checkboxId, this.wcagLabelledBy, FormSwitchClass.root)\n\t}\n}\n"]}
+{"version":3,"file":"gov-form-switch.js","sourceRoot":"","sources":["../../../../../../../src/components/gov-form/switch/gov-form-switch.tsx"],"names":[],"mappings":"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","sourcesContent":["import {Component, Element, Event, EventEmitter, h, Host, Method, Prop, State, Watch} from \"@stencil/core\"\nimport {createID} from \"../../../utils/string.utils\"\nimport {validateProp} from \"../../../helpers/Validate/props\"\nimport {FormSwitchClass, FormSwitchSizes, FormSwitchSizesType} from \"./constants\"\nimport {govHost, toBoolAttr, toBoolAttrIfDefined} from \"../../../helpers/Dom/template\"\nimport {GovForm} from \"../../../helpers/Dom/form.types\"\nimport {GovHost} from \"../../../helpers/Dom/template.types\"\nimport {govForm} from \"../../../helpers/Dom/form\"\nimport Fragment from \"../../../helpers/Fragment\"\nimport {FormSwitchEvent} from \"./gov-form-switch.types\"\nimport {AttributeObserver, Attributes} from \"../../../helpers/Dom/attribute\";\nimport {ariaAttributes} from \"../../../helpers/Accessibility/attributes\";\nimport {inheritAriaAttributes} from \"../../../helpers/Accessibility/accessibility\";\n\n@Component({\n\ttag: \"gov-form-switch\",\n})\nexport class GovFormSwitch {\n\tprivate readonly h: GovHost\n\tprivate f: GovForm\n\tprivate inputRef?: HTMLInputElement\n\tprivate attributeObserver: AttributeObserver\n\n\tprivate readonly checkboxId: string\n\tprivate hydrated = false\n\n\tconstructor() {\n\t\tthis.checkboxId = createID(\"GovCheckbox\")\n\n\t\tthis.h = govHost(this.host)\n\t\tthis.f = govForm(this.h)\n\t}\n\n\t@Element() host: HTMLGovFormSwitchElement\n\t/**\n\t * Value of switch\n\t */\n\t@Prop() readonly value: string\n\t/**\n\t * When you can't use the form label.\n\t */\n\t@Prop({attribute: \"no-label\"}) readonly noLabel: boolean = false\n\t/**\n\t * Switch button state\n\t */\n\t@Prop({reflect: true, mutable: true}) checked = false\n\t/**\n\t * Set whether the input is required or not. Please note that this is necessary for accessible inputs when the user is required to fill them.\n\t */\n\t@Prop() readonly required: boolean = false\n\t/**\n\t * Makes the switch component disabled.\n\t */\n\t@Prop() readonly disabled: boolean = false\n\t/**\n\t * Name of the switch.\n\t */\n\t@Prop() readonly name: string\n\t/**\n\t * Switch's size.\n\t */\n\t@Prop() readonly size?: FormSwitchSizesType = \"m\"\n\t/**\n\t * Custom switch identifier.\n\t */\n\t@Prop({attribute: \"identifier\"}) readonly identifier: string\n\t/**\n\t * Indicates the entered value does not conform to the format expected by the application.\n\t */\n\t@Prop() readonly invalid: boolean\n\t/**\n\t * Emitted when the switch has focus.\n\t */\n\t@Event({eventName: \"gov-focus\"}) govFocus: EventEmitter<FormSwitchEvent>\n\t/**\n\t * Emitted when the switch loses focus.\n\t */\n\t@Event({eventName: \"gov-blur\"}) govBlur: EventEmitter<FormSwitchEvent>\n\t/**\n\t * Emitted when the switch change value.\n\t */\n\t@Event({eventName: \"gov-change\"}) govChange: EventEmitter<FormSwitchEvent>\n\n\t@Watch(\"size\")\n\tvalidateSize(newValue: string): void {\n\t\tvalidateProp(FormSwitchSizes, newValue, FormSwitchClass.root)\n\t}\n\n\t@Watch(\"disabled\")\n\t@Watch(\"invalid\")\n\t@Watch(\"size\")\n\twatchDisabled(): void {\n\t\tthis.passControlAttrs()\n\t}\n\n\t@State() inheritedAttributes: Attributes = {}\n\n\tprivate passControlAttrs() {\n\t\tthis.f.passAttrToControl(\"size\", this.size)\n\t\tthis.f.passAttrToControl(\"invalid\", toBoolAttr(this.invalid))\n\t\tthis.f.passAttrToControl(\"disabled\", toBoolAttr(this.disabled))\n\t\tthis.f.passAttrToControl(\"type\", \"switch\")\n\t}\n\n\tcomponentDidLoad() {\n\t\tthis.attributeObserver = new AttributeObserver(this.host, (attributeName, newValue) => {\n\t\t\tthis.onAriaAttributeChange(attributeName, newValue);\n\t\t});\n\n\t\tthis.attributeObserver.startObserving(ariaAttributes);\n\t}\n\n\tcomponentWillLoad() {\n\t\tthis.passControlAttrs()\n\t\tthis.inheritedAttributes = inheritAriaAttributes(this.host);\n\t}\n\n\tdisconnectedCallback() {\n\t\tthis.attributeObserver.stopObserving();\n\t}\n\n\tasync componentDidRender() {\n\t\tthis.f.passAttrToLabel(\"identifier\", this.identifier || this.checkboxId)\n\t\tthis.f.passAttrToLabel(\"required\", String(this.required))\n\t\tthis.passControlAttrs()\n\t}\n\n\tconnectedCallback() {\n\t\tthis.hydrated = true\n\t}\n\n\tonAriaAttributeChange(attributeName: string, newValue: string) {\n\t\tthis.host.removeAttribute(attributeName)\n\t\tthis.inheritedAttributes = {...this.inheritedAttributes, [attributeName]: newValue};\n\t}\n\n\trender() {\n\t\tconst wrapCheckbox = (children) => {\n\t\t\tif (this.noLabel) {\n\t\t\t\treturn (\n\t\t\t\t\t<label class={FormSwitchClass.label}>\n\t\t\t\t\t\t{children}\n\t\t\t\t\t</label>\n\t\t\t\t)\n\t\t\t}\n\t\t\treturn children\n\t\t}\n\n\t\treturn (\n\t\t\t<Host class={this.h.classes(FormSwitchClass.root)} hydrated={this.hydrated} checked={this.checked}\n\t\t\t\t  size={this.size} invalid={toBoolAttrIfDefined(this.invalid)}>\n\t\t\t\t{wrapCheckbox(\n\t\t\t\t\t<Fragment>\n\t\t\t\t\t\t<input\n\t\t\t\t\t\t\tclass={FormSwitchClass.input}\n\t\t\t\t\t\t\tid={this.identifier || this.checkboxId}\n\t\t\t\t\t\t\ttype=\"checkbox\"\n\t\t\t\t\t\t\tvalue={this.value}\n\t\t\t\t\t\t\tname={this.name}\n\t\t\t\t\t\t\tdisabled={this.disabled}\n\t\t\t\t\t\t\tchecked={this.checked}\n\t\t\t\t\t\t\tonClick={this.onClickHandler.bind(this)}\n\t\t\t\t\t\t\tonChange={this.onChangeHandler.bind(this)}\n\t\t\t\t\t\t\tonFocus={this.onFocusHandler.bind(this)}\n\t\t\t\t\t\t\tonBlur={this.onBlurHandler.bind(this)}\n\t\t\t\t\t\t\tref={el => (this.inputRef = el as HTMLInputElement)}\n\t\t\t\t\t\t\trequired={this.required}\n\t\t\t\t\t\t\t{...this.inheritedAttributes}\n\t\t\t\t\t\t\taria-checked={this.checked}\n\t\t\t\t\t\t\taria-required={toBoolAttrIfDefined(this.required)}\n\t\t\t\t\t\t\taria-invalid={toBoolAttrIfDefined(this.invalid)}\n\t\t\t\t\t\t\taria-disabled={toBoolAttrIfDefined(this.disabled)}\n\t\t\t\t\t\t/>\n\t\t\t\t\t\t<span>\n\t\t\t\t\t\t\t<span class={FormSwitchClass.indicator}>\n\t\t\t\t\t\t\t\t{this.checked && <gov-icon type=\"basic\" name=\"check-lg\"/>}\n\t\t\t\t\t\t\t</span>\n\t\t\t\t\t\t\t<slot name=\"label\"></slot>\n\t\t\t\t\t\t</span>\n\t\t\t\t\t</Fragment>,\n\t\t\t\t)}\n\t\t\t</Host>\n\t\t)\n\t}\n\n\tprivate onClickHandler(e: Event) {\n\t\te.stopPropagation()\n\t}\n\n\tprivate onFocusHandler(e: FocusEvent) {\n\t\te.stopPropagation()\n\t\tthis.govFocus.emit({\n\t\t\tcomponent: FormSwitchClass.root,\n\t\t\tchecked: this.checked,\n\t\t\tvalue: this.value,\n\t\t\toriginalEvent: e,\n\t\t})\n\t}\n\n\tprivate onBlurHandler(e: FocusEvent) {\n\t\te.stopPropagation()\n\t\tthis.govBlur.emit({\n\t\t\tcomponent: FormSwitchClass.root,\n\t\t\tchecked: this.checked,\n\t\t\tvalue: this.value,\n\t\t\toriginalEvent: e,\n\t\t})\n\t}\n\n\tprivate onChangeHandler(e: Event) {\n\t\tthis.checked = (e.target as HTMLInputElement).checked\n\t\te.stopPropagation()\n\t\tthis.govChange.emit({\n\t\t\tcomponent: FormSwitchClass.root,\n\t\t\tchecked: this.checked,\n\t\t\tvalue: this.value,\n\t\t\toriginalEvent: e,\n\t\t})\n\t}\n\n\t/**\n\t * Returns the reference of the native element\n\t */\n\t@Method()\n\tasync getRef(): Promise<HTMLInputElement> {\n\t\treturn this.inputRef\n\t}\n}\n"]}