@getflip/swirl-components-react 0.42.2 → 0.43.1

package/dist/swirl-table.entry.f093c201.js

@@ -1,153 +0,0 @@
-import { r as g, h as i, H as _, g as S } from "./index.050f274b.js";
-import { i as v } from "./utils-61f188cc.4a43deab.js";
-import "react";
-import "react-dom";
-var C = function(e) {
-  var a = arguments.length > 1 && arguments[1] !== void 0 ? arguments[1] : 0, s = arguments.length > 2 && arguments[2] !== void 0 ? arguments[2] : {}, n = void 0, r = void 0, c = void 0, o = [];
-  return function() {
-    var b = L(a), h = new Date().getTime(), y = !n || h - n > b;
-    n = h;
-    for (var l = arguments.length, u = Array(l), w = 0; w < l; w++)
-      u[w] = arguments[w];
-    if (y && s.leading)
-      return s.accumulate ? Promise.resolve(e.call(this, [u])).then(function(f) {
-        return f[0];
-      }) : Promise.resolve(e.call.apply(e, [this].concat(u)));
-    if (r ? clearTimeout(c) : r = x(), o.push(u), c = setTimeout(m.bind(this), b), s.accumulate) {
-      var p = o.length - 1;
-      return r.promise.then(function(f) {
-        return f[p];
-      });
-    }
-    return r.promise;
-  };
-  function m() {
-    var d = r;
-    clearTimeout(c), Promise.resolve(s.accumulate ? e.call(this, o) : e.apply(this, o[o.length - 1])).then(d.resolve, d.reject), o = [], r = null;
-  }
-};
-function L(t) {
-  return typeof t == "function" ? t() : t;
-}
-function x() {
-  var t = {};
-  return t.promise = new Promise(function(e, a) {
-    t.resolve = e, t.reject = a;
-  }), t;
-}
-const R = `:host{position:relative;display:block}:host *{box-sizing:border-box}.table__container{position:relative;overflow:auto;width:100%}.table__container--scrolled{--swirl-table-sticky-right-shadow:0.0625rem 0 0 0 var(--s-border-default),
-    -0.0625rem 0 0 0 var(--s-border-default),
-    0 0.25rem 1rem rgba(25, 26, 28, 0.04),
-    0 0.0625rem 0.25rem rgba(25, 26, 28, 0.16)}.table__container--scrollable:not(.table__container--scrolled-to-end){--swirl-table-sticky-left-shadow:0.0625rem 0 0 0 var(--s-border-default),
-    -0.0625rem 0 0 0 var(--s-border-default),
-    0 0.25rem 1rem rgba(25, 26, 28, 0.04),
-    0 0.0625rem 0.25rem rgba(25, 26, 28, 0.16)}.table__table{width:-webkit-max-content;width:-moz-max-content;width:max-content;min-width:max(20rem, 100%)}.table__header ::slotted(*){display:flex}.table__empty-row{display:flex}.table__empty-row-cell{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;border-right:var(--s-border-width-default) solid var(--s-border-default);border-bottom:var(--s-border-width-default) solid var(--s-border-default);border-left:var(--s-border-width-default) solid var(--s-border-default);background-color:var(--s-background-default)}.table__empty-row-cell>*{flex-grow:1}`, T = class {
-  constructor(t) {
-    g(this, t), this.updateLayout = C(async () => {
-      await this.resetEmptyRowStyles(), await this.resetRowGroupStyles(), await this.resetCellStyles(), await this.resetColumnStyles(), await this.layoutEmptyRow(), await this.layoutRowGroups(), await this.layOutColumns(), this.layOutCells();
-    }, 17, { leading: !0 }), this.onScroll = () => {
-      this.updateScrolledState();
-    }, this.caption = void 0, this.emptyStateLabel = "No results found.", this.label = void 0, this.empty = void 0, this.scrollable = void 0, this.scrolled = void 0, this.scrolledToEnd = void 0;
-  }
-  componentDidLoad() {
-    this.observer = new MutationObserver(async () => {
-      await this.updateLayout(), this.updateScrolledState(), this.updateEmptyState();
-    }), this.observer.observe(this.el, {
-      childList: !0,
-      subtree: !0
-    });
-  }
-  disconnectedCallback() {
-    var t, e;
-    (t = this.columnObserver) === null || t === void 0 || t.disconnect(), (e = this.observer) === null || e === void 0 || e.disconnect();
-  }
-  async componentDidRender() {
-    await this.updateLayout(), this.updateScrolledState(), this.updateEmptyState();
-  }
-  async onWindowResize() {
-    await this.updateLayout(), this.updateScrolledState();
-  }
-  updateScrolledState() {
-    const t = v(), e = this.container.scrollWidth > this.container.clientWidth, a = this.container.scrollLeft > 0, s = Math.ceil(this.container.clientWidth + this.container.scrollLeft) >= Math.floor(this.container.scrollWidth);
-    e !== this.scrollable && (e && !t ? this.container.classList.add("table__container--scrollable") : this.container.classList.remove("table__container--scrollable")), a !== this.scrolled && (a && !t ? this.container.classList.add("table__container--scrolled") : this.container.classList.remove("table__container--scrolled")), s !== this.scrolledToEnd && (s && !t ? 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"));
-  }
-  async resetEmptyRowStyles() {
-    const t = this.el.shadowRoot.querySelector(".table__empty-row");
-    !Boolean(t) || (t.style.width = "", await new Promise((e) => setTimeout(e)));
-  }
-  async resetRowGroupStyles() {
-    Array.from(this.el.querySelectorAll("swirl-table-row-group")).forEach((e) => {
-      e.shadowRoot.querySelector(".table-row-group__header-row").style.width = "";
-    }), await new Promise((e) => setTimeout(e));
-  }
-  async resetColumnStyles() {
-    this.getColumns().forEach((e) => {
-      e.classList.remove("table-column--has-shadow"), e.style.right = "", e.style.left = "", e.style.position = "", e.style.zIndex = "";
-    }), await new Promise((e) => setTimeout(e));
-  }
-  async resetCellStyles() {
-    this.getCells().forEach((e) => {
-      e.classList.remove("table-cell--has-shadow"), e.style.flex = "", e.style.left = "", e.style.right = "", e.style.position = "", e.style.zIndex = "";
-    }), await new Promise((e) => setTimeout(e));
-  }
-  async layoutEmptyRow() {
-    const t = this.el.shadowRoot.querySelector(".table__empty-row");
-    if (!Boolean(t))
-      return;
-    const e = `${this.el.shadowRoot.querySelector(".table__container").scrollWidth}px`;
-    t.style.width = e;
-  }
-  async layoutRowGroups() {
-    const t = Array.from(this.el.querySelectorAll("swirl-table-row-group")), e = `${this.el.shadowRoot.querySelector(".table__container").scrollWidth}px`;
-    t.forEach((a) => {
-      a.shadowRoot.querySelector(".table-row-group__header-row").style.width = e;
-    });
-  }
-  async layOutColumns() {
-    const t = this.getColumns(), a = this.container.clientWidth;
-    t.forEach((s, n) => {
-      var r, c;
-      if (!s.sticky || v())
-        return;
-      const o = n <= Math.floor(t.length / 2), m = (r = t[n + 1]) === null || r === void 0 ? void 0 : r.sticky, d = (c = t[n - 1]) === null || c === void 0 ? void 0 : c.sticky, b = o && m;
-      s.style.zIndex = b ? "1" : "", o && !m || !o && !d ? s.classList.add(o ? "table-column--has-shadow-right" : "table-column--has-shadow-left") : (s.classList.remove("table-column--has-shadow-right"), s.classList.remove("table-column--has-shadow-left"));
-      const y = o ? s.offsetLeft : Math.max(0, a - (s.offsetLeft + s.getBoundingClientRect().width));
-      s.style.position = "sticky", o ? s.style.left = `${y}px` : s.style.right = `${y}px`;
-    }), await new Promise((s) => setTimeout(s));
-  }
-  layOutCells() {
-    const t = this.getColumns(), e = this.getCells();
-    t.forEach((a, s) => {
-      var n, r;
-      const c = e.filter((l, u) => (s - u) % t.length === 0), o = s <= Math.floor(t.length / 2), m = o ? window.getComputedStyle(a).left : window.getComputedStyle(a).right, d = (n = t[s + 1]) === null || n === void 0 ? void 0 : n.sticky, b = (r = t[s - 1]) === null || r === void 0 ? void 0 : r.sticky, h = a.sticky, y = a.width || `${a.getBoundingClientRect().width}px`;
-      c.forEach((l) => {
-        const u = h && o, w = h && !o, p = o && d;
-        if (l.style.flex = Boolean(y) ? `0 0 ${y}` : "", v()) {
-          l.classList.remove("table-cell--has-shadow"), l.style.left = "", l.style.right = "", l.style.position = "", l.style.zIndex = "";
-          return;
-        }
-        l.style.left = u ? m : "", l.style.right = w ? m : "", l.style.position = h ? "sticky" : "", l.style.zIndex = p ? "1" : "", h && (o && !d || !o && !b) ? l.classList.add(o ? "table-cell--has-shadow-right" : "table-cell--has-shadow-left") : (l.classList.remove("table-cell--has-shadow-right"), l.classList.remove("table-cell--has-shadow-left"));
-      });
-    });
-  }
-  updateEmptyState() {
-    const t = this.el.querySelector('[slot="rows"]');
-    this.empty = !Boolean(t) || t.children.length === 0;
-  }
-  render() {
-    return i(_, null, i("div", { class: "table" }, i("div", { class: "table__container", onScroll: this.onScroll, ref: (t) => this.container = t }, i("div", { "aria-describedby": Boolean(this.caption) ? "caption" : void 0, "aria-label": this.label, role: "table", class: "table__table" }, this.caption && i("swirl-visually-hidden", null, i("div", { id: "caption" }, this.caption)), i("div", { role: "rowgroup" }, i("div", { class: "table__header", role: "row" }, i("slot", { name: "columns" }))), i("div", { class: "table__body" }, i("slot", { name: "rows" }), this.empty && i("div", { class: "table__empty-row", role: "row" }, i("div", { "aria-colspan": this.getColumns().length, class: "table__empty-row-cell", role: "cell" }, i("swirl-text", { align: "center", size: "sm" }, this.emptyStateLabel))))))));
-  }
-  get el() {
-    return S(this);
-  }
-};
-T.style = R;
-export {
-  T as swirl_table
-};