scb-wc-test 0.1.177 → 0.1.178

package/mvc/components/scb-table-advanced/scb-table-advanced.js

@@ -1,11 +1,36 @@
-import{a as l,n as o,i as _,x as u,t as f}from"../../vendor/vendor.js";(function(){try{var d=typeof globalThis<"u"?globalThis:window;if(!d.__scb_ce_guard_installed__){d.__scb_ce_guard_installed__=!0;var r=customElements.define.bind(customElements);customElements.define=function(t,n,e){try{customElements.get(t)||r(t,n,e)}catch(a){var s=String(a||"");if(s.indexOf("already been used")===-1&&s.indexOf("NotSupportedError")===-1)throw a}}}}catch{}})();var b=Object.defineProperty,p=Object.getOwnPropertyDescriptor,i=(d,r,t,n)=>{for(var e=n>1?void 0:n?p(r,t):r,s=d.length-1,a;s>=0;s--)(a=d[s])&&(e=(n?a(r,t,e):a(e))||e);return n&&e&&b(r,t,e),e};let c=class extends _{constructor(){super(...arguments),this.data=[]}render(){return u`
-      <div>
-        <h3>SCB Table Advanced</h3>
-        <!-- Table rendering logic here -->
-      </div>
-    `}};c.styles=l`
-    :host {
-      display: block;
-      /* Add component styles here */
-    }
-  `;i([o({type:Array})],c.prototype,"data",2);c=i([f("scb-table-advanced")],c);
+import{a as E,n as u,i as v,x as _,t as N}from"../../vendor/vendor.js";import"../scb-pagination/scb-pagination.js";import"../scb-icon-button/scb-icon-button.js";import"../scb-link/scb-link.js";import"../../vendor/vendor-material.js";import"../scb-button/scb-button.js";import"../../vendor/preload-helper.js";import"../scb-tooltip/scb-tooltip.js";(function(){try{var e=typeof globalThis<"u"?globalThis:window;if(!e.__scb_ce_guard_installed__){e.__scb_ce_guard_installed__=!0;var a=customElements.define.bind(customElements);customElements.define=function(r,l,s){try{customElements.get(r)||a(r,l,s)}catch(i){var t=String(i||"");if(t.indexOf("already been used")===-1&&t.indexOf("NotSupportedError")===-1)throw i}}}}catch{}})();var T=Object.defineProperty,w=Object.getOwnPropertyDescriptor,y=(e,a,r,l)=>{for(var s=l>1?void 0:l?w(a,r):a,t=e.length-1,i;t>=0;t--)(i=e[t])&&(s=(l?i(a,r,s):i(s))||s);return l&&s&&T(a,r,s),s};let d=class extends v{constructor(){super(...arguments),this.pagination=!1,this.pageSize=10,this.currentPage=1,this.totalRows=0,this._sortedColumn=null,this._sortDirection="asc",this._onSlotChange=()=>{this.pagination&&(this._updateTotalRows(),this._paginateTable())},this._onPaginationChange=e=>{const a=e.detail;a&&typeof a.page=="number"&&this._changePage(a.page)}}render(){const e=Math.ceil(this.totalRows/this.pageSize);return _`
+        <slot @slotchange=${this._onSlotChange}></slot>
+        <div class="pagination">
+          ${this.pagination&&e>1?_`
+            <scb-pagination
+              .page=${this.currentPage}
+              .totalPages=${e}
+              @page-change=${this._onPaginationChange}
+              variant="icon"
+            ></scb-pagination>
+          `:""}
+        </div>
+      `}firstUpdated(){const e=this.shadowRoot.querySelector("slot");e&&(e.addEventListener("slotchange",()=>this._attachThListeners()),this._attachThListeners())}_attachThListeners(){const e=this.shadowRoot.querySelector("slot");if(!e)return;const a=e.assignedNodes({flatten:!0}),r=[],l=[],s=[];a.forEach(t=>{t.nodeType===Node.ELEMENT_NODE&&(r.push(...t.querySelectorAll("th")),l.push(...t.querySelectorAll("td")),s.push(...t.querySelectorAll("tr")))}),r.forEach((t,i)=>{t.style.textAlign="left",t.style.padding="16px 0px 16px 32px",t.style.position="relative",t.style.backgroundColor="var(--md-sys-color-surface)",t.style.fontFamily="var(--md-sys-typescale-label-medium-font)",t.style.fontSize="var(--md-sys-typescale-label-medium-size)",t.style.lineHeight="var(--md-sys-typescale-label-medium-line-height)",t.style.fontWeight="var(--md-sys-typescale-label-medium-weight)",t.style.letterSpacing="var(--md-sys-typescale-label-medium-tracking)";const o=t.firstChild;if(o&&o.nodeType===Node.TEXT_NODE&&o.textContent?.trim()||o&&o.nodeType===Node.ELEMENT_NODE&&o.tagName.toLowerCase()!=="p"){const c=document.createElement("p");c.textContent=o.textContent?o.textContent.trim():"",c.style.margin="0",t.replaceChild(c,o),t.querySelectorAll("scb-icon-button.scb-sort-icon").forEach(h=>h.remove());const p=document.createElement("scb-icon-button");p.className="scb-sort-icon",p.onclick=()=>this._onThClick(i),p.setAttribute("variant","standard"),this._sortedColumn===i?(p.setAttribute("variant","filled-tonal"),p.setAttribute("icon",this._sortDirection==="asc"?"arrow_downward":"arrow_upward")):(p.setAttribute("icon","swap_horiz"),p.style.transform+=" rotate(90deg)");var n=document.createElement("div");n.style.display="flex",n.style.gap="12px",n.style.flexWrap="nowrap",n.style.alignItems="center",n.appendChild(c),n.appendChild(p),t.appendChild(n)}}),l.forEach(t=>{t.style.padding="16px 0px 16px 32px",t.style.textAlign="left",t.style.borderTop="1px solid var(--md-sys-color-outline-variant)",t.style.verticalAlign="text-top",t.style.backgroundColor="var(--md-sys-color-surface)",t.style.fontFamily="var(--md-sys-typescale-body-medium-font)",t.style.fontSize="var(--md-sys-typescale-body-medium-size)",t.style.lineHeight="var(--md-sys-typescale-body-medium-line-height)",t.style.fontWeight="var(--md-sys-typescale-body-medium-weight)",t.style.letterSpacing="var(--md-sys-typescale-body-medium-tracking)"}),s.forEach(t=>{const i=t.querySelectorAll("th");i.length>0&&i.forEach((n,c)=>{c===0&&(n.style.paddingLeft="24px"),c===i.length-1?n.style.paddingRight="24px":n.style.paddingRight=""});const o=t.querySelectorAll("td");o.length>0&&o.forEach((n,c)=>{c===0&&(n.style.paddingLeft="24px"),c===o.length-1?n.style.paddingRight="24px":n.style.paddingRight=""})}),this.pagination&&this._paginateTable()}_onThClick(e){this._sortedColumn===e?this._sortDirection=this._sortDirection==="asc"?"desc":"asc":(this._sortedColumn=e,this._sortDirection="asc"),this._sortTable(e,this._sortDirection),this._attachThListeners()}_sortTable(e,a){const r=this.shadowRoot.querySelector("slot");if(!r)return;const l=r.assignedNodes({flatten:!0});let s=null;if(l.forEach(o=>{if(o.nodeType===Node.ELEMENT_NODE){const n=o.querySelector("tbody");n&&(s=n)}}),!s)return;Array.from(s.querySelectorAll("tr")).sort((o,n)=>{const c=o.children[e]?.textContent?.trim()??"",p=n.children[e]?.textContent?.trim()??"",h=Date.parse(c.replace(/\s+/g," ")),f=Date.parse(p.replace(/\s+/g," "));if(!isNaN(h)&&!isNaN(f))return a==="asc"?h-f:f-h;const g=parseFloat(c.replace(",",".")),m=parseFloat(p.replace(",","."));if(!isNaN(g)&&!isNaN(m))return a==="asc"?g-m:m-g;const b=c.localeCompare(p,"sv");return a==="asc"?b:-b}).forEach(o=>s.appendChild(o)),this.pagination&&this._paginateTable()}_updateTotalRows(){const e=this.shadowRoot.querySelector("slot");if(!e)return;const a=e.assignedNodes({flatten:!0});let r=null;a.forEach(l=>{if(l.nodeType===Node.ELEMENT_NODE){const s=l.querySelector("tbody");s&&(r=s)}}),r&&(this.totalRows=r.querySelectorAll("tr").length)}_paginateTable(){const e=this.shadowRoot.querySelector("slot");if(!e)return;const a=e.assignedNodes({flatten:!0});let r=null;if(a.forEach(i=>{if(i.nodeType===Node.ELEMENT_NODE){const o=i.querySelector("tbody");o&&(r=o)}}),!r)return;const l=Array.from(r.querySelectorAll("tr"));l.forEach(i=>i.style.display="none");const s=(this.currentPage-1)*this.pageSize,t=s+this.pageSize;l.slice(s,t).forEach(i=>i.style.display="")}_changePage(e){const a=Math.ceil(this.totalRows/this.pageSize);e<1||e>a||(this.currentPage=e,this._paginateTable(),this.requestUpdate())}};d.styles=E`
+      :host {
+        display: block;
+        color: var(--md-sys-color-on-surface);
+        font-family: var(--brand, Inter);
+      }
+      ::slotted(table) {
+        border-collapse: collapse;
+        border-spacing: 0;
+        border-radius: 24px;
+        overflow: hidden;
+      }
+      .pagination {
+        margin-top: 16px;
+        display: flex;
+        justify-self: center;
+      }
+      ::slotted(th) .scb-sort-icon {
+        pointer-events: none;
+      }
+      ::slotted(th:hover) .scb-sort-icon {
+        pointer-events: auto;
+      }
+    `;y([u({type:Boolean,attribute:"with-pagination"})],d.prototype,"pagination",2);y([u({type:Number})],d.prototype,"pageSize",2);y([u({type:Number})],d.prototype,"currentPage",2);y([u({type:Number})],d.prototype,"totalRows",2);d=y([N("scb-table-advanced")],d);

package/package.json

@@ -1,6 +1,6 @@
 {
     "name":  "scb-wc-test",
-    "version":  "0.1.177",
+    "version":  "0.1.178",
     "type":  "module",
     "main":  "index.js",
     "module":  "index.js",
@@ -373,5 +373,5 @@
                                   },
                     "./mvc/*":  "./mvc/*"
                 },
-    "buildHash":  "6F06332E7EDB55D186CB4ACF5B863ACC41DBF661A0B2C01D663DAB8F32924D30"
+    "buildHash":  "F6A0BCA80C6A176CF415B8273DF3B4155F1A137E644B825050F83C180134685E"
 }

package/scb-table-advanced/scb-table-advanced.d.ts

@@ -1,6 +1,20 @@
 import { LitElement } from 'lit';
 export declare class ScbTableAdvanced extends LitElement {
+    pagination: boolean;
+    pageSize: number;
+    currentPage: number;
+    totalRows: number;
+    private _sortedColumn;
+    private _sortDirection;
     static styles: import('lit').CSSResult;
-    data: Array<any>;
     render(): import('lit-html').TemplateResult<1>;
+    firstUpdated(): void;
+    private _attachThListeners;
+    private _onThClick;
+    private _sortTable;
+    private _onSlotChange;
+    private _updateTotalRows;
+    private _paginateTable;
+    private _changePage;
+    private _onPaginationChange;
 }

package/scb-table-advanced/scb-table-advanced.js

@@ -1,35 +1,170 @@
-import { css as c, LitElement as d, html as v } from "lit";
-import { property as m, customElement as b } from "lit/decorators.js";
-var i = Object.defineProperty, h = Object.getOwnPropertyDescriptor, p = (n, r, o, t) => {
-  for (var e = t > 1 ? void 0 : t ? h(r, o) : r, a = n.length - 1, l; a >= 0; a--)
-    (l = n[a]) && (e = (t ? l(r, o, e) : l(e)) || e);
-  return t && e && i(r, o, e), e;
+import { css as w, LitElement as S, html as T } from "lit";
+import { property as g, customElement as x } from "lit/decorators.js";
+import "../scb-pagination/scb-pagination.js";
+import "../scb-icon-button/scb-icon-button.js";
+var C = Object.defineProperty, A = Object.getOwnPropertyDescriptor, u = (e, a, n, l) => {
+  for (var o = l > 1 ? void 0 : l ? A(a, n) : a, t = e.length - 1, i; t >= 0; t--)
+    (i = e[t]) && (o = (l ? i(a, n, o) : i(o)) || o);
+  return l && o && C(a, n, o), o;
 };
-let s = class extends d {
+let h = class extends S {
   constructor() {
-    super(...arguments), this.data = [];
+    super(...arguments), this.pagination = !1, this.pageSize = 10, this.currentPage = 1, this.totalRows = 0, this._sortedColumn = null, this._sortDirection = "asc", this._onSlotChange = () => {
+      this.pagination && (this._updateTotalRows(), this._paginateTable());
+    }, this._onPaginationChange = (e) => {
+      const a = e.detail;
+      a && typeof a.page == "number" && this._changePage(a.page);
+    };
   }
   render() {
-    return v`
-      <div>
-        <h3>SCB Table Advanced</h3>
-        <!-- Table rendering logic here -->
-      </div>
-    `;
+    const e = Math.ceil(this.totalRows / this.pageSize);
+    return T`
+        <slot @slotchange=${this._onSlotChange}></slot>
+        <div class="pagination">
+          ${this.pagination && e > 1 ? T`
+            <scb-pagination
+              .page=${this.currentPage}
+              .totalPages=${e}
+              @page-change=${this._onPaginationChange}
+              variant="icon"
+            ></scb-pagination>
+          ` : ""}
+        </div>
+      `;
+  }
+  firstUpdated() {
+    const e = this.shadowRoot.querySelector("slot");
+    e && (e.addEventListener("slotchange", () => this._attachThListeners()), this._attachThListeners());
+  }
+  _attachThListeners() {
+    const e = this.shadowRoot.querySelector("slot");
+    if (!e) return;
+    const a = e.assignedNodes({ flatten: !0 }), n = [], l = [], o = [];
+    a.forEach((t) => {
+      t.nodeType === Node.ELEMENT_NODE && (n.push(...t.querySelectorAll("th")), l.push(...t.querySelectorAll("td")), o.push(...t.querySelectorAll("tr")));
+    }), n.forEach((t, i) => {
+      var c;
+      t.style.textAlign = "left", t.style.padding = "16px 0px 16px 32px", t.style.position = "relative", t.style.backgroundColor = "var(--md-sys-color-surface)", t.style.fontFamily = "var(--md-sys-typescale-label-medium-font)", t.style.fontSize = "var(--md-sys-typescale-label-medium-size)", t.style.lineHeight = "var(--md-sys-typescale-label-medium-line-height)", t.style.fontWeight = "var(--md-sys-typescale-label-medium-weight)", t.style.letterSpacing = "var(--md-sys-typescale-label-medium-tracking)";
+      const s = t.firstChild;
+      if (s && s.nodeType === Node.TEXT_NODE && ((c = s.textContent) != null && c.trim()) || s && s.nodeType === Node.ELEMENT_NODE && s.tagName.toLowerCase() !== "p") {
+        const d = document.createElement("p");
+        d.textContent = s.textContent ? s.textContent.trim() : "", d.style.margin = "0", t.replaceChild(d, s), t.querySelectorAll("scb-icon-button.scb-sort-icon").forEach((y) => y.remove());
+        const p = document.createElement("scb-icon-button");
+        p.className = "scb-sort-icon", p.onclick = () => this._onThClick(i), p.setAttribute("variant", "standard"), this._sortedColumn === i ? (p.setAttribute("variant", "filled-tonal"), p.setAttribute("icon", this._sortDirection === "asc" ? "arrow_downward" : "arrow_upward")) : (p.setAttribute("icon", "swap_horiz"), p.style.transform += " rotate(90deg)");
+        var r = document.createElement("div");
+        r.style.display = "flex", r.style.gap = "12px", r.style.flexWrap = "nowrap", r.style.alignItems = "center", r.appendChild(d), r.appendChild(p), t.appendChild(r);
+      }
+    }), l.forEach((t) => {
+      t.style.padding = "16px 0px 16px 32px", t.style.textAlign = "left", t.style.borderTop = "1px solid var(--md-sys-color-outline-variant)", t.style.verticalAlign = "text-top", t.style.backgroundColor = "var(--md-sys-color-surface)", t.style.fontFamily = "var(--md-sys-typescale-body-medium-font)", t.style.fontSize = "var(--md-sys-typescale-body-medium-size)", t.style.lineHeight = "var(--md-sys-typescale-body-medium-line-height)", t.style.fontWeight = "var(--md-sys-typescale-body-medium-weight)", t.style.letterSpacing = "var(--md-sys-typescale-body-medium-tracking)";
+    }), o.forEach((t) => {
+      const i = t.querySelectorAll("th");
+      i.length > 0 && i.forEach((r, c) => {
+        c === 0 && (r.style.paddingLeft = "24px"), c === i.length - 1 ? r.style.paddingRight = "24px" : r.style.paddingRight = "";
+      });
+      const s = t.querySelectorAll("td");
+      s.length > 0 && s.forEach((r, c) => {
+        c === 0 && (r.style.paddingLeft = "24px"), c === s.length - 1 ? r.style.paddingRight = "24px" : r.style.paddingRight = "";
+      });
+    }), this.pagination && this._paginateTable();
+  }
+  _onThClick(e) {
+    this._sortedColumn === e ? this._sortDirection = this._sortDirection === "asc" ? "desc" : "asc" : (this._sortedColumn = e, this._sortDirection = "asc"), this._sortTable(e, this._sortDirection), this._attachThListeners();
+  }
+  _sortTable(e, a) {
+    const n = this.shadowRoot.querySelector("slot");
+    if (!n) return;
+    const l = n.assignedNodes({ flatten: !0 });
+    let o = null;
+    if (l.forEach((s) => {
+      if (s.nodeType === Node.ELEMENT_NODE) {
+        const r = s.querySelector("tbody");
+        r && (o = r);
+      }
+    }), !o) return;
+    Array.from(o.querySelectorAll("tr")).sort((s, r) => {
+      var _, E, N, v;
+      const c = ((E = (_ = s.children[e]) == null ? void 0 : _.textContent) == null ? void 0 : E.trim()) ?? "", d = ((v = (N = r.children[e]) == null ? void 0 : N.textContent) == null ? void 0 : v.trim()) ?? "", p = Date.parse(c.replace(/\s+/g, " ")), y = Date.parse(d.replace(/\s+/g, " "));
+      if (!isNaN(p) && !isNaN(y))
+        return a === "asc" ? p - y : y - p;
+      const f = parseFloat(c.replace(",", ".")), m = parseFloat(d.replace(",", "."));
+      if (!isNaN(f) && !isNaN(m))
+        return a === "asc" ? f - m : m - f;
+      const b = c.localeCompare(d, "sv");
+      return a === "asc" ? b : -b;
+    }).forEach((s) => o.appendChild(s)), this.pagination && this._paginateTable();
+  }
+  _updateTotalRows() {
+    const e = this.shadowRoot.querySelector("slot");
+    if (!e) return;
+    const a = e.assignedNodes({ flatten: !0 });
+    let n = null;
+    a.forEach((l) => {
+      if (l.nodeType === Node.ELEMENT_NODE) {
+        const o = l.querySelector("tbody");
+        o && (n = o);
+      }
+    }), n && (this.totalRows = n.querySelectorAll("tr").length);
+  }
+  _paginateTable() {
+    const e = this.shadowRoot.querySelector("slot");
+    if (!e) return;
+    const a = e.assignedNodes({ flatten: !0 });
+    let n = null;
+    if (a.forEach((i) => {
+      if (i.nodeType === Node.ELEMENT_NODE) {
+        const s = i.querySelector("tbody");
+        s && (n = s);
+      }
+    }), !n) return;
+    const l = Array.from(n.querySelectorAll("tr"));
+    l.forEach((i) => i.style.display = "none");
+    const o = (this.currentPage - 1) * this.pageSize, t = o + this.pageSize;
+    l.slice(o, t).forEach((i) => i.style.display = "");
+  }
+  _changePage(e) {
+    const a = Math.ceil(this.totalRows / this.pageSize);
+    e < 1 || e > a || (this.currentPage = e, this._paginateTable(), this.requestUpdate());
   }
 };
-s.styles = c`
-    :host {
-      display: block;
-      /* Add component styles here */
-    }
-  `;
-p([
-  m({ type: Array })
-], s.prototype, "data", 2);
-s = p([
-  b("scb-table-advanced")
-], s);
+h.styles = w`
+      :host {
+        display: block;
+        color: var(--md-sys-color-on-surface);
+        font-family: var(--brand, Inter);
+      }
+      ::slotted(table) {
+        border-collapse: collapse;
+        border-spacing: 0;
+        border-radius: 24px;
+        overflow: hidden;
+      }
+      .pagination {
+        margin-top: 16px;
+        display: flex;
+        justify-self: center;
+      }
+      ::slotted(th) .scb-sort-icon {
+        pointer-events: none;
+      }
+      ::slotted(th:hover) .scb-sort-icon {
+        pointer-events: auto;
+      }
+    `;
+u([
+  g({ type: Boolean, attribute: "with-pagination" })
+], h.prototype, "pagination", 2);
+u([
+  g({ type: Number })
+], h.prototype, "pageSize", 2);
+u([
+  g({ type: Number })
+], h.prototype, "currentPage", 2);
+u([
+  g({ type: Number })
+], h.prototype, "totalRows", 2);
+h = u([
+  x("scb-table-advanced")
+], h);
 export {
-  s as ScbTableAdvanced
+  h as ScbTableAdvanced
 };