@toolbox-web/grid 0.4.1 → 0.5.0

package/lib/plugins/pinned-columns/index.js

@@ -1,4 +1,4 @@
-const g = {
+const h = {
   expand: "▶",
   collapse: "▼",
   sortAsc: "▲",
@@ -7,11 +7,11 @@ const g = {
   submenuArrow: "▶",
   dragHandle: "⋮⋮",
   toolPanel: "☰"
-}, y = {
+}, g = {
   /** Ask if a column can be moved. Context: ColumnConfig. Response: boolean | undefined */
   CAN_MOVE_COLUMN: "canMoveColumn"
 };
-class k {
+class y {
   /**
    * Plugin dependencies - declare other plugins this one requires.
    *
@@ -28,8 +28,11 @@ class k {
    * ```
    */
   static dependencies;
-  /** Plugin version - override in subclass if needed */
-  version = "1.0.0";
+  /**
+   * Plugin version - defaults to grid version for built-in plugins.
+   * Third-party plugins can override with their own semver.
+   */
+  version = typeof __GRID_VERSION__ < "u" ? __GRID_VERSION__ : "dev";
   /** CSS styles to inject into the grid's shadow DOM */
   styles;
   /** Custom cell renderers keyed by type name */
@@ -113,8 +116,16 @@ class k {
   /**
    * Emit a custom event from the grid.
    */
-  emit(t, s) {
-    this.grid?.dispatchEvent?.(new CustomEvent(t, { detail: s, bubbles: !0 }));
+  emit(t, e) {
+    this.grid?.dispatchEvent?.(new CustomEvent(t, { detail: e, bubbles: !0 }));
+  }
+  /**
+   * Emit a cancelable custom event from the grid.
+   * @returns `true` if the event was cancelled (preventDefault called), `false` otherwise
+   */
+  emitCancelable(t, e) {
+    const s = new CustomEvent(t, { detail: e, bubbles: !0, cancelable: !0 });
+    return this.grid?.dispatchEvent?.(s), s.defaultPrevented;
   }
   /**
    * Request a re-render of the grid.
@@ -122,6 +133,14 @@ class k {
   requestRender() {
     this.grid?.requestRender?.();
   }
+  /**
+   * Request a re-render and restore focus styling afterward.
+   * Use this when a plugin action (like expand/collapse) triggers a render
+   * but needs to maintain keyboard navigation focus.
+   */
+  requestRenderWithFocus() {
+    this.grid?.requestRenderWithFocus?.();
+  }
   /**
    * Request a lightweight style update without rebuilding DOM.
    * Use this instead of requestRender() when only CSS classes need updating.
@@ -156,10 +175,34 @@ class k {
     return this.grid?._visibleColumns ?? [];
   }
   /**
-   * Get the shadow root of the grid.
+   * Get the grid as an HTMLElement for direct DOM operations.
+   * Use sparingly - prefer the typed GridElementRef API when possible.
+   *
+   * @example
+   * ```ts
+   * const width = this.gridElement.clientWidth;
+   * this.gridElement.classList.add('my-plugin-active');
+   * ```
+   */
+  get gridElement() {
+    return this.grid;
+  }
+  /**
+   * Get the render root of the grid for DOM queries.
+   * @deprecated Use `gridElement` instead. This getter exists only for backward compatibility.
+   *
+   * With Shadow DOM removed, the grid element itself is the render root.
+   * All new code should use `this.gridElement` for DOM queries.
+   *
+   * @example
+   * // OLD (deprecated)
+   * const rows = this.shadowRoot?.querySelector('.rows');
+   *
+   * // NEW (preferred)
+   * const rows = this.gridElement.querySelector('.rows');
    */
   get shadowRoot() {
-    return this.grid?.shadowRoot ?? null;
+    return this.gridElement;
   }
   /**
    * Get the disconnect signal for event listener cleanup.
@@ -187,8 +230,53 @@ class k {
    */
   get gridIcons() {
     const t = this.grid?.gridConfig?.icons ?? {};
-    return { ...g, ...t };
+    return { ...h, ...t };
+  }
+  // #region Animation Helpers
+  /**
+   * Check if animations are enabled at the grid level.
+   * Respects gridConfig.animation.mode and the CSS variable set by the grid.
+   *
+   * Plugins should use this to skip animations when:
+   * - Animation mode is 'off' or `false`
+   * - User prefers reduced motion and mode is 'reduced-motion' (default)
+   *
+   * @example
+   * ```ts
+   * private get animationStyle(): 'slide' | 'fade' | false {
+   *   if (!this.isAnimationEnabled) return false;
+   *   return this.config.animation ?? 'slide';
+   * }
+   * ```
+   */
+  get isAnimationEnabled() {
+    const t = this.grid?.effectiveConfig?.animation?.mode ?? "reduced-motion";
+    if (t === !1 || t === "off") return !1;
+    if (t === !0 || t === "on") return !0;
+    const e = this.gridElement;
+    return e ? getComputedStyle(e).getPropertyValue("--tbw-animation-enabled").trim() !== "0" : !0;
   }
+  /**
+   * Get the animation duration in milliseconds from CSS variable.
+   * Falls back to 200ms if not set.
+   *
+   * Plugins can use this for their animation timing to stay consistent
+   * with the grid-level animation.duration setting.
+   *
+   * @example
+   * ```ts
+   * element.animate(keyframes, { duration: this.animationDuration });
+   * ```
+   */
+  get animationDuration() {
+    const t = this.gridElement;
+    if (t) {
+      const e = getComputedStyle(t).getPropertyValue("--tbw-animation-duration").trim(), s = parseInt(e, 10);
+      if (!isNaN(s)) return s;
+    }
+    return 200;
+  }
+  // #endregion
   /**
    * Resolve an icon value to string or HTMLElement.
    * Checks plugin config first, then grid-level icons, then defaults.
@@ -197,8 +285,8 @@ class k {
    * @param pluginOverride - Optional plugin-level override
    * @returns The resolved icon value
    */
-  resolveIcon(t, s) {
-    return s !== void 0 ? s : this.gridIcons[t];
+  resolveIcon(t, e) {
+    return e !== void 0 ? e : this.gridIcons[t];
   }
   /**
    * Set an icon value on an element.
@@ -207,8 +295,8 @@ class k {
    * @param element - The element to set the icon on
    * @param icon - The icon value (string or HTMLElement)
    */
-  setIcon(t, s) {
-    typeof s == "string" ? t.innerHTML = s : s instanceof HTMLElement && (t.innerHTML = "", t.appendChild(s.cloneNode(!0)));
+  setIcon(t, e) {
+    typeof e == "string" ? t.innerHTML = e : e instanceof HTMLElement && (t.innerHTML = "", t.appendChild(e.cloneNode(!0)));
   }
   /**
    * Log a warning message.
@@ -218,51 +306,46 @@ class k {
   }
   // #endregion
 }
-function p(n) {
-  return n.filter((t) => t.sticky === "left");
+function m(r) {
+  return r.filter((t) => t.sticky === "left");
 }
-function C(n) {
-  return n.filter((t) => t.sticky === "right");
+function p(r) {
+  return r.filter((t) => t.sticky === "right");
 }
-function a(n) {
-  return n.some((t) => t.sticky === "left" || t.sticky === "right");
+function d(r) {
+  return r.some((t) => t.sticky === "left" || t.sticky === "right");
 }
-function h(n, t) {
-  const s = n.shadowRoot;
-  if (!s) return;
-  const e = Array.from(s.querySelectorAll(".header-row .cell"));
+function a(r, t) {
+  const e = Array.from(r.querySelectorAll(".header-row .cell"));
   if (!e.length) return;
-  const c = /* @__PURE__ */ new Map();
-  t.forEach((r, o) => {
-    r.field && c.set(r.field, o);
+  const s = /* @__PURE__ */ new Map();
+  t.forEach((n, c) => {
+    n.field && s.set(n.field, c);
   });
-  let d = 0;
-  for (const r of t)
-    if (r.sticky === "left") {
-      const o = c.get(r.field), i = e.find((l) => l.getAttribute("data-field") === r.field);
-      i && (i.classList.add("sticky-left"), i.style.position = "sticky", i.style.left = d + "px", o !== void 0 && s.querySelectorAll(`.data-grid-row .cell[data-col="${o}"]`).forEach((l) => {
-        l.classList.add("sticky-left"), l.style.position = "sticky", l.style.left = d + "px";
-      }), d += i.offsetWidth);
+  let l = 0;
+  for (const n of t)
+    if (n.sticky === "left") {
+      const c = s.get(n.field), i = e.find((o) => o.getAttribute("data-field") === n.field);
+      i && (i.classList.add("sticky-left"), i.style.position = "sticky", i.style.left = l + "px", c !== void 0 && r.querySelectorAll(`.data-grid-row .cell[data-col="${c}"]`).forEach((o) => {
+        o.classList.add("sticky-left"), o.style.position = "sticky", o.style.left = l + "px";
+      }), l += i.offsetWidth);
     }
   let f = 0;
-  for (const r of [...t].reverse())
-    if (r.sticky === "right") {
-      const o = c.get(r.field), i = e.find((l) => l.getAttribute("data-field") === r.field);
-      i && (i.classList.add("sticky-right"), i.style.position = "sticky", i.style.right = f + "px", o !== void 0 && s.querySelectorAll(`.data-grid-row .cell[data-col="${o}"]`).forEach((l) => {
-        l.classList.add("sticky-right"), l.style.position = "sticky", l.style.right = f + "px";
+  for (const n of [...t].reverse())
+    if (n.sticky === "right") {
+      const c = s.get(n.field), i = e.find((o) => o.getAttribute("data-field") === n.field);
+      i && (i.classList.add("sticky-right"), i.style.position = "sticky", i.style.right = f + "px", c !== void 0 && r.querySelectorAll(`.data-grid-row .cell[data-col="${c}"]`).forEach((o) => {
+        o.classList.add("sticky-right"), o.style.position = "sticky", o.style.right = f + "px";
       }), f += i.offsetWidth);
     }
 }
-function u(n) {
-  const t = n.shadowRoot;
-  if (!t) return;
-  t.querySelectorAll(".sticky-left, .sticky-right").forEach((e) => {
+function u(r) {
+  r.querySelectorAll(".sticky-left, .sticky-right").forEach((e) => {
     e.classList.remove("sticky-left", "sticky-right"), e.style.position = "", e.style.left = "", e.style.right = "";
   });
 }
-class m extends k {
+class k extends y {
   name = "pinnedColumns";
-  version = "1.0.0";
   get defaultConfig() {
     return {};
   }
@@ -280,25 +363,25 @@ class m extends k {
   /**
    * Auto-detect sticky columns from column configuration.
    */
-  static detect(t, s) {
-    const e = s?.columns;
-    return Array.isArray(e) ? a(e) : !1;
+  static detect(t, e) {
+    const s = e?.columns;
+    return Array.isArray(s) ? d(s) : !1;
   }
   // #endregion
   // #region Hooks
   processColumns(t) {
-    return this.isApplied = a([...t]), [...t];
+    return this.isApplied = d([...t]), [...t];
   }
   afterRender() {
     if (!this.isApplied)
       return;
-    const t = this.grid, s = [...this.columns];
-    if (!a(s)) {
+    const t = this.grid, e = [...this.columns];
+    if (!d(e)) {
       u(t), this.isApplied = !1;
       return;
     }
     queueMicrotask(() => {
-      h(t, s);
+      a(t, e);
     });
   }
   /**
@@ -306,12 +389,12 @@ class m extends k {
    */
   onPluginQuery(t) {
     switch (t.type) {
-      case y.CAN_MOVE_COLUMN: {
-        const s = t.context, e = s.sticky;
-        if (e === "left" || e === "right")
+      case g.CAN_MOVE_COLUMN: {
+        const e = t.context, s = e.sticky;
+        if (s === "left" || s === "right")
           return !1;
-        const c = s.meta?.sticky;
-        return c === "left" || c === "right" ? !1 : void 0;
+        const l = e.meta?.sticky;
+        return l === "left" || l === "right" ? !1 : void 0;
       }
       default:
         return;
@@ -324,21 +407,21 @@ class m extends k {
    */
   refreshStickyOffsets() {
     const t = [...this.columns];
-    h(this.grid, t);
+    a(this.grid, t);
   }
   /**
    * Get columns pinned to the left.
    */
   getLeftPinnedColumns() {
     const t = [...this.columns];
-    return p(t);
+    return m(t);
   }
   /**
    * Get columns pinned to the right.
    */
   getRightPinnedColumns() {
     const t = [...this.columns];
-    return C(t);
+    return p(t);
   }
   /**
    * Clear all sticky positioning.
@@ -350,29 +433,27 @@ class m extends k {
    * Report horizontal scroll boundary offsets for pinned columns.
    * Used by keyboard navigation to ensure focused cells aren't hidden behind sticky columns.
    */
-  getHorizontalScrollOffsets(t, s) {
+  getHorizontalScrollOffsets(t, e) {
     if (!this.isApplied)
       return;
-    let e = 0, c = 0;
+    let s = 0, l = 0;
     if (t) {
-      const f = t.querySelectorAll(".sticky-left"), r = t.querySelectorAll(".sticky-right");
-      f.forEach((o) => {
-        e += o.offsetWidth;
-      }), r.forEach((o) => {
-        c += o.offsetWidth;
+      const n = t.querySelectorAll(".sticky-left"), c = t.querySelectorAll(".sticky-right");
+      n.forEach((i) => {
+        s += i.offsetWidth;
+      }), c.forEach((i) => {
+        l += i.offsetWidth;
       });
-    } else {
-      const r = this.grid.shadowRoot;
-      r && r.querySelectorAll(".header-row .cell").forEach((i) => {
-        i.classList.contains("sticky-left") ? e += i.offsetWidth : i.classList.contains("sticky-right") && (c += i.offsetWidth);
+    } else
+      this.grid.querySelectorAll(".header-row .cell").forEach((i) => {
+        i.classList.contains("sticky-left") ? s += i.offsetWidth : i.classList.contains("sticky-right") && (l += i.offsetWidth);
       });
-    }
-    const d = s?.classList.contains("sticky-left") || s?.classList.contains("sticky-right");
-    return { left: e, right: c, skipScroll: d };
+    const f = e?.classList.contains("sticky-left") || e?.classList.contains("sticky-right");
+    return { left: s, right: l, skipScroll: f };
   }
   // #endregion
 }
 export {
-  m as PinnedColumnsPlugin
+  k as PinnedColumnsPlugin
 };
 //# sourceMappingURL=index.js.map