cerxos-ui 0.0.7 → 0.0.9

package/fesm2022/cerxos-ui.mjs

@@ -27,9 +27,11 @@ const TRIGGER_BASE_CLASSES = 'inline-flex items-center justify-center rounded-[v
     'focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 ' +
     'focus-visible:outline-[var(--cxs-color-focus)]';
 const TRIGGER_DISABLED_CLASSES = 'pointer-events-none opacity-60';
-const MENU_BASE_CLASSES = 'absolute z-40 mt-2 min-w-[10rem] rounded-[var(--cxs-radius-md)] ' +
+const MENU_BASE_CLASSES = 'min-w-[10rem] rounded-[var(--cxs-radius-md)] ' +
     'border border-[var(--cxs-color-border)] bg-[var(--cxs-color-surface)] py-1 ' +
     'shadow-[var(--cxs-shadow-sm)]';
+const MENU_POSITION_CLASSES = 'absolute z-40 mt-2';
+const MENU_FLOATING_CLASSES = 'fixed z-50';
 const MENU_ALIGN_CLASSES = {
     start: 'left-0 origin-top-left',
     end: 'right-0 origin-top-right'
@@ -49,11 +51,14 @@ class CxsActionMenuComponent {
     ariaLabel = 'Open actions menu';
     menuLabel = 'Actions';
     disabled = false;
+    floating = false;
     itemSelected = new EventEmitter();
     trigger;
+    menu;
     menuItems;
     menuId = `cxs-action-menu-${CxsActionMenuComponent.nextId++}`;
     isOpen = false;
+    menuPosition = null;
     constructor(elementRef) {
         this.elementRef = elementRef;
     }
@@ -61,7 +66,13 @@ class CxsActionMenuComponent {
         return [TRIGGER_BASE_CLASSES, this.disabled ? TRIGGER_DISABLED_CLASSES : ''].filter(Boolean).join(' ');
     }
     get menuClass() {
-        return [MENU_BASE_CLASSES, MENU_ALIGN_CLASSES[this.align]].join(' ');
+        return [
+            MENU_BASE_CLASSES,
+            this.floating ? MENU_FLOATING_CLASSES : MENU_POSITION_CLASSES,
+            !this.floating ? MENU_ALIGN_CLASSES[this.align] : ''
+        ]
+            .filter(Boolean)
+            .join(' ');
     }
     get emptyStateClass() {
         return EMPTY_STATE_CLASSES$1;
@@ -91,10 +102,12 @@ class CxsActionMenuComponent {
             return;
         }
         this.isOpen = true;
+        this.updateMenuPosition();
         this.focusFirstItem();
     }
     close() {
         this.isOpen = false;
+        this.menuPosition = null;
     }
     onTriggerKeydown(event) {
         if (this.disabled) {
@@ -162,6 +175,12 @@ class CxsActionMenuComponent {
             this.close();
         }
     }
+    onWindowResize() {
+        if (!this.isOpen) {
+            return;
+        }
+        this.updateMenuPosition();
+    }
     focusFirstItem() {
         if (typeof document === 'undefined') {
             return;
@@ -174,17 +193,57 @@ class CxsActionMenuComponent {
     focusTrigger() {
         this.trigger?.nativeElement.focus();
     }
+    updateMenuPosition() {
+        if (!this.floating) {
+            return;
+        }
+        if (typeof window === 'undefined') {
+            return;
+        }
+        const trigger = this.trigger?.nativeElement;
+        if (!trigger) {
+            return;
+        }
+        const rect = trigger.getBoundingClientRect();
+        const offset = 8;
+        this.menuPosition = {
+            top: rect.bottom + offset,
+            left: rect.left
+        };
+        setTimeout(() => {
+            const menuEl = this.menu?.nativeElement;
+            const menuRect = menuEl?.getBoundingClientRect();
+            if (!menuRect) {
+                return;
+            }
+            let top = rect.bottom + offset;
+            let left = this.align === 'end' ? rect.right - menuRect.width : rect.left;
+            if (top + menuRect.height > window.innerHeight) {
+                top = rect.top - menuRect.height - offset;
+            }
+            if (top < offset) {
+                top = offset;
+            }
+            if (left + menuRect.width > window.innerWidth - offset) {
+                left = Math.max(offset, window.innerWidth - menuRect.width - offset);
+            }
+            if (left < offset) {
+                left = offset;
+            }
+            this.menuPosition = { top, left };
+        }, 0);
+    }
     getFocusableItems() {
         return (this.menuItems?.toArray() ?? [])
             .map((item) => item.nativeElement)
             .filter((item) => !item.hasAttribute('disabled') && !item.hasAttribute('data-disabled'));
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: CxsActionMenuComponent, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: CxsActionMenuComponent, isStandalone: true, selector: "cxs-action-menu", inputs: { items: "items", align: "align", ariaLabel: "ariaLabel", menuLabel: "menuLabel", disabled: "disabled" }, outputs: { itemSelected: "itemSelected" }, host: { listeners: { "document:click": "onDocumentClick($event)" } }, viewQueries: [{ propertyName: "trigger", first: true, predicate: ["trigger"], descendants: true, read: ElementRef }, { propertyName: "menuItems", predicate: ["menuItem"], descendants: true, read: ElementRef }], ngImport: i0, template: "<div class=\"relative inline-flex\">\n  <button\n    #trigger\n    type=\"button\"\n    [class]=\"triggerClass\"\n    aria-haspopup=\"menu\"\n    [attr.aria-expanded]=\"isOpen\"\n    [attr.aria-controls]=\"menuId\"\n    [attr.aria-label]=\"ariaLabel\"\n    (click)=\"toggle()\"\n    (keydown)=\"onTriggerKeydown($event)\"\n  >\n    <svg class=\"h-4 w-4\" viewBox=\"0 0 20 20\" fill=\"currentColor\" aria-hidden=\"true\">\n      <circle cx=\"4\" cy=\"10\" r=\"1.5\"></circle>\n      <circle cx=\"10\" cy=\"10\" r=\"1.5\"></circle>\n      <circle cx=\"16\" cy=\"10\" r=\"1.5\"></circle>\n    </svg>\n  </button>\n\n  @if (isOpen) {\n    <div\n      [class]=\"menuClass\"\n      [attr.id]=\"menuId\"\n      role=\"menu\"\n      [attr.aria-label]=\"menuLabel\"\n      (keydown)=\"onMenuKeydown($event)\"\n    >\n      @if (items.length) {\n        @for (item of items; track item.value) {\n          <button\n            #menuItem\n            type=\"button\"\n            role=\"menuitem\"\n            [class]=\"getItemClass(item)\"\n            [attr.data-disabled]=\"isItemDisabled(item) ? '' : null\"\n            [attr.aria-disabled]=\"isItemDisabled(item) ? 'true' : null\"\n            [disabled]=\"isItemDisabled(item)\"\n            (click)=\"onItemClick(item)\"\n          >\n            {{ item.label }}\n          </button>\n        }\n      } @else {\n        <span [class]=\"emptyStateClass\">No actions</span>\n      }\n    </div>\n  }\n</div>\n", changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: CxsActionMenuComponent, isStandalone: true, selector: "cxs-action-menu", inputs: { items: "items", align: "align", ariaLabel: "ariaLabel", menuLabel: "menuLabel", disabled: "disabled", floating: "floating" }, outputs: { itemSelected: "itemSelected" }, host: { listeners: { "document:click": "onDocumentClick($event)", "window:resize": "onWindowResize()" } }, viewQueries: [{ propertyName: "trigger", first: true, predicate: ["trigger"], descendants: true, read: ElementRef }, { propertyName: "menu", first: true, predicate: ["menu"], descendants: true, read: ElementRef }, { propertyName: "menuItems", predicate: ["menuItem"], descendants: true, read: ElementRef }], ngImport: i0, template: "<div class=\"relative inline-flex\">\n  <button\n    #trigger\n    type=\"button\"\n    [class]=\"triggerClass\"\n    aria-haspopup=\"menu\"\n    [attr.aria-expanded]=\"isOpen\"\n    [attr.aria-controls]=\"menuId\"\n    [attr.aria-label]=\"ariaLabel\"\n    (click)=\"toggle()\"\n    (keydown)=\"onTriggerKeydown($event)\"\n  >\n    <svg class=\"h-4 w-4\" viewBox=\"0 0 20 20\" fill=\"currentColor\" aria-hidden=\"true\">\n      <circle cx=\"4\" cy=\"10\" r=\"1.5\"></circle>\n      <circle cx=\"10\" cy=\"10\" r=\"1.5\"></circle>\n      <circle cx=\"16\" cy=\"10\" r=\"1.5\"></circle>\n    </svg>\n  </button>\n\n  @if (isOpen) {\n    <div\n      #menu\n      [class]=\"menuClass\"\n      [attr.id]=\"menuId\"\n      role=\"menu\"\n      [attr.aria-label]=\"menuLabel\"\n      [style.top.px]=\"menuPosition?.top\"\n      [style.left.px]=\"menuPosition?.left\"\n      (keydown)=\"onMenuKeydown($event)\"\n    >\n      @if (items.length) {\n        @for (item of items; track item.value) {\n          <button\n            #menuItem\n            type=\"button\"\n            role=\"menuitem\"\n            [class]=\"getItemClass(item)\"\n            [attr.data-disabled]=\"isItemDisabled(item) ? '' : null\"\n            [attr.aria-disabled]=\"isItemDisabled(item) ? 'true' : null\"\n            [disabled]=\"isItemDisabled(item)\"\n            (click)=\"onItemClick(item)\"\n          >\n            {{ item.label }}\n          </button>\n        }\n      } @else {\n        <span [class]=\"emptyStateClass\">No actions</span>\n      }\n    </div>\n  }\n</div>\n", changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: CxsActionMenuComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'cxs-action-menu', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"relative inline-flex\">\n  <button\n    #trigger\n    type=\"button\"\n    [class]=\"triggerClass\"\n    aria-haspopup=\"menu\"\n    [attr.aria-expanded]=\"isOpen\"\n    [attr.aria-controls]=\"menuId\"\n    [attr.aria-label]=\"ariaLabel\"\n    (click)=\"toggle()\"\n    (keydown)=\"onTriggerKeydown($event)\"\n  >\n    <svg class=\"h-4 w-4\" viewBox=\"0 0 20 20\" fill=\"currentColor\" aria-hidden=\"true\">\n      <circle cx=\"4\" cy=\"10\" r=\"1.5\"></circle>\n      <circle cx=\"10\" cy=\"10\" r=\"1.5\"></circle>\n      <circle cx=\"16\" cy=\"10\" r=\"1.5\"></circle>\n    </svg>\n  </button>\n\n  @if (isOpen) {\n    <div\n      [class]=\"menuClass\"\n      [attr.id]=\"menuId\"\n      role=\"menu\"\n      [attr.aria-label]=\"menuLabel\"\n      (keydown)=\"onMenuKeydown($event)\"\n    >\n      @if (items.length) {\n        @for (item of items; track item.value) {\n          <button\n            #menuItem\n            type=\"button\"\n            role=\"menuitem\"\n            [class]=\"getItemClass(item)\"\n            [attr.data-disabled]=\"isItemDisabled(item) ? '' : null\"\n            [attr.aria-disabled]=\"isItemDisabled(item) ? 'true' : null\"\n            [disabled]=\"isItemDisabled(item)\"\n            (click)=\"onItemClick(item)\"\n          >\n            {{ item.label }}\n          </button>\n        }\n      } @else {\n        <span [class]=\"emptyStateClass\">No actions</span>\n      }\n    </div>\n  }\n</div>\n" }]
+            args: [{ selector: 'cxs-action-menu', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"relative inline-flex\">\n  <button\n    #trigger\n    type=\"button\"\n    [class]=\"triggerClass\"\n    aria-haspopup=\"menu\"\n    [attr.aria-expanded]=\"isOpen\"\n    [attr.aria-controls]=\"menuId\"\n    [attr.aria-label]=\"ariaLabel\"\n    (click)=\"toggle()\"\n    (keydown)=\"onTriggerKeydown($event)\"\n  >\n    <svg class=\"h-4 w-4\" viewBox=\"0 0 20 20\" fill=\"currentColor\" aria-hidden=\"true\">\n      <circle cx=\"4\" cy=\"10\" r=\"1.5\"></circle>\n      <circle cx=\"10\" cy=\"10\" r=\"1.5\"></circle>\n      <circle cx=\"16\" cy=\"10\" r=\"1.5\"></circle>\n    </svg>\n  </button>\n\n  @if (isOpen) {\n    <div\n      #menu\n      [class]=\"menuClass\"\n      [attr.id]=\"menuId\"\n      role=\"menu\"\n      [attr.aria-label]=\"menuLabel\"\n      [style.top.px]=\"menuPosition?.top\"\n      [style.left.px]=\"menuPosition?.left\"\n      (keydown)=\"onMenuKeydown($event)\"\n    >\n      @if (items.length) {\n        @for (item of items; track item.value) {\n          <button\n            #menuItem\n            type=\"button\"\n            role=\"menuitem\"\n            [class]=\"getItemClass(item)\"\n            [attr.data-disabled]=\"isItemDisabled(item) ? '' : null\"\n            [attr.aria-disabled]=\"isItemDisabled(item) ? 'true' : null\"\n            [disabled]=\"isItemDisabled(item)\"\n            (click)=\"onItemClick(item)\"\n          >\n            {{ item.label }}\n          </button>\n        }\n      } @else {\n        <span [class]=\"emptyStateClass\">No actions</span>\n      }\n    </div>\n  }\n</div>\n" }]
         }], ctorParameters: () => [{ type: i0.ElementRef }], propDecorators: { items: [{
                 type: Input
             }], align: [{
@@ -195,17 +254,25 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
                 type: Input
             }], disabled: [{
                 type: Input
+            }], floating: [{
+                type: Input
             }], itemSelected: [{
                 type: Output
             }], trigger: [{
                 type: ViewChild,
                 args: ['trigger', { read: ElementRef }]
+            }], menu: [{
+                type: ViewChild,
+                args: ['menu', { read: ElementRef }]
             }], menuItems: [{
                 type: ViewChildren,
                 args: ['menuItem', { read: ElementRef }]
             }], onDocumentClick: [{
                 type: HostListener,
                 args: ['document:click', ['$event']]
+            }], onWindowResize: [{
+                type: HostListener,
+                args: ['window:resize']
             }] } });
 
 const BASE_CLASSES$a = 'relative flex w-full gap-3 rounded-[var(--cxs-radius-md)] border border-l-4 px-4 py-3 text-sm ' +
@@ -988,13 +1055,16 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
                 args: ['cxsDataTableCell']
             }] } });
 
-const WRAPPER_BASE_CLASSES$1 = 'w-full overflow-hidden';
+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';
 const WRAPPER_BORDERED_CLASSES$1 = 'rounded-[var(--cxs-radius-md)] border border-[var(--cxs-color-border)]';
-const TABLE_BASE_CLASSES$1 = 'w-full border-collapse text-sm text-[var(--cxs-color-on-surface)]';
+const TABLE_BASE_CLASSES$1 = 'w-full min-w-[max-content] border-collapse text-sm text-[var(--cxs-color-on-surface)]';
 const TABLE_COMPACT_CLASSES$1 = 'text-xs';
 const HEADER_ROW_CLASSES$1 = 'border-b border-[var(--cxs-color-border)] text-xs font-semibold ' +
     'text-[var(--cxs-color-on-surface-muted)]';
 const HEADER_CELL_BASE_CLASSES$1 = 'px-3 py-2 text-left';
+const COLUMN_BORDER_CLASSES = 'border-l border-[var(--cxs-color-border)] first:border-l-0';
 const HEADER_BUTTON_CLASSES = 'inline-flex items-center gap-2 rounded-[var(--cxs-radius-md)] px-2 py-1 ' +
     'transition-colors hover:bg-[var(--cxs-color-surface-hover)] ' +
     'focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 ' +
@@ -1022,13 +1092,15 @@ const PAGE_SELECT_CLASSES = 'rounded-[var(--cxs-radius-md)] border border-[var(-
 const TOOLBAR_CLASSES = 'mb-3 flex flex-wrap items-center justify-between gap-3 text-sm text-[var(--cxs-color-on-surface)]';
 const TOOLBAR_GROUP_CLASSES = 'flex flex-wrap items-center gap-2';
 const TOOLBAR_INPUT_CLASSES = 'w-full rounded-[var(--cxs-radius-md)] border border-[var(--cxs-color-border)] ' +
-    'bg-[var(--cxs-color-surface)] px-3 py-2 text-sm text-[var(--cxs-color-on-surface)] ' +
+    'bg-[var(--cxs-color-surface)] pl-9 pr-3 py-2 text-sm text-[var(--cxs-color-on-surface)] ' +
     'placeholder:text-[var(--cxs-color-on-surface-muted)] focus-visible:outline focus-visible:outline-2 ' +
     'focus-visible:outline-offset-2 focus-visible:outline-[var(--cxs-color-focus)]';
 const TOOLBAR_INPUT_INLINE_CLASSES = 'w-full sm:w-64 rounded-[var(--cxs-radius-md)] border border-[var(--cxs-color-border)] ' +
-    'bg-[var(--cxs-color-surface)] px-3 py-2 text-sm text-[var(--cxs-color-on-surface)] ' +
+    'bg-[var(--cxs-color-surface)] pl-9 pr-3 py-2 text-sm text-[var(--cxs-color-on-surface)] ' +
     'placeholder:text-[var(--cxs-color-on-surface-muted)] focus-visible:outline focus-visible:outline-2 ' +
     'focus-visible:outline-offset-2 focus-visible:outline-[var(--cxs-color-focus)]';
+const TOOLBAR_INPUT_WRAPPER_CLASSES = 'relative';
+const TOOLBAR_INPUT_ICON_CLASSES = 'pointer-events-none absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-(--cxs-color-on-surface-muted)';
 const TOOLBAR_BUTTON_CLASSES = 'inline-flex items-center justify-center rounded-[var(--cxs-radius-md)] border border-[var(--cxs-color-border)] ' +
     'px-3 py-2 text-sm transition-colors hover:bg-[var(--cxs-color-surface-hover)]';
 const TITLE_BAR_CLASSES = 'mb-3 flex flex-wrap items-start justify-between gap-3';
@@ -1051,6 +1123,8 @@ class CxsDataTableComponent {
     loading = false;
     emptyMessage = 'No data available';
     emptyCell = '—';
+    allowOverflow = false;
+    columnBorders = false;
     pageSize = 10;
     pageIndex = 1;
     pageSizeOptions = [10, 20, 50];
@@ -1115,6 +1189,7 @@ class CxsDataTableComponent {
     get wrapperClass() {
         return [
             WRAPPER_BASE_CLASSES$1,
+            this.allowOverflow ? WRAPPER_OVERFLOW_VISIBLE_CLASSES : WRAPPER_OVERFLOW_HIDDEN_CLASSES,
             this.bordered ? WRAPPER_BORDERED_CLASSES$1 : '',
             this.hostClass
         ]
@@ -1161,6 +1236,12 @@ class CxsDataTableComponent {
     get toolbarInputInlineClass() {
         return TOOLBAR_INPUT_INLINE_CLASSES;
     }
+    get toolbarInputWrapperClass() {
+        return TOOLBAR_INPUT_WRAPPER_CLASSES;
+    }
+    get toolbarInputIconClass() {
+        return TOOLBAR_INPUT_ICON_CLASSES;
+    }
     get toolbarButtonClass() {
         return TOOLBAR_BUTTON_CLASSES;
     }
@@ -1224,6 +1305,7 @@ class CxsDataTableComponent {
     headerCellClass(column) {
         return [
             HEADER_CELL_BASE_CLASSES$1,
+            this.columnBorders ? COLUMN_BORDER_CLASSES : '',
             ALIGN_CLASSES$1[column.align ?? 'left'],
             column.headerClass ?? ''
         ]
@@ -1240,6 +1322,7 @@ class CxsDataTableComponent {
         return [
             BODY_CELL_BASE_CLASSES$1,
             this.compact ? BODY_CELL_COMPACT_CLASSES$1 : '',
+            this.columnBorders ? COLUMN_BORDER_CLASSES : '',
             ALIGN_CLASSES$1[column.align ?? 'left'],
             column.cellClass ?? ''
         ]
@@ -1522,11 +1605,11 @@ class CxsDataTableComponent {
         return value;
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: CxsDataTableComponent, deps: [{ token: 'class', attribute: true }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", 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", 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          <input\n            type=\"search\"\n            [class]=\"toolbarInputInlineClass\"\n            placeholder=\"Search\"\n            [value]=\"globalFilter\"\n            (input)=\"onGlobalFilterChange($any($event.target).value)\"\n          />\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        <input\n          type=\"search\"\n          [class]=\"toolbarInputClass\"\n          placeholder=\"Search\"\n          [value]=\"globalFilter\"\n          (input)=\"onGlobalFilterChange($any($event.target).value)\"\n        />\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: "20.3.16", 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 });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", 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          <input\n            type=\"search\"\n            [class]=\"toolbarInputInlineClass\"\n            placeholder=\"Search\"\n            [value]=\"globalFilter\"\n            (input)=\"onGlobalFilterChange($any($event.target).value)\"\n          />\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        <input\n          type=\"search\"\n          [class]=\"toolbarInputClass\"\n          placeholder=\"Search\"\n          [value]=\"globalFilter\"\n          (input)=\"onGlobalFilterChange($any($event.target).value)\"\n        />\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: "@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" }]
         }], ctorParameters: () => [{ type: undefined, decorators: [{
                     type: Attribute,
                     args: ['class']
@@ -1554,6 +1637,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
                 type: Input
             }], emptyCell: [{
                 type: Input
+            }], allowOverflow: [{
+                type: Input
+            }], columnBorders: [{
+                type: Input
             }], pageSize: [{
                 type: Input
             }], pageIndex: [{