dap-design-system 0.60.2 → 0.61.0

package/dist/components/combobox/comboboxBase.js

@@ -0,0 +1,738 @@
+var w = Object.getPrototypeOf;
+var S = Reflect.get;
+var x = (m, e, t) => S(w(m), t, e);
+var o = (m, e, t) => new Promise((i, a) => {
+  var n = (u) => {
+    try {
+      c(t.next(u));
+    } catch (b) {
+      a(b);
+    }
+  }, h = (u) => {
+    try {
+      c(t.throw(u));
+    } catch (b) {
+      a(b);
+    }
+  }, c = (u) => u.done ? i(u.value) : Promise.resolve(u.value).then(n, h);
+  c((t = t.apply(m, e)).next());
+});
+import { clsx as g } from "../../node_modules/clsx/dist/clsx.js";
+import "../../node_modules/@lit/reactive-element/reactive-element.js";
+import { nothing as I } from "../../node_modules/lit-html/lit-html.js";
+import "../../node_modules/lit-element/lit-element.js";
+import { property as r } from "../../node_modules/@lit/reactive-element/decorators/property.js";
+import { state as v } from "../../node_modules/@lit/reactive-element/decorators/state.js";
+import { query as C } from "../../node_modules/@lit/reactive-element/decorators/query.js";
+import { ifDefined as p } from "../../node_modules/lit-html/directives/if-defined.js";
+import { html as d } from "../../node_modules/lit-html/static.js";
+import { getValidityStateObject as V } from "../../common/utils.js";
+import { GenericFormElement as $ } from "../../internal/mixin/genericFormElement.js";
+import "../../localization/localization.js";
+import D from "./combobox.scss.js";
+import { t as y } from "../../node_modules/i18next/dist/esm/i18next.js";
+import { unsafeCSS as O } from "../../node_modules/@lit/reactive-element/css-tag.js";
+var T = Object.defineProperty, l = (m, e, t, i) => {
+  for (var a = void 0, n = m.length - 1, h; n >= 0; n--)
+    (h = m[n]) && (a = h(e, t, a) || a);
+  return a && T(e, t, a), a;
+};
+const f = class f extends $ {
+  constructor() {
+    super(...arguments), this.placement = "bottom-start", this.opened = !1, this.searchMode = "autocomplete", this.search = !1, this.clearButton = "true", this.allowManualInput = !1, this.searchForText = !1, this.searchOnValueSet = "false", this.loading = !1, this.selectable = "true", this.noAnimation = !1, this.textComplete = !1, this.openOnEmpty = !1, this.disableViewportAutoClose = !1, this.multiselect = !1, this.clearButtonTestId = "combobox-clear-button", this.searchButtonTestId = "combobox-search-button", this.disableSearchWhenEmpty = !1, this.selectedItems = [], this.optionListObserver = null, this.isUserInteraction = !1, this.pendingInitialValues = [], this.handleClick = () => {
+      !this.getComboboxOptions().length && !this.openOnEmpty ? this.hideDropDown() : this.opened ? this.hideDropDown() : this.showDropDown();
+    }, this.handleKeyDown = (e) => o(this, null, function* () {
+      var t, i;
+      if (e.key !== "Tab") {
+        if (e.key === "Enter")
+          return this.handleEnterKey(e);
+        if (e.key === "Escape")
+          return this.hideDropDown(), this.focus();
+        if (e.key === "Backspace" && this.multiselect && (((t = this.triggerInput) == null ? void 0 : t.value) || "") === "" && this.selectedItems.length > 0) {
+          e.preventDefault();
+          const n = this.selectedItems[this.selectedItems.length - 1];
+          this.removeSelectedItem(n), this.emit("dds-change", {
+            value: this.selectedItems.map((h) => h.value).join(","),
+            selectedItems: this.selectedItems,
+            type: "remove",
+            item: n
+          }), this.setValidity();
+          return;
+        }
+        if ((e.key === "ArrowDown" || e.key === "ArrowUp" || e.key === "ArrowLeft" || e.key === "ArrowRight") && this.isAutoComplete)
+          return this.handleArrowKeys(e);
+        if (this.isAutoComplete && ((i = this.triggerInput) != null && i.value) && !this.opened) {
+          const a = this.getComboboxOptions().length > 0;
+          (this.openOnEmpty || a) && this.showDropDown();
+        }
+      }
+    }), this.handleInput = (e) => o(this, null, function* () {
+      const t = this.triggerInput;
+      if (this.isUserInteraction = !0, e.inputType !== "deleteContentBackward" || e.inputType === "deleteContentBackward" && this.allowManualInput ? (this.selectedText = t.value, this.search && (this.value = t.value)) : this.search ? (this.selectedText = t.value, this.value = t.value) : t.value === "" && e.inputType === "deleteContentBackward" && this.clearSelection(), this.emit("dds-input", { input: t.value, originalEvent: e }), this.setValidity(), this.requestUpdate(), this.isAutoComplete && t.value && !this.opened) {
+        const i = this.getComboboxOptions().length > 0;
+        (this.openOnEmpty || i) && this.showDropDown();
+      }
+    }), this.handleListKeyDown = (e) => {
+      e.detail.key === "Escape" && (this.hideDropDown(), this.currentItem = this.selectedItem, this.selectedText = "", this.triggerInput.value = this.selectedItem.text, this.triggerInput.focus());
+    }, this.handleDocumentMouseDown = (e) => {
+      const t = e.composedPath();
+      this && !t.includes(this) && this.hideDropDown();
+    }, this.handlePopupAutoClose = () => {
+      this.hideDropDown({ skipFocus: !0 });
+    }, this.handleFocus = () => {
+      this.emit("dds-focus");
+    }, this.handleBlur = () => {
+      this.emit("dds-blur");
+    }, this.handleSelectedChange = (e) => o(this, null, function* () {
+      var t;
+      if (e.preventDefault(), e.stopPropagation(), this.searchForText)
+        this.selectedText = e.detail.text, this.value = e.detail.text, this.triggerInput.value = e.detail.text, this.emit("dds-search", { search: this.selectedText }), this.requestUpdate(), this.setValidity();
+      else if (this.multiselect) {
+        this.addSelectedItem(e.detail), this.emit("dds-change", {
+          value: this.selectedItems.map((i) => i.value).join(","),
+          selectedItems: this.selectedItems,
+          type: "add",
+          item: e.detail
+        }), this.currentItem = null, yield this.updateComplete, this.triggerInput.value = "", this.triggerInput.focus(), this.setValidity();
+        return;
+      } else
+        this.selectedItem = e.detail, this.selectedText = e.detail.text, this.value !== ((t = this.selectedItem) == null ? void 0 : t.value) && (this.triggerInput.value = e.detail.text, this.value = this.selectedItem.value, this.emit("dds-change", {
+          value: this.selectedItem.value,
+          selectedItem: this.selectedItem,
+          type: "select"
+        }), this.requestUpdate(), yield this.updateComplete, this.currentItem && (this.triggerInput.value = this.currentItem.text), this.triggerInput.focus(), this.setValidity());
+      this.hideDropDown();
+    }), this.handleOptionDeselect = (e) => {
+      e.preventDefault(), e.stopPropagation(), this.selectedItem = null, this.selectedText = "", this.value = void 0, this.triggerInput.value = "", this.emit("dds-change", {
+        value: void 0,
+        selectedItem: null,
+        type: "deselect"
+      }), this.requestUpdate(), this.setValidity();
+    }, this.handleCurrentOptionChange = (e) => {
+      this.currentItem = e.detail, !this.multiselect && e.detail && (this.textComplete && this.searchMode !== "manual" && this.searchMode !== "none" && (this.triggerInput.value = e.detail.text), this.isAutoComplete && this.selectedText && this.selectedText !== "" && !this.allowManualInput && this.textComplete && (this.triggerInput.value = e.detail.text, this.setSelectionRange(
+        this.selectedText.length,
+        this.triggerInput.value.length
+      )));
+    }, this.handleListChanged = (e) => {
+      !e.detail.elements.length && !this.openOnEmpty && this.hideDropDown();
+    }, this.handleClearClick = () => {
+      this.disabled || (this.multiselect ? this.clearAllSelections() : this.clearSelection(), this.triggerInput.focus(), this.setValidity(), this.openOnEmpty || this.hideDropDown(), this.emit("dds-clear"));
+    }, this.handleSearchClick = (e) => {
+      e.stopPropagation(), e.preventDefault(), this.setValidity(), this.emit("dds-search", { search: this.selectedText });
+    }, this.handleChipRemove = (e, t) => {
+      e.stopPropagation(), this.removeSelectedItem(t), this.emit("dds-change", {
+        value: this.selectedItems.map((i) => i.value).join(","),
+        selectedItems: this.selectedItems,
+        type: "remove",
+        item: t
+      }), this.setValidity(), this.triggerInput.focus();
+    };
+  }
+  /** True when the search input currently holds non-whitespace text. */
+  get hasSearchText() {
+    var t;
+    return (this.selectedText || ((t = this.selectedItem) == null ? void 0 : t.text) || this.value || "").trim().length > 0;
+  }
+  firstUpdated(e) {
+    return o(this, null, function* () {
+      var a;
+      x(f.prototype, this, "firstUpdated").call(this, e), yield this.optionList.updateComplete, yield new Promise((n) => requestAnimationFrame(n));
+      const t = this.getComboboxOptions();
+      yield Promise.all(t.map((n) => n.updateComplete));
+      const i = x(f.prototype, this, "value");
+      if (i)
+        if (this.multiselect) {
+          const n = i.split(",").map((h) => h.trim()).filter((h) => h);
+          this.pendingInitialValues = n, this.updateMultipleSelectionsFromValues(n);
+        } else
+          this.selectedItem = (a = this.optionList) == null ? void 0 : a.getAllOptions().find((n) => n.value === i), this.selectedItem ? this.selectedText = this.selectedItem.optionText || "" : this.selectedText = "", !this.selectedText && (this.allowManualInput || this.searchMode === "none") && (this.selectedText = i);
+      this.setupOptionListObserver();
+    });
+  }
+  updated(e) {
+    var t;
+    if (super.updated(e), e.has("value") && this.triggerInput && !this.search && !this.multiselect) {
+      const i = this.value;
+      i ? this.handleValueChange(i) : this.clearSelection();
+    }
+    if (e.has("value") && this.triggerInput && this.isFreeTextSearch) {
+      const i = (t = this.value) != null ? t : "";
+      this.triggerInput.value !== i && (this.triggerInput.value = i), this.selectedText = i;
+    }
+  }
+  get isFreeTextSearch() {
+    return !!this.search && (this.searchMode === "none" || !!this.allowManualInput);
+  }
+  /**
+   * Handles value changes from outside the component
+   * This ensures the selection state is updated when the value is set programmatically
+   */
+  handleValueChange(e) {
+    if (!e) return;
+    this.isUserInteraction = !1;
+    const t = this.getComboboxOptions().find((i) => i.value === e);
+    t ? (this.selectedItem = t, this.selectedText = t.optionText || t.textContent || "", this.triggerInput && (this.triggerInput.value = this.selectedText), this.requestUpdate()) : (this.selectedItem = null, this.search || (this.selectedText = "", this.triggerInput && (this.triggerInput.value = "")), this.requestUpdate());
+  }
+  setupOptionListObserver() {
+    this.optionList && (this.optionListObserver && this.optionListObserver.disconnect(), this.optionListObserver = new MutationObserver((e) => {
+      let t = !1;
+      e.forEach((i) => {
+        if (i.type === "childList") {
+          const a = Array.from(i.addedNodes).some(
+            (h) => h.nodeName === "DAP-DS-OPTION-ITEM"
+          ), n = Array.from(i.removedNodes).some(
+            (h) => h.nodeName === "DAP-DS-OPTION-ITEM"
+          );
+          (a || n) && (t = !0);
+        }
+      }), t && this.updateComboboxState();
+    }), this.optionListObserver.observe(this, {
+      childList: !0,
+      subtree: !0
+    }));
+  }
+  updateComboboxState() {
+    requestAnimationFrame(() => {
+      requestAnimationFrame(() => {
+        var i;
+        const e = this.getComboboxOptions().length > 0, t = ((i = this.triggerInput) == null ? void 0 : i.value) && this.triggerInput.value.trim() !== "";
+        e && t && (this.isAutoComplete || this.search) && this.isUserInteraction ? this.opened || this.showDropDown() : !e && !this.openOnEmpty && t && this.hideDropDown(), e && (this.multiselect ? this.selectedItems.length === 0 && this.pendingInitialValues.length > 0 && this.updateMultipleSelectionsFromValues(this.pendingInitialValues) : this.value && !this.selectedItem && this.updateSelectionFromValue());
+      });
+    });
+  }
+  /**
+   * Updates the selection state based on the current value
+   * This is useful when options are loaded asynchronously
+   */
+  updateSelectionFromValue() {
+    if (!this.value) return;
+    this.isUserInteraction = !1;
+    const e = this.getComboboxOptions().find(
+      (t) => t.value === this.value
+    );
+    e && (this.selectedItem = e, this.selectedText = e.optionText || e.textContent || "", this.triggerInput && (this.triggerInput.value = this.selectedText), this.requestUpdate());
+  }
+  cleanupOptionListObserver() {
+    this.optionListObserver && (this.optionListObserver.disconnect(), this.optionListObserver = null);
+  }
+  disconnectedCallback() {
+    super.disconnectedCallback(), this.cleanupOptionListObserver();
+  }
+  attributeChangedCallback(e, t, i) {
+    e === "value" && !i && this.clearSelection(), super.attributeChangedCallback(e, t, i);
+  }
+  get isAutoComplete() {
+    return this.searchMode === "autocomplete" || this.searchMode === "manual";
+  }
+  /**
+   * Get all option items directly from the combobox element
+   * This is more reliable for dynamic updates than the option list component
+   */
+  getComboboxOptions() {
+    return Array.from(this.querySelectorAll("dap-ds-option-item"));
+  }
+  get isOpenOnEmpty() {
+    return this.openOnEmpty || !this.openOnEmpty && this.getComboboxOptions().length > 0;
+  }
+  get isOpenOnAutocomplete() {
+    return this.isAutoComplete && this.isOpenOnEmpty;
+  }
+  get shouldHideClearIcon() {
+    var i;
+    const e = ((i = this.triggerInput) == null ? void 0 : i.value) || "";
+    return this.placeholder && this.placeholder.trim() !== "" ? !1 : e === "";
+  }
+  handleEnterKey(e) {
+    return o(this, null, function* () {
+      return e.preventDefault(), e.stopPropagation(), this.allowManualInput ? this.handleSearchEnter() : this.currentItem && this.opened ? this.handleCurrentItemEnter() : this.search && !this.isAutoComplete ? this.handleSearchEnter() : this.handleDefaultEnter();
+    });
+  }
+  handleCurrentItemEnter() {
+    return o(this, null, function* () {
+      var e, t;
+      if (this.currentItem.value === ((e = this.selectedItem) == null ? void 0 : e.value)) {
+        this.hideDropDown(), this.triggerInput.value = this.selectedItem.text, this.triggerInput.focus();
+        return;
+      }
+      this.currentItem.value !== ((t = this.selectedItem) == null ? void 0 : t.value) && (this.searchForText ? yield this.handleTextSearch(this.currentItem.text) : yield this.handleSelectedItemChange(this.currentItem));
+    });
+  }
+  handleSearchEnter() {
+    return o(this, null, function* () {
+      return this.emit("dds-search", { search: this.selectedText }), this.setValidity(), this.hideDropDown();
+    });
+  }
+  handleDefaultEnter() {
+    return o(this, null, function* () {
+      return this.opened ? this.hideDropDown() : (this.openOnEmpty || this.getComboboxOptions().length || this.isAutoComplete) && this.showDropDown();
+    });
+  }
+  handleSelectedItemChange(e) {
+    return o(this, null, function* () {
+      this.selectedItem = e, this.emit("dds-change", {
+        value: this.selectedItem.value,
+        selectedItem: this.selectedItem,
+        type: "select"
+      }), yield this.updateComplete, this.value = this.selectedItem.value, this.selectedText = this.currentItem.text, this.triggerInput.value = this.currentItem.text, this.triggerInput.focus(), this.setValidity();
+    });
+  }
+  handleTextSearch(e) {
+    return o(this, null, function* () {
+      this.value = e, this.selectedText = e, this.triggerInput.value = e, this.triggerInput.focus(), this.emit("dds-search", { search: e }), this.setValidity();
+    });
+  }
+  handleArrowKeys(e) {
+    return o(this, null, function* () {
+      if (e.preventDefault(), !this.opened)
+        if (this.openOnEmpty || this.getComboboxOptions().length || this.isAutoComplete)
+          this.showDropDown();
+        else
+          return;
+      yield this.updateComplete, this.optionList.captureFocus(e.key);
+    });
+  }
+  clearSelection() {
+    return o(this, null, function* () {
+      var t;
+      this.isUserInteraction = !1;
+      const e = !!(this.value || this.selectedText || (t = this.triggerInput) != null && t.value);
+      this.triggerInput && (this.triggerInput.value = ""), this.selectedText = "", this.selectedItem = null, this.value = void 0, this.requestUpdate(), yield this.updateComplete, e && this.emit("dds-change", this.selectedItem);
+    });
+  }
+  /**
+   * Multiselect helper methods
+   */
+  getSelectedValues() {
+    return this.selectedItems.map((e) => e.value);
+  }
+  isMaxSelectionsReached() {
+    return this.maxSelections ? this.selectedItems.length >= this.maxSelections : !1;
+  }
+  addSelectedItem(e) {
+    if (!this.multiselect || this.selectedItems.some(
+      (a) => a.value === e.value
+    ) || this.isMaxSelectionsReached()) return;
+    this.selectedItems = [...this.selectedItems, e];
+    const i = this.getSelectedValues().join(",");
+    super.value = i, this.selectedText = "", this.triggerInput && (this.triggerInput.value = ""), this.requestUpdate();
+  }
+  removeSelectedItem(e) {
+    if (this.multiselect) {
+      if (this.selectedItems = this.selectedItems.filter(
+        (t) => t.value !== e.value
+      ), this.selectedItems.length === 0)
+        super.value = void 0;
+      else {
+        const t = this.getSelectedValues().join(",");
+        super.value = t;
+      }
+      this.requestUpdate();
+    }
+  }
+  clearAllSelections() {
+    this.multiselect && (this.selectedItems = [], super.value = void 0, this.selectedText = "", this.triggerInput && (this.triggerInput.value = ""), this.requestUpdate());
+  }
+  updateMultipleSelectionsFromValues(e) {
+    if (!this.multiselect) return;
+    const t = this.getComboboxOptions();
+    this.selectedItems.length === 0 && (this.selectedItems = []);
+    let a = !1;
+    e.forEach((n) => {
+      const h = t.find(
+        (c) => c.value === n || c.getAttribute("value") === n
+      );
+      h && (this.selectedItems.some((u) => u.value === n) || (this.selectedItems.push(h), a = !0));
+    }), a && this.pendingInitialValues.length > 0 && (this.pendingInitialValues = []), this.requestUpdate();
+  }
+  /**
+   * Override value getter/setter to handle multiselect mode
+   */
+  get value() {
+    if (this.multiselect) {
+      const e = this.getSelectedValues();
+      return e.length > 0 ? e.join(",") : void 0;
+    }
+    return super.value;
+  }
+  set value(e) {
+    if (this.multiselect) {
+      const t = e ? e.split(",").map((i) => i.trim()).filter((i) => i) : [];
+      t.length > 0 && this.selectedItems.length === 0 && (this.pendingInitialValues = t), this.updateMultipleSelectionsFromValues(t), super.value = e;
+    } else
+      super.value = e;
+  }
+  showDropDown() {
+    return o(this, null, function* () {
+      this.disabled || this.readonly || !this.isAutoComplete || this.opened || !this.openOnEmpty && !this.getComboboxOptions().length && !this.isAutoComplete || (this.opened = !0, document.addEventListener("mousedown", this.handleDocumentMouseDown));
+    });
+  }
+  hideDropDown(e) {
+    return o(this, null, function* () {
+      this.opened && (this.opened = !1, document.removeEventListener("mousedown", this.handleDocumentMouseDown), yield this.updateComplete, e != null && e.skipFocus || this.focus(), this.clearSelectionRange());
+    });
+  }
+  get focusElement() {
+    return this.triggerInput;
+  }
+  setSelectionRange(e, t) {
+    this.triggerInput.setSelectionRange(e, t);
+  }
+  clearSelectionRange() {
+    const e = this.triggerInput.value.length;
+    this.setSelectionRange(e, e);
+  }
+  getValidity() {
+    return this.multiselect ? this.getMultiSelectValidity() : this.isAutoComplete ? this.getAutoCompleteValidity() : this.getBasicValidity();
+  }
+  formResetCallback() {
+    this.internals.setValidity({}), this.internals.setFormValue(this.defaultValue), this.value = this.defaultValue, this.multiselect ? this.selectedItems = [] : this.selectedItem = this.defaultValue;
+  }
+  getMultiSelectValidity() {
+    return !this.required || this.selectedItems.length > 0;
+  }
+  getAutoCompleteValidity() {
+    return this.allowManualInput ? this.getManualInputValidity() : this.searchForText ? this.getSearchTextValidity() : this.getSelectedItemValidity();
+  }
+  getManualInputValidity() {
+    return this.triggerInput.value !== "" || this.selectedItem !== null && this.selectedItem !== void 0;
+  }
+  getSearchTextValidity() {
+    return this.triggerInput.value !== "";
+  }
+  getSelectedItemValidity() {
+    return !!this.selectedItem;
+  }
+  getBasicValidity() {
+    return this.triggerInput.value !== "";
+  }
+  // custom validation
+  get validity() {
+    return this.internals.validity ? this.internals.validity : V({
+      valueMissing: this.required && !this.getValidity()
+    });
+  }
+  get validationMessage() {
+    return y("form.validationMessage.select");
+  }
+  checkValidity() {
+    return this.required ? this.getValidity() : !0;
+  }
+  reportValidity() {
+    return this.required ? this.checkValidity() : !0;
+  }
+  setValidity() {
+    this.checkValidity() ? this.internals.setValidity({}) : this.internals.setValidity(
+      {
+        valueMissing: this.required && !this.getValidity()
+      },
+      this.validationMessage,
+      this.triggerInput
+    );
+  }
+  handleInvalid(e) {
+    e.preventDefault();
+  }
+  getActiveDescendant() {
+    var t;
+    return this.opened ? (t = this.optionList) == null ? void 0 : t.getActiveOption() : this.triggerInput;
+  }
+  getSearchIconSize(e) {
+    switch (e) {
+      case "sm":
+        return "md";
+      case "lg":
+        return "lg";
+      case "xs":
+        return "sm";
+      default:
+        return "md";
+    }
+  }
+  getInnerIconSize(e) {
+    switch (e) {
+      case "sm":
+        return 16;
+      case "lg":
+        return 16;
+      case "xs":
+        return 10;
+      default:
+        return 16;
+    }
+  }
+  renderChip(e) {
+    const t = e.optionText || e.textContent || e.text || "";
+    return d`
+      <dap-ds-chip
+        size="sm"
+        removeable
+        .value=${e.value}
+        @dds-remove=${(i) => this.handleChipRemove(i, e)}>
+        ${t}
+      </dap-ds-chip>
+    `;
+  }
+  renderChips() {
+    return !this.multiselect || this.selectedItems.length === 0 ? I : d`
+      <div class="combobox__chips" part="chips">
+        ${this.selectedItems.map((e) => this.renderChip(e))}
+      </div>
+    `;
+  }
+  renderInput() {
+    var t, i, a;
+    const e = this.multiselect ? this.selectedText : this.selectedText !== "" ? this.selectedText : ((t = this.selectedItem) == null ? void 0 : t.text) || "";
+    return d`<input
+      id="input"
+      part="input"
+      role="combobox"
+      class="${g("input", `input--${this.size}`, {
+      "input--disabled": this.disabled,
+      "input--readonly": this.readonly,
+      "input--multiselect": this.multiselect
+    })}"
+      aria-expanded=${this.opened}
+      aria-haspopup="listbox"
+      aria-labelledby="label"
+      aria-describedby="description ${this.feedback ? "feedback" : ""}"
+      aria-disabled=${this.disabled}
+      aria-autocomplete="both"
+      aria-controls="option-list"
+      aria-activedescendant=${p((i = this.getActiveDescendant()) == null ? void 0 : i.id)}
+      aria-multiselectable=${this.multiselect ? "true" : "false"}
+      ?required=${this.required}
+      ?readonly=${this.readonly}
+      ?autofocus=${this.autofocus}
+      autocomplete=${this.autocomplete}
+      ?disabled=${this.disabled}
+      value=${e}
+      placeholder=${p((a = this.placeholder) != null ? a : "")}
+      type=${this.search ? "search" : "text"}
+      @blur=${this.handleBlur}
+      @focus=${this.handleFocus}
+      @input=${this.handleInput}
+      @keydown=${this.handleKeyDown}
+      @click=${this.handleClick} />`;
+  }
+  renderClearButton() {
+    return this.clearButton !== "true" || this.readonly ? I : d`<div
+      class="${g("clear-icon", {
+      "clear-icon--hidden": this.shouldHideClearIcon
+    })}">
+      <dap-ds-icon-button
+        icon="close-line"
+        data-testid=${this.clearButtonTestId}
+        aria-label=${y("clear")}
+        ?disabled=${this.disabled}
+        @click=${this.handleClearClick}></dap-ds-icon-button>
+    </div>`;
+  }
+  renderIndicatorIcon() {
+    var i;
+    const e = this.searchMode === "autocomplete" || this.searchMode === "manual", t = this.loading ? d`<dap-ds-icon-loading-spinner></dap-ds-icon-loading-spinner>` : null;
+    return e && !this.search ? d`<div
+        class="${g("indicator-icon", {
+      "indicator-icon--loading": this.loading
+    })}"
+        part="indicator-icon">
+        ${t || d`<slot name="indicator-icon"
+          ><dap-ds-icon-arrow-down-s-line
+            aria-hidden="true"
+            @click=${this.handleClick}>
+          </dap-ds-icon-arrow-down-s-line
+        ></slot>`}
+      </div>` : this.search ? d`<div
+        class="${g("indicator-icon", {
+      "indicator-icon--loading": this.loading
+    })}">
+        ${t || d`<dap-ds-icon-button
+          part="search-button"
+          size=${this.getSearchIconSize(this.size)}
+          variant=${this.subtle ? "neutral" : "inverted-brand"}
+          icon="search-line"
+          ?disabled=${this.disableSearchWhenEmpty && !this.hasSearchText}
+          data-testid=${this.searchButtonTestId}
+          iconSize=${this.getInnerIconSize(this.size)}
+          aria-label=${(i = this.searchButtonAriaLabel) != null ? i : y("search")}
+          @click=${this.handleSearchClick}>
+        </dap-ds-icon-button>`}
+      </div>` : I;
+  }
+  renderSelectActions() {
+    return d`<div
+      class="${g("select-action", `select-action--${this.size}`, {
+      "select-action--disabled": this.disabled,
+      "select-action--readonly": this.readonly,
+      "select-action--opened": this.opened,
+      "select-action--multiselect": this.multiselect
+    })}">
+      ${this.renderClearButton()} ${this.renderIndicatorIcon()}
+    </div>`;
+  }
+  renderOptionList() {
+    return d`<dap-ds-option-list
+      class="option-list"
+      part="option-list"
+      id="option-list"
+      .search=${this.search}
+      searchMode=${this.allowManualInput ? "none" : this.searchMode}
+      searchOnValueSet=${this.searchOnValueSet === "true"}
+      filterText=${this.selectedText}
+      size=${p(this.size)}
+      value=${p(this.value)}
+      selectable=${p(this.selectable)}
+      @dds-option-change=${this.handleSelectedChange}
+      @dds-option-deselect=${this.handleOptionDeselect}
+      @dds-keydown=${this.handleListKeyDown}
+      @dds-current-change=${this.handleCurrentOptionChange}
+      @dds-list-changed=${this.handleListChanged}>
+      <slot></slot>
+    </dap-ds-option-list>`;
+  }
+  renderCombobox() {
+    return d` ${this.renderLabel()}
+      <div>
+        <dap-ds-popup
+          part="base"
+          class="select-popup"
+          overflow
+          ?opened=${this.opened}
+          ?hasArrow=${!1}
+          placement=${this.placement}
+          floatingStrategy="fixed"
+          offset="4"
+          ?sync=${this.sync}
+          ?disableViewportAutoClose=${this.disableViewportAutoClose}
+          @dds-close=${this.handlePopupAutoClose}
+          @dds-closed=${this.hideDropDown}
+          @dds-opened=${this.showDropDown}>
+          <div
+            slot="trigger"
+            part="trigger"
+            class="${g("select", `select--${this.size}`, {
+      "select--disabled": this.disabled,
+      "select--readonly": this.readonly,
+      "select--opened": this.opened,
+      "select--loading": this.loading,
+      "select--success": this.status === "success",
+      "select--error": this.status === "error",
+      "select--no-animation": this.noAnimation,
+      "select--multiselect": this.multiselect
+    })}">
+            ${this.renderChips()} ${this.renderInput()}
+            ${this.renderSelectActions()}
+          </div>
+          ${this.renderOptionList()}
+        </dap-ds-popup>
+        ${this.multiselect ? d`<div
+              class="sr-only"
+              role="status"
+              aria-live="polite"
+              aria-atomic="true">
+              ${this.selectedItems.length > 0 ? y("combobox.multiselect.selected", {
+      count: this.selectedItems.length
+    }) : ""}
+            </div>` : I}
+        ${this.feedback && d`<dap-ds-feedback
+          part="feedback"
+          feedbackType=${p(this.feedbackType)}
+          feedbackSize="${p(this.size)}"
+          id="feedback">
+          ${this.feedback}
+        </dap-ds-feedback>`}
+      </div>`;
+  }
+};
+f.styles = O(D);
+let s = f;
+l([
+  C("input")
+], s.prototype, "triggerInput");
+l([
+  C("dap-ds-option-list")
+], s.prototype, "optionList");
+l([
+  r({ reflect: !0 })
+], s.prototype, "placement");
+l([
+  r({ type: Boolean, reflect: !0 })
+], s.prototype, "opened");
+l([
+  r()
+], s.prototype, "searchMode");
+l([
+  r({ type: Boolean })
+], s.prototype, "search");
+l([
+  r()
+], s.prototype, "clearButton");
+l([
+  r()
+], s.prototype, "placeholder");
+l([
+  r({ type: Boolean })
+], s.prototype, "sync");
+l([
+  r({ type: Boolean })
+], s.prototype, "allowManualInput");
+l([
+  r({ type: Boolean })
+], s.prototype, "searchForText");
+l([
+  r({ type: String })
+], s.prototype, "searchOnValueSet");
+l([
+  r({ type: Boolean })
+], s.prototype, "loading");
+l([
+  r({ type: String })
+], s.prototype, "selectable");
+l([
+  r({ type: Boolean })
+], s.prototype, "noAnimation");
+l([
+  r({ type: Boolean })
+], s.prototype, "textComplete");
+l([
+  r({ type: Boolean })
+], s.prototype, "openOnEmpty");
+l([
+  r({ type: Boolean })
+], s.prototype, "disableViewportAutoClose");
+l([
+  r()
+], s.prototype, "searchButtonAriaLabel");
+l([
+  r({ type: Boolean })
+], s.prototype, "subtle");
+l([
+  r({ type: Boolean, reflect: !0 })
+], s.prototype, "multiselect");
+l([
+  r({ type: Number, reflect: !0 })
+], s.prototype, "maxSelections");
+l([
+  r()
+], s.prototype, "clearButtonTestId");
+l([
+  r()
+], s.prototype, "searchButtonTestId");
+l([
+  r({ type: Boolean })
+], s.prototype, "disableSearchWhenEmpty");
+l([
+  v()
+], s.prototype, "selectedItem");
+l([
+  v()
+], s.prototype, "selectedItems");
+l([
+  v()
+], s.prototype, "currentItem");
+l([
+  v()
+], s.prototype, "selectedText");
+export {
+  s as default
+};
+//# sourceMappingURL=comboboxBase.js.map