import { r as x, c as R, h as a, H as _, g as k } from "./index.61732cef.js";
import { c as O, g as L } from "./index-orsBiyT_.fc4357c3.js";
import { S as M } from "./sortable.esm-CMrz6687.dac971cd.js";
import { d as A, i as f, q as T } from "./utils-CCck-DTo.e4e43b6a.js";
import "react";
import "react-dom";
var g, v;
function E() {
  if (v)
    return g;
  v = 1, g = function(s) {
    var o = arguments.length > 1 && arguments[1] !== void 0 ? arguments[1] : 0, i = arguments.length > 2 && arguments[2] !== void 0 ? arguments[2] : {}, l = void 0, n = void 0, u = void 0, d = [];
    return function() {
      var y = e(o), w = new Date().getTime(), D = !l || w - l > y;
      l = w;
      for (var m = arguments.length, c = Array(m), h = 0; h < m; h++)
        c[h] = arguments[h];
      if (D && i.leading)
        return i.accumulate ? Promise.resolve(s.call(this, [c])).then(function(p) {
          return p[0];
        }) : Promise.resolve(s.call.apply(s, [this].concat(c)));
      if (n ? clearTimeout(u) : n = t(), d.push(c), u = setTimeout(C.bind(this), y), i.accumulate) {
        var S = d.length - 1;
        return n.promise.then(function(p) {
          return p[S];
        });
      }
      return n.promise;
    };
    function C() {
      var b = n;
      clearTimeout(u), Promise.resolve(i.accumulate ? s.call(this, d) : s.apply(this, d[d.length - 1])).then(b.resolve, b.reject), d = [], n = null;
    }
  };
  function e(r) {
    return typeof r == "function" ? r() : r;
  }
  function t() {
    var r = {};
    return r.promise = new Promise(function(s, o) {
      r.resolve = s, r.reject = o;
    }), r;
  }
  return g;
}
var q = E(), I = /* @__PURE__ */ L(q);
const K = () => ".sc-swirl-table-h{--swirl-table-shadow-rgba:rgba(23, 23, 23, 0.2);position:relative;display:block}.sc-swirl-table-h *.sc-swirl-table{box-sizing:border-box}html.theme-dark.sc-swirl-table-h,html.theme-dark .sc-swirl-table-h{--swirl-table-shadow-rgba:rgba(0, 0, 0, 0.2)}.table--keyboard-move.sc-swirl-table:focus-within{--swirl-table-moving-row-border:var(--s-border-width-default) solid       var(--s-border-highlight)}.table--show-empty-state.sc-swirl-table .table__empty-row.sc-swirl-table{display:flex}.table__container.sc-swirl-table{position:relative;overflow:auto;width:100%}.table__container--scrolled.sc-swirl-table{--swirl-table-sticky-right-shadow:4px 0 16px -4px var(--swirl-table-shadow-rgba),     2px 0 4px -2px var(--swirl-table-shadow-rgba)}.table__container--scrollable.sc-swirl-table:not(.table__container--scrolled-to-end){--swirl-table-sticky-left-shadow:0px 4px 16px 0px       var(--swirl-table-shadow-rgba),     0px 1px 4px 0px var(--swirl-table-shadow-rgba)}.table__table.sc-swirl-table{width:-webkit-max-content;width:-moz-max-content;width:max-content;min-width:max(20rem, 100%)}.table__header.sc-swirl-table-s>*,.table__header .sc-swirl-table-s>*{display:flex}.table__empty-row.sc-swirl-table{display:none}.table__empty-row-cell.sc-swirl-table{display:flex;overflow:auto;padding-top:var(--s-space-8);padding-right:var(--s-space-16);padding-bottom:var(--s-space-8);padding-left:var(--s-space-16);flex-basis:0;flex-grow:1;flex-shrink:1;align-items:center;background-color:var(--s-surface-default)}.table__empty-row-cell.sc-swirl-table>*.sc-swirl-table{flex-grow:1}", B = {
  end: "Dropped. Final position in table: {position} of {rowCount}.",
  initial: "Press space to move the row.",
  moved: "Current position in table: {position} of {rowCount}.",
  start: "Row grabbed. Current position in table: {position} of {rowCount}. Press up and down arrow keys to change position, Space to drop."
}, W = class {
  constructor(e) {
    x(this, e), this.dropRow = R(this, "dropRow", 7), this.dragDropInstructions = B, this.emptyStateLabel = "No results found.", this.liveRegionText = "", this.triggerRerender = A(async () => {
      await this.updateLayout(), this.updateEmptyState();
    }, 0, !0), this.updateLayout = I(async () => {
      this.resetCellStyles(), this.resetColumnStyles(), this.resetEmptyRowStyles(), this.resetRowGroupStyles(), this.layoutEmptyRow(), this.layoutRowGroups(), this.layOutCellsAndColumns(), this.updateScrolledState();
    }, 16, { leading: !0 }), this.onScroll = () => {
      this.updateScrolledState();
    }, this.onFocus = (t) => {
      var s;
      if (this.movingViaKeyboard) {
        const o = this.el.querySelector(".table-row--moving");
        o && this.focusDragHandleOfRow(o);
      }
      const r = !!((s = t.target) != null && s.closest(this.dragDropHandle));
      this.liveRegionText === "" && r && this.updateLiveRegionText("initial");
    }, this.onBlur = (t) => {
      const r = t.relatedTarget, s = !!(r != null && r.closest(this.dragDropHandle));
      this.el.contains(r) && s || this.liveRegionText !== "" && this.updateLiveRegionText();
    }, this.onKeyDown = (t) => {
      var o, i;
      if (!this.enableDragDrop)
        return;
      const r = (o = t.target) == null ? void 0 : o.closest("swirl-table-row");
      !((i = t.target) != null && i.closest(this.dragDropHandle)) || (t.code === "Space" ? (t.preventDefault(), t.stopPropagation(), this.toggleKeyboardMove(r)) : t.code === "ArrowUp" ? (t.preventDefault(), t.stopPropagation(), this.moveRow(r, "up")) : t.code === "ArrowDown" ? (t.preventDefault(), t.stopPropagation(), this.moveRow(r, "down")) : t.code === "Escape" && (t.preventDefault(), t.stopPropagation(), this.cancelKeyboardMove()));
    };
  }
  async componentDidLoad() {
    this.setupIntersectionObserver(), this.setupMutationObservers(), queueMicrotask(() => {
      this.setupDragDrop();
    });
  }
  disconnectedCallback() {
    var e, t, r, s;
    (e = this.intersectionObserver) == null || e.disconnect(), (t = this.columnMutationObserver) == null || t.disconnect(), (r = this.rowMutationObserver) == null || r.disconnect(), (s = this.sortable) == null || s.destroy();
  }
  handleEnableDragDropChange() {
    queueMicrotask(() => {
      this.setupDragDrop();
    });
  }
  setupIntersectionObserver() {
    this.intersectionObserver = new IntersectionObserver(this.onVisibilityChange.bind(this), {
      threshold: 0
    }), this.intersectionObserver.observe(this.container);
  }
  setupMutationObservers() {
    this.columnMutationObserver = new MutationObserver((e) => {
      e.some((r) => r.addedNodes.length || r.removedNodes.length) && this.updateLayout();
    }), this.columnMutationObserver.observe(this.headerEl, {
      childList: !0,
      subtree: !0
    }), this.rowMutationObserver = new MutationObserver((e) => {
      e.some((r) => r.addedNodes.length || r.removedNodes.length) && (this.updateEmptyState(), this.setupDragDrop());
    }), this.startRowMutationObserver();
  }
  startRowMutationObserver() {
    var e;
    (e = this.rowMutationObserver) == null || e.observe(this.bodyEl, {
      childList: !0,
      subtree: !0
    });
  }
  stopRowMutationObserver() {
    var e;
    (e = this.rowMutationObserver) == null || e.disconnect();
  }
  setupDragDrop() {
    if (this.sortable && (this.sortable.destroy(), this.sortable = void 0), this.enableDragDrop) {
      if (!!this.el.querySelector("swirl-table-row-group")) {
        console.warn('[Swirl] Drag & drop is not yet supported for swirl-tables using the "swirl-table-row-group" component.');
        return;
      }
      if (!this.dragDropHandle) {
        console.warn('[Swirl] swirl-table required the "dragDropHandle" prop to be set when drag & drop is enabled.');
        return;
      }
      const t = this.el.querySelector('[slot="rows"]');
      this.dragDropContainer = (t == null ? void 0 : t.tagName) !== "SWIRL-TABLE-ROW" ? t != null ? t : this.bodyEl : this.bodyEl, this.sortable = new M(this.dragDropContainer, {
        animation: 100,
        direction: "vertical",
        handle: this.dragDropHandle,
        fallbackOnBody: !0,
        group: `swirl-table-${Math.random().toString().substring(2)}`,
        onStart: () => {
          this.stopRowMutationObserver();
        },
        onEnd: (r) => {
          var n;
          r.stopPropagation();
          const { to: s, newIndex: o, oldIndex: i, item: l } = r;
          this.dropRow.emit({
            newIndex: o,
            oldIndex: i,
            item: l,
            itemId: (n = l.id) != null ? n : l.querySelector(":scope > swirl-table-row").id,
            newNextSiblingItemId: o < s.children.length - 1 ? s.children[o + 1].id : void 0,
            newPrevSiblingItemId: o > 0 ? s.children[o - 1].id : void 0
          }), this.startRowMutationObserver();
        }
      });
    }
  }
  async onVisibilityChange(e) {
    e.some((r) => r.isIntersecting) && setTimeout(async () => {
      await this.updateLayout();
    }, 100);
  }
  async componentDidRender() {
    await this.updateLayout(), this.updateEmptyState();
  }
  async onWindowResize() {
    await this.updateLayout();
  }
  async rerender() {
    this.triggerRerender();
  }
  resetEmptyRowStyles() {
    const e = this.el.querySelector(".table__empty-row");
    !Boolean(e) || (e.style.width = "");
  }
  resetRowGroupStyles() {
    Array.from(this.el.querySelectorAll("swirl-table-row-group")).forEach((t) => {
      const r = t.shadowRoot.querySelector(".table-row-group__header-row");
      !Boolean(r) || (t.shadowRoot.querySelector(".table-row-group__header-row").style.width = "");
    });
  }
  resetColumnStyles() {
    this.getColumns().forEach((t) => {
      t.classList.remove("table-column--has-shadow", "table-column--is-sticky", "table-column--is-sticky-right"), t.style.right = "", t.style.left = "", t.style.position = "", t.style.zIndex = "";
    });
  }
  resetCellStyles() {
    this.getCells().forEach((t) => {
      t.classList.remove("table-cell--has-shadow", "table-cell--is-sticky", "table-cell--is-sticky-right"), t.style.flex = "", t.style.left = "", t.style.right = "", t.style.position = "", t.style.zIndex = "";
    });
  }
  updateScrolledState() {
    const e = f();
    if (this.container === void 0)
      return;
    const t = this.container.scrollWidth > this.container.clientWidth, r = this.container.scrollLeft > 0, s = Math.ceil(this.container.clientWidth + this.container.scrollLeft) >= Math.floor(this.container.scrollWidth);
    t !== this.scrollable && (t && !e ? this.container.classList.add("table__container--scrollable") : this.container.classList.remove("table__container--scrollable")), r !== this.scrolled && (r && !e ? this.container.classList.add("table__container--scrolled") : this.container.classList.remove("table__container--scrolled")), s !== this.scrolledToEnd && (s && !e ? this.container.classList.add("table__container--scrolled-to-end") : this.container.classList.remove("table__container--scrolled-to-end"));
  }
  getColumns() {
    return Array.from(this.el.querySelectorAll("swirl-table-column"));
  }
  getCells() {
    return Array.from(this.el.querySelectorAll("swirl-table-cell"));
  }
  layoutEmptyRow() {
    const e = this.el.querySelector(".table__empty-row");
    if (!Boolean(e))
      return;
    const t = `${this.el.querySelector(".table__container").scrollWidth}px`;
    e.style.width = t;
  }
  layoutRowGroups() {
    var r;
    const e = Array.from(this.el.querySelectorAll("swirl-table-row-group")), t = `${(r = this.el.querySelector(".table__container")) == null ? void 0 : r.scrollWidth}px`;
    e.forEach((s) => {
      const o = s.shadowRoot.querySelector(".table-row-group__header-row");
      !Boolean(o) || (s.shadowRoot.querySelector(".table-row-group__header-row").style.width = t);
    });
  }
  layOutCellsAndColumns() {
    const e = this.getColumns(), t = this.getCells();
    e.forEach((r, s) => {
      const o = this.getCellsForColumn(t, e, s), i = this.calculateColumnProperties(r, e, s);
      o.forEach((l) => this.applyCellStyles(l, r, i)), this.applyColumnStyles(r, i);
    });
  }
  getCellsForColumn(e, t, r) {
    return e.filter((s, o) => (r - o) % t.length === 0);
  }
  calculateColumnProperties(e, t, r) {
    const s = e.sticky ? this.getLeftOffsetForStickyColumn(t, r) : 0, o = `${e.getBoundingClientRect().width}px`, i = e.sticky && t.length === r + 1, l = e.sticky && !this.hasStickyColumnsToRight(t, r);
    return {
      leftOffsetForStickyColumn: s,
      columnWidth: o,
      isLastColumnSticky: i,
      hasShadowRight: l
    };
  }
  applyCellStyles(e, t, r) {
    const { leftOffsetForStickyColumn: s, columnWidth: o, isLastColumnSticky: i, hasShadowRight: l } = r;
    e.style.flex = Boolean(o) ? `0 0 ${o}` : "", !f() && (t.sticky && !i && (e.classList.add("table-cell--is-sticky"), e.style.left = s + "px", l && e.classList.add("table-cell--has-shadow-right")), i && e.classList.add("table-cell--is-sticky-right", "table-cell--has-shadow-left"));
  }
  applyColumnStyles(e, t) {
    if (f())
      return;
    const { leftOffsetForStickyColumn: r, isLastColumnSticky: s, hasShadowRight: o } = t;
    e.sticky && !s && (e.classList.add("table-column--is-sticky"), e.style.left = r + "px", o && e.classList.add("table-column--has-shadow-right")), s && e.classList.add("table-column--is-sticky-right", "table-column--has-shadow-left");
  }
  getLeftOffsetForStickyColumn(e, t) {
    return e.slice(0, t).reduce((r, s) => {
      if (s.sticky)
        return r += s.getBoundingClientRect().width, r;
    }, 0);
  }
  hasStickyColumnsToRight(e, t) {
    return e.slice(t + 1, e.length - 1).some((r) => r.sticky);
  }
  updateEmptyState() {
    const e = this.el.querySelector('[slot="rows"]');
    this.empty = !Boolean(e) || e.children.length === 0;
  }
  updateLiveRegionText(e, t = {}) {
    let r = e ? this.dragDropInstructions[e] : "";
    for (const [s, o] of Object.entries(t != null ? t : {}))
      r = r.replaceAll(`{${s}}`, String(o));
    r !== this.liveRegionText && (this.liveRegionText = r);
  }
  toggleKeyboardMove(e) {
    this.movingViaKeyboard ? this.endKeyboardMove(e) : this.startKeyboardMove(e);
  }
  startKeyboardMove(e) {
    this.movingViaKeyboard = !0, this.positionBeforeKeyboardMove = Array.from(this.dragDropContainer.children).indexOf(e), e.classList.add("table-row--moving"), this.updateLiveRegionText("start", {
      position: Array.from(this.dragDropContainer.children).indexOf(e) + 1,
      rowCount: this.dragDropContainer.children.length
    });
  }
  endKeyboardMove(e) {
    this.movingViaKeyboard = !1, e.classList.remove("table-row--moving"), this.updateLiveRegionText("end", {
      position: Array.from(this.dragDropContainer.children).indexOf(e) + 1,
      rowCount: this.dragDropContainer.children.length
    }), this.dropRow.emit({
      item: e,
      newIndex: Array.from(this.dragDropContainer.children).indexOf(e),
      oldIndex: this.positionBeforeKeyboardMove,
      itemId: e.id,
      newNextSiblingItemId: Array.from(this.dragDropContainer.children).indexOf(e) < this.dragDropContainer.children.length - 1 ? this.dragDropContainer.children[Array.from(this.dragDropContainer.children).indexOf(e) + 1].id : void 0,
      newPrevSiblingItemId: Array.from(this.dragDropContainer.children).indexOf(e) > 0 ? this.dragDropContainer.children[Array.from(this.dragDropContainer.children).indexOf(e) - 1].id : void 0
    }), this.positionBeforeKeyboardMove = void 0;
  }
  cancelKeyboardMove() {
    if (!this.movingViaKeyboard)
      return;
    const e = this.el.querySelector(".table-row--moving");
    !e || (e.classList.remove("table-row--moving"), this.movingViaKeyboard = !1, this.positionBeforeKeyboardMove !== void 0 && this.dragDropContainer.insertBefore(e, this.dragDropContainer.children[this.positionBeforeKeyboardMove]));
  }
  moveRow(e, t) {
    if (!this.movingViaKeyboard)
      return;
    let r;
    if (t === "up") {
      const s = Array.from(this.dragDropContainer.children).indexOf(e);
      r = Math.max(0, s - 1), this.dragDropContainer.insertBefore(e, this.dragDropContainer.children[r]);
    } else {
      const s = Array.from(this.dragDropContainer.children).indexOf(e);
      r = Math.min(this.dragDropContainer.children.length - 1, s + 1), this.dragDropContainer.insertBefore(e, this.dragDropContainer.children[r + 1]);
    }
    this.updateLiveRegionText("moved", {
      position: r + 1,
      rowCount: this.dragDropContainer.children.length
    }), this.focusDragHandleOfRow(e);
  }
  focusDragHandleOfRow(e) {
    var r, s;
    const t = (r = T(e, this.dragDropHandle)) == null ? void 0 : r[0];
    t.tagName === "BUTTON" ? t.focus() : (s = t.querySelector("button")) == null || s.focus();
  }
  render() {
    const e = Boolean(this.el.querySelector('[slot="empty"]')), t = O("table", {
      "table--show-empty-state": this.empty && !this.loading,
      "table--keyboard-move": this.movingViaKeyboard
    });
    return a(_, { key: "6713563d8bcfaecd014d5ccc783fd97c66008012" }, a("div", { key: "b168785741aa3560982d535839fa4e6657bfaacc", class: t }, this.enableDragDrop && a("swirl-visually-hidden", { key: "01d848a7a555f0cd59de1379d9144dd77f7978ff" }, a("span", { key: "fad5c4258a72b5f4773665d1e49cf0c9cf2425fd", "aria-live": "assertive" }, this.liveRegionText)), a("div", { key: "cea73b692b544d64c4e1ab794b22cd3c520beecd", class: "table__container", onFocusin: this.onFocus, onFocusout: this.onBlur, onKeyDown: this.onKeyDown, onScroll: this.onScroll, ref: (r) => this.container = r, tabIndex: -1 }, a("div", { key: "9de016213d0eab8abcfebbe4d8c22ff1c5f30c55", "aria-describedby": Boolean(this.caption) ? "caption" : void 0, "aria-label": this.label, role: "table", class: "table__table" }, this.caption && a("swirl-visually-hidden", { key: "37511e129309ffca404a84c85370c8e4269c5d04" }, a("div", { key: "8c18e6ab4bc3fc90d2a558039102a2f9af9b206e", id: "caption" }, this.caption)), a("div", { key: "a4b7ac36016b3d8823849aa9c1119e623e5d2800", role: "rowgroup" }, a("div", { key: "f730d694cbb541c8179101e6f32b6c55f2a2a7bd", class: "table__header", ref: (r) => this.headerEl = r, role: "row" }, a("slot", { key: "2ba3a5ff89e0285ce5d3525c98013e291459a209", name: "columns" }))), a("div", { key: "ecc5ef81fa7ce92c101de93ec3dcf47db034d0ec", class: "table__body", ref: (r) => this.bodyEl = r }, a("slot", { key: "13b4e833f51182647ad24e8ac2504a5d0b5ba9fb", name: "rows" }), a("div", { key: "de71a4fe643d1d0f1e79f78a7c829ca74d3715fe", class: "table__empty-row", role: "row" }, a("div", { key: "e5c155f50575d93a238e9d628e3500f3eea33b95", "aria-colspan": this.getColumns().length, class: "table__empty-row-cell", role: "cell" }, a("slot", { key: "168cba4089c52914457c95d2dd6210b1db8a2122", name: "empty" }), !e && a("swirl-text", { key: "a108652dd9ce24ad2517def4df4c157078a4f01a", align: "center", size: "sm" }, this.emptyStateLabel))))))));
  }
  get el() {
    return k(this);
  }
  static get watchers() {
    return {
      enableDragDrop: [{
        handleEnableDragDropChange: 0
      }]
    };
  }
};
W.style = K();
export {
  W as swirl_table
};
