@ship-ui/core 0.22.10 → 0.22.12

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

@@ -1,7 +1,10 @@
 import * as i0 from '@angular/core';
-import { inject, ElementRef, Renderer2, input, HostListener, Directive, computed, output, model, viewChild, signal, DestroyRef, effect, ChangeDetectionStrategy, ViewEncapsulation, Component } 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 { shipComponentClasses, observeChildren } from '@ship-ui/core';
+import { ShipIcon } from '@ship-ui/core/ship-icon';
+import { ShipChip } from '@ship-ui/core/ship-chip';
 
 class ShipResize {
     constructor() {
@@ -125,16 +128,27 @@ class ShipSort {
             return currentSort === `-${thisColumn}`;
         }, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "sortDesc" }] : /* istanbul ignore next */ []));
+        this.ariaSort = computed(() => {
+            if (this.sortAsc())
+                return 'ascending';
+            if (this.sortDesc())
+                return 'descending';
+            return 'none';
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "ariaSort" }] : /* istanbul ignore next */ []));
     }
     #table;
-    toggleSort() {
+    toggleSort(event) {
+        if (event) {
+            event.preventDefault();
+        }
         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: { listeners: { "mousedown": "toggleSort()" }, properties: { "class.sort-asc": "sortAsc()", "class.sort-desc": "sortDesc()" }, classAttribute: "sortable" }, 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.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 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.0", ngImport: i0, type: ShipSort, decorators: [{
             type: Directive,
@@ -142,8 +156,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.0", ngImpor
                     selector: '[shSort]',
                     standalone: true,
                     host: {
-                        class: 'sortable',
-                        '(mousedown)': 'toggleSort()',
+                        '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()',
                     },
@@ -198,13 +217,21 @@ class ShipTable {
         ...(ngDevMode ? [{ debugName: "color" }] : /* istanbul ignore next */ []));
         this.variant = input(null, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "variant" }] : /* istanbul ignore next */ []));
+        this.ariaLabel = input(null, { ...(ngDevMode ? { debugName: "ariaLabel" } : /* istanbul ignore next */ {}), alias: 'aria-label' });
+        this.ariaLabelledby = input(null, { ...(ngDevMode ? { debugName: "ariaLabelledby" } : /* istanbul ignore next */ {}), alias: 'aria-labelledby' });
         this.hostClasses = shipComponentClasses('table', {
             color: this.color,
             variant: this.variant,
         });
-        this.thead = viewChild('thead', /* @ts-ignore */
+        this.content = contentChild(ShipTableContent, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "content" }] : /* istanbul ignore next */ []));
+        this.theadLocal = viewChild('theadLocal', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "theadLocal" }] : /* istanbul ignore next */ []));
+        this.tbodyLocal = viewChild('tbodyLocal', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "tbodyLocal" }] : /* istanbul ignore next */ []));
+        this.thead = computed(() => this.content()?.thead() || this.theadLocal(), /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "thead" }] : /* istanbul ignore next */ []));
-        this.tbody = viewChild('tbody', /* @ts-ignore */
+        this.tbody = computed(() => this.content()?.tbody() || this.tbodyLocal(), /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "tbody" }] : /* istanbul ignore next */ []));
         this.columns = observeChildren(this.thead, ['tr:first-child th']);
         this.stickyHeaderHeight = signal(0, /* @ts-ignore */
@@ -294,17 +321,44 @@ 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);
+                if (colConfig?.sortPredicate) {
+                    const predicateResult = colConfig.sortPredicate(a, b);
+                    return isDescending ? -predicateResult : predicateResult;
+                }
                 const valueA = a[column];
                 const valueB = b[column];
                 let comparison = 0;
-                if (typeof valueA === 'number' && typeof valueB === 'number') {
-                    comparison = valueA - valueB;
+                if (colConfig?.type === 'date') {
+                    const dateA = valueA ? new Date(valueA).getTime() : 0;
+                    const dateB = valueB ? new Date(valueB).getTime() : 0;
+                    comparison = dateA - dateB;
+                }
+                else if (colConfig?.type === 'number') {
+                    const numA = Number(valueA) || 0;
+                    const numB = Number(valueB) || 0;
+                    comparison = numA - numB;
+                }
+                else if (colConfig?.type === 'boolean') {
+                    const boolA = valueA ? 1 : 0;
+                    const boolB = valueB ? 1 : 0;
+                    comparison = boolA - boolB;
                 }
-                if (valueA instanceof Date && valueB instanceof Date) {
-                    comparison = valueA.getTime() - valueB.getTime();
+                else if (colConfig?.type === 'string' || colConfig?.type === 'badge') {
+                    const strA = (valueA ?? '').toString();
+                    const strB = (valueB ?? '').toString();
+                    comparison = strA.localeCompare(strB, undefined, { sensitivity: 'base' });
                 }
-                if (typeof valueA === 'string' && typeof valueB === 'string') {
-                    comparison = valueA.localeCompare(valueB, undefined, { sensitivity: 'base' });
+                else {
+                    if (typeof valueA === 'number' && typeof valueB === 'number') {
+                        comparison = valueA - valueB;
+                    }
+                    else if (valueA instanceof Date && valueB instanceof Date) {
+                        comparison = valueA.getTime() - valueB.getTime();
+                    }
+                    else if (typeof valueA === 'string' && typeof valueB === 'string') {
+                        comparison = valueA.localeCompare(valueB, undefined, { sensitivity: 'base' });
+                    }
                 }
                 return isDescending ? -comparison : comparison;
             });
@@ -367,7 +421,7 @@ class ShipTable {
         this.canScrollY.set(canScrollY);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.0", ngImport: i0, type: ShipTable, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.0", type: ShipTable, isStandalone: true, selector: "sh-table", inputs: { loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: false, transformFunction: null }, sortByColumn: { classPropertyName: "sortByColumn", publicName: "sortByColumn", isSignal: true, isRequired: false, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { dataChange: "dataChange", sortByColumn: "sortByColumnChange" }, host: { listeners: { "scroll": "onScroll()", "window:resize": "onResize($event)" }, properties: { "class": "hostClasses()", "style.grid-template-columns": "columnSizes()", "class.resizing": "resizing()", "class.can-scroll-x": "canScrollX()", "class.can-scroll-y": "canScrollY()", "class.scrolled-x": "scrollXState() >= 0", "class.scrolled-x-end": "scrollXState() === 1", "class.scrolled-y": "scrollYState() >= 0", "class.scrolled-y-end": "scrollYState() === 1" } }, viewQueries: [{ propertyName: "thead", first: true, predicate: ["thead"], descendants: true, isSignal: true }, { propertyName: "tbody", first: true, predicate: ["tbody"], descendants: true, isSignal: true }], ngImport: i0, template: `
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.0", type: ShipTable, isStandalone: true, selector: "sh-table", inputs: { loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: false, transformFunction: null }, sortByColumn: { classPropertyName: "sortByColumn", publicName: "sortByColumn", isSignal: true, isRequired: false, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "aria-label", isSignal: true, isRequired: false, transformFunction: null }, ariaLabelledby: { classPropertyName: "ariaLabelledby", publicName: "aria-labelledby", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { dataChange: "dataChange", sortByColumn: "sortByColumnChange" }, host: { attributes: { "role": "table" }, listeners: { "scroll": "onScroll()", "window:resize": "onResize($event)" }, properties: { "attr.aria-busy": "loading()", "attr.aria-label": "ariaLabel()", "attr.aria-labelledby": "ariaLabelledby()", "class": "hostClasses()", "style.grid-template-columns": "columnSizes()", "class.resizing": "resizing()", "class.can-scroll-x": "canScrollX()", "class.can-scroll-y": "canScrollY()", "class.scrolled-x": "scrollXState() >= 0", "class.scrolled-x-end": "scrollXState() === 1", "class.scrolled-y": "scrollYState() >= 0", "class.scrolled-y-end": "scrollYState() === 1" } }, queries: [{ propertyName: "content", first: true, predicate: ShipTableContent, descendants: true, isSignal: true }], viewQueries: [{ propertyName: "theadLocal", first: true, predicate: ["theadLocal"], descendants: true, isSignal: true }, { propertyName: "tbodyLocal", first: true, predicate: ["tbodyLocal"], descendants: true, isSignal: true }], ngImport: i0, template: `
     <div class="actionbar">
       <ng-content select="[actionbar]:not([align-right])" />
       <div class="actionbar-right">
@@ -379,14 +433,18 @@ class ShipTable {
       <sh-progress-bar class="indeterminate primary" />
     }
 
-    <thead #thead>
-      <ng-content select="th" />
-      <ng-content select="[thead]" />
-    </thead>
+    <ng-content select="sh-table-content" />
 
-    <tbody #tbody>
-      <ng-content />
-    </tbody>
+    @if (!content()) {
+      <thead #theadLocal role="rowgroup">
+        <ng-content select="th" />
+        <ng-content select="[thead]" />
+      </thead>
+
+      <tbody #tbodyLocal role="rowgroup">
+        <ng-content />
+      </tbody>
+    }
 
     @if (!loading()) {
       <div class="no-rows">
@@ -409,14 +467,18 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.0", ngImpor
       <sh-progress-bar class="indeterminate primary" />
     }
 
-    <thead #thead>
-      <ng-content select="th" />
-      <ng-content select="[thead]" />
-    </thead>
+    <ng-content select="sh-table-content" />
 
-    <tbody #tbody>
-      <ng-content />
-    </tbody>
+    @if (!content()) {
+      <thead #theadLocal role="rowgroup">
+        <ng-content select="th" />
+        <ng-content select="[thead]" />
+      </thead>
+
+      <tbody #tbodyLocal role="rowgroup">
+        <ng-content />
+      </tbody>
+    }
 
     @if (!loading()) {
       <div class="no-rows">
@@ -424,6 +486,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.0", ngImpor
       </div>
     }
   `, changeDetection: ChangeDetectionStrategy.OnPush, host: {
+                        'role': 'table',
+                        '[attr.aria-busy]': 'loading()',
+                        '[attr.aria-label]': 'ariaLabel()',
+                        '[attr.aria-labelledby]': 'ariaLabelledby()',
                         '[class]': 'hostClasses()',
                         '[style.grid-template-columns]': 'columnSizes()',
                         '[class.resizing]': 'resizing()',
@@ -435,14 +501,239 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.0", ngImpor
                         '[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"] }]
-        }], 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 }] }], thead: [{ type: i0.ViewChild, args: ['thead', { isSignal: true }] }], tbody: [{ type: i0.ViewChild, args: ['tbody', { isSignal: true }] }], onResize: [{
+        }], 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']]
             }] } });
+class ShipTableContent {
+    constructor() {
+        this.#table = inject(ShipTable);
+        this.columns = input([], /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "columns" }] : /* istanbul ignore next */ []));
+        this.data = input([], /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "data" }] : /* istanbul ignore next */ []));
+        this.sortByColumn = this.#table.sortByColumn;
+        this.thead = viewChild('thead', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "thead" }] : /* istanbul ignore next */ []));
+        this.tbody = viewChild('tbody', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "tbody" }] : /* istanbul ignore next */ []));
+    }
+    #table;
+    getValue(row, col) {
+        if (!row)
+            return '';
+        const key = col.accessorKey || col.id;
+        return row[key];
+    }
+    formatDate(value) {
+        if (!value)
+            return '';
+        const date = new Date(value);
+        if (isNaN(date.getTime()))
+            return String(value);
+        return date.toLocaleDateString();
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.0", ngImport: i0, type: ShipTableContent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.0", type: ShipTableContent, isStandalone: true, selector: "sh-table-content", inputs: { columns: { classPropertyName: "columns", publicName: "columns", isSignal: true, isRequired: false, transformFunction: null }, data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: false, transformFunction: null } }, host: { styleAttribute: "display: contents" }, viewQueries: [{ propertyName: "thead", first: true, predicate: ["thead"], descendants: true, isSignal: true }, { propertyName: "tbody", first: true, predicate: ["tbody"], descendants: true, isSignal: true }], ngImport: i0, 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>
+          }
+        }
+      </tr>
+    </thead>
+
+    <tbody #tbody role="rowgroup">
+      @for (row of data(); track $index) {
+        @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'">
+              @if (col.cellTemplate) {
+                <ng-container [ngTemplateOutlet]="col.cellTemplate" [ngTemplateOutletContext]="{ $implicit: row, column: col }" />
+              } @else if (col.cell) {
+                {{ col.cell(row) }}
+              } @else if (col.format) {
+                {{ col.format(getValue(row, col), row) }}
+              } @else {
+                @switch (col.type) {
+                  @case ('date') {
+                    {{ formatDate(getValue(row, col)) }}
+                  }
+                  @case ('boolean') {
+                    @if (getValue(row, col)) {
+                      <sh-icon class="text-success">check</sh-icon>
+                    } @else {
+                      <sh-icon class="text-muted">x</sh-icon>
+                    }
+                  }
+                  @case ('badge') {
+                    <sh-chip>{{ getValue(row, col) }}</sh-chip>
+                  }
+                  @default {
+                    {{ getValue(row, col) }}
+                  }
+                }
+              }
+            </td>
+          }
+        </tr>
+      }
+    </tbody>
+  `, isInline: true, dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: ShipSort, selector: "[shSort]", inputs: ["shSort"] }, { kind: "directive", type: ShipResize, selector: "[shResize]", inputs: ["resizable", "minWidth", "maxWidth"] }, { kind: "component", type: ShipIcon, selector: "sh-icon", inputs: ["color", "size"] }, { kind: "component", type: ShipChip, selector: "sh-chip", inputs: ["color", "variant", "size", "sharp", "dynamic", "readonly", "noBg"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.0", ngImport: i0, type: ShipTableContent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'sh-table-content',
+                    standalone: true,
+                    imports: [NgTemplateOutlet, ShipSort, ShipResize, ShipIcon, ShipChip],
+                    host: {
+                        '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>
+          }
+        }
+      </tr>
+    </thead>
+
+    <tbody #tbody role="rowgroup">
+      @for (row of data(); track $index) {
+        @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'">
+              @if (col.cellTemplate) {
+                <ng-container [ngTemplateOutlet]="col.cellTemplate" [ngTemplateOutletContext]="{ $implicit: row, column: col }" />
+              } @else if (col.cell) {
+                {{ col.cell(row) }}
+              } @else if (col.format) {
+                {{ col.format(getValue(row, col), row) }}
+              } @else {
+                @switch (col.type) {
+                  @case ('date') {
+                    {{ formatDate(getValue(row, col)) }}
+                  }
+                  @case ('boolean') {
+                    @if (getValue(row, col)) {
+                      <sh-icon class="text-success">check</sh-icon>
+                    } @else {
+                      <sh-icon class="text-muted">x</sh-icon>
+                    }
+                  }
+                  @case ('badge') {
+                    <sh-chip>{{ getValue(row, col) }}</sh-chip>
+                  }
+                  @default {
+                    {{ getValue(row, col) }}
+                  }
+                }
+              }
+            </td>
+          }
+        </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 }] }] } });
 
 /**
  * Generated bundle index. Do not edit.
  */
 
-export { ShipResize, ShipSort, ShipStickyColumns, ShipTable };
+export { ShipResize, ShipSort, ShipStickyColumns, ShipTable, ShipTableContent };
 //# sourceMappingURL=ship-ui-core-ship-table.mjs.map