@siemens/ix-docs 4.3.0 → 4.4.0

package/build/static/demo/v2/preview/html/assets/ix-select.entry-ClztaKAm.js

@@ -0,0 +1,610 @@
+import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from "./global-7ZbTfMw3.js";
+import { C as iconPlus, l as iconClear, r as iconChevronUpSmall, h as iconChevronDownSmall } from "./index-BBzEV-f4-ChQfUIyc.js";
+import { a as a11yBoolean } from "./a11y-DAzBNVe7-CO1Uj69l.js";
+import { A as ArrowFocusController } from "./focus-BAKpVknt-BX94nhwN.js";
+import { H as HookValidationLifecycle } from "./validation-CTBekLDe-sG9H3Ujv.js";
+import { O as OnListener } from "./listener-DcAn-vyA-vMwX8dLP.js";
+import { m as makeRef } from "./make-ref-bcj7UEIC-BX_OSyqv.js";
+import { c as createMutationObserver } from "./mutation-observer-CX81WQtk-DFcmhOTk.js";
+import { r as requestAnimationFrameNoNgZone } from "./requestAnimationFrame-BEuV0Xpe-CBtvTq-Q.js";
+import "./disposable-event-listener-CKoABG1h-D5kNsG5G.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{}:host ::-webkit-scrollbar{width:0.5rem;height:0.5rem}:host{}: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{}:host ::-webkit-scrollbar-thumb{border-radius:5px;background:var(--theme-scrollbar-thumb--background)}:host{}:host ::-webkit-scrollbar-thumb:hover{background:var(--theme-scrollbar-thumb--background--hover)}:host ::-webkit-scrollbar-corner{display:none}:host .display-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:hover:not(.readonly):not(.disabled){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}: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:var(--theme-input--border-thickness) solid var(--theme-input--border-color--disabled)}:host .select.disabled input{color:var(--theme-input--color--disabled)}:host .select.readonly{border:var(--theme-input--border-thickness) solid var(--theme-input--border-color--readonly)}:host .select.readonly input{color:var(--theme-input--color--readonly)}: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 ix-icon-button{height:1.875rem;width:1.875rem;min-height:1.875rem;min-width:1.875rem}:host .input-container input{background:transparent;height:1.75rem;width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-family:Siemens Sans, sans-serif;font-size:0.875rem;font-weight:400;line-height:1.429em;color:var(--theme-color-std-text);-webkit-font-smoothing:antialiased;-moz-osx-font-smooting:grayscale}: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 ix-dropdown{max-width:100%}:host .dropdown-visible{--ix-icon-button-color:var(--theme-color-std-text--hover)}:host .add-item{display:flex;justify-content:flex-start;align-items:center;position:relative;width:100%}:host .select-list-header{display:flex;align-items:center;height:2rem;color:var(--theme-select-list-item-hint--color);margin:0 0.5rem 0 1rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}:host(.ix-info:not(.disabled):not(:disabled):not([disabled]):not(.readonly):not([readonly])) .select{border-color:var(--theme-input--border-color--info)}:host(.ix-info:not(.disabled):not(:disabled):not([disabled]):not(.readonly):not([readonly])) .select:hover{border-color:var(--theme-input--border-color--info--hover) !important}:host(.ix-info:not(.disabled):not(:disabled):not([disabled]):not(.readonly):not([readonly])) .select:active{border-color:var(--theme-input--border-color--info--active) !important}:host(.ix-warning:not(.disabled):not(:disabled):not([disabled]):not(.readonly):not([readonly])) .select{border-color:var(--theme-input--border-color--warning)}:host(.ix-warning:not(.disabled):not(:disabled):not([disabled]):not(.readonly):not([readonly])) .select:hover{border-color:var(--theme-input--border-color--warning--hover) !important}:host(.ix-warning:not(.disabled):not(:disabled):not([disabled]):not(.readonly):not([readonly])) .select:active{border-color:var(--theme-input--border-color--warning--active) !important}:host([class*=ix-invalid]:not(.disabled):not(:disabled):not([disabled]):not(.readonly):not([readonly])) .select,:host(.ix-invalid--required:not(.disabled):not(:disabled):not([disabled]):not(.readonly):not([readonly])) .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]):not(.readonly):not([readonly])) .select:hover,:host(.ix-invalid--required:not(.disabled):not(:disabled):not([disabled]):not(.readonly):not([readonly])) .select:hover{border-color:var(--theme-input--border-color--invalid--hover) !important}:host([class*=ix-invalid]:not(.disabled):not(:disabled):not([disabled]):not(.readonly):not([readonly])) .select:active,:host(.ix-invalid--required:not(.disabled):not(:disabled):not([disabled]):not(.readonly):not([readonly])) .select:active{border-color:var(--theme-input--border-color--invalid--active) !important}`;
+var __decorate = function(decorators, target, key, desc) {
+  var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+  if (typeof Reflect === "object" && typeof Reflect.decorate === "function")
+    r = Reflect.decorate(decorators, target, key, desc);
+  else
+    for (var i = decorators.length - 1; i >= 0; i--)
+      if (d = decorators[i])
+        r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+  return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+const Select = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    this.valueChange = createEvent(this, "valueChange", 7);
+    this.inputChange = createEvent(this, "inputChange", 7);
+    this.addItem = createEvent(this, "addItem", 7);
+    this.ixBlur = createEvent(this, "ixBlur", 7);
+    if (hostRef.$hostElement$["s-ei"]) {
+      this.formInternals = hostRef.$hostElement$["s-ei"];
+    } else {
+      this.formInternals = hostRef.$hostElement$.attachInternals();
+      hostRef.$hostElement$["s-ei"] = this.formInternals;
+    }
+    this.required = false;
+    this.ariaLabelClearIconButton = "Clear selection";
+    this.value = "";
+    this.allowClear = false;
+    this.mode = "single";
+    this.editable = false;
+    this.disabled = false;
+    this.readonly = false;
+    this.i18nPlaceholder = "Select an option";
+    this.i18nPlaceholderEditable = "Type of select option";
+    this.i18nSelectListHeader = "Select an option";
+    this.i18nNoMatches = "No matches";
+    this.i18nAllSelected = "All";
+    this.hideListHeader = false;
+    this.collapseMultipleSelection = false;
+    this.enableTopLayer = false;
+    this.dropdownShow = false;
+    this.selectedLabels = [];
+    this.isDropdownEmpty = false;
+    this.inputFilterText = "";
+    this.inputValue = "";
+    this.isInvalid = false;
+    this.isValid = false;
+    this.isInfo = false;
+    this.isWarning = false;
+    this.dropdownWrapperRef = makeRef();
+    this.dropdownAnchorRef = makeRef();
+    this.inputRef = makeRef();
+    this.touched = false;
+    this.itemObserver = createMutationObserver(() => {
+      if (!this.arrowFocusController) {
+        return;
+      }
+      this.arrowFocusController.items = this.visibleNonShadowItems;
+    });
+    this.focusControllerCallbackBind = this.focusDropdownItem.bind(this);
+  }
+  get nonShadowItems() {
+    return Array.from(this.hostElement.querySelectorAll("ix-select-item"));
+  }
+  get visibleNonShadowItems() {
+    return this.nonShadowItems.filter((item) => !item.classList.contains("display-none"));
+  }
+  get shadowItems() {
+    return Array.from(this.hostElement.shadowRoot.querySelectorAll("ix-select-item"));
+  }
+  get visibleShadowItems() {
+    return this.shadowItems.filter((item) => !item.classList.contains("display-none"));
+  }
+  get items() {
+    return [...this.nonShadowItems, ...this.shadowItems];
+  }
+  get visibleItems() {
+    return this.items.filter((item) => !item.classList.contains("display-none"));
+  }
+  get selectedItems() {
+    return this.items.filter((item) => item.selected);
+  }
+  get addItemButton() {
+    return this.hostElement.shadowRoot.querySelector(".add-item");
+  }
+  get isSingleMode() {
+    return this.mode === "single";
+  }
+  get isMultipleMode() {
+    return this.mode === "multiple";
+  }
+  get isEveryDropdownItemHidden() {
+    return this.items.every((item) => item.classList.contains("display-none"));
+  }
+  watchValue(value) {
+    this.value = value;
+    this.updateSelection();
+  }
+  watchDropdownShow(show) {
+    if (show && this.dropdownElement) {
+      this.itemObserver.observe(this.dropdownElement, {
+        childList: true,
+        subtree: true
+      });
+    } else {
+      this.cleanupResources();
+    }
+  }
+  cleanupResources() {
+    var _a, _b;
+    (_a = this.arrowFocusController) === null || _a === void 0 ? void 0 : _a.disconnect();
+    this.arrowFocusController = void 0;
+    (_b = this.itemObserver) === null || _b === void 0 ? void 0 : _b.disconnect();
+  }
+  onItemClicked(event) {
+    const newId = event.detail;
+    this.itemClick(newId);
+  }
+  updateFormInternalValue(value) {
+    if (Array.isArray(value)) {
+      this.formInternals.setFormValue(value.join(","));
+    } else {
+      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 = void 0;
+    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");
+      if (!nestedDropdownItem) {
+        return;
+      }
+      requestAnimationFrameNoNgZone(() => {
+        var _a2, _b2;
+        (_b2 = (_a2 = nestedDropdownItem === null || nestedDropdownItem === void 0 ? void 0 : nestedDropdownItem.shadowRoot) === null || _a2 === void 0 ? void 0 : _a2.querySelector("button")) === null || _b2 === void 0 ? void 0 : _b2.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.updateSelection();
+    if (this.isMultipleMode && this.inputFilterText) {
+      this.clearInput();
+      this.removeHiddenFromItems();
+      if (this.arrowFocusController) {
+        this.arrowFocusController.items = this.visibleNonShadowItems;
+      }
+      this.navigationItem = void 0;
+    }
+  }
+  emitAddItem(value) {
+    var _a;
+    if (value === void 0 || value.trim() === "") {
+      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;
+    (_a = this.customItemsContainerElement) === null || _a === void 0 ? void 0 : _a.appendChild(newItem);
+    this.clearInput();
+    this.itemClick(value);
+    return false;
+  }
+  toggleValue(itemValue) {
+    if (!this.isMultipleMode) {
+      return itemValue;
+    }
+    if (!this.value) {
+      return [itemValue];
+    }
+    let value = this.value;
+    if (!Array.isArray(value)) {
+      value = [value];
+    }
+    if (value.includes(itemValue)) {
+      return value.filter((value2) => value2 !== itemValue);
+    } else {
+      return [...value, itemValue];
+    }
+  }
+  updateSelection() {
+    var _a, _b;
+    let ids = [];
+    if (this.value) {
+      ids = Array.isArray(this.value) ? [...this.value] : [this.value];
+    }
+    this.items.forEach((item) => {
+      item.selected = ids.some((i) => {
+        if (typeof i !== typeof item.value) {
+          return i.toString() === item.value.toString();
+        } else {
+          return i === item.value;
+        }
+      });
+    });
+    this.selectedLabels = this.selectedItems.map((item) => item.label);
+    if (this.dropdownShow && this.inputFilterText) {
+      return;
+    }
+    if (((_a = this.selectedLabels) === null || _a === void 0 ? void 0 : _a.length) && this.isSingleMode) {
+      this.inputValue = (_b = this.selectedLabels[0]) !== null && _b !== void 0 ? _b : "";
+    } else {
+      this.inputValue = "";
+    }
+    this.inputElement && (this.inputElement.value = this.inputValue);
+  }
+  emitValueChange(value) {
+    const { defaultPrevented } = this.valueChange.emit(value);
+    if (defaultPrevented) {
+      return true;
+    }
+    this.updateFormInternalValue(value);
+    return false;
+  }
+  componentDidLoad() {
+    var _a;
+    (_a = this.inputElement) === null || _a === void 0 ? void 0 : _a.addEventListener("input", () => {
+      var _a2;
+      this.dropdownShow = true;
+      this.inputChange.emit((_a2 = this.inputElement) === null || _a2 === void 0 ? void 0 : _a2.value);
+    });
+  }
+  componentWillLoad() {
+    this.updateSelection();
+    this.updateFormInternalValue(this.value);
+  }
+  componentDidRender() {
+    if (!this.dropdownShow || this.arrowFocusController || !this.dropdownElement) {
+      return;
+    }
+    this.arrowFocusController = new ArrowFocusController(this.visibleNonShadowItems, this.dropdownElement, this.focusControllerCallbackBind);
+    this.arrowFocusController.wrap = !this.isAddItemVisible() && !this.visibleShadowItems.length;
+  }
+  onLabelChange(event) {
+    event.preventDefault();
+    event.stopImmediatePropagation();
+    this.updateSelection();
+  }
+  disconnectedCallback() {
+    this.cleanupResources();
+  }
+  itemExists(item) {
+    return this.items.find((i) => i.label === item);
+  }
+  dropdownVisibilityChanged(event) {
+    var _a, _b;
+    this.dropdownShow = event.detail;
+    if (event.detail) {
+      (_a = this.inputElement) === null || _a === void 0 ? void 0 : _a.focus();
+      (_b = this.inputElement) === null || _b === void 0 ? void 0 : _b.select();
+      this.removeHiddenFromItems();
+      this.isDropdownEmpty = this.isEveryDropdownItemHidden;
+    } else {
+      this.navigationItem = void 0;
+      this.updateSelection();
+      this.inputFilterText = "";
+    }
+  }
+  async onKeyDown(event) {
+    if (event.code === "ArrowDown" || event.code === "ArrowUp") {
+      await this.onArrowNavigation(event, event.code);
+    }
+    if (!this.dropdownShow) {
+      return;
+    }
+    if (event.code === "Enter" || event.code === "NumpadEnter") {
+      await this.onEnterNavigation(event.target);
+    }
+    if (event.code === "Escape") {
+      this.dropdownShow = false;
+    }
+  }
+  async onEnterNavigation(el) {
+    if (this.isMultipleMode) {
+      return;
+    }
+    const itemLabel = el === null || el === void 0 ? void 0 : el.label;
+    const item = this.itemExists(this.inputFilterText);
+    if (item) {
+      this.itemClick(item.value);
+    } else if (this.editable && !this.itemExists(itemLabel)) {
+      const defaultPrevented = this.emitAddItem(this.inputFilterText);
+      if (defaultPrevented) {
+        return;
+      }
+    }
+    this.dropdownShow = false;
+    this.updateSelection();
+  }
+  async onArrowNavigation(event, key) {
+    var _a;
+    if (event.defaultPrevented) {
+      return;
+    }
+    event.preventDefault();
+    event.stopPropagation();
+    this.dropdownShow = true;
+    if (!this.navigationItem && document.activeElement === this.hostElement) {
+      if (this.visibleItems.length) {
+        this.applyFocusTo(this.visibleItems.shift());
+      } else if (this.isAddItemVisible()) {
+        this.focusAddItemButton();
+      }
+      return;
+    }
+    const moveUp = key === "ArrowUp";
+    const indexNonShadow = document.activeElement ? this.visibleNonShadowItems.indexOf(document.activeElement) : -1;
+    if (indexNonShadow === 0) {
+      if (!this.visibleShadowItems.length && this.isAddItemVisible()) {
+        this.focusAddItemButton();
+      } else {
+        this.applyFocusTo(this.visibleShadowItems.pop());
+      }
+      return;
+    } else if (indexNonShadow !== -1 && indexNonShadow === this.visibleNonShadowItems.length - 1) {
+      if (this.visibleShadowItems.length) {
+        this.applyFocusTo(this.visibleShadowItems.shift());
+      } else if (this.isAddItemVisible()) {
+        this.focusAddItemButton();
+      }
+      return;
+    }
+    if (!this.navigationItem) {
+      return;
+    }
+    if (this.isAddItemVisible() && ((_a = this.addItemElement) === null || _a === void 0 ? void 0 : _a.contains(await this.navigationItem.getDropdownItemElement()))) {
+      if (moveUp) {
+        this.applyFocusTo(this.visibleItems.pop());
+      } else if (this.visibleItems.length) {
+        this.applyFocusTo(this.visibleItems.shift());
+      }
+      return;
+    }
+    const indexShadow = this.visibleShadowItems.indexOf(this.navigationItem);
+    if (moveUp) {
+      if (indexShadow === 0) {
+        if (this.visibleNonShadowItems.length) {
+          this.applyFocusTo(this.visibleNonShadowItems.pop());
+        } else if (this.isAddItemVisible()) {
+          this.focusAddItemButton();
+        }
+      } else {
+        this.applyFocusTo(this.visibleShadowItems[indexShadow - 1]);
+      }
+    } else {
+      if (indexShadow === this.visibleShadowItems.length - 1) {
+        if (this.isAddItemVisible()) {
+          this.focusAddItemButton();
+        } else {
+          this.applyFocusTo(this.visibleItems.shift());
+        }
+      } else {
+        this.applyFocusTo(this.visibleShadowItems[indexShadow + 1]);
+      }
+    }
+  }
+  applyFocusTo(element) {
+    if (!element) {
+      return;
+    }
+    this.navigationItem = element;
+    setTimeout(() => {
+      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) {
+      (_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.addItemElement;
+    }
+  }
+  filterItemsWithTypeahead() {
+    var _a, _b;
+    this.inputFilterText = (_b = (_a = this.inputElement) === null || _a === void 0 ? void 0 : _a.value.trim()) !== null && _b !== void 0 ? _b : "";
+    if (this.inputFilterText) {
+      this.items.forEach((item) => {
+        var _a2;
+        item.classList.remove("display-none");
+        if (!((_a2 = item.label) === null || _a2 === void 0 ? void 0 : _a2.toLowerCase().includes(this.inputFilterText.toLowerCase()))) {
+          item.classList.add("display-none");
+        }
+      });
+    } else {
+      this.removeHiddenFromItems();
+    }
+    if (this.arrowFocusController) {
+      this.arrowFocusController.items = this.visibleNonShadowItems;
+    }
+    this.isDropdownEmpty = this.isEveryDropdownItemHidden;
+  }
+  removeHiddenFromItems() {
+    this.items.forEach((item) => {
+      item.classList.remove("display-none");
+    });
+  }
+  clearInput() {
+    if (this.inputElement) {
+      this.inputElement.value = "";
+    }
+    this.inputFilterText = "";
+  }
+  clear() {
+    this.clearInput();
+    this.selectedLabels = [];
+    const emptyValue = this.isSingleMode ? "" : [];
+    this.value = emptyValue;
+    this.emitValueChange(emptyValue);
+    this.dropdownShow = false;
+  }
+  onInputBlur(event) {
+    this.ixBlur.emit();
+    this.touched = true;
+    if (this.editable) {
+      return;
+    }
+    if (this.isSingleMode) {
+      return;
+    }
+    const target = event.target;
+    if (!this.dropdownShow && this.mode !== "multiple") {
+      target.value = this.selectedLabels.toString();
+    }
+  }
+  placeholderValue() {
+    if (this.disabled) {
+      return "";
+    }
+    if (this.readonly) {
+      return "";
+    }
+    if (this.editable) {
+      return this.i18nPlaceholderEditable;
+    }
+    return this.i18nPlaceholder;
+  }
+  isAddItemVisible() {
+    return !this.itemExists(this.inputFilterText) && this.editable && this.inputFilterText;
+  }
+  shouldDisplayAllChip() {
+    return this.selectedItems.length === this.items.length && this.collapseMultipleSelection;
+  }
+  renderAllChip() {
+    return h("ix-filter-chip", { disabled: this.disabled || this.readonly, ariaLabelCloseIconButton: this.i18nAllSelected, onCloseClick: (e) => {
+      e.preventDefault();
+      e.stopPropagation();
+      this.clear();
+    } }, `${this.i18nAllSelected} (${this.selectedItems.length})`);
+  }
+  renderChip(item) {
+    return h("ix-filter-chip", { disabled: this.disabled || this.readonly, key: item.value, onCloseClick: (e) => {
+      e.preventDefault();
+      e.stopPropagation();
+      this.itemClick(item.value);
+    } }, item.label);
+  }
+  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() {
+    if (this.inputElement) {
+      return Promise.resolve(this.inputElement);
+    } else {
+      return Promise.reject(new Error("Input element not found"));
+    }
+  }
+  /**
+   * Focuses the input field
+   */
+  async focusInput() {
+    const inputElement = await this.getNativeInputElement();
+    if (inputElement) {
+      inputElement.focus();
+    }
+  }
+  /**
+   * Check if the input field has been touched.
+   * @internal
+   * */
+  isTouched() {
+    return Promise.resolve(this.touched);
+  }
+  render() {
+    var _a, _b, _c, _d, _e;
+    return h(Host, { key: "44a92192a5bb2243e52b5dedfc6513b75e1762e6", "aria-disabled": a11yBoolean(this.disabled), class: {
+      readonly: this.readonly,
+      disabled: this.disabled
+    } }, h("ix-field-wrapper", { key: "51981eecb1437df709600af04d3444e75b7ba33b", 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: "8f3fe3649221f9b09b009d6624eb096fea5a1cec", class: {
+      select: true,
+      disabled: this.disabled,
+      readonly: this.readonly
+    }, ref: (ref) => {
+      this.dropdownAnchorRef(ref);
+      if (!this.editable)
+        this.dropdownWrapperRef(ref);
+    } }, h("div", { key: "3d64b588c5bf162777e6c76f7fbd252a6856f968", class: "input-container" }, h("div", { key: "fc187195af89682f29494d779fabbb7fbf53c1d4", class: "chips" }, this.isMultipleMode && this.items.length !== 0 && (this.shouldDisplayAllChip() ? this.renderAllChip() : (_a = this.selectedItems) === null || _a === void 0 ? void 0 : _a.map((item) => this.renderChip(item))), h("div", { key: "bf4730e7d19381c632063670ef11178e6998fe21", class: "trigger" }, h("input", { key: "5191e5a69165d1f22a0b807612d5c0eef16e4429", 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: (_c = this.inputValue) !== null && _c !== void 0 ? _c : "", ref: (ref) => {
+      this.inputElement = ref;
+      this.inputRef(ref);
+    }, onBlur: (e) => this.onInputBlur(e), onFocus: () => {
+      this.navigationItem = void 0;
+    }, onInput: () => this.filterItemsWithTypeahead(), onKeyDown: (e) => this.onKeyDown(e) }), this.allowClear && !this.disabled && !this.readonly && (((_d = this.selectedLabels) === null || _d === void 0 ? void 0 : _d.length) || this.inputFilterText) ? h("ix-icon-button", { key: "clear", class: "clear", icon: iconClear, variant: "subtle-tertiary", oval: true, size: "16", onClick: (e) => {
+      e.preventDefault();
+      e.stopPropagation();
+      this.clear();
+    }, "aria-label": this.ariaLabelClearIconButton }) : null, this.disabled || this.readonly ? null : h("ix-icon-button", { "data-select-dropdown": true, key: "dropdown", class: { "dropdown-visible": this.dropdownShow }, icon: this.dropdownShow ? iconChevronUpSmall : iconChevronDownSmall, variant: "subtle-tertiary", ref: (ref) => {
+      if (this.editable)
+        this.dropdownWrapperRef(ref);
+    }, "aria-label": (_e = this.ariaLabelChevronDownIconButton) !== null && _e !== void 0 ? _e : this.dropdownShow ? "Close select dropdown" : "Open select dropdown" })))))), h("ix-dropdown", { key: "d96aa53fe76fec50dd2b2955be1983f5d2f977a4", ref: (ref) => this.dropdownElement = ref, show: this.dropdownShow, closeBehavior: this.isMultipleMode ? "outside" : "both", class: {
+      "display-none": this.disabled || this.readonly
+    }, anchor: this.dropdownAnchorRef.waitForCurrent(), trigger: this.dropdownWrapperRef.waitForCurrent(), onShowChanged: (e) => this.dropdownVisibilityChanged(e), placement: "bottom-start", enableTopLayer: this.enableTopLayer, overwriteDropdownStyle: async () => {
+      var _a2, _b2;
+      const styleOverwrites = {};
+      const minWidth = (_b2 = (_a2 = this.hostElement.shadowRoot) === null || _a2 === void 0 ? void 0 : _a2.querySelector(".select")) === null || _b2 === void 0 ? void 0 : _b2.getBoundingClientRect().width;
+      if (minWidth) {
+        styleOverwrites.minWidth = `${minWidth}px`;
+      }
+      if (this.dropdownWidth) {
+        styleOverwrites.width = `min(${this.dropdownWidth}, 100%)`;
+      }
+      if (this.dropdownMaxWidth) {
+        styleOverwrites.maxWidth = `min(${this.dropdownMaxWidth}, 100%)`;
+      }
+      return styleOverwrites;
+    } }, h("div", { key: "72bf038496330903b51e0c29491de61035c2ca17", class: {
+      "select-list-header": true,
+      hidden: this.hideListHeader || this.isDropdownEmpty
+    }, title: this.i18nSelectListHeader, onClick: (e) => e.preventDefault() }, this.i18nSelectListHeader), h("slot", { key: "06f8ab01910cedaf38c1f6c80a6058189b58b297", onSlotchange: () => {
+      this.updateSelection();
+    } }), h("div", { key: "99acea939a79985d5c26df1b10a498733bf82221", ref: (ref) => this.customItemsContainerElement = ref }), this.isAddItemVisible() ? h("ix-dropdown-item", { "data-testid": "add-item", icon: iconPlus, class: {
+      "add-item": true
+    }, label: this.inputFilterText, onItemClick: (e) => {
+      e.preventDefault();
+      e.stopPropagation();
+      this.emitAddItem(this.inputFilterText);
+    }, onFocus: () => this.navigationItem = this.addItemElement, ref: (ref) => {
+      this.addItemElement = ref;
+    } }) : null, this.isDropdownEmpty && !this.editable ? h("div", { class: "select-list-header" }, this.i18nNoMatches) : ""));
+  }
+  static get formAssociated() {
+    return true;
+  }
+  get hostElement() {
+    return getElement(this);
+  }
+  static get watchers() {
+    return {
+      "value": [{
+        "watchValue": 0
+      }],
+      "dropdownShow": [{
+        "watchDropdownShow": 0
+      }]
+    };
+  }
+};
+__decorate([
+  OnListener("keydown", (self) => self.dropdownShow)
+], Select.prototype, "onKeyDown", null);
+__decorate([
+  HookValidationLifecycle()
+], Select.prototype, "onValidationChange", null);
+Select.style = selectCss();
+export {
+  Select as ix_select
+};