@toolbox-web/grid 1.23.3 → 1.24.0

package/lib/plugins/server-side/types.d.ts

@@ -1,23 +1,105 @@
+/**
+ * Configuration for the server-side data plugin.
+ *
+ * Controls how the grid fetches, caches, and paginates data from a remote source.
+ * The grid requests data in **blocks** (contiguous row ranges) as the user scrolls,
+ * caching them locally to avoid redundant network requests.
+ *
+ * @example
+ * ```typescript
+ * new ServerSidePlugin({
+ *   pageSize: 100,
+ *   cacheBlockSize: 200,
+ *   maxConcurrentRequests: 2,
+ * })
+ * ```
+ */
 export interface ServerSideConfig {
+    /**
+     * Number of rows to request per fetch.
+     * This determines the `endRow - startRow` range passed to `getRows()`.
+     * Smaller values mean faster initial loads but more frequent requests while scrolling.
+     * @default 100
+     */
     pageSize?: number;
+    /**
+     * Number of rows kept in each cache block.
+     * When a block is evicted (e.g. scrolled far away), re-scrolling back triggers a new fetch.
+     * Should be ≥ `pageSize`; larger values reduce re-fetches at the cost of memory.
+     * @default 200
+     */
     cacheBlockSize?: number;
+    /**
+     * Maximum number of concurrent `getRows()` requests.
+     * Limits how many blocks can be fetched simultaneously during fast scrolling.
+     * Set to 1 for strict sequential loading; higher values improve perceived performance.
+     * @default 2
+     */
     maxConcurrentRequests?: number;
 }
+/**
+ * Data source contract for server-side row loading.
+ *
+ * Implement this interface to supply rows from a remote API, database, or any
+ * asynchronous provider. The grid calls `getRows()` whenever it needs a new
+ * block of rows (on initial load, scroll, sort change, or filter change).
+ *
+ * @example
+ * ```typescript
+ * const dataSource: ServerSideDataSource = {
+ *   async getRows(params) {
+ *     const res = await fetch(`/api/employees?start=${params.startRow}&end=${params.endRow}`);
+ *     const data = await res.json();
+ *     return { rows: data.items, totalRowCount: data.total };
+ *   }
+ * };
+ * ```
+ */
 export interface ServerSideDataSource {
     getRows(params: GetRowsParams): Promise<GetRowsResult>;
 }
+/**
+ * Parameters passed to {@link ServerSideDataSource.getRows} for each data request.
+ *
+ * The grid provides the row range to fetch plus any active sort/filter state,
+ * allowing the server to apply pagination, sorting, and filtering on the backend.
+ */
 export interface GetRowsParams {
+    /** Zero-based index of the first row to fetch (inclusive). */
     startRow: number;
+    /** Zero-based index of the last row to fetch (exclusive). `endRow - startRow` equals the block size. */
     endRow: number;
+    /** Active sort columns, in priority order. Empty array when unsorted. */
     sortModel?: Array<{
         field: string;
         direction: 'asc' | 'desc';
     }>;
+    /** Active filter model keyed by field name. Empty object when no filters are applied. */
     filterModel?: Record<string, any>;
 }
+/**
+ * Result returned from {@link ServerSideDataSource.getRows}.
+ *
+ * @example
+ * ```typescript
+ * // Known total (pagination-style)
+ * return { rows: pageData, totalRowCount: 5000 };
+ *
+ * // Infinite scroll — set lastRow when the final page is reached
+ * return { rows: pageData, totalRowCount: -1, lastRow: absoluteLastIndex };
+ * ```
+ */
 export interface GetRowsResult {
+    /** The fetched row objects for the requested range. */
     rows: any[];
+    /** Total number of rows available on the server. Use `-1` if unknown (infinite scroll mode). */
     totalRowCount: number;
+    /**
+     * The absolute index of the last row in the dataset.
+     * Only needed for **infinite scroll** when `totalRowCount` is `-1`.
+     * Once the server returns the final page, set this so the grid knows
+     * scrolling has reached the end and stops requesting further blocks.
+     */
     lastRow?: number;
 }
 export interface ServerSideState {

package/lib/plugins/server-side/types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../../../libs/grid/src/lib/plugins/server-side/types.ts"],"names":[],"mappings":"AAAA,MAAM,WAAW,gBAAgB;IAC/B,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,qBAAqB,CAAC,EAAE,MAAM,CAAC;CAChC;AAED,MAAM,WAAW,oBAAoB;IACnC,OAAO,CAAC,MAAM,EAAE,aAAa,GAAG,OAAO,CAAC,aAAa,CAAC,CAAC;CACxD;AAED,MAAM,WAAW,aAAa;IAC5B,QAAQ,EAAE,MAAM,CAAC;IACjB,MAAM,EAAE,MAAM,CAAC;IACf,SAAS,CAAC,EAAE,KAAK,CAAC;QAAE,KAAK,EAAE,MAAM,CAAC;QAAC,SAAS,EAAE,KAAK,GAAG,MAAM,CAAA;KAAE,CAAC,CAAC;IAChE,WAAW,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAAC;CACnC;AAED,MAAM,WAAW,aAAa;IAC5B,IAAI,EAAE,GAAG,EAAE,CAAC;IACZ,aAAa,EAAE,MAAM,CAAC;IACtB,OAAO,CAAC,EAAE,MAAM,CAAC;CAClB;AAED,MAAM,WAAW,eAAe;IAC9B,UAAU,EAAE,oBAAoB,GAAG,IAAI,CAAC;IACxC,aAAa,EAAE,MAAM,CAAC;IACtB,YAAY,EAAE,GAAG,CAAC,MAAM,EAAE,GAAG,EAAE,CAAC,CAAC;IACjC,aAAa,EAAE,GAAG,CAAC,MAAM,CAAC,CAAC;IAC3B,aAAa,EAAE,MAAM,CAAC;IACtB,qDAAqD;IACrD,mBAAmB,CAAC,EAAE,UAAU,CAAC,OAAO,UAAU,CAAC,CAAC;IACpD,uDAAuD;IACvD,OAAO,CAAC,EAAE;QAAE,cAAc,EAAE;YAAE,KAAK,EAAE,MAAM,CAAC;YAAC,GAAG,EAAE,MAAM,CAAA;SAAE,CAAA;KAAE,CAAC;IAC7D,8BAA8B;IAC9B,SAAS,CAAC,EAAE,gBAAgB,CAAC;IAC7B,qCAAqC;IACrC,gBAAgB,CAAC,EAAE,MAAM,IAAI,CAAC;CAC/B;AAGD,OAAO,QAAQ,kBAAkB,CAAC;IAChC,UAAU,aAAa;QACrB,UAAU,EAAE,OAAO,oBAAoB,EAAE,gBAAgB,CAAC;KAC3D;CACF"}
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../../../libs/grid/src/lib/plugins/server-side/types.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;GAeG;AACH,MAAM,WAAW,gBAAgB;IAC/B;;;;;OAKG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB;;;;;OAKG;IACH,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB;;;;;OAKG;IACH,qBAAqB,CAAC,EAAE,MAAM,CAAC;CAChC;AAED;;;;;;;;;;;;;;;;;GAiBG;AACH,MAAM,WAAW,oBAAoB;IACnC,OAAO,CAAC,MAAM,EAAE,aAAa,GAAG,OAAO,CAAC,aAAa,CAAC,CAAC;CACxD;AAED;;;;;GAKG;AACH,MAAM,WAAW,aAAa;IAC5B,8DAA8D;IAC9D,QAAQ,EAAE,MAAM,CAAC;IACjB,wGAAwG;IACxG,MAAM,EAAE,MAAM,CAAC;IACf,yEAAyE;IACzE,SAAS,CAAC,EAAE,KAAK,CAAC;QAAE,KAAK,EAAE,MAAM,CAAC;QAAC,SAAS,EAAE,KAAK,GAAG,MAAM,CAAA;KAAE,CAAC,CAAC;IAChE,yFAAyF;IACzF,WAAW,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAAC;CACnC;AAED;;;;;;;;;;;GAWG;AACH,MAAM,WAAW,aAAa;IAC5B,uDAAuD;IACvD,IAAI,EAAE,GAAG,EAAE,CAAC;IACZ,gGAAgG;IAChG,aAAa,EAAE,MAAM,CAAC;IACtB;;;;;OAKG;IACH,OAAO,CAAC,EAAE,MAAM,CAAC;CAClB;AAED,MAAM,WAAW,eAAe;IAC9B,UAAU,EAAE,oBAAoB,GAAG,IAAI,CAAC;IACxC,aAAa,EAAE,MAAM,CAAC;IACtB,YAAY,EAAE,GAAG,CAAC,MAAM,EAAE,GAAG,EAAE,CAAC,CAAC;IACjC,aAAa,EAAE,GAAG,CAAC,MAAM,CAAC,CAAC;IAC3B,aAAa,EAAE,MAAM,CAAC;IACtB,qDAAqD;IACrD,mBAAmB,CAAC,EAAE,UAAU,CAAC,OAAO,UAAU,CAAC,CAAC;IACpD,uDAAuD;IACvD,OAAO,CAAC,EAAE;QAAE,cAAc,EAAE;YAAE,KAAK,EAAE,MAAM,CAAC;YAAC,GAAG,EAAE,MAAM,CAAA;SAAE,CAAA;KAAE,CAAC;IAC7D,8BAA8B;IAC9B,SAAS,CAAC,EAAE,gBAAgB,CAAC;IAC7B,qCAAqC;IACrC,gBAAgB,CAAC,EAAE,MAAM,IAAI,CAAC;CAC/B;AAGD,OAAO,QAAQ,kBAAkB,CAAC;IAChC,UAAU,aAAa;QACrB,UAAU,EAAE,OAAO,oBAAoB,EAAE,gBAAgB,CAAC;KAC3D;CACF"}

package/lib/plugins/tree/index.js

@@ -1,2 +1,2 @@
-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;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?.()}get rows(){return this.grid?.rows??[]}get sourceRows(){return this.grid?.sourceRows??[]}get columns(){return this.grid?.columns??[]}get visibleColumns(){return this.grid?._visibleColumns??[]}get gridElement(){return this.grid}get disconnectSignal(){return this.#e?.signal??this.grid?.disconnectSignal}get gridIcons(){const e=this.grid?.gridConfig?.icons??{};return{...t,...e}}get isAnimationEnabled(){const e=this.grid?.effectiveConfig?.animation?.mode??"reduced-motion";if(!1===e||"off"===e)return!1;if(!0===e||"on"===e)return!0;const t=this.gridElement;if(t){return"0"!==getComputedStyle(t).getPropertyValue("--tbw-animation-enabled").trim()}return!0}get animationDuration(){const e=this.gridElement;if(e){const t=getComputedStyle(e).getPropertyValue("--tbw-animation-duration").trim(),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){console.warn(`[tbw-grid:${this.name}] ${e}`)}}function i(e,t,n){return void 0!==e.id?String(e.id):n?`${n}-${t}`:String(t)}function r(e,t){const n=new Set(e);return n.has(t)?n.delete(t):n.add(t),n}function s(e,t,n=null,r=0){const a=t.childrenField??"children",o=/* @__PURE__ */new Set;for(let d=0;d<e.length;d++){const l=e[d],h=i(l,d,n),c=l[a];if(Array.isArray(c)&&c.length>0){o.add(h);const e=s(c,t,h,r+1);for(const t of e)o.add(t)}}return o}function a(e,t,n,r=null,s=0){const o=n.childrenField??"children";for(let d=0;d<e.length;d++){const l=e[d],h=i(l,d,r);if(h===t)return[h];const c=l[o];if(Array.isArray(c)&&c.length>0){const e=a(c,t,n,h,s+1);if(e)return[h,...e]}}return null}function o(e,t,n,i){const r=a(e,t,n);if(!r)return i;const s=new Set(i);for(let a=0;a<r.length-1;a++)s.add(r[a]);return s}function d(e,t="children"){if(!Array.isArray(e)||0===e.length)return!1;for(const n of e){if(!n)continue;const e=n[t];if(Array.isArray(e)&&e.length>0)return!0}return!1}class l extends n{static manifest={events:[{type:"tree-state-change",description:"Emitted when tree expansion state changes (toggle, expand all, collapse all)"}],queries:[{type:"canMoveRow",description:"Returns false for rows with children (parent nodes cannot be reordered)"}]};name="tree";styles="@layer tbw-plugins{tbw-grid .cell[data-field=__tbw_expander]{border-inline-end:none!important;padding:0;display:flex;align-items:center;justify-content:flex-start}tbw-grid .header-row .cell[data-field=__tbw_expander]{display:none}tbw-grid .header-row .cell[data-field=__tbw_expander]+.cell{grid-column:1 / 3}tbw-grid .tree-cell-wrapper{display:inline-flex;align-items:center;padding-inline-start:calc(var(--tbw-tree-depth, 0) * var(--tbw-tree-indent-width, var(--tbw-tree-toggle-size, 1.25em)))}tbw-grid .tree-expander{display:flex;align-items:center;justify-content:flex-start;width:100%;height:100%;box-sizing:border-box}tbw-grid .tree-toggle{cursor:pointer;-webkit-user-select:none;user-select:none;display:inline-flex;align-items:center;justify-content:center;width:var(--tbw-tree-toggle-size, 1.25em);height:var(--tbw-tree-toggle-size, 1.25em);flex-shrink:0}tbw-grid .tree-toggle:hover{color:var(--tbw-tree-accent, var(--tbw-color-accent))}tbw-grid .tree-spacer{width:var(--tbw-tree-toggle-size, 1.25em);display:inline-block;flex-shrink:0}tbw-grid .data-grid-row.tbw-tree-slide-in{animation:tbw-tree-slide-in var(--tbw-animation-duration, .2s) var(--tbw-animation-easing, ease-out) forwards}tbw-grid .data-grid-row.tbw-tree-fade-in{animation:tbw-tree-fade-in var(--tbw-animation-duration, .2s) var(--tbw-animation-easing, ease-out) forwards}@keyframes tbw-tree-slide-in{0%{opacity:0;transform:translate(-8px)}to{opacity:1;transform:translate(0)}}@keyframes tbw-tree-fade-in{0%{opacity:0}to{opacity:1}}}";get defaultConfig(){return{childrenField:"children",autoDetect:!0,defaultExpanded:!1,indentWidth:20,showExpandIcons:!0,animation:"slide"}}expandedKeys=/* @__PURE__ */new Set;initialExpansionDone=!1;flattenedRows=[];rowKeyMap=/* @__PURE__ */new Map;previousVisibleKeys=/* @__PURE__ */new Set;keysToAnimate=/* @__PURE__ */new Set;sortState=null;detach(){this.expandedKeys.clear(),this.initialExpansionDone=!1,this.flattenedRows=[],this.rowKeyMap.clear(),this.previousVisibleKeys.clear(),this.keysToAnimate.clear(),this.sortState=null}handleQuery(e){if("canMoveRow"===e.type){const t=e.context,n=this.config.childrenField??"children",i=t?.[n];if(Array.isArray(i)&&i.length>0)return!1}}get animationStyle(){return!!this.isAnimationEnabled&&(this.config.animation??"slide")}detect(e){if(!this.config.autoDetect)return!1;const t=e,n=this.config.childrenField??function(e){if(!Array.isArray(e)||0===e.length)return null;const t=["children","items","nodes","subRows","nested"];for(const n of e)if(n&&"object"==typeof n)for(const e of t){const t=n[e];if(Array.isArray(t)&&t.length>0)return e}return null}(t)??"children";return d(t,n)}processRows(e){const t=e;if(!d(t,this.config.childrenField??"children"))return this.flattenedRows=[],this.rowKeyMap.clear(),this.previousVisibleKeys.clear(),[...e];let n=this.withStableKeys(t);this.sortState&&(n=this.sortTree(n,this.sortState.field,this.sortState.direction)),this.config.defaultExpanded&&!this.initialExpansionDone&&(this.expandedKeys=s(n,this.config),this.initialExpansionDone=!0),this.flattenedRows=this.flattenTree(n,this.expandedKeys),this.rowKeyMap.clear(),this.keysToAnimate.clear();const i=/* @__PURE__ */new Set;for(const r of this.flattenedRows)this.rowKeyMap.set(r.key,r),i.add(r.key),!this.previousVisibleKeys.has(r.key)&&r.depth>0&&this.keysToAnimate.add(r.key);return this.previousVisibleKeys=i,this.flattenedRows.map(e=>({...e.data,__treeKey:e.key,__treeDepth:e.depth,__treeHasChildren:e.hasChildren,__treeExpanded:e.isExpanded}))}withStableKeys(e,t=null){const n=this.config.childrenField??"children";return e.map((e,i)=>{const r=e.__stableKey,s=void 0!==e.id?String(e.id):r??(t?`${t}-${i}`:String(i)),a=e[n],o=Array.isArray(a)&&a.length>0;return{...e,__stableKey:s,...o?{[n]:this.withStableKeys(a,s)}:{}}})}flattenTree(e,t,n=0){const i=this.config.childrenField??"children",r=[];for(const s of e){const e=s.__stableKey??String(s.id??"?"),a=s[i],o=Array.isArray(a)&&a.length>0,d=t.has(e);r.push({key:e,data:s,depth:n,hasChildren:o,isExpanded:d,parentKey:n>0&&e.substring(0,e.lastIndexOf("-"))||null}),o&&d&&r.push(...this.flattenTree(a,t,n+1))}return r}sortTree(e,t,n){const i=this.config.childrenField??"children";return[...e].sort((e,i)=>{const r=e[t],s=i[t];return null==r&&null==s?0:null==r?-1:null==s?1:r>s?n:r<s?-n:0}).map(e=>{const r=e[i];return Array.isArray(r)&&r.length>0?{...e,[i]:this.sortTree(r,t,n)}:e})}processColumns(e){if(0===this.flattenedRows.length)return[...e];const t=[...e];if(0===t.length)return t;const n=t[0],i=n.viewRenderer,r=()=>this.config,s=this.setIcon.bind(this),a=this.resolveIcon.bind(this);return t[0]={...n,viewRenderer:e=>{const{row:t,value:n}=e,{showExpandIcons:o=!0,indentWidth:d}=r(),l=t,h=l.__treeDepth??0,c=document.createElement("span");if(c.className="tree-cell-wrapper",c.style.setProperty("--tbw-tree-depth",String(h)),void 0!==d&&c.style.setProperty("--tbw-tree-indent-width",`${d}px`),o)if(l.__treeHasChildren){const e=document.createElement("span");e.className="tree-toggle"+(l.__treeExpanded?" expanded":""),s(e,a(l.__treeExpanded?"collapse":"expand")),e.setAttribute("data-tree-key",String(l.__treeKey??"")),c.appendChild(e)}else{const e=document.createElement("span");e.className="tree-spacer",c.appendChild(e)}const u=document.createElement("span");if(u.className="tree-content",i){const t=i(e);t instanceof Node?u.appendChild(t):"string"==typeof t&&(u.innerHTML=t)}else u.textContent=null!=n?String(n):"";return c.appendChild(u),c}},t}onCellClick(e){const t=e.originalEvent?.target;if(!t?.classList.contains("tree-toggle"))return!1;const n=t.getAttribute("data-tree-key");if(!n)return!1;const i=this.rowKeyMap.get(n);return!!i&&(this.expandedKeys=r(this.expandedKeys,n),this.emit("tree-expand",{key:n,row:i.data,expanded:this.expandedKeys.has(n),depth:i.depth}),this.requestRender(),!0)}onKeyDown(e){if(" "!==e.key)return;const t=this.grid._focusRow,n=this.flattenedRows[t];return n?.hasChildren?(e.preventDefault(),this.expandedKeys=r(this.expandedKeys,n.key),this.emit("tree-expand",{key:n.key,row:n.data,expanded:this.expandedKeys.has(n.key),depth:n.depth}),this.requestRenderWithFocus(),!0):void 0}onHeaderClick(e){if(0===this.flattenedRows.length||!e.column.sortable)return!1;const{field:t}=e.column;this.sortState&&this.sortState.field===t?1===this.sortState.direction?this.sortState={field:t,direction:-1}:this.sortState=null:this.sortState={field:t,direction:1};const n=this.grid;return void 0!==n._sortState&&(n._sortState=this.sortState?{...this.sortState}:null),this.emit("sort-change",{field:t,direction:this.sortState?.direction??0}),this.requestRender(),!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-tree-fade-in":"tbw-tree-slide-in";for(const i of t.querySelectorAll(".data-grid-row")){const e=i.querySelector(".cell[data-row]"),t=e?parseInt(e.getAttribute("data-row")??"-1",10):-1,r=this.flattenedRows[t]?.key;r&&this.keysToAnimate.has(r)&&(i.classList.add(n),i.addEventListener("animationend",()=>i.classList.remove(n),{once:!0}))}this.keysToAnimate.clear()}expand(e){this.expandedKeys.add(e),this.requestRender()}collapse(e){this.expandedKeys.delete(e),this.requestRender()}toggle(e){this.expandedKeys=r(this.expandedKeys,e),this.emitPluginEvent("tree-state-change",{expandedKeys:[...this.expandedKeys]}),this.requestRender()}expandAll(){this.expandedKeys=s(this.rows,this.config),this.emitPluginEvent("tree-state-change",{expandedKeys:[...this.expandedKeys]}),this.requestRender()}collapseAll(){this.expandedKeys=/* @__PURE__ */new Set,this.emitPluginEvent("tree-state-change",{expandedKeys:[...this.expandedKeys]}),this.requestRender()}isExpanded(e){return this.expandedKeys.has(e)}getExpandedKeys(){return[...this.expandedKeys]}getFlattenedRows(){return[...this.flattenedRows]}getRowByKey(e){return this.rowKeyMap.get(e)?.data}expandToKey(e){this.expandedKeys=o(this.rows,e,this.config,this.expandedKeys),this.requestRender()}}export{l as TreePlugin};
+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?.()}get rows(){return this.grid?.rows??[]}get sourceRows(){return this.grid?.sourceRows??[]}get columns(){return this.grid?.columns??[]}get visibleColumns(){return this.grid?._visibleColumns??[]}get gridElement(){return this.grid}get disconnectSignal(){return this.#e?.signal??this.grid?.disconnectSignal}get gridIcons(){const e=this.grid?.gridConfig?.icons??{};return{...t,...e}}get isAnimationEnabled(){const e=this.grid?.effectiveConfig?.animation?.mode??"reduced-motion";if(!1===e||"off"===e)return!1;if(!0===e||"on"===e)return!0;const t=this.gridElement;if(t){return"0"!==getComputedStyle(t).getPropertyValue("--tbw-animation-enabled").trim()}return!0}get animationDuration(){const e=this.gridElement;if(e){const t=getComputedStyle(e).getPropertyValue("--tbw-animation-duration").trim(),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){console.warn(`[tbw-grid:${this.name}] ${e}`)}}function i(e,t,n){return void 0!==e.id?String(e.id):n?`${n}-${t}`:String(t)}function r(e,t){const n=new Set(e);return n.has(t)?n.delete(t):n.add(t),n}function s(e,t,n=null,r=0){const a=t.childrenField??"children",o=/* @__PURE__ */new Set;for(let d=0;d<e.length;d++){const l=e[d],h=i(l,d,n),c=l[a];if(Array.isArray(c)&&c.length>0){o.add(h);const e=s(c,t,h,r+1);for(const t of e)o.add(t)}}return o}function a(e,t,n,r=null,s=0){const o=n.childrenField??"children";for(let d=0;d<e.length;d++){const l=e[d],h=i(l,d,r);if(h===t)return[h];const c=l[o];if(Array.isArray(c)&&c.length>0){const e=a(c,t,n,h,s+1);if(e)return[h,...e]}}return null}function o(e,t,n,i){const r=a(e,t,n);if(!r)return i;const s=new Set(i);for(let a=0;a<r.length-1;a++)s.add(r[a]);return s}function d(e,t="children"){if(!Array.isArray(e)||0===e.length)return!1;for(const n of e){if(!n)continue;const e=n[t];if(Array.isArray(e)&&e.length>0)return!0}return!1}class l extends n{static manifest={events:[{type:"tree-state-change",description:"Emitted when tree expansion state changes (toggle, expand all, collapse all)"}],queries:[{type:"canMoveRow",description:"Returns false for rows with children (parent nodes cannot be reordered)"}]};name="tree";styles="@layer tbw-plugins{tbw-grid .cell[data-field=__tbw_expander]{border-inline-end:none!important;padding:0;display:flex;align-items:center;justify-content:flex-start}tbw-grid .header-row .cell[data-field=__tbw_expander]{display:none}tbw-grid .header-row .cell[data-field=__tbw_expander]+.cell{grid-column:1 / 3}tbw-grid .tree-cell-wrapper{display:inline-flex;align-items:center;padding-inline-start:calc(var(--tbw-tree-depth, 0) * var(--tbw-tree-indent-width, var(--tbw-tree-toggle-size, 1.25em)))}tbw-grid .tree-expander{display:flex;align-items:center;justify-content:flex-start;width:100%;height:100%;box-sizing:border-box}tbw-grid .tree-toggle{cursor:pointer;-webkit-user-select:none;user-select:none;display:inline-flex;align-items:center;justify-content:center;width:var(--tbw-tree-toggle-size, 1.25em);height:var(--tbw-tree-toggle-size, 1.25em);flex-shrink:0}tbw-grid .tree-toggle:hover{color:var(--tbw-tree-accent, var(--tbw-color-accent))}tbw-grid .tree-spacer{width:var(--tbw-tree-toggle-size, 1.25em);display:inline-block;flex-shrink:0}tbw-grid .data-grid-row.tbw-tree-slide-in{animation:tbw-tree-slide-in var(--tbw-animation-duration, .2s) var(--tbw-animation-easing, ease-out) forwards}tbw-grid .data-grid-row.tbw-tree-fade-in{animation:tbw-tree-fade-in var(--tbw-animation-duration, .2s) var(--tbw-animation-easing, ease-out) forwards}@keyframes tbw-tree-slide-in{0%{opacity:0;transform:translate(-8px)}to{opacity:1;transform:translate(0)}}@keyframes tbw-tree-fade-in{0%{opacity:0}to{opacity:1}}}";get defaultConfig(){return{childrenField:"children",autoDetect:!0,defaultExpanded:!1,indentWidth:20,showExpandIcons:!0,animation:"slide"}}expandedKeys=/* @__PURE__ */new Set;initialExpansionDone=!1;flattenedRows=[];rowKeyMap=/* @__PURE__ */new Map;previousVisibleKeys=/* @__PURE__ */new Set;keysToAnimate=/* @__PURE__ */new Set;sortState=null;detach(){this.expandedKeys.clear(),this.initialExpansionDone=!1,this.flattenedRows=[],this.rowKeyMap.clear(),this.previousVisibleKeys.clear(),this.keysToAnimate.clear(),this.sortState=null}handleQuery(e){if("canMoveRow"===e.type){const t=e.context,n=this.config.childrenField??"children",i=t?.[n];if(Array.isArray(i)&&i.length>0)return!1}}get animationStyle(){return!!this.isAnimationEnabled&&(this.config.animation??"slide")}detect(e){if(!this.config.autoDetect)return!1;const t=e,n=this.config.childrenField??function(e){if(!Array.isArray(e)||0===e.length)return null;const t=["children","items","nodes","subRows","nested"];for(const n of e)if(n&&"object"==typeof n)for(const e of t){const t=n[e];if(Array.isArray(t)&&t.length>0)return e}return null}(t)??"children";return d(t,n)}processRows(e){const t=e;if(!d(t,this.config.childrenField??"children"))return this.flattenedRows=[],this.rowKeyMap.clear(),this.previousVisibleKeys.clear(),[...e];let n=this.withStableKeys(t);this.sortState&&(n=this.sortTree(n,this.sortState.field,this.sortState.direction)),this.config.defaultExpanded&&!this.initialExpansionDone&&(this.expandedKeys=s(n,this.config),this.initialExpansionDone=!0),this.flattenedRows=this.flattenTree(n,this.expandedKeys),this.rowKeyMap.clear(),this.keysToAnimate.clear();const i=/* @__PURE__ */new Set;for(const r of this.flattenedRows)this.rowKeyMap.set(r.key,r),i.add(r.key),!this.previousVisibleKeys.has(r.key)&&r.depth>0&&this.keysToAnimate.add(r.key);return this.previousVisibleKeys=i,this.flattenedRows.map(e=>({...e.data,__treeKey:e.key,__treeDepth:e.depth,__treeHasChildren:e.hasChildren,__treeExpanded:e.isExpanded}))}withStableKeys(e,t=null){const n=this.config.childrenField??"children";return e.map((e,i)=>{const r=e.__stableKey,s=void 0!==e.id?String(e.id):r??(t?`${t}-${i}`:String(i)),a=e[n],o=Array.isArray(a)&&a.length>0;return{...e,__stableKey:s,...o?{[n]:this.withStableKeys(a,s)}:{}}})}flattenTree(e,t,n=0){const i=this.config.childrenField??"children",r=[];for(const s of e){const e=s.__stableKey??String(s.id??"?"),a=s[i],o=Array.isArray(a)&&a.length>0,d=t.has(e);r.push({key:e,data:s,depth:n,hasChildren:o,isExpanded:d,parentKey:n>0&&e.substring(0,e.lastIndexOf("-"))||null}),o&&d&&r.push(...this.flattenTree(a,t,n+1))}return r}sortTree(e,t,n){const i=this.config.childrenField??"children";return[...e].sort((e,i)=>{const r=e[t],s=i[t];return null==r&&null==s?0:null==r?-1:null==s?1:r>s?n:r<s?-n:0}).map(e=>{const r=e[i];return Array.isArray(r)&&r.length>0?{...e,[i]:this.sortTree(r,t,n)}:e})}processColumns(e){if(0===this.flattenedRows.length)return[...e];const t=[...e];if(0===t.length)return t;const n=t[0],i=n.viewRenderer,r=()=>this.config,s=this.setIcon.bind(this),a=this.resolveIcon.bind(this);return t[0]={...n,viewRenderer:e=>{const{row:t,value:n}=e,{showExpandIcons:o=!0,indentWidth:d}=r(),l=t,h=l.__treeDepth??0,c=document.createElement("span");if(c.className="tree-cell-wrapper",c.style.setProperty("--tbw-tree-depth",String(h)),void 0!==d&&c.style.setProperty("--tbw-tree-indent-width",`${d}px`),o)if(l.__treeHasChildren){const e=document.createElement("span");e.className="tree-toggle"+(l.__treeExpanded?" expanded":""),s(e,a(l.__treeExpanded?"collapse":"expand")),e.setAttribute("data-tree-key",String(l.__treeKey??"")),c.appendChild(e)}else{const e=document.createElement("span");e.className="tree-spacer",c.appendChild(e)}const u=document.createElement("span");if(u.className="tree-content",i){const t=i(e);t instanceof Node?u.appendChild(t):"string"==typeof t&&(u.innerHTML=t)}else u.textContent=null!=n?String(n):"";return c.appendChild(u),c}},t}onCellClick(e){const t=e.originalEvent?.target;if(!t?.classList.contains("tree-toggle"))return!1;const n=t.getAttribute("data-tree-key");if(!n)return!1;const i=this.rowKeyMap.get(n);return!!i&&(this.expandedKeys=r(this.expandedKeys,n),this.emit("tree-expand",{key:n,row:i.data,expanded:this.expandedKeys.has(n),depth:i.depth}),this.requestRender(),!0)}onKeyDown(e){if(" "!==e.key)return;const t=this.grid._focusRow,n=this.flattenedRows[t];return n?.hasChildren?(e.preventDefault(),this.expandedKeys=r(this.expandedKeys,n.key),this.emit("tree-expand",{key:n.key,row:n.data,expanded:this.expandedKeys.has(n.key),depth:n.depth}),this.requestRenderWithFocus(),!0):void 0}onHeaderClick(e){if(0===this.flattenedRows.length||!e.column.sortable)return!1;const{field:t}=e.column;this.sortState&&this.sortState.field===t?1===this.sortState.direction?this.sortState={field:t,direction:-1}:this.sortState=null:this.sortState={field:t,direction:1};const n=this.grid;return void 0!==n._sortState&&(n._sortState=this.sortState?{...this.sortState}:null),this.emit("sort-change",{field:t,direction:this.sortState?.direction??0}),this.requestRender(),!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-tree-fade-in":"tbw-tree-slide-in";for(const i of t.querySelectorAll(".data-grid-row")){const e=i.querySelector(".cell[data-row]"),t=e?parseInt(e.getAttribute("data-row")??"-1",10):-1,r=this.flattenedRows[t]?.key;r&&this.keysToAnimate.has(r)&&(i.classList.add(n),i.addEventListener("animationend",()=>i.classList.remove(n),{once:!0}))}this.keysToAnimate.clear()}expand(e){this.expandedKeys.add(e),this.requestRender()}collapse(e){this.expandedKeys.delete(e),this.requestRender()}toggle(e){this.expandedKeys=r(this.expandedKeys,e),this.emitPluginEvent("tree-state-change",{expandedKeys:[...this.expandedKeys]}),this.requestRender()}expandAll(){this.expandedKeys=s(this.rows,this.config),this.emitPluginEvent("tree-state-change",{expandedKeys:[...this.expandedKeys]}),this.requestRender()}collapseAll(){this.expandedKeys=/* @__PURE__ */new Set,this.emitPluginEvent("tree-state-change",{expandedKeys:[...this.expandedKeys]}),this.requestRender()}isExpanded(e){return this.expandedKeys.has(e)}getExpandedKeys(){return[...this.expandedKeys]}getFlattenedRows(){return[...this.flattenedRows]}getRowByKey(e){return this.rowKeyMap.get(e)?.data}expandToKey(e){this.expandedKeys=o(this.rows,e,this.config,this.expandedKeys),this.requestRender()}}export{l as TreePlugin};
 //# sourceMappingURL=index.js.map