@toolbox-web/grid 0.4.0 → 0.4.1

package/umd/plugins/visibility.umd.js

@@ -1,2 +1,2 @@
-(function(d,b){typeof exports=="object"&&typeof module<"u"?b(exports,require("../../core/plugin/base-plugin")):typeof define=="function"&&define.amd?define(["exports","../../core/plugin/base-plugin"],b):(d=typeof globalThis<"u"?globalThis:d||self,b(d.TbwGridPlugin_visibility={},d.TbwGrid))})(this,(function(d,b){"use strict";const f='.tbw-visibility-content{display:flex;flex-direction:column;height:100%}.tbw-visibility-list{flex:1;overflow-y:auto;padding:8px}.tbw-visibility-row{display:flex;align-items:center;gap:8px;padding:6px 4px;cursor:pointer;font-size:13px;border-radius:var(--tbw-border-radius, 4px);position:relative}.tbw-visibility-row:hover{background:var(--tbw-visibility-hover, var(--tbw-color-row-hover, #f3f4f6))}.tbw-visibility-row input[type=checkbox]{cursor:pointer}.tbw-visibility-row.locked span{color:var(--tbw-color-fg-muted, #888)}.tbw-visibility-handle{cursor:grab;color:var(--tbw-color-fg-muted, #888);font-size:10px;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, #1f2937)}.tbw-visibility-label{display:flex;align-items:center;gap:8px;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-reorder-indicator, var(--tbw-color-accent, #3b82f6))}.tbw-visibility-row.drop-after:after{content:"";position:absolute;left:0;right:0;bottom:0;height:2px;background:var(--tbw-reorder-indicator, var(--tbw-color-accent, #3b82f6))}.tbw-visibility-show-all{margin:8px;padding:8px 12px;border:1px solid var(--tbw-visibility-border, var(--tbw-color-border, #e5e7eb));border-radius:var(--tbw-border-radius, 4px);background:var(--tbw-visibility-btn-bg, var(--tbw-color-header-bg, #f9fafb));color:var(--tbw-color-fg, #1f2937);cursor:pointer;font-size:13px}.tbw-visibility-show-all:hover{background:var(--tbw-visibility-hover, var(--tbw-color-row-hover, #f3f4f6))}';function p(v){const e=v.meta??{};return e.lockPosition!==!0&&e.suppressMovable!==!0}class c extends b.BaseGridPlugin{name="visibility";version="1.0.0";static PANEL_ID="columns";get defaultConfig(){return{allowHideAll:!1}}columnListElement=null;isDragging=!1;draggedField=null;draggedIndex=null;dropIndex=null;detach(){this.columnListElement=null,this.isDragging=!1,this.draggedField=null,this.draggedIndex=null,this.dropIndex=null}getToolPanel(){return{id:c.PANEL_ID,title:"Columns",icon:"☰",tooltip:"Column visibility",order:100,render:e=>this.renderPanelContent(e)}}show(){this.grid.openToolPanel(c.PANEL_ID)}hide(){this.grid.closeToolPanel()}toggle(){this.grid.toggleToolPanel(c.PANEL_ID)}isColumnVisible(e){return this.grid.isColumnVisible(e)}setColumnVisible(e,t){this.grid.setColumnVisible(e,t)}getVisibleColumns(){return this.grid.getAllColumns().filter(t=>t.visible).map(t=>t.field)}getHiddenColumns(){return this.grid.getAllColumns().filter(t=>!t.visible).map(t=>t.field)}showAll(){this.grid.showAllColumns()}toggleColumn(e){this.grid.toggleColumnVisibility(e)}showColumn(e){this.grid.setColumnVisible(e,!0)}hideColumn(e){this.grid.setColumnVisible(e,!1)}getAllColumns(){return this.grid.getAllColumns()}isPanelVisible(){return this.grid.activeToolPanel===c.PANEL_ID}renderPanelContent(e){const t=this.grid,o=document.createElement("div");o.className="tbw-visibility-content";const s=document.createElement("div");s.className="tbw-visibility-list",o.appendChild(s);const i=document.createElement("button");return i.className="tbw-visibility-show-all",i.textContent="Show All",i.addEventListener("click",()=>{t.showAllColumns(),this.rebuildToggles(s)}),o.appendChild(i),this.columnListElement=s,this.rebuildToggles(s),e.appendChild(o),()=>{this.columnListElement=null,o.remove()}}hasReorderPlugin(){const e=this.grid?.getPluginByName?.("reorder");return!!(e&&typeof e.moveColumn=="function")}rebuildToggles(e){const t=this.grid,o=this.hasReorderPlugin();e.innerHTML="";const s=t.getAllColumns();for(let i=0;i<s.length;i++){const l=s[i],n=l.header||l.field,r=document.createElement("div");r.className=l.lockVisible?"tbw-visibility-row locked":"tbw-visibility-row",r.setAttribute("data-field",l.field),r.setAttribute("data-index",String(i)),o&&p(l)&&(r.draggable=!0,r.classList.add("reorderable"),this.setupDragListeners(r,l.field,i,e));const a=document.createElement("label");a.className="tbw-visibility-label";const g=document.createElement("input");g.type="checkbox",g.checked=l.visible,g.disabled=l.lockVisible??!1,g.addEventListener("change",()=>{t.toggleColumnVisibility(l.field),setTimeout(()=>this.rebuildToggles(e),0)});const h=document.createElement("span");if(h.textContent=n,a.appendChild(g),a.appendChild(h),o&&p(l)){const u=document.createElement("span");u.className="tbw-visibility-handle",this.setIcon(u,this.resolveIcon("dragHandle")),u.title="Drag to reorder",r.appendChild(u)}r.appendChild(a),e.appendChild(r)}}setupDragListeners(e,t,o,s){e.addEventListener("dragstart",i=>{this.isDragging=!0,this.draggedField=t,this.draggedIndex=o,i.dataTransfer&&(i.dataTransfer.effectAllowed="move",i.dataTransfer.setData("text/plain",t)),e.classList.add("dragging")}),e.addEventListener("dragend",()=>{this.isDragging=!1,this.draggedField=null,this.draggedIndex=null,this.dropIndex=null,s.querySelectorAll(".tbw-visibility-row").forEach(i=>{i.classList.remove("dragging","drop-target","drop-before","drop-after")})}),e.addEventListener("dragover",i=>{if(i.preventDefault(),!this.isDragging||this.draggedField===t)return;const l=e.getBoundingClientRect(),n=l.top+l.height/2;this.dropIndex=i.clientY<n?o:o+1,s.querySelectorAll(".tbw-visibility-row").forEach(r=>{r!==e&&r.classList.remove("drop-target","drop-before","drop-after")}),e.classList.add("drop-target"),e.classList.toggle("drop-before",i.clientY<n),e.classList.toggle("drop-after",i.clientY>=n)}),e.addEventListener("dragleave",()=>{e.classList.remove("drop-target","drop-before","drop-after")}),e.addEventListener("drop",i=>{i.preventDefault();const l=this.draggedField,n=this.draggedIndex,r=this.dropIndex;if(!this.isDragging||l===null||n===null||r===null)return;const a=r>n?r-1:r;if(a!==n){const g={field:l,fromIndex:n,toIndex:a};this.emit("column-reorder-request",g),setTimeout(()=>{this.rebuildToggles(s)},0)}})}styles=f}d.VisibilityPlugin=c,Object.defineProperty(d,Symbol.toStringTag,{value:"Module"})}));
+(function(d,b){typeof exports=="object"&&typeof module<"u"?b(exports,require("../../core/plugin/base-plugin")):typeof define=="function"&&define.amd?define(["exports","../../core/plugin/base-plugin"],b):(d=typeof globalThis<"u"?globalThis:d||self,b(d.TbwGridPlugin_visibility={},d.TbwGrid))})(this,(function(d,b){"use strict";const f='.tbw-visibility-content{display:flex;flex-direction:column;height:100%}.tbw-visibility-list{flex:1;overflow-y:auto;padding:8px}.tbw-visibility-row{display:flex;align-items:center;gap:8px;padding:6px 4px;cursor:pointer;font-size:13px;border-radius:var(--tbw-border-radius, 4px);position:relative}.tbw-visibility-row:hover{background:var(--tbw-visibility-hover, var(--tbw-color-row-hover, #f3f4f6))}.tbw-visibility-row input[type=checkbox]{cursor:pointer}.tbw-visibility-row.locked span{color:var(--tbw-color-fg-muted, #888)}.tbw-visibility-handle{cursor:grab;color:var(--tbw-color-fg-muted, #888);font-size:10px;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, #1f2937)}.tbw-visibility-label{display:flex;align-items:center;gap:8px;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-reorder-indicator, var(--tbw-color-accent, #3b82f6))}.tbw-visibility-row.drop-after:after{content:"";position:absolute;left:0;right:0;bottom:0;height:2px;background:var(--tbw-reorder-indicator, var(--tbw-color-accent, #3b82f6))}.tbw-visibility-show-all{margin:8px;padding:8px 12px;border:1px solid var(--tbw-visibility-border, var(--tbw-color-border, #e5e7eb));border-radius:var(--tbw-border-radius, 4px);background:var(--tbw-visibility-btn-bg, var(--tbw-color-header-bg, #f9fafb));color:var(--tbw-color-fg, #1f2937);cursor:pointer;font-size:13px}.tbw-visibility-show-all:hover{background:var(--tbw-visibility-hover, var(--tbw-color-row-hover, #f3f4f6))}';function p(v){const e=v.meta??{};return e.lockPosition!==!0&&e.suppressMovable!==!0}class c extends b.BaseGridPlugin{static dependencies=[{name:"reorder",required:!1,reason:"Enables drag-to-reorder columns in visibility panel"}];name="visibility";version="1.0.0";static PANEL_ID="columns";get defaultConfig(){return{allowHideAll:!1}}columnListElement=null;isDragging=!1;draggedField=null;draggedIndex=null;dropIndex=null;detach(){this.columnListElement=null,this.isDragging=!1,this.draggedField=null,this.draggedIndex=null,this.dropIndex=null}getToolPanel(){return{id:c.PANEL_ID,title:"Columns",icon:"☰",tooltip:"Column visibility",order:100,render:e=>this.renderPanelContent(e)}}show(){this.grid.openToolPanel(c.PANEL_ID)}hide(){this.grid.closeToolPanel()}toggle(){this.grid.toggleToolPanel(c.PANEL_ID)}isColumnVisible(e){return this.grid.isColumnVisible(e)}setColumnVisible(e,t){this.grid.setColumnVisible(e,t)}getVisibleColumns(){return this.grid.getAllColumns().filter(t=>t.visible).map(t=>t.field)}getHiddenColumns(){return this.grid.getAllColumns().filter(t=>!t.visible).map(t=>t.field)}showAll(){this.grid.showAllColumns()}toggleColumn(e){this.grid.toggleColumnVisibility(e)}showColumn(e){this.grid.setColumnVisible(e,!0)}hideColumn(e){this.grid.setColumnVisible(e,!1)}getAllColumns(){return this.grid.getAllColumns()}isPanelVisible(){return this.grid.activeToolPanel===c.PANEL_ID}renderPanelContent(e){const t=this.grid,o=document.createElement("div");o.className="tbw-visibility-content";const s=document.createElement("div");s.className="tbw-visibility-list",o.appendChild(s);const i=document.createElement("button");return i.className="tbw-visibility-show-all",i.textContent="Show All",i.addEventListener("click",()=>{t.showAllColumns(),this.rebuildToggles(s)}),o.appendChild(i),this.columnListElement=s,this.rebuildToggles(s),e.appendChild(o),()=>{this.columnListElement=null,o.remove()}}hasReorderPlugin(){const e=this.grid?.getPluginByName?.("reorder");return!!(e&&typeof e.moveColumn=="function")}rebuildToggles(e){const t=this.grid,o=this.hasReorderPlugin();e.innerHTML="";const s=t.getAllColumns();for(let i=0;i<s.length;i++){const l=s[i],n=l.header||l.field,r=document.createElement("div");r.className=l.lockVisible?"tbw-visibility-row locked":"tbw-visibility-row",r.setAttribute("data-field",l.field),r.setAttribute("data-index",String(i)),o&&p(l)&&(r.draggable=!0,r.classList.add("reorderable"),this.setupDragListeners(r,l.field,i,e));const a=document.createElement("label");a.className="tbw-visibility-label";const g=document.createElement("input");g.type="checkbox",g.checked=l.visible,g.disabled=l.lockVisible??!1,g.addEventListener("change",()=>{t.toggleColumnVisibility(l.field),setTimeout(()=>this.rebuildToggles(e),0)});const h=document.createElement("span");if(h.textContent=n,a.appendChild(g),a.appendChild(h),o&&p(l)){const u=document.createElement("span");u.className="tbw-visibility-handle",this.setIcon(u,this.resolveIcon("dragHandle")),u.title="Drag to reorder",r.appendChild(u)}r.appendChild(a),e.appendChild(r)}}setupDragListeners(e,t,o,s){e.addEventListener("dragstart",i=>{this.isDragging=!0,this.draggedField=t,this.draggedIndex=o,i.dataTransfer&&(i.dataTransfer.effectAllowed="move",i.dataTransfer.setData("text/plain",t)),e.classList.add("dragging")}),e.addEventListener("dragend",()=>{this.isDragging=!1,this.draggedField=null,this.draggedIndex=null,this.dropIndex=null,s.querySelectorAll(".tbw-visibility-row").forEach(i=>{i.classList.remove("dragging","drop-target","drop-before","drop-after")})}),e.addEventListener("dragover",i=>{if(i.preventDefault(),!this.isDragging||this.draggedField===t)return;const l=e.getBoundingClientRect(),n=l.top+l.height/2;this.dropIndex=i.clientY<n?o:o+1,s.querySelectorAll(".tbw-visibility-row").forEach(r=>{r!==e&&r.classList.remove("drop-target","drop-before","drop-after")}),e.classList.add("drop-target"),e.classList.toggle("drop-before",i.clientY<n),e.classList.toggle("drop-after",i.clientY>=n)}),e.addEventListener("dragleave",()=>{e.classList.remove("drop-target","drop-before","drop-after")}),e.addEventListener("drop",i=>{i.preventDefault();const l=this.draggedField,n=this.draggedIndex,r=this.dropIndex;if(!this.isDragging||l===null||n===null||r===null)return;const a=r>n?r-1:r;if(a!==n){const g={field:l,fromIndex:n,toIndex:a};this.emit("column-reorder-request",g),setTimeout(()=>{this.rebuildToggles(s)},0)}})}styles=f}d.VisibilityPlugin=c,Object.defineProperty(d,Symbol.toStringTag,{value:"Module"})}));
 //# sourceMappingURL=visibility.umd.js.map

package/umd/plugins/visibility.umd.js.map

@@ -1 +1 @@
-{"version":3,"file":"visibility.umd.js","sources":["../../../../../libs/grid/src/lib/plugins/visibility/VisibilityPlugin.ts"],"sourcesContent":["/**\n * Column Visibility Plugin (Class-based)\n *\n * Provides a UI for column visibility control via the shell's tool panel system.\n * Column visibility is a core grid feature - this plugin provides:\n * - A tool panel for column visibility management (registered with the shell)\n * - Backward-compatible API methods that delegate to grid.setColumnVisible(), etc.\n *\n * The grid emits 'column-visibility' events when columns are shown/hidden,\n * allowing consumers to save user preferences.\n *\n * When a reorder plugin is present, column rows become draggable for reordering.\n * Drag-drop emits 'column-reorder-request' events that the ReorderPlugin can listen for.\n */\n\nimport { BaseGridPlugin } from '../../core/plugin/base-plugin';\nimport type { ColumnConfig, ToolPanelDefinition } from '../../core/types';\nimport type { VisibilityConfig } from './types';\nimport styles from './visibility.css?inline';\n\n/**\n * Detail for column-reorder-request events emitted when users drag-drop in the visibility panel.\n */\nexport interface ColumnReorderRequestDetail {\n  /** The field name of the column to move */\n  field: string;\n  /** The source index (before move) */\n  fromIndex: number;\n  /** The target index (after move) */\n  toIndex: number;\n}\n\n/**\n * Check if a column can be moved (respects lockPosition/suppressMovable).\n * Inlined to avoid importing from reorder plugin.\n */\nfunction canMoveColumn(column: ColumnConfig): boolean {\n  const meta = column.meta ?? {};\n  return meta.lockPosition !== true && meta.suppressMovable !== true;\n}\n\n/** Extended grid interface with visibility methods */\ninterface GridWithVisibility {\n  shadowRoot: ShadowRoot | null;\n  getAllColumns(): Array<{ field: string; header: string; visible: boolean; lockVisible?: boolean }>;\n  setColumnVisible(field: string, visible: boolean): void;\n  toggleColumnVisibility(field: string): void;\n  showAllColumns(): void;\n  isColumnVisible(field: string): boolean;\n  requestRender(): void;\n  openToolPanel(id: string): void;\n  closeToolPanel(): void;\n  toggleToolPanel(id: string): void;\n  activeToolPanel: string | undefined;\n}\n\n/**\n * Column Visibility Plugin for tbw-grid\n *\n * @example\n * ```ts\n * new VisibilityPlugin({ enabled: true, allowHideAll: false })\n * ```\n */\nexport class VisibilityPlugin extends BaseGridPlugin<VisibilityConfig> {\n  readonly name = 'visibility';\n  override readonly version = '1.0.0';\n\n  /** Tool panel ID for shell integration */\n  static readonly PANEL_ID = 'columns';\n\n  protected override get defaultConfig(): Partial<VisibilityConfig> {\n    return {\n      allowHideAll: false,\n    };\n  }\n\n  // #region Internal State\n  private columnListElement: HTMLElement | null = null;\n\n  // Drag state for reorder integration\n  private isDragging = false;\n  private draggedField: string | null = null;\n  private draggedIndex: number | null = null;\n  private dropIndex: number | null = null;\n  // #endregion\n\n  // #region Lifecycle\n\n  override detach(): void {\n    this.columnListElement = null;\n    this.isDragging = false;\n    this.draggedField = null;\n    this.draggedIndex = null;\n    this.dropIndex = null;\n  }\n  // #endregion\n\n  // #region Shell Integration\n\n  /**\n   * Register the column visibility tool panel with the shell.\n   */\n  override getToolPanel(): ToolPanelDefinition | undefined {\n    return {\n      id: VisibilityPlugin.PANEL_ID,\n      title: 'Columns',\n      icon: '☰',\n      tooltip: 'Column visibility',\n      order: 100, // High order so it appears last\n      render: (container) => this.renderPanelContent(container),\n    };\n  }\n  // #endregion\n\n  // #region Public API\n\n  /**\n   * Show the visibility sidebar panel.\n   */\n  show(): void {\n    const grid = this.grid as unknown as GridWithVisibility;\n    grid.openToolPanel(VisibilityPlugin.PANEL_ID);\n  }\n\n  /**\n   * Hide the visibility sidebar panel.\n   */\n  hide(): void {\n    const grid = this.grid as unknown as GridWithVisibility;\n    grid.closeToolPanel();\n  }\n\n  /**\n   * Toggle the visibility sidebar panel.\n   */\n  toggle(): void {\n    const grid = this.grid as unknown as GridWithVisibility;\n    grid.toggleToolPanel(VisibilityPlugin.PANEL_ID);\n  }\n\n  /**\n   * Check if a specific column is visible.\n   * Delegates to grid.isColumnVisible().\n   * @param field - The field name to check\n   * @returns True if the column is visible\n   */\n  isColumnVisible(field: string): boolean {\n    const grid = this.grid as unknown as GridWithVisibility;\n    return grid.isColumnVisible(field);\n  }\n\n  /**\n   * Set visibility for a specific column.\n   * Delegates to grid.setColumnVisible().\n   * @param field - The field name of the column\n   * @param visible - Whether the column should be visible\n   */\n  setColumnVisible(field: string, visible: boolean): void {\n    const grid = this.grid as unknown as GridWithVisibility;\n    grid.setColumnVisible(field, visible);\n  }\n\n  /**\n   * Get list of all visible column fields.\n   * @returns Array of visible field names\n   */\n  getVisibleColumns(): string[] {\n    const grid = this.grid as unknown as GridWithVisibility;\n    return grid\n      .getAllColumns()\n      .filter((c) => c.visible)\n      .map((c) => c.field);\n  }\n\n  /**\n   * Get list of all hidden column fields.\n   * @returns Array of hidden field names\n   */\n  getHiddenColumns(): string[] {\n    const grid = this.grid as unknown as GridWithVisibility;\n    return grid\n      .getAllColumns()\n      .filter((c) => !c.visible)\n      .map((c) => c.field);\n  }\n\n  /**\n   * Show all columns.\n   * Delegates to grid.showAllColumns().\n   */\n  showAll(): void {\n    const grid = this.grid as unknown as GridWithVisibility;\n    grid.showAllColumns();\n  }\n\n  /**\n   * Toggle visibility for a specific column.\n   * Delegates to grid.toggleColumnVisibility().\n   * @param field - The field name of the column\n   */\n  toggleColumn(field: string): void {\n    const grid = this.grid as unknown as GridWithVisibility;\n    grid.toggleColumnVisibility(field);\n  }\n\n  /**\n   * Show a specific column.\n   * Delegates to grid.setColumnVisible().\n   * @param field - The field name of the column to show\n   */\n  showColumn(field: string): void {\n    const grid = this.grid as unknown as GridWithVisibility;\n    grid.setColumnVisible(field, true);\n  }\n\n  /**\n   * Hide a specific column.\n   * Delegates to grid.setColumnVisible().\n   * @param field - The field name of the column to hide\n   */\n  hideColumn(field: string): void {\n    const grid = this.grid as unknown as GridWithVisibility;\n    grid.setColumnVisible(field, false);\n  }\n\n  /**\n   * Get all columns with their visibility status.\n   * Useful for building visibility UI.\n   * @returns Array of column info with visibility status\n   */\n  getAllColumns(): Array<{ field: string; header: string; visible: boolean; lockVisible?: boolean }> {\n    const grid = this.grid as unknown as GridWithVisibility;\n    return grid.getAllColumns();\n  }\n\n  /**\n   * Check if the sidebar panel is currently open.\n   * @returns True if the panel is open\n   */\n  isPanelVisible(): boolean {\n    const grid = this.grid as unknown as GridWithVisibility;\n    return grid.activeToolPanel === VisibilityPlugin.PANEL_ID;\n  }\n  // #endregion\n\n  // #region Private Methods\n\n  /**\n   * Render the panel content into the shell's tool panel container.\n   * Returns a cleanup function.\n   */\n  private renderPanelContent(container: HTMLElement): (() => void) | void {\n    const grid = this.grid as unknown as GridWithVisibility;\n\n    // Create content wrapper\n    const wrapper = document.createElement('div');\n    wrapper.className = 'tbw-visibility-content';\n\n    // Column list container\n    const columnList = document.createElement('div');\n    columnList.className = 'tbw-visibility-list';\n    wrapper.appendChild(columnList);\n\n    // Show all button\n    const showAllBtn = document.createElement('button');\n    showAllBtn.className = 'tbw-visibility-show-all';\n    showAllBtn.textContent = 'Show All';\n    showAllBtn.addEventListener('click', () => {\n      grid.showAllColumns();\n      this.rebuildToggles(columnList);\n    });\n    wrapper.appendChild(showAllBtn);\n\n    // Store reference\n    this.columnListElement = columnList;\n\n    // Build initial toggles\n    this.rebuildToggles(columnList);\n\n    // Append to container\n    container.appendChild(wrapper);\n\n    // Return cleanup function\n    return () => {\n      this.columnListElement = null;\n      wrapper.remove();\n    };\n  }\n\n  /**\n   * Check if a reorder plugin is present (by name to avoid static import).\n   */\n  private hasReorderPlugin(): boolean {\n    const plugin = this.grid?.getPluginByName?.('reorder');\n    // Duck-type check - just verify the plugin exists and has a moveColumn method\n    return !!(plugin && typeof (plugin as { moveColumn?: unknown }).moveColumn === 'function');\n  }\n\n  /**\n   * Build the column toggle checkboxes.\n   * When a reorder plugin is present, adds drag handles for reordering.\n   */\n  private rebuildToggles(columnList: HTMLElement): void {\n    const grid = this.grid as unknown as GridWithVisibility;\n    const reorderEnabled = this.hasReorderPlugin();\n\n    columnList.innerHTML = '';\n\n    // getAllColumns() now returns columns in their effective display order\n    const allColumns = grid.getAllColumns();\n\n    for (let i = 0; i < allColumns.length; i++) {\n      const col = allColumns[i];\n      const label = col.header || col.field;\n\n      const row = document.createElement('div');\n      row.className = col.lockVisible ? 'tbw-visibility-row locked' : 'tbw-visibility-row';\n      row.setAttribute('data-field', col.field);\n      row.setAttribute('data-index', String(i));\n\n      // Add drag handle if reorder is enabled\n      if (reorderEnabled && canMoveColumn(col as unknown as ColumnConfig)) {\n        row.draggable = true;\n        row.classList.add('reorderable');\n\n        this.setupDragListeners(row, col.field, i, columnList);\n      }\n\n      const labelWrapper = document.createElement('label');\n      labelWrapper.className = 'tbw-visibility-label';\n\n      const checkbox = document.createElement('input');\n      checkbox.type = 'checkbox';\n      checkbox.checked = col.visible;\n      checkbox.disabled = col.lockVisible ?? false;\n      checkbox.addEventListener('change', () => {\n        grid.toggleColumnVisibility(col.field);\n        // Refresh after toggle (grid may re-render)\n        setTimeout(() => this.rebuildToggles(columnList), 0);\n      });\n\n      const text = document.createElement('span');\n      text.textContent = label;\n\n      labelWrapper.appendChild(checkbox);\n      labelWrapper.appendChild(text);\n\n      // Add drag handle icon if reorderable\n      if (reorderEnabled && canMoveColumn(col as unknown as ColumnConfig)) {\n        const handle = document.createElement('span');\n        handle.className = 'tbw-visibility-handle';\n        // Use grid-level icons (fall back to defaults)\n        this.setIcon(handle, this.resolveIcon('dragHandle'));\n        handle.title = 'Drag to reorder';\n        row.appendChild(handle);\n      }\n\n      row.appendChild(labelWrapper);\n      columnList.appendChild(row);\n    }\n  }\n\n  /**\n   * Set up drag-and-drop event listeners for a row.\n   * On drop, emits a 'column-reorder-request' event for other plugins to handle.\n   */\n  private setupDragListeners(row: HTMLElement, field: string, index: number, columnList: HTMLElement): void {\n    row.addEventListener('dragstart', (e: DragEvent) => {\n      this.isDragging = true;\n      this.draggedField = field;\n      this.draggedIndex = index;\n\n      if (e.dataTransfer) {\n        e.dataTransfer.effectAllowed = 'move';\n        e.dataTransfer.setData('text/plain', field);\n      }\n\n      row.classList.add('dragging');\n    });\n\n    row.addEventListener('dragend', () => {\n      this.isDragging = false;\n      this.draggedField = null;\n      this.draggedIndex = null;\n      this.dropIndex = null;\n\n      columnList.querySelectorAll('.tbw-visibility-row').forEach((r) => {\n        r.classList.remove('dragging', 'drop-target', 'drop-before', 'drop-after');\n      });\n    });\n\n    row.addEventListener('dragover', (e: DragEvent) => {\n      e.preventDefault();\n      if (!this.isDragging || this.draggedField === field) return;\n\n      const rect = row.getBoundingClientRect();\n      const midY = rect.top + rect.height / 2;\n\n      this.dropIndex = e.clientY < midY ? index : index + 1;\n\n      // Clear other row highlights\n      columnList.querySelectorAll('.tbw-visibility-row').forEach((r) => {\n        if (r !== row) r.classList.remove('drop-target', 'drop-before', 'drop-after');\n      });\n\n      row.classList.add('drop-target');\n      row.classList.toggle('drop-before', e.clientY < midY);\n      row.classList.toggle('drop-after', e.clientY >= midY);\n    });\n\n    row.addEventListener('dragleave', () => {\n      row.classList.remove('drop-target', 'drop-before', 'drop-after');\n    });\n\n    row.addEventListener('drop', (e: DragEvent) => {\n      e.preventDefault();\n      const draggedField = this.draggedField;\n      const draggedIndex = this.draggedIndex;\n      const dropIndex = this.dropIndex;\n\n      if (!this.isDragging || draggedField === null || draggedIndex === null || dropIndex === null) {\n        return;\n      }\n\n      // Calculate the effective target index\n      const effectiveToIndex = dropIndex > draggedIndex ? dropIndex - 1 : dropIndex;\n\n      if (effectiveToIndex !== draggedIndex) {\n        // Emit a request event - other plugins (like ReorderPlugin) can listen and handle\n        const detail: ColumnReorderRequestDetail = {\n          field: draggedField,\n          fromIndex: draggedIndex,\n          toIndex: effectiveToIndex,\n        };\n        this.emit<ColumnReorderRequestDetail>('column-reorder-request', detail);\n\n        // Rebuild the panel after reorder (deferred to allow re-render)\n        setTimeout(() => {\n          this.rebuildToggles(columnList);\n        }, 0);\n      }\n    });\n  }\n  // #endregion\n\n  // #region Styles\n\n  override readonly styles = styles;\n  // #endregion\n}\n"],"names":["canMoveColumn","column","meta","VisibilityPlugin","BaseGridPlugin","container","field","visible","c","grid","wrapper","columnList","showAllBtn","plugin","reorderEnabled","allColumns","col","label","row","labelWrapper","checkbox","text","handle","index","e","r","rect","midY","draggedField","draggedIndex","dropIndex","effectiveToIndex","detail","styles"],"mappings":"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"}
+{"version":3,"file":"visibility.umd.js","sources":["../../../../../libs/grid/src/lib/plugins/visibility/VisibilityPlugin.ts"],"sourcesContent":["/**\n * Column Visibility Plugin (Class-based)\n *\n * Provides a UI for column visibility control via the shell's tool panel system.\n * Column visibility is a core grid feature - this plugin provides:\n * - A tool panel for column visibility management (registered with the shell)\n * - Backward-compatible API methods that delegate to grid.setColumnVisible(), etc.\n *\n * The grid emits 'column-visibility' events when columns are shown/hidden,\n * allowing consumers to save user preferences.\n *\n * When a reorder plugin is present, column rows become draggable for reordering.\n * Drag-drop emits 'column-reorder-request' events that the ReorderPlugin can listen for.\n */\n\nimport { BaseGridPlugin, type PluginDependency } from '../../core/plugin/base-plugin';\nimport type { ColumnConfig, ToolPanelDefinition } from '../../core/types';\nimport type { VisibilityConfig } from './types';\nimport styles from './visibility.css?inline';\n\n/**\n * Detail for column-reorder-request events emitted when users drag-drop in the visibility panel.\n */\nexport interface ColumnReorderRequestDetail {\n  /** The field name of the column to move */\n  field: string;\n  /** The source index (before move) */\n  fromIndex: number;\n  /** The target index (after move) */\n  toIndex: number;\n}\n\n/**\n * Check if a column can be moved (respects lockPosition/suppressMovable).\n * Inlined to avoid importing from reorder plugin.\n */\nfunction canMoveColumn(column: ColumnConfig): boolean {\n  const meta = column.meta ?? {};\n  return meta.lockPosition !== true && meta.suppressMovable !== true;\n}\n\n/** Extended grid interface with visibility methods */\ninterface GridWithVisibility {\n  shadowRoot: ShadowRoot | null;\n  getAllColumns(): Array<{ field: string; header: string; visible: boolean; lockVisible?: boolean }>;\n  setColumnVisible(field: string, visible: boolean): void;\n  toggleColumnVisibility(field: string): void;\n  showAllColumns(): void;\n  isColumnVisible(field: string): boolean;\n  requestRender(): void;\n  openToolPanel(id: string): void;\n  closeToolPanel(): void;\n  toggleToolPanel(id: string): void;\n  activeToolPanel: string | undefined;\n}\n\n/**\n * Column Visibility Plugin for tbw-grid\n *\n * @example\n * ```ts\n * new VisibilityPlugin({ enabled: true, allowHideAll: false })\n * ```\n */\nexport class VisibilityPlugin extends BaseGridPlugin<VisibilityConfig> {\n  /**\n   * Plugin dependencies - VisibilityPlugin optionally uses ReorderPlugin for drag-drop reordering.\n   *\n   * When ReorderPlugin is present, columns in the visibility panel become draggable.\n   */\n  static override readonly dependencies: PluginDependency[] = [\n    { name: 'reorder', required: false, reason: 'Enables drag-to-reorder columns in visibility panel' },\n  ];\n\n  readonly name = 'visibility';\n  override readonly version = '1.0.0';\n\n  /** Tool panel ID for shell integration */\n  static readonly PANEL_ID = 'columns';\n\n  protected override get defaultConfig(): Partial<VisibilityConfig> {\n    return {\n      allowHideAll: false,\n    };\n  }\n\n  // #region Internal State\n  private columnListElement: HTMLElement | null = null;\n\n  // Drag state for reorder integration\n  private isDragging = false;\n  private draggedField: string | null = null;\n  private draggedIndex: number | null = null;\n  private dropIndex: number | null = null;\n  // #endregion\n\n  // #region Lifecycle\n\n  override detach(): void {\n    this.columnListElement = null;\n    this.isDragging = false;\n    this.draggedField = null;\n    this.draggedIndex = null;\n    this.dropIndex = null;\n  }\n  // #endregion\n\n  // #region Shell Integration\n\n  /**\n   * Register the column visibility tool panel with the shell.\n   */\n  override getToolPanel(): ToolPanelDefinition | undefined {\n    return {\n      id: VisibilityPlugin.PANEL_ID,\n      title: 'Columns',\n      icon: '☰',\n      tooltip: 'Column visibility',\n      order: 100, // High order so it appears last\n      render: (container) => this.renderPanelContent(container),\n    };\n  }\n  // #endregion\n\n  // #region Public API\n\n  /**\n   * Show the visibility sidebar panel.\n   */\n  show(): void {\n    const grid = this.grid as unknown as GridWithVisibility;\n    grid.openToolPanel(VisibilityPlugin.PANEL_ID);\n  }\n\n  /**\n   * Hide the visibility sidebar panel.\n   */\n  hide(): void {\n    const grid = this.grid as unknown as GridWithVisibility;\n    grid.closeToolPanel();\n  }\n\n  /**\n   * Toggle the visibility sidebar panel.\n   */\n  toggle(): void {\n    const grid = this.grid as unknown as GridWithVisibility;\n    grid.toggleToolPanel(VisibilityPlugin.PANEL_ID);\n  }\n\n  /**\n   * Check if a specific column is visible.\n   * Delegates to grid.isColumnVisible().\n   * @param field - The field name to check\n   * @returns True if the column is visible\n   */\n  isColumnVisible(field: string): boolean {\n    const grid = this.grid as unknown as GridWithVisibility;\n    return grid.isColumnVisible(field);\n  }\n\n  /**\n   * Set visibility for a specific column.\n   * Delegates to grid.setColumnVisible().\n   * @param field - The field name of the column\n   * @param visible - Whether the column should be visible\n   */\n  setColumnVisible(field: string, visible: boolean): void {\n    const grid = this.grid as unknown as GridWithVisibility;\n    grid.setColumnVisible(field, visible);\n  }\n\n  /**\n   * Get list of all visible column fields.\n   * @returns Array of visible field names\n   */\n  getVisibleColumns(): string[] {\n    const grid = this.grid as unknown as GridWithVisibility;\n    return grid\n      .getAllColumns()\n      .filter((c) => c.visible)\n      .map((c) => c.field);\n  }\n\n  /**\n   * Get list of all hidden column fields.\n   * @returns Array of hidden field names\n   */\n  getHiddenColumns(): string[] {\n    const grid = this.grid as unknown as GridWithVisibility;\n    return grid\n      .getAllColumns()\n      .filter((c) => !c.visible)\n      .map((c) => c.field);\n  }\n\n  /**\n   * Show all columns.\n   * Delegates to grid.showAllColumns().\n   */\n  showAll(): void {\n    const grid = this.grid as unknown as GridWithVisibility;\n    grid.showAllColumns();\n  }\n\n  /**\n   * Toggle visibility for a specific column.\n   * Delegates to grid.toggleColumnVisibility().\n   * @param field - The field name of the column\n   */\n  toggleColumn(field: string): void {\n    const grid = this.grid as unknown as GridWithVisibility;\n    grid.toggleColumnVisibility(field);\n  }\n\n  /**\n   * Show a specific column.\n   * Delegates to grid.setColumnVisible().\n   * @param field - The field name of the column to show\n   */\n  showColumn(field: string): void {\n    const grid = this.grid as unknown as GridWithVisibility;\n    grid.setColumnVisible(field, true);\n  }\n\n  /**\n   * Hide a specific column.\n   * Delegates to grid.setColumnVisible().\n   * @param field - The field name of the column to hide\n   */\n  hideColumn(field: string): void {\n    const grid = this.grid as unknown as GridWithVisibility;\n    grid.setColumnVisible(field, false);\n  }\n\n  /**\n   * Get all columns with their visibility status.\n   * Useful for building visibility UI.\n   * @returns Array of column info with visibility status\n   */\n  getAllColumns(): Array<{ field: string; header: string; visible: boolean; lockVisible?: boolean }> {\n    const grid = this.grid as unknown as GridWithVisibility;\n    return grid.getAllColumns();\n  }\n\n  /**\n   * Check if the sidebar panel is currently open.\n   * @returns True if the panel is open\n   */\n  isPanelVisible(): boolean {\n    const grid = this.grid as unknown as GridWithVisibility;\n    return grid.activeToolPanel === VisibilityPlugin.PANEL_ID;\n  }\n  // #endregion\n\n  // #region Private Methods\n\n  /**\n   * Render the panel content into the shell's tool panel container.\n   * Returns a cleanup function.\n   */\n  private renderPanelContent(container: HTMLElement): (() => void) | void {\n    const grid = this.grid as unknown as GridWithVisibility;\n\n    // Create content wrapper\n    const wrapper = document.createElement('div');\n    wrapper.className = 'tbw-visibility-content';\n\n    // Column list container\n    const columnList = document.createElement('div');\n    columnList.className = 'tbw-visibility-list';\n    wrapper.appendChild(columnList);\n\n    // Show all button\n    const showAllBtn = document.createElement('button');\n    showAllBtn.className = 'tbw-visibility-show-all';\n    showAllBtn.textContent = 'Show All';\n    showAllBtn.addEventListener('click', () => {\n      grid.showAllColumns();\n      this.rebuildToggles(columnList);\n    });\n    wrapper.appendChild(showAllBtn);\n\n    // Store reference\n    this.columnListElement = columnList;\n\n    // Build initial toggles\n    this.rebuildToggles(columnList);\n\n    // Append to container\n    container.appendChild(wrapper);\n\n    // Return cleanup function\n    return () => {\n      this.columnListElement = null;\n      wrapper.remove();\n    };\n  }\n\n  /**\n   * Check if a reorder plugin is present (by name to avoid static import).\n   */\n  private hasReorderPlugin(): boolean {\n    const plugin = this.grid?.getPluginByName?.('reorder');\n    // Duck-type check - just verify the plugin exists and has a moveColumn method\n    return !!(plugin && typeof (plugin as { moveColumn?: unknown }).moveColumn === 'function');\n  }\n\n  /**\n   * Build the column toggle checkboxes.\n   * When a reorder plugin is present, adds drag handles for reordering.\n   */\n  private rebuildToggles(columnList: HTMLElement): void {\n    const grid = this.grid as unknown as GridWithVisibility;\n    const reorderEnabled = this.hasReorderPlugin();\n\n    columnList.innerHTML = '';\n\n    // getAllColumns() now returns columns in their effective display order\n    const allColumns = grid.getAllColumns();\n\n    for (let i = 0; i < allColumns.length; i++) {\n      const col = allColumns[i];\n      const label = col.header || col.field;\n\n      const row = document.createElement('div');\n      row.className = col.lockVisible ? 'tbw-visibility-row locked' : 'tbw-visibility-row';\n      row.setAttribute('data-field', col.field);\n      row.setAttribute('data-index', String(i));\n\n      // Add drag handle if reorder is enabled\n      if (reorderEnabled && canMoveColumn(col as unknown as ColumnConfig)) {\n        row.draggable = true;\n        row.classList.add('reorderable');\n\n        this.setupDragListeners(row, col.field, i, columnList);\n      }\n\n      const labelWrapper = document.createElement('label');\n      labelWrapper.className = 'tbw-visibility-label';\n\n      const checkbox = document.createElement('input');\n      checkbox.type = 'checkbox';\n      checkbox.checked = col.visible;\n      checkbox.disabled = col.lockVisible ?? false;\n      checkbox.addEventListener('change', () => {\n        grid.toggleColumnVisibility(col.field);\n        // Refresh after toggle (grid may re-render)\n        setTimeout(() => this.rebuildToggles(columnList), 0);\n      });\n\n      const text = document.createElement('span');\n      text.textContent = label;\n\n      labelWrapper.appendChild(checkbox);\n      labelWrapper.appendChild(text);\n\n      // Add drag handle icon if reorderable\n      if (reorderEnabled && canMoveColumn(col as unknown as ColumnConfig)) {\n        const handle = document.createElement('span');\n        handle.className = 'tbw-visibility-handle';\n        // Use grid-level icons (fall back to defaults)\n        this.setIcon(handle, this.resolveIcon('dragHandle'));\n        handle.title = 'Drag to reorder';\n        row.appendChild(handle);\n      }\n\n      row.appendChild(labelWrapper);\n      columnList.appendChild(row);\n    }\n  }\n\n  /**\n   * Set up drag-and-drop event listeners for a row.\n   * On drop, emits a 'column-reorder-request' event for other plugins to handle.\n   */\n  private setupDragListeners(row: HTMLElement, field: string, index: number, columnList: HTMLElement): void {\n    row.addEventListener('dragstart', (e: DragEvent) => {\n      this.isDragging = true;\n      this.draggedField = field;\n      this.draggedIndex = index;\n\n      if (e.dataTransfer) {\n        e.dataTransfer.effectAllowed = 'move';\n        e.dataTransfer.setData('text/plain', field);\n      }\n\n      row.classList.add('dragging');\n    });\n\n    row.addEventListener('dragend', () => {\n      this.isDragging = false;\n      this.draggedField = null;\n      this.draggedIndex = null;\n      this.dropIndex = null;\n\n      columnList.querySelectorAll('.tbw-visibility-row').forEach((r) => {\n        r.classList.remove('dragging', 'drop-target', 'drop-before', 'drop-after');\n      });\n    });\n\n    row.addEventListener('dragover', (e: DragEvent) => {\n      e.preventDefault();\n      if (!this.isDragging || this.draggedField === field) return;\n\n      const rect = row.getBoundingClientRect();\n      const midY = rect.top + rect.height / 2;\n\n      this.dropIndex = e.clientY < midY ? index : index + 1;\n\n      // Clear other row highlights\n      columnList.querySelectorAll('.tbw-visibility-row').forEach((r) => {\n        if (r !== row) r.classList.remove('drop-target', 'drop-before', 'drop-after');\n      });\n\n      row.classList.add('drop-target');\n      row.classList.toggle('drop-before', e.clientY < midY);\n      row.classList.toggle('drop-after', e.clientY >= midY);\n    });\n\n    row.addEventListener('dragleave', () => {\n      row.classList.remove('drop-target', 'drop-before', 'drop-after');\n    });\n\n    row.addEventListener('drop', (e: DragEvent) => {\n      e.preventDefault();\n      const draggedField = this.draggedField;\n      const draggedIndex = this.draggedIndex;\n      const dropIndex = this.dropIndex;\n\n      if (!this.isDragging || draggedField === null || draggedIndex === null || dropIndex === null) {\n        return;\n      }\n\n      // Calculate the effective target index\n      const effectiveToIndex = dropIndex > draggedIndex ? dropIndex - 1 : dropIndex;\n\n      if (effectiveToIndex !== draggedIndex) {\n        // Emit a request event - other plugins (like ReorderPlugin) can listen and handle\n        const detail: ColumnReorderRequestDetail = {\n          field: draggedField,\n          fromIndex: draggedIndex,\n          toIndex: effectiveToIndex,\n        };\n        this.emit<ColumnReorderRequestDetail>('column-reorder-request', detail);\n\n        // Rebuild the panel after reorder (deferred to allow re-render)\n        setTimeout(() => {\n          this.rebuildToggles(columnList);\n        }, 0);\n      }\n    });\n  }\n  // #endregion\n\n  // #region Styles\n\n  override readonly styles = styles;\n  // #endregion\n}\n"],"names":["canMoveColumn","column","meta","VisibilityPlugin","BaseGridPlugin","container","field","visible","c","grid","wrapper","columnList","showAllBtn","plugin","reorderEnabled","allColumns","col","label","row","labelWrapper","checkbox","text","handle","index","e","r","rect","midY","draggedField","draggedIndex","dropIndex","effectiveToIndex","detail","styles"],"mappings":"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"}