@toolbox-web/grid 1.7.0 → 1.9.0

package/lib/plugins/responsive/ResponsivePlugin.d.ts

@@ -1,4 +1,4 @@
-import { BaseGridPlugin, GridElement, PluginManifest } from '../../core/plugin/base-plugin';
+import { BaseGridPlugin, GridElement, PluginManifest, PluginQuery } from '../../core/plugin/base-plugin';
 import { BreakpointConfig, ResponsivePluginConfig } from './types';
 /**
  * Responsive Plugin for tbw-grid
@@ -90,6 +90,11 @@ export declare class ResponsivePlugin<T = unknown> extends BaseGridPlugin<Respon
     getActiveBreakpoint(): BreakpointConfig | null;
     attach(grid: GridElement): void;
     detach(): void;
+    /**
+     * Handle plugin queries.
+     * @internal
+     */
+    handleQuery(query: PluginQuery): unknown;
     /**
      * Apply hidden and value-only columns.
      * In legacy mode (single breakpoint), only applies when in responsive mode.

package/lib/plugins/responsive/ResponsivePlugin.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ResponsivePlugin.d.ts","sourceRoot":"","sources":["../../../../../../libs/grid/src/lib/plugins/responsive/ResponsivePlugin.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;;GAyBG;AAGH,OAAO,EAAE,cAAc,EAAE,KAAK,WAAW,EAAE,KAAK,cAAc,EAAE,MAAM,+BAA+B,CAAC;AAGtG,OAAO,KAAK,EAAE,gBAAgB,EAA8C,sBAAsB,EAAE,MAAM,SAAS,CAAC;AAEpH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA8CG;AACH,qBAAa,gBAAgB,CAAC,CAAC,GAAG,OAAO,CAAE,SAAQ,cAAc,CAAC,sBAAsB,CAAC,CAAC,CAAC,CAAC;;IAC1F,QAAQ,CAAC,IAAI,gBAAgB;IAC7B,SAAkB,OAAO,WAAW;IACpC,SAAkB,MAAM,SAAU;IAElC;;OAEG;IACH,gBAAyB,QAAQ,EAAE,cAAc,CAS/C;IAgBF;;;OAGG;IACH,YAAY,IAAI,OAAO;IAIvB;;;;OAIG;IACH,aAAa,CAAC,OAAO,EAAE,OAAO,GAAG,IAAI;IAYrC;;;OAGG;IACH,aAAa,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI;IAKlC;;;;OAIG;IACH,eAAe,CAAC,QAAQ,EAAE,sBAAsB,CAAC,CAAC,CAAC,CAAC,cAAc,CAAC,GAAG,IAAI;IAQ1E;;;OAGG;IACH,QAAQ,IAAI,MAAM;IAIlB;;;OAGG;IACH,mBAAmB,IAAI,gBAAgB,GAAG,IAAI;IAIrC,MAAM,CAAC,IAAI,EAAE,WAAW,GAAG,IAAI;IA+C/B,MAAM,IAAI,IAAI;IAcvB;;;;OAIG;IACM,WAAW,IAAI,IAAI;IAyL5B;;;;;;;;;;OAUG;IACM,SAAS,CAAC,GAAG,EAAE,OAAO,EAAE,KAAK,EAAE,WAAW,EAAE,QAAQ,EAAE,MAAM,GAAG,OAAO,GAAG,IAAI;IAqCtF;;;;;;;;;;;;;OAaG;IACM,SAAS,CAAC,CAAC,EAAE,aAAa,GAAG,OAAO;IAkK7C;;;;;;;;;;OAUG;IACM,cAAc,IAAI,MAAM;IAyBjC;;;;;OAKG;IACM,oBAAoB,CAAC,cAAc,EAAE,MAAM,GAAG,MAAM;CA8H9D"}
+{"version":3,"file":"ResponsivePlugin.d.ts","sourceRoot":"","sources":["../../../../../../libs/grid/src/lib/plugins/responsive/ResponsivePlugin.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;;GAyBG;AAIH,OAAO,EAAE,cAAc,EAAE,KAAK,WAAW,EAAE,KAAK,cAAc,EAAE,KAAK,WAAW,EAAE,MAAM,+BAA+B,CAAC;AAGxH,OAAO,KAAK,EAAE,gBAAgB,EAA8C,sBAAsB,EAAE,MAAM,SAAS,CAAC;AAEpH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA8CG;AACH,qBAAa,gBAAgB,CAAC,CAAC,GAAG,OAAO,CAAE,SAAQ,cAAc,CAAC,sBAAsB,CAAC,CAAC,CAAC,CAAC;;IAC1F,QAAQ,CAAC,IAAI,gBAAgB;IAC7B,SAAkB,OAAO,WAAW;IACpC,SAAkB,MAAM,SAAU;IAElC;;OAEG;IACH,gBAAyB,QAAQ,EAAE,cAAc,CAe/C;IAgBF;;;OAGG;IACH,YAAY,IAAI,OAAO;IAIvB;;;;OAIG;IACH,aAAa,CAAC,OAAO,EAAE,OAAO,GAAG,IAAI;IAYrC;;;OAGG;IACH,aAAa,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI;IAKlC;;;;OAIG;IACH,eAAe,CAAC,QAAQ,EAAE,sBAAsB,CAAC,CAAC,CAAC,CAAC,cAAc,CAAC,GAAG,IAAI;IAQ1E;;;OAGG;IACH,QAAQ,IAAI,MAAM;IAIlB;;;OAGG;IACH,mBAAmB,IAAI,gBAAgB,GAAG,IAAI;IAIrC,MAAM,CAAC,IAAI,EAAE,WAAW,GAAG,IAAI;IA+J/B,MAAM,IAAI,IAAI;IAcvB;;;OAGG;IACM,WAAW,CAAC,KAAK,EAAE,WAAW,GAAG,OAAO;IAOjD;;;;OAIG;IACM,WAAW,IAAI,IAAI;IAyL5B;;;;;;;;;;OAUG;IACM,SAAS,CAAC,GAAG,EAAE,OAAO,EAAE,KAAK,EAAE,WAAW,EAAE,QAAQ,EAAE,MAAM,GAAG,OAAO,GAAG,IAAI;IAqCtF;;;;;;;;;;;;;OAaG;IACM,SAAS,CAAC,CAAC,EAAE,aAAa,GAAG,OAAO;IAkK7C;;;;;;;;;;OAUG;IACM,cAAc,IAAI,MAAM;IAyBjC;;;;;OAKG;IACM,oBAAoB,CAAC,cAAc,EAAE,MAAM,GAAG,MAAM;CA8H9D"}

package/lib/plugins/responsive/index.js

@@ -1,41 +1,135 @@
-function b(s) {
-  s && s.querySelectorAll(".cell-focus").forEach((t) => t.classList.remove("cell-focus"));
+const R = /{{\s*([^}]+)\s*}}/g, u = "__DG_EMPTY__", y = /^[\w$. '?+\-*/%:()!<>=,&|]+$/, _ = /__(proto|defineGetter|defineSetter)|constructor|window|globalThis|global|process|Function|import|eval|Reflect|Proxy|Error|arguments|document|location|cookie|localStorage|sessionStorage|indexedDB|fetch|XMLHttpRequest|WebSocket|Worker|SharedWorker|ServiceWorker|opener|parent|top|frames|self|this\b/, C = /* @__PURE__ */ new Set([
+  "script",
+  "iframe",
+  "object",
+  "embed",
+  "form",
+  "input",
+  "button",
+  "textarea",
+  "select",
+  "link",
+  "meta",
+  "base",
+  "style",
+  "template",
+  "slot",
+  "portal",
+  "frame",
+  "frameset",
+  "applet",
+  "noscript",
+  "noembed",
+  "plaintext",
+  "xmp",
+  "listing"
+]), m = /^on\w+$/i, E = /* @__PURE__ */ new Set(["href", "src", "action", "formaction", "data", "srcdoc", "xlink:href", "poster", "srcset"]), A = /^\s*(javascript|vbscript|data|blob):/i;
+function S(r) {
+  if (!r || typeof r != "string") return "";
+  if (r.indexOf("<") === -1) return r;
+  const t = document.createElement("template");
+  return t.innerHTML = r, k(t.content), t.innerHTML;
 }
-const m = 'input,select,textarea,[contenteditable="true"],[contenteditable=""],[tabindex]:not([tabindex="-1"])', R = document.createElement("template");
-R.innerHTML = '<div class="cell" role="gridcell" part="cell"></div>';
-const y = document.createElement("template");
-y.innerHTML = '<div class="data-grid-row" role="row" part="row"></div>';
-function u(s, t) {
-  if (s._virtualization?.enabled) {
-    const { rowHeight: r, container: o, viewportEl: l } = s._virtualization, d = o, h = l?.clientHeight ?? d?.clientHeight ?? 0;
-    if (d && h > 0) {
-      const c = s._focusRow * r;
-      c < d.scrollTop ? d.scrollTop = c : c + r > d.scrollTop + h && (d.scrollTop = c - h + r);
+function k(r) {
+  const t = [], e = r.querySelectorAll("*");
+  for (const i of e) {
+    const n = i.tagName.toLowerCase();
+    if (C.has(n)) {
+      t.push(i);
+      continue;
     }
+    if ((n === "svg" || i.namespaceURI === "http://www.w3.org/2000/svg") && Array.from(i.attributes).some(
+      (o) => m.test(o.name) || o.name === "href" || o.name === "xlink:href"
+    )) {
+      t.push(i);
+      continue;
+    }
+    const a = [];
+    for (const s of i.attributes) {
+      const o = s.name.toLowerCase();
+      if (m.test(o)) {
+        a.push(s.name);
+        continue;
+      }
+      if (E.has(o) && A.test(s.value)) {
+        a.push(s.name);
+        continue;
+      }
+      if (o === "style" && /expression\s*\(|javascript:|behavior\s*:/i.test(s.value)) {
+        a.push(s.name);
+        continue;
+      }
+    }
+    a.forEach((s) => i.removeAttribute(s));
+  }
+  t.forEach((i) => i.remove());
+}
+function H(r, t) {
+  if (!r || r.indexOf("{{") === -1) return r;
+  const e = [], i = r.replace(R, (o, d) => {
+    const l = T(d, t);
+    return e.push({ expr: d.trim(), result: l }), l;
+  }), n = L(i), a = e.length && e.every((o) => o.result === "" || o.result === u);
+  return /Reflect\.|\bProxy\b|ownKeys\(/.test(r) || a ? "" : n;
+}
+function T(r, t) {
+  if (r = (r || "").trim(), !r || /\b(Reflect|Proxy|ownKeys)\b/.test(r)) return u;
+  if (r === "value") return t.value == null ? u : String(t.value);
+  if (r.startsWith("row.") && !/[()?]/.test(r) && !r.includes(":")) {
+    const i = r.slice(4), n = t.row ? t.row[i] : void 0;
+    return n == null ? u : String(n);
+  }
+  if (r.length > 80 || !y.test(r) || _.test(r)) return u;
+  const e = r.match(/\./g);
+  if (e && e.length > 1) return u;
+  try {
+    const n = new Function("value", "row", `return (${r});`)(t.value, t.row), a = n == null ? "" : String(n);
+    return /Reflect|Proxy|ownKeys/.test(a) ? u : a || u;
+  } catch {
+    return u;
   }
-  const e = s._activeEditRows !== void 0 && s._activeEditRows !== -1;
-  e || s.refreshVirtualWindow(!1), b(s._bodyEl), Array.from(s._bodyEl.querySelectorAll('[aria-selected="true"]')).forEach((r) => {
-    r.setAttribute("aria-selected", "false");
+}
+function L(r) {
+  return r && r.replace(new RegExp(u, "g"), "").replace(/Reflect\.[^<>{}\s]+/g, "").replace(/\bProxy\b/g, "").replace(/ownKeys\([^)]*\)/g, "");
+}
+function x(r) {
+  r && r.querySelectorAll(".cell-focus").forEach((t) => t.classList.remove("cell-focus"));
+}
+const M = 'input,select,textarea,[contenteditable="true"],[contenteditable=""],[tabindex]:not([tabindex="-1"])', D = document.createElement("template");
+D.innerHTML = '<div class="cell" role="gridcell" part="cell"></div>';
+const q = document.createElement("template");
+q.innerHTML = '<div class="data-grid-row" role="row" part="row"></div>';
+function g(r, t) {
+  if (r._virtualization?.enabled) {
+    const { rowHeight: s, container: o, viewportEl: d } = r._virtualization, l = o, h = d?.clientHeight ?? l?.clientHeight ?? 0;
+    if (l && h > 0) {
+      const c = r._focusRow * s;
+      c < l.scrollTop ? l.scrollTop = c : c + s > l.scrollTop + h && (l.scrollTop = c - h + s);
+    }
+  }
+  const e = r._activeEditRows !== void 0 && r._activeEditRows !== -1;
+  e || r.refreshVirtualWindow(!1), x(r._bodyEl), Array.from(r._bodyEl.querySelectorAll('[aria-selected="true"]')).forEach((s) => {
+    s.setAttribute("aria-selected", "false");
   });
-  const i = s._focusRow, n = s._virtualization.start ?? 0, a = s._virtualization.end ?? s._rows.length;
+  const i = r._focusRow, n = r._virtualization.start ?? 0, a = r._virtualization.end ?? r._rows.length;
   if (i >= n && i < a) {
-    const r = s._bodyEl.querySelectorAll(".data-grid-row")[i - n];
-    let o = r?.children[s._focusCol];
-    if ((!o || !o.classList?.contains("cell")) && (o = r?.querySelector(`.cell[data-col="${s._focusCol}"]`) ?? r?.querySelector(".cell[data-col]")), o) {
+    const s = r._bodyEl.querySelectorAll(".data-grid-row")[i - n];
+    let o = s?.children[r._focusCol];
+    if ((!o || !o.classList?.contains("cell")) && (o = s?.querySelector(`.cell[data-col="${r._focusCol}"]`) ?? s?.querySelector(".cell[data-col]")), o) {
       o.classList.add("cell-focus"), o.setAttribute("aria-selected", "true");
-      const l = s.querySelector(".tbw-scroll-area");
-      if (l && o && !e) {
-        const d = s._getHorizontalScrollOffsets?.(r ?? void 0, o) ?? { left: 0, right: 0 };
-        if (!d.skipScroll) {
-          const h = o.getBoundingClientRect(), c = l.getBoundingClientRect(), g = h.left - c.left + l.scrollLeft, f = g + h.width, w = l.scrollLeft + d.left, v = l.scrollLeft + l.clientWidth - d.right;
-          g < w ? l.scrollLeft = g - d.left : f > v && (l.scrollLeft = f - l.clientWidth + d.right);
+      const d = r.querySelector(".tbw-scroll-area");
+      if (d && o && !e) {
+        const l = r._getHorizontalScrollOffsets?.(s ?? void 0, o) ?? { left: 0, right: 0 };
+        if (!l.skipScroll) {
+          const h = o.getBoundingClientRect(), c = d.getBoundingClientRect(), f = h.left - c.left + d.scrollLeft, w = f + h.width, p = d.scrollLeft + l.left, b = d.scrollLeft + d.clientWidth - l.right;
+          f < p ? d.scrollLeft = f - l.left : w > b && (d.scrollLeft = w - d.clientWidth + l.right);
         }
       }
-      if (s._activeEditRows !== void 0 && s._activeEditRows !== -1 && o.classList.contains("editing")) {
-        const d = o.querySelector(m);
-        if (d && document.activeElement !== d)
+      if (r._activeEditRows !== void 0 && r._activeEditRows !== -1 && o.classList.contains("editing")) {
+        const l = o.querySelector(M);
+        if (l && document.activeElement !== l)
           try {
-            d.focus({ preventScroll: !0 });
+            l.focus({ preventScroll: !0 });
           } catch {
           }
       } else if (!o.contains(document.activeElement)) {
@@ -48,7 +142,7 @@ function u(s, t) {
     }
   }
 }
-const p = '<svg viewBox="0 0 16 16" width="12" height="12"><path fill="currentColor" d="M6 10.5a.5.5 0 0 1 .5-.5h3a.5.5 0 0 1 0 1h-3a.5.5 0 0 1-.5-.5zm-2-3a.5.5 0 0 1 .5-.5h7a.5.5 0 0 1 0 1h-7a.5.5 0 0 1-.5-.5zm-2-3a.5.5 0 0 1 .5-.5h11a.5.5 0 0 1 0 1h-11a.5.5 0 0 1-.5-.5z"/></svg>', C = {
+const v = '<svg viewBox="0 0 16 16" width="12" height="12"><path fill="currentColor" d="M6 10.5a.5.5 0 0 1 .5-.5h3a.5.5 0 0 1 0 1h-3a.5.5 0 0 1-.5-.5zm-2-3a.5.5 0 0 1 .5-.5h7a.5.5 0 0 1 0 1h-7a.5.5 0 0 1-.5-.5zm-2-3a.5.5 0 0 1 .5-.5h11a.5.5 0 0 1 0 1h-11a.5.5 0 0 1-.5-.5z"/></svg>', N = {
   expand: "▶",
   collapse: "▼",
   sortAsc: "▲",
@@ -57,11 +151,11 @@ const p = '<svg viewBox="0 0 16 16" width="12" height="12"><path fill="currentCo
   submenuArrow: "▶",
   dragHandle: "⋮⋮",
   toolPanel: "☰",
-  filter: p,
-  filterActive: p,
+  filter: v,
+  filterActive: v,
   print: "🖨️"
 };
-class _ {
+class P {
   /**
    * Plugin dependencies - declare other plugins this one requires.
    *
@@ -199,6 +293,63 @@ class _ {
     const i = new CustomEvent(t, { detail: e, bubbles: !0, cancelable: !0 });
     return this.grid?.dispatchEvent?.(i), i.defaultPrevented;
   }
+  // =========================================================================
+  // Event Bus - Plugin-to-Plugin Communication
+  // =========================================================================
+  /**
+   * Subscribe to an event from another plugin.
+   * The subscription is automatically cleaned up when this plugin is detached.
+   *
+   * @category Plugin Development
+   * @param eventType - The event type to listen for (e.g., 'filter-change')
+   * @param callback - The callback to invoke when the event is emitted
+   *
+   * @example
+   * ```typescript
+   * // In attach() or other initialization
+   * this.on('filter-change', (detail) => {
+   *   console.log('Filter changed:', detail);
+   * });
+   * ```
+   */
+  on(t, e) {
+    this.grid?._pluginManager?.subscribe(this, t, e);
+  }
+  /**
+   * Unsubscribe from a plugin event.
+   *
+   * @category Plugin Development
+   * @param eventType - The event type to stop listening for
+   *
+   * @example
+   * ```typescript
+   * this.off('filter-change');
+   * ```
+   */
+  off(t) {
+    this.grid?._pluginManager?.unsubscribe(this, t);
+  }
+  /**
+   * Emit an event to other plugins via the Event Bus.
+   * This is for inter-plugin communication only; it does NOT dispatch DOM events.
+   * Use `emit()` to dispatch DOM events that external consumers can listen to.
+   *
+   * @category Plugin Development
+   * @param eventType - The event type to emit (should be declared in manifest.events)
+   * @param detail - The event payload
+   *
+   * @example
+   * ```typescript
+   * // Emit to other plugins (not DOM)
+   * this.emitPluginEvent('filter-change', { field: 'name', value: 'Alice' });
+   *
+   * // For DOM events that consumers can addEventListener to:
+   * this.emit('filter-change', { field: 'name', value: 'Alice' });
+   * ```
+   */
+  emitPluginEvent(t, e) {
+    this.grid?._pluginManager?.emitPluginEvent(t, e);
+  }
   /**
    * Request a re-render of the grid.
    */
@@ -285,7 +436,7 @@ class _ {
    */
   get gridIcons() {
     const t = this.grid?.gridConfig?.icons ?? {};
-    return { ...C, ...t };
+    return { ...N, ...t };
   }
   // #region Animation Helpers
   /**
@@ -361,11 +512,11 @@ class _ {
   }
   // #endregion
 }
-const E = 'tbw-grid[data-responsive-animate] .data-grid-row,tbw-grid[data-responsive-animate] .data-grid-row>.cell{transition:opacity var(--tbw-responsive-duration, .2s) ease-out,transform var(--tbw-responsive-duration, .2s) ease-out}tbw-grid[data-responsive][data-responsive-animate] .data-grid-row{animation:responsive-card-enter var(--tbw-responsive-duration, .2s) ease-out}@keyframes responsive-card-enter{0%{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:translateY(0)}}tbw-grid[data-responsive] .header{display:none!important}tbw-grid[data-responsive] .footer-row{display:none}tbw-grid[data-responsive] .tbw-scroll-area{overflow-x:hidden;min-width:0!important}tbw-grid[data-responsive] .rows-body-wrapper{min-width:0!important}tbw-grid[data-responsive] .data-grid-row:not(.group-row){display:block!important;grid-template-columns:none!important;padding:var(--tbw-cell-padding);padding-left:var(--tbw-spacing-xl);border-bottom:1px solid var(--tbw-color-border);min-height:auto!important;height:auto!important;contain:none!important;content-visibility:visible!important;background:var(--tbw-color-bg);position:relative}tbw-grid[data-responsive] .data-grid-row:not(.group-row):nth-child(2n){background:var(--tbw-color-row-alt)}tbw-grid[data-responsive] .data-grid-row:not(.group-row):hover{background:var(--tbw-color-row-hover)}tbw-grid[data-responsive] .data-grid-row:not(.group-row)[aria-selected=true]{background:var(--tbw-color-selection)}tbw-grid[data-responsive] .data-grid-row:not(.group-row)[aria-selected=true]:before{content:"";position:absolute;left:0;top:0;bottom:0;width:4px;background:var(--tbw-color-accent)}tbw-grid[data-responsive] .data-grid-row:not(.group-row)>.cell{display:flex!important;justify-content:space-between;align-items:center;padding:var(--tbw-spacing-xs) var(--tbw-spacing-md);width:100%!important;min-width:0!important;min-height:auto!important;height:auto!important;line-height:1.5!important;position:static!important;left:auto!important;right:auto!important;border:none!important;border-bottom:none!important;border-right:none!important;background:transparent!important;white-space:normal!important;overflow:visible!important}tbw-grid[data-responsive] .data-grid-row:not(.group-row)>.cell:before{content:attr(data-header) ": ";font-weight:600;color:var(--tbw-color-header-fg);flex-shrink:0;margin-right:var(--tbw-spacing-md);min-width:100px}tbw-grid[data-responsive] .data-grid-row:not(.group-row)>.cell:after{content:none}tbw-grid[data-responsive] .cell[data-utility]{display:none!important}tbw-grid[data-responsive] .cell[data-responsive-hidden]{display:none!important}tbw-grid[data-responsive] .cell[data-responsive-value-only]{justify-content:flex-start!important;font-weight:500}tbw-grid[data-responsive] .cell[data-responsive-value-only]:before{display:none!important}tbw-grid:not([data-responsive]) .cell[data-responsive-hidden]{display:none!important}tbw-grid[data-responsive] .tbw-footer,tbw-grid[data-responsive] .tbw-pinned-rows,tbw-grid[data-responsive] .tbw-aggregation-rows{display:none!important}tbw-grid[data-responsive] .tbw-pinned-rows,tbw-grid[data-responsive] .tbw-aggregation-rows,tbw-grid[data-responsive] .tbw-aggregation-row{min-width:0!important}tbw-grid[data-responsive] .data-grid-row.responsive-card{display:block!important;padding:var(--tbw-cell-padding);border-bottom:1px solid var(--tbw-color-border)}tbw-grid[data-responsive] .data-grid-row.responsive-card>*{width:100%}tbw-grid[data-responsive] .data-grid-row.responsive-card .cell:before{display:none}';
-class A extends _ {
+const I = 'tbw-grid[data-responsive-animate] .data-grid-row,tbw-grid[data-responsive-animate] .data-grid-row>.cell{transition:opacity var(--tbw-responsive-duration, .2s) ease-out,transform var(--tbw-responsive-duration, .2s) ease-out}tbw-grid[data-responsive][data-responsive-animate] .data-grid-row{animation:responsive-card-enter var(--tbw-responsive-duration, .2s) ease-out}@keyframes responsive-card-enter{0%{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:translateY(0)}}tbw-grid[data-responsive] .header{display:none!important}tbw-grid[data-responsive] .footer-row{display:none}tbw-grid[data-responsive] .tbw-scroll-area{overflow-x:hidden;min-width:0!important}tbw-grid[data-responsive] .rows-body-wrapper{min-width:0!important}tbw-grid[data-responsive] .data-grid-row:not(.group-row){display:block!important;grid-template-columns:none!important;padding:var(--tbw-cell-padding);padding-inline-start:var(--tbw-spacing-xl);border-bottom:1px solid var(--tbw-color-border);min-height:auto!important;height:auto!important;contain:none!important;content-visibility:visible!important;background:var(--tbw-color-bg);position:relative}tbw-grid[data-responsive] .data-grid-row:not(.group-row):nth-child(2n){background:var(--tbw-color-row-alt)}tbw-grid[data-responsive] .data-grid-row:not(.group-row):hover{background:var(--tbw-color-row-hover)}tbw-grid[data-responsive] .data-grid-row:not(.group-row)[aria-selected=true]{background:var(--tbw-color-selection)}tbw-grid[data-responsive] .data-grid-row:not(.group-row)[aria-selected=true]:before{content:"";position:absolute;inset-inline-start:0;top:0;bottom:0;width:4px;background:var(--tbw-color-accent)}tbw-grid[data-responsive] .data-grid-row:not(.group-row)>.cell{display:flex!important;justify-content:space-between;align-items:center;padding:var(--tbw-spacing-xs) var(--tbw-spacing-md);width:100%!important;min-width:0!important;min-height:auto!important;height:auto!important;line-height:1.5!important;position:static!important;left:auto!important;right:auto!important;border:none!important;border-bottom:none!important;border-inline-end:none!important;background:transparent!important;white-space:normal!important;overflow:visible!important}tbw-grid[data-responsive] .data-grid-row:not(.group-row)>.cell:before{content:attr(data-header) ": ";font-weight:600;color:var(--tbw-color-header-fg);flex-shrink:0;margin-inline-end:var(--tbw-spacing-md);min-width:100px}tbw-grid[data-responsive] .data-grid-row:not(.group-row)>.cell:after{content:none}tbw-grid[data-responsive] .cell[data-utility]{display:none!important}tbw-grid[data-responsive] .cell[data-responsive-hidden]{display:none!important}tbw-grid[data-responsive] .cell[data-responsive-value-only]{justify-content:flex-start!important;font-weight:500}tbw-grid[data-responsive] .cell[data-responsive-value-only]:before{display:none!important}tbw-grid:not([data-responsive]) .cell[data-responsive-hidden]{display:none!important}tbw-grid[data-responsive] .tbw-footer,tbw-grid[data-responsive] .tbw-pinned-rows,tbw-grid[data-responsive] .tbw-aggregation-rows{display:none!important}tbw-grid[data-responsive] .tbw-pinned-rows,tbw-grid[data-responsive] .tbw-aggregation-rows,tbw-grid[data-responsive] .tbw-aggregation-row{min-width:0!important}tbw-grid[data-responsive] .data-grid-row.responsive-card{display:block!important;padding:var(--tbw-cell-padding);border-bottom:1px solid var(--tbw-color-border)}tbw-grid[data-responsive] .data-grid-row.responsive-card>*{width:100%}tbw-grid[data-responsive] .data-grid-row.responsive-card .cell:before{display:none}';
+class B extends P {
   name = "responsive";
   version = "1.0.0";
-  styles = E;
+  styles = I;
   /**
    * Plugin manifest declaring incompatibilities with other plugins.
    */
@@ -375,6 +526,12 @@ class A extends _ {
         name: "groupingRows",
         reason: "Responsive card layout does not yet support row grouping. The variable row heights (cards vs group headers) cause scroll calculation issues."
       }
+    ],
+    queries: [
+      {
+        type: "isCardMode",
+        description: "Returns whether the grid is currently in responsive card mode"
+      }
     ]
   };
   #e;
@@ -385,11 +542,11 @@ class A extends _ {
   /** Set of column fields to completely hide */
   #s = /* @__PURE__ */ new Set();
   /** Set of column fields to show value only (no header label) */
-  #d = /* @__PURE__ */ new Set();
+  #l = /* @__PURE__ */ new Set();
   /** Currently active breakpoint, or null if none */
-  #l = null;
+  #c = null;
   /** Sorted breakpoints from largest to smallest */
-  #c = [];
+  #d = [];
   /**
    * Check if currently in responsive mode.
    * @returns `true` if the grid is in card layout mode
@@ -403,7 +560,7 @@ class A extends _ {
    * @param enabled - Whether to enable responsive mode
    */
   setResponsive(t) {
-    t !== this.#t && (this.#t = t, this.#u(), this.emit("responsive-change", {
+    t !== this.#t && (this.#t = t, this.#h(), this.emit("responsive-change", {
       isResponsive: t,
       width: this.#a,
       breakpoint: this.config.breakpoint ?? 0
@@ -414,7 +571,7 @@ class A extends _ {
    * @param width - New breakpoint width in pixels
    */
   setBreakpoint(t) {
-    this.config.breakpoint = t, this.#v(this.#a);
+    this.config.breakpoint = t, this.#m(this.#a);
   }
   /**
    * Set a custom card renderer.
@@ -436,51 +593,108 @@ class A extends _ {
    * @returns The active BreakpointConfig, or null if no breakpoint is active
    */
   getActiveBreakpoint() {
-    return this.#l;
+    return this.#c;
   }
   attach(t) {
-    super.attach(t), this.#h(this.config.hiddenColumns), this.config.breakpoints?.length && (this.#c = [...this.config.breakpoints].sort((e, i) => i.maxWidth - e.maxWidth)), this.#e = new ResizeObserver((e) => {
+    super.attach(t), this.#R(), this.#u(this.config.hiddenColumns), this.config.breakpoints?.length && (this.#d = [...this.config.breakpoints].sort((e, i) => i.maxWidth - e.maxWidth)), this.#e = new ResizeObserver((e) => {
       const i = e[0]?.contentRect.width ?? 0;
       this.#a = i, clearTimeout(this.#n), this.#n = setTimeout(() => {
-        this.#v(i);
+        this.#m(i);
       }, this.config.debounceMs ?? 100);
     }), this.#e.observe(this.gridElement);
   }
+  // #region Light DOM Parsing
+  /**
+   * Parse `<tbw-grid-responsive-card>` elements from the grid's light DOM.
+   *
+   * Allows declarative configuration:
+   * ```html
+   * <tbw-grid [rows]="data">
+   *   <tbw-grid-responsive-card breakpoint="500" card-row-height="80">
+   *     <div class="custom-card">
+   *       <strong>{{ row.name }}</strong>
+   *       <span>{{ row.email }}</span>
+   *     </div>
+   *   </tbw-grid-responsive-card>
+   * </tbw-grid>
+   * ```
+   *
+   * Attributes:
+   * - `breakpoint`: number - Width threshold for responsive mode
+   * - `card-row-height`: number | 'auto' - Card height (default: 'auto')
+   * - `hidden-columns`: string - Comma-separated fields to hide
+   * - `hide-header`: 'true' | 'false' - Hide header row (default: 'true')
+   * - `debounce-ms`: number - Resize debounce delay (default: 100)
+   */
+  #R() {
+    const t = this.grid;
+    if (!t || typeof t.querySelector != "function") return;
+    const e = t.querySelector("tbw-grid-responsive-card");
+    if (!e) return;
+    const i = t;
+    if (i.__frameworkAdapter?.parseResponsiveCardElement) {
+      const c = i.__frameworkAdapter.parseResponsiveCardElement(e);
+      c && (this.config = { ...this.config, cardRenderer: c });
+    }
+    const n = e.getAttribute("breakpoint"), a = e.getAttribute("card-row-height"), s = e.getAttribute("hidden-columns"), o = e.getAttribute("hide-header"), d = e.getAttribute("debounce-ms"), l = {};
+    if (n !== null) {
+      const c = parseInt(n, 10);
+      isNaN(c) || (l.breakpoint = c);
+    }
+    if (a !== null && (l.cardRowHeight = a === "auto" ? "auto" : parseInt(a, 10)), s !== null && (l.hiddenColumns = s.split(",").map((c) => c.trim()).filter((c) => c.length > 0)), o !== null && (l.hideHeader = o !== "false"), d !== null) {
+      const c = parseInt(d, 10);
+      isNaN(c) || (l.debounceMs = c);
+    }
+    const h = e.innerHTML.trim();
+    h && !this.config.cardRenderer && !i.__frameworkAdapter?.parseResponsiveCardElement && (l.cardRenderer = (c) => {
+      const f = H(h, { value: c, row: c }), w = S(f), p = document.createElement("div");
+      return p.className = "tbw-responsive-card-content", p.innerHTML = w, p;
+    }), Object.keys(l).length > 0 && (this.config = { ...this.config, ...l });
+  }
+  // #endregion
   /**
    * Build the hidden and value-only column sets from config.
    */
-  #h(t) {
-    if (this.#s.clear(), this.#d.clear(), !!t)
+  #u(t) {
+    if (this.#s.clear(), this.#l.clear(), !!t)
       for (const e of t)
-        typeof e == "string" ? this.#s.add(e) : e.showValue ? this.#d.add(e.field) : this.#s.add(e.field);
+        typeof e == "string" ? this.#s.add(e) : e.showValue ? this.#l.add(e.field) : this.#s.add(e.field);
   }
   detach() {
     this.#e?.disconnect(), this.#e = void 0, clearTimeout(this.#n), this.#n = void 0, this.gridElement && this.gridElement.removeAttribute("data-responsive"), super.detach();
   }
+  /**
+   * Handle plugin queries.
+   * @internal
+   */
+  handleQuery(t) {
+    if (t.type === "isCardMode")
+      return this.#t;
+  }
   /**
    * Apply hidden and value-only columns.
    * In legacy mode (single breakpoint), only applies when in responsive mode.
    * In multi-breakpoint mode, applies whenever there's an active breakpoint.
    */
   afterRender() {
-    if (this.#_(), !(this.#c.length > 0 ? this.#l !== null : this.#t))
+    if (this.#E(), !(this.#d.length > 0 ? this.#c !== null : this.#t))
       return;
-    const e = this.#s.size > 0, i = this.#d.size > 0;
+    const e = this.#s.size > 0, i = this.#l.size > 0;
     if (!e && !i)
       return;
     const n = this.gridElement.querySelectorAll(".cell[data-field]");
     for (const a of n) {
-      const r = a.getAttribute("data-field");
-      r && (this.#s.has(r) ? (a.setAttribute("data-responsive-hidden", ""), a.removeAttribute("data-responsive-value-only")) : this.#d.has(r) ? (a.setAttribute("data-responsive-value-only", ""), a.removeAttribute("data-responsive-hidden")) : (a.removeAttribute("data-responsive-hidden"), a.removeAttribute("data-responsive-value-only")));
+      const s = a.getAttribute("data-field");
+      s && (this.#s.has(s) ? (a.setAttribute("data-responsive-hidden", ""), a.removeAttribute("data-responsive-value-only")) : this.#l.has(s) ? (a.setAttribute("data-responsive-value-only", ""), a.removeAttribute("data-responsive-hidden")) : (a.removeAttribute("data-responsive-hidden"), a.removeAttribute("data-responsive-value-only")));
     }
   }
   /**
    * Check if width has crossed any breakpoint threshold.
    * Handles both single breakpoint (legacy) and multi-breakpoint modes.
    */
-  #v(t) {
-    if (this.#c.length > 0) {
-      this.#R(t);
+  #m(t) {
+    if (this.#d.length > 0) {
+      this.#y(t);
       return;
     }
     const e = this.config.breakpoint ?? 0;
@@ -488,7 +702,7 @@ class A extends _ {
       "[tbw-grid:ResponsivePlugin] No breakpoint configured. Responsive mode is disabled. Set a breakpoint based on your grid's column count."
     ));
     const i = e > 0 && t < e;
-    i !== this.#t && (this.#t = i, this.#u(), this.emit("responsive-change", {
+    i !== this.#t && (this.#t = i, this.#h(), this.emit("responsive-change", {
       isResponsive: i,
       width: t,
       breakpoint: e
@@ -498,14 +712,14 @@ class A extends _ {
    * Check breakpoints in multi-breakpoint mode.
    * Evaluates breakpoints from largest to smallest, applying the first match.
    */
-  #R(t) {
+  #y(t) {
     let e = null;
-    for (const n of this.#c)
+    for (const n of this.#d)
       t <= n.maxWidth && (e = n);
-    if (e !== this.#l) {
-      this.#l = e, e?.hiddenColumns ? this.#h(e.hiddenColumns) : this.#h(this.config.hiddenColumns);
+    if (e !== this.#c) {
+      this.#c = e, e?.hiddenColumns ? this.#u(e.hiddenColumns) : this.#u(this.config.hiddenColumns);
       const n = e?.cardLayout === !0;
-      n !== this.#t && (this.#t = n, this.#u()), this.emit("responsive-change", {
+      n !== this.#t && (this.#t = n, this.#h()), this.emit("responsive-change", {
         isResponsive: this.#t,
         width: t,
         breakpoint: e?.maxWidth ?? 0
@@ -518,7 +732,7 @@ class A extends _ {
    * Apply the responsive state to the grid element.
    * Handles scroll reset when entering responsive mode and row height restoration on exit.
    */
-  #u() {
+  #h() {
     this.gridElement.toggleAttribute("data-responsive", this.#t);
     const t = this.config.animate !== !1;
     this.gridElement.toggleAttribute("data-responsive-animate", t), this.config.animationDuration && this.gridElement.style.setProperty("--tbw-responsive-duration", `${this.config.animationDuration}ms`);
@@ -575,23 +789,23 @@ class A extends _ {
     switch (t.key) {
       case "ArrowDown":
         if (this.grid._focusCol < i)
-          return this.grid._focusCol += 1, t.preventDefault(), u(this.grid), !0;
+          return this.grid._focusCol += 1, t.preventDefault(), g(this.grid), !0;
         if (this.grid._focusRow < e)
-          return this.grid._focusRow += 1, this.grid._focusCol = 0, t.preventDefault(), u(this.grid), !0;
+          return this.grid._focusRow += 1, this.grid._focusCol = 0, t.preventDefault(), g(this.grid), !0;
         break;
       case "ArrowUp":
         if (this.grid._focusCol > 0)
-          return this.grid._focusCol -= 1, t.preventDefault(), u(this.grid), !0;
+          return this.grid._focusCol -= 1, t.preventDefault(), g(this.grid), !0;
         if (this.grid._focusRow > 0)
-          return this.grid._focusRow -= 1, this.grid._focusCol = i, t.preventDefault(), u(this.grid), !0;
+          return this.grid._focusRow -= 1, this.grid._focusCol = i, t.preventDefault(), g(this.grid), !0;
         break;
       case "ArrowRight":
         if (this.grid._focusRow < e)
-          return this.grid._focusRow += 1, t.preventDefault(), u(this.grid), !0;
+          return this.grid._focusRow += 1, t.preventDefault(), g(this.grid), !0;
         break;
       case "ArrowLeft":
         if (this.grid._focusRow > 0)
-          return this.grid._focusRow -= 1, t.preventDefault(), u(this.grid), !0;
+          return this.grid._focusRow -= 1, t.preventDefault(), g(this.grid), !0;
         break;
     }
     return !1;
@@ -610,7 +824,7 @@ class A extends _ {
    * Prioritizes DOM-measured height (actual rendered size) over config,
    * since content can overflow the configured height.
    */
-  #b() {
+  #v() {
     if (this.#r && this.#r > 0)
       return this.#r;
     const t = this.config.cardRowHeight;
@@ -620,7 +834,7 @@ class A extends _ {
    * Get the effective group row height for virtualization calculations.
    * Uses DOM-measured height, falling back to original row height.
    */
-  #m() {
+  #b() {
     return this.#o && this.#o > 0 ? this.#o : this.#i ?? 28;
   }
   /**
@@ -636,7 +850,7 @@ class A extends _ {
   /**
    * Count group rows and card rows in the current dataset.
    */
-  #y() {
+  #_() {
     let t = 0, e = 0;
     for (const i of this.rows)
       i.__isGroupRow ? t++ : e++;
@@ -656,8 +870,8 @@ class A extends _ {
   getExtraHeight() {
     if (!this.#t || !this.config.cardRenderer || !this.#f())
       return 0;
-    const t = this.#i ?? 28, e = this.#m(), i = this.#b(), { groupCount: n, cardCount: a } = this.#y(), r = n * Math.max(0, e - t), o = a * Math.max(0, i - t);
-    return r + o;
+    const t = this.#i ?? 28, e = this.#b(), i = this.#v(), { groupCount: n, cardCount: a } = this.#_(), s = n * Math.max(0, e - t), o = a * Math.max(0, i - t);
+    return s + o;
   }
   /**
    * Return extra height that appears before a given row index.
@@ -668,12 +882,12 @@ class A extends _ {
   getExtraHeightBefore(t) {
     if (!this.#t || !this.config.cardRenderer || !this.#f())
       return 0;
-    const e = this.#i ?? 28, i = this.#m(), n = this.#b(), a = Math.max(0, i - e), r = Math.max(0, n - e);
-    let o = 0, l = 0;
-    const d = this.rows, h = Math.min(t, d.length);
+    const e = this.#i ?? 28, i = this.#b(), n = this.#v(), a = Math.max(0, i - e), s = Math.max(0, n - e);
+    let o = 0, d = 0;
+    const l = this.rows, h = Math.min(t, l.length);
     for (let c = 0; c < h; c++)
-      d[c].__isGroupRow ? o++ : l++;
-    return o * a + l * r;
+      l[c].__isGroupRow ? o++ : d++;
+    return o * a + d * s;
   }
   /**
    * Count the number of card rows (non-group rows) in the current dataset.
@@ -701,22 +915,22 @@ class A extends _ {
    *
    * The refresh is deferred via microtask to avoid nested render cycles.
    */
-  #_() {
+  #E() {
     if (!this.#t || !this.config.cardRenderer)
       return;
     let t = !1;
     const e = this.grid, i = this.#f(), n = this.#C();
     if (n !== this.#g && (this.#g = n, t = !0), i) {
-      const r = this.gridElement.querySelector(".data-grid-row.group-row");
-      if (r) {
-        const o = r.getBoundingClientRect().height;
+      const s = this.gridElement.querySelector(".data-grid-row.group-row");
+      if (s) {
+        const o = s.getBoundingClientRect().height;
         o > 0 && o !== this.#o && (this.#o = o, t = !0);
       }
     }
     const a = this.gridElement.querySelector(".data-grid-row.responsive-card");
     if (a) {
-      const r = a.getBoundingClientRect().height;
-      r > 0 && r !== this.#r && (this.#r = r, t = !0, !i && e._virtualization && (e._virtualization.rowHeight = r));
+      const s = a.getBoundingClientRect().height;
+      s > 0 && s !== this.#r && (this.#r = s, t = !0, !i && e._virtualization && (e._virtualization.rowHeight = s));
     }
     t && !this.#p && (this.#p = !0, queueMicrotask(() => {
       this.#p = !1, this.grid && this.#t && this.grid.refreshVirtualWindow?.(!0, !0);
@@ -724,6 +938,6 @@ class A extends _ {
   }
 }
 export {
-  A as ResponsivePlugin
+  B as ResponsivePlugin
 };
 //# sourceMappingURL=index.js.map