@toolbox-web/grid 1.0.0 → 1.1.0

package/lib/plugins/responsive/index.js

@@ -0,0 +1,589 @@
+function b(r) {
+  r && r.querySelectorAll(".cell-focus").forEach((t) => t.classList.remove("cell-focus"));
+}
+const w = 'input,select,textarea,[contenteditable="true"],[contenteditable=""],[tabindex]:not([tabindex="-1"])', m = document.createElement("template");
+m.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(r, t) {
+  if (r._virtualization?.enabled) {
+    const { rowHeight: a, container: s, viewportEl: d } = r._virtualization, n = s, c = d?.clientHeight ?? n?.clientHeight ?? 0;
+    if (n && c > 0) {
+      const h = r._focusRow * a;
+      h < n.scrollTop ? n.scrollTop = h : h + a > n.scrollTop + c && (n.scrollTop = h - c + a);
+    }
+  }
+  const e = r._activeEditRows !== void 0 && r._activeEditRows !== -1;
+  e || r.refreshVirtualWindow(!1), b(r._bodyEl), Array.from(r._bodyEl.querySelectorAll('[aria-selected="true"]')).forEach((a) => {
+    a.setAttribute("aria-selected", "false");
+  });
+  const i = r._focusRow, o = r._virtualization.start ?? 0, l = r._virtualization.end ?? r._rows.length;
+  if (i >= o && i < l) {
+    const a = r._bodyEl.querySelectorAll(".data-grid-row")[i - o];
+    let s = a?.children[r._focusCol];
+    if ((!s || !s.classList?.contains("cell")) && (s = a?.querySelector(`.cell[data-col="${r._focusCol}"]`) ?? a?.querySelector(".cell[data-col]")), s) {
+      s.classList.add("cell-focus"), s.setAttribute("aria-selected", "true");
+      const d = r.querySelector(".tbw-scroll-area");
+      if (d && s && !e) {
+        const n = r._getHorizontalScrollOffsets?.(a ?? void 0, s) ?? { left: 0, right: 0 };
+        if (!n.skipScroll) {
+          const c = s.getBoundingClientRect(), h = d.getBoundingClientRect(), g = c.left - h.left + d.scrollLeft, p = g + c.width, f = d.scrollLeft + n.left, v = d.scrollLeft + d.clientWidth - n.right;
+          g < f ? d.scrollLeft = g - n.left : p > v && (d.scrollLeft = p - d.clientWidth + n.right);
+        }
+      }
+      if (r._activeEditRows !== void 0 && r._activeEditRows !== -1 && s.classList.contains("editing")) {
+        const n = s.querySelector(w);
+        if (n && document.activeElement !== n)
+          try {
+            n.focus({ preventScroll: !0 });
+          } catch {
+          }
+      } else if (!s.contains(document.activeElement)) {
+        s.hasAttribute("tabindex") || s.setAttribute("tabindex", "-1");
+        try {
+          s.focus({ preventScroll: !0 });
+        } catch {
+        }
+      }
+    }
+  }
+}
+const R = {
+  expand: "▶",
+  collapse: "▼",
+  sortAsc: "▲",
+  sortDesc: "▼",
+  sortNone: "⇅",
+  submenuArrow: "▶",
+  dragHandle: "⋮⋮",
+  toolPanel: "☰"
+};
+class _ {
+  /**
+   * 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;
+  }
+  /**
+   * Request a re-render of the grid.
+   */
+  requestRender() {
+    this.grid?.requestRender?.();
+  }
+  /**
+   * Request a re-render and restore focus styling afterward.
+   * Use this when a plugin action (like expand/collapse) triggers a render
+   * but needs to maintain keyboard navigation focus.
+   */
+  requestRenderWithFocus() {
+    this.grid?.requestRenderWithFocus?.();
+  }
+  /**
+   * Request a lightweight style update without rebuilding DOM.
+   * Use this instead of requestRender() when only CSS classes need updating.
+   */
+  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 { ...R, ...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 C = '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{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:nth-child(2n){background:var(--tbw-color-row-alt)}tbw-grid[data-responsive] .data-grid-row:hover{background:var(--tbw-color-row-hover)}tbw-grid[data-responsive] .data-grid-row[aria-selected=true]{background:var(--tbw-color-selection)}tbw-grid[data-responsive] .data-grid-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>.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>.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>.cell:after{content:none}tbw-grid[data-responsive] .cell[data-utility]{display:none!important}tbw-grid[data-responsive] .data-grid-row:not(:last-child){margin-bottom:var(--tbw-spacing-xs)}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 _ {
+  name = "responsive";
+  version = "1.0.0";
+  styles = C;
+  #e;
+  #t = !1;
+  #s;
+  #h = !1;
+  #o = 0;
+  /** Set of column fields to completely hide */
+  #i = /* @__PURE__ */ new Set();
+  /** Set of column fields to show value only (no header label) */
+  #n = /* @__PURE__ */ new Set();
+  /** Currently active breakpoint, or null if none */
+  #a = null;
+  /** Sorted breakpoints from largest to smallest */
+  #l = [];
+  /**
+   * 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.#c(), this.emit("responsive-change", {
+      isResponsive: t,
+      width: this.#o,
+      breakpoint: this.config.breakpoint ?? 0
+    }));
+  }
+  /**
+   * Update breakpoint dynamically.
+   * @param width - New breakpoint width in pixels
+   */
+  setBreakpoint(t) {
+    this.config.breakpoint = t, this.#u(this.#o);
+  }
+  /**
+   * 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.#o;
+  }
+  /**
+   * Get the currently active breakpoint config (multi-breakpoint mode only).
+   * @returns The active BreakpointConfig, or null if no breakpoint is active
+   */
+  getActiveBreakpoint() {
+    return this.#a;
+  }
+  attach(t) {
+    super.attach(t), this.#d(this.config.hiddenColumns), this.config.breakpoints?.length && (this.#l = [...this.config.breakpoints].sort((e, i) => i.maxWidth - e.maxWidth)), this.#e = new ResizeObserver((e) => {
+      const i = e[0]?.contentRect.width ?? 0;
+      this.#o = i, clearTimeout(this.#s), this.#s = setTimeout(() => {
+        this.#u(i);
+      }, this.config.debounceMs ?? 100);
+    }), this.#e.observe(this.gridElement);
+  }
+  /**
+   * Build the hidden and value-only column sets from config.
+   */
+  #d(t) {
+    if (this.#i.clear(), this.#n.clear(), !!t)
+      for (const e of t)
+        typeof e == "string" ? this.#i.add(e) : e.showValue ? this.#n.add(e.field) : this.#i.add(e.field);
+  }
+  detach() {
+    this.#e?.disconnect(), this.#e = void 0, clearTimeout(this.#s), this.#s = void 0, this.gridElement && this.gridElement.removeAttribute("data-responsive"), super.detach();
+  }
+  /**
+   * 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.#l.length > 0 ? this.#a !== null : this.#t))
+      return;
+    const e = this.#i.size > 0, i = this.#n.size > 0;
+    if (!e && !i)
+      return;
+    const o = this.gridElement.querySelectorAll(".cell[data-field]");
+    for (const l of o) {
+      const a = l.getAttribute("data-field");
+      a && (this.#i.has(a) ? (l.setAttribute("data-responsive-hidden", ""), l.removeAttribute("data-responsive-value-only")) : this.#n.has(a) ? (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.
+   */
+  #u(t) {
+    if (this.#l.length > 0) {
+      this.#g(t);
+      return;
+    }
+    const e = this.config.breakpoint ?? 0;
+    e === 0 && !this.#h && (this.#h = !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.#c(), 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.
+   */
+  #g(t) {
+    let e = null;
+    for (const o of this.#l)
+      t <= o.maxWidth && (e = o);
+    if (e !== this.#a) {
+      this.#a = e, e?.hiddenColumns ? this.#d(e.hiddenColumns) : this.#d(this.config.hiddenColumns);
+      const o = e?.cardLayout === !0;
+      o !== this.#t && (this.#t = o, this.#c()), 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 */
+  #r;
+  /**
+   * Apply the responsive state to the grid element.
+   * Handles scroll reset when entering responsive mode and row height restoration on exit.
+   */
+  #c() {
+    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.#r = 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 o of i)
+        o.style.height = "", o.classList.remove("responsive-card");
+      this.#r && this.#r > 0 && e._virtualization && (e._virtualization.rowHeight = this.#r, this.#r = 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)
+      return;
+    e.replaceChildren();
+    const o = this.config.cardRenderer(t, i);
+    e.classList.add("responsive-card");
+    const l = this.config.cardRowHeight ?? "auto";
+    return l !== "auto" ? e.style.height = `${l}px` : e.style.height = "auto", e.appendChild(o), !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(), u(this.grid), !0;
+        if (this.grid._focusRow < e)
+          return this.grid._focusRow += 1, this.grid._focusCol = 0, t.preventDefault(), u(this.grid), !0;
+        break;
+      case "ArrowUp":
+        if (this.grid._focusCol > 0)
+          return this.grid._focusCol -= 1, t.preventDefault(), u(this.grid), !0;
+        if (this.grid._focusRow > 0)
+          return this.grid._focusRow -= 1, this.grid._focusCol = i, t.preventDefault(), u(this.grid), !0;
+        break;
+      case "ArrowRight":
+        if (this.grid._focusRow < e)
+          return this.grid._focusRow += 1, t.preventDefault(), u(this.grid), !0;
+        break;
+      case "ArrowLeft":
+        if (this.grid._focusRow > 0)
+          return this.grid._focusRow -= 1, t.preventDefault(), u(this.grid), !0;
+        break;
+    }
+    return !1;
+  }
+}
+export {
+  A as ResponsivePlugin
+};
+//# sourceMappingURL=index.js.map