@toolbox-web/grid 1.25.0 → 1.25.2

package/lib/plugins/grouping-columns/types.d.ts

@@ -38,7 +38,64 @@ declare module '../../core/types' {
 }
 /** Configuration options for the column groups plugin */
 export interface GroupingColumnsConfig {
-    /** Custom group header renderer */
+    /**
+     * Declarative column group definitions.
+     * When provided here, takes precedence over `gridConfig.columnGroups`.
+     *
+     * @example
+     * ```ts
+     * features: {
+     *   groupingColumns: {
+     *     columnGroups: [
+     *       { header: 'Personal Info', children: ['firstName', 'lastName', 'email'] },
+     *       { header: 'Work Info', children: ['department', 'title', 'salary'] },
+     *     ],
+     *   }
+     * }
+     * ```
+     */
+    columnGroups?: ColumnGroupDefinition[];
+    /**
+     * Group header renderer called for each column group.
+     * Receives the group's `id`, `label`, and `columns` in the params,
+     * so a single function can handle all groups or differentiate per group via `params.id`.
+     *
+     * When a {@link ColumnGroupDefinition.renderer | per-group renderer} is also defined,
+     * the per-group renderer takes precedence for that specific group.
+     *
+     * @example Uniform rendering for all groups:
+     * ```ts
+     * groupHeaderRenderer: (params) => {
+     *   return `<strong>${params.label}</strong> (${params.columns.length} cols)`;
+     * }
+     * ```
+     *
+     * @example Per-group rendering via switch on `params.id`:
+     * ```ts
+     * groupHeaderRenderer: (params) => {
+     *   const icons: Record<string, string> = { personal: '👤', work: '💼' };
+     *   return `${icons[params.id] ?? '📁'} <strong>${params.label}</strong>`;
+     * }
+     * ```
+     *
+     * @example Return an HTMLElement for full control:
+     * ```ts
+     * groupHeaderRenderer: (params) => {
+     *   const el = document.createElement('span');
+     *   el.style.cssText = 'display: flex; align-items: center; gap: 0.4em;';
+     *   el.textContent = `${params.label} — ${params.columns.length} columns`;
+     *   return el;
+     * }
+     * ```
+     *
+     * @example Return void to keep the default text label:
+     * ```ts
+     * groupHeaderRenderer: (params) => {
+     *   if (params.id === 'misc') return; // default label for this group
+     *   return `<em>${params.label}</em>`;
+     * }
+     * ```
+     */
     groupHeaderRenderer?: (params: GroupHeaderRenderParams) => HTMLElement | string | void;
     /** Whether to show group borders (default: true) */
     showGroupBorders?: boolean;
@@ -51,12 +108,14 @@ export interface GroupingColumnsConfig {
     lockGroupOrder?: boolean;
 }
 /**
- * Parameters passed to the {@link GroupingColumnsConfig.groupHeaderRenderer | groupHeaderRenderer} callback.
+ * Parameters passed to the {@link GroupingColumnsConfig.groupHeaderRenderer | groupHeaderRenderer}
+ * and {@link ColumnGroupDefinition.renderer | per-group renderer} callbacks.
  *
- * @example Return an HTML string with the group label and column count:
+ * @example Render all groups with a shared function, differentiated by id:
  * ```ts
  * groupHeaderRenderer: (params) => {
- *   return `<strong>${params.label}</strong> (${params.columns.length} cols)`;
+ *   const icons = { personal: '👤', work: '💼' };
+ *   return `${icons[params.id] ?? '📁'} <strong>${params.label}</strong>`;
  * }
  * ```
  *
@@ -98,16 +157,42 @@ export interface GroupingColumnsState {
     isActive: boolean;
 }
 /**
- * Declarative column group definition for GridConfig.columnGroups.
- * Maps group metadata to column field names.
+ * Declarative column group definition for GridConfig.columnGroups or
+ * {@link GroupingColumnsConfig.columnGroups}.
+ *
+ * @example Minimal (id auto-generated from header)
+ * ```ts
+ * { header: 'Personal Info', children: ['firstName', 'lastName'] }
+ * ```
+ *
+ * @example With explicit id and per-group renderer
+ * ```ts
+ * {
+ *   id: 'personal',
+ *   header: 'Personal Info',
+ *   children: ['firstName', 'lastName'],
+ *   renderer: (params) => `<strong>${params.label}</strong>`,
+ * }
+ * ```
  */
 export interface ColumnGroupDefinition {
-    /** Unique group identifier */
-    id: string;
+    /**
+     * Unique group identifier.
+     * When omitted, auto-generated as a slug of {@link header}
+     * (e.g. `'Personal Info'` → `'personal-info'`).
+     *
+     * Required when {@link renderer} is provided without a {@link header}.
+     */
+    id?: string;
     /** Display label for the group header */
     header: string;
     /** Array of column field names belonging to this group */
     children: string[];
+    /**
+     * Custom renderer for this specific group's header cell.
+     * Takes precedence over {@link GroupingColumnsConfig.groupHeaderRenderer}.
+     */
+    renderer?: (params: GroupHeaderRenderParams) => HTMLElement | string | void;
 }
 /** Column group definition (computed at runtime) */
 export interface ColumnGroup<T = any> {
@@ -119,6 +204,11 @@ export interface ColumnGroup<T = any> {
     columns: CoreColumnConfig<T>[];
     /** Index of first column in this group */
     firstIndex: number;
+    /**
+     * Per-group renderer. Resolved from the originating
+     * {@link ColumnGroupDefinition.renderer} when present.
+     */
+    renderer?: (params: GroupHeaderRenderParams) => HTMLElement | string | void;
 }
 /** Extended column group with implicit flag */
 export interface ColumnGroupInternal<T = any> extends ColumnGroup<T> {

package/lib/plugins/grouping-rows/GroupingRowsPlugin.d.ts

@@ -60,10 +60,10 @@ export interface GroupState {
  *
  * @example Single-Level Grouping by Department
  * ```ts
- * import '@toolbox-web/grid';
+ * import { queryGrid } from '@toolbox-web/grid';
  * import { GroupingRowsPlugin } from '@toolbox-web/grid/plugins/grouping-rows';
  *
- * const grid = document.querySelector('tbw-grid');
+ * const grid = queryGrid('tbw-grid');
  * grid.gridConfig = {
  *   columns: [
  *     { field: 'name', header: 'Employee' },

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

@@ -1,3 +1,3 @@
-const e='<svg viewBox="0 0 16 16" width="12" height="12"><path fill="currentColor" d="M6 10.5a.5.5 0 0 1 .5-.5h3a.5.5 0 0 1 0 1h-3a.5.5 0 0 1-.5-.5zm-2-3a.5.5 0 0 1 .5-.5h7a.5.5 0 0 1 0 1h-7a.5.5 0 0 1-.5-.5zm-2-3a.5.5 0 0 1 .5-.5h11a.5.5 0 0 1 0 1h-11a.5.5 0 0 1-.5-.5z"/></svg>',t={expand:"▶",collapse:"▼",sortAsc:"▲",sortDesc:"▼",sortNone:"⇅",submenuArrow:"▶",dragHandle:"⋮⋮",toolPanel:"☰",filter:e,filterActive:e,print:"🖨️"};class n{static dependencies;static manifest;aliases;version="undefined"!=typeof __GRID_VERSION__?__GRID_VERSION__:"dev";styles;cellRenderers;headerRenderers;cellEditors;grid;config;userConfig;#e;get defaultConfig(){return{}}constructor(e={}){this.userConfig=e}attach(e){this.#e?.abort(),this.#e=new AbortController,this.grid=e,this.config={...this.defaultConfig,...this.userConfig}}detach(){this.#e?.abort(),this.#e=void 0}getPlugin(e){return this.grid?.getPlugin(e)}emit(e,t){this.grid?.dispatchEvent?.(new CustomEvent(e,{detail:t,bubbles:!0}))}emitCancelable(e,t){const n=new CustomEvent(e,{detail:t,bubbles:!0,cancelable:!0});return this.grid?.dispatchEvent?.(n),n.defaultPrevented}on(e,t){this.grid?._pluginManager?.subscribe(this,e,t)}off(e){this.grid?._pluginManager?.unsubscribe(this,e)}emitPluginEvent(e,t){this.grid?._pluginManager?.emitPluginEvent(e,t)}requestRender(){this.grid?.requestRender?.()}requestColumnsRender(){this.grid?.requestColumnsRender?.()}requestRenderWithFocus(){this.grid?.requestRenderWithFocus?.()}requestAfterRender(){this.grid?.requestAfterRender?.()}requestVirtualRefresh(){this.grid?.requestVirtualRefresh?.()}get rows(){return this.grid?.rows??[]}get sourceRows(){return this.grid?.sourceRows??[]}get columns(){return this.grid?.columns??[]}get visibleColumns(){return this.grid?._visibleColumns??[]}get gridElement(){return this.grid?._hostElement}get disconnectSignal(){return this.#e?.signal??this.grid?.disconnectSignal}get gridIcons(){const e=this.grid?.gridConfig?.icons??{};return{...t,...e}}get isAnimationEnabled(){const e=this.grid?.effectiveConfig?.animation?.mode??"reduced-motion";if(!1===e||"off"===e)return!1;if(!0===e||"on"===e)return!0;const t=this.gridElement;if(t){return"0"!==getComputedStyle(t).getPropertyValue("--tbw-animation-enabled").trim()}return!0}get animationDuration(){const e=this.gridElement;if(e){const t=getComputedStyle(e).getPropertyValue("--tbw-animation-duration").trim(),n=parseInt(t,10);if(!isNaN(n))return n}return 200}resolveIcon(e,t){return void 0!==t?t:this.gridIcons[e]}setIcon(e,t){"string"==typeof t?e.innerHTML=t:t instanceof HTMLElement&&(e.innerHTML="",e.appendChild(t.cloneNode(!0)))}warn(e){var t,n;console.warn(`${t=this.gridElement.id,n=this.name,`[tbw-grid${t?`#${t}`:""}${n?`:${n}`:""}]`} ${e}`)}}const r={sum:(e,t)=>e.reduce((e,n)=>e+(Number(n[t])||0),0),avg:(e,t)=>{const n=e.reduce((e,n)=>e+(Number(n[t])||0),0);return e.length?n/e.length:0},count:e=>e.length,min:(e,t)=>e.length?Math.min(...e.map(e=>Number(e[t])||1/0)):0,max:(e,t)=>e.length?Math.max(...e.map(e=>Number(e[t])||-1/0)):0,first:(e,t)=>e[0]?.[t],last:(e,t)=>e[e.length-1]?.[t]},i=/* @__PURE__ */new Map,o={register(e,t){i.set(e,t)},unregister(e){i.delete(e)},get(e){if(void 0!==e)return"function"==typeof e?e:i.get(e)??r[e]},run(e,t,n,r){const i=this.get(e);return i?i(t,n,r):void 0},has:e=>i.has(e)||e in r,list:()=>[...Object.keys(r),...i.keys()]};o.register.bind(o),o.unregister.bind(o),o.get.bind(o);const s=o.run.bind(o);function a({rows:e,config:t,expanded:n,initialExpanded:r}){const i=t.groupOn;if("function"!=typeof i)return[];const o={key:"__root__",value:null,depth:-1,rows:[],children:/* @__PURE__ */new Map};if(e.forEach(e=>{let t=i(e);null==t||!1===t?t=["__ungrouped__"]:Array.isArray(t)||(t=[t]);let n=o;t.forEach((e,t)=>{const r=null==e?"∅":String(e),i="__root__"===n.key?r:n.key+"||"+r;let o=n.children.get(r);o||(o={key:i,value:e,depth:t,rows:[],children:/* @__PURE__ */new Map,parent:n},n.children.set(r,o)),n=o}),n.rows.push(e)}),1===o.children.size&&o.children.has("__ungrouped__")){if(o.children.get("__ungrouped__").rows.length===e.length)return[]}const s=/* @__PURE__ */new Set([...n,...r??[]]),a=[],d=t=>{if(t===o)return void t.children.forEach(e=>d(e));const n=s.has(t.key);a.push({kind:"group",key:t.key,value:t.value,depth:t.depth,rows:t.rows,expanded:n}),n&&(t.children.size?t.children.forEach(e=>d(e)):t.rows.forEach(t=>a.push({kind:"data",row:t,rowIndex:e.indexOf(t)})))};return d(o),a}o.list.bind(o);class d extends n{static manifest={events:[{type:"grouping-state-change",description:"Emitted when groups are expanded/collapsed. Subscribers can react to row visibility changes."}],queries:[{type:"canMoveRow",description:"Returns false for group header rows (cannot be reordered)"}],configRules:[{id:"groupingRows/accordion-defaultExpanded",severity:"warn",message:'"accordion: true" and "defaultExpanded" (non-false) are used together.\n  → In accordion mode, only one group can be open at a time.\n  → Using defaultExpanded with multiple groups will collapse to one on first toggle.\n  → Consider using "defaultExpanded: false" or a single group key/index with accordion mode.',check:e=>!0===e.accordion&&!1!==e.defaultExpanded&&void 0!==e.defaultExpanded&&!("number"==typeof e.defaultExpanded)&&!("string"==typeof e.defaultExpanded)&&(!0===e.defaultExpanded||Array.isArray(e.defaultExpanded)&&e.defaultExpanded.length>1)}]};name="groupingRows";styles="@layer tbw-plugins{.group-row{display:grid;grid-template-columns:var(--tbw-column-template);background:var(--tbw-grouping-rows-bg, var(--tbw-color-panel-bg));font-weight:500;border-bottom:var(--tbw-row-divider);min-height:var(--tbw-row-height)}.group-row .cell{display:flex;align-items:center;padding:var(--tbw-cell-padding, .125rem .5rem)}.group-row:hover{background:var(--tbw-grouping-rows-bg-hover, var(--tbw-color-row-hover))}.group-toggle{cursor:pointer;-webkit-user-select:none;user-select:none;display:inline-flex;align-items:center;justify-content:center;width:var(--tbw-toggle-size, 1.25rem);height:var(--tbw-toggle-size, 1.25rem);margin-right:.25rem;background:none;border:0;font:inherit}.group-toggle:hover{background:var(--tbw-grouping-rows-toggle-hover, var(--tbw-color-row-hover));border-radius:var(--tbw-border-radius, .125rem)}.group-label{display:inline-flex;align-items:center;gap:var(--tbw-panel-gap, var(--tbw-spacing-md, .5rem))}.group-count{color:var(--tbw-grouping-rows-count-color, var(--tbw-color-fg-muted));font-size:var(--tbw-font-size-xs, .85em);font-weight:400}.group-aggregates{display:inline-flex;align-items:center;gap:var(--tbw-spacing-lg, 1rem);margin-left:var(--tbw-spacing-lg, 1rem);font-weight:400;font-size:var(--tbw-font-size-sm, .875em);color:var(--tbw-grouping-rows-aggregate-color, var(--tbw-color-fg-muted))}.group-aggregate{white-space:nowrap}.group-row{padding-left:calc(var(--tbw-group-depth, 0) * var(--tbw-group-indent-width, 1.25em))}.data-grid-row.tbw-group-slide-in{animation:tbw-group-slide-in var(--tbw-animation-duration, .2s) var(--tbw-animation-easing, ease-out) forwards}@keyframes tbw-group-slide-in{0%{opacity:0;transform:translate(-8px)}to{opacity:1;transform:translate(0)}}.data-grid-row.tbw-group-fade-in{animation:tbw-group-fade-in var(--tbw-animation-duration, .2s) var(--tbw-animation-easing, ease-out) forwards}@keyframes tbw-group-fade-in{0%{opacity:0}to{opacity:1}}}";get defaultConfig(){return{defaultExpanded:!1,showRowCount:!0,indentWidth:20,aggregators:{},animation:"slide",accordion:!1}}expandedKeys=/* @__PURE__ */new Set;flattenedRows=[];isActive=!1;previousVisibleKeys=/* @__PURE__ */new Set;keysToAnimate=/* @__PURE__ */new Set;hasAppliedDefaultExpanded=!1;get animationStyle(){return!!this.isAnimationEnabled&&(this.config.animation??"slide")}detach(){this.expandedKeys.clear(),this.flattenedRows=[],this.isActive=!1,this.previousVisibleKeys.clear(),this.keysToAnimate.clear(),this.hasAppliedDefaultExpanded=!1}getRowHeight(e,t){if(null!=this.config.groupRowHeight)return!0===e.__isGroupRow?this.config.groupRowHeight:void 0}handleQuery(e){if("canMoveRow"===e.type){const t=e.context;if(!0===t?.__isGroupRow)return!1}}static detect(e,t){return"function"==typeof t?.groupOn||"boolean"==typeof t?.enableRowGrouping}processRows(e){const t=this.config;if("function"!=typeof t.groupOn)return this.isActive=!1,this.flattenedRows=[],[...e];const n=a({rows:[...e],config:t,expanded:/* @__PURE__ */new Set});if(0===n.length)return this.isActive=!1,this.flattenedRows=[],[...e];let r;if(!this.hasAppliedDefaultExpanded&&0===this.expandedKeys.size&&!1!==t.defaultExpanded){const e=function(e){return e.filter(e=>"group"===e.kind).map(e=>e.key)}(n);r=function(e,t){if(!0===e)return new Set(t);if(!1===e||null==e)/* @__PURE__ */
-return new Set;if("number"==typeof e){const n=t[e];return n?/* @__PURE__ */new Set([n]):/* @__PURE__ */new Set}return"string"==typeof e?/* @__PURE__ */new Set([e]):Array.isArray(e)?new Set(e):/* @__PURE__ */new Set}(t.defaultExpanded??!1,e),r.size>0&&(this.expandedKeys=new Set(r),this.hasAppliedDefaultExpanded=!0)}const i=a({rows:[...e],config:t,expanded:this.expandedKeys,initialExpanded:r});this.isActive=!0,this.flattenedRows=i,this.keysToAnimate.clear();const o=/* @__PURE__ */new Set;return i.forEach((e,t)=>{if("data"===e.kind){const e=`data-${t}`;o.add(e),this.previousVisibleKeys.has(e)||this.keysToAnimate.add(e)}}),this.previousVisibleKeys=o,i.map(e=>{return"group"===e.kind?{__isGroupRow:!0,__groupKey:e.key,__groupValue:e.value,__groupDepth:e.depth,__groupRows:e.rows,__groupExpanded:e.expanded,__groupRowCount:(t=e,"group"!==t.kind?0:t.rows.length),__rowCacheKey:`group:${e.key}`}:e.row;var t})}onCellClick(e){const t=e.row;if(t?.__isGroupRow){const n=e.originalEvent.target;if(n?.closest(".group-toggle"))return this.toggle(t.__groupKey),!0}}onKeyDown(e){if(" "!==e.key)return;const t=this.grid._focusRow,n=this.rows[t];return n?.__isGroupRow?(e.preventDefault(),this.toggle(n.__groupKey),this.requestRenderWithFocus(),!0):void 0}renderRow(e,t,n){if(!e?.__isGroupRow)return!1;const r=this.config;if(r.groupRowRenderer){const n=()=>{this.toggle(e.__groupKey)},i=r.groupRowRenderer({key:e.__groupKey,value:e.__groupValue,depth:e.__groupDepth,rows:e.__groupRows,expanded:e.__groupExpanded,toggleExpand:n});if(i)return t.className="data-grid-row group-row",t.__isCustomRow=!0,t.setAttribute("data-group-depth",String(e.__groupDepth)),"string"==typeof i?t.innerHTML=i:(t.innerHTML="",t.appendChild(i)),!0}const i=()=>{this.toggle(e.__groupKey)};t.className="data-grid-row group-row",t.__isCustomRow=!0,t.setAttribute("data-group-depth",String(e.__groupDepth)),t.setAttribute("role","row"),t.setAttribute("aria-expanded",String(e.__groupExpanded)),t.style.setProperty("--tbw-group-depth",String(e.__groupDepth||0)),void 0!==r.indentWidth&&t.style.setProperty("--tbw-group-indent-width",`${r.indentWidth}px`),t.style.height="",t.innerHTML="";return!1!==r.fullWidth?this.renderFullWidthGroupRow(e,t,i):this.renderPerColumnGroupRow(e,t,i),!0}afterRender(){const e=this.animationStyle;if(!1===e||0===this.keysToAnimate.size)return;const t=this.gridElement?.querySelector(".rows");if(!t)return;const n="fade"===e?"tbw-group-fade-in":"tbw-group-slide-in";for(const r of t.querySelectorAll(".data-grid-row:not(.group-row)")){const e=r.querySelector(".cell[data-row]"),t=e?parseInt(e.getAttribute("data-row")??"-1",10):-1,i=this.flattenedRows[t],o="data"===i?.kind?`data-${t}`:void 0;o&&this.keysToAnimate.has(o)&&(r.classList.add(n),r.addEventListener("animationend",()=>r.classList.remove(n),{once:!0}))}this.keysToAnimate.clear()}createToggleButton(e,t){const n=document.createElement("button");return n.type="button",n.className="group-toggle"+(e?" expanded":""),n.setAttribute("aria-label",e?"Collapse group":"Expand group"),this.setIcon(n,this.resolveIcon(e?"collapse":"expand")),n.addEventListener("click",e=>{e.stopPropagation(),t()}),n}getGroupLabelText(e,t,n){const r=this.config;return r.formatLabel?r.formatLabel(e,t,n):String(e)}renderFullWidthGroupRow(e,t,n){const r=this.config,i=r.aggregators??{},o=e.__groupRows??[],a=document.createElement("div");a.className="cell group-full",a.style.gridColumn="1 / -1",a.setAttribute("role","gridcell"),a.setAttribute("data-col","0"),a.appendChild(this.createToggleButton(e.__groupExpanded,n));const d=document.createElement("span");if(d.className="group-label",d.textContent=this.getGroupLabelText(e.__groupValue,e.__groupDepth||0,e.__groupKey),a.appendChild(d),!1!==r.showRowCount){const t=document.createElement("span");t.className="group-count",t.textContent=`(${e.__groupRowCount??e.__groupRows?.length??0})`,a.appendChild(t)}const l=Object.entries(i);if(l.length>0){const e=document.createElement("span");e.className="group-aggregates";for(const[t,n]of l){const r=this.columns.find(e=>e.field===t),i=s(n,o,t,r);if(null!=i){const n=document.createElement("span");n.className="group-aggregate",n.setAttribute("data-field",t);const o=r?.header??t;n.textContent=`${o}: ${i}`,e.appendChild(n)}}e.children.length>0&&a.appendChild(e)}t.appendChild(a)}renderPerColumnGroupRow(e,t,n){const r=this.config,i=r.aggregators??{},o=this.columns,a=e.__groupRows??[],d=this.gridElement?.querySelector(".body"),l=d?.style.gridTemplateColumns||"";l&&(t.style.display="grid",t.style.gridTemplateColumns=l);let u=!1;o.forEach((o,d)=>{const l=document.createElement("div");if(l.className="cell group-cell",l.setAttribute("data-col",String(d)),l.setAttribute("role","gridcell"),"__tbw_expander"===o.field)return l.setAttribute("data-field",o.field),void t.appendChild(l);if(u){const e=i[o.field];if(e){const t=s(e,a,o.field,o);l.textContent=null!=t?String(t):""}else l.textContent=""}else{u=!0,l.appendChild(this.createToggleButton(e.__groupExpanded,n));const t=document.createElement("span"),d=i[o.field];if(d){const n=s(d,a,o.field,o);t.textContent=String(null!=n?n:e.__groupValue)}else t.textContent=this.getGroupLabelText(e.__groupValue,e.__groupDepth||0,e.__groupKey);if(l.appendChild(t),!1!==r.showRowCount){const e=document.createElement("span");e.className="group-count",e.textContent=` (${a.length})`,l.appendChild(e)}}t.appendChild(l)})}expandAll(){this.expandedKeys=function(e){const t=/* @__PURE__ */new Set;for(const n of e)"group"===n.kind&&t.add(n.key);return t}(this.flattenedRows),this.emitPluginEvent("grouping-state-change",{expandedKeys:[...this.expandedKeys]}),this.requestRender()}collapseAll(){this.expandedKeys=/* @__PURE__ */new Set,this.emitPluginEvent("grouping-state-change",{expandedKeys:[...this.expandedKeys]}),this.requestRender()}toggle(e){const t=!this.expandedKeys.has(e),n=this.config,r=this.flattenedRows.find(t=>"group"===t.kind&&t.key===e);if(n.accordion&&t&&r){const t=/* @__PURE__ */new Set;for(const n of this.expandedKeys)if(e.startsWith(n+"||")||n.startsWith(e+"||"))e.startsWith(n+"||")&&t.add(n);else{const e=this.flattenedRows.find(e=>"group"===e.kind&&e.key===n);e&&e.depth!==r.depth&&t.add(n)}t.add(e),this.expandedKeys=t}else this.expandedKeys=function(e,t){const n=new Set(e);return n.has(t)?n.delete(t):n.add(t),n}(this.expandedKeys,e);this.emit("group-toggle",{key:e,expanded:this.expandedKeys.has(e),value:r?.value,depth:r?.depth??0}),this.emitPluginEvent("grouping-state-change",{expandedKeys:[...this.expandedKeys]}),this.requestRender()}isExpanded(e){return this.expandedKeys.has(e)}expand(e){this.expandedKeys.has(e)||(this.expandedKeys=/* @__PURE__ */new Set([...this.expandedKeys,e]),this.requestRender())}collapse(e){if(this.expandedKeys.has(e)){const t=new Set(this.expandedKeys);t.delete(e),this.expandedKeys=t,this.requestRender()}}getGroupState(){const e=this.flattenedRows.filter(e=>"group"===e.kind);return{isActive:this.isActive,expandedCount:this.expandedKeys.size,totalGroups:e.length,expandedKeys:[...this.expandedKeys]}}getRowCount(){return this.flattenedRows.length}refreshGroups(){this.requestRender()}getExpandedGroups(){return[...this.expandedKeys]}getFlattenedRows(){return this.flattenedRows}isGroupingActive(){return this.isActive}setGroupOn(e){this.config.groupOn=e,this.requestRender()}}export{d as GroupingRowsPlugin};
+function e(e,t){return`[tbw-grid${e?`#${e}`:""}${t?`:${t}`:""}]`}function t(t,n,r,o){return`${e(r,o)} ${t}: ${n}\n\n  → More info: ${function(e){return`https://toolboxjs.com/grid/errors#${e.toLowerCase()}`}(t)}`}const n='<svg viewBox="0 0 16 16" width="12" height="12"><path fill="currentColor" d="M6 10.5a.5.5 0 0 1 .5-.5h3a.5.5 0 0 1 0 1h-3a.5.5 0 0 1-.5-.5zm-2-3a.5.5 0 0 1 .5-.5h7a.5.5 0 0 1 0 1h-7a.5.5 0 0 1-.5-.5zm-2-3a.5.5 0 0 1 .5-.5h11a.5.5 0 0 1 0 1h-11a.5.5 0 0 1-.5-.5z"/></svg>',r={expand:"▶",collapse:"▼",sortAsc:"▲",sortDesc:"▼",sortNone:"⇅",submenuArrow:"▶",dragHandle:"⋮⋮",toolPanel:"☰",filter:n,filterActive:n,print:"🖨️"};class o{static dependencies;static manifest;aliases;version="undefined"!=typeof __GRID_VERSION__?__GRID_VERSION__:"dev";styles;cellRenderers;headerRenderers;cellEditors;grid;config;userConfig;#e;get defaultConfig(){return{}}constructor(e={}){this.userConfig=e}attach(e){this.#e?.abort(),this.#e=new AbortController,this.grid=e,this.config={...this.defaultConfig,...this.userConfig}}detach(){this.#e?.abort(),this.#e=void 0}getPlugin(e){return this.grid?.getPlugin(e)}emit(e,t){this.grid?.dispatchEvent?.(new CustomEvent(e,{detail:t,bubbles:!0}))}emitCancelable(e,t){const n=new CustomEvent(e,{detail:t,bubbles:!0,cancelable:!0});return this.grid?.dispatchEvent?.(n),n.defaultPrevented}on(e,t){this.grid?._pluginManager?.subscribe(this,e,t)}off(e){this.grid?._pluginManager?.unsubscribe(this,e)}emitPluginEvent(e,t){this.grid?._pluginManager?.emitPluginEvent(e,t)}requestRender(){this.grid?.requestRender?.()}requestColumnsRender(){this.grid?.requestColumnsRender?.()}requestRenderWithFocus(){this.grid?.requestRenderWithFocus?.()}requestAfterRender(){this.grid?.requestAfterRender?.()}requestVirtualRefresh(){this.grid?.requestVirtualRefresh?.()}get rows(){return this.grid?.rows??[]}get sourceRows(){return this.grid?.sourceRows??[]}get columns(){return this.grid?.columns??[]}get visibleColumns(){return this.grid?._visibleColumns??[]}get gridElement(){return this.grid?._hostElement}get disconnectSignal(){return this.#e?.signal??this.grid?.disconnectSignal}get gridIcons(){const e=this.grid?.gridConfig?.icons??{};return{...r,...e}}get isAnimationEnabled(){const e=this.grid?.effectiveConfig?.animation?.mode??"reduced-motion";if(!1===e||"off"===e)return!1;if(!0===e||"on"===e)return!0;const t=this.gridElement;if(t){return"0"!==getComputedStyle(t).getPropertyValue("--tbw-animation-enabled").trim()}return!0}get animationDuration(){const e=this.gridElement;if(e){const t=getComputedStyle(e).getPropertyValue("--tbw-animation-duration").trim(),n=parseInt(t,10);if(!isNaN(n))return n}return 200}resolveIcon(e,t){return void 0!==t?t:this.gridIcons[e]}setIcon(e,t){"string"==typeof t?e.innerHTML=t:t instanceof HTMLElement&&(e.innerHTML="",e.appendChild(t.cloneNode(!0)))}warn(n,r){void 0!==r?console.warn(t(n,r,this.gridElement.id,this.name)):console.warn(`${e(this.gridElement.id,this.name)} ${n}`)}throwDiagnostic(e,n){throw new Error(t(e,n,this.gridElement.id,this.name))}}const i={sum:(e,t)=>e.reduce((e,n)=>e+(Number(n[t])||0),0),avg:(e,t)=>{const n=e.reduce((e,n)=>e+(Number(n[t])||0),0);return e.length?n/e.length:0},count:e=>e.length,min:(e,t)=>e.length?Math.min(...e.map(e=>Number(e[t])||1/0)):0,max:(e,t)=>e.length?Math.max(...e.map(e=>Number(e[t])||-1/0)):0,first:(e,t)=>e[0]?.[t],last:(e,t)=>e[e.length-1]?.[t]},s=/* @__PURE__ */new Map,a={register(e,t){s.set(e,t)},unregister(e){s.delete(e)},get(e){if(void 0!==e)return"function"==typeof e?e:s.get(e)??i[e]},run(e,t,n,r){const o=this.get(e);return o?o(t,n,r):void 0},has:e=>s.has(e)||e in i,list:()=>[...Object.keys(i),...s.keys()]};a.register.bind(a),a.unregister.bind(a),a.get.bind(a);const d=a.run.bind(a);function l({rows:e,config:t,expanded:n,initialExpanded:r}){const o=t.groupOn;if("function"!=typeof o)return[];const i={key:"__root__",value:null,depth:-1,rows:[],children:/* @__PURE__ */new Map};if(e.forEach(e=>{let t=o(e);null==t||!1===t?t=["__ungrouped__"]:Array.isArray(t)||(t=[t]);let n=i;t.forEach((e,t)=>{const r=null==e?"∅":String(e),o="__root__"===n.key?r:n.key+"||"+r;let i=n.children.get(r);i||(i={key:o,value:e,depth:t,rows:[],children:/* @__PURE__ */new Map,parent:n},n.children.set(r,i)),n=i}),n.rows.push(e)}),1===i.children.size&&i.children.has("__ungrouped__")){if(i.children.get("__ungrouped__").rows.length===e.length)return[]}const s=/* @__PURE__ */new Set([...n,...r??[]]),a=[],d=t=>{if(t===i)return void t.children.forEach(e=>d(e));const n=s.has(t.key);a.push({kind:"group",key:t.key,value:t.value,depth:t.depth,rows:t.rows,expanded:n}),n&&(t.children.size?t.children.forEach(e=>d(e)):t.rows.forEach(t=>a.push({kind:"data",row:t,rowIndex:e.indexOf(t)})))};return d(i),a}a.list.bind(a);class u extends o{static manifest={events:[{type:"grouping-state-change",description:"Emitted when groups are expanded/collapsed. Subscribers can react to row visibility changes."}],queries:[{type:"canMoveRow",description:"Returns false for group header rows (cannot be reordered)"}],configRules:[{id:"groupingRows/accordion-defaultExpanded",severity:"warn",message:'"accordion: true" and "defaultExpanded" (non-false) are used together.\n  → In accordion mode, only one group can be open at a time.\n  → Using defaultExpanded with multiple groups will collapse to one on first toggle.\n  → Consider using "defaultExpanded: false" or a single group key/index with accordion mode.',check:e=>!0===e.accordion&&!1!==e.defaultExpanded&&void 0!==e.defaultExpanded&&!("number"==typeof e.defaultExpanded)&&!("string"==typeof e.defaultExpanded)&&(!0===e.defaultExpanded||Array.isArray(e.defaultExpanded)&&e.defaultExpanded.length>1)}]};name="groupingRows";styles="@layer tbw-plugins{.group-row{display:grid;grid-template-columns:var(--tbw-column-template);background:var(--tbw-grouping-rows-bg, var(--tbw-color-panel-bg));font-weight:500;border-bottom:var(--tbw-row-divider);min-height:var(--tbw-row-height)}.group-row .cell{display:flex;align-items:center;padding:var(--tbw-cell-padding, .125rem .5rem)}.group-row:hover{background:var(--tbw-grouping-rows-bg-hover, var(--tbw-color-row-hover))}.group-toggle{cursor:pointer;-webkit-user-select:none;user-select:none;display:inline-flex;align-items:center;justify-content:center;width:var(--tbw-toggle-size, 1.25rem);height:var(--tbw-toggle-size, 1.25rem);margin-right:.25rem;background:none;border:0;font:inherit}.group-toggle:hover{background:var(--tbw-grouping-rows-toggle-hover, var(--tbw-color-row-hover));border-radius:var(--tbw-border-radius, .125rem)}.group-label{display:inline-flex;align-items:center;gap:var(--tbw-panel-gap, var(--tbw-spacing-md, .5rem))}.group-count{color:var(--tbw-grouping-rows-count-color, var(--tbw-color-fg-muted));font-size:var(--tbw-font-size-xs, .85em);font-weight:400}.group-aggregates{display:inline-flex;align-items:center;gap:var(--tbw-spacing-lg, 1rem);margin-left:var(--tbw-spacing-lg, 1rem);font-weight:400;font-size:var(--tbw-font-size-sm, .875em);color:var(--tbw-grouping-rows-aggregate-color, var(--tbw-color-fg-muted))}.group-aggregate{white-space:nowrap}.group-row{padding-left:calc(var(--tbw-group-depth, 0) * var(--tbw-group-indent-width, 1.25em))}.data-grid-row.tbw-group-slide-in{animation:tbw-group-slide-in var(--tbw-animation-duration, .2s) var(--tbw-animation-easing, ease-out) forwards}@keyframes tbw-group-slide-in{0%{opacity:0;transform:translate(-8px)}to{opacity:1;transform:translate(0)}}.data-grid-row.tbw-group-fade-in{animation:tbw-group-fade-in var(--tbw-animation-duration, .2s) var(--tbw-animation-easing, ease-out) forwards}@keyframes tbw-group-fade-in{0%{opacity:0}to{opacity:1}}}";get defaultConfig(){return{defaultExpanded:!1,showRowCount:!0,indentWidth:20,aggregators:{},animation:"slide",accordion:!1}}expandedKeys=/* @__PURE__ */new Set;flattenedRows=[];isActive=!1;previousVisibleKeys=/* @__PURE__ */new Set;keysToAnimate=/* @__PURE__ */new Set;hasAppliedDefaultExpanded=!1;get animationStyle(){return!!this.isAnimationEnabled&&(this.config.animation??"slide")}detach(){this.expandedKeys.clear(),this.flattenedRows=[],this.isActive=!1,this.previousVisibleKeys.clear(),this.keysToAnimate.clear(),this.hasAppliedDefaultExpanded=!1}getRowHeight(e,t){if(null!=this.config.groupRowHeight)return!0===e.__isGroupRow?this.config.groupRowHeight:void 0}handleQuery(e){if("canMoveRow"===e.type){const t=e.context;if(!0===t?.__isGroupRow)return!1}}static detect(e,t){return"function"==typeof t?.groupOn||"boolean"==typeof t?.enableRowGrouping}processRows(e){const t=this.config;if("function"!=typeof t.groupOn)return this.isActive=!1,this.flattenedRows=[],[...e];const n=l({rows:[...e],config:t,expanded:/* @__PURE__ */new Set});if(0===n.length)return this.isActive=!1,this.flattenedRows=[],[...e];let r;if(!this.hasAppliedDefaultExpanded&&0===this.expandedKeys.size&&!1!==t.defaultExpanded){const e=function(e){return e.filter(e=>"group"===e.kind).map(e=>e.key)}(n);r=function(e,t){if(!0===e)return new Set(t);if(!1===e||null==e)/* @__PURE__ */
+return new Set;if("number"==typeof e){const n=t[e];return n?/* @__PURE__ */new Set([n]):/* @__PURE__ */new Set}return"string"==typeof e?/* @__PURE__ */new Set([e]):Array.isArray(e)?new Set(e):/* @__PURE__ */new Set}(t.defaultExpanded??!1,e),r.size>0&&(this.expandedKeys=new Set(r),this.hasAppliedDefaultExpanded=!0)}const o=l({rows:[...e],config:t,expanded:this.expandedKeys,initialExpanded:r});this.isActive=!0,this.flattenedRows=o,this.keysToAnimate.clear();const i=/* @__PURE__ */new Set;return o.forEach((e,t)=>{if("data"===e.kind){const e=`data-${t}`;i.add(e),this.previousVisibleKeys.has(e)||this.keysToAnimate.add(e)}}),this.previousVisibleKeys=i,o.map(e=>{return"group"===e.kind?{__isGroupRow:!0,__groupKey:e.key,__groupValue:e.value,__groupDepth:e.depth,__groupRows:e.rows,__groupExpanded:e.expanded,__groupRowCount:(t=e,"group"!==t.kind?0:t.rows.length),__rowCacheKey:`group:${e.key}`}:e.row;var t})}onCellClick(e){const t=e.row;if(t?.__isGroupRow){const n=e.originalEvent.target;if(n?.closest(".group-toggle"))return this.toggle(t.__groupKey),!0}}onKeyDown(e){if(" "!==e.key)return;const t=this.grid._focusRow,n=this.rows[t];return n?.__isGroupRow?(e.preventDefault(),this.toggle(n.__groupKey),this.requestRenderWithFocus(),!0):void 0}renderRow(e,t,n){if(!e?.__isGroupRow)return!1;const r=this.config;if(r.groupRowRenderer){const n=()=>{this.toggle(e.__groupKey)},o=r.groupRowRenderer({key:e.__groupKey,value:e.__groupValue,depth:e.__groupDepth,rows:e.__groupRows,expanded:e.__groupExpanded,toggleExpand:n});if(o)return t.className="data-grid-row group-row",t.__isCustomRow=!0,t.setAttribute("data-group-depth",String(e.__groupDepth)),"string"==typeof o?t.innerHTML=o:(t.innerHTML="",t.appendChild(o)),!0}const o=()=>{this.toggle(e.__groupKey)};t.className="data-grid-row group-row",t.__isCustomRow=!0,t.setAttribute("data-group-depth",String(e.__groupDepth)),t.setAttribute("role","row"),t.setAttribute("aria-expanded",String(e.__groupExpanded)),t.style.setProperty("--tbw-group-depth",String(e.__groupDepth||0)),void 0!==r.indentWidth&&t.style.setProperty("--tbw-group-indent-width",`${r.indentWidth}px`),t.style.height="",t.innerHTML="";return!1!==r.fullWidth?this.renderFullWidthGroupRow(e,t,o):this.renderPerColumnGroupRow(e,t,o),!0}afterRender(){const e=this.animationStyle;if(!1===e||0===this.keysToAnimate.size)return;const t=this.gridElement?.querySelector(".rows");if(!t)return;const n="fade"===e?"tbw-group-fade-in":"tbw-group-slide-in";for(const r of t.querySelectorAll(".data-grid-row:not(.group-row)")){const e=r.querySelector(".cell[data-row]"),t=e?parseInt(e.getAttribute("data-row")??"-1",10):-1,o=this.flattenedRows[t],i="data"===o?.kind?`data-${t}`:void 0;i&&this.keysToAnimate.has(i)&&(r.classList.add(n),r.addEventListener("animationend",()=>r.classList.remove(n),{once:!0}))}this.keysToAnimate.clear()}createToggleButton(e,t){const n=document.createElement("button");return n.type="button",n.className="group-toggle"+(e?" expanded":""),n.setAttribute("aria-label",e?"Collapse group":"Expand group"),this.setIcon(n,this.resolveIcon(e?"collapse":"expand")),n.addEventListener("click",e=>{e.stopPropagation(),t()}),n}getGroupLabelText(e,t,n){const r=this.config;return r.formatLabel?r.formatLabel(e,t,n):String(e)}renderFullWidthGroupRow(e,t,n){const r=this.config,o=r.aggregators??{},i=e.__groupRows??[],s=document.createElement("div");s.className="cell group-full",s.style.gridColumn="1 / -1",s.setAttribute("role","gridcell"),s.setAttribute("data-col","0"),s.appendChild(this.createToggleButton(e.__groupExpanded,n));const a=document.createElement("span");if(a.className="group-label",a.textContent=this.getGroupLabelText(e.__groupValue,e.__groupDepth||0,e.__groupKey),s.appendChild(a),!1!==r.showRowCount){const t=document.createElement("span");t.className="group-count",t.textContent=`(${e.__groupRowCount??e.__groupRows?.length??0})`,s.appendChild(t)}const l=Object.entries(o);if(l.length>0){const e=document.createElement("span");e.className="group-aggregates";for(const[t,n]of l){const r=this.columns.find(e=>e.field===t),o=d(n,i,t,r);if(null!=o){const n=document.createElement("span");n.className="group-aggregate",n.setAttribute("data-field",t);const i=r?.header??t;n.textContent=`${i}: ${o}`,e.appendChild(n)}}e.children.length>0&&s.appendChild(e)}t.appendChild(s)}renderPerColumnGroupRow(e,t,n){const r=this.config,o=r.aggregators??{},i=this.columns,s=e.__groupRows??[],a=this.gridElement?.querySelector(".body"),l=a?.style.gridTemplateColumns||"";l&&(t.style.display="grid",t.style.gridTemplateColumns=l);let u=!1;i.forEach((i,a)=>{const l=document.createElement("div");if(l.className="cell group-cell",l.setAttribute("data-col",String(a)),l.setAttribute("role","gridcell"),"__tbw_expander"===i.field)return l.setAttribute("data-field",i.field),void t.appendChild(l);if(u){const e=o[i.field];if(e){const t=d(e,s,i.field,i);l.textContent=null!=t?String(t):""}else l.textContent=""}else{u=!0,l.appendChild(this.createToggleButton(e.__groupExpanded,n));const t=document.createElement("span"),a=o[i.field];if(a){const n=d(a,s,i.field,i);t.textContent=String(null!=n?n:e.__groupValue)}else t.textContent=this.getGroupLabelText(e.__groupValue,e.__groupDepth||0,e.__groupKey);if(l.appendChild(t),!1!==r.showRowCount){const e=document.createElement("span");e.className="group-count",e.textContent=` (${s.length})`,l.appendChild(e)}}t.appendChild(l)})}expandAll(){this.expandedKeys=function(e){const t=/* @__PURE__ */new Set;for(const n of e)"group"===n.kind&&t.add(n.key);return t}(this.flattenedRows),this.emitPluginEvent("grouping-state-change",{expandedKeys:[...this.expandedKeys]}),this.requestRender()}collapseAll(){this.expandedKeys=/* @__PURE__ */new Set,this.emitPluginEvent("grouping-state-change",{expandedKeys:[...this.expandedKeys]}),this.requestRender()}toggle(e){const t=!this.expandedKeys.has(e),n=this.config,r=this.flattenedRows.find(t=>"group"===t.kind&&t.key===e);if(n.accordion&&t&&r){const t=/* @__PURE__ */new Set;for(const n of this.expandedKeys)if(e.startsWith(n+"||")||n.startsWith(e+"||"))e.startsWith(n+"||")&&t.add(n);else{const e=this.flattenedRows.find(e=>"group"===e.kind&&e.key===n);e&&e.depth!==r.depth&&t.add(n)}t.add(e),this.expandedKeys=t}else this.expandedKeys=function(e,t){const n=new Set(e);return n.has(t)?n.delete(t):n.add(t),n}(this.expandedKeys,e);this.emit("group-toggle",{key:e,expanded:this.expandedKeys.has(e),value:r?.value,depth:r?.depth??0}),this.emitPluginEvent("grouping-state-change",{expandedKeys:[...this.expandedKeys]}),this.requestRender()}isExpanded(e){return this.expandedKeys.has(e)}expand(e){this.expandedKeys.has(e)||(this.expandedKeys=/* @__PURE__ */new Set([...this.expandedKeys,e]),this.requestRender())}collapse(e){if(this.expandedKeys.has(e)){const t=new Set(this.expandedKeys);t.delete(e),this.expandedKeys=t,this.requestRender()}}getGroupState(){const e=this.flattenedRows.filter(e=>"group"===e.kind);return{isActive:this.isActive,expandedCount:this.expandedKeys.size,totalGroups:e.length,expandedKeys:[...this.expandedKeys]}}getRowCount(){return this.flattenedRows.length}refreshGroups(){this.requestRender()}getExpandedGroups(){return[...this.expandedKeys]}getFlattenedRows(){return this.flattenedRows}isGroupingActive(){return this.isActive}setGroupOn(e){this.config.groupOn=e,this.requestRender()}}export{u as GroupingRowsPlugin};
 //# sourceMappingURL=index.js.map