import { r as p, c as m, h as o, H as b, g as f } from "./index.61732cef.js";
import { a as g, c as v, o as y } from "./floating-ui.dom-CLsTbQHn.fe95e3a6.js";
import { c as w } from "./index-orsBiyT_.fc4357c3.js";
import { d as S } from "./utils-CCck-DTo.e4e43b6a.js";
import "react";
import "react-dom";
const x = () => ".sc-swirl-autocomplete-h{display:block}.sc-swirl-autocomplete-h *.sc-swirl-autocomplete{box-sizing:border-box}.autocomplete--inactive.sc-swirl-autocomplete .autocomplete__listbox-container.sc-swirl-autocomplete{display:none}.autocomplete__listbox-container.sc-swirl-autocomplete{position:fixed;z-index:var(--s-z-40);overflow-x:hidden;overflow-y:auto;max-height:18rem;padding-top:var(--s-space-8);padding-bottom:var(--s-space-8);border-radius:var(--s-border-radius-sm);background:var(--s-translucent-low-default);-webkit-backdrop-filter:blur(var(--s-blur-l));backdrop-filter:blur(var(--s-blur-l));animation:autocomplete-enter 0.1s;box-shadow:var(--s-shadow-level-1)}.autocomplete__listbox-container.sc-swirl-autocomplete:empty{display:none}.autocomplete__spinner.sc-swirl-autocomplete{display:flex;padding:var(--s-space-16);justify-content:center;align-items:center}.autocomplete__multi-select-tags.sc-swirl-autocomplete{margin-top:var(--swirl-autocomplete-tags-margin-top);margin-bottom:var(--s-space-4)}@keyframes autocomplete-enter{from{opacity:0}to{opacity:1}}", A = class {
  constructor(i) {
    p(this, i), this.valueChange = m(this, "valueChange", 7), this.clearable = !0, this.clearButtonLabel = "Clear input", this.generateSuggestions = async () => [], this.menuLabel = "Suggestions", this.active = !1, this.loading = !1, this.suggestions = [], this.onChange = (t) => {
      t.stopPropagation(), this.updateTerm(t);
    }, this.updateTerm = S(async (t) => {
      this.updateSuggestions(t.detail), this.open(), !this.multiSelect && (!Boolean(t.detail) || t.detail === "") && (this.value = void 0, this.valueChange.emit(this.value));
    }, 250, !1), this.onSelect = async (t) => {
      if (t.stopPropagation(), this.multiSelect) {
        const s = t.detail, n = this.suggestions.filter((l) => !s.includes(l.id)).map((l) => l.id);
        this.value = [
          ...this.value.filter((l) => !n.includes(l.id)),
          ...this.suggestions.filter((l) => s.includes(l.id) && !this.value.some((r) => r.id === l.id))
        ], this.valueChange.emit(this.value), this.inputEl.value = "";
        const a = this.inputEl.querySelector("input");
        Boolean(a) && (a.value = "", queueMicrotask(() => {
          a.focus(), this.close();
        }), this.updateSuggestions(a.value));
      } else if (Boolean(t.detail[0])) {
        const s = t.detail[0], n = this.suggestions.find((a) => a.id === s);
        if (!Boolean(n))
          return;
        this.value = n, this.valueChange.emit(this.value), queueMicrotask(() => {
          var a;
          (a = this.inputEl.querySelector("input")) == null || a.focus(), this.close();
        });
      }
    }, this.onRemoveValue = (t) => {
      !Array.isArray(this.value) || (this.value = this.value.filter((s) => s.id !== t), this.valueChange.emit(this.value));
    }, this.onFocusOut = (t) => {
      const s = t.relatedTarget;
      Boolean(s) && !this.el.contains(s) && this.close();
    }, this.onFocus = () => {
      this.updateSuggestions(), this.open();
    }, this.onKeyDown = (t) => {
      t.code === "Escape" && (t.preventDefault(), t.stopPropagation(), this.inputEl.querySelector("input").focus(), this.close());
    }, this.onInputKeyDown = (t) => {
      var s, n;
      t.code === "ArrowDown" && (t.preventDefault(), (n = (s = this.listboxEl.querySelector('[role="listbox"]')) == null ? void 0 : s.querySelector('[tabIndex="0"]')) == null || n.focus());
    };
  }
  componentWillLoad() {
    const i = document.querySelectorAll("swirl-datepicker").length;
    this.id = `autocomplete-${i}`, this.handleInitialValue();
  }
  onWindowClick(i) {
    const t = i.target;
    this.el.contains(t) || this.close();
  }
  watchMultiSelect() {
    this.handleInitialValue();
  }
  async close() {
    var t;
    if (!this.active)
      return;
    this.disableAutoUpdate && this.disableAutoUpdate();
    const i = this.inputEl.querySelector("input");
    Boolean(i) && (this.multiSelect ? i.value = "" : i.value = ((t = this.value) == null ? void 0 : t.label) || ""), this.active = !1;
  }
  async open() {
    this.active || (this.active = !0, requestAnimationFrame(async () => {
      await this.reposition(), this.disableAutoUpdate && this.disableAutoUpdate(), this.disableAutoUpdate = g(this.inputEl, this.listboxContainerEl, this.reposition.bind(this), { animationFrame: !0 }), this.listboxContainerEl.scrollTop = 0, this.updateSuggestions(this.inputEl.querySelector("input").value);
    }));
  }
  async reposition() {
    !Boolean(this.listboxContainerEl) || (this.position = await v(this.inputEl, this.listboxContainerEl, {
      middleware: [y({ crossAxis: -16, mainAxis: 16 })],
      placement: "bottom-start",
      strategy: "fixed"
    }));
  }
  async updateSuggestions(i) {
    this.loading = !0, this.suggestions = [], this.suggestions = await this.generateSuggestions(i), this.loading = !1;
  }
  handleInitialValue() {
    this.multiSelect && !Array.isArray(this.value) && (this.value = []), !this.multiSelect && Array.isArray(this.value) && (this.value = void 0);
  }
  render() {
    var l, r, u, c;
    const i = `${this.id}-suggestions`, t = this.clearable && !this.multiSelect, s = this.multiSelect ? this.value.map((e) => e.id) : Boolean(this.value) ? [this.value.id] : [], n = this.multiSelect ? void 0 : ((l = this.value) == null ? void 0 : l.label) || "", a = w("autocomplete", {
      "autocomplete--inactive": !this.active
    });
    return o(b, { key: "bf076ad2e3840ef8bd57153c90107d3df1a806ad" }, o("div", { key: "d5a5988e04aab0d702c0dee903d784dc69101933", class: a, onKeyDown: this.onKeyDown }, this.multiSelect && Array.isArray(this.value) && this.value.length > 0 && o("div", { key: "c0032b03256dc5c88fc38236599fbbd8cdae96df", class: "autocomplete__multi-select-tags" }, o("swirl-stack", { key: "1d4b148a2273271571b6e05455cd113ef7c1656e", orientation: "horizontal", spacing: "8", wrap: !0 }, this.value.map((e) => o("swirl-tag", {
      key: e.id,
      label: e.label,
      onRemove: () => this.onRemoveValue(e.id),
      removable: !this.disabled
    })))), o("swirl-text-input", { key: "f40bd864adb81e66ae73ce79f54bd6f4b0d1312e", autoSelect: this.autoSelect, class: "autocomplete__input", clearable: t, clearButtonLabel: this.clearButtonLabel, disabled: this.disabled, disableDynamicWidth: !0, id: this.id, inline: this.inline, invalid: this.invalid, onInputFocus: this.onFocus, onKeyDown: this.onInputKeyDown, onValueChange: this.onChange, maxLength: this.maxLength, mode: this.mode, placeholder: this.placeholder, ref: (e) => this.inputEl = e, required: this.required, spellCheck: this.spellCheck, swirlAriaAutocomplete: "list", swirlAriaControls: i, swirlAriaDescribedby: this.swirlAriaDescribedby, swirlAriaExpanded: String(this.active), swirlRole: "combobox", value: n }), o("div", { key: "1f1ee304b4fdfacc9f582f1b7c85bd7359841895", class: "autocomplete__listbox-container", onFocusout: this.onFocusOut, ref: (e) => this.listboxContainerEl = e, style: {
      top: Boolean(this.position) ? `${(r = this.position) == null ? void 0 : r.y}px` : "",
      left: Boolean(this.position) ? `${(u = this.position) == null ? void 0 : u.x}px` : "",
      width: `${((c = this.inputEl) == null ? void 0 : c.getBoundingClientRect().width) + 32}px`
    } }, this.loading && o("div", { key: "e163af35f06c0d4c8be7ffbccfad83138a6677bd", class: "autocomplete__spinner" }, o("swirl-spinner", { key: "252d6a9ba7c4f035e06d79d400d5d63db342a4ec" })), this.suggestions.length > 0 && o("swirl-option-list", { key: "4e2360c358a4c639812821f753dbcdf5d723bb60", allowDeselect: this.multiSelect === !0, label: this.menuLabel, multiSelect: this.multiSelect, onValueChange: this.onSelect, optionListId: i, ref: (e) => this.listboxEl = e, value: s }, this.suggestions.map((e) => {
      var h;
      return o("swirl-option-list-item", { selected: Array.isArray(this.value) ? this.value.some((d) => d.id === e.id) : ((h = this.value) == null ? void 0 : h.id) === e.id, key: e.id, disabled: e.disabled, label: e.label, value: e.id });
    })))));
  }
  get el() {
    return f(this);
  }
  static get watchers() {
    return {
      multiSelect: [{
        watchMultiSelect: 0
      }]
    };
  }
};
A.style = x();
export {
  A as swirl_autocomplete
};
