import { C as y } from "../chunks/button.CAa1kvwe.js";
import { C as b } from "../chunks/icon-button.C2s3pHG4.js";
import { C as l, a as g } from "../chunks/option.DGXQzdtb.js";
import $ from "./select.js";
import { n as o, C as v } from "../chunks/lib-cortex-element.CVMmyPMC.js";
import { c as x } from "../chunks/custom-element.L4WJXn1j.js";
import { d as O } from "../chunks/debounce.DaHuiSGU.js";
import { L as w } from "../chunks/i18n.BABe9hN4.js";
import { w as f } from "../chunks/watch.BCJD77bD.js";
import { x as h } from "../chunks/lit-element.jLBm65_O.js";
import { r as p } from "../chunks/state.CSDxrqLd.js";
import { e as C } from "../chunks/query.BBf1UFkC.js";
import { o as d } from "../chunks/if-defined.BRoBj_Rp.js";
import { c as B } from "../chunks/repeat.DbF2p5ae.js";
import { n as m } from "../chunks/when.Dr1es41R.js";
import { b as S, a as E } from "../chunks/_baseUniq.BUihBa8c.js";
function T(i, r) {
  return i && i.length ? S(i, E(r)) : [];
}
var D = Object.defineProperty, z = Object.getOwnPropertyDescriptor, e = (i, r, s, n) => {
  for (var a = n > 1 ? void 0 : n ? z(r, s) : r, u = i.length - 1, c; u >= 0; u--)
    (c = i[u]) && (a = (n ? c(r, s, a) : c(a)) || a);
  return n && a && D(r, s, a), a;
};
let t = class extends v {
  constructor() {
    super(...arguments), this.localize = new w(this), this.name = "", this.value = "", this.size = "medium", this.placeholder = "", this.allowFreetext = !1, this.multiple = !1, this.maxOptionsVisible = 3, this.disabled = !1, this.clearable = !1, this.open = !1, this.hoist = !1, this.freeWidth = !1, this.autosizePadding = 10, this.filled = !1, this.pill = !1, this.label = "", this.placement = "bottom", this.helpText = "", this.form = "", this.required = !1, this.useTag = !1, this.inputBehavior = "filter", this.getOptionValue = (i) => !i || !(i instanceof l) ? "" : typeof i.value == "string" ? i.value : "", this.setOptionCurrent = (i, r) => {
      if (i instanceof l) {
        if (r === void 0) {
          i.current = !i.current;
          return;
        }
        i.current = r;
      }
    }, this.setOptionSelected = (i, r) => {
      if (!(!(i instanceof l) || i.getAttribute("role") !== "option")) {
        if (r === void 0) {
          i.selected = !i.selected;
          return;
        }
        i.selected = r, r && this.selectEl.setCurrentOption(i);
      }
    }, this.stayOpenOnSelect = !1, this.forceOnChange = !1, this.allowDefaultMouseDown = !1, this.useSearchTerm = !1, this.noSelectOnEnter = !1, this.noResetCurrent = !1, this.iconName = "", this.noDropdown = !1, this.noDropdownOnEmpty = !1, this.noFlip = !1, this.customChangeEvent = "", this.options = [], this.start = 0, this.searchTerm = "", this.hasMore = !1, this.loading = !1;
  }
  createRenderRoot() {
    return this;
  }
  async fetchOptions(i = !1) {
    if (this.api)
      try {
        this.loading = !0;
        const r = await this.api({
          searchTerm: this.searchTerm,
          start: this.start
        });
        if (i ? this.options = r.data : this.options = T([...this.options, ...r.data], "value"), this.hasMore = r.hasMore, await this.updateComplete, this.selectEl) {
          let s;
          this.multiple ? s = this.value?.trim() ? this.value.trim().split(/\s+/) : [] : s = this.value, this.selectEl.value = s;
        }
      } catch {
        this.options = [];
      } finally {
        this.loading = !1;
      }
  }
  async handleStartChange() {
    await this.updateComplete, this.api ? await this.fetchOptions() : this.options = [];
  }
  async handleSearchTermChange() {
    this.api ? (this.start = 0, await this.updateComplete, await this.fetchOptions(!0)) : this.options = [];
  }
  handleInputChange(i) {
    const { value: r } = i.target.displayInput;
    this.searchTerm = r, this.selectEl.getOptionLabel = (s) => !s || !(s instanceof l) ? r : s.getTextLabel() || r;
  }
  handleLoadMore() {
    this.start += 10;
  }
  handleCustomChange(i) {
    if (!i.target)
      return;
    const r = i.target, s = this.options.find(
      (n) => n.value === r.value
    );
    s && this.emit(this.customChangeEvent, {
      detail: s
    });
  }
  render() {
    const i = this.noDropdown || this.noDropdownOnEmpty && !this.options.length;
    return h`<cx-select ?allow-freetext=${this.allowFreetext} auto-size-padding=${this.autosizePadding} ?clearable=${this.clearable} data-id=${d(this.dataset.id || void 0)} data-label=${d(this.dataset.label || void 0)} ?disabled=${this.disabled} ?filled=${this.filled} ?force-on-change=${this.forceOnChange} form=${this.form} .syncElement=${this.syncElement} ?free-width=${this.freeWidth} .getOptionValue=${this.getOptionValue} .setOptionCurrent=${this.setOptionCurrent} .setOptionSelected=${this.setOptionSelected} help-text=${this.helpText} ?hoist=${this.hoist} input-behavior=${this.inputBehavior} label=${this.label} max-options-visible=${this.maxOptionsVisible} name=${this.name} ?multiple=${this.multiple} ?open=${this.open} ?pill=${this.pill} placeholder=${this.placeholder} ?required=${this.required} size=${this.size} ?stay-open-on-select=${this.stayOpenOnSelect} ?no-flip=${this.noFlip} ?use-tag=${this.useTag} value=${this.value} @input=${this.useSearchTerm ? this.handleInputChange : void 0} ?no-reset-current=${this.noResetCurrent} ?no-select-on-enter=${this.noSelectOnEnter} ?no-dropdown=${i} ?loading=${this.loading} ?allow-default-mouse-down=${this.allowDefaultMouseDown} @cx-change=${this.customChangeEvent ? this.handleCustomChange : void 0}>${m(this.iconName, () => h`<cx-icon-button class="icon-button" tabindex="-1" label=${this.localize.term("search")} name=${this.iconName} slot="prefix"></cx-icon-button>`)}
        ${B(
      this.options,
      (r) => r.value ?? "",
      (r) => h`<cx-option value=${r.value ?? ""} ?disabled=${r.disabled} show-check check-placement=${g.Right}>${r.label ?? r.value ?? ""}</cx-option>`
    )}
        ${m(
      this.hasMore,
      () => h`<cx-option value="load-more" class="tree-item__actions"><cx-button variant="text" ?loading=${this.loading} @click=${this.handleLoadMore}>${this.localize.term("more")}</cx-button></cx-option>`
    )}</cx-select>`;
  }
};
t.dependencies = {
  "cx-button": y,
  "cx-icon-button": b,
  "cx-option": l,
  "cx-select": $
};
e([
  C("cx-select")
], t.prototype, "selectEl", 2);
e([
  o()
], t.prototype, "name", 2);
e([
  o({ reflect: !0, type: String })
], t.prototype, "value", 2);
e([
  o({ reflect: !0 })
], t.prototype, "size", 2);
e([
  o()
], t.prototype, "placeholder", 2);
e([
  o({ attribute: "allow-freetext", reflect: !0, type: Boolean })
], t.prototype, "allowFreetext", 2);
e([
  o({ reflect: !0, type: Boolean })
], t.prototype, "multiple", 2);
e([
  o({ attribute: "max-options-visible", type: Number })
], t.prototype, "maxOptionsVisible", 2);
e([
  o({ reflect: !0, type: Boolean })
], t.prototype, "disabled", 2);
e([
  o({ type: Boolean })
], t.prototype, "clearable", 2);
e([
  o({ reflect: !0, type: Boolean })
], t.prototype, "open", 2);
e([
  o({ type: Boolean })
], t.prototype, "hoist", 2);
e([
  o({ attribute: "sync-element" })
], t.prototype, "syncElement", 2);
e([
  o({ attribute: "free-width", reflect: !0, type: Boolean })
], t.prototype, "freeWidth", 2);
e([
  o({ attribute: "auto-size-padding", type: Number })
], t.prototype, "autosizePadding", 2);
e([
  o({ reflect: !0, type: Boolean })
], t.prototype, "filled", 2);
e([
  o({ reflect: !0, type: Boolean })
], t.prototype, "pill", 2);
e([
  o()
], t.prototype, "label", 2);
e([
  o({ reflect: !0 })
], t.prototype, "placement", 2);
e([
  o({ attribute: "help-text" })
], t.prototype, "helpText", 2);
e([
  o({ reflect: !0 })
], t.prototype, "form", 2);
e([
  o({ reflect: !0, type: Boolean })
], t.prototype, "required", 2);
e([
  o({ attribute: "use-tag", reflect: !0, type: Boolean })
], t.prototype, "useTag", 2);
e([
  o({ attribute: "input-behavior" })
], t.prototype, "inputBehavior", 2);
e([
  o({ attribute: "get-option-value" })
], t.prototype, "getOptionValue", 2);
e([
  o({ attribute: "set-option-current" })
], t.prototype, "setOptionCurrent", 2);
e([
  o({ attribute: "set-option-selected" })
], t.prototype, "setOptionSelected", 2);
e([
  o({ attribute: "stay-open-on-select", type: Boolean })
], t.prototype, "stayOpenOnSelect", 2);
e([
  o({ attribute: "force-on-change", type: Boolean })
], t.prototype, "forceOnChange", 2);
e([
  o({ attribute: "allow-default-mouse-down", type: Boolean })
], t.prototype, "allowDefaultMouseDown", 2);
e([
  o({ attribute: "api", type: Function })
], t.prototype, "api", 2);
e([
  o({ attribute: "use-search-term", reflect: !0, type: Boolean })
], t.prototype, "useSearchTerm", 2);
e([
  o({
    attribute: "no-select-on-enter",
    reflect: !0,
    type: Boolean
  })
], t.prototype, "noSelectOnEnter", 2);
e([
  o({
    attribute: "no-reset-current",
    reflect: !0,
    type: Boolean
  })
], t.prototype, "noResetCurrent", 2);
e([
  o({ attribute: "icon-name", reflect: !0, type: String })
], t.prototype, "iconName", 2);
e([
  o({
    attribute: "no-dropdown",
    reflect: !0,
    type: Boolean
  })
], t.prototype, "noDropdown", 2);
e([
  o({
    attribute: "no-dropdown-on-empty",
    reflect: !0,
    type: Boolean
  })
], t.prototype, "noDropdownOnEmpty", 2);
e([
  o({ attribute: "no-flip", reflect: !0, type: Boolean })
], t.prototype, "noFlip", 2);
e([
  o({ attribute: "custom-change-event", type: String })
], t.prototype, "customChangeEvent", 2);
e([
  p()
], t.prototype, "options", 2);
e([
  p()
], t.prototype, "start", 2);
e([
  p()
], t.prototype, "searchTerm", 2);
e([
  p()
], t.prototype, "hasMore", 2);
e([
  p()
], t.prototype, "loading", 2);
e([
  O(200)
], t.prototype, "fetchOptions", 1);
e([
  f("api"),
  f("start", { waitUntilFirstUpdate: !0 })
], t.prototype, "handleStartChange", 1);
e([
  f("searchTerm", { waitUntilFirstUpdate: !0 })
], t.prototype, "handleSearchTermChange", 1);
t = e([
  x("cx-dynamic-select")
], t);
export {
  t as default
};
