import { r as b, c as l, f as c, h as n, F as w, H as u, g as y } from "./index.61732cef.js";
import { c as _ } from "./index-orsBiyT_.fc4357c3.js";
import { S as I } from "./sortable.esm-CMrz6687.dac971cd.js";
import { t as p } from "./swirl-tree-view.config-BkSXzL50.94f4a648.js";
import "react";
import "react-dom";
const x = () => "swirl-tree-view-item{display:block;flex-grow:1}swirl-tree-view-item *{box-sizing:border-box}.tree-view-item{list-style:none}.tree-view-item--chosen.tree-view-item--drag:not(.tree-view-item--ghost){border-radius:var(--s-border-radius-sm);box-shadow:var(--s-shadow-level-3)}.tree-view-item--chosen.tree-view-item--drag:not(.tree-view-item--ghost) .tree-view-item__link{background-color:var(--s-translucent-low-pressed)}.tree-view-item--chosen.tree-view-item--drag:not(.tree-view-item--ghost) .tree-view-item__link:hover .tree-view-item__drag-handle{opacity:0}.tree-view-item--ghost{border:var(--s-border-width-default) solid var(--s-border-highlight);border-radius:var(--s-border-radius-sm)}.tree-view-item--ghost .tree-view-item__link:hover .tree-view-item__drag-handle{opacity:0}.tree-view-item--moving-via-keyboard{position:relative;z-index:1;border:var(--s-border-width-default) solid var(--s-border-highlight);border-radius:var(--s-border-radius-sm);box-shadow:var(--s-shadow-level-3)}.tree-view-item--moving-via-keyboard .tree-view-item__link{background-color:var(--s-translucent-low-pressed)}.tree-view-item--moving-via-keyboard .tree-view-item__link:focus-visible{outline:none}.tree-view-item--cannot-keyboard-drop{opacity:0.5}.tree-view-item--active>.tree-view-item__link{background-color:var(--s-state-hovered)}.tree-view-item--has-tags .tree-view-item__tags{display:flex}.tree-view-item__children{display:flex;margin:0;padding:0 0 0 var(--s-space-12);padding-top:var(--s-space-2);flex-direction:column;gap:var(--s-space-2)}.tree-view-item__children--drop-zone{min-height:0.5rem;margin-top:-0.5rem}.tree-view-item__link{display:flex;height:2.25rem;padding:var(--s-space-4) var(--s-space-8);align-items:center;border-radius:var(--s-border-radius-sm);color:var(--s-text-default);font-size:var(--s-font-size-base);font-weight:var(--s-font-weight-medium);text-decoration:none;gap:var(--s-space-4)}.tree-view-item__link:hover{background-color:var(--s-state-hovered)}.tree-view-item__link:hover .tree-view-item__drag-handle{opacity:1}.tree-view-item__link:active{background-color:var(--s-state-pressed)}.tree-view-item__link:focus:not(:focus-visible){outline:none}.tree-view-item__link:focus-visible{outline-color:var(--s-focus-default)}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.tree-view-item__link{font-size:var(--s-font-size-sm)}}.tree-view-item__drag-handle{display:inline-flex;flex-shrink:0;cursor:grab;opacity:0}.tree-view-item__drag-handle:active{cursor:grabbing}.tree-view-item__icon{display:block;width:1.5rem;height:1.5rem;margin-right:var(--s-space-4);flex-grow:0;flex-shrink:0;color:var(--s-icon-default);font-size:var(--s-font-size-lg)}.tree-view-item__icon ::part(icon){width:100%;height:100%}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.tree-view-item__icon{width:1.25rem;height:1.25rem;font-size:var(--s-font-size-base)}}.tree-view-item__toggle-icon{display:block;width:1.5rem;height:1.5rem;flex-grow:0;flex-shrink:0;color:var(--s-icon-default)}.tree-view-item__toggle-icon ::part(icon){width:100%;height:100%}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.tree-view-item__toggle-icon{width:1.25rem;height:1.25rem}}.tree-view-item__label{overflow:hidden;min-width:5rem;flex-grow:1;white-space:nowrap;text-overflow:ellipsis}.tree-view-item__tags{display:none;padding-left:var(--s-space-4);align-items:center;gap:var(--s-space-4)}", D = class {
  constructor(t) {
    b(this, t), this.dropTreeViewItem = l(this, "dropTreeViewItem", 7), this.expandedChange = l(this, "expandedChange", 7), this.itemSelected = l(this, "itemSelected", 7), this.startKeyboardMoveEvent = l(this, "startKeyboardMove", 7), this.endKeyboardMoveEvent = l(this, "endKeyboardMove", 7), this.keyboardMoveEvent = l(this, "keyboardMove", 7), this.expandable = !0, this.cannotKeyboardDropInCurrentPosition = !1, this.dragDropItemSelector = "swirl-tree-view-item", this.enableDragDrop = !1, this.expanded = !1, this.level = 0, this.movingViaKeyboard = !1, this.selected = !1, this.onFocus = () => {
      !this.selected && this.getSemantics() === "tree" && this.select();
    }, this.onKeyDown = (e) => {
      if (e.code === "Space") {
        e.preventDefault(), this.toggleKeyboardMove();
        return;
      }
      !this.movingViaKeyboard || (e.code === "ArrowDown" ? (e.preventDefault(), e.stopPropagation(), this.moveItem("down")) : e.code === "ArrowUp" && (e.preventDefault(), e.stopPropagation(), this.moveItem("up")));
    }, this.onClickCollapse = (e) => {
      e.preventDefault(), e.stopPropagation(), this.collapse();
    }, this.onClickExpand = (e) => {
      e.preventDefault(), e.stopPropagation(), this.expand();
    };
  }
  componentWillLoad() {
    this.updateLevel();
    const t = this.el.closest("swirl-tree-view");
    this.enableDragDrop = t == null ? void 0 : t.enableDragDrop, this.canDrop = t == null ? void 0 : t.canDrop, this.dragDropItemSelector = t == null ? void 0 : t.dragDropItemSelector;
  }
  componentDidLoad() {
    this.setUpDragDrop();
  }
  async expand() {
    this.expanded || !this.expandable || this.getSemantics() !== "tree" || (this.expanded = !0, this.expandedChange.emit(this.expanded));
  }
  async collapse() {
    !this.expanded || !this.expandable || this.getSemantics() !== "tree" || (this.expanded = !1, this.expandedChange.emit(this.expanded));
  }
  async select(t) {
    var e;
    this.getSemantics() === "tree" && (this.selected = !0, t && ((e = this.link) == null || e.focus()), this.itemSelected.emit(this.el));
  }
  async unselect() {
    this.getSemantics() === "tree" && (this.selected = !1);
  }
  setUpDragDrop() {
    this.sortable && (this.sortable.destroy(), this.sortable = void 0), this.enableDragDrop && this.childList && (this.sortable = new I(this.childList, {
      ...p,
      draggable: this.dragDropItemSelector,
      onMove: (t) => {
        var e;
        return typeof this.canDrop == "function" ? this.canDrop({
          parentId: (e = t.to.closest("swirl-tree-view-item")) == null ? void 0 : e.itemId,
          position: Math.max(Array.from(t.to.children).indexOf(t.related), 0)
        }) : !0;
      },
      onStart: (t) => {
        var e, i;
        (i = (e = p).onStart) == null || i.call(e, t);
      },
      onEnd: (t) => {
        var m, d, v, g, f;
        t.stopPropagation(), (d = (m = p).onEnd) == null || d.call(m, t);
        const { from: e, to: i, newIndex: r, oldIndex: s, item: o } = t, a = (v = e.closest("swirl-tree-view-item")) == null ? void 0 : v.itemId, h = (g = i.closest("swirl-tree-view-item")) == null ? void 0 : g.itemId;
        this.dropTreeViewItem.emit({
          newIndex: r,
          oldIndex: s,
          item: o,
          itemId: (f = o.id) != null ? f : o.querySelector(":scope > swirl-tree-view-item").id,
          newNextSiblingItemId: r < i.children.length - 1 ? i.children[r + 1].id : void 0,
          newPrevSiblingItemId: r > 0 ? i.children[r - 1].id : void 0,
          sourceParentItemId: a,
          targetParentItemId: h
        });
      }
    }));
  }
  updateLevel() {
    var e, i;
    let t = (e = this.el.parentElement) == null ? void 0 : e.closest("swirl-tree-view-item");
    for (; Boolean(t); )
      this.level += 1, t = (i = t.parentElement) == null ? void 0 : i.closest("swirl-tree-view-item");
  }
  getItemContext() {
    var i;
    const t = (i = this.getParentTreeViewItem()) != null ? i : this.el.closest("swirl-tree-view"), e = Array.from(t.querySelectorAll(`
        :scope > .tree-view-item > .tree-view-item__children > ${this.dragDropItemSelector},
        :scope > .tree-view > ${this.dragDropItemSelector}
      `));
    return {
      canDrop: !this.cannotKeyboardDropInCurrentPosition,
      parent: t,
      position: e.indexOf(this.el),
      siblingCount: e.length
    };
  }
  getParentItem() {
    return this.getElementToMove().parentElement.closest(this.dragDropItemSelector);
  }
  getParentTreeViewItem() {
    return this.el.parentElement.closest("swirl-tree-view-item");
  }
  getElementToMove() {
    return this.dragDropItemSelector ? this.el.closest(this.dragDropItemSelector) : this.el;
  }
  getKeyboardMoveEventData() {
    const { canDrop: t, parent: e, position: i, siblingCount: r } = this.getItemContext();
    if (!!e)
      return {
        canDrop: t,
        parentLabel: e.label,
        childrenCount: r,
        itemLabel: this.label,
        position: i
      };
  }
  toggleKeyboardMove() {
    this.movingViaKeyboard ? this.endKeyboardMove() : this.startKeyboardMove();
  }
  endKeyboardMove() {
    var r, s, o, a;
    const { parent: t, position: e } = this.getItemContext();
    if (typeof this.canDrop == "function" && !this.canDrop({ parentId: t.id, position: e }))
      return;
    this.movingViaKeyboard = !1;
    const i = this.getKeyboardMoveEventData();
    !i || (this.endKeyboardMoveEvent.emit(i), this.dropTreeViewItem.emit({
      item: this.getElementToMove(),
      itemId: this.itemId,
      newIndex: e,
      oldIndex: this.positionBeforeKeyboardMove.position,
      newNextSiblingItemId: i.position < i.childrenCount - 1 ? (r = this.getElementToMove().nextElementSibling) == null ? void 0 : r.id : void 0,
      newPrevSiblingItemId: i.position > 0 ? (s = this.getElementToMove().previousElementSibling) == null ? void 0 : s.id : void 0,
      sourceParentItemId: (o = this.positionBeforeKeyboardMove.parent.id) != null ? o : void 0,
      targetParentItemId: (a = this.getParentItem()) == null ? void 0 : a.id
    }));
  }
  startKeyboardMove() {
    if (this.disableDrag)
      return;
    const { parent: t, position: e } = this.getItemContext();
    this.positionBeforeKeyboardMove = {
      parent: t,
      position: e
    }, this.movingViaKeyboard = !0;
    const i = this.getKeyboardMoveEventData();
    !i || this.startKeyboardMoveEvent.emit(i);
  }
  moveItem(t) {
    const e = this.getElementToMove(), i = this.getParentItem(), r = this.getParentTreeViewItem();
    if (t === "down") {
      const o = e.nextElementSibling;
      if (o) {
        o.querySelector(".tree-view-item__children").prepend(e), r && c(r);
        const a = o.tagName === "SWIRL-TREE-VIEW-ITEM" ? o : o.querySelector("swirl-tree-view-item");
        c(a), a.expand();
      } else
        i && (i.parentElement.insertBefore(e, i.nextElementSibling), r && c(r));
    } else if (t === "up") {
      const o = e.previousElementSibling;
      if (o) {
        o.querySelector(".tree-view-item__children").appendChild(e), r && c(r);
        const a = o.tagName === "SWIRL-TREE-VIEW-ITEM" ? o : o.querySelector("swirl-tree-view-item");
        c(a), a.expand();
      } else
        i && (i.parentElement.insertBefore(e, i), r && c(r));
    }
    requestAnimationFrame(() => {
      this.link.focus();
    }), this.checkKeyboardDropStatus();
    const s = this.getKeyboardMoveEventData();
    !s || this.keyboardMoveEvent.emit(s);
  }
  checkKeyboardDropStatus() {
    const { parent: t, position: e } = this.getItemContext();
    if (typeof this.canDrop == "function") {
      const i = this.canDrop({ parentId: t.id, position: e });
      this.cannotKeyboardDropInCurrentPosition = !i;
      return;
    }
    this.cannotKeyboardDropInCurrentPosition = !1;
  }
  getSemantics() {
    return this.el.closest('[role="tree"]') ? "tree" : "list";
  }
  render() {
    const t = Boolean(this.el.querySelector("swirl-tree-view-item")), e = Boolean(this.el.querySelector('[slot="tags"]')), i = Boolean(this.icon) && /\p{Extended_Pictographic}/u.test(this.icon), r = this.enableDragDrop && !t, s = this.getSemantics(), o = this.expanded || s !== "tree", a = s === "tree" ? this.selected ? 0 : -1 : void 0, h = s === "tree" ? "li" : "div", m = _("tree-view-item", {
      "tree-view-item--active": this.active,
      "tree-view-item--cannot-keyboard-drop": this.cannotKeyboardDropInCurrentPosition,
      "tree-view-item--moving-via-keyboard": this.movingViaKeyboard,
      "tree-view-item--disable-drag": this.disableDrag,
      "tree-view-item--has-tags": e
    });
    return n(u, { key: "8cf5abd381089d2d67b4d04f8c7dd37c9a425104", id: this.itemId, role: s === "tree" ? "none" : "listitem" }, n(h, { key: "16fb5ddaa65f23ee06debfdd263c189b06b64d9f", class: m, role: s === "tree" ? "none" : void 0 }, n("a", { key: "1005cc3067fac785b700879793ec97070fe48f18", "aria-current": this.active ? "page" : void 0, "aria-expanded": !t || s !== "tree" ? void 0 : String(o), "aria-level": s === "tree" ? this.level + 1 : void 0, "aria-owns": t && s === "tree" ? `${this.itemId}-children` : void 0, "aria-selected": s === "tree" ? String(this.selected) : void 0, class: "tree-view-item__link", href: this.href, onFocus: this.onFocus, onKeyDown: this.onKeyDown, ref: (d) => this.link = d, role: s === "tree" ? "treeitem" : void 0, tabIndex: a }, !this.disableDrag && this.enableDragDrop && n("span", { key: "ccff29b00833ca770971896ad880fafc014f1ad9", class: "tree-view-item__drag-handle" }, n("swirl-icon-drag-handle", { key: "8134fba6fd6ca02497ee416550a2dc219133f03b", size: 20 })), this.expandable && s === "tree" && n("span", { key: "e97db02e7f4cbf30d70880c749f21d423b72f390", class: "tree-view-item__toggle-icon" }, t && n(w, { key: "2d8b864460e55ac130f11ee594fab5b74e064bf3" }, o ? n("swirl-icon-expand-more", { onClick: this.onClickCollapse, size: 24 }) : n("swirl-icon-chevron-right", { onClick: this.onClickExpand, size: 24 }))), Boolean(this.icon) && n(w, { key: "ff85d76dd08e91a4f0feb0e3a7429cf3f2f25f89" }, n("span", { key: "cee8cdca04d0a79d30af132aac01e3a7a93c7aa0", class: "tree-view-item__icon" }, i ? this.icon : n("swirl-icon", { glyph: this.icon, size: 24, color: this.iconColor }))), n("span", { key: "c047c655f57ddd32b25e53ed2895ee3a59387eb0", class: "tree-view-item__label" }, this.label), n("span", { key: "ad951c79736e6a770bfae5d4eb0966d58d7bed12", class: "tree-view-item__tags" }, n("slot", { key: "15b80f3681a66f14e9fb86d81ad71d1c7e57a4c8", name: "tags" }))), n("ul", { key: "b4ecc45f07511851c56c44c1f4c7c02ac94adf7e", "aria-label": this.label, class: `tree-view-item__children ${r ? "tree-view-item__children--drop-zone" : ""}`, id: `${this.itemId}-children`, ref: (d) => this.childList = d, role: s === "tree" ? "group" : void 0, style: {
      display: (!o || !t) && !r ? "none" : void 0
    } }, n("slot", { key: "beb970cb39949293f27bdf215a56e9361cd12ee9" }))));
  }
  get el() {
    return y(this);
  }
};
D.style = x();
export {
  D as swirl_tree_view_item
};
