integra-ng 21.0.6 → 21.0.7

package/fesm2022/integra-ng.mjs

@@ -9,6 +9,7 @@ import { Subject, filter, BehaviorSubject } from 'rxjs';
 import * as i2 from '@angular/router';
 import { RouterLink, RouterLinkActive, NavigationEnd, RouterOutlet } from '@angular/router';
 import { trigger, state, transition, style, animate } from '@angular/animations';
+import { CdkVirtualScrollViewport, CdkVirtualForOf, CdkFixedSizeVirtualScroll } from '@angular/cdk/scrolling';
 import { Chart, registerables } from 'chart.js';
 import * as i1$2 from '@angular/platform-browser';
 
@@ -399,11 +400,11 @@ class IButton {
         this.buttonElement?.nativeElement?.focus();
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: IButton, deps: [{ token: i0.ChangeDetectorRef }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.3", type: IButton, isStandalone: true, selector: "i-button", inputs: { severity: "severity", size: "size", type: "type", disabled: "disabled", outlined: "outlined", raised: "raised", text: "text", icon: "icon", fluid: "fluid", loading: "loading" }, outputs: { clicked: "clicked" }, host: { properties: { "class.i-button-fluid": "this.fluidClass" } }, viewQueries: [{ propertyName: "projected", first: true, predicate: ["projected"], descendants: true, read: ElementRef }, { propertyName: "buttonElement", first: true, predicate: ["buttonElement"], descendants: true, read: ElementRef }], ngImport: i0, template: "<div class=\"i-button-wrapper\">\n  <button\n    #buttonElement\n    primary\n    [attr.id]=\"componentId\"\n    class=\"i-button\"\n    [ngClass]=\"[\n      'i-button--' + severity,\n      'i-button--' + size,\n      outlined && !text ? 'i-button--outlined' : '',\n      text ? 'i-button--text' : '',\n      fluid ? 'i-button--fluid' : '',\n      raised && !text ? 'i-button--raised' : '',\n      iconOnly ? 'icon-only' : '',\n      iconOnly && !text ? 'icon-only-text' : '',\n      loading ? 'i-button--loading' : ''\n    ]\"\n    [disabled]=\"disabled || loading\"\n    [attr.type]=\"type\"\n    (click)=\"clicked.emit($event)\"\n  >\n    @if (loading) {\n    <div class=\"button-loading-spinner\">\n      <i-progress-spinner\n        size=\"small\"\n        [severity]=\"severity\"\n        [colorMode]=\"outlined || text ? 'text' : 'accent'\"\n      ></i-progress-spinner>\n    </div>\n    }\n    <div\n      [ngClass]=\"[\n        'button-content',\n        iconOnly ? 'icon-only' : '',\n        loading ? 'button-content--hidden' : ''\n      ]\"\n    >\n      @if (icon) {\n      <i [ngClass]=\"[icon, 'i-button__icon', iconOnly ? 'icon-only' : '']\"></i>\n      }\n      <span class=\"projected-content\" #projected>\n        <ng-content></ng-content>\n      </span>\n    </div>\n  </button>\n</div>\n", styles: [".i-button--primary{background:var(--color-primary);color:var(--color-contrast-inverse)}.i-button--primary:hover:not(:disabled){background:color-mix(in srgb,var(--color-primary) 80%,transparent)}.i-button--primary.i-button--outlined{background:transparent;color:var(--color-primary);border-color:color-mix(in srgb,var(--color-primary) 40%,transparent)!important}.i-button--primary.i-button--outlined:hover:not(:disabled){background:color-mix(in srgb,var(--color-primary) 7%,transparent)}.i-button--primary.i-button--text{background:transparent;color:var(--color-primary);border-color:transparent}.i-button--primary.i-button--text:hover:not(:disabled){background:color-mix(in srgb,var(--color-primary) 7%,transparent);border-color:transparent}.i-button--secondary{background:var(--color-secondary);color:var(--color-contrast-inverse)}.i-button--secondary:hover:not(:disabled){background:color-mix(in srgb,var(--color-secondary) 80%,transparent)}.i-button--secondary.i-button--outlined{background:transparent;color:var(--color-secondary);border-color:color-mix(in srgb,var(--color-secondary) 40%,transparent)!important}.i-button--secondary.i-button--outlined:hover:not(:disabled){background:color-mix(in srgb,var(--color-secondary) 7%,transparent)}.i-button--secondary.i-button--text{background:transparent;color:var(--color-secondary);border-color:transparent}.i-button--secondary.i-button--text:hover:not(:disabled){background:color-mix(in srgb,var(--color-secondary) 7%,transparent);border-color:transparent}.i-button--success{background:var(--color-success);color:var(--color-contrast-inverse)}.i-button--success:hover:not(:disabled){background:color-mix(in srgb,var(--color-success) 80%,transparent)}.i-button--success.i-button--outlined{background:transparent;color:var(--color-success);border-color:color-mix(in srgb,var(--color-success) 40%,transparent)!important}.i-button--success.i-button--outlined:hover:not(:disabled){background:color-mix(in srgb,var(--color-success) 7%,transparent)}.i-button--success.i-button--text{background:transparent;color:var(--color-success);border-color:transparent}.i-button--success.i-button--text:hover:not(:disabled){background:color-mix(in srgb,var(--color-success) 7%,transparent);border-color:transparent}.i-button--info{background:var(--color-info);color:var(--color-contrast-inverse)}.i-button--info:hover:not(:disabled){background:color-mix(in srgb,var(--color-info) 80%,transparent)}.i-button--info.i-button--outlined{background:transparent;color:var(--color-info);border-color:color-mix(in srgb,var(--color-info) 40%,transparent)!important}.i-button--info.i-button--outlined:hover:not(:disabled){background:color-mix(in srgb,var(--color-info) 7%,transparent)}.i-button--info.i-button--text{background:transparent;color:var(--color-info);border-color:transparent}.i-button--info.i-button--text:hover:not(:disabled){background:color-mix(in srgb,var(--color-info) 7%,transparent);border-color:transparent}.i-button--warning{background:var(--color-warning);color:#fff}.i-button--warning:hover:not(:disabled){background:color-mix(in srgb,var(--color-warning) 80%,transparent)}.i-button--warning.i-button--outlined{background:transparent;color:var(--color-warning);border-color:color-mix(in srgb,var(--color-warning) 40%,transparent)!important}.i-button--warning.i-button--outlined:hover:not(:disabled){background:color-mix(in srgb,var(--color-warning) 7%,transparent)}.i-button--warning.i-button--text{background:transparent;color:var(--color-warning);border-color:transparent}.i-button--warning.i-button--text:hover:not(:disabled){background:color-mix(in srgb,var(--color-warning) 7%,transparent);border-color:transparent}.i-button--danger{background:var(--color-danger);color:#fff}.i-button--danger:hover:not(:disabled){background:color-mix(in srgb,var(--color-danger) 80%,transparent)}.i-button--danger.i-button--outlined{background:transparent;color:var(--color-danger);border-color:color-mix(in srgb,var(--color-danger) 40%,transparent)!important}.i-button--danger.i-button--outlined:hover:not(:disabled){background:color-mix(in srgb,var(--color-danger) 7%,transparent)}.i-button--danger.i-button--text{background:transparent;color:var(--color-danger);border-color:transparent}.i-button--danger.i-button--text:hover:not(:disabled){background:color-mix(in srgb,var(--color-danger) 7%,transparent);border-color:transparent}.i-button--contrast{background:var(--color-contrast);color:var(--color-contrast-inverse)}.i-button--contrast:hover:not(:disabled){background:color-mix(in srgb,var(--color-contrast) 80%,transparent)}.i-button--contrast.i-button--outlined{background:transparent;color:var(--color-text-secondary);border-color:color-mix(in srgb,var(--color-contrast) 40%,transparent)!important}.i-button--contrast.i-button--outlined:hover:not(:disabled){color:var(--color-text-primary);background:var(--surface-hover);border-color:var(--color-text-primary)}.i-button--contrast.i-button--text{background:transparent;color:var(--color-text-secondary);border-color:transparent}.i-button--contrast.i-button--text:hover:not(:disabled){color:var(--color-text-primary);background:var(--surface-hover);border-color:transparent}:host{display:inline-block}:host.i-button-fluid{display:block;width:100%}.i-button-wrapper .i-button{position:relative;display:flex;align-items:center;justify-content:center;box-sizing:border-box;padding:0 16px;font-weight:550;border:1px solid transparent;border-radius:4px;outline:none;cursor:pointer;transition:background .2s,box-shadow .2s,color .2s,border-color .2s}.i-button-wrapper .i-button.icon-only{padding:8px;border-radius:20px}.i-button-wrapper .i-button.icon-only.icon-only-text{border-radius:4px}.i-button-wrapper .i-button .button-content{display:flex;align-items:center;justify-content:center;gap:8px}.i-button-wrapper .i-button .button-content.icon-only{gap:0}.i-button-wrapper .i-button .button-content--hidden{visibility:hidden}.i-button-wrapper .i-button .button-loading-spinner{position:absolute;display:flex;align-items:center;justify-content:center;z-index:2;opacity:1;contain:layout style paint}.i-button-wrapper .i-button .i-button__icon{display:inline-flex;align-items:center}.i-button-wrapper .i-button--xtra-small{height:20px;padding:0 10px;font-size:10px}.i-button-wrapper .i-button--xtra-small .icon-only{font-size:12px}.i-button-wrapper .i-button--small{height:28px}.i-button-wrapper .i-button--small .icon-only{font-size:14px}.i-button-wrapper .i-button--medium{height:34px}.i-button-wrapper .i-button--medium .icon-only{font-size:18px}.i-button-wrapper .i-button--large{height:40px}.i-button-wrapper .i-button--large .icon-only{font-size:26px}.i-button-wrapper .i-button:disabled,.i-button-wrapper .i-button--outlined:disabled{pointer-events:none}.i-button-wrapper .i-button:disabled:not(.i-button--loading) .button-content,.i-button-wrapper .i-button--outlined:disabled:not(.i-button--loading) .button-content,.i-button-wrapper .i-button:disabled:not(.i-button--loading) .i-button__icon,.i-button-wrapper .i-button--outlined:disabled:not(.i-button--loading) .i-button__icon{opacity:.38}.i-button-wrapper .i-button--loading .button-loading-spinner{opacity:1!important}.i-button-wrapper .i-button--raised{box-shadow:0 3px 1px -2px #0003,0 2px 2px #00000024,0 1px 5px #0000001f}.i-button-wrapper .i-button--outlined{box-shadow:none;border:1px solid}.i-button-wrapper .i-button--text{box-shadow:none}.i-button-wrapper .i-button--fluid{width:100%}.i-button-wrapper .i-button:after{content:\"\";position:absolute;top:50%;left:50%;width:100%;height:100%;border-radius:inherit;pointer-events:none;transform:translate(-50%,-50%) scale(.7);transition:opacity .2s,transform .2s}.i-button-wrapper .i-button:active:after{opacity:.12;transform:translate(-50%,-50%) scale(1)}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: IProgressSpinner, selector: "i-progress-spinner", inputs: ["size", "strokeWidth", "ariaLabel", "severity", "colorMode"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.3", type: IButton, isStandalone: true, selector: "i-button", inputs: { severity: "severity", size: "size", type: "type", disabled: "disabled", outlined: "outlined", raised: "raised", text: "text", icon: "icon", fluid: "fluid", loading: "loading" }, outputs: { clicked: "clicked" }, host: { properties: { "class.i-button-fluid": "this.fluidClass" } }, viewQueries: [{ propertyName: "projected", first: true, predicate: ["projected"], descendants: true, read: ElementRef }, { propertyName: "buttonElement", first: true, predicate: ["buttonElement"], descendants: true, read: ElementRef }], ngImport: i0, template: "<div class=\"i-button-wrapper\">\n  <button\n    #buttonElement\n    primary\n    [attr.id]=\"componentId\"\n    class=\"i-button\"\n    [ngClass]=\"[\n      'i-button--' + severity,\n      'i-button--' + size,\n      outlined && !text ? 'i-button--outlined' : '',\n      text ? 'i-button--text' : '',\n      fluid ? 'i-button--fluid' : '',\n      raised && !text ? 'i-button--raised' : '',\n      iconOnly ? 'icon-only' : '',\n      iconOnly && !text ? 'icon-only-text' : '',\n      loading ? 'i-button--loading' : ''\n    ]\"\n    [disabled]=\"disabled || loading\"\n    [attr.type]=\"type\"\n    (click)=\"clicked.emit($event)\"\n  >\n    @if (loading) {\n    <div class=\"button-loading-spinner\">\n      <i-progress-spinner\n        size=\"small\"\n        [severity]=\"severity\"\n        [colorMode]=\"outlined || text ? 'text' : 'accent'\"\n      ></i-progress-spinner>\n    </div>\n    }\n    <div\n      [ngClass]=\"[\n        'button-content',\n        iconOnly ? 'icon-only' : '',\n        loading ? 'button-content--hidden' : ''\n      ]\"\n    >\n      @if (icon) {\n      <i [ngClass]=\"[icon, 'i-button__icon', iconOnly ? 'icon-only' : '']\"></i>\n      }\n      <span class=\"projected-content\" #projected>\n        <ng-content></ng-content>\n      </span>\n    </div>\n  </button>\n</div>\n", styles: [".i-button--primary{background:var(--color-primary);color:var(--color-contrast-inverse)}.i-button--primary:hover:not(:disabled){background:color-mix(in srgb,var(--color-primary) 80%,transparent)}.i-button--primary.i-button--outlined{background:transparent;color:var(--color-primary);border-color:color-mix(in srgb,var(--color-primary) 40%,transparent)!important}.i-button--primary.i-button--outlined:hover:not(:disabled){background:color-mix(in srgb,var(--color-primary) 7%,transparent)}.i-button--primary.i-button--text{background:transparent;color:var(--color-primary);border-color:transparent}.i-button--primary.i-button--text:hover:not(:disabled){background:color-mix(in srgb,var(--color-primary) 7%,transparent);border-color:transparent}.i-button--secondary{background:var(--color-secondary);color:var(--color-contrast-inverse)}.i-button--secondary:hover:not(:disabled){background:color-mix(in srgb,var(--color-secondary) 80%,transparent)}.i-button--secondary.i-button--outlined{background:transparent;color:var(--color-secondary);border-color:color-mix(in srgb,var(--color-secondary) 40%,transparent)!important}.i-button--secondary.i-button--outlined:hover:not(:disabled){background:color-mix(in srgb,var(--color-secondary) 7%,transparent)}.i-button--secondary.i-button--text{background:transparent;color:var(--color-secondary);border-color:transparent}.i-button--secondary.i-button--text:hover:not(:disabled){background:color-mix(in srgb,var(--color-secondary) 7%,transparent);border-color:transparent}.i-button--success{background:var(--color-success);color:var(--color-contrast-inverse)}.i-button--success:hover:not(:disabled){background:color-mix(in srgb,var(--color-success) 80%,transparent)}.i-button--success.i-button--outlined{background:transparent;color:var(--color-success);border-color:color-mix(in srgb,var(--color-success) 40%,transparent)!important}.i-button--success.i-button--outlined:hover:not(:disabled){background:color-mix(in srgb,var(--color-success) 7%,transparent)}.i-button--success.i-button--text{background:transparent;color:var(--color-success);border-color:transparent}.i-button--success.i-button--text:hover:not(:disabled){background:color-mix(in srgb,var(--color-success) 7%,transparent);border-color:transparent}.i-button--info{background:var(--color-info);color:var(--color-contrast-inverse)}.i-button--info:hover:not(:disabled){background:color-mix(in srgb,var(--color-info) 80%,transparent)}.i-button--info.i-button--outlined{background:transparent;color:var(--color-info);border-color:color-mix(in srgb,var(--color-info) 40%,transparent)!important}.i-button--info.i-button--outlined:hover:not(:disabled){background:color-mix(in srgb,var(--color-info) 7%,transparent)}.i-button--info.i-button--text{background:transparent;color:var(--color-info);border-color:transparent}.i-button--info.i-button--text:hover:not(:disabled){background:color-mix(in srgb,var(--color-info) 7%,transparent);border-color:transparent}.i-button--warning{background:var(--color-warning);color:#fff}.i-button--warning:hover:not(:disabled){background:color-mix(in srgb,var(--color-warning) 80%,transparent)}.i-button--warning.i-button--outlined{background:transparent;color:var(--color-warning);border-color:color-mix(in srgb,var(--color-warning) 40%,transparent)!important}.i-button--warning.i-button--outlined:hover:not(:disabled){background:color-mix(in srgb,var(--color-warning) 7%,transparent)}.i-button--warning.i-button--text{background:transparent;color:var(--color-warning);border-color:transparent}.i-button--warning.i-button--text:hover:not(:disabled){background:color-mix(in srgb,var(--color-warning) 7%,transparent);border-color:transparent}.i-button--danger{background:var(--color-danger);color:#fff}.i-button--danger:hover:not(:disabled){background:color-mix(in srgb,var(--color-danger) 80%,transparent)}.i-button--danger.i-button--outlined{background:transparent;color:var(--color-danger);border-color:color-mix(in srgb,var(--color-danger) 40%,transparent)!important}.i-button--danger.i-button--outlined:hover:not(:disabled){background:color-mix(in srgb,var(--color-danger) 7%,transparent)}.i-button--danger.i-button--text{background:transparent;color:var(--color-danger);border-color:transparent}.i-button--danger.i-button--text:hover:not(:disabled){background:color-mix(in srgb,var(--color-danger) 7%,transparent);border-color:transparent}.i-button--contrast{background:var(--color-contrast);color:var(--color-contrast-inverse)}.i-button--contrast:hover:not(:disabled){background:color-mix(in srgb,var(--color-contrast) 80%,transparent)}.i-button--contrast.i-button--outlined{background:transparent;color:var(--color-text-secondary);border-color:color-mix(in srgb,var(--color-contrast) 40%,transparent)!important}.i-button--contrast.i-button--outlined:hover:not(:disabled){color:var(--color-text-primary);background:var(--surface-hover);border-color:var(--color-text-primary)}.i-button--contrast.i-button--text{background:transparent;color:var(--color-text-secondary);border-color:transparent}.i-button--contrast.i-button--text:hover:not(:disabled){color:var(--color-text-primary);background:var(--surface-hover);border-color:transparent}:host{display:inline-block}:host.i-button-fluid{display:block;width:100%}.i-button-wrapper .i-button{position:relative;display:flex;align-items:center;justify-content:center;box-sizing:border-box;padding:0 16px;font-weight:550;border:1px solid transparent;border-radius:4px;outline:none;cursor:pointer;transition:background .2s,box-shadow .2s,color .2s,border-color .2s}.i-button-wrapper .i-button.icon-only{padding:8px;border-radius:20px}.i-button-wrapper .i-button.icon-only.icon-only-text{border-radius:4px}.i-button-wrapper .i-button .button-content{display:flex;align-items:center;justify-content:center;gap:8px}.i-button-wrapper .i-button .button-content.icon-only{gap:0}.i-button-wrapper .i-button .button-content--hidden{visibility:hidden}.i-button-wrapper .i-button .button-loading-spinner{position:absolute;display:flex;align-items:center;justify-content:center;z-index:2;opacity:1;contain:layout style paint}.i-button-wrapper .i-button .i-button__icon{display:inline-flex;align-items:center}.i-button-wrapper .i-button--xtra-small{height:20px;padding:0 10px;font-size:10px}.i-button-wrapper .i-button--xtra-small .icon-only{font-size:12px}.i-button-wrapper .i-button--small{height:28px;font-weight:500}.i-button-wrapper .i-button--small .icon-only{font-size:14px}.i-button-wrapper .i-button--medium{height:34px}.i-button-wrapper .i-button--medium .icon-only{font-size:18px}.i-button-wrapper .i-button--large{height:40px}.i-button-wrapper .i-button--large .icon-only{font-size:26px}.i-button-wrapper .i-button:disabled,.i-button-wrapper .i-button--outlined:disabled{pointer-events:none}.i-button-wrapper .i-button:disabled:not(.i-button--loading) .button-content,.i-button-wrapper .i-button--outlined:disabled:not(.i-button--loading) .button-content,.i-button-wrapper .i-button:disabled:not(.i-button--loading) .i-button__icon,.i-button-wrapper .i-button--outlined:disabled:not(.i-button--loading) .i-button__icon{opacity:.38}.i-button-wrapper .i-button--loading .button-loading-spinner{opacity:1!important}.i-button-wrapper .i-button--raised{box-shadow:0 3px 1px -2px #0003,0 2px 2px #00000024,0 1px 5px #0000001f}.i-button-wrapper .i-button--outlined{box-shadow:none;border:1px solid}.i-button-wrapper .i-button--text{box-shadow:none}.i-button-wrapper .i-button--fluid{width:100%}.i-button-wrapper .i-button:after{content:\"\";position:absolute;top:50%;left:50%;width:100%;height:100%;border-radius:inherit;pointer-events:none;transform:translate(-50%,-50%) scale(.7);transition:opacity .2s,transform .2s}.i-button-wrapper .i-button:active:after{opacity:.12;transform:translate(-50%,-50%) scale(1)}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: IProgressSpinner, selector: "i-progress-spinner", inputs: ["size", "strokeWidth", "ariaLabel", "severity", "colorMode"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: IButton, decorators: [{
             type: Component,
-            args: [{ selector: 'i-button', standalone: true, imports: [NgClass, IProgressSpinner], template: "<div class=\"i-button-wrapper\">\n  <button\n    #buttonElement\n    primary\n    [attr.id]=\"componentId\"\n    class=\"i-button\"\n    [ngClass]=\"[\n      'i-button--' + severity,\n      'i-button--' + size,\n      outlined && !text ? 'i-button--outlined' : '',\n      text ? 'i-button--text' : '',\n      fluid ? 'i-button--fluid' : '',\n      raised && !text ? 'i-button--raised' : '',\n      iconOnly ? 'icon-only' : '',\n      iconOnly && !text ? 'icon-only-text' : '',\n      loading ? 'i-button--loading' : ''\n    ]\"\n    [disabled]=\"disabled || loading\"\n    [attr.type]=\"type\"\n    (click)=\"clicked.emit($event)\"\n  >\n    @if (loading) {\n    <div class=\"button-loading-spinner\">\n      <i-progress-spinner\n        size=\"small\"\n        [severity]=\"severity\"\n        [colorMode]=\"outlined || text ? 'text' : 'accent'\"\n      ></i-progress-spinner>\n    </div>\n    }\n    <div\n      [ngClass]=\"[\n        'button-content',\n        iconOnly ? 'icon-only' : '',\n        loading ? 'button-content--hidden' : ''\n      ]\"\n    >\n      @if (icon) {\n      <i [ngClass]=\"[icon, 'i-button__icon', iconOnly ? 'icon-only' : '']\"></i>\n      }\n      <span class=\"projected-content\" #projected>\n        <ng-content></ng-content>\n      </span>\n    </div>\n  </button>\n</div>\n", styles: [".i-button--primary{background:var(--color-primary);color:var(--color-contrast-inverse)}.i-button--primary:hover:not(:disabled){background:color-mix(in srgb,var(--color-primary) 80%,transparent)}.i-button--primary.i-button--outlined{background:transparent;color:var(--color-primary);border-color:color-mix(in srgb,var(--color-primary) 40%,transparent)!important}.i-button--primary.i-button--outlined:hover:not(:disabled){background:color-mix(in srgb,var(--color-primary) 7%,transparent)}.i-button--primary.i-button--text{background:transparent;color:var(--color-primary);border-color:transparent}.i-button--primary.i-button--text:hover:not(:disabled){background:color-mix(in srgb,var(--color-primary) 7%,transparent);border-color:transparent}.i-button--secondary{background:var(--color-secondary);color:var(--color-contrast-inverse)}.i-button--secondary:hover:not(:disabled){background:color-mix(in srgb,var(--color-secondary) 80%,transparent)}.i-button--secondary.i-button--outlined{background:transparent;color:var(--color-secondary);border-color:color-mix(in srgb,var(--color-secondary) 40%,transparent)!important}.i-button--secondary.i-button--outlined:hover:not(:disabled){background:color-mix(in srgb,var(--color-secondary) 7%,transparent)}.i-button--secondary.i-button--text{background:transparent;color:var(--color-secondary);border-color:transparent}.i-button--secondary.i-button--text:hover:not(:disabled){background:color-mix(in srgb,var(--color-secondary) 7%,transparent);border-color:transparent}.i-button--success{background:var(--color-success);color:var(--color-contrast-inverse)}.i-button--success:hover:not(:disabled){background:color-mix(in srgb,var(--color-success) 80%,transparent)}.i-button--success.i-button--outlined{background:transparent;color:var(--color-success);border-color:color-mix(in srgb,var(--color-success) 40%,transparent)!important}.i-button--success.i-button--outlined:hover:not(:disabled){background:color-mix(in srgb,var(--color-success) 7%,transparent)}.i-button--success.i-button--text{background:transparent;color:var(--color-success);border-color:transparent}.i-button--success.i-button--text:hover:not(:disabled){background:color-mix(in srgb,var(--color-success) 7%,transparent);border-color:transparent}.i-button--info{background:var(--color-info);color:var(--color-contrast-inverse)}.i-button--info:hover:not(:disabled){background:color-mix(in srgb,var(--color-info) 80%,transparent)}.i-button--info.i-button--outlined{background:transparent;color:var(--color-info);border-color:color-mix(in srgb,var(--color-info) 40%,transparent)!important}.i-button--info.i-button--outlined:hover:not(:disabled){background:color-mix(in srgb,var(--color-info) 7%,transparent)}.i-button--info.i-button--text{background:transparent;color:var(--color-info);border-color:transparent}.i-button--info.i-button--text:hover:not(:disabled){background:color-mix(in srgb,var(--color-info) 7%,transparent);border-color:transparent}.i-button--warning{background:var(--color-warning);color:#fff}.i-button--warning:hover:not(:disabled){background:color-mix(in srgb,var(--color-warning) 80%,transparent)}.i-button--warning.i-button--outlined{background:transparent;color:var(--color-warning);border-color:color-mix(in srgb,var(--color-warning) 40%,transparent)!important}.i-button--warning.i-button--outlined:hover:not(:disabled){background:color-mix(in srgb,var(--color-warning) 7%,transparent)}.i-button--warning.i-button--text{background:transparent;color:var(--color-warning);border-color:transparent}.i-button--warning.i-button--text:hover:not(:disabled){background:color-mix(in srgb,var(--color-warning) 7%,transparent);border-color:transparent}.i-button--danger{background:var(--color-danger);color:#fff}.i-button--danger:hover:not(:disabled){background:color-mix(in srgb,var(--color-danger) 80%,transparent)}.i-button--danger.i-button--outlined{background:transparent;color:var(--color-danger);border-color:color-mix(in srgb,var(--color-danger) 40%,transparent)!important}.i-button--danger.i-button--outlined:hover:not(:disabled){background:color-mix(in srgb,var(--color-danger) 7%,transparent)}.i-button--danger.i-button--text{background:transparent;color:var(--color-danger);border-color:transparent}.i-button--danger.i-button--text:hover:not(:disabled){background:color-mix(in srgb,var(--color-danger) 7%,transparent);border-color:transparent}.i-button--contrast{background:var(--color-contrast);color:var(--color-contrast-inverse)}.i-button--contrast:hover:not(:disabled){background:color-mix(in srgb,var(--color-contrast) 80%,transparent)}.i-button--contrast.i-button--outlined{background:transparent;color:var(--color-text-secondary);border-color:color-mix(in srgb,var(--color-contrast) 40%,transparent)!important}.i-button--contrast.i-button--outlined:hover:not(:disabled){color:var(--color-text-primary);background:var(--surface-hover);border-color:var(--color-text-primary)}.i-button--contrast.i-button--text{background:transparent;color:var(--color-text-secondary);border-color:transparent}.i-button--contrast.i-button--text:hover:not(:disabled){color:var(--color-text-primary);background:var(--surface-hover);border-color:transparent}:host{display:inline-block}:host.i-button-fluid{display:block;width:100%}.i-button-wrapper .i-button{position:relative;display:flex;align-items:center;justify-content:center;box-sizing:border-box;padding:0 16px;font-weight:550;border:1px solid transparent;border-radius:4px;outline:none;cursor:pointer;transition:background .2s,box-shadow .2s,color .2s,border-color .2s}.i-button-wrapper .i-button.icon-only{padding:8px;border-radius:20px}.i-button-wrapper .i-button.icon-only.icon-only-text{border-radius:4px}.i-button-wrapper .i-button .button-content{display:flex;align-items:center;justify-content:center;gap:8px}.i-button-wrapper .i-button .button-content.icon-only{gap:0}.i-button-wrapper .i-button .button-content--hidden{visibility:hidden}.i-button-wrapper .i-button .button-loading-spinner{position:absolute;display:flex;align-items:center;justify-content:center;z-index:2;opacity:1;contain:layout style paint}.i-button-wrapper .i-button .i-button__icon{display:inline-flex;align-items:center}.i-button-wrapper .i-button--xtra-small{height:20px;padding:0 10px;font-size:10px}.i-button-wrapper .i-button--xtra-small .icon-only{font-size:12px}.i-button-wrapper .i-button--small{height:28px}.i-button-wrapper .i-button--small .icon-only{font-size:14px}.i-button-wrapper .i-button--medium{height:34px}.i-button-wrapper .i-button--medium .icon-only{font-size:18px}.i-button-wrapper .i-button--large{height:40px}.i-button-wrapper .i-button--large .icon-only{font-size:26px}.i-button-wrapper .i-button:disabled,.i-button-wrapper .i-button--outlined:disabled{pointer-events:none}.i-button-wrapper .i-button:disabled:not(.i-button--loading) .button-content,.i-button-wrapper .i-button--outlined:disabled:not(.i-button--loading) .button-content,.i-button-wrapper .i-button:disabled:not(.i-button--loading) .i-button__icon,.i-button-wrapper .i-button--outlined:disabled:not(.i-button--loading) .i-button__icon{opacity:.38}.i-button-wrapper .i-button--loading .button-loading-spinner{opacity:1!important}.i-button-wrapper .i-button--raised{box-shadow:0 3px 1px -2px #0003,0 2px 2px #00000024,0 1px 5px #0000001f}.i-button-wrapper .i-button--outlined{box-shadow:none;border:1px solid}.i-button-wrapper .i-button--text{box-shadow:none}.i-button-wrapper .i-button--fluid{width:100%}.i-button-wrapper .i-button:after{content:\"\";position:absolute;top:50%;left:50%;width:100%;height:100%;border-radius:inherit;pointer-events:none;transform:translate(-50%,-50%) scale(.7);transition:opacity .2s,transform .2s}.i-button-wrapper .i-button:active:after{opacity:.12;transform:translate(-50%,-50%) scale(1)}\n"] }]
+            args: [{ selector: 'i-button', standalone: true, imports: [NgClass, IProgressSpinner], template: "<div class=\"i-button-wrapper\">\n  <button\n    #buttonElement\n    primary\n    [attr.id]=\"componentId\"\n    class=\"i-button\"\n    [ngClass]=\"[\n      'i-button--' + severity,\n      'i-button--' + size,\n      outlined && !text ? 'i-button--outlined' : '',\n      text ? 'i-button--text' : '',\n      fluid ? 'i-button--fluid' : '',\n      raised && !text ? 'i-button--raised' : '',\n      iconOnly ? 'icon-only' : '',\n      iconOnly && !text ? 'icon-only-text' : '',\n      loading ? 'i-button--loading' : ''\n    ]\"\n    [disabled]=\"disabled || loading\"\n    [attr.type]=\"type\"\n    (click)=\"clicked.emit($event)\"\n  >\n    @if (loading) {\n    <div class=\"button-loading-spinner\">\n      <i-progress-spinner\n        size=\"small\"\n        [severity]=\"severity\"\n        [colorMode]=\"outlined || text ? 'text' : 'accent'\"\n      ></i-progress-spinner>\n    </div>\n    }\n    <div\n      [ngClass]=\"[\n        'button-content',\n        iconOnly ? 'icon-only' : '',\n        loading ? 'button-content--hidden' : ''\n      ]\"\n    >\n      @if (icon) {\n      <i [ngClass]=\"[icon, 'i-button__icon', iconOnly ? 'icon-only' : '']\"></i>\n      }\n      <span class=\"projected-content\" #projected>\n        <ng-content></ng-content>\n      </span>\n    </div>\n  </button>\n</div>\n", styles: [".i-button--primary{background:var(--color-primary);color:var(--color-contrast-inverse)}.i-button--primary:hover:not(:disabled){background:color-mix(in srgb,var(--color-primary) 80%,transparent)}.i-button--primary.i-button--outlined{background:transparent;color:var(--color-primary);border-color:color-mix(in srgb,var(--color-primary) 40%,transparent)!important}.i-button--primary.i-button--outlined:hover:not(:disabled){background:color-mix(in srgb,var(--color-primary) 7%,transparent)}.i-button--primary.i-button--text{background:transparent;color:var(--color-primary);border-color:transparent}.i-button--primary.i-button--text:hover:not(:disabled){background:color-mix(in srgb,var(--color-primary) 7%,transparent);border-color:transparent}.i-button--secondary{background:var(--color-secondary);color:var(--color-contrast-inverse)}.i-button--secondary:hover:not(:disabled){background:color-mix(in srgb,var(--color-secondary) 80%,transparent)}.i-button--secondary.i-button--outlined{background:transparent;color:var(--color-secondary);border-color:color-mix(in srgb,var(--color-secondary) 40%,transparent)!important}.i-button--secondary.i-button--outlined:hover:not(:disabled){background:color-mix(in srgb,var(--color-secondary) 7%,transparent)}.i-button--secondary.i-button--text{background:transparent;color:var(--color-secondary);border-color:transparent}.i-button--secondary.i-button--text:hover:not(:disabled){background:color-mix(in srgb,var(--color-secondary) 7%,transparent);border-color:transparent}.i-button--success{background:var(--color-success);color:var(--color-contrast-inverse)}.i-button--success:hover:not(:disabled){background:color-mix(in srgb,var(--color-success) 80%,transparent)}.i-button--success.i-button--outlined{background:transparent;color:var(--color-success);border-color:color-mix(in srgb,var(--color-success) 40%,transparent)!important}.i-button--success.i-button--outlined:hover:not(:disabled){background:color-mix(in srgb,var(--color-success) 7%,transparent)}.i-button--success.i-button--text{background:transparent;color:var(--color-success);border-color:transparent}.i-button--success.i-button--text:hover:not(:disabled){background:color-mix(in srgb,var(--color-success) 7%,transparent);border-color:transparent}.i-button--info{background:var(--color-info);color:var(--color-contrast-inverse)}.i-button--info:hover:not(:disabled){background:color-mix(in srgb,var(--color-info) 80%,transparent)}.i-button--info.i-button--outlined{background:transparent;color:var(--color-info);border-color:color-mix(in srgb,var(--color-info) 40%,transparent)!important}.i-button--info.i-button--outlined:hover:not(:disabled){background:color-mix(in srgb,var(--color-info) 7%,transparent)}.i-button--info.i-button--text{background:transparent;color:var(--color-info);border-color:transparent}.i-button--info.i-button--text:hover:not(:disabled){background:color-mix(in srgb,var(--color-info) 7%,transparent);border-color:transparent}.i-button--warning{background:var(--color-warning);color:#fff}.i-button--warning:hover:not(:disabled){background:color-mix(in srgb,var(--color-warning) 80%,transparent)}.i-button--warning.i-button--outlined{background:transparent;color:var(--color-warning);border-color:color-mix(in srgb,var(--color-warning) 40%,transparent)!important}.i-button--warning.i-button--outlined:hover:not(:disabled){background:color-mix(in srgb,var(--color-warning) 7%,transparent)}.i-button--warning.i-button--text{background:transparent;color:var(--color-warning);border-color:transparent}.i-button--warning.i-button--text:hover:not(:disabled){background:color-mix(in srgb,var(--color-warning) 7%,transparent);border-color:transparent}.i-button--danger{background:var(--color-danger);color:#fff}.i-button--danger:hover:not(:disabled){background:color-mix(in srgb,var(--color-danger) 80%,transparent)}.i-button--danger.i-button--outlined{background:transparent;color:var(--color-danger);border-color:color-mix(in srgb,var(--color-danger) 40%,transparent)!important}.i-button--danger.i-button--outlined:hover:not(:disabled){background:color-mix(in srgb,var(--color-danger) 7%,transparent)}.i-button--danger.i-button--text{background:transparent;color:var(--color-danger);border-color:transparent}.i-button--danger.i-button--text:hover:not(:disabled){background:color-mix(in srgb,var(--color-danger) 7%,transparent);border-color:transparent}.i-button--contrast{background:var(--color-contrast);color:var(--color-contrast-inverse)}.i-button--contrast:hover:not(:disabled){background:color-mix(in srgb,var(--color-contrast) 80%,transparent)}.i-button--contrast.i-button--outlined{background:transparent;color:var(--color-text-secondary);border-color:color-mix(in srgb,var(--color-contrast) 40%,transparent)!important}.i-button--contrast.i-button--outlined:hover:not(:disabled){color:var(--color-text-primary);background:var(--surface-hover);border-color:var(--color-text-primary)}.i-button--contrast.i-button--text{background:transparent;color:var(--color-text-secondary);border-color:transparent}.i-button--contrast.i-button--text:hover:not(:disabled){color:var(--color-text-primary);background:var(--surface-hover);border-color:transparent}:host{display:inline-block}:host.i-button-fluid{display:block;width:100%}.i-button-wrapper .i-button{position:relative;display:flex;align-items:center;justify-content:center;box-sizing:border-box;padding:0 16px;font-weight:550;border:1px solid transparent;border-radius:4px;outline:none;cursor:pointer;transition:background .2s,box-shadow .2s,color .2s,border-color .2s}.i-button-wrapper .i-button.icon-only{padding:8px;border-radius:20px}.i-button-wrapper .i-button.icon-only.icon-only-text{border-radius:4px}.i-button-wrapper .i-button .button-content{display:flex;align-items:center;justify-content:center;gap:8px}.i-button-wrapper .i-button .button-content.icon-only{gap:0}.i-button-wrapper .i-button .button-content--hidden{visibility:hidden}.i-button-wrapper .i-button .button-loading-spinner{position:absolute;display:flex;align-items:center;justify-content:center;z-index:2;opacity:1;contain:layout style paint}.i-button-wrapper .i-button .i-button__icon{display:inline-flex;align-items:center}.i-button-wrapper .i-button--xtra-small{height:20px;padding:0 10px;font-size:10px}.i-button-wrapper .i-button--xtra-small .icon-only{font-size:12px}.i-button-wrapper .i-button--small{height:28px;font-weight:500}.i-button-wrapper .i-button--small .icon-only{font-size:14px}.i-button-wrapper .i-button--medium{height:34px}.i-button-wrapper .i-button--medium .icon-only{font-size:18px}.i-button-wrapper .i-button--large{height:40px}.i-button-wrapper .i-button--large .icon-only{font-size:26px}.i-button-wrapper .i-button:disabled,.i-button-wrapper .i-button--outlined:disabled{pointer-events:none}.i-button-wrapper .i-button:disabled:not(.i-button--loading) .button-content,.i-button-wrapper .i-button--outlined:disabled:not(.i-button--loading) .button-content,.i-button-wrapper .i-button:disabled:not(.i-button--loading) .i-button__icon,.i-button-wrapper .i-button--outlined:disabled:not(.i-button--loading) .i-button__icon{opacity:.38}.i-button-wrapper .i-button--loading .button-loading-spinner{opacity:1!important}.i-button-wrapper .i-button--raised{box-shadow:0 3px 1px -2px #0003,0 2px 2px #00000024,0 1px 5px #0000001f}.i-button-wrapper .i-button--outlined{box-shadow:none;border:1px solid}.i-button-wrapper .i-button--text{box-shadow:none}.i-button-wrapper .i-button--fluid{width:100%}.i-button-wrapper .i-button:after{content:\"\";position:absolute;top:50%;left:50%;width:100%;height:100%;border-radius:inherit;pointer-events:none;transform:translate(-50%,-50%) scale(.7);transition:opacity .2s,transform .2s}.i-button-wrapper .i-button:active:after{opacity:.12;transform:translate(-50%,-50%) scale(1)}\n"] }]
         }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }, { type: i0.ElementRef }], propDecorators: { fluidClass: [{
                 type: HostBinding,
                 args: ['class.i-button-fluid']
@@ -2942,7 +2943,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.3", ngImpor
                 type: Input
             }] } });
 
-const LocalStorageThemeKey = 'viewModeTheme';
 const LocalStorageColorSchemeKey = 'viewModeColorScheme';
 const MOBILE_BREAKPOINT = 991;
 class LayoutService {
@@ -2951,7 +2951,6 @@ class LayoutService {
         ripple: true,
         inputStyle: 'outlined',
         colorScheme: localStorage.getItem(LocalStorageColorSchemeKey) || 'light',
-        theme: localStorage.getItem(LocalStorageThemeKey) || 'aura-light-amber',
         scale: 12,
     };
     config = signal(this._config, ...(ngDevMode ? [{ debugName: "config" }] : []));
@@ -2962,9 +2961,6 @@ class LayoutService {
     constructor() {
         effect(() => {
             const config = this.config();
-            if (this.updateStyle(config)) {
-                this.changeTheme();
-            }
             this.changeScale(config.scale);
             this.onConfigUpdate();
         });
@@ -2978,8 +2974,7 @@ class LayoutService {
         };
     }
     updateStyle(config) {
-        return (config.theme !== this._config.theme ||
-            config.colorScheme !== this._config.colorScheme);
+        return config.colorScheme !== this._config.colorScheme;
     }
     toggleSidebar() {
         this.state.update((currentState) => ({
@@ -3024,32 +3019,6 @@ class LayoutService {
         this._config = { ...this.config() };
         this.configUpdate.next(this.config());
     }
-    changeTheme() {
-        const config = this.config();
-        const themeLink = document.getElementById('theme-css');
-        const themeLinkHref = themeLink.getAttribute('href');
-        const newHref = themeLinkHref
-            .split('/')
-            .map((el) => el == this._config.theme
-            ? (el = config.theme)
-            : el == `theme-${this._config.colorScheme}`
-                ? (el = `theme-${config.colorScheme}`)
-                : el)
-            .join('/');
-        this.replaceThemeLink(newHref);
-    }
-    replaceThemeLink(href) {
-        const id = 'theme-css';
-        const themeLink = document.getElementById(id);
-        const cloneLinkElement = themeLink.cloneNode(true);
-        cloneLinkElement.setAttribute('href', href);
-        cloneLinkElement.setAttribute('id', id + '-clone');
-        themeLink.parentNode.insertBefore(cloneLinkElement, themeLink.nextSibling);
-        cloneLinkElement.addEventListener('load', () => {
-            themeLink.remove();
-            cloneLinkElement.setAttribute('id', id);
-        });
-    }
     changeScale(value) {
         document.documentElement.style.fontSize = `${value}px`;
     }
@@ -3082,30 +3051,18 @@ class TopbarComponent {
     get colorScheme() {
         return this.layoutService.config().colorScheme;
     }
-    set theme(val) {
-        this.layoutService.config.update((config) => ({
-            ...config,
-            theme: val,
-        }));
-    }
-    get theme() {
-        return this.layoutService.config().theme;
-    }
     changeTheme() {
         this.isDark = !this.isDark;
         if (this.isDark) {
-            this.theme = 'aura-dark-amber';
             this.colorScheme = 'dark';
             document.body.classList.add('dark');
             document.body.classList.remove('light');
         }
         else {
-            this.theme = 'aura-light-amber';
             this.colorScheme = 'light';
             document.body.classList.add('light');
             document.body.classList.remove('dark');
         }
-        localStorage.setItem(LocalStorageThemeKey, this.theme);
         localStorage.setItem(LocalStorageColorSchemeKey, this.colorScheme);
     }
     get logo() {
@@ -3264,10 +3221,30 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.3", ngImpor
  *   title="Select Items"
  *   [options]="items"
  *   optionLabel="name"
- *   optionLeftIcon="icon"
- *   optionRightIcon="statusIcon"
+ *   optionIcon="icon"
  *   formControlName="selection">
  * </i-listbox>
+ *
+ * <!-- Multiple selection without chips -->
+ * <i-listbox
+ *   title="Choose Multiple"
+ *   [options]="items"
+ *   optionLabel="name"
+ *   [multiple]="true"
+ *   [showChips]="false"
+ *   formControlName="selectedItems">
+ * </i-listbox>
+ *
+ * <!-- Display as menu -->
+ * <i-listbox
+ *   title="Navigation"
+ *   [options]="menuItems"
+ *   optionLabel="name"
+ *   [multiple]="false"
+ *   [displayAsMenu]="true"
+ *   [filter]="false"
+ *   formControlName="selectedPage">
+ * </i-listbox>
  * ```
  *
  * @remarks
@@ -3296,15 +3273,10 @@ class IListbox {
      */
     actionTooltip;
     /**
-     * Property name for left icon on each option
-     * The option object should have this property with an icon class string
-     */
-    optionLeftIcon;
-    /**
-     * Property name for right icon on each option
+     * Property name for icon on each option
      * The option object should have this property with an icon class string
      */
-    optionRightIcon;
+    optionIcon;
     // Convert options to signal input
     options = input([], ...(ngDevMode ? [{ debugName: "options" }] : []));
     optionLabel;
@@ -3320,6 +3292,17 @@ class IListbox {
     disabled = false;
     multiple = true;
     readonly = true;
+    /**
+     * Whether to show chips for selected items in multiple selection mode
+     * @default true
+     */
+    showChips = true;
+    /**
+     * Display listbox as a menu with larger text and chevron icons
+     * Selected item uses menu-style highlighting
+     * @default false
+     */
+    displayAsMenu = false;
     onChange = new EventEmitter();
     onClear = new EventEmitter();
     /**
@@ -3400,20 +3383,12 @@ class IListbox {
         this.onAction.emit();
     }
     /**
-     * Gets the left icon for an option
-     */
-    getOptionLeftIcon(option) {
-        if (!this.optionLeftIcon)
-            return null;
-        return option[this.optionLeftIcon] || null;
-    }
-    /**
-     * Gets the right icon for an option
+     * Gets the icon for an option
      */
-    getOptionRightIcon(option) {
-        if (!this.optionRightIcon)
+    getOptionIcon(option) {
+        if (!this.optionIcon)
             return null;
-        return option[this.optionRightIcon] || null;
+        return option[this.optionIcon] || null;
     }
     toggleOption(option) {
         const optionValue = this.getOptionValue(option);
@@ -3501,7 +3476,8 @@ class IListbox {
             if (this.value === null || this.value === undefined) {
                 return [];
             }
-            const option = currentOptions.find((opt) => JSON.stringify(this.getOptionValue(opt)) === JSON.stringify(this.value));
+            const option = currentOptions.find((opt) => JSON.stringify(this.getOptionValue(opt)) ===
+                JSON.stringify(this.value));
             return option ? [this.getOptionLabel(option)] : [String(this.value)];
         }
         const values = Array.isArray(this.value) ? this.value : [];
@@ -3528,7 +3504,8 @@ class IListbox {
             if (this.value === null || this.value === undefined) {
                 return '';
             }
-            const option = currentOptions.find((opt) => JSON.stringify(this.getOptionValue(opt)) === JSON.stringify(this.value));
+            const option = currentOptions.find((opt) => JSON.stringify(this.getOptionValue(opt)) ===
+                JSON.stringify(this.value));
             return option ? this.getOptionLabel(option) : String(this.value);
         }
         if (!this.value || (Array.isArray(this.value) && this.value.length === 0)) {
@@ -3631,29 +3608,23 @@ class IListbox {
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: IListbox, deps: [{ token: i0.Injector }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.3", type: IListbox, isStandalone: true, selector: "i-listbox", inputs: { title: { classPropertyName: "title", publicName: "title", isSignal: false, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: false, isRequired: false, transformFunction: null }, actionIcon: { classPropertyName: "actionIcon", publicName: "actionIcon", isSignal: false, isRequired: false, transformFunction: null }, actionTooltip: { classPropertyName: "actionTooltip", publicName: "actionTooltip", isSignal: false, isRequired: false, transformFunction: null }, optionLeftIcon: { classPropertyName: "optionLeftIcon", publicName: "optionLeftIcon", isSignal: false, isRequired: false, transformFunction: null }, optionRightIcon: { classPropertyName: "optionRightIcon", publicName: "optionRightIcon", isSignal: false, isRequired: false, transformFunction: null }, options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null }, optionLabel: { classPropertyName: "optionLabel", publicName: "optionLabel", isSignal: false, isRequired: true, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: false, isRequired: false, transformFunction: null }, id: { classPropertyName: "id", publicName: "id", isSignal: false, isRequired: false, transformFunction: null }, fluid: { classPropertyName: "fluid", publicName: "fluid", isSignal: false, isRequired: false, transformFunction: null }, showClear: { classPropertyName: "showClear", publicName: "showClear", isSignal: false, isRequired: false, transformFunction: null }, filter: { classPropertyName: "filter", publicName: "filter", isSignal: false, isRequired: false, transformFunction: null }, filterBy: { classPropertyName: "filterBy", publicName: "filterBy", isSignal: false, isRequired: false, transformFunction: null }, maxSelectedLabels: { classPropertyName: "maxSelectedLabels", publicName: "maxSelectedLabels", isSignal: false, isRequired: false, transformFunction: null }, selectedItemsLabel: { classPropertyName: "selectedItemsLabel", publicName: "selectedItemsLabel", isSignal: false, isRequired: false, transformFunction: null }, errorMessages: { classPropertyName: "errorMessages", publicName: "errorMessages", isSignal: false, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: false, isRequired: false, transformFunction: null }, multiple: { classPropertyName: "multiple", publicName: "multiple", isSignal: false, isRequired: false, transformFunction: null }, readonly: { classPropertyName: "readonly", publicName: "readonly", isSignal: false, isRequired: false, transformFunction: null } }, outputs: { onChange: "onChange", onClear: "onClear", onAction: "onAction" }, host: { listeners: { "document:click": "onDocumentClick($event)" } }, providers: [
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.3", type: IListbox, isStandalone: true, selector: "i-listbox", inputs: { title: { classPropertyName: "title", publicName: "title", isSignal: false, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: false, isRequired: false, transformFunction: null }, actionIcon: { classPropertyName: "actionIcon", publicName: "actionIcon", isSignal: false, isRequired: false, transformFunction: null }, actionTooltip: { classPropertyName: "actionTooltip", publicName: "actionTooltip", isSignal: false, isRequired: false, transformFunction: null }, optionIcon: { classPropertyName: "optionIcon", publicName: "optionIcon", isSignal: false, isRequired: false, transformFunction: null }, options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null }, optionLabel: { classPropertyName: "optionLabel", publicName: "optionLabel", isSignal: false, isRequired: true, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: false, isRequired: false, transformFunction: null }, id: { classPropertyName: "id", publicName: "id", isSignal: false, isRequired: false, transformFunction: null }, fluid: { classPropertyName: "fluid", publicName: "fluid", isSignal: false, isRequired: false, transformFunction: null }, showClear: { classPropertyName: "showClear", publicName: "showClear", isSignal: false, isRequired: false, transformFunction: null }, filter: { classPropertyName: "filter", publicName: "filter", isSignal: false, isRequired: false, transformFunction: null }, filterBy: { classPropertyName: "filterBy", publicName: "filterBy", isSignal: false, isRequired: false, transformFunction: null }, maxSelectedLabels: { classPropertyName: "maxSelectedLabels", publicName: "maxSelectedLabels", isSignal: false, isRequired: false, transformFunction: null }, selectedItemsLabel: { classPropertyName: "selectedItemsLabel", publicName: "selectedItemsLabel", isSignal: false, isRequired: false, transformFunction: null }, errorMessages: { classPropertyName: "errorMessages", publicName: "errorMessages", isSignal: false, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: false, isRequired: false, transformFunction: null }, multiple: { classPropertyName: "multiple", publicName: "multiple", isSignal: false, isRequired: false, transformFunction: null }, readonly: { classPropertyName: "readonly", publicName: "readonly", isSignal: false, isRequired: false, transformFunction: null }, showChips: { classPropertyName: "showChips", publicName: "showChips", isSignal: false, isRequired: false, transformFunction: null }, displayAsMenu: { classPropertyName: "displayAsMenu", publicName: "displayAsMenu", isSignal: false, isRequired: false, transformFunction: null } }, outputs: { onChange: "onChange", onClear: "onClear", onAction: "onAction" }, host: { listeners: { "document:click": "onDocumentClick($event)" } }, providers: [
             {
                 provide: NG_VALUE_ACCESSOR,
                 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  #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 && hasValue()) {\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    }\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]=\"\n          !multiple && (getOptionLeftIcon(option) || getOptionRightIcon(option))\n        \"\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 (getOptionLeftIcon(option)) {\n        <i\n          [class]=\"getOptionLeftIcon(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 icon -->\n        @if (getOptionRightIcon(option)) {\n        <i\n          [class]=\"getOptionRightIcon(option)\"\n          class=\"i-listbox-option-icon i-listbox-option-icon--right\"\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{padding:4px 0}.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--right{color:var(--color-text-tertiary);margin-left:auto}.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)}\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}\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,
-            args: [{ selector: 'i-listbox', standalone: true, imports: [
-                        FormsModule,
-                        IChipsComponent,
-                        ICheckbox,
-                        IInputText,
-                        IButton
-                    ], providers: [
+            args: [{ selector: 'i-listbox', standalone: true, imports: [FormsModule, IChipsComponent, ICheckbox, IInputText, IButton], providers: [
                         {
                             provide: NG_VALUE_ACCESSOR,
                             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  #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 && hasValue()) {\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    }\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]=\"\n          !multiple && (getOptionLeftIcon(option) || getOptionRightIcon(option))\n        \"\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 (getOptionLeftIcon(option)) {\n        <i\n          [class]=\"getOptionLeftIcon(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 icon -->\n        @if (getOptionRightIcon(option)) {\n        <i\n          [class]=\"getOptionRightIcon(option)\"\n          class=\"i-listbox-option-icon i-listbox-option-icon--right\"\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{padding:4px 0}.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--right{color:var(--color-text-tertiary);margin-left:auto}.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)}\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}\n"] }]
         }], ctorParameters: () => [{ type: i0.Injector }], propDecorators: { title: [{
                 type: Input
             }], label: [{
@@ -3662,9 +3633,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.3", ngImpor
                 type: Input
             }], actionTooltip: [{
                 type: Input
-            }], optionLeftIcon: [{
-                type: Input
-            }], optionRightIcon: [{
+            }], optionIcon: [{
                 type: Input
             }], options: [{ type: i0.Input, args: [{ isSignal: true, alias: "options", required: false }] }], optionLabel: [{
                 type: Input,
@@ -3693,6 +3662,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.3", ngImpor
                 type: Input
             }], readonly: [{
                 type: Input
+            }], showChips: [{
+                type: Input
+            }], displayAsMenu: [{
+                type: Input
             }], onChange: [{
                 type: Output
             }], onClear: [{
@@ -6962,6 +6935,32 @@ class ITable {
      * Alias Input for convenience — developer can set `height` or `scrollHeight`.
      */
     height;
+    // ===== VIRTUAL SCROLL =====
+    /**
+     * Enable virtual scrolling for large datasets
+     * @default false
+     */
+    virtualScroll = false;
+    /**
+     * Item size for virtual scroll (height of each row in pixels)
+     * @default 48
+     */
+    virtualScrollItemSize = 48;
+    /**
+     * Minimum buffer size in pixels for virtual scroll
+     * @default 200
+     */
+    virtualScrollMinBufferPx = 200;
+    /**
+     * Maximum buffer size in pixels for virtual scroll
+     * @default 400
+     */
+    virtualScrollMaxBufferPx = 400;
+    /**
+     * Reference to the virtual scroll viewport
+     * @internal
+     */
+    virtualScrollViewport;
     // ===== ADDITIONAL FEATURES =====
     /**
      * Allow column resizing
@@ -7171,10 +7170,55 @@ class ITable {
                 return Number(value).toLocaleString();
             case 'boolean':
                 return value ? 'Yes' : 'No';
+            case 'icon':
+                // Icons are rendered in the template, not as text
+                return '';
             default:
                 return String(value);
         }
     }
+    /**
+     * Gets the icon class for a cell
+     * @internal
+     */
+    getCellIcon(row, column) {
+        if (column.type !== 'icon')
+            return '';
+        if (typeof column.iconClass === 'function') {
+            return column.iconClass(row);
+        }
+        else if (typeof column.iconClass === 'string') {
+            // Check if it's a field reference or a direct icon class
+            const fieldValue = this.getCellValue(row, column.iconClass);
+            return fieldValue || column.iconClass;
+        }
+        // Fallback to field value
+        return this.getCellValue(row, column.field) || '';
+    }
+    /**
+     * Gets the icon color for a cell
+     * @internal
+     */
+    getCellIconColor(row, column) {
+        if (column.type !== 'icon' || !column.iconColor)
+            return '';
+        if (typeof column.iconColor === 'function') {
+            return column.iconColor(row);
+        }
+        else if (typeof column.iconColor === 'string') {
+            // Check if it's a field reference or a direct color value
+            const fieldValue = this.getCellValue(row, column.iconColor);
+            return fieldValue || column.iconColor;
+        }
+        return '';
+    }
+    /**
+     * Checks if a column should render an icon
+     * @internal
+     */
+    isIconColumn(column) {
+        return column.type === 'icon';
+    }
     /**
      * Simple date formatter
      * @internal
@@ -7647,19 +7691,63 @@ class ITable {
     trackByColumn(index, column) {
         return column.field;
     }
+    // ===== VIRTUAL SCROLL METHODS =====
+    /**
+     * Scrolls to a specific index in the virtual scroll viewport
+     * @param index - The index to scroll to
+     * @param behavior - Scroll behavior ('auto' or 'smooth')
+     */
+    scrollToIndex(index, behavior = 'auto') {
+        if (this.virtualScroll && this.virtualScrollViewport) {
+            this.virtualScrollViewport.scrollToIndex(index, behavior);
+        }
+    }
+    /**
+     * Scrolls to a specific offset in the virtual scroll viewport
+     * @param offset - The offset in pixels to scroll to
+     * @param behavior - Scroll behavior ('auto' or 'smooth')
+     */
+    scrollToOffset(offset, behavior = 'auto') {
+        if (this.virtualScroll && this.virtualScrollViewport) {
+            this.virtualScrollViewport.scrollToOffset(offset, behavior);
+        }
+    }
+    /**
+     * Gets the total content size of the virtual scroll viewport
+     * @returns The total content size in pixels
+     */
+    getVirtualScrollContentSize() {
+        if (this.virtualScroll && this.virtualScrollViewport) {
+            return this.virtualScrollViewport.measureScrollOffset('bottom');
+        }
+        return 0;
+    }
+    /**
+     * Gets the current scroll offset of the virtual scroll viewport
+     * @returns The current scroll offset in pixels
+     */
+    getVirtualScrollOffset() {
+        if (this.virtualScroll && this.virtualScrollViewport) {
+            return this.virtualScrollViewport.measureScrollOffset();
+        }
+        return 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: { data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: false, transformFunction: null }, columns: { classPropertyName: "columns", publicName: "columns", isSignal: true, isRequired: false, transformFunction: null }, groupedData: { classPropertyName: "groupedData", publicName: "groupedData", isSignal: true, isRequired: false, transformFunction: null }, emptyMessage: { classPropertyName: "emptyMessage", publicName: "emptyMessage", isSignal: false, isRequired: false, transformFunction: null }, sortable: { classPropertyName: "sortable", publicName: "sortable", isSignal: false, isRequired: false, transformFunction: null }, sortField: { classPropertyName: "sortField", publicName: "sortField", isSignal: false, isRequired: false, transformFunction: null }, sortOrder: { classPropertyName: "sortOrder", publicName: "sortOrder", isSignal: false, isRequired: false, transformFunction: null }, filterable: { classPropertyName: "filterable", publicName: "filterable", isSignal: false, isRequired: false, transformFunction: null }, globalFilter: { classPropertyName: "globalFilter", publicName: "globalFilter", isSignal: false, isRequired: false, transformFunction: null }, filterDelay: { classPropertyName: "filterDelay", publicName: "filterDelay", isSignal: false, isRequired: false, transformFunction: null }, selectionMode: { classPropertyName: "selectionMode", publicName: "selectionMode", isSignal: false, isRequired: false, transformFunction: null }, selection: { classPropertyName: "selection", publicName: "selection", isSignal: false, isRequired: false, transformFunction: null }, dataKey: { classPropertyName: "dataKey", publicName: "dataKey", isSignal: false, isRequired: false, transformFunction: null }, showActions: { classPropertyName: "showActions", publicName: "showActions", isSignal: false, isRequired: false, transformFunction: null }, actions: { classPropertyName: "actions", publicName: "actions", isSignal: false, isRequired: false, transformFunction: null }, striped: { classPropertyName: "striped", publicName: "striped", isSignal: false, isRequired: false, transformFunction: null }, hoverable: { classPropertyName: "hoverable", publicName: "hoverable", isSignal: false, isRequired: false, transformFunction: null }, bordered: { classPropertyName: "bordered", publicName: "bordered", isSignal: false, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: false, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: false, isRequired: false, transformFunction: null }, scrollable: { classPropertyName: "scrollable", publicName: "scrollable", isSignal: false, isRequired: false, transformFunction: null }, scrollHeight: { classPropertyName: "scrollHeight", publicName: "scrollHeight", isSignal: false, isRequired: false, transformFunction: null }, height: { classPropertyName: "height", publicName: "height", isSignal: false, isRequired: false, transformFunction: null }, resizableColumns: { classPropertyName: "resizableColumns", publicName: "resizableColumns", isSignal: false, isRequired: false, transformFunction: null }, reorderableColumns: { classPropertyName: "reorderableColumns", publicName: "reorderableColumns", isSignal: false, isRequired: false, transformFunction: null }, rowExpandable: { classPropertyName: "rowExpandable", publicName: "rowExpandable", isSignal: false, isRequired: false, transformFunction: null }, downloadable: { classPropertyName: "downloadable", publicName: "downloadable", isSignal: false, isRequired: false, transformFunction: null }, downloadMode: { classPropertyName: "downloadMode", publicName: "downloadMode", isSignal: false, isRequired: false, transformFunction: null }, downloadFormat: { classPropertyName: "downloadFormat", publicName: "downloadFormat", isSignal: false, isRequired: false, transformFunction: null }, downloadFilename: { classPropertyName: "downloadFilename", publicName: "downloadFilename", isSignal: false, isRequired: false, transformFunction: null } }, outputs: { onSort: "onSort", onFilter: "onFilter", selectionChange: "selectionChange", onSelectionChange: "onSelectionChange", onRowSelect: "onRowSelect", onRowUnselect: "onRowUnselect", onAction: "onAction", onRowExpand: "onRowExpand", onRowCollapse: "onRowCollapse", onDownload: "onDownload" }, host: { listeners: { "document:mousemove": "onColumnResize($event)", "document:mouseup": "onColumnResizeEnd()" } }, ngImport: i0, template: "<div class=\"i-table-wrapper\" [ngClass]=\"getTableClasses()\">\n  <!-- Table Header with ng-content, search, and download -->\n  @if (globalFilter || downloadable) {\n  <div class=\"i-table-header\">\n    <div class=\"i-table-header-start\">\n      <ng-content select=\"[header]\"></ng-content>\n    </div>\n    <div class=\"i-table-header-end\">\n      @if (globalFilter) {\n      <div class=\"i-table-global-filter\">\n        <i-input-text\n          [useFloatLabel]=\"false\"\n          placeholder=\"Search...\"\n          [ngModel]=\"globalFilterValue()\"\n          (ngModelChange)=\"onGlobalFilterInput($event)\"\n          [fluid]=\"false\"\n          [icon]=\"'pi pi-search'\"\n        ></i-input-text>\n      </div>\n      } @if (downloadable) {\n      <div class=\"i-table-download\">\n        <i-button\n          severity=\"secondary\"\n          [text]=\"true\"\n          size=\"small\"\n          icon=\"pi pi-download\"\n          label=\"Download\"\n          (clicked)=\"handleDownload()\"\n        ></i-button>\n      </div>\n      }\n    </div>\n  </div>\n  }\n\n  <!-- Loading Overlay -->\n  @if (loading) {\n  <div class=\"i-table-loading-overlay\">\n    <i class=\"pi pi-spin pi-spinner i-table-loading-icon\"></i>\n  </div>\n  }\n\n  <!-- Scrollable Table Container -->\n  <div\n    class=\"i-table-container\"\n    [class.i-table-container--scrollable]=\"scrollable || height || scrollHeight\"\n    [style.max-height]=\"height || scrollHeight || null\"\n  >\n    <table class=\"i-table\">\n      <!-- Table Header (sticky when scrollable) -->\n      <thead>\n        <!-- Column Filters Row -->\n        @if (filterable) {\n        <tr class=\"i-table-filter-row\">\n          @if (selectionMode === 'multiple') {\n          <th class=\"i-table-selection-header\"></th>\n          } @if (rowExpandable) {\n          <th class=\"i-table-expand-header\"></th>\n          } @for (column of columns(); track trackByColumn($index, column)) {\n          @if (column.filterable !== false) {\n          <th [style.width]=\"getColumnWidth(column)\">\n            <input\n              type=\"text\"\n              class=\"i-table-column-filter\"\n              placeholder=\"Filter...\"\n              [ngModel]=\"columnFilters()[column.field] || ''\"\n              (ngModelChange)=\"onColumnFilterInput(column.field, $event)\"\n            />\n          </th>\n          } @else {\n          <th [style.width]=\"getColumnWidth(column)\"></th>\n          } } @if (showActions && actions.length > 0) {\n          <th class=\"i-table-actions-header\"></th>\n          }\n        </tr>\n        }\n\n        <!-- Column Headers Row -->\n        <tr>\n          @if (selectionMode === 'multiple') {\n          <th class=\"i-table-selection-header\">\n            <i-checkbox\n              [checked]=\"areAllRowsSelected()\"\n              [indeterminate]=\"areSomeRowsSelected()\"\n              (onChange)=\"toggleAllSelection()\"\n            ></i-checkbox>\n          </th>\n          } @if (rowExpandable) {\n          <th class=\"i-table-expand-header\"></th>\n          } @for (column of columns(); track trackByColumn($index, column)) {\n          <th\n            [style.width]=\"getColumnWidth(column)\"\n            [style.text-align]=\"column.align || 'left'\"\n            [class.i-table-sortable-column]=\"sortable && column.sortable\"\n            [class.i-table-sorted]=\"sortField === column.field\"\n            (click)=\"onSortColumn(column)\"\n          >\n            <div class=\"i-table-header-content\">\n              <span class=\"i-table-header-text\">{{ column.header }}</span>\n              @if (sortable && column.sortable) {\n              <i [class]=\"getSortIcon(column)\" class=\"i-table-sort-icon\"></i>\n              }\n            </div>\n            @if (resizableColumns) {\n            <span\n              class=\"i-table-column-resizer\"\n              (mousedown)=\"onColumnResizeStart($event, column)\"\n            ></span>\n            }\n          </th>\n          } @if (showActions && actions.length > 0) {\n          <th class=\"i-table-actions-header\">Actions</th>\n          }\n        </tr>\n      </thead>\n\n      <!-- Table Body - Grouped Mode -->\n      @if (isGroupedMode()) {\n      <tbody>\n        @for (group of groupedData(); track $index) {\n        <!-- Group Header Row -->\n        <tr class=\"i-table-group-header\" [ngClass]=\"group.styleClass\">\n          <td\n            [attr.colspan]=\"\n              (getGroupColumns(group).length || columns().length) +\n              (selectionMode === 'multiple' ? 1 : 0) +\n              (rowExpandable ? 1 : 0) +\n              (showActions && actions.length > 0 ? 1 : 0)\n            \"\n            (click)=\"toggleGroupExpansion(group.label)\"\n          >\n            <div class=\"i-table-group-header-content\">\n              <i\n                [class]=\"\n                  isGroupExpanded(group.label)\n                    ? 'pi pi-chevron-down'\n                    : 'pi pi-chevron-right'\n                \"\n                class=\"i-table-group-toggle-icon\"\n              ></i>\n              <span class=\"i-table-group-label\">{{ group.label }}</span>\n              <span class=\"i-table-group-count\">({{ group.data.length }})</span>\n            </div>\n          </td>\n        </tr>\n\n        <!-- Group Column Headers (when expanded) -->\n        @if (isGroupExpanded(group.label) && group.columns) {\n        <tr class=\"i-table-group-columns-header\">\n          @if (selectionMode === 'multiple') {\n          <th class=\"i-table-selection-header\"></th>\n          } @if (rowExpandable) {\n          <th class=\"i-table-expand-header\"></th>\n          } @for (column of getGroupColumns(group); track trackByColumn($index,\n          column)) {\n          <th\n            [style.width]=\"getColumnWidth(column)\"\n            [style.text-align]=\"column.align || 'left'\"\n          >\n            {{ column.header }}\n          </th>\n          } @if (showActions && actions.length > 0) {\n          <th class=\"i-table-actions-header\">Actions</th>\n          }\n        </tr>\n        }\n\n        <!-- Group Data Rows (when expanded) -->\n        @if (isGroupExpanded(group.label)) { @if (group.data.length === 0) {\n        <tr class=\"i-table-empty-row\">\n          <td\n            [attr.colspan]=\"\n              (getGroupColumns(group).length || columns().length) +\n              (selectionMode === 'multiple' ? 1 : 0) +\n              (rowExpandable ? 1 : 0) +\n              (showActions && actions.length > 0 ? 1 : 0)\n            \"\n          >\n            <i-no-content />\n          </td>\n        </tr>\n        } @else { @for (row of group.data; track trackByRow($index, row)) {\n        <tr\n          class=\"i-table-group-row\"\n          [class.i-table-row-odd]=\"$odd\"\n          [class.i-table-row-selected]=\"isRowSelected(row)\"\n          (click)=\"toggleRowSelection(row)\"\n        >\n          @if (selectionMode === 'multiple') {\n          <td class=\"i-table-selection-cell\">\n            <i-checkbox\n              [checked]=\"isRowSelected(row)\"\n              (onChange)=\"toggleRowSelection(row)\"\n              (click)=\"$event.stopPropagation()\"\n            ></i-checkbox>\n          </td>\n          } @if (rowExpandable) {\n          <td class=\"i-table-expand-cell\">\n            <i-button\n              severity=\"secondary\"\n              [text]=\"true\"\n              size=\"small\"\n              [icon]=\"\n                isRowExpanded(row)\n                  ? 'pi pi-chevron-down'\n                  : 'pi pi-chevron-right'\n              \"\n              (clicked)=\"toggleRowExpansion(row, $event)\"\n            ></i-button>\n          </td>\n          } @for (column of getGroupColumns(group); track trackByColumn($index,\n          column)) {\n          <td\n            [style.text-align]=\"column.align || 'left'\"\n            [style.width]=\"getColumnWidth(column)\"\n          >\n            {{ formatCellValue(getCellValue(row, column.field), column) }}\n          </td>\n          } @if (showActions && actions.length > 0) {\n          <td class=\"i-table-actions-cell\">\n            <div class=\"i-table-actions\">\n              @for (action of actions; track action.id) {\n              <i-button\n                [severity]=\"action.severity || 'secondary'\"\n                [text]=\"true\"\n                size=\"small\"\n                [icon]=\"action.icon || ''\"\n                [disabled]=\"isActionDisabled(action, row)\"\n                (clicked)=\"onActionClick(action, row, $event)\"\n              >\n                @if (action.label) {\n                {{ action.label }}\n                }\n              </i-button>\n              }\n            </div>\n          </td>\n          }\n        </tr>\n        <!-- Expanded Row Content -->\n        @if (rowExpandable && isRowExpanded(row)) {\n        <tr class=\"i-table-expanded-row\">\n          <td\n            [attr.colspan]=\"\n              (getGroupColumns(group).length || columns().length) +\n              (selectionMode === 'multiple' ? 1 : 0) +\n              1 +\n              (showActions && actions.length > 0 ? 1 : 0)\n            \"\n          >\n            <div class=\"i-table-expanded-content\">\n              <pre>{{ row | json }}</pre>\n            </div>\n          </td>\n        </tr>\n        } } } } }\n      </tbody>\n      } @else {\n      <!-- Table Body - Regular Mode -->\n      <tbody>\n        @if (processedData().length === 0) {\n        <tr class=\"i-table-empty-row\">\n          <td\n            [attr.colspan]=\"\n              columns().length +\n              (selectionMode === 'multiple' ? 1 : 0) +\n              (rowExpandable ? 1 : 0) +\n              (showActions && actions.length > 0 ? 1 : 0)\n            \"\n          >\n            <i-no-content />\n          </td>\n        </tr>\n        } @else { @for (row of processedData(); track trackByRow($index, row);\n        let rowIndex = $index) {\n        <tr\n          [class.i-table-row-odd]=\"$odd\"\n          [class.i-table-row-selected]=\"isRowSelected(row)\"\n          (click)=\"toggleRowSelection(row)\"\n        >\n          @if (selectionMode === 'multiple') {\n          <td class=\"i-table-selection-cell\">\n            <i-checkbox\n              [checked]=\"isRowSelected(row)\"\n              (onChange)=\"toggleRowSelection(row)\"\n              (click)=\"$event.stopPropagation()\"\n            ></i-checkbox>\n          </td>\n          } @if (rowExpandable) {\n          <td class=\"i-table-expand-cell\">\n            <i-button\n              severity=\"secondary\"\n              [text]=\"true\"\n              size=\"small\"\n              [icon]=\"\n                isRowExpanded(row)\n                  ? 'pi pi-chevron-down'\n                  : 'pi pi-chevron-right'\n              \"\n              (clicked)=\"toggleRowExpansion(row, $event)\"\n            ></i-button>\n          </td>\n          } @for (column of columns(); track trackByColumn($index, column)) {\n          <td\n            [style.text-align]=\"column.align || 'left'\"\n            [style.width]=\"getColumnWidth(column)\"\n          >\n            {{ formatCellValue(getCellValue(row, column.field), column) }}\n          </td>\n          } @if (showActions && actions.length > 0) {\n          <td class=\"i-table-actions-cell\">\n            <div class=\"i-table-actions\">\n              @for (action of actions; track action.id) {\n              <i-button\n                [severity]=\"action.severity || 'secondary'\"\n                [text]=\"true\"\n                size=\"small\"\n                [icon]=\"action.icon || ''\"\n                [disabled]=\"isActionDisabled(action, row)\"\n                (clicked)=\"onActionClick(action, row, $event)\"\n              >\n                @if (action.label) {\n                {{ action.label }}\n                }\n              </i-button>\n              }\n            </div>\n          </td>\n          }\n        </tr>\n        <!-- Expanded Row Content -->\n        @if (rowExpandable && isRowExpanded(row)) {\n        <tr class=\"i-table-expanded-row\">\n          <td\n            [attr.colspan]=\"\n              columns().length +\n              (selectionMode === 'multiple' ? 1 : 0) +\n              1 +\n              (showActions && actions.length > 0 ? 1 : 0)\n            \"\n          >\n            <div class=\"i-table-expanded-content\">\n              <pre>{{ row | json }}</pre>\n            </div>\n          </td>\n        </tr>\n        } } }\n      </tbody>\n      }\n    </table>\n  </div>\n</div>\n", styles: [".i-table-wrapper{color:var(--color-text-primary);background:var(--color-component-background)}.i-table-wrapper .i-table-header{background:var(--surface-section);border-bottom:1px solid var(--surface-border)}.i-table-wrapper .i-table-global-filter .i-input-text{background:var(--surface-ground)}.i-table-wrapper .i-table-loading-overlay{background:#ffffffb3}.i-table-wrapper .i-table-loading-overlay .i-table-loading-icon{color:var(--color-primary)}.i-table-wrapper table thead tr{background:var(--surface-section)}.i-table-wrapper table thead tr th{color:var(--color-text-primary);border-bottom:1px solid var(--surface-border)}.i-table-wrapper table thead tr th.i-table-sortable-column{cursor:pointer}.i-table-wrapper table thead tr th.i-table-sortable-column:hover{background:var(--surface-hover)}.i-table-wrapper table thead tr th.i-table-sorted{background:var(--surface-hover);color:var(--color-primary)}.i-table-wrapper table thead tr th .i-table-sort-icon{color:var(--color-text-secondary)}.i-table-wrapper table thead tr th.i-table-sorted .i-table-sort-icon{color:var(--color-primary)}.i-table-wrapper table thead .i-table-filter-row th{background:var(--surface-ground)}.i-table-wrapper table thead .i-table-filter-row .i-table-column-filter{border:1px solid var(--surface-border);background:var(--color-component-background);color:var(--color-text-primary)}.i-table-wrapper table thead .i-table-filter-row .i-table-column-filter:focus{border-color:var(--color-primary);box-shadow:0 2px 10px #0003;outline:none}.i-table-wrapper table thead .i-table-filter-row .i-table-column-filter::placeholder{color:var(--color-text-tertiary)}.i-table-wrapper table tbody tr{background:var(--color-component-background);border-bottom:1px solid var(--surface-border)}.i-table-wrapper table tbody tr td{color:var(--color-text-primary)}.i-table-wrapper table tbody tr.i-table-row-odd{background:var(--surface-ground)}.i-table-wrapper table tbody tr.i-table-row-selected{background:rgba(var(--color-primary-rgb, 59, 130, 246),.1)}.i-table-wrapper table tbody .i-table-expanded-row{background:var(--surface-section)}.i-table-wrapper table tbody .i-table-expanded-row .i-table-expanded-content{background:var(--surface-ground);border:1px solid var(--surface-border)}.i-table-wrapper table tbody .i-table-empty-row td{background:var(--surface-ground)}.i-table-wrapper table tbody .i-table-group-header{background:var(--surface-section);border-bottom:2px solid var(--surface-border)}.i-table-wrapper table tbody .i-table-group-header td{color:var(--color-text-primary)}.i-table-wrapper table tbody .i-table-group-header:hover{background:var(--surface-hover)}.i-table-wrapper table tbody .i-table-group-header .i-table-group-toggle-icon,.i-table-wrapper table tbody .i-table-group-header .i-table-group-count{color:var(--color-text-secondary)}.i-table-wrapper table tbody .i-table-group-columns-header{background:var(--surface-ground);border-bottom:1px solid var(--surface-border)}.i-table-wrapper table tbody .i-table-group-columns-header th{color:var(--color-text-primary);border-bottom:1px solid var(--surface-border)}.i-table-wrapper table tbody .i-table-group-row{background:var(--color-component-background)}.i-table-wrapper table tbody .i-table-group-row.i-table-row-odd{background:var(--surface-ground)}.i-table-wrapper table tbody .i-table-group-row.i-table-row-selected{background:rgba(var(--color-primary-rgb, 59, 130, 246),.1)}.i-table-wrapper.i-table--bordered table,.i-table-wrapper.i-table--bordered table th,.i-table-wrapper.i-table--bordered table td{border:1px solid var(--surface-border)}.i-table-wrapper.i-table--hoverable table tbody tr:not(.i-table-empty-row):not(.i-table-expanded-row):not(.i-table-group-header):not(.i-table-group-columns-header):hover{background:var(--surface-hover)}.i-table-wrapper.i-table--hoverable table tbody tr:not(.i-table-empty-row):not(.i-table-expanded-row):not(.i-table-group-header):not(.i-table-group-columns-header).i-table-row-selected:hover{background:rgba(var(--color-primary-rgb, 59, 130, 246),.15)}.i-table-wrapper .i-table-column-resizer{background:var(--surface-border)}.i-table-wrapper .i-table-column-resizer:hover{background:var(--color-primary)}:host-context([data-theme=dark]) .i-table-loading-overlay{background:#00000080}.i-table-wrapper{position:relative;display:block;border-radius:4px;overflow:visible}.i-table-wrapper.i-table--small table thead th{padding:8px 12px;font-size:13px}.i-table-wrapper.i-table--small table tbody td{padding:6px 12px;font-size:1em}.i-table-wrapper.i-table--small table .i-table-filter-row th{padding:4px 12px}.i-table-wrapper.i-table--large table thead th,.i-table-wrapper.i-table--large table tbody td{padding:16px 20px;font-size:16px}.i-table-wrapper.i-table--large table .i-table-filter-row th{padding:12px 20px}.i-table-wrapper.i-table--scrollable table{table-layout:fixed}.i-table-wrapper.i-table--loading{pointer-events:none;-webkit-user-select:none;user-select:none}.i-table-wrapper .i-table-header{display:flex;justify-content:space-between;align-items:center;padding:12px 16px;gap:16px}.i-table-wrapper .i-table-header .i-table-header-start{flex:0 1 auto;display:flex;align-items:center}.i-table-wrapper .i-table-header .i-table-header-end{flex:0 1 auto;display:flex;align-items:center;gap:12px;margin-left:auto}.i-table-wrapper .i-table-header .i-table-header-end .i-table-global-filter{width:250px}.i-table-wrapper .i-table-header .i-table-header-end .i-table-download{flex-shrink:0}.i-table-wrapper .i-table-loading-overlay{position:absolute;inset:0;z-index:10;display:flex;align-items:center;justify-content:center}.i-table-wrapper .i-table-loading-overlay .i-table-loading-icon{font-size:32px}.i-table-wrapper .i-table-container{overflow-x:auto}.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}.i-table-wrapper .i-table-container--scrollable thead{position:sticky;top:0;z-index:2}.i-table-wrapper table{width:100%;border-collapse:collapse;table-layout:auto}.i-table-wrapper table thead tr th{position:relative;padding:12px 16px;font-weight:600;text-align:left;white-space:nowrap;-webkit-user-select:none;user-select:none}.i-table-wrapper table thead tr th .i-table-header-content{display:flex;align-items:center;gap:8px}.i-table-wrapper table thead tr th .i-table-header-content .i-table-header-text{flex:1}.i-table-wrapper table thead tr th .i-table-sort-icon{font-size:1em;opacity:.6;transition:opacity .15s ease,color .15s ease}.i-table-wrapper table thead tr th.i-table-sortable-column{transition:background-color .15s ease}.i-table-wrapper table thead tr th.i-table-sortable-column .i-table-sort-icon{opacity:.4}.i-table-wrapper table thead tr th.i-table-sortable-column:hover .i-table-sort-icon,.i-table-wrapper table thead tr th.i-table-sortable-column.i-table-sorted .i-table-sort-icon{opacity:1}.i-table-wrapper table thead tr th:hover .i-table-column-resizer{opacity:.5}.i-table-wrapper table thead .i-table-filter-row th{padding:8px 16px}.i-table-wrapper table thead .i-table-filter-row th .i-table-column-filter{width:100%;padding:6px 10px;font-size:1em;border-radius:4px;transition:border-color .15s ease,box-shadow .15s ease}.i-table-wrapper table tbody{display:table-row-group}.i-table-wrapper table tbody tr{transition:background-color .15s ease}.i-table-wrapper table tbody tr td{padding:12px 16px;vertical-align:middle}.i-table-wrapper table tbody .i-table-empty-row td{padding:40px 16px;text-align:center}.i-table-wrapper table tbody .i-table-expanded-row td{padding:0}.i-table-wrapper table tbody .i-table-expanded-row td .i-table-expanded-content{padding:16px;margin:8px 16px;border-radius:4px}.i-table-wrapper table tbody .i-table-expanded-row td .i-table-expanded-content pre{margin:0;font-family:monospace;font-size:1em;white-space:pre-wrap;word-wrap:break-word}.i-table-wrapper table tbody .i-table-group-header td{padding:12px 16px;font-weight:600;cursor:pointer;-webkit-user-select:none;user-select:none;transition:background-color .15s ease}.i-table-wrapper table tbody .i-table-group-header td:hover{opacity:.8}.i-table-wrapper table tbody .i-table-group-header .i-table-group-header-content{display:flex;align-items:center;gap:8px}.i-table-wrapper table tbody .i-table-group-header .i-table-group-header-content .i-table-group-toggle-icon{font-size:.9em;transition:transform .15s ease}.i-table-wrapper table tbody .i-table-group-header .i-table-group-header-content .i-table-group-label{flex:1;font-size:1.1em}.i-table-wrapper table tbody .i-table-group-header .i-table-group-header-content .i-table-group-count{opacity:.7;font-size:.9em;font-weight:400}.i-table-wrapper table tbody .i-table-group-columns-header th{font-size:.95em;font-weight:600;padding:10px 16px}.i-table-wrapper table tbody .i-table-group-row td{padding-left:32px}.i-table-wrapper table tbody .i-table-group-row td:first-child{padding-left:16px}.i-table-wrapper .i-table-selection-header,.i-table-wrapper .i-table-selection-cell,.i-table-wrapper .i-table-expand-header,.i-table-wrapper .i-table-expand-cell{width:50px;text-align:center}.i-table-wrapper .i-table-actions-header,.i-table-wrapper .i-table-actions-cell{width:auto;white-space:nowrap}.i-table-wrapper .i-table-actions-header .i-table-actions,.i-table-wrapper .i-table-actions-cell .i-table-actions{display:flex;gap:4px;justify-content:flex-end}.i-table-wrapper .i-table-column-resizer{position:absolute;right:0;top:50%;transform:translateY(-50%);width:4px;height:60%;cursor:col-resize;opacity:0;transition:opacity .15s ease,background-color .15s ease}.i-table-wrapper .i-table-column-resizer:hover{opacity:1}@media(max-width:768px){.i-table-wrapper .i-table-header{padding:8px 12px;flex-wrap:wrap}.i-table-wrapper .i-table-header .i-table-header-start{flex:1 1 100%;margin-bottom:8px}.i-table-wrapper .i-table-header .i-table-header-end{flex:1 1 100%;justify-content:flex-end}.i-table-wrapper .i-table-header .i-table-header-end .i-table-global-filter{flex:1;max-width:250px}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: 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: 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: 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"] }, { kind: "component", type: ICheckbox, selector: "i-checkbox", inputs: ["label", "id", "disabled", "readonly", "size", "indeterminate", "checked"], outputs: ["onChange"] }, { kind: "component", type: NoContentComponent, selector: "i-no-content", inputs: ["icon", "message"] }, { kind: "pipe", type: i1$1.JsonPipe, name: "json" }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.3", type: ITable, isStandalone: true, selector: "i-table", inputs: { data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: false, transformFunction: null }, columns: { classPropertyName: "columns", publicName: "columns", isSignal: true, isRequired: false, transformFunction: null }, groupedData: { classPropertyName: "groupedData", publicName: "groupedData", isSignal: true, isRequired: false, transformFunction: null }, emptyMessage: { classPropertyName: "emptyMessage", publicName: "emptyMessage", isSignal: false, isRequired: false, transformFunction: null }, sortable: { classPropertyName: "sortable", publicName: "sortable", isSignal: false, isRequired: false, transformFunction: null }, sortField: { classPropertyName: "sortField", publicName: "sortField", isSignal: false, isRequired: false, transformFunction: null }, sortOrder: { classPropertyName: "sortOrder", publicName: "sortOrder", isSignal: false, isRequired: false, transformFunction: null }, filterable: { classPropertyName: "filterable", publicName: "filterable", isSignal: false, isRequired: false, transformFunction: null }, globalFilter: { classPropertyName: "globalFilter", publicName: "globalFilter", isSignal: false, isRequired: false, transformFunction: null }, filterDelay: { classPropertyName: "filterDelay", publicName: "filterDelay", isSignal: false, isRequired: false, transformFunction: null }, selectionMode: { classPropertyName: "selectionMode", publicName: "selectionMode", isSignal: false, isRequired: false, transformFunction: null }, selection: { classPropertyName: "selection", publicName: "selection", isSignal: false, isRequired: false, transformFunction: null }, dataKey: { classPropertyName: "dataKey", publicName: "dataKey", isSignal: false, isRequired: false, transformFunction: null }, showActions: { classPropertyName: "showActions", publicName: "showActions", isSignal: false, isRequired: false, transformFunction: null }, actions: { classPropertyName: "actions", publicName: "actions", isSignal: false, isRequired: false, transformFunction: null }, striped: { classPropertyName: "striped", publicName: "striped", isSignal: false, isRequired: false, transformFunction: null }, hoverable: { classPropertyName: "hoverable", publicName: "hoverable", isSignal: false, isRequired: false, transformFunction: null }, bordered: { classPropertyName: "bordered", publicName: "bordered", isSignal: false, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: false, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: false, isRequired: false, transformFunction: null }, scrollable: { classPropertyName: "scrollable", publicName: "scrollable", isSignal: false, isRequired: false, transformFunction: null }, scrollHeight: { classPropertyName: "scrollHeight", publicName: "scrollHeight", isSignal: false, isRequired: false, transformFunction: null }, height: { classPropertyName: "height", publicName: "height", isSignal: false, isRequired: false, transformFunction: null }, 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 }, reorderableColumns: { classPropertyName: "reorderableColumns", publicName: "reorderableColumns", isSignal: false, isRequired: false, transformFunction: null }, rowExpandable: { classPropertyName: "rowExpandable", publicName: "rowExpandable", isSignal: false, isRequired: false, transformFunction: null }, downloadable: { classPropertyName: "downloadable", publicName: "downloadable", isSignal: false, isRequired: false, transformFunction: null }, downloadMode: { classPropertyName: "downloadMode", publicName: "downloadMode", isSignal: false, isRequired: false, transformFunction: null }, downloadFormat: { classPropertyName: "downloadFormat", publicName: "downloadFormat", isSignal: false, isRequired: false, transformFunction: null }, downloadFilename: { classPropertyName: "downloadFilename", publicName: "downloadFilename", isSignal: false, isRequired: false, transformFunction: null } }, outputs: { onSort: "onSort", onFilter: "onFilter", selectionChange: "selectionChange", onSelectionChange: "onSelectionChange", onRowSelect: "onRowSelect", onRowUnselect: "onRowUnselect", onAction: "onAction", onRowExpand: "onRowExpand", onRowCollapse: "onRowCollapse", onDownload: "onDownload" }, host: { listeners: { "document:mousemove": "onColumnResize($event)", "document:mouseup": "onColumnResizeEnd()" } }, viewQueries: [{ propertyName: "virtualScrollViewport", first: true, predicate: CdkVirtualScrollViewport, descendants: true }], ngImport: i0, template: "<div class=\"i-table-wrapper\" [ngClass]=\"getTableClasses()\">\n  <!-- Table Header with ng-content, search, and download -->\n  @if (globalFilter || downloadable) {\n  <div class=\"i-table-header\">\n    <div class=\"i-table-header-start\">\n      <ng-content select=\"[header]\"></ng-content>\n    </div>\n    <div class=\"i-table-header-end\">\n      @if (globalFilter) {\n      <div class=\"i-table-global-filter\">\n        <i-input-text\n          [useFloatLabel]=\"false\"\n          placeholder=\"Search...\"\n          [ngModel]=\"globalFilterValue()\"\n          (ngModelChange)=\"onGlobalFilterInput($event)\"\n          [fluid]=\"false\"\n          [icon]=\"'pi pi-search'\"\n        ></i-input-text>\n      </div>\n      } @if (downloadable) {\n      <div class=\"i-table-download\">\n        <i-button\n          severity=\"secondary\"\n          [text]=\"true\"\n          size=\"small\"\n          icon=\"pi pi-download\"\n          label=\"Download\"\n          (clicked)=\"handleDownload()\"\n        ></i-button>\n      </div>\n      }\n    </div>\n  </div>\n  }\n\n  <!-- Loading Overlay -->\n  @if (loading) {\n  <div class=\"i-table-loading-overlay\">\n    <i class=\"pi pi-spin pi-spinner i-table-loading-icon\"></i>\n  </div>\n  }\n\n  <!-- Scrollable Table Container -->\n  <div\n    class=\"i-table-container\"\n    [class.i-table-container--scrollable]=\"scrollable || height || scrollHeight\"\n    [class.i-table-container--virtual-scroll]=\"virtualScroll\"\n    [style.height]=\"virtualScroll ? height || scrollHeight || '400px' : null\"\n    [style.max-height]=\"!virtualScroll ? height || scrollHeight || null : null\"\n  >\n    <!-- Virtual Scroll Mode -->\n    @if (virtualScroll) {\n    <!-- Sticky Header Table (outside viewport) -->\n    <div class=\"i-table-virtual-header\">\n      <table class=\"i-table\">\n        <thead>\n          <!-- Column Filters Row -->\n          @if (filterable) {\n          <tr class=\"i-table-filter-row\">\n            @if (selectionMode === 'multiple') {\n            <th class=\"i-table-selection-header\"></th>\n            } @if (rowExpandable) {\n            <th class=\"i-table-expand-header\"></th>\n            } @for (column of columns(); track trackByColumn($index, column)) {\n            @if (column.filterable !== false) {\n            <th [style.width]=\"getColumnWidth(column)\">\n              <input\n                type=\"text\"\n                class=\"i-table-column-filter\"\n                placeholder=\"Filter...\"\n                [ngModel]=\"columnFilters()[column.field] || ''\"\n                (ngModelChange)=\"onColumnFilterInput(column.field, $event)\"\n              />\n            </th>\n            } @else {\n            <th [style.width]=\"getColumnWidth(column)\"></th>\n            } } @if (showActions && actions.length > 0) {\n            <th class=\"i-table-actions-header\"></th>\n            }\n          </tr>\n          }\n\n          <!-- Column Headers Row -->\n          <tr>\n            @if (selectionMode === 'multiple') {\n            <th class=\"i-table-selection-header\">\n              <i-checkbox\n                [checked]=\"areAllRowsSelected()\"\n                [indeterminate]=\"areSomeRowsSelected()\"\n                (onChange)=\"toggleAllSelection()\"\n              ></i-checkbox>\n            </th>\n            } @if (rowExpandable) {\n            <th class=\"i-table-expand-header\"></th>\n            } @for (column of columns(); track trackByColumn($index, column)) {\n            <th\n              [style.width]=\"getColumnWidth(column)\"\n              [style.text-align]=\"column.align || 'left'\"\n              [class.i-table-sortable-column]=\"sortable && column.sortable\"\n              [class.i-table-sorted]=\"sortField === column.field\"\n              (click)=\"onSortColumn(column)\"\n            >\n              <div class=\"i-table-header-content\">\n                <span class=\"i-table-header-text\">{{ column.header }}</span>\n                @if (sortable && column.sortable) {\n                <i [class]=\"getSortIcon(column)\" class=\"i-table-sort-icon\"></i>\n                }\n              </div>\n              @if (resizableColumns) {\n              <span\n                class=\"i-table-column-resizer\"\n                (mousedown)=\"onColumnResizeStart($event, column)\"\n              ></span>\n              }\n            </th>\n            } @if (showActions && actions.length > 0) {\n            <th class=\"i-table-actions-header\">Actions</th>\n            }\n          </tr>\n        </thead>\n      </table>\n    </div>\n\n    <!-- Virtual Scroll Viewport (body only) -->\n    <cdk-virtual-scroll-viewport\n      [itemSize]=\"virtualScrollItemSize\"\n      [minBufferPx]=\"virtualScrollMinBufferPx\"\n      [maxBufferPx]=\"virtualScrollMaxBufferPx\"\n      class=\"i-table-virtual-viewport\"\n    >\n      <table class=\"i-table i-table-virtual-body\">\n        <tbody>\n          @if (processedData().length === 0) {\n          <tr class=\"i-table-empty-row\">\n            <td\n              [attr.colspan]=\"\n                columns().length +\n                (selectionMode === 'multiple' ? 1 : 0) +\n                (rowExpandable ? 1 : 0) +\n                (showActions && actions.length > 0 ? 1 : 0)\n              \"\n            >\n              <i-no-content />\n            </td>\n          </tr>\n          }\n          <!-- Virtual Scroll Rows -->\n          <tr\n            *cdkVirtualFor=\"\n              let row of processedData();\n              let rowIndex = index;\n              trackBy: trackByRow\n            \"\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            <td class=\"i-table-selection-cell\">\n              <i-checkbox\n                [checked]=\"isRowSelected(row)\"\n                (onChange)=\"toggleRowSelection(row)\"\n                (click)=\"$event.stopPropagation()\"\n              ></i-checkbox>\n            </td>\n            } @if (rowExpandable) {\n            <td class=\"i-table-expand-cell\">\n              <i-button\n                severity=\"secondary\"\n                [text]=\"true\"\n                size=\"small\"\n                [icon]=\"\n                  isRowExpanded(row)\n                    ? 'pi pi-chevron-down'\n                    : 'pi pi-chevron-right'\n                \"\n                (clicked)=\"toggleRowExpansion(row, $event)\"\n              ></i-button>\n            </td>\n            } @for (column of columns(); track trackByColumn($index, column)) {\n            <td\n              [style.text-align]=\"column.align || 'left'\"\n              [style.width]=\"getColumnWidth(column)\"\n            >\n              @if (isIconColumn(column)) {\n              <i\n                [class]=\"getCellIcon(row, column)\"\n                [style.color]=\"getCellIconColor(row, column)\"\n                [style.font-size]=\"column.iconSize || '1rem'\"\n              ></i>\n              } @else {\n              {{ formatCellValue(getCellValue(row, column.field), column) }}\n              }\n            </td>\n            } @if (showActions && actions.length > 0) {\n            <td class=\"i-table-actions-cell\">\n              <div class=\"i-table-actions\">\n                @for (action of actions; track action.id) {\n                <i-button\n                  [severity]=\"action.severity || 'secondary'\"\n                  [text]=\"true\"\n                  size=\"small\"\n                  [icon]=\"action.icon || ''\"\n                  [disabled]=\"isActionDisabled(action, row)\"\n                  (clicked)=\"onActionClick(action, row, $event)\"\n                >\n                  @if (action.label) {\n                  {{ action.label }}\n                  }\n                </i-button>\n                }\n              </div>\n            </td>\n            }\n          </tr>\n        </tbody>\n      </table>\n    </cdk-virtual-scroll-viewport>\n    } @else {\n    <!-- Non-Virtual Scroll Table -->\n    <table class=\"i-table\">\n      <!-- Table Header (sticky when scrollable) -->\n      <thead>\n        <!-- Column Filters Row -->\n        @if (filterable) {\n        <tr class=\"i-table-filter-row\">\n          @if (selectionMode === 'multiple') {\n          <th class=\"i-table-selection-header\"></th>\n          } @if (rowExpandable) {\n          <th class=\"i-table-expand-header\"></th>\n          } @for (column of columns(); track trackByColumn($index, column)) {\n          @if (column.filterable !== false) {\n          <th [style.width]=\"getColumnWidth(column)\">\n            <input\n              type=\"text\"\n              class=\"i-table-column-filter\"\n              placeholder=\"Filter...\"\n              [ngModel]=\"columnFilters()[column.field] || ''\"\n              (ngModelChange)=\"onColumnFilterInput(column.field, $event)\"\n            />\n          </th>\n          } @else {\n          <th [style.width]=\"getColumnWidth(column)\"></th>\n          } } @if (showActions && actions.length > 0) {\n          <th class=\"i-table-actions-header\"></th>\n          }\n        </tr>\n        }\n\n        <!-- Column Headers Row -->\n        <tr>\n          @if (selectionMode === 'multiple') {\n          <th class=\"i-table-selection-header\">\n            <i-checkbox\n              [checked]=\"areAllRowsSelected()\"\n              [indeterminate]=\"areSomeRowsSelected()\"\n              (onChange)=\"toggleAllSelection()\"\n            ></i-checkbox>\n          </th>\n          } @if (rowExpandable) {\n          <th class=\"i-table-expand-header\"></th>\n          } @for (column of columns(); track trackByColumn($index, column)) {\n          <th\n            [style.width]=\"getColumnWidth(column)\"\n            [style.text-align]=\"column.align || 'left'\"\n            [class.i-table-sortable-column]=\"sortable && column.sortable\"\n            [class.i-table-sorted]=\"sortField === column.field\"\n            (click)=\"onSortColumn(column)\"\n          >\n            <div class=\"i-table-header-content\">\n              <span class=\"i-table-header-text\">{{ column.header }}</span>\n              @if (sortable && column.sortable) {\n              <i [class]=\"getSortIcon(column)\" class=\"i-table-sort-icon\"></i>\n              }\n            </div>\n            @if (resizableColumns) {\n            <span\n              class=\"i-table-column-resizer\"\n              (mousedown)=\"onColumnResizeStart($event, column)\"\n            ></span>\n            }\n          </th>\n          } @if (showActions && actions.length > 0) {\n          <th class=\"i-table-actions-header\">Actions</th>\n          }\n        </tr>\n      </thead>\n\n      <!-- Table Body - Grouped Mode -->\n      @if (isGroupedMode()) {\n      <tbody>\n        @for (group of groupedData(); track $index) {\n        <!-- Group Header Row -->\n        <tr class=\"i-table-group-header\" [ngClass]=\"group.styleClass\">\n          <td\n            [attr.colspan]=\"\n              (getGroupColumns(group).length || columns().length) +\n              (selectionMode === 'multiple' ? 1 : 0) +\n              (rowExpandable ? 1 : 0) +\n              (showActions && actions.length > 0 ? 1 : 0)\n            \"\n            (click)=\"toggleGroupExpansion(group.label)\"\n          >\n            <div class=\"i-table-group-header-content\">\n              <i\n                [class]=\"\n                  isGroupExpanded(group.label)\n                    ? 'pi pi-chevron-down'\n                    : 'pi pi-chevron-right'\n                \"\n                class=\"i-table-group-toggle-icon\"\n              ></i>\n              <span class=\"i-table-group-label\">{{ group.label }}</span>\n              <span class=\"i-table-group-count\">({{ group.data.length }})</span>\n            </div>\n          </td>\n        </tr>\n\n        <!-- Group Column Headers (when expanded) -->\n        @if (isGroupExpanded(group.label) && group.columns) {\n        <tr class=\"i-table-group-columns-header\">\n          @if (selectionMode === 'multiple') {\n          <th class=\"i-table-selection-header\"></th>\n          } @if (rowExpandable) {\n          <th class=\"i-table-expand-header\"></th>\n          } @for (column of getGroupColumns(group); track trackByColumn($index,\n          column)) {\n          <th\n            [style.width]=\"getColumnWidth(column)\"\n            [style.text-align]=\"column.align || 'left'\"\n          >\n            {{ column.header }}\n          </th>\n          } @if (showActions && actions.length > 0) {\n          <th class=\"i-table-actions-header\">Actions</th>\n          }\n        </tr>\n        }\n\n        <!-- Group Data Rows (when expanded) -->\n        @if (isGroupExpanded(group.label)) { @if (group.data.length === 0) {\n        <tr class=\"i-table-empty-row\">\n          <td\n            [attr.colspan]=\"\n              (getGroupColumns(group).length || columns().length) +\n              (selectionMode === 'multiple' ? 1 : 0) +\n              (rowExpandable ? 1 : 0) +\n              (showActions && actions.length > 0 ? 1 : 0)\n            \"\n          >\n            <i-no-content />\n          </td>\n        </tr>\n        } @else { @for (row of group.data; track trackByRow($index, row)) {\n        <tr\n          class=\"i-table-group-row\"\n          [class.i-table-row-odd]=\"$odd\"\n          [class.i-table-row-selected]=\"isRowSelected(row)\"\n          (click)=\"toggleRowSelection(row)\"\n        >\n          @if (selectionMode === 'multiple') {\n          <td class=\"i-table-selection-cell\">\n            <i-checkbox\n              [checked]=\"isRowSelected(row)\"\n              (onChange)=\"toggleRowSelection(row)\"\n              (click)=\"$event.stopPropagation()\"\n            ></i-checkbox>\n          </td>\n          } @if (rowExpandable) {\n          <td class=\"i-table-expand-cell\">\n            <i-button\n              severity=\"secondary\"\n              [text]=\"true\"\n              size=\"small\"\n              [icon]=\"\n                isRowExpanded(row)\n                  ? 'pi pi-chevron-down'\n                  : 'pi pi-chevron-right'\n              \"\n              (clicked)=\"toggleRowExpansion(row, $event)\"\n            ></i-button>\n          </td>\n          } @for (column of getGroupColumns(group); track trackByColumn($index,\n          column)) {\n          <td\n            [style.text-align]=\"column.align || 'left'\"\n            [style.width]=\"getColumnWidth(column)\"\n          >\n            @if (isIconColumn(column)) {\n            <i\n              [class]=\"getCellIcon(row, column)\"\n              [style.color]=\"getCellIconColor(row, column)\"\n              [style.font-size]=\"column.iconSize || '1rem'\"\n            ></i>\n            } @else {\n            {{ formatCellValue(getCellValue(row, column.field), column) }}\n            }\n          </td>\n          } @if (showActions && actions.length > 0) {\n          <td class=\"i-table-actions-cell\">\n            <div class=\"i-table-actions\">\n              @for (action of actions; track action.id) {\n              <i-button\n                [severity]=\"action.severity || 'secondary'\"\n                [text]=\"true\"\n                size=\"small\"\n                [icon]=\"action.icon || ''\"\n                [disabled]=\"isActionDisabled(action, row)\"\n                (clicked)=\"onActionClick(action, row, $event)\"\n              >\n                @if (action.label) {\n                {{ action.label }}\n                }\n              </i-button>\n              }\n            </div>\n          </td>\n          }\n        </tr>\n        <!-- Expanded Row Content -->\n        @if (rowExpandable && isRowExpanded(row)) {\n        <tr class=\"i-table-expanded-row\">\n          <td\n            [attr.colspan]=\"\n              (getGroupColumns(group).length || columns().length) +\n              (selectionMode === 'multiple' ? 1 : 0) +\n              1 +\n              (showActions && actions.length > 0 ? 1 : 0)\n            \"\n          >\n            <div class=\"i-table-expanded-content\">\n              <pre>{{ row | json }}</pre>\n            </div>\n          </td>\n        </tr>\n        } } } } }\n      </tbody>\n      } @else {\n      <!-- Table Body - Regular Mode -->\n      <tbody>\n        @if (processedData().length === 0) {\n        <tr class=\"i-table-empty-row\">\n          <td\n            [attr.colspan]=\"\n              columns().length +\n              (selectionMode === 'multiple' ? 1 : 0) +\n              (rowExpandable ? 1 : 0) +\n              (showActions && actions.length > 0 ? 1 : 0)\n            \"\n          >\n            <i-no-content />\n          </td>\n        </tr>\n        } @else { @for (row of processedData(); track trackByRow($index, row);\n        let rowIndex = $index) {\n        <tr\n          [class.i-table-row-odd]=\"$odd\"\n          [class.i-table-row-selected]=\"isRowSelected(row)\"\n          (click)=\"toggleRowSelection(row)\"\n        >\n          @if (selectionMode === 'multiple') {\n          <td class=\"i-table-selection-cell\">\n            <i-checkbox\n              [checked]=\"isRowSelected(row)\"\n              (onChange)=\"toggleRowSelection(row)\"\n              (click)=\"$event.stopPropagation()\"\n            ></i-checkbox>\n          </td>\n          } @if (rowExpandable) {\n          <td class=\"i-table-expand-cell\">\n            <i-button\n              severity=\"secondary\"\n              [text]=\"true\"\n              size=\"small\"\n              [icon]=\"\n                isRowExpanded(row)\n                  ? 'pi pi-chevron-down'\n                  : 'pi pi-chevron-right'\n              \"\n              (clicked)=\"toggleRowExpansion(row, $event)\"\n            ></i-button>\n          </td>\n          } @for (column of columns(); track trackByColumn($index, column)) {\n          <td\n            [style.text-align]=\"column.align || 'left'\"\n            [style.width]=\"getColumnWidth(column)\"\n          >\n            @if (isIconColumn(column)) {\n            <i\n              [class]=\"getCellIcon(row, column)\"\n              [style.color]=\"getCellIconColor(row, column)\"\n              [style.font-size]=\"column.iconSize || '1rem'\"\n            ></i>\n            } @else {\n            {{ formatCellValue(getCellValue(row, column.field), column) }}\n            }\n          </td>\n          } @if (showActions && actions.length > 0) {\n          <td class=\"i-table-actions-cell\">\n            <div class=\"i-table-actions\">\n              @for (action of actions; track action.id) {\n              <i-button\n                [severity]=\"action.severity || 'secondary'\"\n                [text]=\"true\"\n                size=\"small\"\n                [icon]=\"action.icon || ''\"\n                [disabled]=\"isActionDisabled(action, row)\"\n                (clicked)=\"onActionClick(action, row, $event)\"\n              >\n                @if (action.label) {\n                {{ action.label }}\n                }\n              </i-button>\n              }\n            </div>\n          </td>\n          }\n        </tr>\n        <!-- Expanded Row Content -->\n        @if (rowExpandable && isRowExpanded(row)) {\n        <tr class=\"i-table-expanded-row\">\n          <td\n            [attr.colspan]=\"\n              columns().length +\n              (selectionMode === 'multiple' ? 1 : 0) +\n              1 +\n              (showActions && actions.length > 0 ? 1 : 0)\n            \"\n          >\n            <div class=\"i-table-expanded-content\">\n              <pre>{{ row | json }}</pre>\n            </div>\n          </td>\n        </tr>\n        } } }\n      </tbody>\n      }\n    </table>\n    }\n  </div>\n</div>\n", styles: [".i-table-wrapper{color:var(--color-text-primary);background:var(--color-component-background)}.i-table-wrapper .i-table-header{background:var(--surface-section);border-bottom:1px solid var(--surface-border)}.i-table-wrapper .i-table-global-filter .i-input-text{background:var(--surface-ground)}.i-table-wrapper .i-table-loading-overlay{background:#ffffffb3}.i-table-wrapper .i-table-loading-overlay .i-table-loading-icon{color:var(--color-primary)}.i-table-wrapper table thead tr{background:var(--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:var(--surface-ground);border:1px solid var(--surface-border)}.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.i-table--bordered table,.i-table-wrapper.i-table--bordered table th,.i-table-wrapper.i-table--bordered table td{border:1px solid var(--surface-border)}.i-table-wrapper.i-table--hoverable table tbody tr:not(.i-table-empty-row):not(.i-table-expanded-row):not(.i-table-group-header):not(.i-table-group-columns-header):hover{background:var(--surface-hover)}.i-table-wrapper.i-table--hoverable table tbody tr:not(.i-table-empty-row):not(.i-table-expanded-row):not(.i-table-group-header):not(.i-table-group-columns-header).i-table-row-selected:hover{background: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{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}.i-table-wrapper .i-table-container--scrollable 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;background:var(--color-surface-50)}.i-table-wrapper .i-table-container--virtual-scroll .i-table-virtual-header table{width:100%;border-collapse:collapse;table-layout:fixed}.i-table-wrapper .i-table-container--virtual-scroll .i-table-virtual-viewport{flex:1;min-height:0;width:100%}.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-body{width:100%;border-collapse:collapse;table-layout:fixed}.i-table-wrapper .i-table-container--virtual-scroll table{display:table;width:100%;border-collapse:collapse}.i-table-wrapper .i-table-container--virtual-scroll tbody{display:table-row-group}.i-table-wrapper .i-table-container--virtual-scroll tr{display:table-row;box-sizing:border-box}.i-table-wrapper .i-table-container--virtual-scroll td,.i-table-wrapper .i-table-container--virtual-scroll th{display:table-cell}.i-table-wrapper table{width:100%;border-collapse:collapse;table-layout:auto}.i-table-wrapper table thead tr th{position:relative;padding:12px 16px;font-weight:600;text-align:left;white-space:nowrap;-webkit-user-select:none;user-select:none}.i-table-wrapper table thead tr th .i-table-header-content{display:flex;align-items:center;gap:8px}.i-table-wrapper table thead tr th .i-table-header-content .i-table-header-text{flex:1}.i-table-wrapper table thead tr th .i-table-sort-icon{font-size:1em;opacity:.6;transition:opacity .15s ease,color .15s ease}.i-table-wrapper table thead tr th.i-table-sortable-column{transition:background-color .15s ease}.i-table-wrapper table thead tr th.i-table-sortable-column .i-table-sort-icon{opacity:.4}.i-table-wrapper table thead tr th.i-table-sortable-column:hover .i-table-sort-icon,.i-table-wrapper table thead tr th.i-table-sortable-column.i-table-sorted .i-table-sort-icon{opacity:1}.i-table-wrapper table thead tr th:hover .i-table-column-resizer{opacity:.5}.i-table-wrapper table thead .i-table-filter-row th{padding:8px 16px}.i-table-wrapper table thead .i-table-filter-row th .i-table-column-filter{width:100%;padding:6px 10px;font-size:1em;border-radius:4px;transition:border-color .15s ease,box-shadow .15s ease}.i-table-wrapper table tbody{display:table-row-group}.i-table-wrapper table tbody tr{transition:background-color .15s ease}.i-table-wrapper table tbody tr td{padding:12px 16px;vertical-align:middle}.i-table-wrapper table tbody .i-table-empty-row td{padding:40px 16px;text-align:center}.i-table-wrapper table tbody .i-table-expanded-row td{padding:0}.i-table-wrapper table tbody .i-table-expanded-row td .i-table-expanded-content{padding:16px;margin:8px 16px;border-radius:4px}.i-table-wrapper table tbody .i-table-expanded-row td .i-table-expanded-content pre{margin:0;font-family:monospace;font-size:1em;white-space:pre-wrap;word-wrap:break-word}.i-table-wrapper table tbody .i-table-group-header td{padding:12px 16px;font-weight:600;cursor:pointer;-webkit-user-select:none;user-select:none;transition:background-color .15s ease}.i-table-wrapper table tbody .i-table-group-header td:hover{opacity:.8}.i-table-wrapper table tbody .i-table-group-header .i-table-group-header-content{display:flex;align-items:center;gap:8px}.i-table-wrapper table tbody .i-table-group-header .i-table-group-header-content .i-table-group-toggle-icon{font-size:.9em;transition:transform .15s ease}.i-table-wrapper table tbody .i-table-group-header .i-table-group-header-content .i-table-group-label{flex:1;font-size:1.1em}.i-table-wrapper table tbody .i-table-group-header .i-table-group-header-content .i-table-group-count{opacity:.7;font-size:.9em;font-weight:400}.i-table-wrapper table tbody .i-table-group-columns-header th{font-size:.95em;font-weight:600;padding:10px 16px}.i-table-wrapper table tbody .i-table-group-row td{padding-left:32px}.i-table-wrapper table tbody .i-table-group-row td:first-child{padding-left:16px}.i-table-wrapper .i-table-selection-header,.i-table-wrapper .i-table-selection-cell,.i-table-wrapper .i-table-expand-header,.i-table-wrapper .i-table-expand-cell{width:50px;text-align:center}.i-table-wrapper .i-table-actions-header,.i-table-wrapper .i-table-actions-cell{width:auto;white-space:nowrap}.i-table-wrapper .i-table-actions-header .i-table-actions,.i-table-wrapper .i-table-actions-cell .i-table-actions{display:flex;gap:4px;justify-content:flex-end}.i-table-wrapper .i-table-column-resizer{position:absolute;right:0;top:50%;transform:translateY(-50%);width:4px;height:60%;cursor:col-resize;opacity:0;transition:opacity .15s ease,background-color .15s ease}.i-table-wrapper .i-table-column-resizer:hover{opacity:1}@media(max-width:768px){.i-table-wrapper .i-table-header{padding:8px 12px;flex-wrap:wrap}.i-table-wrapper .i-table-header .i-table-header-start{flex:1 1 100%;margin-bottom:8px}.i-table-wrapper .i-table-header .i-table-header-end{flex:1 1 100%;justify-content:flex-end}.i-table-wrapper .i-table-header .i-table-header-end .i-table-global-filter{flex:1;max-width:250px}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: 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: 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: CdkVirtualScrollViewport, selector: "cdk-virtual-scroll-viewport", inputs: ["orientation", "appendOnly"], outputs: ["scrolledIndexChange"] }, { kind: "directive", type: CdkVirtualForOf, selector: "[cdkVirtualFor][cdkVirtualForOf]", inputs: ["cdkVirtualForOf", "cdkVirtualForTrackBy", "cdkVirtualForTemplate", "cdkVirtualForTemplateCacheSize"] }, { kind: "directive", type: CdkFixedSizeVirtualScroll, selector: "cdk-virtual-scroll-viewport[itemSize]", inputs: ["itemSize", "minBufferPx", "maxBufferPx"] }, { 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"] }, { kind: "component", type: ICheckbox, selector: "i-checkbox", inputs: ["label", "id", "disabled", "readonly", "size", "indeterminate", "checked"], outputs: ["onChange"] }, { kind: "component", type: NoContentComponent, selector: "i-no-content", inputs: ["icon", "message"] }, { kind: "pipe", type: i1$1.JsonPipe, name: "json" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: ITable, decorators: [{
             type: Component,
             args: [{ selector: 'i-table', standalone: true, imports: [
                         CommonModule,
                         FormsModule,
+                        CdkVirtualScrollViewport,
+                        CdkVirtualForOf,
+                        CdkFixedSizeVirtualScroll,
                         IInputText,
                         IButton,
                         ICheckbox,
                         NoContentComponent,
-                    ], template: "<div class=\"i-table-wrapper\" [ngClass]=\"getTableClasses()\">\n  <!-- Table Header with ng-content, search, and download -->\n  @if (globalFilter || downloadable) {\n  <div class=\"i-table-header\">\n    <div class=\"i-table-header-start\">\n      <ng-content select=\"[header]\"></ng-content>\n    </div>\n    <div class=\"i-table-header-end\">\n      @if (globalFilter) {\n      <div class=\"i-table-global-filter\">\n        <i-input-text\n          [useFloatLabel]=\"false\"\n          placeholder=\"Search...\"\n          [ngModel]=\"globalFilterValue()\"\n          (ngModelChange)=\"onGlobalFilterInput($event)\"\n          [fluid]=\"false\"\n          [icon]=\"'pi pi-search'\"\n        ></i-input-text>\n      </div>\n      } @if (downloadable) {\n      <div class=\"i-table-download\">\n        <i-button\n          severity=\"secondary\"\n          [text]=\"true\"\n          size=\"small\"\n          icon=\"pi pi-download\"\n          label=\"Download\"\n          (clicked)=\"handleDownload()\"\n        ></i-button>\n      </div>\n      }\n    </div>\n  </div>\n  }\n\n  <!-- Loading Overlay -->\n  @if (loading) {\n  <div class=\"i-table-loading-overlay\">\n    <i class=\"pi pi-spin pi-spinner i-table-loading-icon\"></i>\n  </div>\n  }\n\n  <!-- Scrollable Table Container -->\n  <div\n    class=\"i-table-container\"\n    [class.i-table-container--scrollable]=\"scrollable || height || scrollHeight\"\n    [style.max-height]=\"height || scrollHeight || null\"\n  >\n    <table class=\"i-table\">\n      <!-- Table Header (sticky when scrollable) -->\n      <thead>\n        <!-- Column Filters Row -->\n        @if (filterable) {\n        <tr class=\"i-table-filter-row\">\n          @if (selectionMode === 'multiple') {\n          <th class=\"i-table-selection-header\"></th>\n          } @if (rowExpandable) {\n          <th class=\"i-table-expand-header\"></th>\n          } @for (column of columns(); track trackByColumn($index, column)) {\n          @if (column.filterable !== false) {\n          <th [style.width]=\"getColumnWidth(column)\">\n            <input\n              type=\"text\"\n              class=\"i-table-column-filter\"\n              placeholder=\"Filter...\"\n              [ngModel]=\"columnFilters()[column.field] || ''\"\n              (ngModelChange)=\"onColumnFilterInput(column.field, $event)\"\n            />\n          </th>\n          } @else {\n          <th [style.width]=\"getColumnWidth(column)\"></th>\n          } } @if (showActions && actions.length > 0) {\n          <th class=\"i-table-actions-header\"></th>\n          }\n        </tr>\n        }\n\n        <!-- Column Headers Row -->\n        <tr>\n          @if (selectionMode === 'multiple') {\n          <th class=\"i-table-selection-header\">\n            <i-checkbox\n              [checked]=\"areAllRowsSelected()\"\n              [indeterminate]=\"areSomeRowsSelected()\"\n              (onChange)=\"toggleAllSelection()\"\n            ></i-checkbox>\n          </th>\n          } @if (rowExpandable) {\n          <th class=\"i-table-expand-header\"></th>\n          } @for (column of columns(); track trackByColumn($index, column)) {\n          <th\n            [style.width]=\"getColumnWidth(column)\"\n            [style.text-align]=\"column.align || 'left'\"\n            [class.i-table-sortable-column]=\"sortable && column.sortable\"\n            [class.i-table-sorted]=\"sortField === column.field\"\n            (click)=\"onSortColumn(column)\"\n          >\n            <div class=\"i-table-header-content\">\n              <span class=\"i-table-header-text\">{{ column.header }}</span>\n              @if (sortable && column.sortable) {\n              <i [class]=\"getSortIcon(column)\" class=\"i-table-sort-icon\"></i>\n              }\n            </div>\n            @if (resizableColumns) {\n            <span\n              class=\"i-table-column-resizer\"\n              (mousedown)=\"onColumnResizeStart($event, column)\"\n            ></span>\n            }\n          </th>\n          } @if (showActions && actions.length > 0) {\n          <th class=\"i-table-actions-header\">Actions</th>\n          }\n        </tr>\n      </thead>\n\n      <!-- Table Body - Grouped Mode -->\n      @if (isGroupedMode()) {\n      <tbody>\n        @for (group of groupedData(); track $index) {\n        <!-- Group Header Row -->\n        <tr class=\"i-table-group-header\" [ngClass]=\"group.styleClass\">\n          <td\n            [attr.colspan]=\"\n              (getGroupColumns(group).length || columns().length) +\n              (selectionMode === 'multiple' ? 1 : 0) +\n              (rowExpandable ? 1 : 0) +\n              (showActions && actions.length > 0 ? 1 : 0)\n            \"\n            (click)=\"toggleGroupExpansion(group.label)\"\n          >\n            <div class=\"i-table-group-header-content\">\n              <i\n                [class]=\"\n                  isGroupExpanded(group.label)\n                    ? 'pi pi-chevron-down'\n                    : 'pi pi-chevron-right'\n                \"\n                class=\"i-table-group-toggle-icon\"\n              ></i>\n              <span class=\"i-table-group-label\">{{ group.label }}</span>\n              <span class=\"i-table-group-count\">({{ group.data.length }})</span>\n            </div>\n          </td>\n        </tr>\n\n        <!-- Group Column Headers (when expanded) -->\n        @if (isGroupExpanded(group.label) && group.columns) {\n        <tr class=\"i-table-group-columns-header\">\n          @if (selectionMode === 'multiple') {\n          <th class=\"i-table-selection-header\"></th>\n          } @if (rowExpandable) {\n          <th class=\"i-table-expand-header\"></th>\n          } @for (column of getGroupColumns(group); track trackByColumn($index,\n          column)) {\n          <th\n            [style.width]=\"getColumnWidth(column)\"\n            [style.text-align]=\"column.align || 'left'\"\n          >\n            {{ column.header }}\n          </th>\n          } @if (showActions && actions.length > 0) {\n          <th class=\"i-table-actions-header\">Actions</th>\n          }\n        </tr>\n        }\n\n        <!-- Group Data Rows (when expanded) -->\n        @if (isGroupExpanded(group.label)) { @if (group.data.length === 0) {\n        <tr class=\"i-table-empty-row\">\n          <td\n            [attr.colspan]=\"\n              (getGroupColumns(group).length || columns().length) +\n              (selectionMode === 'multiple' ? 1 : 0) +\n              (rowExpandable ? 1 : 0) +\n              (showActions && actions.length > 0 ? 1 : 0)\n            \"\n          >\n            <i-no-content />\n          </td>\n        </tr>\n        } @else { @for (row of group.data; track trackByRow($index, row)) {\n        <tr\n          class=\"i-table-group-row\"\n          [class.i-table-row-odd]=\"$odd\"\n          [class.i-table-row-selected]=\"isRowSelected(row)\"\n          (click)=\"toggleRowSelection(row)\"\n        >\n          @if (selectionMode === 'multiple') {\n          <td class=\"i-table-selection-cell\">\n            <i-checkbox\n              [checked]=\"isRowSelected(row)\"\n              (onChange)=\"toggleRowSelection(row)\"\n              (click)=\"$event.stopPropagation()\"\n            ></i-checkbox>\n          </td>\n          } @if (rowExpandable) {\n          <td class=\"i-table-expand-cell\">\n            <i-button\n              severity=\"secondary\"\n              [text]=\"true\"\n              size=\"small\"\n              [icon]=\"\n                isRowExpanded(row)\n                  ? 'pi pi-chevron-down'\n                  : 'pi pi-chevron-right'\n              \"\n              (clicked)=\"toggleRowExpansion(row, $event)\"\n            ></i-button>\n          </td>\n          } @for (column of getGroupColumns(group); track trackByColumn($index,\n          column)) {\n          <td\n            [style.text-align]=\"column.align || 'left'\"\n            [style.width]=\"getColumnWidth(column)\"\n          >\n            {{ formatCellValue(getCellValue(row, column.field), column) }}\n          </td>\n          } @if (showActions && actions.length > 0) {\n          <td class=\"i-table-actions-cell\">\n            <div class=\"i-table-actions\">\n              @for (action of actions; track action.id) {\n              <i-button\n                [severity]=\"action.severity || 'secondary'\"\n                [text]=\"true\"\n                size=\"small\"\n                [icon]=\"action.icon || ''\"\n                [disabled]=\"isActionDisabled(action, row)\"\n                (clicked)=\"onActionClick(action, row, $event)\"\n              >\n                @if (action.label) {\n                {{ action.label }}\n                }\n              </i-button>\n              }\n            </div>\n          </td>\n          }\n        </tr>\n        <!-- Expanded Row Content -->\n        @if (rowExpandable && isRowExpanded(row)) {\n        <tr class=\"i-table-expanded-row\">\n          <td\n            [attr.colspan]=\"\n              (getGroupColumns(group).length || columns().length) +\n              (selectionMode === 'multiple' ? 1 : 0) +\n              1 +\n              (showActions && actions.length > 0 ? 1 : 0)\n            \"\n          >\n            <div class=\"i-table-expanded-content\">\n              <pre>{{ row | json }}</pre>\n            </div>\n          </td>\n        </tr>\n        } } } } }\n      </tbody>\n      } @else {\n      <!-- Table Body - Regular Mode -->\n      <tbody>\n        @if (processedData().length === 0) {\n        <tr class=\"i-table-empty-row\">\n          <td\n            [attr.colspan]=\"\n              columns().length +\n              (selectionMode === 'multiple' ? 1 : 0) +\n              (rowExpandable ? 1 : 0) +\n              (showActions && actions.length > 0 ? 1 : 0)\n            \"\n          >\n            <i-no-content />\n          </td>\n        </tr>\n        } @else { @for (row of processedData(); track trackByRow($index, row);\n        let rowIndex = $index) {\n        <tr\n          [class.i-table-row-odd]=\"$odd\"\n          [class.i-table-row-selected]=\"isRowSelected(row)\"\n          (click)=\"toggleRowSelection(row)\"\n        >\n          @if (selectionMode === 'multiple') {\n          <td class=\"i-table-selection-cell\">\n            <i-checkbox\n              [checked]=\"isRowSelected(row)\"\n              (onChange)=\"toggleRowSelection(row)\"\n              (click)=\"$event.stopPropagation()\"\n            ></i-checkbox>\n          </td>\n          } @if (rowExpandable) {\n          <td class=\"i-table-expand-cell\">\n            <i-button\n              severity=\"secondary\"\n              [text]=\"true\"\n              size=\"small\"\n              [icon]=\"\n                isRowExpanded(row)\n                  ? 'pi pi-chevron-down'\n                  : 'pi pi-chevron-right'\n              \"\n              (clicked)=\"toggleRowExpansion(row, $event)\"\n            ></i-button>\n          </td>\n          } @for (column of columns(); track trackByColumn($index, column)) {\n          <td\n            [style.text-align]=\"column.align || 'left'\"\n            [style.width]=\"getColumnWidth(column)\"\n          >\n            {{ formatCellValue(getCellValue(row, column.field), column) }}\n          </td>\n          } @if (showActions && actions.length > 0) {\n          <td class=\"i-table-actions-cell\">\n            <div class=\"i-table-actions\">\n              @for (action of actions; track action.id) {\n              <i-button\n                [severity]=\"action.severity || 'secondary'\"\n                [text]=\"true\"\n                size=\"small\"\n                [icon]=\"action.icon || ''\"\n                [disabled]=\"isActionDisabled(action, row)\"\n                (clicked)=\"onActionClick(action, row, $event)\"\n              >\n                @if (action.label) {\n                {{ action.label }}\n                }\n              </i-button>\n              }\n            </div>\n          </td>\n          }\n        </tr>\n        <!-- Expanded Row Content -->\n        @if (rowExpandable && isRowExpanded(row)) {\n        <tr class=\"i-table-expanded-row\">\n          <td\n            [attr.colspan]=\"\n              columns().length +\n              (selectionMode === 'multiple' ? 1 : 0) +\n              1 +\n              (showActions && actions.length > 0 ? 1 : 0)\n            \"\n          >\n            <div class=\"i-table-expanded-content\">\n              <pre>{{ row | json }}</pre>\n            </div>\n          </td>\n        </tr>\n        } } }\n      </tbody>\n      }\n    </table>\n  </div>\n</div>\n", styles: [".i-table-wrapper{color:var(--color-text-primary);background:var(--color-component-background)}.i-table-wrapper .i-table-header{background:var(--surface-section);border-bottom:1px solid var(--surface-border)}.i-table-wrapper .i-table-global-filter .i-input-text{background:var(--surface-ground)}.i-table-wrapper .i-table-loading-overlay{background:#ffffffb3}.i-table-wrapper .i-table-loading-overlay .i-table-loading-icon{color:var(--color-primary)}.i-table-wrapper table thead tr{background:var(--surface-section)}.i-table-wrapper table thead tr th{color:var(--color-text-primary);border-bottom:1px solid var(--surface-border)}.i-table-wrapper table thead tr th.i-table-sortable-column{cursor:pointer}.i-table-wrapper table thead tr th.i-table-sortable-column:hover{background:var(--surface-hover)}.i-table-wrapper table thead tr th.i-table-sorted{background:var(--surface-hover);color:var(--color-primary)}.i-table-wrapper table thead tr th .i-table-sort-icon{color:var(--color-text-secondary)}.i-table-wrapper table thead tr th.i-table-sorted .i-table-sort-icon{color:var(--color-primary)}.i-table-wrapper table thead .i-table-filter-row th{background:var(--surface-ground)}.i-table-wrapper table thead .i-table-filter-row .i-table-column-filter{border:1px solid var(--surface-border);background:var(--color-component-background);color:var(--color-text-primary)}.i-table-wrapper table thead .i-table-filter-row .i-table-column-filter:focus{border-color:var(--color-primary);box-shadow:0 2px 10px #0003;outline:none}.i-table-wrapper table thead .i-table-filter-row .i-table-column-filter::placeholder{color:var(--color-text-tertiary)}.i-table-wrapper table tbody tr{background:var(--color-component-background);border-bottom:1px solid var(--surface-border)}.i-table-wrapper table tbody tr td{color:var(--color-text-primary)}.i-table-wrapper table tbody tr.i-table-row-odd{background:var(--surface-ground)}.i-table-wrapper table tbody tr.i-table-row-selected{background:rgba(var(--color-primary-rgb, 59, 130, 246),.1)}.i-table-wrapper table tbody .i-table-expanded-row{background:var(--surface-section)}.i-table-wrapper table tbody .i-table-expanded-row .i-table-expanded-content{background:var(--surface-ground);border:1px solid var(--surface-border)}.i-table-wrapper table tbody .i-table-empty-row td{background:var(--surface-ground)}.i-table-wrapper table tbody .i-table-group-header{background:var(--surface-section);border-bottom:2px solid var(--surface-border)}.i-table-wrapper table tbody .i-table-group-header td{color:var(--color-text-primary)}.i-table-wrapper table tbody .i-table-group-header:hover{background:var(--surface-hover)}.i-table-wrapper table tbody .i-table-group-header .i-table-group-toggle-icon,.i-table-wrapper table tbody .i-table-group-header .i-table-group-count{color:var(--color-text-secondary)}.i-table-wrapper table tbody .i-table-group-columns-header{background:var(--surface-ground);border-bottom:1px solid var(--surface-border)}.i-table-wrapper table tbody .i-table-group-columns-header th{color:var(--color-text-primary);border-bottom:1px solid var(--surface-border)}.i-table-wrapper table tbody .i-table-group-row{background:var(--color-component-background)}.i-table-wrapper table tbody .i-table-group-row.i-table-row-odd{background:var(--surface-ground)}.i-table-wrapper table tbody .i-table-group-row.i-table-row-selected{background:rgba(var(--color-primary-rgb, 59, 130, 246),.1)}.i-table-wrapper.i-table--bordered table,.i-table-wrapper.i-table--bordered table th,.i-table-wrapper.i-table--bordered table td{border:1px solid var(--surface-border)}.i-table-wrapper.i-table--hoverable table tbody tr:not(.i-table-empty-row):not(.i-table-expanded-row):not(.i-table-group-header):not(.i-table-group-columns-header):hover{background:var(--surface-hover)}.i-table-wrapper.i-table--hoverable table tbody tr:not(.i-table-empty-row):not(.i-table-expanded-row):not(.i-table-group-header):not(.i-table-group-columns-header).i-table-row-selected:hover{background:rgba(var(--color-primary-rgb, 59, 130, 246),.15)}.i-table-wrapper .i-table-column-resizer{background:var(--surface-border)}.i-table-wrapper .i-table-column-resizer:hover{background:var(--color-primary)}:host-context([data-theme=dark]) .i-table-loading-overlay{background:#00000080}.i-table-wrapper{position:relative;display:block;border-radius:4px;overflow:visible}.i-table-wrapper.i-table--small table thead th{padding:8px 12px;font-size:13px}.i-table-wrapper.i-table--small table tbody td{padding:6px 12px;font-size:1em}.i-table-wrapper.i-table--small table .i-table-filter-row th{padding:4px 12px}.i-table-wrapper.i-table--large table thead th,.i-table-wrapper.i-table--large table tbody td{padding:16px 20px;font-size:16px}.i-table-wrapper.i-table--large table .i-table-filter-row th{padding:12px 20px}.i-table-wrapper.i-table--scrollable table{table-layout:fixed}.i-table-wrapper.i-table--loading{pointer-events:none;-webkit-user-select:none;user-select:none}.i-table-wrapper .i-table-header{display:flex;justify-content:space-between;align-items:center;padding:12px 16px;gap:16px}.i-table-wrapper .i-table-header .i-table-header-start{flex:0 1 auto;display:flex;align-items:center}.i-table-wrapper .i-table-header .i-table-header-end{flex:0 1 auto;display:flex;align-items:center;gap:12px;margin-left:auto}.i-table-wrapper .i-table-header .i-table-header-end .i-table-global-filter{width:250px}.i-table-wrapper .i-table-header .i-table-header-end .i-table-download{flex-shrink:0}.i-table-wrapper .i-table-loading-overlay{position:absolute;inset:0;z-index:10;display:flex;align-items:center;justify-content:center}.i-table-wrapper .i-table-loading-overlay .i-table-loading-icon{font-size:32px}.i-table-wrapper .i-table-container{overflow-x:auto}.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}.i-table-wrapper .i-table-container--scrollable thead{position:sticky;top:0;z-index:2}.i-table-wrapper table{width:100%;border-collapse:collapse;table-layout:auto}.i-table-wrapper table thead tr th{position:relative;padding:12px 16px;font-weight:600;text-align:left;white-space:nowrap;-webkit-user-select:none;user-select:none}.i-table-wrapper table thead tr th .i-table-header-content{display:flex;align-items:center;gap:8px}.i-table-wrapper table thead tr th .i-table-header-content .i-table-header-text{flex:1}.i-table-wrapper table thead tr th .i-table-sort-icon{font-size:1em;opacity:.6;transition:opacity .15s ease,color .15s ease}.i-table-wrapper table thead tr th.i-table-sortable-column{transition:background-color .15s ease}.i-table-wrapper table thead tr th.i-table-sortable-column .i-table-sort-icon{opacity:.4}.i-table-wrapper table thead tr th.i-table-sortable-column:hover .i-table-sort-icon,.i-table-wrapper table thead tr th.i-table-sortable-column.i-table-sorted .i-table-sort-icon{opacity:1}.i-table-wrapper table thead tr th:hover .i-table-column-resizer{opacity:.5}.i-table-wrapper table thead .i-table-filter-row th{padding:8px 16px}.i-table-wrapper table thead .i-table-filter-row th .i-table-column-filter{width:100%;padding:6px 10px;font-size:1em;border-radius:4px;transition:border-color .15s ease,box-shadow .15s ease}.i-table-wrapper table tbody{display:table-row-group}.i-table-wrapper table tbody tr{transition:background-color .15s ease}.i-table-wrapper table tbody tr td{padding:12px 16px;vertical-align:middle}.i-table-wrapper table tbody .i-table-empty-row td{padding:40px 16px;text-align:center}.i-table-wrapper table tbody .i-table-expanded-row td{padding:0}.i-table-wrapper table tbody .i-table-expanded-row td .i-table-expanded-content{padding:16px;margin:8px 16px;border-radius:4px}.i-table-wrapper table tbody .i-table-expanded-row td .i-table-expanded-content pre{margin:0;font-family:monospace;font-size:1em;white-space:pre-wrap;word-wrap:break-word}.i-table-wrapper table tbody .i-table-group-header td{padding:12px 16px;font-weight:600;cursor:pointer;-webkit-user-select:none;user-select:none;transition:background-color .15s ease}.i-table-wrapper table tbody .i-table-group-header td:hover{opacity:.8}.i-table-wrapper table tbody .i-table-group-header .i-table-group-header-content{display:flex;align-items:center;gap:8px}.i-table-wrapper table tbody .i-table-group-header .i-table-group-header-content .i-table-group-toggle-icon{font-size:.9em;transition:transform .15s ease}.i-table-wrapper table tbody .i-table-group-header .i-table-group-header-content .i-table-group-label{flex:1;font-size:1.1em}.i-table-wrapper table tbody .i-table-group-header .i-table-group-header-content .i-table-group-count{opacity:.7;font-size:.9em;font-weight:400}.i-table-wrapper table tbody .i-table-group-columns-header th{font-size:.95em;font-weight:600;padding:10px 16px}.i-table-wrapper table tbody .i-table-group-row td{padding-left:32px}.i-table-wrapper table tbody .i-table-group-row td:first-child{padding-left:16px}.i-table-wrapper .i-table-selection-header,.i-table-wrapper .i-table-selection-cell,.i-table-wrapper .i-table-expand-header,.i-table-wrapper .i-table-expand-cell{width:50px;text-align:center}.i-table-wrapper .i-table-actions-header,.i-table-wrapper .i-table-actions-cell{width:auto;white-space:nowrap}.i-table-wrapper .i-table-actions-header .i-table-actions,.i-table-wrapper .i-table-actions-cell .i-table-actions{display:flex;gap:4px;justify-content:flex-end}.i-table-wrapper .i-table-column-resizer{position:absolute;right:0;top:50%;transform:translateY(-50%);width:4px;height:60%;cursor:col-resize;opacity:0;transition:opacity .15s ease,background-color .15s ease}.i-table-wrapper .i-table-column-resizer:hover{opacity:1}@media(max-width:768px){.i-table-wrapper .i-table-header{padding:8px 12px;flex-wrap:wrap}.i-table-wrapper .i-table-header .i-table-header-start{flex:1 1 100%;margin-bottom:8px}.i-table-wrapper .i-table-header .i-table-header-end{flex:1 1 100%;justify-content:flex-end}.i-table-wrapper .i-table-header .i-table-header-end .i-table-global-filter{flex:1;max-width:250px}}\n"] }]
+                    ], template: "<div class=\"i-table-wrapper\" [ngClass]=\"getTableClasses()\">\n  <!-- Table Header with ng-content, search, and download -->\n  @if (globalFilter || downloadable) {\n  <div class=\"i-table-header\">\n    <div class=\"i-table-header-start\">\n      <ng-content select=\"[header]\"></ng-content>\n    </div>\n    <div class=\"i-table-header-end\">\n      @if (globalFilter) {\n      <div class=\"i-table-global-filter\">\n        <i-input-text\n          [useFloatLabel]=\"false\"\n          placeholder=\"Search...\"\n          [ngModel]=\"globalFilterValue()\"\n          (ngModelChange)=\"onGlobalFilterInput($event)\"\n          [fluid]=\"false\"\n          [icon]=\"'pi pi-search'\"\n        ></i-input-text>\n      </div>\n      } @if (downloadable) {\n      <div class=\"i-table-download\">\n        <i-button\n          severity=\"secondary\"\n          [text]=\"true\"\n          size=\"small\"\n          icon=\"pi pi-download\"\n          label=\"Download\"\n          (clicked)=\"handleDownload()\"\n        ></i-button>\n      </div>\n      }\n    </div>\n  </div>\n  }\n\n  <!-- Loading Overlay -->\n  @if (loading) {\n  <div class=\"i-table-loading-overlay\">\n    <i class=\"pi pi-spin pi-spinner i-table-loading-icon\"></i>\n  </div>\n  }\n\n  <!-- Scrollable Table Container -->\n  <div\n    class=\"i-table-container\"\n    [class.i-table-container--scrollable]=\"scrollable || height || scrollHeight\"\n    [class.i-table-container--virtual-scroll]=\"virtualScroll\"\n    [style.height]=\"virtualScroll ? height || scrollHeight || '400px' : null\"\n    [style.max-height]=\"!virtualScroll ? height || scrollHeight || null : null\"\n  >\n    <!-- Virtual Scroll Mode -->\n    @if (virtualScroll) {\n    <!-- Sticky Header Table (outside viewport) -->\n    <div class=\"i-table-virtual-header\">\n      <table class=\"i-table\">\n        <thead>\n          <!-- Column Filters Row -->\n          @if (filterable) {\n          <tr class=\"i-table-filter-row\">\n            @if (selectionMode === 'multiple') {\n            <th class=\"i-table-selection-header\"></th>\n            } @if (rowExpandable) {\n            <th class=\"i-table-expand-header\"></th>\n            } @for (column of columns(); track trackByColumn($index, column)) {\n            @if (column.filterable !== false) {\n            <th [style.width]=\"getColumnWidth(column)\">\n              <input\n                type=\"text\"\n                class=\"i-table-column-filter\"\n                placeholder=\"Filter...\"\n                [ngModel]=\"columnFilters()[column.field] || ''\"\n                (ngModelChange)=\"onColumnFilterInput(column.field, $event)\"\n              />\n            </th>\n            } @else {\n            <th [style.width]=\"getColumnWidth(column)\"></th>\n            } } @if (showActions && actions.length > 0) {\n            <th class=\"i-table-actions-header\"></th>\n            }\n          </tr>\n          }\n\n          <!-- Column Headers Row -->\n          <tr>\n            @if (selectionMode === 'multiple') {\n            <th class=\"i-table-selection-header\">\n              <i-checkbox\n                [checked]=\"areAllRowsSelected()\"\n                [indeterminate]=\"areSomeRowsSelected()\"\n                (onChange)=\"toggleAllSelection()\"\n              ></i-checkbox>\n            </th>\n            } @if (rowExpandable) {\n            <th class=\"i-table-expand-header\"></th>\n            } @for (column of columns(); track trackByColumn($index, column)) {\n            <th\n              [style.width]=\"getColumnWidth(column)\"\n              [style.text-align]=\"column.align || 'left'\"\n              [class.i-table-sortable-column]=\"sortable && column.sortable\"\n              [class.i-table-sorted]=\"sortField === column.field\"\n              (click)=\"onSortColumn(column)\"\n            >\n              <div class=\"i-table-header-content\">\n                <span class=\"i-table-header-text\">{{ column.header }}</span>\n                @if (sortable && column.sortable) {\n                <i [class]=\"getSortIcon(column)\" class=\"i-table-sort-icon\"></i>\n                }\n              </div>\n              @if (resizableColumns) {\n              <span\n                class=\"i-table-column-resizer\"\n                (mousedown)=\"onColumnResizeStart($event, column)\"\n              ></span>\n              }\n            </th>\n            } @if (showActions && actions.length > 0) {\n            <th class=\"i-table-actions-header\">Actions</th>\n            }\n          </tr>\n        </thead>\n      </table>\n    </div>\n\n    <!-- Virtual Scroll Viewport (body only) -->\n    <cdk-virtual-scroll-viewport\n      [itemSize]=\"virtualScrollItemSize\"\n      [minBufferPx]=\"virtualScrollMinBufferPx\"\n      [maxBufferPx]=\"virtualScrollMaxBufferPx\"\n      class=\"i-table-virtual-viewport\"\n    >\n      <table class=\"i-table i-table-virtual-body\">\n        <tbody>\n          @if (processedData().length === 0) {\n          <tr class=\"i-table-empty-row\">\n            <td\n              [attr.colspan]=\"\n                columns().length +\n                (selectionMode === 'multiple' ? 1 : 0) +\n                (rowExpandable ? 1 : 0) +\n                (showActions && actions.length > 0 ? 1 : 0)\n              \"\n            >\n              <i-no-content />\n            </td>\n          </tr>\n          }\n          <!-- Virtual Scroll Rows -->\n          <tr\n            *cdkVirtualFor=\"\n              let row of processedData();\n              let rowIndex = index;\n              trackBy: trackByRow\n            \"\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            <td class=\"i-table-selection-cell\">\n              <i-checkbox\n                [checked]=\"isRowSelected(row)\"\n                (onChange)=\"toggleRowSelection(row)\"\n                (click)=\"$event.stopPropagation()\"\n              ></i-checkbox>\n            </td>\n            } @if (rowExpandable) {\n            <td class=\"i-table-expand-cell\">\n              <i-button\n                severity=\"secondary\"\n                [text]=\"true\"\n                size=\"small\"\n                [icon]=\"\n                  isRowExpanded(row)\n                    ? 'pi pi-chevron-down'\n                    : 'pi pi-chevron-right'\n                \"\n                (clicked)=\"toggleRowExpansion(row, $event)\"\n              ></i-button>\n            </td>\n            } @for (column of columns(); track trackByColumn($index, column)) {\n            <td\n              [style.text-align]=\"column.align || 'left'\"\n              [style.width]=\"getColumnWidth(column)\"\n            >\n              @if (isIconColumn(column)) {\n              <i\n                [class]=\"getCellIcon(row, column)\"\n                [style.color]=\"getCellIconColor(row, column)\"\n                [style.font-size]=\"column.iconSize || '1rem'\"\n              ></i>\n              } @else {\n              {{ formatCellValue(getCellValue(row, column.field), column) }}\n              }\n            </td>\n            } @if (showActions && actions.length > 0) {\n            <td class=\"i-table-actions-cell\">\n              <div class=\"i-table-actions\">\n                @for (action of actions; track action.id) {\n                <i-button\n                  [severity]=\"action.severity || 'secondary'\"\n                  [text]=\"true\"\n                  size=\"small\"\n                  [icon]=\"action.icon || ''\"\n                  [disabled]=\"isActionDisabled(action, row)\"\n                  (clicked)=\"onActionClick(action, row, $event)\"\n                >\n                  @if (action.label) {\n                  {{ action.label }}\n                  }\n                </i-button>\n                }\n              </div>\n            </td>\n            }\n          </tr>\n        </tbody>\n      </table>\n    </cdk-virtual-scroll-viewport>\n    } @else {\n    <!-- Non-Virtual Scroll Table -->\n    <table class=\"i-table\">\n      <!-- Table Header (sticky when scrollable) -->\n      <thead>\n        <!-- Column Filters Row -->\n        @if (filterable) {\n        <tr class=\"i-table-filter-row\">\n          @if (selectionMode === 'multiple') {\n          <th class=\"i-table-selection-header\"></th>\n          } @if (rowExpandable) {\n          <th class=\"i-table-expand-header\"></th>\n          } @for (column of columns(); track trackByColumn($index, column)) {\n          @if (column.filterable !== false) {\n          <th [style.width]=\"getColumnWidth(column)\">\n            <input\n              type=\"text\"\n              class=\"i-table-column-filter\"\n              placeholder=\"Filter...\"\n              [ngModel]=\"columnFilters()[column.field] || ''\"\n              (ngModelChange)=\"onColumnFilterInput(column.field, $event)\"\n            />\n          </th>\n          } @else {\n          <th [style.width]=\"getColumnWidth(column)\"></th>\n          } } @if (showActions && actions.length > 0) {\n          <th class=\"i-table-actions-header\"></th>\n          }\n        </tr>\n        }\n\n        <!-- Column Headers Row -->\n        <tr>\n          @if (selectionMode === 'multiple') {\n          <th class=\"i-table-selection-header\">\n            <i-checkbox\n              [checked]=\"areAllRowsSelected()\"\n              [indeterminate]=\"areSomeRowsSelected()\"\n              (onChange)=\"toggleAllSelection()\"\n            ></i-checkbox>\n          </th>\n          } @if (rowExpandable) {\n          <th class=\"i-table-expand-header\"></th>\n          } @for (column of columns(); track trackByColumn($index, column)) {\n          <th\n            [style.width]=\"getColumnWidth(column)\"\n            [style.text-align]=\"column.align || 'left'\"\n            [class.i-table-sortable-column]=\"sortable && column.sortable\"\n            [class.i-table-sorted]=\"sortField === column.field\"\n            (click)=\"onSortColumn(column)\"\n          >\n            <div class=\"i-table-header-content\">\n              <span class=\"i-table-header-text\">{{ column.header }}</span>\n              @if (sortable && column.sortable) {\n              <i [class]=\"getSortIcon(column)\" class=\"i-table-sort-icon\"></i>\n              }\n            </div>\n            @if (resizableColumns) {\n            <span\n              class=\"i-table-column-resizer\"\n              (mousedown)=\"onColumnResizeStart($event, column)\"\n            ></span>\n            }\n          </th>\n          } @if (showActions && actions.length > 0) {\n          <th class=\"i-table-actions-header\">Actions</th>\n          }\n        </tr>\n      </thead>\n\n      <!-- Table Body - Grouped Mode -->\n      @if (isGroupedMode()) {\n      <tbody>\n        @for (group of groupedData(); track $index) {\n        <!-- Group Header Row -->\n        <tr class=\"i-table-group-header\" [ngClass]=\"group.styleClass\">\n          <td\n            [attr.colspan]=\"\n              (getGroupColumns(group).length || columns().length) +\n              (selectionMode === 'multiple' ? 1 : 0) +\n              (rowExpandable ? 1 : 0) +\n              (showActions && actions.length > 0 ? 1 : 0)\n            \"\n            (click)=\"toggleGroupExpansion(group.label)\"\n          >\n            <div class=\"i-table-group-header-content\">\n              <i\n                [class]=\"\n                  isGroupExpanded(group.label)\n                    ? 'pi pi-chevron-down'\n                    : 'pi pi-chevron-right'\n                \"\n                class=\"i-table-group-toggle-icon\"\n              ></i>\n              <span class=\"i-table-group-label\">{{ group.label }}</span>\n              <span class=\"i-table-group-count\">({{ group.data.length }})</span>\n            </div>\n          </td>\n        </tr>\n\n        <!-- Group Column Headers (when expanded) -->\n        @if (isGroupExpanded(group.label) && group.columns) {\n        <tr class=\"i-table-group-columns-header\">\n          @if (selectionMode === 'multiple') {\n          <th class=\"i-table-selection-header\"></th>\n          } @if (rowExpandable) {\n          <th class=\"i-table-expand-header\"></th>\n          } @for (column of getGroupColumns(group); track trackByColumn($index,\n          column)) {\n          <th\n            [style.width]=\"getColumnWidth(column)\"\n            [style.text-align]=\"column.align || 'left'\"\n          >\n            {{ column.header }}\n          </th>\n          } @if (showActions && actions.length > 0) {\n          <th class=\"i-table-actions-header\">Actions</th>\n          }\n        </tr>\n        }\n\n        <!-- Group Data Rows (when expanded) -->\n        @if (isGroupExpanded(group.label)) { @if (group.data.length === 0) {\n        <tr class=\"i-table-empty-row\">\n          <td\n            [attr.colspan]=\"\n              (getGroupColumns(group).length || columns().length) +\n              (selectionMode === 'multiple' ? 1 : 0) +\n              (rowExpandable ? 1 : 0) +\n              (showActions && actions.length > 0 ? 1 : 0)\n            \"\n          >\n            <i-no-content />\n          </td>\n        </tr>\n        } @else { @for (row of group.data; track trackByRow($index, row)) {\n        <tr\n          class=\"i-table-group-row\"\n          [class.i-table-row-odd]=\"$odd\"\n          [class.i-table-row-selected]=\"isRowSelected(row)\"\n          (click)=\"toggleRowSelection(row)\"\n        >\n          @if (selectionMode === 'multiple') {\n          <td class=\"i-table-selection-cell\">\n            <i-checkbox\n              [checked]=\"isRowSelected(row)\"\n              (onChange)=\"toggleRowSelection(row)\"\n              (click)=\"$event.stopPropagation()\"\n            ></i-checkbox>\n          </td>\n          } @if (rowExpandable) {\n          <td class=\"i-table-expand-cell\">\n            <i-button\n              severity=\"secondary\"\n              [text]=\"true\"\n              size=\"small\"\n              [icon]=\"\n                isRowExpanded(row)\n                  ? 'pi pi-chevron-down'\n                  : 'pi pi-chevron-right'\n              \"\n              (clicked)=\"toggleRowExpansion(row, $event)\"\n            ></i-button>\n          </td>\n          } @for (column of getGroupColumns(group); track trackByColumn($index,\n          column)) {\n          <td\n            [style.text-align]=\"column.align || 'left'\"\n            [style.width]=\"getColumnWidth(column)\"\n          >\n            @if (isIconColumn(column)) {\n            <i\n              [class]=\"getCellIcon(row, column)\"\n              [style.color]=\"getCellIconColor(row, column)\"\n              [style.font-size]=\"column.iconSize || '1rem'\"\n            ></i>\n            } @else {\n            {{ formatCellValue(getCellValue(row, column.field), column) }}\n            }\n          </td>\n          } @if (showActions && actions.length > 0) {\n          <td class=\"i-table-actions-cell\">\n            <div class=\"i-table-actions\">\n              @for (action of actions; track action.id) {\n              <i-button\n                [severity]=\"action.severity || 'secondary'\"\n                [text]=\"true\"\n                size=\"small\"\n                [icon]=\"action.icon || ''\"\n                [disabled]=\"isActionDisabled(action, row)\"\n                (clicked)=\"onActionClick(action, row, $event)\"\n              >\n                @if (action.label) {\n                {{ action.label }}\n                }\n              </i-button>\n              }\n            </div>\n          </td>\n          }\n        </tr>\n        <!-- Expanded Row Content -->\n        @if (rowExpandable && isRowExpanded(row)) {\n        <tr class=\"i-table-expanded-row\">\n          <td\n            [attr.colspan]=\"\n              (getGroupColumns(group).length || columns().length) +\n              (selectionMode === 'multiple' ? 1 : 0) +\n              1 +\n              (showActions && actions.length > 0 ? 1 : 0)\n            \"\n          >\n            <div class=\"i-table-expanded-content\">\n              <pre>{{ row | json }}</pre>\n            </div>\n          </td>\n        </tr>\n        } } } } }\n      </tbody>\n      } @else {\n      <!-- Table Body - Regular Mode -->\n      <tbody>\n        @if (processedData().length === 0) {\n        <tr class=\"i-table-empty-row\">\n          <td\n            [attr.colspan]=\"\n              columns().length +\n              (selectionMode === 'multiple' ? 1 : 0) +\n              (rowExpandable ? 1 : 0) +\n              (showActions && actions.length > 0 ? 1 : 0)\n            \"\n          >\n            <i-no-content />\n          </td>\n        </tr>\n        } @else { @for (row of processedData(); track trackByRow($index, row);\n        let rowIndex = $index) {\n        <tr\n          [class.i-table-row-odd]=\"$odd\"\n          [class.i-table-row-selected]=\"isRowSelected(row)\"\n          (click)=\"toggleRowSelection(row)\"\n        >\n          @if (selectionMode === 'multiple') {\n          <td class=\"i-table-selection-cell\">\n            <i-checkbox\n              [checked]=\"isRowSelected(row)\"\n              (onChange)=\"toggleRowSelection(row)\"\n              (click)=\"$event.stopPropagation()\"\n            ></i-checkbox>\n          </td>\n          } @if (rowExpandable) {\n          <td class=\"i-table-expand-cell\">\n            <i-button\n              severity=\"secondary\"\n              [text]=\"true\"\n              size=\"small\"\n              [icon]=\"\n                isRowExpanded(row)\n                  ? 'pi pi-chevron-down'\n                  : 'pi pi-chevron-right'\n              \"\n              (clicked)=\"toggleRowExpansion(row, $event)\"\n            ></i-button>\n          </td>\n          } @for (column of columns(); track trackByColumn($index, column)) {\n          <td\n            [style.text-align]=\"column.align || 'left'\"\n            [style.width]=\"getColumnWidth(column)\"\n          >\n            @if (isIconColumn(column)) {\n            <i\n              [class]=\"getCellIcon(row, column)\"\n              [style.color]=\"getCellIconColor(row, column)\"\n              [style.font-size]=\"column.iconSize || '1rem'\"\n            ></i>\n            } @else {\n            {{ formatCellValue(getCellValue(row, column.field), column) }}\n            }\n          </td>\n          } @if (showActions && actions.length > 0) {\n          <td class=\"i-table-actions-cell\">\n            <div class=\"i-table-actions\">\n              @for (action of actions; track action.id) {\n              <i-button\n                [severity]=\"action.severity || 'secondary'\"\n                [text]=\"true\"\n                size=\"small\"\n                [icon]=\"action.icon || ''\"\n                [disabled]=\"isActionDisabled(action, row)\"\n                (clicked)=\"onActionClick(action, row, $event)\"\n              >\n                @if (action.label) {\n                {{ action.label }}\n                }\n              </i-button>\n              }\n            </div>\n          </td>\n          }\n        </tr>\n        <!-- Expanded Row Content -->\n        @if (rowExpandable && isRowExpanded(row)) {\n        <tr class=\"i-table-expanded-row\">\n          <td\n            [attr.colspan]=\"\n              columns().length +\n              (selectionMode === 'multiple' ? 1 : 0) +\n              1 +\n              (showActions && actions.length > 0 ? 1 : 0)\n            \"\n          >\n            <div class=\"i-table-expanded-content\">\n              <pre>{{ row | json }}</pre>\n            </div>\n          </td>\n        </tr>\n        } } }\n      </tbody>\n      }\n    </table>\n    }\n  </div>\n</div>\n", styles: [".i-table-wrapper{color:var(--color-text-primary);background:var(--color-component-background)}.i-table-wrapper .i-table-header{background:var(--surface-section);border-bottom:1px solid var(--surface-border)}.i-table-wrapper .i-table-global-filter .i-input-text{background:var(--surface-ground)}.i-table-wrapper .i-table-loading-overlay{background:#ffffffb3}.i-table-wrapper .i-table-loading-overlay .i-table-loading-icon{color:var(--color-primary)}.i-table-wrapper table thead tr{background:var(--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:var(--surface-ground);border:1px solid var(--surface-border)}.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.i-table--bordered table,.i-table-wrapper.i-table--bordered table th,.i-table-wrapper.i-table--bordered table td{border:1px solid var(--surface-border)}.i-table-wrapper.i-table--hoverable table tbody tr:not(.i-table-empty-row):not(.i-table-expanded-row):not(.i-table-group-header):not(.i-table-group-columns-header):hover{background:var(--surface-hover)}.i-table-wrapper.i-table--hoverable table tbody tr:not(.i-table-empty-row):not(.i-table-expanded-row):not(.i-table-group-header):not(.i-table-group-columns-header).i-table-row-selected:hover{background: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{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}.i-table-wrapper .i-table-container--scrollable 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;background:var(--color-surface-50)}.i-table-wrapper .i-table-container--virtual-scroll .i-table-virtual-header table{width:100%;border-collapse:collapse;table-layout:fixed}.i-table-wrapper .i-table-container--virtual-scroll .i-table-virtual-viewport{flex:1;min-height:0;width:100%}.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-body{width:100%;border-collapse:collapse;table-layout:fixed}.i-table-wrapper .i-table-container--virtual-scroll table{display:table;width:100%;border-collapse:collapse}.i-table-wrapper .i-table-container--virtual-scroll tbody{display:table-row-group}.i-table-wrapper .i-table-container--virtual-scroll tr{display:table-row;box-sizing:border-box}.i-table-wrapper .i-table-container--virtual-scroll td,.i-table-wrapper .i-table-container--virtual-scroll th{display:table-cell}.i-table-wrapper table{width:100%;border-collapse:collapse;table-layout:auto}.i-table-wrapper table thead tr th{position:relative;padding:12px 16px;font-weight:600;text-align:left;white-space:nowrap;-webkit-user-select:none;user-select:none}.i-table-wrapper table thead tr th .i-table-header-content{display:flex;align-items:center;gap:8px}.i-table-wrapper table thead tr th .i-table-header-content .i-table-header-text{flex:1}.i-table-wrapper table thead tr th .i-table-sort-icon{font-size:1em;opacity:.6;transition:opacity .15s ease,color .15s ease}.i-table-wrapper table thead tr th.i-table-sortable-column{transition:background-color .15s ease}.i-table-wrapper table thead tr th.i-table-sortable-column .i-table-sort-icon{opacity:.4}.i-table-wrapper table thead tr th.i-table-sortable-column:hover .i-table-sort-icon,.i-table-wrapper table thead tr th.i-table-sortable-column.i-table-sorted .i-table-sort-icon{opacity:1}.i-table-wrapper table thead tr th:hover .i-table-column-resizer{opacity:.5}.i-table-wrapper table thead .i-table-filter-row th{padding:8px 16px}.i-table-wrapper table thead .i-table-filter-row th .i-table-column-filter{width:100%;padding:6px 10px;font-size:1em;border-radius:4px;transition:border-color .15s ease,box-shadow .15s ease}.i-table-wrapper table tbody{display:table-row-group}.i-table-wrapper table tbody tr{transition:background-color .15s ease}.i-table-wrapper table tbody tr td{padding:12px 16px;vertical-align:middle}.i-table-wrapper table tbody .i-table-empty-row td{padding:40px 16px;text-align:center}.i-table-wrapper table tbody .i-table-expanded-row td{padding:0}.i-table-wrapper table tbody .i-table-expanded-row td .i-table-expanded-content{padding:16px;margin:8px 16px;border-radius:4px}.i-table-wrapper table tbody .i-table-expanded-row td .i-table-expanded-content pre{margin:0;font-family:monospace;font-size:1em;white-space:pre-wrap;word-wrap:break-word}.i-table-wrapper table tbody .i-table-group-header td{padding:12px 16px;font-weight:600;cursor:pointer;-webkit-user-select:none;user-select:none;transition:background-color .15s ease}.i-table-wrapper table tbody .i-table-group-header td:hover{opacity:.8}.i-table-wrapper table tbody .i-table-group-header .i-table-group-header-content{display:flex;align-items:center;gap:8px}.i-table-wrapper table tbody .i-table-group-header .i-table-group-header-content .i-table-group-toggle-icon{font-size:.9em;transition:transform .15s ease}.i-table-wrapper table tbody .i-table-group-header .i-table-group-header-content .i-table-group-label{flex:1;font-size:1.1em}.i-table-wrapper table tbody .i-table-group-header .i-table-group-header-content .i-table-group-count{opacity:.7;font-size:.9em;font-weight:400}.i-table-wrapper table tbody .i-table-group-columns-header th{font-size:.95em;font-weight:600;padding:10px 16px}.i-table-wrapper table tbody .i-table-group-row td{padding-left:32px}.i-table-wrapper table tbody .i-table-group-row td:first-child{padding-left:16px}.i-table-wrapper .i-table-selection-header,.i-table-wrapper .i-table-selection-cell,.i-table-wrapper .i-table-expand-header,.i-table-wrapper .i-table-expand-cell{width:50px;text-align:center}.i-table-wrapper .i-table-actions-header,.i-table-wrapper .i-table-actions-cell{width:auto;white-space:nowrap}.i-table-wrapper .i-table-actions-header .i-table-actions,.i-table-wrapper .i-table-actions-cell .i-table-actions{display:flex;gap:4px;justify-content:flex-end}.i-table-wrapper .i-table-column-resizer{position:absolute;right:0;top:50%;transform:translateY(-50%);width:4px;height:60%;cursor:col-resize;opacity:0;transition:opacity .15s ease,background-color .15s ease}.i-table-wrapper .i-table-column-resizer:hover{opacity:1}@media(max-width:768px){.i-table-wrapper .i-table-header{padding:8px 12px;flex-wrap:wrap}.i-table-wrapper .i-table-header .i-table-header-start{flex:1 1 100%;margin-bottom:8px}.i-table-wrapper .i-table-header .i-table-header-end{flex:1 1 100%;justify-content:flex-end}.i-table-wrapper .i-table-header .i-table-header-end .i-table-global-filter{flex:1;max-width:250px}}\n"] }]
         }], ctorParameters: () => [{ type: i0.ElementRef }], propDecorators: { data: [{ type: i0.Input, args: [{ isSignal: true, alias: "data", required: false }] }], columns: [{ type: i0.Input, args: [{ isSignal: true, alias: "columns", required: false }] }], groupedData: [{ type: i0.Input, args: [{ isSignal: true, alias: "groupedData", required: false }] }], emptyMessage: [{
                 type: Input
             }], sortable: [{
@@ -7714,6 +7802,17 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.3", ngImpor
                 type: Input
             }], height: [{
                 type: Input
+            }], virtualScroll: [{
+                type: Input
+            }], virtualScrollItemSize: [{
+                type: Input
+            }], virtualScrollMinBufferPx: [{
+                type: Input
+            }], virtualScrollMaxBufferPx: [{
+                type: Input
+            }], virtualScrollViewport: [{
+                type: ViewChild,
+                args: [CdkVirtualScrollViewport]
             }], resizableColumns: [{
                 type: Input
             }], reorderableColumns: [{
@@ -8820,5 +8919,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.3", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { AbstractDialog, ConfirmationDialogComponent, ConfirmationDialogService, DataUpdateEventService, DialogService, EmptyStateComponent, IAccordion, IAccordionList, IButton, ICalendar, ICard, IChart, ICheckbox, IChip, IChipsComponent, IDialog, IDialogActions, IDialogBase, IInputText, IListbox, IMessage, IMultiSelect, IOverlayPanel, IPanel, IPlaceholder, IProgressSpinner, IRadioButton, ISelect, ITabPanel, ITable, ITabs, ITreeView, IWhisper, LayoutComponent, LayoutService, LocalStorageColorSchemeKey, LocalStorageThemeKey, MenuComponent, NoContentComponent, SeoService, SidebarComponent, StructuredDataService, TooltipComponent, TooltipDirective, TopbarComponent, UniqueComponentId, WhisperService, ZIndexUtils, lastId };
+export { AbstractDialog, ConfirmationDialogComponent, ConfirmationDialogService, DataUpdateEventService, DialogService, EmptyStateComponent, IAccordion, IAccordionList, IButton, ICalendar, ICard, IChart, ICheckbox, IChip, IChipsComponent, IDialog, IDialogActions, IDialogBase, IInputText, IListbox, IMessage, IMultiSelect, IOverlayPanel, IPanel, IPlaceholder, IProgressSpinner, IRadioButton, ISelect, ITabPanel, ITable, ITabs, ITreeView, IWhisper, LayoutComponent, LayoutService, LocalStorageColorSchemeKey, MenuComponent, NoContentComponent, SeoService, SidebarComponent, StructuredDataService, TooltipComponent, TooltipDirective, TopbarComponent, UniqueComponentId, WhisperService, ZIndexUtils, lastId };
 //# sourceMappingURL=integra-ng.mjs.map