@siemens/ix 2.4.1 → 2.6.0

package/dist/collection/components/select/select.js

@@ -20,14 +20,34 @@ import { h, Host, } from "@stencil/core";
 import { ArrowFocusController } from "../utils/focus";
 import { OnListener } from "../utils/listener";
 import { createMutationObserver } from "../utils/mutation-observer";
+import { HookValidationLifecycle, } from "../utils/input";
+import { makeRef } from "../utils/make-ref";
+import { a11yBoolean } from "../utils/a11y";
+/**
+ * @form-ready 2.6.0
+ */
 export class Select {
     constructor() {
-        this.focusControllerCallbackBind = this.focusDropdownItem.bind(this);
+        this.dropdownWrapperRef = makeRef();
+        this.dropdownAnchor = makeRef();
         this.itemObserver = createMutationObserver(() => {
+            if (!this.arrowFocusController) {
+                return;
+            }
             this.arrowFocusController.items = this.visibleNonShadowItems;
         });
+        this.focusControllerCallbackBind = this.focusDropdownItem.bind(this);
+        this.name = undefined;
+        this.required = false;
+        this.label = undefined;
+        this.warningText = undefined;
+        this.infoText = undefined;
+        this.invalidText = undefined;
+        this.validText = undefined;
+        this.helperText = undefined;
+        this.showTextAsTooltip = undefined;
         this.selectedIndices = undefined;
-        this.value = undefined;
+        this.value = [];
         this.allowClear = false;
         this.mode = 'single';
         this.editable = false;
@@ -35,17 +55,19 @@ export class Select {
         this.readonly = false;
         this.i18nPlaceholder = 'Select an option';
         this.i18nPlaceholderEditable = 'Type of select option';
-        this.i18nSelectListHeader = 'Please select an option';
+        this.i18nSelectListHeader = 'Select an option';
         this.i18nNoMatches = 'No matches';
         this.hideListHeader = false;
         this.dropdownShow = false;
-        this.selectedLabels = undefined;
-        this.dropdownWrapperRef = undefined;
-        this.dropdownAnchor = undefined;
+        this.selectedLabels = [];
         this.isDropdownEmpty = false;
         this.navigationItem = undefined;
-        this.inputFilterText = undefined;
-        this.inputValue = undefined;
+        this.inputFilterText = '';
+        this.inputValue = '';
+        this.isInvalid = false;
+        this.isValid = false;
+        this.isInfo = false;
+        this.isWarning = false;
     }
     get nonShadowItems() {
         return Array.from(this.hostElement.querySelectorAll('ix-select-item'));
@@ -98,32 +120,59 @@ export class Select {
             });
         }
         else {
-            this.arrowFocusController.disconnect();
-            this.arrowFocusController = undefined;
-            this.itemObserver.disconnect();
+            this.cleanupResources();
         }
     }
+    cleanupResources() {
+        var _a, _b;
+        (_a = this.arrowFocusController) === null || _a === void 0 ? void 0 : _a.disconnect();
+        this.arrowFocusController = undefined;
+        (_b = this.itemObserver) === null || _b === void 0 ? void 0 : _b.disconnect();
+    }
     onItemClicked(event) {
         const newId = event.detail;
         this.itemClick(newId);
     }
+    async updateFormInternalValue(value) {
+        if (Array.isArray(value)) {
+            this.formInternals.setFormValue(value.join(','));
+            return;
+        }
+        this.formInternals.setFormValue(value);
+    }
+    /** @internal */
+    async hasValidValue() {
+        return this.required && !!this.hasValue();
+    }
+    hasValue() {
+        if (Array.isArray(this.value)) {
+            return !!this.value.length;
+        }
+        return !!this.value;
+    }
     focusDropdownItem(index) {
-        var _a;
-        this.navigationItem = undefined;
+        var _a, _b;
+        this.navigationItem = null;
         if (index < this.visibleNonShadowItems.length) {
-            const nestedDropdownItem = (_a = this.visibleNonShadowItems[index]) === null || _a === void 0 ? void 0 : _a.shadowRoot.querySelector('ix-dropdown-item');
+            const nestedDropdownItem = (_b = (_a = this.visibleNonShadowItems[index]) === null || _a === void 0 ? void 0 : _a.shadowRoot) === null || _b === void 0 ? void 0 : _b.querySelector('ix-dropdown-item');
+            if (!nestedDropdownItem) {
+                return;
+            }
             requestAnimationFrame(() => {
-                nestedDropdownItem.shadowRoot.querySelector('button').focus();
+                var _a, _b;
+                (_b = (_a = nestedDropdownItem === null || nestedDropdownItem === void 0 ? void 0 : nestedDropdownItem.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('button')) === null || _b === void 0 ? void 0 : _b.focus();
             });
         }
     }
     itemClick(newId) {
+        const oldValue = this.value;
         const value = this.toggleValue(newId);
+        this.value = value;
         const defaultPrevented = this.emitValueChange(value);
         if (defaultPrevented) {
+            this.value = oldValue;
             return;
         }
-        this.value = value;
         this.updateSelection();
     }
     emitAddItem(value) {
@@ -177,12 +226,13 @@ export class Select {
             });
         });
         this.selectedLabels = this.selectedItems.map((item) => item.label);
-        if (this.isSingleMode && ((_a = this.selectedLabels) === null || _a === void 0 ? void 0 : _a.length)) {
+        if (((_a = this.selectedLabels) === null || _a === void 0 ? void 0 : _a.length) && this.isSingleMode) {
             this.inputValue = this.selectedLabels[0];
-            this.inputRef && (this.inputRef.value = this.inputValue);
-            return;
         }
-        this.inputValue = null;
+        else {
+            this.inputValue = '';
+        }
+        this.inputRef && (this.inputRef.value = this.inputValue);
     }
     emitValueChange(value) {
         const { defaultPrevented } = this.valueChange.emit(value);
@@ -195,12 +245,15 @@ export class Select {
         else {
             this.itemSelectionChange.emit(Array.isArray(value) ? value : [value]);
         }
+        this.updateFormInternalValue(value);
         return false;
     }
     componentDidLoad() {
-        this.inputRef.addEventListener('input', () => {
+        var _a;
+        (_a = this.inputRef) === null || _a === void 0 ? void 0 : _a.addEventListener('input', () => {
+            var _a;
             this.dropdownShow = true;
-            this.inputChange.emit(this.inputRef.value);
+            this.inputChange.emit((_a = this.inputRef) === null || _a === void 0 ? void 0 : _a.value);
         });
     }
     componentWillLoad() {
@@ -208,6 +261,7 @@ export class Select {
             this.value = this.selectedIndices;
         }
         this.updateSelection();
+        this.updateFormInternalValue(this.value);
     }
     onLabelChange(event) {
         event.preventDefault();
@@ -215,23 +269,22 @@ export class Select {
         this.updateSelection();
     }
     disconnectedCallback() {
-        if (this.itemMutationObserver) {
-            this.itemMutationObserver.disconnect();
-        }
+        this.cleanupResources();
     }
     itemExists(item) {
         return this.items.find((i) => i.label === item);
     }
     dropdownVisibilityChanged(event) {
+        var _a, _b;
         this.dropdownShow = event.detail;
         if (event.detail) {
-            this.inputRef.focus();
-            this.inputRef.select();
+            (_a = this.inputRef) === null || _a === void 0 ? void 0 : _a.focus();
+            (_b = this.inputRef) === null || _b === void 0 ? void 0 : _b.select();
             this.removeHiddenFromItems();
             this.isDropdownEmpty = this.isEveryDropdownItemHidden;
         }
         else {
-            this.navigationItem = undefined;
+            this.navigationItem = null;
             this.updateSelection();
             this.inputFilterText = '';
         }
@@ -244,32 +297,27 @@ export class Select {
             return;
         }
         if (event.code === 'Enter' || event.code === 'NumpadEnter') {
-            await this.onEnterNavigation();
+            await this.onEnterNavigation(event.target);
         }
         if (event.code === 'Escape') {
             this.dropdownShow = false;
         }
     }
-    async onEnterNavigation() {
-        var _a;
+    async onEnterNavigation(el) {
         if (this.isMultipleMode) {
             return;
         }
-        let item;
-        if (this.editable && !this.itemExists(this.inputFilterText)) {
-            const defaultPrevented = this.emitAddItem(this.inputFilterText);
-            if (defaultPrevented) {
-                return;
+        if (!this.itemExists(this.inputFilterText.trim()) &&
+            !this.itemExists(el === null || el === void 0 ? void 0 : el.label)) {
+            if (this.editable) {
+                const defaultPrevented = this.emitAddItem(this.inputFilterText.trim());
+                if (defaultPrevented) {
+                    return;
+                }
             }
-            item = this.items[this.items.length - 1];
-        }
-        if (item) {
-            item.onItemClick();
-        }
-        await ((_a = this.dropdownRef) === null || _a === void 0 ? void 0 : _a.updatePosition());
-        if (this.isSingleMode && !this.editable) {
-            this.dropdownShow = false;
         }
+        this.dropdownShow = false;
+        this.updateSelection();
     }
     async onArrowNavigation(event, key) {
         if (event.defaultPrevented) {
@@ -288,7 +336,9 @@ export class Select {
             return;
         }
         const moveUp = key === 'ArrowUp';
-        const indexNonShadow = this.visibleNonShadowItems.indexOf(document.activeElement);
+        const indexNonShadow = document.activeElement
+            ? this.visibleNonShadowItems.indexOf(document.activeElement)
+            : -1;
         // Slotted select items
         if (indexNonShadow === 0) {
             if (!this.visibleShadowItems.length && this.isAddItemVisible()) {
@@ -309,6 +359,9 @@ export class Select {
             }
             return;
         }
+        if (!this.navigationItem) {
+            return;
+        }
         if (this.isAddItemVisible() &&
             this.addItemRef.contains(await this.navigationItem.getDropdownItemElement())) {
             if (moveUp) {
@@ -356,20 +409,20 @@ export class Select {
         }
         this.navigationItem = element;
         setTimeout(() => {
-            element.shadowRoot
-                .querySelector('ix-dropdown-item')
-                .shadowRoot.querySelector('button')
-                .focus();
+            var _a, _b, _c, _d;
+            (_d = (_c = (_b = (_a = element.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('ix-dropdown-item')) === null || _b === void 0 ? void 0 : _b.shadowRoot) === null || _c === void 0 ? void 0 : _c.querySelector('button')) === null || _d === void 0 ? void 0 : _d.focus();
         });
     }
     focusAddItemButton() {
+        var _a, _b;
         if (this.addItemButton) {
-            this.addItemButton.shadowRoot.querySelector('button').focus();
+            (_b = (_a = this.addItemButton.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('button')) === null || _b === void 0 ? void 0 : _b.focus();
             this.navigationItem = this.addItemRef;
         }
     }
     filterItemsWithTypeahead() {
-        this.inputFilterText = this.inputRef.value;
+        var _a;
+        this.inputFilterText = ((_a = this.inputRef) === null || _a === void 0 ? void 0 : _a.value) || '';
         if (this.isSingleMode && this.inputFilterText === this.selectedLabels[0]) {
             return;
         }
@@ -395,25 +448,29 @@ export class Select {
         });
     }
     clearInput() {
-        this.inputRef.value = '';
+        if (this.inputRef) {
+            this.inputRef.value = '';
+        }
         this.inputFilterText = '';
     }
     clear() {
         this.clearInput();
         this.selectedLabels = [];
         this.value = [];
-        this.valueChange.emit(null);
+        this.emitValueChange([]);
         this.dropdownShow = false;
     }
-    onInputBlur(e) {
+    onInputBlur(event) {
+        this.ixBlur.emit();
         if (this.editable) {
             return;
         }
         if (this.isSingleMode) {
             return;
         }
+        const target = event.target;
         if (!this.dropdownShow && this.mode !== 'multiple') {
-            e.target['value'] = this.selectedLabels;
+            target.value = this.selectedLabels.toString();
         }
     }
     placeholderValue() {
@@ -433,56 +490,84 @@ export class Select {
             this.editable &&
             this.inputFilterText);
     }
+    onValidationChange({ isInvalid, isInvalidByRequired, isValid, isInfo, isWarning, }) {
+        this.isInvalid = isInvalid || isInvalidByRequired;
+        this.isValid = isValid;
+        this.isWarning = isWarning;
+        this.isInfo = isInfo;
+    }
+    /** @internal */
+    async getAssociatedFormElement() {
+        return this.formInternals.form;
+    }
+    /**
+     * Returns the native input element used in the component.
+     */
+    getNativeInputElement() {
+        return Promise.resolve(this.inputRef);
+    }
+    /**
+     * Focuses the input field
+     */
+    async focusInput() {
+        return (await this.getNativeInputElement()).focus();
+    }
     render() {
-        var _a, _b, _c;
-        return (h(Host, { key: 'ef836653267a38d82ead34cf82285997083f4086' }, h("div", { key: '23e903c9849f58f70d9c843a7258f913d6811cf2', class: {
+        var _a, _b, _c, _d;
+        return (h(Host, { key: '99abe58329d0fcd9911caacef49b66274489814f', "aria-disabled": a11yBoolean(this.disabled), class: {
+                disabled: this.disabled,
+            } }, h("ix-field-wrapper", { key: '89c8de8e9f35f0c5183be8dcd8e6b891016f6ef3', required: this.required, label: this.label, helperText: this.helperText, invalidText: this.invalidText, infoText: this.infoText, warningText: this.warningText, validText: this.validText, showTextAsTooltip: this.showTextAsTooltip, isInvalid: this.isInvalid, isValid: this.isValid, isInfo: this.isInfo, isWarning: this.isWarning, controlRef: this.inputRef }, h("div", { key: 'e103c45c3df1dbf9f4dd23e2d062a39b39d6b995', class: {
                 select: true,
                 disabled: this.disabled,
                 readonly: this.readonly,
             }, ref: (ref) => {
-                this.dropdownAnchor = ref;
+                this.dropdownAnchor(ref);
                 if (!this.editable)
-                    this.dropdownWrapperRef = ref;
-            } }, h("div", { key: '56b38a998a44ddc6b8f380cc049e813be30ad711', class: "input-container" }, h("div", { key: 'b3e152d2ab35f3e2bcf2ac8c8df4cb3bc97f6e3c', class: "chips" }, this.isMultipleMode
+                    this.dropdownWrapperRef(ref);
+            } }, h("div", { key: '2bafbbf9195ac7303c2e1fb2331481cf3af078ee', class: "input-container" }, h("div", { key: 'c69296e322974fd1659d9794bc4469c7faab6ba0', class: "chips" }, this.isMultipleMode
             ? (_a = this.selectedItems) === null || _a === void 0 ? void 0 : _a.map((item) => (h("ix-filter-chip", { disabled: this.disabled || this.readonly, key: item.value, onCloseClick: (e) => {
                     e.preventDefault();
                     e.stopPropagation();
                     this.itemClick(item.value);
                 } }, item.label)))
-            : '', h("div", { key: 'f411e24b3c4512731593a4afd5c51f0223254cc9', class: "trigger" }, h("input", { key: '3c16a408ed58a3d2430ed86df32b6d990acb2b49', autocomplete: "off", "data-testid": "input", disabled: this.disabled, readOnly: this.readonly, type: "text", class: {
+            : '', h("div", { key: '49b13da2a7e8230b41b8365394694d6f9991b367', class: "trigger" }, h("input", { key: 'fbafa635a105fec9f43756e0e767d4567355d224', autocomplete: "off", "data-testid": "input", disabled: this.disabled, readOnly: this.readonly, required: this.required, type: "text", class: {
                 'allow-clear': this.allowClear && !!((_b = this.selectedLabels) === null || _b === void 0 ? void 0 : _b.length),
-            }, placeholder: this.placeholderValue(), value: this.inputValue, ref: (ref) => (this.inputRef = ref), onBlur: (e) => this.onInputBlur(e), onFocus: () => {
-                this.navigationItem = undefined;
+            }, placeholder: this.placeholderValue(), value: (_c = this.inputValue) !== null && _c !== void 0 ? _c : '', ref: (ref) => (this.inputRef = ref), onBlur: (e) => this.onInputBlur(e), onFocus: () => {
+                this.navigationItem = null;
             }, onInput: () => this.filterItemsWithTypeahead(), onKeyDown: (e) => this.onKeyDown(e) }), this.allowClear &&
-            (((_c = this.selectedLabels) === null || _c === void 0 ? void 0 : _c.length) || this.inputFilterText) ? (h("ix-icon-button", { class: "clear", icon: 'clear', ghost: true, oval: true, size: "16", onClick: (e) => {
+            (((_d = this.selectedLabels) === null || _d === void 0 ? void 0 : _d.length) || this.inputFilterText) ? (h("ix-icon-button", { class: "clear", icon: 'clear', ghost: true, oval: true, size: "16", onClick: (e) => {
                 e.preventDefault();
                 e.stopPropagation();
                 this.clear();
             } })) : null, this.disabled || this.readonly ? null : (h("ix-icon-button", { "data-select-dropdown": true, class: { 'dropdown-visible': this.dropdownShow }, icon: "chevron-down-small", ghost: true, ref: (ref) => {
                 if (this.editable)
-                    this.dropdownWrapperRef = ref;
-            } })))))), h("ix-dropdown", { key: '6c838166f4366d760f30dc102d3dad4611b369b5', ref: (ref) => (this.dropdownRef = ref), show: this.dropdownShow, closeBehavior: this.isMultipleMode ? 'outside' : 'both', class: {
+                    this.dropdownWrapperRef(ref);
+            } }))))))), h("ix-dropdown", { key: '1ce2a1c9e706231b16729de9ab6860a3040cf6b8', ref: (ref) => (this.dropdownRef = ref), show: this.dropdownShow, closeBehavior: this.isMultipleMode ? 'outside' : 'both', class: {
                 'd-none': this.disabled || this.readonly,
-            }, anchor: this.dropdownAnchor, trigger: this.dropdownWrapperRef, onShowChanged: (e) => this.dropdownVisibilityChanged(e), placement: "bottom-start", overwriteDropdownStyle: async () => {
+            }, anchor: this.dropdownAnchor.waitForCurrent(), trigger: this.dropdownWrapperRef.waitForCurrent(), onShowChanged: (e) => this.dropdownVisibilityChanged(e), placement: "bottom-start", overwriteDropdownStyle: async () => {
+                var _a, _b;
+                const minWidth = (_b = (_a = this.hostElement.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('.select')) === null || _b === void 0 ? void 0 : _b.getBoundingClientRect().width;
                 return {
-                    minWidth: `${this.hostElement.clientWidth}px`,
+                    minWidth: `${minWidth}px`,
                 };
-            } }, h("div", { key: '8f7b41436b7f15311dd4d46cbacbb95879de501e', class: {
+            } }, h("div", { key: '9a60476d90a72bb423434438d947ed5acd237a0b', class: {
                 'select-list-header': true,
                 hidden: this.hideListHeader || this.isDropdownEmpty,
-            }, title: this.i18nSelectListHeader, onClick: (e) => e.preventDefault() }, this.i18nSelectListHeader), h("slot", { key: 'dc2913881d407f2cdaaa30efc15fa05193117b1c' }), h("div", { key: '706abca5e8fef621d36b560b6ca5629c235a6a32', ref: (ref) => (this.customItemsContainerRef = ref), class: "d-contents" }), this.isAddItemVisible() ? (h("ix-dropdown-item", { "data-testid": "add-item", icon: 'plus', class: {
+            }, title: this.i18nSelectListHeader, onClick: (e) => e.preventDefault() }, this.i18nSelectListHeader), h("slot", { key: '375d3631327065cfed363398941c79550a34e4bd', onSlotchange: () => {
+                this.updateSelection();
+            } }), h("div", { key: '86946fcba90f1d30760539b778449c53c99caa18', ref: (ref) => (this.customItemsContainerRef = ref), class: "d-contents" }), this.isAddItemVisible() ? (h("ix-dropdown-item", { "data-testid": "add-item", icon: 'plus', class: {
                 'add-item': true,
             }, label: this.inputFilterText, onItemClick: (e) => {
                 e.preventDefault();
-                if (this.emitAddItem(this.inputFilterText)) {
-                    e.stopPropagation();
-                }
+                e.stopPropagation();
+                this.emitAddItem(this.inputFilterText);
             }, onFocus: () => (this.navigationItem = this.addItemRef), ref: (ref) => {
                 this.addItemRef = ref;
             } })) : null, this.isDropdownEmpty && !this.editable ? (h("div", { class: "select-list-header" }, this.i18nNoMatches)) : (''))));
     }
     static get is() { return "ix-select"; }
     static get encapsulation() { return "shadow"; }
+    static get formAssociated() { return true; }
     static get originalStyleUrls() {
         return {
             "$": ["select.scss"]
@@ -495,6 +580,187 @@ export class Select {
     }
     static get properties() {
         return {
+            "name": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [{
+                            "name": "since",
+                            "text": "2.6.0"
+                        }],
+                    "text": "A string that represents the element's name attribute,\ncontaining a name that identifies the element when submitting the form."
+                },
+                "attribute": "name",
+                "reflect": true
+            },
+            "required": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "since",
+                            "text": "2.6.0"
+                        }],
+                    "text": "A Boolean attribute indicating that an option with a non-empty string value must be selected"
+                },
+                "attribute": "required",
+                "reflect": true,
+                "defaultValue": "false"
+            },
+            "label": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [{
+                            "name": "since",
+                            "text": "2.6.0"
+                        }],
+                    "text": "Label for the select component"
+                },
+                "attribute": "label",
+                "reflect": false
+            },
+            "warningText": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [{
+                            "name": "since",
+                            "text": "2.6.0"
+                        }],
+                    "text": "Warning text for the select component"
+                },
+                "attribute": "warning-text",
+                "reflect": false
+            },
+            "infoText": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [{
+                            "name": "since",
+                            "text": "2.6.0"
+                        }],
+                    "text": "Info text for the select component"
+                },
+                "attribute": "info-text",
+                "reflect": false
+            },
+            "invalidText": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [{
+                            "name": "since",
+                            "text": "2.6.0"
+                        }],
+                    "text": "Error text for the select component"
+                },
+                "attribute": "invalid-text",
+                "reflect": false
+            },
+            "validText": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [{
+                            "name": "since",
+                            "text": "2.6.0"
+                        }],
+                    "text": "Valid text for the select component"
+                },
+                "attribute": "valid-text",
+                "reflect": false
+            },
+            "helperText": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [{
+                            "name": "since",
+                            "text": "2.6.0"
+                        }],
+                    "text": "Helper text for the select component"
+                },
+                "attribute": "helper-text",
+                "reflect": false
+            },
+            "showTextAsTooltip": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [{
+                            "name": "since",
+                            "text": "2.6.0"
+                        }],
+                    "text": "Show helper, error, info, warning text as tooltip"
+                },
+                "attribute": "show-text-as-tooltip",
+                "reflect": false
+            },
             "selectedIndices": {
                 "type": "string",
                 "mutable": true,
@@ -524,7 +790,7 @@ export class Select {
                     "references": {}
                 },
                 "required": false,
-                "optional": true,
+                "optional": false,
                 "docs": {
                     "tags": [{
                             "name": "since",
@@ -533,7 +799,8 @@ export class Select {
                     "text": "Current selected value.\nThis corresponds to the value property of ix-select-items"
                 },
                 "attribute": "value",
-                "reflect": false
+                "reflect": false,
+                "defaultValue": "[]"
             },
             "allowClear": {
                 "type": "boolean",
@@ -677,7 +944,7 @@ export class Select {
                 },
                 "attribute": "i-1-8n-select-list-header",
                 "reflect": false,
-                "defaultValue": "'Please select an option'"
+                "defaultValue": "'Select an option'"
             },
             "i18nNoMatches": {
                 "type": "string",
@@ -694,7 +961,7 @@ export class Select {
                             "name": "since",
                             "text": "1.5.0"
                         }],
-                    "text": "Hint inside of dropdown if no items where found with current filter text"
+                    "text": "Information inside of dropdown if no items where found with current filter text"
                 },
                 "attribute": "i-1-8n-no-matches",
                 "reflect": false,
@@ -727,12 +994,14 @@ export class Select {
         return {
             "dropdownShow": {},
             "selectedLabels": {},
-            "dropdownWrapperRef": {},
-            "dropdownAnchor": {},
             "isDropdownEmpty": {},
             "navigationItem": {},
             "inputFilterText": {},
-            "inputValue": {}
+            "inputValue": {},
+            "isInvalid": {},
+            "isValid": {},
+            "isInfo": {},
+            "isWarning": {}
         };
     }
     static get events() {
@@ -805,8 +1074,109 @@ export class Select {
                     "resolved": "string",
                     "references": {}
                 }
+            }, {
+                "method": "ixBlur",
+                "name": "ixBlur",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Blur input"
+                },
+                "complexType": {
+                    "original": "void",
+                    "resolved": "void",
+                    "references": {}
+                }
             }];
     }
+    static get methods() {
+        return {
+            "hasValidValue": {
+                "complexType": {
+                    "signature": "() => Promise<boolean>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<boolean>"
+                },
+                "docs": {
+                    "text": "",
+                    "tags": [{
+                            "name": "internal",
+                            "text": undefined
+                        }]
+                }
+            },
+            "getAssociatedFormElement": {
+                "complexType": {
+                    "signature": "() => Promise<HTMLFormElement | null>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        },
+                        "HTMLFormElement": {
+                            "location": "global",
+                            "id": "global::HTMLFormElement"
+                        }
+                    },
+                    "return": "Promise<HTMLFormElement>"
+                },
+                "docs": {
+                    "text": "",
+                    "tags": [{
+                            "name": "internal",
+                            "text": undefined
+                        }]
+                }
+            },
+            "getNativeInputElement": {
+                "complexType": {
+                    "signature": "() => Promise<HTMLInputElement>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        },
+                        "HTMLInputElement": {
+                            "location": "global",
+                            "id": "global::HTMLInputElement"
+                        }
+                    },
+                    "return": "Promise<HTMLInputElement>"
+                },
+                "docs": {
+                    "text": "Returns the native input element used in the component.",
+                    "tags": []
+                }
+            },
+            "focusInput": {
+                "complexType": {
+                    "signature": "() => Promise<void>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "Focuses the input field",
+                    "tags": []
+                }
+            }
+        };
+    }
     static get elementRef() { return "hostElement"; }
     static get watchers() {
         return [{
@@ -827,6 +1197,12 @@ export class Select {
                 "target": undefined,
                 "capture": false,
                 "passive": false
+            }, {
+                "name": "ix-select-item:valueChange",
+                "method": "onLabelChange",
+                "target": undefined,
+                "capture": false,
+                "passive": false
             }, {
                 "name": "ix-select-item:labelChange",
                 "method": "onLabelChange",
@@ -835,8 +1211,12 @@ export class Select {
                 "passive": false
             }];
     }
+    static get attachInternalsMemberName() { return "formInternals"; }
 }
 __decorate([
     OnListener('keydown', (self) => self.dropdownShow)
 ], Select.prototype, "onKeyDown", null);
+__decorate([
+    HookValidationLifecycle()
+], Select.prototype, "onValidationChange", null);
 //# sourceMappingURL=select.js.map