@skdx/web-components 0.32.0 → 0.34.0

package/dist/table/Table.js

@@ -1,10 +1,10 @@
-var _=Object.defineProperty;var v=Object.getOwnPropertyDescriptor;var r=(l,a,t,n)=>{for(var i=n>1?void 0:n?v(a,t):a,s=l.length-1,d;s>=0;s--)(d=l[s])&&(i=(n?d(a,t,i):d(i))||i);return n&&i&&_(a,t,i),i};import{css as R,html as A,LitElement as C}from"lit";import{property as o,state as c}from"lit/decorators.js";import{ifDefined as w}from"lit/directives/if-defined.js";import{hasAuthoredParts as E}from"../internal/authored.js";import{customElement as M}from"../internal/define.js";import{derivedParts as S,threadAppearance as W}from"../internal/derive.js";import{emit as u}from"../internal/events.js";import{nextId as I}from"../internal/ids.js";import{announce as B}from"../utils/live-announcer.js";import{TABLE_INTERNAL_UPDATE as L}from"./column-context.js";import{fillTableAnatomy as x,renderTableRows as p,TABLE_ANATOMY_GENERATED as z}from"./TableAnatomy.js";var F=["sort","filter","multiSort","selected","selectionMode","expandedRowIds","columnWidths"],D=["columns","sortable","selectable","expandable","resizable","filterable","caption"],N=["data","columns","renderCell","renderExpanded","rowId","getRowLabel","empty","selectable","expandable","sort","filter"];function g(l,a){return a.some(t=>l.has(t))}function b(l){return l==null?new Set:l instanceof Set?l:new Set(Array.isArray(l)?l:[String(l)])}function O(l,a,t){let n=l.find(s=>s.columnKey===a),i="asc";return n!==void 0&&(i=n.direction==="asc"?"desc":null),t?i===null?l.filter(s=>s.columnKey!==a):n===void 0?[...l,{columnKey:a,direction:i}]:l.map(s=>s.columnKey===a?{columnKey:a,direction:i}:s):i===null?[]:[{columnKey:a,direction:i}]}function $(l,a){return a===null?`${l} not sorted`:`${l} sorted ${a==="asc"?"ascending":"descending"}`}var e=class extends C{constructor(){super(...arguments);this.defaultSort=[];this.multiSort=!1;this.defaultFilter={};this.selectionMode="none";this.getSortLabel=$;this.defaultExpandedRowIds=[];this.defaultColumnWidths={};this.sortable=!1;this.selectable=!1;this.expandable=!1;this.resizable=!1;this.filterable=!1;this.stickyHeader=!1;this.tableId=I("skdx-table");this._uncontrolledSort=[];this._uncontrolledSelected=new Set;this._uncontrolledExpandedRowIds=new Set;this._uncontrolledColumnWidths={};this._uncontrolledFilter={};this._initialized=!1;this._anatomyBuilt=!1;this._fillAnatomy=()=>{if(E(this,z)){this._anatomyBuilt=!1;return}this._anatomyBuilt||(this._anatomyBuilt=!0,this.selectable&&this.selectionMode==="none"&&(this.selectionMode="multiple"),x(this))};this._rebuildAnatomy=()=>{this._anatomyBuilt=!1,this._fillAnatomy()};this._anchorRowId=null}connectedCallback(){super.connectedCallback(),this._initialized||(this._uncontrolledSort=this.defaultSort??[],this._uncontrolledSelected=b(this.defaultSelected),this._uncontrolledExpandedRowIds=b(this.defaultExpandedRowIds),this._uncontrolledColumnWidths={...this.defaultColumnWidths},this._uncontrolledFilter={...this.defaultFilter},this._initialized=!0),queueMicrotask(this._fillAnatomy)}get sortList(){return this.sort!==void 0?this.sort:this._uncontrolledSort}get filterMap(){return this.filter!==void 0?this.filter:this._uncontrolledFilter}setColumnFilter(t,n){let i=this.filterMap;if((i[t]??"")===n)return;let s={...i};n===""?delete s[t]:s[t]=n,this.filter===void 0&&(this._uncontrolledFilter=s),u(this,"filter-change",s),this._broadcast(),p(this)}get currentSelected(){return this.selected!==void 0?b(this.selected):this._uncontrolledSelected}toggleSort(t,n=t){let i=O(this.sortList,t,this.multiSort);this.sort===void 0&&(this._uncontrolledSort=i),u(this,"sort-change",i);let s=i.find(d=>d.columnKey===t)?.direction??null;B(this.getSortLabel(n,s)),this._broadcast(),p(this)}orderedRowIds(){return[...this.querySelectorAll("skdx-table-body skdx-table-row[row-id]")].filter(n=>n.closest("skdx-table")===this).map(n=>n.getAttribute("row-id"))}toggleRow(t,n=!1){if(this.selectionMode==="none")return;let i=this.currentSelected,s=this._anchorRowId;if(n&&this.selectionMode==="multiple"&&s!==null&&s!==t){let h=this.orderedRowIds(),f=h.indexOf(s),m=h.indexOf(t);if(f!==-1&&m!==-1){let y=h.slice(Math.min(f,m),Math.max(f,m)+1);this._commitSelected(new Set([...i,...y]));return}}this._anchorRowId=t;let d;this.selectionMode==="single"?d=i.has(t)&&i.size===1?new Set:new Set([t]):(d=new Set(i),d.has(t)?d.delete(t):d.add(t)),this._commitSelected(d)}_commitSelected(t){let n=this.currentSelected;n.size===t.size&&[...t].every(i=>n.has(i))||(this.selected===void 0&&(this._uncontrolledSelected=t),u(this,"selected-change",[...t]),this._broadcast())}isRowSelected(t){return this.currentSelected.has(t)}toggleAll(t){if(this.selectionMode==="none")return;let n=this.currentSelected,i;if(t.length>0&&t.every(s=>n.has(s))){i=new Set(n);for(let s of t)i.delete(s)}else i=new Set([...n,...t]);this._commitSelected(i)}isAllSelected(t){let n=this.currentSelected;return t.length>0&&t.every(i=>n.has(i))}isSomeSelected(t){let n=this.currentSelected;return t.some(i=>n.has(i))&&!this.isAllSelected(t)}get expandedRowIdSet(){return this.expandedRowIds!==void 0?new Set(this.expandedRowIds):this._uncontrolledExpandedRowIds}get resolvedColumnWidths(){return this.columnWidths!==void 0?this.columnWidths:this._uncontrolledColumnWidths}isRowExpanded(t){return this.expandedRowIdSet.has(t)}toggleRowExpanded(t){let n=new Set(this.expandedRowIdSet);n.has(t)?n.delete(t):n.add(t),this.expandedRowIds===void 0&&(this._uncontrolledExpandedRowIds=n),u(this,"expanded-row-ids-change",[...n]),this._broadcast()}setColumnWidth(t,n){let i=this.resolvedColumnWidths;if(i[t]===n)return;let s={...i,[t]:n};this.columnWidths===void 0&&(this._uncontrolledColumnWidths=s),u(this,"column-widths-change",s),this._broadcast()}commitColumnWidths(){u(this,"column-widths-commit",this.resolvedColumnWidths)}detailRowId(t){return`${this.tableId}-detail-${t}`}_broadcast(){this.dispatchEvent(new CustomEvent(L))}updated(t){g(t,F)&&this._broadcast(),g(t,D)?this._rebuildAnatomy():this._fillAnatomy(),g(t,N)&&p(this),W(this,{size:this.size},[...S(this,"skdx-table-row-select-checkbox"),...S(this,"skdx-table-select-all-checkbox")])}headerCellCount(){let t=this.querySelectorAll("skdx-table-header-cell").length;return t>0?t:this.columnCount??1}render(){return A`<table
+var S=Object.defineProperty;var R=Object.getOwnPropertyDescriptor;var s=(l,d,e,t)=>{for(var r=t>1?void 0:t?R(d,e):d,o=l.length-1,a;o>=0;o--)(a=l[o])&&(r=(t?a(d,e,r):a(r))||r);return t&&r&&S(d,e,r),r};import{css as O,html as A,LitElement as E}from"lit";import{property as i,state as f}from"lit/decorators.js";import{ifDefined as w}from"lit/directives/if-defined.js";import{hasAuthoredParts as I}from"../internal/authored.js";import{customElement as M}from"../internal/define.js";import{derivedParts as v,threadAppearance as P}from"../internal/derive.js";import{emit as h}from"../internal/events.js";import{nextId as x}from"../internal/ids.js";import{announce as C}from"../utils/live-announcer.js";import{TABLE_INTERNAL_UPDATE as N}from"./column-context.js";import{applyColumnOrder as y,fillTableAnatomy as W,renderTableRows as g,TABLE_ANATOMY_GENERATED as G}from"./TableAnatomy.js";var B=["sort","filter","multiSort","selected","selectionMode","expandedRowIds","columnWidths","columnOrder","columnPins","collapsedGroups","expandedNodeIds"],L=["columns","sortable","selectable","expandable","resizable","filterable","reorderable","pinnable","caption"],z=["data","columns","renderCell","renderExpanded","rowId","getRowLabel","empty","selectable","expandable","sort","filter","groupBy","renderGroupHeader","getSubRows","collapsedGroups","expandedNodeIds"],F=["columnOrder","columnPins"];function _(l,d){return d.some(e=>l.has(e))}function b(l){return l==null?new Set:l instanceof Set?l:new Set(Array.isArray(l)?l:[String(l)])}function $(l,d,e){let t=l.find(o=>o.columnKey===d),r="asc";return t!==void 0&&(r=t.direction==="asc"?"desc":null),e?r===null?l.filter(o=>o.columnKey!==d):t===void 0?[...l,{columnKey:d,direction:r}]:l.map(o=>o.columnKey===d?{columnKey:d,direction:r}:o):r===null?[]:[{columnKey:d,direction:r}]}function D(l,d){return d===null?`${l} not sorted`:`${l} sorted ${d==="asc"?"ascending":"descending"}`}function j(l,d,e){return`${l} moved to position ${d} of ${e}`}var n=class extends E{constructor(){super(...arguments);this.defaultSort=[];this.multiSort=!1;this.defaultFilter={};this.selectionMode="none";this.getSortLabel=D;this.defaultExpandedRowIds=[];this.defaultColumnWidths={};this.defaultColumnOrder=[];this.defaultColumnPins={};this.defaultCollapsedGroups=[];this.defaultExpandedNodeIds=[];this.getMoveLabel=j;this.sortable=!1;this.selectable=!1;this.expandable=!1;this.resizable=!1;this.filterable=!1;this.reorderable=!1;this.pinnable=!1;this.stickyHeader=!1;this.tableId=x("skdx-table");this._uncontrolledSort=[];this._uncontrolledSelected=new Set;this._uncontrolledExpandedRowIds=new Set;this._uncontrolledColumnWidths={};this._uncontrolledFilter={};this._uncontrolledColumnOrder=[];this._uncontrolledColumnPins={};this._uncontrolledCollapsedGroups=new Set;this._uncontrolledExpandedNodeIds=new Set;this._initialized=!1;this._anatomyBuilt=!1;this._fillAnatomy=()=>{if(I(this,G)){this._anatomyBuilt=!1;return}this._anatomyBuilt||(this._anatomyBuilt=!0,this.selectable&&this.selectionMode==="none"&&(this.selectionMode="multiple"),W(this))};this._rebuildAnatomy=()=>{this._anatomyBuilt=!1,this._fillAnatomy()};this._anchorRowId=null;this._pinOffsets={}}connectedCallback(){super.connectedCallback(),this._initialized||(this._uncontrolledSort=this.defaultSort??[],this._uncontrolledSelected=b(this.defaultSelected),this._uncontrolledExpandedRowIds=b(this.defaultExpandedRowIds),this._uncontrolledColumnWidths={...this.defaultColumnWidths},this._uncontrolledFilter={...this.defaultFilter},this._uncontrolledColumnOrder=[...this.defaultColumnOrder],this._uncontrolledColumnPins={...this.defaultColumnPins},this._uncontrolledCollapsedGroups=b(this.defaultCollapsedGroups),this._uncontrolledExpandedNodeIds=b(this.defaultExpandedNodeIds),this._initialized=!0),queueMicrotask(this._fillAnatomy)}disconnectedCallback(){this._pinObserver?.disconnect(),super.disconnectedCallback()}get sortList(){return this.sort!==void 0?this.sort:this._uncontrolledSort}get filterMap(){return this.filter!==void 0?this.filter:this._uncontrolledFilter}setColumnFilter(e,t){let r=this.filterMap;if((r[e]??"")===t)return;let o={...r};t===""?delete o[e]:o[e]=t,this.filter===void 0&&(this._uncontrolledFilter=o),h(this,"filter-change",o),this._broadcast(),g(this)}get currentSelected(){return this.selected!==void 0?b(this.selected):this._uncontrolledSelected}toggleSort(e,t=e){let r=$(this.sortList,e,this.multiSort);this.sort===void 0&&(this._uncontrolledSort=r),h(this,"sort-change",r);let o=r.find(a=>a.columnKey===e)?.direction??null;C(this.getSortLabel(t,o)),this._broadcast(),g(this)}orderedRowIds(){return[...this.querySelectorAll("skdx-table-body skdx-table-row[row-id]")].filter(t=>t.closest("skdx-table")===this).map(t=>t.getAttribute("row-id"))}toggleRow(e,t=!1){if(this.selectionMode==="none")return;let r=this.currentSelected,o=this._anchorRowId;if(t&&this.selectionMode==="multiple"&&o!==null&&o!==e){let c=this.orderedRowIds(),p=c.indexOf(o),u=c.indexOf(e);if(p!==-1&&u!==-1){let m=c.slice(Math.min(p,u),Math.max(p,u)+1);this._commitSelected(new Set([...r,...m]));return}}this._anchorRowId=e;let a;this.selectionMode==="single"?a=r.has(e)&&r.size===1?new Set:new Set([e]):(a=new Set(r),a.has(e)?a.delete(e):a.add(e)),this._commitSelected(a)}_commitSelected(e){let t=this.currentSelected;t.size===e.size&&[...e].every(r=>t.has(r))||(this.selected===void 0&&(this._uncontrolledSelected=e),h(this,"selected-change",[...e]),this._broadcast())}isRowSelected(e){return this.currentSelected.has(e)}toggleAll(e){if(this.selectionMode==="none")return;let t=this.currentSelected,r;if(e.length>0&&e.every(o=>t.has(o))){r=new Set(t);for(let o of e)r.delete(o)}else r=new Set([...t,...e]);this._commitSelected(r)}isAllSelected(e){let t=this.currentSelected;return e.length>0&&e.every(r=>t.has(r))}isSomeSelected(e){let t=this.currentSelected;return e.some(r=>t.has(r))&&!this.isAllSelected(e)}get expandedRowIdSet(){return this.expandedRowIds!==void 0?new Set(this.expandedRowIds):this._uncontrolledExpandedRowIds}get resolvedColumnWidths(){return this.columnWidths!==void 0?this.columnWidths:this._uncontrolledColumnWidths}isRowExpanded(e){return this.expandedRowIdSet.has(e)}toggleRowExpanded(e){let t=new Set(this.expandedRowIdSet);t.has(e)?t.delete(e):t.add(e),this.expandedRowIds===void 0&&(this._uncontrolledExpandedRowIds=t),h(this,"expanded-row-ids-change",[...t]),this._broadcast()}setColumnWidth(e,t){let r=this.resolvedColumnWidths;if(r[e]===t)return;let o={...r,[e]:t};this.columnWidths===void 0&&(this._uncontrolledColumnWidths=o),h(this,"column-widths-change",o),this._broadcast()}commitColumnWidths(){h(this,"column-widths-commit",this.resolvedColumnWidths)}get resolvedColumnOrder(){return this.columnOrder!==void 0?this.columnOrder:this._uncontrolledColumnOrder}get resolvedColumnPins(){return this.columnPins!==void 0?this.columnPins:this._uncontrolledColumnPins}orderedColumnKeys(){return[...this.querySelectorAll("skdx-table-header skdx-table-header-cell[column-key]")].filter(t=>t.closest("skdx-table")===this).map(t=>t.getAttribute("column-key"))}moveColumn(e,t,r=e){let o=this.orderedColumnKeys(),a=o.indexOf(e);if(a===-1)return;let c=o.filter(u=>u!==e),p=Math.min(Math.max(t,0),c.length);a!==p&&(c.splice(p,0,e),this.columnOrder===void 0&&(this._uncontrolledColumnOrder=c),h(this,"column-order-change",c),C(this.getMoveLabel(r,p+1,c.length)),this._broadcast(),y(this))}setColumnPin(e,t){let r=this.resolvedColumnPins;if((r[e]??null)===t)return;let o={...r};t===null?delete o[e]:o[e]=t,this.columnPins===void 0&&(this._uncontrolledColumnPins=o),h(this,"column-pins-change",o),this._broadcast(),y(this)}get pinOffsets(){return this._pinOffsets}_measurePinOffsets(){let e=this.resolvedColumnPins;if(Object.keys(e).length===0&&Object.keys(this._pinOffsets).length===0)return;let t=[...this.querySelectorAll("skdx-table-header skdx-table-header-cell[column-key]")].filter(u=>u.closest("skdx-table")===this),r={},o=0;for(let u of t){let m=u.getAttribute("column-key");e[m]==="start"&&(r[m]=o,o+=u.offsetWidth)}let a=0;for(let u of[...t].reverse()){let m=u.getAttribute("column-key");e[m]==="end"&&(r[m]=a,a+=u.offsetWidth)}let c=Object.keys(r);if(c.length===Object.keys(this._pinOffsets).length&&c.every(u=>this._pinOffsets[u]===r[u])||(this._pinOffsets=r,this._broadcast()),!(typeof ResizeObserver>"u"||c.length===0)){this._pinObserver??(this._pinObserver=new ResizeObserver(()=>this._measurePinOffsets())),this._pinObserver.disconnect();for(let u of t)this._pinObserver.observe(u)}}get collapsedGroupSet(){return this.collapsedGroups!==void 0?new Set(this.collapsedGroups):this._uncontrolledCollapsedGroups}isGroupCollapsed(e){return this.collapsedGroupSet.has(e)}toggleGroup(e){let t=new Set(this.collapsedGroupSet);t.has(e)?t.delete(e):t.add(e),this.collapsedGroups===void 0&&(this._uncontrolledCollapsedGroups=t),h(this,"collapsed-groups-change",[...t]),this._broadcast(),g(this)}get expandedNodeIdSet(){return this.expandedNodeIds!==void 0?new Set(this.expandedNodeIds):this._uncontrolledExpandedNodeIds}isNodeExpanded(e){return this.expandedNodeIdSet.has(e)}toggleNode(e){let t=new Set(this.expandedNodeIdSet);t.has(e)?t.delete(e):t.add(e),this.expandedNodeIds===void 0&&(this._uncontrolledExpandedNodeIds=t),h(this,"expanded-node-ids-change",[...t]),this._broadcast(),g(this)}detailRowId(e){return`${this.tableId}-detail-${e}`}_broadcast(){this.dispatchEvent(new CustomEvent(N))}updated(e){_(e,B)&&this._broadcast(),_(e,L)?this._rebuildAnatomy():this._fillAnatomy(),_(e,F)?y(this):_(e,z)&&g(this),this._measurePinOffsets(),P(this,{size:this.size},[...v(this,"skdx-table-row-select-checkbox"),...v(this,"skdx-table-select-all-checkbox")])}headerCellCount(){let e=this.querySelectorAll("skdx-table-header-cell").length;return e>0?e:this.columnCount??1}render(){return A`<table
       part="table"
       aria-rowcount=${w(this.rowCount)}
       aria-colcount=${w(this.columnCount)}
     >
       <slot @slotchange=${this._fillAnatomy}></slot>
-    </table>`}};e.styles=R`
+    </table>`}};n.styles=O`
     /* The host takes the table's display role; the shadow <table> stays display: contents so the skin's box lands on the host. */
     :host {
       display: table;
@@ -13,4 +13,4 @@ var _=Object.defineProperty;var v=Object.getOwnPropertyDescriptor;var r=(l,a,t,n
     :host > table {
       display: contents;
     }
-  `,r([o({attribute:!1})],e.prototype,"sort",2),r([o({type:Array,attribute:"default-sort"})],e.prototype,"defaultSort",2),r([o({type:Number,attribute:"row-count"})],e.prototype,"rowCount",2),r([o({type:Number,attribute:"column-count"})],e.prototype,"columnCount",2),r([o({type:Boolean,attribute:"multi-sort"})],e.prototype,"multiSort",2),r([o({attribute:!1})],e.prototype,"filter",2),r([o({type:Object,attribute:"default-filter"})],e.prototype,"defaultFilter",2),r([o({attribute:!1})],e.prototype,"selected",2),r([o({type:Array,attribute:"default-selected"})],e.prototype,"defaultSelected",2),r([o({type:String,attribute:"selection-mode"})],e.prototype,"selectionMode",2),r([o({attribute:!1})],e.prototype,"getSortLabel",2),r([o({attribute:!1})],e.prototype,"expandedRowIds",2),r([o({type:Array,attribute:"default-expanded-row-ids"})],e.prototype,"defaultExpandedRowIds",2),r([o({attribute:!1})],e.prototype,"columnWidths",2),r([o({type:Object,attribute:"default-column-widths"})],e.prototype,"defaultColumnWidths",2),r([o({attribute:!1})],e.prototype,"columns",2),r([o({attribute:!1})],e.prototype,"data",2),r([o({type:Boolean})],e.prototype,"sortable",2),r([o({type:Boolean})],e.prototype,"selectable",2),r([o({type:Boolean})],e.prototype,"expandable",2),r([o({type:Boolean})],e.prototype,"resizable",2),r([o({type:Boolean})],e.prototype,"filterable",2),r([o()],e.prototype,"empty",2),r([o()],e.prototype,"caption",2),r([o({attribute:!1})],e.prototype,"renderCell",2),r([o({attribute:!1})],e.prototype,"renderExpanded",2),r([o({attribute:!1})],e.prototype,"rowId",2),r([o({attribute:!1})],e.prototype,"getRowLabel",2),r([o({type:String,reflect:!0,attribute:"data-density"})],e.prototype,"density",2),r([o({type:Boolean,reflect:!0,attribute:"data-sticky-header"})],e.prototype,"stickyHeader",2),r([o({type:String,attribute:"data-size"})],e.prototype,"size",2),r([c()],e.prototype,"_uncontrolledSort",2),r([c()],e.prototype,"_uncontrolledSelected",2),r([c()],e.prototype,"_uncontrolledExpandedRowIds",2),r([c()],e.prototype,"_uncontrolledColumnWidths",2),r([c()],e.prototype,"_uncontrolledFilter",2),e=r([M("skdx-table","table","root")],e);export{e as SkdxTable,$ as defaultGetSortLabel};
+  `,s([i({attribute:!1})],n.prototype,"sort",2),s([i({type:Array,attribute:"default-sort"})],n.prototype,"defaultSort",2),s([i({type:Number,attribute:"row-count"})],n.prototype,"rowCount",2),s([i({type:Number,attribute:"column-count"})],n.prototype,"columnCount",2),s([i({type:Boolean,attribute:"multi-sort"})],n.prototype,"multiSort",2),s([i({attribute:!1})],n.prototype,"filter",2),s([i({type:Object,attribute:"default-filter"})],n.prototype,"defaultFilter",2),s([i({attribute:!1})],n.prototype,"selected",2),s([i({type:Array,attribute:"default-selected"})],n.prototype,"defaultSelected",2),s([i({type:String,attribute:"selection-mode"})],n.prototype,"selectionMode",2),s([i({attribute:!1})],n.prototype,"getSortLabel",2),s([i({attribute:!1})],n.prototype,"expandedRowIds",2),s([i({type:Array,attribute:"default-expanded-row-ids"})],n.prototype,"defaultExpandedRowIds",2),s([i({attribute:!1})],n.prototype,"columnWidths",2),s([i({type:Object,attribute:"default-column-widths"})],n.prototype,"defaultColumnWidths",2),s([i({attribute:!1})],n.prototype,"columnOrder",2),s([i({type:Array,attribute:"default-column-order"})],n.prototype,"defaultColumnOrder",2),s([i({attribute:!1})],n.prototype,"columnPins",2),s([i({type:Object,attribute:"default-column-pins"})],n.prototype,"defaultColumnPins",2),s([i({attribute:!1})],n.prototype,"collapsedGroups",2),s([i({type:Array,attribute:"default-collapsed-groups"})],n.prototype,"defaultCollapsedGroups",2),s([i({attribute:!1})],n.prototype,"expandedNodeIds",2),s([i({type:Array,attribute:"default-expanded-node-ids"})],n.prototype,"defaultExpandedNodeIds",2),s([i({attribute:!1})],n.prototype,"getMoveLabel",2),s([i({attribute:!1})],n.prototype,"columns",2),s([i({attribute:!1})],n.prototype,"data",2),s([i({type:Boolean})],n.prototype,"sortable",2),s([i({type:Boolean})],n.prototype,"selectable",2),s([i({type:Boolean})],n.prototype,"expandable",2),s([i({type:Boolean})],n.prototype,"resizable",2),s([i({type:Boolean})],n.prototype,"filterable",2),s([i({type:Boolean})],n.prototype,"reorderable",2),s([i({type:Boolean})],n.prototype,"pinnable",2),s([i({type:String,attribute:"group-by"})],n.prototype,"groupBy",2),s([i({attribute:!1})],n.prototype,"renderGroupHeader",2),s([i({attribute:!1})],n.prototype,"getSubRows",2),s([i()],n.prototype,"empty",2),s([i()],n.prototype,"caption",2),s([i({attribute:!1})],n.prototype,"renderCell",2),s([i({attribute:!1})],n.prototype,"renderExpanded",2),s([i({attribute:!1})],n.prototype,"rowId",2),s([i({attribute:!1})],n.prototype,"getRowLabel",2),s([i({type:String,reflect:!0,attribute:"data-density"})],n.prototype,"density",2),s([i({type:Boolean,reflect:!0,attribute:"data-sticky-header"})],n.prototype,"stickyHeader",2),s([i({type:String,attribute:"data-size"})],n.prototype,"size",2),s([f()],n.prototype,"_uncontrolledSort",2),s([f()],n.prototype,"_uncontrolledSelected",2),s([f()],n.prototype,"_uncontrolledExpandedRowIds",2),s([f()],n.prototype,"_uncontrolledColumnWidths",2),s([f()],n.prototype,"_uncontrolledFilter",2),s([f()],n.prototype,"_uncontrolledColumnOrder",2),s([f()],n.prototype,"_uncontrolledColumnPins",2),s([f()],n.prototype,"_uncontrolledCollapsedGroups",2),s([f()],n.prototype,"_uncontrolledExpandedNodeIds",2),n=s([M("skdx-table","table","root")],n);export{n as SkdxTable,j as defaultGetMoveLabel,D as defaultGetSortLabel};

package/dist/table/TableAnatomy.cjs

@@ -1,22 +1,34 @@
-"use strict";var u=Object.defineProperty;var T=Object.getOwnPropertyDescriptor;var A=Object.getOwnPropertyNames;var $=Object.prototype.hasOwnProperty;var R=(e,t)=>{for(var n in t)u(e,n,{get:t[n],enumerable:!0})},E=(e,t,n,r)=>{if(t&&typeof t=="object"||typeof t=="function")for(let a of A(t))!$.call(e,a)&&a!==n&&u(e,a,{get:()=>t[a],enumerable:!(r=T(t,a))||r.enumerable});return e};var C=e=>E(u({},"__esModule",{value:!0}),e);var z={};R(z,{TABLE_ANATOMY_GENERATED:()=>b,defaultRowId:()=>h,fillTableAnatomy:()=>I,filterRows:()=>y,renderTableRows:()=>w,sortRows:()=>g});module.exports=C(z);var o=require("lit"),f=require("lit/directives/repeat.js"),M=require("./TableCaption.cjs"),O=require("./TableHeader.cjs"),q=require("./TableBody.cjs"),D=require("./TableRow.cjs"),N=require("./TableCell.cjs"),_=require("./TableHeaderCell.cjs"),j=require("./TableRowSelectCheckbox.cjs"),B=require("./TableSelectAllCheckbox.cjs"),G=require("./TableExpandTrigger.cjs"),H=require("./TableExpandedRow.cjs"),K=require("./TableEmpty.cjs"),b="data-skdx-table-generated";function L(e,t){let n=e[t.key]??"";return String(n)}function h(e,t){return typeof e.id=="string"?e.id:String(t)}function v(e,t){if(typeof e=="number"&&typeof t=="number")return e-t;let n=e??"",r=t??"";return String(n).localeCompare(String(r))}function g(e,t){return t.length===0?[...e]:[...e].sort((n,r)=>{for(let{columnKey:a,direction:c}of t){let l=v(n[a],r[a]);if(l!==0)return c==="asc"?l:-l}return 0})}function y(e,t){let n=Object.entries(t).filter(([,r])=>r!=="");return n.length===0?[...e]:e.filter(r=>n.every(([a,c])=>String(r[a]??"").toLowerCase().includes(c.toLowerCase())))}function I(e){let t=[];if(e.caption){let l=document.createElement("skdx-table-caption");l.setAttribute(b,""),l.textContent=e.caption,t.push(l)}let n=e.columns??[],r=document.createElement("skdx-table-header");r.setAttribute(b,"");let a=document.createElement("skdx-table-row");if(e.selectable){let l=document.createElement("skdx-table-header-cell"),s=document.createElement("skdx-table-select-all-checkbox");s.setAttribute("scope","page"),l.append(s),a.append(l)}if(e.expandable){let l=document.createElement("skdx-table-header-cell");l.setAttribute("aria-hidden","true"),a.append(l)}for(let l of n){let s=document.createElement("skdx-table-header-cell");s.setAttribute("column-key",l.key),e.sortable&&l.sortable&&s.setAttribute("sortable",""),e.resizable&&l.resizable&&s.setAttribute("resizable",""),(l.filterable??e.filterable)&&(s.setAttribute("filterable",""),s.setAttribute("filter-label",`Filter ${typeof l.header=="string"?l.header:l.key}`)),(0,o.render)(l.header??l.key,s,{host:e}),a.append(s)}r.append(a),t.push(r);let c=document.createElement("skdx-table-body");c.setAttribute(b,""),t.push(c),e.replaceChildren(...t),w(e)}function w(e){let t=e.querySelector(`:scope > skdx-table-body[${b}]`);if(!t)return;let n=e.columns??[],r=g(y(e.data??[],e.filterMap),e.sortList),a=n.length+(e.selectable?1:0)+(e.expandable?1:0),c=e.renderCell??L,l=e.renderExpanded,s=e.rowId??h,m=e.getRowLabel,x=e.querySelector(`:scope > skdx-table-header[${b}] skdx-table-select-all-checkbox`);if(x&&(x.rowIds=r.map((d,i)=>s(d,i))),r.length===0){(0,o.render)(e.empty?o.html`<skdx-table-empty col-span=${a}>${e.empty}</skdx-table-empty>`:"",t,{host:e});return}(0,o.render)((0,f.repeat)(r,(d,i)=>s(d,i),(d,i)=>{let p=s(d,i),k=m?m(d,i):`row ${p}`;return o.html`
-          <skdx-table-row row-id=${p}>
-            ${e.selectable?o.html`<skdx-table-cell
-                    ><skdx-table-row-select-checkbox
-                      row-id=${p}
-                      aria-label="Select ${k}"
-                    ></skdx-table-row-select-checkbox
-                  ></skdx-table-cell>`:""}
-            ${e.expandable?o.html`<skdx-table-cell
-                    ><skdx-table-expand-trigger
-                      row-id=${p}
-                      label="Details for ${k}"
-                    ></skdx-table-expand-trigger
-                  ></skdx-table-cell>`:""}
-            ${n.map(S=>o.html`<skdx-table-cell>${c(d,S)}</skdx-table-cell>`)}
-          </skdx-table-row>
-          ${e.expandable?o.html`<skdx-table-expanded-row
-                  row-id=${p}
-                  col-span=${a}
-                  >${l?l(d):""}</skdx-table-expanded-row
-                >`:""}
-        `}),t,{host:e})}0&&(module.exports={TABLE_ANATOMY_GENERATED,defaultRowId,fillTableAnatomy,filterRows,renderTableRows,sortRows});
+"use strict";var f=Object.defineProperty;var S=Object.getOwnPropertyDescriptor;var R=Object.getOwnPropertyNames;var C=Object.prototype.hasOwnProperty;var T=(e,t)=>{for(var r in t)f(e,r,{get:t[r],enumerable:!0})},$=(e,t,r,o)=>{if(t&&typeof t=="object"||typeof t=="function")for(let s of R(t))!C.call(e,s)&&s!==r&&f(e,s,{get:()=>t[s],enumerable:!(o=S(t,s))||o.enumerable});return e};var A=e=>$(f({},"__esModule",{value:!0}),e);var z={};T(z,{TABLE_ANATOMY_GENERATED:()=>b,applyColumnOrder:()=>L,defaultRowId:()=>w,fillTableAnatomy:()=>H,filterRows:()=>y,renderTableRows:()=>g,sortRows:()=>m,visibleColumns:()=>p});module.exports=A(z);var d=require("lit"),x=require("lit/directives/repeat.js"),F=require("./TableCaption.cjs"),G=require("./TableHeader.cjs"),K=require("./TableBody.cjs"),v=require("./TableRow.cjs"),D=require("./TableCell.cjs"),N=require("./TableHeaderCell.cjs"),j=require("./TableRowSelectCheckbox.cjs"),P=require("./TableSelectAllCheckbox.cjs"),_=require("./TableExpandTrigger.cjs"),V=require("./TableExpandedRow.cjs"),Y=require("./TableEmpty.cjs"),J=require("./TableGroupRow.cjs"),Q=require("./TableTreeTrigger.cjs"),b="data-skdx-table-generated";function E(e,t){let r=e[t.key]??"";return String(r)}function w(e,t){return typeof e.id=="string"?e.id:String(t)}function O(e,t){if(typeof e=="number"&&typeof t=="number")return e-t;let r=e??"",o=t??"";return String(r).localeCompare(String(o))}function m(e,t){return t.length===0?[...e]:[...e].sort((r,o)=>{for(let{columnKey:s,direction:l}of t){let n=O(r[s],o[s]);if(n!==0)return l==="asc"?n:-n}return 0})}function y(e,t){let r=Object.entries(t).filter(([,o])=>o!=="");return r.length===0?[...e]:e.filter(o=>r.every(([s,l])=>String(o[s]??"").toLowerCase().includes(l.toLowerCase())))}function p(e){let t=e.columns??[],r=e.resolvedColumnOrder,o=e.resolvedColumnPins;if(r.length===0&&Object.keys(o).length===0)return t;let s=new Map(t.map(n=>[n.key,n])),l=[...r.map(n=>s.get(n)).filter(n=>n!==void 0),...t.filter(n=>!r.includes(n.key))];return[...l.filter(n=>o[n.key]==="start"),...l.filter(n=>o[n.key]===void 0),...l.filter(n=>o[n.key]==="end")]}function L(e){let t=e.querySelector(`:scope > skdx-table-header[${b}] > skdx-table-row`);if(t){let r=new Map([...t.querySelectorAll(":scope > skdx-table-header-cell[column-key]")].map(o=>[o.getAttribute("column-key"),o]));for(let o of p(e)){let s=r.get(o.key);s&&t.append(s)}}g(e)}function M(e){return typeof e=="string"?e:typeof e=="number"||typeof e=="boolean"||typeof e=="bigint"?String(e):e instanceof Date?e.toISOString():""}function I(e,t){let r=document.createElement("skdx-table-header-cell"),o=typeof t.header=="string"?t.header:t.key;return r.setAttribute("column-key",t.key),e.sortable&&t.sortable&&r.setAttribute("sortable",""),e.resizable&&t.resizable&&r.setAttribute("resizable",""),(t.reorderable??e.reorderable)&&(r.setAttribute("reorderable",""),r.setAttribute("reorder-label",`Move ${o}`)),(t.pinnable??e.pinnable)&&(r.setAttribute("pinnable",""),r.setAttribute("pin-label",`Pin ${o}`)),(t.filterable??e.filterable)&&(r.setAttribute("filterable",""),r.setAttribute("filter-label",`Filter ${o}`)),(0,d.render)(t.header??t.key,r,{host:e}),r}function H(e){let t=[];if(e.caption){let n=document.createElement("skdx-table-caption");n.setAttribute(b,""),n.textContent=e.caption,t.push(n)}let r=p(e),o=document.createElement("skdx-table-header");o.setAttribute(b,"");let s=document.createElement("skdx-table-row");if(e.selectable){let n=document.createElement("skdx-table-header-cell"),a=document.createElement("skdx-table-select-all-checkbox");a.setAttribute("scope","page"),n.append(a),s.append(n)}if(e.expandable){let n=document.createElement("skdx-table-header-cell");n.setAttribute("aria-hidden","true"),s.append(n)}for(let n of r)s.append(I(e,n));o.append(s),t.push(o);let l=document.createElement("skdx-table-body");l.setAttribute(b,""),t.push(l),e.replaceChildren(...t),g(e)}function h(e,t,r,o,s){let{root:l}=e,n=e.rowIdOf(t,r),a=l.getRowLabel?l.getRowLabel(t,r):`row ${n}`;return e.ids.push(n),d.html`
+    <skdx-table-row
+      row-id=${n}
+      level=${o??d.nothing}
+    >
+      ${l.selectable?d.html`<skdx-table-cell
+              ><skdx-table-row-select-checkbox
+                row-id=${n}
+                aria-label="Select ${a}"
+              ></skdx-table-row-select-checkbox
+            ></skdx-table-cell>`:""}
+      ${l.expandable?d.html`<skdx-table-cell
+              ><skdx-table-expand-trigger
+                row-id=${n}
+                label="Details for ${a}"
+              ></skdx-table-expand-trigger
+            ></skdx-table-cell>`:""}
+      ${e.columns.map((c,i)=>d.html`<skdx-table-cell column-key=${c.key}
+            >${i===0&&s?d.html`<skdx-table-tree-trigger
+                    row-id=${n}
+                    label="Children of ${a}"
+                  ></skdx-table-tree-trigger>`:""}${e.renderCell(t,c)}</skdx-table-cell
+          >`)}
+    </skdx-table-row>
+    ${l.expandable?d.html`<skdx-table-expanded-row
+            row-id=${n}
+            col-span=${e.colSpan}
+            >${l.renderExpanded?l.renderExpanded(t):""}</skdx-table-expanded-row
+          >`:""}
+  `}function k(e,t,r){let o=e.root.getSubRows,s=[];return t.forEach((l,n)=>{let a=o?.(l)??[];s.push(h(e,l,n,o?r:void 0,a.length>0)),a.length!==0&&e.root.isNodeExpanded(e.rowIdOf(l,n))&&s.push(...k(e,m(a,e.root.sortList),r+1))}),s}function q(e,t){let r=e.root.groupBy;if(r===void 0)return k(e,t,0);let o=new Map;for(let l of t){let n=M(l[r]),a=o.get(n);a?a.push(l):o.set(n,[l])}let s=[];for(let[l,n]of o)s.push(d.html`<skdx-table-group-row
+        group-key=${l}
+        col-span=${e.colSpan}
+        >${e.root.renderGroupHeader?e.root.renderGroupHeader(l,n):`${l} (${n.length})`}</skdx-table-group-row
+      >`),e.root.isGroupCollapsed(l)||s.push(...k(e,n,0));return s}function g(e){let t=e.querySelector(`:scope > skdx-table-body[${b}]`);if(!t)return;let r=p(e),o=m(y(e.data??[],e.filterMap),e.sortList),s=e.rowId??w,l={root:e,columns:r,colSpan:r.length+(e.selectable?1:0)+(e.expandable?1:0),renderCell:e.renderCell??E,rowIdOf:s,ids:[]},n=e.groupBy!==void 0||e.getSubRows!==void 0,a=n?q(l,o):(0,x.repeat)(o,(i,u)=>s(i,u),(i,u)=>h(l,i,u,void 0,!1)),c=e.querySelector(`:scope > skdx-table-header[${b}] skdx-table-select-all-checkbox`);if(c&&(c.rowIds=n?l.ids:o.map((i,u)=>s(i,u))),o.length===0){(0,d.render)(e.empty?d.html`<skdx-table-empty col-span=${l.colSpan}>${e.empty}</skdx-table-empty>`:"",t,{host:e});return}(0,d.render)(a,t,{host:e})}0&&(module.exports={TABLE_ANATOMY_GENERATED,applyColumnOrder,defaultRowId,fillTableAnatomy,filterRows,renderTableRows,sortRows,visibleColumns});

package/dist/table/TableAnatomy.d.cts

@@ -12,6 +12,8 @@ import './TableSelectAllCheckbox.cjs';
 import './TableExpandTrigger.cjs';
 import './TableExpandedRow.cjs';
 import './TableEmpty.cjs';
+import './TableGroupRow.cjs';
+import './TableTreeTrigger.cjs';
 /** One column of a `<skdx-table>`'s derived anatomy. */
 export interface SkdxTableColumn {
     /** Column key for reading row data. */
@@ -24,6 +26,10 @@ export interface SkdxTableColumn {
     resizable?: boolean;
     /** Column filter toggle, overriding the root's `filterable`. @default the root's `filterable` */
     filterable?: boolean;
+    /** Column reorder toggle; root's `reorderable` gates activation. @default false */
+    reorderable?: boolean;
+    /** Column pin toggle; root's `pinnable` gates activation. @default false */
+    pinnable?: boolean;
 }
 /** @internal Marks generated direct children of `<skdx-table>`. */
 export declare const TABLE_ANATOMY_GENERATED = "data-skdx-table-generated";
@@ -36,6 +42,19 @@ export declare function defaultRowId(row: Record<string, unknown>, index: number
 export declare function sortRows(data: readonly Record<string, unknown>[], sortList: readonly TableSortState[]): Record<string, unknown>[];
 /** @internal Builds the optional caption, header row, and empty body; body rows render separately on `data` change. */
 export declare function filterRows(data: readonly Record<string, unknown>[], filterMap: TableFilterState): Record<string, unknown>[];
+/**
+ * The columns in rendered order: `columnOrder` first, then source order, then
+ * partitioned into pinned-start, unpinned and pinned-end.
+ * @internal
+ */
+export declare function visibleColumns(root: SkdxTable): readonly SkdxTableColumn[];
+/**
+ * Moves the generated header cells into the current visible order and re-renders
+ * the rows. Existing cells are moved rather than rebuilt, so a reorder trigger
+ * keeps focus across a keyboard move.
+ * @internal
+ */
+export declare function applyColumnOrder(root: SkdxTable): void;
 export declare function fillTableAnatomy(root: SkdxTable): void;
 /** @internal Re-renders generated body rows from `root.data`, using `renderCell`; shows `empty` in place of rows when `data` is empty. */
 export declare function renderTableRows(root: SkdxTable): void;

package/dist/table/TableAnatomy.d.ts

@@ -12,6 +12,8 @@ import './TableSelectAllCheckbox.js';
 import './TableExpandTrigger.js';
 import './TableExpandedRow.js';
 import './TableEmpty.js';
+import './TableGroupRow.js';
+import './TableTreeTrigger.js';
 /** One column of a `<skdx-table>`'s derived anatomy. */
 export interface SkdxTableColumn {
     /** Column key for reading row data. */
@@ -24,6 +26,10 @@ export interface SkdxTableColumn {
     resizable?: boolean;
     /** Column filter toggle, overriding the root's `filterable`. @default the root's `filterable` */
     filterable?: boolean;
+    /** Column reorder toggle; root's `reorderable` gates activation. @default false */
+    reorderable?: boolean;
+    /** Column pin toggle; root's `pinnable` gates activation. @default false */
+    pinnable?: boolean;
 }
 /** @internal Marks generated direct children of `<skdx-table>`. */
 export declare const TABLE_ANATOMY_GENERATED = "data-skdx-table-generated";
@@ -36,6 +42,19 @@ export declare function defaultRowId(row: Record<string, unknown>, index: number
 export declare function sortRows(data: readonly Record<string, unknown>[], sortList: readonly TableSortState[]): Record<string, unknown>[];
 /** @internal Builds the optional caption, header row, and empty body; body rows render separately on `data` change. */
 export declare function filterRows(data: readonly Record<string, unknown>[], filterMap: TableFilterState): Record<string, unknown>[];
+/**
+ * The columns in rendered order: `columnOrder` first, then source order, then
+ * partitioned into pinned-start, unpinned and pinned-end.
+ * @internal
+ */
+export declare function visibleColumns(root: SkdxTable): readonly SkdxTableColumn[];
+/**
+ * Moves the generated header cells into the current visible order and re-renders
+ * the rows. Existing cells are moved rather than rebuilt, so a reorder trigger
+ * keeps focus across a keyboard move.
+ * @internal
+ */
+export declare function applyColumnOrder(root: SkdxTable): void;
 export declare function fillTableAnatomy(root: SkdxTable): void;
 /** @internal Re-renders generated body rows from `root.data`, using `renderCell`; shows `empty` in place of rows when `data` is empty. */
 export declare function renderTableRows(root: SkdxTable): void;

package/dist/table/TableAnatomy.js

@@ -1,22 +1,34 @@
-import{html as i,render as u}from"lit";import{repeat as h}from"lit/directives/repeat.js";import"./TableCaption.js";import"./TableHeader.js";import"./TableBody.js";import"./TableRow.js";import"./TableCell.js";import"./TableHeaderCell.js";import"./TableRowSelectCheckbox.js";import"./TableSelectAllCheckbox.js";import"./TableExpandTrigger.js";import"./TableExpandedRow.js";import"./TableEmpty.js";var p="data-skdx-table-generated";function g(e,l){let a=e[l.key]??"";return String(a)}function y(e,l){return typeof e.id=="string"?e.id:String(l)}function w(e,l){if(typeof e=="number"&&typeof l=="number")return e-l;let a=e??"",n=l??"";return String(a).localeCompare(String(n))}function S(e,l){return l.length===0?[...e]:[...e].sort((a,n)=>{for(let{columnKey:s,direction:o}of l){let t=w(a[s],n[s]);if(t!==0)return o==="asc"?t:-t}return 0})}function T(e,l){let a=Object.entries(l).filter(([,n])=>n!=="");return a.length===0?[...e]:e.filter(n=>a.every(([s,o])=>String(n[s]??"").toLowerCase().includes(o.toLowerCase())))}function N(e){let l=[];if(e.caption){let t=document.createElement("skdx-table-caption");t.setAttribute(p,""),t.textContent=e.caption,l.push(t)}let a=e.columns??[],n=document.createElement("skdx-table-header");n.setAttribute(p,"");let s=document.createElement("skdx-table-row");if(e.selectable){let t=document.createElement("skdx-table-header-cell"),r=document.createElement("skdx-table-select-all-checkbox");r.setAttribute("scope","page"),t.append(r),s.append(t)}if(e.expandable){let t=document.createElement("skdx-table-header-cell");t.setAttribute("aria-hidden","true"),s.append(t)}for(let t of a){let r=document.createElement("skdx-table-header-cell");r.setAttribute("column-key",t.key),e.sortable&&t.sortable&&r.setAttribute("sortable",""),e.resizable&&t.resizable&&r.setAttribute("resizable",""),(t.filterable??e.filterable)&&(r.setAttribute("filterable",""),r.setAttribute("filter-label",`Filter ${typeof t.header=="string"?t.header:t.key}`)),u(t.header??t.key,r,{host:e}),s.append(r)}n.append(s),l.push(n);let o=document.createElement("skdx-table-body");o.setAttribute(p,""),l.push(o),e.replaceChildren(...l),A(e)}function A(e){let l=e.querySelector(`:scope > skdx-table-body[${p}]`);if(!l)return;let a=e.columns??[],n=S(T(e.data??[],e.filterMap),e.sortList),s=a.length+(e.selectable?1:0)+(e.expandable?1:0),o=e.renderCell??g,t=e.renderExpanded,r=e.rowId??y,m=e.getRowLabel,x=e.querySelector(`:scope > skdx-table-header[${p}] skdx-table-select-all-checkbox`);if(x&&(x.rowIds=n.map((c,d)=>r(c,d))),n.length===0){u(e.empty?i`<skdx-table-empty col-span=${s}>${e.empty}</skdx-table-empty>`:"",l,{host:e});return}u(h(n,(c,d)=>r(c,d),(c,d)=>{let b=r(c,d),k=m?m(c,d):`row ${b}`;return i`
-          <skdx-table-row row-id=${b}>
-            ${e.selectable?i`<skdx-table-cell
-                    ><skdx-table-row-select-checkbox
-                      row-id=${b}
-                      aria-label="Select ${k}"
-                    ></skdx-table-row-select-checkbox
-                  ></skdx-table-cell>`:""}
-            ${e.expandable?i`<skdx-table-cell
-                    ><skdx-table-expand-trigger
-                      row-id=${b}
-                      label="Details for ${k}"
-                    ></skdx-table-expand-trigger
-                  ></skdx-table-cell>`:""}
-            ${a.map(f=>i`<skdx-table-cell>${o(c,f)}</skdx-table-cell>`)}
-          </skdx-table-row>
-          ${e.expandable?i`<skdx-table-expanded-row
-                  row-id=${b}
-                  col-span=${s}
-                  >${t?t(c):""}</skdx-table-expanded-row
-                >`:""}
-        `}),l,{host:e})}export{p as TABLE_ANATOMY_GENERATED,y as defaultRowId,N as fillTableAnatomy,T as filterRows,A as renderTableRows,S as sortRows};
+import{html as d,render as p,nothing as w}from"lit";import{repeat as y}from"lit/directives/repeat.js";import"./TableCaption.js";import"./TableHeader.js";import"./TableBody.js";import"./TableRow.js";import"./TableCell.js";import"./TableHeaderCell.js";import"./TableRowSelectCheckbox.js";import"./TableSelectAllCheckbox.js";import"./TableExpandTrigger.js";import"./TableExpandedRow.js";import"./TableEmpty.js";import"./TableGroupRow.js";import"./TableTreeTrigger.js";var b="data-skdx-table-generated";function h(e,t){let r=e[t.key]??"";return String(r)}function S(e,t){return typeof e.id=="string"?e.id:String(t)}function R(e,t){if(typeof e=="number"&&typeof t=="number")return e-t;let r=e??"",o=t??"";return String(r).localeCompare(String(o))}function m(e,t){return t.length===0?[...e]:[...e].sort((r,o)=>{for(let{columnKey:s,direction:l}of t){let n=R(r[s],o[s]);if(n!==0)return l==="asc"?n:-n}return 0})}function C(e,t){let r=Object.entries(t).filter(([,o])=>o!=="");return r.length===0?[...e]:e.filter(o=>r.every(([s,l])=>String(o[s]??"").toLowerCase().includes(l.toLowerCase())))}function k(e){let t=e.columns??[],r=e.resolvedColumnOrder,o=e.resolvedColumnPins;if(r.length===0&&Object.keys(o).length===0)return t;let s=new Map(t.map(n=>[n.key,n])),l=[...r.map(n=>s.get(n)).filter(n=>n!==void 0),...t.filter(n=>!r.includes(n.key))];return[...l.filter(n=>o[n.key]==="start"),...l.filter(n=>o[n.key]===void 0),...l.filter(n=>o[n.key]==="end")]}function j(e){let t=e.querySelector(`:scope > skdx-table-header[${b}] > skdx-table-row`);if(t){let r=new Map([...t.querySelectorAll(":scope > skdx-table-header-cell[column-key]")].map(o=>[o.getAttribute("column-key"),o]));for(let o of k(e)){let s=r.get(o.key);s&&t.append(s)}}x(e)}function T(e){return typeof e=="string"?e:typeof e=="number"||typeof e=="boolean"||typeof e=="bigint"?String(e):e instanceof Date?e.toISOString():""}function $(e,t){let r=document.createElement("skdx-table-header-cell"),o=typeof t.header=="string"?t.header:t.key;return r.setAttribute("column-key",t.key),e.sortable&&t.sortable&&r.setAttribute("sortable",""),e.resizable&&t.resizable&&r.setAttribute("resizable",""),(t.reorderable??e.reorderable)&&(r.setAttribute("reorderable",""),r.setAttribute("reorder-label",`Move ${o}`)),(t.pinnable??e.pinnable)&&(r.setAttribute("pinnable",""),r.setAttribute("pin-label",`Pin ${o}`)),(t.filterable??e.filterable)&&(r.setAttribute("filterable",""),r.setAttribute("filter-label",`Filter ${o}`)),p(t.header??t.key,r,{host:e}),r}function P(e){let t=[];if(e.caption){let n=document.createElement("skdx-table-caption");n.setAttribute(b,""),n.textContent=e.caption,t.push(n)}let r=k(e),o=document.createElement("skdx-table-header");o.setAttribute(b,"");let s=document.createElement("skdx-table-row");if(e.selectable){let n=document.createElement("skdx-table-header-cell"),a=document.createElement("skdx-table-select-all-checkbox");a.setAttribute("scope","page"),n.append(a),s.append(n)}if(e.expandable){let n=document.createElement("skdx-table-header-cell");n.setAttribute("aria-hidden","true"),s.append(n)}for(let n of r)s.append($(e,n));o.append(s),t.push(o);let l=document.createElement("skdx-table-body");l.setAttribute(b,""),t.push(l),e.replaceChildren(...t),x(e)}function g(e,t,r,o,s){let{root:l}=e,n=e.rowIdOf(t,r),a=l.getRowLabel?l.getRowLabel(t,r):`row ${n}`;return e.ids.push(n),d`
+    <skdx-table-row
+      row-id=${n}
+      level=${o??w}
+    >
+      ${l.selectable?d`<skdx-table-cell
+              ><skdx-table-row-select-checkbox
+                row-id=${n}
+                aria-label="Select ${a}"
+              ></skdx-table-row-select-checkbox
+            ></skdx-table-cell>`:""}
+      ${l.expandable?d`<skdx-table-cell
+              ><skdx-table-expand-trigger
+                row-id=${n}
+                label="Details for ${a}"
+              ></skdx-table-expand-trigger
+            ></skdx-table-cell>`:""}
+      ${e.columns.map((c,i)=>d`<skdx-table-cell column-key=${c.key}
+            >${i===0&&s?d`<skdx-table-tree-trigger
+                    row-id=${n}
+                    label="Children of ${a}"
+                  ></skdx-table-tree-trigger>`:""}${e.renderCell(t,c)}</skdx-table-cell
+          >`)}
+    </skdx-table-row>
+    ${l.expandable?d`<skdx-table-expanded-row
+            row-id=${n}
+            col-span=${e.colSpan}
+            >${l.renderExpanded?l.renderExpanded(t):""}</skdx-table-expanded-row
+          >`:""}
+  `}function f(e,t,r){let o=e.root.getSubRows,s=[];return t.forEach((l,n)=>{let a=o?.(l)??[];s.push(g(e,l,n,o?r:void 0,a.length>0)),a.length!==0&&e.root.isNodeExpanded(e.rowIdOf(l,n))&&s.push(...f(e,m(a,e.root.sortList),r+1))}),s}function A(e,t){let r=e.root.groupBy;if(r===void 0)return f(e,t,0);let o=new Map;for(let l of t){let n=T(l[r]),a=o.get(n);a?a.push(l):o.set(n,[l])}let s=[];for(let[l,n]of o)s.push(d`<skdx-table-group-row
+        group-key=${l}
+        col-span=${e.colSpan}
+        >${e.root.renderGroupHeader?e.root.renderGroupHeader(l,n):`${l} (${n.length})`}</skdx-table-group-row
+      >`),e.root.isGroupCollapsed(l)||s.push(...f(e,n,0));return s}function x(e){let t=e.querySelector(`:scope > skdx-table-body[${b}]`);if(!t)return;let r=k(e),o=m(C(e.data??[],e.filterMap),e.sortList),s=e.rowId??S,l={root:e,columns:r,colSpan:r.length+(e.selectable?1:0)+(e.expandable?1:0),renderCell:e.renderCell??h,rowIdOf:s,ids:[]},n=e.groupBy!==void 0||e.getSubRows!==void 0,a=n?A(l,o):y(o,(i,u)=>s(i,u),(i,u)=>g(l,i,u,void 0,!1)),c=e.querySelector(`:scope > skdx-table-header[${b}] skdx-table-select-all-checkbox`);if(c&&(c.rowIds=n?l.ids:o.map((i,u)=>s(i,u))),o.length===0){p(e.empty?d`<skdx-table-empty col-span=${l.colSpan}>${e.empty}</skdx-table-empty>`:"",t,{host:e});return}p(a,t,{host:e})}export{b as TABLE_ANATOMY_GENERATED,j as applyColumnOrder,S as defaultRowId,P as fillTableAnatomy,C as filterRows,x as renderTableRows,m as sortRows,k as visibleColumns};

package/dist/table/TableCell.cjs

@@ -1,4 +1,10 @@
-"use strict";var i=Object.defineProperty;var p=Object.getOwnPropertyDescriptor;var u=Object.getOwnPropertyNames;var y=Object.prototype.hasOwnProperty;var b=(s,e)=>{for(var l in e)i(s,l,{get:e[l],enumerable:!0})},h=(s,e,l,a)=>{if(e&&typeof e=="object"||typeof e=="function")for(let t of u(e))!y.call(s,t)&&t!==l&&i(s,t,{get:()=>e[t],enumerable:!(a=p(e,t))||a.enumerable});return s};var v=s=>h(i({},"__esModule",{value:!0}),s),n=(s,e,l,a)=>{for(var t=a>1?void 0:a?p(e,l):e,m=s.length-1,c;m>=0;m--)(c=s[m])&&(t=(a?c(e,l,t):c(t))||t);return a&&t&&i(e,l,t),t};var f={};b(f,{SkdxTableCell:()=>o});module.exports=v(f);var r=require("lit"),d=require("../internal/define.cjs");var o=class extends r.LitElement{render(){return r.html`<td part="cell"><slot></slot></td>`}};o.styles=r.css`
+"use strict";var l=Object.defineProperty;var m=Object.getOwnPropertyDescriptor;var y=Object.getOwnPropertyNames;var v=Object.prototype.hasOwnProperty;var b=(i,e)=>{for(var t in e)l(i,t,{get:e[t],enumerable:!0})},k=(i,e,t,s)=>{if(e&&typeof e=="object"||typeof e=="function")for(let o of y(e))!v.call(i,o)&&o!==t&&l(i,o,{get:()=>e[o],enumerable:!(s=m(e,o))||s.enumerable});return i};var g=i=>k(l({},"__esModule",{value:!0}),i),c=(i,e,t,s)=>{for(var o=s>1?void 0:s?m(e,t):e,a=i.length-1,p;a>=0;a--)(p=i[a])&&(o=(s?p(e,t,o):p(o))||o);return s&&o&&l(e,t,o),o};var E={};b(E,{SkdxTableCell:()=>r});module.exports=g(E);var n=require("lit"),u=require("lit/decorators.js"),h=require("../internal/define.cjs"),f=require("../internal/part.cjs"),d=require("./column-context.cjs");var r=class extends n.LitElement{constructor(){super(...arguments);this.root=null;this.onRootUpdate=()=>this.requestUpdate()}connectedCallback(){super.connectedCallback(),this.root=(0,d.findTableRoot)(this),this.root?.addEventListener(d.TABLE_INTERNAL_UPDATE,this.onRootUpdate)}disconnectedCallback(){this.root?.removeEventListener(d.TABLE_INTERNAL_UPDATE,this.onRootUpdate),super.disconnectedCallback()}get pinnedSide(){let t=this.columnKey;return t===void 0?void 0:this.root?.resolvedColumnPins[t]}updated(){let t=this.pinnedSide;(0,f.reflectHostState)(this,{"data-pinned":t??null}),t===void 0?this.style.removeProperty("--skdx-table-pin-offset"):this.style.setProperty("--skdx-table-pin-offset",`${this.root?.pinOffsets[this.columnKey]??0}px`)}render(){return n.html`<td
+      part="cell"
+      data-column-key=${this.columnKey??n.nothing}
+      data-pinned=${this.pinnedSide??n.nothing}
+    >
+      <slot></slot>
+    </td>`}};r.styles=n.css`
     /* Host takes the display role, native element gives up its box — see Table.ts. */
     :host {
       display: table-cell;
@@ -7,4 +13,4 @@
     :host > td {
       display: contents;
     }
-  `,o=n([(0,d.customElement)("skdx-table-cell","table","cell")],o);0&&(module.exports={SkdxTableCell});
+  `,c([(0,u.property)({type:String,attribute:"column-key",converter:d.optionalStringAttribute})],r.prototype,"columnKey",2),r=c([(0,h.customElement)("skdx-table-cell","table","cell")],r);0&&(module.exports={SkdxTableCell});

package/dist/table/TableCell.d.cts

@@ -1,11 +1,22 @@
 import { LitElement, type TemplateResult } from 'lit';
 /**
- * A single body cell (`<td>`) rendered inside a table row.
+ * A single body cell (`<td>`) rendered inside a table row. Given a `column-key` it follows that column's pin, turning sticky at the table's edge.
  *
  * @csspart cell - The native `<td>` element inside the shadow root.
  */
 export declare class SkdxTableCell extends LitElement {
     static styles: import("lit").CSSResult;
+    /**
+     * The column this cell belongs to, so it can follow that column's pin.
+     * @default undefined
+     */
+    columnKey?: string;
+    private root;
+    private readonly onRootUpdate;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    private get pinnedSide();
+    protected updated(): void;
     render(): TemplateResult;
 }
 declare global {

package/dist/table/TableCell.d.ts

@@ -1,11 +1,22 @@
 import { LitElement, type TemplateResult } from 'lit';
 /**
- * A single body cell (`<td>`) rendered inside a table row.
+ * A single body cell (`<td>`) rendered inside a table row. Given a `column-key` it follows that column's pin, turning sticky at the table's edge.
  *
  * @csspart cell - The native `<td>` element inside the shadow root.
  */
 export declare class SkdxTableCell extends LitElement {
     static styles: import("lit").CSSResult;
+    /**
+     * The column this cell belongs to, so it can follow that column's pin.
+     * @default undefined
+     */
+    columnKey?: string;
+    private root;
+    private readonly onRootUpdate;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    private get pinnedSide();
+    protected updated(): void;
     render(): TemplateResult;
 }
 declare global {

package/dist/table/TableCell.js

@@ -1,4 +1,10 @@
-var c=Object.defineProperty;var p=Object.getOwnPropertyDescriptor;var m=(a,s,o,l)=>{for(var e=l>1?void 0:l?p(s,o):s,r=a.length-1,i;r>=0;r--)(i=a[r])&&(e=(l?i(s,o,e):i(e))||e);return l&&e&&c(s,o,e),e};import{css as n,html as d,LitElement as u}from"lit";import{customElement as y}from"../internal/define.js";var t=class extends u{render(){return d`<td part="cell"><slot></slot></td>`}};t.styles=n`
+var c=Object.defineProperty;var m=Object.getOwnPropertyDescriptor;var l=(s,i,e,n)=>{for(var t=n>1?void 0:n?m(i,e):i,r=s.length-1,d;r>=0;r--)(d=s[r])&&(t=(n?d(i,e,t):d(t))||t);return n&&t&&c(i,e,t),t};import{css as u,html as h,LitElement as f,nothing as a}from"lit";import{property as y}from"lit/decorators.js";import{customElement as v}from"../internal/define.js";import{reflectHostState as b}from"../internal/part.js";import{findTableRoot as k,optionalStringAttribute as g,TABLE_INTERNAL_UPDATE as p}from"./column-context.js";var o=class extends f{constructor(){super(...arguments);this.root=null;this.onRootUpdate=()=>this.requestUpdate()}connectedCallback(){super.connectedCallback(),this.root=k(this),this.root?.addEventListener(p,this.onRootUpdate)}disconnectedCallback(){this.root?.removeEventListener(p,this.onRootUpdate),super.disconnectedCallback()}get pinnedSide(){let e=this.columnKey;return e===void 0?void 0:this.root?.resolvedColumnPins[e]}updated(){let e=this.pinnedSide;b(this,{"data-pinned":e??null}),e===void 0?this.style.removeProperty("--skdx-table-pin-offset"):this.style.setProperty("--skdx-table-pin-offset",`${this.root?.pinOffsets[this.columnKey]??0}px`)}render(){return h`<td
+      part="cell"
+      data-column-key=${this.columnKey??a}
+      data-pinned=${this.pinnedSide??a}
+    >
+      <slot></slot>
+    </td>`}};o.styles=u`
     /* Host takes the display role, native element gives up its box — see Table.ts. */
     :host {
       display: table-cell;
@@ -7,4 +13,4 @@ var c=Object.defineProperty;var p=Object.getOwnPropertyDescriptor;var m=(a,s,o,l
     :host > td {
       display: contents;
     }
-  `,t=m([y("skdx-table-cell","table","cell")],t);export{t as SkdxTableCell};
+  `,l([y({type:String,attribute:"column-key",converter:g})],o.prototype,"columnKey",2),o=l([v("skdx-table-cell","table","cell")],o);export{o as SkdxTableCell};

package/dist/table/TableColumnPinTrigger.cjs

@@ -0,0 +1,17 @@
+"use strict";var a=Object.defineProperty;var h=Object.getOwnPropertyDescriptor;var f=Object.getOwnPropertyNames;var b=Object.prototype.hasOwnProperty;var g=(n,e)=>{for(var t in e)a(n,t,{get:e[t],enumerable:!0})},k=(n,e,t,r)=>{if(e&&typeof e=="object"||typeof e=="function")for(let i of f(e))!b.call(n,i)&&i!==t&&a(n,i,{get:()=>e[i],enumerable:!(r=h(e,i))||r.enumerable});return n};var E=n=>k(a({},"__esModule",{value:!0}),n),d=(n,e,t,r)=>{for(var i=r>1?void 0:r?h(e,t):e,c=n.length-1,u;c>=0;c--)(u=n[c])&&(i=(r?u(e,t,i):u(i))||i);return r&&i&&a(e,t,i),i};var C={};g(C,{SkdxTableColumnPinTrigger:()=>s});module.exports=E(C);var l=require("lit"),p=require("lit/decorators.js"),m=require("../internal/define.cjs"),y=require("../internal/part.cjs"),v=require("../internal/styles.cjs"),o=require("./column-context.cjs");var s=class extends l.LitElement{constructor(){super(...arguments);this.side="start";this.root=null;this.onRootUpdate=()=>this.requestUpdate();this.handleClick=t=>{t.stopPropagation();let r=this.pinColumnKey;r!==void 0&&this.root?.setColumnPin(r,this.pinnedSide===this.side?null:this.side)}}connectedCallback(){super.connectedCallback(),this.root=(0,o.findTableRoot)(this),this.root?.addEventListener(o.TABLE_INTERNAL_UPDATE,this.onRootUpdate)}disconnectedCallback(){this.root?.removeEventListener(o.TABLE_INTERNAL_UPDATE,this.onRootUpdate),super.disconnectedCallback()}get cell(){return(0,o.findHeaderCell)(this)}get pinColumnKey(){return this.columnKey??this.cell?.columnKey}get pinnedSide(){let t=this.pinColumnKey;return t===void 0?void 0:this.root?.resolvedColumnPins[t]}updated(){(0,y.reflectHostState)(this,{"data-pinned":this.pinnedSide??null})}render(){if(this.pinColumnKey===void 0)return l.nothing;let t=this.pinnedSide;return l.html`
+      <button
+        type="button"
+        part="column-pin-trigger"
+        data-skdx-table-pin-trigger
+        aria-pressed=${t===this.side}
+        aria-label=${this.label??this.cell?.pinLabel??"Pin column"}
+        data-pinned=${t??l.nothing}
+        @click=${this.handleClick}
+      >
+        <slot>${(0,o.pinGlyph)(this.side)}</slot>
+      </button>
+    `}};s.styles=[v.resetNativeControl,l.css`
+      :host {
+        display: inline-block;
+      }
+    `],d([(0,p.property)({type:String,attribute:"column-key",converter:o.optionalStringAttribute})],s.prototype,"columnKey",2),d([(0,p.property)({type:String})],s.prototype,"side",2),d([(0,p.property)({type:String})],s.prototype,"label",2),s=d([(0,m.customElement)("skdx-table-column-pin-trigger","table","column-pin-trigger")],s);0&&(module.exports={SkdxTableColumnPinTrigger});

package/dist/table/TableColumnPinTrigger.d.cts

@@ -0,0 +1,49 @@
+import { LitElement, nothing, type TemplateResult } from 'lit';
+/**
+ * Toggle that pins its column to one edge of the table, so the column stays put while the rest scrolls sideways. Pressed while the column is pinned to this trigger's `side`; activating it then unpins the column.
+ *
+ * @csspart column-pin-trigger - The `<button aria-pressed>` inside the shadow root.
+ *
+ * @example
+ * ```html
+ * <skdx-table-header-cell column-key="name">
+ *   Name
+ *   <skdx-table-column-pin-trigger side="start" label="Pin Name column"></skdx-table-column-pin-trigger>
+ * </skdx-table-header-cell>
+ * ```
+ */
+export declare class SkdxTableColumnPinTrigger extends LitElement {
+    static styles: import("lit").CSSResult[];
+    /**
+     * Column this trigger pins. Inherited from `SkdxTableHeaderCell`'s `columnKey` or renders nothing.
+     * @default undefined
+     */
+    columnKey?: string;
+    /**
+     * Which edge of the table the column pins to.
+     * @default 'start'
+     */
+    side: 'start' | 'end';
+    /**
+     * Accessible name for the toggle, whose content is a decorative glyph.
+     * @default undefined — the cell's `pinLabel`, then `'Pin column'`.
+     */
+    label?: string;
+    private root;
+    private readonly onRootUpdate;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    /** Column-scoped default, resolved per read so a re-slotted trigger picks up its new cell. */
+    private get cell();
+    /** @internal The column this trigger pins, its own or the enclosing cell's. */
+    get pinColumnKey(): string | undefined;
+    private get pinnedSide();
+    private readonly handleClick;
+    protected updated(): void;
+    render(): TemplateResult | typeof nothing;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'skdx-table-column-pin-trigger': SkdxTableColumnPinTrigger;
+    }
+}

package/dist/table/TableColumnPinTrigger.d.ts

@@ -0,0 +1,49 @@
+import { LitElement, nothing, type TemplateResult } from 'lit';
+/**
+ * Toggle that pins its column to one edge of the table, so the column stays put while the rest scrolls sideways. Pressed while the column is pinned to this trigger's `side`; activating it then unpins the column.
+ *
+ * @csspart column-pin-trigger - The `<button aria-pressed>` inside the shadow root.
+ *
+ * @example
+ * ```html
+ * <skdx-table-header-cell column-key="name">
+ *   Name
+ *   <skdx-table-column-pin-trigger side="start" label="Pin Name column"></skdx-table-column-pin-trigger>
+ * </skdx-table-header-cell>
+ * ```
+ */
+export declare class SkdxTableColumnPinTrigger extends LitElement {
+    static styles: import("lit").CSSResult[];
+    /**
+     * Column this trigger pins. Inherited from `SkdxTableHeaderCell`'s `columnKey` or renders nothing.
+     * @default undefined
+     */
+    columnKey?: string;
+    /**
+     * Which edge of the table the column pins to.
+     * @default 'start'
+     */
+    side: 'start' | 'end';
+    /**
+     * Accessible name for the toggle, whose content is a decorative glyph.
+     * @default undefined — the cell's `pinLabel`, then `'Pin column'`.
+     */
+    label?: string;
+    private root;
+    private readonly onRootUpdate;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    /** Column-scoped default, resolved per read so a re-slotted trigger picks up its new cell. */
+    private get cell();
+    /** @internal The column this trigger pins, its own or the enclosing cell's. */
+    get pinColumnKey(): string | undefined;
+    private get pinnedSide();
+    private readonly handleClick;
+    protected updated(): void;
+    render(): TemplateResult | typeof nothing;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'skdx-table-column-pin-trigger': SkdxTableColumnPinTrigger;
+    }
+}

package/dist/table/TableColumnPinTrigger.js

@@ -0,0 +1,17 @@
+var u=Object.defineProperty;var h=Object.getOwnPropertyDescriptor;var r=(s,o,t,i)=>{for(var n=i>1?void 0:i?h(o,t):o,l=s.length-1,d;l>=0;l--)(d=s[l])&&(n=(i?d(o,t,n):d(n))||n);return i&&n&&u(o,t,n),n};import{css as m,html as y,LitElement as v,nothing as p}from"lit";import{property as a}from"lit/decorators.js";import{customElement as f}from"../internal/define.js";import{reflectHostState as b}from"../internal/part.js";import{resetNativeControl as g}from"../internal/styles.js";import{findHeaderCell as k,findTableRoot as E,optionalStringAttribute as C,pinGlyph as K,TABLE_INTERNAL_UPDATE as c}from"./column-context.js";var e=class extends v{constructor(){super(...arguments);this.side="start";this.root=null;this.onRootUpdate=()=>this.requestUpdate();this.handleClick=t=>{t.stopPropagation();let i=this.pinColumnKey;i!==void 0&&this.root?.setColumnPin(i,this.pinnedSide===this.side?null:this.side)}}connectedCallback(){super.connectedCallback(),this.root=E(this),this.root?.addEventListener(c,this.onRootUpdate)}disconnectedCallback(){this.root?.removeEventListener(c,this.onRootUpdate),super.disconnectedCallback()}get cell(){return k(this)}get pinColumnKey(){return this.columnKey??this.cell?.columnKey}get pinnedSide(){let t=this.pinColumnKey;return t===void 0?void 0:this.root?.resolvedColumnPins[t]}updated(){b(this,{"data-pinned":this.pinnedSide??null})}render(){if(this.pinColumnKey===void 0)return p;let t=this.pinnedSide;return y`
+      <button
+        type="button"
+        part="column-pin-trigger"
+        data-skdx-table-pin-trigger
+        aria-pressed=${t===this.side}
+        aria-label=${this.label??this.cell?.pinLabel??"Pin column"}
+        data-pinned=${t??p}
+        @click=${this.handleClick}
+      >
+        <slot>${K(this.side)}</slot>
+      </button>
+    `}};e.styles=[g,m`
+      :host {
+        display: inline-block;
+      }
+    `],r([a({type:String,attribute:"column-key",converter:C})],e.prototype,"columnKey",2),r([a({type:String})],e.prototype,"side",2),r([a({type:String})],e.prototype,"label",2),e=r([f("skdx-table-column-pin-trigger","table","column-pin-trigger")],e);export{e as SkdxTableColumnPinTrigger};

package/dist/table/TableColumnReorderTrigger.cjs

@@ -0,0 +1,21 @@
+"use strict";var a=Object.defineProperty;var u=Object.getOwnPropertyDescriptor;var y=Object.getOwnPropertyNames;var f=Object.prototype.hasOwnProperty;var E=(r,e)=>{for(var i in e)a(r,i,{get:e[i],enumerable:!0})},k=(r,e,i,d)=>{if(e&&typeof e=="object"||typeof e=="function")for(let t of y(e))!f.call(r,t)&&t!==i&&a(r,t,{get:()=>e[t],enumerable:!(d=u(e,t))||d.enumerable});return r};var C=r=>k(a({},"__esModule",{value:!0}),r),s=(r,e,i,d)=>{for(var t=d>1?void 0:d?u(e,i):e,p=r.length-1,c;p>=0;p--)(c=r[p])&&(t=(d?c(e,i,t):c(t))||t);return d&&t&&a(e,i,t),t};var R={};E(R,{SkdxTableColumnReorderTrigger:()=>l});module.exports=C(R);var n=require("lit"),m=require("lit/decorators.js"),h=require("../internal/define.cjs"),g=require("../internal/part.cjs"),b=require("../internal/styles.cjs"),o=require("./column-context.cjs"),v=require("./column-reorder.cjs");var l=class extends n.LitElement{constructor(){super(...arguments);this.reorder=new v.ColumnReorderController(this);this.root=null;this.onRootUpdate=()=>this.requestUpdate()}connectedCallback(){super.connectedCallback(),this.root=(0,o.findTableRoot)(this),this.root?.addEventListener(o.TABLE_INTERNAL_UPDATE,this.onRootUpdate)}disconnectedCallback(){this.root?.removeEventListener(o.TABLE_INTERNAL_UPDATE,this.onRootUpdate),super.disconnectedCallback()}get cell(){return(0,o.findHeaderCell)(this)}get reorderColumnKey(){return this.columnKey??this.cell?.columnKey}get reorderTable(){return this.root}reorderCell(){return this.cell}updated(){(0,g.reflectHostState)(this,{"data-dragging":this.reorder.dragging?"":null})}render(){return this.reorderColumnKey===void 0?n.nothing:n.html`
+      <button
+        type="button"
+        part="column-reorder-trigger"
+        data-skdx-table-reorder-trigger
+        aria-label=${this.label??this.cell?.reorderLabel??"Move column"}
+        data-dragging=${this.reorder.dragging?"":n.nothing}
+        @click=${this.reorder.handleClick}
+        @keydown=${this.reorder.handleKeyDown}
+        @pointerdown=${this.reorder.handlePointerDown}
+        @pointermove=${this.reorder.handlePointerMove}
+        @pointerup=${this.reorder.handlePointerUp}
+        @pointercancel=${this.reorder.handlePointerUp}
+      >
+        <slot>${o.REORDER_GRIP}</slot>
+      </button>
+    `}};l.styles=[b.resetNativeControl,n.css`
+      :host {
+        display: inline-block;
+      }
+    `],s([(0,m.property)({type:String,attribute:"column-key",converter:o.optionalStringAttribute})],l.prototype,"columnKey",2),s([(0,m.property)({type:String})],l.prototype,"label",2),l=s([(0,h.customElement)("skdx-table-column-reorder-trigger","table","column-reorder-trigger")],l);0&&(module.exports={SkdxTableColumnReorderTrigger});