@vielzeug/refine 26.10.6 → 26.10.9

package/dist/datagrid.js

@@ -1,11 +1,11 @@
-import{tableBaseMixin as e}from"./styles/mixins/table-base.css.js";import{warn as t}from"./_dev.js";import{disablableBundle as n,loadableBundle as r}from"./shared/prop-bundles.js";import{ICON_TAG as i}from"./icon.js";import{BUTTON_TAG as a}from"./button.js";import{CHECKBOX_TAG as o}from"./checkbox.js";import{COMBOBOX_OPTION_TAG as s}from"./combobox.js";import c from"./inputs/datagrid/datagrid.css.js";import{COLUMN_OBSERVED_ATTRS as l,COLUMN_TAG as u,parseColumnChildren as d}from"./inputs/datagrid/datagrid-column.js";import{DEFAULT_LABELS as f}from"./inputs/datagrid/datagrid-labels.js";import{createDataGridModel as p}from"./inputs/datagrid/datagrid-model.js";import{createGridNav as m}from"./inputs/datagrid/datagrid-nav.js";import{SELECT_TAG as h}from"./select.js";import{POPOVER_TAG as g}from"./popover.js";import{computed as _,signal as v,watch as y}from"@vielzeug/ripple";import{define as b,getHost as x,html as S,onCleanup as C,onMounted as w,prop as T,unsafeHtml as E,useEmit as D,useSlots as O}from"@vielzeug/ore";import{debounce as k}from"@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 A=`ore-datagrid`;b(A,{props:{activeView:T.string(),density:T.string(),...n,...r,columns:T.data(),emptyText:T.string(`No data`),expandable:T.bool(!1),filterOptions:T.data(),fullwidth:T.bool(!1),getRowKey:T.data(),label:T.string(),labels:T.data(),pageSize:T.number(10),pageSizeOptions:T.data(),rows:T.data(),searchLabel:T.data(),searchPlaceholder:T.string(),selectedKeys:T.data(),selectionMode:T.string(`none`),sortMode:T.string(`client`),source:T.data(),striped:T.bool(!1),views:T.data()},setup(e){let n=x(),r=D(),i=O(),a=_(()=>({...f,...e.labels.value})),o=_(()=>e.disabled.value===!0),s=_(()=>e.selectionMode.value??`none`),c=v(new Set),u=_(()=>e.expandable.value===!0&&T.value.some(e=>typeof e.renderExpanded==`function`)),h=_(()=>+(s.value===`multi`)),g=v(e.pageSize.value??10);y(e.pageSize,e=>{e!=null&&(g.value=e)});let b=v([]);w(()=>{b.value=d(n);let e=new MutationObserver(()=>{b.value=d(n)});return e.observe(n,{attributeFilter:l,attributes:!0,childList:!0,subtree:!0}),()=>e.disconnect()});let T=_(()=>{let t=e.columns.value;return t===void 0?b.value:t}),A=_(()=>{let t=T.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)},j=_(()=>e.source.value!=null),M=v([]),N=v({error:null,isLoading:!1,pageCount:1,pageNumber:1,pageSize:g.value,totalItems:0}),P=null;C(()=>{P?.(),P=null}),y(e.source,e=>{if(P?.(),P=null,!e){M.value=[],N.value={error:null,isLoading:!1,pageCount:1,pageNumber:1,pageSize:g.value,totalItems:0};return}let update=(t=e.state)=>{M.value=t.items,N.value={error:t.error,isLoading:t.loading,pageCount:t.pagination.pageCount,pageNumber:t.pagination.page,pageSize:t.pagination.pageSize,totalItems:t.pagination.totalItems}};update(),P=e.subscribe(update)},{immediate:!0});let F=p({activeView:_(()=>(e.views.value??[]).find(t=>t.id===e.activeView.value)),clientSide:_(()=>!j.value),columns:T,emptyValueLabel:_(()=>a.value.emptyValue),filterOperators:_(()=>[{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:_(()=>j.value?M.value:e.rows.value??[]),onSelectionChange:e=>{r(`selection-change`,{keys:[...e],rows:F.selectedRows.value})},onSortChange:e=>{r(`sort-change`,e)},pageSize:_(()=>j.value?0:g.value),selectionMode:s,sortMode:_(()=>e.sortMode.value??`client`)}),I=_(()=>{let e=T.value.find(e=>e.key===F.sortState.value.key);if(e?.sortType)return e.sortType;let t=F.filteredRows.value.find(t=>t[e?.key??``]!=null);return t&&typeof t[e?.key??``]==`number`?`number`:`text`}),L=_(()=>I.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(`ore-datagrid: source command failed: ${String(e)}`))},setSourceSearch=t=>{settleSourceCommand(e.source.value?.setParams?.(t))},R=k(t=>{e.source.value?.setParams?setSourceSearch(t):F.setSearchQuery(t)},250);C(R.cancel),y(e.selectedKeys,e=>{Array.isArray(e)&&F.setSelection(new Set(e))},{immediate:!0});let z=v({}),createColResizeHandler=(e,t)=>n=>{n.preventDefault();let r=n.clientX,i=t.getBoundingClientRect().width,a=new AbortController,{signal:o}=a;window.addEventListener(`pointermove`,t=>{z.value={...z.value,[e]:Math.max(40,i+t.clientX-r)}},{signal:o}),window.addEventListener(`pointerup`,()=>a.abort(),{signal:o})},B=F.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`?F.prevPage():F.nextPage(),r(`page-change`,{pageIndex:F.pageIndex.value,pageSize:g.value})}let V=_(()=>{let e=F.currentPageItems.value;return!e.length||F.isAllSelected()?!1:e.some(e=>F.selectedKeys.value.has(resolveKey(e)))}),H=_(()=>B.value.length+ +(s.value===`multi`)+ +!!u.value),U=_(()=>j.value?N.value.pageCount>1:g.value>0),W=_(()=>{if(j.value){let{pageNumber:e,pageSize:t,totalItems:n}=N.value,r=Math.max(1,t);if(!U.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=F.totalItems.value;if(!U.value)return a.value.rows(e);if(e===0)return a.value.range(0,0,0);let t=F.pageIndex.value*g.value+1,n=Math.min(t+g.value-1,e);return a.value.range(t,n,e)}),G=_(()=>e.loading.value===!0||j.value&&N.value.isLoading),K=_(()=>j.value?N.value.pageNumber>1:F.hasPrevPage.value),q=_(()=>j.value?N.value.pageNumber<N.value.pageCount:F.hasNextPage.value),J=_(()=>j.value?N.value.totalItems===0?`0 / 0`:`${N.value.pageNumber} / ${N.value.pageCount}`:`${F.pageIndex.value+1} / ${F.pageCount.value}`),Y=[`compact`,`cozy`,`comfortable`],X={comfortable:`rows-2`,compact:`rows-4`,cozy:`rows-3`},Z=_(()=>({comfortable:a.value.comfortableDensity,compact:a.value.compactDensity,cozy:a.value.cozyDensity})),Q=v(e.density.value??`cozy`);y(e.density,e=>{e&&(Q.value=e)});let cycleDensity=()=>{let e=Y.indexOf(Q.value),t=Y[(e+1)%Y.length];Q.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})},$={activeCell:v({col:0,row:0}),focusCell:()=>{}};w(()=>{let e=n.shadowRoot,t=e.querySelector(`.dg-table`);if(!t)return;let{cleanup:r,handle:i}=m(t,e);return $=i,r}),n.focusCell=e=>$.focusCell(e);let renderViewTabs=()=>{let t=e.views.value??[],n=e.activeView.value;return S`
+import{tableBaseMixin as e}from"./styles/mixins/table-base.css.js";import{warn as t}from"./_dev.js";import{DENSITY_LEVELS as n}from"./shared/types.js";import{disablableBundle as r,loadableBundle as i}from"./shared/prop-bundles.js";import{ICON_TAG as a}from"./icon.js";import{BUTTON_TAG as o}from"./button.js";import{CHECKBOX_TAG as s}from"./checkbox.js";import{COMBOBOX_OPTION_TAG as c}from"./combobox.js";import l from"./inputs/datagrid/datagrid.css.js";import{COLUMN_OBSERVED_ATTRS as u,COLUMN_TAG as d,parseColumnChildren as f}from"./inputs/datagrid/datagrid-column.js";import{DEFAULT_LABELS as p}from"./inputs/datagrid/datagrid-labels.js";import{SELECTION_MODES as m,createDataGridModel as h}from"./inputs/datagrid/datagrid-model.js";import{createGridNav as g}from"./inputs/datagrid/datagrid-nav.js";import{SELECT_TAG as _}from"./select.js";import{POPOVER_TAG as v}from"./popover.js";import{computed as y,signal as b,watch as x}from"@vielzeug/ripple";import{define as S,getHost as C,html as w,onCleanup as T,onMounted as E,prop as D,unsafeHtml as O,useEmit as k,useSlots as A}from"@vielzeug/ore";import{debounce as j}from"@vielzeug/arsenal";var M=[`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 N=`ore-datagrid`;S(N,{props:{activeView:D.string(),density:D.oneOf(n),...r,...i,columns:D.data(),emptyText:D.string(`No data`),expandable:D.bool(!1),filterOptions:D.data(),fullwidth:D.bool(!1),getRowKey:D.data(),label:D.string(),labels:D.data(),pageSize:D.number(10),pageSizeOptions:D.data(),rows:D.data(),searchLabel:D.data(),searchPlaceholder:D.string(),selectedKeys:D.data(),selectionMode:D.oneOf(m,`none`),sortMode:D.oneOf(M,`client`),source:D.data(),striped:D.bool(!1),views:D.data()},setup(e){let n=C(),r=k(),i=A(),a=y(()=>({...p,...e.labels.value})),o=y(()=>e.disabled.value===!0),s=y(()=>e.selectionMode.value??`none`),c=b(new Set),l=y(()=>e.expandable.value===!0&&v.value.some(e=>typeof e.renderExpanded==`function`)),d=y(()=>+(s.value===`multi`)),m=b(e.pageSize.value??10);x(e.pageSize,e=>{e!=null&&(m.value=e)});let _=b([]);E(()=>{_.value=f(n);let e=new MutationObserver(()=>{_.value=f(n)});return e.observe(n,{attributeFilter:u,attributes:!0,childList:!0,subtree:!0}),()=>e.disconnect()});let v=y(()=>{let t=e.columns.value;return t===void 0?_.value:t}),S=y(()=>{let t=v.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)},D=y(()=>e.source.value!=null),M=b([]),N=b({error:null,isLoading:!1,pageCount:1,pageNumber:1,pageSize:m.value,totalItems:0}),P=null;T(()=>{P?.(),P=null}),x(e.source,e=>{if(P?.(),P=null,!e){M.value=[],N.value={error:null,isLoading:!1,pageCount:1,pageNumber:1,pageSize:m.value,totalItems:0};return}let update=(t=e.state)=>{M.value=t.items,N.value={error:t.error,isLoading:t.loading,pageCount:t.pagination.pageCount,pageNumber:t.pagination.page,pageSize:t.pagination.pageSize,totalItems:t.pagination.totalItems}};update(),P=e.subscribe(update)},{immediate:!0});let F=h({activeView:y(()=>(e.views.value??[]).find(t=>t.id===e.activeView.value)),clientSide:y(()=>!D.value),columns:v,emptyValueLabel:y(()=>a.value.emptyValue),filterOperators:y(()=>[{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:y(()=>D.value?M.value:e.rows.value??[]),onSelectionChange:e=>{r(`selection-change`,{keys:[...e],rows:F.selectedRows.value})},onSortChange:e=>{r(`sort-change`,e)},pageSize:y(()=>D.value?0:m.value),selectionMode:s,sortMode:y(()=>e.sortMode.value??`client`)}),I=y(()=>{let e=v.value.find(e=>e.key===F.sortState.value.key);if(e?.sortType)return e.sortType;let t=F.filteredRows.value.find(t=>t[e?.key??``]!=null);return t&&typeof t[e?.key??``]==`number`?`number`:`text`}),L=y(()=>I.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(`ore-datagrid: source command failed: ${String(e)}`))},setSourceSearch=t=>{settleSourceCommand(e.source.value?.setParams?.(t))},R=j(t=>{e.source.value?.setParams?setSourceSearch(t):F.setSearchQuery(t)},250);T(R.cancel),x(e.selectedKeys,e=>{Array.isArray(e)&&F.setSelection(new Set(e))},{immediate:!0});let z=b({}),createColResizeHandler=(e,t)=>n=>{n.preventDefault();let r=n.clientX,i=t.getBoundingClientRect().width,a=new AbortController,{signal:o}=a;window.addEventListener(`pointermove`,t=>{z.value={...z.value,[e]:Math.max(40,i+t.clientX-r)}},{signal:o}),window.addEventListener(`pointerup`,()=>a.abort(),{signal:o})},B=F.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`?F.prevPage():F.nextPage(),r(`page-change`,{pageIndex:F.pageIndex.value,pageSize:m.value})}let V=y(()=>{let e=F.currentPageItems.value;return!e.length||F.isAllSelected()?!1:e.some(e=>F.selectedKeys.value.has(resolveKey(e)))}),H=y(()=>B.value.length+ +(s.value===`multi`)+ +!!l.value),U=y(()=>D.value?N.value.pageCount>1:m.value>0),W=y(()=>{if(D.value){let{pageNumber:e,pageSize:t,totalItems:n}=N.value,r=Math.max(1,t);if(!U.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=F.totalItems.value;if(!U.value)return a.value.rows(e);if(e===0)return a.value.range(0,0,0);let t=F.pageIndex.value*m.value+1,n=Math.min(t+m.value-1,e);return a.value.range(t,n,e)}),G=y(()=>e.loading.value===!0||D.value&&N.value.isLoading),K=y(()=>D.value?N.value.pageNumber>1:F.hasPrevPage.value),q=y(()=>D.value?N.value.pageNumber<N.value.pageCount:F.hasNextPage.value),J=y(()=>D.value?N.value.totalItems===0?`0 / 0`:`${N.value.pageNumber} / ${N.value.pageCount}`:`${F.pageIndex.value+1} / ${F.pageCount.value}`),Y=[`compact`,`cozy`,`comfortable`],X={comfortable:`rows-2`,compact:`rows-4`,cozy:`rows-3`},Z=y(()=>({comfortable:a.value.comfortableDensity,compact:a.value.compactDensity,cozy:a.value.cozyDensity})),Q=b(e.density.value??`cozy`);x(e.density,e=>{e&&(Q.value=e)});let cycleDensity=()=>{let e=Y.indexOf(Q.value),t=Y[(e+1)%Y.length];Q.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})},$={activeCell:b({col:0,row:0}),focusCell:()=>{}};E(()=>{let e=n.shadowRoot,t=e.querySelector(`.dg-table`);if(!t)return;let{cleanup:r,handle:i}=g(t,e);return $=i,r}),n.focusCell=e=>$.focusCell(e);let renderViewTabs=()=>{let t=e.views.value??[],n=e.activeView.value;return w`
         <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=>S`
+          ${t.map(e=>w`
               <ore-button
                 class="${()=>`dg-tab${n===e.id?` dg-tab--active`:``}`}"
                 role="tab"
@@ -20,7 +20,7 @@ import{tableBaseMixin as e}from"./styles/mixins/table-base.css.js";import{warn a
               </ore-button>
             `)}
         </div>
-      `},renderSortPopover=()=>S`
+      `},renderSortPopover=()=>w`
       <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 @@ import{tableBaseMixin as e}from"./styles/mixins/table-base.css.js";import{warn a
         <div slot="content" class="dg-pop-sort">
           <div class="dg-pop-header">
             <span class="dg-pop-title">${()=>a.value.sortBy}</span>
-            ${()=>F.sortState.value.direction===`none`?S``:S`
+            ${()=>F.sortState.value.direction===`none`?w``:w`
                     <ore-button
                       class="dg-icon-btn"
                       variant="ghost"
@@ -57,7 +57,7 @@ import{tableBaseMixin as e}from"./styles/mixins/table-base.css.js";import{warn a
               placeholder="${()=>a.value.property}"
               fullwidth
               value="${()=>F.sortState.value.key}"
-              options="${()=>T.value.map(e=>({label:e.label,value:e.key}))}"
+              options="${()=>v.value.map(e=>({label:e.label,value:e.key}))}"
               @change="${e=>{let t=controlValues(e)[0]??``,n=F.sortState.value.direction===`none`?`asc`:F.sortState.value.direction;F.sortTo(t,n)}}"></ore-select>
             <ore-select
               class="dg-pop-dir-select"
@@ -74,7 +74,7 @@ import{tableBaseMixin as e}from"./styles/mixins/table-base.css.js";import{warn a
           </div>
         </div>
       </ore-popover>
-    `,renderFilterPopover=()=>S`
+    `,renderFilterPopover=()=>w`
       <ore-popover
         class="dg-action-popover"
         placement="bottom-end"
@@ -92,7 +92,7 @@ import{tableBaseMixin as e}from"./styles/mixins/table-base.css.js";import{warn a
         <div slot="content" class="dg-pop-filter">
           <div class="dg-pop-header">
             <span class="dg-pop-title">${()=>a.value.filterBy}</span>
-            ${()=>F.filterDefs.value.length?S`
+            ${()=>F.filterDefs.value.length?w`
                     <ore-button
                       class="dg-icon-btn"
                       variant="ghost"
@@ -102,7 +102,7 @@ import{tableBaseMixin as e}from"./styles/mixins/table-base.css.js";import{warn a
                       @click="${()=>F.clearAllFilters()}">
                       <ore-icon name="trash-2" size="14" stroke-width="1.75" aria-hidden="true"></ore-icon>
                     </ore-button>
-                  `:S``}
+                  `:w``}
           </div>
 
           <!-- Always-visible field picker: select columns to add filter rules -->
@@ -116,14 +116,14 @@ import{tableBaseMixin as e}from"./styles/mixins/table-base.css.js";import{warn a
               autoclose
               size="sm"
               variant="flat"
-              options="${A}"
+              options="${S}"
               value="${()=>F.filterDefs.value.map(e=>e.key)}"
               @change="${e=>{F.setActiveFilterKeys(controlValues(e))}}"></ore-combobox>
           </div>
 
           <!-- Active filter rules (appear below the field picker as rules are added) -->
           <div class="dg-pop-filter-rules" ?hidden="${()=>!F.filterDefs.value.length}">
-            ${()=>F.filterDefs.value.map(e=>S`
+            ${()=>F.filterDefs.value.map(e=>w`
                   <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 @@ import{tableBaseMixin as e}from"./styles/mixins/table-base.css.js";import{warn a
           </div>
         </div>
       </ore-popover>
-    `,renderColumnMenu=()=>S`
+    `,renderColumnMenu=()=>w`
       <ore-popover
         class="dg-action-popover"
         placement="bottom-end"
@@ -183,8 +183,8 @@ import{tableBaseMixin as e}from"./styles/mixins/table-base.css.js";import{warn a
         </ore-button>
         <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(F.visibleColumns.value.length,T.value.length)}</small></span>
-            ${()=>F.hiddenColumns.value.size?S`
+            <span class="dg-pop-heading"><strong class="dg-pop-title">${()=>a.value.columnVisibility}</strong><small>${()=>a.value.visibleColumns(F.visibleColumns.value.length,v.value.length)}</small></span>
+            ${()=>F.hiddenColumns.value.size?w`
                     <ore-button
                       class="dg-icon-btn"
                       variant="ghost"
@@ -194,10 +194,10 @@ import{tableBaseMixin as e}from"./styles/mixins/table-base.css.js";import{warn a
                       @click="${()=>F.resetColumnVisibility()}">
                       <ore-icon name="trash-2" size="14" stroke-width="1.75" aria-hidden="true"></ore-icon>
                     </ore-button>
-                  `:S``}
+                  `:w``}
           </div>
           <div class="dg-pop-col-list" role="group" aria-label="${()=>a.value.columnVisibility}">
-            ${()=>T.value.map(e=>S`
+            ${()=>v.value.map(e=>w`
                   <ore-checkbox
                     class="dg-pop-col-item"
                     checked="${()=>!F.hiddenColumns.value.has(e.key)}"
@@ -207,7 +207,7 @@ import{tableBaseMixin as e}from"./styles/mixins/table-base.css.js";import{warn a
           </div>
         </div>
       </ore-popover>
-    `;return S`
+    `;return w`
       <!-- ── Controls Bar ────────────────────────────────────────────────── -->
       <div class="dg-controls" part="controls">
         <!-- Left: view tabs -->
@@ -238,7 +238,7 @@ import{tableBaseMixin as e}from"./styles/mixins/table-base.css.js";import{warn a
 
           <!-- Search toggle: rightmost, expands in-place -->
           <div class="${()=>`dg-search${F.searchActive.value?` dg-search--open`:``}`}">
-            ${()=>F.searchActive.value?S`
+            ${()=>F.searchActive.value?w`
                     <ore-input
                       class="dg-search-input"
                       type="search"
@@ -253,7 +253,7 @@ import{tableBaseMixin as e}from"./styles/mixins/table-base.css.js";import{warn a
                       @keydown="${t=>{t.key===`Escape`&&(e.source.value?.setParams&&setSourceSearch(``),F.toggleSearch())}}">
                       <ore-icon slot="prefix" name="search" size="13" stroke-width="1.75" aria-hidden="true"></ore-icon>
                     </ore-input>
-                  `:S``}
+                  `:w``}
             <ore-button
               variant="ghost"
               size="sm"
@@ -284,12 +284,12 @@ import{tableBaseMixin as e}from"./styles/mixins/table-base.css.js";import{warn a
           <!-- Head -->
           <thead class="dg-head" part="thead">
             <tr role="row">
-              ${()=>s.value===`multi`?S`
+              ${()=>s.value===`multi`?w`
                       <th
                         class="dg-th dg-th-check"
                         role="columnheader"
                         scope="col"
-                        tabindex="${()=>$.activeCell.value.row===0&&$.activeCell.value.col===0&&h.value>=1?`0`:`-1`}">
+                        tabindex="${()=>$.activeCell.value.row===0&&$.activeCell.value.col===0&&d.value>=1?`0`:`-1`}">
                         <ore-checkbox
                           class="dg-check"
                           checked="${()=>F.isAllSelected()}"
@@ -298,19 +298,19 @@ import{tableBaseMixin as e}from"./styles/mixins/table-base.css.js";import{warn a
                           aria-label="${()=>a.value.selectAllRows}"
                           @change="${()=>{o.value||F.selectAll()}}"></ore-checkbox>
                       </th>
-                    `:S``}
-              ${()=>B.value.map((e,t)=>{let n=t===B.value.length-1;return S`
+                    `:w``}
+              ${()=>B.value.map((e,t)=>{let n=t===B.value.length-1;return w`
                     <th
-                      class="${`dg-th${n&&u.value?` dg-th-last`:``}`}"
+                      class="${`dg-th${n&&l.value?` dg-th-last`:``}`}"
                       role="columnheader"
                       scope="col"
-                      tabindex="${()=>{let e=$.activeCell.value;return e.row===0&&e.col===t+h.value?`0`:`-1`}}"
+                      tabindex="${()=>{let e=$.activeCell.value;return e.row===0&&e.col===t+d.value?`0`:`-1`}}"
                       data-align="${e.align??`left`}"
                       aria-sort="${()=>e.sortable?ariaSortValue(F.sortState.value,e.key):void 0}"
                       aria-label="${e.sortable?void 0:e.headerLabel??e.label}"
                       style="${()=>{let t=z.value[e.key];return t?`width:${t}px`:e.width?`width:${e.width}`:``}}">
                       <div class="dg-th-inner">
-                        ${()=>e.sortable?S`
+                        ${()=>e.sortable?w`
                                 <ore-button
                                   class="dg-sort-btn"
                                   variant="text"
@@ -328,34 +328,34 @@ import{tableBaseMixin as e}from"./styles/mixins/table-base.css.js";import{warn a
                                     stroke-width="2"></ore-icon>
                                 </ore-button>
                               `:e.label}
-                        ${e.resizable?S`
+                        ${e.resizable?w`
                                 <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>
-                              `:S``}
+                              `:w``}
                       </div>
                     </th>
                   `})}
-              ${()=>u.value?S`
+              ${()=>l.value?w`
                       <th
                         class="dg-th dg-th-expand"
                         role="columnheader"
                         scope="col"
                         aria-label="${()=>a.value.rowDetails}"
                         tabindex="-1"></th>
-                    `:S``}
+                    `:w``}
             </tr>
           </thead>
 
           <!-- Body -->
           <tbody class="dg-body" part="tbody">
-            ${()=>F.currentPageItems.value.length===0?S`
+            ${()=>F.currentPageItems.value.length===0?w`
                     <tr role="row">
                       <td class="dg-empty" role="gridcell" colspan="${()=>String(H.value)}">
                         <div class="dg-empty-content">
                           ${()=>e.emptyText.value??`No data`}
-                          ${()=>F.searchQuery.value||F.filterValues.value.size?S`
+                          ${()=>F.searchQuery.value||F.filterValues.value.size?w`
                                   <div class="dg-empty-actions">
                                     <ore-button
                                       variant="text"
@@ -364,22 +364,22 @@ import{tableBaseMixin as e}from"./styles/mixins/table-base.css.js";import{warn a
                                       ${()=>a.value.clearFiltersAndSearch}
                                     </ore-button>
                                   </div>
-                                `:S``}
+                                `:w``}
                         </div>
                       </td>
                     </tr>
-                  `:F.currentPageItems.value.map((e,t)=>{let n=resolveKey(e),r=s.value!==`none`&&!o.value,i=t+1;return S`
+                  `:F.currentPageItems.value.map((e,t)=>{let n=resolveKey(e),r=s.value!==`none`&&!o.value,i=t+1;return w`
                       <tr
                         class="dg-tr"
                         part="row"
                         role="row"
                         aria-selected="${()=>s.value===`none`?null:String(F.selectedKeys.value.has(n))}"
-                        aria-expanded="${()=>u.value?String(c.value.has(n)):null}"
+                        aria-expanded="${()=>l.value?String(c.value.has(n)):null}"
                         ?data-selectable="${r}"
                         ?data-disabled="${o}"
                         @click="${()=>{r&&s.value===`single`&&F.toggleRow(n)}}"
                         @keydown="${e=>{(e.key===`Enter`||e.key===` `)&&r&&s.value===`single`&&(e.preventDefault(),F.toggleRow(n))}}">
-                        ${()=>s.value===`multi`?S`
+                        ${()=>s.value===`multi`?w`
                                 <td
                                   class="dg-td dg-td-check"
                                   role="gridcell"
@@ -394,19 +394,19 @@ import{tableBaseMixin as e}from"./styles/mixins/table-base.css.js";import{warn a
                                     @click="${e=>e.stopPropagation()}"
                                     @change="${()=>{o.value||F.toggleRow(n)}}"></ore-checkbox>
                                 </td>
-                              `:S``}
-                        ${B.value.map((t,n)=>{let r=e,a=getCellValue(t,r),o=t.renderCell?.(r)??a,s=n===B.value.length-1;return S`
+                              `:w``}
+                        ${B.value.map((t,n)=>{let r=e,a=getCellValue(t,r),o=t.renderCell?.(r)??a,s=n===B.value.length-1;return w`
                             <td
-                              class="${`dg-td${s&&u.value?` dg-td-last`:``}`}"
+                              class="${`dg-td${s&&l.value?` dg-td-last`:``}`}"
                               part="cell"
                               role="gridcell"
                               data-align="${t.align??`left`}"
-                              tabindex="${()=>{let e=$.activeCell.value;return e.row===i&&e.col===n+h.value?`0`:`-1`}}"
+                              tabindex="${()=>{let e=$.activeCell.value;return e.row===i&&e.col===n+d.value?`0`:`-1`}}"
                               title="${a}">
                               ${o}
                             </td>
                           `})}
-                        ${()=>u.value?S`
+                        ${()=>l.value?w`
                                 <td
                                   class="dg-td dg-td-expand"
                                   role="gridcell"
@@ -429,43 +429,43 @@ import{tableBaseMixin as e}from"./styles/mixins/table-base.css.js";import{warn a
                                       aria-hidden="true"></ore-icon>
                                   </ore-button>
                                 </td>
-                              `:S``}
+                              `:w``}
                       </tr>
-                      ${()=>u.value&&c.value.has(n)?S`
+                      ${()=>l.value&&c.value.has(n)?w`
                               <tr class="dg-tr-expanded" role="row">
                                 <td
                                   class="dg-td-expanded"
                                   role="gridcell"
                                   colspan="${()=>String(H.value)}">
-                                  ${E(()=>T.value.find(e=>typeof e.renderExpanded==`function`)?.renderExpanded?.(e)??``)}
+                                  ${O(()=>v.value.find(e=>typeof e.renderExpanded==`function`)?.renderExpanded?.(e)??``)}
                                 </td>
                               </tr>
-                            `:S``}
+                            `:w``}
                     `})}
           </tbody>
         </table>
       </div>
 
       <!-- Footer / Pagination -->
-      ${()=>U.value?S`
+      ${()=>U.value?w`
               <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">
                     ${W}
                   </span>
-                  ${()=>{let t=e.pageSizeOptions.value??[];return t.length?S`
+                  ${()=>{let t=e.pageSizeOptions.value??[];return t.length?w`
                           <div class="dg-page-size-wrap">
                             <ore-select
                               class="dg-page-size-select"
                               fullwidth
                               hide-label
                               label="${()=>a.value.rowsPerPage}"
-                              value="${()=>String(g.value)}"
+                              value="${()=>String(m.value)}"
                               options="${()=>t.map(e=>({label:String(e),value:String(e)}))}"
                               disabled="${()=>o.value||void 0}"
-                              @change="${e=>{let t=parseInt(controlValues(e)[0]??``,10);Number.isNaN(t)||(g.value=t,F.goToPage(0),r(`page-change`,{pageIndex:0,pageSize:t}))}}"></ore-select>
+                              @change="${e=>{let t=parseInt(controlValues(e)[0]??``,10);Number.isNaN(t)||(m.value=t,F.goToPage(0),r(`page-change`,{pageIndex:0,pageSize:t}))}}"></ore-select>
                           </div>
-                        `:S``}}
+                        `:w``}}
                 </div>
                 <div class="dg-pagination" role="group" aria-label="${()=>a.value.pageNavigation}">
                     <ore-button
@@ -499,6 +499,6 @@ import{tableBaseMixin as e}from"./styles/mixins/table-base.css.js";import{warn a
                     </ore-button>
                 </div>
               </div>
-            `:S``}
-    `},shadow:{delegatesFocus:!0},styles:[e(`datagrid`),c]});export{a as BUTTON_TAG,o as CHECKBOX_TAG,u as COLUMN_TAG,s as COMBOBOX_OPTION_TAG,A as DATAGRID_TAG,i as ICON_TAG,g as POPOVER_TAG,h as SELECT_TAG,ariaSortValue,sortIconName};
+            `:w``}
+    `},shadow:{delegatesFocus:!0},styles:[e(`datagrid`),l]});export{o as BUTTON_TAG,s as CHECKBOX_TAG,d as COLUMN_TAG,c as COMBOBOX_OPTION_TAG,N as DATAGRID_TAG,a as ICON_TAG,v as POPOVER_TAG,_ as SELECT_TAG,ariaSortValue,sortIconName};
 //# sourceMappingURL=datagrid.js.map