@toolbox-web/grid 1.21.1 → 1.22.0

package/lib/plugins/visibility/index.js

@@ -1,793 +1,2 @@
-const m = '<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>', w = {
-  expand: "▶",
-  collapse: "▼",
-  sortAsc: "▲",
-  sortDesc: "▼",
-  sortNone: "⇅",
-  submenuArrow: "▶",
-  dragHandle: "⋮⋮",
-  toolPanel: "☰",
-  filter: m,
-  filterActive: m,
-  print: "🖨️"
-};
-class C {
-  /**
-   * 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 i = new CustomEvent(e, { detail: t, 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(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 { ...w, ...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(), i = parseInt(t, 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(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
-}
-const y = '@layer tbw-plugins{.tbw-visibility-content{display:flex;flex-direction:column;height:100%}.tbw-visibility-list{flex:1;overflow-y:auto;padding:var(--tbw-panel-padding, var(--tbw-spacing-md, .5rem))}.tbw-visibility-row{display:flex;align-items:center;gap:var(--tbw-panel-gap, var(--tbw-spacing-md, .5rem));padding:var(--tbw-menu-item-padding, .375rem .25rem);cursor:pointer;font-size:var(--tbw-font-size-sm, .8125rem);border-radius:var(--tbw-border-radius, .25rem);position:relative}.tbw-visibility-row:hover{background:var(--tbw-visibility-hover, var(--tbw-color-row-hover))}.tbw-visibility-row input[type=checkbox]{cursor:pointer}.tbw-visibility-row.locked span{color:var(--tbw-color-fg-muted)}.tbw-visibility-handle{cursor:grab;color:var(--tbw-color-fg-muted);font-size:var(--tbw-font-size-2xs, .625rem);letter-spacing:-2px;-webkit-user-select:none;user-select:none;flex-shrink:0}.tbw-visibility-row.reorderable:hover .tbw-visibility-handle{color:var(--tbw-color-fg)}.tbw-visibility-label{display:flex;align-items:center;gap:var(--tbw-panel-gap, var(--tbw-spacing-md, .5rem));flex:1;cursor:pointer}.tbw-visibility-row.dragging{opacity:.5;cursor:grabbing}.tbw-visibility-row.drop-before:before{content:"";position:absolute;left:0;right:0;top:0;height:2px;background:var(--tbw-visibility-indicator, var(--tbw-color-accent))}.tbw-visibility-row.drop-after:after{content:"";position:absolute;left:0;right:0;bottom:0;height:2px;background:var(--tbw-visibility-indicator, var(--tbw-color-accent))}.tbw-visibility-show-all{margin:var(--tbw-panel-padding, var(--tbw-spacing-md, .5rem));padding:var(--tbw-button-padding, .5rem .75rem);border:1px solid var(--tbw-visibility-border, var(--tbw-color-border));border-radius:var(--tbw-border-radius, .25rem);background:var(--tbw-visibility-btn-bg, var(--tbw-color-header-bg));color:var(--tbw-color-fg);cursor:pointer;font-size:var(--tbw-font-size-sm, .8125rem)}.tbw-visibility-show-all:hover{background:var(--tbw-visibility-hover, var(--tbw-color-row-hover))}.tbw-visibility-group-header{display:flex;align-items:center;padding:var(--tbw-menu-item-padding, .375rem .25rem);font-size:var(--tbw-font-size-sm, .8125rem);font-weight:600;color:var(--tbw-color-fg);border-bottom:1px solid var(--tbw-color-border);margin-top:var(--tbw-spacing-sm, .25rem);position:relative}.tbw-visibility-group-header:first-child{margin-top:0}.tbw-visibility-group-header .tbw-visibility-label{gap:var(--tbw-panel-gap, var(--tbw-spacing-md, .5rem))}.tbw-visibility-group-header.reorderable{cursor:grab}.tbw-visibility-group-header.reorderable:hover{background:var(--tbw-visibility-hover, var(--tbw-color-row-hover))}.tbw-visibility-group-header .tbw-visibility-handle{cursor:grab;color:var(--tbw-color-fg-muted);font-size:var(--tbw-font-size-2xs, .625rem);letter-spacing:-2px;-webkit-user-select:none;user-select:none;flex-shrink:0}.tbw-visibility-group-header.reorderable:hover .tbw-visibility-handle{color:var(--tbw-color-fg)}.tbw-visibility-group-header.dragging{opacity:.5;cursor:grabbing}.tbw-visibility-group-header.drop-before:before{content:"";position:absolute;left:0;right:0;top:0;height:2px;background:var(--tbw-visibility-indicator, var(--tbw-color-accent))}.tbw-visibility-group-header.drop-after:after{content:"";position:absolute;left:0;right:0;bottom:0;height:2px;background:var(--tbw-visibility-indicator, var(--tbw-color-accent))}.tbw-visibility-row--grouped{padding-left:calc(var(--tbw-panel-padding, var(--tbw-spacing-md, .5rem)) + .75rem)}}';
-function v(f) {
-  const e = f.meta ?? {};
-  return e.lockPosition !== !0 && e.suppressMovable !== !0;
-}
-class b extends C {
-  /**
-   * Plugin dependencies - VisibilityPlugin optionally uses ReorderPlugin for drag-drop reordering.
-   *
-   * When ReorderPlugin is present, columns in the visibility panel become draggable.
-   * @internal
-   */
-  static dependencies = [
-    { name: "reorder", required: !1, reason: "Enables drag-to-reorder columns in visibility panel" }
-  ];
-  /**
-   * Plugin manifest - declares handled queries.
-   * @internal
-   */
-  static manifest = {
-    queries: [
-      {
-        type: "getContextMenuItems",
-        description: 'Contributes "Hide column" item to the header context menu'
-      }
-    ]
-  };
-  /** @internal */
-  name = "visibility";
-  /** Tool panel ID for shell integration */
-  static PANEL_ID = "columns";
-  /** @internal */
-  styles = y;
-  /** @internal */
-  get defaultConfig() {
-    return {
-      allowHideAll: !1
-    };
-  }
-  // #region Internal State
-  columnListElement = null;
-  // Drag state for reorder integration
-  isDragging = !1;
-  draggedField = null;
-  draggedIndex = null;
-  dropIndex = null;
-  /** When dragging a group, holds the group ID; null for individual column drags. */
-  draggedGroupId = null;
-  /** Fields belonging to the group currently being dragged. */
-  draggedGroupFields = [];
-  /** Clear drag-related classes from all rows and group headers in a list. */
-  clearDragClasses(e) {
-    e.querySelectorAll(".tbw-visibility-row, .tbw-visibility-group-header").forEach((t) => {
-      t.classList.remove("dragging", "drop-target", "drop-before", "drop-after");
-    });
-  }
-  // #endregion
-  // #region Lifecycle
-  /** @internal */
-  attach(e) {
-    super.attach(e), e.addEventListener(
-      "column-move",
-      () => {
-        this.columnListElement && requestAnimationFrame(() => {
-          this.columnListElement && this.rebuildToggles(this.columnListElement);
-        });
-      },
-      { signal: this.disconnectSignal }
-    );
-  }
-  /** @internal */
-  detach() {
-    this.columnListElement = null, this.isDragging = !1, this.draggedField = null, this.draggedIndex = null, this.dropIndex = null;
-  }
-  // #endregion
-  // #region Query Handlers
-  /**
-   * Handle inter-plugin queries.
-   * Contributes a "Hide column" item to the header context menu.
-   * @internal
-   */
-  handleQuery(e) {
-    if (e.type === "getContextMenuItems") {
-      const t = e.context;
-      if (!t.isHeader) return;
-      const i = t.column;
-      return !i?.field || i.meta?.lockVisibility ? void 0 : [
-        {
-          id: "visibility/hide-column",
-          label: "Hide Column",
-          icon: "👁",
-          order: 30,
-          action: () => this.hideColumn(i.field)
-        }
-      ];
-    }
-  }
-  // #endregion
-  // #region Shell Integration
-  /**
-   * Register the column visibility tool panel with the shell.
-   * @internal
-   */
-  getToolPanel() {
-    return {
-      id: b.PANEL_ID,
-      title: "Columns",
-      icon: "☰",
-      tooltip: "Column visibility",
-      order: 100,
-      // High order so it appears last
-      render: (e) => this.renderPanelContent(e)
-    };
-  }
-  // #endregion
-  // #region Public API
-  /**
-   * Show the visibility sidebar panel.
-   * Opens the tool panel and ensures this section is expanded.
-   */
-  show() {
-    this.grid.openToolPanel(), this.grid.expandedToolPanelSections.includes(b.PANEL_ID) || this.grid.toggleToolPanelSection(b.PANEL_ID);
-  }
-  /**
-   * Hide the visibility sidebar panel.
-   */
-  hide() {
-    this.grid.closeToolPanel();
-  }
-  /**
-   * Toggle the visibility sidebar panel section.
-   */
-  toggle() {
-    this.grid.isToolPanelOpen || this.grid.openToolPanel(), this.grid.toggleToolPanelSection(b.PANEL_ID);
-  }
-  /**
-   * Check if a specific column is visible.
-   * Delegates to grid.isColumnVisible().
-   * @param field - The field name to check
-   * @returns True if the column is visible
-   */
-  isColumnVisible(e) {
-    return this.grid.isColumnVisible(e);
-  }
-  /**
-   * Set visibility for a specific column.
-   * Delegates to grid.setColumnVisible().
-   * @param field - The field name of the column
-   * @param visible - Whether the column should be visible
-   */
-  setColumnVisible(e, t) {
-    this.grid.setColumnVisible(e, t);
-  }
-  /**
-   * Get list of all visible column fields.
-   * @returns Array of visible field names
-   */
-  getVisibleColumns() {
-    return this.grid.getAllColumns().filter((e) => e.visible).map((e) => e.field);
-  }
-  /**
-   * Get list of all hidden column fields.
-   * @returns Array of hidden field names
-   */
-  getHiddenColumns() {
-    return this.grid.getAllColumns().filter((e) => !e.visible).map((e) => e.field);
-  }
-  /**
-   * Show all columns.
-   * Delegates to grid.showAllColumns().
-   */
-  showAll() {
-    this.grid.showAllColumns();
-  }
-  /**
-   * Toggle visibility for a specific column.
-   * Delegates to grid.toggleColumnVisibility().
-   * @param field - The field name of the column
-   */
-  toggleColumn(e) {
-    this.grid.toggleColumnVisibility(e);
-  }
-  /**
-   * Show a specific column.
-   * Delegates to grid.setColumnVisible().
-   * @param field - The field name of the column to show
-   */
-  showColumn(e) {
-    this.setColumnVisible(e, !0);
-  }
-  /**
-   * Hide a specific column.
-   * Delegates to grid.setColumnVisible().
-   * @param field - The field name of the column to hide
-   */
-  hideColumn(e) {
-    this.setColumnVisible(e, !1);
-  }
-  /**
-   * Get all columns with their visibility status.
-   * Useful for building visibility UI.
-   * @returns Array of column info with visibility status
-   */
-  getAllColumns() {
-    return this.grid.getAllColumns();
-  }
-  /**
-   * Check if the sidebar panel is currently open.
-   * @returns True if the panel section is expanded
-   */
-  isPanelVisible() {
-    return this.grid.isToolPanelOpen && this.grid.expandedToolPanelSections.includes(b.PANEL_ID);
-  }
-  // #endregion
-  // #region Private Methods
-  /**
-   * Render the panel content into the shell's tool panel container.
-   * Returns a cleanup function.
-   */
-  renderPanelContent(e) {
-    const t = document.createElement("div");
-    t.className = "tbw-visibility-content";
-    const i = document.createElement("div");
-    i.className = "tbw-visibility-list", t.appendChild(i);
-    const l = document.createElement("button");
-    return l.className = "tbw-visibility-show-all", l.textContent = "Show All", l.addEventListener("click", () => {
-      this.grid.showAllColumns(), this.rebuildToggles(i);
-    }), t.appendChild(l), this.columnListElement = i, this.rebuildToggles(i), e.appendChild(t), () => {
-      this.columnListElement = null, t.remove();
-    };
-  }
-  /**
-   * Check if a reorder plugin is present (by name to avoid static import).
-   */
-  hasReorderPlugin() {
-    const e = this.grid?.getPluginByName?.("reorder");
-    return !!(e && typeof e.moveColumn == "function");
-  }
-  /**
-   * Build the column toggle checkboxes.
-   * When GroupingColumnsPlugin is present, renders columns under collapsible group headers.
-   * When a reorder plugin is present, adds drag handles for reordering.
-   */
-  rebuildToggles(e) {
-    const t = this.hasReorderPlugin();
-    e.innerHTML = "";
-    const i = this.grid.getAllColumns().filter((o) => !o.utility), r = this.grid.query("getColumnGrouping")?.flat().filter((o) => o && o.fields.length > 0) ?? [];
-    if (r.length === 0) {
-      this.renderFlatColumnList(i, t, e);
-      return;
-    }
-    const n = /* @__PURE__ */ new Map();
-    for (const o of r)
-      for (const a of o.fields) n.set(a, o);
-    const s = /* @__PURE__ */ new Set();
-    for (const o of i) {
-      const a = n.get(o.field);
-      if (a) {
-        if (!s.has(a.id)) {
-          s.add(a.id);
-          const g = new Set(a.fields), u = i.filter((d) => g.has(d.field));
-          u.length > 0 && this.renderGroupSection(a, u, t, e);
-        }
-      } else {
-        const g = i.indexOf(o);
-        e.appendChild(this.createColumnRow(o, g, t, e));
-      }
-    }
-  }
-  /**
-   * Render a group section with header checkbox and indented column rows.
-   */
-  renderGroupSection(e, t, i, l) {
-    const r = document.createElement("div");
-    r.className = "tbw-visibility-group-header", r.setAttribute("data-group-id", e.id), i && (r.draggable = !0, r.classList.add("reorderable"), this.setupGroupDragListeners(r, e, l));
-    const n = document.createElement("label");
-    n.className = "tbw-visibility-label";
-    const s = document.createElement("input");
-    s.type = "checkbox";
-    const o = t.filter((d) => d.visible).length, a = t.every((d) => d.lockVisible);
-    o === t.length ? (s.checked = !0, s.indeterminate = !1) : o === 0 ? (s.checked = !1, s.indeterminate = !1) : (s.checked = !1, s.indeterminate = !0), s.disabled = a, s.addEventListener("change", () => {
-      const d = s.checked;
-      for (const c of t)
-        c.lockVisible || this.grid.setColumnVisible(c.field, d);
-      setTimeout(() => this.rebuildToggles(l), 0);
-    });
-    const g = document.createElement("span");
-    if (g.textContent = e.label, n.appendChild(s), n.appendChild(g), r.appendChild(n), i) {
-      const d = document.createElement("span");
-      d.className = "tbw-visibility-handle", this.setIcon(d, this.resolveIcon("dragHandle")), d.title = "Drag to reorder group", r.insertBefore(d, n);
-    }
-    l.appendChild(r);
-    const u = this.grid.getAllColumns().filter((d) => !d.utility);
-    for (const d of t) {
-      const c = u.findIndex((h) => h.field === d.field), p = this.createColumnRow(d, c, i, l);
-      p.classList.add("tbw-visibility-row--grouped"), l.appendChild(p);
-    }
-  }
-  /**
-   * Render a flat (ungrouped) list of column rows.
-   */
-  renderFlatColumnList(e, t, i) {
-    const l = this.grid.getAllColumns().filter((r) => !r.utility);
-    for (const r of e) {
-      const n = l.findIndex((s) => s.field === r.field);
-      i.appendChild(this.createColumnRow(r, n, t, i));
-    }
-  }
-  /**
-   * Create a single column visibility row element.
-   */
-  createColumnRow(e, t, i, l) {
-    const r = e.header || e.field, n = document.createElement("div");
-    n.className = e.lockVisible ? "tbw-visibility-row locked" : "tbw-visibility-row", n.setAttribute("data-field", e.field), n.setAttribute("data-index", String(t)), i && v(e) && (n.draggable = !0, n.classList.add("reorderable"), this.setupDragListeners(n, e.field, t, l));
-    const s = document.createElement("label");
-    s.className = "tbw-visibility-label";
-    const o = document.createElement("input");
-    o.type = "checkbox", o.checked = e.visible, o.disabled = e.lockVisible ?? !1, o.addEventListener("change", () => {
-      this.grid.toggleColumnVisibility(e.field), setTimeout(() => this.rebuildToggles(l), 0);
-    });
-    const a = document.createElement("span");
-    if (a.textContent = r, s.appendChild(o), s.appendChild(a), i && v(e)) {
-      const g = document.createElement("span");
-      g.className = "tbw-visibility-handle", this.setIcon(g, this.resolveIcon("dragHandle")), g.title = "Drag to reorder", n.appendChild(g);
-    }
-    return n.appendChild(s), n;
-  }
-  /**
-   * Set up drag-and-drop listeners for a group header row.
-   * Dragging a group moves all its member columns as a block.
-   */
-  setupGroupDragListeners(e, t, i) {
-    e.addEventListener("dragstart", (l) => {
-      this.isDragging = !0, this.draggedGroupId = t.id, this.draggedGroupFields = [...t.fields], this.draggedField = null, this.draggedIndex = null, l.dataTransfer && (l.dataTransfer.effectAllowed = "move", l.dataTransfer.setData("text/plain", `group:${t.id}`)), e.classList.add("dragging"), i.querySelectorAll(".tbw-visibility-row--grouped").forEach((r) => {
-        const n = r.getAttribute("data-field");
-        n && this.draggedGroupFields.includes(n) && r.classList.add("dragging");
-      });
-    }), e.addEventListener("dragend", () => {
-      this.isDragging = !1, this.draggedGroupId = null, this.draggedGroupFields = [], this.draggedField = null, this.draggedIndex = null, this.dropIndex = null, this.clearDragClasses(i);
-    }), e.addEventListener("dragover", (l) => {
-      if (l.preventDefault(), !this.isDragging || this.draggedGroupId === t.id || !this.draggedGroupId) return;
-      const r = e.getBoundingClientRect(), n = r.top + r.height / 2, s = l.clientY < n;
-      this.clearDragClasses(i), e.classList.add("drop-target"), e.classList.toggle("drop-before", s), e.classList.toggle("drop-after", !s);
-    }), e.addEventListener("dragleave", () => {
-      e.classList.remove("drop-target", "drop-before", "drop-after");
-    }), e.addEventListener("drop", (l) => {
-      if (l.preventDefault(), !this.isDragging || !this.draggedGroupId || this.draggedGroupId === t.id) return;
-      const r = e.getBoundingClientRect(), n = l.clientY < r.top + r.height / 2;
-      this.executeGroupDrop(this.draggedGroupFields, t.fields, n, i);
-    });
-  }
-  /**
-   * Execute a group drop — move the dragged group's fields as a block
-   * to the position relative to the target group or column.
-   */
-  executeGroupDrop(e, t, i, l) {
-    const n = this.grid.getAllColumns().map((d) => d.field), s = n.filter((d) => !e.includes(d)), o = i ? t[0] : t[t.length - 1], a = s.indexOf(o);
-    if (a === -1) return;
-    const g = i ? a : a + 1, u = n.filter((d) => e.includes(d));
-    s.splice(g, 0, ...u), this.grid.setColumnOrder(s), requestAnimationFrame(() => {
-      this.columnListElement && this.rebuildToggles(this.columnListElement);
-    });
-  }
-  /**
-   * Set up drag-and-drop event listeners for a row.
-   * On drop, emits a 'column-reorder-request' event for other plugins to handle.
-   */
-  setupDragListeners(e, t, i, l) {
-    e.addEventListener("dragstart", (r) => {
-      this.isDragging = !0, this.draggedField = t, this.draggedIndex = i, this.draggedGroupId = null, this.draggedGroupFields = [], r.dataTransfer && (r.dataTransfer.effectAllowed = "move", r.dataTransfer.setData("text/plain", t)), e.classList.add("dragging");
-    }), e.addEventListener("dragend", () => {
-      this.isDragging = !1, this.draggedField = null, this.draggedIndex = null, this.dropIndex = null, this.clearDragClasses(l);
-    }), e.addEventListener("dragover", (r) => {
-      if (r.preventDefault(), !this.isDragging) return;
-      if (this.draggedGroupId) {
-        if (e.classList.contains("tbw-visibility-row--grouped")) return;
-      } else if (this.draggedField === t)
-        return;
-      const n = e.getBoundingClientRect(), s = n.top + n.height / 2;
-      this.dropIndex = r.clientY < s ? i : i + 1, this.clearDragClasses(l), this.draggedGroupId ? (l.querySelector(`.tbw-visibility-group-header[data-group-id="${this.draggedGroupId}"]`)?.classList.add("dragging"), l.querySelectorAll(".tbw-visibility-row--grouped").forEach((o) => {
-        const a = o.getAttribute("data-field");
-        a && this.draggedGroupFields.includes(a) && o.classList.add("dragging");
-      })) : this.draggedField && l.querySelector(`.tbw-visibility-row[data-field="${this.draggedField}"]`)?.classList.add("dragging"), e.classList.add("drop-target"), e.classList.toggle("drop-before", r.clientY < s), e.classList.toggle("drop-after", r.clientY >= s);
-    }), e.addEventListener("dragleave", () => {
-      e.classList.remove("drop-target", "drop-before", "drop-after");
-    }), e.addEventListener("drop", (r) => {
-      if (r.preventDefault(), !this.isDragging) return;
-      if (this.draggedGroupId && this.draggedGroupFields.length > 0) {
-        if (e.classList.contains("tbw-visibility-row--grouped")) return;
-        const g = e.getBoundingClientRect(), u = r.clientY < g.top + g.height / 2;
-        this.executeGroupDrop(this.draggedGroupFields, [t], u, l);
-        return;
-      }
-      const n = this.draggedField, s = this.draggedIndex, o = this.dropIndex;
-      if (n === null || s === null || o === null)
-        return;
-      const a = o > s ? o - 1 : o;
-      if (a !== s) {
-        const g = this.grid.getAllColumns(), d = g.filter((h) => !h.utility)[a]?.field, c = d ? g.findIndex((h) => h.field === d) : g.length, p = {
-          field: n,
-          fromIndex: s,
-          // Not used by ReorderPlugin, just for info
-          toIndex: c
-        };
-        this.emit("column-reorder-request", p);
-      }
-    });
-  }
-  // #endregion
-}
-export {
-  b as VisibilityPlugin
-};
+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>',t={expand:"▶",collapse:"▼",sortAsc:"▲",sortDesc:"▼",sortNone:"⇅",submenuArrow:"▶",dragHandle:"⋮⋮",toolPanel:"☰",filter:e,filterActive:e,print:"🖨️"};class i{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{...t,...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}`)}}function r(e){const t=e.meta??{};return!0!==t.lockPosition&&!0!==t.suppressMovable}class s extends i{static dependencies=[{name:"reorder",required:!1,reason:"Enables drag-to-reorder columns in visibility panel"}];static manifest={queries:[{type:"getContextMenuItems",description:'Contributes "Hide column" item to the header context menu'}]};name="visibility";static PANEL_ID="columns";styles='@layer tbw-plugins{.tbw-visibility-content{display:flex;flex-direction:column;height:100%}.tbw-visibility-list{flex:1;overflow-y:auto;padding:var(--tbw-panel-padding, var(--tbw-spacing-md, .5rem))}.tbw-visibility-row{display:flex;align-items:center;gap:var(--tbw-panel-gap, var(--tbw-spacing-md, .5rem));padding:var(--tbw-menu-item-padding, .375rem .25rem);cursor:pointer;font-size:var(--tbw-font-size-sm, .8125rem);border-radius:var(--tbw-border-radius, .25rem);position:relative}.tbw-visibility-row:hover{background:var(--tbw-visibility-hover, var(--tbw-color-row-hover))}.tbw-visibility-row input[type=checkbox]{cursor:pointer}.tbw-visibility-row.locked span{color:var(--tbw-color-fg-muted)}.tbw-visibility-handle{cursor:grab;color:var(--tbw-color-fg-muted);font-size:var(--tbw-font-size-2xs, .625rem);letter-spacing:-2px;-webkit-user-select:none;user-select:none;flex-shrink:0}.tbw-visibility-row.reorderable:hover .tbw-visibility-handle{color:var(--tbw-color-fg)}.tbw-visibility-label{display:flex;align-items:center;gap:var(--tbw-panel-gap, var(--tbw-spacing-md, .5rem));flex:1;cursor:pointer}.tbw-visibility-row.dragging{opacity:.5;cursor:grabbing}.tbw-visibility-row.drop-before:before{content:"";position:absolute;left:0;right:0;top:0;height:2px;background:var(--tbw-visibility-indicator, var(--tbw-color-accent))}.tbw-visibility-row.drop-after:after{content:"";position:absolute;left:0;right:0;bottom:0;height:2px;background:var(--tbw-visibility-indicator, var(--tbw-color-accent))}.tbw-visibility-show-all{margin:var(--tbw-panel-padding, var(--tbw-spacing-md, .5rem));padding:var(--tbw-button-padding, .5rem .75rem);border:1px solid var(--tbw-visibility-border, var(--tbw-color-border));border-radius:var(--tbw-border-radius, .25rem);background:var(--tbw-visibility-btn-bg, var(--tbw-color-header-bg));color:var(--tbw-color-fg);cursor:pointer;font-size:var(--tbw-font-size-sm, .8125rem)}.tbw-visibility-show-all:hover{background:var(--tbw-visibility-hover, var(--tbw-color-row-hover))}.tbw-visibility-group-header{display:flex;align-items:center;padding:var(--tbw-menu-item-padding, .375rem .25rem);font-size:var(--tbw-font-size-sm, .8125rem);font-weight:600;color:var(--tbw-color-fg);border-bottom:1px solid var(--tbw-color-border);margin-top:var(--tbw-spacing-sm, .25rem);position:relative}.tbw-visibility-group-header:first-child{margin-top:0}.tbw-visibility-group-header .tbw-visibility-label{gap:var(--tbw-panel-gap, var(--tbw-spacing-md, .5rem))}.tbw-visibility-group-header.reorderable{cursor:grab}.tbw-visibility-group-header.reorderable:hover{background:var(--tbw-visibility-hover, var(--tbw-color-row-hover))}.tbw-visibility-group-header .tbw-visibility-handle{cursor:grab;color:var(--tbw-color-fg-muted);font-size:var(--tbw-font-size-2xs, .625rem);letter-spacing:-2px;-webkit-user-select:none;user-select:none;flex-shrink:0}.tbw-visibility-group-header.reorderable:hover .tbw-visibility-handle{color:var(--tbw-color-fg)}.tbw-visibility-group-header.dragging{opacity:.5;cursor:grabbing}.tbw-visibility-group-header.drop-before:before{content:"";position:absolute;left:0;right:0;top:0;height:2px;background:var(--tbw-visibility-indicator, var(--tbw-color-accent))}.tbw-visibility-group-header.drop-after:after{content:"";position:absolute;left:0;right:0;bottom:0;height:2px;background:var(--tbw-visibility-indicator, var(--tbw-color-accent))}.tbw-visibility-row--grouped{padding-left:calc(var(--tbw-panel-padding, var(--tbw-spacing-md, .5rem)) + .75rem)}}';get defaultConfig(){return{allowHideAll:!1}}columnListElement=null;isDragging=!1;draggedField=null;draggedIndex=null;dropIndex=null;draggedGroupId=null;draggedGroupFields=[];clearDragClasses(e){e.querySelectorAll(".tbw-visibility-row, .tbw-visibility-group-header").forEach(e=>{e.classList.remove("dragging","drop-target","drop-before","drop-after")})}attach(e){super.attach(e),e.addEventListener("column-move",()=>{this.columnListElement&&requestAnimationFrame(()=>{this.columnListElement&&this.rebuildToggles(this.columnListElement)})},{signal:this.disconnectSignal})}detach(){this.columnListElement=null,this.isDragging=!1,this.draggedField=null,this.draggedIndex=null,this.dropIndex=null}handleQuery(e){if("getContextMenuItems"===e.type){const t=e.context;if(!t.isHeader)return;const i=t.column;if(!i?.field)return;if(i.meta?.lockVisibility)return;return[{id:"visibility/hide-column",label:"Hide Column",icon:"👁",order:30,action:()=>this.hideColumn(i.field)}]}}getToolPanel(){return{id:s.PANEL_ID,title:"Columns",icon:"☰",tooltip:"Column visibility",order:100,render:e=>this.renderPanelContent(e)}}show(){this.grid.openToolPanel(),this.grid.expandedToolPanelSections.includes(s.PANEL_ID)||this.grid.toggleToolPanelSection(s.PANEL_ID)}hide(){this.grid.closeToolPanel()}toggle(){this.grid.isToolPanelOpen||this.grid.openToolPanel(),this.grid.toggleToolPanelSection(s.PANEL_ID)}isColumnVisible(e){return this.grid.isColumnVisible(e)}setColumnVisible(e,t){this.grid.setColumnVisible(e,t)}getVisibleColumns(){return this.grid.getAllColumns().filter(e=>e.visible).map(e=>e.field)}getHiddenColumns(){return this.grid.getAllColumns().filter(e=>!e.visible).map(e=>e.field)}showAll(){this.grid.showAllColumns()}toggleColumn(e){this.grid.toggleColumnVisibility(e)}showColumn(e){this.setColumnVisible(e,!0)}hideColumn(e){this.setColumnVisible(e,!1)}getAllColumns(){return this.grid.getAllColumns()}isPanelVisible(){return this.grid.isToolPanelOpen&&this.grid.expandedToolPanelSections.includes(s.PANEL_ID)}renderPanelContent(e){const t=document.createElement("div");t.className="tbw-visibility-content";const i=document.createElement("div");i.className="tbw-visibility-list",t.appendChild(i);const r=document.createElement("button");return r.className="tbw-visibility-show-all",r.textContent="Show All",r.addEventListener("click",()=>{this.grid.showAllColumns(),this.rebuildToggles(i)}),t.appendChild(r),this.columnListElement=i,this.rebuildToggles(i),e.appendChild(t),()=>{this.columnListElement=null,t.remove()}}hasReorderPlugin(){const e=this.grid?.getPluginByName?.("reorder");return!(!e||"function"!=typeof e.moveColumn)}rebuildToggles(e){const t=this.hasReorderPlugin();e.innerHTML="";const i=this.grid.getAllColumns().filter(e=>!e.utility),r=this.grid.query("getColumnGrouping"),s=r?.flat().filter(e=>e&&e.fields.length>0)??[];if(0===s.length)return void this.renderFlatColumnList(i,t,e);const n=/* @__PURE__ */new Map;for(const o of s)for(const e of o.fields)n.set(e,o);const l=/* @__PURE__ */new Set;for(const o of i){const r=n.get(o.field);if(r){if(!l.has(r.id)){l.add(r.id);const s=new Set(r.fields),n=i.filter(e=>s.has(e.field));n.length>0&&this.renderGroupSection(r,n,t,e)}}else{const r=i.indexOf(o);e.appendChild(this.createColumnRow(o,r,t,e))}}}renderGroupSection(e,t,i,r){const s=document.createElement("div");s.className="tbw-visibility-group-header",s.setAttribute("data-group-id",e.id),i&&(s.draggable=!0,s.classList.add("reorderable"),this.setupGroupDragListeners(s,e,r));const n=document.createElement("label");n.className="tbw-visibility-label";const l=document.createElement("input");l.type="checkbox";const o=t.filter(e=>e.visible).length,d=t.every(e=>e.lockVisible);o===t.length?(l.checked=!0,l.indeterminate=!1):0===o?(l.checked=!1,l.indeterminate=!1):(l.checked=!1,l.indeterminate=!0),l.disabled=d,l.addEventListener("change",()=>{const e=l.checked;for(const i of t)i.lockVisible||this.grid.setColumnVisible(i.field,e);setTimeout(()=>this.rebuildToggles(r),0)});const a=document.createElement("span");if(a.textContent=e.label,n.appendChild(l),n.appendChild(a),s.appendChild(n),i){const e=document.createElement("span");e.className="tbw-visibility-handle",this.setIcon(e,this.resolveIcon("dragHandle")),e.title="Drag to reorder group",s.insertBefore(e,n)}r.appendChild(s);const g=this.grid.getAllColumns().filter(e=>!e.utility);for(const c of t){const e=g.findIndex(e=>e.field===c.field),t=this.createColumnRow(c,e,i,r);t.classList.add("tbw-visibility-row--grouped"),r.appendChild(t)}}renderFlatColumnList(e,t,i){const r=this.grid.getAllColumns().filter(e=>!e.utility);for(const s of e){const e=r.findIndex(e=>e.field===s.field);i.appendChild(this.createColumnRow(s,e,t,i))}}createColumnRow(e,t,i,s){const n=e.header||e.field,l=document.createElement("div");l.className=e.lockVisible?"tbw-visibility-row locked":"tbw-visibility-row",l.setAttribute("data-field",e.field),l.setAttribute("data-index",String(t)),i&&r(e)&&(l.draggable=!0,l.classList.add("reorderable"),this.setupDragListeners(l,e.field,t,s));const o=document.createElement("label");o.className="tbw-visibility-label";const d=document.createElement("input");d.type="checkbox",d.checked=e.visible,d.disabled=e.lockVisible??!1,d.addEventListener("change",()=>{this.grid.toggleColumnVisibility(e.field),setTimeout(()=>this.rebuildToggles(s),0)});const a=document.createElement("span");if(a.textContent=n,o.appendChild(d),o.appendChild(a),i&&r(e)){const e=document.createElement("span");e.className="tbw-visibility-handle",this.setIcon(e,this.resolveIcon("dragHandle")),e.title="Drag to reorder",l.appendChild(e)}return l.appendChild(o),l}setupGroupDragListeners(e,t,i){e.addEventListener("dragstart",r=>{this.isDragging=!0,this.draggedGroupId=t.id,this.draggedGroupFields=[...t.fields],this.draggedField=null,this.draggedIndex=null,r.dataTransfer&&(r.dataTransfer.effectAllowed="move",r.dataTransfer.setData("text/plain",`group:${t.id}`)),e.classList.add("dragging"),i.querySelectorAll(".tbw-visibility-row--grouped").forEach(e=>{const t=e.getAttribute("data-field");t&&this.draggedGroupFields.includes(t)&&e.classList.add("dragging")})}),e.addEventListener("dragend",()=>{this.isDragging=!1,this.draggedGroupId=null,this.draggedGroupFields=[],this.draggedField=null,this.draggedIndex=null,this.dropIndex=null,this.clearDragClasses(i)}),e.addEventListener("dragover",r=>{if(r.preventDefault(),!this.isDragging)return;if(this.draggedGroupId===t.id)return;if(!this.draggedGroupId)return;const s=e.getBoundingClientRect(),n=s.top+s.height/2,l=r.clientY<n;this.clearDragClasses(i),e.classList.add("drop-target"),e.classList.toggle("drop-before",l),e.classList.toggle("drop-after",!l)}),e.addEventListener("dragleave",()=>{e.classList.remove("drop-target","drop-before","drop-after")}),e.addEventListener("drop",r=>{if(r.preventDefault(),!this.isDragging||!this.draggedGroupId||this.draggedGroupId===t.id)return;const s=e.getBoundingClientRect(),n=r.clientY<s.top+s.height/2;this.executeGroupDrop(this.draggedGroupFields,t.fields,n,i)})}executeGroupDrop(e,t,i,r){const s=this.grid.getAllColumns().map(e=>e.field),n=s.filter(t=>!e.includes(t)),l=i?t[0]:t[t.length-1],o=n.indexOf(l);if(-1===o)return;const d=i?o:o+1,a=s.filter(t=>e.includes(t));n.splice(d,0,...a),this.grid.setColumnOrder(n),requestAnimationFrame(()=>{this.columnListElement&&this.rebuildToggles(this.columnListElement)})}setupDragListeners(e,t,i,r){e.addEventListener("dragstart",r=>{this.isDragging=!0,this.draggedField=t,this.draggedIndex=i,this.draggedGroupId=null,this.draggedGroupFields=[],r.dataTransfer&&(r.dataTransfer.effectAllowed="move",r.dataTransfer.setData("text/plain",t)),e.classList.add("dragging")}),e.addEventListener("dragend",()=>{this.isDragging=!1,this.draggedField=null,this.draggedIndex=null,this.dropIndex=null,this.clearDragClasses(r)}),e.addEventListener("dragover",s=>{if(s.preventDefault(),!this.isDragging)return;if(this.draggedGroupId){if(e.classList.contains("tbw-visibility-row--grouped"))return}else if(this.draggedField===t)return;const n=e.getBoundingClientRect(),l=n.top+n.height/2;this.dropIndex=s.clientY<l?i:i+1,this.clearDragClasses(r),this.draggedGroupId?(r.querySelector(`.tbw-visibility-group-header[data-group-id="${this.draggedGroupId}"]`)?.classList.add("dragging"),r.querySelectorAll(".tbw-visibility-row--grouped").forEach(e=>{const t=e.getAttribute("data-field");t&&this.draggedGroupFields.includes(t)&&e.classList.add("dragging")})):this.draggedField&&r.querySelector(`.tbw-visibility-row[data-field="${this.draggedField}"]`)?.classList.add("dragging"),e.classList.add("drop-target"),e.classList.toggle("drop-before",s.clientY<l),e.classList.toggle("drop-after",s.clientY>=l)}),e.addEventListener("dragleave",()=>{e.classList.remove("drop-target","drop-before","drop-after")}),e.addEventListener("drop",i=>{if(i.preventDefault(),!this.isDragging)return;if(this.draggedGroupId&&this.draggedGroupFields.length>0){if(e.classList.contains("tbw-visibility-row--grouped"))return;const s=e.getBoundingClientRect(),n=i.clientY<s.top+s.height/2;return void this.executeGroupDrop(this.draggedGroupFields,[t],n,r)}const s=this.draggedField,n=this.draggedIndex,l=this.dropIndex;if(null===s||null===n||null===l)return;const o=l>n?l-1:l;if(o!==n){const e=this.grid.getAllColumns(),t=e.filter(e=>!e.utility),i=t[o]?.field,r={field:s,fromIndex:n,toIndex:i?e.findIndex(e=>e.field===i):e.length};this.emit("column-reorder-request",r)}})}}export{s as VisibilityPlugin};
 //# sourceMappingURL=index.js.map