@toolbox-web/grid 1.24.1 → 1.25.0

package/lib/plugins/master-detail/master-detail.d.ts

@@ -27,4 +27,3 @@ export declare function isDetailExpanded(expandedRows: Set<object>, row: object)
  * The element spans all columns and contains the rendered content.
  */
 export declare function createDetailElement(row: any, rowIndex: number, renderer: (row: any, rowIndex: number) => HTMLElement | string, columnCount: number): HTMLElement;
-//# sourceMappingURL=master-detail.d.ts.map

package/lib/plugins/master-detail/types.d.ts

@@ -38,8 +38,11 @@ export interface DetailExpandDetail {
     expanded: boolean;
 }
 declare module '../../core/types' {
+    interface DataGridEventMap {
+        /** Fired when a detail panel is expanded or collapsed. @group Master-Detail Events */
+        'detail-expand': DetailExpandDetail;
+    }
     interface PluginNameMap {
         masterDetail: import('./MasterDetailPlugin').MasterDetailPlugin;
     }
 }
-//# sourceMappingURL=types.d.ts.map

package/lib/plugins/multi-sort/MultiSortPlugin.d.ts

@@ -61,8 +61,8 @@ import { MultiSortConfig, SortModel } from './types';
  *   plugins: [new MultiSortPlugin({ maxSortColumns: 3, showSortIndex: true })],
  * };
  *
- * grid.addEventListener('sort-change', (e) => {
- *   console.log('Active sorts:', e.detail.sortModel);
+ * grid.on('sort-change', ({ sortModel }) => {
+ *   console.log('Active sorts:', sortModel);
  * });
  * ```
  *
@@ -82,6 +82,7 @@ import { MultiSortConfig, SortModel } from './types';
  * @internal Extends BaseGridPlugin
  */
 export declare class MultiSortPlugin extends BaseGridPlugin<MultiSortConfig> {
+    #private;
     /** @internal */
     readonly name = "multiSort";
     /** @internal */
@@ -147,4 +148,3 @@ export declare class MultiSortPlugin extends BaseGridPlugin<MultiSortConfig> {
      */
     applyColumnState(field: string, state: ColumnState): void;
 }
-//# sourceMappingURL=MultiSortPlugin.d.ts.map

package/lib/plugins/multi-sort/index.d.ts

@@ -5,5 +5,4 @@
  * @module Plugins/Multi-Sort
  */
 export { MultiSortPlugin } from './MultiSortPlugin';
-export type { MultiSortConfig, SortModel } from './types';
-//# sourceMappingURL=index.d.ts.map
+export type { MultiSortChangeDetail, MultiSortConfig, SortModel } from './types';

package/lib/plugins/multi-sort/index.js

@@ -1,2 +1,2 @@
-const t='<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>',e={expand:"▶",collapse:"▼",sortAsc:"▲",sortDesc:"▼",sortNone:"⇅",submenuArrow:"▶",dragHandle:"⋮⋮",toolPanel:"☰",filter:t,filterActive:t,print:"🖨️"};class r{static dependencies;static manifest;aliases;version="undefined"!=typeof __GRID_VERSION__?__GRID_VERSION__:"dev";styles;cellRenderers;headerRenderers;cellEditors;grid;config;userConfig;#t;get defaultConfig(){return{}}constructor(t={}){this.userConfig=t}attach(t){this.#t?.abort(),this.#t=new AbortController,this.grid=t,this.config={...this.defaultConfig,...this.userConfig}}detach(){this.#t?.abort(),this.#t=void 0}getPlugin(t){return this.grid?.getPlugin(t)}emit(t,e){this.grid?.dispatchEvent?.(new CustomEvent(t,{detail:e,bubbles:!0}))}emitCancelable(t,e){const r=new CustomEvent(t,{detail:e,bubbles:!0,cancelable:!0});return this.grid?.dispatchEvent?.(r),r.defaultPrevented}on(t,e){this.grid?._pluginManager?.subscribe(this,t,e)}off(t){this.grid?._pluginManager?.unsubscribe(this,t)}emitPluginEvent(t,e){this.grid?._pluginManager?.emitPluginEvent(t,e)}requestRender(){this.grid?.requestRender?.()}requestColumnsRender(){this.grid?.requestColumnsRender?.()}requestRenderWithFocus(){this.grid?.requestRenderWithFocus?.()}requestAfterRender(){this.grid?.requestAfterRender?.()}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}get disconnectSignal(){return this.#t?.signal??this.grid?.disconnectSignal}get gridIcons(){const t=this.grid?.gridConfig?.icons??{};return{...e,...t}}get isAnimationEnabled(){const t=this.grid?.effectiveConfig?.animation?.mode??"reduced-motion";if(!1===t||"off"===t)return!1;if(!0===t||"on"===t)return!0;const e=this.gridElement;if(e){return"0"!==getComputedStyle(e).getPropertyValue("--tbw-animation-enabled").trim()}return!0}get animationDuration(){const t=this.gridElement;if(t){const e=getComputedStyle(t).getPropertyValue("--tbw-animation-duration").trim(),r=parseInt(e,10);if(!isNaN(r))return r}return 200}resolveIcon(t,e){return void 0!==e?e:this.gridIcons[t]}setIcon(t,e){"string"==typeof e?t.innerHTML=e:e instanceof HTMLElement&&(t.innerHTML="",t.appendChild(e.cloneNode(!0)))}warn(t){console.warn(`[tbw-grid:${this.name}] ${t}`)}}function i(t,e){return null==t&&null==e?0:null==t?1:null==e?-1:"number"==typeof t&&"number"==typeof e?t-e:t instanceof Date&&e instanceof Date?t.getTime()-e.getTime():"boolean"==typeof t&&"boolean"==typeof e?t===e?0:t?-1:1:String(t).localeCompare(String(e))}function o(t,e){const r=t.findIndex(t=>t.field===e);return r>=0?r+1:void 0}function n(t,e){return t.find(t=>t.field===e)?.direction}class s extends r{name="multiSort";styles='@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}}';get defaultConfig(){return{maxSortColumns:3,showSortIndex:!0}}sortModel=[];cachedSortResult=null;clearCoreSortState(){const t=this.gridElement;t&&(t._sortState=null)}detach(){this.sortModel=[],this.cachedSortResult=null}processRows(t){if(0===this.sortModel.length)return this.cachedSortResult=null,[...t];const e=this.gridElement;if(e&&!e._isGridEditMode&&"number"==typeof e._activeEditRows&&-1!==e._activeEditRows&&this.cachedSortResult&&this.cachedSortResult.length===t.length)return[...this.cachedSortResult];const r=function(t,e,r){return e.length?[...t].sort((t,o)=>{for(const n of e){const e=r.find(t=>t.field===n.field),s=(e?.sortComparator??i)(t[n.field],o[n.field],t,o);if(0!==s)return"asc"===n.direction?s:-s}return 0}):[...t]}([...t],this.sortModel,[...this.columns]);return this.cachedSortResult=r,r}onHeaderClick(t){const e=this.columns.find(e=>e.field===t.field);if(!e?.sortable)return!1;const r=t.originalEvent.shiftKey,i=this.config.maxSortColumns??3;return this.sortModel=function(t,e,r,i){const o=t.find(t=>t.field===e);return r?o?"asc"===o.direction?t.map(t=>t.field===e?{...t,direction:"desc"}:t):t.filter(t=>t.field!==e):t.length<i?[...t,{field:e,direction:"asc"}]:t:"asc"===o?.direction?[{field:e,direction:"desc"}]:"desc"===o?.direction?[]:[{field:e,direction:"asc"}]}(this.sortModel,t.field,r,i),this.clearCoreSortState(),this.emit("sort-change",{sortModel:[...this.sortModel]}),this.requestRender(),this.grid?.requestStateChange?.(),!0}afterRender(){const t=this.gridElement;if(!t)return;const e=!1!==this.config.showSortIndex;t.querySelectorAll(".header-row .cell[data-field]").forEach(t=>{const r=t.getAttribute("data-field");if(!r)return;const i=o(this.sortModel,r),s=n(this.sortModel,r),l=t.querySelector(".sort-index");if(l?.remove(),s){const r=t.querySelector('[part~="sort-indicator"], .sort-indicator');r?.remove(),t.setAttribute("data-sort",s);const o=document.createElement("span");o.className="sort-indicator",this.setIcon(o,this.resolveIcon("asc"===s?"sortAsc":"sortDesc"));const n=t.querySelector(".tbw-filter-btn"),l=t.querySelector(".resize-handle"),d=n??l;if(d?t.insertBefore(o,d):t.appendChild(o),e&&this.sortModel.length>1&&void 0!==i){const e=document.createElement("span");e.className="sort-index",e.textContent=String(i),o.nextSibling?t.insertBefore(e,o.nextSibling):t.appendChild(e)}}else{t.removeAttribute("data-sort");const e=t.querySelector('[part~="sort-indicator"], .sort-indicator');e?.remove()}})}getSortModel(){return[...this.sortModel]}setSortModel(t){this.sortModel=[...t],this.clearCoreSortState(),this.emit("sort-change",{sortModel:[...t]}),this.requestRender(),this.grid?.requestStateChange?.()}clearSort(){this.sortModel=[],this.clearCoreSortState(),this.emit("sort-change",{sortModel:[]}),this.requestRender(),this.grid?.requestStateChange?.()}getSortIndex(t){return o(this.sortModel,t)}getSortDirection(t){return n(this.sortModel,t)}getColumnState(t){const e=this.sortModel.findIndex(e=>e.field===t);if(-1===e)return;return{sort:{direction:this.sortModel[e].direction,priority:e}}}applyColumnState(t,e){if(!e.sort)return void(this.sortModel=this.sortModel.filter(e=>e.field!==t));const r=this.sortModel.findIndex(e=>e.field===t),i={field:t,direction:e.sort.direction};-1!==r?this.sortModel[r]=i:this.sortModel.splice(e.sort.priority,0,i),this.clearCoreSortState()}}export{s as MultiSortPlugin};
+function t(t,e){const r=t.querySelector?.(".tbw-sr-only");r&&(r.textContent="",requestAnimationFrame(()=>{r.textContent=e}))}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>',r={expand:"▶",collapse:"▼",sortAsc:"▲",sortDesc:"▼",sortNone:"⇅",submenuArrow:"▶",dragHandle:"⋮⋮",toolPanel:"☰",filter:e,filterActive:e,print:"🖨️"};class i{static dependencies;static manifest;aliases;version="undefined"!=typeof __GRID_VERSION__?__GRID_VERSION__:"dev";styles;cellRenderers;headerRenderers;cellEditors;grid;config;userConfig;#t;get defaultConfig(){return{}}constructor(t={}){this.userConfig=t}attach(t){this.#t?.abort(),this.#t=new AbortController,this.grid=t,this.config={...this.defaultConfig,...this.userConfig}}detach(){this.#t?.abort(),this.#t=void 0}getPlugin(t){return this.grid?.getPlugin(t)}emit(t,e){this.grid?.dispatchEvent?.(new CustomEvent(t,{detail:e,bubbles:!0}))}emitCancelable(t,e){const r=new CustomEvent(t,{detail:e,bubbles:!0,cancelable:!0});return this.grid?.dispatchEvent?.(r),r.defaultPrevented}on(t,e){this.grid?._pluginManager?.subscribe(this,t,e)}off(t){this.grid?._pluginManager?.unsubscribe(this,t)}emitPluginEvent(t,e){this.grid?._pluginManager?.emitPluginEvent(t,e)}requestRender(){this.grid?.requestRender?.()}requestColumnsRender(){this.grid?.requestColumnsRender?.()}requestRenderWithFocus(){this.grid?.requestRenderWithFocus?.()}requestAfterRender(){this.grid?.requestAfterRender?.()}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.#t?.signal??this.grid?.disconnectSignal}get gridIcons(){const t=this.grid?.gridConfig?.icons??{};return{...r,...t}}get isAnimationEnabled(){const t=this.grid?.effectiveConfig?.animation?.mode??"reduced-motion";if(!1===t||"off"===t)return!1;if(!0===t||"on"===t)return!0;const e=this.gridElement;if(e){return"0"!==getComputedStyle(e).getPropertyValue("--tbw-animation-enabled").trim()}return!0}get animationDuration(){const t=this.gridElement;if(t){const e=getComputedStyle(t).getPropertyValue("--tbw-animation-duration").trim(),r=parseInt(e,10);if(!isNaN(r))return r}return 200}resolveIcon(t,e){return void 0!==e?e:this.gridIcons[t]}setIcon(t,e){"string"==typeof e?t.innerHTML=e:e instanceof HTMLElement&&(t.innerHTML="",t.appendChild(e.cloneNode(!0)))}warn(t){var e,r;console.warn(`${e=this.gridElement.id,r=this.name,`[tbw-grid${e?`#${e}`:""}${r?`:${r}`:""}]`} ${t}`)}}function n(t,e){return null==t&&null==e?0:null==t?1:null==e?-1:"number"==typeof t&&"number"==typeof e?t-e:t instanceof Date&&e instanceof Date?t.getTime()-e.getTime():"boolean"==typeof t&&"boolean"==typeof e?t===e?0:t?-1:1:String(t).localeCompare(String(e))}function o(t,e){const r=t.findIndex(t=>t.field===e);return r>=0?r+1:void 0}function s(t,e){return t.find(t=>t.field===e)?.direction}class l extends i{name="multiSort";styles='@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}}';get defaultConfig(){return{maxSortColumns:3,showSortIndex:!0}}sortModel=[];cachedSortResult=null;get#e(){return this.grid}clearCoreSortState(){this.#e._sortState=null}detach(){this.sortModel=[],this.cachedSortResult=null}processRows(t){if(0===this.sortModel.length)return this.cachedSortResult=null,[...t];const e=this.#e;if(!e._isGridEditMode&&"number"==typeof e._activeEditRows&&-1!==e._activeEditRows&&this.cachedSortResult&&this.cachedSortResult.length===t.length)return[...this.cachedSortResult];const r=function(t,e,r){return e.length?[...t].sort((t,i)=>{for(const o of e){const e=r.find(t=>t.field===o.field),s=(e?.sortComparator??n)(t[o.field],i[o.field],t,i);if(0!==s)return"asc"===o.direction?s:-s}return 0}):[...t]}([...t],this.sortModel,[...this.columns]);return this.cachedSortResult=r,r}onHeaderClick(e){const r=this.columns.find(t=>t.field===e.field);if(!r?.sortable)return!1;const i=e.originalEvent.shiftKey,n=this.config.maxSortColumns??3;if(this.sortModel=function(t,e,r,i){const n=t.find(t=>t.field===e);return r?n?"asc"===n.direction?t.map(t=>t.field===e?{...t,direction:"desc"}:t):t.filter(t=>t.field!==e):t.length<i?[...t,{field:e,direction:"asc"}]:t:"asc"===n?.direction?[{field:e,direction:"desc"}]:"desc"===n?.direction?[]:[{field:e,direction:"asc"}]}(this.sortModel,e.field,i,n),this.clearCoreSortState(),this.emit("sort-change",{sortModel:[...this.sortModel]}),this.requestRender(),this.grid?.requestStateChange?.(),this.sortModel.length>0){const e=this.sortModel.map(t=>{const e=this.columns.find(e=>e.field===t.field);return`${e?.header??t.field} ${"asc"===t.direction?"ascending":"descending"}`});t(this.gridElement,`Sorted by ${e.join(", then ")}`)}else t(this.gridElement,"Sort cleared");return!0}afterRender(){const t=this.gridElement;if(!t)return;const e=!1!==this.config.showSortIndex;t.querySelectorAll(".header-row .cell[data-field]").forEach(t=>{const r=t.getAttribute("data-field");if(!r)return;const i=o(this.sortModel,r),n=s(this.sortModel,r),l=t.querySelector(".sort-index");if(l?.remove(),n){const r=t.querySelector('[part~="sort-indicator"], .sort-indicator');r?.remove(),t.setAttribute("data-sort",n);const o=document.createElement("span");o.className="sort-indicator",this.setIcon(o,this.resolveIcon("asc"===n?"sortAsc":"sortDesc"));const s=t.querySelector(".tbw-filter-btn"),l=t.querySelector(".resize-handle"),d=s??l;if(d?t.insertBefore(o,d):t.appendChild(o),e&&this.sortModel.length>1&&void 0!==i){const e=document.createElement("span");e.className="sort-index",e.textContent=String(i),o.nextSibling?t.insertBefore(e,o.nextSibling):t.appendChild(e)}}else{t.removeAttribute("data-sort");const e=t.querySelector('[part~="sort-indicator"], .sort-indicator');e?.remove()}})}getSortModel(){return[...this.sortModel]}setSortModel(e){if(this.sortModel=[...e],this.clearCoreSortState(),this.emit("sort-change",{sortModel:[...e]}),this.requestRender(),this.grid?.requestStateChange?.(),e.length>0){const r=e.map(t=>{const e=this.columns.find(e=>e.field===t.field);return`${e?.header??t.field} ${"asc"===t.direction?"ascending":"descending"}`});t(this.gridElement,`Sorted by ${r.join(", then ")}`)}}clearSort(){this.sortModel=[],this.clearCoreSortState(),this.emit("sort-change",{sortModel:[]}),this.requestRender(),this.grid?.requestStateChange?.(),t(this.gridElement,"Sort cleared")}getSortIndex(t){return o(this.sortModel,t)}getSortDirection(t){return s(this.sortModel,t)}getColumnState(t){const e=this.sortModel.findIndex(e=>e.field===t);if(-1===e)return;return{sort:{direction:this.sortModel[e].direction,priority:e}}}applyColumnState(t,e){if(!e.sort)return void(this.sortModel=this.sortModel.filter(e=>e.field!==t));const r=this.sortModel.findIndex(e=>e.field===t),i={field:t,direction:e.sort.direction};-1!==r?this.sortModel[r]=i:this.sortModel.splice(e.sort.priority,0,i),this.clearCoreSortState()}}export{l as MultiSortPlugin};
 //# sourceMappingURL=index.js.map