ryzen-ui 0.2.15 → 0.2.17

package/fesm2022/ryzen-ui.mjs

@@ -139,18 +139,7 @@ class DatePickerComponent {
     _monthName = computed(() => this._monthNames[this._viewDate().getMonth()], ...(ngDevMode ? [{ debugName: "_monthName" }] : []));
     _year = computed(() => this._viewDate().getFullYear(), ...(ngDevMode ? [{ debugName: "_year" }] : []));
     _decadeLabel = computed(() => `${this._decade()} - ${this._decade() + 9}`, ...(ngDevMode ? [{ debugName: "_decadeLabel" }] : []));
-    _appendToParent = computed(() => {
-        const a = this.appendTo();
-        if (a)
-            return a === 'body';
-        const cb = this.config().appendToBody;
-        if (cb !== undefined)
-            return cb;
-        const cp = this.config().appendToParent;
-        if (cp !== undefined)
-            return !cp;
-        return true;
-    }, ...(ngDevMode ? [{ debugName: "_appendToParent" }] : []));
+    _appendToParent = computed(() => true, ...(ngDevMode ? [{ debugName: "_appendToParent" }] : []));
     _panelFixed = computed(() => this._isOpen() && this._appendToParent() ? 'fixed' : null, ...(ngDevMode ? [{ debugName: "_panelFixed" }] : []));
     _showTodayBtn = computed(() => this.config().showTodayButton !== false, ...(ngDevMode ? [{ debugName: "_showTodayBtn" }] : []));
     _showYearNav = computed(() => this.config().showYearNavigation !== false, ...(ngDevMode ? [{ debugName: "_showYearNav" }] : []));
@@ -439,18 +428,7 @@ class DropDownComponent {
     _panelWidth = signal(0, ...(ngDevMode ? [{ debugName: "_panelWidth" }] : []));
     _panelEl = null;
     _searchQuery = signal('', ...(ngDevMode ? [{ debugName: "_searchQuery" }] : []));
-    _appendToParent = computed(() => {
-        const a = this.appendTo();
-        if (a)
-            return a === 'body';
-        const cb = this.config().appendToBody;
-        if (cb !== undefined)
-            return cb;
-        const cp = this.config().appendToParent;
-        if (cp !== undefined)
-            return !cp;
-        return true;
-    }, ...(ngDevMode ? [{ debugName: "_appendToParent" }] : []));
+    _appendToParent = computed(() => true, ...(ngDevMode ? [{ debugName: "_appendToParent" }] : []));
     _panelFixed = computed(() => this._isOpen() && this._appendToParent() ? 'fixed' : null, ...(ngDevMode ? [{ debugName: "_panelFixed" }] : []));
     _maxHeight = computed(() => this.config().maxHeight ?? '256px', ...(ngDevMode ? [{ debugName: "_maxHeight" }] : []));
     _selectedLabel = computed(() => {
@@ -549,9 +527,20 @@ class DropDownComponent {
         this.value.set(null);
     }
     _onWindowScroll() {
-        if (this._isOpen() && this._appendToParent()) {
-            this._close();
+        if (!this._isOpen() || !this._appendToParent())
+            return;
+        const rect = this._elementRef.nativeElement.getBoundingClientRect();
+        const dir = this._direction();
+        if (dir === 'up' || dir === 'down') {
+            this._panelDirection.set(dir);
         }
+        else {
+            const panelH = Math.min(320, parseInt(this._maxHeight()));
+            this._panelDirection.set(window.innerHeight - rect.bottom >= panelH + 60 ? 'down' : 'up');
+        }
+        this._panelX.set(rect.left);
+        this._panelY.set(this._panelDirection() === 'down' ? rect.bottom : rect.top);
+        this._panelWidth.set(rect.width);
     }
     _onDocClick(event) {
         if (!this._isOpen())
@@ -718,18 +707,7 @@ class MultiSelectComponent {
     _panelWidth = signal(0, ...(ngDevMode ? [{ debugName: "_panelWidth" }] : []));
     _panelEl = null;
     _searchQuery = signal('', ...(ngDevMode ? [{ debugName: "_searchQuery" }] : []));
-    _appendToParent = computed(() => {
-        const a = this.appendTo();
-        if (a)
-            return a === 'body';
-        const cb = this.config().appendToBody;
-        if (cb !== undefined)
-            return cb;
-        const cp = this.config().appendToParent;
-        if (cp !== undefined)
-            return !cp;
-        return true;
-    }, ...(ngDevMode ? [{ debugName: "_appendToParent" }] : []));
+    _appendToParent = computed(() => true, ...(ngDevMode ? [{ debugName: "_appendToParent" }] : []));
     _panelFixed = computed(() => this._isOpen() && this._appendToParent() ? 'fixed' : null, ...(ngDevMode ? [{ debugName: "_panelFixed" }] : []));
     _maxHeight = computed(() => this.config().maxHeight ?? '256px', ...(ngDevMode ? [{ debugName: "_maxHeight" }] : []));
     _selectedLabels = computed(() => {
@@ -869,9 +847,13 @@ class MultiSelectComponent {
         this.value.set([]);
     }
     _onWindowScroll() {
-        if (this._isOpen() && this._appendToParent()) {
-            this._close();
-        }
+        if (!this._isOpen() || !this._appendToParent())
+            return;
+        const rect = this._elementRef.nativeElement.getBoundingClientRect();
+        this._panelDirection.set(window.innerHeight - rect.bottom >= 320 ? 'down' : 'up');
+        this._panelX.set(rect.left);
+        this._panelY.set(this._panelDirection() === 'down' ? rect.bottom : rect.top);
+        this._panelWidth.set(rect.width);
     }
     _onDocClick(event) {
         if (!this._isOpen())
@@ -1553,12 +1535,34 @@ class TableComponent {
     exportable = input(false, ...(ngDevMode ? [{ debugName: "exportable" }] : []));
     columnToggle = input(false, ...(ngDevMode ? [{ debugName: "columnToggle" }] : []));
     expandable = input(false, ...(ngDevMode ? [{ debugName: "expandable" }] : []));
+    size = input('md', ...(ngDevMode ? [{ debugName: "size" }] : []));
+    showGridlines = input(false, ...(ngDevMode ? [{ debugName: "showGridlines" }] : []));
+    sortMode = input('single', ...(ngDevMode ? [{ debugName: "sortMode" }] : []));
+    alwaysShowPaginator = input(true, ...(ngDevMode ? [{ debugName: "alwaysShowPaginator" }] : []));
+    showFirstLastIcon = input(true, ...(ngDevMode ? [{ debugName: "showFirstLastIcon" }] : []));
+    currentPageReport = input('{currentPage} of {totalPages}', ...(ngDevMode ? [{ debugName: "currentPageReport" }] : []));
+    showCurrentPageReport = input(false, ...(ngDevMode ? [{ debugName: "showCurrentPageReport" }] : []));
+    resetPageOnSort = input(true, ...(ngDevMode ? [{ debugName: "resetPageOnSort" }] : []));
+    metaKeySelection = input(false, ...(ngDevMode ? [{ debugName: "metaKeySelection" }] : []));
+    customSort = input(null, ...(ngDevMode ? [{ debugName: "customSort" }] : []));
+    globalFilterFields = input(null, ...(ngDevMode ? [{ debugName: "globalFilterFields" }] : []));
+    lazy = input(false, ...(ngDevMode ? [{ debugName: "lazy" }] : []));
+    totalRecords = input(0, ...(ngDevMode ? [{ debugName: "totalRecords" }] : []));
+    responsiveLayout = input('scroll', ...(ngDevMode ? [{ debugName: "responsiveLayout" }] : []));
+    groupRowsBy = input('', ...(ngDevMode ? [{ debugName: "groupRowsBy" }] : []));
+    rowGroupMode = input(null, ...(ngDevMode ? [{ debugName: "rowGroupMode" }] : []));
     sortChange = output();
     pageChange = output();
     selectedRows = output();
+    rowClick = output();
+    rowDblClick = output();
+    selectAllChange = output();
+    filterChange = output();
+    selection = model([], ...(ngDevMode ? [{ debugName: "selection" }] : []));
     rowDetail;
     _sortKey = signal('', ...(ngDevMode ? [{ debugName: "_sortKey" }] : []));
     _sortDir = signal('', ...(ngDevMode ? [{ debugName: "_sortDir" }] : []));
+    _multiSortMeta = signal([], ...(ngDevMode ? [{ debugName: "_multiSortMeta" }] : []));
     _searchQuery = signal('', ...(ngDevMode ? [{ debugName: "_searchQuery" }] : []));
     _filters = signal({}, ...(ngDevMode ? [{ debugName: "_filters" }] : []));
     _page = signal(1, ...(ngDevMode ? [{ debugName: "_page" }] : []));
@@ -1571,6 +1575,19 @@ class TableComponent {
     _columnToggleOpen = signal(false, ...(ngDevMode ? [{ debugName: "_columnToggleOpen" }] : []));
     _exportOpen = signal(false, ...(ngDevMode ? [{ debugName: "_exportOpen" }] : []));
     _resizing = null;
+    _tableClass = computed(() => {
+        const cls = ['rz-tbl'];
+        if (this.size() === 'sm')
+            cls.push('rz-tbl-sm');
+        if (this.size() === 'lg')
+            cls.push('rz-tbl-lg');
+        if (this.showGridlines())
+            cls.push('rz-tbl-gridlines');
+        if (this.striped())
+            cls.push('rz-tbl-striped');
+        return cls.join(' ');
+    }, ...(ngDevMode ? [{ debugName: "_tableClass" }] : []));
+    _hidePaginator = computed(() => this.pageable() && !this.alwaysShowPaginator() && this._totalPages() <= 1, ...(ngDevMode ? [{ debugName: "_hidePaginator" }] : []));
     constructor() {
         effect(() => { this._pageSize.set(this.pageSize()); });
         effect(() => {
@@ -1578,6 +1595,9 @@ class TableComponent {
             this._filters();
             this._page.set(1);
         });
+        effect(() => {
+            this._hiddenColumns.set(new Set(this.columns().filter(c => c.hidden).map(c => c.key)));
+        });
     }
     _displayColumns = computed(() => this.columns().filter(c => !this._hiddenColumns().has(c.key)), ...(ngDevMode ? [{ debugName: "_displayColumns" }] : []));
     _colCount = computed(() => {
@@ -1590,32 +1610,103 @@ class TableComponent {
     }, ...(ngDevMode ? [{ debugName: "_colCount" }] : []));
     _filteredRows = computed(() => {
         let data = this.rows();
-        const key = this._sortKey();
-        const dir = this._sortDir();
-        if (key && dir) {
+        // Multi-sort
+        const multiMeta = this._multiSortMeta();
+        if (this.sortMode() === 'multiple' && multiMeta.length > 0) {
             data = [...data].sort((a, b) => {
-                const aVal = a[key];
-                const bVal = b[key];
-                const direction = dir === 'asc' ? 1 : -1;
-                if (aVal < bVal)
-                    return -1 * direction;
-                if (aVal > bVal)
-                    return 1 * direction;
+                for (const s of multiMeta) {
+                    if (!s.direction)
+                        continue;
+                    const aVal = a[s.key];
+                    const bVal = b[s.key];
+                    const dir = s.direction === 'asc' ? 1 : -1;
+                    if (aVal < bVal)
+                        return -1 * dir;
+                    if (aVal > bVal)
+                        return 1 * dir;
+                }
                 return 0;
             });
         }
+        else {
+            // Single sort
+            const key = this._sortKey();
+            const dir = this._sortDir();
+            if (key && dir) {
+                const custom = this.customSort();
+                if (custom) {
+                    data = [...data].sort((a, b) => custom(a, b, key, dir));
+                }
+                else {
+                    data = [...data].sort((a, b) => {
+                        const aVal = a[key];
+                        const bVal = b[key];
+                        const direction = dir === 'asc' ? 1 : -1;
+                        if (aVal < bVal)
+                            return -1 * direction;
+                        if (aVal > bVal)
+                            return 1 * direction;
+                        return 0;
+                    });
+                }
+            }
+        }
+        // Global search
         const query = this._searchQuery().toLowerCase().trim();
         if (query) {
-            data = data.filter(row => Object.values(row).some(val => String(val).toLowerCase().includes(query)));
+            const fields = this.globalFilterFields();
+            data = data.filter(row => {
+                const values = fields
+                    ? fields.map(f => String(row[f] ?? ''))
+                    : Object.values(row).map(v => String(v));
+                return values.some(v => v.toLowerCase().includes(query));
+            });
         }
+        // Column filters
         const filters = this._filters();
         for (const [fk, fv] of Object.entries(filters)) {
             if (fv)
                 data = data.filter(row => String(row[fk]) === fv);
         }
+        // Row grouping
+        const groupBy = this.groupRowsBy();
+        const groupMode = this.rowGroupMode();
+        if (groupBy && groupMode) {
+            data = [...data].sort((a, b) => {
+                const aVal = String(a[groupBy] ?? '');
+                const bVal = String(b[groupBy] ?? '');
+                if (aVal < bVal)
+                    return -1;
+                if (aVal > bVal)
+                    return 1;
+                return 0;
+            });
+        }
         return data;
     }, ...(ngDevMode ? [{ debugName: "_filteredRows" }] : []));
+    _groupedRows = computed(() => {
+        const groupBy = this.groupRowsBy();
+        const groupMode = this.rowGroupMode();
+        if (!groupBy || !groupMode)
+            return null;
+        const groups = [];
+        const seen = new Set();
+        for (const row of this._filteredRows()) {
+            const val = String(row[groupBy] ?? '');
+            if (!seen.has(val)) {
+                seen.add(val);
+                groups.push({ key: val, rows: [row] });
+            }
+            else {
+                groups[groups.length - 1].rows.push(row);
+            }
+        }
+        return groups;
+    }, ...(ngDevMode ? [{ debugName: "_groupedRows" }] : []));
     _displayRows = computed(() => {
+        if (this.lazy()) {
+            return this.rows();
+        }
         if (!this.pageable())
             return this._filteredRows();
         const total = this._filteredRows().length;
@@ -1627,9 +1718,13 @@ class TableComponent {
         const start = (page - 1) * size;
         return this._filteredRows().slice(start, start + size);
     }, ...(ngDevMode ? [{ debugName: "_displayRows" }] : []));
-    _totalPages = computed(() => this.pageable() ? Math.max(1, Math.ceil(this._filteredRows().length / this._pageSize())) : 1, ...(ngDevMode ? [{ debugName: "_totalPages" }] : []));
+    _totalPages = computed(() => {
+        if (this.lazy())
+            return Math.max(1, Math.ceil(this.totalRecords() / this._pageSize()));
+        return this.pageable() ? Math.max(1, Math.ceil(this._filteredRows().length / this._pageSize())) : 1;
+    }, ...(ngDevMode ? [{ debugName: "_totalPages" }] : []));
     _pageInfo = computed(() => {
-        const total = this._filteredRows().length;
+        const total = this.lazy() ? this.totalRecords() : this._filteredRows().length;
         const page = this._page();
         const size = this._pageSize();
         const from = total > 0 ? (page - 1) * size + 1 : 0;
@@ -1673,27 +1768,92 @@ class TableComponent {
     _filterCols = computed(() => this._displayColumns().filter(c => c.filterable && c.filterOptions), ...(ngDevMode ? [{ debugName: "_filterCols" }] : []));
     _footerCols = computed(() => this._displayColumns().filter(c => c.footer), ...(ngDevMode ? [{ debugName: "_footerCols" }] : []));
     _footerText = computed(() => this._footerCols().map(c => c.footer(this._filteredRows())).join(' · '), ...(ngDevMode ? [{ debugName: "_footerText" }] : []));
+    _currentPageReportText = computed(() => {
+        const info = this._pageInfo();
+        return this.currentPageReport()
+            .replace('{currentPage}', String(this._page()))
+            .replace('{totalPages}', String(this._totalPages()))
+            .replace('{rows}', String(this._pageSize()))
+            .replace('{first}', String(info.from))
+            .replace('{last}', String(info.to))
+            .replace('{totalRecords}', String(info.total));
+    }, ...(ngDevMode ? [{ debugName: "_currentPageReportText" }] : []));
     _sortIcon(key) {
+        if (this.sortMode() === 'multiple') {
+            const meta = this._multiSortMeta().find(m => m.key === key);
+            if (!meta || !meta.direction)
+                return 'pi pi-sort-alt';
+            return meta.direction === 'asc' ? 'pi pi-sort-up' : 'pi pi-sort-down';
+        }
         if (this._sortKey() !== key || !this._sortDir())
             return 'pi pi-sort-alt';
         return this._sortDir() === 'asc' ? 'pi pi-sort-up' : 'pi pi-sort-down';
     }
     _toggleSort(key) {
-        if (this._sortKey() === key) {
-            if (this._sortDir() === 'asc')
-                this._sortDir.set('desc');
-            else if (this._sortDir() === 'desc') {
-                this._sortDir.set('');
-                this._sortKey.set('');
+        if (this.sortMode() === 'multiple') {
+            this._multiSortMeta.update(meta => {
+                const idx = meta.findIndex(m => m.key === key);
+                if (idx === -1)
+                    return [...meta, { key, direction: 'asc' }];
+                const current = meta[idx];
+                if (current.direction === 'asc') {
+                    const next = [...meta];
+                    next[idx] = { ...next[idx], direction: 'desc' };
+                    return next;
+                }
+                return meta.filter(m => m.key !== key);
+            });
+        }
+        else {
+            if (this._sortKey() === key) {
+                if (this._sortDir() === 'asc')
+                    this._sortDir.set('desc');
+                else if (this._sortDir() === 'desc') {
+                    this._sortDir.set('');
+                    this._sortKey.set('');
+                }
+                else
+                    this._sortDir.set('asc');
             }
-            else
+            else {
+                this._sortKey.set(key);
                 this._sortDir.set('asc');
+            }
         }
-        else {
-            this._sortKey.set(key);
-            this._sortDir.set('asc');
+        if (this.resetPageOnSort())
+            this._page.set(1);
+        const multiMeta = this._multiSortMeta();
+        this.sortChange.emit({
+            key: this._sortKey() || key,
+            direction: this._sortDir() || 'asc',
+            multiSortMeta: this.sortMode() === 'multiple' ? multiMeta : undefined,
+        });
+    }
+    _onRowClick(row, index, event) {
+        if (this.selectable()) {
+            if (this.metaKeySelection()) {
+                const key = this.selectionKey();
+                const val = key ? row[key] : null;
+                if (val == null)
+                    return;
+                this._selectedKeys.update(s => {
+                    const next = new Set(s);
+                    if (next.has(val))
+                        next.delete(val);
+                    else
+                        next.add(val);
+                    return next;
+                });
+                this._emitSelection();
+            }
+            else {
+                this._toggleSelect(row);
+            }
         }
-        this.sortChange.emit({ key: this._sortKey(), direction: this._sortDir() });
+        this.rowClick.emit({ row, index, event });
+    }
+    _onRowDblClick(row, index, event) {
+        this.rowDblClick.emit({ row, index, event });
     }
     _onSearch(value) { this._searchQuery.set(value ?? ''); }
     _setFilter(key, value) {
@@ -1704,6 +1864,7 @@ class TableComponent {
             }
             return { ...f, [key]: value };
         });
+        this.filterChange.emit(this._filters());
     }
     _colWidth(col) { return this._columnWidths()[col.key] || col.width || 'auto'; }
     _onResizeStart(event, key) {
@@ -1778,6 +1939,7 @@ class TableComponent {
             return;
         if (this._isAllSelected()) {
             this._selectedKeys.set(new Set());
+            this.selectAllChange.emit(false);
         }
         else {
             const keys = new Set();
@@ -1787,17 +1949,20 @@ class TableComponent {
                     keys.add(val);
             }
             this._selectedKeys.set(keys);
+            this.selectAllChange.emit(true);
         }
         this._emitSelection();
     }
     _emitSelection() {
-        const selected = this._selectedKeys();
+        const sel = this._selectedKeys();
         const key = this.selectionKey();
         if (!key) {
             this.selectedRows.emit([]);
             return;
         }
-        this.selectedRows.emit(this.rows().filter(row => { const val = row[key]; return val != null && selected.has(val); }));
+        const selected = this.rows().filter(row => { const val = row[key]; return val != null && sel.has(val); });
+        this.selectedRows.emit(selected);
+        this.selection.set(selected);
     }
     _isColumnVisible(k) { return !this._hiddenColumns().has(k); }
     _toggleColumn(k) { this._hiddenColumns.update(h => { const n = new Set(h); if (n.has(k))
@@ -1888,7 +2053,7 @@ class TableComponent {
     }
     _trackByIndex(index) { return index; }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.24", ngImport: i0, type: TableComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.24", type: TableComponent, isStandalone: true, selector: "app-table", inputs: { columns: { classPropertyName: "columns", publicName: "columns", isSignal: true, isRequired: false, transformFunction: null }, rows: { classPropertyName: "rows", publicName: "rows", isSignal: true, isRequired: false, transformFunction: null }, striped: { classPropertyName: "striped", publicName: "striped", isSignal: true, isRequired: false, transformFunction: null }, hoverable: { classPropertyName: "hoverable", publicName: "hoverable", isSignal: true, isRequired: false, transformFunction: null }, sortable: { classPropertyName: "sortable", publicName: "sortable", isSignal: true, isRequired: false, transformFunction: null }, emptyMessage: { classPropertyName: "emptyMessage", publicName: "emptyMessage", isSignal: true, isRequired: false, transformFunction: null }, width: { classPropertyName: "width", publicName: "width", isSignal: true, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, searchable: { classPropertyName: "searchable", publicName: "searchable", isSignal: true, isRequired: false, transformFunction: null }, filterable: { classPropertyName: "filterable", publicName: "filterable", isSignal: true, isRequired: false, transformFunction: null }, skeletonRows: { classPropertyName: "skeletonRows", publicName: "skeletonRows", isSignal: true, isRequired: false, transformFunction: null }, resizable: { classPropertyName: "resizable", publicName: "resizable", isSignal: true, isRequired: false, transformFunction: null }, pageable: { classPropertyName: "pageable", publicName: "pageable", isSignal: true, isRequired: false, transformFunction: null }, pageSize: { classPropertyName: "pageSize", publicName: "pageSize", isSignal: true, isRequired: false, transformFunction: null }, pageSizeOptions: { classPropertyName: "pageSizeOptions", publicName: "pageSizeOptions", isSignal: true, isRequired: false, transformFunction: null }, selectable: { classPropertyName: "selectable", publicName: "selectable", isSignal: true, isRequired: false, transformFunction: null }, selectionMode: { classPropertyName: "selectionMode", publicName: "selectionMode", isSignal: true, isRequired: false, transformFunction: null }, selectionKey: { classPropertyName: "selectionKey", publicName: "selectionKey", isSignal: true, isRequired: false, transformFunction: null }, stickyHeader: { classPropertyName: "stickyHeader", publicName: "stickyHeader", isSignal: true, isRequired: false, transformFunction: null }, exportable: { classPropertyName: "exportable", publicName: "exportable", isSignal: true, isRequired: false, transformFunction: null }, columnToggle: { classPropertyName: "columnToggle", publicName: "columnToggle", isSignal: true, isRequired: false, transformFunction: null }, expandable: { classPropertyName: "expandable", publicName: "expandable", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { sortChange: "sortChange", pageChange: "pageChange", selectedRows: "selectedRows" }, host: { listeners: { "document:mousemove": "_onDocMouseMove($event)", "document:mouseup": "_onDocMouseUp()", "document:click": "_onDocClick($event)" } }, queries: [{ propertyName: "rowDetail", first: true, predicate: ["rowDetail"], descendants: true, read: TemplateRef }], ngImport: i0, template: "@if (loading()) {\n  <app-table-skeleton [rows]=\"skeletonRows()\" [columns]=\"_skeletonCols()\" />\n} @else {\n  <div class=\"rz-tbl-wrapper\"\n    [style.width]=\"width() || '100%'\"\n    [style.border]=\"'1px solid var(--color-border-light,oklch(0.91 0.01 260))'\"\n  >\n    <table class=\"rz-tbl\" style=\"table-layout:fixed\">\n      <thead\n        [style.position]=\"stickyHeader() ? 'sticky' : undefined\"\n        [style.top]=\"stickyHeader() ? '0' : undefined\"\n        [style.z-index]=\"stickyHeader() ? '2' : undefined\"\n      >\n        <tr>\n          @if (selectable()) {\n            <th class=\"rz-tbl-header-checkbox\"\n              [style.background-color]=\"'var(--color-primary,oklch(0.32 0.09 258))'\"\n              [style.color]=\"'var(--color-primary-inverse,oklch(0.99 0 0))'\"\n            >\n              <input type=\"checkbox\" class=\"rz-tbl-checkbox\"\n                [checked]=\"_isAllSelected()\"\n                (change)=\"_toggleSelectAll()\"\n              />\n            </th>\n          }\n          @if (expandable()) {\n            <th class=\"rz-tbl-header-checkbox\"\n              [style.background-color]=\"'var(--color-primary,oklch(0.32 0.09 258))'\"\n              [style.color]=\"'var(--color-primary-inverse,oklch(0.99 0 0))'\"\n            ></th>\n          }\n          @for (col of _displayColumns(); track col.key) {\n            <th\n              class=\"rz-tbl-header\"\n              [style.text-align]=\"col.align || 'left'\"\n              [style.width]=\"_colWidth(col)\"\n              [style.background-color]=\"'var(--color-primary,oklch(0.32 0.09 258))'\"\n              [style.color]=\"'var(--color-primary-inverse,oklch(0.99 0 0))'\"\n              [class.rz-tbl-sortable]=\"col.sortable && sortable()\"\n              (click)=\"sortable() && col.sortable && _toggleSort(col.key)\"\n            >\n              {{ col.header }}\n              @if (col.sortable && sortable()) {\n                <i class=\"pi rz-tbl-sort-icon\" [class]=\"_sortIcon(col.key)\"></i>\n              }\n              @if (resizable()) {\n                <div class=\"rz-tbl-resize-handle\"\n                  (mousedown)=\"_onResizeStart($event,col.key)\"\n                ></div>\n              }\n            </th>\n          }\n        </tr>\n        @if (searchable() || _filterCols().length || exportable()) {\n          <tr>\n            <td [attr.colspan]=\"_colCount()\"\n              [style.background-color]=\"'var(--color-surface-alt,oklch(0.975 0.005 260))'\"\n              [style.border-bottom]=\"'1px solid var(--color-border-light,oklch(0.91 0.01 260))'\"\n              [style.padding]=\"'8px 12px'\"\n              [style.vertical-align]=\"'middle'\"\n            >\n              <div class=\"rz-tbl-toolbar\">\n                @if (searchable()) {\n                  <app-search-input\n                    (valueChange)=\"_onSearch($event)\"\n                    placeholder=\"Search table...\"\n                    size=\"sm\"\n                    style=\"padding-bottom:0\"\n                  />\n                }\n                @for (col of _filterCols(); track col.key) {\n                  <app-drop-down\n                    [options]=\"col.filterOptions ?? []\"\n                    [placeholder]=\"'Filter ' + col.header\"\n                    size=\"sm\"\n                    [searchable]=\"true\"\n                    [config]=\"{ appendToParent: true }\"\n                    style=\"padding-bottom:0\"\n                    (valueChange)=\"_setFilter(col.key, $event)\"\n                  />\n                }\n                @if (columnToggle()) {\n                <div data-col-toggle class=\"rz-tbl-col-toggle\">\n                  <button\n                    type=\"button\"\n                    (click)=\"_columnToggleOpen.set(!_columnToggleOpen())\"\n                    class=\"rz-tbl-toolbar-btn\"\n                    [style.border-color]=\"'var(--color-border-light,oklch(0.91 0.01 260))'\"\n                  ><i class=\"pi pi-list rz-tbl-icon\"></i> Columns</button>\n                  @if (_columnToggleOpen()) {\n                    <div class=\"rz-tbl-dropdown\"\n                      [style.background-color]=\"'var(--color-surface,oklch(0.99 0 0))'\"\n                    >\n                      @for (col of columns(); track col.key) {\n                        <label class=\"rz-tbl-dropdown-label\">\n                          <input type=\"checkbox\"\n                            [checked]=\"_isColumnVisible(col.key)\"\n                            (change)=\"_toggleColumn(col.key)\"\n                          />\n                          {{ col.header }}\n                        </label>\n                      }\n                    </div>\n                  }\n                </div>\n                }\n                @if (exportable()) {\n                  <div data-export-toggle class=\"rz-tbl-export-wrap\">\n                    <button\n                      type=\"button\"\n                      (click)=\"_exportOpen.set(!_exportOpen())\"\n                      class=\"rz-tbl-toolbar-btn\"\n                      [style.border-color]=\"'var(--color-border-light,oklch(0.91 0.01 260))'\"\n                    ><i class=\"pi pi-download rz-tbl-icon\"></i> Export</button>\n                    @if (_exportOpen()) {\n                      <div class=\"rz-tbl-export-dropdown\"\n                        [style.background-color]=\"'var(--color-surface,oklch(0.99 0 0))'\"\n                      >\n                        @for (fmt of ['Excel', 'PDF']; track fmt) {\n                          <button\n                            type=\"button\"\n                            (click)=\"fmt === 'Excel' ? _exportExcel() : _exportPdf(); _exportOpen.set(false)\"\n                            class=\"rz-tbl-export-opt\"\n                          >{{ fmt }}</button>\n                        }\n                      </div>\n                    }\n                  </div>\n                }\n              </div>\n            </td>\n          </tr>\n        }\n      </thead>\n      <tbody>\n        @if (_displayRows().length === 0) {\n          <tr>\n            <td [attr.colspan]=\"_colCount()\" class=\"rz-tbl-empty\">{{ emptyMessage() }}</td>\n          </tr>\n        } @else {\n          @for (row of _displayRows(); track _trackByIndex($index); let rowIndex = $index) {\n            <tr\n              class=\"rz-tbl-row\"\n              [class.rz-tbl-row-hoverable]=\"hoverable()\"\n              [style.background-color]=\"selectable() && _isSelected(row) ? 'color-mix(in srgb,var(--color-primary,oklch(0.32 0.09 258)) 8%,transparent)' : striped() && rowIndex % 2 === 1 ? 'var(--color-surface-alt,oklch(0.975 0.005 260))' : 'transparent'\"\n            >\n              @if (selectable()) {\n                <td class=\"rz-tbl-cell-center\">\n                  <input type=\"checkbox\" class=\"rz-tbl-checkbox\"\n                    [checked]=\"_isSelected(row)\"\n                    (change)=\"_toggleSelect(row)\"\n                  />\n                </td>\n              }\n              @if (expandable()) {\n                <td class=\"rz-tbl-cell-center\">\n                  <button\n                    type=\"button\"\n                    (click)=\"_toggleExpand(rowIndex)\"\n                    class=\"rz-tbl-expand-btn\"\n                  >\n                    <i class=\"pi rz-tbl-icon\" [class.pi-chevron-down]=\"_isExpanded(rowIndex)\" [class.pi-chevron-right]=\"!_isExpanded(rowIndex)\"></i>\n                  </button>\n                </td>\n              }\n              @for (col of _displayColumns(); track col.key; let colIndex = $index) {\n                @let meta = _rowMeta()[rowIndex][colIndex];\n                @if (meta.visible) {\n                    <td\n                      [attr.rowspan]=\"meta.rowspan > 1 ? meta.rowspan : null\"\n                      [style.text-align]=\"col.align || 'left'\"\n                      class=\"rz-tbl-cell\"\n                    >\n                      @if (col.actions) {\n                        <div class=\"rz-tbl-actions\">\n                          @for (action of col.actions; track $index) {\n                            @if (!action.visible || action.visible(row)) {\n                              <button\n                                type=\"button\"\n                                class=\"rz-tbl-action-btn\"\n                                [style.color]=\"action.accentColor ? 'var(--color-' + action.accentColor + ',oklch(0.32 0.09 258))' : 'var(--color-text-muted,oklch(0.48 0.01 260))'\"\n                                [style.opacity]=\"action.disabled?.(row) ? '0.5' : '1'\"\n                                [disabled]=\"action.disabled?.(row) ?? false\"\n                                (click)=\"action.click(row)\"\n                                [title]=\"action.label || ''\"\n                              >\n                                @if (action.icon) { <i [class]=\"action.icon\" class=\"rz-tbl-icon\"></i> }\n                                @if (action.label) { <span>{{ action.label }}</span> }\n                              </button>\n                            }\n                          }\n                        </div>\n                      } @else {\n                        <app-tooltip position=\"top\" [text]=\"_cellText(row, col)\">\n                          {{ _cellLabel(row, col) }}\n                        </app-tooltip>\n                      }\n                  </td>\n                }\n              }\n            </tr>\n            @if (expandable() && _isExpanded(rowIndex)) {\n              <tr class=\"rz-tbl-row\">\n                <td [attr.colspan]=\"_colCount()\" [style.padding]=\"'0'\">\n                  <div [style.background-color]=\"'var(--color-surface-alt,oklch(0.975 0.005 260))'\">\n                    @if (rowDetail) {\n                      <ng-container *ngTemplateOutlet=\"rowDetail; context: { $implicit: row }\" />\n                    } @else {\n                      <div class=\"rz-tbl-detail\">No detail template</div>\n                    }\n                  </div>\n                </td>\n              </tr>\n            }\n          }\n          @if (_footerCols().length) {\n            <tr class=\"rz-tbl-footer-row\"\n              [style.border-color]=\"'var(--color-primary,oklch(0.32 0.09 258))'\"\n              [style.background-color]=\"'var(--color-surface-alt,oklch(0.975 0.005 260))'\"\n            >\n              <td [attr.colspan]=\"_colCount()\" class=\"rz-tbl-cell\"\n                [style.color]=\"'var(--color-text,oklch(0.14 0.01 260))'\"\n              >{{ _footerText() }}</td>\n            </tr>\n          }\n        }\n      </tbody>\n    </table>\n    @if (pageable() && _totalPages() > 1) {\n      <div class=\"rz-tbl-paginator\">\n        <div class=\"rz-tbl-page-info\">\n          <span>{{ _pageInfo().from }}\u2013{{ _pageInfo().to }} of {{ _pageInfo().total }}</span>\n          <app-drop-down\n            [options]=\"_pageSizeOptions()\"\n            [value]=\"'' + _pageSize()\"\n            size=\"sm\"\n            [config]=\"{ direction: 'up' }\"\n            style=\"padding-bottom:0\"\n            (valueChange)=\"_onPageSizeChange($event)\"\n          />\n        </div>\n        <div class=\"rz-tbl-page-btns\">\n          <button type=\"button\" (click)=\"_goToPage(1)\" [disabled]=\"_page() === 1\"\n            class=\"rz-tbl-page-btn\"\n          ><i class=\"pi pi-angle-double-left rz-tbl-page-icon\"></i></button>\n          <button type=\"button\" (click)=\"_goToPage(_page() - 1)\" [disabled]=\"_page() === 1\"\n            class=\"rz-tbl-page-btn\"\n          ><i class=\"pi pi-angle-left rz-tbl-page-icon\"></i></button>\n          @for (p of _visiblePages(); track p) {\n            <button type=\"button\" (click)=\"_goToPage(p)\"\n              class=\"rz-tbl-page-btn\"\n              [style.background-color]=\"p === _page() ? 'var(--color-primary,oklch(0.32 0.09 258))' : 'transparent'\"\n              [style.color]=\"p === _page() ? 'var(--color-primary-inverse,oklch(0.99 0 0))' : 'var(--color-text-muted,oklch(0.48 0.01 260))'\"\n            >{{ p }}</button>\n          }\n          <button type=\"button\" (click)=\"_goToPage(_page() + 1)\" [disabled]=\"_page() === _totalPages()\"\n            class=\"rz-tbl-page-btn\"\n          ><i class=\"pi pi-angle-right rz-tbl-page-icon\"></i></button>\n          <button type=\"button\" (click)=\"_goToPage(_totalPages())\" [disabled]=\"_page() === _totalPages()\"\n            class=\"rz-tbl-page-btn\"\n          ><i class=\"pi pi-angle-double-right rz-tbl-page-icon\"></i></button>\n        </div>\n      </div>\n    }\n  </div>\n}\n", styles: [":host{display:contents}.rz-tbl-wrapper{overflow-x:auto;position:relative;border-radius:var(--radius-md, .5rem)}.rz-tbl{width:100%;border-collapse:collapse}.rz-tbl-header{position:relative;padding:.625rem .75rem;font-size:.75rem;font-weight:600;text-transform:uppercase;letter-spacing:.05em;white-space:nowrap}.rz-tbl-header-checkbox{padding:.625rem .75rem;font-size:.75rem;white-space:nowrap;text-align:center;width:40px}.rz-tbl-sortable{cursor:pointer;-webkit-user-select:none;user-select:none}.rz-tbl-checkbox{cursor:pointer}.rz-tbl-sort-icon{margin-left:.375rem;font-size:.625rem;vertical-align:middle}.rz-tbl-resize-handle{position:absolute;inset-inline-end:2px;top:0;bottom:0;width:6px;cursor:col-resize;z-index:10;border-inline-end:2px solid var(--color-accent, oklch(.64 .2 50));opacity:.5;transition:opacity .15s}.rz-tbl-header:hover .rz-tbl-resize-handle{opacity:1}.rz-tbl-toolbar{display:flex;align-items:center;flex-wrap:wrap;gap:.375rem}.rz-tbl-toolbar-btn{display:inline-flex;align-items:center;gap:.25rem;padding:.25rem .5rem;font-size:.75rem;border-radius:var(--radius-md, .5rem);border:1px solid var(--color-border-light, oklch(.91 .01 260));cursor:pointer;color:var(--color-text, oklch(.14 .01 260));background:transparent;transition:opacity .2s}.rz-tbl-toolbar-btn:hover{opacity:.8}.rz-tbl-icon{font-size:.625rem}.rz-tbl-col-toggle{position:relative;margin-left:auto}.rz-tbl-export-wrap{position:relative}.rz-tbl-dropdown{position:absolute;top:100%;right:0;margin-top:.25rem;min-width:140px;padding:.375rem;border-radius:var(--radius-md, .5rem);box-shadow:0 4px 12px #0000001a;z-index:50;border:1px solid var(--color-border-light, oklch(.91 .01 260));background:var(--color-surface, oklch(.99 0 0))}.rz-tbl-dropdown-label{display:flex;align-items:center;gap:.5rem;padding:.375rem .5rem;font-size:.75rem;border-radius:var(--radius-sm, .25rem);cursor:pointer;white-space:nowrap;color:var(--color-text, oklch(.14 .01 260));transition:background-color .2s}.rz-tbl-dropdown-label:hover{background-color:var(--color-surface-alt, oklch(.975 .005 260))}.rz-tbl-export-dropdown{position:absolute;top:100%;left:0;margin-top:.25rem;min-width:100px;padding:.25rem;border-radius:var(--radius-md, .5rem);box-shadow:0 4px 12px #0000001a;z-index:50;border:1px solid var(--color-border-light, oklch(.91 .01 260));background:var(--color-surface, oklch(.99 0 0))}.rz-tbl-export-opt{display:block;width:100%;text-align:left;padding:.375rem .5rem;font-size:.75rem;border-radius:var(--radius-sm, .25rem);cursor:pointer;border:none;background:transparent;color:var(--color-text, oklch(.14 .01 260));transition:background-color .2s}.rz-tbl-export-opt:hover{background-color:var(--color-surface-alt, oklch(.975 .005 260))}.rz-tbl-empty{padding:2rem .75rem;text-align:center;font-size:.875rem;color:var(--color-text-muted, oklch(.48 .01 260))}.rz-tbl-row{border-bottom:1px solid var(--color-border-light, oklch(.91 .01 260));transition:background-color .15s}.rz-tbl-row-hoverable:hover{background-color:var(--color-surface-alt, oklch(.975 .005 260))}.rz-tbl-cell{padding:.625rem .75rem;font-size:.875rem;color:var(--color-text, oklch(.14 .01 260));overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.rz-tbl-cell-center{padding:.625rem .75rem;text-align:center}.rz-tbl-actions{display:flex;align-items:center;gap:.25rem}.rz-tbl-action-btn{display:inline-flex;align-items:center;justify-content:center;gap:.25rem;padding:.25rem .5rem;font-size:.75rem;border-radius:var(--radius-md, .5rem);border:none;cursor:pointer;background:transparent;transition:opacity .15s}.rz-tbl-action-btn:disabled{cursor:not-allowed}.rz-tbl-expand-btn{display:inline-flex;align-items:center;justify-content:center;width:1.5rem;height:1.5rem;border:none;background:transparent;cursor:pointer;border-radius:var(--radius-sm, .25rem);color:var(--color-text-muted, oklch(.48 .01 260));transition:background-color .15s}.rz-tbl-expand-btn:hover{background-color:var(--color-surface-alt, oklch(.975 .005 260))}.rz-tbl-detail{padding:.75rem;font-size:.875rem;color:var(--color-text-muted, oklch(.48 .01 260))}.rz-tbl-footer-row{border-top:2px solid var(--color-primary, oklch(.32 .09 258));font-weight:500}.rz-tbl-paginator{display:flex;align-items:center;justify-content:space-between;padding:.5rem .75rem;border-top:1px solid var(--color-border-light, oklch(.91 .01 260));background:var(--color-surface, oklch(.99 0 0))}.rz-tbl-page-info{display:flex;align-items:center;gap:.5rem;font-size:.75rem;color:var(--color-text-muted, oklch(.48 .01 260))}.rz-tbl-page-btns{display:flex;align-items:center;gap:.125rem}.rz-tbl-page-btn{display:inline-flex;align-items:center;justify-content:center;width:1.75rem;height:1.75rem;font-size:.75rem;border-radius:var(--radius-sm, .25rem);border:none;cursor:pointer;background:transparent;color:var(--color-text-muted, oklch(.48 .01 260));transition:background-color .15s,color .15s;font-weight:500}.rz-tbl-page-btn:disabled{opacity:.3;cursor:not-allowed}.rz-tbl-page-icon{font-size:.625rem}\n"], dependencies: [{ kind: "component", type: SearchInputComponent, selector: "app-search-input", inputs: ["value", "placeholder", "size", "disabled", "accentColor", "hint", "errorMessage", "error", "width"], outputs: ["valueChange"] }, { kind: "component", type: DropDownComponent, selector: "app-drop-down", inputs: ["value", "options", "placeholder", "size", "disabled", "accentColor", "searchable", "hint", "errorMessage", "error", "width", "config", "appendTo"], outputs: ["valueChange"] }, { kind: "component", type: TableSkeletonComponent, selector: "app-table-skeleton", inputs: ["rows", "columns"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: TooltipComponent, selector: "app-tooltip", inputs: ["text", "position", "disabled", "alwaysShow"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.24", type: TableComponent, isStandalone: true, selector: "app-table", inputs: { columns: { classPropertyName: "columns", publicName: "columns", isSignal: true, isRequired: false, transformFunction: null }, rows: { classPropertyName: "rows", publicName: "rows", isSignal: true, isRequired: false, transformFunction: null }, striped: { classPropertyName: "striped", publicName: "striped", isSignal: true, isRequired: false, transformFunction: null }, hoverable: { classPropertyName: "hoverable", publicName: "hoverable", isSignal: true, isRequired: false, transformFunction: null }, sortable: { classPropertyName: "sortable", publicName: "sortable", isSignal: true, isRequired: false, transformFunction: null }, emptyMessage: { classPropertyName: "emptyMessage", publicName: "emptyMessage", isSignal: true, isRequired: false, transformFunction: null }, width: { classPropertyName: "width", publicName: "width", isSignal: true, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, searchable: { classPropertyName: "searchable", publicName: "searchable", isSignal: true, isRequired: false, transformFunction: null }, filterable: { classPropertyName: "filterable", publicName: "filterable", isSignal: true, isRequired: false, transformFunction: null }, skeletonRows: { classPropertyName: "skeletonRows", publicName: "skeletonRows", isSignal: true, isRequired: false, transformFunction: null }, resizable: { classPropertyName: "resizable", publicName: "resizable", isSignal: true, isRequired: false, transformFunction: null }, pageable: { classPropertyName: "pageable", publicName: "pageable", isSignal: true, isRequired: false, transformFunction: null }, pageSize: { classPropertyName: "pageSize", publicName: "pageSize", isSignal: true, isRequired: false, transformFunction: null }, pageSizeOptions: { classPropertyName: "pageSizeOptions", publicName: "pageSizeOptions", isSignal: true, isRequired: false, transformFunction: null }, selectable: { classPropertyName: "selectable", publicName: "selectable", isSignal: true, isRequired: false, transformFunction: null }, selectionMode: { classPropertyName: "selectionMode", publicName: "selectionMode", isSignal: true, isRequired: false, transformFunction: null }, selectionKey: { classPropertyName: "selectionKey", publicName: "selectionKey", isSignal: true, isRequired: false, transformFunction: null }, stickyHeader: { classPropertyName: "stickyHeader", publicName: "stickyHeader", isSignal: true, isRequired: false, transformFunction: null }, exportable: { classPropertyName: "exportable", publicName: "exportable", isSignal: true, isRequired: false, transformFunction: null }, columnToggle: { classPropertyName: "columnToggle", publicName: "columnToggle", isSignal: true, isRequired: false, transformFunction: null }, expandable: { classPropertyName: "expandable", publicName: "expandable", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, showGridlines: { classPropertyName: "showGridlines", publicName: "showGridlines", isSignal: true, isRequired: false, transformFunction: null }, sortMode: { classPropertyName: "sortMode", publicName: "sortMode", isSignal: true, isRequired: false, transformFunction: null }, alwaysShowPaginator: { classPropertyName: "alwaysShowPaginator", publicName: "alwaysShowPaginator", isSignal: true, isRequired: false, transformFunction: null }, showFirstLastIcon: { classPropertyName: "showFirstLastIcon", publicName: "showFirstLastIcon", isSignal: true, isRequired: false, transformFunction: null }, currentPageReport: { classPropertyName: "currentPageReport", publicName: "currentPageReport", isSignal: true, isRequired: false, transformFunction: null }, showCurrentPageReport: { classPropertyName: "showCurrentPageReport", publicName: "showCurrentPageReport", isSignal: true, isRequired: false, transformFunction: null }, resetPageOnSort: { classPropertyName: "resetPageOnSort", publicName: "resetPageOnSort", isSignal: true, isRequired: false, transformFunction: null }, metaKeySelection: { classPropertyName: "metaKeySelection", publicName: "metaKeySelection", isSignal: true, isRequired: false, transformFunction: null }, customSort: { classPropertyName: "customSort", publicName: "customSort", isSignal: true, isRequired: false, transformFunction: null }, globalFilterFields: { classPropertyName: "globalFilterFields", publicName: "globalFilterFields", isSignal: true, isRequired: false, transformFunction: null }, lazy: { classPropertyName: "lazy", publicName: "lazy", isSignal: true, isRequired: false, transformFunction: null }, totalRecords: { classPropertyName: "totalRecords", publicName: "totalRecords", isSignal: true, isRequired: false, transformFunction: null }, responsiveLayout: { classPropertyName: "responsiveLayout", publicName: "responsiveLayout", isSignal: true, isRequired: false, transformFunction: null }, groupRowsBy: { classPropertyName: "groupRowsBy", publicName: "groupRowsBy", isSignal: true, isRequired: false, transformFunction: null }, rowGroupMode: { classPropertyName: "rowGroupMode", publicName: "rowGroupMode", isSignal: true, isRequired: false, transformFunction: null }, selection: { classPropertyName: "selection", publicName: "selection", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { sortChange: "sortChange", pageChange: "pageChange", selectedRows: "selectedRows", rowClick: "rowClick", rowDblClick: "rowDblClick", selectAllChange: "selectAllChange", filterChange: "filterChange", selection: "selectionChange" }, host: { listeners: { "document:mousemove": "_onDocMouseMove($event)", "document:mouseup": "_onDocMouseUp()", "document:click": "_onDocClick($event)" } }, queries: [{ propertyName: "rowDetail", first: true, predicate: ["rowDetail"], descendants: true, read: TemplateRef }], ngImport: i0, template: "@if (loading()) {\n  <app-table-skeleton [rows]=\"skeletonRows()\" [columns]=\"_skeletonCols()\" />\n} @else {\n  <div class=\"rz-tbl-wrapper\"\n    [style.width]=\"width() || '100%'\"\n    [style.border]=\"'1px solid var(--color-border-light,oklch(0.91 0.01 260))'\"\n    [class.rz-tbl-stack]=\"responsiveLayout() === 'stack'\"\n  >\n    <table [class]=\"_tableClass()\" style=\"table-layout:fixed\">\n      <thead\n        [style.position]=\"stickyHeader() ? 'sticky' : undefined\"\n        [style.top]=\"stickyHeader() ? '0' : undefined\"\n        [style.z-index]=\"stickyHeader() ? '2' : undefined\"\n      >\n        <tr>\n          @if (selectable()) {\n            <th class=\"rz-tbl-header-checkbox\"\n              [style.background-color]=\"'var(--color-primary,oklch(0.32 0.09 258))'\"\n              [style.color]=\"'var(--color-primary-inverse,oklch(0.99 0 0))'\"\n            >\n              <input type=\"checkbox\" class=\"rz-tbl-checkbox\"\n                [checked]=\"_isAllSelected()\"\n                (change)=\"_toggleSelectAll()\"\n              />\n            </th>\n          }\n          @if (expandable()) {\n            <th class=\"rz-tbl-header-checkbox\"\n              [style.background-color]=\"'var(--color-primary,oklch(0.32 0.09 258))'\"\n              [style.color]=\"'var(--color-primary-inverse,oklch(0.99 0 0))'\"\n            ></th>\n          }\n          @for (col of _displayColumns(); track col.key) {\n            <th\n              class=\"rz-tbl-header\"\n              [style.text-align]=\"col.align || 'left'\"\n              [style.width]=\"_colWidth(col)\"\n              [style.background-color]=\"'var(--color-primary,oklch(0.32 0.09 258))'\"\n              [style.color]=\"'var(--color-primary-inverse,oklch(0.99 0 0))'\"\n              [class.rz-tbl-sortable]=\"col.sortable && sortable()\"\n              (click)=\"sortable() && col.sortable && _toggleSort(col.key)\"\n            >\n              {{ col.header }}\n              @if (col.sortable && sortable()) {\n                <i class=\"pi rz-tbl-sort-icon\" [class]=\"_sortIcon(col.key)\"></i>\n              }\n              @if (resizable()) {\n                <div class=\"rz-tbl-resize-handle\"\n                  (mousedown)=\"_onResizeStart($event,col.key)\"\n                ></div>\n              }\n            </th>\n          }\n        </tr>\n        @if (searchable() || _filterCols().length || exportable() || columnToggle()) {\n          <tr>\n            <td [attr.colspan]=\"_colCount()\"\n              [style.background-color]=\"'var(--color-surface-alt,oklch(0.975 0.005 260))'\"\n              [style.border-bottom]=\"'1px solid var(--color-border-light,oklch(0.91 0.01 260))'\"\n              [style.padding]=\"'8px 12px'\"\n              [style.vertical-align]=\"'middle'\"\n            >\n              <div class=\"rz-tbl-toolbar\">\n                @if (searchable()) {\n                  <app-search-input\n                    (valueChange)=\"_onSearch($event)\"\n                    placeholder=\"Search table...\"\n                    size=\"sm\"\n                    style=\"padding-bottom:0\"\n                  />\n                }\n                @for (col of _filterCols(); track col.key) {\n                  <app-drop-down\n                    [options]=\"col.filterOptions ?? []\"\n                    [placeholder]=\"'Filter ' + col.header\"\n                    size=\"sm\"\n                    [searchable]=\"true\"\n                    [config]=\"{ appendToParent: true }\"\n                    style=\"padding-bottom:0\"\n                    (valueChange)=\"_setFilter(col.key, $event)\"\n                  />\n                }\n                @if (columnToggle()) {\n                <div data-col-toggle class=\"rz-tbl-col-toggle\">\n                  <button\n                    type=\"button\"\n                    (click)=\"_columnToggleOpen.set(!_columnToggleOpen())\"\n                    class=\"rz-tbl-toolbar-btn\"\n                    [style.border-color]=\"'var(--color-border-light,oklch(0.91 0.01 260))'\"\n                  ><i class=\"pi pi-list rz-tbl-icon\"></i> Columns</button>\n                  @if (_columnToggleOpen()) {\n                    <div class=\"rz-tbl-dropdown\"\n                      [style.background-color]=\"'var(--color-surface,oklch(0.99 0 0))'\"\n                    >\n                      @for (col of columns(); track col.key) {\n                        <label class=\"rz-tbl-dropdown-label\">\n                          <input type=\"checkbox\"\n                            [checked]=\"_isColumnVisible(col.key)\"\n                            (change)=\"_toggleColumn(col.key)\"\n                          />\n                          {{ col.header }}\n                        </label>\n                      }\n                    </div>\n                  }\n                </div>\n                }\n                @if (exportable()) {\n                  <div data-export-toggle class=\"rz-tbl-export-wrap\">\n                    <button\n                      type=\"button\"\n                      (click)=\"_exportOpen.set(!_exportOpen())\"\n                      class=\"rz-tbl-toolbar-btn\"\n                      [style.border-color]=\"'var(--color-border-light,oklch(0.91 0.01 260))'\"\n                    ><i class=\"pi pi-download rz-tbl-icon\"></i> Export</button>\n                    @if (_exportOpen()) {\n                      <div class=\"rz-tbl-export-dropdown\"\n                        [style.background-color]=\"'var(--color-surface,oklch(0.99 0 0))'\"\n                      >\n                        @for (fmt of ['Excel', 'PDF']; track fmt) {\n                          <button\n                            type=\"button\"\n                            (click)=\"fmt === 'Excel' ? _exportExcel() : _exportPdf(); _exportOpen.set(false)\"\n                            class=\"rz-tbl-export-opt\"\n                          >{{ fmt }}</button>\n                        }\n                      </div>\n                    }\n                  </div>\n                }\n              </div>\n            </td>\n          </tr>\n        }\n      </thead>\n      <tbody>\n        @if (_displayRows().length === 0) {\n          <tr>\n            <td [attr.colspan]=\"_colCount()\" class=\"rz-tbl-empty\">{{ emptyMessage() }}</td>\n          </tr>\n        } @else {\n          @if (_groupedRows(); as groups) {\n            @for (group of groups; track group.key) {\n              @if (rowGroupMode() === 'subheader') {\n                <tr class=\"rz-tbl-group-header\">\n                  <td [attr.colspan]=\"_colCount()\">{{ group.key }}</td>\n                </tr>\n              }\n              @for (row of group.rows; track _trackByIndex($index); let rowIndex = $index) {\n                <tr\n                  class=\"rz-tbl-row\"\n                  [class.rz-tbl-row-hoverable]=\"hoverable()\"\n                  [class.rz-tbl-row-selected]=\"selectable() && _isSelected(row)\"\n                  (click)=\"_onRowClick(row, rowIndex, $event)\"\n                  (dblclick)=\"_onRowDblClick(row, rowIndex, $event)\"\n                  [style.background-color]=\"selectable() && _isSelected(row) ? 'color-mix(in srgb,var(--color-primary,oklch(0.32 0.09 258)) 8%,transparent)' : striped() && rowIndex % 2 === 1 ? 'var(--color-surface-alt,oklch(0.975 0.005 260))' : 'transparent'\"\n                >\n                  @if (selectable()) {\n                    <td class=\"rz-tbl-cell-center\">\n                      <input type=\"checkbox\" class=\"rz-tbl-checkbox\"\n                        [checked]=\"_isSelected(row)\"\n                        (change)=\"_toggleSelect(row); $event.stopPropagation()\"\n                      />\n                    </td>\n                  }\n                  @if (expandable()) {\n                    <td class=\"rz-tbl-cell-center\">\n                      <button\n                        type=\"button\"\n                        (click)=\"_toggleExpand(rowIndex); $event.stopPropagation()\"\n                        class=\"rz-tbl-expand-btn\"\n                      >\n                        <i class=\"pi rz-tbl-icon\" [class.pi-chevron-down]=\"_isExpanded(rowIndex)\" [class.pi-chevron-right]=\"!_isExpanded(rowIndex)\"></i>\n                      </button>\n                    </td>\n                  }\n                  @for (col of _displayColumns(); track col.key; let colIndex = $index) {\n                    @let meta = _rowMeta()[rowIndex][colIndex];\n                    @if (meta.visible) {\n                        <td\n                          [attr.rowspan]=\"meta.rowspan > 1 ? meta.rowspan : null\"\n                          [style.text-align]=\"col.align || 'left'\"\n                          class=\"rz-tbl-cell\"\n                          [attr.data-label]=\"responsiveLayout() === 'stack' ? col.header : null\"\n                        >\n                          @if (col.actions) {\n                            <div class=\"rz-tbl-actions\">\n                              @for (action of col.actions; track $index) {\n                                @if (!action.visible || action.visible(row)) {\n                                  <button\n                                    type=\"button\"\n                                    class=\"rz-tbl-action-btn\"\n                                    [style.color]=\"action.accentColor ? 'var(--color-' + action.accentColor + ',oklch(0.32 0.09 258))' : 'var(--color-text-muted,oklch(0.48 0.01 260))'\"\n                                    [style.opacity]=\"action.disabled?.(row) ? '0.5' : '1'\"\n                                    [disabled]=\"action.disabled?.(row) ?? false\"\n                                    (click)=\"action.click(row)\"\n                                    [title]=\"action.label || ''\"\n                                  >\n                                    @if (action.icon) { <i [class]=\"action.icon\" class=\"rz-tbl-icon\"></i> }\n                                    @if (action.label) { <span>{{ action.label }}</span> }\n                                  </button>\n                                }\n                              }\n                            </div>\n                          } @else {\n                            <app-tooltip position=\"top\" [text]=\"_cellText(row, col)\">\n                              {{ _cellLabel(row, col) }}\n                            </app-tooltip>\n                          }\n                      </td>\n                    }\n                  }\n                </tr>\n                @if (expandable() && _isExpanded(rowIndex)) {\n                  <tr class=\"rz-tbl-row\">\n                    <td [attr.colspan]=\"_colCount()\" [style.padding]=\"'0'\">\n                      <div [style.background-color]=\"'var(--color-surface-alt,oklch(0.975 0.005 260))'\">\n                        @if (rowDetail) {\n                          <ng-container *ngTemplateOutlet=\"rowDetail; context: { $implicit: row }\" />\n                        } @else {\n                          <div class=\"rz-tbl-detail\">No detail template</div>\n                        }\n                      </div>\n                    </td>\n                  </tr>\n                }\n              }\n            }\n          } @else {\n            @for (row of _displayRows(); track _trackByIndex($index); let rowIndex = $index) {\n              <tr\n                class=\"rz-tbl-row\"\n                [class.rz-tbl-row-hoverable]=\"hoverable()\"\n                [class.rz-tbl-row-selected]=\"selectable() && _isSelected(row)\"\n                (click)=\"_onRowClick(row, rowIndex, $event)\"\n                (dblclick)=\"_onRowDblClick(row, rowIndex, $event)\"\n                [style.background-color]=\"selectable() && _isSelected(row) ? 'color-mix(in srgb,var(--color-primary,oklch(0.32 0.09 258)) 8%,transparent)' : striped() && rowIndex % 2 === 1 ? 'var(--color-surface-alt,oklch(0.975 0.005 260))' : 'transparent'\"\n              >\n                @if (selectable()) {\n                  <td class=\"rz-tbl-cell-center\">\n                    <input type=\"checkbox\" class=\"rz-tbl-checkbox\"\n                      [checked]=\"_isSelected(row)\"\n                      (change)=\"_toggleSelect(row); $event.stopPropagation()\"\n                    />\n                  </td>\n                }\n                @if (expandable()) {\n                  <td class=\"rz-tbl-cell-center\">\n                    <button\n                      type=\"button\"\n                      (click)=\"_toggleExpand(rowIndex); $event.stopPropagation()\"\n                      class=\"rz-tbl-expand-btn\"\n                    >\n                      <i class=\"pi rz-tbl-icon\" [class.pi-chevron-down]=\"_isExpanded(rowIndex)\" [class.pi-chevron-right]=\"!_isExpanded(rowIndex)\"></i>\n                    </button>\n                  </td>\n                }\n                @for (col of _displayColumns(); track col.key; let colIndex = $index) {\n                  @let meta = _rowMeta()[rowIndex][colIndex];\n                  @if (meta.visible) {\n                      <td\n                        [attr.rowspan]=\"meta.rowspan > 1 ? meta.rowspan : null\"\n                        [style.text-align]=\"col.align || 'left'\"\n                        class=\"rz-tbl-cell\"\n                        [attr.data-label]=\"responsiveLayout() === 'stack' ? col.header : null\"\n                      >\n                        @if (col.actions) {\n                          <div class=\"rz-tbl-actions\">\n                            @for (action of col.actions; track $index) {\n                              @if (!action.visible || action.visible(row)) {\n                                <button\n                                  type=\"button\"\n                                  class=\"rz-tbl-action-btn\"\n                                  [style.color]=\"action.accentColor ? 'var(--color-' + action.accentColor + ',oklch(0.32 0.09 258))' : 'var(--color-text-muted,oklch(0.48 0.01 260))'\"\n                                  [style.opacity]=\"action.disabled?.(row) ? '0.5' : '1'\"\n                                  [disabled]=\"action.disabled?.(row) ?? false\"\n                                  (click)=\"action.click(row)\"\n                                  [title]=\"action.label || ''\"\n                                >\n                                  @if (action.icon) { <i [class]=\"action.icon\" class=\"rz-tbl-icon\"></i> }\n                                  @if (action.label) { <span>{{ action.label }}</span> }\n                                </button>\n                              }\n                            }\n                          </div>\n                        } @else {\n                          <app-tooltip position=\"top\" [text]=\"_cellText(row, col)\">\n                            {{ _cellLabel(row, col) }}\n                          </app-tooltip>\n                        }\n                    </td>\n                  }\n                }\n              </tr>\n              @if (expandable() && _isExpanded(rowIndex)) {\n                <tr class=\"rz-tbl-row\">\n                  <td [attr.colspan]=\"_colCount()\" [style.padding]=\"'0'\">\n                    <div [style.background-color]=\"'var(--color-surface-alt,oklch(0.975 0.005 260))'\">\n                      @if (rowDetail) {\n                        <ng-container *ngTemplateOutlet=\"rowDetail; context: { $implicit: row }\" />\n                      } @else {\n                        <div class=\"rz-tbl-detail\">No detail template</div>\n                      }\n                    </div>\n                  </td>\n                </tr>\n              }\n            }\n          }\n          @if (_footerCols().length) {\n            <tr class=\"rz-tbl-footer-row\"\n              [style.border-color]=\"'var(--color-primary,oklch(0.32 0.09 258))'\"\n              [style.background-color]=\"'var(--color-surface-alt,oklch(0.975 0.005 260))'\"\n            >\n              <td [attr.colspan]=\"_colCount()\" class=\"rz-tbl-cell\"\n                [style.color]=\"'var(--color-text,oklch(0.14 0.01 260))'\"\n              >{{ _footerText() }}</td>\n            </tr>\n          }\n        }\n      </tbody>\n    </table>\n    @if (pageable() && !_hidePaginator()) {\n      <div class=\"rz-tbl-paginator\">\n        <div class=\"rz-tbl-page-info\">\n          @if (showCurrentPageReport()) {\n            <span>{{ _currentPageReportText() }}</span>\n          } @else {\n            <span>{{ _pageInfo().from }}\u2013{{ _pageInfo().to }} of {{ _pageInfo().total }}</span>\n          }\n          <app-drop-down\n            [options]=\"_pageSizeOptions()\"\n            [value]=\"'' + _pageSize()\"\n            size=\"sm\"\n            [config]=\"{ direction: 'up' }\"\n            style=\"padding-bottom:0\"\n            (valueChange)=\"_onPageSizeChange($event)\"\n          />\n        </div>\n        <div class=\"rz-tbl-page-btns\">\n          @if (showFirstLastIcon()) {\n            <button type=\"button\" (click)=\"_goToPage(1)\" [disabled]=\"_page() === 1\"\n              class=\"rz-tbl-page-btn\"\n            ><i class=\"pi pi-angle-double-left rz-tbl-page-icon\"></i></button>\n          }\n          <button type=\"button\" (click)=\"_goToPage(_page() - 1)\" [disabled]=\"_page() === 1\"\n            class=\"rz-tbl-page-btn\"\n          ><i class=\"pi pi-angle-left rz-tbl-page-icon\"></i></button>\n          @for (p of _visiblePages(); track p) {\n            <button type=\"button\" (click)=\"_goToPage(p)\"\n              class=\"rz-tbl-page-btn\"\n              [style.background-color]=\"p === _page() ? 'var(--color-primary,oklch(0.32 0.09 258))' : 'transparent'\"\n              [style.color]=\"p === _page() ? 'var(--color-primary-inverse,oklch(0.99 0 0))' : 'var(--color-text-muted,oklch(0.48 0.01 260))'\"\n            >{{ p }}</button>\n          }\n          <button type=\"button\" (click)=\"_goToPage(_page() + 1)\" [disabled]=\"_page() === _totalPages()\"\n            class=\"rz-tbl-page-btn\"\n          ><i class=\"pi pi-angle-right rz-tbl-page-icon\"></i></button>\n          @if (showFirstLastIcon()) {\n            <button type=\"button\" (click)=\"_goToPage(_totalPages())\" [disabled]=\"_page() === _totalPages()\"\n              class=\"rz-tbl-page-btn\"\n            ><i class=\"pi pi-angle-double-right rz-tbl-page-icon\"></i></button>\n          }\n        </div>\n      </div>\n    }\n  </div>\n}\n", styles: [":host{display:contents}.rz-tbl-wrapper{overflow-x:auto;position:relative;border-radius:var(--radius-md, .5rem)}.rz-tbl{width:100%;border-collapse:collapse}.rz-tbl-sm .rz-tbl-header,.rz-tbl-sm .rz-tbl-cell,.rz-tbl-sm .rz-tbl-cell-center{padding:.375rem .5rem;font-size:.75rem}.rz-tbl-lg .rz-tbl-header,.rz-tbl-lg .rz-tbl-cell,.rz-tbl-lg .rz-tbl-cell-center{padding:.875rem 1rem;font-size:1rem}.rz-tbl-gridlines .rz-tbl-header,.rz-tbl-gridlines .rz-tbl-cell,.rz-tbl-gridlines .rz-tbl-cell-center{border:1px solid var(--color-border-light, oklch(.91 .01 260))}.rz-tbl-striped .rz-tbl-row:nth-child(2n) td{background-color:var(--color-surface-alt, oklch(.975 .005 260))}.rz-tbl-header{position:relative;padding:.625rem .75rem;font-size:.75rem;font-weight:600;text-transform:uppercase;letter-spacing:.05em;white-space:nowrap}.rz-tbl-header-checkbox{padding:.625rem .75rem;font-size:.75rem;white-space:nowrap;text-align:center;width:40px}.rz-tbl-sortable{cursor:pointer;-webkit-user-select:none;user-select:none}.rz-tbl-checkbox{cursor:pointer}.rz-tbl-sort-icon{margin-left:.375rem;font-size:.625rem;vertical-align:middle}.rz-tbl-resize-handle{position:absolute;inset-inline-end:2px;top:0;bottom:0;width:6px;cursor:col-resize;z-index:10;border-inline-end:2px solid var(--color-accent, oklch(.64 .2 50));opacity:.5;transition:opacity .15s}.rz-tbl-header:hover .rz-tbl-resize-handle{opacity:1}.rz-tbl-toolbar{display:flex;align-items:center;flex-wrap:wrap;gap:.375rem}.rz-tbl-toolbar-btn{display:inline-flex;align-items:center;gap:.25rem;padding:.25rem .5rem;font-size:.75rem;border-radius:var(--radius-md, .5rem);border:1px solid var(--color-border-light, oklch(.91 .01 260));cursor:pointer;color:var(--color-text, oklch(.14 .01 260));background:transparent;transition:opacity .2s}.rz-tbl-toolbar-btn:hover{opacity:.8}.rz-tbl-icon{font-size:.625rem}.rz-tbl-col-toggle{position:relative;margin-left:auto}.rz-tbl-export-wrap{position:relative}.rz-tbl-dropdown{position:absolute;top:100%;right:0;margin-top:.25rem;min-width:140px;padding:.375rem;border-radius:var(--radius-md, .5rem);box-shadow:0 4px 12px #0000001a;z-index:50;border:1px solid var(--color-border-light, oklch(.91 .01 260));background:var(--color-surface, oklch(.99 0 0))}.rz-tbl-dropdown-label{display:flex;align-items:center;gap:.5rem;padding:.375rem .5rem;font-size:.75rem;border-radius:var(--radius-sm, .25rem);cursor:pointer;white-space:nowrap;color:var(--color-text, oklch(.14 .01 260));transition:background-color .2s}.rz-tbl-dropdown-label:hover{background-color:var(--color-surface-alt, oklch(.975 .005 260))}.rz-tbl-export-dropdown{position:absolute;top:100%;left:0;margin-top:.25rem;min-width:100px;padding:.25rem;border-radius:var(--radius-md, .5rem);box-shadow:0 4px 12px #0000001a;z-index:50;border:1px solid var(--color-border-light, oklch(.91 .01 260));background:var(--color-surface, oklch(.99 0 0))}.rz-tbl-export-opt{display:block;width:100%;text-align:left;padding:.375rem .5rem;font-size:.75rem;border-radius:var(--radius-sm, .25rem);cursor:pointer;border:none;background:transparent;color:var(--color-text, oklch(.14 .01 260));transition:background-color .2s}.rz-tbl-export-opt:hover{background-color:var(--color-surface-alt, oklch(.975 .005 260))}.rz-tbl-empty{padding:2rem .75rem;text-align:center;font-size:.875rem;color:var(--color-text-muted, oklch(.48 .01 260))}.rz-tbl-row{border-bottom:1px solid var(--color-border-light, oklch(.91 .01 260));transition:background-color .15s}.rz-tbl-row-hoverable:hover{background-color:var(--color-surface-alt, oklch(.975 .005 260))}.rz-tbl-row-selected{background-color:color-mix(in srgb,var(--color-primary, oklch(.32 .09 258)) 8%,transparent)!important}.rz-tbl-cell{padding:.625rem .75rem;font-size:.875rem;color:var(--color-text, oklch(.14 .01 260));overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.rz-tbl-cell-center{padding:.625rem .75rem;text-align:center}.rz-tbl-actions{display:flex;align-items:center;gap:.25rem}.rz-tbl-action-btn{display:inline-flex;align-items:center;justify-content:center;gap:.25rem;padding:.25rem .5rem;font-size:.75rem;border-radius:var(--radius-md, .5rem);border:none;cursor:pointer;background:transparent;transition:opacity .15s}.rz-tbl-action-btn:disabled{cursor:not-allowed}.rz-tbl-expand-btn{display:inline-flex;align-items:center;justify-content:center;width:1.5rem;height:1.5rem;border:none;background:transparent;cursor:pointer;border-radius:var(--radius-sm, .25rem);color:var(--color-text-muted, oklch(.48 .01 260));transition:background-color .15s}.rz-tbl-expand-btn:hover{background-color:var(--color-surface-alt, oklch(.975 .005 260))}.rz-tbl-detail{padding:.75rem;font-size:.875rem;color:var(--color-text-muted, oklch(.48 .01 260))}.rz-tbl-footer-row{border-top:2px solid var(--color-primary, oklch(.32 .09 258));font-weight:500}.rz-tbl-paginator{display:flex;align-items:center;justify-content:space-between;padding:.5rem .75rem;border-top:1px solid var(--color-border-light, oklch(.91 .01 260));background:var(--color-surface, oklch(.99 0 0))}.rz-tbl-page-info{display:flex;align-items:center;gap:.5rem;font-size:.75rem;color:var(--color-text-muted, oklch(.48 .01 260))}.rz-tbl-page-btns{display:flex;align-items:center;gap:.125rem}.rz-tbl-page-btn{display:inline-flex;align-items:center;justify-content:center;width:1.75rem;height:1.75rem;font-size:.75rem;border-radius:var(--radius-sm, .25rem);border:none;cursor:pointer;background:transparent;color:var(--color-text-muted, oklch(.48 .01 260));transition:background-color .15s,color .15s;font-weight:500}.rz-tbl-page-btn:disabled{opacity:.3;cursor:not-allowed}.rz-tbl-page-icon{font-size:.625rem}.rz-tbl-group-header td{padding:.5rem .75rem;font-size:.8rem;font-weight:700;background-color:var(--color-surface-alt, oklch(.975 .005 260));color:var(--color-text, oklch(.14 .01 260));text-transform:uppercase;letter-spacing:.04em;border-bottom:2px solid var(--color-primary, oklch(.32 .09 258))}.rz-tbl-stack table,.rz-tbl-stack thead,.rz-tbl-stack tbody,.rz-tbl-stack th,.rz-tbl-stack td,.rz-tbl-stack tr{display:block}.rz-tbl-stack thead tr{position:absolute;top:-9999px;left:-9999px}.rz-tbl-stack tr{border:1px solid var(--color-border-light, oklch(.91 .01 260));margin-bottom:.5rem;border-radius:var(--radius-md, .5rem);overflow:hidden}.rz-tbl-stack td{border:none;position:relative;padding-left:50%!important;white-space:normal;text-overflow:clip}.rz-tbl-stack td:before{content:attr(data-label);position:absolute;left:.75rem;width:calc(50% - 1rem);font-weight:600;font-size:.7rem;text-transform:uppercase;letter-spacing:.04em;color:var(--color-text-muted, oklch(.48 .01 260));white-space:nowrap;overflow:hidden;text-overflow:ellipsis}\n"], dependencies: [{ kind: "component", type: SearchInputComponent, selector: "app-search-input", inputs: ["value", "placeholder", "size", "disabled", "accentColor", "hint", "errorMessage", "error", "width"], outputs: ["valueChange"] }, { kind: "component", type: DropDownComponent, selector: "app-drop-down", inputs: ["value", "options", "placeholder", "size", "disabled", "accentColor", "searchable", "hint", "errorMessage", "error", "width", "config", "appendTo"], outputs: ["valueChange"] }, { kind: "component", type: TableSkeletonComponent, selector: "app-table-skeleton", inputs: ["rows", "columns"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: TooltipComponent, selector: "app-tooltip", inputs: ["text", "position", "disabled", "alwaysShow"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.24", ngImport: i0, type: TableComponent, decorators: [{
             type: Component,
@@ -1896,8 +2061,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.24", ngImpo
                         '(document:mousemove)': '_onDocMouseMove($event)',
                         '(document:mouseup)': '_onDocMouseUp()',
                         '(document:click)': '_onDocClick($event)',
-                    }, changeDetection: ChangeDetectionStrategy.OnPush, template: "@if (loading()) {\n  <app-table-skeleton [rows]=\"skeletonRows()\" [columns]=\"_skeletonCols()\" />\n} @else {\n  <div class=\"rz-tbl-wrapper\"\n    [style.width]=\"width() || '100%'\"\n    [style.border]=\"'1px solid var(--color-border-light,oklch(0.91 0.01 260))'\"\n  >\n    <table class=\"rz-tbl\" style=\"table-layout:fixed\">\n      <thead\n        [style.position]=\"stickyHeader() ? 'sticky' : undefined\"\n        [style.top]=\"stickyHeader() ? '0' : undefined\"\n        [style.z-index]=\"stickyHeader() ? '2' : undefined\"\n      >\n        <tr>\n          @if (selectable()) {\n            <th class=\"rz-tbl-header-checkbox\"\n              [style.background-color]=\"'var(--color-primary,oklch(0.32 0.09 258))'\"\n              [style.color]=\"'var(--color-primary-inverse,oklch(0.99 0 0))'\"\n            >\n              <input type=\"checkbox\" class=\"rz-tbl-checkbox\"\n                [checked]=\"_isAllSelected()\"\n                (change)=\"_toggleSelectAll()\"\n              />\n            </th>\n          }\n          @if (expandable()) {\n            <th class=\"rz-tbl-header-checkbox\"\n              [style.background-color]=\"'var(--color-primary,oklch(0.32 0.09 258))'\"\n              [style.color]=\"'var(--color-primary-inverse,oklch(0.99 0 0))'\"\n            ></th>\n          }\n          @for (col of _displayColumns(); track col.key) {\n            <th\n              class=\"rz-tbl-header\"\n              [style.text-align]=\"col.align || 'left'\"\n              [style.width]=\"_colWidth(col)\"\n              [style.background-color]=\"'var(--color-primary,oklch(0.32 0.09 258))'\"\n              [style.color]=\"'var(--color-primary-inverse,oklch(0.99 0 0))'\"\n              [class.rz-tbl-sortable]=\"col.sortable && sortable()\"\n              (click)=\"sortable() && col.sortable && _toggleSort(col.key)\"\n            >\n              {{ col.header }}\n              @if (col.sortable && sortable()) {\n                <i class=\"pi rz-tbl-sort-icon\" [class]=\"_sortIcon(col.key)\"></i>\n              }\n              @if (resizable()) {\n                <div class=\"rz-tbl-resize-handle\"\n                  (mousedown)=\"_onResizeStart($event,col.key)\"\n                ></div>\n              }\n            </th>\n          }\n        </tr>\n        @if (searchable() || _filterCols().length || exportable()) {\n          <tr>\n            <td [attr.colspan]=\"_colCount()\"\n              [style.background-color]=\"'var(--color-surface-alt,oklch(0.975 0.005 260))'\"\n              [style.border-bottom]=\"'1px solid var(--color-border-light,oklch(0.91 0.01 260))'\"\n              [style.padding]=\"'8px 12px'\"\n              [style.vertical-align]=\"'middle'\"\n            >\n              <div class=\"rz-tbl-toolbar\">\n                @if (searchable()) {\n                  <app-search-input\n                    (valueChange)=\"_onSearch($event)\"\n                    placeholder=\"Search table...\"\n                    size=\"sm\"\n                    style=\"padding-bottom:0\"\n                  />\n                }\n                @for (col of _filterCols(); track col.key) {\n                  <app-drop-down\n                    [options]=\"col.filterOptions ?? []\"\n                    [placeholder]=\"'Filter ' + col.header\"\n                    size=\"sm\"\n                    [searchable]=\"true\"\n                    [config]=\"{ appendToParent: true }\"\n                    style=\"padding-bottom:0\"\n                    (valueChange)=\"_setFilter(col.key, $event)\"\n                  />\n                }\n                @if (columnToggle()) {\n                <div data-col-toggle class=\"rz-tbl-col-toggle\">\n                  <button\n                    type=\"button\"\n                    (click)=\"_columnToggleOpen.set(!_columnToggleOpen())\"\n                    class=\"rz-tbl-toolbar-btn\"\n                    [style.border-color]=\"'var(--color-border-light,oklch(0.91 0.01 260))'\"\n                  ><i class=\"pi pi-list rz-tbl-icon\"></i> Columns</button>\n                  @if (_columnToggleOpen()) {\n                    <div class=\"rz-tbl-dropdown\"\n                      [style.background-color]=\"'var(--color-surface,oklch(0.99 0 0))'\"\n                    >\n                      @for (col of columns(); track col.key) {\n                        <label class=\"rz-tbl-dropdown-label\">\n                          <input type=\"checkbox\"\n                            [checked]=\"_isColumnVisible(col.key)\"\n                            (change)=\"_toggleColumn(col.key)\"\n                          />\n                          {{ col.header }}\n                        </label>\n                      }\n                    </div>\n                  }\n                </div>\n                }\n                @if (exportable()) {\n                  <div data-export-toggle class=\"rz-tbl-export-wrap\">\n                    <button\n                      type=\"button\"\n                      (click)=\"_exportOpen.set(!_exportOpen())\"\n                      class=\"rz-tbl-toolbar-btn\"\n                      [style.border-color]=\"'var(--color-border-light,oklch(0.91 0.01 260))'\"\n                    ><i class=\"pi pi-download rz-tbl-icon\"></i> Export</button>\n                    @if (_exportOpen()) {\n                      <div class=\"rz-tbl-export-dropdown\"\n                        [style.background-color]=\"'var(--color-surface,oklch(0.99 0 0))'\"\n                      >\n                        @for (fmt of ['Excel', 'PDF']; track fmt) {\n                          <button\n                            type=\"button\"\n                            (click)=\"fmt === 'Excel' ? _exportExcel() : _exportPdf(); _exportOpen.set(false)\"\n                            class=\"rz-tbl-export-opt\"\n                          >{{ fmt }}</button>\n                        }\n                      </div>\n                    }\n                  </div>\n                }\n              </div>\n            </td>\n          </tr>\n        }\n      </thead>\n      <tbody>\n        @if (_displayRows().length === 0) {\n          <tr>\n            <td [attr.colspan]=\"_colCount()\" class=\"rz-tbl-empty\">{{ emptyMessage() }}</td>\n          </tr>\n        } @else {\n          @for (row of _displayRows(); track _trackByIndex($index); let rowIndex = $index) {\n            <tr\n              class=\"rz-tbl-row\"\n              [class.rz-tbl-row-hoverable]=\"hoverable()\"\n              [style.background-color]=\"selectable() && _isSelected(row) ? 'color-mix(in srgb,var(--color-primary,oklch(0.32 0.09 258)) 8%,transparent)' : striped() && rowIndex % 2 === 1 ? 'var(--color-surface-alt,oklch(0.975 0.005 260))' : 'transparent'\"\n            >\n              @if (selectable()) {\n                <td class=\"rz-tbl-cell-center\">\n                  <input type=\"checkbox\" class=\"rz-tbl-checkbox\"\n                    [checked]=\"_isSelected(row)\"\n                    (change)=\"_toggleSelect(row)\"\n                  />\n                </td>\n              }\n              @if (expandable()) {\n                <td class=\"rz-tbl-cell-center\">\n                  <button\n                    type=\"button\"\n                    (click)=\"_toggleExpand(rowIndex)\"\n                    class=\"rz-tbl-expand-btn\"\n                  >\n                    <i class=\"pi rz-tbl-icon\" [class.pi-chevron-down]=\"_isExpanded(rowIndex)\" [class.pi-chevron-right]=\"!_isExpanded(rowIndex)\"></i>\n                  </button>\n                </td>\n              }\n              @for (col of _displayColumns(); track col.key; let colIndex = $index) {\n                @let meta = _rowMeta()[rowIndex][colIndex];\n                @if (meta.visible) {\n                    <td\n                      [attr.rowspan]=\"meta.rowspan > 1 ? meta.rowspan : null\"\n                      [style.text-align]=\"col.align || 'left'\"\n                      class=\"rz-tbl-cell\"\n                    >\n                      @if (col.actions) {\n                        <div class=\"rz-tbl-actions\">\n                          @for (action of col.actions; track $index) {\n                            @if (!action.visible || action.visible(row)) {\n                              <button\n                                type=\"button\"\n                                class=\"rz-tbl-action-btn\"\n                                [style.color]=\"action.accentColor ? 'var(--color-' + action.accentColor + ',oklch(0.32 0.09 258))' : 'var(--color-text-muted,oklch(0.48 0.01 260))'\"\n                                [style.opacity]=\"action.disabled?.(row) ? '0.5' : '1'\"\n                                [disabled]=\"action.disabled?.(row) ?? false\"\n                                (click)=\"action.click(row)\"\n                                [title]=\"action.label || ''\"\n                              >\n                                @if (action.icon) { <i [class]=\"action.icon\" class=\"rz-tbl-icon\"></i> }\n                                @if (action.label) { <span>{{ action.label }}</span> }\n                              </button>\n                            }\n                          }\n                        </div>\n                      } @else {\n                        <app-tooltip position=\"top\" [text]=\"_cellText(row, col)\">\n                          {{ _cellLabel(row, col) }}\n                        </app-tooltip>\n                      }\n                  </td>\n                }\n              }\n            </tr>\n            @if (expandable() && _isExpanded(rowIndex)) {\n              <tr class=\"rz-tbl-row\">\n                <td [attr.colspan]=\"_colCount()\" [style.padding]=\"'0'\">\n                  <div [style.background-color]=\"'var(--color-surface-alt,oklch(0.975 0.005 260))'\">\n                    @if (rowDetail) {\n                      <ng-container *ngTemplateOutlet=\"rowDetail; context: { $implicit: row }\" />\n                    } @else {\n                      <div class=\"rz-tbl-detail\">No detail template</div>\n                    }\n                  </div>\n                </td>\n              </tr>\n            }\n          }\n          @if (_footerCols().length) {\n            <tr class=\"rz-tbl-footer-row\"\n              [style.border-color]=\"'var(--color-primary,oklch(0.32 0.09 258))'\"\n              [style.background-color]=\"'var(--color-surface-alt,oklch(0.975 0.005 260))'\"\n            >\n              <td [attr.colspan]=\"_colCount()\" class=\"rz-tbl-cell\"\n                [style.color]=\"'var(--color-text,oklch(0.14 0.01 260))'\"\n              >{{ _footerText() }}</td>\n            </tr>\n          }\n        }\n      </tbody>\n    </table>\n    @if (pageable() && _totalPages() > 1) {\n      <div class=\"rz-tbl-paginator\">\n        <div class=\"rz-tbl-page-info\">\n          <span>{{ _pageInfo().from }}\u2013{{ _pageInfo().to }} of {{ _pageInfo().total }}</span>\n          <app-drop-down\n            [options]=\"_pageSizeOptions()\"\n            [value]=\"'' + _pageSize()\"\n            size=\"sm\"\n            [config]=\"{ direction: 'up' }\"\n            style=\"padding-bottom:0\"\n            (valueChange)=\"_onPageSizeChange($event)\"\n          />\n        </div>\n        <div class=\"rz-tbl-page-btns\">\n          <button type=\"button\" (click)=\"_goToPage(1)\" [disabled]=\"_page() === 1\"\n            class=\"rz-tbl-page-btn\"\n          ><i class=\"pi pi-angle-double-left rz-tbl-page-icon\"></i></button>\n          <button type=\"button\" (click)=\"_goToPage(_page() - 1)\" [disabled]=\"_page() === 1\"\n            class=\"rz-tbl-page-btn\"\n          ><i class=\"pi pi-angle-left rz-tbl-page-icon\"></i></button>\n          @for (p of _visiblePages(); track p) {\n            <button type=\"button\" (click)=\"_goToPage(p)\"\n              class=\"rz-tbl-page-btn\"\n              [style.background-color]=\"p === _page() ? 'var(--color-primary,oklch(0.32 0.09 258))' : 'transparent'\"\n              [style.color]=\"p === _page() ? 'var(--color-primary-inverse,oklch(0.99 0 0))' : 'var(--color-text-muted,oklch(0.48 0.01 260))'\"\n            >{{ p }}</button>\n          }\n          <button type=\"button\" (click)=\"_goToPage(_page() + 1)\" [disabled]=\"_page() === _totalPages()\"\n            class=\"rz-tbl-page-btn\"\n          ><i class=\"pi pi-angle-right rz-tbl-page-icon\"></i></button>\n          <button type=\"button\" (click)=\"_goToPage(_totalPages())\" [disabled]=\"_page() === _totalPages()\"\n            class=\"rz-tbl-page-btn\"\n          ><i class=\"pi pi-angle-double-right rz-tbl-page-icon\"></i></button>\n        </div>\n      </div>\n    }\n  </div>\n}\n", styles: [":host{display:contents}.rz-tbl-wrapper{overflow-x:auto;position:relative;border-radius:var(--radius-md, .5rem)}.rz-tbl{width:100%;border-collapse:collapse}.rz-tbl-header{position:relative;padding:.625rem .75rem;font-size:.75rem;font-weight:600;text-transform:uppercase;letter-spacing:.05em;white-space:nowrap}.rz-tbl-header-checkbox{padding:.625rem .75rem;font-size:.75rem;white-space:nowrap;text-align:center;width:40px}.rz-tbl-sortable{cursor:pointer;-webkit-user-select:none;user-select:none}.rz-tbl-checkbox{cursor:pointer}.rz-tbl-sort-icon{margin-left:.375rem;font-size:.625rem;vertical-align:middle}.rz-tbl-resize-handle{position:absolute;inset-inline-end:2px;top:0;bottom:0;width:6px;cursor:col-resize;z-index:10;border-inline-end:2px solid var(--color-accent, oklch(.64 .2 50));opacity:.5;transition:opacity .15s}.rz-tbl-header:hover .rz-tbl-resize-handle{opacity:1}.rz-tbl-toolbar{display:flex;align-items:center;flex-wrap:wrap;gap:.375rem}.rz-tbl-toolbar-btn{display:inline-flex;align-items:center;gap:.25rem;padding:.25rem .5rem;font-size:.75rem;border-radius:var(--radius-md, .5rem);border:1px solid var(--color-border-light, oklch(.91 .01 260));cursor:pointer;color:var(--color-text, oklch(.14 .01 260));background:transparent;transition:opacity .2s}.rz-tbl-toolbar-btn:hover{opacity:.8}.rz-tbl-icon{font-size:.625rem}.rz-tbl-col-toggle{position:relative;margin-left:auto}.rz-tbl-export-wrap{position:relative}.rz-tbl-dropdown{position:absolute;top:100%;right:0;margin-top:.25rem;min-width:140px;padding:.375rem;border-radius:var(--radius-md, .5rem);box-shadow:0 4px 12px #0000001a;z-index:50;border:1px solid var(--color-border-light, oklch(.91 .01 260));background:var(--color-surface, oklch(.99 0 0))}.rz-tbl-dropdown-label{display:flex;align-items:center;gap:.5rem;padding:.375rem .5rem;font-size:.75rem;border-radius:var(--radius-sm, .25rem);cursor:pointer;white-space:nowrap;color:var(--color-text, oklch(.14 .01 260));transition:background-color .2s}.rz-tbl-dropdown-label:hover{background-color:var(--color-surface-alt, oklch(.975 .005 260))}.rz-tbl-export-dropdown{position:absolute;top:100%;left:0;margin-top:.25rem;min-width:100px;padding:.25rem;border-radius:var(--radius-md, .5rem);box-shadow:0 4px 12px #0000001a;z-index:50;border:1px solid var(--color-border-light, oklch(.91 .01 260));background:var(--color-surface, oklch(.99 0 0))}.rz-tbl-export-opt{display:block;width:100%;text-align:left;padding:.375rem .5rem;font-size:.75rem;border-radius:var(--radius-sm, .25rem);cursor:pointer;border:none;background:transparent;color:var(--color-text, oklch(.14 .01 260));transition:background-color .2s}.rz-tbl-export-opt:hover{background-color:var(--color-surface-alt, oklch(.975 .005 260))}.rz-tbl-empty{padding:2rem .75rem;text-align:center;font-size:.875rem;color:var(--color-text-muted, oklch(.48 .01 260))}.rz-tbl-row{border-bottom:1px solid var(--color-border-light, oklch(.91 .01 260));transition:background-color .15s}.rz-tbl-row-hoverable:hover{background-color:var(--color-surface-alt, oklch(.975 .005 260))}.rz-tbl-cell{padding:.625rem .75rem;font-size:.875rem;color:var(--color-text, oklch(.14 .01 260));overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.rz-tbl-cell-center{padding:.625rem .75rem;text-align:center}.rz-tbl-actions{display:flex;align-items:center;gap:.25rem}.rz-tbl-action-btn{display:inline-flex;align-items:center;justify-content:center;gap:.25rem;padding:.25rem .5rem;font-size:.75rem;border-radius:var(--radius-md, .5rem);border:none;cursor:pointer;background:transparent;transition:opacity .15s}.rz-tbl-action-btn:disabled{cursor:not-allowed}.rz-tbl-expand-btn{display:inline-flex;align-items:center;justify-content:center;width:1.5rem;height:1.5rem;border:none;background:transparent;cursor:pointer;border-radius:var(--radius-sm, .25rem);color:var(--color-text-muted, oklch(.48 .01 260));transition:background-color .15s}.rz-tbl-expand-btn:hover{background-color:var(--color-surface-alt, oklch(.975 .005 260))}.rz-tbl-detail{padding:.75rem;font-size:.875rem;color:var(--color-text-muted, oklch(.48 .01 260))}.rz-tbl-footer-row{border-top:2px solid var(--color-primary, oklch(.32 .09 258));font-weight:500}.rz-tbl-paginator{display:flex;align-items:center;justify-content:space-between;padding:.5rem .75rem;border-top:1px solid var(--color-border-light, oklch(.91 .01 260));background:var(--color-surface, oklch(.99 0 0))}.rz-tbl-page-info{display:flex;align-items:center;gap:.5rem;font-size:.75rem;color:var(--color-text-muted, oklch(.48 .01 260))}.rz-tbl-page-btns{display:flex;align-items:center;gap:.125rem}.rz-tbl-page-btn{display:inline-flex;align-items:center;justify-content:center;width:1.75rem;height:1.75rem;font-size:.75rem;border-radius:var(--radius-sm, .25rem);border:none;cursor:pointer;background:transparent;color:var(--color-text-muted, oklch(.48 .01 260));transition:background-color .15s,color .15s;font-weight:500}.rz-tbl-page-btn:disabled{opacity:.3;cursor:not-allowed}.rz-tbl-page-icon{font-size:.625rem}\n"] }]
-        }], ctorParameters: () => [], propDecorators: { columns: [{ type: i0.Input, args: [{ isSignal: true, alias: "columns", required: false }] }], rows: [{ type: i0.Input, args: [{ isSignal: true, alias: "rows", required: false }] }], striped: [{ type: i0.Input, args: [{ isSignal: true, alias: "striped", required: false }] }], hoverable: [{ type: i0.Input, args: [{ isSignal: true, alias: "hoverable", required: false }] }], sortable: [{ type: i0.Input, args: [{ isSignal: true, alias: "sortable", required: false }] }], emptyMessage: [{ type: i0.Input, args: [{ isSignal: true, alias: "emptyMessage", required: false }] }], width: [{ type: i0.Input, args: [{ isSignal: true, alias: "width", required: false }] }], loading: [{ type: i0.Input, args: [{ isSignal: true, alias: "loading", required: false }] }], searchable: [{ type: i0.Input, args: [{ isSignal: true, alias: "searchable", required: false }] }], filterable: [{ type: i0.Input, args: [{ isSignal: true, alias: "filterable", required: false }] }], skeletonRows: [{ type: i0.Input, args: [{ isSignal: true, alias: "skeletonRows", required: false }] }], resizable: [{ type: i0.Input, args: [{ isSignal: true, alias: "resizable", required: false }] }], pageable: [{ type: i0.Input, args: [{ isSignal: true, alias: "pageable", required: false }] }], pageSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "pageSize", required: false }] }], pageSizeOptions: [{ type: i0.Input, args: [{ isSignal: true, alias: "pageSizeOptions", required: false }] }], selectable: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectable", required: false }] }], selectionMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectionMode", required: false }] }], selectionKey: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectionKey", required: false }] }], stickyHeader: [{ type: i0.Input, args: [{ isSignal: true, alias: "stickyHeader", required: false }] }], exportable: [{ type: i0.Input, args: [{ isSignal: true, alias: "exportable", required: false }] }], columnToggle: [{ type: i0.Input, args: [{ isSignal: true, alias: "columnToggle", required: false }] }], expandable: [{ type: i0.Input, args: [{ isSignal: true, alias: "expandable", required: false }] }], sortChange: [{ type: i0.Output, args: ["sortChange"] }], pageChange: [{ type: i0.Output, args: ["pageChange"] }], selectedRows: [{ type: i0.Output, args: ["selectedRows"] }], rowDetail: [{
+                    }, changeDetection: ChangeDetectionStrategy.OnPush, template: "@if (loading()) {\n  <app-table-skeleton [rows]=\"skeletonRows()\" [columns]=\"_skeletonCols()\" />\n} @else {\n  <div class=\"rz-tbl-wrapper\"\n    [style.width]=\"width() || '100%'\"\n    [style.border]=\"'1px solid var(--color-border-light,oklch(0.91 0.01 260))'\"\n    [class.rz-tbl-stack]=\"responsiveLayout() === 'stack'\"\n  >\n    <table [class]=\"_tableClass()\" style=\"table-layout:fixed\">\n      <thead\n        [style.position]=\"stickyHeader() ? 'sticky' : undefined\"\n        [style.top]=\"stickyHeader() ? '0' : undefined\"\n        [style.z-index]=\"stickyHeader() ? '2' : undefined\"\n      >\n        <tr>\n          @if (selectable()) {\n            <th class=\"rz-tbl-header-checkbox\"\n              [style.background-color]=\"'var(--color-primary,oklch(0.32 0.09 258))'\"\n              [style.color]=\"'var(--color-primary-inverse,oklch(0.99 0 0))'\"\n            >\n              <input type=\"checkbox\" class=\"rz-tbl-checkbox\"\n                [checked]=\"_isAllSelected()\"\n                (change)=\"_toggleSelectAll()\"\n              />\n            </th>\n          }\n          @if (expandable()) {\n            <th class=\"rz-tbl-header-checkbox\"\n              [style.background-color]=\"'var(--color-primary,oklch(0.32 0.09 258))'\"\n              [style.color]=\"'var(--color-primary-inverse,oklch(0.99 0 0))'\"\n            ></th>\n          }\n          @for (col of _displayColumns(); track col.key) {\n            <th\n              class=\"rz-tbl-header\"\n              [style.text-align]=\"col.align || 'left'\"\n              [style.width]=\"_colWidth(col)\"\n              [style.background-color]=\"'var(--color-primary,oklch(0.32 0.09 258))'\"\n              [style.color]=\"'var(--color-primary-inverse,oklch(0.99 0 0))'\"\n              [class.rz-tbl-sortable]=\"col.sortable && sortable()\"\n              (click)=\"sortable() && col.sortable && _toggleSort(col.key)\"\n            >\n              {{ col.header }}\n              @if (col.sortable && sortable()) {\n                <i class=\"pi rz-tbl-sort-icon\" [class]=\"_sortIcon(col.key)\"></i>\n              }\n              @if (resizable()) {\n                <div class=\"rz-tbl-resize-handle\"\n                  (mousedown)=\"_onResizeStart($event,col.key)\"\n                ></div>\n              }\n            </th>\n          }\n        </tr>\n        @if (searchable() || _filterCols().length || exportable() || columnToggle()) {\n          <tr>\n            <td [attr.colspan]=\"_colCount()\"\n              [style.background-color]=\"'var(--color-surface-alt,oklch(0.975 0.005 260))'\"\n              [style.border-bottom]=\"'1px solid var(--color-border-light,oklch(0.91 0.01 260))'\"\n              [style.padding]=\"'8px 12px'\"\n              [style.vertical-align]=\"'middle'\"\n            >\n              <div class=\"rz-tbl-toolbar\">\n                @if (searchable()) {\n                  <app-search-input\n                    (valueChange)=\"_onSearch($event)\"\n                    placeholder=\"Search table...\"\n                    size=\"sm\"\n                    style=\"padding-bottom:0\"\n                  />\n                }\n                @for (col of _filterCols(); track col.key) {\n                  <app-drop-down\n                    [options]=\"col.filterOptions ?? []\"\n                    [placeholder]=\"'Filter ' + col.header\"\n                    size=\"sm\"\n                    [searchable]=\"true\"\n                    [config]=\"{ appendToParent: true }\"\n                    style=\"padding-bottom:0\"\n                    (valueChange)=\"_setFilter(col.key, $event)\"\n                  />\n                }\n                @if (columnToggle()) {\n                <div data-col-toggle class=\"rz-tbl-col-toggle\">\n                  <button\n                    type=\"button\"\n                    (click)=\"_columnToggleOpen.set(!_columnToggleOpen())\"\n                    class=\"rz-tbl-toolbar-btn\"\n                    [style.border-color]=\"'var(--color-border-light,oklch(0.91 0.01 260))'\"\n                  ><i class=\"pi pi-list rz-tbl-icon\"></i> Columns</button>\n                  @if (_columnToggleOpen()) {\n                    <div class=\"rz-tbl-dropdown\"\n                      [style.background-color]=\"'var(--color-surface,oklch(0.99 0 0))'\"\n                    >\n                      @for (col of columns(); track col.key) {\n                        <label class=\"rz-tbl-dropdown-label\">\n                          <input type=\"checkbox\"\n                            [checked]=\"_isColumnVisible(col.key)\"\n                            (change)=\"_toggleColumn(col.key)\"\n                          />\n                          {{ col.header }}\n                        </label>\n                      }\n                    </div>\n                  }\n                </div>\n                }\n                @if (exportable()) {\n                  <div data-export-toggle class=\"rz-tbl-export-wrap\">\n                    <button\n                      type=\"button\"\n                      (click)=\"_exportOpen.set(!_exportOpen())\"\n                      class=\"rz-tbl-toolbar-btn\"\n                      [style.border-color]=\"'var(--color-border-light,oklch(0.91 0.01 260))'\"\n                    ><i class=\"pi pi-download rz-tbl-icon\"></i> Export</button>\n                    @if (_exportOpen()) {\n                      <div class=\"rz-tbl-export-dropdown\"\n                        [style.background-color]=\"'var(--color-surface,oklch(0.99 0 0))'\"\n                      >\n                        @for (fmt of ['Excel', 'PDF']; track fmt) {\n                          <button\n                            type=\"button\"\n                            (click)=\"fmt === 'Excel' ? _exportExcel() : _exportPdf(); _exportOpen.set(false)\"\n                            class=\"rz-tbl-export-opt\"\n                          >{{ fmt }}</button>\n                        }\n                      </div>\n                    }\n                  </div>\n                }\n              </div>\n            </td>\n          </tr>\n        }\n      </thead>\n      <tbody>\n        @if (_displayRows().length === 0) {\n          <tr>\n            <td [attr.colspan]=\"_colCount()\" class=\"rz-tbl-empty\">{{ emptyMessage() }}</td>\n          </tr>\n        } @else {\n          @if (_groupedRows(); as groups) {\n            @for (group of groups; track group.key) {\n              @if (rowGroupMode() === 'subheader') {\n                <tr class=\"rz-tbl-group-header\">\n                  <td [attr.colspan]=\"_colCount()\">{{ group.key }}</td>\n                </tr>\n              }\n              @for (row of group.rows; track _trackByIndex($index); let rowIndex = $index) {\n                <tr\n                  class=\"rz-tbl-row\"\n                  [class.rz-tbl-row-hoverable]=\"hoverable()\"\n                  [class.rz-tbl-row-selected]=\"selectable() && _isSelected(row)\"\n                  (click)=\"_onRowClick(row, rowIndex, $event)\"\n                  (dblclick)=\"_onRowDblClick(row, rowIndex, $event)\"\n                  [style.background-color]=\"selectable() && _isSelected(row) ? 'color-mix(in srgb,var(--color-primary,oklch(0.32 0.09 258)) 8%,transparent)' : striped() && rowIndex % 2 === 1 ? 'var(--color-surface-alt,oklch(0.975 0.005 260))' : 'transparent'\"\n                >\n                  @if (selectable()) {\n                    <td class=\"rz-tbl-cell-center\">\n                      <input type=\"checkbox\" class=\"rz-tbl-checkbox\"\n                        [checked]=\"_isSelected(row)\"\n                        (change)=\"_toggleSelect(row); $event.stopPropagation()\"\n                      />\n                    </td>\n                  }\n                  @if (expandable()) {\n                    <td class=\"rz-tbl-cell-center\">\n                      <button\n                        type=\"button\"\n                        (click)=\"_toggleExpand(rowIndex); $event.stopPropagation()\"\n                        class=\"rz-tbl-expand-btn\"\n                      >\n                        <i class=\"pi rz-tbl-icon\" [class.pi-chevron-down]=\"_isExpanded(rowIndex)\" [class.pi-chevron-right]=\"!_isExpanded(rowIndex)\"></i>\n                      </button>\n                    </td>\n                  }\n                  @for (col of _displayColumns(); track col.key; let colIndex = $index) {\n                    @let meta = _rowMeta()[rowIndex][colIndex];\n                    @if (meta.visible) {\n                        <td\n                          [attr.rowspan]=\"meta.rowspan > 1 ? meta.rowspan : null\"\n                          [style.text-align]=\"col.align || 'left'\"\n                          class=\"rz-tbl-cell\"\n                          [attr.data-label]=\"responsiveLayout() === 'stack' ? col.header : null\"\n                        >\n                          @if (col.actions) {\n                            <div class=\"rz-tbl-actions\">\n                              @for (action of col.actions; track $index) {\n                                @if (!action.visible || action.visible(row)) {\n                                  <button\n                                    type=\"button\"\n                                    class=\"rz-tbl-action-btn\"\n                                    [style.color]=\"action.accentColor ? 'var(--color-' + action.accentColor + ',oklch(0.32 0.09 258))' : 'var(--color-text-muted,oklch(0.48 0.01 260))'\"\n                                    [style.opacity]=\"action.disabled?.(row) ? '0.5' : '1'\"\n                                    [disabled]=\"action.disabled?.(row) ?? false\"\n                                    (click)=\"action.click(row)\"\n                                    [title]=\"action.label || ''\"\n                                  >\n                                    @if (action.icon) { <i [class]=\"action.icon\" class=\"rz-tbl-icon\"></i> }\n                                    @if (action.label) { <span>{{ action.label }}</span> }\n                                  </button>\n                                }\n                              }\n                            </div>\n                          } @else {\n                            <app-tooltip position=\"top\" [text]=\"_cellText(row, col)\">\n                              {{ _cellLabel(row, col) }}\n                            </app-tooltip>\n                          }\n                      </td>\n                    }\n                  }\n                </tr>\n                @if (expandable() && _isExpanded(rowIndex)) {\n                  <tr class=\"rz-tbl-row\">\n                    <td [attr.colspan]=\"_colCount()\" [style.padding]=\"'0'\">\n                      <div [style.background-color]=\"'var(--color-surface-alt,oklch(0.975 0.005 260))'\">\n                        @if (rowDetail) {\n                          <ng-container *ngTemplateOutlet=\"rowDetail; context: { $implicit: row }\" />\n                        } @else {\n                          <div class=\"rz-tbl-detail\">No detail template</div>\n                        }\n                      </div>\n                    </td>\n                  </tr>\n                }\n              }\n            }\n          } @else {\n            @for (row of _displayRows(); track _trackByIndex($index); let rowIndex = $index) {\n              <tr\n                class=\"rz-tbl-row\"\n                [class.rz-tbl-row-hoverable]=\"hoverable()\"\n                [class.rz-tbl-row-selected]=\"selectable() && _isSelected(row)\"\n                (click)=\"_onRowClick(row, rowIndex, $event)\"\n                (dblclick)=\"_onRowDblClick(row, rowIndex, $event)\"\n                [style.background-color]=\"selectable() && _isSelected(row) ? 'color-mix(in srgb,var(--color-primary,oklch(0.32 0.09 258)) 8%,transparent)' : striped() && rowIndex % 2 === 1 ? 'var(--color-surface-alt,oklch(0.975 0.005 260))' : 'transparent'\"\n              >\n                @if (selectable()) {\n                  <td class=\"rz-tbl-cell-center\">\n                    <input type=\"checkbox\" class=\"rz-tbl-checkbox\"\n                      [checked]=\"_isSelected(row)\"\n                      (change)=\"_toggleSelect(row); $event.stopPropagation()\"\n                    />\n                  </td>\n                }\n                @if (expandable()) {\n                  <td class=\"rz-tbl-cell-center\">\n                    <button\n                      type=\"button\"\n                      (click)=\"_toggleExpand(rowIndex); $event.stopPropagation()\"\n                      class=\"rz-tbl-expand-btn\"\n                    >\n                      <i class=\"pi rz-tbl-icon\" [class.pi-chevron-down]=\"_isExpanded(rowIndex)\" [class.pi-chevron-right]=\"!_isExpanded(rowIndex)\"></i>\n                    </button>\n                  </td>\n                }\n                @for (col of _displayColumns(); track col.key; let colIndex = $index) {\n                  @let meta = _rowMeta()[rowIndex][colIndex];\n                  @if (meta.visible) {\n                      <td\n                        [attr.rowspan]=\"meta.rowspan > 1 ? meta.rowspan : null\"\n                        [style.text-align]=\"col.align || 'left'\"\n                        class=\"rz-tbl-cell\"\n                        [attr.data-label]=\"responsiveLayout() === 'stack' ? col.header : null\"\n                      >\n                        @if (col.actions) {\n                          <div class=\"rz-tbl-actions\">\n                            @for (action of col.actions; track $index) {\n                              @if (!action.visible || action.visible(row)) {\n                                <button\n                                  type=\"button\"\n                                  class=\"rz-tbl-action-btn\"\n                                  [style.color]=\"action.accentColor ? 'var(--color-' + action.accentColor + ',oklch(0.32 0.09 258))' : 'var(--color-text-muted,oklch(0.48 0.01 260))'\"\n                                  [style.opacity]=\"action.disabled?.(row) ? '0.5' : '1'\"\n                                  [disabled]=\"action.disabled?.(row) ?? false\"\n                                  (click)=\"action.click(row)\"\n                                  [title]=\"action.label || ''\"\n                                >\n                                  @if (action.icon) { <i [class]=\"action.icon\" class=\"rz-tbl-icon\"></i> }\n                                  @if (action.label) { <span>{{ action.label }}</span> }\n                                </button>\n                              }\n                            }\n                          </div>\n                        } @else {\n                          <app-tooltip position=\"top\" [text]=\"_cellText(row, col)\">\n                            {{ _cellLabel(row, col) }}\n                          </app-tooltip>\n                        }\n                    </td>\n                  }\n                }\n              </tr>\n              @if (expandable() && _isExpanded(rowIndex)) {\n                <tr class=\"rz-tbl-row\">\n                  <td [attr.colspan]=\"_colCount()\" [style.padding]=\"'0'\">\n                    <div [style.background-color]=\"'var(--color-surface-alt,oklch(0.975 0.005 260))'\">\n                      @if (rowDetail) {\n                        <ng-container *ngTemplateOutlet=\"rowDetail; context: { $implicit: row }\" />\n                      } @else {\n                        <div class=\"rz-tbl-detail\">No detail template</div>\n                      }\n                    </div>\n                  </td>\n                </tr>\n              }\n            }\n          }\n          @if (_footerCols().length) {\n            <tr class=\"rz-tbl-footer-row\"\n              [style.border-color]=\"'var(--color-primary,oklch(0.32 0.09 258))'\"\n              [style.background-color]=\"'var(--color-surface-alt,oklch(0.975 0.005 260))'\"\n            >\n              <td [attr.colspan]=\"_colCount()\" class=\"rz-tbl-cell\"\n                [style.color]=\"'var(--color-text,oklch(0.14 0.01 260))'\"\n              >{{ _footerText() }}</td>\n            </tr>\n          }\n        }\n      </tbody>\n    </table>\n    @if (pageable() && !_hidePaginator()) {\n      <div class=\"rz-tbl-paginator\">\n        <div class=\"rz-tbl-page-info\">\n          @if (showCurrentPageReport()) {\n            <span>{{ _currentPageReportText() }}</span>\n          } @else {\n            <span>{{ _pageInfo().from }}\u2013{{ _pageInfo().to }} of {{ _pageInfo().total }}</span>\n          }\n          <app-drop-down\n            [options]=\"_pageSizeOptions()\"\n            [value]=\"'' + _pageSize()\"\n            size=\"sm\"\n            [config]=\"{ direction: 'up' }\"\n            style=\"padding-bottom:0\"\n            (valueChange)=\"_onPageSizeChange($event)\"\n          />\n        </div>\n        <div class=\"rz-tbl-page-btns\">\n          @if (showFirstLastIcon()) {\n            <button type=\"button\" (click)=\"_goToPage(1)\" [disabled]=\"_page() === 1\"\n              class=\"rz-tbl-page-btn\"\n            ><i class=\"pi pi-angle-double-left rz-tbl-page-icon\"></i></button>\n          }\n          <button type=\"button\" (click)=\"_goToPage(_page() - 1)\" [disabled]=\"_page() === 1\"\n            class=\"rz-tbl-page-btn\"\n          ><i class=\"pi pi-angle-left rz-tbl-page-icon\"></i></button>\n          @for (p of _visiblePages(); track p) {\n            <button type=\"button\" (click)=\"_goToPage(p)\"\n              class=\"rz-tbl-page-btn\"\n              [style.background-color]=\"p === _page() ? 'var(--color-primary,oklch(0.32 0.09 258))' : 'transparent'\"\n              [style.color]=\"p === _page() ? 'var(--color-primary-inverse,oklch(0.99 0 0))' : 'var(--color-text-muted,oklch(0.48 0.01 260))'\"\n            >{{ p }}</button>\n          }\n          <button type=\"button\" (click)=\"_goToPage(_page() + 1)\" [disabled]=\"_page() === _totalPages()\"\n            class=\"rz-tbl-page-btn\"\n          ><i class=\"pi pi-angle-right rz-tbl-page-icon\"></i></button>\n          @if (showFirstLastIcon()) {\n            <button type=\"button\" (click)=\"_goToPage(_totalPages())\" [disabled]=\"_page() === _totalPages()\"\n              class=\"rz-tbl-page-btn\"\n            ><i class=\"pi pi-angle-double-right rz-tbl-page-icon\"></i></button>\n          }\n        </div>\n      </div>\n    }\n  </div>\n}\n", styles: [":host{display:contents}.rz-tbl-wrapper{overflow-x:auto;position:relative;border-radius:var(--radius-md, .5rem)}.rz-tbl{width:100%;border-collapse:collapse}.rz-tbl-sm .rz-tbl-header,.rz-tbl-sm .rz-tbl-cell,.rz-tbl-sm .rz-tbl-cell-center{padding:.375rem .5rem;font-size:.75rem}.rz-tbl-lg .rz-tbl-header,.rz-tbl-lg .rz-tbl-cell,.rz-tbl-lg .rz-tbl-cell-center{padding:.875rem 1rem;font-size:1rem}.rz-tbl-gridlines .rz-tbl-header,.rz-tbl-gridlines .rz-tbl-cell,.rz-tbl-gridlines .rz-tbl-cell-center{border:1px solid var(--color-border-light, oklch(.91 .01 260))}.rz-tbl-striped .rz-tbl-row:nth-child(2n) td{background-color:var(--color-surface-alt, oklch(.975 .005 260))}.rz-tbl-header{position:relative;padding:.625rem .75rem;font-size:.75rem;font-weight:600;text-transform:uppercase;letter-spacing:.05em;white-space:nowrap}.rz-tbl-header-checkbox{padding:.625rem .75rem;font-size:.75rem;white-space:nowrap;text-align:center;width:40px}.rz-tbl-sortable{cursor:pointer;-webkit-user-select:none;user-select:none}.rz-tbl-checkbox{cursor:pointer}.rz-tbl-sort-icon{margin-left:.375rem;font-size:.625rem;vertical-align:middle}.rz-tbl-resize-handle{position:absolute;inset-inline-end:2px;top:0;bottom:0;width:6px;cursor:col-resize;z-index:10;border-inline-end:2px solid var(--color-accent, oklch(.64 .2 50));opacity:.5;transition:opacity .15s}.rz-tbl-header:hover .rz-tbl-resize-handle{opacity:1}.rz-tbl-toolbar{display:flex;align-items:center;flex-wrap:wrap;gap:.375rem}.rz-tbl-toolbar-btn{display:inline-flex;align-items:center;gap:.25rem;padding:.25rem .5rem;font-size:.75rem;border-radius:var(--radius-md, .5rem);border:1px solid var(--color-border-light, oklch(.91 .01 260));cursor:pointer;color:var(--color-text, oklch(.14 .01 260));background:transparent;transition:opacity .2s}.rz-tbl-toolbar-btn:hover{opacity:.8}.rz-tbl-icon{font-size:.625rem}.rz-tbl-col-toggle{position:relative;margin-left:auto}.rz-tbl-export-wrap{position:relative}.rz-tbl-dropdown{position:absolute;top:100%;right:0;margin-top:.25rem;min-width:140px;padding:.375rem;border-radius:var(--radius-md, .5rem);box-shadow:0 4px 12px #0000001a;z-index:50;border:1px solid var(--color-border-light, oklch(.91 .01 260));background:var(--color-surface, oklch(.99 0 0))}.rz-tbl-dropdown-label{display:flex;align-items:center;gap:.5rem;padding:.375rem .5rem;font-size:.75rem;border-radius:var(--radius-sm, .25rem);cursor:pointer;white-space:nowrap;color:var(--color-text, oklch(.14 .01 260));transition:background-color .2s}.rz-tbl-dropdown-label:hover{background-color:var(--color-surface-alt, oklch(.975 .005 260))}.rz-tbl-export-dropdown{position:absolute;top:100%;left:0;margin-top:.25rem;min-width:100px;padding:.25rem;border-radius:var(--radius-md, .5rem);box-shadow:0 4px 12px #0000001a;z-index:50;border:1px solid var(--color-border-light, oklch(.91 .01 260));background:var(--color-surface, oklch(.99 0 0))}.rz-tbl-export-opt{display:block;width:100%;text-align:left;padding:.375rem .5rem;font-size:.75rem;border-radius:var(--radius-sm, .25rem);cursor:pointer;border:none;background:transparent;color:var(--color-text, oklch(.14 .01 260));transition:background-color .2s}.rz-tbl-export-opt:hover{background-color:var(--color-surface-alt, oklch(.975 .005 260))}.rz-tbl-empty{padding:2rem .75rem;text-align:center;font-size:.875rem;color:var(--color-text-muted, oklch(.48 .01 260))}.rz-tbl-row{border-bottom:1px solid var(--color-border-light, oklch(.91 .01 260));transition:background-color .15s}.rz-tbl-row-hoverable:hover{background-color:var(--color-surface-alt, oklch(.975 .005 260))}.rz-tbl-row-selected{background-color:color-mix(in srgb,var(--color-primary, oklch(.32 .09 258)) 8%,transparent)!important}.rz-tbl-cell{padding:.625rem .75rem;font-size:.875rem;color:var(--color-text, oklch(.14 .01 260));overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.rz-tbl-cell-center{padding:.625rem .75rem;text-align:center}.rz-tbl-actions{display:flex;align-items:center;gap:.25rem}.rz-tbl-action-btn{display:inline-flex;align-items:center;justify-content:center;gap:.25rem;padding:.25rem .5rem;font-size:.75rem;border-radius:var(--radius-md, .5rem);border:none;cursor:pointer;background:transparent;transition:opacity .15s}.rz-tbl-action-btn:disabled{cursor:not-allowed}.rz-tbl-expand-btn{display:inline-flex;align-items:center;justify-content:center;width:1.5rem;height:1.5rem;border:none;background:transparent;cursor:pointer;border-radius:var(--radius-sm, .25rem);color:var(--color-text-muted, oklch(.48 .01 260));transition:background-color .15s}.rz-tbl-expand-btn:hover{background-color:var(--color-surface-alt, oklch(.975 .005 260))}.rz-tbl-detail{padding:.75rem;font-size:.875rem;color:var(--color-text-muted, oklch(.48 .01 260))}.rz-tbl-footer-row{border-top:2px solid var(--color-primary, oklch(.32 .09 258));font-weight:500}.rz-tbl-paginator{display:flex;align-items:center;justify-content:space-between;padding:.5rem .75rem;border-top:1px solid var(--color-border-light, oklch(.91 .01 260));background:var(--color-surface, oklch(.99 0 0))}.rz-tbl-page-info{display:flex;align-items:center;gap:.5rem;font-size:.75rem;color:var(--color-text-muted, oklch(.48 .01 260))}.rz-tbl-page-btns{display:flex;align-items:center;gap:.125rem}.rz-tbl-page-btn{display:inline-flex;align-items:center;justify-content:center;width:1.75rem;height:1.75rem;font-size:.75rem;border-radius:var(--radius-sm, .25rem);border:none;cursor:pointer;background:transparent;color:var(--color-text-muted, oklch(.48 .01 260));transition:background-color .15s,color .15s;font-weight:500}.rz-tbl-page-btn:disabled{opacity:.3;cursor:not-allowed}.rz-tbl-page-icon{font-size:.625rem}.rz-tbl-group-header td{padding:.5rem .75rem;font-size:.8rem;font-weight:700;background-color:var(--color-surface-alt, oklch(.975 .005 260));color:var(--color-text, oklch(.14 .01 260));text-transform:uppercase;letter-spacing:.04em;border-bottom:2px solid var(--color-primary, oklch(.32 .09 258))}.rz-tbl-stack table,.rz-tbl-stack thead,.rz-tbl-stack tbody,.rz-tbl-stack th,.rz-tbl-stack td,.rz-tbl-stack tr{display:block}.rz-tbl-stack thead tr{position:absolute;top:-9999px;left:-9999px}.rz-tbl-stack tr{border:1px solid var(--color-border-light, oklch(.91 .01 260));margin-bottom:.5rem;border-radius:var(--radius-md, .5rem);overflow:hidden}.rz-tbl-stack td{border:none;position:relative;padding-left:50%!important;white-space:normal;text-overflow:clip}.rz-tbl-stack td:before{content:attr(data-label);position:absolute;left:.75rem;width:calc(50% - 1rem);font-weight:600;font-size:.7rem;text-transform:uppercase;letter-spacing:.04em;color:var(--color-text-muted, oklch(.48 .01 260));white-space:nowrap;overflow:hidden;text-overflow:ellipsis}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { columns: [{ type: i0.Input, args: [{ isSignal: true, alias: "columns", required: false }] }], rows: [{ type: i0.Input, args: [{ isSignal: true, alias: "rows", required: false }] }], striped: [{ type: i0.Input, args: [{ isSignal: true, alias: "striped", required: false }] }], hoverable: [{ type: i0.Input, args: [{ isSignal: true, alias: "hoverable", required: false }] }], sortable: [{ type: i0.Input, args: [{ isSignal: true, alias: "sortable", required: false }] }], emptyMessage: [{ type: i0.Input, args: [{ isSignal: true, alias: "emptyMessage", required: false }] }], width: [{ type: i0.Input, args: [{ isSignal: true, alias: "width", required: false }] }], loading: [{ type: i0.Input, args: [{ isSignal: true, alias: "loading", required: false }] }], searchable: [{ type: i0.Input, args: [{ isSignal: true, alias: "searchable", required: false }] }], filterable: [{ type: i0.Input, args: [{ isSignal: true, alias: "filterable", required: false }] }], skeletonRows: [{ type: i0.Input, args: [{ isSignal: true, alias: "skeletonRows", required: false }] }], resizable: [{ type: i0.Input, args: [{ isSignal: true, alias: "resizable", required: false }] }], pageable: [{ type: i0.Input, args: [{ isSignal: true, alias: "pageable", required: false }] }], pageSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "pageSize", required: false }] }], pageSizeOptions: [{ type: i0.Input, args: [{ isSignal: true, alias: "pageSizeOptions", required: false }] }], selectable: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectable", required: false }] }], selectionMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectionMode", required: false }] }], selectionKey: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectionKey", required: false }] }], stickyHeader: [{ type: i0.Input, args: [{ isSignal: true, alias: "stickyHeader", required: false }] }], exportable: [{ type: i0.Input, args: [{ isSignal: true, alias: "exportable", required: false }] }], columnToggle: [{ type: i0.Input, args: [{ isSignal: true, alias: "columnToggle", required: false }] }], expandable: [{ type: i0.Input, args: [{ isSignal: true, alias: "expandable", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], showGridlines: [{ type: i0.Input, args: [{ isSignal: true, alias: "showGridlines", required: false }] }], sortMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "sortMode", required: false }] }], alwaysShowPaginator: [{ type: i0.Input, args: [{ isSignal: true, alias: "alwaysShowPaginator", required: false }] }], showFirstLastIcon: [{ type: i0.Input, args: [{ isSignal: true, alias: "showFirstLastIcon", required: false }] }], currentPageReport: [{ type: i0.Input, args: [{ isSignal: true, alias: "currentPageReport", required: false }] }], showCurrentPageReport: [{ type: i0.Input, args: [{ isSignal: true, alias: "showCurrentPageReport", required: false }] }], resetPageOnSort: [{ type: i0.Input, args: [{ isSignal: true, alias: "resetPageOnSort", required: false }] }], metaKeySelection: [{ type: i0.Input, args: [{ isSignal: true, alias: "metaKeySelection", required: false }] }], customSort: [{ type: i0.Input, args: [{ isSignal: true, alias: "customSort", required: false }] }], globalFilterFields: [{ type: i0.Input, args: [{ isSignal: true, alias: "globalFilterFields", required: false }] }], lazy: [{ type: i0.Input, args: [{ isSignal: true, alias: "lazy", required: false }] }], totalRecords: [{ type: i0.Input, args: [{ isSignal: true, alias: "totalRecords", required: false }] }], responsiveLayout: [{ type: i0.Input, args: [{ isSignal: true, alias: "responsiveLayout", required: false }] }], groupRowsBy: [{ type: i0.Input, args: [{ isSignal: true, alias: "groupRowsBy", required: false }] }], rowGroupMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "rowGroupMode", required: false }] }], sortChange: [{ type: i0.Output, args: ["sortChange"] }], pageChange: [{ type: i0.Output, args: ["pageChange"] }], selectedRows: [{ type: i0.Output, args: ["selectedRows"] }], rowClick: [{ type: i0.Output, args: ["rowClick"] }], rowDblClick: [{ type: i0.Output, args: ["rowDblClick"] }], selectAllChange: [{ type: i0.Output, args: ["selectAllChange"] }], filterChange: [{ type: i0.Output, args: ["filterChange"] }], selection: [{ type: i0.Input, args: [{ isSignal: true, alias: "selection", required: false }] }, { type: i0.Output, args: ["selectionChange"] }], rowDetail: [{
                 type: ContentChild,
                 args: ['rowDetail', { read: TemplateRef, static: false }]
             }] } });