@toolbox-web/grid 1.26.2 → 1.27.0

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

@@ -53,7 +53,7 @@ export declare class ResponsivePlugin<T = unknown> extends BaseGridPlugin<Respon
     readonly version = "1.0.0";
     readonly styles: string;
     /**
-     * Plugin manifest declaring incompatibilities with other plugins.
+     * Plugin manifest declaring queries this plugin handles.
      */
     static readonly manifest: PluginManifest;
     /**

package/lib/plugins/responsive/index.js

@@ -1,2 +1,2 @@
-function e(e,t){return`[tbw-grid${e?`#${e}`:""}${t?`:${t}`:""}]`}function t(t,i,r,o){return`${e(r,o)} ${t}: ${i}\n\n  → More info: ${function(e){return`https://toolboxjs.com/grid/errors#${e.toLowerCase()}`}(t)}`}const i=/{{\s*([^}]+)\s*}}/g,r="__DG_EMPTY__",o=/^[\w$. '?+\-*/%:()!<>=,&|]+$/,n=/__(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/,s=/* @__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"]),a=/^on\w+$/i,d=/* @__PURE__ */new Set(["href","src","action","formaction","data","srcdoc","xlink:href","poster","srcset"]),l=/^\s*(javascript|vbscript|data|blob):/i;function c(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(s.has(e)){t.push(r);continue}if("svg"===e||"http://www.w3.org/2000/svg"===r.namespaceURI){if(Array.from(r.attributes).some(e=>a.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();a.test(e)?i.push(t.name):(d.has(e)&&l.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 h(e,t){if(!e||-1===e.indexOf("{{"))return e;const s=[],a=e.replace(i,(e,i)=>{const a=function(e,t){if(e=(e||"").trim(),!e)return r;if(u.test(e))return r;if("value"===e)return null==t.value?r:String(t.value);if(e.startsWith("row.")&&!/[()?]/.test(e)&&!e.includes(":")){const i=e.slice(4),o=t.row?t.row[i]:void 0;return null==o?r:String(o)}if(e.length>80)return r;if(!o.test(e)||n.test(e))return r;const i=e.match(/\./g);if(i&&i.length>1)return r;try{const i=new Function("value","row",`return (${e});`)(t.value,t.row),o=null==i?"":String(i);return u.test(o)?r:o||r}catch{return r}}(i,t);return s.push({expr:i.trim(),result:a}),a}),d=(l=a)?l.replace(new RegExp(r,"g"),"").replace(/Reflect\.[^<>{}\s]+|\bProxy\b|ownKeys\([^)]*\)/g,""):l;var l;const c=s.length&&s.every(e=>""===e.result||e.result===r);return u.test(e)||c?"":d}const u=/Reflect|Proxy|ownKeys/;document.createElement("template").innerHTML='<div class="cell" role="gridcell" part="cell"></div>';function g(e,t){if(e._virtualization?.enabled){const{rowHeight:t,container:i,viewportEl:r}=e._virtualization,o=i,n=r?.clientHeight??o?.clientHeight??0;if(o&&n>0){const i=e._focusRow*t;i<o.scrollTop?o.scrollTop=i:i+t>o.scrollTop+n&&(o.scrollTop=i-n+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,n=e._virtualization.start??0,s=e._virtualization.end??e._rows.length;if(o>=n&&o<s){const r=e._bodyEl.querySelectorAll(".data-grid-row")[o-n];let s=r?.children[e._focusCol];if(s&&s.classList?.contains("cell")||(s=r?.querySelector(`.cell[data-col="${e._focusCol}"]`)??r?.querySelector(".cell[data-col]")),s){s.classList.add("cell-focus"),s.setAttribute("aria-selected","true");const o=e.querySelector(".tbw-scroll-area");if(o&&s&&(!i||t?.forceHorizontalScroll)){const t=e._getHorizontalScrollOffsets?.(r??void 0,s)??{left:0,right:0};if(!t.skipScroll){const e=s.getBoundingClientRect(),i=o.getBoundingClientRect(),r=e.left-i.left+o.scrollLeft,n=r+e.width,a=o.scrollLeft+t.left,d=o.scrollLeft+o.clientWidth-t.right;r<a?o.scrollLeft=r-t.left:n>d&&(o.scrollLeft=n-o.clientWidth+t.right)}}if(i&&s.classList.contains("editing")){const e=s.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&&!s.contains(document.activeElement)){s.hasAttribute("tabindex")||s.setAttribute("tabindex","-1");try{s.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 p='<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>',f={expand:"▶",collapse:"▼",sortAsc:"▲",sortDesc:"▼",sortNone:"⇅",submenuArrow:"▶",dragHandle:"⋮⋮",toolPanel:"☰",filter:p,filterActive:p,print:"🖨️"};class w{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{...f,...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(i,r){void 0!==r?console.warn(t(i,r,this.gridElement.id,this.name)):console.warn(`${e(this.gridElement.id,this.name)} ${i}`)}throwDiagnostic(e,i){throw new Error(t(e,i,this.gridElement.id,this.name))}}class m extends w{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;#n=0;#s=/* @__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.#n,breakpoint:this.config.breakpoint??0}),this.requestRender())}setBreakpoint(e){this.config.breakpoint=e,this.#u(this.#n)}setCardRenderer(e){this.config.cardRenderer=e,this.#i&&this.requestRender()}getWidth(){return this.#n}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.#n=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"),n=t.getAttribute("hidden-columns"),s=t.getAttribute("hide-header"),a=t.getAttribute("debounce-ms"),d={};if(null!==r){const e=parseInt(r,10);isNaN(e)||(d.breakpoint=e)}if(null!==o&&(d.cardRowHeight="auto"===o?"auto":parseInt(o,10)),null!==n&&(d.hiddenColumns=n.split(",").map(e=>e.trim()).filter(e=>e.length>0)),null!==s&&(d.hideHeader="false"!==s),null!==a){const e=parseInt(a,10);isNaN(e)||(d.debounceMs=e)}const l=t.innerHTML.trim();!l||this.config.cardRenderer||i?.parseResponsiveCardElement||(d.cardRenderer=e=>{const t=c(h(l,{value:e,row:e})),i=document.createElement("div");return i.className="tbw-responsive-card-content",i.innerHTML=t,i}),Object.keys(d).length>0&&(this.config={...this.config,...d})}#p(e){if(this.#s.clear(),this.#a.clear(),e)for(const t of e)"string"==typeof t?this.#s.add(t):t.showValue?this.#a.add(t.field):this.#s.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.#s.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.#s.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,this.warn("TBW110","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(),g(this.#c),!0;if(this.grid._focusRow<t)return this.grid._focusRow+=1,this.grid._focusCol=0,e.preventDefault(),g(this.#c),!0;break;case"ArrowUp":if(this.grid._focusCol>0)return this.grid._focusCol-=1,e.preventDefault(),g(this.#c),!0;if(this.grid._focusRow>0)return this.grid._focusRow-=1,this.grid._focusCol=i,e.preventDefault(),g(this.#c),!0;break;case"ArrowRight":if(this.grid._focusRow<t)return this.grid._focusRow+=1,e.preventDefault(),g(this.#c),!0;break;case"ArrowLeft":if(this.grid._focusRow>0)return this.grid._focusRow-=1,e.preventDefault(),g(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),n=Math.max(0,r-t);let s=0,a=0;const d=this.rows,l=Math.min(e,d.length);for(let c=0;c<l;c++)d[c].__isGroupRow?s++:a++;return s*o+a*n}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)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.config.cardRenderer?".data-grid-row.responsive-card":".data-grid-row:not(.group-row)",n=this.gridElement.querySelector(o);if(n){const r=n.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{m as ResponsivePlugin};
+function e(e,t){return`[tbw-grid${e?`#${e}`:""}${t?`:${t}`:""}]`}function t(t,i,r,o){return`${e(r,o)} ${t}: ${i}\n\n  → More info: ${function(e){return`https://toolboxjs.com/grid/errors#${e.toLowerCase()}`}(t)}`}const i=/{{\s*([^}]+)\s*}}/g,r="__DG_EMPTY__",o=/^[\w$. '?+\-*/%:()!<>=,&|]+$/,n=/__(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/,s=/* @__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"]),a=/^on\w+$/i,d=/* @__PURE__ */new Set(["href","src","action","formaction","data","srcdoc","xlink:href","poster","srcset"]),l=/^\s*(javascript|vbscript|data|blob):/i;function c(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(s.has(e)){t.push(r);continue}if("svg"===e||"http://www.w3.org/2000/svg"===r.namespaceURI){if(Array.from(r.attributes).some(e=>a.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();a.test(e)?i.push(t.name):(d.has(e)&&l.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 h(e,t){if(!e||-1===e.indexOf("{{"))return e;const s=[],a=e.replace(i,(e,i)=>{const a=function(e,t){if(e=(e||"").trim(),!e)return r;if(u.test(e))return r;if("value"===e)return null==t.value?r:String(t.value);if(e.startsWith("row.")&&!/[()?]/.test(e)&&!e.includes(":")){const i=e.slice(4),o=t.row?t.row[i]:void 0;return null==o?r:String(o)}if(e.length>80)return r;if(!o.test(e)||n.test(e))return r;const i=e.match(/\./g);if(i&&i.length>1)return r;try{const i=new Function("value","row",`return (${e});`)(t.value,t.row),o=null==i?"":String(i);return u.test(o)?r:o||r}catch{return r}}(i,t);return s.push({expr:i.trim(),result:a}),a}),d=(l=a)?l.replace(new RegExp(r,"g"),"").replace(/Reflect\.[^<>{}\s]+|\bProxy\b|ownKeys\([^)]*\)/g,""):l;var l;const c=s.length&&s.every(e=>""===e.result||e.result===r);return u.test(e)||c?"":d}const u=/Reflect|Proxy|ownKeys/;document.createElement("template").innerHTML='<div class="cell" role="gridcell" part="cell"></div>';function g(e,t){if(e._virtualization?.enabled){const{rowHeight:t,container:i,viewportEl:r}=e._virtualization,o=i,n=r?.clientHeight??o?.clientHeight??0;if(o&&n>0){const i=e._focusRow*t;i<o.scrollTop?o.scrollTop=i:i+t>o.scrollTop+n&&(o.scrollTop=i-n+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,n=e._virtualization.start??0,s=e._virtualization.end??e._rows.length;if(o>=n&&o<s){const r=e._bodyEl.querySelectorAll(".data-grid-row")[o-n];let s=r?.children[e._focusCol];if(s&&s.classList?.contains("cell")||(s=r?.querySelector(`.cell[data-col="${e._focusCol}"]`)??r?.querySelector(".cell[data-col]")),s){s.classList.add("cell-focus"),s.setAttribute("aria-selected","true");const o=e.querySelector(".tbw-scroll-area");if(o&&s&&(!i||t?.forceHorizontalScroll)){const t=e._getHorizontalScrollOffsets?.(r??void 0,s)??{left:0,right:0};if(!t.skipScroll){const e=s.getBoundingClientRect(),i=o.getBoundingClientRect(),r=e.left-i.left+o.scrollLeft,n=r+e.width,a=o.scrollLeft+t.left,d=o.scrollLeft+o.clientWidth-t.right;r<a?o.scrollLeft=r-t.left:n>d&&(o.scrollLeft=n-o.clientWidth+t.right)}}if(i&&s.classList.contains("editing")){const e=s.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&&!s.contains(document.activeElement)){s.hasAttribute("tabindex")||s.setAttribute("tabindex","-1");try{s.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 p='<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>',f={expand:"▶",collapse:"▼",sortAsc:"▲",sortDesc:"▼",sortNone:"⇅",submenuArrow:"▶",dragHandle:"⋮⋮",toolPanel:"☰",filter:p,filterActive:p,print:"🖨️"};class w{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{...f,...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(i,r){void 0!==r?console.warn(t(i,r,this.gridElement.id,this.name)):console.warn(`${e(this.gridElement.id,this.name)} ${i}`)}throwDiagnostic(e,i){throw new Error(t(e,i,this.gridElement.id,this.name))}}class m extends w{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={queries:[{type:"isCardMode",description:"Returns whether the grid is currently in responsive card mode"}]};#t;#i=!1;#r;#o=!1;#n=0;#s=/* @__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.#n,breakpoint:this.config.breakpoint??0}),this.requestRender())}setBreakpoint(e){this.config.breakpoint=e,this.#u(this.#n)}setCardRenderer(e){this.config.cardRenderer=e,this.#i&&this.requestRender()}getWidth(){return this.#n}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.#n=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"),n=t.getAttribute("hidden-columns"),s=t.getAttribute("hide-header"),a=t.getAttribute("debounce-ms"),d={};if(null!==r){const e=parseInt(r,10);isNaN(e)||(d.breakpoint=e)}if(null!==o&&(d.cardRowHeight="auto"===o?"auto":parseInt(o,10)),null!==n&&(d.hiddenColumns=n.split(",").map(e=>e.trim()).filter(e=>e.length>0)),null!==s&&(d.hideHeader="false"!==s),null!==a){const e=parseInt(a,10);isNaN(e)||(d.debounceMs=e)}const l=t.innerHTML.trim();!l||this.config.cardRenderer||i?.parseResponsiveCardElement||(d.cardRenderer=e=>{const t=c(h(l,{value:e,row:e})),i=document.createElement("div");return i.className="tbw-responsive-card-content",i.innerHTML=t,i}),Object.keys(d).length>0&&(this.config={...this.config,...d})}#p(e){if(this.#s.clear(),this.#a.clear(),e)for(const t of e)"string"==typeof t?this.#s.add(t):t.showValue?this.#a.add(t.field):this.#s.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.#s.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.#s.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,this.warn("TBW110","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(),g(this.#c),!0;if(this.grid._focusRow<t)return this.grid._focusRow+=1,this.grid._focusCol=0,e.preventDefault(),g(this.#c),!0;break;case"ArrowUp":if(this.grid._focusCol>0)return this.grid._focusCol-=1,e.preventDefault(),g(this.#c),!0;if(this.grid._focusRow>0)return this.grid._focusRow-=1,this.grid._focusCol=i,e.preventDefault(),g(this.#c),!0;break;case"ArrowRight":if(this.grid._focusRow<t)return this.grid._focusRow+=1,e.preventDefault(),g(this.#c),!0;break;case"ArrowLeft":if(this.grid._focusRow>0)return this.grid._focusRow-=1,e.preventDefault(),g(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),n=Math.max(0,r-t);let s=0,a=0;const d=this.rows,l=Math.min(e,d.length);for(let c=0;c<l;c++)d[c].__isGroupRow?s++:a++;return s*o+a*n}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)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.config.cardRenderer?".data-grid-row.responsive-card":".data-grid-row:not(.group-row)",n=this.gridElement.querySelector(o);if(n){const r=n.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{m as ResponsivePlugin};
 //# sourceMappingURL=index.js.map