@vielzeug/refine 26.10.7 → 26.10.9

package/dist/datagrid.cjs

@@ -1,11 +1,11 @@
-Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require("./styles/mixins/table-base.css.cjs"),t=require("./_dev.cjs"),n=require("./shared/prop-bundles.cjs"),r=require("./icon.cjs"),i=require("./button.cjs"),a=require("./checkbox.cjs"),o=require("./combobox.cjs"),s=require("./inputs/datagrid/datagrid.css.cjs"),c=require("./inputs/datagrid/datagrid-column.cjs"),l=require("./inputs/datagrid/datagrid-labels.cjs"),u=require("./inputs/datagrid/datagrid-model.cjs"),d=require("./inputs/datagrid/datagrid-nav.cjs"),f=require("./select.cjs"),p=require("./popover.cjs");let m=require("@vielzeug/ripple"),h=require("@vielzeug/ore"),g=require("@vielzeug/arsenal");function sortIconName(e,t){return e.key!==t||e.direction===`none`?`chevrons-up-down`:e.direction===`asc`?`chevron-up`:`chevron-down`}function ariaSortValue(e,t){return e.key!==t||e.direction===`none`?`none`:e.direction===`asc`?`ascending`:`descending`}function controlValues(e){let t=e.detail;return Array.isArray(t?.values)?t.values:(e.target.value??``).split(`,`).filter(Boolean)}var _=`ore-datagrid`;(0,h.define)(_,{props:{activeView:h.prop.string(),density:h.prop.string(),...n.disablableBundle,...n.loadableBundle,columns:h.prop.data(),emptyText:h.prop.string(`No data`),expandable:h.prop.bool(!1),filterOptions:h.prop.data(),fullwidth:h.prop.bool(!1),getRowKey:h.prop.data(),label:h.prop.string(),labels:h.prop.data(),pageSize:h.prop.number(10),pageSizeOptions:h.prop.data(),rows:h.prop.data(),searchLabel:h.prop.data(),searchPlaceholder:h.prop.string(),selectedKeys:h.prop.data(),selectionMode:h.prop.string(`none`),sortMode:h.prop.string(`client`),source:h.prop.data(),striped:h.prop.bool(!1),views:h.prop.data()},setup(e){let n=(0,h.getHost)(),r=(0,h.useEmit)(),i=(0,h.useSlots)(),a=(0,m.computed)(()=>({...l.DEFAULT_LABELS,...e.labels.value})),o=(0,m.computed)(()=>e.disabled.value===!0),s=(0,m.computed)(()=>e.selectionMode.value??`none`),f=(0,m.signal)(new Set),p=(0,m.computed)(()=>e.expandable.value===!0&&b.value.some(e=>typeof e.renderExpanded==`function`)),_=(0,m.computed)(()=>+(s.value===`multi`)),v=(0,m.signal)(e.pageSize.value??10);(0,m.watch)(e.pageSize,e=>{e!=null&&(v.value=e)});let y=(0,m.signal)([]);(0,h.onMounted)(()=>{y.value=c.parseColumnChildren(n);let e=new MutationObserver(()=>{y.value=c.parseColumnChildren(n)});return e.observe(n,{attributeFilter:c.COLUMN_OBSERVED_ATTRS,attributes:!0,childList:!0,subtree:!0}),()=>e.disconnect()});let b=(0,m.computed)(()=>{let t=e.columns.value;return t===void 0?y.value:t}),x=(0,m.computed)(()=>{let t=b.value.map(e=>({label:e.label,value:e.key})),n=new Set(t.map(e=>e.value));for(let r of e.filterOptions.value??[])n.has(r.key)||t.push({label:r.label,value:r.key});return t}),resolveKey=t=>{let n=e.getRowKey.value;if(n)return n(t);let r=t.id;return r==null?`__missing_${Math.random().toString(36).slice(2)}`:String(r)},S=(0,m.computed)(()=>e.source.value!=null),C=(0,m.signal)([]),w=(0,m.signal)({error:null,isLoading:!1,pageCount:1,pageNumber:1,pageSize:v.value,totalItems:0}),T=null;(0,h.onCleanup)(()=>{T?.(),T=null}),(0,m.watch)(e.source,e=>{if(T?.(),T=null,!e){C.value=[],w.value={error:null,isLoading:!1,pageCount:1,pageNumber:1,pageSize:v.value,totalItems:0};return}let update=(t=e.state)=>{C.value=t.items,w.value={error:t.error,isLoading:t.loading,pageCount:t.pagination.pageCount,pageNumber:t.pagination.page,pageSize:t.pagination.pageSize,totalItems:t.pagination.totalItems}};update(),T=e.subscribe(update)},{immediate:!0});let E=u.createDataGridModel({activeView:(0,m.computed)(()=>(e.views.value??[]).find(t=>t.id===e.activeView.value)),clientSide:(0,m.computed)(()=>!S.value),columns:b,emptyValueLabel:(0,m.computed)(()=>a.value.emptyValue),filterOperators:(0,m.computed)(()=>[{label:a.value.contains,value:`contains`},{label:a.value.equals,value:`equals`},{label:a.value.greaterThan,value:`gt`},{label:a.value.lessThan,value:`lt`}]),filterOptions:e.filterOptions,getRowKey:resolveKey,items:(0,m.computed)(()=>S.value?C.value:e.rows.value??[]),onSelectionChange:e=>{r(`selection-change`,{keys:[...e],rows:E.selectedRows.value})},onSortChange:e=>{r(`sort-change`,e)},pageSize:(0,m.computed)(()=>S.value?0:v.value),selectionMode:s,sortMode:(0,m.computed)(()=>e.sortMode.value??`client`)}),D=(0,m.computed)(()=>{let e=b.value.find(e=>e.key===E.sortState.value.key);if(e?.sortType)return e.sortType;let t=E.filteredRows.value.find(t=>t[e?.key??``]!=null);return t&&typeof t[e?.key??``]==`number`?`number`:`text`}),O=(0,m.computed)(()=>D.value===`number`?[{label:a.value.numericAscending,value:`asc`},{label:a.value.numericDescending,value:`desc`}]:[{label:a.value.ascending,value:`asc`},{label:a.value.descending,value:`desc`}]),settleSourceCommand=e=>{e&&e.catch(e=>t.warn(`ore-datagrid: source command failed: ${String(e)}`))},setSourceSearch=t=>{settleSourceCommand(e.source.value?.setParams?.(t))},k=(0,g.debounce)(t=>{e.source.value?.setParams?setSourceSearch(t):E.setSearchQuery(t)},250);(0,h.onCleanup)(k.cancel),(0,m.watch)(e.selectedKeys,e=>{Array.isArray(e)&&E.setSelection(new Set(e))},{immediate:!0});let A=(0,m.signal)({}),createColResizeHandler=(e,t)=>n=>{n.preventDefault();let r=n.clientX,i=t.getBoundingClientRect().width,a=new AbortController,{signal:o}=a;window.addEventListener(`pointermove`,t=>{A.value={...A.value,[e]:Math.max(40,i+t.clientX-r)}},{signal:o}),window.addEventListener(`pointerup`,()=>a.abort(),{signal:o})},j=E.visibleColumns,getCellValue=(e,t)=>{if(e.cell)return e.cell(t);let n=t[e.key];return n==null?``:String(n)};function handlePage(t){let n=e.source.value;if(n){settleSourceCommand(t===`prev`?n.previous():n.next());return}t===`prev`?E.prevPage():E.nextPage(),r(`page-change`,{pageIndex:E.pageIndex.value,pageSize:v.value})}let M=(0,m.computed)(()=>{let e=E.currentPageItems.value;return!e.length||E.isAllSelected()?!1:e.some(e=>E.selectedKeys.value.has(resolveKey(e)))}),N=(0,m.computed)(()=>j.value.length+ +(s.value===`multi`)+ +!!p.value),P=(0,m.computed)(()=>S.value?w.value.pageCount>1:v.value>0),F=(0,m.computed)(()=>{if(S.value){let{pageNumber:e,pageSize:t,totalItems:n}=w.value,r=Math.max(1,t);if(!P.value)return a.value.rows(n);if(n===0)return a.value.range(0,0,0);let i=(e-1)*r+1,o=Math.min(i+r-1,n);return a.value.range(i,o,n)}let e=E.totalItems.value;if(!P.value)return a.value.rows(e);if(e===0)return a.value.range(0,0,0);let t=E.pageIndex.value*v.value+1,n=Math.min(t+v.value-1,e);return a.value.range(t,n,e)}),I=(0,m.computed)(()=>e.loading.value===!0||S.value&&w.value.isLoading),L=(0,m.computed)(()=>S.value?w.value.pageNumber>1:E.hasPrevPage.value),R=(0,m.computed)(()=>S.value?w.value.pageNumber<w.value.pageCount:E.hasNextPage.value),z=(0,m.computed)(()=>S.value?w.value.totalItems===0?`0 / 0`:`${w.value.pageNumber} / ${w.value.pageCount}`:`${E.pageIndex.value+1} / ${E.pageCount.value}`),B=[`compact`,`cozy`,`comfortable`],V={comfortable:`rows-2`,compact:`rows-4`,cozy:`rows-3`},H=(0,m.computed)(()=>({comfortable:a.value.comfortableDensity,compact:a.value.compactDensity,cozy:a.value.cozyDensity})),U=(0,m.signal)(e.density.value??`cozy`);(0,m.watch)(e.density,e=>{e&&(U.value=e)});let cycleDensity=()=>{let e=B.indexOf(U.value),t=B[(e+1)%B.length];U.value=t,n.setAttribute(`density`,t),r(`density-change`,{density:t})},toggleExpand=e=>{let t=new Set(f.value),n=!t.has(e);n?t.add(e):t.delete(e),f.value=t,r(`row-expand`,{expanded:n,key:e})},W={activeCell:(0,m.signal)({col:0,row:0}),focusCell:()=>{}};(0,h.onMounted)(()=>{let e=n.shadowRoot,t=e.querySelector(`.dg-table`);if(!t)return;let{cleanup:r,handle:i}=d.createGridNav(t,e);return W=i,r}),n.focusCell=e=>W.focusCell(e);let renderViewTabs=()=>{let t=e.views.value??[],n=e.activeView.value;return h.html`
+Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require("./styles/mixins/table-base.css.cjs"),t=require("./_dev.cjs"),n=require("./shared/types.cjs"),r=require("./shared/prop-bundles.cjs"),i=require("./icon.cjs"),a=require("./button.cjs"),o=require("./checkbox.cjs"),s=require("./combobox.cjs"),c=require("./inputs/datagrid/datagrid.css.cjs"),l=require("./inputs/datagrid/datagrid-column.cjs"),u=require("./inputs/datagrid/datagrid-labels.cjs"),d=require("./inputs/datagrid/datagrid-model.cjs"),f=require("./inputs/datagrid/datagrid-nav.cjs"),p=require("./select.cjs"),m=require("./popover.cjs");let h=require("@vielzeug/ripple"),g=require("@vielzeug/ore"),_=require("@vielzeug/arsenal");var v=[`client`,`server`];function sortIconName(e,t){return e.key!==t||e.direction===`none`?`chevrons-up-down`:e.direction===`asc`?`chevron-up`:`chevron-down`}function ariaSortValue(e,t){return e.key!==t||e.direction===`none`?`none`:e.direction===`asc`?`ascending`:`descending`}function controlValues(e){let t=e.detail;return Array.isArray(t?.values)?t.values:(e.target.value??``).split(`,`).filter(Boolean)}var y=`ore-datagrid`;(0,g.define)(y,{props:{activeView:g.prop.string(),density:g.prop.oneOf(n.DENSITY_LEVELS),...r.disablableBundle,...r.loadableBundle,columns:g.prop.data(),emptyText:g.prop.string(`No data`),expandable:g.prop.bool(!1),filterOptions:g.prop.data(),fullwidth:g.prop.bool(!1),getRowKey:g.prop.data(),label:g.prop.string(),labels:g.prop.data(),pageSize:g.prop.number(10),pageSizeOptions:g.prop.data(),rows:g.prop.data(),searchLabel:g.prop.data(),searchPlaceholder:g.prop.string(),selectedKeys:g.prop.data(),selectionMode:g.prop.oneOf(d.SELECTION_MODES,`none`),sortMode:g.prop.oneOf(v,`client`),source:g.prop.data(),striped:g.prop.bool(!1),views:g.prop.data()},setup(e){let n=(0,g.getHost)(),r=(0,g.useEmit)(),i=(0,g.useSlots)(),a=(0,h.computed)(()=>({...u.DEFAULT_LABELS,...e.labels.value})),o=(0,h.computed)(()=>e.disabled.value===!0),s=(0,h.computed)(()=>e.selectionMode.value??`none`),c=(0,h.signal)(new Set),p=(0,h.computed)(()=>e.expandable.value===!0&&b.value.some(e=>typeof e.renderExpanded==`function`)),m=(0,h.computed)(()=>+(s.value===`multi`)),v=(0,h.signal)(e.pageSize.value??10);(0,h.watch)(e.pageSize,e=>{e!=null&&(v.value=e)});let y=(0,h.signal)([]);(0,g.onMounted)(()=>{y.value=l.parseColumnChildren(n);let e=new MutationObserver(()=>{y.value=l.parseColumnChildren(n)});return e.observe(n,{attributeFilter:l.COLUMN_OBSERVED_ATTRS,attributes:!0,childList:!0,subtree:!0}),()=>e.disconnect()});let b=(0,h.computed)(()=>{let t=e.columns.value;return t===void 0?y.value:t}),x=(0,h.computed)(()=>{let t=b.value.map(e=>({label:e.label,value:e.key})),n=new Set(t.map(e=>e.value));for(let r of e.filterOptions.value??[])n.has(r.key)||t.push({label:r.label,value:r.key});return t}),resolveKey=t=>{let n=e.getRowKey.value;if(n)return n(t);let r=t.id;return r==null?`__missing_${Math.random().toString(36).slice(2)}`:String(r)},S=(0,h.computed)(()=>e.source.value!=null),C=(0,h.signal)([]),w=(0,h.signal)({error:null,isLoading:!1,pageCount:1,pageNumber:1,pageSize:v.value,totalItems:0}),T=null;(0,g.onCleanup)(()=>{T?.(),T=null}),(0,h.watch)(e.source,e=>{if(T?.(),T=null,!e){C.value=[],w.value={error:null,isLoading:!1,pageCount:1,pageNumber:1,pageSize:v.value,totalItems:0};return}let update=(t=e.state)=>{C.value=t.items,w.value={error:t.error,isLoading:t.loading,pageCount:t.pagination.pageCount,pageNumber:t.pagination.page,pageSize:t.pagination.pageSize,totalItems:t.pagination.totalItems}};update(),T=e.subscribe(update)},{immediate:!0});let E=d.createDataGridModel({activeView:(0,h.computed)(()=>(e.views.value??[]).find(t=>t.id===e.activeView.value)),clientSide:(0,h.computed)(()=>!S.value),columns:b,emptyValueLabel:(0,h.computed)(()=>a.value.emptyValue),filterOperators:(0,h.computed)(()=>[{label:a.value.contains,value:`contains`},{label:a.value.equals,value:`equals`},{label:a.value.greaterThan,value:`gt`},{label:a.value.lessThan,value:`lt`}]),filterOptions:e.filterOptions,getRowKey:resolveKey,items:(0,h.computed)(()=>S.value?C.value:e.rows.value??[]),onSelectionChange:e=>{r(`selection-change`,{keys:[...e],rows:E.selectedRows.value})},onSortChange:e=>{r(`sort-change`,e)},pageSize:(0,h.computed)(()=>S.value?0:v.value),selectionMode:s,sortMode:(0,h.computed)(()=>e.sortMode.value??`client`)}),D=(0,h.computed)(()=>{let e=b.value.find(e=>e.key===E.sortState.value.key);if(e?.sortType)return e.sortType;let t=E.filteredRows.value.find(t=>t[e?.key??``]!=null);return t&&typeof t[e?.key??``]==`number`?`number`:`text`}),O=(0,h.computed)(()=>D.value===`number`?[{label:a.value.numericAscending,value:`asc`},{label:a.value.numericDescending,value:`desc`}]:[{label:a.value.ascending,value:`asc`},{label:a.value.descending,value:`desc`}]),settleSourceCommand=e=>{e&&e.catch(e=>t.warn(`ore-datagrid: source command failed: ${String(e)}`))},setSourceSearch=t=>{settleSourceCommand(e.source.value?.setParams?.(t))},k=(0,_.debounce)(t=>{e.source.value?.setParams?setSourceSearch(t):E.setSearchQuery(t)},250);(0,g.onCleanup)(k.cancel),(0,h.watch)(e.selectedKeys,e=>{Array.isArray(e)&&E.setSelection(new Set(e))},{immediate:!0});let A=(0,h.signal)({}),createColResizeHandler=(e,t)=>n=>{n.preventDefault();let r=n.clientX,i=t.getBoundingClientRect().width,a=new AbortController,{signal:o}=a;window.addEventListener(`pointermove`,t=>{A.value={...A.value,[e]:Math.max(40,i+t.clientX-r)}},{signal:o}),window.addEventListener(`pointerup`,()=>a.abort(),{signal:o})},j=E.visibleColumns,getCellValue=(e,t)=>{if(e.cell)return e.cell(t);let n=t[e.key];return n==null?``:String(n)};function handlePage(t){let n=e.source.value;if(n){settleSourceCommand(t===`prev`?n.previous():n.next());return}t===`prev`?E.prevPage():E.nextPage(),r(`page-change`,{pageIndex:E.pageIndex.value,pageSize:v.value})}let M=(0,h.computed)(()=>{let e=E.currentPageItems.value;return!e.length||E.isAllSelected()?!1:e.some(e=>E.selectedKeys.value.has(resolveKey(e)))}),N=(0,h.computed)(()=>j.value.length+ +(s.value===`multi`)+ +!!p.value),P=(0,h.computed)(()=>S.value?w.value.pageCount>1:v.value>0),F=(0,h.computed)(()=>{if(S.value){let{pageNumber:e,pageSize:t,totalItems:n}=w.value,r=Math.max(1,t);if(!P.value)return a.value.rows(n);if(n===0)return a.value.range(0,0,0);let i=(e-1)*r+1,o=Math.min(i+r-1,n);return a.value.range(i,o,n)}let e=E.totalItems.value;if(!P.value)return a.value.rows(e);if(e===0)return a.value.range(0,0,0);let t=E.pageIndex.value*v.value+1,n=Math.min(t+v.value-1,e);return a.value.range(t,n,e)}),I=(0,h.computed)(()=>e.loading.value===!0||S.value&&w.value.isLoading),L=(0,h.computed)(()=>S.value?w.value.pageNumber>1:E.hasPrevPage.value),R=(0,h.computed)(()=>S.value?w.value.pageNumber<w.value.pageCount:E.hasNextPage.value),z=(0,h.computed)(()=>S.value?w.value.totalItems===0?`0 / 0`:`${w.value.pageNumber} / ${w.value.pageCount}`:`${E.pageIndex.value+1} / ${E.pageCount.value}`),B=[`compact`,`cozy`,`comfortable`],V={comfortable:`rows-2`,compact:`rows-4`,cozy:`rows-3`},H=(0,h.computed)(()=>({comfortable:a.value.comfortableDensity,compact:a.value.compactDensity,cozy:a.value.cozyDensity})),U=(0,h.signal)(e.density.value??`cozy`);(0,h.watch)(e.density,e=>{e&&(U.value=e)});let cycleDensity=()=>{let e=B.indexOf(U.value),t=B[(e+1)%B.length];U.value=t,n.setAttribute(`density`,t),r(`density-change`,{density:t})},toggleExpand=e=>{let t=new Set(c.value),n=!t.has(e);n?t.add(e):t.delete(e),c.value=t,r(`row-expand`,{expanded:n,key:e})},W={activeCell:(0,h.signal)({col:0,row:0}),focusCell:()=>{}};(0,g.onMounted)(()=>{let e=n.shadowRoot,t=e.querySelector(`.dg-table`);if(!t)return;let{cleanup:r,handle:i}=f.createGridNav(t,e);return W=i,r}),n.focusCell=e=>W.focusCell(e);let renderViewTabs=()=>{let t=e.views.value??[],n=e.activeView.value;return g.html`
         <div
           class="dg-tabs"
           role="tablist"
           aria-label="${()=>a.value.views}"
           aria-controls="dg-tabpanel"
           @keydown="${e=>{if(![`ArrowLeft`,`ArrowRight`,`Home`,`End`].includes(e.key))return;let t=Array.from(e.currentTarget.querySelectorAll(`.dg-tab`)),n=t.findIndex(e=>e.classList.contains(`dg-tab--active`)),r=n;if(e.key===`ArrowLeft`?r=Math.max(0,n-1):e.key===`ArrowRight`?r=Math.min(t.length-1,n+1):e.key===`Home`?r=0:e.key===`End`&&(r=t.length-1),r!==n){e.preventDefault();let n=t[r];n.focus(),n.click()}}}">
-          ${t.map(e=>h.html`
+          ${t.map(e=>g.html`
               <ore-button
                 class="${()=>`dg-tab${n===e.id?` dg-tab--active`:``}`}"
                 role="tab"
@@ -20,7 +20,7 @@ Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=requi
               </ore-button>
             `)}
         </div>
-      `},renderSortPopover=()=>h.html`
+      `},renderSortPopover=()=>g.html`
       <ore-popover class="dg-action-popover" placement="bottom-end" label="${()=>a.value.sort}" style="--popover-min-width:18rem;--popover-overflow:visible">
         <ore-button
           class="dg-icon-btn dg-state-trigger"
@@ -34,7 +34,7 @@ Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=requi
         <div slot="content" class="dg-pop-sort">
           <div class="dg-pop-header">
             <span class="dg-pop-title">${()=>a.value.sortBy}</span>
-            ${()=>E.sortState.value.direction===`none`?h.html``:h.html`
+            ${()=>E.sortState.value.direction===`none`?g.html``:g.html`
                     <ore-button
                       class="dg-icon-btn"
                       variant="ghost"
@@ -74,7 +74,7 @@ Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=requi
           </div>
         </div>
       </ore-popover>
-    `,renderFilterPopover=()=>h.html`
+    `,renderFilterPopover=()=>g.html`
       <ore-popover
         class="dg-action-popover"
         placement="bottom-end"
@@ -92,7 +92,7 @@ Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=requi
         <div slot="content" class="dg-pop-filter">
           <div class="dg-pop-header">
             <span class="dg-pop-title">${()=>a.value.filterBy}</span>
-            ${()=>E.filterDefs.value.length?h.html`
+            ${()=>E.filterDefs.value.length?g.html`
                     <ore-button
                       class="dg-icon-btn"
                       variant="ghost"
@@ -102,7 +102,7 @@ Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=requi
                       @click="${()=>E.clearAllFilters()}">
                       <ore-icon name="trash-2" size="14" stroke-width="1.75" aria-hidden="true"></ore-icon>
                     </ore-button>
-                  `:h.html``}
+                  `:g.html``}
           </div>
 
           <!-- Always-visible field picker: select columns to add filter rules -->
@@ -123,7 +123,7 @@ Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=requi
 
           <!-- Active filter rules (appear below the field picker as rules are added) -->
           <div class="dg-pop-filter-rules" ?hidden="${()=>!E.filterDefs.value.length}">
-            ${()=>E.filterDefs.value.map(e=>h.html`
+            ${()=>E.filterDefs.value.map(e=>g.html`
                   <div class="dg-pop-filter-rule">
                     <div class="dg-pop-filter-rule-header">
                       <span class="dg-pop-filter-field">${e.label}</span>
@@ -166,7 +166,7 @@ Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=requi
           </div>
         </div>
       </ore-popover>
-    `,renderColumnMenu=()=>h.html`
+    `,renderColumnMenu=()=>g.html`
       <ore-popover
         class="dg-action-popover"
         placement="bottom-end"
@@ -184,7 +184,7 @@ Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=requi
         <div slot="content" class="dg-pop-col">
           <div class="dg-pop-header">
             <span class="dg-pop-heading"><strong class="dg-pop-title">${()=>a.value.columnVisibility}</strong><small>${()=>a.value.visibleColumns(E.visibleColumns.value.length,b.value.length)}</small></span>
-            ${()=>E.hiddenColumns.value.size?h.html`
+            ${()=>E.hiddenColumns.value.size?g.html`
                     <ore-button
                       class="dg-icon-btn"
                       variant="ghost"
@@ -194,10 +194,10 @@ Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=requi
                       @click="${()=>E.resetColumnVisibility()}">
                       <ore-icon name="trash-2" size="14" stroke-width="1.75" aria-hidden="true"></ore-icon>
                     </ore-button>
-                  `:h.html``}
+                  `:g.html``}
           </div>
           <div class="dg-pop-col-list" role="group" aria-label="${()=>a.value.columnVisibility}">
-            ${()=>b.value.map(e=>h.html`
+            ${()=>b.value.map(e=>g.html`
                   <ore-checkbox
                     class="dg-pop-col-item"
                     checked="${()=>!E.hiddenColumns.value.has(e.key)}"
@@ -207,7 +207,7 @@ Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=requi
           </div>
         </div>
       </ore-popover>
-    `;return h.html`
+    `;return g.html`
       <!-- ── Controls Bar ────────────────────────────────────────────────── -->
       <div class="dg-controls" part="controls">
         <!-- Left: view tabs -->
@@ -238,7 +238,7 @@ Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=requi
 
           <!-- Search toggle: rightmost, expands in-place -->
           <div class="${()=>`dg-search${E.searchActive.value?` dg-search--open`:``}`}">
-            ${()=>E.searchActive.value?h.html`
+            ${()=>E.searchActive.value?g.html`
                     <ore-input
                       class="dg-search-input"
                       type="search"
@@ -253,7 +253,7 @@ Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=requi
                       @keydown="${t=>{t.key===`Escape`&&(e.source.value?.setParams&&setSourceSearch(``),E.toggleSearch())}}">
                       <ore-icon slot="prefix" name="search" size="13" stroke-width="1.75" aria-hidden="true"></ore-icon>
                     </ore-input>
-                  `:h.html``}
+                  `:g.html``}
             <ore-button
               variant="ghost"
               size="sm"
@@ -284,12 +284,12 @@ Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=requi
           <!-- Head -->
           <thead class="dg-head" part="thead">
             <tr role="row">
-              ${()=>s.value===`multi`?h.html`
+              ${()=>s.value===`multi`?g.html`
                       <th
                         class="dg-th dg-th-check"
                         role="columnheader"
                         scope="col"
-                        tabindex="${()=>W.activeCell.value.row===0&&W.activeCell.value.col===0&&_.value>=1?`0`:`-1`}">
+                        tabindex="${()=>W.activeCell.value.row===0&&W.activeCell.value.col===0&&m.value>=1?`0`:`-1`}">
                         <ore-checkbox
                           class="dg-check"
                           checked="${()=>E.isAllSelected()}"
@@ -298,19 +298,19 @@ Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=requi
                           aria-label="${()=>a.value.selectAllRows}"
                           @change="${()=>{o.value||E.selectAll()}}"></ore-checkbox>
                       </th>
-                    `:h.html``}
-              ${()=>j.value.map((e,t)=>{let n=t===j.value.length-1;return h.html`
+                    `:g.html``}
+              ${()=>j.value.map((e,t)=>{let n=t===j.value.length-1;return g.html`
                     <th
                       class="${`dg-th${n&&p.value?` dg-th-last`:``}`}"
                       role="columnheader"
                       scope="col"
-                      tabindex="${()=>{let e=W.activeCell.value;return e.row===0&&e.col===t+_.value?`0`:`-1`}}"
+                      tabindex="${()=>{let e=W.activeCell.value;return e.row===0&&e.col===t+m.value?`0`:`-1`}}"
                       data-align="${e.align??`left`}"
                       aria-sort="${()=>e.sortable?ariaSortValue(E.sortState.value,e.key):void 0}"
                       aria-label="${e.sortable?void 0:e.headerLabel??e.label}"
                       style="${()=>{let t=A.value[e.key];return t?`width:${t}px`:e.width?`width:${e.width}`:``}}">
                       <div class="dg-th-inner">
-                        ${()=>e.sortable?h.html`
+                        ${()=>e.sortable?g.html`
                                 <ore-button
                                   class="dg-sort-btn"
                                   variant="text"
@@ -328,34 +328,34 @@ Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=requi
                                     stroke-width="2"></ore-icon>
                                 </ore-button>
                               `:e.label}
-                        ${e.resizable?h.html`
+                        ${e.resizable?g.html`
                                 <span
                                   class="dg-col-resize"
                                   aria-hidden="true"
                                   ref="${t=>{if(!t)return;let n=t.closest(`th`);n&&t.addEventListener(`pointerdown`,createColResizeHandler(e.key,n))}}"></span>
-                              `:h.html``}
+                              `:g.html``}
                       </div>
                     </th>
                   `})}
-              ${()=>p.value?h.html`
+              ${()=>p.value?g.html`
                       <th
                         class="dg-th dg-th-expand"
                         role="columnheader"
                         scope="col"
                         aria-label="${()=>a.value.rowDetails}"
                         tabindex="-1"></th>
-                    `:h.html``}
+                    `:g.html``}
             </tr>
           </thead>
 
           <!-- Body -->
           <tbody class="dg-body" part="tbody">
-            ${()=>E.currentPageItems.value.length===0?h.html`
+            ${()=>E.currentPageItems.value.length===0?g.html`
                     <tr role="row">
                       <td class="dg-empty" role="gridcell" colspan="${()=>String(N.value)}">
                         <div class="dg-empty-content">
                           ${()=>e.emptyText.value??`No data`}
-                          ${()=>E.searchQuery.value||E.filterValues.value.size?h.html`
+                          ${()=>E.searchQuery.value||E.filterValues.value.size?g.html`
                                   <div class="dg-empty-actions">
                                     <ore-button
                                       variant="text"
@@ -364,22 +364,22 @@ Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=requi
                                       ${()=>a.value.clearFiltersAndSearch}
                                     </ore-button>
                                   </div>
-                                `:h.html``}
+                                `:g.html``}
                         </div>
                       </td>
                     </tr>
-                  `:E.currentPageItems.value.map((e,t)=>{let n=resolveKey(e),r=s.value!==`none`&&!o.value,i=t+1;return h.html`
+                  `:E.currentPageItems.value.map((e,t)=>{let n=resolveKey(e),r=s.value!==`none`&&!o.value,i=t+1;return g.html`
                       <tr
                         class="dg-tr"
                         part="row"
                         role="row"
                         aria-selected="${()=>s.value===`none`?null:String(E.selectedKeys.value.has(n))}"
-                        aria-expanded="${()=>p.value?String(f.value.has(n)):null}"
+                        aria-expanded="${()=>p.value?String(c.value.has(n)):null}"
                         ?data-selectable="${r}"
                         ?data-disabled="${o}"
                         @click="${()=>{r&&s.value===`single`&&E.toggleRow(n)}}"
                         @keydown="${e=>{(e.key===`Enter`||e.key===` `)&&r&&s.value===`single`&&(e.preventDefault(),E.toggleRow(n))}}">
-                        ${()=>s.value===`multi`?h.html`
+                        ${()=>s.value===`multi`?g.html`
                                 <td
                                   class="dg-td dg-td-check"
                                   role="gridcell"
@@ -394,19 +394,19 @@ Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=requi
                                     @click="${e=>e.stopPropagation()}"
                                     @change="${()=>{o.value||E.toggleRow(n)}}"></ore-checkbox>
                                 </td>
-                              `:h.html``}
-                        ${j.value.map((t,n)=>{let r=e,a=getCellValue(t,r),o=t.renderCell?.(r)??a,s=n===j.value.length-1;return h.html`
+                              `:g.html``}
+                        ${j.value.map((t,n)=>{let r=e,a=getCellValue(t,r),o=t.renderCell?.(r)??a,s=n===j.value.length-1;return g.html`
                             <td
                               class="${`dg-td${s&&p.value?` dg-td-last`:``}`}"
                               part="cell"
                               role="gridcell"
                               data-align="${t.align??`left`}"
-                              tabindex="${()=>{let e=W.activeCell.value;return e.row===i&&e.col===n+_.value?`0`:`-1`}}"
+                              tabindex="${()=>{let e=W.activeCell.value;return e.row===i&&e.col===n+m.value?`0`:`-1`}}"
                               title="${a}">
                               ${o}
                             </td>
                           `})}
-                        ${()=>p.value?h.html`
+                        ${()=>p.value?g.html`
                                 <td
                                   class="dg-td dg-td-expand"
                                   role="gridcell"
@@ -418,42 +418,42 @@ Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=requi
                                     size="sm"
                                     icon-only
                                     tabindex="-1"
-                                    label="${()=>f.value.has(n)?a.value.collapseRow:a.value.expandRow}"
-                                    aria-expanded="${()=>String(f.value.has(n))}"
+                                    label="${()=>c.value.has(n)?a.value.collapseRow:a.value.expandRow}"
+                                    aria-expanded="${()=>String(c.value.has(n))}"
                                     disabled="${()=>o.value||void 0}"
                                     @click="${e=>{e.stopPropagation(),o.value||toggleExpand(n)}}">
                                     <ore-icon
-                                      name="${()=>f.value.has(n)?`chevron-up`:`chevron-down`}"
+                                      name="${()=>c.value.has(n)?`chevron-up`:`chevron-down`}"
                                       size="14"
                                       stroke-width="2"
                                       aria-hidden="true"></ore-icon>
                                   </ore-button>
                                 </td>
-                              `:h.html``}
+                              `:g.html``}
                       </tr>
-                      ${()=>p.value&&f.value.has(n)?h.html`
+                      ${()=>p.value&&c.value.has(n)?g.html`
                               <tr class="dg-tr-expanded" role="row">
                                 <td
                                   class="dg-td-expanded"
                                   role="gridcell"
                                   colspan="${()=>String(N.value)}">
-                                  ${(0,h.unsafeHtml)(()=>b.value.find(e=>typeof e.renderExpanded==`function`)?.renderExpanded?.(e)??``)}
+                                  ${(0,g.unsafeHtml)(()=>b.value.find(e=>typeof e.renderExpanded==`function`)?.renderExpanded?.(e)??``)}
                                 </td>
                               </tr>
-                            `:h.html``}
+                            `:g.html``}
                     `})}
           </tbody>
         </table>
       </div>
 
       <!-- Footer / Pagination -->
-      ${()=>P.value?h.html`
+      ${()=>P.value?g.html`
               <div class="dg-footer" part="footer" role="navigation" aria-label="${()=>a.value.pagination}">
                 <div class="dg-footer-start">
                   <span class="dg-footer-info" dir="ltr" aria-live="polite" aria-atomic="true">
                     ${F}
                   </span>
-                  ${()=>{let t=e.pageSizeOptions.value??[];return t.length?h.html`
+                  ${()=>{let t=e.pageSizeOptions.value??[];return t.length?g.html`
                           <div class="dg-page-size-wrap">
                             <ore-select
                               class="dg-page-size-select"
@@ -465,7 +465,7 @@ Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=requi
                               disabled="${()=>o.value||void 0}"
                               @change="${e=>{let t=parseInt(controlValues(e)[0]??``,10);Number.isNaN(t)||(v.value=t,E.goToPage(0),r(`page-change`,{pageIndex:0,pageSize:t}))}}"></ore-select>
                           </div>
-                        `:h.html``}}
+                        `:g.html``}}
                 </div>
                 <div class="dg-pagination" role="group" aria-label="${()=>a.value.pageNavigation}">
                     <ore-button
@@ -499,6 +499,6 @@ Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=requi
                     </ore-button>
                 </div>
               </div>
-            `:h.html``}
-    `},shadow:{delegatesFocus:!0},styles:[e.tableBaseMixin(`datagrid`),s.default]}),exports.BUTTON_TAG=i.BUTTON_TAG,exports.CHECKBOX_TAG=a.CHECKBOX_TAG,exports.COLUMN_TAG=c.COLUMN_TAG,exports.COMBOBOX_OPTION_TAG=o.COMBOBOX_OPTION_TAG,exports.DATAGRID_TAG=_,exports.ICON_TAG=r.ICON_TAG,exports.POPOVER_TAG=p.POPOVER_TAG,exports.SELECT_TAG=f.SELECT_TAG,exports.ariaSortValue=ariaSortValue,exports.sortIconName=sortIconName;
+            `:g.html``}
+    `},shadow:{delegatesFocus:!0},styles:[e.tableBaseMixin(`datagrid`),c.default]}),exports.BUTTON_TAG=a.BUTTON_TAG,exports.CHECKBOX_TAG=o.CHECKBOX_TAG,exports.COLUMN_TAG=l.COLUMN_TAG,exports.COMBOBOX_OPTION_TAG=s.COMBOBOX_OPTION_TAG,exports.DATAGRID_TAG=y,exports.ICON_TAG=i.ICON_TAG,exports.POPOVER_TAG=m.POPOVER_TAG,exports.SELECT_TAG=p.SELECT_TAG,exports.ariaSortValue=ariaSortValue,exports.sortIconName=sortIconName;
 //# sourceMappingURL=datagrid.cjs.map