@ship-ui/core 0.22.12 → 0.22.15

package/fesm2022/ship-ui-core-ship-table.mjs

@@ -1,10 +1,11 @@
-import * as i0 from '@angular/core';
-import { inject, ElementRef, Renderer2, input, HostListener, Directive, computed, output, model, contentChild, viewChild, signal, DestroyRef, effect, ChangeDetectionStrategy, ViewEncapsulation, Component } from '@angular/core';
 import { NgTemplateOutlet } from '@angular/common';
-import { ShipProgressBar } from '@ship-ui/core/ship-progress-bar';
+import * as i0 from '@angular/core';
+import { inject, ElementRef, Renderer2, input, signal, HostListener, Directive, computed, output, model, contentChild, viewChild, effect, ChangeDetectionStrategy, ViewEncapsulation, Component } from '@angular/core';
 import { shipComponentClasses, observeChildren } from '@ship-ui/core';
-import { ShipIcon } from '@ship-ui/core/ship-icon';
+import { ShipA11yKeybindingsService } from '@ship-ui/core/ship-a11y-keybindings';
 import { ShipChip } from '@ship-ui/core/ship-chip';
+import { ShipIcon } from '@ship-ui/core/ship-icon';
+import { ShipProgressBar } from '@ship-ui/core/ship-progress-bar';
 
 class ShipResize {
     constructor() {
@@ -17,6 +18,8 @@ class ShipResize {
         ...(ngDevMode ? [{ debugName: "minWidth" }] : /* istanbul ignore next */ []));
         this.maxWidth = input(null, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "maxWidth" }] : /* istanbul ignore next */ []));
+        this.resizingClass = signal(false, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "resizingClass" }] : /* istanbul ignore next */ []));
         this.#resizing = false;
         this.#animationFrameRequest = null; // Store request ID
     }
@@ -47,11 +50,15 @@ class ShipResize {
     onMouseUp(event) {
         if (this.#resizing) {
             this.#resizing = false;
-            this.#table.resizing.set(false);
+            this.resizingClass.set(false);
             if (this.#animationFrameRequest !== null) {
                 cancelAnimationFrame(this.#animationFrameRequest);
                 this.#animationFrameRequest = null;
             }
+            // Delay resetting the table's resizing state to block sorting clicks immediately after resizing
+            setTimeout(() => {
+                this.#table.resizing.set(false);
+            }, 50);
         }
     }
     onClick(event) {
@@ -65,6 +72,7 @@ class ShipResize {
             return;
         this.#table.resizing.set(true);
         this.#resizing = true;
+        this.resizingClass.set(true);
         this.#startX = event.pageX;
         this.#startWidth = this.#el.nativeElement.offsetWidth;
     }
@@ -89,13 +97,16 @@ class ShipResize {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.0", ngImport: i0, type: ShipResize, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.0.0", type: ShipResize, isStandalone: true, selector: "[shResize]", inputs: { resizable: { classPropertyName: "resizable", publicName: "resizable", isSignal: true, isRequired: false, transformFunction: null }, minWidth: { classPropertyName: "minWidth", publicName: "minWidth", isSignal: true, isRequired: false, transformFunction: null }, maxWidth: { classPropertyName: "maxWidth", publicName: "maxWidth", isSignal: true, isRequired: false, transformFunction: null } }, host: { listeners: { "document:mousemove": "onMouseMove($event)", "document:mouseup": "onMouseUp($event)", "document:click": "onClick($event)" } }, ngImport: i0 }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.0.0", type: ShipResize, isStandalone: true, selector: "[shResize]", inputs: { resizable: { classPropertyName: "resizable", publicName: "resizable", isSignal: true, isRequired: false, transformFunction: null }, minWidth: { classPropertyName: "minWidth", publicName: "minWidth", isSignal: true, isRequired: false, transformFunction: null }, maxWidth: { classPropertyName: "maxWidth", publicName: "maxWidth", isSignal: true, isRequired: false, transformFunction: null } }, host: { listeners: { "document:mousemove": "onMouseMove($event)", "document:mouseup": "onMouseUp($event)", "document:click": "onClick($event)" }, properties: { "class.resizing": "resizingClass()" } }, ngImport: i0 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.0", ngImport: i0, type: ShipResize, decorators: [{
             type: Directive,
             args: [{
                     selector: '[shResize]',
                     standalone: true,
+                    host: {
+                        '[class.resizing]': 'resizingClass()',
+                    },
                 }]
         }], propDecorators: { resizable: [{ type: i0.Input, args: [{ isSignal: true, alias: "resizable", required: false }] }], minWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "minWidth", required: false }] }], maxWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxWidth", required: false }] }], onMouseMove: [{
                 type: HostListener,
@@ -110,6 +121,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.0", ngImpor
 class ShipSort {
     constructor() {
         this.#table = inject(ShipTable);
+        this.#keybindings = inject(ShipA11yKeybindingsService);
         this.shSort = input(/* @ts-ignore */
         ...(ngDevMode ? [undefined, { debugName: "shSort" }] : /* istanbul ignore next */ []));
         this.sortAsc = computed(() => {
@@ -138,17 +150,26 @@ class ShipSort {
         ...(ngDevMode ? [{ debugName: "ariaSort" }] : /* istanbul ignore next */ []));
     }
     #table;
+    #keybindings;
+    onKeyDown(event) {
+        if (this.shSort() && this.#keybindings.matches(event, 'table.sort')) {
+            this.toggleSort(event);
+        }
+    }
     toggleSort(event) {
         if (event) {
             event.preventDefault();
         }
+        if (this.#table.resizing()) {
+            return;
+        }
         const sortCol = this.shSort();
         if (!sortCol)
             return;
         this.#table.toggleSort(sortCol);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.0", ngImport: i0, type: ShipSort, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.0.0", type: ShipSort, isStandalone: true, selector: "[shSort]", inputs: { shSort: { classPropertyName: "shSort", publicName: "shSort", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "role": "columnheader" }, listeners: { "click": "shSort() ? toggleSort() : null", "keydown.enter": "shSort() ? toggleSort() : null", "keydown.space": "shSort() ? toggleSort($event) : null" }, properties: { "class.sortable": "!!shSort()", "attr.tabindex": "shSort() ? \"0\" : null", "attr.aria-sort": "shSort() ? ariaSort() : null", "class.sort-asc": "sortAsc()", "class.sort-desc": "sortDesc()" } }, ngImport: i0 }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.0.0", type: ShipSort, isStandalone: true, selector: "[shSort]", inputs: { shSort: { classPropertyName: "shSort", publicName: "shSort", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "role": "columnheader" }, listeners: { "click": "shSort() ? toggleSort() : null", "keydown": "onKeyDown($event)" }, properties: { "class.sortable": "!!shSort()", "attr.tabindex": "shSort() ? \"0\" : null", "attr.aria-sort": "shSort() ? ariaSort() : null", "class.sort-asc": "sortAsc()", "class.sort-desc": "sortDesc()" } }, ngImport: i0 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.0", ngImport: i0, type: ShipSort, decorators: [{
             type: Directive,
@@ -156,18 +177,19 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.0", ngImpor
                     selector: '[shSort]',
                     standalone: true,
                     host: {
-                        'role': 'columnheader',
+                        role: 'columnheader',
                         '[class.sortable]': '!!shSort()',
                         '[attr.tabindex]': 'shSort() ? "0" : null',
                         '(click)': 'shSort() ? toggleSort() : null',
-                        '(keydown.enter)': 'shSort() ? toggleSort() : null',
-                        '(keydown.space)': 'shSort() ? toggleSort($event) : null',
                         '[attr.aria-sort]': 'shSort() ? ariaSort() : null',
                         '[class.sort-asc]': 'sortAsc()',
                         '[class.sort-desc]': 'sortDesc()',
                     },
                 }]
-        }], propDecorators: { shSort: [{ type: i0.Input, args: [{ isSignal: true, alias: "shSort", required: false }] }] } });
+        }], propDecorators: { shSort: [{ type: i0.Input, args: [{ isSignal: true, alias: "shSort", required: false }] }], onKeyDown: [{
+                type: HostListener,
+                args: ['keydown', ['$event']]
+            }] } });
 class ShipStickyColumns {
     constructor() {
         this.#elementRef = inject(ElementRef);
@@ -236,26 +258,18 @@ class ShipTable {
         this.columns = observeChildren(this.thead, ['tr:first-child th']);
         this.stickyHeaderHeight = signal(0, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "stickyHeaderHeight" }] : /* istanbul ignore next */ []));
-        this.#destroyRef = inject(DestroyRef);
-        this.#resizeObserver = null;
-        this.theadEffect = effect(() => {
+        this.theadEffect = effect((onCleanup) => {
             const head = this.thead()?.nativeElement;
-            if (this.#resizeObserver) {
-                this.#resizeObserver.disconnect();
-                this.#resizeObserver = null;
-            }
             if (head && typeof ResizeObserver !== 'undefined') {
-                this.#resizeObserver = new ResizeObserver((entries) => {
+                const observer = new ResizeObserver((entries) => {
                     const height = head.clientHeight;
                     this.stickyHeaderHeight.set(height);
                 });
-                this.#resizeObserver.observe(head);
+                observer.observe(head);
+                onCleanup(() => observer.disconnect());
             }
         }, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "theadEffect" }] : /* istanbul ignore next */ []));
-        this.#cleanup = this.#destroyRef.onDestroy(() => {
-            this.#resizeObserver?.disconnect();
-        });
         this.bodyEffect = effect(() => {
             const body = this.tbody()?.nativeElement;
             const head = this.thead()?.nativeElement;
@@ -320,24 +334,33 @@ class ShipTable {
             }
             const column = sortByColumn.startsWith('-') ? sortByColumn.slice(1) : sortByColumn;
             const isDescending = sortByColumn.startsWith('-');
-            const sortedData = this.data().sort((a, b) => {
-                const colConfig = this.content()?.columns()?.find((c) => c.id === column);
+            const currentData = this.data();
+            const sortedData = [...currentData].sort((a, b) => {
+                const colConfig = this.content()
+                    ?.columns()
+                    ?.find((c) => c.id === column);
                 if (colConfig?.sortPredicate) {
                     const predicateResult = colConfig.sortPredicate(a, b);
                     return isDescending ? -predicateResult : predicateResult;
                 }
-                const valueA = a[column];
-                const valueB = b[column];
+                const valueA = colConfig ? this.content()?.getValue(a, colConfig) : a[column];
+                const valueB = colConfig ? this.content()?.getValue(b, colConfig) : b[column];
+                const aNull = valueA === null || valueA === undefined;
+                const bNull = valueB === null || valueB === undefined;
+                if (aNull && bNull)
+                    return 0;
+                if (aNull)
+                    return 1;
+                if (bNull)
+                    return -1;
                 let comparison = 0;
                 if (colConfig?.type === 'date') {
-                    const dateA = valueA ? new Date(valueA).getTime() : 0;
-                    const dateB = valueB ? new Date(valueB).getTime() : 0;
-                    comparison = dateA - dateB;
+                    const dateA = new Date(valueA).getTime();
+                    const dateB = new Date(valueB).getTime();
+                    comparison = isNaN(dateA) || isNaN(dateB) ? 0 : dateA - dateB;
                 }
                 else if (colConfig?.type === 'number') {
-                    const numA = Number(valueA) || 0;
-                    const numB = Number(valueB) || 0;
-                    comparison = numA - numB;
+                    comparison = Number(valueA) - Number(valueB);
                 }
                 else if (colConfig?.type === 'boolean') {
                     const boolA = valueA ? 1 : 0;
@@ -345,9 +368,7 @@ class ShipTable {
                     comparison = boolA - boolB;
                 }
                 else if (colConfig?.type === 'string' || colConfig?.type === 'badge') {
-                    const strA = (valueA ?? '').toString();
-                    const strB = (valueB ?? '').toString();
-                    comparison = strA.localeCompare(strB, undefined, { sensitivity: 'base' });
+                    comparison = valueA.toString().localeCompare(valueB.toString(), undefined, { sensitivity: 'base' });
                 }
                 else {
                     if (typeof valueA === 'number' && typeof valueB === 'number') {
@@ -362,14 +383,22 @@ class ShipTable {
                 }
                 return isDescending ? -comparison : comparison;
             });
-            this.dataChange.emit(sortedData);
+            let changed = sortedData.length !== currentData.length;
+            if (!changed) {
+                for (let i = 0; i < sortedData.length; i++) {
+                    if (sortedData[i] !== currentData[i]) {
+                        changed = true;
+                        break;
+                    }
+                }
+            }
+            if (changed) {
+                this.dataChange.emit(sortedData);
+            }
         }, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "e" }] : /* istanbul ignore next */ []));
     }
     #el;
-    #destroyRef;
-    #resizeObserver;
-    #cleanup;
     #initialData;
     #initialDataSet;
     updateColumnSizes() {
@@ -451,7 +480,7 @@ class ShipTable {
         <ng-content select="[table-no-rows]" />
       </div>
     }
-  `, isInline: true, styles: ["sh-table{--table-bc: var(--base-4);--table-th-bg: var(--base-2);--table-tr-bg: var(--base-1);--table-td-bg: var(--base-1);--table-th-c: var(--base-8);--table-th-f: var(--paragraph-30);--table-td-c: var(--base-8);--table-td-f: var(--paragraph-30);--table-th-p: 0 1.25rem;--table-td-p: 0 1.25rem;--table-th-mh: 3rem;--table-td-mh: 4.875rem;--table-th-g: .25rem;--table-td-g: .5rem;--table-ws: nowrap;--table-th-bw: 0;--table-td-bw: .0625rem 0 0;--table-columns: 1fr 1fr 1fr max-content;--table-sticky-bw: .0625rem}sh-table.type-a tbody>th,sh-table.type-a tbody>td,sh-table.type-a thead>th,sh-table.type-a thead>td{padding-right:0}sh-table.type-a tbody>th:first-child,sh-table.type-a tbody>td:first-child,sh-table.type-a thead>th:first-child,sh-table.type-a thead>td:first-child{padding:0}sh-table.type-b{--table-th-p: 0 .75rem;--table-td-p: 0 .75rem;--table-th-mh: 2.25rem;--table-td-mh: 3.5rem;--table-th-bw: .0625rem 0 .0625rem .0625rem;--table-td-bw: 0 0 .0625rem .0625rem;--table-sticky-bw: .0625rem}sh-table.type-b th:first-child{border-left-width:0;padding:var(--table-th-p)}sh-table.type-b td:first-child{border-left-width:0;padding:var(--table-td-p)}sh-table.type-b td.sticky,sh-table.type-b th.sticky{border-left-width:0;border-right:var(--table-sticky-bw) solid var(--table-bc)}sh-table.type-b [shStickyColumns] th,sh-table.type-b [shStickyColumns] td{border-right:var(--table-sticky-bw) solid var(--table-bc)}sh-table.type-b th.sticky-end,sh-table.type-b td.sticky-end,sh-table.type-b [shStickyColumns=end] th,sh-table.type-b [shStickyColumns=end] td{border-left:var(--table-sticky-bw) solid var(--table-bc);border-right:0}sh-table.type-b .sticky+th,sh-table.type-b .sticky+td,sh-table.type-b [shStickyColumns]+th,sh-table.type-b [shStickyColumns]+td{border-left-width:0}sh-table.type-b tr:hover td{background-color:var(--base-2)}sh-table.type-b div[table-header] tr:first-child th{border-bottom:0}sh-table.type-b tbody tr:last-child td{border-bottom-width:0}sh-table.type-b .actionbar{background-color:var(--base-2);border-width:.0625rem 0 0}sh-table{width:100%;display:grid;overflow:auto;overscroll-behavior-x:none;grid-template-columns:var(--table-columns);position:relative;container-type:inline-size}sh-table.resizing{-webkit-user-select:none;user-select:none}sh-table:has([shTableResize]) td{overflow:auto}sh-table.no-resize .sh-resizer{display:none}sh-table.no-resize td{overflow:initial}sh-table .actionbar{display:flex;align-items:center;gap:.5rem;grid-column:1/-1;position:sticky;left:0;z-index:10;background-color:var(--base-1);width:100cqw;box-sizing:border-box;padding:.5rem;border:var(--border-10);border-width:.0625rem 0;opacity:1;transition:padding .3s ease-out,border-width .3s ease-out,opacity .3s ease-out;overflow:hidden}sh-table .actionbar:empty,sh-table .actionbar:not(:has(>:not(.actionbar-right))):has(>.actionbar-right:empty){display:none}sh-table .actionbar>*{min-height:0}sh-table .actionbar .actionbar-right{display:flex;align-items:center;gap:.5rem;margin-left:auto;flex-shrink:0}sh-table .actionbar .actionbar-right:empty{display:none}sh-table tbody{position:relative}sh-table tbody:has(tr.sticky){position:sticky;top:0;z-index:1}sh-table thead{position:relative}sh-table thead:has(tr.sticky){position:sticky;top:0;z-index:2}sh-table sh-progress-bar{grid-column:1/-1;position:absolute;top:100%;transform:translateY(-50%);z-index:200}sh-table tbody,sh-table thead,sh-table tr{display:grid;grid-column:1/-1;grid-template-columns:subgrid}sh-table tr{background:var(--table-tr-bg);position:relative;z-index:0}sh-table tr.sticky{position:sticky;top:0;z-index:1}sh-table tr.sticky-end{position:sticky;bottom:0;z-index:3}sh-table tr:has(th.sticky-end) th:nth-last-child(2){padding:var(--table-th-p)}sh-table tr:has(td.sticky-end) td:nth-last-child(2){padding:var(--table-td-p)}sh-table th{display:flex;align-items:center;padding:var(--table-th-p);min-height:var(--table-th-mh);font:var(--table-th-f);line-height:1em;white-space:var(--table-ws);color:var(--table-th-c);border:0;border-color:var(--table-bc);border-style:solid;border-width:var(--table-th-bw);background:var(--table-th-bg);gap:var(--table-th-g);z-index:100}sh-table th:has(.sh-resizer){position:relative}sh-table th.sortable{--caret-color: var(--base-10);--caret-size: .375rem;cursor:pointer;-webkit-user-select:none;user-select:none}sh-table th.sortable sh-icon{opacity:.35;transition:opacity 125ms ease-in-out}sh-table th.sortable:hover sh-icon{opacity:.7}sh-table th.sortable.sort-asc sh-icon,sh-table th.sortable.sort-desc sh-icon{opacity:1}sh-table th.sortable:not(:has(sh-icon)):after{content:\"\";border:var(--caret-size) solid transparent;width:0;height:0;opacity:0;transition:opacity 125ms ease-in-out}sh-table th.sortable:not(:has(sh-icon)).sort-desc:after{opacity:1;transform:translateY(-4px);border-bottom-color:var(--caret-color)}sh-table th.sortable:not(:has(sh-icon)).sort-asc:after{opacity:1;transform:translateY(4px);border-top-color:var(--caret-color)}sh-table th .sh-resizer{width:10px;height:100%;position:absolute;top:0;right:0;cursor:col-resize}sh-table th .sh-resizer:before,sh-table th .sh-resizer:after{content:\"\";position:absolute;top:50%;transform:translateY(-50%);height:.75rem;right:.1875rem;width:.0625rem;background-color:var(--base-4)}sh-table th .sh-resizer:hover:before,sh-table th .sh-resizer:hover:after{background-color:var(--primary-8)}sh-table th .sh-resizer:before{left:.1875rem}sh-table td{display:flex;align-items:center;padding:var(--table-td-p);min-height:var(--table-td-mh);gap:var(--table-td-g);color:var(--table-td-c);font:var(--table-td-f);white-space:var(--table-ws);border-color:var(--table-bc);border-style:solid;border-width:var(--table-td-bw);background:var(--table-td-bg)}sh-table td+td.sticky-end:last-child{padding:var(--table-td-p)}sh-table th.sticky,sh-table th.sticky-end,sh-table td.sticky,sh-table td.sticky-end{position:sticky;overflow:hidden;right:auto;left:0;z-index:1;padding:var(--table-td-p)}sh-table th.sticky:first-child,sh-table th.sticky-end:first-child,sh-table td.sticky:first-child,sh-table td.sticky-end:first-child{padding:var(--table-th-p)}sh-table th.sticky-end,sh-table td.sticky-end{right:0;left:auto}sh-table th.sticky,sh-table th.sticky-end{background:var(--base-1);padding:var(--table-th-p);z-index:101}sh-table th.sticky:first-child,sh-table th.sticky-end:first-child{padding:var(--table-th-p)}sh-table [shStickyColumns]{display:grid;grid-template-columns:subgrid;position:sticky;left:0;z-index:1000;border:0;border-color:var(--table-bc);border-style:solid}sh-table [shStickyColumns] th{background-color:var(--base-1)}sh-table [shStickyColumns=end]{left:auto;right:0}sh-table .span-all{grid-column:1/-1;white-space:initial;align-items:flex-start;padding:0;border-left-width:0;position:sticky;left:0;width:100cqw;box-sizing:border-box}sh-table .no-rows{display:none;grid-column:1/-1}sh-table tbody:empty+.no-rows{display:block}\n"], dependencies: [{ kind: "component", type: ShipProgressBar, selector: "sh-progress-bar", inputs: ["value", "color", "variant"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+  `, isInline: true, styles: ["sh-table{--table-bc: var(--base-4);--table-th-bg: var(--base-2);--table-tr-bg: var(--base-1);--table-td-bg: var(--base-1);--table-th-c: var(--base-8);--table-th-f: var(--paragraph-30);--table-td-c: var(--base-8);--table-td-f: var(--paragraph-30);--table-th-p: 0 1.25rem;--table-td-p: 0 1.25rem;--table-th-mh: 3rem;--table-td-mh: 4.875rem;--table-th-g: .25rem;--table-td-g: .5rem;--table-ws: nowrap;--table-th-bw: 0;--table-td-bw: .0625rem 0 0;--table-columns: 1fr 1fr 1fr max-content;--table-sticky-bw: .0625rem}sh-table.type-a tbody>th,sh-table.type-a tbody>td,sh-table.type-a thead>th,sh-table.type-a thead>td{padding-right:0}sh-table.type-a tbody>th:first-child,sh-table.type-a tbody>td:first-child,sh-table.type-a thead>th:first-child,sh-table.type-a thead>td:first-child{padding:0}sh-table.type-b{--table-th-p: 0 .75rem;--table-td-p: 0 .75rem;--table-th-mh: 2.25rem;--table-td-mh: 3.5rem;--table-th-bw: .0625rem 0 .0625rem .0625rem;--table-td-bw: 0 0 .0625rem .0625rem;--table-sticky-bw: .0625rem}sh-table.type-b th:first-child{border-left-width:0;padding:var(--table-th-p)}sh-table.type-b td:first-child{border-left-width:0;padding:var(--table-td-p)}sh-table.type-b td.sticky,sh-table.type-b th.sticky{border-left-width:0;border-right:var(--table-sticky-bw) solid var(--table-bc)}sh-table.type-b [shStickyColumns] th,sh-table.type-b [shStickyColumns] td{border-right:var(--table-sticky-bw) solid var(--table-bc)}sh-table.type-b th.sticky-end,sh-table.type-b td.sticky-end,sh-table.type-b [shStickyColumns=end] th,sh-table.type-b [shStickyColumns=end] td{border-left:var(--table-sticky-bw) solid var(--table-bc);border-right:0}sh-table.type-b .sticky+th,sh-table.type-b .sticky+td,sh-table.type-b [shStickyColumns]+th,sh-table.type-b [shStickyColumns]+td{border-left-width:0}sh-table.type-b tr:hover td{background-color:var(--base-2)}sh-table.type-b div[table-header] tr:first-child th{border-bottom:0}sh-table.type-b tbody tr:last-child td{border-bottom-width:0}sh-table.type-b .actionbar{background-color:var(--base-2);border-width:.0625rem 0 0}sh-table{width:100%;display:grid;overflow:auto;overscroll-behavior-x:none;grid-template-columns:var(--table-columns);position:relative;container-type:inline-size}sh-table.resizing{-webkit-user-select:none;user-select:none}sh-table:has([shTableResize]) td{overflow:auto}sh-table.no-resize .sh-resizer{display:none}sh-table.no-resize td{overflow:initial}sh-table .actionbar{display:flex;align-items:center;gap:.5rem;grid-column:1/-1;position:sticky;left:0;z-index:10;background-color:var(--base-1);width:100cqw;box-sizing:border-box;padding:.5rem;border:var(--border-10);border-width:.0625rem 0;opacity:1;transition:padding .3s ease-out,border-width .3s ease-out,opacity .3s ease-out;overflow:hidden}sh-table .actionbar:empty,sh-table .actionbar:not(:has(>:not(.actionbar-right))):has(>.actionbar-right:empty){display:none}sh-table .actionbar>*{min-height:0}sh-table .actionbar .actionbar-right{display:flex;align-items:center;gap:.5rem;margin-left:auto;flex-shrink:0}sh-table .actionbar .actionbar-right:empty{display:none}sh-table tbody{position:relative}sh-table tbody:has(tr.sticky){position:sticky;top:0;z-index:1}sh-table thead{position:relative}sh-table thead:has(tr.sticky){position:sticky;top:0;z-index:2}sh-table sh-progress-bar{grid-column:1/-1;position:absolute;top:100%;transform:translateY(-50%);z-index:200}sh-table tbody,sh-table thead,sh-table tr{display:grid;grid-column:1/-1;grid-template-columns:subgrid}sh-table tr{background:var(--table-tr-bg);position:relative;z-index:0}sh-table tr.sticky{position:sticky;top:0;z-index:1}sh-table tr.sticky-end{position:sticky;bottom:0;z-index:3}sh-table tr:has(th.sticky-end) th:nth-last-child(2){padding:var(--table-th-p)}sh-table tr:has(td.sticky-end) td:nth-last-child(2){padding:var(--table-td-p)}sh-table th{display:flex;align-items:center;padding:var(--table-th-p);min-height:var(--table-th-mh);font:var(--table-th-f);line-height:1em;white-space:var(--table-ws);color:var(--table-th-c);border:0;border-color:var(--table-bc);border-style:solid;border-width:var(--table-th-bw);background:var(--table-th-bg);gap:var(--table-th-g);z-index:auto}sh-table th:hover,sh-table th.resizing{z-index:120}sh-table th:has(.sh-resizer){position:relative}sh-table th.sortable{--caret-color: var(--base-10);--caret-size: .375rem;cursor:pointer;-webkit-user-select:none;user-select:none}sh-table th.sortable sh-icon{opacity:.35;transition:opacity 125ms ease-in-out}sh-table th.sortable:hover sh-icon{opacity:.7}sh-table th.sortable.sort-asc sh-icon,sh-table th.sortable.sort-desc sh-icon{opacity:1}sh-table th.sortable:not(:has(sh-icon)):after{content:\"\";border:var(--caret-size) solid transparent;width:0;height:0;opacity:0;transition:opacity 125ms ease-in-out}sh-table th.sortable:not(:has(sh-icon)).sort-desc:after{opacity:1;transform:translateY(-4px);border-bottom-color:var(--caret-color)}sh-table th.sortable:not(:has(sh-icon)).sort-asc:after{opacity:1;transform:translateY(4px);border-top-color:var(--caret-color)}sh-table th .sh-resizer{width:.75rem;height:100%;position:absolute;top:0;right:-.375rem;cursor:col-resize;z-index:110}sh-table th .sh-resizer:after{content:\"\";position:absolute;top:.3125rem;bottom:.3125rem;border-radius:.125rem;right:.3125rem;width:.1875rem;background-color:var(--base-4);transition:width .15s ease,background-color .15s ease,right .15s ease}sh-table th .sh-resizer:hover:after{width:.3125rem;right:.1875rem;background-color:var(--primary-8)}sh-table th.resizing .sh-resizer:after{width:.3125rem;right:.1875rem;background-color:var(--primary-8)}sh-table td{display:flex;align-items:center;padding:var(--table-td-p);min-height:var(--table-td-mh);gap:var(--table-td-g);color:var(--table-td-c);font:var(--table-td-f);white-space:var(--table-ws);border-color:var(--table-bc);border-style:solid;border-width:var(--table-td-bw);background:var(--table-td-bg)}sh-table td+td.sticky-end:last-child{padding:var(--table-td-p)}sh-table th.sticky,sh-table th.sticky-end,sh-table td.sticky,sh-table td.sticky-end{position:sticky;overflow:hidden;right:auto;left:0;z-index:1;padding:var(--table-td-p)}sh-table th.sticky:first-child,sh-table th.sticky-end:first-child,sh-table td.sticky:first-child,sh-table td.sticky-end:first-child{padding:var(--table-th-p)}sh-table th.sticky-end,sh-table td.sticky-end{right:0;left:auto}sh-table th.sticky,sh-table th.sticky-end{background:var(--base-1);padding:var(--table-th-p);z-index:101}sh-table th.sticky:first-child,sh-table th.sticky-end:first-child{padding:var(--table-th-p)}sh-table [shStickyColumns]{display:grid;grid-template-columns:subgrid;position:sticky;left:0;z-index:1000;border:0;border-color:var(--table-bc);border-style:solid}sh-table [shStickyColumns] th{background-color:var(--base-1)}sh-table [shStickyColumns=end]{left:auto;right:0}sh-table .span-all{grid-column:1/-1;white-space:initial;align-items:flex-start;padding:0;border-left-width:0;position:sticky;left:0;width:100cqw;box-sizing:border-box}sh-table .no-rows{display:none;grid-column:1/-1}sh-table tbody:empty+.no-rows{display:block}\n"], dependencies: [{ kind: "component", type: ShipProgressBar, selector: "sh-progress-bar", inputs: ["value", "color", "variant"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.0", ngImport: i0, type: ShipTable, decorators: [{
             type: Component,
@@ -486,7 +515,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.0", ngImpor
       </div>
     }
   `, changeDetection: ChangeDetectionStrategy.OnPush, host: {
-                        'role': 'table',
+                        role: 'table',
                         '[attr.aria-busy]': 'loading()',
                         '[attr.aria-label]': 'ariaLabel()',
                         '[attr.aria-labelledby]': 'ariaLabelledby()',
@@ -500,7 +529,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.0", ngImpor
                         '[class.scrolled-x-end]': 'scrollXState() === 1',
                         '[class.scrolled-y]': 'scrollYState() >= 0',
                         '[class.scrolled-y-end]': 'scrollYState() === 1',
-                    }, styles: ["sh-table{--table-bc: var(--base-4);--table-th-bg: var(--base-2);--table-tr-bg: var(--base-1);--table-td-bg: var(--base-1);--table-th-c: var(--base-8);--table-th-f: var(--paragraph-30);--table-td-c: var(--base-8);--table-td-f: var(--paragraph-30);--table-th-p: 0 1.25rem;--table-td-p: 0 1.25rem;--table-th-mh: 3rem;--table-td-mh: 4.875rem;--table-th-g: .25rem;--table-td-g: .5rem;--table-ws: nowrap;--table-th-bw: 0;--table-td-bw: .0625rem 0 0;--table-columns: 1fr 1fr 1fr max-content;--table-sticky-bw: .0625rem}sh-table.type-a tbody>th,sh-table.type-a tbody>td,sh-table.type-a thead>th,sh-table.type-a thead>td{padding-right:0}sh-table.type-a tbody>th:first-child,sh-table.type-a tbody>td:first-child,sh-table.type-a thead>th:first-child,sh-table.type-a thead>td:first-child{padding:0}sh-table.type-b{--table-th-p: 0 .75rem;--table-td-p: 0 .75rem;--table-th-mh: 2.25rem;--table-td-mh: 3.5rem;--table-th-bw: .0625rem 0 .0625rem .0625rem;--table-td-bw: 0 0 .0625rem .0625rem;--table-sticky-bw: .0625rem}sh-table.type-b th:first-child{border-left-width:0;padding:var(--table-th-p)}sh-table.type-b td:first-child{border-left-width:0;padding:var(--table-td-p)}sh-table.type-b td.sticky,sh-table.type-b th.sticky{border-left-width:0;border-right:var(--table-sticky-bw) solid var(--table-bc)}sh-table.type-b [shStickyColumns] th,sh-table.type-b [shStickyColumns] td{border-right:var(--table-sticky-bw) solid var(--table-bc)}sh-table.type-b th.sticky-end,sh-table.type-b td.sticky-end,sh-table.type-b [shStickyColumns=end] th,sh-table.type-b [shStickyColumns=end] td{border-left:var(--table-sticky-bw) solid var(--table-bc);border-right:0}sh-table.type-b .sticky+th,sh-table.type-b .sticky+td,sh-table.type-b [shStickyColumns]+th,sh-table.type-b [shStickyColumns]+td{border-left-width:0}sh-table.type-b tr:hover td{background-color:var(--base-2)}sh-table.type-b div[table-header] tr:first-child th{border-bottom:0}sh-table.type-b tbody tr:last-child td{border-bottom-width:0}sh-table.type-b .actionbar{background-color:var(--base-2);border-width:.0625rem 0 0}sh-table{width:100%;display:grid;overflow:auto;overscroll-behavior-x:none;grid-template-columns:var(--table-columns);position:relative;container-type:inline-size}sh-table.resizing{-webkit-user-select:none;user-select:none}sh-table:has([shTableResize]) td{overflow:auto}sh-table.no-resize .sh-resizer{display:none}sh-table.no-resize td{overflow:initial}sh-table .actionbar{display:flex;align-items:center;gap:.5rem;grid-column:1/-1;position:sticky;left:0;z-index:10;background-color:var(--base-1);width:100cqw;box-sizing:border-box;padding:.5rem;border:var(--border-10);border-width:.0625rem 0;opacity:1;transition:padding .3s ease-out,border-width .3s ease-out,opacity .3s ease-out;overflow:hidden}sh-table .actionbar:empty,sh-table .actionbar:not(:has(>:not(.actionbar-right))):has(>.actionbar-right:empty){display:none}sh-table .actionbar>*{min-height:0}sh-table .actionbar .actionbar-right{display:flex;align-items:center;gap:.5rem;margin-left:auto;flex-shrink:0}sh-table .actionbar .actionbar-right:empty{display:none}sh-table tbody{position:relative}sh-table tbody:has(tr.sticky){position:sticky;top:0;z-index:1}sh-table thead{position:relative}sh-table thead:has(tr.sticky){position:sticky;top:0;z-index:2}sh-table sh-progress-bar{grid-column:1/-1;position:absolute;top:100%;transform:translateY(-50%);z-index:200}sh-table tbody,sh-table thead,sh-table tr{display:grid;grid-column:1/-1;grid-template-columns:subgrid}sh-table tr{background:var(--table-tr-bg);position:relative;z-index:0}sh-table tr.sticky{position:sticky;top:0;z-index:1}sh-table tr.sticky-end{position:sticky;bottom:0;z-index:3}sh-table tr:has(th.sticky-end) th:nth-last-child(2){padding:var(--table-th-p)}sh-table tr:has(td.sticky-end) td:nth-last-child(2){padding:var(--table-td-p)}sh-table th{display:flex;align-items:center;padding:var(--table-th-p);min-height:var(--table-th-mh);font:var(--table-th-f);line-height:1em;white-space:var(--table-ws);color:var(--table-th-c);border:0;border-color:var(--table-bc);border-style:solid;border-width:var(--table-th-bw);background:var(--table-th-bg);gap:var(--table-th-g);z-index:100}sh-table th:has(.sh-resizer){position:relative}sh-table th.sortable{--caret-color: var(--base-10);--caret-size: .375rem;cursor:pointer;-webkit-user-select:none;user-select:none}sh-table th.sortable sh-icon{opacity:.35;transition:opacity 125ms ease-in-out}sh-table th.sortable:hover sh-icon{opacity:.7}sh-table th.sortable.sort-asc sh-icon,sh-table th.sortable.sort-desc sh-icon{opacity:1}sh-table th.sortable:not(:has(sh-icon)):after{content:\"\";border:var(--caret-size) solid transparent;width:0;height:0;opacity:0;transition:opacity 125ms ease-in-out}sh-table th.sortable:not(:has(sh-icon)).sort-desc:after{opacity:1;transform:translateY(-4px);border-bottom-color:var(--caret-color)}sh-table th.sortable:not(:has(sh-icon)).sort-asc:after{opacity:1;transform:translateY(4px);border-top-color:var(--caret-color)}sh-table th .sh-resizer{width:10px;height:100%;position:absolute;top:0;right:0;cursor:col-resize}sh-table th .sh-resizer:before,sh-table th .sh-resizer:after{content:\"\";position:absolute;top:50%;transform:translateY(-50%);height:.75rem;right:.1875rem;width:.0625rem;background-color:var(--base-4)}sh-table th .sh-resizer:hover:before,sh-table th .sh-resizer:hover:after{background-color:var(--primary-8)}sh-table th .sh-resizer:before{left:.1875rem}sh-table td{display:flex;align-items:center;padding:var(--table-td-p);min-height:var(--table-td-mh);gap:var(--table-td-g);color:var(--table-td-c);font:var(--table-td-f);white-space:var(--table-ws);border-color:var(--table-bc);border-style:solid;border-width:var(--table-td-bw);background:var(--table-td-bg)}sh-table td+td.sticky-end:last-child{padding:var(--table-td-p)}sh-table th.sticky,sh-table th.sticky-end,sh-table td.sticky,sh-table td.sticky-end{position:sticky;overflow:hidden;right:auto;left:0;z-index:1;padding:var(--table-td-p)}sh-table th.sticky:first-child,sh-table th.sticky-end:first-child,sh-table td.sticky:first-child,sh-table td.sticky-end:first-child{padding:var(--table-th-p)}sh-table th.sticky-end,sh-table td.sticky-end{right:0;left:auto}sh-table th.sticky,sh-table th.sticky-end{background:var(--base-1);padding:var(--table-th-p);z-index:101}sh-table th.sticky:first-child,sh-table th.sticky-end:first-child{padding:var(--table-th-p)}sh-table [shStickyColumns]{display:grid;grid-template-columns:subgrid;position:sticky;left:0;z-index:1000;border:0;border-color:var(--table-bc);border-style:solid}sh-table [shStickyColumns] th{background-color:var(--base-1)}sh-table [shStickyColumns=end]{left:auto;right:0}sh-table .span-all{grid-column:1/-1;white-space:initial;align-items:flex-start;padding:0;border-left-width:0;position:sticky;left:0;width:100cqw;box-sizing:border-box}sh-table .no-rows{display:none;grid-column:1/-1}sh-table tbody:empty+.no-rows{display:block}\n"] }]
+                    }, styles: ["sh-table{--table-bc: var(--base-4);--table-th-bg: var(--base-2);--table-tr-bg: var(--base-1);--table-td-bg: var(--base-1);--table-th-c: var(--base-8);--table-th-f: var(--paragraph-30);--table-td-c: var(--base-8);--table-td-f: var(--paragraph-30);--table-th-p: 0 1.25rem;--table-td-p: 0 1.25rem;--table-th-mh: 3rem;--table-td-mh: 4.875rem;--table-th-g: .25rem;--table-td-g: .5rem;--table-ws: nowrap;--table-th-bw: 0;--table-td-bw: .0625rem 0 0;--table-columns: 1fr 1fr 1fr max-content;--table-sticky-bw: .0625rem}sh-table.type-a tbody>th,sh-table.type-a tbody>td,sh-table.type-a thead>th,sh-table.type-a thead>td{padding-right:0}sh-table.type-a tbody>th:first-child,sh-table.type-a tbody>td:first-child,sh-table.type-a thead>th:first-child,sh-table.type-a thead>td:first-child{padding:0}sh-table.type-b{--table-th-p: 0 .75rem;--table-td-p: 0 .75rem;--table-th-mh: 2.25rem;--table-td-mh: 3.5rem;--table-th-bw: .0625rem 0 .0625rem .0625rem;--table-td-bw: 0 0 .0625rem .0625rem;--table-sticky-bw: .0625rem}sh-table.type-b th:first-child{border-left-width:0;padding:var(--table-th-p)}sh-table.type-b td:first-child{border-left-width:0;padding:var(--table-td-p)}sh-table.type-b td.sticky,sh-table.type-b th.sticky{border-left-width:0;border-right:var(--table-sticky-bw) solid var(--table-bc)}sh-table.type-b [shStickyColumns] th,sh-table.type-b [shStickyColumns] td{border-right:var(--table-sticky-bw) solid var(--table-bc)}sh-table.type-b th.sticky-end,sh-table.type-b td.sticky-end,sh-table.type-b [shStickyColumns=end] th,sh-table.type-b [shStickyColumns=end] td{border-left:var(--table-sticky-bw) solid var(--table-bc);border-right:0}sh-table.type-b .sticky+th,sh-table.type-b .sticky+td,sh-table.type-b [shStickyColumns]+th,sh-table.type-b [shStickyColumns]+td{border-left-width:0}sh-table.type-b tr:hover td{background-color:var(--base-2)}sh-table.type-b div[table-header] tr:first-child th{border-bottom:0}sh-table.type-b tbody tr:last-child td{border-bottom-width:0}sh-table.type-b .actionbar{background-color:var(--base-2);border-width:.0625rem 0 0}sh-table{width:100%;display:grid;overflow:auto;overscroll-behavior-x:none;grid-template-columns:var(--table-columns);position:relative;container-type:inline-size}sh-table.resizing{-webkit-user-select:none;user-select:none}sh-table:has([shTableResize]) td{overflow:auto}sh-table.no-resize .sh-resizer{display:none}sh-table.no-resize td{overflow:initial}sh-table .actionbar{display:flex;align-items:center;gap:.5rem;grid-column:1/-1;position:sticky;left:0;z-index:10;background-color:var(--base-1);width:100cqw;box-sizing:border-box;padding:.5rem;border:var(--border-10);border-width:.0625rem 0;opacity:1;transition:padding .3s ease-out,border-width .3s ease-out,opacity .3s ease-out;overflow:hidden}sh-table .actionbar:empty,sh-table .actionbar:not(:has(>:not(.actionbar-right))):has(>.actionbar-right:empty){display:none}sh-table .actionbar>*{min-height:0}sh-table .actionbar .actionbar-right{display:flex;align-items:center;gap:.5rem;margin-left:auto;flex-shrink:0}sh-table .actionbar .actionbar-right:empty{display:none}sh-table tbody{position:relative}sh-table tbody:has(tr.sticky){position:sticky;top:0;z-index:1}sh-table thead{position:relative}sh-table thead:has(tr.sticky){position:sticky;top:0;z-index:2}sh-table sh-progress-bar{grid-column:1/-1;position:absolute;top:100%;transform:translateY(-50%);z-index:200}sh-table tbody,sh-table thead,sh-table tr{display:grid;grid-column:1/-1;grid-template-columns:subgrid}sh-table tr{background:var(--table-tr-bg);position:relative;z-index:0}sh-table tr.sticky{position:sticky;top:0;z-index:1}sh-table tr.sticky-end{position:sticky;bottom:0;z-index:3}sh-table tr:has(th.sticky-end) th:nth-last-child(2){padding:var(--table-th-p)}sh-table tr:has(td.sticky-end) td:nth-last-child(2){padding:var(--table-td-p)}sh-table th{display:flex;align-items:center;padding:var(--table-th-p);min-height:var(--table-th-mh);font:var(--table-th-f);line-height:1em;white-space:var(--table-ws);color:var(--table-th-c);border:0;border-color:var(--table-bc);border-style:solid;border-width:var(--table-th-bw);background:var(--table-th-bg);gap:var(--table-th-g);z-index:auto}sh-table th:hover,sh-table th.resizing{z-index:120}sh-table th:has(.sh-resizer){position:relative}sh-table th.sortable{--caret-color: var(--base-10);--caret-size: .375rem;cursor:pointer;-webkit-user-select:none;user-select:none}sh-table th.sortable sh-icon{opacity:.35;transition:opacity 125ms ease-in-out}sh-table th.sortable:hover sh-icon{opacity:.7}sh-table th.sortable.sort-asc sh-icon,sh-table th.sortable.sort-desc sh-icon{opacity:1}sh-table th.sortable:not(:has(sh-icon)):after{content:\"\";border:var(--caret-size) solid transparent;width:0;height:0;opacity:0;transition:opacity 125ms ease-in-out}sh-table th.sortable:not(:has(sh-icon)).sort-desc:after{opacity:1;transform:translateY(-4px);border-bottom-color:var(--caret-color)}sh-table th.sortable:not(:has(sh-icon)).sort-asc:after{opacity:1;transform:translateY(4px);border-top-color:var(--caret-color)}sh-table th .sh-resizer{width:.75rem;height:100%;position:absolute;top:0;right:-.375rem;cursor:col-resize;z-index:110}sh-table th .sh-resizer:after{content:\"\";position:absolute;top:.3125rem;bottom:.3125rem;border-radius:.125rem;right:.3125rem;width:.1875rem;background-color:var(--base-4);transition:width .15s ease,background-color .15s ease,right .15s ease}sh-table th .sh-resizer:hover:after{width:.3125rem;right:.1875rem;background-color:var(--primary-8)}sh-table th.resizing .sh-resizer:after{width:.3125rem;right:.1875rem;background-color:var(--primary-8)}sh-table td{display:flex;align-items:center;padding:var(--table-td-p);min-height:var(--table-td-mh);gap:var(--table-td-g);color:var(--table-td-c);font:var(--table-td-f);white-space:var(--table-ws);border-color:var(--table-bc);border-style:solid;border-width:var(--table-td-bw);background:var(--table-td-bg)}sh-table td+td.sticky-end:last-child{padding:var(--table-td-p)}sh-table th.sticky,sh-table th.sticky-end,sh-table td.sticky,sh-table td.sticky-end{position:sticky;overflow:hidden;right:auto;left:0;z-index:1;padding:var(--table-td-p)}sh-table th.sticky:first-child,sh-table th.sticky-end:first-child,sh-table td.sticky:first-child,sh-table td.sticky-end:first-child{padding:var(--table-th-p)}sh-table th.sticky-end,sh-table td.sticky-end{right:0;left:auto}sh-table th.sticky,sh-table th.sticky-end{background:var(--base-1);padding:var(--table-th-p);z-index:101}sh-table th.sticky:first-child,sh-table th.sticky-end:first-child{padding:var(--table-th-p)}sh-table [shStickyColumns]{display:grid;grid-template-columns:subgrid;position:sticky;left:0;z-index:1000;border:0;border-color:var(--table-bc);border-style:solid}sh-table [shStickyColumns] th{background-color:var(--base-1)}sh-table [shStickyColumns=end]{left:auto;right:0}sh-table .span-all{grid-column:1/-1;white-space:initial;align-items:flex-start;padding:0;border-left-width:0;position:sticky;left:0;width:100cqw;box-sizing:border-box}sh-table .no-rows{display:none;grid-column:1/-1}sh-table tbody:empty+.no-rows{display:block}\n"] }]
         }], propDecorators: { loading: [{ type: i0.Input, args: [{ isSignal: true, alias: "loading", required: false }] }], data: [{ type: i0.Input, args: [{ isSignal: true, alias: "data", required: false }] }], dataChange: [{ type: i0.Output, args: ["dataChange"] }], sortByColumn: [{ type: i0.Input, args: [{ isSignal: true, alias: "sortByColumn", required: false }] }, { type: i0.Output, args: ["sortByColumnChange"] }], color: [{ type: i0.Input, args: [{ isSignal: true, alias: "color", required: false }] }], variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "aria-label", required: false }] }], ariaLabelledby: [{ type: i0.Input, args: [{ isSignal: true, alias: "aria-labelledby", required: false }] }], content: [{ type: i0.ContentChild, args: [i0.forwardRef(() => ShipTableContent), { isSignal: true }] }], theadLocal: [{ type: i0.ViewChild, args: ['theadLocal', { isSignal: true }] }], tbodyLocal: [{ type: i0.ViewChild, args: ['tbodyLocal', { isSignal: true }] }], onResize: [{
                 type: HostListener,
                 args: ['window:resize', ['$event']]
@@ -523,6 +552,9 @@ class ShipTableContent {
         if (!row)
             return '';
         const key = col.accessorKey || col.id;
+        if (typeof key === 'string' && key.includes('.')) {
+            return key.split('.').reduce((acc, part) => acc?.[part], row);
+        }
         return row[key];
     }
     formatDate(value) {
@@ -538,48 +570,29 @@ class ShipTableContent {
     <thead #thead role="rowgroup">
       <tr role="row">
         @for (col of columns(); track col.id) {
-          @if (col.resizable) {
-            <th role="columnheader"
-                [id]="col.id"
-                [attr.aria-label]="col.header"
-                [shSort]="col.sortable ? col.id : undefined"
-                shResize
-                [minWidth]="col.minWidth ?? 50"
-                [maxWidth]="col.maxWidth ?? null"
-                [attr.size]="col.size || null"
-                [class.sticky]="col.sticky === 'start'"
-                [class.sticky-end]="col.sticky === 'end'">
-              {{ col.header }}
-              @if (col.sortable) {
-                @if (sortByColumn() === col.id) {
-                  <sh-icon>caret-up</sh-icon>
-                } @else if (sortByColumn() === '-' + col.id) {
-                  <sh-icon>caret-down</sh-icon>
-                } @else {
-                  <sh-icon>arrows-down-up</sh-icon>
-                }
-              }
-            </th>
-          } @else {
-            <th role="columnheader"
-                [id]="col.id"
-                [attr.aria-label]="col.header"
-                [shSort]="col.sortable ? col.id : undefined"
-                [attr.size]="col.size || null"
-                [class.sticky]="col.sticky === 'start'"
-                [class.sticky-end]="col.sticky === 'end'">
-              {{ col.header }}
-              @if (col.sortable) {
-                @if (sortByColumn() === col.id) {
-                  <sh-icon>caret-up</sh-icon>
-                } @else if (sortByColumn() === '-' + col.id) {
-                  <sh-icon>caret-down</sh-icon>
-                } @else {
-                  <sh-icon>arrows-down-up</sh-icon>
-                }
+          <th
+            role="columnheader"
+            [id]="col.id"
+            [attr.aria-label]="col.header"
+            [shSort]="col.sortable ? col.id : undefined"
+            shResize
+            [resizable]="!!col.resizable"
+            [minWidth]="col.minWidth ?? 50"
+            [maxWidth]="col.maxWidth ?? null"
+            [attr.size]="col.size || null"
+            [class.sticky]="col.sticky === 'start'"
+            [class.sticky-end]="col.sticky === 'end'">
+            {{ col.header }}
+            @if (col.sortable) {
+              @if (sortByColumn() === col.id) {
+                <sh-icon>caret-up</sh-icon>
+              } @else if (sortByColumn() === '-' + col.id) {
+                <sh-icon>caret-down</sh-icon>
+              } @else {
+                <sh-icon>arrows-down-up</sh-icon>
               }
-            </th>
-          }
+            }
+          </th>
         }
       </tr>
     </thead>
@@ -589,13 +602,16 @@ class ShipTableContent {
         @let rowIndex = $index;
         <tr role="row">
           @for (col of columns(); track col.id) {
-            <td [class.sticky]="col.sticky === 'start'"
-                [class.sticky-end]="col.sticky === 'end'"
-                [id]="col.id + '-' + rowIndex"
-                [attr.aria-labelledby]="col.id + ' ' + col.id + '-' + rowIndex"
-                [attr.role]="col.rowHeader ? 'rowheader' : 'cell'">
+            <td
+              [class.sticky]="col.sticky === 'start'"
+              [class.sticky-end]="col.sticky === 'end'"
+              [id]="col.id + '-' + rowIndex"
+              [attr.aria-labelledby]="col.id + ' ' + col.id + '-' + rowIndex"
+              [attr.role]="col.rowHeader ? 'rowheader' : 'cell'">
               @if (col.cellTemplate) {
-                <ng-container [ngTemplateOutlet]="col.cellTemplate" [ngTemplateOutletContext]="{ $implicit: row, column: col }" />
+                <ng-container
+                  [ngTemplateOutlet]="col.cellTemplate"
+                  [ngTemplateOutletContext]="{ $implicit: row, column: col }" />
               } @else if (col.cell) {
                 {{ col.cell(row) }}
               } @else if (col.format) {
@@ -634,54 +650,35 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.0", ngImpor
                     standalone: true,
                     imports: [NgTemplateOutlet, ShipSort, ShipResize, ShipIcon, ShipChip],
                     host: {
-                        'style': 'display: contents',
+                        style: 'display: contents',
                     },
                     template: `
     <thead #thead role="rowgroup">
       <tr role="row">
         @for (col of columns(); track col.id) {
-          @if (col.resizable) {
-            <th role="columnheader"
-                [id]="col.id"
-                [attr.aria-label]="col.header"
-                [shSort]="col.sortable ? col.id : undefined"
-                shResize
-                [minWidth]="col.minWidth ?? 50"
-                [maxWidth]="col.maxWidth ?? null"
-                [attr.size]="col.size || null"
-                [class.sticky]="col.sticky === 'start'"
-                [class.sticky-end]="col.sticky === 'end'">
-              {{ col.header }}
-              @if (col.sortable) {
-                @if (sortByColumn() === col.id) {
-                  <sh-icon>caret-up</sh-icon>
-                } @else if (sortByColumn() === '-' + col.id) {
-                  <sh-icon>caret-down</sh-icon>
-                } @else {
-                  <sh-icon>arrows-down-up</sh-icon>
-                }
-              }
-            </th>
-          } @else {
-            <th role="columnheader"
-                [id]="col.id"
-                [attr.aria-label]="col.header"
-                [shSort]="col.sortable ? col.id : undefined"
-                [attr.size]="col.size || null"
-                [class.sticky]="col.sticky === 'start'"
-                [class.sticky-end]="col.sticky === 'end'">
-              {{ col.header }}
-              @if (col.sortable) {
-                @if (sortByColumn() === col.id) {
-                  <sh-icon>caret-up</sh-icon>
-                } @else if (sortByColumn() === '-' + col.id) {
-                  <sh-icon>caret-down</sh-icon>
-                } @else {
-                  <sh-icon>arrows-down-up</sh-icon>
-                }
+          <th
+            role="columnheader"
+            [id]="col.id"
+            [attr.aria-label]="col.header"
+            [shSort]="col.sortable ? col.id : undefined"
+            shResize
+            [resizable]="!!col.resizable"
+            [minWidth]="col.minWidth ?? 50"
+            [maxWidth]="col.maxWidth ?? null"
+            [attr.size]="col.size || null"
+            [class.sticky]="col.sticky === 'start'"
+            [class.sticky-end]="col.sticky === 'end'">
+            {{ col.header }}
+            @if (col.sortable) {
+              @if (sortByColumn() === col.id) {
+                <sh-icon>caret-up</sh-icon>
+              } @else if (sortByColumn() === '-' + col.id) {
+                <sh-icon>caret-down</sh-icon>
+              } @else {
+                <sh-icon>arrows-down-up</sh-icon>
               }
-            </th>
-          }
+            }
+          </th>
         }
       </tr>
     </thead>
@@ -691,13 +688,16 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.0", ngImpor
         @let rowIndex = $index;
         <tr role="row">
           @for (col of columns(); track col.id) {
-            <td [class.sticky]="col.sticky === 'start'"
-                [class.sticky-end]="col.sticky === 'end'"
-                [id]="col.id + '-' + rowIndex"
-                [attr.aria-labelledby]="col.id + ' ' + col.id + '-' + rowIndex"
-                [attr.role]="col.rowHeader ? 'rowheader' : 'cell'">
+            <td
+              [class.sticky]="col.sticky === 'start'"
+              [class.sticky-end]="col.sticky === 'end'"
+              [id]="col.id + '-' + rowIndex"
+              [attr.aria-labelledby]="col.id + ' ' + col.id + '-' + rowIndex"
+              [attr.role]="col.rowHeader ? 'rowheader' : 'cell'">
               @if (col.cellTemplate) {
-                <ng-container [ngTemplateOutlet]="col.cellTemplate" [ngTemplateOutletContext]="{ $implicit: row, column: col }" />
+                <ng-container
+                  [ngTemplateOutlet]="col.cellTemplate"
+                  [ngTemplateOutletContext]="{ $implicit: row, column: col }" />
               } @else if (col.cell) {
                 {{ col.cell(row) }}
               } @else if (col.format) {
@@ -727,7 +727,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.0", ngImpor
         </tr>
       }
     </tbody>
-  `
+  `,
                 }]
         }], propDecorators: { columns: [{ type: i0.Input, args: [{ isSignal: true, alias: "columns", required: false }] }], data: [{ type: i0.Input, args: [{ isSignal: true, alias: "data", required: false }] }], thead: [{ type: i0.ViewChild, args: ['thead', { isSignal: true }] }], tbody: [{ type: i0.ViewChild, args: ['tbody', { isSignal: true }] }] } });