@toolbox-web/grid 1.21.0 → 1.21.2

package/lib/plugins/responsive/index.js

@@ -1,972 +1,2 @@
-const y = /{{\s*([^}]+)\s*}}/g, u = "__DG_EMPTY__", _ = /^[\w$. '?+\-*/%:()!<>=,&|]+$/, C = /__(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/, E = /* @__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"
-]), v = /^on\w+$/i, A = /* @__PURE__ */ new Set(["href", "src", "action", "formaction", "data", "srcdoc", "xlink:href", "poster", "srcset"]), S = /^\s*(javascript|vbscript|data|blob):/i;
-function k(r) {
-  if (!r || typeof r != "string") return "";
-  if (r.indexOf("<") === -1) return r;
-  const t = document.createElement("template");
-  return t.innerHTML = r, H(t.content), t.innerHTML;
-}
-function H(r) {
-  const t = [], e = r.querySelectorAll("*");
-  for (const i of e) {
-    const n = i.tagName.toLowerCase();
-    if (E.has(n)) {
-      t.push(i);
-      continue;
-    }
-    if ((n === "svg" || i.namespaceURI === "http://www.w3.org/2000/svg") && Array.from(i.attributes).some(
-      (o) => v.test(o.name) || o.name === "href" || o.name === "xlink:href"
-    )) {
-      t.push(i);
-      continue;
-    }
-    const l = [];
-    for (const s of i.attributes) {
-      const o = s.name.toLowerCase();
-      if (v.test(o)) {
-        l.push(s.name);
-        continue;
-      }
-      if (A.has(o) && S.test(s.value)) {
-        l.push(s.name);
-        continue;
-      }
-      if (o === "style" && /expression\s*\(|javascript:|behavior\s*:/i.test(s.value)) {
-        l.push(s.name);
-        continue;
-      }
-    }
-    l.forEach((s) => i.removeAttribute(s));
-  }
-  t.forEach((i) => i.remove());
-}
-function T(r, t) {
-  if (!r || r.indexOf("{{") === -1) return r;
-  const e = [], i = r.replace(y, (o, c) => {
-    const a = L(c, t);
-    return e.push({ expr: c.trim(), result: a }), a;
-  }), n = x(i), l = e.length && e.every((o) => o.result === "" || o.result === u);
-  return w.test(r) || l ? "" : n;
-}
-function L(r, t) {
-  if (r = (r || "").trim(), !r || w.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 || !_.test(r) || C.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), l = n == null ? "" : String(n);
-    return w.test(l) ? u : l || u;
-  } catch {
-    return u;
-  }
-}
-const w = /Reflect|Proxy|ownKeys/;
-function x(r) {
-  return r && r.replace(new RegExp(u, "g"), "").replace(/Reflect\.[^<>{}\s]+|\bProxy\b|ownKeys\([^)]*\)/g, "");
-}
-function M(r) {
-  r && r.querySelectorAll(".cell-focus").forEach((t) => t.classList.remove("cell-focus"));
-}
-const D = 'input,select,textarea,[contenteditable="true"],[contenteditable=""],[tabindex]:not([tabindex="-1"])', q = document.createElement("template");
-q.innerHTML = '<div class="cell" role="gridcell" part="cell"></div>';
-const N = document.createElement("template");
-N.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: c } = r._virtualization, a = o, h = c?.clientHeight ?? a?.clientHeight ?? 0;
-    if (a && h > 0) {
-      const d = r._focusRow * s;
-      d < a.scrollTop ? a.scrollTop = d : d + s > a.scrollTop + h && (a.scrollTop = d - h + s);
-    }
-  }
-  const e = r._activeEditRows !== void 0 && r._activeEditRows !== -1;
-  e || r.refreshVirtualWindow(!1), M(r._bodyEl), Array.from(r._bodyEl.querySelectorAll('[aria-selected="true"]')).forEach((s) => {
-    s.setAttribute("aria-selected", "false");
-  });
-  const i = r._focusRow, n = r._virtualization.start ?? 0, l = r._virtualization.end ?? r._rows.length;
-  if (i >= n && i < l) {
-    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 c = r.querySelector(".tbw-scroll-area");
-      if (c && o && (!e || t?.forceHorizontalScroll)) {
-        const a = r._getHorizontalScrollOffsets?.(s ?? void 0, o) ?? { left: 0, right: 0 };
-        if (!a.skipScroll) {
-          const h = o.getBoundingClientRect(), d = c.getBoundingClientRect(), f = h.left - d.left + c.scrollLeft, m = f + h.width, p = c.scrollLeft + a.left, R = c.scrollLeft + c.clientWidth - a.right;
-          f < p ? c.scrollLeft = f - a.left : m > R && (c.scrollLeft = m - c.clientWidth + a.right);
-        }
-      }
-      if (e && o.classList.contains("editing")) {
-        const a = o.querySelector(D);
-        if (a && document.activeElement !== a)
-          try {
-            a.focus({ preventScroll: !0 });
-          } catch {
-          }
-      } else if (e && !o.contains(document.activeElement)) {
-        o.hasAttribute("tabindex") || o.setAttribute("tabindex", "-1");
-        try {
-          o.focus({ preventScroll: !0 });
-        } catch {
-        }
-      } else if (!e) {
-        const a = r;
-        document.activeElement !== a && a.focus({ preventScroll: !0 });
-      }
-    }
-  }
-}
-const b = '<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>', I = {
-  expand: "▶",
-  collapse: "▼",
-  sortAsc: "▲",
-  sortDesc: "▼",
-  sortNone: "⇅",
-  submenuArrow: "▶",
-  dragHandle: "⋮⋮",
-  toolPanel: "☰",
-  filter: b,
-  filterActive: b,
-  print: "🖨️"
-};
-class z {
-  /**
-   * Plugin dependencies - declare other plugins this one requires.
-   *
-   * Dependencies are validated when the plugin is attached.
-   * Required dependencies throw an error if missing.
-   * Optional dependencies log an info message if missing.
-   *
-   * @example
-   * ```typescript
-   * static readonly dependencies: PluginDependency[] = [
-   *   { name: 'editing', required: true, reason: 'Tracks cell edits for undo/redo' },
-   *   { name: 'selection', required: false, reason: 'Enables selection-based undo' },
-   * ];
-   * ```
-   */
-  static dependencies;
-  /**
-   * Plugin manifest - declares owned properties, config rules, and hook priorities.
-   *
-   * This is read by the configuration validator to:
-   * - Validate that required plugins are loaded when their properties are used
-   * - Execute configRules to detect invalid/conflicting settings
-   * - Order hook execution based on priority
-   *
-   * @example
-   * ```typescript
-   * static override readonly manifest: PluginManifest<MyConfig> = {
-   *   ownedProperties: [
-   *     { property: 'myProp', level: 'column', description: 'the "myProp" column property' },
-   *   ],
-   *   configRules: [
-   *     { id: 'myPlugin/conflict', severity: 'warn', message: '...', check: (c) => c.a && c.b },
-   *   ],
-   * };
-   * ```
-   */
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  static manifest;
-  /**
-   * 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 */
-  cellRenderers;
-  /** Custom header renderers keyed by type name */
-  headerRenderers;
-  /** Custom cell editors keyed by type name */
-  cellEditors;
-  /** The grid instance this plugin is attached to */
-  grid;
-  /** Plugin configuration - merged with defaults in attach() */
-  config;
-  /** User-provided configuration from constructor */
-  userConfig;
-  /**
-   * Plugin-level AbortController for event listener cleanup.
-   * Created fresh in attach(), aborted in detach().
-   * This ensures event listeners are properly cleaned up when plugins are re-attached.
-   */
-  #e;
-  /**
-   * Default configuration - subclasses should override this getter.
-   * Note: This must be a getter (not property initializer) for proper inheritance
-   * since property initializers run after parent constructor.
-   */
-  get defaultConfig() {
-    return {};
-  }
-  constructor(t = {}) {
-    this.userConfig = t;
-  }
-  /**
-   * Called when the plugin is attached to a grid.
-   * Override to set up event listeners, initialize state, etc.
-   *
-   * @example
-   * ```ts
-   * attach(grid: GridElement): void {
-   *   super.attach(grid);
-   *   // Set up document-level listeners with auto-cleanup
-   *   document.addEventListener('keydown', this.handleEscape, {
-   *     signal: this.disconnectSignal
-   *   });
-   * }
-   * ```
-   */
-  attach(t) {
-    this.#e?.abort(), this.#e = new AbortController(), this.grid = t, this.config = { ...this.defaultConfig, ...this.userConfig };
-  }
-  /**
-   * Called when the plugin is detached from a grid.
-   * Override to clean up event listeners, timers, etc.
-   *
-   * @example
-   * ```ts
-   * detach(): void {
-   *   // Clean up any state not handled by disconnectSignal
-   *   this.selectedRows.clear();
-   *   this.cache = null;
-   * }
-   * ```
-   */
-  detach() {
-    this.#e?.abort(), this.#e = void 0;
-  }
-  /**
-   * Get another plugin instance from the same grid.
-   * Use for inter-plugin communication.
-   *
-   * @example
-   * ```ts
-   * const selection = this.getPlugin(SelectionPlugin);
-   * if (selection) {
-   *   const selectedRows = selection.getSelectedRows();
-   * }
-   * ```
-   */
-  getPlugin(t) {
-    return this.grid?.getPlugin(t);
-  }
-  /**
-   * Emit a custom event from the grid.
-   */
-  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 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.
-   * Uses ROWS phase - does NOT trigger processColumns hooks.
-   */
-  requestRender() {
-    this.grid?.requestRender?.();
-  }
-  /**
-   * Request a columns re-render of the grid.
-   * Uses COLUMNS phase - triggers processColumns hooks.
-   * Use this when your plugin needs to reprocess column configuration.
-   */
-  requestColumnsRender() {
-    this.grid?.requestColumnsRender?.();
-  }
-  /**
-   * 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.
-   */
-  requestAfterRender() {
-    this.grid?.requestAfterRender?.();
-  }
-  /**
-   * Get the current rows from the grid.
-   */
-  get rows() {
-    return this.grid?.rows ?? [];
-  }
-  /**
-   * Get the original unfiltered/unprocessed rows from the grid.
-   * Use this when you need all source data regardless of active filters.
-   */
-  get sourceRows() {
-    return this.grid?.sourceRows ?? [];
-  }
-  /**
-   * Get the current columns from the grid.
-   */
-  get columns() {
-    return this.grid?.columns ?? [];
-  }
-  /**
-   * Get only visible columns from the grid (excludes hidden).
-   * Use this for rendering that needs to match the grid template.
-   */
-  get visibleColumns() {
-    return this.grid?._visibleColumns ?? [];
-  }
-  /**
-   * 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 disconnect signal for event listener cleanup.
-   * This signal is aborted when the grid disconnects from the DOM.
-   * Use this when adding event listeners that should be cleaned up automatically.
-   *
-   * Best for:
-   * - Document/window-level listeners added in attach()
-   * - Listeners on the grid element itself
-   * - Any listener that should persist across renders
-   *
-   * Not needed for:
-   * - Listeners on elements created in afterRender() (removed with element)
-   *
-   * @example
-   * element.addEventListener('click', handler, { signal: this.disconnectSignal });
-   * document.addEventListener('keydown', handler, { signal: this.disconnectSignal });
-   */
-  get disconnectSignal() {
-    return this.#e?.signal ?? this.grid?.disconnectSignal;
-  }
-  /**
-   * Get the grid-level icons configuration.
-   * Returns merged icons (user config + defaults).
-   */
-  get gridIcons() {
-    const t = this.grid?.gridConfig?.icons ?? {};
-    return { ...I, ...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(), i = parseInt(e, 10);
-      if (!isNaN(i)) return i;
-    }
-    return 200;
-  }
-  // #endregion
-  /**
-   * Resolve an icon value to string or HTMLElement.
-   * Checks plugin config first, then grid-level icons, then defaults.
-   *
-   * @param iconKey - The icon key in GridIcons (e.g., 'expand', 'collapse')
-   * @param pluginOverride - Optional plugin-level override
-   * @returns The resolved icon value
-   */
-  resolveIcon(t, e) {
-    return e !== void 0 ? e : this.gridIcons[t];
-  }
-  /**
-   * Set an icon value on an element.
-   * Handles both string (text/HTML) and HTMLElement values.
-   *
-   * @param element - The element to set the icon on
-   * @param icon - The icon value (string or HTMLElement)
-   */
-  setIcon(t, e) {
-    typeof e == "string" ? t.innerHTML = e : e instanceof HTMLElement && (t.innerHTML = "", t.appendChild(e.cloneNode(!0)));
-  }
-  /**
-   * Log a warning message.
-   */
-  warn(t) {
-    console.warn(`[tbw-grid:${this.name}] ${t}`);
-  }
-  // #endregion
-}
-const B = '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 G extends z {
-  name = "responsive";
-  version = "1.0.0";
-  styles = B;
-  /**
-   * Plugin manifest declaring incompatibilities with other plugins.
-   */
-  static manifest = {
-    incompatibleWith: [
-      {
-        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;
-  #t = !1;
-  #n;
-  #v = !1;
-  #a = 0;
-  /** Set of column fields to completely hide */
-  #s = /* @__PURE__ */ new Set();
-  /** Set of column fields to show value only (no header label) */
-  #l = /* @__PURE__ */ new Set();
-  /** Currently active breakpoint, or null if none */
-  #d = null;
-  /** Sorted breakpoints from largest to smallest */
-  #c = [];
-  /**
-   * Check if currently in responsive mode.
-   * @returns `true` if the grid is in card layout mode
-   */
-  isResponsive() {
-    return this.#t;
-  }
-  /**
-   * Force responsive mode regardless of width.
-   * Useful for testing or manual control.
-   * @param enabled - Whether to enable responsive mode
-   */
-  setResponsive(t) {
-    t !== this.#t && (this.#t = t, this.#h(), this.emit("responsive-change", {
-      isResponsive: t,
-      width: this.#a,
-      breakpoint: this.config.breakpoint ?? 0
-    }));
-  }
-  /**
-   * Update breakpoint dynamically.
-   * @param width - New breakpoint width in pixels
-   */
-  setBreakpoint(t) {
-    this.config.breakpoint = t, this.#b(this.#a);
-  }
-  /**
-   * Set a custom card renderer.
-   * This allows framework adapters to provide template-based renderers at runtime.
-   * @param renderer - The card renderer function, or undefined to use default
-   */
-  setCardRenderer(t) {
-    this.config.cardRenderer = t, this.#t && this.requestRender();
-  }
-  /**
-   * Get current grid width.
-   * @returns Width of the grid element in pixels
-   */
-  getWidth() {
-    return this.#a;
-  }
-  /**
-   * Get the currently active breakpoint config (multi-breakpoint mode only).
-   * @returns The active BreakpointConfig, or null if no breakpoint is active
-   */
-  getActiveBreakpoint() {
-    return this.#d;
-  }
-  attach(t) {
-    super.attach(t), this.#R(), this.#u(this.config.hiddenColumns), this.config.breakpoints?.length && (this.#c = [...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.#b(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 d = i.__frameworkAdapter.parseResponsiveCardElement(e);
-      d && (this.config = { ...this.config, cardRenderer: d });
-    }
-    const n = e.getAttribute("breakpoint"), l = e.getAttribute("card-row-height"), s = e.getAttribute("hidden-columns"), o = e.getAttribute("hide-header"), c = e.getAttribute("debounce-ms"), a = {};
-    if (n !== null) {
-      const d = parseInt(n, 10);
-      isNaN(d) || (a.breakpoint = d);
-    }
-    if (l !== null && (a.cardRowHeight = l === "auto" ? "auto" : parseInt(l, 10)), s !== null && (a.hiddenColumns = s.split(",").map((d) => d.trim()).filter((d) => d.length > 0)), o !== null && (a.hideHeader = o !== "false"), c !== null) {
-      const d = parseInt(c, 10);
-      isNaN(d) || (a.debounceMs = d);
-    }
-    const h = e.innerHTML.trim();
-    h && !this.config.cardRenderer && !i.__frameworkAdapter?.parseResponsiveCardElement && (a.cardRenderer = (d) => {
-      const f = T(h, { value: d, row: d }), m = k(f), p = document.createElement("div");
-      return p.className = "tbw-responsive-card-content", p.innerHTML = m, p;
-    }), Object.keys(a).length > 0 && (this.config = { ...this.config, ...a });
-  }
-  // #endregion
-  /**
-   * Build the hidden and value-only column sets from config.
-   */
-  #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.#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.#E(), !(this.#c.length > 0 ? this.#d !== null : this.#t))
-      return;
-    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 l of n) {
-      const s = l.getAttribute("data-field");
-      s && (this.#s.has(s) ? (l.setAttribute("data-responsive-hidden", ""), l.removeAttribute("data-responsive-value-only")) : this.#l.has(s) ? (l.setAttribute("data-responsive-value-only", ""), l.removeAttribute("data-responsive-hidden")) : (l.removeAttribute("data-responsive-hidden"), l.removeAttribute("data-responsive-value-only")));
-    }
-  }
-  /**
-   * Check if width has crossed any breakpoint threshold.
-   * Handles both single breakpoint (legacy) and multi-breakpoint modes.
-   */
-  #b(t) {
-    if (this.#c.length > 0) {
-      this.#y(t);
-      return;
-    }
-    const e = this.config.breakpoint ?? 0;
-    e === 0 && !this.#v && (this.#v = !0, console.warn(
-      "[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.#h(), this.emit("responsive-change", {
-      isResponsive: i,
-      width: t,
-      breakpoint: e
-    }), this.requestRender());
-  }
-  /**
-   * Check breakpoints in multi-breakpoint mode.
-   * Evaluates breakpoints from largest to smallest, applying the first match.
-   */
-  #y(t) {
-    let e = null;
-    for (const n of this.#c)
-      t <= n.maxWidth && (e = n);
-    if (e !== this.#d) {
-      this.#d = e, e?.hiddenColumns ? this.#u(e.hiddenColumns) : this.#u(this.config.hiddenColumns);
-      const n = e?.cardLayout === !0;
-      n !== this.#t && (this.#t = n, this.#h()), this.emit("responsive-change", {
-        isResponsive: this.#t,
-        width: t,
-        breakpoint: e?.maxWidth ?? 0
-      }), this.requestRender();
-    }
-  }
-  /** Original row height before entering responsive mode, for restoration on exit */
-  #i;
-  /**
-   * Apply the responsive state to the grid element.
-   * Handles scroll reset when entering responsive mode and row height restoration on exit.
-   */
-  #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`);
-    const e = this.grid;
-    if (this.#t) {
-      e._virtualization && (this.#i = e._virtualization.rowHeight);
-      const i = this.gridElement.querySelector(".tbw-scroll-area");
-      i && (i.scrollLeft = 0);
-    } else {
-      const i = this.gridElement.querySelectorAll(".data-grid-row");
-      for (const n of i)
-        n.style.height = "", n.classList.remove("responsive-card");
-      this.#i && this.#i > 0 && e._virtualization && (e._virtualization.rowHeight = this.#i, this.#i = void 0), this.#r = void 0, this.#o = void 0, this.#g = void 0;
-    }
-  }
-  /**
-   * Custom row rendering when cardRenderer is provided and in responsive mode.
-   *
-   * When a cardRenderer is configured, this hook takes over row rendering to display
-   * the custom card layout instead of the default cell structure.
-   *
-   * @param row - The row data object
-   * @param rowEl - The row DOM element to render into
-   * @param rowIndex - The index of the row in the data array
-   * @returns `true` if rendered (prevents default), `void` for default rendering
-   */
-  renderRow(t, e, i) {
-    if (!this.#t || !this.config.cardRenderer || t.__isGroupRow)
-      return;
-    e.replaceChildren();
-    const n = this.config.cardRenderer(t, i);
-    e.className = "data-grid-row responsive-card";
-    const l = this.config.cardRowHeight ?? "auto";
-    return l !== "auto" ? e.style.height = `${l}px` : e.style.height = "auto", e.appendChild(n), !0;
-  }
-  /**
-   * Handle keyboard navigation in responsive mode.
-   *
-   * In responsive mode, the visual layout is inverted:
-   * - Cells are stacked vertically within each "card" (row)
-   * - DOWN/UP visually moves within the card (between fields)
-   * - Page Down/Page Up or Ctrl+Down/Up moves between cards
-   *
-   * For custom cardRenderers, keyboard navigation is disabled entirely
-   * since the implementor controls the card content and should handle
-   * navigation via their own event handlers.
-   *
-   * @returns `true` if the event was handled and default behavior should be prevented
-   */
-  onKeyDown(t) {
-    if (!this.#t || this.config.cardRenderer && ["ArrowUp", "ArrowDown", "ArrowLeft", "ArrowRight"].includes(t.key))
-      return !1;
-    const e = this.rows.length - 1, i = this.visibleColumns.length - 1;
-    switch (t.key) {
-      case "ArrowDown":
-        if (this.grid._focusCol < i)
-          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(), g(this.grid), !0;
-        break;
-      case "ArrowUp":
-        if (this.grid._focusCol > 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(), g(this.grid), !0;
-        break;
-      case "ArrowRight":
-        if (this.grid._focusRow < e)
-          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(), g(this.grid), !0;
-        break;
-    }
-    return !1;
-  }
-  // ============================================
-  // Variable Height Support for Mixed Row Types
-  // ============================================
-  /** Measured card height from DOM for virtualization calculations */
-  #r;
-  /** Measured group row height from DOM for virtualization calculations */
-  #o;
-  /** Last known card row count for detecting changes (e.g., group expand/collapse) */
-  #g;
-  /**
-   * Get the effective card height for virtualization calculations.
-   * Prioritizes DOM-measured height (actual rendered size) over config,
-   * since content can overflow the configured height.
-   */
-  #f() {
-    if (this.#r && this.#r > 0)
-      return this.#r;
-    const t = this.config.cardRowHeight;
-    return typeof t == "number" && t > 0 ? t : 80;
-  }
-  /**
-   * Get the effective group row height for virtualization calculations.
-   * Uses DOM-measured height, falling back to original row height.
-   */
-  #p() {
-    return this.#o && this.#o > 0 ? this.#o : this.#i ?? 28;
-  }
-  /**
-   * Check if there are any group rows in the current dataset.
-   * Used to determine if we have mixed row heights.
-   */
-  #m() {
-    for (const t of this.rows)
-      if (t.__isGroupRow)
-        return !0;
-    return !1;
-  }
-  /**
-   * Count group rows and card rows in the current dataset.
-   */
-  #_() {
-    let t = 0, e = 0;
-    for (const i of this.rows)
-      i.__isGroupRow ? t++ : e++;
-    return { groupCount: t, cardCount: e };
-  }
-  /**
-   * Return total extra height contributed by mixed row heights.
-   * This is called by the grid's virtualization system to adjust scrollbar height.
-   *
-   * The grid calculates: totalRows * baseRowHeight + pluginExtraHeight
-   *
-   * For mixed layouts (groups + cards), we need to report the difference between
-   * actual heights and what the base calculation assumes:
-   * - Extra for groups: groupCount * (groupHeight - baseHeight)
-   * - Extra for cards: cardCount * (cardHeight - baseHeight)
-   *
-   * @deprecated Use getRowHeight() instead. This hook will be removed in v3.0.
-   */
-  getExtraHeight() {
-    if (!this.#t || !this.config.cardRenderer || !this.#m())
-      return 0;
-    const t = this.#i ?? 28, e = this.#p(), i = this.#f(), { groupCount: n, cardCount: l } = this.#_(), s = n * Math.max(0, e - t), o = l * Math.max(0, i - t);
-    return s + o;
-  }
-  /**
-   * Return extra height that appears before a given row index.
-   * Used by virtualization to correctly calculate scroll positions.
-   *
-   * Like getExtraHeight, this accounts for both group and card row heights.
-   *
-   * @deprecated Use getRowHeight() instead. This hook will be removed in v3.0.
-   */
-  getExtraHeightBefore(t) {
-    if (!this.#t || !this.config.cardRenderer || !this.#m())
-      return 0;
-    const e = this.#i ?? 28, i = this.#p(), n = this.#f(), l = Math.max(0, i - e), s = Math.max(0, n - e);
-    let o = 0, c = 0;
-    const a = this.rows, h = Math.min(t, a.length);
-    for (let d = 0; d < h; d++)
-      a[d].__isGroupRow ? o++ : c++;
-    return o * l + c * s;
-  }
-  /**
-   * Get the height of a specific row based on its type (group row vs card row).
-   * Returns undefined if not in responsive mode.
-   *
-   * @param row - The row data
-   * @param _index - The row index (unused, but part of the interface)
-   * @returns The row height in pixels, or undefined if not in responsive mode
-   */
-  getRowHeight(t, e) {
-    if (!(!this.#t || !this.config.cardRenderer))
-      return t.__isGroupRow ? this.#p() : this.#f();
-  }
-  /**
-   * Count the number of card rows (non-group rows) in the current dataset.
-   */
-  #C() {
-    let t = 0;
-    for (const e of this.rows)
-      e.__isGroupRow || t++;
-    return t;
-  }
-  /** Pending refresh scheduled via microtask */
-  #w = !1;
-  /**
-   * Measure card height from DOM after render and detect row count changes.
-   * Called in afterRender to ensure scroll calculations are accurate.
-   *
-   * This handles two scenarios:
-   * 1. Card height changes (content overflow, dynamic sizing)
-   * 2. Card row count changes (group expand/collapse)
-   * 3. Group row height changes
-   *
-   * For uniform card layouts (no groups), we update the virtualization row height
-   * directly to the card height. For mixed layouts (groups + cards), we use the
-   * getExtraHeight mechanism to report height differences.
-   *
-   * 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.#m(), n = this.#C();
-    if (n !== this.#g && (this.#g = n, t = !0), i) {
-      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 l = this.gridElement.querySelector(".data-grid-row.responsive-card");
-    if (l) {
-      const s = l.getBoundingClientRect().height;
-      s > 0 && s !== this.#r && (this.#r = s, t = !0, !i && e._virtualization && (e._virtualization.rowHeight = s));
-    }
-    t && !this.#w && (this.#w = !0, queueMicrotask(() => {
-      this.#w = !1, this.grid && this.#t && this.grid.refreshVirtualWindow?.(!0, !0);
-    }));
-  }
-}
-export {
-  G as ResponsivePlugin
-};
+const e=/{{\s*([^}]+)\s*}}/g,t="__DG_EMPTY__",i=/^[\w$. '?+\-*/%:()!<>=,&|]+$/,r=/__(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/,o=/* @__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"]),s=/^on\w+$/i,n=/* @__PURE__ */new Set(["href","src","action","formaction","data","srcdoc","xlink:href","poster","srcset"]),a=/^\s*(javascript|vbscript|data|blob):/i;function d(e){if(!e||"string"!=typeof e)return"";if(-1===e.indexOf("<"))return e;const t=document.createElement("template");return t.innerHTML=e,function(e){const t=[],i=e.querySelectorAll("*");for(const r of i){const e=r.tagName.toLowerCase();if(o.has(e)){t.push(r);continue}if("svg"===e||"http://www.w3.org/2000/svg"===r.namespaceURI){if(Array.from(r.attributes).some(e=>s.test(e.name)||"href"===e.name||"xlink:href"===e.name)){t.push(r);continue}}const i=[];for(const t of r.attributes){const e=t.name.toLowerCase();s.test(e)?i.push(t.name):(n.has(e)&&a.test(t.value)||"style"===e&&/expression\s*\(|javascript:|behavior\s*:/i.test(t.value))&&i.push(t.name)}i.forEach(e=>r.removeAttribute(e))}t.forEach(e=>e.remove())}(t.content),t.innerHTML}function l(o,s){if(!o||-1===o.indexOf("{{"))return o;const n=[],a=o.replace(e,(e,o)=>{const a=function(e,o){if(e=(e||"").trim(),!e)return t;if(c.test(e))return t;if("value"===e)return null==o.value?t:String(o.value);if(e.startsWith("row.")&&!/[()?]/.test(e)&&!e.includes(":")){const i=e.slice(4),r=o.row?o.row[i]:void 0;return null==r?t:String(r)}if(e.length>80)return t;if(!i.test(e)||r.test(e))return t;const s=e.match(/\./g);if(s&&s.length>1)return t;try{const i=new Function("value","row",`return (${e});`)(o.value,o.row),r=null==i?"":String(i);return c.test(r)?t:r||t}catch{return t}}(o,s);return n.push({expr:o.trim(),result:a}),a}),d=(l=a)?l.replace(new RegExp(t,"g"),"").replace(/Reflect\.[^<>{}\s]+|\bProxy\b|ownKeys\([^)]*\)/g,""):l;var l;const h=n.length&&n.every(e=>""===e.result||e.result===t);return c.test(o)||h?"":d}const c=/Reflect|Proxy|ownKeys/;document.createElement("template").innerHTML='<div class="cell" role="gridcell" part="cell"></div>';function h(e,t){if(e._virtualization?.enabled){const{rowHeight:t,container:i,viewportEl:r}=e._virtualization,o=i,s=r?.clientHeight??o?.clientHeight??0;if(o&&s>0){const i=e._focusRow*t;i<o.scrollTop?o.scrollTop=i:i+t>o.scrollTop+s&&(o.scrollTop=i-s+t)}}const i=void 0!==e._activeEditRows&&-1!==e._activeEditRows;var r;i||e.refreshVirtualWindow(!1),(r=e._bodyEl)&&r.querySelectorAll(".cell-focus").forEach(e=>e.classList.remove("cell-focus")),Array.from(e._bodyEl.querySelectorAll('[aria-selected="true"]')).forEach(e=>{e.setAttribute("aria-selected","false")});const o=e._focusRow,s=e._virtualization.start??0,n=e._virtualization.end??e._rows.length;if(o>=s&&o<n){const r=e._bodyEl.querySelectorAll(".data-grid-row")[o-s];let n=r?.children[e._focusCol];if(n&&n.classList?.contains("cell")||(n=r?.querySelector(`.cell[data-col="${e._focusCol}"]`)??r?.querySelector(".cell[data-col]")),n){n.classList.add("cell-focus"),n.setAttribute("aria-selected","true");const o=e.querySelector(".tbw-scroll-area");if(o&&n&&(!i||t?.forceHorizontalScroll)){const t=e._getHorizontalScrollOffsets?.(r??void 0,n)??{left:0,right:0};if(!t.skipScroll){const e=n.getBoundingClientRect(),i=o.getBoundingClientRect(),r=e.left-i.left+o.scrollLeft,s=r+e.width,a=o.scrollLeft+t.left,d=o.scrollLeft+o.clientWidth-t.right;r<a?o.scrollLeft=r-t.left:s>d&&(o.scrollLeft=s-o.clientWidth+t.right)}}if(i&&n.classList.contains("editing")){const e=n.querySelector('input,select,textarea,[contenteditable="true"],[contenteditable=""],[tabindex]:not([tabindex="-1"])');if(e&&document.activeElement!==e)try{e.focus({preventScroll:!0})}catch{}}else if(i&&!n.contains(document.activeElement)){n.hasAttribute("tabindex")||n.setAttribute("tabindex","-1");try{n.focus({preventScroll:!0})}catch{}}else if(!i){const t=e;document.activeElement!==t&&t.focus({preventScroll:!0})}}}}document.createElement("template").innerHTML='<div class="data-grid-row" role="row" part="row"></div>';const u='<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>',g={expand:"▶",collapse:"▼",sortAsc:"▲",sortDesc:"▼",sortNone:"⇅",submenuArrow:"▶",dragHandle:"⋮⋮",toolPanel:"☰",filter:u,filterActive:u,print:"🖨️"};class p{static dependencies;static manifest;version="undefined"!=typeof __GRID_VERSION__?__GRID_VERSION__:"dev";styles;cellRenderers;headerRenderers;cellEditors;grid;config;userConfig;#e;get defaultConfig(){return{}}constructor(e={}){this.userConfig=e}attach(e){this.#e?.abort(),this.#e=new AbortController,this.grid=e,this.config={...this.defaultConfig,...this.userConfig}}detach(){this.#e?.abort(),this.#e=void 0}getPlugin(e){return this.grid?.getPlugin(e)}emit(e,t){this.grid?.dispatchEvent?.(new CustomEvent(e,{detail:t,bubbles:!0}))}emitCancelable(e,t){const i=new CustomEvent(e,{detail:t,bubbles:!0,cancelable:!0});return this.grid?.dispatchEvent?.(i),i.defaultPrevented}on(e,t){this.grid?._pluginManager?.subscribe(this,e,t)}off(e){this.grid?._pluginManager?.unsubscribe(this,e)}emitPluginEvent(e,t){this.grid?._pluginManager?.emitPluginEvent(e,t)}requestRender(){this.grid?.requestRender?.()}requestColumnsRender(){this.grid?.requestColumnsRender?.()}requestRenderWithFocus(){this.grid?.requestRenderWithFocus?.()}requestAfterRender(){this.grid?.requestAfterRender?.()}get rows(){return this.grid?.rows??[]}get sourceRows(){return this.grid?.sourceRows??[]}get columns(){return this.grid?.columns??[]}get visibleColumns(){return this.grid?._visibleColumns??[]}get gridElement(){return this.grid}get disconnectSignal(){return this.#e?.signal??this.grid?.disconnectSignal}get gridIcons(){const e=this.grid?.gridConfig?.icons??{};return{...g,...e}}get isAnimationEnabled(){const e=this.grid?.effectiveConfig?.animation?.mode??"reduced-motion";if(!1===e||"off"===e)return!1;if(!0===e||"on"===e)return!0;const t=this.gridElement;if(t){return"0"!==getComputedStyle(t).getPropertyValue("--tbw-animation-enabled").trim()}return!0}get animationDuration(){const e=this.gridElement;if(e){const t=getComputedStyle(e).getPropertyValue("--tbw-animation-duration").trim(),i=parseInt(t,10);if(!isNaN(i))return i}return 200}resolveIcon(e,t){return void 0!==t?t:this.gridIcons[e]}setIcon(e,t){"string"==typeof t?e.innerHTML=t:t instanceof HTMLElement&&(e.innerHTML="",e.appendChild(t.cloneNode(!0)))}warn(e){console.warn(`[tbw-grid:${this.name}] ${e}`)}}class f extends p{name="responsive";version="1.0.0";styles='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}';static manifest={incompatibleWith:[{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"}]};#t;#i=!1;#r;#o=!1;#s=0;#n=/* @__PURE__ */new Set;#a=/* @__PURE__ */new Set;#d=null;#l=[];isResponsive(){return this.#i}setResponsive(e){e!==this.#i&&(this.#i=e,this.#c(),this.emit("responsive-change",{isResponsive:e,width:this.#s,breakpoint:this.config.breakpoint??0}))}setBreakpoint(e){this.config.breakpoint=e,this.#h(this.#s)}setCardRenderer(e){this.config.cardRenderer=e,this.#i&&this.requestRender()}getWidth(){return this.#s}getActiveBreakpoint(){return this.#d}attach(e){super.attach(e),this.#u(),this.#g(this.config.hiddenColumns),this.config.breakpoints?.length&&(this.#l=[...this.config.breakpoints].sort((e,t)=>t.maxWidth-e.maxWidth)),this.#t=new ResizeObserver(e=>{const t=e[0]?.contentRect.width??0;this.#s=t,clearTimeout(this.#r),this.#r=setTimeout(()=>{this.#h(t)},this.config.debounceMs??100)}),this.#t.observe(this.gridElement)}#u(){const e=this.grid;if(!e||"function"!=typeof e.querySelector)return;const t=e.querySelector("tbw-grid-responsive-card");if(!t)return;const i=e;if(i.__frameworkAdapter?.parseResponsiveCardElement){const e=i.__frameworkAdapter.parseResponsiveCardElement(t);e&&(this.config={...this.config,cardRenderer:e})}const r=t.getAttribute("breakpoint"),o=t.getAttribute("card-row-height"),s=t.getAttribute("hidden-columns"),n=t.getAttribute("hide-header"),a=t.getAttribute("debounce-ms"),c={};if(null!==r){const e=parseInt(r,10);isNaN(e)||(c.breakpoint=e)}if(null!==o&&(c.cardRowHeight="auto"===o?"auto":parseInt(o,10)),null!==s&&(c.hiddenColumns=s.split(",").map(e=>e.trim()).filter(e=>e.length>0)),null!==n&&(c.hideHeader="false"!==n),null!==a){const e=parseInt(a,10);isNaN(e)||(c.debounceMs=e)}const h=t.innerHTML.trim();!h||this.config.cardRenderer||i.__frameworkAdapter?.parseResponsiveCardElement||(c.cardRenderer=e=>{const t=d(l(h,{value:e,row:e})),i=document.createElement("div");return i.className="tbw-responsive-card-content",i.innerHTML=t,i}),Object.keys(c).length>0&&(this.config={...this.config,...c})}#g(e){if(this.#n.clear(),this.#a.clear(),e)for(const t of e)"string"==typeof t?this.#n.add(t):t.showValue?this.#a.add(t.field):this.#n.add(t.field)}detach(){this.#t?.disconnect(),this.#t=void 0,clearTimeout(this.#r),this.#r=void 0,this.gridElement&&this.gridElement.removeAttribute("data-responsive"),super.detach()}handleQuery(e){if("isCardMode"===e.type)return this.#i}afterRender(){this.#p();if(!(this.#l.length>0?null!==this.#d:this.#i))return;const e=this.#n.size>0,t=this.#a.size>0;if(!e&&!t)return;const i=this.gridElement.querySelectorAll(".cell[data-field]");for(const r of i){const e=r.getAttribute("data-field");e&&(this.#n.has(e)?(r.setAttribute("data-responsive-hidden",""),r.removeAttribute("data-responsive-value-only")):this.#a.has(e)?(r.setAttribute("data-responsive-value-only",""),r.removeAttribute("data-responsive-hidden")):(r.removeAttribute("data-responsive-hidden"),r.removeAttribute("data-responsive-value-only")))}}#h(e){if(this.#l.length>0)return void this.#f(e);const t=this.config.breakpoint??0;0!==t||this.#o||(this.#o=!0,console.warn("[tbw-grid:ResponsivePlugin] No breakpoint configured. Responsive mode is disabled. Set a breakpoint based on your grid's column count."));const i=t>0&&e<t;i!==this.#i&&(this.#i=i,this.#c(),this.emit("responsive-change",{isResponsive:i,width:e,breakpoint:t}),this.requestRender())}#f(e){let t=null;for(const i of this.#l)e<=i.maxWidth&&(t=i);if(t!==this.#d){this.#d=t,t?.hiddenColumns?this.#g(t.hiddenColumns):this.#g(this.config.hiddenColumns);const i=!0===t?.cardLayout;i!==this.#i&&(this.#i=i,this.#c()),this.emit("responsive-change",{isResponsive:this.#i,width:e,breakpoint:t?.maxWidth??0}),this.requestRender()}}#w;#c(){this.gridElement.toggleAttribute("data-responsive",this.#i);const e=!1!==this.config.animate;this.gridElement.toggleAttribute("data-responsive-animate",e),this.config.animationDuration&&this.gridElement.style.setProperty("--tbw-responsive-duration",`${this.config.animationDuration}ms`);const t=this.grid;if(this.#i){t._virtualization&&(this.#w=t._virtualization.rowHeight);const e=this.gridElement.querySelector(".tbw-scroll-area");e&&(e.scrollLeft=0)}else{const e=this.gridElement.querySelectorAll(".data-grid-row");for(const t of e)t.style.height="",t.classList.remove("responsive-card");this.#w&&this.#w>0&&t._virtualization&&(t._virtualization.rowHeight=this.#w,this.#w=void 0),this.#m=void 0,this.#v=void 0,this.#b=void 0}}renderRow(e,t,i){if(!this.#i||!this.config.cardRenderer)return;if(e.__isGroupRow)return;t.replaceChildren();const r=this.config.cardRenderer(e,i);t.className="data-grid-row responsive-card";const o=this.config.cardRowHeight??"auto";return t.style.height="auto"!==o?`${o}px`:"auto",t.appendChild(r),!0}onKeyDown(e){if(!this.#i)return!1;if(this.config.cardRenderer){if(["ArrowUp","ArrowDown","ArrowLeft","ArrowRight"].includes(e.key))return!1}const t=this.rows.length-1,i=this.visibleColumns.length-1;switch(e.key){case"ArrowDown":if(this.grid._focusCol<i)return this.grid._focusCol+=1,e.preventDefault(),h(this.grid),!0;if(this.grid._focusRow<t)return this.grid._focusRow+=1,this.grid._focusCol=0,e.preventDefault(),h(this.grid),!0;break;case"ArrowUp":if(this.grid._focusCol>0)return this.grid._focusCol-=1,e.preventDefault(),h(this.grid),!0;if(this.grid._focusRow>0)return this.grid._focusRow-=1,this.grid._focusCol=i,e.preventDefault(),h(this.grid),!0;break;case"ArrowRight":if(this.grid._focusRow<t)return this.grid._focusRow+=1,e.preventDefault(),h(this.grid),!0;break;case"ArrowLeft":if(this.grid._focusRow>0)return this.grid._focusRow-=1,e.preventDefault(),h(this.grid),!0}return!1}#m;#v;#b;#R(){if(this.#m&&this.#m>0)return this.#m;const e=this.config.cardRowHeight;return"number"==typeof e&&e>0?e:80}#C(){return this.#v&&this.#v>0?this.#v:this.#w??28}#y(){for(const e of this.rows)if(e.__isGroupRow)return!0;return!1}#_(){let e=0,t=0;for(const i of this.rows)i.__isGroupRow?e++:t++;return{groupCount:e,cardCount:t}}getExtraHeight(){if(!this.#i||!this.config.cardRenderer)return 0;if(!this.#y())return 0;const e=this.#w??28,t=this.#C(),i=this.#R(),{groupCount:r,cardCount:o}=this.#_();return r*Math.max(0,t-e)+o*Math.max(0,i-e)}getExtraHeightBefore(e){if(!this.#i||!this.config.cardRenderer)return 0;if(!this.#y())return 0;const t=this.#w??28,i=this.#C(),r=this.#R(),o=Math.max(0,i-t),s=Math.max(0,r-t);let n=0,a=0;const d=this.rows,l=Math.min(e,d.length);for(let c=0;c<l;c++)d[c].__isGroupRow?n++:a++;return n*o+a*s}getRowHeight(e,t){if(this.#i&&this.config.cardRenderer)return e.__isGroupRow?this.#C():this.#R()}#k(){let e=0;for(const t of this.rows)t.__isGroupRow||e++;return e}#H=!1;#p(){if(!this.#i||!this.config.cardRenderer)return;let e=!1;const t=this.grid,i=this.#y(),r=this.#k();if(r!==this.#b&&(this.#b=r,e=!0),i){const t=this.gridElement.querySelector(".data-grid-row.group-row");if(t){const i=t.getBoundingClientRect().height;i>0&&i!==this.#v&&(this.#v=i,e=!0)}}const o=this.gridElement.querySelector(".data-grid-row.responsive-card");if(o){const r=o.getBoundingClientRect().height;r>0&&r!==this.#m&&(this.#m=r,e=!0,!i&&t._virtualization&&(t._virtualization.rowHeight=r))}e&&!this.#H&&(this.#H=!0,queueMicrotask(()=>{this.#H=!1,this.grid&&this.#i&&this.grid.refreshVirtualWindow?.(!0,!0)}))}}export{f as ResponsivePlugin};
 //# sourceMappingURL=index.js.map