@toolbox-web/grid 1.24.2 → 1.25.0

package/lib/plugins/reorder-rows/types.d.ts

@@ -78,6 +78,10 @@ export interface PendingMove {
     row: unknown;
 }
 declare module '../../core/types' {
+    interface DataGridEventMap<TRow = unknown> {
+        /** Fired when a row is reordered via drag or Shift+arrow (cancelable). Call `preventDefault()` to reject the move. @group Row Reorder Events */
+        'row-move': RowMoveDetail<TRow>;
+    }
     interface PluginNameMap {
         /** Primary name for the row reorder plugin */
         reorderRows: import('./RowReorderPlugin').RowReorderPlugin;
@@ -87,4 +91,3 @@ declare module '../../core/types' {
         rowReorder: import('./RowReorderPlugin').RowReorderPlugin;
     }
 }
-//# sourceMappingURL=types.d.ts.map

package/lib/plugins/responsive/ResponsivePlugin.d.ts

@@ -161,4 +161,3 @@ export declare class ResponsivePlugin<T = unknown> extends BaseGridPlugin<Respon
      */
     getRowHeight(row: unknown, _index: number): number | undefined;
 }
-//# sourceMappingURL=ResponsivePlugin.d.ts.map

package/lib/plugins/responsive/index.d.ts

@@ -8,4 +8,3 @@
  */
 export { ResponsivePlugin } from './ResponsivePlugin';
 export type { BreakpointConfig, HiddenColumnConfig, ResponsiveChangeDetail, ResponsivePluginConfig } from './types';
-//# sourceMappingURL=index.d.ts.map

package/lib/plugins/responsive/index.js

@@ -1,2 +1,2 @@
-const e=/{{\s*([^}]+)\s*}}/g,t="__DG_EMPTY__",i=/^[\w$. '?+\-*/%:()!<>=,&|]+$/,r=/__(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/,o=/* @__PURE__ */new Set(["script","iframe","object","embed","form","input","button","textarea","select","link","meta","base","style","template","slot","portal","frame","frameset","applet","noscript","noembed","plaintext","xmp","listing"]),s=/^on\w+$/i,n=/* @__PURE__ */new Set(["href","src","action","formaction","data","srcdoc","xlink:href","poster","srcset"]),a=/^\s*(javascript|vbscript|data|blob):/i;function d(e){if(!e||"string"!=typeof e)return"";if(-1===e.indexOf("<"))return e;const t=document.createElement("template");return t.innerHTML=e,function(e){const t=[],i=e.querySelectorAll("*");for(const r of i){const e=r.tagName.toLowerCase();if(o.has(e)){t.push(r);continue}if("svg"===e||"http://www.w3.org/2000/svg"===r.namespaceURI){if(Array.from(r.attributes).some(e=>s.test(e.name)||"href"===e.name||"xlink:href"===e.name)){t.push(r);continue}}const i=[];for(const t of r.attributes){const e=t.name.toLowerCase();s.test(e)?i.push(t.name):(n.has(e)&&a.test(t.value)||"style"===e&&/expression\s*\(|javascript:|behavior\s*:/i.test(t.value))&&i.push(t.name)}i.forEach(e=>r.removeAttribute(e))}t.forEach(e=>e.remove())}(t.content),t.innerHTML}function l(o,s){if(!o||-1===o.indexOf("{{"))return o;const n=[],a=o.replace(e,(e,o)=>{const a=function(e,o){if(e=(e||"").trim(),!e)return t;if(c.test(e))return t;if("value"===e)return null==o.value?t:String(o.value);if(e.startsWith("row.")&&!/[()?]/.test(e)&&!e.includes(":")){const i=e.slice(4),r=o.row?o.row[i]:void 0;return null==r?t:String(r)}if(e.length>80)return t;if(!i.test(e)||r.test(e))return t;const s=e.match(/\./g);if(s&&s.length>1)return t;try{const i=new Function("value","row",`return (${e});`)(o.value,o.row),r=null==i?"":String(i);return c.test(r)?t:r||t}catch{return t}}(o,s);return n.push({expr:o.trim(),result:a}),a}),d=(l=a)?l.replace(new RegExp(t,"g"),"").replace(/Reflect\.[^<>{}\s]+|\bProxy\b|ownKeys\([^)]*\)/g,""):l;var l;const h=n.length&&n.every(e=>""===e.result||e.result===t);return c.test(o)||h?"":d}const c=/Reflect|Proxy|ownKeys/;document.createElement("template").innerHTML='<div class="cell" role="gridcell" part="cell"></div>';function h(e,t){if(e._virtualization?.enabled){const{rowHeight:t,container:i,viewportEl:r}=e._virtualization,o=i,s=r?.clientHeight??o?.clientHeight??0;if(o&&s>0){const i=e._focusRow*t;i<o.scrollTop?o.scrollTop=i:i+t>o.scrollTop+s&&(o.scrollTop=i-s+t)}}const i=void 0!==e._activeEditRows&&-1!==e._activeEditRows||!!e._isGridEditMode;var r;i||e.refreshVirtualWindow(!1),(r=e._bodyEl)&&r.querySelectorAll(".cell-focus").forEach(e=>e.classList.remove("cell-focus")),Array.from(e._bodyEl.querySelectorAll('[aria-selected="true"]')).forEach(e=>{e.setAttribute("aria-selected","false")});const o=e._focusRow,s=e._virtualization.start??0,n=e._virtualization.end??e._rows.length;if(o>=s&&o<n){const r=e._bodyEl.querySelectorAll(".data-grid-row")[o-s];let n=r?.children[e._focusCol];if(n&&n.classList?.contains("cell")||(n=r?.querySelector(`.cell[data-col="${e._focusCol}"]`)??r?.querySelector(".cell[data-col]")),n){n.classList.add("cell-focus"),n.setAttribute("aria-selected","true");const o=e.querySelector(".tbw-scroll-area");if(o&&n&&(!i||t?.forceHorizontalScroll)){const t=e._getHorizontalScrollOffsets?.(r??void 0,n)??{left:0,right:0};if(!t.skipScroll){const e=n.getBoundingClientRect(),i=o.getBoundingClientRect(),r=e.left-i.left+o.scrollLeft,s=r+e.width,a=o.scrollLeft+t.left,d=o.scrollLeft+o.clientWidth-t.right;r<a?o.scrollLeft=r-t.left:s>d&&(o.scrollLeft=s-o.clientWidth+t.right)}}if(i&&n.classList.contains("editing")){const e=n.querySelector('input,select,textarea,[contenteditable="true"],[contenteditable=""],[tabindex]:not([tabindex="-1"])');if(e&&document.activeElement!==e)try{e.focus({preventScroll:!0})}catch{}}else if(i&&!n.contains(document.activeElement)){n.hasAttribute("tabindex")||n.setAttribute("tabindex","-1");try{n.focus({preventScroll:!0})}catch{}}else if(!i){const t=e;document.activeElement!==t&&t.focus({preventScroll:!0})}}}}document.createElement("template").innerHTML='<div class="data-grid-row" role="row" part="row"></div>';const u='<svg viewBox="0 0 16 16" width="12" height="12"><path fill="currentColor" d="M6 10.5a.5.5 0 0 1 .5-.5h3a.5.5 0 0 1 0 1h-3a.5.5 0 0 1-.5-.5zm-2-3a.5.5 0 0 1 .5-.5h7a.5.5 0 0 1 0 1h-7a.5.5 0 0 1-.5-.5zm-2-3a.5.5 0 0 1 .5-.5h11a.5.5 0 0 1 0 1h-11a.5.5 0 0 1-.5-.5z"/></svg>',g={expand:"▶",collapse:"▼",sortAsc:"▲",sortDesc:"▼",sortNone:"⇅",submenuArrow:"▶",dragHandle:"⋮⋮",toolPanel:"☰",filter:u,filterActive:u,print:"🖨️"};class p{static dependencies;static manifest;aliases;version="undefined"!=typeof __GRID_VERSION__?__GRID_VERSION__:"dev";styles;cellRenderers;headerRenderers;cellEditors;grid;config;userConfig;#e;get defaultConfig(){return{}}constructor(e={}){this.userConfig=e}attach(e){this.#e?.abort(),this.#e=new AbortController,this.grid=e,this.config={...this.defaultConfig,...this.userConfig}}detach(){this.#e?.abort(),this.#e=void 0}getPlugin(e){return this.grid?.getPlugin(e)}emit(e,t){this.grid?.dispatchEvent?.(new CustomEvent(e,{detail:t,bubbles:!0}))}emitCancelable(e,t){const i=new CustomEvent(e,{detail:t,bubbles:!0,cancelable:!0});return this.grid?.dispatchEvent?.(i),i.defaultPrevented}on(e,t){this.grid?._pluginManager?.subscribe(this,e,t)}off(e){this.grid?._pluginManager?.unsubscribe(this,e)}emitPluginEvent(e,t){this.grid?._pluginManager?.emitPluginEvent(e,t)}requestRender(){this.grid?.requestRender?.()}requestColumnsRender(){this.grid?.requestColumnsRender?.()}requestRenderWithFocus(){this.grid?.requestRenderWithFocus?.()}requestAfterRender(){this.grid?.requestAfterRender?.()}requestVirtualRefresh(){this.grid?.requestVirtualRefresh?.()}get rows(){return this.grid?.rows??[]}get sourceRows(){return this.grid?.sourceRows??[]}get columns(){return this.grid?.columns??[]}get visibleColumns(){return this.grid?._visibleColumns??[]}get gridElement(){return this.grid}get disconnectSignal(){return this.#e?.signal??this.grid?.disconnectSignal}get gridIcons(){const e=this.grid?.gridConfig?.icons??{};return{...g,...e}}get isAnimationEnabled(){const e=this.grid?.effectiveConfig?.animation?.mode??"reduced-motion";if(!1===e||"off"===e)return!1;if(!0===e||"on"===e)return!0;const t=this.gridElement;if(t){return"0"!==getComputedStyle(t).getPropertyValue("--tbw-animation-enabled").trim()}return!0}get animationDuration(){const e=this.gridElement;if(e){const t=getComputedStyle(e).getPropertyValue("--tbw-animation-duration").trim(),i=parseInt(t,10);if(!isNaN(i))return i}return 200}resolveIcon(e,t){return void 0!==t?t:this.gridIcons[e]}setIcon(e,t){"string"==typeof t?e.innerHTML=t:t instanceof HTMLElement&&(e.innerHTML="",e.appendChild(t.cloneNode(!0)))}warn(e){console.warn(`[tbw-grid:${this.name}] ${e}`)}}class f extends p{name="responsive";version="1.0.0";styles='tbw-grid[data-responsive-animate] .data-grid-row,tbw-grid[data-responsive-animate] .data-grid-row>.cell{transition:opacity var(--tbw-responsive-duration, .2s) ease-out,transform var(--tbw-responsive-duration, .2s) ease-out}tbw-grid[data-responsive][data-responsive-animate] .data-grid-row{animation:responsive-card-enter var(--tbw-responsive-duration, .2s) ease-out}@keyframes responsive-card-enter{0%{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:translateY(0)}}tbw-grid[data-responsive] .header{display:none!important}tbw-grid[data-responsive] .footer-row{display:none}tbw-grid[data-responsive] .tbw-scroll-area{overflow-x:hidden;min-width:0!important}tbw-grid[data-responsive] .rows-body-wrapper{min-width:0!important}tbw-grid[data-responsive] .data-grid-row:not(.group-row){display:block!important;grid-template-columns:none!important;padding:var(--tbw-cell-padding);padding-inline-start:var(--tbw-spacing-xl);border-bottom:1px solid var(--tbw-color-border);min-height:auto!important;height:auto!important;contain:none!important;content-visibility:visible!important;background:var(--tbw-color-bg);position:relative}tbw-grid[data-responsive] .data-grid-row:not(.group-row):nth-child(2n){background:var(--tbw-color-row-alt)}tbw-grid[data-responsive] .data-grid-row:not(.group-row):hover{background:var(--tbw-color-row-hover)}tbw-grid[data-responsive] .data-grid-row:not(.group-row)[aria-selected=true]{background:var(--tbw-color-selection)}tbw-grid[data-responsive] .data-grid-row:not(.group-row)[aria-selected=true]:before{content:"";position:absolute;inset-inline-start:0;top:0;bottom:0;width:4px;background:var(--tbw-color-accent)}tbw-grid[data-responsive] .data-grid-row:not(.group-row)>.cell{display:flex!important;justify-content:space-between;align-items:center;padding:var(--tbw-spacing-xs) var(--tbw-spacing-md);width:100%!important;min-width:0!important;min-height:auto!important;height:auto!important;line-height:1.5!important;position:static!important;left:auto!important;right:auto!important;border:none!important;border-bottom:none!important;border-inline-end:none!important;background:transparent!important;white-space:normal!important;overflow:visible!important}tbw-grid[data-responsive] .data-grid-row:not(.group-row)>.cell:before{content:attr(data-header) ": ";font-weight:600;color:var(--tbw-color-header-fg);flex-shrink:0;margin-inline-end:var(--tbw-spacing-md);min-width:100px}tbw-grid[data-responsive] .data-grid-row:not(.group-row)>.cell:after{content:none}tbw-grid[data-responsive] .cell[data-utility]{display:none!important}tbw-grid[data-responsive] .data-grid-row>.cell[data-responsive-hidden]{display:none!important}tbw-grid[data-responsive] .data-grid-row>.cell[data-responsive-value-only]{justify-content:flex-start!important;font-weight:500}tbw-grid[data-responsive] .data-grid-row>.cell[data-responsive-value-only]:before{display:none!important}tbw-grid:not([data-responsive]) .cell[data-responsive-hidden]{display:none!important}tbw-grid[data-responsive] .tbw-footer,tbw-grid[data-responsive] .tbw-pinned-rows,tbw-grid[data-responsive] .tbw-aggregation-rows{display:none!important}tbw-grid[data-responsive] .tbw-pinned-rows,tbw-grid[data-responsive] .tbw-aggregation-rows,tbw-grid[data-responsive] .tbw-aggregation-row{min-width:0!important}tbw-grid[data-responsive] .data-grid-row.responsive-card{display:block!important;padding:var(--tbw-cell-padding);border-bottom:1px solid var(--tbw-color-border)}tbw-grid[data-responsive] .data-grid-row.responsive-card>*{width:100%}tbw-grid[data-responsive] .data-grid-row.responsive-card .cell:before{display:none}';static manifest={incompatibleWith:[{name:"groupingRows",reason:"Responsive card layout does not yet support row grouping. The variable row heights (cards vs group headers) cause scroll calculation issues."}],queries:[{type:"isCardMode",description:"Returns whether the grid is currently in responsive card mode"}]};#t;#i=!1;#r;#o=!1;#s=0;#n=/* @__PURE__ */new Set;#a=/* @__PURE__ */new Set;#d=null;#l=[];isResponsive(){return this.#i}setResponsive(e){e!==this.#i&&(this.#i=e,this.#c(),this.emit("responsive-change",{isResponsive:e,width:this.#s,breakpoint:this.config.breakpoint??0}),this.requestRender())}setBreakpoint(e){this.config.breakpoint=e,this.#h(this.#s)}setCardRenderer(e){this.config.cardRenderer=e,this.#i&&this.requestRender()}getWidth(){return this.#s}getActiveBreakpoint(){return this.#d}attach(e){super.attach(e),this.#u(),this.#g(this.config.hiddenColumns),this.config.breakpoints?.length&&(this.#l=[...this.config.breakpoints].sort((e,t)=>t.maxWidth-e.maxWidth)),this.#t=new ResizeObserver(e=>{const t=e[0]?.contentRect.width??0;this.#s=t,clearTimeout(this.#r),this.#r=setTimeout(()=>{this.#h(t)},this.config.debounceMs??100)}),this.#t.observe(this.gridElement)}#u(){const e=this.grid;if(!e||"function"!=typeof e.querySelector)return;const t=e.querySelector("tbw-grid-responsive-card");if(!t)return;const i=e;if(i.__frameworkAdapter?.parseResponsiveCardElement){const e=i.__frameworkAdapter.parseResponsiveCardElement(t);e&&(this.config={...this.config,cardRenderer:e})}const r=t.getAttribute("breakpoint"),o=t.getAttribute("card-row-height"),s=t.getAttribute("hidden-columns"),n=t.getAttribute("hide-header"),a=t.getAttribute("debounce-ms"),c={};if(null!==r){const e=parseInt(r,10);isNaN(e)||(c.breakpoint=e)}if(null!==o&&(c.cardRowHeight="auto"===o?"auto":parseInt(o,10)),null!==s&&(c.hiddenColumns=s.split(",").map(e=>e.trim()).filter(e=>e.length>0)),null!==n&&(c.hideHeader="false"!==n),null!==a){const e=parseInt(a,10);isNaN(e)||(c.debounceMs=e)}const h=t.innerHTML.trim();!h||this.config.cardRenderer||i.__frameworkAdapter?.parseResponsiveCardElement||(c.cardRenderer=e=>{const t=d(l(h,{value:e,row:e})),i=document.createElement("div");return i.className="tbw-responsive-card-content",i.innerHTML=t,i}),Object.keys(c).length>0&&(this.config={...this.config,...c})}#g(e){if(this.#n.clear(),this.#a.clear(),e)for(const t of e)"string"==typeof t?this.#n.add(t):t.showValue?this.#a.add(t.field):this.#n.add(t.field)}detach(){this.#t?.disconnect(),this.#t=void 0,clearTimeout(this.#r),this.#r=void 0,this.gridElement&&this.gridElement.removeAttribute("data-responsive"),super.detach()}handleQuery(e){if("isCardMode"===e.type)return this.#i}afterRender(){this.#p();if(!(this.#l.length>0?null!==this.#d:this.#i))return;const e=this.#n.size>0,t=this.#a.size>0;if(!e&&!t)return;const i=this.gridElement.querySelectorAll(".cell[data-field]");for(const r of i){const e=r.getAttribute("data-field");e&&(this.#n.has(e)?(r.setAttribute("data-responsive-hidden",""),r.removeAttribute("data-responsive-value-only")):this.#a.has(e)?(r.setAttribute("data-responsive-value-only",""),r.removeAttribute("data-responsive-hidden")):(r.removeAttribute("data-responsive-hidden"),r.removeAttribute("data-responsive-value-only")))}}#h(e){if(this.#l.length>0)return void this.#f(e);const t=this.config.breakpoint??0;0!==t||this.#o||(this.#o=!0,console.warn("[tbw-grid:ResponsivePlugin] No breakpoint configured. Responsive mode is disabled. Set a breakpoint based on your grid's column count."));const i=t>0&&e<t;i!==this.#i&&(this.#i=i,this.#c(),this.emit("responsive-change",{isResponsive:i,width:e,breakpoint:t}),this.requestRender())}#f(e){let t=null;for(const i of this.#l)e<=i.maxWidth&&(t=i);if(t!==this.#d){this.#d=t,t?.hiddenColumns?this.#g(t.hiddenColumns):this.#g(this.config.hiddenColumns);const i=!0===t?.cardLayout;i!==this.#i&&(this.#i=i,this.#c()),this.emit("responsive-change",{isResponsive:this.#i,width:e,breakpoint:t?.maxWidth??0}),this.requestRender()}}#w;#c(){this.gridElement.toggleAttribute("data-responsive",this.#i);const e=!1!==this.config.animate;this.gridElement.toggleAttribute("data-responsive-animate",e),this.config.animationDuration&&this.gridElement.style.setProperty("--tbw-responsive-duration",`${this.config.animationDuration}ms`);const t=this.grid;if(this.#i){t._virtualization&&(this.#w=t._virtualization.rowHeight);const e=this.gridElement.querySelector(".tbw-scroll-area");e&&(e.scrollLeft=0)}else{const e=this.gridElement.querySelectorAll(".data-grid-row");for(const t of e)t.style.height="",t.classList.remove("responsive-card");this.#w&&this.#w>0&&t._virtualization&&(t._virtualization.rowHeight=this.#w,this.#w=void 0),this.#m=void 0,this.#v=void 0,this.#b=void 0}}renderRow(e,t,i){if(!this.#i||!this.config.cardRenderer)return;if(e.__isGroupRow)return;t.replaceChildren();const r=this.config.cardRenderer(e,i);t.className="data-grid-row responsive-card";const o=this.config.cardRowHeight??"auto";return t.style.height="auto"!==o?`${o}px`:"auto",t.appendChild(r),!0}onKeyDown(e){if(!this.#i)return!1;if(this.config.cardRenderer){if(["ArrowUp","ArrowDown","ArrowLeft","ArrowRight"].includes(e.key))return!1}const t=this.rows.length-1,i=this.visibleColumns.length-1;switch(e.key){case"ArrowDown":if(this.grid._focusCol<i)return this.grid._focusCol+=1,e.preventDefault(),h(this.grid),!0;if(this.grid._focusRow<t)return this.grid._focusRow+=1,this.grid._focusCol=0,e.preventDefault(),h(this.grid),!0;break;case"ArrowUp":if(this.grid._focusCol>0)return this.grid._focusCol-=1,e.preventDefault(),h(this.grid),!0;if(this.grid._focusRow>0)return this.grid._focusRow-=1,this.grid._focusCol=i,e.preventDefault(),h(this.grid),!0;break;case"ArrowRight":if(this.grid._focusRow<t)return this.grid._focusRow+=1,e.preventDefault(),h(this.grid),!0;break;case"ArrowLeft":if(this.grid._focusRow>0)return this.grid._focusRow-=1,e.preventDefault(),h(this.grid),!0}return!1}#m;#v;#b;#R(){if(this.#m&&this.#m>0)return this.#m;const e=this.config.cardRowHeight;return"number"==typeof e&&e>0?e:80}#C(){return this.#v&&this.#v>0?this.#v:this.#w??28}#y(){for(const e of this.rows)if(e.__isGroupRow)return!0;return!1}#_(){let e=0,t=0;for(const i of this.rows)i.__isGroupRow?e++:t++;return{groupCount:e,cardCount:t}}getExtraHeight(){if(!this.#i||!this.config.cardRenderer)return 0;if(!this.#y())return 0;const e=this.#w??28,t=this.#C(),i=this.#R(),{groupCount:r,cardCount:o}=this.#_();return r*Math.max(0,t-e)+o*Math.max(0,i-e)}getExtraHeightBefore(e){if(!this.#i||!this.config.cardRenderer)return 0;if(!this.#y())return 0;const t=this.#w??28,i=this.#C(),r=this.#R(),o=Math.max(0,i-t),s=Math.max(0,r-t);let n=0,a=0;const d=this.rows,l=Math.min(e,d.length);for(let c=0;c<l;c++)d[c].__isGroupRow?n++:a++;return n*o+a*s}getRowHeight(e,t){if(this.#i&&this.config.cardRenderer)return e.__isGroupRow?this.#C():this.#R()}#k(){let e=0;for(const t of this.rows)t.__isGroupRow||e++;return e}#H=!1;#p(){if(!this.#i||!this.config.cardRenderer)return;let e=!1;const t=this.grid,i=this.#y(),r=this.#k();if(r!==this.#b&&(this.#b=r,e=!0),i){const t=this.gridElement.querySelector(".data-grid-row.group-row");if(t){const i=t.getBoundingClientRect().height;i>0&&i!==this.#v&&(this.#v=i,e=!0)}}const o=this.gridElement.querySelector(".data-grid-row.responsive-card");if(o){const r=o.getBoundingClientRect().height;r>0&&r!==this.#m&&(this.#m=r,e=!0,!i&&t._virtualization&&(t._virtualization.rowHeight=r))}e&&!this.#H&&(this.#H=!0,queueMicrotask(()=>{this.#H=!1,this.grid&&this.#i&&this.grid.refreshVirtualWindow?.(!0,!0)}))}}export{f as ResponsivePlugin};
+const e=/{{\s*([^}]+)\s*}}/g,t="__DG_EMPTY__",i=/^[\w$. '?+\-*/%:()!<>=,&|]+$/,r=/__(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/,o=/* @__PURE__ */new Set(["script","iframe","object","embed","form","input","button","textarea","select","link","meta","base","style","template","slot","portal","frame","frameset","applet","noscript","noembed","plaintext","xmp","listing"]),s=/^on\w+$/i,n=/* @__PURE__ */new Set(["href","src","action","formaction","data","srcdoc","xlink:href","poster","srcset"]),a=/^\s*(javascript|vbscript|data|blob):/i;function d(e){if(!e||"string"!=typeof e)return"";if(-1===e.indexOf("<"))return e;const t=document.createElement("template");return t.innerHTML=e,function(e){const t=[],i=e.querySelectorAll("*");for(const r of i){const e=r.tagName.toLowerCase();if(o.has(e)){t.push(r);continue}if("svg"===e||"http://www.w3.org/2000/svg"===r.namespaceURI){if(Array.from(r.attributes).some(e=>s.test(e.name)||"href"===e.name||"xlink:href"===e.name)){t.push(r);continue}}const i=[];for(const t of r.attributes){const e=t.name.toLowerCase();s.test(e)?i.push(t.name):(n.has(e)&&a.test(t.value)||"style"===e&&/expression\s*\(|javascript:|behavior\s*:/i.test(t.value))&&i.push(t.name)}i.forEach(e=>r.removeAttribute(e))}t.forEach(e=>e.remove())}(t.content),t.innerHTML}function l(o,s){if(!o||-1===o.indexOf("{{"))return o;const n=[],a=o.replace(e,(e,o)=>{const a=function(e,o){if(e=(e||"").trim(),!e)return t;if(c.test(e))return t;if("value"===e)return null==o.value?t:String(o.value);if(e.startsWith("row.")&&!/[()?]/.test(e)&&!e.includes(":")){const i=e.slice(4),r=o.row?o.row[i]:void 0;return null==r?t:String(r)}if(e.length>80)return t;if(!i.test(e)||r.test(e))return t;const s=e.match(/\./g);if(s&&s.length>1)return t;try{const i=new Function("value","row",`return (${e});`)(o.value,o.row),r=null==i?"":String(i);return c.test(r)?t:r||t}catch{return t}}(o,s);return n.push({expr:o.trim(),result:a}),a}),d=(l=a)?l.replace(new RegExp(t,"g"),"").replace(/Reflect\.[^<>{}\s]+|\bProxy\b|ownKeys\([^)]*\)/g,""):l;var l;const h=n.length&&n.every(e=>""===e.result||e.result===t);return c.test(o)||h?"":d}const c=/Reflect|Proxy|ownKeys/;document.createElement("template").innerHTML='<div class="cell" role="gridcell" part="cell"></div>';function h(e,t){if(e._virtualization?.enabled){const{rowHeight:t,container:i,viewportEl:r}=e._virtualization,o=i,s=r?.clientHeight??o?.clientHeight??0;if(o&&s>0){const i=e._focusRow*t;i<o.scrollTop?o.scrollTop=i:i+t>o.scrollTop+s&&(o.scrollTop=i-s+t)}}const i=void 0!==e._activeEditRows&&-1!==e._activeEditRows||!!e._isGridEditMode;var r;i||e.refreshVirtualWindow(!1),(r=e._bodyEl)&&r.querySelectorAll(".cell-focus").forEach(e=>e.classList.remove("cell-focus")),Array.from(e._bodyEl.querySelectorAll('[aria-selected="true"]')).forEach(e=>{e.setAttribute("aria-selected","false")});const o=e._focusRow,s=e._virtualization.start??0,n=e._virtualization.end??e._rows.length;if(o>=s&&o<n){const r=e._bodyEl.querySelectorAll(".data-grid-row")[o-s];let n=r?.children[e._focusCol];if(n&&n.classList?.contains("cell")||(n=r?.querySelector(`.cell[data-col="${e._focusCol}"]`)??r?.querySelector(".cell[data-col]")),n){n.classList.add("cell-focus"),n.setAttribute("aria-selected","true");const o=e.querySelector(".tbw-scroll-area");if(o&&n&&(!i||t?.forceHorizontalScroll)){const t=e._getHorizontalScrollOffsets?.(r??void 0,n)??{left:0,right:0};if(!t.skipScroll){const e=n.getBoundingClientRect(),i=o.getBoundingClientRect(),r=e.left-i.left+o.scrollLeft,s=r+e.width,a=o.scrollLeft+t.left,d=o.scrollLeft+o.clientWidth-t.right;r<a?o.scrollLeft=r-t.left:s>d&&(o.scrollLeft=s-o.clientWidth+t.right)}}if(i&&n.classList.contains("editing")){const e=n.querySelector('input,select,textarea,[contenteditable="true"],[contenteditable=""],[tabindex]:not([tabindex="-1"])');if(e&&document.activeElement!==e)try{e.focus({preventScroll:!0})}catch{}}else if(i&&!n.contains(document.activeElement)){n.hasAttribute("tabindex")||n.setAttribute("tabindex","-1");try{n.focus({preventScroll:!0})}catch{}}else i||document.activeElement!==e&&e.focus({preventScroll:!0})}}}document.createElement("template").innerHTML='<div class="data-grid-row" role="row" part="row"></div>';const u='<svg viewBox="0 0 16 16" width="12" height="12"><path fill="currentColor" d="M6 10.5a.5.5 0 0 1 .5-.5h3a.5.5 0 0 1 0 1h-3a.5.5 0 0 1-.5-.5zm-2-3a.5.5 0 0 1 .5-.5h7a.5.5 0 0 1 0 1h-7a.5.5 0 0 1-.5-.5zm-2-3a.5.5 0 0 1 .5-.5h11a.5.5 0 0 1 0 1h-11a.5.5 0 0 1-.5-.5z"/></svg>',g={expand:"▶",collapse:"▼",sortAsc:"▲",sortDesc:"▼",sortNone:"⇅",submenuArrow:"▶",dragHandle:"⋮⋮",toolPanel:"☰",filter:u,filterActive:u,print:"🖨️"};class p{static dependencies;static manifest;aliases;version="undefined"!=typeof __GRID_VERSION__?__GRID_VERSION__:"dev";styles;cellRenderers;headerRenderers;cellEditors;grid;config;userConfig;#e;get defaultConfig(){return{}}constructor(e={}){this.userConfig=e}attach(e){this.#e?.abort(),this.#e=new AbortController,this.grid=e,this.config={...this.defaultConfig,...this.userConfig}}detach(){this.#e?.abort(),this.#e=void 0}getPlugin(e){return this.grid?.getPlugin(e)}emit(e,t){this.grid?.dispatchEvent?.(new CustomEvent(e,{detail:t,bubbles:!0}))}emitCancelable(e,t){const i=new CustomEvent(e,{detail:t,bubbles:!0,cancelable:!0});return this.grid?.dispatchEvent?.(i),i.defaultPrevented}on(e,t){this.grid?._pluginManager?.subscribe(this,e,t)}off(e){this.grid?._pluginManager?.unsubscribe(this,e)}emitPluginEvent(e,t){this.grid?._pluginManager?.emitPluginEvent(e,t)}requestRender(){this.grid?.requestRender?.()}requestColumnsRender(){this.grid?.requestColumnsRender?.()}requestRenderWithFocus(){this.grid?.requestRenderWithFocus?.()}requestAfterRender(){this.grid?.requestAfterRender?.()}requestVirtualRefresh(){this.grid?.requestVirtualRefresh?.()}get rows(){return this.grid?.rows??[]}get sourceRows(){return this.grid?.sourceRows??[]}get columns(){return this.grid?.columns??[]}get visibleColumns(){return this.grid?._visibleColumns??[]}get gridElement(){return this.grid?._hostElement}get disconnectSignal(){return this.#e?.signal??this.grid?.disconnectSignal}get gridIcons(){const e=this.grid?.gridConfig?.icons??{};return{...g,...e}}get isAnimationEnabled(){const e=this.grid?.effectiveConfig?.animation?.mode??"reduced-motion";if(!1===e||"off"===e)return!1;if(!0===e||"on"===e)return!0;const t=this.gridElement;if(t){return"0"!==getComputedStyle(t).getPropertyValue("--tbw-animation-enabled").trim()}return!0}get animationDuration(){const e=this.gridElement;if(e){const t=getComputedStyle(e).getPropertyValue("--tbw-animation-duration").trim(),i=parseInt(t,10);if(!isNaN(i))return i}return 200}resolveIcon(e,t){return void 0!==t?t:this.gridIcons[e]}setIcon(e,t){"string"==typeof t?e.innerHTML=t:t instanceof HTMLElement&&(e.innerHTML="",e.appendChild(t.cloneNode(!0)))}warn(e){var t,i;console.warn(`${t=this.gridElement.id,i=this.name,`[tbw-grid${t?`#${t}`:""}${i?`:${i}`:""}]`} ${e}`)}}class f extends p{name="responsive";version="1.0.0";styles='tbw-grid[data-responsive-animate] .data-grid-row,tbw-grid[data-responsive-animate] .data-grid-row>.cell{transition:opacity var(--tbw-responsive-duration, .2s) ease-out,transform var(--tbw-responsive-duration, .2s) ease-out}tbw-grid[data-responsive][data-responsive-animate] .data-grid-row{animation:responsive-card-enter var(--tbw-responsive-duration, .2s) ease-out}@keyframes responsive-card-enter{0%{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:translateY(0)}}tbw-grid[data-responsive] .header{display:none!important}tbw-grid[data-responsive] .footer-row{display:none}tbw-grid[data-responsive] .tbw-scroll-area{overflow-x:hidden;min-width:0!important}tbw-grid[data-responsive] .rows-body-wrapper{min-width:0!important}tbw-grid[data-responsive] .data-grid-row:not(.group-row){display:block!important;grid-template-columns:none!important;padding:var(--tbw-cell-padding);padding-inline-start:var(--tbw-spacing-xl);border-bottom:1px solid var(--tbw-color-border);min-height:auto!important;height:auto!important;contain:none!important;content-visibility:visible!important;background:var(--tbw-color-bg);position:relative}tbw-grid[data-responsive] .data-grid-row:not(.group-row):nth-child(2n){background:var(--tbw-color-row-alt)}tbw-grid[data-responsive] .data-grid-row:not(.group-row):hover{background:var(--tbw-color-row-hover)}tbw-grid[data-responsive] .data-grid-row:not(.group-row)[aria-selected=true]{background:var(--tbw-color-selection)}tbw-grid[data-responsive] .data-grid-row:not(.group-row)[aria-selected=true]:before{content:"";position:absolute;inset-inline-start:0;top:0;bottom:0;width:4px;background:var(--tbw-color-accent)}tbw-grid[data-responsive] .data-grid-row:not(.group-row)>.cell{display:flex!important;justify-content:space-between;align-items:center;padding:var(--tbw-spacing-xs) var(--tbw-spacing-md);width:100%!important;min-width:0!important;min-height:auto!important;height:auto!important;line-height:1.5!important;position:static!important;left:auto!important;right:auto!important;border:none!important;border-bottom:none!important;border-inline-end:none!important;background:transparent!important;white-space:normal!important;overflow:visible!important}tbw-grid[data-responsive] .data-grid-row:not(.group-row)>.cell:before{content:attr(data-header) ": ";font-weight:600;color:var(--tbw-color-header-fg);flex-shrink:0;margin-inline-end:var(--tbw-spacing-md);min-width:100px}tbw-grid[data-responsive] .data-grid-row:not(.group-row)>.cell:after{content:none}tbw-grid[data-responsive] .cell[data-utility]{display:none!important}tbw-grid[data-responsive] .data-grid-row>.cell[data-responsive-hidden]{display:none!important}tbw-grid[data-responsive] .data-grid-row>.cell[data-responsive-value-only]{justify-content:flex-start!important;font-weight:500}tbw-grid[data-responsive] .data-grid-row>.cell[data-responsive-value-only]:before{display:none!important}tbw-grid:not([data-responsive]) .cell[data-responsive-hidden]{display:none!important}tbw-grid[data-responsive] .tbw-footer,tbw-grid[data-responsive] .tbw-pinned-rows,tbw-grid[data-responsive] .tbw-aggregation-rows{display:none!important}tbw-grid[data-responsive] .tbw-pinned-rows,tbw-grid[data-responsive] .tbw-aggregation-rows,tbw-grid[data-responsive] .tbw-aggregation-row{min-width:0!important}tbw-grid[data-responsive] .data-grid-row.responsive-card{display:block!important;padding:var(--tbw-cell-padding);border-bottom:1px solid var(--tbw-color-border)}tbw-grid[data-responsive] .data-grid-row.responsive-card>*{width:100%}tbw-grid[data-responsive] .data-grid-row.responsive-card .cell:before{display:none}';static manifest={incompatibleWith:[{name:"groupingRows",reason:"Responsive card layout does not yet support row grouping. The variable row heights (cards vs group headers) cause scroll calculation issues."}],queries:[{type:"isCardMode",description:"Returns whether the grid is currently in responsive card mode"}]};#t;#i=!1;#r;#o=!1;#s=0;#n=/* @__PURE__ */new Set;#a=/* @__PURE__ */new Set;#d=null;#l=[];get#c(){return this.grid}isResponsive(){return this.#i}setResponsive(e){e!==this.#i&&(this.#i=e,this.#h(),this.emit("responsive-change",{isResponsive:e,width:this.#s,breakpoint:this.config.breakpoint??0}),this.requestRender())}setBreakpoint(e){this.config.breakpoint=e,this.#u(this.#s)}setCardRenderer(e){this.config.cardRenderer=e,this.#i&&this.requestRender()}getWidth(){return this.#s}getActiveBreakpoint(){return this.#d}attach(e){super.attach(e),this.#g(),this.#p(this.config.hiddenColumns),this.config.breakpoints?.length&&(this.#l=[...this.config.breakpoints].sort((e,t)=>t.maxWidth-e.maxWidth)),this.#t=new ResizeObserver(e=>{const t=e[0]?.contentRect.width??0;this.#s=t,clearTimeout(this.#r),this.#r=setTimeout(()=>{this.#u(t)},this.config.debounceMs??100)}),this.#t.observe(this.gridElement)}#g(){const e=this.gridElement;if(!e)return;const t=e.querySelector("tbw-grid-responsive-card");if(!t)return;const i=this.#c.__frameworkAdapter;if(i?.parseResponsiveCardElement){const e=i.parseResponsiveCardElement(t);e&&(this.config={...this.config,cardRenderer:e})}const r=t.getAttribute("breakpoint"),o=t.getAttribute("card-row-height"),s=t.getAttribute("hidden-columns"),n=t.getAttribute("hide-header"),a=t.getAttribute("debounce-ms"),c={};if(null!==r){const e=parseInt(r,10);isNaN(e)||(c.breakpoint=e)}if(null!==o&&(c.cardRowHeight="auto"===o?"auto":parseInt(o,10)),null!==s&&(c.hiddenColumns=s.split(",").map(e=>e.trim()).filter(e=>e.length>0)),null!==n&&(c.hideHeader="false"!==n),null!==a){const e=parseInt(a,10);isNaN(e)||(c.debounceMs=e)}const h=t.innerHTML.trim();!h||this.config.cardRenderer||i?.parseResponsiveCardElement||(c.cardRenderer=e=>{const t=d(l(h,{value:e,row:e})),i=document.createElement("div");return i.className="tbw-responsive-card-content",i.innerHTML=t,i}),Object.keys(c).length>0&&(this.config={...this.config,...c})}#p(e){if(this.#n.clear(),this.#a.clear(),e)for(const t of e)"string"==typeof t?this.#n.add(t):t.showValue?this.#a.add(t.field):this.#n.add(t.field)}detach(){this.#t?.disconnect(),this.#t=void 0,clearTimeout(this.#r),this.#r=void 0,this.gridElement&&this.gridElement.removeAttribute("data-responsive"),super.detach()}handleQuery(e){if("isCardMode"===e.type)return this.#i}afterRender(){this.#f();if(!(this.#l.length>0?null!==this.#d:this.#i))return;const e=this.#n.size>0,t=this.#a.size>0;if(!e&&!t)return;const i=this.gridElement.querySelectorAll(".cell[data-field]");for(const r of i){const e=r.getAttribute("data-field");e&&(this.#n.has(e)?(r.setAttribute("data-responsive-hidden",""),r.removeAttribute("data-responsive-value-only")):this.#a.has(e)?(r.setAttribute("data-responsive-value-only",""),r.removeAttribute("data-responsive-hidden")):(r.removeAttribute("data-responsive-hidden"),r.removeAttribute("data-responsive-value-only")))}}#u(e){if(this.#l.length>0)return void this.#w(e);const t=this.config.breakpoint??0;0!==t||this.#o||(this.#o=!0,console.warn("[tbw-grid:ResponsivePlugin] No breakpoint configured. Responsive mode is disabled. Set a breakpoint based on your grid's column count."));const i=t>0&&e<t;i!==this.#i&&(this.#i=i,this.#h(),this.emit("responsive-change",{isResponsive:i,width:e,breakpoint:t}),this.requestRender())}#w(e){let t=null;for(const i of this.#l)e<=i.maxWidth&&(t=i);if(t!==this.#d){this.#d=t,t?.hiddenColumns?this.#p(t.hiddenColumns):this.#p(this.config.hiddenColumns);const i=!0===t?.cardLayout;i!==this.#i&&(this.#i=i,this.#h()),this.emit("responsive-change",{isResponsive:this.#i,width:e,breakpoint:t?.maxWidth??0}),this.requestRender()}}#m;#h(){this.gridElement.toggleAttribute("data-responsive",this.#i);const e=!1!==this.config.animate;this.gridElement.toggleAttribute("data-responsive-animate",e),this.config.animationDuration&&this.gridElement.style.setProperty("--tbw-responsive-duration",`${this.config.animationDuration}ms`);const t=this.#c;if(this.#i){t._virtualization&&(this.#m=t._virtualization.rowHeight);const e=this.gridElement.querySelector(".tbw-scroll-area");e&&(e.scrollLeft=0)}else{const e=this.gridElement.querySelectorAll(".data-grid-row");for(const t of e)t.style.height="",t.classList.remove("responsive-card");this.#m&&this.#m>0&&t._virtualization&&(t._virtualization.rowHeight=this.#m,this.#m=void 0),this.#v=void 0,this.#b=void 0,this.#R=void 0}}renderRow(e,t,i){if(!this.#i||!this.config.cardRenderer)return;if(e.__isGroupRow)return;t.replaceChildren();const r=this.config.cardRenderer(e,i);t.className="data-grid-row responsive-card";const o=this.config.cardRowHeight;return t.style.height="auto"===o||void 0===o?"auto":`${this.#C()}px`,t.appendChild(r),!0}onKeyDown(e){if(!this.#i)return!1;if(this.config.cardRenderer){if(["ArrowUp","ArrowDown","ArrowLeft","ArrowRight"].includes(e.key))return!1}const t=this.rows.length-1,i=this.visibleColumns.length-1;switch(e.key){case"ArrowDown":if(this.grid._focusCol<i)return this.grid._focusCol+=1,e.preventDefault(),h(this.#c),!0;if(this.grid._focusRow<t)return this.grid._focusRow+=1,this.grid._focusCol=0,e.preventDefault(),h(this.#c),!0;break;case"ArrowUp":if(this.grid._focusCol>0)return this.grid._focusCol-=1,e.preventDefault(),h(this.#c),!0;if(this.grid._focusRow>0)return this.grid._focusRow-=1,this.grid._focusCol=i,e.preventDefault(),h(this.#c),!0;break;case"ArrowRight":if(this.grid._focusRow<t)return this.grid._focusRow+=1,e.preventDefault(),h(this.#c),!0;break;case"ArrowLeft":if(this.grid._focusRow>0)return this.grid._focusRow-=1,e.preventDefault(),h(this.#c),!0}return!1}#v;#b;#R;#C(){if(this.#v&&this.#v>0)return this.#v;const e=this.config.cardRowHeight;return"number"==typeof e&&e>0?e:80}#y(){return this.#b&&this.#b>0?this.#b:this.#m??28}#_(){for(const e of this.rows)if(e.__isGroupRow)return!0;return!1}#k(){let e=0,t=0;for(const i of this.rows)i.__isGroupRow?e++:t++;return{groupCount:e,cardCount:t}}getExtraHeight(){if(!this.#i||!this.config.cardRenderer)return 0;if(!this.#_())return 0;const e=this.#m??28,t=this.#y(),i=this.#C(),{groupCount:r,cardCount:o}=this.#k();return r*Math.max(0,t-e)+o*Math.max(0,i-e)}getExtraHeightBefore(e){if(!this.#i||!this.config.cardRenderer)return 0;if(!this.#_())return 0;const t=this.#m??28,i=this.#y(),r=this.#C(),o=Math.max(0,i-t),s=Math.max(0,r-t);let n=0,a=0;const d=this.rows,l=Math.min(e,d.length);for(let c=0;c<l;c++)d[c].__isGroupRow?n++:a++;return n*o+a*s}getRowHeight(e,t){if(this.#i&&this.config.cardRenderer)return e.__isGroupRow?this.#y():this.#C()}#H(){let e=0;for(const t of this.rows)t.__isGroupRow||e++;return e}#S=!1;#f(){if(!this.#i||!this.config.cardRenderer)return;let e=!1;const t=this.#c,i=this.#_(),r=this.#H();if(r!==this.#R&&(this.#R=r,e=!0),i){const t=this.gridElement.querySelector(".data-grid-row.group-row");if(t){const i=t.getBoundingClientRect().height;i>0&&i!==this.#b&&(this.#b=i,e=!0)}}const o=this.gridElement.querySelector(".data-grid-row.responsive-card");if(o){const r=o.getBoundingClientRect().height;r>0&&r!==this.#v&&(this.#v=r,e=!0,!i&&t._virtualization&&(t._virtualization.rowHeight=r))}e&&!this.#S&&(this.#S=!0,queueMicrotask(()=>{this.#S=!1,this.grid&&this.#i&&this.#c.refreshVirtualWindow?.(!0,!0)}))}}export{f as ResponsivePlugin};
 //# sourceMappingURL=index.js.map