@gov-design-system-ce/components 4.0.8-rc17 → 4.0.8-rc19

package/dist/hydrate/index.mjs

@@ -4210,11 +4210,12 @@ class GovFormCheckbox {
     validateSize(newValue) {
         validateProp(FormCheckboxSizes, newValue, FormCheckboxClass.root);
     }
-    watchDisabled() {
+    watchControlAttrs() {
         this.passControlAttrs();
     }
     passControlAttrs() {
         this.f.passAttrToControl("size", this.size);
+        this.f.passAttrToControl("disabled", toBoolAttr(this.disabled));
         this.f.passAttrToControl("invalid", toBoolAttr(this.invalid));
     }
     componentWillLoad() {
@@ -4288,9 +4289,9 @@ class GovFormCheckbox {
     }
     get host() { return getElement(this); }
     static get watchers() { return {
-        "size": ["validateSize", "watchDisabled"],
-        "disabled": ["watchDisabled"],
-        "invalid": ["watchDisabled"]
+        "size": ["validateSize", "watchControlAttrs"],
+        "disabled": ["watchControlAttrs"],
+        "invalid": ["watchControlAttrs"]
     }; }
     static get style() { return GovFormCheckboxStyle0; }
     static get cmpMeta() { return {
@@ -4424,7 +4425,6 @@ var GovFormControlStyle0 = govFormControlCss;
 class GovFormControl {
     constructor(hostRef) {
         registerInstance(this, hostRef);
-        this.gap = undefined;
         this.identifier = undefined;
         this.invalid = false;
         this.disabled = false;
@@ -4433,11 +4433,8 @@ class GovFormControl {
         this.size = "m";
         this.h = govHost(this.host);
         this.f = govForm(this.h);
-        this.controlId = createID("GovFormControl");
     }
     componentDidRender() {
-        this.passChildAttrs();
-        this.invalidChildAttrs();
         this.syncControlMessages();
         this.formElementDescriptionControl();
     }
@@ -4445,38 +4442,6 @@ class GovFormControl {
         var _a;
         (_a = this.observer) === null || _a === void 0 ? void 0 : _a.disconnect();
     }
-    passChildAttrs() {
-        const formElements = [
-            "gov-form-select",
-            "gov-form-input",
-            "gov-form-switch",
-            "gov-form-checkbox",
-            "gov-form-radio",
-            "gov-form-multi-select",
-            "gov-form-file",
-            "gov-form-search",
-        ];
-        this.h.passChildAttr(formElements, "success", this.success);
-        if (this.f.hasGroupChildren === false) {
-            this.h.passChildAttr([...formElements, "gov-form-label"], "identifier", this.identifier || this.controlId);
-        }
-    }
-    invalidChildAttrs() {
-        const formElements = [
-            "gov-form-select",
-            "gov-form-input",
-            "gov-form-switch",
-            "gov-form-checkbox",
-            "gov-form-radio",
-            "gov-form-multi-select",
-            "gov-form-file",
-            "gov-form-search",
-        ];
-        this.h.passChildAttr(formElements, "invalid", this.invalid);
-        if (this.f.hasGroupChildren === false) {
-            this.h.passChildAttr([...formElements, "gov-form-label"], "identifier", this.identifier || this.controlId);
-        }
-    }
     formElementDescriptionControl() {
         const bottomSlot = this.host.querySelector("." + FormControlClass.bottom);
         if (!bottomSlot)
@@ -4502,7 +4467,7 @@ class GovFormControl {
     }
     render() {
         const Tag = this.fieldset ? "fieldset" : "div";
-        return (hAsync(Host, { key: '995792ee7710d6773866b229f94c694e4b442e34', size: this.size, class: this.h.classes(FormControlClass.root) }, hAsync(Tag, { key: '3ee8104bd8f394da8d422c11be6eecd6733cd3e9', class: FormControlClass.holder }, this.h.hasSlot("top") && hAsync("slot", { key: '18221ae1cbc710eea0e90869174438a3eeae32dd', name: "top" }), hAsync("slot", { key: 'f4362ffaf96e51c1e20977ea8ef0d8d2deab6d4c' }), this.h.hasSlot("bottom") && (hAsync("div", { key: '528552235a2eaa1530e635870bf97b110fd32753', class: FormControlClass.bottom }, hAsync("slot", { key: '102521effa28ca385838c6c01e33a871b2bf0f4a', name: "bottom" }))))));
+        return (hAsync(Host, { key: '9178f9dbaff42cb649849621e34059afa6d387d7', size: this.size, class: this.h.classes(FormControlClass.root) }, hAsync(Tag, { key: '296540b214c4106f676b3bf4981ad84409004472', class: FormControlClass.holder }, this.h.hasSlot("top") && hAsync("slot", { key: 'b62e1d46f8fdc6b56ae481de1cb1fb020f9f8ec6', name: "top" }), hAsync("slot", { key: '24ffcd827657b1b02cbe657c41be16af9f8da165' }), this.h.hasSlot("bottom") && (hAsync("div", { key: '77d9ee6b541d4b1073fd621deec00c2336aff240', class: FormControlClass.bottom }, hAsync("slot", { key: '4c7f2200a2fd55b3f801dc40383b7a91cbb18b7d', name: "bottom" }))))));
     }
     get host() { return getElement(this); }
     static get style() { return GovFormControlStyle0; }
@@ -4510,7 +4475,6 @@ class GovFormControl {
         "$flags$": 4,
         "$tagName$": "gov-form-control",
         "$members$": {
-            "gap": [1],
             "identifier": [1],
             "invalid": [4],
             "disabled": [4],
@@ -4595,12 +4559,12 @@ class GovFormFile {
         this.h = govHost(this.host);
         this.f = govForm(this.h);
     }
-    watchDisabled() {
+    watchControlAttrs() {
         this.passControlAttrs();
     }
     passControlAttrs() {
         this.f.passAttrToControl("invalid", toBoolAttr(this.invalid));
-        this.f.passAttrToControl("type", "File");
+        this.f.passAttrToControl("disabled", toBoolAttr(this.disabled));
     }
     registerListeners() {
         function highlight() {
@@ -4675,7 +4639,8 @@ class GovFormFile {
     }
     componentWillLoad() {
         this.f.passAttrToLabel("required", String(this.required));
-        this.watchDisabled();
+        this.f.passAttrToControl("type", "File");
+        this.passControlAttrs();
     }
     async componentDidRender() {
         if (canValidateWcagOnRender()) {
@@ -4685,7 +4650,7 @@ class GovFormFile {
         this.registerListeners();
     }
     render() {
-        return (hAsync(Host, { key: '0f0c007e221e04c4876b204dc1967f5b3bc7cfa4', class: this.h.classes([FormFileClass.root]), invalid: toBoolAttrIfDefined(this.invalid), expanded: toBoolAttrIfDefined(this.expanded) }, hAsync("div", { key: 'f49933f160fcebaf5b6b7a65a039d4b1dadeadea', class: FormFileClass.area, ref: el => (this.areaRef = el) }, hAsync("slot", { key: '1bd9bc79fae21146bfa60b34cc0a9caeaf53b4e0' }), hAsync("input", { key: '71c235790f137f973f65fa5cc355af2da124a86f', class: FormFileClass.input, ref: el => (this.inputRef = el), id: this.identifier || this.fileId, type: "file", name: this.name, accept: this.accept, multiple: this.multiple, onChange: this.onChangeHandler.bind(this), onFocus: this.onFocusHandler.bind(this), onBlur: this.onBlurHandler.bind(this), required: this.required, disabled: this.disabled, "aria-required": toBoolAttrIfDefined(this.required), "aria-invalid": toBoolAttrIfDefined(this.invalid), "aria-describedby": this.wcagDescribedBy, "aria-labelledby": this.wcagLabelledBy, "aria-disabled": toBoolAttrIfDefined(this.disabled) })), this.h.hasSlot("attachments") ? (hAsync("div", { class: FormFileClass.attachments }, hAsync("slot", { name: "attachments" }))) : null, this.files.length && this.displayAttachments ? (hAsync("div", { class: FormFileClass.attachments }, hAsync("gov-attachments", { label: this.wcagAttachmentsLabel, "wcag-label": this.wcagAttachmentsLabel }, this.files.map(item => (hAsync("gov-attachments-item", { "wcag-remove-labelled-by": item.id, "on-gov-remove": () => this.onRemoveFileHandler(item) }, hAsync("span", { class: "sr-only", id: item.id }, this.wcagRemoveLabel.replace("{FILE_NAME}", item.file.name)), item.file.name, item.acceptValid === false ? (hAsync("gov-form-message", { slot: "message", variant: "error" }, hAsync("gov-icon", { slot: "icon", name: "exclamation-triangle-fill" }), item.acceptValid === false ? this.errorAccept : null)) : null, item.sizeValid === false ? (hAsync("gov-form-message", { slot: "message", variant: "error" }, hAsync("gov-icon", { slot: "icon", name: "exclamation-triangle-fill" }), this.errorSize.replace("{FILE_SIZE}", formatBytes(this.maxFileSize)))) : null, hAsync("span", { slot: "info" }, "(", formatBytes(item.file.size), ")"))))))) : null));
+        return (hAsync(Host, { key: 'f8ab9ecfba8ade897c1ba9d343259fd77fe74f68', class: this.h.classes([FormFileClass.root]), invalid: toBoolAttrIfDefined(this.invalid), expanded: toBoolAttrIfDefined(this.expanded) }, hAsync("div", { key: '9b1051cb9163af7ceaf42462a2d040a04e3e2088', class: FormFileClass.area, ref: el => (this.areaRef = el) }, hAsync("slot", { key: 'cf789459997322558f3a27eeaacaab2e11757aed' }), hAsync("input", { key: '82d86f00eecd47a10b9540cc0671303d443b536b', class: FormFileClass.input, ref: el => (this.inputRef = el), id: this.identifier || this.fileId, type: "file", name: this.name, accept: this.accept, multiple: this.multiple, onChange: this.onChangeHandler.bind(this), onFocus: this.onFocusHandler.bind(this), onBlur: this.onBlurHandler.bind(this), required: this.required, disabled: this.disabled, "aria-required": toBoolAttrIfDefined(this.required), "aria-invalid": toBoolAttrIfDefined(this.invalid), "aria-describedby": this.wcagDescribedBy, "aria-labelledby": this.wcagLabelledBy, "aria-disabled": toBoolAttrIfDefined(this.disabled) })), this.h.hasSlot("attachments") ? (hAsync("div", { class: FormFileClass.attachments }, hAsync("slot", { name: "attachments" }))) : null, this.files.length && this.displayAttachments ? (hAsync("div", { class: FormFileClass.attachments }, hAsync("gov-attachments", { label: this.wcagAttachmentsLabel, "wcag-label": this.wcagAttachmentsLabel }, this.files.map(item => (hAsync("gov-attachments-item", { "wcag-remove-labelled-by": item.id, "on-gov-remove": () => this.onRemoveFileHandler(item) }, hAsync("span", { class: "sr-only", id: item.id }, this.wcagRemoveLabel.replace("{FILE_NAME}", item.file.name)), item.file.name, item.acceptValid === false ? (hAsync("gov-form-message", { slot: "message", variant: "error" }, hAsync("gov-icon", { slot: "icon", name: "exclamation-triangle-fill" }), item.acceptValid === false ? this.errorAccept : null)) : null, item.sizeValid === false ? (hAsync("gov-form-message", { slot: "message", variant: "error" }, hAsync("gov-icon", { slot: "icon", name: "exclamation-triangle-fill" }), this.errorSize.replace("{FILE_SIZE}", formatBytes(this.maxFileSize)))) : null, hAsync("span", { slot: "info" }, "(", formatBytes(item.file.size), ")"))))))) : null));
     }
     onRemoveFileHandler(file) {
         const index = this.files.findIndex(item => item.id === file.id);
@@ -4750,8 +4715,8 @@ class GovFormFile {
     }
     get host() { return getElement(this); }
     static get watchers() { return {
-        "disabled": ["watchDisabled"],
-        "invalid": ["watchDisabled"]
+        "disabled": ["watchControlAttrs"],
+        "invalid": ["watchControlAttrs"]
     }; }
     static get style() { return GovFormFileStyle0; }
     static get cmpMeta() { return {
@@ -4893,19 +4858,21 @@ class GovFormInput {
     validateSize(newValue) {
         validateProp(FormInputSizes, newValue, FormInputClass.root);
     }
-    watchDisabled() {
+    watchControlAttrs() {
         this.passControlAttrs();
     }
     passControlAttrs() {
         this.f.passAttrToControl("size", this.size);
+        this.f.passAttrToControl("success", toBoolAttr(this.success));
+        this.f.passAttrToControl("disabled", toBoolAttr(this.disabled));
         this.f.passAttrToControl("invalid", toBoolAttr(this.invalid));
-        this.f.passAttrToControl("type", this.multiline ? Tags$1.TEXTAREA : Tags$1.INPUT);
     }
     componentWillLoad() {
         this.validateVariant(this.variant);
         this.validateSize(this.size);
         this.passControlAttrs();
         this.f.passAttrToLabel("required", String(this.required));
+        this.f.passAttrToControl("type", this.multiline ? Tags$1.TEXTAREA : Tags$1.INPUT);
     }
     async componentDidRender() {
         if (canValidateWcagOnRender()) {
@@ -4918,9 +4885,9 @@ class GovFormInput {
     }
     render() {
         const Tag = this.multiline ? Tags$1.TEXTAREA : Tags$1.INPUT;
-        return (hAsync(Host, { key: '1d217855ba964b9c637373529e2b677fb09f8034', class: FormInputClass.root, size: this.size, variant: this.variant, type: this.type }, this.h.hasSlot("prefix") && hAsync("slot", { key: '75b989d2f4b70cf43e9a5315fdb6eb56af832118', name: "prefix" }), hAsync("span", { key: '39f063be627ad300abe364adfa4a32b79a879773', class: "element" }, this.h.hasSlot("left-icon") && hAsync("slot", { key: '84da6d8d05274f5a9760b871ffb89dec870122f8', name: "left-icon" }), this.h.hasSlot("right-icon") && !(this.success || this.invalid) && hAsync("slot", { key: 'b8ede08c703cc88e526593cb5aac4a868293543c', name: "right-icon" }), this.success && !this.multiline &&
-            hAsync("gov-icon", { key: '1dad15f0bbab72fef2f2d596fb2ce27b097eb3a4', slot: "right-icon", class: "icon-validation", name: "check-lg" }), this.invalid && !this.multiline &&
-            hAsync("gov-icon", { key: '9d8ed110a2640133ecc462c6b06f1f5496fb61f7', slot: "right-icon", class: "icon-validation", name: "exclamation-lg" }), hAsync(Tag, { key: '62ac8ee0c14c5289c377685fabf535947a43f4c5', type: this.inputType, disabled: this.disabled, id: this.identifier || this.inputId, name: this.name, onFocus: this.onFocusHandler.bind(this), onInput: this.onInputHandler.bind(this), onBlur: this.onBlurHandler.bind(this), onKeyUp: this.onKeyUpHandler.bind(this), onKeyDown: this.onKeyDownHandler.bind(this), ref: el => (this.inputRef = el), placeholder: this.placeholder, value: this.value, spellcheck: toBoolAttrIfDefined(this.spellcheck), lang: this.inputLang, readonly: toBoolAttrIfDefined(this.readonly), autocomplete: toOnOffAttrIfDefined(this.autocomplete), autocorrect: toOnOffAttrIfDefined(this.autocorrect), minlength: this.minlength, maxlength: this.maxlength, min: this.min, max: this.max, required: this.required, rows: this.rows, cols: this.cols, role: this.role, "aria-required": toBoolAttrIfDefined(this.required), "aria-invalid": toBoolAttrIfDefined(this.invalid), "aria-disabled": toBoolAttrIfDefined(this.disabled), "aria-describedby": this.wcagDescribedBy, "aria-labelledby": this.wcagLabelledBy, "aria-owns": this.wcagOwns, "aria-expanded": toBoolAttrIfDefined(this.wcagExpanded), "aria-autocomplete": this.wcagAutocomplete })), this.h.hasSlot("sufix") && hAsync("slot", { key: '9746bac959c672b37d1c5529cbbe0da13ecf4ce8', name: "sufix" })));
+        return (hAsync(Host, { key: 'fb06974797e9fe99cc0845cd9aac8cc79bfc0583', class: FormInputClass.root, size: this.size, variant: this.variant, type: this.type }, this.h.hasSlot("prefix") && hAsync("slot", { key: 'c8a307ca8c1e4e4a27ac00463523f19c4012bbfe', name: "prefix" }), hAsync("span", { key: 'b86a839790465feda8d50385ca5b44a98c3ee81d', class: "element" }, this.h.hasSlot("left-icon") && hAsync("slot", { key: '300d97f0f13e95ac306b3c0332ccb58b99988c7a', name: "left-icon" }), this.h.hasSlot("right-icon") && !(this.success || this.invalid) && hAsync("slot", { key: '6d2673bc16e363b52662671a172f7c20eca85c62', name: "right-icon" }), this.success && !this.multiline &&
+            hAsync("gov-icon", { key: '40c2f0e9991833ad731e469164d0bd148d883007', slot: "right-icon", class: "icon-validation", name: "check-lg" }), this.invalid && !this.multiline &&
+            hAsync("gov-icon", { key: '56d940b36602db7749fc1656fdee739b2ad21370', slot: "right-icon", class: "icon-validation", name: "exclamation-lg" }), hAsync(Tag, { key: 'ecdf27b1a0889cfd0367ded8cffd24152c2e1d01', type: this.inputType, disabled: this.disabled, id: this.identifier || this.inputId, name: this.name, onFocus: this.onFocusHandler.bind(this), onInput: this.onInputHandler.bind(this), onBlur: this.onBlurHandler.bind(this), onKeyUp: this.onKeyUpHandler.bind(this), onKeyDown: this.onKeyDownHandler.bind(this), ref: el => (this.inputRef = el), placeholder: this.placeholder, value: this.value, spellcheck: toBoolAttrIfDefined(this.spellcheck), lang: this.inputLang, readonly: toBoolAttrIfDefined(this.readonly), autocomplete: toOnOffAttrIfDefined(this.autocomplete), autocorrect: toOnOffAttrIfDefined(this.autocorrect), minlength: this.minlength, maxlength: this.maxlength, min: this.min, max: this.max, required: this.required, rows: this.rows, cols: this.cols, role: this.role, "aria-required": toBoolAttrIfDefined(this.required), "aria-invalid": toBoolAttrIfDefined(this.invalid), "aria-disabled": toBoolAttrIfDefined(this.disabled), "aria-describedby": this.wcagDescribedBy, "aria-labelledby": this.wcagLabelledBy, "aria-owns": this.wcagOwns, "aria-expanded": toBoolAttrIfDefined(this.wcagExpanded), "aria-autocomplete": this.wcagAutocomplete })), this.h.hasSlot("sufix") && hAsync("slot", { key: 'bd6b9c7a981c40fdddf83e8ce0778978e1ea31af', name: "sufix" })));
     }
     onFocusHandler(e) {
         e.stopPropagation();
@@ -5002,10 +4969,10 @@ class GovFormInput {
     get host() { return getElement(this); }
     static get watchers() { return {
         "variant": ["validateVariant"],
-        "size": ["validateSize", "watchDisabled"],
-        "disabled": ["watchDisabled"],
-        "invalid": ["watchDisabled"],
-        "type": ["watchDisabled"]
+        "size": ["validateSize", "watchControlAttrs"],
+        "disabled": ["watchControlAttrs"],
+        "invalid": ["watchControlAttrs"],
+        "success": ["watchControlAttrs"]
     }; }
     static get style() { return GovFormInputStyle0; }
     static get cmpMeta() { return {
@@ -5015,14 +4982,14 @@ class GovFormInput {
             "value": [1537],
             "identifier": [1],
             "variant": [1],
-            "success": [4],
+            "success": [516],
             "size": [1],
             "name": [1],
             "multiline": [4],
             "rows": [2],
             "cols": [2],
-            "required": [4],
-            "disabled": [4],
+            "required": [516],
+            "disabled": [516],
             "placeholder": [1],
             "readonly": [4],
             "minlength": [2],
@@ -5036,7 +5003,7 @@ class GovFormInput {
             "type": [1],
             "inputType": [1, "input-type"],
             "role": [1],
-            "invalid": [4],
+            "invalid": [516],
             "wcagDescribedBy": [1, "wcag-described-by"],
             "wcagLabelledBy": [1, "wcag-labelled-by"],
             "wcagOwns": [1, "wcag-owns"],
@@ -5051,7 +5018,7 @@ class GovFormInput {
         },
         "$listeners$": undefined,
         "$lazyBundleId$": "-",
-        "$attrsToReflect$": [["value", "value"]]
+        "$attrsToReflect$": [["value", "value"], ["success", "success"], ["required", "required"], ["disabled", "disabled"], ["invalid", "invalid"]]
     }; }
 }
 
@@ -5179,18 +5146,18 @@ class GovFormMultiSelect {
     watchValue(newValue) {
         this.selectedOptionsState = propsValueToArray(newValue);
     }
-    watchDisabled() {
+    watchControlAttrs() {
         this.passControlAttrs();
     }
     passControlAttrs() {
         this.f.passAttrToControl('size', this.size);
         this.f.passAttrToControl('invalid', toBoolAttr(this.invalid));
+        this.f.passAttrToControl('disabled', toBoolAttr(this.disabled));
         this.f.passAttrToControl('success', toBoolAttr(this.success));
     }
     componentWillLoad() {
         this.validateVariant(this.variant);
         this.validateSize(this.size);
-        this.watchDisabled();
         this.passControlAttrs();
         this.f.passAttrToLabel('required', String(this.required));
         this.optionsState = propsValueToArray(this.options);
@@ -5306,7 +5273,7 @@ class GovFormMultiSelect {
         }
     }
     render() {
-        return (hAsync(Host, { key: 'bb5855ba2a4cd63ad2093ae2aebd67f3349cea28', class: FormMultiSelectClass.root, size: this.size, variant: this.variant }, hAsync("div", { key: '3abae4b8ea9cc625a21dd45e1b9ee8befc49b8b6', class: FormMultiSelectClass.wrap }, this.h.hasSlot('prefix') && hAsync("slot", { key: '86da9e574fe68a4883b3df4da602e05f627e4714', name: "prefix" }), hAsync("div", { key: '87d30a0d40739f4a4dbeaa9b5cef946ed9873c00', class: "element" }, hAsync("gov-form-autocomplete", { key: 'ee44381d4eb97059d935135391951e7750afa648', value: this.valueState, disabled: this.disabled, identifier: this.identifier || this.selectId, required: false, size: this.size, variant: this.variant, placeholder: this.placeholder, "message-empty": this.messageEmpty, "message-loading": this.messageLoading, ref: el => (this.autocompleteRef = el), minlength: 0, "name-key": 'label', wcagDescribedBy: this.wcagDescribedBy, wcagLabelledBy: this.wcagLabelledBy, wcagOwns: this.listId }), hAsync("gov-icon", { key: '83bdc379de06eab7db28d17cd39cd34128e60090', slot: "right-icon", class: "icon-arrow", name: "chevron-down" }), this.h.hasSlot('right-icon') && !(this.success || this.invalid) && hAsync("slot", { key: '809ab0378b25182006e15effcb29babacb93274a', name: "right-icon" }), this.success && hAsync("gov-icon", { key: '85ef665e98040503ea14743e8497ceb7b48d3a9e', slot: "right-icon", class: "icon-validation", name: "check-lg" }), this.invalid && hAsync("gov-icon", { key: '88509ad301ad83c61957b0d1dd6e95586cf8d65a', slot: "right-icon", class: "icon-validation", name: "exclamation-lg" }), hAsync("select", { key: '382f9855fe424f6427d158568339c51fc7ea46a5', hidden: true, class: 'hidden-select-list', "aria-hidden": toBoolAttr(true), multiple: true, required: this.required, name: this.name, disabled: this.disabled, ref: el => (this.selectRef = el), "aria-disabled": toBoolAttrIfDefined(this.disabled), "aria-required": toBoolAttrIfDefined(this.required), "aria-invalid": toBoolAttrIfDefined(this.invalid), "aria-describedby": this.wcagDescribedBy, "aria-labelledby": this.wcagLabelledBy, "aria-owns": this.wcagOwns }, hAsync("slot", { key: '678201c2968bbb6d3e470ccc03d149b70fed50db' }))), this.h.hasSlot('sufix') && hAsync("slot", { key: '25a9c902b37c15988f4591a136006d9f3db0fa8d', name: "sufix" })), this.hideSelectedList === false ? (hAsync("ul", { role: "listbox", id: this.listId, class: FormMultiSelectClass.list }, Array.isArray(this.selectedOptionsState) && this.selectedOptionsState.map(selected => {
+        return (hAsync(Host, { key: 'd196b10aa1a15b405235bec76b0c9a50ce7b7a32', class: FormMultiSelectClass.root, size: this.size, variant: this.variant }, hAsync("div", { key: '18b3d6b6b568d4c2e6185cc2b5397dc0d0b397e3', class: FormMultiSelectClass.wrap }, this.h.hasSlot('prefix') && hAsync("slot", { key: 'b7c67fef5eea42e0f948487082cb481fbd8f6264', name: "prefix" }), hAsync("div", { key: 'a9c6e91522fa96fa40ba75afee7150c2f0b9c07a', class: "element" }, hAsync("gov-form-autocomplete", { key: '2792873c33eee760c93bffbaba9268e4dff4acba', value: this.valueState, disabled: this.disabled, identifier: this.identifier || this.selectId, required: false, size: this.size, variant: this.variant, placeholder: this.placeholder, "message-empty": this.messageEmpty, "message-loading": this.messageLoading, ref: el => (this.autocompleteRef = el), minlength: 0, "name-key": 'label', wcagDescribedBy: this.wcagDescribedBy, wcagLabelledBy: this.wcagLabelledBy, wcagOwns: this.listId }), hAsync("gov-icon", { key: 'd03af7b6c89e62d7f6054d8b5be3bc73f8b1fe96', slot: "right-icon", class: "icon-arrow", name: "chevron-down" }), this.h.hasSlot('right-icon') && !(this.success || this.invalid) && hAsync("slot", { key: '34299ffce891c3f31947ef8f6ccd5d7144a5e485', name: "right-icon" }), this.success && hAsync("gov-icon", { key: '0343f86ccaf5a9fad2f6c2c0aa82cf508e19c1c1', slot: "right-icon", class: "icon-validation", name: "check-lg" }), this.invalid && hAsync("gov-icon", { key: '481ae336432840d2994455371f3407644fd1e1b1', slot: "right-icon", class: "icon-validation", name: "exclamation-lg" }), hAsync("select", { key: '0348cced9ebf67b2047586a024c6fd05ec71dff1', hidden: true, class: 'hidden-select-list', "aria-hidden": toBoolAttr(true), multiple: true, required: this.required, name: this.name, disabled: this.disabled, ref: el => (this.selectRef = el), "aria-disabled": toBoolAttrIfDefined(this.disabled), "aria-required": toBoolAttrIfDefined(this.required), "aria-invalid": toBoolAttrIfDefined(this.invalid), "aria-describedby": this.wcagDescribedBy, "aria-labelledby": this.wcagLabelledBy, "aria-owns": this.wcagOwns }, hAsync("slot", { key: 'cc4d489c662d6515c2c5d6398bb34cc43871b426' }))), this.h.hasSlot('sufix') && hAsync("slot", { key: 'adabdc557faf6eab58d48e6ad40f6d01fb610132', name: "sufix" })), this.hideSelectedList === false ? (hAsync("ul", { role: "listbox", id: this.listId, class: FormMultiSelectClass.list }, Array.isArray(this.selectedOptionsState) && this.selectedOptionsState.map(selected => {
             var _a, _b;
             const option = this.getOption(selected);
             if (!option)
@@ -5378,12 +5345,12 @@ class GovFormMultiSelect {
     get host() { return getElement(this); }
     static get watchers() { return {
         "variant": ["validateVariant"],
-        "size": ["validateSize", "watchDisabled"],
+        "size": ["validateSize", "watchControlAttrs"],
         "options": ["watchOptions"],
         "value": ["watchValue"],
-        "disabled": ["watchDisabled"],
-        "invalid": ["watchDisabled"],
-        "success": ["watchDisabled"]
+        "disabled": ["watchControlAttrs"],
+        "invalid": ["watchControlAttrs"],
+        "success": ["watchControlAttrs"]
     }; }
     static get style() { return GovFormMultiSelectStyle0; }
     static get cmpMeta() { return {
@@ -5480,12 +5447,13 @@ class GovFormRadio {
     validateSize(newValue) {
         validateProp(FormRadioSizes, newValue, FormRadioClass.root);
     }
-    watchDisabled() {
+    watchControlAttrs() {
         this.passControlAttrs();
     }
     passControlAttrs() {
         this.f.passAttrToControl("size", this.size);
         this.f.passAttrToControl("invalid", toBoolAttr(this.invalid));
+        this.f.passAttrToControl("disabled", toBoolAttr(this.disabled));
         this.f.passAttrToControl("type", "radio");
     }
     componentWillLoad() {
@@ -5558,9 +5526,9 @@ class GovFormRadio {
     }
     get host() { return getElement(this); }
     static get watchers() { return {
-        "size": ["validateSize", "watchDisabled"],
-        "disabled": ["watchDisabled"],
-        "invalid": ["watchDisabled"]
+        "size": ["validateSize", "watchControlAttrs"],
+        "disabled": ["watchControlAttrs"],
+        "invalid": ["watchControlAttrs"]
     }; }
     static get style() { return GovFormRadioStyle0; }
     static get cmpMeta() { return {
@@ -5727,7 +5695,7 @@ class GovFormSelect {
     watchOptions(newValue) {
         this.optionsState = propsValueToArray(newValue);
     }
-    watchDisabled() {
+    watchControlAttrs() {
         this.passControlAttrs();
     }
     watchValue() {
@@ -5736,7 +5704,8 @@ class GovFormSelect {
     passControlAttrs() {
         this.f.passAttrToControl('size', this.size);
         this.f.passAttrToControl('invalid', toBoolAttr(this.invalid));
-        this.f.passAttrToControl('type', 'select');
+        this.f.passAttrToControl('success', toBoolAttr(this.success));
+        this.f.passAttrToControl('disabled', toBoolAttr(this.disabled));
     }
     componentWillLoad() {
         this.validateVariant(this.variant);
@@ -5744,6 +5713,7 @@ class GovFormSelect {
         this.markSelectedValue();
         this.passControlAttrs();
         this.f.passAttrToLabel('required', String(this.required));
+        this.f.passAttrToControl('type', 'select');
         this.optionsState = propsValueToArray(this.options);
     }
     async componentDidRender() {
@@ -5764,10 +5734,10 @@ class GovFormSelect {
         });
     }
     render() {
-        return (hAsync(Host, { key: '5e9b2cdd4aae50ae5ee5ce8fe35db02888d682db', class: FormSelectClass.root, size: this.size, variant: this.variant }, this.h.hasSlot('prefix') && hAsync("slot", { key: '1eb66206a8dd47a44496c1566cd386b5183766ee', name: "prefix" }), hAsync("span", { key: 'df3d012666a80ca6e2ad96981f04f2adda0d8654', class: "element" }, hAsync("gov-icon", { key: 'e8ad512230dec7eb045e4dc91169b16709674f0b', slot: "right-icon", name: "chevron-down", class: "icon-arrow" }), this.h.hasSlot('right-icon') && !(this.success || this.invalid) && hAsync("slot", { key: 'f05864931816635b3dc3c4613680ba5c1dac0283', name: "right-icon" }), this.success && hAsync("gov-icon", { key: 'e5d8ad5dc8a6c5c14a1db233426ab2f56e4da6d3', slot: "right-icon", class: "icon-validation", name: "check-lg" }), this.invalid && hAsync("gov-icon", { key: 'c63c87a6cfc3eafdb979ebd40e019e3f65ecd35f', slot: "right-icon", class: "icon-validation", name: "exclamation-lg" }), hAsync("select", { key: 'b0d5876fb44872b8189870d7cf8ac374612153c7', 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 }, hAsync("slot", { key: '5edd39b36e1dc407a26c28e41eda625e9a780f3f' }), Array.isArray(this.optionsState) && this.optionsState.map((option) => {
+        return (hAsync(Host, { key: '0ef3419f4afce93b161ad8b71401a228ae8b9c4a', class: FormSelectClass.root, size: this.size, variant: this.variant }, this.h.hasSlot('prefix') && hAsync("slot", { key: '828f069b3672d5bb766a44ef37384b9117327eab', name: "prefix" }), hAsync("span", { key: '169ac6c9d58c88bbdcc96f36b8208ea05faa8e51', class: "element" }, hAsync("gov-icon", { key: 'a2501ad9ecc603d3e52fc0143fef2ee53ae63d4d', slot: "right-icon", name: "chevron-down", class: "icon-arrow" }), this.h.hasSlot('right-icon') && !(this.success || this.invalid) && hAsync("slot", { key: '97b2417a96a781620b67a557244c4c0cfa8b3669', name: "right-icon" }), this.success && hAsync("gov-icon", { key: 'cebe7eb826cb741bae4afdbd8d9b18948c410f8c', slot: "right-icon", class: "icon-validation", name: "check-lg" }), this.invalid && hAsync("gov-icon", { key: 'cef9b5715b1c134242f52439f65b88c7d228054f', slot: "right-icon", class: "icon-validation", name: "exclamation-lg" }), hAsync("select", { key: 'b8374d51d9a66f313db7f851446916e22debeee3', 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 }, hAsync("slot", { key: '5ad33b529b013a1e4846aaf3d6a778a0e7652f83' }), Array.isArray(this.optionsState) && this.optionsState.map((option) => {
             var _a;
             return (hAsync("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') && hAsync("slot", { key: '9d2e12ec4dda23883e70b65773a7936cc231d03c', name: "sufix" })));
+        }))), this.h.hasSlot('sufix') && hAsync("slot", { key: '257ebbc1fbe845806360efbf491640c2c364d540', name: "sufix" })));
     }
     onFocusHandler(e) {
         this.focused = true;
@@ -5819,10 +5789,11 @@ class GovFormSelect {
     get host() { return getElement(this); }
     static get watchers() { return {
         "variant": ["validateVariant"],
-        "size": ["validateSize", "watchDisabled"],
+        "size": ["validateSize", "watchControlAttrs"],
         "options": ["watchOptions"],
-        "disabled": ["watchDisabled"],
-        "invalid": ["watchDisabled"],
+        "disabled": ["watchControlAttrs"],
+        "invalid": ["watchControlAttrs"],
+        "success": ["watchControlAttrs"],
         "value": ["watchValue"]
     }; }
     static get style() { return GovFormSelectStyle0; }
@@ -5891,7 +5862,7 @@ class GovFormSwitch {
     passControlAttrs() {
         this.f.passAttrToControl("size", this.size);
         this.f.passAttrToControl("invalid", toBoolAttr(this.invalid));
-        this.f.passAttrToControl("type", "switch");
+        this.f.passAttrToControl("disabled", toBoolAttr(this.disabled));
     }
     componentWillLoad() {
         this.passControlAttrs();
@@ -5899,6 +5870,7 @@ class GovFormSwitch {
     async componentDidRender() {
         this.f.passAttrToLabel("identifier", this.identifier || this.checkboxId);
         this.f.passAttrToLabel("required", String(this.required));
+        this.f.passAttrToControl("type", "switch");
         if (canValidateWcagOnRender()) {
             await delay(500);
             await this.validateWcag();
@@ -7929,7 +7901,7 @@ class GovTile {
         this.h = govHost(this.host);
     }
     render() {
-        return (hAsync(Host, { key: '94c2322c722ff5c79358c01eb303d66a22027fbf', class: this.h.classes(TileClass.root) }, this.h.hasSlot("icon") && (hAsync("span", { key: '844a8fdd671adb4bf5bcc4b89dcfe40a7e2e2c4c', class: TileClass.icon }, hAsync("slot", { key: '0039f4b07b8f373feeeb9e597f36b17576920602', name: "icon" }))), this.href ? (hAsync("a", { href: this.href, target: this.target, class: TileClass.link, ref: el => (this.triggerRef = el) }, this.h.hasSlot("title") && (hAsync("span", { class: TileClass.title }, hAsync("slot", { name: "title" }))))) : (this.h.hasSlot("title") && (hAsync("span", { class: TileClass.title }, hAsync("slot", { name: "title" })))), hAsync("div", { key: '6a49825e9ff9cd160d7142d4537fed7b6e6f8b7d', class: TileClass.content }, hAsync("slot", { key: '0dcf8ab4dbdaafd68bc0af6b9cb6928fc9029a6c' }))));
+        return (hAsync(Host, { key: '94c2322c722ff5c79358c01eb303d66a22027fbf', class: this.h.classes(TileClass.root) }, this.h.hasSlot("icon") && (hAsync("span", { key: '844a8fdd671adb4bf5bcc4b89dcfe40a7e2e2c4c', class: TileClass.icon }, hAsync("slot", { key: '0039f4b07b8f373feeeb9e597f36b17576920602', name: "icon" }))), this.href ? (hAsync("a", { href: this.href, target: this.target, class: TileClass.link, ref: el => (this.triggerRef = el) }, this.h.hasSlot("title") && (hAsync("span", { class: TileClass.title }, hAsync("slot", { name: "title" }), hAsync("gov-icon", { class: TileClass.arrow, name: "chevron-right" }))))) : (this.h.hasSlot("title") && (hAsync("span", { class: TileClass.title }, hAsync("slot", { name: "title" })))), hAsync("div", { key: '48844f936d995bab93594f87cd01f2a1da2fd37c', class: TileClass.content }, hAsync("slot", { key: '860a227cd05409613037658777a8e3edbfcc22d0' }))));
     }
     /**
      * Returns a clickable element instance

package/dist/types/components/gov-form/checkbox/gov-form-checkbox.d.ts

@@ -68,7 +68,7 @@ export declare class GovFormCheckbox {
      */
     govChange: EventEmitter<FormCheckboxEvent>;
     validateSize(newValue: string): void;
-    watchDisabled(): void;
+    watchControlAttrs(): void;
     private passControlAttrs;
     componentWillLoad(): void;
     componentDidRender(): Promise<void>;

package/dist/types/components/gov-form/control/gov-form-control.d.ts

@@ -2,16 +2,11 @@ import { FormControlSizesType } from "./constants";
 export declare class GovFormControl {
     private readonly h;
     private f;
-    private readonly controlId;
     private observer;
     constructor();
     host: HTMLGovFormControlElement;
     /**
-     * Defines the space between nested components.
-     */
-    readonly gap?: FormControlSizesType;
-    /**
-     * Form element identifier
+     * Custom form element identifier
      */
     readonly identifier: string;
     /**
@@ -20,12 +15,12 @@ export declare class GovFormControl {
     readonly invalid: boolean;
     /**
     /**
-     * Indicates the form element is disabled
+    * Indicates the form control is disabled
      */
     readonly disabled: boolean;
     /**
     /**
-     * Indicates the entered value of child form element does conform to the format expected by the application.
+    * Indicates the entered value of child form element does conform to the format expected by the application.
      */
     readonly success: boolean;
     /**
@@ -39,8 +34,6 @@ export declare class GovFormControl {
     readonly size?: FormControlSizesType;
     componentDidRender(): void;
     disconnectedCallback(): void;
-    private passChildAttrs;
-    private invalidChildAttrs;
     private formElementDescriptionControl;
     private syncControlMessages;
     render(): any;

package/dist/types/components/gov-form/file/gov-form-file.d.ts

@@ -110,7 +110,7 @@ export declare class GovFormFile {
      */
     govRemoveFile: EventEmitter<GovFormFileEvent>;
     files: GovFormFileItem[];
-    watchDisabled(): void;
+    watchControlAttrs(): void;
     private passControlAttrs;
     private registerListeners;
     preventDefaults(e: any): void;

package/dist/types/components/gov-form/input/gov-form-input.d.ts

@@ -160,7 +160,7 @@ export declare class GovFormInput {
     focused: boolean;
     validateVariant(newValue: string): void;
     validateSize(newValue: string): void;
-    watchDisabled(): void;
+    watchControlAttrs(): void;
     private passControlAttrs;
     componentWillLoad(): void;
     componentDidRender(): Promise<void>;

package/dist/types/components/gov-form/multiselect/gov-form-multi-select.d.ts

@@ -108,7 +108,7 @@ export declare class GovFormMultiSelect {
     validateSize(newValue: string): void;
     watchOptions(newValue: string | GovFormMultiSelectItem[]): void;
     watchValue(newValue: string | GovFormMultiSelectItem[]): void;
-    watchDisabled(): void;
+    watchControlAttrs(): void;
     private passControlAttrs;
     componentWillLoad(): void;
     private getAvailableOptions;

package/dist/types/components/gov-form/radio/gov-form-radio.d.ts

@@ -68,7 +68,7 @@ export declare class GovFormRadio {
      */
     govChange: EventEmitter<FormRadioEvent>;
     validateSize(newValue: string): void;
-    watchDisabled(): void;
+    watchControlAttrs(): void;
     private passControlAttrs;
     componentWillLoad(): void;
     componentDidRender(): Promise<void>;

package/dist/types/components/gov-form/select/gov-form-select.d.ts

@@ -87,7 +87,7 @@ export declare class GovFormSelect {
     validateVariant(newValue: string): void;
     validateSize(newValue: string): void;
     watchOptions(newValue: string | FormSelectOption[]): void;
-    watchDisabled(): void;
+    watchControlAttrs(): void;
     watchValue(): void;
     private passControlAttrs;
     componentWillLoad(): void;

package/dist/types/components.d.ts

@@ -733,7 +733,7 @@ export namespace Components {
     }
     interface GovFormControl {
         /**
-          * /**   Indicates the form element is disabled
+          * /**  Indicates the form control is disabled
          */
         "disabled": boolean;
         /**
@@ -741,11 +741,7 @@ export namespace Components {
          */
         "fieldset": boolean;
         /**
-          * Defines the space between nested components.
-         */
-        "gap"?: FormControlSizesType;
-        /**
-          * Form element identifier
+          * Custom form element identifier
          */
         "identifier": string;
         /**
@@ -757,7 +753,7 @@ export namespace Components {
          */
         "size"?: FormControlSizesType;
         /**
-          * /**   Indicates the entered value of child form element does conform to the format expected by the application.
+          * /**  Indicates the entered value of child form element does conform to the format expected by the application.
          */
         "success": boolean;
     }
@@ -3625,7 +3621,7 @@ declare namespace LocalJSX {
     }
     interface GovFormControl {
         /**
-          * /**   Indicates the form element is disabled
+          * /**  Indicates the form control is disabled
          */
         "disabled"?: boolean;
         /**
@@ -3633,11 +3629,7 @@ declare namespace LocalJSX {
          */
         "fieldset"?: boolean;
         /**
-          * Defines the space between nested components.
-         */
-        "gap"?: FormControlSizesType;
-        /**
-          * Form element identifier
+          * Custom form element identifier
          */
         "identifier"?: string;
         /**
@@ -3649,7 +3641,7 @@ declare namespace LocalJSX {
          */
         "size"?: FormControlSizesType;
         /**
-          * /**   Indicates the entered value of child form element does conform to the format expected by the application.
+          * /**  Indicates the entered value of child form element does conform to the format expected by the application.
          */
         "success"?: boolean;
     }

package/package.json

@@ -2,7 +2,7 @@
 	"name": "@gov-design-system-ce/components",
 	"description": "This package includes Gov Design System Web Components and related utilities.",
 	"author": "Zdeněk Vítek",
-	"version": "4.0.8-rc17",
+	"version": "4.0.8-rc19",
 	"license": "EUPL v1.2 Licensed",
 	"main": "./dist/index.cjs.js",
 	"unpkg": "./dist/core/core.esm.js",

package/dist/components/p-3248435d.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["govFormSelectCss","GovFormSelectStyle0","GovFormSelect","proxyCustomElement","H","constructor","this","h","govHost","host","f","govForm","selectId","createID","validateVariant","newValue","validateProp","FormSelectVariants","FormSelectClass","root","validateSize","FormSelectSizes","watchOptions","optionsState","propsValueToArray","watchDisabled","passControlAttrs","watchValue","markSelectedValue","passAttrToControl","size","toBoolAttr","invalid","componentWillLoad","variant","passAttrToLabel","String","required","options","componentDidRender","canValidateWcagOnRender","delay","validateWcag","tick","querySelectorAll","forEach","option","value","setAttribute","removeAttribute","render","Host","key","class","hasSlot","name","slot","success","id","identifier","onFocus","onFocusHandler","bind","onChange","onChangeHandler","onBlur","onBlurHandler","disabled","ref","el","selectRef","toBoolAttrIfDefined","wcagActiveDescendant","wcagControls","wcagDescribedBy","wcagLabelledBy","wcagOwns","Array","isArray","map","selected","_a","label","e","focused","govFocus","emit","component","originalEvent","govBlur","target","stopPropagation","govChange","setFocus","focus","getRef","validateWcagRef","validateWcagLabelFor"],"sources":["../../../packages/core/src/components/gov-form/select/gov-form-select.scss?tag=gov-form-select","../../../packages/core/src/components/gov-form/select/gov-form-select.tsx"],"sourcesContent":["/*\n *   Select\n */\n\n@import \"../select/gov-form-select-core.scss\";\n\n$class: \".gov-form-select\";\n\n#{$class} {\n\t@extend %form-select-core;\n}\n","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('size')\n\twatchDisabled(): 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('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\t\tthis.passControlAttrs()\n\t\tthis.f.passAttrToLabel('required', String(this.required))\n\t\tthis.optionsState = propsValueToArray(this.options)\n\t}\n\n\tasync componentDidRender() {\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"],"mappings":"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","ignoreList":[]}