import { r as u, c as h, h as r, H as m, g } from "./index.61732cef.js";
import { S as I } from "./sortable.esm-CMrz6687.dac971cd.js";
import { l as n, q as c } from "./utils-CCck-DTo.e4e43b6a.js";
import { v as f } from "./v4-DD3477fe.2624487e.js";
import "react";
import "react-dom";
const p = () => ".sc-swirl-option-list-h{display:block}.sc-swirl-option-list-h *.sc-swirl-option-list{box-sizing:border-box}", b = class {
  constructor(t) {
    u(this, t), this.itemDrop = h(this, "itemDrop", 7), this.valueChange = h(this, "valueChange", 7), this.allowDeselect = !0, this.assistiveTextItemGrabbed = "Item grabbed. Use arrow keys to move item up or down. Use spacebar to save position.", this.assistiveTextItemMoving = "Current position:", this.assistiveTextItemMoved = "Item moved. New position:", this.selectAllLabel = "Select all", this.value = [], this.selectAllState = !1, this.componentLoaded = !1, this.selectAllValue = f(), this.onClick = (e) => {
      e.preventDefault();
      const s = e.target, i = s == null ? void 0 : s.closest("swirl-option-list-item"), l = e.composedPath()[0], o = Boolean(n(l, '[role="option"]'));
      if (!Boolean(i) || !o) {
        e.preventDefault();
        return;
      }
      if (i.value === this.selectAllValue)
        this.selectAllChanged();
      else {
        const a = this.items.findIndex((d) => d.value === i.value);
        this.focusItem(a), this.selectItem(a);
      }
    }, this.onKeyDown = (e) => {
      var s;
      if (e.code === "ArrowDown")
        e.preventDefault(), Boolean(this.dragging) ? this.moveDraggedItemDown() : this.focusNextItem();
      else if (e.code === "ArrowUp")
        e.preventDefault(), Boolean(this.dragging) ? this.moveDraggedItemUp() : this.focusPreviousItem();
      else if (e.code === "Space" || e.code === "Enter") {
        if (!e.target.classList.contains("option-list-item__drag-handle") && Boolean(this.dragging)) {
          e.preventDefault(), this.stopDrag(this.dragging);
          return;
        }
        const l = e.composedPath()[0], o = Boolean(n(l, '[role="option"]')), a = ((s = l == null ? void 0 : l.closest("swirl-option-list-item")) == null ? void 0 : s.value) === this.selectAllValue;
        if (!o && !a)
          return;
        e.preventDefault(), Boolean(this.dragging) ? this.stopDrag(this.dragging) : a ? this.selectAllChanged() : this.selectFocusedItem();
      } else
        e.code === "Home" ? (e.preventDefault(), this.showSelectAll ? this.focusSelectAll() : this.focusItem(0)) : e.code === "End" ? (e.preventDefault(), this.focusItem(this.items.length - 1)) : e.code === "KeyA" && (e.metaKey || e.ctrlKey) && this.multiSelect ? (e.preventDefault(), this.selectAllItems()) : e.code === "Tab" && Boolean(this.dragging) && e.preventDefault();
    }, this.resetTabIndex = () => {
      var i, l, o;
      this.removeItemsTabIndex(), this.focusedItem = void 0;
      const e = (i = this.items[0]) == null ? void 0 : i.querySelector('[role="option"]');
      (o = ((l = this.selectAllEl) == null ? void 0 : l.querySelector('[role="option"]')) || e) == null || o.setAttribute("tabIndex", "0");
    }, this.selectAllChanged = () => {
      var i, l;
      if (this.disabled)
        return;
      const e = ((i = this.items) == null ? void 0 : i.length) || 0;
      (((l = this.value) == null ? void 0 : l.length) || 0) === e ? this.updateValue([]) : this.updateValue(this.items.map((o) => o.value));
    }, this.toggleDrag = (e) => {
      const s = e.detail;
      Boolean(this.dragging) ? this.stopDrag(s) : this.startDrag(s);
    }, this.startDrag = (e) => {
      this.dragging = e, this.draggingStartIndex = this.getItemIndex(this.dragging), e.setAttribute("dragging", "true");
      const s = this.getItemIndex(this.dragging);
      this.focusItem(s), this.assistiveText = this.assistiveTextItemGrabbed;
    }, this.stopDrag = (e) => {
      this.dragging = void 0, e.removeAttribute("dragging");
      const s = this.getActiveItemIndex();
      this.assistiveText = `${this.assistiveTextItemMoved} ${s + 1}`, this.itemDrop.emit({ item: e, oldIndex: this.draggingStartIndex, newIndex: s }), this.draggingStartIndex = void 0, this.focusItem(s);
    };
  }
  connectedCallback() {
    this.componentLoaded && (this.observeSlotChanges(), this.subscribeToSwirlPopover(), this.setItemAllowDragState());
  }
  componentDidLoad() {
    this.updateItems(), this.observeSlotChanges(), this.setItemAllowDragState(), this.setItemDisabledState(), this.setItemContext(), this.syncItemsWithValue(), this.setupDragDrop(), this.setSectionSeparator(), this.setSelectAllState(), this.subscribeToSwirlPopover(), this.componentLoaded = !0;
  }
  componentDidRender() {
    this.setupDragDrop();
  }
  disconnectedCallback() {
    var t, e;
    this.unsubscribeFromSwirlPopover(), (t = this.observer) == null || t.disconnect(), (e = this.sortable) == null || e.destroy(), this.removeToggleDragListeners();
  }
  removeToggleDragListeners() {
    var t;
    (t = this.items) == null || t.forEach((e) => {
      e.removeEventListener("toggleDrag", this.toggleDrag);
    });
  }
  watchAllowDrag() {
    this.setItemAllowDragState(), this.setupDragDrop();
  }
  watchDisabled() {
    this.setItemDisabledState();
  }
  watchMultiSelect() {
    this.setItemContext();
  }
  watchValue() {
    this.syncItemsWithValue(), this.setSelectAllState();
  }
  async focusItemWithValue(t) {
    const e = this.items.findIndex((s) => s.value === t);
    e >= 0 && this.focusItem(e);
  }
  observeSlotChanges() {
    this.observer = new MutationObserver(() => {
      this.updateItems(), this.setItemAllowDragState(), this.setItemDisabledState(), this.setItemContext(), this.syncItemsWithValue(), this.setSelectAllState();
    }), this.observer.observe(this.listboxEl, { childList: !0, subtree: !0 });
  }
  setSelectAllState() {
    var s, i;
    const t = ((s = this.items) == null ? void 0 : s.length) || 0, e = ((i = this.value) == null ? void 0 : i.length) || 0;
    this.selectAllState = t === 0 || e === 0 ? !1 : e === t ? !0 : "indeterminate";
  }
  updateItems() {
    var e;
    this.removeToggleDragListeners(), this.items = c(this.el, "swirl-option-list-item").filter((s) => s.value !== this.selectAllValue), !(((e = this.selectAllEl) == null ? void 0 : e.querySelector('[tabindex="0"]')) || this.items.some((s) => s.querySelector('[tabindex="0"]'))) && this.resetTabIndex();
  }
  removeItemsTabIndex() {
    var t, e;
    (e = (t = this.selectAllEl) == null ? void 0 : t.querySelector('[role="option"]')) == null || e.removeAttribute("tabIndex"), this.items.forEach((s) => {
      var i;
      return (i = s.querySelector('[role="option"]')) == null ? void 0 : i.removeAttribute("tabIndex");
    });
  }
  setItemDisabledState() {
    this.disabled && this.items.forEach((t) => t.disabled = !0);
  }
  setItemContext() {
    this.multiSelect ? this.items.forEach((t) => t.context = "multi-select") : (this.items.forEach((t) => t.context = "single-select"), this.value.length > 1 && this.updateValue([this.value[0]]));
  }
  setupDragDrop() {
    Boolean(this.sortable) && this.sortable.destroy(), this.allowDrag && (this.sortable = I.create(this.listboxEl, {
      animation: 150,
      draggable: 'swirl-option-list-item[allow-drag="true"]',
      dragClass: "option-list-item--drag",
      handle: ".option-list-item__drag-handle",
      onEnd: (t) => {
        this.itemDrop.emit({
          item: t.item,
          oldIndex: t.oldIndex,
          newIndex: t.newIndex
        });
      }
    }));
  }
  setItemAllowDragState() {
    if (this.allowDrag && !this.multiSelect) {
      console.error("[SwirlOptionList] Drag can only be allowed for multi select lists.");
      return;
    }
    const t = c(this.el, "swirl-option-list-section");
    if (this.allowDrag && t.length > 0) {
      console.error("[SwirlOptionList] Drag can only be allowed for lists without sections.");
      return;
    }
    this.allowDrag ? this.items.forEach((e) => {
      e.setAttribute("allow-drag", "true"), e.addEventListener("toggleDrag", this.toggleDrag);
    }) : this.items.forEach((e) => {
      e.removeAttribute("allow-drag"), e.removeEventListener("toggleDrag", this.toggleDrag);
    });
  }
  selectItem(t) {
    if (this.disabled)
      return;
    const e = this.items[t];
    if (e.disabled)
      return;
    const s = this.value.includes(e.value);
    s && !this.allowDeselect || (this.multiSelect || (this.value = []), s ? this.updateValue(this.value.filter((i) => i !== e.value)) : this.updateValue([...this.value, e.value]));
  }
  updateValue(t) {
    this.value = t, this.valueChange.emit(this.value);
  }
  selectFocusedItem() {
    this.disabled || this.getActiveItemIndex() === -1 || this.selectItem(this.getActiveItemIndex());
  }
  selectAllItems() {
    if (this.disabled)
      return;
    this.items.every((e) => this.value.includes(e.value)) ? this.updateValue([]) : this.updateValue(this.items.map((e) => e.value));
  }
  syncItemsWithValue() {
    var t;
    (t = this.items) == null || t.forEach((e) => e.selected = this.value.includes(e.value));
  }
  focusItem(t) {
    var s;
    if (this.disabled)
      return;
    this.removeItemsTabIndex();
    const e = (s = this.items[t]) == null ? void 0 : s.querySelector('[role="option"]');
    !Boolean(e) || (e.setAttribute("tabIndex", "0"), e.focus(), this.focusedItem = e);
  }
  focusNextItem() {
    if (this.disabled)
      return;
    const t = this.getActiveItemIndex(), e = Math.min(t + 1, this.items.length - 1);
    this.focusItem(e);
  }
  focusPreviousItem() {
    const t = this.getActiveItemIndex();
    if (t <= 0 && this.showSelectAll)
      this.focusSelectAll();
    else {
      const e = Math.max(t - 1, 0);
      this.focusItem(e);
    }
  }
  focusSelectAll() {
    var e;
    const t = (e = this.selectAllEl) == null ? void 0 : e.querySelector('[role="option"]');
    !t || (this.removeItemsTabIndex(), t.setAttribute("tabIndex", "0"), t.focus(), this.focusedItem = void 0);
  }
  getActiveItemIndex() {
    return Boolean(this.focusedItem) ? this.items.map((t) => t.querySelector('[role="option"]')).findIndex((t) => t === this.focusedItem) : Boolean(this.selectAllEl) ? -1 : 0;
  }
  getItemIndex(t) {
    return this.items.map((e) => e).findIndex((e) => e === t);
  }
  moveDraggedItemDown() {
    const t = this.dragging.nextElementSibling;
    !Boolean(t) || (t.after(this.dragging), this.updateItems(), this.listboxEl.focus(), this.assistiveText = `${this.assistiveTextItemMoving} ${this.getActiveItemIndex() + 1}`);
  }
  moveDraggedItemUp() {
    const t = this.dragging.previousElementSibling;
    !Boolean(t) || t === this.selectAllEl || (t.before(this.dragging), this.updateItems(), this.listboxEl.focus(), this.assistiveText = `${this.assistiveTextItemMoving} ${this.getItemIndex(this.dragging) + 1}`);
  }
  setSectionSeparator() {
    if (!this.el)
      return;
    Array.from(this.el.querySelectorAll("swirl-option-list-section")).filter((e) => e.isConnected).forEach((e, s) => {
      var i;
      s === 0 && ((i = e.previousElementSibling) == null ? void 0 : i.tagName) !== "SWIRL-OPTION-LIST-ITEM" && (e.hasSeparator = !1);
    });
  }
  subscribeToSwirlPopover() {
    var t;
    this.swirlPopover = n(this.el, "swirl-popover"), (t = this.swirlPopover) == null || t.addEventListener("popoverClose", this.resetTabIndex);
  }
  unsubscribeFromSwirlPopover() {
    var t;
    (t = this.swirlPopover) == null || t.removeEventListener("popoverClose", this.resetTabIndex);
  }
  render() {
    const t = this.multiSelect ? "true" : void 0, e = Boolean(this.dragging) ? 0 : void 0, s = this.multiSelect && this.showSelectAll;
    return r(m, { key: "be6e808424a11ba49dc222c61240782be4630434" }, r("swirl-visually-hidden", { key: "0b1e3ce82dd64ee8e4bd06f951ea799f08c9b406", role: "alert" }, this.assistiveText), r("div", { key: "4188501419b277e9732ac9cb8b348775a447e109", "aria-label": this.label, "aria-multiselectable": t, class: "option-list", id: this.optionListId, onClick: this.onClick, onKeyDown: this.onKeyDown, ref: (i) => this.listboxEl = i, role: "listbox", tabIndex: e }, s && r("swirl-option-list-item", { key: "eb5c0c7e123aa3db2c6b6085e4a8767992e1a185", ref: (i) => this.selectAllEl = i, label: this.selectAllLabel, disabled: this.disabled, context: "multi-select", selected: this.selectAllState === !0, indeterminate: this.selectAllState === "indeterminate", value: this.selectAllValue }), r("slot", { key: "c71f1737858eb8a1660f620687f59d098cec17d8", onSlotchange: this.setSectionSeparator })));
  }
  get el() {
    return g(this);
  }
  static get watchers() {
    return {
      allowDrag: [{
        watchAllowDrag: 0
      }],
      disabled: [{
        watchDisabled: 0
      }],
      multiSelect: [{
        watchMultiSelect: 0
      }],
      value: [{
        watchValue: 0
      }]
    };
  }
};
b.style = p();
export {
  b as swirl_option_list
};
