@tociva/tailng-ui 0.12.0 → 0.13.0

package/fesm2022/tociva-tailng-ui-data-table-structure.mjs

@@ -1,22 +1,807 @@
-"use strict";
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    var desc = Object.getOwnPropertyDescriptor(m, k);
-    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
-      desc = { enumerable: true, get: function() { return m[k]; } };
-    }
-    Object.defineProperty(o, k2, desc);
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __exportStar = (this && this.__exportStar) || function(m, exports$1) {
-    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports$1, p)) __createBinding(exports$1, m, p);
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-__exportStar(require("./lib"), exports);
+import { NgTemplateOutlet, NgStyle } from '@angular/common';
+import * as i0 from '@angular/core';
+import { InjectionToken, Directive, input, inject, effect, ContentChild, Component, signal, EventEmitter, computed, Output, ContentChildren, HostListener, HostBinding, ElementRef } from '@angular/core';
+import { TngOverlayRef, TngConnectedOverlay, TngOverlayPanel } from '@tociva/tailng-ui/popups-overlays';
+
+const TNG_TABLE = new InjectionToken('TNG_TABLE');
+
+class TngCellDef {
+    tpl;
+    constructor(tpl) {
+        this.tpl = tpl;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: TngCellDef, deps: [{ token: i0.TemplateRef }], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.0.6", type: TngCellDef, isStandalone: true, selector: "ng-template[tngCell]", ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: TngCellDef, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: 'ng-template[tngCell]',
+                    standalone: true,
+                }]
+        }], ctorParameters: () => [{ type: i0.TemplateRef }] });
+
+class TngHeaderDef {
+    tpl;
+    constructor(tpl) {
+        this.tpl = tpl;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: TngHeaderDef, deps: [{ token: i0.TemplateRef }], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.0.6", type: TngHeaderDef, isStandalone: true, selector: "ng-template[tngHeader]", ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: TngHeaderDef, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: 'ng-template[tngHeader]',
+                    standalone: true,
+                }]
+        }], ctorParameters: () => [{ type: i0.TemplateRef }] });
+
+class TngCol {
+    /** unique column id */
+    id = input.required(...(ngDevMode ? [{ debugName: "id" }] : []));
+    /** header label (fallback when no tngHeader template is provided) */
+    header = input('', ...(ngDevMode ? [{ debugName: "header" }] : []));
+    /** optional value resolver */
+    value = input(null, ...(ngDevMode ? [{ debugName: "value" }] : []));
+    /** width (e.g. '120px', '10rem', '20%') */
+    width = input(null, ...(ngDevMode ? [{ debugName: "width" }] : []));
+    /** alignment */
+    align = input('left', ...(ngDevMode ? [{ debugName: "align" }] : []));
+    /** extra CSS classes applied to th/td */
+    klass = input(null, ...(ngDevMode ? [{ debugName: "klass" }] : []));
+    /** default filter meta (used by tng-filter-panel) */
+    filter = input(null, ...(ngDevMode ? [{ debugName: "filter" }] : []));
+    table = inject(TNG_TABLE);
+    // Projected templates
+    cellDef;
+    headerDef;
+    constructor() {
+        // Register column meta for default filter panel + any future features
+        effect((onCleanup) => {
+            const id = this.id();
+            this.table.registerColumn({
+                id,
+                label: this.resolveHeader(),
+                filter: this.filter() ?? undefined,
+            });
+            onCleanup(() => this.table.unregisterColumn(id));
+        });
+    }
+    resolveHeader() {
+        return this.header() || this.id();
+    }
+    resolveValue(row) {
+        const valueFn = this.value();
+        return valueFn ? valueFn(row) : row?.[this.id()];
+    }
+    resolveCellTpl() {
+        return this.cellDef?.tpl;
+    }
+    resolveHeaderTpl() {
+        return this.headerDef?.tpl;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: TngCol, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.0.6", type: TngCol, isStandalone: true, selector: "tng-col", inputs: { id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: true, transformFunction: null }, header: { classPropertyName: "header", publicName: "header", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, width: { classPropertyName: "width", publicName: "width", isSignal: true, isRequired: false, transformFunction: null }, align: { classPropertyName: "align", publicName: "align", isSignal: true, isRequired: false, transformFunction: null }, klass: { classPropertyName: "klass", publicName: "klass", isSignal: true, isRequired: false, transformFunction: null }, filter: { classPropertyName: "filter", publicName: "filter", isSignal: true, isRequired: false, transformFunction: null } }, queries: [{ propertyName: "cellDef", first: true, predicate: TngCellDef, descendants: true }, { propertyName: "headerDef", first: true, predicate: TngHeaderDef, descendants: true }], ngImport: i0, template: '', isInline: true });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: TngCol, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'tng-col',
+                    standalone: true,
+                    template: '',
+                }]
+        }], ctorParameters: () => [], propDecorators: { id: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: true }] }], header: [{ type: i0.Input, args: [{ isSignal: true, alias: "header", required: false }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }], width: [{ type: i0.Input, args: [{ isSignal: true, alias: "width", required: false }] }], align: [{ type: i0.Input, args: [{ isSignal: true, alias: "align", required: false }] }], klass: [{ type: i0.Input, args: [{ isSignal: true, alias: "klass", required: false }] }], filter: [{ type: i0.Input, args: [{ isSignal: true, alias: "filter", required: false }] }], cellDef: [{
+                type: ContentChild,
+                args: [TngCellDef]
+            }], headerDef: [{
+                type: ContentChild,
+                args: [TngHeaderDef]
+            }] } });
+
+// core/features/sort.feature.ts
+class TngTableSortFeature {
+    sort = signal({ active: '', direction: '' }, ...(ngDevMode ? [{ debugName: "sort" }] : []));
+    toggleSort(active) {
+        const cur = this.sort();
+        const same = cur.active === active;
+        const nextDir = !same ? 'asc' : cur.direction === 'asc' ? 'desc' : cur.direction === 'desc' ? '' : 'asc';
+        this.sort.set({
+            active: nextDir ? active : '',
+            direction: nextDir,
+        });
+    }
+    setSort(sort) {
+        this.sort.set(sort);
+    }
+    clearSort() {
+        this.sort.set({ active: '', direction: '' });
+    }
+    directionFor(colId) {
+        const s = this.sort();
+        return s.active === colId ? s.direction : '';
+    }
+    isSorted(colId) {
+        return this.directionFor(colId) !== '';
+    }
+}
+
+class TngSortController {
+    featureId = 'sort';
+    feature = new TngTableSortFeature();
+    sort = this.feature.sort;
+    toggleSort(active) {
+        this.feature.toggleSort(active);
+    }
+    setSort(sort) {
+        this.feature.setSort(sort);
+    }
+    clearSort() {
+        this.feature.clearSort();
+    }
+    directionFor(colId) {
+        return this.feature.directionFor(colId);
+    }
+    isSorted(colId) {
+        return this.feature.isSorted(colId);
+    }
+}
+
+class TngTableFilterFeature {
+    filters = signal({}, ...(ngDevMode ? [{ debugName: "filters" }] : []));
+    /** Active filter UI column id ('' means closed) */
+    openFilterColId = signal('', ...(ngDevMode ? [{ debugName: "openFilterColId" }] : []));
+    /** Anchor element for positioning the overlay */
+    anchorEl = signal(null, ...(ngDevMode ? [{ debugName: "anchorEl" }] : []));
+    openFilter(colId, anchorEl) {
+        this.openFilterColId.set(colId);
+        this.anchorEl.set(anchorEl ?? null);
+    }
+    closeFilter() {
+        this.openFilterColId.set('');
+        this.anchorEl.set(null);
+    }
+    toggleFilter(colId, anchorEl) {
+        if (this.openFilterColId() === colId) {
+            this.closeFilter();
+            return;
+        }
+        this.openFilter(colId, anchorEl);
+    }
+    isFilterOpenFor(colId) {
+        return this.openFilterColId() === colId;
+    }
+    setFilter(colId, value) {
+        this.filters.update((cur) => ({ ...cur, [colId]: value }));
+    }
+    clearFilter(colId) {
+        this.filters.update((cur) => {
+            if (!(colId in cur))
+                return cur;
+            const next = { ...cur };
+            delete next[colId];
+            return next;
+        });
+        if (this.openFilterColId() === colId)
+            this.closeFilter();
+    }
+    clearAllFilters() {
+        this.filters.set({});
+        this.closeFilter();
+    }
+    filterValueFor(colId) {
+        return this.filters()[colId];
+    }
+    isFiltered(colId) {
+        return colId in this.filters();
+    }
+}
+
+class TngFilterController {
+    featureId = 'filter';
+    feature = new TngTableFilterFeature();
+    filters = this.feature.filters;
+    openFilterColId = this.feature.openFilterColId;
+    filterAnchorEl = this.feature.anchorEl;
+    _filterPanelKlass = signal('', ...(ngDevMode ? [{ debugName: "_filterPanelKlass" }] : []));
+    setFilterPanelKlass(v) {
+        this._filterPanelKlass.set(v);
+    }
+    filterPanelKlass() {
+        return this._filterPanelKlass();
+    }
+    openFilter(colId, anchorEl) {
+        this.feature.openFilter(colId, anchorEl);
+    }
+    closeFilter() {
+        this.feature.closeFilter();
+    }
+    toggleFilter(colId, anchorEl) {
+        this.feature.toggleFilter(colId, anchorEl);
+    }
+    isFilterOpenFor(colId) {
+        return this.feature.isFilterOpenFor(colId);
+    }
+    setFilter(colId, value) {
+        this.feature.setFilter(colId, value);
+    }
+    clearFilter(colId) {
+        this.feature.clearFilter(colId);
+    }
+    clearAllFilters() {
+        this.feature.clearAllFilters();
+    }
+    filterValueFor(colId) {
+        return this.feature.filterValueFor(colId);
+    }
+    isFiltered(colId) {
+        return this.feature.isFiltered(colId);
+    }
+    setFilters(filters) {
+        this.filters.set(filters);
+    }
+}
+
+class TngColumnMetaController {
+    featureId = 'column-meta';
+    colMeta = signal({}, ...(ngDevMode ? [{ debugName: "colMeta" }] : []));
+    registerColumn(meta) {
+        this.colMeta.update((cur) => ({ ...cur, [meta.id]: meta }));
+    }
+    unregisterColumn(colId) {
+        this.colMeta.update((cur) => {
+            if (!(colId in cur))
+                return cur;
+            const next = { ...cur };
+            delete next[colId];
+            return next;
+        });
+    }
+    metaFor(colId) {
+        return this.colMeta()[colId];
+    }
+}
+
+class TngTableController {
+    _featureId = 'table';
+    // Keep references to run lifecycle hooks if you need them later
+    features = [];
+    sortCtrl = new TngSortController();
+    filterCtrl = new TngFilterController();
+    colMetaCtrl = new TngColumnMetaController();
+    constructor() {
+        this.features = [this.sortCtrl, this.filterCtrl, this.colMetaCtrl];
+        this.features.forEach((f) => f.onInit?.());
+    }
+    destroy() {
+        this.features.forEach((f) => f.onDestroy?.());
+    }
+    // Optional: re-expose a flat API (so existing code doesn't change)
+    sort = this.sortCtrl.sort;
+    toggleSort = this.sortCtrl.toggleSort.bind(this.sortCtrl);
+    setSort = this.sortCtrl.setSort.bind(this.sortCtrl);
+    clearSort = this.sortCtrl.clearSort.bind(this.sortCtrl);
+    directionFor = this.sortCtrl.directionFor.bind(this.sortCtrl);
+    isSorted = this.sortCtrl.isSorted.bind(this.sortCtrl);
+    filters = this.filterCtrl.filters;
+    openFilterColId = this.filterCtrl.openFilterColId;
+    filterAnchorEl = this.filterCtrl.filterAnchorEl;
+    setFilterPanelKlass = this.filterCtrl.setFilterPanelKlass.bind(this.filterCtrl);
+    filterPanelKlass = this.filterCtrl.filterPanelKlass.bind(this.filterCtrl);
+    openFilter = this.filterCtrl.openFilter.bind(this.filterCtrl);
+    closeFilter = this.filterCtrl.closeFilter.bind(this.filterCtrl);
+    toggleFilter = this.filterCtrl.toggleFilter.bind(this.filterCtrl);
+    isFilterOpenFor = this.filterCtrl.isFilterOpenFor.bind(this.filterCtrl);
+    setFilter = this.filterCtrl.setFilter.bind(this.filterCtrl);
+    clearFilter = this.filterCtrl.clearFilter.bind(this.filterCtrl);
+    clearAllFilters = this.filterCtrl.clearAllFilters.bind(this.filterCtrl);
+    filterValueFor = this.filterCtrl.filterValueFor.bind(this.filterCtrl);
+    isFiltered = this.filterCtrl.isFiltered.bind(this.filterCtrl);
+    setFilters = this.filterCtrl.setFilters.bind(this.filterCtrl);
+    registerColumn = this.colMetaCtrl.registerColumn.bind(this.colMetaCtrl);
+    unregisterColumn = this.colMetaCtrl.unregisterColumn.bind(this.colMetaCtrl);
+    metaFor = this.colMetaCtrl.metaFor.bind(this.colMetaCtrl);
+}
+
+class TngTable {
+    colDefs;
+    controller = inject(TNG_TABLE);
+    /** Emits on any sort change (both client & server modes). */
+    sortChange = new EventEmitter();
+    /* =====================
+     * Inputs
+     * ===================== */
+    rows = input([], ...(ngDevMode ? [{ debugName: "rows" }] : []));
+    rowKey = input(null, ...(ngDevMode ? [{ debugName: "rowKey" }] : []));
+    /** Default: client (static) sort */
+    sortMode = input('client', ...(ngDevMode ? [{ debugName: "sortMode" }] : []));
+    /** styling */
+    tableKlass = input('w-full text-sm', ...(ngDevMode ? [{ debugName: "tableKlass" }] : []));
+    theadKlass = input('bg-alternate-background', ...(ngDevMode ? [{ debugName: "theadKlass" }] : []));
+    thKlass = input('px-3 py-2 text-left font-semibold border-b border-border', ...(ngDevMode ? [{ debugName: "thKlass" }] : []));
+    tdKlass = input('px-3 py-2 border-b border-border align-middle', ...(ngDevMode ? [{ debugName: "tdKlass" }] : []));
+    tbodyKlass = input('bg-bg', ...(ngDevMode ? [{ debugName: "tbodyKlass" }] : []));
+    /** empty */
+    emptyText = input('No data', ...(ngDevMode ? [{ debugName: "emptyText" }] : []));
+    /* =====================
+     * Internal projected columns signal
+     * ===================== */
+    projectedCols = signal([], ...(ngDevMode ? [{ debugName: "projectedCols" }] : []));
+    constructor() {
+        // Emit sortChange whenever controller.sort changes (skip initial emission)
+        let first = true;
+        effect(() => {
+            const s = this.controller.sort();
+            if (first) {
+                first = false;
+                return;
+            }
+            this.sortChange.emit(s);
+        });
+    }
+    ngAfterContentInit() {
+        const sync = () => this.projectedCols.set(this.colDefs?.toArray() ?? []);
+        sync();
+        this.colDefs.changes.subscribe(sync);
+    }
+    /* =====================
+     * Columns
+     * ===================== */
+    columns = computed(() => this.projectedCols().map((c) => ({
+        id: c.id(),
+        header: c.resolveHeader(),
+        align: c.align(),
+        width: c.width() ?? undefined,
+        klass: c.klass() ?? undefined,
+        value: (row) => c.resolveValue(row),
+        headerTpl: c.resolveHeaderTpl(),
+        cellTpl: c.resolveCellTpl(),
+    })), ...(ngDevMode ? [{ debugName: "columns" }] : []));
+    /* =====================
+     * Rows view (client sorting)
+     * ===================== */
+    viewRows = computed(() => {
+        const rows = this.rows();
+        const mode = this.sortMode();
+        const sort = this.controller.sort();
+        if (mode !== 'client')
+            return rows;
+        if (!sort.active || !sort.direction)
+            return rows;
+        const dir = sort.direction === 'asc' ? 1 : -1;
+        const colId = sort.active;
+        // stable sort
+        return rows
+            .map((row, i) => ({ row, i, key: this.sortValue(row, colId) }))
+            .sort((a, b) => {
+            const c = this.compare(a.key, b.key);
+            return c !== 0 ? c * dir : a.i - b.i;
+        })
+            .map((x) => x.row);
+    }, ...(ngDevMode ? [{ debugName: "viewRows" }] : []));
+    hasRows = computed(() => (this.viewRows()?.length ?? 0) > 0, ...(ngDevMode ? [{ debugName: "hasRows" }] : []));
+    trackRow = (index, row) => {
+        const key = this.rowKey();
+        return key ? row?.[key] ?? index : index;
+    };
+    /* =====================
+     * Rendering helpers
+     * ===================== */
+    alignClass(align) {
+        switch (align) {
+            case 'right':
+                return 'text-right';
+            case 'center':
+                return 'text-center';
+            default:
+                return 'text-left';
+        }
+    }
+    styleWidth(col) {
+        return col.width ? { width: col.width } : null;
+    }
+    cellCtx(row, rowIndex, col) {
+        const value = col.value ? col.value(row) : row?.[col.id];
+        return { $implicit: row, row, rowIndex, colId: col.id, value };
+    }
+    headerCtx(col) {
+        return { colId: col.id, header: col.header };
+    }
+    /* =====================
+     * Sort helpers
+     * ===================== */
+    sortValue(row, colId) {
+        const col = this.columns().find((c) => c.id === colId);
+        if (col?.value)
+            return col.value(row);
+        return row?.[colId];
+    }
+    compare(a, b) {
+        // null/undefined first
+        if (a == null && b == null)
+            return 0;
+        if (a == null)
+            return -1;
+        if (b == null)
+            return 1;
+        // numbers (avoid booleans)
+        if (typeof a === 'number' && typeof b === 'number') {
+            return a === b ? 0 : a < b ? -1 : 1;
+        }
+        const an = typeof a === 'string' ? Number(a) : NaN;
+        const bn = typeof b === 'string' ? Number(b) : NaN;
+        if (Number.isFinite(an) && Number.isFinite(bn)) {
+            return an === bn ? 0 : an < bn ? -1 : 1;
+        }
+        // ISO-ish dates (string)
+        if (typeof a === 'string' && typeof b === 'string') {
+            const at = Date.parse(a);
+            const bt = Date.parse(b);
+            if (!Number.isNaN(at) && !Number.isNaN(bt)) {
+                return at === bt ? 0 : at < bt ? -1 : 1;
+            }
+        }
+        // fallback: locale string
+        return String(a).localeCompare(String(b));
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: TngTable, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.6", type: TngTable, isStandalone: true, selector: "tng-table", inputs: { rows: { classPropertyName: "rows", publicName: "rows", isSignal: true, isRequired: false, transformFunction: null }, rowKey: { classPropertyName: "rowKey", publicName: "rowKey", isSignal: true, isRequired: false, transformFunction: null }, sortMode: { classPropertyName: "sortMode", publicName: "sortMode", isSignal: true, isRequired: false, transformFunction: null }, tableKlass: { classPropertyName: "tableKlass", publicName: "tableKlass", isSignal: true, isRequired: false, transformFunction: null }, theadKlass: { classPropertyName: "theadKlass", publicName: "theadKlass", isSignal: true, isRequired: false, transformFunction: null }, thKlass: { classPropertyName: "thKlass", publicName: "thKlass", isSignal: true, isRequired: false, transformFunction: null }, tdKlass: { classPropertyName: "tdKlass", publicName: "tdKlass", isSignal: true, isRequired: false, transformFunction: null }, tbodyKlass: { classPropertyName: "tbodyKlass", publicName: "tbodyKlass", isSignal: true, isRequired: false, transformFunction: null }, emptyText: { classPropertyName: "emptyText", publicName: "emptyText", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { sortChange: "sortChange" }, providers: [{ provide: TNG_TABLE, useFactory: () => new TngTableController() }], queries: [{ propertyName: "colDefs", predicate: TngCol }], ngImport: i0, template: "<div class=\"relative\">\n  <table [class]=\"tableKlass()\">\n    <thead [class]=\"theadKlass()\">\n      <tr>\n        @for (col of columns(); track col.id) {\n          <th\n            scope=\"col\"\n            [class]=\"(thKlass() + ' ' + alignClass(col.align) + (col.klass ? ' ' + col.klass : '')).trim()\"\n            [ngStyle]=\"styleWidth(col)\"\n          >\n            @if (col.headerTpl) {\n              <ng-container\n                [ngTemplateOutlet]=\"col.headerTpl\"\n                [ngTemplateOutletContext]=\"headerCtx(col)\"\n              />\n            } @else {\n              {{ col.header }}\n            }\n          </th>\n        }\n      </tr>\n    </thead>\n\n    <tbody [class]=\"tbodyKlass()\">\n      @if (hasRows()) {\n        @for (row of viewRows(); let rowIndex = $index; track row?.[rowKey()] ?? rowIndex) {\n          <tr>\n            @for (col of columns(); track col.id) {\n              <td\n                [class]=\"(tdKlass() + ' ' + alignClass(col.align) + (col.klass ? ' ' + col.klass : '')).trim()\"\n              >\n                @if (col.cellTpl) {\n                  <ng-container\n                    [ngTemplateOutlet]=\"col.cellTpl\"\n                    [ngTemplateOutletContext]=\"cellCtx(row, rowIndex, col)\"\n                  />\n                } @else {\n                  {{ col.value?.(row) }}\n                }\n              </td>\n            }\n          </tr>\n        }\n      } @else {\n        <tr>\n          <td [attr.colspan]=\"columns().length || 1\" class=\"px-3 py-8 text-center text-disable\">\n            {{ emptyText() }}\n          </td>\n        </tr>\n      }\n    </tbody>\n  </table>\n\n  <!-- Render projected extras like filter panel -->\n  <ng-content />\n</div>\n", dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: TngTable, decorators: [{
+            type: Component,
+            args: [{ selector: 'tng-table', standalone: true, imports: [NgTemplateOutlet, NgStyle], providers: [{ provide: TNG_TABLE, useFactory: () => new TngTableController() }], template: "<div class=\"relative\">\n  <table [class]=\"tableKlass()\">\n    <thead [class]=\"theadKlass()\">\n      <tr>\n        @for (col of columns(); track col.id) {\n          <th\n            scope=\"col\"\n            [class]=\"(thKlass() + ' ' + alignClass(col.align) + (col.klass ? ' ' + col.klass : '')).trim()\"\n            [ngStyle]=\"styleWidth(col)\"\n          >\n            @if (col.headerTpl) {\n              <ng-container\n                [ngTemplateOutlet]=\"col.headerTpl\"\n                [ngTemplateOutletContext]=\"headerCtx(col)\"\n              />\n            } @else {\n              {{ col.header }}\n            }\n          </th>\n        }\n      </tr>\n    </thead>\n\n    <tbody [class]=\"tbodyKlass()\">\n      @if (hasRows()) {\n        @for (row of viewRows(); let rowIndex = $index; track row?.[rowKey()] ?? rowIndex) {\n          <tr>\n            @for (col of columns(); track col.id) {\n              <td\n                [class]=\"(tdKlass() + ' ' + alignClass(col.align) + (col.klass ? ' ' + col.klass : '')).trim()\"\n              >\n                @if (col.cellTpl) {\n                  <ng-container\n                    [ngTemplateOutlet]=\"col.cellTpl\"\n                    [ngTemplateOutletContext]=\"cellCtx(row, rowIndex, col)\"\n                  />\n                } @else {\n                  {{ col.value?.(row) }}\n                }\n              </td>\n            }\n          </tr>\n        }\n      } @else {\n        <tr>\n          <td [attr.colspan]=\"columns().length || 1\" class=\"px-3 py-8 text-center text-disable\">\n            {{ emptyText() }}\n          </td>\n        </tr>\n      }\n    </tbody>\n  </table>\n\n  <!-- Render projected extras like filter panel -->\n  <ng-content />\n</div>\n" }]
+        }], ctorParameters: () => [], propDecorators: { colDefs: [{
+                type: ContentChildren,
+                args: [TngCol]
+            }], sortChange: [{
+                type: Output
+            }], rows: [{ type: i0.Input, args: [{ isSignal: true, alias: "rows", required: false }] }], rowKey: [{ type: i0.Input, args: [{ isSignal: true, alias: "rowKey", required: false }] }], sortMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "sortMode", required: false }] }], tableKlass: [{ type: i0.Input, args: [{ isSignal: true, alias: "tableKlass", required: false }] }], theadKlass: [{ type: i0.Input, args: [{ isSignal: true, alias: "theadKlass", required: false }] }], thKlass: [{ type: i0.Input, args: [{ isSignal: true, alias: "thKlass", required: false }] }], tdKlass: [{ type: i0.Input, args: [{ isSignal: true, alias: "tdKlass", required: false }] }], tbodyKlass: [{ type: i0.Input, args: [{ isSignal: true, alias: "tbodyKlass", required: false }] }], emptyText: [{ type: i0.Input, args: [{ isSignal: true, alias: "emptyText", required: false }] }] } });
+
+class TngSortHeaderDirective {
+    colId = input.required(...(ngDevMode ? [{ debugName: "colId" }] : []));
+    table = inject(TNG_TABLE);
+    direction = computed(() => this.table.directionFor(this.colId()), ...(ngDevMode ? [{ debugName: "direction" }] : []));
+    isSorted = computed(() => this.direction() !== '', ...(ngDevMode ? [{ debugName: "isSorted" }] : []));
+    // a11y
+    role = 'button';
+    tabindex = 0;
+    get ariaSort() {
+        const dir = this.direction();
+        if (dir === 'asc')
+            return 'ascending';
+        if (dir === 'desc')
+            return 'descending';
+        return 'none';
+    }
+    onClick() {
+        this.table.toggleSort(this.colId());
+    }
+    onKey(ev) {
+        ev.preventDefault();
+        this.table.toggleSort(this.colId());
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: TngSortHeaderDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.0.6", type: TngSortHeaderDirective, isStandalone: true, selector: "[tngSortHeader]", inputs: { colId: { classPropertyName: "colId", publicName: "colId", isSignal: true, isRequired: true, transformFunction: null } }, host: { listeners: { "click": "onClick()", "keydown.enter": "onKey($event)", "keydown.space": "onKey($event)" }, properties: { "attr.role": "this.role", "attr.tabindex": "this.tabindex", "attr.aria-sort": "this.ariaSort" } }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: TngSortHeaderDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[tngSortHeader]',
+                    standalone: true,
+                }]
+        }], propDecorators: { colId: [{ type: i0.Input, args: [{ isSignal: true, alias: "colId", required: true }] }], role: [{
+                type: HostBinding,
+                args: ['attr.role']
+            }], tabindex: [{
+                type: HostBinding,
+                args: ['attr.tabindex']
+            }], ariaSort: [{
+                type: HostBinding,
+                args: ['attr.aria-sort']
+            }], onClick: [{
+                type: HostListener,
+                args: ['click']
+            }], onKey: [{
+                type: HostListener,
+                args: ['keydown.enter', ['$event']]
+            }, {
+                type: HostListener,
+                args: ['keydown.space', ['$event']]
+            }] } });
+
+class TngSortIcon {
+    host = inject(TngSortHeaderDirective);
+    dir = this.host.direction;
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: TngSortIcon, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.6", type: TngSortIcon, isStandalone: true, selector: "tng-sort-icon", ngImport: i0, template: `
+    @switch (dir()) {
+      @case ('asc') { <span aria-hidden="true">▲</span> }
+      @case ('desc') { <span aria-hidden="true">▼</span> }
+      @default { <span aria-hidden="true" class="opacity-40">↕</span> }
+    }
+  `, isInline: true });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: TngSortIcon, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'tng-sort-icon',
+                    standalone: true,
+                    template: `
+    @switch (dir()) {
+      @case ('asc') { <span aria-hidden="true">▲</span> }
+      @case ('desc') { <span aria-hidden="true">▼</span> }
+      @default { <span aria-hidden="true" class="opacity-40">↕</span> }
+    }
+  `,
+                }]
+        }] });
+
+class TngFilterTrigger {
+    colId = input.required(...(ngDevMode ? [{ debugName: "colId" }] : []));
+    table = inject(TNG_TABLE);
+    el = inject((ElementRef));
+    panelKlass = input('', ...(ngDevMode ? [{ debugName: "panelKlass" }] : []));
+    isFiltered = computed(() => this.table.isFiltered(this.colId()), ...(ngDevMode ? [{ debugName: "isFiltered" }] : []));
+    isOpen = computed(() => this.table.isFilterOpenFor(this.colId()), ...(ngDevMode ? [{ debugName: "isOpen" }] : []));
+    // a11y
+    role = 'button';
+    tabindex = 0;
+    ariaHaspopup = 'dialog';
+    get ariaExpanded() {
+        return this.isOpen() ? 'true' : 'false';
+    }
+    onClick() {
+        this.table.setFilterPanelKlass(this.panelKlass()); // store it
+        this.table.toggleFilter(this.colId(), this.el.nativeElement);
+    }
+    onKey(ev) {
+        ev.preventDefault();
+        this.table.setFilterPanelKlass(this.panelKlass()); // store it
+        this.table.toggleFilter(this.colId(), this.el.nativeElement);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: TngFilterTrigger, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.0.6", type: TngFilterTrigger, isStandalone: true, selector: "[tngFilterTrigger]", inputs: { colId: { classPropertyName: "colId", publicName: "colId", isSignal: true, isRequired: true, transformFunction: null }, panelKlass: { classPropertyName: "panelKlass", publicName: "panelKlass", isSignal: true, isRequired: false, transformFunction: null } }, host: { listeners: { "click": "onClick()", "keydown.enter": "onKey($event)", "keydown.space": "onKey($event)" }, properties: { "attr.role": "this.role", "attr.tabindex": "this.tabindex", "attr.aria-haspopup": "this.ariaHaspopup", "attr.aria-expanded": "this.ariaExpanded" } }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: TngFilterTrigger, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[tngFilterTrigger]',
+                    standalone: true,
+                }]
+        }], propDecorators: { colId: [{ type: i0.Input, args: [{ isSignal: true, alias: "colId", required: true }] }], panelKlass: [{ type: i0.Input, args: [{ isSignal: true, alias: "panelKlass", required: false }] }], role: [{
+                type: HostBinding,
+                args: ['attr.role']
+            }], tabindex: [{
+                type: HostBinding,
+                args: ['attr.tabindex']
+            }], ariaHaspopup: [{
+                type: HostBinding,
+                args: ['attr.aria-haspopup']
+            }], ariaExpanded: [{
+                type: HostBinding,
+                args: ['attr.aria-expanded']
+            }], onClick: [{
+                type: HostListener,
+                args: ['click']
+            }], onKey: [{
+                type: HostListener,
+                args: ['keydown.enter', ['$event']]
+            }, {
+                type: HostListener,
+                args: ['keydown.space', ['$event']]
+            }] } });
+
+class TngFilterPanel {
+    table = inject(TNG_TABLE);
+    activeColId = computed(() => this.table.openFilterColId(), ...(ngDevMode ? [{ debugName: "activeColId" }] : []));
+    isOpen = computed(() => this.activeColId() !== '', ...(ngDevMode ? [{ debugName: "isOpen" }] : []));
+    anchorEl = computed(() => this.table.filterAnchorEl(), ...(ngDevMode ? [{ debugName: "anchorEl" }] : []));
+    meta = computed(() => {
+        const id = this.activeColId();
+        return id ? this.table.metaFor(id) : undefined;
+    }, ...(ngDevMode ? [{ debugName: "meta" }] : []));
+    filterType = computed(() => this.meta()?.filter?.type ?? 'text', ...(ngDevMode ? [{ debugName: "filterType" }] : []));
+    titleSuffix = computed(() => {
+        const label = this.meta()?.label;
+        return label ? ` • ${label}` : '';
+    }, ...(ngDevMode ? [{ debugName: "titleSuffix" }] : []));
+    panelKlass = computed(() => {
+        const base = 'min-w-80 max-w-[360px] p-0';
+        const fromTrigger = this.table.filterPanelKlass();
+        return `${base} ${fromTrigger}`.trim();
+    }, ...(ngDevMode ? [{ debugName: "panelKlass" }] : []));
+    // ---- open/close wiring ----
+    onOverlayOpenChange(open) {
+        // if overlay closes, reflect that back to controller
+        if (!open && this.isOpen())
+            this.close();
+    }
+    onOverlayClosed() {
+        // overlay stack says it's closed (outside click / escape)
+        if (this.isOpen())
+            this.close();
+    }
+    close() {
+        this.table.closeFilter();
+    }
+    clear() {
+        const id = this.activeColId();
+        if (id)
+            this.table.clearFilter(id);
+    }
+    // ---------------- TEXT ----------------
+    textPlaceholder = computed(() => {
+        const f = this.meta()?.filter;
+        return f?.type === 'text' ? f.placeholder ?? 'Type to filter…' : 'Type to filter…';
+    }, ...(ngDevMode ? [{ debugName: "textPlaceholder" }] : []));
+    textValue() {
+        const id = this.activeColId();
+        const v = id ? this.table.filterValueFor(id) : undefined;
+        return typeof v === 'string' ? v : '';
+    }
+    onTextInput(ev) {
+        const value = ev.target?.value ?? '';
+        const id = this.activeColId();
+        if (!id)
+            return;
+        const trimmed = value.trim();
+        if (!trimmed)
+            this.table.clearFilter(id);
+        else
+            this.table.setFilter(id, trimmed);
+    }
+    // ---------------- NUMBER ----------------
+    numberValue() {
+        const id = this.activeColId();
+        const v = id ? this.table.filterValueFor(id) : undefined;
+        return v && typeof v === 'object' && !Array.isArray(v) ? v : {};
+    }
+    numberMin() {
+        const v = this.numberValue().min;
+        return typeof v === 'number' && Number.isFinite(v) ? String(v) : '';
+    }
+    numberMax() {
+        const v = this.numberValue().max;
+        return typeof v === 'number' && Number.isFinite(v) ? String(v) : '';
+    }
+    onNumberMinInput(ev) {
+        const raw = ev.target?.value ?? '';
+        const id = this.activeColId();
+        if (!id)
+            return;
+        const cur = this.numberValue();
+        const n = raw === '' ? undefined : Number(raw);
+        const next = { ...cur, min: Number.isFinite(n) ? n : undefined };
+        if (!next.min && !next.max)
+            this.table.clearFilter(id);
+        else
+            this.table.setFilter(id, next);
+    }
+    onNumberMaxInput(ev) {
+        const raw = ev.target?.value ?? '';
+        const id = this.activeColId();
+        if (!id)
+            return;
+        const cur = this.numberValue();
+        const n = raw === '' ? undefined : Number(raw);
+        const next = { ...cur, max: Number.isFinite(n) ? n : undefined };
+        if (!next.min && !next.max)
+            this.table.clearFilter(id);
+        else
+            this.table.setFilter(id, next);
+    }
+    // ---------------- DATE ----------------
+    dateValue() {
+        const id = this.activeColId();
+        const v = id ? this.table.filterValueFor(id) : undefined;
+        return v && typeof v === 'object' && !Array.isArray(v) ? v : {};
+    }
+    dateFrom() {
+        return this.dateValue().from ?? '';
+    }
+    dateTo() {
+        return this.dateValue().to ?? '';
+    }
+    onDateFromInput(ev) {
+        const from = ev.target?.value ?? '';
+        const id = this.activeColId();
+        if (!id)
+            return;
+        const cur = this.dateValue();
+        const next = { ...cur, from: from || undefined };
+        if (!next.from && !next.to)
+            this.table.clearFilter(id);
+        else
+            this.table.setFilter(id, next);
+    }
+    onDateToInput(ev) {
+        const to = ev.target?.value ?? '';
+        const id = this.activeColId();
+        if (!id)
+            return;
+        const cur = this.dateValue();
+        const next = { ...cur, to: to || undefined };
+        if (!next.from && !next.to)
+            this.table.clearFilter(id);
+        else
+            this.table.setFilter(id, next);
+    }
+    // ---------------- ENUM ----------------
+    enumOptions() {
+        const f = this.meta()?.filter;
+        return f?.type === 'enum' ? f.options : [];
+    }
+    enumValue() {
+        const id = this.activeColId();
+        const v = id ? this.table.filterValueFor(id) : undefined;
+        return Array.isArray(v) ? v : [];
+    }
+    enumChecked(value) {
+        return this.enumValue().includes(value);
+    }
+    toggleEnum(value) {
+        const id = this.activeColId();
+        if (!id)
+            return;
+        const cur = this.enumValue();
+        const next = cur.includes(value) ? cur.filter((v) => v !== value) : [...cur, value];
+        if (next.length === 0)
+            this.table.clearFilter(id);
+        else
+            this.table.setFilter(id, next);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: TngFilterPanel, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.6", type: TngFilterPanel, isStandalone: true, selector: "tng-filter-panel", ngImport: i0, template: "<tng-overlay-ref\n  #overlayRef=\"tngOverlayRef\"\n  [open]=\"isOpen()\"\n  (openChange)=\"onOverlayOpenChange($event)\"\n  (closed)=\"onOverlayClosed()\"\n>\n  <tng-connected-overlay\n    [open]=\"overlayRef.isOpen()\"\n    [anchor]=\"anchorEl()\"\n    placement=\"bottom-start\"\n    (closed)=\"overlayRef.close($event)\"\n    [closeOnInsideClick]=\"false\"\n    >\n    <!-- set width at panel level (menu-style) -->\n    <tng-overlay-panel [klass]=\"panelKlass()\">\n      <div class=\"w-full\">\n        <div class=\"flex items-center justify-between gap-3 border-b border-slate-200 px-3 py-2\">\n          <div class=\"min-w-0\">\n            <div class=\"truncate text-sm font-semibold text-slate-900\">\n              Filter{{ titleSuffix() }}\n            </div>\n            <div class=\"truncate text-xs text-slate-500\">{{ activeColId() }}</div>\n          </div>\n\n          <div class=\"flex items-center gap-2\">\n            <button\n              type=\"button\"\n              class=\"rounded px-2 py-1 text-xs text-slate-600 hover:bg-slate-50\"\n              (click)=\"clear()\"\n            >\n              Clear\n            </button>\n            <button\n              type=\"button\"\n              class=\"rounded px-2 py-1 text-xs text-slate-600 hover:bg-slate-50\"\n              (click)=\"close()\"\n              aria-label=\"Close filter\"\n            >\n              \u2715\n            </button>\n          </div>\n        </div>\n\n        <div class=\"p-3\">\n          @switch (filterType()) {\n            @case ('text') {\n              <label class=\"text-xs font-medium text-slate-700\">Contains</label>\n              <input\n                class=\"mt-2 w-full rounded border border-slate-200 px-2 py-1 text-sm outline-none focus:border-slate-400\"\n                [placeholder]=\"textPlaceholder()\"\n                [value]=\"textValue()\"\n                (input)=\"onTextInput($event)\"\n              />\n            }\n\n            @case ('number') {\n              <div class=\"grid grid-cols-2 gap-3\">\n                <div>\n                  <label class=\"text-xs font-medium text-slate-700\">Min</label>\n                  <input\n                    type=\"number\"\n                    class=\"mt-2 w-full rounded border border-slate-200 px-2 py-1 text-sm outline-none focus:border-slate-400\"\n                    [value]=\"numberMin()\"\n                    (input)=\"onNumberMinInput($event)\"\n                  />\n                </div>\n                <div>\n                  <label class=\"text-xs font-medium text-slate-700\">Max</label>\n                  <input\n                    type=\"number\"\n                    class=\"mt-2 w-full rounded border border-slate-200 px-2 py-1 text-sm outline-none focus:border-slate-400\"\n                    [value]=\"numberMax()\"\n                    (input)=\"onNumberMaxInput($event)\"\n                  />\n                </div>\n              </div>\n            }\n\n            @case ('date') {\n              <div class=\"grid grid-cols-2 gap-3\">\n                <div>\n                  <label class=\"text-xs font-medium text-slate-700\">From</label>\n                  <input\n                    type=\"date\"\n                    class=\"mt-2 w-full rounded border border-slate-200 px-2 py-1 text-sm outline-none focus:border-slate-400\"\n                    [value]=\"dateFrom()\"\n                    (input)=\"onDateFromInput($event)\"\n                  />\n                </div>\n                <div>\n                  <label class=\"text-xs font-medium text-slate-700\">To</label>\n                  <input\n                    type=\"date\"\n                    class=\"mt-2 w-full rounded border border-slate-200 px-2 py-1 text-sm outline-none focus:border-slate-400\"\n                    [value]=\"dateTo()\"\n                    (input)=\"onDateToInput($event)\"\n                  />\n                </div>\n              </div>\n            }\n\n            @case ('enum') {\n              <div class=\"space-y-2\">\n                <div class=\"text-xs font-medium text-slate-700\">Select</div>\n\n                <div class=\"max-h-56 overflow-auto rounded border border-slate-200\">\n                  @for (opt of enumOptions(); track opt.value) {\n                    <label class=\"flex cursor-pointer items-center gap-2 px-2 py-1 text-sm hover:bg-slate-50\">\n                      <input\n                        type=\"checkbox\"\n                        class=\"h-4 w-4\"\n                        [checked]=\"enumChecked(opt.value)\"\n                        (change)=\"toggleEnum(opt.value)\"\n                      />\n                      <span class=\"truncate\">{{ opt.label }}</span>\n                    </label>\n                  }\n                </div>\n              </div>\n            }\n\n            @default {\n              <div class=\"text-sm text-slate-600\">\n                No default filter configured for this column.\n              </div>\n            }\n          }\n        </div>\n      </div>\n    </tng-overlay-panel>\n  </tng-connected-overlay>\n</tng-overlay-ref>\n", dependencies: [{ kind: "component", type: TngOverlayRef, selector: "tng-overlay-ref", inputs: ["open"], outputs: ["openChange", "opened", "closed"], exportAs: ["tngOverlayRef"] }, { kind: "component", type: TngConnectedOverlay, selector: "tng-connected-overlay", inputs: ["open", "anchor", "placement", "offset", "width", "closeOnOutsideClick", "closeOnInsideClick", "closeOnEscape", "hasBackdrop", "backdropClass"], outputs: ["opened", "closed", "backdropClick"] }, { kind: "component", type: TngOverlayPanel, selector: "tng-overlay-panel", inputs: ["klass", "modal", "role", "ariaLabel", "ariaLabelledby", "ariaDescribedby", "restoreFocus", "autoCapture", "deferCaptureElements"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: TngFilterPanel, decorators: [{
+            type: Component,
+            args: [{ selector: 'tng-filter-panel', standalone: true, imports: [TngOverlayRef, TngConnectedOverlay, TngOverlayPanel], template: "<tng-overlay-ref\n  #overlayRef=\"tngOverlayRef\"\n  [open]=\"isOpen()\"\n  (openChange)=\"onOverlayOpenChange($event)\"\n  (closed)=\"onOverlayClosed()\"\n>\n  <tng-connected-overlay\n    [open]=\"overlayRef.isOpen()\"\n    [anchor]=\"anchorEl()\"\n    placement=\"bottom-start\"\n    (closed)=\"overlayRef.close($event)\"\n    [closeOnInsideClick]=\"false\"\n    >\n    <!-- set width at panel level (menu-style) -->\n    <tng-overlay-panel [klass]=\"panelKlass()\">\n      <div class=\"w-full\">\n        <div class=\"flex items-center justify-between gap-3 border-b border-slate-200 px-3 py-2\">\n          <div class=\"min-w-0\">\n            <div class=\"truncate text-sm font-semibold text-slate-900\">\n              Filter{{ titleSuffix() }}\n            </div>\n            <div class=\"truncate text-xs text-slate-500\">{{ activeColId() }}</div>\n          </div>\n\n          <div class=\"flex items-center gap-2\">\n            <button\n              type=\"button\"\n              class=\"rounded px-2 py-1 text-xs text-slate-600 hover:bg-slate-50\"\n              (click)=\"clear()\"\n            >\n              Clear\n            </button>\n            <button\n              type=\"button\"\n              class=\"rounded px-2 py-1 text-xs text-slate-600 hover:bg-slate-50\"\n              (click)=\"close()\"\n              aria-label=\"Close filter\"\n            >\n              \u2715\n            </button>\n          </div>\n        </div>\n\n        <div class=\"p-3\">\n          @switch (filterType()) {\n            @case ('text') {\n              <label class=\"text-xs font-medium text-slate-700\">Contains</label>\n              <input\n                class=\"mt-2 w-full rounded border border-slate-200 px-2 py-1 text-sm outline-none focus:border-slate-400\"\n                [placeholder]=\"textPlaceholder()\"\n                [value]=\"textValue()\"\n                (input)=\"onTextInput($event)\"\n              />\n            }\n\n            @case ('number') {\n              <div class=\"grid grid-cols-2 gap-3\">\n                <div>\n                  <label class=\"text-xs font-medium text-slate-700\">Min</label>\n                  <input\n                    type=\"number\"\n                    class=\"mt-2 w-full rounded border border-slate-200 px-2 py-1 text-sm outline-none focus:border-slate-400\"\n                    [value]=\"numberMin()\"\n                    (input)=\"onNumberMinInput($event)\"\n                  />\n                </div>\n                <div>\n                  <label class=\"text-xs font-medium text-slate-700\">Max</label>\n                  <input\n                    type=\"number\"\n                    class=\"mt-2 w-full rounded border border-slate-200 px-2 py-1 text-sm outline-none focus:border-slate-400\"\n                    [value]=\"numberMax()\"\n                    (input)=\"onNumberMaxInput($event)\"\n                  />\n                </div>\n              </div>\n            }\n\n            @case ('date') {\n              <div class=\"grid grid-cols-2 gap-3\">\n                <div>\n                  <label class=\"text-xs font-medium text-slate-700\">From</label>\n                  <input\n                    type=\"date\"\n                    class=\"mt-2 w-full rounded border border-slate-200 px-2 py-1 text-sm outline-none focus:border-slate-400\"\n                    [value]=\"dateFrom()\"\n                    (input)=\"onDateFromInput($event)\"\n                  />\n                </div>\n                <div>\n                  <label class=\"text-xs font-medium text-slate-700\">To</label>\n                  <input\n                    type=\"date\"\n                    class=\"mt-2 w-full rounded border border-slate-200 px-2 py-1 text-sm outline-none focus:border-slate-400\"\n                    [value]=\"dateTo()\"\n                    (input)=\"onDateToInput($event)\"\n                  />\n                </div>\n              </div>\n            }\n\n            @case ('enum') {\n              <div class=\"space-y-2\">\n                <div class=\"text-xs font-medium text-slate-700\">Select</div>\n\n                <div class=\"max-h-56 overflow-auto rounded border border-slate-200\">\n                  @for (opt of enumOptions(); track opt.value) {\n                    <label class=\"flex cursor-pointer items-center gap-2 px-2 py-1 text-sm hover:bg-slate-50\">\n                      <input\n                        type=\"checkbox\"\n                        class=\"h-4 w-4\"\n                        [checked]=\"enumChecked(opt.value)\"\n                        (change)=\"toggleEnum(opt.value)\"\n                      />\n                      <span class=\"truncate\">{{ opt.label }}</span>\n                    </label>\n                  }\n                </div>\n              </div>\n            }\n\n            @default {\n              <div class=\"text-sm text-slate-600\">\n                No default filter configured for this column.\n              </div>\n            }\n          }\n        </div>\n      </div>\n    </tng-overlay-panel>\n  </tng-connected-overlay>\n</tng-overlay-ref>\n" }]
+        }] });
+
+class TngSortHeader {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: TngSortHeader, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.0.6", type: TngSortHeader, isStandalone: true, selector: "tng-sort-header", ngImport: i0, template: "<div class=\"p-4 border border-gray-200 rounded-md\">\n  <p class=\"text-gray-600\">Welcome hello component - Sort Header</p>\n</div>\n" });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: TngSortHeader, decorators: [{
+            type: Component,
+            args: [{ selector: 'tng-sort-header', standalone: true, template: "<div class=\"p-4 border border-gray-200 rounded-md\">\n  <p class=\"text-gray-600\">Welcome hello component - Sort Header</p>\n</div>\n" }]
+        }] });
+
+class TngTree {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: TngTree, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.0.6", type: TngTree, isStandalone: true, selector: "tng-tree", ngImport: i0, template: "<div class=\"p-4 border border-gray-200 rounded-md\">\n  <p class=\"text-gray-600\">Welcome hello component - Tree</p>\n</div>\n" });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: TngTree, decorators: [{
+            type: Component,
+            args: [{ selector: 'tng-tree', standalone: true, template: "<div class=\"p-4 border border-gray-200 rounded-md\">\n  <p class=\"text-gray-600\">Welcome hello component - Tree</p>\n</div>\n" }]
+        }] });
+
+class TngEmptyState {
+    title = input('No data available', ...(ngDevMode ? [{ debugName: "title" }] : []));
+    message = input('', ...(ngDevMode ? [{ debugName: "message" }] : []));
+    icon = input('', ...(ngDevMode ? [{ debugName: "icon" }] : []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: TngEmptyState, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.6", type: TngEmptyState, isStandalone: true, selector: "tng-empty-state", inputs: { title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, message: { classPropertyName: "message", publicName: "message", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div class=\"flex flex-col items-center justify-center p-8 text-center\">\n  @if (icon()) {\n    <div class=\"mb-4 text-4xl text-gray-400\">{{ icon() }}</div>\n  }\n  <h3 class=\"text-lg font-semibold text-gray-900 mb-2\">{{ title() }}</h3>\n  @if (message()) {\n    <p class=\"text-sm text-gray-600\">{{ message() }}</p>\n  }\n</div>\n" });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: TngEmptyState, decorators: [{
+            type: Component,
+            args: [{ selector: 'tng-empty-state', standalone: true, template: "<div class=\"flex flex-col items-center justify-center p-8 text-center\">\n  @if (icon()) {\n    <div class=\"mb-4 text-4xl text-gray-400\">{{ icon() }}</div>\n  }\n  <h3 class=\"text-lg font-semibold text-gray-900 mb-2\">{{ title() }}</h3>\n  @if (message()) {\n    <p class=\"text-sm text-gray-600\">{{ message() }}</p>\n  }\n</div>\n" }]
+        }], propDecorators: { title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: false }] }], message: [{ type: i0.Input, args: [{ isSignal: true, alias: "message", required: false }] }], icon: [{ type: i0.Input, args: [{ isSignal: true, alias: "icon", required: false }] }] } });
+
+class TngVirtualScroll {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: TngVirtualScroll, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.0.6", type: TngVirtualScroll, isStandalone: true, selector: "tng-virtual-scroll", ngImport: i0, template: "<div class=\"p-4 border border-gray-200 rounded-md\">\n  <p class=\"text-gray-600\">Virtual Scroll component - placeholder</p>\n</div>\n" });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: TngVirtualScroll, decorators: [{
+            type: Component,
+            args: [{ selector: 'tng-virtual-scroll', standalone: true, template: "<div class=\"p-4 border border-gray-200 rounded-md\">\n  <p class=\"text-gray-600\">Virtual Scroll component - placeholder</p>\n</div>\n" }]
+        }] });
+
+// Table (components, defs, types, controllers, directives, features)
 
 /**
  * Generated bundle index. Do not edit.
  */
+
+export { TNG_TABLE, TngCellDef, TngCol, TngColumnMetaController, TngEmptyState, TngFilterController, TngFilterPanel, TngFilterTrigger, TngHeaderDef, TngSortController, TngSortHeader, TngSortHeaderDirective, TngSortIcon, TngTable, TngTableController, TngTableFilterFeature, TngTableSortFeature, TngTree, TngVirtualScroll };
 //# sourceMappingURL=tociva-tailng-ui-data-table-structure.mjs.map