@mhmo91/schmancy 0.2.193 → 0.2.195

package/dist/{table-CqUv1TOC.js → table-DuUlrDCu.js}

@@ -1,21 +1,21 @@
-import { _ as g } from "./tslib.es6-ujVQHAQ4.js";
-import { html as c, noChange as P, LitElement as H } from "lit";
-import { property as f } from "lit/decorators/property.js";
+import { _ as f } from "./tslib.es6-ujVQHAQ4.js";
+import { html as a, noChange as P, LitElement as H } from "lit";
+import { property as v } from "lit/decorators/property.js";
 import { directive as W, PartType as q } from "lit/directive.js";
 import { AsyncDirective as U } from "lit/async-directive.js";
 import { repeat as G } from "lit/directives/repeat.js";
-import { $ as D } from "./litElement.mixin-B9Qdq5S_.js";
-import { property as _, customElement as M, state as z } from "lit/decorators.js";
-var J = Object.defineProperty, X = Object.getOwnPropertyDescriptor, b = (s, t, e, i) => {
+import { $ as D } from "./litElement.mixin-BoUiP2tU.js";
+import { property as _, customElement as M, state as x } from "lit/decorators.js";
+var J = Object.defineProperty, X = Object.getOwnPropertyDescriptor, w = (s, t, e, i) => {
   for (var r, l = i > 1 ? void 0 : i ? X(t, e) : t, o = s.length - 1; o >= 0; o--) (r = s[o]) && (l = (i ? r(t, e, l) : r(l)) || l);
   return i && l && J(t, e, l), l;
 };
-let v = class extends D() {
+let b = class extends D() {
   constructor() {
     super(...arguments), this.columns = [], this.cols = this.columns.map(() => "1fr").join(" ");
   }
   renderCell(s) {
-    if (s.render) return c`
+    if (s.render) return a`
 				<div class="overflow-hidden text-ellipsis">
 					<schmancy-typography align="${s.align || "left"}" maxLines="2" weight="${s.weight || "normal"}">
 						${s.render(this.item)}
@@ -23,7 +23,7 @@ let v = class extends D() {
 				</div>
 			`;
     const t = s.key ? this.item[s.key] : "";
-    return c`
+    return a`
 			<div class="overflow-hidden text-ellipsis">
 				<schmancy-typography align="${s.align || "left"}" maxLines="2" weight="${s.weight || "normal"}">
 					${t}
@@ -32,7 +32,7 @@ let v = class extends D() {
 		`;
   }
   render() {
-    return c`
+    return a`
 			<schmancy-list-item class="w-full">
 				<schmancy-grid .cols=${this.cols} align="center" gap="md">
 					${this.columns.map((s) => this.renderCell(s))}
@@ -41,25 +41,25 @@ let v = class extends D() {
 		`;
   }
 };
-b([_({ type: Array, attribute: !1 })], v.prototype, "columns", 2), b([_({ type: Object, attribute: !1 })], v.prototype, "item", 2), b([_({ type: String })], v.prototype, "cols", 2), v = b([M("schmancy-table-row")], v);
-class S extends Event {
-  constructor(t) {
-    super(S.eventName, { bubbles: !1 }), this.first = t.first, this.last = t.last;
-  }
-}
-S.eventName = "rangeChanged";
+w([_({ type: Array, attribute: !1 })], b.prototype, "columns", 2), w([_({ type: Object, attribute: !1 })], b.prototype, "item", 2), w([_({ type: String })], b.prototype, "cols", 2), b = w([M("schmancy-table-row")], b);
 class E extends Event {
   constructor(t) {
     super(E.eventName, { bubbles: !1 }), this.first = t.first, this.last = t.last;
   }
 }
-E.eventName = "visibilityChanged";
+E.eventName = "rangeChanged";
 class L extends Event {
+  constructor(t) {
+    super(L.eventName, { bubbles: !1 }), this.first = t.first, this.last = t.last;
+  }
+}
+L.eventName = "visibilityChanged";
+class z extends Event {
   constructor() {
-    super(L.eventName, { bubbles: !1 });
+    super(z.eventName, { bubbles: !1 });
   }
 }
-L.eventName = "unpinned";
+z.eventName = "unpinned";
 class Y {
   constructor(t) {
     this._element = null;
@@ -153,7 +153,7 @@ class K extends Y {
   }
 }
 let k = typeof window < "u" ? window.ResizeObserver : void 0;
-const x = Symbol("virtualizerRef"), w = "virtualizer-sizer";
+const T = Symbol("virtualizerRef"), C = "virtualizer-sizer";
 let O;
 class Q {
   constructor(t) {
@@ -174,7 +174,7 @@ class Q {
   }
   _initHostElement(t) {
     const e = this._hostElement = t.hostElement;
-    this._applyVirtualizerStyles(), e[x] = this;
+    this._applyVirtualizerStyles(), e[T] = this;
   }
   connected() {
     this._initObservers();
@@ -182,10 +182,10 @@ class Q {
     this._clippingAncestors = function(e, i = !1) {
       let r = !1;
       return function(l, o = !1) {
-        const a = [];
+        const c = [];
         let h = o ? l : V(l);
-        for (; h !== null; ) a.push(h), h = V(h);
-        return a;
+        for (; h !== null; ) c.push(h), h = V(h);
+        return c;
       }(e, i).filter((l) => {
         if (r) return !1;
         const o = getComputedStyle(l);
@@ -209,8 +209,8 @@ class Q {
   _getSizer() {
     const t = this._hostElement;
     if (!this._sizer) {
-      let e = t.querySelector(`[${w}]`);
-      e || (e = document.createElement("div"), e.setAttribute(w, ""), t.appendChild(e)), Object.assign(e.style, { position: "absolute", margin: "-2px 0 0 0", padding: 0, visibility: "hidden", fontSize: "2px" }), e.textContent = "&nbsp;", e.setAttribute(w, ""), this._sizer = e;
+      let e = t.querySelector(`[${C}]`);
+      e || (e = document.createElement("div"), e.setAttribute(C, ""), t.appendChild(e)), Object.assign(e.style, { position: "absolute", margin: "-2px 0 0 0", padding: 0, visibility: "hidden", fontSize: "2px" }), e.textContent = "&nbsp;", e.setAttribute(C, ""), this._sizer = e;
     }
     return this._sizer;
   }
@@ -254,7 +254,7 @@ class Q {
     const { width: e, height: i } = t.getBoundingClientRect();
     return Object.assign({ width: e, height: i }, function(r) {
       const l = window.getComputedStyle(r);
-      return { marginTop: C(l.marginTop), marginRight: C(l.marginRight), marginBottom: C(l.marginBottom), marginLeft: C(l.marginLeft) };
+      return { marginTop: S(l.marginTop), marginRight: S(l.marginRight), marginBottom: S(l.marginBottom), marginLeft: S(l.marginLeft) };
     }(t));
   }
   async _schedule(t) {
@@ -286,25 +286,25 @@ class Q {
     t.type === "scroll" && (t.currentTarget === window || this._clippingAncestors.includes(t.currentTarget)) && this._handleScrollEvent();
   }
   _handleLayoutMessage(t) {
-    t.type === "stateChanged" ? this._updateDOM(t) : t.type === "visibilityChanged" ? (this._firstVisible = t.firstVisible, this._lastVisible = t.lastVisible, this._notifyVisibility()) : t.type === "unpinned" && this._hostElement.dispatchEvent(new L());
+    t.type === "stateChanged" ? this._updateDOM(t) : t.type === "visibilityChanged" ? (this._firstVisible = t.firstVisible, this._lastVisible = t.lastVisible, this._notifyVisibility()) : t.type === "unpinned" && this._hostElement.dispatchEvent(new z());
   }
   get _children() {
     const t = [];
     let e = this._hostElement.firstElementChild;
-    for (; e; ) e.hasAttribute(w) || t.push(e), e = e.nextElementSibling;
+    for (; e; ) e.hasAttribute(C) || t.push(e), e = e.nextElementSibling;
     return t;
   }
   _updateView() {
     var r;
     const t = this._hostElement, e = (r = this._scrollerController) == null ? void 0 : r.element, i = this._layout;
     if (t && e && i) {
-      let l, o, a, h;
+      let l, o, c, h;
       const n = t.getBoundingClientRect();
-      l = 0, o = 0, a = window.innerHeight, h = window.innerWidth;
+      l = 0, o = 0, c = window.innerHeight, h = window.innerWidth;
       const y = this._clippingAncestors.map((m) => m.getBoundingClientRect());
       y.unshift(n);
-      for (const m of y) l = Math.max(l, m.top), o = Math.max(o, m.left), a = Math.min(a, m.bottom), h = Math.min(h, m.right);
-      const T = e.getBoundingClientRect(), $ = { left: n.left - T.left, top: n.top - T.top }, F = { width: e.scrollWidth, height: e.scrollHeight }, N = l - n.top + t.scrollTop, A = o - n.left + t.scrollLeft, B = Math.max(0, a - l), j = Math.max(0, h - o);
+      for (const m of y) l = Math.max(l, m.top), o = Math.max(o, m.left), c = Math.min(c, m.bottom), h = Math.min(h, m.right);
+      const g = e.getBoundingClientRect(), $ = { left: n.left - g.left, top: n.top - g.top }, F = { width: e.scrollWidth, height: e.scrollHeight }, N = l - n.top + t.scrollTop, A = o - n.left + t.scrollLeft, B = Math.max(0, c - l), j = Math.max(0, h - o);
       i.viewportSize = { width: j, height: B }, i.viewportScroll = { top: N, left: A }, i.totalScrollSize = F, i.offsetWithinScroller = $;
     }
   }
@@ -317,9 +317,9 @@ class Q {
     }
   }
   _positionChildren(t) {
-    t && t.forEach(({ top: e, left: i, width: r, height: l, xOffset: o, yOffset: a }, h) => {
+    t && t.forEach(({ top: e, left: i, width: r, height: l, xOffset: o, yOffset: c }, h) => {
       const n = this._children[h - this._first];
-      n && (n.style.position = "absolute", n.style.boxSizing = "border-box", n.style.transform = `translate(${i}px, ${e}px)`, r !== void 0 && (n.style.width = r + "px"), l !== void 0 && (n.style.height = l + "px"), n.style.left = o === void 0 ? null : o + "px", n.style.top = a === void 0 ? null : a + "px");
+      n && (n.style.position = "absolute", n.style.boxSizing = "border-box", n.style.transform = `translate(${i}px, ${e}px)`, r !== void 0 && (n.style.width = r + "px"), l !== void 0 && (n.style.height = l + "px"), n.style.left = o === void 0 ? null : o + "px", n.style.top = c === void 0 ? null : c + "px");
     });
   }
   async _adjustRange(t) {
@@ -348,10 +348,10 @@ class Q {
     e && (t != null && t.has(e)) && this._updateScrollIntoViewCoordinates(this._layout.getScrollIntoViewCoordinates(this._scrollIntoViewTarget));
   }
   _notifyRange() {
-    this._hostElement.dispatchEvent(new S({ first: this._first, last: this._last }));
+    this._hostElement.dispatchEvent(new E({ first: this._first, last: this._last }));
   }
   _notifyVisibility() {
-    this._hostElement.dispatchEvent(new E({ first: this._firstVisible, last: this._lastVisible }));
+    this._hostElement.dispatchEvent(new L({ first: this._firstVisible, last: this._lastVisible }));
   }
   get layoutComplete() {
     return this._layoutCompletePromise || (this._layoutCompletePromise = new Promise((t, e) => {
@@ -384,7 +384,7 @@ class Q {
     this._scheduleLayoutComplete(), this._itemsChanged = !1, this._rangeChanged = !1;
   }
 }
-function C(s) {
+function S(s) {
   const t = s ? parseFloat(s) : NaN;
   return Number.isNaN(t) ? 0 : t;
 }
@@ -394,7 +394,7 @@ function V(s) {
   const t = s.parentNode;
   return t && t.nodeType === Node.DOCUMENT_FRAGMENT_NODE && t.host || null;
 }
-const R = (s) => s, I = (s, t) => c`${t}: ${JSON.stringify(s, null, 2)}`, Z = W(class extends U {
+const R = (s) => s, I = (s, t) => a`${t}: ${JSON.stringify(s, null, 2)}`, Z = W(class extends U {
   constructor(s) {
     if (super(s), this._virtualizer = null, this._first = 0, this._last = -1, this._renderItem = (t, e) => I(t, e + this._first), this._keyFunction = (t, e) => R(t, this._first), this._items = [], s.type !== q.CHILD) throw new Error("The virtualize directive can only be used in child expressions");
   }
@@ -449,22 +449,22 @@ class p extends H {
   }
   render() {
     const { items: t, renderItem: e, keyFunction: i, layout: r, scroller: l } = this;
-    return c`${Z({ items: t, renderItem: e, keyFunction: i, layout: r, scroller: l })}`;
+    return a`${Z({ items: t, renderItem: e, keyFunction: i, layout: r, scroller: l })}`;
   }
   element(t) {
     var e;
-    return (e = this[x]) == null ? void 0 : e.element(t);
+    return (e = this[T]) == null ? void 0 : e.element(t);
   }
   get layoutComplete() {
     var t;
-    return (t = this[x]) == null ? void 0 : t.layoutComplete;
+    return (t = this[T]) == null ? void 0 : t.layoutComplete;
   }
   scrollToIndex(t, e = "start") {
     var i;
     (i = this.element(t)) == null || i.scrollIntoView({ block: e });
   }
 }
-g([f({ attribute: !1 })], p.prototype, "items", void 0), g([f()], p.prototype, "renderItem", void 0), g([f()], p.prototype, "keyFunction", void 0), g([f({ attribute: !1 })], p.prototype, "layout", void 0), g([f({ reflect: !0, type: Boolean })], p.prototype, "scroller", void 0), customElements.define("lit-virtualizer", p);
+f([v({ attribute: !1 })], p.prototype, "items", void 0), f([v()], p.prototype, "renderItem", void 0), f([v()], p.prototype, "keyFunction", void 0), f([v({ attribute: !1 })], p.prototype, "layout", void 0), f([v({ reflect: !0, type: Boolean })], p.prototype, "scroller", void 0), customElements.define("lit-virtualizer", p);
 var tt = Object.defineProperty, et = Object.getOwnPropertyDescriptor, d = (s, t, e, i) => {
   for (var r, l = i > 1 ? void 0 : i ? et(t, e) : t, o = s.length - 1; o >= 0; o--) (r = s[o]) && (l = (i ? r(t, e, l) : r(l)) || l);
   return i && l && tt(t, e, l), l;
@@ -481,20 +481,24 @@ let u = class extends D() {
   }
   processData() {
     let s = [...this.data];
-    this.sortable && this.sortColumn && this.sortDirection && s.sort((t, e) => {
-      const i = t[this.sortColumn], r = e[this.sortColumn];
-      if (i == null) return this.sortDirection === "asc" ? 1 : -1;
-      if (r == null) return this.sortDirection === "asc" ? -1 : 1;
-      if (typeof i == "number" && typeof r == "number") return this.sortDirection === "asc" ? i - r : r - i;
-      const l = typeof i == "string" && !isNaN(Number(i)), o = typeof r == "string" && !isNaN(Number(r));
-      if (l && o) {
-        const n = parseFloat(i), y = parseFloat(r);
-        return this.sortDirection === "asc" ? n - y : y - n;
-      }
-      if (this.isDate(i) && this.isDate(r)) return this.sortDirection === "asc" ? i.getTime() - r.getTime() : r.getTime() - i.getTime();
-      const a = String(i), h = String(r);
-      return this.sortDirection === "asc" ? a.localeCompare(h) : h.localeCompare(a);
-    }), this.filteredData = s;
+    if (this.sortable && this.sortColumn && this.sortDirection) {
+      const t = this.columns.find((e) => e.key === this.sortColumn);
+      s.sort((e, i) => {
+        let r, l;
+        if (t && t.value ? (r = t.value(e), l = t.value(i)) : (r = e[this.sortColumn], l = i[this.sortColumn]), r == null) return this.sortDirection === "asc" ? 1 : -1;
+        if (l == null) return this.sortDirection === "asc" ? -1 : 1;
+        if (typeof r == "number" && typeof l == "number") return this.sortDirection === "asc" ? r - l : l - r;
+        const o = typeof r == "string" && !isNaN(Number(r)), c = typeof l == "string" && !isNaN(Number(l));
+        if (o && c) {
+          const y = parseFloat(r), g = parseFloat(l);
+          return this.sortDirection === "asc" ? y - g : g - y;
+        }
+        if (this.isDate(r) && this.isDate(l)) return this.sortDirection === "asc" ? r.getTime() - l.getTime() : l.getTime() - r.getTime();
+        const h = String(r), n = String(l);
+        return this.sortDirection === "asc" ? h.localeCompare(n) : n.localeCompare(h);
+      });
+    }
+    this.filteredData = s;
   }
   toggleSort(s) {
     if (!s.key || s.sortable === !1) return;
@@ -502,20 +506,20 @@ let u = class extends D() {
     t === this.sortColumn ? this.sortDirection === "asc" ? this.sortDirection = "desc" : this.sortDirection === "desc" ? this.sortDirection = null : this.sortDirection = "asc" : (this.sortColumn = t, this.sortDirection = "asc"), this.dispatchEvent(new CustomEvent("sort-change", { detail: { column: this.sortColumn, direction: this.sortDirection }, bubbles: !0, composed: !0 }));
   }
   renderSortIndicator(s) {
-    return this.sortable && s.sortable !== !1 && s.key && s.key === this.sortColumn ? c`
+    return this.sortable && s.sortable !== !1 && s.key && s.key === this.sortColumn ? a`
 			<span class="ml-1">
-				${this.sortDirection === "asc" ? c`<schmancy-icon size="16px">arrow_upward</schmancy-icon>` : this.sortDirection === "desc" ? c`<schmancy-icon size="16px">arrow_downward</schmancy-icon>` : null}
+				${this.sortDirection === "asc" ? a`<schmancy-icon size="16px">arrow_upward</schmancy-icon>` : this.sortDirection === "desc" ? a`<schmancy-icon size="16px">arrow_downward</schmancy-icon>` : null}
 			</span>
 		` : null;
   }
   render() {
     const s = (t) => ({ "flex items-center": !0, "cursor-pointer gap-1": this.sortable && t.sortable !== !1 && t.key });
-    return c`
+    return a`
 			<schmancy-surface fill="all" type="container" rounded="all" elevation="2">
 				<schmancy-grid class="h-full w-full" cols="1fr" rows="auto 1fr">
 					<schmancy-surface rounded="top" elevation="1" type="containerHighest" class="sticky top-0 z-10">
 						<schmancy-grid align="center" class="px-4 py-3" .cols=${this.cols} gap="md" rows="1fr">
-							${this.columns.map((t) => c`
+							${this.columns.map((t) => a`
 									<div
 										class=${this.classMap(s(t))}
 										@click=${() => this.sortable && t.sortable !== !1 ? this.toggleSort(t) : null}
@@ -529,12 +533,12 @@ let u = class extends D() {
 						</schmancy-grid>
 					</schmancy-surface>
 
-					${this.filteredData.length > 0 ? c`
+					${this.filteredData.length > 0 ? a`
 								<lit-virtualizer
 									scroller
 									class="w-full h-full relative overflow-auto"
 									.items=${this.filteredData}
-									.renderItem=${(t, e) => c`
+									.renderItem=${(t, e) => a`
 											<schmancy-table-row
 												class="w-full border-b border-solid border-outlineVariant"
 												.columns=${this.columns}
@@ -547,7 +551,7 @@ let u = class extends D() {
 											></schmancy-table-row>
 										`}
 								></lit-virtualizer>
-							` : c`
+							` : a`
 								<div class="flex items-center justify-center w-full h-full p-8 text-center">
 									<schmancy-typography type="body" token="lg"> No data available </schmancy-typography>
 								</div>
@@ -557,9 +561,9 @@ let u = class extends D() {
 		`;
   }
 };
-d([_({ type: Array, attribute: !1 })], u.prototype, "columns", 2), d([_({ type: Array, attribute: !1 })], u.prototype, "data", 2), d([_({ type: String })], u.prototype, "keyField", 2), d([_({ type: String })], u.prototype, "cols", 2), d([_({ type: Boolean })], u.prototype, "sortable", 2), d([z()], u.prototype, "sortColumn", 2), d([z()], u.prototype, "sortDirection", 2), d([z()], u.prototype, "filteredData", 2), u = d([M("schmancy-table")], u);
+d([_({ type: Array, attribute: !1 })], u.prototype, "columns", 2), d([_({ type: Array, attribute: !1 })], u.prototype, "data", 2), d([_({ type: String })], u.prototype, "keyField", 2), d([_({ type: String })], u.prototype, "cols", 2), d([_({ type: Boolean })], u.prototype, "sortable", 2), d([x()], u.prototype, "sortColumn", 2), d([x()], u.prototype, "sortDirection", 2), d([x()], u.prototype, "filteredData", 2), u = d([M("schmancy-table")], u);
 export {
-  v as S,
+  b as S,
   u as a
 };
-//# sourceMappingURL=table-CqUv1TOC.js.map
+//# sourceMappingURL=table-DuUlrDCu.js.map