@gov-design-system-ce/components 4.0.8-rc10 → 4.0.8-rc12

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

@@ -10,804 +10,806 @@ import { FormMultiSelectClass, FormMultiselectSizes, FormMultiselectVariants } f
 import { propsValueToArray } from "../../../utils/array.utils";
 import { tick } from "../../../utils/stencil.utils";
 export class GovFormMultiSelect {
-  constructor() {
-    this.value = undefined;
-    this.options = undefined;
-    this.identifier = undefined;
-    this.placeholder = undefined;
-    this.variant = undefined;
-    this.size = 'm';
-    this.name = undefined;
-    this.hideSelectedList = false;
-    this.required = false;
-    this.disabled = false;
-    this.invalid = undefined;
-    this.success = undefined;
-    this.messageEmpty = 'Nebyly nalezeny žádné výsledky';
-    this.messageLoading = 'Načítám...';
-    this.wcagDescribedBy = undefined;
-    this.wcagLabelledBy = undefined;
-    this.wcagOwns = undefined;
-    this.focused = undefined;
-    this.valueState = undefined;
-    this.selectedOptionsState = [];
-    this.optionsState = [];
-    this.selectId = createID('GovSelect');
-    this.listId = createID('GovMultiList');
-    this.h = govHost(this.host);
-    this.f = govForm(this.h);
-  }
-  validateVariant(newValue) {
-    validateProp(FormMultiselectVariants, newValue, FormMultiSelectClass.root);
-  }
-  validateSize(newValue) {
-    validateProp(FormMultiselectSizes, newValue, FormMultiSelectClass.root);
-  }
-  watchOptions(newValue) {
-    this.optionsState = propsValueToArray(newValue);
-  }
-  watchValue(newValue) {
-    this.selectedOptionsState = propsValueToArray(newValue);
-  }
-  watchDisabled() {
-    this.passControlAttrs();
-  }
-  passControlAttrs() {
-    this.f.passAttrToControl('size', this.size);
-    this.f.passAttrToControl('invalid', toBoolAttr(this.invalid));
-    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);
-    this.selectedOptionsState = propsValueToArray(this.value);
-  }
-  getAvailableOptions(ignoreFilter = false) {
-    if (Array.isArray(this.optionsState) && this.optionsState.length) {
-      if (ignoreFilter) {
-        return this.optionsState;
-      }
-      return this.optionsState.filter((option) => {
-        const selectedIndex = this.selectedValueIndex(option.value);
-        return (selectedIndex !== -1 || (option === null || option === void 0 ? void 0 : option.disabled)) ? false : true;
-      }).map((option) => { var _a; return ({ label: (_a = option.label) !== null && _a !== void 0 ? _a : option.value, value: option.value }); });
-    }
-    return Array.from(this.selectRef.querySelectorAll('option'))
-      .filter((option) => {
-      if (ignoreFilter) {
-        return true;
-      }
-      const selectedIndex = this.selectedValueIndex(option.value);
-      return !(option.disabled || option.selected || selectedIndex > -1);
-    })
-      .map((option) => ({ label: option.textContent, value: option.value }));
-  }
-  initAutocomplete() {
-    var _a, _b, _c, _d, _e;
-    (_a = this.autocompleteRef) === null || _a === void 0 ? void 0 : _a.addEventListener('gov-select', this.onSelectHandler.bind(this));
-    (_b = this.autocompleteRef) === null || _b === void 0 ? void 0 : _b.addEventListener('gov-input', this.onInputHandler.bind(this));
-    (_c = this.autocompleteRef) === null || _c === void 0 ? void 0 : _c.addEventListener('gov-focus', this.onFocusHandler.bind(this));
-    (_d = this.autocompleteRef) === null || _d === void 0 ? void 0 : _d.addEventListener('gov-blur', this.onBlurHandler.bind(this));
-    (_e = this.autocompleteRef) === null || _e === void 0 ? void 0 : _e.setSearchCallback(searchString => {
-      return new Promise(resolve => {
-        const data = this.getAvailableOptions();
-        if (String(searchString).length === 0) {
-          return resolve(data);
-        }
-        resolve(data.filter(({ label, value }) => {
-          if (!label)
-            label = value;
-          return removeDiacritics(label).toLowerCase().indexOf(removeDiacritics(searchString).toLowerCase()) > -1;
-        }));
-      });
-    }).finally();
-  }
-  selectedValueIndex(value) {
-    return this.selectedOptionsState.findIndex((selected) => selected === value);
-  }
-  getOptionElement(value) {
-    return this.selectRef.querySelector('option[value="' + value + '"]');
-  }
-  getOption(value) {
-    var _a;
-    return (_a = this.getAvailableOptions(true).find((option) => option.value === value)) !== null && _a !== void 0 ? _a : null;
-  }
-  selectOption(newOption, notify = true) {
-    const index = this.selectedValueIndex(newOption);
-    if (index === -1) {
-      this.selectedOptionsState = [...this.selectedOptionsState, newOption];
-      this.value = this.selectedOptionsState;
-      if (notify) {
-        this.govChange.emit({
-          component: FormMultiSelectClass.root,
-          value: this.selectedOptionsState,
-        });
-        this.govSelect.emit({
-          component: FormMultiSelectClass.root,
-          value: this.selectedOptionsState,
-        });
-      }
-      const option = this.getOptionElement(newOption);
-      if (option) {
-        option.selected = true;
-      }
-    }
-  }
-  removeOption(removeOption, notify = true) {
-    const index = this.selectedValueIndex(removeOption);
-    if (index !== -1) {
-      this.selectedOptionsState.splice(index, 1);
-      this.selectedOptionsState = [...this.selectedOptionsState];
-      this.value = this.selectedOptionsState;
-      if (notify) {
-        this.govChange.emit({
-          component: FormMultiSelectClass.root,
-          value: this.selectedOptionsState,
-        });
-        this.govRemove.emit({
-          component: FormMultiSelectClass.root,
-          value: this.selectedOptionsState,
-        });
-      }
-      const option = this.getOptionElement(removeOption);
-      if (option) {
-        option.selected = false;
-      }
-    }
-  }
-  async componentDidLoad() {
-    this.initAutocomplete();
-  }
-  async componentDidRender() {
-    tick(() => {
-      this.selectRef.querySelectorAll('option').forEach((option) => {
-        if (option.selected) {
-          this.selectOption(option.value, false);
-        }
-      });
-    });
-    if (canValidateWcagOnRender()) {
-      await delay(500);
-      await this.validateWcag();
-    }
-  }
-  render() {
-    return (h(Host, { class: FormMultiSelectClass.root, size: this.size, variant: this.variant }, h("div", { class: FormMultiSelectClass.wrap }, this.h.hasSlot('prefix') && h("slot", { name: "prefix" }), h("div", { class: "element" }, h("gov-form-autocomplete", { 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 }), h("gov-icon", { slot: "right-icon", class: "icon-arrow", name: "chevron-down" }), this.h.hasSlot('right-icon') && !(this.success || this.invalid) && h("slot", { name: "right-icon" }), this.success && h("gov-icon", { slot: "right-icon", class: "icon-validation", name: "check-lg" }), this.invalid && h("gov-icon", { slot: "right-icon", class: "icon-validation", name: "exclamation-lg" }), h("select", { 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 }, h("slot", null))), this.h.hasSlot('sufix') && h("slot", { name: "sufix" })), this.hideSelectedList === false ? (h("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)
-        return null;
-      return (h("li", { class: FormMultiSelectClass.item, role: "option" }, (_a = option.label) !== null && _a !== void 0 ? _a : option.value, h("gov-button", { wcagLabel: (_b = 'Odebrat vybranou položku ' + option.label) !== null && _b !== void 0 ? _b : option.value, variant: "primary", type: "base", size: "s", "on-gov-click": () => this.onTagRemove(selected) }, h("gov-icon", { name: "x-lg" }))));
-    }))) : null));
-  }
-  onFocusHandler(e) {
-    e.stopPropagation();
-    this.focused = true;
-    this.govFocus.emit({
-      component: FormMultiSelectClass.root,
-      originalEvent: e,
-      value: this.selectedOptionsState,
-    });
-  }
-  onBlurHandler(e) {
-    e.stopPropagation();
-    e.stopPropagation();
-    this.focused = false;
-    this.govBlur.emit({
-      component: FormMultiSelectClass.root,
-      originalEvent: e,
-      value: this.selectedOptionsState,
-    });
-  }
-  onInputHandler(e) {
-    this.valueState = e.detail.value;
-    e.stopPropagation();
-  }
-  onSelectHandler(e) {
-    e.stopPropagation();
-    const value = e.detail.selected;
-    this.selectOption(value.value);
-    this.valueState = '';
-    this.autocompleteRef.clearValue().finally();
-    this.autocompleteRef.focus();
-  }
-  onTagRemove(removeOption) {
-    this.removeOption(removeOption);
-  }
-  /**
-   * Returns the current state of the component
-   */
-  async setFocus(options) {
-    return this.selectRef.focus(options);
-  }
-  /**
-   * Sets the ordered value of the element
-   */
-  async setValue(value) {
-    this.valueState = value;
-  }
-  /**
-   * Returns an instance of the native html select element
-   */
-  async getRef() {
-    return this.selectRef;
-  }
-  /**
-   * Validate the WCAG attributes of the component
-   */
-  async validateWcag() {
-    validateWcagRef(this.wcagDescribedBy, 'wcag-described-by', FormMultiSelectClass.root);
-    validateWcagRef(this.wcagLabelledBy, 'wcag-labelled-by', FormMultiSelectClass.root);
-    validateWcagRef(this.wcagOwns, 'wcag-owns', FormMultiSelectClass.root);
-    validateWcagLabelFor(this.identifier || this.selectId, this.wcagLabelledBy, FormMultiSelectClass.root);
-  }
-  static get is() { return "gov-form-multi-select"; }
-  static get originalStyleUrls() {
-    return {
-      "$": ["gov-form-multi-select.scss"]
-    };
-  }
-  static get styleUrls() {
-    return {
-      "$": ["gov-form-multi-select.css"]
-    };
-  }
-  static get properties() {
-    return {
-      "value": {
-        "type": "string",
-        "mutable": true,
-        "complexType": {
-          "original": "string | GovFormMultiSelectSelectedItem[]",
-          "resolved": "GovFormMultiSelectSelectedItem[] | string",
-          "references": {
-            "GovFormMultiSelectSelectedItem": {
-              "location": "import",
-              "path": "./gov-form-multi-select.types",
-              "id": "../../../packages/core/src/components/gov-form/multiselect/gov-form-multi-select.types.ts::GovFormMultiSelectSelectedItem"
-            }
-          }
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "Value of multi-select"
-        },
-        "attribute": "value",
-        "reflect": true
-      },
-      "options": {
-        "type": "string",
-        "mutable": true,
-        "complexType": {
-          "original": "string | GovFormMultiSelectItem[]",
-          "resolved": "GovFormMultiSelectItem[] | string",
-          "references": {
-            "GovFormMultiSelectItem": {
-              "location": "import",
-              "path": "./gov-form-multi-select.types",
-              "id": "../../../packages/core/src/components/gov-form/multiselect/gov-form-multi-select.types.ts::GovFormMultiSelectItem"
-            }
-          }
-        },
-        "required": false,
-        "optional": true,
-        "docs": {
-          "tags": [],
-          "text": "Options of multi-select"
-        },
-        "attribute": "options",
-        "reflect": true
-      },
-      "identifier": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "string",
-          "resolved": "string",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "Custom select identifier."
-        },
-        "attribute": "identifier",
-        "reflect": false
-      },
-      "placeholder": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "string",
-          "resolved": "string",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "Custom select placeholder."
-        },
-        "attribute": "placeholder",
-        "reflect": false
-      },
-      "variant": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "FormMultiselectVariantType",
-          "resolved": "\"primary\" | \"secondary\"",
-          "references": {
-            "FormMultiselectVariantType": {
-              "location": "import",
-              "path": "./constants",
-              "id": "../../../packages/core/src/components/gov-form/multiselect/constants.ts::FormMultiselectVariantType"
-            }
-          }
-        },
-        "required": false,
-        "optional": true,
-        "docs": {
-          "tags": [],
-          "text": "Style variation of the form select."
-        },
-        "attribute": "variant",
-        "reflect": false
-      },
-      "size": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "FormMultiselectSizesType",
-          "resolved": "\"l\" | \"m\" | \"xl\"",
-          "references": {
-            "FormMultiselectSizesType": {
-              "location": "import",
-              "path": "./constants",
-              "id": "../../../packages/core/src/components/gov-form/multiselect/constants.ts::FormMultiselectSizesType"
-            }
-          }
-        },
-        "required": false,
-        "optional": true,
-        "docs": {
-          "tags": [],
-          "text": "Select\u2019s size."
-        },
-        "attribute": "size",
-        "reflect": false,
-        "defaultValue": "'m'"
-      },
-      "name": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "string",
-          "resolved": "string",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "Name of the select."
-        },
-        "attribute": "name",
-        "reflect": false
-      },
-      "hideSelectedList": {
-        "type": "boolean",
-        "mutable": false,
-        "complexType": {
-          "original": "boolean",
-          "resolved": "boolean",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "Option to hide the list of selected items"
-        },
-        "attribute": "hide-selected-list",
-        "reflect": false,
-        "defaultValue": "false"
-      },
-      "required": {
-        "type": "boolean",
-        "mutable": false,
-        "complexType": {
-          "original": "boolean",
-          "resolved": "boolean",
-          "references": {}
-        },
-        "required": false,
-        "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."
-        },
-        "attribute": "required",
-        "reflect": false,
-        "defaultValue": "false"
-      },
-      "disabled": {
-        "type": "boolean",
-        "mutable": false,
-        "complexType": {
-          "original": "boolean",
-          "resolved": "boolean",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "Makes the select component disabled.\nThis prevents users from being able to interact with the select, and conveys its inactive state to assistive technologies."
-        },
-        "attribute": "disabled",
-        "reflect": false,
-        "defaultValue": "false"
-      },
-      "invalid": {
-        "type": "boolean",
-        "mutable": false,
-        "complexType": {
-          "original": "boolean",
-          "resolved": "boolean",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "Indicates the entered value does not conform to the format expected by the application."
-        },
-        "attribute": "invalid",
-        "reflect": false
-      },
-      "success": {
-        "type": "boolean",
-        "mutable": false,
-        "complexType": {
-          "original": "boolean",
-          "resolved": "boolean",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "Indicates the entered value of child form element does conform to the format expected by the application."
-        },
-        "attribute": "success",
-        "reflect": false
-      },
-      "messageEmpty": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "string",
-          "resolved": "string",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "Custom message for when there is a blank sheet"
-        },
-        "attribute": "message-empty",
-        "reflect": false,
-        "defaultValue": "'Nebyly nalezeny \u017E\u00E1dn\u00E9 v\u00FDsledky'"
-      },
-      "messageLoading": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "string",
-          "resolved": "string",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "Custom message for when data is loaded"
-        },
-        "attribute": "message-loading",
-        "reflect": false,
-        "defaultValue": "'Na\u010D\u00EDt\u00E1m...'"
-      },
-      "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": {},
-      "valueState": {},
-      "selectedOptionsState": {},
-      "optionsState": {}
-    };
-  }
-  static get events() {
-    return [{
-        "method": "govFocus",
-        "name": "gov-focus",
-        "bubbles": true,
-        "cancelable": true,
-        "composed": true,
-        "docs": {
-          "tags": [],
-          "text": "Emitted when the select has focus."
-        },
-        "complexType": {
-          "original": "FormMultiselectEvent",
-          "resolved": "FormMultiselectEvent",
-          "references": {
-            "FormMultiselectEvent": {
-              "location": "import",
-              "path": "./gov-form-multi-select.types",
-              "id": "../../../packages/core/src/components/gov-form/multiselect/gov-form-multi-select.types.ts::FormMultiselectEvent"
+    constructor() {
+        this.value = undefined;
+        this.options = undefined;
+        this.identifier = undefined;
+        this.placeholder = undefined;
+        this.variant = undefined;
+        this.size = 'm';
+        this.name = undefined;
+        this.hideSelectedList = false;
+        this.required = false;
+        this.disabled = false;
+        this.invalid = undefined;
+        this.success = undefined;
+        this.messageEmpty = 'Nebyly nalezeny žádné výsledky';
+        this.messageLoading = 'Načítám...';
+        this.wcagDescribedBy = undefined;
+        this.wcagLabelledBy = undefined;
+        this.wcagOwns = undefined;
+        this.focused = undefined;
+        this.valueState = undefined;
+        this.selectedOptionsState = [];
+        this.optionsState = [];
+        this.selectId = createID('GovSelect');
+        this.listId = createID('GovMultiList');
+        this.h = govHost(this.host);
+        this.f = govForm(this.h);
+    }
+    validateVariant(newValue) {
+        validateProp(FormMultiselectVariants, newValue, FormMultiSelectClass.root);
+    }
+    validateSize(newValue) {
+        validateProp(FormMultiselectSizes, newValue, FormMultiSelectClass.root);
+    }
+    watchOptions(newValue) {
+        this.optionsState = propsValueToArray(newValue);
+    }
+    watchValue(newValue) {
+        this.selectedOptionsState = propsValueToArray(newValue);
+    }
+    watchDisabled() {
+        this.passControlAttrs();
+    }
+    passControlAttrs() {
+        this.f.passAttrToControl('size', this.size);
+        this.f.passAttrToControl('invalid', toBoolAttr(this.invalid));
+        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);
+        this.selectedOptionsState = propsValueToArray(this.value);
+    }
+    getAvailableOptions(ignoreFilter = false) {
+        if (Array.isArray(this.optionsState) && this.optionsState.length) {
+            if (ignoreFilter) {
+                return this.optionsState;
             }
-          }
+            return this.optionsState.filter((option) => {
+                const selectedIndex = this.selectedValueIndex(option.value);
+                return (selectedIndex !== -1 || (option === null || option === void 0 ? void 0 : option.disabled)) ? false : true;
+            }).map((option) => { var _a; return ({ label: (_a = option.label) !== null && _a !== void 0 ? _a : option.value, value: option.value }); });
         }
-      }, {
-        "method": "govBlur",
-        "name": "gov-blur",
-        "bubbles": true,
-        "cancelable": true,
-        "composed": true,
-        "docs": {
-          "tags": [],
-          "text": "Emitted when the select loses focus."
-        },
-        "complexType": {
-          "original": "FormMultiselectEvent",
-          "resolved": "FormMultiselectEvent",
-          "references": {
-            "FormMultiselectEvent": {
-              "location": "import",
-              "path": "./gov-form-multi-select.types",
-              "id": "../../../packages/core/src/components/gov-form/multiselect/gov-form-multi-select.types.ts::FormMultiselectEvent"
+        return Array.from(this.selectRef.querySelectorAll('option'))
+            .filter((option) => {
+            if (ignoreFilter) {
+                return true;
             }
-          }
-        }
-      }, {
-        "method": "govChange",
-        "name": "gov-change",
-        "bubbles": true,
-        "cancelable": true,
-        "composed": true,
-        "docs": {
-          "tags": [],
-          "text": "Emitted when the select change value."
-        },
-        "complexType": {
-          "original": "FormMultiselectEvent",
-          "resolved": "FormMultiselectEvent",
-          "references": {
-            "FormMultiselectEvent": {
-              "location": "import",
-              "path": "./gov-form-multi-select.types",
-              "id": "../../../packages/core/src/components/gov-form/multiselect/gov-form-multi-select.types.ts::FormMultiselectEvent"
+            const selectedIndex = this.selectedValueIndex(option.value);
+            return !(option.disabled || option.selected || selectedIndex > -1);
+        })
+            .map((option) => ({ label: option.textContent, value: option.value }));
+    }
+    initAutocomplete() {
+        var _a, _b, _c, _d, _e;
+        (_a = this.autocompleteRef) === null || _a === void 0 ? void 0 : _a.addEventListener('gov-select', this.onSelectHandler.bind(this));
+        (_b = this.autocompleteRef) === null || _b === void 0 ? void 0 : _b.addEventListener('gov-input', this.onInputHandler.bind(this));
+        (_c = this.autocompleteRef) === null || _c === void 0 ? void 0 : _c.addEventListener('gov-focus', this.onFocusHandler.bind(this));
+        (_d = this.autocompleteRef) === null || _d === void 0 ? void 0 : _d.addEventListener('gov-blur', this.onBlurHandler.bind(this));
+        (_e = this.autocompleteRef) === null || _e === void 0 ? void 0 : _e.setSearchCallback(searchString => {
+            return new Promise(resolve => {
+                const data = this.getAvailableOptions();
+                if (String(searchString).length === 0) {
+                    return resolve(data);
+                }
+                resolve(data.filter(({ label, value }) => {
+                    if (!label)
+                        label = value;
+                    return removeDiacritics(label).toLowerCase().indexOf(removeDiacritics(searchString).toLowerCase()) > -1;
+                }));
+            });
+        }).finally();
+    }
+    selectedValueIndex(value) {
+        return this.selectedOptionsState.findIndex((selected) => selected === value);
+    }
+    getOptionElement(value) {
+        return this.selectRef.querySelector('option[value="' + value + '"]');
+    }
+    getOption(value) {
+        var _a;
+        return (_a = this.getAvailableOptions(true).find((option) => option.value === value)) !== null && _a !== void 0 ? _a : null;
+    }
+    selectOption(newOption, notify = true) {
+        const index = this.selectedValueIndex(newOption);
+        if (index === -1) {
+            this.selectedOptionsState = [...this.selectedOptionsState, newOption];
+            this.value = this.selectedOptionsState;
+            if (notify) {
+                this.govChange.emit({
+                    component: FormMultiSelectClass.root,
+                    value: this.selectedOptionsState,
+                });
+                this.govSelect.emit({
+                    component: FormMultiSelectClass.root,
+                    value: this.selectedOptionsState,
+                });
             }
-          }
-        }
-      }, {
-        "method": "govSelect",
-        "name": "gov-select",
-        "bubbles": true,
-        "cancelable": true,
-        "composed": true,
-        "docs": {
-          "tags": [],
-          "text": "Emitted when an item is selected"
-        },
-        "complexType": {
-          "original": "FormMultiselectEvent",
-          "resolved": "FormMultiselectEvent",
-          "references": {
-            "FormMultiselectEvent": {
-              "location": "import",
-              "path": "./gov-form-multi-select.types",
-              "id": "../../../packages/core/src/components/gov-form/multiselect/gov-form-multi-select.types.ts::FormMultiselectEvent"
+            const option = this.getOptionElement(newOption);
+            if (option) {
+                option.selected = true;
             }
-          }
         }
-      }, {
-        "method": "govRemove",
-        "name": "gov-remove",
-        "bubbles": true,
-        "cancelable": true,
-        "composed": true,
-        "docs": {
-          "tags": [],
-          "text": "Emitted when an item is removed"
-        },
-        "complexType": {
-          "original": "FormMultiselectEvent",
-          "resolved": "FormMultiselectEvent",
-          "references": {
-            "FormMultiselectEvent": {
-              "location": "import",
-              "path": "./gov-form-multi-select.types",
-              "id": "../../../packages/core/src/components/gov-form/multiselect/gov-form-multi-select.types.ts::FormMultiselectEvent"
+    }
+    removeOption(removeOption, notify = true) {
+        const index = this.selectedValueIndex(removeOption);
+        if (index !== -1) {
+            this.selectedOptionsState.splice(index, 1);
+            this.selectedOptionsState = [...this.selectedOptionsState];
+            this.value = this.selectedOptionsState;
+            if (notify) {
+                this.govChange.emit({
+                    component: FormMultiSelectClass.root,
+                    value: this.selectedOptionsState,
+                });
+                this.govRemove.emit({
+                    component: FormMultiSelectClass.root,
+                    value: this.selectedOptionsState,
+                });
             }
-          }
-        }
-      }];
-  }
-  static get methods() {
-    return {
-      "setFocus": {
-        "complexType": {
-          "signature": "(options?: FocusOptions) => Promise<void>",
-          "parameters": [{
-              "tags": [],
-              "text": ""
-            }],
-          "references": {
-            "Promise": {
-              "location": "global",
-              "id": "global::Promise"
-            },
-            "FocusOptions": {
-              "location": "global",
-              "id": "global::FocusOptions"
+            const option = this.getOptionElement(removeOption);
+            if (option) {
+                option.selected = false;
             }
-          },
-          "return": "Promise<void>"
-        },
-        "docs": {
-          "text": "Returns the current state of the component",
-          "tags": []
         }
-      },
-      "setValue": {
-        "complexType": {
-          "signature": "(value: string) => Promise<void>",
-          "parameters": [{
-              "tags": [],
-              "text": ""
-            }],
-          "references": {
-            "Promise": {
-              "location": "global",
-              "id": "global::Promise"
-            }
-          },
-          "return": "Promise<void>"
-        },
-        "docs": {
-          "text": "Sets the ordered value of the element",
-          "tags": []
+    }
+    async componentDidLoad() {
+        this.initAutocomplete();
+    }
+    async componentDidRender() {
+        tick(() => {
+            this.selectRef.querySelectorAll('option').forEach((option) => {
+                if (option.selected) {
+                    this.selectOption(option.value, false);
+                }
+            });
+        });
+        if (canValidateWcagOnRender()) {
+            await delay(500);
+            await this.validateWcag();
         }
-      },
-      "getRef": {
-        "complexType": {
-          "signature": "() => Promise<HTMLSelectElement>",
-          "parameters": [],
-          "references": {
-            "Promise": {
-              "location": "global",
-              "id": "global::Promise"
+    }
+    render() {
+        return (h(Host, { key: 'bb5855ba2a4cd63ad2093ae2aebd67f3349cea28', class: FormMultiSelectClass.root, size: this.size, variant: this.variant }, h("div", { key: '3abae4b8ea9cc625a21dd45e1b9ee8befc49b8b6', class: FormMultiSelectClass.wrap }, this.h.hasSlot('prefix') && h("slot", { key: '86da9e574fe68a4883b3df4da602e05f627e4714', name: "prefix" }), h("div", { key: '87d30a0d40739f4a4dbeaa9b5cef946ed9873c00', class: "element" }, h("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 }), h("gov-icon", { key: '83bdc379de06eab7db28d17cd39cd34128e60090', slot: "right-icon", class: "icon-arrow", name: "chevron-down" }), this.h.hasSlot('right-icon') && !(this.success || this.invalid) && h("slot", { key: '809ab0378b25182006e15effcb29babacb93274a', name: "right-icon" }), this.success && h("gov-icon", { key: '85ef665e98040503ea14743e8497ceb7b48d3a9e', slot: "right-icon", class: "icon-validation", name: "check-lg" }), this.invalid && h("gov-icon", { key: '88509ad301ad83c61957b0d1dd6e95586cf8d65a', slot: "right-icon", class: "icon-validation", name: "exclamation-lg" }), h("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 }, h("slot", { key: '678201c2968bbb6d3e470ccc03d149b70fed50db' }))), this.h.hasSlot('sufix') && h("slot", { key: '25a9c902b37c15988f4591a136006d9f3db0fa8d', name: "sufix" })), this.hideSelectedList === false ? (h("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)
+                return null;
+            return (h("li", { class: FormMultiSelectClass.item, role: "option" }, (_a = option.label) !== null && _a !== void 0 ? _a : option.value, h("gov-button", { wcagLabel: (_b = 'Odebrat vybranou položku ' + option.label) !== null && _b !== void 0 ? _b : option.value, variant: "primary", type: "base", size: "s", "on-gov-click": () => this.onTagRemove(selected) }, h("gov-icon", { name: "x-lg" }))));
+        }))) : null));
+    }
+    onFocusHandler(e) {
+        e.stopPropagation();
+        this.focused = true;
+        this.govFocus.emit({
+            component: FormMultiSelectClass.root,
+            originalEvent: e,
+            value: this.selectedOptionsState,
+        });
+    }
+    onBlurHandler(e) {
+        e.stopPropagation();
+        e.stopPropagation();
+        this.focused = false;
+        this.govBlur.emit({
+            component: FormMultiSelectClass.root,
+            originalEvent: e,
+            value: this.selectedOptionsState,
+        });
+    }
+    onInputHandler(e) {
+        this.valueState = e.detail.value;
+        e.stopPropagation();
+    }
+    onSelectHandler(e) {
+        e.stopPropagation();
+        const value = e.detail.selected;
+        this.selectOption(value.value);
+        this.valueState = '';
+        this.autocompleteRef.clearValue().finally();
+        this.autocompleteRef.focus();
+    }
+    onTagRemove(removeOption) {
+        this.removeOption(removeOption);
+    }
+    /**
+     * Returns the current state of the component
+     */
+    async setFocus(options) {
+        return this.selectRef.focus(options);
+    }
+    /**
+     * Sets the ordered value of the element
+     */
+    async setValue(value) {
+        this.valueState = value;
+    }
+    /**
+     * Returns an instance of the native html select element
+     */
+    async getRef() {
+        return this.selectRef;
+    }
+    /**
+     * Validate the WCAG attributes of the component
+     */
+    async validateWcag() {
+        validateWcagRef(this.wcagDescribedBy, 'wcag-described-by', FormMultiSelectClass.root);
+        validateWcagRef(this.wcagLabelledBy, 'wcag-labelled-by', FormMultiSelectClass.root);
+        validateWcagRef(this.wcagOwns, 'wcag-owns', FormMultiSelectClass.root);
+        validateWcagLabelFor(this.identifier || this.selectId, this.wcagLabelledBy, FormMultiSelectClass.root);
+    }
+    static get is() { return "gov-form-multi-select"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["gov-form-multi-select.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["gov-form-multi-select.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "value": {
+                "type": "string",
+                "mutable": true,
+                "complexType": {
+                    "original": "string | GovFormMultiSelectSelectedItem[]",
+                    "resolved": "GovFormMultiSelectSelectedItem[] | string",
+                    "references": {
+                        "GovFormMultiSelectSelectedItem": {
+                            "location": "import",
+                            "path": "./gov-form-multi-select.types",
+                            "id": "../../../packages/core/src/components/gov-form/multiselect/gov-form-multi-select.types.ts::GovFormMultiSelectSelectedItem"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Value of multi-select"
+                },
+                "attribute": "value",
+                "reflect": true
+            },
+            "options": {
+                "type": "string",
+                "mutable": true,
+                "complexType": {
+                    "original": "string | GovFormMultiSelectItem[]",
+                    "resolved": "GovFormMultiSelectItem[] | string",
+                    "references": {
+                        "GovFormMultiSelectItem": {
+                            "location": "import",
+                            "path": "./gov-form-multi-select.types",
+                            "id": "../../../packages/core/src/components/gov-form/multiselect/gov-form-multi-select.types.ts::GovFormMultiSelectItem"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Options of multi-select"
+                },
+                "attribute": "options",
+                "reflect": true
+            },
+            "identifier": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Custom select identifier."
+                },
+                "attribute": "identifier",
+                "reflect": false
+            },
+            "placeholder": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Custom select placeholder."
+                },
+                "attribute": "placeholder",
+                "reflect": false
+            },
+            "variant": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "FormMultiselectVariantType",
+                    "resolved": "\"primary\" | \"secondary\"",
+                    "references": {
+                        "FormMultiselectVariantType": {
+                            "location": "import",
+                            "path": "./constants",
+                            "id": "../../../packages/core/src/components/gov-form/multiselect/constants.ts::FormMultiselectVariantType"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Style variation of the form select."
+                },
+                "attribute": "variant",
+                "reflect": false
+            },
+            "size": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "FormMultiselectSizesType",
+                    "resolved": "\"l\" | \"m\" | \"xl\"",
+                    "references": {
+                        "FormMultiselectSizesType": {
+                            "location": "import",
+                            "path": "./constants",
+                            "id": "../../../packages/core/src/components/gov-form/multiselect/constants.ts::FormMultiselectSizesType"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Select\u2019s size."
+                },
+                "attribute": "size",
+                "reflect": false,
+                "defaultValue": "'m'"
+            },
+            "name": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Name of the select."
+                },
+                "attribute": "name",
+                "reflect": false
+            },
+            "hideSelectedList": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Option to hide the list of selected items"
+                },
+                "attribute": "hide-selected-list",
+                "reflect": false,
+                "defaultValue": "false"
             },
-            "HTMLSelectElement": {
-              "location": "global",
-              "id": "global::HTMLSelectElement"
+            "required": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "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."
+                },
+                "attribute": "required",
+                "reflect": false,
+                "defaultValue": "false"
+            },
+            "disabled": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Makes the select component disabled.\nThis prevents users from being able to interact with the select, and conveys its inactive state to assistive technologies."
+                },
+                "attribute": "disabled",
+                "reflect": false,
+                "defaultValue": "false"
+            },
+            "invalid": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Indicates the entered value does not conform to the format expected by the application."
+                },
+                "attribute": "invalid",
+                "reflect": false
+            },
+            "success": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Indicates the entered value of child form element does conform to the format expected by the application."
+                },
+                "attribute": "success",
+                "reflect": false
+            },
+            "messageEmpty": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Custom message for when there is a blank sheet"
+                },
+                "attribute": "message-empty",
+                "reflect": false,
+                "defaultValue": "'Nebyly nalezeny \u017E\u00E1dn\u00E9 v\u00FDsledky'"
+            },
+            "messageLoading": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Custom message for when data is loaded"
+                },
+                "attribute": "message-loading",
+                "reflect": false,
+                "defaultValue": "'Na\u010D\u00EDt\u00E1m...'"
+            },
+            "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
             }
-          },
-          "return": "Promise<HTMLSelectElement>"
-        },
-        "docs": {
-          "text": "Returns an instance of the native html select element",
-          "tags": []
-        }
-      },
-      "validateWcag": {
-        "complexType": {
-          "signature": "() => Promise<void>",
-          "parameters": [],
-          "references": {
-            "Promise": {
-              "location": "global",
-              "id": "global::Promise"
+        };
+    }
+    static get states() {
+        return {
+            "focused": {},
+            "valueState": {},
+            "selectedOptionsState": {},
+            "optionsState": {}
+        };
+    }
+    static get events() {
+        return [{
+                "method": "govFocus",
+                "name": "gov-focus",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitted when the select has focus."
+                },
+                "complexType": {
+                    "original": "FormMultiselectEvent",
+                    "resolved": "FormMultiselectEvent",
+                    "references": {
+                        "FormMultiselectEvent": {
+                            "location": "import",
+                            "path": "./gov-form-multi-select.types",
+                            "id": "../../../packages/core/src/components/gov-form/multiselect/gov-form-multi-select.types.ts::FormMultiselectEvent"
+                        }
+                    }
+                }
+            }, {
+                "method": "govBlur",
+                "name": "gov-blur",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitted when the select loses focus."
+                },
+                "complexType": {
+                    "original": "FormMultiselectEvent",
+                    "resolved": "FormMultiselectEvent",
+                    "references": {
+                        "FormMultiselectEvent": {
+                            "location": "import",
+                            "path": "./gov-form-multi-select.types",
+                            "id": "../../../packages/core/src/components/gov-form/multiselect/gov-form-multi-select.types.ts::FormMultiselectEvent"
+                        }
+                    }
+                }
+            }, {
+                "method": "govChange",
+                "name": "gov-change",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitted when the select change value."
+                },
+                "complexType": {
+                    "original": "FormMultiselectEvent",
+                    "resolved": "FormMultiselectEvent",
+                    "references": {
+                        "FormMultiselectEvent": {
+                            "location": "import",
+                            "path": "./gov-form-multi-select.types",
+                            "id": "../../../packages/core/src/components/gov-form/multiselect/gov-form-multi-select.types.ts::FormMultiselectEvent"
+                        }
+                    }
+                }
+            }, {
+                "method": "govSelect",
+                "name": "gov-select",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitted when an item is selected"
+                },
+                "complexType": {
+                    "original": "FormMultiselectEvent",
+                    "resolved": "FormMultiselectEvent",
+                    "references": {
+                        "FormMultiselectEvent": {
+                            "location": "import",
+                            "path": "./gov-form-multi-select.types",
+                            "id": "../../../packages/core/src/components/gov-form/multiselect/gov-form-multi-select.types.ts::FormMultiselectEvent"
+                        }
+                    }
+                }
+            }, {
+                "method": "govRemove",
+                "name": "gov-remove",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitted when an item is removed"
+                },
+                "complexType": {
+                    "original": "FormMultiselectEvent",
+                    "resolved": "FormMultiselectEvent",
+                    "references": {
+                        "FormMultiselectEvent": {
+                            "location": "import",
+                            "path": "./gov-form-multi-select.types",
+                            "id": "../../../packages/core/src/components/gov-form/multiselect/gov-form-multi-select.types.ts::FormMultiselectEvent"
+                        }
+                    }
+                }
+            }];
+    }
+    static get methods() {
+        return {
+            "setFocus": {
+                "complexType": {
+                    "signature": "(options?: FocusOptions) => Promise<void>",
+                    "parameters": [{
+                            "name": "options",
+                            "type": "FocusOptions",
+                            "docs": ""
+                        }],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        },
+                        "FocusOptions": {
+                            "location": "global",
+                            "id": "global::FocusOptions"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "Returns the current state of the component",
+                    "tags": []
+                }
+            },
+            "setValue": {
+                "complexType": {
+                    "signature": "(value: string) => Promise<void>",
+                    "parameters": [{
+                            "name": "value",
+                            "type": "string",
+                            "docs": ""
+                        }],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "Sets the ordered value of the element",
+                    "tags": []
+                }
+            },
+            "getRef": {
+                "complexType": {
+                    "signature": "() => Promise<HTMLSelectElement>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        },
+                        "HTMLSelectElement": {
+                            "location": "global",
+                            "id": "global::HTMLSelectElement"
+                        }
+                    },
+                    "return": "Promise<HTMLSelectElement>"
+                },
+                "docs": {
+                    "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": []
+                }
             }
-          },
-          "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"
-      }, {
-        "propName": "options",
-        "methodName": "watchOptions"
-      }, {
-        "propName": "value",
-        "methodName": "watchValue"
-      }, {
-        "propName": "disabled",
-        "methodName": "watchDisabled"
-      }, {
-        "propName": "invalid",
-        "methodName": "watchDisabled"
-      }, {
-        "propName": "success",
-        "methodName": "watchDisabled"
-      }, {
-        "propName": "size",
-        "methodName": "watchDisabled"
-      }];
-  }
+        };
+    }
+    static get elementRef() { return "host"; }
+    static get watchers() {
+        return [{
+                "propName": "variant",
+                "methodName": "validateVariant"
+            }, {
+                "propName": "size",
+                "methodName": "validateSize"
+            }, {
+                "propName": "options",
+                "methodName": "watchOptions"
+            }, {
+                "propName": "value",
+                "methodName": "watchValue"
+            }, {
+                "propName": "disabled",
+                "methodName": "watchDisabled"
+            }, {
+                "propName": "invalid",
+                "methodName": "watchDisabled"
+            }, {
+                "propName": "success",
+                "methodName": "watchDisabled"
+            }, {
+                "propName": "size",
+                "methodName": "watchDisabled"
+            }];
+    }
 }
 //# sourceMappingURL=gov-form-multi-select.js.map