import w from "./line-clamp.js";
import { C } from "../chunks/typography.DJC_UXgs.js";
import { n as a, C as S } from "../chunks/lib-cortex-element.CVMmyPMC.js";
import { c as k } from "../chunks/component.styles.CRO4Odto.js";
import { f as D } from "../chunks/form-control.styles.CaGWmeAS.js";
import { s as x, a as y } from "../chunks/animate.El-MpOws.js";
import { c as z } from "../chunks/custom-element.L4WJXn1j.js";
import { d as L } from "../chunks/default-value.COZopaet.js";
import { w as v } from "../chunks/event.mFzZi4sr.js";
import { F as $ } from "../chunks/form.Ch1cwYzO.js";
import { L as I } from "../chunks/i18n.BABe9hN4.js";
import { s as F } from "../chunks/scroll.xtO5yojm.js";
import { H as V } from "../chunks/slot.j5oheLJC.js";
import { i as E } from "../chunks/user-agent.D9aPuOyL.js";
import { w as p } from "../chunks/watch.BCJD77bD.js";
import { i as T, x as u, E as B } from "../chunks/lit-element.jLBm65_O.js";
import { r as g } from "../chunks/state.CSDxrqLd.js";
import { e as m } from "../chunks/query.BBf1UFkC.js";
import { e as b } from "../chunks/class-map.BiVq-cVR.js";
import { o as A } from "../chunks/unsafe-html.Dff7-rCx.js";
import { n as f } from "../chunks/when.Dr1es41R.js";
import { s as O, g as _ } from "../chunks/animation-registry.HmpwNuGH.js";
import P from "./icon.js";
import { C as d } from "../chunks/option.DGXQzdtb.js";
import U from "./popup.js";
import M from "./spinner.js";
import N from "./tag.js";
const R = (t) => !(document.createElement(t.tagName).constructor === HTMLElement || customElements.get(t.tagName.toLowerCase())), W = T`:host{display:block}:host([data-user-invalid])::part(combobox){border-color:var(--cx-input-invalid-border-color)}:host([data-user-invalid]:focus-within)::part(combobox){border-color:var(--cx-input-invalid-border-color);box-shadow:var(--cx-input-invalid-shadow)}.select{vertical-align:middle;flex:auto;width:100%;display:inline-flex;position:relative}.select::part(popup){z-index:var(--cx-z-index-dropdown)}.select[data-current-placement^=top]::part(popup){transform-origin:bottom}.select[data-current-placement^=bottom]::part(popup){transform-origin:top}.select__combobox{font-family:var(--cx-input-font-family);font-weight:var(--cx-input-font-weight);letter-spacing:var(--cx-input-letter-spacing);vertical-align:middle;cursor:pointer;transition:var(--cx-transition-fast) color, var(--cx-transition-fast) border, var(--cx-transition-fast) box-shadow, var(--cx-transition-fast) background-color;flex:1;justify-content:start;align-items:center;width:20ch;min-width:0;display:flex;position:relative;overflow:hidden}.select__display-input{width:100%;font:inherit;color:var(--cx-input-color);cursor:inherit;-webkit-appearance:none;text-overflow:ellipsis;background:0 0;border:none;margin:0;padding:0;transition:padding-top .2s ease-in-out;position:relative;overflow:hidden}:host([allow-freetext]) .input-container,:host([allow-freetext]) .select__display-input{cursor:text}:host([allow-freetext]) .select--disabled .input-container,:host([allow-freetext]) .select--disabled .select__display-input{cursor:default}.select__tags+.select__display-input{padding-top:var(--cx-spacing-2x-small)}.select__display-input--small{line-height:var(--cx-line-height-small)}.select__display-input--medium{line-height:var(--cx-line-height-medium)}.select__display-input--large{line-height:var(--cx-line-height-large)}.select__display-input--hidden{visibility:hidden;height:0;padding-top:0!important}.form-control--has-label .select__display-input{padding-top:var(--cx-spacing-x-small);padding-bottom:var(--cx-spacing-2x-small)}.select__display-input::placeholder{color:var(--cx-input-placeholder-color)}.select:not(.select--disabled):hover .select__display-input{color:var(--cx-input-color-hover)}.select:not(.select--disabled):hover .select__combobox{border-color:var(--cx-input-border-color-hover)}.select__display-input:focus{outline:none}.select__value-input{opacity:0;z-index:-1;width:100%;height:100%;margin:0;padding:0;position:absolute;top:0;left:0}.select__tags{flex-wrap:wrap;align-items:center;max-width:100%;display:flex}.form-control--has-label .select__tags{margin-top:var(--cx-spacing-x-small)}.select--small:not(.select--placeholder-visible) .select__tags,.select--medium:not(.select--placeholder-visible) .select__tags,.select--large:not(.select--placeholder-visible) .select__tags{min-height:var(--cx-line-height-medium)}.select__tags::slotted(cx-tag){cursor:pointer!important}.select--disabled .select__tags,.select--disabled .select__tags::slotted(cx-tag){cursor:default!important}.select__tag-wrapper{line-height:1}.select--standard .select__combobox{background-color:var(--cx-input-background-color);border:solid var(--cx-input-border-width) var(--cx-input-border-color)}.select--standard.select--disabled .select__combobox{background-color:var(--cx-input-background-color-disabled);border-color:var(--cx-input-border-color-disabled);color:var(--cx-input-color-disabled);opacity:.5;cursor:default;outline:none}.select--standard:not(.select--disabled).select--open .select__combobox,.select--standard:not(.select--disabled).select--focused .select__combobox{background-color:var(--cx-input-background-color-focus);border-color:var(--cx-input-border-color-focus)}.select--filled .select__combobox{background-color:var(--cx-input-filled-background-color);color:var(--cx-input-color);border:none}.select--filled:hover:not(.select--disabled) .select__combobox{background-color:var(--cx-input-filled-background-color-hover)}.select--filled.select--disabled .select__combobox{background-color:var(--cx-input-filled-background-color-disabled);opacity:.5;cursor:default}.select--filled:not(.select--disabled).select--open .select__combobox,.select--filled:not(.select--disabled).select--focused .select__combobox{background-color:var(--cx-input-filled-background-color-focus);outline:var(--cx-focus-ring)}.select--small .select__combobox{border-radius:var(--cx-input-border-radius-small);font-size:var(--cx-input-font-size-small);min-height:var(--cx-input-height-small);padding-block:0;padding-inline:var(--cx-input-spacing-small)}.form-control:not(.form-control--has-label) .select--small.select--multiple .select__combobox{padding-block:2px}.form-control:not(.form-control--has-label) .select--multiple .select__display-input{margin-top:0}.form-control:not(.form-control--has-label) .input-container{justify-content:center}.form-control:not(.form-control--has-label) .input-container .select__display-input{margin-top:0}.select--small .select__clear{margin-inline-start:var(--cx-input-spacing-small)}.select--small .select__prefix::slotted(*){margin-inline-end:var(--cx-input-spacing-small)}.select--small .select__tags{gap:2px}.select--medium .select__combobox{border-radius:var(--cx-input-border-radius-medium);font-size:var(--cx-input-font-size-small);min-height:var(--cx-input-height-medium);padding-block:0;padding-inline:var(--cx-input-spacing-medium)}.form-control:not(.form-control--has-label) .select--medium.select--multiple .select__combobox{padding-block:3px}.select--medium .select__clear{margin-inline-start:var(--cx-input-spacing-medium)}.select--medium .select__prefix::slotted(*){margin-inline-end:var(--cx-input-spacing-medium)}.select--medium .select__tags{gap:3px}.select--large .select__combobox{border-radius:var(--cx-input-border-radius-large);font-size:var(--cx-input-font-size-small);min-height:var(--cx-input-height-large);padding-block:0;padding-inline:var(--cx-input-spacing-large)}.form-control:not(.form-control--has-label) .select--large.select--multiple .select__combobox{padding-block:4px}.select--large .select__clear{margin-inline-start:var(--cx-input-spacing-large)}.select--large .select__prefix::slotted(*){margin-inline-end:var(--cx-input-spacing-large)}.select--large .select__tags{gap:4px}.select--pill.select--small .select__combobox{border-radius:var(--cx-input-height-small)}.select--pill.select--medium .select__combobox{border-radius:var(--cx-input-height-medium)}.select--pill.select--large .select__combobox{border-radius:var(--cx-input-height-large)}.select__prefix,.select__suffix{color:var(--cx-input-placeholder-color);flex:0;align-items:center;display:inline-flex}.select__clear{font-size:inherit;color:var(--cx-input-icon-color);transition:var(--cx-transition-fast) color;cursor:pointer;z-index:1;background:0 0;border:none;justify-content:center;align-items:center;padding:0;display:inline-flex}.select__clear:hover{color:var(--cx-input-icon-color-hover)}.select__clear:focus{outline:none}.select__expand-icon{transition:var(--cx-transition-medium) rotate ease;rotate:0;font-size:var(--cx-font-size-large);flex:none;align-items:center;margin-inline-start:var(--cx-spacing-small);display:flex}.select--open .select__expand-icon{rotate:-180deg}.select__listbox{font-family:var(--cx-font-sans);font-size:var(--cx-font-size-medium);font-weight:var(--cx-font-weight-regular);box-shadow:var(--cx-shadow-large);background:var(--cx-panel-background-color);border:solid var(--cx-panel-border-width) var(--cx-panel-border-color);border-radius:var(--cx-border-radius-large);padding-block:var(--cx-spacing-x-small);overscroll-behavior:none;max-width:var(--auto-size-available-width);max-height:var(--auto-size-available-height);padding-inline:0;display:block;position:relative;overflow:auto}.select__listbox ::slotted(cx-divider){--spacing:var(--cx-spacing-x-small)}.select__listbox ::slotted(small){font-size:var(--cx-font-size-small);color:var(--cx-color-neutral-500);padding-block:var(--cx-spacing-2x-small);padding-inline:var(--cx-spacing-small);display:block}.select__no-options{font-size:var(--cx-font-size-small);color:var(--cx-color-neutral-500);padding-block:var(--cx-spacing-2x-small);padding-inline:var(--cx-spacing-small);text-align:left;cursor:default;user-select:none;display:block}.input-container{flex-direction:column;flex:1;align-self:stretch;width:0;display:inline-flex;position:relative}.input-container__display-value{column-gap:var(--cx-spacing-small);row-gap:var(--cx-spacing-3x-small);flex-flow:wrap;width:100%;height:100%;display:flex}.form-control__label{pointer-events:none;width:fit-content;line-height:1;-webkit-transition:transform .2s ease-in-out;-moz-transition:transform .2s ease-in-out;transition:transform .2s ease-in-out;position:relative}.select--small .form-control__label{transform:translateY(calc(( var(--cx-input-height-small) + 1.25rem - var(--cx-input-font-size-small) ) / 2));margin:0}.select--medium .form-control__label{transform:translateY(calc(( var(--cx-input-height-medium) / 2 + 1rem - var(--cx-input-font-size-medium) )));margin:0}.select--large .form-control__label{transform:translateY(calc(( var(--cx-input-height-large) + 1rem - var(--cx-input-font-size-large) ) / 2));margin:0}.form-control--has-label .select--small{min-height:calc(var(--cx-input-height-small) + 1rem)}.form-control--has-label .select--medium{min-height:calc(var(--cx-input-height-medium) + 1rem)}.form-control--has-label .select--large{min-height:calc(var(--cx-input-height-large) + 1rem)}.form-control--has-label .select--focused .form-control__label,.form-control--has-label .select--placeholder-visible .form-control__label,.form-control--has-label .select:not(.select--empty) .form-control__label{transform:translateY(calc(var(--cx-spacing-2x-small) + var(--cx-spacing-3x-small)))}.select__listbox slot{flex-direction:column;display:flex}:host([data-cx-input-group__input--first]:not([data-cx-input-group__input--last])) .select__combobox{border-start-end-radius:0;border-end-end-radius:0}:host([data-cx-input-group__input--inner]) .select__combobox{border-radius:0}:host([data-cx-input-group__input--last]:not([data-cx-input-group__input--first])) .select__combobox{border-start-start-radius:0;border-end-start-radius:0}:host([data-cx-input-group__input]:not([data-cx-input-group__input--first])){margin-inline-start:calc(-1 * var(--cx-input-border-width))}:host([data-cx-input-group__input--hover]){z-index:1}:host([data-cx-input-group__input--focus]),:host([data-cx-input-group__input][checked]){z-index:2}`;
var H = Object.defineProperty, q = Object.getOwnPropertyDescriptor, o = (t, e, l, n) => {
  for (var s = n > 1 ? void 0 : n ? q(e, l) : e, r = t.length - 1, c; r >= 0; r--)
    (c = t[r]) && (s = (n ? c(e, l, s) : c(s)) || s);
  return n && s && H(e, l, s), s;
};
let i = class extends S {
  constructor() {
    super(...arguments), this.formControlController = new $(this, {
      assumeInteractionOn: ["cx-input"]
    }), this.hasSlotController = new V(
      this,
      "help-text",
      "label"
    ), this.localize = new I(this), this.typeToSelectString = "", this.hasFocus = !1, this.displayLabel = "", this.selectedOptions = [], this.name = "", this.value = "", this.fallbackOptionValue = "", this.defaultValue = "", 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.noFlip = !1, this.freeWidth = !1, this.autosizePadding = 10, this.filled = !1, this.pill = !1, this.label = "", this.placement = "bottom", this.helpText = "", this.form = void 0, this.required = !1, this.useTag = !1, this.noSelectOnEnter = !1, this.noResetCurrent = !1, this.noDropdown = !1, this.loading = !1, this.getTag = (t) => {
      const e = this.hasSlotController.test("label"), n = (this.label ? !0 : !!e) ? this.size === "large" ? "medium" : "small" : this.size, s = (r) => {
        this.handleTagRemove(r, t);
      };
      return u`<cx-tag part="tag" exportparts="
              base:tag__base,
              content:tag__content,
              remove-button:tag__remove-button,
              remove-button__base:tag__remove-button__base
            " ?pill=${this.pill} size=${n} ?removable=${this.multiple} @cx-remove=${s}><cx-line-clamp lines="1">${this.getOptionLabel(t)}</cx-line-clamp></cx-tag>`;
    }, this.inputBehavior = "filter", this.getOptionValue = (t) => !t || !(t instanceof d) ? "" : t.value, this.getOptionLabel = (t) => !t || !(t instanceof d) ? "" : t.getTextLabel(), this.getOptionSelected = (t) => {
      if (!(!t || !(t instanceof d)))
        return t.selected;
    }, this.getOptionDisabled = (t) => {
      if (!(!t || !(t instanceof d)))
        return t.disabled;
    }, this.stayOpenOnSelect = !1, this.forceOnChange = !1, this.allowDefaultMouseDown = !1, this.noOptionText = "", this.handleDocumentFocusIn = (t) => {
      const e = t.composedPath();
      this && !e.includes(this) && !this.stayOpenOnSelect && this.hide();
    }, this.handleDocumentKeyDown = (t) => {
      const e = t.target, l = e.closest(".select__clear") !== null, n = e.closest("cx-icon-button") !== null;
      if (!(l || n)) {
        if (t.key === "Escape" && this.open && !this.closeWatcher) {
          (this.shouldShowNoOptionsMessage || this.getVisibleOptions().length > 0) && t.stopPropagation(), t.preventDefault(), this.hide(), this.displayInput.focus({ preventScroll: !0 });
          return;
        }
        if (t.key === "Enter") {
          if (t.preventDefault(), t.stopImmediatePropagation(), this.emit("cx-enter", {
            detail: {
              value: this.displayInput.value
            }
          }), !this.open) {
            this.show();
            return;
          }
          if (this.currentOption && !this.getOptionDisabled(this.currentOption)) {
            if (!this.noSelectOnEnter) {
              if (this.multiple)
                switch (this.toggleOptionSelection(this.currentOption), this.displayLabel = "", this.displayInput.value = "", this.typeToSelectString = "", this.inputBehavior) {
                  case "filter": {
                    this.filterOptionsByInput();
                    break;
                  }
                  case "select":
                    this.selectOptionByInput();
                }
              else
                this.setSelectedOptions(this.currentOption);
              this.updateComplete.then(() => {
                this.emit("cx-input"), this.emit("cx-change");
              });
            }
            !this.multiple && !this.stayOpenOnSelect && (this.hide(), this.displayInput.focus({ preventScroll: !0 }));
          }
          return;
        }
        if (["ArrowUp", "ArrowDown", "Home", "End"].includes(t.key)) {
          const s = this.getAllOptions().filter((h) => this.inputBehavior === "filter" ? !h.hidden : !0), r = this.currentOption ? s.indexOf(this.currentOption) : -1;
          let c = Math.max(0, r);
          if (t.preventDefault(), !this.open && (this.show(), this.currentOption))
            return;
          t.key === "ArrowDown" ? (c = r + 1, c > s.length - 1 && (c = 0)) : t.key === "ArrowUp" ? (c = r - 1, c < 0 && (c = s.length - 1)) : t.key === "Home" ? c = 0 : t.key === "End" && (c = s.length - 1), this.setCurrentOption(s[c]);
        }
      }
    }, this.handleDocumentMouseDown = (t) => {
      const e = t.composedPath();
      this && !e.includes(this) && !this.stayOpenOnSelect && this.hide();
    };
  }
  /**
   * Gets whether to show the no options message
   */
  get shouldShowNoOptionsMessage() {
    return !!this.noOptionText && this.getVisibleOptions().length === 0;
  }
  /**
   * Gets the validity state object
   */
  get validity() {
    return this.valueInput.validity;
  }
  /**
   * Gets the validation message
   */
  get validationMessage() {
    return this.valueInput.validationMessage;
  }
  // #region Overridable methods
  /**
   *
   * @param option The option to update the selected state
   * @param selected If undefined, the option will be toggled. If true, the option will be selected. If false, the option will be unselected.
   * @returns
   */
  setOptionSelected(t, e) {
    if (!(!(t instanceof d) || t.getAttribute("role") !== "option")) {
      if (e === void 0) {
        t.selected = !t.selected;
        return;
      }
      t.selected = e, e && this.setCurrentOption(t);
    }
  }
  /**
   *
   * current = whether the option is currently focused on e.g via keyboard
   * @param option The option to update the current state
   * @param current If undefined, the option will be toggled. If true, the option will be set as current. If false, the option will be unset.
   * @returns
   */
  setOptionCurrent(t, e) {
    if (t instanceof d) {
      if (e === void 0) {
        t.current = !t.current;
        return;
      }
      t.current = e;
    }
  }
  /**
   * For each option, this function is called to determine if the option should be displayed based on the input string
   * @param option
   * @param value The current input string
   * @returns Whether this option should be displayed
   */
  filterCallback(t, e) {
    return this.getOptionLabel(t).toLowerCase().includes(e);
  }
  // #endregion
  connectedCallback() {
    super.connectedCallback(), this.stayOpenOnSelect || (this.open = !1);
  }
  runFirstUpdated() {
    E() && (this.contentEditable = "true");
  }
  addOpenListeners() {
    document.addEventListener(
      "focusin",
      this.handleDocumentFocusIn
    ), document.addEventListener(
      "keydown",
      this.handleDocumentKeyDown
    ), document.addEventListener(
      "mousedown",
      this.handleDocumentMouseDown
    ), this.getRootNode() !== document && this.getRootNode().addEventListener(
      "focusin",
      this.handleDocumentFocusIn
    ), "CloseWatcher" in window && (this.closeWatcher?.destroy(), this.closeWatcher = new CloseWatcher(), this.closeWatcher.onclose = () => {
      this.open && (this.hide(), this.displayInput.focus({ preventScroll: !0 }));
    });
  }
  removeOpenListeners() {
    document.removeEventListener(
      "focusin",
      this.handleDocumentFocusIn
    ), document.removeEventListener(
      "keydown",
      this.handleDocumentKeyDown
    ), document.removeEventListener(
      "mousedown",
      this.handleDocumentMouseDown
    ), this.getRootNode() !== document && this.getRootNode().removeEventListener(
      "focusin",
      this.handleDocumentFocusIn
    ), this.closeWatcher?.destroy();
  }
  handleFocus() {
    this.hasFocus = !0, this.allowFreetext || this.displayInput.setSelectionRange(0, this.displayInput.value.length), this.emit("cx-focus"), setTimeout(() => this.displayInput.focus(), 0);
  }
  handleBlur(t) {
    const e = t.relatedTarget;
    e && this.contains(e) || (this.hasFocus = !1, this.allowFreetext || (this.displayInput.value = this.displayLabel, this.typeToSelectString = ""), this.emit("cx-blur"));
  }
  handleInput(t) {
    if (!this.open && (this.show(), t.data === " "))
      return;
    const e = t.target, l = [
      "ArrowUp",
      "ArrowDown",
      "Enter",
      "Escape",
      "Tab",
      "Home",
      "End"
    ];
    if (!(t.data && l.includes(t.data)))
      switch (this.typeToSelectString = e.value.toLowerCase(), this.displayLabel = e.value, this.emit("cx-input"), this.inputBehavior) {
        case "filter": {
          this.filterOptionsByInput();
          break;
        }
        case "select":
          this.selectOptionByInput();
      }
  }
  handleComboboxMouseDown(t) {
    const e = t.composedPath();
    let l = !1, n = !1;
    e.forEach((s) => {
      if (s instanceof HTMLElement && s.classList.contains("select__expand-icon")) {
        n = !0;
        return;
      }
      s instanceof HTMLElement && s.tagName.toLowerCase() === "cx-icon-button" && (l = !0);
    }), !(this.disabled || l) && (n || this.inputBehavior !== "filter" || !this.open || !this.multiple && !this.useTag ? (this.allowDefaultMouseDown || this.allowFreetext ? requestAnimationFrame(() => {
      this.displayInput.focus({ preventScroll: !0 });
    }) : (t.preventDefault(), this.displayInput.focus({ preventScroll: !0 })), this.open = !this.open) : (this.allowFreetext || t.preventDefault(), this.displayInput.focus({ preventScroll: !0 })));
  }
  handleComboboxKeyDown(t) {
    t.key !== "Tab" && ((t.key !== "Escape" || this.open && (this.shouldShowNoOptionsMessage || this.getVisibleOptions().length > 0)) && t.stopPropagation(), this.handleDocumentKeyDown(t));
  }
  handleClearClick(t) {
    t.stopPropagation(), (this.value !== "" || this.displayLabel !== "") && (this.setSelectedOptions([]), this.displayInput.focus({ preventScroll: !0 }), this.typeToSelectString = "", this.displayLabel = "", this.displayInput.value = "", this.inputBehavior === "filter" && this.filterOptionsByInput(), this.updateComplete.then(() => {
      this.emit("cx-clear"), this.emit("cx-input"), this.emit("cx-change");
    }));
  }
  handleClearMouseDown(t) {
    t.stopPropagation(), t.preventDefault();
  }
  handleOptionClick(t) {
    const l = t.target.closest('[role="option"], cx-option'), n = this.value, s = t.composedPath().some(
      (c) => c?.classList?.contains("tree-item__expand-button")
    ), r = t.composedPath().some(
      (c) => c?.classList?.contains("tree-item__actions")
    );
    l && !this.getOptionDisabled(l) && !s && !r && (this.multiple ? this.toggleOptionSelection(l) : this.setSelectedOptions(l), this.updateComplete.then(
      () => this.displayInput.focus({ preventScroll: !0 })
    ), (this.value !== n || this.forceOnChange) && this.updateComplete.then(() => {
      this.emit("cx-input"), this.emit("cx-change");
    }), !this.multiple && !this.stayOpenOnSelect && (this.hide(), this.displayInput.focus({ preventScroll: !0 })));
  }
  handleDefaultSlotChange() {
    const t = this.getAllOptions(), e = Array.isArray(this.value) ? this.value : [this.value], l = [];
    for (const r of t) {
      const c = this.getOptionValue(r);
      if (!c && !(r instanceof d))
        return;
      l.push(c);
      const h = r.tagName.toLowerCase();
      if (!R(r) && !customElements.get(h)) {
        customElements.whenDefined(h).then(() => this.handleDefaultSlotChange());
        return;
      }
    }
    t.forEach((r) => l.push(this.getOptionValue(r)));
    const { options: n, preserveValue: s } = this.getOptionsForValue(
      e,
      t
    );
    this.setSelectedOptions(n, s ? this.value : void 0);
  }
  handleTagRemove(t, e) {
    t.stopPropagation(), this.disabled || (this.toggleOptionSelection(e, !1), this.updateComplete.then(() => {
      this.emit("cx-input"), this.emit("cx-change");
    }));
  }
  /**
   * Gets an array of all <cx-option> elements
   */
  getAllOptions() {
    return [
      ...this.querySelectorAll('[role="option"], cx-option')
    ];
  }
  /**
   * Gets the first <cx-option> element
   */
  getFirstOption() {
    return this.querySelector("cx-option");
  }
  /**
   * Gets an array of all visible <cx-option> elements
   */
  getVisibleOptions() {
    return this.getAllOptions().filter((t) => !t.hidden);
  }
  /**
   * Resolves selected options for the current value and applies fallback selection
   * when unmatched values exist and `fallbackOptionValue` is configured.
   */
  getOptionsForValue(t, e = this.getAllOptions()) {
    const l = [], n = this.fallbackOptionValue ? e.find(
      (r) => this.getOptionValue(r) === this.fallbackOptionValue
    ) : void 0;
    let s = !1;
    return t.forEach((r) => {
      if (r === "")
        return;
      const c = e.find(
        (h) => this.getOptionValue(h) === r
      );
      c ? l.push(c) : s = !0;
    }), s && n && l.push(n), {
      options: l,
      preserveValue: s && !!n
    };
  }
  /**
   * Sets the current option, which is the option the user is currently interacting with (e.g. via keyboard). Only one
   * option may be "current" at a time.
   */
  setCurrentOption(t) {
    this.getAllOptions().forEach((l) => {
      this.setOptionCurrent(l, !1), l.tabIndex = -1;
    }), t && (this.currentOption = t, this.setOptionCurrent(t, !0), t.tabIndex = 0, t.scrollIntoView({ block: "nearest" }));
  }
  /**
   * Sets the selected option(s)
   */
  setSelectedOptions(t, e) {
    const l = this.getAllOptions(), n = Array.isArray(t) ? t : [t];
    l.forEach((s) => this.setOptionSelected(s, !1)), n.length && n.forEach((s) => this.setOptionSelected(s, !0)), this.selectionChanged(e);
  }
  /**
   * Toggles an option's selected state
   */
  toggleOptionSelection(t, e) {
    this.setOptionSelected(t, e), this.selectionChanged();
  }
  /**
   * This method must be called whenever the selection changes. It will update the selected options cache, the current
   * value, and the display value
   */
  selectionChanged(t) {
    this.selectedOptions = this.getAllOptions().filter(
      (e) => this.getOptionSelected(e)
    ), this.multiple ? (this.value = t ?? this.selectedOptions.map((e) => this.getOptionValue(e)), this.displayLabel = "") : (this.value = t ?? this.getOptionValue(this.selectedOptions[0]) ?? "", this.displayLabel = this.getOptionLabel(this.selectedOptions[0]) ?? ""), this.updateComplete.then(() => {
      this.formControlController.updateValidity();
    });
  }
  get tags() {
    const t = this.hasSlotController.test("label"), l = (this.label ? !0 : !!t) ? this.size === "large" ? "medium" : "small" : this.size;
    return this.selectedOptions.map((n, s) => {
      if (s < this.maxOptionsVisible || this.maxOptionsVisible <= 0) {
        const r = this.getTag(n, s);
        return u`${typeof r == "string" ? A(r) : r}`;
      } else if (s === this.maxOptionsVisible)
        return u`<cx-tag ?pill=${this.pill} size=${l}>
          +${this.selectedOptions.length - s}</cx-tag>`;
      return B;
    });
  }
  handleInvalid(t) {
    this.formControlController.setValidity(!1), this.formControlController.emitInvalidEvent(t);
  }
  handleDisabledChange() {
    this.disabled && (this.open = !1, this.handleOpenChange());
  }
  handleValueChange() {
    const t = this.getAllOptions(), e = Array.isArray(this.value) ? this.value : [this.value], { options: l, preserveValue: n } = this.getOptionsForValue(
      e,
      t
    );
    this.setSelectedOptions(l, n ? this.value : void 0);
  }
  async handleNoDropdownChange() {
    await this.updateComplete, this.noDropdown ? this.open = !1 : this.handleOpenChange();
  }
  async handleOpenChange() {
    if (this.open && !this.disabled) {
      if (this.noDropdown)
        return;
      this.inputBehavior === "filter" && this.filterOptionsByInput(), this.noResetCurrent || this.setCurrentOption(this.selectedOptions[0] || this.getFirstOption()), this.emit("cx-show"), this.addOpenListeners(), await x(this), this.listbox.hidden = !1, this.popup.active = !0, requestAnimationFrame(() => {
        this.currentOption && this.setCurrentOption(this.currentOption);
      });
      const { keyframes: t, options: e } = _(this, "select.show", {
        dir: this.localize.dir()
      });
      await y(this.popup.popup, t, e), this.currentOption && F(this.currentOption, this.listbox, "vertical", "auto"), this.emit("cx-after-show");
    } else {
      this.emit("cx-hide"), this.removeOpenListeners(), await x(this);
      const { keyframes: t, options: e } = _(this, "select.hide", {
        dir: this.localize.dir()
      });
      await y(this.popup.popup, t, e), this.listbox.hidden = !0, this.popup.active = !1, this.emit("cx-after-hide");
    }
  }
  selectOptionByInput() {
    const t = this.getAllOptions();
    for (const e of t)
      if (this.getOptionLabel(e).toLowerCase().startsWith(this.typeToSelectString)) {
        this.setCurrentOption(e);
        break;
      }
  }
  filterOptionsByInput() {
    const t = this.getAllOptions();
    for (const e of t)
      this.filterCallback(e, this.typeToSelectString) ? (e.hidden = !1, e.style.display = "") : (e.hidden = !0, e.style.display = "none");
    this.popup.style.removeProperty("--auto-size-available-width"), this.popup.style.removeProperty("--auto-size-available-height");
  }
  /** Shows the listbox. */
  async show() {
    if (this.open || this.disabled) {
      this.open = !1;
      return;
    }
    return this.open = !0, v(this, "cx-after-show");
  }
  /** Hides the listbox. */
  async hide() {
    if (!this.open || this.disabled) {
      this.open = !1;
      return;
    }
    return this.open = !1, v(this, "cx-after-hide");
  }
  /** Checks for validity but does not show a validation message. Returns `true` when valid and `false` when invalid. */
  checkValidity() {
    return this.valueInput.checkValidity();
  }
  /** Gets the associated form, if one exists. */
  getForm() {
    return this.formControlController.getForm();
  }
  /** Checks for validity and shows the browser's validation message if the control is invalid. */
  reportValidity() {
    return this.valueInput.reportValidity();
  }
  /** Sets a custom validation message. Pass an empty string to restore validity. */
  setCustomValidity(t) {
    this.valueInput.setCustomValidity(t), this.formControlController.updateValidity();
  }
  /** Sets focus on the control. */
  focus(t) {
    this.displayInput.focus(t);
  }
  /** Removes focus from the control. */
  blur() {
    this.displayInput.blur();
  }
  render() {
    const t = this.hasSlotController.test("label"), e = this.hasSlotController.test("help-text"), l = this.label ? !0 : !!t, n = this.helpText ? !0 : !!e, s = this.clearable && !this.disabled && (this.displayLabel.length > 0 || this.selectedOptions.length > 0), r = this.placeholder && this.value.length === 0 && this.displayLabel.length === 0, c = this.value.length === 0 && this.displayLabel.length === 0 || (this.multiple || this.useTag) && this.tags.length === 0, h = (this.multiple || this.useTag) && this.selectedOptions.length > 0;
    return u`<div part="form-control" class=${b({
      "form-control": !0,
      "form-control--has-help-text": n,
      "form-control--has-label": l,
      "form-control--large": this.size === "large",
      "form-control--medium": this.size === "medium",
      "form-control--small": this.size === "small"
    })}><div part="form-control-input" class="form-control-input"><cx-popup .active=${this.open && this.stayOpenOnSelect} .syncElement=${this.syncElement} class=${b({
      select: !0,
      "select--bottom": this.placement === "bottom",
      "select--disabled": this.disabled,
      "select--empty": c,
      "select--filled": this.filled,
      "select--focused": this.hasFocus || this.open,
      "select--large": this.size === "large",
      "select--medium": this.size === "medium",
      "select--multiple": this.multiple || this.useTag,
      "select--open": this.open,
      "select--pill": this.pill,
      "select--placeholder-visible": r,
      "select--small": this.size === "small",
      "select--standard": !0,
      "select--top": this.placement === "top"
    })} placement=${this.placement} strategy=${this.hoist ? "overlay" : "absolute"} ?flip=${!this.noFlip} shift sync=${this.freeWidth ? void 0 : "width"} auto-size="both" auto-size-padding=${this.autosizePadding} flip-padding="10"><div part="combobox" class="select__combobox" slot="anchor" @keydown=${this.handleComboboxKeyDown} @mousedown=${this.handleComboboxMouseDown}><slot part="prefix" name="prefix" class="select__prefix"></slot><span class="input-container" @click=${this.handleFocus}><label id="label" part="form-control-label" class="form-control__label" aria-hidden=${l ? "false" : "true"}><slot name="label">${this.label}</slot></label>${f(
      h,
      () => u`<div part="tags" class="select__tags" @cx-remove=${this.handleTagRemove}>${this.tags}</div>`
    )}<input part="display-input" class=${b({
      "select__display-input": !0,
      "select__display-input--hidden": (this.multiple || this.useTag) && !this.hasFocus && !c && !(this.open && this.inputBehavior === "filter"),
      "select__display-input--large": this.size === "large",
      "select__display-input--medium": this.size === "medium",
      "select__display-input--small": this.size === "small"
    })} type="text" placeholder=${this.placeholder} .disabled=${this.disabled} ?readonly=${this.inputBehavior === "none" && !this.allowFreetext} .value=${this.displayLabel} autocomplete="off" spellcheck="false" autocapitalize="off" aria-controls="listbox" aria-expanded=${this.open ? "true" : "false"} aria-haspopup="listbox" aria-label=${l ? void 0 : this.dataset.label} aria-labelledby="label" aria-disabled=${this.disabled ? "true" : "false"} aria-describedby="help-text" role="combobox" tabindex="0" @input=${this.handleInput} @blur=${this.handleBlur}></span><input class="select__value-input" type="text" ?disabled=${this.disabled} ?required=${this.required} .value=${Array.isArray(this.value) ? this.value.join(", ") : this.value} tabindex="-1" aria-hidden="true" @focus=${this.focus} @invalid=${this.handleInvalid}>${f(
      this.loading,
      () => u`<cx-spinner part="spinner" role="status" aria-live="polite"></cx-spinner>`
    )}
              ${f(
      s,
      () => u`<button part="clear-button" class="select__clear" type="button" aria-label=${this.localize.term("clearEntry")} @mousedown=${this.handleClearMouseDown} @click=${this.handleClearClick} tabindex="-1"><slot name="clear-icon"><cx-icon name="cancel"></cx-icon></slot></button>`
    )}<slot name="suffix" part="suffix" class="select__suffix"></slot><slot name="expand-icon" part="expand-icon" class="select__expand-icon"><cx-icon name="arrow_drop_down"></cx-icon></slot></div><div id="listbox" role="listbox" aria-expanded=${this.open ? "true" : "false"} aria-multiselectable=${this.multiple ? "true" : "false"} aria-labelledby="label" part="listbox" class="select__listbox" tabindex="-1" @mouseup=${this.handleOptionClick} @slotchange=${this.handleDefaultSlotChange}><slot></slot>${f(
      this.shouldShowNoOptionsMessage,
      () => u`<cx-typography variant="body3" class="select__no-options" role="option">${this.noOptionText}</cx-typography>`
    )}</div></cx-popup></div><div part="form-control-help-text" id="help-text" class="form-control__help-text" aria-hidden=${n ? "false" : "true"}><slot name="help-text">${this.helpText}</slot></div></div>`;
  }
};
i.styles = [
  k,
  D,
  W
];
i.dependencies = {
  "cx-icon": P,
  "cx-line-clamp": w,
  "cx-popup": U,
  "cx-spinner": M,
  "cx-tag": N,
  "cx-typography": C
};
o([
  m(".select")
], i.prototype, "popup", 2);
o([
  m(".select__combobox")
], i.prototype, "combobox", 2);
o([
  m(".select__display-input")
], i.prototype, "displayInput", 2);
o([
  m(".select__value-input")
], i.prototype, "valueInput", 2);
o([
  m(".select__listbox")
], i.prototype, "listbox", 2);
o([
  g()
], i.prototype, "hasFocus", 2);
o([
  g()
], i.prototype, "displayLabel", 2);
o([
  g()
], i.prototype, "currentOption", 2);
o([
  g()
], i.prototype, "selectedOptions", 2);
o([
  a()
], i.prototype, "name", 2);
o([
  a({
    converter: {
      fromAttribute: (t) => t.split(" "),
      toAttribute: (t) => Array.isArray(t) ? t.join(" ") : t
    }
  })
], i.prototype, "value", 2);
o([
  a({ attribute: "fallback-option-value", type: String })
], i.prototype, "fallbackOptionValue", 2);
o([
  L()
], i.prototype, "defaultValue", 2);
o([
  a({ reflect: !0 })
], i.prototype, "size", 2);
o([
  a()
], i.prototype, "placeholder", 2);
o([
  a({ attribute: "allow-freetext", reflect: !0, type: Boolean })
], i.prototype, "allowFreetext", 2);
o([
  a({ reflect: !0, type: Boolean })
], i.prototype, "multiple", 2);
o([
  a({ attribute: "max-options-visible", type: Number })
], i.prototype, "maxOptionsVisible", 2);
o([
  a({ reflect: !0, type: Boolean })
], i.prototype, "disabled", 2);
o([
  a({ type: Boolean })
], i.prototype, "clearable", 2);
o([
  a({ reflect: !0, type: Boolean })
], i.prototype, "open", 2);
o([
  a({ type: Boolean })
], i.prototype, "hoist", 2);
o([
  a({ attribute: "no-flip", reflect: !0, type: Boolean })
], i.prototype, "noFlip", 2);
o([
  a({ attribute: "sync-element" })
], i.prototype, "syncElement", 2);
o([
  a({ attribute: "free-width", reflect: !0, type: Boolean })
], i.prototype, "freeWidth", 2);
o([
  a({ attribute: "auto-size-padding", type: Number })
], i.prototype, "autosizePadding", 2);
o([
  a({ reflect: !0, type: Boolean })
], i.prototype, "filled", 2);
o([
  a({ reflect: !0, type: Boolean })
], i.prototype, "pill", 2);
o([
  a()
], i.prototype, "label", 2);
o([
  a({ reflect: !0 })
], i.prototype, "placement", 2);
o([
  a({ attribute: "help-text" })
], i.prototype, "helpText", 2);
o([
  a({ reflect: !1 })
], i.prototype, "form", 2);
o([
  a({ reflect: !0, type: Boolean })
], i.prototype, "required", 2);
o([
  a({ attribute: "use-tag", reflect: !0, type: Boolean })
], i.prototype, "useTag", 2);
o([
  a({
    attribute: "no-select-on-enter",
    reflect: !0,
    type: Boolean
  })
], i.prototype, "noSelectOnEnter", 2);
o([
  a({
    attribute: "no-reset-current",
    reflect: !0,
    type: Boolean
  })
], i.prototype, "noResetCurrent", 2);
o([
  a({
    attribute: "no-dropdown",
    reflect: !0,
    type: Boolean
  })
], i.prototype, "noDropdown", 2);
o([
  a({
    attribute: "loading",
    reflect: !0,
    type: Boolean
  })
], i.prototype, "loading", 2);
o([
  a({ attribute: "get-tag", type: Function })
], i.prototype, "getTag", 2);
o([
  a({ attribute: "input-behavior" })
], i.prototype, "inputBehavior", 2);
o([
  a({ attribute: "get-option-value", type: Function })
], i.prototype, "getOptionValue", 2);
o([
  a({ attribute: "get-option-label", type: Function })
], i.prototype, "getOptionLabel", 2);
o([
  a({ attribute: "get-option-selected", type: Function })
], i.prototype, "getOptionSelected", 2);
o([
  a({ attribute: "get-option-disabled", type: Function })
], i.prototype, "getOptionDisabled", 2);
o([
  a({ attribute: "stay-open-on-select", type: Boolean })
], i.prototype, "stayOpenOnSelect", 2);
o([
  a({ attribute: "force-on-change", type: Boolean })
], i.prototype, "forceOnChange", 2);
o([
  a({ attribute: "allow-default-mouse-down", type: Boolean })
], i.prototype, "allowDefaultMouseDown", 2);
o([
  a({ attribute: "no-option-text", type: String })
], i.prototype, "noOptionText", 2);
o([
  p("getOptionValue", { waitUntilFirstUpdate: !0 }),
  p("getOptionLabel", { waitUntilFirstUpdate: !0 }),
  p("getOptionSelected", { waitUntilFirstUpdate: !0 }),
  p("getOptionDisabled", { waitUntilFirstUpdate: !0 }),
  p("fallbackOptionValue", { waitUntilFirstUpdate: !0 })
], i.prototype, "handleDefaultSlotChange", 1);
o([
  p("disabled", { waitUntilFirstUpdate: !0 })
], i.prototype, "handleDisabledChange", 1);
o([
  p("value", { waitUntilFirstUpdate: !0 })
], i.prototype, "handleValueChange", 1);
o([
  p("noDropdown", { waitUntilFirstUpdate: !0 })
], i.prototype, "handleNoDropdownChange", 1);
o([
  p("open", { waitUntilFirstUpdate: !0 })
], i.prototype, "handleOpenChange", 1);
i = o([
  z("cx-select")
], i);
O("select.show", {
  keyframes: [
    { opacity: 0, scale: 0.9 },
    { opacity: 1, scale: 1 }
  ],
  options: { duration: 100, easing: "ease" }
});
O("select.hide", {
  keyframes: [
    { opacity: 1, scale: 1 },
    { opacity: 0, scale: 0.9 }
  ],
  options: { duration: 100, easing: "ease" }
});
export {
  i as default
};
