@toolbox-web/grid 1.14.1 → 1.15.0

package/index.js

@@ -2160,11 +2160,18 @@ const xi = [
     level: "column",
     description: 'the "group" column property'
   },
+  {
+    property: "pinned",
+    pluginName: "pinnedColumns",
+    level: "column",
+    description: 'the "pinned" column property',
+    isUsed: (t) => t === "left" || t === "right" || t === "start" || t === "end"
+  },
   {
     property: "sticky",
     pluginName: "pinnedColumns",
     level: "column",
-    description: 'the "sticky" column property',
+    description: 'the "sticky" column property (deprecated, use "pinned")',
     isUsed: (t) => t === "left" || t === "right" || t === "start" || t === "end"
   }
 ], Hi = [
@@ -2737,7 +2744,7 @@ ${Xi}
 `;
 class k extends HTMLElement {
   static tagName = "tbw-grid";
-  static version = "1.14.1";
+  static version = "1.15.0";
   static #l = 0;
   static adapters = [];
   static registerAdapter(e) {
@@ -2936,10 +2943,10 @@ class k extends HTMLElement {
   constructor() {
     super(), this.#be(), this.#d = new Promise((e) => this.#h = e), this.#s = new Zt({
       mergeConfig: () => {
-        this.#t.parseLightDomColumns(this), this.#t.merge(), this.#te(), Pi(this.#o, this.#e?.getPlugins() ?? []), zi(this.#e?.getPlugins() ?? []), Oi(this.#e?.getPlugins() ?? []), this.#Pe(), this.#B = [...this._columns];
+        this.#t.parseLightDomColumns(this), this.#t.merge(), this.#te(), Pi(this.#o, this.#e?.getPlugins() ?? []), zi(this.#e?.getPlugins() ?? []), Oi(this.#e?.getPlugins() ?? []), this.#ze(), this.#B = [...this._columns];
       },
       processColumns: () => this.#xe(),
-      processRows: () => this.#He(),
+      processRows: () => this.#Le(),
       renderHeader: () => ie(this),
       updateTemplate: () => U(this),
       renderVirtualWindow: () => this.refreshVirtualWindow(!0, !0),
@@ -2985,7 +2992,7 @@ class k extends HTMLElement {
       setRowHeight: (e) => {
         this._virtualization.rowHeight = e;
       },
-      applyAnimationConfig: (e) => this.#Le(e),
+      applyAnimationConfig: (e) => this.#Pe(e),
       getShellLightDomTitle: () => this.#i.lightDomTitle,
       getShellToolPanels: () => this.#i.toolPanels,
       getShellHeaderContents: () => this.#i.headerContents,
@@ -3087,7 +3094,7 @@ class k extends HTMLElement {
     const e = this.#o?.plugins;
     this.#_ = Array.isArray(e) ? e : [], this.#ie(), this.#u || (this.#Z(), this.#W(), this.#u = !0), this.#ne(), this.#S = Vt(
       () => {
-        this.#Me();
+        this.#ke();
       },
       { timeout: 100 }
     );
@@ -3184,7 +3191,7 @@ class k extends HTMLElement {
             n.style.transform = `translateY(${g}px)`;
           }
           this.#r = a, this.#C || (this.#C = requestAnimationFrame(() => {
-            this.#C = 0, this.#r !== null && (this.#ze(this.#r), this.#r = null);
+            this.#C = 0, this.#r !== null && (this.#De(this.#r), this.#r = null);
           }));
         },
         { passive: !0, signal: i }
@@ -3220,7 +3227,7 @@ class k extends HTMLElement {
       ));
     }
     this._bodyEl && It(this, this._bodyEl, i), this.#y?.disconnect(), this._virtualization.viewportEl && (this.#y = new ResizeObserver(() => {
-      this.#ke(), this.#s.requestPhase(x.VIRTUALIZATION, "resize-observer");
+      this.#Ne(), this.#s.requestPhase(x.VIRTUALIZATION, "resize-observer");
     }), this.#y.observe(this._virtualization.viewportEl)), this.#n.addEventListener(
       "focusin",
       () => {
@@ -3338,17 +3345,36 @@ class k extends HTMLElement {
       const e = this.#B.length > 0 ? this.#B : this._columns, i = e.filter((r) => !r.hidden), o = e.filter((r) => r.hidden), n = this.#e.processColumns([...i]);
       if (n !== i) {
         const r = new Set(n.map((l) => l.field));
-        !i.some((l) => r.has(l.field)) && n.length > 0 ? this._columns = [...n, ...o] : this._columns = [...n, ...o];
+        !i.some((l) => r.has(l.field)) && n.length > 0 ? this._columns = [...n, ...o] : this._columns = this.#He(
+          e,
+          n,
+          o
+        );
       } else
         this._columns = [...e];
     }
   }
-  #He() {
+  #He(e, i, o) {
+    if (o.length === 0) return i;
+    const n = /* @__PURE__ */ new Map();
+    for (const a of i)
+      n.set(a.field, a);
+    const r = new Set(e.map((a) => a.field)), s = [];
+    for (const a of i)
+      r.has(a.field) || s.push(a);
+    const l = [];
+    for (const a of e) {
+      const c = n.get(a.field);
+      c ? l.push(c) : a.hidden && l.push(a);
+    }
+    return l.push(...s), l;
+  }
+  #Le() {
     X(this);
     const e = Array.isArray(this.#a) ? [...this.#a] : [], i = this.#e?.processRows(e) ?? e;
     this._rows = i, this._virtualization.variableHeights && this.#Q();
   }
-  #Le(e) {
+  #Pe(e) {
     const i = {
       ...ht,
       ...e.animation
@@ -3365,7 +3391,7 @@ class k extends HTMLElement {
   #de(e, i) {
     at(this.#ce, this.__rowsBodyEl, this._bodyEl, e, i);
   }
-  #Pe() {
+  #ze() {
     dt(this.#ce, this.__rowsBodyEl, this.#o, this.#i);
   }
   #he() {
@@ -3399,7 +3425,7 @@ class k extends HTMLElement {
       this._bodyEl && (this._bodyEl.style.display = "", this._bodyEl.style.gridTemplateColumns = ""), this.#s.requestPhase(x.FULL, "setup");
     }
   }
-  #ze(e) {
+  #De(e) {
     let i = 0, o = 0, n = 0, r = 0, s = 0;
     if (this.#g) {
       const a = this._virtualization.container, c = this.#V;
@@ -3608,12 +3634,12 @@ class k extends HTMLElement {
     return this.#t.collectState(e);
   }
   set columnState(e) {
-    e && (this.#O = e, this.#t.initialColumnState = e, this.#u && this.#De(e));
+    e && (this.#O = e, this.#t.initialColumnState = e, this.#u && this.#Oe(e));
   }
   get columnState() {
     return this.getColumnState();
   }
-  #De(e) {
+  #Oe(e) {
     const i = this.#e?.getAll() ?? [];
     this.#t.applyState(e, i), this.#P();
   }
@@ -3677,10 +3703,10 @@ class k extends HTMLElement {
   #K = !1;
   refreshShellHeader() {
     this.#K || (this.#K = !0, queueMicrotask(() => {
-      this.#K = !1, this.isConnected && (this.#k(), this.#t.markSourcesChanged(), this.#t.merge(), de(this.#i), this.#Z(), this.#W(), this.#Oe());
+      this.#K = !1, this.isConnected && (this.#k(), this.#t.markSourcesChanged(), this.#t.merge(), de(this.#i), this.#Z(), this.#W(), this.#Me());
     }));
   }
-  #Oe() {
+  #Me() {
     const i = this.#n.querySelector(".tbw-grid-content") ?? this.#n.querySelector(".tbw-grid-root");
     if (this._headerRowEl = i?.querySelector(".header-row"), this._virtualization.totalHeightEl = i?.querySelector(".faux-vscroll-spacer"), this._virtualization.viewportEl = i?.querySelector(".rows-viewport"), this._bodyEl = i?.querySelector(".rows"), this.__rowsBodyEl = i?.querySelector(".rows-body"), this.#c.isInitialized) {
       fe(this.#n, this.#i), ce(this.#n, this.#o?.shell, this.#i);
@@ -3722,7 +3748,7 @@ class k extends HTMLElement {
     const n = o.firstElementChild;
     n && (e.replaceWith(n), this.#we(), ce(this.#n, this.#o?.shell, this.#i));
   }
-  #Me() {
+  #ke() {
     const e = () => {
       const o = this.#i.lightDomTitle, n = this.#i.hasToolButtonsContainer;
       this.#k();
@@ -3740,7 +3766,7 @@ class k extends HTMLElement {
     const o = this.#i.lightDomTitle, n = this.#i.hasToolButtonsContainer;
     (o && !e || n && !i) && (this.#t.markSourcesChanged(), this.#t.merge(), this.#ge()), this.#s.requestPhase(x.COLUMNS, "refreshColumns");
   }
-  #ke() {
+  #Ne() {
     const e = this._virtualization.container, i = this._virtualization.viewportEl ?? e;
     i && (this._virtualization.cachedViewportHeight = i.clientHeight), e && (this._virtualization.cachedFauxHeight = e.clientHeight);
     const o = this._virtualization.scrollAreaEl;
@@ -3909,7 +3935,7 @@ const oo = {
 class no {
   static dependencies;
   static manifest;
-  version = "1.14.1";
+  version = "1.15.0";
   styles;
   cellRenderers;
   headerRenderers;