@toolbox-web/grid 1.21.1 → 1.22.0

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

@@ -1,689 +1,2 @@
-function a(i) {
-  try {
-    if (getComputedStyle(i).direction === "rtl") return "rtl";
-  } catch {
-  }
-  try {
-    if (i.closest?.("[dir]")?.getAttribute("dir") === "rtl") return "rtl";
-  } catch {
-  }
-  return "ltr";
-}
-function P(i, t) {
-  return i === "left" || i === "right" ? i : t === "rtl" ? i === "start" ? "right" : "left" : i === "start" ? "left" : "right";
-}
-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>', A = {
-  expand: "▶",
-  collapse: "▼",
-  sortAsc: "▲",
-  sortDesc: "▼",
-  sortNone: "⇅",
-  submenuArrow: "▶",
-  dragHandle: "⋮⋮",
-  toolPanel: "☰",
-  filter: m,
-  filterActive: m,
-  print: "🖨️"
-};
-class R {
-  /**
-   * 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.
-   */
-  #t;
-  /**
-   * 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.#t?.abort(), this.#t = 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.#t?.abort(), this.#t = 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 n = new CustomEvent(t, { detail: e, bubbles: !0, cancelable: !0 });
-    return this.grid?.dispatchEvent?.(n), n.defaultPrevented;
-  }
-  // =========================================================================
-  // Event Bus - Plugin-to-Plugin Communication
-  // =========================================================================
-  /**
-   * Subscribe to an event from another plugin.
-   * The subscription is automatically cleaned up when this plugin is detached.
-   *
-   * @category Plugin Development
-   * @param eventType - The event type to listen for (e.g., 'filter-change')
-   * @param callback - The callback to invoke when the event is emitted
-   *
-   * @example
-   * ```typescript
-   * // In attach() or other initialization
-   * this.on('filter-change', (detail) => {
-   *   console.log('Filter changed:', detail);
-   * });
-   * ```
-   */
-  on(t, e) {
-    this.grid?._pluginManager?.subscribe(this, t, e);
-  }
-  /**
-   * Unsubscribe from a plugin event.
-   *
-   * @category Plugin Development
-   * @param eventType - The event type to stop listening for
-   *
-   * @example
-   * ```typescript
-   * this.off('filter-change');
-   * ```
-   */
-  off(t) {
-    this.grid?._pluginManager?.unsubscribe(this, t);
-  }
-  /**
-   * Emit an event to other plugins via the Event Bus.
-   * This is for inter-plugin communication only; it does NOT dispatch DOM events.
-   * Use `emit()` to dispatch DOM events that external consumers can listen to.
-   *
-   * @category Plugin Development
-   * @param eventType - The event type to emit (should be declared in manifest.events)
-   * @param detail - The event payload
-   *
-   * @example
-   * ```typescript
-   * // Emit to other plugins (not DOM)
-   * this.emitPluginEvent('filter-change', { field: 'name', value: 'Alice' });
-   *
-   * // For DOM events that consumers can addEventListener to:
-   * this.emit('filter-change', { field: 'name', value: 'Alice' });
-   * ```
-   */
-  emitPluginEvent(t, e) {
-    this.grid?._pluginManager?.emitPluginEvent(t, e);
-  }
-  /**
-   * Request a re-render of the grid.
-   * Uses ROWS phase - does NOT trigger processColumns hooks.
-   */
-  requestRender() {
-    this.grid?.requestRender?.();
-  }
-  /**
-   * Request a columns re-render of the grid.
-   * Uses COLUMNS phase - triggers processColumns hooks.
-   * Use this when your plugin needs to reprocess column configuration.
-   */
-  requestColumnsRender() {
-    this.grid?.requestColumnsRender?.();
-  }
-  /**
-   * Request a re-render and restore focus styling afterward.
-   * Use this when a plugin action (like expand/collapse) triggers a render
-   * but needs to maintain keyboard navigation focus.
-   */
-  requestRenderWithFocus() {
-    this.grid?.requestRenderWithFocus?.();
-  }
-  /**
-   * Request a lightweight style update without rebuilding DOM.
-   * Use this instead of requestRender() when only CSS classes need updating.
-   */
-  requestAfterRender() {
-    this.grid?.requestAfterRender?.();
-  }
-  /**
-   * Get the current rows from the grid.
-   */
-  get rows() {
-    return this.grid?.rows ?? [];
-  }
-  /**
-   * Get the original unfiltered/unprocessed rows from the grid.
-   * Use this when you need all source data regardless of active filters.
-   */
-  get sourceRows() {
-    return this.grid?.sourceRows ?? [];
-  }
-  /**
-   * Get the current columns from the grid.
-   */
-  get columns() {
-    return this.grid?.columns ?? [];
-  }
-  /**
-   * Get only visible columns from the grid (excludes hidden).
-   * Use this for rendering that needs to match the grid template.
-   */
-  get visibleColumns() {
-    return this.grid?._visibleColumns ?? [];
-  }
-  /**
-   * Get the grid as an HTMLElement for direct DOM operations.
-   * Use sparingly - prefer the typed GridElementRef API when possible.
-   *
-   * @example
-   * ```ts
-   * const width = this.gridElement.clientWidth;
-   * this.gridElement.classList.add('my-plugin-active');
-   * ```
-   */
-  get gridElement() {
-    return this.grid;
-  }
-  /**
-   * Get the disconnect signal for event listener cleanup.
-   * This signal is aborted when the grid disconnects from the DOM.
-   * Use this when adding event listeners that should be cleaned up automatically.
-   *
-   * Best for:
-   * - Document/window-level listeners added in attach()
-   * - Listeners on the grid element itself
-   * - Any listener that should persist across renders
-   *
-   * Not needed for:
-   * - Listeners on elements created in afterRender() (removed with element)
-   *
-   * @example
-   * element.addEventListener('click', handler, { signal: this.disconnectSignal });
-   * document.addEventListener('keydown', handler, { signal: this.disconnectSignal });
-   */
-  get disconnectSignal() {
-    return this.#t?.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 { ...A, ...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(), n = parseInt(e, 10);
-      if (!isNaN(n)) return n;
-    }
-    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
-}
-function d(i) {
-  return i.pinned ?? i.sticky ?? i.meta?.pinned ?? i.meta?.sticky;
-}
-function g(i, t) {
-  return P(i, t);
-}
-function b(i, t) {
-  const e = d(i);
-  return e ? g(e, t) === "left" : !1;
-}
-function v(i, t) {
-  const e = d(i);
-  return e ? g(e, t) === "right" : !1;
-}
-function S(i, t = "ltr") {
-  return i.filter((e) => b(e, t));
-}
-function E(i, t = "ltr") {
-  return i.filter((e) => v(e, t));
-}
-function h(i) {
-  return i.some((t) => d(t) != null);
-}
-function y(i, t) {
-  const e = Array.from(i.querySelectorAll(".header-row .cell"));
-  if (!e.length) return;
-  const n = a(i);
-  let l = 0;
-  for (const o of t)
-    if (b(o, n)) {
-      const r = e.find((s) => s.getAttribute("data-field") === o.field);
-      r && (r.classList.add("sticky-left"), r.style.position = "sticky", r.style.left = l + "px", i.querySelectorAll(`.data-grid-row .cell[data-field="${o.field}"]`).forEach((s) => {
-        s.classList.add("sticky-left"), s.style.position = "sticky", s.style.left = l + "px";
-      }), l += r.offsetWidth);
-    }
-  let c = 0;
-  for (const o of [...t].reverse())
-    if (v(o, n)) {
-      const r = e.find((s) => s.getAttribute("data-field") === o.field);
-      r && (r.classList.add("sticky-right"), r.style.position = "sticky", r.style.right = c + "px", i.querySelectorAll(`.data-grid-row .cell[data-field="${o.field}"]`).forEach((s) => {
-        s.classList.add("sticky-right"), s.style.position = "sticky", s.style.right = c + "px";
-      }), c += r.offsetWidth);
-    }
-}
-function O(i, t = "ltr") {
-  const e = [], n = [], l = [];
-  for (const c of i) {
-    const o = d(c);
-    o ? g(o, t) === "left" ? e.push(c) : l.push(c) : n.push(c);
-  }
-  return [...e, ...n, ...l];
-}
-function C(i) {
-  i.querySelectorAll(".sticky-left, .sticky-right").forEach((e) => {
-    e.classList.remove("sticky-left", "sticky-right"), e.style.position = "", e.style.left = "", e.style.right = "";
-  });
-}
-const k = "canMoveColumn";
-class I extends R {
-  /**
-   * Plugin manifest - declares owned properties and handled queries.
-   * @internal
-   */
-  static manifest = {
-    ownedProperties: [
-      {
-        property: "pinned",
-        level: "column",
-        description: 'the "pinned" column property',
-        isUsed: (t) => t === "left" || t === "right" || t === "start" || t === "end"
-      },
-      {
-        property: "sticky",
-        level: "column",
-        description: 'the "sticky" column property (deprecated, use "pinned")',
-        isUsed: (t) => t === "left" || t === "right" || t === "start" || t === "end"
-      }
-    ],
-    incompatibleWith: [
-      {
-        name: "groupingColumns",
-        reason: "Pinning reorders columns to the grid edges, but moving a column out of its column group is not supported. The group header layout cannot accommodate members at different positions."
-      }
-    ],
-    queries: [
-      {
-        type: k,
-        description: "Prevents pinned (sticky) columns from being moved/reordered"
-      },
-      {
-        type: "getStickyOffsets",
-        description: "Returns the sticky offsets for left/right pinned columns"
-      },
-      {
-        type: "getContextMenuItems",
-        description: "Contributes pin/unpin items to the header context menu"
-      }
-    ]
-  };
-  /** @internal */
-  name = "pinnedColumns";
-  /** @internal */
-  get defaultConfig() {
-    return {};
-  }
-  // #region Internal State
-  isApplied = !1;
-  leftOffsets = /* @__PURE__ */ new Map();
-  rightOffsets = /* @__PURE__ */ new Map();
-  /**
-   * Snapshot of the column field order before the first context-menu pin.
-   * Used to restore original positions when unpinning.
-   */
-  #t = [];
-  // #endregion
-  // #region Lifecycle
-  /** @internal */
-  detach() {
-    this.leftOffsets.clear(), this.rightOffsets.clear(), this.isApplied = !1, this.#t = [];
-  }
-  // #endregion
-  // #region Detection
-  /**
-   * Auto-detect sticky columns from column configuration.
-   */
-  static detect(t, e) {
-    const n = e?.columns;
-    return Array.isArray(n) ? h(n) : !1;
-  }
-  // #endregion
-  // #region Hooks
-  /** @internal */
-  processColumns(t) {
-    const e = [...t];
-    if (this.isApplied = h(e), !this.isApplied) return e;
-    const n = this.gridElement, l = n ? a(n) : "ltr";
-    return O(e, l);
-  }
-  /** @internal */
-  afterRender() {
-    if (!this.isApplied)
-      return;
-    const t = this.grid, e = [...this.columns];
-    if (!h(e)) {
-      C(t), this.isApplied = !1;
-      return;
-    }
-    queueMicrotask(() => {
-      y(t, e);
-    });
-  }
-  /**
-   * Handle inter-plugin queries.
-   * @internal
-   */
-  handleQuery(t) {
-    switch (t.type) {
-      case k: {
-        const e = t.context;
-        return d(e) != null ? !1 : void 0;
-      }
-      case "getStickyOffsets":
-        return {
-          left: Object.fromEntries(this.leftOffsets),
-          right: Object.fromEntries(this.rightOffsets)
-        };
-      case "getContextMenuItems": {
-        const e = t.context;
-        if (!e.isHeader) return;
-        const n = e.column;
-        if (!n?.field || n.meta?.lockPinning || this.grid?.getPluginByName("groupingColumns")?.isGroupingActive()) return;
-        const o = d(n) != null, r = [];
-        return o ? r.push({
-          id: "pinned/unpin",
-          label: "Unpin Column",
-          icon: "📌",
-          order: 40,
-          action: () => this.setPinPosition(n.field, void 0)
-        }) : (r.push({
-          id: "pinned/pin-left",
-          label: "Pin Left",
-          icon: "⬅",
-          order: 40,
-          action: () => this.setPinPosition(n.field, "left")
-        }), r.push({
-          id: "pinned/pin-right",
-          label: "Pin Right",
-          icon: "➡",
-          order: 41,
-          action: () => this.setPinPosition(n.field, "right")
-        })), r;
-      }
-      default:
-        return;
-    }
-  }
-  // #endregion
-  // #region Public API
-  /**
-   * Set the pin position for a column.
-   * Updates the column's `pinned` property and triggers a full re-render.
-   *
-   * @param field - The field name of the column to pin/unpin
-   * @param position - The pin position (`'left'`, `'right'`, `'start'`, `'end'`), or `undefined` to unpin
-   */
-  setPinPosition(t, e) {
-    const n = this.columns;
-    if (!n?.length) return;
-    const l = n.findIndex((o) => o.field === t);
-    if (l === -1) return;
-    const c = this.grid;
-    if (e) {
-      this.#t.length === 0 && (this.#t = n.map((r) => r.field));
-      const o = n.map((r) => {
-        if (r.field !== t) return r;
-        const s = { ...r };
-        return s.pinned = e, delete s.sticky, s;
-      });
-      c.columns = o;
-    } else {
-      const r = { ...n[l] };
-      delete r.pinned, delete r.sticky;
-      const s = [...n];
-      s.splice(l, 1);
-      const p = this.#t.indexOf(t);
-      if (p >= 0) {
-        let f = s.length;
-        for (let u = 0; u < s.length; u++) {
-          if (d(s[u])) continue;
-          if (this.#t.indexOf(s[u].field) > p) {
-            f = u;
-            break;
-          }
-        }
-        s.splice(f, 0, r);
-      } else
-        s.splice(Math.min(l, s.length), 0, r);
-      s.some((f) => d(f) != null) || (this.#t = []), c.columns = s;
-    }
-  }
-  /**
-   * Re-apply sticky offsets (e.g., after column resize).
-   */
-  refreshStickyOffsets() {
-    const t = [...this.columns];
-    y(this.grid, t);
-  }
-  /**
-   * Get columns pinned to the left (after resolving logical positions for current direction).
-   */
-  getLeftPinnedColumns() {
-    const t = [...this.columns], e = a(this.grid);
-    return S(t, e);
-  }
-  /**
-   * Get columns pinned to the right (after resolving logical positions for current direction).
-   */
-  getRightPinnedColumns() {
-    const t = [...this.columns], e = a(this.grid);
-    return E(t, e);
-  }
-  /**
-   * Clear all sticky positioning.
-   */
-  clearStickyPositions() {
-    C(this.grid);
-  }
-  /**
-   * Report horizontal scroll boundary offsets for pinned columns.
-   * Used by keyboard navigation to ensure focused cells aren't hidden behind sticky columns.
-   * @internal
-   */
-  getHorizontalScrollOffsets(t, e) {
-    if (!this.isApplied)
-      return;
-    let n = 0, l = 0;
-    if (t) {
-      const o = t.querySelectorAll(".sticky-left"), r = t.querySelectorAll(".sticky-right");
-      o.forEach((s) => {
-        n += s.offsetWidth;
-      }), r.forEach((s) => {
-        l += s.offsetWidth;
-      });
-    } else
-      this.grid.querySelectorAll(".header-row .cell").forEach((s) => {
-        s.classList.contains("sticky-left") ? n += s.offsetWidth : s.classList.contains("sticky-right") && (l += s.offsetWidth);
-      });
-    const c = e?.classList.contains("sticky-left") || e?.classList.contains("sticky-right");
-    return { left: n, right: l, skipScroll: c };
-  }
-  // #endregion
-}
-export {
-  I as PinnedColumnsPlugin
-};
+function t(t){try{if("rtl"===getComputedStyle(t).direction)return"rtl"}catch{}try{const e=t.closest?.("[dir]")?.getAttribute("dir");if("rtl"===e)return"rtl"}catch{}return"ltr"}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>',i={expand:"▶",collapse:"▼",sortAsc:"▲",sortDesc:"▼",sortNone:"⇅",submenuArrow:"▶",dragHandle:"⋮⋮",toolPanel:"☰",filter:e,filterActive:e,print:"🖨️"};class n{static dependencies;static manifest;version="undefined"!=typeof __GRID_VERSION__?__GRID_VERSION__:"dev";styles;cellRenderers;headerRenderers;cellEditors;grid;config;userConfig;#t;get defaultConfig(){return{}}constructor(t={}){this.userConfig=t}attach(t){this.#t?.abort(),this.#t=new AbortController,this.grid=t,this.config={...this.defaultConfig,...this.userConfig}}detach(){this.#t?.abort(),this.#t=void 0}getPlugin(t){return this.grid?.getPlugin(t)}emit(t,e){this.grid?.dispatchEvent?.(new CustomEvent(t,{detail:e,bubbles:!0}))}emitCancelable(t,e){const i=new CustomEvent(t,{detail:e,bubbles:!0,cancelable:!0});return this.grid?.dispatchEvent?.(i),i.defaultPrevented}on(t,e){this.grid?._pluginManager?.subscribe(this,t,e)}off(t){this.grid?._pluginManager?.unsubscribe(this,t)}emitPluginEvent(t,e){this.grid?._pluginManager?.emitPluginEvent(t,e)}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.#t?.signal??this.grid?.disconnectSignal}get gridIcons(){const t=this.grid?.gridConfig?.icons??{};return{...i,...t}}get isAnimationEnabled(){const t=this.grid?.effectiveConfig?.animation?.mode??"reduced-motion";if(!1===t||"off"===t)return!1;if(!0===t||"on"===t)return!0;const e=this.gridElement;if(e){return"0"!==getComputedStyle(e).getPropertyValue("--tbw-animation-enabled").trim()}return!0}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}resolveIcon(t,e){return void 0!==e?e:this.gridIcons[t]}setIcon(t,e){"string"==typeof e?t.innerHTML=e:e instanceof HTMLElement&&(t.innerHTML="",t.appendChild(e.cloneNode(!0)))}warn(t){console.warn(`[tbw-grid:${this.name}] ${t}`)}}function r(t){return t.pinned??t.sticky??t.meta?.pinned??t.meta?.sticky}function s(t,e){return function(t,e){return"left"===t||"right"===t?t:"rtl"===e?"start"===t?"right":"left":"start"===t?"left":"right"}(t,e)}function o(t,e){const i=r(t);return!!i&&"left"===s(i,e)}function l(t,e){const i=r(t);return!!i&&"right"===s(i,e)}function c(t){return t.some(t=>null!=r(t))}function d(e,i){const n=Array.from(e.querySelectorAll(".header-row .cell"));if(!n.length)return;const r=t(e);let s=0;for(const t of i)if(o(t,r)){const i=n.find(e=>e.getAttribute("data-field")===t.field);i&&(i.classList.add("sticky-left"),i.style.position="sticky",i.style.left=s+"px",e.querySelectorAll(`.data-grid-row .cell[data-field="${t.field}"]`).forEach(t=>{t.classList.add("sticky-left"),t.style.position="sticky",t.style.left=s+"px"}),s+=i.offsetWidth)}let c=0;for(const t of[...i].reverse())if(l(t,r)){const i=n.find(e=>e.getAttribute("data-field")===t.field);i&&(i.classList.add("sticky-right"),i.style.position="sticky",i.style.right=c+"px",e.querySelectorAll(`.data-grid-row .cell[data-field="${t.field}"]`).forEach(t=>{t.classList.add("sticky-right"),t.style.position="sticky",t.style.right=c+"px"}),c+=i.offsetWidth)}}function u(t){t.querySelectorAll(".sticky-left, .sticky-right").forEach(t=>{t.classList.remove("sticky-left","sticky-right"),t.style.position="",t.style.left="",t.style.right=""})}const f="canMoveColumn";class a extends n{static manifest={ownedProperties:[{property:"pinned",level:"column",description:'the "pinned" column property',isUsed:t=>"left"===t||"right"===t||"start"===t||"end"===t},{property:"sticky",level:"column",description:'the "sticky" column property (deprecated, use "pinned")',isUsed:t=>"left"===t||"right"===t||"start"===t||"end"===t}],incompatibleWith:[{name:"groupingColumns",reason:"Pinning reorders columns to the grid edges, but moving a column out of its column group is not supported. The group header layout cannot accommodate members at different positions."}],queries:[{type:f,description:"Prevents pinned (sticky) columns from being moved/reordered"},{type:"getStickyOffsets",description:"Returns the sticky offsets for left/right pinned columns"},{type:"getContextMenuItems",description:"Contributes pin/unpin items to the header context menu"}]};name="pinnedColumns";get defaultConfig(){return{}}isApplied=!1;leftOffsets=/* @__PURE__ */new Map;rightOffsets=/* @__PURE__ */new Map;#e=[];detach(){this.leftOffsets.clear(),this.rightOffsets.clear(),this.isApplied=!1,this.#e=[]}static detect(t,e){const i=e?.columns;return!!Array.isArray(i)&&c(i)}processColumns(e){const i=[...e];if(this.isApplied=c(i),!this.isApplied)return i;const n=this.gridElement;return function(t,e="ltr"){const i=[],n=[],o=[];for(const l of t){const t=r(l);t?"left"===s(t,e)?i.push(l):o.push(l):n.push(l)}return[...i,...n,...o]}(i,n?t(n):"ltr")}afterRender(){if(!this.isApplied)return;const t=this.grid,e=[...this.columns];if(!c(e))return u(t),void(this.isApplied=!1);queueMicrotask(()=>{d(t,e)})}handleQuery(t){switch(t.type){case f:return null==r(t.context)&&void 0;case"getStickyOffsets":return{left:Object.fromEntries(this.leftOffsets),right:Object.fromEntries(this.rightOffsets)};case"getContextMenuItems":{const e=t.context;if(!e.isHeader)return;const i=e.column;if(!i?.field)return;if(i.meta?.lockPinning)return;const n=this.grid?.getPluginByName("groupingColumns");if(n?.isGroupingActive())return;const s=[];return null!=r(i)?s.push({id:"pinned/unpin",label:"Unpin Column",icon:"📌",order:40,action:()=>this.setPinPosition(i.field,void 0)}):(s.push({id:"pinned/pin-left",label:"Pin Left",icon:"⬅",order:40,action:()=>this.setPinPosition(i.field,"left")}),s.push({id:"pinned/pin-right",label:"Pin Right",icon:"➡",order:41,action:()=>this.setPinPosition(i.field,"right")})),s}default:return}}setPinPosition(t,e){const i=this.columns;if(!i?.length)return;const n=i.findIndex(e=>e.field===t);if(-1===n)return;const s=this.grid;if(e){0===this.#e.length&&(this.#e=i.map(t=>t.field));const n=i.map(i=>{if(i.field!==t)return i;const n={...i};return n.pinned=e,delete n.sticky,n});s.columns=n}else{const e={...i[n]};delete e.pinned,delete e.sticky;const o=[...i];o.splice(n,1);const l=this.#e.indexOf(t);if(l>=0){let t=o.length;for(let e=0;e<o.length;e++){if(r(o[e]))continue;if(this.#e.indexOf(o[e].field)>l){t=e;break}}o.splice(t,0,e)}else o.splice(Math.min(n,o.length),0,e);o.some(t=>null!=r(t))||(this.#e=[]),s.columns=o}}refreshStickyOffsets(){const t=[...this.columns];d(this.grid,t)}getLeftPinnedColumns(){return function(t,e="ltr"){return t.filter(t=>o(t,e))}([...this.columns],t(this.grid))}getRightPinnedColumns(){return function(t,e="ltr"){return t.filter(t=>l(t,e))}([...this.columns],t(this.grid))}clearStickyPositions(){u(this.grid)}getHorizontalScrollOffsets(t,e){if(!this.isApplied)return;let i=0,n=0;if(t){const e=t.querySelectorAll(".sticky-left"),r=t.querySelectorAll(".sticky-right");e.forEach(t=>{i+=t.offsetWidth}),r.forEach(t=>{n+=t.offsetWidth})}else{this.grid.querySelectorAll(".header-row .cell").forEach(t=>{t.classList.contains("sticky-left")?i+=t.offsetWidth:t.classList.contains("sticky-right")&&(n+=t.offsetWidth)})}const r=e?.classList.contains("sticky-left")||e?.classList.contains("sticky-right");return{left:i,right:n,skipScroll:r}}}export{a as PinnedColumnsPlugin};
 //# sourceMappingURL=index.js.map