@mhmo91/schmancy 0.2.176 → 0.2.178

package/dist/{table-DPXzmJkJ.js → table-CGsVUEWl.js}

@@ -1,21 +1,21 @@
-import { _ as y } from "./tslib.es6-ujVQHAQ4.js";
-import { html as h, noChange as j, LitElement as H } from "lit";
-import { property as g } from "lit/decorators/property.js";
+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 { 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 M } from "./litElement.mixin-DJC1EaoO.js";
-import { property as _, customElement as D, state as L } from "lit/decorators.js";
-var J = Object.defineProperty, X = Object.getOwnPropertyDescriptor, v = (s, t, e, i) => {
+import { $ as D } from "./litElement.mixin-COog0CXV.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) => {
   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 f = class extends M() {
+let v = class extends D() {
   constructor() {
     super(...arguments), this.columns = [], this.cols = this.columns.map(() => "1fr").join(" ");
   }
   renderCell(s) {
-    if (s.render) return h`
+    if (s.render) return c`
 				<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 f = class extends M() {
 				</div>
 			`;
     const t = s.key ? this.item[s.key] : "";
-    return h`
+    return c`
 			<div class="overflow-hidden text-ellipsis">
 				<schmancy-typography align="${s.align || "left"}" maxLines="2" weight="${s.weight || "normal"}">
 					${t}
@@ -32,7 +32,7 @@ let f = class extends M() {
 		`;
   }
   render() {
-    return h`
+    return c`
 			<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 f = class extends M() {
 		`;
   }
 };
-v([_({ type: Array, attribute: !1 })], f.prototype, "columns", 2), v([_({ type: Object, attribute: !1 })], f.prototype, "item", 2), v([_({ type: String })], f.prototype, "cols", 2), f = v([D("schmancy-table-row")], f);
-class C extends Event {
-  constructor(t) {
-    super(C.eventName, { bubbles: !1 }), this.first = t.first, this.last = t.last;
-  }
-}
-C.eventName = "rangeChanged";
+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 = "visibilityChanged";
+S.eventName = "rangeChanged";
 class E extends Event {
+  constructor(t) {
+    super(E.eventName, { bubbles: !1 }), this.first = t.first, this.last = t.last;
+  }
+}
+E.eventName = "visibilityChanged";
+class L extends Event {
   constructor() {
-    super(E.eventName, { bubbles: !1 });
+    super(L.eventName, { bubbles: !1 });
   }
 }
-E.eventName = "unpinned";
+L.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 z = Symbol("virtualizerRef"), b = "virtualizer-sizer";
+const x = Symbol("virtualizerRef"), w = "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[z] = this;
+    this._applyVirtualizerStyles(), e[x] = 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 c = [];
-        let a = o ? l : V(l);
-        for (; a !== null; ) c.push(a), a = V(a);
-        return c;
+        const a = [];
+        let h = o ? l : V(l);
+        for (; h !== null; ) a.push(h), h = V(h);
+        return a;
       }(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(`[${b}]`);
-      e || (e = document.createElement("div"), e.setAttribute(b, ""), 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(b, ""), this._sizer = e;
+      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;
     }
     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: w(l.marginTop), marginRight: w(l.marginRight), marginBottom: w(l.marginBottom), marginLeft: w(l.marginLeft) };
+      return { marginTop: C(l.marginTop), marginRight: C(l.marginRight), marginBottom: C(l.marginBottom), marginLeft: C(l.marginLeft) };
     }(t));
   }
   async _schedule(t) {
@@ -286,26 +286,26 @@ 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 E());
+    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());
   }
   get _children() {
     const t = [];
     let e = this._hostElement.firstElementChild;
-    for (; e; ) e.hasAttribute(b) || t.push(e), e = e.nextElementSibling;
+    for (; e; ) e.hasAttribute(w) || 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, c, a;
+      let l, o, a, h;
       const n = t.getBoundingClientRect();
-      l = 0, o = 0, c = window.innerHeight, a = window.innerWidth;
-      const x = this._clippingAncestors.map((m) => m.getBoundingClientRect());
-      x.unshift(n);
-      for (const m of x) l = Math.max(l, m.top), o = Math.max(o, m.left), c = Math.min(c, m.bottom), a = Math.min(a, m.right);
-      const T = e.getBoundingClientRect(), $ = { left: n.left - T.left, top: n.top - T.top }, A = { width: e.scrollWidth, height: e.scrollHeight }, F = l - n.top + t.scrollTop, B = o - n.left + t.scrollLeft, N = Math.max(0, c - l), P = Math.max(0, a - o);
-      i.viewportSize = { width: P, height: N }, i.viewportScroll = { top: F, left: B }, i.totalScrollSize = A, i.offsetWithinScroller = $;
+      l = 0, o = 0, a = 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);
+      i.viewportSize = { width: j, height: B }, i.viewportScroll = { top: N, left: A }, i.totalScrollSize = F, i.offsetWithinScroller = $;
     }
   }
   _sizeHostElement(t) {
@@ -317,9 +317,9 @@ class Q {
     }
   }
   _positionChildren(t) {
-    t && t.forEach(({ top: e, left: i, width: r, height: l, xOffset: o, yOffset: c }, a) => {
-      const n = this._children[a - 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 = c === void 0 ? null : c + "px");
+    t && t.forEach(({ top: e, left: i, width: r, height: l, xOffset: o, yOffset: a }, 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");
     });
   }
   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 C({ first: this._first, last: this._last }));
+    this._hostElement.dispatchEvent(new S({ first: this._first, last: this._last }));
   }
   _notifyVisibility() {
-    this._hostElement.dispatchEvent(new S({ first: this._firstVisible, last: this._lastVisible }));
+    this._hostElement.dispatchEvent(new E({ 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 w(s) {
+function C(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) => h`${t}: ${JSON.stringify(s, null, 2)}`, Z = W(class extends U {
+const R = (s) => s, I = (s, t) => c`${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");
   }
@@ -407,7 +407,7 @@ const R = (s) => s, I = (s, t) => h`${t}: ${JSON.stringify(s, null, 2)}`, Z = W(
   update(s, [t]) {
     this._setFunctions(t);
     const e = this._items !== t.items;
-    return this._items = t.items || [], this._virtualizer ? this._updateVirtualizerConfig(s, t) : this._initialize(s, t), e ? j : this.render();
+    return this._items = t.items || [], this._virtualizer ? this._updateVirtualizerConfig(s, t) : this._initialize(s, t), e ? P : this.render();
   }
   async _updateVirtualizerConfig(s, t) {
     if (!await this._virtualizer.updateLayoutConfig(t.layout || {})) {
@@ -449,44 +449,51 @@ class p extends H {
   }
   render() {
     const { items: t, renderItem: e, keyFunction: i, layout: r, scroller: l } = this;
-    return h`${Z({ items: t, renderItem: e, keyFunction: i, layout: r, scroller: l })}`;
+    return c`${Z({ items: t, renderItem: e, keyFunction: i, layout: r, scroller: l })}`;
   }
   element(t) {
     var e;
-    return (e = this[z]) == null ? void 0 : e.element(t);
+    return (e = this[x]) == null ? void 0 : e.element(t);
   }
   get layoutComplete() {
     var t;
-    return (t = this[z]) == null ? void 0 : t.layoutComplete;
+    return (t = this[x]) == null ? void 0 : t.layoutComplete;
   }
   scrollToIndex(t, e = "start") {
     var i;
     (i = this.element(t)) == null || i.scrollIntoView({ block: e });
   }
 }
-y([g({ attribute: !1 })], p.prototype, "items", void 0), y([g()], p.prototype, "renderItem", void 0), y([g()], p.prototype, "keyFunction", void 0), y([g({ attribute: !1 })], p.prototype, "layout", void 0), y([g({ reflect: !0, type: Boolean })], p.prototype, "scroller", void 0), customElements.define("lit-virtualizer", p);
+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);
 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;
 };
-let u = class extends M() {
+let u = class extends D() {
   constructor() {
     super(), this.columns = [], this.data = [], this.keyField = "id", this.cols = "1fr", this.sortable = !1, this.sortColumn = null, this.sortDirection = null, this.filteredData = [], this.filteredData = this.data;
   }
   willUpdate(s) {
     (s.has("data") || s.has("sortColumn") || s.has("sortDirection")) && this.processData();
   }
+  isDate(s) {
+    return s && typeof s == "object" && Object.prototype.toString.call(s) === "[object Date]";
+  }
   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 (typeof i == "string" && typeof r == "string") return this.sortDirection === "asc" ? i.localeCompare(r) : r.localeCompare(i);
+      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;
-      if (i && r && i instanceof Date && r instanceof Date) return this.sortDirection === "asc" ? i.getTime() - r.getTime() : r.getTime() - i.getTime();
-      {
-        const l = String(i || ""), o = String(r || "");
-        return this.sortDirection === "asc" ? l.localeCompare(o) : o.localeCompare(l);
+      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;
   }
   toggleSort(s) {
@@ -495,20 +502,20 @@ let u = class extends M() {
     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 ? h`
+    return this.sortable && s.sortable !== !1 && s.key && s.key === this.sortColumn ? c`
 			<span class="ml-1">
-				${this.sortDirection === "asc" ? h`<schmancy-icon size="16px">arrow_upward</schmancy-icon>` : this.sortDirection === "desc" ? h`<schmancy-icon size="16px">arrow_downward</schmancy-icon>` : null}
+				${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}
 			</span>
 		` : null;
   }
   render() {
     const s = (t) => ({ "flex items-center": !0, "cursor-pointer gap-1": this.sortable && t.sortable !== !1 && t.key });
-    return h`
+    return c`
 			<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) => h`
+							${this.columns.map((t) => c`
 									<div
 										class=${this.classMap(s(t))}
 										@click=${() => this.sortable && t.sortable !== !1 ? this.toggleSort(t) : null}
@@ -522,12 +529,12 @@ let u = class extends M() {
 						</schmancy-grid>
 					</schmancy-surface>
 
-					${this.filteredData.length > 0 ? h`
+					${this.filteredData.length > 0 ? c`
 								<lit-virtualizer
 									scroller
 									class="w-full h-full relative overflow-auto"
 									.items=${this.filteredData}
-									.renderItem=${(t, e) => h`
+									.renderItem=${(t, e) => c`
 											<schmancy-table-row
 												class="w-full border-b border-solid border-outlineVariant"
 												.columns=${this.columns}
@@ -540,7 +547,7 @@ let u = class extends M() {
 											></schmancy-table-row>
 										`}
 								></lit-virtualizer>
-							` : h`
+							` : c`
 								<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>
@@ -550,9 +557,9 @@ let u = class extends M() {
 		`;
   }
 };
-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([L()], u.prototype, "sortColumn", 2), d([L()], u.prototype, "sortDirection", 2), d([L()], u.prototype, "filteredData", 2), u = d([D("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([z()], u.prototype, "sortColumn", 2), d([z()], u.prototype, "sortDirection", 2), d([z()], u.prototype, "filteredData", 2), u = d([M("schmancy-table")], u);
 export {
-  f as S,
+  v as S,
   u as a
 };
-//# sourceMappingURL=table-DPXzmJkJ.js.map
+//# sourceMappingURL=table-CGsVUEWl.js.map