@toolbox-web/grid 0.3.1 → 0.3.3
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/README.md +5 -4
- package/index.js +1210 -1188
- package/index.js.map +1 -1
- package/lib/core/grid.d.ts +2 -8
- package/lib/core/grid.d.ts.map +1 -1
- package/lib/core/internal/columns.d.ts +2 -69
- package/lib/core/internal/columns.d.ts.map +1 -1
- package/lib/core/internal/dom-builder.d.ts +7 -11
- package/lib/core/internal/dom-builder.d.ts.map +1 -1
- package/lib/core/internal/editing.d.ts.map +1 -1
- package/lib/core/internal/idle-scheduler.d.ts +0 -8
- package/lib/core/internal/idle-scheduler.d.ts.map +1 -1
- package/lib/core/internal/rows.d.ts +0 -5
- package/lib/core/internal/rows.d.ts.map +1 -1
- package/lib/core/internal/sanitize.d.ts +8 -0
- package/lib/core/internal/sanitize.d.ts.map +1 -1
- package/lib/core/internal/shell.d.ts +34 -18
- package/lib/core/internal/shell.d.ts.map +1 -1
- package/lib/core/internal/utils.d.ts +0 -7
- package/lib/core/internal/utils.d.ts.map +1 -1
- package/lib/core/types.d.ts +42 -15
- package/lib/core/types.d.ts.map +1 -1
- package/lib/plugins/clipboard/index.js.map +1 -1
- package/lib/plugins/column-virtualization/index.js.map +1 -1
- package/lib/plugins/context-menu/index.js.map +1 -1
- package/lib/plugins/export/index.js.map +1 -1
- package/lib/plugins/filtering/index.js.map +1 -1
- package/lib/plugins/grouping-columns/index.js.map +1 -1
- package/lib/plugins/grouping-rows/index.js.map +1 -1
- package/lib/plugins/master-detail/index.js.map +1 -1
- package/lib/plugins/multi-sort/index.js.map +1 -1
- package/lib/plugins/pinned-columns/index.js.map +1 -1
- package/lib/plugins/pinned-rows/index.js.map +1 -1
- package/lib/plugins/pivot/index.js.map +1 -1
- package/lib/plugins/reorder/index.js.map +1 -1
- package/lib/plugins/selection/index.js.map +1 -1
- package/lib/plugins/server-side/index.js.map +1 -1
- package/lib/plugins/tree/index.js.map +1 -1
- package/lib/plugins/undo-redo/index.js.map +1 -1
- package/lib/plugins/visibility/index.js.map +1 -1
- package/package.json +1 -1
- package/public.d.ts +6 -0
- package/public.d.ts.map +1 -1
- package/umd/grid.all.umd.js +21 -21
- package/umd/grid.all.umd.js.map +1 -1
- package/umd/grid.umd.js +11 -11
- package/umd/grid.umd.js.map +1 -1
package/index.js
CHANGED
|
@@ -1,48 +1,48 @@
|
|
|
1
|
-
const de = ':root{color-scheme:light dark}:host{--tbw-color-bg: transparent;--tbw-color-panel-bg: light-dark(#eeeeee, #222222);--tbw-color-fg: light-dark(#222222, #eeeeee);--tbw-color-fg-muted: light-dark(#555555, #aaaaaa);--tbw-color-accent: light-dark(#3b82f6, #3b82f6);--tbw-color-accent-fg: light-dark(#ffffff, #000000);--tbw-color-success: light-dark(hsl(122, 39%, 40%), hsl(122, 39%, 49%));--tbw-color-selection: light-dark(#fff7d6, #333333);--tbw-color-row-alt: var(--tbw-color-bg);--tbw-color-row-hover: light-dark(#f0f6ff, #1c1c1c);--tbw-color-header-bg: color-mix(in hsl, var(--tbw-color-panel-bg) 85%, var(--tbw-color-fg));--tbw-color-header-fg: color-mix(in hsl, var(--tbw-color-fg) 75%, var(--tbw-color-panel-bg));--tbw-color-border: light-dark(#d0d0d4, #454545);--tbw-color-border-strong: light-dark(#777777, #adacac);--tbw-color-border-cell: var(--tbw-color-border);--tbw-color-border-header: var(--tbw-color-border);--tbw-color-shadow: light-dark(rgba(0, 0, 0, .1), rgba(0, 0, 0, .3));--tbw-font-family: inherit;--tbw-font-size: inherit;--tbw-font-size-header: var(--tbw-font-size);--tbw-font-weight-header: bold;--tbw-cell-padding-header: 2px 8px;--tbw-cell-padding: 2px 8px;--tbw-cell-padding-input: 2px 6px;--tbw-row-height: 28px;--tbw-header-height: 30px;--tbw-cell-white-space: nowrap;--tbw-border-radius: 4px;--tbw-border-input: 1px solid var(--tbw-color-border-strong);--tbw-border-header: 1px solid var(--tbw-color-border-header);--tbw-row-divider: 1px solid var(--tbw-color-border-cell);--tbw-row-hover-outline: 0;--tbw-color-active-row-bg: var(--tbw-color-selection);--tbw-active-row-outline: 0;--tbw-focus-outline: 2px solid var(--tbw-color-accent);--tbw-focus-outline-offset: -2px;--tbw-focus-background: rgba(from var(--tbw-color-accent) r g b / 12%);--tbw-range-border-color: var(--tbw-color-accent);--tbw-range-selection-bg: rgba(from var(--tbw-range-border-color) r g b / 12%);--tbw-resize-handle-width: 6px;--tbw-resize-handle-color: transparent;--tbw-resize-handle-color-hover: var(--tbw-color-accent);--tbw-resize-handle-border-radius: 0;--tbw-scrollbar-thumb: var(--tbw-color-border-strong);--tbw-scrollbar-track: var(--tbw-color-bg);--tbw-transition-duration: .12s;--tbw-transition-ease: ease;--tbw-animation-duration: .2s;--tbw-animation-easing: ease-out;--tbw-animation-enabled: 1;--tbw-editing-bg: var(--tbw-color-selection);--tbw-editing-border: var(--tbw-border-input, 1px solid var(--tbw-color-border-strong));--tbw-padding-editing-input: var(--tbw-cell-padding-input, 2px 6px);--tbw-font-size-editor: inherit;--tbw-sort-indicator-color: var(--tbw-color-fg-muted);--tbw-sort-indicator-active-color: var(--tbw-color-accent);--tbw-header-text-transform: none;--tbw-header-letter-spacing: normal;--tbw-color-header-separator: var(--tbw-color-border-cell);--tbw-checkbox-size: 16px;--tbw-density-scale: 1}:host{position:relative;display:block;width:100%;height:100%;min-height:0;contain:content;font-family:var(--tbw-font-family);font-size:var(--tbw-font-size);background:var(--tbw-color-bg);color:var(--tbw-color-fg);border:1px solid var(--tbw-color-border);border-radius:var(--tbw-border-radius);overflow:clip;outline:none}:host,:host *{box-sizing:border-box}:host .header{display:block;flex-shrink:0;z-index:var(--tbw-z-layer-header, 30);background:var(--tbw-color-header-bg);overflow:visible}:host .header-group-row{display:grid;grid-template-columns:var(--tbw-column-template);background:var(--tbw-color-header-bg);z-index:var(--tbw-z-layer-header, 30)}:host .header-group-cell{display:flex;align-items:center;justify-content:flex-start;padding:var(--tbw-cell-padding-header, 2px 8px);color:var(--tbw-color-header-group-fg, var(--tbw-color-header-fg));font-weight:var(--tbw-font-weight-header-group, var(--tbw-font-weight-header));justify-content:var(--tbw-align-header-group, var(--tbw-align-header, flex-start))}:host .header-row{display:grid;grid-template-columns:var(--tbw-column-template);color:var(--tbw-color-header-fg);font-size:var(--tbw-font-size-header);min-height:var(--tbw-header-height);border-bottom:var(--tbw-border-header);z-index:var(--tbw-z-layer-header, 30)}:host .header-row>.cell{display:flex;align-items:center;gap:4px;padding:var(--tbw-cell-padding-header, 2px 8px);background-color:var(--tbw-color-header-bg);font-weight:var(--tbw-font-weight-header);border-right:1px solid var(--tbw-color-border-cell);overflow:hidden;min-width:0}:host .header-row>.cell>span:first-child{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}:host .header-row>.cell>span[part~=sort-indicator]{flex-shrink:0;opacity:.6}:host .header-row>.cell:last-child{border-right:0}:host .header-group-cell:not(:last-child),:host .header-row>.cell.grouped.group-end:not(:last-child){border-right:2px solid var(--tbw-color-border)}:host .tbw-grid-root{display:flex;flex-direction:column;height:100%}:host .rows-body-wrapper{flex:1;min-height:0;display:flex;flex-direction:row;width:100%;min-width:fit-content}:host .rows-body{flex:1;min-width:0;min-height:0;display:flex;flex-direction:column;overflow:visible}:host .rows-container{display:flex;flex-direction:row;flex:1;min-height:0;overflow:visible}:host .rows-viewport{flex:1;min-width:0;position:relative;display:block;overflow:clip}:host .faux-vscroll{position:sticky;inset-inline-end:0;flex-shrink:0;width:auto;overflow-y:auto;overflow-x:hidden;z-index:var(--tbw-z-layer-header, 30)}:host .faux-vscroll-spacer{width:1px}:host .rows-viewport .rows{position:absolute;top:0;left:0;min-width:100%;will-change:transform;z-index:var(--tbw-z-layer-rows, 1)}:host .data-grid-row{display:grid;grid-template-columns:var(--tbw-column-template);contain:layout style}:host .data-grid-row:has(.editing){background:var(--tbw-editing-bg)}:host .selecting .data-grid-row>.cell{user-select:none}:host .data-grid-row>.cell.selected:focus-visible,:host .data-grid-row>.cell:focus-visible:not(.cell-focus){outline:none}:host .data-grid-row>.cell{display:block;padding:var(--tbw-cell-padding, 2px 8px);border-bottom:var(--tbw-row-divider);min-height:var(--tbw-row-height);line-height:calc(var(--tbw-row-height) - 5px);border-right:1px solid var(--tbw-color-border-cell);overflow:hidden;min-width:0;white-space:var(--tbw-cell-white-space, nowrap);text-overflow:ellipsis}:host .data-grid-row>.cell>*{overflow:hidden;text-overflow:ellipsis;white-space:inherit;min-width:0}:host .data-grid-row>.cell:last-child{border-right:0}:host .data-grid-row>.cell[data-type=boolean]{text-align:center}:host .data-grid-row>.cell[data-type=boolean] input[type=checkbox]{margin:0;width:var(--tbw-checkbox-size);height:var(--tbw-checkbox-size);vertical-align:middle}:host .data-grid-row>.cell.editing{overflow:hidden;padding:0;display:flex;min-height:calc(var(--tbw-row-height) + 2px)}:host .data-grid-row>.cell.editing input:not([type=checkbox]),:host .data-grid-row>.cell.editing select,:host .data-grid-row>.cell.editing textarea{width:100%;height:100%;flex:1 1 auto;min-width:0;border:var(--tbw-editing-border);padding:var(--tbw-padding-editing-input);font-size:var(--tbw-font-size-editor)}:host .data-grid-row:nth-child(2n){background:var(--tbw-color-row-alt)}:host .data-grid-row:hover{background:var(--tbw-color-row-hover)}:host .sortable{cursor:pointer;user-select:none}:host .resize-handle{position:absolute;top:0;right:calc(var(--tbw-resize-handle-width) / -2);width:var(--tbw-resize-handle-width);height:100%;cursor:e-resize;user-select:none;touch-action:none;z-index:20;background:var(--tbw-resize-handle-color);transition:background .12s ease;border-radius:var(--tbw-resize-handle-border-radius)}:host .resize-handle:hover{background:var(--tbw-resize-handle-color-hover)}:host .cell-focus,:host .row-focus{outline:var(--tbw-focus-outline);outline-offset:var(--tbw-focus-outline-offset)}:host .sticky-left,:host .sticky-right{position:sticky;z-index:25}:host .header-row>.cell.sticky-left,:host .header-row>.cell.sticky-right{background:var(--tbw-color-header-bg);z-index:35}:host .data-grid-row>.cell.sticky-left,:host .data-grid-row>.cell.sticky-right{background:var(--tbw-color-panel-bg)}:host .sticky-left{box-shadow:1px 0 0 var(--tbw-color-border)}:host .sticky-right{box-shadow:-1px 0 0 var(--tbw-color-border)}.grid-container{position:relative;width:100%;height:100%}.grid-placeholder{padding:2rem;text-align:center;color:var(--tbw-color-fg);opacity:.6}:host{--tbw-shell-header-height: 44px;--tbw-shell-header-bg: var(--tbw-color-panel-bg);--tbw-shell-header-border: var(--tbw-color-border);--tbw-shell-title-font-size: 14px;--tbw-shell-title-font-weight: 600;--tbw-tool-panel-width: 280px;--tbw-tool-panel-bg: var(--tbw-color-panel-bg);--tbw-tool-panel-border: var(--tbw-color-border);--tbw-tool-panel-header-height: 40px;--tbw-tool-panel-transition: var(--tbw-animation-duration) var(--tbw-animation-easing);--tbw-toolbar-button-size: 32px;--tbw-toolbar-button-gap: 4px}:host .tbw-grid-root.has-shell{display:flex;flex-direction:column;height:100%}:host .tbw-shell-header{display:flex;align-items:center;gap:8px;min-height:var(--tbw-shell-header-height);padding:0 8px;background:var(--tbw-shell-header-bg);border-bottom:1px solid var(--tbw-shell-header-border);flex-shrink:0}:host .tbw-shell-title{font-size:var(--tbw-shell-title-font-size);font-weight:var(--tbw-shell-title-font-weight);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}:host .tbw-shell-content{flex:1;display:flex;align-items:center;gap:12px;min-width:0;overflow:hidden}:host .tbw-shell-toolbar{display:flex;align-items:center;gap:var(--tbw-toolbar-button-gap);flex-shrink:0}:host .tbw-toolbar-btn{display:inline-flex;align-items:center;justify-content:center;width:var(--tbw-toolbar-button-size);height:var(--tbw-toolbar-button-size);padding:0;border:1px solid transparent;border-radius:var(--tbw-border-radius);background:transparent;color:var(--tbw-color-fg);cursor:pointer;font-size:16px;transition:background var(--tbw-transition-duration) var(--tbw-transition-ease),border-color var(--tbw-transition-duration) var(--tbw-transition-ease)}:host .tbw-toolbar-btn:hover{background:var(--tbw-color-row-hover)}:host .tbw-toolbar-btn:focus-visible{outline:var(--tbw-focus-outline);outline-offset:var(--tbw-focus-outline-offset)}:host .tbw-toolbar-btn.active{background:var(--tbw-focus-background);border-color:var(--tbw-color-accent)}:host .tbw-toolbar-btn:disabled{opacity:.5;cursor:not-allowed}:host .tbw-toolbar-separator{width:1px;height:20px;background:var(--tbw-color-border);margin:0 4px}:host .tbw-shell-body{position:relative;display:flex;flex:1;min-height:0;overflow:visible}:host .tbw-grid-content{flex:1;min-width:0;min-height:0;display:flex;flex-direction:row;overflow:hidden}:host .tbw-scroll-area{flex:1;min-width:0;min-height:0;display:flex;flex-direction:column;overflow-x:auto;overflow-y:hidden;overflow-anchor:none}:host .tbw-tool-panel{position:absolute;top:0;bottom:0;right:0;width:0;overflow:hidden;background:var(--tbw-tool-panel-bg);border-left:1px solid var(--tbw-tool-panel-border);transition:width var(--tbw-tool-panel-transition);display:flex;flex-direction:column;z-index:30;box-shadow:-2px 0 8px var(--tbw-color-shadow)}:host .tbw-tool-panel[data-position=left]{right:auto;left:0;border-left:none;border-right:1px solid var(--tbw-tool-panel-border);box-shadow:2px 0 8px var(--tbw-color-shadow)}:host .tbw-tool-panel.open{width:var(--tbw-tool-panel-width)}:host .tbw-tool-panel-resize{position:absolute;top:0;bottom:0;width:6px;cursor:col-resize;background:transparent;z-index:10;transition:background var(--tbw-transition-duration) var(--tbw-transition-ease)}:host .tbw-tool-panel-resize[data-handle-position=left]{left:0}:host .tbw-tool-panel-resize[data-handle-position=right]{right:0}:host .tbw-tool-panel-resize:hover,:host .tbw-tool-panel-resize.resizing{background:var(--tbw-color-accent)}:host .tbw-tool-panel-header{display:flex;align-items:center;justify-content:space-between;min-height:var(--tbw-tool-panel-header-height);padding:0 12px;border-bottom:1px solid var(--tbw-tool-panel-border);flex-shrink:0}:host .tbw-tool-panel-title{font-weight:600;font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}:host .tbw-tool-panel-close{display:inline-flex;align-items:center;justify-content:center;width:24px;height:24px;padding:0;border:none;border-radius:var(--tbw-border-radius);background:transparent;color:var(--tbw-color-fg-muted);cursor:pointer;font-size:14px}:host .tbw-tool-panel-close:hover{background:var(--tbw-color-row-hover);color:var(--tbw-color-fg)}:host .tbw-tool-panel-content{flex:1;overflow:auto}:host .tbw-accordion{display:flex;flex-direction:column;gap:0}:host .tbw-accordion-section{border-bottom:1px solid var(--tbw-tool-panel-border)}:host .tbw-accordion-section:last-child{border-bottom:none}:host .tbw-accordion-header{display:flex;align-items:center;gap:8px;width:100%;padding:10px 12px;border:none;background:transparent;color:var(--tbw-color-fg);font-size:13px;font-weight:600;text-align:left;cursor:pointer;user-select:none}:host .tbw-accordion-header:hover{background:var(--tbw-color-row-hover)}:host .tbw-accordion-section.single .tbw-accordion-header{cursor:default}:host .tbw-accordion-section.single .tbw-accordion-header:hover{background:transparent}:host .tbw-accordion-chevron{display:inline-flex;align-items:center;justify-content:center;width:16px;height:16px;font-size:10px;color:var(--tbw-color-fg-muted);transition:transform .15s ease;flex-shrink:0}:host .tbw-accordion-section.expanded .tbw-accordion-chevron{transform:rotate(90deg)}:host .tbw-accordion-icon{display:inline-flex;align-items:center;justify-content:center;width:16px;height:16px;font-size:14px;flex-shrink:0}:host .tbw-accordion-title{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}:host .tbw-accordion-content{display:none}:host .tbw-accordion-section.expanded .tbw-accordion-content{display:block}@media(prefers-reduced-motion:reduce){:host([data-animation-mode="reduced-motion"]){--tbw-animation-enabled: 0;--tbw-animation-duration: 0ms}}:host([data-animation-mode="off"]){--tbw-animation-enabled: 0;--tbw-animation-duration: 0ms}:host .tbw-expanding{animation:tbw-expand var(--tbw-animation-duration) var(--tbw-animation-easing) forwards;overflow:hidden}:host .tbw-collapsing{animation:tbw-collapse var(--tbw-animation-duration) var(--tbw-animation-easing) forwards;overflow:hidden}@keyframes tbw-expand{0%{opacity:0;max-height:0;transform:translateY(-8px)}to{opacity:1;max-height:500px;transform:translateY(0)}}@keyframes tbw-collapse{0%{opacity:1;max-height:500px;transform:translateY(0)}to{opacity:0;max-height:0;transform:translateY(-8px)}}:host .tbw-fade-in{animation:tbw-fade-in var(--tbw-animation-duration) var(--tbw-animation-easing) forwards}:host .tbw-fade-out{animation:tbw-fade-out var(--tbw-animation-duration) var(--tbw-animation-easing) forwards}@keyframes tbw-fade-in{0%{opacity:0}to{opacity:1}}@keyframes tbw-fade-out{0%{opacity:1}to{opacity:0}}:host .tbw-flip-animating{will-change:transform;z-index:1}:host .tbw-toggle-icon{display:inline-flex;align-items:center;justify-content:center;transition:transform var(--tbw-animation-duration) var(--tbw-animation-easing)}:host .tbw-toggle-icon.tbw-expanded{transform:rotate(90deg)}';
|
|
2
|
-
function
|
|
1
|
+
const de = ':root{color-scheme:light dark}:host{--tbw-color-bg: transparent;--tbw-color-panel-bg: light-dark(#eeeeee, #222222);--tbw-color-fg: light-dark(#222222, #eeeeee);--tbw-color-fg-muted: light-dark(#555555, #aaaaaa);--tbw-color-accent: light-dark(#3b82f6, #3b82f6);--tbw-color-accent-fg: light-dark(#ffffff, #000000);--tbw-color-success: light-dark(hsl(122, 39%, 40%), hsl(122, 39%, 49%));--tbw-color-selection: light-dark(#fff7d6, #333333);--tbw-color-row-alt: var(--tbw-color-bg);--tbw-color-row-hover: light-dark(#f0f6ff, #1c1c1c);--tbw-color-header-bg: color-mix(in hsl, var(--tbw-color-panel-bg) 85%, var(--tbw-color-fg));--tbw-color-header-fg: color-mix(in hsl, var(--tbw-color-fg) 75%, var(--tbw-color-panel-bg));--tbw-color-border: light-dark(#d0d0d4, #454545);--tbw-color-border-strong: light-dark(#777777, #adacac);--tbw-color-border-cell: var(--tbw-color-border);--tbw-color-border-header: var(--tbw-color-border);--tbw-color-shadow: light-dark(rgba(0, 0, 0, .1), rgba(0, 0, 0, .3));--tbw-font-family: inherit;--tbw-font-size: inherit;--tbw-font-size-header: var(--tbw-font-size);--tbw-font-weight-header: bold;--tbw-cell-padding-header: 2px 8px;--tbw-cell-padding: 2px 8px;--tbw-cell-padding-input: 2px 6px;--tbw-row-height: 28px;--tbw-header-height: 30px;--tbw-cell-white-space: nowrap;--tbw-border-radius: 4px;--tbw-border-input: 1px solid var(--tbw-color-border-strong);--tbw-border-header: 1px solid var(--tbw-color-border-header);--tbw-row-divider: 1px solid var(--tbw-color-border-cell);--tbw-row-hover-outline: 0;--tbw-color-active-row-bg: var(--tbw-color-selection);--tbw-active-row-outline: 0;--tbw-focus-outline: 2px solid var(--tbw-color-accent);--tbw-focus-outline-offset: -2px;--tbw-focus-background: rgba(from var(--tbw-color-accent) r g b / 12%);--tbw-range-border-color: var(--tbw-color-accent);--tbw-range-selection-bg: rgba(from var(--tbw-range-border-color) r g b / 12%);--tbw-resize-handle-width: 6px;--tbw-resize-handle-color: transparent;--tbw-resize-handle-color-hover: var(--tbw-color-accent);--tbw-resize-handle-border-radius: 0;--tbw-scrollbar-thumb: var(--tbw-color-border-strong);--tbw-scrollbar-track: var(--tbw-color-bg);--tbw-transition-duration: .12s;--tbw-transition-ease: ease;--tbw-animation-duration: .2s;--tbw-animation-easing: ease-out;--tbw-animation-enabled: 1;--tbw-editing-bg: var(--tbw-color-selection);--tbw-editing-border: var(--tbw-border-input, 1px solid var(--tbw-color-border-strong));--tbw-padding-editing-input: var(--tbw-cell-padding-input, 2px 6px);--tbw-font-size-editor: inherit;--tbw-editing-row-bg: var(--tbw-editing-bg);--tbw-editing-row-outline-color: var(--tbw-color-accent);--tbw-editing-row-outline-width: 1px;--tbw-sort-indicator-color: var(--tbw-color-fg-muted);--tbw-sort-indicator-active-color: var(--tbw-color-accent);--tbw-header-text-transform: none;--tbw-header-letter-spacing: normal;--tbw-color-header-separator: var(--tbw-color-border-cell);--tbw-checkbox-size: 16px;--tbw-density-scale: 1}:host{position:relative;display:block;width:100%;height:100%;min-height:0;contain:content;font-family:var(--tbw-font-family);font-size:var(--tbw-font-size);background:var(--tbw-color-bg);color:var(--tbw-color-fg);border:1px solid var(--tbw-color-border);border-radius:var(--tbw-border-radius);overflow:clip;outline:none}:host,:host *{box-sizing:border-box}:host .header{display:block;flex-shrink:0;z-index:var(--tbw-z-layer-header, 30);background:var(--tbw-color-header-bg);overflow:visible}:host .header-group-row{display:grid;grid-template-columns:var(--tbw-column-template);background:var(--tbw-color-header-bg);z-index:var(--tbw-z-layer-header, 30)}:host .header-group-cell{display:flex;align-items:center;justify-content:flex-start;padding:var(--tbw-cell-padding-header, 2px 8px);color:var(--tbw-color-header-group-fg, var(--tbw-color-header-fg));font-weight:var(--tbw-font-weight-header-group, var(--tbw-font-weight-header));justify-content:var(--tbw-align-header-group, var(--tbw-align-header, flex-start))}:host .header-row{display:grid;grid-template-columns:var(--tbw-column-template);color:var(--tbw-color-header-fg);font-size:var(--tbw-font-size-header);min-height:var(--tbw-header-height);border-bottom:var(--tbw-border-header);z-index:var(--tbw-z-layer-header, 30)}:host .header-row>.cell{display:flex;align-items:center;gap:4px;padding:var(--tbw-cell-padding-header, 2px 8px);background-color:var(--tbw-color-header-bg);font-weight:var(--tbw-font-weight-header);border-right:1px solid var(--tbw-color-border-cell);overflow:hidden;min-width:0}:host .header-row>.cell>span:first-child{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}:host .header-row>.cell>span[part~=sort-indicator]{flex-shrink:0;opacity:.6}:host .header-row>.cell:last-child{border-right:0}:host .header-group-cell:not(:last-child),:host .header-row>.cell.grouped.group-end:not(:last-child){border-right:2px solid var(--tbw-color-border)}:host .tbw-grid-root{display:flex;flex-direction:column;height:100%}:host .rows-body-wrapper{flex:1;min-height:0;display:flex;flex-direction:row;width:100%;min-width:fit-content}:host .rows-body{flex:1;min-width:0;min-height:0;display:flex;flex-direction:column;overflow:visible}:host .rows-container{display:flex;flex-direction:row;flex:1;min-height:0;overflow:visible}:host .rows-viewport{flex:1;min-width:0;position:relative;display:block;overflow:clip}:host .faux-vscroll{position:sticky;inset-inline-end:0;flex-shrink:0;width:auto;overflow-y:auto;overflow-x:hidden;z-index:var(--tbw-z-layer-header, 30)}:host .faux-vscroll-spacer{width:1px}:host .rows-viewport .rows{position:absolute;top:0;left:0;min-width:100%;will-change:transform;z-index:var(--tbw-z-layer-rows, 1)}:host .data-grid-row{display:grid;grid-template-columns:var(--tbw-column-template);contain:layout style;content-visibility:auto;contain-intrinsic-size:auto var(--tbw-row-height)}:host .data-grid-row:has(.editing){background:var(--tbw-editing-row-bg);outline:var(--tbw-editing-row-outline-width) solid var(--tbw-editing-row-outline-color);outline-offset:calc(-1 * var(--tbw-editing-row-outline-width))}:host .selecting .data-grid-row>.cell{user-select:none}:host .data-grid-row>.cell.selected:focus-visible,:host .data-grid-row>.cell:focus-visible:not(.cell-focus){outline:none}:host .data-grid-row>.cell{display:block;padding:var(--tbw-cell-padding, 2px 8px);border-bottom:var(--tbw-row-divider);min-height:var(--tbw-row-height);line-height:calc(var(--tbw-row-height) - 5px);border-right:1px solid var(--tbw-color-border-cell);overflow:hidden;min-width:0;white-space:var(--tbw-cell-white-space, nowrap);text-overflow:ellipsis}:host .data-grid-row>.cell>*{overflow:hidden;text-overflow:ellipsis;white-space:inherit;min-width:0}:host .data-grid-row>.cell:last-child{border-right:0}:host .data-grid-row>.cell[data-type=boolean]{text-align:center}:host .data-grid-row>.cell[data-type=boolean] input[type=checkbox]{margin:0;width:var(--tbw-checkbox-size);height:var(--tbw-checkbox-size);vertical-align:middle}:host .data-grid-row>.cell.editing{overflow:hidden;padding:0;display:flex;min-height:calc(var(--tbw-row-height) + 2px)}:host .data-grid-row>.cell.editing input:not([type=checkbox]),:host .data-grid-row>.cell.editing select,:host .data-grid-row>.cell.editing textarea{width:100%;height:100%;flex:1 1 auto;min-width:0;border:var(--tbw-editing-border);padding:var(--tbw-padding-editing-input);font-size:var(--tbw-font-size-editor)}:host .data-grid-row:nth-child(2n){background:var(--tbw-color-row-alt)}:host .data-grid-row:hover{background:var(--tbw-color-row-hover)}:host .sortable{cursor:pointer;user-select:none}:host .resize-handle{position:absolute;top:0;right:calc(var(--tbw-resize-handle-width) / -2);width:var(--tbw-resize-handle-width);height:100%;cursor:e-resize;user-select:none;touch-action:none;z-index:20;background:var(--tbw-resize-handle-color);transition:background .12s ease;border-radius:var(--tbw-resize-handle-border-radius)}:host .resize-handle:hover{background:var(--tbw-resize-handle-color-hover)}:host .cell-focus,:host .row-focus{outline:var(--tbw-focus-outline);outline-offset:var(--tbw-focus-outline-offset)}:host .sticky-left,:host .sticky-right{position:sticky;z-index:25}:host .header-row>.cell.sticky-left,:host .header-row>.cell.sticky-right{background:var(--tbw-color-header-bg);z-index:35}:host .data-grid-row>.cell.sticky-left,:host .data-grid-row>.cell.sticky-right{background:var(--tbw-color-panel-bg)}:host .sticky-left{box-shadow:1px 0 0 var(--tbw-color-border)}:host .sticky-right{box-shadow:-1px 0 0 var(--tbw-color-border)}.grid-container{position:relative;width:100%;height:100%}.grid-placeholder{padding:2rem;text-align:center;color:var(--tbw-color-fg);opacity:.6}:host{--tbw-shell-header-height: 44px;--tbw-shell-header-bg: var(--tbw-color-panel-bg);--tbw-shell-header-border: var(--tbw-color-border);--tbw-shell-title-font-size: 14px;--tbw-shell-title-font-weight: 600;--tbw-tool-panel-width: 280px;--tbw-tool-panel-bg: var(--tbw-color-panel-bg);--tbw-tool-panel-border: var(--tbw-color-border);--tbw-tool-panel-header-height: 40px;--tbw-tool-panel-transition: var(--tbw-animation-duration) var(--tbw-animation-easing);--tbw-toolbar-button-size: 32px;--tbw-toolbar-button-gap: 4px}:host .tbw-grid-root.has-shell{display:flex;flex-direction:column;height:100%}:host .tbw-shell-header{display:flex;align-items:center;gap:8px;min-height:var(--tbw-shell-header-height);padding:0 8px;background:var(--tbw-shell-header-bg);border-bottom:1px solid var(--tbw-shell-header-border);flex-shrink:0}:host .tbw-shell-title{font-size:var(--tbw-shell-title-font-size);font-weight:var(--tbw-shell-title-font-weight);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}:host .tbw-shell-content{flex:1;display:flex;align-items:center;gap:12px;min-width:0;overflow:hidden}:host .tbw-shell-toolbar{display:flex;align-items:center;gap:var(--tbw-toolbar-button-gap);flex-shrink:0}:host .tbw-toolbar-btn{display:inline-flex;align-items:center;justify-content:center;width:var(--tbw-toolbar-button-size);height:var(--tbw-toolbar-button-size);padding:0;border:1px solid transparent;border-radius:var(--tbw-border-radius);background:transparent;color:var(--tbw-color-fg);cursor:pointer;font-size:16px;transition:background var(--tbw-transition-duration) var(--tbw-transition-ease),border-color var(--tbw-transition-duration) var(--tbw-transition-ease)}:host .tbw-toolbar-btn:hover{background:var(--tbw-color-row-hover)}:host .tbw-toolbar-btn:focus-visible{outline:var(--tbw-focus-outline);outline-offset:var(--tbw-focus-outline-offset)}:host .tbw-toolbar-btn.active{background:var(--tbw-focus-background);border-color:var(--tbw-color-accent)}:host .tbw-toolbar-btn:disabled{opacity:.5;cursor:not-allowed}:host .tbw-toolbar-separator{width:1px;height:20px;background:var(--tbw-color-border);margin:0 4px}:host .tbw-shell-body{position:relative;display:flex;flex:1;min-height:0;overflow:visible}:host .tbw-grid-content{flex:1;min-width:0;min-height:0;display:flex;flex-direction:row;overflow:hidden}:host .tbw-scroll-area{flex:1;min-width:0;min-height:0;display:flex;flex-direction:column;overflow-x:auto;overflow-y:hidden;overflow-anchor:none}:host .tbw-tool-panel{position:absolute;top:0;bottom:0;right:0;width:0;overflow:hidden;background:var(--tbw-tool-panel-bg);border-left:1px solid var(--tbw-tool-panel-border);transition:width var(--tbw-tool-panel-transition);display:flex;flex-direction:column;z-index:30;box-shadow:-2px 0 8px var(--tbw-color-shadow)}:host .tbw-tool-panel[data-position=left]{right:auto;left:0;border-left:none;border-right:1px solid var(--tbw-tool-panel-border);box-shadow:2px 0 8px var(--tbw-color-shadow)}:host .tbw-tool-panel.open{width:var(--tbw-tool-panel-width)}:host .tbw-tool-panel-resize{position:absolute;top:0;bottom:0;width:6px;cursor:col-resize;background:transparent;z-index:10;transition:background var(--tbw-transition-duration) var(--tbw-transition-ease)}:host .tbw-tool-panel-resize[data-handle-position=left]{left:0}:host .tbw-tool-panel-resize[data-handle-position=right]{right:0}:host .tbw-tool-panel-resize:hover,:host .tbw-tool-panel-resize.resizing{background:var(--tbw-color-accent)}:host .tbw-tool-panel-header{display:flex;align-items:center;justify-content:space-between;min-height:var(--tbw-tool-panel-header-height);padding:0 12px;border-bottom:1px solid var(--tbw-tool-panel-border);flex-shrink:0}:host .tbw-tool-panel-title{font-weight:600;font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}:host .tbw-tool-panel-close{display:inline-flex;align-items:center;justify-content:center;width:24px;height:24px;padding:0;border:none;border-radius:var(--tbw-border-radius);background:transparent;color:var(--tbw-color-fg-muted);cursor:pointer;font-size:14px}:host .tbw-tool-panel-close:hover{background:var(--tbw-color-row-hover);color:var(--tbw-color-fg)}:host .tbw-tool-panel-content{flex:1;overflow:auto}:host .tbw-accordion{display:flex;flex-direction:column;gap:0}:host .tbw-accordion-section{border-bottom:1px solid var(--tbw-tool-panel-border)}:host .tbw-accordion-section:last-child{border-bottom:none}:host .tbw-accordion-header{display:flex;align-items:center;gap:8px;width:100%;padding:10px 12px;border:none;background:transparent;color:var(--tbw-color-fg);font-size:13px;font-weight:600;text-align:left;cursor:pointer;user-select:none}:host .tbw-accordion-header:hover{background:var(--tbw-color-row-hover)}:host .tbw-accordion-section.single .tbw-accordion-header{cursor:default}:host .tbw-accordion-section.single .tbw-accordion-header:hover{background:transparent}:host .tbw-accordion-chevron{display:inline-flex;align-items:center;justify-content:center;width:16px;height:16px;font-size:10px;color:var(--tbw-color-fg-muted);transition:transform .15s ease;flex-shrink:0}:host .tbw-accordion-section.expanded .tbw-accordion-chevron{transform:rotate(90deg)}:host .tbw-accordion-icon{display:inline-flex;align-items:center;justify-content:center;width:16px;height:16px;font-size:14px;flex-shrink:0}:host .tbw-accordion-title{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}:host .tbw-accordion-content{display:none}:host .tbw-accordion-section.expanded .tbw-accordion-content{display:block}@media(forced-colors:active){:host{--tbw-color-border: CanvasText;--tbw-color-border-strong: CanvasText;--tbw-color-border-cell: CanvasText;--tbw-color-border-header: CanvasText;--tbw-color-fg: CanvasText;--tbw-color-bg: Canvas;--tbw-color-panel-bg: Canvas;--tbw-color-header-bg: Canvas;--tbw-color-header-fg: CanvasText;--tbw-color-accent: Highlight;--tbw-color-accent-fg: HighlightText;--tbw-color-selection: Highlight;--tbw-color-row-hover: Highlight;--tbw-focus-outline: 2px solid Highlight;--tbw-range-border-color: Highlight}:host .cell:focus,:host .cell.active-cell{outline:2px solid Highlight!important;outline-offset:-2px}:host .data-grid-row[aria-selected=true]{background:Highlight!important;color:HighlightText!important}}@media(prefers-reduced-motion:reduce){:host([data-animation-mode="reduced-motion"]){--tbw-animation-enabled: 0;--tbw-animation-duration: 0ms}}:host([data-animation-mode="off"]){--tbw-animation-enabled: 0;--tbw-animation-duration: 0ms}:host .tbw-expanding{animation:tbw-expand var(--tbw-animation-duration) var(--tbw-animation-easing) forwards;overflow:hidden}:host .tbw-collapsing{animation:tbw-collapse var(--tbw-animation-duration) var(--tbw-animation-easing) forwards;overflow:hidden}@keyframes tbw-expand{0%{opacity:0;max-height:0;transform:translateY(-8px)}to{opacity:1;max-height:500px;transform:translateY(0)}}@keyframes tbw-collapse{0%{opacity:1;max-height:500px;transform:translateY(0)}to{opacity:0;max-height:0;transform:translateY(-8px)}}:host .tbw-fade-in{animation:tbw-fade-in var(--tbw-animation-duration) var(--tbw-animation-easing) forwards}:host .tbw-fade-out{animation:tbw-fade-out var(--tbw-animation-duration) var(--tbw-animation-easing) forwards}@keyframes tbw-fade-in{0%{opacity:0}to{opacity:1}}@keyframes tbw-fade-out{0%{opacity:1}to{opacity:0}}:host .tbw-flip-animating{will-change:transform;z-index:1}:host .tbw-toggle-icon{display:inline-flex;align-items:center;justify-content:center;transition:transform var(--tbw-animation-duration) var(--tbw-animation-easing)}:host .tbw-toggle-icon.tbw-expanded{transform:rotate(90deg)}';
|
|
2
|
+
function Fe(t) {
|
|
3
3
|
const e = /* @__PURE__ */ new Map();
|
|
4
4
|
return t._sortState && e.set(t._sortState.field, {
|
|
5
5
|
direction: t._sortState.direction === 1 ? "asc" : "desc",
|
|
6
6
|
priority: 0
|
|
7
7
|
}), e;
|
|
8
8
|
}
|
|
9
|
-
function
|
|
10
|
-
const o = t._columns, n =
|
|
9
|
+
function xe(t, e) {
|
|
10
|
+
const o = t._columns, n = Fe(t);
|
|
11
11
|
return {
|
|
12
|
-
columns: o.map((i,
|
|
13
|
-
const
|
|
12
|
+
columns: o.map((i, r) => {
|
|
13
|
+
const l = {
|
|
14
14
|
field: i.field,
|
|
15
|
-
order:
|
|
15
|
+
order: r,
|
|
16
16
|
visible: !0
|
|
17
17
|
// If it's in _columns, it's visible (hidden columns are filtered out)
|
|
18
18
|
}, s = i;
|
|
19
|
-
s.__renderedWidth !== void 0 ?
|
|
19
|
+
s.__renderedWidth !== void 0 ? l.width = s.__renderedWidth : i.width !== void 0 && (l.width = typeof i.width == "string" ? parseFloat(i.width) : i.width);
|
|
20
20
|
const a = n.get(i.field);
|
|
21
|
-
a && (
|
|
21
|
+
a && (l.sort = a);
|
|
22
22
|
for (const c of e)
|
|
23
23
|
if (c.getColumnState) {
|
|
24
|
-
const
|
|
25
|
-
|
|
24
|
+
const f = c.getColumnState(i.field);
|
|
25
|
+
f && Object.assign(l, f);
|
|
26
26
|
}
|
|
27
|
-
return
|
|
27
|
+
return l;
|
|
28
28
|
})
|
|
29
29
|
};
|
|
30
30
|
}
|
|
31
|
-
function
|
|
31
|
+
function Ge(t, e, o, n) {
|
|
32
32
|
if (!e.columns || e.columns.length === 0) return;
|
|
33
|
-
const i = new Map(e.columns.map((s) => [s.field, s])),
|
|
33
|
+
const i = new Map(e.columns.map((s) => [s.field, s])), r = o.map((s) => {
|
|
34
34
|
const a = i.get(s.field);
|
|
35
35
|
if (!a) return s;
|
|
36
36
|
const c = { ...s };
|
|
37
37
|
return a.width !== void 0 && (c.width = a.width, c.__renderedWidth = a.width), a.visible !== void 0 && (c.hidden = !a.visible), c;
|
|
38
38
|
});
|
|
39
|
-
|
|
40
|
-
const c = i.get(s.field)?.order ?? 1 / 0,
|
|
41
|
-
return c -
|
|
42
|
-
}), t._columns =
|
|
43
|
-
const
|
|
44
|
-
if (
|
|
45
|
-
const s =
|
|
39
|
+
r.sort((s, a) => {
|
|
40
|
+
const c = i.get(s.field)?.order ?? 1 / 0, f = i.get(a.field)?.order ?? 1 / 0;
|
|
41
|
+
return c - f;
|
|
42
|
+
}), t._columns = r;
|
|
43
|
+
const l = e.columns.filter((s) => s.sort !== void 0).sort((s, a) => (s.sort?.priority ?? 0) - (a.sort?.priority ?? 0));
|
|
44
|
+
if (l.length > 0) {
|
|
45
|
+
const s = l[0];
|
|
46
46
|
s.sort && (t._sortState = {
|
|
47
47
|
field: s.field,
|
|
48
48
|
direction: s.sort.direction === "asc" ? 1 : -1
|
|
@@ -54,39 +54,39 @@ function Fe(t, e, o, n) {
|
|
|
54
54
|
for (const a of e.columns)
|
|
55
55
|
s.applyColumnState(a.field, a);
|
|
56
56
|
}
|
|
57
|
-
function
|
|
57
|
+
function Ue(t, e, o) {
|
|
58
58
|
let n = null;
|
|
59
59
|
return () => {
|
|
60
60
|
n !== null && clearTimeout(n), n = setTimeout(() => {
|
|
61
61
|
n = null;
|
|
62
|
-
const i =
|
|
62
|
+
const i = xe(t, e());
|
|
63
63
|
o(i);
|
|
64
64
|
}, 100);
|
|
65
65
|
};
|
|
66
66
|
}
|
|
67
|
-
function
|
|
68
|
-
const i = t.effectiveConfig?.columns ?? [],
|
|
69
|
-
return !
|
|
67
|
+
function Ae(t, e, o, n) {
|
|
68
|
+
const i = t.effectiveConfig?.columns ?? [], r = i.find((s) => s.field === e);
|
|
69
|
+
return !r || !o && r.lockVisible || !o && i.filter((a) => !a.hidden && a.field !== e).length === 0 || !!r.hidden === !o ? !1 : (r.hidden = !o, n.emit("column-visibility", {
|
|
70
70
|
field: e,
|
|
71
71
|
visible: o,
|
|
72
72
|
visibleColumns: i.filter((s) => !s.hidden).map((s) => s.field)
|
|
73
73
|
}), n.clearRowPool(), n.setup(), n.requestStateChange(), !0);
|
|
74
74
|
}
|
|
75
|
-
function
|
|
76
|
-
const i = (t.effectiveConfig?.columns ?? []).find((
|
|
77
|
-
return i ?
|
|
75
|
+
function Xe(t, e, o) {
|
|
76
|
+
const i = (t.effectiveConfig?.columns ?? []).find((r) => r.field === e);
|
|
77
|
+
return i ? Ae(t, e, !!i.hidden, o) : !1;
|
|
78
78
|
}
|
|
79
|
-
function
|
|
79
|
+
function Ye(t, e) {
|
|
80
80
|
const n = (t.effectiveConfig?.columns ?? []).find((i) => i.field === e);
|
|
81
81
|
return n ? !n.hidden : !1;
|
|
82
82
|
}
|
|
83
|
-
function
|
|
83
|
+
function je(t, e) {
|
|
84
84
|
const o = t.effectiveConfig?.columns ?? [];
|
|
85
85
|
o.some((n) => n.hidden) && (o.forEach((n) => n.hidden = !1), e.emit("column-visibility", {
|
|
86
86
|
visibleColumns: o.map((n) => n.field)
|
|
87
87
|
}), e.clearRowPool(), e.setup(), e.requestStateChange());
|
|
88
88
|
}
|
|
89
|
-
function
|
|
89
|
+
function Ke(t) {
|
|
90
90
|
return (t.effectiveConfig?.columns ?? []).map((o) => ({
|
|
91
91
|
field: o.field,
|
|
92
92
|
header: o.header || o.field,
|
|
@@ -94,24 +94,24 @@ function je(t) {
|
|
|
94
94
|
lockVisible: o.lockVisible
|
|
95
95
|
}));
|
|
96
96
|
}
|
|
97
|
-
function
|
|
97
|
+
function Ze(t) {
|
|
98
98
|
return t._columns.map((e) => e.field);
|
|
99
99
|
}
|
|
100
|
-
function
|
|
100
|
+
function Je(t, e, o) {
|
|
101
101
|
if (!e.length) return;
|
|
102
|
-
const n = new Map(t._columns.map((
|
|
103
|
-
for (const
|
|
104
|
-
const
|
|
105
|
-
|
|
102
|
+
const n = new Map(t._columns.map((r) => [r.field, r])), i = [];
|
|
103
|
+
for (const r of e) {
|
|
104
|
+
const l = n.get(r);
|
|
105
|
+
l && (i.push(l), n.delete(r));
|
|
106
106
|
}
|
|
107
|
-
for (const
|
|
108
|
-
i.push(
|
|
107
|
+
for (const r of n.values())
|
|
108
|
+
i.push(r);
|
|
109
109
|
t._columns = i, o.renderHeader(), o.updateTemplate(), o.refreshVirtualWindow();
|
|
110
110
|
}
|
|
111
|
-
const
|
|
111
|
+
const j = {
|
|
112
112
|
STRETCH: "stretch",
|
|
113
113
|
FIXED: "fixed"
|
|
114
|
-
},
|
|
114
|
+
}, Qe = {
|
|
115
115
|
mode: "reduced-motion",
|
|
116
116
|
duration: 200,
|
|
117
117
|
easing: "ease-out"
|
|
@@ -125,25 +125,29 @@ const X = {
|
|
|
125
125
|
dragHandle: "⋮⋮",
|
|
126
126
|
toolPanel: "☰"
|
|
127
127
|
};
|
|
128
|
-
function
|
|
128
|
+
function et(t) {
|
|
129
129
|
return t == null ? "string" : typeof t == "number" ? "number" : typeof t == "boolean" ? "boolean" : t instanceof Date || typeof t == "string" && /\d{4}-\d{2}-\d{2}/.test(t) && !isNaN(Date.parse(t)) ? "date" : "string";
|
|
130
130
|
}
|
|
131
131
|
function Le(t, e) {
|
|
132
132
|
if (e && e.length) {
|
|
133
|
-
const
|
|
134
|
-
return e.forEach((
|
|
135
|
-
|
|
136
|
-
}), { columns: e, typeMap:
|
|
137
|
-
}
|
|
138
|
-
const o = t[0] || {}, n = Object.keys(o).map((
|
|
139
|
-
const
|
|
140
|
-
return { field:
|
|
133
|
+
const r = {};
|
|
134
|
+
return e.forEach((l) => {
|
|
135
|
+
l.type && (r[l.field] = l.type);
|
|
136
|
+
}), { columns: e, typeMap: r };
|
|
137
|
+
}
|
|
138
|
+
const o = t[0] || {}, n = Object.keys(o).map((r) => {
|
|
139
|
+
const l = o[r], s = et(l);
|
|
140
|
+
return { field: r, header: r.charAt(0).toUpperCase() + r.slice(1), type: s };
|
|
141
141
|
}), i = {};
|
|
142
|
-
return n.forEach((
|
|
143
|
-
i[
|
|
142
|
+
return n.forEach((r) => {
|
|
143
|
+
i[r.field] = r.type || "string";
|
|
144
144
|
}), { columns: n, typeMap: i };
|
|
145
145
|
}
|
|
146
|
-
const
|
|
146
|
+
const tt = /{{\s*([^}]+)\s*}}/g, L = "__DG_EMPTY__", ot = /^[\w$. '?+\-*/%:()!<>=,&|]+$/, nt = /__(proto|defineGetter|defineSetter)|constructor|window|globalThis|global|process|Function|import|eval|Reflect|Proxy|Error|arguments|document|location|cookie|localStorage|sessionStorage|indexedDB|fetch|XMLHttpRequest|WebSocket|Worker|SharedWorker|ServiceWorker|opener|parent|top|frames|self|this\b/;
|
|
147
|
+
function it(t) {
|
|
148
|
+
return !t || typeof t != "string" ? "" : t.replace(/&/g, "&").replace(/</g, "<").replace(/>/g, ">").replace(/"/g, """).replace(/'/g, "'");
|
|
149
|
+
}
|
|
150
|
+
const rt = /* @__PURE__ */ new Set([
|
|
147
151
|
"script",
|
|
148
152
|
"iframe",
|
|
149
153
|
"object",
|
|
@@ -168,18 +172,18 @@ const et = /{{\s*([^}]+)\s*}}/g, A = "__DG_EMPTY__", tt = /^[\w$. '?+\-*/%:()!<>
|
|
|
168
172
|
"plaintext",
|
|
169
173
|
"xmp",
|
|
170
174
|
"listing"
|
|
171
|
-
]), ue = /^on\w+$/i,
|
|
172
|
-
function
|
|
175
|
+
]), ue = /^on\w+$/i, lt = /* @__PURE__ */ new Set(["href", "src", "action", "formaction", "data", "srcdoc", "xlink:href", "poster", "srcset"]), st = /^\s*(javascript|vbscript|data|blob):/i;
|
|
176
|
+
function Q(t) {
|
|
173
177
|
if (!t || typeof t != "string") return "";
|
|
174
178
|
if (t.indexOf("<") === -1) return t;
|
|
175
179
|
const e = document.createElement("template");
|
|
176
|
-
return e.innerHTML = t,
|
|
180
|
+
return e.innerHTML = t, at(e.content), e.innerHTML;
|
|
177
181
|
}
|
|
178
|
-
function
|
|
182
|
+
function at(t) {
|
|
179
183
|
const e = [], o = t.querySelectorAll("*");
|
|
180
184
|
for (const n of o) {
|
|
181
185
|
const i = n.tagName.toLowerCase();
|
|
182
|
-
if (
|
|
186
|
+
if (rt.has(i)) {
|
|
183
187
|
e.push(n);
|
|
184
188
|
continue;
|
|
185
189
|
}
|
|
@@ -189,55 +193,55 @@ function rt(t) {
|
|
|
189
193
|
e.push(n);
|
|
190
194
|
continue;
|
|
191
195
|
}
|
|
192
|
-
const
|
|
193
|
-
for (const
|
|
194
|
-
const s =
|
|
196
|
+
const r = [];
|
|
197
|
+
for (const l of n.attributes) {
|
|
198
|
+
const s = l.name.toLowerCase();
|
|
195
199
|
if (ue.test(s)) {
|
|
196
|
-
|
|
200
|
+
r.push(l.name);
|
|
197
201
|
continue;
|
|
198
202
|
}
|
|
199
|
-
if (
|
|
200
|
-
|
|
203
|
+
if (lt.has(s) && st.test(l.value)) {
|
|
204
|
+
r.push(l.name);
|
|
201
205
|
continue;
|
|
202
206
|
}
|
|
203
|
-
if (s === "style" && /expression\s*\(|javascript:|behavior\s*:/i.test(
|
|
204
|
-
|
|
207
|
+
if (s === "style" && /expression\s*\(|javascript:|behavior\s*:/i.test(l.value)) {
|
|
208
|
+
r.push(l.name);
|
|
205
209
|
continue;
|
|
206
210
|
}
|
|
207
211
|
}
|
|
208
|
-
|
|
212
|
+
r.forEach((l) => n.removeAttribute(l));
|
|
209
213
|
}
|
|
210
214
|
e.forEach((n) => n.remove());
|
|
211
215
|
}
|
|
212
216
|
function Pe(t, e) {
|
|
213
217
|
if (!t || t.indexOf("{{") === -1) return t;
|
|
214
|
-
const o = [], n = t.replace(
|
|
215
|
-
const c =
|
|
218
|
+
const o = [], n = t.replace(tt, (s, a) => {
|
|
219
|
+
const c = ct(a, e);
|
|
216
220
|
return o.push({ expr: a.trim(), result: c }), c;
|
|
217
|
-
}), i =
|
|
218
|
-
return /Reflect\.|\bProxy\b|ownKeys\(/.test(t) ||
|
|
221
|
+
}), i = dt(n), r = o.length && o.every((s) => s.result === "" || s.result === L);
|
|
222
|
+
return /Reflect\.|\bProxy\b|ownKeys\(/.test(t) || r ? "" : i;
|
|
219
223
|
}
|
|
220
|
-
function
|
|
221
|
-
if (t = (t || "").trim(), !t || /\b(Reflect|Proxy|ownKeys)\b/.test(t)) return
|
|
222
|
-
if (t === "value") return e.value == null ?
|
|
224
|
+
function ct(t, e) {
|
|
225
|
+
if (t = (t || "").trim(), !t || /\b(Reflect|Proxy|ownKeys)\b/.test(t)) return L;
|
|
226
|
+
if (t === "value") return e.value == null ? L : String(e.value);
|
|
223
227
|
if (t.startsWith("row.") && !/[()?]/.test(t) && !t.includes(":")) {
|
|
224
228
|
const n = t.slice(4), i = e.row ? e.row[n] : void 0;
|
|
225
|
-
return i == null ?
|
|
229
|
+
return i == null ? L : String(i);
|
|
226
230
|
}
|
|
227
|
-
if (t.length > 80 || !
|
|
231
|
+
if (t.length > 80 || !ot.test(t) || nt.test(t)) return L;
|
|
228
232
|
const o = t.match(/\./g);
|
|
229
|
-
if (o && o.length > 1) return
|
|
233
|
+
if (o && o.length > 1) return L;
|
|
230
234
|
try {
|
|
231
|
-
const i = new Function("value", "row", `return (${t});`)(e.value, e.row),
|
|
232
|
-
return /Reflect|Proxy|ownKeys/.test(
|
|
235
|
+
const i = new Function("value", "row", `return (${t});`)(e.value, e.row), r = i == null ? "" : String(i);
|
|
236
|
+
return /Reflect|Proxy|ownKeys/.test(r) ? L : r || L;
|
|
233
237
|
} catch {
|
|
234
|
-
return
|
|
238
|
+
return L;
|
|
235
239
|
}
|
|
236
240
|
}
|
|
237
|
-
function
|
|
238
|
-
return t && t.replace(new RegExp(
|
|
241
|
+
function dt(t) {
|
|
242
|
+
return t && t.replace(new RegExp(L, "g"), "").replace(/Reflect\.[^<>{}\s]+/g, "").replace(/\bProxy\b/g, "").replace(/ownKeys\([^)]*\)/g, "");
|
|
239
243
|
}
|
|
240
|
-
function
|
|
244
|
+
function ut(t) {
|
|
241
245
|
if (/Reflect|Proxy|ownKeys/.test(t.textContent || "")) {
|
|
242
246
|
if (Array.from(t.childNodes).forEach((e) => {
|
|
243
247
|
e.nodeType === Node.TEXT_NODE && /Reflect|Proxy|ownKeys/.test(e.textContent || "") && (e.textContent = "");
|
|
@@ -253,51 +257,64 @@ function he(t) {
|
|
|
253
257
|
const e = /Reflect\.|\bProxy\b|ownKeys\(/.test(t), o = (n) => e ? "" : Pe(t, n);
|
|
254
258
|
return o.__blocked = e, o;
|
|
255
259
|
}
|
|
256
|
-
function
|
|
260
|
+
function ht(t) {
|
|
257
261
|
return Array.from(t.querySelectorAll("tbw-grid-column")).map((o) => {
|
|
258
262
|
const n = o.getAttribute("field") || "";
|
|
259
263
|
if (!n) return null;
|
|
260
|
-
const i = o.getAttribute("type") || void 0,
|
|
264
|
+
const i = o.getAttribute("type") || void 0, l = i && (/* @__PURE__ */ new Set(["number", "string", "date", "boolean", "select", "typeahead"])).has(i) ? i : void 0, s = o.getAttribute("header") || void 0, a = o.hasAttribute("sortable"), c = o.hasAttribute("editable"), f = { field: n, type: l, header: s, sortable: a, editable: c }, d = o.getAttribute("width");
|
|
261
265
|
if (d) {
|
|
262
|
-
const
|
|
263
|
-
!isNaN(
|
|
266
|
+
const C = parseFloat(d);
|
|
267
|
+
!isNaN(C) && /^\d+(\.\d+)?$/.test(d.trim()) ? f.width = C : f.width = d;
|
|
264
268
|
}
|
|
265
269
|
const u = o.getAttribute("minWidth") || o.getAttribute("min-width");
|
|
266
270
|
if (u) {
|
|
267
|
-
const
|
|
268
|
-
isNaN(
|
|
269
|
-
}
|
|
270
|
-
o.hasAttribute("resizable") && (
|
|
271
|
-
const
|
|
272
|
-
|
|
273
|
-
const
|
|
274
|
-
|
|
275
|
-
const [
|
|
276
|
-
return { value:
|
|
271
|
+
const C = parseFloat(u);
|
|
272
|
+
isNaN(C) || (f.minWidth = C);
|
|
273
|
+
}
|
|
274
|
+
o.hasAttribute("resizable") && (f.resizable = !0), o.hasAttribute("sizable") && (f.resizable = !0);
|
|
275
|
+
const w = o.getAttribute("editor"), h = o.getAttribute("renderer");
|
|
276
|
+
w && (f.__editorName = w), h && (f.__rendererName = h);
|
|
277
|
+
const p = o.getAttribute("options");
|
|
278
|
+
p && (f.options = p.split(",").map((C) => {
|
|
279
|
+
const [A, R] = C.includes(":") ? C.split(":") : [C.trim(), C.trim()];
|
|
280
|
+
return { value: A.trim(), label: R?.trim() || A.trim() };
|
|
277
281
|
}));
|
|
278
|
-
const g = o.querySelector("tbw-grid-column-view"),
|
|
279
|
-
|
|
280
|
-
|
|
281
|
-
|
|
282
|
-
|
|
283
|
-
|
|
284
|
-
|
|
285
|
-
|
|
286
|
-
|
|
287
|
-
|
|
282
|
+
const g = o.querySelector("tbw-grid-column-view"), b = o.querySelector("tbw-grid-column-editor"), _ = o.querySelector("tbw-grid-column-header");
|
|
283
|
+
g && (f.__viewTemplate = g), b && (f.__editorTemplate = b), _ && (f.__headerTemplate = _);
|
|
284
|
+
const m = globalThis.DataGridElement?.getAdapters?.() ?? [], E = g ?? o, x = m.find((C) => C.canHandle(E));
|
|
285
|
+
if (x) {
|
|
286
|
+
const C = x.createRenderer(E);
|
|
287
|
+
C && (f.viewRenderer = C);
|
|
288
|
+
}
|
|
289
|
+
const K = b ?? o, S = m.find((C) => C.canHandle(K));
|
|
290
|
+
if (S) {
|
|
291
|
+
const C = S.createEditor(K);
|
|
292
|
+
C && (f.editor = C);
|
|
293
|
+
}
|
|
294
|
+
return f;
|
|
288
295
|
}).filter((o) => !!o);
|
|
289
296
|
}
|
|
290
|
-
function
|
|
297
|
+
function ft(t, e) {
|
|
291
298
|
if ((!t || !t.length) && (!e || !e.length)) return [];
|
|
292
299
|
if (!t || !t.length) return e || [];
|
|
293
300
|
if (!e || !e.length) return t;
|
|
294
301
|
const o = {};
|
|
295
|
-
e.forEach((i) =>
|
|
302
|
+
e.forEach((i) => {
|
|
303
|
+
const r = o[i.field];
|
|
304
|
+
if (r) {
|
|
305
|
+
i.header && !r.header && (r.header = i.header), i.type && !r.type && (r.type = i.type), i.sortable && (r.sortable = !0), i.editable && (r.editable = !0), i.resizable && (r.resizable = !0), i.width != null && r.width == null && (r.width = i.width), i.minWidth != null && r.minWidth == null && (r.minWidth = i.minWidth), i.__viewTemplate && (r.__viewTemplate = i.__viewTemplate), i.__editorTemplate && (r.__editorTemplate = i.__editorTemplate), i.__headerTemplate && (r.__headerTemplate = i.__headerTemplate);
|
|
306
|
+
const l = i.renderer || i.viewRenderer, s = r.renderer || r.viewRenderer;
|
|
307
|
+
l && !s && (r.viewRenderer = l, i.renderer && (r.renderer = l)), i.editor && !r.editor && (r.editor = i.editor);
|
|
308
|
+
} else
|
|
309
|
+
o[i.field] = { ...i };
|
|
310
|
+
});
|
|
296
311
|
const n = t.map((i) => {
|
|
297
|
-
const
|
|
298
|
-
if (!
|
|
299
|
-
const
|
|
300
|
-
|
|
312
|
+
const r = o[i.field];
|
|
313
|
+
if (!r) return i;
|
|
314
|
+
const l = { ...i };
|
|
315
|
+
r.header && !l.header && (l.header = r.header), r.type && !l.type && (l.type = r.type), l.sortable = i.sortable || r.sortable, (i.resizable === !0 || r.resizable === !0) && (l.resizable = !0), l.editable = i.editable || r.editable, r.width != null && l.width == null && (l.width = r.width), r.minWidth != null && l.minWidth == null && (l.minWidth = r.minWidth), r.__viewTemplate && (l.__viewTemplate = r.__viewTemplate), r.__editorTemplate && (l.__editorTemplate = r.__editorTemplate), r.__headerTemplate && (l.__headerTemplate = r.__headerTemplate);
|
|
316
|
+
const s = r.renderer || r.viewRenderer, a = l.renderer || l.viewRenderer;
|
|
317
|
+
return s && !a && (l.viewRenderer = s, r.renderer && (l.renderer = s)), r.editor && !l.editor && (l.editor = r.editor), delete o[i.field], l;
|
|
301
318
|
});
|
|
302
319
|
return Object.keys(o).forEach((i) => n.push(o[i])), n;
|
|
303
320
|
}
|
|
@@ -312,42 +329,42 @@ function fe(t, e) {
|
|
|
312
329
|
function pe(t) {
|
|
313
330
|
t.__lightDomColumnsCache || (t.__originalColumnNodes = Array.from(
|
|
314
331
|
t.querySelectorAll("tbw-grid-column")
|
|
315
|
-
), t.__lightDomColumnsCache = t.__originalColumnNodes.length ?
|
|
316
|
-
const e = t.__lightDomColumnsCache, o =
|
|
332
|
+
), t.__lightDomColumnsCache = t.__originalColumnNodes.length ? ht(t) : []);
|
|
333
|
+
const e = t.__lightDomColumnsCache, o = ft(t._columns, e);
|
|
317
334
|
o.forEach((i) => {
|
|
318
335
|
i.__viewTemplate && !i.__compiledView && (i.__compiledView = he(i.__viewTemplate.innerHTML)), i.__editorTemplate && !i.__compiledEditor && (i.__compiledEditor = he(i.__editorTemplate.innerHTML));
|
|
319
336
|
});
|
|
320
337
|
const { columns: n } = Le(t._rows, o);
|
|
321
338
|
t._columns = n;
|
|
322
339
|
}
|
|
323
|
-
function
|
|
324
|
-
const e = t.effectiveConfig?.fitMode || t.fitMode ||
|
|
325
|
-
if (e !==
|
|
340
|
+
function we(t) {
|
|
341
|
+
const e = t.effectiveConfig?.fitMode || t.fitMode || j.STRETCH;
|
|
342
|
+
if (e !== j.STRETCH && e !== j.FIXED || t.__didInitialAutoSize || !t.isConnected) return;
|
|
326
343
|
const o = t._headerRowEl?.children || [];
|
|
327
344
|
if (!o.length) return;
|
|
328
345
|
let n = !1;
|
|
329
|
-
t._visibleColumns.forEach((i,
|
|
346
|
+
t._visibleColumns.forEach((i, r) => {
|
|
330
347
|
if (i.width) return;
|
|
331
|
-
const
|
|
332
|
-
let s =
|
|
348
|
+
const l = o[r];
|
|
349
|
+
let s = l ? l.scrollWidth : 0;
|
|
333
350
|
for (const a of t._rowPool) {
|
|
334
|
-
const c = a.children[
|
|
351
|
+
const c = a.children[r];
|
|
335
352
|
if (c) {
|
|
336
|
-
const
|
|
337
|
-
|
|
353
|
+
const f = c.scrollWidth;
|
|
354
|
+
f > s && (s = f);
|
|
338
355
|
}
|
|
339
356
|
}
|
|
340
357
|
s > 0 && (i.width = s + 2, i.__autoSized = !0, n = !0);
|
|
341
358
|
}), n && z(t), t.__didInitialAutoSize = !0;
|
|
342
359
|
}
|
|
343
360
|
function z(t) {
|
|
344
|
-
(t.effectiveConfig?.fitMode || t.fitMode ||
|
|
361
|
+
(t.effectiveConfig?.fitMode || t.fitMode || j.STRETCH) === j.STRETCH ? t._gridTemplate = t._visibleColumns.map((o) => {
|
|
345
362
|
if (o.width) return `${o.width}px`;
|
|
346
363
|
const n = o.minWidth;
|
|
347
364
|
return n != null ? `minmax(${n}px, 1fr)` : "1fr";
|
|
348
365
|
}).join(" ").trim() : t._gridTemplate = t._visibleColumns.map((o) => o.width ? `${o.width}px` : "max-content").join(" "), t.style.setProperty("--tbw-column-template", t._gridTemplate);
|
|
349
366
|
}
|
|
350
|
-
function
|
|
367
|
+
function pt(t) {
|
|
351
368
|
switch (t.type) {
|
|
352
369
|
case "number":
|
|
353
370
|
return (e) => {
|
|
@@ -372,21 +389,21 @@ function ht(t) {
|
|
|
372
389
|
case "typeahead":
|
|
373
390
|
return (e) => {
|
|
374
391
|
const o = document.createElement("select");
|
|
375
|
-
e.column.multi && (o.multiple = !0), (typeof e.column.options == "function" ? e.column.options() : e.column.options || []).forEach((
|
|
376
|
-
const
|
|
377
|
-
|
|
392
|
+
e.column.multi && (o.multiple = !0), (typeof e.column.options == "function" ? e.column.options() : e.column.options || []).forEach((r) => {
|
|
393
|
+
const l = document.createElement("option");
|
|
394
|
+
l.value = String(r.value), l.textContent = r.label, (e.column.multi && Array.isArray(e.value) && e.value.includes(r.value) || !e.column.multi && e.value === r.value) && (l.selected = !0), o.appendChild(l);
|
|
378
395
|
});
|
|
379
396
|
const i = () => {
|
|
380
397
|
if (e.column.multi) {
|
|
381
|
-
const
|
|
382
|
-
Array.from(o.selectedOptions).forEach((
|
|
383
|
-
|
|
384
|
-
}), e.commit(
|
|
398
|
+
const r = [];
|
|
399
|
+
Array.from(o.selectedOptions).forEach((l) => {
|
|
400
|
+
r.push(l.value);
|
|
401
|
+
}), e.commit(r);
|
|
385
402
|
} else
|
|
386
403
|
e.commit(o.value);
|
|
387
404
|
};
|
|
388
|
-
return o.addEventListener("change", i), o.addEventListener("blur", i), o.addEventListener("keydown", (
|
|
389
|
-
|
|
405
|
+
return o.addEventListener("change", i), o.addEventListener("blur", i), o.addEventListener("keydown", (r) => {
|
|
406
|
+
r.key === "Escape" && e.cancel();
|
|
390
407
|
}), o;
|
|
391
408
|
};
|
|
392
409
|
default:
|
|
@@ -416,7 +433,7 @@ function Me(t) {
|
|
|
416
433
|
const e = t.getAttribute("data-row");
|
|
417
434
|
return e ? parseInt(e, 10) : -1;
|
|
418
435
|
}
|
|
419
|
-
function
|
|
436
|
+
function X(t) {
|
|
420
437
|
if (!t) return -1;
|
|
421
438
|
const e = t.getAttribute("data-col");
|
|
422
439
|
return e ? parseInt(e, 10) : -1;
|
|
@@ -424,15 +441,15 @@ function U(t) {
|
|
|
424
441
|
function le(t) {
|
|
425
442
|
t && t.querySelectorAll(".cell-focus").forEach((e) => e.classList.remove("cell-focus"));
|
|
426
443
|
}
|
|
427
|
-
function
|
|
444
|
+
function wt(t, e) {
|
|
428
445
|
if (t._dispatchKeyDown?.(e))
|
|
429
446
|
return;
|
|
430
|
-
const o = t._rows.length - 1, n = t._visibleColumns.length - 1, i = t._activeEditRows !== void 0 && t._activeEditRows !== -1,
|
|
431
|
-
if (!
|
|
432
|
-
const d =
|
|
433
|
-
return !!(d === "INPUT" || d === "SELECT" || d === "TEXTAREA" ||
|
|
447
|
+
const o = t._rows.length - 1, n = t._visibleColumns.length - 1, i = t._activeEditRows !== void 0 && t._activeEditRows !== -1, l = t._visibleColumns[t._focusCol]?.type, s = e.composedPath ? e.composedPath() : [], a = s && s.length ? s[0] : e.target, c = (f) => {
|
|
448
|
+
if (!f) return !1;
|
|
449
|
+
const d = f.tagName;
|
|
450
|
+
return !!(d === "INPUT" || d === "SELECT" || d === "TEXTAREA" || f.isContentEditable);
|
|
434
451
|
};
|
|
435
|
-
if (!(c(a) && (e.key === "Home" || e.key === "End")) && !(c(a) && (e.key === "ArrowUp" || e.key === "ArrowDown") && a.tagName === "INPUT" && a.type === "number") && !(c(a) && (e.key === "ArrowLeft" || e.key === "ArrowRight")) && !(c(a) && (e.key === "Enter" || e.key === "Escape")) && !(i && (
|
|
452
|
+
if (!(c(a) && (e.key === "Home" || e.key === "End")) && !(c(a) && (e.key === "ArrowUp" || e.key === "ArrowDown") && a.tagName === "INPUT" && a.type === "number") && !(c(a) && (e.key === "ArrowLeft" || e.key === "ArrowRight")) && !(c(a) && (e.key === "Enter" || e.key === "Escape")) && !(i && (l === "select" || l === "typeahead") && (e.key === "ArrowDown" || e.key === "ArrowUp"))) {
|
|
436
453
|
switch (e.key) {
|
|
437
454
|
case "Tab": {
|
|
438
455
|
e.preventDefault(), !e.shiftKey ? t._focusCol < n ? t._focusCol += 1 : (typeof t.commitActiveRowEdit == "function" && t.commitActiveRowEdit(), t._focusRow < o && (t._focusRow += 1, t._focusCol = 0)) : t._focusCol > 0 ? t._focusCol -= 1 : t._focusRow > 0 && (typeof t.commitActiveRowEdit == "function" && t._activeEditRows === t._focusRow && t.commitActiveRowEdit(), t._focusRow -= 1, t._focusCol = n), k(t);
|
|
@@ -479,19 +496,19 @@ function ft(t, e) {
|
|
|
479
496
|
}
|
|
480
497
|
function k(t, e) {
|
|
481
498
|
if (t._virtualization?.enabled) {
|
|
482
|
-
const { rowHeight:
|
|
483
|
-
if (c &&
|
|
484
|
-
const d = t._focusRow *
|
|
485
|
-
d < c.scrollTop ? c.scrollTop = d : d +
|
|
499
|
+
const { rowHeight: l, container: s, viewportEl: a } = t._virtualization, c = s, f = a?.clientHeight ?? c?.clientHeight ?? 0;
|
|
500
|
+
if (c && f > 0) {
|
|
501
|
+
const d = t._focusRow * l;
|
|
502
|
+
d < c.scrollTop ? c.scrollTop = d : d + l > c.scrollTop + f && (c.scrollTop = d - f + l);
|
|
486
503
|
}
|
|
487
504
|
}
|
|
488
505
|
const o = t._activeEditRows !== void 0 && t._activeEditRows !== -1;
|
|
489
|
-
o || t.refreshVirtualWindow(!1), le(t._bodyEl), Array.from(t._bodyEl.querySelectorAll('[aria-selected="true"]')).forEach((
|
|
490
|
-
|
|
506
|
+
o || t.refreshVirtualWindow(!1), le(t._bodyEl), Array.from(t._bodyEl.querySelectorAll('[aria-selected="true"]')).forEach((l) => {
|
|
507
|
+
l.setAttribute("aria-selected", "false");
|
|
491
508
|
});
|
|
492
|
-
const n = t._focusRow, i = t._virtualization.start ?? 0,
|
|
493
|
-
if (n >= i && n <
|
|
494
|
-
const
|
|
509
|
+
const n = t._focusRow, i = t._virtualization.start ?? 0, r = t._virtualization.end ?? t._rows.length;
|
|
510
|
+
if (n >= i && n < r) {
|
|
511
|
+
const l = t._bodyEl.querySelectorAll(".data-grid-row")[n - i], s = l?.children[t._focusCol];
|
|
495
512
|
if (s) {
|
|
496
513
|
s.classList.add("cell-focus"), s.setAttribute("aria-selected", "true");
|
|
497
514
|
const a = t.shadowRoot?.querySelector(".tbw-scroll-area");
|
|
@@ -501,14 +518,14 @@ function k(t, e) {
|
|
|
501
518
|
else if (e?.forceScrollRight)
|
|
502
519
|
a.scrollLeft = a.scrollWidth - a.clientWidth;
|
|
503
520
|
else {
|
|
504
|
-
const c = t._getHorizontalScrollOffsets?.(
|
|
521
|
+
const c = t._getHorizontalScrollOffsets?.(l ?? void 0, s) ?? { left: 0, right: 0 };
|
|
505
522
|
if (!c.skipScroll) {
|
|
506
|
-
const
|
|
507
|
-
u <
|
|
523
|
+
const f = s.getBoundingClientRect(), d = a.getBoundingClientRect(), u = f.left - d.left + a.scrollLeft, w = u + f.width, h = a.scrollLeft + c.left, p = a.scrollLeft + a.clientWidth - c.right;
|
|
524
|
+
u < h ? a.scrollLeft = u - c.left : w > p && (a.scrollLeft = w - a.clientWidth + c.right);
|
|
508
525
|
}
|
|
509
526
|
}
|
|
510
527
|
if (t._activeEditRows !== void 0 && t._activeEditRows !== -1 && s.classList.contains("editing")) {
|
|
511
|
-
const c = s.querySelector(
|
|
528
|
+
const c = s.querySelector(q);
|
|
512
529
|
if (c && document.activeElement !== c)
|
|
513
530
|
try {
|
|
514
531
|
c.focus({ preventScroll: !0 });
|
|
@@ -528,94 +545,94 @@ const Oe = document.createElement("template");
|
|
|
528
545
|
Oe.innerHTML = '<div class="cell" role="gridcell" part="cell"></div>';
|
|
529
546
|
const ke = document.createElement("template");
|
|
530
547
|
ke.innerHTML = '<div class="data-grid-row" role="row" part="row"></div>';
|
|
531
|
-
function
|
|
548
|
+
function bt() {
|
|
532
549
|
return Oe.content.firstElementChild.cloneNode(!0);
|
|
533
550
|
}
|
|
534
|
-
function
|
|
551
|
+
function gt() {
|
|
535
552
|
return ke.content.firstElementChild.cloneNode(!0);
|
|
536
553
|
}
|
|
537
|
-
const
|
|
538
|
-
function
|
|
539
|
-
t[
|
|
554
|
+
const mt = "__cellDisplayCache", vt = "__cellCacheEpoch";
|
|
555
|
+
function Y(t) {
|
|
556
|
+
t[mt] = void 0, t[vt] = void 0, t.__hasSpecialColumns = void 0;
|
|
540
557
|
}
|
|
541
|
-
function
|
|
542
|
-
const
|
|
558
|
+
function _t(t, e, o, n, i) {
|
|
559
|
+
const r = Math.max(0, o - e), l = t._bodyEl, s = t._visibleColumns, a = s.length;
|
|
543
560
|
let c = t.__cachedHeaderRowCount;
|
|
544
|
-
for (c === void 0 && (c = t.shadowRoot?.querySelector(".header-group-row") ? 2 : 1, t.__cachedHeaderRowCount = c); t._rowPool.length <
|
|
545
|
-
const d =
|
|
546
|
-
d.addEventListener("click", (u) =>
|
|
561
|
+
for (c === void 0 && (c = t.shadowRoot?.querySelector(".header-group-row") ? 2 : 1, t.__cachedHeaderRowCount = c); t._rowPool.length < r; ) {
|
|
562
|
+
const d = gt();
|
|
563
|
+
d.addEventListener("click", (u) => be(t, u, d, !1)), d.addEventListener("dblclick", (u) => be(t, u, d, !0)), t._rowPool.push(d);
|
|
547
564
|
}
|
|
548
|
-
if (t._rowPool.length >
|
|
549
|
-
for (let d =
|
|
565
|
+
if (t._rowPool.length > r) {
|
|
566
|
+
for (let d = r; d < t._rowPool.length; d++) {
|
|
550
567
|
const u = t._rowPool[d];
|
|
551
|
-
u.parentNode ===
|
|
568
|
+
u.parentNode === l && u.remove();
|
|
552
569
|
}
|
|
553
|
-
t._rowPool.length =
|
|
570
|
+
t._rowPool.length = r;
|
|
554
571
|
}
|
|
555
|
-
const
|
|
556
|
-
for (let d = 0; d <
|
|
557
|
-
const u = e + d,
|
|
558
|
-
if (
|
|
559
|
-
|
|
572
|
+
const f = i && t.__hasRenderRowPlugins !== !1;
|
|
573
|
+
for (let d = 0; d < r; d++) {
|
|
574
|
+
const u = e + d, w = t._rows[u], h = t._rowPool[d];
|
|
575
|
+
if (h.setAttribute("aria-rowindex", String(u + c + 1)), f && i(w, h, u)) {
|
|
576
|
+
h.__epoch = n, h.__rowDataRef = w, h.parentNode !== l && l.appendChild(h);
|
|
560
577
|
continue;
|
|
561
578
|
}
|
|
562
|
-
const
|
|
563
|
-
let
|
|
564
|
-
if (
|
|
565
|
-
for (let
|
|
566
|
-
if (s[
|
|
567
|
-
|
|
579
|
+
const p = h.__epoch, g = h.__rowDataRef, b = h.children.length, v = p === n && b === a, m = g !== w;
|
|
580
|
+
let E = !1;
|
|
581
|
+
if (v && m) {
|
|
582
|
+
for (let S = 0; S < a; S++)
|
|
583
|
+
if (s[S].externalView && !h.querySelector(`.cell[data-col="${S}"] [data-external-view]`)) {
|
|
584
|
+
E = !0;
|
|
568
585
|
break;
|
|
569
586
|
}
|
|
570
587
|
}
|
|
571
|
-
if (!
|
|
572
|
-
const
|
|
573
|
-
if (
|
|
574
|
-
|
|
575
|
-
else if (
|
|
576
|
-
|
|
577
|
-
else if (
|
|
578
|
-
const
|
|
579
|
-
for (let
|
|
580
|
-
const
|
|
581
|
-
|
|
588
|
+
if (!v || E) {
|
|
589
|
+
const S = ee(h), C = t._activeEditRows === u;
|
|
590
|
+
if (S && !C)
|
|
591
|
+
h.__isCustomRow && (h.className = "data-grid-row", h.setAttribute("role", "row"), h.__isCustomRow = !1), te(h), $(t, h, w, u), h.__epoch = n, h.__rowDataRef = w;
|
|
592
|
+
else if (S && C)
|
|
593
|
+
ne(t, h, w, u), h.__rowDataRef = w;
|
|
594
|
+
else if (h.__isCustomRow && (h.className = "data-grid-row", h.setAttribute("role", "row"), h.__isCustomRow = !1), $(t, h, w, u), h.__epoch = n, h.__rowDataRef = w, C) {
|
|
595
|
+
const A = h.children;
|
|
596
|
+
for (let R = 0; R < A.length; R++) {
|
|
597
|
+
const P = t._visibleColumns[R];
|
|
598
|
+
P && P.editable && H(t, w, u, P, A[R], !0);
|
|
582
599
|
}
|
|
583
600
|
}
|
|
584
|
-
} else if (
|
|
585
|
-
const
|
|
586
|
-
if (
|
|
587
|
-
|
|
588
|
-
else if (
|
|
589
|
-
const
|
|
590
|
-
for (let
|
|
591
|
-
const
|
|
592
|
-
|
|
601
|
+
} else if (m) {
|
|
602
|
+
const S = ee(h), C = t._activeEditRows === u;
|
|
603
|
+
if (S && !C)
|
|
604
|
+
te(h), $(t, h, w, u), h.__epoch = n, h.__rowDataRef = w;
|
|
605
|
+
else if (ne(t, h, w, u), h.__rowDataRef = w, C && !S) {
|
|
606
|
+
const A = h.children;
|
|
607
|
+
for (let R = 0; R < A.length; R++) {
|
|
608
|
+
const P = t._visibleColumns[R];
|
|
609
|
+
P && P.editable && H(t, w, u, P, A[R], !0);
|
|
593
610
|
}
|
|
594
611
|
}
|
|
595
612
|
} else {
|
|
596
|
-
const
|
|
597
|
-
if (
|
|
598
|
-
|
|
599
|
-
else if (
|
|
600
|
-
const
|
|
601
|
-
for (let
|
|
602
|
-
const
|
|
603
|
-
|
|
613
|
+
const S = ee(h), C = t._activeEditRows === u;
|
|
614
|
+
if (S && !C)
|
|
615
|
+
te(h), $(t, h, w, u), h.__epoch = n, h.__rowDataRef = w;
|
|
616
|
+
else if (ne(t, h, w, u), C && !S) {
|
|
617
|
+
const A = h.children;
|
|
618
|
+
for (let R = 0; R < A.length; R++) {
|
|
619
|
+
const P = t._visibleColumns[R];
|
|
620
|
+
P && P.editable && H(t, w, u, P, A[R], !0);
|
|
604
621
|
}
|
|
605
622
|
}
|
|
606
623
|
}
|
|
607
|
-
const
|
|
608
|
-
|
|
624
|
+
const x = t._changedRowIndices.has(u), K = h.classList.contains("changed");
|
|
625
|
+
x !== K && h.classList.toggle("changed", x), h.parentNode !== l && l.appendChild(h);
|
|
609
626
|
}
|
|
610
627
|
}
|
|
611
|
-
function
|
|
612
|
-
const i = e.children,
|
|
628
|
+
function ne(t, e, o, n) {
|
|
629
|
+
const i = e.children, r = t._visibleColumns, l = r.length, s = i.length, a = l < s ? l : s, c = t._focusRow, f = t._focusCol;
|
|
613
630
|
let d = t.__hasSpecialColumns;
|
|
614
631
|
if (d === void 0) {
|
|
615
632
|
d = !1;
|
|
616
|
-
for (let
|
|
617
|
-
const
|
|
618
|
-
if (
|
|
633
|
+
for (let w = 0; w < l; w++) {
|
|
634
|
+
const h = r[w];
|
|
635
|
+
if (h.__viewTemplate || h.__compiledView || h.renderer || h.viewRenderer || h.externalView || h.format || h.type === "date" || h.type === "boolean") {
|
|
619
636
|
d = !0;
|
|
620
637
|
break;
|
|
621
638
|
}
|
|
@@ -624,70 +641,71 @@ function oe(t, e, o, n) {
|
|
|
624
641
|
}
|
|
625
642
|
const u = String(n);
|
|
626
643
|
if (!d) {
|
|
627
|
-
for (let
|
|
628
|
-
const
|
|
629
|
-
|
|
630
|
-
const g = c === n &&
|
|
631
|
-
g !==
|
|
644
|
+
for (let w = 0; w < a; w++) {
|
|
645
|
+
const h = i[w], p = o[r[w].field];
|
|
646
|
+
h.textContent = p == null ? "" : String(p), h.getAttribute("data-row") !== u && h.setAttribute("data-row", u);
|
|
647
|
+
const g = c === n && f === w, b = h.classList.contains("cell-focus");
|
|
648
|
+
g !== b && (h.classList.toggle("cell-focus", g), h.setAttribute("aria-selected", String(g)));
|
|
632
649
|
}
|
|
633
650
|
return;
|
|
634
651
|
}
|
|
635
|
-
for (let
|
|
636
|
-
if (
|
|
637
|
-
|
|
652
|
+
for (let w = 0; w < a; w++)
|
|
653
|
+
if (r[w].externalView && !i[w].querySelector("[data-external-view]")) {
|
|
654
|
+
$(t, e, o, n);
|
|
638
655
|
return;
|
|
639
656
|
}
|
|
640
|
-
for (let
|
|
641
|
-
const
|
|
642
|
-
|
|
643
|
-
const g = c === n &&
|
|
644
|
-
if (g !==
|
|
645
|
-
|
|
646
|
-
|
|
647
|
-
|
|
657
|
+
for (let w = 0; w < a; w++) {
|
|
658
|
+
const h = r[w], p = i[w];
|
|
659
|
+
p.getAttribute("data-row") !== u && p.setAttribute("data-row", u);
|
|
660
|
+
const g = c === n && f === w, b = p.classList.contains("cell-focus");
|
|
661
|
+
if (g !== b && (p.classList.toggle("cell-focus", g), p.setAttribute("aria-selected", String(g))), p.classList.contains("editing")) continue;
|
|
662
|
+
const _ = h.renderer || h.viewRenderer;
|
|
663
|
+
if (_) {
|
|
664
|
+
const E = o[h.field], x = _({ row: o, value: E, field: h.field, column: h, cellEl: p });
|
|
665
|
+
typeof x == "string" ? p.innerHTML = Q(x) : x ? x.parentElement !== p && (p.innerHTML = "", p.appendChild(x)) : p.textContent = E == null ? "" : String(E);
|
|
648
666
|
continue;
|
|
649
667
|
}
|
|
650
|
-
if (
|
|
668
|
+
if (h.__viewTemplate || h.__compiledView || h.externalView)
|
|
651
669
|
continue;
|
|
652
|
-
const
|
|
670
|
+
const v = o[h.field];
|
|
653
671
|
let m;
|
|
654
|
-
if (
|
|
672
|
+
if (h.format)
|
|
655
673
|
try {
|
|
656
|
-
const
|
|
657
|
-
m =
|
|
674
|
+
const E = h.format(v, o);
|
|
675
|
+
m = E == null ? "" : String(E);
|
|
658
676
|
} catch {
|
|
659
|
-
m =
|
|
677
|
+
m = v == null ? "" : String(v);
|
|
660
678
|
}
|
|
661
|
-
else
|
|
679
|
+
else h.type === "date" ? (m = He(v), p.textContent = m) : h.type === "boolean" ? p.innerHTML = ae(!!v) : (m = v == null ? "" : String(v), p.textContent = m);
|
|
662
680
|
}
|
|
663
681
|
}
|
|
664
|
-
function
|
|
682
|
+
function $(t, e, o, n) {
|
|
665
683
|
e.innerHTML = "";
|
|
666
|
-
const i = t._visibleColumns,
|
|
684
|
+
const i = t._visibleColumns, r = i.length, l = t._focusRow, s = t._focusCol;
|
|
667
685
|
t.effectiveConfig?.editOn || t.editOn;
|
|
668
686
|
const a = t, c = document.createDocumentFragment();
|
|
669
|
-
for (let
|
|
670
|
-
const d = i[
|
|
671
|
-
u.setAttribute("aria-colindex", String(
|
|
672
|
-
let
|
|
673
|
-
const
|
|
674
|
-
if (
|
|
687
|
+
for (let f = 0; f < r; f++) {
|
|
688
|
+
const d = i[f], u = bt();
|
|
689
|
+
u.setAttribute("aria-colindex", String(f + 1)), u.setAttribute("data-col", String(f)), u.setAttribute("data-row", String(n)), u.setAttribute("data-field", d.field), d.type, d.type && u.setAttribute("data-type", d.type);
|
|
690
|
+
let w = o[d.field];
|
|
691
|
+
const h = d.format;
|
|
692
|
+
if (h)
|
|
675
693
|
try {
|
|
676
|
-
|
|
694
|
+
w = h(w, o);
|
|
677
695
|
} catch {
|
|
678
696
|
}
|
|
679
|
-
const
|
|
680
|
-
let
|
|
681
|
-
if (
|
|
682
|
-
const
|
|
683
|
-
typeof
|
|
697
|
+
const p = d.__compiledView, g = d.__viewTemplate, b = d.renderer || d.viewRenderer, _ = d.externalView;
|
|
698
|
+
let v = !1;
|
|
699
|
+
if (b) {
|
|
700
|
+
const m = b({ row: o, value: w, field: d.field, column: d, cellEl: u });
|
|
701
|
+
typeof m == "string" ? (u.innerHTML = Q(m), v = !0) : m ? m.parentElement !== u && (u.textContent = "", u.appendChild(m)) : u.textContent = w == null ? "" : String(w);
|
|
684
702
|
} else if (_) {
|
|
685
|
-
const
|
|
686
|
-
|
|
687
|
-
const
|
|
688
|
-
if (
|
|
703
|
+
const m = _, E = document.createElement("div");
|
|
704
|
+
E.setAttribute("data-external-view", ""), E.setAttribute("data-field", d.field), u.appendChild(E);
|
|
705
|
+
const x = { row: o, value: w, field: d.field, column: d };
|
|
706
|
+
if (m.mount)
|
|
689
707
|
try {
|
|
690
|
-
|
|
708
|
+
m.mount({ placeholder: E, context: x, spec: m });
|
|
691
709
|
} catch {
|
|
692
710
|
}
|
|
693
711
|
else
|
|
@@ -697,88 +715,88 @@ function I(t, e, o, n) {
|
|
|
697
715
|
new CustomEvent("mount-external-view", {
|
|
698
716
|
bubbles: !0,
|
|
699
717
|
composed: !0,
|
|
700
|
-
detail: { placeholder:
|
|
718
|
+
detail: { placeholder: E, spec: m, context: x }
|
|
701
719
|
})
|
|
702
720
|
);
|
|
703
721
|
} catch {
|
|
704
722
|
}
|
|
705
723
|
});
|
|
706
|
-
|
|
707
|
-
} else if (
|
|
708
|
-
const
|
|
709
|
-
u.innerHTML =
|
|
724
|
+
E.setAttribute("data-mounted", "");
|
|
725
|
+
} else if (p) {
|
|
726
|
+
const m = p({ row: o, value: w, field: d.field, column: d }), E = p.__blocked;
|
|
727
|
+
u.innerHTML = E ? "" : Q(m), v = !0, E && (u.textContent = "", u.setAttribute("data-blocked-template", ""));
|
|
710
728
|
} else if (g) {
|
|
711
|
-
const
|
|
712
|
-
/Reflect\.|\bProxy\b|ownKeys\(/.test(
|
|
729
|
+
const m = g.innerHTML;
|
|
730
|
+
/Reflect\.|\bProxy\b|ownKeys\(/.test(m) ? (u.textContent = "", u.setAttribute("data-blocked-template", "")) : (u.innerHTML = Q(Pe(m, { row: o, value: w })), v = !0);
|
|
713
731
|
} else
|
|
714
|
-
d.type === "date" ? u.textContent = He(
|
|
715
|
-
if (
|
|
716
|
-
|
|
717
|
-
const
|
|
718
|
-
/Proxy|Reflect\.ownKeys/.test(
|
|
732
|
+
d.type === "date" ? u.textContent = He(w) : d.type === "boolean" ? u.innerHTML = ae(!!w) : u.textContent = w == null ? "" : String(w);
|
|
733
|
+
if (v) {
|
|
734
|
+
ut(u);
|
|
735
|
+
const m = u.textContent || "";
|
|
736
|
+
/Proxy|Reflect\.ownKeys/.test(m) && (u.textContent = m.replace(/Proxy|Reflect\.ownKeys/g, "").trim(), /Proxy|Reflect\.ownKeys/.test(u.textContent || "") && (u.textContent = ""));
|
|
719
737
|
}
|
|
720
|
-
u.hasAttribute("data-blocked-template") && (u.textContent || "").trim().length && (u.textContent = ""), d.editable ? u.tabIndex = 0 : d.type === "boolean" && (u.hasAttribute("tabindex") || (u.tabIndex = 0)),
|
|
738
|
+
u.hasAttribute("data-blocked-template") && (u.textContent || "").trim().length && (u.textContent = ""), d.editable ? u.tabIndex = 0 : d.type === "boolean" && (u.hasAttribute("tabindex") || (u.tabIndex = 0)), l === n && s === f ? (u.classList.add("cell-focus"), u.setAttribute("aria-selected", "true")) : u.setAttribute("aria-selected", "false"), c.appendChild(u);
|
|
721
739
|
}
|
|
722
740
|
e.appendChild(c);
|
|
723
741
|
}
|
|
724
|
-
function
|
|
742
|
+
function be(t, e, o, n) {
|
|
725
743
|
if (e.target?.closest(".resize-handle")) return;
|
|
726
|
-
const i = o.querySelector(".cell[data-row]"),
|
|
727
|
-
if (
|
|
728
|
-
const
|
|
729
|
-
if (!
|
|
744
|
+
const i = o.querySelector(".cell[data-row]"), r = Me(i);
|
|
745
|
+
if (r < 0) return;
|
|
746
|
+
const l = t._rows[r];
|
|
747
|
+
if (!l || t._dispatchRowClick?.(e, r, l, o))
|
|
730
748
|
return;
|
|
731
749
|
const s = e.target?.closest(".cell[data-col]");
|
|
732
750
|
if (s) {
|
|
733
751
|
const d = Number(s.getAttribute("data-col"));
|
|
734
752
|
if (!isNaN(d)) {
|
|
735
|
-
if (t._dispatchCellClick?.(e,
|
|
753
|
+
if (t._dispatchCellClick?.(e, r, d, s))
|
|
736
754
|
return;
|
|
737
|
-
const u = t._focusRow !==
|
|
738
|
-
if (t._focusRow =
|
|
755
|
+
const u = t._focusRow !== r || t._focusCol !== d;
|
|
756
|
+
if (t._focusRow = r, t._focusCol = d, s.classList.contains("editing")) {
|
|
739
757
|
u && (le(t.shadowRoot ?? t._bodyEl), s.classList.add("cell-focus"));
|
|
740
758
|
return;
|
|
741
759
|
}
|
|
742
760
|
k(t);
|
|
743
761
|
}
|
|
744
762
|
}
|
|
745
|
-
if (t._activeEditRows ===
|
|
763
|
+
if (t._activeEditRows === r) {
|
|
746
764
|
s && (le(t.shadowRoot ?? t._bodyEl), s.classList.add("cell-focus"), queueMicrotask(() => {
|
|
747
765
|
const d = Number(s.getAttribute("data-col")), u = t._visibleColumns[d];
|
|
748
766
|
if (u && u.editable && s.classList.contains("editing")) {
|
|
749
|
-
const
|
|
767
|
+
const w = s.querySelector(q);
|
|
750
768
|
try {
|
|
751
|
-
|
|
769
|
+
w?.focus({ preventScroll: !0 });
|
|
752
770
|
} catch {
|
|
753
771
|
}
|
|
754
772
|
}
|
|
755
773
|
}));
|
|
756
774
|
return;
|
|
757
775
|
}
|
|
758
|
-
if (
|
|
776
|
+
if (ee(o)) {
|
|
759
777
|
if (!n) return;
|
|
760
778
|
const d = o.children;
|
|
761
779
|
for (let u = 0; u < d.length; u++)
|
|
762
780
|
d[u].classList.remove("editing");
|
|
763
|
-
|
|
781
|
+
te(o);
|
|
764
782
|
}
|
|
765
783
|
const c = t.effectiveConfig?.editOn ?? t.editOn ?? "dblClick";
|
|
766
784
|
if (c === !1) return;
|
|
767
|
-
const
|
|
768
|
-
if (
|
|
785
|
+
const f = c === "dblclick" ? "dblClick" : c;
|
|
786
|
+
if (f === "click" || f === "dblClick" && n) {
|
|
769
787
|
if (typeof t.beginBulkEdit == "function") {
|
|
770
|
-
t.beginBulkEdit(
|
|
788
|
+
t.beginBulkEdit(r);
|
|
771
789
|
return;
|
|
772
790
|
}
|
|
773
|
-
|
|
791
|
+
G(t, r, l);
|
|
774
792
|
} else return;
|
|
775
793
|
Array.from(o.children).forEach((d, u) => {
|
|
776
|
-
const
|
|
777
|
-
|
|
794
|
+
const w = t._visibleColumns[u];
|
|
795
|
+
w && w.editable && H(t, l, r, w, d, !0);
|
|
778
796
|
}), s && queueMicrotask(() => {
|
|
779
797
|
const d = o.querySelector(`.cell[data-col="${t._focusCol}"]`);
|
|
780
798
|
if (d?.classList.contains("editing")) {
|
|
781
|
-
const u = d.querySelector(
|
|
799
|
+
const u = d.querySelector(q);
|
|
782
800
|
try {
|
|
783
801
|
u?.focus({ preventScroll: !0 });
|
|
784
802
|
} catch {
|
|
@@ -786,60 +804,75 @@ function we(t, e, o, n) {
|
|
|
786
804
|
}
|
|
787
805
|
});
|
|
788
806
|
}
|
|
789
|
-
const
|
|
790
|
-
function
|
|
807
|
+
const q = 'input,select,textarea,[contenteditable="true"],[contenteditable=""],[tabindex]:not([tabindex="-1"])';
|
|
808
|
+
function se(t) {
|
|
791
809
|
return !(t === "__proto__" || t === "constructor" || t === "prototype");
|
|
792
810
|
}
|
|
793
|
-
function
|
|
811
|
+
function ee(t) {
|
|
794
812
|
return (t.__editingCellCount ?? 0) > 0;
|
|
795
813
|
}
|
|
796
|
-
function
|
|
814
|
+
function Ct(t) {
|
|
797
815
|
const e = (t.__editingCellCount ?? 0) + 1;
|
|
798
816
|
t.__editingCellCount = e, t.setAttribute("data-has-editing", "");
|
|
799
817
|
}
|
|
800
|
-
function
|
|
818
|
+
function te(t) {
|
|
801
819
|
t.__editingCellCount = 0, t.removeAttribute("data-has-editing");
|
|
802
820
|
}
|
|
803
|
-
function
|
|
821
|
+
function Et(t, e, o, n, i) {
|
|
822
|
+
const r = t.querySelector("input,textarea,select");
|
|
823
|
+
if (!r) return;
|
|
824
|
+
const l = () => {
|
|
825
|
+
if (r instanceof HTMLInputElement) {
|
|
826
|
+
if (r.type === "checkbox") return r.checked;
|
|
827
|
+
if (r.type === "number") return r.value === "" ? null : Number(r.value);
|
|
828
|
+
if (r.type === "date") return r.valueAsDate;
|
|
829
|
+
}
|
|
830
|
+
return e.type === "number" && r.value !== "" ? Number(r.value) : r.value;
|
|
831
|
+
};
|
|
832
|
+
r.addEventListener("blur", () => {
|
|
833
|
+
o(l());
|
|
834
|
+
}), r instanceof HTMLInputElement && r.type === "checkbox" ? r.addEventListener("change", () => o(r.checked)) : r instanceof HTMLSelectElement && r.addEventListener("change", () => o(l()));
|
|
835
|
+
}
|
|
836
|
+
function G(t, e, o) {
|
|
804
837
|
t._activeEditRows !== e && (t._rowEditSnapshots.set(e, { ...o }), t._activeEditRows = e);
|
|
805
838
|
}
|
|
806
839
|
function D(t, e, o) {
|
|
807
840
|
if (t._activeEditRows !== e) return;
|
|
808
|
-
const n = t._rowEditSnapshots.get(e), i = t._rows[e],
|
|
809
|
-
if (!o &&
|
|
841
|
+
const n = t._rowEditSnapshots.get(e), i = t._rows[e], r = t.findRenderedRowElement?.(e);
|
|
842
|
+
if (!o && r && i && r.querySelectorAll(".cell.editing").forEach((s) => {
|
|
810
843
|
const a = Number(s.getAttribute("data-col"));
|
|
811
844
|
if (isNaN(a)) return;
|
|
812
845
|
const c = t._visibleColumns[a];
|
|
813
846
|
if (!c) return;
|
|
814
|
-
const
|
|
815
|
-
if (
|
|
847
|
+
const f = s.querySelector("input,textarea,select");
|
|
848
|
+
if (f) {
|
|
816
849
|
let d;
|
|
817
|
-
|
|
850
|
+
f instanceof HTMLInputElement && f.type === "checkbox" ? d = f.checked : (d = f.value, c.type === "number" && d !== "" && (d = Number(d))), i[c.field] !== d && ce(t, e, c, d, i);
|
|
818
851
|
}
|
|
819
852
|
}), o && n && i)
|
|
820
|
-
Object.keys(n).forEach((
|
|
853
|
+
Object.keys(n).forEach((l) => i[l] = n[l]), t._changedRowIndices.delete(e), Y(t);
|
|
821
854
|
else if (!o) {
|
|
822
|
-
const
|
|
855
|
+
const l = t._changedRowIndices.has(e);
|
|
823
856
|
t.dispatchEvent(
|
|
824
857
|
new CustomEvent("row-commit", {
|
|
825
858
|
detail: {
|
|
826
859
|
rowIndex: e,
|
|
827
860
|
row: i,
|
|
828
|
-
changed:
|
|
861
|
+
changed: l,
|
|
829
862
|
changedRows: t.changedRows,
|
|
830
863
|
changedRowIndices: t.changedRowIndices
|
|
831
864
|
}
|
|
832
865
|
})
|
|
833
866
|
);
|
|
834
867
|
}
|
|
835
|
-
t._rowEditSnapshots.delete(e), t._activeEditRows = -1,
|
|
868
|
+
t._rowEditSnapshots.delete(e), t._activeEditRows = -1, r && ($(t, r, t._rows[e], e), t._changedRowIndices.has(e) ? r.classList.add("changed") : r.classList.remove("changed")), queueMicrotask(() => {
|
|
836
869
|
try {
|
|
837
|
-
const
|
|
870
|
+
const l = t._focusRow, s = t._focusCol, a = t.findRenderedRowElement?.(l);
|
|
838
871
|
if (a) {
|
|
839
872
|
Array.from(t._bodyEl.querySelectorAll(".cell-focus")).forEach(
|
|
840
|
-
(
|
|
873
|
+
(f) => f.classList.remove("cell-focus")
|
|
841
874
|
);
|
|
842
|
-
const c = a.querySelector(`.cell[data-row="${
|
|
875
|
+
const c = a.querySelector(`.cell[data-row="${l}"][data-col="${s}"]`);
|
|
843
876
|
c && (c.classList.add("cell-focus"), c.setAttribute("aria-selected", "true"), c.hasAttribute("tabindex") || c.setAttribute("tabindex", "-1"), c.focus({ preventScroll: !0 }));
|
|
844
877
|
}
|
|
845
878
|
} catch {
|
|
@@ -847,9 +880,9 @@ function D(t, e, o) {
|
|
|
847
880
|
});
|
|
848
881
|
}
|
|
849
882
|
function ce(t, e, o, n, i) {
|
|
850
|
-
const
|
|
851
|
-
if (!
|
|
852
|
-
i[
|
|
883
|
+
const r = o.field;
|
|
884
|
+
if (!se(r) || i[r] === n) return;
|
|
885
|
+
i[r] = n;
|
|
853
886
|
const s = !t._changedRowIndices.has(e);
|
|
854
887
|
t._changedRowIndices.add(e);
|
|
855
888
|
const a = t.findRenderedRowElement?.(e);
|
|
@@ -857,7 +890,7 @@ function ce(t, e, o, n, i) {
|
|
|
857
890
|
new CustomEvent("cell-commit", {
|
|
858
891
|
detail: {
|
|
859
892
|
row: i,
|
|
860
|
-
field:
|
|
893
|
+
field: r,
|
|
861
894
|
value: n,
|
|
862
895
|
rowIndex: e,
|
|
863
896
|
changedRows: t.changedRows,
|
|
@@ -867,77 +900,77 @@ function ce(t, e, o, n, i) {
|
|
|
867
900
|
})
|
|
868
901
|
);
|
|
869
902
|
}
|
|
870
|
-
function
|
|
871
|
-
if (!n.editable || (t._activeEditRows !== o &&
|
|
872
|
-
const
|
|
903
|
+
function H(t, e, o, n, i, r = !1) {
|
|
904
|
+
if (!n.editable || (t._activeEditRows !== o && G(t, o, e), i.classList.contains("editing"))) return;
|
|
905
|
+
const l = se(n.field) ? e[n.field] : void 0;
|
|
873
906
|
i.classList.add("editing");
|
|
874
907
|
const s = i.parentElement;
|
|
875
|
-
s &&
|
|
908
|
+
s && Ct(s);
|
|
876
909
|
let a = !1;
|
|
877
|
-
const c = (
|
|
878
|
-
a || t._activeEditRows === -1 || ce(t, o, n,
|
|
879
|
-
},
|
|
880
|
-
a = !0, e[n.field] =
|
|
881
|
-
const
|
|
882
|
-
|
|
910
|
+
const c = (p) => {
|
|
911
|
+
a || t._activeEditRows === -1 || ce(t, o, n, p, e);
|
|
912
|
+
}, f = () => {
|
|
913
|
+
a = !0, e[n.field] = se(n.field) ? l : void 0;
|
|
914
|
+
const p = i.querySelector("input,textarea,select");
|
|
915
|
+
p && (typeof HTMLInputElement < "u" && p instanceof HTMLInputElement && p.type === "checkbox" ? p.checked = !!l : "value" in p && (p.value = l ?? ""));
|
|
883
916
|
}, d = document.createElement("div");
|
|
884
|
-
d.style.display = "contents", i.innerHTML = "", i.appendChild(d), d.addEventListener("keydown", (
|
|
885
|
-
|
|
917
|
+
d.style.display = "contents", i.innerHTML = "", i.appendChild(d), d.addEventListener("keydown", (p) => {
|
|
918
|
+
p.key === "Enter" && (p.stopPropagation(), p.preventDefault(), a = !0, D(t, o, !1)), p.key === "Escape" && (p.stopPropagation(), p.preventDefault(), f(), D(t, o, !0));
|
|
886
919
|
});
|
|
887
|
-
const u = n.__editorTemplate,
|
|
888
|
-
if (
|
|
889
|
-
const
|
|
890
|
-
g ?
|
|
891
|
-
_.childNodes.length === 1 && _.firstChild?.nodeType === Node.TEXT_NODE && (_.textContent = _.textContent?.replace(/{{\s*value\s*}}/g,
|
|
892
|
-
const
|
|
893
|
-
return
|
|
920
|
+
const u = n.__editorTemplate, w = n.editor || (u ? "template" : pt(n)), h = l;
|
|
921
|
+
if (w === "template" && u) {
|
|
922
|
+
const p = u.cloneNode(!0), g = n.__compiledEditor;
|
|
923
|
+
g ? p.innerHTML = g({ row: e, value: l, field: n.field, column: n }) : p.querySelectorAll("*").forEach((_) => {
|
|
924
|
+
_.childNodes.length === 1 && _.firstChild?.nodeType === Node.TEXT_NODE && (_.textContent = _.textContent?.replace(/{{\s*value\s*}}/g, l == null ? "" : String(l)).replace(/{{\s*row\.([a-zA-Z0-9_]+)\s*}}/g, (v, m) => {
|
|
925
|
+
const E = e[m];
|
|
926
|
+
return E == null ? "" : String(E);
|
|
894
927
|
}) || "");
|
|
895
928
|
});
|
|
896
|
-
const
|
|
897
|
-
if (
|
|
929
|
+
const b = p.querySelector("input,textarea,select");
|
|
930
|
+
if (b) {
|
|
898
931
|
const _ = typeof HTMLInputElement < "u";
|
|
899
|
-
_ &&
|
|
900
|
-
const
|
|
901
|
-
c(
|
|
902
|
-
}),
|
|
903
|
-
if (
|
|
904
|
-
|
|
905
|
-
const
|
|
906
|
-
c(
|
|
932
|
+
_ && b instanceof HTMLInputElement && b.type === "checkbox" ? b.checked = !!l : "value" in b && (b.value = l ?? ""), b.addEventListener("blur", () => {
|
|
933
|
+
const v = _ && b instanceof HTMLInputElement && b.type === "checkbox" ? b.checked : b.value;
|
|
934
|
+
c(v);
|
|
935
|
+
}), b.addEventListener("keydown", (v) => {
|
|
936
|
+
if (v.key === "Enter") {
|
|
937
|
+
v.stopPropagation(), v.preventDefault(), a = !0;
|
|
938
|
+
const m = _ && b instanceof HTMLInputElement && b.type === "checkbox" ? b.checked : b.value;
|
|
939
|
+
c(m), D(t, o, !1);
|
|
907
940
|
}
|
|
908
|
-
|
|
909
|
-
}), _ &&
|
|
910
|
-
const
|
|
911
|
-
c(
|
|
912
|
-
}),
|
|
913
|
-
}
|
|
914
|
-
d.appendChild(
|
|
915
|
-
} else if (typeof
|
|
916
|
-
const
|
|
917
|
-
|
|
918
|
-
d.querySelector(
|
|
941
|
+
v.key === "Escape" && (v.stopPropagation(), v.preventDefault(), f(), D(t, o, !0));
|
|
942
|
+
}), _ && b instanceof HTMLInputElement && b.type === "checkbox" && b.addEventListener("change", () => {
|
|
943
|
+
const v = b.checked;
|
|
944
|
+
c(v);
|
|
945
|
+
}), r || setTimeout(() => b.focus({ preventScroll: !0 }), 0);
|
|
946
|
+
}
|
|
947
|
+
d.appendChild(p);
|
|
948
|
+
} else if (typeof w == "string") {
|
|
949
|
+
const p = document.createElement(w);
|
|
950
|
+
p.value = h, p.addEventListener("change", () => c(p.value)), d.appendChild(p), r || queueMicrotask(() => {
|
|
951
|
+
d.querySelector(q)?.focus({ preventScroll: !0 });
|
|
919
952
|
});
|
|
920
|
-
} else if (typeof
|
|
921
|
-
const
|
|
922
|
-
typeof
|
|
923
|
-
d.querySelector(
|
|
953
|
+
} else if (typeof w == "function") {
|
|
954
|
+
const p = w({ row: e, value: h, field: n.field, column: n, commit: c, cancel: f });
|
|
955
|
+
typeof p == "string" ? (d.innerHTML = p, Et(d, n, c)) : d.appendChild(p), r || queueMicrotask(() => {
|
|
956
|
+
d.querySelector(q)?.focus({ preventScroll: !0 });
|
|
924
957
|
});
|
|
925
|
-
} else if (
|
|
926
|
-
const
|
|
927
|
-
|
|
928
|
-
const g = { row: e, value:
|
|
929
|
-
if (
|
|
958
|
+
} else if (w && typeof w == "object") {
|
|
959
|
+
const p = document.createElement("div");
|
|
960
|
+
p.setAttribute("data-external-editor", ""), p.setAttribute("data-field", n.field), d.appendChild(p);
|
|
961
|
+
const g = { row: e, value: h, field: n.field, column: n, commit: c, cancel: f };
|
|
962
|
+
if (w.mount)
|
|
930
963
|
try {
|
|
931
|
-
|
|
964
|
+
w.mount({ placeholder: p, context: g, spec: w });
|
|
932
965
|
} catch {
|
|
933
966
|
}
|
|
934
967
|
else
|
|
935
968
|
t.dispatchEvent(
|
|
936
|
-
new CustomEvent("mount-external-editor", { detail: { placeholder:
|
|
969
|
+
new CustomEvent("mount-external-editor", { detail: { placeholder: p, spec: w, context: g } })
|
|
937
970
|
);
|
|
938
971
|
}
|
|
939
972
|
}
|
|
940
|
-
function
|
|
973
|
+
function yt(t, e, o) {
|
|
941
974
|
t.dispatchEvent(new CustomEvent(e, { detail: o, bubbles: !0 }));
|
|
942
975
|
}
|
|
943
976
|
function De(t) {
|
|
@@ -946,27 +979,27 @@ function De(t) {
|
|
|
946
979
|
function ze(t) {
|
|
947
980
|
return Array.from(t._changedRowIndices);
|
|
948
981
|
}
|
|
949
|
-
function
|
|
950
|
-
t._changedRowIndices.clear(), e ||
|
|
982
|
+
function St(t, e) {
|
|
983
|
+
t._changedRowIndices.clear(), e || yt(t, "changed-rows-reset", {
|
|
951
984
|
rows: De(t),
|
|
952
985
|
indices: ze(t)
|
|
953
986
|
}), t._rowPool.forEach((o) => o.classList.remove("changed"));
|
|
954
987
|
}
|
|
955
|
-
function
|
|
956
|
-
if (t.effectiveConfig?.editOn === !1 || !t._columns.some((
|
|
988
|
+
function Rt(t, e, o) {
|
|
989
|
+
if (t.effectiveConfig?.editOn === !1 || !t._columns.some((l) => l.editable)) return;
|
|
957
990
|
const i = t._rows[e];
|
|
958
|
-
|
|
959
|
-
const
|
|
960
|
-
|
|
991
|
+
G(t, e, i);
|
|
992
|
+
const r = o.findRenderedRowElement(e);
|
|
993
|
+
r && (Array.from(r.children).forEach((l, s) => {
|
|
961
994
|
const a = t._visibleColumns[s];
|
|
962
995
|
if (a?.editable) {
|
|
963
|
-
const c =
|
|
964
|
-
c.classList.contains("editing") ||
|
|
996
|
+
const c = l;
|
|
997
|
+
c.classList.contains("editing") || H(t, i, e, a, c, !0);
|
|
965
998
|
}
|
|
966
999
|
}), setTimeout(() => {
|
|
967
|
-
let
|
|
968
|
-
if (
|
|
969
|
-
const s =
|
|
1000
|
+
let l = r.querySelector(`.cell[data-col="${t._focusCol}"]`);
|
|
1001
|
+
if (l?.classList.contains("editing") || (l = r.querySelector(".cell.editing")), l?.classList.contains("editing")) {
|
|
1002
|
+
const s = l.querySelector(q);
|
|
970
1003
|
try {
|
|
971
1004
|
s?.focus({ preventScroll: !0 });
|
|
972
1005
|
} catch {
|
|
@@ -974,48 +1007,48 @@ function Et(t, e, o) {
|
|
|
974
1007
|
}
|
|
975
1008
|
}, 0));
|
|
976
1009
|
}
|
|
977
|
-
function
|
|
1010
|
+
function Tt(t) {
|
|
978
1011
|
t._activeEditRows !== -1 && D(t, t._activeEditRows, !1);
|
|
979
1012
|
}
|
|
980
|
-
function
|
|
1013
|
+
function xt(t) {
|
|
981
1014
|
t._activeEditRows !== -1 && D(t, t._activeEditRows, !0);
|
|
982
1015
|
}
|
|
983
|
-
function
|
|
984
|
-
const o = Me(e), n =
|
|
1016
|
+
function oe(t, e) {
|
|
1017
|
+
const o = Me(e), n = X(e);
|
|
985
1018
|
if (o < 0 || n < 0) return null;
|
|
986
|
-
const i = t._rows[o],
|
|
987
|
-
return !i || !
|
|
1019
|
+
const i = t._rows[o], r = t._visibleColumns[n];
|
|
1020
|
+
return !i || !r ? null : { rowIndex: o, colIndex: n, rowData: i, col: r };
|
|
988
1021
|
}
|
|
989
|
-
function
|
|
1022
|
+
function At(t, e) {
|
|
990
1023
|
if (e.classList.contains("editing")) return;
|
|
991
|
-
const o =
|
|
1024
|
+
const o = oe(t, e);
|
|
992
1025
|
o && (t._focusRow = o.rowIndex, t._focusCol = o.colIndex, k(t));
|
|
993
1026
|
}
|
|
994
|
-
function
|
|
1027
|
+
function Lt(t, e, o) {
|
|
995
1028
|
if (e.classList.contains("editing")) return;
|
|
996
|
-
const n =
|
|
997
|
-
n && (o.stopPropagation(), t._focusRow = n.rowIndex, t._focusCol = n.colIndex,
|
|
1029
|
+
const n = oe(t, e);
|
|
1030
|
+
n && (o.stopPropagation(), t._focusRow = n.rowIndex, t._focusCol = n.colIndex, H(t, n.rowData, n.rowIndex, n.col, e));
|
|
998
1031
|
}
|
|
999
|
-
function
|
|
1032
|
+
function Pt(t, e, o) {
|
|
1000
1033
|
o.stopPropagation();
|
|
1001
|
-
const n =
|
|
1034
|
+
const n = oe(t, e);
|
|
1002
1035
|
if (!n) return;
|
|
1003
1036
|
if (typeof t.beginBulkEdit == "function") {
|
|
1004
1037
|
t._focusRow = n.rowIndex, t._focusCol = n.colIndex, t.beginBulkEdit(n.rowIndex);
|
|
1005
1038
|
return;
|
|
1006
1039
|
}
|
|
1007
|
-
|
|
1040
|
+
G(t, n.rowIndex, n.rowData);
|
|
1008
1041
|
const i = t.findRenderedRowElement?.(n.rowIndex);
|
|
1009
1042
|
if (i) {
|
|
1010
|
-
const
|
|
1011
|
-
for (let
|
|
1012
|
-
const s = t._visibleColumns[
|
|
1013
|
-
s && s.editable &&
|
|
1043
|
+
const r = i.children;
|
|
1044
|
+
for (let l = 0; l < r.length; l++) {
|
|
1045
|
+
const s = t._visibleColumns[l];
|
|
1046
|
+
s && s.editable && H(t, n.rowData, n.rowIndex, s, r[l], !0);
|
|
1014
1047
|
}
|
|
1015
1048
|
queueMicrotask(() => {
|
|
1016
|
-
const
|
|
1017
|
-
if (
|
|
1018
|
-
const s =
|
|
1049
|
+
const l = i.querySelector(`.cell[data-col="${t._focusCol}"]`);
|
|
1050
|
+
if (l?.classList.contains("editing")) {
|
|
1051
|
+
const s = l.querySelector(q);
|
|
1019
1052
|
try {
|
|
1020
1053
|
s?.focus({ preventScroll: !0 });
|
|
1021
1054
|
} catch {
|
|
@@ -1024,12 +1057,12 @@ function Tt(t, e, o) {
|
|
|
1024
1057
|
});
|
|
1025
1058
|
}
|
|
1026
1059
|
}
|
|
1027
|
-
function
|
|
1028
|
-
const n =
|
|
1060
|
+
function Ht(t, e, o) {
|
|
1061
|
+
const n = oe(t, e);
|
|
1029
1062
|
if (!n) return;
|
|
1030
|
-
const { rowIndex: i, colIndex:
|
|
1063
|
+
const { rowIndex: i, colIndex: r, rowData: l, col: s } = n, a = e.classList.contains("editing");
|
|
1031
1064
|
if ((s.type === "select" || s.type === "typeahead") && !a && o.key === "Enter") {
|
|
1032
|
-
o.preventDefault(), t._activeEditRows !== i &&
|
|
1065
|
+
o.preventDefault(), t._activeEditRows !== i && G(t, i, l), H(t, l, i, s, e), setTimeout(() => {
|
|
1033
1066
|
const c = e.querySelector("select");
|
|
1034
1067
|
try {
|
|
1035
1068
|
c?.showPicker?.();
|
|
@@ -1040,85 +1073,85 @@ function xt(t, e, o) {
|
|
|
1040
1073
|
return;
|
|
1041
1074
|
}
|
|
1042
1075
|
if (s.type === "boolean" && o.key === " " && !a) {
|
|
1043
|
-
o.preventDefault(), t._activeEditRows !== i &&
|
|
1044
|
-
const c = !
|
|
1045
|
-
ce(t, i, s, c,
|
|
1076
|
+
o.preventDefault(), t._activeEditRows !== i && G(t, i, l);
|
|
1077
|
+
const c = !l[s.field];
|
|
1078
|
+
ce(t, i, s, c, l), e.innerHTML = ae(!!c);
|
|
1046
1079
|
return;
|
|
1047
1080
|
}
|
|
1048
1081
|
if (o.key === "Enter" && !a) {
|
|
1049
|
-
o.preventDefault(), o.stopPropagation(), t._focusRow = i, t._focusCol =
|
|
1082
|
+
o.preventDefault(), o.stopPropagation(), t._focusRow = i, t._focusCol = r, typeof t.beginBulkEdit == "function" ? t.beginBulkEdit(i) : H(t, l, i, s, e);
|
|
1050
1083
|
return;
|
|
1051
1084
|
}
|
|
1052
1085
|
if (o.key === "F2" && !a) {
|
|
1053
|
-
o.preventDefault(),
|
|
1086
|
+
o.preventDefault(), H(t, l, i, s, e);
|
|
1054
1087
|
return;
|
|
1055
1088
|
}
|
|
1056
1089
|
}
|
|
1057
|
-
function
|
|
1090
|
+
function Mt(t, e, o) {
|
|
1058
1091
|
const n = () => t.effectiveConfig?.editOn || t.editOn;
|
|
1059
1092
|
e.addEventListener(
|
|
1060
1093
|
"mousedown",
|
|
1061
1094
|
(i) => {
|
|
1062
|
-
const
|
|
1063
|
-
if (!
|
|
1064
|
-
const
|
|
1065
|
-
if (
|
|
1066
|
-
const s = t._visibleColumns[
|
|
1067
|
-
s && s.editable &&
|
|
1095
|
+
const r = i.target.closest(".cell[data-col]");
|
|
1096
|
+
if (!r) return;
|
|
1097
|
+
const l = X(r);
|
|
1098
|
+
if (l < 0) return;
|
|
1099
|
+
const s = t._visibleColumns[l];
|
|
1100
|
+
s && s.editable && At(t, r);
|
|
1068
1101
|
},
|
|
1069
1102
|
{ signal: o }
|
|
1070
1103
|
), e.addEventListener(
|
|
1071
1104
|
"click",
|
|
1072
1105
|
(i) => {
|
|
1073
1106
|
if (n() !== "click") return;
|
|
1074
|
-
const
|
|
1075
|
-
if (!
|
|
1076
|
-
const s =
|
|
1107
|
+
const l = i.target.closest(".cell[data-col]");
|
|
1108
|
+
if (!l) return;
|
|
1109
|
+
const s = X(l);
|
|
1077
1110
|
if (s < 0) return;
|
|
1078
1111
|
const a = t._visibleColumns[s];
|
|
1079
|
-
a && a.editable &&
|
|
1112
|
+
a && a.editable && Lt(t, l, i);
|
|
1080
1113
|
},
|
|
1081
1114
|
{ signal: o }
|
|
1082
1115
|
), e.addEventListener(
|
|
1083
1116
|
"dblclick",
|
|
1084
1117
|
(i) => {
|
|
1085
|
-
const
|
|
1086
|
-
if ((
|
|
1118
|
+
const r = n();
|
|
1119
|
+
if ((r === "dblclick" ? "dblClick" : r) === "click" || r === !1) return;
|
|
1087
1120
|
const s = i.target.closest(".cell[data-col]");
|
|
1088
1121
|
if (!s) return;
|
|
1089
|
-
const a =
|
|
1122
|
+
const a = X(s);
|
|
1090
1123
|
if (a < 0) return;
|
|
1091
1124
|
const c = t._visibleColumns[a];
|
|
1092
|
-
c && c.editable &&
|
|
1125
|
+
c && c.editable && Pt(t, s, i);
|
|
1093
1126
|
},
|
|
1094
1127
|
{ signal: o }
|
|
1095
1128
|
), e.addEventListener(
|
|
1096
1129
|
"keydown",
|
|
1097
1130
|
(i) => {
|
|
1098
|
-
const
|
|
1099
|
-
if (!
|
|
1100
|
-
const
|
|
1101
|
-
if (
|
|
1102
|
-
const s = t._visibleColumns[
|
|
1103
|
-
s && s.editable &&
|
|
1131
|
+
const r = i.target.closest(".cell[data-col]");
|
|
1132
|
+
if (!r) return;
|
|
1133
|
+
const l = X(r);
|
|
1134
|
+
if (l < 0) return;
|
|
1135
|
+
const s = t._visibleColumns[l];
|
|
1136
|
+
s && s.editable && Ht(t, r, i);
|
|
1104
1137
|
},
|
|
1105
1138
|
{ signal: o }
|
|
1106
1139
|
);
|
|
1107
1140
|
}
|
|
1108
|
-
function
|
|
1141
|
+
function Ot(t, e) {
|
|
1109
1142
|
return t == null && e == null ? 0 : t == null ? -1 : e == null || t > e ? 1 : t < e ? -1 : 0;
|
|
1110
1143
|
}
|
|
1111
|
-
function
|
|
1112
|
-
const i = o.find((s) => s.field === e.field)?.sortComparator ??
|
|
1113
|
-
return [...t].sort((s, a) => i(s[
|
|
1144
|
+
function kt(t, e, o) {
|
|
1145
|
+
const i = o.find((s) => s.field === e.field)?.sortComparator ?? Ot, { field: r, direction: l } = e;
|
|
1146
|
+
return [...t].sort((s, a) => i(s[r], a[r], s, a) * l);
|
|
1114
1147
|
}
|
|
1115
1148
|
function ge(t, e, o, n) {
|
|
1116
|
-
t._rows = e, t.__rowRenderEpoch++, t._rowPool.forEach((i) => i.__epoch = -1),
|
|
1149
|
+
t._rows = e, t.__rowRenderEpoch++, t._rowPool.forEach((i) => i.__epoch = -1), F(t), t.refreshVirtualWindow(!0), t.dispatchEvent(
|
|
1117
1150
|
new CustomEvent("sort-change", { detail: { field: o.field, direction: n } })
|
|
1118
1151
|
), t.requestStateChange?.();
|
|
1119
1152
|
}
|
|
1120
1153
|
function me(t, e) {
|
|
1121
|
-
!t._sortState || t._sortState.field !== e.field ? (t._sortState || (t.__originalOrder = t._rows.slice()), ve(t, e, 1)) : t._sortState.direction === 1 ? ve(t, e, -1) : (t._sortState = null, t.__rowRenderEpoch++, t._rowPool.forEach((n) => n.__epoch = -1), t._rows = t.__originalOrder.slice(),
|
|
1154
|
+
!t._sortState || t._sortState.field !== e.field ? (t._sortState || (t.__originalOrder = t._rows.slice()), ve(t, e, 1)) : t._sortState.direction === 1 ? ve(t, e, -1) : (t._sortState = null, t.__rowRenderEpoch++, t._rowPool.forEach((n) => n.__epoch = -1), t._rows = t.__originalOrder.slice(), F(t), t._headerRowEl?.querySelectorAll('[role="columnheader"].sortable')?.forEach((n) => {
|
|
1122
1155
|
n.getAttribute("aria-sort") ? (n.getAttribute("aria-sort") === "ascending" || n.getAttribute("aria-sort") === "descending") && (t._sortState || n.setAttribute("aria-sort", "none")) : n.setAttribute("aria-sort", "none");
|
|
1123
1156
|
}), t.refreshVirtualWindow(!0), t.dispatchEvent(
|
|
1124
1157
|
new CustomEvent("sort-change", { detail: { field: e.field, direction: 0 } })
|
|
@@ -1126,48 +1159,48 @@ function me(t, e) {
|
|
|
1126
1159
|
}
|
|
1127
1160
|
function ve(t, e, o) {
|
|
1128
1161
|
t._sortState = { field: e.field, direction: o };
|
|
1129
|
-
const n = { field: e.field, direction: o }, i = t._columns,
|
|
1130
|
-
|
|
1162
|
+
const n = { field: e.field, direction: o }, i = t._columns, l = (t.effectiveConfig?.sortHandler ?? kt)(t._rows, n, i);
|
|
1163
|
+
l && typeof l.then == "function" ? l.then((s) => {
|
|
1131
1164
|
ge(t, s, e, o);
|
|
1132
|
-
}) : ge(t,
|
|
1165
|
+
}) : ge(t, l, e, o);
|
|
1133
1166
|
}
|
|
1134
|
-
function
|
|
1167
|
+
function Dt(t, e) {
|
|
1135
1168
|
typeof e == "string" ? t.textContent = e : e instanceof HTMLElement && (t.innerHTML = "", t.appendChild(e.cloneNode(!0)));
|
|
1136
1169
|
}
|
|
1137
|
-
function
|
|
1170
|
+
function F(t) {
|
|
1138
1171
|
t._headerRowEl = t.findHeaderRow();
|
|
1139
1172
|
const e = t._headerRowEl;
|
|
1140
1173
|
e.innerHTML = "", t._visibleColumns.forEach((o, n) => {
|
|
1141
1174
|
const i = document.createElement("div");
|
|
1142
1175
|
i.className = "cell", fe(i, "header-cell"), i.setAttribute("role", "columnheader"), i.setAttribute("aria-colindex", String(n + 1)), i.setAttribute("data-field", o.field), i.setAttribute("data-col", String(n));
|
|
1143
|
-
const
|
|
1144
|
-
if (
|
|
1176
|
+
const r = o.__headerTemplate;
|
|
1177
|
+
if (r) Array.from(r.childNodes).forEach((l) => i.appendChild(l.cloneNode(!0)));
|
|
1145
1178
|
else {
|
|
1146
|
-
const
|
|
1147
|
-
s.textContent =
|
|
1179
|
+
const l = o.header || o.field, s = document.createElement("span");
|
|
1180
|
+
s.textContent = l, i.appendChild(s);
|
|
1148
1181
|
}
|
|
1149
1182
|
if (o.sortable) {
|
|
1150
1183
|
i.classList.add("sortable"), i.tabIndex = 0;
|
|
1151
|
-
const
|
|
1152
|
-
fe(
|
|
1184
|
+
const l = document.createElement("span");
|
|
1185
|
+
fe(l, "sort-indicator");
|
|
1153
1186
|
const s = t._sortState?.field === o.field ? t._sortState.direction : 0, a = { ...O, ...t.icons }, c = s === 1 ? a.sortAsc : s === -1 ? a.sortDesc : a.sortNone;
|
|
1154
|
-
|
|
1155
|
-
t._resizeController?.isResizing || t._dispatchHeaderClick?.(
|
|
1156
|
-
}), i.addEventListener("keydown", (
|
|
1157
|
-
if (
|
|
1158
|
-
if (
|
|
1187
|
+
Dt(l, c), i.appendChild(l), i.setAttribute("aria-sort", s === 0 ? "none" : s === 1 ? "ascending" : "descending"), i.addEventListener("click", (f) => {
|
|
1188
|
+
t._resizeController?.isResizing || t._dispatchHeaderClick?.(f, n, i) || me(t, o);
|
|
1189
|
+
}), i.addEventListener("keydown", (f) => {
|
|
1190
|
+
if (f.key === "Enter" || f.key === " ") {
|
|
1191
|
+
if (f.preventDefault(), t._dispatchHeaderClick?.(f, n, i)) return;
|
|
1159
1192
|
me(t, o);
|
|
1160
1193
|
}
|
|
1161
1194
|
});
|
|
1162
1195
|
}
|
|
1163
1196
|
if (o.resizable) {
|
|
1164
1197
|
i.style.position = "relative";
|
|
1165
|
-
const
|
|
1166
|
-
|
|
1198
|
+
const l = document.createElement("div");
|
|
1199
|
+
l.className = "resize-handle", l.setAttribute("aria-hidden", "true"), l.addEventListener("mousedown", (s) => {
|
|
1167
1200
|
s.stopPropagation(), s.preventDefault(), t._resizeController.start(s, n, i);
|
|
1168
|
-
}),
|
|
1201
|
+
}), l.addEventListener("dblclick", (s) => {
|
|
1169
1202
|
s.stopPropagation(), s.preventDefault(), t._resizeController.resetColumn(n);
|
|
1170
|
-
}), i.appendChild(
|
|
1203
|
+
}), i.appendChild(l);
|
|
1171
1204
|
}
|
|
1172
1205
|
e.appendChild(i);
|
|
1173
1206
|
}), e.querySelectorAll(".cell.sortable").forEach((o) => {
|
|
@@ -1175,7 +1208,7 @@ function q(t) {
|
|
|
1175
1208
|
}), e.children.length > 0 ? (e.setAttribute("role", "row"), e.setAttribute("aria-rowindex", "1")) : (e.removeAttribute("role"), e.removeAttribute("aria-rowindex"));
|
|
1176
1209
|
}
|
|
1177
1210
|
const Ne = typeof requestIdleCallback == "function";
|
|
1178
|
-
function
|
|
1211
|
+
function zt(t, e) {
|
|
1179
1212
|
return Ne ? requestIdleCallback(t, e) : window.setTimeout(() => {
|
|
1180
1213
|
const o = Date.now();
|
|
1181
1214
|
t({
|
|
@@ -1187,32 +1220,32 @@ function Ot(t, e) {
|
|
|
1187
1220
|
function _e(t) {
|
|
1188
1221
|
Ne ? cancelIdleCallback(t) : clearTimeout(t);
|
|
1189
1222
|
}
|
|
1190
|
-
function
|
|
1223
|
+
function Nt(t) {
|
|
1191
1224
|
let e = null, o = null, n = null, i = null;
|
|
1192
|
-
const
|
|
1225
|
+
const r = (a) => {
|
|
1193
1226
|
if (!e) return;
|
|
1194
|
-
const c = a.clientX - e.startX,
|
|
1195
|
-
d.width =
|
|
1227
|
+
const c = a.clientX - e.startX, f = Math.max(40, e.startWidth + c), d = t._visibleColumns[e.colIndex];
|
|
1228
|
+
d.width = f, d.__userResized = !0, d.__renderedWidth = f, o == null && (o = requestAnimationFrame(() => {
|
|
1196
1229
|
o = null, t.updateTemplate?.();
|
|
1197
1230
|
})), t.dispatchEvent(
|
|
1198
|
-
new CustomEvent("column-resize", { detail: { field: d.field, width:
|
|
1231
|
+
new CustomEvent("column-resize", { detail: { field: d.field, width: f } })
|
|
1199
1232
|
);
|
|
1200
1233
|
};
|
|
1201
|
-
let
|
|
1234
|
+
let l = !1;
|
|
1202
1235
|
const s = () => {
|
|
1203
1236
|
const a = e !== null;
|
|
1204
|
-
a && (
|
|
1205
|
-
|
|
1206
|
-
})), window.removeEventListener("mousemove",
|
|
1237
|
+
a && (l = !0, requestAnimationFrame(() => {
|
|
1238
|
+
l = !1;
|
|
1239
|
+
})), window.removeEventListener("mousemove", r), window.removeEventListener("mouseup", s), n !== null && (document.documentElement.style.cursor = n, n = null), i !== null && (document.body.style.userSelect = i, i = null), e = null, a && t.requestStateChange && t.requestStateChange();
|
|
1207
1240
|
};
|
|
1208
1241
|
return {
|
|
1209
1242
|
get isResizing() {
|
|
1210
|
-
return e !== null ||
|
|
1243
|
+
return e !== null || l;
|
|
1211
1244
|
},
|
|
1212
|
-
start(a, c,
|
|
1245
|
+
start(a, c, f) {
|
|
1213
1246
|
a.preventDefault();
|
|
1214
|
-
const d =
|
|
1215
|
-
e = { startX: a.clientX, colIndex: c, startWidth: d.width }, window.addEventListener("mousemove",
|
|
1247
|
+
const d = f.getBoundingClientRect();
|
|
1248
|
+
e = { startX: a.clientX, colIndex: c, startWidth: d.width }, window.addEventListener("mousemove", r), window.addEventListener("mouseup", s), n === null && (n = document.documentElement.style.cursor), document.documentElement.style.cursor = "e-resize", i === null && (i = document.body.style.userSelect), document.body.style.userSelect = "none";
|
|
1216
1249
|
},
|
|
1217
1250
|
resetColumn(a) {
|
|
1218
1251
|
const c = t._visibleColumns[a];
|
|
@@ -1225,16 +1258,16 @@ function kt(t) {
|
|
|
1225
1258
|
}
|
|
1226
1259
|
};
|
|
1227
1260
|
}
|
|
1228
|
-
function
|
|
1261
|
+
function Z(t, e, o) {
|
|
1229
1262
|
const n = document.createElement(t);
|
|
1230
1263
|
if (e)
|
|
1231
1264
|
for (const i in e) {
|
|
1232
|
-
const
|
|
1233
|
-
|
|
1265
|
+
const r = e[i];
|
|
1266
|
+
r != null && n.setAttribute(i, r);
|
|
1234
1267
|
}
|
|
1235
1268
|
return n;
|
|
1236
1269
|
}
|
|
1237
|
-
function
|
|
1270
|
+
function T(t, e) {
|
|
1238
1271
|
const o = document.createElement("div");
|
|
1239
1272
|
if (t && (o.className = t), e)
|
|
1240
1273
|
for (const n in e) {
|
|
@@ -1243,12 +1276,12 @@ function y(t, e) {
|
|
|
1243
1276
|
}
|
|
1244
1277
|
return o;
|
|
1245
1278
|
}
|
|
1246
|
-
function
|
|
1279
|
+
function Ie(t, e, o) {
|
|
1247
1280
|
const n = document.createElement("button");
|
|
1248
1281
|
if (t && (n.className = t), e)
|
|
1249
1282
|
for (const i in e) {
|
|
1250
|
-
const
|
|
1251
|
-
|
|
1283
|
+
const r = e[i];
|
|
1284
|
+
r != null && n.setAttribute(i, r);
|
|
1252
1285
|
}
|
|
1253
1286
|
return n;
|
|
1254
1287
|
}
|
|
@@ -1256,16 +1289,16 @@ function Ce(t) {
|
|
|
1256
1289
|
const e = document.createElement("slot");
|
|
1257
1290
|
return t && (e.name = t), e;
|
|
1258
1291
|
}
|
|
1259
|
-
const
|
|
1260
|
-
|
|
1292
|
+
const qe = document.createElement("template");
|
|
1293
|
+
qe.innerHTML = `
|
|
1261
1294
|
<div class="tbw-scroll-area">
|
|
1262
1295
|
<div class="rows-body-wrapper">
|
|
1263
1296
|
<div class="rows-body" role="grid">
|
|
1264
|
-
<div class="header">
|
|
1265
|
-
<div class="header-row" part="header-row"></div>
|
|
1297
|
+
<div class="header" role="rowgroup">
|
|
1298
|
+
<div class="header-row" role="row" part="header-row"></div>
|
|
1266
1299
|
</div>
|
|
1267
|
-
<div class="rows-container">
|
|
1268
|
-
<div class="rows-viewport">
|
|
1300
|
+
<div class="rows-container" role="presentation">
|
|
1301
|
+
<div class="rows-viewport" role="presentation">
|
|
1269
1302
|
<div class="rows"></div>
|
|
1270
1303
|
</div>
|
|
1271
1304
|
</div>
|
|
@@ -1276,320 +1309,285 @@ Be.innerHTML = `
|
|
|
1276
1309
|
<div class="faux-vscroll-spacer"></div>
|
|
1277
1310
|
</div>
|
|
1278
1311
|
`;
|
|
1279
|
-
function
|
|
1280
|
-
return
|
|
1312
|
+
function Be() {
|
|
1313
|
+
return qe.content.cloneNode(!0);
|
|
1281
1314
|
}
|
|
1282
1315
|
function Ee(t) {
|
|
1283
|
-
const e = document.createDocumentFragment(), o =
|
|
1316
|
+
const e = document.createDocumentFragment(), o = T(t.hasShell ? "tbw-grid-root has-shell" : "tbw-grid-root");
|
|
1284
1317
|
if (t.hasShell && t.shellHeader && t.shellBody)
|
|
1285
1318
|
o.appendChild(t.shellHeader), o.appendChild(t.shellBody);
|
|
1286
1319
|
else {
|
|
1287
|
-
const n =
|
|
1288
|
-
n.appendChild(
|
|
1320
|
+
const n = T("tbw-grid-content");
|
|
1321
|
+
n.appendChild(Be()), o.appendChild(n);
|
|
1289
1322
|
}
|
|
1290
1323
|
return e.appendChild(o), e;
|
|
1291
1324
|
}
|
|
1292
|
-
function
|
|
1293
|
-
const e =
|
|
1325
|
+
function It(t) {
|
|
1326
|
+
const e = T("tbw-shell-header", { part: "shell-header", role: "presentation" });
|
|
1294
1327
|
if (t.title) {
|
|
1295
|
-
const
|
|
1296
|
-
|
|
1328
|
+
const r = T("tbw-shell-title");
|
|
1329
|
+
r.textContent = t.title, e.appendChild(r);
|
|
1297
1330
|
}
|
|
1298
|
-
const o =
|
|
1331
|
+
const o = T("tbw-shell-content", { part: "shell-content", role: "presentation" });
|
|
1299
1332
|
o.appendChild(Ce("header-content")), e.appendChild(o);
|
|
1300
|
-
const n =
|
|
1301
|
-
for (const
|
|
1302
|
-
|
|
1303
|
-
|
|
1304
|
-
|
|
1305
|
-
|
|
1306
|
-
|
|
1307
|
-
});
|
|
1308
|
-
l.disabled && (r.disabled = !0), r.innerHTML = l.icon, n.appendChild(r);
|
|
1309
|
-
}
|
|
1310
|
-
for (const l of t.apiButtons)
|
|
1311
|
-
if (l.icon && l.action) {
|
|
1312
|
-
const r = ee("tbw-toolbar-btn", {
|
|
1313
|
-
"data-btn": l.id,
|
|
1314
|
-
title: l.label,
|
|
1315
|
-
"aria-label": l.label
|
|
1316
|
-
});
|
|
1317
|
-
l.disabled && (r.disabled = !0), r.innerHTML = l.icon, n.appendChild(r);
|
|
1318
|
-
}
|
|
1319
|
-
for (const l of t.configButtons)
|
|
1320
|
-
(l.hasElement || l.hasRender) && n.appendChild(y("tbw-toolbar-btn-slot", { "data-btn-slot": l.id }));
|
|
1321
|
-
for (const l of t.apiButtons)
|
|
1322
|
-
(l.hasElement || l.hasRender) && n.appendChild(y("tbw-toolbar-btn-slot", { "data-btn-slot": l.id }));
|
|
1323
|
-
if (t.hasLightDomButtons && n.appendChild(Ce("toolbar")), (t.configButtons.length > 0 || t.apiButtons.length > 0 || t.hasLightDomButtons) && t.hasPanels && n.appendChild(y("tbw-toolbar-separator")), t.hasPanels) {
|
|
1324
|
-
const l = ee(t.isPanelOpen ? "tbw-toolbar-btn active" : "tbw-toolbar-btn", {
|
|
1333
|
+
const n = T("tbw-shell-toolbar", { part: "shell-toolbar", role: "presentation" });
|
|
1334
|
+
for (const r of t.configButtons)
|
|
1335
|
+
(r.hasElement || r.hasRender) && n.appendChild(T("tbw-toolbar-btn-slot", { "data-btn-slot": r.id }));
|
|
1336
|
+
for (const r of t.apiButtons)
|
|
1337
|
+
(r.hasElement || r.hasRender) && n.appendChild(T("tbw-toolbar-btn-slot", { "data-btn-slot": r.id }));
|
|
1338
|
+
if (n.appendChild(Ce("toolbar")), (t.configButtons.some((r) => r.hasElement || r.hasRender) || t.apiButtons.some((r) => r.hasElement || r.hasRender)) && t.hasPanels && n.appendChild(T("tbw-toolbar-separator")), t.hasPanels) {
|
|
1339
|
+
const r = Ie(t.isPanelOpen ? "tbw-toolbar-btn active" : "tbw-toolbar-btn", {
|
|
1325
1340
|
"data-panel-toggle": "",
|
|
1326
1341
|
title: "Settings",
|
|
1327
1342
|
"aria-label": "Toggle settings panel",
|
|
1328
1343
|
"aria-pressed": String(t.isPanelOpen),
|
|
1329
1344
|
"aria-controls": "tbw-tool-panel"
|
|
1330
1345
|
});
|
|
1331
|
-
|
|
1346
|
+
r.innerHTML = t.toolPanelIcon, n.appendChild(r);
|
|
1332
1347
|
}
|
|
1333
1348
|
return e.appendChild(n), e;
|
|
1334
1349
|
}
|
|
1335
|
-
function
|
|
1336
|
-
const e =
|
|
1337
|
-
i.appendChild(
|
|
1338
|
-
let
|
|
1350
|
+
function qt(t) {
|
|
1351
|
+
const e = T("tbw-shell-body"), o = t.panels.length > 0, n = t.panels.length === 1, i = T("tbw-grid-content");
|
|
1352
|
+
i.appendChild(Be());
|
|
1353
|
+
let r = null;
|
|
1339
1354
|
if (o) {
|
|
1340
|
-
|
|
1355
|
+
r = Z("aside", {
|
|
1341
1356
|
class: t.isPanelOpen ? "tbw-tool-panel open" : "tbw-tool-panel",
|
|
1342
1357
|
part: "tool-panel",
|
|
1343
1358
|
"data-position": t.position,
|
|
1344
1359
|
role: "presentation",
|
|
1345
1360
|
id: "tbw-tool-panel"
|
|
1346
1361
|
});
|
|
1347
|
-
const
|
|
1348
|
-
|
|
1349
|
-
|
|
1362
|
+
const l = t.position === "left" ? "right" : "left";
|
|
1363
|
+
r.appendChild(
|
|
1364
|
+
T("tbw-tool-panel-resize", {
|
|
1350
1365
|
"data-resize-handle": "",
|
|
1351
|
-
"data-handle-position":
|
|
1366
|
+
"data-handle-position": l,
|
|
1352
1367
|
"aria-hidden": "true"
|
|
1353
1368
|
})
|
|
1354
1369
|
);
|
|
1355
|
-
const s =
|
|
1370
|
+
const s = T("tbw-tool-panel-content", { role: "presentation" }), a = T("tbw-accordion");
|
|
1356
1371
|
for (const c of t.panels) {
|
|
1357
|
-
const
|
|
1372
|
+
const f = `tbw-accordion-section${c.isExpanded ? " expanded" : ""}${n ? " single" : ""}`, d = T(f, { "data-section": c.id }), u = Ie("tbw-accordion-header", {
|
|
1358
1373
|
"aria-expanded": String(c.isExpanded),
|
|
1359
1374
|
"aria-controls": `tbw-section-${c.id}`
|
|
1360
1375
|
});
|
|
1361
1376
|
if (n && u.setAttribute("aria-disabled", "true"), c.icon) {
|
|
1362
|
-
const
|
|
1363
|
-
|
|
1377
|
+
const h = Z("span", { class: "tbw-accordion-icon" });
|
|
1378
|
+
h.innerHTML = c.icon, u.appendChild(h);
|
|
1364
1379
|
}
|
|
1365
|
-
const
|
|
1366
|
-
if (
|
|
1367
|
-
const
|
|
1368
|
-
|
|
1380
|
+
const w = Z("span", { class: "tbw-accordion-title" });
|
|
1381
|
+
if (w.textContent = c.title, u.appendChild(w), !n) {
|
|
1382
|
+
const h = Z("span", { class: "tbw-accordion-chevron" });
|
|
1383
|
+
h.innerHTML = c.isExpanded ? t.collapseIcon : t.expandIcon, u.appendChild(h);
|
|
1369
1384
|
}
|
|
1370
1385
|
d.appendChild(u), d.appendChild(
|
|
1371
|
-
|
|
1386
|
+
T("tbw-accordion-content", {
|
|
1372
1387
|
id: `tbw-section-${c.id}`,
|
|
1373
1388
|
role: "presentation"
|
|
1374
1389
|
})
|
|
1375
1390
|
), a.appendChild(d);
|
|
1376
1391
|
}
|
|
1377
|
-
s.appendChild(a),
|
|
1392
|
+
s.appendChild(a), r.appendChild(s);
|
|
1378
1393
|
}
|
|
1379
|
-
return t.position === "left" &&
|
|
1394
|
+
return t.position === "left" && r ? (e.appendChild(r), e.appendChild(i)) : (e.appendChild(i), r && e.appendChild(r)), e;
|
|
1380
1395
|
}
|
|
1381
|
-
function
|
|
1396
|
+
function N(t) {
|
|
1382
1397
|
return t ? typeof t == "string" ? t : t.outerHTML : "";
|
|
1383
1398
|
}
|
|
1384
|
-
function
|
|
1399
|
+
function Bt() {
|
|
1385
1400
|
return {
|
|
1386
1401
|
toolPanels: /* @__PURE__ */ new Map(),
|
|
1387
1402
|
headerContents: /* @__PURE__ */ new Map(),
|
|
1388
1403
|
toolbarButtons: /* @__PURE__ */ new Map(),
|
|
1389
|
-
|
|
1404
|
+
hasToolButtonsContainer: !1,
|
|
1390
1405
|
lightDomHeaderContent: [],
|
|
1391
1406
|
lightDomTitle: null,
|
|
1392
1407
|
lightDomToolPanelIds: /* @__PURE__ */ new Set(),
|
|
1408
|
+
apiToolPanelIds: /* @__PURE__ */ new Set(),
|
|
1393
1409
|
isPanelOpen: !1,
|
|
1394
1410
|
expandedSections: /* @__PURE__ */ new Set(),
|
|
1395
1411
|
headerContentCleanups: /* @__PURE__ */ new Map(),
|
|
1396
1412
|
panelCleanups: /* @__PURE__ */ new Map(),
|
|
1397
|
-
toolbarButtonCleanups: /* @__PURE__ */ new Map()
|
|
1398
|
-
// Deprecated - kept for backward compatibility
|
|
1399
|
-
activePanel: null,
|
|
1400
|
-
activePanelCleanup: null
|
|
1413
|
+
toolbarButtonCleanups: /* @__PURE__ */ new Map()
|
|
1401
1414
|
};
|
|
1402
1415
|
}
|
|
1403
|
-
function
|
|
1404
|
-
return !!(t?.header?.title || e.lightDomTitle || t?.header?.toolbarButtons?.length || e.toolPanels.size > 0 || e.headerContents.size > 0 || e.toolbarButtons.size > 0 || e.
|
|
1416
|
+
function We(t, e) {
|
|
1417
|
+
return !!(t?.header?.title || e.lightDomTitle || t?.header?.toolbarButtons?.length || e.toolPanels.size > 0 || e.headerContents.size > 0 || e.toolbarButtons.size > 0 || e.lightDomHeaderContent.length > 0 || e.hasToolButtonsContainer);
|
|
1405
1418
|
}
|
|
1406
1419
|
function ye(t, e, o = "☰") {
|
|
1407
|
-
const n = t?.header?.title ?? "", i = !!n,
|
|
1408
|
-
let
|
|
1409
|
-
for (const
|
|
1410
|
-
|
|
1411
|
-
for (const
|
|
1412
|
-
|
|
1413
|
-
|
|
1414
|
-
|
|
1415
|
-
|
|
1416
|
-
(g.element || g.render) && (b += `<div class="tbw-toolbar-btn-slot" data-btn-slot="${g.id}"></div>`);
|
|
1417
|
-
if (c && (b += '<slot name="toolbar"></slot>'), u && (b += '<div class="tbw-toolbar-separator"></div>'), h) {
|
|
1418
|
-
const g = e.isPanelOpen;
|
|
1419
|
-
b += `<button class="tbw-toolbar-btn${g ? " active" : ""}" data-panel-toggle title="Settings" aria-label="Toggle settings panel" aria-pressed="${g}" aria-controls="tbw-tool-panel">${l}</button>`;
|
|
1420
|
+
const n = t?.header?.title ?? e.lightDomTitle ?? "", i = !!n, r = N(o), l = t?.header?.toolbarButtons ?? [], s = l.some((p) => p.element || p.render), a = [...e.toolbarButtons.values()].some((p) => p.element || p.render), c = e.toolPanels.size > 0, d = (s || a) && c, u = [...l].sort((p, g) => (p.order ?? 100) - (g.order ?? 100)), w = [...e.toolbarButtons.values()].sort((p, g) => (p.order ?? 100) - (g.order ?? 100));
|
|
1421
|
+
let h = "";
|
|
1422
|
+
for (const p of u)
|
|
1423
|
+
(p.element || p.render) && (h += `<div class="tbw-toolbar-btn-slot" data-btn-slot="${p.id}"></div>`);
|
|
1424
|
+
for (const p of w)
|
|
1425
|
+
(p.element || p.render) && (h += `<div class="tbw-toolbar-btn-slot" data-btn-slot="${p.id}"></div>`);
|
|
1426
|
+
if (h += '<slot name="toolbar"></slot>', d && (h += '<div class="tbw-toolbar-separator"></div>'), c) {
|
|
1427
|
+
const p = e.isPanelOpen;
|
|
1428
|
+
h += `<button class="${p ? "tbw-toolbar-btn active" : "tbw-toolbar-btn"}" data-panel-toggle title="Settings" aria-label="Toggle settings panel" aria-pressed="${p}" aria-controls="tbw-tool-panel">${r}</button>`;
|
|
1420
1429
|
}
|
|
1421
1430
|
return `
|
|
1422
1431
|
<div class="tbw-shell-header" part="shell-header" role="presentation">
|
|
1423
|
-
${i ? `<div class="tbw-shell-title">${n}</div>` : ""}
|
|
1432
|
+
${i ? `<div class="tbw-shell-title">${it(n)}</div>` : ""}
|
|
1424
1433
|
<div class="tbw-shell-content" part="shell-content" role="presentation">
|
|
1425
1434
|
<slot name="header-content"></slot>
|
|
1426
1435
|
</div>
|
|
1427
1436
|
<div class="tbw-shell-toolbar" part="shell-toolbar" role="presentation">
|
|
1428
|
-
${
|
|
1437
|
+
${h}
|
|
1429
1438
|
</div>
|
|
1430
1439
|
</div>
|
|
1431
1440
|
`;
|
|
1432
1441
|
}
|
|
1433
|
-
function
|
|
1442
|
+
function B(t, e) {
|
|
1434
1443
|
const o = t.querySelector("tbw-grid-header");
|
|
1435
1444
|
if (!o) return;
|
|
1436
1445
|
if (!e.lightDomTitle) {
|
|
1437
|
-
const
|
|
1438
|
-
|
|
1446
|
+
const i = o.getAttribute("title");
|
|
1447
|
+
i && (e.lightDomTitle = i);
|
|
1439
1448
|
}
|
|
1440
1449
|
const n = o.querySelectorAll("tbw-grid-header-content");
|
|
1441
|
-
n.length > 0 && e.lightDomHeaderContent.length === 0 && (e.lightDomHeaderContent = Array.from(n), e.lightDomHeaderContent.forEach((
|
|
1442
|
-
|
|
1443
|
-
}));
|
|
1444
|
-
|
|
1445
|
-
|
|
1446
|
-
|
|
1447
|
-
|
|
1448
|
-
|
|
1449
|
-
|
|
1450
|
-
}), e.lightDomButtons.sort((r, s) => {
|
|
1451
|
-
const a = parseInt(r.getAttribute("data-order") ?? "100", 10), c = parseInt(s.getAttribute("data-order") ?? "100", 10);
|
|
1452
|
-
return a - c;
|
|
1453
|
-
})) : l.length > 0 && e.lightDomButtons.length === 0 && (e.lightDomButtons = Array.from(l), e.lightDomButtons.sort((r, s) => {
|
|
1454
|
-
const a = parseInt(r.getAttribute("data-order") ?? "100", 10), c = parseInt(s.getAttribute("data-order") ?? "100", 10);
|
|
1455
|
-
return a - c;
|
|
1456
|
-
})), e.lightDomButtons.forEach((r) => {
|
|
1457
|
-
r.parentElement === o && t.appendChild(r);
|
|
1458
|
-
}), o.style.display = "none";
|
|
1459
|
-
}
|
|
1460
|
-
function F(t, e, o) {
|
|
1450
|
+
n.length > 0 && e.lightDomHeaderContent.length === 0 && (e.lightDomHeaderContent = Array.from(n), e.lightDomHeaderContent.forEach((i) => {
|
|
1451
|
+
i.setAttribute("slot", "header-content");
|
|
1452
|
+
})), o.style.display = "none";
|
|
1453
|
+
}
|
|
1454
|
+
function W(t, e) {
|
|
1455
|
+
const o = t.querySelector(":scope > tbw-grid-tool-buttons");
|
|
1456
|
+
o && (e.hasToolButtonsContainer = !0, o.setAttribute("slot", "toolbar"));
|
|
1457
|
+
}
|
|
1458
|
+
function V(t, e, o) {
|
|
1461
1459
|
t.querySelectorAll(":scope > tbw-grid-tool-panel").forEach((i) => {
|
|
1462
|
-
const
|
|
1463
|
-
if (!
|
|
1460
|
+
const r = i, l = r.getAttribute("id"), s = r.getAttribute("title");
|
|
1461
|
+
if (!l || !s) {
|
|
1464
1462
|
console.warn(
|
|
1465
|
-
`[parseLightDomToolPanels] Tool panel missing required id or title attribute: id="${
|
|
1463
|
+
`[parseLightDomToolPanels] Tool panel missing required id or title attribute: id="${l ?? ""}", title="${s ?? ""}"`
|
|
1466
1464
|
);
|
|
1467
1465
|
return;
|
|
1468
1466
|
}
|
|
1469
|
-
const a =
|
|
1467
|
+
const a = r.getAttribute("icon") ?? void 0, c = r.getAttribute("tooltip") ?? void 0, f = parseInt(r.getAttribute("order") ?? "100", 10);
|
|
1470
1468
|
let d;
|
|
1471
|
-
const u = o?.(
|
|
1469
|
+
const u = o?.(r);
|
|
1472
1470
|
if (u)
|
|
1473
1471
|
d = u;
|
|
1474
1472
|
else {
|
|
1475
|
-
const
|
|
1473
|
+
const p = r.innerHTML.trim();
|
|
1476
1474
|
d = (g) => {
|
|
1477
|
-
const
|
|
1478
|
-
return
|
|
1475
|
+
const b = document.createElement("div");
|
|
1476
|
+
return b.innerHTML = p, g.appendChild(b), () => b.remove();
|
|
1479
1477
|
};
|
|
1480
1478
|
}
|
|
1481
|
-
const
|
|
1482
|
-
if (
|
|
1479
|
+
const w = e.toolPanels.get(l);
|
|
1480
|
+
if (w) {
|
|
1483
1481
|
if (u) {
|
|
1484
|
-
|
|
1485
|
-
const
|
|
1486
|
-
|
|
1482
|
+
w.render = d, w.order = f, w.icon = a, w.tooltip = c;
|
|
1483
|
+
const p = e.panelCleanups.get(l);
|
|
1484
|
+
p && (p(), e.panelCleanups.delete(l));
|
|
1487
1485
|
}
|
|
1488
1486
|
return;
|
|
1489
1487
|
}
|
|
1490
|
-
const
|
|
1491
|
-
id:
|
|
1488
|
+
const h = {
|
|
1489
|
+
id: l,
|
|
1492
1490
|
title: s,
|
|
1493
1491
|
icon: a,
|
|
1494
1492
|
tooltip: c,
|
|
1495
|
-
order:
|
|
1493
|
+
order: f,
|
|
1496
1494
|
render: d
|
|
1497
1495
|
};
|
|
1498
|
-
e.toolPanels.set(
|
|
1496
|
+
e.toolPanels.set(l, h), e.lightDomToolPanelIds.add(l), r.style.display = "none";
|
|
1499
1497
|
});
|
|
1500
1498
|
}
|
|
1501
|
-
function
|
|
1499
|
+
function Wt(t, e, o, n) {
|
|
1502
1500
|
const i = t.querySelector(".tbw-shell-toolbar");
|
|
1503
|
-
i && i.addEventListener("click", (
|
|
1504
|
-
const s =
|
|
1501
|
+
i && i.addEventListener("click", (l) => {
|
|
1502
|
+
const s = l.target;
|
|
1505
1503
|
if (s.closest("[data-panel-toggle]")) {
|
|
1506
1504
|
n.onPanelToggle();
|
|
1507
1505
|
return;
|
|
1508
1506
|
}
|
|
1509
1507
|
const c = s.closest("[data-btn]");
|
|
1510
1508
|
if (c) {
|
|
1511
|
-
const
|
|
1512
|
-
|
|
1509
|
+
const f = c.getAttribute("data-btn");
|
|
1510
|
+
f && n.onToolbarButtonClick(f);
|
|
1513
1511
|
}
|
|
1514
1512
|
});
|
|
1515
|
-
const
|
|
1516
|
-
|
|
1517
|
-
const a =
|
|
1513
|
+
const r = t.querySelector(".tbw-accordion");
|
|
1514
|
+
r && r.addEventListener("click", (l) => {
|
|
1515
|
+
const a = l.target.closest(".tbw-accordion-header");
|
|
1518
1516
|
if (a) {
|
|
1519
|
-
const
|
|
1520
|
-
|
|
1517
|
+
const f = a.closest("[data-section]")?.getAttribute("data-section");
|
|
1518
|
+
f && n.onSectionToggle(f);
|
|
1521
1519
|
}
|
|
1522
1520
|
});
|
|
1523
1521
|
}
|
|
1524
|
-
function
|
|
1525
|
-
const n = t.querySelector(".tbw-tool-panel"), i = t.querySelector("[data-resize-handle]"),
|
|
1526
|
-
if (!n || !i || !
|
|
1522
|
+
function Vt(t, e, o) {
|
|
1523
|
+
const n = t.querySelector(".tbw-tool-panel"), i = t.querySelector("[data-resize-handle]"), r = t.querySelector(".tbw-shell-body");
|
|
1524
|
+
if (!n || !i || !r)
|
|
1527
1525
|
return () => {
|
|
1528
1526
|
};
|
|
1529
|
-
const
|
|
1530
|
-
let a = 0, c = 0,
|
|
1531
|
-
const u = (
|
|
1527
|
+
const l = e?.toolPanel?.position ?? "right", s = 200;
|
|
1528
|
+
let a = 0, c = 0, f = 0, d = !1;
|
|
1529
|
+
const u = (p) => {
|
|
1532
1530
|
if (!d) return;
|
|
1533
|
-
|
|
1534
|
-
const g =
|
|
1535
|
-
n.style.width = `${
|
|
1536
|
-
},
|
|
1531
|
+
p.preventDefault();
|
|
1532
|
+
const g = l === "left" ? p.clientX - a : a - p.clientX, b = Math.min(f, Math.max(s, c + g));
|
|
1533
|
+
n.style.width = `${b}px`;
|
|
1534
|
+
}, w = () => {
|
|
1537
1535
|
if (!d) return;
|
|
1538
1536
|
d = !1, i.classList.remove("resizing"), n.style.transition = "", document.body.style.cursor = "", document.body.style.userSelect = "";
|
|
1539
|
-
const
|
|
1540
|
-
o(
|
|
1541
|
-
},
|
|
1542
|
-
|
|
1537
|
+
const p = n.getBoundingClientRect().width;
|
|
1538
|
+
o(p), document.removeEventListener("mousemove", u), document.removeEventListener("mouseup", w);
|
|
1539
|
+
}, h = (p) => {
|
|
1540
|
+
p.preventDefault(), d = !0, a = p.clientX, c = n.getBoundingClientRect().width, f = r.getBoundingClientRect().width - 20, i.classList.add("resizing"), n.style.transition = "none", document.body.style.cursor = "col-resize", document.body.style.userSelect = "none", document.addEventListener("mousemove", u), document.addEventListener("mouseup", w);
|
|
1543
1541
|
};
|
|
1544
|
-
return i.addEventListener("mousedown",
|
|
1545
|
-
i.removeEventListener("mousedown",
|
|
1542
|
+
return i.addEventListener("mousedown", h), () => {
|
|
1543
|
+
i.removeEventListener("mousedown", h), document.removeEventListener("mousemove", u), document.removeEventListener("mouseup", w);
|
|
1546
1544
|
};
|
|
1547
1545
|
}
|
|
1548
|
-
function
|
|
1546
|
+
function $t(t, e, o) {
|
|
1549
1547
|
const n = [...e?.header?.toolbarButtons ?? [], ...o.toolbarButtons.values()];
|
|
1550
1548
|
for (const i of n) {
|
|
1551
|
-
const
|
|
1552
|
-
if (!
|
|
1553
|
-
const
|
|
1554
|
-
if (
|
|
1555
|
-
|
|
1549
|
+
const r = t.querySelector(`[data-btn-slot="${i.id}"]`);
|
|
1550
|
+
if (!r) continue;
|
|
1551
|
+
const l = o.toolbarButtonCleanups.get(i.id);
|
|
1552
|
+
if (l && (l(), o.toolbarButtonCleanups.delete(i.id)), i.element)
|
|
1553
|
+
r.appendChild(i.element);
|
|
1556
1554
|
else if (i.render) {
|
|
1557
|
-
const s = i.render(
|
|
1555
|
+
const s = i.render(r);
|
|
1558
1556
|
s && o.toolbarButtonCleanups.set(i.id, s);
|
|
1559
1557
|
}
|
|
1560
1558
|
}
|
|
1561
1559
|
}
|
|
1562
|
-
function
|
|
1560
|
+
function Ve(t, e) {
|
|
1563
1561
|
const o = t.querySelector(".tbw-shell-content");
|
|
1564
1562
|
if (!o) return;
|
|
1565
|
-
const n = [...e.headerContents.values()].sort((
|
|
1566
|
-
for (const
|
|
1567
|
-
const
|
|
1568
|
-
|
|
1569
|
-
let s = o.querySelector(`[data-header-content="${
|
|
1570
|
-
s || (s = document.createElement("div"), s.setAttribute("data-header-content",
|
|
1571
|
-
const a =
|
|
1572
|
-
a && e.headerContentCleanups.set(
|
|
1563
|
+
const n = [...e.headerContents.values()].sort((r, l) => (r.order ?? 100) - (l.order ?? 100)), i = o.querySelector('slot[name="header-content"]');
|
|
1564
|
+
for (const r of n) {
|
|
1565
|
+
const l = e.headerContentCleanups.get(r.id);
|
|
1566
|
+
l && (l(), e.headerContentCleanups.delete(r.id));
|
|
1567
|
+
let s = o.querySelector(`[data-header-content="${r.id}"]`);
|
|
1568
|
+
s || (s = document.createElement("div"), s.setAttribute("data-header-content", r.id), i ? o.insertBefore(s, i) : o.appendChild(s));
|
|
1569
|
+
const a = r.render(s);
|
|
1570
|
+
a && e.headerContentCleanups.set(r.id, a);
|
|
1573
1571
|
}
|
|
1574
1572
|
}
|
|
1575
|
-
function
|
|
1573
|
+
function Ft(t, e, o) {
|
|
1576
1574
|
if (!e.isPanelOpen) return;
|
|
1577
|
-
const n =
|
|
1578
|
-
for (const [
|
|
1579
|
-
const s = e.expandedSections.has(
|
|
1575
|
+
const n = N(o?.expand ?? O.expand), i = N(o?.collapse ?? O.collapse);
|
|
1576
|
+
for (const [r, l] of e.toolPanels) {
|
|
1577
|
+
const s = e.expandedSections.has(r), a = t.querySelector(`[data-section="${r}"]`), c = a?.querySelector(".tbw-accordion-content");
|
|
1580
1578
|
if (!a || !c) continue;
|
|
1581
1579
|
a.classList.toggle("expanded", s);
|
|
1582
|
-
const
|
|
1583
|
-
|
|
1580
|
+
const f = a.querySelector(".tbw-accordion-header");
|
|
1581
|
+
f && f.setAttribute("aria-expanded", String(s));
|
|
1584
1582
|
const d = a.querySelector(".tbw-accordion-chevron");
|
|
1585
1583
|
if (d && (d.innerHTML = s ? i : n), s) {
|
|
1586
1584
|
if (c.children.length === 0) {
|
|
1587
|
-
const u =
|
|
1588
|
-
u && e.panelCleanups.set(
|
|
1585
|
+
const u = l.render(c);
|
|
1586
|
+
u && e.panelCleanups.set(r, u);
|
|
1589
1587
|
}
|
|
1590
1588
|
} else {
|
|
1591
|
-
const u = e.panelCleanups.get(
|
|
1592
|
-
u && (u(), e.panelCleanups.delete(
|
|
1589
|
+
const u = e.panelCleanups.get(r);
|
|
1590
|
+
u && (u(), e.panelCleanups.delete(r)), c.innerHTML = "";
|
|
1593
1591
|
}
|
|
1594
1592
|
}
|
|
1595
1593
|
}
|
|
@@ -1601,50 +1599,44 @@ function Re(t, e) {
|
|
|
1601
1599
|
const o = t.querySelector(".tbw-tool-panel");
|
|
1602
1600
|
o && (o.classList.toggle("open", e.isPanelOpen), e.isPanelOpen || (o.style.width = ""));
|
|
1603
1601
|
}
|
|
1604
|
-
function
|
|
1602
|
+
function Gt(t, e) {
|
|
1605
1603
|
const o = [];
|
|
1606
1604
|
for (const n of t?.header?.toolbarButtons ?? [])
|
|
1607
1605
|
o.push({
|
|
1608
1606
|
id: n.id,
|
|
1609
|
-
label: n.label,
|
|
1610
|
-
disabled: n.disabled ?? !1,
|
|
1607
|
+
label: n.label ?? "",
|
|
1611
1608
|
source: "config"
|
|
1612
1609
|
});
|
|
1613
1610
|
for (const n of e.toolbarButtons.values())
|
|
1614
1611
|
o.push({
|
|
1615
1612
|
id: n.id,
|
|
1616
|
-
label: n.label,
|
|
1617
|
-
disabled: n.disabled ?? !1,
|
|
1613
|
+
label: n.label ?? "",
|
|
1618
1614
|
source: "config"
|
|
1619
1615
|
});
|
|
1620
|
-
for (let n = 0; n < e.lightDomButtons.length; n++) {
|
|
1621
|
-
const l = e.lightDomButtons[n].querySelector("button");
|
|
1622
|
-
o.push({
|
|
1623
|
-
id: `light-dom-${n}`,
|
|
1624
|
-
label: l?.getAttribute("title") ?? l?.getAttribute("aria-label") ?? "",
|
|
1625
|
-
disabled: l?.disabled ?? !1,
|
|
1626
|
-
source: "light-dom"
|
|
1627
|
-
});
|
|
1628
|
-
}
|
|
1629
1616
|
for (const n of e.toolPanels.values())
|
|
1630
1617
|
o.push({
|
|
1631
1618
|
id: `panel-toggle-${n.id}`,
|
|
1632
1619
|
label: n.tooltip ?? n.title,
|
|
1633
|
-
disabled: !1,
|
|
1634
1620
|
source: "panel-toggle",
|
|
1635
1621
|
panelId: n.id
|
|
1636
1622
|
});
|
|
1637
1623
|
return o;
|
|
1638
1624
|
}
|
|
1639
|
-
function
|
|
1625
|
+
function Ut(t) {
|
|
1640
1626
|
for (const e of t.headerContentCleanups.values())
|
|
1641
1627
|
e();
|
|
1642
|
-
t.headerContentCleanups.clear()
|
|
1628
|
+
t.headerContentCleanups.clear();
|
|
1629
|
+
for (const e of t.panelCleanups.values())
|
|
1630
|
+
e();
|
|
1631
|
+
t.panelCleanups.clear();
|
|
1643
1632
|
for (const e of t.toolbarButtonCleanups.values())
|
|
1644
1633
|
e();
|
|
1645
|
-
|
|
1634
|
+
if (t.toolbarButtonCleanups.clear(), t.isPanelOpen)
|
|
1635
|
+
for (const e of t.expandedSections)
|
|
1636
|
+
t.toolPanels.get(e)?.onClose?.();
|
|
1637
|
+
t.isPanelOpen = !1, t.expandedSections.clear(), t.toolPanels.clear(), t.headerContents.clear(), t.toolbarButtons.clear(), t.lightDomHeaderContent = [];
|
|
1646
1638
|
}
|
|
1647
|
-
function
|
|
1639
|
+
function Xt(t, e) {
|
|
1648
1640
|
let o = !1;
|
|
1649
1641
|
const n = {
|
|
1650
1642
|
get isInitialized() {
|
|
@@ -1669,19 +1661,19 @@ function Ft(t, e) {
|
|
|
1669
1661
|
return;
|
|
1670
1662
|
}
|
|
1671
1663
|
if (t.isPanelOpen = !0, t.expandedSections.size === 0 && t.toolPanels.size > 0) {
|
|
1672
|
-
const
|
|
1673
|
-
|
|
1664
|
+
const l = [...t.toolPanels.values()].sort((s, a) => (s.order ?? 100) - (a.order ?? 100))[0];
|
|
1665
|
+
l && t.expandedSections.add(l.id);
|
|
1674
1666
|
}
|
|
1675
1667
|
const i = e.getShadow();
|
|
1676
|
-
Se(i, t), Re(i, t),
|
|
1668
|
+
Se(i, t), Re(i, t), Ft(i, t, e.getAccordionIcons()), e.emit("tool-panel-open", { sections: n.expandedSections });
|
|
1677
1669
|
},
|
|
1678
1670
|
closeToolPanel() {
|
|
1679
1671
|
if (!t.isPanelOpen) return;
|
|
1680
|
-
for (const
|
|
1681
|
-
|
|
1682
|
-
t.panelCleanups.clear()
|
|
1683
|
-
for (const
|
|
1684
|
-
|
|
1672
|
+
for (const r of t.panelCleanups.values())
|
|
1673
|
+
r();
|
|
1674
|
+
t.panelCleanups.clear();
|
|
1675
|
+
for (const r of t.toolPanels.values())
|
|
1676
|
+
r.onClose?.();
|
|
1685
1677
|
t.isPanelOpen = !1;
|
|
1686
1678
|
const i = e.getShadow();
|
|
1687
1679
|
Se(i, t), Re(i, t), e.emit("tool-panel-close", {});
|
|
@@ -1690,26 +1682,26 @@ function Ft(t, e) {
|
|
|
1690
1682
|
t.isPanelOpen ? n.closeToolPanel() : n.openToolPanel();
|
|
1691
1683
|
},
|
|
1692
1684
|
toggleToolPanelSection(i) {
|
|
1693
|
-
const
|
|
1694
|
-
if (!
|
|
1685
|
+
const r = t.toolPanels.get(i);
|
|
1686
|
+
if (!r) {
|
|
1695
1687
|
console.warn(`[tbw-grid] Tool panel section "${i}" not found`);
|
|
1696
1688
|
return;
|
|
1697
1689
|
}
|
|
1698
1690
|
if (t.toolPanels.size === 1)
|
|
1699
1691
|
return;
|
|
1700
|
-
const
|
|
1692
|
+
const l = e.getShadow(), s = t.expandedSections.has(i);
|
|
1701
1693
|
if (s) {
|
|
1702
1694
|
const a = t.panelCleanups.get(i);
|
|
1703
|
-
a && (a(), t.panelCleanups.delete(i)),
|
|
1695
|
+
a && (a(), t.panelCleanups.delete(i)), r.onClose?.(), t.expandedSections.delete(i), ie(l, i, !1);
|
|
1704
1696
|
} else {
|
|
1705
1697
|
for (const [a, c] of t.toolPanels)
|
|
1706
1698
|
if (a !== i && t.expandedSections.has(a)) {
|
|
1707
|
-
const
|
|
1708
|
-
|
|
1709
|
-
const d =
|
|
1699
|
+
const f = t.panelCleanups.get(a);
|
|
1700
|
+
f && (f(), t.panelCleanups.delete(a)), c.onClose?.(), t.expandedSections.delete(a), ie(l, a, !1);
|
|
1701
|
+
const d = l.querySelector(`[data-section="${a}"] .tbw-accordion-content`);
|
|
1710
1702
|
d && (d.innerHTML = "");
|
|
1711
1703
|
}
|
|
1712
|
-
t.expandedSections.add(i),
|
|
1704
|
+
t.expandedSections.add(i), ie(l, i, !0), Yt(l, t, i);
|
|
1713
1705
|
}
|
|
1714
1706
|
e.emit("tool-panel-section-toggle", { id: i, expanded: !s });
|
|
1715
1707
|
},
|
|
@@ -1725,8 +1717,8 @@ function Ft(t, e) {
|
|
|
1725
1717
|
},
|
|
1726
1718
|
unregisterToolPanel(i) {
|
|
1727
1719
|
if (t.expandedSections.has(i)) {
|
|
1728
|
-
const
|
|
1729
|
-
|
|
1720
|
+
const r = t.panelCleanups.get(i);
|
|
1721
|
+
r && (r(), t.panelCleanups.delete(i)), t.expandedSections.delete(i);
|
|
1730
1722
|
}
|
|
1731
1723
|
t.toolPanels.delete(i), o && e.refreshShellHeader();
|
|
1732
1724
|
},
|
|
@@ -1738,14 +1730,14 @@ function Ft(t, e) {
|
|
|
1738
1730
|
console.warn(`[tbw-grid] Header content "${i.id}" already registered`);
|
|
1739
1731
|
return;
|
|
1740
1732
|
}
|
|
1741
|
-
t.headerContents.set(i.id, i), o &&
|
|
1733
|
+
t.headerContents.set(i.id, i), o && Ve(e.getShadow(), t);
|
|
1742
1734
|
},
|
|
1743
1735
|
unregisterHeaderContent(i) {
|
|
1744
|
-
const
|
|
1745
|
-
|
|
1736
|
+
const r = t.headerContentCleanups.get(i);
|
|
1737
|
+
r && (r(), t.headerContentCleanups.delete(i)), t.headerContents.get(i)?.onDestroy?.(), t.headerContents.delete(i), e.getShadow().querySelector(`[data-header-content="${i}"]`)?.remove();
|
|
1746
1738
|
},
|
|
1747
1739
|
getToolbarButtons() {
|
|
1748
|
-
return
|
|
1740
|
+
return Gt(e.getShellConfig(), t);
|
|
1749
1741
|
},
|
|
1750
1742
|
registerToolbarButton(i) {
|
|
1751
1743
|
if (t.toolbarButtons.has(i.id)) {
|
|
@@ -1755,81 +1747,74 @@ function Ft(t, e) {
|
|
|
1755
1747
|
t.toolbarButtons.set(i.id, i), o && e.refreshShellHeader();
|
|
1756
1748
|
},
|
|
1757
1749
|
unregisterToolbarButton(i) {
|
|
1758
|
-
const
|
|
1759
|
-
|
|
1750
|
+
const r = t.toolbarButtonCleanups.get(i);
|
|
1751
|
+
r && (r(), t.toolbarButtonCleanups.delete(i)), t.toolbarButtons.delete(i), o && e.refreshShellHeader();
|
|
1760
1752
|
},
|
|
1761
|
-
|
|
1762
|
-
|
|
1763
|
-
|
|
1764
|
-
|
|
1765
|
-
|
|
1753
|
+
/**
|
|
1754
|
+
* Note: Toolbar button disabled state is now managed by the user.
|
|
1755
|
+
* This method is kept for backward compatibility but is a no-op.
|
|
1756
|
+
* Users should control their button's disabled state directly in their HTML.
|
|
1757
|
+
*/
|
|
1758
|
+
// eslint-disable-next-line @typescript-eslint/no-unused-vars
|
|
1759
|
+
setToolbarButtonDisabled(i, r) {
|
|
1766
1760
|
}
|
|
1767
1761
|
};
|
|
1768
1762
|
return n;
|
|
1769
1763
|
}
|
|
1770
|
-
function
|
|
1764
|
+
function ie(t, e, o) {
|
|
1771
1765
|
const n = t.querySelector(`[data-section="${e}"]`);
|
|
1772
1766
|
n && n.classList.toggle("expanded", o);
|
|
1773
1767
|
}
|
|
1774
|
-
function
|
|
1768
|
+
function Yt(t, e, o) {
|
|
1775
1769
|
const n = e.toolPanels.get(o);
|
|
1776
1770
|
if (!n?.render) return;
|
|
1777
1771
|
const i = t.querySelector(`[data-section="${o}"] .tbw-accordion-content`);
|
|
1778
1772
|
if (!i) return;
|
|
1779
|
-
const
|
|
1780
|
-
|
|
1773
|
+
const r = n.render(i);
|
|
1774
|
+
r && e.panelCleanups.set(o, r);
|
|
1781
1775
|
}
|
|
1782
|
-
function
|
|
1783
|
-
const i =
|
|
1776
|
+
function jt(t, e, o, n) {
|
|
1777
|
+
const i = We(e, o);
|
|
1784
1778
|
if (t.replaceChildren(), i) {
|
|
1785
|
-
const
|
|
1779
|
+
const r = N(n?.toolPanel ?? O.toolPanel), l = N(n?.expand ?? O.expand), s = N(n?.collapse ?? O.collapse), c = [...e?.header?.toolbarButtons ?? []].sort((b, _) => (b.order ?? 100) - (_.order ?? 100)), f = [...o.toolbarButtons.values()].sort((b, _) => (b.order ?? 100) - (_.order ?? 100)), d = {
|
|
1786
1780
|
title: e?.header?.title ?? o.lightDomTitle ?? void 0,
|
|
1787
|
-
hasLightDomButtons: o.lightDomButtons.length > 0,
|
|
1788
1781
|
hasPanels: o.toolPanels.size > 0,
|
|
1789
1782
|
isPanelOpen: o.isPanelOpen,
|
|
1790
|
-
toolPanelIcon:
|
|
1791
|
-
configButtons: c.map((
|
|
1792
|
-
id:
|
|
1793
|
-
|
|
1794
|
-
|
|
1795
|
-
disabled: w.disabled,
|
|
1796
|
-
hasElement: !!w.element,
|
|
1797
|
-
hasRender: !!w.render,
|
|
1798
|
-
action: w.action
|
|
1783
|
+
toolPanelIcon: r,
|
|
1784
|
+
configButtons: c.map((b) => ({
|
|
1785
|
+
id: b.id,
|
|
1786
|
+
hasElement: !!b.element,
|
|
1787
|
+
hasRender: !!b.render
|
|
1799
1788
|
})),
|
|
1800
|
-
apiButtons:
|
|
1801
|
-
id:
|
|
1802
|
-
|
|
1803
|
-
|
|
1804
|
-
disabled: w.disabled,
|
|
1805
|
-
hasElement: !!w.element,
|
|
1806
|
-
hasRender: !!w.render,
|
|
1807
|
-
action: w.action
|
|
1789
|
+
apiButtons: f.map((b) => ({
|
|
1790
|
+
id: b.id,
|
|
1791
|
+
hasElement: !!b.element,
|
|
1792
|
+
hasRender: !!b.render
|
|
1808
1793
|
}))
|
|
1809
|
-
}, u = [...o.toolPanels.values()].sort((
|
|
1794
|
+
}, u = [...o.toolPanels.values()].sort((b, _) => (b.order ?? 100) - (_.order ?? 100)), w = {
|
|
1810
1795
|
position: e?.toolPanel?.position ?? "right",
|
|
1811
1796
|
isPanelOpen: o.isPanelOpen,
|
|
1812
|
-
expandIcon:
|
|
1797
|
+
expandIcon: l,
|
|
1813
1798
|
collapseIcon: s,
|
|
1814
|
-
panels: u.map((
|
|
1815
|
-
id:
|
|
1816
|
-
title:
|
|
1817
|
-
icon:
|
|
1818
|
-
isExpanded: o.expandedSections.has(
|
|
1799
|
+
panels: u.map((b) => ({
|
|
1800
|
+
id: b.id,
|
|
1801
|
+
title: b.title,
|
|
1802
|
+
icon: N(b.icon),
|
|
1803
|
+
isExpanded: o.expandedSections.has(b.id)
|
|
1819
1804
|
}))
|
|
1820
|
-
},
|
|
1805
|
+
}, h = It(d), p = qt(w), g = Ee({
|
|
1821
1806
|
hasShell: !0,
|
|
1822
|
-
shellHeader:
|
|
1823
|
-
shellBody:
|
|
1807
|
+
shellHeader: h,
|
|
1808
|
+
shellBody: p
|
|
1824
1809
|
});
|
|
1825
1810
|
t.appendChild(g);
|
|
1826
1811
|
} else {
|
|
1827
|
-
const
|
|
1828
|
-
t.appendChild(
|
|
1812
|
+
const r = Ee({ hasShell: !1 });
|
|
1813
|
+
t.appendChild(r);
|
|
1829
1814
|
}
|
|
1830
1815
|
return i;
|
|
1831
1816
|
}
|
|
1832
|
-
function
|
|
1817
|
+
function Kt() {
|
|
1833
1818
|
return {
|
|
1834
1819
|
startY: null,
|
|
1835
1820
|
startX: null,
|
|
@@ -1843,59 +1828,59 @@ function Xt() {
|
|
|
1843
1828
|
momentumRaf: 0
|
|
1844
1829
|
};
|
|
1845
1830
|
}
|
|
1846
|
-
function
|
|
1831
|
+
function Zt(t) {
|
|
1847
1832
|
t.startY = null, t.startX = null, t.scrollTop = null, t.scrollLeft = null, t.lastY = null, t.lastX = null, t.lastTime = null;
|
|
1848
1833
|
}
|
|
1849
|
-
function
|
|
1834
|
+
function $e(t) {
|
|
1850
1835
|
t.momentumRaf && (cancelAnimationFrame(t.momentumRaf), t.momentumRaf = 0);
|
|
1851
1836
|
}
|
|
1852
|
-
function
|
|
1837
|
+
function Jt(t, e, o) {
|
|
1853
1838
|
if (t.touches.length !== 1) return;
|
|
1854
|
-
|
|
1839
|
+
$e(e);
|
|
1855
1840
|
const n = t.touches[0];
|
|
1856
1841
|
e.startY = n.clientY, e.startX = n.clientX, e.lastY = n.clientY, e.lastX = n.clientX, e.lastTime = performance.now(), e.scrollTop = o.fauxScrollbar.scrollTop, e.scrollLeft = o.scrollArea?.scrollLeft ?? 0, e.velocityY = 0, e.velocityX = 0;
|
|
1857
1842
|
}
|
|
1858
|
-
function
|
|
1843
|
+
function Qt(t, e, o) {
|
|
1859
1844
|
if (t.touches.length !== 1 || e.startY === null || e.startX === null || e.scrollTop === null || e.scrollLeft === null)
|
|
1860
1845
|
return !1;
|
|
1861
|
-
const n = t.touches[0], i = n.clientY,
|
|
1846
|
+
const n = t.touches[0], i = n.clientY, r = n.clientX, l = performance.now(), s = e.startY - i, a = e.startX - r;
|
|
1862
1847
|
if (e.lastTime !== null && e.lastY !== null && e.lastX !== null) {
|
|
1863
|
-
const
|
|
1864
|
-
|
|
1848
|
+
const p = l - e.lastTime;
|
|
1849
|
+
p > 0 && (e.velocityY = (e.lastY - i) / p, e.velocityX = (e.lastX - r) / p);
|
|
1865
1850
|
}
|
|
1866
|
-
e.lastY = i, e.lastX =
|
|
1867
|
-
const { scrollTop: c, scrollHeight:
|
|
1868
|
-
let
|
|
1851
|
+
e.lastY = i, e.lastX = r, e.lastTime = l;
|
|
1852
|
+
const { scrollTop: c, scrollHeight: f, clientHeight: d } = o.fauxScrollbar, u = f - d, w = s > 0 && c < u || s < 0 && c > 0;
|
|
1853
|
+
let h = !1;
|
|
1869
1854
|
if (o.scrollArea) {
|
|
1870
|
-
const { scrollLeft:
|
|
1871
|
-
|
|
1855
|
+
const { scrollLeft: p, scrollWidth: g, clientWidth: b } = o.scrollArea, _ = g - b;
|
|
1856
|
+
h = a > 0 && p < _ || a < 0 && p > 0;
|
|
1872
1857
|
}
|
|
1873
|
-
return
|
|
1858
|
+
return w && (o.fauxScrollbar.scrollTop = e.scrollTop + s), h && o.scrollArea && (o.scrollArea.scrollLeft = e.scrollLeft + a), w || h;
|
|
1874
1859
|
}
|
|
1875
|
-
function
|
|
1876
|
-
(Math.abs(t.velocityY) > 0.1 || Math.abs(t.velocityX) > 0.1) &&
|
|
1860
|
+
function eo(t, e) {
|
|
1861
|
+
(Math.abs(t.velocityY) > 0.1 || Math.abs(t.velocityX) > 0.1) && to(t, e), Zt(t);
|
|
1877
1862
|
}
|
|
1878
|
-
function
|
|
1863
|
+
function to(t, e) {
|
|
1879
1864
|
const i = () => {
|
|
1880
1865
|
t.velocityY *= 0.95, t.velocityX *= 0.95;
|
|
1881
|
-
const
|
|
1882
|
-
Math.abs(t.velocityY) > 0.01 && (e.fauxScrollbar.scrollTop +=
|
|
1866
|
+
const r = t.velocityY * 16, l = t.velocityX * 16;
|
|
1867
|
+
Math.abs(t.velocityY) > 0.01 && (e.fauxScrollbar.scrollTop += r), Math.abs(t.velocityX) > 0.01 && e.scrollArea && (e.scrollArea.scrollLeft += l), Math.abs(t.velocityY) > 0.01 || Math.abs(t.velocityX) > 0.01 ? t.momentumRaf = requestAnimationFrame(i) : t.momentumRaf = 0;
|
|
1883
1868
|
};
|
|
1884
1869
|
t.momentumRaf = requestAnimationFrame(i);
|
|
1885
1870
|
}
|
|
1886
|
-
function
|
|
1887
|
-
t.addEventListener("touchstart", (i) =>
|
|
1871
|
+
function oo(t, e, o, n) {
|
|
1872
|
+
t.addEventListener("touchstart", (i) => Jt(i, e, o), {
|
|
1888
1873
|
passive: !0,
|
|
1889
1874
|
signal: n
|
|
1890
1875
|
}), t.addEventListener(
|
|
1891
1876
|
"touchmove",
|
|
1892
1877
|
(i) => {
|
|
1893
|
-
|
|
1878
|
+
Qt(i, e, o) && i.preventDefault();
|
|
1894
1879
|
},
|
|
1895
1880
|
{ passive: !1, signal: n }
|
|
1896
|
-
), t.addEventListener("touchend", () =>
|
|
1881
|
+
), t.addEventListener("touchend", () => eo(e, o), { passive: !0, signal: n });
|
|
1897
1882
|
}
|
|
1898
|
-
class
|
|
1883
|
+
class no {
|
|
1899
1884
|
constructor(e) {
|
|
1900
1885
|
this.grid = e;
|
|
1901
1886
|
}
|
|
@@ -2055,10 +2040,10 @@ class eo {
|
|
|
2055
2040
|
*/
|
|
2056
2041
|
adjustVirtualStart(e, o, n) {
|
|
2057
2042
|
let i = e;
|
|
2058
|
-
for (const
|
|
2059
|
-
if (typeof
|
|
2060
|
-
const
|
|
2061
|
-
|
|
2043
|
+
for (const r of this.plugins)
|
|
2044
|
+
if (typeof r.adjustVirtualStart == "function") {
|
|
2045
|
+
const l = r.adjustVirtualStart(e, o, n);
|
|
2046
|
+
l < i && (i = l);
|
|
2062
2047
|
}
|
|
2063
2048
|
return i;
|
|
2064
2049
|
}
|
|
@@ -2177,12 +2162,12 @@ class eo {
|
|
|
2177
2162
|
* @returns Combined left and right pixel offsets, plus skipScroll if any plugin requests it
|
|
2178
2163
|
*/
|
|
2179
2164
|
getHorizontalScrollOffsets(e, o) {
|
|
2180
|
-
let n = 0, i = 0,
|
|
2181
|
-
for (const
|
|
2182
|
-
const s =
|
|
2183
|
-
s && (n += s.left, i += s.right, s.skipScroll && (
|
|
2165
|
+
let n = 0, i = 0, r = !1;
|
|
2166
|
+
for (const l of this.plugins) {
|
|
2167
|
+
const s = l.getHorizontalScrollOffsets?.(e, o);
|
|
2168
|
+
s && (n += s.left, i += s.right, s.skipScroll && (r = !0));
|
|
2184
2169
|
}
|
|
2185
|
-
return { left: n, right: i, skipScroll:
|
|
2170
|
+
return { left: n, right: i, skipScroll: r };
|
|
2186
2171
|
}
|
|
2187
2172
|
// #endregion
|
|
2188
2173
|
// #region Shell Integration Hooks
|
|
@@ -2212,10 +2197,10 @@ class eo {
|
|
|
2212
2197
|
}
|
|
2213
2198
|
// #endregion
|
|
2214
2199
|
}
|
|
2215
|
-
class
|
|
2200
|
+
class I extends HTMLElement {
|
|
2216
2201
|
// TODO: Rename to 'data-grid' when migration is complete
|
|
2217
2202
|
static tagName = "tbw-grid";
|
|
2218
|
-
static version = "0.3.
|
|
2203
|
+
static version = "0.3.3";
|
|
2219
2204
|
// ---------------- Framework Adapters ----------------
|
|
2220
2205
|
/**
|
|
2221
2206
|
* Registry of framework adapters that handle converting light DOM elements
|
|
@@ -2257,53 +2242,55 @@ class N extends HTMLElement {
|
|
|
2257
2242
|
return ["rows", "columns", "grid-config", "fit-mode", "edit-on"];
|
|
2258
2243
|
}
|
|
2259
2244
|
#n;
|
|
2260
|
-
#
|
|
2245
|
+
#H = !1;
|
|
2261
2246
|
// ---------------- Ready Promise ----------------
|
|
2262
|
-
#
|
|
2263
|
-
#
|
|
2247
|
+
#Y;
|
|
2248
|
+
#j;
|
|
2264
2249
|
// #region Input Properties
|
|
2265
2250
|
// These backing fields store raw user input. They are merged into
|
|
2266
2251
|
// #effectiveConfig by #mergeEffectiveConfig(). Never read directly
|
|
2267
2252
|
// for rendering logic - always use effectiveConfig or derived state.
|
|
2268
|
-
#
|
|
2253
|
+
#l = [];
|
|
2269
2254
|
#c;
|
|
2270
2255
|
#g;
|
|
2256
|
+
#E;
|
|
2271
2257
|
#y;
|
|
2272
|
-
#S;
|
|
2273
2258
|
// #endregion
|
|
2274
2259
|
// #region Private properties
|
|
2275
2260
|
// All input sources converge here. This is the canonical config
|
|
2276
2261
|
// that all rendering and logic should read from.
|
|
2277
|
-
#
|
|
2278
|
-
#
|
|
2262
|
+
#o = {};
|
|
2263
|
+
#M = !1;
|
|
2279
2264
|
// ---------------- Batched Updates ----------------
|
|
2280
2265
|
// When multiple properties are set in rapid succession (within same microtask),
|
|
2281
2266
|
// we batch them into a single update to avoid redundant re-renders.
|
|
2282
2267
|
#m = !1;
|
|
2283
|
-
#
|
|
2268
|
+
#O = {
|
|
2284
2269
|
rows: !1,
|
|
2285
2270
|
columns: !1,
|
|
2286
2271
|
gridConfig: !1,
|
|
2287
2272
|
fitMode: !1,
|
|
2288
2273
|
editMode: !1
|
|
2289
2274
|
};
|
|
2290
|
-
#
|
|
2291
|
-
#
|
|
2292
|
-
#
|
|
2275
|
+
#f = 0;
|
|
2276
|
+
#S = null;
|
|
2277
|
+
#R = !1;
|
|
2293
2278
|
// Cached flag for plugin scroll handlers
|
|
2294
|
-
#
|
|
2279
|
+
#k;
|
|
2295
2280
|
// Cached hook to avoid closures
|
|
2296
2281
|
#T = !1;
|
|
2297
|
-
#
|
|
2282
|
+
#K = Kt();
|
|
2298
2283
|
#s;
|
|
2299
|
-
#
|
|
2284
|
+
#p;
|
|
2300
2285
|
#w;
|
|
2301
2286
|
// Watches first row for size changes (CSS loading, custom renderers)
|
|
2287
|
+
#D = 0;
|
|
2288
|
+
// RAF handle for debounced refreshColumns
|
|
2289
|
+
#d;
|
|
2302
2290
|
#u;
|
|
2303
|
-
#h;
|
|
2304
2291
|
// Handle for cancelling deferred idle work
|
|
2305
2292
|
// Pooled scroll event object (reused to avoid GC pressure during scroll)
|
|
2306
|
-
#
|
|
2293
|
+
#re = {
|
|
2307
2294
|
scrollTop: 0,
|
|
2308
2295
|
scrollLeft: 0,
|
|
2309
2296
|
scrollHeight: 0,
|
|
@@ -2312,7 +2299,7 @@ class N extends HTMLElement {
|
|
|
2312
2299
|
clientWidth: 0
|
|
2313
2300
|
};
|
|
2314
2301
|
// ---------------- Plugin System ----------------
|
|
2315
|
-
#
|
|
2302
|
+
#t;
|
|
2316
2303
|
// ---------------- Event Listeners ----------------
|
|
2317
2304
|
#x = !1;
|
|
2318
2305
|
// Guard against adding duplicate component-level listeners
|
|
@@ -2320,11 +2307,11 @@ class N extends HTMLElement {
|
|
|
2320
2307
|
// Separate controller for DOM scroll listeners (recreated on DOM changes)
|
|
2321
2308
|
// ---------------- Column State ----------------
|
|
2322
2309
|
#z;
|
|
2323
|
-
#
|
|
2310
|
+
#h;
|
|
2324
2311
|
// ---------------- Shell State ----------------
|
|
2325
|
-
#
|
|
2312
|
+
#e = Bt();
|
|
2326
2313
|
#i;
|
|
2327
|
-
#
|
|
2314
|
+
#A;
|
|
2328
2315
|
// #endregion
|
|
2329
2316
|
// #region Derived State
|
|
2330
2317
|
// _rows: result of applying plugin processRows hooks
|
|
@@ -2336,10 +2323,10 @@ class N extends HTMLElement {
|
|
|
2336
2323
|
// This ensures effectiveConfig.columns is the single source of truth for columns
|
|
2337
2324
|
// _columns always contains ALL columns (including hidden)
|
|
2338
2325
|
get _columns() {
|
|
2339
|
-
return this.#
|
|
2326
|
+
return this.#o.columns ?? [];
|
|
2340
2327
|
}
|
|
2341
2328
|
set _columns(e) {
|
|
2342
|
-
this.#
|
|
2329
|
+
this.#o.columns = e;
|
|
2343
2330
|
}
|
|
2344
2331
|
// visibleColumns returns only visible columns for rendering
|
|
2345
2332
|
// This is what header/row rendering should use
|
|
@@ -2384,8 +2371,6 @@ class N extends HTMLElement {
|
|
|
2384
2371
|
__originalOrder = [];
|
|
2385
2372
|
// Cached DOM refs for hot path (refreshVirtualWindow) - avoid querySelector per scroll
|
|
2386
2373
|
__rowsBodyEl = null;
|
|
2387
|
-
__scrollAreaEl = null;
|
|
2388
|
-
__footerEl = null;
|
|
2389
2374
|
// #endregion
|
|
2390
2375
|
// #region Public API Props (getters/setters)
|
|
2391
2376
|
// Getters return the EFFECTIVE value (after merging), not the raw input.
|
|
@@ -2395,43 +2380,43 @@ class N extends HTMLElement {
|
|
|
2395
2380
|
return this._rows;
|
|
2396
2381
|
}
|
|
2397
2382
|
set rows(e) {
|
|
2398
|
-
const o = this.#
|
|
2399
|
-
this.#
|
|
2383
|
+
const o = this.#l;
|
|
2384
|
+
this.#l = e, o !== e && this.#_("rows");
|
|
2400
2385
|
}
|
|
2401
2386
|
/**
|
|
2402
2387
|
* Get the original unfiltered/unprocessed rows.
|
|
2403
2388
|
* Use this when you need access to all source data regardless of active filters.
|
|
2404
2389
|
*/
|
|
2405
2390
|
get sourceRows() {
|
|
2406
|
-
return this.#
|
|
2391
|
+
return this.#l;
|
|
2407
2392
|
}
|
|
2408
2393
|
get columns() {
|
|
2409
2394
|
return [...this._columns];
|
|
2410
2395
|
}
|
|
2411
2396
|
set columns(e) {
|
|
2412
2397
|
const o = this.#c;
|
|
2413
|
-
this.#c = e, o !== e && this.#
|
|
2398
|
+
this.#c = e, o !== e && this.#_("columns");
|
|
2414
2399
|
}
|
|
2415
2400
|
get gridConfig() {
|
|
2416
|
-
return this.#
|
|
2401
|
+
return this.#o;
|
|
2417
2402
|
}
|
|
2418
2403
|
set gridConfig(e) {
|
|
2419
2404
|
const o = this.#g;
|
|
2420
|
-
this.#g = e, o !== e && (this.__lightDomColumnsCache = void 0, this.#
|
|
2405
|
+
this.#g = e, o !== e && (this.__lightDomColumnsCache = void 0, this.#_("gridConfig"));
|
|
2421
2406
|
}
|
|
2422
2407
|
get fitMode() {
|
|
2423
|
-
return this.#
|
|
2408
|
+
return this.#o.fitMode ?? "stretch";
|
|
2424
2409
|
}
|
|
2425
2410
|
set fitMode(e) {
|
|
2426
|
-
const o = this.#
|
|
2427
|
-
this.#
|
|
2411
|
+
const o = this.#E;
|
|
2412
|
+
this.#E = e, o !== e && this.#_("fitMode");
|
|
2428
2413
|
}
|
|
2429
2414
|
get editOn() {
|
|
2430
|
-
return this.#
|
|
2415
|
+
return this.#o.editOn;
|
|
2431
2416
|
}
|
|
2432
2417
|
set editOn(e) {
|
|
2433
|
-
const o = this.#
|
|
2434
|
-
this.#
|
|
2418
|
+
const o = this.#y;
|
|
2419
|
+
this.#y = e, o !== e && this.#_("editMode");
|
|
2435
2420
|
}
|
|
2436
2421
|
/**
|
|
2437
2422
|
* Effective config accessor for internal modules and plugins.
|
|
@@ -2440,7 +2425,7 @@ class N extends HTMLElement {
|
|
|
2440
2425
|
* @internal Plugin API
|
|
2441
2426
|
*/
|
|
2442
2427
|
get effectiveConfig() {
|
|
2443
|
-
return this.#
|
|
2428
|
+
return this.#o;
|
|
2444
2429
|
}
|
|
2445
2430
|
/**
|
|
2446
2431
|
* Get the disconnect signal for event listener cleanup.
|
|
@@ -2455,18 +2440,18 @@ class N extends HTMLElement {
|
|
|
2455
2440
|
}
|
|
2456
2441
|
// #endregion
|
|
2457
2442
|
constructor() {
|
|
2458
|
-
super(), this.#n = this.attachShadow({ mode: "open" }), this.#
|
|
2443
|
+
super(), this.#n = this.attachShadow({ mode: "open" }), this.#le(), this.#Y = new Promise((e) => this.#j = e), this.#i = Xt(this.#e, {
|
|
2459
2444
|
getShadow: () => this.#n,
|
|
2460
|
-
getShellConfig: () => this.#
|
|
2445
|
+
getShellConfig: () => this.#o?.shell,
|
|
2461
2446
|
getAccordionIcons: () => ({
|
|
2462
|
-
expand: this.#
|
|
2463
|
-
collapse: this.#
|
|
2447
|
+
expand: this.#o?.icons?.expand ?? O.expand,
|
|
2448
|
+
collapse: this.#o?.icons?.collapse ?? O.collapse
|
|
2464
2449
|
}),
|
|
2465
|
-
emit: (e, o) => this.#
|
|
2450
|
+
emit: (e, o) => this.#B(e, o),
|
|
2466
2451
|
refreshShellHeader: () => this.refreshShellHeader()
|
|
2467
2452
|
});
|
|
2468
2453
|
}
|
|
2469
|
-
async #
|
|
2454
|
+
async #le() {
|
|
2470
2455
|
const e = new CSSStyleSheet();
|
|
2471
2456
|
if (de.length > 0) {
|
|
2472
2457
|
e.replaceSync(de), this.#n.adoptedStyleSheets = [e];
|
|
@@ -2477,10 +2462,10 @@ class N extends HTMLElement {
|
|
|
2477
2462
|
let o = "";
|
|
2478
2463
|
for (const n of Array.from(document.styleSheets))
|
|
2479
2464
|
try {
|
|
2480
|
-
const
|
|
2465
|
+
const r = Array.from(n.cssRules || []).map((l) => l.cssText).join(`
|
|
2481
2466
|
`);
|
|
2482
|
-
if (
|
|
2483
|
-
o =
|
|
2467
|
+
if (r.includes(".tbw-grid-root") && r.includes(":host")) {
|
|
2468
|
+
o = r;
|
|
2484
2469
|
break;
|
|
2485
2470
|
}
|
|
2486
2471
|
} catch {
|
|
@@ -2502,7 +2487,7 @@ class N extends HTMLElement {
|
|
|
2502
2487
|
* @internal Plugin API
|
|
2503
2488
|
*/
|
|
2504
2489
|
getPlugin(e) {
|
|
2505
|
-
return this.#
|
|
2490
|
+
return this.#t?.getPlugin(e);
|
|
2506
2491
|
}
|
|
2507
2492
|
/**
|
|
2508
2493
|
* Get a plugin instance by its name.
|
|
@@ -2510,7 +2495,7 @@ class N extends HTMLElement {
|
|
|
2510
2495
|
* @internal Plugin API
|
|
2511
2496
|
*/
|
|
2512
2497
|
getPluginByName(e) {
|
|
2513
|
-
return this.#
|
|
2498
|
+
return this.#t?.getPluginByName(e);
|
|
2514
2499
|
}
|
|
2515
2500
|
/**
|
|
2516
2501
|
* Request a full re-render of the grid.
|
|
@@ -2519,7 +2504,7 @@ class N extends HTMLElement {
|
|
|
2519
2504
|
* @internal Plugin API
|
|
2520
2505
|
*/
|
|
2521
2506
|
requestRender() {
|
|
2522
|
-
this.#
|
|
2507
|
+
this.#P(), this.#L(), F(this), z(this), this.refreshVirtualWindow(!0);
|
|
2523
2508
|
}
|
|
2524
2509
|
/**
|
|
2525
2510
|
* Update the grid's column template CSS.
|
|
@@ -2536,23 +2521,23 @@ class N extends HTMLElement {
|
|
|
2536
2521
|
* @internal Plugin API
|
|
2537
2522
|
*/
|
|
2538
2523
|
requestAfterRender() {
|
|
2539
|
-
this.#
|
|
2524
|
+
this.#t?.afterRender();
|
|
2540
2525
|
}
|
|
2541
2526
|
/**
|
|
2542
2527
|
* Initialize plugin system with instances from config.
|
|
2543
2528
|
* Plugins are class instances passed in gridConfig.plugins[].
|
|
2544
2529
|
*/
|
|
2545
|
-
#
|
|
2546
|
-
this.#
|
|
2547
|
-
const e = this.#
|
|
2548
|
-
this.#
|
|
2530
|
+
#Z() {
|
|
2531
|
+
this.#t = new no(this);
|
|
2532
|
+
const e = this.#o?.plugins, o = Array.isArray(e) ? e : [];
|
|
2533
|
+
this.#t.attachAll(o);
|
|
2549
2534
|
}
|
|
2550
2535
|
/**
|
|
2551
2536
|
* Inject all plugin styles into the shadow DOM.
|
|
2552
2537
|
* Must be called after #render() since innerHTML wipes existing content.
|
|
2553
2538
|
*/
|
|
2554
|
-
#
|
|
2555
|
-
const e = this.#
|
|
2539
|
+
#J() {
|
|
2540
|
+
const e = this.#t?.getAllStyles() ?? "";
|
|
2556
2541
|
if (e) {
|
|
2557
2542
|
const o = document.createElement("style");
|
|
2558
2543
|
o.setAttribute("data-plugin", "all"), o.textContent = e, this.#n.appendChild(o);
|
|
@@ -2562,34 +2547,46 @@ class N extends HTMLElement {
|
|
|
2562
2547
|
* Update plugins when grid config changes.
|
|
2563
2548
|
* With class-based plugins, we need to detach old and attach new.
|
|
2564
2549
|
*/
|
|
2565
|
-
#
|
|
2566
|
-
this.#
|
|
2550
|
+
#Q() {
|
|
2551
|
+
this.#t && this.#t.detachAll();
|
|
2552
|
+
for (const e of this.#e.toolPanels.keys()) {
|
|
2553
|
+
const o = this.#e.lightDomToolPanelIds.has(e), n = this.#e.apiToolPanelIds.has(e);
|
|
2554
|
+
if (!o && !n) {
|
|
2555
|
+
const i = this.#e.panelCleanups.get(e);
|
|
2556
|
+
i && (i(), this.#e.panelCleanups.delete(e)), this.#e.toolPanels.delete(e);
|
|
2557
|
+
}
|
|
2558
|
+
}
|
|
2559
|
+
for (const e of this.#e.headerContents.keys()) {
|
|
2560
|
+
const o = this.#e.headerContentCleanups.get(e);
|
|
2561
|
+
o && (o(), this.#e.headerContentCleanups.delete(e)), this.#e.headerContents.delete(e);
|
|
2562
|
+
}
|
|
2563
|
+
this.#Z(), this.#J(), this.#ee(), this.#R = this.#t?.getAll().some((e) => e.onScroll) ?? !1;
|
|
2567
2564
|
}
|
|
2568
2565
|
/**
|
|
2569
2566
|
* Clean up plugin states when grid disconnects.
|
|
2570
2567
|
*/
|
|
2571
|
-
#
|
|
2572
|
-
this.#
|
|
2568
|
+
#se() {
|
|
2569
|
+
this.#t?.detachAll();
|
|
2573
2570
|
}
|
|
2574
2571
|
/**
|
|
2575
2572
|
* Collect tool panels and header content from all plugins.
|
|
2576
2573
|
* Called after plugins are attached but before render.
|
|
2577
2574
|
*/
|
|
2578
|
-
#
|
|
2579
|
-
if (!this.#
|
|
2580
|
-
const e = this.#
|
|
2575
|
+
#ee() {
|
|
2576
|
+
if (!this.#t) return;
|
|
2577
|
+
const e = this.#t.getToolPanels();
|
|
2581
2578
|
for (const { panel: n } of e)
|
|
2582
|
-
this.#
|
|
2583
|
-
const o = this.#
|
|
2579
|
+
this.#e.toolPanels.has(n.id) || this.#e.toolPanels.set(n.id, n);
|
|
2580
|
+
const o = this.#t.getHeaderContents();
|
|
2584
2581
|
for (const { content: n } of o)
|
|
2585
|
-
this.#
|
|
2582
|
+
this.#e.headerContents.has(n.id) || this.#e.headerContents.set(n.id, n);
|
|
2586
2583
|
}
|
|
2587
2584
|
/**
|
|
2588
2585
|
* Gets a renderer factory for tool panels from registered framework adapters.
|
|
2589
2586
|
* Returns a factory function that tries each adapter in order until one handles the element.
|
|
2590
2587
|
*/
|
|
2591
|
-
#
|
|
2592
|
-
const e =
|
|
2588
|
+
#b() {
|
|
2589
|
+
const e = I.getAdapters();
|
|
2593
2590
|
if (e.length === 0 && !this.__frameworkAdapter) return;
|
|
2594
2591
|
const o = this.__frameworkAdapter;
|
|
2595
2592
|
return (n) => {
|
|
@@ -2599,25 +2596,25 @@ class N extends HTMLElement {
|
|
|
2599
2596
|
}
|
|
2600
2597
|
for (const i of e)
|
|
2601
2598
|
if (i.createToolPanelRenderer) {
|
|
2602
|
-
const
|
|
2603
|
-
if (
|
|
2599
|
+
const r = i.createToolPanelRenderer(n);
|
|
2600
|
+
if (r) return r;
|
|
2604
2601
|
}
|
|
2605
2602
|
};
|
|
2606
2603
|
}
|
|
2607
2604
|
// ---------------- Lifecycle ----------------
|
|
2608
2605
|
connectedCallback() {
|
|
2609
|
-
this.hasAttribute("tabindex") || (this.tabIndex = 0), this.hasAttribute("version") || this.setAttribute("version",
|
|
2606
|
+
this.hasAttribute("tabindex") || (this.tabIndex = 0), this.hasAttribute("version") || this.setAttribute("version", I.version), this._rows = Array.isArray(this.#l) ? [...this.#l] : [], this.#s && (this.#s.abort(), this.#x = !1), this.#s = new AbortController(), this.#u && (_e(this.#u), this.#u = void 0), B(this, this.#e), W(this, this.#e), V(this, this.#e, this.#b()), this.#r(), this.#Z(), this.#ee(), this.#H || (this.#U(), this.#J(), this.#H = !0), this.#I(), this.#u = zt(
|
|
2610
2607
|
() => {
|
|
2611
|
-
this.#
|
|
2608
|
+
this.#Se();
|
|
2612
2609
|
},
|
|
2613
2610
|
{ timeout: 100 }
|
|
2614
2611
|
);
|
|
2615
2612
|
}
|
|
2616
2613
|
disconnectedCallback() {
|
|
2617
|
-
this.#
|
|
2614
|
+
this.#u && (_e(this.#u), this.#u = void 0), this.#se(), Ut(this.#e), this.#i.setInitialized(!1), this.#A?.(), this.#A = void 0, $e(this.#K), this.#s && (this.#s.abort(), this.#s = void 0), this.#v?.abort(), this.#v = void 0, this.#x = !1, this._resizeController && this._resizeController.dispose(), this.#p && (this.#p.disconnect(), this.#p = void 0), this.#w && (this.#w.disconnect(), this.#w = void 0, this.#q = !1), this.#d && (this.#d.disconnect(), this.#d = void 0), Y(this), this._rowEditSnapshots.clear(), this._changedRowIndices.clear(), this.#C.clear();
|
|
2618
2615
|
for (const e of this._rowPool)
|
|
2619
2616
|
e.remove();
|
|
2620
|
-
this._rowPool.length = 0, this.__rowsBodyEl = null, this
|
|
2617
|
+
this._rowPool.length = 0, this.__rowsBodyEl = null, this.#M = !1;
|
|
2621
2618
|
}
|
|
2622
2619
|
/**
|
|
2623
2620
|
* Handle HTML attribute changes.
|
|
@@ -2626,116 +2623,116 @@ class N extends HTMLElement {
|
|
|
2626
2623
|
*/
|
|
2627
2624
|
attributeChangedCallback(e, o, n) {
|
|
2628
2625
|
if (o === n || !n || n === "null" || n === "undefined") return;
|
|
2629
|
-
const
|
|
2626
|
+
const r = {
|
|
2630
2627
|
rows: "rows",
|
|
2631
2628
|
columns: "columns",
|
|
2632
2629
|
"grid-config": "gridConfig",
|
|
2633
2630
|
"fit-mode": "fitMode",
|
|
2634
2631
|
"edit-on": "editOn"
|
|
2635
2632
|
}[e];
|
|
2636
|
-
if (
|
|
2633
|
+
if (r)
|
|
2637
2634
|
if (e === "rows" || e === "columns" || e === "grid-config")
|
|
2638
2635
|
try {
|
|
2639
|
-
this[
|
|
2636
|
+
this[r] = JSON.parse(n);
|
|
2640
2637
|
} catch {
|
|
2641
2638
|
console.warn(`[tbw-grid] Invalid JSON for '${e}' attribute:`, n);
|
|
2642
2639
|
}
|
|
2643
2640
|
else
|
|
2644
|
-
this[
|
|
2641
|
+
this[r] = n;
|
|
2645
2642
|
}
|
|
2646
|
-
#
|
|
2643
|
+
#I() {
|
|
2647
2644
|
const o = this.#n.querySelector(".tbw-grid-content") ?? this.#n.querySelector(".tbw-grid-root");
|
|
2648
|
-
if (this._headerRowEl = o?.querySelector(".header-row"), this._virtualization.totalHeightEl = o?.querySelector(".faux-vscroll-spacer"), this._virtualization.viewportEl = o?.querySelector(".rows-viewport"), this._bodyEl = o?.querySelector(".rows"), this.__rowsBodyEl = o?.querySelector(".rows-body"), this
|
|
2649
|
-
|
|
2650
|
-
const
|
|
2651
|
-
|
|
2645
|
+
if (this._headerRowEl = o?.querySelector(".header-row"), this._virtualization.totalHeightEl = o?.querySelector(".faux-vscroll-spacer"), this._virtualization.viewportEl = o?.querySelector(".rows-viewport"), this._bodyEl = o?.querySelector(".rows"), this.__rowsBodyEl = o?.querySelector(".rows-body"), this.#i.isInitialized) {
|
|
2646
|
+
Ve(this.#n, this.#e), $t(this.#n, this.#o?.shell, this.#e);
|
|
2647
|
+
const r = this.#o?.shell?.toolPanel?.defaultOpen;
|
|
2648
|
+
r && this.#e.toolPanels.has(r) && (this.openToolPanel(), this.#e.expandedSections.add(r));
|
|
2652
2649
|
}
|
|
2653
|
-
if (this.setAttribute("data-upgraded", ""), this.#
|
|
2650
|
+
if (this.setAttribute("data-upgraded", ""), this.#M = !0, this._resizeController = Nt(this), this.#a(), this.#ae(o), this.#x)
|
|
2654
2651
|
return;
|
|
2655
2652
|
this.#x = !0;
|
|
2656
2653
|
const n = this.disconnectSignal;
|
|
2657
|
-
this.addEventListener("keydown", (
|
|
2654
|
+
this.addEventListener("keydown", (r) => wt(this, r), { signal: n }), document.addEventListener(
|
|
2658
2655
|
"keydown",
|
|
2659
|
-
(
|
|
2660
|
-
|
|
2656
|
+
(r) => {
|
|
2657
|
+
r.key === "Escape" && this._activeEditRows !== -1 && D(this, this._activeEditRows, !0);
|
|
2661
2658
|
},
|
|
2662
2659
|
{ capture: !0, signal: n }
|
|
2663
2660
|
), document.addEventListener(
|
|
2664
2661
|
"mousedown",
|
|
2665
|
-
(
|
|
2662
|
+
(r) => {
|
|
2666
2663
|
if (this._activeEditRows === -1) return;
|
|
2667
|
-
const
|
|
2668
|
-
!
|
|
2664
|
+
const l = this.findRenderedRowElement(this._activeEditRows);
|
|
2665
|
+
!l || (r.composedPath && r.composedPath() || []).includes(l) || D(this, this._activeEditRows, !1);
|
|
2669
2666
|
},
|
|
2670
2667
|
{ signal: n }
|
|
2671
|
-
), this.#n.addEventListener("mousedown", (
|
|
2672
|
-
const i = this.#
|
|
2673
|
-
i && i > 0 ? this._virtualization.rowHeight = i : requestAnimationFrame(() => this.#
|
|
2668
|
+
), this.#n.addEventListener("mousedown", (r) => this.#_e(r), { signal: n }), document.addEventListener("mousemove", (r) => this.#Ce(r), { signal: n }), document.addEventListener("mouseup", (r) => this.#Ee(r), { signal: n });
|
|
2669
|
+
const i = this.#o.rowHeight;
|
|
2670
|
+
i && i > 0 ? this._virtualization.rowHeight = i : requestAnimationFrame(() => this.#te()), queueMicrotask(() => this.#de()), requestAnimationFrame(() => requestAnimationFrame(() => this.#j?.()));
|
|
2674
2671
|
}
|
|
2675
2672
|
/**
|
|
2676
2673
|
* Measure actual row height from DOM.
|
|
2677
2674
|
* Finds the tallest cell to account for custom renderers that may push height.
|
|
2678
2675
|
*/
|
|
2679
|
-
#
|
|
2676
|
+
#te() {
|
|
2680
2677
|
const e = this._bodyEl?.querySelector(".data-grid-row");
|
|
2681
2678
|
if (!e) return;
|
|
2682
2679
|
const o = e.querySelectorAll(".cell");
|
|
2683
2680
|
let n = 0;
|
|
2684
|
-
o.forEach((
|
|
2685
|
-
const s =
|
|
2681
|
+
o.forEach((l) => {
|
|
2682
|
+
const s = l.offsetHeight;
|
|
2686
2683
|
s > n && (n = s);
|
|
2687
2684
|
});
|
|
2688
|
-
const i = e.getBoundingClientRect(),
|
|
2689
|
-
|
|
2685
|
+
const i = e.getBoundingClientRect(), r = Math.max(i.height, n);
|
|
2686
|
+
r > 0 && r !== this._virtualization.rowHeight && (this._virtualization.rowHeight = r, this.refreshVirtualWindow(!0));
|
|
2690
2687
|
}
|
|
2691
2688
|
/**
|
|
2692
2689
|
* Set up scroll-related event listeners on DOM elements.
|
|
2693
2690
|
* These need to be re-attached when the DOM is recreated (e.g., shell toggle).
|
|
2694
2691
|
* Uses a separate AbortController that is recreated each time.
|
|
2695
2692
|
*/
|
|
2696
|
-
#
|
|
2693
|
+
#ae(e) {
|
|
2697
2694
|
this.#v?.abort(), this.#v = new AbortController();
|
|
2698
2695
|
const o = this.#v.signal, n = e?.querySelector(".faux-vscroll"), i = e?.querySelector(".rows");
|
|
2699
|
-
if (this._virtualization.container = n ?? this, this.#
|
|
2696
|
+
if (this._virtualization.container = n ?? this, this.#R = this.#t?.getAll().some((r) => r.onScroll) ?? !1, n && i) {
|
|
2700
2697
|
n.addEventListener(
|
|
2701
2698
|
"scroll",
|
|
2702
2699
|
() => {
|
|
2703
|
-
if (!this._virtualization.enabled && !this.#
|
|
2700
|
+
if (!this._virtualization.enabled && !this.#R) return;
|
|
2704
2701
|
const s = n.scrollTop, a = this._virtualization.rowHeight;
|
|
2705
2702
|
if (this._rows.length <= this._virtualization.bypassThreshold)
|
|
2706
2703
|
i.style.transform = `translateY(${-s}px)`;
|
|
2707
2704
|
else {
|
|
2708
|
-
const c = Math.floor(s / a),
|
|
2705
|
+
const c = Math.floor(s / a), f = c - c % 2, d = -(s - f * a);
|
|
2709
2706
|
i.style.transform = `translateY(${d}px)`;
|
|
2710
2707
|
}
|
|
2711
|
-
this.#
|
|
2712
|
-
this.#
|
|
2708
|
+
this.#S = s, this.#f || (this.#f = requestAnimationFrame(() => {
|
|
2709
|
+
this.#f = 0, this.#S !== null && (this.#ve(this.#S), this.#S = null);
|
|
2713
2710
|
}));
|
|
2714
2711
|
},
|
|
2715
2712
|
{ passive: !0, signal: o }
|
|
2716
2713
|
);
|
|
2717
|
-
const
|
|
2718
|
-
|
|
2714
|
+
const r = this.#n.querySelector(".tbw-grid-content"), l = this.#n.querySelector(".tbw-scroll-area");
|
|
2715
|
+
r && (r.addEventListener(
|
|
2719
2716
|
"wheel",
|
|
2720
2717
|
(s) => {
|
|
2721
2718
|
const a = s.shiftKey || Math.abs(s.deltaX) > Math.abs(s.deltaY);
|
|
2722
|
-
if (a &&
|
|
2723
|
-
const c = s.shiftKey ? s.deltaY : s.deltaX, { scrollLeft:
|
|
2724
|
-
(c > 0 &&
|
|
2719
|
+
if (a && l) {
|
|
2720
|
+
const c = s.shiftKey ? s.deltaY : s.deltaX, { scrollLeft: f, scrollWidth: d, clientWidth: u } = l;
|
|
2721
|
+
(c > 0 && f < d - u || c < 0 && f > 0) && (s.preventDefault(), l.scrollLeft += c);
|
|
2725
2722
|
} else if (!a) {
|
|
2726
|
-
const { scrollTop: c, scrollHeight:
|
|
2727
|
-
(s.deltaY > 0 && c <
|
|
2723
|
+
const { scrollTop: c, scrollHeight: f, clientHeight: d } = n;
|
|
2724
|
+
(s.deltaY > 0 && c < f - d || s.deltaY < 0 && c > 0) && (s.preventDefault(), n.scrollTop += s.deltaY);
|
|
2728
2725
|
}
|
|
2729
2726
|
},
|
|
2730
2727
|
{ passive: !1, signal: o }
|
|
2731
|
-
),
|
|
2728
|
+
), oo(r, this.#K, { fauxScrollbar: n, scrollArea: l }, o));
|
|
2732
2729
|
}
|
|
2733
|
-
this._bodyEl &&
|
|
2734
|
-
this.#
|
|
2735
|
-
this.#
|
|
2730
|
+
this._bodyEl && Mt(this, this._bodyEl, o), this.#p?.disconnect(), this._virtualization.viewportEl && (this.#p = new ResizeObserver(() => {
|
|
2731
|
+
this.#f || (this.#f = requestAnimationFrame(() => {
|
|
2732
|
+
this.#f = 0, this.refreshVirtualWindow(!0), k(this);
|
|
2736
2733
|
}));
|
|
2737
|
-
}), this.#
|
|
2738
|
-
this.refreshVirtualWindow(!0), this.#
|
|
2734
|
+
}), this.#p.observe(this._virtualization.viewportEl)), this._virtualization.enabled && requestAnimationFrame(() => {
|
|
2735
|
+
this.refreshVirtualWindow(!0), this.#ce();
|
|
2739
2736
|
});
|
|
2740
2737
|
}
|
|
2741
2738
|
/**
|
|
@@ -2743,43 +2740,28 @@ class N extends HTMLElement {
|
|
|
2743
2740
|
* Called after rows are rendered to observe the actual content cells.
|
|
2744
2741
|
* Handles dynamic CSS loading, lazy images, font loading, etc.
|
|
2745
2742
|
*/
|
|
2746
|
-
#
|
|
2743
|
+
#q = !1;
|
|
2747
2744
|
// Only set up once per lifecycle
|
|
2748
|
-
#
|
|
2749
|
-
if (this.#
|
|
2745
|
+
#ce() {
|
|
2746
|
+
if (this.#q) return;
|
|
2750
2747
|
const e = this._bodyEl?.querySelector(".data-grid-row");
|
|
2751
2748
|
if (!e) return;
|
|
2752
|
-
this.#
|
|
2749
|
+
this.#q = !0, this.#w?.disconnect();
|
|
2753
2750
|
const o = e.querySelectorAll(".cell");
|
|
2754
2751
|
o.length > 0 && (this.#w = new ResizeObserver(() => {
|
|
2755
|
-
this.#
|
|
2752
|
+
this.#te();
|
|
2756
2753
|
}), o.forEach((n) => this.#w.observe(n)));
|
|
2757
2754
|
}
|
|
2758
2755
|
// ---------------- Event Emitters ----------------
|
|
2759
|
-
#
|
|
2756
|
+
#B(e, o) {
|
|
2760
2757
|
this.dispatchEvent(new CustomEvent(e, { detail: o, bubbles: !0, composed: !0 }));
|
|
2761
2758
|
}
|
|
2762
|
-
_emitCellCommit(e) {
|
|
2763
|
-
this.#d("cell-commit", e);
|
|
2764
|
-
}
|
|
2765
|
-
_emitRowCommit(e) {
|
|
2766
|
-
this.#d("row-commit", e);
|
|
2767
|
-
}
|
|
2768
|
-
_emitSortChange(e) {
|
|
2769
|
-
this.#d("sort-change", e);
|
|
2770
|
-
}
|
|
2771
|
-
_emitColumnResize(e) {
|
|
2772
|
-
this.#d("column-resize", e);
|
|
2773
|
-
}
|
|
2774
|
-
_emitActivateCell(e) {
|
|
2775
|
-
this.#d("activate-cell", e);
|
|
2776
|
-
}
|
|
2777
2759
|
/** Update ARIA selection attributes on rendered rows/cells */
|
|
2778
|
-
#
|
|
2760
|
+
#de() {
|
|
2779
2761
|
this._bodyEl?.querySelectorAll(".data-grid-row")?.forEach((o, n) => {
|
|
2780
2762
|
const i = n === this._focusRow;
|
|
2781
|
-
o.setAttribute("aria-selected", String(i)), o.querySelectorAll(".cell").forEach((
|
|
2782
|
-
|
|
2763
|
+
o.setAttribute("aria-selected", String(i)), o.querySelectorAll(".cell").forEach((r, l) => {
|
|
2764
|
+
r.setAttribute("aria-selected", String(i && l === this._focusCol));
|
|
2783
2765
|
});
|
|
2784
2766
|
});
|
|
2785
2767
|
}
|
|
@@ -2790,71 +2772,83 @@ class N extends HTMLElement {
|
|
|
2790
2772
|
* Queue an update for a specific property type.
|
|
2791
2773
|
* All updates queued within the same microtask are batched together.
|
|
2792
2774
|
*/
|
|
2793
|
-
#
|
|
2794
|
-
this.#
|
|
2775
|
+
#_(e) {
|
|
2776
|
+
this.#O[e] = !0, !this.#m && (this.#m = !0, queueMicrotask(() => this.#ue()));
|
|
2795
2777
|
}
|
|
2796
2778
|
/**
|
|
2797
2779
|
* Process all pending updates in optimal order.
|
|
2798
2780
|
* Priority: gridConfig first (may affect all), then columns, rows, fitMode, editMode
|
|
2799
2781
|
*/
|
|
2800
|
-
#
|
|
2801
|
-
if (!this.#m || !this.#
|
|
2782
|
+
#ue() {
|
|
2783
|
+
if (!this.#m || !this.#M) {
|
|
2802
2784
|
this.#m = !1;
|
|
2803
2785
|
return;
|
|
2804
2786
|
}
|
|
2805
|
-
const e = this.#
|
|
2806
|
-
if (this.#m = !1, this.#
|
|
2787
|
+
const e = this.#O;
|
|
2788
|
+
if (this.#m = !1, this.#O = {
|
|
2807
2789
|
rows: !1,
|
|
2808
2790
|
columns: !1,
|
|
2809
2791
|
gridConfig: !1,
|
|
2810
2792
|
fitMode: !1,
|
|
2811
2793
|
editMode: !1
|
|
2812
2794
|
}, e.gridConfig) {
|
|
2813
|
-
this.#
|
|
2795
|
+
this.#be();
|
|
2814
2796
|
return;
|
|
2815
2797
|
}
|
|
2816
|
-
e.columns && this.#
|
|
2798
|
+
e.columns && this.#fe(), e.rows && this.#he(), e.fitMode && this.#pe(), e.editMode && this.#we();
|
|
2817
2799
|
}
|
|
2818
2800
|
// Individual update applicators - these do the actual work
|
|
2819
|
-
#
|
|
2820
|
-
this._rows = Array.isArray(this.#
|
|
2801
|
+
#he() {
|
|
2802
|
+
this._rows = Array.isArray(this.#l) ? [...this.#l] : [], this.#P(), this._columns.length > 0 || Array.isArray(this.#o?.columns) && this.#o.columns.length > 0 || Array.isArray(this.#c) && this.#c.length > 0 ? (this.#L(), this.refreshVirtualWindow(!0)) : this.#a();
|
|
2821
2803
|
}
|
|
2822
|
-
#
|
|
2823
|
-
|
|
2804
|
+
#fe() {
|
|
2805
|
+
Y(this), this.#r(), this.#a();
|
|
2824
2806
|
}
|
|
2825
|
-
#
|
|
2826
|
-
this.#
|
|
2807
|
+
#pe() {
|
|
2808
|
+
this.#r(), this.#o.fitMode === "fixed" ? (this.__didInitialAutoSize = !1, we(this)) : (this._columns.forEach((o) => {
|
|
2827
2809
|
!o.__userResized && o.__autoSized && delete o.width;
|
|
2828
2810
|
}), z(this));
|
|
2829
2811
|
}
|
|
2830
|
-
#
|
|
2831
|
-
this.#
|
|
2812
|
+
#we() {
|
|
2813
|
+
this.#r(), this._rowPool.length = 0, this._bodyEl && (this._bodyEl.innerHTML = ""), this.__rowRenderEpoch++, this.refreshVirtualWindow(!0);
|
|
2832
2814
|
}
|
|
2833
|
-
#
|
|
2834
|
-
|
|
2835
|
-
|
|
2836
|
-
|
|
2837
|
-
|
|
2838
|
-
|
|
2815
|
+
#be() {
|
|
2816
|
+
B(this, this.#e), W(this, this.#e);
|
|
2817
|
+
const e = !!this.#n.querySelector(".has-shell"), o = !!this.#n.querySelector(".tbw-tool-panel"), n = this.#n.querySelectorAll(".tbw-accordion-section").length;
|
|
2818
|
+
pe(this), this.#r(), this.#Q(), V(this, this.#e, this.#b());
|
|
2819
|
+
const i = We(this.#o, this.#e), r = this.#e.toolPanels.size > 0, l = this.#e.toolPanels.size !== n;
|
|
2820
|
+
if (e !== i || !e && i || !o && r || o && l) {
|
|
2821
|
+
this.#U(), this.#I();
|
|
2839
2822
|
return;
|
|
2840
2823
|
}
|
|
2841
|
-
this.#
|
|
2824
|
+
e && this.#ge(), this.#P(), this.#L(), F(this), z(this), this.refreshVirtualWindow(!0);
|
|
2825
|
+
}
|
|
2826
|
+
/**
|
|
2827
|
+
* Update the shell header DOM in place without a full re-render.
|
|
2828
|
+
* Handles title, toolbar buttons, and other shell header changes.
|
|
2829
|
+
*/
|
|
2830
|
+
#ge() {
|
|
2831
|
+
const e = this.#n.querySelector(".tbw-shell-header");
|
|
2832
|
+
if (!e) return;
|
|
2833
|
+
const o = this.#o.shell?.header?.title ?? this.#e.lightDomTitle;
|
|
2834
|
+
let n = e.querySelector(".tbw-shell-title");
|
|
2835
|
+
o ? (n || (n = document.createElement("h2"), n.className = "tbw-shell-title", n.setAttribute("part", "shell-title"), e.insertBefore(n, e.firstChild)), n.textContent = o) : n && n.remove();
|
|
2842
2836
|
}
|
|
2843
2837
|
// NOTE: Legacy watch handlers have been replaced by the batched update system.
|
|
2844
2838
|
// The #queueUpdate() method schedules updates which are processed by #flushPendingUpdates()
|
|
2845
2839
|
// and individual #apply*Update() methods. This coalesces rapid property changes
|
|
2846
2840
|
// (e.g., setting rows, columns, gridConfig in quick succession) into a single update cycle.
|
|
2847
|
-
#
|
|
2848
|
-
if (this.#
|
|
2849
|
-
const e = this.#N.length > 0 ? this.#N : this._columns, o = e.filter((
|
|
2841
|
+
#L() {
|
|
2842
|
+
if (this.#t) {
|
|
2843
|
+
const e = this.#N.length > 0 ? this.#N : this._columns, o = e.filter((r) => !r.hidden), n = e.filter((r) => r.hidden), i = this.#t.processColumns([...o]);
|
|
2850
2844
|
if (i !== o) {
|
|
2851
|
-
const
|
|
2852
|
-
if (!o.some((s) =>
|
|
2845
|
+
const r = new Map(i.map((s, a) => [s.field, { col: s, order: a }]));
|
|
2846
|
+
if (!o.some((s) => r.has(s.field)) && i.length > 0)
|
|
2853
2847
|
this._columns = [...i, ...n];
|
|
2854
2848
|
else {
|
|
2855
2849
|
const s = e.map((a) => {
|
|
2856
2850
|
if (a.hidden) return a;
|
|
2857
|
-
const c =
|
|
2851
|
+
const c = r.get(a.field);
|
|
2858
2852
|
return c ? c.col : a;
|
|
2859
2853
|
});
|
|
2860
2854
|
this._columns = s;
|
|
@@ -2864,9 +2858,9 @@ class N extends HTMLElement {
|
|
|
2864
2858
|
}
|
|
2865
2859
|
}
|
|
2866
2860
|
/** Recompute row model via plugin hooks. */
|
|
2867
|
-
#
|
|
2868
|
-
|
|
2869
|
-
const e = Array.isArray(this.#
|
|
2861
|
+
#P() {
|
|
2862
|
+
Y(this);
|
|
2863
|
+
const e = Array.isArray(this.#l) ? [...this.#l] : [], o = this.#t?.processRows(e) ?? e;
|
|
2870
2864
|
this._rows = o;
|
|
2871
2865
|
}
|
|
2872
2866
|
/**
|
|
@@ -2887,7 +2881,7 @@ class N extends HTMLElement {
|
|
|
2887
2881
|
* - `_columns` is NOT set here (done by #getColumnConfiguration + #processColumns)
|
|
2888
2882
|
* - Plugins receive config via their attach() method
|
|
2889
2883
|
*/
|
|
2890
|
-
#
|
|
2884
|
+
#r() {
|
|
2891
2885
|
const e = this.#g ? { ...this.#g } : {};
|
|
2892
2886
|
let o = Array.isArray(e.columns) ? [...e.columns] : [];
|
|
2893
2887
|
const n = (this.__lightDomColumnsCache || []).map((i) => ({
|
|
@@ -2895,42 +2889,62 @@ class N extends HTMLElement {
|
|
|
2895
2889
|
}));
|
|
2896
2890
|
if (n.length) {
|
|
2897
2891
|
const i = {};
|
|
2898
|
-
o.forEach((
|
|
2899
|
-
const
|
|
2900
|
-
|
|
2892
|
+
o.forEach((r) => i[r.field] = r), n.forEach((r) => {
|
|
2893
|
+
const l = i[r.field];
|
|
2894
|
+
if (!l)
|
|
2895
|
+
o.push(r), i[r.field] = r;
|
|
2896
|
+
else {
|
|
2897
|
+
r.header && !l.header && (l.header = r.header), r.type && !l.type && (l.type = r.type), l.sortable = l.sortable || r.sortable, r.resizable && (l.resizable = !0), r.editable && (l.editable = !0);
|
|
2898
|
+
const s = r.renderer || r.viewRenderer, a = l.renderer || l.viewRenderer;
|
|
2899
|
+
s && !a && (l.viewRenderer = s, r.renderer && (l.renderer = s)), r.editor && !l.editor && (l.editor = r.editor);
|
|
2900
|
+
}
|
|
2901
2901
|
});
|
|
2902
2902
|
}
|
|
2903
2903
|
if (this.#c && this.#c.length && (o = [...this.#c]), (!o || o.length === 0) && this._rows.length && (o = Le(this._rows).columns), o.length) {
|
|
2904
|
-
o.forEach((
|
|
2905
|
-
|
|
2906
|
-
const s =
|
|
2907
|
-
s.__originalWidth === void 0 && typeof
|
|
2904
|
+
o.forEach((l) => {
|
|
2905
|
+
l.sortable === void 0 && (l.sortable = !0), l.resizable === void 0 && (l.resizable = !0);
|
|
2906
|
+
const s = l;
|
|
2907
|
+
s.__originalWidth === void 0 && typeof l.width == "number" && (s.__originalWidth = l.width);
|
|
2908
2908
|
});
|
|
2909
|
-
const i = this.#
|
|
2910
|
-
i?.some((
|
|
2909
|
+
const i = this.#o.columns;
|
|
2910
|
+
i?.some((l) => l.__compiledView || l.__compiledEditor) ? e.columns = i : e.columns = o;
|
|
2911
2911
|
} else {
|
|
2912
|
-
const i = this.#
|
|
2913
|
-
i?.some((
|
|
2912
|
+
const i = this.#o.columns;
|
|
2913
|
+
i?.some((r) => r.__compiledView || r.__compiledEditor) && (e.columns = i);
|
|
2914
2914
|
}
|
|
2915
|
-
this.#
|
|
2915
|
+
this.#E && (e.fitMode = this.#E), e.fitMode || (e.fitMode = "stretch"), this.#y && (e.editOn = this.#y), this.#e.lightDomTitle && (e.shell || (e.shell = {}), e.shell.header || (e.shell.header = {}), e.shell.header.title || (e.shell.header.title = this.#e.lightDomTitle)), e.rowHeight && e.rowHeight > 0 && (this._virtualization.rowHeight = e.rowHeight), e.columnState && !this.#h && (this.#h = e.columnState), this.#o = e, e.fitMode === "fixed" && this._columns.forEach((i) => {
|
|
2916
2916
|
i.width == null && (i.width = 80);
|
|
2917
|
-
}), this.#
|
|
2917
|
+
}), this.#me();
|
|
2918
2918
|
}
|
|
2919
2919
|
/**
|
|
2920
2920
|
* Apply animation configuration to CSS custom properties on the host element.
|
|
2921
2921
|
* This makes the grid's animation settings available to plugins via CSS variables.
|
|
2922
2922
|
*/
|
|
2923
|
-
#
|
|
2923
|
+
#me() {
|
|
2924
2924
|
const e = {
|
|
2925
|
-
...
|
|
2926
|
-
...this.#
|
|
2925
|
+
...Qe,
|
|
2926
|
+
...this.#o.animation
|
|
2927
2927
|
}, o = e.mode ?? "reduced-motion";
|
|
2928
2928
|
let n = 1;
|
|
2929
2929
|
o === !1 || o === "off" ? n = 0 : (o === !0 || o === "on") && (n = 1), this.style.setProperty("--tbw-animation-duration", `${e.duration}ms`), this.style.setProperty("--tbw-animation-easing", e.easing ?? "ease-out"), this.style.setProperty("--tbw-animation-enabled", String(n)), this.dataset.animationMode = typeof o == "boolean" ? o ? "on" : "off" : o;
|
|
2930
2930
|
}
|
|
2931
2931
|
// ---------------- Delegate Wrappers ----------------
|
|
2932
|
-
#
|
|
2933
|
-
this.#
|
|
2932
|
+
#W(e, o, n = this.__rowRenderEpoch) {
|
|
2933
|
+
this.#k || (this.#k = (i, r, l) => this.#t?.renderRow(i, r, l) ?? !1), _t(this, e, o, n, this.#k);
|
|
2934
|
+
}
|
|
2935
|
+
// Cache for ARIA counts to avoid redundant DOM writes on scroll (hot path)
|
|
2936
|
+
#V = -1;
|
|
2937
|
+
#oe = -1;
|
|
2938
|
+
/**
|
|
2939
|
+
* Updates ARIA row/col counts on the grid container.
|
|
2940
|
+
* Also sets role="rowgroup" on .rows container only when there are rows.
|
|
2941
|
+
* Uses caching to avoid redundant DOM writes on every scroll frame.
|
|
2942
|
+
*/
|
|
2943
|
+
#ne(e, o) {
|
|
2944
|
+
if (e === this.#V && o === this.#oe)
|
|
2945
|
+
return;
|
|
2946
|
+
const n = this.#V;
|
|
2947
|
+
this.#V = e, this.#oe = o, this.__rowsBodyEl && (this.__rowsBodyEl.setAttribute("aria-rowcount", String(e)), this.__rowsBodyEl.setAttribute("aria-colcount", String(o))), e !== n && this._bodyEl && (e > 0 ? this._bodyEl.setAttribute("role", "rowgroup") : this._bodyEl.removeAttribute("role"));
|
|
2934
2948
|
}
|
|
2935
2949
|
// ---------------- Core Helpers ----------------
|
|
2936
2950
|
#a() {
|
|
@@ -2938,31 +2952,31 @@ class N extends HTMLElement {
|
|
|
2938
2952
|
return;
|
|
2939
2953
|
const e = this.#g?.columns || this.#c || [];
|
|
2940
2954
|
if (e.length) {
|
|
2941
|
-
const n = new Map(this._columns.filter((
|
|
2942
|
-
...
|
|
2943
|
-
hidden: n.get(
|
|
2955
|
+
const n = new Map(this._columns.filter((r) => r.hidden).map((r) => [r.field, !0])), i = e.map((r) => ({
|
|
2956
|
+
...r,
|
|
2957
|
+
hidden: n.get(r.field) ?? r.hidden
|
|
2944
2958
|
}));
|
|
2945
2959
|
this._columns = i;
|
|
2946
2960
|
}
|
|
2947
|
-
if (pe(this), this.#
|
|
2948
|
-
const n = this.#
|
|
2949
|
-
this.#
|
|
2961
|
+
if (pe(this), this.#r(), this.#Q(), this.#N = [...this._columns], this.#P(), this.#L(), this.#h) {
|
|
2962
|
+
const n = this.#h;
|
|
2963
|
+
this.#h = void 0, this.#ie(n);
|
|
2950
2964
|
}
|
|
2951
|
-
|
|
2965
|
+
F(this), z(this), this.refreshVirtualWindow(!0), this.#o.fitMode === "fixed" && !this.__didInitialAutoSize && requestAnimationFrame(() => we(this)), this._bodyEl && (this._bodyEl.style.display = "", this._bodyEl.style.gridTemplateColumns = ""), queueMicrotask(() => this.#t?.afterRender());
|
|
2952
2966
|
}
|
|
2953
2967
|
/** Internal method to apply column state without triggering setup loop */
|
|
2954
|
-
#
|
|
2955
|
-
const o = this.#
|
|
2956
|
-
|
|
2968
|
+
#ie(e) {
|
|
2969
|
+
const o = this.#o.columns ?? [], n = this.#t?.getAll() ?? [];
|
|
2970
|
+
Ge(this, e, o, n);
|
|
2957
2971
|
for (const i of e.columns) {
|
|
2958
|
-
const
|
|
2959
|
-
|
|
2972
|
+
const r = o.find((l) => l.field === i.field);
|
|
2973
|
+
r && (r.hidden = !i.visible);
|
|
2960
2974
|
}
|
|
2961
2975
|
}
|
|
2962
|
-
#
|
|
2963
|
-
if (this.refreshVirtualWindow(!1), this.#
|
|
2964
|
-
const o = this._virtualization.container, n = this.#
|
|
2965
|
-
n.scrollTop = e, n.scrollLeft = o?.scrollLeft ?? 0, n.scrollHeight = o?.scrollHeight ?? 0, n.scrollWidth = o?.scrollWidth ?? 0, n.clientHeight = o?.clientHeight ?? 0, n.clientWidth = o?.clientWidth ?? 0, this.#
|
|
2976
|
+
#ve(e) {
|
|
2977
|
+
if (this.refreshVirtualWindow(!1), this.#t?.onScrollRender(), this.#R) {
|
|
2978
|
+
const o = this._virtualization.container, n = this.#re;
|
|
2979
|
+
n.scrollTop = e, n.scrollLeft = o?.scrollLeft ?? 0, n.scrollHeight = o?.scrollHeight ?? 0, n.scrollWidth = o?.scrollWidth ?? 0, n.clientHeight = o?.clientHeight ?? 0, n.clientWidth = o?.clientWidth ?? 0, this.#t?.onScroll(n);
|
|
2966
2980
|
}
|
|
2967
2981
|
}
|
|
2968
2982
|
/**
|
|
@@ -2991,18 +3005,18 @@ class N extends HTMLElement {
|
|
|
2991
3005
|
* Returns true if any plugin handled the event.
|
|
2992
3006
|
*/
|
|
2993
3007
|
_dispatchCellClick(e, o, n, i) {
|
|
2994
|
-
const
|
|
2995
|
-
if (!
|
|
3008
|
+
const r = this._rows[o], l = this._columns[n];
|
|
3009
|
+
if (!r || !l) return !1;
|
|
2996
3010
|
const s = {
|
|
2997
|
-
row:
|
|
3011
|
+
row: r,
|
|
2998
3012
|
rowIndex: o,
|
|
2999
3013
|
colIndex: n,
|
|
3000
|
-
field:
|
|
3001
|
-
value: l
|
|
3014
|
+
field: l.field,
|
|
3015
|
+
value: r[l.field],
|
|
3002
3016
|
cellEl: i,
|
|
3003
3017
|
originalEvent: e
|
|
3004
3018
|
};
|
|
3005
|
-
return this.#
|
|
3019
|
+
return this.#t?.onCellClick(s) ?? !1;
|
|
3006
3020
|
}
|
|
3007
3021
|
/**
|
|
3008
3022
|
* Dispatch a row click event to the plugin system.
|
|
@@ -3010,13 +3024,13 @@ class N extends HTMLElement {
|
|
|
3010
3024
|
*/
|
|
3011
3025
|
_dispatchRowClick(e, o, n, i) {
|
|
3012
3026
|
if (!n) return !1;
|
|
3013
|
-
const
|
|
3027
|
+
const r = {
|
|
3014
3028
|
rowIndex: o,
|
|
3015
3029
|
row: n,
|
|
3016
3030
|
rowEl: i,
|
|
3017
3031
|
originalEvent: e
|
|
3018
3032
|
};
|
|
3019
|
-
return this.#
|
|
3033
|
+
return this.#t?.onRowClick(r) ?? !1;
|
|
3020
3034
|
}
|
|
3021
3035
|
/**
|
|
3022
3036
|
* Dispatch a header click event to the plugin system.
|
|
@@ -3025,21 +3039,21 @@ class N extends HTMLElement {
|
|
|
3025
3039
|
_dispatchHeaderClick(e, o, n) {
|
|
3026
3040
|
const i = this._columns[o];
|
|
3027
3041
|
if (!i) return !1;
|
|
3028
|
-
const
|
|
3042
|
+
const r = {
|
|
3029
3043
|
colIndex: o,
|
|
3030
3044
|
field: i.field,
|
|
3031
3045
|
column: i,
|
|
3032
3046
|
headerEl: n,
|
|
3033
3047
|
originalEvent: e
|
|
3034
3048
|
};
|
|
3035
|
-
return this.#
|
|
3049
|
+
return this.#t?.onHeaderClick(r) ?? !1;
|
|
3036
3050
|
}
|
|
3037
3051
|
/**
|
|
3038
3052
|
* Dispatch a keyboard event to the plugin system.
|
|
3039
3053
|
* Returns true if any plugin handled the event.
|
|
3040
3054
|
*/
|
|
3041
3055
|
_dispatchKeyDown(e) {
|
|
3042
|
-
return this.#
|
|
3056
|
+
return this.#t?.onKeyDown(e) ?? !1;
|
|
3043
3057
|
}
|
|
3044
3058
|
/**
|
|
3045
3059
|
* Get horizontal scroll boundary offsets from plugins.
|
|
@@ -3047,7 +3061,7 @@ class N extends HTMLElement {
|
|
|
3047
3061
|
* when plugins like pinned columns obscure part of the scroll area.
|
|
3048
3062
|
*/
|
|
3049
3063
|
_getHorizontalScrollOffsets(e, o) {
|
|
3050
|
-
return this.#
|
|
3064
|
+
return this.#t?.getHorizontalScrollOffsets(e, o) ?? { left: 0, right: 0 };
|
|
3051
3065
|
}
|
|
3052
3066
|
/**
|
|
3053
3067
|
* Query all plugins with a generic query and collect responses.
|
|
@@ -3060,59 +3074,58 @@ class N extends HTMLElement {
|
|
|
3060
3074
|
* const canMove = !responses.includes(false);
|
|
3061
3075
|
*/
|
|
3062
3076
|
queryPlugins(e) {
|
|
3063
|
-
return this.#
|
|
3077
|
+
return this.#t?.queryPlugins(e) ?? [];
|
|
3064
3078
|
}
|
|
3065
3079
|
/**
|
|
3066
3080
|
* Build a CellMouseEvent from a native MouseEvent.
|
|
3067
3081
|
* Extracts cell/row information from the event target.
|
|
3068
3082
|
*/
|
|
3069
|
-
|
|
3083
|
+
#$(e, o) {
|
|
3070
3084
|
let n = null;
|
|
3071
3085
|
const i = e.composedPath?.();
|
|
3072
3086
|
if (i && i.length > 0 ? n = i[0] : n = e.target, n && !this.#n.contains(n)) {
|
|
3073
|
-
const
|
|
3074
|
-
|
|
3087
|
+
const h = this.#n.elementFromPoint(e.clientX, e.clientY);
|
|
3088
|
+
h && (n = h);
|
|
3075
3089
|
}
|
|
3076
|
-
const
|
|
3077
|
-
let a, c,
|
|
3078
|
-
return
|
|
3090
|
+
const r = n?.closest?.("[data-col]"), l = n?.closest?.(".data-grid-row"), s = n?.closest?.(".header-row");
|
|
3091
|
+
let a, c, f, d, u, w;
|
|
3092
|
+
return r && (a = parseInt(r.getAttribute("data-row") ?? "-1", 10), c = parseInt(r.getAttribute("data-col") ?? "-1", 10), a >= 0 && c >= 0 && (f = this._rows[a], w = this._columns[c], d = w?.field, u = f && d ? f[d] : void 0)), {
|
|
3079
3093
|
type: o,
|
|
3080
|
-
row:
|
|
3094
|
+
row: f,
|
|
3081
3095
|
rowIndex: a !== void 0 && a >= 0 ? a : void 0,
|
|
3082
3096
|
colIndex: c !== void 0 && c >= 0 ? c : void 0,
|
|
3083
3097
|
field: d,
|
|
3084
3098
|
value: u,
|
|
3085
|
-
column:
|
|
3099
|
+
column: w,
|
|
3086
3100
|
originalEvent: e,
|
|
3087
|
-
cellElement:
|
|
3088
|
-
rowElement:
|
|
3101
|
+
cellElement: r ?? void 0,
|
|
3102
|
+
rowElement: l ?? void 0,
|
|
3089
3103
|
isHeader: !!s,
|
|
3090
3104
|
cell: a !== void 0 && c !== void 0 && a >= 0 && c >= 0 ? { row: a, col: c } : void 0
|
|
3091
3105
|
};
|
|
3092
3106
|
}
|
|
3093
|
-
/**
|
|
3094
3107
|
/**
|
|
3095
3108
|
* Handle mousedown events and dispatch to plugin system.
|
|
3096
3109
|
*/
|
|
3097
|
-
#
|
|
3098
|
-
const o = this
|
|
3099
|
-
(this.#
|
|
3110
|
+
#_e(e) {
|
|
3111
|
+
const o = this.#$(e, "mousedown");
|
|
3112
|
+
(this.#t?.onCellMouseDown(o) ?? !1) && (this.#T = !0);
|
|
3100
3113
|
}
|
|
3101
3114
|
/**
|
|
3102
3115
|
* Handle mousemove events (only when dragging).
|
|
3103
3116
|
*/
|
|
3104
|
-
#
|
|
3117
|
+
#Ce(e) {
|
|
3105
3118
|
if (!this.#T) return;
|
|
3106
|
-
const o = this
|
|
3107
|
-
this.#
|
|
3119
|
+
const o = this.#$(e, "mousemove");
|
|
3120
|
+
this.#t?.onCellMouseMove(o);
|
|
3108
3121
|
}
|
|
3109
3122
|
/**
|
|
3110
3123
|
* Handle mouseup events.
|
|
3111
3124
|
*/
|
|
3112
|
-
#
|
|
3125
|
+
#Ee(e) {
|
|
3113
3126
|
if (!this.#T) return;
|
|
3114
|
-
const o = this
|
|
3115
|
-
this.#
|
|
3127
|
+
const o = this.#$(e, "mouseup");
|
|
3128
|
+
this.#t?.onCellMouseUp(o), this.#T = !1;
|
|
3116
3129
|
}
|
|
3117
3130
|
// API consumed by internal utils (rows.ts) - delegates to editing.ts
|
|
3118
3131
|
get changedRows() {
|
|
@@ -3122,34 +3135,34 @@ class N extends HTMLElement {
|
|
|
3122
3135
|
return ze(this);
|
|
3123
3136
|
}
|
|
3124
3137
|
async resetChangedRows(e) {
|
|
3125
|
-
|
|
3138
|
+
St(this, e);
|
|
3126
3139
|
}
|
|
3127
3140
|
async beginBulkEdit(e) {
|
|
3128
|
-
|
|
3141
|
+
Rt(this, e, {
|
|
3129
3142
|
findRenderedRowElement: (o) => this.findRenderedRowElement?.(o) ?? null
|
|
3130
3143
|
});
|
|
3131
3144
|
}
|
|
3132
3145
|
async commitActiveRowEdit() {
|
|
3133
|
-
|
|
3146
|
+
Tt(this);
|
|
3134
3147
|
}
|
|
3135
3148
|
async cancelActiveRowEdit() {
|
|
3136
|
-
|
|
3149
|
+
xt(this);
|
|
3137
3150
|
}
|
|
3138
3151
|
async ready() {
|
|
3139
|
-
return this.#
|
|
3152
|
+
return this.#Y;
|
|
3140
3153
|
}
|
|
3141
3154
|
async forceLayout() {
|
|
3142
3155
|
this.#a(), await new Promise((e) => requestAnimationFrame(() => requestAnimationFrame(e)));
|
|
3143
3156
|
}
|
|
3144
3157
|
/** Public method: returns a frozen snapshot of the merged effective configuration */
|
|
3145
3158
|
async getConfig() {
|
|
3146
|
-
return Object.freeze({ ...this.#
|
|
3159
|
+
return Object.freeze({ ...this.#o || {} });
|
|
3147
3160
|
}
|
|
3148
3161
|
// ---------------- Column Visibility API ----------------
|
|
3149
3162
|
// Delegates to column-state.ts pure functions
|
|
3150
3163
|
/** Visibility callbacks for column-state.ts functions */
|
|
3151
|
-
|
|
3152
|
-
emit: (e, o) => this.#
|
|
3164
|
+
#F = {
|
|
3165
|
+
emit: (e, o) => this.#B(e, o),
|
|
3153
3166
|
clearRowPool: () => {
|
|
3154
3167
|
this._rowPool.length = 0, this._bodyEl && (this._bodyEl.innerHTML = ""), this.__rowRenderEpoch++;
|
|
3155
3168
|
},
|
|
@@ -3157,29 +3170,29 @@ class N extends HTMLElement {
|
|
|
3157
3170
|
requestStateChange: () => this.requestStateChange()
|
|
3158
3171
|
};
|
|
3159
3172
|
setColumnVisible(e, o) {
|
|
3160
|
-
return
|
|
3173
|
+
return Ae(this, e, o, this.#F);
|
|
3161
3174
|
}
|
|
3162
3175
|
toggleColumnVisibility(e) {
|
|
3163
|
-
return
|
|
3176
|
+
return Xe(this, e, this.#F);
|
|
3164
3177
|
}
|
|
3165
3178
|
isColumnVisible(e) {
|
|
3166
|
-
return
|
|
3179
|
+
return Ye(this, e);
|
|
3167
3180
|
}
|
|
3168
3181
|
showAllColumns() {
|
|
3169
|
-
|
|
3182
|
+
je(this, this.#F);
|
|
3170
3183
|
}
|
|
3171
3184
|
getAllColumns() {
|
|
3172
|
-
return
|
|
3185
|
+
return Ke(this);
|
|
3173
3186
|
}
|
|
3174
3187
|
setColumnOrder(e) {
|
|
3175
|
-
|
|
3176
|
-
renderHeader: () =>
|
|
3188
|
+
Je(this, e, {
|
|
3189
|
+
renderHeader: () => F(this),
|
|
3177
3190
|
updateTemplate: () => z(this),
|
|
3178
3191
|
refreshVirtualWindow: () => this.refreshVirtualWindow(!0)
|
|
3179
3192
|
});
|
|
3180
3193
|
}
|
|
3181
3194
|
getColumnOrder() {
|
|
3182
|
-
return
|
|
3195
|
+
return Ze(this);
|
|
3183
3196
|
}
|
|
3184
3197
|
// ---------------- Column State API ----------------
|
|
3185
3198
|
/**
|
|
@@ -3187,15 +3200,15 @@ class N extends HTMLElement {
|
|
|
3187
3200
|
* Returns a serializable object suitable for localStorage or database storage.
|
|
3188
3201
|
*/
|
|
3189
3202
|
getColumnState() {
|
|
3190
|
-
const e = this.#
|
|
3191
|
-
return
|
|
3203
|
+
const e = this.#t?.getAll() ?? [];
|
|
3204
|
+
return xe(this, e);
|
|
3192
3205
|
}
|
|
3193
3206
|
/**
|
|
3194
3207
|
* Set the column state, restoring order, width, visibility, sort, and plugin state.
|
|
3195
3208
|
* Use this to restore previously saved column state.
|
|
3196
3209
|
*/
|
|
3197
3210
|
set columnState(e) {
|
|
3198
|
-
e && (this.#
|
|
3211
|
+
e && (this.#h = e, this.#H && this.#ye(e));
|
|
3199
3212
|
}
|
|
3200
3213
|
/**
|
|
3201
3214
|
* Get the current column state.
|
|
@@ -3206,10 +3219,10 @@ class N extends HTMLElement {
|
|
|
3206
3219
|
/**
|
|
3207
3220
|
* Apply column state internally.
|
|
3208
3221
|
*/
|
|
3209
|
-
#
|
|
3210
|
-
(this.#
|
|
3222
|
+
#ye(e) {
|
|
3223
|
+
(this.#o.columns ?? []).forEach((n) => {
|
|
3211
3224
|
n.hidden = !1;
|
|
3212
|
-
}), this.#
|
|
3225
|
+
}), this.#ie(e), this.#a();
|
|
3213
3226
|
}
|
|
3214
3227
|
/**
|
|
3215
3228
|
* Request a state change event to be emitted.
|
|
@@ -3219,10 +3232,10 @@ class N extends HTMLElement {
|
|
|
3219
3232
|
* @internal Plugin API
|
|
3220
3233
|
*/
|
|
3221
3234
|
requestStateChange() {
|
|
3222
|
-
this.#z || (this.#z =
|
|
3235
|
+
this.#z || (this.#z = Ue(
|
|
3223
3236
|
this,
|
|
3224
|
-
() => this.#
|
|
3225
|
-
(e) => this.#
|
|
3237
|
+
() => this.#t?.getAll() ?? [],
|
|
3238
|
+
(e) => this.#B("column-state-change", e)
|
|
3226
3239
|
)), this.#z();
|
|
3227
3240
|
}
|
|
3228
3241
|
/**
|
|
@@ -3230,10 +3243,10 @@ class N extends HTMLElement {
|
|
|
3230
3243
|
* Clears all user modifications (order, width, visibility, sort).
|
|
3231
3244
|
*/
|
|
3232
3245
|
resetColumnState() {
|
|
3233
|
-
this.#
|
|
3246
|
+
this.#h = void 0, (this.#o.columns ?? []).forEach((n) => {
|
|
3234
3247
|
n.hidden = !1;
|
|
3235
|
-
}), this._sortState = null, this.__originalOrder = [], this.#
|
|
3236
|
-
const o = this.#
|
|
3248
|
+
}), this._sortState = null, this.__originalOrder = [], this.#r(), this.#a();
|
|
3249
|
+
const o = this.#t?.getAll() ?? [];
|
|
3237
3250
|
for (const n of o)
|
|
3238
3251
|
if (n.applyColumnState)
|
|
3239
3252
|
for (const i of this._columns)
|
|
@@ -3285,11 +3298,11 @@ class N extends HTMLElement {
|
|
|
3285
3298
|
}
|
|
3286
3299
|
/** Register a custom tool panel (without creating a plugin). */
|
|
3287
3300
|
registerToolPanel(e) {
|
|
3288
|
-
this.#i.registerToolPanel(e);
|
|
3301
|
+
this.#e.apiToolPanelIds.add(e.id), this.#i.registerToolPanel(e);
|
|
3289
3302
|
}
|
|
3290
3303
|
/** Unregister a custom tool panel. */
|
|
3291
3304
|
unregisterToolPanel(e) {
|
|
3292
|
-
this.#i.unregisterToolPanel(e);
|
|
3305
|
+
this.#e.apiToolPanelIds.delete(e), this.#i.unregisterToolPanel(e);
|
|
3293
3306
|
}
|
|
3294
3307
|
/** Get registered header content definitions. */
|
|
3295
3308
|
getHeaderContents() {
|
|
@@ -3324,11 +3337,11 @@ class N extends HTMLElement {
|
|
|
3324
3337
|
* Call this after dynamically modifying <tbw-grid-header> children.
|
|
3325
3338
|
*/
|
|
3326
3339
|
refreshShellHeader() {
|
|
3327
|
-
|
|
3340
|
+
B(this, this.#e), W(this, this.#e), V(this, this.#e, this.#b()), this.#U(), this.#I();
|
|
3328
3341
|
}
|
|
3329
3342
|
// #region Custom Styles API
|
|
3330
3343
|
/** Map of registered custom style elements by ID */
|
|
3331
|
-
#
|
|
3344
|
+
#C = /* @__PURE__ */ new Map();
|
|
3332
3345
|
/**
|
|
3333
3346
|
* Register custom CSS styles to be injected into the grid's shadow DOM.
|
|
3334
3347
|
* Use this to style custom cell renderers, editors, or detail panels.
|
|
@@ -3354,21 +3367,21 @@ class N extends HTMLElement {
|
|
|
3354
3367
|
registerStyles(e, o) {
|
|
3355
3368
|
this.unregisterStyles(e);
|
|
3356
3369
|
const n = document.createElement("style");
|
|
3357
|
-
n.id = `tbw-custom-${e}`, n.textContent = o, this.#n.appendChild(n), this.#
|
|
3370
|
+
n.id = `tbw-custom-${e}`, n.textContent = o, this.#n.appendChild(n), this.#C.set(e, n);
|
|
3358
3371
|
}
|
|
3359
3372
|
/**
|
|
3360
3373
|
* Remove previously registered custom styles.
|
|
3361
3374
|
* @param id - The ID used when registering the styles
|
|
3362
3375
|
*/
|
|
3363
3376
|
unregisterStyles(e) {
|
|
3364
|
-
const o = this.#
|
|
3365
|
-
o && (o.remove(), this.#
|
|
3377
|
+
const o = this.#C.get(e);
|
|
3378
|
+
o && (o.remove(), this.#C.delete(e));
|
|
3366
3379
|
}
|
|
3367
3380
|
/**
|
|
3368
3381
|
* Get list of registered custom style IDs.
|
|
3369
3382
|
*/
|
|
3370
3383
|
getRegisteredStyles() {
|
|
3371
|
-
return Array.from(this.#
|
|
3384
|
+
return Array.from(this.#C.keys());
|
|
3372
3385
|
}
|
|
3373
3386
|
// #endregion
|
|
3374
3387
|
/**
|
|
@@ -3376,44 +3389,46 @@ class N extends HTMLElement {
|
|
|
3376
3389
|
* This handles frameworks like Angular that project content asynchronously.
|
|
3377
3390
|
* When shell-related elements are added/changed, the shell header is updated.
|
|
3378
3391
|
*/
|
|
3379
|
-
#
|
|
3380
|
-
this.#
|
|
3392
|
+
#Se() {
|
|
3393
|
+
this.#d && this.#d.disconnect();
|
|
3381
3394
|
let e = null, o = !1, n = !1;
|
|
3382
3395
|
const i = () => {
|
|
3383
3396
|
if (e = null, o) {
|
|
3384
|
-
const l = this.#
|
|
3385
|
-
|
|
3386
|
-
|
|
3387
|
-
|
|
3388
|
-
|
|
3389
|
-
|
|
3390
|
-
|
|
3391
|
-
|
|
3392
|
-
this.#
|
|
3393
|
-
|
|
3394
|
-
|
|
3395
|
-
|
|
3396
|
-
|
|
3397
|
+
const r = this.#e.lightDomTitle, l = this.#e.hasToolButtonsContainer;
|
|
3398
|
+
B(this, this.#e), W(this, this.#e), V(this, this.#e, this.#b());
|
|
3399
|
+
const s = this.#e.lightDomTitle, a = this.#e.hasToolButtonsContainer;
|
|
3400
|
+
if (s && !r || a && !l) {
|
|
3401
|
+
this.#r();
|
|
3402
|
+
const c = this.#n.querySelector(".tbw-shell-header");
|
|
3403
|
+
if (c) {
|
|
3404
|
+
const f = ye(
|
|
3405
|
+
this.#o.shell,
|
|
3406
|
+
this.#e,
|
|
3407
|
+
this.#o.icons?.toolPanel
|
|
3408
|
+
), d = document.createElement("div");
|
|
3409
|
+
d.innerHTML = f;
|
|
3410
|
+
const u = d.firstElementChild;
|
|
3411
|
+
u && (c.replaceWith(u), this.#X());
|
|
3397
3412
|
}
|
|
3398
3413
|
}
|
|
3399
3414
|
o = !1;
|
|
3400
3415
|
}
|
|
3401
3416
|
n && (this.__lightDomColumnsCache = void 0, this.#a(), n = !1);
|
|
3402
3417
|
};
|
|
3403
|
-
this.#
|
|
3404
|
-
for (const
|
|
3405
|
-
for (const s of
|
|
3418
|
+
this.#d = new MutationObserver((r) => {
|
|
3419
|
+
for (const l of r) {
|
|
3420
|
+
for (const s of l.addedNodes) {
|
|
3406
3421
|
if (s.nodeType !== Node.ELEMENT_NODE) continue;
|
|
3407
3422
|
const c = s.tagName.toLowerCase();
|
|
3408
3423
|
c === "tbw-grid-header" ? o = !0 : (c === "tbw-grid-column" || c === "tbw-grid-detail") && (n = !0);
|
|
3409
3424
|
}
|
|
3410
|
-
if (
|
|
3411
|
-
const a =
|
|
3425
|
+
if (l.type === "attributes" && l.target.nodeType === Node.ELEMENT_NODE) {
|
|
3426
|
+
const a = l.target.tagName.toLowerCase();
|
|
3412
3427
|
a === "tbw-grid-header" ? o = !0 : a === "tbw-grid-column" && (n = !0);
|
|
3413
3428
|
}
|
|
3414
3429
|
}
|
|
3415
3430
|
(o || n) && !e && (e = setTimeout(i, 0));
|
|
3416
|
-
}), this.#
|
|
3431
|
+
}), this.#d.observe(this, {
|
|
3417
3432
|
childList: !0,
|
|
3418
3433
|
subtree: !0,
|
|
3419
3434
|
attributes: !0,
|
|
@@ -3423,23 +3438,34 @@ class N extends HTMLElement {
|
|
|
3423
3438
|
/**
|
|
3424
3439
|
* Re-parse light DOM column elements and refresh the grid.
|
|
3425
3440
|
* Call this after framework adapters have registered their templates.
|
|
3441
|
+
* Debounced to coalesce multiple calls (e.g., from React StrictMode double-mounting).
|
|
3426
3442
|
* @internal Used by framework integration libraries (Angular, React, Vue)
|
|
3427
3443
|
*/
|
|
3428
3444
|
refreshColumns() {
|
|
3429
|
-
this
|
|
3430
|
-
|
|
3431
|
-
|
|
3432
|
-
|
|
3433
|
-
|
|
3434
|
-
|
|
3435
|
-
|
|
3436
|
-
|
|
3437
|
-
|
|
3438
|
-
|
|
3439
|
-
|
|
3440
|
-
|
|
3441
|
-
|
|
3442
|
-
|
|
3445
|
+
this.#D || (this.#D = requestAnimationFrame(() => {
|
|
3446
|
+
this.#D = 0, this.#Re();
|
|
3447
|
+
}));
|
|
3448
|
+
}
|
|
3449
|
+
/**
|
|
3450
|
+
* Internal implementation of refreshColumns, called after debounce.
|
|
3451
|
+
*/
|
|
3452
|
+
#Re() {
|
|
3453
|
+
this.__lightDomColumnsCache = void 0, Y(this);
|
|
3454
|
+
const e = this.#e.lightDomTitle, o = this.#e.hasToolButtonsContainer;
|
|
3455
|
+
B(this, this.#e), W(this, this.#e), V(this, this.#e, this.#b());
|
|
3456
|
+
const n = this.#e.lightDomTitle, i = this.#e.hasToolButtonsContainer;
|
|
3457
|
+
if (n && !e || i && !o) {
|
|
3458
|
+
this.#r();
|
|
3459
|
+
const l = this.#n.querySelector(".tbw-shell-header");
|
|
3460
|
+
if (l) {
|
|
3461
|
+
const s = ye(
|
|
3462
|
+
this.#o.shell,
|
|
3463
|
+
this.#e,
|
|
3464
|
+
this.#o.icons?.toolPanel
|
|
3465
|
+
), a = document.createElement("div");
|
|
3466
|
+
a.innerHTML = s;
|
|
3467
|
+
const c = a.firstElementChild;
|
|
3468
|
+
c && (l.replaceWith(c), this.#X());
|
|
3443
3469
|
}
|
|
3444
3470
|
}
|
|
3445
3471
|
this.#a();
|
|
@@ -3449,9 +3475,9 @@ class N extends HTMLElement {
|
|
|
3449
3475
|
* Calculate total height for the faux scrollbar spacer element.
|
|
3450
3476
|
* Used by both bypass and virtualized rendering paths to ensure consistent scroll behavior.
|
|
3451
3477
|
*/
|
|
3452
|
-
#
|
|
3453
|
-
const o = this._virtualization.rowHeight, n = this._virtualization.container ?? this, i = this._virtualization.viewportEl ?? n,
|
|
3454
|
-
return e * o + d + u +
|
|
3478
|
+
#G(e) {
|
|
3479
|
+
const o = this._virtualization.rowHeight, n = this._virtualization.container ?? this, i = this._virtualization.viewportEl ?? n, r = n.clientHeight, l = i.clientHeight, a = this.shadowRoot?.querySelector(".tbw-scroll-area"), c = a ? a.clientHeight : r, d = c - l, u = this.#t?.getExtraHeight() ?? 0, w = Math.max(0, r - c);
|
|
3480
|
+
return e * o + d + u + w;
|
|
3455
3481
|
}
|
|
3456
3482
|
/**
|
|
3457
3483
|
* Core virtualization routine. Chooses between bypass (small datasets), grouped window rendering,
|
|
@@ -3462,80 +3488,76 @@ class N extends HTMLElement {
|
|
|
3462
3488
|
if (!this._bodyEl) return;
|
|
3463
3489
|
const o = this._rows.length;
|
|
3464
3490
|
if (!this._virtualization.enabled) {
|
|
3465
|
-
this.#
|
|
3491
|
+
this.#W(0, o), this.#t?.afterRender();
|
|
3466
3492
|
return;
|
|
3467
3493
|
}
|
|
3468
3494
|
if (this._rows.length <= this._virtualization.bypassThreshold) {
|
|
3469
|
-
this._virtualization.start = 0, this._virtualization.end = o, e && (this._bodyEl.style.transform = "translateY(0px)"), this.#
|
|
3495
|
+
this._virtualization.start = 0, this._virtualization.end = o, e && (this._bodyEl.style.transform = "translateY(0px)"), this.#W(0, o, e ? ++this.__rowRenderEpoch : this.__rowRenderEpoch), this._virtualization.totalHeightEl && (this._virtualization.totalHeightEl.style.height = `${this.#G(o)}px`), this.#ne(o, this._visibleColumns.length), this.#t?.afterRender();
|
|
3470
3496
|
return;
|
|
3471
3497
|
}
|
|
3472
|
-
const n = this._virtualization.container ?? this, i = this._virtualization.viewportEl ?? n,
|
|
3473
|
-
let a = Math.floor(s /
|
|
3474
|
-
const
|
|
3475
|
-
for (; c <
|
|
3476
|
-
const _ = this.#
|
|
3477
|
-
if (
|
|
3478
|
-
a =
|
|
3498
|
+
const n = this._virtualization.container ?? this, i = this._virtualization.viewportEl ?? n, r = i.clientHeight, l = this._virtualization.rowHeight, s = n.scrollTop;
|
|
3499
|
+
let a = Math.floor(s / l), c = 0;
|
|
3500
|
+
const f = 10;
|
|
3501
|
+
for (; c < f; ) {
|
|
3502
|
+
const _ = this.#t?.getExtraHeightBefore?.(a) ?? 0, v = Math.floor((s - _) / l);
|
|
3503
|
+
if (v >= a || v < 0) break;
|
|
3504
|
+
a = v, c++;
|
|
3479
3505
|
}
|
|
3480
3506
|
a = a - a % 2, a < 0 && (a = 0);
|
|
3481
|
-
const d = this.#
|
|
3507
|
+
const d = this.#t?.adjustVirtualStart(a, s, l);
|
|
3482
3508
|
d !== void 0 && d < a && (a = d, a = a - a % 2, a < 0 && (a = 0));
|
|
3483
|
-
const u = Math.ceil(
|
|
3484
|
-
let
|
|
3485
|
-
if (
|
|
3509
|
+
const u = Math.ceil(r / l) + 3;
|
|
3510
|
+
let w = a + u;
|
|
3511
|
+
if (w > o && (w = o), this._virtualization.start = a, this._virtualization.end = w, n.clientHeight === 0 && r > 0) {
|
|
3486
3512
|
requestAnimationFrame(() => this.refreshVirtualWindow(e));
|
|
3487
3513
|
return;
|
|
3488
3514
|
}
|
|
3489
|
-
const
|
|
3490
|
-
this._virtualization.totalHeightEl && (this._virtualization.totalHeightEl.style.height = `${
|
|
3491
|
-
const g = this.#
|
|
3492
|
-
this._bodyEl.style.transform = `translateY(${
|
|
3493
|
-
const _ = n.clientHeight,
|
|
3494
|
-
if (_ === 0 &&
|
|
3495
|
-
const
|
|
3496
|
-
this._virtualization.totalHeightEl && (this._virtualization.totalHeightEl.style.height = `${
|
|
3515
|
+
const p = this.#G(o);
|
|
3516
|
+
this._virtualization.totalHeightEl && (this._virtualization.totalHeightEl.style.height = `${p}px`);
|
|
3517
|
+
const g = this.#t?.getExtraHeightBefore?.(a) ?? 0, b = -(s - a * l - g);
|
|
3518
|
+
this._bodyEl.style.transform = `translateY(${b}px)`, this.#W(a, w, e ? ++this.__rowRenderEpoch : this.__rowRenderEpoch), this.#ne(o, this._visibleColumns.length), e && (this.#t?.afterRender(), queueMicrotask(() => {
|
|
3519
|
+
const _ = n.clientHeight, v = i.clientHeight;
|
|
3520
|
+
if (_ === 0 && v > 0) return;
|
|
3521
|
+
const m = this.#G(o);
|
|
3522
|
+
this._virtualization.totalHeightEl && (this._virtualization.totalHeightEl.style.height = `${m}px`);
|
|
3497
3523
|
}));
|
|
3498
3524
|
}
|
|
3499
3525
|
// ---------------- Render ----------------
|
|
3500
|
-
#
|
|
3501
|
-
|
|
3502
|
-
const e = this.#
|
|
3503
|
-
|
|
3526
|
+
#U() {
|
|
3527
|
+
B(this, this.#e), W(this, this.#e), V(this, this.#e, this.#b()), this.#r();
|
|
3528
|
+
const e = this.#o?.shell;
|
|
3529
|
+
jt(this.#n, e, this.#e, this.#o?.icons) && (this.#X(), this.#i.setInitialized(!0));
|
|
3504
3530
|
}
|
|
3505
3531
|
/**
|
|
3506
3532
|
* Set up shell event listeners after render.
|
|
3507
3533
|
*/
|
|
3508
|
-
#
|
|
3509
|
-
|
|
3534
|
+
#X() {
|
|
3535
|
+
Wt(this.#n, this.#o?.shell, this.#e, {
|
|
3510
3536
|
onPanelToggle: () => this.toggleToolPanel(),
|
|
3511
3537
|
onSectionToggle: (e) => this.toggleToolPanelSection(e),
|
|
3512
|
-
onToolbarButtonClick: (e) => this.#
|
|
3513
|
-
}), this.#
|
|
3538
|
+
onToolbarButtonClick: (e) => this.#Te(e)
|
|
3539
|
+
}), this.#A?.(), this.#A = Vt(this.#n, this.#o?.shell, (e) => {
|
|
3514
3540
|
this.style.setProperty("--tbw-tool-panel-width", `${e}px`);
|
|
3515
3541
|
});
|
|
3516
3542
|
}
|
|
3517
3543
|
/**
|
|
3518
|
-
* Handle toolbar button click
|
|
3544
|
+
* Handle toolbar button click.
|
|
3545
|
+
* Note: Config/API buttons use element or render, so they handle their own clicks.
|
|
3546
|
+
* This method is kept for backwards compatibility but may emit an event in the future.
|
|
3519
3547
|
*/
|
|
3520
|
-
|
|
3521
|
-
|
|
3522
|
-
if (n?.action) {
|
|
3523
|
-
n.action();
|
|
3524
|
-
return;
|
|
3525
|
-
}
|
|
3526
|
-
const i = this.#o.toolbarButtons.get(e);
|
|
3527
|
-
i?.action && i.action();
|
|
3548
|
+
// eslint-disable-next-line @typescript-eslint/no-unused-vars
|
|
3549
|
+
#Te(e) {
|
|
3528
3550
|
}
|
|
3529
3551
|
}
|
|
3530
|
-
customElements.get(
|
|
3531
|
-
globalThis.DataGridElement =
|
|
3532
|
-
const
|
|
3552
|
+
customElements.get(I.tagName) || customElements.define(I.tagName, I);
|
|
3553
|
+
globalThis.DataGridElement = I;
|
|
3554
|
+
const ro = {
|
|
3533
3555
|
/** Ask if a column can be moved. Context: ColumnConfig. Response: boolean | undefined */
|
|
3534
3556
|
CAN_MOVE_COLUMN: "canMoveColumn",
|
|
3535
3557
|
/** Get context menu items. Context: ContextMenuParams. Response: ContextMenuItem[] */
|
|
3536
3558
|
GET_CONTEXT_MENU_ITEMS: "getContextMenuItems"
|
|
3537
3559
|
};
|
|
3538
|
-
class
|
|
3560
|
+
class lo {
|
|
3539
3561
|
/** Plugin version - override in subclass if needed */
|
|
3540
3562
|
version = "1.0.0";
|
|
3541
3563
|
/** CSS styles to inject into the grid's shadow DOM */
|
|
@@ -3691,7 +3713,7 @@ class no {
|
|
|
3691
3713
|
}
|
|
3692
3714
|
// #endregion
|
|
3693
3715
|
}
|
|
3694
|
-
const
|
|
3716
|
+
const y = {
|
|
3695
3717
|
// ─── Core Structure ───────────────────────────────────────────────
|
|
3696
3718
|
ROOT: "tbw-grid-root",
|
|
3697
3719
|
HEADER: "header",
|
|
@@ -3739,7 +3761,7 @@ const E = {
|
|
|
3739
3761
|
// Selection (SelectionPlugin applies, core CSS styles)
|
|
3740
3762
|
RANGE_SELECTION: "range-selection",
|
|
3741
3763
|
SELECTION_OVERLAY: "selection-overlay"
|
|
3742
|
-
},
|
|
3764
|
+
}, J = {
|
|
3743
3765
|
// ─── Core Attributes ──────────────────────────────────────────────
|
|
3744
3766
|
ROW_INDEX: "data-row-index",
|
|
3745
3767
|
COL_INDEX: "data-col-index",
|
|
@@ -3751,24 +3773,24 @@ const E = {
|
|
|
3751
3773
|
// TreePlugin
|
|
3752
3774
|
STICKY: "data-sticky"
|
|
3753
3775
|
// PinnedColumnsPlugin
|
|
3754
|
-
},
|
|
3755
|
-
ROOT: `.${
|
|
3756
|
-
HEADER: `.${
|
|
3757
|
-
HEADER_ROW: `.${
|
|
3758
|
-
HEADER_CELL: `.${
|
|
3759
|
-
ROWS_VIEWPORT: `.${
|
|
3760
|
-
ROWS_CONTAINER: `.${
|
|
3761
|
-
DATA_ROW: `.${
|
|
3762
|
-
DATA_CELL: `.${
|
|
3763
|
-
GROUP_ROW: `.${
|
|
3776
|
+
}, so = {
|
|
3777
|
+
ROOT: `.${y.ROOT}`,
|
|
3778
|
+
HEADER: `.${y.HEADER}`,
|
|
3779
|
+
HEADER_ROW: `.${y.HEADER_ROW}`,
|
|
3780
|
+
HEADER_CELL: `.${y.HEADER_CELL}`,
|
|
3781
|
+
ROWS_VIEWPORT: `.${y.ROWS_VIEWPORT}`,
|
|
3782
|
+
ROWS_CONTAINER: `.${y.ROWS_CONTAINER}`,
|
|
3783
|
+
DATA_ROW: `.${y.DATA_ROW}`,
|
|
3784
|
+
DATA_CELL: `.${y.DATA_CELL}`,
|
|
3785
|
+
GROUP_ROW: `.${y.GROUP_ROW}`,
|
|
3764
3786
|
// By data attribute
|
|
3765
|
-
ROW_BY_INDEX: (t) => `.${
|
|
3766
|
-
CELL_BY_FIELD: (t) => `.${
|
|
3767
|
-
CELL_AT: (t, e) => `.${
|
|
3787
|
+
ROW_BY_INDEX: (t) => `.${y.DATA_ROW}[${J.ROW_INDEX}="${t}"]`,
|
|
3788
|
+
CELL_BY_FIELD: (t) => `.${y.DATA_CELL}[${J.FIELD}="${t}"]`,
|
|
3789
|
+
CELL_AT: (t, e) => `.${y.DATA_ROW}[${J.ROW_INDEX}="${t}"] .${y.DATA_CELL}[${J.COL_INDEX}="${e}"]`,
|
|
3768
3790
|
// State selectors
|
|
3769
|
-
SELECTED_ROWS: `.${
|
|
3770
|
-
EDITING_CELL: `.${
|
|
3771
|
-
},
|
|
3791
|
+
SELECTED_ROWS: `.${y.DATA_ROW}.${y.SELECTED}`,
|
|
3792
|
+
EDITING_CELL: `.${y.DATA_CELL}.${y.EDITING}`
|
|
3793
|
+
}, ao = {
|
|
3772
3794
|
// Colors
|
|
3773
3795
|
COLOR_BG: "--tbw-color-bg",
|
|
3774
3796
|
COLOR_FG: "--tbw-color-fg",
|
|
@@ -3790,7 +3812,7 @@ const E = {
|
|
|
3790
3812
|
// Borders
|
|
3791
3813
|
BORDER_RADIUS: "--tbw-border-radius",
|
|
3792
3814
|
FOCUS_OUTLINE: "--tbw-focus-outline"
|
|
3793
|
-
},
|
|
3815
|
+
}, co = {
|
|
3794
3816
|
CELL_COMMIT: "cell-commit",
|
|
3795
3817
|
ROW_COMMIT: "row-commit",
|
|
3796
3818
|
CHANGED_ROWS_RESET: "changed-rows-reset",
|
|
@@ -3801,7 +3823,7 @@ const E = {
|
|
|
3801
3823
|
ACTIVATE_CELL: "activate-cell",
|
|
3802
3824
|
GROUP_TOGGLE: "group-toggle",
|
|
3803
3825
|
COLUMN_STATE_CHANGE: "column-state-change"
|
|
3804
|
-
},
|
|
3826
|
+
}, uo = {
|
|
3805
3827
|
// Selection plugin
|
|
3806
3828
|
SELECTION_CHANGE: "selection-change",
|
|
3807
3829
|
// Tree plugin
|
|
@@ -3832,7 +3854,7 @@ const E = {
|
|
|
3832
3854
|
DETAIL_EXPAND: "detail-expand",
|
|
3833
3855
|
// Grouping rows plugin
|
|
3834
3856
|
GROUP_EXPAND: "group-expand"
|
|
3835
|
-
},
|
|
3857
|
+
}, re = {
|
|
3836
3858
|
sum: (t, e) => t.reduce((o, n) => o + (Number(n[e]) || 0), 0),
|
|
3837
3859
|
avg: (t, e) => {
|
|
3838
3860
|
const o = t.reduce((n, i) => n + (Number(i[e]) || 0), 0);
|
|
@@ -3843,25 +3865,25 @@ const E = {
|
|
|
3843
3865
|
max: (t, e) => Math.max(...t.map((o) => Number(o[e]) || -1 / 0)),
|
|
3844
3866
|
first: (t, e) => t[0]?.[e],
|
|
3845
3867
|
last: (t, e) => t[t.length - 1]?.[e]
|
|
3846
|
-
},
|
|
3868
|
+
}, U = /* @__PURE__ */ new Map(), M = {
|
|
3847
3869
|
/**
|
|
3848
3870
|
* Register a custom aggregator function.
|
|
3849
3871
|
*/
|
|
3850
3872
|
register(t, e) {
|
|
3851
|
-
|
|
3873
|
+
U.set(t, e);
|
|
3852
3874
|
},
|
|
3853
3875
|
/**
|
|
3854
3876
|
* Unregister a custom aggregator function.
|
|
3855
3877
|
*/
|
|
3856
3878
|
unregister(t) {
|
|
3857
|
-
|
|
3879
|
+
U.delete(t);
|
|
3858
3880
|
},
|
|
3859
3881
|
/**
|
|
3860
3882
|
* Get an aggregator function by reference.
|
|
3861
3883
|
*/
|
|
3862
3884
|
get(t) {
|
|
3863
3885
|
if (t !== void 0)
|
|
3864
|
-
return typeof t == "function" ? t :
|
|
3886
|
+
return typeof t == "function" ? t : U.get(t) ?? re[t];
|
|
3865
3887
|
},
|
|
3866
3888
|
/**
|
|
3867
3889
|
* Run an aggregator on a set of rows.
|
|
@@ -3874,15 +3896,15 @@ const E = {
|
|
|
3874
3896
|
* Check if an aggregator exists.
|
|
3875
3897
|
*/
|
|
3876
3898
|
has(t) {
|
|
3877
|
-
return
|
|
3899
|
+
return U.has(t) || t in re;
|
|
3878
3900
|
},
|
|
3879
3901
|
/**
|
|
3880
3902
|
* List all available aggregator names.
|
|
3881
3903
|
*/
|
|
3882
3904
|
list() {
|
|
3883
|
-
return [...Object.keys(
|
|
3905
|
+
return [...Object.keys(re), ...U.keys()];
|
|
3884
3906
|
}
|
|
3885
|
-
},
|
|
3907
|
+
}, Te = {
|
|
3886
3908
|
sum: (t) => t.reduce((e, o) => e + o, 0),
|
|
3887
3909
|
avg: (t) => t.length ? t.reduce((e, o) => e + o, 0) / t.length : 0,
|
|
3888
3910
|
count: (t) => t.length,
|
|
@@ -3891,42 +3913,42 @@ const E = {
|
|
|
3891
3913
|
first: (t) => t[0] ?? 0,
|
|
3892
3914
|
last: (t) => t[t.length - 1] ?? 0
|
|
3893
3915
|
};
|
|
3894
|
-
function
|
|
3895
|
-
return
|
|
3916
|
+
function io(t) {
|
|
3917
|
+
return Te[t] ?? Te.sum;
|
|
3896
3918
|
}
|
|
3897
|
-
function
|
|
3898
|
-
return
|
|
3919
|
+
function ho(t, e) {
|
|
3920
|
+
return io(t)(e);
|
|
3899
3921
|
}
|
|
3900
|
-
const
|
|
3922
|
+
const fo = M.register.bind(M), po = M.unregister.bind(M), wo = M.get.bind(M), bo = M.run.bind(M), go = M.list.bind(M);
|
|
3901
3923
|
export {
|
|
3902
|
-
|
|
3903
|
-
|
|
3924
|
+
lo as BaseGridPlugin,
|
|
3925
|
+
Qe as DEFAULT_ANIMATION_CONFIG,
|
|
3904
3926
|
O as DEFAULT_GRID_ICONS,
|
|
3905
|
-
|
|
3906
|
-
|
|
3907
|
-
|
|
3908
|
-
|
|
3909
|
-
|
|
3910
|
-
|
|
3911
|
-
|
|
3912
|
-
|
|
3913
|
-
|
|
3914
|
-
|
|
3915
|
-
|
|
3927
|
+
co as DGEvents,
|
|
3928
|
+
I as DataGridElement,
|
|
3929
|
+
j as FitModeEnum,
|
|
3930
|
+
ao as GridCSSVars,
|
|
3931
|
+
y as GridClasses,
|
|
3932
|
+
J as GridDataAttrs,
|
|
3933
|
+
I as GridElement,
|
|
3934
|
+
so as GridSelectors,
|
|
3935
|
+
ro as PLUGIN_QUERIES,
|
|
3936
|
+
uo as PluginEvents,
|
|
3937
|
+
no as PluginManager,
|
|
3916
3938
|
k as a,
|
|
3917
|
-
|
|
3918
|
-
|
|
3939
|
+
M as aggregatorRegistry,
|
|
3940
|
+
kt as builtInSort,
|
|
3919
3941
|
le as c,
|
|
3920
|
-
|
|
3942
|
+
Ot as defaultComparator,
|
|
3921
3943
|
Pe as e,
|
|
3922
3944
|
Me as g,
|
|
3923
|
-
|
|
3924
|
-
|
|
3925
|
-
|
|
3926
|
-
|
|
3927
|
-
|
|
3928
|
-
|
|
3929
|
-
|
|
3930
|
-
|
|
3945
|
+
wo as getAggregator,
|
|
3946
|
+
io as getValueAggregator,
|
|
3947
|
+
go as listAggregators,
|
|
3948
|
+
fo as registerAggregator,
|
|
3949
|
+
bo as runAggregator,
|
|
3950
|
+
ho as runValueAggregator,
|
|
3951
|
+
Q as s,
|
|
3952
|
+
po as unregisterAggregator
|
|
3931
3953
|
};
|
|
3932
3954
|
//# sourceMappingURL=index.js.map
|