@tailng-ui/primitives 0.41.0 → 0.42.0

package/src/lib/layout/table/tng-table.js

@@ -0,0 +1,1490 @@
+import { Directive, HostBinding, HostListener, Input, booleanAttribute, contentChildren, ElementRef, forwardRef, inject, input, output, } from '@angular/core';
+import { createTngRowExpansionController, createTngRowSelectionController, resolveGridNavigationKeyAction, resolveNavigableGridCell, } from '@tailng-ui/cdk';
+import * as i0 from "@angular/core";
+const tngTableInteractiveTargetSelector = [
+    'a[href]',
+    'button',
+    'input',
+    'label',
+    'select',
+    'summary',
+    'textarea',
+    '[contenteditable=""]',
+    '[contenteditable="plaintext-only"]',
+    '[contenteditable="true"]',
+    '[data-tng-table-interactive]',
+    '[role="button"]',
+    '[role="checkbox"]',
+    '[role="combobox"]',
+    '[role="link"]',
+    '[role="listbox"]',
+    '[role="menuitem"]',
+    '[role="option"]',
+    '[role="radio"]',
+    '[role="switch"]',
+    '[role="tab"]',
+    '[role="textbox"]',
+].join(',');
+function createTngTableCellKey(position) {
+    return `${position.row}:${position.col}`;
+}
+function compareTngTableCellPositions(a, b) {
+    if (a.row !== b.row) {
+        return a.row - b.row;
+    }
+    return a.col - b.col;
+}
+function isMovementActionType(actionType) {
+    return actionType !== 'activate' && actionType !== 'exit';
+}
+function resolveTngTableCellPosition(element) {
+    if (element.cellIndex < 0) {
+        return null;
+    }
+    const rowElement = element.parentElement;
+    if (!(rowElement instanceof HTMLTableRowElement) || rowElement.rowIndex < 0) {
+        return null;
+    }
+    return Object.freeze({
+        col: element.cellIndex,
+        row: rowElement.rowIndex,
+    });
+}
+function isInsideContainer(container, value) {
+    return value instanceof Node && container.contains(value);
+}
+function isFocusVisibleElement(value) {
+    return value.matches(':focus-visible');
+}
+function hasTableKeyboardModifiers(event) {
+    return event.altKey || event.ctrlKey || event.metaKey || event.shiftKey;
+}
+function hasInteractiveEventTarget(container, target) {
+    if (!(target instanceof Element)) {
+        return false;
+    }
+    const interactiveTarget = target.closest(tngTableInteractiveTargetSelector);
+    return interactiveTarget !== null && interactiveTarget !== container && container.contains(interactiveTarget);
+}
+function resolveTngTablePageDirection(key) {
+    if (key === 'PageDown') {
+        return 'forward';
+    }
+    if (key === 'PageUp') {
+        return 'backward';
+    }
+    return null;
+}
+function normalizeCssLength(value) {
+    if (typeof value === 'number' && Number.isFinite(value)) {
+        return `${value}px`;
+    }
+    if (typeof value !== 'string') {
+        return null;
+    }
+    const trimmed = value.trim();
+    return trimmed.length > 0 ? trimmed : null;
+}
+function normalizeTableLayoutMode(value) {
+    return value === 'fixed' ? 'fixed' : 'auto';
+}
+function normalizeTableScrollAxis(value) {
+    if (value === 'both' || value === 'y') {
+        return value;
+    }
+    return 'x';
+}
+function normalizeTableStickySide(value) {
+    return value === 'start' || value === 'end' ? value : null;
+}
+function resolveStickyPhysicalSide(side, direction) {
+    if (side === 'start') {
+        return direction === 'rtl' ? 'right' : 'left';
+    }
+    return direction === 'rtl' ? 'left' : 'right';
+}
+function normalizeTableDirection(value) {
+    if (value === 'ltr' || value === 'rtl') {
+        return value;
+    }
+    return null;
+}
+export function resolveTngTableEmptyState(items, loading) {
+    if (loading || items === null || items === undefined) {
+        return false;
+    }
+    return items.length === 0;
+}
+function normalizeExpansionMode(value) {
+    return value === 'single' ? 'single' : 'multiple';
+}
+function normalizeOptionalString(value) {
+    if (typeof value !== 'string') {
+        return null;
+    }
+    const trimmed = value.trim();
+    return trimmed.length > 0 ? trimmed : null;
+}
+function normalizeOptionalStringArray(value) {
+    return Array.isArray(value)
+        ? value
+            .filter((item) => typeof item === 'string')
+            .map((item) => item.trim())
+            .filter((item) => item.length > 0)
+        : [];
+}
+function normalizeSelectionMode(value) {
+    return value === 'multiple' ? 'multiple' : 'single';
+}
+function normalizeBooleanOrNull(value) {
+    if (value === undefined || value === null) {
+        return null;
+    }
+    return booleanAttribute(value);
+}
+export class TngTableHeader {
+    sticky = input(false, { ...(ngDevMode ? { debugName: "sticky" } : {}), alias: 'tngTableHeaderSticky',
+        transform: booleanAttribute });
+    stickyOffset = input(null, { ...(ngDevMode ? { debugName: "stickyOffset" } : {}), alias: 'tngTableHeaderStickyOffset',
+        transform: normalizeCssLength });
+    dataSlot = 'table-header';
+    get dataStickyAttr() {
+        return this.isSticky() ? '' : null;
+    }
+    getStickyInset() {
+        return this.stickyOffset() ?? '0px';
+    }
+    isSticky() {
+        return this.sticky();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: TngTableHeader, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.1.1", type: TngTableHeader, isStandalone: true, selector: "thead[tngTableHeader]", inputs: { sticky: { classPropertyName: "sticky", publicName: "tngTableHeaderSticky", isSignal: true, isRequired: false, transformFunction: null }, stickyOffset: { classPropertyName: "stickyOffset", publicName: "tngTableHeaderStickyOffset", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "attr.data-slot": "this.dataSlot", "attr.data-sticky": "this.dataStickyAttr" } }, exportAs: ["tngTableHeader"], ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: TngTableHeader, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: 'thead[tngTableHeader]',
+                    exportAs: 'tngTableHeader',
+                }]
+        }], propDecorators: { sticky: [{ type: i0.Input, args: [{ isSignal: true, alias: "tngTableHeaderSticky", required: false }] }], stickyOffset: [{ type: i0.Input, args: [{ isSignal: true, alias: "tngTableHeaderStickyOffset", required: false }] }], dataSlot: [{
+                type: HostBinding,
+                args: ['attr.data-slot']
+            }], dataStickyAttr: [{
+                type: HostBinding,
+                args: ['attr.data-sticky']
+            }] } });
+export class TngTableBody {
+    dataSlot = 'table-body';
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: TngTableBody, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.1.1", type: TngTableBody, isStandalone: true, selector: "tbody[tngTableBody]", host: { properties: { "attr.data-slot": "this.dataSlot" } }, exportAs: ["tngTableBody"], ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: TngTableBody, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: 'tbody[tngTableBody]',
+                    exportAs: 'tngTableBody',
+                }]
+        }], propDecorators: { dataSlot: [{
+                type: HostBinding,
+                args: ['attr.data-slot']
+            }] } });
+export class TngTableFooter {
+    sticky = input(false, { ...(ngDevMode ? { debugName: "sticky" } : {}), alias: 'tngTableFooterSticky',
+        transform: booleanAttribute });
+    stickyOffset = input(null, { ...(ngDevMode ? { debugName: "stickyOffset" } : {}), alias: 'tngTableFooterStickyOffset',
+        transform: normalizeCssLength });
+    dataSlot = 'table-footer';
+    get dataStickyAttr() {
+        return this.isSticky() ? '' : null;
+    }
+    getStickyInset() {
+        return this.stickyOffset() ?? '0px';
+    }
+    isSticky() {
+        return this.sticky();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: TngTableFooter, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.1.1", type: TngTableFooter, isStandalone: true, selector: "tfoot[tngTableFooter]", inputs: { sticky: { classPropertyName: "sticky", publicName: "tngTableFooterSticky", isSignal: true, isRequired: false, transformFunction: null }, stickyOffset: { classPropertyName: "stickyOffset", publicName: "tngTableFooterStickyOffset", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "attr.data-slot": "this.dataSlot", "attr.data-sticky": "this.dataStickyAttr" } }, exportAs: ["tngTableFooter"], ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: TngTableFooter, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: 'tfoot[tngTableFooter]',
+                    exportAs: 'tngTableFooter',
+                }]
+        }], propDecorators: { sticky: [{ type: i0.Input, args: [{ isSignal: true, alias: "tngTableFooterSticky", required: false }] }], stickyOffset: [{ type: i0.Input, args: [{ isSignal: true, alias: "tngTableFooterStickyOffset", required: false }] }], dataSlot: [{
+                type: HostBinding,
+                args: ['attr.data-slot']
+            }], dataStickyAttr: [{
+                type: HostBinding,
+                args: ['attr.data-sticky']
+            }] } });
+export class TngTableScrollContainer {
+    axis = input('x', { ...(ngDevMode ? { debugName: "axis" } : {}), alias: 'tngTableScrollAxis',
+        transform: normalizeTableScrollAxis });
+    dir = input(null, { ...(ngDevMode ? { debugName: "dir" } : {}), alias: 'dir',
+        transform: normalizeTableDirection });
+    dataSlot = 'table-scroll-container';
+    get dirAttr() {
+        return this.dir();
+    }
+    get dataOverflowAxisAttr() {
+        return this.axis();
+    }
+    display = 'block';
+    maxWidth = '100%';
+    get directionStyleAttr() {
+        return this.dir();
+    }
+    get overflowXAttr() {
+        return this.axis() === 'x' || this.axis() === 'both' ? 'auto' : 'hidden';
+    }
+    get overflowYAttr() {
+        return this.axis() === 'y' || this.axis() === 'both' ? 'auto' : 'hidden';
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: TngTableScrollContainer, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.1.1", type: TngTableScrollContainer, isStandalone: true, selector: "[tngTableScrollContainer]", inputs: { axis: { classPropertyName: "axis", publicName: "tngTableScrollAxis", isSignal: true, isRequired: false, transformFunction: null }, dir: { classPropertyName: "dir", publicName: "dir", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "attr.data-slot": "this.dataSlot", "attr.dir": "this.dirAttr", "attr.data-overflow-axis": "this.dataOverflowAxisAttr", "style.display": "this.display", "style.max-width": "this.maxWidth", "style.direction": "this.directionStyleAttr", "style.overflow-x": "this.overflowXAttr", "style.overflow-y": "this.overflowYAttr" } }, exportAs: ["tngTableScrollContainer"], ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: TngTableScrollContainer, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[tngTableScrollContainer]',
+                    exportAs: 'tngTableScrollContainer',
+                }]
+        }], propDecorators: { axis: [{ type: i0.Input, args: [{ isSignal: true, alias: "tngTableScrollAxis", required: false }] }], dir: [{ type: i0.Input, args: [{ isSignal: true, alias: "dir", required: false }] }], dataSlot: [{
+                type: HostBinding,
+                args: ['attr.data-slot']
+            }], dirAttr: [{
+                type: HostBinding,
+                args: ['attr.dir']
+            }], dataOverflowAxisAttr: [{
+                type: HostBinding,
+                args: ['attr.data-overflow-axis']
+            }], display: [{
+                type: HostBinding,
+                args: ['style.display']
+            }], maxWidth: [{
+                type: HostBinding,
+                args: ['style.max-width']
+            }], directionStyleAttr: [{
+                type: HostBinding,
+                args: ['style.direction']
+            }], overflowXAttr: [{
+                type: HostBinding,
+                args: ['style.overflow-x']
+            }], overflowYAttr: [{
+                type: HostBinding,
+                args: ['style.overflow-y']
+            }] } });
+export class TngTableSelection {
+    rows = contentChildren(forwardRef(() => TngTableRow), {
+        descendants: true,
+    });
+    uncontrolledAnchorId = null;
+    uncontrolledSelectedIds = [];
+    mode = input('single', { ...(ngDevMode ? { debugName: "mode" } : {}), alias: 'tngTableSelectionMode',
+        transform: normalizeSelectionMode });
+    selectedIds = input(undefined, { ...(ngDevMode ? { debugName: "selectedIds" } : {}), alias: 'tngTableSelectedIds' });
+    selectionChange = output();
+    dataSelectable = '';
+    clear(trigger = 'programmatic') {
+        return this.commit(this.createController().clear(), null, trigger);
+    }
+    isSelected(rowId) {
+        return this.createController().isSelected(rowId);
+    }
+    replace(rowId, trigger = 'programmatic') {
+        return this.commit(this.createController().replace(rowId), rowId, trigger);
+    }
+    selectAll(rowIds, trigger = 'programmatic') {
+        return this.commit(this.createController().selectAll(rowIds), rowIds[0] ?? null, trigger);
+    }
+    toggle(rowId, trigger = 'programmatic') {
+        return this.commit(this.createController().toggle(rowId), rowId, trigger);
+    }
+    toggleFromPointer(row, event) {
+        const rowId = row.rowId();
+        if (rowId === null || row.isDisabled()) {
+            return;
+        }
+        const controller = this.createController();
+        const nextState = this.resolvePointerSelectionState(controller, rowId, event);
+        this.commit(nextState, rowId, 'pointer');
+    }
+    commit(nextState, changedId, trigger) {
+        this.uncontrolledAnchorId = nextState.anchorId;
+        if (this.selectedIds() === undefined) {
+            this.uncontrolledSelectedIds = nextState.selectedIds;
+        }
+        this.selectionChange.emit(Object.freeze({
+            anchorId: nextState.anchorId,
+            changedId,
+            selectedIds: nextState.selectedIds,
+            trigger,
+        }));
+        return nextState;
+    }
+    createController() {
+        return createTngRowSelectionController({
+            disabledIds: this.getDisabledRowIds(),
+            initialAnchorId: this.getAnchorId(),
+            initialSelectedIds: this.getCurrentSelectedIds(),
+            mode: this.mode(),
+        });
+    }
+    getAnchorId() {
+        const selectedIds = this.getCurrentSelectedIds();
+        const lastSelectedId = selectedIds.length > 0 ? selectedIds[selectedIds.length - 1] ?? null : null;
+        return this.uncontrolledAnchorId !== null && selectedIds.includes(this.uncontrolledAnchorId)
+            ? this.uncontrolledAnchorId
+            : lastSelectedId;
+    }
+    getCurrentSelectedIds() {
+        const controlledSelectedIds = this.selectedIds();
+        return controlledSelectedIds === undefined
+            ? this.uncontrolledSelectedIds
+            : normalizeOptionalStringArray(controlledSelectedIds);
+    }
+    getDisabledRowIds() {
+        return this.rows()
+            .filter((row) => row.isDisabled())
+            .map((row) => row.rowId())
+            .filter((rowId) => rowId !== null);
+    }
+    getOrderedRowIds() {
+        return this.rows()
+            .map((row) => row.rowId())
+            .filter((rowId) => rowId !== null);
+    }
+    resolvePointerSelectionState(controller, rowId, event) {
+        if (this.mode() !== 'multiple') {
+            return controller.replace(rowId);
+        }
+        if (event.shiftKey) {
+            return controller.selectRange(controller.getState().anchorId ?? rowId, rowId, this.getOrderedRowIds());
+        }
+        if (event.ctrlKey || event.metaKey) {
+            return controller.toggle(rowId);
+        }
+        return controller.replace(rowId);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: TngTableSelection, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.2.0", version: "21.1.1", type: TngTableSelection, isStandalone: true, selector: "table[tngTable][tngTableSelection]", inputs: { mode: { classPropertyName: "mode", publicName: "tngTableSelectionMode", isSignal: true, isRequired: false, transformFunction: null }, selectedIds: { classPropertyName: "selectedIds", publicName: "tngTableSelectedIds", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { selectionChange: "selectionChange" }, host: { properties: { "attr.data-selectable": "this.dataSelectable" } }, queries: [{ propertyName: "rows", predicate: i0.forwardRef(() => TngTableRow), descendants: true, isSignal: true }], exportAs: ["tngTableSelection"], ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: TngTableSelection, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: 'table[tngTable][tngTableSelection]',
+                    exportAs: 'tngTableSelection',
+                }]
+        }], propDecorators: { rows: [{ type: i0.ContentChildren, args: [forwardRef(() => TngTableRow), { ...{
+                            descendants: true,
+                        }, isSignal: true }] }], mode: [{ type: i0.Input, args: [{ isSignal: true, alias: "tngTableSelectionMode", required: false }] }], selectedIds: [{ type: i0.Input, args: [{ isSignal: true, alias: "tngTableSelectedIds", required: false }] }], selectionChange: [{ type: i0.Output, args: ["selectionChange"] }], dataSelectable: [{
+                type: HostBinding,
+                args: ['attr.data-selectable']
+            }] } });
+export class TngTableExpansion {
+    uncontrolledExpandedIds = [];
+    expandedIds = input(undefined, { ...(ngDevMode ? { debugName: "expandedIds" } : {}), alias: 'tngTableExpandedIds' });
+    mode = input('multiple', { ...(ngDevMode ? { debugName: "mode" } : {}), alias: 'tngTableExpansionMode',
+        transform: normalizeExpansionMode });
+    expansionChange = output();
+    dataExpandable = '';
+    clear(trigger = 'programmatic') {
+        const nextState = this.createController().clear();
+        return this.commit(nextState, null, trigger);
+    }
+    isExpanded(rowId) {
+        return this.createController().isExpanded(rowId);
+    }
+    toggle(rowId, trigger = 'programmatic') {
+        const nextState = this.createController().toggle(rowId);
+        return this.commit(nextState, rowId, trigger);
+    }
+    commit(nextState, rowId, trigger) {
+        if (this.expandedIds() === undefined) {
+            this.uncontrolledExpandedIds = nextState.expandedIds;
+        }
+        if (rowId !== null) {
+            this.expansionChange.emit(Object.freeze({
+                expanded: nextState.expandedIds.includes(rowId),
+                expandedIds: nextState.expandedIds,
+                rowId,
+                trigger,
+            }));
+        }
+        return nextState;
+    }
+    createController() {
+        return createTngRowExpansionController({
+            initialExpandedIds: this.getCurrentExpandedIds(),
+            mode: this.mode(),
+        });
+    }
+    getCurrentExpandedIds() {
+        const controlledExpandedIds = this.expandedIds();
+        return controlledExpandedIds === undefined
+            ? this.uncontrolledExpandedIds
+            : normalizeOptionalStringArray(controlledExpandedIds);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: TngTableExpansion, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.1.1", type: TngTableExpansion, isStandalone: true, selector: "table[tngTable][tngTableExpansion]", inputs: { expandedIds: { classPropertyName: "expandedIds", publicName: "tngTableExpandedIds", isSignal: true, isRequired: false, transformFunction: null }, mode: { classPropertyName: "mode", publicName: "tngTableExpansionMode", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { expansionChange: "expansionChange" }, host: { properties: { "attr.data-expandable": "this.dataExpandable" } }, exportAs: ["tngTableExpansion"], ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: TngTableExpansion, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: 'table[tngTable][tngTableExpansion]',
+                    exportAs: 'tngTableExpansion',
+                }]
+        }], propDecorators: { expandedIds: [{ type: i0.Input, args: [{ isSignal: true, alias: "tngTableExpandedIds", required: false }] }], mode: [{ type: i0.Input, args: [{ isSignal: true, alias: "tngTableExpansionMode", required: false }] }], expansionChange: [{ type: i0.Output, args: ["expansionChange"] }], dataExpandable: [{
+                type: HostBinding,
+                args: ['attr.data-expandable']
+            }] } });
+export class TngTableRow {
+    expansion = inject(forwardRef(() => TngTableExpansion), {
+        optional: true,
+    });
+    hostRef = inject(ElementRef);
+    selection = inject(forwardRef(() => TngTableSelection), {
+        optional: true,
+    });
+    disabled = input(false, { ...(ngDevMode ? { debugName: "disabled" } : {}), alias: 'tngTableRowDisabled',
+        transform: booleanAttribute });
+    expanded = input(null, { ...(ngDevMode ? { debugName: "expanded" } : {}), alias: 'tngTableRowExpanded',
+        transform: normalizeBooleanOrNull });
+    rowId = input(null, { ...(ngDevMode ? { debugName: "rowId" } : {}), alias: 'tngTableRowId',
+        transform: normalizeOptionalString });
+    selected = input(null, { ...(ngDevMode ? { debugName: "selected" } : {}), alias: 'tngTableRowSelected',
+        transform: normalizeBooleanOrNull });
+    rowClick = output();
+    rowContextMenu = output();
+    dataSlot = 'table-row';
+    get ariaDisabledAttr() {
+        return this.isDisabled() ? 'true' : null;
+    }
+    get ariaSelectedAttr() {
+        if (this.selected() === null && this.selection === null) {
+            return null;
+        }
+        return this.isSelected() ? 'true' : 'false';
+    }
+    get dataDisabledAttr() {
+        return this.isDisabled() ? '' : null;
+    }
+    get dataExpandedAttr() {
+        return this.isExpanded() ? '' : null;
+    }
+    get dataRowIdAttr() {
+        return this.rowId();
+    }
+    get dataSelectedAttr() {
+        return this.isSelected() ? '' : null;
+    }
+    isDisabled() {
+        return this.disabled();
+    }
+    isExpanded() {
+        const expanded = this.expanded();
+        if (expanded !== null) {
+            return expanded;
+        }
+        const rowId = this.rowId();
+        return rowId !== null && this.expansion?.isExpanded(rowId) === true;
+    }
+    isSelected() {
+        const selected = this.selected();
+        if (selected !== null) {
+            return selected;
+        }
+        const rowId = this.rowId();
+        return rowId !== null && this.selection?.isSelected(rowId) === true;
+    }
+    onClick(event) {
+        if (this.isDisabled()
+            || event.defaultPrevented
+            || hasInteractiveEventTarget(this.hostRef.nativeElement, event.target)) {
+            return;
+        }
+        this.selection?.toggleFromPointer(this, event);
+        this.rowClick.emit(Object.freeze({
+            originalEvent: event,
+            rowId: this.rowId(),
+        }));
+    }
+    onContextMenu(event) {
+        if (this.isDisabled()) {
+            return;
+        }
+        this.rowContextMenu.emit(Object.freeze({
+            originalEvent: event,
+            rowId: this.rowId(),
+        }));
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: TngTableRow, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.1.1", type: TngTableRow, isStandalone: true, selector: "tr[tngTableRow]", inputs: { disabled: { classPropertyName: "disabled", publicName: "tngTableRowDisabled", isSignal: true, isRequired: false, transformFunction: null }, expanded: { classPropertyName: "expanded", publicName: "tngTableRowExpanded", isSignal: true, isRequired: false, transformFunction: null }, rowId: { classPropertyName: "rowId", publicName: "tngTableRowId", isSignal: true, isRequired: false, transformFunction: null }, selected: { classPropertyName: "selected", publicName: "tngTableRowSelected", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { rowClick: "rowClick", rowContextMenu: "rowContextMenu" }, host: { listeners: { "click": "onClick($event)", "contextmenu": "onContextMenu($event)" }, properties: { "attr.data-slot": "this.dataSlot", "attr.aria-disabled": "this.ariaDisabledAttr", "attr.aria-selected": "this.ariaSelectedAttr", "attr.data-disabled": "this.dataDisabledAttr", "attr.data-expanded": "this.dataExpandedAttr", "attr.data-row-id": "this.dataRowIdAttr", "attr.data-selected": "this.dataSelectedAttr" } }, exportAs: ["tngTableRow"], ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: TngTableRow, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: 'tr[tngTableRow]',
+                    exportAs: 'tngTableRow',
+                }]
+        }], propDecorators: { disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "tngTableRowDisabled", required: false }] }], expanded: [{ type: i0.Input, args: [{ isSignal: true, alias: "tngTableRowExpanded", required: false }] }], rowId: [{ type: i0.Input, args: [{ isSignal: true, alias: "tngTableRowId", required: false }] }], selected: [{ type: i0.Input, args: [{ isSignal: true, alias: "tngTableRowSelected", required: false }] }], rowClick: [{ type: i0.Output, args: ["rowClick"] }], rowContextMenu: [{ type: i0.Output, args: ["rowContextMenu"] }], dataSlot: [{
+                type: HostBinding,
+                args: ['attr.data-slot']
+            }], ariaDisabledAttr: [{
+                type: HostBinding,
+                args: ['attr.aria-disabled']
+            }], ariaSelectedAttr: [{
+                type: HostBinding,
+                args: ['attr.aria-selected']
+            }], dataDisabledAttr: [{
+                type: HostBinding,
+                args: ['attr.data-disabled']
+            }], dataExpandedAttr: [{
+                type: HostBinding,
+                args: ['attr.data-expanded']
+            }], dataRowIdAttr: [{
+                type: HostBinding,
+                args: ['attr.data-row-id']
+            }], dataSelectedAttr: [{
+                type: HostBinding,
+                args: ['attr.data-selected']
+            }], onClick: [{
+                type: HostListener,
+                args: ['click', ['$event']]
+            }], onContextMenu: [{
+                type: HostListener,
+                args: ['contextmenu', ['$event']]
+            }] } });
+export class TngTableCell {
+    footer = inject(TngTableFooter, {
+        optional: true,
+    });
+    hostRef = inject(ElementRef);
+    row = inject(TngTableRow, {
+        optional: true,
+    });
+    table = inject(forwardRef(() => TngTable));
+    cellClick = output();
+    columnId = input(null, { ...(ngDevMode ? { debugName: "columnId" } : {}), alias: 'tngTableColumnId',
+        transform: normalizeOptionalString });
+    headers = input(null, { ...(ngDevMode ? { debugName: "headers" } : {}), alias: 'tngTableHeaders',
+        transform: normalizeOptionalString });
+    stickyColumn = input(null, { ...(ngDevMode ? { debugName: "stickyColumn" } : {}), alias: 'tngTableStickyColumn',
+        transform: normalizeTableStickySide });
+    stickyOffset = input(null, { ...(ngDevMode ? { debugName: "stickyOffset" } : {}), alias: 'tngTableStickyOffset',
+        transform: normalizeCssLength });
+    truncate = input(false, { ...(ngDevMode ? { debugName: "truncate" } : {}), alias: 'tngTableTruncate',
+        transform: booleanAttribute });
+    dataSlot = 'table-cell';
+    get dataColumnIdAttr() {
+        return this.columnId();
+    }
+    get dataRowIdAttr() {
+        return this.row?.rowId() ?? null;
+    }
+    get headersAttr() {
+        return this.headers();
+    }
+    get dataStickyAttr() {
+        return this.isSectionSticky() || this.getStickySide() !== null ? '' : null;
+    }
+    get dataStickyFooterAttr() {
+        return this.footer?.isSticky() === true ? '' : null;
+    }
+    get dataStickySideAttr() {
+        return this.getStickySide();
+    }
+    get dataTruncateAttr() {
+        return this.truncate() ? '' : null;
+    }
+    get tabIndexAttr() {
+        return this.table.getCellTabIndex(this);
+    }
+    get bottomAttr() {
+        return this.footer?.isSticky() === true ? this.footer.getStickyInset() : null;
+    }
+    get dataFocusedAttr() {
+        return this.table.isCellFocused(this) ? '' : null;
+    }
+    get dataFocusVisibleAttr() {
+        return this.table.isCellFocusVisible(this) ? '' : null;
+    }
+    get leftAttr() {
+        return this.table.getCellStickyInset(this, 'left');
+    }
+    get overflowAttr() {
+        return this.truncate() ? 'hidden' : null;
+    }
+    get positionAttr() {
+        return this.table.getCellStickyPosition(this);
+    }
+    get rightAttr() {
+        return this.table.getCellStickyInset(this, 'right');
+    }
+    get textOverflowAttr() {
+        return this.truncate() ? 'ellipsis' : null;
+    }
+    get whiteSpaceAttr() {
+        return this.truncate() ? 'nowrap' : null;
+    }
+    get zIndexAttr() {
+        return this.table.getCellStickyZIndex(this);
+    }
+    ngOnDestroy() {
+        this.table.onCellDestroy(this);
+    }
+    ngOnInit() {
+        this.table.registerCell(this);
+    }
+    cellKey() {
+        const position = this.getCellPosition();
+        return position === null ? null : createTngTableCellKey(position);
+    }
+    focusHost() {
+        this.hostRef.nativeElement.focus();
+    }
+    getCellPosition() {
+        return resolveTngTableCellPosition(this.hostRef.nativeElement);
+    }
+    getHostElement() {
+        return this.hostRef.nativeElement;
+    }
+    getStickyOffset() {
+        return this.stickyOffset();
+    }
+    getStickySide() {
+        return this.stickyColumn();
+    }
+    isDisabled() {
+        return this.row?.isDisabled() === true;
+    }
+    isFocusVisible() {
+        return isFocusVisibleElement(this.hostRef.nativeElement);
+    }
+    isSectionSticky() {
+        return this.footer?.isSticky() === true;
+    }
+    onClick(event) {
+        if (this.isDisabled()
+            || event.defaultPrevented
+            || hasInteractiveEventTarget(this.hostRef.nativeElement, event.target)) {
+            return;
+        }
+        this.cellClick.emit(Object.freeze({
+            columnId: this.columnId(),
+            originalEvent: event,
+            rowId: this.row?.rowId() ?? null,
+        }));
+    }
+    onFocus() {
+        this.table.onCellFocused(this);
+    }
+    onPointerDown() {
+        this.table.onCellPointerDown(this);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: TngTableCell, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.1.1", type: TngTableCell, isStandalone: true, selector: "td[tngTableCell]", inputs: { columnId: { classPropertyName: "columnId", publicName: "tngTableColumnId", isSignal: true, isRequired: false, transformFunction: null }, headers: { classPropertyName: "headers", publicName: "tngTableHeaders", isSignal: true, isRequired: false, transformFunction: null }, stickyColumn: { classPropertyName: "stickyColumn", publicName: "tngTableStickyColumn", isSignal: true, isRequired: false, transformFunction: null }, stickyOffset: { classPropertyName: "stickyOffset", publicName: "tngTableStickyOffset", isSignal: true, isRequired: false, transformFunction: null }, truncate: { classPropertyName: "truncate", publicName: "tngTableTruncate", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { cellClick: "cellClick" }, host: { listeners: { "click": "onClick($event)", "focus": "onFocus()", "pointerdown": "onPointerDown()" }, properties: { "attr.data-slot": "this.dataSlot", "attr.data-column-id": "this.dataColumnIdAttr", "attr.data-row-id": "this.dataRowIdAttr", "attr.headers": "this.headersAttr", "attr.data-sticky": "this.dataStickyAttr", "attr.data-sticky-footer": "this.dataStickyFooterAttr", "attr.data-sticky-side": "this.dataStickySideAttr", "attr.data-truncate": "this.dataTruncateAttr", "attr.tabindex": "this.tabIndexAttr", "style.bottom": "this.bottomAttr", "attr.data-focused": "this.dataFocusedAttr", "attr.data-focus-visible": "this.dataFocusVisibleAttr", "style.left": "this.leftAttr", "style.overflow": "this.overflowAttr", "style.position": "this.positionAttr", "style.right": "this.rightAttr", "style.text-overflow": "this.textOverflowAttr", "style.white-space": "this.whiteSpaceAttr", "style.z-index": "this.zIndexAttr" } }, exportAs: ["tngTableCell"], ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: TngTableCell, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: 'td[tngTableCell]',
+                    exportAs: 'tngTableCell',
+                }]
+        }], propDecorators: { cellClick: [{ type: i0.Output, args: ["cellClick"] }], columnId: [{ type: i0.Input, args: [{ isSignal: true, alias: "tngTableColumnId", required: false }] }], headers: [{ type: i0.Input, args: [{ isSignal: true, alias: "tngTableHeaders", required: false }] }], stickyColumn: [{ type: i0.Input, args: [{ isSignal: true, alias: "tngTableStickyColumn", required: false }] }], stickyOffset: [{ type: i0.Input, args: [{ isSignal: true, alias: "tngTableStickyOffset", required: false }] }], truncate: [{ type: i0.Input, args: [{ isSignal: true, alias: "tngTableTruncate", required: false }] }], dataSlot: [{
+                type: HostBinding,
+                args: ['attr.data-slot']
+            }], dataColumnIdAttr: [{
+                type: HostBinding,
+                args: ['attr.data-column-id']
+            }], dataRowIdAttr: [{
+                type: HostBinding,
+                args: ['attr.data-row-id']
+            }], headersAttr: [{
+                type: HostBinding,
+                args: ['attr.headers']
+            }], dataStickyAttr: [{
+                type: HostBinding,
+                args: ['attr.data-sticky']
+            }], dataStickyFooterAttr: [{
+                type: HostBinding,
+                args: ['attr.data-sticky-footer']
+            }], dataStickySideAttr: [{
+                type: HostBinding,
+                args: ['attr.data-sticky-side']
+            }], dataTruncateAttr: [{
+                type: HostBinding,
+                args: ['attr.data-truncate']
+            }], tabIndexAttr: [{
+                type: HostBinding,
+                args: ['attr.tabindex']
+            }], bottomAttr: [{
+                type: HostBinding,
+                args: ['style.bottom']
+            }], dataFocusedAttr: [{
+                type: HostBinding,
+                args: ['attr.data-focused']
+            }], dataFocusVisibleAttr: [{
+                type: HostBinding,
+                args: ['attr.data-focus-visible']
+            }], leftAttr: [{
+                type: HostBinding,
+                args: ['style.left']
+            }], overflowAttr: [{
+                type: HostBinding,
+                args: ['style.overflow']
+            }], positionAttr: [{
+                type: HostBinding,
+                args: ['style.position']
+            }], rightAttr: [{
+                type: HostBinding,
+                args: ['style.right']
+            }], textOverflowAttr: [{
+                type: HostBinding,
+                args: ['style.text-overflow']
+            }], whiteSpaceAttr: [{
+                type: HostBinding,
+                args: ['style.white-space']
+            }], zIndexAttr: [{
+                type: HostBinding,
+                args: ['style.z-index']
+            }], onClick: [{
+                type: HostListener,
+                args: ['click', ['$event']]
+            }], onFocus: [{
+                type: HostListener,
+                args: ['focus']
+            }], onPointerDown: [{
+                type: HostListener,
+                args: ['pointerdown']
+            }] } });
+export class TngTableHeaderCell {
+    header = inject(TngTableHeader, {
+        optional: true,
+    });
+    hostRef = inject(ElementRef);
+    table = inject(forwardRef(() => TngTable));
+    columnId = input(null, { ...(ngDevMode ? { debugName: "columnId" } : {}), alias: 'tngTableColumnId',
+        transform: normalizeOptionalString });
+    stickyColumn = input(null, { ...(ngDevMode ? { debugName: "stickyColumn" } : {}), alias: 'tngTableStickyColumn',
+        transform: normalizeTableStickySide });
+    stickyOffset = input(null, { ...(ngDevMode ? { debugName: "stickyOffset" } : {}), alias: 'tngTableStickyOffset',
+        transform: normalizeCssLength });
+    truncate = input(false, { ...(ngDevMode ? { debugName: "truncate" } : {}), alias: 'tngTableTruncate',
+        transform: booleanAttribute });
+    dataSlot = 'table-header-cell';
+    get dataColumnIdAttr() {
+        return this.columnId();
+    }
+    get dataStickyAttr() {
+        return this.isSectionSticky() || this.getStickySide() !== null ? '' : null;
+    }
+    get dataStickyHeaderAttr() {
+        return this.header?.isSticky() === true ? '' : null;
+    }
+    get dataStickySideAttr() {
+        return this.getStickySide();
+    }
+    get dataTruncateAttr() {
+        return this.truncate() ? '' : null;
+    }
+    get tabIndexAttr() {
+        return this.table.getCellTabIndex(this);
+    }
+    get leftAttr() {
+        return this.table.getCellStickyInset(this, 'left');
+    }
+    get overflowAttr() {
+        return this.truncate() ? 'hidden' : null;
+    }
+    get positionAttr() {
+        return this.table.getCellStickyPosition(this);
+    }
+    get rightAttr() {
+        return this.table.getCellStickyInset(this, 'right');
+    }
+    get textOverflowAttr() {
+        return this.truncate() ? 'ellipsis' : null;
+    }
+    get topAttr() {
+        return this.header?.isSticky() === true ? this.header.getStickyInset() : null;
+    }
+    get whiteSpaceAttr() {
+        return this.truncate() ? 'nowrap' : null;
+    }
+    get zIndexAttr() {
+        return this.table.getCellStickyZIndex(this);
+    }
+    get dataFocusedAttr() {
+        return this.table.isCellFocused(this) ? '' : null;
+    }
+    get dataFocusVisibleAttr() {
+        return this.table.isCellFocusVisible(this) ? '' : null;
+    }
+    ngOnDestroy() {
+        this.table.onCellDestroy(this);
+    }
+    ngOnInit() {
+        this.table.registerCell(this);
+    }
+    cellKey() {
+        const position = this.getCellPosition();
+        return position === null ? null : createTngTableCellKey(position);
+    }
+    focusHost() {
+        this.hostRef.nativeElement.focus();
+    }
+    getCellPosition() {
+        return resolveTngTableCellPosition(this.hostRef.nativeElement);
+    }
+    getHostElement() {
+        return this.hostRef.nativeElement;
+    }
+    getStickyOffset() {
+        return this.stickyOffset();
+    }
+    getStickySide() {
+        return this.stickyColumn();
+    }
+    isDisabled() {
+        return false;
+    }
+    isFocusVisible() {
+        return isFocusVisibleElement(this.hostRef.nativeElement);
+    }
+    isSectionSticky() {
+        return this.header?.isSticky() === true;
+    }
+    onFocus() {
+        this.table.onCellFocused(this);
+    }
+    onPointerDown() {
+        this.table.onCellPointerDown(this);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: TngTableHeaderCell, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.1.1", type: TngTableHeaderCell, isStandalone: true, selector: "th[tngTableHeaderCell]", inputs: { columnId: { classPropertyName: "columnId", publicName: "tngTableColumnId", isSignal: true, isRequired: false, transformFunction: null }, stickyColumn: { classPropertyName: "stickyColumn", publicName: "tngTableStickyColumn", isSignal: true, isRequired: false, transformFunction: null }, stickyOffset: { classPropertyName: "stickyOffset", publicName: "tngTableStickyOffset", isSignal: true, isRequired: false, transformFunction: null }, truncate: { classPropertyName: "truncate", publicName: "tngTableTruncate", isSignal: true, isRequired: false, transformFunction: null } }, host: { listeners: { "focus": "onFocus()", "pointerdown": "onPointerDown()" }, properties: { "attr.data-slot": "this.dataSlot", "attr.data-column-id": "this.dataColumnIdAttr", "attr.data-sticky": "this.dataStickyAttr", "attr.data-sticky-header": "this.dataStickyHeaderAttr", "attr.data-sticky-side": "this.dataStickySideAttr", "attr.data-truncate": "this.dataTruncateAttr", "attr.tabindex": "this.tabIndexAttr", "style.left": "this.leftAttr", "style.overflow": "this.overflowAttr", "style.position": "this.positionAttr", "style.right": "this.rightAttr", "style.text-overflow": "this.textOverflowAttr", "style.top": "this.topAttr", "style.white-space": "this.whiteSpaceAttr", "style.z-index": "this.zIndexAttr", "attr.data-focused": "this.dataFocusedAttr", "attr.data-focus-visible": "this.dataFocusVisibleAttr" } }, exportAs: ["tngTableHeaderCell"], ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: TngTableHeaderCell, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: 'th[tngTableHeaderCell]',
+                    exportAs: 'tngTableHeaderCell',
+                }]
+        }], propDecorators: { columnId: [{ type: i0.Input, args: [{ isSignal: true, alias: "tngTableColumnId", required: false }] }], stickyColumn: [{ type: i0.Input, args: [{ isSignal: true, alias: "tngTableStickyColumn", required: false }] }], stickyOffset: [{ type: i0.Input, args: [{ isSignal: true, alias: "tngTableStickyOffset", required: false }] }], truncate: [{ type: i0.Input, args: [{ isSignal: true, alias: "tngTableTruncate", required: false }] }], dataSlot: [{
+                type: HostBinding,
+                args: ['attr.data-slot']
+            }], dataColumnIdAttr: [{
+                type: HostBinding,
+                args: ['attr.data-column-id']
+            }], dataStickyAttr: [{
+                type: HostBinding,
+                args: ['attr.data-sticky']
+            }], dataStickyHeaderAttr: [{
+                type: HostBinding,
+                args: ['attr.data-sticky-header']
+            }], dataStickySideAttr: [{
+                type: HostBinding,
+                args: ['attr.data-sticky-side']
+            }], dataTruncateAttr: [{
+                type: HostBinding,
+                args: ['attr.data-truncate']
+            }], tabIndexAttr: [{
+                type: HostBinding,
+                args: ['attr.tabindex']
+            }], leftAttr: [{
+                type: HostBinding,
+                args: ['style.left']
+            }], overflowAttr: [{
+                type: HostBinding,
+                args: ['style.overflow']
+            }], positionAttr: [{
+                type: HostBinding,
+                args: ['style.position']
+            }], rightAttr: [{
+                type: HostBinding,
+                args: ['style.right']
+            }], textOverflowAttr: [{
+                type: HostBinding,
+                args: ['style.text-overflow']
+            }], topAttr: [{
+                type: HostBinding,
+                args: ['style.top']
+            }], whiteSpaceAttr: [{
+                type: HostBinding,
+                args: ['style.white-space']
+            }], zIndexAttr: [{
+                type: HostBinding,
+                args: ['style.z-index']
+            }], dataFocusedAttr: [{
+                type: HostBinding,
+                args: ['attr.data-focused']
+            }], dataFocusVisibleAttr: [{
+                type: HostBinding,
+                args: ['attr.data-focus-visible']
+            }], onFocus: [{
+                type: HostListener,
+                args: ['focus']
+            }], onPointerDown: [{
+                type: HostListener,
+                args: ['pointerdown']
+            }] } });
+export class TngTableEmpty {
+    dataSlot = 'table-empty';
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: TngTableEmpty, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.1.1", type: TngTableEmpty, isStandalone: true, selector: "[tngTableEmpty]", host: { properties: { "attr.data-slot": "this.dataSlot" } }, exportAs: ["tngTableEmpty"], ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: TngTableEmpty, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[tngTableEmpty]',
+                    exportAs: 'tngTableEmpty',
+                }]
+        }], propDecorators: { dataSlot: [{
+                type: HostBinding,
+                args: ['attr.data-slot']
+            }] } });
+export class TngTableLoading {
+    dataSlot = 'table-loading';
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: TngTableLoading, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.1.1", type: TngTableLoading, isStandalone: true, selector: "[tngTableLoading]", host: { properties: { "attr.data-slot": "this.dataSlot" } }, exportAs: ["tngTableLoading"], ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: TngTableLoading, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[tngTableLoading]',
+                    exportAs: 'tngTableLoading',
+                }]
+        }], propDecorators: { dataSlot: [{
+                type: HostBinding,
+                args: ['attr.data-slot']
+            }] } });
+export class TngTableError {
+    dataSlot = 'table-error';
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: TngTableError, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.1.1", type: TngTableError, isStandalone: true, selector: "[tngTableError]", host: { properties: { "attr.data-slot": "this.dataSlot" } }, exportAs: ["tngTableError"], ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: TngTableError, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[tngTableError]',
+                    exportAs: 'tngTableError',
+                }]
+        }], propDecorators: { dataSlot: [{
+                type: HostBinding,
+                args: ['attr.data-slot']
+            }] } });
+export class TngTableToolbar {
+    dataSlot = 'table-toolbar';
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: TngTableToolbar, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.1.1", type: TngTableToolbar, isStandalone: true, selector: "[tngTableToolbar]", host: { properties: { "attr.data-slot": "this.dataSlot" } }, exportAs: ["tngTableToolbar"], ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: TngTableToolbar, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[tngTableToolbar]',
+                    exportAs: 'tngTableToolbar',
+                }]
+        }], propDecorators: { dataSlot: [{
+                type: HostBinding,
+                args: ['attr.data-slot']
+            }] } });
+export class TngTablePagination {
+    dataSlot = 'table-pagination';
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: TngTablePagination, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.1.1", type: TngTablePagination, isStandalone: true, selector: "[tngTablePagination]", host: { properties: { "attr.data-slot": "this.dataSlot" } }, exportAs: ["tngTablePagination"], ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: TngTablePagination, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[tngTablePagination]',
+                    exportAs: 'tngTablePagination',
+                }]
+        }], propDecorators: { dataSlot: [{
+                type: HostBinding,
+                args: ['attr.data-slot']
+            }] } });
+export class TngTableRowExpander {
+    expansion = inject(forwardRef(() => TngTableExpansion), {
+        optional: true,
+    });
+    hostRef = inject(ElementRef);
+    rowId = input.required({ ...(ngDevMode ? { debugName: "rowId" } : {}), alias: 'tngTableRowExpander' });
+    get ariaExpandedAttr() {
+        if (this.expansion === null) {
+            return null;
+        }
+        return this.expansion.isExpanded(this.rowId()) ? 'true' : 'false';
+    }
+    get dataExpandedAttr() {
+        return this.expansion?.isExpanded(this.rowId()) ? '' : null;
+    }
+    dataSlot = 'table-row-expander';
+    onClick() {
+        this.toggle('pointer');
+    }
+    onKeydown(event) {
+        if (this.isNativeButton()) {
+            return;
+        }
+        if (event.key !== 'Enter' && event.key !== ' ') {
+            return;
+        }
+        event.preventDefault();
+        this.toggle('keyboard');
+    }
+    isNativeButton() {
+        return this.hostRef.nativeElement.tagName === 'BUTTON';
+    }
+    toggle(trigger) {
+        this.expansion?.toggle(this.rowId(), trigger);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: TngTableRowExpander, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.1.1", type: TngTableRowExpander, isStandalone: true, selector: "[tngTableRowExpander]", inputs: { rowId: { classPropertyName: "rowId", publicName: "tngTableRowExpander", isSignal: true, isRequired: true, transformFunction: null } }, host: { listeners: { "click": "onClick()", "keydown": "onKeydown($event)" }, properties: { "attr.aria-expanded": "this.ariaExpandedAttr", "attr.data-expanded": "this.dataExpandedAttr", "attr.data-slot": "this.dataSlot" } }, exportAs: ["tngTableRowExpander"], ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: TngTableRowExpander, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[tngTableRowExpander]',
+                    exportAs: 'tngTableRowExpander',
+                }]
+        }], propDecorators: { rowId: [{ type: i0.Input, args: [{ isSignal: true, alias: "tngTableRowExpander", required: true }] }], ariaExpandedAttr: [{
+                type: HostBinding,
+                args: ['attr.aria-expanded']
+            }], dataExpandedAttr: [{
+                type: HostBinding,
+                args: ['attr.data-expanded']
+            }], dataSlot: [{
+                type: HostBinding,
+                args: ['attr.data-slot']
+            }], onClick: [{
+                type: HostListener,
+                args: ['click']
+            }], onKeydown: [{
+                type: HostListener,
+                args: ['keydown', ['$event']]
+            }] } });
+export class TngTable {
+    hostRef = inject(ElementRef);
+    headerSlots = contentChildren(TngTableHeader, ...(ngDevMode ? [{ debugName: "headerSlots" }] : []));
+    footerSlots = contentChildren(TngTableFooter, ...(ngDevMode ? [{ debugName: "footerSlots" }] : []));
+    cells = new Set();
+    activeCell = null;
+    domFocusedCell = null;
+    focusVisibleCell = null;
+    pendingFocusTrigger = null;
+    restoreFocusElement = null;
+    shouldRestoreFocusOnDestroy = false;
+    items = input(undefined, ...(ngDevMode ? [{ debugName: "items" }] : []));
+    error = input(false, { ...(ngDevMode ? { debugName: "error" } : {}), transform: booleanAttribute });
+    filterable = input(false, { ...(ngDevMode ? { debugName: "filterable" } : {}), transform: booleanAttribute });
+    layout = input('auto', { ...(ngDevMode ? { debugName: "layout" } : {}), alias: 'tngTableLayout',
+        transform: normalizeTableLayoutMode });
+    loading = input(false, { ...(ngDevMode ? { debugName: "loading" } : {}), transform: booleanAttribute });
+    pageable = input(false, { ...(ngDevMode ? { debugName: "pageable" } : {}), transform: booleanAttribute });
+    rowId = input(null, ...(ngDevMode ? [{ debugName: "rowId" }] : []));
+    dir = input(null, { ...(ngDevMode ? { debugName: "dir" } : {}), transform: normalizeTableDirection });
+    ariaLabelValue = null;
+    ariaLabelledbyValue = null;
+    set ariaLabel(value) {
+        this.ariaLabelValue = normalizeOptionalString(value);
+    }
+    set ariaLabelledby(value) {
+        this.ariaLabelledbyValue = normalizeOptionalString(value);
+    }
+    dataSlot = 'table';
+    get ariaLabelAttr() {
+        return this.ariaLabelValue;
+    }
+    get ariaLabelledbyAttr() {
+        return this.ariaLabelledbyValue;
+    }
+    get dataEmptyAttr() {
+        return resolveTngTableEmptyState(this.items(), this.loading()) ? '' : null;
+    }
+    get dataErrorAttr() {
+        return this.error() ? '' : null;
+    }
+    get dataFilterableAttr() {
+        return this.filterable() ? '' : null;
+    }
+    get dataHasFooterAttr() {
+        return this.footerSlots().length > 0 ? '' : null;
+    }
+    get dataHasHeaderAttr() {
+        return this.headerSlots().length > 0 ? '' : null;
+    }
+    get dataLayoutAttr() {
+        return this.layout();
+    }
+    get dataLoadingAttr() {
+        return this.loading() ? '' : null;
+    }
+    get dataPageableAttr() {
+        return this.pageable() ? '' : null;
+    }
+    get dirAttr() {
+        return this.dir();
+    }
+    get tableLayoutAttr() {
+        return this.layout();
+    }
+    ngOnDestroy() {
+        const activeElement = this.hostRef.nativeElement.ownerDocument.activeElement;
+        const restoreFocusElement = this.getRestoreFocusElement();
+        const shouldRestoreFocus = restoreFocusElement !== null
+            && (this.shouldRestoreFocusOnDestroy
+                || this.domFocusedCell !== null
+                || isInsideContainer(this.hostRef.nativeElement, activeElement));
+        if (shouldRestoreFocus) {
+            restoreFocusElement.focus();
+            queueMicrotask(() => {
+                if (restoreFocusElement.isConnected) {
+                    restoreFocusElement.focus();
+                }
+            });
+        }
+        this.cells.clear();
+        this.activeCell = null;
+        this.domFocusedCell = null;
+        this.focusVisibleCell = null;
+        this.pendingFocusTrigger = null;
+        this.restoreFocusElement = null;
+        this.shouldRestoreFocusOnDestroy = false;
+    }
+    getCellTabIndex(cell) {
+        if (this.isCellDisabled(cell)) {
+            return '-1';
+        }
+        return this.getActiveCell() === cell ? '0' : '-1';
+    }
+    isCellFocusVisible(cell) {
+        return this.focusVisibleCell === cell;
+    }
+    isCellFocused(cell) {
+        return this.domFocusedCell === cell;
+    }
+    getCellStickyInset(cell, physicalSide) {
+        const stickySide = cell.getStickySide();
+        if (stickySide === null || resolveStickyPhysicalSide(stickySide, this.dir()) !== physicalSide) {
+            return null;
+        }
+        return cell.getStickyOffset() ?? '0px';
+    }
+    getCellStickyPosition(cell) {
+        return cell.isSectionSticky() || cell.getStickySide() !== null ? 'sticky' : null;
+    }
+    getCellStickyZIndex(cell) {
+        if (cell.isSectionSticky() && cell.getStickySide() !== null) {
+            return '4';
+        }
+        if (cell.isSectionSticky()) {
+            return '3';
+        }
+        return cell.getStickySide() !== null ? '2' : null;
+    }
+    onCellFocused(cell) {
+        if (this.isCellDisabled(cell)) {
+            return;
+        }
+        const trigger = this.pendingFocusTrigger ?? 'programmatic';
+        this.pendingFocusTrigger = null;
+        this.activeCell = cell;
+        this.domFocusedCell = cell;
+        this.focusVisibleCell =
+            trigger === 'keyboard' || cell.isFocusVisible()
+                ? cell
+                : null;
+    }
+    onCellDestroy(cell) {
+        if (this.domFocusedCell === cell
+            || this.hostRef.nativeElement.ownerDocument.activeElement === cell.getHostElement()) {
+            this.shouldRestoreFocusOnDestroy = true;
+        }
+        this.unregisterCell(cell);
+    }
+    onCellPointerDown(cell) {
+        if (this.isCellDisabled(cell)) {
+            return;
+        }
+        this.pendingFocusTrigger = 'pointer';
+        this.focusVisibleCell = null;
+    }
+    registerCell(cell) {
+        this.cells.add(cell);
+        this.ensureFallbackActiveCell();
+    }
+    unregisterCell(cell) {
+        this.cells.delete(cell);
+        if (this.activeCell === cell) {
+            this.activeCell = null;
+        }
+        if (this.domFocusedCell === cell) {
+            this.domFocusedCell = null;
+        }
+        if (this.focusVisibleCell === cell) {
+            this.focusVisibleCell = null;
+        }
+        this.ensureFallbackActiveCell();
+    }
+    onFocusIn(event) {
+        if (isInsideContainer(this.hostRef.nativeElement, event.relatedTarget)) {
+            return;
+        }
+        if (event.relatedTarget instanceof HTMLElement) {
+            this.restoreFocusElement = event.relatedTarget;
+        }
+    }
+    onFocusOut(event) {
+        if (isInsideContainer(this.hostRef.nativeElement, event.relatedTarget)) {
+            return;
+        }
+        this.domFocusedCell = null;
+        this.focusVisibleCell = null;
+        this.pendingFocusTrigger = null;
+    }
+    onKeyDown(event) {
+        const activeCell = this.getKeydownActiveCell(event);
+        if (activeCell === null) {
+            return;
+        }
+        if (this.handleEscapeKey(event)) {
+            return;
+        }
+        if (this.handlePageNavigation(event, activeCell)) {
+            return;
+        }
+        const action = resolveGridNavigationKeyAction(event, {
+            direction: this.dir() ?? 'ltr',
+        });
+        if (action === null || !isMovementActionType(action.type)) {
+            return;
+        }
+        if (action.preventDefault) {
+            event.preventDefault();
+        }
+        this.moveFocus(activeCell, action.type);
+    }
+    ensureFallbackActiveCell() {
+        if (this.activeCell !== null && this.cells.has(this.activeCell) && !this.isCellDisabled(this.activeCell)) {
+            return;
+        }
+        this.activeCell = this.getFirstEnabledCell();
+    }
+    findCellByPosition(position) {
+        for (const cell of this.cells) {
+            const candidate = cell.getCellPosition();
+            if (candidate?.row === position.row && candidate.col === position.col) {
+                return cell;
+            }
+        }
+        return null;
+    }
+    focusCell(cell, trigger) {
+        this.activeCell = cell;
+        this.pendingFocusTrigger = trigger;
+        if (trigger === 'keyboard') {
+            this.focusVisibleCell = cell;
+        }
+        cell.focusHost();
+    }
+    getActiveCell() {
+        this.ensureFallbackActiveCell();
+        return this.activeCell;
+    }
+    getBoundaryCell(cells, direction) {
+        return direction === 'forward'
+            ? cells[cells.length - 1] ?? null
+            : cells[0] ?? null;
+    }
+    getComputedBounds() {
+        let maxCol = 0;
+        let maxRow = 0;
+        for (const cell of this.cells) {
+            const position = cell.getCellPosition();
+            if (position === null) {
+                continue;
+            }
+            maxCol = Math.max(maxCol, position.col);
+            maxRow = Math.max(maxRow, position.row);
+        }
+        return Object.freeze({
+            colCount: maxCol + 1,
+            rowCount: maxRow + 1,
+        });
+    }
+    getEnabledCells() {
+        return [...this.cells]
+            .filter((cell) => !this.isCellDisabled(cell) && cell.getCellPosition() !== null)
+            .sort((a, b) => {
+            const aPosition = a.getCellPosition();
+            const bPosition = b.getCellPosition();
+            if (aPosition === null && bPosition === null) {
+                return 0;
+            }
+            if (aPosition === null) {
+                return 1;
+            }
+            if (bPosition === null) {
+                return -1;
+            }
+            return compareTngTableCellPositions(aPosition, bPosition);
+        });
+    }
+    getFirstEnabledCell() {
+        return this.getEnabledCells()[0] ?? null;
+    }
+    getNavigableCells() {
+        const navigableCells = [];
+        for (const cell of this.cells) {
+            const position = cell.getCellPosition();
+            if (position === null) {
+                continue;
+            }
+            navigableCells.push({
+                col: position.col,
+                disabled: this.isCellDisabled(cell),
+                row: position.row,
+            });
+        }
+        return navigableCells;
+    }
+    getKeydownActiveCell(event) {
+        const activeCell = this.getActiveCell();
+        if (activeCell === null || this.isCellDisabled(activeCell)) {
+            return null;
+        }
+        return event.target === activeCell.getHostElement() ? activeCell : null;
+    }
+    getRestoreFocusElement() {
+        if (!this.restoreFocusElement?.isConnected) {
+            return null;
+        }
+        return this.hostRef.nativeElement.contains(this.restoreFocusElement)
+            ? null
+            : this.restoreFocusElement;
+    }
+    handleEscapeKey(event) {
+        if (event.key !== 'Escape' || hasTableKeyboardModifiers(event)) {
+            return false;
+        }
+        event.preventDefault();
+        const restoreFocusElement = this.getRestoreFocusElement();
+        if (restoreFocusElement !== null) {
+            this.pendingFocusTrigger = 'programmatic';
+            restoreFocusElement.focus();
+            return true;
+        }
+        const activeElement = this.hostRef.nativeElement.ownerDocument.activeElement;
+        if (activeElement instanceof HTMLElement) {
+            activeElement.blur();
+        }
+        return true;
+    }
+    handlePageNavigation(event, activeCell) {
+        const direction = resolveTngTablePageDirection(event.key);
+        if (direction === null || hasTableKeyboardModifiers(event)) {
+            return false;
+        }
+        const currentPosition = activeCell.getCellPosition();
+        const enabledCells = this.getEnabledCells();
+        if (currentPosition === null || enabledCells.length === 0) {
+            return true;
+        }
+        event.preventDefault();
+        const sameColumnCells = enabledCells.filter((cell) => {
+            const position = cell.getCellPosition();
+            return position !== null && position.col === currentPosition.col;
+        });
+        const targetCell = this.getBoundaryCell(sameColumnCells, direction)
+            ?? this.getBoundaryCell(enabledCells, direction);
+        if (targetCell !== null) {
+            this.focusCell(targetCell, 'keyboard');
+        }
+        return true;
+    }
+    isCellDisabled(cell) {
+        return cell.isDisabled();
+    }
+    moveFocus(activeCell, actionType) {
+        const currentPosition = activeCell.getCellPosition();
+        if (currentPosition === null) {
+            return;
+        }
+        const nextPosition = resolveNavigableGridCell(currentPosition, actionType, {
+            bounds: this.getComputedBounds(),
+            cells: this.getNavigableCells(),
+        });
+        if (nextPosition === null) {
+            return;
+        }
+        const nextCell = this.findCellByPosition(nextPosition);
+        if (nextCell === null || this.isCellDisabled(nextCell)) {
+            return;
+        }
+        this.focusCell(nextCell, 'keyboard');
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: TngTable, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.2.0", version: "21.1.1", type: TngTable, isStandalone: true, selector: "table[tngTable]", inputs: { items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: false, transformFunction: null }, error: { classPropertyName: "error", publicName: "error", isSignal: true, isRequired: false, transformFunction: null }, filterable: { classPropertyName: "filterable", publicName: "filterable", isSignal: true, isRequired: false, transformFunction: null }, layout: { classPropertyName: "layout", publicName: "tngTableLayout", isSignal: true, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, pageable: { classPropertyName: "pageable", publicName: "pageable", isSignal: true, isRequired: false, transformFunction: null }, rowId: { classPropertyName: "rowId", publicName: "rowId", isSignal: true, isRequired: false, transformFunction: null }, dir: { classPropertyName: "dir", publicName: "dir", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: false, isRequired: false, transformFunction: null }, ariaLabelledby: { classPropertyName: "ariaLabelledby", publicName: "ariaLabelledby", isSignal: false, isRequired: false, transformFunction: null } }, host: { listeners: { "focusin": "onFocusIn($event)", "focusout": "onFocusOut($event)", "keydown": "onKeyDown($event)" }, properties: { "attr.data-slot": "this.dataSlot", "attr.aria-label": "this.ariaLabelAttr", "attr.aria-labelledby": "this.ariaLabelledbyAttr", "attr.data-empty": "this.dataEmptyAttr", "attr.data-error": "this.dataErrorAttr", "attr.data-filterable": "this.dataFilterableAttr", "attr.data-has-footer": "this.dataHasFooterAttr", "attr.data-has-header": "this.dataHasHeaderAttr", "attr.data-layout": "this.dataLayoutAttr", "attr.data-loading": "this.dataLoadingAttr", "attr.data-pageable": "this.dataPageableAttr", "attr.dir": "this.dirAttr", "style.table-layout": "this.tableLayoutAttr" } }, queries: [{ propertyName: "headerSlots", predicate: TngTableHeader, isSignal: true }, { propertyName: "footerSlots", predicate: TngTableFooter, isSignal: true }], exportAs: ["tngTable"], ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: TngTable, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: 'table[tngTable]',
+                    exportAs: 'tngTable',
+                }]
+        }], propDecorators: { headerSlots: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => TngTableHeader), { isSignal: true }] }], footerSlots: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => TngTableFooter), { isSignal: true }] }], items: [{ type: i0.Input, args: [{ isSignal: true, alias: "items", required: false }] }], error: [{ type: i0.Input, args: [{ isSignal: true, alias: "error", required: false }] }], filterable: [{ type: i0.Input, args: [{ isSignal: true, alias: "filterable", required: false }] }], layout: [{ type: i0.Input, args: [{ isSignal: true, alias: "tngTableLayout", required: false }] }], loading: [{ type: i0.Input, args: [{ isSignal: true, alias: "loading", required: false }] }], pageable: [{ type: i0.Input, args: [{ isSignal: true, alias: "pageable", required: false }] }], rowId: [{ type: i0.Input, args: [{ isSignal: true, alias: "rowId", required: false }] }], dir: [{ type: i0.Input, args: [{ isSignal: true, alias: "dir", required: false }] }], ariaLabel: [{
+                type: Input
+            }], ariaLabelledby: [{
+                type: Input
+            }], dataSlot: [{
+                type: HostBinding,
+                args: ['attr.data-slot']
+            }], ariaLabelAttr: [{
+                type: HostBinding,
+                args: ['attr.aria-label']
+            }], ariaLabelledbyAttr: [{
+                type: HostBinding,
+                args: ['attr.aria-labelledby']
+            }], dataEmptyAttr: [{
+                type: HostBinding,
+                args: ['attr.data-empty']
+            }], dataErrorAttr: [{
+                type: HostBinding,
+                args: ['attr.data-error']
+            }], dataFilterableAttr: [{
+                type: HostBinding,
+                args: ['attr.data-filterable']
+            }], dataHasFooterAttr: [{
+                type: HostBinding,
+                args: ['attr.data-has-footer']
+            }], dataHasHeaderAttr: [{
+                type: HostBinding,
+                args: ['attr.data-has-header']
+            }], dataLayoutAttr: [{
+                type: HostBinding,
+                args: ['attr.data-layout']
+            }], dataLoadingAttr: [{
+                type: HostBinding,
+                args: ['attr.data-loading']
+            }], dataPageableAttr: [{
+                type: HostBinding,
+                args: ['attr.data-pageable']
+            }], dirAttr: [{
+                type: HostBinding,
+                args: ['attr.dir']
+            }], tableLayoutAttr: [{
+                type: HostBinding,
+                args: ['style.table-layout']
+            }], onFocusIn: [{
+                type: HostListener,
+                args: ['focusin', ['$event']]
+            }], onFocusOut: [{
+                type: HostListener,
+                args: ['focusout', ['$event']]
+            }], onKeyDown: [{
+                type: HostListener,
+                args: ['keydown', ['$event']]
+            }] } });
+//# sourceMappingURL=tng-table.js.map