cerxos-ui 0.0.23 → 0.0.25

package/fesm2022/cerxos-ui.mjs

@@ -272,9 +272,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.10", ngImpo
                 args: ['window:resize']
             }] } });
 
-const BASE_CLASSES$c = 'relative flex w-full gap-3 rounded-[var(--cxs-radius-md)] border border-l-4 px-4 py-3 text-sm ' +
+const BASE_CLASSES$d = 'relative flex w-full gap-3 rounded-[var(--cxs-radius-md)] border border-l-4 px-4 py-3 text-sm ' +
     'text-[var(--cxs-color-on-surface)]';
-const VARIANT_CLASSES$9 = {
+const VARIANT_CLASSES$a = {
     info: 'border-[var(--cxs-color-primary)] border-l-[var(--cxs-color-primary)] ' +
         'bg-[var(--cxs-color-primary-ghost)]',
     neutral: 'border-[var(--cxs-color-border)] border-l-[var(--cxs-color-border)] ' +
@@ -299,7 +299,7 @@ class CxsAlertComponent {
     closed = new EventEmitter();
     isVisible = true;
     get alertClass() {
-        return [BASE_CLASSES$c, VARIANT_CLASSES$9[this.variant]].join(' ');
+        return [BASE_CLASSES$d, VARIANT_CLASSES$a[this.variant]].join(' ');
     }
     get titleClass() {
         return [TITLE_BASE, TITLE_VARIANT[this.variant]].join(' ');
@@ -327,7 +327,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.10", ngImpo
                 type: Output
             }] } });
 
-const BASE_CLASSES$b = 'grid';
+const BASE_CLASSES$c = 'grid';
 const SPACING_CLASSES = {
     sm: 'gap-2',
     md: 'gap-3',
@@ -336,7 +336,7 @@ const SPACING_CLASSES = {
 class CxsAccordionComponent {
     spacing = 'md';
     get accordionClass() {
-        return [BASE_CLASSES$b, SPACING_CLASSES[this.spacing]].join(' ');
+        return [BASE_CLASSES$c, SPACING_CLASSES[this.spacing]].join(' ');
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: CxsAccordionComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.10", type: CxsAccordionComponent, isStandalone: true, selector: "cxs-accordion", inputs: { spacing: "spacing" }, ngImport: i0, template: "<div [class]=\"accordionClass\">\n  <ng-content></ng-content>\n</div>\n", changeDetection: i0.ChangeDetectionStrategy.OnPush });
@@ -424,9 +424,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.10", ngImpo
                 type: Output
             }] } });
 
-const BASE_CLASSES$a = 'inline-flex items-center gap-1 rounded-[var(--cxs-radius-md)] border px-2.5 py-0.5 text-xs font-medium ' +
+const BASE_CLASSES$b = 'inline-flex items-center gap-1 rounded-[var(--cxs-radius-md)] border px-2.5 py-0.5 text-xs font-medium ' +
     'leading-none';
-const VARIANT_CLASSES$8 = {
+const VARIANT_CLASSES$9 = {
     primary: 'border-[var(--cxs-color-primary)] bg-[var(--cxs-color-primary-ghost)] ' +
         'text-[var(--cxs-color-primary)]',
     neutral: 'border-[var(--cxs-color-border)] bg-[var(--cxs-color-surface)] ' +
@@ -434,7 +434,7 @@ const VARIANT_CLASSES$8 = {
     danger: 'border-[var(--cxs-color-danger)] bg-[var(--cxs-color-surface)] ' +
         'text-[var(--cxs-color-danger)]'
 };
-const SIZE_CLASSES$9 = {
+const SIZE_CLASSES$a = {
     sm: 'text-[11px]',
     md: 'text-xs'
 };
@@ -442,7 +442,7 @@ class CxsBadgeComponent {
     variant = 'primary';
     size = 'md';
     get badgeClass() {
-        return [BASE_CLASSES$a, VARIANT_CLASSES$8[this.variant], SIZE_CLASSES$9[this.size]].join(' ');
+        return [BASE_CLASSES$b, VARIANT_CLASSES$9[this.variant], SIZE_CLASSES$a[this.size]].join(' ');
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: CxsBadgeComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.10", type: CxsBadgeComponent, isStandalone: true, selector: "cxs-badge", inputs: { variant: "variant", size: "size" }, ngImport: i0, template: "<span [class]=\"badgeClass\">\n  <ng-content></ng-content>\n</span>\n", changeDetection: i0.ChangeDetectionStrategy.OnPush });
@@ -456,10 +456,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.10", ngImpo
                 type: Input
             }] } });
 
-const BASE_CLASSES$9 = 'inline-flex items-center justify-center overflow-hidden border border-[var(--cxs-color-border)] ' +
+const BASE_CLASSES$a = 'inline-flex items-center justify-center overflow-hidden border border-[var(--cxs-color-border)] ' +
     'bg-[var(--cxs-color-primary-ghost)] text-[var(--cxs-color-primary)] font-semibold uppercase ' +
     'select-none';
-const SIZE_CLASSES$8 = {
+const SIZE_CLASSES$9 = {
     sm: 'h-8 w-8 text-[11px]',
     md: 'h-10 w-10 text-xs',
     lg: 'h-14 w-14 text-sm'
@@ -490,7 +490,7 @@ class CxsAvatarComponent {
         this.hostClass = hostClass;
     }
     get avatarClass() {
-        return [BASE_CLASSES$9, SIZE_CLASSES$8[this.size], SHAPE_CLASSES[this.shape], this.hostClass]
+        return [BASE_CLASSES$a, SIZE_CLASSES$9[this.size], SHAPE_CLASSES[this.shape], this.hostClass]
             .filter(Boolean)
             .join(' ');
     }
@@ -559,14 +559,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.10", ngImpo
                 type: Input
             }] } });
 
-const BASE_CLASSES$8 = 'flex flex-wrap items-center gap-x-1 gap-y-1';
+const BASE_CLASSES$9 = 'flex flex-wrap items-center gap-x-1 gap-y-1';
 const ITEM_CLASSES = 'flex items-center gap-1';
 const LINK_BASE_CLASSES = 'rounded-[var(--cxs-radius-md)] transition-colors focus-visible:outline focus-visible:outline-2 ' +
     'focus-visible:outline-offset-2 focus-visible:outline-[var(--cxs-color-focus)]';
 const NON_LINK_CLASSES = 'text-[var(--cxs-color-on-surface-muted)]';
 const SEPARATOR_CLASSES = 'text-[var(--cxs-color-on-surface-muted)] select-none';
 const DISABLED_CLASSES = 'text-[var(--cxs-color-on-surface-muted)] opacity-60';
-const SIZE_CLASSES$7 = {
+const SIZE_CLASSES$8 = {
     sm: 'text-xs',
     md: 'text-sm',
     lg: 'text-base'
@@ -587,7 +587,7 @@ class CxsBreadcrumbComponent {
     variant = 'default';
     disabled = false;
     get listClass() {
-        return [BASE_CLASSES$8, SIZE_CLASSES$7[this.size], this.disabled ? 'opacity-60' : '']
+        return [BASE_CLASSES$9, SIZE_CLASSES$8[this.size], this.disabled ? 'opacity-60' : '']
             .filter(Boolean)
             .join(' ');
     }
@@ -648,8 +648,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.10", ngImpo
                 type: Input
             }] } });
 
-const BASE_CLASSES$7 = 'inline-block shrink-0';
-const SIZE_CLASSES$6 = {
+const BASE_CLASSES$8 = 'inline-block shrink-0';
+const SIZE_CLASSES$7 = {
     sm: 'h-4 w-4',
     md: 'h-5 w-5',
     lg: 'h-6 w-6'
@@ -770,7 +770,7 @@ class CxsIconComponent {
         return icon;
     }
     get iconClass() {
-        return [BASE_CLASSES$7, SIZE_CLASSES$6[this.size], this.hostClass].filter(Boolean).join(' ');
+        return [BASE_CLASSES$8, SIZE_CLASSES$7[this.size], this.hostClass].filter(Boolean).join(' ');
     }
     get titleId() {
         return this.label ? `cxs-icon-title-${this.instanceId}` : null;
@@ -795,10 +795,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.10", ngImpo
                 type: Input
             }] } });
 
-const BASE_CLASSES$6 = 'relative inline-flex items-center justify-center gap-2 whitespace-nowrap font-medium transition-colors ' +
+const BASE_CLASSES$7 = 'relative inline-flex items-center justify-center gap-2 whitespace-nowrap font-medium transition-colors ' +
     'focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 ' +
     'focus-visible:outline-[var(--cxs-color-focus)] disabled:pointer-events-none disabled:opacity-50';
-const VARIANT_CLASSES$7 = {
+const VARIANT_CLASSES$8 = {
     primary: 'bg-[var(--cxs-color-primary)] text-[var(--cxs-color-on-primary)] ' +
         'hover:bg-[var(--cxs-color-primary-hover)] shadow-[var(--cxs-shadow-sm)]',
     danger: 'bg-[var(--cxs-color-danger-surface)] text-[var(--cxs-color-danger)] ' +
@@ -809,7 +809,7 @@ const VARIANT_CLASSES$7 = {
         'hover:bg-[var(--cxs-color-primary-ghost)]',
     ghost: 'bg-transparent text-[var(--cxs-color-primary)] hover:bg-[var(--cxs-color-primary-ghost)]'
 };
-const SIZE_CLASSES$5 = {
+const SIZE_CLASSES$6 = {
     sm: 'h-8 px-3 text-sm rounded-[var(--cxs-radius-md)]',
     md: 'h-10 px-4 text-sm rounded-[var(--cxs-radius-md)]',
     lg: 'h-12 px-5 text-base rounded-[var(--cxs-radius-md)]'
@@ -859,9 +859,9 @@ class CxsButtonComponent {
     }
     get buttonClass() {
         return [
-            BASE_CLASSES$6,
-            this.iconOnly ? ICON_ONLY_SIZE_CLASSES[this.size] : SIZE_CLASSES$5[this.size],
-            VARIANT_CLASSES$7[this.variant],
+            BASE_CLASSES$7,
+            this.iconOnly ? ICON_ONLY_SIZE_CLASSES[this.size] : SIZE_CLASSES$6[this.size],
+            VARIANT_CLASSES$8[this.variant],
             this.iconOnly ? 'gap-0' : '',
             this.hostClass
         ]
@@ -897,14 +897,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.10", ngImpo
                 type: Input
             }] } });
 
-const BASE_CLASSES$5 = 'rounded-[var(--cxs-radius-md)] border border-[var(--cxs-color-border)] ' +
+const BASE_CLASSES$6 = 'rounded-[var(--cxs-radius-md)] border border-[var(--cxs-color-border)] ' +
     'bg-[var(--cxs-color-surface)] text-[var(--cxs-color-on-surface)]';
-const VARIANT_CLASSES$6 = {
+const VARIANT_CLASSES$7 = {
     surface: 'bg-[var(--cxs-color-surface)]',
     muted: 'bg-[var(--cxs-color-surface-hover)]',
     outline: 'bg-transparent'
 };
-const SIZE_CLASSES$4 = {
+const SIZE_CLASSES$5 = {
     sm: 'p-3',
     md: 'p-5',
     lg: 'p-7'
@@ -917,9 +917,9 @@ class CxsCardComponent {
     ariaLabelledby;
     get cardClass() {
         return [
-            BASE_CLASSES$5,
-            VARIANT_CLASSES$6[this.variant],
-            SIZE_CLASSES$4[this.size],
+            BASE_CLASSES$6,
+            VARIANT_CLASSES$7[this.variant],
+            SIZE_CLASSES$5[this.size],
             this.elevated ? 'shadow-[var(--cxs-shadow-sm)]' : ''
         ]
             .filter(Boolean)
@@ -948,7 +948,7 @@ const WRAPPER_ENABLED$1 = 'cursor-pointer';
 const WRAPPER_DISABLED$1 = 'cursor-not-allowed opacity-60';
 const LABEL_BASE$1 = 'text-[var(--cxs-color-on-surface)]';
 const LABEL_DISABLED$1 = 'text-[var(--cxs-color-on-surface-muted)]';
-const LABEL_SIZE_CLASSES$6 = {
+const LABEL_SIZE_CLASSES$7 = {
     sm: 'text-sm',
     md: 'text-sm',
     lg: 'text-base'
@@ -1003,7 +1003,7 @@ class CxsCheckboxComponent {
     get labelClass() {
         return [
             LABEL_BASE$1,
-            LABEL_SIZE_CLASSES$6[this.size],
+            LABEL_SIZE_CLASSES$7[this.size],
             this.isDisabled ? LABEL_DISABLED$1 : ''
         ]
             .filter(Boolean)
@@ -1250,6 +1250,39 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.10", ngImpo
                 args: ['cxsDataTableCell']
             }] } });
 
+/** Prefix of the browser storage entry that holds a table's rows-per-page choice. */
+const CXS_DATA_TABLE_PAGE_SIZE_STORAGE_PREFIX = 'cxs-data-table:page-size:';
+/**
+ * Reads the rows-per-page choice saved under `key`.
+ * Returns `fallback` when nothing is saved, the saved value is not one of `options`,
+ * or browser storage is unavailable.
+ */
+function readCxsDataTablePageSize(key, options, fallback) {
+    try {
+        const raw = getLocalStorage()?.getItem(CXS_DATA_TABLE_PAGE_SIZE_STORAGE_PREFIX + key);
+        if (raw === null || raw === undefined) {
+            return fallback;
+        }
+        const parsed = raw === 'all' ? 'all' : Number(raw);
+        return options.includes(parsed) ? parsed : fallback;
+    }
+    catch {
+        return fallback;
+    }
+}
+/** Saves the rows-per-page choice under `key`. Storage failures are ignored. */
+function writeCxsDataTablePageSize(key, size) {
+    try {
+        getLocalStorage()?.setItem(CXS_DATA_TABLE_PAGE_SIZE_STORAGE_PREFIX + key, String(size));
+    }
+    catch {
+        // Storage can be blocked or full; the table still works without remembering.
+    }
+}
+function getLocalStorage() {
+    return typeof localStorage === 'undefined' ? null : localStorage;
+}
+
 const WRAPPER_BASE_CLASSES$1 = 'w-full overflow-x-auto';
 const WRAPPER_OVERFLOW_HIDDEN_CLASSES = 'overflow-y-hidden';
 const WRAPPER_OVERFLOW_VISIBLE_CLASSES = 'overflow-y-visible';
@@ -1270,7 +1303,7 @@ const HEADER_FILTER_INPUT_CLASSES = 'w-full rounded-[var(--cxs-radius-md)] borde
     'focus-visible:outline-offset-2 focus-visible:outline-[var(--cxs-color-focus)]';
 const BODY_ROW_BASE_CLASSES$1 = 'border-b border-[var(--cxs-color-border)] last:border-b-0';
 const BODY_ROW_STRIPED_CLASSES$1 = 'odd:bg-[var(--cxs-color-surface)] even:bg-[var(--cxs-color-surface-hover)]';
-const BODY_CELL_BASE_CLASSES$1 = 'px-3 py-2 align-top';
+const BODY_CELL_BASE_CLASSES$1 = 'px-3 py-2 align-middle';
 const BODY_CELL_COMPACT_CLASSES$1 = 'px-2 py-1.5';
 const ALIGN_CLASSES$2 = {
     left: 'text-left',
@@ -1323,6 +1356,7 @@ class CxsDataTableComponent {
     pageSize = 10;
     pageIndex = 1;
     pageSizeOptions = [10, 20, 50];
+    pageSizeStorageKey;
     showPagination = true;
     showPageSize = true;
     manualPagination = false;
@@ -1346,8 +1380,10 @@ class CxsDataTableComponent {
     selectionChange = new EventEmitter();
     bulkAction = new EventEmitter();
     cellTemplates;
+    columnsPanel;
+    columnsPanelSummary;
     currentPage = 1;
-    currentPageSize = 10;
+    selectedPageSize = 10;
     globalFilter = '';
     columnFilters = {};
     columnVisibility = {};
@@ -1357,6 +1393,7 @@ class CxsDataTableComponent {
     pinnedOffsetsLeft = {};
     pinnedOffsetsRight = {};
     filtersOpen = true;
+    columnsPanelOpen = false;
     resizeStartX = 0;
     resizeStartWidth = 0;
     constructor(hostClass) {
@@ -1367,7 +1404,10 @@ class CxsDataTableComponent {
             this.currentPage = Math.max(1, this.pageIndex);
         }
         if (changes['pageSize']) {
-            this.currentPageSize = Math.max(1, this.pageSize);
+            this.selectedPageSize = this.pageSize === 0 ? 'all' : Math.max(1, this.pageSize);
+        }
+        if ((changes['pageSizeStorageKey'] || changes['pageSizeOptions']) && this.pageSizeStorageKey) {
+            this.selectedPageSize = readCxsDataTablePageSize(this.pageSizeStorageKey, this.pageSizeOptions, this.selectedPageSize);
         }
         if (changes['columns']) {
             this.initializeVisibility();
@@ -1465,7 +1505,13 @@ class CxsDataTableComponent {
         return this.data.length;
     }
     get totalPages() {
-        return Math.max(1, Math.ceil(this.totalItems / this.currentPageSize));
+        if (this.selectedPageSize === 'all') {
+            return 1;
+        }
+        return Math.max(1, Math.ceil(this.totalItems / this.selectedPageSize));
+    }
+    get pageSizeValue() {
+        return String(this.selectedPageSize);
     }
     get pageLabel() {
         return `Page ${this.currentPage} of ${this.totalPages}`;
@@ -1473,11 +1519,11 @@ class CxsDataTableComponent {
     get displayRows() {
         const filtered = this.manualFilter ? this.data : this.getFilteredData(this.data);
         const sorted = this.manualSort ? filtered : this.getSortedData(filtered);
-        if (this.manualPagination) {
+        if (this.manualPagination || this.selectedPageSize === 'all') {
             return sorted;
         }
-        const start = (this.currentPage - 1) * this.currentPageSize;
-        return sorted.slice(start, start + this.currentPageSize);
+        const start = (this.currentPage - 1) * this.selectedPageSize;
+        return sorted.slice(start, start + this.selectedPageSize);
     }
     get visibleColumns() {
         return this.columns.filter((column) => this.columnVisibility[column.key] !== false);
@@ -1608,13 +1654,28 @@ class CxsDataTableComponent {
     previousPage() {
         this.goToPage(this.currentPage - 1);
     }
+    pageSizeLabel(size) {
+        return size === 'all' ? 'All' : String(size);
+    }
+    isPageSizeSelected(size) {
+        return size === this.selectedPageSize;
+    }
     onPageSizeChange(value) {
-        const nextSize = Number(value);
-        if (!Number.isFinite(nextSize) || nextSize <= 0) {
-            return;
+        let nextSize;
+        if (value === 'all') {
+            nextSize = 'all';
+        }
+        else {
+            nextSize = Number(value);
+            if (!Number.isFinite(nextSize) || nextSize <= 0) {
+                return;
+            }
+        }
+        this.selectedPageSize = nextSize;
+        if (this.pageSizeStorageKey) {
+            writeCxsDataTablePageSize(this.pageSizeStorageKey, nextSize);
         }
-        this.currentPageSize = nextSize;
-        this.pageSizeChange.emit(nextSize);
+        this.pageSizeChange.emit(nextSize === 'all' ? 0 : nextSize);
         this.goToPage(1);
     }
     onGlobalFilterChange(value) {
@@ -1630,6 +1691,27 @@ class CxsDataTableComponent {
     columnFilterValue(columnKey) {
         return this.columnFilters[columnKey] || '';
     }
+    onColumnsPanelToggle(event) {
+        this.columnsPanelOpen = event.target.open;
+    }
+    closeColumnsPanel(restoreFocus) {
+        if (!this.columnsPanelOpen) {
+            return;
+        }
+        this.columnsPanelOpen = false;
+        if (restoreFocus) {
+            this.columnsPanelSummary?.nativeElement.focus();
+        }
+    }
+    onDocumentClick(event) {
+        if (!this.columnsPanelOpen) {
+            return;
+        }
+        const target = event.target;
+        if (target && !this.columnsPanel?.nativeElement.contains(target)) {
+            this.closeColumnsPanel(false);
+        }
+    }
     toggleColumnVisibility(columnKey) {
         this.columnVisibility[columnKey] = !this.columnVisibility[columnKey];
         this.updatePinnedOffsets();
@@ -1800,11 +1882,11 @@ class CxsDataTableComponent {
         return value;
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: CxsDataTableComponent, deps: [{ token: 'class', attribute: true }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.10", type: CxsDataTableComponent, isStandalone: true, selector: "cxs-data-table", inputs: { columns: "columns", data: "data", caption: "caption", title: "title", subtitle: "subtitle", ariaLabel: "ariaLabel", striped: "striped", bordered: "bordered", compact: "compact", loading: "loading", emptyMessage: "emptyMessage", emptyCell: "emptyCell", allowOverflow: "allowOverflow", columnBorders: "columnBorders", pageSize: "pageSize", pageIndex: "pageIndex", pageSizeOptions: "pageSizeOptions", showPagination: "showPagination", showPageSize: "showPageSize", manualPagination: "manualPagination", total: "total", sortKey: "sortKey", sortDirection: "sortDirection", manualSort: "manualSort", showToolbar: "showToolbar", showFilters: "showFilters", showColumnVisibility: "showColumnVisibility", showGlobalSearch: "showGlobalSearch", manualFilter: "manualFilter", selectable: "selectable", rowKey: "rowKey", selectedKeys: "selectedKeys", bulkActions: "bulkActions" }, outputs: { pageChange: "pageChange", pageSizeChange: "pageSizeChange", sortChange: "sortChange", filterChange: "filterChange", selectionChange: "selectionChange", bulkAction: "bulkAction" }, queries: [{ propertyName: "cellTemplates", predicate: CxsDataTableCellDirective }], usesOnChanges: true, ngImport: i0, template: "@if (hasTitleBlock) {\n  <div [class]=\"titleBarClass\">\n    <div class=\"min-w-0\">\n      @if (title) {\n        <div [class]=\"titleTextClass\">{{ title }}</div>\n      }\n      @if (subtitle) {\n        <div [class]=\"subtitleTextClass\">{{ subtitle }}</div>\n      }\n    </div>\n    @if (showToolbar) {\n      <div class=\"flex flex-wrap items-center gap-2\">\n        @if (showGlobalSearch) {\n          <div [class]=\"toolbarInputWrapperClass\">\n            <svg\n              [class]=\"toolbarInputIconClass\"\n              viewBox=\"0 0 24 24\"\n              fill=\"none\"\n              stroke=\"currentColor\"\n              stroke-width=\"1.5\"\n              aria-hidden=\"true\"\n            >\n              <path\n                stroke-linecap=\"round\"\n                stroke-linejoin=\"round\"\n                d=\"m21 21-4.35-4.35m1.85-5.65a7.5 7.5 0 1 1-15 0 7.5 7.5 0 0 1 15 0Z\"\n              />\n            </svg>\n            <input\n              type=\"search\"\n              [class]=\"toolbarInputInlineClass\"\n              placeholder=\"Search...\"\n              [value]=\"globalFilter\"\n              (input)=\"onGlobalFilterChange($any($event.target).value)\"\n            />\n          </div>\n        }\n        @if (showFilters) {\n          <button type=\"button\" [class]=\"toolbarButtonClass\" (click)=\"filtersOpen = !filtersOpen\">\n            Filters\n          </button>\n        }\n        @if (showColumnVisibility) {\n          <details class=\"relative\">\n            <summary [class]=\"toolbarButtonClass\">Columns</summary>\n            <div\n              class=\"absolute right-0 mt-2 w-48 rounded-(--cxs-radius-md) border border-(--cxs-color-border) bg-(--cxs-color-surface) p-2 shadow-(--cxs-shadow-sm)\"\n            >\n              @for (column of columns; track column) {\n                <label class=\"flex items-center gap-2 px-2 py-1 text-sm\">\n                  <input\n                    type=\"checkbox\"\n                    [checked]=\"columnVisibility[column.key]\"\n                    (change)=\"toggleColumnVisibility(column.key)\"\n                  />\n                  <span>{{ column.label }}</span>\n                </label>\n              }\n            </div>\n          </details>\n        }\n      </div>\n    }\n  </div>\n} @else if (showToolbar) {\n  <div [class]=\"toolbarClass\">\n    <div [class]=\"toolbarGroupClass\">\n      @if (showGlobalSearch) {\n        <div [class]=\"toolbarInputWrapperClass\">\n          <svg\n            [class]=\"toolbarInputIconClass\"\n            viewBox=\"0 0 24 24\"\n            fill=\"none\"\n            stroke=\"currentColor\"\n            stroke-width=\"1.5\"\n            aria-hidden=\"true\"\n          >\n            <path\n              stroke-linecap=\"round\"\n              stroke-linejoin=\"round\"\n              d=\"m21 21-4.35-4.35m1.85-5.65a7.5 7.5 0 1 1-15 0 7.5 7.5 0 0 1 15 0Z\"\n            />\n          </svg>\n          <input\n            type=\"search\"\n            [class]=\"toolbarInputClass\"\n            placeholder=\"Search...\"\n            [value]=\"globalFilter\"\n            (input)=\"onGlobalFilterChange($any($event.target).value)\"\n          />\n        </div>\n      }\n    </div>\n    <div [class]=\"toolbarGroupClass\">\n      @if (showFilters) {\n        <button type=\"button\" [class]=\"toolbarButtonClass\" (click)=\"filtersOpen = !filtersOpen\">\n          Filters\n        </button>\n      }\n      @if (showColumnVisibility) {\n        <details class=\"relative\">\n          <summary [class]=\"toolbarButtonClass\">Columns</summary>\n          <div\n            class=\"absolute right-0 mt-2 w-48 rounded-(--cxs-radius-md) border border-(--cxs-color-border) bg-(--cxs-color-surface) p-2 shadow-(--cxs-shadow-sm)\"\n          >\n            @for (column of columns; track column) {\n              <label class=\"flex items-center gap-2 px-2 py-1 text-sm\">\n                <input\n                  type=\"checkbox\"\n                  [checked]=\"columnVisibility[column.key]\"\n                  (change)=\"toggleColumnVisibility(column.key)\"\n                />\n                <span>{{ column.label }}</span>\n              </label>\n            }\n          </div>\n        </details>\n      }\n    </div>\n  </div>\n}\n\n@if (selectable && selectedCount > 0 && bulkActions.length > 0) {\n  <div [class]=\"bulkBarClass\">\n    <span>{{ selectedCount }} selected</span>\n    <div class=\"flex flex-wrap items-center gap-2\">\n      @for (action of bulkActions; track action) {\n        <button type=\"button\" [class]=\"toolbarButtonClass\" (click)=\"runBulkAction(action.id)\">\n          {{ action.label }}\n        </button>\n      }\n    </div>\n  </div>\n}\n\n<div [class]=\"wrapperClass\">\n  <table [class]=\"tableClass\" [attr.aria-label]=\"ariaLabel\">\n    @if (caption) {\n      <caption class=\"sr-only\">{{ caption }}</caption>\n    }\n    <thead>\n      <tr [class]=\"headerRowClass\">\n        @if (selectable) {\n          <th class=\"px-3 py-2 text-left\">\n            <input\n              type=\"checkbox\"\n              [checked]=\"allVisibleSelected\"\n              [indeterminate]=\"someVisibleSelected\"\n              (change)=\"toggleSelectAll()\"\n              aria-label=\"Select all rows\"\n            />\n          </th>\n        }\n        @for (column of visibleColumns; track column) {\n          <th\n            class=\"relative\"\n            [class]=\"headerCellClass(column) + ' ' + pinnedClass(column)\"\n            [style.width]=\"columnWidth(column)\"\n            [style.minWidth]=\"columnMinWidth(column)\"\n            [style.left]=\"pinnedLeft(column)\"\n            [style.right]=\"pinnedRight(column)\"\n            scope=\"col\"\n            [attr.aria-sort]=\"ariaSort(column)\"\n          >\n            @if (column.sortable) {\n              <button\n                type=\"button\"\n                [class]=\"headerButtonClass()\"\n                (click)=\"onSort(column)\"\n              >\n                <span>{{ column.label }}</span>\n                @if (sortKey === column.key) {\n                  @if (sortDirection === 'asc') {\n                    <svg\n                      xmlns=\"http://www.w3.org/2000/svg\"\n                      fill=\"none\"\n                      viewBox=\"0 0 24 24\"\n                      stroke-width=\"1.5\"\n                      stroke=\"currentColor\"\n                      class=\"h-4 w-4 text-(--cxs-color-on-surface-muted)\"\n                      aria-hidden=\"true\"\n                    >\n                      <path\n                        stroke-linecap=\"round\"\n                        stroke-linejoin=\"round\"\n                        d=\"M4.5 10.5 12 3m0 0 7.5 7.5M12 3v18\"\n                      />\n                    </svg>\n                  } @else {\n                    <svg\n                      xmlns=\"http://www.w3.org/2000/svg\"\n                      fill=\"none\"\n                      viewBox=\"0 0 24 24\"\n                      stroke-width=\"1.5\"\n                      stroke=\"currentColor\"\n                      class=\"h-4 w-4 text-(--cxs-color-on-surface-muted)\"\n                      aria-hidden=\"true\"\n                    >\n                      <path\n                        stroke-linecap=\"round\"\n                        stroke-linejoin=\"round\"\n                        d=\"M19.5 13.5 12 21m0 0-7.5-7.5M12 21V3\"\n                      />\n                    </svg>\n                  }\n                }\n              </button>\n            } @else {\n              {{ column.label }}\n            }\n            @if (column.resizable !== false) {\n              <span\n                [class]=\"resizeHandleClass\"\n                (mousedown)=\"onResizeStart($event, column)\"\n              ></span>\n            }\n          </th>\n        }\n      </tr>\n      @if (showFilters && filtersOpen) {\n        <tr [class]=\"headerRowClass\">\n          @if (selectable) {\n            <th class=\"px-3 py-2 text-left\"></th>\n          }\n          @for (column of visibleColumns; track column) {\n            <th\n              [class]=\"headerCellClass(column) + ' ' + pinnedClass(column)\"\n              [style.left]=\"pinnedLeft(column)\"\n              [style.right]=\"pinnedRight(column)\"\n            >\n              @if (column.filterable) {\n                @if (column.filterType === 'select') {\n                  <select\n                    [class]=\"headerFilterInputClass()\"\n                    [value]=\"columnFilterValue(column.key)\"\n                    (change)=\"onColumnFilterChange(column.key, $any($event.target).value)\"\n                  >\n                    <option value=\"\">All</option>\n                    @for (option of column.filterOptions ?? []; track option) {\n                      <option [value]=\"option.value\">{{ option.label }}</option>\n                    }\n                  </select>\n                } @else {\n                  <input\n                    [class]=\"headerFilterInputClass()\"\n                    [attr.type]=\"column.filterType === 'number' ? 'number' : 'text'\"\n                    [value]=\"columnFilterValue(column.key)\"\n                    (input)=\"onColumnFilterChange(column.key, $any($event.target).value)\"\n                  />\n                }\n              }\n            </th>\n          }\n        </tr>\n      }\n    </thead>\n    <tbody>\n      @if (loading) {\n        <tr [class]=\"bodyRowClass\">\n          <td [class]=\"bodyCellClass({ key: '', label: '' })\" [attr.colspan]=\"colSpan\">\n            <span [class]=\"emptyRowClass\">Loading...</span>\n          </td>\n        </tr>\n      } @else if (displayRows.length === 0) {\n        <tr [class]=\"bodyRowClass\">\n          <td [class]=\"bodyCellClass({ key: '', label: '' })\" [attr.colspan]=\"colSpan\">\n            <span [class]=\"emptyRowClass\">{{ emptyMessage }}</span>\n          </td>\n        </tr>\n      } @else {\n        @for (row of displayRows; track row) {\n          <tr [class]=\"bodyRowClass\">\n            @if (selectable) {\n              <td class=\"px-3 py-2\">\n                <input\n                  type=\"checkbox\"\n                  [checked]=\"isSelected(row)\"\n                  (change)=\"toggleRowSelection(row)\"\n                  aria-label=\"Select row\"\n                />\n              </td>\n            }\n            @for (column of visibleColumns; track column) {\n              <td\n                [class]=\"bodyCellClass(column) + ' ' + pinnedClass(column)\"\n                [style.left]=\"pinnedLeft(column)\"\n                [style.right]=\"pinnedRight(column)\"\n              >\n                @if (cellTemplate(column.key); as template) {\n                  <ng-container\n                    [ngTemplateOutlet]=\"template\"\n                    [ngTemplateOutletContext]=\"{ $implicit: row, value: row[column.key], column }\"\n                  ></ng-container>\n                } @else {\n                  {{ cellValue(row, column) }}\n                }\n              </td>\n            }\n          </tr>\n        }\n      }\n    </tbody>\n  </table>\n</div>\n\n@if (showPagination) {\n  <div [class]=\"paginationClass\">\n    <div class=\"flex items-center gap-2\">\n      <button\n        type=\"button\"\n        [class]=\"pageButtonClass\"\n        [disabled]=\"currentPage <= 1\"\n        (click)=\"previousPage()\"\n      >\n        Previous\n      </button>\n      <button\n        type=\"button\"\n        [class]=\"pageButtonClass\"\n        [disabled]=\"currentPage >= totalPages\"\n        (click)=\"nextPage()\"\n      >\n        Next\n      </button>\n      <span class=\"text-(--cxs-color-on-surface-muted)\">{{ pageLabel }}</span>\n    </div>\n    @if (showPageSize) {\n      <label class=\"flex items-center gap-2 text-(--cxs-color-on-surface-muted)\">\n        <span>Rows</span>\n        <select\n          #pageSizeSelect\n          [class]=\"pageSelectClass\"\n          [value]=\"currentPageSize\"\n          (change)=\"onPageSizeChange(pageSizeSelect.value)\"\n        >\n          @for (size of pageSizeOptions; track size) {\n            <option [value]=\"size\">{{ size }}</option>\n          }\n        </select>\n      </label>\n    }\n  </div>\n}\n", dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.10", type: CxsDataTableComponent, isStandalone: true, selector: "cxs-data-table", inputs: { columns: "columns", data: "data", caption: "caption", title: "title", subtitle: "subtitle", ariaLabel: "ariaLabel", striped: "striped", bordered: "bordered", compact: "compact", loading: "loading", emptyMessage: "emptyMessage", emptyCell: "emptyCell", allowOverflow: "allowOverflow", columnBorders: "columnBorders", pageSize: "pageSize", pageIndex: "pageIndex", pageSizeOptions: "pageSizeOptions", pageSizeStorageKey: "pageSizeStorageKey", showPagination: "showPagination", showPageSize: "showPageSize", manualPagination: "manualPagination", total: "total", sortKey: "sortKey", sortDirection: "sortDirection", manualSort: "manualSort", showToolbar: "showToolbar", showFilters: "showFilters", showColumnVisibility: "showColumnVisibility", showGlobalSearch: "showGlobalSearch", manualFilter: "manualFilter", selectable: "selectable", rowKey: "rowKey", selectedKeys: "selectedKeys", bulkActions: "bulkActions" }, outputs: { pageChange: "pageChange", pageSizeChange: "pageSizeChange", sortChange: "sortChange", filterChange: "filterChange", selectionChange: "selectionChange", bulkAction: "bulkAction" }, host: { listeners: { "document:click": "onDocumentClick($event)" } }, queries: [{ propertyName: "cellTemplates", predicate: CxsDataTableCellDirective }], viewQueries: [{ propertyName: "columnsPanel", first: true, predicate: ["columnsPanel"], descendants: true, read: ElementRef }, { propertyName: "columnsPanelSummary", first: true, predicate: ["columnsPanelSummary"], descendants: true, read: ElementRef }], usesOnChanges: true, ngImport: i0, template: "<ng-template #columnsPanelTemplate>\n  <details\n    #columnsPanel\n    class=\"relative\"\n    [open]=\"columnsPanelOpen\"\n    (toggle)=\"onColumnsPanelToggle($event)\"\n    (keydown.escape)=\"closeColumnsPanel(true)\"\n  >\n    <summary #columnsPanelSummary [class]=\"toolbarButtonClass\">Columns</summary>\n    <div\n      class=\"absolute right-0 z-40 mt-2 w-48 rounded-(--cxs-radius-md) border border-(--cxs-color-border) bg-(--cxs-color-surface) p-2 shadow-(--cxs-shadow-sm)\"\n    >\n      @for (column of columns; track column) {\n        <label class=\"flex items-center gap-2 px-2 py-1 text-sm\">\n          <input\n            type=\"checkbox\"\n            [checked]=\"columnVisibility[column.key]\"\n            (change)=\"toggleColumnVisibility(column.key)\"\n          />\n          <span>{{ column.label }}</span>\n        </label>\n      }\n    </div>\n  </details>\n</ng-template>\n\n@if (hasTitleBlock) {\n  <div [class]=\"titleBarClass\">\n    <div class=\"min-w-0\">\n      @if (title) {\n        <div [class]=\"titleTextClass\">{{ title }}</div>\n      }\n      @if (subtitle) {\n        <div [class]=\"subtitleTextClass\">{{ subtitle }}</div>\n      }\n    </div>\n    @if (showToolbar) {\n      <div class=\"flex flex-wrap items-center gap-2\">\n        @if (showGlobalSearch) {\n          <div [class]=\"toolbarInputWrapperClass\">\n            <svg\n              [class]=\"toolbarInputIconClass\"\n              viewBox=\"0 0 24 24\"\n              fill=\"none\"\n              stroke=\"currentColor\"\n              stroke-width=\"1.5\"\n              aria-hidden=\"true\"\n            >\n              <path\n                stroke-linecap=\"round\"\n                stroke-linejoin=\"round\"\n                d=\"m21 21-4.35-4.35m1.85-5.65a7.5 7.5 0 1 1-15 0 7.5 7.5 0 0 1 15 0Z\"\n              />\n            </svg>\n            <input\n              type=\"search\"\n              [class]=\"toolbarInputInlineClass\"\n              placeholder=\"Search...\"\n              [value]=\"globalFilter\"\n              (input)=\"onGlobalFilterChange($any($event.target).value)\"\n            />\n          </div>\n        }\n        @if (showFilters) {\n          <button type=\"button\" [class]=\"toolbarButtonClass\" (click)=\"filtersOpen = !filtersOpen\">\n            Filters\n          </button>\n        }\n        @if (showColumnVisibility) {\n          <ng-container [ngTemplateOutlet]=\"columnsPanelTemplate\"></ng-container>\n        }\n      </div>\n    }\n  </div>\n} @else if (showToolbar) {\n  <div [class]=\"toolbarClass\">\n    <div [class]=\"toolbarGroupClass\">\n      @if (showGlobalSearch) {\n        <div [class]=\"toolbarInputWrapperClass\">\n          <svg\n            [class]=\"toolbarInputIconClass\"\n            viewBox=\"0 0 24 24\"\n            fill=\"none\"\n            stroke=\"currentColor\"\n            stroke-width=\"1.5\"\n            aria-hidden=\"true\"\n          >\n            <path\n              stroke-linecap=\"round\"\n              stroke-linejoin=\"round\"\n              d=\"m21 21-4.35-4.35m1.85-5.65a7.5 7.5 0 1 1-15 0 7.5 7.5 0 0 1 15 0Z\"\n            />\n          </svg>\n          <input\n            type=\"search\"\n            [class]=\"toolbarInputClass\"\n            placeholder=\"Search...\"\n            [value]=\"globalFilter\"\n            (input)=\"onGlobalFilterChange($any($event.target).value)\"\n          />\n        </div>\n      }\n    </div>\n    <div [class]=\"toolbarGroupClass\">\n      @if (showFilters) {\n        <button type=\"button\" [class]=\"toolbarButtonClass\" (click)=\"filtersOpen = !filtersOpen\">\n          Filters\n        </button>\n      }\n      @if (showColumnVisibility) {\n        <ng-container [ngTemplateOutlet]=\"columnsPanelTemplate\"></ng-container>\n      }\n    </div>\n  </div>\n}\n\n@if (selectable && selectedCount > 0 && bulkActions.length > 0) {\n  <div [class]=\"bulkBarClass\">\n    <span>{{ selectedCount }} selected</span>\n    <div class=\"flex flex-wrap items-center gap-2\">\n      @for (action of bulkActions; track action) {\n        <button type=\"button\" [class]=\"toolbarButtonClass\" (click)=\"runBulkAction(action.id)\">\n          {{ action.label }}\n        </button>\n      }\n    </div>\n  </div>\n}\n\n<div [class]=\"wrapperClass\">\n  <table [class]=\"tableClass\" [attr.aria-label]=\"ariaLabel\">\n    @if (caption) {\n      <caption class=\"sr-only\">{{ caption }}</caption>\n    }\n    <thead>\n      <tr [class]=\"headerRowClass\">\n        @if (selectable) {\n          <th class=\"px-3 py-2 text-left\">\n            <input\n              type=\"checkbox\"\n              [checked]=\"allVisibleSelected\"\n              [indeterminate]=\"someVisibleSelected\"\n              (change)=\"toggleSelectAll()\"\n              aria-label=\"Select all rows\"\n            />\n          </th>\n        }\n        @for (column of visibleColumns; track column) {\n          <th\n            class=\"relative\"\n            [class]=\"headerCellClass(column) + ' ' + pinnedClass(column)\"\n            [style.width]=\"columnWidth(column)\"\n            [style.minWidth]=\"columnMinWidth(column)\"\n            [style.left]=\"pinnedLeft(column)\"\n            [style.right]=\"pinnedRight(column)\"\n            scope=\"col\"\n            [attr.aria-sort]=\"ariaSort(column)\"\n          >\n            @if (column.sortable) {\n              <button\n                type=\"button\"\n                [class]=\"headerButtonClass()\"\n                (click)=\"onSort(column)\"\n              >\n                <span>{{ column.label }}</span>\n                @if (sortKey === column.key) {\n                  @if (sortDirection === 'asc') {\n                    <svg\n                      xmlns=\"http://www.w3.org/2000/svg\"\n                      fill=\"none\"\n                      viewBox=\"0 0 24 24\"\n                      stroke-width=\"1.5\"\n                      stroke=\"currentColor\"\n                      class=\"h-4 w-4 text-(--cxs-color-on-surface-muted)\"\n                      aria-hidden=\"true\"\n                    >\n                      <path\n                        stroke-linecap=\"round\"\n                        stroke-linejoin=\"round\"\n                        d=\"M4.5 10.5 12 3m0 0 7.5 7.5M12 3v18\"\n                      />\n                    </svg>\n                  } @else {\n                    <svg\n                      xmlns=\"http://www.w3.org/2000/svg\"\n                      fill=\"none\"\n                      viewBox=\"0 0 24 24\"\n                      stroke-width=\"1.5\"\n                      stroke=\"currentColor\"\n                      class=\"h-4 w-4 text-(--cxs-color-on-surface-muted)\"\n                      aria-hidden=\"true\"\n                    >\n                      <path\n                        stroke-linecap=\"round\"\n                        stroke-linejoin=\"round\"\n                        d=\"M19.5 13.5 12 21m0 0-7.5-7.5M12 21V3\"\n                      />\n                    </svg>\n                  }\n                }\n              </button>\n            } @else {\n              {{ column.label }}\n            }\n            @if (column.resizable !== false) {\n              <span\n                [class]=\"resizeHandleClass\"\n                (mousedown)=\"onResizeStart($event, column)\"\n              ></span>\n            }\n          </th>\n        }\n      </tr>\n      @if (showFilters && filtersOpen) {\n        <tr [class]=\"headerRowClass\">\n          @if (selectable) {\n            <th class=\"px-3 py-2 text-left\"></th>\n          }\n          @for (column of visibleColumns; track column) {\n            <th\n              [class]=\"headerCellClass(column) + ' ' + pinnedClass(column)\"\n              [style.left]=\"pinnedLeft(column)\"\n              [style.right]=\"pinnedRight(column)\"\n            >\n              @if (column.filterable) {\n                @if (column.filterType === 'select') {\n                  <select\n                    [class]=\"headerFilterInputClass()\"\n                    [value]=\"columnFilterValue(column.key)\"\n                    (change)=\"onColumnFilterChange(column.key, $any($event.target).value)\"\n                  >\n                    <option value=\"\">All</option>\n                    @for (option of column.filterOptions ?? []; track option) {\n                      <option [value]=\"option.value\">{{ option.label }}</option>\n                    }\n                  </select>\n                } @else {\n                  <input\n                    [class]=\"headerFilterInputClass()\"\n                    [attr.type]=\"column.filterType === 'number' ? 'number' : 'text'\"\n                    [value]=\"columnFilterValue(column.key)\"\n                    (input)=\"onColumnFilterChange(column.key, $any($event.target).value)\"\n                  />\n                }\n              }\n            </th>\n          }\n        </tr>\n      }\n    </thead>\n    <tbody>\n      @if (loading) {\n        <tr [class]=\"bodyRowClass\">\n          <td [class]=\"bodyCellClass({ key: '', label: '' })\" [attr.colspan]=\"colSpan\">\n            <span [class]=\"emptyRowClass\">Loading...</span>\n          </td>\n        </tr>\n      } @else if (displayRows.length === 0) {\n        <tr [class]=\"bodyRowClass\">\n          <td [class]=\"bodyCellClass({ key: '', label: '' })\" [attr.colspan]=\"colSpan\">\n            <span [class]=\"emptyRowClass\">{{ emptyMessage }}</span>\n          </td>\n        </tr>\n      } @else {\n        @for (row of displayRows; track row) {\n          <tr [class]=\"bodyRowClass\">\n            @if (selectable) {\n              <td class=\"px-3 py-2\">\n                <input\n                  type=\"checkbox\"\n                  [checked]=\"isSelected(row)\"\n                  (change)=\"toggleRowSelection(row)\"\n                  aria-label=\"Select row\"\n                />\n              </td>\n            }\n            @for (column of visibleColumns; track column) {\n              <td\n                [class]=\"bodyCellClass(column) + ' ' + pinnedClass(column)\"\n                [style.left]=\"pinnedLeft(column)\"\n                [style.right]=\"pinnedRight(column)\"\n              >\n                @if (cellTemplate(column.key); as template) {\n                  <ng-container\n                    [ngTemplateOutlet]=\"template\"\n                    [ngTemplateOutletContext]=\"{ $implicit: row, value: row[column.key], column }\"\n                  ></ng-container>\n                } @else {\n                  {{ cellValue(row, column) }}\n                }\n              </td>\n            }\n          </tr>\n        }\n      }\n    </tbody>\n  </table>\n</div>\n\n@if (showPagination) {\n  <div [class]=\"paginationClass\">\n    <div class=\"flex items-center gap-2\">\n      <button\n        type=\"button\"\n        [class]=\"pageButtonClass\"\n        [disabled]=\"currentPage <= 1\"\n        (click)=\"previousPage()\"\n      >\n        Previous\n      </button>\n      <button\n        type=\"button\"\n        [class]=\"pageButtonClass\"\n        [disabled]=\"currentPage >= totalPages\"\n        (click)=\"nextPage()\"\n      >\n        Next\n      </button>\n      <span class=\"text-(--cxs-color-on-surface-muted)\">{{ pageLabel }}</span>\n    </div>\n    @if (showPageSize) {\n      <label class=\"flex items-center gap-2 text-(--cxs-color-on-surface-muted)\">\n        <span>Rows</span>\n        <select\n          #pageSizeSelect\n          [class]=\"pageSelectClass\"\n          [value]=\"pageSizeValue\"\n          (change)=\"onPageSizeChange(pageSizeSelect.value)\"\n        >\n          @for (size of pageSizeOptions; track size) {\n            <option [value]=\"size\" [selected]=\"isPageSizeSelected(size)\">{{ pageSizeLabel(size) }}</option>\n          }\n        </select>\n      </label>\n    }\n  </div>\n}\n", dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: CxsDataTableComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'cxs-data-table', standalone: true, imports: [NgTemplateOutlet], changeDetection: ChangeDetectionStrategy.OnPush, template: "@if (hasTitleBlock) {\n  <div [class]=\"titleBarClass\">\n    <div class=\"min-w-0\">\n      @if (title) {\n        <div [class]=\"titleTextClass\">{{ title }}</div>\n      }\n      @if (subtitle) {\n        <div [class]=\"subtitleTextClass\">{{ subtitle }}</div>\n      }\n    </div>\n    @if (showToolbar) {\n      <div class=\"flex flex-wrap items-center gap-2\">\n        @if (showGlobalSearch) {\n          <div [class]=\"toolbarInputWrapperClass\">\n            <svg\n              [class]=\"toolbarInputIconClass\"\n              viewBox=\"0 0 24 24\"\n              fill=\"none\"\n              stroke=\"currentColor\"\n              stroke-width=\"1.5\"\n              aria-hidden=\"true\"\n            >\n              <path\n                stroke-linecap=\"round\"\n                stroke-linejoin=\"round\"\n                d=\"m21 21-4.35-4.35m1.85-5.65a7.5 7.5 0 1 1-15 0 7.5 7.5 0 0 1 15 0Z\"\n              />\n            </svg>\n            <input\n              type=\"search\"\n              [class]=\"toolbarInputInlineClass\"\n              placeholder=\"Search...\"\n              [value]=\"globalFilter\"\n              (input)=\"onGlobalFilterChange($any($event.target).value)\"\n            />\n          </div>\n        }\n        @if (showFilters) {\n          <button type=\"button\" [class]=\"toolbarButtonClass\" (click)=\"filtersOpen = !filtersOpen\">\n            Filters\n          </button>\n        }\n        @if (showColumnVisibility) {\n          <details class=\"relative\">\n            <summary [class]=\"toolbarButtonClass\">Columns</summary>\n            <div\n              class=\"absolute right-0 mt-2 w-48 rounded-(--cxs-radius-md) border border-(--cxs-color-border) bg-(--cxs-color-surface) p-2 shadow-(--cxs-shadow-sm)\"\n            >\n              @for (column of columns; track column) {\n                <label class=\"flex items-center gap-2 px-2 py-1 text-sm\">\n                  <input\n                    type=\"checkbox\"\n                    [checked]=\"columnVisibility[column.key]\"\n                    (change)=\"toggleColumnVisibility(column.key)\"\n                  />\n                  <span>{{ column.label }}</span>\n                </label>\n              }\n            </div>\n          </details>\n        }\n      </div>\n    }\n  </div>\n} @else if (showToolbar) {\n  <div [class]=\"toolbarClass\">\n    <div [class]=\"toolbarGroupClass\">\n      @if (showGlobalSearch) {\n        <div [class]=\"toolbarInputWrapperClass\">\n          <svg\n            [class]=\"toolbarInputIconClass\"\n            viewBox=\"0 0 24 24\"\n            fill=\"none\"\n            stroke=\"currentColor\"\n            stroke-width=\"1.5\"\n            aria-hidden=\"true\"\n          >\n            <path\n              stroke-linecap=\"round\"\n              stroke-linejoin=\"round\"\n              d=\"m21 21-4.35-4.35m1.85-5.65a7.5 7.5 0 1 1-15 0 7.5 7.5 0 0 1 15 0Z\"\n            />\n          </svg>\n          <input\n            type=\"search\"\n            [class]=\"toolbarInputClass\"\n            placeholder=\"Search...\"\n            [value]=\"globalFilter\"\n            (input)=\"onGlobalFilterChange($any($event.target).value)\"\n          />\n        </div>\n      }\n    </div>\n    <div [class]=\"toolbarGroupClass\">\n      @if (showFilters) {\n        <button type=\"button\" [class]=\"toolbarButtonClass\" (click)=\"filtersOpen = !filtersOpen\">\n          Filters\n        </button>\n      }\n      @if (showColumnVisibility) {\n        <details class=\"relative\">\n          <summary [class]=\"toolbarButtonClass\">Columns</summary>\n          <div\n            class=\"absolute right-0 mt-2 w-48 rounded-(--cxs-radius-md) border border-(--cxs-color-border) bg-(--cxs-color-surface) p-2 shadow-(--cxs-shadow-sm)\"\n          >\n            @for (column of columns; track column) {\n              <label class=\"flex items-center gap-2 px-2 py-1 text-sm\">\n                <input\n                  type=\"checkbox\"\n                  [checked]=\"columnVisibility[column.key]\"\n                  (change)=\"toggleColumnVisibility(column.key)\"\n                />\n                <span>{{ column.label }}</span>\n              </label>\n            }\n          </div>\n        </details>\n      }\n    </div>\n  </div>\n}\n\n@if (selectable && selectedCount > 0 && bulkActions.length > 0) {\n  <div [class]=\"bulkBarClass\">\n    <span>{{ selectedCount }} selected</span>\n    <div class=\"flex flex-wrap items-center gap-2\">\n      @for (action of bulkActions; track action) {\n        <button type=\"button\" [class]=\"toolbarButtonClass\" (click)=\"runBulkAction(action.id)\">\n          {{ action.label }}\n        </button>\n      }\n    </div>\n  </div>\n}\n\n<div [class]=\"wrapperClass\">\n  <table [class]=\"tableClass\" [attr.aria-label]=\"ariaLabel\">\n    @if (caption) {\n      <caption class=\"sr-only\">{{ caption }}</caption>\n    }\n    <thead>\n      <tr [class]=\"headerRowClass\">\n        @if (selectable) {\n          <th class=\"px-3 py-2 text-left\">\n            <input\n              type=\"checkbox\"\n              [checked]=\"allVisibleSelected\"\n              [indeterminate]=\"someVisibleSelected\"\n              (change)=\"toggleSelectAll()\"\n              aria-label=\"Select all rows\"\n            />\n          </th>\n        }\n        @for (column of visibleColumns; track column) {\n          <th\n            class=\"relative\"\n            [class]=\"headerCellClass(column) + ' ' + pinnedClass(column)\"\n            [style.width]=\"columnWidth(column)\"\n            [style.minWidth]=\"columnMinWidth(column)\"\n            [style.left]=\"pinnedLeft(column)\"\n            [style.right]=\"pinnedRight(column)\"\n            scope=\"col\"\n            [attr.aria-sort]=\"ariaSort(column)\"\n          >\n            @if (column.sortable) {\n              <button\n                type=\"button\"\n                [class]=\"headerButtonClass()\"\n                (click)=\"onSort(column)\"\n              >\n                <span>{{ column.label }}</span>\n                @if (sortKey === column.key) {\n                  @if (sortDirection === 'asc') {\n                    <svg\n                      xmlns=\"http://www.w3.org/2000/svg\"\n                      fill=\"none\"\n                      viewBox=\"0 0 24 24\"\n                      stroke-width=\"1.5\"\n                      stroke=\"currentColor\"\n                      class=\"h-4 w-4 text-(--cxs-color-on-surface-muted)\"\n                      aria-hidden=\"true\"\n                    >\n                      <path\n                        stroke-linecap=\"round\"\n                        stroke-linejoin=\"round\"\n                        d=\"M4.5 10.5 12 3m0 0 7.5 7.5M12 3v18\"\n                      />\n                    </svg>\n                  } @else {\n                    <svg\n                      xmlns=\"http://www.w3.org/2000/svg\"\n                      fill=\"none\"\n                      viewBox=\"0 0 24 24\"\n                      stroke-width=\"1.5\"\n                      stroke=\"currentColor\"\n                      class=\"h-4 w-4 text-(--cxs-color-on-surface-muted)\"\n                      aria-hidden=\"true\"\n                    >\n                      <path\n                        stroke-linecap=\"round\"\n                        stroke-linejoin=\"round\"\n                        d=\"M19.5 13.5 12 21m0 0-7.5-7.5M12 21V3\"\n                      />\n                    </svg>\n                  }\n                }\n              </button>\n            } @else {\n              {{ column.label }}\n            }\n            @if (column.resizable !== false) {\n              <span\n                [class]=\"resizeHandleClass\"\n                (mousedown)=\"onResizeStart($event, column)\"\n              ></span>\n            }\n          </th>\n        }\n      </tr>\n      @if (showFilters && filtersOpen) {\n        <tr [class]=\"headerRowClass\">\n          @if (selectable) {\n            <th class=\"px-3 py-2 text-left\"></th>\n          }\n          @for (column of visibleColumns; track column) {\n            <th\n              [class]=\"headerCellClass(column) + ' ' + pinnedClass(column)\"\n              [style.left]=\"pinnedLeft(column)\"\n              [style.right]=\"pinnedRight(column)\"\n            >\n              @if (column.filterable) {\n                @if (column.filterType === 'select') {\n                  <select\n                    [class]=\"headerFilterInputClass()\"\n                    [value]=\"columnFilterValue(column.key)\"\n                    (change)=\"onColumnFilterChange(column.key, $any($event.target).value)\"\n                  >\n                    <option value=\"\">All</option>\n                    @for (option of column.filterOptions ?? []; track option) {\n                      <option [value]=\"option.value\">{{ option.label }}</option>\n                    }\n                  </select>\n                } @else {\n                  <input\n                    [class]=\"headerFilterInputClass()\"\n                    [attr.type]=\"column.filterType === 'number' ? 'number' : 'text'\"\n                    [value]=\"columnFilterValue(column.key)\"\n                    (input)=\"onColumnFilterChange(column.key, $any($event.target).value)\"\n                  />\n                }\n              }\n            </th>\n          }\n        </tr>\n      }\n    </thead>\n    <tbody>\n      @if (loading) {\n        <tr [class]=\"bodyRowClass\">\n          <td [class]=\"bodyCellClass({ key: '', label: '' })\" [attr.colspan]=\"colSpan\">\n            <span [class]=\"emptyRowClass\">Loading...</span>\n          </td>\n        </tr>\n      } @else if (displayRows.length === 0) {\n        <tr [class]=\"bodyRowClass\">\n          <td [class]=\"bodyCellClass({ key: '', label: '' })\" [attr.colspan]=\"colSpan\">\n            <span [class]=\"emptyRowClass\">{{ emptyMessage }}</span>\n          </td>\n        </tr>\n      } @else {\n        @for (row of displayRows; track row) {\n          <tr [class]=\"bodyRowClass\">\n            @if (selectable) {\n              <td class=\"px-3 py-2\">\n                <input\n                  type=\"checkbox\"\n                  [checked]=\"isSelected(row)\"\n                  (change)=\"toggleRowSelection(row)\"\n                  aria-label=\"Select row\"\n                />\n              </td>\n            }\n            @for (column of visibleColumns; track column) {\n              <td\n                [class]=\"bodyCellClass(column) + ' ' + pinnedClass(column)\"\n                [style.left]=\"pinnedLeft(column)\"\n                [style.right]=\"pinnedRight(column)\"\n              >\n                @if (cellTemplate(column.key); as template) {\n                  <ng-container\n                    [ngTemplateOutlet]=\"template\"\n                    [ngTemplateOutletContext]=\"{ $implicit: row, value: row[column.key], column }\"\n                  ></ng-container>\n                } @else {\n                  {{ cellValue(row, column) }}\n                }\n              </td>\n            }\n          </tr>\n        }\n      }\n    </tbody>\n  </table>\n</div>\n\n@if (showPagination) {\n  <div [class]=\"paginationClass\">\n    <div class=\"flex items-center gap-2\">\n      <button\n        type=\"button\"\n        [class]=\"pageButtonClass\"\n        [disabled]=\"currentPage <= 1\"\n        (click)=\"previousPage()\"\n      >\n        Previous\n      </button>\n      <button\n        type=\"button\"\n        [class]=\"pageButtonClass\"\n        [disabled]=\"currentPage >= totalPages\"\n        (click)=\"nextPage()\"\n      >\n        Next\n      </button>\n      <span class=\"text-(--cxs-color-on-surface-muted)\">{{ pageLabel }}</span>\n    </div>\n    @if (showPageSize) {\n      <label class=\"flex items-center gap-2 text-(--cxs-color-on-surface-muted)\">\n        <span>Rows</span>\n        <select\n          #pageSizeSelect\n          [class]=\"pageSelectClass\"\n          [value]=\"currentPageSize\"\n          (change)=\"onPageSizeChange(pageSizeSelect.value)\"\n        >\n          @for (size of pageSizeOptions; track size) {\n            <option [value]=\"size\">{{ size }}</option>\n          }\n        </select>\n      </label>\n    }\n  </div>\n}\n" }]
+            args: [{ selector: 'cxs-data-table', standalone: true, imports: [NgTemplateOutlet], changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-template #columnsPanelTemplate>\n  <details\n    #columnsPanel\n    class=\"relative\"\n    [open]=\"columnsPanelOpen\"\n    (toggle)=\"onColumnsPanelToggle($event)\"\n    (keydown.escape)=\"closeColumnsPanel(true)\"\n  >\n    <summary #columnsPanelSummary [class]=\"toolbarButtonClass\">Columns</summary>\n    <div\n      class=\"absolute right-0 z-40 mt-2 w-48 rounded-(--cxs-radius-md) border border-(--cxs-color-border) bg-(--cxs-color-surface) p-2 shadow-(--cxs-shadow-sm)\"\n    >\n      @for (column of columns; track column) {\n        <label class=\"flex items-center gap-2 px-2 py-1 text-sm\">\n          <input\n            type=\"checkbox\"\n            [checked]=\"columnVisibility[column.key]\"\n            (change)=\"toggleColumnVisibility(column.key)\"\n          />\n          <span>{{ column.label }}</span>\n        </label>\n      }\n    </div>\n  </details>\n</ng-template>\n\n@if (hasTitleBlock) {\n  <div [class]=\"titleBarClass\">\n    <div class=\"min-w-0\">\n      @if (title) {\n        <div [class]=\"titleTextClass\">{{ title }}</div>\n      }\n      @if (subtitle) {\n        <div [class]=\"subtitleTextClass\">{{ subtitle }}</div>\n      }\n    </div>\n    @if (showToolbar) {\n      <div class=\"flex flex-wrap items-center gap-2\">\n        @if (showGlobalSearch) {\n          <div [class]=\"toolbarInputWrapperClass\">\n            <svg\n              [class]=\"toolbarInputIconClass\"\n              viewBox=\"0 0 24 24\"\n              fill=\"none\"\n              stroke=\"currentColor\"\n              stroke-width=\"1.5\"\n              aria-hidden=\"true\"\n            >\n              <path\n                stroke-linecap=\"round\"\n                stroke-linejoin=\"round\"\n                d=\"m21 21-4.35-4.35m1.85-5.65a7.5 7.5 0 1 1-15 0 7.5 7.5 0 0 1 15 0Z\"\n              />\n            </svg>\n            <input\n              type=\"search\"\n              [class]=\"toolbarInputInlineClass\"\n              placeholder=\"Search...\"\n              [value]=\"globalFilter\"\n              (input)=\"onGlobalFilterChange($any($event.target).value)\"\n            />\n          </div>\n        }\n        @if (showFilters) {\n          <button type=\"button\" [class]=\"toolbarButtonClass\" (click)=\"filtersOpen = !filtersOpen\">\n            Filters\n          </button>\n        }\n        @if (showColumnVisibility) {\n          <ng-container [ngTemplateOutlet]=\"columnsPanelTemplate\"></ng-container>\n        }\n      </div>\n    }\n  </div>\n} @else if (showToolbar) {\n  <div [class]=\"toolbarClass\">\n    <div [class]=\"toolbarGroupClass\">\n      @if (showGlobalSearch) {\n        <div [class]=\"toolbarInputWrapperClass\">\n          <svg\n            [class]=\"toolbarInputIconClass\"\n            viewBox=\"0 0 24 24\"\n            fill=\"none\"\n            stroke=\"currentColor\"\n            stroke-width=\"1.5\"\n            aria-hidden=\"true\"\n          >\n            <path\n              stroke-linecap=\"round\"\n              stroke-linejoin=\"round\"\n              d=\"m21 21-4.35-4.35m1.85-5.65a7.5 7.5 0 1 1-15 0 7.5 7.5 0 0 1 15 0Z\"\n            />\n          </svg>\n          <input\n            type=\"search\"\n            [class]=\"toolbarInputClass\"\n            placeholder=\"Search...\"\n            [value]=\"globalFilter\"\n            (input)=\"onGlobalFilterChange($any($event.target).value)\"\n          />\n        </div>\n      }\n    </div>\n    <div [class]=\"toolbarGroupClass\">\n      @if (showFilters) {\n        <button type=\"button\" [class]=\"toolbarButtonClass\" (click)=\"filtersOpen = !filtersOpen\">\n          Filters\n        </button>\n      }\n      @if (showColumnVisibility) {\n        <ng-container [ngTemplateOutlet]=\"columnsPanelTemplate\"></ng-container>\n      }\n    </div>\n  </div>\n}\n\n@if (selectable && selectedCount > 0 && bulkActions.length > 0) {\n  <div [class]=\"bulkBarClass\">\n    <span>{{ selectedCount }} selected</span>\n    <div class=\"flex flex-wrap items-center gap-2\">\n      @for (action of bulkActions; track action) {\n        <button type=\"button\" [class]=\"toolbarButtonClass\" (click)=\"runBulkAction(action.id)\">\n          {{ action.label }}\n        </button>\n      }\n    </div>\n  </div>\n}\n\n<div [class]=\"wrapperClass\">\n  <table [class]=\"tableClass\" [attr.aria-label]=\"ariaLabel\">\n    @if (caption) {\n      <caption class=\"sr-only\">{{ caption }}</caption>\n    }\n    <thead>\n      <tr [class]=\"headerRowClass\">\n        @if (selectable) {\n          <th class=\"px-3 py-2 text-left\">\n            <input\n              type=\"checkbox\"\n              [checked]=\"allVisibleSelected\"\n              [indeterminate]=\"someVisibleSelected\"\n              (change)=\"toggleSelectAll()\"\n              aria-label=\"Select all rows\"\n            />\n          </th>\n        }\n        @for (column of visibleColumns; track column) {\n          <th\n            class=\"relative\"\n            [class]=\"headerCellClass(column) + ' ' + pinnedClass(column)\"\n            [style.width]=\"columnWidth(column)\"\n            [style.minWidth]=\"columnMinWidth(column)\"\n            [style.left]=\"pinnedLeft(column)\"\n            [style.right]=\"pinnedRight(column)\"\n            scope=\"col\"\n            [attr.aria-sort]=\"ariaSort(column)\"\n          >\n            @if (column.sortable) {\n              <button\n                type=\"button\"\n                [class]=\"headerButtonClass()\"\n                (click)=\"onSort(column)\"\n              >\n                <span>{{ column.label }}</span>\n                @if (sortKey === column.key) {\n                  @if (sortDirection === 'asc') {\n                    <svg\n                      xmlns=\"http://www.w3.org/2000/svg\"\n                      fill=\"none\"\n                      viewBox=\"0 0 24 24\"\n                      stroke-width=\"1.5\"\n                      stroke=\"currentColor\"\n                      class=\"h-4 w-4 text-(--cxs-color-on-surface-muted)\"\n                      aria-hidden=\"true\"\n                    >\n                      <path\n                        stroke-linecap=\"round\"\n                        stroke-linejoin=\"round\"\n                        d=\"M4.5 10.5 12 3m0 0 7.5 7.5M12 3v18\"\n                      />\n                    </svg>\n                  } @else {\n                    <svg\n                      xmlns=\"http://www.w3.org/2000/svg\"\n                      fill=\"none\"\n                      viewBox=\"0 0 24 24\"\n                      stroke-width=\"1.5\"\n                      stroke=\"currentColor\"\n                      class=\"h-4 w-4 text-(--cxs-color-on-surface-muted)\"\n                      aria-hidden=\"true\"\n                    >\n                      <path\n                        stroke-linecap=\"round\"\n                        stroke-linejoin=\"round\"\n                        d=\"M19.5 13.5 12 21m0 0-7.5-7.5M12 21V3\"\n                      />\n                    </svg>\n                  }\n                }\n              </button>\n            } @else {\n              {{ column.label }}\n            }\n            @if (column.resizable !== false) {\n              <span\n                [class]=\"resizeHandleClass\"\n                (mousedown)=\"onResizeStart($event, column)\"\n              ></span>\n            }\n          </th>\n        }\n      </tr>\n      @if (showFilters && filtersOpen) {\n        <tr [class]=\"headerRowClass\">\n          @if (selectable) {\n            <th class=\"px-3 py-2 text-left\"></th>\n          }\n          @for (column of visibleColumns; track column) {\n            <th\n              [class]=\"headerCellClass(column) + ' ' + pinnedClass(column)\"\n              [style.left]=\"pinnedLeft(column)\"\n              [style.right]=\"pinnedRight(column)\"\n            >\n              @if (column.filterable) {\n                @if (column.filterType === 'select') {\n                  <select\n                    [class]=\"headerFilterInputClass()\"\n                    [value]=\"columnFilterValue(column.key)\"\n                    (change)=\"onColumnFilterChange(column.key, $any($event.target).value)\"\n                  >\n                    <option value=\"\">All</option>\n                    @for (option of column.filterOptions ?? []; track option) {\n                      <option [value]=\"option.value\">{{ option.label }}</option>\n                    }\n                  </select>\n                } @else {\n                  <input\n                    [class]=\"headerFilterInputClass()\"\n                    [attr.type]=\"column.filterType === 'number' ? 'number' : 'text'\"\n                    [value]=\"columnFilterValue(column.key)\"\n                    (input)=\"onColumnFilterChange(column.key, $any($event.target).value)\"\n                  />\n                }\n              }\n            </th>\n          }\n        </tr>\n      }\n    </thead>\n    <tbody>\n      @if (loading) {\n        <tr [class]=\"bodyRowClass\">\n          <td [class]=\"bodyCellClass({ key: '', label: '' })\" [attr.colspan]=\"colSpan\">\n            <span [class]=\"emptyRowClass\">Loading...</span>\n          </td>\n        </tr>\n      } @else if (displayRows.length === 0) {\n        <tr [class]=\"bodyRowClass\">\n          <td [class]=\"bodyCellClass({ key: '', label: '' })\" [attr.colspan]=\"colSpan\">\n            <span [class]=\"emptyRowClass\">{{ emptyMessage }}</span>\n          </td>\n        </tr>\n      } @else {\n        @for (row of displayRows; track row) {\n          <tr [class]=\"bodyRowClass\">\n            @if (selectable) {\n              <td class=\"px-3 py-2\">\n                <input\n                  type=\"checkbox\"\n                  [checked]=\"isSelected(row)\"\n                  (change)=\"toggleRowSelection(row)\"\n                  aria-label=\"Select row\"\n                />\n              </td>\n            }\n            @for (column of visibleColumns; track column) {\n              <td\n                [class]=\"bodyCellClass(column) + ' ' + pinnedClass(column)\"\n                [style.left]=\"pinnedLeft(column)\"\n                [style.right]=\"pinnedRight(column)\"\n              >\n                @if (cellTemplate(column.key); as template) {\n                  <ng-container\n                    [ngTemplateOutlet]=\"template\"\n                    [ngTemplateOutletContext]=\"{ $implicit: row, value: row[column.key], column }\"\n                  ></ng-container>\n                } @else {\n                  {{ cellValue(row, column) }}\n                }\n              </td>\n            }\n          </tr>\n        }\n      }\n    </tbody>\n  </table>\n</div>\n\n@if (showPagination) {\n  <div [class]=\"paginationClass\">\n    <div class=\"flex items-center gap-2\">\n      <button\n        type=\"button\"\n        [class]=\"pageButtonClass\"\n        [disabled]=\"currentPage <= 1\"\n        (click)=\"previousPage()\"\n      >\n        Previous\n      </button>\n      <button\n        type=\"button\"\n        [class]=\"pageButtonClass\"\n        [disabled]=\"currentPage >= totalPages\"\n        (click)=\"nextPage()\"\n      >\n        Next\n      </button>\n      <span class=\"text-(--cxs-color-on-surface-muted)\">{{ pageLabel }}</span>\n    </div>\n    @if (showPageSize) {\n      <label class=\"flex items-center gap-2 text-(--cxs-color-on-surface-muted)\">\n        <span>Rows</span>\n        <select\n          #pageSizeSelect\n          [class]=\"pageSelectClass\"\n          [value]=\"pageSizeValue\"\n          (change)=\"onPageSizeChange(pageSizeSelect.value)\"\n        >\n          @for (size of pageSizeOptions; track size) {\n            <option [value]=\"size\" [selected]=\"isPageSizeSelected(size)\">{{ pageSizeLabel(size) }}</option>\n          }\n        </select>\n      </label>\n    }\n  </div>\n}\n" }]
         }], ctorParameters: () => [{ type: undefined, decorators: [{
                     type: Attribute,
                     args: ['class']
@@ -1842,6 +1924,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.10", ngImpo
                 type: Input
             }], pageSizeOptions: [{
                 type: Input
+            }], pageSizeStorageKey: [{
+                type: Input
             }], showPagination: [{
                 type: Input
             }], showPageSize: [{
@@ -1889,6 +1973,15 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.10", ngImpo
             }], cellTemplates: [{
                 type: ContentChildren,
                 args: [CxsDataTableCellDirective]
+            }], columnsPanel: [{
+                type: ViewChild,
+                args: ['columnsPanel', { read: ElementRef }]
+            }], columnsPanelSummary: [{
+                type: ViewChild,
+                args: ['columnsPanelSummary', { read: ElementRef }]
+            }], onDocumentClick: [{
+                type: HostListener,
+                args: ['document:click', ['$event']]
             }] } });
 
 const OVERLAY_CLASSES = 'cxs-dialog-overlay fixed inset-0 z-50 flex items-center justify-center bg-[rgba(15,23,42,0.45)] p-4';
@@ -2035,30 +2128,30 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.10", ngImpo
                 args: ['dialogPanel']
             }] } });
 
-const BASE_CLASSES$4 = 'w-full rounded-[var(--cxs-radius-md)] border border-[var(--cxs-color-border)] ' +
+const BASE_CLASSES$5 = 'w-full rounded-[var(--cxs-radius-md)] border border-[var(--cxs-color-border)] ' +
     'bg-[var(--cxs-color-surface)] text-[var(--cxs-color-on-surface)] ' +
     'placeholder:text-[var(--cxs-color-on-surface-muted)] transition-colors ' +
     'focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 ' +
     'focus-visible:outline-[var(--cxs-color-focus)] focus-visible:border-[var(--cxs-color-focus)] ' +
     'disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-60';
-const WRAPPER_CLASSES$8 = 'flex w-full flex-col gap-1';
-const LABEL_BASE_CLASSES$5 = 'font-medium text-(--cxs-color-on-surface)';
-const LABEL_DISABLED_CLASSES$5 = 'text-[var(--cxs-color-on-surface-muted)]';
-const VARIANT_CLASSES$5 = {
+const WRAPPER_CLASSES$9 = 'flex w-full flex-col gap-1';
+const LABEL_BASE_CLASSES$6 = 'font-medium text-(--cxs-color-on-surface)';
+const LABEL_DISABLED_CLASSES$6 = 'text-[var(--cxs-color-on-surface-muted)]';
+const VARIANT_CLASSES$6 = {
     outline: 'bg-[var(--cxs-color-surface)]',
     filled: 'bg-[var(--cxs-color-surface-hover)]'
 };
-const SIZE_CLASSES$3 = {
+const SIZE_CLASSES$4 = {
     sm: 'h-8 px-3 text-sm',
     md: 'h-10 px-3 text-sm',
     lg: 'h-12 px-4 text-base'
 };
-const LABEL_SIZE_CLASSES$5 = {
+const LABEL_SIZE_CLASSES$6 = {
     sm: 'text-sm',
     md: 'text-sm',
     lg: 'text-base'
 };
-const INVALID_CLASSES$4 = 'border-[var(--cxs-color-danger)] focus-visible:border-[var(--cxs-color-danger)] ' +
+const INVALID_CLASSES$5 = 'border-[var(--cxs-color-danger)] focus-visible:border-[var(--cxs-color-danger)] ' +
     'focus-visible:outline-[var(--cxs-color-danger)]';
 const POPOVER_CLASSES = 'absolute left-0 top-full z-10 mt-2 w-full rounded-[var(--cxs-radius-md)] border ' +
     'border-[var(--cxs-color-border)] bg-[var(--cxs-color-surface)] p-3 shadow-[var(--cxs-shadow-sm)]';
@@ -2118,22 +2211,22 @@ class CxsDatepickerComponent {
     }
     get inputClass() {
         return [
-            BASE_CLASSES$4,
-            SIZE_CLASSES$3[this.size],
-            VARIANT_CLASSES$5[this.variant],
-            this.invalid ? INVALID_CLASSES$4 : ''
+            BASE_CLASSES$5,
+            SIZE_CLASSES$4[this.size],
+            VARIANT_CLASSES$6[this.variant],
+            this.invalid ? INVALID_CLASSES$5 : ''
         ]
             .filter(Boolean)
             .join(' ');
     }
     get wrapperClass() {
-        return WRAPPER_CLASSES$8;
+        return WRAPPER_CLASSES$9;
     }
     get labelClass() {
         return [
-            LABEL_BASE_CLASSES$5,
-            LABEL_SIZE_CLASSES$5[this.size],
-            this.isDisabled ? LABEL_DISABLED_CLASSES$5 : ''
+            LABEL_BASE_CLASSES$6,
+            LABEL_SIZE_CLASSES$6[this.size],
+            this.isDisabled ? LABEL_DISABLED_CLASSES$6 : ''
         ]
             .filter(Boolean)
             .join(' ');
@@ -2836,36 +2929,36 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.10", ngImpo
                 type: Input
             }] } });
 
-const BASE_CLASSES$3 = 'w-full rounded-[var(--cxs-radius-md)] border border-[var(--cxs-color-border)] ' +
+const BASE_CLASSES$4 = 'w-full rounded-[var(--cxs-radius-md)] border border-[var(--cxs-color-border)] ' +
     'bg-[var(--cxs-color-surface)] text-[var(--cxs-color-on-surface)] ' +
     'placeholder:text-[var(--cxs-color-on-surface-muted)] transition-colors ' +
     'focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 ' +
     'focus-visible:outline-[var(--cxs-color-focus)] focus-visible:border-[var(--cxs-color-focus)] ' +
     'disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-60';
-const WRAPPER_CLASSES$7 = 'flex w-full flex-col gap-1';
-const LABEL_BASE_CLASSES$4 = 'font-medium text-(--cxs-color-on-surface)';
-const LABEL_DISABLED_CLASSES$4 = 'text-[var(--cxs-color-on-surface-muted)]';
-const ERROR_BASE_CLASSES = 'text-[var(--cxs-color-danger)]';
-const VARIANT_CLASSES$4 = {
+const WRAPPER_CLASSES$8 = 'flex w-full flex-col gap-1';
+const LABEL_BASE_CLASSES$5 = 'font-medium text-(--cxs-color-on-surface)';
+const LABEL_DISABLED_CLASSES$5 = 'text-[var(--cxs-color-on-surface-muted)]';
+const ERROR_BASE_CLASSES$1 = 'text-[var(--cxs-color-danger)]';
+const VARIANT_CLASSES$5 = {
     outline: 'bg-[var(--cxs-color-surface)]',
     filled: 'bg-[var(--cxs-color-surface-hover)]'
 };
-const SIZE_CLASSES$2 = {
+const SIZE_CLASSES$3 = {
     sm: 'h-8 px-3 text-sm',
     md: 'h-10 px-3 text-sm',
     lg: 'h-12 px-4 text-base'
 };
-const LABEL_SIZE_CLASSES$4 = {
+const LABEL_SIZE_CLASSES$5 = {
     sm: 'text-sm',
     md: 'text-sm',
     lg: 'text-base'
 };
-const ERROR_SIZE_CLASSES = {
+const ERROR_SIZE_CLASSES$1 = {
     sm: 'text-xs',
     md: 'text-xs',
     lg: 'text-sm'
 };
-const INVALID_CLASSES$3 = 'border-[var(--cxs-color-danger)] focus-visible:border-[var(--cxs-color-danger)] ' +
+const INVALID_CLASSES$4 = 'border-[var(--cxs-color-danger)] focus-visible:border-[var(--cxs-color-danger)] ' +
     'focus-visible:outline-[var(--cxs-color-danger)]';
 class CxsInputComponent {
     changeDetector = inject(ChangeDetectorRef);
@@ -2898,22 +2991,22 @@ class CxsInputComponent {
     }
     get inputClass() {
         return [
-            BASE_CLASSES$3,
-            SIZE_CLASSES$2[this.size],
-            VARIANT_CLASSES$4[this.variant],
-            this.invalid ? INVALID_CLASSES$3 : ''
+            BASE_CLASSES$4,
+            SIZE_CLASSES$3[this.size],
+            VARIANT_CLASSES$5[this.variant],
+            this.invalid ? INVALID_CLASSES$4 : ''
         ]
             .filter(Boolean)
             .join(' ');
     }
     get wrapperClass() {
-        return WRAPPER_CLASSES$7;
+        return WRAPPER_CLASSES$8;
     }
     get labelClass() {
         return [
-            LABEL_BASE_CLASSES$4,
-            LABEL_SIZE_CLASSES$4[this.size],
-            this.isDisabled ? LABEL_DISABLED_CLASSES$4 : ''
+            LABEL_BASE_CLASSES$5,
+            LABEL_SIZE_CLASSES$5[this.size],
+            this.isDisabled ? LABEL_DISABLED_CLASSES$5 : ''
         ]
             .filter(Boolean)
             .join(' ');
@@ -2947,7 +3040,7 @@ class CxsInputComponent {
         return tokens.length > 0 ? tokens.join(' ') : null;
     }
     get errorClass() {
-        return [ERROR_BASE_CLASSES, ERROR_SIZE_CLASSES[this.size]].join(' ');
+        return [ERROR_BASE_CLASSES$1, ERROR_SIZE_CLASSES$1[this.size]].join(' ');
     }
     writeValue(value) {
         this.value = value ?? '';
@@ -3172,15 +3265,15 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.10", ngImpo
                 args: ['menuItem', { read: ElementRef }]
             }] } });
 
-const WRAPPER_CLASSES$6 = 'flex w-full flex-col gap-1';
-const LABEL_BASE_CLASSES$3 = 'font-medium text-(--cxs-color-on-surface)';
-const LABEL_DISABLED_CLASSES$3 = 'text-[var(--cxs-color-on-surface-muted)]';
+const WRAPPER_CLASSES$7 = 'flex w-full flex-col gap-1';
+const LABEL_BASE_CLASSES$4 = 'font-medium text-(--cxs-color-on-surface)';
+const LABEL_DISABLED_CLASSES$4 = 'text-[var(--cxs-color-on-surface-muted)]';
 const CONTROL_BASE_CLASSES = 'flex w-full flex-wrap items-center gap-2 rounded-[var(--cxs-radius-md)] border ' +
     'border-[var(--cxs-color-border)] transition-colors ' +
     'focus-within:outline focus-within:outline-2 focus-within:outline-offset-2 ' +
     'focus-within:outline-[var(--cxs-color-focus)] focus-within:border-[var(--cxs-color-focus)]';
 const CONTROL_DISABLED_CLASSES = 'pointer-events-none cursor-not-allowed opacity-60';
-const VARIANT_CLASSES$3 = {
+const VARIANT_CLASSES$4 = {
     outline: 'bg-[var(--cxs-color-surface)]',
     filled: 'bg-[var(--cxs-color-surface-hover)]'
 };
@@ -3189,7 +3282,7 @@ const CONTROL_SIZE_CLASSES$1 = {
     md: 'min-h-10 px-3 py-1.5 text-sm',
     lg: 'min-h-12 px-4 py-2 text-base'
 };
-const LABEL_SIZE_CLASSES$3 = {
+const LABEL_SIZE_CLASSES$4 = {
     sm: 'text-sm',
     md: 'text-sm',
     lg: 'text-base'
@@ -3210,7 +3303,7 @@ const OPTION_BASE_CLASSES = 'flex w-full items-center justify-between rounded-[v
     'text-sm text-[var(--cxs-color-on-surface)] transition-colors hover:bg-[var(--cxs-color-surface-hover)]';
 const OPTION_DISABLED_CLASSES = 'cursor-not-allowed opacity-50 hover:bg-transparent';
 const EMPTY_STATE_CLASSES = 'px-3 py-2 text-sm text-[var(--cxs-color-on-surface-muted)]';
-const INVALID_CLASSES$2 = 'border-[var(--cxs-color-danger)] focus-within:border-[var(--cxs-color-danger)] ' +
+const INVALID_CLASSES$3 = 'border-[var(--cxs-color-danger)] focus-within:border-[var(--cxs-color-danger)] ' +
     'focus-within:outline-[var(--cxs-color-danger)]';
 class CxsMultiSelectComponent {
     elementRef;
@@ -3251,13 +3344,13 @@ class CxsMultiSelectComponent {
             this.value.length >= this.maxSelections;
     }
     get wrapperClass() {
-        return WRAPPER_CLASSES$6;
+        return WRAPPER_CLASSES$7;
     }
     get labelClass() {
         return [
-            LABEL_BASE_CLASSES$3,
-            LABEL_SIZE_CLASSES$3[this.size],
-            this.isDisabled ? LABEL_DISABLED_CLASSES$3 : ''
+            LABEL_BASE_CLASSES$4,
+            LABEL_SIZE_CLASSES$4[this.size],
+            this.isDisabled ? LABEL_DISABLED_CLASSES$4 : ''
         ]
             .filter(Boolean)
             .join(' ');
@@ -3266,8 +3359,8 @@ class CxsMultiSelectComponent {
         return [
             CONTROL_BASE_CLASSES,
             CONTROL_SIZE_CLASSES$1[this.size],
-            VARIANT_CLASSES$3[this.variant],
-            this.invalid ? INVALID_CLASSES$2 : '',
+            VARIANT_CLASSES$4[this.variant],
+            this.invalid ? INVALID_CLASSES$3 : '',
             this.isDisabled ? CONTROL_DISABLED_CLASSES : ''
         ]
             .filter(Boolean)
@@ -3467,7 +3560,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.10", ngImpo
                 args: ['document:click', ['$event']]
             }] } });
 
-const WRAPPER_CLASSES$5 = 'flex w-full flex-col gap-1.5';
+const WRAPPER_CLASSES$6 = 'flex w-full flex-col gap-1.5';
 const HEADER_CLASSES$1 = 'flex items-center justify-between gap-3';
 const LABEL_CLASSES = 'text-sm font-medium text-[var(--cxs-color-on-surface)]';
 const VALUE_CLASSES$1 = 'text-sm text-[var(--cxs-color-on-surface-muted)]';
@@ -3496,7 +3589,7 @@ class CxsProgressBarComponent {
     ariaLabel = 'Progress';
     labelId = `cxs-progress-bar-label-${++CxsProgressBarComponent.nextId}`;
     get wrapperClass() {
-        return WRAPPER_CLASSES$5;
+        return WRAPPER_CLASSES$6;
     }
     get headerClass() {
         return HEADER_CLASSES$1;
@@ -3620,7 +3713,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.10", ngImpo
                 args: ['content', { static: true }]
             }] } });
 
-const WRAPPER_CLASSES$4 = 'w-full';
+const WRAPPER_CLASSES$5 = 'w-full';
 const TAB_LIST_CLASSES = 'flex flex-wrap items-center gap-6 border-b border-[var(--cxs-color-border)]';
 const TAB_BUTTON_BASE_CLASSES = 'inline-flex items-center gap-2 border-b-2 pb-3 text-sm font-medium transition-colors';
 const TAB_BUTTON_INACTIVE_CLASSES = 'border-transparent text-[var(--cxs-color-on-surface-muted)] hover:text-[var(--cxs-color-on-surface)]';
@@ -3635,7 +3728,7 @@ class CxsTabsComponent {
     activeIdChange = new EventEmitter();
     panels;
     get wrapperClass() {
-        return WRAPPER_CLASSES$4;
+        return WRAPPER_CLASSES$5;
     }
     get tabListClass() {
         return TAB_LIST_CLASSES;
@@ -3735,7 +3828,7 @@ const WRAPPER_ENABLED = 'cursor-pointer';
 const WRAPPER_DISABLED = 'cursor-not-allowed opacity-60';
 const LABEL_BASE = 'text-[var(--cxs-color-on-surface)]';
 const LABEL_DISABLED = 'text-[var(--cxs-color-on-surface-muted)]';
-const LABEL_SIZE_CLASSES$2 = {
+const LABEL_SIZE_CLASSES$3 = {
     sm: 'text-sm',
     md: 'text-sm',
     lg: 'text-base'
@@ -3760,7 +3853,7 @@ const DOT_SIZE_CLASSES = {
     md: 'after:h-2.5 after:w-2.5',
     lg: 'after:h-3 after:w-3'
 };
-const INVALID_CLASSES$1 = 'border-[var(--cxs-color-danger)] peer-checked:border-[var(--cxs-color-danger)] ' +
+const INVALID_CLASSES$2 = 'border-[var(--cxs-color-danger)] peer-checked:border-[var(--cxs-color-danger)] ' +
     'after:bg-[var(--cxs-color-danger)]';
 class CxsRadioComponent {
     changeDetector = inject(ChangeDetectorRef);
@@ -3795,7 +3888,7 @@ class CxsRadioComponent {
     get labelClass() {
         return [
             LABEL_BASE,
-            LABEL_SIZE_CLASSES$2[this.size],
+            LABEL_SIZE_CLASSES$3[this.size],
             this.isDisabled ? LABEL_DISABLED : ''
         ]
             .filter(Boolean)
@@ -3807,7 +3900,7 @@ class CxsRadioComponent {
             CONTROL_SIZE_CLASSES[this.size],
             DOT_SIZE_CLASSES[this.size],
             CONTROL_VARIANT_CLASSES[this.variant],
-            this.invalid ? INVALID_CLASSES$1 : ''
+            this.invalid ? INVALID_CLASSES$2 : ''
         ]
             .filter(Boolean)
             .join(' ');
@@ -3895,7 +3988,7 @@ const TONE_CLASSES = {
         'text-[var(--cxs-color-on-surface)]'
 };
 const SELECTED_CLASSES = 'ring-2 ring-offset-2 ring-current';
-const SIZE_CLASSES$1 = {
+const SIZE_CLASSES$2 = {
     sm: 'min-h-8 px-3 py-1 text-xs',
     md: 'min-h-10 px-4 py-2 text-sm',
     lg: 'min-h-12 px-5 py-2.5 text-base'
@@ -3924,7 +4017,7 @@ class CxsRadioChipGroupComponent {
     chipClass(option) {
         return [
             CHIP_BASE,
-            SIZE_CLASSES$1[this.size],
+            SIZE_CLASSES$2[this.size],
             TONE_CLASSES[option.tone],
             this.value === option.value ? SELECTED_CLASSES : '',
             this.invalid ? 'outline outline-1 outline-[var(--cxs-color-danger)]' : '',
@@ -3991,30 +4084,30 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.10", ngImpo
                 type: Output
             }] } });
 
-const BASE_CLASSES$2 = 'w-full appearance-none rounded-[var(--cxs-radius-md)] border border-[var(--cxs-color-border)] ' +
+const BASE_CLASSES$3 = 'w-full appearance-none rounded-[var(--cxs-radius-md)] border border-[var(--cxs-color-border)] ' +
     'bg-[var(--cxs-color-surface)] text-[var(--cxs-color-on-surface)] ' +
     'placeholder:text-[var(--cxs-color-on-surface-muted)] transition-colors ' +
     'focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 ' +
     'focus-visible:outline-[var(--cxs-color-focus)] focus-visible:border-[var(--cxs-color-focus)] ' +
     'disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-60';
-const WRAPPER_CLASSES$3 = 'flex w-full flex-col gap-1';
-const LABEL_BASE_CLASSES$2 = 'font-medium text-(--cxs-color-on-surface)';
-const LABEL_DISABLED_CLASSES$2 = 'text-[var(--cxs-color-on-surface-muted)]';
-const VARIANT_CLASSES$2 = {
+const WRAPPER_CLASSES$4 = 'flex w-full flex-col gap-1';
+const LABEL_BASE_CLASSES$3 = 'font-medium text-(--cxs-color-on-surface)';
+const LABEL_DISABLED_CLASSES$3 = 'text-[var(--cxs-color-on-surface-muted)]';
+const VARIANT_CLASSES$3 = {
     outline: 'bg-[var(--cxs-color-surface)]',
     filled: 'bg-[var(--cxs-color-surface-hover)]'
 };
-const SIZE_CLASSES = {
+const SIZE_CLASSES$1 = {
     sm: 'h-8 pl-3 pr-9 text-sm',
     md: 'h-10 pl-3 pr-9 text-sm',
     lg: 'h-12 pl-4 pr-10 text-base'
 };
-const LABEL_SIZE_CLASSES$1 = {
+const LABEL_SIZE_CLASSES$2 = {
     sm: 'text-sm',
     md: 'text-sm',
     lg: 'text-base'
 };
-const INVALID_CLASSES = 'border-[var(--cxs-color-danger)] focus-visible:border-[var(--cxs-color-danger)] ' +
+const INVALID_CLASSES$1 = 'border-[var(--cxs-color-danger)] focus-visible:border-[var(--cxs-color-danger)] ' +
     'focus-visible:outline-[var(--cxs-color-danger)]';
 class CxsSelectComponent {
     changeDetector = inject(ChangeDetectorRef);
@@ -4042,22 +4135,22 @@ class CxsSelectComponent {
     }
     get selectClass() {
         return [
-            BASE_CLASSES$2,
-            SIZE_CLASSES[this.size],
-            VARIANT_CLASSES$2[this.variant],
-            this.invalid ? INVALID_CLASSES : ''
+            BASE_CLASSES$3,
+            SIZE_CLASSES$1[this.size],
+            VARIANT_CLASSES$3[this.variant],
+            this.invalid ? INVALID_CLASSES$1 : ''
         ]
             .filter(Boolean)
             .join(' ');
     }
     get wrapperClass() {
-        return WRAPPER_CLASSES$3;
+        return WRAPPER_CLASSES$4;
     }
     get labelClass() {
         return [
-            LABEL_BASE_CLASSES$2,
-            LABEL_SIZE_CLASSES$1[this.size],
-            this.isDisabled ? LABEL_DISABLED_CLASSES$2 : ''
+            LABEL_BASE_CLASSES$3,
+            LABEL_SIZE_CLASSES$2[this.size],
+            this.isDisabled ? LABEL_DISABLED_CLASSES$3 : ''
         ]
             .filter(Boolean)
             .join(' ');
@@ -4158,8 +4251,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.10", ngImpo
                 type: Output
             }] } });
 
-const BASE_CLASSES$1 = 'cxs-skeleton block overflow-hidden bg-[var(--cxs-color-skeleton-base)]';
-const VARIANT_CLASSES$1 = {
+const BASE_CLASSES$2 = 'cxs-skeleton block overflow-hidden bg-[var(--cxs-color-skeleton-base)]';
+const VARIANT_CLASSES$2 = {
     line: 'rounded-[var(--cxs-radius-md)]',
     block: 'rounded-[var(--cxs-radius-md)]',
     circle: 'rounded-full'
@@ -4194,8 +4287,8 @@ class CxsSkeletonComponent {
     }
     get skeletonClass() {
         return [
-            BASE_CLASSES$1,
-            VARIANT_CLASSES$1[this.variant],
+            BASE_CLASSES$2,
+            VARIANT_CLASSES$2[this.variant],
             this.animated ? 'cxs-skeleton--animated' : '',
             this.hostClass
         ]
@@ -4237,12 +4330,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.10", ngImpo
                 type: Input
             }] } });
 
-const WRAPPER_CLASSES$2 = 'flex w-full flex-col gap-1.5';
+const WRAPPER_CLASSES$3 = 'flex w-full flex-col gap-1.5';
 const HEADER_CLASSES = 'flex items-center justify-between gap-3';
-const LABEL_BASE_CLASSES$1 = 'font-medium text-[var(--cxs-color-on-surface)]';
-const LABEL_DISABLED_CLASSES$1 = 'text-[var(--cxs-color-on-surface-muted)]';
+const LABEL_BASE_CLASSES$2 = 'font-medium text-[var(--cxs-color-on-surface)]';
+const LABEL_DISABLED_CLASSES$2 = 'text-[var(--cxs-color-on-surface-muted)]';
 const VALUE_CLASSES = 'text-sm text-[var(--cxs-color-on-surface-muted)]';
-const LABEL_SIZE_CLASSES = {
+const LABEL_SIZE_CLASSES$1 = {
     sm: 'text-sm',
     md: 'text-sm',
     lg: 'text-base'
@@ -4313,16 +4406,16 @@ class CxsSliderComponent {
         ].join(' ');
     }
     get wrapperClass() {
-        return WRAPPER_CLASSES$2;
+        return WRAPPER_CLASSES$3;
     }
     get headerClass() {
         return HEADER_CLASSES;
     }
     get labelClass() {
         return [
-            LABEL_BASE_CLASSES$1,
-            LABEL_SIZE_CLASSES[this.size],
-            this.isDisabled ? LABEL_DISABLED_CLASSES$1 : ''
+            LABEL_BASE_CLASSES$2,
+            LABEL_SIZE_CLASSES$1[this.size],
+            this.isDisabled ? LABEL_DISABLED_CLASSES$2 : ''
         ]
             .filter(Boolean)
             .join(' ');
@@ -4546,6 +4639,203 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.10", ngImpo
                 type: Input
             }] } });
 
+const BASE_CLASSES$1 = 'w-full rounded-[var(--cxs-radius-md)] border border-[var(--cxs-color-border)] ' +
+    'bg-[var(--cxs-color-surface)] text-[var(--cxs-color-on-surface)] ' +
+    'placeholder:text-[var(--cxs-color-on-surface-muted)] transition-colors ' +
+    'focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 ' +
+    'focus-visible:outline-[var(--cxs-color-focus)] focus-visible:border-[var(--cxs-color-focus)] ' +
+    'disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-60';
+const WRAPPER_CLASSES$2 = 'flex w-full flex-col gap-1';
+const LABEL_BASE_CLASSES$1 = 'font-medium text-(--cxs-color-on-surface)';
+const LABEL_DISABLED_CLASSES$1 = 'text-[var(--cxs-color-on-surface-muted)]';
+const ERROR_BASE_CLASSES = 'text-[var(--cxs-color-danger)]';
+const VARIANT_CLASSES$1 = {
+    outline: 'bg-[var(--cxs-color-surface)]',
+    filled: 'bg-[var(--cxs-color-surface-hover)]'
+};
+const SIZE_CLASSES = {
+    sm: 'px-3 py-1.5 text-sm',
+    md: 'px-3 py-2 text-sm',
+    lg: 'px-4 py-3 text-base'
+};
+const RESIZE_CLASSES = {
+    vertical: 'resize-y',
+    none: 'resize-none'
+};
+const LABEL_SIZE_CLASSES = {
+    sm: 'text-sm',
+    md: 'text-sm',
+    lg: 'text-base'
+};
+const ERROR_SIZE_CLASSES = {
+    sm: 'text-xs',
+    md: 'text-xs',
+    lg: 'text-sm'
+};
+const INVALID_CLASSES = 'border-[var(--cxs-color-danger)] focus-visible:border-[var(--cxs-color-danger)] ' +
+    'focus-visible:outline-[var(--cxs-color-danger)]';
+class CxsTextareaComponent {
+    changeDetector = inject(ChangeDetectorRef);
+    static nextId = 0;
+    value = '';
+    variant = 'outline';
+    size = 'md';
+    rows = 3;
+    resize = 'vertical';
+    disabled = false;
+    readonly = false;
+    required = false;
+    invalid = false;
+    label;
+    id;
+    name;
+    placeholder;
+    maxlength;
+    spellcheck = null;
+    ariaLabel;
+    ariaDescribedby;
+    valueChange = new EventEmitter();
+    instanceId = `cxs-textarea-${CxsTextareaComponent.nextId++}`;
+    disabledFromControl = false;
+    onChange = () => { };
+    onTouched = () => { };
+    get isDisabled() {
+        return this.disabled || this.disabledFromControl;
+    }
+    get textareaClass() {
+        return [
+            BASE_CLASSES$1,
+            SIZE_CLASSES[this.size],
+            VARIANT_CLASSES$1[this.variant],
+            RESIZE_CLASSES[this.resize],
+            this.invalid ? INVALID_CLASSES : ''
+        ]
+            .filter(Boolean)
+            .join(' ');
+    }
+    get wrapperClass() {
+        return WRAPPER_CLASSES$2;
+    }
+    get labelClass() {
+        return [
+            LABEL_BASE_CLASSES$1,
+            LABEL_SIZE_CLASSES[this.size],
+            this.isDisabled ? LABEL_DISABLED_CLASSES$1 : ''
+        ]
+            .filter(Boolean)
+            .join(' ');
+    }
+    get textareaId() {
+        if (this.id) {
+            return this.id;
+        }
+        return this.label ? this.instanceId : null;
+    }
+    get labelId() {
+        if (!this.label) {
+            return null;
+        }
+        return `${this.textareaId}-label`;
+    }
+    get errorId() {
+        return `${this.instanceId}-error`;
+    }
+    get ariaLabelValue() {
+        if (this.label) {
+            return null;
+        }
+        return this.ariaLabel ?? null;
+    }
+    get ariaDescribedbyValue() {
+        const tokens = [this.ariaDescribedby].filter(Boolean);
+        if (this.invalid) {
+            tokens.push(this.errorId);
+        }
+        return tokens.length > 0 ? tokens.join(' ') : null;
+    }
+    get errorClass() {
+        return [ERROR_BASE_CLASSES, ERROR_SIZE_CLASSES[this.size]].join(' ');
+    }
+    writeValue(value) {
+        this.value = value ?? '';
+        this.changeDetector.markForCheck();
+    }
+    registerOnChange(fn) {
+        this.onChange = fn;
+    }
+    registerOnTouched(fn) {
+        this.onTouched = fn;
+    }
+    setDisabledState(isDisabled) {
+        this.disabledFromControl = isDisabled;
+        this.changeDetector.markForCheck();
+    }
+    onInput(event) {
+        const target = event.target;
+        const nextValue = target.value;
+        this.value = nextValue;
+        this.onChange(nextValue);
+        this.valueChange.emit(nextValue);
+    }
+    onBlur() {
+        this.onTouched();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: CxsTextareaComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.10", type: CxsTextareaComponent, isStandalone: true, selector: "cxs-textarea", inputs: { value: "value", variant: "variant", size: "size", rows: "rows", resize: "resize", disabled: "disabled", readonly: "readonly", required: "required", invalid: "invalid", label: "label", id: "id", name: "name", placeholder: "placeholder", maxlength: "maxlength", spellcheck: "spellcheck", ariaLabel: "ariaLabel", ariaDescribedby: "ariaDescribedby" }, outputs: { valueChange: "valueChange" }, providers: [
+            {
+                provide: NG_VALUE_ACCESSOR,
+                useExisting: forwardRef(() => CxsTextareaComponent),
+                multi: true
+            }
+        ], ngImport: i0, template: "<div [class]=\"wrapperClass\">\n  @if (label) {\n    <label [class]=\"labelClass\" [attr.id]=\"labelId\" [attr.for]=\"textareaId\">\n      {{ label }}\n    </label>\n  }\n  <textarea\n    [class]=\"textareaClass\"\n    [attr.id]=\"textareaId\"\n    [attr.name]=\"name\"\n    [attr.placeholder]=\"placeholder\"\n    [attr.maxlength]=\"maxlength ?? null\"\n    [attr.spellcheck]=\"spellcheck === null ? null : spellcheck\"\n    [attr.aria-label]=\"ariaLabelValue\"\n    [attr.aria-labelledby]=\"labelId\"\n    [attr.aria-describedby]=\"ariaDescribedbyValue\"\n    [attr.aria-invalid]=\"invalid ? 'true' : null\"\n    [rows]=\"rows\"\n    [disabled]=\"isDisabled\"\n    [readonly]=\"readonly\"\n    [required]=\"required\"\n    [value]=\"value\"\n    (input)=\"onInput($event)\"\n    (blur)=\"onBlur()\"\n  ></textarea>\n  @if (invalid) {\n    <div [class]=\"errorClass\" [attr.id]=\"errorId\" aria-live=\"polite\">\n      <ng-content select=\"[cxsTextareaError]\"></ng-content>\n    </div>\n  }\n</div>\n", changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: CxsTextareaComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'cxs-textarea', standalone: true, imports: [], changeDetection: ChangeDetectionStrategy.OnPush, providers: [
+                        {
+                            provide: NG_VALUE_ACCESSOR,
+                            useExisting: forwardRef(() => CxsTextareaComponent),
+                            multi: true
+                        }
+                    ], template: "<div [class]=\"wrapperClass\">\n  @if (label) {\n    <label [class]=\"labelClass\" [attr.id]=\"labelId\" [attr.for]=\"textareaId\">\n      {{ label }}\n    </label>\n  }\n  <textarea\n    [class]=\"textareaClass\"\n    [attr.id]=\"textareaId\"\n    [attr.name]=\"name\"\n    [attr.placeholder]=\"placeholder\"\n    [attr.maxlength]=\"maxlength ?? null\"\n    [attr.spellcheck]=\"spellcheck === null ? null : spellcheck\"\n    [attr.aria-label]=\"ariaLabelValue\"\n    [attr.aria-labelledby]=\"labelId\"\n    [attr.aria-describedby]=\"ariaDescribedbyValue\"\n    [attr.aria-invalid]=\"invalid ? 'true' : null\"\n    [rows]=\"rows\"\n    [disabled]=\"isDisabled\"\n    [readonly]=\"readonly\"\n    [required]=\"required\"\n    [value]=\"value\"\n    (input)=\"onInput($event)\"\n    (blur)=\"onBlur()\"\n  ></textarea>\n  @if (invalid) {\n    <div [class]=\"errorClass\" [attr.id]=\"errorId\" aria-live=\"polite\">\n      <ng-content select=\"[cxsTextareaError]\"></ng-content>\n    </div>\n  }\n</div>\n" }]
+        }], propDecorators: { value: [{
+                type: Input
+            }], variant: [{
+                type: Input
+            }], size: [{
+                type: Input
+            }], rows: [{
+                type: Input
+            }], resize: [{
+                type: Input
+            }], disabled: [{
+                type: Input
+            }], readonly: [{
+                type: Input
+            }], required: [{
+                type: Input
+            }], invalid: [{
+                type: Input
+            }], label: [{
+                type: Input
+            }], id: [{
+                type: Input
+            }], name: [{
+                type: Input
+            }], placeholder: [{
+                type: Input
+            }], maxlength: [{
+                type: Input
+            }], spellcheck: [{
+                type: Input
+            }], ariaLabel: [{
+                type: Input
+            }], ariaDescribedby: [{
+                type: Input
+            }], valueChange: [{
+                type: Output
+            }] } });
+
 const WRAPPER_CLASSES$1 = 'inline-flex items-center gap-2';
 const LABEL_BASE_CLASSES = 'text-sm text-[var(--cxs-color-on-surface)] select-none';
 const LABEL_DISABLED_CLASSES = 'text-[var(--cxs-color-on-surface-muted)]';
@@ -5200,5 +5490,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.10", ngImpo
  * Generated bundle index. Do not edit.
  */
 
-export { CXS_USER_PREFERENCE_CHANGED_EVENT, CXS_USER_SESSION_STORAGE_KEY, CerxosUi, CxsAccordionComponent, CxsAccordionItemComponent, CxsActionMenuComponent, CxsAlertComponent, CxsAvatarComponent, CxsBadgeComponent, CxsBreadcrumbComponent, CxsButtonComponent, CxsCardComponent, CxsCarouselComponent, CxsCheckboxComponent, CxsCurrencyPipe, CxsDataTableCellDirective, CxsDataTableComponent, CxsDatePipe, CxsDatepickerComponent, CxsDialogComponent, CxsHabitGridComponent, CxsHoverCardComponent, CxsHoverCardContentDirective, CxsHoverCardTriggerDirective, CxsIconComponent, CxsInputComponent, CxsMenubarComponent, CxsMultiSelectComponent, CxsPreferenceFormattingService, CxsProgressBarComponent, CxsRadioChipGroupComponent, CxsRadioComponent, CxsSelectComponent, CxsSkeletonComponent, CxsSliderComponent, CxsTabLabelDirective, CxsTabPanelComponent, CxsTableComponent, CxsTabsComponent, CxsThemeDirective, CxsToastComponent, CxsToggleComponent, CxsTooltipComponent };
+export { CXS_DATA_TABLE_PAGE_SIZE_STORAGE_PREFIX, CXS_USER_PREFERENCE_CHANGED_EVENT, CXS_USER_SESSION_STORAGE_KEY, CerxosUi, CxsAccordionComponent, CxsAccordionItemComponent, CxsActionMenuComponent, CxsAlertComponent, CxsAvatarComponent, CxsBadgeComponent, CxsBreadcrumbComponent, CxsButtonComponent, CxsCardComponent, CxsCarouselComponent, CxsCheckboxComponent, CxsCurrencyPipe, CxsDataTableCellDirective, CxsDataTableComponent, CxsDatePipe, CxsDatepickerComponent, CxsDialogComponent, CxsHabitGridComponent, CxsHoverCardComponent, CxsHoverCardContentDirective, CxsHoverCardTriggerDirective, CxsIconComponent, CxsInputComponent, CxsMenubarComponent, CxsMultiSelectComponent, CxsPreferenceFormattingService, CxsProgressBarComponent, CxsRadioChipGroupComponent, CxsRadioComponent, CxsSelectComponent, CxsSkeletonComponent, CxsSliderComponent, CxsTabLabelDirective, CxsTabPanelComponent, CxsTableComponent, CxsTabsComponent, CxsTextareaComponent, CxsThemeDirective, CxsToastComponent, CxsToggleComponent, CxsTooltipComponent, readCxsDataTablePageSize, writeCxsDataTablePageSize };
 //# sourceMappingURL=cerxos-ui.mjs.map