import { r as l, c as d, h as r, H as g, g as c } from "./index.61732cef.js";
import { S as h } from "./sortable.esm-CMrz6687.dac971cd.js";
import { v as m } from "./v4-DD3477fe.2624487e.js";
import "react";
import "react-dom";
const u = () => ".sc-swirl-resource-list-h{display:block;width:100%}.sc-swirl-resource-list-h *.sc-swirl-resource-list{box-sizing:border-box}", I = class {
  constructor(t) {
    l(this, t), this.itemDrop = d(this, "itemDrop", 7), 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.semantics = "grid", this.spacing = "0", this.listId = m(), this.focusedIndex = 0, this.componentLoaded = !1, 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.focusItemAtIndex(s), this.assistiveText = this.assistiveTextItemGrabbed;
    }, this.stopDrag = (e) => {
      const s = this.getItemIndex(this.dragging);
      this.dragging = void 0, e.removeAttribute("dragging"), this.assistiveText = `${this.assistiveTextItemMoved} ${s + 1}`, this.itemDrop.emit({ item: e, oldIndex: this.draggingStartIndex, newIndex: s }), this.draggingStartIndex = void 0;
    }, this.onKeyDown = (e) => {
      if (this.semantics === "grid" && !Boolean(this.dragging))
        if (e.code === "ArrowDown")
          e.preventDefault(), this.focusItemAtIndex((this.focusedIndex + 1) % this.items.length);
        else if (e.code === "ArrowUp") {
          e.preventDefault();
          const s = this.focusedIndex === 0 ? this.items.length - 1 : this.focusedIndex - 1;
          this.focusItemAtIndex(s);
        } else if (e.code === "Enter" && Boolean(this.controllingElement)) {
          const s = this.items[this.focusedIndex];
          if (!Boolean(s) || !s.isConnected)
            return;
          e.stopPropagation(), e.preventDefault(), s.click();
        } else
          e.code === "Home" ? (e.preventDefault(), this.focusItemAtIndex(0)) : e.code === "End" && (e.preventDefault(), this.focusItemAtIndex(this.items.length - 1));
      if (Boolean(this.dragging)) {
        if (e.code === "ArrowDown")
          e.preventDefault(), this.moveDraggedItemDown();
        else if (e.code === "ArrowUp")
          e.preventDefault(), this.moveDraggedItemUp();
        else if (e.code === "Space" || e.code === "Enter") {
          const s = e.composedPath()[0];
          s != null && s.classList.contains("resource-list-item__drag-handle") || (e.preventDefault(), this.stopDrag(this.dragging));
        }
      }
    };
  }
  connectedCallback() {
    this.componentLoaded && (this.observeSlotChanges(), this.collectItems(), this.setupControllingElement(), this.setItemAllowDragState());
  }
  componentDidLoad() {
    this.observeSlotChanges(), this.collectItems(), this.setupControllingElement(), this.setItemAllowDragState(), this.setupDragDrop(), this.setSectionSpacingAndSeparator(), this.componentLoaded = !0;
  }
  componentDidRender() {
    this.setupDragDrop();
  }
  disconnectedCallback() {
    var t, e, s;
    (t = this.sortable) == null || t.destroy(), (e = this.observer) == null || e.disconnect(), (s = this.controllingElement) == null || s.removeEventListener("keydown", this.onKeyDown), this.removeToggleDragListeners();
  }
  observeSlotChanges() {
    var t;
    (t = this.observer) == null || t.disconnect(), this.observer = new MutationObserver(() => {
      this.collectItems(), this.setItemAllowDragState(), this.setSectionSpacingAndSeparator();
    }), this.observer.observe(this.el, {
      childList: !0,
      characterData: !0,
      subtree: !0
    });
  }
  watchAllowDrag() {
    this.setItemAllowDragState(), this.setupDragDrop();
  }
  async resetFocus() {
    var t;
    this.focusedIndex = 0, this.removeItemsFromTabOrder(), this.enableItemFocus(this.items[0]), Boolean(this.controllingElement) && ((t = this.items[0]) == null || t.setAttribute("aria-selected", "true"));
  }
  collectItems() {
    var t;
    this.removeToggleDragListeners(), this.items = Array.from(this.el.querySelectorAll("swirl-resource-list-item, swirl-resource-list-file-item, [data-resource-list-item]")).filter((e) => e.isConnected), this.sections = Array.from(this.el.querySelectorAll("swirl-resource-list-section")).filter((e) => e.isConnected), this.removeItemsFromTabOrder(), this.enableItemFocus(this.items[this.focusedIndex]), Boolean(this.controllingElement) && ((t = this.items[0]) == null || t.setAttribute("aria-selected", "true"));
  }
  setupControllingElement() {
    !Boolean(this.controllingElement) || (this.controllingElement.setAttribute("aria-controls", this.listId), this.controllingElement.setAttribute("role", "combobox"), this.controllingElement.setAttribute("aria-autocomplete", "list"), this.controllingElement.addEventListener("keydown", this.onKeyDown));
  }
  getItemIndex(t) {
    return this.items.map((e) => e).findIndex((e) => e === t);
  }
  removeItemsFromTabOrder() {
    this.semantics === "grid" && this.items.forEach((t) => {
      const e = t == null ? void 0 : t.querySelector(".resource-list-item__content, .resource-list-file-item, [data-resource-list-item-button]"), s = t == null ? void 0 : t.querySelector(".resource-list-item__drag-handle");
      Boolean(this.controllingElement) && t.setAttribute("aria-selected", "false"), e == null || e.setAttribute("tabIndex", "-1"), s == null || s.setAttribute("tabIndex", "-1");
    });
  }
  removeToggleDragListeners() {
    var t;
    (t = this.items) == null || t.forEach((e) => {
      e.removeEventListener("toggleDrag", this.toggleDrag);
    });
  }
  setItemAllowDragState() {
    this.allowDrag ? this.items.filter((t) => this.sections.every((e) => !e.contains(t))).forEach((t) => {
      t.setAttribute("allow-drag", "true"), t.addEventListener("toggleDrag", this.toggleDrag);
    }) : this.items.forEach((t) => {
      t.removeAttribute("allow-drag"), t.removeEventListener("toggleDrag", this.toggleDrag);
    });
  }
  setupDragDrop() {
    Boolean(this.sortable) && this.sortable.destroy(), this.allowDrag && (this.sortable = h.create(this.gridEl, {
      animation: 150,
      draggable: "swirl-resource-list-item",
      dragClass: "swirl-resource-list-item--drag",
      handle: ".resource-list-item__drag-handle",
      onEnd: (t) => {
        this.itemDrop.emit({
          item: t.item,
          oldIndex: t.oldDraggableIndex,
          newIndex: t.newDraggableIndex
        });
      }
    }));
  }
  enableItemFocus(t, e) {
    if (!Boolean(t) || Boolean(this.controllingElement))
      return;
    const s = t.querySelector(".resource-list-item__content, .resource-list-file-item, [data-resource-list-item-button]"), i = t.querySelector(".resource-list-item__drag-handle");
    Boolean(i) && i.setAttribute("tabIndex", "0"), Boolean(s) && (s.setAttribute("tabIndex", "0"), e && !Boolean(this.controllingElement) && s.focus());
  }
  focusItemAtIndex(t) {
    this.removeItemsFromTabOrder();
    const e = this.items[t];
    !Boolean(e) || !e.isConnected || (this.enableItemFocus(e, !Boolean(this.controllingElement)), Boolean(this.controllingElement) && (e.setAttribute("aria-selected", "true"), e.scrollIntoView({ block: "nearest" })), this.focusedIndex = t);
  }
  moveDraggedItemDown() {
    const t = this.dragging.nextElementSibling;
    !Boolean(t) || (t.after(this.dragging), this.collectItems(), this.focusItemAtIndex(this.getItemIndex(this.dragging)), this.assistiveText = `${this.assistiveTextItemMoving} ${this.getItemIndex(this.dragging) + 1}`);
  }
  moveDraggedItemUp() {
    const t = this.dragging.previousElementSibling;
    !Boolean(t) || (t.before(this.dragging), this.collectItems(), this.focusItemAtIndex(this.getItemIndex(this.dragging)), this.assistiveText = `${this.assistiveTextItemMoving} ${this.getItemIndex(this.dragging) + 1}`);
  }
  setSectionSpacingAndSeparator() {
    this.sections.forEach((t, e) => {
      var s;
      e === 0 && ((s = t.previousElementSibling) == null ? void 0 : s.tagName) !== "SWIRL-RESOURCE-LIST-ITEM" && (t.hasSeparator = !1), t.spacing = this.spacing;
    });
  }
  render() {
    var t, e, s, i, o, n;
    return r(g, { key: "cfe29e9445d922b69f2716643cbcade00fab8204", onKeyDown: this.onKeyDown }, r("swirl-visually-hidden", { key: "114a7ea84cc2fa760ed5c3cd966896ae1a567f2c", role: "alert" }, this.assistiveText), r("swirl-box", { key: "9472159c74cf552f9de9b33f4e03f3cd7cff5262", paddingBlockEnd: (t = this.paddingBlockEnd) != null ? t : this.padding, paddingBlockStart: (e = this.paddingBlockStart) != null ? e : this.padding, paddingInlineEnd: (i = (s = this.paddingInlineEnd) != null ? s : this.padding) != null ? i : "8", paddingInlineStart: (n = (o = this.paddingInlineStart) != null ? o : this.padding) != null ? n : "8" }, r("swirl-stack", { key: "6c8e8bc9c753b20be4ecb3fa87b2bd8fe73cbeb6", "aria-label": this.label, class: "resource-list", id: this.listId, ref: (a) => this.gridEl = a, role: this.semantics, spacing: this.spacing }, r("slot", { key: "6036dd9cfe944f9290084d634b45172ae4e9b23f" }))));
  }
  get el() {
    return c(this);
  }
  static get watchers() {
    return {
      allowDrag: [{
        watchAllowDrag: 0
      }]
    };
  }
};
I.style = u();
export {
  I as swirl_resource_list
};
