integra-ng 20.1.16 → 20.1.18

package/fesm2022/integra-ng.mjs

@@ -3028,11 +3028,11 @@ class SidebarComponent {
         this.layoutService = layoutService;
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: SidebarComponent, deps: [{ token: i0.ElementRef }, { token: LayoutService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.3", type: SidebarComponent, isStandalone: true, selector: "i-sidebar", inputs: { menuModel: "menuModel" }, ngImport: i0, template: "<div class=\"sidebar\">\n  @if (layoutService.state().isMobileViewport &&\n  layoutService.state().isSidebarOpen) {\n  <div class=\"sidebar-mobile-header\">\n    <div class=\"sidebar-mobile-header-inner\">\n      <i-button\n        [size]=\"'xtra-small'\"\n        [text]=\"true\"\n        [severity]=\"'contrast'\"\n        [icon]=\"'pi pi-times'\"\n        (clicked)=\"layoutService.closeSidebar()\"\n      ></i-button>\n    </div>\n  </div>\n  }\n\n  <div class=\"sidebar-menu-wrapper\">\n    <i-menu [model]=\"menuModel\" />\n  </div>\n</div>\n", styles: [".sidebar{width:100%;height:100%;display:flex;flex-direction:column;-webkit-user-select:none;user-select:none;transition:transform .2s,left .2s;background-color:var(--surface-overlay);padding:24px 12px 40px;box-shadow:0 3px 5px #00000005,0 0 2px #0000000d,0 1px 4px #00000014;scrollbar-width:thin;scrollbar-color:rgba(0,0,0,.2) transparent;scroll-behavior:smooth;scrollbar-color:var(--color-text-secondary) transparent}.sidebar::-webkit-scrollbar{width:6px;height:6px}.sidebar::-webkit-scrollbar-track{background:transparent;border-radius:3px}.sidebar::-webkit-scrollbar-thumb{background:#0003;border-radius:3px;transition:background .2s ease}.sidebar::-webkit-scrollbar-thumb:hover{background:#00000059}.sidebar::-webkit-scrollbar-thumb:active{background:#00000080}.sidebar::-webkit-scrollbar-corner{background:transparent}.sidebar::-webkit-scrollbar-thumb{background:var(--color-text-secondary);opacity:.4}.sidebar::-webkit-scrollbar-thumb:hover{background:var(--color-text-primary);opacity:.6}.sidebar::-webkit-scrollbar-thumb:active{background:var(--color-primary);opacity:.7}.sidebar .sidebar-mobile-header{display:none}.sidebar .sidebar-mobile-header .sidebar-mobile-header-inner{display:flex;justify-content:flex-end;align-items:center}.sidebar .sidebar-menu-wrapper{flex:1}@media (max-width: 991px){.sidebar{padding:0}.sidebar .sidebar-mobile-header{display:block;position:sticky;top:0;z-index:3;background:var(--surface-overlay);padding:12px 12px 8px;box-shadow:0 2px 6px #0000000f}.sidebar .sidebar-menu-wrapper{flex:1 1 auto;max-height:calc(100vh - 56px);overflow:auto;padding:12px}}\n"], dependencies: [{ kind: "component", type: MenuComponent, selector: "i-menu", inputs: ["model"] }, { kind: "component", type: IButton, selector: "i-button", inputs: ["severity", "size", "type", "disabled", "outlined", "raised", "text", "icon", "fluid"], outputs: ["clicked"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.3", type: SidebarComponent, isStandalone: true, selector: "i-sidebar", inputs: { menuModel: "menuModel" }, ngImport: i0, template: "<div class=\"sidebar\">\n  @if (layoutService.state().isMobileViewport &&\n  layoutService.state().isSidebarOpen) {\n  <div class=\"sidebar-mobile-header\">\n    <div class=\"sidebar-mobile-header-inner\">\n      <i-button\n        [size]=\"'xtra-small'\"\n        [text]=\"true\"\n        [severity]=\"'contrast'\"\n        [icon]=\"'pi pi-times'\"\n        (clicked)=\"layoutService.closeSidebar()\"\n      ></i-button>\n    </div>\n  </div>\n  }\n\n  <div class=\"sidebar-menu-wrapper\">\n    <i-menu [model]=\"menuModel\" />\n  </div>\n</div>\n", styles: [".sidebar{width:100%;height:100%;display:flex;flex-direction:column;-webkit-user-select:none;user-select:none;transition:transform .2s,left .2s;background-color:var(--surface-overlay);padding:24px 12px 40px;box-shadow:0 3px 5px #00000005,0 0 2px #0000000d,0 1px 4px #00000014}.sidebar .sidebar-mobile-header{display:none}.sidebar .sidebar-mobile-header .sidebar-mobile-header-inner{display:flex;justify-content:flex-end;align-items:center}.sidebar .sidebar-menu-wrapper{flex:1}@media (max-width: 991px){.sidebar{height:100%;padding:0}.sidebar .sidebar-mobile-header{display:block;position:sticky;top:0;z-index:3;background:var(--surface-overlay);padding:12px 12px 8px;box-shadow:0 2px 6px #0000000f}.sidebar .sidebar-menu-wrapper{flex:1 1 auto;max-height:calc(100vh - 56px);overflow:auto;padding:12px}}\n"], dependencies: [{ kind: "component", type: MenuComponent, selector: "i-menu", inputs: ["model"] }, { kind: "component", type: IButton, selector: "i-button", inputs: ["severity", "size", "type", "disabled", "outlined", "raised", "text", "icon", "fluid"], outputs: ["clicked"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: SidebarComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'i-sidebar', imports: [MenuComponent, IButton], template: "<div class=\"sidebar\">\n  @if (layoutService.state().isMobileViewport &&\n  layoutService.state().isSidebarOpen) {\n  <div class=\"sidebar-mobile-header\">\n    <div class=\"sidebar-mobile-header-inner\">\n      <i-button\n        [size]=\"'xtra-small'\"\n        [text]=\"true\"\n        [severity]=\"'contrast'\"\n        [icon]=\"'pi pi-times'\"\n        (clicked)=\"layoutService.closeSidebar()\"\n      ></i-button>\n    </div>\n  </div>\n  }\n\n  <div class=\"sidebar-menu-wrapper\">\n    <i-menu [model]=\"menuModel\" />\n  </div>\n</div>\n", styles: [".sidebar{width:100%;height:100%;display:flex;flex-direction:column;-webkit-user-select:none;user-select:none;transition:transform .2s,left .2s;background-color:var(--surface-overlay);padding:24px 12px 40px;box-shadow:0 3px 5px #00000005,0 0 2px #0000000d,0 1px 4px #00000014;scrollbar-width:thin;scrollbar-color:rgba(0,0,0,.2) transparent;scroll-behavior:smooth;scrollbar-color:var(--color-text-secondary) transparent}.sidebar::-webkit-scrollbar{width:6px;height:6px}.sidebar::-webkit-scrollbar-track{background:transparent;border-radius:3px}.sidebar::-webkit-scrollbar-thumb{background:#0003;border-radius:3px;transition:background .2s ease}.sidebar::-webkit-scrollbar-thumb:hover{background:#00000059}.sidebar::-webkit-scrollbar-thumb:active{background:#00000080}.sidebar::-webkit-scrollbar-corner{background:transparent}.sidebar::-webkit-scrollbar-thumb{background:var(--color-text-secondary);opacity:.4}.sidebar::-webkit-scrollbar-thumb:hover{background:var(--color-text-primary);opacity:.6}.sidebar::-webkit-scrollbar-thumb:active{background:var(--color-primary);opacity:.7}.sidebar .sidebar-mobile-header{display:none}.sidebar .sidebar-mobile-header .sidebar-mobile-header-inner{display:flex;justify-content:flex-end;align-items:center}.sidebar .sidebar-menu-wrapper{flex:1}@media (max-width: 991px){.sidebar{padding:0}.sidebar .sidebar-mobile-header{display:block;position:sticky;top:0;z-index:3;background:var(--surface-overlay);padding:12px 12px 8px;box-shadow:0 2px 6px #0000000f}.sidebar .sidebar-menu-wrapper{flex:1 1 auto;max-height:calc(100vh - 56px);overflow:auto;padding:12px}}\n"] }]
+            args: [{ selector: 'i-sidebar', imports: [MenuComponent, IButton], template: "<div class=\"sidebar\">\n  @if (layoutService.state().isMobileViewport &&\n  layoutService.state().isSidebarOpen) {\n  <div class=\"sidebar-mobile-header\">\n    <div class=\"sidebar-mobile-header-inner\">\n      <i-button\n        [size]=\"'xtra-small'\"\n        [text]=\"true\"\n        [severity]=\"'contrast'\"\n        [icon]=\"'pi pi-times'\"\n        (clicked)=\"layoutService.closeSidebar()\"\n      ></i-button>\n    </div>\n  </div>\n  }\n\n  <div class=\"sidebar-menu-wrapper\">\n    <i-menu [model]=\"menuModel\" />\n  </div>\n</div>\n", styles: [".sidebar{width:100%;height:100%;display:flex;flex-direction:column;-webkit-user-select:none;user-select:none;transition:transform .2s,left .2s;background-color:var(--surface-overlay);padding:24px 12px 40px;box-shadow:0 3px 5px #00000005,0 0 2px #0000000d,0 1px 4px #00000014}.sidebar .sidebar-mobile-header{display:none}.sidebar .sidebar-mobile-header .sidebar-mobile-header-inner{display:flex;justify-content:flex-end;align-items:center}.sidebar .sidebar-menu-wrapper{flex:1}@media (max-width: 991px){.sidebar{height:100%;padding:0}.sidebar .sidebar-mobile-header{display:block;position:sticky;top:0;z-index:3;background:var(--surface-overlay);padding:12px 12px 8px;box-shadow:0 2px 6px #0000000f}.sidebar .sidebar-menu-wrapper{flex:1 1 auto;max-height:calc(100vh - 56px);overflow:auto;padding:12px}}\n"] }]
         }], ctorParameters: () => [{ type: i0.ElementRef }, { type: LayoutService }], propDecorators: { menuModel: [{
                 type: Input
             }] } });
@@ -3095,11 +3095,11 @@ class LayoutComponent {
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: LayoutComponent, deps: [{ token: LayoutService }, { token: i2$1.Router }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.3", type: LayoutComponent, isStandalone: true, selector: "i-layout", inputs: { config: "config", menuModel: "menuModel" }, host: { listeners: { "window:resize": "onWindowResize()" } }, ngImport: i0, template: "<div class=\"layout\">\n  <div class=\"layout-wrapper\" [ngClass]=\"containerClass()\">\n    <i-topbar [config]=\"config\">\n      <ng-content select=\"[topbarActions]\" />\n    </i-topbar>\n    <div class=\"layout-body\">\n      <div\n        class=\"layout-sidebar-container\"\n        [ngClass]=\"{\n          'sidebar-open': layoutService.state().isSidebarOpen,\n          'sidebar-closed': !layoutService.state().isSidebarOpen\n        }\"\n      >\n        <i-sidebar [menuModel]=\"menuModel\" />\n      </div>\n      <div class=\"layout-main-container\">\n        <div class=\"layout-main\">\n          <router-outlet />\n        </div>\n      </div>\n    </div>\n    <div class=\"layout-mask\" (click)=\"hideMenu()\"></div>\n  </div>\n</div>\n", styles: [".layout .layout-wrapper{display:flex;flex-direction:column;height:100vh;overflow:hidden}.layout .layout-wrapper .layout-body{display:flex;flex:1 1 auto;min-height:0}.layout .layout-wrapper .layout-body .layout-sidebar-container{flex-shrink:0;width:300px;overflow-y:auto;transition:transform .3s ease,opacity .3s ease;opacity:1}.layout .layout-wrapper .layout-body .layout-sidebar-container.sidebar-open{transform:translate(0);opacity:1;pointer-events:auto}.layout .layout-wrapper .layout-body .layout-sidebar-container.sidebar-closed{transform:translate(-100%);opacity:0;pointer-events:none}.layout .layout-wrapper .layout-body .layout-main-container{flex:1 1 auto;min-width:0;overflow-y:auto;padding:2rem;transition:margin-left .3s ease;scrollbar-color:rgba(0,0,0,.2) transparent;scroll-behavior:smooth;scrollbar-color:var(--color-text-secondary) transparent;scrollbar-width:thin;scrollbar-color:var(--color-text-secondary) rgba(0,0,0,.05)}.layout .layout-wrapper .layout-body .layout-main-container::-webkit-scrollbar-track{background:transparent;border-radius:3px}.layout .layout-wrapper .layout-body .layout-main-container::-webkit-scrollbar-thumb{background:#0003;border-radius:3px;transition:background .2s ease}.layout .layout-wrapper .layout-body .layout-main-container::-webkit-scrollbar-thumb:hover{background:#00000059}.layout .layout-wrapper .layout-body .layout-main-container::-webkit-scrollbar-thumb:active{background:#00000080}.layout .layout-wrapper .layout-body .layout-main-container::-webkit-scrollbar-corner{background:transparent}.layout .layout-wrapper .layout-body .layout-main-container::-webkit-scrollbar-thumb{background:var(--color-text-secondary);opacity:.4}.layout .layout-wrapper .layout-body .layout-main-container::-webkit-scrollbar-thumb:hover{background:var(--color-text-primary);opacity:.6}.layout .layout-wrapper .layout-body .layout-main-container::-webkit-scrollbar-thumb:active{background:var(--color-primary);opacity:.7}.layout .layout-wrapper .layout-body .layout-main-container::-webkit-scrollbar{width:6px;height:6px}.layout .layout-wrapper .layout-body .layout-main-container::-webkit-scrollbar-track{background:#0000000d;border-radius:3px;margin:2px 0}.layout .layout-wrapper .layout-body .layout-main-container::-webkit-scrollbar-thumb{border-radius:3px;min-height:20px;background:var(--color-text-secondary);opacity:.6}.layout .layout-wrapper .layout-body .layout-main-container::-webkit-scrollbar-thumb:hover{background:var(--color-text-primary);opacity:.8}.layout .layout-wrapper .layout-body .layout-main-container::-webkit-scrollbar-thumb:active{background:var(--color-primary);opacity:.9}.layout .layout-wrapper .layout-body .layout-main-container .layout-main{width:100%;max-width:100%}.layout .layout-wrapper.layout-static-inactive .layout-main-container{margin-left:-300px}.layout .layout-wrapper.layout-overlay-active .layout-sidebar-container{position:fixed;left:0;top:5rem;height:calc(100vh - 5rem);z-index:999;background:var(--surface-overlay)}.layout .layout-wrapper .layout-mask{position:fixed;top:0;left:0;width:100%;height:100%;background:#0006;z-index:998;display:none}.layout .layout-wrapper.layout-mobile-active .layout-mask{display:block}@media (max-width: 991px){.layout .layout-wrapper .layout-body .layout-sidebar-container{position:fixed;left:0;top:0;height:100vh;z-index:999;transition:transform .2s ease;background:var(--surface-overlay);overflow-y:auto}.layout .layout-wrapper .layout-body .layout-main-container{margin-left:0;width:100%;padding:24px 10px}}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: TopbarComponent, selector: "i-topbar", inputs: ["config"] }, { kind: "component", type: SidebarComponent, selector: "i-sidebar", inputs: ["menuModel"] }, { kind: "directive", type: RouterOutlet, selector: "router-outlet", inputs: ["name", "routerOutletData"], outputs: ["activate", "deactivate", "attach", "detach"], exportAs: ["outlet"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.3", type: LayoutComponent, isStandalone: true, selector: "i-layout", inputs: { config: "config", menuModel: "menuModel" }, host: { listeners: { "window:resize": "onWindowResize()" } }, ngImport: i0, template: "<div class=\"layout\">\n  <div class=\"layout-wrapper\" [ngClass]=\"containerClass()\">\n    <i-topbar [config]=\"config\">\n      <ng-content select=\"[topbarActions]\" />\n    </i-topbar>\n    <div class=\"layout-body\">\n      <div\n        class=\"layout-sidebar-container\"\n        [ngClass]=\"{\n          'sidebar-open': layoutService.state().isSidebarOpen,\n          'sidebar-closed': !layoutService.state().isSidebarOpen\n        }\"\n      >\n        <i-sidebar [menuModel]=\"menuModel\" />\n      </div>\n      <div class=\"layout-main-container\">\n        <div class=\"layout-main\">\n          <router-outlet />\n        </div>\n      </div>\n    </div>\n    <div class=\"layout-mask\" (click)=\"hideMenu()\"></div>\n  </div>\n</div>\n", styles: [".layout .layout-wrapper{display:flex;flex-direction:column;height:100vh;overflow:hidden}.layout .layout-wrapper .layout-body{display:flex;flex:1 1 auto;min-height:0}.layout .layout-wrapper .layout-body .layout-sidebar-container{flex-shrink:0;width:300px;height:100%;overflow-y:auto;transition:transform .3s ease,opacity .3s ease;opacity:1;scrollbar-width:thin;scrollbar-color:rgba(0,0,0,.2) transparent;scroll-behavior:smooth;scrollbar-color:var(--color-text-secondary) transparent}.layout .layout-wrapper .layout-body .layout-sidebar-container::-webkit-scrollbar{width:6px;height:6px}.layout .layout-wrapper .layout-body .layout-sidebar-container::-webkit-scrollbar-track{background:transparent;border-radius:3px}.layout .layout-wrapper .layout-body .layout-sidebar-container::-webkit-scrollbar-thumb{background:#0003;border-radius:3px;transition:background .2s ease}.layout .layout-wrapper .layout-body .layout-sidebar-container::-webkit-scrollbar-thumb:hover{background:#00000059}.layout .layout-wrapper .layout-body .layout-sidebar-container::-webkit-scrollbar-thumb:active{background:#00000080}.layout .layout-wrapper .layout-body .layout-sidebar-container::-webkit-scrollbar-corner{background:transparent}.layout .layout-wrapper .layout-body .layout-sidebar-container::-webkit-scrollbar-thumb{background:var(--color-text-secondary);opacity:.4}.layout .layout-wrapper .layout-body .layout-sidebar-container::-webkit-scrollbar-thumb:hover{background:var(--color-text-primary);opacity:.6}.layout .layout-wrapper .layout-body .layout-sidebar-container::-webkit-scrollbar-thumb:active{background:var(--color-primary);opacity:.7}.layout .layout-wrapper .layout-body .layout-sidebar-container.sidebar-open{transform:translate(0);opacity:1;pointer-events:auto}.layout .layout-wrapper .layout-body .layout-sidebar-container.sidebar-closed{transform:translate(-100%);opacity:0;pointer-events:none}.layout .layout-wrapper .layout-body .layout-main-container{flex:1 1 auto;min-width:0;overflow-y:auto;padding:2rem;transition:margin-left .3s ease;scrollbar-color:rgba(0,0,0,.2) transparent;scroll-behavior:smooth;scrollbar-color:var(--color-text-secondary) transparent;scrollbar-width:thin;scrollbar-color:var(--color-text-secondary) rgba(0,0,0,.05)}.layout .layout-wrapper .layout-body .layout-main-container::-webkit-scrollbar-track{background:transparent;border-radius:3px}.layout .layout-wrapper .layout-body .layout-main-container::-webkit-scrollbar-thumb{background:#0003;border-radius:3px;transition:background .2s ease}.layout .layout-wrapper .layout-body .layout-main-container::-webkit-scrollbar-thumb:hover{background:#00000059}.layout .layout-wrapper .layout-body .layout-main-container::-webkit-scrollbar-thumb:active{background:#00000080}.layout .layout-wrapper .layout-body .layout-main-container::-webkit-scrollbar-corner{background:transparent}.layout .layout-wrapper .layout-body .layout-main-container::-webkit-scrollbar-thumb{background:var(--color-text-secondary);opacity:.4}.layout .layout-wrapper .layout-body .layout-main-container::-webkit-scrollbar-thumb:hover{background:var(--color-text-primary);opacity:.6}.layout .layout-wrapper .layout-body .layout-main-container::-webkit-scrollbar-thumb:active{background:var(--color-primary);opacity:.7}.layout .layout-wrapper .layout-body .layout-main-container::-webkit-scrollbar{width:6px;height:6px}.layout .layout-wrapper .layout-body .layout-main-container::-webkit-scrollbar-track{background:#0000000d;border-radius:3px;margin:2px 0}.layout .layout-wrapper .layout-body .layout-main-container::-webkit-scrollbar-thumb{border-radius:3px;min-height:20px;background:var(--color-text-secondary);opacity:.6}.layout .layout-wrapper .layout-body .layout-main-container::-webkit-scrollbar-thumb:hover{background:var(--color-text-primary);opacity:.8}.layout .layout-wrapper .layout-body .layout-main-container::-webkit-scrollbar-thumb:active{background:var(--color-primary);opacity:.9}.layout .layout-wrapper .layout-body .layout-main-container .layout-main{width:100%;max-width:100%}.layout .layout-wrapper.layout-static-inactive .layout-main-container{margin-left:-300px}.layout .layout-wrapper.layout-overlay-active .layout-sidebar-container{position:fixed;left:0;top:5rem;height:calc(100vh - 5rem);z-index:999;background:var(--surface-overlay)}.layout .layout-wrapper .layout-mask{position:fixed;top:0;left:0;width:100%;height:100%;background:#0006;z-index:998;display:none}.layout .layout-wrapper.layout-mobile-active .layout-mask{display:block}@media (max-width: 991px){.layout .layout-wrapper .layout-body .layout-sidebar-container{position:fixed;left:0;top:0;height:100vh;z-index:999;transition:transform .2s ease;background:var(--surface-overlay);overflow-y:auto}.layout .layout-wrapper .layout-body .layout-main-container{margin-left:0;width:100%;padding:24px 10px}}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: TopbarComponent, selector: "i-topbar", inputs: ["config"] }, { kind: "component", type: SidebarComponent, selector: "i-sidebar", inputs: ["menuModel"] }, { kind: "directive", type: RouterOutlet, selector: "router-outlet", inputs: ["name", "routerOutletData"], outputs: ["activate", "deactivate", "attach", "detach"], exportAs: ["outlet"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: LayoutComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'i-layout', imports: [NgClass, TopbarComponent, SidebarComponent, RouterOutlet], template: "<div class=\"layout\">\n  <div class=\"layout-wrapper\" [ngClass]=\"containerClass()\">\n    <i-topbar [config]=\"config\">\n      <ng-content select=\"[topbarActions]\" />\n    </i-topbar>\n    <div class=\"layout-body\">\n      <div\n        class=\"layout-sidebar-container\"\n        [ngClass]=\"{\n          'sidebar-open': layoutService.state().isSidebarOpen,\n          'sidebar-closed': !layoutService.state().isSidebarOpen\n        }\"\n      >\n        <i-sidebar [menuModel]=\"menuModel\" />\n      </div>\n      <div class=\"layout-main-container\">\n        <div class=\"layout-main\">\n          <router-outlet />\n        </div>\n      </div>\n    </div>\n    <div class=\"layout-mask\" (click)=\"hideMenu()\"></div>\n  </div>\n</div>\n", styles: [".layout .layout-wrapper{display:flex;flex-direction:column;height:100vh;overflow:hidden}.layout .layout-wrapper .layout-body{display:flex;flex:1 1 auto;min-height:0}.layout .layout-wrapper .layout-body .layout-sidebar-container{flex-shrink:0;width:300px;overflow-y:auto;transition:transform .3s ease,opacity .3s ease;opacity:1}.layout .layout-wrapper .layout-body .layout-sidebar-container.sidebar-open{transform:translate(0);opacity:1;pointer-events:auto}.layout .layout-wrapper .layout-body .layout-sidebar-container.sidebar-closed{transform:translate(-100%);opacity:0;pointer-events:none}.layout .layout-wrapper .layout-body .layout-main-container{flex:1 1 auto;min-width:0;overflow-y:auto;padding:2rem;transition:margin-left .3s ease;scrollbar-color:rgba(0,0,0,.2) transparent;scroll-behavior:smooth;scrollbar-color:var(--color-text-secondary) transparent;scrollbar-width:thin;scrollbar-color:var(--color-text-secondary) rgba(0,0,0,.05)}.layout .layout-wrapper .layout-body .layout-main-container::-webkit-scrollbar-track{background:transparent;border-radius:3px}.layout .layout-wrapper .layout-body .layout-main-container::-webkit-scrollbar-thumb{background:#0003;border-radius:3px;transition:background .2s ease}.layout .layout-wrapper .layout-body .layout-main-container::-webkit-scrollbar-thumb:hover{background:#00000059}.layout .layout-wrapper .layout-body .layout-main-container::-webkit-scrollbar-thumb:active{background:#00000080}.layout .layout-wrapper .layout-body .layout-main-container::-webkit-scrollbar-corner{background:transparent}.layout .layout-wrapper .layout-body .layout-main-container::-webkit-scrollbar-thumb{background:var(--color-text-secondary);opacity:.4}.layout .layout-wrapper .layout-body .layout-main-container::-webkit-scrollbar-thumb:hover{background:var(--color-text-primary);opacity:.6}.layout .layout-wrapper .layout-body .layout-main-container::-webkit-scrollbar-thumb:active{background:var(--color-primary);opacity:.7}.layout .layout-wrapper .layout-body .layout-main-container::-webkit-scrollbar{width:6px;height:6px}.layout .layout-wrapper .layout-body .layout-main-container::-webkit-scrollbar-track{background:#0000000d;border-radius:3px;margin:2px 0}.layout .layout-wrapper .layout-body .layout-main-container::-webkit-scrollbar-thumb{border-radius:3px;min-height:20px;background:var(--color-text-secondary);opacity:.6}.layout .layout-wrapper .layout-body .layout-main-container::-webkit-scrollbar-thumb:hover{background:var(--color-text-primary);opacity:.8}.layout .layout-wrapper .layout-body .layout-main-container::-webkit-scrollbar-thumb:active{background:var(--color-primary);opacity:.9}.layout .layout-wrapper .layout-body .layout-main-container .layout-main{width:100%;max-width:100%}.layout .layout-wrapper.layout-static-inactive .layout-main-container{margin-left:-300px}.layout .layout-wrapper.layout-overlay-active .layout-sidebar-container{position:fixed;left:0;top:5rem;height:calc(100vh - 5rem);z-index:999;background:var(--surface-overlay)}.layout .layout-wrapper .layout-mask{position:fixed;top:0;left:0;width:100%;height:100%;background:#0006;z-index:998;display:none}.layout .layout-wrapper.layout-mobile-active .layout-mask{display:block}@media (max-width: 991px){.layout .layout-wrapper .layout-body .layout-sidebar-container{position:fixed;left:0;top:0;height:100vh;z-index:999;transition:transform .2s ease;background:var(--surface-overlay);overflow-y:auto}.layout .layout-wrapper .layout-body .layout-main-container{margin-left:0;width:100%;padding:24px 10px}}\n"] }]
+            args: [{ selector: 'i-layout', imports: [NgClass, TopbarComponent, SidebarComponent, RouterOutlet], template: "<div class=\"layout\">\n  <div class=\"layout-wrapper\" [ngClass]=\"containerClass()\">\n    <i-topbar [config]=\"config\">\n      <ng-content select=\"[topbarActions]\" />\n    </i-topbar>\n    <div class=\"layout-body\">\n      <div\n        class=\"layout-sidebar-container\"\n        [ngClass]=\"{\n          'sidebar-open': layoutService.state().isSidebarOpen,\n          'sidebar-closed': !layoutService.state().isSidebarOpen\n        }\"\n      >\n        <i-sidebar [menuModel]=\"menuModel\" />\n      </div>\n      <div class=\"layout-main-container\">\n        <div class=\"layout-main\">\n          <router-outlet />\n        </div>\n      </div>\n    </div>\n    <div class=\"layout-mask\" (click)=\"hideMenu()\"></div>\n  </div>\n</div>\n", styles: [".layout .layout-wrapper{display:flex;flex-direction:column;height:100vh;overflow:hidden}.layout .layout-wrapper .layout-body{display:flex;flex:1 1 auto;min-height:0}.layout .layout-wrapper .layout-body .layout-sidebar-container{flex-shrink:0;width:300px;height:100%;overflow-y:auto;transition:transform .3s ease,opacity .3s ease;opacity:1;scrollbar-width:thin;scrollbar-color:rgba(0,0,0,.2) transparent;scroll-behavior:smooth;scrollbar-color:var(--color-text-secondary) transparent}.layout .layout-wrapper .layout-body .layout-sidebar-container::-webkit-scrollbar{width:6px;height:6px}.layout .layout-wrapper .layout-body .layout-sidebar-container::-webkit-scrollbar-track{background:transparent;border-radius:3px}.layout .layout-wrapper .layout-body .layout-sidebar-container::-webkit-scrollbar-thumb{background:#0003;border-radius:3px;transition:background .2s ease}.layout .layout-wrapper .layout-body .layout-sidebar-container::-webkit-scrollbar-thumb:hover{background:#00000059}.layout .layout-wrapper .layout-body .layout-sidebar-container::-webkit-scrollbar-thumb:active{background:#00000080}.layout .layout-wrapper .layout-body .layout-sidebar-container::-webkit-scrollbar-corner{background:transparent}.layout .layout-wrapper .layout-body .layout-sidebar-container::-webkit-scrollbar-thumb{background:var(--color-text-secondary);opacity:.4}.layout .layout-wrapper .layout-body .layout-sidebar-container::-webkit-scrollbar-thumb:hover{background:var(--color-text-primary);opacity:.6}.layout .layout-wrapper .layout-body .layout-sidebar-container::-webkit-scrollbar-thumb:active{background:var(--color-primary);opacity:.7}.layout .layout-wrapper .layout-body .layout-sidebar-container.sidebar-open{transform:translate(0);opacity:1;pointer-events:auto}.layout .layout-wrapper .layout-body .layout-sidebar-container.sidebar-closed{transform:translate(-100%);opacity:0;pointer-events:none}.layout .layout-wrapper .layout-body .layout-main-container{flex:1 1 auto;min-width:0;overflow-y:auto;padding:2rem;transition:margin-left .3s ease;scrollbar-color:rgba(0,0,0,.2) transparent;scroll-behavior:smooth;scrollbar-color:var(--color-text-secondary) transparent;scrollbar-width:thin;scrollbar-color:var(--color-text-secondary) rgba(0,0,0,.05)}.layout .layout-wrapper .layout-body .layout-main-container::-webkit-scrollbar-track{background:transparent;border-radius:3px}.layout .layout-wrapper .layout-body .layout-main-container::-webkit-scrollbar-thumb{background:#0003;border-radius:3px;transition:background .2s ease}.layout .layout-wrapper .layout-body .layout-main-container::-webkit-scrollbar-thumb:hover{background:#00000059}.layout .layout-wrapper .layout-body .layout-main-container::-webkit-scrollbar-thumb:active{background:#00000080}.layout .layout-wrapper .layout-body .layout-main-container::-webkit-scrollbar-corner{background:transparent}.layout .layout-wrapper .layout-body .layout-main-container::-webkit-scrollbar-thumb{background:var(--color-text-secondary);opacity:.4}.layout .layout-wrapper .layout-body .layout-main-container::-webkit-scrollbar-thumb:hover{background:var(--color-text-primary);opacity:.6}.layout .layout-wrapper .layout-body .layout-main-container::-webkit-scrollbar-thumb:active{background:var(--color-primary);opacity:.7}.layout .layout-wrapper .layout-body .layout-main-container::-webkit-scrollbar{width:6px;height:6px}.layout .layout-wrapper .layout-body .layout-main-container::-webkit-scrollbar-track{background:#0000000d;border-radius:3px;margin:2px 0}.layout .layout-wrapper .layout-body .layout-main-container::-webkit-scrollbar-thumb{border-radius:3px;min-height:20px;background:var(--color-text-secondary);opacity:.6}.layout .layout-wrapper .layout-body .layout-main-container::-webkit-scrollbar-thumb:hover{background:var(--color-text-primary);opacity:.8}.layout .layout-wrapper .layout-body .layout-main-container::-webkit-scrollbar-thumb:active{background:var(--color-primary);opacity:.9}.layout .layout-wrapper .layout-body .layout-main-container .layout-main{width:100%;max-width:100%}.layout .layout-wrapper.layout-static-inactive .layout-main-container{margin-left:-300px}.layout .layout-wrapper.layout-overlay-active .layout-sidebar-container{position:fixed;left:0;top:5rem;height:calc(100vh - 5rem);z-index:999;background:var(--surface-overlay)}.layout .layout-wrapper .layout-mask{position:fixed;top:0;left:0;width:100%;height:100%;background:#0006;z-index:998;display:none}.layout .layout-wrapper.layout-mobile-active .layout-mask{display:block}@media (max-width: 991px){.layout .layout-wrapper .layout-body .layout-sidebar-container{position:fixed;left:0;top:0;height:100vh;z-index:999;transition:transform .2s ease;background:var(--surface-overlay);overflow-y:auto}.layout .layout-wrapper .layout-body .layout-main-container{margin-left:0;width:100%;padding:24px 10px}}\n"] }]
         }], ctorParameters: () => [{ type: LayoutService }, { type: i2$1.Router }], propDecorators: { config: [{
                 type: Input
             }], menuModel: [{
@@ -6487,6 +6487,10 @@ class ITable {
      * Column definitions with field, header, sortable, filterable, width properties
      */
     columns = input([], ...(ngDevMode ? [{ debugName: "columns" }] : []));
+    /**
+     * Grouped data mode - when provided, table will render in grouped mode
+     */
+    groupedData = input([], ...(ngDevMode ? [{ debugName: "groupedData" }] : []));
     /**
      * Message displayed when table has no data
      * @default 'No data available'
@@ -6650,6 +6654,30 @@ class ITable {
      * Event emitted when a row is collapsed
      */
     onRowCollapse = new EventEmitter();
+    // ===== DOWNLOAD FEATURES =====
+    /**
+     * Enable download functionality
+     * @default false
+     */
+    downloadable = false;
+    /**
+     * Download mode - 'direct' for client-side download, 'api' for server-side
+     * @default 'direct'
+     */
+    downloadMode = 'direct';
+    /**
+     * Default download format
+     * @default 'csv'
+     */
+    downloadFormat = 'csv';
+    /**
+     * Custom download filename (without extension)
+     */
+    downloadFilename;
+    /**
+     * Event emitted when download is triggered in 'api' mode
+     */
+    onDownload = new EventEmitter();
     // ===== INTERNAL STATE =====
     /**
      * Unique component identifier
@@ -6671,6 +6699,11 @@ class ITable {
      * @internal
      */
     expandedRows = signal(new Set(), ...(ngDevMode ? [{ debugName: "expandedRows" }] : []));
+    /**
+     * Expanded groups (for grouped data mode)
+     * @internal
+     */
+    expandedGroups = signal(new Set(), ...(ngDevMode ? [{ debugName: "expandedGroups" }] : []));
     /**
      * Filter debounce timer
      * @internal
@@ -6698,6 +6731,18 @@ class ITable {
     columnWidths = signal({}, ...(ngDevMode ? [{ debugName: "columnWidths" }] : []));
     constructor(el) {
         this.el = el;
+        effect(() => {
+            const groups = this.groupedData();
+            if (groups.length > 0) {
+                const initialExpandedGroups = new Set();
+                groups.forEach((group, index) => {
+                    if (group.expanded !== false) {
+                        initialExpandedGroups.add(group.label || index.toString());
+                    }
+                });
+                this.expandedGroups.set(initialExpandedGroups);
+            }
+        });
     }
     /**
      * Computed filtered and sorted data
@@ -7027,6 +7072,158 @@ class ITable {
     isRowExpanded(row) {
         return this.expandedRows().has(row);
     }
+    // ===== GROUP EXPANSION METHODS =====
+    /**
+     * Toggles group expansion
+     * @internal
+     */
+    toggleGroupExpansion(groupLabel) {
+        const expanded = this.expandedGroups();
+        const isExpanded = expanded.has(groupLabel);
+        const newExpanded = new Set(expanded);
+        if (isExpanded) {
+            newExpanded.delete(groupLabel);
+        }
+        else {
+            newExpanded.add(groupLabel);
+        }
+        this.expandedGroups.set(newExpanded);
+    }
+    /**
+     * Checks if a group is expanded
+     * @internal
+     */
+    isGroupExpanded(groupLabel) {
+        return this.expandedGroups().has(groupLabel);
+    }
+    /**
+     * Gets columns for a specific group
+     * @internal
+     */
+    getGroupColumns(group) {
+        return group.columns || this.columns();
+    }
+    /**
+     * Checks if table is in grouped mode
+     * @internal
+     */
+    isGroupedMode() {
+        return this.groupedData().length > 0;
+    }
+    // ===== DOWNLOAD METHODS =====
+    /**
+     * Handles download button click
+     * @internal
+     */
+    handleDownload() {
+        if (this.downloadMode === 'api') {
+            // Emit event for API-based download
+            this.onDownload.emit({
+                format: this.downloadFormat,
+                data: this.isGroupedMode()
+                    ? this.getFlattenedGroupedData()
+                    : this.processedData(),
+                columns: this.columns(),
+            });
+        }
+        else {
+            // Direct download
+            this.downloadData();
+        }
+    }
+    /**
+     * Gets flattened data from grouped data
+     * @internal
+     */
+    getFlattenedGroupedData() {
+        const flattened = [];
+        this.groupedData().forEach((group) => {
+            flattened.push(...(group.data || []));
+        });
+        return flattened;
+    }
+    /**
+     * Downloads table data directly (client-side)
+     * @internal
+     */
+    downloadData() {
+        const data = this.isGroupedMode()
+            ? this.getFlattenedGroupedData()
+            : this.processedData();
+        const columns = this.columns();
+        const filename = this.downloadFilename || 'table-data';
+        switch (this.downloadFormat) {
+            case 'csv':
+                this.downloadCSV(data, columns, filename);
+                break;
+            case 'json':
+                this.downloadJSON(data, filename);
+                break;
+            case 'excel':
+                // For Excel, we'll fall back to CSV with .xls extension
+                // A full Excel implementation would require a library like xlsx
+                this.downloadCSV(data, columns, filename, 'xls');
+                break;
+        }
+    }
+    /**
+     * Downloads data as CSV
+     * @internal
+     */
+    downloadCSV(data, columns, filename, extension = 'csv') {
+        // Create CSV header
+        const headers = columns
+            .map((col) => {
+            const escaped = String(col.header).replace(/"/g, '""');
+            return escaped.includes(',') ||
+                escaped.includes('"') ||
+                escaped.includes('\n')
+                ? `"${escaped}"`
+                : escaped;
+        })
+            .join(',');
+        // Create CSV rows
+        const rows = data.map((row) => {
+            return columns
+                .map((col) => {
+                const value = this.getCellValue(row, col.field);
+                const formatted = this.formatCellValue(value, col);
+                // Escape quotes and wrap in quotes if contains comma or quote
+                const escaped = String(formatted).replace(/"/g, '""');
+                return escaped.includes(',') ||
+                    escaped.includes('"') ||
+                    escaped.includes('\n')
+                    ? `"${escaped}"`
+                    : escaped;
+            })
+                .join(',');
+        });
+        // Combine header and rows
+        const csv = [headers, ...rows].join('\n');
+        // Create and download file
+        this.downloadFile(csv, `${filename}.${extension}`, 'text/csv');
+    }
+    /**
+     * Downloads data as JSON
+     * @internal
+     */
+    downloadJSON(data, filename) {
+        const json = JSON.stringify(data, null, 2);
+        this.downloadFile(json, `${filename}.json`, 'application/json');
+    }
+    /**
+     * Creates and triggers file download
+     * @internal
+     */
+    downloadFile(content, filename, mimeType) {
+        const blob = new Blob([content], { type: mimeType });
+        const url = window.URL.createObjectURL(blob);
+        const link = document.createElement('a');
+        link.href = url;
+        link.download = filename;
+        link.click();
+        window.URL.revokeObjectURL(url);
+    }
     // ===== COLUMN RESIZE METHODS =====
     /**
      * Starts column resize
@@ -7119,7 +7316,7 @@ class ITable {
         return column.field;
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: ITable, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.3", type: ITable, isStandalone: true, selector: "i-table", inputs: { data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: false, transformFunction: null }, columns: { classPropertyName: "columns", publicName: "columns", isSignal: true, isRequired: false, transformFunction: null }, emptyMessage: { classPropertyName: "emptyMessage", publicName: "emptyMessage", isSignal: false, isRequired: false, transformFunction: null }, sortable: { classPropertyName: "sortable", publicName: "sortable", isSignal: false, isRequired: false, transformFunction: null }, sortField: { classPropertyName: "sortField", publicName: "sortField", isSignal: false, isRequired: false, transformFunction: null }, sortOrder: { classPropertyName: "sortOrder", publicName: "sortOrder", isSignal: false, isRequired: false, transformFunction: null }, filterable: { classPropertyName: "filterable", publicName: "filterable", isSignal: false, isRequired: false, transformFunction: null }, globalFilter: { classPropertyName: "globalFilter", publicName: "globalFilter", isSignal: false, isRequired: false, transformFunction: null }, filterDelay: { classPropertyName: "filterDelay", publicName: "filterDelay", isSignal: false, isRequired: false, transformFunction: null }, selectionMode: { classPropertyName: "selectionMode", publicName: "selectionMode", isSignal: false, isRequired: false, transformFunction: null }, selection: { classPropertyName: "selection", publicName: "selection", isSignal: false, isRequired: false, transformFunction: null }, dataKey: { classPropertyName: "dataKey", publicName: "dataKey", isSignal: false, isRequired: false, transformFunction: null }, showActions: { classPropertyName: "showActions", publicName: "showActions", isSignal: false, isRequired: false, transformFunction: null }, actions: { classPropertyName: "actions", publicName: "actions", isSignal: false, isRequired: false, transformFunction: null }, striped: { classPropertyName: "striped", publicName: "striped", isSignal: false, isRequired: false, transformFunction: null }, hoverable: { classPropertyName: "hoverable", publicName: "hoverable", isSignal: false, isRequired: false, transformFunction: null }, bordered: { classPropertyName: "bordered", publicName: "bordered", isSignal: false, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: false, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: false, isRequired: false, transformFunction: null }, scrollable: { classPropertyName: "scrollable", publicName: "scrollable", isSignal: false, isRequired: false, transformFunction: null }, scrollHeight: { classPropertyName: "scrollHeight", publicName: "scrollHeight", isSignal: false, isRequired: false, transformFunction: null }, height: { classPropertyName: "height", publicName: "height", isSignal: false, isRequired: false, transformFunction: null }, resizableColumns: { classPropertyName: "resizableColumns", publicName: "resizableColumns", isSignal: false, isRequired: false, transformFunction: null }, reorderableColumns: { classPropertyName: "reorderableColumns", publicName: "reorderableColumns", isSignal: false, isRequired: false, transformFunction: null }, rowExpandable: { classPropertyName: "rowExpandable", publicName: "rowExpandable", isSignal: false, isRequired: false, transformFunction: null } }, outputs: { onSort: "onSort", onFilter: "onFilter", selectionChange: "selectionChange", onSelectionChange: "onSelectionChange", onRowSelect: "onRowSelect", onRowUnselect: "onRowUnselect", onAction: "onAction", onRowExpand: "onRowExpand", onRowCollapse: "onRowCollapse" }, host: { listeners: { "document:mousemove": "onColumnResize($event)", "document:mouseup": "onColumnResizeEnd()" } }, ngImport: i0, template: "<div class=\"i-table-wrapper\" [ngClass]=\"getTableClasses()\">\n  <!-- Global Filter -->\n  @if (globalFilter) {\n  <div class=\"i-table-header\">\n    <div class=\"i-table-global-filter\">\n      <i-input-text\n        [useFloatLabel]=\"false\"\n        placeholder=\"Search...\"\n        [ngModel]=\"globalFilterValue()\"\n        (ngModelChange)=\"onGlobalFilterInput($event)\"\n        [fluid]=\"false\"\n        [icon]=\"'pi pi-search'\"\n      ></i-input-text>\n    </div>\n  </div>\n  }\n\n  <!-- Loading Overlay -->\n  @if (loading) {\n  <div class=\"i-table-loading-overlay\">\n    <i class=\"pi pi-spin pi-spinner i-table-loading-icon\"></i>\n  </div>\n  }\n\n  <!-- Scrollable Table Container -->\n  <div\n    class=\"i-table-container\"\n    [class.i-table-container--scrollable]=\"scrollable || height || scrollHeight\"\n    [style.max-height]=\"height || scrollHeight || null\"\n  >\n    <table class=\"i-table\">\n      <!-- Table Header (sticky when scrollable) -->\n      <thead>\n        <!-- Column Filters Row -->\n        @if (filterable) {\n        <tr class=\"i-table-filter-row\">\n          @if (selectionMode === 'multiple') {\n          <th class=\"i-table-selection-header\"></th>\n          } @if (rowExpandable) {\n          <th class=\"i-table-expand-header\"></th>\n          } @for (column of columns(); track trackByColumn($index, column)) {\n          @if (column.filterable !== false) {\n          <th [style.width]=\"getColumnWidth(column)\">\n            <input\n              type=\"text\"\n              class=\"i-table-column-filter\"\n              placeholder=\"Filter...\"\n              [ngModel]=\"columnFilters()[column.field] || ''\"\n              (ngModelChange)=\"onColumnFilterInput(column.field, $event)\"\n            />\n          </th>\n          } @else {\n          <th [style.width]=\"getColumnWidth(column)\"></th>\n          } } @if (showActions && actions.length > 0) {\n          <th class=\"i-table-actions-header\"></th>\n          }\n        </tr>\n        }\n\n        <!-- Column Headers Row -->\n        <tr>\n          @if (selectionMode === 'multiple') {\n          <th class=\"i-table-selection-header\">\n            <i-checkbox\n              [ngModel]=\"areAllRowsSelected()\"\n              [indeterminate]=\"areSomeRowsSelected()\"\n              (ngModelChange)=\"toggleAllSelection()\"\n            ></i-checkbox>\n          </th>\n          } @if (rowExpandable) {\n          <th class=\"i-table-expand-header\"></th>\n          } @for (column of columns(); track trackByColumn($index, column)) {\n          <th\n            [style.width]=\"getColumnWidth(column)\"\n            [style.text-align]=\"column.align || 'left'\"\n            [class.i-table-sortable-column]=\"sortable && column.sortable\"\n            [class.i-table-sorted]=\"sortField === column.field\"\n            (click)=\"onSortColumn(column)\"\n          >\n            <div class=\"i-table-header-content\">\n              <span class=\"i-table-header-text\">{{ column.header }}</span>\n              @if (sortable && column.sortable) {\n              <i [class]=\"getSortIcon(column)\" class=\"i-table-sort-icon\"></i>\n              }\n            </div>\n            @if (resizableColumns) {\n            <span\n              class=\"i-table-column-resizer\"\n              (mousedown)=\"onColumnResizeStart($event, column)\"\n            ></span>\n            }\n          </th>\n          } @if (showActions && actions.length > 0) {\n          <th class=\"i-table-actions-header\">Actions</th>\n          }\n        </tr>\n      </thead>\n\n      <!-- Table Body -->\n      <tbody>\n        @if (processedData().length === 0) {\n        <tr class=\"i-table-empty-row\">\n          <td\n            [attr.colspan]=\"\n              columns().length +\n              (selectionMode === 'multiple' ? 1 : 0) +\n              (rowExpandable ? 1 : 0) +\n              (showActions && actions.length > 0 ? 1 : 0)\n            \"\n          >\n            <i-empty-state-table></i-empty-state-table>\n          </td>\n        </tr>\n        } @else { @for (row of processedData(); track trackByRow($index, row);\n        let rowIndex = $index) {\n        <tr\n          [class.i-table-row-odd]=\"$odd\"\n          [class.i-table-row-selected]=\"isRowSelected(row)\"\n          (click)=\"toggleRowSelection(row)\"\n        >\n          @if (selectionMode === 'multiple') {\n          <td class=\"i-table-selection-cell\">\n            <i-checkbox\n              [ngModel]=\"isRowSelected(row)\"\n              (ngModelChange)=\"toggleRowSelection(row, $event)\"\n            ></i-checkbox>\n          </td>\n          } @if (rowExpandable) {\n          <td class=\"i-table-expand-cell\">\n            <i-button\n              severity=\"secondary\"\n              [text]=\"true\"\n              size=\"small\"\n              [icon]=\"\n                isRowExpanded(row)\n                  ? 'pi pi-chevron-down'\n                  : 'pi pi-chevron-right'\n              \"\n              (clicked)=\"toggleRowExpansion(row, $event)\"\n            ></i-button>\n          </td>\n          } @for (column of columns(); track trackByColumn($index, column)) {\n          <td\n            [style.text-align]=\"column.align || 'left'\"\n            [style.width]=\"getColumnWidth(column)\"\n          >\n            {{ formatCellValue(getCellValue(row, column.field), column) }}\n          </td>\n          } @if (showActions && actions.length > 0) {\n          <td class=\"i-table-actions-cell\">\n            <div class=\"i-table-actions\">\n              @for (action of actions; track action.id) {\n              <i-button\n                [severity]=\"action.severity || 'secondary'\"\n                [text]=\"true\"\n                size=\"small\"\n                [icon]=\"action.icon || ''\"\n                [disabled]=\"isActionDisabled(action, row)\"\n                (clicked)=\"onActionClick(action, row, $event)\"\n              >\n                @if (action.label) {\n                {{ action.label }}\n                }\n              </i-button>\n              }\n            </div>\n          </td>\n          }\n        </tr>\n        <!-- Expanded Row Content -->\n        @if (rowExpandable && isRowExpanded(row)) {\n        <tr class=\"i-table-expanded-row\">\n          <td\n            [attr.colspan]=\"\n              columns().length +\n              (selectionMode === 'multiple' ? 1 : 0) +\n              1 +\n              (showActions && actions.length > 0 ? 1 : 0)\n            \"\n          >\n            <div class=\"i-table-expanded-content\">\n              <pre>{{ row | json }}</pre>\n            </div>\n          </td>\n        </tr>\n        } } }\n      </tbody>\n    </table>\n  </div>\n</div>\n", styles: [".i-table-wrapper{color:var(--color-text-primary);background:var(--color-component-background)}.i-table-wrapper .i-table-header{background:var(--surface-section);border-bottom:1px solid var(--surface-border)}.i-table-wrapper .i-table-global-filter .i-input-text{background:var(--surface-ground)}.i-table-wrapper .i-table-loading-overlay{background:#ffffffb3}.i-table-wrapper .i-table-loading-overlay .i-table-loading-icon{color:var(--color-primary)}.i-table-wrapper table thead tr{background:var(--surface-section)}.i-table-wrapper table thead tr th{color:var(--color-text-primary);border-bottom:1px solid var(--surface-border)}.i-table-wrapper table thead tr th.i-table-sortable-column{cursor:pointer}.i-table-wrapper table thead tr th.i-table-sortable-column:hover{background:var(--surface-hover)}.i-table-wrapper table thead tr th.i-table-sorted{background:var(--surface-hover);color:var(--color-primary)}.i-table-wrapper table thead tr th .i-table-sort-icon{color:var(--color-text-secondary)}.i-table-wrapper table thead tr th.i-table-sorted .i-table-sort-icon{color:var(--color-primary)}.i-table-wrapper table thead .i-table-filter-row th{background:var(--surface-ground)}.i-table-wrapper table thead .i-table-filter-row .i-table-column-filter{border:1px solid var(--surface-border);background:var(--color-component-background);color:var(--color-text-primary)}.i-table-wrapper table thead .i-table-filter-row .i-table-column-filter:focus{border-color:var(--color-primary);box-shadow:0 2px 10px #0003;outline:none}.i-table-wrapper table thead .i-table-filter-row .i-table-column-filter::placeholder{color:var(--color-text-tertiary)}.i-table-wrapper table tbody tr{background:var(--color-component-background);border-bottom:1px solid var(--surface-border)}.i-table-wrapper table tbody tr td{color:var(--color-text-primary)}.i-table-wrapper table tbody tr.i-table-row-odd{background:var(--surface-ground)}.i-table-wrapper table tbody tr.i-table-row-selected{background:rgba(var(--color-primary-rgb, 59, 130, 246),.1)}.i-table-wrapper table tbody .i-table-expanded-row{background:var(--surface-section)}.i-table-wrapper table tbody .i-table-expanded-row .i-table-expanded-content{background:var(--surface-ground);border:1px solid var(--surface-border)}.i-table-wrapper table tbody .i-table-empty-row td{background:var(--surface-ground)}.i-table-wrapper.i-table--bordered table,.i-table-wrapper.i-table--bordered table th,.i-table-wrapper.i-table--bordered table td{border:1px solid var(--surface-border)}.i-table-wrapper.i-table--hoverable table tbody tr:not(.i-table-empty-row):not(.i-table-expanded-row):hover{background:var(--surface-hover)}.i-table-wrapper.i-table--hoverable table tbody tr:not(.i-table-empty-row):not(.i-table-expanded-row).i-table-row-selected:hover{background:rgba(var(--color-primary-rgb, 59, 130, 246),.15)}.i-table-wrapper .i-table-column-resizer{background:var(--surface-border)}.i-table-wrapper .i-table-column-resizer:hover{background:var(--color-primary)}:host-context([data-theme=dark]) .i-table-loading-overlay{background:#00000080}.i-table-wrapper{position:relative;display:block;border-radius:4px;overflow:visible}.i-table-wrapper.i-table--small table thead th{padding:8px 12px;font-size:13px}.i-table-wrapper.i-table--small table tbody td{padding:6px 12px;font-size:1em}.i-table-wrapper.i-table--small table .i-table-filter-row th{padding:4px 12px}.i-table-wrapper.i-table--large table thead th,.i-table-wrapper.i-table--large table tbody td{padding:16px 20px;font-size:16px}.i-table-wrapper.i-table--large table .i-table-filter-row th{padding:12px 20px}.i-table-wrapper.i-table--scrollable table{table-layout:fixed}.i-table-wrapper.i-table--loading{pointer-events:none;-webkit-user-select:none;user-select:none}.i-table-wrapper .i-table-header{display:flex;justify-content:flex-end;align-items:center;padding:12px 16px}.i-table-wrapper .i-table-header .i-table-global-filter{width:250px}.i-table-wrapper .i-table-loading-overlay{position:absolute;inset:0;z-index:10;display:flex;align-items:center;justify-content:center}.i-table-wrapper .i-table-loading-overlay .i-table-loading-icon{font-size:32px}.i-table-wrapper .i-table-container{overflow-x:auto;scrollbar-color:rgba(0,0,0,.2) transparent;scroll-behavior:smooth;scrollbar-color:var(--color-text-secondary) transparent;scrollbar-width:thin;scrollbar-color:var(--color-text-secondary) rgba(0,0,0,.05)}.i-table-wrapper .i-table-container::-webkit-scrollbar-track{background:transparent;border-radius:3px}.i-table-wrapper .i-table-container::-webkit-scrollbar-thumb{background:#0003;border-radius:3px;transition:background .2s ease}.i-table-wrapper .i-table-container::-webkit-scrollbar-thumb:hover{background:#00000059}.i-table-wrapper .i-table-container::-webkit-scrollbar-thumb:active{background:#00000080}.i-table-wrapper .i-table-container::-webkit-scrollbar-corner{background:transparent}.i-table-wrapper .i-table-container::-webkit-scrollbar-thumb{background:var(--color-text-secondary);opacity:.4}.i-table-wrapper .i-table-container::-webkit-scrollbar-thumb:hover{background:var(--color-text-primary);opacity:.6}.i-table-wrapper .i-table-container::-webkit-scrollbar-thumb:active{background:var(--color-primary);opacity:.7}.i-table-wrapper .i-table-container::-webkit-scrollbar{width:6px;height:6px}.i-table-wrapper .i-table-container::-webkit-scrollbar-track{background:#0000000d;border-radius:3px;margin:2px 0}.i-table-wrapper .i-table-container::-webkit-scrollbar-thumb{border-radius:3px;min-height:20px;background:var(--color-text-secondary);opacity:.6}.i-table-wrapper .i-table-container::-webkit-scrollbar-thumb:hover{background:var(--color-text-primary);opacity:.8}.i-table-wrapper .i-table-container::-webkit-scrollbar-thumb:active{background:var(--color-primary);opacity:.9}.i-table-wrapper .i-table-container--scrollable{overflow-y:auto}.i-table-wrapper .i-table-container--scrollable thead{position:sticky;top:0;z-index:2}.i-table-wrapper table{width:100%;border-collapse:collapse;table-layout:auto}.i-table-wrapper table thead tr th{position:relative;padding:12px 16px;font-weight:600;text-align:left;white-space:nowrap;-webkit-user-select:none;user-select:none}.i-table-wrapper table thead tr th .i-table-header-content{display:flex;align-items:center;gap:8px}.i-table-wrapper table thead tr th .i-table-header-content .i-table-header-text{flex:1}.i-table-wrapper table thead tr th .i-table-sort-icon{font-size:1em;opacity:.6;transition:opacity .15s ease,color .15s ease}.i-table-wrapper table thead tr th.i-table-sortable-column{transition:background-color .15s ease}.i-table-wrapper table thead tr th.i-table-sortable-column .i-table-sort-icon{opacity:.4}.i-table-wrapper table thead tr th.i-table-sortable-column:hover .i-table-sort-icon,.i-table-wrapper table thead tr th.i-table-sortable-column.i-table-sorted .i-table-sort-icon{opacity:1}.i-table-wrapper table thead tr th:hover .i-table-column-resizer{opacity:.5}.i-table-wrapper table thead .i-table-filter-row th{padding:8px 16px}.i-table-wrapper table thead .i-table-filter-row th .i-table-column-filter{width:100%;padding:6px 10px;font-size:1em;border-radius:4px;transition:border-color .15s ease,box-shadow .15s ease}.i-table-wrapper table tbody{display:table-row-group}.i-table-wrapper table tbody tr{transition:background-color .15s ease}.i-table-wrapper table tbody tr td{padding:12px 16px;vertical-align:middle}.i-table-wrapper table tbody .i-table-empty-row td{padding:40px 16px;text-align:center}.i-table-wrapper table tbody .i-table-expanded-row td{padding:0}.i-table-wrapper table tbody .i-table-expanded-row td .i-table-expanded-content{padding:16px;margin:8px 16px;border-radius:4px}.i-table-wrapper table tbody .i-table-expanded-row td .i-table-expanded-content pre{margin:0;font-family:monospace;font-size:1em;white-space:pre-wrap;word-wrap:break-word}.i-table-wrapper .i-table-selection-header,.i-table-wrapper .i-table-selection-cell,.i-table-wrapper .i-table-expand-header,.i-table-wrapper .i-table-expand-cell{width:50px;text-align:center}.i-table-wrapper .i-table-actions-header,.i-table-wrapper .i-table-actions-cell{width:auto;white-space:nowrap}.i-table-wrapper .i-table-actions-header .i-table-actions,.i-table-wrapper .i-table-actions-cell .i-table-actions{display:flex;gap:4px;justify-content:flex-end}.i-table-wrapper .i-table-column-resizer{position:absolute;right:0;top:50%;transform:translateY(-50%);width:4px;height:60%;cursor:col-resize;opacity:0;transition:opacity .15s ease,background-color .15s ease}.i-table-wrapper .i-table-column-resizer:hover{opacity:1}@media (max-width: 768px){.i-table-wrapper .i-table-header{padding:8px 12px}.i-table-wrapper .i-table-header .i-table-global-filter{width:100%}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { 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.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: "component", type: IInputText, selector: "i-input-text", inputs: ["label", "type", "id", "fluid", "forceFloated", "hideText", "useFloatLabel", "placeholder", "externalInvalid", "externalErrorMessage", "backgroundStyle", "icon", "readonly", "disabled", "errorMessages"] }, { kind: "component", type: IButton, selector: "i-button", inputs: ["severity", "size", "type", "disabled", "outlined", "raised", "text", "icon", "fluid"], outputs: ["clicked"] }, { kind: "component", type: ICheckbox, selector: "i-checkbox", inputs: ["label", "id", "disabled", "readonly", "size", "indeterminate", "checked"], outputs: ["onChange"] }, { kind: "component", type: EmptyStateTableComponent, selector: "i-empty-state-table", inputs: ["colorScheme"] }, { kind: "pipe", type: i1.JsonPipe, name: "json" }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.3", type: ITable, isStandalone: true, selector: "i-table", inputs: { data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: false, transformFunction: null }, columns: { classPropertyName: "columns", publicName: "columns", isSignal: true, isRequired: false, transformFunction: null }, groupedData: { classPropertyName: "groupedData", publicName: "groupedData", isSignal: true, isRequired: false, transformFunction: null }, emptyMessage: { classPropertyName: "emptyMessage", publicName: "emptyMessage", isSignal: false, isRequired: false, transformFunction: null }, sortable: { classPropertyName: "sortable", publicName: "sortable", isSignal: false, isRequired: false, transformFunction: null }, sortField: { classPropertyName: "sortField", publicName: "sortField", isSignal: false, isRequired: false, transformFunction: null }, sortOrder: { classPropertyName: "sortOrder", publicName: "sortOrder", isSignal: false, isRequired: false, transformFunction: null }, filterable: { classPropertyName: "filterable", publicName: "filterable", isSignal: false, isRequired: false, transformFunction: null }, globalFilter: { classPropertyName: "globalFilter", publicName: "globalFilter", isSignal: false, isRequired: false, transformFunction: null }, filterDelay: { classPropertyName: "filterDelay", publicName: "filterDelay", isSignal: false, isRequired: false, transformFunction: null }, selectionMode: { classPropertyName: "selectionMode", publicName: "selectionMode", isSignal: false, isRequired: false, transformFunction: null }, selection: { classPropertyName: "selection", publicName: "selection", isSignal: false, isRequired: false, transformFunction: null }, dataKey: { classPropertyName: "dataKey", publicName: "dataKey", isSignal: false, isRequired: false, transformFunction: null }, showActions: { classPropertyName: "showActions", publicName: "showActions", isSignal: false, isRequired: false, transformFunction: null }, actions: { classPropertyName: "actions", publicName: "actions", isSignal: false, isRequired: false, transformFunction: null }, striped: { classPropertyName: "striped", publicName: "striped", isSignal: false, isRequired: false, transformFunction: null }, hoverable: { classPropertyName: "hoverable", publicName: "hoverable", isSignal: false, isRequired: false, transformFunction: null }, bordered: { classPropertyName: "bordered", publicName: "bordered", isSignal: false, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: false, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: false, isRequired: false, transformFunction: null }, scrollable: { classPropertyName: "scrollable", publicName: "scrollable", isSignal: false, isRequired: false, transformFunction: null }, scrollHeight: { classPropertyName: "scrollHeight", publicName: "scrollHeight", isSignal: false, isRequired: false, transformFunction: null }, height: { classPropertyName: "height", publicName: "height", isSignal: false, isRequired: false, transformFunction: null }, resizableColumns: { classPropertyName: "resizableColumns", publicName: "resizableColumns", isSignal: false, isRequired: false, transformFunction: null }, reorderableColumns: { classPropertyName: "reorderableColumns", publicName: "reorderableColumns", isSignal: false, isRequired: false, transformFunction: null }, rowExpandable: { classPropertyName: "rowExpandable", publicName: "rowExpandable", isSignal: false, isRequired: false, transformFunction: null }, downloadable: { classPropertyName: "downloadable", publicName: "downloadable", isSignal: false, isRequired: false, transformFunction: null }, downloadMode: { classPropertyName: "downloadMode", publicName: "downloadMode", isSignal: false, isRequired: false, transformFunction: null }, downloadFormat: { classPropertyName: "downloadFormat", publicName: "downloadFormat", isSignal: false, isRequired: false, transformFunction: null }, downloadFilename: { classPropertyName: "downloadFilename", publicName: "downloadFilename", isSignal: false, isRequired: false, transformFunction: null } }, outputs: { onSort: "onSort", onFilter: "onFilter", selectionChange: "selectionChange", onSelectionChange: "onSelectionChange", onRowSelect: "onRowSelect", onRowUnselect: "onRowUnselect", onAction: "onAction", onRowExpand: "onRowExpand", onRowCollapse: "onRowCollapse", onDownload: "onDownload" }, host: { listeners: { "document:mousemove": "onColumnResize($event)", "document:mouseup": "onColumnResizeEnd()" } }, ngImport: i0, template: "<div class=\"i-table-wrapper\" [ngClass]=\"getTableClasses()\">\n  <!-- Table Header with ng-content, search, and download -->\n  @if (globalFilter || downloadable) {\n  <div class=\"i-table-header\">\n    <div class=\"i-table-header-start\">\n      <ng-content select=\"[header]\"></ng-content>\n    </div>\n    <div class=\"i-table-header-end\">\n      @if (globalFilter) {\n      <div class=\"i-table-global-filter\">\n        <i-input-text\n          [useFloatLabel]=\"false\"\n          placeholder=\"Search...\"\n          [ngModel]=\"globalFilterValue()\"\n          (ngModelChange)=\"onGlobalFilterInput($event)\"\n          [fluid]=\"false\"\n          [icon]=\"'pi pi-search'\"\n        ></i-input-text>\n      </div>\n      } @if (downloadable) {\n      <div class=\"i-table-download\">\n        <i-button\n          severity=\"secondary\"\n          [text]=\"true\"\n          size=\"small\"\n          icon=\"pi pi-download\"\n          label=\"Download\"\n          (clicked)=\"handleDownload()\"\n        ></i-button>\n      </div>\n      }\n    </div>\n  </div>\n  }\n\n  <!-- Loading Overlay -->\n  @if (loading) {\n  <div class=\"i-table-loading-overlay\">\n    <i class=\"pi pi-spin pi-spinner i-table-loading-icon\"></i>\n  </div>\n  }\n\n  <!-- Scrollable Table Container -->\n  <div\n    class=\"i-table-container\"\n    [class.i-table-container--scrollable]=\"scrollable || height || scrollHeight\"\n    [style.max-height]=\"height || scrollHeight || null\"\n  >\n    <table class=\"i-table\">\n      <!-- Table Header (sticky when scrollable) -->\n      <thead>\n        <!-- Column Filters Row -->\n        @if (filterable) {\n        <tr class=\"i-table-filter-row\">\n          @if (selectionMode === 'multiple') {\n          <th class=\"i-table-selection-header\"></th>\n          } @if (rowExpandable) {\n          <th class=\"i-table-expand-header\"></th>\n          } @for (column of columns(); track trackByColumn($index, column)) {\n          @if (column.filterable !== false) {\n          <th [style.width]=\"getColumnWidth(column)\">\n            <input\n              type=\"text\"\n              class=\"i-table-column-filter\"\n              placeholder=\"Filter...\"\n              [ngModel]=\"columnFilters()[column.field] || ''\"\n              (ngModelChange)=\"onColumnFilterInput(column.field, $event)\"\n            />\n          </th>\n          } @else {\n          <th [style.width]=\"getColumnWidth(column)\"></th>\n          } } @if (showActions && actions.length > 0) {\n          <th class=\"i-table-actions-header\"></th>\n          }\n        </tr>\n        }\n\n        <!-- Column Headers Row -->\n        <tr>\n          @if (selectionMode === 'multiple') {\n          <th class=\"i-table-selection-header\">\n            <i-checkbox\n              [checked]=\"areAllRowsSelected()\"\n              [indeterminate]=\"areSomeRowsSelected()\"\n              (onChange)=\"toggleAllSelection()\"\n            ></i-checkbox>\n          </th>\n          } @if (rowExpandable) {\n          <th class=\"i-table-expand-header\"></th>\n          } @for (column of columns(); track trackByColumn($index, column)) {\n          <th\n            [style.width]=\"getColumnWidth(column)\"\n            [style.text-align]=\"column.align || 'left'\"\n            [class.i-table-sortable-column]=\"sortable && column.sortable\"\n            [class.i-table-sorted]=\"sortField === column.field\"\n            (click)=\"onSortColumn(column)\"\n          >\n            <div class=\"i-table-header-content\">\n              <span class=\"i-table-header-text\">{{ column.header }}</span>\n              @if (sortable && column.sortable) {\n              <i [class]=\"getSortIcon(column)\" class=\"i-table-sort-icon\"></i>\n              }\n            </div>\n            @if (resizableColumns) {\n            <span\n              class=\"i-table-column-resizer\"\n              (mousedown)=\"onColumnResizeStart($event, column)\"\n            ></span>\n            }\n          </th>\n          } @if (showActions && actions.length > 0) {\n          <th class=\"i-table-actions-header\">Actions</th>\n          }\n        </tr>\n      </thead>\n\n      <!-- Table Body - Grouped Mode -->\n      @if (isGroupedMode()) {\n      <tbody>\n        @for (group of groupedData(); track $index) {\n        <!-- Group Header Row -->\n        <tr class=\"i-table-group-header\" [ngClass]=\"group.styleClass\">\n          <td\n            [attr.colspan]=\"\n              (getGroupColumns(group).length || columns().length) +\n              (selectionMode === 'multiple' ? 1 : 0) +\n              (rowExpandable ? 1 : 0) +\n              (showActions && actions.length > 0 ? 1 : 0)\n            \"\n            (click)=\"toggleGroupExpansion(group.label)\"\n          >\n            <div class=\"i-table-group-header-content\">\n              <i\n                [class]=\"\n                  isGroupExpanded(group.label)\n                    ? 'pi pi-chevron-down'\n                    : 'pi pi-chevron-right'\n                \"\n                class=\"i-table-group-toggle-icon\"\n              ></i>\n              <span class=\"i-table-group-label\">{{ group.label }}</span>\n              <span class=\"i-table-group-count\">({{ group.data.length }})</span>\n            </div>\n          </td>\n        </tr>\n\n        <!-- Group Column Headers (when expanded) -->\n        @if (isGroupExpanded(group.label) && group.columns) {\n        <tr class=\"i-table-group-columns-header\">\n          @if (selectionMode === 'multiple') {\n          <th class=\"i-table-selection-header\"></th>\n          } @if (rowExpandable) {\n          <th class=\"i-table-expand-header\"></th>\n          } @for (column of getGroupColumns(group); track trackByColumn($index,\n          column)) {\n          <th\n            [style.width]=\"getColumnWidth(column)\"\n            [style.text-align]=\"column.align || 'left'\"\n          >\n            {{ column.header }}\n          </th>\n          } @if (showActions && actions.length > 0) {\n          <th class=\"i-table-actions-header\">Actions</th>\n          }\n        </tr>\n        }\n\n        <!-- Group Data Rows (when expanded) -->\n        @if (isGroupExpanded(group.label)) { @if (group.data.length === 0) {\n        <tr class=\"i-table-empty-row\">\n          <td\n            [attr.colspan]=\"\n              (getGroupColumns(group).length || columns().length) +\n              (selectionMode === 'multiple' ? 1 : 0) +\n              (rowExpandable ? 1 : 0) +\n              (showActions && actions.length > 0 ? 1 : 0)\n            \"\n          >\n            <i-empty-state-table></i-empty-state-table>\n          </td>\n        </tr>\n        } @else { @for (row of group.data; track trackByRow($index, row)) {\n        <tr\n          class=\"i-table-group-row\"\n          [class.i-table-row-odd]=\"$odd\"\n          [class.i-table-row-selected]=\"isRowSelected(row)\"\n          (click)=\"toggleRowSelection(row)\"\n        >\n          @if (selectionMode === 'multiple') {\n          <td class=\"i-table-selection-cell\">\n            <i-checkbox\n              [checked]=\"isRowSelected(row)\"\n              (onChange)=\"toggleRowSelection(row)\"\n              (click)=\"$event.stopPropagation()\"\n            ></i-checkbox>\n          </td>\n          } @if (rowExpandable) {\n          <td class=\"i-table-expand-cell\">\n            <i-button\n              severity=\"secondary\"\n              [text]=\"true\"\n              size=\"small\"\n              [icon]=\"\n                isRowExpanded(row)\n                  ? 'pi pi-chevron-down'\n                  : 'pi pi-chevron-right'\n              \"\n              (clicked)=\"toggleRowExpansion(row, $event)\"\n            ></i-button>\n          </td>\n          } @for (column of getGroupColumns(group); track trackByColumn($index,\n          column)) {\n          <td\n            [style.text-align]=\"column.align || 'left'\"\n            [style.width]=\"getColumnWidth(column)\"\n          >\n            {{ formatCellValue(getCellValue(row, column.field), column) }}\n          </td>\n          } @if (showActions && actions.length > 0) {\n          <td class=\"i-table-actions-cell\">\n            <div class=\"i-table-actions\">\n              @for (action of actions; track action.id) {\n              <i-button\n                [severity]=\"action.severity || 'secondary'\"\n                [text]=\"true\"\n                size=\"small\"\n                [icon]=\"action.icon || ''\"\n                [disabled]=\"isActionDisabled(action, row)\"\n                (clicked)=\"onActionClick(action, row, $event)\"\n              >\n                @if (action.label) {\n                {{ action.label }}\n                }\n              </i-button>\n              }\n            </div>\n          </td>\n          }\n        </tr>\n        <!-- Expanded Row Content -->\n        @if (rowExpandable && isRowExpanded(row)) {\n        <tr class=\"i-table-expanded-row\">\n          <td\n            [attr.colspan]=\"\n              (getGroupColumns(group).length || columns().length) +\n              (selectionMode === 'multiple' ? 1 : 0) +\n              1 +\n              (showActions && actions.length > 0 ? 1 : 0)\n            \"\n          >\n            <div class=\"i-table-expanded-content\">\n              <pre>{{ row | json }}</pre>\n            </div>\n          </td>\n        </tr>\n        } } } } }\n      </tbody>\n      } @else {\n      <!-- Table Body - Regular Mode -->\n      <tbody>\n        @if (processedData().length === 0) {\n        <tr class=\"i-table-empty-row\">\n          <td\n            [attr.colspan]=\"\n              columns().length +\n              (selectionMode === 'multiple' ? 1 : 0) +\n              (rowExpandable ? 1 : 0) +\n              (showActions && actions.length > 0 ? 1 : 0)\n            \"\n          >\n            <i-empty-state-table></i-empty-state-table>\n          </td>\n        </tr>\n        } @else { @for (row of processedData(); track trackByRow($index, row);\n        let rowIndex = $index) {\n        <tr\n          [class.i-table-row-odd]=\"$odd\"\n          [class.i-table-row-selected]=\"isRowSelected(row)\"\n          (click)=\"toggleRowSelection(row)\"\n        >\n          @if (selectionMode === 'multiple') {\n          <td class=\"i-table-selection-cell\">\n            <i-checkbox\n              [checked]=\"isRowSelected(row)\"\n              (onChange)=\"toggleRowSelection(row)\"\n              (click)=\"$event.stopPropagation()\"\n            ></i-checkbox>\n          </td>\n          } @if (rowExpandable) {\n          <td class=\"i-table-expand-cell\">\n            <i-button\n              severity=\"secondary\"\n              [text]=\"true\"\n              size=\"small\"\n              [icon]=\"\n                isRowExpanded(row)\n                  ? 'pi pi-chevron-down'\n                  : 'pi pi-chevron-right'\n              \"\n              (clicked)=\"toggleRowExpansion(row, $event)\"\n            ></i-button>\n          </td>\n          } @for (column of columns(); track trackByColumn($index, column)) {\n          <td\n            [style.text-align]=\"column.align || 'left'\"\n            [style.width]=\"getColumnWidth(column)\"\n          >\n            {{ formatCellValue(getCellValue(row, column.field), column) }}\n          </td>\n          } @if (showActions && actions.length > 0) {\n          <td class=\"i-table-actions-cell\">\n            <div class=\"i-table-actions\">\n              @for (action of actions; track action.id) {\n              <i-button\n                [severity]=\"action.severity || 'secondary'\"\n                [text]=\"true\"\n                size=\"small\"\n                [icon]=\"action.icon || ''\"\n                [disabled]=\"isActionDisabled(action, row)\"\n                (clicked)=\"onActionClick(action, row, $event)\"\n              >\n                @if (action.label) {\n                {{ action.label }}\n                }\n              </i-button>\n              }\n            </div>\n          </td>\n          }\n        </tr>\n        <!-- Expanded Row Content -->\n        @if (rowExpandable && isRowExpanded(row)) {\n        <tr class=\"i-table-expanded-row\">\n          <td\n            [attr.colspan]=\"\n              columns().length +\n              (selectionMode === 'multiple' ? 1 : 0) +\n              1 +\n              (showActions && actions.length > 0 ? 1 : 0)\n            \"\n          >\n            <div class=\"i-table-expanded-content\">\n              <pre>{{ row | json }}</pre>\n            </div>\n          </td>\n        </tr>\n        } } }\n      </tbody>\n      }\n    </table>\n  </div>\n</div>\n", styles: [".i-table-wrapper{color:var(--color-text-primary);background:var(--color-component-background)}.i-table-wrapper .i-table-header{background:var(--surface-section);border-bottom:1px solid var(--surface-border)}.i-table-wrapper .i-table-global-filter .i-input-text{background:var(--surface-ground)}.i-table-wrapper .i-table-loading-overlay{background:#ffffffb3}.i-table-wrapper .i-table-loading-overlay .i-table-loading-icon{color:var(--color-primary)}.i-table-wrapper table thead tr{background:var(--surface-section)}.i-table-wrapper table thead tr th{color:var(--color-text-primary);border-bottom:1px solid var(--surface-border)}.i-table-wrapper table thead tr th.i-table-sortable-column{cursor:pointer}.i-table-wrapper table thead tr th.i-table-sortable-column:hover{background:var(--surface-hover)}.i-table-wrapper table thead tr th.i-table-sorted{background:var(--surface-hover);color:var(--color-primary)}.i-table-wrapper table thead tr th .i-table-sort-icon{color:var(--color-text-secondary)}.i-table-wrapper table thead tr th.i-table-sorted .i-table-sort-icon{color:var(--color-primary)}.i-table-wrapper table thead .i-table-filter-row th{background:var(--surface-ground)}.i-table-wrapper table thead .i-table-filter-row .i-table-column-filter{border:1px solid var(--surface-border);background:var(--color-component-background);color:var(--color-text-primary)}.i-table-wrapper table thead .i-table-filter-row .i-table-column-filter:focus{border-color:var(--color-primary);box-shadow:0 2px 10px #0003;outline:none}.i-table-wrapper table thead .i-table-filter-row .i-table-column-filter::placeholder{color:var(--color-text-tertiary)}.i-table-wrapper table tbody tr{background:var(--color-component-background);border-bottom:1px solid var(--surface-border)}.i-table-wrapper table tbody tr td{color:var(--color-text-primary)}.i-table-wrapper table tbody tr.i-table-row-odd{background:var(--surface-ground)}.i-table-wrapper table tbody tr.i-table-row-selected{background:rgba(var(--color-primary-rgb, 59, 130, 246),.1)}.i-table-wrapper table tbody .i-table-expanded-row{background:var(--surface-section)}.i-table-wrapper table tbody .i-table-expanded-row .i-table-expanded-content{background:var(--surface-ground);border:1px solid var(--surface-border)}.i-table-wrapper table tbody .i-table-empty-row td{background:var(--surface-ground)}.i-table-wrapper table tbody .i-table-group-header{background:var(--surface-section);border-bottom:2px solid var(--surface-border)}.i-table-wrapper table tbody .i-table-group-header td{color:var(--color-text-primary)}.i-table-wrapper table tbody .i-table-group-header:hover{background:var(--surface-hover)}.i-table-wrapper table tbody .i-table-group-header .i-table-group-toggle-icon,.i-table-wrapper table tbody .i-table-group-header .i-table-group-count{color:var(--color-text-secondary)}.i-table-wrapper table tbody .i-table-group-columns-header{background:var(--surface-ground);border-bottom:1px solid var(--surface-border)}.i-table-wrapper table tbody .i-table-group-columns-header th{color:var(--color-text-primary);border-bottom:1px solid var(--surface-border)}.i-table-wrapper table tbody .i-table-group-row{background:var(--color-component-background)}.i-table-wrapper table tbody .i-table-group-row.i-table-row-odd{background:var(--surface-ground)}.i-table-wrapper table tbody .i-table-group-row.i-table-row-selected{background:rgba(var(--color-primary-rgb, 59, 130, 246),.1)}.i-table-wrapper.i-table--bordered table,.i-table-wrapper.i-table--bordered table th,.i-table-wrapper.i-table--bordered table td{border:1px solid var(--surface-border)}.i-table-wrapper.i-table--hoverable table tbody tr:not(.i-table-empty-row):not(.i-table-expanded-row):not(.i-table-group-header):not(.i-table-group-columns-header):hover{background:var(--surface-hover)}.i-table-wrapper.i-table--hoverable table tbody tr:not(.i-table-empty-row):not(.i-table-expanded-row):not(.i-table-group-header):not(.i-table-group-columns-header).i-table-row-selected:hover{background:rgba(var(--color-primary-rgb, 59, 130, 246),.15)}.i-table-wrapper .i-table-column-resizer{background:var(--surface-border)}.i-table-wrapper .i-table-column-resizer:hover{background:var(--color-primary)}:host-context([data-theme=dark]) .i-table-loading-overlay{background:#00000080}.i-table-wrapper{position:relative;display:block;border-radius:4px;overflow:visible}.i-table-wrapper.i-table--small table thead th{padding:8px 12px;font-size:13px}.i-table-wrapper.i-table--small table tbody td{padding:6px 12px;font-size:1em}.i-table-wrapper.i-table--small table .i-table-filter-row th{padding:4px 12px}.i-table-wrapper.i-table--large table thead th,.i-table-wrapper.i-table--large table tbody td{padding:16px 20px;font-size:16px}.i-table-wrapper.i-table--large table .i-table-filter-row th{padding:12px 20px}.i-table-wrapper.i-table--scrollable table{table-layout:fixed}.i-table-wrapper.i-table--loading{pointer-events:none;-webkit-user-select:none;user-select:none}.i-table-wrapper .i-table-header{display:flex;justify-content:space-between;align-items:center;padding:12px 16px;gap:16px}.i-table-wrapper .i-table-header .i-table-header-start{flex:0 1 auto;display:flex;align-items:center}.i-table-wrapper .i-table-header .i-table-header-end{flex:0 1 auto;display:flex;align-items:center;gap:12px;margin-left:auto}.i-table-wrapper .i-table-header .i-table-header-end .i-table-global-filter{width:250px}.i-table-wrapper .i-table-header .i-table-header-end .i-table-download{flex-shrink:0}.i-table-wrapper .i-table-loading-overlay{position:absolute;inset:0;z-index:10;display:flex;align-items:center;justify-content:center}.i-table-wrapper .i-table-loading-overlay .i-table-loading-icon{font-size:32px}.i-table-wrapper .i-table-container{overflow-x:auto;scrollbar-color:rgba(0,0,0,.2) transparent;scroll-behavior:smooth;scrollbar-color:var(--color-text-secondary) transparent;scrollbar-width:thin;scrollbar-color:var(--color-text-secondary) rgba(0,0,0,.05)}.i-table-wrapper .i-table-container::-webkit-scrollbar-track{background:transparent;border-radius:3px}.i-table-wrapper .i-table-container::-webkit-scrollbar-thumb{background:#0003;border-radius:3px;transition:background .2s ease}.i-table-wrapper .i-table-container::-webkit-scrollbar-thumb:hover{background:#00000059}.i-table-wrapper .i-table-container::-webkit-scrollbar-thumb:active{background:#00000080}.i-table-wrapper .i-table-container::-webkit-scrollbar-corner{background:transparent}.i-table-wrapper .i-table-container::-webkit-scrollbar-thumb{background:var(--color-text-secondary);opacity:.4}.i-table-wrapper .i-table-container::-webkit-scrollbar-thumb:hover{background:var(--color-text-primary);opacity:.6}.i-table-wrapper .i-table-container::-webkit-scrollbar-thumb:active{background:var(--color-primary);opacity:.7}.i-table-wrapper .i-table-container::-webkit-scrollbar{width:6px;height:6px}.i-table-wrapper .i-table-container::-webkit-scrollbar-track{background:#0000000d;border-radius:3px;margin:2px 0}.i-table-wrapper .i-table-container::-webkit-scrollbar-thumb{border-radius:3px;min-height:20px;background:var(--color-text-secondary);opacity:.6}.i-table-wrapper .i-table-container::-webkit-scrollbar-thumb:hover{background:var(--color-text-primary);opacity:.8}.i-table-wrapper .i-table-container::-webkit-scrollbar-thumb:active{background:var(--color-primary);opacity:.9}.i-table-wrapper .i-table-container--scrollable{overflow-y:auto}.i-table-wrapper .i-table-container--scrollable thead{position:sticky;top:0;z-index:2}.i-table-wrapper table{width:100%;border-collapse:collapse;table-layout:auto}.i-table-wrapper table thead tr th{position:relative;padding:12px 16px;font-weight:600;text-align:left;white-space:nowrap;-webkit-user-select:none;user-select:none}.i-table-wrapper table thead tr th .i-table-header-content{display:flex;align-items:center;gap:8px}.i-table-wrapper table thead tr th .i-table-header-content .i-table-header-text{flex:1}.i-table-wrapper table thead tr th .i-table-sort-icon{font-size:1em;opacity:.6;transition:opacity .15s ease,color .15s ease}.i-table-wrapper table thead tr th.i-table-sortable-column{transition:background-color .15s ease}.i-table-wrapper table thead tr th.i-table-sortable-column .i-table-sort-icon{opacity:.4}.i-table-wrapper table thead tr th.i-table-sortable-column:hover .i-table-sort-icon,.i-table-wrapper table thead tr th.i-table-sortable-column.i-table-sorted .i-table-sort-icon{opacity:1}.i-table-wrapper table thead tr th:hover .i-table-column-resizer{opacity:.5}.i-table-wrapper table thead .i-table-filter-row th{padding:8px 16px}.i-table-wrapper table thead .i-table-filter-row th .i-table-column-filter{width:100%;padding:6px 10px;font-size:1em;border-radius:4px;transition:border-color .15s ease,box-shadow .15s ease}.i-table-wrapper table tbody{display:table-row-group}.i-table-wrapper table tbody tr{transition:background-color .15s ease}.i-table-wrapper table tbody tr td{padding:12px 16px;vertical-align:middle}.i-table-wrapper table tbody .i-table-empty-row td{padding:40px 16px;text-align:center}.i-table-wrapper table tbody .i-table-expanded-row td{padding:0}.i-table-wrapper table tbody .i-table-expanded-row td .i-table-expanded-content{padding:16px;margin:8px 16px;border-radius:4px}.i-table-wrapper table tbody .i-table-expanded-row td .i-table-expanded-content pre{margin:0;font-family:monospace;font-size:1em;white-space:pre-wrap;word-wrap:break-word}.i-table-wrapper table tbody .i-table-group-header td{padding:12px 16px;font-weight:600;cursor:pointer;-webkit-user-select:none;user-select:none;transition:background-color .15s ease}.i-table-wrapper table tbody .i-table-group-header td:hover{opacity:.8}.i-table-wrapper table tbody .i-table-group-header .i-table-group-header-content{display:flex;align-items:center;gap:8px}.i-table-wrapper table tbody .i-table-group-header .i-table-group-header-content .i-table-group-toggle-icon{font-size:.9em;transition:transform .15s ease}.i-table-wrapper table tbody .i-table-group-header .i-table-group-header-content .i-table-group-label{flex:1;font-size:1.1em}.i-table-wrapper table tbody .i-table-group-header .i-table-group-header-content .i-table-group-count{opacity:.7;font-size:.9em;font-weight:400}.i-table-wrapper table tbody .i-table-group-columns-header th{font-size:.95em;font-weight:600;padding:10px 16px}.i-table-wrapper table tbody .i-table-group-row td{padding-left:32px}.i-table-wrapper table tbody .i-table-group-row td:first-child{padding-left:16px}.i-table-wrapper .i-table-selection-header,.i-table-wrapper .i-table-selection-cell,.i-table-wrapper .i-table-expand-header,.i-table-wrapper .i-table-expand-cell{width:50px;text-align:center}.i-table-wrapper .i-table-actions-header,.i-table-wrapper .i-table-actions-cell{width:auto;white-space:nowrap}.i-table-wrapper .i-table-actions-header .i-table-actions,.i-table-wrapper .i-table-actions-cell .i-table-actions{display:flex;gap:4px;justify-content:flex-end}.i-table-wrapper .i-table-column-resizer{position:absolute;right:0;top:50%;transform:translateY(-50%);width:4px;height:60%;cursor:col-resize;opacity:0;transition:opacity .15s ease,background-color .15s ease}.i-table-wrapper .i-table-column-resizer:hover{opacity:1}@media (max-width: 768px){.i-table-wrapper .i-table-header{padding:8px 12px;flex-wrap:wrap}.i-table-wrapper .i-table-header .i-table-header-start{flex:1 1 100%;margin-bottom:8px}.i-table-wrapper .i-table-header .i-table-header-end{flex:1 1 100%;justify-content:flex-end}.i-table-wrapper .i-table-header .i-table-header-end .i-table-global-filter{flex:1;max-width:250px}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { 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.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: "component", type: IInputText, selector: "i-input-text", inputs: ["label", "type", "id", "fluid", "forceFloated", "hideText", "useFloatLabel", "placeholder", "externalInvalid", "externalErrorMessage", "backgroundStyle", "icon", "readonly", "disabled", "errorMessages"] }, { kind: "component", type: IButton, selector: "i-button", inputs: ["severity", "size", "type", "disabled", "outlined", "raised", "text", "icon", "fluid"], outputs: ["clicked"] }, { kind: "component", type: ICheckbox, selector: "i-checkbox", inputs: ["label", "id", "disabled", "readonly", "size", "indeterminate", "checked"], outputs: ["onChange"] }, { kind: "component", type: EmptyStateTableComponent, selector: "i-empty-state-table", inputs: ["colorScheme"] }, { kind: "pipe", type: i1.JsonPipe, name: "json" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: ITable, decorators: [{
             type: Component,
@@ -7130,7 +7327,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.3", ngImpor
                         IButton,
                         ICheckbox,
                         EmptyStateTableComponent,
-                    ], template: "<div class=\"i-table-wrapper\" [ngClass]=\"getTableClasses()\">\n  <!-- Global Filter -->\n  @if (globalFilter) {\n  <div class=\"i-table-header\">\n    <div class=\"i-table-global-filter\">\n      <i-input-text\n        [useFloatLabel]=\"false\"\n        placeholder=\"Search...\"\n        [ngModel]=\"globalFilterValue()\"\n        (ngModelChange)=\"onGlobalFilterInput($event)\"\n        [fluid]=\"false\"\n        [icon]=\"'pi pi-search'\"\n      ></i-input-text>\n    </div>\n  </div>\n  }\n\n  <!-- Loading Overlay -->\n  @if (loading) {\n  <div class=\"i-table-loading-overlay\">\n    <i class=\"pi pi-spin pi-spinner i-table-loading-icon\"></i>\n  </div>\n  }\n\n  <!-- Scrollable Table Container -->\n  <div\n    class=\"i-table-container\"\n    [class.i-table-container--scrollable]=\"scrollable || height || scrollHeight\"\n    [style.max-height]=\"height || scrollHeight || null\"\n  >\n    <table class=\"i-table\">\n      <!-- Table Header (sticky when scrollable) -->\n      <thead>\n        <!-- Column Filters Row -->\n        @if (filterable) {\n        <tr class=\"i-table-filter-row\">\n          @if (selectionMode === 'multiple') {\n          <th class=\"i-table-selection-header\"></th>\n          } @if (rowExpandable) {\n          <th class=\"i-table-expand-header\"></th>\n          } @for (column of columns(); track trackByColumn($index, column)) {\n          @if (column.filterable !== false) {\n          <th [style.width]=\"getColumnWidth(column)\">\n            <input\n              type=\"text\"\n              class=\"i-table-column-filter\"\n              placeholder=\"Filter...\"\n              [ngModel]=\"columnFilters()[column.field] || ''\"\n              (ngModelChange)=\"onColumnFilterInput(column.field, $event)\"\n            />\n          </th>\n          } @else {\n          <th [style.width]=\"getColumnWidth(column)\"></th>\n          } } @if (showActions && actions.length > 0) {\n          <th class=\"i-table-actions-header\"></th>\n          }\n        </tr>\n        }\n\n        <!-- Column Headers Row -->\n        <tr>\n          @if (selectionMode === 'multiple') {\n          <th class=\"i-table-selection-header\">\n            <i-checkbox\n              [ngModel]=\"areAllRowsSelected()\"\n              [indeterminate]=\"areSomeRowsSelected()\"\n              (ngModelChange)=\"toggleAllSelection()\"\n            ></i-checkbox>\n          </th>\n          } @if (rowExpandable) {\n          <th class=\"i-table-expand-header\"></th>\n          } @for (column of columns(); track trackByColumn($index, column)) {\n          <th\n            [style.width]=\"getColumnWidth(column)\"\n            [style.text-align]=\"column.align || 'left'\"\n            [class.i-table-sortable-column]=\"sortable && column.sortable\"\n            [class.i-table-sorted]=\"sortField === column.field\"\n            (click)=\"onSortColumn(column)\"\n          >\n            <div class=\"i-table-header-content\">\n              <span class=\"i-table-header-text\">{{ column.header }}</span>\n              @if (sortable && column.sortable) {\n              <i [class]=\"getSortIcon(column)\" class=\"i-table-sort-icon\"></i>\n              }\n            </div>\n            @if (resizableColumns) {\n            <span\n              class=\"i-table-column-resizer\"\n              (mousedown)=\"onColumnResizeStart($event, column)\"\n            ></span>\n            }\n          </th>\n          } @if (showActions && actions.length > 0) {\n          <th class=\"i-table-actions-header\">Actions</th>\n          }\n        </tr>\n      </thead>\n\n      <!-- Table Body -->\n      <tbody>\n        @if (processedData().length === 0) {\n        <tr class=\"i-table-empty-row\">\n          <td\n            [attr.colspan]=\"\n              columns().length +\n              (selectionMode === 'multiple' ? 1 : 0) +\n              (rowExpandable ? 1 : 0) +\n              (showActions && actions.length > 0 ? 1 : 0)\n            \"\n          >\n            <i-empty-state-table></i-empty-state-table>\n          </td>\n        </tr>\n        } @else { @for (row of processedData(); track trackByRow($index, row);\n        let rowIndex = $index) {\n        <tr\n          [class.i-table-row-odd]=\"$odd\"\n          [class.i-table-row-selected]=\"isRowSelected(row)\"\n          (click)=\"toggleRowSelection(row)\"\n        >\n          @if (selectionMode === 'multiple') {\n          <td class=\"i-table-selection-cell\">\n            <i-checkbox\n              [ngModel]=\"isRowSelected(row)\"\n              (ngModelChange)=\"toggleRowSelection(row, $event)\"\n            ></i-checkbox>\n          </td>\n          } @if (rowExpandable) {\n          <td class=\"i-table-expand-cell\">\n            <i-button\n              severity=\"secondary\"\n              [text]=\"true\"\n              size=\"small\"\n              [icon]=\"\n                isRowExpanded(row)\n                  ? 'pi pi-chevron-down'\n                  : 'pi pi-chevron-right'\n              \"\n              (clicked)=\"toggleRowExpansion(row, $event)\"\n            ></i-button>\n          </td>\n          } @for (column of columns(); track trackByColumn($index, column)) {\n          <td\n            [style.text-align]=\"column.align || 'left'\"\n            [style.width]=\"getColumnWidth(column)\"\n          >\n            {{ formatCellValue(getCellValue(row, column.field), column) }}\n          </td>\n          } @if (showActions && actions.length > 0) {\n          <td class=\"i-table-actions-cell\">\n            <div class=\"i-table-actions\">\n              @for (action of actions; track action.id) {\n              <i-button\n                [severity]=\"action.severity || 'secondary'\"\n                [text]=\"true\"\n                size=\"small\"\n                [icon]=\"action.icon || ''\"\n                [disabled]=\"isActionDisabled(action, row)\"\n                (clicked)=\"onActionClick(action, row, $event)\"\n              >\n                @if (action.label) {\n                {{ action.label }}\n                }\n              </i-button>\n              }\n            </div>\n          </td>\n          }\n        </tr>\n        <!-- Expanded Row Content -->\n        @if (rowExpandable && isRowExpanded(row)) {\n        <tr class=\"i-table-expanded-row\">\n          <td\n            [attr.colspan]=\"\n              columns().length +\n              (selectionMode === 'multiple' ? 1 : 0) +\n              1 +\n              (showActions && actions.length > 0 ? 1 : 0)\n            \"\n          >\n            <div class=\"i-table-expanded-content\">\n              <pre>{{ row | json }}</pre>\n            </div>\n          </td>\n        </tr>\n        } } }\n      </tbody>\n    </table>\n  </div>\n</div>\n", styles: [".i-table-wrapper{color:var(--color-text-primary);background:var(--color-component-background)}.i-table-wrapper .i-table-header{background:var(--surface-section);border-bottom:1px solid var(--surface-border)}.i-table-wrapper .i-table-global-filter .i-input-text{background:var(--surface-ground)}.i-table-wrapper .i-table-loading-overlay{background:#ffffffb3}.i-table-wrapper .i-table-loading-overlay .i-table-loading-icon{color:var(--color-primary)}.i-table-wrapper table thead tr{background:var(--surface-section)}.i-table-wrapper table thead tr th{color:var(--color-text-primary);border-bottom:1px solid var(--surface-border)}.i-table-wrapper table thead tr th.i-table-sortable-column{cursor:pointer}.i-table-wrapper table thead tr th.i-table-sortable-column:hover{background:var(--surface-hover)}.i-table-wrapper table thead tr th.i-table-sorted{background:var(--surface-hover);color:var(--color-primary)}.i-table-wrapper table thead tr th .i-table-sort-icon{color:var(--color-text-secondary)}.i-table-wrapper table thead tr th.i-table-sorted .i-table-sort-icon{color:var(--color-primary)}.i-table-wrapper table thead .i-table-filter-row th{background:var(--surface-ground)}.i-table-wrapper table thead .i-table-filter-row .i-table-column-filter{border:1px solid var(--surface-border);background:var(--color-component-background);color:var(--color-text-primary)}.i-table-wrapper table thead .i-table-filter-row .i-table-column-filter:focus{border-color:var(--color-primary);box-shadow:0 2px 10px #0003;outline:none}.i-table-wrapper table thead .i-table-filter-row .i-table-column-filter::placeholder{color:var(--color-text-tertiary)}.i-table-wrapper table tbody tr{background:var(--color-component-background);border-bottom:1px solid var(--surface-border)}.i-table-wrapper table tbody tr td{color:var(--color-text-primary)}.i-table-wrapper table tbody tr.i-table-row-odd{background:var(--surface-ground)}.i-table-wrapper table tbody tr.i-table-row-selected{background:rgba(var(--color-primary-rgb, 59, 130, 246),.1)}.i-table-wrapper table tbody .i-table-expanded-row{background:var(--surface-section)}.i-table-wrapper table tbody .i-table-expanded-row .i-table-expanded-content{background:var(--surface-ground);border:1px solid var(--surface-border)}.i-table-wrapper table tbody .i-table-empty-row td{background:var(--surface-ground)}.i-table-wrapper.i-table--bordered table,.i-table-wrapper.i-table--bordered table th,.i-table-wrapper.i-table--bordered table td{border:1px solid var(--surface-border)}.i-table-wrapper.i-table--hoverable table tbody tr:not(.i-table-empty-row):not(.i-table-expanded-row):hover{background:var(--surface-hover)}.i-table-wrapper.i-table--hoverable table tbody tr:not(.i-table-empty-row):not(.i-table-expanded-row).i-table-row-selected:hover{background:rgba(var(--color-primary-rgb, 59, 130, 246),.15)}.i-table-wrapper .i-table-column-resizer{background:var(--surface-border)}.i-table-wrapper .i-table-column-resizer:hover{background:var(--color-primary)}:host-context([data-theme=dark]) .i-table-loading-overlay{background:#00000080}.i-table-wrapper{position:relative;display:block;border-radius:4px;overflow:visible}.i-table-wrapper.i-table--small table thead th{padding:8px 12px;font-size:13px}.i-table-wrapper.i-table--small table tbody td{padding:6px 12px;font-size:1em}.i-table-wrapper.i-table--small table .i-table-filter-row th{padding:4px 12px}.i-table-wrapper.i-table--large table thead th,.i-table-wrapper.i-table--large table tbody td{padding:16px 20px;font-size:16px}.i-table-wrapper.i-table--large table .i-table-filter-row th{padding:12px 20px}.i-table-wrapper.i-table--scrollable table{table-layout:fixed}.i-table-wrapper.i-table--loading{pointer-events:none;-webkit-user-select:none;user-select:none}.i-table-wrapper .i-table-header{display:flex;justify-content:flex-end;align-items:center;padding:12px 16px}.i-table-wrapper .i-table-header .i-table-global-filter{width:250px}.i-table-wrapper .i-table-loading-overlay{position:absolute;inset:0;z-index:10;display:flex;align-items:center;justify-content:center}.i-table-wrapper .i-table-loading-overlay .i-table-loading-icon{font-size:32px}.i-table-wrapper .i-table-container{overflow-x:auto;scrollbar-color:rgba(0,0,0,.2) transparent;scroll-behavior:smooth;scrollbar-color:var(--color-text-secondary) transparent;scrollbar-width:thin;scrollbar-color:var(--color-text-secondary) rgba(0,0,0,.05)}.i-table-wrapper .i-table-container::-webkit-scrollbar-track{background:transparent;border-radius:3px}.i-table-wrapper .i-table-container::-webkit-scrollbar-thumb{background:#0003;border-radius:3px;transition:background .2s ease}.i-table-wrapper .i-table-container::-webkit-scrollbar-thumb:hover{background:#00000059}.i-table-wrapper .i-table-container::-webkit-scrollbar-thumb:active{background:#00000080}.i-table-wrapper .i-table-container::-webkit-scrollbar-corner{background:transparent}.i-table-wrapper .i-table-container::-webkit-scrollbar-thumb{background:var(--color-text-secondary);opacity:.4}.i-table-wrapper .i-table-container::-webkit-scrollbar-thumb:hover{background:var(--color-text-primary);opacity:.6}.i-table-wrapper .i-table-container::-webkit-scrollbar-thumb:active{background:var(--color-primary);opacity:.7}.i-table-wrapper .i-table-container::-webkit-scrollbar{width:6px;height:6px}.i-table-wrapper .i-table-container::-webkit-scrollbar-track{background:#0000000d;border-radius:3px;margin:2px 0}.i-table-wrapper .i-table-container::-webkit-scrollbar-thumb{border-radius:3px;min-height:20px;background:var(--color-text-secondary);opacity:.6}.i-table-wrapper .i-table-container::-webkit-scrollbar-thumb:hover{background:var(--color-text-primary);opacity:.8}.i-table-wrapper .i-table-container::-webkit-scrollbar-thumb:active{background:var(--color-primary);opacity:.9}.i-table-wrapper .i-table-container--scrollable{overflow-y:auto}.i-table-wrapper .i-table-container--scrollable thead{position:sticky;top:0;z-index:2}.i-table-wrapper table{width:100%;border-collapse:collapse;table-layout:auto}.i-table-wrapper table thead tr th{position:relative;padding:12px 16px;font-weight:600;text-align:left;white-space:nowrap;-webkit-user-select:none;user-select:none}.i-table-wrapper table thead tr th .i-table-header-content{display:flex;align-items:center;gap:8px}.i-table-wrapper table thead tr th .i-table-header-content .i-table-header-text{flex:1}.i-table-wrapper table thead tr th .i-table-sort-icon{font-size:1em;opacity:.6;transition:opacity .15s ease,color .15s ease}.i-table-wrapper table thead tr th.i-table-sortable-column{transition:background-color .15s ease}.i-table-wrapper table thead tr th.i-table-sortable-column .i-table-sort-icon{opacity:.4}.i-table-wrapper table thead tr th.i-table-sortable-column:hover .i-table-sort-icon,.i-table-wrapper table thead tr th.i-table-sortable-column.i-table-sorted .i-table-sort-icon{opacity:1}.i-table-wrapper table thead tr th:hover .i-table-column-resizer{opacity:.5}.i-table-wrapper table thead .i-table-filter-row th{padding:8px 16px}.i-table-wrapper table thead .i-table-filter-row th .i-table-column-filter{width:100%;padding:6px 10px;font-size:1em;border-radius:4px;transition:border-color .15s ease,box-shadow .15s ease}.i-table-wrapper table tbody{display:table-row-group}.i-table-wrapper table tbody tr{transition:background-color .15s ease}.i-table-wrapper table tbody tr td{padding:12px 16px;vertical-align:middle}.i-table-wrapper table tbody .i-table-empty-row td{padding:40px 16px;text-align:center}.i-table-wrapper table tbody .i-table-expanded-row td{padding:0}.i-table-wrapper table tbody .i-table-expanded-row td .i-table-expanded-content{padding:16px;margin:8px 16px;border-radius:4px}.i-table-wrapper table tbody .i-table-expanded-row td .i-table-expanded-content pre{margin:0;font-family:monospace;font-size:1em;white-space:pre-wrap;word-wrap:break-word}.i-table-wrapper .i-table-selection-header,.i-table-wrapper .i-table-selection-cell,.i-table-wrapper .i-table-expand-header,.i-table-wrapper .i-table-expand-cell{width:50px;text-align:center}.i-table-wrapper .i-table-actions-header,.i-table-wrapper .i-table-actions-cell{width:auto;white-space:nowrap}.i-table-wrapper .i-table-actions-header .i-table-actions,.i-table-wrapper .i-table-actions-cell .i-table-actions{display:flex;gap:4px;justify-content:flex-end}.i-table-wrapper .i-table-column-resizer{position:absolute;right:0;top:50%;transform:translateY(-50%);width:4px;height:60%;cursor:col-resize;opacity:0;transition:opacity .15s ease,background-color .15s ease}.i-table-wrapper .i-table-column-resizer:hover{opacity:1}@media (max-width: 768px){.i-table-wrapper .i-table-header{padding:8px 12px}.i-table-wrapper .i-table-header .i-table-global-filter{width:100%}}\n"] }]
+                    ], template: "<div class=\"i-table-wrapper\" [ngClass]=\"getTableClasses()\">\n  <!-- Table Header with ng-content, search, and download -->\n  @if (globalFilter || downloadable) {\n  <div class=\"i-table-header\">\n    <div class=\"i-table-header-start\">\n      <ng-content select=\"[header]\"></ng-content>\n    </div>\n    <div class=\"i-table-header-end\">\n      @if (globalFilter) {\n      <div class=\"i-table-global-filter\">\n        <i-input-text\n          [useFloatLabel]=\"false\"\n          placeholder=\"Search...\"\n          [ngModel]=\"globalFilterValue()\"\n          (ngModelChange)=\"onGlobalFilterInput($event)\"\n          [fluid]=\"false\"\n          [icon]=\"'pi pi-search'\"\n        ></i-input-text>\n      </div>\n      } @if (downloadable) {\n      <div class=\"i-table-download\">\n        <i-button\n          severity=\"secondary\"\n          [text]=\"true\"\n          size=\"small\"\n          icon=\"pi pi-download\"\n          label=\"Download\"\n          (clicked)=\"handleDownload()\"\n        ></i-button>\n      </div>\n      }\n    </div>\n  </div>\n  }\n\n  <!-- Loading Overlay -->\n  @if (loading) {\n  <div class=\"i-table-loading-overlay\">\n    <i class=\"pi pi-spin pi-spinner i-table-loading-icon\"></i>\n  </div>\n  }\n\n  <!-- Scrollable Table Container -->\n  <div\n    class=\"i-table-container\"\n    [class.i-table-container--scrollable]=\"scrollable || height || scrollHeight\"\n    [style.max-height]=\"height || scrollHeight || null\"\n  >\n    <table class=\"i-table\">\n      <!-- Table Header (sticky when scrollable) -->\n      <thead>\n        <!-- Column Filters Row -->\n        @if (filterable) {\n        <tr class=\"i-table-filter-row\">\n          @if (selectionMode === 'multiple') {\n          <th class=\"i-table-selection-header\"></th>\n          } @if (rowExpandable) {\n          <th class=\"i-table-expand-header\"></th>\n          } @for (column of columns(); track trackByColumn($index, column)) {\n          @if (column.filterable !== false) {\n          <th [style.width]=\"getColumnWidth(column)\">\n            <input\n              type=\"text\"\n              class=\"i-table-column-filter\"\n              placeholder=\"Filter...\"\n              [ngModel]=\"columnFilters()[column.field] || ''\"\n              (ngModelChange)=\"onColumnFilterInput(column.field, $event)\"\n            />\n          </th>\n          } @else {\n          <th [style.width]=\"getColumnWidth(column)\"></th>\n          } } @if (showActions && actions.length > 0) {\n          <th class=\"i-table-actions-header\"></th>\n          }\n        </tr>\n        }\n\n        <!-- Column Headers Row -->\n        <tr>\n          @if (selectionMode === 'multiple') {\n          <th class=\"i-table-selection-header\">\n            <i-checkbox\n              [checked]=\"areAllRowsSelected()\"\n              [indeterminate]=\"areSomeRowsSelected()\"\n              (onChange)=\"toggleAllSelection()\"\n            ></i-checkbox>\n          </th>\n          } @if (rowExpandable) {\n          <th class=\"i-table-expand-header\"></th>\n          } @for (column of columns(); track trackByColumn($index, column)) {\n          <th\n            [style.width]=\"getColumnWidth(column)\"\n            [style.text-align]=\"column.align || 'left'\"\n            [class.i-table-sortable-column]=\"sortable && column.sortable\"\n            [class.i-table-sorted]=\"sortField === column.field\"\n            (click)=\"onSortColumn(column)\"\n          >\n            <div class=\"i-table-header-content\">\n              <span class=\"i-table-header-text\">{{ column.header }}</span>\n              @if (sortable && column.sortable) {\n              <i [class]=\"getSortIcon(column)\" class=\"i-table-sort-icon\"></i>\n              }\n            </div>\n            @if (resizableColumns) {\n            <span\n              class=\"i-table-column-resizer\"\n              (mousedown)=\"onColumnResizeStart($event, column)\"\n            ></span>\n            }\n          </th>\n          } @if (showActions && actions.length > 0) {\n          <th class=\"i-table-actions-header\">Actions</th>\n          }\n        </tr>\n      </thead>\n\n      <!-- Table Body - Grouped Mode -->\n      @if (isGroupedMode()) {\n      <tbody>\n        @for (group of groupedData(); track $index) {\n        <!-- Group Header Row -->\n        <tr class=\"i-table-group-header\" [ngClass]=\"group.styleClass\">\n          <td\n            [attr.colspan]=\"\n              (getGroupColumns(group).length || columns().length) +\n              (selectionMode === 'multiple' ? 1 : 0) +\n              (rowExpandable ? 1 : 0) +\n              (showActions && actions.length > 0 ? 1 : 0)\n            \"\n            (click)=\"toggleGroupExpansion(group.label)\"\n          >\n            <div class=\"i-table-group-header-content\">\n              <i\n                [class]=\"\n                  isGroupExpanded(group.label)\n                    ? 'pi pi-chevron-down'\n                    : 'pi pi-chevron-right'\n                \"\n                class=\"i-table-group-toggle-icon\"\n              ></i>\n              <span class=\"i-table-group-label\">{{ group.label }}</span>\n              <span class=\"i-table-group-count\">({{ group.data.length }})</span>\n            </div>\n          </td>\n        </tr>\n\n        <!-- Group Column Headers (when expanded) -->\n        @if (isGroupExpanded(group.label) && group.columns) {\n        <tr class=\"i-table-group-columns-header\">\n          @if (selectionMode === 'multiple') {\n          <th class=\"i-table-selection-header\"></th>\n          } @if (rowExpandable) {\n          <th class=\"i-table-expand-header\"></th>\n          } @for (column of getGroupColumns(group); track trackByColumn($index,\n          column)) {\n          <th\n            [style.width]=\"getColumnWidth(column)\"\n            [style.text-align]=\"column.align || 'left'\"\n          >\n            {{ column.header }}\n          </th>\n          } @if (showActions && actions.length > 0) {\n          <th class=\"i-table-actions-header\">Actions</th>\n          }\n        </tr>\n        }\n\n        <!-- Group Data Rows (when expanded) -->\n        @if (isGroupExpanded(group.label)) { @if (group.data.length === 0) {\n        <tr class=\"i-table-empty-row\">\n          <td\n            [attr.colspan]=\"\n              (getGroupColumns(group).length || columns().length) +\n              (selectionMode === 'multiple' ? 1 : 0) +\n              (rowExpandable ? 1 : 0) +\n              (showActions && actions.length > 0 ? 1 : 0)\n            \"\n          >\n            <i-empty-state-table></i-empty-state-table>\n          </td>\n        </tr>\n        } @else { @for (row of group.data; track trackByRow($index, row)) {\n        <tr\n          class=\"i-table-group-row\"\n          [class.i-table-row-odd]=\"$odd\"\n          [class.i-table-row-selected]=\"isRowSelected(row)\"\n          (click)=\"toggleRowSelection(row)\"\n        >\n          @if (selectionMode === 'multiple') {\n          <td class=\"i-table-selection-cell\">\n            <i-checkbox\n              [checked]=\"isRowSelected(row)\"\n              (onChange)=\"toggleRowSelection(row)\"\n              (click)=\"$event.stopPropagation()\"\n            ></i-checkbox>\n          </td>\n          } @if (rowExpandable) {\n          <td class=\"i-table-expand-cell\">\n            <i-button\n              severity=\"secondary\"\n              [text]=\"true\"\n              size=\"small\"\n              [icon]=\"\n                isRowExpanded(row)\n                  ? 'pi pi-chevron-down'\n                  : 'pi pi-chevron-right'\n              \"\n              (clicked)=\"toggleRowExpansion(row, $event)\"\n            ></i-button>\n          </td>\n          } @for (column of getGroupColumns(group); track trackByColumn($index,\n          column)) {\n          <td\n            [style.text-align]=\"column.align || 'left'\"\n            [style.width]=\"getColumnWidth(column)\"\n          >\n            {{ formatCellValue(getCellValue(row, column.field), column) }}\n          </td>\n          } @if (showActions && actions.length > 0) {\n          <td class=\"i-table-actions-cell\">\n            <div class=\"i-table-actions\">\n              @for (action of actions; track action.id) {\n              <i-button\n                [severity]=\"action.severity || 'secondary'\"\n                [text]=\"true\"\n                size=\"small\"\n                [icon]=\"action.icon || ''\"\n                [disabled]=\"isActionDisabled(action, row)\"\n                (clicked)=\"onActionClick(action, row, $event)\"\n              >\n                @if (action.label) {\n                {{ action.label }}\n                }\n              </i-button>\n              }\n            </div>\n          </td>\n          }\n        </tr>\n        <!-- Expanded Row Content -->\n        @if (rowExpandable && isRowExpanded(row)) {\n        <tr class=\"i-table-expanded-row\">\n          <td\n            [attr.colspan]=\"\n              (getGroupColumns(group).length || columns().length) +\n              (selectionMode === 'multiple' ? 1 : 0) +\n              1 +\n              (showActions && actions.length > 0 ? 1 : 0)\n            \"\n          >\n            <div class=\"i-table-expanded-content\">\n              <pre>{{ row | json }}</pre>\n            </div>\n          </td>\n        </tr>\n        } } } } }\n      </tbody>\n      } @else {\n      <!-- Table Body - Regular Mode -->\n      <tbody>\n        @if (processedData().length === 0) {\n        <tr class=\"i-table-empty-row\">\n          <td\n            [attr.colspan]=\"\n              columns().length +\n              (selectionMode === 'multiple' ? 1 : 0) +\n              (rowExpandable ? 1 : 0) +\n              (showActions && actions.length > 0 ? 1 : 0)\n            \"\n          >\n            <i-empty-state-table></i-empty-state-table>\n          </td>\n        </tr>\n        } @else { @for (row of processedData(); track trackByRow($index, row);\n        let rowIndex = $index) {\n        <tr\n          [class.i-table-row-odd]=\"$odd\"\n          [class.i-table-row-selected]=\"isRowSelected(row)\"\n          (click)=\"toggleRowSelection(row)\"\n        >\n          @if (selectionMode === 'multiple') {\n          <td class=\"i-table-selection-cell\">\n            <i-checkbox\n              [checked]=\"isRowSelected(row)\"\n              (onChange)=\"toggleRowSelection(row)\"\n              (click)=\"$event.stopPropagation()\"\n            ></i-checkbox>\n          </td>\n          } @if (rowExpandable) {\n          <td class=\"i-table-expand-cell\">\n            <i-button\n              severity=\"secondary\"\n              [text]=\"true\"\n              size=\"small\"\n              [icon]=\"\n                isRowExpanded(row)\n                  ? 'pi pi-chevron-down'\n                  : 'pi pi-chevron-right'\n              \"\n              (clicked)=\"toggleRowExpansion(row, $event)\"\n            ></i-button>\n          </td>\n          } @for (column of columns(); track trackByColumn($index, column)) {\n          <td\n            [style.text-align]=\"column.align || 'left'\"\n            [style.width]=\"getColumnWidth(column)\"\n          >\n            {{ formatCellValue(getCellValue(row, column.field), column) }}\n          </td>\n          } @if (showActions && actions.length > 0) {\n          <td class=\"i-table-actions-cell\">\n            <div class=\"i-table-actions\">\n              @for (action of actions; track action.id) {\n              <i-button\n                [severity]=\"action.severity || 'secondary'\"\n                [text]=\"true\"\n                size=\"small\"\n                [icon]=\"action.icon || ''\"\n                [disabled]=\"isActionDisabled(action, row)\"\n                (clicked)=\"onActionClick(action, row, $event)\"\n              >\n                @if (action.label) {\n                {{ action.label }}\n                }\n              </i-button>\n              }\n            </div>\n          </td>\n          }\n        </tr>\n        <!-- Expanded Row Content -->\n        @if (rowExpandable && isRowExpanded(row)) {\n        <tr class=\"i-table-expanded-row\">\n          <td\n            [attr.colspan]=\"\n              columns().length +\n              (selectionMode === 'multiple' ? 1 : 0) +\n              1 +\n              (showActions && actions.length > 0 ? 1 : 0)\n            \"\n          >\n            <div class=\"i-table-expanded-content\">\n              <pre>{{ row | json }}</pre>\n            </div>\n          </td>\n        </tr>\n        } } }\n      </tbody>\n      }\n    </table>\n  </div>\n</div>\n", styles: [".i-table-wrapper{color:var(--color-text-primary);background:var(--color-component-background)}.i-table-wrapper .i-table-header{background:var(--surface-section);border-bottom:1px solid var(--surface-border)}.i-table-wrapper .i-table-global-filter .i-input-text{background:var(--surface-ground)}.i-table-wrapper .i-table-loading-overlay{background:#ffffffb3}.i-table-wrapper .i-table-loading-overlay .i-table-loading-icon{color:var(--color-primary)}.i-table-wrapper table thead tr{background:var(--surface-section)}.i-table-wrapper table thead tr th{color:var(--color-text-primary);border-bottom:1px solid var(--surface-border)}.i-table-wrapper table thead tr th.i-table-sortable-column{cursor:pointer}.i-table-wrapper table thead tr th.i-table-sortable-column:hover{background:var(--surface-hover)}.i-table-wrapper table thead tr th.i-table-sorted{background:var(--surface-hover);color:var(--color-primary)}.i-table-wrapper table thead tr th .i-table-sort-icon{color:var(--color-text-secondary)}.i-table-wrapper table thead tr th.i-table-sorted .i-table-sort-icon{color:var(--color-primary)}.i-table-wrapper table thead .i-table-filter-row th{background:var(--surface-ground)}.i-table-wrapper table thead .i-table-filter-row .i-table-column-filter{border:1px solid var(--surface-border);background:var(--color-component-background);color:var(--color-text-primary)}.i-table-wrapper table thead .i-table-filter-row .i-table-column-filter:focus{border-color:var(--color-primary);box-shadow:0 2px 10px #0003;outline:none}.i-table-wrapper table thead .i-table-filter-row .i-table-column-filter::placeholder{color:var(--color-text-tertiary)}.i-table-wrapper table tbody tr{background:var(--color-component-background);border-bottom:1px solid var(--surface-border)}.i-table-wrapper table tbody tr td{color:var(--color-text-primary)}.i-table-wrapper table tbody tr.i-table-row-odd{background:var(--surface-ground)}.i-table-wrapper table tbody tr.i-table-row-selected{background:rgba(var(--color-primary-rgb, 59, 130, 246),.1)}.i-table-wrapper table tbody .i-table-expanded-row{background:var(--surface-section)}.i-table-wrapper table tbody .i-table-expanded-row .i-table-expanded-content{background:var(--surface-ground);border:1px solid var(--surface-border)}.i-table-wrapper table tbody .i-table-empty-row td{background:var(--surface-ground)}.i-table-wrapper table tbody .i-table-group-header{background:var(--surface-section);border-bottom:2px solid var(--surface-border)}.i-table-wrapper table tbody .i-table-group-header td{color:var(--color-text-primary)}.i-table-wrapper table tbody .i-table-group-header:hover{background:var(--surface-hover)}.i-table-wrapper table tbody .i-table-group-header .i-table-group-toggle-icon,.i-table-wrapper table tbody .i-table-group-header .i-table-group-count{color:var(--color-text-secondary)}.i-table-wrapper table tbody .i-table-group-columns-header{background:var(--surface-ground);border-bottom:1px solid var(--surface-border)}.i-table-wrapper table tbody .i-table-group-columns-header th{color:var(--color-text-primary);border-bottom:1px solid var(--surface-border)}.i-table-wrapper table tbody .i-table-group-row{background:var(--color-component-background)}.i-table-wrapper table tbody .i-table-group-row.i-table-row-odd{background:var(--surface-ground)}.i-table-wrapper table tbody .i-table-group-row.i-table-row-selected{background:rgba(var(--color-primary-rgb, 59, 130, 246),.1)}.i-table-wrapper.i-table--bordered table,.i-table-wrapper.i-table--bordered table th,.i-table-wrapper.i-table--bordered table td{border:1px solid var(--surface-border)}.i-table-wrapper.i-table--hoverable table tbody tr:not(.i-table-empty-row):not(.i-table-expanded-row):not(.i-table-group-header):not(.i-table-group-columns-header):hover{background:var(--surface-hover)}.i-table-wrapper.i-table--hoverable table tbody tr:not(.i-table-empty-row):not(.i-table-expanded-row):not(.i-table-group-header):not(.i-table-group-columns-header).i-table-row-selected:hover{background:rgba(var(--color-primary-rgb, 59, 130, 246),.15)}.i-table-wrapper .i-table-column-resizer{background:var(--surface-border)}.i-table-wrapper .i-table-column-resizer:hover{background:var(--color-primary)}:host-context([data-theme=dark]) .i-table-loading-overlay{background:#00000080}.i-table-wrapper{position:relative;display:block;border-radius:4px;overflow:visible}.i-table-wrapper.i-table--small table thead th{padding:8px 12px;font-size:13px}.i-table-wrapper.i-table--small table tbody td{padding:6px 12px;font-size:1em}.i-table-wrapper.i-table--small table .i-table-filter-row th{padding:4px 12px}.i-table-wrapper.i-table--large table thead th,.i-table-wrapper.i-table--large table tbody td{padding:16px 20px;font-size:16px}.i-table-wrapper.i-table--large table .i-table-filter-row th{padding:12px 20px}.i-table-wrapper.i-table--scrollable table{table-layout:fixed}.i-table-wrapper.i-table--loading{pointer-events:none;-webkit-user-select:none;user-select:none}.i-table-wrapper .i-table-header{display:flex;justify-content:space-between;align-items:center;padding:12px 16px;gap:16px}.i-table-wrapper .i-table-header .i-table-header-start{flex:0 1 auto;display:flex;align-items:center}.i-table-wrapper .i-table-header .i-table-header-end{flex:0 1 auto;display:flex;align-items:center;gap:12px;margin-left:auto}.i-table-wrapper .i-table-header .i-table-header-end .i-table-global-filter{width:250px}.i-table-wrapper .i-table-header .i-table-header-end .i-table-download{flex-shrink:0}.i-table-wrapper .i-table-loading-overlay{position:absolute;inset:0;z-index:10;display:flex;align-items:center;justify-content:center}.i-table-wrapper .i-table-loading-overlay .i-table-loading-icon{font-size:32px}.i-table-wrapper .i-table-container{overflow-x:auto;scrollbar-color:rgba(0,0,0,.2) transparent;scroll-behavior:smooth;scrollbar-color:var(--color-text-secondary) transparent;scrollbar-width:thin;scrollbar-color:var(--color-text-secondary) rgba(0,0,0,.05)}.i-table-wrapper .i-table-container::-webkit-scrollbar-track{background:transparent;border-radius:3px}.i-table-wrapper .i-table-container::-webkit-scrollbar-thumb{background:#0003;border-radius:3px;transition:background .2s ease}.i-table-wrapper .i-table-container::-webkit-scrollbar-thumb:hover{background:#00000059}.i-table-wrapper .i-table-container::-webkit-scrollbar-thumb:active{background:#00000080}.i-table-wrapper .i-table-container::-webkit-scrollbar-corner{background:transparent}.i-table-wrapper .i-table-container::-webkit-scrollbar-thumb{background:var(--color-text-secondary);opacity:.4}.i-table-wrapper .i-table-container::-webkit-scrollbar-thumb:hover{background:var(--color-text-primary);opacity:.6}.i-table-wrapper .i-table-container::-webkit-scrollbar-thumb:active{background:var(--color-primary);opacity:.7}.i-table-wrapper .i-table-container::-webkit-scrollbar{width:6px;height:6px}.i-table-wrapper .i-table-container::-webkit-scrollbar-track{background:#0000000d;border-radius:3px;margin:2px 0}.i-table-wrapper .i-table-container::-webkit-scrollbar-thumb{border-radius:3px;min-height:20px;background:var(--color-text-secondary);opacity:.6}.i-table-wrapper .i-table-container::-webkit-scrollbar-thumb:hover{background:var(--color-text-primary);opacity:.8}.i-table-wrapper .i-table-container::-webkit-scrollbar-thumb:active{background:var(--color-primary);opacity:.9}.i-table-wrapper .i-table-container--scrollable{overflow-y:auto}.i-table-wrapper .i-table-container--scrollable thead{position:sticky;top:0;z-index:2}.i-table-wrapper table{width:100%;border-collapse:collapse;table-layout:auto}.i-table-wrapper table thead tr th{position:relative;padding:12px 16px;font-weight:600;text-align:left;white-space:nowrap;-webkit-user-select:none;user-select:none}.i-table-wrapper table thead tr th .i-table-header-content{display:flex;align-items:center;gap:8px}.i-table-wrapper table thead tr th .i-table-header-content .i-table-header-text{flex:1}.i-table-wrapper table thead tr th .i-table-sort-icon{font-size:1em;opacity:.6;transition:opacity .15s ease,color .15s ease}.i-table-wrapper table thead tr th.i-table-sortable-column{transition:background-color .15s ease}.i-table-wrapper table thead tr th.i-table-sortable-column .i-table-sort-icon{opacity:.4}.i-table-wrapper table thead tr th.i-table-sortable-column:hover .i-table-sort-icon,.i-table-wrapper table thead tr th.i-table-sortable-column.i-table-sorted .i-table-sort-icon{opacity:1}.i-table-wrapper table thead tr th:hover .i-table-column-resizer{opacity:.5}.i-table-wrapper table thead .i-table-filter-row th{padding:8px 16px}.i-table-wrapper table thead .i-table-filter-row th .i-table-column-filter{width:100%;padding:6px 10px;font-size:1em;border-radius:4px;transition:border-color .15s ease,box-shadow .15s ease}.i-table-wrapper table tbody{display:table-row-group}.i-table-wrapper table tbody tr{transition:background-color .15s ease}.i-table-wrapper table tbody tr td{padding:12px 16px;vertical-align:middle}.i-table-wrapper table tbody .i-table-empty-row td{padding:40px 16px;text-align:center}.i-table-wrapper table tbody .i-table-expanded-row td{padding:0}.i-table-wrapper table tbody .i-table-expanded-row td .i-table-expanded-content{padding:16px;margin:8px 16px;border-radius:4px}.i-table-wrapper table tbody .i-table-expanded-row td .i-table-expanded-content pre{margin:0;font-family:monospace;font-size:1em;white-space:pre-wrap;word-wrap:break-word}.i-table-wrapper table tbody .i-table-group-header td{padding:12px 16px;font-weight:600;cursor:pointer;-webkit-user-select:none;user-select:none;transition:background-color .15s ease}.i-table-wrapper table tbody .i-table-group-header td:hover{opacity:.8}.i-table-wrapper table tbody .i-table-group-header .i-table-group-header-content{display:flex;align-items:center;gap:8px}.i-table-wrapper table tbody .i-table-group-header .i-table-group-header-content .i-table-group-toggle-icon{font-size:.9em;transition:transform .15s ease}.i-table-wrapper table tbody .i-table-group-header .i-table-group-header-content .i-table-group-label{flex:1;font-size:1.1em}.i-table-wrapper table tbody .i-table-group-header .i-table-group-header-content .i-table-group-count{opacity:.7;font-size:.9em;font-weight:400}.i-table-wrapper table tbody .i-table-group-columns-header th{font-size:.95em;font-weight:600;padding:10px 16px}.i-table-wrapper table tbody .i-table-group-row td{padding-left:32px}.i-table-wrapper table tbody .i-table-group-row td:first-child{padding-left:16px}.i-table-wrapper .i-table-selection-header,.i-table-wrapper .i-table-selection-cell,.i-table-wrapper .i-table-expand-header,.i-table-wrapper .i-table-expand-cell{width:50px;text-align:center}.i-table-wrapper .i-table-actions-header,.i-table-wrapper .i-table-actions-cell{width:auto;white-space:nowrap}.i-table-wrapper .i-table-actions-header .i-table-actions,.i-table-wrapper .i-table-actions-cell .i-table-actions{display:flex;gap:4px;justify-content:flex-end}.i-table-wrapper .i-table-column-resizer{position:absolute;right:0;top:50%;transform:translateY(-50%);width:4px;height:60%;cursor:col-resize;opacity:0;transition:opacity .15s ease,background-color .15s ease}.i-table-wrapper .i-table-column-resizer:hover{opacity:1}@media (max-width: 768px){.i-table-wrapper .i-table-header{padding:8px 12px;flex-wrap:wrap}.i-table-wrapper .i-table-header .i-table-header-start{flex:1 1 100%;margin-bottom:8px}.i-table-wrapper .i-table-header .i-table-header-end{flex:1 1 100%;justify-content:flex-end}.i-table-wrapper .i-table-header .i-table-header-end .i-table-global-filter{flex:1;max-width:250px}}\n"] }]
         }], ctorParameters: () => [{ type: i0.ElementRef }], propDecorators: { emptyMessage: [{
                 type: Input
             }], sortable: [{
@@ -7195,6 +7392,16 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.3", ngImpor
                 type: Output
             }], onRowCollapse: [{
                 type: Output
+            }], downloadable: [{
+                type: Input
+            }], downloadMode: [{
+                type: Input
+            }], downloadFormat: [{
+                type: Input
+            }], downloadFilename: [{
+                type: Input
+            }], onDownload: [{
+                type: Output
             }], onColumnResize: [{
                 type: HostListener,
                 args: ['document:mousemove', ['$event']]