ng-fusion-ui 0.6.30 → 0.7.0

package/fesm2022/ng-fusion-ui.mjs

@@ -1,9 +1,14 @@
 import * as i0 from '@angular/core';
-import { booleanAttribute, Directive, Input, input, inject, ElementRef, Renderer2, NgModule, Injectable, Component, ChangeDetectionStrategy, ViewEncapsulation, HostBinding, signal, computed, effect, Pipe, model, contentChild, TemplateRef, DestroyRef, output, EventEmitter, untracked, Output, HostListener } from '@angular/core';
+import { booleanAttribute, Directive, Input, input, inject, ElementRef, Renderer2, NgModule, Injectable, Component, ChangeDetectionStrategy, ViewEncapsulation, HostBinding, signal, computed, effect, Pipe, model, contentChild, TemplateRef, DestroyRef, Injector, output, EventEmitter, untracked, Output, HostListener, linkedSignal, viewChild, afterRenderEffect } from '@angular/core';
 import * as i1$1 from '@angular/common';
-import { CommonModule, NgTemplateOutlet } from '@angular/common';
+import { CommonModule, NgTemplateOutlet, DatePipe } from '@angular/common';
 import * as i1 from '@angular/platform-browser';
 import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
+import * as i3 from '@angular/cdk/drag-drop';
+import { moveItemInArray, DragDropModule } from '@angular/cdk/drag-drop';
+import { CdkContextMenuTrigger, CdkMenu } from '@angular/cdk/menu';
+import * as i2 from '@angular/forms';
+import { FormsModule } from '@angular/forms';
 
 /**
  * @deprecated fu-btn-outline will be removed in next versions. Use `fuButton` instead.
@@ -900,8 +905,10 @@ class TableComponent {
         this.popupOffset = input(0);
         this.tableTitle = input();
         this.variant = input('raised');
+        this.sideBar = input(false);
         this.setsFirstPage$ = input();
         this.expandIndex = model(null);
+        this.sidebarTemplate = contentChild('sidebarTemplate');
         this.noRecordsTemplate = contentChild('noRecordsTemplate');
         this.footerTemplate = contentChild('footerTemplate');
         this.popupTemplate = contentChild(PopupTemplateDirective, {
@@ -923,6 +930,7 @@ class TableComponent {
         this.tableIntl = inject(TableIntlService);
         this.tableUtilityService = inject(TableUtilityService);
         this.tableStorageService = inject(TableStorageService);
+        this.injector = inject(Injector);
         this.noRecordsText = this.tableIntl.noRecordsText;
         this.columnCount = this.tableUtilityService.headerCount;
         this.pageSize = this.tableStorageService.pageSize;
@@ -1104,12 +1112,12 @@ class TableComponent {
         this.hoveredRow.set(null);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.6", ngImport: i0, type: TableComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.6", type: TableComponent, isStandalone: true, selector: "fu-table", inputs: { dataSource: { classPropertyName: "dataSource", publicName: "dataSource", isSignal: true, isRequired: true, transformFunction: null }, localStorageKey: { classPropertyName: "localStorageKey", publicName: "localStorageKey", isSignal: true, isRequired: false, transformFunction: null }, tableLayout: { classPropertyName: "tableLayout", publicName: "tableLayout", isSignal: true, isRequired: false, transformFunction: null }, firstPageOnInit: { classPropertyName: "firstPageOnInit", publicName: "firstPageOnInit", isSignal: true, isRequired: false, transformFunction: null }, pageSizeOptions: { classPropertyName: "pageSizeOptions", publicName: "pageSizeOptions", isSignal: true, isRequired: false, transformFunction: null }, isLoading: { classPropertyName: "isLoading", publicName: "isLoading", isSignal: true, isRequired: false, transformFunction: null }, totalCount: { classPropertyName: "totalCount", publicName: "totalCount", isSignal: true, isRequired: false, transformFunction: null }, serverPagination: { classPropertyName: "serverPagination", publicName: "serverPagination", isSignal: true, isRequired: false, transformFunction: null }, stripedRows: { classPropertyName: "stripedRows", publicName: "stripedRows", isSignal: true, isRequired: false, transformFunction: null }, expandable: { classPropertyName: "expandable", publicName: "expandable", isSignal: true, isRequired: false, transformFunction: null }, expanded: { classPropertyName: "expanded", publicName: "expanded", isSignal: true, isRequired: false, transformFunction: null }, showFilter: { classPropertyName: "showFilter", publicName: "showFilter", isSignal: true, isRequired: false, transformFunction: null }, showPaginator: { classPropertyName: "showPaginator", publicName: "showPaginator", isSignal: true, isRequired: false, transformFunction: null }, quickPageJump: { classPropertyName: "quickPageJump", publicName: "quickPageJump", isSignal: true, isRequired: false, transformFunction: null }, popupOffset: { classPropertyName: "popupOffset", publicName: "popupOffset", isSignal: true, isRequired: false, transformFunction: null }, tableTitle: { classPropertyName: "tableTitle", publicName: "tableTitle", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, setsFirstPage$: { classPropertyName: "setsFirstPage$", publicName: "setsFirstPage$", isSignal: true, isRequired: false, transformFunction: null }, expandIndex: { classPropertyName: "expandIndex", publicName: "expandIndex", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { expandIndex: "expandIndexChange", tableActions: "tableActions", selectRowAction: "selectRowAction" }, host: { listeners: { "window:resize": "onResize()" } }, providers: [
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.6", type: TableComponent, isStandalone: true, selector: "fu-table", inputs: { dataSource: { classPropertyName: "dataSource", publicName: "dataSource", isSignal: true, isRequired: true, transformFunction: null }, localStorageKey: { classPropertyName: "localStorageKey", publicName: "localStorageKey", isSignal: true, isRequired: false, transformFunction: null }, tableLayout: { classPropertyName: "tableLayout", publicName: "tableLayout", isSignal: true, isRequired: false, transformFunction: null }, firstPageOnInit: { classPropertyName: "firstPageOnInit", publicName: "firstPageOnInit", isSignal: true, isRequired: false, transformFunction: null }, pageSizeOptions: { classPropertyName: "pageSizeOptions", publicName: "pageSizeOptions", isSignal: true, isRequired: false, transformFunction: null }, isLoading: { classPropertyName: "isLoading", publicName: "isLoading", isSignal: true, isRequired: false, transformFunction: null }, totalCount: { classPropertyName: "totalCount", publicName: "totalCount", isSignal: true, isRequired: false, transformFunction: null }, serverPagination: { classPropertyName: "serverPagination", publicName: "serverPagination", isSignal: true, isRequired: false, transformFunction: null }, stripedRows: { classPropertyName: "stripedRows", publicName: "stripedRows", isSignal: true, isRequired: false, transformFunction: null }, expandable: { classPropertyName: "expandable", publicName: "expandable", isSignal: true, isRequired: false, transformFunction: null }, expanded: { classPropertyName: "expanded", publicName: "expanded", isSignal: true, isRequired: false, transformFunction: null }, showFilter: { classPropertyName: "showFilter", publicName: "showFilter", isSignal: true, isRequired: false, transformFunction: null }, showPaginator: { classPropertyName: "showPaginator", publicName: "showPaginator", isSignal: true, isRequired: false, transformFunction: null }, quickPageJump: { classPropertyName: "quickPageJump", publicName: "quickPageJump", isSignal: true, isRequired: false, transformFunction: null }, popupOffset: { classPropertyName: "popupOffset", publicName: "popupOffset", isSignal: true, isRequired: false, transformFunction: null }, tableTitle: { classPropertyName: "tableTitle", publicName: "tableTitle", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, sideBar: { classPropertyName: "sideBar", publicName: "sideBar", isSignal: true, isRequired: false, transformFunction: null }, setsFirstPage$: { classPropertyName: "setsFirstPage$", publicName: "setsFirstPage$", isSignal: true, isRequired: false, transformFunction: null }, expandIndex: { classPropertyName: "expandIndex", publicName: "expandIndex", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { expandIndex: "expandIndexChange", tableActions: "tableActions", selectRowAction: "selectRowAction" }, host: { listeners: { "window:resize": "onResize()" } }, providers: [
             TableUtilityService,
             TableStorageService,
             TableSortService,
             TableEditService,
-        ], queries: [{ propertyName: "noRecordsTemplate", first: true, predicate: ["noRecordsTemplate"], descendants: true, isSignal: true }, { propertyName: "footerTemplate", first: true, predicate: ["footerTemplate"], descendants: true, isSignal: true }, { propertyName: "popupTemplate", first: true, predicate: PopupTemplateDirective, descendants: true, read: TemplateRef, isSignal: true }, { propertyName: "expandTemplate", first: true, predicate: ExpandTemplateDirective, descendants: true, read: TemplateRef, isSignal: true }, { propertyName: "bodyTemplate", first: true, predicate: BodyTemplateDirective, descendants: true, read: TemplateRef, isSignal: true }, { propertyName: "headerTemplate", first: true, predicate: HeaderTemplateDirective, descendants: true, read: TemplateRef, isSignal: true }], usesOnChanges: true, ngImport: i0, template: "<div class=\"fu-table-wrapper\" [attr.outlined]=\"variant() === 'outlined'\">\r\n  <!-- Search Filter -->\r\n  @if (showFilter()) {\r\n    <fu-table-filter [title]=\"tableTitle()\" />\r\n  } @else if (tableTitle()) {\r\n    <div style=\"margin-bottom: 12px\">\r\n      <h3>{{ tableTitle() }}</h3>\r\n    </div>\r\n  }\r\n\r\n  <!-- Table -->\r\n  <table [attr.role]=\"'table'\" [style.table-layout]=\"tableLayout()\">\r\n    <thead [attr.role]=\"'rowgroup'\">\r\n      <tr [attr.role]=\"'row'\">\r\n        @if (expandable()) {\r\n          <th class=\"fu-expand-head\"></th>\r\n        }\r\n        <ng-container\r\n          *ngTemplateOutlet=\"\r\n            headerTemplate();\r\n            context: { $implicit: dataSource()[0] | keyMapping }\r\n          \"\r\n        />\r\n      </tr>\r\n    </thead>\r\n\r\n    <tbody [attr.role]=\"'rowgroup'\">\r\n      @if (isInitLoad()) {\r\n        <ng-container *ngTemplateOutlet=\"initLoadTemplate\" />\r\n      } @else {\r\n        @for (row of sortedData(); track $index; let odd = $odd) {\r\n          <tr\r\n            [attr.outlined]=\"variant() === 'outlined'\"\r\n            [attr.role]=\"'row'\"\r\n            class=\"fu-body-row\"\r\n            [ngClass]=\"{\r\n              striped: stripedRows() && odd,\r\n              hoverable: expandable() || selectRowAction.observed,\r\n            }\"\r\n            (mouseenter)=\"onRowHover($event, row)\"\r\n            (mouseleave)=\"onRowLeave()\"\r\n            (click)=\"toggleRow(row, $index)\"\r\n          >\r\n            @if (expandable()) {\r\n              <td\r\n                class=\"fu-expand-cell\"\r\n                [attr.data-expand]=\"expandedRowIndex === $index\"\r\n              >\r\n                <fu-icon size=\"16px\" iconName=\"chevronRight\" />\r\n              </td>\r\n            }\r\n            <ng-container\r\n              *ngTemplateOutlet=\"\r\n                bodyTemplate();\r\n                context: {\r\n                  $implicit: row,\r\n                  index: $index,\r\n                  keys: row | keyMapping,\r\n                }\r\n              \"\r\n            />\r\n          </tr>\r\n\r\n          @if (\r\n            (expandable() && expandedRowIndex === $index) ||\r\n            expandIndex() === $index ||\r\n            expanded()\r\n          ) {\r\n            <tr\r\n              class=\"fu-expand-row\"\r\n              [ngClass]=\"{\r\n                striped: stripedRows() && odd && expanded(),\r\n              }\"\r\n              [attr.expanded]=\"expanded()\"\r\n              (mouseenter)=\"onExpandHover()\"\r\n            >\r\n              <td [attr.colspan]=\"expandColumnSpan()\">\r\n                @if (isLoading() && expanded()) {\r\n                  <span class=\"fu-skeleton-loader\"></span>\r\n                } @else {\r\n                  <ng-container\r\n                    *ngTemplateOutlet=\"\r\n                      expandTemplate() || null;\r\n                      context: { $implicit: row, index: $index }\r\n                    \"\r\n                  />\r\n                }\r\n              </td>\r\n            </tr>\r\n          }\r\n        } @empty {\r\n          <tr class=\"fu-empty-row\">\r\n            <td [attr.colspan]=\"expandColumnSpan()\">\r\n              <ng-container\r\n                *ngTemplateOutlet=\"\r\n                  noRecordsTemplate() || defaultNoRecordsTemplate\r\n                \"\r\n              />\r\n            </td>\r\n          </tr>\r\n        }\r\n      }\r\n    </tbody>\r\n  </table>\r\n\r\n  @if (footerTemplate()) {\r\n    <div class=\"fu-table-footer\">\r\n      <ng-container\r\n        *ngTemplateOutlet=\"\r\n          footerTemplate() || null;\r\n          context: { $implicit: sortedData() }\r\n        \"\r\n      />\r\n    </div>\r\n  }\r\n\r\n  @if (showPaginator()) {\r\n    <fu-table-paginator\r\n      [dataLenght]=\"totalItems()\"\r\n      [quickPageJump]=\"quickPageJump()\"\r\n      [pageSizeOptions]=\"pageSizeOptions()\"\r\n    />\r\n  }\r\n</div>\r\n\r\n@if (hoveredRow()) {\r\n  <div\r\n    class=\"fu-action-popup\"\r\n    [style.top.px]=\"popupPosition().top\"\r\n    [style.right.px]=\"popupPosition().right\"\r\n    (mouseenter)=\"onPopupHover()\"\r\n    (mouseleave)=\"onPopupLeave()\"\r\n  >\r\n    <ng-container\r\n      *ngTemplateOutlet=\"\r\n        popupTemplate() || null;\r\n        context: { $implicit: hoveredRow() }\r\n      \"\r\n    />\r\n  </div>\r\n}\r\n\r\n<ng-template #defaultNoRecordsTemplate>\r\n  <div class=\"fu-no-records\">\r\n    <svg\r\n      xmlns=\"http://www.w3.org/2000/svg\"\r\n      width=\"24\"\r\n      height=\"24\"\r\n      viewBox=\"0 0 24 24\"\r\n    >\r\n      <path\r\n        fill=\"none\"\r\n        stroke=\"currentColor\"\r\n        stroke-linecap=\"round\"\r\n        stroke-linejoin=\"round\"\r\n        stroke-width=\"1.5\"\r\n        d=\"M12 8v4m0 4.01l.01-.011M9 3H4v3m0 5v2m16-2v2M15 3h5v3M9 21H4v-3m11 3h5v-3\"\r\n      />\r\n    </svg>\r\n    <p>{{ noRecordsText() }}</p>\r\n  </div>\r\n</ng-template>\r\n\r\n<ng-template #initLoadTemplate>\r\n  @for (item of arrayFromSize(); track $index) {\r\n    <tr class=\"fu-empty-row\">\r\n      @for (item of arrayFromCols(); track $index) {\r\n        <fu-tbody-cell />\r\n      }\r\n    </tr>\r\n  }\r\n</ng-template>\r\n", styles: [".fu-table-wrapper{overflow-x:auto;padding:12px;font-family:Roboto,sans-serif;font-size:14px;background-color:var(--fu-table-bg-color);color:var(--fu-table-text-color);border-radius:4px}.fu-table-wrapper[outlined=true]{border:1px solid var(--fu-table-border-color)}.fu-table-wrapper[outlined=false]{box-shadow:0 1px 4px #0000005e}table{border-collapse:collapse;width:100%;margin-bottom:12px}thead tr{background-color:var(--fu-table-header-bg-color)}thead tr .fu-expand-head{width:40px;border-bottom:1px solid var(--fu-table-border-color)}@media (max-width: 900px){thead tr .fu-expand-head{display:none}}tbody tr .fu-expand-cell{border-bottom:1px solid var(--fu-table-border-color);text-align:center;vertical-align:middle}tbody tr .fu-expand-cell fu-icon{margin-top:3px}@media (max-width: 900px){tbody tr .fu-expand-cell{display:none}}tbody tr .fu-expand-cell[data-expand=true] fu-icon{transition:.1s ease-in-out;transform:rotate(90deg)}.fu-body-row{transition:.2s ease-in-out}.fu-body-row.striped{background-color:var(--fu-table-striped-row-bg-color)}.fu-body-row.hoverable:hover{background-color:var(--fu-table-bg-hover-color);cursor:pointer}.fu-expand-row[expanded=false]{border-top:1px solid var(--fu-table-border-color)}.fu-expand-row.striped{background-color:var(--fu-table-striped-row-bg-color)}tr.fu-expand-row>td{border-bottom:1px solid var(--fu-table-border-color);padding:8px}tr.fu-empty-row>td{border-bottom:1px solid var(--fu-table-border-color);border-top:1px solid var(--fu-table-border-color);padding:8px;text-align:center}tr.fu-empty-row>td svg{width:100px;height:100px;color:var(--fu-table-border-color)}@media (max-width: 900px){table{border:none;box-shadow:none;min-width:100%}thead{border-bottom:1px solid var(--fu-table-border-color)}tbody tr[outlined=true]{border-right:1px solid var(--fu-table-border-color);border-left:1px solid var(--fu-table-border-color);border-top:1px solid var(--fu-table-border-color)}tbody tr:first-child{border-top:none}tbody tr:last-child{margin-bottom:0}tr{display:block;margin-bottom:12px}tr[outlined=false]{box-shadow:0 2px 1px -1px #0003,0 1px 1px #00000024,0 1px 3px #0000001f}tr.fu-expand-row{margin-top:-8px;display:block;width:100%}tr.fu-expand-row>td{display:block;width:100%;padding:8px;box-sizing:border-box}tr.fu-empty-row>td{display:block;width:100%;padding:8px;box-sizing:border-box}}.fu-table-footer{position:relative;min-height:40px;margin-bottom:8px;background-color:var(--fu-table-header-bg-color);border-bottom:1px solid var(--fu-table-border-color);border-top:1px solid var(--fu-table-border-color)}.fu-action-popup{position:absolute;display:flex;align-items:center;gap:8px;background:var(--fu-table-bg-color);box-shadow:0 4px 6px #0000001a;border:1px solid var(--fu-table-border-color);border-radius:4px;min-height:40px;z-index:10;padding:0 8px}.fu-no-records{display:flex;flex-direction:column;justify-content:center;align-items:center;height:180px}.fu-no-records>p{color:#aeadad}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: ButtonModule }, { kind: "ngmodule", type: IconModule }, { kind: "component", type: IconComponent, selector: "fu-icon", inputs: ["iconName", "size", "strokeWidth", "color"] }, { kind: "component", type: TablePaginatorComponent, selector: "fu-table-paginator", inputs: ["pageSizeOptions", "quickPageJump", "dataLenght"] }, { kind: "component", type: TableFilterComponent, selector: "fu-table-filter", inputs: ["title"] }, { kind: "component", type: TbodyCellComponent, selector: "fu-tbody-cell", inputs: ["cellValue", "editKey"] }, { kind: "pipe", type: KeyMappingPipe, name: "keyMapping" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+        ], queries: [{ propertyName: "sidebarTemplate", first: true, predicate: ["sidebarTemplate"], descendants: true, isSignal: true }, { propertyName: "noRecordsTemplate", first: true, predicate: ["noRecordsTemplate"], descendants: true, isSignal: true }, { propertyName: "footerTemplate", first: true, predicate: ["footerTemplate"], descendants: true, isSignal: true }, { propertyName: "popupTemplate", first: true, predicate: PopupTemplateDirective, descendants: true, read: TemplateRef, isSignal: true }, { propertyName: "expandTemplate", first: true, predicate: ExpandTemplateDirective, descendants: true, read: TemplateRef, isSignal: true }, { propertyName: "bodyTemplate", first: true, predicate: BodyTemplateDirective, descendants: true, read: TemplateRef, isSignal: true }, { propertyName: "headerTemplate", first: true, predicate: HeaderTemplateDirective, descendants: true, read: TemplateRef, isSignal: true }], usesOnChanges: true, ngImport: i0, template: "<div class=\"fu-table-wrapper\" [attr.outlined]=\"variant() === 'outlined'\">\r\n  <!-- Search Filter -->\r\n  @if (showFilter()) {\r\n    <fu-table-filter [title]=\"tableTitle()\" />\r\n  } @else if (tableTitle()) {\r\n    <div style=\"margin-bottom: 12px\">\r\n      <h3>{{ tableTitle() }}</h3>\r\n    </div>\r\n  }\r\n\r\n  <!-- Table -->\r\n  <table [attr.role]=\"'table'\" [style.table-layout]=\"tableLayout()\">\r\n    <thead [attr.role]=\"'rowgroup'\">\r\n      <tr [attr.role]=\"'row'\">\r\n        @if (expandable()) {\r\n          <th class=\"fu-expand-head\"></th>\r\n        }\r\n        <ng-container\r\n          *ngTemplateOutlet=\"\r\n            headerTemplate();\r\n            context: { $implicit: dataSource()[0] | keyMapping }\r\n          \"\r\n        />\r\n      </tr>\r\n    </thead>\r\n\r\n    <tbody [attr.role]=\"'rowgroup'\">\r\n      @if (sideBar()) {\r\n        <div class=\"fu-sidebar\">\r\n          <ng-container *ngTemplateOutlet=\"sidebarTemplate() || null\" />\r\n        </div>\r\n      }\r\n\r\n      @if (isInitLoad()) {\r\n        <ng-container *ngTemplateOutlet=\"initLoadTemplate\" />\r\n      } @else {\r\n        @for (row of sortedData(); track $index; let odd = $odd) {\r\n          <tr\r\n            [attr.outlined]=\"variant() === 'outlined'\"\r\n            [attr.role]=\"'row'\"\r\n            class=\"fu-body-row\"\r\n            [ngClass]=\"{\r\n              striped: stripedRows() && odd,\r\n              hoverable: expandable() || selectRowAction.observed,\r\n            }\"\r\n            (mouseenter)=\"onRowHover($event, row)\"\r\n            (mouseleave)=\"onRowLeave()\"\r\n            (click)=\"toggleRow(row, $index)\"\r\n          >\r\n            @if (expandable()) {\r\n              <td\r\n                class=\"fu-expand-cell\"\r\n                [attr.data-expand]=\"expandedRowIndex === $index\"\r\n              >\r\n                <fu-icon size=\"16px\" iconName=\"chevronRight\" />\r\n              </td>\r\n            }\r\n            <ng-container\r\n              *ngTemplateOutlet=\"\r\n                bodyTemplate();\r\n                context: {\r\n                  $implicit: row,\r\n                  index: $index,\r\n                  keys: row | keyMapping,\r\n                }\r\n              \"\r\n            />\r\n          </tr>\r\n\r\n          @if (\r\n            (expandable() && expandedRowIndex === $index) ||\r\n            expandIndex() === $index ||\r\n            expanded()\r\n          ) {\r\n            <tr\r\n              class=\"fu-expand-row\"\r\n              [ngClass]=\"{\r\n                striped: stripedRows() && odd && expanded(),\r\n              }\"\r\n              [attr.expanded]=\"expanded()\"\r\n              (mouseenter)=\"onExpandHover()\"\r\n            >\r\n              <td [attr.colspan]=\"expandColumnSpan()\">\r\n                @if (isLoading() && expanded()) {\r\n                  <span class=\"fu-skeleton-loader\"></span>\r\n                } @else {\r\n                  <ng-container\r\n                    *ngTemplateOutlet=\"\r\n                      expandTemplate() || null;\r\n                      context: { $implicit: row, index: $index }\r\n                    \"\r\n                  />\r\n                }\r\n              </td>\r\n            </tr>\r\n          }\r\n        } @empty {\r\n          <tr class=\"fu-empty-row\">\r\n            <td [attr.colspan]=\"expandColumnSpan()\">\r\n              <ng-container\r\n                *ngTemplateOutlet=\"\r\n                  noRecordsTemplate() || defaultNoRecordsTemplate\r\n                \"\r\n              />\r\n            </td>\r\n          </tr>\r\n        }\r\n      }\r\n    </tbody>\r\n  </table>\r\n\r\n  @if (footerTemplate()) {\r\n    <div class=\"fu-table-footer\">\r\n      <ng-container\r\n        *ngTemplateOutlet=\"\r\n          footerTemplate() || null;\r\n          context: { $implicit: sortedData() }\r\n        \"\r\n      />\r\n    </div>\r\n  }\r\n\r\n  @if (showPaginator()) {\r\n    <fu-table-paginator\r\n      [dataLenght]=\"totalItems()\"\r\n      [quickPageJump]=\"quickPageJump()\"\r\n      [pageSizeOptions]=\"pageSizeOptions()\"\r\n    />\r\n  }\r\n</div>\r\n\r\n@if (hoveredRow()) {\r\n  <div\r\n    class=\"fu-action-popup\"\r\n    [style.top.px]=\"popupPosition().top\"\r\n    [style.right.px]=\"popupPosition().right\"\r\n    (mouseenter)=\"onPopupHover()\"\r\n    (mouseleave)=\"onPopupLeave()\"\r\n  >\r\n    <ng-container\r\n      *ngTemplateOutlet=\"\r\n        popupTemplate() || null;\r\n        context: { $implicit: hoveredRow() }\r\n      \"\r\n    />\r\n  </div>\r\n}\r\n\r\n<ng-template #defaultNoRecordsTemplate>\r\n  <div class=\"fu-no-records\">\r\n    <svg\r\n      xmlns=\"http://www.w3.org/2000/svg\"\r\n      width=\"24\"\r\n      height=\"24\"\r\n      viewBox=\"0 0 24 24\"\r\n    >\r\n      <path\r\n        fill=\"none\"\r\n        stroke=\"currentColor\"\r\n        stroke-linecap=\"round\"\r\n        stroke-linejoin=\"round\"\r\n        stroke-width=\"1.5\"\r\n        d=\"M12 8v4m0 4.01l.01-.011M9 3H4v3m0 5v2m16-2v2M15 3h5v3M9 21H4v-3m11 3h5v-3\"\r\n      />\r\n    </svg>\r\n    <p>{{ noRecordsText() }}</p>\r\n  </div>\r\n</ng-template>\r\n\r\n<ng-template #initLoadTemplate>\r\n  @for (item of arrayFromSize(); track $index) {\r\n    <tr class=\"fu-empty-row\">\r\n      @for (item of arrayFromCols(); track $index) {\r\n        <fu-tbody-cell />\r\n      }\r\n    </tr>\r\n  }\r\n</ng-template>\r\n", styles: [".fu-table-wrapper{position:relative;overflow-x:auto;padding:12px;font-family:Roboto,sans-serif;font-size:14px;background-color:var(--fu-table-bg-color);color:var(--fu-table-text-color);border-radius:4px}.fu-table-wrapper[outlined=true]{border:1px solid var(--fu-table-border-color)}.fu-table-wrapper[outlined=false]{box-shadow:0 1px 4px #0000005e}table{border-collapse:collapse;width:100%;margin-bottom:12px}thead tr{background-color:var(--fu-table-header-bg-color)}thead tr .fu-expand-head{width:40px;border-bottom:1px solid var(--fu-table-border-color)}@media (max-width: 900px){thead tr .fu-expand-head{display:none}}tbody tr .fu-expand-cell{border-bottom:1px solid var(--fu-table-border-color);text-align:center;vertical-align:middle}tbody tr .fu-expand-cell fu-icon{margin-top:3px}@media (max-width: 900px){tbody tr .fu-expand-cell{display:none}}tbody tr .fu-expand-cell[data-expand=true] fu-icon{transition:.1s ease-in-out;transform:rotate(90deg)}.fu-body-row{transition:.2s ease-in-out}.fu-body-row.striped{background-color:var(--fu-table-striped-row-bg-color)}.fu-body-row.hoverable:hover{background-color:var(--fu-table-bg-hover-color);cursor:pointer}.fu-expand-row[expanded=false]{border-top:1px solid var(--fu-table-border-color)}.fu-expand-row.striped{background-color:var(--fu-table-striped-row-bg-color)}tr.fu-expand-row>td{border-bottom:1px solid var(--fu-table-border-color);padding:8px}tr.fu-empty-row>td{border-bottom:1px solid var(--fu-table-border-color);border-top:1px solid var(--fu-table-border-color);padding:8px;text-align:center}tr.fu-empty-row>td svg{width:100px;height:100px;color:var(--fu-table-border-color)}@media (max-width: 900px){table{border:none;box-shadow:none;min-width:100%}thead{border-bottom:1px solid var(--fu-table-border-color)}tbody tr[outlined=true]{border-right:1px solid var(--fu-table-border-color);border-left:1px solid var(--fu-table-border-color);border-top:1px solid var(--fu-table-border-color)}tbody tr:first-child{border-top:none}tbody tr:last-child{margin-bottom:0}tr{display:block;margin-bottom:12px}tr[outlined=false]{box-shadow:0 2px 1px -1px #0003,0 1px 1px #00000024,0 1px 3px #0000001f}tr.fu-expand-row{margin-top:-8px;display:block;width:100%}tr.fu-expand-row>td{display:block;width:100%;padding:8px;box-sizing:border-box}tr.fu-empty-row>td{display:block;width:100%;padding:8px;box-sizing:border-box}}.fu-table-footer{position:relative;min-height:40px;margin-bottom:8px;background-color:var(--fu-table-header-bg-color);border-bottom:1px solid var(--fu-table-border-color);border-top:1px solid var(--fu-table-border-color)}.fu-action-popup{position:absolute;display:flex;align-items:center;gap:8px;background:var(--fu-table-bg-color);box-shadow:0 4px 6px #0000001a;border:1px solid var(--fu-table-border-color);border-radius:4px;min-height:40px;z-index:10;padding:0 8px}.fu-no-records{display:flex;flex-direction:column;justify-content:center;align-items:center;height:180px}.fu-no-records>p{color:#aeadad}tbody{position:relative}tbody .fu-sidebar{position:absolute;right:0;top:0;min-width:200px;height:100%;background-color:var(--fu-table-bg-color);border-left:2px solid var(--fu-table-border-color)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: ButtonModule }, { kind: "ngmodule", type: IconModule }, { kind: "component", type: IconComponent, selector: "fu-icon", inputs: ["iconName", "size", "strokeWidth", "color"] }, { kind: "component", type: TablePaginatorComponent, selector: "fu-table-paginator", inputs: ["pageSizeOptions", "quickPageJump", "dataLenght"] }, { kind: "component", type: TableFilterComponent, selector: "fu-table-filter", inputs: ["title"] }, { kind: "component", type: TbodyCellComponent, selector: "fu-tbody-cell", inputs: ["cellValue", "editKey"] }, { kind: "pipe", type: KeyMappingPipe, name: "keyMapping" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.6", ngImport: i0, type: TableComponent, decorators: [{
             type: Component,
@@ -1126,7 +1134,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.6", ngImpor
                         TableStorageService,
                         TableSortService,
                         TableEditService,
-                    ], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: "<div class=\"fu-table-wrapper\" [attr.outlined]=\"variant() === 'outlined'\">\r\n  <!-- Search Filter -->\r\n  @if (showFilter()) {\r\n    <fu-table-filter [title]=\"tableTitle()\" />\r\n  } @else if (tableTitle()) {\r\n    <div style=\"margin-bottom: 12px\">\r\n      <h3>{{ tableTitle() }}</h3>\r\n    </div>\r\n  }\r\n\r\n  <!-- Table -->\r\n  <table [attr.role]=\"'table'\" [style.table-layout]=\"tableLayout()\">\r\n    <thead [attr.role]=\"'rowgroup'\">\r\n      <tr [attr.role]=\"'row'\">\r\n        @if (expandable()) {\r\n          <th class=\"fu-expand-head\"></th>\r\n        }\r\n        <ng-container\r\n          *ngTemplateOutlet=\"\r\n            headerTemplate();\r\n            context: { $implicit: dataSource()[0] | keyMapping }\r\n          \"\r\n        />\r\n      </tr>\r\n    </thead>\r\n\r\n    <tbody [attr.role]=\"'rowgroup'\">\r\n      @if (isInitLoad()) {\r\n        <ng-container *ngTemplateOutlet=\"initLoadTemplate\" />\r\n      } @else {\r\n        @for (row of sortedData(); track $index; let odd = $odd) {\r\n          <tr\r\n            [attr.outlined]=\"variant() === 'outlined'\"\r\n            [attr.role]=\"'row'\"\r\n            class=\"fu-body-row\"\r\n            [ngClass]=\"{\r\n              striped: stripedRows() && odd,\r\n              hoverable: expandable() || selectRowAction.observed,\r\n            }\"\r\n            (mouseenter)=\"onRowHover($event, row)\"\r\n            (mouseleave)=\"onRowLeave()\"\r\n            (click)=\"toggleRow(row, $index)\"\r\n          >\r\n            @if (expandable()) {\r\n              <td\r\n                class=\"fu-expand-cell\"\r\n                [attr.data-expand]=\"expandedRowIndex === $index\"\r\n              >\r\n                <fu-icon size=\"16px\" iconName=\"chevronRight\" />\r\n              </td>\r\n            }\r\n            <ng-container\r\n              *ngTemplateOutlet=\"\r\n                bodyTemplate();\r\n                context: {\r\n                  $implicit: row,\r\n                  index: $index,\r\n                  keys: row | keyMapping,\r\n                }\r\n              \"\r\n            />\r\n          </tr>\r\n\r\n          @if (\r\n            (expandable() && expandedRowIndex === $index) ||\r\n            expandIndex() === $index ||\r\n            expanded()\r\n          ) {\r\n            <tr\r\n              class=\"fu-expand-row\"\r\n              [ngClass]=\"{\r\n                striped: stripedRows() && odd && expanded(),\r\n              }\"\r\n              [attr.expanded]=\"expanded()\"\r\n              (mouseenter)=\"onExpandHover()\"\r\n            >\r\n              <td [attr.colspan]=\"expandColumnSpan()\">\r\n                @if (isLoading() && expanded()) {\r\n                  <span class=\"fu-skeleton-loader\"></span>\r\n                } @else {\r\n                  <ng-container\r\n                    *ngTemplateOutlet=\"\r\n                      expandTemplate() || null;\r\n                      context: { $implicit: row, index: $index }\r\n                    \"\r\n                  />\r\n                }\r\n              </td>\r\n            </tr>\r\n          }\r\n        } @empty {\r\n          <tr class=\"fu-empty-row\">\r\n            <td [attr.colspan]=\"expandColumnSpan()\">\r\n              <ng-container\r\n                *ngTemplateOutlet=\"\r\n                  noRecordsTemplate() || defaultNoRecordsTemplate\r\n                \"\r\n              />\r\n            </td>\r\n          </tr>\r\n        }\r\n      }\r\n    </tbody>\r\n  </table>\r\n\r\n  @if (footerTemplate()) {\r\n    <div class=\"fu-table-footer\">\r\n      <ng-container\r\n        *ngTemplateOutlet=\"\r\n          footerTemplate() || null;\r\n          context: { $implicit: sortedData() }\r\n        \"\r\n      />\r\n    </div>\r\n  }\r\n\r\n  @if (showPaginator()) {\r\n    <fu-table-paginator\r\n      [dataLenght]=\"totalItems()\"\r\n      [quickPageJump]=\"quickPageJump()\"\r\n      [pageSizeOptions]=\"pageSizeOptions()\"\r\n    />\r\n  }\r\n</div>\r\n\r\n@if (hoveredRow()) {\r\n  <div\r\n    class=\"fu-action-popup\"\r\n    [style.top.px]=\"popupPosition().top\"\r\n    [style.right.px]=\"popupPosition().right\"\r\n    (mouseenter)=\"onPopupHover()\"\r\n    (mouseleave)=\"onPopupLeave()\"\r\n  >\r\n    <ng-container\r\n      *ngTemplateOutlet=\"\r\n        popupTemplate() || null;\r\n        context: { $implicit: hoveredRow() }\r\n      \"\r\n    />\r\n  </div>\r\n}\r\n\r\n<ng-template #defaultNoRecordsTemplate>\r\n  <div class=\"fu-no-records\">\r\n    <svg\r\n      xmlns=\"http://www.w3.org/2000/svg\"\r\n      width=\"24\"\r\n      height=\"24\"\r\n      viewBox=\"0 0 24 24\"\r\n    >\r\n      <path\r\n        fill=\"none\"\r\n        stroke=\"currentColor\"\r\n        stroke-linecap=\"round\"\r\n        stroke-linejoin=\"round\"\r\n        stroke-width=\"1.5\"\r\n        d=\"M12 8v4m0 4.01l.01-.011M9 3H4v3m0 5v2m16-2v2M15 3h5v3M9 21H4v-3m11 3h5v-3\"\r\n      />\r\n    </svg>\r\n    <p>{{ noRecordsText() }}</p>\r\n  </div>\r\n</ng-template>\r\n\r\n<ng-template #initLoadTemplate>\r\n  @for (item of arrayFromSize(); track $index) {\r\n    <tr class=\"fu-empty-row\">\r\n      @for (item of arrayFromCols(); track $index) {\r\n        <fu-tbody-cell />\r\n      }\r\n    </tr>\r\n  }\r\n</ng-template>\r\n", styles: [".fu-table-wrapper{overflow-x:auto;padding:12px;font-family:Roboto,sans-serif;font-size:14px;background-color:var(--fu-table-bg-color);color:var(--fu-table-text-color);border-radius:4px}.fu-table-wrapper[outlined=true]{border:1px solid var(--fu-table-border-color)}.fu-table-wrapper[outlined=false]{box-shadow:0 1px 4px #0000005e}table{border-collapse:collapse;width:100%;margin-bottom:12px}thead tr{background-color:var(--fu-table-header-bg-color)}thead tr .fu-expand-head{width:40px;border-bottom:1px solid var(--fu-table-border-color)}@media (max-width: 900px){thead tr .fu-expand-head{display:none}}tbody tr .fu-expand-cell{border-bottom:1px solid var(--fu-table-border-color);text-align:center;vertical-align:middle}tbody tr .fu-expand-cell fu-icon{margin-top:3px}@media (max-width: 900px){tbody tr .fu-expand-cell{display:none}}tbody tr .fu-expand-cell[data-expand=true] fu-icon{transition:.1s ease-in-out;transform:rotate(90deg)}.fu-body-row{transition:.2s ease-in-out}.fu-body-row.striped{background-color:var(--fu-table-striped-row-bg-color)}.fu-body-row.hoverable:hover{background-color:var(--fu-table-bg-hover-color);cursor:pointer}.fu-expand-row[expanded=false]{border-top:1px solid var(--fu-table-border-color)}.fu-expand-row.striped{background-color:var(--fu-table-striped-row-bg-color)}tr.fu-expand-row>td{border-bottom:1px solid var(--fu-table-border-color);padding:8px}tr.fu-empty-row>td{border-bottom:1px solid var(--fu-table-border-color);border-top:1px solid var(--fu-table-border-color);padding:8px;text-align:center}tr.fu-empty-row>td svg{width:100px;height:100px;color:var(--fu-table-border-color)}@media (max-width: 900px){table{border:none;box-shadow:none;min-width:100%}thead{border-bottom:1px solid var(--fu-table-border-color)}tbody tr[outlined=true]{border-right:1px solid var(--fu-table-border-color);border-left:1px solid var(--fu-table-border-color);border-top:1px solid var(--fu-table-border-color)}tbody tr:first-child{border-top:none}tbody tr:last-child{margin-bottom:0}tr{display:block;margin-bottom:12px}tr[outlined=false]{box-shadow:0 2px 1px -1px #0003,0 1px 1px #00000024,0 1px 3px #0000001f}tr.fu-expand-row{margin-top:-8px;display:block;width:100%}tr.fu-expand-row>td{display:block;width:100%;padding:8px;box-sizing:border-box}tr.fu-empty-row>td{display:block;width:100%;padding:8px;box-sizing:border-box}}.fu-table-footer{position:relative;min-height:40px;margin-bottom:8px;background-color:var(--fu-table-header-bg-color);border-bottom:1px solid var(--fu-table-border-color);border-top:1px solid var(--fu-table-border-color)}.fu-action-popup{position:absolute;display:flex;align-items:center;gap:8px;background:var(--fu-table-bg-color);box-shadow:0 4px 6px #0000001a;border:1px solid var(--fu-table-border-color);border-radius:4px;min-height:40px;z-index:10;padding:0 8px}.fu-no-records{display:flex;flex-direction:column;justify-content:center;align-items:center;height:180px}.fu-no-records>p{color:#aeadad}\n"] }]
+                    ], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: "<div class=\"fu-table-wrapper\" [attr.outlined]=\"variant() === 'outlined'\">\r\n  <!-- Search Filter -->\r\n  @if (showFilter()) {\r\n    <fu-table-filter [title]=\"tableTitle()\" />\r\n  } @else if (tableTitle()) {\r\n    <div style=\"margin-bottom: 12px\">\r\n      <h3>{{ tableTitle() }}</h3>\r\n    </div>\r\n  }\r\n\r\n  <!-- Table -->\r\n  <table [attr.role]=\"'table'\" [style.table-layout]=\"tableLayout()\">\r\n    <thead [attr.role]=\"'rowgroup'\">\r\n      <tr [attr.role]=\"'row'\">\r\n        @if (expandable()) {\r\n          <th class=\"fu-expand-head\"></th>\r\n        }\r\n        <ng-container\r\n          *ngTemplateOutlet=\"\r\n            headerTemplate();\r\n            context: { $implicit: dataSource()[0] | keyMapping }\r\n          \"\r\n        />\r\n      </tr>\r\n    </thead>\r\n\r\n    <tbody [attr.role]=\"'rowgroup'\">\r\n      @if (sideBar()) {\r\n        <div class=\"fu-sidebar\">\r\n          <ng-container *ngTemplateOutlet=\"sidebarTemplate() || null\" />\r\n        </div>\r\n      }\r\n\r\n      @if (isInitLoad()) {\r\n        <ng-container *ngTemplateOutlet=\"initLoadTemplate\" />\r\n      } @else {\r\n        @for (row of sortedData(); track $index; let odd = $odd) {\r\n          <tr\r\n            [attr.outlined]=\"variant() === 'outlined'\"\r\n            [attr.role]=\"'row'\"\r\n            class=\"fu-body-row\"\r\n            [ngClass]=\"{\r\n              striped: stripedRows() && odd,\r\n              hoverable: expandable() || selectRowAction.observed,\r\n            }\"\r\n            (mouseenter)=\"onRowHover($event, row)\"\r\n            (mouseleave)=\"onRowLeave()\"\r\n            (click)=\"toggleRow(row, $index)\"\r\n          >\r\n            @if (expandable()) {\r\n              <td\r\n                class=\"fu-expand-cell\"\r\n                [attr.data-expand]=\"expandedRowIndex === $index\"\r\n              >\r\n                <fu-icon size=\"16px\" iconName=\"chevronRight\" />\r\n              </td>\r\n            }\r\n            <ng-container\r\n              *ngTemplateOutlet=\"\r\n                bodyTemplate();\r\n                context: {\r\n                  $implicit: row,\r\n                  index: $index,\r\n                  keys: row | keyMapping,\r\n                }\r\n              \"\r\n            />\r\n          </tr>\r\n\r\n          @if (\r\n            (expandable() && expandedRowIndex === $index) ||\r\n            expandIndex() === $index ||\r\n            expanded()\r\n          ) {\r\n            <tr\r\n              class=\"fu-expand-row\"\r\n              [ngClass]=\"{\r\n                striped: stripedRows() && odd && expanded(),\r\n              }\"\r\n              [attr.expanded]=\"expanded()\"\r\n              (mouseenter)=\"onExpandHover()\"\r\n            >\r\n              <td [attr.colspan]=\"expandColumnSpan()\">\r\n                @if (isLoading() && expanded()) {\r\n                  <span class=\"fu-skeleton-loader\"></span>\r\n                } @else {\r\n                  <ng-container\r\n                    *ngTemplateOutlet=\"\r\n                      expandTemplate() || null;\r\n                      context: { $implicit: row, index: $index }\r\n                    \"\r\n                  />\r\n                }\r\n              </td>\r\n            </tr>\r\n          }\r\n        } @empty {\r\n          <tr class=\"fu-empty-row\">\r\n            <td [attr.colspan]=\"expandColumnSpan()\">\r\n              <ng-container\r\n                *ngTemplateOutlet=\"\r\n                  noRecordsTemplate() || defaultNoRecordsTemplate\r\n                \"\r\n              />\r\n            </td>\r\n          </tr>\r\n        }\r\n      }\r\n    </tbody>\r\n  </table>\r\n\r\n  @if (footerTemplate()) {\r\n    <div class=\"fu-table-footer\">\r\n      <ng-container\r\n        *ngTemplateOutlet=\"\r\n          footerTemplate() || null;\r\n          context: { $implicit: sortedData() }\r\n        \"\r\n      />\r\n    </div>\r\n  }\r\n\r\n  @if (showPaginator()) {\r\n    <fu-table-paginator\r\n      [dataLenght]=\"totalItems()\"\r\n      [quickPageJump]=\"quickPageJump()\"\r\n      [pageSizeOptions]=\"pageSizeOptions()\"\r\n    />\r\n  }\r\n</div>\r\n\r\n@if (hoveredRow()) {\r\n  <div\r\n    class=\"fu-action-popup\"\r\n    [style.top.px]=\"popupPosition().top\"\r\n    [style.right.px]=\"popupPosition().right\"\r\n    (mouseenter)=\"onPopupHover()\"\r\n    (mouseleave)=\"onPopupLeave()\"\r\n  >\r\n    <ng-container\r\n      *ngTemplateOutlet=\"\r\n        popupTemplate() || null;\r\n        context: { $implicit: hoveredRow() }\r\n      \"\r\n    />\r\n  </div>\r\n}\r\n\r\n<ng-template #defaultNoRecordsTemplate>\r\n  <div class=\"fu-no-records\">\r\n    <svg\r\n      xmlns=\"http://www.w3.org/2000/svg\"\r\n      width=\"24\"\r\n      height=\"24\"\r\n      viewBox=\"0 0 24 24\"\r\n    >\r\n      <path\r\n        fill=\"none\"\r\n        stroke=\"currentColor\"\r\n        stroke-linecap=\"round\"\r\n        stroke-linejoin=\"round\"\r\n        stroke-width=\"1.5\"\r\n        d=\"M12 8v4m0 4.01l.01-.011M9 3H4v3m0 5v2m16-2v2M15 3h5v3M9 21H4v-3m11 3h5v-3\"\r\n      />\r\n    </svg>\r\n    <p>{{ noRecordsText() }}</p>\r\n  </div>\r\n</ng-template>\r\n\r\n<ng-template #initLoadTemplate>\r\n  @for (item of arrayFromSize(); track $index) {\r\n    <tr class=\"fu-empty-row\">\r\n      @for (item of arrayFromCols(); track $index) {\r\n        <fu-tbody-cell />\r\n      }\r\n    </tr>\r\n  }\r\n</ng-template>\r\n", styles: [".fu-table-wrapper{position:relative;overflow-x:auto;padding:12px;font-family:Roboto,sans-serif;font-size:14px;background-color:var(--fu-table-bg-color);color:var(--fu-table-text-color);border-radius:4px}.fu-table-wrapper[outlined=true]{border:1px solid var(--fu-table-border-color)}.fu-table-wrapper[outlined=false]{box-shadow:0 1px 4px #0000005e}table{border-collapse:collapse;width:100%;margin-bottom:12px}thead tr{background-color:var(--fu-table-header-bg-color)}thead tr .fu-expand-head{width:40px;border-bottom:1px solid var(--fu-table-border-color)}@media (max-width: 900px){thead tr .fu-expand-head{display:none}}tbody tr .fu-expand-cell{border-bottom:1px solid var(--fu-table-border-color);text-align:center;vertical-align:middle}tbody tr .fu-expand-cell fu-icon{margin-top:3px}@media (max-width: 900px){tbody tr .fu-expand-cell{display:none}}tbody tr .fu-expand-cell[data-expand=true] fu-icon{transition:.1s ease-in-out;transform:rotate(90deg)}.fu-body-row{transition:.2s ease-in-out}.fu-body-row.striped{background-color:var(--fu-table-striped-row-bg-color)}.fu-body-row.hoverable:hover{background-color:var(--fu-table-bg-hover-color);cursor:pointer}.fu-expand-row[expanded=false]{border-top:1px solid var(--fu-table-border-color)}.fu-expand-row.striped{background-color:var(--fu-table-striped-row-bg-color)}tr.fu-expand-row>td{border-bottom:1px solid var(--fu-table-border-color);padding:8px}tr.fu-empty-row>td{border-bottom:1px solid var(--fu-table-border-color);border-top:1px solid var(--fu-table-border-color);padding:8px;text-align:center}tr.fu-empty-row>td svg{width:100px;height:100px;color:var(--fu-table-border-color)}@media (max-width: 900px){table{border:none;box-shadow:none;min-width:100%}thead{border-bottom:1px solid var(--fu-table-border-color)}tbody tr[outlined=true]{border-right:1px solid var(--fu-table-border-color);border-left:1px solid var(--fu-table-border-color);border-top:1px solid var(--fu-table-border-color)}tbody tr:first-child{border-top:none}tbody tr:last-child{margin-bottom:0}tr{display:block;margin-bottom:12px}tr[outlined=false]{box-shadow:0 2px 1px -1px #0003,0 1px 1px #00000024,0 1px 3px #0000001f}tr.fu-expand-row{margin-top:-8px;display:block;width:100%}tr.fu-expand-row>td{display:block;width:100%;padding:8px;box-sizing:border-box}tr.fu-empty-row>td{display:block;width:100%;padding:8px;box-sizing:border-box}}.fu-table-footer{position:relative;min-height:40px;margin-bottom:8px;background-color:var(--fu-table-header-bg-color);border-bottom:1px solid var(--fu-table-border-color);border-top:1px solid var(--fu-table-border-color)}.fu-action-popup{position:absolute;display:flex;align-items:center;gap:8px;background:var(--fu-table-bg-color);box-shadow:0 4px 6px #0000001a;border:1px solid var(--fu-table-border-color);border-radius:4px;min-height:40px;z-index:10;padding:0 8px}.fu-no-records{display:flex;flex-direction:column;justify-content:center;align-items:center;height:180px}.fu-no-records>p{color:#aeadad}tbody{position:relative}tbody .fu-sidebar{position:absolute;right:0;top:0;min-width:200px;height:100%;background-color:var(--fu-table-bg-color);border-left:2px solid var(--fu-table-border-color)}\n"] }]
         }], propDecorators: { selectRowAction: [{
                 type: Output
             }], onResize: [{
@@ -1380,6 +1388,1627 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.6", ngImpor
                 }]
         }] });
 
+/**
+ * Defines a custom expand-row template for a `fu-table`.
+ *
+ * The template context exposes:
+ * - `row` – the current row data
+ * - `index` – row index
+ * - `searchTerm` – current search term
+ *
+ * ## Typing
+ * To enable strong typing for `row`, provide the table data using `rowOf`.
+ * This is used only for type inference and does not affect rendering.
+ *
+ * Usage:
+ * ```html
+ * <ng-template fuTableExpandRow let-row  let-index="index">
+ *   {{ row.name }} {{row.age}}
+ * </ng-template>
+ * ```
+ *
+ * If `rowOf` is omitted, `row` will be typed as `any`.
+ */
+class FuTableExpandRowTemplateDirective {
+    constructor() {
+        /**
+         * Provides typing context for the expand row template.
+         * Used only for type inference – not consumed at runtime.
+         */
+        this.of = input(null, {
+            alias: 'rowOf',
+        });
+    }
+    static ngTemplateContextGuard(_dir, ctx) {
+        return true;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.6", ngImport: i0, type: FuTableExpandRowTemplateDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "19.0.6", type: FuTableExpandRowTemplateDirective, isStandalone: true, selector: "[fuTableExpandRow]", inputs: { of: { classPropertyName: "of", publicName: "rowOf", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.6", ngImport: i0, type: FuTableExpandRowTemplateDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[fuTableExpandRow]',
+                }]
+        }] });
+
+/**
+ * Defines a custom no data template for a `fu-table`.
+ *
+ * Usage:
+ * ```html
+ * <ng-template fuTableNoData >
+ *   no data available
+ * </ng-template>
+ * ```
+ */
+class FuTableNoDataTemplateDirective {
+    static ngTemplateContextGuard(_dir, ctx) {
+        return true;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.6", ngImport: i0, type: FuTableNoDataTemplateDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.0.6", type: FuTableNoDataTemplateDirective, isStandalone: true, selector: "[fuTableNoData]", ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.6", ngImport: i0, type: FuTableNoDataTemplateDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[fuTableNoData]',
+                }]
+        }] });
+
+/**
+ * Defines a custom sidebar template for a `fu-table`.
+ *
+ * Usage:
+ * ```html
+ * <ng-template fuTableSidebar >
+ *   custom content
+ * </ng-template>
+ * ```
+ */
+class FuTableSidebarTemplateDirective {
+    static ngTemplateContextGuard(_dir, ctx) {
+        return true;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.6", ngImport: i0, type: FuTableSidebarTemplateDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.0.6", type: FuTableSidebarTemplateDirective, isStandalone: true, selector: "[fuTableSidebar]", ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.6", ngImport: i0, type: FuTableSidebarTemplateDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[fuTableSidebar]',
+                }]
+        }] });
+
+class FuClickOutsideDirective {
+    constructor(el) {
+        this.el = el;
+        this.fuClickOutside = output();
+    }
+    onPointerDown(event) {
+        const target = event.target;
+        if (!(target instanceof Node))
+            return;
+        if (!this.el.nativeElement.contains(target)) {
+            this.fuClickOutside.emit();
+        }
+    }
+    onEscape() {
+        this.fuClickOutside.emit();
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.6", ngImport: i0, type: FuClickOutsideDirective, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.0.6", type: FuClickOutsideDirective, isStandalone: true, selector: "[fuClickOutside]", outputs: { fuClickOutside: "fuClickOutside" }, host: { listeners: { "document:pointerdown": "onPointerDown($event)", "document:keydown.escape": "onEscape()" } }, ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.6", ngImport: i0, type: FuClickOutsideDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[fuClickOutside]',
+                }]
+        }], ctorParameters: () => [{ type: i0.ElementRef }], propDecorators: { onPointerDown: [{
+                type: HostListener,
+                args: ['document:pointerdown', ['$event']]
+            }], onEscape: [{
+                type: HostListener,
+                args: ['document:keydown.escape']
+            }] } });
+
+/**
+ * Defines a custom row context menu template for a `fu-column`.
+ *
+ * The template context exposes:
+ * - `row` – the current row data
+ * - `index` – row index
+ * - `trigger` – the context menu trigger
+ *
+ * ## Typing
+ * To enable strong typing for `row`, provide the table data using `rowOf`.
+ * This is used only for type inference and does not affect rendering.
+ *
+ * Usage:
+ * ```html
+ * <ng-template fuRowContextMenu let-row="row" let-index="index">
+ *   {{ row.name }}
+ * </ng-template>
+ * ```
+ *
+ * If `rowOf` is omitted, `row` will be typed as `any`.
+ */
+class FuRowContextMenuTemplateDirective {
+    constructor() {
+        /**
+         * Provides typing context for the row context menu template.
+         * Used only for type inference – not consumed at runtime.
+         */
+        this.of = input(null, {
+            alias: 'rowOf',
+        });
+    }
+    static ngTemplateContextGuard(_dir, ctx) {
+        return true;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.6", ngImport: i0, type: FuRowContextMenuTemplateDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "19.0.6", type: FuRowContextMenuTemplateDirective, isStandalone: true, selector: "[fuRowContextMenu]", inputs: { of: { classPropertyName: "of", publicName: "rowOf", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.6", ngImport: i0, type: FuRowContextMenuTemplateDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[fuRowContextMenu]',
+                }]
+        }] });
+
+/**
+ * Prevents click handlers from being triggered.
+ *
+ * ## Usage
+ * ```html
+ * <button fuStopPropagation>Save</button>
+ *
+ * <input fuStopPropagation />
+ *
+ * <button fuStopPropagation (click)="editRow(row)">✏️</button>
+ * ```
+ *
+ * ## Notes
+ * - Does **not** call `preventDefault()`
+ * - Safe to use on form controls
+ * - Intended for use inside `fu-table` rows
+ */
+class FuStopPropagationDirective {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.6", ngImport: i0, type: FuStopPropagationDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.0.6", type: FuStopPropagationDirective, isStandalone: true, selector: "[fuStopPropagation]", host: { listeners: { "click": "$event.stopPropagation()", "mousedown": "$event.stopPropagation()" } }, ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.6", ngImport: i0, type: FuStopPropagationDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[fuStopPropagation]',
+                    host: {
+                        '(click)': '$event.stopPropagation()',
+                        '(mousedown)': '$event.stopPropagation()',
+                    },
+                }]
+        }] });
+
+/**
+ * Highlights occurrences of a search term inside a string by wrapping matches
+ * in a `<mark>` element.
+ *
+ * This pipe is primarily intended for use with table cells and search results.
+ * It returns an HTML string and is typically used together with `[innerHTML]`.
+ *
+ * ## Parameters
+ * - `value` – the text value to highlight
+ * - `term` – the search term to highlight
+ * - `active` (optional) – whether the match should be marked as the active match
+ *
+ * If `term` is empty or `value` is `null`/`undefined`, the original value is
+ * returned as a string.
+ *
+ * Special characters in the search term are safely escaped.
+ *
+ * ## Usage
+ * ```html
+ * <span
+ *   [innerHTML]="value | fuHighlight : searchTerm : isActive"
+ * ></span>
+ * ```
+ *
+ * ## Styling
+ * The pipe adds the following CSS classes:
+ * - `search-highlight` – applied to all matches
+ * - `search-highlight active` – applied when `active` is `true`
+ *
+ * Example:
+ * ```css
+ * .search-highlight {
+ *   background-color: var(--fu-search-highlight-bg);
+ * }
+ *
+ * .search-highlight.active {
+ *   background-color: var(--fu-search-highlight-active-bg);
+ * }
+ * ```
+ *
+ * ## Notes
+ * - This pipe returns **HTML**, not plain text.
+ * - Always bind using `[innerHTML]`.
+ * - The pipe is stateless and does not manage search state internally.
+ */
+class FuHighlightPipe {
+    /**
+     * Highlights occurrences of `term` in `value` by wrapping them in `<mark>`.
+     *
+     * @param value Text to transform
+     * @param term Search term to highlight
+     * @param active Whether the match is the active one
+     * @returns HTML string with highlighted matches
+     */
+    transform(value, term, active = false) {
+        if (!term || value == null)
+            return String(value ?? '');
+        const escaped = term.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
+        const regex = new RegExp(`(${escaped})`, 'gi');
+        return String(value).replace(regex, match => active
+            ? `<mark class="search-highlight active">${match}</mark>`
+            : `<mark class="search-highlight">${match}</mark>`);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.6", ngImport: i0, type: FuHighlightPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
+    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "19.0.6", ngImport: i0, type: FuHighlightPipe, isStandalone: true, name: "fuHighlight" }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.6", ngImport: i0, type: FuHighlightPipe, decorators: [{
+            type: Pipe,
+            args: [{ name: 'fuHighlight' }]
+        }] });
+
+class FuCellComponent {
+    constructor() {
+        this.value = model();
+        this.type = input();
+        this.editing = input(false);
+        this.editable = input(false);
+        this.searchTerm = input('');
+        this.activeMatch = input(false);
+        this.loading = input(false);
+        this.valueType = computed(() => {
+            return this.type() ?? typeof this.value();
+        });
+        this.dateValue = linkedSignal(() => {
+            if (this.type() === 'date') {
+                return this.value().toISOString().slice(0, 10);
+            }
+        });
+        this.cellValueChange = output();
+    }
+    dateChange(event) {
+        const input = event.target;
+        const value = input.valueAsDate;
+        this.cellValueChange.emit(value);
+    }
+    numberChange(value) {
+        this.cellValueChange.emit(value);
+    }
+    booleanChange(value) {
+        this.cellValueChange.emit(value);
+    }
+    textChange(value) {
+        this.cellValueChange.emit(value);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.6", ngImport: i0, type: FuCellComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.6", type: FuCellComponent, isStandalone: true, selector: "fu-cell", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, editing: { classPropertyName: "editing", publicName: "editing", isSignal: true, isRequired: false, transformFunction: null }, editable: { classPropertyName: "editable", publicName: "editable", isSignal: true, isRequired: false, transformFunction: null }, searchTerm: { classPropertyName: "searchTerm", publicName: "searchTerm", isSignal: true, isRequired: false, transformFunction: null }, activeMatch: { classPropertyName: "activeMatch", publicName: "activeMatch", isSignal: true, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange", cellValueChange: "cellValueChange" }, ngImport: i0, template: "@if (editable() && editing()) {\r\n  @switch (valueType()) {\r\n    @case ('number') {\r\n      <input\r\n        type=\"number\"\r\n        [(ngModel)]=\"value\"\r\n        (ngModelChange)=\"numberChange($event)\"\r\n        fuStopPropagation\r\n      />\r\n    }\r\n\r\n    @case ('boolean') {\r\n      <input\r\n        type=\"checkbox\"\r\n        [(ngModel)]=\"value\"\r\n        (ngModelChange)=\"booleanChange($event)\"\r\n        fuStopPropagation\r\n      />\r\n    }\r\n\r\n    @case ('date') {\r\n      <input\r\n        type=\"date\"\r\n        [(ngModel)]=\"dateValue\"\r\n        (change)=\"dateChange($event)\"\r\n        fuStopPropagation\r\n      />\r\n    }\r\n\r\n    @case ('string') {\r\n      <input\r\n        type=\"text\"\r\n        [(ngModel)]=\"value\"\r\n        (ngModelChange)=\"textChange($event)\"\r\n        fuStopPropagation\r\n      />\r\n    }\r\n\r\n    @case ('text') {\r\n      <input\r\n        type=\"text\"\r\n        [(ngModel)]=\"value\"\r\n        (ngModelChange)=\"textChange($event)\"\r\n        fuStopPropagation\r\n      />\r\n    }\r\n  }\r\n} @else {\r\n  <div>\r\n    @switch (valueType()) {\r\n      @case ('date') {\r\n        <span>{{ value() | date }}</span>\r\n      }\r\n\r\n      @case ('text') {\r\n        <span\r\n          [innerHTML]=\"value() | fuHighlight: searchTerm() : activeMatch()\"\r\n          >{{ value() }}</span\r\n        >\r\n      }\r\n\r\n      @case ('number') {\r\n        <span\r\n          [innerHTML]=\"value() | fuHighlight: searchTerm() : activeMatch()\"\r\n          >{{ value() }}</span\r\n        >\r\n      }\r\n\r\n      @case ('boolean') {\r\n        <input type=\"checkbox\" [disabled]=\"true\" [checked]=\"value()\" />\r\n      }\r\n\r\n      @default {\r\n        <span\r\n          [innerHTML]=\"value() | fuHighlight: searchTerm() : activeMatch()\"\r\n          >{{ value() }}</span\r\n        >\r\n      }\r\n    }\r\n  </div>\r\n}\r\n", styles: ["input{padding:6px 8px;font-size:14px;line-height:1.4;border:1px solid var(--fu-table-border);border-radius:var(--fu-border-radius);background-color:var(--fu-table-input-bg);color:var(--fu-table-text);outline:none;transition:border-color .15s,box-shadow .15s}input[type=number],input[type=text]{width:100%}input::placeholder{color:#999}input:focus{border-color:var(--fu-table-sticky-border)}::ng-deep .search-highlight{background-color:#fde047;padding:0 2px;border-radius:2px}::ng-deep .search-highlight.active{background-color:#fb7185!important}\n"], dependencies: [{ kind: "pipe", type: FuHighlightPipe, name: "fuHighlight" }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i2.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "pipe", type: DatePipe, name: "date" }, { kind: "directive", type: FuStopPropagationDirective, selector: "[fuStopPropagation]" }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.6", ngImport: i0, type: FuCellComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'fu-cell', imports: [FuHighlightPipe, FormsModule, DatePipe, FuStopPropagationDirective], template: "@if (editable() && editing()) {\r\n  @switch (valueType()) {\r\n    @case ('number') {\r\n      <input\r\n        type=\"number\"\r\n        [(ngModel)]=\"value\"\r\n        (ngModelChange)=\"numberChange($event)\"\r\n        fuStopPropagation\r\n      />\r\n    }\r\n\r\n    @case ('boolean') {\r\n      <input\r\n        type=\"checkbox\"\r\n        [(ngModel)]=\"value\"\r\n        (ngModelChange)=\"booleanChange($event)\"\r\n        fuStopPropagation\r\n      />\r\n    }\r\n\r\n    @case ('date') {\r\n      <input\r\n        type=\"date\"\r\n        [(ngModel)]=\"dateValue\"\r\n        (change)=\"dateChange($event)\"\r\n        fuStopPropagation\r\n      />\r\n    }\r\n\r\n    @case ('string') {\r\n      <input\r\n        type=\"text\"\r\n        [(ngModel)]=\"value\"\r\n        (ngModelChange)=\"textChange($event)\"\r\n        fuStopPropagation\r\n      />\r\n    }\r\n\r\n    @case ('text') {\r\n      <input\r\n        type=\"text\"\r\n        [(ngModel)]=\"value\"\r\n        (ngModelChange)=\"textChange($event)\"\r\n        fuStopPropagation\r\n      />\r\n    }\r\n  }\r\n} @else {\r\n  <div>\r\n    @switch (valueType()) {\r\n      @case ('date') {\r\n        <span>{{ value() | date }}</span>\r\n      }\r\n\r\n      @case ('text') {\r\n        <span\r\n          [innerHTML]=\"value() | fuHighlight: searchTerm() : activeMatch()\"\r\n          >{{ value() }}</span\r\n        >\r\n      }\r\n\r\n      @case ('number') {\r\n        <span\r\n          [innerHTML]=\"value() | fuHighlight: searchTerm() : activeMatch()\"\r\n          >{{ value() }}</span\r\n        >\r\n      }\r\n\r\n      @case ('boolean') {\r\n        <input type=\"checkbox\" [disabled]=\"true\" [checked]=\"value()\" />\r\n      }\r\n\r\n      @default {\r\n        <span\r\n          [innerHTML]=\"value() | fuHighlight: searchTerm() : activeMatch()\"\r\n          >{{ value() }}</span\r\n        >\r\n      }\r\n    }\r\n  </div>\r\n}\r\n", styles: ["input{padding:6px 8px;font-size:14px;line-height:1.4;border:1px solid var(--fu-table-border);border-radius:var(--fu-border-radius);background-color:var(--fu-table-input-bg);color:var(--fu-table-text);outline:none;transition:border-color .15s,box-shadow .15s}input[type=number],input[type=text]{width:100%}input::placeholder{color:#999}input:focus{border-color:var(--fu-table-sticky-border)}::ng-deep .search-highlight{background-color:#fde047;padding:0 2px;border-radius:2px}::ng-deep .search-highlight.active{background-color:#fb7185!important}\n"] }]
+        }] });
+
+class FuTableIntlService {
+    constructor() {
+        this.searchPlaceholder = signal('Search...');
+        this.previous = signal('Previous');
+        this.next = signal('Next');
+        this.noEntries = signal('No entries');
+        this.noData = signal('No data available');
+        this.responsiveLabel = signal('Responsive');
+        this.scrollableLabel = signal('Scrollable');
+        this.lockHeaderLabel = signal('Lock header');
+        this.lockLeftLabel = signal('Lock left column');
+        this.lockRightLabel = signal('Lock right column');
+        this.pageLabel = signal('Page');
+        this.ofLabel = signal('of');
+        this.entriesLabel = (first, last, total) => `${first} to ${last} of ${total} entries`;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.6", ngImport: i0, type: FuTableIntlService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.0.6", ngImport: i0, type: FuTableIntlService, providedIn: 'root' }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.6", ngImport: i0, type: FuTableIntlService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root',
+                }]
+        }] });
+
+class FuButtonDirective {
+    constructor() {
+        this.variant = input('default');
+        this.severity = input(null);
+        this.loading = input(false);
+        this.disabled = input(false);
+    }
+    get classes() {
+        return {
+            'fu-button': true,
+            [`fu-button--${this.variant()}`]: true,
+            [`fu-button--${this.severity()}`]: this.severity(),
+            'fu-button--loading': this.loading(),
+            'fu-button--disabled': this.disabled(),
+        };
+    }
+    get isDisabled() {
+        return this.disabled() || this.loading() || null;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.6", ngImport: i0, type: FuButtonDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "19.0.6", type: FuButtonDirective, isStandalone: true, selector: "button[fuButton], a[fuButton]", inputs: { variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, severity: { classPropertyName: "severity", publicName: "severity", isSignal: true, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "this.classes", "attr.disabled": "this.isDisabled" } }, ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.6", ngImport: i0, type: FuButtonDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: 'button[fuButton], a[fuButton]',
+                }]
+        }], propDecorators: { classes: [{
+                type: HostBinding,
+                args: ['class']
+            }], isDisabled: [{
+                type: HostBinding,
+                args: ['attr.disabled']
+            }] } });
+
+class FuTableComponent {
+    constructor(injector) {
+        this.injector = injector;
+        // ========================================
+        // Data Management
+        // ========================================
+        /**
+         * The table's data source.
+         * Required input that provides the array of objects to display in the fu-table.
+         *
+         * @example
+         * ```html
+         * <fu-table [dataSource]="users">
+         * ```
+         */
+        this.dataSource = model.required();
+        /**
+         * Total number of items available for server-side pagination.
+         * When this value exceeds `dataSource.length`, fu-table operates in server-side mode
+         * and expects the parent to handle pagination, sorting, and filtering.
+         *
+         * @default 0
+         * @example
+         * ```html
+         * <fu-table [dataSource]="users" [totalItems]="1000">
+         * ```
+         */
+        this.totalItems = input(0);
+        // ========================================
+        // Persistence & Configuration
+        // ========================================
+        /**
+         * Key for persisting table state (pagination, sorting, columns, UI settings) to localStorage.
+         * When provided, fu-table will automatically save and restore its state across sessions.
+         *
+         * @default undefined
+         * @example
+         * ```html
+         * <fu-table [localStorageKey]="'my-users-table'">
+         * ```
+         */
+        this.localStorageKey = input();
+        /**
+         * External column visibility configuration.
+         * When provided, this overrides the `visible` property on individual column definitions.
+         * Useful for programmatically controlling which columns are displayed.
+         *
+         * @default []
+         * @example
+         * ```typescript
+         * columnsConfig = [
+         *   { field: 'name', visible: true },
+         *   { field: 'email', visible: false }
+         * ];
+         * ```
+         * ```html
+         * <fu-table [columnsConfig]="columnsConfig">
+         * ```
+         */
+        this.columnsConfig = input([]);
+        // ========================================
+        // Feature Toggles
+        // ========================================
+        /**
+         * Enables the configuration sidebar panel.
+         * When true, displays a button to open a sidebar for managing column order,
+         * visibility, and layout settings.
+         *
+         * @default false
+         * @example
+         * ```html
+         * <fu-table [configPanel]="true">
+         * ```
+         */
+        this.configPanel = input(false);
+        /**
+         * Enables the filter/search panel.
+         * When true, displays a search input that filters rows based on column values.
+         *
+         * @default false
+         * @example
+         * ```html
+         * <fu-table [filterPanel]="true">
+         * ```
+         */
+        this.filterPanel = input(false);
+        /**
+         * Enables pagination controls.
+         * When true, displays page navigation and items-per-page selector.
+         *
+         * @default true
+         * @example
+         * ```html
+         * <fu-table [paginator]="false">
+         * ```
+         */
+        this.paginator = input(true);
+        /**
+         * Loading state indicator.
+         * When true, displays loading skeletons instead of table data.
+         * Useful for showing loading state during async operations.
+         *
+         * @default false
+         * @example
+         * ```html
+         * <fu-table [loading]="isLoadingData">
+         * ```
+         */
+        this.loading = input(false);
+        /**
+         * Disables pagination controls while keeping them visible.
+         * Useful for temporarily preventing pagination interaction during operations.
+         *
+         * @default false
+         * @example
+         * ```html
+         * <fu-table [disablePaginator]="isSaving">
+         * ```
+         */
+        this.disablePaginator = input(false);
+        /**
+         * Trigger to reset pagination to first page.
+         * When this input value changes, the fu-table resets `pageIndex` to 0
+         * and emits a new query event. Useful for resetting pagination after filter changes.
+         *
+         * @example
+         * ```typescript
+         * resetTrigger = 0;
+         * onFilterChange() {
+         *   this.resetTrigger++;
+         * }
+         * ```
+         * ```html
+         * <fu-table [resetQuery]="resetTrigger">
+         * ```
+         */
+        this.resetQuery = input();
+        // ========================================
+        // Layout & Appearance
+        // ========================================
+        /**
+         * Enables responsive mode.
+         * When true, fu-table adapts its layout for mobile devices by stacking cell content.
+         *
+         * @default true
+         * @example
+         * ```html
+         * <fu-table [responsive]="false">
+         * ```
+         */
+        this.responsive = input(true);
+        /**
+         * Fixed scroll height in pixels.
+         * When provided, sets a maximum height for the fu-table scroll container.
+         * Useful when `scrollable` is true.
+         *
+         * @example
+         * ```html
+         * <fu-table [scrollable]="true" [scrollHeight]="400">
+         * ```
+         */
+        this.scrollHeight = input();
+        /**
+         * Enables scrollable container with fixed height.
+         * When true, the fu-table body becomes scrollable while headers remain fixed.
+         *
+         * @default false
+         * @example
+         * ```html
+         * <fu-table [scrollable]="true" [scrollHeight]="500">
+         * ```
+         */
+        this.scrollable = input(false);
+        /**
+         * Makes the header row sticky when scrolling.
+         * Requires `scrollable` to be true to take effect.
+         *
+         * @default false
+         * @example
+         * ```html
+         * <fu-table [scrollable]="true" [stickyHeader]="true">
+         * ```
+         */
+        this.stickyHeader = input(false);
+        /**
+         * Makes the first column sticky when scrolling horizontally.
+         * Useful for keeping identifier columns visible while scrolling.
+         *
+         * @default false
+         * @example
+         * ```html
+         * <fu-table [stickyFirstColumn]="true">
+         * ```
+         */
+        this.stickyFirstColumn = input(false);
+        /**
+         * Makes the last column sticky when scrolling horizontally.
+         * Useful for keeping action columns visible while scrolling.
+         *
+         * @default false
+         * @example
+         * ```html
+         * <fu-table [stickyLastColumn]="true">
+         * ```
+         */
+        this.stickyLastColumn = input(false);
+        // ========================================
+        // Row State Management
+        // ========================================
+        /**
+         * Current row operation state for edit/save operations.
+         * Used to track the state of row edit submissions (idle, pending, success, error).
+         * The fu-table will display appropriate visual feedback based on this state.
+         *
+         * @default 'idle'
+         * @example
+         * ```html
+         * <fu-table [rowState]="saveState" (rowEditSubmit)="saveRow($event)">
+         * ```
+         */
+        this.rowState = input('idle');
+        this.rowClass = input(null);
+        this.intl = inject(FuTableIntlService);
+        this.responsiveConfig = linkedSignal(this.responsive);
+        this.scrollHeightConfig = linkedSignal(this.scrollHeight);
+        this.scrollableConfig = linkedSignal(this.scrollable);
+        this.stickyHeaderConfig = linkedSignal(this.stickyHeader);
+        this.stickyFirstColumnConfig = linkedSignal(this.stickyFirstColumn);
+        this.stickyLastColumnConfig = linkedSignal(this.stickyLastColumn);
+        this.sidebarTemplate = contentChild(FuTableSidebarTemplateDirective, {
+            read: TemplateRef,
+        });
+        this.noDataTemplate = contentChild(FuTableNoDataTemplateDirective, {
+            read: TemplateRef,
+        });
+        this.expandRowTemplate = contentChild(FuTableExpandRowTemplateDirective, {
+            read: TemplateRef,
+        });
+        this.rowContextMenuTemplate = contentChild(FuRowContextMenuTemplateDirective, {
+            read: TemplateRef,
+        });
+        this.scrollContainer = viewChild('scrollContainer');
+        /**
+         * Emitted when fu-table requests new data in server-side mode.
+         * Fires on page change, page size change, and sort changes.
+         *
+         * Payload: `FuTableQuery` with `pageIndex`, `pageSize`, optional `sortField` and `sortDirection`.
+         * Note: `searchTerm` is persisted internally but not included in this event.
+         *
+         * @example
+         * ```html
+         * <fu-table
+         *   [dataSource]="rows"
+         *   [totalItems]="total"
+         *   [paginator]="true"
+         *   (queryChanged)="load($event)">
+         * </fu-table>
+         * ```
+         */
+        this.queryChanged = output();
+        /**
+         * Emitted when an editable cell value changes.
+         *
+         * Payload: an object with a single entry where the key is the column field
+         * path (dot notation supported) and the value is the new cell value.
+         * Example payload: `{ "user.name": "Alice" }`.
+         *
+         * @example
+         * ```html
+         * <fu-table (cellValueEdited)="onCellEdit($event)"></fu-table>
+         * ```
+         */
+        this.cellValueEdited = output();
+        /**
+         * Emitted when columns are reordered or their visibility is toggled via the UI.
+         *
+         * Payload: the current column configuration and order as `FuColumnConfig[]`.
+         * Example payload: `[{ field: 'name', visible: true }, { field: 'email', visible: false }]`.
+         *
+         * @example
+         * ```html
+         * <fu-table [configPanel]="true" (columnsChanged)="persistColumns($event)"></fu-table>
+         * ```
+         */
+        this.columnsChanged = output();
+        /**
+         * Emitted when an inline row edit is submitted.
+         *
+         * You should persist the changes and then set `[rowState]` to `'success'` or `'error'`
+         * to reflect the result. The component will display feedback accordingly.
+         *
+         * Payload: the edited row object of type `T`.
+         *
+         * @example
+         * ```html
+         * <fu-table [rowState]="saveState" (rowEditSubmit)="saveRow($event)"></fu-table>
+         * ```
+         */
+        this.rowEditSubmit = output();
+        /**
+         * Emitted when a row is clicked.
+         *
+         * Payload: the clicked row object of type `T`.
+         *
+         * @example
+         * ```html
+         * <fu-table (rowClicked)="selectRow($event)"></fu-table>
+         * ```
+         */
+        this.rowClicked = output();
+        this.columns = signal([]);
+        this.searchTerm = signal('');
+        this.sidebarOpen = signal(false);
+        this.expandIndex = signal(null);
+        this.originalData = signal([]);
+        this.pageIndex = signal(0);
+        this.pageSize = signal(5);
+        this.pageSizeOptions = signal([5, 10, 20, 50]);
+        this.editingRowIndex = signal(null);
+        this.pendingSaveRowIndex = signal(null);
+        this.originalRowSnapshot = signal(null);
+        this.rowStates = new Map();
+        this.rowLoading = new Set();
+        this.activeMatchIndex = signal(0);
+        this.visibleCount = computed(() => this.columns().filter(c => c.visible()).length);
+        this.initialLoading = computed(() => this.loading() && this.dataSource().length === 0);
+        this.isServerData = computed(() => this.totalItems() > this.dataSource().length);
+        this.entriesLabel = computed(() => {
+            const total = this.actualTotalItems();
+            if (!total)
+                return this.intl.noEntries();
+            const start = this.pageIndex() * this.pageSize() + 1;
+            const end = Math.min((this.pageIndex() + 1) * this.pageSize(), total);
+            return this.intl.entriesLabel(start, end, total);
+        });
+        this.filteredData = computed(() => {
+            if (!this.searchTerm())
+                return this.dataSource();
+            return this.dataSource().filter(row => this.columns().some(col => {
+                const value = this.getCellValue(row, col.field());
+                return (value != null &&
+                    String(value).toLowerCase().includes(this.searchTerm()));
+            }));
+        });
+        this.visibleRows = computed(() => {
+            const data = this.filteredData();
+            if (this.isServerData()) {
+                return data;
+            }
+            const start = this.pageIndex() * this.pageSize();
+            return data.slice(start, start + this.pageSize());
+        });
+        this.actualTotalItems = computed(() => {
+            if (this.isServerData()) {
+                return this.totalItems();
+            }
+            return this.filteredData().length;
+        });
+        this.skeletonRowCount = computed(() => this.pageSize());
+        this.skeletonColumnCount = computed(() => this.visibleColumns().length + (this.expandRowTemplate() ? 1 : 0));
+        this.totalPages = computed(() => Math.ceil(this.actualTotalItems() / this.pageSize()));
+        this.visibleColumns = computed(() => this.columns().filter(col => col.visible()));
+        this.activeSort = computed(() => {
+            const col = this.columns().find(c => c.sortDirection() !== null);
+            if (!col)
+                return null;
+            return {
+                field: col.field(),
+                sortKey: col.sortField() ?? col.field(),
+                direction: col.sortDirection(),
+            };
+        });
+        this.searchMatches = computed(() => {
+            const term = this.searchTerm();
+            if (!term)
+                return [];
+            const rows = this.visibleRows();
+            const columns = this.columns();
+            const matches = [];
+            rows.forEach((row, rowIndex) => {
+                columns.forEach(col => {
+                    const value = this.getCellValue(row, col.field());
+                    if (value == null)
+                        return;
+                    if (String(value).toLowerCase().includes(term)) {
+                        matches.push({ rowIndex, column: col });
+                    }
+                });
+            });
+            return matches;
+        });
+        this.activeSidebarPanel = signal(null);
+        this.isSidebarOpen = computed(() => this.activeSidebarPanel() !== null);
+        this.isColumnsOpen = computed(() => this.activeSidebarPanel() === 'columns');
+        this.isLayoutOpen = computed(() => this.activeSidebarPanel() === 'layout');
+        this.isCustomOpen = computed(() => this.activeSidebarPanel() === 'custom');
+        this.persist = afterRenderEffect(() => {
+            this.resetLayoutConfig();
+            this.scrollableConfig();
+            this.stickyHeaderConfig();
+            this.stickyFirstColumnConfig();
+            this.stickyLastColumnConfig();
+            this.saveState();
+        });
+    }
+    ngOnChanges(changes) {
+        if (changes['dataSource']) {
+            this.originalData.set([...this.dataSource()]);
+            // this.pageIndex.set(0);
+        }
+        if (changes['columnsConfig'] && !changes['columnsConfig'].firstChange) {
+            this.applyColumnsConfig();
+        }
+        if (changes['rowState']) {
+            this.handleRowSaveResult();
+        }
+        if (!changes['loading'].firstChange &&
+            changes['loading'].currentValue === false &&
+            !changes['rowState']) {
+            this.rowStates.clear();
+        }
+        if (changes['resetQuery'] && !changes['resetQuery'].firstChange) {
+            this.pageIndex.set(0);
+            this.emitQueryIfNeeded();
+        }
+    }
+    ngAfterContentInit() {
+        const persisted = this.loadState();
+        // 1️⃣ restore query
+        const query = persisted?.query;
+        if (query) {
+            this.pageIndex.set(query.pageIndex);
+            this.pageSize.set(query.pageSize);
+            this.searchTerm.set(query.searchTerm ?? '');
+            this.restoreSort(query.sortField, query.sortDirection);
+            this.applyClientSort();
+        }
+        // 2️⃣ restore columns
+        const colsConfig = this.columnsConfig().length
+            ? this.columnsConfig()
+            : persisted?.columns;
+        if (colsConfig) {
+            this.applyColumnsConfig(colsConfig);
+        }
+        // 🔑 ui settings
+        if (persisted?.ui) {
+            this.responsiveConfig.set(persisted.ui.responsive);
+            this.scrollableConfig.set(persisted.ui.scrollable);
+            this.stickyHeaderConfig.set(persisted.ui.stickyHeader);
+            this.stickyFirstColumnConfig.set(persisted.ui.stickyFirstColumn);
+            this.stickyLastColumnConfig.set(persisted.ui.stickyLastColumn);
+        }
+        this.emitQueryIfNeeded();
+    }
+    resetLayoutConfig() {
+        if (this.scrollableConfig() === false) {
+            this.scrollableConfig.set(false);
+            this.stickyHeaderConfig.set(false);
+            this.stickyFirstColumnConfig.set(false);
+            this.stickyLastColumnConfig.set(false);
+        }
+    }
+    loadState() {
+        if (!this.localStorageKey())
+            return null;
+        try {
+            const raw = localStorage.getItem(this.localStorageKey());
+            return raw ? JSON.parse(raw) : null;
+        }
+        catch {
+            return null;
+        }
+    }
+    saveState() {
+        if (!this.localStorageKey())
+            return;
+        const state = {
+            query: {
+                pageIndex: this.pageIndex(),
+                pageSize: this.pageSize(),
+                sortField: this.activeSort()?.field,
+                sortDirection: this.activeSort()?.direction,
+                searchTerm: this.searchTerm(),
+            },
+            columns: this.columns().map(col => ({
+                field: col.field(),
+                visible: col.visible(),
+            })),
+            ui: {
+                responsive: this.responsiveConfig(),
+                scrollable: this.scrollableConfig(),
+                stickyHeader: this.stickyHeaderConfig(),
+                stickyFirstColumn: this.stickyFirstColumnConfig(),
+                stickyLastColumn: this.stickyLastColumnConfig(),
+            },
+        };
+        localStorage.setItem(this.localStorageKey(), JSON.stringify(state));
+    }
+    toggleColumnsPanel() {
+        this.activeSidebarPanel.update(p => (p === 'columns' ? null : 'columns'));
+    }
+    toggleLayoutPanel() {
+        this.activeSidebarPanel.update(p => (p === 'layout' ? null : 'layout'));
+    }
+    toggleCustomPanel() {
+        this.activeSidebarPanel.update(p => (p === 'custom' ? null : 'custom'));
+    }
+    applyColumnsConfig(config = this.columnsConfig()) {
+        if (!config.length)
+            return;
+        const byField = new Map(this.columns().map(c => [c.field(), c]));
+        const reordered = [];
+        for (const cfg of config) {
+            const col = byField.get(cfg.field);
+            if (!col)
+                continue;
+            col.visible.set(cfg.visible !== false); // default true
+            reordered.push(col);
+            byField.delete(cfg.field);
+        }
+        // columns not mentioned in config → visible by default
+        for (const col of byField.values()) {
+            col.visible.set(true);
+            reordered.push(col);
+        }
+        this.columns.set(reordered);
+        this.saveState();
+    }
+    toggleSidebar() {
+        this.sidebarOpen.update(v => !v);
+    }
+    startEditRow(index, event) {
+        event?.stopPropagation();
+        this.resetEditRow();
+        this.editingRowIndex.set(index);
+        this.originalRowSnapshot.set(structuredClone(this.visibleRows()[index]));
+        this.rowStates.set(index, 'pending');
+    }
+    saveEditRow(event) {
+        event?.stopPropagation();
+        if (this.editingRowIndex() === null)
+            return;
+        const row = this.visibleRows()[this.editingRowIndex()];
+        this.pendingSaveRowIndex.set(this.editingRowIndex());
+        this.editingRowIndex.set(null);
+        this.rowLoading.add(this.pendingSaveRowIndex());
+        this.rowEditSubmit.emit(row);
+    }
+    cancelEditRow(event) {
+        event?.stopPropagation();
+        if (this.editingRowIndex() === null || !this.originalRowSnapshot())
+            return;
+        Object.assign(this.visibleRows()[this.editingRowIndex()], this.originalRowSnapshot());
+        //     this.filteredData.update(data => {
+        //   const copy = [...data];
+        //   copy[this.editingRowIndex!] = {
+        //     ...copy[this.editingRowIndex!],
+        //     ...this.originalRowSnapshot,
+        //   };
+        //   return copy;
+        // });
+        this.rowStates.set(this.editingRowIndex(), 'idle');
+        this.editingRowIndex.set(null);
+        this.originalRowSnapshot.set(null);
+    }
+    resetEditRow() {
+        if (this.editingRowIndex() === null)
+            return;
+        this.pendingSaveRowIndex.set(null);
+        this.editingRowIndex.set(null);
+        this.originalRowSnapshot.set(null);
+        this.rowStates.clear();
+    }
+    handleRowSaveResult() {
+        const result = this.rowState();
+        if (this.pendingSaveRowIndex() === null)
+            return;
+        const row = this.visibleRows()[this.pendingSaveRowIndex()];
+        this.rowLoading.delete(this.pendingSaveRowIndex());
+        if (result === 'success') {
+            this.rowStates.set(this.pendingSaveRowIndex(), 'success');
+            this.originalRowSnapshot.set(null);
+        }
+        else {
+            Object.assign(row, this.originalRowSnapshot());
+            this.rowStates.set(this.pendingSaveRowIndex(), 'error');
+            this.originalRowSnapshot.set(null);
+        }
+        this.pendingSaveRowIndex.set(null);
+    }
+    onRowClick(row, event) {
+        event.stopPropagation();
+        this.rowClicked.emit(row);
+    }
+    onEditAnimationEnd() {
+        this.rowStates.clear();
+    }
+    getCellValue(row, field) {
+        if (!field)
+            return null;
+        return field
+            .split('.')
+            .reduce((acc, key) => acc?.[key], row);
+    }
+    toggleExpand(index, event) {
+        event?.stopPropagation();
+        this.expandIndex.update(i => (i === index ? null : index));
+    }
+    onSort(col, event) {
+        event?.stopPropagation();
+        this.activeMatchIndex.set(0);
+        if (!col.sortable())
+            return;
+        col.toggleSort();
+        this.columns.update(cols => cols.map(c => {
+            if (c.field() !== col.field()) {
+                c.sortDirection.set(null);
+            }
+            return c;
+        }));
+        this.pageIndex.set(0);
+        if (this.isServerData()) {
+            this.emitQueryIfNeeded();
+        }
+        else {
+            this.applyClientSort();
+        }
+        this.resetEditRow();
+    }
+    restoreOriginalOrder() {
+        this.dataSource.set([...this.originalData()]);
+    }
+    applyClientSort() {
+        const sort = this.activeSort();
+        if (!sort) {
+            this.restoreOriginalOrder();
+            this.saveState();
+            return;
+        }
+        const { field, direction } = sort;
+        const dir = direction === 'asc' ? 1 : -1;
+        this.dataSource.update(data => {
+            const sorted = [...data].sort((a, b) => {
+                const av = this.getCellValue(a, field);
+                const bv = this.getCellValue(b, field);
+                return this.compareValues(av, bv) * dir;
+            });
+            return sorted;
+        });
+        this.saveState();
+    }
+    compareValues(a, b) {
+        if (a == null && b == null)
+            return 0;
+        if (a == null)
+            return -1;
+        if (b == null)
+            return 1;
+        if (typeof a === 'number' && typeof b === 'number') {
+            return a - b;
+        }
+        return String(a).localeCompare(String(b));
+    }
+    emitQueryIfNeeded() {
+        this.queryChanged.emit({
+            pageIndex: this.pageIndex(),
+            pageSize: this.pageSize(),
+            sortField: this.activeSort()?.sortKey,
+            sortDirection: this.activeSort()?.direction,
+        });
+        this.saveState();
+    }
+    registerColumn(col) {
+        this.columns.update(cols => [...cols, col]);
+    }
+    setCellValue(row, field, value) {
+        const keys = field.split('.');
+        const lastKey = keys.pop();
+        const target = keys.reduce((acc, key) => {
+            acc[key] ??= {};
+            return acc[key];
+        }, row);
+        target[lastKey] = value;
+    }
+    onCellChange(row, col, value) {
+        this.setCellValue(row, col.field(), value);
+        this.cellValueEdited.emit({ [col.field()]: value });
+    }
+    onSearch(value) {
+        this.searchTerm.set(value.toLowerCase());
+        this.pageIndex.set(0);
+        this.saveState();
+        this.resetEditRow();
+    }
+    isActiveMatch(rowIndex, col) {
+        const match = this.searchMatches()[this.activeMatchIndex()];
+        return !!match && match.rowIndex === rowIndex && match.column === col;
+    }
+    nextMatch() {
+        if (!this.searchMatches().length)
+            return;
+        this.activeMatchIndex.set((this.activeMatchIndex() + 1) % this.searchMatches().length);
+        this.scrollToActiveMatch();
+    }
+    prevMatch() {
+        if (!this.searchMatches().length)
+            return;
+        this.activeMatchIndex.set((this.activeMatchIndex() - 1 + this.searchMatches().length) %
+            this.searchMatches().length);
+        this.scrollToActiveMatch();
+    }
+    scrollToActiveMatch() {
+        const match = this.searchMatches()[this.activeMatchIndex()];
+        if (!match)
+            return;
+        const row = this.scrollContainer()?.nativeElement.querySelector(`tr[data-row-index="${match.rowIndex}"]`);
+        row?.scrollIntoView({
+            behavior: 'smooth',
+            block: 'center',
+        });
+    }
+    nextPage() {
+        if (this.pageIndex() < this.totalPages() - 1) {
+            this.pageIndex.update(val => val + 1);
+            this.emitQueryIfNeeded();
+            this.resetEditRow();
+        }
+    }
+    prevPage() {
+        if (this.pageIndex() > 0) {
+            this.pageIndex.update(v => v - 1);
+            this.emitQueryIfNeeded();
+            this.resetEditRow();
+        }
+    }
+    onPageSizeChange(size) {
+        this.pageSize.set(Number(size));
+        this.pageIndex.set(0);
+        this.emitQueryIfNeeded();
+        this.resetEditRow();
+    }
+    toggleVisibility(col) {
+        if (!col.hideable())
+            return;
+        if (this.visibleCount() === 3 && col.visible())
+            return;
+        col.visible.update(val => !val);
+        this.emitColumns();
+    }
+    drop(event) {
+        if (event.previousIndex === event.currentIndex)
+            return;
+        this.columns.update(cols => {
+            const copy = [...cols];
+            moveItemInArray(copy, event.previousIndex, event.currentIndex);
+            return copy;
+        });
+        this.emitColumns();
+    }
+    emitColumns() {
+        this.saveState();
+        this.columnsChanged.emit(this.columns().map(c => ({
+            field: c.field(),
+            visible: c.visible(),
+        })));
+    }
+    restoreSort(sortField, sortDirection) {
+        this.columns.update(cols => cols.map(col => {
+            col.sortDirection.set(col.field() === sortField ? (sortDirection ?? null) : null);
+            return col;
+        }));
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.6", ngImport: i0, type: FuTableComponent, deps: [{ token: i0.Injector }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.6", type: FuTableComponent, isStandalone: true, selector: "fu-table", inputs: { dataSource: { classPropertyName: "dataSource", publicName: "dataSource", isSignal: true, isRequired: true, transformFunction: null }, totalItems: { classPropertyName: "totalItems", publicName: "totalItems", isSignal: true, isRequired: false, transformFunction: null }, localStorageKey: { classPropertyName: "localStorageKey", publicName: "localStorageKey", isSignal: true, isRequired: false, transformFunction: null }, columnsConfig: { classPropertyName: "columnsConfig", publicName: "columnsConfig", isSignal: true, isRequired: false, transformFunction: null }, configPanel: { classPropertyName: "configPanel", publicName: "configPanel", isSignal: true, isRequired: false, transformFunction: null }, filterPanel: { classPropertyName: "filterPanel", publicName: "filterPanel", isSignal: true, isRequired: false, transformFunction: null }, paginator: { classPropertyName: "paginator", publicName: "paginator", isSignal: true, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, disablePaginator: { classPropertyName: "disablePaginator", publicName: "disablePaginator", isSignal: true, isRequired: false, transformFunction: null }, resetQuery: { classPropertyName: "resetQuery", publicName: "resetQuery", isSignal: true, isRequired: false, transformFunction: null }, responsive: { classPropertyName: "responsive", publicName: "responsive", isSignal: true, isRequired: false, transformFunction: null }, scrollHeight: { classPropertyName: "scrollHeight", publicName: "scrollHeight", isSignal: true, isRequired: false, transformFunction: null }, scrollable: { classPropertyName: "scrollable", publicName: "scrollable", isSignal: true, isRequired: false, transformFunction: null }, stickyHeader: { classPropertyName: "stickyHeader", publicName: "stickyHeader", isSignal: true, isRequired: false, transformFunction: null }, stickyFirstColumn: { classPropertyName: "stickyFirstColumn", publicName: "stickyFirstColumn", isSignal: true, isRequired: false, transformFunction: null }, stickyLastColumn: { classPropertyName: "stickyLastColumn", publicName: "stickyLastColumn", isSignal: true, isRequired: false, transformFunction: null }, rowState: { classPropertyName: "rowState", publicName: "rowState", isSignal: true, isRequired: false, transformFunction: null }, rowClass: { classPropertyName: "rowClass", publicName: "rowClass", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { dataSource: "dataSourceChange", queryChanged: "queryChanged", cellValueEdited: "cellValueEdited", columnsChanged: "columnsChanged", rowEditSubmit: "rowEditSubmit", rowClicked: "rowClicked" }, queries: [{ propertyName: "sidebarTemplate", first: true, predicate: FuTableSidebarTemplateDirective, descendants: true, read: TemplateRef, isSignal: true }, { propertyName: "noDataTemplate", first: true, predicate: FuTableNoDataTemplateDirective, descendants: true, read: TemplateRef, isSignal: true }, { propertyName: "expandRowTemplate", first: true, predicate: FuTableExpandRowTemplateDirective, descendants: true, read: TemplateRef, isSignal: true }, { propertyName: "rowContextMenuTemplate", first: true, predicate: FuRowContextMenuTemplateDirective, descendants: true, read: TemplateRef, isSignal: true }], viewQueries: [{ propertyName: "scrollContainer", first: true, predicate: ["scrollContainer"], descendants: true, isSignal: true }], usesOnChanges: true, ngImport: i0, template: "<div class=\"fu-table-wrapper\">\r\n  @if (filterPanel()) {\r\n    <div class=\"fu-search\">\r\n      <input\r\n        type=\"search\"\r\n        [placeholder]=\"intl.searchPlaceholder()\"\r\n        [value]=\"searchTerm()\"\r\n        (input)=\"onSearch($any($event.target).value)\"\r\n      />\r\n      <div class=\"fu-search-nav\">\r\n        <button fuButton (click)=\"prevMatch()\">\r\n          {{ intl.previous() }}\r\n        </button>\r\n        <button fuButton (click)=\"nextMatch()\">\r\n          {{ intl.next() }}\r\n        </button>\r\n        @if (searchMatches().length > 0) {\r\n          <span class=\"fu-match-counter\">\r\n            {{ activeMatchIndex() + 1 }} / {{ searchMatches().length }}\r\n          </span>\r\n        }\r\n      </div>\r\n    </div>\r\n  }\r\n\r\n  <div\r\n    class=\"fu-table-layout\"\r\n    [class.fu-with-sidebar]=\"configPanel() || sidebarTemplate()\"\r\n  >\r\n    <div\r\n      #scrollContainer\r\n      class=\"fu-table-scroll\"\r\n      [class.fu-scrollable]=\"scrollableConfig()\"\r\n      [style.max-height.vh]=\"scrollHeightConfig()\"\r\n    >\r\n      <table\r\n        class=\"fu-table\"\r\n        [class.fu-table--responsive]=\"responsiveConfig()\"\r\n        [class.fu-table-scrollable]=\"scrollableConfig()\"\r\n        [class.fu-sticky-header]=\"stickyHeaderConfig()\"\r\n        [class.fu-sticky-first]=\"stickyFirstColumnConfig()\"\r\n        [class.fu-sticky-last]=\"stickyLastColumnConfig()\"\r\n      >\r\n        <thead>\r\n          <tr>\r\n            @if (expandRowTemplate()) {\r\n              <th class=\"fu-expand-header\"></th>\r\n            }\r\n            <!--  -->\r\n            @for (col of visibleColumns(); track $index) {\r\n              <th\r\n                (click)=\"onSort(col, $event)\"\r\n                [class.fu-sortable]=\"col.sortable()\"\r\n                [style.width]=\"col.width()\"\r\n              >\r\n                <div class=\"fu-th-content\">\r\n                  @if (col.columnHeaderTemplate()) {\r\n                    <ng-container\r\n                      [ngTemplateOutlet]=\"col.columnHeaderTemplate()!\"\r\n                      [ngTemplateOutletContext]=\"{ index: $index }\"\r\n                    />\r\n                    @if (col.sortable()) {\r\n                      <ng-container\r\n                        [ngTemplateOutlet]=\"defaultSortIcon\"\r\n                        [ngTemplateOutletContext]=\"{\r\n                          $implicit: col.sortDirection(),\r\n                        }\"\r\n                      />\r\n                    }\r\n                  } @else {\r\n                    <span class=\"fu-header-main\">\r\n                      {{ col.header() }}\r\n\r\n                      @if (col.sortable()) {\r\n                        <ng-container\r\n                          [ngTemplateOutlet]=\"defaultSortIcon\"\r\n                          [ngTemplateOutletContext]=\"{\r\n                            $implicit: col.sortDirection(),\r\n                          }\"\r\n                        />\r\n                      }\r\n                    </span>\r\n                  }\r\n                  <!--  -->\r\n                  @if (col.columnHeaderAddonTemplate()) {\r\n                    <span class=\"fu-header-addon\">\r\n                      <ng-container\r\n                        [ngTemplateOutlet]=\"col.columnHeaderAddonTemplate()!\"\r\n                        [ngTemplateOutletContext]=\"{ index: $index }\"\r\n                      />\r\n                    </span>\r\n                  }\r\n                </div>\r\n              </th>\r\n            }\r\n          </tr>\r\n        </thead>\r\n\r\n        <tbody>\r\n          @if (loading() && pendingSaveRowIndex() === null) {\r\n            <ng-container [ngTemplateOutlet]=\"loadingTemplate\" />\r\n          } @else {\r\n            <!--  -->\r\n            @for (row of visibleRows(); let rowIndex = $index; track rowIndex) {\r\n              <tr\r\n                #contextTrigger=\"cdkContextMenuTriggerFor\"\r\n                [cdkContextMenuTriggerFor]=\"rowContextMenu\"\r\n                [cdkContextMenuTriggerData]=\"{\r\n                  row,\r\n                  index: rowIndex,\r\n                  trigger: contextTrigger,\r\n                }\"\r\n                [cdkContextMenuDisabled]=\"!rowContextMenuTemplate()\"\r\n                [class.fu-cell-success]=\"\r\n                  rowStates.get(rowIndex) === 'success' && !loading()\r\n                \"\r\n                [class.fu-cell-error]=\"\r\n                  rowStates.get(rowIndex) === 'error' && !loading()\r\n                \"\r\n                [class.fu-row-expanded]=\"expandIndex() === rowIndex\"\r\n                [attr.data-row-index]=\"rowIndex\"\r\n                [class]=\"rowClass() ? rowClass()!(row, rowIndex) : ''\"\r\n                (animationend)=\"onEditAnimationEnd()\"\r\n                (click)=\"onRowClick(row, $event)\"\r\n              >\r\n                @if (expandRowTemplate()) {\r\n                  <td\r\n                    class=\"fu-expand-cell\"\r\n                    [attr.data-expand]=\"expandIndex() === rowIndex\"\r\n                    (click)=\"toggleExpand(rowIndex, $event)\"\r\n                  >\r\n                    <span class=\"fu-icon\">\r\n                      <svg\r\n                        xmlns=\"http://www.w3.org/2000/svg\"\r\n                        width=\"24\"\r\n                        height=\"24\"\r\n                        viewBox=\"0 0 24 24\"\r\n                      >\r\n                        <path\r\n                          fill=\"currentColor\"\r\n                          d=\"M10 6L8.59 7.41L13.17 12l-4.58 4.59L10 18l6-6z\"\r\n                        />\r\n                      </svg>\r\n                    </span>\r\n                  </td>\r\n                }\r\n                <!--  -->\r\n                @for (\r\n                  col of visibleColumns();\r\n                  let colIndex = $index;\r\n                  track colIndex\r\n                ) {\r\n                  @let isMatch = isActiveMatch(rowIndex, col);\r\n\r\n                  <td\r\n                    [class.fu-cell-pending]=\"\r\n                      rowStates.get(rowIndex) === 'pending' && loading()\r\n                    \"\r\n                    [class.fu-cell-editing]=\"editingRowIndex() === rowIndex\"\r\n                    [class.fu-cell-sorting]=\"\r\n                      col.sortable() && col.sortDirection() !== null\r\n                    \"\r\n                    [class.fu-active-match]=\"isMatch\"\r\n                  >\r\n                    <div class=\"fu-header-text\">\r\n                      {{ col.header() }}\r\n                    </div>\r\n\r\n                    @if (col.columnCellTemplate()) {\r\n                      <ng-container\r\n                        [ngTemplateOutlet]=\"col.columnCellTemplate()!\"\r\n                        [ngTemplateOutletContext]=\"{\r\n                          $implicit: getCellValue(row, col.field()),\r\n                          row: row,\r\n                          index: rowIndex,\r\n                          searchTerm: searchTerm(),\r\n                          activeMatch: isMatch,\r\n                        }\"\r\n                        }\r\n                      />\r\n                    } @else if (col.columnActionsTemplate()) {\r\n                      <ng-container\r\n                        [ngTemplateOutlet]=\"col.columnActionsTemplate()!\"\r\n                        [ngTemplateOutletContext]=\"{\r\n                          row: row,\r\n                          index: rowIndex,\r\n                          editing: editingRowIndex() === rowIndex,\r\n                          startEdit: startEditRow.bind(this),\r\n                          saveEdit: saveEditRow.bind(this),\r\n                          cancelEdit: cancelEditRow.bind(this),\r\n                          toggleExpand: toggleExpand.bind(this),\r\n                        }\"\r\n                        }\r\n                      />\r\n                    } @else {\r\n                      <fu-cell\r\n                        [type]=\"col.type()\"\r\n                        [searchTerm]=\"searchTerm()\"\r\n                        [editable]=\"col.editable()\"\r\n                        [value]=\"getCellValue(row, col.field())\"\r\n                        [activeMatch]=\"isMatch\"\r\n                        [editing]=\"editingRowIndex() === rowIndex\"\r\n                        (cellValueChange)=\"onCellChange(row, col, $event)\"\r\n                      />\r\n                    }\r\n                  </td>\r\n                }\r\n              </tr>\r\n\r\n              @if (expandIndex() === rowIndex) {\r\n                <tr>\r\n                  <td [attr.colspan]=\"columns().length + 1\">\r\n                    <ng-container\r\n                      [ngTemplateOutlet]=\"expandRowTemplate()!\"\r\n                      [ngTemplateOutletContext]=\"{\r\n                        $implicit: row,\r\n                        index: rowIndex,\r\n                        searchTerm: searchTerm,\r\n                      }\"\r\n                    />\r\n                  </td>\r\n                </tr>\r\n              }\r\n            } @empty {\r\n              <tr class=\"fu-no-data-row\">\r\n                <td [attr.colspan]=\"columns().length + 1\">\r\n                  <ng-container\r\n                    [ngTemplateOutlet]=\"noDataTemplate() ?? defaultNoData\"\r\n                  />\r\n                </td>\r\n              </tr>\r\n            }\r\n          }\r\n        </tbody>\r\n      </table>\r\n    </div>\r\n\r\n    @if (configPanel() || sidebarTemplate()) {\r\n      <div\r\n        class=\"fu-sidebar\"\r\n        [class.fu-open]=\"isSidebarOpen()\"\r\n        (fuClickOutside)=\"activeSidebarPanel.set(null)\"\r\n      >\r\n        @if (isSidebarOpen()) {\r\n          <div class=\"fu-content\">\r\n            @if (isColumnsOpen()) {\r\n              <ng-container [ngTemplateOutlet]=\"defaultSidebar\" />\r\n            } @else if (isLayoutOpen()) {\r\n              <ng-container [ngTemplateOutlet]=\"configSidebar\" />\r\n            } @else if (isCustomOpen()) {\r\n              <ng-container [ngTemplateOutlet]=\"sidebarTemplate()!\" />\r\n            }\r\n          </div>\r\n        }\r\n\r\n        <div class=\"fu-handle\">\r\n          @if (configPanel()) {\r\n            <button\r\n              fuButton\r\n              variant=\"icon\"\r\n              severity=\"success\"\r\n              (click)=\"toggleColumnsPanel()\"\r\n            >\r\n              <svg\r\n                xmlns=\"http://www.w3.org/2000/svg\"\r\n                width=\"24\"\r\n                height=\"24\"\r\n                viewBox=\"0 0 24 24\"\r\n              >\r\n                <path\r\n                  fill=\"currentColor\"\r\n                  d=\"M3.25 3a.75.75 0 0 0 0 1.5h.5C4.44 4.5 5 5.06 5 5.75v12.5c0 .69-.56 1.25-1.25 1.25h-.5a.75.75 0 0 0 0 1.5h.5a2.75 2.75 0 0 0 2.75-2.75V5.75A2.75 2.75 0 0 0 3.75 3zm7.5 0A2.75 2.75 0 0 0 8 5.75v12.5A2.75 2.75 0 0 0 10.75 21h.415l.356-1.423l.02-.077h-.791c-.69 0-1.25-.56-1.25-1.25V5.75c0-.69.56-1.25 1.25-1.25h2.5c.69 0 1.25.56 1.25 1.25v10.105l1.5-1.5V5.75A2.75 2.75 0 0 0 13.25 3zM19 11.483q-.325.198-.607.48l-.893.892V5.75A2.75 2.75 0 0 1 20.25 3h.5a.75.75 0 0 1 0 1.5h-.5c-.69 0-1.25.56-1.25 1.25zm.1 1.186l-5.903 5.903a2.7 2.7 0 0 0-.706 1.247l-.458 1.831a1.087 1.087 0 0 0 1.319 1.318l1.83-.457a2.7 2.7 0 0 0 1.248-.707l5.902-5.902A2.286 2.286 0 0 0 19.1 12.67\"\r\n                />\r\n              </svg>\r\n            </button>\r\n            <button\r\n              fuButton\r\n              variant=\"icon\"\r\n              severity=\"warning\"\r\n              (click)=\"toggleLayoutPanel()\"\r\n            >\r\n              <svg\r\n                xmlns=\"http://www.w3.org/2000/svg\"\r\n                width=\"24\"\r\n                height=\"24\"\r\n                viewBox=\"0 0 24 24\"\r\n              >\r\n                <path\r\n                  fill=\"currentColor\"\r\n                  d=\"M21 13.1c-.1 0-.3.1-.4.2l-1 1l2.1 2.1l1-1c.2-.2.2-.6 0-.8l-1.3-1.3c-.1-.1-.2-.2-.4-.2m-1.9 1.8l-6.1 6V23h2.1l6.1-6.1zM21 3h-8v6h8zm-2 4h-4V5h4zm-6 11.06V11h8v.1c-.76 0-1.43.4-1.81.79L18.07 13H15v3.07zM11 3H3v10h8zm-2 8H5V5h4zm2 9.06V15H3v6h8zM9 19H5v-2h4z\"\r\n                />\r\n              </svg>\r\n            </button>\r\n          }\r\n          @if (sidebarTemplate()) {\r\n            <button\r\n              fuButton\r\n              variant=\"icon\"\r\n              severity=\"danger\"\r\n              (click)=\"toggleCustomPanel()\"\r\n            >\r\n              <svg\r\n                xmlns=\"http://www.w3.org/2000/svg\"\r\n                width=\"24\"\r\n                height=\"24\"\r\n                viewBox=\"0 0 24 24\"\r\n              >\r\n                <path\r\n                  fill=\"currentColor\"\r\n                  d=\"M12 16c1.1 0 2 .9 2 2s-.9 2-2 2s-2-.9-2-2s.9-2 2-2m0-6c1.1 0 2 .9 2 2s-.9 2-2 2s-2-.9-2-2s.9-2 2-2m0-6c1.1 0 2 .9 2 2s-.9 2-2 2s-2-.9-2-2s.9-2 2-2M6 16c1.1 0 2 .9 2 2s-.9 2-2 2s-2-.9-2-2s.9-2 2-2m0-6c1.1 0 2 .9 2 2s-.9 2-2 2s-2-.9-2-2s.9-2 2-2m0-6c1.1 0 2 .9 2 2s-.9 2-2 2s-2-.9-2-2s.9-2 2-2m12 12c1.1 0 2 .9 2 2s-.9 2-2 2s-2-.9-2-2s.9-2 2-2m0-6c1.1 0 2 .9 2 2s-.9 2-2 2s-2-.9-2-2s.9-2 2-2m0-6c1.1 0 2 .9 2 2s-.9 2-2 2s-2-.9-2-2s.9-2 2-2\"\r\n                />\r\n              </svg>\r\n            </button>\r\n          }\r\n        </div>\r\n      </div>\r\n    }\r\n  </div>\r\n\r\n  @if (paginator()) {\r\n    <div class=\"fu-paginator\">\r\n      <div class=\"fu-paginator-entries\">\r\n        {{ entriesLabel() }}\r\n      </div>\r\n\r\n      <button\r\n        fuButton\r\n        variant=\"icon\"\r\n        (click)=\"prevPage()\"\r\n        [disabled]=\"pageIndex() === 0 || disablePaginator()\"\r\n      >\r\n        <svg\r\n          xmlns=\"http://www.w3.org/2000/svg\"\r\n          width=\"24\"\r\n          height=\"24\"\r\n          viewBox=\"0 0 24 24\"\r\n        >\r\n          <path\r\n            fill=\"none\"\r\n            stroke=\"currentColor\"\r\n            stroke-linecap=\"round\"\r\n            stroke-linejoin=\"round\"\r\n            stroke-width=\"1.5\"\r\n            d=\"m14 7l-5 5l5 5\"\r\n          />\r\n        </svg>\r\n      </button>\r\n\r\n      <span class=\"fu-page-info\">\r\n        {{ intl.pageLabel() }} {{ pageIndex() + 1 }} {{ intl.ofLabel() }}\r\n        {{ totalPages() }}\r\n      </span>\r\n\r\n      <button\r\n        fuButton\r\n        variant=\"icon\"\r\n        (click)=\"nextPage()\"\r\n        [disabled]=\"pageIndex() >= totalPages() - 1 || disablePaginator()\"\r\n      >\r\n        <svg\r\n          xmlns=\"http://www.w3.org/2000/svg\"\r\n          width=\"24\"\r\n          height=\"24\"\r\n          viewBox=\"0 0 24 24\"\r\n        >\r\n          <path\r\n            fill=\"none\"\r\n            stroke=\"currentColor\"\r\n            stroke-linecap=\"round\"\r\n            stroke-linejoin=\"round\"\r\n            stroke-width=\"1.5\"\r\n            d=\"m10 17l5-5l-5-5\"\r\n          />\r\n        </svg>\r\n      </button>\r\n\r\n      <select [(ngModel)]=\"pageSize\" (ngModelChange)=\"onPageSizeChange($event)\">\r\n        @for (size of pageSizeOptions(); track size) {\r\n          <option class=\"fu-option\" [value]=\"size\">{{ size }}</option>\r\n        }\r\n      </select>\r\n    </div>\r\n  }\r\n</div>\r\n\r\n<ng-template\r\n  #rowContextMenu\r\n  let-row=\"row\"\r\n  let-index=\"index\"\r\n  let-trigger=\"trigger\"\r\n>\r\n  <div cdkMenu>\r\n    <ng-container\r\n      *ngTemplateOutlet=\"\r\n        rowContextMenuTemplate()!;\r\n        context: { row, index, trigger }\r\n      \"\r\n    />\r\n  </div>\r\n</ng-template>\r\n\r\n<ng-template #loadingTemplate>\r\n  @for (\r\n    i of [].constructor(skeletonRowCount());\r\n    let rowIndex = $index;\r\n    track rowIndex\r\n  ) {\r\n    <tr class=\"fu-skeleton-row\">\r\n      @for (\r\n        j of [].constructor(skeletonColumnCount());\r\n        let colIndex = $index;\r\n        track colIndex\r\n      ) {\r\n        <td>\r\n          <div class=\"fu-skeleton-cell\"></div>\r\n        </td>\r\n      }\r\n    </tr>\r\n  }\r\n</ng-template>\r\n\r\n<ng-template #defaultSortIcon let-direction>\r\n  <span class=\"fu-sort-icon\">\r\n    @if (!direction) {\r\n      <svg\r\n        class=\"fu-sort-icon-default\"\r\n        xmlns=\"http://www.w3.org/2000/svg\"\r\n        width=\"16\"\r\n        height=\"16\"\r\n        viewBox=\"0 0 24 24\"\r\n      >\r\n        <path\r\n          fill=\"none\"\r\n          stroke=\"currentColor\"\r\n          stroke-linecap=\"round\"\r\n          stroke-linejoin=\"round\"\r\n          stroke-width=\"2\"\r\n          d=\"m3 9l4-4l4 4M7 5v14m14-4l-4 4l-4-4m4 4V5\"\r\n        />\r\n      </svg>\r\n    }\r\n\r\n    @if (direction === 'asc') {\r\n      <svg\r\n        class=\"fu-sort-icon-active\"\r\n        xmlns=\"http://www.w3.org/2000/svg\"\r\n        width=\"16\"\r\n        height=\"16\"\r\n        viewBox=\"0 0 24 24\"\r\n      >\r\n        <path\r\n          fill=\"none\"\r\n          stroke=\"currentColor\"\r\n          stroke-linecap=\"round\"\r\n          stroke-linejoin=\"round\"\r\n          stroke-width=\"2\"\r\n          d=\"M4 6h7m-7 6h7m-7 6h9m2-9l3-3l3 3m-3-3v12\"\r\n        />\r\n      </svg>\r\n    }\r\n\r\n    @if (direction === 'desc') {\r\n      <svg\r\n        class=\"fu-sort-icon-active\"\r\n        xmlns=\"http://www.w3.org/2000/svg\"\r\n        width=\"16\"\r\n        height=\"16\"\r\n        viewBox=\"0 0 24 24\"\r\n      >\r\n        <path\r\n          fill=\"none\"\r\n          stroke=\"currentColor\"\r\n          stroke-linecap=\"round\"\r\n          stroke-linejoin=\"round\"\r\n          stroke-width=\"2\"\r\n          d=\"M4 6h9m-9 6h7m-7 6h7m4-3l3 3l3-3m-3-9v12\"\r\n        />\r\n      </svg>\r\n    }\r\n  </span>\r\n</ng-template>\r\n\r\n<ng-template #defaultNoData>\r\n  <div class=\"fu-no-data-default\">{{ intl.noData() }}</div>\r\n</ng-template>\r\n\r\n<ng-template #configSidebar>\r\n  <div class=\"fu-config-sidebar\">\r\n    <div class=\"fu-config-item\">\r\n      <label for=\"responsive\">{{ intl.responsiveLabel() }}</label>\r\n      <input id=\"responsive\" type=\"checkbox\" [(ngModel)]=\"responsiveConfig\" />\r\n    </div>\r\n\r\n    <div class=\"fu-config-item\">\r\n      <label for=\"scrollable\">{{ intl.scrollableLabel() }}</label>\r\n      <input id=\"scrollable\" type=\"checkbox\" [(ngModel)]=\"scrollableConfig\" />\r\n    </div>\r\n\r\n    <div class=\"fu-config-item\">\r\n      <label for=\"stickyHeader\">{{ intl.lockHeaderLabel() }}</label>\r\n      <input\r\n        id=\"stickyHeader\"\r\n        type=\"checkbox\"\r\n        [(ngModel)]=\"stickyHeaderConfig\"\r\n        [disabled]=\"!scrollableConfig()\"\r\n      />\r\n    </div>\r\n\r\n    <div class=\"fu-config-item\">\r\n      <label for=\"stickyFirstColumn\">{{ intl.lockLeftLabel() }}</label>\r\n      <input\r\n        id=\"stickyFirstColumn\"\r\n        type=\"checkbox\"\r\n        [(ngModel)]=\"stickyFirstColumnConfig\"\r\n        [disabled]=\"!scrollableConfig()\"\r\n      />\r\n    </div>\r\n\r\n    <div class=\"fu-config-item\">\r\n      <label for=\"stickyLastColumn\">{{ intl.lockRightLabel() }}</label>\r\n      <input\r\n        id=\"stickyLastColumn\"\r\n        type=\"checkbox\"\r\n        [(ngModel)]=\"stickyLastColumnConfig\"\r\n        [disabled]=\"!scrollableConfig()\"\r\n      />\r\n    </div>\r\n  </div>\r\n</ng-template>\r\n\r\n<ng-template #defaultSidebar>\r\n  <div\r\n    class=\"fu-columns-panel\"\r\n    cdkDropList\r\n    cdkDropListOrientation=\"vertical\"\r\n    (cdkDropListDropped)=\"drop($event)\"\r\n  >\r\n    <div class=\"fu-drag-lock\">\r\n      @for (col of columns(); track col.field()) {\r\n        <div\r\n          class=\"fu-column-item\"\r\n          cdkDrag\r\n          cdkDragLockAxis=\"y\"\r\n          cdkDragBoundary=\".fu-drag-lock\"\r\n          [cdkDragDisabled]=\"!col.reorderable()\"\r\n        >\r\n          <span class=\"fu-drag-handle\" cdkDragHandle>\u2630</span>\r\n\r\n          <span class=\"fu-label\">{{ col.header() }}</span>\r\n\r\n          <input\r\n            type=\"checkbox\"\r\n            [checked]=\"col.visible()\"\r\n            [disabled]=\"\r\n              !col.hideable() || (visibleCount() === 3 && col.visible())\r\n            \"\r\n            (change)=\"toggleVisibility(col)\"\r\n          />\r\n\r\n          <ng-template cdkDragPreview>\r\n            <div class=\"fu-drag-preview\">\r\n              <svg\r\n                class=\"fu-drag-icon\"\r\n                width=\"16px\"\r\n                height=\"16px\"\r\n                fill=\"currentColor\"\r\n                viewBox=\"0 0 25 25\"\r\n              >\r\n                <path\r\n                  d=\"M10 9h4V6h3l-5-5-5 5h3v3zm-1 1H6V7l-5 5 5 5v-3h3v-4zm14 2l-5-5v3h-3v4h3v3l5-5zm-9 3h-4v3H7l5 5 5-5h-3v-3z\"\r\n                ></path>\r\n              </svg>\r\n              <div class=\"fu-drag-label\">{{ col.header() }}</div>\r\n            </div>\r\n          </ng-template>\r\n        </div>\r\n      }\r\n    </div>\r\n  </div>\r\n</ng-template>\r\n", styles: [".fu-table-wrapper{--fu-table-bg: oklch(from var(--fu-surface) l c h);--fu-table-text: oklch(from var(--fu-text) l c h);--fu-table-border: oklch(from var(--fu-border) l c h);--fu-table-input-bg: oklch(from var(--fu-surface) calc(l - .03) c h);--fu-table-header-bg: oklch(from var(--fu-surface) calc(l - .04) c h);--fu-table-header-text: oklch(from var(--fu-text) l c h);--fu-table-header-border: oklch(from var(--fu-border) calc(l - .02) c h);--fu-table-row-bg: oklch(from var(--fu-surface) l c h);--fu-table-row-hover-bg: oklch(from var(--fu-surface) calc(l - .035) c h);--fu-table-row-border: oklch(from var(--fu-border) l c h);--fu-table-row-striped-bg: oklch(from var(--fu-surface) calc(l - .02) c h);--fu-table-row-active-bg: oklch( from var(--fu-accent) calc(l + .3) calc(c/5) h );--fu-table-row-pending-bg: oklch( from var(--fu-warning) calc(l + .25) calc(c/4) h );--fu-table-sticky-shadow: color-mix( in oklch, oklch(from var(--fu-text) .2 0 0) 30%, transparent );--fu-table-sticky-bg: oklch(from var(--fu-surface) calc(l - .05) c h);--fu-table-sticky-border: oklch(from var(--fu-border) calc(l - .08) c h);--fu-skeleton-base: color-mix( in srgb, var(--fu-table-row-bg) 90%, var(--fu-text) 10% );--fu-skeleton-highlight: color-mix( in srgb, var(--fu-table-row-bg) 70%, var(--fu-text) 30% );margin:16px;border:2px solid var(--fu-table-border);font-family:var(--fu-font-family);font-size:var(--fu-font-size)}.fu-table-scroll.fu-scrollable{width:100%;overflow-x:auto;overflow-y:auto}.fu-table-scroll,.fu-table{width:100%}.fu-scrollable{overflow-x:auto;overflow-y:auto}.fu-table-scrollable{width:max-content;min-width:100%;table-layout:auto}.fu-sticky-header thead th{position:sticky;top:0;z-index:20;background:var(--fu-table-sticky-bg);border-bottom:1px solid var(--fu-table-sticky-border)}.fu-sticky-first th:first-child,.fu-sticky-first td:first-child{position:sticky;left:0;z-index:10;background:var(--fu-table-sticky-bg);border-right:1px solid var(--fu-table-sticky-border)}.fu-sticky-header.fu-sticky-first thead th:first-child{z-index:30}.fu-sticky-last th:last-child,.fu-sticky-last td:last-child{position:sticky;right:0;z-index:10;background:var(--fu-table-sticky-bg);border-left:1px solid var(--fu-table-sticky-border)}.fu-sticky-header.fu-sticky-last thead th:last-child{z-index:30}.fu-sticky-first td:first-child{box-shadow:4px 0 6px -2px var(--fu-table-sticky-shadow)}.fu-sticky-last td:last-child{box-shadow:-4px 0 6px -2px var(--fu-table-sticky-shadow)}.fu-sticky-header thead th{box-shadow:0 4px 6px -2px var(--fu-table-sticky-shadow)}table{border-collapse:separate;border-spacing:0}tr{height:42px}th,td{padding:0 8px;background-color:var(--fu-table-bg);color:var(--fu-table-text);border-right:1px solid var(--fu-table-border);border-bottom:1px solid var(--fu-table-border);vertical-align:middle}th{text-align:left;vertical-align:middle}td .fu-icon{display:flex;justify-content:center;align-items:center;transition:transform .15s cubic-bezier(.4,0,.2,1);transform-origin:center}td[data-expand=true] .fu-icon{transform:rotate(90deg)}thead th{background-color:var(--fu-table-header-bg);border-top:2px solid var(--fu-table-border)}tr:nth-child(2n) td{background-color:var(--fu-table-row-striped-bg)}tbody tr:hover td{background-color:var(--fu-table-row-hover-bg)}th.fu-sortable{cursor:pointer;-webkit-user-select:none;user-select:none}th.fu-sortable:hover{background-color:var(--fu-table-row-hover-bg)}tbody td.fu-cell-sorting{font-weight:600}.fu-th-content{display:flex;align-items:center;gap:8px}.fu-header-main{flex:1;display:inline-flex;align-items:center;gap:4px}.fu-header-addon{display:inline-flex;align-items:center;border-color:var(--fu-table-sticky-border)}.fu-paginator{display:flex;align-items:center;justify-content:flex-end;gap:12px;padding:8px 16px;font-size:14px;background-color:var(--fu-table-bg);color:var(--fu-table-text)}.fu-page-info{white-space:nowrap;color:var(--fu-table-text)}.fu-paginator select{height:32px;padding:4px 8px;border:1px solid var(--fu-table-border);border-radius:0;background-color:var(--fu-table-row-striped-bg);cursor:pointer;color:var(--fu-table-text)}.fu-paginator select:focus{border-color:var(--fu-table-sticky-border);outline:none}.fu-search{display:flex;align-items:center;padding:8px 16px;background-color:var(--fu-table-bg);gap:16px}.fu-search input[type=search]{width:25%;max-width:100%;padding:6px 10px;font-size:14px;line-height:1.4;border:1px solid var(--fu-table-border);border-radius:var(--fu-border-radius);background-color:var(--fu-table-row-striped-bg);color:var(--fu-table-text);outline:none;transition:border-color .15s,box-shadow .15s}.fu-search input[type=search]::placeholder{color:#999}.fu-search input[type=search]:focus{border-color:var(--fu-table-sticky-border)}tbody tr.fu-no-data-row td{text-align:center;padding:24px;background-color:var(--fu-table-bg);color:var(--fu-table-text);border-right-color:var(--fu-table-border);height:207px;pointer-events:none}.fu-no-data-default{font-style:italic}.fu-skeleton-row td{padding:10px 8px}.fu-skeleton-cell{height:20px;width:100%;border-radius:4px;background-image:linear-gradient(90deg,var(--fu-skeleton-base) 25%,var(--fu-skeleton-highlight) 37%,var(--fu-skeleton-base) 63%);background-size:400% 100%;animation:skeleton-loading 1.4s ease infinite}@media (prefers-reduced-motion: reduce){.fu-skeleton-cell{animation:none;opacity:.6}}@keyframes skeleton-loading{0%{background-position:100% 50%}to{background-position:0 50%}}tbody tr.fu-cell-error td{animation:flash-error 1.6s ease-out}@keyframes flash-error{0%{background-color:#fecaca}to{background-color:var(--fu-table-bg)}}tbody tr.fu-cell-success td{animation:flash-success 1.6s ease-out}@keyframes flash-success{0%{background-color:#98efa9}to{background-color:var(--fu-table-bg)}}tbody tr td.fu-cell-pending{pointer-events:none;animation:flash-pending 1.4s ease-in-out infinite}@keyframes flash-pending{0%,to{background-color:var(--fu-table-row-bg)}50%{background-color:var(--fu-table-row-pending-bg)}}.fu-table-layout{position:relative}.fu-table-layout.fu-with-sidebar{padding-right:43px}.fu-sidebar{position:absolute;right:0;bottom:0;top:0;width:41.5px;transition:width .25s ease;background-color:var(--fu-table-bg);border:2px solid var(--fu-table-border);border-right:none;overflow:hidden;display:grid;z-index:40}.fu-sidebar.fu-open{min-width:230px}.fu-handle{position:absolute;right:0;background-color:var(--fu-table-bg);height:100%;display:flex;flex-direction:column;align-items:center;gap:8px;padding:4px}.fu-content{border-right:2px solid var(--fu-table-border);overflow-y:auto;width:189px}.fu-columns-panel{display:flex;flex-direction:column;margin:4px 4px 0}.fu-column-item{display:flex;align-items:center;gap:8px;padding:6px 8px;margin-bottom:4px;background:var(--fu-table-header-bg);border:1px solid var(--fu-table-border);border-radius:var(--fu-border-radius)}.fu-column-item:hover{background:var(--fu-table-row-hover-bg)}.fu-column-item .fu-drag-handle{cursor:grab}.fu-config-item{background-color:var(--fu-table-header-bg);border:1px solid var(--fu-table-border)}.fu-config-item label{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.fu-header-text{display:none}@media (max-width: 900px){.fu-table--responsive thead{display:none}.fu-table--responsive tbody{display:block}.fu-table--responsive tr{display:block;height:auto;margin-bottom:4px;border-top:2px solid var(--fu-table-border)}.fu-table--responsive tr.fu-row-expanded{margin-bottom:0}.fu-table--responsive th{display:block}.fu-table--responsive td{display:flex;align-items:center;justify-content:space-between;height:42px;border-bottom:1px solid var(--fu-table-border)}.fu-table--responsive .fu-header-text{display:block}}.fu-outline-1{outline:1px solid var(--fu-table-border)}.fu-expand-cell{color:var(--fu-accent);cursor:pointer}.fu-search-nav{display:flex;gap:8px}.fu-match-counter{display:flex;align-items:center;margin-left:8px}.fu-expand-header{width:40px}.fu-header-addon{border-left:1px solid var(--fu-table-sticky-border);padding-left:8px;margin-left:8px}.fu-paginator-entries{margin-right:auto}.fu-sort-icon{margin-top:4px}.fu-sort-icon-default{color:#c4cbd5}.fu-config-sidebar{display:flex;flex-direction:column;gap:4px;padding:4px}.fu-config-item{display:flex;gap:8px;justify-content:space-between;padding:8px;background-color:var(--fu-table-header-bg)}.fu-config-item:hover{background-color:var(--fu-table-row-hover-bg)}.fu-label{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.fu-drag-preview{display:flex;align-items:center;background-color:var(--fu-table-header-bg);border:1px solid var(--fu-table-border);border-radius:var(--fu-border-radius);box-shadow:0 4px 6px -2px var(--fu-table-sticky-shadow)}.fu-drag-icon{margin:0 8px}.fu-drag-label{padding:8px 12px}.fu-context-menu{background:var(--fu-table-bg);border:1px solid var(--fu-table-border);box-shadow:0 2px 5px #00000059;display:inline-flex;flex-direction:column;min-width:180px;max-width:280px;padding:6px 0}::-webkit-scrollbar{width:8px;height:8px}::-webkit-scrollbar-track{background:var(--fu-table-bg);border-radius:10px}::-webkit-scrollbar-thumb{background:var(--fu-table-border);border-radius:10px}::-webkit-scrollbar-thumb:hover{background:#9ca3af}*{scrollbar-width:thin;scrollbar-color:var(--fu-table-border) var(--fu-table-bg)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: FuCellComponent, selector: "fu-cell", inputs: ["value", "type", "editing", "editable", "searchTerm", "activeMatch", "loading"], outputs: ["valueChange", "cellValueChange"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i2.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i2.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i2.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: DragDropModule }, { kind: "directive", type: i3.CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "cdkDropListData", "cdkDropListOrientation", "id", "cdkDropListLockAxis", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListAutoScrollDisabled", "cdkDropListAutoScrollStep", "cdkDropListElementContainer"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { kind: "directive", type: i3.CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer", "cdkDragScale"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "directive", type: i3.CdkDragHandle, selector: "[cdkDragHandle]", inputs: ["cdkDragHandleDisabled"] }, { kind: "directive", type: i3.CdkDragPreview, selector: "ng-template[cdkDragPreview]", inputs: ["data", "matchSize"] }, { kind: "directive", type: FuClickOutsideDirective, selector: "[fuClickOutside]", outputs: ["fuClickOutside"] }, { kind: "directive", type: CdkContextMenuTrigger, selector: "[cdkContextMenuTriggerFor]", inputs: ["cdkContextMenuTriggerFor", "cdkContextMenuPosition", "cdkContextMenuTriggerData", "cdkContextMenuDisabled"], outputs: ["cdkContextMenuOpened", "cdkContextMenuClosed"], exportAs: ["cdkContextMenuTriggerFor"] }, { kind: "directive", type: FuButtonDirective, selector: "button[fuButton], a[fuButton]", inputs: ["variant", "severity", "loading", "disabled"] }, { kind: "directive", type: CdkMenu, selector: "[cdkMenu]", outputs: ["closed"], exportAs: ["cdkMenu"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.6", ngImport: i0, type: FuTableComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'fu-table', imports: [
+                        CommonModule,
+                        FuCellComponent,
+                        FormsModule,
+                        DragDropModule,
+                        FuClickOutsideDirective,
+                        CdkContextMenuTrigger,
+                        FuButtonDirective,
+                        CdkMenu,
+                    ], template: "<div class=\"fu-table-wrapper\">\r\n  @if (filterPanel()) {\r\n    <div class=\"fu-search\">\r\n      <input\r\n        type=\"search\"\r\n        [placeholder]=\"intl.searchPlaceholder()\"\r\n        [value]=\"searchTerm()\"\r\n        (input)=\"onSearch($any($event.target).value)\"\r\n      />\r\n      <div class=\"fu-search-nav\">\r\n        <button fuButton (click)=\"prevMatch()\">\r\n          {{ intl.previous() }}\r\n        </button>\r\n        <button fuButton (click)=\"nextMatch()\">\r\n          {{ intl.next() }}\r\n        </button>\r\n        @if (searchMatches().length > 0) {\r\n          <span class=\"fu-match-counter\">\r\n            {{ activeMatchIndex() + 1 }} / {{ searchMatches().length }}\r\n          </span>\r\n        }\r\n      </div>\r\n    </div>\r\n  }\r\n\r\n  <div\r\n    class=\"fu-table-layout\"\r\n    [class.fu-with-sidebar]=\"configPanel() || sidebarTemplate()\"\r\n  >\r\n    <div\r\n      #scrollContainer\r\n      class=\"fu-table-scroll\"\r\n      [class.fu-scrollable]=\"scrollableConfig()\"\r\n      [style.max-height.vh]=\"scrollHeightConfig()\"\r\n    >\r\n      <table\r\n        class=\"fu-table\"\r\n        [class.fu-table--responsive]=\"responsiveConfig()\"\r\n        [class.fu-table-scrollable]=\"scrollableConfig()\"\r\n        [class.fu-sticky-header]=\"stickyHeaderConfig()\"\r\n        [class.fu-sticky-first]=\"stickyFirstColumnConfig()\"\r\n        [class.fu-sticky-last]=\"stickyLastColumnConfig()\"\r\n      >\r\n        <thead>\r\n          <tr>\r\n            @if (expandRowTemplate()) {\r\n              <th class=\"fu-expand-header\"></th>\r\n            }\r\n            <!--  -->\r\n            @for (col of visibleColumns(); track $index) {\r\n              <th\r\n                (click)=\"onSort(col, $event)\"\r\n                [class.fu-sortable]=\"col.sortable()\"\r\n                [style.width]=\"col.width()\"\r\n              >\r\n                <div class=\"fu-th-content\">\r\n                  @if (col.columnHeaderTemplate()) {\r\n                    <ng-container\r\n                      [ngTemplateOutlet]=\"col.columnHeaderTemplate()!\"\r\n                      [ngTemplateOutletContext]=\"{ index: $index }\"\r\n                    />\r\n                    @if (col.sortable()) {\r\n                      <ng-container\r\n                        [ngTemplateOutlet]=\"defaultSortIcon\"\r\n                        [ngTemplateOutletContext]=\"{\r\n                          $implicit: col.sortDirection(),\r\n                        }\"\r\n                      />\r\n                    }\r\n                  } @else {\r\n                    <span class=\"fu-header-main\">\r\n                      {{ col.header() }}\r\n\r\n                      @if (col.sortable()) {\r\n                        <ng-container\r\n                          [ngTemplateOutlet]=\"defaultSortIcon\"\r\n                          [ngTemplateOutletContext]=\"{\r\n                            $implicit: col.sortDirection(),\r\n                          }\"\r\n                        />\r\n                      }\r\n                    </span>\r\n                  }\r\n                  <!--  -->\r\n                  @if (col.columnHeaderAddonTemplate()) {\r\n                    <span class=\"fu-header-addon\">\r\n                      <ng-container\r\n                        [ngTemplateOutlet]=\"col.columnHeaderAddonTemplate()!\"\r\n                        [ngTemplateOutletContext]=\"{ index: $index }\"\r\n                      />\r\n                    </span>\r\n                  }\r\n                </div>\r\n              </th>\r\n            }\r\n          </tr>\r\n        </thead>\r\n\r\n        <tbody>\r\n          @if (loading() && pendingSaveRowIndex() === null) {\r\n            <ng-container [ngTemplateOutlet]=\"loadingTemplate\" />\r\n          } @else {\r\n            <!--  -->\r\n            @for (row of visibleRows(); let rowIndex = $index; track rowIndex) {\r\n              <tr\r\n                #contextTrigger=\"cdkContextMenuTriggerFor\"\r\n                [cdkContextMenuTriggerFor]=\"rowContextMenu\"\r\n                [cdkContextMenuTriggerData]=\"{\r\n                  row,\r\n                  index: rowIndex,\r\n                  trigger: contextTrigger,\r\n                }\"\r\n                [cdkContextMenuDisabled]=\"!rowContextMenuTemplate()\"\r\n                [class.fu-cell-success]=\"\r\n                  rowStates.get(rowIndex) === 'success' && !loading()\r\n                \"\r\n                [class.fu-cell-error]=\"\r\n                  rowStates.get(rowIndex) === 'error' && !loading()\r\n                \"\r\n                [class.fu-row-expanded]=\"expandIndex() === rowIndex\"\r\n                [attr.data-row-index]=\"rowIndex\"\r\n                [class]=\"rowClass() ? rowClass()!(row, rowIndex) : ''\"\r\n                (animationend)=\"onEditAnimationEnd()\"\r\n                (click)=\"onRowClick(row, $event)\"\r\n              >\r\n                @if (expandRowTemplate()) {\r\n                  <td\r\n                    class=\"fu-expand-cell\"\r\n                    [attr.data-expand]=\"expandIndex() === rowIndex\"\r\n                    (click)=\"toggleExpand(rowIndex, $event)\"\r\n                  >\r\n                    <span class=\"fu-icon\">\r\n                      <svg\r\n                        xmlns=\"http://www.w3.org/2000/svg\"\r\n                        width=\"24\"\r\n                        height=\"24\"\r\n                        viewBox=\"0 0 24 24\"\r\n                      >\r\n                        <path\r\n                          fill=\"currentColor\"\r\n                          d=\"M10 6L8.59 7.41L13.17 12l-4.58 4.59L10 18l6-6z\"\r\n                        />\r\n                      </svg>\r\n                    </span>\r\n                  </td>\r\n                }\r\n                <!--  -->\r\n                @for (\r\n                  col of visibleColumns();\r\n                  let colIndex = $index;\r\n                  track colIndex\r\n                ) {\r\n                  @let isMatch = isActiveMatch(rowIndex, col);\r\n\r\n                  <td\r\n                    [class.fu-cell-pending]=\"\r\n                      rowStates.get(rowIndex) === 'pending' && loading()\r\n                    \"\r\n                    [class.fu-cell-editing]=\"editingRowIndex() === rowIndex\"\r\n                    [class.fu-cell-sorting]=\"\r\n                      col.sortable() && col.sortDirection() !== null\r\n                    \"\r\n                    [class.fu-active-match]=\"isMatch\"\r\n                  >\r\n                    <div class=\"fu-header-text\">\r\n                      {{ col.header() }}\r\n                    </div>\r\n\r\n                    @if (col.columnCellTemplate()) {\r\n                      <ng-container\r\n                        [ngTemplateOutlet]=\"col.columnCellTemplate()!\"\r\n                        [ngTemplateOutletContext]=\"{\r\n                          $implicit: getCellValue(row, col.field()),\r\n                          row: row,\r\n                          index: rowIndex,\r\n                          searchTerm: searchTerm(),\r\n                          activeMatch: isMatch,\r\n                        }\"\r\n                        }\r\n                      />\r\n                    } @else if (col.columnActionsTemplate()) {\r\n                      <ng-container\r\n                        [ngTemplateOutlet]=\"col.columnActionsTemplate()!\"\r\n                        [ngTemplateOutletContext]=\"{\r\n                          row: row,\r\n                          index: rowIndex,\r\n                          editing: editingRowIndex() === rowIndex,\r\n                          startEdit: startEditRow.bind(this),\r\n                          saveEdit: saveEditRow.bind(this),\r\n                          cancelEdit: cancelEditRow.bind(this),\r\n                          toggleExpand: toggleExpand.bind(this),\r\n                        }\"\r\n                        }\r\n                      />\r\n                    } @else {\r\n                      <fu-cell\r\n                        [type]=\"col.type()\"\r\n                        [searchTerm]=\"searchTerm()\"\r\n                        [editable]=\"col.editable()\"\r\n                        [value]=\"getCellValue(row, col.field())\"\r\n                        [activeMatch]=\"isMatch\"\r\n                        [editing]=\"editingRowIndex() === rowIndex\"\r\n                        (cellValueChange)=\"onCellChange(row, col, $event)\"\r\n                      />\r\n                    }\r\n                  </td>\r\n                }\r\n              </tr>\r\n\r\n              @if (expandIndex() === rowIndex) {\r\n                <tr>\r\n                  <td [attr.colspan]=\"columns().length + 1\">\r\n                    <ng-container\r\n                      [ngTemplateOutlet]=\"expandRowTemplate()!\"\r\n                      [ngTemplateOutletContext]=\"{\r\n                        $implicit: row,\r\n                        index: rowIndex,\r\n                        searchTerm: searchTerm,\r\n                      }\"\r\n                    />\r\n                  </td>\r\n                </tr>\r\n              }\r\n            } @empty {\r\n              <tr class=\"fu-no-data-row\">\r\n                <td [attr.colspan]=\"columns().length + 1\">\r\n                  <ng-container\r\n                    [ngTemplateOutlet]=\"noDataTemplate() ?? defaultNoData\"\r\n                  />\r\n                </td>\r\n              </tr>\r\n            }\r\n          }\r\n        </tbody>\r\n      </table>\r\n    </div>\r\n\r\n    @if (configPanel() || sidebarTemplate()) {\r\n      <div\r\n        class=\"fu-sidebar\"\r\n        [class.fu-open]=\"isSidebarOpen()\"\r\n        (fuClickOutside)=\"activeSidebarPanel.set(null)\"\r\n      >\r\n        @if (isSidebarOpen()) {\r\n          <div class=\"fu-content\">\r\n            @if (isColumnsOpen()) {\r\n              <ng-container [ngTemplateOutlet]=\"defaultSidebar\" />\r\n            } @else if (isLayoutOpen()) {\r\n              <ng-container [ngTemplateOutlet]=\"configSidebar\" />\r\n            } @else if (isCustomOpen()) {\r\n              <ng-container [ngTemplateOutlet]=\"sidebarTemplate()!\" />\r\n            }\r\n          </div>\r\n        }\r\n\r\n        <div class=\"fu-handle\">\r\n          @if (configPanel()) {\r\n            <button\r\n              fuButton\r\n              variant=\"icon\"\r\n              severity=\"success\"\r\n              (click)=\"toggleColumnsPanel()\"\r\n            >\r\n              <svg\r\n                xmlns=\"http://www.w3.org/2000/svg\"\r\n                width=\"24\"\r\n                height=\"24\"\r\n                viewBox=\"0 0 24 24\"\r\n              >\r\n                <path\r\n                  fill=\"currentColor\"\r\n                  d=\"M3.25 3a.75.75 0 0 0 0 1.5h.5C4.44 4.5 5 5.06 5 5.75v12.5c0 .69-.56 1.25-1.25 1.25h-.5a.75.75 0 0 0 0 1.5h.5a2.75 2.75 0 0 0 2.75-2.75V5.75A2.75 2.75 0 0 0 3.75 3zm7.5 0A2.75 2.75 0 0 0 8 5.75v12.5A2.75 2.75 0 0 0 10.75 21h.415l.356-1.423l.02-.077h-.791c-.69 0-1.25-.56-1.25-1.25V5.75c0-.69.56-1.25 1.25-1.25h2.5c.69 0 1.25.56 1.25 1.25v10.105l1.5-1.5V5.75A2.75 2.75 0 0 0 13.25 3zM19 11.483q-.325.198-.607.48l-.893.892V5.75A2.75 2.75 0 0 1 20.25 3h.5a.75.75 0 0 1 0 1.5h-.5c-.69 0-1.25.56-1.25 1.25zm.1 1.186l-5.903 5.903a2.7 2.7 0 0 0-.706 1.247l-.458 1.831a1.087 1.087 0 0 0 1.319 1.318l1.83-.457a2.7 2.7 0 0 0 1.248-.707l5.902-5.902A2.286 2.286 0 0 0 19.1 12.67\"\r\n                />\r\n              </svg>\r\n            </button>\r\n            <button\r\n              fuButton\r\n              variant=\"icon\"\r\n              severity=\"warning\"\r\n              (click)=\"toggleLayoutPanel()\"\r\n            >\r\n              <svg\r\n                xmlns=\"http://www.w3.org/2000/svg\"\r\n                width=\"24\"\r\n                height=\"24\"\r\n                viewBox=\"0 0 24 24\"\r\n              >\r\n                <path\r\n                  fill=\"currentColor\"\r\n                  d=\"M21 13.1c-.1 0-.3.1-.4.2l-1 1l2.1 2.1l1-1c.2-.2.2-.6 0-.8l-1.3-1.3c-.1-.1-.2-.2-.4-.2m-1.9 1.8l-6.1 6V23h2.1l6.1-6.1zM21 3h-8v6h8zm-2 4h-4V5h4zm-6 11.06V11h8v.1c-.76 0-1.43.4-1.81.79L18.07 13H15v3.07zM11 3H3v10h8zm-2 8H5V5h4zm2 9.06V15H3v6h8zM9 19H5v-2h4z\"\r\n                />\r\n              </svg>\r\n            </button>\r\n          }\r\n          @if (sidebarTemplate()) {\r\n            <button\r\n              fuButton\r\n              variant=\"icon\"\r\n              severity=\"danger\"\r\n              (click)=\"toggleCustomPanel()\"\r\n            >\r\n              <svg\r\n                xmlns=\"http://www.w3.org/2000/svg\"\r\n                width=\"24\"\r\n                height=\"24\"\r\n                viewBox=\"0 0 24 24\"\r\n              >\r\n                <path\r\n                  fill=\"currentColor\"\r\n                  d=\"M12 16c1.1 0 2 .9 2 2s-.9 2-2 2s-2-.9-2-2s.9-2 2-2m0-6c1.1 0 2 .9 2 2s-.9 2-2 2s-2-.9-2-2s.9-2 2-2m0-6c1.1 0 2 .9 2 2s-.9 2-2 2s-2-.9-2-2s.9-2 2-2M6 16c1.1 0 2 .9 2 2s-.9 2-2 2s-2-.9-2-2s.9-2 2-2m0-6c1.1 0 2 .9 2 2s-.9 2-2 2s-2-.9-2-2s.9-2 2-2m0-6c1.1 0 2 .9 2 2s-.9 2-2 2s-2-.9-2-2s.9-2 2-2m12 12c1.1 0 2 .9 2 2s-.9 2-2 2s-2-.9-2-2s.9-2 2-2m0-6c1.1 0 2 .9 2 2s-.9 2-2 2s-2-.9-2-2s.9-2 2-2m0-6c1.1 0 2 .9 2 2s-.9 2-2 2s-2-.9-2-2s.9-2 2-2\"\r\n                />\r\n              </svg>\r\n            </button>\r\n          }\r\n        </div>\r\n      </div>\r\n    }\r\n  </div>\r\n\r\n  @if (paginator()) {\r\n    <div class=\"fu-paginator\">\r\n      <div class=\"fu-paginator-entries\">\r\n        {{ entriesLabel() }}\r\n      </div>\r\n\r\n      <button\r\n        fuButton\r\n        variant=\"icon\"\r\n        (click)=\"prevPage()\"\r\n        [disabled]=\"pageIndex() === 0 || disablePaginator()\"\r\n      >\r\n        <svg\r\n          xmlns=\"http://www.w3.org/2000/svg\"\r\n          width=\"24\"\r\n          height=\"24\"\r\n          viewBox=\"0 0 24 24\"\r\n        >\r\n          <path\r\n            fill=\"none\"\r\n            stroke=\"currentColor\"\r\n            stroke-linecap=\"round\"\r\n            stroke-linejoin=\"round\"\r\n            stroke-width=\"1.5\"\r\n            d=\"m14 7l-5 5l5 5\"\r\n          />\r\n        </svg>\r\n      </button>\r\n\r\n      <span class=\"fu-page-info\">\r\n        {{ intl.pageLabel() }} {{ pageIndex() + 1 }} {{ intl.ofLabel() }}\r\n        {{ totalPages() }}\r\n      </span>\r\n\r\n      <button\r\n        fuButton\r\n        variant=\"icon\"\r\n        (click)=\"nextPage()\"\r\n        [disabled]=\"pageIndex() >= totalPages() - 1 || disablePaginator()\"\r\n      >\r\n        <svg\r\n          xmlns=\"http://www.w3.org/2000/svg\"\r\n          width=\"24\"\r\n          height=\"24\"\r\n          viewBox=\"0 0 24 24\"\r\n        >\r\n          <path\r\n            fill=\"none\"\r\n            stroke=\"currentColor\"\r\n            stroke-linecap=\"round\"\r\n            stroke-linejoin=\"round\"\r\n            stroke-width=\"1.5\"\r\n            d=\"m10 17l5-5l-5-5\"\r\n          />\r\n        </svg>\r\n      </button>\r\n\r\n      <select [(ngModel)]=\"pageSize\" (ngModelChange)=\"onPageSizeChange($event)\">\r\n        @for (size of pageSizeOptions(); track size) {\r\n          <option class=\"fu-option\" [value]=\"size\">{{ size }}</option>\r\n        }\r\n      </select>\r\n    </div>\r\n  }\r\n</div>\r\n\r\n<ng-template\r\n  #rowContextMenu\r\n  let-row=\"row\"\r\n  let-index=\"index\"\r\n  let-trigger=\"trigger\"\r\n>\r\n  <div cdkMenu>\r\n    <ng-container\r\n      *ngTemplateOutlet=\"\r\n        rowContextMenuTemplate()!;\r\n        context: { row, index, trigger }\r\n      \"\r\n    />\r\n  </div>\r\n</ng-template>\r\n\r\n<ng-template #loadingTemplate>\r\n  @for (\r\n    i of [].constructor(skeletonRowCount());\r\n    let rowIndex = $index;\r\n    track rowIndex\r\n  ) {\r\n    <tr class=\"fu-skeleton-row\">\r\n      @for (\r\n        j of [].constructor(skeletonColumnCount());\r\n        let colIndex = $index;\r\n        track colIndex\r\n      ) {\r\n        <td>\r\n          <div class=\"fu-skeleton-cell\"></div>\r\n        </td>\r\n      }\r\n    </tr>\r\n  }\r\n</ng-template>\r\n\r\n<ng-template #defaultSortIcon let-direction>\r\n  <span class=\"fu-sort-icon\">\r\n    @if (!direction) {\r\n      <svg\r\n        class=\"fu-sort-icon-default\"\r\n        xmlns=\"http://www.w3.org/2000/svg\"\r\n        width=\"16\"\r\n        height=\"16\"\r\n        viewBox=\"0 0 24 24\"\r\n      >\r\n        <path\r\n          fill=\"none\"\r\n          stroke=\"currentColor\"\r\n          stroke-linecap=\"round\"\r\n          stroke-linejoin=\"round\"\r\n          stroke-width=\"2\"\r\n          d=\"m3 9l4-4l4 4M7 5v14m14-4l-4 4l-4-4m4 4V5\"\r\n        />\r\n      </svg>\r\n    }\r\n\r\n    @if (direction === 'asc') {\r\n      <svg\r\n        class=\"fu-sort-icon-active\"\r\n        xmlns=\"http://www.w3.org/2000/svg\"\r\n        width=\"16\"\r\n        height=\"16\"\r\n        viewBox=\"0 0 24 24\"\r\n      >\r\n        <path\r\n          fill=\"none\"\r\n          stroke=\"currentColor\"\r\n          stroke-linecap=\"round\"\r\n          stroke-linejoin=\"round\"\r\n          stroke-width=\"2\"\r\n          d=\"M4 6h7m-7 6h7m-7 6h9m2-9l3-3l3 3m-3-3v12\"\r\n        />\r\n      </svg>\r\n    }\r\n\r\n    @if (direction === 'desc') {\r\n      <svg\r\n        class=\"fu-sort-icon-active\"\r\n        xmlns=\"http://www.w3.org/2000/svg\"\r\n        width=\"16\"\r\n        height=\"16\"\r\n        viewBox=\"0 0 24 24\"\r\n      >\r\n        <path\r\n          fill=\"none\"\r\n          stroke=\"currentColor\"\r\n          stroke-linecap=\"round\"\r\n          stroke-linejoin=\"round\"\r\n          stroke-width=\"2\"\r\n          d=\"M4 6h9m-9 6h7m-7 6h7m4-3l3 3l3-3m-3-9v12\"\r\n        />\r\n      </svg>\r\n    }\r\n  </span>\r\n</ng-template>\r\n\r\n<ng-template #defaultNoData>\r\n  <div class=\"fu-no-data-default\">{{ intl.noData() }}</div>\r\n</ng-template>\r\n\r\n<ng-template #configSidebar>\r\n  <div class=\"fu-config-sidebar\">\r\n    <div class=\"fu-config-item\">\r\n      <label for=\"responsive\">{{ intl.responsiveLabel() }}</label>\r\n      <input id=\"responsive\" type=\"checkbox\" [(ngModel)]=\"responsiveConfig\" />\r\n    </div>\r\n\r\n    <div class=\"fu-config-item\">\r\n      <label for=\"scrollable\">{{ intl.scrollableLabel() }}</label>\r\n      <input id=\"scrollable\" type=\"checkbox\" [(ngModel)]=\"scrollableConfig\" />\r\n    </div>\r\n\r\n    <div class=\"fu-config-item\">\r\n      <label for=\"stickyHeader\">{{ intl.lockHeaderLabel() }}</label>\r\n      <input\r\n        id=\"stickyHeader\"\r\n        type=\"checkbox\"\r\n        [(ngModel)]=\"stickyHeaderConfig\"\r\n        [disabled]=\"!scrollableConfig()\"\r\n      />\r\n    </div>\r\n\r\n    <div class=\"fu-config-item\">\r\n      <label for=\"stickyFirstColumn\">{{ intl.lockLeftLabel() }}</label>\r\n      <input\r\n        id=\"stickyFirstColumn\"\r\n        type=\"checkbox\"\r\n        [(ngModel)]=\"stickyFirstColumnConfig\"\r\n        [disabled]=\"!scrollableConfig()\"\r\n      />\r\n    </div>\r\n\r\n    <div class=\"fu-config-item\">\r\n      <label for=\"stickyLastColumn\">{{ intl.lockRightLabel() }}</label>\r\n      <input\r\n        id=\"stickyLastColumn\"\r\n        type=\"checkbox\"\r\n        [(ngModel)]=\"stickyLastColumnConfig\"\r\n        [disabled]=\"!scrollableConfig()\"\r\n      />\r\n    </div>\r\n  </div>\r\n</ng-template>\r\n\r\n<ng-template #defaultSidebar>\r\n  <div\r\n    class=\"fu-columns-panel\"\r\n    cdkDropList\r\n    cdkDropListOrientation=\"vertical\"\r\n    (cdkDropListDropped)=\"drop($event)\"\r\n  >\r\n    <div class=\"fu-drag-lock\">\r\n      @for (col of columns(); track col.field()) {\r\n        <div\r\n          class=\"fu-column-item\"\r\n          cdkDrag\r\n          cdkDragLockAxis=\"y\"\r\n          cdkDragBoundary=\".fu-drag-lock\"\r\n          [cdkDragDisabled]=\"!col.reorderable()\"\r\n        >\r\n          <span class=\"fu-drag-handle\" cdkDragHandle>\u2630</span>\r\n\r\n          <span class=\"fu-label\">{{ col.header() }}</span>\r\n\r\n          <input\r\n            type=\"checkbox\"\r\n            [checked]=\"col.visible()\"\r\n            [disabled]=\"\r\n              !col.hideable() || (visibleCount() === 3 && col.visible())\r\n            \"\r\n            (change)=\"toggleVisibility(col)\"\r\n          />\r\n\r\n          <ng-template cdkDragPreview>\r\n            <div class=\"fu-drag-preview\">\r\n              <svg\r\n                class=\"fu-drag-icon\"\r\n                width=\"16px\"\r\n                height=\"16px\"\r\n                fill=\"currentColor\"\r\n                viewBox=\"0 0 25 25\"\r\n              >\r\n                <path\r\n                  d=\"M10 9h4V6h3l-5-5-5 5h3v3zm-1 1H6V7l-5 5 5 5v-3h3v-4zm14 2l-5-5v3h-3v4h3v3l5-5zm-9 3h-4v3H7l5 5 5-5h-3v-3z\"\r\n                ></path>\r\n              </svg>\r\n              <div class=\"fu-drag-label\">{{ col.header() }}</div>\r\n            </div>\r\n          </ng-template>\r\n        </div>\r\n      }\r\n    </div>\r\n  </div>\r\n</ng-template>\r\n", styles: [".fu-table-wrapper{--fu-table-bg: oklch(from var(--fu-surface) l c h);--fu-table-text: oklch(from var(--fu-text) l c h);--fu-table-border: oklch(from var(--fu-border) l c h);--fu-table-input-bg: oklch(from var(--fu-surface) calc(l - .03) c h);--fu-table-header-bg: oklch(from var(--fu-surface) calc(l - .04) c h);--fu-table-header-text: oklch(from var(--fu-text) l c h);--fu-table-header-border: oklch(from var(--fu-border) calc(l - .02) c h);--fu-table-row-bg: oklch(from var(--fu-surface) l c h);--fu-table-row-hover-bg: oklch(from var(--fu-surface) calc(l - .035) c h);--fu-table-row-border: oklch(from var(--fu-border) l c h);--fu-table-row-striped-bg: oklch(from var(--fu-surface) calc(l - .02) c h);--fu-table-row-active-bg: oklch( from var(--fu-accent) calc(l + .3) calc(c/5) h );--fu-table-row-pending-bg: oklch( from var(--fu-warning) calc(l + .25) calc(c/4) h );--fu-table-sticky-shadow: color-mix( in oklch, oklch(from var(--fu-text) .2 0 0) 30%, transparent );--fu-table-sticky-bg: oklch(from var(--fu-surface) calc(l - .05) c h);--fu-table-sticky-border: oklch(from var(--fu-border) calc(l - .08) c h);--fu-skeleton-base: color-mix( in srgb, var(--fu-table-row-bg) 90%, var(--fu-text) 10% );--fu-skeleton-highlight: color-mix( in srgb, var(--fu-table-row-bg) 70%, var(--fu-text) 30% );margin:16px;border:2px solid var(--fu-table-border);font-family:var(--fu-font-family);font-size:var(--fu-font-size)}.fu-table-scroll.fu-scrollable{width:100%;overflow-x:auto;overflow-y:auto}.fu-table-scroll,.fu-table{width:100%}.fu-scrollable{overflow-x:auto;overflow-y:auto}.fu-table-scrollable{width:max-content;min-width:100%;table-layout:auto}.fu-sticky-header thead th{position:sticky;top:0;z-index:20;background:var(--fu-table-sticky-bg);border-bottom:1px solid var(--fu-table-sticky-border)}.fu-sticky-first th:first-child,.fu-sticky-first td:first-child{position:sticky;left:0;z-index:10;background:var(--fu-table-sticky-bg);border-right:1px solid var(--fu-table-sticky-border)}.fu-sticky-header.fu-sticky-first thead th:first-child{z-index:30}.fu-sticky-last th:last-child,.fu-sticky-last td:last-child{position:sticky;right:0;z-index:10;background:var(--fu-table-sticky-bg);border-left:1px solid var(--fu-table-sticky-border)}.fu-sticky-header.fu-sticky-last thead th:last-child{z-index:30}.fu-sticky-first td:first-child{box-shadow:4px 0 6px -2px var(--fu-table-sticky-shadow)}.fu-sticky-last td:last-child{box-shadow:-4px 0 6px -2px var(--fu-table-sticky-shadow)}.fu-sticky-header thead th{box-shadow:0 4px 6px -2px var(--fu-table-sticky-shadow)}table{border-collapse:separate;border-spacing:0}tr{height:42px}th,td{padding:0 8px;background-color:var(--fu-table-bg);color:var(--fu-table-text);border-right:1px solid var(--fu-table-border);border-bottom:1px solid var(--fu-table-border);vertical-align:middle}th{text-align:left;vertical-align:middle}td .fu-icon{display:flex;justify-content:center;align-items:center;transition:transform .15s cubic-bezier(.4,0,.2,1);transform-origin:center}td[data-expand=true] .fu-icon{transform:rotate(90deg)}thead th{background-color:var(--fu-table-header-bg);border-top:2px solid var(--fu-table-border)}tr:nth-child(2n) td{background-color:var(--fu-table-row-striped-bg)}tbody tr:hover td{background-color:var(--fu-table-row-hover-bg)}th.fu-sortable{cursor:pointer;-webkit-user-select:none;user-select:none}th.fu-sortable:hover{background-color:var(--fu-table-row-hover-bg)}tbody td.fu-cell-sorting{font-weight:600}.fu-th-content{display:flex;align-items:center;gap:8px}.fu-header-main{flex:1;display:inline-flex;align-items:center;gap:4px}.fu-header-addon{display:inline-flex;align-items:center;border-color:var(--fu-table-sticky-border)}.fu-paginator{display:flex;align-items:center;justify-content:flex-end;gap:12px;padding:8px 16px;font-size:14px;background-color:var(--fu-table-bg);color:var(--fu-table-text)}.fu-page-info{white-space:nowrap;color:var(--fu-table-text)}.fu-paginator select{height:32px;padding:4px 8px;border:1px solid var(--fu-table-border);border-radius:0;background-color:var(--fu-table-row-striped-bg);cursor:pointer;color:var(--fu-table-text)}.fu-paginator select:focus{border-color:var(--fu-table-sticky-border);outline:none}.fu-search{display:flex;align-items:center;padding:8px 16px;background-color:var(--fu-table-bg);gap:16px}.fu-search input[type=search]{width:25%;max-width:100%;padding:6px 10px;font-size:14px;line-height:1.4;border:1px solid var(--fu-table-border);border-radius:var(--fu-border-radius);background-color:var(--fu-table-row-striped-bg);color:var(--fu-table-text);outline:none;transition:border-color .15s,box-shadow .15s}.fu-search input[type=search]::placeholder{color:#999}.fu-search input[type=search]:focus{border-color:var(--fu-table-sticky-border)}tbody tr.fu-no-data-row td{text-align:center;padding:24px;background-color:var(--fu-table-bg);color:var(--fu-table-text);border-right-color:var(--fu-table-border);height:207px;pointer-events:none}.fu-no-data-default{font-style:italic}.fu-skeleton-row td{padding:10px 8px}.fu-skeleton-cell{height:20px;width:100%;border-radius:4px;background-image:linear-gradient(90deg,var(--fu-skeleton-base) 25%,var(--fu-skeleton-highlight) 37%,var(--fu-skeleton-base) 63%);background-size:400% 100%;animation:skeleton-loading 1.4s ease infinite}@media (prefers-reduced-motion: reduce){.fu-skeleton-cell{animation:none;opacity:.6}}@keyframes skeleton-loading{0%{background-position:100% 50%}to{background-position:0 50%}}tbody tr.fu-cell-error td{animation:flash-error 1.6s ease-out}@keyframes flash-error{0%{background-color:#fecaca}to{background-color:var(--fu-table-bg)}}tbody tr.fu-cell-success td{animation:flash-success 1.6s ease-out}@keyframes flash-success{0%{background-color:#98efa9}to{background-color:var(--fu-table-bg)}}tbody tr td.fu-cell-pending{pointer-events:none;animation:flash-pending 1.4s ease-in-out infinite}@keyframes flash-pending{0%,to{background-color:var(--fu-table-row-bg)}50%{background-color:var(--fu-table-row-pending-bg)}}.fu-table-layout{position:relative}.fu-table-layout.fu-with-sidebar{padding-right:43px}.fu-sidebar{position:absolute;right:0;bottom:0;top:0;width:41.5px;transition:width .25s ease;background-color:var(--fu-table-bg);border:2px solid var(--fu-table-border);border-right:none;overflow:hidden;display:grid;z-index:40}.fu-sidebar.fu-open{min-width:230px}.fu-handle{position:absolute;right:0;background-color:var(--fu-table-bg);height:100%;display:flex;flex-direction:column;align-items:center;gap:8px;padding:4px}.fu-content{border-right:2px solid var(--fu-table-border);overflow-y:auto;width:189px}.fu-columns-panel{display:flex;flex-direction:column;margin:4px 4px 0}.fu-column-item{display:flex;align-items:center;gap:8px;padding:6px 8px;margin-bottom:4px;background:var(--fu-table-header-bg);border:1px solid var(--fu-table-border);border-radius:var(--fu-border-radius)}.fu-column-item:hover{background:var(--fu-table-row-hover-bg)}.fu-column-item .fu-drag-handle{cursor:grab}.fu-config-item{background-color:var(--fu-table-header-bg);border:1px solid var(--fu-table-border)}.fu-config-item label{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.fu-header-text{display:none}@media (max-width: 900px){.fu-table--responsive thead{display:none}.fu-table--responsive tbody{display:block}.fu-table--responsive tr{display:block;height:auto;margin-bottom:4px;border-top:2px solid var(--fu-table-border)}.fu-table--responsive tr.fu-row-expanded{margin-bottom:0}.fu-table--responsive th{display:block}.fu-table--responsive td{display:flex;align-items:center;justify-content:space-between;height:42px;border-bottom:1px solid var(--fu-table-border)}.fu-table--responsive .fu-header-text{display:block}}.fu-outline-1{outline:1px solid var(--fu-table-border)}.fu-expand-cell{color:var(--fu-accent);cursor:pointer}.fu-search-nav{display:flex;gap:8px}.fu-match-counter{display:flex;align-items:center;margin-left:8px}.fu-expand-header{width:40px}.fu-header-addon{border-left:1px solid var(--fu-table-sticky-border);padding-left:8px;margin-left:8px}.fu-paginator-entries{margin-right:auto}.fu-sort-icon{margin-top:4px}.fu-sort-icon-default{color:#c4cbd5}.fu-config-sidebar{display:flex;flex-direction:column;gap:4px;padding:4px}.fu-config-item{display:flex;gap:8px;justify-content:space-between;padding:8px;background-color:var(--fu-table-header-bg)}.fu-config-item:hover{background-color:var(--fu-table-row-hover-bg)}.fu-label{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.fu-drag-preview{display:flex;align-items:center;background-color:var(--fu-table-header-bg);border:1px solid var(--fu-table-border);border-radius:var(--fu-border-radius);box-shadow:0 4px 6px -2px var(--fu-table-sticky-shadow)}.fu-drag-icon{margin:0 8px}.fu-drag-label{padding:8px 12px}.fu-context-menu{background:var(--fu-table-bg);border:1px solid var(--fu-table-border);box-shadow:0 2px 5px #00000059;display:inline-flex;flex-direction:column;min-width:180px;max-width:280px;padding:6px 0}::-webkit-scrollbar{width:8px;height:8px}::-webkit-scrollbar-track{background:var(--fu-table-bg);border-radius:10px}::-webkit-scrollbar-thumb{background:var(--fu-table-border);border-radius:10px}::-webkit-scrollbar-thumb:hover{background:#9ca3af}*{scrollbar-width:thin;scrollbar-color:var(--fu-table-border) var(--fu-table-bg)}\n"] }]
+        }], ctorParameters: () => [{ type: i0.Injector }] });
+
+/**
+ * Defines a custom cell template for a `fu-column`.
+ *
+ * The template context exposes:
+ * - `value` – the current cell value
+ * - `row` – the current row data
+ * - `index` – row index
+ * - `searchTerm` – current search term
+ * - `activeMatch` – whether this cell matches the active search match
+ *
+ * ## Typing
+ * To enable strong typing for `row`, provide the table data using `rowOf`.
+ * This is used only for type inference and does not affect rendering.
+ *
+ * Usage:
+ * ```html
+ * <ng-template fuColumnCell let-value let-row="row" let-index="index">
+ *   {{ value }}
+ * </ng-template>
+ * ```
+ *
+ * If `rowOf` is omitted, `row` will be typed as `any`.
+ */
+class FuColumnCellTemplateDirective {
+    constructor() {
+        /**
+         * Provides typing context for the column cell template.
+         * Used only for type inference – not consumed at runtime.
+         */
+        this.of = input(null, {
+            alias: 'rowOf',
+        });
+    }
+    static ngTemplateContextGuard(_dir, ctx) {
+        return true;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.6", ngImport: i0, type: FuColumnCellTemplateDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "19.0.6", type: FuColumnCellTemplateDirective, isStandalone: true, selector: "[fuColumnCell]", inputs: { of: { classPropertyName: "of", publicName: "rowOf", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.6", ngImport: i0, type: FuColumnCellTemplateDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[fuColumnCell]',
+                }]
+        }] });
+
+/**
+ * Defines a custom header template for a `fu-column` header.
+ *
+ * Fully replaces default header content for a `fu-column` header.
+ *
+ * The template context exposes:
+ * - `index` – current column index
+ *
+ * Usage:
+ * ```html
+ * <ng-template fuColumnHeader let-index="index">
+ *   {{ index }}
+ * </ng-template>
+ * ```
+ */
+class FuColumnHeaderTemplateDirective {
+    static ngTemplateContextGuard(_dir, ctx) {
+        return true;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.6", ngImport: i0, type: FuColumnHeaderTemplateDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.0.6", type: FuColumnHeaderTemplateDirective, isStandalone: true, selector: "[fuColumnHeader]", ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.6", ngImport: i0, type: FuColumnHeaderTemplateDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[fuColumnHeader]',
+                }]
+        }] });
+
+/**
+ * Defines a custom header addon template for a `fu-column` header.
+ *
+ * Adds content to right side in default header for a `fu-column` header.
+ *
+ * The template context exposes:
+ * - `index` – current column index
+ *
+ * Usage:
+ * ```html
+ * <ng-template fuColumnHeaderAddon let-index="index">
+ *   {{ index }}
+ * </ng-template>
+ * ```
+ */
+class FuColumnHeaderAddonTemplateDirective {
+    static ngTemplateContextGuard(_dir, ctx) {
+        return true;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.6", ngImport: i0, type: FuColumnHeaderAddonTemplateDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.0.6", type: FuColumnHeaderAddonTemplateDirective, isStandalone: true, selector: "[fuColumnHeaderAddon]", ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.6", ngImport: i0, type: FuColumnHeaderAddonTemplateDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[fuColumnHeaderAddon]',
+                }]
+        }] });
+
+/**
+ * Defines a custom action template for a `fu-column`.
+ *
+ * This template is intended for rendering row-level actions
+ * such as edit, save, cancel, or expand controls.
+ *
+ * The template context exposes:
+ * - `row` – the current row data
+ * - `index` – row index
+ * - `editing` – whether the row is currently in edit mode
+ * - `startEdit`, `saveEdit`, `cancelEdit` – row edit helpers
+ * - `toggleExpand` – expands or collapses the row
+ *
+ * ## Event handling
+ * If your table listens to row click events, interactive elements
+ * inside this template should pass `$event` to helpers in order to
+ * stop event propagation:
+ *
+ * ```html
+ * <button (click)="startEdit(index, $event)">Edit</button>
+ * ```
+ *
+ * ## Typing
+ * To enable strong typing for `row`, provide the table data using `rowOf`.
+ * This input is used only for type inference and does not affect rendering.
+ *
+ * ## Usage
+ * ```html
+ * <ng-template fuColumnActions let-index="index" let-startEdit="startEdit">
+ *   <button (click)="startEdit(index, $event)">✏️</button>
+ * </ng-template>
+ * ```
+ *
+ *  * If `rowOf` is omitted, `row` will be typed as `any`.
+ */
+class FuColumnActionsTemplateDirective {
+    constructor() {
+        /**
+         * Provides typing context for the column cell template.
+         * Used only for type inference – not consumed at runtime.
+         */
+        this.of = input(null, {
+            alias: 'rowOf',
+        });
+    }
+    static ngTemplateContextGuard(_dir, ctx) {
+        return true;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.6", ngImport: i0, type: FuColumnActionsTemplateDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "19.0.6", type: FuColumnActionsTemplateDirective, isStandalone: true, selector: "[fuColumnActions]", inputs: { of: { classPropertyName: "of", publicName: "rowOf", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.6", ngImport: i0, type: FuColumnActionsTemplateDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[fuColumnActions]',
+                }]
+        }] });
+
+/**
+ * Defines a column for use inside a `fu-table`.
+ *
+ * A `fu-column` describes how a single field of the row data is displayed,
+ * sorted, edited, and configured.
+ *
+ * Columns can optionally provide custom templates for:
+ * - header content
+ * - header addon content
+ * - data cell rendering
+ * - row actions (edit, save, expand, etc.)
+ *
+ * Example:
+ * ```html
+ * <fu-table [data]="users">
+ *   <fu-column field="name" header="Name" sortable editable />
+ *
+ *   <fu-column field="age" header="Age">
+ *     <ng-template fuColumnCell let-value>
+ *       {{ value }} years
+ *     </ng-template>
+ *   </fu-column>
+ * </fu-table>
+ * ```
+ *
+ * ## Visibility
+ * The column visibility can be controlled in two ways:
+ * - via the `visible` input on the column
+ * - via `ColumnConfig` provided to `fu-table`
+ *
+ * If `ColumnConfig` is provided, it takes precedence over the column's
+ * `visible` input.
+ */
+class FuColumnComponent {
+    constructor(table) {
+        /** Text displayed in the column header. */
+        this.header = input('');
+        /**
+         * Path to the value in the row object used by this column.
+         *
+         * Supports dot-notation for nested values (e.g. `address.city`).
+         */
+        this.field = input('');
+        /**
+         * Control type used when the column is editable.
+         *
+         * If not provided, the control type is inferred from the cell value
+         * using `typeof` (e.g. `string`, `number`, `boolean`).
+         *
+         * ⚠️ Note: Date values cannot be reliably inferred from the value.
+         *
+         * ⚠️ When editing date fields, it is recommended to explicitly set `type="date"`.
+         *
+         * The control type determines which editor is rendered for the cell.
+         */
+        this.type = input();
+        /**
+         * CSS width of the column (e.g. `120px`, `20%`, `auto`).
+         * Defaults to `auto`.
+         */
+        this.width = input('auto');
+        /**
+         * Whether the column can be sorted.
+         *
+         * When enabled, clicking the column header toggles sort direction.
+         */
+        this.sortable = input(false, {
+            transform: booleanAttribute,
+        });
+        /**
+         * Optional backend sort key.
+         *
+         * When provided, this value is emitted in sort queries instead of `field`.
+         * Useful when the backend expects enum values, aliases, or different field names.
+         *
+         * If omitted, `field` is used.
+         */
+        this.sortField = input(null);
+        /**
+         * Whether cells in this column can be edited.
+         *
+         * Editing behavior depends on the configured control type and templates.
+         */
+        this.editable = input(false, {
+            transform: booleanAttribute,
+        });
+        /**
+         * Whether the column can be hidden via table configuration UI
+         * (e.g. sidebar or column visibility controls).
+         */
+        this.hideable = input(true);
+        /**
+         * Whether the column can be reordered via drag-and-drop
+         * or other column reordering mechanisms.
+         */
+        this.reorderable = input(true);
+        /**
+         * Controls whether the column is initially visible.
+         *
+         * Note:
+         * If `ColumnConfig` is provided to `fu-table`, the visibility defined
+         * there takes precedence over this value.
+         */
+        this.visible = model(true);
+        this.sortDirection = signal(null);
+        this.columnCellTemplate = contentChild(FuColumnCellTemplateDirective, {
+            read: TemplateRef,
+        });
+        this.columnHeaderAddonTemplate = contentChild(FuColumnHeaderAddonTemplateDirective, {
+            read: TemplateRef,
+        });
+        this.columnHeaderTemplate = contentChild(FuColumnHeaderTemplateDirective, {
+            read: TemplateRef,
+        });
+        this.columnActionsTemplate = contentChild(FuColumnActionsTemplateDirective, {
+            read: TemplateRef,
+        });
+        table.registerColumn(this);
+    }
+    toggleSort() {
+        const current = this.sortDirection();
+        this.sortDirection.set(current === 'asc' ? 'desc' : current === 'desc' ? null : 'asc');
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.6", ngImport: i0, type: FuColumnComponent, deps: [{ token: FuTableComponent }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "19.0.6", type: FuColumnComponent, isStandalone: true, selector: "fu-column", inputs: { header: { classPropertyName: "header", publicName: "header", isSignal: true, isRequired: false, transformFunction: null }, field: { classPropertyName: "field", publicName: "field", isSignal: true, isRequired: false, transformFunction: null }, type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, width: { classPropertyName: "width", publicName: "width", isSignal: true, isRequired: false, transformFunction: null }, sortable: { classPropertyName: "sortable", publicName: "sortable", isSignal: true, isRequired: false, transformFunction: null }, sortField: { classPropertyName: "sortField", publicName: "sortField", isSignal: true, isRequired: false, transformFunction: null }, editable: { classPropertyName: "editable", publicName: "editable", isSignal: true, isRequired: false, transformFunction: null }, hideable: { classPropertyName: "hideable", publicName: "hideable", isSignal: true, isRequired: false, transformFunction: null }, reorderable: { classPropertyName: "reorderable", publicName: "reorderable", isSignal: true, isRequired: false, transformFunction: null }, visible: { classPropertyName: "visible", publicName: "visible", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { visible: "visibleChange" }, queries: [{ propertyName: "columnCellTemplate", first: true, predicate: FuColumnCellTemplateDirective, descendants: true, read: TemplateRef, isSignal: true }, { propertyName: "columnHeaderAddonTemplate", first: true, predicate: FuColumnHeaderAddonTemplateDirective, descendants: true, read: TemplateRef, isSignal: true }, { propertyName: "columnHeaderTemplate", first: true, predicate: FuColumnHeaderTemplateDirective, descendants: true, read: TemplateRef, isSignal: true }, { propertyName: "columnActionsTemplate", first: true, predicate: FuColumnActionsTemplateDirective, descendants: true, read: TemplateRef, isSignal: true }], ngImport: i0, template: "\r\n", styles: [""] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.6", ngImport: i0, type: FuColumnComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'fu-column', imports: [], template: "\r\n" }]
+        }], ctorParameters: () => [{ type: FuTableComponent }] });
+
+class FuTableModule {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.6", ngImport: i0, type: FuTableModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.0.6", ngImport: i0, type: FuTableModule, imports: [FuTableComponent,
+            FuColumnComponent,
+            FuColumnCellTemplateDirective,
+            FuColumnActionsTemplateDirective,
+            FuColumnHeaderTemplateDirective,
+            FuColumnHeaderAddonTemplateDirective,
+            FuRowContextMenuTemplateDirective,
+            FuTableExpandRowTemplateDirective,
+            FuTableNoDataTemplateDirective,
+            FuTableSidebarTemplateDirective,
+            FuHighlightPipe,
+            FuButtonDirective], exports: [FuTableComponent,
+            FuColumnComponent,
+            FuColumnCellTemplateDirective,
+            FuColumnActionsTemplateDirective,
+            FuColumnHeaderTemplateDirective,
+            FuColumnHeaderAddonTemplateDirective,
+            FuRowContextMenuTemplateDirective,
+            FuTableExpandRowTemplateDirective,
+            FuTableNoDataTemplateDirective,
+            FuTableSidebarTemplateDirective,
+            FuHighlightPipe,
+            FuButtonDirective] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.0.6", ngImport: i0, type: FuTableModule, imports: [FuTableComponent] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.6", ngImport: i0, type: FuTableModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [],
+                    imports: [
+                        FuTableComponent,
+                        FuColumnComponent,
+                        FuColumnCellTemplateDirective,
+                        FuColumnActionsTemplateDirective,
+                        FuColumnHeaderTemplateDirective,
+                        FuColumnHeaderAddonTemplateDirective,
+                        FuRowContextMenuTemplateDirective,
+                        FuTableExpandRowTemplateDirective,
+                        FuTableNoDataTemplateDirective,
+                        FuTableSidebarTemplateDirective,
+                        FuHighlightPipe,
+                        FuButtonDirective,
+                    ],
+                    exports: [
+                        FuTableComponent,
+                        FuColumnComponent,
+                        FuColumnCellTemplateDirective,
+                        FuColumnActionsTemplateDirective,
+                        FuColumnHeaderTemplateDirective,
+                        FuColumnHeaderAddonTemplateDirective,
+                        FuRowContextMenuTemplateDirective,
+                        FuTableExpandRowTemplateDirective,
+                        FuTableNoDataTemplateDirective,
+                        FuTableSidebarTemplateDirective,
+                        FuHighlightPipe,
+                        FuButtonDirective,
+                    ],
+                }]
+        }] });
+
+/**
+ * Creates a row class resolver that maps a row's field value to a CSS class name.
+ *
+ * Use this helper to easily produce a function you can pass to the table's
+ * `rowClass` input. The returned resolver reads the specified `field` from the
+ * row object, stringifies it, looks it up in `map` and returns the matching
+ * class name or the provided `fallback`.
+ *
+ * Notes:
+ * - The function performs a direct property access: `(row as any)[field]`.
+ * - Map keys are matched against the stringified field value (numbers/booleans
+ *   are converted to strings).
+ * - If the field is nested (e.g. `user.name`) use `rowClassByPath` instead.
+ * - CSS classes returned by the resolver must be defined in the consumer
+ *   application's styles — the library does not inject those rules.
+ *
+ * Example:
+ * ```ts
+ * // rows: Array<{ sex: 'male'|'female' }>
+ * rowClass = rowClassByField('sex', {
+ *   female: 'row-female',
+ *   male: 'row-male'
+ * }, '');
+ * ```
+ *
+ * @param field Property name on the row objects to check
+ * @param map Mapping from stringified field values to CSS class names
+ * @param fallback Optional fallback class when no mapping matches (default: '')
+ * @returns A function `(row: T) => string` that resolves the class name
+ */
+function rowClassByField(field, map, fallback = '') {
+    return (row) => {
+        const value = String(row[field]);
+        return map[value] ?? fallback;
+    };
+}
+/**
+ * Creates a row class resolver that reads a nested field (dot-path) from a row
+ * object and maps its stringified value to a CSS class name.
+ *
+ * This helper is useful when the value you want to base row styling on lives
+ * on a nested property (for example `user.status` or `address.country.code`).
+ * The `path` supports simple dot-notation and is resolved with a safe reduce
+ * (it will tolerate missing intermediate objects).
+ *
+ * Behavior notes:
+ * - The resolved field value is converted to a string and matched against the
+ *   provided `map` keys.
+ * - If no mapping matches, the `fallback` value is returned (defaults to `''`).
+ * - The returned CSS class must be defined by the consumer application — the
+ *   library does not provide styling for custom class names.
+ *
+ * Example (rows where `sex` is a nested property):
+ * ```ts
+ * // rows: Array<{ user: { sex: 'male'|'female' } }>
+ * rowClass = rowClassByPath('user.sex', {
+ *   female: 'row-female',
+ *   male: 'row-male'
+ * }, '');
+ * ```
+ *
+ * @param path Dot-separated path to the property on the row objects
+ * @param map Mapping from stringified values to CSS class names
+ * @param fallback Optional fallback class when no mapping matches (default: '')
+ * @returns A function `(row: T) => string` that resolves the class name
+ */
+function rowClassByPath(path, map, fallback = '') {
+    return (row) => {
+        const value = path.split('.').reduce((acc, key) => acc?.[key], row);
+        return map[String(value)] ?? fallback;
+    };
+}
+/**
+ * Creates a strongly typed field path factory for a specific row type.
+ *
+ * This helper is used to create type-safe string paths that reference
+ * properties of a data model (including nested properties), while
+ * keeping the runtime value a simple string.
+ *
+ * It improves developer experience by:
+ * - validating field paths at compile time
+ * - preventing typos in nested property paths
+ * - keeping IDE autocompletion and hover information clean
+ *
+ * ## Usage
+ * ```ts
+ * const fieldOf = fieldPathOf<Person>();
+ *
+ * const name = fieldOf('name');           // ✅ valid
+ * const city = fieldOf('address.city');   // ✅ valid
+ * const wrong = fieldOf('address.cito');  // ❌ compile-time error
+ * ```
+ *
+ * The returned value is a string at runtime and can be safely used for:
+ * - column definitions
+ * - sorting and filtering
+ * - backend queries
+ *
+ * @typeParam T The row data type used to validate field paths.
+ */
+function fieldPathOf() {
+    return (path) => path;
+}
+
 /*
  * Public API Surface of ng-fusion-ui
  */
@@ -1388,5 +3017,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.6", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { BodyTemplateDirective, ButtonDirective, ButtonModule, DataTableModule, ExpandTemplateDirective, FilledButtonDirective, HeaderTemplateDirective, HighlightDirective, IconComponent, IconModule, OutlinedButtonDirective, PopupTemplateDirective, TableComponent, TableFilterComponent, TableIntlService, TablePaginatorComponent, TbodyActionsComponent, TbodyCellComponent, TextButtonDirective, TheadCellComponent, TreeComponent, TreeModule };
+export { BodyTemplateDirective, ButtonDirective, ButtonModule, DataTableModule, ExpandTemplateDirective, FilledButtonDirective, FuButtonDirective, FuColumnActionsTemplateDirective, FuColumnCellTemplateDirective, FuColumnComponent, FuColumnHeaderAddonTemplateDirective, FuColumnHeaderTemplateDirective, FuHighlightPipe, FuRowContextMenuTemplateDirective, FuTableComponent, FuTableExpandRowTemplateDirective, FuTableIntlService, FuTableModule, FuTableNoDataTemplateDirective, FuTableSidebarTemplateDirective, HeaderTemplateDirective, HighlightDirective, IconComponent, IconModule, OutlinedButtonDirective, PopupTemplateDirective, TableComponent, TableFilterComponent, TableIntlService, TablePaginatorComponent, TbodyActionsComponent, TbodyCellComponent, TextButtonDirective, TheadCellComponent, TreeComponent, TreeModule, fieldPathOf, rowClassByField, rowClassByPath };
 //# sourceMappingURL=ng-fusion-ui.mjs.map