@toolbox-web/grid 1.6.0 → 1.6.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/all.js +448 -354
- package/all.js.map +1 -1
- package/index.js +3 -3
- package/index.js.map +1 -1
- package/lib/plugins/context-menu/ContextMenuPlugin.d.ts +11 -0
- package/lib/plugins/context-menu/ContextMenuPlugin.d.ts.map +1 -1
- package/lib/plugins/context-menu/index.js +136 -77
- package/lib/plugins/context-menu/index.js.map +1 -1
- package/lib/plugins/multi-sort/index.js +11 -11
- package/lib/plugins/pivot/PivotPlugin.d.ts +2 -0
- package/lib/plugins/pivot/PivotPlugin.d.ts.map +1 -1
- package/lib/plugins/pivot/index.js +29 -27
- package/lib/plugins/pivot/index.js.map +1 -1
- package/lib/plugins/print/index.js +1 -1
- package/lib/plugins/print/index.js.map +1 -1
- package/lib/plugins/row-reorder/RowReorderPlugin.d.ts +18 -0
- package/lib/plugins/row-reorder/RowReorderPlugin.d.ts.map +1 -1
- package/lib/plugins/row-reorder/index.js +132 -72
- package/lib/plugins/row-reorder/index.js.map +1 -1
- package/lib/plugins/selection/index.js +1 -1
- package/lib/plugins/visibility/index.js +7 -7
- package/package.json +1 -1
- package/themes/dg-theme-bootstrap.css +60 -33
- package/themes/dg-theme-material.css +83 -52
- package/themes/dg-theme-standard.css +80 -12
- package/themes/dg-theme-vibrant.css +78 -9
- package/umd/grid.all.umd.js +22 -22
- package/umd/grid.all.umd.js.map +1 -1
- package/umd/grid.umd.js +1 -1
- package/umd/grid.umd.js.map +1 -1
- package/umd/plugins/context-menu.umd.js +1 -1
- package/umd/plugins/context-menu.umd.js.map +1 -1
- package/umd/plugins/multi-sort.umd.js +1 -1
- package/umd/plugins/multi-sort.umd.js.map +1 -1
- package/umd/plugins/pivot.umd.js +1 -1
- package/umd/plugins/pivot.umd.js.map +1 -1
- package/umd/plugins/print.umd.js +1 -1
- package/umd/plugins/print.umd.js.map +1 -1
- package/umd/plugins/row-reorder.umd.js +1 -1
- package/umd/plugins/row-reorder.umd.js.map +1 -1
- package/umd/plugins/selection.umd.js +1 -1
- package/umd/plugins/selection.umd.js.map +1 -1
- package/umd/plugins/visibility.umd.js +1 -1
- package/umd/plugins/visibility.umd.js.map +1 -1
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
(function(m,
|
|
1
|
+
(function(m,h){typeof exports=="object"&&typeof module<"u"?h(exports,require("../../core/plugin/base-plugin"),require("../../core/types")):typeof define=="function"&&define.amd?define(["exports","../../core/plugin/base-plugin","../../core/types"],h):(m=typeof globalThis<"u"?globalThis:m||self,h(m.TbwGridPlugin_contextMenu={},m.TbwGrid,m.TbwGrid))})(this,(function(m,h,S){"use strict";const x="@layer tbw-plugins{.tbw-context-menu{position:fixed;background:var(--tbw-context-menu-bg, var(--tbw-color-panel-bg));color:var(--tbw-context-menu-fg, var(--tbw-color-fg));border:1px solid var(--tbw-context-menu-border, var(--tbw-color-border));border-radius:var(--tbw-context-menu-radius, var(--tbw-border-radius));box-shadow:0 2px 10px var(--tbw-context-menu-shadow, var(--tbw-color-shadow));min-width:var(--tbw-context-menu-min-width, var(--tbw-menu-min-width));padding:var(--tbw-spacing-xs) 0;z-index:10000;font-size:var(--tbw-context-menu-font-size, var(--tbw-font-size-sm));font-family:var(--tbw-context-menu-font-family, var(--tbw-font-family))}.tbw-context-menu-item{display:flex;align-items:center;padding:var(--tbw-context-menu-item-padding, var(--tbw-menu-item-padding));cursor:pointer;gap:var(--tbw-context-menu-item-gap, var(--tbw-menu-item-gap))}.tbw-context-menu-item:hover:not(.disabled){background:var(--tbw-context-menu-hover, var(--tbw-color-row-hover))}.tbw-context-menu-item.disabled{opacity:.5;cursor:default}.tbw-context-menu-item.danger{color:var(--tbw-context-menu-danger, var(--tbw-color-danger))}.tbw-context-menu-icon{width:var(--tbw-context-menu-icon-size, var(--tbw-icon-size));text-align:center}.tbw-context-menu-label{flex:1}.tbw-context-menu-shortcut{color:var(--tbw-context-menu-muted, var(--tbw-color-fg-muted));font-size:var(--tbw-context-menu-shortcut-size, var(--tbw-font-size-xs))}.tbw-context-menu-arrow{font-size:var(--tbw-context-menu-arrow-size, var(--tbw-font-size-2xs));color:var(--tbw-context-menu-muted, var(--tbw-color-fg-muted))}.tbw-context-menu-separator{height:1px;background:var(--tbw-context-menu-border, var(--tbw-color-border));margin:var(--tbw-spacing-xs) 0}}";function g(s,n){return(typeof s=="function"?s(n):s).filter(t=>!(t.hidden===!0||typeof t.hidden=="function"&&t.hidden(n)))}function z(s,n){return s.disabled===!0?!0:typeof s.disabled=="function"?s.disabled(n):!1}function v(s,n,l,t=S.DEFAULT_GRID_ICONS.submenuArrow){const i=document.createElement("div");i.className="tbw-context-menu",i.setAttribute("role","menu");for(const o of s){if(o.separator){const r=document.createElement("div");r.className="tbw-context-menu-separator",r.setAttribute("role","separator"),i.appendChild(r);continue}const e=document.createElement("div");e.className="tbw-context-menu-item",o.cssClass&&e.classList.add(o.cssClass),e.setAttribute("role","menuitem"),e.setAttribute("data-id",o.id);const a=z(o,n);if(a&&(e.classList.add("disabled"),e.setAttribute("aria-disabled","true")),o.icon){const r=document.createElement("span");r.className="tbw-context-menu-icon",r.innerHTML=o.icon,e.appendChild(r)}const c=document.createElement("span");if(c.className="tbw-context-menu-label",c.textContent=o.name,e.appendChild(c),o.shortcut){const r=document.createElement("span");r.className="tbw-context-menu-shortcut",r.textContent=o.shortcut,e.appendChild(r)}if(o.subMenu?.length){const r=document.createElement("span");r.className="tbw-context-menu-arrow",typeof t=="string"?r.innerHTML=t:t instanceof HTMLElement&&r.appendChild(t.cloneNode(!0)),e.appendChild(r),e.addEventListener("mouseenter",()=>{if(e.querySelector(".tbw-context-menu")||!o.subMenu)return;const w=g(o.subMenu,n),d=v(w,n,l,t);d.classList.add("tbw-context-submenu"),d.style.position="absolute",d.style.left="100%",d.style.top="0",e.style.position="relative",e.appendChild(d)}),e.addEventListener("mouseleave",()=>{const u=e.querySelector(".tbw-context-menu");u&&u.remove()})}!a&&o.action&&!o.subMenu&&e.addEventListener("click",r=>{r.stopPropagation(),l(o)}),i.appendChild(e)}return i}function M(s,n,l){s.style.position="fixed",s.style.left=`${n}px`,s.style.top=`${l}px`,s.style.visibility="hidden",s.style.zIndex="10000";const t=s.getBoundingClientRect(),i=window.innerWidth,o=window.innerHeight;let e=n,a=l;n+t.width>i&&(e=n-t.width),l+t.height>o&&(a=l-t.height),e=Math.max(0,e),a=Math.max(0,a),s.style.left=`${e}px`,s.style.top=`${a}px`,s.style.visibility="visible"}let f=null,p=null,b=null,y=0;const E=[{id:"copy",name:"Copy",shortcut:"Ctrl+C",action:s=>{s.grid?.plugins?.clipboard?.copy?.()}},{separator:!0,id:"sep1",name:""},{id:"export-csv",name:"Export CSV",action:s=>{s.grid?.plugins?.export?.exportCsv?.()}}];class C extends h.BaseGridPlugin{name="contextMenu";get defaultConfig(){return{items:E}}isOpen=!1;position={x:0,y:0};params=null;menuElement=null;attach(n){super.attach(n),this.installGlobalHandlers(),y++}detach(){this.menuElement&&(this.menuElement.remove(),this.menuElement=null),this.isOpen=!1,this.params=null,this.uninstallGlobalHandlers()}static CSS_VARS_TO_COPY=["--tbw-color-panel-bg","--tbw-color-fg","--tbw-color-fg-muted","--tbw-color-border","--tbw-color-row-hover","--tbw-color-shadow","--tbw-color-danger","--tbw-border-radius","--tbw-font-family","--tbw-font-size-sm","--tbw-font-size-xs","--tbw-font-size-2xs","--tbw-spacing-xs","--tbw-icon-size","--tbw-menu-min-width","--tbw-menu-item-padding","--tbw-menu-item-gap","--tbw-context-menu-bg","--tbw-context-menu-fg","--tbw-context-menu-border","--tbw-context-menu-radius","--tbw-context-menu-shadow","--tbw-context-menu-hover","--tbw-context-menu-danger","--tbw-context-menu-muted","--tbw-context-menu-min-width","--tbw-context-menu-font-size","--tbw-context-menu-font-family","--tbw-context-menu-item-padding","--tbw-context-menu-item-gap","--tbw-context-menu-icon-size","--tbw-context-menu-shortcut-size","--tbw-context-menu-arrow-size"];copyGridStyles(n){const l=this.gridElement;if(!l)return;const t=getComputedStyle(l),i=[];for(const o of C.CSS_VARS_TO_COPY){const e=t.getPropertyValue(o).trim();e&&i.push(`${o}: ${e}`)}if(i.length>0){const o=n.getAttribute("style")||"";n.setAttribute("style",o+i.join("; ")+";")}}installGlobalHandlers(){!b&&typeof document<"u"&&typeof x=="string"&&x&&(b=document.createElement("style"),b.id="tbw-context-menu-styles",b.textContent=x,document.head.appendChild(b)),f||(f=()=>{document.querySelectorAll(".tbw-context-menu").forEach(l=>l.remove())},document.addEventListener("click",f)),p||(p=n=>{n.key==="Escape"&&document.querySelectorAll(".tbw-context-menu").forEach(t=>t.remove())},document.addEventListener("keydown",p))}uninstallGlobalHandlers(){y--,!(y>0)&&(f&&(document.removeEventListener("click",f),f=null),p&&(document.removeEventListener("keydown",p),p=null),b&&(b.remove(),b=null))}afterRender(){const n=this.gridElement;if(!n)return;const l=n.children[0];l&&l.getAttribute("data-context-menu-bound")!=="true"&&(l.setAttribute("data-context-menu-bound","true"),l.addEventListener("contextmenu",t=>{const i=t;i.preventDefault();const o=i.target,e=o.closest("[data-row][data-col]"),a=o.closest(".header-cell");let c;if(e){const u=parseInt(e.getAttribute("data-row")??"-1",10),w=parseInt(e.getAttribute("data-col")??"-1",10),d=this.columns[w],I=this.rows[u];c={row:I,rowIndex:u,column:d,columnIndex:w,field:d?.field??"",value:I?.[d?.field]??null,isHeader:!1,event:i}}else if(a){const u=parseInt(a.getAttribute("data-col")??"-1",10),w=this.columns[u];c={row:null,rowIndex:-1,column:w,columnIndex:u,field:w?.field??"",value:null,isHeader:!0,event:i}}else return;this.params=c,this.position={x:i.clientX,y:i.clientY};const r=g(this.config.items??E,c);r.length&&(this.menuElement&&this.menuElement.remove(),this.menuElement=v(r,c,u=>{u.action&&u.action(c),this.menuElement?.remove(),this.menuElement=null,this.isOpen=!1},this.gridIcons.submenuArrow),document.body.appendChild(this.menuElement),this.copyGridStyles(this.menuElement),M(this.menuElement,i.clientX,i.clientY),this.isOpen=!0,this.emit("context-menu-open",{params:c,items:r}))}))}showMenu(n,l,t){const i={row:t.row??null,rowIndex:t.rowIndex??-1,column:t.column??null,columnIndex:t.columnIndex??-1,field:t.field??"",value:t.value??null,isHeader:t.isHeader??!1,event:t.event??new MouseEvent("contextmenu")},o=g(this.config.items??E,i);this.menuElement&&this.menuElement.remove(),this.menuElement=v(o,i,e=>{e.action&&e.action(i),this.menuElement?.remove(),this.menuElement=null,this.isOpen=!1},this.gridIcons.submenuArrow),document.body.appendChild(this.menuElement),this.copyGridStyles(this.menuElement),M(this.menuElement,n,l),this.isOpen=!0}hideMenu(){this.menuElement&&(this.menuElement.remove(),this.menuElement=null,this.isOpen=!1)}isMenuOpen(){return this.isOpen}}m.ContextMenuPlugin=C,Object.defineProperty(m,Symbol.toStringTag,{value:"Module"})}));
|
|
2
2
|
//# sourceMappingURL=context-menu.umd.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"context-menu.umd.js","sources":["../../../../../libs/grid/src/lib/plugins/context-menu/menu.ts","../../../../../libs/grid/src/lib/plugins/context-menu/ContextMenuPlugin.ts"],"sourcesContent":["/**\n * Context Menu Rendering Logic\n *\n * Pure functions for building and positioning context menus.\n */\n\nimport type { IconValue } from '../../core/types';\nimport { DEFAULT_GRID_ICONS } from '../../core/types';\nimport type { ContextMenuItem, ContextMenuParams } from './types';\n\n/**\n * Build the visible menu items by resolving dynamic items and filtering hidden ones.\n *\n * @param items - Menu items configuration (array or factory function)\n * @param params - Context menu parameters for evaluating dynamic properties\n * @returns Filtered array of visible menu items\n */\nexport function buildMenuItems(\n items: ContextMenuItem[] | ((params: ContextMenuParams) => ContextMenuItem[]),\n params: ContextMenuParams\n): ContextMenuItem[] {\n const menuItems = typeof items === 'function' ? items(params) : items;\n\n return menuItems.filter((item) => {\n if (item.hidden === true) return false;\n if (typeof item.hidden === 'function' && item.hidden(params)) return false;\n return true;\n });\n}\n\n/**\n * Check if a menu item is disabled.\n *\n * @param item - The menu item to check\n * @param params - Context menu parameters for evaluating dynamic disabled state\n * @returns True if the item is disabled\n */\nexport function isItemDisabled(item: ContextMenuItem, params: ContextMenuParams): boolean {\n if (item.disabled === true) return true;\n if (typeof item.disabled === 'function') return item.disabled(params);\n return false;\n}\n\n/**\n * Create the menu DOM element from a list of menu items.\n *\n * @param items - Array of menu items to render\n * @param params - Context menu parameters for evaluating dynamic properties\n * @param onAction - Callback when a menu item action is triggered\n * @param submenuArrow - Optional custom submenu arrow icon\n * @returns The created menu element\n */\nexport function createMenuElement(\n items: ContextMenuItem[],\n params: ContextMenuParams,\n onAction: (item: ContextMenuItem) => void,\n submenuArrow: IconValue = DEFAULT_GRID_ICONS.submenuArrow\n): HTMLElement {\n const menu = document.createElement('div');\n menu.className = 'tbw-context-menu';\n menu.setAttribute('role', 'menu');\n\n for (const item of items) {\n if (item.separator) {\n const separator = document.createElement('div');\n separator.className = 'tbw-context-menu-separator';\n separator.setAttribute('role', 'separator');\n menu.appendChild(separator);\n continue;\n }\n\n const menuItem = document.createElement('div');\n menuItem.className = 'tbw-context-menu-item';\n if (item.cssClass) menuItem.classList.add(item.cssClass);\n menuItem.setAttribute('role', 'menuitem');\n menuItem.setAttribute('data-id', item.id);\n\n const disabled = isItemDisabled(item, params);\n if (disabled) {\n menuItem.classList.add('disabled');\n menuItem.setAttribute('aria-disabled', 'true');\n }\n\n if (item.icon) {\n const icon = document.createElement('span');\n icon.className = 'tbw-context-menu-icon';\n icon.innerHTML = item.icon;\n menuItem.appendChild(icon);\n }\n\n const label = document.createElement('span');\n label.className = 'tbw-context-menu-label';\n label.textContent = item.name;\n menuItem.appendChild(label);\n\n if (item.shortcut) {\n const shortcut = document.createElement('span');\n shortcut.className = 'tbw-context-menu-shortcut';\n shortcut.textContent = item.shortcut;\n menuItem.appendChild(shortcut);\n }\n\n if (item.subMenu?.length) {\n const arrow = document.createElement('span');\n arrow.className = 'tbw-context-menu-arrow';\n // Use provided submenu arrow icon (string or HTMLElement)\n if (typeof submenuArrow === 'string') {\n arrow.innerHTML = submenuArrow;\n } else if (submenuArrow instanceof HTMLElement) {\n arrow.appendChild(submenuArrow.cloneNode(true));\n }\n menuItem.appendChild(arrow);\n\n // Add submenu on hover\n menuItem.addEventListener('mouseenter', () => {\n const existingSubMenu = menuItem.querySelector('.tbw-context-menu');\n if (existingSubMenu) return;\n if (!item.subMenu) return;\n\n const subMenuItems = buildMenuItems(item.subMenu, params);\n const subMenu = createMenuElement(subMenuItems, params, onAction, submenuArrow);\n subMenu.classList.add('tbw-context-submenu');\n subMenu.style.position = 'absolute';\n subMenu.style.left = '100%';\n subMenu.style.top = '0';\n menuItem.style.position = 'relative';\n menuItem.appendChild(subMenu);\n });\n\n menuItem.addEventListener('mouseleave', () => {\n const subMenu = menuItem.querySelector('.tbw-context-menu');\n if (subMenu) subMenu.remove();\n });\n }\n\n if (!disabled && item.action && !item.subMenu) {\n menuItem.addEventListener('click', (e) => {\n e.stopPropagation();\n onAction(item);\n });\n }\n\n menu.appendChild(menuItem);\n }\n\n return menu;\n}\n\n/**\n * Position the menu at the given viewport coordinates.\n * Menu is rendered in document.body with fixed positioning for top-layer behavior.\n *\n * @param menu - The menu element to position\n * @param x - Desired X coordinate (viewport)\n * @param y - Desired Y coordinate (viewport)\n */\nexport function positionMenu(menu: HTMLElement, x: number, y: number): void {\n // Use fixed positioning for top-layer behavior\n menu.style.position = 'fixed';\n menu.style.left = `${x}px`;\n menu.style.top = `${y}px`;\n menu.style.visibility = 'hidden';\n menu.style.zIndex = '10000';\n\n // Force layout to get dimensions\n const menuRect = menu.getBoundingClientRect();\n\n // Calculate visible area within viewport\n const viewportWidth = window.innerWidth;\n const viewportHeight = window.innerHeight;\n\n let left = x;\n let top = y;\n\n // Check if menu overflows right edge of viewport\n if (x + menuRect.width > viewportWidth) {\n left = x - menuRect.width;\n }\n // Check if menu overflows bottom edge of viewport\n if (y + menuRect.height > viewportHeight) {\n top = y - menuRect.height;\n }\n\n // Ensure we don't go negative\n left = Math.max(0, left);\n top = Math.max(0, top);\n\n menu.style.left = `${left}px`;\n menu.style.top = `${top}px`;\n menu.style.visibility = 'visible';\n}\n","/**\n * Context Menu Plugin (Class-based)\n *\n * Provides right-click context menu functionality for tbw-grid.\n * Supports custom menu items, submenus, icons, shortcuts, and dynamic item generation.\n */\n\nimport { BaseGridPlugin } from '../../core/plugin/base-plugin';\nimport contextMenuStyles from './context-menu.css?inline';\nimport { buildMenuItems, createMenuElement, positionMenu } from './menu';\nimport type { ContextMenuConfig, ContextMenuItem, ContextMenuParams } from './types';\n\n/** Global click handler reference for cleanup */\nlet globalClickHandler: ((e: Event) => void) | null = null;\n/** Global keydown handler reference for cleanup */\nlet globalKeydownHandler: ((e: KeyboardEvent) => void) | null = null;\n/** Global stylesheet for context menu (injected once) */\nlet globalStyleSheet: HTMLStyleElement | null = null;\n/** Reference count for instances using global handlers */\nlet globalHandlerRefCount = 0;\n\n/** Default menu items when none are configured */\nconst defaultItems: ContextMenuItem[] = [\n {\n id: 'copy',\n name: 'Copy',\n shortcut: 'Ctrl+C',\n action: (params) => {\n const grid = (params as ContextMenuParams & { grid?: { plugins?: { clipboard?: { copy?: () => void } } } }).grid;\n grid?.plugins?.clipboard?.copy?.();\n },\n },\n { separator: true, id: 'sep1', name: '' },\n {\n id: 'export-csv',\n name: 'Export CSV',\n action: (params) => {\n const grid = (params as ContextMenuParams & { grid?: { plugins?: { export?: { exportCsv?: () => void } } } })\n .grid;\n grid?.plugins?.export?.exportCsv?.();\n },\n },\n];\n\n/**\n * Context Menu Plugin for tbw-grid\n *\n * Adds a customizable right-click menu to grid cells. Build anything from simple\n * copy/paste actions to complex nested menus with conditional visibility, icons,\n * and keyboard shortcuts.\n *\n * ## Installation\n *\n * ```ts\n * import { ContextMenuPlugin } from '@toolbox-web/grid/plugins/context-menu';\n * ```\n *\n * ## Menu Item Structure\n *\n * | Property | Type | Description |\n * |----------|------|-------------|\n * | `id` | `string` | Unique item identifier |\n * | `name` | `string` | Display label |\n * | `icon` | `string` | Icon class or HTML |\n * | `shortcut` | `string` | Keyboard shortcut hint |\n * | `action` | `(params) => void` | Click handler |\n * | `disabled` | `boolean \\| (params) => boolean` | Disable condition |\n * | `visible` | `boolean \\| (params) => boolean` | Visibility condition |\n * | `items` | `MenuItem[]` | Submenu items |\n * | `separator` | `boolean` | Create a divider line |\n *\n * ## Menu Context (params)\n *\n * | Property | Type | Description |\n * |----------|------|-------------|\n * | `rowIndex` | `number` | Clicked row index |\n * | `colIndex` | `number` | Clicked column index |\n * | `field` | `string` | Column field name |\n * | `value` | `any` | Cell value |\n * | `row` | `any` | Full row data |\n * | `column` | `ColumnConfig` | Column configuration |\n *\n * ## CSS Custom Properties\n *\n * | Property | Default | Description |\n * |----------|---------|-------------|\n * | `--tbw-context-menu-bg` | `var(--tbw-color-panel-bg)` | Menu background |\n * | `--tbw-context-menu-fg` | `var(--tbw-color-fg)` | Menu text color |\n * | `--tbw-context-menu-hover` | `var(--tbw-color-row-hover)` | Item hover background |\n *\n * @example Basic Context Menu\n * ```ts\n * import '@toolbox-web/grid';\n * import { ContextMenuPlugin } from '@toolbox-web/grid/plugins/context-menu';\n *\n * grid.gridConfig = {\n * plugins: [\n * new ContextMenuPlugin({\n * items: [\n * { id: 'copy', name: 'Copy', shortcut: 'Ctrl+C', action: (ctx) => navigator.clipboard.writeText(ctx.value) },\n * { separator: true, id: 'sep1', name: '' },\n * { id: 'delete', name: 'Delete', action: (ctx) => removeRow(ctx.rowIndex) },\n * ],\n * }),\n * ],\n * };\n * ```\n *\n * @example Conditional Menu Items\n * ```ts\n * new ContextMenuPlugin({\n * items: [\n * { id: 'edit', name: 'Edit', visible: (ctx) => ctx.column.editable === true },\n * { id: 'delete', name: 'Delete', disabled: (ctx) => ctx.row.locked === true },\n * ],\n * })\n * ```\n *\n * @see {@link ContextMenuConfig} for configuration options\n * @see {@link ContextMenuItem} for menu item structure\n * @see {@link ContextMenuParams} for action callback parameters\n *\n * @internal Extends BaseGridPlugin\n */\nexport class ContextMenuPlugin extends BaseGridPlugin<ContextMenuConfig> {\n /** @internal */\n readonly name = 'contextMenu';\n\n /** @internal */\n protected override get defaultConfig(): Partial<ContextMenuConfig> {\n return {\n items: defaultItems,\n };\n }\n\n // #region Internal State\n private isOpen = false;\n private position = { x: 0, y: 0 };\n private params: ContextMenuParams | null = null;\n private menuElement: HTMLElement | null = null;\n // #endregion\n\n // #region Lifecycle\n\n /** @internal */\n override attach(grid: import('../../core/plugin/base-plugin').GridElement): void {\n super.attach(grid);\n this.installGlobalHandlers();\n globalHandlerRefCount++;\n }\n\n /** @internal */\n override detach(): void {\n if (this.menuElement) {\n this.menuElement.remove();\n this.menuElement = null;\n }\n this.isOpen = false;\n this.params = null;\n this.uninstallGlobalHandlers();\n }\n // #endregion\n\n // #region Private Methods\n\n private installGlobalHandlers(): void {\n // Inject global stylesheet for context menu (once)\n // Only inject if we have valid CSS text (Vite's ?inline import)\n // When importing from source without Vite, the import is a module object, not a string\n if (\n !globalStyleSheet &&\n typeof document !== 'undefined' &&\n typeof contextMenuStyles === 'string' &&\n contextMenuStyles\n ) {\n globalStyleSheet = document.createElement('style');\n globalStyleSheet.id = 'tbw-context-menu-styles';\n globalStyleSheet.textContent = contextMenuStyles;\n document.head.appendChild(globalStyleSheet);\n }\n\n // Close menu on click outside\n if (!globalClickHandler) {\n globalClickHandler = () => {\n const menus = document.querySelectorAll('.tbw-context-menu');\n menus.forEach((menu) => menu.remove());\n };\n document.addEventListener('click', globalClickHandler);\n }\n\n // Close on escape\n if (!globalKeydownHandler) {\n globalKeydownHandler = (e: KeyboardEvent) => {\n if (e.key === 'Escape') {\n const menus = document.querySelectorAll('.tbw-context-menu');\n menus.forEach((menu) => menu.remove());\n }\n };\n document.addEventListener('keydown', globalKeydownHandler);\n }\n }\n\n /**\n * Clean up global handlers when the last instance detaches.\n * Uses reference counting to ensure handlers persist while any grid uses the plugin.\n */\n private uninstallGlobalHandlers(): void {\n globalHandlerRefCount--;\n if (globalHandlerRefCount > 0) return;\n\n // Last instance - clean up all global resources\n if (globalClickHandler) {\n document.removeEventListener('click', globalClickHandler);\n globalClickHandler = null;\n }\n if (globalKeydownHandler) {\n document.removeEventListener('keydown', globalKeydownHandler);\n globalKeydownHandler = null;\n }\n if (globalStyleSheet) {\n globalStyleSheet.remove();\n globalStyleSheet = null;\n }\n }\n // #endregion\n\n // #region Hooks\n\n /** @internal */\n override afterRender(): void {\n const gridEl = this.gridElement;\n if (!gridEl) return;\n\n const container = gridEl.children[0];\n if (!container) return;\n\n // Check if handler already attached\n if (container.getAttribute('data-context-menu-bound') === 'true') return;\n container.setAttribute('data-context-menu-bound', 'true');\n\n container.addEventListener('contextmenu', (e: Event) => {\n const event = e as MouseEvent;\n event.preventDefault();\n\n const target = event.target as HTMLElement;\n const cell = target.closest('[data-row][data-col]');\n const header = target.closest('.header-cell');\n\n let params: ContextMenuParams;\n\n if (cell) {\n const rowIndex = parseInt(cell.getAttribute('data-row') ?? '-1', 10);\n const colIndex = parseInt(cell.getAttribute('data-col') ?? '-1', 10);\n const column = this.columns[colIndex];\n const row = this.rows[rowIndex];\n\n params = {\n row,\n rowIndex,\n column,\n columnIndex: colIndex,\n field: column?.field ?? '',\n value: row?.[column?.field as keyof typeof row] ?? null,\n isHeader: false,\n event,\n };\n } else if (header) {\n const colIndex = parseInt(header.getAttribute('data-col') ?? '-1', 10);\n const column = this.columns[colIndex];\n\n params = {\n row: null,\n rowIndex: -1,\n column,\n columnIndex: colIndex,\n field: column?.field ?? '',\n value: null,\n isHeader: true,\n event,\n };\n } else {\n return;\n }\n\n this.params = params;\n this.position = { x: event.clientX, y: event.clientY };\n\n const items = buildMenuItems(this.config.items ?? defaultItems, params);\n if (!items.length) return;\n\n if (this.menuElement) {\n this.menuElement.remove();\n }\n\n this.menuElement = createMenuElement(\n items,\n params,\n (item) => {\n if (item.action) {\n item.action(params);\n }\n this.menuElement?.remove();\n this.menuElement = null;\n this.isOpen = false;\n },\n this.gridIcons.submenuArrow,\n );\n\n document.body.appendChild(this.menuElement);\n positionMenu(this.menuElement, event.clientX, event.clientY);\n this.isOpen = true;\n\n this.emit('context-menu-open', { params, items });\n });\n }\n // #endregion\n\n // #region Public API\n\n /**\n * Programmatically show the context menu at the specified position.\n * @param x - X coordinate\n * @param y - Y coordinate\n * @param params - Partial context menu parameters\n */\n showMenu(x: number, y: number, params: Partial<ContextMenuParams>): void {\n const fullParams: ContextMenuParams = {\n row: params.row ?? null,\n rowIndex: params.rowIndex ?? -1,\n column: params.column ?? null,\n columnIndex: params.columnIndex ?? -1,\n field: params.field ?? '',\n value: params.value ?? null,\n isHeader: params.isHeader ?? false,\n event: params.event ?? new MouseEvent('contextmenu'),\n };\n\n const items = buildMenuItems(this.config.items ?? defaultItems, fullParams);\n\n if (this.menuElement) {\n this.menuElement.remove();\n }\n\n this.menuElement = createMenuElement(\n items,\n fullParams,\n (item) => {\n if (item.action) item.action(fullParams);\n this.menuElement?.remove();\n this.menuElement = null;\n this.isOpen = false;\n },\n this.gridIcons.submenuArrow,\n );\n\n document.body.appendChild(this.menuElement);\n positionMenu(this.menuElement, x, y);\n this.isOpen = true;\n }\n\n /**\n * Hide the context menu.\n */\n hideMenu(): void {\n if (this.menuElement) {\n this.menuElement.remove();\n this.menuElement = null;\n this.isOpen = false;\n }\n }\n\n /**\n * Check if the context menu is currently open.\n * @returns Whether the menu is open\n */\n isMenuOpen(): boolean {\n return this.isOpen;\n }\n // #endregion\n\n // Styles are injected globally via installGlobalHandlers() since menu renders in document.body\n}\n"],"names":["buildMenuItems","items","params","item","isItemDisabled","createMenuElement","onAction","submenuArrow","DEFAULT_GRID_ICONS","menu","separator","menuItem","disabled","icon","label","shortcut","arrow","subMenuItems","subMenu","e","positionMenu","x","y","menuRect","viewportWidth","viewportHeight","left","top","globalClickHandler","globalKeydownHandler","globalStyleSheet","globalHandlerRefCount","defaultItems","ContextMenuPlugin","BaseGridPlugin","grid","contextMenuStyles","gridEl","container","event","target","cell","header","rowIndex","colIndex","column","row","fullParams"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"context-menu.umd.js","sources":["../../../../../libs/grid/src/lib/plugins/context-menu/menu.ts","../../../../../libs/grid/src/lib/plugins/context-menu/ContextMenuPlugin.ts"],"sourcesContent":["/**\n * Context Menu Rendering Logic\n *\n * Pure functions for building and positioning context menus.\n */\n\nimport type { IconValue } from '../../core/types';\nimport { DEFAULT_GRID_ICONS } from '../../core/types';\nimport type { ContextMenuItem, ContextMenuParams } from './types';\n\n/**\n * Build the visible menu items by resolving dynamic items and filtering hidden ones.\n *\n * @param items - Menu items configuration (array or factory function)\n * @param params - Context menu parameters for evaluating dynamic properties\n * @returns Filtered array of visible menu items\n */\nexport function buildMenuItems(\n items: ContextMenuItem[] | ((params: ContextMenuParams) => ContextMenuItem[]),\n params: ContextMenuParams\n): ContextMenuItem[] {\n const menuItems = typeof items === 'function' ? items(params) : items;\n\n return menuItems.filter((item) => {\n if (item.hidden === true) return false;\n if (typeof item.hidden === 'function' && item.hidden(params)) return false;\n return true;\n });\n}\n\n/**\n * Check if a menu item is disabled.\n *\n * @param item - The menu item to check\n * @param params - Context menu parameters for evaluating dynamic disabled state\n * @returns True if the item is disabled\n */\nexport function isItemDisabled(item: ContextMenuItem, params: ContextMenuParams): boolean {\n if (item.disabled === true) return true;\n if (typeof item.disabled === 'function') return item.disabled(params);\n return false;\n}\n\n/**\n * Create the menu DOM element from a list of menu items.\n *\n * @param items - Array of menu items to render\n * @param params - Context menu parameters for evaluating dynamic properties\n * @param onAction - Callback when a menu item action is triggered\n * @param submenuArrow - Optional custom submenu arrow icon\n * @returns The created menu element\n */\nexport function createMenuElement(\n items: ContextMenuItem[],\n params: ContextMenuParams,\n onAction: (item: ContextMenuItem) => void,\n submenuArrow: IconValue = DEFAULT_GRID_ICONS.submenuArrow\n): HTMLElement {\n const menu = document.createElement('div');\n menu.className = 'tbw-context-menu';\n menu.setAttribute('role', 'menu');\n\n for (const item of items) {\n if (item.separator) {\n const separator = document.createElement('div');\n separator.className = 'tbw-context-menu-separator';\n separator.setAttribute('role', 'separator');\n menu.appendChild(separator);\n continue;\n }\n\n const menuItem = document.createElement('div');\n menuItem.className = 'tbw-context-menu-item';\n if (item.cssClass) menuItem.classList.add(item.cssClass);\n menuItem.setAttribute('role', 'menuitem');\n menuItem.setAttribute('data-id', item.id);\n\n const disabled = isItemDisabled(item, params);\n if (disabled) {\n menuItem.classList.add('disabled');\n menuItem.setAttribute('aria-disabled', 'true');\n }\n\n if (item.icon) {\n const icon = document.createElement('span');\n icon.className = 'tbw-context-menu-icon';\n icon.innerHTML = item.icon;\n menuItem.appendChild(icon);\n }\n\n const label = document.createElement('span');\n label.className = 'tbw-context-menu-label';\n label.textContent = item.name;\n menuItem.appendChild(label);\n\n if (item.shortcut) {\n const shortcut = document.createElement('span');\n shortcut.className = 'tbw-context-menu-shortcut';\n shortcut.textContent = item.shortcut;\n menuItem.appendChild(shortcut);\n }\n\n if (item.subMenu?.length) {\n const arrow = document.createElement('span');\n arrow.className = 'tbw-context-menu-arrow';\n // Use provided submenu arrow icon (string or HTMLElement)\n if (typeof submenuArrow === 'string') {\n arrow.innerHTML = submenuArrow;\n } else if (submenuArrow instanceof HTMLElement) {\n arrow.appendChild(submenuArrow.cloneNode(true));\n }\n menuItem.appendChild(arrow);\n\n // Add submenu on hover\n menuItem.addEventListener('mouseenter', () => {\n const existingSubMenu = menuItem.querySelector('.tbw-context-menu');\n if (existingSubMenu) return;\n if (!item.subMenu) return;\n\n const subMenuItems = buildMenuItems(item.subMenu, params);\n const subMenu = createMenuElement(subMenuItems, params, onAction, submenuArrow);\n subMenu.classList.add('tbw-context-submenu');\n subMenu.style.position = 'absolute';\n subMenu.style.left = '100%';\n subMenu.style.top = '0';\n menuItem.style.position = 'relative';\n menuItem.appendChild(subMenu);\n });\n\n menuItem.addEventListener('mouseleave', () => {\n const subMenu = menuItem.querySelector('.tbw-context-menu');\n if (subMenu) subMenu.remove();\n });\n }\n\n if (!disabled && item.action && !item.subMenu) {\n menuItem.addEventListener('click', (e) => {\n e.stopPropagation();\n onAction(item);\n });\n }\n\n menu.appendChild(menuItem);\n }\n\n return menu;\n}\n\n/**\n * Position the menu at the given viewport coordinates.\n * Menu is rendered in document.body with fixed positioning for top-layer behavior.\n *\n * @param menu - The menu element to position\n * @param x - Desired X coordinate (viewport)\n * @param y - Desired Y coordinate (viewport)\n */\nexport function positionMenu(menu: HTMLElement, x: number, y: number): void {\n // Use fixed positioning for top-layer behavior\n menu.style.position = 'fixed';\n menu.style.left = `${x}px`;\n menu.style.top = `${y}px`;\n menu.style.visibility = 'hidden';\n menu.style.zIndex = '10000';\n\n // Force layout to get dimensions\n const menuRect = menu.getBoundingClientRect();\n\n // Calculate visible area within viewport\n const viewportWidth = window.innerWidth;\n const viewportHeight = window.innerHeight;\n\n let left = x;\n let top = y;\n\n // Check if menu overflows right edge of viewport\n if (x + menuRect.width > viewportWidth) {\n left = x - menuRect.width;\n }\n // Check if menu overflows bottom edge of viewport\n if (y + menuRect.height > viewportHeight) {\n top = y - menuRect.height;\n }\n\n // Ensure we don't go negative\n left = Math.max(0, left);\n top = Math.max(0, top);\n\n menu.style.left = `${left}px`;\n menu.style.top = `${top}px`;\n menu.style.visibility = 'visible';\n}\n","/**\n * Context Menu Plugin (Class-based)\n *\n * Provides right-click context menu functionality for tbw-grid.\n * Supports custom menu items, submenus, icons, shortcuts, and dynamic item generation.\n */\n\nimport { BaseGridPlugin } from '../../core/plugin/base-plugin';\nimport contextMenuStyles from './context-menu.css?inline';\nimport { buildMenuItems, createMenuElement, positionMenu } from './menu';\nimport type { ContextMenuConfig, ContextMenuItem, ContextMenuParams } from './types';\n\n/** Global click handler reference for cleanup */\nlet globalClickHandler: ((e: Event) => void) | null = null;\n/** Global keydown handler reference for cleanup */\nlet globalKeydownHandler: ((e: KeyboardEvent) => void) | null = null;\n/** Global stylesheet for context menu (injected once) */\nlet globalStyleSheet: HTMLStyleElement | null = null;\n/** Reference count for instances using global handlers */\nlet globalHandlerRefCount = 0;\n\n/** Default menu items when none are configured */\nconst defaultItems: ContextMenuItem[] = [\n {\n id: 'copy',\n name: 'Copy',\n shortcut: 'Ctrl+C',\n action: (params) => {\n const grid = (params as ContextMenuParams & { grid?: { plugins?: { clipboard?: { copy?: () => void } } } }).grid;\n grid?.plugins?.clipboard?.copy?.();\n },\n },\n { separator: true, id: 'sep1', name: '' },\n {\n id: 'export-csv',\n name: 'Export CSV',\n action: (params) => {\n const grid = (params as ContextMenuParams & { grid?: { plugins?: { export?: { exportCsv?: () => void } } } })\n .grid;\n grid?.plugins?.export?.exportCsv?.();\n },\n },\n];\n\n/**\n * Context Menu Plugin for tbw-grid\n *\n * Adds a customizable right-click menu to grid cells. Build anything from simple\n * copy/paste actions to complex nested menus with conditional visibility, icons,\n * and keyboard shortcuts.\n *\n * ## Installation\n *\n * ```ts\n * import { ContextMenuPlugin } from '@toolbox-web/grid/plugins/context-menu';\n * ```\n *\n * ## Menu Item Structure\n *\n * | Property | Type | Description |\n * |----------|------|-------------|\n * | `id` | `string` | Unique item identifier |\n * | `name` | `string` | Display label |\n * | `icon` | `string` | Icon class or HTML |\n * | `shortcut` | `string` | Keyboard shortcut hint |\n * | `action` | `(params) => void` | Click handler |\n * | `disabled` | `boolean \\| (params) => boolean` | Disable condition |\n * | `visible` | `boolean \\| (params) => boolean` | Visibility condition |\n * | `items` | `MenuItem[]` | Submenu items |\n * | `separator` | `boolean` | Create a divider line |\n *\n * ## Menu Context (params)\n *\n * | Property | Type | Description |\n * |----------|------|-------------|\n * | `rowIndex` | `number` | Clicked row index |\n * | `colIndex` | `number` | Clicked column index |\n * | `field` | `string` | Column field name |\n * | `value` | `any` | Cell value |\n * | `row` | `any` | Full row data |\n * | `column` | `ColumnConfig` | Column configuration |\n *\n * ## CSS Custom Properties\n *\n * | Property | Default | Description |\n * |----------|---------|-------------|\n * | `--tbw-context-menu-bg` | `var(--tbw-color-panel-bg)` | Menu background |\n * | `--tbw-context-menu-fg` | `var(--tbw-color-fg)` | Menu text color |\n * | `--tbw-context-menu-hover` | `var(--tbw-color-row-hover)` | Item hover background |\n *\n * @example Basic Context Menu\n * ```ts\n * import '@toolbox-web/grid';\n * import { ContextMenuPlugin } from '@toolbox-web/grid/plugins/context-menu';\n *\n * grid.gridConfig = {\n * plugins: [\n * new ContextMenuPlugin({\n * items: [\n * { id: 'copy', name: 'Copy', shortcut: 'Ctrl+C', action: (ctx) => navigator.clipboard.writeText(ctx.value) },\n * { separator: true, id: 'sep1', name: '' },\n * { id: 'delete', name: 'Delete', action: (ctx) => removeRow(ctx.rowIndex) },\n * ],\n * }),\n * ],\n * };\n * ```\n *\n * @example Conditional Menu Items\n * ```ts\n * new ContextMenuPlugin({\n * items: [\n * { id: 'edit', name: 'Edit', visible: (ctx) => ctx.column.editable === true },\n * { id: 'delete', name: 'Delete', disabled: (ctx) => ctx.row.locked === true },\n * ],\n * })\n * ```\n *\n * @see {@link ContextMenuConfig} for configuration options\n * @see {@link ContextMenuItem} for menu item structure\n * @see {@link ContextMenuParams} for action callback parameters\n *\n * @internal Extends BaseGridPlugin\n */\nexport class ContextMenuPlugin extends BaseGridPlugin<ContextMenuConfig> {\n /** @internal */\n readonly name = 'contextMenu';\n\n /** @internal */\n protected override get defaultConfig(): Partial<ContextMenuConfig> {\n return {\n items: defaultItems,\n };\n }\n\n // #region Internal State\n private isOpen = false;\n private position = { x: 0, y: 0 };\n private params: ContextMenuParams | null = null;\n private menuElement: HTMLElement | null = null;\n // #endregion\n\n // #region Lifecycle\n\n /** @internal */\n override attach(grid: import('../../core/plugin/base-plugin').GridElement): void {\n super.attach(grid);\n this.installGlobalHandlers();\n globalHandlerRefCount++;\n }\n\n /** @internal */\n override detach(): void {\n if (this.menuElement) {\n this.menuElement.remove();\n this.menuElement = null;\n }\n this.isOpen = false;\n this.params = null;\n this.uninstallGlobalHandlers();\n }\n // #endregion\n\n // #region Private Methods\n\n /**\n * CSS variables to copy from the grid element to the context menu.\n * Includes both base variables and context-menu specific overrides.\n */\n private static readonly CSS_VARS_TO_COPY = [\n // Base palette (for themes that only set base vars)\n '--tbw-color-panel-bg',\n '--tbw-color-fg',\n '--tbw-color-fg-muted',\n '--tbw-color-border',\n '--tbw-color-row-hover',\n '--tbw-color-shadow',\n '--tbw-color-danger',\n '--tbw-border-radius',\n '--tbw-font-family',\n '--tbw-font-size-sm',\n '--tbw-font-size-xs',\n '--tbw-font-size-2xs',\n '--tbw-spacing-xs',\n '--tbw-icon-size',\n '--tbw-menu-min-width',\n '--tbw-menu-item-padding',\n '--tbw-menu-item-gap',\n // Context menu specific overrides\n '--tbw-context-menu-bg',\n '--tbw-context-menu-fg',\n '--tbw-context-menu-border',\n '--tbw-context-menu-radius',\n '--tbw-context-menu-shadow',\n '--tbw-context-menu-hover',\n '--tbw-context-menu-danger',\n '--tbw-context-menu-muted',\n '--tbw-context-menu-min-width',\n '--tbw-context-menu-font-size',\n '--tbw-context-menu-font-family',\n '--tbw-context-menu-item-padding',\n '--tbw-context-menu-item-gap',\n '--tbw-context-menu-icon-size',\n '--tbw-context-menu-shortcut-size',\n '--tbw-context-menu-arrow-size',\n ];\n\n /**\n * Copy CSS custom properties from the grid element to the menu element.\n * This allows the context menu (appended to document.body) to inherit\n * theme variables set on tbw-grid.\n */\n private copyGridStyles(menuElement: HTMLElement): void {\n const gridEl = this.gridElement;\n if (!gridEl) return;\n\n const computed = getComputedStyle(gridEl);\n const styles: string[] = [];\n\n for (const varName of ContextMenuPlugin.CSS_VARS_TO_COPY) {\n const value = computed.getPropertyValue(varName).trim();\n if (value) {\n styles.push(`${varName}: ${value}`);\n }\n }\n\n if (styles.length > 0) {\n // Append to existing inline styles (don't overwrite)\n const existing = menuElement.getAttribute('style') || '';\n menuElement.setAttribute('style', existing + styles.join('; ') + ';');\n }\n }\n\n private installGlobalHandlers(): void {\n // Inject global stylesheet for context menu (once)\n // Only inject if we have valid CSS text (Vite's ?inline import)\n // When importing from source without Vite, the import is a module object, not a string\n if (\n !globalStyleSheet &&\n typeof document !== 'undefined' &&\n typeof contextMenuStyles === 'string' &&\n contextMenuStyles\n ) {\n globalStyleSheet = document.createElement('style');\n globalStyleSheet.id = 'tbw-context-menu-styles';\n globalStyleSheet.textContent = contextMenuStyles;\n document.head.appendChild(globalStyleSheet);\n }\n\n // Close menu on click outside\n if (!globalClickHandler) {\n globalClickHandler = () => {\n const menus = document.querySelectorAll('.tbw-context-menu');\n menus.forEach((menu) => menu.remove());\n };\n document.addEventListener('click', globalClickHandler);\n }\n\n // Close on escape\n if (!globalKeydownHandler) {\n globalKeydownHandler = (e: KeyboardEvent) => {\n if (e.key === 'Escape') {\n const menus = document.querySelectorAll('.tbw-context-menu');\n menus.forEach((menu) => menu.remove());\n }\n };\n document.addEventListener('keydown', globalKeydownHandler);\n }\n }\n\n /**\n * Clean up global handlers when the last instance detaches.\n * Uses reference counting to ensure handlers persist while any grid uses the plugin.\n */\n private uninstallGlobalHandlers(): void {\n globalHandlerRefCount--;\n if (globalHandlerRefCount > 0) return;\n\n // Last instance - clean up all global resources\n if (globalClickHandler) {\n document.removeEventListener('click', globalClickHandler);\n globalClickHandler = null;\n }\n if (globalKeydownHandler) {\n document.removeEventListener('keydown', globalKeydownHandler);\n globalKeydownHandler = null;\n }\n if (globalStyleSheet) {\n globalStyleSheet.remove();\n globalStyleSheet = null;\n }\n }\n // #endregion\n\n // #region Hooks\n\n /** @internal */\n override afterRender(): void {\n const gridEl = this.gridElement;\n if (!gridEl) return;\n\n const container = gridEl.children[0];\n if (!container) return;\n\n // Check if handler already attached\n if (container.getAttribute('data-context-menu-bound') === 'true') return;\n container.setAttribute('data-context-menu-bound', 'true');\n\n container.addEventListener('contextmenu', (e: Event) => {\n const event = e as MouseEvent;\n event.preventDefault();\n\n const target = event.target as HTMLElement;\n const cell = target.closest('[data-row][data-col]');\n const header = target.closest('.header-cell');\n\n let params: ContextMenuParams;\n\n if (cell) {\n const rowIndex = parseInt(cell.getAttribute('data-row') ?? '-1', 10);\n const colIndex = parseInt(cell.getAttribute('data-col') ?? '-1', 10);\n const column = this.columns[colIndex];\n const row = this.rows[rowIndex];\n\n params = {\n row,\n rowIndex,\n column,\n columnIndex: colIndex,\n field: column?.field ?? '',\n value: row?.[column?.field as keyof typeof row] ?? null,\n isHeader: false,\n event,\n };\n } else if (header) {\n const colIndex = parseInt(header.getAttribute('data-col') ?? '-1', 10);\n const column = this.columns[colIndex];\n\n params = {\n row: null,\n rowIndex: -1,\n column,\n columnIndex: colIndex,\n field: column?.field ?? '',\n value: null,\n isHeader: true,\n event,\n };\n } else {\n return;\n }\n\n this.params = params;\n this.position = { x: event.clientX, y: event.clientY };\n\n const items = buildMenuItems(this.config.items ?? defaultItems, params);\n if (!items.length) return;\n\n if (this.menuElement) {\n this.menuElement.remove();\n }\n\n this.menuElement = createMenuElement(\n items,\n params,\n (item) => {\n if (item.action) {\n item.action(params);\n }\n this.menuElement?.remove();\n this.menuElement = null;\n this.isOpen = false;\n },\n this.gridIcons.submenuArrow,\n );\n\n document.body.appendChild(this.menuElement);\n this.copyGridStyles(this.menuElement);\n positionMenu(this.menuElement, event.clientX, event.clientY);\n this.isOpen = true;\n\n this.emit('context-menu-open', { params, items });\n });\n }\n // #endregion\n\n // #region Public API\n\n /**\n * Programmatically show the context menu at the specified position.\n * @param x - X coordinate\n * @param y - Y coordinate\n * @param params - Partial context menu parameters\n */\n showMenu(x: number, y: number, params: Partial<ContextMenuParams>): void {\n const fullParams: ContextMenuParams = {\n row: params.row ?? null,\n rowIndex: params.rowIndex ?? -1,\n column: params.column ?? null,\n columnIndex: params.columnIndex ?? -1,\n field: params.field ?? '',\n value: params.value ?? null,\n isHeader: params.isHeader ?? false,\n event: params.event ?? new MouseEvent('contextmenu'),\n };\n\n const items = buildMenuItems(this.config.items ?? defaultItems, fullParams);\n\n if (this.menuElement) {\n this.menuElement.remove();\n }\n\n this.menuElement = createMenuElement(\n items,\n fullParams,\n (item) => {\n if (item.action) item.action(fullParams);\n this.menuElement?.remove();\n this.menuElement = null;\n this.isOpen = false;\n },\n this.gridIcons.submenuArrow,\n );\n\n document.body.appendChild(this.menuElement);\n this.copyGridStyles(this.menuElement);\n positionMenu(this.menuElement, x, y);\n this.isOpen = true;\n }\n\n /**\n * Hide the context menu.\n */\n hideMenu(): void {\n if (this.menuElement) {\n this.menuElement.remove();\n this.menuElement = null;\n this.isOpen = false;\n }\n }\n\n /**\n * Check if the context menu is currently open.\n * @returns Whether the menu is open\n */\n isMenuOpen(): boolean {\n return this.isOpen;\n }\n // #endregion\n\n // Styles are injected globally via installGlobalHandlers() since menu renders in document.body\n}\n"],"names":["buildMenuItems","items","params","item","isItemDisabled","createMenuElement","onAction","submenuArrow","DEFAULT_GRID_ICONS","menu","separator","menuItem","disabled","icon","label","shortcut","arrow","subMenuItems","subMenu","e","positionMenu","x","y","menuRect","viewportWidth","viewportHeight","left","top","globalClickHandler","globalKeydownHandler","globalStyleSheet","globalHandlerRefCount","defaultItems","ContextMenuPlugin","BaseGridPlugin","grid","menuElement","gridEl","computed","styles","varName","value","existing","contextMenuStyles","container","event","target","cell","header","rowIndex","colIndex","column","row","fullParams"],"mappings":"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"}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
(function(d,l){typeof exports=="object"&&typeof module<"u"?l(exports,require("../../core/plugin/base-plugin")):typeof define=="function"&&define.amd?define(["exports","../../core/plugin/base-plugin"],l):(d=typeof globalThis<"u"?globalThis:d||self,l(d.TbwGridPlugin_multiSort={},d.TbwGrid))})(this,(function(d,l){"use strict";function
|
|
1
|
+
(function(d,l){typeof exports=="object"&&typeof module<"u"?l(exports,require("../../core/plugin/base-plugin")):typeof define=="function"&&define.amd?define(["exports","../../core/plugin/base-plugin"],l):(d=typeof globalThis<"u"?globalThis:d||self,l(d.TbwGridPlugin_multiSort={},d.TbwGrid))})(this,(function(d,l){"use strict";function b(r,t,i){return t.length?[...r].sort((n,e)=>{for(const o of t){const c=i.find(u=>u.field===o.field)?.sortComparator??S,m=n[o.field],p=e[o.field],s=c(m,p,n,e);if(s!==0)return o.direction==="asc"?s:-s}return 0}):[...r]}function S(r,t){return r==null&&t==null?0:r==null?1:t==null?-1:typeof r=="number"&&typeof t=="number"?r-t:r instanceof Date&&t instanceof Date?r.getTime()-t.getTime():typeof r=="boolean"&&typeof t=="boolean"?r===t?0:r?-1:1:String(r).localeCompare(String(t))}function y(r,t,i,n){const e=r.find(o=>o.field===t);return i?e?e.direction==="asc"?r.map(o=>o.field===t?{...o,direction:"desc"}:o):r.filter(o=>o.field!==t):r.length<n?[...r,{field:t,direction:"asc"}]:r:e?.direction==="asc"?[{field:t,direction:"desc"}]:e?.direction==="desc"?[]:[{field:t,direction:"asc"}]}function g(r,t){const i=r.findIndex(n=>n.field===t);return i>=0?i+1:void 0}function h(r,t){return r.find(i=>i.field===t)?.direction}const M='@layer tbw-plugins{.header-cell[data-sort=asc]:after{content:"↑";margin-left:var(--tbw-spacing-xs, .25em);opacity:.8}.header-cell[data-sort=desc]:after{content:"↓";margin-left:var(--tbw-spacing-xs, .25em);opacity:.8}.sort-indicator{margin-left:var(--tbw-spacing-xs, .25em);opacity:.8}.sort-index{font-size:var(--tbw-font-size-2xs, .7em);background:var(--tbw-multi-sort-badge-bg, var(--tbw-color-panel-bg));color:var(--tbw-multi-sort-badge-color, var(--tbw-color-fg));border-radius:50%;width:var(--tbw-multi-sort-badge-size, 1em);height:var(--tbw-multi-sort-badge-size, 1em);display:inline-flex;align-items:center;justify-content:center;margin-left:var(--tbw-spacing-xs, .125em);font-weight:600}}';class w extends l.BaseGridPlugin{name="multiSort";styles=M;get defaultConfig(){return{maxSortColumns:3,showSortIndex:!0}}sortModel=[];detach(){this.sortModel=[]}processRows(t){return this.sortModel.length===0?[...t]:b([...t],this.sortModel,[...this.columns])}onHeaderClick(t){if(!this.columns.find(o=>o.field===t.field)?.sortable)return!1;const n=t.originalEvent.shiftKey,e=this.config.maxSortColumns??3;return this.sortModel=y(this.sortModel,t.field,n,e),this.emit("sort-change",{sortModel:[...this.sortModel]}),this.requestRender(),!0}afterRender(){const t=this.gridElement;if(!t)return;const i=this.config.showSortIndex!==!1;t.querySelectorAll(".header-row .cell[data-field]").forEach(e=>{const o=e.getAttribute("data-field");if(!o)return;const f=g(this.sortModel,o),c=h(this.sortModel,o);if(e.querySelector(".sort-index")?.remove(),c){e.querySelector('[part~="sort-indicator"], .sort-indicator')?.remove(),e.setAttribute("data-sort",c);const s=document.createElement("span");s.className="sort-indicator",this.setIcon(s,this.resolveIcon(c==="asc"?"sortAsc":"sortDesc"));const u=e.querySelector(".tbw-filter-btn"),v=e.querySelector(".resize-handle"),x=u??v;if(x?e.insertBefore(s,x):e.appendChild(s),i&&this.sortModel.length>1&&f!==void 0){const a=document.createElement("span");a.className="sort-index",a.textContent=String(f),s.nextSibling?e.insertBefore(a,s.nextSibling):e.appendChild(a)}}else e.removeAttribute("data-sort")})}getSortModel(){return[...this.sortModel]}setSortModel(t){this.sortModel=[...t],this.emit("sort-change",{sortModel:[...t]}),this.requestRender()}clearSort(){this.sortModel=[],this.emit("sort-change",{sortModel:[]}),this.requestRender()}getSortIndex(t){return g(this.sortModel,t)}getSortDirection(t){return h(this.sortModel,t)}getColumnState(t){const i=this.sortModel.findIndex(e=>e.field===t);return i===-1?void 0:{sort:{direction:this.sortModel[i].direction,priority:i}}}applyColumnState(t,i){if(!i.sort){this.sortModel=this.sortModel.filter(o=>o.field!==t);return}const n=this.sortModel.findIndex(o=>o.field===t),e={field:t,direction:i.sort.direction};n!==-1?this.sortModel[n]=e:this.sortModel.splice(i.sort.priority,0,e)}}d.MultiSortPlugin=w,Object.defineProperty(d,Symbol.toStringTag,{value:"Module"})}));
|
|
2
2
|
//# sourceMappingURL=multi-sort.umd.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"multi-sort.umd.js","sources":["../../../../../libs/grid/src/lib/plugins/multi-sort/multi-sort.ts","../../../../../libs/grid/src/lib/plugins/multi-sort/MultiSortPlugin.ts"],"sourcesContent":["/**\n * Multi-Sort Core Logic\n *\n * Pure functions for multi-column sorting operations.\n */\n\nimport type { ColumnConfig } from '../../core/types';\nimport type { SortModel } from './types';\n\n/**\n * Apply multiple sort columns to a row array.\n * Sorts are applied in order - first sort has highest priority.\n *\n * @param rows - Array of row objects to sort\n * @param sorts - Ordered array of sort configurations\n * @param columns - Column configurations (for custom comparators)\n * @returns New sorted array (does not mutate original)\n */\nexport function applySorts<TRow = unknown>(rows: TRow[], sorts: SortModel[], columns: ColumnConfig<TRow>[]): TRow[] {\n if (!sorts.length) return [...rows];\n\n return [...rows].sort((a, b) => {\n for (const sort of sorts) {\n const col = columns.find((c) => c.field === sort.field);\n const comparator = col?.sortComparator ?? defaultComparator;\n const aVal = (a as Record<string, unknown>)[sort.field];\n const bVal = (b as Record<string, unknown>)[sort.field];\n const result = comparator(aVal, bVal, a, b);\n if (result !== 0) {\n return sort.direction === 'asc' ? result : -result;\n }\n }\n return 0;\n });\n}\n\n/**\n * Default comparator for sorting values.\n * Handles nulls, numbers, dates, and strings.\n *\n * @param a - First value\n * @param b - Second value\n * @returns Comparison result (-1, 0, 1)\n */\nexport function defaultComparator(a: unknown, b: unknown): number {\n // Handle nulls/undefined - push to end\n if (a == null && b == null) return 0;\n if (a == null) return 1;\n if (b == null) return -1;\n\n // Type-aware comparison\n if (typeof a === 'number' && typeof b === 'number') {\n return a - b;\n }\n\n if (a instanceof Date && b instanceof Date) {\n return a.getTime() - b.getTime();\n }\n\n // Boolean comparison\n if (typeof a === 'boolean' && typeof b === 'boolean') {\n return a === b ? 0 : a ? -1 : 1;\n }\n\n // String comparison (fallback)\n return String(a).localeCompare(String(b));\n}\n\n/**\n * Toggle sort state for a field.\n * With shift key: adds/toggles in multi-sort list\n * Without shift key: replaces entire sort with single column\n *\n * @param current - Current sort model\n * @param field - Field to toggle\n * @param shiftKey - Whether shift key is held (multi-sort mode)\n * @param maxColumns - Maximum columns allowed in sort\n * @returns New sort model\n */\nexport function toggleSort(current: SortModel[], field: string, shiftKey: boolean, maxColumns: number): SortModel[] {\n const existing = current.find((s) => s.field === field);\n\n if (shiftKey) {\n // Multi-sort: add/toggle in list\n if (existing) {\n if (existing.direction === 'asc') {\n // Flip to descending\n return current.map((s) => (s.field === field ? { ...s, direction: 'desc' as const } : s));\n } else {\n // Remove from sort\n return current.filter((s) => s.field !== field);\n }\n } else if (current.length < maxColumns) {\n // Add new sort column\n return [...current, { field, direction: 'asc' as const }];\n }\n // Max columns reached, return unchanged\n return current;\n } else {\n // Single sort: replace all\n if (existing?.direction === 'asc') {\n return [{ field, direction: 'desc' }];\n } else if (existing?.direction === 'desc') {\n return [];\n }\n return [{ field, direction: 'asc' }];\n }\n}\n\n/**\n * Get the sort index (1-based) for a field in the sort model.\n * Returns undefined if the field is not in the sort model.\n *\n * @param sortModel - Current sort model\n * @param field - Field to check\n * @returns 1-based index or undefined\n */\nexport function getSortIndex(sortModel: SortModel[], field: string): number | undefined {\n const index = sortModel.findIndex((s) => s.field === field);\n return index >= 0 ? index + 1 : undefined;\n}\n\n/**\n * Get the sort direction for a field in the sort model.\n *\n * @param sortModel - Current sort model\n * @param field - Field to check\n * @returns Sort direction or undefined if not sorted\n */\nexport function getSortDirection(sortModel: SortModel[], field: string): 'asc' | 'desc' | undefined {\n return sortModel.find((s) => s.field === field)?.direction;\n}\n","/**\n * Multi-Sort Plugin (Class-based)\n *\n * Provides multi-column sorting capabilities for tbw-grid.\n * Supports shift+click for adding secondary sort columns.\n */\n\nimport { BaseGridPlugin, HeaderClickEvent } from '../../core/plugin/base-plugin';\nimport type { ColumnState } from '../../core/types';\nimport { applySorts, getSortDirection, getSortIndex, toggleSort } from './multi-sort';\nimport styles from './multi-sort.css?inline';\nimport type { MultiSortConfig, SortModel } from './types';\n\n/**\n * Multi-Sort Plugin for tbw-grid\n *\n * Enables sorting by multiple columns at once—hold Shift and click additional column\n * headers to build up a sort stack. Priority badges show the sort order, so users\n * always know which column takes precedence.\n *\n * ## Installation\n *\n * ```ts\n * import { MultiSortPlugin } from '@toolbox-web/grid/plugins/multi-sort';\n * ```\n *\n * ## Configuration Options\n *\n * | Option | Type | Default | Description |\n * |--------|------|---------|-------------|\n * | `maxSortColumns` | `number` | `3` | Maximum columns to sort by |\n * | `showSortIndex` | `boolean` | `true` | Show sort priority badges |\n * | `initialSort` | `SortModel[]` | - | Pre-configured sort order on load |\n *\n * ## Keyboard Shortcuts\n *\n * | Shortcut | Action |\n * |----------|--------|\n * | `Click header` | Sort by column (clears other sorts) |\n * | `Shift + Click` | Add column to multi-sort stack |\n * | `Ctrl + Click` | Toggle sort direction |\n *\n * ## Events\n *\n * | Event | Detail | Description |\n * |-------|--------|-------------|\n * | `sort-change` | `{ sortModel: SortModel[] }` | Fired when sort changes |\n *\n * ## Programmatic API\n *\n * | Method | Signature | Description |\n * |--------|-----------|-------------|\n * | `setSort` | `(sortModel: SortModel[]) => void` | Set sort programmatically |\n * | `getSortModel` | `() => SortModel[]` | Get current sort model |\n * | `clearSort` | `() => void` | Clear all sorting |\n * | `addSort` | `(field, direction) => void` | Add a column to sort |\n * | `removeSort` | `(field) => void` | Remove a column from sort |\n *\n * @example Basic Multi-Column Sorting\n * ```ts\n * import '@toolbox-web/grid';\n * import { MultiSortPlugin } from '@toolbox-web/grid/plugins/multi-sort';\n *\n * const grid = document.querySelector('tbw-grid');\n * grid.gridConfig = {\n * columns: [\n * { field: 'name', header: 'Name', sortable: true },\n * { field: 'department', header: 'Department', sortable: true },\n * { field: 'salary', header: 'Salary', type: 'number', sortable: true },\n * ],\n * plugins: [new MultiSortPlugin({ maxSortColumns: 3, showSortIndex: true })],\n * };\n *\n * grid.addEventListener('sort-change', (e) => {\n * console.log('Active sorts:', e.detail.sortModel);\n * });\n * ```\n *\n * @example Initial Sort Configuration\n * ```ts\n * new MultiSortPlugin({\n * initialSort: [\n * { field: 'department', direction: 'asc' },\n * { field: 'salary', direction: 'desc' },\n * ],\n * })\n * ```\n *\n * @see {@link MultiSortConfig} for all configuration options\n * @see {@link SortModel} for the sort model structure\n *\n * @internal Extends BaseGridPlugin\n */\nexport class MultiSortPlugin extends BaseGridPlugin<MultiSortConfig> {\n /** @internal */\n readonly name = 'multiSort';\n /** @internal */\n override readonly styles = styles;\n\n /** @internal */\n protected override get defaultConfig(): Partial<MultiSortConfig> {\n return {\n maxSortColumns: 3,\n showSortIndex: true,\n };\n }\n\n // #region Internal State\n private sortModel: SortModel[] = [];\n // #endregion\n\n // #region Lifecycle\n\n /** @internal */\n override detach(): void {\n this.sortModel = [];\n }\n // #endregion\n\n // #region Hooks\n\n /** @internal */\n override processRows(rows: readonly unknown[]): unknown[] {\n if (this.sortModel.length === 0) {\n return [...rows];\n }\n return applySorts([...rows], this.sortModel, [...this.columns]);\n }\n\n /** @internal */\n override onHeaderClick(event: HeaderClickEvent): boolean {\n const column = this.columns.find((c) => c.field === event.field);\n if (!column?.sortable) return false;\n\n const shiftKey = event.originalEvent.shiftKey;\n const maxColumns = this.config.maxSortColumns ?? 3;\n\n this.sortModel = toggleSort(this.sortModel, event.field, shiftKey, maxColumns);\n\n this.emit('sort-change', { sortModel: [...this.sortModel] });\n this.requestRender();\n\n return true;\n }\n\n /** @internal */\n override afterRender(): void {\n const gridEl = this.gridElement;\n if (!gridEl) return;\n\n const showIndex = this.config.showSortIndex !== false;\n\n // Update all sortable header cells with sort indicators\n const headerCells = gridEl.querySelectorAll('.header-row .cell[data-field]');\n headerCells.forEach((cell) => {\n const field = cell.getAttribute('data-field');\n if (!field) return;\n\n const sortIndex = getSortIndex(this.sortModel, field);\n const sortDir = getSortDirection(this.sortModel, field);\n\n // Remove existing sort index badge (always clean up)\n const existingBadge = cell.querySelector('.sort-index');\n existingBadge?.remove();\n\n if (sortDir) {\n // Column is sorted - remove base indicator and add our own\n const existingIndicator = cell.querySelector('[part~=\"sort-indicator\"], .sort-indicator');\n existingIndicator?.remove();\n\n cell.setAttribute('data-sort', sortDir);\n\n // Add sort arrow indicator - insert BEFORE filter button and resize handle\n // to maintain consistent order: [label, sort-indicator, sort-index, filter-btn, resize-handle]\n const indicator = document.createElement('span');\n indicator.className = 'sort-indicator';\n // Use grid-level icons (fall back to defaults)\n this.setIcon(indicator, this.resolveIcon(sortDir === 'asc' ? 'sortAsc' : 'sortDesc'));\n\n // Find insertion point: before filter button or resize handle\n const filterBtn = cell.querySelector('.tbw-filter-btn');\n const resizeHandle = cell.querySelector('.resize-handle');\n const insertBefore = filterBtn ?? resizeHandle;\n if (insertBefore) {\n cell.insertBefore(indicator, insertBefore);\n } else {\n cell.appendChild(indicator);\n }\n\n // Add sort index badge if multiple columns sorted and showSortIndex is enabled\n if (showIndex && this.sortModel.length > 1 && sortIndex !== undefined) {\n const badge = document.createElement('span');\n badge.className = 'sort-index';\n badge.textContent = String(sortIndex);\n // Insert badge right after the indicator\n if (indicator.nextSibling) {\n cell.insertBefore(badge, indicator.nextSibling);\n } else {\n cell.appendChild(badge);\n }\n }\n } else {\n cell.removeAttribute('data-sort');\n // For unsorted columns, leave the base indicator (⇅) alone\n }\n });\n }\n // #endregion\n\n // #region Public API\n\n /**\n * Get the current sort model.\n * @returns Copy of the current sort model\n */\n getSortModel(): SortModel[] {\n return [...this.sortModel];\n }\n\n /**\n * Set the sort model programmatically.\n * @param model - New sort model to apply\n */\n setSortModel(model: SortModel[]): void {\n this.sortModel = [...model];\n this.emit('sort-change', { sortModel: [...model] });\n this.requestRender();\n }\n\n /**\n * Clear all sorting.\n */\n clearSort(): void {\n this.sortModel = [];\n this.emit('sort-change', { sortModel: [] });\n this.requestRender();\n }\n\n /**\n * Get the sort index (1-based) for a specific field.\n * @param field - Field to check\n * @returns 1-based index or undefined if not sorted\n */\n getSortIndex(field: string): number | undefined {\n return getSortIndex(this.sortModel, field);\n }\n\n /**\n * Get the sort direction for a specific field.\n * @param field - Field to check\n * @returns Sort direction or undefined if not sorted\n */\n getSortDirection(field: string): 'asc' | 'desc' | undefined {\n return getSortDirection(this.sortModel, field);\n }\n // #endregion\n\n // #region Column State Hooks\n\n /**\n * Return sort state for a column if it's in the sort model.\n * @internal\n */\n override getColumnState(field: string): Partial<ColumnState> | undefined {\n const index = this.sortModel.findIndex((s) => s.field === field);\n if (index === -1) return undefined;\n\n const sortEntry = this.sortModel[index];\n return {\n sort: {\n direction: sortEntry.direction,\n priority: index,\n },\n };\n }\n\n /**\n * Apply sort state from column state.\n * Rebuilds the sort model from all column states.\n * @internal\n */\n override applyColumnState(field: string, state: ColumnState): void {\n // Only process if the column has sort state\n if (!state.sort) {\n // Remove this field from sortModel if it exists\n this.sortModel = this.sortModel.filter((s) => s.field !== field);\n return;\n }\n\n // Find existing entry or add new one\n const existingIndex = this.sortModel.findIndex((s) => s.field === field);\n const newEntry: SortModel = {\n field,\n direction: state.sort.direction,\n };\n\n if (existingIndex !== -1) {\n // Update existing entry\n this.sortModel[existingIndex] = newEntry;\n } else {\n // Add at the correct priority position\n this.sortModel.splice(state.sort.priority, 0, newEntry);\n }\n\n // Re-sort the model by priority to ensure correct order\n // This is handled after all columns are processed, but we maintain order here\n }\n // #endregion\n}\n"],"names":["applySorts","rows","sorts","columns","a","b","sort","comparator","c","defaultComparator","aVal","bVal","result","toggleSort","current","field","shiftKey","maxColumns","existing","s","getSortIndex","sortModel","index","getSortDirection","MultiSortPlugin","BaseGridPlugin","styles","event","gridEl","showIndex","cell","sortIndex","sortDir","indicator","filterBtn","resizeHandle","insertBefore","badge","model","state","existingIndex","newEntry"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"multi-sort.umd.js","sources":["../../../../../libs/grid/src/lib/plugins/multi-sort/multi-sort.ts","../../../../../libs/grid/src/lib/plugins/multi-sort/MultiSortPlugin.ts"],"sourcesContent":["/**\n * Multi-Sort Core Logic\n *\n * Pure functions for multi-column sorting operations.\n */\n\nimport type { ColumnConfig } from '../../core/types';\nimport type { SortModel } from './types';\n\n/**\n * Apply multiple sort columns to a row array.\n * Sorts are applied in order - first sort has highest priority.\n *\n * @param rows - Array of row objects to sort\n * @param sorts - Ordered array of sort configurations\n * @param columns - Column configurations (for custom comparators)\n * @returns New sorted array (does not mutate original)\n */\nexport function applySorts<TRow = unknown>(rows: TRow[], sorts: SortModel[], columns: ColumnConfig<TRow>[]): TRow[] {\n if (!sorts.length) return [...rows];\n\n return [...rows].sort((a, b) => {\n for (const sort of sorts) {\n const col = columns.find((c) => c.field === sort.field);\n const comparator = col?.sortComparator ?? defaultComparator;\n const aVal = (a as Record<string, unknown>)[sort.field];\n const bVal = (b as Record<string, unknown>)[sort.field];\n const result = comparator(aVal, bVal, a, b);\n if (result !== 0) {\n return sort.direction === 'asc' ? result : -result;\n }\n }\n return 0;\n });\n}\n\n/**\n * Default comparator for sorting values.\n * Handles nulls, numbers, dates, and strings.\n *\n * @param a - First value\n * @param b - Second value\n * @returns Comparison result (-1, 0, 1)\n */\nexport function defaultComparator(a: unknown, b: unknown): number {\n // Handle nulls/undefined - push to end\n if (a == null && b == null) return 0;\n if (a == null) return 1;\n if (b == null) return -1;\n\n // Type-aware comparison\n if (typeof a === 'number' && typeof b === 'number') {\n return a - b;\n }\n\n if (a instanceof Date && b instanceof Date) {\n return a.getTime() - b.getTime();\n }\n\n // Boolean comparison\n if (typeof a === 'boolean' && typeof b === 'boolean') {\n return a === b ? 0 : a ? -1 : 1;\n }\n\n // String comparison (fallback)\n return String(a).localeCompare(String(b));\n}\n\n/**\n * Toggle sort state for a field.\n * With shift key: adds/toggles in multi-sort list\n * Without shift key: replaces entire sort with single column\n *\n * @param current - Current sort model\n * @param field - Field to toggle\n * @param shiftKey - Whether shift key is held (multi-sort mode)\n * @param maxColumns - Maximum columns allowed in sort\n * @returns New sort model\n */\nexport function toggleSort(current: SortModel[], field: string, shiftKey: boolean, maxColumns: number): SortModel[] {\n const existing = current.find((s) => s.field === field);\n\n if (shiftKey) {\n // Multi-sort: add/toggle in list\n if (existing) {\n if (existing.direction === 'asc') {\n // Flip to descending\n return current.map((s) => (s.field === field ? { ...s, direction: 'desc' as const } : s));\n } else {\n // Remove from sort\n return current.filter((s) => s.field !== field);\n }\n } else if (current.length < maxColumns) {\n // Add new sort column\n return [...current, { field, direction: 'asc' as const }];\n }\n // Max columns reached, return unchanged\n return current;\n } else {\n // Single sort: replace all\n if (existing?.direction === 'asc') {\n return [{ field, direction: 'desc' }];\n } else if (existing?.direction === 'desc') {\n return [];\n }\n return [{ field, direction: 'asc' }];\n }\n}\n\n/**\n * Get the sort index (1-based) for a field in the sort model.\n * Returns undefined if the field is not in the sort model.\n *\n * @param sortModel - Current sort model\n * @param field - Field to check\n * @returns 1-based index or undefined\n */\nexport function getSortIndex(sortModel: SortModel[], field: string): number | undefined {\n const index = sortModel.findIndex((s) => s.field === field);\n return index >= 0 ? index + 1 : undefined;\n}\n\n/**\n * Get the sort direction for a field in the sort model.\n *\n * @param sortModel - Current sort model\n * @param field - Field to check\n * @returns Sort direction or undefined if not sorted\n */\nexport function getSortDirection(sortModel: SortModel[], field: string): 'asc' | 'desc' | undefined {\n return sortModel.find((s) => s.field === field)?.direction;\n}\n","/**\n * Multi-Sort Plugin (Class-based)\n *\n * Provides multi-column sorting capabilities for tbw-grid.\n * Supports shift+click for adding secondary sort columns.\n */\n\nimport { BaseGridPlugin, HeaderClickEvent } from '../../core/plugin/base-plugin';\nimport type { ColumnState } from '../../core/types';\nimport { applySorts, getSortDirection, getSortIndex, toggleSort } from './multi-sort';\nimport styles from './multi-sort.css?inline';\nimport type { MultiSortConfig, SortModel } from './types';\n\n/**\n * Multi-Sort Plugin for tbw-grid\n *\n * Enables sorting by multiple columns at once—hold Shift and click additional column\n * headers to build up a sort stack. Priority badges show the sort order, so users\n * always know which column takes precedence.\n *\n * ## Installation\n *\n * ```ts\n * import { MultiSortPlugin } from '@toolbox-web/grid/plugins/multi-sort';\n * ```\n *\n * ## Configuration Options\n *\n * | Option | Type | Default | Description |\n * |--------|------|---------|-------------|\n * | `maxSortColumns` | `number` | `3` | Maximum columns to sort by |\n * | `showSortIndex` | `boolean` | `true` | Show sort priority badges |\n * | `initialSort` | `SortModel[]` | - | Pre-configured sort order on load |\n *\n * ## Keyboard Shortcuts\n *\n * | Shortcut | Action |\n * |----------|--------|\n * | `Click header` | Sort by column (clears other sorts) |\n * | `Shift + Click` | Add column to multi-sort stack |\n * | `Ctrl + Click` | Toggle sort direction |\n *\n * ## Events\n *\n * | Event | Detail | Description |\n * |-------|--------|-------------|\n * | `sort-change` | `{ sortModel: SortModel[] }` | Fired when sort changes |\n *\n * ## Programmatic API\n *\n * | Method | Signature | Description |\n * |--------|-----------|-------------|\n * | `setSort` | `(sortModel: SortModel[]) => void` | Set sort programmatically |\n * | `getSortModel` | `() => SortModel[]` | Get current sort model |\n * | `clearSort` | `() => void` | Clear all sorting |\n * | `addSort` | `(field, direction) => void` | Add a column to sort |\n * | `removeSort` | `(field) => void` | Remove a column from sort |\n *\n * @example Basic Multi-Column Sorting\n * ```ts\n * import '@toolbox-web/grid';\n * import { MultiSortPlugin } from '@toolbox-web/grid/plugins/multi-sort';\n *\n * const grid = document.querySelector('tbw-grid');\n * grid.gridConfig = {\n * columns: [\n * { field: 'name', header: 'Name', sortable: true },\n * { field: 'department', header: 'Department', sortable: true },\n * { field: 'salary', header: 'Salary', type: 'number', sortable: true },\n * ],\n * plugins: [new MultiSortPlugin({ maxSortColumns: 3, showSortIndex: true })],\n * };\n *\n * grid.addEventListener('sort-change', (e) => {\n * console.log('Active sorts:', e.detail.sortModel);\n * });\n * ```\n *\n * @example Initial Sort Configuration\n * ```ts\n * new MultiSortPlugin({\n * initialSort: [\n * { field: 'department', direction: 'asc' },\n * { field: 'salary', direction: 'desc' },\n * ],\n * })\n * ```\n *\n * @see {@link MultiSortConfig} for all configuration options\n * @see {@link SortModel} for the sort model structure\n *\n * @internal Extends BaseGridPlugin\n */\nexport class MultiSortPlugin extends BaseGridPlugin<MultiSortConfig> {\n /** @internal */\n readonly name = 'multiSort';\n /** @internal */\n override readonly styles = styles;\n\n /** @internal */\n protected override get defaultConfig(): Partial<MultiSortConfig> {\n return {\n maxSortColumns: 3,\n showSortIndex: true,\n };\n }\n\n // #region Internal State\n private sortModel: SortModel[] = [];\n // #endregion\n\n // #region Lifecycle\n\n /** @internal */\n override detach(): void {\n this.sortModel = [];\n }\n // #endregion\n\n // #region Hooks\n\n /** @internal */\n override processRows(rows: readonly unknown[]): unknown[] {\n if (this.sortModel.length === 0) {\n return [...rows];\n }\n return applySorts([...rows], this.sortModel, [...this.columns]);\n }\n\n /** @internal */\n override onHeaderClick(event: HeaderClickEvent): boolean {\n const column = this.columns.find((c) => c.field === event.field);\n if (!column?.sortable) return false;\n\n const shiftKey = event.originalEvent.shiftKey;\n const maxColumns = this.config.maxSortColumns ?? 3;\n\n this.sortModel = toggleSort(this.sortModel, event.field, shiftKey, maxColumns);\n\n this.emit('sort-change', { sortModel: [...this.sortModel] });\n this.requestRender();\n\n return true;\n }\n\n /** @internal */\n override afterRender(): void {\n const gridEl = this.gridElement;\n if (!gridEl) return;\n\n const showIndex = this.config.showSortIndex !== false;\n\n // Update all sortable header cells with sort indicators\n const headerCells = gridEl.querySelectorAll('.header-row .cell[data-field]');\n headerCells.forEach((cell) => {\n const field = cell.getAttribute('data-field');\n if (!field) return;\n\n const sortIndex = getSortIndex(this.sortModel, field);\n const sortDir = getSortDirection(this.sortModel, field);\n\n // Remove existing sort index badge (always clean up)\n const existingBadge = cell.querySelector('.sort-index');\n existingBadge?.remove();\n\n if (sortDir) {\n // Column is sorted - remove base indicator and add our own\n const existingIndicator = cell.querySelector('[part~=\"sort-indicator\"], .sort-indicator');\n existingIndicator?.remove();\n\n cell.setAttribute('data-sort', sortDir);\n\n // Add sort arrow indicator - insert BEFORE filter button and resize handle\n // to maintain consistent order: [label, sort-indicator, sort-index, filter-btn, resize-handle]\n const indicator = document.createElement('span');\n indicator.className = 'sort-indicator';\n // Use grid-level icons (fall back to defaults)\n this.setIcon(indicator, this.resolveIcon(sortDir === 'asc' ? 'sortAsc' : 'sortDesc'));\n\n // Find insertion point: before filter button or resize handle\n const filterBtn = cell.querySelector('.tbw-filter-btn');\n const resizeHandle = cell.querySelector('.resize-handle');\n const insertBefore = filterBtn ?? resizeHandle;\n if (insertBefore) {\n cell.insertBefore(indicator, insertBefore);\n } else {\n cell.appendChild(indicator);\n }\n\n // Add sort index badge if multiple columns sorted and showSortIndex is enabled\n if (showIndex && this.sortModel.length > 1 && sortIndex !== undefined) {\n const badge = document.createElement('span');\n badge.className = 'sort-index';\n badge.textContent = String(sortIndex);\n // Insert badge right after the indicator\n if (indicator.nextSibling) {\n cell.insertBefore(badge, indicator.nextSibling);\n } else {\n cell.appendChild(badge);\n }\n }\n } else {\n cell.removeAttribute('data-sort');\n // For unsorted columns, leave the base indicator (⇅) alone\n }\n });\n }\n // #endregion\n\n // #region Public API\n\n /**\n * Get the current sort model.\n * @returns Copy of the current sort model\n */\n getSortModel(): SortModel[] {\n return [...this.sortModel];\n }\n\n /**\n * Set the sort model programmatically.\n * @param model - New sort model to apply\n */\n setSortModel(model: SortModel[]): void {\n this.sortModel = [...model];\n this.emit('sort-change', { sortModel: [...model] });\n this.requestRender();\n }\n\n /**\n * Clear all sorting.\n */\n clearSort(): void {\n this.sortModel = [];\n this.emit('sort-change', { sortModel: [] });\n this.requestRender();\n }\n\n /**\n * Get the sort index (1-based) for a specific field.\n * @param field - Field to check\n * @returns 1-based index or undefined if not sorted\n */\n getSortIndex(field: string): number | undefined {\n return getSortIndex(this.sortModel, field);\n }\n\n /**\n * Get the sort direction for a specific field.\n * @param field - Field to check\n * @returns Sort direction or undefined if not sorted\n */\n getSortDirection(field: string): 'asc' | 'desc' | undefined {\n return getSortDirection(this.sortModel, field);\n }\n // #endregion\n\n // #region Column State Hooks\n\n /**\n * Return sort state for a column if it's in the sort model.\n * @internal\n */\n override getColumnState(field: string): Partial<ColumnState> | undefined {\n const index = this.sortModel.findIndex((s) => s.field === field);\n if (index === -1) return undefined;\n\n const sortEntry = this.sortModel[index];\n return {\n sort: {\n direction: sortEntry.direction,\n priority: index,\n },\n };\n }\n\n /**\n * Apply sort state from column state.\n * Rebuilds the sort model from all column states.\n * @internal\n */\n override applyColumnState(field: string, state: ColumnState): void {\n // Only process if the column has sort state\n if (!state.sort) {\n // Remove this field from sortModel if it exists\n this.sortModel = this.sortModel.filter((s) => s.field !== field);\n return;\n }\n\n // Find existing entry or add new one\n const existingIndex = this.sortModel.findIndex((s) => s.field === field);\n const newEntry: SortModel = {\n field,\n direction: state.sort.direction,\n };\n\n if (existingIndex !== -1) {\n // Update existing entry\n this.sortModel[existingIndex] = newEntry;\n } else {\n // Add at the correct priority position\n this.sortModel.splice(state.sort.priority, 0, newEntry);\n }\n\n // Re-sort the model by priority to ensure correct order\n // This is handled after all columns are processed, but we maintain order here\n }\n // #endregion\n}\n"],"names":["applySorts","rows","sorts","columns","a","b","sort","comparator","c","defaultComparator","aVal","bVal","result","toggleSort","current","field","shiftKey","maxColumns","existing","s","getSortIndex","sortModel","index","getSortDirection","MultiSortPlugin","BaseGridPlugin","styles","event","gridEl","showIndex","cell","sortIndex","sortDir","indicator","filterBtn","resizeHandle","insertBefore","badge","model","state","existingIndex","newEntry"],"mappings":"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"}
|
package/umd/plugins/pivot.umd.js
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
(function(v,f){typeof exports=="object"&&typeof module<"u"?f(exports,require("../../core/plugin/base-plugin"),require("../../core/internal/aggregators")):typeof define=="function"&&define.amd?define(["exports","../../core/plugin/base-plugin","../../core/internal/aggregators"],f):(v=typeof globalThis<"u"?globalThis:v||self,f(v.TbwGridPlugin_pivot={},v.TbwGrid,v.TbwGrid))})(this,(function(v,f,R){"use strict";const G=R.getValueAggregator;function P(a){const e=[];return!a.rowGroupFields?.length&&!a.columnGroupFields?.length&&e.push("At least one row or column group field is required"),a.valueFields?.length||e.push("At least one value field is required"),e}function w(a,e){return[...a,e].join("|")}function L(a,e){const n=e.rowGroupFields??[],t=e.columnGroupFields??[],o=e.valueFields??[],i=k(a,t),r=y(a,n,t,i,o,0,""),s=K(r,i,o),l=Object.values(s).reduce((d,c)=>d+c,0);return{rows:r,columnKeys:i,totals:s,grandTotal:l}}function k(a,e){if(e.length===0)return["value"];const n=new Set;for(const t of a){const o=e.map(i=>String(t[i]??"")).join("|");n.add(o)}return[...n].sort()}function E(a,e){const n=new Map;for(const t of a){const o=String(t[e]??""),i=n.get(o);i?i.push(t):n.set(o,[t])}return n}function y(a,e,n,t,o,i,r){const s=[];if(e.length===0){const u=C(a,n,t,o),h=x(u);return s.push({rowKey:r||"all",rowLabel:r||"All",depth:i,values:u,total:h,isGroup:!1,rowCount:a.length}),s}const l=e[0],d=e.slice(1),c=d.length>0,p=E(a,l);for(const[u,h]of p){const A=r?`${r}|${u}`:u,T=C(h,n,t,o),B=x(T);let _;c&&(_=y(h,d,n,t,o,i+1,A)),s.push({rowKey:A,rowLabel:u||"(blank)",depth:i,values:T,total:B,isGroup:c,children:_,rowCount:h.length})}return s}function C(a,e,n,t){const o={};for(const i of n)for(const r of t){const l=(e.length>0?a.filter(u=>e.map(h=>String(u[h]??"")).join("|")===i):a).map(u=>Number(u[r.field])||0),d=G(r.aggFunc),c=l.length>0?d(l):null,p=w([i],r.field);o[p]=c}return o}function x(a){let e=0;for(const n of Object.values(a))e+=n??0;return e}function K(a,e,n){const t={};function o(i){for(const r of i)if(!r.isGroup||!r.children?.length)for(const s of e)for(const l of n){const d=w([s],l.field);t[d]=(t[d]??0)+(r.values[d]??0)}else r.children&&o(r.children)}return o(a),t}function N(a,e,n=!0){const t=[];function o(i){t.push(i);const r=e?e.has(i.rowKey):n;if(i.children&&r)for(const s of i.children)o(s)}for(const i of a)o(i);return t}function S(a){const e=[];function n(t){if(t.isGroup&&e.push(t.rowKey),t.children)for(const o of t.children)n(o)}for(const t of a)n(t);return e}const z=["sum","avg","count","min","max","first","last"];function V(a,e,n,t){const o=new AbortController,i={config:e,callbacks:t,signal:o.signal},r=document.createElement("div");return r.className="tbw-pivot-panel",r.appendChild(b("Options",()=>M(n,i))),r.appendChild(b("Row Groups",()=>F("rowGroups",i))),r.appendChild(b("Column Groups",()=>F("columnGroups",i))),r.appendChild(b("Values",()=>D(i))),r.appendChild(b("Available Fields",()=>H(i))),a.appendChild(r),()=>{o.abort(),r.remove()}}function b(a,e){const n=document.createElement("div");n.className="tbw-pivot-section";const t=document.createElement("div");t.className="tbw-pivot-section-header",t.textContent=a;const o=document.createElement("div");return o.className="tbw-pivot-section-content",o.appendChild(e()),n.appendChild(t),n.appendChild(o),n}function F(a,e){const{config:n,callbacks:t,signal:o}=e,i=document.createElement("div");i.className="tbw-pivot-drop-zone",i.setAttribute("data-zone",a);const r=a==="rowGroups"?n.rowGroupFields??[]:n.columnGroupFields??[];if(r.length===0){const s=document.createElement("div");s.className="tbw-pivot-placeholder",s.textContent="Drag fields here or click to add",i.appendChild(s)}else for(const s of r)i.appendChild(I(s,a,e));return i.addEventListener("dragover",s=>{s.preventDefault(),i.classList.add("drag-over")},{signal:o}),i.addEventListener("dragleave",()=>{i.classList.remove("drag-over")},{signal:o}),i.addEventListener("drop",s=>{s.preventDefault(),i.classList.remove("drag-over");const l=s.dataTransfer?.getData("text/plain");l&&t.onAddFieldToZone(l,a)},{signal:o}),i}function I(a,e,n){const{callbacks:t,signal:o}=n,i=document.createElement("div");i.className="tbw-pivot-field-chip",i.draggable=!0;const r=t.getAvailableFields().find(d=>d.field===a),s=document.createElement("span");s.className="tbw-pivot-chip-label",s.textContent=r?.header??a;const l=document.createElement("button");return l.className="tbw-pivot-chip-remove",l.innerHTML="×",l.title="Remove field",l.addEventListener("click",d=>{d.stopPropagation(),t.onRemoveFieldFromZone(a,e)},{signal:o}),i.appendChild(s),i.appendChild(l),i.addEventListener("dragstart",d=>{d.dataTransfer?.setData("text/plain",a),d.dataTransfer?.setData("source-zone",e),i.classList.add("dragging")},{signal:o}),i.addEventListener("dragend",()=>{i.classList.remove("dragging")},{signal:o}),i}function D(a){const{config:e,callbacks:n,signal:t}=a,o=document.createElement("div");o.className="tbw-pivot-drop-zone tbw-pivot-values-zone",o.setAttribute("data-zone","values");const i=e.valueFields??[];if(i.length===0){const r=document.createElement("div");r.className="tbw-pivot-placeholder",r.textContent="Drag numeric fields here for aggregation",o.appendChild(r)}else for(const r of i)o.appendChild(q(r,a));return o.addEventListener("dragover",r=>{r.preventDefault(),o.classList.add("drag-over")},{signal:t}),o.addEventListener("dragleave",()=>{o.classList.remove("drag-over")},{signal:t}),o.addEventListener("drop",r=>{r.preventDefault(),o.classList.remove("drag-over");const s=r.dataTransfer?.getData("text/plain");s&&n.onAddValueField(s,"sum")},{signal:t}),o}function q(a,e){const{callbacks:n,signal:t}=e,o=document.createElement("div");o.className="tbw-pivot-field-chip tbw-pivot-value-chip";const i=n.getAvailableFields().find(c=>c.field===a.field),r=document.createElement("div");r.className="tbw-pivot-value-label-wrapper";const s=document.createElement("span");s.className="tbw-pivot-chip-label",s.textContent=i?.header??a.field;const l=document.createElement("select");l.className="tbw-pivot-agg-select",l.title="Aggregation function";for(const c of z){const p=document.createElement("option");p.value=c,p.textContent=c.toUpperCase(),p.selected=c===a.aggFunc,l.appendChild(p)}l.addEventListener("change",()=>{n.onUpdateValueAggFunc(a.field,l.value)},{signal:t});const d=document.createElement("button");return d.className="tbw-pivot-chip-remove",d.innerHTML="×",d.title="Remove value field",d.addEventListener("click",c=>{c.stopPropagation(),n.onRemoveValueField(a.field)},{signal:t}),r.appendChild(s),r.appendChild(l),o.appendChild(r),o.appendChild(d),o}function H(a){const{config:e,callbacks:n,signal:t}=a,o=document.createElement("div");o.className="tbw-pivot-available-fields";const i=n.getAvailableFields(),r=new Set([...e.rowGroupFields??[],...e.columnGroupFields??[],...e.valueFields?.map(l=>l.field)??[]]),s=i.filter(l=>!r.has(l.field));if(s.length===0){const l=document.createElement("div");l.className="tbw-pivot-placeholder",l.textContent="All fields are in use",o.appendChild(l)}else for(const l of s){const d=document.createElement("div");d.className="tbw-pivot-field-chip available",d.textContent=l.header,d.draggable=!0,d.title=`Drag to add "${l.field}" to a zone`,d.addEventListener("dragstart",c=>{c.dataTransfer?.setData("text/plain",l.field),d.classList.add("dragging")},{signal:t}),d.addEventListener("dragend",()=>{d.classList.remove("dragging")},{signal:t}),o.appendChild(d)}return o}function M(a,e){const{config:n,callbacks:t,signal:o}=e,i=document.createElement("div");return i.className="tbw-pivot-options",i.appendChild(m("Enable Pivot View",a,r=>{t.onTogglePivot(r)},o)),i.appendChild(m("Show Row Totals",n.showTotals??!0,r=>{t.onOptionChange("showTotals",r)},o)),i.appendChild(m("Show Grand Total",n.showGrandTotal??!0,r=>{t.onOptionChange("showGrandTotal",r)},o)),i}function m(a,e,n,t){const o=document.createElement("label");o.className="tbw-pivot-checkbox";const i=document.createElement("input");i.type="checkbox",i.checked=e,i.addEventListener("change",()=>n(i.checked),{signal:t});const r=document.createElement("span");return r.textContent=a,o.appendChild(i),o.appendChild(r),o}function O(a,e,n){return e.className="data-grid-row pivot-group-row",e.setAttribute("data-pivot-depth",String(a.__pivotDepth??0)),e.setAttribute("data-pivot-key",String(a.__pivotRowKey??"")),e.setAttribute("role","row"),e.innerHTML="",n.columns.forEach((t,o)=>{const i=document.createElement("div");if(i.className="cell",i.setAttribute("data-col",String(o)),i.setAttribute("data-row",String(n.rowIndex)),i.setAttribute("role","gridcell"),o===0){const r=Number(a.__pivotIndent)||0;i.style.paddingLeft=`${r}px`;const s=String(a.__pivotRowKey),l=document.createElement("button");l.type="button",l.className="pivot-toggle",l.setAttribute("aria-label",a.__pivotExpanded?"Collapse group":"Expand group"),n.setIcon(l,n.resolveIcon(a.__pivotExpanded?"collapse":"expand")),l.addEventListener("click",p=>{p.stopPropagation(),n.onToggle(s)}),i.appendChild(l);const d=document.createElement("span");d.className="pivot-label",d.textContent=String(a.__pivotLabel??""),i.appendChild(d);const c=document.createElement("span");c.className="pivot-count",c.textContent=` (${Number(a.__pivotRowCount)||0})`,i.appendChild(c)}else{const r=a[t.field];i.textContent=r!=null?String(r):""}e.appendChild(i)}),!0}function Z(a,e,n,t){return e.className="data-grid-row pivot-leaf-row",e.setAttribute("data-pivot-depth",String(a.__pivotDepth??0)),e.setAttribute("data-pivot-key",String(a.__pivotRowKey??"")),e.innerHTML="",n.forEach((o,i)=>{const r=document.createElement("div");if(r.className="cell",r.setAttribute("data-col",String(i)),r.setAttribute("data-row",String(t)),r.setAttribute("role","gridcell"),i===0){const s=Number(a.__pivotIndent)||0;r.style.paddingLeft=`${s+20}px`;const l=document.createElement("span");l.className="pivot-label",l.textContent=String(a.__pivotLabel??""),r.appendChild(l)}else{const s=a[o.field];r.textContent=s!=null?String(s):""}e.appendChild(r)}),!0}function j(a,e,n){return e.className="pivot-grand-total-row",e.setAttribute("role","presentation"),e.innerHTML="",n.forEach((t,o)=>{const i=document.createElement("div");if(i.className="cell",i.setAttribute("data-col",String(o)),o===0){const r=document.createElement("span");r.className="pivot-label",r.textContent="Grand Total",i.appendChild(r)}else{const r=a[t.field];i.textContent=r!=null?String(r):""}e.appendChild(i)}),!0}const $='@layer tbw-plugins{.pivot-group-row{display:grid;grid-template-columns:var(--tbw-column-template);font-weight:600;background:var(--tbw-pivot-group-bg, var(--tbw-color-row-alt));min-height:var(--tbw-row-height);border-bottom:var(--tbw-row-divider)}.pivot-group-row:hover{background:var(--tbw-pivot-group-hover, var(--tbw-color-row-hover))}.pivot-leaf-row{display:grid;grid-template-columns:var(--tbw-column-template);background:var(--tbw-pivot-leaf-bg, var(--tbw-color-bg));min-height:var(--tbw-row-height);border-bottom:var(--tbw-row-divider)}.pivot-grand-total-row{display:grid;grid-template-columns:var(--tbw-column-template);font-weight:700;background:var(--tbw-pivot-grand-total-bg, var(--tbw-color-header-bg));min-height:var(--tbw-row-height);border-top:2px solid var(--tbw-color-border-strong)}.pivot-grand-total-row>.cell{display:flex;align-items:center;padding:var(--tbw-cell-padding);border-right:1px solid var(--tbw-color-border-cell);overflow:hidden;min-width:0}.pivot-grand-total-row>.cell:last-child{border-right:0}.pivot-grand-total-footer{position:sticky;bottom:0;z-index:var(--tbw-z-layer-pinned-rows, 20);background:var(--tbw-pivot-grand-total-bg, var(--tbw-color-header-bg));min-width:fit-content}.pivot-group-row>.cell,.pivot-leaf-row>.cell{display:flex;align-items:center;padding:var(--tbw-cell-padding);border-right:1px solid var(--tbw-color-border-cell);overflow:hidden;min-width:0}.pivot-group-row>.cell:last-child,.pivot-leaf-row>.cell:last-child{border-right:0}.pivot-toggle{display:inline-flex;align-items:center;justify-content:center;width:18px;height:18px;margin-right:6px;border:none;background:transparent;cursor:pointer;color:var(--tbw-pivot-toggle-color, var(--tbw-color-fg-muted));border-radius:var(--tbw-border-radius);transition:background .15s,color .15s}.pivot-toggle:hover{background:var(--tbw-pivot-toggle-hover-bg, var(--tbw-color-row-hover));color:var(--tbw-pivot-toggle-hover-color, var(--tbw-color-fg))}.pivot-toggle:focus{outline:var(--tbw-focus-outline);outline-offset:var(--tbw-focus-outline-offset)}.pivot-label{font-weight:inherit}.pivot-count{color:var(--tbw-pivot-count-color, var(--tbw-color-fg-muted));font-size:.9em;font-weight:400}.pivot-total-row{font-weight:700;border-top:2px solid var(--tbw-pivot-border, var(--tbw-color-border-strong))}[data-pivot-depth="1"]{--tbw-pivot-depth: 1}[data-pivot-depth="2"]{--tbw-pivot-depth: 2}[data-pivot-depth="3"]{--tbw-pivot-depth: 3}[data-pivot-depth="4"]{--tbw-pivot-depth: 4}.tbw-pivot-panel{display:flex;flex-direction:column;gap:var(--tbw-panel-padding, var(--tbw-spacing-lg, .75rem));padding:var(--tbw-panel-padding, var(--tbw-spacing-lg, .75rem));height:100%;overflow-y:auto;font-size:var(--tbw-font-size-sm, .8125rem)}.tbw-pivot-section{border:1px solid var(--tbw-pivot-border, var(--tbw-color-border));border-radius:var(--tbw-border-radius);background:var(--tbw-pivot-section-bg, var(--tbw-color-bg))}.tbw-pivot-section-header{padding:var(--tbw-button-padding, var(--tbw-spacing-md, .5rem) var(--tbw-spacing-lg, .75rem));font-weight:600;background:var(--tbw-pivot-header-bg, var(--tbw-color-header-bg));border-bottom:1px solid var(--tbw-pivot-border, var(--tbw-color-border));border-radius:var(--tbw-border-radius) var(--tbw-border-radius) 0 0}.tbw-pivot-section-content{padding:var(--tbw-panel-gap, var(--tbw-spacing-md, .5rem))}.tbw-pivot-toggle-wrapper{display:flex;align-items:center}.tbw-pivot-toggle-label{display:flex;align-items:center;gap:var(--tbw-panel-gap, var(--tbw-spacing-md, .5rem));cursor:pointer}.tbw-pivot-toggle-label input{width:var(--tbw-icon-size, 1rem);height:var(--tbw-icon-size, 1rem);cursor:pointer}.tbw-pivot-drop-zone{min-height:60px;padding:var(--tbw-panel-gap, var(--tbw-spacing-md, .5rem));border:2px dashed var(--tbw-pivot-drop-border, var(--tbw-color-border));border-radius:var(--tbw-border-radius);background:var(--tbw-pivot-drop-bg, var(--tbw-color-row-alt));display:flex;flex-wrap:wrap;gap:var(--tbw-spacing-sm, .375rem);align-content:flex-start;transition:all .15s ease}.tbw-pivot-drop-zone.drag-over{border-color:var(--tbw-color-accent);background:var(--tbw-pivot-drop-active, var(--tbw-focus-background))}.tbw-pivot-placeholder{color:var(--tbw-color-fg-muted);font-style:italic;padding:var(--tbw-panel-gap, var(--tbw-spacing-md, .5rem));text-align:center;width:100%}.tbw-pivot-field-chip{display:inline-flex;align-items:center;gap:var(--tbw-spacing-sm, .375rem);padding:var(--tbw-button-padding-sm, var(--tbw-spacing-xs, .25rem) var(--tbw-spacing-md, .5rem));background:var(--tbw-pivot-chip-bg, var(--tbw-color-header-bg));border:1px solid var(--tbw-pivot-chip-border, var(--tbw-color-border));border-radius:var(--tbw-border-radius);cursor:grab;font-size:var(--tbw-font-size-xs, .75rem);transition:all .15s ease}.tbw-pivot-field-chip:hover{background:var(--tbw-pivot-chip-hover, var(--tbw-color-row-hover));border-color:var(--tbw-color-accent)}.tbw-pivot-field-chip.available{background:var(--tbw-color-bg)}.tbw-pivot-field-chip.dragging{opacity:.5;cursor:grabbing}.tbw-pivot-chip-label{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:120px}.tbw-pivot-chip-remove{display:flex;align-items:center;justify-content:center;width:var(--tbw-icon-size, 1rem);height:var(--tbw-icon-size, 1rem);padding:0;border:none;background:transparent;color:var(--tbw-color-fg-muted);font-size:var(--tbw-font-size-sm, .875rem);font-weight:700;cursor:pointer;border-radius:50%;transition:all .15s ease}.tbw-pivot-chip-remove:hover{background:var(--tbw-pivot-chip-remove-hover-bg, var(--tbw-color-accent));color:var(--tbw-pivot-chip-remove-hover-fg, var(--tbw-color-accent-fg))}.tbw-pivot-value-chip{padding:var(--tbw-button-padding-sm, var(--tbw-spacing-xs, .25rem) var(--tbw-spacing-md, .5rem))}.tbw-pivot-value-label-wrapper{display:flex;align-items:center;gap:var(--tbw-panel-gap, var(--tbw-spacing-md, .5rem));flex:1;min-width:0}.tbw-pivot-agg-select{padding:var(--tbw-spacing-xs, .125rem) var(--tbw-spacing-xs, .25rem);font-size:var(--tbw-font-size-xs, .6875rem);border:1px solid var(--tbw-color-border);border-radius:var(--tbw-border-radius);background:var(--tbw-color-bg);cursor:pointer}.tbw-pivot-available-fields{display:flex;flex-wrap:wrap;gap:var(--tbw-spacing-sm, .375rem);min-height:40px}.tbw-pivot-options{display:flex;flex-direction:column;gap:var(--tbw-panel-gap, var(--tbw-spacing-md, .5rem))}.tbw-pivot-checkbox{display:flex;align-items:center;gap:var(--tbw-panel-gap, var(--tbw-spacing-md, .5rem));cursor:pointer}.tbw-pivot-checkbox input{width:var(--tbw-icon-size-sm, .875rem);height:var(--tbw-icon-size-sm, .875rem);cursor:pointer}.pivot-group-row.tbw-pivot-slide-in,.pivot-leaf-row.tbw-pivot-slide-in{animation:tbw-pivot-slide-in var(--tbw-animation-duration, .2s) var(--tbw-animation-easing, ease-out) forwards}@keyframes tbw-pivot-slide-in{0%{opacity:0;transform:translate(-8px)}to{opacity:1;transform:translate(0)}}.pivot-group-row.tbw-pivot-fade-in,.pivot-leaf-row.tbw-pivot-fade-in{animation:tbw-pivot-fade-in var(--tbw-animation-duration, .2s) var(--tbw-animation-easing, ease-out) forwards}@keyframes tbw-pivot-fade-in{0%{opacity:0}to{opacity:1}}}';class g extends f.BaseGridPlugin{name="pivot";styles=$;static PANEL_ID="pivot";get defaultConfig(){return{active:!0,showTotals:!0,showGrandTotal:!0,showToolPanel:!0,animation:"slide"}}isActive=!1;hasInitialized=!1;pivotResult=null;fieldHeaderMap=new Map;expandedKeys=new Set;defaultExpanded=!0;originalColumns=[];panelContainer=null;grandTotalFooter=null;previousVisibleKeys=new Set;keysToAnimate=new Set;hasValidPivotConfig(){return(this.config.valueFields?.length??0)>0}get animationStyle(){return this.isAnimationEnabled?this.config.animation??"slide":!1}detach(){this.isActive=!1,this.hasInitialized=!1,this.pivotResult=null,this.fieldHeaderMap.clear(),this.originalColumns=[],this.panelContainer=null,this.cleanupGrandTotalFooter(),this.previousVisibleKeys.clear(),this.keysToAnimate.clear()}getToolPanel(){if((this.config?.showToolPanel??this.userConfig?.showToolPanel??!0)!==!1)return{id:g.PANEL_ID,title:"Pivot",icon:"⊞",tooltip:"Configure pivot table",order:90,render:n=>this.renderPanel(n)}}processRows(e){if(!this.hasInitialized&&this.config.active!==!1&&this.hasValidPivotConfig()&&(this.hasInitialized=!0,this.isActive=!0),!this.isActive)return[...e];const n=P(this.config);if(n.length>0)return this.warn(`Config errors: ${n.join(", ")}`),[...e];this.buildFieldHeaderMap(),this.defaultExpanded=this.config.defaultExpanded??!0,this.expandedKeys.size===0&&this.defaultExpanded&&this.pivotResult&&this.expandAllKeys(),this.pivotResult=L(e,this.config),this.expandedKeys.size===0&&this.defaultExpanded&&this.expandAllKeys();const t=this.config.indentWidth??20,o=N(this.pivotResult.rows,this.expandedKeys,this.defaultExpanded).map(r=>({__pivotRowKey:r.rowKey,__pivotLabel:r.rowLabel,__pivotDepth:r.depth,__pivotIsGroup:r.isGroup,__pivotHasChildren:!!r.children?.length,__pivotExpanded:this.expandedKeys.has(r.rowKey),__pivotRowCount:r.rowCount??0,__pivotIndent:r.depth*t,__pivotTotal:r.total,...r.values}));this.keysToAnimate.clear();const i=new Set;for(const r of o){const s=r.__pivotRowKey;i.add(s),!this.previousVisibleKeys.has(s)&&r.__pivotDepth>0&&this.keysToAnimate.add(s)}return this.previousVisibleKeys=i,o}processColumns(e){if(!this.isActive||!this.pivotResult)return[...e];const n=[],t=(this.config.rowGroupFields??[]).map(o=>this.fieldHeaderMap.get(o)??o).join(" / ");n.push({field:"__pivotLabel",header:t||"Group",width:200});for(const o of this.pivotResult.columnKeys)for(const i of this.config.valueFields??[]){const r=w([o],i.field),s=i.header||this.fieldHeaderMap.get(i.field)||i.field;n.push({field:r,header:`${o} - ${s} (${i.aggFunc})`,width:120,type:"number"})}return this.config.showTotals&&n.push({field:"__pivotTotal",header:"Total",width:100,type:"number"}),n}renderRow(e,n,t){const o=e;return o.__pivotRowKey&&o.__pivotHasChildren?O(o,n,{columns:this.gridColumns,rowIndex:t,onToggle:i=>this.toggle(i),resolveIcon:i=>this.resolveIcon(i),setIcon:(i,r)=>this.setIcon(i,r)}):o.__pivotRowKey!==void 0&&this.isActive?Z(o,n,this.gridColumns,t):(this.cleanupPivotStyling(n),!1)}cleanupPivotStyling(e){(e.classList.contains("pivot-group-row")||e.classList.contains("pivot-leaf-row")||e.classList.contains("pivot-grand-total-row"))&&(e.classList.remove("pivot-group-row","pivot-leaf-row","pivot-grand-total-row"),e.classList.add("data-grid-row"),e.removeAttribute("data-pivot-depth"),e.innerHTML="")}onKeyDown(e){if(e.key!==" "||!this.isActive)return;const n=this.grid._focusRow,t=this.rows[n];if(!(!t?.__pivotIsGroup||!t.__pivotHasChildren))return e.preventDefault(),this.toggle(t.__pivotRowKey),this.requestRenderWithFocus(),!0}afterRender(){this.isActive&&this.config.showGrandTotal&&this.pivotResult?this.renderGrandTotalFooter():this.cleanupGrandTotalFooter();const e=this.animationStyle;if(e===!1||this.keysToAnimate.size===0)return;const n=this.gridElement?.querySelector(".rows");if(!n)return;const t=e==="fade"?"tbw-pivot-fade-in":"tbw-pivot-slide-in";for(const o of n.querySelectorAll(".pivot-group-row, .pivot-leaf-row")){const i=o.dataset.pivotKey;i&&this.keysToAnimate.has(i)&&(o.classList.add(t),o.addEventListener("animationend",()=>o.classList.remove(t),{once:!0}))}this.keysToAnimate.clear()}renderGrandTotalFooter(){if(!this.pivotResult)return;const e=this.gridElement;if(!e)return;const n=e.querySelector(".tbw-scroll-area")??e.querySelector(".tbw-grid-content")??e.children[0];if(!n)return;this.grandTotalFooter||(this.grandTotalFooter=document.createElement("div"),this.grandTotalFooter.className="pivot-grand-total-footer",n.appendChild(this.grandTotalFooter));const t={__pivotRowKey:"__grandTotal",__pivotLabel:"Grand Total",__pivotIsGrandTotal:!0,__pivotTotal:this.pivotResult.grandTotal,...this.pivotResult.totals};j(t,this.grandTotalFooter,this.gridColumns)}cleanupGrandTotalFooter(){this.grandTotalFooter&&(this.grandTotalFooter.remove(),this.grandTotalFooter=null)}toggle(e){this.expandedKeys.has(e)?this.expandedKeys.delete(e):this.expandedKeys.add(e),this.requestRender()}expand(e){this.expandedKeys.add(e),this.requestRender()}collapse(e){this.expandedKeys.delete(e),this.requestRender()}expandAll(){this.expandAllKeys(),this.requestRender()}collapseAll(){this.expandedKeys.clear(),this.requestRender()}expandAllKeys(){if(!this.pivotResult)return;const e=S(this.pivotResult.rows);for(const n of e)this.expandedKeys.add(n)}isExpanded(e){return this.expandedKeys.has(e)}enablePivot(){this.originalColumns.length===0&&this.captureOriginalColumns(),this.isActive=!0,this.requestRender()}disablePivot(){this.isActive=!1,this.pivotResult=null,this.requestRender()}isPivotActive(){return this.isActive}getPivotResult(){return this.pivotResult}setRowGroupFields(e){this.config.rowGroupFields=e,this.requestRender()}setColumnGroupFields(e){this.config.columnGroupFields=e,this.requestRender()}setValueFields(e){this.config.valueFields=e,this.requestRender()}refresh(){this.pivotResult=null,this.requestRender()}showPanel(){this.grid.openToolPanel(),this.grid.expandedToolPanelSections.includes(g.PANEL_ID)||this.grid.toggleToolPanelSection(g.PANEL_ID)}hidePanel(){this.grid.closeToolPanel()}togglePanel(){this.grid.isToolPanelOpen||this.grid.openToolPanel(),this.grid.toggleToolPanelSection(g.PANEL_ID)}isPanelVisible(){return this.grid.isToolPanelOpen&&this.grid.expandedToolPanelSections.includes(g.PANEL_ID)}get gridColumns(){return this.grid.columns??[]}refreshIfActive(){this.isActive&&this.refresh(),this.refreshPanel()}buildFieldHeaderMap(){const e=this.getAvailableFields();this.fieldHeaderMap.clear();for(const n of e)this.fieldHeaderMap.set(n.field,n.header)}getAvailableFields(){return this.originalColumns.length>0?this.originalColumns:this.captureOriginalColumns()}captureOriginalColumns(){try{const e=this.grid.getAllColumns?.()??this.grid.columns??[];return this.originalColumns=e.filter(n=>!n.field.startsWith("__pivot")).map(n=>({field:n.field,header:n.header??n.field})),this.originalColumns}catch{return[]}}renderPanel(e){this.panelContainer=e,this.originalColumns.length===0&&this.captureOriginalColumns();const n={onTogglePivot:t=>{t?this.enablePivot():this.disablePivot(),this.refreshPanel()},onAddFieldToZone:(t,o)=>this.addFieldToZone(t,o),onRemoveFieldFromZone:(t,o)=>this.removeFieldFromZone(t,o),onAddValueField:(t,o)=>this.addValueField(t,o),onRemoveValueField:t=>this.removeValueField(t),onUpdateValueAggFunc:(t,o)=>this.updateValueAggFunc(t,o),onOptionChange:(t,o)=>{this.config[t]=o,this.isActive&&this.refresh()},getAvailableFields:()=>this.getAvailableFields()};return V(e,this.config,this.isActive,n)}refreshPanel(){this.panelContainer&&(this.panelContainer.innerHTML="",this.renderPanel(this.panelContainer))}addFieldToZone(e,n){if(n==="rowGroups"){const t=this.config.rowGroupFields??[];t.includes(e)||(this.config.rowGroupFields=[...t,e])}else{const t=this.config.columnGroupFields??[];t.includes(e)||(this.config.columnGroupFields=[...t,e])}this.removeFromOtherZones(e,n),this.refreshIfActive()}removeFieldFromZone(e,n){n==="rowGroups"?this.config.rowGroupFields=(this.config.rowGroupFields??[]).filter(t=>t!==e):this.config.columnGroupFields=(this.config.columnGroupFields??[]).filter(t=>t!==e),this.refreshIfActive()}removeFromOtherZones(e,n){n!=="rowGroups"&&(this.config.rowGroupFields=(this.config.rowGroupFields??[]).filter(t=>t!==e)),n!=="columnGroups"&&(this.config.columnGroupFields=(this.config.columnGroupFields??[]).filter(t=>t!==e)),n!=="values"&&(this.config.valueFields=(this.config.valueFields??[]).filter(t=>t.field!==e))}addValueField(e,n){const t=this.config.valueFields??[];t.some(o=>o.field===e)||(this.config.valueFields=[...t,{field:e,aggFunc:n}]),this.removeFromOtherZones(e,"values"),this.refreshIfActive()}removeValueField(e){this.config.valueFields=(this.config.valueFields??[]).filter(n=>n.field!==e),this.refreshIfActive()}updateValueAggFunc(e,n){const t=this.config.valueFields??[],o=t.findIndex(i=>i.field===e);o>=0&&(t[o]={...t[o],aggFunc:n},this.config.valueFields=[...t]),this.isActive&&this.refresh()}}v.PivotPlugin=g,Object.defineProperty(v,Symbol.toStringTag,{value:"Module"})}));
|
|
1
|
+
(function(v,f){typeof exports=="object"&&typeof module<"u"?f(exports,require("../../core/plugin/base-plugin"),require("../../core/internal/aggregators")):typeof define=="function"&&define.amd?define(["exports","../../core/plugin/base-plugin","../../core/internal/aggregators"],f):(v=typeof globalThis<"u"?globalThis:v||self,f(v.TbwGridPlugin_pivot={},v.TbwGrid,v.TbwGrid))})(this,(function(v,f,R){"use strict";const G=R.getValueAggregator;function E(a){const e=[];return!a.rowGroupFields?.length&&!a.columnGroupFields?.length&&e.push("At least one row or column group field is required"),a.valueFields?.length||e.push("At least one value field is required"),e}function w(a,e){return[...a,e].join("|")}function P(a,e){const r=e.rowGroupFields??[],t=e.columnGroupFields??[],o=e.valueFields??[],i=L(a,t),n=y(a,r,t,i,o,0,""),s=K(n,i,o),l=Object.values(s).reduce((d,c)=>d+c,0);return{rows:n,columnKeys:i,totals:s,grandTotal:l}}function L(a,e){if(e.length===0)return["value"];const r=new Set;for(const t of a){const o=e.map(i=>String(t[i]??"")).join("|");r.add(o)}return[...r].sort()}function k(a,e){const r=new Map;for(const t of a){const o=String(t[e]??""),i=r.get(o);i?i.push(t):r.set(o,[t])}return r}function y(a,e,r,t,o,i,n){const s=[];if(e.length===0){const u=C(a,r,t,o),h=x(u);return s.push({rowKey:n||"all",rowLabel:n||"All",depth:i,values:u,total:h,isGroup:!1,rowCount:a.length}),s}const l=e[0],d=e.slice(1),c=d.length>0,p=k(a,l);for(const[u,h]of p){const T=n?`${n}|${u}`:u,A=C(h,r,t,o),B=x(A);let _;c&&(_=y(h,d,r,t,o,i+1,T)),s.push({rowKey:T,rowLabel:u||"(blank)",depth:i,values:A,total:B,isGroup:c,children:_,rowCount:h.length})}return s}function C(a,e,r,t){const o={};for(const i of r)for(const n of t){const l=(e.length>0?a.filter(u=>e.map(h=>String(u[h]??"")).join("|")===i):a).map(u=>Number(u[n.field])||0),d=G(n.aggFunc),c=l.length>0?d(l):null,p=w([i],n.field);o[p]=c}return o}function x(a){let e=0;for(const r of Object.values(a))e+=r??0;return e}function K(a,e,r){const t={};function o(i){for(const n of i)if(!n.isGroup||!n.children?.length)for(const s of e)for(const l of r){const d=w([s],l.field);t[d]=(t[d]??0)+(n.values[d]??0)}else n.children&&o(n.children)}return o(a),t}function N(a,e,r=!0){const t=[];function o(i){t.push(i);const n=e?e.has(i.rowKey):r;if(i.children&&n)for(const s of i.children)o(s)}for(const i of a)o(i);return t}function S(a){const e=[];function r(t){if(t.isGroup&&e.push(t.rowKey),t.children)for(const o of t.children)r(o)}for(const t of a)r(t);return e}const z=["sum","avg","count","min","max","first","last"];function V(a,e,r,t){const o=new AbortController,i={config:e,callbacks:t,signal:o.signal},n=document.createElement("div");return n.className="tbw-pivot-panel",n.appendChild(b("Options",()=>M(r,i))),n.appendChild(b("Row Groups",()=>F("rowGroups",i))),n.appendChild(b("Column Groups",()=>F("columnGroups",i))),n.appendChild(b("Values",()=>I(i))),n.appendChild(b("Available Fields",()=>q(i))),a.appendChild(n),()=>{o.abort(),n.remove()}}function b(a,e){const r=document.createElement("div");r.className="tbw-pivot-section";const t=document.createElement("div");t.className="tbw-pivot-section-header",t.textContent=a;const o=document.createElement("div");return o.className="tbw-pivot-section-content",o.appendChild(e()),r.appendChild(t),r.appendChild(o),r}function F(a,e){const{config:r,callbacks:t,signal:o}=e,i=document.createElement("div");i.className="tbw-pivot-drop-zone",i.setAttribute("data-zone",a);const n=a==="rowGroups"?r.rowGroupFields??[]:r.columnGroupFields??[];if(n.length===0){const s=document.createElement("div");s.className="tbw-pivot-placeholder",s.textContent="Drag fields here or click to add",i.appendChild(s)}else for(const s of n)i.appendChild(H(s,a,e));return i.addEventListener("dragover",s=>{s.preventDefault(),i.classList.add("drag-over")},{signal:o}),i.addEventListener("dragleave",()=>{i.classList.remove("drag-over")},{signal:o}),i.addEventListener("drop",s=>{s.preventDefault(),i.classList.remove("drag-over");const l=s.dataTransfer?.getData("text/plain");l&&t.onAddFieldToZone(l,a)},{signal:o}),i}function H(a,e,r){const{callbacks:t,signal:o}=r,i=document.createElement("div");i.className="tbw-pivot-field-chip",i.draggable=!0;const n=t.getAvailableFields().find(d=>d.field===a),s=document.createElement("span");s.className="tbw-pivot-chip-label",s.textContent=n?.header??a;const l=document.createElement("button");return l.className="tbw-pivot-chip-remove",l.innerHTML="×",l.title="Remove field",l.addEventListener("click",d=>{d.stopPropagation(),t.onRemoveFieldFromZone(a,e)},{signal:o}),i.appendChild(s),i.appendChild(l),i.addEventListener("dragstart",d=>{d.dataTransfer?.setData("text/plain",a),d.dataTransfer?.setData("source-zone",e),i.classList.add("dragging")},{signal:o}),i.addEventListener("dragend",()=>{i.classList.remove("dragging")},{signal:o}),i}function I(a){const{config:e,callbacks:r,signal:t}=a,o=document.createElement("div");o.className="tbw-pivot-drop-zone tbw-pivot-values-zone",o.setAttribute("data-zone","values");const i=e.valueFields??[];if(i.length===0){const n=document.createElement("div");n.className="tbw-pivot-placeholder",n.textContent="Drag numeric fields here for aggregation",o.appendChild(n)}else for(const n of i)o.appendChild(D(n,a));return o.addEventListener("dragover",n=>{n.preventDefault(),o.classList.add("drag-over")},{signal:t}),o.addEventListener("dragleave",()=>{o.classList.remove("drag-over")},{signal:t}),o.addEventListener("drop",n=>{n.preventDefault(),o.classList.remove("drag-over");const s=n.dataTransfer?.getData("text/plain");s&&r.onAddValueField(s,"sum")},{signal:t}),o}function D(a,e){const{callbacks:r,signal:t}=e,o=document.createElement("div");o.className="tbw-pivot-field-chip tbw-pivot-value-chip";const i=r.getAvailableFields().find(c=>c.field===a.field),n=document.createElement("div");n.className="tbw-pivot-value-label-wrapper";const s=document.createElement("span");s.className="tbw-pivot-chip-label",s.textContent=i?.header??a.field;const l=document.createElement("select");l.className="tbw-pivot-agg-select",l.title="Aggregation function";for(const c of z){const p=document.createElement("option");p.value=c,p.textContent=c.toUpperCase(),p.selected=c===a.aggFunc,l.appendChild(p)}l.addEventListener("change",()=>{r.onUpdateValueAggFunc(a.field,l.value)},{signal:t});const d=document.createElement("button");return d.className="tbw-pivot-chip-remove",d.innerHTML="×",d.title="Remove value field",d.addEventListener("click",c=>{c.stopPropagation(),r.onRemoveValueField(a.field)},{signal:t}),n.appendChild(s),n.appendChild(l),o.appendChild(n),o.appendChild(d),o}function q(a){const{config:e,callbacks:r,signal:t}=a,o=document.createElement("div");o.className="tbw-pivot-available-fields";const i=r.getAvailableFields(),n=new Set([...e.rowGroupFields??[],...e.columnGroupFields??[],...e.valueFields?.map(l=>l.field)??[]]),s=i.filter(l=>!n.has(l.field));if(s.length===0){const l=document.createElement("div");l.className="tbw-pivot-placeholder",l.textContent="All fields are in use",o.appendChild(l)}else for(const l of s){const d=document.createElement("div");d.className="tbw-pivot-field-chip available",d.textContent=l.header,d.draggable=!0,d.title=`Drag to add "${l.field}" to a zone`,d.addEventListener("dragstart",c=>{c.dataTransfer?.setData("text/plain",l.field),d.classList.add("dragging")},{signal:t}),d.addEventListener("dragend",()=>{d.classList.remove("dragging")},{signal:t}),o.appendChild(d)}return o}function M(a,e){const{config:r,callbacks:t,signal:o}=e,i=document.createElement("div");return i.className="tbw-pivot-options",i.appendChild(m("Enable Pivot View",a,n=>{t.onTogglePivot(n)},o)),i.appendChild(m("Show Row Totals",r.showTotals??!0,n=>{t.onOptionChange("showTotals",n)},o)),i.appendChild(m("Show Grand Total",r.showGrandTotal??!0,n=>{t.onOptionChange("showGrandTotal",n)},o)),i}function m(a,e,r,t){const o=document.createElement("label");o.className="tbw-pivot-checkbox";const i=document.createElement("input");i.type="checkbox",i.checked=e,i.addEventListener("change",()=>r(i.checked),{signal:t});const n=document.createElement("span");return n.textContent=a,o.appendChild(i),o.appendChild(n),o}function O(a,e,r){return e.className="data-grid-row pivot-group-row",e.setAttribute("data-pivot-depth",String(a.__pivotDepth??0)),e.setAttribute("data-pivot-key",String(a.__pivotRowKey??"")),e.setAttribute("role","row"),e.innerHTML="",r.columns.forEach((t,o)=>{const i=document.createElement("div");if(i.className="cell",i.setAttribute("data-col",String(o)),i.setAttribute("data-row",String(r.rowIndex)),i.setAttribute("role","gridcell"),o===0){const n=Number(a.__pivotIndent)||0;i.style.paddingLeft=`${n}px`;const s=String(a.__pivotRowKey),l=document.createElement("button");l.type="button",l.className="pivot-toggle",l.setAttribute("aria-label",a.__pivotExpanded?"Collapse group":"Expand group"),r.setIcon(l,r.resolveIcon(a.__pivotExpanded?"collapse":"expand")),l.addEventListener("click",p=>{p.stopPropagation(),r.onToggle(s)}),i.appendChild(l);const d=document.createElement("span");d.className="pivot-label",d.textContent=String(a.__pivotLabel??""),i.appendChild(d);const c=document.createElement("span");c.className="pivot-count",c.textContent=` (${Number(a.__pivotRowCount)||0})`,i.appendChild(c)}else{const n=a[t.field];i.textContent=n!=null?String(n):""}e.appendChild(i)}),!0}function Z(a,e,r,t){return e.className="data-grid-row pivot-leaf-row",e.setAttribute("data-pivot-depth",String(a.__pivotDepth??0)),e.setAttribute("data-pivot-key",String(a.__pivotRowKey??"")),e.innerHTML="",r.forEach((o,i)=>{const n=document.createElement("div");if(n.className="cell",n.setAttribute("data-col",String(i)),n.setAttribute("data-row",String(t)),n.setAttribute("role","gridcell"),i===0){const s=Number(a.__pivotIndent)||0;n.style.paddingLeft=`${s+20}px`;const l=document.createElement("span");l.className="pivot-label",l.textContent=String(a.__pivotLabel??""),n.appendChild(l)}else{const s=a[o.field];n.textContent=s!=null?String(s):""}e.appendChild(n)}),!0}function j(a,e,r){return e.className="pivot-grand-total-row",e.setAttribute("role","presentation"),e.innerHTML="",r.forEach((t,o)=>{const i=document.createElement("div");if(i.className="cell",i.setAttribute("data-col",String(o)),o===0){const n=document.createElement("span");n.className="pivot-label",n.textContent="Grand Total",i.appendChild(n)}else{const n=a[t.field];i.textContent=n!=null?String(n):""}e.appendChild(i)}),!0}const $='@layer tbw-plugins{.pivot-group-row{display:grid;grid-template-columns:var(--tbw-column-template);font-weight:600;background:var(--tbw-pivot-group-bg, var(--tbw-color-row-alt));min-height:var(--tbw-row-height);border-bottom:var(--tbw-row-divider)}.pivot-group-row:hover{background:var(--tbw-pivot-group-hover, var(--tbw-color-row-hover))}.pivot-leaf-row{display:grid;grid-template-columns:var(--tbw-column-template);background:var(--tbw-pivot-leaf-bg, var(--tbw-color-bg));min-height:var(--tbw-row-height);border-bottom:var(--tbw-row-divider)}.pivot-grand-total-row{display:grid;grid-template-columns:var(--tbw-column-template);font-weight:700;background:var(--tbw-pivot-grand-total-bg, var(--tbw-color-header-bg));min-height:var(--tbw-row-height);border-top:2px solid var(--tbw-color-border-strong)}.pivot-grand-total-row>.cell{display:flex;align-items:center;padding:var(--tbw-cell-padding);border-right:1px solid var(--tbw-color-border-cell);overflow:hidden;min-width:0}.pivot-grand-total-row>.cell:last-child{border-right:0}.pivot-grand-total-footer{position:sticky;bottom:0;z-index:var(--tbw-z-layer-pinned-rows, 20);background:var(--tbw-pivot-grand-total-bg, var(--tbw-color-header-bg));min-width:fit-content}.pivot-group-row>.cell,.pivot-leaf-row>.cell{display:flex;align-items:center;padding:var(--tbw-cell-padding);border-right:1px solid var(--tbw-color-border-cell);overflow:hidden;min-width:0}.pivot-group-row>.cell:last-child,.pivot-leaf-row>.cell:last-child{border-right:0}.pivot-toggle{display:inline-flex;align-items:center;justify-content:center;width:var(--tbw-pivot-toggle-size, var(--tbw-toggle-size, 1.25em));height:var(--tbw-pivot-toggle-size, var(--tbw-toggle-size, 1.25em));margin-right:var(--tbw-spacing-sm, .375em);border:none;background:transparent;cursor:pointer;color:var(--tbw-pivot-toggle-color, var(--tbw-color-fg-muted));border-radius:var(--tbw-border-radius);transition:background var(--tbw-transition-duration, .12s) var(--tbw-transition-ease, ease),color var(--tbw-transition-duration, .12s) var(--tbw-transition-ease, ease)}.pivot-toggle:hover{background:var(--tbw-pivot-toggle-hover-bg, var(--tbw-color-row-hover));color:var(--tbw-pivot-toggle-hover-color, var(--tbw-color-fg))}.pivot-toggle:focus{outline:var(--tbw-focus-outline);outline-offset:var(--tbw-focus-outline-offset)}.pivot-label{font-weight:inherit}.pivot-count{color:var(--tbw-pivot-count-color, var(--tbw-color-fg-muted));font-size:.9em;font-weight:400}.pivot-total-row{font-weight:700;border-top:2px solid var(--tbw-pivot-border, var(--tbw-color-border-strong))}[data-pivot-depth="1"]{--tbw-pivot-depth: 1}[data-pivot-depth="2"]{--tbw-pivot-depth: 2}[data-pivot-depth="3"]{--tbw-pivot-depth: 3}[data-pivot-depth="4"]{--tbw-pivot-depth: 4}.tbw-pivot-panel{display:flex;flex-direction:column;gap:var(--tbw-panel-padding, var(--tbw-spacing-lg, .75rem));padding:var(--tbw-panel-padding, var(--tbw-spacing-lg, .75rem));height:100%;overflow-y:auto;font-size:var(--tbw-font-size-sm, .8125rem)}.tbw-pivot-section{border:1px solid var(--tbw-pivot-border, var(--tbw-color-border));border-radius:var(--tbw-border-radius);background:var(--tbw-pivot-section-bg, var(--tbw-color-bg))}.tbw-pivot-section-header{padding:var(--tbw-button-padding, var(--tbw-spacing-md, .5rem) var(--tbw-spacing-lg, .75rem));font-weight:600;background:var(--tbw-pivot-header-bg, var(--tbw-color-header-bg));border-bottom:1px solid var(--tbw-pivot-border, var(--tbw-color-border));border-radius:var(--tbw-border-radius) var(--tbw-border-radius) 0 0}.tbw-pivot-section-content{padding:var(--tbw-panel-gap, var(--tbw-spacing-md, .5rem))}.tbw-pivot-toggle-wrapper{display:flex;align-items:center}.tbw-pivot-toggle-label{display:flex;align-items:center;gap:var(--tbw-panel-gap, var(--tbw-spacing-md, .5rem));cursor:pointer}.tbw-pivot-toggle-label input{width:var(--tbw-icon-size, 1rem);height:var(--tbw-icon-size, 1rem);cursor:pointer}.tbw-pivot-drop-zone{min-height:60px;padding:var(--tbw-panel-gap, var(--tbw-spacing-md, .5rem));border:2px dashed var(--tbw-pivot-drop-border, var(--tbw-color-border));border-radius:var(--tbw-border-radius);background:var(--tbw-pivot-drop-bg, var(--tbw-color-row-alt));display:flex;flex-wrap:wrap;gap:var(--tbw-spacing-sm, .375rem);align-content:flex-start;transition:all .15s ease}.tbw-pivot-drop-zone.drag-over{border-color:var(--tbw-color-accent);background:var(--tbw-pivot-drop-active, var(--tbw-focus-background))}.tbw-pivot-placeholder{color:var(--tbw-color-fg-muted);font-style:italic;padding:var(--tbw-panel-gap, var(--tbw-spacing-md, .5rem));text-align:center;width:100%}.tbw-pivot-field-chip{display:inline-flex;align-items:center;gap:var(--tbw-spacing-sm, .375rem);padding:var(--tbw-button-padding-sm, var(--tbw-spacing-xs, .25rem) var(--tbw-spacing-md, .5rem));background:var(--tbw-pivot-chip-bg, var(--tbw-color-header-bg));border:1px solid var(--tbw-pivot-chip-border, var(--tbw-color-border));border-radius:var(--tbw-border-radius);cursor:grab;font-size:var(--tbw-font-size-xs, .75rem);transition:all .15s ease}.tbw-pivot-field-chip:hover{background:var(--tbw-pivot-chip-hover, var(--tbw-color-row-hover));border-color:var(--tbw-color-accent)}.tbw-pivot-field-chip.available{background:var(--tbw-color-bg)}.tbw-pivot-field-chip.dragging{opacity:.5;cursor:grabbing}.tbw-pivot-chip-label{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:120px}.tbw-pivot-chip-remove{display:flex;align-items:center;justify-content:center;width:var(--tbw-icon-size, 1rem);height:var(--tbw-icon-size, 1rem);padding:0;border:none;background:transparent;color:var(--tbw-color-fg-muted);font-size:var(--tbw-font-size-sm, .875rem);font-weight:700;cursor:pointer;border-radius:50%;transition:all .15s ease}.tbw-pivot-chip-remove:hover{background:var(--tbw-pivot-chip-remove-hover-bg, var(--tbw-color-accent));color:var(--tbw-pivot-chip-remove-hover-fg, var(--tbw-color-accent-fg))}.tbw-pivot-value-chip{padding:var(--tbw-button-padding-sm, var(--tbw-spacing-xs, .25rem) var(--tbw-spacing-md, .5rem))}.tbw-pivot-value-label-wrapper{display:flex;align-items:center;gap:var(--tbw-panel-gap, var(--tbw-spacing-md, .5rem));flex:1;min-width:0}.tbw-pivot-agg-select{padding:var(--tbw-spacing-xs, .125rem) var(--tbw-spacing-xs, .25rem);font-size:var(--tbw-font-size-xs, .6875rem);border:1px solid var(--tbw-color-border);border-radius:var(--tbw-border-radius);background:var(--tbw-color-bg);cursor:pointer}.tbw-pivot-available-fields{display:flex;flex-wrap:wrap;gap:var(--tbw-spacing-sm, .375rem);min-height:40px}.tbw-pivot-options{display:flex;flex-direction:column;gap:var(--tbw-panel-gap, var(--tbw-spacing-md, .5rem))}.tbw-pivot-checkbox{display:flex;align-items:center;gap:var(--tbw-panel-gap, var(--tbw-spacing-md, .5rem));cursor:pointer}.tbw-pivot-checkbox input{width:var(--tbw-icon-size-sm, .875rem);height:var(--tbw-icon-size-sm, .875rem);cursor:pointer}.pivot-group-row.tbw-pivot-slide-in,.pivot-leaf-row.tbw-pivot-slide-in{animation:tbw-pivot-slide-in var(--tbw-animation-duration, .2s) var(--tbw-animation-easing, ease-out) forwards}@keyframes tbw-pivot-slide-in{0%{opacity:0;transform:translate(-8px)}to{opacity:1;transform:translate(0)}}.pivot-group-row.tbw-pivot-fade-in,.pivot-leaf-row.tbw-pivot-fade-in{animation:tbw-pivot-fade-in var(--tbw-animation-duration, .2s) var(--tbw-animation-easing, ease-out) forwards}@keyframes tbw-pivot-fade-in{0%{opacity:0}to{opacity:1}}}';class g extends f.BaseGridPlugin{name="pivot";styles=$;static PANEL_ID="pivot";get defaultConfig(){return{active:!0,showTotals:!0,showGrandTotal:!0,showToolPanel:!0,animation:"slide"}}isActive=!1;hasInitialized=!1;pivotResult=null;fieldHeaderMap=new Map;expandedKeys=new Set;defaultExpanded=!0;userHasToggledExpand=!1;originalColumns=[];panelContainer=null;grandTotalFooter=null;previousVisibleKeys=new Set;keysToAnimate=new Set;hasValidPivotConfig(){return(this.config.valueFields?.length??0)>0}get animationStyle(){return this.isAnimationEnabled?this.config.animation??"slide":!1}detach(){this.isActive=!1,this.hasInitialized=!1,this.pivotResult=null,this.fieldHeaderMap.clear(),this.originalColumns=[],this.panelContainer=null,this.cleanupGrandTotalFooter(),this.previousVisibleKeys.clear(),this.keysToAnimate.clear(),this.userHasToggledExpand=!1}getToolPanel(){if((this.config?.showToolPanel??this.userConfig?.showToolPanel??!0)!==!1)return{id:g.PANEL_ID,title:"Pivot",icon:"⊞",tooltip:"Configure pivot table",order:90,render:r=>this.renderPanel(r)}}processRows(e){if(!this.hasInitialized&&this.config.active!==!1&&this.hasValidPivotConfig()&&(this.hasInitialized=!0,this.isActive=!0),!this.isActive)return[...e];const r=E(this.config);if(r.length>0)return this.warn(`Config errors: ${r.join(", ")}`),[...e];this.buildFieldHeaderMap(),this.defaultExpanded=this.config.defaultExpanded??!0,this.pivotResult=P(e,this.config),this.expandedKeys.size===0&&this.defaultExpanded&&!this.userHasToggledExpand&&this.expandAllKeys();const t=this.config.indentWidth??20,o=N(this.pivotResult.rows,this.expandedKeys,this.defaultExpanded).map(n=>({__pivotRowKey:n.rowKey,__pivotLabel:n.rowLabel,__pivotDepth:n.depth,__pivotIsGroup:n.isGroup,__pivotHasChildren:!!n.children?.length,__pivotExpanded:this.expandedKeys.has(n.rowKey),__pivotRowCount:n.rowCount??0,__pivotIndent:n.depth*t,__pivotTotal:n.total,...n.values}));this.keysToAnimate.clear();const i=new Set;for(const n of o){const s=n.__pivotRowKey;i.add(s),!this.previousVisibleKeys.has(s)&&n.__pivotDepth>0&&this.keysToAnimate.add(s)}return this.previousVisibleKeys=i,o}processColumns(e){if(!this.isActive||!this.pivotResult)return[...e];const r=[],t=(this.config.rowGroupFields??[]).map(o=>this.fieldHeaderMap.get(o)??o).join(" / ");r.push({field:"__pivotLabel",header:t||"Group",width:200});for(const o of this.pivotResult.columnKeys)for(const i of this.config.valueFields??[]){const n=w([o],i.field),s=i.header||this.fieldHeaderMap.get(i.field)||i.field;r.push({field:n,header:`${o} - ${s} (${i.aggFunc})`,width:120,type:"number"})}return this.config.showTotals&&r.push({field:"__pivotTotal",header:"Total",width:100,type:"number"}),r}renderRow(e,r,t){const o=e;return o.__pivotRowKey&&o.__pivotHasChildren?O(o,r,{columns:this.gridColumns,rowIndex:t,onToggle:i=>this.toggle(i),resolveIcon:i=>this.resolveIcon(i),setIcon:(i,n)=>this.setIcon(i,n)}):o.__pivotRowKey!==void 0&&this.isActive?Z(o,r,this.gridColumns,t):(this.cleanupPivotStyling(r),!1)}cleanupPivotStyling(e){(e.classList.contains("pivot-group-row")||e.classList.contains("pivot-leaf-row")||e.classList.contains("pivot-grand-total-row"))&&(e.classList.remove("pivot-group-row","pivot-leaf-row","pivot-grand-total-row"),e.classList.add("data-grid-row"),e.removeAttribute("data-pivot-depth"),e.innerHTML="")}onKeyDown(e){if(e.key!==" "||!this.isActive)return;const r=this.grid._focusRow,t=this.rows[r];if(!(!t?.__pivotIsGroup||!t.__pivotHasChildren))return e.preventDefault(),this.toggle(t.__pivotRowKey),this.requestRenderWithFocus(),!0}afterRender(){this.isActive&&this.config.showGrandTotal&&this.pivotResult?this.renderGrandTotalFooter():this.cleanupGrandTotalFooter();const e=this.animationStyle;if(e===!1||this.keysToAnimate.size===0)return;const r=this.gridElement?.querySelector(".rows");if(!r)return;const t=e==="fade"?"tbw-pivot-fade-in":"tbw-pivot-slide-in";for(const o of r.querySelectorAll(".pivot-group-row, .pivot-leaf-row")){const i=o.dataset.pivotKey;i&&this.keysToAnimate.has(i)&&(o.classList.add(t),o.addEventListener("animationend",()=>o.classList.remove(t),{once:!0}))}this.keysToAnimate.clear()}renderGrandTotalFooter(){if(!this.pivotResult)return;const e=this.gridElement;if(!e)return;const r=e.querySelector(".tbw-scroll-area")??e.querySelector(".tbw-grid-content")??e.children[0];if(!r)return;this.grandTotalFooter||(this.grandTotalFooter=document.createElement("div"),this.grandTotalFooter.className="pivot-grand-total-footer",r.appendChild(this.grandTotalFooter));const t={__pivotRowKey:"__grandTotal",__pivotLabel:"Grand Total",__pivotIsGrandTotal:!0,__pivotTotal:this.pivotResult.grandTotal,...this.pivotResult.totals};j(t,this.grandTotalFooter,this.gridColumns)}cleanupGrandTotalFooter(){this.grandTotalFooter&&(this.grandTotalFooter.remove(),this.grandTotalFooter=null)}toggle(e){this.userHasToggledExpand=!0,this.expandedKeys.has(e)?this.expandedKeys.delete(e):this.expandedKeys.add(e),this.requestRender()}expand(e){this.userHasToggledExpand=!0,this.expandedKeys.add(e),this.requestRender()}collapse(e){this.userHasToggledExpand=!0,this.expandedKeys.delete(e),this.requestRender()}expandAll(){this.userHasToggledExpand=!0,this.expandAllKeys(),this.requestRender()}collapseAll(){this.userHasToggledExpand=!0,this.expandedKeys.clear(),this.requestRender()}expandAllKeys(){if(!this.pivotResult)return;const e=S(this.pivotResult.rows);for(const r of e)this.expandedKeys.add(r)}isExpanded(e){return this.expandedKeys.has(e)}enablePivot(){this.originalColumns.length===0&&this.captureOriginalColumns(),this.isActive=!0,this.requestRender()}disablePivot(){this.isActive=!1,this.pivotResult=null,this.requestRender()}isPivotActive(){return this.isActive}getPivotResult(){return this.pivotResult}setRowGroupFields(e){this.config.rowGroupFields=e,this.requestRender()}setColumnGroupFields(e){this.config.columnGroupFields=e,this.requestRender()}setValueFields(e){this.config.valueFields=e,this.requestRender()}refresh(){this.pivotResult=null,this.requestRender()}showPanel(){this.grid.openToolPanel(),this.grid.expandedToolPanelSections.includes(g.PANEL_ID)||this.grid.toggleToolPanelSection(g.PANEL_ID)}hidePanel(){this.grid.closeToolPanel()}togglePanel(){this.grid.isToolPanelOpen||this.grid.openToolPanel(),this.grid.toggleToolPanelSection(g.PANEL_ID)}isPanelVisible(){return this.grid.isToolPanelOpen&&this.grid.expandedToolPanelSections.includes(g.PANEL_ID)}get gridColumns(){return this.grid.columns??[]}refreshIfActive(){this.isActive&&this.refresh(),this.refreshPanel()}buildFieldHeaderMap(){const e=this.getAvailableFields();this.fieldHeaderMap.clear();for(const r of e)this.fieldHeaderMap.set(r.field,r.header)}getAvailableFields(){return this.originalColumns.length>0?this.originalColumns:this.captureOriginalColumns()}captureOriginalColumns(){try{const e=this.grid.getAllColumns?.()??this.grid.columns??[];return this.originalColumns=e.filter(r=>!r.field.startsWith("__pivot")).map(r=>({field:r.field,header:r.header??r.field})),this.originalColumns}catch{return[]}}renderPanel(e){this.panelContainer=e,this.originalColumns.length===0&&this.captureOriginalColumns();const r={onTogglePivot:t=>{t?this.enablePivot():this.disablePivot(),this.refreshPanel()},onAddFieldToZone:(t,o)=>this.addFieldToZone(t,o),onRemoveFieldFromZone:(t,o)=>this.removeFieldFromZone(t,o),onAddValueField:(t,o)=>this.addValueField(t,o),onRemoveValueField:t=>this.removeValueField(t),onUpdateValueAggFunc:(t,o)=>this.updateValueAggFunc(t,o),onOptionChange:(t,o)=>{this.config[t]=o,this.isActive&&this.refresh()},getAvailableFields:()=>this.getAvailableFields()};return V(e,this.config,this.isActive,r)}refreshPanel(){this.panelContainer&&(this.panelContainer.innerHTML="",this.renderPanel(this.panelContainer))}addFieldToZone(e,r){if(r==="rowGroups"){const t=this.config.rowGroupFields??[];t.includes(e)||(this.config.rowGroupFields=[...t,e])}else{const t=this.config.columnGroupFields??[];t.includes(e)||(this.config.columnGroupFields=[...t,e])}this.removeFromOtherZones(e,r),this.refreshIfActive()}removeFieldFromZone(e,r){r==="rowGroups"?this.config.rowGroupFields=(this.config.rowGroupFields??[]).filter(t=>t!==e):this.config.columnGroupFields=(this.config.columnGroupFields??[]).filter(t=>t!==e),this.refreshIfActive()}removeFromOtherZones(e,r){r!=="rowGroups"&&(this.config.rowGroupFields=(this.config.rowGroupFields??[]).filter(t=>t!==e)),r!=="columnGroups"&&(this.config.columnGroupFields=(this.config.columnGroupFields??[]).filter(t=>t!==e)),r!=="values"&&(this.config.valueFields=(this.config.valueFields??[]).filter(t=>t.field!==e))}addValueField(e,r){const t=this.config.valueFields??[];t.some(o=>o.field===e)||(this.config.valueFields=[...t,{field:e,aggFunc:r}]),this.removeFromOtherZones(e,"values"),this.refreshIfActive()}removeValueField(e){this.config.valueFields=(this.config.valueFields??[]).filter(r=>r.field!==e),this.refreshIfActive()}updateValueAggFunc(e,r){const t=this.config.valueFields??[],o=t.findIndex(i=>i.field===e);o>=0&&(t[o]={...t[o],aggFunc:r},this.config.valueFields=[...t]),this.isActive&&this.refresh()}}v.PivotPlugin=g,Object.defineProperty(v,Symbol.toStringTag,{value:"Module"})}));
|
|
2
2
|
//# sourceMappingURL=pivot.umd.js.map
|