@siemens/ix 0.0.0-pr-1318-20240627080522 → 0.0.0-pr-1522-20241021144048

package/components/select.js

@@ -1,21 +1,15 @@
 import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
-import { A as ArrowFocusController, d as defineCustomElement$a } from './dropdown.js';
+import { A as ArrowFocusController, d as defineCustomElement$6 } from './dropdown.js';
 import { O as OnListener } from './listener.js';
 import { c as createMutationObserver } from './mutation-observer.js';
-import { H as HookValidationLifecycle } from './validation.js';
 import { m as makeRef } from './make-ref.js';
-import { a as a11yBoolean } from './a11y.js';
-import { d as defineCustomElement$9 } from './dropdown-item.js';
-import { d as defineCustomElement$8 } from './field-label.js';
-import { d as defineCustomElement$7 } from './field-wrapper.js';
-import { d as defineCustomElement$6 } from './filter-chip.js';
-import { d as defineCustomElement$5 } from './icon-button.js';
-import { d as defineCustomElement$4 } from './select-item.js';
-import { d as defineCustomElement$3 } from './spinner.js';
-import { d as defineCustomElement$2 } from './tooltip.js';
-import { d as defineCustomElement$1 } from './typography.js';
+import { d as defineCustomElement$5 } from './dropdown-item.js';
+import { d as defineCustomElement$4 } from './filter-chip.js';
+import { d as defineCustomElement$3 } from './icon-button.js';
+import { d as defineCustomElement$2 } from './select-item.js';
+import { d as defineCustomElement$1 } from './spinner.js';
 
-const selectCss = ":host{display:inline-block;position:relative;min-height:2rem;height:auto;border-radius:var(--theme-input--border-radius)}:host *,:host *::after,:host *::before{box-sizing:border-box}:host ::-webkit-scrollbar-button{display:none}@-moz-document url-prefix(){:host *{scrollbar-color:var(--theme-scrollbar-thumb--background) var(--theme-scrollbar-track--background);scrollbar-width:thin}}:host ::-webkit-scrollbar{width:0.5rem;height:0.5rem}:host ::-webkit-scrollbar-track{border-radius:5px;background:var(--theme-scrollbar-track--background)}:host ::-webkit-scrollbar-track:hover{background:var(--theme-scrollbar-track--background--hover)}:host ::-webkit-scrollbar-thumb{border-radius:5px;background:var(--theme-scrollbar-thumb--background)}:host ::-webkit-scrollbar-thumb:hover{background:var(--theme-scrollbar-thumb--background--hover)}:host ::-webkit-scrollbar-corner{display:none}:host .d-none{display:none}:host .select{position:relative;display:flex;align-items:center;width:100%;background-color:var(--theme-input--background);border:var(--theme-input--border-thickness) solid var(--theme-input--border-color);border-radius:var(--theme-input--border-radius);padding:0 0 0 0.5rem;box-shadow:var(--theme-inset-shadow-1) !important}:host .select:not(.disabled):not(:disabled){cursor:pointer}:host .select:not(.disabled):not(:disabled):hover{background-color:var(--theme-input--background--hover);border-color:var(--theme-input--border-color--hover)}:host .select:focus-within{background-color:var(--theme-input--background--focus);border-color:var(--theme-input--border-color--focus);outline:1px solid #119fff;outline-offset:var(--theme-input--focus--outline-offset)}:host .select.readonly,:host .select.disabled{box-shadow:none !important;border:none;border-radius:0;cursor:pointer}:host .select.readonly,:host .select.readonly:hover,:host .select.readonly:active,:host .select.disabled,:host .select.disabled:hover,:host .select.disabled:active{background-color:transparent !important}:host .select.readonly:focus,:host .select.readonly:focus-within,:host .select.readonly:focus-visible,:host .select.disabled:focus,:host .select.disabled:focus-within,:host .select.disabled:focus-visible{outline:none}:host .select.readonly input:focus,:host .select.readonly input:focus-visible,:host .select.disabled input:focus,:host .select.disabled input:focus-visible{outline:none}:host .select.disabled{border-bottom:var(--theme-input--border-thickness) solid var(--theme-color-weak-bdr)}:host .select.disabled input{color:var(--theme-color-weak-text)}:host .select.readonly{border-bottom:var(--theme-input--border-thickness) solid var(--theme-color-soft-bdr)}:host .select.readonly input{color:var(--theme-color-std-text)}:host .hidden{display:none !important}:host .trigger{display:flex;align-items:center;flex-grow:1;height:100%}:host .input-container{display:flex;position:relative;align-items:flex-start;width:100%;height:100%}:host .input-container .chips{position:relative;display:flex;align-items:center;flex-wrap:wrap;height:100%;max-height:3.5rem;flex-grow:1;overflow-y:auto}:host .input-container .chips>ix-filter-chip{margin:0.1rem}:host .input-container input{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;-webkit-font-smoothing:antialiased;-moz-osx-font-smooting:grayscale;font-family:Siemens Sans, sans-serif;font-size:0.875rem;font-weight:400;line-height:1.429em;color:var(--theme-color-std-text);background:transparent;height:1.75rem;width:100%}:host .input-container input,:host .input-container input:hover,:host .input-container input:focus-visible{border:none;outline:none}:host .input-container input::-moz-placeholder{color:var(--theme-input-select-icon--color)}:host .input-container input::placeholder{color:var(--theme-input-select-icon--color)}:host .input-container input.hide-placeholder::-moz-placeholder{opacity:0}:host .input-container input.hide-placeholder::placeholder{opacity:0}:host .dropdown-visible{--ix-icon-button-color:var(--theme-color-dynamic--hover)}:host .add-item{display:flex;justify-content:flex-start;align-items:center;position:relative;width:100%}:host .select-list-header{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;display:flex;align-items:center;height:2rem;color:var(--theme-select-list-item-hint--color);margin:0 0.5rem 0 1rem}:host(.ix-info:not(.disabled):not(:disabled):not([disabled])) .select{border-color:var(--theme-input--border-color--info)}:host(.ix-info:not(.disabled):not(:disabled):not([disabled])) .select:hover{border-color:var(--theme-input--border-color--info--hover) !important}:host(.ix-info:not(.disabled):not(:disabled):not([disabled])) .select:active{border-color:var(--theme-input--border-color--info--active) !important}:host(.ix-warning:not(.disabled):not(:disabled):not([disabled])) .select{border-color:var(--theme-input--border-color--warning)}:host(.ix-warning:not(.disabled):not(:disabled):not([disabled])) .select:hover{border-color:var(--theme-input--border-color--warning--hover) !important}:host(.ix-warning:not(.disabled):not(:disabled):not([disabled])) .select:active{border-color:var(--theme-input--border-color--warning--active) !important}:host([class*=ix-invalid]:not(.disabled):not(:disabled):not([disabled])) .select,:host(.ix-invalid--required:not(.disabled):not(:disabled):not([disabled])) .select{border-color:var(--theme-input--border-color--invalid);background-color:var(--theme-input--background--invalid);box-shadow:none}:host([class*=ix-invalid]:not(.disabled):not(:disabled):not([disabled])) .select:hover,:host(.ix-invalid--required:not(.disabled):not(:disabled):not([disabled])) .select:hover{border-color:var(--theme-input--border-color--invalid--hover) !important}:host([class*=ix-invalid]:not(.disabled):not(:disabled):not([disabled])) .select:active,:host(.ix-invalid--required:not(.disabled):not(:disabled):not([disabled])) .select:active{border-color:var(--theme-input--border-color--invalid--active) !important}";
+const selectCss = ":host{display:inline-block;position:relative;min-height:2rem;height:auto;border-radius:var(--theme-input--border-radius)}:host *,:host *::after,:host *::before{box-sizing:border-box}:host ::-webkit-scrollbar-button{display:none}@-moz-document url-prefix(){:host *{scrollbar-color:var(--theme-scrollbar-thumb--background) var(--theme-scrollbar-track--background);scrollbar-width:thin}}:host ::-webkit-scrollbar{width:0.5rem;height:0.5rem}:host ::-webkit-scrollbar-track{border-radius:5px;background:var(--theme-scrollbar-track--background)}:host ::-webkit-scrollbar-track:hover{background:var(--theme-scrollbar-track--background--hover)}:host ::-webkit-scrollbar-thumb{border-radius:5px;background:var(--theme-scrollbar-thumb--background)}:host ::-webkit-scrollbar-thumb:hover{background:var(--theme-scrollbar-thumb--background--hover)}:host ::-webkit-scrollbar-corner{display:none}:host .d-none{display:none}:host .select{position:relative;display:flex;align-items:center;background-color:var(--theme-input--background);border:var(--theme-input--border-thickness) solid var(--theme-input--border-color);border-radius:var(--theme-input--border-radius);padding:0 0 0 0.5rem;box-shadow:var(--theme-inset-shadow-1) !important}:host .select:not(.disabled):not(:disabled){cursor:pointer}:host .select:not(.disabled):not(:disabled):hover{background-color:var(--theme-input--background--hover);border-color:var(--theme-input--border-color--hover)}:host .select:focus-within{background-color:var(--theme-input--background--focus);border-color:var(--theme-input--border-color--focus);outline:1px solid #119fff;outline-offset:var(--theme-input--focus--outline-offset)}:host .select.readonly,:host .select.disabled{box-shadow:none !important;border:none;border-radius:0;cursor:pointer}:host .select.readonly,:host .select.readonly:hover,:host .select.readonly:active,:host .select.disabled,:host .select.disabled:hover,:host .select.disabled:active{background-color:transparent !important}:host .select.readonly:focus,:host .select.readonly:focus-within,:host .select.readonly:focus-visible,:host .select.disabled:focus,:host .select.disabled:focus-within,:host .select.disabled:focus-visible{outline:none}:host .select.readonly input:focus,:host .select.readonly input:focus-visible,:host .select.disabled input:focus,:host .select.disabled input:focus-visible{outline:none}:host .select.disabled{border-bottom:var(--theme-input--border-thickness) solid var(--theme-color-weak-bdr)}:host .select.disabled input{color:var(--theme-color-weak-text)}:host .select.readonly{border-bottom:var(--theme-input--border-thickness) solid var(--theme-color-soft-bdr)}:host .select.readonly input{color:var(--theme-color-std-text)}:host .hidden{display:none !important}:host .trigger{display:flex;align-items:center;flex-grow:1;height:100%}:host .input-container{display:flex;position:relative;align-items:flex-start;width:100%;height:100%}:host .input-container .chips{position:relative;display:flex;align-items:center;flex-wrap:wrap;height:100%;max-height:3.5rem;flex-grow:1;overflow-y:auto}:host .input-container .chips>ix-filter-chip{margin:0.1rem}:host .input-container input{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;-webkit-font-smoothing:antialiased;-moz-osx-font-smooting:grayscale;font-family:Siemens Sans, sans-serif;font-size:0.875rem;font-weight:400;line-height:1.429em;color:var(--theme-color-std-text);background:transparent;height:1.75rem;width:100%}:host .input-container input,:host .input-container input:hover,:host .input-container input:focus-visible{border:none;outline:none}:host .input-container input::-moz-placeholder{color:var(--theme-input-select-icon--color)}:host .input-container input::placeholder{color:var(--theme-input-select-icon--color)}:host .input-container input.hide-placeholder::-moz-placeholder{opacity:0}:host .input-container input.hide-placeholder::placeholder{opacity:0}:host .dropdown-visible{--ix-icon-button-color:var(--theme-color-dynamic--hover)}:host .add-item{display:flex;justify-content:flex-start;align-items:center;position:relative;width:100%}:host .select-list-header{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;display:flex;align-items:center;height:2rem;color:var(--theme-select-list-item-hint--color);margin:0 0.5rem 0 1rem}";
 const IxSelectStyle0 = selectCss;
 
 /*
@@ -45,24 +39,16 @@ const Select = /*@__PURE__*/ proxyCustomElement(class Select extends HTMLElement
         this.itemSelectionChange = createEvent(this, "itemSelectionChange", 7);
         this.inputChange = createEvent(this, "inputChange", 7);
         this.addItem = createEvent(this, "addItem", 7);
-        this.ixBlur = createEvent(this, "ixBlur", 7);
-        this.formInternals = this.attachInternals();
-        this.inputRef = makeRef();
-        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.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 = [];
+        this.value = undefined;
         this.allowClear = false;
         this.mode = 'single';
         this.editable = false;
@@ -74,17 +60,11 @@ const Select = /*@__PURE__*/ proxyCustomElement(class Select extends HTMLElement
         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 = null;
-        this.inputFilterText = undefined;
-        this.inputValue = null;
-        this.isInvalid = false;
-        this.isValid = false;
-        this.isInfo = false;
-        this.isWarning = false;
+        this.navigationItem = undefined;
+        this.inputFilterText = '';
+        this.inputValue = '';
     }
     get nonShadowItems() {
         return Array.from(this.hostElement.querySelectorAll('ix-select-item'));
@@ -108,7 +88,8 @@ const Select = /*@__PURE__*/ proxyCustomElement(class Select extends HTMLElement
         return this.items.filter((item) => item.selected);
     }
     get addItemButton() {
-        return this.hostElement.shadowRoot.querySelector('.add-item');
+        var _a;
+        return (_a = this.hostElement.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('.add-item');
     }
     get isSingleMode() {
         return this.mode === 'single';
@@ -128,8 +109,8 @@ const Select = /*@__PURE__*/ proxyCustomElement(class Select extends HTMLElement
         this.updateSelection();
     }
     watchDropdownShow(show) {
-        if (show) {
-            this.arrowFocusController = new ArrowFocusController(this.visibleNonShadowItems, this.dropdownRef, this.focusControllerCallbackBind);
+        if (show && this.dropdownRef) {
+            this.arrowFocusController = new ArrowFocusController(this.visibleNonShadowItems, this.dropdownRef, (index) => this.focusDropdownItem(index));
             this.arrowFocusController.wrap = !this.editable;
             this.itemObserver.observe(this.dropdownRef, {
                 childList: true,
@@ -137,57 +118,57 @@ const Select = /*@__PURE__*/ proxyCustomElement(class Select extends HTMLElement
             });
         }
         else {
-            this.arrowFocusController.disconnect();
-            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, _b;
-        this.navigationItem = null;
+        this.navigationItem = undefined;
         if (index < this.visibleNonShadowItems.length) {
             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');
             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) {
-        this.value = this.toggleValue(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.updateSelection();
-        this.emitValueChange(this.value);
     }
     emitAddItem(value) {
+        var _a;
         if (value === undefined || value.trim() === '') {
-            return;
+            return false;
+        }
+        const { defaultPrevented } = this.addItem.emit(value);
+        if (defaultPrevented) {
+            return true;
         }
         const newItem = document.createElement('ix-select-item');
         newItem.value = value;
         newItem.label = value;
-        this.customItemsContainerRef.appendChild(newItem);
+        (_a = this.customItemsContainerRef) === null || _a === void 0 ? void 0 : _a.appendChild(newItem);
         this.clearInput();
         this.itemClick(value);
-        this.addItem.emit(value);
+        return false;
     }
     toggleValue(itemValue) {
         if (!this.isMultipleMode) {
@@ -224,27 +205,33 @@ const Select = /*@__PURE__*/ proxyCustomElement(class Select extends HTMLElement
             });
         });
         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.input && (this.input.value = this.inputValue);
-            return;
         }
-        this.inputValue = null;
+        else {
+            this.inputValue = '';
+        }
+        this.inputRef && (this.inputRef.value = this.inputValue);
     }
     emitValueChange(value) {
-        this.valueChange.emit(value);
+        const { defaultPrevented } = this.valueChange.emit(value);
+        if (defaultPrevented) {
+            return true;
+        }
         if (!value) {
-            this.itemSelectionChange.emit([]);
+            this.itemSelectionChange.emit(undefined);
         }
         else {
             this.itemSelectionChange.emit(Array.isArray(value) ? value : [value]);
         }
-        this.updateFormInternalValue(value);
+        return false;
     }
     componentDidLoad() {
-        this.input.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.input.value);
+            this.inputChange.emit((_a = this.inputRef) === null || _a === void 0 ? void 0 : _a.value);
         });
     }
     componentWillLoad() {
@@ -252,7 +239,6 @@ const Select = /*@__PURE__*/ proxyCustomElement(class Select extends HTMLElement
             this.value = this.selectedIndices;
         }
         this.updateSelection();
-        this.updateFormInternalValue(this.value);
     }
     onLabelChange(event) {
         event.preventDefault();
@@ -260,23 +246,22 @@ const Select = /*@__PURE__*/ proxyCustomElement(class Select extends HTMLElement
         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.input.focus();
-            this.input.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 = null;
+            this.navigationItem = undefined;
             this.updateSelection();
             this.inputFilterText = '';
         }
@@ -289,31 +274,30 @@ const Select = /*@__PURE__*/ proxyCustomElement(class Select extends HTMLElement
             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)) {
-            this.emitAddItem(this.inputFilterText);
-            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;
+        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;
+                }
+            }
         }
+        this.dropdownShow = false;
+        this.updateSelection();
     }
     async onArrowNavigation(event, key) {
+        var _a, _b;
         if (event.defaultPrevented) {
             return;
         }
@@ -330,9 +314,7 @@ const Select = /*@__PURE__*/ proxyCustomElement(class Select extends HTMLElement
             return;
         }
         const moveUp = key === 'ArrowUp';
-        const indexNonShadow = document.activeElement
-            ? this.visibleNonShadowItems.indexOf(document.activeElement)
-            : -1;
+        const indexNonShadow = this.visibleNonShadowItems.indexOf(document.activeElement);
         // Slotted select items
         if (indexNonShadow === 0) {
             if (!this.visibleShadowItems.length && this.isAddItemVisible()) {
@@ -353,11 +335,8 @@ const Select = /*@__PURE__*/ proxyCustomElement(class Select extends HTMLElement
             }
             return;
         }
-        if (!this.navigationItem) {
-            return;
-        }
         if (this.isAddItemVisible() &&
-            this.addItemRef.contains(await this.navigationItem.getDropdownItemElement())) {
+            ((_a = this.addItemRef) === null || _a === void 0 ? void 0 : _a.contains((await ((_b = this.navigationItem) === null || _b === void 0 ? void 0 : _b.getDropdownItemElement())) || null))) {
             if (moveUp) {
                 this.applyFocusTo(this.visibleItems.pop());
             }
@@ -403,10 +382,8 @@ const Select = /*@__PURE__*/ proxyCustomElement(class Select extends HTMLElement
         }
         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() {
@@ -417,7 +394,8 @@ const Select = /*@__PURE__*/ proxyCustomElement(class Select extends HTMLElement
         }
     }
     filterItemsWithTypeahead() {
-        this.inputFilterText = this.input.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;
         }
@@ -443,28 +421,29 @@ const Select = /*@__PURE__*/ proxyCustomElement(class Select extends HTMLElement
         });
     }
     clearInput() {
-        this.input.value = '';
+        if (this.inputRef) {
+            this.inputRef.value = '';
+        }
         this.inputFilterText = '';
     }
     clear() {
         this.clearInput();
         this.selectedLabels = [];
         this.value = [];
-        this.emitValueChange([]);
+        this.valueChange.emit(undefined);
         this.dropdownShow = false;
     }
-    onInputBlur(event) {
-        this.ixBlur.emit();
+    onInputBlur() {
         if (this.editable) {
             return;
         }
         if (this.isSingleMode) {
             return;
         }
-        const target = event.target;
-        if (!this.dropdownShow && this.mode !== 'multiple') {
-            target.value = this.selectedLabels.toString();
+        if (this.dropdownShow) {
+            return;
         }
+        this.value = this.selectedLabels;
     }
     placeholderValue() {
         if (this.disabled) {
@@ -483,67 +462,44 @@ const Select = /*@__PURE__*/ proxyCustomElement(class Select extends HTMLElement
             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.input);
-    }
     render() {
-        var _a, _b, _c, _d;
-        return (h(Host, { key: '21e0971bd52ae14711ef823e767112aa3ea8427e', "aria-disabled": a11yBoolean(this.disabled), class: {
-                disabled: this.disabled,
-            } }, h("ix-field-wrapper", { key: '709016dc62c4268b208f5469ac94274676fb3ada', 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("slot", { key: 'd6b6c90ec55424683d484520c6edd3aa2148d153', name: "label", slot: "label" }), h("div", { key: '50c23c58457980fb5d38d80f89f74a0b1d7c32a1', class: {
+        var _a, _b, _c;
+        return (h(Host, { key: '9d82f1db52dd35e9ad53770cb72d4af1cdcfcd45' }, h("div", { key: 'cd6821962939f072a5b5178694443bca4632d815', 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: '2c62a44a73929e8f337b1dbbacb4f4e90a972368', class: "input-container" }, h("div", { key: 'b48c59522094b785eaa673618c500ab957b84916', class: "chips" }, this.isMultipleMode
+                    this.dropdownWrapperRef(ref);
+            } }, h("div", { key: '813a9074998686a2fa58f49c4c7e57fd59c9db1b', class: "input-container" }, h("div", { key: 'af61142f7b3261743f19306fd5927caffa0cb55f', 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: '80412b3e3ff58078d9a15910c552a9fd16cc723d', class: "trigger" }, h("input", { key: '8c7c72a83997d0fe82acb4fa1afd2fb1d299d8a5', autocomplete: "off", "data-testid": "input", disabled: this.disabled, readOnly: this.readonly, type: "text", class: {
+            : '', h("div", { key: 'f9caaabe83123616e5dbd7c7421aae0a387090f4', class: "trigger" }, h("input", { key: '387891a2a3e92b3b11ac30b398733d3fde6e6760', autocomplete: "off", "data-testid": "input", disabled: this.disabled, readOnly: this.readonly, type: "text", class: {
                 'allow-clear': this.allowClear && !!((_b = this.selectedLabels) === null || _b === void 0 ? void 0 : _b.length),
-            }, placeholder: this.placeholderValue(), value: (_c = this.inputValue) !== null && _c !== void 0 ? _c : '', ref: (ref) => {
-                this.input = ref;
-                this.inputRef(ref);
-            }, onBlur: (e) => this.onInputBlur(e), onFocus: () => {
-                this.navigationItem = null;
+            }, placeholder: this.placeholderValue(), value: this.inputValue, ref: (ref) => (this.inputRef = ref), onBlur: () => this.onInputBlur(), onFocus: () => {
+                this.navigationItem = undefined;
             }, onInput: () => this.filterItemsWithTypeahead(), onKeyDown: (e) => this.onKeyDown(e) }), this.allowClear &&
-            (((_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) => {
+            (((_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) => {
                 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: 'eb80a8a205741cb2a095ee8b0bbfafec2558ccaa', ref: (ref) => (this.dropdownRef = ref), show: this.dropdownShow, closeBehavior: this.isMultipleMode ? 'outside' : 'both', class: {
+                    this.dropdownWrapperRef(ref);
+            } })))))), h("ix-dropdown", { key: 'e7f921957ee555565c0e9a5cf1638f6e7a7bfb0d', 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 () => {
-                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;
+            }, anchor: this.dropdownAnchor.waitForCurrent(), trigger: this.dropdownWrapperRef.waitForCurrent(), onShowChanged: (e) => this.dropdownVisibilityChanged(e), placement: "bottom-start", overwriteDropdownStyle: async () => {
                 return {
-                    minWidth: `${minWidth}px`,
+                    minWidth: `${this.hostElement.clientWidth}px`,
                 };
-            } }, h("div", { key: '9ac7e24e0add43e1f78217adf5afbf75687ac12b', class: {
+            } }, h("div", { key: 'c996819e19367421551249e2776e2537f2ce94cd', class: {
                 'select-list-header': true,
                 hidden: this.hideListHeader || this.isDropdownEmpty,
-            }, title: this.i18nSelectListHeader, onClick: (e) => e.preventDefault() }, this.i18nSelectListHeader), h("slot", { key: 'b4ce515c73fc2ffcbab4ce4c34b8eed01904b9e0' }), h("div", { key: '24961fabb03943f19c449f31dd1151e906923620', 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: 'b502b564668efc1a9907a75112341d59f5171720' }), h("div", { key: 'b4ff647412c888cd86094f25033c3dd6f5129a84', 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();
@@ -553,7 +509,6 @@ const Select = /*@__PURE__*/ proxyCustomElement(class Select extends HTMLElement
                 this.addItemRef = ref;
             } })) : null, this.isDropdownEmpty && !this.editable ? (h("div", { class: "select-list-header" }, this.i18nNoMatches)) : (''))));
     }
-    static get formAssociated() { return true; }
     get hostElement() { return this; }
     static get watchers() { return {
         "selectedIndices": ["watchSelectedIndices"],
@@ -561,16 +516,7 @@ const Select = /*@__PURE__*/ proxyCustomElement(class Select extends HTMLElement
         "dropdownShow": ["watchDropdownShow"]
     }; }
     static get style() { return IxSelectStyle0; }
-}, [65, "ix-select", {
-        "name": [513],
-        "required": [516],
-        "label": [1],
-        "warningText": [1, "warning-text"],
-        "infoText": [1, "info-text"],
-        "invalidText": [1, "invalid-text"],
-        "validText": [1, "valid-text"],
-        "helperText": [1, "helper-text"],
-        "showTextAsTooltip": [4, "show-text-as-tooltip"],
+}, [1, "ix-select", {
         "selectedIndices": [1025, "selected-indices"],
         "value": [1025],
         "allowClear": [4, "allow-clear"],
@@ -585,19 +531,10 @@ const Select = /*@__PURE__*/ proxyCustomElement(class Select extends HTMLElement
         "hideListHeader": [4, "hide-list-header"],
         "dropdownShow": [32],
         "selectedLabels": [32],
-        "dropdownWrapperRef": [32],
-        "dropdownAnchor": [32],
         "isDropdownEmpty": [32],
         "navigationItem": [32],
         "inputFilterText": [32],
-        "inputValue": [32],
-        "isInvalid": [32],
-        "isValid": [32],
-        "isInfo": [32],
-        "isWarning": [32],
-        "hasValidValue": [64],
-        "getAssociatedFormElement": [64],
-        "getNativeInputElement": [64]
+        "inputValue": [32]
     }, [[0, "itemClick", "onItemClicked"], [0, "ix-select-item:labelChange", "onLabelChange"]], {
         "selectedIndices": ["watchSelectedIndices"],
         "value": ["watchValue"],
@@ -606,14 +543,11 @@ const Select = /*@__PURE__*/ proxyCustomElement(class Select extends HTMLElement
 __decorate([
     OnListener('keydown', (self) => self.dropdownShow)
 ], Select.prototype, "onKeyDown", null);
-__decorate([
-    HookValidationLifecycle()
-], Select.prototype, "onValidationChange", null);
 function defineCustomElement() {
     if (typeof customElements === "undefined") {
         return;
     }
-    const components = ["ix-select", "ix-dropdown", "ix-dropdown-item", "ix-field-label", "ix-field-wrapper", "ix-filter-chip", "ix-icon-button", "ix-select-item", "ix-spinner", "ix-tooltip", "ix-typography"];
+    const components = ["ix-select", "ix-dropdown", "ix-dropdown-item", "ix-filter-chip", "ix-icon-button", "ix-select-item", "ix-spinner"];
     components.forEach(tagName => { switch (tagName) {
         case "ix-select":
             if (!customElements.get(tagName)) {
@@ -621,51 +555,31 @@ function defineCustomElement() {
             }
             break;
         case "ix-dropdown":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$a();
-            }
-            break;
-        case "ix-dropdown-item":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$9();
-            }
-            break;
-        case "ix-field-label":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$8();
-            }
-            break;
-        case "ix-field-wrapper":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$7();
-            }
-            break;
-        case "ix-filter-chip":
             if (!customElements.get(tagName)) {
                 defineCustomElement$6();
             }
             break;
-        case "ix-icon-button":
+        case "ix-dropdown-item":
             if (!customElements.get(tagName)) {
                 defineCustomElement$5();
             }
             break;
-        case "ix-select-item":
+        case "ix-filter-chip":
             if (!customElements.get(tagName)) {
                 defineCustomElement$4();
             }
             break;
-        case "ix-spinner":
+        case "ix-icon-button":
             if (!customElements.get(tagName)) {
                 defineCustomElement$3();
             }
             break;
-        case "ix-tooltip":
+        case "ix-select-item":
             if (!customElements.get(tagName)) {
                 defineCustomElement$2();
             }
             break;
-        case "ix-typography":
+        case "ix-spinner":
             if (!customElements.get(tagName)) {
                 defineCustomElement$1();
             }