@toolbox-web/grid 1.21.0 → 1.21.2

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

@@ -1,727 +1,2 @@
-const g = '<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>', p = {
-  expand: "▶",
-  collapse: "▼",
-  sortAsc: "▲",
-  sortDesc: "▼",
-  sortNone: "⇅",
-  submenuArrow: "▶",
-  dragHandle: "⋮⋮",
-  toolPanel: "☰",
-  filter: g,
-  filterActive: g,
-  print: "🖨️"
-};
-class f {
-  /**
-   * 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(e = {}) {
-    this.userConfig = e;
-  }
-  /**
-   * 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(e) {
-    this.#e?.abort(), this.#e = new AbortController(), this.grid = e, 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(e) {
-    return this.grid?.getPlugin(e);
-  }
-  /**
-   * Emit a custom event from the grid.
-   */
-  emit(e, t) {
-    this.grid?.dispatchEvent?.(new CustomEvent(e, { detail: t, bubbles: !0 }));
-  }
-  /**
-   * Emit a cancelable custom event from the grid.
-   * @returns `true` if the event was cancelled (preventDefault called), `false` otherwise
-   */
-  emitCancelable(e, t) {
-    const s = new CustomEvent(e, { detail: t, bubbles: !0, cancelable: !0 });
-    return this.grid?.dispatchEvent?.(s), s.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(e, t) {
-    this.grid?._pluginManager?.subscribe(this, e, t);
-  }
-  /**
-   * Unsubscribe from a plugin event.
-   *
-   * @category Plugin Development
-   * @param eventType - The event type to stop listening for
-   *
-   * @example
-   * ```typescript
-   * this.off('filter-change');
-   * ```
-   */
-  off(e) {
-    this.grid?._pluginManager?.unsubscribe(this, e);
-  }
-  /**
-   * 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(e, t) {
-    this.grid?._pluginManager?.emitPluginEvent(e, t);
-  }
-  /**
-   * 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 e = this.grid?.gridConfig?.icons ?? {};
-    return { ...p, ...e };
-  }
-  // #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 e = this.grid?.effectiveConfig?.animation?.mode ?? "reduced-motion";
-    if (e === !1 || e === "off") return !1;
-    if (e === !0 || e === "on") return !0;
-    const t = this.gridElement;
-    return t ? getComputedStyle(t).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 e = this.gridElement;
-    if (e) {
-      const t = getComputedStyle(e).getPropertyValue("--tbw-animation-duration").trim(), s = parseInt(t, 10);
-      if (!isNaN(s)) return s;
-    }
-    return 200;
-  }
-  // #endregion
-  /**
-   * Resolve an icon value to string or HTMLElement.
-   * Checks plugin config first, then grid-level icons, then defaults.
-   *
-   * @param iconKey - The icon key in GridIcons (e.g., 'expand', 'collapse')
-   * @param pluginOverride - Optional plugin-level override
-   * @returns The resolved icon value
-   */
-  resolveIcon(e, t) {
-    return t !== void 0 ? t : this.gridIcons[e];
-  }
-  /**
-   * 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(e, t) {
-    typeof t == "string" ? e.innerHTML = t : t instanceof HTMLElement && (e.innerHTML = "", e.appendChild(t.cloneNode(!0)));
-  }
-  /**
-   * Log a warning message.
-   */
-  warn(e) {
-    console.warn(`[tbw-grid:${this.name}] ${e}`);
-  }
-  // #endregion
-}
-function c(d) {
-  if (!d.length) return [];
-  const e = /* @__PURE__ */ new Map(), t = [], s = (o, n) => {
-    if (!n.length) return;
-    const l = t[t.length - 1];
-    if (l && l.implicit && l.firstIndex + l.columns.length === o) {
-      l.columns.push(...n);
-      return;
-    }
-    t.push({
-      id: "__implicit__" + o,
-      label: void 0,
-      columns: n,
-      firstIndex: o,
-      implicit: !0
-    });
-  };
-  let i = [], r = 0;
-  return d.forEach((o, n) => {
-    const l = o.group;
-    if (!l) {
-      i.length === 0 && (r = n), i.push(o);
-      return;
-    }
-    i.length && (s(r, i.slice()), i = []);
-    const u = typeof l == "string" ? l : l.id;
-    let a = e.get(u);
-    a || (a = {
-      id: u,
-      label: typeof l == "string" ? void 0 : l.label,
-      columns: [],
-      firstIndex: n
-    }, e.set(u, a), t.push(a)), a.columns.push(o);
-  }), i.length && s(r, i), t.length === 1 && t[0].implicit && t[0].columns.length === d.length ? [] : t;
-}
-function h(d, e, t) {
-  if (!e.length || !d) return;
-  const s = /* @__PURE__ */ new Map();
-  for (const r of e)
-    for (const o of r.columns)
-      o.field && s.set(o.field, r.id);
-  const i = Array.from(d.querySelectorAll(".cell[data-field]"));
-  i.forEach((r) => {
-    const o = r.getAttribute("data-field") || "", n = s.get(o);
-    n && (r.classList.add("grouped"), r.getAttribute("data-group") || r.setAttribute("data-group", n));
-  });
-  for (const r of e) {
-    const o = r.columns[r.columns.length - 1], n = i.find((l) => l.getAttribute("data-field") === o.field);
-    n && n.classList.add("group-end");
-  }
-}
-function m(d, e) {
-  if (d.length === 0) return null;
-  const t = document.createElement("div");
-  t.className = "header-group-row", t.setAttribute("role", "row");
-  for (const s of d) {
-    const i = s.columns[0], r = i ? e.findIndex((u) => u.field === i.field) : -1;
-    if (r === -1) continue;
-    const o = String(s.id).startsWith("__implicit__"), n = o ? "" : s.label || s.id, l = document.createElement("div");
-    l.className = "cell header-group-cell", o && l.classList.add("implicit-group"), l.setAttribute("data-group", String(s.id)), l.style.gridColumn = `${r + 1} / span ${s.columns.length}`, l.textContent = n, t.appendChild(l);
-  }
-  return t;
-}
-function b(d) {
-  return d.some((e) => e.group != null);
-}
-const w = "@layer tbw-plugins{.header-group-row{display:grid;grid-auto-flow:column;background:var(--tbw-grouping-columns-header-bg, var(--tbw-color-header-bg));border-bottom:1px solid var(--tbw-grouping-columns-border, var(--tbw-color-border))}.header-group-cell{display:flex;align-items:center;justify-content:center;padding:var(--tbw-button-padding-sm, .25rem .5rem);font-weight:600;font-size:var(--tbw-font-size-sm, .9em);text-transform:uppercase;letter-spacing:.5px;border-right:2px solid var(--tbw-grouping-columns-separator, var(--tbw-color-border-strong, var(--tbw-color-border)))}.header-group-cell:last-child{border-right:none}.header-row .cell.grouped{border-top:none}.header-row .cell.group-end{border-right:2px solid var(--tbw-grouping-columns-separator, var(--tbw-color-border-strong, var(--tbw-color-border)))}.header-row .cell.group-end:last-child{border-right:none}.rows .cell.group-end{border-right:2px solid var(--tbw-grouping-columns-separator, var(--tbw-color-border-strong, var(--tbw-color-border)))}.rows .cell.group-end:last-child{border-right:none}.header-group-row.no-borders{border-bottom:none}.header-group-row.no-borders .header-group-cell{border-right:none}.header-row.no-group-borders .cell.group-end{border-right:1px solid var(--tbw-color-border)}}";
-class v extends f {
-  /**
-   * Plugin manifest - declares owned properties for configuration validation.
-   * @internal
-   */
-  static manifest = {
-    ownedProperties: [
-      {
-        property: "group",
-        level: "column",
-        description: 'the "group" column property'
-      },
-      {
-        property: "columnGroups",
-        level: "config",
-        description: 'the "columnGroups" config property',
-        isUsed: (e) => Array.isArray(e) && e.length > 0
-      }
-    ],
-    queries: [{ type: "getColumnGrouping", description: "Returns column group metadata for the visibility panel" }]
-  };
-  /** @internal */
-  name = "groupingColumns";
-  /** @internal */
-  styles = w;
-  /** @internal */
-  get defaultConfig() {
-    return {
-      showGroupBorders: !0,
-      lockGroupOrder: !1
-    };
-  }
-  // #region Internal State
-  groups = [];
-  isActive = !1;
-  /** Fields that are the last column in a group (for group-end border class). */
-  #e = /* @__PURE__ */ new Set();
-  // #endregion
-  // #region Lifecycle
-  /** @internal */
-  attach(e) {
-    super.attach(e), e.addEventListener("column-move", this.#r, {
-      signal: this.disconnectSignal
-    });
-  }
-  /** @internal */
-  detach() {
-    this.groups = [], this.isActive = !1, this.#e.clear();
-  }
-  // #region Column Move Guard
-  /**
-   * Handle the cancelable column-move event.
-   * - When lockGroupOrder is enabled, prevents moves that would break group contiguity.
-   * - Always refreshes #groupEndFields after a successful move so that afterCellRender
-   *   applies group-end borders to the correct (reordered) last column.
-   */
-  #r = (e) => {
-    if (!this.isActive) return;
-    const t = e, { field: s, columnOrder: i } = t.detail;
-    if (this.config.lockGroupOrder) {
-      for (const r of this.groups)
-        if (!r.id.startsWith("__implicit__") && !this.#i(r, i)) {
-          t.preventDefault(), this.#s(s);
-          return;
-        }
-    }
-    this.#t(i);
-  };
-  /**
-   * Recompute which fields are group-end based on a column order.
-   * The last field of each explicit group in the order gets the group-end class.
-   */
-  #t(e) {
-    this.#e.clear();
-    const t = this.#o(e);
-    for (const s of this.groups) {
-      const i = new Set(s.columns.map((r) => r.field));
-      for (let r = e.length - 1; r >= 0; r--)
-        if (i.has(e[r])) {
-          const o = e[r];
-          o !== t && this.#e.add(o);
-          break;
-        }
-    }
-  }
-  /**
-   * Find the trailing field of the last group in column order (to exclude from group-end marking).
-   */
-  #o(e) {
-    if (this.groups.length === 0) return null;
-    for (let t = e.length - 1; t >= 0; t--) {
-      const s = e[t];
-      for (const i of this.groups)
-        if (i.columns.some((r) => r.field === s)) {
-          const r = new Set(i.columns.map((o) => o.field));
-          for (let o = e.length - 1; o >= 0; o--)
-            if (r.has(e[o])) return e[o];
-        }
-    }
-    return null;
-  }
-  /**
-   * Check if all columns in a group are contiguous in the proposed column order.
-   */
-  #i(e, t) {
-    const s = e.columns.map((i) => t.indexOf(i.field)).filter((i) => i !== -1).sort((i, r) => i - r);
-    return s.length <= 1 ? !0 : s.length === s[s.length - 1] - s[0] + 1;
-  }
-  /**
-   * Flash the header cell with an error color to indicate a blocked move.
-   */
-  #s(e) {
-    const t = this.gridElement?.querySelector(
-      `.header-row [part~="header-cell"][data-field="${e}"]`
-    );
-    t && (t.style.setProperty("--_flash-color", "var(--tbw-color-error)"), t.animate(
-      [{ backgroundColor: "rgba(from var(--_flash-color) r g b / 30%)" }, { backgroundColor: "transparent" }],
-      { duration: 400, easing: "ease-out" }
-    ));
-  }
-  // #endregion
-  /** @internal */
-  handleQuery(e) {
-    if (e.type === "getColumnGrouping")
-      return this.#n();
-  }
-  /**
-   * Get stable column grouping info that includes ALL columns (visible and hidden).
-   * Used by the visibility panel to maintain group structure regardless of visibility state.
-   * Fields within each group are sorted by current display order.
-   */
-  #n() {
-    let e;
-    const t = this.grid?.gridConfig?.columnGroups;
-    if (t && Array.isArray(t) && t.length > 0)
-      e = t.filter((i) => i.children.length > 0).map((i) => ({
-        id: i.id,
-        label: i.header,
-        fields: [...i.children]
-      }));
-    else if (this.isActive && this.groups.length > 0) {
-      e = this.groups.filter((r) => !r.id.startsWith("__implicit__")).map((r) => ({
-        id: r.id,
-        label: r.label ?? r.id,
-        fields: r.columns.map((o) => o.field)
-      }));
-      const i = this.columns;
-      for (const r of i)
-        if (r.hidden && r.group) {
-          const o = typeof r.group == "string" ? r.group : r.group.id, n = typeof r.group == "string" ? r.group : r.group.label ?? r.group.id, l = e.find((u) => u.id === o);
-          l ? l.fields.includes(r.field) || l.fields.push(r.field) : e.push({ id: o, label: n, fields: [r.field] });
-        }
-    } else {
-      const i = this.columns, r = /* @__PURE__ */ new Map();
-      for (const o of i) {
-        if (!o.group) continue;
-        const n = typeof o.group == "string" ? o.group : o.group.id, l = typeof o.group == "string" ? o.group : o.group.label ?? o.group.id, u = r.get(n);
-        u ? u.fields.includes(o.field) || u.fields.push(o.field) : r.set(n, { id: n, label: l, fields: [o.field] });
-      }
-      e = Array.from(r.values());
-    }
-    const s = this.grid?.getColumnOrder();
-    if (s && s.length > 0) {
-      const i = new Map(s.map((r, o) => [r, o]));
-      for (const r of e)
-        r.fields.sort((o, n) => (i.get(o) ?? 1 / 0) - (i.get(n) ?? 1 / 0));
-    }
-    return e;
-  }
-  // #endregion
-  // #region Static Detection
-  /**
-   * Auto-detect column groups from column configuration.
-   * Detects both inline `column.group` properties and declarative `columnGroups` config.
-   */
-  static detect(e, t) {
-    if (t?.columnGroups && Array.isArray(t.columnGroups) && t.columnGroups.length > 0)
-      return !0;
-    const s = t?.columns;
-    return Array.isArray(s) ? b(s) : !1;
-  }
-  // #endregion
-  // #region Hooks
-  /** @internal */
-  processColumns(e) {
-    const t = this.grid?.gridConfig?.columnGroups;
-    let s;
-    if (t && Array.isArray(t) && t.length > 0) {
-      const r = /* @__PURE__ */ new Map();
-      for (const o of t)
-        for (const n of o.children)
-          r.set(n, { id: o.id, label: o.header });
-      s = e.map((o) => {
-        const n = r.get(o.field);
-        return n && !o.group ? { ...o, group: n } : o;
-      });
-    } else
-      s = [...e];
-    const i = c(s);
-    if (i.length === 0)
-      return this.isActive = !1, this.groups = [], s;
-    this.isActive = !0, this.groups = i, this.#e.clear();
-    for (const r of i) {
-      const o = r.columns[r.columns.length - 1];
-      o?.field && this.#e.add(o.field);
-    }
-    return s;
-  }
-  /** @internal */
-  afterRender() {
-    if (!this.isActive) {
-      const l = this.gridElement?.querySelector(".header")?.querySelector(".header-group-row");
-      l && l.remove();
-      return;
-    }
-    const e = this.gridElement?.querySelector(".header");
-    if (!e) return;
-    const t = e.querySelector(".header-group-row");
-    t && t.remove();
-    const s = this.visibleColumns, i = c(s);
-    if (i.length === 0) return;
-    this.#e.clear();
-    for (let n = 0; n < i.length; n++) {
-      const l = i[n], u = l.columns[l.columns.length - 1];
-      u?.field && n < i.length - 1 && this.#e.add(u.field);
-    }
-    const r = m(i, s);
-    if (r) {
-      r.classList.toggle("no-borders", !this.config.showGroupBorders);
-      const n = e.querySelector(".header-row");
-      n ? e.insertBefore(r, n) : e.appendChild(r);
-    }
-    const o = e.querySelector(".header-row");
-    o && (o.classList.toggle("no-group-borders", !this.config.showGroupBorders), h(o, i));
-  }
-  /**
-   * Apply group-end class to individual cells during render and scroll.
-   * This is more efficient than querySelectorAll in afterRender and ensures
-   * cells recycled during scroll also get the class applied.
-   * @internal
-   */
-  afterCellRender(e) {
-    !this.isActive || !this.config.showGroupBorders || e.cellElement.classList.toggle("group-end", this.#e.has(e.column.field));
-  }
-  // #endregion
-  // #region Public API
-  /**
-   * Check if column groups are active.
-   * @returns Whether grouping is active
-   */
-  isGroupingActive() {
-    return this.isActive;
-  }
-  /**
-   * Get the computed column groups.
-   * @returns Array of column groups
-   */
-  getGroups() {
-    return this.groups;
-  }
-  /**
-   * Get columns in a specific group.
-   * @param groupId - The group ID to find
-   * @returns Array of columns in the group
-   */
-  getGroupColumns(e) {
-    const t = this.groups.find((s) => s.id === e);
-    return t ? t.columns : [];
-  }
-  /**
-   * Refresh column groups (recompute from current columns).
-   */
-  refresh() {
-    this.requestRender();
-  }
-  // #endregion
-}
-export {
-  v as GroupingColumnsPlugin
-};
+const e='<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>',r={expand:"▶",collapse:"▼",sortAsc:"▲",sortDesc:"▼",sortNone:"⇅",submenuArrow:"▶",dragHandle:"⋮⋮",toolPanel:"☰",filter:e,filterActive:e,print:"🖨️"};class t{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,r){this.grid?.dispatchEvent?.(new CustomEvent(e,{detail:r,bubbles:!0}))}emitCancelable(e,r){const t=new CustomEvent(e,{detail:r,bubbles:!0,cancelable:!0});return this.grid?.dispatchEvent?.(t),t.defaultPrevented}on(e,r){this.grid?._pluginManager?.subscribe(this,e,r)}off(e){this.grid?._pluginManager?.unsubscribe(this,e)}emitPluginEvent(e,r){this.grid?._pluginManager?.emitPluginEvent(e,r)}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{...r,...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 r=this.gridElement;if(r){return"0"!==getComputedStyle(r).getPropertyValue("--tbw-animation-enabled").trim()}return!0}get animationDuration(){const e=this.gridElement;if(e){const r=getComputedStyle(e).getPropertyValue("--tbw-animation-duration").trim(),t=parseInt(r,10);if(!isNaN(t))return t}return 200}resolveIcon(e,r){return void 0!==r?r:this.gridIcons[e]}setIcon(e,r){"string"==typeof r?e.innerHTML=r:r instanceof HTMLElement&&(e.innerHTML="",e.appendChild(r.cloneNode(!0)))}warn(e){console.warn(`[tbw-grid:${this.name}] ${e}`)}}function o(e){if(!e.length)return[];const r=/* @__PURE__ */new Map,t=[],o=(e,r)=>{if(!r.length)return;const o=t[t.length-1];o&&o.implicit&&o.firstIndex+o.columns.length===e?o.columns.push(...r):t.push({id:"__implicit__"+e,label:void 0,columns:r,firstIndex:e,implicit:!0})};let i=[],n=0;return e.forEach((e,s)=>{const l=e.group;if(!l)return 0===i.length&&(n=s),void i.push(e);i.length&&(o(n,i.slice()),i=[]);const d="string"==typeof l?l:l.id;let u=r.get(d);u||(u={id:d,label:"string"==typeof l?void 0:l.label,columns:[],firstIndex:s},r.set(d,u),t.push(u)),u.columns.push(e)}),i.length&&o(n,i),1===t.length&&t[0].implicit&&t[0].columns.length===e.length?[]:t}class i extends t{static manifest={ownedProperties:[{property:"group",level:"column",description:'the "group" column property'},{property:"columnGroups",level:"config",description:'the "columnGroups" config property',isUsed:e=>Array.isArray(e)&&e.length>0}],queries:[{type:"getColumnGrouping",description:"Returns column group metadata for the visibility panel"}]};name="groupingColumns";styles="@layer tbw-plugins{.header-group-row{display:grid;grid-auto-flow:column;background:var(--tbw-grouping-columns-header-bg, var(--tbw-color-header-bg));border-bottom:1px solid var(--tbw-grouping-columns-border, var(--tbw-color-border))}.header-group-cell{display:flex;align-items:center;justify-content:center;padding:var(--tbw-button-padding-sm, .25rem .5rem);font-weight:600;font-size:var(--tbw-font-size-sm, .9em);text-transform:uppercase;letter-spacing:.5px;border-right:2px solid var(--tbw-grouping-columns-separator, var(--tbw-color-border-strong, var(--tbw-color-border)))}.header-group-cell:last-child{border-right:none}.header-row .cell.grouped{border-top:none}.header-row .cell.group-end{border-right:2px solid var(--tbw-grouping-columns-separator, var(--tbw-color-border-strong, var(--tbw-color-border)))}.header-row .cell.group-end:last-child{border-right:none}.rows .cell.group-end{border-right:2px solid var(--tbw-grouping-columns-separator, var(--tbw-color-border-strong, var(--tbw-color-border)))}.rows .cell.group-end:last-child{border-right:none}.header-group-row.no-borders{border-bottom:none}.header-group-row.no-borders .header-group-cell{border-right:none}.header-row.no-group-borders .cell.group-end{border-right:1px solid var(--tbw-color-border)}}";get defaultConfig(){return{showGroupBorders:!0,lockGroupOrder:!1}}groups=[];isActive=!1;#r=/* @__PURE__ */new Set;attach(e){super.attach(e),e.addEventListener("column-move",this.#t,{signal:this.disconnectSignal})}detach(){this.groups=[],this.isActive=!1,this.#r.clear()}#t=e=>{if(!this.isActive)return;const r=e,{field:t,columnOrder:o}=r.detail;if(this.config.lockGroupOrder)for(const i of this.groups)if(!i.id.startsWith("__implicit__")&&!this.#o(i,o))return r.preventDefault(),void this.#i(t);this.#n(o)};#n(e){this.#r.clear();const r=this.#s(e);for(const t of this.groups){const o=new Set(t.columns.map(e=>e.field));for(let t=e.length-1;t>=0;t--)if(o.has(e[t])){const o=e[t];o!==r&&this.#r.add(o);break}}}#s(e){if(0===this.groups.length)return null;for(let r=e.length-1;r>=0;r--){const t=e[r];for(const r of this.groups)if(r.columns.some(e=>e.field===t)){const t=new Set(r.columns.map(e=>e.field));for(let r=e.length-1;r>=0;r--)if(t.has(e[r]))return e[r]}}return null}#o(e,r){const t=e.columns.map(e=>r.indexOf(e.field)).filter(e=>-1!==e).sort((e,r)=>e-r);return t.length<=1||t.length===t[t.length-1]-t[0]+1}#i(e){const r=this.gridElement?.querySelector(`.header-row [part~="header-cell"][data-field="${e}"]`);r&&(r.style.setProperty("--_flash-color","var(--tbw-color-error)"),r.animate([{backgroundColor:"rgba(from var(--_flash-color) r g b / 30%)"},{backgroundColor:"transparent"}],{duration:400,easing:"ease-out"}))}handleQuery(e){if("getColumnGrouping"===e.type)return this.#l()}#l(){let e;const r=this.grid?.gridConfig?.columnGroups;if(r&&Array.isArray(r)&&r.length>0)e=r.filter(e=>e.children.length>0).map(e=>({id:e.id,label:e.header,fields:[...e.children]}));else if(this.isActive&&this.groups.length>0){e=this.groups.filter(e=>!e.id.startsWith("__implicit__")).map(e=>({id:e.id,label:e.label??e.id,fields:e.columns.map(e=>e.field)}));const r=this.columns;for(const t of r)if(t.hidden&&t.group){const r="string"==typeof t.group?t.group:t.group.id,o="string"==typeof t.group?t.group:t.group.label??t.group.id,i=e.find(e=>e.id===r);i?i.fields.includes(t.field)||i.fields.push(t.field):e.push({id:r,label:o,fields:[t.field]})}}else{const r=this.columns,t=/* @__PURE__ */new Map;for(const e of r){if(!e.group)continue;const r="string"==typeof e.group?e.group:e.group.id,o="string"==typeof e.group?e.group:e.group.label??e.group.id,i=t.get(r);i?i.fields.includes(e.field)||i.fields.push(e.field):t.set(r,{id:r,label:o,fields:[e.field]})}e=Array.from(t.values())}const t=this.grid?.getColumnOrder();if(t&&t.length>0){const r=new Map(t.map((e,r)=>[e,r]));for(const t of e)t.fields.sort((e,t)=>(r.get(e)??1/0)-(r.get(t)??1/0))}return e}static detect(e,r){if(r?.columnGroups&&Array.isArray(r.columnGroups)&&r.columnGroups.length>0)return!0;const t=r?.columns;return!!Array.isArray(t)&&function(e){return e.some(e=>null!=e.group)}(t)}processColumns(e){const r=this.grid?.gridConfig?.columnGroups;let t;if(r&&Array.isArray(r)&&r.length>0){const o=/* @__PURE__ */new Map;for(const e of r)for(const r of e.children)o.set(r,{id:e.id,label:e.header});t=e.map(e=>{const r=o.get(e.field);return r&&!e.group?{...e,group:r}:e})}else t=[...e];const i=o(t);if(0===i.length)return this.isActive=!1,this.groups=[],t;this.isActive=!0,this.groups=i,this.#r.clear();for(const o of i){const e=o.columns[o.columns.length-1];e?.field&&this.#r.add(e.field)}return t}afterRender(){if(!this.isActive){const e=this.gridElement?.querySelector(".header"),r=e?.querySelector(".header-group-row");return void(r&&r.remove())}const e=this.gridElement?.querySelector(".header");if(!e)return;const r=e.querySelector(".header-group-row");r&&r.remove();const t=this.visibleColumns,i=o(t);if(0===i.length)return;this.#r.clear();for(let o=0;o<i.length;o++){const e=i[o],r=e.columns[e.columns.length-1];r?.field&&o<i.length-1&&this.#r.add(r.field)}const n=function(e,r){if(0===e.length)return null;const t=document.createElement("div");t.className="header-group-row",t.setAttribute("role","row");for(const o of e){const e=o.columns[0],i=e?r.findIndex(r=>r.field===e.field):-1;if(-1===i)continue;const n=String(o.id).startsWith("__implicit__"),s=n?"":o.label||o.id,l=document.createElement("div");l.className="cell header-group-cell",n&&l.classList.add("implicit-group"),l.setAttribute("data-group",String(o.id)),l.style.gridColumn=`${i+1} / span ${o.columns.length}`,l.textContent=s,t.appendChild(l)}return t}(i,t);if(n){n.classList.toggle("no-borders",!this.config.showGroupBorders);const r=e.querySelector(".header-row");r?e.insertBefore(n,r):e.appendChild(n)}const s=e.querySelector(".header-row");s&&(s.classList.toggle("no-group-borders",!this.config.showGroupBorders),function(e,r){if(!r.length||!e)return;const t=/* @__PURE__ */new Map;for(const i of r)for(const e of i.columns)e.field&&t.set(e.field,i.id);const o=Array.from(e.querySelectorAll(".cell[data-field]"));o.forEach(e=>{const r=e.getAttribute("data-field")||"",o=t.get(r);o&&(e.classList.add("grouped"),e.getAttribute("data-group")||e.setAttribute("data-group",o))});for(const i of r){const e=i.columns[i.columns.length-1],r=o.find(r=>r.getAttribute("data-field")===e.field);r&&r.classList.add("group-end")}}(s,i))}afterCellRender(e){this.isActive&&this.config.showGroupBorders&&e.cellElement.classList.toggle("group-end",this.#r.has(e.column.field))}isGroupingActive(){return this.isActive}getGroups(){return this.groups}getGroupColumns(e){const r=this.groups.find(r=>r.id===e);return r?r.columns:[]}refresh(){this.requestRender()}}export{i as GroupingColumnsPlugin};
 //# sourceMappingURL=index.js.map