integra-ng 21.1.0 → 21.1.2

package/fesm2022/integra-ng.mjs

@@ -1643,11 +1643,11 @@ class ICard {
         this.closeCard.emit();
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: ICard, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.3", type: ICard, isStandalone: true, selector: "i-card", inputs: { title: "title", closable: "closable", fullHeight: "fullHeight" }, outputs: { closeCard: "closeCard" }, host: { properties: { "class.i-card--full-height": "this.isFullHeight" } }, ngImport: i0, template: "<div class=\"i-card\" [attr.id]=\"componentId\">\n  <!-- Header Section -->\n  <div class=\"i-card-header\">\n    <ng-content select=\"[slot=header]\">\n      @if (title) {\n      <span class=\"i-card-title\">{{ title }}</span>\n      }\n    </ng-content>\n    @if (closable) {\n    <i-button\n      [severity]=\"'contrast'\"\n      [text]=\"true\"\n      [icon]=\"'pi pi-times'\"\n      [size]=\"'small'\"\n      (click)=\"onCloseCard()\"\n    />\n    }\n  </div>\n\n  <!-- Content Section -->\n  <div class=\"i-card-body\">\n    <ng-content></ng-content>\n  </div>\n\n  <!-- Footer Section -->\n  <div class=\"i-card-footer\">\n    <ng-content select=\"[slot=footer]\"></ng-content>\n  </div>\n</div>\n", styles: [".i-card{background:var(--surface-card);color:var(--color-text-primary);border:1px solid var(--surface-border)}.i-card .i-card-close,.i-card .i-card-subtitle{color:var(--color-text-secondary)}:host{display:block}:host.i-card--full-height{height:100%}:host.i-card--full-height .i-card{height:100%;display:flex;flex-direction:column}:host.i-card--full-height .i-card .i-card-body{flex:1;overflow:auto}:host.i-card--full-height .i-card .i-card-body::-webkit-scrollbar-track{background:transparent;border-radius:3px}:host.i-card--full-height .i-card .i-card-body::-webkit-scrollbar-thumb{background:#0003;border-radius:3px;transition:background .2s ease}:host.i-card--full-height .i-card .i-card-body::-webkit-scrollbar-thumb:hover{background:#00000059}:host.i-card--full-height .i-card .i-card-body::-webkit-scrollbar-thumb:active{background:#00000080}:host.i-card--full-height .i-card .i-card-body::-webkit-scrollbar-corner{background:transparent}:host.i-card--full-height .i-card .i-card-body{scrollbar-width:thin;scrollbar-color:rgba(0,0,0,.2) transparent;scroll-behavior:smooth}:host.i-card--full-height .i-card .i-card-body::-webkit-scrollbar-thumb{background:var(--color-text-secondary);opacity:.4}:host.i-card--full-height .i-card .i-card-body::-webkit-scrollbar-thumb:hover{background:var(--color-text-primary);opacity:.6}:host.i-card--full-height .i-card .i-card-body::-webkit-scrollbar-thumb:active{background:var(--color-primary);opacity:.7}:host.i-card--full-height .i-card .i-card-body{scrollbar-color:var(--color-text-secondary) transparent}:host.i-card--full-height .i-card .i-card-body::-webkit-scrollbar{width:6px;height:6px}:host.i-card--full-height .i-card .i-card-body::-webkit-scrollbar-track{background:#0000000d;border-radius:3px;margin:2px 0}:host.i-card--full-height .i-card .i-card-body::-webkit-scrollbar-thumb{border-radius:3px;min-height:20px;background:var(--color-text-secondary);opacity:.6}:host.i-card--full-height .i-card .i-card-body::-webkit-scrollbar-thumb:hover{background:var(--color-text-primary);opacity:.8}:host.i-card--full-height .i-card .i-card-body::-webkit-scrollbar-thumb:active{background:var(--color-primary);opacity:.9}:host.i-card--full-height .i-card .i-card-body{scrollbar-width:thin;scrollbar-color:var(--color-text-secondary) rgba(0,0,0,.05)}.i-card{border-radius:8px;padding:12px}.i-card .i-card-header{display:flex;flex-direction:row;justify-content:space-between;align-items:center}.i-card .i-card-header .i-card-title{padding-left:12px;font-size:1.5em;font-weight:600}.i-card .i-card-body{padding:0 12px}.i-card .i-card-footer{padding:12px 0 0}.i-card .i-card-footer:empty{display:none}\n"], dependencies: [{ kind: "component", type: IButton, selector: "i-button", inputs: ["severity", "size", "type", "disabled", "outlined", "raised", "text", "icon", "fluid", "loading"], outputs: ["clicked"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.3", type: ICard, isStandalone: true, selector: "i-card", inputs: { title: "title", closable: "closable", fullHeight: "fullHeight" }, outputs: { closeCard: "closeCard" }, host: { properties: { "class.i-card--full-height": "this.isFullHeight" } }, ngImport: i0, template: "<div class=\"i-card\" [attr.id]=\"componentId\">\n  <!-- Header Section -->\n  <div class=\"i-card-header\">\n    <ng-content select=\"[slot=header]\">\n      @if (title) {\n      <span class=\"i-card-title\">{{ title }}</span>\n      }\n    </ng-content>\n    @if (closable) {\n    <i-button\n      [severity]=\"'contrast'\"\n      [text]=\"true\"\n      [icon]=\"'pi pi-times'\"\n      [size]=\"'small'\"\n      (click)=\"onCloseCard()\"\n    />\n    }\n  </div>\n\n  <!-- Content Section -->\n  <div class=\"i-card-body\">\n    <ng-content></ng-content>\n  </div>\n\n  <!-- Footer Section -->\n  <div class=\"i-card-footer\">\n    <ng-content select=\"[slot=footer]\"></ng-content>\n  </div>\n</div>\n", styles: [".i-card{background:var(--surface-card);color:var(--color-text-primary);border:1px solid var(--surface-border)}.i-card .i-card-close,.i-card .i-card-subtitle{color:var(--color-text-secondary)}:host{display:block}:host.i-card--full-height{height:100%}:host.i-card--full-height .i-card{height:100%;display:flex;flex-direction:column}:host.i-card--full-height .i-card .i-card-body{flex:1;overflow:auto}:host.i-card--full-height .i-card .i-card-body::-webkit-scrollbar-track{background:transparent;border-radius:3px}:host.i-card--full-height .i-card .i-card-body::-webkit-scrollbar-thumb{background:#0003;border-radius:3px;transition:background .2s ease}:host.i-card--full-height .i-card .i-card-body::-webkit-scrollbar-thumb:hover{background:#00000059}:host.i-card--full-height .i-card .i-card-body::-webkit-scrollbar-thumb:active{background:#00000080}:host.i-card--full-height .i-card .i-card-body::-webkit-scrollbar-corner{background:transparent}:host.i-card--full-height .i-card .i-card-body{scrollbar-width:thin;scrollbar-color:rgba(0,0,0,.2) transparent;scroll-behavior:smooth}:host.i-card--full-height .i-card .i-card-body::-webkit-scrollbar-thumb{background:var(--color-text-secondary);opacity:.4}:host.i-card--full-height .i-card .i-card-body::-webkit-scrollbar-thumb:hover{background:var(--color-text-primary);opacity:.6}:host.i-card--full-height .i-card .i-card-body::-webkit-scrollbar-thumb:active{background:var(--color-primary);opacity:.7}:host.i-card--full-height .i-card .i-card-body{scrollbar-color:var(--color-text-secondary) transparent}:host.i-card--full-height .i-card .i-card-body::-webkit-scrollbar{width:6px;height:6px}:host.i-card--full-height .i-card .i-card-body::-webkit-scrollbar-track{background:#0000000d;border-radius:3px;margin:2px 0}:host.i-card--full-height .i-card .i-card-body::-webkit-scrollbar-thumb{border-radius:3px;min-height:20px;background:var(--color-text-secondary);opacity:.6}:host.i-card--full-height .i-card .i-card-body::-webkit-scrollbar-thumb:hover{background:var(--color-text-primary);opacity:.8}:host.i-card--full-height .i-card .i-card-body::-webkit-scrollbar-thumb:active{background:var(--color-primary);opacity:.9}:host.i-card--full-height .i-card .i-card-body{scrollbar-width:thin;scrollbar-color:var(--color-text-secondary) rgba(0,0,0,.05)}.i-card{border-radius:8px;padding:12px}.i-card .i-card-header{display:flex;flex-direction:row;justify-content:space-between;align-items:center}.i-card .i-card-header .i-card-title{padding-left:12px;font-size:1.5em;font-weight:600}.i-card .i-card-body{padding:0 12px}.i-card .i-card-footer{padding:12px 0 0}.i-card .i-card-footer:empty{display:none}@media(max-width:768px){.i-card{border-radius:0}.i-card .i-card-body{padding-left:0;padding-right:0}}\n"], dependencies: [{ kind: "component", type: IButton, selector: "i-button", inputs: ["severity", "size", "type", "disabled", "outlined", "raised", "text", "icon", "fluid", "loading"], outputs: ["clicked"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: ICard, decorators: [{
             type: Component,
-            args: [{ selector: 'i-card', imports: [IButton], template: "<div class=\"i-card\" [attr.id]=\"componentId\">\n  <!-- Header Section -->\n  <div class=\"i-card-header\">\n    <ng-content select=\"[slot=header]\">\n      @if (title) {\n      <span class=\"i-card-title\">{{ title }}</span>\n      }\n    </ng-content>\n    @if (closable) {\n    <i-button\n      [severity]=\"'contrast'\"\n      [text]=\"true\"\n      [icon]=\"'pi pi-times'\"\n      [size]=\"'small'\"\n      (click)=\"onCloseCard()\"\n    />\n    }\n  </div>\n\n  <!-- Content Section -->\n  <div class=\"i-card-body\">\n    <ng-content></ng-content>\n  </div>\n\n  <!-- Footer Section -->\n  <div class=\"i-card-footer\">\n    <ng-content select=\"[slot=footer]\"></ng-content>\n  </div>\n</div>\n", styles: [".i-card{background:var(--surface-card);color:var(--color-text-primary);border:1px solid var(--surface-border)}.i-card .i-card-close,.i-card .i-card-subtitle{color:var(--color-text-secondary)}:host{display:block}:host.i-card--full-height{height:100%}:host.i-card--full-height .i-card{height:100%;display:flex;flex-direction:column}:host.i-card--full-height .i-card .i-card-body{flex:1;overflow:auto}:host.i-card--full-height .i-card .i-card-body::-webkit-scrollbar-track{background:transparent;border-radius:3px}:host.i-card--full-height .i-card .i-card-body::-webkit-scrollbar-thumb{background:#0003;border-radius:3px;transition:background .2s ease}:host.i-card--full-height .i-card .i-card-body::-webkit-scrollbar-thumb:hover{background:#00000059}:host.i-card--full-height .i-card .i-card-body::-webkit-scrollbar-thumb:active{background:#00000080}:host.i-card--full-height .i-card .i-card-body::-webkit-scrollbar-corner{background:transparent}:host.i-card--full-height .i-card .i-card-body{scrollbar-width:thin;scrollbar-color:rgba(0,0,0,.2) transparent;scroll-behavior:smooth}:host.i-card--full-height .i-card .i-card-body::-webkit-scrollbar-thumb{background:var(--color-text-secondary);opacity:.4}:host.i-card--full-height .i-card .i-card-body::-webkit-scrollbar-thumb:hover{background:var(--color-text-primary);opacity:.6}:host.i-card--full-height .i-card .i-card-body::-webkit-scrollbar-thumb:active{background:var(--color-primary);opacity:.7}:host.i-card--full-height .i-card .i-card-body{scrollbar-color:var(--color-text-secondary) transparent}:host.i-card--full-height .i-card .i-card-body::-webkit-scrollbar{width:6px;height:6px}:host.i-card--full-height .i-card .i-card-body::-webkit-scrollbar-track{background:#0000000d;border-radius:3px;margin:2px 0}:host.i-card--full-height .i-card .i-card-body::-webkit-scrollbar-thumb{border-radius:3px;min-height:20px;background:var(--color-text-secondary);opacity:.6}:host.i-card--full-height .i-card .i-card-body::-webkit-scrollbar-thumb:hover{background:var(--color-text-primary);opacity:.8}:host.i-card--full-height .i-card .i-card-body::-webkit-scrollbar-thumb:active{background:var(--color-primary);opacity:.9}:host.i-card--full-height .i-card .i-card-body{scrollbar-width:thin;scrollbar-color:var(--color-text-secondary) rgba(0,0,0,.05)}.i-card{border-radius:8px;padding:12px}.i-card .i-card-header{display:flex;flex-direction:row;justify-content:space-between;align-items:center}.i-card .i-card-header .i-card-title{padding-left:12px;font-size:1.5em;font-weight:600}.i-card .i-card-body{padding:0 12px}.i-card .i-card-footer{padding:12px 0 0}.i-card .i-card-footer:empty{display:none}\n"] }]
+            args: [{ selector: 'i-card', imports: [IButton], template: "<div class=\"i-card\" [attr.id]=\"componentId\">\n  <!-- Header Section -->\n  <div class=\"i-card-header\">\n    <ng-content select=\"[slot=header]\">\n      @if (title) {\n      <span class=\"i-card-title\">{{ title }}</span>\n      }\n    </ng-content>\n    @if (closable) {\n    <i-button\n      [severity]=\"'contrast'\"\n      [text]=\"true\"\n      [icon]=\"'pi pi-times'\"\n      [size]=\"'small'\"\n      (click)=\"onCloseCard()\"\n    />\n    }\n  </div>\n\n  <!-- Content Section -->\n  <div class=\"i-card-body\">\n    <ng-content></ng-content>\n  </div>\n\n  <!-- Footer Section -->\n  <div class=\"i-card-footer\">\n    <ng-content select=\"[slot=footer]\"></ng-content>\n  </div>\n</div>\n", styles: [".i-card{background:var(--surface-card);color:var(--color-text-primary);border:1px solid var(--surface-border)}.i-card .i-card-close,.i-card .i-card-subtitle{color:var(--color-text-secondary)}:host{display:block}:host.i-card--full-height{height:100%}:host.i-card--full-height .i-card{height:100%;display:flex;flex-direction:column}:host.i-card--full-height .i-card .i-card-body{flex:1;overflow:auto}:host.i-card--full-height .i-card .i-card-body::-webkit-scrollbar-track{background:transparent;border-radius:3px}:host.i-card--full-height .i-card .i-card-body::-webkit-scrollbar-thumb{background:#0003;border-radius:3px;transition:background .2s ease}:host.i-card--full-height .i-card .i-card-body::-webkit-scrollbar-thumb:hover{background:#00000059}:host.i-card--full-height .i-card .i-card-body::-webkit-scrollbar-thumb:active{background:#00000080}:host.i-card--full-height .i-card .i-card-body::-webkit-scrollbar-corner{background:transparent}:host.i-card--full-height .i-card .i-card-body{scrollbar-width:thin;scrollbar-color:rgba(0,0,0,.2) transparent;scroll-behavior:smooth}:host.i-card--full-height .i-card .i-card-body::-webkit-scrollbar-thumb{background:var(--color-text-secondary);opacity:.4}:host.i-card--full-height .i-card .i-card-body::-webkit-scrollbar-thumb:hover{background:var(--color-text-primary);opacity:.6}:host.i-card--full-height .i-card .i-card-body::-webkit-scrollbar-thumb:active{background:var(--color-primary);opacity:.7}:host.i-card--full-height .i-card .i-card-body{scrollbar-color:var(--color-text-secondary) transparent}:host.i-card--full-height .i-card .i-card-body::-webkit-scrollbar{width:6px;height:6px}:host.i-card--full-height .i-card .i-card-body::-webkit-scrollbar-track{background:#0000000d;border-radius:3px;margin:2px 0}:host.i-card--full-height .i-card .i-card-body::-webkit-scrollbar-thumb{border-radius:3px;min-height:20px;background:var(--color-text-secondary);opacity:.6}:host.i-card--full-height .i-card .i-card-body::-webkit-scrollbar-thumb:hover{background:var(--color-text-primary);opacity:.8}:host.i-card--full-height .i-card .i-card-body::-webkit-scrollbar-thumb:active{background:var(--color-primary);opacity:.9}:host.i-card--full-height .i-card .i-card-body{scrollbar-width:thin;scrollbar-color:var(--color-text-secondary) rgba(0,0,0,.05)}.i-card{border-radius:8px;padding:12px}.i-card .i-card-header{display:flex;flex-direction:row;justify-content:space-between;align-items:center}.i-card .i-card-header .i-card-title{padding-left:12px;font-size:1.5em;font-weight:600}.i-card .i-card-body{padding:0 12px}.i-card .i-card-footer{padding:12px 0 0}.i-card .i-card-footer:empty{display:none}@media(max-width:768px){.i-card{border-radius:0}.i-card .i-card-body{padding-left:0;padding-right:0}}\n"] }]
         }], propDecorators: { title: [{
                 type: Input
             }], closable: [{
@@ -3955,11 +3955,11 @@ class LayoutComponent {
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: LayoutComponent, deps: [{ token: LayoutService }, { token: i2.Router }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.3", type: LayoutComponent, isStandalone: true, selector: "i-layout", inputs: { config: "config", menuModel: "menuModel" }, host: { listeners: { "window:resize": "onWindowResize()" } }, viewQueries: [{ propertyName: "mainContainer", first: true, predicate: ["mainContainer"], descendants: true }], 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\" #mainContainer>\n        @if (config.enablePullToRefresh && layoutService.state().isMobileViewport) {\n          <div \n            class=\"pull-to-refresh-indicator\"\n            [style.transform]=\"'translateY(' + Math.max(-INDICATOR_OFFSET, pullDistance() - INDICATOR_OFFSET) + 'px)'\"\n            [style.opacity]=\"Math.min(1, pullDistance() / PULL_THRESHOLD)\"\n          >\n            <div class=\"refresh-icon\" [class.refreshing]=\"isRefreshing()\">\n              <i class=\"pi pi-refresh\"></i>\n            </div>\n            <div class=\"refresh-text\">\n              {{ isRefreshing() ? 'Refreshing...' : (pullDistance() >= PULL_THRESHOLD ? 'Release to refresh' : 'Pull to refresh') }}\n            </div>\n          </div>\n        }\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}.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{scrollbar-width:thin;scrollbar-color:rgba(0,0,0,.2) transparent;scroll-behavior:smooth}.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{scrollbar-color:var(--color-text-secondary) transparent}.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;position:relative}.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{scrollbar-width:thin;scrollbar-color:rgba(0,0,0,.2) transparent;scroll-behavior:smooth}.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{scrollbar-color:var(--color-text-secondary) transparent}.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{scrollbar-width:thin;scrollbar-color:var(--color-text-secondary) rgba(0,0,0,.05)}.layout .layout-wrapper .layout-body .layout-main-container .pull-to-refresh-indicator{position:absolute;top:0;left:0;right:0;height:60px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.5rem;pointer-events:none;z-index:10;transition:opacity .2s ease}.layout .layout-wrapper .layout-body .layout-main-container .pull-to-refresh-indicator .refresh-icon{font-size:1.5rem;color:var(--primary-color);transition:transform .3s ease}.layout .layout-wrapper .layout-body .layout-main-container .pull-to-refresh-indicator .refresh-icon.refreshing{animation:spin 1s linear infinite}.layout .layout-wrapper .layout-body .layout-main-container .pull-to-refresh-indicator .refresh-text{font-size:.875rem;color:var(--text-color-secondary);font-weight:500}.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}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}@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: "17.0.0", version: "21.0.3", type: LayoutComponent, isStandalone: true, selector: "i-layout", inputs: { config: "config", menuModel: "menuModel" }, host: { listeners: { "window:resize": "onWindowResize()" } }, viewQueries: [{ propertyName: "mainContainer", first: true, predicate: ["mainContainer"], descendants: true }], 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\" #mainContainer>\n        @if (config.enablePullToRefresh && layoutService.state().isMobileViewport) {\n          <div \n            class=\"pull-to-refresh-indicator\"\n            [style.transform]=\"'translateY(' + Math.max(-INDICATOR_OFFSET, pullDistance() - INDICATOR_OFFSET) + 'px)'\"\n            [style.opacity]=\"Math.min(1, pullDistance() / PULL_THRESHOLD)\"\n          >\n            <div class=\"refresh-icon\" [class.refreshing]=\"isRefreshing()\">\n              <i class=\"pi pi-refresh\"></i>\n            </div>\n            <div class=\"refresh-text\">\n              {{ isRefreshing() ? 'Refreshing...' : (pullDistance() >= PULL_THRESHOLD ? 'Release to refresh' : 'Pull to refresh') }}\n            </div>\n          </div>\n        }\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}.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{scrollbar-width:thin;scrollbar-color:rgba(0,0,0,.2) transparent;scroll-behavior:smooth}.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{scrollbar-color:var(--color-text-secondary) transparent}.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;position:relative}.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{scrollbar-width:thin;scrollbar-color:rgba(0,0,0,.2) transparent;scroll-behavior:smooth}.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{scrollbar-color:var(--color-text-secondary) transparent}.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{scrollbar-width:thin;scrollbar-color:var(--color-text-secondary) rgba(0,0,0,.05)}.layout .layout-wrapper .layout-body .layout-main-container .pull-to-refresh-indicator{position:absolute;top:0;left:0;right:0;height:60px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.5rem;pointer-events:none;z-index:10;transition:opacity .2s ease}.layout .layout-wrapper .layout-body .layout-main-container .pull-to-refresh-indicator .refresh-icon{font-size:1.5rem;color:var(--primary-color);transition:transform .3s ease}.layout .layout-wrapper .layout-body .layout-main-container .pull-to-refresh-indicator .refresh-icon.refreshing{animation:spin 1s linear infinite}.layout .layout-wrapper .layout-body .layout-main-container .pull-to-refresh-indicator .refresh-text{font-size:.875rem;color:var(--text-color-secondary);font-weight:500}.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}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}@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 0}}\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: "21.0.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\" #mainContainer>\n        @if (config.enablePullToRefresh && layoutService.state().isMobileViewport) {\n          <div \n            class=\"pull-to-refresh-indicator\"\n            [style.transform]=\"'translateY(' + Math.max(-INDICATOR_OFFSET, pullDistance() - INDICATOR_OFFSET) + 'px)'\"\n            [style.opacity]=\"Math.min(1, pullDistance() / PULL_THRESHOLD)\"\n          >\n            <div class=\"refresh-icon\" [class.refreshing]=\"isRefreshing()\">\n              <i class=\"pi pi-refresh\"></i>\n            </div>\n            <div class=\"refresh-text\">\n              {{ isRefreshing() ? 'Refreshing...' : (pullDistance() >= PULL_THRESHOLD ? 'Release to refresh' : 'Pull to refresh') }}\n            </div>\n          </div>\n        }\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}.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{scrollbar-width:thin;scrollbar-color:rgba(0,0,0,.2) transparent;scroll-behavior:smooth}.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{scrollbar-color:var(--color-text-secondary) transparent}.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;position:relative}.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{scrollbar-width:thin;scrollbar-color:rgba(0,0,0,.2) transparent;scroll-behavior:smooth}.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{scrollbar-color:var(--color-text-secondary) transparent}.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{scrollbar-width:thin;scrollbar-color:var(--color-text-secondary) rgba(0,0,0,.05)}.layout .layout-wrapper .layout-body .layout-main-container .pull-to-refresh-indicator{position:absolute;top:0;left:0;right:0;height:60px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.5rem;pointer-events:none;z-index:10;transition:opacity .2s ease}.layout .layout-wrapper .layout-body .layout-main-container .pull-to-refresh-indicator .refresh-icon{font-size:1.5rem;color:var(--primary-color);transition:transform .3s ease}.layout .layout-wrapper .layout-body .layout-main-container .pull-to-refresh-indicator .refresh-icon.refreshing{animation:spin 1s linear infinite}.layout .layout-wrapper .layout-body .layout-main-container .pull-to-refresh-indicator .refresh-text{font-size:.875rem;color:var(--text-color-secondary);font-weight:500}.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}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}@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\" #mainContainer>\n        @if (config.enablePullToRefresh && layoutService.state().isMobileViewport) {\n          <div \n            class=\"pull-to-refresh-indicator\"\n            [style.transform]=\"'translateY(' + Math.max(-INDICATOR_OFFSET, pullDistance() - INDICATOR_OFFSET) + 'px)'\"\n            [style.opacity]=\"Math.min(1, pullDistance() / PULL_THRESHOLD)\"\n          >\n            <div class=\"refresh-icon\" [class.refreshing]=\"isRefreshing()\">\n              <i class=\"pi pi-refresh\"></i>\n            </div>\n            <div class=\"refresh-text\">\n              {{ isRefreshing() ? 'Refreshing...' : (pullDistance() >= PULL_THRESHOLD ? 'Release to refresh' : 'Pull to refresh') }}\n            </div>\n          </div>\n        }\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}.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{scrollbar-width:thin;scrollbar-color:rgba(0,0,0,.2) transparent;scroll-behavior:smooth}.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{scrollbar-color:var(--color-text-secondary) transparent}.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;position:relative}.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{scrollbar-width:thin;scrollbar-color:rgba(0,0,0,.2) transparent;scroll-behavior:smooth}.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{scrollbar-color:var(--color-text-secondary) transparent}.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{scrollbar-width:thin;scrollbar-color:var(--color-text-secondary) rgba(0,0,0,.05)}.layout .layout-wrapper .layout-body .layout-main-container .pull-to-refresh-indicator{position:absolute;top:0;left:0;right:0;height:60px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.5rem;pointer-events:none;z-index:10;transition:opacity .2s ease}.layout .layout-wrapper .layout-body .layout-main-container .pull-to-refresh-indicator .refresh-icon{font-size:1.5rem;color:var(--primary-color);transition:transform .3s ease}.layout .layout-wrapper .layout-body .layout-main-container .pull-to-refresh-indicator .refresh-icon.refreshing{animation:spin 1s linear infinite}.layout .layout-wrapper .layout-body .layout-main-container .pull-to-refresh-indicator .refresh-text{font-size:.875rem;color:var(--text-color-secondary);font-weight:500}.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}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}@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 0}}\n"] }]
         }], ctorParameters: () => [{ type: LayoutService }, { type: i2.Router }], propDecorators: { config: [{
                 type: Input
             }], menuModel: [{
@@ -4400,7 +4400,7 @@ class IListbox {
                 useExisting: forwardRef(() => IListbox),
                 multi: true,
             },
-        ], viewQueries: [{ propertyName: "dropdownRef", first: true, predicate: ["dropdown"], descendants: true }, { propertyName: "searchInputRef", first: true, predicate: ["searchInput"], descendants: true }], ngImport: i0, template: "<div\n  class=\"i-listbox-wrapper\"\n  [class.i-listbox--fluid]=\"fluid\"\n  [class.i-listbox--disabled]=\"disabled\"\n  [class.i-listbox--invalid]=\"showErrors\"\n  [class.i-listbox--menu]=\"displayAsMenu\"\n  #dropdown\n>\n  <!-- Header -->\n  <div class=\"i-listbox-header\">\n    <div class=\"i-listbox-header-content\">\n      <span class=\"i-listbox-title\">{{ effectiveTitle }}</span>\n      @if (actionIcon) {\n      <i-button\n        [text]=\"true\"\n        [size]=\"'small'\"\n        [severity]=\"'contrast'\"\n        [icon]=\"actionIcon\"\n        [disabled]=\"disabled\"\n        (clicked)=\"onActionClick($event)\"\n        [attr.title]=\"actionTooltip\"\n      ></i-button>\n      }\n    </div>\n\n    <!-- Chips area for multiselect mode -->\n    @if (multiple && showChips) {\n    <div class=\"i-listbox-chips-wrapper\">\n      <i-chips\n        class=\"i-listbox-chips\"\n        [chips]=\"getSelectedChipItems()\"\n        [removable]=\"!disabled\"\n        [disabled]=\"disabled\"\n        [collapseOnOverflow]=\"true\"\n        [overflowLabel]=\"getDisplayLabel()\"\n        (removeChip)=\"onChipRemove($event)\"\n      ></i-chips>\n    </div>\n    }\n  </div>\n\n  <!-- Dropdown content -->\n  <div class=\"i-listbox-dropdown\">\n    @if (filter) {\n    <div class=\"i-listbox-filter\">\n      <i-input-text\n        #searchInput\n        [useFloatLabel]=\"false\"\n        placeholder=\"Search...\"\n        [ngModel]=\"filterValue()\"\n        (ngModelChange)=\"filterValue.set($event)\"\n        [fluid]=\"true\"\n        [icon]=\"'pi pi-search'\"\n      >\n      </i-input-text>\n    </div>\n    }\n\n    <div class=\"i-listbox-options\">\n      @for (option of filteredOptions(); track getOptionValue(option)) {\n      <div\n        class=\"i-listbox-option\"\n        [class.selected]=\"isOptionSelected(option)\"\n        [class.has-icon]=\"!multiple && getOptionIcon(option)\"\n        (click)=\"toggleOption(option)\"\n      >\n        <!-- Checkbox only in multiple mode -->\n        @if (multiple) {\n        <i-checkbox\n          [checked]=\"isOptionSelected(option)\"\n          [readonly]=\"true\"\n          size=\"small\"\n          class=\"i-listbox-checkbox\"\n        ></i-checkbox>\n        }\n\n        <!-- Left icon -->\n        @if (getOptionIcon(option) && !displayAsMenu) {\n        <i\n          [class]=\"getOptionIcon(option)\"\n          class=\"i-listbox-option-icon i-listbox-option-icon--left\"\n        ></i>\n        }\n\n        <span class=\"i-listbox-option-label\">\n          {{ getOptionLabel(option) }}\n        </span>\n\n        <!-- Right chevron for menu mode -->\n        @if (displayAsMenu) {\n        <i\n          class=\"pi pi-chevron-right i-listbox-option-icon i-listbox-option-icon--chevron\"\n        ></i>\n        }\n      </div>\n      } @if (filteredOptions().length === 0) {\n      <div class=\"i-listbox-no-options\">No options found</div>\n      }\n    </div>\n  </div>\n\n  <!-- Error message -->\n  @if (showErrors) {\n  <div class=\"i-listbox-error\">\n    {{ getErrorMessage() }}\n  </div>\n  }\n</div>\n", styles: [".i-listbox-wrapper{background:var(--color-component-background);border-color:var(--surface-border)}.i-listbox-wrapper.i-listbox--invalid .i-listbox-header{border-bottom-color:var(--color-danger)}.i-listbox-wrapper .i-listbox-header{background:var(--surface-card);border-bottom-color:var(--surface-border)}.i-listbox-wrapper .i-listbox-header .i-listbox-title{color:var(--color-text-primary)}.i-listbox-wrapper .i-listbox-header .i-listbox-action-btn{background:var(--color-primary);color:#fff}.i-listbox-wrapper .i-listbox-header .i-listbox-action-btn:hover:not(:disabled){background:var(--color-primary)}.i-listbox-wrapper .i-listbox-header .i-listbox-summary{color:var(--color-text-secondary)}.i-listbox-wrapper .i-listbox-dropdown{background:var(--color-component-background)}.i-listbox-wrapper .i-listbox-dropdown .i-listbox-filter{border-bottom-color:var(--surface-border)}.i-listbox-wrapper .i-listbox-dropdown .i-listbox-options{background:transparent}.i-listbox-wrapper .i-listbox-dropdown .i-listbox-options .i-listbox-option{color:var(--color-text-primary)}.i-listbox-wrapper .i-listbox-dropdown .i-listbox-options .i-listbox-option:hover,.i-listbox-wrapper .i-listbox-dropdown .i-listbox-options .i-listbox-option.selected{background-color:var(--surface-hover)}.i-listbox-wrapper .i-listbox-dropdown .i-listbox-options .i-listbox-option .i-listbox-checkbox{accent-color:var(--color-primary)}.i-listbox-wrapper .i-listbox-dropdown .i-listbox-options .i-listbox-option .i-listbox-option-icon--right{color:var(--color-text-tertiary)}.i-listbox-wrapper .i-listbox-dropdown .i-listbox-options .i-listbox-no-options{color:var(--color-text-secondary)}.i-listbox-wrapper .i-listbox-error{color:var(--color-danger);background:#ef44440d;border-top-color:var(--color-danger)}.i-listbox-wrapper{position:relative;display:flex;flex-direction:column;width:100%;height:100%;border-radius:4px;border:1px solid var(--surface-border);background:var(--color-component-background);overflow:hidden}.i-listbox-wrapper.i-listbox--fluid{width:100%}.i-listbox-wrapper.i-listbox--disabled{opacity:.6;pointer-events:none}.i-listbox-wrapper.i-listbox--invalid{border-color:var(--color-danger)}.i-listbox-wrapper .i-listbox-header{position:relative;display:flex;flex-direction:column;flex-shrink:0;gap:8px;padding:20px 14px;border-bottom:1px solid var(--surface-border);background:var(--surface-card)}.i-listbox-wrapper .i-listbox-header .i-listbox-header-content{display:flex;align-items:center;justify-content:space-between;min-height:24px}.i-listbox-wrapper .i-listbox-header .i-listbox-header-content .i-listbox-title{font-weight:600;font-size:1.15em;color:var(--color-text-primary)}.i-listbox-wrapper .i-listbox-header .i-listbox-header-content .i-listbox-action-btn{display:flex;align-items:center;justify-content:center;width:28px;height:28px;padding:0;border:none;border-radius:4px;background:var(--color-primary);color:#fff;cursor:pointer;transition:all .15s ease}.i-listbox-wrapper .i-listbox-header .i-listbox-header-content .i-listbox-action-btn:hover:not(:disabled){opacity:.85;transform:scale(1.05)}.i-listbox-wrapper .i-listbox-header .i-listbox-header-content .i-listbox-action-btn:active:not(:disabled){transform:scale(.95)}.i-listbox-wrapper .i-listbox-header .i-listbox-header-content .i-listbox-action-btn:disabled{opacity:.5;cursor:not-allowed}.i-listbox-wrapper .i-listbox-header .i-listbox-header-content .i-listbox-action-btn i{font-size:1em}.i-listbox-wrapper .i-listbox-header .i-listbox-chips-wrapper{height:32px}.i-listbox-wrapper .i-listbox-dropdown{display:flex;flex-direction:column;flex:1;min-height:0;overflow:hidden}.i-listbox-wrapper .i-listbox-dropdown .i-listbox-filter{flex-shrink:0;padding:8px;border-bottom:1px solid var(--surface-border)}.i-listbox-wrapper .i-listbox-dropdown .i-listbox-options{flex:1;min-height:0;overflow-x:hidden;overflow-y:auto}.i-listbox-wrapper .i-listbox-dropdown .i-listbox-options::-webkit-scrollbar-track{background:transparent;border-radius:3px}.i-listbox-wrapper .i-listbox-dropdown .i-listbox-options::-webkit-scrollbar-thumb{background:#0003;border-radius:3px;transition:background .2s ease}.i-listbox-wrapper .i-listbox-dropdown .i-listbox-options::-webkit-scrollbar-thumb:hover{background:#00000059}.i-listbox-wrapper .i-listbox-dropdown .i-listbox-options::-webkit-scrollbar-thumb:active{background:#00000080}.i-listbox-wrapper .i-listbox-dropdown .i-listbox-options::-webkit-scrollbar-corner{background:transparent}.i-listbox-wrapper .i-listbox-dropdown .i-listbox-options{scrollbar-width:thin;scrollbar-color:rgba(0,0,0,.2) transparent;scroll-behavior:smooth}.i-listbox-wrapper .i-listbox-dropdown .i-listbox-options::-webkit-scrollbar-thumb{background:var(--color-text-secondary);opacity:.4}.i-listbox-wrapper .i-listbox-dropdown .i-listbox-options::-webkit-scrollbar-thumb:hover{background:var(--color-text-primary);opacity:.6}.i-listbox-wrapper .i-listbox-dropdown .i-listbox-options::-webkit-scrollbar-thumb:active{background:var(--color-primary);opacity:.7}.i-listbox-wrapper .i-listbox-dropdown .i-listbox-options{scrollbar-color:var(--color-text-secondary) transparent}.i-listbox-wrapper .i-listbox-dropdown .i-listbox-options::-webkit-scrollbar{width:6px;height:6px}.i-listbox-wrapper .i-listbox-dropdown .i-listbox-options::-webkit-scrollbar-track{background:#0000000d;border-radius:3px;margin:2px 0}.i-listbox-wrapper .i-listbox-dropdown .i-listbox-options::-webkit-scrollbar-thumb{border-radius:3px;min-height:20px;background:var(--color-text-secondary);opacity:.6}.i-listbox-wrapper .i-listbox-dropdown .i-listbox-options::-webkit-scrollbar-thumb:hover{background:var(--color-text-primary);opacity:.8}.i-listbox-wrapper .i-listbox-dropdown .i-listbox-options::-webkit-scrollbar-thumb:active{background:var(--color-primary);opacity:.9}.i-listbox-wrapper .i-listbox-dropdown .i-listbox-options{scrollbar-width:thin;scrollbar-color:var(--color-text-secondary) rgba(0,0,0,.05)}.i-listbox-wrapper .i-listbox-dropdown .i-listbox-options .i-listbox-option{display:flex;align-items:center;gap:8px;padding:10px 12px;font-size:1em;cursor:pointer;transition:background-color .15s ease}.i-listbox-wrapper .i-listbox-dropdown .i-listbox-options .i-listbox-option.has-icon{padding:16px 12px}.i-listbox-wrapper .i-listbox-dropdown .i-listbox-options .i-listbox-option:hover{background-color:var(--surface-hover)}.i-listbox-wrapper .i-listbox-dropdown .i-listbox-options .i-listbox-option.selected{background-color:var(--surface-hover);font-weight:500}.i-listbox-wrapper .i-listbox-dropdown .i-listbox-options .i-listbox-option .i-listbox-checkbox{pointer-events:none;flex-shrink:0}.i-listbox-wrapper .i-listbox-dropdown .i-listbox-options .i-listbox-option .i-listbox-option-icon{font-size:16px;flex-shrink:0}.i-listbox-wrapper .i-listbox-dropdown .i-listbox-options .i-listbox-option .i-listbox-option-icon--left{color:var(--color-text-secondary)}.i-listbox-wrapper .i-listbox-dropdown .i-listbox-options .i-listbox-option .i-listbox-option-icon--chevron{color:var(--color-text-tertiary);margin-left:auto;font-size:12px;opacity:.6}.i-listbox-wrapper .i-listbox-dropdown .i-listbox-options .i-listbox-option .i-listbox-option-label{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.i-listbox-wrapper .i-listbox-dropdown .i-listbox-options .i-listbox-no-options{padding:16px;font-style:italic;text-align:center;color:var(--color-text-secondary)}.i-listbox-wrapper .i-listbox-error{flex-shrink:0;padding:8px 12px;font-size:.9em;color:var(--color-danger);background:#ef44440d;border-top:1px solid var(--color-danger)}.i-listbox-wrapper.i-listbox--menu .i-listbox-options .i-listbox-option{padding:14px 16px;font-size:1.05em}.i-listbox-wrapper.i-listbox--menu .i-listbox-options .i-listbox-option.has-icon{padding:18px 16px}.i-listbox-wrapper.i-listbox--menu .i-listbox-options .i-listbox-option.selected{background-color:var(--surface-hover);border-left:3px solid var(--color-primary);font-weight:600}.i-listbox-wrapper.i-listbox--menu .i-listbox-options .i-listbox-option .i-listbox-option-icon--chevron{opacity:.8}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: IChipsComponent, selector: "i-chips", inputs: ["chips", "removable", "disabled", "collapseOnOverflow", "overflowLabel", "boxed", "allowCloseAll", "label", "useFloatLabel", "showError"], outputs: ["closedAll", "removeChip"] }, { kind: "component", type: ICheckbox, selector: "i-checkbox", inputs: ["label", "id", "disabled", "readonly", "size", "indeterminate", "checked"], outputs: ["onChange"] }, { 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", "loading"], outputs: ["clicked"] }] });
+        ], viewQueries: [{ propertyName: "dropdownRef", first: true, predicate: ["dropdown"], descendants: true }, { propertyName: "searchInputRef", first: true, predicate: ["searchInput"], descendants: true }], ngImport: i0, template: "<div\n  class=\"i-listbox-wrapper\"\n  [class.i-listbox--fluid]=\"fluid\"\n  [class.i-listbox--disabled]=\"disabled\"\n  [class.i-listbox--invalid]=\"showErrors\"\n  [class.i-listbox--menu]=\"displayAsMenu\"\n  #dropdown\n>\n  <!-- Header -->\n  <div class=\"i-listbox-header\">\n    <div class=\"i-listbox-header-content\">\n      <span class=\"i-listbox-title\">{{ effectiveTitle }}</span>\n      @if (actionIcon) {\n      <i-button\n        [text]=\"true\"\n        [size]=\"'small'\"\n        [severity]=\"'contrast'\"\n        [icon]=\"actionIcon\"\n        [disabled]=\"disabled\"\n        (clicked)=\"onActionClick($event)\"\n        [attr.title]=\"actionTooltip\"\n      ></i-button>\n      }\n    </div>\n\n    <!-- Chips area for multiselect mode -->\n    @if (multiple && showChips) {\n    <div class=\"i-listbox-chips-wrapper\">\n      <i-chips\n        class=\"i-listbox-chips\"\n        [chips]=\"getSelectedChipItems()\"\n        [removable]=\"!disabled\"\n        [disabled]=\"disabled\"\n        [collapseOnOverflow]=\"true\"\n        [overflowLabel]=\"getDisplayLabel()\"\n        (removeChip)=\"onChipRemove($event)\"\n      ></i-chips>\n    </div>\n    }\n  </div>\n\n  <!-- Dropdown content -->\n  <div class=\"i-listbox-dropdown\">\n    @if (filter) {\n    <div class=\"i-listbox-filter\">\n      <i-input-text\n        #searchInput\n        [useFloatLabel]=\"false\"\n        placeholder=\"Search...\"\n        [ngModel]=\"filterValue()\"\n        (ngModelChange)=\"filterValue.set($event)\"\n        [fluid]=\"true\"\n        [icon]=\"'pi pi-search'\"\n      >\n      </i-input-text>\n    </div>\n    }\n\n    <div class=\"i-listbox-options\">\n      @for (option of filteredOptions(); track getOptionValue(option)) {\n      <div\n        class=\"i-listbox-option\"\n        [class.selected]=\"isOptionSelected(option)\"\n        [class.has-icon]=\"!multiple && getOptionIcon(option)\"\n        (click)=\"toggleOption(option)\"\n      >\n        <!-- Checkbox only in multiple mode -->\n        @if (multiple) {\n        <i-checkbox\n          [checked]=\"isOptionSelected(option)\"\n          [readonly]=\"true\"\n          size=\"small\"\n          class=\"i-listbox-checkbox\"\n        ></i-checkbox>\n        }\n\n        <!-- Left icon -->\n        @if (getOptionIcon(option) && !displayAsMenu) {\n        <i\n          [class]=\"getOptionIcon(option)\"\n          class=\"i-listbox-option-icon i-listbox-option-icon--left\"\n        ></i>\n        }\n\n        <span class=\"i-listbox-option-label\">\n          {{ getOptionLabel(option) }}\n        </span>\n\n        <!-- Right chevron for menu mode -->\n        @if (displayAsMenu) {\n        <i\n          class=\"pi pi-chevron-right i-listbox-option-icon i-listbox-option-icon--chevron\"\n        ></i>\n        }\n      </div>\n      } @if (filteredOptions().length === 0) {\n      <div class=\"i-listbox-no-options\">No options found</div>\n      }\n    </div>\n  </div>\n\n  <!-- Error message -->\n  @if (showErrors) {\n  <div class=\"i-listbox-error\">\n    {{ getErrorMessage() }}\n  </div>\n  }\n</div>\n", styles: [".i-listbox-wrapper{background:var(--color-component-background);border-color:var(--surface-border)}.i-listbox-wrapper.i-listbox--invalid .i-listbox-header{border-bottom-color:var(--color-danger)}.i-listbox-wrapper .i-listbox-header{background:var(--surface-card);border-bottom-color:var(--surface-border)}.i-listbox-wrapper .i-listbox-header .i-listbox-title{color:var(--color-text-primary)}.i-listbox-wrapper .i-listbox-header .i-listbox-action-btn{background:var(--color-primary);color:#fff}.i-listbox-wrapper .i-listbox-header .i-listbox-action-btn:hover:not(:disabled){background:var(--color-primary)}.i-listbox-wrapper .i-listbox-header .i-listbox-summary{color:var(--color-text-secondary)}.i-listbox-wrapper .i-listbox-dropdown{background:var(--color-component-background)}.i-listbox-wrapper .i-listbox-dropdown .i-listbox-filter{border-bottom-color:var(--surface-border)}.i-listbox-wrapper .i-listbox-dropdown .i-listbox-options{background:transparent}.i-listbox-wrapper .i-listbox-dropdown .i-listbox-options .i-listbox-option{color:var(--color-text-primary)}.i-listbox-wrapper .i-listbox-dropdown .i-listbox-options .i-listbox-option:hover,.i-listbox-wrapper .i-listbox-dropdown .i-listbox-options .i-listbox-option.selected{background-color:var(--surface-hover)}.i-listbox-wrapper .i-listbox-dropdown .i-listbox-options .i-listbox-option .i-listbox-checkbox{accent-color:var(--color-primary)}.i-listbox-wrapper .i-listbox-dropdown .i-listbox-options .i-listbox-option .i-listbox-option-icon--right{color:var(--color-text-tertiary)}.i-listbox-wrapper .i-listbox-dropdown .i-listbox-options .i-listbox-no-options{color:var(--color-text-secondary)}.i-listbox-wrapper .i-listbox-error{color:var(--color-danger);background:#ef44440d;border-top-color:var(--color-danger)}.i-listbox-wrapper{position:relative;display:flex;flex-direction:column;width:100%;height:100%;border-radius:4px;border:1px solid var(--surface-border);background:var(--color-component-background);overflow:hidden}.i-listbox-wrapper.i-listbox--fluid{width:100%}.i-listbox-wrapper.i-listbox--disabled{opacity:.6;pointer-events:none}.i-listbox-wrapper.i-listbox--invalid{border-color:var(--color-danger)}.i-listbox-wrapper .i-listbox-header{position:relative;display:flex;flex-direction:column;flex-shrink:0;gap:8px;padding:20px 14px;border-bottom:1px solid var(--surface-border);background:var(--surface-card)}.i-listbox-wrapper .i-listbox-header .i-listbox-header-content{display:flex;align-items:center;justify-content:space-between;min-height:24px}.i-listbox-wrapper .i-listbox-header .i-listbox-header-content .i-listbox-title{font-weight:600;font-size:1.15em;color:var(--color-text-primary)}.i-listbox-wrapper .i-listbox-header .i-listbox-header-content .i-listbox-action-btn{display:flex;align-items:center;justify-content:center;width:28px;height:28px;padding:0;border:none;border-radius:4px;background:var(--color-primary);color:#fff;cursor:pointer;transition:all .15s ease}.i-listbox-wrapper .i-listbox-header .i-listbox-header-content .i-listbox-action-btn:hover:not(:disabled){opacity:.85;transform:scale(1.05)}.i-listbox-wrapper .i-listbox-header .i-listbox-header-content .i-listbox-action-btn:active:not(:disabled){transform:scale(.95)}.i-listbox-wrapper .i-listbox-header .i-listbox-header-content .i-listbox-action-btn:disabled{opacity:.5;cursor:not-allowed}.i-listbox-wrapper .i-listbox-header .i-listbox-header-content .i-listbox-action-btn i{font-size:1em}.i-listbox-wrapper .i-listbox-header .i-listbox-chips-wrapper{height:32px}.i-listbox-wrapper .i-listbox-dropdown{display:flex;flex-direction:column;flex:1;min-height:0;overflow:hidden}.i-listbox-wrapper .i-listbox-dropdown .i-listbox-filter{flex-shrink:0;padding:8px;border-bottom:1px solid var(--surface-border)}.i-listbox-wrapper .i-listbox-dropdown .i-listbox-options{flex:1;min-height:0;overflow-x:hidden;overflow-y:auto}.i-listbox-wrapper .i-listbox-dropdown .i-listbox-options::-webkit-scrollbar-track{background:transparent;border-radius:3px}.i-listbox-wrapper .i-listbox-dropdown .i-listbox-options::-webkit-scrollbar-thumb{background:#0003;border-radius:3px;transition:background .2s ease}.i-listbox-wrapper .i-listbox-dropdown .i-listbox-options::-webkit-scrollbar-thumb:hover{background:#00000059}.i-listbox-wrapper .i-listbox-dropdown .i-listbox-options::-webkit-scrollbar-thumb:active{background:#00000080}.i-listbox-wrapper .i-listbox-dropdown .i-listbox-options::-webkit-scrollbar-corner{background:transparent}.i-listbox-wrapper .i-listbox-dropdown .i-listbox-options{scrollbar-width:thin;scrollbar-color:rgba(0,0,0,.2) transparent;scroll-behavior:smooth}.i-listbox-wrapper .i-listbox-dropdown .i-listbox-options::-webkit-scrollbar-thumb{background:var(--color-text-secondary);opacity:.4}.i-listbox-wrapper .i-listbox-dropdown .i-listbox-options::-webkit-scrollbar-thumb:hover{background:var(--color-text-primary);opacity:.6}.i-listbox-wrapper .i-listbox-dropdown .i-listbox-options::-webkit-scrollbar-thumb:active{background:var(--color-primary);opacity:.7}.i-listbox-wrapper .i-listbox-dropdown .i-listbox-options{scrollbar-color:var(--color-text-secondary) transparent}.i-listbox-wrapper .i-listbox-dropdown .i-listbox-options::-webkit-scrollbar{width:6px;height:6px}.i-listbox-wrapper .i-listbox-dropdown .i-listbox-options::-webkit-scrollbar-track{background:#0000000d;border-radius:3px;margin:2px 0}.i-listbox-wrapper .i-listbox-dropdown .i-listbox-options::-webkit-scrollbar-thumb{border-radius:3px;min-height:20px;background:var(--color-text-secondary);opacity:.6}.i-listbox-wrapper .i-listbox-dropdown .i-listbox-options::-webkit-scrollbar-thumb:hover{background:var(--color-text-primary);opacity:.8}.i-listbox-wrapper .i-listbox-dropdown .i-listbox-options::-webkit-scrollbar-thumb:active{background:var(--color-primary);opacity:.9}.i-listbox-wrapper .i-listbox-dropdown .i-listbox-options{scrollbar-width:thin;scrollbar-color:var(--color-text-secondary) rgba(0,0,0,.05)}.i-listbox-wrapper .i-listbox-dropdown .i-listbox-options .i-listbox-option{display:flex;align-items:center;gap:8px;padding:10px 12px;font-size:1em;cursor:pointer;transition:background-color .15s ease}.i-listbox-wrapper .i-listbox-dropdown .i-listbox-options .i-listbox-option.has-icon{padding:16px 12px}.i-listbox-wrapper .i-listbox-dropdown .i-listbox-options .i-listbox-option:hover{background-color:var(--surface-hover)}.i-listbox-wrapper .i-listbox-dropdown .i-listbox-options .i-listbox-option.selected{background-color:var(--surface-hover);font-weight:500}.i-listbox-wrapper .i-listbox-dropdown .i-listbox-options .i-listbox-option .i-listbox-checkbox{pointer-events:none;flex-shrink:0}.i-listbox-wrapper .i-listbox-dropdown .i-listbox-options .i-listbox-option .i-listbox-option-icon{font-size:16px;flex-shrink:0}.i-listbox-wrapper .i-listbox-dropdown .i-listbox-options .i-listbox-option .i-listbox-option-icon--left{color:var(--color-text-secondary)}.i-listbox-wrapper .i-listbox-dropdown .i-listbox-options .i-listbox-option .i-listbox-option-icon--chevron{color:var(--color-text-tertiary);margin-left:auto;font-size:12px;opacity:.6}.i-listbox-wrapper .i-listbox-dropdown .i-listbox-options .i-listbox-option .i-listbox-option-label{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.i-listbox-wrapper .i-listbox-dropdown .i-listbox-options .i-listbox-no-options{padding:16px;font-style:italic;text-align:center;color:var(--color-text-secondary)}.i-listbox-wrapper .i-listbox-error{flex-shrink:0;padding:8px 12px;font-size:.9em;color:var(--color-danger);background:#ef44440d;border-top:1px solid var(--color-danger)}.i-listbox-wrapper.i-listbox--menu .i-listbox-options .i-listbox-option{padding:14px 16px;font-size:1.05em}.i-listbox-wrapper.i-listbox--menu .i-listbox-options .i-listbox-option.has-icon{padding:18px 16px}.i-listbox-wrapper.i-listbox--menu .i-listbox-options .i-listbox-option.selected{background-color:var(--surface-hover);border-left:3px solid var(--color-primary);font-weight:600}.i-listbox-wrapper.i-listbox--menu .i-listbox-options .i-listbox-option .i-listbox-option-icon--chevron{opacity:.8}@media(max-width:991px){.i-listbox-wrapper .i-listbox-options{max-height:120px}}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: IChipsComponent, selector: "i-chips", inputs: ["chips", "removable", "disabled", "collapseOnOverflow", "overflowLabel", "boxed", "allowCloseAll", "label", "useFloatLabel", "showError"], outputs: ["closedAll", "removeChip"] }, { kind: "component", type: ICheckbox, selector: "i-checkbox", inputs: ["label", "id", "disabled", "readonly", "size", "indeterminate", "checked"], outputs: ["onChange"] }, { 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", "loading"], outputs: ["clicked"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: IListbox, decorators: [{
             type: Component,
@@ -4410,7 +4410,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.3", ngImpor
                             useExisting: forwardRef(() => IListbox),
                             multi: true,
                         },
-                    ], template: "<div\n  class=\"i-listbox-wrapper\"\n  [class.i-listbox--fluid]=\"fluid\"\n  [class.i-listbox--disabled]=\"disabled\"\n  [class.i-listbox--invalid]=\"showErrors\"\n  [class.i-listbox--menu]=\"displayAsMenu\"\n  #dropdown\n>\n  <!-- Header -->\n  <div class=\"i-listbox-header\">\n    <div class=\"i-listbox-header-content\">\n      <span class=\"i-listbox-title\">{{ effectiveTitle }}</span>\n      @if (actionIcon) {\n      <i-button\n        [text]=\"true\"\n        [size]=\"'small'\"\n        [severity]=\"'contrast'\"\n        [icon]=\"actionIcon\"\n        [disabled]=\"disabled\"\n        (clicked)=\"onActionClick($event)\"\n        [attr.title]=\"actionTooltip\"\n      ></i-button>\n      }\n    </div>\n\n    <!-- Chips area for multiselect mode -->\n    @if (multiple && showChips) {\n    <div class=\"i-listbox-chips-wrapper\">\n      <i-chips\n        class=\"i-listbox-chips\"\n        [chips]=\"getSelectedChipItems()\"\n        [removable]=\"!disabled\"\n        [disabled]=\"disabled\"\n        [collapseOnOverflow]=\"true\"\n        [overflowLabel]=\"getDisplayLabel()\"\n        (removeChip)=\"onChipRemove($event)\"\n      ></i-chips>\n    </div>\n    }\n  </div>\n\n  <!-- Dropdown content -->\n  <div class=\"i-listbox-dropdown\">\n    @if (filter) {\n    <div class=\"i-listbox-filter\">\n      <i-input-text\n        #searchInput\n        [useFloatLabel]=\"false\"\n        placeholder=\"Search...\"\n        [ngModel]=\"filterValue()\"\n        (ngModelChange)=\"filterValue.set($event)\"\n        [fluid]=\"true\"\n        [icon]=\"'pi pi-search'\"\n      >\n      </i-input-text>\n    </div>\n    }\n\n    <div class=\"i-listbox-options\">\n      @for (option of filteredOptions(); track getOptionValue(option)) {\n      <div\n        class=\"i-listbox-option\"\n        [class.selected]=\"isOptionSelected(option)\"\n        [class.has-icon]=\"!multiple && getOptionIcon(option)\"\n        (click)=\"toggleOption(option)\"\n      >\n        <!-- Checkbox only in multiple mode -->\n        @if (multiple) {\n        <i-checkbox\n          [checked]=\"isOptionSelected(option)\"\n          [readonly]=\"true\"\n          size=\"small\"\n          class=\"i-listbox-checkbox\"\n        ></i-checkbox>\n        }\n\n        <!-- Left icon -->\n        @if (getOptionIcon(option) && !displayAsMenu) {\n        <i\n          [class]=\"getOptionIcon(option)\"\n          class=\"i-listbox-option-icon i-listbox-option-icon--left\"\n        ></i>\n        }\n\n        <span class=\"i-listbox-option-label\">\n          {{ getOptionLabel(option) }}\n        </span>\n\n        <!-- Right chevron for menu mode -->\n        @if (displayAsMenu) {\n        <i\n          class=\"pi pi-chevron-right i-listbox-option-icon i-listbox-option-icon--chevron\"\n        ></i>\n        }\n      </div>\n      } @if (filteredOptions().length === 0) {\n      <div class=\"i-listbox-no-options\">No options found</div>\n      }\n    </div>\n  </div>\n\n  <!-- Error message -->\n  @if (showErrors) {\n  <div class=\"i-listbox-error\">\n    {{ getErrorMessage() }}\n  </div>\n  }\n</div>\n", styles: [".i-listbox-wrapper{background:var(--color-component-background);border-color:var(--surface-border)}.i-listbox-wrapper.i-listbox--invalid .i-listbox-header{border-bottom-color:var(--color-danger)}.i-listbox-wrapper .i-listbox-header{background:var(--surface-card);border-bottom-color:var(--surface-border)}.i-listbox-wrapper .i-listbox-header .i-listbox-title{color:var(--color-text-primary)}.i-listbox-wrapper .i-listbox-header .i-listbox-action-btn{background:var(--color-primary);color:#fff}.i-listbox-wrapper .i-listbox-header .i-listbox-action-btn:hover:not(:disabled){background:var(--color-primary)}.i-listbox-wrapper .i-listbox-header .i-listbox-summary{color:var(--color-text-secondary)}.i-listbox-wrapper .i-listbox-dropdown{background:var(--color-component-background)}.i-listbox-wrapper .i-listbox-dropdown .i-listbox-filter{border-bottom-color:var(--surface-border)}.i-listbox-wrapper .i-listbox-dropdown .i-listbox-options{background:transparent}.i-listbox-wrapper .i-listbox-dropdown .i-listbox-options .i-listbox-option{color:var(--color-text-primary)}.i-listbox-wrapper .i-listbox-dropdown .i-listbox-options .i-listbox-option:hover,.i-listbox-wrapper .i-listbox-dropdown .i-listbox-options .i-listbox-option.selected{background-color:var(--surface-hover)}.i-listbox-wrapper .i-listbox-dropdown .i-listbox-options .i-listbox-option .i-listbox-checkbox{accent-color:var(--color-primary)}.i-listbox-wrapper .i-listbox-dropdown .i-listbox-options .i-listbox-option .i-listbox-option-icon--right{color:var(--color-text-tertiary)}.i-listbox-wrapper .i-listbox-dropdown .i-listbox-options .i-listbox-no-options{color:var(--color-text-secondary)}.i-listbox-wrapper .i-listbox-error{color:var(--color-danger);background:#ef44440d;border-top-color:var(--color-danger)}.i-listbox-wrapper{position:relative;display:flex;flex-direction:column;width:100%;height:100%;border-radius:4px;border:1px solid var(--surface-border);background:var(--color-component-background);overflow:hidden}.i-listbox-wrapper.i-listbox--fluid{width:100%}.i-listbox-wrapper.i-listbox--disabled{opacity:.6;pointer-events:none}.i-listbox-wrapper.i-listbox--invalid{border-color:var(--color-danger)}.i-listbox-wrapper .i-listbox-header{position:relative;display:flex;flex-direction:column;flex-shrink:0;gap:8px;padding:20px 14px;border-bottom:1px solid var(--surface-border);background:var(--surface-card)}.i-listbox-wrapper .i-listbox-header .i-listbox-header-content{display:flex;align-items:center;justify-content:space-between;min-height:24px}.i-listbox-wrapper .i-listbox-header .i-listbox-header-content .i-listbox-title{font-weight:600;font-size:1.15em;color:var(--color-text-primary)}.i-listbox-wrapper .i-listbox-header .i-listbox-header-content .i-listbox-action-btn{display:flex;align-items:center;justify-content:center;width:28px;height:28px;padding:0;border:none;border-radius:4px;background:var(--color-primary);color:#fff;cursor:pointer;transition:all .15s ease}.i-listbox-wrapper .i-listbox-header .i-listbox-header-content .i-listbox-action-btn:hover:not(:disabled){opacity:.85;transform:scale(1.05)}.i-listbox-wrapper .i-listbox-header .i-listbox-header-content .i-listbox-action-btn:active:not(:disabled){transform:scale(.95)}.i-listbox-wrapper .i-listbox-header .i-listbox-header-content .i-listbox-action-btn:disabled{opacity:.5;cursor:not-allowed}.i-listbox-wrapper .i-listbox-header .i-listbox-header-content .i-listbox-action-btn i{font-size:1em}.i-listbox-wrapper .i-listbox-header .i-listbox-chips-wrapper{height:32px}.i-listbox-wrapper .i-listbox-dropdown{display:flex;flex-direction:column;flex:1;min-height:0;overflow:hidden}.i-listbox-wrapper .i-listbox-dropdown .i-listbox-filter{flex-shrink:0;padding:8px;border-bottom:1px solid var(--surface-border)}.i-listbox-wrapper .i-listbox-dropdown .i-listbox-options{flex:1;min-height:0;overflow-x:hidden;overflow-y:auto}.i-listbox-wrapper .i-listbox-dropdown .i-listbox-options::-webkit-scrollbar-track{background:transparent;border-radius:3px}.i-listbox-wrapper .i-listbox-dropdown .i-listbox-options::-webkit-scrollbar-thumb{background:#0003;border-radius:3px;transition:background .2s ease}.i-listbox-wrapper .i-listbox-dropdown .i-listbox-options::-webkit-scrollbar-thumb:hover{background:#00000059}.i-listbox-wrapper .i-listbox-dropdown .i-listbox-options::-webkit-scrollbar-thumb:active{background:#00000080}.i-listbox-wrapper .i-listbox-dropdown .i-listbox-options::-webkit-scrollbar-corner{background:transparent}.i-listbox-wrapper .i-listbox-dropdown .i-listbox-options{scrollbar-width:thin;scrollbar-color:rgba(0,0,0,.2) transparent;scroll-behavior:smooth}.i-listbox-wrapper .i-listbox-dropdown .i-listbox-options::-webkit-scrollbar-thumb{background:var(--color-text-secondary);opacity:.4}.i-listbox-wrapper .i-listbox-dropdown .i-listbox-options::-webkit-scrollbar-thumb:hover{background:var(--color-text-primary);opacity:.6}.i-listbox-wrapper .i-listbox-dropdown .i-listbox-options::-webkit-scrollbar-thumb:active{background:var(--color-primary);opacity:.7}.i-listbox-wrapper .i-listbox-dropdown .i-listbox-options{scrollbar-color:var(--color-text-secondary) transparent}.i-listbox-wrapper .i-listbox-dropdown .i-listbox-options::-webkit-scrollbar{width:6px;height:6px}.i-listbox-wrapper .i-listbox-dropdown .i-listbox-options::-webkit-scrollbar-track{background:#0000000d;border-radius:3px;margin:2px 0}.i-listbox-wrapper .i-listbox-dropdown .i-listbox-options::-webkit-scrollbar-thumb{border-radius:3px;min-height:20px;background:var(--color-text-secondary);opacity:.6}.i-listbox-wrapper .i-listbox-dropdown .i-listbox-options::-webkit-scrollbar-thumb:hover{background:var(--color-text-primary);opacity:.8}.i-listbox-wrapper .i-listbox-dropdown .i-listbox-options::-webkit-scrollbar-thumb:active{background:var(--color-primary);opacity:.9}.i-listbox-wrapper .i-listbox-dropdown .i-listbox-options{scrollbar-width:thin;scrollbar-color:var(--color-text-secondary) rgba(0,0,0,.05)}.i-listbox-wrapper .i-listbox-dropdown .i-listbox-options .i-listbox-option{display:flex;align-items:center;gap:8px;padding:10px 12px;font-size:1em;cursor:pointer;transition:background-color .15s ease}.i-listbox-wrapper .i-listbox-dropdown .i-listbox-options .i-listbox-option.has-icon{padding:16px 12px}.i-listbox-wrapper .i-listbox-dropdown .i-listbox-options .i-listbox-option:hover{background-color:var(--surface-hover)}.i-listbox-wrapper .i-listbox-dropdown .i-listbox-options .i-listbox-option.selected{background-color:var(--surface-hover);font-weight:500}.i-listbox-wrapper .i-listbox-dropdown .i-listbox-options .i-listbox-option .i-listbox-checkbox{pointer-events:none;flex-shrink:0}.i-listbox-wrapper .i-listbox-dropdown .i-listbox-options .i-listbox-option .i-listbox-option-icon{font-size:16px;flex-shrink:0}.i-listbox-wrapper .i-listbox-dropdown .i-listbox-options .i-listbox-option .i-listbox-option-icon--left{color:var(--color-text-secondary)}.i-listbox-wrapper .i-listbox-dropdown .i-listbox-options .i-listbox-option .i-listbox-option-icon--chevron{color:var(--color-text-tertiary);margin-left:auto;font-size:12px;opacity:.6}.i-listbox-wrapper .i-listbox-dropdown .i-listbox-options .i-listbox-option .i-listbox-option-label{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.i-listbox-wrapper .i-listbox-dropdown .i-listbox-options .i-listbox-no-options{padding:16px;font-style:italic;text-align:center;color:var(--color-text-secondary)}.i-listbox-wrapper .i-listbox-error{flex-shrink:0;padding:8px 12px;font-size:.9em;color:var(--color-danger);background:#ef44440d;border-top:1px solid var(--color-danger)}.i-listbox-wrapper.i-listbox--menu .i-listbox-options .i-listbox-option{padding:14px 16px;font-size:1.05em}.i-listbox-wrapper.i-listbox--menu .i-listbox-options .i-listbox-option.has-icon{padding:18px 16px}.i-listbox-wrapper.i-listbox--menu .i-listbox-options .i-listbox-option.selected{background-color:var(--surface-hover);border-left:3px solid var(--color-primary);font-weight:600}.i-listbox-wrapper.i-listbox--menu .i-listbox-options .i-listbox-option .i-listbox-option-icon--chevron{opacity:.8}\n"] }]
+                    ], template: "<div\n  class=\"i-listbox-wrapper\"\n  [class.i-listbox--fluid]=\"fluid\"\n  [class.i-listbox--disabled]=\"disabled\"\n  [class.i-listbox--invalid]=\"showErrors\"\n  [class.i-listbox--menu]=\"displayAsMenu\"\n  #dropdown\n>\n  <!-- Header -->\n  <div class=\"i-listbox-header\">\n    <div class=\"i-listbox-header-content\">\n      <span class=\"i-listbox-title\">{{ effectiveTitle }}</span>\n      @if (actionIcon) {\n      <i-button\n        [text]=\"true\"\n        [size]=\"'small'\"\n        [severity]=\"'contrast'\"\n        [icon]=\"actionIcon\"\n        [disabled]=\"disabled\"\n        (clicked)=\"onActionClick($event)\"\n        [attr.title]=\"actionTooltip\"\n      ></i-button>\n      }\n    </div>\n\n    <!-- Chips area for multiselect mode -->\n    @if (multiple && showChips) {\n    <div class=\"i-listbox-chips-wrapper\">\n      <i-chips\n        class=\"i-listbox-chips\"\n        [chips]=\"getSelectedChipItems()\"\n        [removable]=\"!disabled\"\n        [disabled]=\"disabled\"\n        [collapseOnOverflow]=\"true\"\n        [overflowLabel]=\"getDisplayLabel()\"\n        (removeChip)=\"onChipRemove($event)\"\n      ></i-chips>\n    </div>\n    }\n  </div>\n\n  <!-- Dropdown content -->\n  <div class=\"i-listbox-dropdown\">\n    @if (filter) {\n    <div class=\"i-listbox-filter\">\n      <i-input-text\n        #searchInput\n        [useFloatLabel]=\"false\"\n        placeholder=\"Search...\"\n        [ngModel]=\"filterValue()\"\n        (ngModelChange)=\"filterValue.set($event)\"\n        [fluid]=\"true\"\n        [icon]=\"'pi pi-search'\"\n      >\n      </i-input-text>\n    </div>\n    }\n\n    <div class=\"i-listbox-options\">\n      @for (option of filteredOptions(); track getOptionValue(option)) {\n      <div\n        class=\"i-listbox-option\"\n        [class.selected]=\"isOptionSelected(option)\"\n        [class.has-icon]=\"!multiple && getOptionIcon(option)\"\n        (click)=\"toggleOption(option)\"\n      >\n        <!-- Checkbox only in multiple mode -->\n        @if (multiple) {\n        <i-checkbox\n          [checked]=\"isOptionSelected(option)\"\n          [readonly]=\"true\"\n          size=\"small\"\n          class=\"i-listbox-checkbox\"\n        ></i-checkbox>\n        }\n\n        <!-- Left icon -->\n        @if (getOptionIcon(option) && !displayAsMenu) {\n        <i\n          [class]=\"getOptionIcon(option)\"\n          class=\"i-listbox-option-icon i-listbox-option-icon--left\"\n        ></i>\n        }\n\n        <span class=\"i-listbox-option-label\">\n          {{ getOptionLabel(option) }}\n        </span>\n\n        <!-- Right chevron for menu mode -->\n        @if (displayAsMenu) {\n        <i\n          class=\"pi pi-chevron-right i-listbox-option-icon i-listbox-option-icon--chevron\"\n        ></i>\n        }\n      </div>\n      } @if (filteredOptions().length === 0) {\n      <div class=\"i-listbox-no-options\">No options found</div>\n      }\n    </div>\n  </div>\n\n  <!-- Error message -->\n  @if (showErrors) {\n  <div class=\"i-listbox-error\">\n    {{ getErrorMessage() }}\n  </div>\n  }\n</div>\n", styles: [".i-listbox-wrapper{background:var(--color-component-background);border-color:var(--surface-border)}.i-listbox-wrapper.i-listbox--invalid .i-listbox-header{border-bottom-color:var(--color-danger)}.i-listbox-wrapper .i-listbox-header{background:var(--surface-card);border-bottom-color:var(--surface-border)}.i-listbox-wrapper .i-listbox-header .i-listbox-title{color:var(--color-text-primary)}.i-listbox-wrapper .i-listbox-header .i-listbox-action-btn{background:var(--color-primary);color:#fff}.i-listbox-wrapper .i-listbox-header .i-listbox-action-btn:hover:not(:disabled){background:var(--color-primary)}.i-listbox-wrapper .i-listbox-header .i-listbox-summary{color:var(--color-text-secondary)}.i-listbox-wrapper .i-listbox-dropdown{background:var(--color-component-background)}.i-listbox-wrapper .i-listbox-dropdown .i-listbox-filter{border-bottom-color:var(--surface-border)}.i-listbox-wrapper .i-listbox-dropdown .i-listbox-options{background:transparent}.i-listbox-wrapper .i-listbox-dropdown .i-listbox-options .i-listbox-option{color:var(--color-text-primary)}.i-listbox-wrapper .i-listbox-dropdown .i-listbox-options .i-listbox-option:hover,.i-listbox-wrapper .i-listbox-dropdown .i-listbox-options .i-listbox-option.selected{background-color:var(--surface-hover)}.i-listbox-wrapper .i-listbox-dropdown .i-listbox-options .i-listbox-option .i-listbox-checkbox{accent-color:var(--color-primary)}.i-listbox-wrapper .i-listbox-dropdown .i-listbox-options .i-listbox-option .i-listbox-option-icon--right{color:var(--color-text-tertiary)}.i-listbox-wrapper .i-listbox-dropdown .i-listbox-options .i-listbox-no-options{color:var(--color-text-secondary)}.i-listbox-wrapper .i-listbox-error{color:var(--color-danger);background:#ef44440d;border-top-color:var(--color-danger)}.i-listbox-wrapper{position:relative;display:flex;flex-direction:column;width:100%;height:100%;border-radius:4px;border:1px solid var(--surface-border);background:var(--color-component-background);overflow:hidden}.i-listbox-wrapper.i-listbox--fluid{width:100%}.i-listbox-wrapper.i-listbox--disabled{opacity:.6;pointer-events:none}.i-listbox-wrapper.i-listbox--invalid{border-color:var(--color-danger)}.i-listbox-wrapper .i-listbox-header{position:relative;display:flex;flex-direction:column;flex-shrink:0;gap:8px;padding:20px 14px;border-bottom:1px solid var(--surface-border);background:var(--surface-card)}.i-listbox-wrapper .i-listbox-header .i-listbox-header-content{display:flex;align-items:center;justify-content:space-between;min-height:24px}.i-listbox-wrapper .i-listbox-header .i-listbox-header-content .i-listbox-title{font-weight:600;font-size:1.15em;color:var(--color-text-primary)}.i-listbox-wrapper .i-listbox-header .i-listbox-header-content .i-listbox-action-btn{display:flex;align-items:center;justify-content:center;width:28px;height:28px;padding:0;border:none;border-radius:4px;background:var(--color-primary);color:#fff;cursor:pointer;transition:all .15s ease}.i-listbox-wrapper .i-listbox-header .i-listbox-header-content .i-listbox-action-btn:hover:not(:disabled){opacity:.85;transform:scale(1.05)}.i-listbox-wrapper .i-listbox-header .i-listbox-header-content .i-listbox-action-btn:active:not(:disabled){transform:scale(.95)}.i-listbox-wrapper .i-listbox-header .i-listbox-header-content .i-listbox-action-btn:disabled{opacity:.5;cursor:not-allowed}.i-listbox-wrapper .i-listbox-header .i-listbox-header-content .i-listbox-action-btn i{font-size:1em}.i-listbox-wrapper .i-listbox-header .i-listbox-chips-wrapper{height:32px}.i-listbox-wrapper .i-listbox-dropdown{display:flex;flex-direction:column;flex:1;min-height:0;overflow:hidden}.i-listbox-wrapper .i-listbox-dropdown .i-listbox-filter{flex-shrink:0;padding:8px;border-bottom:1px solid var(--surface-border)}.i-listbox-wrapper .i-listbox-dropdown .i-listbox-options{flex:1;min-height:0;overflow-x:hidden;overflow-y:auto}.i-listbox-wrapper .i-listbox-dropdown .i-listbox-options::-webkit-scrollbar-track{background:transparent;border-radius:3px}.i-listbox-wrapper .i-listbox-dropdown .i-listbox-options::-webkit-scrollbar-thumb{background:#0003;border-radius:3px;transition:background .2s ease}.i-listbox-wrapper .i-listbox-dropdown .i-listbox-options::-webkit-scrollbar-thumb:hover{background:#00000059}.i-listbox-wrapper .i-listbox-dropdown .i-listbox-options::-webkit-scrollbar-thumb:active{background:#00000080}.i-listbox-wrapper .i-listbox-dropdown .i-listbox-options::-webkit-scrollbar-corner{background:transparent}.i-listbox-wrapper .i-listbox-dropdown .i-listbox-options{scrollbar-width:thin;scrollbar-color:rgba(0,0,0,.2) transparent;scroll-behavior:smooth}.i-listbox-wrapper .i-listbox-dropdown .i-listbox-options::-webkit-scrollbar-thumb{background:var(--color-text-secondary);opacity:.4}.i-listbox-wrapper .i-listbox-dropdown .i-listbox-options::-webkit-scrollbar-thumb:hover{background:var(--color-text-primary);opacity:.6}.i-listbox-wrapper .i-listbox-dropdown .i-listbox-options::-webkit-scrollbar-thumb:active{background:var(--color-primary);opacity:.7}.i-listbox-wrapper .i-listbox-dropdown .i-listbox-options{scrollbar-color:var(--color-text-secondary) transparent}.i-listbox-wrapper .i-listbox-dropdown .i-listbox-options::-webkit-scrollbar{width:6px;height:6px}.i-listbox-wrapper .i-listbox-dropdown .i-listbox-options::-webkit-scrollbar-track{background:#0000000d;border-radius:3px;margin:2px 0}.i-listbox-wrapper .i-listbox-dropdown .i-listbox-options::-webkit-scrollbar-thumb{border-radius:3px;min-height:20px;background:var(--color-text-secondary);opacity:.6}.i-listbox-wrapper .i-listbox-dropdown .i-listbox-options::-webkit-scrollbar-thumb:hover{background:var(--color-text-primary);opacity:.8}.i-listbox-wrapper .i-listbox-dropdown .i-listbox-options::-webkit-scrollbar-thumb:active{background:var(--color-primary);opacity:.9}.i-listbox-wrapper .i-listbox-dropdown .i-listbox-options{scrollbar-width:thin;scrollbar-color:var(--color-text-secondary) rgba(0,0,0,.05)}.i-listbox-wrapper .i-listbox-dropdown .i-listbox-options .i-listbox-option{display:flex;align-items:center;gap:8px;padding:10px 12px;font-size:1em;cursor:pointer;transition:background-color .15s ease}.i-listbox-wrapper .i-listbox-dropdown .i-listbox-options .i-listbox-option.has-icon{padding:16px 12px}.i-listbox-wrapper .i-listbox-dropdown .i-listbox-options .i-listbox-option:hover{background-color:var(--surface-hover)}.i-listbox-wrapper .i-listbox-dropdown .i-listbox-options .i-listbox-option.selected{background-color:var(--surface-hover);font-weight:500}.i-listbox-wrapper .i-listbox-dropdown .i-listbox-options .i-listbox-option .i-listbox-checkbox{pointer-events:none;flex-shrink:0}.i-listbox-wrapper .i-listbox-dropdown .i-listbox-options .i-listbox-option .i-listbox-option-icon{font-size:16px;flex-shrink:0}.i-listbox-wrapper .i-listbox-dropdown .i-listbox-options .i-listbox-option .i-listbox-option-icon--left{color:var(--color-text-secondary)}.i-listbox-wrapper .i-listbox-dropdown .i-listbox-options .i-listbox-option .i-listbox-option-icon--chevron{color:var(--color-text-tertiary);margin-left:auto;font-size:12px;opacity:.6}.i-listbox-wrapper .i-listbox-dropdown .i-listbox-options .i-listbox-option .i-listbox-option-label{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.i-listbox-wrapper .i-listbox-dropdown .i-listbox-options .i-listbox-no-options{padding:16px;font-style:italic;text-align:center;color:var(--color-text-secondary)}.i-listbox-wrapper .i-listbox-error{flex-shrink:0;padding:8px 12px;font-size:.9em;color:var(--color-danger);background:#ef44440d;border-top:1px solid var(--color-danger)}.i-listbox-wrapper.i-listbox--menu .i-listbox-options .i-listbox-option{padding:14px 16px;font-size:1.05em}.i-listbox-wrapper.i-listbox--menu .i-listbox-options .i-listbox-option.has-icon{padding:18px 16px}.i-listbox-wrapper.i-listbox--menu .i-listbox-options .i-listbox-option.selected{background-color:var(--surface-hover);border-left:3px solid var(--color-primary);font-weight:600}.i-listbox-wrapper.i-listbox--menu .i-listbox-options .i-listbox-option .i-listbox-option-icon--chevron{opacity:.8}@media(max-width:991px){.i-listbox-wrapper .i-listbox-options{max-height:120px}}\n"] }]
         }], ctorParameters: () => [{ type: i0.Injector }], propDecorators: { title: [{
                 type: Input
             }], label: [{
@@ -6497,11 +6497,11 @@ class ITabs {
         tabElement?.focus();
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: ITabs, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.3", type: ITabs, isStandalone: true, selector: "i-tabs", inputs: { activeIndex: "activeIndex" }, outputs: { activeIndexChange: "activeIndexChange", onChange: "onChange", onClose: "onClose" }, queries: [{ propertyName: "tabPanels", predicate: ITabPanel }], ngImport: i0, template: "<div class=\"i-tabs\" [attr.id]=\"componentId\">\n  <!-- Tab Headers -->\n  <div class=\"i-tabs__header\" role=\"tablist\">\n    @for (tab of tabs; track $index) {\n      <button\n        [attr.id]=\"componentId + '-tab-' + $index\"\n        class=\"i-tabs__tab\"\n        [ngClass]=\"{\n          'i-tabs__tab--active': activeIndex === $index,\n          'i-tabs__tab--disabled': tab.disabled,\n          'i-tabs__tab--icon-only': tab.icon && !tab.header\n        }\"\n        role=\"tab\"\n        [attr.aria-selected]=\"activeIndex === $index\"\n        [attr.aria-controls]=\"componentId + '-panel-' + $index\"\n        [attr.tabindex]=\"activeIndex === $index ? 0 : -1\"\n        [disabled]=\"tab.disabled\"\n        (click)=\"selectTab($event, $index)\"\n        (keydown)=\"onKeyDown($event, $index)\"\n      >\n        @if (tab.icon) {\n          <i [ngClass]=\"tab.icon\" class=\"i-tabs__tab-icon\"></i>\n        }\n        @if (tab.header) {\n          <span class=\"i-tabs__tab-label\">{{ tab.header }}</span>\n        }\n        @if (tab.closable && !tab.disabled) {\n          <button\n            class=\"i-tabs__tab-close\"\n            type=\"button\"\n            aria-label=\"Close tab\"\n            (click)=\"closeTab($event, $index)\"\n          >\n            <i class=\"pi pi-times\"></i>\n          </button>\n        }\n      </button>\n    }\n  </div>\n\n  <!-- Tab Panels -->\n  <div class=\"i-tabs__panels\">\n    @for (tab of tabs; track $index) {\n      <div\n        [attr.id]=\"componentId + '-panel-' + $index\"\n        class=\"i-tabs__panel\"\n        [ngClass]=\"{ 'i-tabs__panel--active': activeIndex === $index }\"\n        role=\"tabpanel\"\n        [attr.aria-labelledby]=\"componentId + '-tab-' + $index\"\n        [attr.hidden]=\"activeIndex !== $index || null\"\n      >\n        @if (activeIndex === $index) {\n          <ng-container [ngTemplateOutlet]=\"tab.contentTemplate\"></ng-container>\n        }\n      </div>\n    }\n  </div>\n</div>\n", styles: [".i-tabs__header{border-bottom:1px solid var(--color-border);background:var(--surface-card)}.i-tabs__header::-webkit-scrollbar-thumb{background:var(--color-border)}.i-tabs__tab{color:var(--color-text-secondary);transition:color .2s,background .2s}.i-tabs__tab:hover:not(:disabled){color:var(--color-text-primary);background:var(--surface-hover)}.i-tabs__tab--active{color:var(--color-primary)}.i-tabs__tab--active:after{background:var(--color-primary)}.i-tabs__tab--disabled{color:var(--color-text-disabled);opacity:.6}.i-tabs__tab-close{transition:background .2s;color:inherit}.i-tabs__tab-close:hover{background:color-mix(in srgb,var(--color-danger) 20%,transparent);color:var(--color-danger)}.i-tabs__panels{background:var(--surface-card)}.i-tabs{display:flex;flex-direction:column;width:100%}.i-tabs .i-tabs__header{display:flex;overflow-x:auto;scrollbar-width:none}.i-tabs .i-tabs__header::-webkit-scrollbar{display:none}.i-tabs .i-tabs__tab{display:flex;align-items:center;gap:8px;padding:12px 20px;border:none;background:transparent;font-size:1em;font-weight:500;cursor:pointer;position:relative;white-space:nowrap}.i-tabs .i-tabs__tab--active:after{content:\"\";position:absolute;bottom:0;left:0;right:0;height:2px}.i-tabs .i-tabs__tab--disabled{cursor:not-allowed}.i-tabs .i-tabs__tab--icon-only{padding:12px 16px}.i-tabs .i-tabs__tab--icon-only .i-tabs__tab-icon{margin:0}.i-tabs .i-tabs__tab .i-tabs__tab-icon{font-size:16px;display:inline-flex;align-items:center}.i-tabs .i-tabs__tab .i-tabs__tab-label{display:inline-block}.i-tabs .i-tabs__tab .i-tabs__tab-close{display:inline-flex;align-items:center;justify-content:center;width:18px;height:18px;margin-left:4px;padding:0;border:none;border-radius:50%;background:transparent;cursor:pointer}.i-tabs .i-tabs__tab .i-tabs__tab-close i{font-size:12px}.i-tabs .i-tabs__panels{flex:1}.i-tabs .i-tabs__panels .i-tabs__panel{display:none;padding:16px}.i-tabs .i-tabs__panels .i-tabs__panel--active{display:block}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.3", type: ITabs, isStandalone: true, selector: "i-tabs", inputs: { activeIndex: "activeIndex" }, outputs: { activeIndexChange: "activeIndexChange", onChange: "onChange", onClose: "onClose" }, queries: [{ propertyName: "tabPanels", predicate: ITabPanel }], ngImport: i0, template: "<div class=\"i-tabs\" [attr.id]=\"componentId\">\n  <!-- Tab Headers -->\n  <div class=\"i-tabs__header\" role=\"tablist\">\n    @for (tab of tabs; track $index) {\n      <button\n        [attr.id]=\"componentId + '-tab-' + $index\"\n        class=\"i-tabs__tab\"\n        [ngClass]=\"{\n          'i-tabs__tab--active': activeIndex === $index,\n          'i-tabs__tab--disabled': tab.disabled,\n          'i-tabs__tab--icon-only': tab.icon && !tab.header\n        }\"\n        role=\"tab\"\n        [attr.aria-selected]=\"activeIndex === $index\"\n        [attr.aria-controls]=\"componentId + '-panel-' + $index\"\n        [attr.tabindex]=\"activeIndex === $index ? 0 : -1\"\n        [disabled]=\"tab.disabled\"\n        (click)=\"selectTab($event, $index)\"\n        (keydown)=\"onKeyDown($event, $index)\"\n      >\n        @if (tab.icon) {\n          <i [ngClass]=\"tab.icon\" class=\"i-tabs__tab-icon\"></i>\n        }\n        @if (tab.header) {\n          <span class=\"i-tabs__tab-label\">{{ tab.header }}</span>\n        }\n        @if (tab.closable && !tab.disabled) {\n          <button\n            class=\"i-tabs__tab-close\"\n            type=\"button\"\n            aria-label=\"Close tab\"\n            (click)=\"closeTab($event, $index)\"\n          >\n            <i class=\"pi pi-times\"></i>\n          </button>\n        }\n      </button>\n    }\n  </div>\n\n  <!-- Tab Panels -->\n  <div class=\"i-tabs__panels\">\n    @for (tab of tabs; track $index) {\n      <div\n        [attr.id]=\"componentId + '-panel-' + $index\"\n        class=\"i-tabs__panel\"\n        [ngClass]=\"{ 'i-tabs__panel--active': activeIndex === $index }\"\n        role=\"tabpanel\"\n        [attr.aria-labelledby]=\"componentId + '-tab-' + $index\"\n        [attr.hidden]=\"activeIndex !== $index || null\"\n      >\n        @if (activeIndex === $index) {\n          <ng-container [ngTemplateOutlet]=\"tab.contentTemplate\"></ng-container>\n        }\n      </div>\n    }\n  </div>\n</div>\n", styles: [".i-tabs__header{border-bottom:1px solid var(--color-border);background:var(--surface-card)}.i-tabs__header::-webkit-scrollbar-thumb{background:var(--color-border)}.i-tabs__tab{color:var(--color-text-secondary);transition:color .2s,background .2s}.i-tabs__tab:hover:not(:disabled){color:var(--color-text-primary);background:var(--surface-hover)}.i-tabs__tab--active{color:var(--color-primary)}.i-tabs__tab--active:after{background:var(--color-primary)}.i-tabs__tab--disabled{color:var(--color-text-disabled);opacity:.6}.i-tabs__tab-close{transition:background .2s;color:inherit}.i-tabs__tab-close:hover{background:color-mix(in srgb,var(--color-danger) 20%,transparent);color:var(--color-danger)}.i-tabs__panels{background:var(--surface-card)}.i-tabs{display:flex;flex-direction:column;width:100%}.i-tabs .i-tabs__header{display:flex;overflow-x:auto;scrollbar-width:none}.i-tabs .i-tabs__header::-webkit-scrollbar{display:none}.i-tabs .i-tabs__tab{display:flex;align-items:center;gap:8px;padding:12px 20px;border:none;background:transparent;font-size:1em;font-weight:500;cursor:pointer;position:relative;white-space:nowrap}.i-tabs .i-tabs__tab--active:after{content:\"\";position:absolute;bottom:0;left:0;right:0;height:2px}.i-tabs .i-tabs__tab--disabled{cursor:not-allowed}.i-tabs .i-tabs__tab--icon-only{padding:12px 16px}.i-tabs .i-tabs__tab--icon-only .i-tabs__tab-icon{margin:0}.i-tabs .i-tabs__tab .i-tabs__tab-icon{font-size:16px;display:inline-flex;align-items:center}.i-tabs .i-tabs__tab .i-tabs__tab-label{display:inline-block}.i-tabs .i-tabs__tab .i-tabs__tab-close{display:inline-flex;align-items:center;justify-content:center;width:18px;height:18px;margin-left:4px;padding:0;border:none;border-radius:50%;background:transparent;cursor:pointer}.i-tabs .i-tabs__tab .i-tabs__tab-close i{font-size:12px}.i-tabs .i-tabs__panels{flex:1}.i-tabs .i-tabs__panels .i-tabs__panel{display:none;padding:16px}.i-tabs .i-tabs__panels .i-tabs__panel--active{display:block}@media(max-width:768px){.i-tabs .i-tabs__panels .i-tabs__panel{padding-left:0;padding-right:0}}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: ITabs, decorators: [{
             type: Component,
-            args: [{ selector: 'i-tabs', standalone: true, imports: [NgClass, NgTemplateOutlet], template: "<div class=\"i-tabs\" [attr.id]=\"componentId\">\n  <!-- Tab Headers -->\n  <div class=\"i-tabs__header\" role=\"tablist\">\n    @for (tab of tabs; track $index) {\n      <button\n        [attr.id]=\"componentId + '-tab-' + $index\"\n        class=\"i-tabs__tab\"\n        [ngClass]=\"{\n          'i-tabs__tab--active': activeIndex === $index,\n          'i-tabs__tab--disabled': tab.disabled,\n          'i-tabs__tab--icon-only': tab.icon && !tab.header\n        }\"\n        role=\"tab\"\n        [attr.aria-selected]=\"activeIndex === $index\"\n        [attr.aria-controls]=\"componentId + '-panel-' + $index\"\n        [attr.tabindex]=\"activeIndex === $index ? 0 : -1\"\n        [disabled]=\"tab.disabled\"\n        (click)=\"selectTab($event, $index)\"\n        (keydown)=\"onKeyDown($event, $index)\"\n      >\n        @if (tab.icon) {\n          <i [ngClass]=\"tab.icon\" class=\"i-tabs__tab-icon\"></i>\n        }\n        @if (tab.header) {\n          <span class=\"i-tabs__tab-label\">{{ tab.header }}</span>\n        }\n        @if (tab.closable && !tab.disabled) {\n          <button\n            class=\"i-tabs__tab-close\"\n            type=\"button\"\n            aria-label=\"Close tab\"\n            (click)=\"closeTab($event, $index)\"\n          >\n            <i class=\"pi pi-times\"></i>\n          </button>\n        }\n      </button>\n    }\n  </div>\n\n  <!-- Tab Panels -->\n  <div class=\"i-tabs__panels\">\n    @for (tab of tabs; track $index) {\n      <div\n        [attr.id]=\"componentId + '-panel-' + $index\"\n        class=\"i-tabs__panel\"\n        [ngClass]=\"{ 'i-tabs__panel--active': activeIndex === $index }\"\n        role=\"tabpanel\"\n        [attr.aria-labelledby]=\"componentId + '-tab-' + $index\"\n        [attr.hidden]=\"activeIndex !== $index || null\"\n      >\n        @if (activeIndex === $index) {\n          <ng-container [ngTemplateOutlet]=\"tab.contentTemplate\"></ng-container>\n        }\n      </div>\n    }\n  </div>\n</div>\n", styles: [".i-tabs__header{border-bottom:1px solid var(--color-border);background:var(--surface-card)}.i-tabs__header::-webkit-scrollbar-thumb{background:var(--color-border)}.i-tabs__tab{color:var(--color-text-secondary);transition:color .2s,background .2s}.i-tabs__tab:hover:not(:disabled){color:var(--color-text-primary);background:var(--surface-hover)}.i-tabs__tab--active{color:var(--color-primary)}.i-tabs__tab--active:after{background:var(--color-primary)}.i-tabs__tab--disabled{color:var(--color-text-disabled);opacity:.6}.i-tabs__tab-close{transition:background .2s;color:inherit}.i-tabs__tab-close:hover{background:color-mix(in srgb,var(--color-danger) 20%,transparent);color:var(--color-danger)}.i-tabs__panels{background:var(--surface-card)}.i-tabs{display:flex;flex-direction:column;width:100%}.i-tabs .i-tabs__header{display:flex;overflow-x:auto;scrollbar-width:none}.i-tabs .i-tabs__header::-webkit-scrollbar{display:none}.i-tabs .i-tabs__tab{display:flex;align-items:center;gap:8px;padding:12px 20px;border:none;background:transparent;font-size:1em;font-weight:500;cursor:pointer;position:relative;white-space:nowrap}.i-tabs .i-tabs__tab--active:after{content:\"\";position:absolute;bottom:0;left:0;right:0;height:2px}.i-tabs .i-tabs__tab--disabled{cursor:not-allowed}.i-tabs .i-tabs__tab--icon-only{padding:12px 16px}.i-tabs .i-tabs__tab--icon-only .i-tabs__tab-icon{margin:0}.i-tabs .i-tabs__tab .i-tabs__tab-icon{font-size:16px;display:inline-flex;align-items:center}.i-tabs .i-tabs__tab .i-tabs__tab-label{display:inline-block}.i-tabs .i-tabs__tab .i-tabs__tab-close{display:inline-flex;align-items:center;justify-content:center;width:18px;height:18px;margin-left:4px;padding:0;border:none;border-radius:50%;background:transparent;cursor:pointer}.i-tabs .i-tabs__tab .i-tabs__tab-close i{font-size:12px}.i-tabs .i-tabs__panels{flex:1}.i-tabs .i-tabs__panels .i-tabs__panel{display:none;padding:16px}.i-tabs .i-tabs__panels .i-tabs__panel--active{display:block}\n"] }]
+            args: [{ selector: 'i-tabs', standalone: true, imports: [NgClass, NgTemplateOutlet], template: "<div class=\"i-tabs\" [attr.id]=\"componentId\">\n  <!-- Tab Headers -->\n  <div class=\"i-tabs__header\" role=\"tablist\">\n    @for (tab of tabs; track $index) {\n      <button\n        [attr.id]=\"componentId + '-tab-' + $index\"\n        class=\"i-tabs__tab\"\n        [ngClass]=\"{\n          'i-tabs__tab--active': activeIndex === $index,\n          'i-tabs__tab--disabled': tab.disabled,\n          'i-tabs__tab--icon-only': tab.icon && !tab.header\n        }\"\n        role=\"tab\"\n        [attr.aria-selected]=\"activeIndex === $index\"\n        [attr.aria-controls]=\"componentId + '-panel-' + $index\"\n        [attr.tabindex]=\"activeIndex === $index ? 0 : -1\"\n        [disabled]=\"tab.disabled\"\n        (click)=\"selectTab($event, $index)\"\n        (keydown)=\"onKeyDown($event, $index)\"\n      >\n        @if (tab.icon) {\n          <i [ngClass]=\"tab.icon\" class=\"i-tabs__tab-icon\"></i>\n        }\n        @if (tab.header) {\n          <span class=\"i-tabs__tab-label\">{{ tab.header }}</span>\n        }\n        @if (tab.closable && !tab.disabled) {\n          <button\n            class=\"i-tabs__tab-close\"\n            type=\"button\"\n            aria-label=\"Close tab\"\n            (click)=\"closeTab($event, $index)\"\n          >\n            <i class=\"pi pi-times\"></i>\n          </button>\n        }\n      </button>\n    }\n  </div>\n\n  <!-- Tab Panels -->\n  <div class=\"i-tabs__panels\">\n    @for (tab of tabs; track $index) {\n      <div\n        [attr.id]=\"componentId + '-panel-' + $index\"\n        class=\"i-tabs__panel\"\n        [ngClass]=\"{ 'i-tabs__panel--active': activeIndex === $index }\"\n        role=\"tabpanel\"\n        [attr.aria-labelledby]=\"componentId + '-tab-' + $index\"\n        [attr.hidden]=\"activeIndex !== $index || null\"\n      >\n        @if (activeIndex === $index) {\n          <ng-container [ngTemplateOutlet]=\"tab.contentTemplate\"></ng-container>\n        }\n      </div>\n    }\n  </div>\n</div>\n", styles: [".i-tabs__header{border-bottom:1px solid var(--color-border);background:var(--surface-card)}.i-tabs__header::-webkit-scrollbar-thumb{background:var(--color-border)}.i-tabs__tab{color:var(--color-text-secondary);transition:color .2s,background .2s}.i-tabs__tab:hover:not(:disabled){color:var(--color-text-primary);background:var(--surface-hover)}.i-tabs__tab--active{color:var(--color-primary)}.i-tabs__tab--active:after{background:var(--color-primary)}.i-tabs__tab--disabled{color:var(--color-text-disabled);opacity:.6}.i-tabs__tab-close{transition:background .2s;color:inherit}.i-tabs__tab-close:hover{background:color-mix(in srgb,var(--color-danger) 20%,transparent);color:var(--color-danger)}.i-tabs__panels{background:var(--surface-card)}.i-tabs{display:flex;flex-direction:column;width:100%}.i-tabs .i-tabs__header{display:flex;overflow-x:auto;scrollbar-width:none}.i-tabs .i-tabs__header::-webkit-scrollbar{display:none}.i-tabs .i-tabs__tab{display:flex;align-items:center;gap:8px;padding:12px 20px;border:none;background:transparent;font-size:1em;font-weight:500;cursor:pointer;position:relative;white-space:nowrap}.i-tabs .i-tabs__tab--active:after{content:\"\";position:absolute;bottom:0;left:0;right:0;height:2px}.i-tabs .i-tabs__tab--disabled{cursor:not-allowed}.i-tabs .i-tabs__tab--icon-only{padding:12px 16px}.i-tabs .i-tabs__tab--icon-only .i-tabs__tab-icon{margin:0}.i-tabs .i-tabs__tab .i-tabs__tab-icon{font-size:16px;display:inline-flex;align-items:center}.i-tabs .i-tabs__tab .i-tabs__tab-label{display:inline-block}.i-tabs .i-tabs__tab .i-tabs__tab-close{display:inline-flex;align-items:center;justify-content:center;width:18px;height:18px;margin-left:4px;padding:0;border:none;border-radius:50%;background:transparent;cursor:pointer}.i-tabs .i-tabs__tab .i-tabs__tab-close i{font-size:12px}.i-tabs .i-tabs__panels{flex:1}.i-tabs .i-tabs__panels .i-tabs__panel{display:none;padding:16px}.i-tabs .i-tabs__panels .i-tabs__panel--active{display:block}@media(max-width:768px){.i-tabs .i-tabs__panels .i-tabs__panel{padding-left:0;padding-right:0}}\n"] }]
         }], propDecorators: { activeIndex: [{
                 type: Input
             }], activeIndexChange: [{
@@ -8442,10 +8442,10 @@ class ITable {
     // ===== COMPUTED LAYOUT HELPERS =====
     /**
      * Effective container height for the virtual scroll viewport.
-     * Falls back to '400px' when no height is provided.
+     * Falls back to '100%' when no height is provided.
      * @internal
      */
-    effectiveHeight = computed(() => this.height || '400px', ...(ngDevMode ? [{ debugName: "effectiveHeight" }] : []));
+    effectiveHeight = computed(() => this.height || '100%', ...(ngDevMode ? [{ debugName: "effectiveHeight" }] : []));
     /**
      * Total column span used for empty-state and detail expansion cells.
      * @internal
@@ -8512,7 +8512,7 @@ class ITable {
         return this.virtualScrollViewport?.measureScrollOffset() ?? 0;
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: ITable, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.3", type: ITable, isStandalone: true, selector: "i-table", inputs: { grid: { classPropertyName: "grid", publicName: "grid", 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 }, 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 }, height: { classPropertyName: "height", publicName: "height", isSignal: false, isRequired: false, transformFunction: null }, virtualScroll: { classPropertyName: "virtualScroll", publicName: "virtualScroll", isSignal: false, isRequired: false, transformFunction: null }, virtualScrollItemSize: { classPropertyName: "virtualScrollItemSize", publicName: "virtualScrollItemSize", isSignal: false, isRequired: false, transformFunction: null }, virtualScrollMinBufferPx: { classPropertyName: "virtualScrollMinBufferPx", publicName: "virtualScrollMinBufferPx", isSignal: false, isRequired: false, transformFunction: null }, virtualScrollMaxBufferPx: { classPropertyName: "virtualScrollMaxBufferPx", publicName: "virtualScrollMaxBufferPx", isSignal: false, isRequired: false, transformFunction: null }, resizableColumns: { classPropertyName: "resizableColumns", publicName: "resizableColumns", 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", onRowExpand: "onRowExpand", onRowCollapse: "onRowCollapse", onDownload: "onDownload" }, host: { listeners: { "document:mousemove": "onColumnResize($event)", "document:mouseup": "onColumnResizeEnd()" } }, viewQueries: [{ propertyName: "virtualScrollViewport", first: true, predicate: CdkVirtualScrollViewport, descendants: true }], ngImport: i0, template: "<div class=\"i-table-wrapper\" [ngClass]=\"getTableClasses()\">\n  <!-- Table Header: global filter + 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        }\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  <!-- ================================================================\n       PATH A \u2014 Detail-expandable table\n       Uses a standard scrollable container so that nested <i-table>\n       components can expand inline below their parent rows.\n  ================================================================ -->\n  @if (hasDetails()) {\n    <div\n      class=\"i-table-container i-table-container--scrollable\"\n      [style.max-height]=\"effectiveHeight()\"\n    >\n      <table class=\"i-table\">\n        <thead>\n          <!-- Column Filter Row -->\n          @if (filterable) {\n            <tr class=\"i-table-filter-row\">\n              @if (selectionMode === \"multiple\") {\n                <th class=\"i-table-selection-header\"></th>\n              }\n              <th class=\"i-table-expand-header\"></th>\n              @for (\n                column of gridColumns();\n                track trackByColumn($index, column)\n              ) {\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)=\"\n                        onColumnFilterInput(column.field, $event)\n                      \"\n                    />\n                  </th>\n                } @else {\n                  <th [style.width]=\"getColumnWidth(column)\"></th>\n                }\n              }\n              <th class=\"i-table-detail-count-header\"></th>\n              @if (gridActions().length > 0) {\n                <th class=\"i-table-actions-header\"></th>\n              }\n            </tr>\n          }\n\n          <!-- Column Headers -->\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            }\n            <th class=\"i-table-expand-header\"></th>\n            @for (\n              column of gridColumns();\n              track trackByColumn($index, column)\n            ) {\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\n                      [class]=\"getSortIcon(column)\"\n                      class=\"i-table-sort-icon\"\n                    ></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            }\n            <th class=\"i-table-detail-count-header\"></th>\n            @if (gridActions().length > 0) {\n              <th class=\"i-table-actions-header\">Actions</th>\n            }\n          </tr>\n        </thead>\n\n        <tbody>\n          @if (processedData().length === 0) {\n            <tr class=\"i-table-empty-row\">\n              <td [attr.colspan]=\"totalColspan()\">\n                <i-no-content />\n              </td>\n            </tr>\n          }\n          @for (row of processedData(); track trackByRow($index, row)) {\n            <!-- Parent row -->\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              }\n              <td class=\"i-table-expand-cell\">\n                <i-button\n                  severity=\"secondary\"\n                  [text]=\"true\"\n                  size=\"xtra-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 (\n                column of gridColumns();\n                track trackByColumn($index, column)\n              ) {\n                <td\n                  [style.text-align]=\"column.align || 'left'\"\n                  [style.width]=\"getColumnWidth(column)\"\n                  [class]=\"\n                    getCellSeverity(row, column)\n                      ? 'i-table-cell-' + getCellSeverity(row, column)\n                      : ''\n                  \"\n                >\n                  @if (isIconColumn(column)) {\n                    <i\n                      [class]=\"getCellIcon(row, column)\"\n                      [class.i-severity-icon]=\"getCellSeverity(row, column)\"\n                      [style.font-size]=\"column.iconSize || '1rem'\"\n                    ></i>\n                  } @else if (isListColumn(column)) {\n                    <div class=\"i-table-list-cell\">\n                      @for (item of getCellListItems(row, column); track item) {\n                        <i-chip [label]=\"item\"></i-chip>\n                      }\n                    </div>\n                  } @else {\n                    <span\n                      [class.i-severity-text]=\"getCellSeverity(row, column)\"\n                    >\n                      {{\n                        formatCellValue(getCellValue(row, column.field), column)\n                      }}\n                    </span>\n                  }\n                </td>\n              }\n              <td class=\"i-table-detail-count-cell\">\n                ({{ getDetailRowCount(row) }})\n              </td>\n              @if (gridActions().length > 0) {\n                <td class=\"i-table-actions-cell\">\n                  <div class=\"i-table-actions\">\n                    @for (action of gridActions(); 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                        [iTooltip]=\"getActionTooltip(action, row)\"\n                        [class.i-action-hidden]=\"!isActionVisible(action, row)\"\n                        (clicked)=\"triggerAction(action, row, $event)\"\n                      >\n                        @if (action.label) {\n                          {{ action.label }}\n                        }\n                      </i-button>\n                    }\n                  </div>\n                </td>\n              }\n            </tr>\n\n            <!-- Detail expansion row -->\n            @if (isRowExpanded(row)) {\n              <tr class=\"i-table-expanded-row\">\n                <td\n                  [attr.colspan]=\"totalColspan()\"\n                  class=\"i-table-expanded-cell\"\n                >\n                  <div class=\"i-table-expanded-content\">\n                    <i-table\n                      [grid]=\"getDetailGrid(row)\"\n                      [sortable]=\"sortable\"\n                      [filterable]=\"filterable\"\n                      [selectionMode]=\"selectionMode\"\n                      [selection]=\"selection\"\n                      [striped]=\"striped\"\n                      [hoverable]=\"hoverable\"\n                      [bordered]=\"bordered\"\n                      [size]=\"size\"\n                      [dataKey]=\"dataKey\"\n                      [resizableColumns]=\"resizableColumns\"\n                      (onSort)=\"onSort.emit($event)\"\n                      (onFilter)=\"onFilter.emit($event)\"\n                      (onSelectionChange)=\"onSelectionChange.emit($event)\"\n                      (selectionChange)=\"selectionChange.emit($event)\"\n                      (onRowSelect)=\"onRowSelect.emit($event)\"\n                      (onRowUnselect)=\"onRowUnselect.emit($event)\"\n                    ></i-table>\n                  </div>\n                </td>\n              </tr>\n            }\n          }\n        </tbody>\n      </table>\n    </div>\n  } @else if (virtualScroll) {\n    <!-- ================================================================\n         PATH B \u2014 CDK Virtual Scroll (div-based rows)\n         Use only for large row counts (\u2265 ~500 rows). Uses flex <div> rows\n         so CDK's wrapper <div> does not end up inside <tbody> (invalid HTML).\n    ================================================================ -->\n    <div\n      class=\"i-table-container i-table-container--scrollable i-table-container--virtual-scroll\"\n      [style.height]=\"effectiveHeight()\"\n    >\n      <!-- Sticky header \u2014 flex rows that mirror the virtual body rows -->\n      <div class=\"i-table-virtual-header\">\n        @if (filterable) {\n          <div class=\"i-table-virtual-row i-table-filter-row\">\n            @if (selectionMode === \"multiple\") {\n              <div class=\"i-table-virtual-cell i-table-selection-header\"></div>\n            }\n            @for (\n              column of gridColumns();\n              track trackByColumn($index, column)\n            ) {\n              @if (column.filterable !== false) {\n                <div\n                  class=\"i-table-virtual-cell\"\n                  [style.width]=\"\n                    getColumnWidth(column) !== 'auto'\n                      ? getColumnWidth(column)\n                      : null\n                  \"\n                  [style.flex]=\"getColumnWidth(column) === 'auto' ? '1' : null\"\n                >\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                </div>\n              } @else {\n                <div\n                  class=\"i-table-virtual-cell\"\n                  [style.width]=\"\n                    getColumnWidth(column) !== 'auto'\n                      ? getColumnWidth(column)\n                      : null\n                  \"\n                  [style.flex]=\"getColumnWidth(column) === 'auto' ? '1' : null\"\n                ></div>\n              }\n            }\n            @if (gridActions().length > 0) {\n              <div class=\"i-table-virtual-cell i-table-actions-header\"></div>\n            }\n          </div>\n        }\n        <div class=\"i-table-virtual-row i-table-header-row\">\n          @if (selectionMode === \"multiple\") {\n            <div class=\"i-table-virtual-cell i-table-selection-header\">\n              <i-checkbox\n                [checked]=\"areAllRowsSelected()\"\n                [indeterminate]=\"areSomeRowsSelected()\"\n                (onChange)=\"toggleAllSelection()\"\n              ></i-checkbox>\n            </div>\n          }\n          @for (column of gridColumns(); track trackByColumn($index, column)) {\n            <div\n              class=\"i-table-virtual-cell i-table-header-cell\"\n              [style.width]=\"\n                getColumnWidth(column) !== 'auto'\n                  ? getColumnWidth(column)\n                  : null\n              \"\n              [style.flex]=\"getColumnWidth(column) === 'auto' ? '1' : null\"\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\n                    [class]=\"getSortIcon(column)\"\n                    class=\"i-table-sort-icon\"\n                  ></i>\n                }\n              </div>\n            </div>\n          }\n          @if (gridActions().length > 0) {\n            <div class=\"i-table-virtual-cell i-table-actions-header\">\n              Actions\n            </div>\n          }\n        </div>\n      </div>\n\n      <!-- Virtual Scroll Viewport \u2014 *cdkVirtualFor on <div>, not <tr> -->\n      <cdk-virtual-scroll-viewport\n        [itemSize]=\"virtualScrollItemSize\"\n        [minBufferPx]=\"virtualScrollMinBufferPx\"\n        [maxBufferPx]=\"virtualScrollMaxBufferPx\"\n        class=\"i-table-virtual-viewport\"\n      >\n        @if (processedData().length === 0) {\n          <div class=\"i-table-virtual-row i-table-empty-row\">\n            <div\n              class=\"i-table-virtual-cell\"\n              style=\"flex: 1; text-align: center; padding: 40px 16px\"\n            >\n              <i-no-content />\n            </div>\n          </div>\n        }\n        <div\n          *cdkVirtualFor=\"\n            let row of processedData();\n            let rowIndex = index;\n            trackBy: trackByRow\n          \"\n          class=\"i-table-virtual-row\"\n          [style.height.px]=\"virtualScrollItemSize\"\n          [class.i-table-row-odd]=\"rowIndex % 2 !== 0\"\n          [class.i-table-row-selected]=\"isRowSelected(row)\"\n          (click)=\"toggleRowSelection(row)\"\n        >\n          @if (selectionMode === \"multiple\") {\n            <div class=\"i-table-virtual-cell i-table-selection-cell\">\n              <i-checkbox\n                [checked]=\"isRowSelected(row)\"\n                (onChange)=\"toggleRowSelection(row)\"\n                (click)=\"$event.stopPropagation()\"\n              ></i-checkbox>\n            </div>\n          }\n          @for (column of gridColumns(); track trackByColumn($index, column)) {\n            <div\n              class=\"i-table-virtual-cell\"\n              [style.width]=\"\n                getColumnWidth(column) !== 'auto'\n                  ? getColumnWidth(column)\n                  : null\n              \"\n              [style.flex]=\"getColumnWidth(column) === 'auto' ? '1' : null\"\n              [style.text-align]=\"column.align || 'left'\"\n              [ngClass]=\"\n                getCellSeverity(row, column)\n                  ? 'i-table-cell-' + getCellSeverity(row, column)\n                  : ''\n              \"\n            >\n              @if (isIconColumn(column)) {\n                <i\n                  [class]=\"getIconClasses(row, column)\"\n                  [style.font-size]=\"column.iconSize || '1rem'\"\n                ></i>\n              } @else if (isListColumn(column)) {\n                <div class=\"i-table-list-cell\">\n                  @for (item of getCellListItems(row, column); track item) {\n                    <i-chip [label]=\"item\"></i-chip>\n                  }\n                </div>\n              } @else {\n                <span [class.i-severity-text]=\"getCellSeverity(row, column)\">\n                  {{ formatCellValue(getCellValue(row, column.field), column) }}\n                </span>\n              }\n            </div>\n          }\n          @if (gridActions().length > 0) {\n            <div class=\"i-table-virtual-cell i-table-actions-cell\">\n              <div class=\"i-table-actions\">\n                @for (action of gridActions(); 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                    [iTooltip]=\"getActionTooltip(action, row)\"\n                    [class.i-action-hidden]=\"!isActionVisible(action, row)\"\n                    (clicked)=\"triggerAction(action, row, $event)\"\n                  >\n                    @if (action.label) {\n                      {{ action.label }}\n                    }\n                  </i-button>\n                }\n              </div>\n            </div>\n          }\n        </div>\n      </cdk-virtual-scroll-viewport>\n    </div>\n  } @else {\n    <!-- ================================================================\n         PATH C \u2014 Regular scrollable table\n         Default for small/medium datasets and nested detail tables.\n         Uses a plain overflow container with a @for loop \u2014 no CDK needed.\n    ================================================================ -->\n    <div\n      class=\"i-table-container i-table-container--scrollable\"\n      [style.max-height]=\"effectiveHeight()\"\n    >\n      <table class=\"i-table\">\n        <thead>\n          <!-- Column Filter Row -->\n          @if (filterable) {\n            <tr class=\"i-table-filter-row\">\n              @if (selectionMode === \"multiple\") {\n                <th class=\"i-table-selection-header\"></th>\n              }\n              @for (\n                column of gridColumns();\n                track trackByColumn($index, column)\n              ) {\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)=\"\n                        onColumnFilterInput(column.field, $event)\n                      \"\n                    />\n                  </th>\n                } @else {\n                  <th [style.width]=\"getColumnWidth(column)\"></th>\n                }\n              }\n              @if (gridActions().length > 0) {\n                <th class=\"i-table-actions-header\"></th>\n              }\n            </tr>\n          }\n\n          <!-- Column Headers -->\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            }\n            @for (\n              column of gridColumns();\n              track trackByColumn($index, column)\n            ) {\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\n                      [class]=\"getSortIcon(column)\"\n                      class=\"i-table-sort-icon\"\n                    ></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            }\n            @if (gridActions().length > 0) {\n              <th class=\"i-table-actions-header\">Actions</th>\n            }\n          </tr>\n        </thead>\n\n        <tbody>\n          @if (processedData().length === 0) {\n            <tr class=\"i-table-empty-row\">\n              <td [attr.colspan]=\"totalColspan()\">\n                <i-no-content />\n              </td>\n            </tr>\n          }\n          @for (row of processedData(); track trackByRow($index, row)) {\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              }\n              @for (\n                column of gridColumns();\n                track trackByColumn($index, column)\n              ) {\n                <td\n                  [style.text-align]=\"column.align || 'left'\"\n                  [style.width]=\"getColumnWidth(column)\"\n                  [class]=\"\n                    getCellSeverity(row, column)\n                      ? 'i-table-cell-' + getCellSeverity(row, column)\n                      : ''\n                  \"\n                >\n                  @if (isIconColumn(column)) {\n                    <i\n                      [class]=\"getIconClasses(row, column)\"\n                      [style.font-size]=\"column.iconSize || '1rem'\"\n                    ></i>\n                  } @else if (isListColumn(column)) {\n                    <div class=\"i-table-list-cell\">\n                      @for (item of getCellListItems(row, column); track item) {\n                        <i-chip [label]=\"item\"></i-chip>\n                      }\n                    </div>\n                  } @else {\n                    <span\n                      [class.i-severity-text]=\"getCellSeverity(row, column)\"\n                    >\n                      {{\n                        formatCellValue(getCellValue(row, column.field), column)\n                      }}\n                    </span>\n                  }\n                </td>\n              }\n              @if (gridActions().length > 0) {\n                <td class=\"i-table-actions-cell\">\n                  <div class=\"i-table-actions\">\n                    @for (action of gridActions(); 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                        [iTooltip]=\"getActionTooltip(action, row)\"\n                        [class.i-action-hidden]=\"!isActionVisible(action, row)\"\n                        (clicked)=\"triggerAction(action, row, $event)\"\n                      >\n                        @if (action.label) {\n                          {{ action.label }}\n                        }\n                      </i-button>\n                    }\n                  </div>\n                </td>\n              }\n            </tr>\n          }\n        </tbody>\n      </table>\n    </div>\n  }\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(--color-component-background)}.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(--color-component-background)}.i-table-wrapper table thead .i-table-filter-row .i-table-column-filter{border:1px solid var(--surface-border);background:var(--surface-ground);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(--color-component-background)}.i-table-wrapper table tbody tr.i-table-row-selected{background:var(--surface-hover);color:var(--color-primary)}.i-table-wrapper table tbody .i-table-expanded-row{background:var(--color-component-background)}.i-table-wrapper table tbody .i-table-expanded-row .i-table-expanded-content{background:transparent}.i-table-wrapper table tbody .i-table-empty-row td{background:var(--color-component-background)}.i-table-wrapper table tbody .i-table-group-header{background:var(--color-component-background);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(--color-component-background);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,.i-table-wrapper table tbody .i-table-group-row.i-table-row-odd{background:var(--color-component-background)}.i-table-wrapper table tbody .i-table-group-row.i-table-row-selected{background:var(--surface-hover);color:var(--color-primary)}.i-table-wrapper table tbody .i-table-group-summary-row{background:var(--surface-section);border-bottom:2px solid var(--surface-border)}.i-table-wrapper table tbody .i-table-group-summary-row td{color:var(--color-text-primary);font-weight:600}.i-table-wrapper table tbody .i-table-group-summary-row:hover{background:var(--surface-hover)}.i-table-wrapper table tbody .i-table-group-summary-row .i-table-group-count{color:var(--color-text-secondary)}.i-table-wrapper table tbody .i-table-group-detail-row,.i-table-wrapper table tbody .i-table-group-detail-row .i-table-group-detail-cell .i-table-wrapper{background:var(--surface-ground)}.i-table-wrapper table tbody .i-table-group-detail-row .i-table-group-detail-cell .i-table-wrapper table thead tr{background:var(--surface-section)}.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):not(.i-table-group-detail-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):not(.i-table-group-header):not(.i-table-group-columns-header):not(.i-table-group-detail-row).i-table-row-selected:hover{background:var(--surface-hover)}.i-table-wrapper .i-table-column-resizer{background:var(--surface-border)}.i-table-wrapper .i-table-column-resizer:hover{background:var(--color-primary)}.i-table-wrapper .i-table-container--virtual-scroll .i-table-virtual-header{background:var(--color-component-background);border-bottom:1px solid var(--surface-border)}.i-table-wrapper .i-table-container--virtual-scroll .i-table-virtual-header .i-table-virtual-cell{color:var(--color-text-primary)}.i-table-wrapper .i-table-container--virtual-scroll .i-table-virtual-header .i-table-header-cell .i-table-sort-icon{color:var(--color-text-secondary)}.i-table-wrapper .i-table-container--virtual-scroll .i-table-virtual-header .i-table-header-cell.i-table-sortable-column:hover{background:var(--surface-hover)}.i-table-wrapper .i-table-container--virtual-scroll .i-table-virtual-header .i-table-header-cell.i-table-sorted{background:var(--surface-hover);color:var(--color-primary)}.i-table-wrapper .i-table-container--virtual-scroll .i-table-virtual-header .i-table-header-cell.i-table-sorted .i-table-sort-icon{color:var(--color-primary)}.i-table-wrapper .i-table-container--virtual-scroll .i-table-virtual-header .i-table-filter-row .i-table-column-filter{border:1px solid var(--surface-border);background:var(--surface-ground);color:var(--color-text-primary)}.i-table-wrapper .i-table-container--virtual-scroll .i-table-virtual-header .i-table-filter-row .i-table-column-filter:focus{border-color:var(--color-primary);outline:none}.i-table-wrapper .i-table-container--virtual-scroll .i-table-virtual-header .i-table-filter-row .i-table-column-filter::placeholder{color:var(--color-text-tertiary)}.i-table-wrapper .i-table-container--virtual-scroll .i-table-virtual-viewport .i-table-virtual-row{background:var(--color-component-background);border-bottom:1px solid var(--surface-border);color:var(--color-text-primary);transition:background-color .15s ease}.i-table-wrapper .i-table-container--virtual-scroll .i-table-virtual-viewport .i-table-virtual-row.i-table-row-odd{background:var(--color-component-background)}.i-table-wrapper .i-table-container--virtual-scroll .i-table-virtual-viewport .i-table-virtual-row.i-table-row-selected{background:var(--surface-hover);color:var(--color-primary)}.i-table-wrapper.i-table--nested{background:transparent}.i-table-wrapper.i-table--nested table thead tr{background:var(--surface-section)}.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}.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{scrollbar-width:thin;scrollbar-color:rgba(0,0,0,.2) transparent;scroll-behavior:smooth}.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{scrollbar-color:var(--color-text-secondary) transparent}.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{scrollbar-width:thin;scrollbar-color:var(--color-text-secondary) rgba(0,0,0,.05)}.i-table-wrapper .i-table-container--scrollable{overflow-y:auto;scrollbar-gutter:stable}.i-table-wrapper .i-table-container--scrollable>table>thead{position:sticky;top:0;z-index:2}.i-table-wrapper .i-table-container--virtual-scroll{overflow:hidden;display:flex;flex-direction:column}.i-table-wrapper .i-table-container--virtual-scroll .i-table-virtual-header{flex-shrink:0;overflow:hidden}.i-table-wrapper .i-table-container--virtual-scroll .i-table-virtual-header .i-table-sort-icon{font-size:.8em;opacity:.6;transition:opacity .15s ease,color .15s ease}.i-table-wrapper .i-table-container--virtual-scroll .i-table-virtual-header .i-table-header-cell.i-table-sortable-column{cursor:pointer}.i-table-wrapper .i-table-container--virtual-scroll .i-table-virtual-header .i-table-header-cell.i-table-sortable-column .i-table-sort-icon{opacity:.4}.i-table-wrapper .i-table-container--virtual-scroll .i-table-virtual-header .i-table-header-cell.i-table-sortable-column:hover .i-table-sort-icon,.i-table-wrapper .i-table-container--virtual-scroll .i-table-virtual-header .i-table-header-cell.i-table-sortable-column.i-table-sorted .i-table-sort-icon{opacity:1}.i-table-wrapper .i-table-container--virtual-scroll .i-table-virtual-header .i-table-filter-row .i-table-virtual-cell{padding:8px 16px}.i-table-wrapper .i-table-container--virtual-scroll .i-table-virtual-header .i-table-filter-row .i-table-virtual-cell .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 .i-table-container--virtual-scroll .i-table-virtual-viewport{flex:1;min-height:0;width:100%;overflow-y:auto}.i-table-wrapper .i-table-container--virtual-scroll .i-table-virtual-viewport::-webkit-scrollbar-track{background:transparent;border-radius:3px}.i-table-wrapper .i-table-container--virtual-scroll .i-table-virtual-viewport::-webkit-scrollbar-thumb{background:#0003;border-radius:3px;transition:background .2s ease}.i-table-wrapper .i-table-container--virtual-scroll .i-table-virtual-viewport::-webkit-scrollbar-thumb:hover{background:#00000059}.i-table-wrapper .i-table-container--virtual-scroll .i-table-virtual-viewport::-webkit-scrollbar-thumb:active{background:#00000080}.i-table-wrapper .i-table-container--virtual-scroll .i-table-virtual-viewport::-webkit-scrollbar-corner{background:transparent}.i-table-wrapper .i-table-container--virtual-scroll .i-table-virtual-viewport{scrollbar-width:thin;scrollbar-color:rgba(0,0,0,.2) transparent;scroll-behavior:smooth}.i-table-wrapper .i-table-container--virtual-scroll .i-table-virtual-viewport::-webkit-scrollbar-thumb{background:var(--color-text-secondary);opacity:.4}.i-table-wrapper .i-table-container--virtual-scroll .i-table-virtual-viewport::-webkit-scrollbar-thumb:hover{background:var(--color-text-primary);opacity:.6}.i-table-wrapper .i-table-container--virtual-scroll .i-table-virtual-viewport::-webkit-scrollbar-thumb:active{background:var(--color-primary);opacity:.7}.i-table-wrapper .i-table-container--virtual-scroll .i-table-virtual-viewport{scrollbar-color:var(--color-text-secondary) transparent}.i-table-wrapper .i-table-container--virtual-scroll .i-table-virtual-viewport::-webkit-scrollbar{width:6px;height:6px}.i-table-wrapper .i-table-container--virtual-scroll .i-table-virtual-viewport::-webkit-scrollbar-track{background:#0000000d;border-radius:3px;margin:2px 0}.i-table-wrapper .i-table-container--virtual-scroll .i-table-virtual-viewport::-webkit-scrollbar-thumb{border-radius:3px;min-height:20px;background:var(--color-text-secondary);opacity:.6}.i-table-wrapper .i-table-container--virtual-scroll .i-table-virtual-viewport::-webkit-scrollbar-thumb:hover{background:var(--color-text-primary);opacity:.8}.i-table-wrapper .i-table-container--virtual-scroll .i-table-virtual-viewport::-webkit-scrollbar-thumb:active{background:var(--color-primary);opacity:.9}.i-table-wrapper .i-table-container--virtual-scroll .i-table-virtual-viewport{scrollbar-width:thin;scrollbar-color:var(--color-text-secondary) rgba(0,0,0,.05)}.i-table-wrapper .i-table-container--virtual-scroll .i-table-virtual-viewport .cdk-virtual-scroll-content-wrapper{width:100%}.i-table-wrapper .i-table-container--virtual-scroll .i-table-virtual-row{display:flex;align-items:center;width:100%;box-sizing:border-box}.i-table-wrapper .i-table-container--virtual-scroll .i-table-virtual-cell{padding:12px 16px;box-sizing:border-box;flex-shrink:0;overflow:hidden;display:flex;align-items:center}.i-table-wrapper .i-table-container--virtual-scroll .i-table-virtual-cell.i-table-header-cell{-webkit-user-select:none;user-select:none;font-weight:600;white-space:nowrap}.i-table-wrapper .i-table-container--virtual-scroll .i-table-virtual-cell.i-table-header-cell .i-table-header-content{display:flex;align-items:center;gap:8px}.i-table-wrapper .i-table-container--virtual-scroll .i-table-virtual-cell.i-table-header-cell .i-table-header-content .i-table-header-text{flex:1}.i-table-wrapper .i-table-container--virtual-scroll .i-table-virtual-cell.i-table-selection-header,.i-table-wrapper .i-table-container--virtual-scroll .i-table-virtual-cell.i-table-selection-cell{width:50px;flex:0 0 50px;justify-content:center}.i-table-wrapper .i-table-container--virtual-scroll .i-table-virtual-cell.i-table-actions-header,.i-table-wrapper .i-table-container--virtual-scroll .i-table-virtual-cell.i-table-actions-cell{flex:0 0 auto;justify-content:flex-end}.i-table-wrapper .i-table-container--virtual-scroll .i-table-virtual-cell.i-table-actions-header .i-table-actions,.i-table-wrapper .i-table-container--virtual-scroll .i-table-virtual-cell.i-table-actions-cell .i-table-actions{display:flex;gap:4px;justify-content:flex-end}.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:.8em;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 tr th.i-table-actions-header{text-align:right}.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 .i-table-expanded-content{padding:0;margin:2px 0 24px;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-summary-row{cursor:pointer;-webkit-user-select:none;user-select:none;font-weight:600;transition:background-color .15s ease}.i-table-wrapper table tbody .i-table-group-summary-row td{padding:12px 16px}.i-table-wrapper table tbody .i-table-group-summary-row .i-table-group-header-content{display:flex;align-items:center;gap:8px}.i-table-wrapper table tbody .i-table-group-summary-row .i-table-group-header-content .i-table-group-label{flex:1;font-size:1.05em}.i-table-wrapper table tbody .i-table-group-summary-row .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-detail-row .i-table-group-detail-cell{padding:0;overflow:hidden}.i-table-wrapper table tbody .i-table-group-detail-row .i-table-group-detail-cell .i-table-wrapper{border-radius:0;border-top:none;overflow:hidden}.i-table-wrapper table tbody .i-table-group-count-header{width:60px;text-align:center;font-weight:400;opacity:.6;font-size:.85em}.i-table-wrapper table tbody .i-table-group-count-cell{width:60px;text-align:right;white-space:nowrap}.i-table-wrapper table tbody .i-table-group-count-cell .i-table-group-count{opacity:.7;font-size:.9em;font-weight:400}.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:.8em;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-detail-count-header{width:36px;padding:0}.i-table-wrapper .i-table-detail-count-cell{width:36px;padding:0 4px 0 0;text-align:right;white-space:nowrap;font-size:.78em;opacity:.5;font-weight:400}.i-table-wrapper .i-table-actions-header,.i-table-wrapper .i-table-actions-cell{width:auto;white-space:nowrap;text-align:right}.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}.i-severity-icon.success,.i-table-cell-success .i-severity-icon,.i-severity-text.success,.i-table-cell-success .i-severity-text{color:var(--color-success)}.i-severity-icon.info,.i-table-cell-info .i-severity-icon,.i-severity-text.info,.i-table-cell-info .i-severity-text{color:var(--color-info)}.i-severity-icon.warning,.i-table-cell-warning .i-severity-icon,.i-severity-text.warning,.i-table-cell-warning .i-severity-text{color:var(--color-warning)}.i-severity-icon.danger,.i-table-cell-danger .i-severity-icon,.i-severity-text.danger,.i-table-cell-danger .i-severity-text{color:var(--color-danger)}.i-severity-icon.secondary,.i-table-cell-secondary .i-severity-icon,.i-severity-text.secondary,.i-table-cell-secondary .i-severity-text{color:var(--color-text-secondary)}.i-table-list-cell{display:flex;flex-direction:column;gap:4px;align-items:flex-start}.i-table-list-cell i-chip{display:block}.i-action-hidden{visibility:hidden;pointer-events:none}@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: "component", type: i0.forwardRef(() => ITable), selector: "i-table", inputs: ["grid", "emptyMessage", "sortable", "sortField", "sortOrder", "filterable", "globalFilter", "filterDelay", "selectionMode", "selection", "dataKey", "striped", "hoverable", "bordered", "size", "loading", "scrollable", "height", "virtualScroll", "virtualScrollItemSize", "virtualScrollMinBufferPx", "virtualScrollMaxBufferPx", "resizableColumns", "downloadable", "downloadMode", "downloadFormat", "downloadFilename"], outputs: ["onSort", "onFilter", "selectionChange", "onSelectionChange", "onRowSelect", "onRowUnselect", "onRowExpand", "onRowCollapse", "onDownload"] }, { kind: "ngmodule", type: i0.forwardRef(() => CommonModule) }, { kind: "directive", type: i0.forwardRef(() => i1$1.NgClass), selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: i0.forwardRef(() => FormsModule) }, { kind: "directive", type: i0.forwardRef(() => i1.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: i0.forwardRef(() => i1.NgControlStatus), selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i0.forwardRef(() => i1.NgModel), selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i0.forwardRef(() => CdkVirtualScrollViewport), selector: "cdk-virtual-scroll-viewport", inputs: ["orientation", "appendOnly"], outputs: ["scrolledIndexChange"] }, { kind: "directive", type: i0.forwardRef(() => CdkVirtualForOf), selector: "[cdkVirtualFor][cdkVirtualForOf]", inputs: ["cdkVirtualForOf", "cdkVirtualForTrackBy", "cdkVirtualForTemplate", "cdkVirtualForTemplateCacheSize"] }, { kind: "directive", type: i0.forwardRef(() => CdkFixedSizeVirtualScroll), selector: "cdk-virtual-scroll-viewport[itemSize]", inputs: ["itemSize", "minBufferPx", "maxBufferPx"] }, { kind: "component", type: i0.forwardRef(() => IInputText), selector: "i-input-text", inputs: ["label", "type", "id", "fluid", "forceFloated", "hideText", "useFloatLabel", "placeholder", "externalInvalid", "externalErrorMessage", "backgroundStyle", "icon", "readonly", "disabled", "errorMessages"] }, { kind: "component", type: i0.forwardRef(() => IButton), selector: "i-button", inputs: ["severity", "size", "type", "disabled", "outlined", "raised", "text", "icon", "fluid", "loading"], outputs: ["clicked"] }, { kind: "component", type: i0.forwardRef(() => ICheckbox), selector: "i-checkbox", inputs: ["label", "id", "disabled", "readonly", "size", "indeterminate", "checked"], outputs: ["onChange"] }, { kind: "component", type: i0.forwardRef(() => IChip), selector: "i-chip", inputs: ["label", "icon", "image", "removable", "removeIcon", "styleClass", "disabled"], outputs: ["onRemove"] }, { kind: "component", type: i0.forwardRef(() => NoContentComponent), selector: "i-no-content", inputs: ["icon", "message"] }, { kind: "directive", type: i0.forwardRef(() => TooltipDirective), selector: "[iTooltip]", inputs: ["iTooltip", "tooltipPosition", "tooltipDelay"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.3", type: ITable, isStandalone: true, selector: "i-table", inputs: { grid: { classPropertyName: "grid", publicName: "grid", 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 }, 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 }, height: { classPropertyName: "height", publicName: "height", isSignal: false, isRequired: false, transformFunction: null }, virtualScroll: { classPropertyName: "virtualScroll", publicName: "virtualScroll", isSignal: false, isRequired: false, transformFunction: null }, virtualScrollItemSize: { classPropertyName: "virtualScrollItemSize", publicName: "virtualScrollItemSize", isSignal: false, isRequired: false, transformFunction: null }, virtualScrollMinBufferPx: { classPropertyName: "virtualScrollMinBufferPx", publicName: "virtualScrollMinBufferPx", isSignal: false, isRequired: false, transformFunction: null }, virtualScrollMaxBufferPx: { classPropertyName: "virtualScrollMaxBufferPx", publicName: "virtualScrollMaxBufferPx", isSignal: false, isRequired: false, transformFunction: null }, resizableColumns: { classPropertyName: "resizableColumns", publicName: "resizableColumns", 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", onRowExpand: "onRowExpand", onRowCollapse: "onRowCollapse", onDownload: "onDownload" }, host: { listeners: { "document:mousemove": "onColumnResize($event)", "document:mouseup": "onColumnResizeEnd()" } }, viewQueries: [{ propertyName: "virtualScrollViewport", first: true, predicate: CdkVirtualScrollViewport, descendants: true }], ngImport: i0, template: "<div class=\"i-table-wrapper\" [ngClass]=\"getTableClasses()\">\n  <!-- Table Header: global filter + 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        }\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  <!-- ================================================================\n       PATH A \u2014 Detail-expandable table\n       Uses a standard scrollable container so that nested <i-table>\n       components can expand inline below their parent rows.\n  ================================================================ -->\n  @if (hasDetails()) {\n    <div\n      class=\"i-table-container i-table-container--scrollable\"\n      [style.max-height]=\"effectiveHeight()\"\n    >\n      <table class=\"i-table\">\n        <thead>\n          <!-- Column Filter Row -->\n          @if (filterable) {\n            <tr class=\"i-table-filter-row\">\n              @if (selectionMode === \"multiple\") {\n                <th class=\"i-table-selection-header\"></th>\n              }\n              <th class=\"i-table-expand-header\"></th>\n              @for (\n                column of gridColumns();\n                track trackByColumn($index, column)\n              ) {\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)=\"\n                        onColumnFilterInput(column.field, $event)\n                      \"\n                    />\n                  </th>\n                } @else {\n                  <th [style.width]=\"getColumnWidth(column)\"></th>\n                }\n              }\n              <th class=\"i-table-detail-count-header\"></th>\n              @if (gridActions().length > 0) {\n                <th class=\"i-table-actions-header\"></th>\n              }\n            </tr>\n          }\n\n          <!-- Column Headers -->\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            }\n            <th class=\"i-table-expand-header\"></th>\n            @for (\n              column of gridColumns();\n              track trackByColumn($index, column)\n            ) {\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\n                      [class]=\"getSortIcon(column)\"\n                      class=\"i-table-sort-icon\"\n                    ></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            }\n            <th class=\"i-table-detail-count-header\"></th>\n            @if (gridActions().length > 0) {\n              <th class=\"i-table-actions-header\">Actions</th>\n            }\n          </tr>\n        </thead>\n\n        <tbody>\n          @if (processedData().length === 0) {\n            <tr class=\"i-table-empty-row\">\n              <td [attr.colspan]=\"totalColspan()\">\n                <i-no-content />\n              </td>\n            </tr>\n          }\n          @for (row of processedData(); track trackByRow($index, row)) {\n            <!-- Parent row -->\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              }\n              <td class=\"i-table-expand-cell\">\n                <i-button\n                  severity=\"secondary\"\n                  [text]=\"true\"\n                  size=\"xtra-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 (\n                column of gridColumns();\n                track trackByColumn($index, column)\n              ) {\n                <td\n                  [style.text-align]=\"column.align || 'left'\"\n                  [style.width]=\"getColumnWidth(column)\"\n                  [class]=\"\n                    getCellSeverity(row, column)\n                      ? 'i-table-cell-' + getCellSeverity(row, column)\n                      : ''\n                  \"\n                >\n                  @if (isIconColumn(column)) {\n                    <i\n                      [class]=\"getCellIcon(row, column)\"\n                      [class.i-severity-icon]=\"getCellSeverity(row, column)\"\n                      [style.font-size]=\"column.iconSize || '1rem'\"\n                    ></i>\n                  } @else if (isListColumn(column)) {\n                    <div class=\"i-table-list-cell\">\n                      @for (item of getCellListItems(row, column); track item) {\n                        <i-chip [label]=\"item\"></i-chip>\n                      }\n                    </div>\n                  } @else {\n                    <span\n                      [class.i-severity-text]=\"getCellSeverity(row, column)\"\n                    >\n                      {{\n                        formatCellValue(getCellValue(row, column.field), column)\n                      }}\n                    </span>\n                  }\n                </td>\n              }\n              <td class=\"i-table-detail-count-cell\">\n                ({{ getDetailRowCount(row) }})\n              </td>\n              @if (gridActions().length > 0) {\n                <td class=\"i-table-actions-cell\">\n                  <div class=\"i-table-actions\">\n                    @for (action of gridActions(); 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                        [iTooltip]=\"getActionTooltip(action, row)\"\n                        [class.i-action-hidden]=\"!isActionVisible(action, row)\"\n                        (clicked)=\"triggerAction(action, row, $event)\"\n                      >\n                        @if (action.label) {\n                          {{ action.label }}\n                        }\n                      </i-button>\n                    }\n                  </div>\n                </td>\n              }\n            </tr>\n\n            <!-- Detail expansion row -->\n            @if (isRowExpanded(row)) {\n              <tr class=\"i-table-expanded-row\">\n                <td\n                  [attr.colspan]=\"totalColspan()\"\n                  class=\"i-table-expanded-cell\"\n                >\n                  <div class=\"i-table-expanded-content\">\n                    <i-table\n                      [grid]=\"getDetailGrid(row)\"\n                      [sortable]=\"sortable\"\n                      [filterable]=\"filterable\"\n                      [selectionMode]=\"selectionMode\"\n                      [selection]=\"selection\"\n                      [striped]=\"striped\"\n                      [hoverable]=\"hoverable\"\n                      [bordered]=\"bordered\"\n                      [size]=\"size\"\n                      [dataKey]=\"dataKey\"\n                      [resizableColumns]=\"resizableColumns\"\n                      (onSort)=\"onSort.emit($event)\"\n                      (onFilter)=\"onFilter.emit($event)\"\n                      (onSelectionChange)=\"onSelectionChange.emit($event)\"\n                      (selectionChange)=\"selectionChange.emit($event)\"\n                      (onRowSelect)=\"onRowSelect.emit($event)\"\n                      (onRowUnselect)=\"onRowUnselect.emit($event)\"\n                    ></i-table>\n                  </div>\n                </td>\n              </tr>\n            }\n          }\n        </tbody>\n      </table>\n    </div>\n  } @else if (virtualScroll) {\n    <!-- ================================================================\n         PATH B \u2014 CDK Virtual Scroll (div-based rows)\n         Use only for large row counts (\u2265 ~500 rows). Uses flex <div> rows\n         so CDK's wrapper <div> does not end up inside <tbody> (invalid HTML).\n    ================================================================ -->\n    <div\n      class=\"i-table-container i-table-container--scrollable i-table-container--virtual-scroll\"\n      [style.height]=\"effectiveHeight()\"\n    >\n      <!-- Sticky header \u2014 flex rows that mirror the virtual body rows -->\n      <div class=\"i-table-virtual-header\">\n        @if (filterable) {\n          <div class=\"i-table-virtual-row i-table-filter-row\">\n            @if (selectionMode === \"multiple\") {\n              <div class=\"i-table-virtual-cell i-table-selection-header\"></div>\n            }\n            @for (\n              column of gridColumns();\n              track trackByColumn($index, column)\n            ) {\n              @if (column.filterable !== false) {\n                <div\n                  class=\"i-table-virtual-cell\"\n                  [style.width]=\"\n                    getColumnWidth(column) !== 'auto'\n                      ? getColumnWidth(column)\n                      : null\n                  \"\n                  [style.flex]=\"getColumnWidth(column) === 'auto' ? '1' : null\"\n                >\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                </div>\n              } @else {\n                <div\n                  class=\"i-table-virtual-cell\"\n                  [style.width]=\"\n                    getColumnWidth(column) !== 'auto'\n                      ? getColumnWidth(column)\n                      : null\n                  \"\n                  [style.flex]=\"getColumnWidth(column) === 'auto' ? '1' : null\"\n                ></div>\n              }\n            }\n            @if (gridActions().length > 0) {\n              <div class=\"i-table-virtual-cell i-table-actions-header\"></div>\n            }\n          </div>\n        }\n        <div class=\"i-table-virtual-row i-table-header-row\">\n          @if (selectionMode === \"multiple\") {\n            <div class=\"i-table-virtual-cell i-table-selection-header\">\n              <i-checkbox\n                [checked]=\"areAllRowsSelected()\"\n                [indeterminate]=\"areSomeRowsSelected()\"\n                (onChange)=\"toggleAllSelection()\"\n              ></i-checkbox>\n            </div>\n          }\n          @for (column of gridColumns(); track trackByColumn($index, column)) {\n            <div\n              class=\"i-table-virtual-cell i-table-header-cell\"\n              [style.width]=\"\n                getColumnWidth(column) !== 'auto'\n                  ? getColumnWidth(column)\n                  : null\n              \"\n              [style.flex]=\"getColumnWidth(column) === 'auto' ? '1' : null\"\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\n                    [class]=\"getSortIcon(column)\"\n                    class=\"i-table-sort-icon\"\n                  ></i>\n                }\n              </div>\n            </div>\n          }\n          @if (gridActions().length > 0) {\n            <div class=\"i-table-virtual-cell i-table-actions-header\">\n              Actions\n            </div>\n          }\n        </div>\n      </div>\n\n      <!-- Virtual Scroll Viewport \u2014 *cdkVirtualFor on <div>, not <tr> -->\n      <cdk-virtual-scroll-viewport\n        [itemSize]=\"virtualScrollItemSize\"\n        [minBufferPx]=\"virtualScrollMinBufferPx\"\n        [maxBufferPx]=\"virtualScrollMaxBufferPx\"\n        class=\"i-table-virtual-viewport\"\n      >\n        @if (processedData().length === 0) {\n          <div class=\"i-table-virtual-row i-table-empty-row\">\n            <div\n              class=\"i-table-virtual-cell\"\n              style=\"flex: 1; text-align: center; padding: 40px 16px\"\n            >\n              <i-no-content />\n            </div>\n          </div>\n        }\n        <div\n          *cdkVirtualFor=\"\n            let row of processedData();\n            let rowIndex = index;\n            trackBy: trackByRow\n          \"\n          class=\"i-table-virtual-row\"\n          [style.height.px]=\"virtualScrollItemSize\"\n          [class.i-table-row-odd]=\"rowIndex % 2 !== 0\"\n          [class.i-table-row-selected]=\"isRowSelected(row)\"\n          (click)=\"toggleRowSelection(row)\"\n        >\n          @if (selectionMode === \"multiple\") {\n            <div class=\"i-table-virtual-cell i-table-selection-cell\">\n              <i-checkbox\n                [checked]=\"isRowSelected(row)\"\n                (onChange)=\"toggleRowSelection(row)\"\n                (click)=\"$event.stopPropagation()\"\n              ></i-checkbox>\n            </div>\n          }\n          @for (column of gridColumns(); track trackByColumn($index, column)) {\n            <div\n              class=\"i-table-virtual-cell\"\n              [style.width]=\"\n                getColumnWidth(column) !== 'auto'\n                  ? getColumnWidth(column)\n                  : null\n              \"\n              [style.flex]=\"getColumnWidth(column) === 'auto' ? '1' : null\"\n              [style.text-align]=\"column.align || 'left'\"\n              [ngClass]=\"\n                getCellSeverity(row, column)\n                  ? 'i-table-cell-' + getCellSeverity(row, column)\n                  : ''\n              \"\n            >\n              @if (isIconColumn(column)) {\n                <i\n                  [class]=\"getIconClasses(row, column)\"\n                  [style.font-size]=\"column.iconSize || '1rem'\"\n                ></i>\n              } @else if (isListColumn(column)) {\n                <div class=\"i-table-list-cell\">\n                  @for (item of getCellListItems(row, column); track item) {\n                    <i-chip [label]=\"item\"></i-chip>\n                  }\n                </div>\n              } @else {\n                <span [class.i-severity-text]=\"getCellSeverity(row, column)\">\n                  {{ formatCellValue(getCellValue(row, column.field), column) }}\n                </span>\n              }\n            </div>\n          }\n          @if (gridActions().length > 0) {\n            <div class=\"i-table-virtual-cell i-table-actions-cell\">\n              <div class=\"i-table-actions\">\n                @for (action of gridActions(); 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                    [iTooltip]=\"getActionTooltip(action, row)\"\n                    [class.i-action-hidden]=\"!isActionVisible(action, row)\"\n                    (clicked)=\"triggerAction(action, row, $event)\"\n                  >\n                    @if (action.label) {\n                      {{ action.label }}\n                    }\n                  </i-button>\n                }\n              </div>\n            </div>\n          }\n        </div>\n      </cdk-virtual-scroll-viewport>\n    </div>\n  } @else {\n    <!-- ================================================================\n         PATH C \u2014 Regular scrollable table\n         Default for small/medium datasets and nested detail tables.\n         Uses a plain overflow container with a @for loop \u2014 no CDK needed.\n    ================================================================ -->\n    <div\n      class=\"i-table-container i-table-container--scrollable\"\n      [style.max-height]=\"effectiveHeight()\"\n    >\n      <table class=\"i-table\">\n        <thead>\n          <!-- Column Filter Row -->\n          @if (filterable) {\n            <tr class=\"i-table-filter-row\">\n              @if (selectionMode === \"multiple\") {\n                <th class=\"i-table-selection-header\"></th>\n              }\n              @for (\n                column of gridColumns();\n                track trackByColumn($index, column)\n              ) {\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)=\"\n                        onColumnFilterInput(column.field, $event)\n                      \"\n                    />\n                  </th>\n                } @else {\n                  <th [style.width]=\"getColumnWidth(column)\"></th>\n                }\n              }\n              @if (gridActions().length > 0) {\n                <th class=\"i-table-actions-header\"></th>\n              }\n            </tr>\n          }\n\n          <!-- Column Headers -->\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            }\n            @for (\n              column of gridColumns();\n              track trackByColumn($index, column)\n            ) {\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\n                      [class]=\"getSortIcon(column)\"\n                      class=\"i-table-sort-icon\"\n                    ></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            }\n            @if (gridActions().length > 0) {\n              <th class=\"i-table-actions-header\">Actions</th>\n            }\n          </tr>\n        </thead>\n\n        <tbody>\n          @if (processedData().length === 0) {\n            <tr class=\"i-table-empty-row\">\n              <td [attr.colspan]=\"totalColspan()\">\n                <i-no-content />\n              </td>\n            </tr>\n          }\n          @for (row of processedData(); track trackByRow($index, row)) {\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              }\n              @for (\n                column of gridColumns();\n                track trackByColumn($index, column)\n              ) {\n                <td\n                  [style.text-align]=\"column.align || 'left'\"\n                  [style.width]=\"getColumnWidth(column)\"\n                  [class]=\"\n                    getCellSeverity(row, column)\n                      ? 'i-table-cell-' + getCellSeverity(row, column)\n                      : ''\n                  \"\n                >\n                  @if (isIconColumn(column)) {\n                    <i\n                      [class]=\"getIconClasses(row, column)\"\n                      [style.font-size]=\"column.iconSize || '1rem'\"\n                    ></i>\n                  } @else if (isListColumn(column)) {\n                    <div class=\"i-table-list-cell\">\n                      @for (item of getCellListItems(row, column); track item) {\n                        <i-chip [label]=\"item\"></i-chip>\n                      }\n                    </div>\n                  } @else {\n                    <span\n                      [class.i-severity-text]=\"getCellSeverity(row, column)\"\n                    >\n                      {{\n                        formatCellValue(getCellValue(row, column.field), column)\n                      }}\n                    </span>\n                  }\n                </td>\n              }\n              @if (gridActions().length > 0) {\n                <td class=\"i-table-actions-cell\">\n                  <div class=\"i-table-actions\">\n                    @for (action of gridActions(); 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                        [iTooltip]=\"getActionTooltip(action, row)\"\n                        [class.i-action-hidden]=\"!isActionVisible(action, row)\"\n                        (clicked)=\"triggerAction(action, row, $event)\"\n                      >\n                        @if (action.label) {\n                          {{ action.label }}\n                        }\n                      </i-button>\n                    }\n                  </div>\n                </td>\n              }\n            </tr>\n          }\n        </tbody>\n      </table>\n    </div>\n  }\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(--color-component-background)}.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(--color-component-background)}.i-table-wrapper table thead .i-table-filter-row .i-table-column-filter{border:1px solid var(--surface-border);background:var(--surface-ground);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(--color-component-background)}.i-table-wrapper table tbody tr.i-table-row-selected{background:var(--surface-hover);color:var(--color-primary)}.i-table-wrapper table tbody .i-table-expanded-row{background:var(--color-component-background)}.i-table-wrapper table tbody .i-table-expanded-row .i-table-expanded-content{background:transparent}.i-table-wrapper table tbody .i-table-empty-row td{background:var(--color-component-background)}.i-table-wrapper table tbody .i-table-group-header{background:var(--color-component-background);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(--color-component-background);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,.i-table-wrapper table tbody .i-table-group-row.i-table-row-odd{background:var(--color-component-background)}.i-table-wrapper table tbody .i-table-group-row.i-table-row-selected{background:var(--surface-hover);color:var(--color-primary)}.i-table-wrapper table tbody .i-table-group-summary-row{background:var(--surface-section);border-bottom:2px solid var(--surface-border)}.i-table-wrapper table tbody .i-table-group-summary-row td{color:var(--color-text-primary);font-weight:600}.i-table-wrapper table tbody .i-table-group-summary-row:hover{background:var(--surface-hover)}.i-table-wrapper table tbody .i-table-group-summary-row .i-table-group-count{color:var(--color-text-secondary)}.i-table-wrapper table tbody .i-table-group-detail-row,.i-table-wrapper table tbody .i-table-group-detail-row .i-table-group-detail-cell .i-table-wrapper{background:var(--surface-ground)}.i-table-wrapper table tbody .i-table-group-detail-row .i-table-group-detail-cell .i-table-wrapper table thead tr{background:var(--surface-section)}.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):not(.i-table-group-detail-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):not(.i-table-group-header):not(.i-table-group-columns-header):not(.i-table-group-detail-row).i-table-row-selected:hover{background:var(--surface-hover)}.i-table-wrapper .i-table-column-resizer{background:var(--surface-border)}.i-table-wrapper .i-table-column-resizer:hover{background:var(--color-primary)}.i-table-wrapper .i-table-container--virtual-scroll .i-table-virtual-header{background:var(--color-component-background);border-bottom:1px solid var(--surface-border)}.i-table-wrapper .i-table-container--virtual-scroll .i-table-virtual-header .i-table-virtual-cell{color:var(--color-text-primary)}.i-table-wrapper .i-table-container--virtual-scroll .i-table-virtual-header .i-table-header-cell .i-table-sort-icon{color:var(--color-text-secondary)}.i-table-wrapper .i-table-container--virtual-scroll .i-table-virtual-header .i-table-header-cell.i-table-sortable-column:hover{background:var(--surface-hover)}.i-table-wrapper .i-table-container--virtual-scroll .i-table-virtual-header .i-table-header-cell.i-table-sorted{background:var(--surface-hover);color:var(--color-primary)}.i-table-wrapper .i-table-container--virtual-scroll .i-table-virtual-header .i-table-header-cell.i-table-sorted .i-table-sort-icon{color:var(--color-primary)}.i-table-wrapper .i-table-container--virtual-scroll .i-table-virtual-header .i-table-filter-row .i-table-column-filter{border:1px solid var(--surface-border);background:var(--surface-ground);color:var(--color-text-primary)}.i-table-wrapper .i-table-container--virtual-scroll .i-table-virtual-header .i-table-filter-row .i-table-column-filter:focus{border-color:var(--color-primary);outline:none}.i-table-wrapper .i-table-container--virtual-scroll .i-table-virtual-header .i-table-filter-row .i-table-column-filter::placeholder{color:var(--color-text-tertiary)}.i-table-wrapper .i-table-container--virtual-scroll .i-table-virtual-viewport .i-table-virtual-row{background:var(--color-component-background);border-bottom:1px solid var(--surface-border);color:var(--color-text-primary);transition:background-color .15s ease}.i-table-wrapper .i-table-container--virtual-scroll .i-table-virtual-viewport .i-table-virtual-row.i-table-row-odd{background:var(--color-component-background)}.i-table-wrapper .i-table-container--virtual-scroll .i-table-virtual-viewport .i-table-virtual-row.i-table-row-selected{background:var(--surface-hover);color:var(--color-primary)}.i-table-wrapper.i-table--nested{background:transparent}.i-table-wrapper.i-table--nested table thead tr{background:var(--surface-section)}.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}.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{scrollbar-width:thin;scrollbar-color:rgba(0,0,0,.2) transparent;scroll-behavior:smooth}.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{scrollbar-color:var(--color-text-secondary) transparent}.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{scrollbar-width:thin;scrollbar-color:var(--color-text-secondary) rgba(0,0,0,.05)}.i-table-wrapper .i-table-container--scrollable{overflow-y:auto;scrollbar-gutter:stable}.i-table-wrapper .i-table-container--scrollable>table>thead{position:sticky;top:0;z-index:2}.i-table-wrapper .i-table-container--virtual-scroll{overflow:hidden;display:flex;flex-direction:column}.i-table-wrapper .i-table-container--virtual-scroll .i-table-virtual-header{flex-shrink:0;overflow:hidden}.i-table-wrapper .i-table-container--virtual-scroll .i-table-virtual-header .i-table-sort-icon{font-size:.8em;opacity:.6;transition:opacity .15s ease,color .15s ease}.i-table-wrapper .i-table-container--virtual-scroll .i-table-virtual-header .i-table-header-cell.i-table-sortable-column{cursor:pointer}.i-table-wrapper .i-table-container--virtual-scroll .i-table-virtual-header .i-table-header-cell.i-table-sortable-column .i-table-sort-icon{opacity:.4}.i-table-wrapper .i-table-container--virtual-scroll .i-table-virtual-header .i-table-header-cell.i-table-sortable-column:hover .i-table-sort-icon,.i-table-wrapper .i-table-container--virtual-scroll .i-table-virtual-header .i-table-header-cell.i-table-sortable-column.i-table-sorted .i-table-sort-icon{opacity:1}.i-table-wrapper .i-table-container--virtual-scroll .i-table-virtual-header .i-table-filter-row .i-table-virtual-cell{padding:8px 16px}.i-table-wrapper .i-table-container--virtual-scroll .i-table-virtual-header .i-table-filter-row .i-table-virtual-cell .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 .i-table-container--virtual-scroll .i-table-virtual-viewport{flex:1;min-height:0;width:100%;overflow-y:auto}.i-table-wrapper .i-table-container--virtual-scroll .i-table-virtual-viewport::-webkit-scrollbar-track{background:transparent;border-radius:3px}.i-table-wrapper .i-table-container--virtual-scroll .i-table-virtual-viewport::-webkit-scrollbar-thumb{background:#0003;border-radius:3px;transition:background .2s ease}.i-table-wrapper .i-table-container--virtual-scroll .i-table-virtual-viewport::-webkit-scrollbar-thumb:hover{background:#00000059}.i-table-wrapper .i-table-container--virtual-scroll .i-table-virtual-viewport::-webkit-scrollbar-thumb:active{background:#00000080}.i-table-wrapper .i-table-container--virtual-scroll .i-table-virtual-viewport::-webkit-scrollbar-corner{background:transparent}.i-table-wrapper .i-table-container--virtual-scroll .i-table-virtual-viewport{scrollbar-width:thin;scrollbar-color:rgba(0,0,0,.2) transparent;scroll-behavior:smooth}.i-table-wrapper .i-table-container--virtual-scroll .i-table-virtual-viewport::-webkit-scrollbar-thumb{background:var(--color-text-secondary);opacity:.4}.i-table-wrapper .i-table-container--virtual-scroll .i-table-virtual-viewport::-webkit-scrollbar-thumb:hover{background:var(--color-text-primary);opacity:.6}.i-table-wrapper .i-table-container--virtual-scroll .i-table-virtual-viewport::-webkit-scrollbar-thumb:active{background:var(--color-primary);opacity:.7}.i-table-wrapper .i-table-container--virtual-scroll .i-table-virtual-viewport{scrollbar-color:var(--color-text-secondary) transparent}.i-table-wrapper .i-table-container--virtual-scroll .i-table-virtual-viewport::-webkit-scrollbar{width:6px;height:6px}.i-table-wrapper .i-table-container--virtual-scroll .i-table-virtual-viewport::-webkit-scrollbar-track{background:#0000000d;border-radius:3px;margin:2px 0}.i-table-wrapper .i-table-container--virtual-scroll .i-table-virtual-viewport::-webkit-scrollbar-thumb{border-radius:3px;min-height:20px;background:var(--color-text-secondary);opacity:.6}.i-table-wrapper .i-table-container--virtual-scroll .i-table-virtual-viewport::-webkit-scrollbar-thumb:hover{background:var(--color-text-primary);opacity:.8}.i-table-wrapper .i-table-container--virtual-scroll .i-table-virtual-viewport::-webkit-scrollbar-thumb:active{background:var(--color-primary);opacity:.9}.i-table-wrapper .i-table-container--virtual-scroll .i-table-virtual-viewport{scrollbar-width:thin;scrollbar-color:var(--color-text-secondary) rgba(0,0,0,.05)}.i-table-wrapper .i-table-container--virtual-scroll .i-table-virtual-viewport .cdk-virtual-scroll-content-wrapper{width:100%}.i-table-wrapper .i-table-container--virtual-scroll .i-table-virtual-row{display:flex;align-items:center;width:100%;box-sizing:border-box}.i-table-wrapper .i-table-container--virtual-scroll .i-table-virtual-cell{padding:12px 16px;box-sizing:border-box;flex-shrink:0;overflow:hidden;display:flex;align-items:center}.i-table-wrapper .i-table-container--virtual-scroll .i-table-virtual-cell.i-table-header-cell{-webkit-user-select:none;user-select:none;font-weight:600;white-space:nowrap}.i-table-wrapper .i-table-container--virtual-scroll .i-table-virtual-cell.i-table-header-cell .i-table-header-content{display:flex;align-items:center;gap:8px}.i-table-wrapper .i-table-container--virtual-scroll .i-table-virtual-cell.i-table-header-cell .i-table-header-content .i-table-header-text{flex:1}.i-table-wrapper .i-table-container--virtual-scroll .i-table-virtual-cell.i-table-selection-header,.i-table-wrapper .i-table-container--virtual-scroll .i-table-virtual-cell.i-table-selection-cell{width:50px;flex:0 0 50px;justify-content:center}.i-table-wrapper .i-table-container--virtual-scroll .i-table-virtual-cell.i-table-actions-header,.i-table-wrapper .i-table-container--virtual-scroll .i-table-virtual-cell.i-table-actions-cell{flex:0 0 auto;justify-content:flex-end}.i-table-wrapper .i-table-container--virtual-scroll .i-table-virtual-cell.i-table-actions-header .i-table-actions,.i-table-wrapper .i-table-container--virtual-scroll .i-table-virtual-cell.i-table-actions-cell .i-table-actions{display:flex;gap:4px;justify-content:flex-end}.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:.8em;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 tr th.i-table-actions-header{text-align:right}.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 .i-table-expanded-content{padding:0;margin:2px 0 24px;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-summary-row{cursor:pointer;-webkit-user-select:none;user-select:none;font-weight:600;transition:background-color .15s ease}.i-table-wrapper table tbody .i-table-group-summary-row td{padding:12px 16px}.i-table-wrapper table tbody .i-table-group-summary-row .i-table-group-header-content{display:flex;align-items:center;gap:8px}.i-table-wrapper table tbody .i-table-group-summary-row .i-table-group-header-content .i-table-group-label{flex:1;font-size:1.05em}.i-table-wrapper table tbody .i-table-group-summary-row .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-detail-row .i-table-group-detail-cell{padding:0;overflow:hidden}.i-table-wrapper table tbody .i-table-group-detail-row .i-table-group-detail-cell .i-table-wrapper{border-radius:0;border-top:none;overflow:hidden}.i-table-wrapper table tbody .i-table-group-count-header{width:60px;text-align:center;font-weight:400;opacity:.6;font-size:.85em}.i-table-wrapper table tbody .i-table-group-count-cell{width:60px;text-align:right;white-space:nowrap}.i-table-wrapper table tbody .i-table-group-count-cell .i-table-group-count{opacity:.7;font-size:.9em;font-weight:400}.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:.8em;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-detail-count-header{width:36px;padding:0}.i-table-wrapper .i-table-detail-count-cell{width:36px;padding:0 4px 0 0;text-align:right;white-space:nowrap;font-size:.78em;opacity:.5;font-weight:400}.i-table-wrapper .i-table-actions-header,.i-table-wrapper .i-table-actions-cell{width:auto;white-space:nowrap;text-align:right}.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}.i-severity-icon.success,.i-table-cell-success .i-severity-icon,.i-severity-text.success,.i-table-cell-success .i-severity-text{color:var(--color-success)}.i-severity-icon.info,.i-table-cell-info .i-severity-icon,.i-severity-text.info,.i-table-cell-info .i-severity-text{color:var(--color-info)}.i-severity-icon.warning,.i-table-cell-warning .i-severity-icon,.i-severity-text.warning,.i-table-cell-warning .i-severity-text{color:var(--color-warning)}.i-severity-icon.danger,.i-table-cell-danger .i-severity-icon,.i-severity-text.danger,.i-table-cell-danger .i-severity-text{color:var(--color-danger)}.i-severity-icon.secondary,.i-table-cell-secondary .i-severity-icon,.i-severity-text.secondary,.i-table-cell-secondary .i-severity-text{color:var(--color-text-secondary)}.i-table-list-cell{display:flex;flex-direction:column;gap:4px;align-items:flex-start}.i-table-list-cell i-chip{display:block}.i-action-hidden{visibility:hidden;pointer-events:none}@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}.i-table-wrapper table{min-width:max-content}.i-table-wrapper .i-table-container--virtual-scroll{min-width:600px}.i-table-wrapper .i-table-container--virtual-scroll .i-table-virtual-cell{min-width:80px}}\n"], dependencies: [{ kind: "component", type: i0.forwardRef(() => ITable), selector: "i-table", inputs: ["grid", "emptyMessage", "sortable", "sortField", "sortOrder", "filterable", "globalFilter", "filterDelay", "selectionMode", "selection", "dataKey", "striped", "hoverable", "bordered", "size", "loading", "scrollable", "height", "virtualScroll", "virtualScrollItemSize", "virtualScrollMinBufferPx", "virtualScrollMaxBufferPx", "resizableColumns", "downloadable", "downloadMode", "downloadFormat", "downloadFilename"], outputs: ["onSort", "onFilter", "selectionChange", "onSelectionChange", "onRowSelect", "onRowUnselect", "onRowExpand", "onRowCollapse", "onDownload"] }, { kind: "ngmodule", type: i0.forwardRef(() => CommonModule) }, { kind: "directive", type: i0.forwardRef(() => i1$1.NgClass), selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: i0.forwardRef(() => FormsModule) }, { kind: "directive", type: i0.forwardRef(() => i1.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: i0.forwardRef(() => i1.NgControlStatus), selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i0.forwardRef(() => i1.NgModel), selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i0.forwardRef(() => CdkVirtualScrollViewport), selector: "cdk-virtual-scroll-viewport", inputs: ["orientation", "appendOnly"], outputs: ["scrolledIndexChange"] }, { kind: "directive", type: i0.forwardRef(() => CdkVirtualForOf), selector: "[cdkVirtualFor][cdkVirtualForOf]", inputs: ["cdkVirtualForOf", "cdkVirtualForTrackBy", "cdkVirtualForTemplate", "cdkVirtualForTemplateCacheSize"] }, { kind: "directive", type: i0.forwardRef(() => CdkFixedSizeVirtualScroll), selector: "cdk-virtual-scroll-viewport[itemSize]", inputs: ["itemSize", "minBufferPx", "maxBufferPx"] }, { kind: "component", type: i0.forwardRef(() => IInputText), selector: "i-input-text", inputs: ["label", "type", "id", "fluid", "forceFloated", "hideText", "useFloatLabel", "placeholder", "externalInvalid", "externalErrorMessage", "backgroundStyle", "icon", "readonly", "disabled", "errorMessages"] }, { kind: "component", type: i0.forwardRef(() => IButton), selector: "i-button", inputs: ["severity", "size", "type", "disabled", "outlined", "raised", "text", "icon", "fluid", "loading"], outputs: ["clicked"] }, { kind: "component", type: i0.forwardRef(() => ICheckbox), selector: "i-checkbox", inputs: ["label", "id", "disabled", "readonly", "size", "indeterminate", "checked"], outputs: ["onChange"] }, { kind: "component", type: i0.forwardRef(() => IChip), selector: "i-chip", inputs: ["label", "icon", "image", "removable", "removeIcon", "styleClass", "disabled"], outputs: ["onRemove"] }, { kind: "component", type: i0.forwardRef(() => NoContentComponent), selector: "i-no-content", inputs: ["icon", "message"] }, { kind: "directive", type: i0.forwardRef(() => TooltipDirective), selector: "[iTooltip]", inputs: ["iTooltip", "tooltipPosition", "tooltipDelay"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: ITable, decorators: [{
             type: Component,
@@ -8529,7 +8529,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.3", ngImpor
                         NoContentComponent,
                         TooltipDirective,
                         forwardRef(() => ITable),
-                    ], template: "<div class=\"i-table-wrapper\" [ngClass]=\"getTableClasses()\">\n  <!-- Table Header: global filter + 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        }\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  <!-- ================================================================\n       PATH A \u2014 Detail-expandable table\n       Uses a standard scrollable container so that nested <i-table>\n       components can expand inline below their parent rows.\n  ================================================================ -->\n  @if (hasDetails()) {\n    <div\n      class=\"i-table-container i-table-container--scrollable\"\n      [style.max-height]=\"effectiveHeight()\"\n    >\n      <table class=\"i-table\">\n        <thead>\n          <!-- Column Filter Row -->\n          @if (filterable) {\n            <tr class=\"i-table-filter-row\">\n              @if (selectionMode === \"multiple\") {\n                <th class=\"i-table-selection-header\"></th>\n              }\n              <th class=\"i-table-expand-header\"></th>\n              @for (\n                column of gridColumns();\n                track trackByColumn($index, column)\n              ) {\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)=\"\n                        onColumnFilterInput(column.field, $event)\n                      \"\n                    />\n                  </th>\n                } @else {\n                  <th [style.width]=\"getColumnWidth(column)\"></th>\n                }\n              }\n              <th class=\"i-table-detail-count-header\"></th>\n              @if (gridActions().length > 0) {\n                <th class=\"i-table-actions-header\"></th>\n              }\n            </tr>\n          }\n\n          <!-- Column Headers -->\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            }\n            <th class=\"i-table-expand-header\"></th>\n            @for (\n              column of gridColumns();\n              track trackByColumn($index, column)\n            ) {\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\n                      [class]=\"getSortIcon(column)\"\n                      class=\"i-table-sort-icon\"\n                    ></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            }\n            <th class=\"i-table-detail-count-header\"></th>\n            @if (gridActions().length > 0) {\n              <th class=\"i-table-actions-header\">Actions</th>\n            }\n          </tr>\n        </thead>\n\n        <tbody>\n          @if (processedData().length === 0) {\n            <tr class=\"i-table-empty-row\">\n              <td [attr.colspan]=\"totalColspan()\">\n                <i-no-content />\n              </td>\n            </tr>\n          }\n          @for (row of processedData(); track trackByRow($index, row)) {\n            <!-- Parent row -->\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              }\n              <td class=\"i-table-expand-cell\">\n                <i-button\n                  severity=\"secondary\"\n                  [text]=\"true\"\n                  size=\"xtra-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 (\n                column of gridColumns();\n                track trackByColumn($index, column)\n              ) {\n                <td\n                  [style.text-align]=\"column.align || 'left'\"\n                  [style.width]=\"getColumnWidth(column)\"\n                  [class]=\"\n                    getCellSeverity(row, column)\n                      ? 'i-table-cell-' + getCellSeverity(row, column)\n                      : ''\n                  \"\n                >\n                  @if (isIconColumn(column)) {\n                    <i\n                      [class]=\"getCellIcon(row, column)\"\n                      [class.i-severity-icon]=\"getCellSeverity(row, column)\"\n                      [style.font-size]=\"column.iconSize || '1rem'\"\n                    ></i>\n                  } @else if (isListColumn(column)) {\n                    <div class=\"i-table-list-cell\">\n                      @for (item of getCellListItems(row, column); track item) {\n                        <i-chip [label]=\"item\"></i-chip>\n                      }\n                    </div>\n                  } @else {\n                    <span\n                      [class.i-severity-text]=\"getCellSeverity(row, column)\"\n                    >\n                      {{\n                        formatCellValue(getCellValue(row, column.field), column)\n                      }}\n                    </span>\n                  }\n                </td>\n              }\n              <td class=\"i-table-detail-count-cell\">\n                ({{ getDetailRowCount(row) }})\n              </td>\n              @if (gridActions().length > 0) {\n                <td class=\"i-table-actions-cell\">\n                  <div class=\"i-table-actions\">\n                    @for (action of gridActions(); 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                        [iTooltip]=\"getActionTooltip(action, row)\"\n                        [class.i-action-hidden]=\"!isActionVisible(action, row)\"\n                        (clicked)=\"triggerAction(action, row, $event)\"\n                      >\n                        @if (action.label) {\n                          {{ action.label }}\n                        }\n                      </i-button>\n                    }\n                  </div>\n                </td>\n              }\n            </tr>\n\n            <!-- Detail expansion row -->\n            @if (isRowExpanded(row)) {\n              <tr class=\"i-table-expanded-row\">\n                <td\n                  [attr.colspan]=\"totalColspan()\"\n                  class=\"i-table-expanded-cell\"\n                >\n                  <div class=\"i-table-expanded-content\">\n                    <i-table\n                      [grid]=\"getDetailGrid(row)\"\n                      [sortable]=\"sortable\"\n                      [filterable]=\"filterable\"\n                      [selectionMode]=\"selectionMode\"\n                      [selection]=\"selection\"\n                      [striped]=\"striped\"\n                      [hoverable]=\"hoverable\"\n                      [bordered]=\"bordered\"\n                      [size]=\"size\"\n                      [dataKey]=\"dataKey\"\n                      [resizableColumns]=\"resizableColumns\"\n                      (onSort)=\"onSort.emit($event)\"\n                      (onFilter)=\"onFilter.emit($event)\"\n                      (onSelectionChange)=\"onSelectionChange.emit($event)\"\n                      (selectionChange)=\"selectionChange.emit($event)\"\n                      (onRowSelect)=\"onRowSelect.emit($event)\"\n                      (onRowUnselect)=\"onRowUnselect.emit($event)\"\n                    ></i-table>\n                  </div>\n                </td>\n              </tr>\n            }\n          }\n        </tbody>\n      </table>\n    </div>\n  } @else if (virtualScroll) {\n    <!-- ================================================================\n         PATH B \u2014 CDK Virtual Scroll (div-based rows)\n         Use only for large row counts (\u2265 ~500 rows). Uses flex <div> rows\n         so CDK's wrapper <div> does not end up inside <tbody> (invalid HTML).\n    ================================================================ -->\n    <div\n      class=\"i-table-container i-table-container--scrollable i-table-container--virtual-scroll\"\n      [style.height]=\"effectiveHeight()\"\n    >\n      <!-- Sticky header \u2014 flex rows that mirror the virtual body rows -->\n      <div class=\"i-table-virtual-header\">\n        @if (filterable) {\n          <div class=\"i-table-virtual-row i-table-filter-row\">\n            @if (selectionMode === \"multiple\") {\n              <div class=\"i-table-virtual-cell i-table-selection-header\"></div>\n            }\n            @for (\n              column of gridColumns();\n              track trackByColumn($index, column)\n            ) {\n              @if (column.filterable !== false) {\n                <div\n                  class=\"i-table-virtual-cell\"\n                  [style.width]=\"\n                    getColumnWidth(column) !== 'auto'\n                      ? getColumnWidth(column)\n                      : null\n                  \"\n                  [style.flex]=\"getColumnWidth(column) === 'auto' ? '1' : null\"\n                >\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                </div>\n              } @else {\n                <div\n                  class=\"i-table-virtual-cell\"\n                  [style.width]=\"\n                    getColumnWidth(column) !== 'auto'\n                      ? getColumnWidth(column)\n                      : null\n                  \"\n                  [style.flex]=\"getColumnWidth(column) === 'auto' ? '1' : null\"\n                ></div>\n              }\n            }\n            @if (gridActions().length > 0) {\n              <div class=\"i-table-virtual-cell i-table-actions-header\"></div>\n            }\n          </div>\n        }\n        <div class=\"i-table-virtual-row i-table-header-row\">\n          @if (selectionMode === \"multiple\") {\n            <div class=\"i-table-virtual-cell i-table-selection-header\">\n              <i-checkbox\n                [checked]=\"areAllRowsSelected()\"\n                [indeterminate]=\"areSomeRowsSelected()\"\n                (onChange)=\"toggleAllSelection()\"\n              ></i-checkbox>\n            </div>\n          }\n          @for (column of gridColumns(); track trackByColumn($index, column)) {\n            <div\n              class=\"i-table-virtual-cell i-table-header-cell\"\n              [style.width]=\"\n                getColumnWidth(column) !== 'auto'\n                  ? getColumnWidth(column)\n                  : null\n              \"\n              [style.flex]=\"getColumnWidth(column) === 'auto' ? '1' : null\"\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\n                    [class]=\"getSortIcon(column)\"\n                    class=\"i-table-sort-icon\"\n                  ></i>\n                }\n              </div>\n            </div>\n          }\n          @if (gridActions().length > 0) {\n            <div class=\"i-table-virtual-cell i-table-actions-header\">\n              Actions\n            </div>\n          }\n        </div>\n      </div>\n\n      <!-- Virtual Scroll Viewport \u2014 *cdkVirtualFor on <div>, not <tr> -->\n      <cdk-virtual-scroll-viewport\n        [itemSize]=\"virtualScrollItemSize\"\n        [minBufferPx]=\"virtualScrollMinBufferPx\"\n        [maxBufferPx]=\"virtualScrollMaxBufferPx\"\n        class=\"i-table-virtual-viewport\"\n      >\n        @if (processedData().length === 0) {\n          <div class=\"i-table-virtual-row i-table-empty-row\">\n            <div\n              class=\"i-table-virtual-cell\"\n              style=\"flex: 1; text-align: center; padding: 40px 16px\"\n            >\n              <i-no-content />\n            </div>\n          </div>\n        }\n        <div\n          *cdkVirtualFor=\"\n            let row of processedData();\n            let rowIndex = index;\n            trackBy: trackByRow\n          \"\n          class=\"i-table-virtual-row\"\n          [style.height.px]=\"virtualScrollItemSize\"\n          [class.i-table-row-odd]=\"rowIndex % 2 !== 0\"\n          [class.i-table-row-selected]=\"isRowSelected(row)\"\n          (click)=\"toggleRowSelection(row)\"\n        >\n          @if (selectionMode === \"multiple\") {\n            <div class=\"i-table-virtual-cell i-table-selection-cell\">\n              <i-checkbox\n                [checked]=\"isRowSelected(row)\"\n                (onChange)=\"toggleRowSelection(row)\"\n                (click)=\"$event.stopPropagation()\"\n              ></i-checkbox>\n            </div>\n          }\n          @for (column of gridColumns(); track trackByColumn($index, column)) {\n            <div\n              class=\"i-table-virtual-cell\"\n              [style.width]=\"\n                getColumnWidth(column) !== 'auto'\n                  ? getColumnWidth(column)\n                  : null\n              \"\n              [style.flex]=\"getColumnWidth(column) === 'auto' ? '1' : null\"\n              [style.text-align]=\"column.align || 'left'\"\n              [ngClass]=\"\n                getCellSeverity(row, column)\n                  ? 'i-table-cell-' + getCellSeverity(row, column)\n                  : ''\n              \"\n            >\n              @if (isIconColumn(column)) {\n                <i\n                  [class]=\"getIconClasses(row, column)\"\n                  [style.font-size]=\"column.iconSize || '1rem'\"\n                ></i>\n              } @else if (isListColumn(column)) {\n                <div class=\"i-table-list-cell\">\n                  @for (item of getCellListItems(row, column); track item) {\n                    <i-chip [label]=\"item\"></i-chip>\n                  }\n                </div>\n              } @else {\n                <span [class.i-severity-text]=\"getCellSeverity(row, column)\">\n                  {{ formatCellValue(getCellValue(row, column.field), column) }}\n                </span>\n              }\n            </div>\n          }\n          @if (gridActions().length > 0) {\n            <div class=\"i-table-virtual-cell i-table-actions-cell\">\n              <div class=\"i-table-actions\">\n                @for (action of gridActions(); 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                    [iTooltip]=\"getActionTooltip(action, row)\"\n                    [class.i-action-hidden]=\"!isActionVisible(action, row)\"\n                    (clicked)=\"triggerAction(action, row, $event)\"\n                  >\n                    @if (action.label) {\n                      {{ action.label }}\n                    }\n                  </i-button>\n                }\n              </div>\n            </div>\n          }\n        </div>\n      </cdk-virtual-scroll-viewport>\n    </div>\n  } @else {\n    <!-- ================================================================\n         PATH C \u2014 Regular scrollable table\n         Default for small/medium datasets and nested detail tables.\n         Uses a plain overflow container with a @for loop \u2014 no CDK needed.\n    ================================================================ -->\n    <div\n      class=\"i-table-container i-table-container--scrollable\"\n      [style.max-height]=\"effectiveHeight()\"\n    >\n      <table class=\"i-table\">\n        <thead>\n          <!-- Column Filter Row -->\n          @if (filterable) {\n            <tr class=\"i-table-filter-row\">\n              @if (selectionMode === \"multiple\") {\n                <th class=\"i-table-selection-header\"></th>\n              }\n              @for (\n                column of gridColumns();\n                track trackByColumn($index, column)\n              ) {\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)=\"\n                        onColumnFilterInput(column.field, $event)\n                      \"\n                    />\n                  </th>\n                } @else {\n                  <th [style.width]=\"getColumnWidth(column)\"></th>\n                }\n              }\n              @if (gridActions().length > 0) {\n                <th class=\"i-table-actions-header\"></th>\n              }\n            </tr>\n          }\n\n          <!-- Column Headers -->\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            }\n            @for (\n              column of gridColumns();\n              track trackByColumn($index, column)\n            ) {\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\n                      [class]=\"getSortIcon(column)\"\n                      class=\"i-table-sort-icon\"\n                    ></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            }\n            @if (gridActions().length > 0) {\n              <th class=\"i-table-actions-header\">Actions</th>\n            }\n          </tr>\n        </thead>\n\n        <tbody>\n          @if (processedData().length === 0) {\n            <tr class=\"i-table-empty-row\">\n              <td [attr.colspan]=\"totalColspan()\">\n                <i-no-content />\n              </td>\n            </tr>\n          }\n          @for (row of processedData(); track trackByRow($index, row)) {\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              }\n              @for (\n                column of gridColumns();\n                track trackByColumn($index, column)\n              ) {\n                <td\n                  [style.text-align]=\"column.align || 'left'\"\n                  [style.width]=\"getColumnWidth(column)\"\n                  [class]=\"\n                    getCellSeverity(row, column)\n                      ? 'i-table-cell-' + getCellSeverity(row, column)\n                      : ''\n                  \"\n                >\n                  @if (isIconColumn(column)) {\n                    <i\n                      [class]=\"getIconClasses(row, column)\"\n                      [style.font-size]=\"column.iconSize || '1rem'\"\n                    ></i>\n                  } @else if (isListColumn(column)) {\n                    <div class=\"i-table-list-cell\">\n                      @for (item of getCellListItems(row, column); track item) {\n                        <i-chip [label]=\"item\"></i-chip>\n                      }\n                    </div>\n                  } @else {\n                    <span\n                      [class.i-severity-text]=\"getCellSeverity(row, column)\"\n                    >\n                      {{\n                        formatCellValue(getCellValue(row, column.field), column)\n                      }}\n                    </span>\n                  }\n                </td>\n              }\n              @if (gridActions().length > 0) {\n                <td class=\"i-table-actions-cell\">\n                  <div class=\"i-table-actions\">\n                    @for (action of gridActions(); 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                        [iTooltip]=\"getActionTooltip(action, row)\"\n                        [class.i-action-hidden]=\"!isActionVisible(action, row)\"\n                        (clicked)=\"triggerAction(action, row, $event)\"\n                      >\n                        @if (action.label) {\n                          {{ action.label }}\n                        }\n                      </i-button>\n                    }\n                  </div>\n                </td>\n              }\n            </tr>\n          }\n        </tbody>\n      </table>\n    </div>\n  }\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(--color-component-background)}.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(--color-component-background)}.i-table-wrapper table thead .i-table-filter-row .i-table-column-filter{border:1px solid var(--surface-border);background:var(--surface-ground);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(--color-component-background)}.i-table-wrapper table tbody tr.i-table-row-selected{background:var(--surface-hover);color:var(--color-primary)}.i-table-wrapper table tbody .i-table-expanded-row{background:var(--color-component-background)}.i-table-wrapper table tbody .i-table-expanded-row .i-table-expanded-content{background:transparent}.i-table-wrapper table tbody .i-table-empty-row td{background:var(--color-component-background)}.i-table-wrapper table tbody .i-table-group-header{background:var(--color-component-background);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(--color-component-background);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,.i-table-wrapper table tbody .i-table-group-row.i-table-row-odd{background:var(--color-component-background)}.i-table-wrapper table tbody .i-table-group-row.i-table-row-selected{background:var(--surface-hover);color:var(--color-primary)}.i-table-wrapper table tbody .i-table-group-summary-row{background:var(--surface-section);border-bottom:2px solid var(--surface-border)}.i-table-wrapper table tbody .i-table-group-summary-row td{color:var(--color-text-primary);font-weight:600}.i-table-wrapper table tbody .i-table-group-summary-row:hover{background:var(--surface-hover)}.i-table-wrapper table tbody .i-table-group-summary-row .i-table-group-count{color:var(--color-text-secondary)}.i-table-wrapper table tbody .i-table-group-detail-row,.i-table-wrapper table tbody .i-table-group-detail-row .i-table-group-detail-cell .i-table-wrapper{background:var(--surface-ground)}.i-table-wrapper table tbody .i-table-group-detail-row .i-table-group-detail-cell .i-table-wrapper table thead tr{background:var(--surface-section)}.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):not(.i-table-group-detail-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):not(.i-table-group-header):not(.i-table-group-columns-header):not(.i-table-group-detail-row).i-table-row-selected:hover{background:var(--surface-hover)}.i-table-wrapper .i-table-column-resizer{background:var(--surface-border)}.i-table-wrapper .i-table-column-resizer:hover{background:var(--color-primary)}.i-table-wrapper .i-table-container--virtual-scroll .i-table-virtual-header{background:var(--color-component-background);border-bottom:1px solid var(--surface-border)}.i-table-wrapper .i-table-container--virtual-scroll .i-table-virtual-header .i-table-virtual-cell{color:var(--color-text-primary)}.i-table-wrapper .i-table-container--virtual-scroll .i-table-virtual-header .i-table-header-cell .i-table-sort-icon{color:var(--color-text-secondary)}.i-table-wrapper .i-table-container--virtual-scroll .i-table-virtual-header .i-table-header-cell.i-table-sortable-column:hover{background:var(--surface-hover)}.i-table-wrapper .i-table-container--virtual-scroll .i-table-virtual-header .i-table-header-cell.i-table-sorted{background:var(--surface-hover);color:var(--color-primary)}.i-table-wrapper .i-table-container--virtual-scroll .i-table-virtual-header .i-table-header-cell.i-table-sorted .i-table-sort-icon{color:var(--color-primary)}.i-table-wrapper .i-table-container--virtual-scroll .i-table-virtual-header .i-table-filter-row .i-table-column-filter{border:1px solid var(--surface-border);background:var(--surface-ground);color:var(--color-text-primary)}.i-table-wrapper .i-table-container--virtual-scroll .i-table-virtual-header .i-table-filter-row .i-table-column-filter:focus{border-color:var(--color-primary);outline:none}.i-table-wrapper .i-table-container--virtual-scroll .i-table-virtual-header .i-table-filter-row .i-table-column-filter::placeholder{color:var(--color-text-tertiary)}.i-table-wrapper .i-table-container--virtual-scroll .i-table-virtual-viewport .i-table-virtual-row{background:var(--color-component-background);border-bottom:1px solid var(--surface-border);color:var(--color-text-primary);transition:background-color .15s ease}.i-table-wrapper .i-table-container--virtual-scroll .i-table-virtual-viewport .i-table-virtual-row.i-table-row-odd{background:var(--color-component-background)}.i-table-wrapper .i-table-container--virtual-scroll .i-table-virtual-viewport .i-table-virtual-row.i-table-row-selected{background:var(--surface-hover);color:var(--color-primary)}.i-table-wrapper.i-table--nested{background:transparent}.i-table-wrapper.i-table--nested table thead tr{background:var(--surface-section)}.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}.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{scrollbar-width:thin;scrollbar-color:rgba(0,0,0,.2) transparent;scroll-behavior:smooth}.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{scrollbar-color:var(--color-text-secondary) transparent}.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{scrollbar-width:thin;scrollbar-color:var(--color-text-secondary) rgba(0,0,0,.05)}.i-table-wrapper .i-table-container--scrollable{overflow-y:auto;scrollbar-gutter:stable}.i-table-wrapper .i-table-container--scrollable>table>thead{position:sticky;top:0;z-index:2}.i-table-wrapper .i-table-container--virtual-scroll{overflow:hidden;display:flex;flex-direction:column}.i-table-wrapper .i-table-container--virtual-scroll .i-table-virtual-header{flex-shrink:0;overflow:hidden}.i-table-wrapper .i-table-container--virtual-scroll .i-table-virtual-header .i-table-sort-icon{font-size:.8em;opacity:.6;transition:opacity .15s ease,color .15s ease}.i-table-wrapper .i-table-container--virtual-scroll .i-table-virtual-header .i-table-header-cell.i-table-sortable-column{cursor:pointer}.i-table-wrapper .i-table-container--virtual-scroll .i-table-virtual-header .i-table-header-cell.i-table-sortable-column .i-table-sort-icon{opacity:.4}.i-table-wrapper .i-table-container--virtual-scroll .i-table-virtual-header .i-table-header-cell.i-table-sortable-column:hover .i-table-sort-icon,.i-table-wrapper .i-table-container--virtual-scroll .i-table-virtual-header .i-table-header-cell.i-table-sortable-column.i-table-sorted .i-table-sort-icon{opacity:1}.i-table-wrapper .i-table-container--virtual-scroll .i-table-virtual-header .i-table-filter-row .i-table-virtual-cell{padding:8px 16px}.i-table-wrapper .i-table-container--virtual-scroll .i-table-virtual-header .i-table-filter-row .i-table-virtual-cell .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 .i-table-container--virtual-scroll .i-table-virtual-viewport{flex:1;min-height:0;width:100%;overflow-y:auto}.i-table-wrapper .i-table-container--virtual-scroll .i-table-virtual-viewport::-webkit-scrollbar-track{background:transparent;border-radius:3px}.i-table-wrapper .i-table-container--virtual-scroll .i-table-virtual-viewport::-webkit-scrollbar-thumb{background:#0003;border-radius:3px;transition:background .2s ease}.i-table-wrapper .i-table-container--virtual-scroll .i-table-virtual-viewport::-webkit-scrollbar-thumb:hover{background:#00000059}.i-table-wrapper .i-table-container--virtual-scroll .i-table-virtual-viewport::-webkit-scrollbar-thumb:active{background:#00000080}.i-table-wrapper .i-table-container--virtual-scroll .i-table-virtual-viewport::-webkit-scrollbar-corner{background:transparent}.i-table-wrapper .i-table-container--virtual-scroll .i-table-virtual-viewport{scrollbar-width:thin;scrollbar-color:rgba(0,0,0,.2) transparent;scroll-behavior:smooth}.i-table-wrapper .i-table-container--virtual-scroll .i-table-virtual-viewport::-webkit-scrollbar-thumb{background:var(--color-text-secondary);opacity:.4}.i-table-wrapper .i-table-container--virtual-scroll .i-table-virtual-viewport::-webkit-scrollbar-thumb:hover{background:var(--color-text-primary);opacity:.6}.i-table-wrapper .i-table-container--virtual-scroll .i-table-virtual-viewport::-webkit-scrollbar-thumb:active{background:var(--color-primary);opacity:.7}.i-table-wrapper .i-table-container--virtual-scroll .i-table-virtual-viewport{scrollbar-color:var(--color-text-secondary) transparent}.i-table-wrapper .i-table-container--virtual-scroll .i-table-virtual-viewport::-webkit-scrollbar{width:6px;height:6px}.i-table-wrapper .i-table-container--virtual-scroll .i-table-virtual-viewport::-webkit-scrollbar-track{background:#0000000d;border-radius:3px;margin:2px 0}.i-table-wrapper .i-table-container--virtual-scroll .i-table-virtual-viewport::-webkit-scrollbar-thumb{border-radius:3px;min-height:20px;background:var(--color-text-secondary);opacity:.6}.i-table-wrapper .i-table-container--virtual-scroll .i-table-virtual-viewport::-webkit-scrollbar-thumb:hover{background:var(--color-text-primary);opacity:.8}.i-table-wrapper .i-table-container--virtual-scroll .i-table-virtual-viewport::-webkit-scrollbar-thumb:active{background:var(--color-primary);opacity:.9}.i-table-wrapper .i-table-container--virtual-scroll .i-table-virtual-viewport{scrollbar-width:thin;scrollbar-color:var(--color-text-secondary) rgba(0,0,0,.05)}.i-table-wrapper .i-table-container--virtual-scroll .i-table-virtual-viewport .cdk-virtual-scroll-content-wrapper{width:100%}.i-table-wrapper .i-table-container--virtual-scroll .i-table-virtual-row{display:flex;align-items:center;width:100%;box-sizing:border-box}.i-table-wrapper .i-table-container--virtual-scroll .i-table-virtual-cell{padding:12px 16px;box-sizing:border-box;flex-shrink:0;overflow:hidden;display:flex;align-items:center}.i-table-wrapper .i-table-container--virtual-scroll .i-table-virtual-cell.i-table-header-cell{-webkit-user-select:none;user-select:none;font-weight:600;white-space:nowrap}.i-table-wrapper .i-table-container--virtual-scroll .i-table-virtual-cell.i-table-header-cell .i-table-header-content{display:flex;align-items:center;gap:8px}.i-table-wrapper .i-table-container--virtual-scroll .i-table-virtual-cell.i-table-header-cell .i-table-header-content .i-table-header-text{flex:1}.i-table-wrapper .i-table-container--virtual-scroll .i-table-virtual-cell.i-table-selection-header,.i-table-wrapper .i-table-container--virtual-scroll .i-table-virtual-cell.i-table-selection-cell{width:50px;flex:0 0 50px;justify-content:center}.i-table-wrapper .i-table-container--virtual-scroll .i-table-virtual-cell.i-table-actions-header,.i-table-wrapper .i-table-container--virtual-scroll .i-table-virtual-cell.i-table-actions-cell{flex:0 0 auto;justify-content:flex-end}.i-table-wrapper .i-table-container--virtual-scroll .i-table-virtual-cell.i-table-actions-header .i-table-actions,.i-table-wrapper .i-table-container--virtual-scroll .i-table-virtual-cell.i-table-actions-cell .i-table-actions{display:flex;gap:4px;justify-content:flex-end}.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:.8em;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 tr th.i-table-actions-header{text-align:right}.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 .i-table-expanded-content{padding:0;margin:2px 0 24px;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-summary-row{cursor:pointer;-webkit-user-select:none;user-select:none;font-weight:600;transition:background-color .15s ease}.i-table-wrapper table tbody .i-table-group-summary-row td{padding:12px 16px}.i-table-wrapper table tbody .i-table-group-summary-row .i-table-group-header-content{display:flex;align-items:center;gap:8px}.i-table-wrapper table tbody .i-table-group-summary-row .i-table-group-header-content .i-table-group-label{flex:1;font-size:1.05em}.i-table-wrapper table tbody .i-table-group-summary-row .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-detail-row .i-table-group-detail-cell{padding:0;overflow:hidden}.i-table-wrapper table tbody .i-table-group-detail-row .i-table-group-detail-cell .i-table-wrapper{border-radius:0;border-top:none;overflow:hidden}.i-table-wrapper table tbody .i-table-group-count-header{width:60px;text-align:center;font-weight:400;opacity:.6;font-size:.85em}.i-table-wrapper table tbody .i-table-group-count-cell{width:60px;text-align:right;white-space:nowrap}.i-table-wrapper table tbody .i-table-group-count-cell .i-table-group-count{opacity:.7;font-size:.9em;font-weight:400}.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:.8em;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-detail-count-header{width:36px;padding:0}.i-table-wrapper .i-table-detail-count-cell{width:36px;padding:0 4px 0 0;text-align:right;white-space:nowrap;font-size:.78em;opacity:.5;font-weight:400}.i-table-wrapper .i-table-actions-header,.i-table-wrapper .i-table-actions-cell{width:auto;white-space:nowrap;text-align:right}.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}.i-severity-icon.success,.i-table-cell-success .i-severity-icon,.i-severity-text.success,.i-table-cell-success .i-severity-text{color:var(--color-success)}.i-severity-icon.info,.i-table-cell-info .i-severity-icon,.i-severity-text.info,.i-table-cell-info .i-severity-text{color:var(--color-info)}.i-severity-icon.warning,.i-table-cell-warning .i-severity-icon,.i-severity-text.warning,.i-table-cell-warning .i-severity-text{color:var(--color-warning)}.i-severity-icon.danger,.i-table-cell-danger .i-severity-icon,.i-severity-text.danger,.i-table-cell-danger .i-severity-text{color:var(--color-danger)}.i-severity-icon.secondary,.i-table-cell-secondary .i-severity-icon,.i-severity-text.secondary,.i-table-cell-secondary .i-severity-text{color:var(--color-text-secondary)}.i-table-list-cell{display:flex;flex-direction:column;gap:4px;align-items:flex-start}.i-table-list-cell i-chip{display:block}.i-action-hidden{visibility:hidden;pointer-events:none}@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"] }]
+                    ], template: "<div class=\"i-table-wrapper\" [ngClass]=\"getTableClasses()\">\n  <!-- Table Header: global filter + 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        }\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  <!-- ================================================================\n       PATH A \u2014 Detail-expandable table\n       Uses a standard scrollable container so that nested <i-table>\n       components can expand inline below their parent rows.\n  ================================================================ -->\n  @if (hasDetails()) {\n    <div\n      class=\"i-table-container i-table-container--scrollable\"\n      [style.max-height]=\"effectiveHeight()\"\n    >\n      <table class=\"i-table\">\n        <thead>\n          <!-- Column Filter Row -->\n          @if (filterable) {\n            <tr class=\"i-table-filter-row\">\n              @if (selectionMode === \"multiple\") {\n                <th class=\"i-table-selection-header\"></th>\n              }\n              <th class=\"i-table-expand-header\"></th>\n              @for (\n                column of gridColumns();\n                track trackByColumn($index, column)\n              ) {\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)=\"\n                        onColumnFilterInput(column.field, $event)\n                      \"\n                    />\n                  </th>\n                } @else {\n                  <th [style.width]=\"getColumnWidth(column)\"></th>\n                }\n              }\n              <th class=\"i-table-detail-count-header\"></th>\n              @if (gridActions().length > 0) {\n                <th class=\"i-table-actions-header\"></th>\n              }\n            </tr>\n          }\n\n          <!-- Column Headers -->\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            }\n            <th class=\"i-table-expand-header\"></th>\n            @for (\n              column of gridColumns();\n              track trackByColumn($index, column)\n            ) {\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\n                      [class]=\"getSortIcon(column)\"\n                      class=\"i-table-sort-icon\"\n                    ></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            }\n            <th class=\"i-table-detail-count-header\"></th>\n            @if (gridActions().length > 0) {\n              <th class=\"i-table-actions-header\">Actions</th>\n            }\n          </tr>\n        </thead>\n\n        <tbody>\n          @if (processedData().length === 0) {\n            <tr class=\"i-table-empty-row\">\n              <td [attr.colspan]=\"totalColspan()\">\n                <i-no-content />\n              </td>\n            </tr>\n          }\n          @for (row of processedData(); track trackByRow($index, row)) {\n            <!-- Parent row -->\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              }\n              <td class=\"i-table-expand-cell\">\n                <i-button\n                  severity=\"secondary\"\n                  [text]=\"true\"\n                  size=\"xtra-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 (\n                column of gridColumns();\n                track trackByColumn($index, column)\n              ) {\n                <td\n                  [style.text-align]=\"column.align || 'left'\"\n                  [style.width]=\"getColumnWidth(column)\"\n                  [class]=\"\n                    getCellSeverity(row, column)\n                      ? 'i-table-cell-' + getCellSeverity(row, column)\n                      : ''\n                  \"\n                >\n                  @if (isIconColumn(column)) {\n                    <i\n                      [class]=\"getCellIcon(row, column)\"\n                      [class.i-severity-icon]=\"getCellSeverity(row, column)\"\n                      [style.font-size]=\"column.iconSize || '1rem'\"\n                    ></i>\n                  } @else if (isListColumn(column)) {\n                    <div class=\"i-table-list-cell\">\n                      @for (item of getCellListItems(row, column); track item) {\n                        <i-chip [label]=\"item\"></i-chip>\n                      }\n                    </div>\n                  } @else {\n                    <span\n                      [class.i-severity-text]=\"getCellSeverity(row, column)\"\n                    >\n                      {{\n                        formatCellValue(getCellValue(row, column.field), column)\n                      }}\n                    </span>\n                  }\n                </td>\n              }\n              <td class=\"i-table-detail-count-cell\">\n                ({{ getDetailRowCount(row) }})\n              </td>\n              @if (gridActions().length > 0) {\n                <td class=\"i-table-actions-cell\">\n                  <div class=\"i-table-actions\">\n                    @for (action of gridActions(); 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                        [iTooltip]=\"getActionTooltip(action, row)\"\n                        [class.i-action-hidden]=\"!isActionVisible(action, row)\"\n                        (clicked)=\"triggerAction(action, row, $event)\"\n                      >\n                        @if (action.label) {\n                          {{ action.label }}\n                        }\n                      </i-button>\n                    }\n                  </div>\n                </td>\n              }\n            </tr>\n\n            <!-- Detail expansion row -->\n            @if (isRowExpanded(row)) {\n              <tr class=\"i-table-expanded-row\">\n                <td\n                  [attr.colspan]=\"totalColspan()\"\n                  class=\"i-table-expanded-cell\"\n                >\n                  <div class=\"i-table-expanded-content\">\n                    <i-table\n                      [grid]=\"getDetailGrid(row)\"\n                      [sortable]=\"sortable\"\n                      [filterable]=\"filterable\"\n                      [selectionMode]=\"selectionMode\"\n                      [selection]=\"selection\"\n                      [striped]=\"striped\"\n                      [hoverable]=\"hoverable\"\n                      [bordered]=\"bordered\"\n                      [size]=\"size\"\n                      [dataKey]=\"dataKey\"\n                      [resizableColumns]=\"resizableColumns\"\n                      (onSort)=\"onSort.emit($event)\"\n                      (onFilter)=\"onFilter.emit($event)\"\n                      (onSelectionChange)=\"onSelectionChange.emit($event)\"\n                      (selectionChange)=\"selectionChange.emit($event)\"\n                      (onRowSelect)=\"onRowSelect.emit($event)\"\n                      (onRowUnselect)=\"onRowUnselect.emit($event)\"\n                    ></i-table>\n                  </div>\n                </td>\n              </tr>\n            }\n          }\n        </tbody>\n      </table>\n    </div>\n  } @else if (virtualScroll) {\n    <!-- ================================================================\n         PATH B \u2014 CDK Virtual Scroll (div-based rows)\n         Use only for large row counts (\u2265 ~500 rows). Uses flex <div> rows\n         so CDK's wrapper <div> does not end up inside <tbody> (invalid HTML).\n    ================================================================ -->\n    <div\n      class=\"i-table-container i-table-container--scrollable i-table-container--virtual-scroll\"\n      [style.height]=\"effectiveHeight()\"\n    >\n      <!-- Sticky header \u2014 flex rows that mirror the virtual body rows -->\n      <div class=\"i-table-virtual-header\">\n        @if (filterable) {\n          <div class=\"i-table-virtual-row i-table-filter-row\">\n            @if (selectionMode === \"multiple\") {\n              <div class=\"i-table-virtual-cell i-table-selection-header\"></div>\n            }\n            @for (\n              column of gridColumns();\n              track trackByColumn($index, column)\n            ) {\n              @if (column.filterable !== false) {\n                <div\n                  class=\"i-table-virtual-cell\"\n                  [style.width]=\"\n                    getColumnWidth(column) !== 'auto'\n                      ? getColumnWidth(column)\n                      : null\n                  \"\n                  [style.flex]=\"getColumnWidth(column) === 'auto' ? '1' : null\"\n                >\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                </div>\n              } @else {\n                <div\n                  class=\"i-table-virtual-cell\"\n                  [style.width]=\"\n                    getColumnWidth(column) !== 'auto'\n                      ? getColumnWidth(column)\n                      : null\n                  \"\n                  [style.flex]=\"getColumnWidth(column) === 'auto' ? '1' : null\"\n                ></div>\n              }\n            }\n            @if (gridActions().length > 0) {\n              <div class=\"i-table-virtual-cell i-table-actions-header\"></div>\n            }\n          </div>\n        }\n        <div class=\"i-table-virtual-row i-table-header-row\">\n          @if (selectionMode === \"multiple\") {\n            <div class=\"i-table-virtual-cell i-table-selection-header\">\n              <i-checkbox\n                [checked]=\"areAllRowsSelected()\"\n                [indeterminate]=\"areSomeRowsSelected()\"\n                (onChange)=\"toggleAllSelection()\"\n              ></i-checkbox>\n            </div>\n          }\n          @for (column of gridColumns(); track trackByColumn($index, column)) {\n            <div\n              class=\"i-table-virtual-cell i-table-header-cell\"\n              [style.width]=\"\n                getColumnWidth(column) !== 'auto'\n                  ? getColumnWidth(column)\n                  : null\n              \"\n              [style.flex]=\"getColumnWidth(column) === 'auto' ? '1' : null\"\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\n                    [class]=\"getSortIcon(column)\"\n                    class=\"i-table-sort-icon\"\n                  ></i>\n                }\n              </div>\n            </div>\n          }\n          @if (gridActions().length > 0) {\n            <div class=\"i-table-virtual-cell i-table-actions-header\">\n              Actions\n            </div>\n          }\n        </div>\n      </div>\n\n      <!-- Virtual Scroll Viewport \u2014 *cdkVirtualFor on <div>, not <tr> -->\n      <cdk-virtual-scroll-viewport\n        [itemSize]=\"virtualScrollItemSize\"\n        [minBufferPx]=\"virtualScrollMinBufferPx\"\n        [maxBufferPx]=\"virtualScrollMaxBufferPx\"\n        class=\"i-table-virtual-viewport\"\n      >\n        @if (processedData().length === 0) {\n          <div class=\"i-table-virtual-row i-table-empty-row\">\n            <div\n              class=\"i-table-virtual-cell\"\n              style=\"flex: 1; text-align: center; padding: 40px 16px\"\n            >\n              <i-no-content />\n            </div>\n          </div>\n        }\n        <div\n          *cdkVirtualFor=\"\n            let row of processedData();\n            let rowIndex = index;\n            trackBy: trackByRow\n          \"\n          class=\"i-table-virtual-row\"\n          [style.height.px]=\"virtualScrollItemSize\"\n          [class.i-table-row-odd]=\"rowIndex % 2 !== 0\"\n          [class.i-table-row-selected]=\"isRowSelected(row)\"\n          (click)=\"toggleRowSelection(row)\"\n        >\n          @if (selectionMode === \"multiple\") {\n            <div class=\"i-table-virtual-cell i-table-selection-cell\">\n              <i-checkbox\n                [checked]=\"isRowSelected(row)\"\n                (onChange)=\"toggleRowSelection(row)\"\n                (click)=\"$event.stopPropagation()\"\n              ></i-checkbox>\n            </div>\n          }\n          @for (column of gridColumns(); track trackByColumn($index, column)) {\n            <div\n              class=\"i-table-virtual-cell\"\n              [style.width]=\"\n                getColumnWidth(column) !== 'auto'\n                  ? getColumnWidth(column)\n                  : null\n              \"\n              [style.flex]=\"getColumnWidth(column) === 'auto' ? '1' : null\"\n              [style.text-align]=\"column.align || 'left'\"\n              [ngClass]=\"\n                getCellSeverity(row, column)\n                  ? 'i-table-cell-' + getCellSeverity(row, column)\n                  : ''\n              \"\n            >\n              @if (isIconColumn(column)) {\n                <i\n                  [class]=\"getIconClasses(row, column)\"\n                  [style.font-size]=\"column.iconSize || '1rem'\"\n                ></i>\n              } @else if (isListColumn(column)) {\n                <div class=\"i-table-list-cell\">\n                  @for (item of getCellListItems(row, column); track item) {\n                    <i-chip [label]=\"item\"></i-chip>\n                  }\n                </div>\n              } @else {\n                <span [class.i-severity-text]=\"getCellSeverity(row, column)\">\n                  {{ formatCellValue(getCellValue(row, column.field), column) }}\n                </span>\n              }\n            </div>\n          }\n          @if (gridActions().length > 0) {\n            <div class=\"i-table-virtual-cell i-table-actions-cell\">\n              <div class=\"i-table-actions\">\n                @for (action of gridActions(); 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                    [iTooltip]=\"getActionTooltip(action, row)\"\n                    [class.i-action-hidden]=\"!isActionVisible(action, row)\"\n                    (clicked)=\"triggerAction(action, row, $event)\"\n                  >\n                    @if (action.label) {\n                      {{ action.label }}\n                    }\n                  </i-button>\n                }\n              </div>\n            </div>\n          }\n        </div>\n      </cdk-virtual-scroll-viewport>\n    </div>\n  } @else {\n    <!-- ================================================================\n         PATH C \u2014 Regular scrollable table\n         Default for small/medium datasets and nested detail tables.\n         Uses a plain overflow container with a @for loop \u2014 no CDK needed.\n    ================================================================ -->\n    <div\n      class=\"i-table-container i-table-container--scrollable\"\n      [style.max-height]=\"effectiveHeight()\"\n    >\n      <table class=\"i-table\">\n        <thead>\n          <!-- Column Filter Row -->\n          @if (filterable) {\n            <tr class=\"i-table-filter-row\">\n              @if (selectionMode === \"multiple\") {\n                <th class=\"i-table-selection-header\"></th>\n              }\n              @for (\n                column of gridColumns();\n                track trackByColumn($index, column)\n              ) {\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)=\"\n                        onColumnFilterInput(column.field, $event)\n                      \"\n                    />\n                  </th>\n                } @else {\n                  <th [style.width]=\"getColumnWidth(column)\"></th>\n                }\n              }\n              @if (gridActions().length > 0) {\n                <th class=\"i-table-actions-header\"></th>\n              }\n            </tr>\n          }\n\n          <!-- Column Headers -->\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            }\n            @for (\n              column of gridColumns();\n              track trackByColumn($index, column)\n            ) {\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\n                      [class]=\"getSortIcon(column)\"\n                      class=\"i-table-sort-icon\"\n                    ></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            }\n            @if (gridActions().length > 0) {\n              <th class=\"i-table-actions-header\">Actions</th>\n            }\n          </tr>\n        </thead>\n\n        <tbody>\n          @if (processedData().length === 0) {\n            <tr class=\"i-table-empty-row\">\n              <td [attr.colspan]=\"totalColspan()\">\n                <i-no-content />\n              </td>\n            </tr>\n          }\n          @for (row of processedData(); track trackByRow($index, row)) {\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              }\n              @for (\n                column of gridColumns();\n                track trackByColumn($index, column)\n              ) {\n                <td\n                  [style.text-align]=\"column.align || 'left'\"\n                  [style.width]=\"getColumnWidth(column)\"\n                  [class]=\"\n                    getCellSeverity(row, column)\n                      ? 'i-table-cell-' + getCellSeverity(row, column)\n                      : ''\n                  \"\n                >\n                  @if (isIconColumn(column)) {\n                    <i\n                      [class]=\"getIconClasses(row, column)\"\n                      [style.font-size]=\"column.iconSize || '1rem'\"\n                    ></i>\n                  } @else if (isListColumn(column)) {\n                    <div class=\"i-table-list-cell\">\n                      @for (item of getCellListItems(row, column); track item) {\n                        <i-chip [label]=\"item\"></i-chip>\n                      }\n                    </div>\n                  } @else {\n                    <span\n                      [class.i-severity-text]=\"getCellSeverity(row, column)\"\n                    >\n                      {{\n                        formatCellValue(getCellValue(row, column.field), column)\n                      }}\n                    </span>\n                  }\n                </td>\n              }\n              @if (gridActions().length > 0) {\n                <td class=\"i-table-actions-cell\">\n                  <div class=\"i-table-actions\">\n                    @for (action of gridActions(); 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                        [iTooltip]=\"getActionTooltip(action, row)\"\n                        [class.i-action-hidden]=\"!isActionVisible(action, row)\"\n                        (clicked)=\"triggerAction(action, row, $event)\"\n                      >\n                        @if (action.label) {\n                          {{ action.label }}\n                        }\n                      </i-button>\n                    }\n                  </div>\n                </td>\n              }\n            </tr>\n          }\n        </tbody>\n      </table>\n    </div>\n  }\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(--color-component-background)}.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(--color-component-background)}.i-table-wrapper table thead .i-table-filter-row .i-table-column-filter{border:1px solid var(--surface-border);background:var(--surface-ground);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(--color-component-background)}.i-table-wrapper table tbody tr.i-table-row-selected{background:var(--surface-hover);color:var(--color-primary)}.i-table-wrapper table tbody .i-table-expanded-row{background:var(--color-component-background)}.i-table-wrapper table tbody .i-table-expanded-row .i-table-expanded-content{background:transparent}.i-table-wrapper table tbody .i-table-empty-row td{background:var(--color-component-background)}.i-table-wrapper table tbody .i-table-group-header{background:var(--color-component-background);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(--color-component-background);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,.i-table-wrapper table tbody .i-table-group-row.i-table-row-odd{background:var(--color-component-background)}.i-table-wrapper table tbody .i-table-group-row.i-table-row-selected{background:var(--surface-hover);color:var(--color-primary)}.i-table-wrapper table tbody .i-table-group-summary-row{background:var(--surface-section);border-bottom:2px solid var(--surface-border)}.i-table-wrapper table tbody .i-table-group-summary-row td{color:var(--color-text-primary);font-weight:600}.i-table-wrapper table tbody .i-table-group-summary-row:hover{background:var(--surface-hover)}.i-table-wrapper table tbody .i-table-group-summary-row .i-table-group-count{color:var(--color-text-secondary)}.i-table-wrapper table tbody .i-table-group-detail-row,.i-table-wrapper table tbody .i-table-group-detail-row .i-table-group-detail-cell .i-table-wrapper{background:var(--surface-ground)}.i-table-wrapper table tbody .i-table-group-detail-row .i-table-group-detail-cell .i-table-wrapper table thead tr{background:var(--surface-section)}.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):not(.i-table-group-detail-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):not(.i-table-group-header):not(.i-table-group-columns-header):not(.i-table-group-detail-row).i-table-row-selected:hover{background:var(--surface-hover)}.i-table-wrapper .i-table-column-resizer{background:var(--surface-border)}.i-table-wrapper .i-table-column-resizer:hover{background:var(--color-primary)}.i-table-wrapper .i-table-container--virtual-scroll .i-table-virtual-header{background:var(--color-component-background);border-bottom:1px solid var(--surface-border)}.i-table-wrapper .i-table-container--virtual-scroll .i-table-virtual-header .i-table-virtual-cell{color:var(--color-text-primary)}.i-table-wrapper .i-table-container--virtual-scroll .i-table-virtual-header .i-table-header-cell .i-table-sort-icon{color:var(--color-text-secondary)}.i-table-wrapper .i-table-container--virtual-scroll .i-table-virtual-header .i-table-header-cell.i-table-sortable-column:hover{background:var(--surface-hover)}.i-table-wrapper .i-table-container--virtual-scroll .i-table-virtual-header .i-table-header-cell.i-table-sorted{background:var(--surface-hover);color:var(--color-primary)}.i-table-wrapper .i-table-container--virtual-scroll .i-table-virtual-header .i-table-header-cell.i-table-sorted .i-table-sort-icon{color:var(--color-primary)}.i-table-wrapper .i-table-container--virtual-scroll .i-table-virtual-header .i-table-filter-row .i-table-column-filter{border:1px solid var(--surface-border);background:var(--surface-ground);color:var(--color-text-primary)}.i-table-wrapper .i-table-container--virtual-scroll .i-table-virtual-header .i-table-filter-row .i-table-column-filter:focus{border-color:var(--color-primary);outline:none}.i-table-wrapper .i-table-container--virtual-scroll .i-table-virtual-header .i-table-filter-row .i-table-column-filter::placeholder{color:var(--color-text-tertiary)}.i-table-wrapper .i-table-container--virtual-scroll .i-table-virtual-viewport .i-table-virtual-row{background:var(--color-component-background);border-bottom:1px solid var(--surface-border);color:var(--color-text-primary);transition:background-color .15s ease}.i-table-wrapper .i-table-container--virtual-scroll .i-table-virtual-viewport .i-table-virtual-row.i-table-row-odd{background:var(--color-component-background)}.i-table-wrapper .i-table-container--virtual-scroll .i-table-virtual-viewport .i-table-virtual-row.i-table-row-selected{background:var(--surface-hover);color:var(--color-primary)}.i-table-wrapper.i-table--nested{background:transparent}.i-table-wrapper.i-table--nested table thead tr{background:var(--surface-section)}.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}.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{scrollbar-width:thin;scrollbar-color:rgba(0,0,0,.2) transparent;scroll-behavior:smooth}.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{scrollbar-color:var(--color-text-secondary) transparent}.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{scrollbar-width:thin;scrollbar-color:var(--color-text-secondary) rgba(0,0,0,.05)}.i-table-wrapper .i-table-container--scrollable{overflow-y:auto;scrollbar-gutter:stable}.i-table-wrapper .i-table-container--scrollable>table>thead{position:sticky;top:0;z-index:2}.i-table-wrapper .i-table-container--virtual-scroll{overflow:hidden;display:flex;flex-direction:column}.i-table-wrapper .i-table-container--virtual-scroll .i-table-virtual-header{flex-shrink:0;overflow:hidden}.i-table-wrapper .i-table-container--virtual-scroll .i-table-virtual-header .i-table-sort-icon{font-size:.8em;opacity:.6;transition:opacity .15s ease,color .15s ease}.i-table-wrapper .i-table-container--virtual-scroll .i-table-virtual-header .i-table-header-cell.i-table-sortable-column{cursor:pointer}.i-table-wrapper .i-table-container--virtual-scroll .i-table-virtual-header .i-table-header-cell.i-table-sortable-column .i-table-sort-icon{opacity:.4}.i-table-wrapper .i-table-container--virtual-scroll .i-table-virtual-header .i-table-header-cell.i-table-sortable-column:hover .i-table-sort-icon,.i-table-wrapper .i-table-container--virtual-scroll .i-table-virtual-header .i-table-header-cell.i-table-sortable-column.i-table-sorted .i-table-sort-icon{opacity:1}.i-table-wrapper .i-table-container--virtual-scroll .i-table-virtual-header .i-table-filter-row .i-table-virtual-cell{padding:8px 16px}.i-table-wrapper .i-table-container--virtual-scroll .i-table-virtual-header .i-table-filter-row .i-table-virtual-cell .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 .i-table-container--virtual-scroll .i-table-virtual-viewport{flex:1;min-height:0;width:100%;overflow-y:auto}.i-table-wrapper .i-table-container--virtual-scroll .i-table-virtual-viewport::-webkit-scrollbar-track{background:transparent;border-radius:3px}.i-table-wrapper .i-table-container--virtual-scroll .i-table-virtual-viewport::-webkit-scrollbar-thumb{background:#0003;border-radius:3px;transition:background .2s ease}.i-table-wrapper .i-table-container--virtual-scroll .i-table-virtual-viewport::-webkit-scrollbar-thumb:hover{background:#00000059}.i-table-wrapper .i-table-container--virtual-scroll .i-table-virtual-viewport::-webkit-scrollbar-thumb:active{background:#00000080}.i-table-wrapper .i-table-container--virtual-scroll .i-table-virtual-viewport::-webkit-scrollbar-corner{background:transparent}.i-table-wrapper .i-table-container--virtual-scroll .i-table-virtual-viewport{scrollbar-width:thin;scrollbar-color:rgba(0,0,0,.2) transparent;scroll-behavior:smooth}.i-table-wrapper .i-table-container--virtual-scroll .i-table-virtual-viewport::-webkit-scrollbar-thumb{background:var(--color-text-secondary);opacity:.4}.i-table-wrapper .i-table-container--virtual-scroll .i-table-virtual-viewport::-webkit-scrollbar-thumb:hover{background:var(--color-text-primary);opacity:.6}.i-table-wrapper .i-table-container--virtual-scroll .i-table-virtual-viewport::-webkit-scrollbar-thumb:active{background:var(--color-primary);opacity:.7}.i-table-wrapper .i-table-container--virtual-scroll .i-table-virtual-viewport{scrollbar-color:var(--color-text-secondary) transparent}.i-table-wrapper .i-table-container--virtual-scroll .i-table-virtual-viewport::-webkit-scrollbar{width:6px;height:6px}.i-table-wrapper .i-table-container--virtual-scroll .i-table-virtual-viewport::-webkit-scrollbar-track{background:#0000000d;border-radius:3px;margin:2px 0}.i-table-wrapper .i-table-container--virtual-scroll .i-table-virtual-viewport::-webkit-scrollbar-thumb{border-radius:3px;min-height:20px;background:var(--color-text-secondary);opacity:.6}.i-table-wrapper .i-table-container--virtual-scroll .i-table-virtual-viewport::-webkit-scrollbar-thumb:hover{background:var(--color-text-primary);opacity:.8}.i-table-wrapper .i-table-container--virtual-scroll .i-table-virtual-viewport::-webkit-scrollbar-thumb:active{background:var(--color-primary);opacity:.9}.i-table-wrapper .i-table-container--virtual-scroll .i-table-virtual-viewport{scrollbar-width:thin;scrollbar-color:var(--color-text-secondary) rgba(0,0,0,.05)}.i-table-wrapper .i-table-container--virtual-scroll .i-table-virtual-viewport .cdk-virtual-scroll-content-wrapper{width:100%}.i-table-wrapper .i-table-container--virtual-scroll .i-table-virtual-row{display:flex;align-items:center;width:100%;box-sizing:border-box}.i-table-wrapper .i-table-container--virtual-scroll .i-table-virtual-cell{padding:12px 16px;box-sizing:border-box;flex-shrink:0;overflow:hidden;display:flex;align-items:center}.i-table-wrapper .i-table-container--virtual-scroll .i-table-virtual-cell.i-table-header-cell{-webkit-user-select:none;user-select:none;font-weight:600;white-space:nowrap}.i-table-wrapper .i-table-container--virtual-scroll .i-table-virtual-cell.i-table-header-cell .i-table-header-content{display:flex;align-items:center;gap:8px}.i-table-wrapper .i-table-container--virtual-scroll .i-table-virtual-cell.i-table-header-cell .i-table-header-content .i-table-header-text{flex:1}.i-table-wrapper .i-table-container--virtual-scroll .i-table-virtual-cell.i-table-selection-header,.i-table-wrapper .i-table-container--virtual-scroll .i-table-virtual-cell.i-table-selection-cell{width:50px;flex:0 0 50px;justify-content:center}.i-table-wrapper .i-table-container--virtual-scroll .i-table-virtual-cell.i-table-actions-header,.i-table-wrapper .i-table-container--virtual-scroll .i-table-virtual-cell.i-table-actions-cell{flex:0 0 auto;justify-content:flex-end}.i-table-wrapper .i-table-container--virtual-scroll .i-table-virtual-cell.i-table-actions-header .i-table-actions,.i-table-wrapper .i-table-container--virtual-scroll .i-table-virtual-cell.i-table-actions-cell .i-table-actions{display:flex;gap:4px;justify-content:flex-end}.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:.8em;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 tr th.i-table-actions-header{text-align:right}.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 .i-table-expanded-content{padding:0;margin:2px 0 24px;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-summary-row{cursor:pointer;-webkit-user-select:none;user-select:none;font-weight:600;transition:background-color .15s ease}.i-table-wrapper table tbody .i-table-group-summary-row td{padding:12px 16px}.i-table-wrapper table tbody .i-table-group-summary-row .i-table-group-header-content{display:flex;align-items:center;gap:8px}.i-table-wrapper table tbody .i-table-group-summary-row .i-table-group-header-content .i-table-group-label{flex:1;font-size:1.05em}.i-table-wrapper table tbody .i-table-group-summary-row .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-detail-row .i-table-group-detail-cell{padding:0;overflow:hidden}.i-table-wrapper table tbody .i-table-group-detail-row .i-table-group-detail-cell .i-table-wrapper{border-radius:0;border-top:none;overflow:hidden}.i-table-wrapper table tbody .i-table-group-count-header{width:60px;text-align:center;font-weight:400;opacity:.6;font-size:.85em}.i-table-wrapper table tbody .i-table-group-count-cell{width:60px;text-align:right;white-space:nowrap}.i-table-wrapper table tbody .i-table-group-count-cell .i-table-group-count{opacity:.7;font-size:.9em;font-weight:400}.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:.8em;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-detail-count-header{width:36px;padding:0}.i-table-wrapper .i-table-detail-count-cell{width:36px;padding:0 4px 0 0;text-align:right;white-space:nowrap;font-size:.78em;opacity:.5;font-weight:400}.i-table-wrapper .i-table-actions-header,.i-table-wrapper .i-table-actions-cell{width:auto;white-space:nowrap;text-align:right}.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}.i-severity-icon.success,.i-table-cell-success .i-severity-icon,.i-severity-text.success,.i-table-cell-success .i-severity-text{color:var(--color-success)}.i-severity-icon.info,.i-table-cell-info .i-severity-icon,.i-severity-text.info,.i-table-cell-info .i-severity-text{color:var(--color-info)}.i-severity-icon.warning,.i-table-cell-warning .i-severity-icon,.i-severity-text.warning,.i-table-cell-warning .i-severity-text{color:var(--color-warning)}.i-severity-icon.danger,.i-table-cell-danger .i-severity-icon,.i-severity-text.danger,.i-table-cell-danger .i-severity-text{color:var(--color-danger)}.i-severity-icon.secondary,.i-table-cell-secondary .i-severity-icon,.i-severity-text.secondary,.i-table-cell-secondary .i-severity-text{color:var(--color-text-secondary)}.i-table-list-cell{display:flex;flex-direction:column;gap:4px;align-items:flex-start}.i-table-list-cell i-chip{display:block}.i-action-hidden{visibility:hidden;pointer-events:none}@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}.i-table-wrapper table{min-width:max-content}.i-table-wrapper .i-table-container--virtual-scroll{min-width:600px}.i-table-wrapper .i-table-container--virtual-scroll .i-table-virtual-cell{min-width:80px}}\n"] }]
         }], ctorParameters: () => [{ type: i0.ElementRef }], propDecorators: { grid: [{ type: i0.Input, args: [{ isSignal: true, alias: "grid", required: false }] }], emptyMessage: [{
                 type: Input
             }], sortable: [{