invensys-ng 21.3.6 → 21.3.8

package/fesm2022/invensys-ng.mjs

@@ -97,11 +97,11 @@ class IAccordion {
         this.onToggle.emit(this.expanded);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: IAccordion, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.12", type: IAccordion, isStandalone: true, selector: "i-accordion", inputs: { header: "header", expanded: "expanded", disabled: "disabled", icon: "icon" }, outputs: { expandedChange: "expandedChange", onToggle: "onToggle" }, ngImport: i0, template: "<div\n  class=\"i-accordion\"\n  [class.expanded]=\"expanded\"\n  [class.disabled]=\"disabled\"\n  [attr.id]=\"componentId\"\n>\n  <div\n    class=\"i-accordion-header\"\n    (click)=\"toggle()\"\n    [attr.aria-expanded]=\"expanded\"\n    [attr.aria-disabled]=\"disabled\"\n    role=\"button\"\n    tabindex=\"0\"\n    (keydown.enter)=\"toggle()\"\n    (keydown.space)=\"toggle(); $event.preventDefault()\"\n  >\n    <div class=\"i-accordion-header-content\">\n      @if (icon) {\n      <i [class]=\"icon\" class=\"i-accordion-icon\"></i>\n      }\n      <span class=\"i-accordion-title\">{{ header }}</span>\n    </div>\n    <i class=\"pi i-accordion-toggle-icon\" [class.pi-chevron-down]=\"!expanded\" [class.pi-chevron-up]=\"expanded\"></i>\n  </div>\n  <div class=\"i-accordion-content-wrapper\" [class.collapsed]=\"!expanded\">\n    <div class=\"i-accordion-content\">\n      <ng-content></ng-content>\n    </div>\n  </div>\n</div>\n", styles: [".i-accordion{background:var(--surface-card);color:var(--color-text-primary);border:1px solid var(--surface-border)}.i-accordion .i-accordion-header{color:var(--color-text-primary)}.i-accordion .i-accordion-header:hover:not(.disabled .i-accordion .i-accordion-header){background:var(--surface-hover)}.i-accordion .i-accordion-header .i-accordion-icon{color:var(--color-primary)}.i-accordion .i-accordion-header .i-accordion-toggle-icon{color:var(--color-text-secondary)}.i-accordion .i-accordion-content{color:var(--color-text-primary)}.i-accordion.disabled .i-accordion-header{color:var(--color-text-disabled);cursor:not-allowed}.i-accordion.disabled .i-accordion-header .i-accordion-icon,.i-accordion.disabled .i-accordion-header .i-accordion-toggle-icon{color:var(--color-text-disabled)}.i-accordion{border-radius:8px;overflow:visible}.i-accordion.expanded .i-accordion-header{border-radius:8px 8px 0 0}.i-accordion:not(.expanded) .i-accordion-header{border-radius:8px}.i-accordion.disabled{opacity:.6}.i-accordion.disabled .i-accordion-header{cursor:not-allowed}.i-accordion .i-accordion-header{display:flex;flex-direction:row;justify-content:space-between;align-items:center;padding:16px;cursor:pointer;-webkit-user-select:none;user-select:none;transition:background-color .2s ease}.i-accordion .i-accordion-header .i-accordion-header-content{display:flex;align-items:center;gap:12px}.i-accordion .i-accordion-header .i-accordion-header-content .i-accordion-icon{font-size:1em}.i-accordion .i-accordion-header .i-accordion-header-content .i-accordion-title{font-weight:600;font-size:1em}.i-accordion .i-accordion-header .i-accordion-toggle-icon{font-size:1em;transition:transform .2s ease}.i-accordion .i-accordion-content-wrapper{transition:max-height .3s ease,opacity .2s ease;max-height:1000px;opacity:1;border-radius:0 0 8px 8px}.i-accordion .i-accordion-content-wrapper.collapsed{max-height:0;opacity:0;overflow:hidden}.i-accordion .i-accordion-content-wrapper .i-accordion-content{padding:0 16px 16px}\n"] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.12", type: IAccordion, isStandalone: true, selector: "i-accordion", inputs: { header: "header", expanded: "expanded", disabled: "disabled", icon: "icon" }, outputs: { expandedChange: "expandedChange", onToggle: "onToggle" }, ngImport: i0, template: "<div\n  class=\"i-accordion\"\n  [class.expanded]=\"expanded\"\n  [class.disabled]=\"disabled\"\n  [attr.id]=\"componentId\"\n>\n  <div\n    class=\"i-accordion-header\"\n    (click)=\"toggle()\"\n    [attr.aria-expanded]=\"expanded\"\n    [attr.aria-disabled]=\"disabled\"\n    role=\"button\"\n    tabindex=\"0\"\n    (keydown.enter)=\"toggle()\"\n    (keydown.space)=\"toggle(); $event.preventDefault()\"\n  >\n    <div class=\"i-accordion-header-content\">\n      @if (icon) {\n        <i [class]=\"icon\" class=\"i-accordion-icon\"></i>\n      }\n      <span class=\"i-accordion-title\">{{ header }}</span>\n    </div>\n    <i\n      class=\"pi i-accordion-toggle-icon\"\n      [class.pi-chevron-down]=\"!expanded\"\n      [class.pi-chevron-up]=\"expanded\"\n    ></i>\n  </div>\n  <div class=\"i-accordion-content-wrapper\" [class.collapsed]=\"!expanded\">\n    <div class=\"i-accordion-content\">\n      <ng-content></ng-content>\n    </div>\n  </div>\n</div>\n", styles: [".i-accordion{background:var(--surface-card);color:var(--color-text-primary);border:1px solid var(--surface-border)}.i-accordion .i-accordion-header{color:var(--color-text-primary)}.i-accordion .i-accordion-header:hover:not(.disabled .i-accordion .i-accordion-header){background:var(--surface-hover)}.i-accordion .i-accordion-header .i-accordion-icon{color:var(--color-primary)}.i-accordion .i-accordion-header .i-accordion-toggle-icon{color:var(--color-text-secondary)}.i-accordion .i-accordion-content{color:var(--color-text-primary)}.i-accordion.disabled .i-accordion-header{color:var(--color-text-disabled);cursor:not-allowed}.i-accordion.disabled .i-accordion-header .i-accordion-icon,.i-accordion.disabled .i-accordion-header .i-accordion-toggle-icon{color:var(--color-text-disabled)}.i-accordion{border-radius:8px;overflow:visible}.i-accordion.expanded .i-accordion-header{border-radius:8px 8px 0 0}.i-accordion:not(.expanded) .i-accordion-header{border-radius:8px}.i-accordion.disabled{opacity:.6}.i-accordion.disabled .i-accordion-header{cursor:not-allowed}.i-accordion .i-accordion-header{display:flex;flex-direction:row;justify-content:space-between;align-items:center;padding:16px;cursor:pointer;-webkit-user-select:none;user-select:none;transition:background-color .2s ease}.i-accordion .i-accordion-header .i-accordion-header-content{display:flex;align-items:center;gap:12px}.i-accordion .i-accordion-header .i-accordion-header-content .i-accordion-icon{font-size:1em}.i-accordion .i-accordion-header .i-accordion-header-content .i-accordion-title{font-weight:600;font-size:1em}.i-accordion .i-accordion-header .i-accordion-toggle-icon{font-size:1em;transition:transform .2s ease}.i-accordion .i-accordion-content-wrapper{transition:max-height .3s ease,opacity .2s ease;max-height:1000px;opacity:1;border-radius:0 0 8px 8px}.i-accordion .i-accordion-content-wrapper.collapsed{max-height:0;opacity:0;overflow:hidden}.i-accordion .i-accordion-content-wrapper .i-accordion-content{padding:0 16px 16px}\n"] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: IAccordion, decorators: [{
             type: Component,
-            args: [{ selector: 'i-accordion', template: "<div\n  class=\"i-accordion\"\n  [class.expanded]=\"expanded\"\n  [class.disabled]=\"disabled\"\n  [attr.id]=\"componentId\"\n>\n  <div\n    class=\"i-accordion-header\"\n    (click)=\"toggle()\"\n    [attr.aria-expanded]=\"expanded\"\n    [attr.aria-disabled]=\"disabled\"\n    role=\"button\"\n    tabindex=\"0\"\n    (keydown.enter)=\"toggle()\"\n    (keydown.space)=\"toggle(); $event.preventDefault()\"\n  >\n    <div class=\"i-accordion-header-content\">\n      @if (icon) {\n      <i [class]=\"icon\" class=\"i-accordion-icon\"></i>\n      }\n      <span class=\"i-accordion-title\">{{ header }}</span>\n    </div>\n    <i class=\"pi i-accordion-toggle-icon\" [class.pi-chevron-down]=\"!expanded\" [class.pi-chevron-up]=\"expanded\"></i>\n  </div>\n  <div class=\"i-accordion-content-wrapper\" [class.collapsed]=\"!expanded\">\n    <div class=\"i-accordion-content\">\n      <ng-content></ng-content>\n    </div>\n  </div>\n</div>\n", styles: [".i-accordion{background:var(--surface-card);color:var(--color-text-primary);border:1px solid var(--surface-border)}.i-accordion .i-accordion-header{color:var(--color-text-primary)}.i-accordion .i-accordion-header:hover:not(.disabled .i-accordion .i-accordion-header){background:var(--surface-hover)}.i-accordion .i-accordion-header .i-accordion-icon{color:var(--color-primary)}.i-accordion .i-accordion-header .i-accordion-toggle-icon{color:var(--color-text-secondary)}.i-accordion .i-accordion-content{color:var(--color-text-primary)}.i-accordion.disabled .i-accordion-header{color:var(--color-text-disabled);cursor:not-allowed}.i-accordion.disabled .i-accordion-header .i-accordion-icon,.i-accordion.disabled .i-accordion-header .i-accordion-toggle-icon{color:var(--color-text-disabled)}.i-accordion{border-radius:8px;overflow:visible}.i-accordion.expanded .i-accordion-header{border-radius:8px 8px 0 0}.i-accordion:not(.expanded) .i-accordion-header{border-radius:8px}.i-accordion.disabled{opacity:.6}.i-accordion.disabled .i-accordion-header{cursor:not-allowed}.i-accordion .i-accordion-header{display:flex;flex-direction:row;justify-content:space-between;align-items:center;padding:16px;cursor:pointer;-webkit-user-select:none;user-select:none;transition:background-color .2s ease}.i-accordion .i-accordion-header .i-accordion-header-content{display:flex;align-items:center;gap:12px}.i-accordion .i-accordion-header .i-accordion-header-content .i-accordion-icon{font-size:1em}.i-accordion .i-accordion-header .i-accordion-header-content .i-accordion-title{font-weight:600;font-size:1em}.i-accordion .i-accordion-header .i-accordion-toggle-icon{font-size:1em;transition:transform .2s ease}.i-accordion .i-accordion-content-wrapper{transition:max-height .3s ease,opacity .2s ease;max-height:1000px;opacity:1;border-radius:0 0 8px 8px}.i-accordion .i-accordion-content-wrapper.collapsed{max-height:0;opacity:0;overflow:hidden}.i-accordion .i-accordion-content-wrapper .i-accordion-content{padding:0 16px 16px}\n"] }]
+            args: [{ selector: 'i-accordion', template: "<div\n  class=\"i-accordion\"\n  [class.expanded]=\"expanded\"\n  [class.disabled]=\"disabled\"\n  [attr.id]=\"componentId\"\n>\n  <div\n    class=\"i-accordion-header\"\n    (click)=\"toggle()\"\n    [attr.aria-expanded]=\"expanded\"\n    [attr.aria-disabled]=\"disabled\"\n    role=\"button\"\n    tabindex=\"0\"\n    (keydown.enter)=\"toggle()\"\n    (keydown.space)=\"toggle(); $event.preventDefault()\"\n  >\n    <div class=\"i-accordion-header-content\">\n      @if (icon) {\n        <i [class]=\"icon\" class=\"i-accordion-icon\"></i>\n      }\n      <span class=\"i-accordion-title\">{{ header }}</span>\n    </div>\n    <i\n      class=\"pi i-accordion-toggle-icon\"\n      [class.pi-chevron-down]=\"!expanded\"\n      [class.pi-chevron-up]=\"expanded\"\n    ></i>\n  </div>\n  <div class=\"i-accordion-content-wrapper\" [class.collapsed]=\"!expanded\">\n    <div class=\"i-accordion-content\">\n      <ng-content></ng-content>\n    </div>\n  </div>\n</div>\n", styles: [".i-accordion{background:var(--surface-card);color:var(--color-text-primary);border:1px solid var(--surface-border)}.i-accordion .i-accordion-header{color:var(--color-text-primary)}.i-accordion .i-accordion-header:hover:not(.disabled .i-accordion .i-accordion-header){background:var(--surface-hover)}.i-accordion .i-accordion-header .i-accordion-icon{color:var(--color-primary)}.i-accordion .i-accordion-header .i-accordion-toggle-icon{color:var(--color-text-secondary)}.i-accordion .i-accordion-content{color:var(--color-text-primary)}.i-accordion.disabled .i-accordion-header{color:var(--color-text-disabled);cursor:not-allowed}.i-accordion.disabled .i-accordion-header .i-accordion-icon,.i-accordion.disabled .i-accordion-header .i-accordion-toggle-icon{color:var(--color-text-disabled)}.i-accordion{border-radius:8px;overflow:visible}.i-accordion.expanded .i-accordion-header{border-radius:8px 8px 0 0}.i-accordion:not(.expanded) .i-accordion-header{border-radius:8px}.i-accordion.disabled{opacity:.6}.i-accordion.disabled .i-accordion-header{cursor:not-allowed}.i-accordion .i-accordion-header{display:flex;flex-direction:row;justify-content:space-between;align-items:center;padding:16px;cursor:pointer;-webkit-user-select:none;user-select:none;transition:background-color .2s ease}.i-accordion .i-accordion-header .i-accordion-header-content{display:flex;align-items:center;gap:12px}.i-accordion .i-accordion-header .i-accordion-header-content .i-accordion-icon{font-size:1em}.i-accordion .i-accordion-header .i-accordion-header-content .i-accordion-title{font-weight:600;font-size:1em}.i-accordion .i-accordion-header .i-accordion-toggle-icon{font-size:1em;transition:transform .2s ease}.i-accordion .i-accordion-content-wrapper{transition:max-height .3s ease,opacity .2s ease;max-height:1000px;opacity:1;border-radius:0 0 8px 8px}.i-accordion .i-accordion-content-wrapper.collapsed{max-height:0;opacity:0;overflow:hidden}.i-accordion .i-accordion-content-wrapper .i-accordion-content{padding:0 16px 16px}\n"] }]
         }], propDecorators: { header: [{
                 type: Input
             }], expanded: [{
@@ -400,11 +400,11 @@ class IButton {
         this.buttonElement?.nativeElement?.focus();
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.12", 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.2.12", 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"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.12", 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\n          [ngClass]=\"[icon, 'i-button__icon', iconOnly ? 'icon-only' : '']\"\n        ></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}.i-button:disabled{background:var(--color-disabled-background);border-color:var(--color-disabled-border);color:var(--color-text-disabled);box-shadow:none;cursor:not-allowed}.i-button.i-button--outlined:disabled{background:transparent;border-color:var(--color-disabled-border)!important;color:var(--color-text-disabled)}.i-button.i-button--text:disabled{background:transparent;border-color:transparent;color:var(--color-text-disabled)}: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:1}.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.2.12", 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;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"] }]
+            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\n          [ngClass]=\"[icon, 'i-button__icon', iconOnly ? 'icon-only' : '']\"\n        ></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}.i-button:disabled{background:var(--color-disabled-background);border-color:var(--color-disabled-border);color:var(--color-text-disabled);box-shadow:none;cursor:not-allowed}.i-button.i-button--outlined:disabled{background:transparent;border-color:var(--color-disabled-border)!important;color:var(--color-text-disabled)}.i-button.i-button--text:disabled{background:transparent;border-color:transparent;color:var(--color-text-disabled)}: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:1}.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']
@@ -1536,7 +1536,7 @@ class ICalendar {
                 useExisting: forwardRef(() => ICalendar),
                 multi: true,
             },
-        ], viewQueries: [{ propertyName: "calendarPanel", first: true, predicate: ["calendarPanel"], descendants: true, read: ElementRef }], ngImport: i0, template: "<div class=\"i-calendar-container\" [attr.id]=\"componentId\">\n  <!-- Input field using i-input-text component -->\n  <div class=\"i-calendar-input-wrapper\" (click)=\"toggleCalendar()\">\n    <i-input-text\n      [id]=\"componentId\"\n      [label]=\"label\"\n      [placeholder]=\"placeholder\"\n      [disabled]=\"disabled\"\n      [readonly]=\"true\"\n      [icon]=\"icon\"\n      [useFloatLabel]=\"useFloatLabel\"\n      [(ngModel)]=\"inputDisplayValue\"\n      [forceFloated]=\"!!(inputDisplayValue && inputDisplayValue.length > 0)\"\n    />\n  </div>\n\n  <!-- Calendar Panel -->\n  @if (isOpen) {\n  <div\n    #calendarPanel\n    class=\"i-calendar-panel\"\n    (click)=\"$event.stopPropagation()\"\n  >\n    <!-- Header -->\n    <div class=\"i-calendar-header\">\n      <i-button\n        [size]=\"'small'\"\n        [severity]=\"'primary'\"\n        [text]=\"true\"\n        icon=\"pi pi-chevron-left\"\n        (clicked)=\"navigatePrevious()\"\n        aria-label=\"Previous\"\n      >\n      </i-button>\n\n      <div class=\"i-calendar-header-title\">\n        @if (currentView === 'date') {\n        <i-button\n          [severity]=\"'contrast'\"\n          [text]=\"true\"\n          (clicked)=\"showMonthView()\"\n        >\n          {{ getHeaderTitle() }}\n        </i-button>\n        } @else if (currentView === 'month') {\n        <i-button\n          [severity]=\"'contrast'\"\n          [text]=\"true\"\n          (clicked)=\"showYearView()\"\n        >\n          {{ getHeaderTitle() }}\n        </i-button>\n        } @else {\n        <span class=\"i-calendar-title-text\">{{ getHeaderTitle() }}</span>\n        }\n      </div>\n\n      <i-button\n        [size]=\"'small'\"\n        [severity]=\"'primary'\"\n        [text]=\"true\"\n        icon=\"pi pi-chevron-right\"\n        (clicked)=\"navigateNext()\"\n        aria-label=\"Next\"\n      >\n      </i-button>\n    </div>\n\n    <!-- Calendar Body -->\n    <div class=\"i-calendar-body\">\n      <!-- Date View -->\n      @if (currentView === 'date') {\n      <div class=\"i-calendar-date-view\">\n        <!-- Weekday headers -->\n        <div class=\"i-calendar-weekdays\">\n          @for (day of weekDays; track day) {\n          <div class=\"i-calendar-weekday\">{{ day }}</div>\n          }\n        </div>\n\n        <!-- Calendar days -->\n        <div class=\"i-calendar-days\">\n          @for (week of calendarDays; track week) { @for (date of week; track\n          date) { @if (date) {\n          <i-button\n            [size]=\"'small'\"\n            [severity]=\"'contrast'\"\n            [text]=\"true\"\n            [fluid]=\"true\"\n            class=\"i-calendar-selection\"\n            [class.selected]=\"isSelectedDate(date)\"\n            [class.today]=\"isToday(date)\"\n            [disabled]=\"!isDateInCurrentMonth(date)\"\n            (clicked)=\"selectDate(date)\"\n          >\n            {{ date.getDate() }}\n          </i-button>\n          } } }\n        </div>\n      </div>\n      }\n\n      <!-- Month View -->\n      @if (currentView === 'month') {\n      <div class=\"i-calendar-month-view\">\n        @for (month of months; track month; let i = $index) {\n        <i-button\n          [size]=\"'small'\"\n          [severity]=\"'contrast'\"\n          [text]=\"true\"\n          [fluid]=\"true\"\n          class=\"i-calendar-selection\"\n          [class.selected]=\"isSelectedMonth(i)\"\n          (clicked)=\"selectMonth(i)\"\n        >\n          {{ monthsShort[i] }}\n        </i-button>\n        }\n      </div>\n      }\n\n      <!-- Year View -->\n      @if (currentView === 'year') {\n      <div class=\"i-calendar-year-view\">\n        @for (year of years; track year) {\n        <i-button\n          [size]=\"'small'\"\n          [severity]=\"'contrast'\"\n          [text]=\"true\"\n          [fluid]=\"true\"\n          class=\"i-calendar-selection\"\n          [text]=\"true\"\n          [class.selected]=\"isSelectedYear(year)\"\n          (clicked)=\"selectYear(year)\"\n        >\n          {{ year }}\n        </i-button>\n        }\n      </div>\n      }\n    </div>\n  </div>\n  }\n</div>\n", styles: [".i-calendar-panel{background:var(--color-component-background);border:1px solid var(--surface-border);box-shadow:0 4px 12px #00000026}.i-calendar-header{background:var(--color-component-background);border-bottom:1px solid var(--surface-border)}.i-calendar-title-text{color:var(--color-text-tertiary)}.i-calendar-selection.selected{border:1px solid var(--color-primary)}.i-calendar-selection.today{border:1px solid var(--color-text-tertiary)}.i-calendar-container{position:relative;width:100%}.i-calendar-container .i-calendar-input-wrapper{cursor:pointer}.i-calendar-panel{position:absolute;top:calc(100% + 4px);left:0;z-index:1000;min-width:300px;border-radius:8px;overflow:hidden;animation:slideDown .2s ease-out}@keyframes slideDown{0%{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:translateY(0)}}.i-calendar-header{display:flex;align-items:center;justify-content:space-between;padding:12px;gap:8px}.i-calendar-header-title{flex:1;display:flex;align-items:center;justify-content:center;font-weight:600;font-size:1em}.i-calendar-title-text{font-weight:600;font-size:1em}.i-calendar-body{padding:12px}.i-calendar-selection{border-radius:4px}.i-calendar-date-view{display:flex;flex-direction:column;gap:8px}.i-calendar-weekdays{display:grid;grid-template-columns:repeat(7,1fr);gap:4px;margin-bottom:4px}.i-calendar-days{display:grid;grid-template-columns:repeat(7,1fr);gap:4px}.i-calendar-month-view,.i-calendar-year-view{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}\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: 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: "calendarPanel", first: true, predicate: ["calendarPanel"], descendants: true, read: ElementRef }], ngImport: i0, template: "<div class=\"i-calendar-container\" [attr.id]=\"componentId\">\n  <!-- Input field using i-input-text component -->\n  <div class=\"i-calendar-input-wrapper\" (click)=\"toggleCalendar()\">\n    <i-input-text\n      [id]=\"componentId\"\n      [label]=\"label\"\n      [placeholder]=\"placeholder\"\n      [disabled]=\"disabled\"\n      [readonly]=\"true\"\n      [icon]=\"icon\"\n      [useFloatLabel]=\"useFloatLabel\"\n      [(ngModel)]=\"inputDisplayValue\"\n      [forceFloated]=\"!!(inputDisplayValue && inputDisplayValue.length > 0)\"\n    />\n  </div>\n\n  <!-- Calendar Panel -->\n  @if (isOpen) {\n    <div\n      #calendarPanel\n      class=\"i-calendar-panel\"\n      (click)=\"$event.stopPropagation()\"\n    >\n      <!-- Header -->\n      <div class=\"i-calendar-header\">\n        <i-button\n          [size]=\"'small'\"\n          [severity]=\"'primary'\"\n          [text]=\"true\"\n          icon=\"pi pi-chevron-left\"\n          (clicked)=\"navigatePrevious()\"\n          aria-label=\"Previous\"\n        >\n        </i-button>\n\n        <div class=\"i-calendar-header-title\">\n          @if (currentView === \"date\") {\n            <i-button\n              [severity]=\"'contrast'\"\n              [text]=\"true\"\n              (clicked)=\"showMonthView()\"\n            >\n              {{ getHeaderTitle() }}\n            </i-button>\n          } @else if (currentView === \"month\") {\n            <i-button\n              [severity]=\"'contrast'\"\n              [text]=\"true\"\n              (clicked)=\"showYearView()\"\n            >\n              {{ getHeaderTitle() }}\n            </i-button>\n          } @else {\n            <span class=\"i-calendar-title-text\">{{ getHeaderTitle() }}</span>\n          }\n        </div>\n\n        <i-button\n          [size]=\"'small'\"\n          [severity]=\"'primary'\"\n          [text]=\"true\"\n          icon=\"pi pi-chevron-right\"\n          (clicked)=\"navigateNext()\"\n          aria-label=\"Next\"\n        >\n        </i-button>\n      </div>\n\n      <!-- Calendar Body -->\n      <div class=\"i-calendar-body\">\n        <!-- Date View -->\n        @if (currentView === \"date\") {\n          <div class=\"i-calendar-date-view\">\n            <!-- Weekday headers -->\n            <div class=\"i-calendar-weekdays\">\n              @for (day of weekDays; track day) {\n                <div class=\"i-calendar-weekday\">{{ day }}</div>\n              }\n            </div>\n\n            <!-- Calendar days -->\n            <div class=\"i-calendar-days\">\n              @for (week of calendarDays; track week) {\n                @for (date of week; track date) {\n                  @if (date) {\n                    <i-button\n                      [size]=\"'small'\"\n                      [severity]=\"'contrast'\"\n                      [text]=\"true\"\n                      [fluid]=\"true\"\n                      class=\"i-calendar-selection\"\n                      [class.selected]=\"isSelectedDate(date)\"\n                      [class.today]=\"isToday(date)\"\n                      [disabled]=\"!isDateInCurrentMonth(date)\"\n                      (clicked)=\"selectDate(date)\"\n                    >\n                      {{ date.getDate() }}\n                    </i-button>\n                  }\n                }\n              }\n            </div>\n          </div>\n        }\n\n        <!-- Month View -->\n        @if (currentView === \"month\") {\n          <div class=\"i-calendar-month-view\">\n            @for (month of months; track month; let i = $index) {\n              <i-button\n                [size]=\"'small'\"\n                [severity]=\"'contrast'\"\n                [text]=\"true\"\n                [fluid]=\"true\"\n                class=\"i-calendar-selection\"\n                [class.selected]=\"isSelectedMonth(i)\"\n                (clicked)=\"selectMonth(i)\"\n              >\n                {{ monthsShort[i] }}\n              </i-button>\n            }\n          </div>\n        }\n\n        <!-- Year View -->\n        @if (currentView === \"year\") {\n          <div class=\"i-calendar-year-view\">\n            @for (year of years; track year) {\n              <i-button\n                [size]=\"'small'\"\n                [severity]=\"'contrast'\"\n                [text]=\"true\"\n                [fluid]=\"true\"\n                class=\"i-calendar-selection\"\n                [text]=\"true\"\n                [class.selected]=\"isSelectedYear(year)\"\n                (clicked)=\"selectYear(year)\"\n              >\n                {{ year }}\n              </i-button>\n            }\n          </div>\n        }\n      </div>\n    </div>\n  }\n</div>\n", styles: [".i-calendar-panel{background:var(--color-component-background);border:1px solid var(--surface-border);box-shadow:0 4px 12px #00000026}.i-calendar-header{background:var(--color-component-background);border-bottom:1px solid var(--surface-border)}.i-calendar-title-text{color:var(--color-text-tertiary)}.i-calendar-selection.selected{border:1px solid var(--color-primary)}.i-calendar-selection.today{border:1px solid var(--color-text-tertiary)}.i-calendar-container{position:relative;width:100%}.i-calendar-container .i-calendar-input-wrapper{cursor:pointer}.i-calendar-panel{position:absolute;top:calc(100% + 4px);left:0;z-index:1000;min-width:300px;border-radius:8px;overflow:hidden;animation:slideDown .2s ease-out}@keyframes slideDown{0%{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:translateY(0)}}.i-calendar-header{display:flex;align-items:center;justify-content:space-between;padding:12px;gap:8px}.i-calendar-header-title{flex:1;display:flex;align-items:center;justify-content:center;font-weight:600;font-size:1em}.i-calendar-title-text{font-weight:600;font-size:1em}.i-calendar-body{padding:12px}.i-calendar-selection{border-radius:4px}.i-calendar-date-view{display:flex;flex-direction:column;gap:8px}.i-calendar-weekdays{display:grid;grid-template-columns:repeat(7,1fr);gap:4px;margin-bottom:4px}.i-calendar-days{display:grid;grid-template-columns:repeat(7,1fr);gap:4px}.i-calendar-month-view,.i-calendar-year-view{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}\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: 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.2.12", ngImport: i0, type: ICalendar, decorators: [{
             type: Component,
@@ -1546,7 +1546,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.12", ngImpo
                             useExisting: forwardRef(() => ICalendar),
                             multi: true,
                         },
-                    ], template: "<div class=\"i-calendar-container\" [attr.id]=\"componentId\">\n  <!-- Input field using i-input-text component -->\n  <div class=\"i-calendar-input-wrapper\" (click)=\"toggleCalendar()\">\n    <i-input-text\n      [id]=\"componentId\"\n      [label]=\"label\"\n      [placeholder]=\"placeholder\"\n      [disabled]=\"disabled\"\n      [readonly]=\"true\"\n      [icon]=\"icon\"\n      [useFloatLabel]=\"useFloatLabel\"\n      [(ngModel)]=\"inputDisplayValue\"\n      [forceFloated]=\"!!(inputDisplayValue && inputDisplayValue.length > 0)\"\n    />\n  </div>\n\n  <!-- Calendar Panel -->\n  @if (isOpen) {\n  <div\n    #calendarPanel\n    class=\"i-calendar-panel\"\n    (click)=\"$event.stopPropagation()\"\n  >\n    <!-- Header -->\n    <div class=\"i-calendar-header\">\n      <i-button\n        [size]=\"'small'\"\n        [severity]=\"'primary'\"\n        [text]=\"true\"\n        icon=\"pi pi-chevron-left\"\n        (clicked)=\"navigatePrevious()\"\n        aria-label=\"Previous\"\n      >\n      </i-button>\n\n      <div class=\"i-calendar-header-title\">\n        @if (currentView === 'date') {\n        <i-button\n          [severity]=\"'contrast'\"\n          [text]=\"true\"\n          (clicked)=\"showMonthView()\"\n        >\n          {{ getHeaderTitle() }}\n        </i-button>\n        } @else if (currentView === 'month') {\n        <i-button\n          [severity]=\"'contrast'\"\n          [text]=\"true\"\n          (clicked)=\"showYearView()\"\n        >\n          {{ getHeaderTitle() }}\n        </i-button>\n        } @else {\n        <span class=\"i-calendar-title-text\">{{ getHeaderTitle() }}</span>\n        }\n      </div>\n\n      <i-button\n        [size]=\"'small'\"\n        [severity]=\"'primary'\"\n        [text]=\"true\"\n        icon=\"pi pi-chevron-right\"\n        (clicked)=\"navigateNext()\"\n        aria-label=\"Next\"\n      >\n      </i-button>\n    </div>\n\n    <!-- Calendar Body -->\n    <div class=\"i-calendar-body\">\n      <!-- Date View -->\n      @if (currentView === 'date') {\n      <div class=\"i-calendar-date-view\">\n        <!-- Weekday headers -->\n        <div class=\"i-calendar-weekdays\">\n          @for (day of weekDays; track day) {\n          <div class=\"i-calendar-weekday\">{{ day }}</div>\n          }\n        </div>\n\n        <!-- Calendar days -->\n        <div class=\"i-calendar-days\">\n          @for (week of calendarDays; track week) { @for (date of week; track\n          date) { @if (date) {\n          <i-button\n            [size]=\"'small'\"\n            [severity]=\"'contrast'\"\n            [text]=\"true\"\n            [fluid]=\"true\"\n            class=\"i-calendar-selection\"\n            [class.selected]=\"isSelectedDate(date)\"\n            [class.today]=\"isToday(date)\"\n            [disabled]=\"!isDateInCurrentMonth(date)\"\n            (clicked)=\"selectDate(date)\"\n          >\n            {{ date.getDate() }}\n          </i-button>\n          } } }\n        </div>\n      </div>\n      }\n\n      <!-- Month View -->\n      @if (currentView === 'month') {\n      <div class=\"i-calendar-month-view\">\n        @for (month of months; track month; let i = $index) {\n        <i-button\n          [size]=\"'small'\"\n          [severity]=\"'contrast'\"\n          [text]=\"true\"\n          [fluid]=\"true\"\n          class=\"i-calendar-selection\"\n          [class.selected]=\"isSelectedMonth(i)\"\n          (clicked)=\"selectMonth(i)\"\n        >\n          {{ monthsShort[i] }}\n        </i-button>\n        }\n      </div>\n      }\n\n      <!-- Year View -->\n      @if (currentView === 'year') {\n      <div class=\"i-calendar-year-view\">\n        @for (year of years; track year) {\n        <i-button\n          [size]=\"'small'\"\n          [severity]=\"'contrast'\"\n          [text]=\"true\"\n          [fluid]=\"true\"\n          class=\"i-calendar-selection\"\n          [text]=\"true\"\n          [class.selected]=\"isSelectedYear(year)\"\n          (clicked)=\"selectYear(year)\"\n        >\n          {{ year }}\n        </i-button>\n        }\n      </div>\n      }\n    </div>\n  </div>\n  }\n</div>\n", styles: [".i-calendar-panel{background:var(--color-component-background);border:1px solid var(--surface-border);box-shadow:0 4px 12px #00000026}.i-calendar-header{background:var(--color-component-background);border-bottom:1px solid var(--surface-border)}.i-calendar-title-text{color:var(--color-text-tertiary)}.i-calendar-selection.selected{border:1px solid var(--color-primary)}.i-calendar-selection.today{border:1px solid var(--color-text-tertiary)}.i-calendar-container{position:relative;width:100%}.i-calendar-container .i-calendar-input-wrapper{cursor:pointer}.i-calendar-panel{position:absolute;top:calc(100% + 4px);left:0;z-index:1000;min-width:300px;border-radius:8px;overflow:hidden;animation:slideDown .2s ease-out}@keyframes slideDown{0%{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:translateY(0)}}.i-calendar-header{display:flex;align-items:center;justify-content:space-between;padding:12px;gap:8px}.i-calendar-header-title{flex:1;display:flex;align-items:center;justify-content:center;font-weight:600;font-size:1em}.i-calendar-title-text{font-weight:600;font-size:1em}.i-calendar-body{padding:12px}.i-calendar-selection{border-radius:4px}.i-calendar-date-view{display:flex;flex-direction:column;gap:8px}.i-calendar-weekdays{display:grid;grid-template-columns:repeat(7,1fr);gap:4px;margin-bottom:4px}.i-calendar-days{display:grid;grid-template-columns:repeat(7,1fr);gap:4px}.i-calendar-month-view,.i-calendar-year-view{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}\n"] }]
+                    ], template: "<div class=\"i-calendar-container\" [attr.id]=\"componentId\">\n  <!-- Input field using i-input-text component -->\n  <div class=\"i-calendar-input-wrapper\" (click)=\"toggleCalendar()\">\n    <i-input-text\n      [id]=\"componentId\"\n      [label]=\"label\"\n      [placeholder]=\"placeholder\"\n      [disabled]=\"disabled\"\n      [readonly]=\"true\"\n      [icon]=\"icon\"\n      [useFloatLabel]=\"useFloatLabel\"\n      [(ngModel)]=\"inputDisplayValue\"\n      [forceFloated]=\"!!(inputDisplayValue && inputDisplayValue.length > 0)\"\n    />\n  </div>\n\n  <!-- Calendar Panel -->\n  @if (isOpen) {\n    <div\n      #calendarPanel\n      class=\"i-calendar-panel\"\n      (click)=\"$event.stopPropagation()\"\n    >\n      <!-- Header -->\n      <div class=\"i-calendar-header\">\n        <i-button\n          [size]=\"'small'\"\n          [severity]=\"'primary'\"\n          [text]=\"true\"\n          icon=\"pi pi-chevron-left\"\n          (clicked)=\"navigatePrevious()\"\n          aria-label=\"Previous\"\n        >\n        </i-button>\n\n        <div class=\"i-calendar-header-title\">\n          @if (currentView === \"date\") {\n            <i-button\n              [severity]=\"'contrast'\"\n              [text]=\"true\"\n              (clicked)=\"showMonthView()\"\n            >\n              {{ getHeaderTitle() }}\n            </i-button>\n          } @else if (currentView === \"month\") {\n            <i-button\n              [severity]=\"'contrast'\"\n              [text]=\"true\"\n              (clicked)=\"showYearView()\"\n            >\n              {{ getHeaderTitle() }}\n            </i-button>\n          } @else {\n            <span class=\"i-calendar-title-text\">{{ getHeaderTitle() }}</span>\n          }\n        </div>\n\n        <i-button\n          [size]=\"'small'\"\n          [severity]=\"'primary'\"\n          [text]=\"true\"\n          icon=\"pi pi-chevron-right\"\n          (clicked)=\"navigateNext()\"\n          aria-label=\"Next\"\n        >\n        </i-button>\n      </div>\n\n      <!-- Calendar Body -->\n      <div class=\"i-calendar-body\">\n        <!-- Date View -->\n        @if (currentView === \"date\") {\n          <div class=\"i-calendar-date-view\">\n            <!-- Weekday headers -->\n            <div class=\"i-calendar-weekdays\">\n              @for (day of weekDays; track day) {\n                <div class=\"i-calendar-weekday\">{{ day }}</div>\n              }\n            </div>\n\n            <!-- Calendar days -->\n            <div class=\"i-calendar-days\">\n              @for (week of calendarDays; track week) {\n                @for (date of week; track date) {\n                  @if (date) {\n                    <i-button\n                      [size]=\"'small'\"\n                      [severity]=\"'contrast'\"\n                      [text]=\"true\"\n                      [fluid]=\"true\"\n                      class=\"i-calendar-selection\"\n                      [class.selected]=\"isSelectedDate(date)\"\n                      [class.today]=\"isToday(date)\"\n                      [disabled]=\"!isDateInCurrentMonth(date)\"\n                      (clicked)=\"selectDate(date)\"\n                    >\n                      {{ date.getDate() }}\n                    </i-button>\n                  }\n                }\n              }\n            </div>\n          </div>\n        }\n\n        <!-- Month View -->\n        @if (currentView === \"month\") {\n          <div class=\"i-calendar-month-view\">\n            @for (month of months; track month; let i = $index) {\n              <i-button\n                [size]=\"'small'\"\n                [severity]=\"'contrast'\"\n                [text]=\"true\"\n                [fluid]=\"true\"\n                class=\"i-calendar-selection\"\n                [class.selected]=\"isSelectedMonth(i)\"\n                (clicked)=\"selectMonth(i)\"\n              >\n                {{ monthsShort[i] }}\n              </i-button>\n            }\n          </div>\n        }\n\n        <!-- Year View -->\n        @if (currentView === \"year\") {\n          <div class=\"i-calendar-year-view\">\n            @for (year of years; track year) {\n              <i-button\n                [size]=\"'small'\"\n                [severity]=\"'contrast'\"\n                [text]=\"true\"\n                [fluid]=\"true\"\n                class=\"i-calendar-selection\"\n                [text]=\"true\"\n                [class.selected]=\"isSelectedYear(year)\"\n                (clicked)=\"selectYear(year)\"\n              >\n                {{ year }}\n              </i-button>\n            }\n          </div>\n        }\n      </div>\n    </div>\n  }\n</div>\n", styles: [".i-calendar-panel{background:var(--color-component-background);border:1px solid var(--surface-border);box-shadow:0 4px 12px #00000026}.i-calendar-header{background:var(--color-component-background);border-bottom:1px solid var(--surface-border)}.i-calendar-title-text{color:var(--color-text-tertiary)}.i-calendar-selection.selected{border:1px solid var(--color-primary)}.i-calendar-selection.today{border:1px solid var(--color-text-tertiary)}.i-calendar-container{position:relative;width:100%}.i-calendar-container .i-calendar-input-wrapper{cursor:pointer}.i-calendar-panel{position:absolute;top:calc(100% + 4px);left:0;z-index:1000;min-width:300px;border-radius:8px;overflow:hidden;animation:slideDown .2s ease-out}@keyframes slideDown{0%{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:translateY(0)}}.i-calendar-header{display:flex;align-items:center;justify-content:space-between;padding:12px;gap:8px}.i-calendar-header-title{flex:1;display:flex;align-items:center;justify-content:center;font-weight:600;font-size:1em}.i-calendar-title-text{font-weight:600;font-size:1em}.i-calendar-body{padding:12px}.i-calendar-selection{border-radius:4px}.i-calendar-date-view{display:flex;flex-direction:column;gap:8px}.i-calendar-weekdays{display:grid;grid-template-columns:repeat(7,1fr);gap:4px;margin-bottom:4px}.i-calendar-days{display:grid;grid-template-columns:repeat(7,1fr);gap:4px}.i-calendar-month-view,.i-calendar-year-view{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}\n"] }]
         }], ctorParameters: () => [{ type: i0.ElementRef }], propDecorators: { placeholder: [{
                 type: Input
             }], readonlyInput: [{
@@ -1643,11 +1643,11 @@ class ICard {
         this.closeCard.emit();
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: ICard, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.12", type: ICard, isStandalone: true, selector: "i-card", inputs: { title: "title", closable: "closable", fullHeight: "fullHeight" }, outputs: { closeCard: "closeCard" }, host: { properties: { "class.i-card--full-height": "this.isFullHeight" } }, ngImport: i0, template: "<div class=\"i-card\" [attr.id]=\"componentId\">\n  <!-- Header Section -->\n  <div class=\"i-card-header\">\n    <ng-content select=\"[slot=header]\">\n      @if (title) {\n      <span class=\"i-card-title\">{{ title }}</span>\n      }\n    </ng-content>\n    @if (closable) {\n    <i-button\n      [severity]=\"'contrast'\"\n      [text]=\"true\"\n      [icon]=\"'pi pi-times'\"\n      [size]=\"'small'\"\n      (click)=\"onCloseCard()\"\n    />\n    }\n  </div>\n\n  <!-- Content Section -->\n  <div class=\"i-card-body\">\n    <ng-content></ng-content>\n  </div>\n\n  <!-- Footer Section -->\n  <div class=\"i-card-footer\">\n    <ng-content select=\"[slot=footer]\"></ng-content>\n  </div>\n</div>\n", styles: [".i-card{background:var(--surface-card);color:var(--color-text-primary);border:1px solid var(--surface-border)}.i-card .i-card-close,.i-card .i-card-subtitle{color:var(--color-text-secondary)}:host{display:block}:host.i-card--full-height{height:100%}:host.i-card--full-height .i-card{height:100%;display:flex;flex-direction:column}:host.i-card--full-height .i-card .i-card-body{flex:1;overflow:auto}:host.i-card--full-height .i-card .i-card-body::-webkit-scrollbar-track{background:var(--scrollbar-track, transparent);border-radius:var(--scrollbar-radius, 3px)}:host.i-card--full-height .i-card .i-card-body::-webkit-scrollbar-thumb{background:#0003;border-radius:var(--scrollbar-radius, 3px);transition:background .2s ease}:host.i-card--full-height .i-card .i-card-body::-webkit-scrollbar-thumb:hover{background:#00000059}:host.i-card--full-height .i-card .i-card-body::-webkit-scrollbar-thumb:active{background:#00000080}:host.i-card--full-height .i-card .i-card-body::-webkit-scrollbar-corner{background:transparent}:host.i-card--full-height .i-card .i-card-body{scrollbar-width:thin;scrollbar-color:rgba(0,0,0,.2) transparent;scroll-behavior:smooth}:host.i-card--full-height .i-card .i-card-body::-webkit-scrollbar-thumb{background:var(--scrollbar-thumb, var(--color-text-secondary))}:host.i-card--full-height .i-card .i-card-body{scrollbar-color:var(--scrollbar-thumb, var(--color-text-secondary)) var(--scrollbar-track, transparent)}:host.i-card--full-height .i-card .i-card-body::-webkit-scrollbar{width:var(--scrollbar-size, 6px);height:var(--scrollbar-size, 6px)}:host.i-card--full-height .i-card .i-card-body::-webkit-scrollbar-track{background:var(--scrollbar-track-dropdown, rgba(0, 0, 0, .05));border-radius:var(--scrollbar-radius, 3px);margin:2px 0}:host.i-card--full-height .i-card .i-card-body::-webkit-scrollbar-thumb{border-radius:var(--scrollbar-radius, 3px);min-height:20px;background:var(--scrollbar-thumb, var(--color-text-secondary))}:host.i-card--full-height .i-card .i-card-body::-webkit-scrollbar-thumb:hover{background:var(--scrollbar-thumb-hover, var(--color-text-primary))}:host.i-card--full-height .i-card .i-card-body::-webkit-scrollbar-thumb:active{background:var(--scrollbar-thumb-active, var(--color-primary))}:host.i-card--full-height .i-card .i-card-body{scrollbar-width:thin;scrollbar-color:var(--scrollbar-thumb, var(--color-text-secondary)) var(--scrollbar-track-dropdown, rgba(0, 0, 0, .05))}.i-card{border-radius:8px;padding:12px}.i-card .i-card-header{display:flex;flex-direction:row;justify-content:space-between;align-items:center}.i-card .i-card-header .i-card-title{padding-left:12px;font-size:1.5em;font-weight:600}.i-card .i-card-body{padding:0 12px}.i-card .i-card-footer{padding:12px 0 0}.i-card .i-card-footer:empty{display:none}@media(max-width:768px){.i-card{border-radius:0}.i-card .i-card-body{padding-left:0;padding-right:0}}\n"], dependencies: [{ kind: "component", type: IButton, selector: "i-button", inputs: ["severity", "size", "type", "disabled", "outlined", "raised", "text", "icon", "fluid", "loading"], outputs: ["clicked"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.12", type: ICard, isStandalone: true, selector: "i-card", inputs: { title: "title", closable: "closable", fullHeight: "fullHeight" }, outputs: { closeCard: "closeCard" }, host: { properties: { "class.i-card--full-height": "this.isFullHeight" } }, ngImport: i0, template: "<div class=\"i-card\" [attr.id]=\"componentId\">\n  <!-- Header Section -->\n  <div class=\"i-card-header\">\n    <ng-content select=\"[slot=header]\">\n      @if (title) {\n        <span class=\"i-card-title\">{{ title }}</span>\n      }\n    </ng-content>\n    @if (closable) {\n      <i-button\n        [severity]=\"'contrast'\"\n        [text]=\"true\"\n        [icon]=\"'pi pi-times'\"\n        [size]=\"'small'\"\n        (click)=\"onCloseCard()\"\n      />\n    }\n  </div>\n\n  <!-- Content Section -->\n  <div class=\"i-card-body\">\n    <ng-content></ng-content>\n  </div>\n\n  <!-- Footer Section -->\n  <div class=\"i-card-footer\">\n    <ng-content select=\"[slot=footer]\"></ng-content>\n  </div>\n</div>\n", styles: [".i-card{background:var(--surface-card);color:var(--color-text-primary);border:1px solid var(--surface-border)}.i-card .i-card-close,.i-card .i-card-subtitle{color:var(--color-text-secondary)}:host{display:block}:host.i-card--full-height{height:100%}:host.i-card--full-height .i-card{height:100%;display:flex;flex-direction:column}:host.i-card--full-height .i-card .i-card-body{flex:1;overflow:auto}:host.i-card--full-height .i-card .i-card-body::-webkit-scrollbar-track{background:var(--scrollbar-track, transparent);border-radius:var(--scrollbar-radius, 3px)}:host.i-card--full-height .i-card .i-card-body::-webkit-scrollbar-thumb{background:#0003;border-radius:var(--scrollbar-radius, 3px);transition:background .2s ease}:host.i-card--full-height .i-card .i-card-body::-webkit-scrollbar-thumb:hover{background:#00000059}:host.i-card--full-height .i-card .i-card-body::-webkit-scrollbar-thumb:active{background:#00000080}:host.i-card--full-height .i-card .i-card-body::-webkit-scrollbar-corner{background:transparent}:host.i-card--full-height .i-card .i-card-body{scrollbar-width:thin;scrollbar-color:rgba(0,0,0,.2) transparent;scroll-behavior:smooth}:host.i-card--full-height .i-card .i-card-body::-webkit-scrollbar-thumb{background:var(--scrollbar-thumb, var(--color-text-secondary))}:host.i-card--full-height .i-card .i-card-body{scrollbar-color:var(--scrollbar-thumb, var(--color-text-secondary)) var(--scrollbar-track, transparent)}:host.i-card--full-height .i-card .i-card-body::-webkit-scrollbar{width:var(--scrollbar-size, 6px);height:var(--scrollbar-size, 6px)}:host.i-card--full-height .i-card .i-card-body::-webkit-scrollbar-track{background:var(--scrollbar-track-dropdown, rgba(0, 0, 0, .05));border-radius:var(--scrollbar-radius, 3px);margin:2px 0}:host.i-card--full-height .i-card .i-card-body::-webkit-scrollbar-thumb{border-radius:var(--scrollbar-radius, 3px);min-height:20px;background:var(--scrollbar-thumb, var(--color-text-secondary))}:host.i-card--full-height .i-card .i-card-body::-webkit-scrollbar-thumb:hover{background:var(--scrollbar-thumb-hover, var(--color-text-primary))}:host.i-card--full-height .i-card .i-card-body::-webkit-scrollbar-thumb:active{background:var(--scrollbar-thumb-active, var(--color-primary))}:host.i-card--full-height .i-card .i-card-body{scrollbar-width:thin;scrollbar-color:var(--scrollbar-thumb, var(--color-text-secondary)) var(--scrollbar-track-dropdown, rgba(0, 0, 0, .05))}.i-card{border-radius:8px;padding:12px}.i-card .i-card-header{display:flex;flex-direction:row;justify-content:space-between;align-items:center}.i-card .i-card-header .i-card-title{padding-left:12px;font-size:1.5em;font-weight:600}.i-card .i-card-body{padding:0 12px}.i-card .i-card-footer{padding:12px 0 0}.i-card .i-card-footer:empty{display:none}@media(max-width:768px){.i-card{border-radius:0}.i-card .i-card-body{padding-left:0;padding-right:0}}\n"], dependencies: [{ kind: "component", type: IButton, selector: "i-button", inputs: ["severity", "size", "type", "disabled", "outlined", "raised", "text", "icon", "fluid", "loading"], outputs: ["clicked"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: ICard, decorators: [{
             type: Component,
-            args: [{ selector: 'i-card', imports: [IButton], template: "<div class=\"i-card\" [attr.id]=\"componentId\">\n  <!-- Header Section -->\n  <div class=\"i-card-header\">\n    <ng-content select=\"[slot=header]\">\n      @if (title) {\n      <span class=\"i-card-title\">{{ title }}</span>\n      }\n    </ng-content>\n    @if (closable) {\n    <i-button\n      [severity]=\"'contrast'\"\n      [text]=\"true\"\n      [icon]=\"'pi pi-times'\"\n      [size]=\"'small'\"\n      (click)=\"onCloseCard()\"\n    />\n    }\n  </div>\n\n  <!-- Content Section -->\n  <div class=\"i-card-body\">\n    <ng-content></ng-content>\n  </div>\n\n  <!-- Footer Section -->\n  <div class=\"i-card-footer\">\n    <ng-content select=\"[slot=footer]\"></ng-content>\n  </div>\n</div>\n", styles: [".i-card{background:var(--surface-card);color:var(--color-text-primary);border:1px solid var(--surface-border)}.i-card .i-card-close,.i-card .i-card-subtitle{color:var(--color-text-secondary)}:host{display:block}:host.i-card--full-height{height:100%}:host.i-card--full-height .i-card{height:100%;display:flex;flex-direction:column}:host.i-card--full-height .i-card .i-card-body{flex:1;overflow:auto}:host.i-card--full-height .i-card .i-card-body::-webkit-scrollbar-track{background:var(--scrollbar-track, transparent);border-radius:var(--scrollbar-radius, 3px)}:host.i-card--full-height .i-card .i-card-body::-webkit-scrollbar-thumb{background:#0003;border-radius:var(--scrollbar-radius, 3px);transition:background .2s ease}:host.i-card--full-height .i-card .i-card-body::-webkit-scrollbar-thumb:hover{background:#00000059}:host.i-card--full-height .i-card .i-card-body::-webkit-scrollbar-thumb:active{background:#00000080}:host.i-card--full-height .i-card .i-card-body::-webkit-scrollbar-corner{background:transparent}:host.i-card--full-height .i-card .i-card-body{scrollbar-width:thin;scrollbar-color:rgba(0,0,0,.2) transparent;scroll-behavior:smooth}:host.i-card--full-height .i-card .i-card-body::-webkit-scrollbar-thumb{background:var(--scrollbar-thumb, var(--color-text-secondary))}:host.i-card--full-height .i-card .i-card-body{scrollbar-color:var(--scrollbar-thumb, var(--color-text-secondary)) var(--scrollbar-track, transparent)}:host.i-card--full-height .i-card .i-card-body::-webkit-scrollbar{width:var(--scrollbar-size, 6px);height:var(--scrollbar-size, 6px)}:host.i-card--full-height .i-card .i-card-body::-webkit-scrollbar-track{background:var(--scrollbar-track-dropdown, rgba(0, 0, 0, .05));border-radius:var(--scrollbar-radius, 3px);margin:2px 0}:host.i-card--full-height .i-card .i-card-body::-webkit-scrollbar-thumb{border-radius:var(--scrollbar-radius, 3px);min-height:20px;background:var(--scrollbar-thumb, var(--color-text-secondary))}:host.i-card--full-height .i-card .i-card-body::-webkit-scrollbar-thumb:hover{background:var(--scrollbar-thumb-hover, var(--color-text-primary))}:host.i-card--full-height .i-card .i-card-body::-webkit-scrollbar-thumb:active{background:var(--scrollbar-thumb-active, var(--color-primary))}:host.i-card--full-height .i-card .i-card-body{scrollbar-width:thin;scrollbar-color:var(--scrollbar-thumb, var(--color-text-secondary)) var(--scrollbar-track-dropdown, rgba(0, 0, 0, .05))}.i-card{border-radius:8px;padding:12px}.i-card .i-card-header{display:flex;flex-direction:row;justify-content:space-between;align-items:center}.i-card .i-card-header .i-card-title{padding-left:12px;font-size:1.5em;font-weight:600}.i-card .i-card-body{padding:0 12px}.i-card .i-card-footer{padding:12px 0 0}.i-card .i-card-footer:empty{display:none}@media(max-width:768px){.i-card{border-radius:0}.i-card .i-card-body{padding-left:0;padding-right:0}}\n"] }]
+            args: [{ selector: 'i-card', imports: [IButton], template: "<div class=\"i-card\" [attr.id]=\"componentId\">\n  <!-- Header Section -->\n  <div class=\"i-card-header\">\n    <ng-content select=\"[slot=header]\">\n      @if (title) {\n        <span class=\"i-card-title\">{{ title }}</span>\n      }\n    </ng-content>\n    @if (closable) {\n      <i-button\n        [severity]=\"'contrast'\"\n        [text]=\"true\"\n        [icon]=\"'pi pi-times'\"\n        [size]=\"'small'\"\n        (click)=\"onCloseCard()\"\n      />\n    }\n  </div>\n\n  <!-- Content Section -->\n  <div class=\"i-card-body\">\n    <ng-content></ng-content>\n  </div>\n\n  <!-- Footer Section -->\n  <div class=\"i-card-footer\">\n    <ng-content select=\"[slot=footer]\"></ng-content>\n  </div>\n</div>\n", styles: [".i-card{background:var(--surface-card);color:var(--color-text-primary);border:1px solid var(--surface-border)}.i-card .i-card-close,.i-card .i-card-subtitle{color:var(--color-text-secondary)}:host{display:block}:host.i-card--full-height{height:100%}:host.i-card--full-height .i-card{height:100%;display:flex;flex-direction:column}:host.i-card--full-height .i-card .i-card-body{flex:1;overflow:auto}:host.i-card--full-height .i-card .i-card-body::-webkit-scrollbar-track{background:var(--scrollbar-track, transparent);border-radius:var(--scrollbar-radius, 3px)}:host.i-card--full-height .i-card .i-card-body::-webkit-scrollbar-thumb{background:#0003;border-radius:var(--scrollbar-radius, 3px);transition:background .2s ease}:host.i-card--full-height .i-card .i-card-body::-webkit-scrollbar-thumb:hover{background:#00000059}:host.i-card--full-height .i-card .i-card-body::-webkit-scrollbar-thumb:active{background:#00000080}:host.i-card--full-height .i-card .i-card-body::-webkit-scrollbar-corner{background:transparent}:host.i-card--full-height .i-card .i-card-body{scrollbar-width:thin;scrollbar-color:rgba(0,0,0,.2) transparent;scroll-behavior:smooth}:host.i-card--full-height .i-card .i-card-body::-webkit-scrollbar-thumb{background:var(--scrollbar-thumb, var(--color-text-secondary))}:host.i-card--full-height .i-card .i-card-body{scrollbar-color:var(--scrollbar-thumb, var(--color-text-secondary)) var(--scrollbar-track, transparent)}:host.i-card--full-height .i-card .i-card-body::-webkit-scrollbar{width:var(--scrollbar-size, 6px);height:var(--scrollbar-size, 6px)}:host.i-card--full-height .i-card .i-card-body::-webkit-scrollbar-track{background:var(--scrollbar-track-dropdown, rgba(0, 0, 0, .05));border-radius:var(--scrollbar-radius, 3px);margin:2px 0}:host.i-card--full-height .i-card .i-card-body::-webkit-scrollbar-thumb{border-radius:var(--scrollbar-radius, 3px);min-height:20px;background:var(--scrollbar-thumb, var(--color-text-secondary))}:host.i-card--full-height .i-card .i-card-body::-webkit-scrollbar-thumb:hover{background:var(--scrollbar-thumb-hover, var(--color-text-primary))}:host.i-card--full-height .i-card .i-card-body::-webkit-scrollbar-thumb:active{background:var(--scrollbar-thumb-active, var(--color-primary))}:host.i-card--full-height .i-card .i-card-body{scrollbar-width:thin;scrollbar-color:var(--scrollbar-thumb, var(--color-text-secondary)) var(--scrollbar-track-dropdown, rgba(0, 0, 0, .05))}.i-card{border-radius:8px;padding:12px}.i-card .i-card-header{display:flex;flex-direction:row;justify-content:space-between;align-items:center}.i-card .i-card-header .i-card-title{padding-left:12px;font-size:1.5em;font-weight:600}.i-card .i-card-body{padding:0 12px}.i-card .i-card-footer{padding:12px 0 0}.i-card .i-card-footer:empty{display:none}@media(max-width:768px){.i-card{border-radius:0}.i-card .i-card-body{padding-left:0;padding-right:0}}\n"] }]
         }], propDecorators: { title: [{
                 type: Input
             }], closable: [{
@@ -1823,7 +1823,7 @@ class ICheckbox {
                 useExisting: forwardRef(() => ICheckbox),
                 multi: true,
             },
-        ], ngImport: i0, template: "<div\n  class=\"i-checkbox-wrapper\"\n  [class.i-checkbox--disabled]=\"disabled\"\n  [class.i-checkbox--readonly]=\"readonly\"\n  [class.i-checkbox--small]=\"size === 'small'\"\n  [class.i-checkbox--medium]=\"size === 'medium'\"\n  [class.i-checkbox--large]=\"size === 'large'\"\n>\n  <div\n    class=\"i-checkbox\"\n    [class.i-checkbox--checked]=\"checked\"\n    (click)=\"toggle()\"\n    [attr.id]=\"id || componentId\"\n    role=\"checkbox\"\n    [attr.aria-checked]=\"indeterminate ? 'mixed' : checked\"\n    [attr.aria-disabled]=\"disabled\"\n    [attr.aria-readonly]=\"readonly\"\n    [attr.aria-labelledby]=\"label ? (id || componentId) + '-label' : null\"\n    tabindex=\"0\"\n    (keydown.space)=\"$event.preventDefault(); toggle()\"\n    (keydown.enter)=\"$event.preventDefault(); toggle()\"\n  >\n    @if (!checked && indeterminate) {\n    <i class=\"pi pi-minus i-checkbox-icon\"></i>\n    } @if (!indeterminate) {\n    <i\n      class=\"pi pi-check i-checkbox-icon\"\n      [style.opacity]=\"checked ? '1' : '0'\"\n    ></i>\n    }\n  </div>\n  @if (label) {\n  <label\n    [id]=\"(id || componentId) + '-label'\"\n    class=\"i-checkbox-label\"\n    (click)=\"toggle()\"\n  >\n    {{ label }}\n  </label>\n  }\n</div>\n", styles: [".i-checkbox-wrapper .i-checkbox{border:1px solid var(--surface-border);background-color:var(--surface-ground)}.i-checkbox-wrapper .i-checkbox:hover:not(.i-checkbox--disabled){border-color:var(--color-primary)}.i-checkbox-wrapper .i-checkbox:focus{box-shadow:0 2px 10px #0003}.i-checkbox-wrapper .i-checkbox.i-checkbox--checked{border-color:var(--color-primary);background-color:var(--color-primary)}.i-checkbox-wrapper .i-checkbox.i-checkbox--checked .i-checkbox-icon{color:var(--color-contrast-inverse)}.i-checkbox-wrapper .i-checkbox.i-checkbox--checked:hover{border-color:color-mix(in srgb,var(--color-primary) 80%,transparent);background-color:color-mix(in srgb,var(--color-primary) 80%,transparent)}.i-checkbox-wrapper .i-checkbox-label{color:var(--color-text-primary)}.i-checkbox-wrapper.i-checkbox--disabled .i-checkbox,.i-checkbox-wrapper.i-checkbox--disabled .i-checkbox.i-checkbox--checked{border-color:var(--color-disabled-border);background-color:var(--color-disabled-background)}.i-checkbox-wrapper.i-checkbox--disabled .i-checkbox.i-checkbox--checked .i-checkbox-icon,.i-checkbox-wrapper.i-checkbox--disabled .i-checkbox-label{color:var(--color-text-disabled)}.i-checkbox-wrapper{display:inline-flex;align-items:center;gap:8px;font-size:1em}.i-checkbox-wrapper.i-checkbox--disabled{opacity:.6;cursor:not-allowed}.i-checkbox-wrapper.i-checkbox--disabled .i-checkbox,.i-checkbox-wrapper.i-checkbox--disabled .i-checkbox-label{cursor:not-allowed;pointer-events:none}.i-checkbox-wrapper.i-checkbox--readonly .i-checkbox,.i-checkbox-wrapper.i-checkbox--readonly .i-checkbox-label{cursor:default}.i-checkbox-wrapper.i-checkbox--small{font-size:.9em;gap:6px}.i-checkbox-wrapper.i-checkbox--small .i-checkbox{width:14px;height:14px;padding:0 0 0 1px}.i-checkbox-wrapper.i-checkbox--small .i-checkbox .i-checkbox-icon{font-size:8px}.i-checkbox-wrapper.i-checkbox--medium{font-size:1em;gap:8px}.i-checkbox-wrapper.i-checkbox--medium .i-checkbox{width:16px;height:16px}.i-checkbox-wrapper.i-checkbox--medium .i-checkbox .i-checkbox-icon{font-size:10px}.i-checkbox-wrapper.i-checkbox--large{font-size:1.2em;gap:10px}.i-checkbox-wrapper.i-checkbox--large .i-checkbox{width:20px;height:20px}.i-checkbox-wrapper.i-checkbox--large .i-checkbox .i-checkbox-icon{font-size:12px}.i-checkbox-wrapper .i-checkbox{position:relative;display:inline-flex;align-items:center;justify-content:center;border-radius:3px;transition:all .15s ease;cursor:pointer;box-sizing:border-box}.i-checkbox-wrapper .i-checkbox:focus{outline:none;box-shadow:0 0 0 2px #3b82f64d}.i-checkbox-wrapper .i-checkbox .i-checkbox-icon{font-size:10px;font-weight:700;transition:all .15s ease}.i-checkbox-wrapper .i-checkbox-label{cursor:pointer;-webkit-user-select:none;user-select:none;line-height:1.4}\n"] });
+        ], ngImport: i0, template: "<div\n  class=\"i-checkbox-wrapper\"\n  [class.i-checkbox--disabled]=\"disabled\"\n  [class.i-checkbox--readonly]=\"readonly\"\n  [class.i-checkbox--small]=\"size === 'small'\"\n  [class.i-checkbox--medium]=\"size === 'medium'\"\n  [class.i-checkbox--large]=\"size === 'large'\"\n>\n  <div\n    class=\"i-checkbox\"\n    [class.i-checkbox--checked]=\"checked\"\n    (click)=\"toggle()\"\n    [attr.id]=\"id || componentId\"\n    role=\"checkbox\"\n    [attr.aria-checked]=\"indeterminate ? 'mixed' : checked\"\n    [attr.aria-disabled]=\"disabled\"\n    [attr.aria-readonly]=\"readonly\"\n    [attr.aria-labelledby]=\"label ? (id || componentId) + '-label' : null\"\n    tabindex=\"0\"\n    (keydown.space)=\"$event.preventDefault(); toggle()\"\n    (keydown.enter)=\"$event.preventDefault(); toggle()\"\n  >\n    @if (!checked && indeterminate) {\n      <i class=\"pi pi-minus i-checkbox-icon\"></i>\n    }\n    @if (!indeterminate) {\n      <i\n        class=\"pi pi-check i-checkbox-icon\"\n        [style.opacity]=\"checked ? '1' : '0'\"\n      ></i>\n    }\n  </div>\n  @if (label) {\n    <label\n      [id]=\"(id || componentId) + '-label'\"\n      class=\"i-checkbox-label\"\n      (click)=\"toggle()\"\n    >\n      {{ label }}\n    </label>\n  }\n</div>\n", styles: [".i-checkbox-wrapper .i-checkbox{border:1px solid var(--surface-border);background-color:var(--surface-ground)}.i-checkbox-wrapper .i-checkbox:hover:not(.i-checkbox--disabled){border-color:var(--color-primary)}.i-checkbox-wrapper .i-checkbox:focus{box-shadow:0 2px 10px #0003}.i-checkbox-wrapper .i-checkbox.i-checkbox--checked{border-color:var(--color-primary);background-color:var(--color-primary)}.i-checkbox-wrapper .i-checkbox.i-checkbox--checked .i-checkbox-icon{color:var(--color-contrast-inverse)}.i-checkbox-wrapper .i-checkbox.i-checkbox--checked:hover{border-color:color-mix(in srgb,var(--color-primary) 80%,transparent);background-color:color-mix(in srgb,var(--color-primary) 80%,transparent)}.i-checkbox-wrapper .i-checkbox-label{color:var(--color-text-primary)}.i-checkbox-wrapper.i-checkbox--disabled .i-checkbox,.i-checkbox-wrapper.i-checkbox--disabled .i-checkbox.i-checkbox--checked{border-color:var(--color-disabled-border);background-color:var(--color-disabled-background)}.i-checkbox-wrapper.i-checkbox--disabled .i-checkbox.i-checkbox--checked .i-checkbox-icon,.i-checkbox-wrapper.i-checkbox--disabled .i-checkbox-label{color:var(--color-text-disabled)}.i-checkbox-wrapper{display:inline-flex;align-items:center;gap:8px;font-size:1em}.i-checkbox-wrapper.i-checkbox--disabled{opacity:.6;cursor:not-allowed}.i-checkbox-wrapper.i-checkbox--disabled .i-checkbox,.i-checkbox-wrapper.i-checkbox--disabled .i-checkbox-label{cursor:not-allowed;pointer-events:none}.i-checkbox-wrapper.i-checkbox--readonly .i-checkbox,.i-checkbox-wrapper.i-checkbox--readonly .i-checkbox-label{cursor:default}.i-checkbox-wrapper.i-checkbox--small{font-size:.9em;gap:6px}.i-checkbox-wrapper.i-checkbox--small .i-checkbox{width:14px;height:14px;padding:0 0 0 1px}.i-checkbox-wrapper.i-checkbox--small .i-checkbox .i-checkbox-icon{font-size:8px}.i-checkbox-wrapper.i-checkbox--medium{font-size:1em;gap:8px}.i-checkbox-wrapper.i-checkbox--medium .i-checkbox{width:16px;height:16px}.i-checkbox-wrapper.i-checkbox--medium .i-checkbox .i-checkbox-icon{font-size:10px}.i-checkbox-wrapper.i-checkbox--large{font-size:1.2em;gap:10px}.i-checkbox-wrapper.i-checkbox--large .i-checkbox{width:20px;height:20px}.i-checkbox-wrapper.i-checkbox--large .i-checkbox .i-checkbox-icon{font-size:12px}.i-checkbox-wrapper .i-checkbox{position:relative;display:inline-flex;align-items:center;justify-content:center;border-radius:3px;transition:all .15s ease;cursor:pointer;box-sizing:border-box}.i-checkbox-wrapper .i-checkbox:focus{outline:none;box-shadow:0 0 0 2px #3b82f64d}.i-checkbox-wrapper .i-checkbox .i-checkbox-icon{font-size:10px;font-weight:700;transition:all .15s ease}.i-checkbox-wrapper .i-checkbox-label{cursor:pointer;-webkit-user-select:none;user-select:none;line-height:1.4}\n"] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: ICheckbox, decorators: [{
             type: Component,
@@ -1833,7 +1833,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.12", ngImpo
                             useExisting: forwardRef(() => ICheckbox),
                             multi: true,
                         },
-                    ], template: "<div\n  class=\"i-checkbox-wrapper\"\n  [class.i-checkbox--disabled]=\"disabled\"\n  [class.i-checkbox--readonly]=\"readonly\"\n  [class.i-checkbox--small]=\"size === 'small'\"\n  [class.i-checkbox--medium]=\"size === 'medium'\"\n  [class.i-checkbox--large]=\"size === 'large'\"\n>\n  <div\n    class=\"i-checkbox\"\n    [class.i-checkbox--checked]=\"checked\"\n    (click)=\"toggle()\"\n    [attr.id]=\"id || componentId\"\n    role=\"checkbox\"\n    [attr.aria-checked]=\"indeterminate ? 'mixed' : checked\"\n    [attr.aria-disabled]=\"disabled\"\n    [attr.aria-readonly]=\"readonly\"\n    [attr.aria-labelledby]=\"label ? (id || componentId) + '-label' : null\"\n    tabindex=\"0\"\n    (keydown.space)=\"$event.preventDefault(); toggle()\"\n    (keydown.enter)=\"$event.preventDefault(); toggle()\"\n  >\n    @if (!checked && indeterminate) {\n    <i class=\"pi pi-minus i-checkbox-icon\"></i>\n    } @if (!indeterminate) {\n    <i\n      class=\"pi pi-check i-checkbox-icon\"\n      [style.opacity]=\"checked ? '1' : '0'\"\n    ></i>\n    }\n  </div>\n  @if (label) {\n  <label\n    [id]=\"(id || componentId) + '-label'\"\n    class=\"i-checkbox-label\"\n    (click)=\"toggle()\"\n  >\n    {{ label }}\n  </label>\n  }\n</div>\n", styles: [".i-checkbox-wrapper .i-checkbox{border:1px solid var(--surface-border);background-color:var(--surface-ground)}.i-checkbox-wrapper .i-checkbox:hover:not(.i-checkbox--disabled){border-color:var(--color-primary)}.i-checkbox-wrapper .i-checkbox:focus{box-shadow:0 2px 10px #0003}.i-checkbox-wrapper .i-checkbox.i-checkbox--checked{border-color:var(--color-primary);background-color:var(--color-primary)}.i-checkbox-wrapper .i-checkbox.i-checkbox--checked .i-checkbox-icon{color:var(--color-contrast-inverse)}.i-checkbox-wrapper .i-checkbox.i-checkbox--checked:hover{border-color:color-mix(in srgb,var(--color-primary) 80%,transparent);background-color:color-mix(in srgb,var(--color-primary) 80%,transparent)}.i-checkbox-wrapper .i-checkbox-label{color:var(--color-text-primary)}.i-checkbox-wrapper.i-checkbox--disabled .i-checkbox,.i-checkbox-wrapper.i-checkbox--disabled .i-checkbox.i-checkbox--checked{border-color:var(--color-disabled-border);background-color:var(--color-disabled-background)}.i-checkbox-wrapper.i-checkbox--disabled .i-checkbox.i-checkbox--checked .i-checkbox-icon,.i-checkbox-wrapper.i-checkbox--disabled .i-checkbox-label{color:var(--color-text-disabled)}.i-checkbox-wrapper{display:inline-flex;align-items:center;gap:8px;font-size:1em}.i-checkbox-wrapper.i-checkbox--disabled{opacity:.6;cursor:not-allowed}.i-checkbox-wrapper.i-checkbox--disabled .i-checkbox,.i-checkbox-wrapper.i-checkbox--disabled .i-checkbox-label{cursor:not-allowed;pointer-events:none}.i-checkbox-wrapper.i-checkbox--readonly .i-checkbox,.i-checkbox-wrapper.i-checkbox--readonly .i-checkbox-label{cursor:default}.i-checkbox-wrapper.i-checkbox--small{font-size:.9em;gap:6px}.i-checkbox-wrapper.i-checkbox--small .i-checkbox{width:14px;height:14px;padding:0 0 0 1px}.i-checkbox-wrapper.i-checkbox--small .i-checkbox .i-checkbox-icon{font-size:8px}.i-checkbox-wrapper.i-checkbox--medium{font-size:1em;gap:8px}.i-checkbox-wrapper.i-checkbox--medium .i-checkbox{width:16px;height:16px}.i-checkbox-wrapper.i-checkbox--medium .i-checkbox .i-checkbox-icon{font-size:10px}.i-checkbox-wrapper.i-checkbox--large{font-size:1.2em;gap:10px}.i-checkbox-wrapper.i-checkbox--large .i-checkbox{width:20px;height:20px}.i-checkbox-wrapper.i-checkbox--large .i-checkbox .i-checkbox-icon{font-size:12px}.i-checkbox-wrapper .i-checkbox{position:relative;display:inline-flex;align-items:center;justify-content:center;border-radius:3px;transition:all .15s ease;cursor:pointer;box-sizing:border-box}.i-checkbox-wrapper .i-checkbox:focus{outline:none;box-shadow:0 0 0 2px #3b82f64d}.i-checkbox-wrapper .i-checkbox .i-checkbox-icon{font-size:10px;font-weight:700;transition:all .15s ease}.i-checkbox-wrapper .i-checkbox-label{cursor:pointer;-webkit-user-select:none;user-select:none;line-height:1.4}\n"] }]
+                    ], template: "<div\n  class=\"i-checkbox-wrapper\"\n  [class.i-checkbox--disabled]=\"disabled\"\n  [class.i-checkbox--readonly]=\"readonly\"\n  [class.i-checkbox--small]=\"size === 'small'\"\n  [class.i-checkbox--medium]=\"size === 'medium'\"\n  [class.i-checkbox--large]=\"size === 'large'\"\n>\n  <div\n    class=\"i-checkbox\"\n    [class.i-checkbox--checked]=\"checked\"\n    (click)=\"toggle()\"\n    [attr.id]=\"id || componentId\"\n    role=\"checkbox\"\n    [attr.aria-checked]=\"indeterminate ? 'mixed' : checked\"\n    [attr.aria-disabled]=\"disabled\"\n    [attr.aria-readonly]=\"readonly\"\n    [attr.aria-labelledby]=\"label ? (id || componentId) + '-label' : null\"\n    tabindex=\"0\"\n    (keydown.space)=\"$event.preventDefault(); toggle()\"\n    (keydown.enter)=\"$event.preventDefault(); toggle()\"\n  >\n    @if (!checked && indeterminate) {\n      <i class=\"pi pi-minus i-checkbox-icon\"></i>\n    }\n    @if (!indeterminate) {\n      <i\n        class=\"pi pi-check i-checkbox-icon\"\n        [style.opacity]=\"checked ? '1' : '0'\"\n      ></i>\n    }\n  </div>\n  @if (label) {\n    <label\n      [id]=\"(id || componentId) + '-label'\"\n      class=\"i-checkbox-label\"\n      (click)=\"toggle()\"\n    >\n      {{ label }}\n    </label>\n  }\n</div>\n", styles: [".i-checkbox-wrapper .i-checkbox{border:1px solid var(--surface-border);background-color:var(--surface-ground)}.i-checkbox-wrapper .i-checkbox:hover:not(.i-checkbox--disabled){border-color:var(--color-primary)}.i-checkbox-wrapper .i-checkbox:focus{box-shadow:0 2px 10px #0003}.i-checkbox-wrapper .i-checkbox.i-checkbox--checked{border-color:var(--color-primary);background-color:var(--color-primary)}.i-checkbox-wrapper .i-checkbox.i-checkbox--checked .i-checkbox-icon{color:var(--color-contrast-inverse)}.i-checkbox-wrapper .i-checkbox.i-checkbox--checked:hover{border-color:color-mix(in srgb,var(--color-primary) 80%,transparent);background-color:color-mix(in srgb,var(--color-primary) 80%,transparent)}.i-checkbox-wrapper .i-checkbox-label{color:var(--color-text-primary)}.i-checkbox-wrapper.i-checkbox--disabled .i-checkbox,.i-checkbox-wrapper.i-checkbox--disabled .i-checkbox.i-checkbox--checked{border-color:var(--color-disabled-border);background-color:var(--color-disabled-background)}.i-checkbox-wrapper.i-checkbox--disabled .i-checkbox.i-checkbox--checked .i-checkbox-icon,.i-checkbox-wrapper.i-checkbox--disabled .i-checkbox-label{color:var(--color-text-disabled)}.i-checkbox-wrapper{display:inline-flex;align-items:center;gap:8px;font-size:1em}.i-checkbox-wrapper.i-checkbox--disabled{opacity:.6;cursor:not-allowed}.i-checkbox-wrapper.i-checkbox--disabled .i-checkbox,.i-checkbox-wrapper.i-checkbox--disabled .i-checkbox-label{cursor:not-allowed;pointer-events:none}.i-checkbox-wrapper.i-checkbox--readonly .i-checkbox,.i-checkbox-wrapper.i-checkbox--readonly .i-checkbox-label{cursor:default}.i-checkbox-wrapper.i-checkbox--small{font-size:.9em;gap:6px}.i-checkbox-wrapper.i-checkbox--small .i-checkbox{width:14px;height:14px;padding:0 0 0 1px}.i-checkbox-wrapper.i-checkbox--small .i-checkbox .i-checkbox-icon{font-size:8px}.i-checkbox-wrapper.i-checkbox--medium{font-size:1em;gap:8px}.i-checkbox-wrapper.i-checkbox--medium .i-checkbox{width:16px;height:16px}.i-checkbox-wrapper.i-checkbox--medium .i-checkbox .i-checkbox-icon{font-size:10px}.i-checkbox-wrapper.i-checkbox--large{font-size:1.2em;gap:10px}.i-checkbox-wrapper.i-checkbox--large .i-checkbox{width:20px;height:20px}.i-checkbox-wrapper.i-checkbox--large .i-checkbox .i-checkbox-icon{font-size:12px}.i-checkbox-wrapper .i-checkbox{position:relative;display:inline-flex;align-items:center;justify-content:center;border-radius:3px;transition:all .15s ease;cursor:pointer;box-sizing:border-box}.i-checkbox-wrapper .i-checkbox:focus{outline:none;box-shadow:0 0 0 2px #3b82f64d}.i-checkbox-wrapper .i-checkbox .i-checkbox-icon{font-size:10px;font-weight:700;transition:all .15s ease}.i-checkbox-wrapper .i-checkbox-label{cursor:pointer;-webkit-user-select:none;user-select:none;line-height:1.4}\n"] }]
         }], propDecorators: { label: [{
                 type: Input
             }], id: [{
@@ -1937,11 +1937,11 @@ class IChip {
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: IChip, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.12", type: IChip, isStandalone: true, selector: "i-chip", inputs: { label: "label", icon: "icon", image: "image", removable: "removable", removeIcon: "removeIcon", styleClass: "styleClass", disabled: "disabled" }, outputs: { onRemove: "onRemove" }, ngImport: i0, template: "<div class=\"i-chip\" [class.i-chip-disabled]=\"disabled\" [ngClass]=\"styleClass\">\n  @if (icon) {\n  <i [class]=\"icon\" class=\"i-chip-icon\"></i>\n  } @if (image) {\n  <img [src]=\"image\" [alt]=\"label\" class=\"i-chip-image\" />\n  } @if (label) {\n  <span class=\"i-chip-text\">{{ label }}</span>\n  }\n  <ng-content></ng-content>\n  @if (removable && !disabled) {\n  <i\n    [class]=\"removeIcon\"\n    class=\"i-chip-remove-icon\"\n    (click)=\"onRemoveClick($event)\"\n  ></i>\n  }\n</div>\n", styles: [".i-chip{background:var(--surface-hover);color:var(--color-text-primary);border:1px solid var(--surface-border)}.i-chip:hover{background:var(--surface-hover);opacity:.9}.i-chip .i-chip-icon{color:var(--color-primary)}.i-chip .i-chip-remove-icon{color:var(--color-text-secondary)}.i-chip .i-chip-remove-icon:hover{color:var(--color-danger)}.i-chip.i-chip-disabled{background:var(--color-disabled-background);color:var(--color-text-disabled);border-color:var(--color-disabled-border)}.i-chip.i-chip-disabled .i-chip-icon,.i-chip.i-chip-disabled .i-chip-remove-icon{color:var(--color-text-disabled)}.i-chip{display:inline-flex;align-items:center;gap:6px;padding:4px 12px;border-radius:16px;font-size:1em;font-weight:500;transition:all .2s ease;-webkit-user-select:none;user-select:none;max-width:150px}.i-chip.i-chip-disabled{opacity:.6;cursor:not-allowed}.i-chip .i-chip-icon{flex-shrink:0}.i-chip .i-chip-image{width:20px;height:20px;border-radius:50%;object-fit:cover;flex-shrink:0}.i-chip .i-chip-text{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;flex:1;min-width:0}.i-chip .i-chip-remove-icon{cursor:pointer;opacity:.7;transition:opacity .2s ease;flex-shrink:0;margin-left:4px}.i-chip .i-chip-remove-icon:hover{opacity:1}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.12", type: IChip, isStandalone: true, selector: "i-chip", inputs: { label: "label", icon: "icon", image: "image", removable: "removable", removeIcon: "removeIcon", styleClass: "styleClass", disabled: "disabled" }, outputs: { onRemove: "onRemove" }, ngImport: i0, template: "<div class=\"i-chip\" [class.i-chip-disabled]=\"disabled\" [ngClass]=\"styleClass\">\n  @if (icon) {\n    <i [class]=\"icon\" class=\"i-chip-icon\"></i>\n  }\n  @if (image) {\n    <img [src]=\"image\" [alt]=\"label\" class=\"i-chip-image\" />\n  }\n  @if (label) {\n    <span class=\"i-chip-text\">{{ label }}</span>\n  }\n  <ng-content></ng-content>\n  @if (removable && !disabled) {\n    <i\n      [class]=\"removeIcon\"\n      class=\"i-chip-remove-icon\"\n      (click)=\"onRemoveClick($event)\"\n    ></i>\n  }\n</div>\n", styles: [".i-chip{background:var(--surface-hover);color:var(--color-text-primary);border:1px solid var(--surface-border)}.i-chip:hover{background:var(--surface-hover);opacity:.9}.i-chip .i-chip-icon{color:var(--color-primary)}.i-chip .i-chip-remove-icon{color:var(--color-text-secondary)}.i-chip .i-chip-remove-icon:hover{color:var(--color-danger)}.i-chip.i-chip-disabled{background:var(--color-disabled-background);color:var(--color-text-disabled);border-color:var(--color-disabled-border)}.i-chip.i-chip-disabled .i-chip-icon,.i-chip.i-chip-disabled .i-chip-remove-icon{color:var(--color-text-disabled)}.i-chip{display:inline-flex;align-items:center;gap:6px;padding:4px 12px;border-radius:16px;font-size:1em;font-weight:500;transition:all .2s ease;-webkit-user-select:none;user-select:none;max-width:150px}.i-chip.i-chip-disabled{opacity:.6;cursor:not-allowed}.i-chip .i-chip-icon{flex-shrink:0}.i-chip .i-chip-image{width:20px;height:20px;border-radius:50%;object-fit:cover;flex-shrink:0}.i-chip .i-chip-text{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;flex:1;min-width:0}.i-chip .i-chip-remove-icon{cursor:pointer;opacity:.7;transition:opacity .2s ease;flex-shrink:0;margin-left:4px}.i-chip .i-chip-remove-icon:hover{opacity:1}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: IChip, decorators: [{
             type: Component,
-            args: [{ selector: 'i-chip', standalone: true, imports: [CommonModule], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"i-chip\" [class.i-chip-disabled]=\"disabled\" [ngClass]=\"styleClass\">\n  @if (icon) {\n  <i [class]=\"icon\" class=\"i-chip-icon\"></i>\n  } @if (image) {\n  <img [src]=\"image\" [alt]=\"label\" class=\"i-chip-image\" />\n  } @if (label) {\n  <span class=\"i-chip-text\">{{ label }}</span>\n  }\n  <ng-content></ng-content>\n  @if (removable && !disabled) {\n  <i\n    [class]=\"removeIcon\"\n    class=\"i-chip-remove-icon\"\n    (click)=\"onRemoveClick($event)\"\n  ></i>\n  }\n</div>\n", styles: [".i-chip{background:var(--surface-hover);color:var(--color-text-primary);border:1px solid var(--surface-border)}.i-chip:hover{background:var(--surface-hover);opacity:.9}.i-chip .i-chip-icon{color:var(--color-primary)}.i-chip .i-chip-remove-icon{color:var(--color-text-secondary)}.i-chip .i-chip-remove-icon:hover{color:var(--color-danger)}.i-chip.i-chip-disabled{background:var(--color-disabled-background);color:var(--color-text-disabled);border-color:var(--color-disabled-border)}.i-chip.i-chip-disabled .i-chip-icon,.i-chip.i-chip-disabled .i-chip-remove-icon{color:var(--color-text-disabled)}.i-chip{display:inline-flex;align-items:center;gap:6px;padding:4px 12px;border-radius:16px;font-size:1em;font-weight:500;transition:all .2s ease;-webkit-user-select:none;user-select:none;max-width:150px}.i-chip.i-chip-disabled{opacity:.6;cursor:not-allowed}.i-chip .i-chip-icon{flex-shrink:0}.i-chip .i-chip-image{width:20px;height:20px;border-radius:50%;object-fit:cover;flex-shrink:0}.i-chip .i-chip-text{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;flex:1;min-width:0}.i-chip .i-chip-remove-icon{cursor:pointer;opacity:.7;transition:opacity .2s ease;flex-shrink:0;margin-left:4px}.i-chip .i-chip-remove-icon:hover{opacity:1}\n"] }]
+            args: [{ selector: 'i-chip', standalone: true, imports: [CommonModule], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"i-chip\" [class.i-chip-disabled]=\"disabled\" [ngClass]=\"styleClass\">\n  @if (icon) {\n    <i [class]=\"icon\" class=\"i-chip-icon\"></i>\n  }\n  @if (image) {\n    <img [src]=\"image\" [alt]=\"label\" class=\"i-chip-image\" />\n  }\n  @if (label) {\n    <span class=\"i-chip-text\">{{ label }}</span>\n  }\n  <ng-content></ng-content>\n  @if (removable && !disabled) {\n    <i\n      [class]=\"removeIcon\"\n      class=\"i-chip-remove-icon\"\n      (click)=\"onRemoveClick($event)\"\n    ></i>\n  }\n</div>\n", styles: [".i-chip{background:var(--surface-hover);color:var(--color-text-primary);border:1px solid var(--surface-border)}.i-chip:hover{background:var(--surface-hover);opacity:.9}.i-chip .i-chip-icon{color:var(--color-primary)}.i-chip .i-chip-remove-icon{color:var(--color-text-secondary)}.i-chip .i-chip-remove-icon:hover{color:var(--color-danger)}.i-chip.i-chip-disabled{background:var(--color-disabled-background);color:var(--color-text-disabled);border-color:var(--color-disabled-border)}.i-chip.i-chip-disabled .i-chip-icon,.i-chip.i-chip-disabled .i-chip-remove-icon{color:var(--color-text-disabled)}.i-chip{display:inline-flex;align-items:center;gap:6px;padding:4px 12px;border-radius:16px;font-size:1em;font-weight:500;transition:all .2s ease;-webkit-user-select:none;user-select:none;max-width:150px}.i-chip.i-chip-disabled{opacity:.6;cursor:not-allowed}.i-chip .i-chip-icon{flex-shrink:0}.i-chip .i-chip-image{width:20px;height:20px;border-radius:50%;object-fit:cover;flex-shrink:0}.i-chip .i-chip-text{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;flex:1;min-width:0}.i-chip .i-chip-remove-icon{cursor:pointer;opacity:.7;transition:opacity .2s ease;flex-shrink:0;margin-left:4px}.i-chip .i-chip-remove-icon:hover{opacity:1}\n"] }]
         }], propDecorators: { label: [{
                 type: Input
             }], icon: [{
@@ -2093,11 +2093,11 @@ class IChipsComponent {
         this.closedAll.emit();
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: IChipsComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.12", type: IChipsComponent, isStandalone: true, selector: "i-chips", inputs: { chips: "chips", removable: "removable", disabled: "disabled", collapseOnOverflow: "collapseOnOverflow", overflowLabel: "overflowLabel", boxed: "boxed", allowCloseAll: "allowCloseAll", label: "label", useFloatLabel: "useFloatLabel", showError: "showError" }, outputs: { closedAll: "closedAll", removeChip: "removeChip" }, viewQueries: [{ propertyName: "chipsViewportRef", first: true, predicate: ["chipsViewport"], descendants: true }, { propertyName: "chipsListRef", first: true, predicate: ["chipsList"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div\n  class=\"i-chips-wrapper\"\n  [class.i-chips-wrapper--float]=\"useFloatLabel\"\n  [class.i-chips-wrapper--error]=\"showError\"\n  [attr.id]=\"componentId\"\n>\n  <div\n    class=\"i-chips-container\"\n    #chipsViewport\n    [class.i-chips-container--collapse]=\"collapseOnOverflow\"\n    [class.i-chips-container--overflow]=\"collapseOnOverflow && chipsOverflow\"\n    [class.i-chips-box]=\"boxed\"\n    [class.i-chips--disabled]=\"disabled\"\n    [class.i-chips--empty]=\"!chips || chips.length === 0\"\n    [attr.tabindex]=\"boxed && !disabled ? 0 : null\"\n  >\n    <div class=\"i-chips-list\" #chipsList>\n      @for (chip of chips; track trackByValue($index, chip)) {\n      <i-chip\n        [label]=\"chip.label\"\n        [icon]=\"chip.icon\"\n        [removable]=\"chip.removable ?? removable\"\n        [disabled]=\"disabled || !!chip.disabled\"\n        (onRemove)=\"onChipRemove(chip, $event)\"\n      ></i-chip>\n      }\n    </div>\n\n    @if (allowCloseAll && chips && chips.length > 0) {\n    <div class=\"i-chips-actions\">\n      <i-button\n        [text]=\"true\"\n        [size]=\"'xtra-small'\"\n        [severity]=\"'contrast'\"\n        [icon]=\"'pi pi-times'\"\n        (clicked)=\"onCloseAllClicked($event)\"\n      ></i-button>\n    </div>\n    } @if (collapseOnOverflow && chipsOverflow) {\n    <div class=\"i-chips-summary\">\n      {{ overflowText }}\n    </div>\n    }\n  </div>\n\n  @if (useFloatLabel && label) {\n  <label\n    class=\"i-chips-label\"\n    [class.i-chips-label--floated]=\"chips && chips.length > 0\"\n    [class.i-chips-label--error]=\"showError\"\n  >\n    {{ label }}\n  </label>\n  }\n</div>\n", styles: [".i-chips-container{color:var(--color-text-primary)}.i-chips-summary{color:var(--color-text-secondary)}.i-chips-label{color:var(--color-text-secondary);background:transparent}.i-chips-label--floated{background:var(--color-component-background-secondary)}.i-chips-container:focus-within+.i-chips-label{background:var(--color-component-background-secondary)}.i-chips-label--error{color:var(--color-danger)}.i-chips-box{border:1px solid var(--surface-border);background:var(--color-component-background)}.i-chips-box:focus{outline:none;border-color:var(--color-primary);box-shadow:0 2px 10px #0003}.i-chips-box:focus-within{border-color:var(--color-primary);box-shadow:0 2px 10px #0003}.i-chips-box.i-chips--disabled{background:var(--color-disabled-background);border-color:var(--color-disabled-border);color:var(--color-text-disabled)}.i-chips-wrapper--error .i-chips-box{border-color:var(--color-danger)}:host{display:block;width:100%}.i-chips-wrapper{position:relative;width:100%}.i-chips-wrapper--float{margin-top:20px}.i-chips-wrapper--float .i-chips-label{position:absolute;top:14px;left:12px;padding:0 4px;pointer-events:none;transition:all .15s ease}.i-chips-wrapper--float .i-chips-label--floated{top:-8px;font-size:.85em}.i-chips-wrapper--float .i-chips-container:focus-within+.i-chips-label{top:-8px;font-size:.85em}.i-chips-container{position:relative;display:flex;flex-wrap:wrap;align-content:flex-start;gap:8px;width:100%;min-height:32px}.i-chips-container--collapse{flex-wrap:nowrap;overflow:hidden}.i-chips-container--collapse .i-chips-list{white-space:nowrap;max-width:100%;min-width:0}.i-chips-container--overflow .i-chips-list{visibility:hidden}.i-chips-container .i-chips-list{display:flex;flex-wrap:inherit;gap:inherit;width:100%;padding-right:40px}.i-chips-container .i-chips-summary{position:absolute;inset:0 40px 0 0;display:flex;align-items:center;padding:0 16px;background:inherit}.i-chips-container .i-chips-actions{position:absolute;right:20px;top:50%;transform:translateY(-50%);display:flex;align-items:center;justify-content:center}.i-chips-box{box-sizing:border-box;border-radius:4px;padding:9px 12px;min-height:42px;align-items:center;transition:border-color .15s ease,box-shadow .15s ease;cursor:pointer}.i-chips-box:focus{outline:none}.i-chips-box.i-chips-container--collapse{padding-right:40px}\n"], dependencies: [{ kind: "component", type: IChip, selector: "i-chip", inputs: ["label", "icon", "image", "removable", "removeIcon", "styleClass", "disabled"], outputs: ["onRemove"] }, { kind: "component", type: IButton, selector: "i-button", inputs: ["severity", "size", "type", "disabled", "outlined", "raised", "text", "icon", "fluid", "loading"], outputs: ["clicked"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.12", type: IChipsComponent, isStandalone: true, selector: "i-chips", inputs: { chips: "chips", removable: "removable", disabled: "disabled", collapseOnOverflow: "collapseOnOverflow", overflowLabel: "overflowLabel", boxed: "boxed", allowCloseAll: "allowCloseAll", label: "label", useFloatLabel: "useFloatLabel", showError: "showError" }, outputs: { closedAll: "closedAll", removeChip: "removeChip" }, viewQueries: [{ propertyName: "chipsViewportRef", first: true, predicate: ["chipsViewport"], descendants: true }, { propertyName: "chipsListRef", first: true, predicate: ["chipsList"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div\n  class=\"i-chips-wrapper\"\n  [class.i-chips-wrapper--float]=\"useFloatLabel\"\n  [class.i-chips-wrapper--error]=\"showError\"\n  [attr.id]=\"componentId\"\n>\n  <div\n    class=\"i-chips-container\"\n    #chipsViewport\n    [class.i-chips-container--collapse]=\"collapseOnOverflow\"\n    [class.i-chips-container--overflow]=\"collapseOnOverflow && chipsOverflow\"\n    [class.i-chips-box]=\"boxed\"\n    [class.i-chips--disabled]=\"disabled\"\n    [class.i-chips--empty]=\"!chips || chips.length === 0\"\n    [attr.tabindex]=\"boxed && !disabled ? 0 : null\"\n  >\n    <div class=\"i-chips-list\" #chipsList>\n      @for (chip of chips; track trackByValue($index, chip)) {\n        <i-chip\n          [label]=\"chip.label\"\n          [icon]=\"chip.icon\"\n          [removable]=\"chip.removable ?? removable\"\n          [disabled]=\"disabled || !!chip.disabled\"\n          (onRemove)=\"onChipRemove(chip, $event)\"\n        ></i-chip>\n      }\n    </div>\n\n    @if (allowCloseAll && chips && chips.length > 0) {\n      <div class=\"i-chips-actions\">\n        <i-button\n          [text]=\"true\"\n          [size]=\"'xtra-small'\"\n          [severity]=\"'contrast'\"\n          [icon]=\"'pi pi-times'\"\n          (clicked)=\"onCloseAllClicked($event)\"\n        ></i-button>\n      </div>\n    }\n    @if (collapseOnOverflow && chipsOverflow) {\n      <div class=\"i-chips-summary\">\n        {{ overflowText }}\n      </div>\n    }\n  </div>\n\n  @if (useFloatLabel && label) {\n    <label\n      class=\"i-chips-label\"\n      [class.i-chips-label--floated]=\"chips && chips.length > 0\"\n      [class.i-chips-label--error]=\"showError\"\n    >\n      {{ label }}\n    </label>\n  }\n</div>\n", styles: [".i-chips-container{color:var(--color-text-primary)}.i-chips-summary{color:var(--color-text-secondary)}.i-chips-label{color:var(--color-text-secondary);background:transparent}.i-chips-label--floated{background:var(--color-component-background-secondary)}.i-chips-container:focus-within+.i-chips-label{background:var(--color-component-background-secondary)}.i-chips-label--error{color:var(--color-danger)}.i-chips-box{border:1px solid var(--surface-border);background:var(--color-component-background)}.i-chips-box:focus{outline:none;border-color:var(--color-primary);box-shadow:0 2px 10px #0003}.i-chips-box:focus-within{border-color:var(--color-primary);box-shadow:0 2px 10px #0003}.i-chips-box.i-chips--disabled{background:var(--color-disabled-background);border-color:var(--color-disabled-border);color:var(--color-text-disabled)}.i-chips-wrapper--error .i-chips-box{border-color:var(--color-danger)}:host{display:block;width:100%}.i-chips-wrapper{position:relative;width:100%}.i-chips-wrapper--float{margin-top:20px}.i-chips-wrapper--float .i-chips-label{position:absolute;top:14px;left:12px;padding:0 4px;pointer-events:none;transition:all .15s ease}.i-chips-wrapper--float .i-chips-label--floated{top:-8px;font-size:.85em}.i-chips-wrapper--float .i-chips-container:focus-within+.i-chips-label{top:-8px;font-size:.85em}.i-chips-container{position:relative;display:flex;flex-wrap:wrap;align-content:flex-start;gap:8px;width:100%;min-height:32px}.i-chips-container--collapse{flex-wrap:nowrap;overflow:hidden}.i-chips-container--collapse .i-chips-list{white-space:nowrap;max-width:100%;min-width:0}.i-chips-container--overflow .i-chips-list{visibility:hidden}.i-chips-container .i-chips-list{display:flex;flex-wrap:inherit;gap:inherit;width:100%;padding-right:40px}.i-chips-container .i-chips-summary{position:absolute;inset:0 40px 0 0;display:flex;align-items:center;padding:0 16px;background:inherit}.i-chips-container .i-chips-actions{position:absolute;right:20px;top:50%;transform:translateY(-50%);display:flex;align-items:center;justify-content:center}.i-chips-box{box-sizing:border-box;border-radius:4px;padding:9px 12px;min-height:42px;align-items:center;transition:border-color .15s ease,box-shadow .15s ease;cursor:pointer}.i-chips-box:focus{outline:none}.i-chips-box.i-chips-container--collapse{padding-right:40px}\n"], dependencies: [{ kind: "component", type: IChip, selector: "i-chip", inputs: ["label", "icon", "image", "removable", "removeIcon", "styleClass", "disabled"], outputs: ["onRemove"] }, { kind: "component", type: IButton, selector: "i-button", inputs: ["severity", "size", "type", "disabled", "outlined", "raised", "text", "icon", "fluid", "loading"], outputs: ["clicked"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: IChipsComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'i-chips', standalone: true, imports: [IChip, IButton], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div\n  class=\"i-chips-wrapper\"\n  [class.i-chips-wrapper--float]=\"useFloatLabel\"\n  [class.i-chips-wrapper--error]=\"showError\"\n  [attr.id]=\"componentId\"\n>\n  <div\n    class=\"i-chips-container\"\n    #chipsViewport\n    [class.i-chips-container--collapse]=\"collapseOnOverflow\"\n    [class.i-chips-container--overflow]=\"collapseOnOverflow && chipsOverflow\"\n    [class.i-chips-box]=\"boxed\"\n    [class.i-chips--disabled]=\"disabled\"\n    [class.i-chips--empty]=\"!chips || chips.length === 0\"\n    [attr.tabindex]=\"boxed && !disabled ? 0 : null\"\n  >\n    <div class=\"i-chips-list\" #chipsList>\n      @for (chip of chips; track trackByValue($index, chip)) {\n      <i-chip\n        [label]=\"chip.label\"\n        [icon]=\"chip.icon\"\n        [removable]=\"chip.removable ?? removable\"\n        [disabled]=\"disabled || !!chip.disabled\"\n        (onRemove)=\"onChipRemove(chip, $event)\"\n      ></i-chip>\n      }\n    </div>\n\n    @if (allowCloseAll && chips && chips.length > 0) {\n    <div class=\"i-chips-actions\">\n      <i-button\n        [text]=\"true\"\n        [size]=\"'xtra-small'\"\n        [severity]=\"'contrast'\"\n        [icon]=\"'pi pi-times'\"\n        (clicked)=\"onCloseAllClicked($event)\"\n      ></i-button>\n    </div>\n    } @if (collapseOnOverflow && chipsOverflow) {\n    <div class=\"i-chips-summary\">\n      {{ overflowText }}\n    </div>\n    }\n  </div>\n\n  @if (useFloatLabel && label) {\n  <label\n    class=\"i-chips-label\"\n    [class.i-chips-label--floated]=\"chips && chips.length > 0\"\n    [class.i-chips-label--error]=\"showError\"\n  >\n    {{ label }}\n  </label>\n  }\n</div>\n", styles: [".i-chips-container{color:var(--color-text-primary)}.i-chips-summary{color:var(--color-text-secondary)}.i-chips-label{color:var(--color-text-secondary);background:transparent}.i-chips-label--floated{background:var(--color-component-background-secondary)}.i-chips-container:focus-within+.i-chips-label{background:var(--color-component-background-secondary)}.i-chips-label--error{color:var(--color-danger)}.i-chips-box{border:1px solid var(--surface-border);background:var(--color-component-background)}.i-chips-box:focus{outline:none;border-color:var(--color-primary);box-shadow:0 2px 10px #0003}.i-chips-box:focus-within{border-color:var(--color-primary);box-shadow:0 2px 10px #0003}.i-chips-box.i-chips--disabled{background:var(--color-disabled-background);border-color:var(--color-disabled-border);color:var(--color-text-disabled)}.i-chips-wrapper--error .i-chips-box{border-color:var(--color-danger)}:host{display:block;width:100%}.i-chips-wrapper{position:relative;width:100%}.i-chips-wrapper--float{margin-top:20px}.i-chips-wrapper--float .i-chips-label{position:absolute;top:14px;left:12px;padding:0 4px;pointer-events:none;transition:all .15s ease}.i-chips-wrapper--float .i-chips-label--floated{top:-8px;font-size:.85em}.i-chips-wrapper--float .i-chips-container:focus-within+.i-chips-label{top:-8px;font-size:.85em}.i-chips-container{position:relative;display:flex;flex-wrap:wrap;align-content:flex-start;gap:8px;width:100%;min-height:32px}.i-chips-container--collapse{flex-wrap:nowrap;overflow:hidden}.i-chips-container--collapse .i-chips-list{white-space:nowrap;max-width:100%;min-width:0}.i-chips-container--overflow .i-chips-list{visibility:hidden}.i-chips-container .i-chips-list{display:flex;flex-wrap:inherit;gap:inherit;width:100%;padding-right:40px}.i-chips-container .i-chips-summary{position:absolute;inset:0 40px 0 0;display:flex;align-items:center;padding:0 16px;background:inherit}.i-chips-container .i-chips-actions{position:absolute;right:20px;top:50%;transform:translateY(-50%);display:flex;align-items:center;justify-content:center}.i-chips-box{box-sizing:border-box;border-radius:4px;padding:9px 12px;min-height:42px;align-items:center;transition:border-color .15s ease,box-shadow .15s ease;cursor:pointer}.i-chips-box:focus{outline:none}.i-chips-box.i-chips-container--collapse{padding-right:40px}\n"] }]
+            args: [{ selector: 'i-chips', standalone: true, imports: [IChip, IButton], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div\n  class=\"i-chips-wrapper\"\n  [class.i-chips-wrapper--float]=\"useFloatLabel\"\n  [class.i-chips-wrapper--error]=\"showError\"\n  [attr.id]=\"componentId\"\n>\n  <div\n    class=\"i-chips-container\"\n    #chipsViewport\n    [class.i-chips-container--collapse]=\"collapseOnOverflow\"\n    [class.i-chips-container--overflow]=\"collapseOnOverflow && chipsOverflow\"\n    [class.i-chips-box]=\"boxed\"\n    [class.i-chips--disabled]=\"disabled\"\n    [class.i-chips--empty]=\"!chips || chips.length === 0\"\n    [attr.tabindex]=\"boxed && !disabled ? 0 : null\"\n  >\n    <div class=\"i-chips-list\" #chipsList>\n      @for (chip of chips; track trackByValue($index, chip)) {\n        <i-chip\n          [label]=\"chip.label\"\n          [icon]=\"chip.icon\"\n          [removable]=\"chip.removable ?? removable\"\n          [disabled]=\"disabled || !!chip.disabled\"\n          (onRemove)=\"onChipRemove(chip, $event)\"\n        ></i-chip>\n      }\n    </div>\n\n    @if (allowCloseAll && chips && chips.length > 0) {\n      <div class=\"i-chips-actions\">\n        <i-button\n          [text]=\"true\"\n          [size]=\"'xtra-small'\"\n          [severity]=\"'contrast'\"\n          [icon]=\"'pi pi-times'\"\n          (clicked)=\"onCloseAllClicked($event)\"\n        ></i-button>\n      </div>\n    }\n    @if (collapseOnOverflow && chipsOverflow) {\n      <div class=\"i-chips-summary\">\n        {{ overflowText }}\n      </div>\n    }\n  </div>\n\n  @if (useFloatLabel && label) {\n    <label\n      class=\"i-chips-label\"\n      [class.i-chips-label--floated]=\"chips && chips.length > 0\"\n      [class.i-chips-label--error]=\"showError\"\n    >\n      {{ label }}\n    </label>\n  }\n</div>\n", styles: [".i-chips-container{color:var(--color-text-primary)}.i-chips-summary{color:var(--color-text-secondary)}.i-chips-label{color:var(--color-text-secondary);background:transparent}.i-chips-label--floated{background:var(--color-component-background-secondary)}.i-chips-container:focus-within+.i-chips-label{background:var(--color-component-background-secondary)}.i-chips-label--error{color:var(--color-danger)}.i-chips-box{border:1px solid var(--surface-border);background:var(--color-component-background)}.i-chips-box:focus{outline:none;border-color:var(--color-primary);box-shadow:0 2px 10px #0003}.i-chips-box:focus-within{border-color:var(--color-primary);box-shadow:0 2px 10px #0003}.i-chips-box.i-chips--disabled{background:var(--color-disabled-background);border-color:var(--color-disabled-border);color:var(--color-text-disabled)}.i-chips-wrapper--error .i-chips-box{border-color:var(--color-danger)}:host{display:block;width:100%}.i-chips-wrapper{position:relative;width:100%}.i-chips-wrapper--float{margin-top:20px}.i-chips-wrapper--float .i-chips-label{position:absolute;top:14px;left:12px;padding:0 4px;pointer-events:none;transition:all .15s ease}.i-chips-wrapper--float .i-chips-label--floated{top:-8px;font-size:.85em}.i-chips-wrapper--float .i-chips-container:focus-within+.i-chips-label{top:-8px;font-size:.85em}.i-chips-container{position:relative;display:flex;flex-wrap:wrap;align-content:flex-start;gap:8px;width:100%;min-height:32px}.i-chips-container--collapse{flex-wrap:nowrap;overflow:hidden}.i-chips-container--collapse .i-chips-list{white-space:nowrap;max-width:100%;min-width:0}.i-chips-container--overflow .i-chips-list{visibility:hidden}.i-chips-container .i-chips-list{display:flex;flex-wrap:inherit;gap:inherit;width:100%;padding-right:40px}.i-chips-container .i-chips-summary{position:absolute;inset:0 40px 0 0;display:flex;align-items:center;padding:0 16px;background:inherit}.i-chips-container .i-chips-actions{position:absolute;right:20px;top:50%;transform:translateY(-50%);display:flex;align-items:center;justify-content:center}.i-chips-box{box-sizing:border-box;border-radius:4px;padding:9px 12px;min-height:42px;align-items:center;transition:border-color .15s ease,box-shadow .15s ease;cursor:pointer}.i-chips-box:focus{outline:none}.i-chips-box.i-chips-container--collapse{padding-right:40px}\n"] }]
         }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }, { type: i0.NgZone }], propDecorators: { chips: [{
                 type: Input
             }], removable: [{
@@ -2916,11 +2916,11 @@ class IDivider {
      */
     align = 'center';
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: IDivider, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.12", type: IDivider, isStandalone: true, selector: "i-divider", inputs: { layout: "layout", align: "align" }, ngImport: i0, template: "<div\n  class=\"i-divider\"\n  [class.i-divider--horizontal]=\"layout === 'horizontal'\"\n  [class.i-divider--vertical]=\"layout === 'vertical'\"\n  [class.i-divider--align-start]=\"align === 'start'\"\n  [class.i-divider--align-center]=\"align === 'center'\"\n  [class.i-divider--align-end]=\"align === 'end'\"\n  role=\"separator\"\n  [attr.aria-orientation]=\"layout\"\n>\n  @if (layout === 'horizontal') {\n  <span class=\"i-divider-line\"></span>\n  <span class=\"i-divider-content\"><ng-content></ng-content></span>\n  <span class=\"i-divider-line\"></span>\n  } @else {\n  <span class=\"i-divider-line\"></span>\n  }\n</div>\n", styles: [".i-divider{color:var(--color-text-secondary)}.i-divider .i-divider-line{background:var(--surface-border)}:host{display:block}:host:has(.i-divider--vertical){display:inline-flex;align-self:stretch}.i-divider{display:flex;align-items:center}.i-divider--horizontal{width:100%;min-height:1.5rem;margin:1rem 0}.i-divider--horizontal .i-divider-line{height:1px;min-width:1rem}.i-divider--horizontal .i-divider-content{display:inline-flex;align-items:center;flex-shrink:0;padding:0 .75rem;font-size:.875rem;font-weight:500;line-height:1;white-space:nowrap}.i-divider--horizontal .i-divider-content:empty{display:none}.i-divider--horizontal.i-divider--align-start .i-divider-line:first-child{max-width:2rem}.i-divider--horizontal.i-divider--align-center .i-divider-line{flex:1 1 0}.i-divider--horizontal.i-divider--align-end .i-divider-line:last-child{max-width:2rem}.i-divider--vertical{align-self:stretch;justify-content:center;min-height:2rem;margin:0 1rem}.i-divider--vertical .i-divider-line{width:1px;min-height:100%}\n"] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.12", type: IDivider, isStandalone: true, selector: "i-divider", inputs: { layout: "layout", align: "align" }, ngImport: i0, template: "<div\n  class=\"i-divider\"\n  [class.i-divider--horizontal]=\"layout === 'horizontal'\"\n  [class.i-divider--vertical]=\"layout === 'vertical'\"\n  [class.i-divider--align-start]=\"align === 'start'\"\n  [class.i-divider--align-center]=\"align === 'center'\"\n  [class.i-divider--align-end]=\"align === 'end'\"\n  role=\"separator\"\n  [attr.aria-orientation]=\"layout\"\n>\n  @if (layout === \"horizontal\") {\n    <span class=\"i-divider-line\"></span>\n    <span class=\"i-divider-content\"><ng-content></ng-content></span>\n    <span class=\"i-divider-line\"></span>\n  } @else {\n    <span class=\"i-divider-line\"></span>\n  }\n</div>\n", styles: [".i-divider{color:var(--color-text-secondary)}.i-divider .i-divider-line{background:var(--surface-border)}:host{display:block}:host:has(.i-divider--vertical){display:inline-flex;align-self:stretch}.i-divider{display:flex;align-items:center}.i-divider--horizontal{width:100%;min-height:1.5rem;margin:1rem 0}.i-divider--horizontal .i-divider-line{height:1px;min-width:1rem}.i-divider--horizontal .i-divider-content{display:inline-flex;align-items:center;flex-shrink:0;padding:0 .75rem;font-size:.875rem;font-weight:500;line-height:1;white-space:nowrap}.i-divider--horizontal .i-divider-content:empty{display:none}.i-divider--horizontal.i-divider--align-start .i-divider-line:first-child{max-width:2rem}.i-divider--horizontal.i-divider--align-center .i-divider-line{flex:1 1 0}.i-divider--horizontal.i-divider--align-end .i-divider-line:last-child{max-width:2rem}.i-divider--vertical{align-self:stretch;justify-content:center;min-height:2rem;margin:0 1rem}.i-divider--vertical .i-divider-line{width:1px;min-height:100%}\n"] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: IDivider, decorators: [{
             type: Component,
-            args: [{ selector: 'i-divider', standalone: true, imports: [], template: "<div\n  class=\"i-divider\"\n  [class.i-divider--horizontal]=\"layout === 'horizontal'\"\n  [class.i-divider--vertical]=\"layout === 'vertical'\"\n  [class.i-divider--align-start]=\"align === 'start'\"\n  [class.i-divider--align-center]=\"align === 'center'\"\n  [class.i-divider--align-end]=\"align === 'end'\"\n  role=\"separator\"\n  [attr.aria-orientation]=\"layout\"\n>\n  @if (layout === 'horizontal') {\n  <span class=\"i-divider-line\"></span>\n  <span class=\"i-divider-content\"><ng-content></ng-content></span>\n  <span class=\"i-divider-line\"></span>\n  } @else {\n  <span class=\"i-divider-line\"></span>\n  }\n</div>\n", styles: [".i-divider{color:var(--color-text-secondary)}.i-divider .i-divider-line{background:var(--surface-border)}:host{display:block}:host:has(.i-divider--vertical){display:inline-flex;align-self:stretch}.i-divider{display:flex;align-items:center}.i-divider--horizontal{width:100%;min-height:1.5rem;margin:1rem 0}.i-divider--horizontal .i-divider-line{height:1px;min-width:1rem}.i-divider--horizontal .i-divider-content{display:inline-flex;align-items:center;flex-shrink:0;padding:0 .75rem;font-size:.875rem;font-weight:500;line-height:1;white-space:nowrap}.i-divider--horizontal .i-divider-content:empty{display:none}.i-divider--horizontal.i-divider--align-start .i-divider-line:first-child{max-width:2rem}.i-divider--horizontal.i-divider--align-center .i-divider-line{flex:1 1 0}.i-divider--horizontal.i-divider--align-end .i-divider-line:last-child{max-width:2rem}.i-divider--vertical{align-self:stretch;justify-content:center;min-height:2rem;margin:0 1rem}.i-divider--vertical .i-divider-line{width:1px;min-height:100%}\n"] }]
+            args: [{ selector: 'i-divider', standalone: true, imports: [], template: "<div\n  class=\"i-divider\"\n  [class.i-divider--horizontal]=\"layout === 'horizontal'\"\n  [class.i-divider--vertical]=\"layout === 'vertical'\"\n  [class.i-divider--align-start]=\"align === 'start'\"\n  [class.i-divider--align-center]=\"align === 'center'\"\n  [class.i-divider--align-end]=\"align === 'end'\"\n  role=\"separator\"\n  [attr.aria-orientation]=\"layout\"\n>\n  @if (layout === \"horizontal\") {\n    <span class=\"i-divider-line\"></span>\n    <span class=\"i-divider-content\"><ng-content></ng-content></span>\n    <span class=\"i-divider-line\"></span>\n  } @else {\n    <span class=\"i-divider-line\"></span>\n  }\n</div>\n", styles: [".i-divider{color:var(--color-text-secondary)}.i-divider .i-divider-line{background:var(--surface-border)}:host{display:block}:host:has(.i-divider--vertical){display:inline-flex;align-self:stretch}.i-divider{display:flex;align-items:center}.i-divider--horizontal{width:100%;min-height:1.5rem;margin:1rem 0}.i-divider--horizontal .i-divider-line{height:1px;min-width:1rem}.i-divider--horizontal .i-divider-content{display:inline-flex;align-items:center;flex-shrink:0;padding:0 .75rem;font-size:.875rem;font-weight:500;line-height:1;white-space:nowrap}.i-divider--horizontal .i-divider-content:empty{display:none}.i-divider--horizontal.i-divider--align-start .i-divider-line:first-child{max-width:2rem}.i-divider--horizontal.i-divider--align-center .i-divider-line{flex:1 1 0}.i-divider--horizontal.i-divider--align-end .i-divider-line:last-child{max-width:2rem}.i-divider--vertical{align-self:stretch;justify-content:center;min-height:2rem;margin:0 1rem}.i-divider--vertical .i-divider-line{width:1px;min-height:100%}\n"] }]
         }], propDecorators: { layout: [{
                 type: Input
             }], align: [{
@@ -3266,11 +3266,11 @@ class ITextarea {
         return this.currentLength >= this.maxLength;
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: ITextarea, deps: [{ token: i1.NgControl, optional: true, self: true }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.12", type: ITextarea, isStandalone: true, selector: "i-textarea", inputs: { label: "label", id: "id", fluid: "fluid", forceFloated: "forceFloated", useFloatLabel: "useFloatLabel", placeholder: "placeholder", rows: "rows", maxLength: "maxLength", resizable: "resizable", readonly: "readonly", disabled: "disabled", externalInvalid: "externalInvalid", externalErrorMessage: "externalErrorMessage", backgroundStyle: "backgroundStyle", errorMessages: "errorMessages", charCountWarnAt: "charCountWarnAt" }, ngImport: i0, template: "<div\n  class=\"i-textarea-wrapper\"\n  [class.invalid]=\"showErrors\"\n  [class.i-textarea--fluid]=\"fluid\"\n  [class.i-textarea--no-float]=\"!useFloatLabel\"\n  [attr.id]=\"componentId\"\n>\n  <div\n    [ngClass]=\"useFloatLabel ? 'float-label' : 'normal-input'\"\n    class=\"i-textarea-container\"\n  >\n    <div class=\"i-textarea-icon-wrapper\">\n      <textarea\n        #textareaElement\n        [id]=\"id || componentId\"\n        [disabled]=\"disabled\"\n        [readonly]=\"readonly\"\n        [rows]=\"rows\"\n        [attr.maxlength]=\"maxLength || null\"\n        [value]=\"value || ''\"\n        (input)=\"handleInput($event)\"\n        (blur)=\"touch()\"\n        [placeholder]=\"useFloatLabel ? ' ' : placeholder || label\"\n        class=\"i-textarea\"\n        [class.readonly]=\"readonly\"\n        [class.no-resize]=\"!resizable\"\n        [class.component-border]=\"backgroundStyle === 'component'\"\n        [iTooltip]=\"showErrors ? (getErrorMessage() || '') : ''\"\n        tooltipPosition=\"below\"\n        [tooltipDelay]=\"100\"\n      ></textarea>\n      @if (useFloatLabel) {\n      <label\n        [for]=\"id || componentId\"\n        class=\"i-textarea-label\"\n        [class.floated]=\"forceFloated || hasValue\"\n        >{{ label }}</label\n      >\n      }\n      <ng-content></ng-content>\n    </div>\n  </div>\n\n  <div class=\"i-textarea-footer\">\n    @if (showErrors && getErrorMessage()) {\n    <span class=\"i-error\">{{ getErrorMessage() }}</span>\n    }\n    @if (maxLength) {\n    <span\n      class=\"i-char-count\"\n      [class.i-char-count--warn]=\"charCountWarning\"\n      [class.i-char-count--over]=\"charCountOver\"\n    >\n      {{ currentLength }}/{{ maxLength }}\n    </span>\n    }\n  </div>\n</div>\n", styles: [".i-textarea{color:var(--color-text-primary);border:1px solid var(--surface-border);background:var(--color-component-background-secondary)}.i-textarea.component-border{background:var(--color-component-background)}.i-textarea:focus{outline:none;border-color:var(--color-primary);box-shadow:0 2px 10px #0003}.i-textarea-label{color:var(--color-text-secondary)}.i-textarea:focus+.i-textarea-label,.i-textarea:not(:placeholder-shown)+.i-textarea-label,.i-textarea-label.floated{background:var(--color-component-background-secondary)}.i-textarea[disabled]{background:var(--color-disabled-background);border-color:var(--color-disabled-border);color:var(--color-text-disabled);cursor:not-allowed}.i-textarea[disabled]+.i-textarea-label{color:var(--color-text-disabled)}.invalid .i-textarea{border-color:var(--color-danger)}.invalid .i-textarea-label,.invalid .i-error{color:var(--color-danger)}.i-char-count{color:var(--color-text-secondary)}.i-char-count.i-char-count--warn{color:var(--color-warning)}.i-char-count.i-char-count--over{color:var(--color-danger)}.i-textarea-wrapper{display:flex;flex-direction:column;gap:8px;width:100%;margin-top:4px;font-size:1em}.i-textarea-wrapper.i-textarea--fluid{width:100%}.i-textarea-wrapper.i-textarea--no-float{margin-top:0;height:auto}.i-textarea-wrapper .i-textarea-container{display:flex;align-items:flex-start;gap:8px}.i-textarea-wrapper .i-textarea{box-sizing:border-box;width:100%;border-radius:4px;transition:border-color .15s ease,box-shadow .15s ease;font-family:inherit;font-size:inherit;line-height:1.5;resize:vertical}.i-textarea-wrapper .i-textarea:focus{outline:none}.i-textarea-wrapper .i-textarea.readonly{cursor:pointer;-webkit-user-select:none;user-select:none;caret-color:transparent;resize:none}.i-textarea-wrapper .i-textarea.no-resize{resize:none}.i-textarea-wrapper .i-textarea-icon-wrapper{position:relative;width:100%;display:flex}.i-textarea-wrapper .float-label{position:relative;display:flex;align-items:flex-start}.i-textarea-wrapper .float-label .i-textarea{padding:20px 10px 8px}.i-textarea-wrapper .float-label .i-textarea-label{position:absolute;top:16px;left:8px;padding:0 4px;pointer-events:none;transition:all .15s ease;font-size:1em}.i-textarea-wrapper .float-label .i-textarea:focus+.i-textarea-label,.i-textarea-wrapper .float-label .i-textarea:not(:placeholder-shown)+.i-textarea-label,.i-textarea-wrapper .float-label .i-textarea-label.floated{top:-8px;font-size:.78em}.i-textarea-wrapper .normal-input{position:relative}.i-textarea-wrapper .normal-input .i-textarea{padding:8px 12px}.i-textarea-wrapper .i-textarea-footer{display:flex;justify-content:flex-end;align-items:center;gap:8px;min-height:16px}.i-textarea-wrapper .i-char-count{font-size:.75em}.i-textarea-wrapper .i-error{font-size:.75em;flex:1}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: TooltipDirective, selector: "[iTooltip]", inputs: ["iTooltip", "tooltipPosition", "tooltipDelay"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.12", type: ITextarea, isStandalone: true, selector: "i-textarea", inputs: { label: "label", id: "id", fluid: "fluid", forceFloated: "forceFloated", useFloatLabel: "useFloatLabel", placeholder: "placeholder", rows: "rows", maxLength: "maxLength", resizable: "resizable", readonly: "readonly", disabled: "disabled", externalInvalid: "externalInvalid", externalErrorMessage: "externalErrorMessage", backgroundStyle: "backgroundStyle", errorMessages: "errorMessages", charCountWarnAt: "charCountWarnAt" }, ngImport: i0, template: "<div\n  class=\"i-textarea-wrapper\"\n  [class.invalid]=\"showErrors\"\n  [class.i-textarea--fluid]=\"fluid\"\n  [class.i-textarea--no-float]=\"!useFloatLabel\"\n  [attr.id]=\"componentId\"\n>\n  <div\n    [ngClass]=\"useFloatLabel ? 'float-label' : 'normal-input'\"\n    class=\"i-textarea-container\"\n  >\n    <div class=\"i-textarea-icon-wrapper\">\n      <textarea\n        #textareaElement\n        [id]=\"id || componentId\"\n        [disabled]=\"disabled\"\n        [readonly]=\"readonly\"\n        [rows]=\"rows\"\n        [attr.maxlength]=\"maxLength || null\"\n        [value]=\"value || ''\"\n        (input)=\"handleInput($event)\"\n        (blur)=\"touch()\"\n        [placeholder]=\"useFloatLabel ? ' ' : placeholder || label\"\n        class=\"i-textarea\"\n        [class.readonly]=\"readonly\"\n        [class.no-resize]=\"!resizable\"\n        [class.component-border]=\"backgroundStyle === 'component'\"\n        [iTooltip]=\"showErrors ? getErrorMessage() || '' : ''\"\n        tooltipPosition=\"below\"\n        [tooltipDelay]=\"100\"\n      ></textarea>\n      @if (useFloatLabel) {\n        <label\n          [for]=\"id || componentId\"\n          class=\"i-textarea-label\"\n          [class.floated]=\"forceFloated || hasValue\"\n          >{{ label }}</label\n        >\n      }\n      <ng-content></ng-content>\n    </div>\n  </div>\n\n  <div class=\"i-textarea-footer\">\n    @if (showErrors && getErrorMessage()) {\n      <span class=\"i-error\">{{ getErrorMessage() }}</span>\n    }\n    @if (maxLength) {\n      <span\n        class=\"i-char-count\"\n        [class.i-char-count--warn]=\"charCountWarning\"\n        [class.i-char-count--over]=\"charCountOver\"\n      >\n        {{ currentLength }}/{{ maxLength }}\n      </span>\n    }\n  </div>\n</div>\n", styles: [".i-textarea{color:var(--color-text-primary);border:1px solid var(--surface-border);background:var(--color-component-background-secondary)}.i-textarea.component-border{background:var(--color-component-background)}.i-textarea:focus{outline:none;border-color:var(--color-primary);box-shadow:0 2px 10px #0003}.i-textarea-label{color:var(--color-text-secondary)}.i-textarea:focus+.i-textarea-label,.i-textarea:not(:placeholder-shown)+.i-textarea-label,.i-textarea-label.floated{background:var(--color-component-background-secondary)}.i-textarea[disabled]{background:var(--color-disabled-background);border-color:var(--color-disabled-border);color:var(--color-text-disabled);cursor:not-allowed}.i-textarea[disabled]+.i-textarea-label{color:var(--color-text-disabled)}.invalid .i-textarea{border-color:var(--color-danger)}.invalid .i-textarea-label,.invalid .i-error{color:var(--color-danger)}.i-char-count{color:var(--color-text-secondary)}.i-char-count.i-char-count--warn{color:var(--color-warning)}.i-char-count.i-char-count--over{color:var(--color-danger)}.i-textarea-wrapper{display:flex;flex-direction:column;gap:8px;width:100%;margin-top:4px;font-size:1em}.i-textarea-wrapper.i-textarea--fluid{width:100%}.i-textarea-wrapper.i-textarea--no-float{margin-top:0;height:auto}.i-textarea-wrapper .i-textarea-container{display:flex;align-items:flex-start;gap:8px}.i-textarea-wrapper .i-textarea{box-sizing:border-box;width:100%;border-radius:4px;transition:border-color .15s ease,box-shadow .15s ease;font-family:inherit;font-size:inherit;line-height:1.5;resize:vertical}.i-textarea-wrapper .i-textarea:focus{outline:none}.i-textarea-wrapper .i-textarea.readonly{cursor:pointer;-webkit-user-select:none;user-select:none;caret-color:transparent;resize:none}.i-textarea-wrapper .i-textarea.no-resize{resize:none}.i-textarea-wrapper .i-textarea-icon-wrapper{position:relative;width:100%;display:flex}.i-textarea-wrapper .float-label{position:relative;display:flex;align-items:flex-start}.i-textarea-wrapper .float-label .i-textarea{padding:20px 10px 8px}.i-textarea-wrapper .float-label .i-textarea-label{position:absolute;top:16px;left:8px;padding:0 4px;pointer-events:none;transition:all .15s ease;font-size:1em}.i-textarea-wrapper .float-label .i-textarea:focus+.i-textarea-label,.i-textarea-wrapper .float-label .i-textarea:not(:placeholder-shown)+.i-textarea-label,.i-textarea-wrapper .float-label .i-textarea-label.floated{top:-8px;font-size:.78em}.i-textarea-wrapper .normal-input{position:relative}.i-textarea-wrapper .normal-input .i-textarea{padding:8px 12px}.i-textarea-wrapper .i-textarea-footer{display:flex;justify-content:flex-end;align-items:center;gap:8px;min-height:16px}.i-textarea-wrapper .i-char-count{font-size:.75em}.i-textarea-wrapper .i-error{font-size:.75em;flex:1}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: TooltipDirective, selector: "[iTooltip]", inputs: ["iTooltip", "tooltipPosition", "tooltipDelay"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: ITextarea, decorators: [{
             type: Component,
-            args: [{ selector: 'i-textarea', standalone: true, imports: [CommonModule, TooltipDirective], template: "<div\n  class=\"i-textarea-wrapper\"\n  [class.invalid]=\"showErrors\"\n  [class.i-textarea--fluid]=\"fluid\"\n  [class.i-textarea--no-float]=\"!useFloatLabel\"\n  [attr.id]=\"componentId\"\n>\n  <div\n    [ngClass]=\"useFloatLabel ? 'float-label' : 'normal-input'\"\n    class=\"i-textarea-container\"\n  >\n    <div class=\"i-textarea-icon-wrapper\">\n      <textarea\n        #textareaElement\n        [id]=\"id || componentId\"\n        [disabled]=\"disabled\"\n        [readonly]=\"readonly\"\n        [rows]=\"rows\"\n        [attr.maxlength]=\"maxLength || null\"\n        [value]=\"value || ''\"\n        (input)=\"handleInput($event)\"\n        (blur)=\"touch()\"\n        [placeholder]=\"useFloatLabel ? ' ' : placeholder || label\"\n        class=\"i-textarea\"\n        [class.readonly]=\"readonly\"\n        [class.no-resize]=\"!resizable\"\n        [class.component-border]=\"backgroundStyle === 'component'\"\n        [iTooltip]=\"showErrors ? (getErrorMessage() || '') : ''\"\n        tooltipPosition=\"below\"\n        [tooltipDelay]=\"100\"\n      ></textarea>\n      @if (useFloatLabel) {\n      <label\n        [for]=\"id || componentId\"\n        class=\"i-textarea-label\"\n        [class.floated]=\"forceFloated || hasValue\"\n        >{{ label }}</label\n      >\n      }\n      <ng-content></ng-content>\n    </div>\n  </div>\n\n  <div class=\"i-textarea-footer\">\n    @if (showErrors && getErrorMessage()) {\n    <span class=\"i-error\">{{ getErrorMessage() }}</span>\n    }\n    @if (maxLength) {\n    <span\n      class=\"i-char-count\"\n      [class.i-char-count--warn]=\"charCountWarning\"\n      [class.i-char-count--over]=\"charCountOver\"\n    >\n      {{ currentLength }}/{{ maxLength }}\n    </span>\n    }\n  </div>\n</div>\n", styles: [".i-textarea{color:var(--color-text-primary);border:1px solid var(--surface-border);background:var(--color-component-background-secondary)}.i-textarea.component-border{background:var(--color-component-background)}.i-textarea:focus{outline:none;border-color:var(--color-primary);box-shadow:0 2px 10px #0003}.i-textarea-label{color:var(--color-text-secondary)}.i-textarea:focus+.i-textarea-label,.i-textarea:not(:placeholder-shown)+.i-textarea-label,.i-textarea-label.floated{background:var(--color-component-background-secondary)}.i-textarea[disabled]{background:var(--color-disabled-background);border-color:var(--color-disabled-border);color:var(--color-text-disabled);cursor:not-allowed}.i-textarea[disabled]+.i-textarea-label{color:var(--color-text-disabled)}.invalid .i-textarea{border-color:var(--color-danger)}.invalid .i-textarea-label,.invalid .i-error{color:var(--color-danger)}.i-char-count{color:var(--color-text-secondary)}.i-char-count.i-char-count--warn{color:var(--color-warning)}.i-char-count.i-char-count--over{color:var(--color-danger)}.i-textarea-wrapper{display:flex;flex-direction:column;gap:8px;width:100%;margin-top:4px;font-size:1em}.i-textarea-wrapper.i-textarea--fluid{width:100%}.i-textarea-wrapper.i-textarea--no-float{margin-top:0;height:auto}.i-textarea-wrapper .i-textarea-container{display:flex;align-items:flex-start;gap:8px}.i-textarea-wrapper .i-textarea{box-sizing:border-box;width:100%;border-radius:4px;transition:border-color .15s ease,box-shadow .15s ease;font-family:inherit;font-size:inherit;line-height:1.5;resize:vertical}.i-textarea-wrapper .i-textarea:focus{outline:none}.i-textarea-wrapper .i-textarea.readonly{cursor:pointer;-webkit-user-select:none;user-select:none;caret-color:transparent;resize:none}.i-textarea-wrapper .i-textarea.no-resize{resize:none}.i-textarea-wrapper .i-textarea-icon-wrapper{position:relative;width:100%;display:flex}.i-textarea-wrapper .float-label{position:relative;display:flex;align-items:flex-start}.i-textarea-wrapper .float-label .i-textarea{padding:20px 10px 8px}.i-textarea-wrapper .float-label .i-textarea-label{position:absolute;top:16px;left:8px;padding:0 4px;pointer-events:none;transition:all .15s ease;font-size:1em}.i-textarea-wrapper .float-label .i-textarea:focus+.i-textarea-label,.i-textarea-wrapper .float-label .i-textarea:not(:placeholder-shown)+.i-textarea-label,.i-textarea-wrapper .float-label .i-textarea-label.floated{top:-8px;font-size:.78em}.i-textarea-wrapper .normal-input{position:relative}.i-textarea-wrapper .normal-input .i-textarea{padding:8px 12px}.i-textarea-wrapper .i-textarea-footer{display:flex;justify-content:flex-end;align-items:center;gap:8px;min-height:16px}.i-textarea-wrapper .i-char-count{font-size:.75em}.i-textarea-wrapper .i-error{font-size:.75em;flex:1}\n"] }]
+            args: [{ selector: 'i-textarea', standalone: true, imports: [CommonModule, TooltipDirective], template: "<div\n  class=\"i-textarea-wrapper\"\n  [class.invalid]=\"showErrors\"\n  [class.i-textarea--fluid]=\"fluid\"\n  [class.i-textarea--no-float]=\"!useFloatLabel\"\n  [attr.id]=\"componentId\"\n>\n  <div\n    [ngClass]=\"useFloatLabel ? 'float-label' : 'normal-input'\"\n    class=\"i-textarea-container\"\n  >\n    <div class=\"i-textarea-icon-wrapper\">\n      <textarea\n        #textareaElement\n        [id]=\"id || componentId\"\n        [disabled]=\"disabled\"\n        [readonly]=\"readonly\"\n        [rows]=\"rows\"\n        [attr.maxlength]=\"maxLength || null\"\n        [value]=\"value || ''\"\n        (input)=\"handleInput($event)\"\n        (blur)=\"touch()\"\n        [placeholder]=\"useFloatLabel ? ' ' : placeholder || label\"\n        class=\"i-textarea\"\n        [class.readonly]=\"readonly\"\n        [class.no-resize]=\"!resizable\"\n        [class.component-border]=\"backgroundStyle === 'component'\"\n        [iTooltip]=\"showErrors ? getErrorMessage() || '' : ''\"\n        tooltipPosition=\"below\"\n        [tooltipDelay]=\"100\"\n      ></textarea>\n      @if (useFloatLabel) {\n        <label\n          [for]=\"id || componentId\"\n          class=\"i-textarea-label\"\n          [class.floated]=\"forceFloated || hasValue\"\n          >{{ label }}</label\n        >\n      }\n      <ng-content></ng-content>\n    </div>\n  </div>\n\n  <div class=\"i-textarea-footer\">\n    @if (showErrors && getErrorMessage()) {\n      <span class=\"i-error\">{{ getErrorMessage() }}</span>\n    }\n    @if (maxLength) {\n      <span\n        class=\"i-char-count\"\n        [class.i-char-count--warn]=\"charCountWarning\"\n        [class.i-char-count--over]=\"charCountOver\"\n      >\n        {{ currentLength }}/{{ maxLength }}\n      </span>\n    }\n  </div>\n</div>\n", styles: [".i-textarea{color:var(--color-text-primary);border:1px solid var(--surface-border);background:var(--color-component-background-secondary)}.i-textarea.component-border{background:var(--color-component-background)}.i-textarea:focus{outline:none;border-color:var(--color-primary);box-shadow:0 2px 10px #0003}.i-textarea-label{color:var(--color-text-secondary)}.i-textarea:focus+.i-textarea-label,.i-textarea:not(:placeholder-shown)+.i-textarea-label,.i-textarea-label.floated{background:var(--color-component-background-secondary)}.i-textarea[disabled]{background:var(--color-disabled-background);border-color:var(--color-disabled-border);color:var(--color-text-disabled);cursor:not-allowed}.i-textarea[disabled]+.i-textarea-label{color:var(--color-text-disabled)}.invalid .i-textarea{border-color:var(--color-danger)}.invalid .i-textarea-label,.invalid .i-error{color:var(--color-danger)}.i-char-count{color:var(--color-text-secondary)}.i-char-count.i-char-count--warn{color:var(--color-warning)}.i-char-count.i-char-count--over{color:var(--color-danger)}.i-textarea-wrapper{display:flex;flex-direction:column;gap:8px;width:100%;margin-top:4px;font-size:1em}.i-textarea-wrapper.i-textarea--fluid{width:100%}.i-textarea-wrapper.i-textarea--no-float{margin-top:0;height:auto}.i-textarea-wrapper .i-textarea-container{display:flex;align-items:flex-start;gap:8px}.i-textarea-wrapper .i-textarea{box-sizing:border-box;width:100%;border-radius:4px;transition:border-color .15s ease,box-shadow .15s ease;font-family:inherit;font-size:inherit;line-height:1.5;resize:vertical}.i-textarea-wrapper .i-textarea:focus{outline:none}.i-textarea-wrapper .i-textarea.readonly{cursor:pointer;-webkit-user-select:none;user-select:none;caret-color:transparent;resize:none}.i-textarea-wrapper .i-textarea.no-resize{resize:none}.i-textarea-wrapper .i-textarea-icon-wrapper{position:relative;width:100%;display:flex}.i-textarea-wrapper .float-label{position:relative;display:flex;align-items:flex-start}.i-textarea-wrapper .float-label .i-textarea{padding:20px 10px 8px}.i-textarea-wrapper .float-label .i-textarea-label{position:absolute;top:16px;left:8px;padding:0 4px;pointer-events:none;transition:all .15s ease;font-size:1em}.i-textarea-wrapper .float-label .i-textarea:focus+.i-textarea-label,.i-textarea-wrapper .float-label .i-textarea:not(:placeholder-shown)+.i-textarea-label,.i-textarea-wrapper .float-label .i-textarea-label.floated{top:-8px;font-size:.78em}.i-textarea-wrapper .normal-input{position:relative}.i-textarea-wrapper .normal-input .i-textarea{padding:8px 12px}.i-textarea-wrapper .i-textarea-footer{display:flex;justify-content:flex-end;align-items:center;gap:8px;min-height:16px}.i-textarea-wrapper .i-char-count{font-size:.75em}.i-textarea-wrapper .i-error{font-size:.75em;flex:1}\n"] }]
         }], ctorParameters: () => [{ type: i1.NgControl, decorators: [{
                     type: Optional
                 }, {
@@ -3360,11 +3360,11 @@ class ITag {
      */
     size = 'md';
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: ITag, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.12", type: ITag, isStandalone: true, selector: "i-tag", inputs: { value: "value", severity: "severity", rounded: ["rounded", "rounded", booleanAttribute], icon: "icon", size: "size" }, ngImport: i0, template: "<span\n  class=\"i-tag\"\n  [ngClass]=\"[\n    severity ? 'i-tag-' + severity : '',\n    rounded ? 'i-tag-rounded' : '',\n    size === 'lg' ? 'i-tag-lg' : size === 'sm' ? 'i-tag-sm' : ''\n  ]\"\n>\n  @if (icon) {\n  <i [class]=\"icon\" class=\"i-tag-icon\" aria-hidden=\"true\"></i>\n  }\n  <span class=\"i-tag-value\">{{ value }}</span>\n</span>\n", styles: [".i-tag{background:var(--surface-hover);color:var(--color-text-primary);border:1px solid var(--surface-border)}.i-tag.i-tag-primary{background:color-mix(in srgb,var(--color-primary) 15%,transparent);color:var(--color-primary);border-color:color-mix(in srgb,var(--color-primary) 40%,transparent)}.i-tag.i-tag-secondary{background:color-mix(in srgb,var(--color-secondary) 15%,transparent);color:var(--color-secondary);border-color:color-mix(in srgb,var(--color-secondary) 40%,transparent)}.i-tag.i-tag-tertiary{background:color-mix(in srgb,var(--color-tertiary) 15%,transparent);color:var(--color-tertiary);border-color:color-mix(in srgb,var(--color-tertiary) 40%,transparent)}.i-tag.i-tag-success{background:color-mix(in srgb,var(--color-success) 15%,transparent);color:var(--color-success);border-color:color-mix(in srgb,var(--color-success) 40%,transparent)}.i-tag.i-tag-info{background:color-mix(in srgb,var(--color-info) 15%,transparent);color:var(--color-info);border-color:color-mix(in srgb,var(--color-info) 40%,transparent)}.i-tag.i-tag-warning{background:color-mix(in srgb,var(--color-warning) 15%,transparent);color:var(--color-warning);border-color:color-mix(in srgb,var(--color-warning) 40%,transparent)}.i-tag.i-tag-danger{background:color-mix(in srgb,var(--color-danger) 15%,transparent);color:var(--color-danger);border-color:color-mix(in srgb,var(--color-danger) 40%,transparent)}.i-tag.i-tag-contrast{background:var(--color-component-background-solid);color:var(--color-text-contrast);border-color:var(--color-component-background-solid)}.i-tag .i-tag-icon{color:inherit}.i-tag{display:inline-flex;align-items:center;gap:5px;padding:3px 10px;border-radius:4px;font-size:.8em;font-weight:600;letter-spacing:.02em;white-space:nowrap;-webkit-user-select:none;user-select:none;line-height:1.4;transition:opacity .15s ease}.i-tag.i-tag-rounded{border-radius:999px}.i-tag.i-tag-lg{font-size:.9em;padding:4px 12px}.i-tag.i-tag-sm{font-size:.72em;padding:2px 8px}.i-tag .i-tag-icon{font-size:.9em;flex-shrink:0}.i-tag .i-tag-value{line-height:1}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.12", type: ITag, isStandalone: true, selector: "i-tag", inputs: { value: "value", severity: "severity", rounded: ["rounded", "rounded", booleanAttribute], icon: "icon", size: "size" }, ngImport: i0, template: "<span\n  class=\"i-tag\"\n  [ngClass]=\"[\n    severity ? 'i-tag-' + severity : '',\n    rounded ? 'i-tag-rounded' : '',\n    size === 'lg' ? 'i-tag-lg' : size === 'sm' ? 'i-tag-sm' : '',\n  ]\"\n>\n  @if (icon) {\n    <i [class]=\"icon\" class=\"i-tag-icon\" aria-hidden=\"true\"></i>\n  }\n  <span class=\"i-tag-value\">{{ value }}</span>\n</span>\n", styles: [".i-tag{background:var(--surface-hover);color:var(--color-text-primary);border:1px solid var(--surface-border)}.i-tag.i-tag-primary{background:color-mix(in srgb,var(--color-primary) 15%,transparent);color:var(--color-primary);border-color:color-mix(in srgb,var(--color-primary) 40%,transparent)}.i-tag.i-tag-secondary{background:color-mix(in srgb,var(--color-secondary) 15%,transparent);color:var(--color-secondary);border-color:color-mix(in srgb,var(--color-secondary) 40%,transparent)}.i-tag.i-tag-tertiary{background:color-mix(in srgb,var(--color-tertiary) 15%,transparent);color:var(--color-tertiary);border-color:color-mix(in srgb,var(--color-tertiary) 40%,transparent)}.i-tag.i-tag-success{background:color-mix(in srgb,var(--color-success) 15%,transparent);color:var(--color-success);border-color:color-mix(in srgb,var(--color-success) 40%,transparent)}.i-tag.i-tag-info{background:color-mix(in srgb,var(--color-info) 15%,transparent);color:var(--color-info);border-color:color-mix(in srgb,var(--color-info) 40%,transparent)}.i-tag.i-tag-warning{background:color-mix(in srgb,var(--color-warning) 15%,transparent);color:var(--color-warning);border-color:color-mix(in srgb,var(--color-warning) 40%,transparent)}.i-tag.i-tag-danger{background:color-mix(in srgb,var(--color-danger) 15%,transparent);color:var(--color-danger);border-color:color-mix(in srgb,var(--color-danger) 40%,transparent)}.i-tag.i-tag-contrast{background:var(--color-component-background-solid);color:var(--color-text-contrast);border-color:var(--color-component-background-solid)}.i-tag .i-tag-icon{color:inherit}.i-tag{display:inline-flex;align-items:center;gap:5px;padding:3px 10px;border-radius:4px;font-size:.8em;font-weight:600;letter-spacing:.02em;white-space:nowrap;-webkit-user-select:none;user-select:none;line-height:1.4;transition:opacity .15s ease}.i-tag.i-tag-rounded{border-radius:999px}.i-tag.i-tag-lg{font-size:.9em;padding:4px 12px}.i-tag.i-tag-sm{font-size:.72em;padding:2px 8px}.i-tag .i-tag-icon{font-size:.9em;flex-shrink:0}.i-tag .i-tag-value{line-height:1}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: ITag, decorators: [{
             type: Component,
-            args: [{ selector: 'i-tag', standalone: true, imports: [CommonModule], changeDetection: ChangeDetectionStrategy.OnPush, template: "<span\n  class=\"i-tag\"\n  [ngClass]=\"[\n    severity ? 'i-tag-' + severity : '',\n    rounded ? 'i-tag-rounded' : '',\n    size === 'lg' ? 'i-tag-lg' : size === 'sm' ? 'i-tag-sm' : ''\n  ]\"\n>\n  @if (icon) {\n  <i [class]=\"icon\" class=\"i-tag-icon\" aria-hidden=\"true\"></i>\n  }\n  <span class=\"i-tag-value\">{{ value }}</span>\n</span>\n", styles: [".i-tag{background:var(--surface-hover);color:var(--color-text-primary);border:1px solid var(--surface-border)}.i-tag.i-tag-primary{background:color-mix(in srgb,var(--color-primary) 15%,transparent);color:var(--color-primary);border-color:color-mix(in srgb,var(--color-primary) 40%,transparent)}.i-tag.i-tag-secondary{background:color-mix(in srgb,var(--color-secondary) 15%,transparent);color:var(--color-secondary);border-color:color-mix(in srgb,var(--color-secondary) 40%,transparent)}.i-tag.i-tag-tertiary{background:color-mix(in srgb,var(--color-tertiary) 15%,transparent);color:var(--color-tertiary);border-color:color-mix(in srgb,var(--color-tertiary) 40%,transparent)}.i-tag.i-tag-success{background:color-mix(in srgb,var(--color-success) 15%,transparent);color:var(--color-success);border-color:color-mix(in srgb,var(--color-success) 40%,transparent)}.i-tag.i-tag-info{background:color-mix(in srgb,var(--color-info) 15%,transparent);color:var(--color-info);border-color:color-mix(in srgb,var(--color-info) 40%,transparent)}.i-tag.i-tag-warning{background:color-mix(in srgb,var(--color-warning) 15%,transparent);color:var(--color-warning);border-color:color-mix(in srgb,var(--color-warning) 40%,transparent)}.i-tag.i-tag-danger{background:color-mix(in srgb,var(--color-danger) 15%,transparent);color:var(--color-danger);border-color:color-mix(in srgb,var(--color-danger) 40%,transparent)}.i-tag.i-tag-contrast{background:var(--color-component-background-solid);color:var(--color-text-contrast);border-color:var(--color-component-background-solid)}.i-tag .i-tag-icon{color:inherit}.i-tag{display:inline-flex;align-items:center;gap:5px;padding:3px 10px;border-radius:4px;font-size:.8em;font-weight:600;letter-spacing:.02em;white-space:nowrap;-webkit-user-select:none;user-select:none;line-height:1.4;transition:opacity .15s ease}.i-tag.i-tag-rounded{border-radius:999px}.i-tag.i-tag-lg{font-size:.9em;padding:4px 12px}.i-tag.i-tag-sm{font-size:.72em;padding:2px 8px}.i-tag .i-tag-icon{font-size:.9em;flex-shrink:0}.i-tag .i-tag-value{line-height:1}\n"] }]
+            args: [{ selector: 'i-tag', standalone: true, imports: [CommonModule], changeDetection: ChangeDetectionStrategy.OnPush, template: "<span\n  class=\"i-tag\"\n  [ngClass]=\"[\n    severity ? 'i-tag-' + severity : '',\n    rounded ? 'i-tag-rounded' : '',\n    size === 'lg' ? 'i-tag-lg' : size === 'sm' ? 'i-tag-sm' : '',\n  ]\"\n>\n  @if (icon) {\n    <i [class]=\"icon\" class=\"i-tag-icon\" aria-hidden=\"true\"></i>\n  }\n  <span class=\"i-tag-value\">{{ value }}</span>\n</span>\n", styles: [".i-tag{background:var(--surface-hover);color:var(--color-text-primary);border:1px solid var(--surface-border)}.i-tag.i-tag-primary{background:color-mix(in srgb,var(--color-primary) 15%,transparent);color:var(--color-primary);border-color:color-mix(in srgb,var(--color-primary) 40%,transparent)}.i-tag.i-tag-secondary{background:color-mix(in srgb,var(--color-secondary) 15%,transparent);color:var(--color-secondary);border-color:color-mix(in srgb,var(--color-secondary) 40%,transparent)}.i-tag.i-tag-tertiary{background:color-mix(in srgb,var(--color-tertiary) 15%,transparent);color:var(--color-tertiary);border-color:color-mix(in srgb,var(--color-tertiary) 40%,transparent)}.i-tag.i-tag-success{background:color-mix(in srgb,var(--color-success) 15%,transparent);color:var(--color-success);border-color:color-mix(in srgb,var(--color-success) 40%,transparent)}.i-tag.i-tag-info{background:color-mix(in srgb,var(--color-info) 15%,transparent);color:var(--color-info);border-color:color-mix(in srgb,var(--color-info) 40%,transparent)}.i-tag.i-tag-warning{background:color-mix(in srgb,var(--color-warning) 15%,transparent);color:var(--color-warning);border-color:color-mix(in srgb,var(--color-warning) 40%,transparent)}.i-tag.i-tag-danger{background:color-mix(in srgb,var(--color-danger) 15%,transparent);color:var(--color-danger);border-color:color-mix(in srgb,var(--color-danger) 40%,transparent)}.i-tag.i-tag-contrast{background:var(--color-component-background-solid);color:var(--color-text-contrast);border-color:var(--color-component-background-solid)}.i-tag .i-tag-icon{color:inherit}.i-tag{display:inline-flex;align-items:center;gap:5px;padding:3px 10px;border-radius:4px;font-size:.8em;font-weight:600;letter-spacing:.02em;white-space:nowrap;-webkit-user-select:none;user-select:none;line-height:1.4;transition:opacity .15s ease}.i-tag.i-tag-rounded{border-radius:999px}.i-tag.i-tag-lg{font-size:.9em;padding:4px 12px}.i-tag.i-tag-sm{font-size:.72em;padding:2px 8px}.i-tag .i-tag-icon{font-size:.9em;flex-shrink:0}.i-tag .i-tag-value{line-height:1}\n"] }]
         }], propDecorators: { value: [{
                 type: Input
             }], severity: [{
@@ -3441,11 +3441,11 @@ class IPlaceholder {
         return arrowMap[this.arrowDirection];
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: IPlaceholder, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.12", type: IPlaceholder, isStandalone: true, selector: "i-placeholder", inputs: { arrowDirection: "arrowDirection", customIcon: "customIcon", showPattern: "showPattern" }, ngImport: i0, template: "<div class=\"i-placeholder\" [class.has-pattern]=\"showPattern\">\n  <div class=\"i-placeholder-content\">\n    @if (iconClass) {\n    <i [class]=\"iconClass\"></i>\n    }\n    <ng-content></ng-content>\n  </div>\n</div>\n", styles: [".i-placeholder{background:var(--surface-card);border-radius:8px;border:2px dashed var(--surface-border);animation:placeholderFadeIn .3s ease;min-height:200px}.i-placeholder.has-pattern{background-image:radial-gradient(circle,var(--surface-border) 1px,transparent 1px);background-size:20px 20px}.i-placeholder-content{color:var(--color-text-secondary)}.i-placeholder-content i{color:var(--color-primary);opacity:.3}.i-placeholder{height:100%;display:flex;align-items:center;justify-content:center;max-width:100%;transition:none;animation:none}.i-placeholder .i-placeholder-content{text-align:center;max-width:400px;padding:2rem;transition:none;animation:none}.i-placeholder .i-placeholder-content i{font-size:4rem;margin-bottom:1.5rem;display:block}\n"] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.12", type: IPlaceholder, isStandalone: true, selector: "i-placeholder", inputs: { arrowDirection: "arrowDirection", customIcon: "customIcon", showPattern: "showPattern" }, ngImport: i0, template: "<div class=\"i-placeholder\" [class.has-pattern]=\"showPattern\">\n  <div class=\"i-placeholder-content\">\n    @if (iconClass) {\n      <i [class]=\"iconClass\"></i>\n    }\n    <ng-content></ng-content>\n  </div>\n</div>\n", styles: [".i-placeholder{background:var(--surface-card);border-radius:8px;border:2px dashed var(--surface-border);animation:placeholderFadeIn .3s ease;min-height:200px}.i-placeholder.has-pattern{background-image:radial-gradient(circle,var(--surface-border) 1px,transparent 1px);background-size:20px 20px}.i-placeholder-content{color:var(--color-text-secondary)}.i-placeholder-content i{color:var(--color-primary);opacity:.3}.i-placeholder{height:100%;display:flex;align-items:center;justify-content:center;max-width:100%;transition:none;animation:none}.i-placeholder .i-placeholder-content{text-align:center;max-width:400px;padding:2rem;transition:none;animation:none}.i-placeholder .i-placeholder-content i{font-size:4rem;margin-bottom:1.5rem;display:block}\n"] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: IPlaceholder, decorators: [{
             type: Component,
-            args: [{ selector: 'i-placeholder', standalone: true, imports: [], template: "<div class=\"i-placeholder\" [class.has-pattern]=\"showPattern\">\n  <div class=\"i-placeholder-content\">\n    @if (iconClass) {\n    <i [class]=\"iconClass\"></i>\n    }\n    <ng-content></ng-content>\n  </div>\n</div>\n", styles: [".i-placeholder{background:var(--surface-card);border-radius:8px;border:2px dashed var(--surface-border);animation:placeholderFadeIn .3s ease;min-height:200px}.i-placeholder.has-pattern{background-image:radial-gradient(circle,var(--surface-border) 1px,transparent 1px);background-size:20px 20px}.i-placeholder-content{color:var(--color-text-secondary)}.i-placeholder-content i{color:var(--color-primary);opacity:.3}.i-placeholder{height:100%;display:flex;align-items:center;justify-content:center;max-width:100%;transition:none;animation:none}.i-placeholder .i-placeholder-content{text-align:center;max-width:400px;padding:2rem;transition:none;animation:none}.i-placeholder .i-placeholder-content i{font-size:4rem;margin-bottom:1.5rem;display:block}\n"] }]
+            args: [{ selector: 'i-placeholder', standalone: true, imports: [], template: "<div class=\"i-placeholder\" [class.has-pattern]=\"showPattern\">\n  <div class=\"i-placeholder-content\">\n    @if (iconClass) {\n      <i [class]=\"iconClass\"></i>\n    }\n    <ng-content></ng-content>\n  </div>\n</div>\n", styles: [".i-placeholder{background:var(--surface-card);border-radius:8px;border:2px dashed var(--surface-border);animation:placeholderFadeIn .3s ease;min-height:200px}.i-placeholder.has-pattern{background-image:radial-gradient(circle,var(--surface-border) 1px,transparent 1px);background-size:20px 20px}.i-placeholder-content{color:var(--color-text-secondary)}.i-placeholder-content i{color:var(--color-primary);opacity:.3}.i-placeholder{height:100%;display:flex;align-items:center;justify-content:center;max-width:100%;transition:none;animation:none}.i-placeholder .i-placeholder-content{text-align:center;max-width:400px;padding:2rem;transition:none;animation:none}.i-placeholder .i-placeholder-content i{font-size:4rem;margin-bottom:1.5rem;display:block}\n"] }]
         }], propDecorators: { arrowDirection: [{
                 type: Input
             }], customIcon: [{
@@ -3646,11 +3646,11 @@ class TopbarComponent {
         return this.config.logoLight || this.config.logoDark || '';
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: TopbarComponent, deps: [{ token: LayoutService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.12", type: TopbarComponent, isStandalone: true, selector: "i-topbar", inputs: { config: "config" }, ngImport: i0, template: "<div class=\"layout-topbar\">\n  <a class=\"layout-topbar-logo\" routerLink=\"\">\n    @if (logo) {\n    <img [src]=\"logo\" [alt]=\"config.websiteName + ' logo'\" />\n    }\n    <span>{{ config.websiteName }}</span>\n  </a>\n  <i-button\n    [severity]=\"'contrast'\"\n    size=\"medium\"\n    [text]=\"true\"\n    [icon]=\"'pi pi-bars'\"\n    (clicked)=\"layoutService.toggleSidebar()\"\n  ></i-button>\n  <i-button\n    class=\"layout-topbar-menu-button\"\n    [severity]=\"'contrast'\"\n    size=\"medium\"\n    [text]=\"true\"\n    [icon]=\"'pi pi-ellipsis-v'\"\n    (clicked)=\"layoutService.showProfileSidebar()\"\n  ></i-button>\n\n  <div\n    class=\"layout-topbar-menu\"\n    [ngClass]=\"{\n      'layout-topbar-menu-mobile-active':\n        layoutService.state().profileSidebarVisible\n    }\"\n  >\n    <ng-content />\n    @if (config.showThemeToggle !== false) {\n    <i-button\n      [severity]=\"'contrast'\"\n      size=\"medium\"\n      [text]=\"true\"\n      [icon]=\"isDark ? 'pi pi-moon' : 'pi pi-sun'\"\n      (clicked)=\"changeTheme()\"\n    />\n    }\n  </div>\n</div>\n", styles: [".layout-topbar{position:relative;height:5rem;z-index:997;width:100%;padding:0 2rem;background-color:var(--surface-card);transition:left .2s;display:flex;align-items:center;box-shadow:0 3px 5px #00000005,0 0 2px #0000000d,0 1px 4px #00000014}.layout-topbar .layout-topbar-logo{display:flex;align-items:center;color:var(--surface-900);font-size:18px;font-weight:500;margin-right:50px;border-radius:12px;text-decoration:none;font-family:Montserrat,sans-serif}.layout-topbar .layout-topbar-logo img{height:2.5rem;margin-right:.5rem}.layout-topbar .layout-topbar-logo:focus{outline:0 none;outline-offset:0;transition:box-shadow .2s;box-shadow:inset var(--focus-ring)}.layout-topbar .layout-menu-button{margin-left:2rem}.layout-topbar .layout-topbar-menu-button{display:none}.layout-topbar .layout-topbar-menu-button i{font-size:1.25rem}.layout-topbar .layout-topbar-menu{gap:.5rem;margin:0 0 0 auto;padding:0;list-style:none;display:flex}@media(max-width:991px){.layout-topbar{justify-content:space-between}.layout-topbar .layout-topbar-logo{width:auto;order:2}.layout-topbar .layout-menu-button{margin-left:0;order:1}.layout-topbar .layout-topbar-menu-button{display:inline-flex;margin-left:0;order:3}.layout-topbar .layout-topbar-menu{margin-left:0;position:absolute;flex-direction:column;background-color:var(--surface-overlay);box-shadow:0 3px 5px #00000005,0 0 2px #0000000d,0 1px 4px #00000014;border-radius:12px;padding:1rem;right:2rem;top:5rem;display:none;-webkit-animation:scalein .15s linear;animation:scalein .15s linear;z-index:1000}.layout-topbar .layout-topbar-menu.layout-topbar-menu-mobile-active{display:block}}\n"], dependencies: [{ kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: IButton, selector: "i-button", inputs: ["severity", "size", "type", "disabled", "outlined", "raised", "text", "icon", "fluid", "loading"], outputs: ["clicked"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.12", type: TopbarComponent, isStandalone: true, selector: "i-topbar", inputs: { config: "config" }, ngImport: i0, template: "<div class=\"layout-topbar\">\n  <a class=\"layout-topbar-logo\" routerLink=\"\">\n    @if (logo) {\n      <img [src]=\"logo\" [alt]=\"config.websiteName + ' logo'\" />\n    }\n    <span>{{ config.websiteName }}</span>\n  </a>\n  <i-button\n    [severity]=\"'contrast'\"\n    size=\"medium\"\n    [text]=\"true\"\n    [icon]=\"'pi pi-bars'\"\n    (clicked)=\"layoutService.toggleSidebar()\"\n  ></i-button>\n  <i-button\n    class=\"layout-topbar-menu-button\"\n    [severity]=\"'contrast'\"\n    size=\"medium\"\n    [text]=\"true\"\n    [icon]=\"'pi pi-ellipsis-v'\"\n    (clicked)=\"layoutService.showProfileSidebar()\"\n  ></i-button>\n\n  <div\n    class=\"layout-topbar-menu\"\n    [ngClass]=\"{\n      'layout-topbar-menu-mobile-active':\n        layoutService.state().profileSidebarVisible,\n    }\"\n  >\n    <ng-content />\n    @if (config.showThemeToggle !== false) {\n      <i-button\n        [severity]=\"'contrast'\"\n        size=\"medium\"\n        [text]=\"true\"\n        [icon]=\"isDark ? 'pi pi-moon' : 'pi pi-sun'\"\n        (clicked)=\"changeTheme()\"\n      />\n    }\n  </div>\n</div>\n", styles: [".layout-topbar{position:relative;height:5rem;z-index:997;width:100%;padding:0 2rem;background-color:var(--surface-card);transition:left .2s;display:flex;align-items:center;box-shadow:0 3px 5px #00000005,0 0 2px #0000000d,0 1px 4px #00000014}.layout-topbar .layout-topbar-logo{display:flex;align-items:center;color:var(--surface-900);font-size:18px;font-weight:500;margin-right:50px;border-radius:12px;text-decoration:none;font-family:Montserrat,sans-serif}.layout-topbar .layout-topbar-logo img{height:2.5rem;margin-right:.5rem}.layout-topbar .layout-topbar-logo:focus{outline:0 none;outline-offset:0;transition:box-shadow .2s;box-shadow:inset var(--focus-ring)}.layout-topbar .layout-menu-button{margin-left:2rem}.layout-topbar .layout-topbar-menu-button{display:none}.layout-topbar .layout-topbar-menu-button i{font-size:1.25rem}.layout-topbar .layout-topbar-menu{gap:.5rem;margin:0 0 0 auto;padding:0;list-style:none;display:flex}@media(max-width:991px){.layout-topbar{justify-content:space-between}.layout-topbar .layout-topbar-logo{width:auto;order:2}.layout-topbar .layout-menu-button{margin-left:0;order:1}.layout-topbar .layout-topbar-menu-button{display:inline-flex;margin-left:0;order:3}.layout-topbar .layout-topbar-menu{margin-left:0;position:absolute;flex-direction:column;background-color:var(--surface-overlay);box-shadow:0 3px 5px #00000005,0 0 2px #0000000d,0 1px 4px #00000014;border-radius:12px;padding:1rem;right:2rem;top:5rem;display:none;-webkit-animation:scalein .15s linear;animation:scalein .15s linear;z-index:1000}.layout-topbar .layout-topbar-menu.layout-topbar-menu-mobile-active{display:block}}\n"], dependencies: [{ kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { 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.2.12", ngImport: i0, type: TopbarComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'i-topbar', imports: [RouterLink, NgClass, IButton], template: "<div class=\"layout-topbar\">\n  <a class=\"layout-topbar-logo\" routerLink=\"\">\n    @if (logo) {\n    <img [src]=\"logo\" [alt]=\"config.websiteName + ' logo'\" />\n    }\n    <span>{{ config.websiteName }}</span>\n  </a>\n  <i-button\n    [severity]=\"'contrast'\"\n    size=\"medium\"\n    [text]=\"true\"\n    [icon]=\"'pi pi-bars'\"\n    (clicked)=\"layoutService.toggleSidebar()\"\n  ></i-button>\n  <i-button\n    class=\"layout-topbar-menu-button\"\n    [severity]=\"'contrast'\"\n    size=\"medium\"\n    [text]=\"true\"\n    [icon]=\"'pi pi-ellipsis-v'\"\n    (clicked)=\"layoutService.showProfileSidebar()\"\n  ></i-button>\n\n  <div\n    class=\"layout-topbar-menu\"\n    [ngClass]=\"{\n      'layout-topbar-menu-mobile-active':\n        layoutService.state().profileSidebarVisible\n    }\"\n  >\n    <ng-content />\n    @if (config.showThemeToggle !== false) {\n    <i-button\n      [severity]=\"'contrast'\"\n      size=\"medium\"\n      [text]=\"true\"\n      [icon]=\"isDark ? 'pi pi-moon' : 'pi pi-sun'\"\n      (clicked)=\"changeTheme()\"\n    />\n    }\n  </div>\n</div>\n", styles: [".layout-topbar{position:relative;height:5rem;z-index:997;width:100%;padding:0 2rem;background-color:var(--surface-card);transition:left .2s;display:flex;align-items:center;box-shadow:0 3px 5px #00000005,0 0 2px #0000000d,0 1px 4px #00000014}.layout-topbar .layout-topbar-logo{display:flex;align-items:center;color:var(--surface-900);font-size:18px;font-weight:500;margin-right:50px;border-radius:12px;text-decoration:none;font-family:Montserrat,sans-serif}.layout-topbar .layout-topbar-logo img{height:2.5rem;margin-right:.5rem}.layout-topbar .layout-topbar-logo:focus{outline:0 none;outline-offset:0;transition:box-shadow .2s;box-shadow:inset var(--focus-ring)}.layout-topbar .layout-menu-button{margin-left:2rem}.layout-topbar .layout-topbar-menu-button{display:none}.layout-topbar .layout-topbar-menu-button i{font-size:1.25rem}.layout-topbar .layout-topbar-menu{gap:.5rem;margin:0 0 0 auto;padding:0;list-style:none;display:flex}@media(max-width:991px){.layout-topbar{justify-content:space-between}.layout-topbar .layout-topbar-logo{width:auto;order:2}.layout-topbar .layout-menu-button{margin-left:0;order:1}.layout-topbar .layout-topbar-menu-button{display:inline-flex;margin-left:0;order:3}.layout-topbar .layout-topbar-menu{margin-left:0;position:absolute;flex-direction:column;background-color:var(--surface-overlay);box-shadow:0 3px 5px #00000005,0 0 2px #0000000d,0 1px 4px #00000014;border-radius:12px;padding:1rem;right:2rem;top:5rem;display:none;-webkit-animation:scalein .15s linear;animation:scalein .15s linear;z-index:1000}.layout-topbar .layout-topbar-menu.layout-topbar-menu-mobile-active{display:block}}\n"] }]
+            args: [{ selector: 'i-topbar', imports: [RouterLink, NgClass, IButton], template: "<div class=\"layout-topbar\">\n  <a class=\"layout-topbar-logo\" routerLink=\"\">\n    @if (logo) {\n      <img [src]=\"logo\" [alt]=\"config.websiteName + ' logo'\" />\n    }\n    <span>{{ config.websiteName }}</span>\n  </a>\n  <i-button\n    [severity]=\"'contrast'\"\n    size=\"medium\"\n    [text]=\"true\"\n    [icon]=\"'pi pi-bars'\"\n    (clicked)=\"layoutService.toggleSidebar()\"\n  ></i-button>\n  <i-button\n    class=\"layout-topbar-menu-button\"\n    [severity]=\"'contrast'\"\n    size=\"medium\"\n    [text]=\"true\"\n    [icon]=\"'pi pi-ellipsis-v'\"\n    (clicked)=\"layoutService.showProfileSidebar()\"\n  ></i-button>\n\n  <div\n    class=\"layout-topbar-menu\"\n    [ngClass]=\"{\n      'layout-topbar-menu-mobile-active':\n        layoutService.state().profileSidebarVisible,\n    }\"\n  >\n    <ng-content />\n    @if (config.showThemeToggle !== false) {\n      <i-button\n        [severity]=\"'contrast'\"\n        size=\"medium\"\n        [text]=\"true\"\n        [icon]=\"isDark ? 'pi pi-moon' : 'pi pi-sun'\"\n        (clicked)=\"changeTheme()\"\n      />\n    }\n  </div>\n</div>\n", styles: [".layout-topbar{position:relative;height:5rem;z-index:997;width:100%;padding:0 2rem;background-color:var(--surface-card);transition:left .2s;display:flex;align-items:center;box-shadow:0 3px 5px #00000005,0 0 2px #0000000d,0 1px 4px #00000014}.layout-topbar .layout-topbar-logo{display:flex;align-items:center;color:var(--surface-900);font-size:18px;font-weight:500;margin-right:50px;border-radius:12px;text-decoration:none;font-family:Montserrat,sans-serif}.layout-topbar .layout-topbar-logo img{height:2.5rem;margin-right:.5rem}.layout-topbar .layout-topbar-logo:focus{outline:0 none;outline-offset:0;transition:box-shadow .2s;box-shadow:inset var(--focus-ring)}.layout-topbar .layout-menu-button{margin-left:2rem}.layout-topbar .layout-topbar-menu-button{display:none}.layout-topbar .layout-topbar-menu-button i{font-size:1.25rem}.layout-topbar .layout-topbar-menu{gap:.5rem;margin:0 0 0 auto;padding:0;list-style:none;display:flex}@media(max-width:991px){.layout-topbar{justify-content:space-between}.layout-topbar .layout-topbar-logo{width:auto;order:2}.layout-topbar .layout-menu-button{margin-left:0;order:1}.layout-topbar .layout-topbar-menu-button{display:inline-flex;margin-left:0;order:3}.layout-topbar .layout-topbar-menu{margin-left:0;position:absolute;flex-direction:column;background-color:var(--surface-overlay);box-shadow:0 3px 5px #00000005,0 0 2px #0000000d,0 1px 4px #00000014;border-radius:12px;padding:1rem;right:2rem;top:5rem;display:none;-webkit-animation:scalein .15s linear;animation:scalein .15s linear;z-index:1000}.layout-topbar .layout-topbar-menu.layout-topbar-menu-mobile-active{display:block}}\n"] }]
         }], ctorParameters: () => [{ type: LayoutService }], propDecorators: { config: [{
                 type: Input
             }] } });
@@ -3807,11 +3807,11 @@ class MenuComponent {
         });
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: MenuComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.12", type: MenuComponent, isStandalone: true, selector: "i-menu", inputs: { model: "model" }, ngImport: i0, template: "<ul class=\"menu\">\n  @for(group of filteredModel(); track $index) {\n  <li class=\"menu-group\">\n    @if (group.label) {\n    <div class=\"menu-group-label\">\n      {{ group.label }}\n    </div>\n    }\n\n    <ul class=\"menu-items\">\n      @for(item of group.items; track $index) {\n      <li class=\"menu-item\">\n        <a\n          [routerLink]=\"item.routerLink\"\n          routerLinkActive=\"active\"\n          [routerLinkActiveOptions]=\"{ exact: true }\"\n        >\n          @if (item.icon) {\n          <i class=\"{{ item.icon }}\"></i>\n          }\n          <span>{{ item.label }}</span>\n        </a>\n\n        @if (item.items) {\n        <ul class=\"submenu\">\n          @for(subItem of item.items; track $index) {\n          <li class=\"submenu-item\">\n            <a\n              [routerLink]=\"subItem.routerLink\"\n              routerLinkActive=\"active\"\n              [routerLinkActiveOptions]=\"{ exact: true }\"\n            >\n              @if (subItem.icon) {\n              <i class=\"{{ subItem.icon }}\"></i>\n              }\n              <span>{{ subItem.label }}</span>\n            </a>\n          </li>\n          }\n        </ul>\n        }\n      </li>\n      }\n    </ul>\n\n    @if (group.separator) {\n    <hr class=\"separator\" />\n    }\n  </li>\n  }\n</ul>\n", styles: [".menu{list-style:none;margin:0;padding:0}.menu-group{margin-bottom:1rem}.menu-group .menu-group-label{font-size:1em;font-weight:600;text-transform:uppercase;padding:.5rem 1rem;color:var(--color-contrast)}.menu-group .menu-items{list-style:none;margin:0;padding:0}.menu-group .menu-items .menu-item a{display:flex;align-items:center;padding:.75rem 1rem;color:var(--color-text-secondary);text-decoration:none;font-size:1em;border-left:3px solid transparent;transition:all .2s ease}.menu-group .menu-items .menu-item a i{margin-right:.5rem;font-size:1em}.menu-group .menu-items .menu-item a:hover{background-color:var(--surface-hover);border-radius:6px}.menu-group .menu-items .menu-item a.active{background-color:var(--surface-hover);border-radius:6px;border-left:3px solid var(--color-primary);font-weight:600}.menu-group .menu-items .menu-item .submenu{list-style:none;padding-left:1.5rem}.menu-group .menu-items .menu-item .submenu .submenu-item a{padding:.5rem 1rem;font-size:.95em;color:var(--color-text-tertiary)}.menu-group .menu-items .menu-item .submenu .submenu-item a:hover{background-color:var(--surface-hover);color:var(--color-text-primary)}.menu-group .menu-items .menu-item .submenu .submenu-item a.active{color:var(--color-primary);font-weight:600}.separator{border:none;border-top:1px solid #334155;margin:.5rem 0}\n"], dependencies: [{ kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: RouterLinkActive, selector: "[routerLinkActive]", inputs: ["routerLinkActiveOptions", "ariaCurrentWhenActive", "routerLinkActive"], outputs: ["isActiveChange"], exportAs: ["routerLinkActive"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.12", type: MenuComponent, isStandalone: true, selector: "i-menu", inputs: { model: "model" }, ngImport: i0, template: "<ul class=\"menu\">\n  @for (group of filteredModel(); track $index) {\n    <li class=\"menu-group\">\n      @if (group.label) {\n        <div class=\"menu-group-label\">\n          {{ group.label }}\n        </div>\n      }\n\n      <ul class=\"menu-items\">\n        @for (item of group.items; track $index) {\n          <li class=\"menu-item\">\n            <a\n              [routerLink]=\"item.routerLink\"\n              routerLinkActive=\"active\"\n              [routerLinkActiveOptions]=\"{ exact: true }\"\n            >\n              @if (item.icon) {\n                <i class=\"{{ item.icon }}\"></i>\n              }\n              <span>{{ item.label }}</span>\n            </a>\n\n            @if (item.items) {\n              <ul class=\"submenu\">\n                @for (subItem of item.items; track $index) {\n                  <li class=\"submenu-item\">\n                    <a\n                      [routerLink]=\"subItem.routerLink\"\n                      routerLinkActive=\"active\"\n                      [routerLinkActiveOptions]=\"{ exact: true }\"\n                    >\n                      @if (subItem.icon) {\n                        <i class=\"{{ subItem.icon }}\"></i>\n                      }\n                      <span>{{ subItem.label }}</span>\n                    </a>\n                  </li>\n                }\n              </ul>\n            }\n          </li>\n        }\n      </ul>\n\n      @if (group.separator) {\n        <hr class=\"separator\" />\n      }\n    </li>\n  }\n</ul>\n", styles: [".menu{list-style:none;margin:0;padding:0}.menu-group{margin-bottom:1rem}.menu-group .menu-group-label{font-size:1em;font-weight:600;text-transform:uppercase;padding:.5rem 1rem;color:var(--color-contrast)}.menu-group .menu-items{list-style:none;margin:0;padding:0}.menu-group .menu-items .menu-item a{display:flex;align-items:center;padding:.75rem 1rem;color:var(--color-text-secondary);text-decoration:none;font-size:1em;border-left:3px solid transparent;transition:all .2s ease}.menu-group .menu-items .menu-item a i{margin-right:.5rem;font-size:1em}.menu-group .menu-items .menu-item a:hover{background-color:var(--surface-hover);border-radius:6px}.menu-group .menu-items .menu-item a.active{background-color:var(--surface-hover);border-radius:6px;border-left:3px solid var(--color-primary);font-weight:600}.menu-group .menu-items .menu-item .submenu{list-style:none;padding-left:1.5rem}.menu-group .menu-items .menu-item .submenu .submenu-item a{padding:.5rem 1rem;font-size:.95em;color:var(--color-text-tertiary)}.menu-group .menu-items .menu-item .submenu .submenu-item a:hover{background-color:var(--surface-hover);color:var(--color-text-primary)}.menu-group .menu-items .menu-item .submenu .submenu-item a.active{color:var(--color-primary);font-weight:600}.separator{border:none;border-top:1px solid #334155;margin:.5rem 0}\n"], dependencies: [{ kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: RouterLinkActive, selector: "[routerLinkActive]", inputs: ["routerLinkActiveOptions", "ariaCurrentWhenActive", "routerLinkActive"], outputs: ["isActiveChange"], exportAs: ["routerLinkActive"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: MenuComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'i-menu', imports: [RouterLink, RouterLinkActive], template: "<ul class=\"menu\">\n  @for(group of filteredModel(); track $index) {\n  <li class=\"menu-group\">\n    @if (group.label) {\n    <div class=\"menu-group-label\">\n      {{ group.label }}\n    </div>\n    }\n\n    <ul class=\"menu-items\">\n      @for(item of group.items; track $index) {\n      <li class=\"menu-item\">\n        <a\n          [routerLink]=\"item.routerLink\"\n          routerLinkActive=\"active\"\n          [routerLinkActiveOptions]=\"{ exact: true }\"\n        >\n          @if (item.icon) {\n          <i class=\"{{ item.icon }}\"></i>\n          }\n          <span>{{ item.label }}</span>\n        </a>\n\n        @if (item.items) {\n        <ul class=\"submenu\">\n          @for(subItem of item.items; track $index) {\n          <li class=\"submenu-item\">\n            <a\n              [routerLink]=\"subItem.routerLink\"\n              routerLinkActive=\"active\"\n              [routerLinkActiveOptions]=\"{ exact: true }\"\n            >\n              @if (subItem.icon) {\n              <i class=\"{{ subItem.icon }}\"></i>\n              }\n              <span>{{ subItem.label }}</span>\n            </a>\n          </li>\n          }\n        </ul>\n        }\n      </li>\n      }\n    </ul>\n\n    @if (group.separator) {\n    <hr class=\"separator\" />\n    }\n  </li>\n  }\n</ul>\n", styles: [".menu{list-style:none;margin:0;padding:0}.menu-group{margin-bottom:1rem}.menu-group .menu-group-label{font-size:1em;font-weight:600;text-transform:uppercase;padding:.5rem 1rem;color:var(--color-contrast)}.menu-group .menu-items{list-style:none;margin:0;padding:0}.menu-group .menu-items .menu-item a{display:flex;align-items:center;padding:.75rem 1rem;color:var(--color-text-secondary);text-decoration:none;font-size:1em;border-left:3px solid transparent;transition:all .2s ease}.menu-group .menu-items .menu-item a i{margin-right:.5rem;font-size:1em}.menu-group .menu-items .menu-item a:hover{background-color:var(--surface-hover);border-radius:6px}.menu-group .menu-items .menu-item a.active{background-color:var(--surface-hover);border-radius:6px;border-left:3px solid var(--color-primary);font-weight:600}.menu-group .menu-items .menu-item .submenu{list-style:none;padding-left:1.5rem}.menu-group .menu-items .menu-item .submenu .submenu-item a{padding:.5rem 1rem;font-size:.95em;color:var(--color-text-tertiary)}.menu-group .menu-items .menu-item .submenu .submenu-item a:hover{background-color:var(--surface-hover);color:var(--color-text-primary)}.menu-group .menu-items .menu-item .submenu .submenu-item a.active{color:var(--color-primary);font-weight:600}.separator{border:none;border-top:1px solid #334155;margin:.5rem 0}\n"] }]
+            args: [{ selector: 'i-menu', imports: [RouterLink, RouterLinkActive], template: "<ul class=\"menu\">\n  @for (group of filteredModel(); track $index) {\n    <li class=\"menu-group\">\n      @if (group.label) {\n        <div class=\"menu-group-label\">\n          {{ group.label }}\n        </div>\n      }\n\n      <ul class=\"menu-items\">\n        @for (item of group.items; track $index) {\n          <li class=\"menu-item\">\n            <a\n              [routerLink]=\"item.routerLink\"\n              routerLinkActive=\"active\"\n              [routerLinkActiveOptions]=\"{ exact: true }\"\n            >\n              @if (item.icon) {\n                <i class=\"{{ item.icon }}\"></i>\n              }\n              <span>{{ item.label }}</span>\n            </a>\n\n            @if (item.items) {\n              <ul class=\"submenu\">\n                @for (subItem of item.items; track $index) {\n                  <li class=\"submenu-item\">\n                    <a\n                      [routerLink]=\"subItem.routerLink\"\n                      routerLinkActive=\"active\"\n                      [routerLinkActiveOptions]=\"{ exact: true }\"\n                    >\n                      @if (subItem.icon) {\n                        <i class=\"{{ subItem.icon }}\"></i>\n                      }\n                      <span>{{ subItem.label }}</span>\n                    </a>\n                  </li>\n                }\n              </ul>\n            }\n          </li>\n        }\n      </ul>\n\n      @if (group.separator) {\n        <hr class=\"separator\" />\n      }\n    </li>\n  }\n</ul>\n", styles: [".menu{list-style:none;margin:0;padding:0}.menu-group{margin-bottom:1rem}.menu-group .menu-group-label{font-size:1em;font-weight:600;text-transform:uppercase;padding:.5rem 1rem;color:var(--color-contrast)}.menu-group .menu-items{list-style:none;margin:0;padding:0}.menu-group .menu-items .menu-item a{display:flex;align-items:center;padding:.75rem 1rem;color:var(--color-text-secondary);text-decoration:none;font-size:1em;border-left:3px solid transparent;transition:all .2s ease}.menu-group .menu-items .menu-item a i{margin-right:.5rem;font-size:1em}.menu-group .menu-items .menu-item a:hover{background-color:var(--surface-hover);border-radius:6px}.menu-group .menu-items .menu-item a.active{background-color:var(--surface-hover);border-radius:6px;border-left:3px solid var(--color-primary);font-weight:600}.menu-group .menu-items .menu-item .submenu{list-style:none;padding-left:1.5rem}.menu-group .menu-items .menu-item .submenu .submenu-item a{padding:.5rem 1rem;font-size:.95em;color:var(--color-text-tertiary)}.menu-group .menu-items .menu-item .submenu .submenu-item a:hover{background-color:var(--surface-hover);color:var(--color-text-primary)}.menu-group .menu-items .menu-item .submenu .submenu-item a.active{color:var(--color-primary);font-weight:600}.separator{border:none;border-top:1px solid #334155;margin:.5rem 0}\n"] }]
         }], propDecorators: { model: [{
                 type: Input
             }] } });
@@ -3825,11 +3825,11 @@ class SidebarComponent {
         this.layoutService = layoutService;
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: SidebarComponent, deps: [{ token: i0.ElementRef }, { token: LayoutService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.12", type: SidebarComponent, isStandalone: true, selector: "i-sidebar", inputs: { menuModel: "menuModel" }, ngImport: i0, template: "<div class=\"sidebar\">\n  @if (layoutService.state().isMobileViewport &&\n  layoutService.state().isSidebarOpen) {\n  <div class=\"sidebar-mobile-header\">\n    <div class=\"sidebar-mobile-header-inner\">\n      <i-button\n        [size]=\"'xtra-small'\"\n        [text]=\"true\"\n        [severity]=\"'contrast'\"\n        [icon]=\"'pi pi-times'\"\n        (clicked)=\"layoutService.closeSidebar()\"\n      ></i-button>\n    </div>\n  </div>\n  }\n\n  <div class=\"sidebar-menu-wrapper\">\n    <i-menu [model]=\"menuModel\" />\n  </div>\n</div>\n", styles: [".sidebar{display:flex;flex-direction:column;-webkit-user-select:none;user-select:none;min-height:100%;transition:transform .2s,left .2s;background-color:var(--surface-overlay);padding:24px 12px 40px;box-shadow:0 3px 5px #00000005,0 0 2px #0000000d,0 1px 4px #00000014}.sidebar .sidebar-mobile-header{display:none}.sidebar .sidebar-mobile-header .sidebar-mobile-header-inner{display:flex;justify-content:flex-end;align-items:center}.sidebar .sidebar-menu-wrapper{flex:1}@media(max-width:991px){.sidebar{height:100%;padding:0}.sidebar .sidebar-mobile-header{display:block;position:sticky;top:0;z-index:3;background:var(--surface-overlay);padding:12px 12px 8px;box-shadow:0 2px 6px #0000000f}.sidebar .sidebar-menu-wrapper{flex:1 1 auto;max-height:calc(100vh - 56px);overflow:auto;padding:12px}}\n"], dependencies: [{ kind: "component", type: MenuComponent, selector: "i-menu", inputs: ["model"] }, { kind: "component", type: IButton, selector: "i-button", inputs: ["severity", "size", "type", "disabled", "outlined", "raised", "text", "icon", "fluid", "loading"], outputs: ["clicked"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.12", type: SidebarComponent, isStandalone: true, selector: "i-sidebar", inputs: { menuModel: "menuModel" }, ngImport: i0, template: "<div class=\"sidebar\">\n  @if (\n    layoutService.state().isMobileViewport &&\n    layoutService.state().isSidebarOpen\n  ) {\n    <div class=\"sidebar-mobile-header\">\n      <div class=\"sidebar-mobile-header-inner\">\n        <i-button\n          [size]=\"'xtra-small'\"\n          [text]=\"true\"\n          [severity]=\"'contrast'\"\n          [icon]=\"'pi pi-times'\"\n          (clicked)=\"layoutService.closeSidebar()\"\n        ></i-button>\n      </div>\n    </div>\n  }\n\n  <div class=\"sidebar-menu-wrapper\">\n    <i-menu [model]=\"menuModel\" />\n  </div>\n</div>\n", styles: [".sidebar{display:flex;flex-direction:column;-webkit-user-select:none;user-select:none;min-height:100%;transition:transform .2s,left .2s;background-color:var(--surface-overlay);padding:24px 12px 40px;box-shadow:0 3px 5px #00000005,0 0 2px #0000000d,0 1px 4px #00000014}.sidebar .sidebar-mobile-header{display:none}.sidebar .sidebar-mobile-header .sidebar-mobile-header-inner{display:flex;justify-content:flex-end;align-items:center}.sidebar .sidebar-menu-wrapper{flex:1}@media(max-width:991px){.sidebar{height:100%;padding:0}.sidebar .sidebar-mobile-header{display:block;position:sticky;top:0;z-index:3;background:var(--surface-overlay);padding:12px 12px 8px;box-shadow:0 2px 6px #0000000f}.sidebar .sidebar-menu-wrapper{flex:1 1 auto;max-height:calc(100vh - 56px);overflow:auto;padding:12px}}\n"], dependencies: [{ kind: "component", type: MenuComponent, selector: "i-menu", inputs: ["model"] }, { kind: "component", type: IButton, selector: "i-button", inputs: ["severity", "size", "type", "disabled", "outlined", "raised", "text", "icon", "fluid", "loading"], outputs: ["clicked"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: SidebarComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'i-sidebar', imports: [MenuComponent, IButton], template: "<div class=\"sidebar\">\n  @if (layoutService.state().isMobileViewport &&\n  layoutService.state().isSidebarOpen) {\n  <div class=\"sidebar-mobile-header\">\n    <div class=\"sidebar-mobile-header-inner\">\n      <i-button\n        [size]=\"'xtra-small'\"\n        [text]=\"true\"\n        [severity]=\"'contrast'\"\n        [icon]=\"'pi pi-times'\"\n        (clicked)=\"layoutService.closeSidebar()\"\n      ></i-button>\n    </div>\n  </div>\n  }\n\n  <div class=\"sidebar-menu-wrapper\">\n    <i-menu [model]=\"menuModel\" />\n  </div>\n</div>\n", styles: [".sidebar{display:flex;flex-direction:column;-webkit-user-select:none;user-select:none;min-height:100%;transition:transform .2s,left .2s;background-color:var(--surface-overlay);padding:24px 12px 40px;box-shadow:0 3px 5px #00000005,0 0 2px #0000000d,0 1px 4px #00000014}.sidebar .sidebar-mobile-header{display:none}.sidebar .sidebar-mobile-header .sidebar-mobile-header-inner{display:flex;justify-content:flex-end;align-items:center}.sidebar .sidebar-menu-wrapper{flex:1}@media(max-width:991px){.sidebar{height:100%;padding:0}.sidebar .sidebar-mobile-header{display:block;position:sticky;top:0;z-index:3;background:var(--surface-overlay);padding:12px 12px 8px;box-shadow:0 2px 6px #0000000f}.sidebar .sidebar-menu-wrapper{flex:1 1 auto;max-height:calc(100vh - 56px);overflow:auto;padding:12px}}\n"] }]
+            args: [{ selector: 'i-sidebar', imports: [MenuComponent, IButton], template: "<div class=\"sidebar\">\n  @if (\n    layoutService.state().isMobileViewport &&\n    layoutService.state().isSidebarOpen\n  ) {\n    <div class=\"sidebar-mobile-header\">\n      <div class=\"sidebar-mobile-header-inner\">\n        <i-button\n          [size]=\"'xtra-small'\"\n          [text]=\"true\"\n          [severity]=\"'contrast'\"\n          [icon]=\"'pi pi-times'\"\n          (clicked)=\"layoutService.closeSidebar()\"\n        ></i-button>\n      </div>\n    </div>\n  }\n\n  <div class=\"sidebar-menu-wrapper\">\n    <i-menu [model]=\"menuModel\" />\n  </div>\n</div>\n", styles: [".sidebar{display:flex;flex-direction:column;-webkit-user-select:none;user-select:none;min-height:100%;transition:transform .2s,left .2s;background-color:var(--surface-overlay);padding:24px 12px 40px;box-shadow:0 3px 5px #00000005,0 0 2px #0000000d,0 1px 4px #00000014}.sidebar .sidebar-mobile-header{display:none}.sidebar .sidebar-mobile-header .sidebar-mobile-header-inner{display:flex;justify-content:flex-end;align-items:center}.sidebar .sidebar-menu-wrapper{flex:1}@media(max-width:991px){.sidebar{height:100%;padding:0}.sidebar .sidebar-mobile-header{display:block;position:sticky;top:0;z-index:3;background:var(--surface-overlay);padding:12px 12px 8px;box-shadow:0 2px 6px #0000000f}.sidebar .sidebar-menu-wrapper{flex:1 1 auto;max-height:calc(100vh - 56px);overflow:auto;padding:12px}}\n"] }]
         }], ctorParameters: () => [{ type: i0.ElementRef }, { type: LayoutService }], propDecorators: { menuModel: [{
                 type: Input
             }] } });
@@ -3991,7 +3991,10 @@ class LayoutComponent {
         // Clean up event listeners
         if (this.isPullToRefreshInitialized) {
             const container = this.mainContainer?.nativeElement;
-            if (container && this.boundHandleTouchStart && this.boundHandleTouchMove && this.boundHandleTouchEnd) {
+            if (container &&
+                this.boundHandleTouchStart &&
+                this.boundHandleTouchMove &&
+                this.boundHandleTouchEnd) {
                 container.removeEventListener('touchstart', this.boundHandleTouchStart);
                 container.removeEventListener('touchmove', this.boundHandleTouchMove);
                 container.removeEventListener('touchend', this.boundHandleTouchEnd);
@@ -3999,11 +4002,11 @@ class LayoutComponent {
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: LayoutComponent, deps: [{ token: LayoutService }, { token: i2.Router }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.12", type: LayoutComponent, isStandalone: true, selector: "i-layout", inputs: { config: "config", menuModel: "menuModel" }, host: { listeners: { "window:resize": "onWindowResize()" } }, viewQueries: [{ propertyName: "mainContainer", first: true, predicate: ["mainContainer"], descendants: true }], ngImport: i0, template: "<div class=\"layout\">\n  <div class=\"layout-wrapper\" [ngClass]=\"containerClass()\">\n    <i-topbar [config]=\"config\">\n      <ng-content select=\"[topbarActions]\" />\n    </i-topbar>\n    <div class=\"layout-body\">\n      <div\n        class=\"layout-sidebar-container\"\n        [ngClass]=\"{\n          'sidebar-open': layoutService.state().isSidebarOpen,\n          'sidebar-closed': !layoutService.state().isSidebarOpen\n        }\"\n      >\n        <i-sidebar [menuModel]=\"menuModel\" />\n      </div>\n      <div class=\"layout-main-container\" #mainContainer>\n        @if (config.enablePullToRefresh && layoutService.state().isMobileViewport) {\n          <div \n            class=\"pull-to-refresh-indicator\"\n            [style.transform]=\"'translateY(' + Math.max(-INDICATOR_OFFSET, pullDistance() - INDICATOR_OFFSET) + 'px)'\"\n            [style.opacity]=\"Math.min(1, pullDistance() / PULL_THRESHOLD)\"\n          >\n            <div class=\"refresh-icon\" [class.refreshing]=\"isRefreshing()\">\n              <i class=\"pi pi-refresh\"></i>\n            </div>\n            <div class=\"refresh-text\">\n              {{ isRefreshing() ? 'Refreshing...' : (pullDistance() >= PULL_THRESHOLD ? 'Release to refresh' : 'Pull to refresh') }}\n            </div>\n          </div>\n        }\n        <div class=\"layout-main\">\n          <router-outlet />\n        </div>\n      </div>\n    </div>\n    <div class=\"layout-mask\" (click)=\"hideMenu()\"></div>\n  </div>\n</div>\n", styles: [".layout .layout-wrapper{display:flex;flex-direction:column;height:100vh;overflow:hidden}.layout .layout-wrapper .layout-body{display:flex;flex:1 1 auto;min-height:0}.layout .layout-wrapper .layout-body .layout-sidebar-container{flex-shrink:0;width:300px;height:100%;overflow-y:auto;transition:transform .3s ease,opacity .3s ease;opacity:1}.layout .layout-wrapper .layout-body .layout-sidebar-container::-webkit-scrollbar{width:var(--scrollbar-size, 6px);height:var(--scrollbar-size, 6px)}.layout .layout-wrapper .layout-body .layout-sidebar-container::-webkit-scrollbar-track{background:var(--scrollbar-track, transparent);border-radius:var(--scrollbar-radius, 3px)}.layout .layout-wrapper .layout-body .layout-sidebar-container::-webkit-scrollbar-thumb{background:#0003;border-radius:var(--scrollbar-radius, 3px);transition:background .2s ease}.layout .layout-wrapper .layout-body .layout-sidebar-container::-webkit-scrollbar-thumb:hover{background:#00000059}.layout .layout-wrapper .layout-body .layout-sidebar-container::-webkit-scrollbar-thumb:active{background:#00000080}.layout .layout-wrapper .layout-body .layout-sidebar-container::-webkit-scrollbar-corner{background:transparent}.layout .layout-wrapper .layout-body .layout-sidebar-container{scrollbar-width:thin;scrollbar-color:rgba(0,0,0,.2) transparent;scroll-behavior:smooth}.layout .layout-wrapper .layout-body .layout-sidebar-container::-webkit-scrollbar-thumb{background:var(--scrollbar-thumb, var(--color-text-secondary))}.layout .layout-wrapper .layout-body .layout-sidebar-container::-webkit-scrollbar-thumb:hover{background:var(--scrollbar-thumb-hover, var(--color-text-primary))}.layout .layout-wrapper .layout-body .layout-sidebar-container::-webkit-scrollbar-thumb:active{background:var(--scrollbar-thumb-active, var(--color-primary))}.layout .layout-wrapper .layout-body .layout-sidebar-container{scrollbar-color:var(--scrollbar-thumb, var(--color-text-secondary)) var(--scrollbar-track, transparent)}.layout .layout-wrapper .layout-body .layout-sidebar-container.sidebar-open{transform:translate(0);opacity:1;pointer-events:auto}.layout .layout-wrapper .layout-body .layout-sidebar-container.sidebar-closed{transform:translate(-100%);opacity:0;pointer-events:none}.layout .layout-wrapper .layout-body .layout-main-container{flex:1 1 auto;min-width:0;overflow-y:auto;padding:2rem;transition:margin-left .3s ease;position:relative}.layout .layout-wrapper .layout-body .layout-main-container::-webkit-scrollbar-track{background:var(--scrollbar-track, transparent);border-radius:var(--scrollbar-radius, 3px)}.layout .layout-wrapper .layout-body .layout-main-container::-webkit-scrollbar-thumb{background:#0003;border-radius:var(--scrollbar-radius, 3px);transition:background .2s ease}.layout .layout-wrapper .layout-body .layout-main-container::-webkit-scrollbar-thumb:hover{background:#00000059}.layout .layout-wrapper .layout-body .layout-main-container::-webkit-scrollbar-thumb:active{background:#00000080}.layout .layout-wrapper .layout-body .layout-main-container::-webkit-scrollbar-corner{background:transparent}.layout .layout-wrapper .layout-body .layout-main-container{scrollbar-width:thin;scrollbar-color:rgba(0,0,0,.2) transparent;scroll-behavior:smooth}.layout .layout-wrapper .layout-body .layout-main-container::-webkit-scrollbar-thumb{background:var(--scrollbar-thumb, var(--color-text-secondary))}.layout .layout-wrapper .layout-body .layout-main-container{scrollbar-color:var(--scrollbar-thumb, var(--color-text-secondary)) var(--scrollbar-track, transparent)}.layout .layout-wrapper .layout-body .layout-main-container::-webkit-scrollbar{width:var(--scrollbar-size, 6px);height:var(--scrollbar-size, 6px)}.layout .layout-wrapper .layout-body .layout-main-container::-webkit-scrollbar-track{background:var(--scrollbar-track-dropdown, rgba(0, 0, 0, .05));border-radius:var(--scrollbar-radius, 3px);margin:2px 0}.layout .layout-wrapper .layout-body .layout-main-container::-webkit-scrollbar-thumb{border-radius:var(--scrollbar-radius, 3px);min-height:20px;background:var(--scrollbar-thumb, var(--color-text-secondary))}.layout .layout-wrapper .layout-body .layout-main-container::-webkit-scrollbar-thumb:hover{background:var(--scrollbar-thumb-hover, var(--color-text-primary))}.layout .layout-wrapper .layout-body .layout-main-container::-webkit-scrollbar-thumb:active{background:var(--scrollbar-thumb-active, var(--color-primary))}.layout .layout-wrapper .layout-body .layout-main-container{scrollbar-width:thin;scrollbar-color:var(--scrollbar-thumb, var(--color-text-secondary)) var(--scrollbar-track-dropdown, rgba(0, 0, 0, .05))}.layout .layout-wrapper .layout-body .layout-main-container .pull-to-refresh-indicator{position:absolute;top:0;left:0;right:0;height:60px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.5rem;pointer-events:none;z-index:10;transition:opacity .2s ease}.layout .layout-wrapper .layout-body .layout-main-container .pull-to-refresh-indicator .refresh-icon{font-size:1.5rem;color:var(--primary-color);transition:transform .3s ease}.layout .layout-wrapper .layout-body .layout-main-container .pull-to-refresh-indicator .refresh-icon.refreshing{animation:spin 1s linear infinite}.layout .layout-wrapper .layout-body .layout-main-container .pull-to-refresh-indicator .refresh-text{font-size:.875rem;color:var(--text-color-secondary);font-weight:500}.layout .layout-wrapper .layout-body .layout-main-container .layout-main{width:100%;max-width:100%}.layout .layout-wrapper.layout-static-inactive .layout-main-container{margin-left:-300px}.layout .layout-wrapper.layout-overlay-active .layout-sidebar-container{position:fixed;left:0;top:5rem;height:calc(100vh - 5rem);z-index:999;background:var(--surface-overlay)}.layout .layout-wrapper .layout-mask{position:fixed;top:0;left:0;width:100%;height:100%;background:#0006;z-index:998;display:none}.layout .layout-wrapper.layout-mobile-active .layout-mask{display:block}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}@media(max-width:991px){.layout .layout-wrapper .layout-body .layout-sidebar-container{position:fixed;left:0;top:0;height:100vh;z-index:999;transition:transform .2s ease;background:var(--surface-overlay);overflow-y:auto}.layout .layout-wrapper .layout-body .layout-main-container{margin-left:0;width:100%;padding:24px 0}}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: TopbarComponent, selector: "i-topbar", inputs: ["config"] }, { kind: "component", type: SidebarComponent, selector: "i-sidebar", inputs: ["menuModel"] }, { kind: "directive", type: RouterOutlet, selector: "router-outlet", inputs: ["name", "routerOutletData"], outputs: ["activate", "deactivate", "attach", "detach"], exportAs: ["outlet"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.12", type: LayoutComponent, isStandalone: true, selector: "i-layout", inputs: { config: "config", menuModel: "menuModel" }, host: { listeners: { "window:resize": "onWindowResize()" } }, viewQueries: [{ propertyName: "mainContainer", first: true, predicate: ["mainContainer"], descendants: true }], ngImport: i0, template: "<div class=\"layout\">\n  <div class=\"layout-wrapper\" [ngClass]=\"containerClass()\">\n    <i-topbar [config]=\"config\">\n      <ng-content select=\"[topbarActions]\" />\n    </i-topbar>\n    <div class=\"layout-body\">\n      <div\n        class=\"layout-sidebar-container\"\n        [ngClass]=\"{\n          'sidebar-open': layoutService.state().isSidebarOpen,\n          'sidebar-closed': !layoutService.state().isSidebarOpen,\n        }\"\n      >\n        <i-sidebar [menuModel]=\"menuModel\" />\n      </div>\n      <div class=\"layout-main-container\" #mainContainer>\n        @if (\n          config.enablePullToRefresh && layoutService.state().isMobileViewport\n        ) {\n          <div\n            class=\"pull-to-refresh-indicator\"\n            [style.transform]=\"\n              'translateY(' +\n              Math.max(-INDICATOR_OFFSET, pullDistance() - INDICATOR_OFFSET) +\n              'px)'\n            \"\n            [style.opacity]=\"Math.min(1, pullDistance() / PULL_THRESHOLD)\"\n          >\n            <div class=\"refresh-icon\" [class.refreshing]=\"isRefreshing()\">\n              <i class=\"pi pi-refresh\"></i>\n            </div>\n            <div class=\"refresh-text\">\n              {{\n                isRefreshing()\n                  ? \"Refreshing...\"\n                  : pullDistance() >= PULL_THRESHOLD\n                    ? \"Release to refresh\"\n                    : \"Pull to refresh\"\n              }}\n            </div>\n          </div>\n        }\n        <div class=\"layout-main\">\n          <router-outlet />\n        </div>\n      </div>\n    </div>\n    <div class=\"layout-mask\" (click)=\"hideMenu()\"></div>\n  </div>\n</div>\n", styles: [".layout .layout-wrapper{display:flex;flex-direction:column;height:100vh;overflow:hidden}.layout .layout-wrapper .layout-body{display:flex;flex:1 1 auto;min-height:0}.layout .layout-wrapper .layout-body .layout-sidebar-container{flex-shrink:0;width:300px;height:100%;overflow-y:auto;transition:transform .3s ease,opacity .3s ease;opacity:1}.layout .layout-wrapper .layout-body .layout-sidebar-container::-webkit-scrollbar{width:var(--scrollbar-size, 6px);height:var(--scrollbar-size, 6px)}.layout .layout-wrapper .layout-body .layout-sidebar-container::-webkit-scrollbar-track{background:var(--scrollbar-track, transparent);border-radius:var(--scrollbar-radius, 3px)}.layout .layout-wrapper .layout-body .layout-sidebar-container::-webkit-scrollbar-thumb{background:#0003;border-radius:var(--scrollbar-radius, 3px);transition:background .2s ease}.layout .layout-wrapper .layout-body .layout-sidebar-container::-webkit-scrollbar-thumb:hover{background:#00000059}.layout .layout-wrapper .layout-body .layout-sidebar-container::-webkit-scrollbar-thumb:active{background:#00000080}.layout .layout-wrapper .layout-body .layout-sidebar-container::-webkit-scrollbar-corner{background:transparent}.layout .layout-wrapper .layout-body .layout-sidebar-container{scrollbar-width:thin;scrollbar-color:rgba(0,0,0,.2) transparent;scroll-behavior:smooth}.layout .layout-wrapper .layout-body .layout-sidebar-container::-webkit-scrollbar-thumb{background:var(--scrollbar-thumb, var(--color-text-secondary))}.layout .layout-wrapper .layout-body .layout-sidebar-container::-webkit-scrollbar-thumb:hover{background:var(--scrollbar-thumb-hover, var(--color-text-primary))}.layout .layout-wrapper .layout-body .layout-sidebar-container::-webkit-scrollbar-thumb:active{background:var(--scrollbar-thumb-active, var(--color-primary))}.layout .layout-wrapper .layout-body .layout-sidebar-container{scrollbar-color:var(--scrollbar-thumb, var(--color-text-secondary)) var(--scrollbar-track, transparent)}.layout .layout-wrapper .layout-body .layout-sidebar-container.sidebar-open{transform:translate(0);opacity:1;pointer-events:auto}.layout .layout-wrapper .layout-body .layout-sidebar-container.sidebar-closed{transform:translate(-100%);opacity:0;pointer-events:none}.layout .layout-wrapper .layout-body .layout-main-container{flex:1 1 auto;min-width:0;overflow-y:auto;padding:2rem;transition:margin-left .3s ease;position:relative}.layout .layout-wrapper .layout-body .layout-main-container::-webkit-scrollbar-track{background:var(--scrollbar-track, transparent);border-radius:var(--scrollbar-radius, 3px)}.layout .layout-wrapper .layout-body .layout-main-container::-webkit-scrollbar-thumb{background:#0003;border-radius:var(--scrollbar-radius, 3px);transition:background .2s ease}.layout .layout-wrapper .layout-body .layout-main-container::-webkit-scrollbar-thumb:hover{background:#00000059}.layout .layout-wrapper .layout-body .layout-main-container::-webkit-scrollbar-thumb:active{background:#00000080}.layout .layout-wrapper .layout-body .layout-main-container::-webkit-scrollbar-corner{background:transparent}.layout .layout-wrapper .layout-body .layout-main-container{scrollbar-width:thin;scrollbar-color:rgba(0,0,0,.2) transparent;scroll-behavior:smooth}.layout .layout-wrapper .layout-body .layout-main-container::-webkit-scrollbar-thumb{background:var(--scrollbar-thumb, var(--color-text-secondary))}.layout .layout-wrapper .layout-body .layout-main-container{scrollbar-color:var(--scrollbar-thumb, var(--color-text-secondary)) var(--scrollbar-track, transparent)}.layout .layout-wrapper .layout-body .layout-main-container::-webkit-scrollbar{width:var(--scrollbar-size, 6px);height:var(--scrollbar-size, 6px)}.layout .layout-wrapper .layout-body .layout-main-container::-webkit-scrollbar-track{background:var(--scrollbar-track-dropdown, rgba(0, 0, 0, .05));border-radius:var(--scrollbar-radius, 3px);margin:2px 0}.layout .layout-wrapper .layout-body .layout-main-container::-webkit-scrollbar-thumb{border-radius:var(--scrollbar-radius, 3px);min-height:20px;background:var(--scrollbar-thumb, var(--color-text-secondary))}.layout .layout-wrapper .layout-body .layout-main-container::-webkit-scrollbar-thumb:hover{background:var(--scrollbar-thumb-hover, var(--color-text-primary))}.layout .layout-wrapper .layout-body .layout-main-container::-webkit-scrollbar-thumb:active{background:var(--scrollbar-thumb-active, var(--color-primary))}.layout .layout-wrapper .layout-body .layout-main-container{scrollbar-width:thin;scrollbar-color:var(--scrollbar-thumb, var(--color-text-secondary)) var(--scrollbar-track-dropdown, rgba(0, 0, 0, .05))}.layout .layout-wrapper .layout-body .layout-main-container .pull-to-refresh-indicator{position:absolute;top:0;left:0;right:0;height:60px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.5rem;pointer-events:none;z-index:10;transition:opacity .2s ease}.layout .layout-wrapper .layout-body .layout-main-container .pull-to-refresh-indicator .refresh-icon{font-size:1.5rem;color:var(--primary-color);transition:transform .3s ease}.layout .layout-wrapper .layout-body .layout-main-container .pull-to-refresh-indicator .refresh-icon.refreshing{animation:spin 1s linear infinite}.layout .layout-wrapper .layout-body .layout-main-container .pull-to-refresh-indicator .refresh-text{font-size:.875rem;color:var(--text-color-secondary);font-weight:500}.layout .layout-wrapper .layout-body .layout-main-container .layout-main{width:100%;max-width:100%}.layout .layout-wrapper.layout-static-inactive .layout-main-container{margin-left:-300px}.layout .layout-wrapper.layout-overlay-active .layout-sidebar-container{position:fixed;left:0;top:5rem;height:calc(100vh - 5rem);z-index:999;background:var(--surface-overlay)}.layout .layout-wrapper .layout-mask{position:fixed;top:0;left:0;width:100%;height:100%;background:#0006;z-index:998;display:none}.layout .layout-wrapper.layout-mobile-active .layout-mask{display:block}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}@media(max-width:991px){.layout .layout-wrapper .layout-body .layout-sidebar-container{position:fixed;left:0;top:0;height:100vh;z-index:999;transition:transform .2s ease;background:var(--surface-overlay);overflow-y:auto}.layout .layout-wrapper .layout-body .layout-main-container{margin-left:0;width:100%;padding:24px 0}}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: TopbarComponent, selector: "i-topbar", inputs: ["config"] }, { kind: "component", type: SidebarComponent, selector: "i-sidebar", inputs: ["menuModel"] }, { kind: "directive", type: RouterOutlet, selector: "router-outlet", inputs: ["name", "routerOutletData"], outputs: ["activate", "deactivate", "attach", "detach"], exportAs: ["outlet"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: LayoutComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'i-layout', imports: [NgClass, TopbarComponent, SidebarComponent, RouterOutlet], template: "<div class=\"layout\">\n  <div class=\"layout-wrapper\" [ngClass]=\"containerClass()\">\n    <i-topbar [config]=\"config\">\n      <ng-content select=\"[topbarActions]\" />\n    </i-topbar>\n    <div class=\"layout-body\">\n      <div\n        class=\"layout-sidebar-container\"\n        [ngClass]=\"{\n          'sidebar-open': layoutService.state().isSidebarOpen,\n          'sidebar-closed': !layoutService.state().isSidebarOpen\n        }\"\n      >\n        <i-sidebar [menuModel]=\"menuModel\" />\n      </div>\n      <div class=\"layout-main-container\" #mainContainer>\n        @if (config.enablePullToRefresh && layoutService.state().isMobileViewport) {\n          <div \n            class=\"pull-to-refresh-indicator\"\n            [style.transform]=\"'translateY(' + Math.max(-INDICATOR_OFFSET, pullDistance() - INDICATOR_OFFSET) + 'px)'\"\n            [style.opacity]=\"Math.min(1, pullDistance() / PULL_THRESHOLD)\"\n          >\n            <div class=\"refresh-icon\" [class.refreshing]=\"isRefreshing()\">\n              <i class=\"pi pi-refresh\"></i>\n            </div>\n            <div class=\"refresh-text\">\n              {{ isRefreshing() ? 'Refreshing...' : (pullDistance() >= PULL_THRESHOLD ? 'Release to refresh' : 'Pull to refresh') }}\n            </div>\n          </div>\n        }\n        <div class=\"layout-main\">\n          <router-outlet />\n        </div>\n      </div>\n    </div>\n    <div class=\"layout-mask\" (click)=\"hideMenu()\"></div>\n  </div>\n</div>\n", styles: [".layout .layout-wrapper{display:flex;flex-direction:column;height:100vh;overflow:hidden}.layout .layout-wrapper .layout-body{display:flex;flex:1 1 auto;min-height:0}.layout .layout-wrapper .layout-body .layout-sidebar-container{flex-shrink:0;width:300px;height:100%;overflow-y:auto;transition:transform .3s ease,opacity .3s ease;opacity:1}.layout .layout-wrapper .layout-body .layout-sidebar-container::-webkit-scrollbar{width:var(--scrollbar-size, 6px);height:var(--scrollbar-size, 6px)}.layout .layout-wrapper .layout-body .layout-sidebar-container::-webkit-scrollbar-track{background:var(--scrollbar-track, transparent);border-radius:var(--scrollbar-radius, 3px)}.layout .layout-wrapper .layout-body .layout-sidebar-container::-webkit-scrollbar-thumb{background:#0003;border-radius:var(--scrollbar-radius, 3px);transition:background .2s ease}.layout .layout-wrapper .layout-body .layout-sidebar-container::-webkit-scrollbar-thumb:hover{background:#00000059}.layout .layout-wrapper .layout-body .layout-sidebar-container::-webkit-scrollbar-thumb:active{background:#00000080}.layout .layout-wrapper .layout-body .layout-sidebar-container::-webkit-scrollbar-corner{background:transparent}.layout .layout-wrapper .layout-body .layout-sidebar-container{scrollbar-width:thin;scrollbar-color:rgba(0,0,0,.2) transparent;scroll-behavior:smooth}.layout .layout-wrapper .layout-body .layout-sidebar-container::-webkit-scrollbar-thumb{background:var(--scrollbar-thumb, var(--color-text-secondary))}.layout .layout-wrapper .layout-body .layout-sidebar-container::-webkit-scrollbar-thumb:hover{background:var(--scrollbar-thumb-hover, var(--color-text-primary))}.layout .layout-wrapper .layout-body .layout-sidebar-container::-webkit-scrollbar-thumb:active{background:var(--scrollbar-thumb-active, var(--color-primary))}.layout .layout-wrapper .layout-body .layout-sidebar-container{scrollbar-color:var(--scrollbar-thumb, var(--color-text-secondary)) var(--scrollbar-track, transparent)}.layout .layout-wrapper .layout-body .layout-sidebar-container.sidebar-open{transform:translate(0);opacity:1;pointer-events:auto}.layout .layout-wrapper .layout-body .layout-sidebar-container.sidebar-closed{transform:translate(-100%);opacity:0;pointer-events:none}.layout .layout-wrapper .layout-body .layout-main-container{flex:1 1 auto;min-width:0;overflow-y:auto;padding:2rem;transition:margin-left .3s ease;position:relative}.layout .layout-wrapper .layout-body .layout-main-container::-webkit-scrollbar-track{background:var(--scrollbar-track, transparent);border-radius:var(--scrollbar-radius, 3px)}.layout .layout-wrapper .layout-body .layout-main-container::-webkit-scrollbar-thumb{background:#0003;border-radius:var(--scrollbar-radius, 3px);transition:background .2s ease}.layout .layout-wrapper .layout-body .layout-main-container::-webkit-scrollbar-thumb:hover{background:#00000059}.layout .layout-wrapper .layout-body .layout-main-container::-webkit-scrollbar-thumb:active{background:#00000080}.layout .layout-wrapper .layout-body .layout-main-container::-webkit-scrollbar-corner{background:transparent}.layout .layout-wrapper .layout-body .layout-main-container{scrollbar-width:thin;scrollbar-color:rgba(0,0,0,.2) transparent;scroll-behavior:smooth}.layout .layout-wrapper .layout-body .layout-main-container::-webkit-scrollbar-thumb{background:var(--scrollbar-thumb, var(--color-text-secondary))}.layout .layout-wrapper .layout-body .layout-main-container{scrollbar-color:var(--scrollbar-thumb, var(--color-text-secondary)) var(--scrollbar-track, transparent)}.layout .layout-wrapper .layout-body .layout-main-container::-webkit-scrollbar{width:var(--scrollbar-size, 6px);height:var(--scrollbar-size, 6px)}.layout .layout-wrapper .layout-body .layout-main-container::-webkit-scrollbar-track{background:var(--scrollbar-track-dropdown, rgba(0, 0, 0, .05));border-radius:var(--scrollbar-radius, 3px);margin:2px 0}.layout .layout-wrapper .layout-body .layout-main-container::-webkit-scrollbar-thumb{border-radius:var(--scrollbar-radius, 3px);min-height:20px;background:var(--scrollbar-thumb, var(--color-text-secondary))}.layout .layout-wrapper .layout-body .layout-main-container::-webkit-scrollbar-thumb:hover{background:var(--scrollbar-thumb-hover, var(--color-text-primary))}.layout .layout-wrapper .layout-body .layout-main-container::-webkit-scrollbar-thumb:active{background:var(--scrollbar-thumb-active, var(--color-primary))}.layout .layout-wrapper .layout-body .layout-main-container{scrollbar-width:thin;scrollbar-color:var(--scrollbar-thumb, var(--color-text-secondary)) var(--scrollbar-track-dropdown, rgba(0, 0, 0, .05))}.layout .layout-wrapper .layout-body .layout-main-container .pull-to-refresh-indicator{position:absolute;top:0;left:0;right:0;height:60px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.5rem;pointer-events:none;z-index:10;transition:opacity .2s ease}.layout .layout-wrapper .layout-body .layout-main-container .pull-to-refresh-indicator .refresh-icon{font-size:1.5rem;color:var(--primary-color);transition:transform .3s ease}.layout .layout-wrapper .layout-body .layout-main-container .pull-to-refresh-indicator .refresh-icon.refreshing{animation:spin 1s linear infinite}.layout .layout-wrapper .layout-body .layout-main-container .pull-to-refresh-indicator .refresh-text{font-size:.875rem;color:var(--text-color-secondary);font-weight:500}.layout .layout-wrapper .layout-body .layout-main-container .layout-main{width:100%;max-width:100%}.layout .layout-wrapper.layout-static-inactive .layout-main-container{margin-left:-300px}.layout .layout-wrapper.layout-overlay-active .layout-sidebar-container{position:fixed;left:0;top:5rem;height:calc(100vh - 5rem);z-index:999;background:var(--surface-overlay)}.layout .layout-wrapper .layout-mask{position:fixed;top:0;left:0;width:100%;height:100%;background:#0006;z-index:998;display:none}.layout .layout-wrapper.layout-mobile-active .layout-mask{display:block}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}@media(max-width:991px){.layout .layout-wrapper .layout-body .layout-sidebar-container{position:fixed;left:0;top:0;height:100vh;z-index:999;transition:transform .2s ease;background:var(--surface-overlay);overflow-y:auto}.layout .layout-wrapper .layout-body .layout-main-container{margin-left:0;width:100%;padding:24px 0}}\n"] }]
+            args: [{ selector: 'i-layout', imports: [NgClass, TopbarComponent, SidebarComponent, RouterOutlet], template: "<div class=\"layout\">\n  <div class=\"layout-wrapper\" [ngClass]=\"containerClass()\">\n    <i-topbar [config]=\"config\">\n      <ng-content select=\"[topbarActions]\" />\n    </i-topbar>\n    <div class=\"layout-body\">\n      <div\n        class=\"layout-sidebar-container\"\n        [ngClass]=\"{\n          'sidebar-open': layoutService.state().isSidebarOpen,\n          'sidebar-closed': !layoutService.state().isSidebarOpen,\n        }\"\n      >\n        <i-sidebar [menuModel]=\"menuModel\" />\n      </div>\n      <div class=\"layout-main-container\" #mainContainer>\n        @if (\n          config.enablePullToRefresh && layoutService.state().isMobileViewport\n        ) {\n          <div\n            class=\"pull-to-refresh-indicator\"\n            [style.transform]=\"\n              'translateY(' +\n              Math.max(-INDICATOR_OFFSET, pullDistance() - INDICATOR_OFFSET) +\n              'px)'\n            \"\n            [style.opacity]=\"Math.min(1, pullDistance() / PULL_THRESHOLD)\"\n          >\n            <div class=\"refresh-icon\" [class.refreshing]=\"isRefreshing()\">\n              <i class=\"pi pi-refresh\"></i>\n            </div>\n            <div class=\"refresh-text\">\n              {{\n                isRefreshing()\n                  ? \"Refreshing...\"\n                  : pullDistance() >= PULL_THRESHOLD\n                    ? \"Release to refresh\"\n                    : \"Pull to refresh\"\n              }}\n            </div>\n          </div>\n        }\n        <div class=\"layout-main\">\n          <router-outlet />\n        </div>\n      </div>\n    </div>\n    <div class=\"layout-mask\" (click)=\"hideMenu()\"></div>\n  </div>\n</div>\n", styles: [".layout .layout-wrapper{display:flex;flex-direction:column;height:100vh;overflow:hidden}.layout .layout-wrapper .layout-body{display:flex;flex:1 1 auto;min-height:0}.layout .layout-wrapper .layout-body .layout-sidebar-container{flex-shrink:0;width:300px;height:100%;overflow-y:auto;transition:transform .3s ease,opacity .3s ease;opacity:1}.layout .layout-wrapper .layout-body .layout-sidebar-container::-webkit-scrollbar{width:var(--scrollbar-size, 6px);height:var(--scrollbar-size, 6px)}.layout .layout-wrapper .layout-body .layout-sidebar-container::-webkit-scrollbar-track{background:var(--scrollbar-track, transparent);border-radius:var(--scrollbar-radius, 3px)}.layout .layout-wrapper .layout-body .layout-sidebar-container::-webkit-scrollbar-thumb{background:#0003;border-radius:var(--scrollbar-radius, 3px);transition:background .2s ease}.layout .layout-wrapper .layout-body .layout-sidebar-container::-webkit-scrollbar-thumb:hover{background:#00000059}.layout .layout-wrapper .layout-body .layout-sidebar-container::-webkit-scrollbar-thumb:active{background:#00000080}.layout .layout-wrapper .layout-body .layout-sidebar-container::-webkit-scrollbar-corner{background:transparent}.layout .layout-wrapper .layout-body .layout-sidebar-container{scrollbar-width:thin;scrollbar-color:rgba(0,0,0,.2) transparent;scroll-behavior:smooth}.layout .layout-wrapper .layout-body .layout-sidebar-container::-webkit-scrollbar-thumb{background:var(--scrollbar-thumb, var(--color-text-secondary))}.layout .layout-wrapper .layout-body .layout-sidebar-container::-webkit-scrollbar-thumb:hover{background:var(--scrollbar-thumb-hover, var(--color-text-primary))}.layout .layout-wrapper .layout-body .layout-sidebar-container::-webkit-scrollbar-thumb:active{background:var(--scrollbar-thumb-active, var(--color-primary))}.layout .layout-wrapper .layout-body .layout-sidebar-container{scrollbar-color:var(--scrollbar-thumb, var(--color-text-secondary)) var(--scrollbar-track, transparent)}.layout .layout-wrapper .layout-body .layout-sidebar-container.sidebar-open{transform:translate(0);opacity:1;pointer-events:auto}.layout .layout-wrapper .layout-body .layout-sidebar-container.sidebar-closed{transform:translate(-100%);opacity:0;pointer-events:none}.layout .layout-wrapper .layout-body .layout-main-container{flex:1 1 auto;min-width:0;overflow-y:auto;padding:2rem;transition:margin-left .3s ease;position:relative}.layout .layout-wrapper .layout-body .layout-main-container::-webkit-scrollbar-track{background:var(--scrollbar-track, transparent);border-radius:var(--scrollbar-radius, 3px)}.layout .layout-wrapper .layout-body .layout-main-container::-webkit-scrollbar-thumb{background:#0003;border-radius:var(--scrollbar-radius, 3px);transition:background .2s ease}.layout .layout-wrapper .layout-body .layout-main-container::-webkit-scrollbar-thumb:hover{background:#00000059}.layout .layout-wrapper .layout-body .layout-main-container::-webkit-scrollbar-thumb:active{background:#00000080}.layout .layout-wrapper .layout-body .layout-main-container::-webkit-scrollbar-corner{background:transparent}.layout .layout-wrapper .layout-body .layout-main-container{scrollbar-width:thin;scrollbar-color:rgba(0,0,0,.2) transparent;scroll-behavior:smooth}.layout .layout-wrapper .layout-body .layout-main-container::-webkit-scrollbar-thumb{background:var(--scrollbar-thumb, var(--color-text-secondary))}.layout .layout-wrapper .layout-body .layout-main-container{scrollbar-color:var(--scrollbar-thumb, var(--color-text-secondary)) var(--scrollbar-track, transparent)}.layout .layout-wrapper .layout-body .layout-main-container::-webkit-scrollbar{width:var(--scrollbar-size, 6px);height:var(--scrollbar-size, 6px)}.layout .layout-wrapper .layout-body .layout-main-container::-webkit-scrollbar-track{background:var(--scrollbar-track-dropdown, rgba(0, 0, 0, .05));border-radius:var(--scrollbar-radius, 3px);margin:2px 0}.layout .layout-wrapper .layout-body .layout-main-container::-webkit-scrollbar-thumb{border-radius:var(--scrollbar-radius, 3px);min-height:20px;background:var(--scrollbar-thumb, var(--color-text-secondary))}.layout .layout-wrapper .layout-body .layout-main-container::-webkit-scrollbar-thumb:hover{background:var(--scrollbar-thumb-hover, var(--color-text-primary))}.layout .layout-wrapper .layout-body .layout-main-container::-webkit-scrollbar-thumb:active{background:var(--scrollbar-thumb-active, var(--color-primary))}.layout .layout-wrapper .layout-body .layout-main-container{scrollbar-width:thin;scrollbar-color:var(--scrollbar-thumb, var(--color-text-secondary)) var(--scrollbar-track-dropdown, rgba(0, 0, 0, .05))}.layout .layout-wrapper .layout-body .layout-main-container .pull-to-refresh-indicator{position:absolute;top:0;left:0;right:0;height:60px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.5rem;pointer-events:none;z-index:10;transition:opacity .2s ease}.layout .layout-wrapper .layout-body .layout-main-container .pull-to-refresh-indicator .refresh-icon{font-size:1.5rem;color:var(--primary-color);transition:transform .3s ease}.layout .layout-wrapper .layout-body .layout-main-container .pull-to-refresh-indicator .refresh-icon.refreshing{animation:spin 1s linear infinite}.layout .layout-wrapper .layout-body .layout-main-container .pull-to-refresh-indicator .refresh-text{font-size:.875rem;color:var(--text-color-secondary);font-weight:500}.layout .layout-wrapper .layout-body .layout-main-container .layout-main{width:100%;max-width:100%}.layout .layout-wrapper.layout-static-inactive .layout-main-container{margin-left:-300px}.layout .layout-wrapper.layout-overlay-active .layout-sidebar-container{position:fixed;left:0;top:5rem;height:calc(100vh - 5rem);z-index:999;background:var(--surface-overlay)}.layout .layout-wrapper .layout-mask{position:fixed;top:0;left:0;width:100%;height:100%;background:#0006;z-index:998;display:none}.layout .layout-wrapper.layout-mobile-active .layout-mask{display:block}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}@media(max-width:991px){.layout .layout-wrapper .layout-body .layout-sidebar-container{position:fixed;left:0;top:0;height:100vh;z-index:999;transition:transform .2s ease;background:var(--surface-overlay);overflow-y:auto}.layout .layout-wrapper .layout-body .layout-main-container{margin-left:0;width:100%;padding:24px 0}}\n"] }]
         }], ctorParameters: () => [{ type: LayoutService }, { type: i2.Router }], propDecorators: { config: [{
                 type: Input
             }], menuModel: [{
@@ -4444,7 +4447,7 @@ class IListbox {
                 useExisting: forwardRef(() => IListbox),
                 multi: true,
             },
-        ], viewQueries: [{ propertyName: "dropdownRef", first: true, predicate: ["dropdown"], descendants: true }, { propertyName: "searchInputRef", first: true, predicate: ["searchInput"], descendants: true }], ngImport: i0, template: "<div\n  class=\"i-listbox-wrapper\"\n  [class.i-listbox--fluid]=\"fluid\"\n  [class.i-listbox--disabled]=\"disabled\"\n  [class.i-listbox--invalid]=\"showErrors\"\n  [class.i-listbox--menu]=\"displayAsMenu\"\n  #dropdown\n>\n  <!-- Header -->\n  <div class=\"i-listbox-header\">\n    <div class=\"i-listbox-header-content\">\n      <span class=\"i-listbox-title\">{{ effectiveTitle }}</span>\n      @if (actionIcon) {\n      <i-button\n        [text]=\"true\"\n        [size]=\"'small'\"\n        [severity]=\"'contrast'\"\n        [icon]=\"actionIcon\"\n        [disabled]=\"disabled\"\n        (clicked)=\"onActionClick($event)\"\n        [attr.title]=\"actionTooltip\"\n      ></i-button>\n      }\n    </div>\n\n    <!-- Chips area for multiselect mode -->\n    @if (multiple && showChips) {\n    <div class=\"i-listbox-chips-wrapper\">\n      <i-chips\n        class=\"i-listbox-chips\"\n        [chips]=\"getSelectedChipItems()\"\n        [removable]=\"!disabled\"\n        [disabled]=\"disabled\"\n        [collapseOnOverflow]=\"true\"\n        [overflowLabel]=\"getDisplayLabel()\"\n        (removeChip)=\"onChipRemove($event)\"\n      ></i-chips>\n    </div>\n    }\n  </div>\n\n  <!-- Dropdown content -->\n  <div class=\"i-listbox-dropdown\">\n    @if (filter) {\n    <div class=\"i-listbox-filter\">\n      <i-input-text\n        #searchInput\n        [useFloatLabel]=\"false\"\n        placeholder=\"Search...\"\n        [ngModel]=\"filterValue()\"\n        (ngModelChange)=\"filterValue.set($event)\"\n        [fluid]=\"true\"\n        [icon]=\"'pi pi-search'\"\n      >\n      </i-input-text>\n    </div>\n    }\n\n    <div class=\"i-listbox-options\">\n      @for (option of filteredOptions(); track getOptionValue(option)) {\n      <div\n        class=\"i-listbox-option\"\n        [class.selected]=\"isOptionSelected(option)\"\n        [class.has-icon]=\"!multiple && getOptionIcon(option)\"\n        (click)=\"toggleOption(option)\"\n      >\n        <!-- Checkbox only in multiple mode -->\n        @if (multiple) {\n        <i-checkbox\n          [checked]=\"isOptionSelected(option)\"\n          [readonly]=\"true\"\n          size=\"small\"\n          class=\"i-listbox-checkbox\"\n        ></i-checkbox>\n        }\n\n        <!-- Left icon -->\n        @if (getOptionIcon(option) && !displayAsMenu) {\n        <i\n          [class]=\"getOptionIcon(option)\"\n          class=\"i-listbox-option-icon i-listbox-option-icon--left\"\n        ></i>\n        }\n\n        <span class=\"i-listbox-option-label\">\n          {{ getOptionLabel(option) }}\n        </span>\n\n        <!-- Right chevron for menu mode -->\n        @if (displayAsMenu) {\n        <i\n          class=\"pi pi-chevron-right i-listbox-option-icon i-listbox-option-icon--chevron\"\n        ></i>\n        }\n      </div>\n      } @if (filteredOptions().length === 0) {\n      <div class=\"i-listbox-no-options\">No options found</div>\n      }\n    </div>\n  </div>\n\n  <!-- Error message -->\n  @if (showErrors) {\n  <div class=\"i-listbox-error\">\n    {{ getErrorMessage() }}\n  </div>\n  }\n</div>\n", styles: [".i-listbox-wrapper{background:var(--color-component-background);border-color:var(--surface-border)}.i-listbox-wrapper.i-listbox--invalid .i-listbox-header{border-bottom-color:var(--color-danger)}.i-listbox-wrapper .i-listbox-header{background:var(--surface-card);border-bottom-color:var(--surface-border)}.i-listbox-wrapper .i-listbox-header .i-listbox-title{color:var(--color-text-primary)}.i-listbox-wrapper .i-listbox-header .i-listbox-action-btn{background:var(--color-primary);color:#fff}.i-listbox-wrapper .i-listbox-header .i-listbox-action-btn:hover:not(:disabled){background:var(--color-primary)}.i-listbox-wrapper .i-listbox-header .i-listbox-summary{color:var(--color-text-secondary)}.i-listbox-wrapper .i-listbox-dropdown{background:var(--color-component-background)}.i-listbox-wrapper .i-listbox-dropdown .i-listbox-filter{border-bottom-color:var(--surface-border)}.i-listbox-wrapper .i-listbox-dropdown .i-listbox-options{background:transparent}.i-listbox-wrapper .i-listbox-dropdown .i-listbox-options .i-listbox-option{color:var(--color-text-primary)}.i-listbox-wrapper .i-listbox-dropdown .i-listbox-options .i-listbox-option:hover,.i-listbox-wrapper .i-listbox-dropdown .i-listbox-options .i-listbox-option.selected{background-color:var(--surface-hover)}.i-listbox-wrapper .i-listbox-dropdown .i-listbox-options .i-listbox-option .i-listbox-checkbox{accent-color:var(--color-primary)}.i-listbox-wrapper .i-listbox-dropdown .i-listbox-options .i-listbox-option .i-listbox-option-icon--right{color:var(--color-text-tertiary)}.i-listbox-wrapper .i-listbox-dropdown .i-listbox-options .i-listbox-no-options{color:var(--color-text-secondary)}.i-listbox-wrapper .i-listbox-error{color:var(--color-danger);background:#ef44440d;border-top-color:var(--color-danger)}.i-listbox-wrapper{position:relative;display:flex;flex-direction:column;width:100%;height:100%;border-radius:4px;border:1px solid var(--surface-border);background:var(--color-component-background);overflow:hidden}.i-listbox-wrapper.i-listbox--fluid{width:100%}.i-listbox-wrapper.i-listbox--disabled{opacity:.6;pointer-events:none}.i-listbox-wrapper.i-listbox--invalid{border-color:var(--color-danger)}.i-listbox-wrapper .i-listbox-header{position:relative;display:flex;flex-direction:column;flex-shrink:0;gap:8px;padding:20px 14px;border-bottom:1px solid var(--surface-border);background:var(--surface-card)}.i-listbox-wrapper .i-listbox-header .i-listbox-header-content{display:flex;align-items:center;justify-content:space-between;min-height:24px}.i-listbox-wrapper .i-listbox-header .i-listbox-header-content .i-listbox-title{font-weight:600;font-size:1.15em;color:var(--color-text-primary)}.i-listbox-wrapper .i-listbox-header .i-listbox-header-content .i-listbox-action-btn{display:flex;align-items:center;justify-content:center;width:28px;height:28px;padding:0;border:none;border-radius:4px;background:var(--color-primary);color:#fff;cursor:pointer;transition:all .15s ease}.i-listbox-wrapper .i-listbox-header .i-listbox-header-content .i-listbox-action-btn:hover:not(:disabled){opacity:.85;transform:scale(1.05)}.i-listbox-wrapper .i-listbox-header .i-listbox-header-content .i-listbox-action-btn:active:not(:disabled){transform:scale(.95)}.i-listbox-wrapper .i-listbox-header .i-listbox-header-content .i-listbox-action-btn:disabled{opacity:.5;cursor:not-allowed}.i-listbox-wrapper .i-listbox-header .i-listbox-header-content .i-listbox-action-btn i{font-size:1em}.i-listbox-wrapper .i-listbox-header .i-listbox-chips-wrapper{height:32px}.i-listbox-wrapper .i-listbox-dropdown{display:flex;flex-direction:column;flex:1;min-height:0;overflow:hidden}.i-listbox-wrapper .i-listbox-dropdown .i-listbox-filter{flex-shrink:0;padding:8px;border-bottom:1px solid var(--surface-border)}.i-listbox-wrapper .i-listbox-dropdown .i-listbox-options{flex:1;min-height:0;overflow-x:hidden;overflow-y:auto}.i-listbox-wrapper .i-listbox-dropdown .i-listbox-options::-webkit-scrollbar-track{background:var(--scrollbar-track, transparent);border-radius:var(--scrollbar-radius, 3px)}.i-listbox-wrapper .i-listbox-dropdown .i-listbox-options::-webkit-scrollbar-thumb{background:#0003;border-radius:var(--scrollbar-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(--scrollbar-thumb, var(--color-text-secondary))}.i-listbox-wrapper .i-listbox-dropdown .i-listbox-options{scrollbar-color:var(--scrollbar-thumb, var(--color-text-secondary)) var(--scrollbar-track, transparent)}.i-listbox-wrapper .i-listbox-dropdown .i-listbox-options::-webkit-scrollbar{width:var(--scrollbar-size, 6px);height:var(--scrollbar-size, 6px)}.i-listbox-wrapper .i-listbox-dropdown .i-listbox-options::-webkit-scrollbar-track{background:var(--scrollbar-track-dropdown, rgba(0, 0, 0, .05));border-radius:var(--scrollbar-radius, 3px);margin:2px 0}.i-listbox-wrapper .i-listbox-dropdown .i-listbox-options::-webkit-scrollbar-thumb{border-radius:var(--scrollbar-radius, 3px);min-height:20px;background:var(--scrollbar-thumb, var(--color-text-secondary))}.i-listbox-wrapper .i-listbox-dropdown .i-listbox-options::-webkit-scrollbar-thumb:hover{background:var(--scrollbar-thumb-hover, var(--color-text-primary))}.i-listbox-wrapper .i-listbox-dropdown .i-listbox-options::-webkit-scrollbar-thumb:active{background:var(--scrollbar-thumb-active, var(--color-primary))}.i-listbox-wrapper .i-listbox-dropdown .i-listbox-options{scrollbar-width:thin;scrollbar-color:var(--scrollbar-thumb, var(--color-text-secondary)) var(--scrollbar-track-dropdown, rgba(0, 0, 0, .05))}.i-listbox-wrapper .i-listbox-dropdown .i-listbox-options .i-listbox-option{display:flex;align-items:center;gap:8px;padding:10px 12px;font-size:1em;cursor:pointer;transition:background-color .15s ease}.i-listbox-wrapper .i-listbox-dropdown .i-listbox-options .i-listbox-option.has-icon{padding:16px 12px}.i-listbox-wrapper .i-listbox-dropdown .i-listbox-options .i-listbox-option:hover{background-color:var(--surface-hover)}.i-listbox-wrapper .i-listbox-dropdown .i-listbox-options .i-listbox-option.selected{background-color:var(--surface-hover);font-weight:500}.i-listbox-wrapper .i-listbox-dropdown .i-listbox-options .i-listbox-option .i-listbox-checkbox{pointer-events:none;flex-shrink:0}.i-listbox-wrapper .i-listbox-dropdown .i-listbox-options .i-listbox-option .i-listbox-option-icon{font-size:16px;flex-shrink:0}.i-listbox-wrapper .i-listbox-dropdown .i-listbox-options .i-listbox-option .i-listbox-option-icon--left{color:var(--color-text-secondary)}.i-listbox-wrapper .i-listbox-dropdown .i-listbox-options .i-listbox-option .i-listbox-option-icon--chevron{color:var(--color-text-tertiary);margin-left:auto;font-size:12px;opacity:.6}.i-listbox-wrapper .i-listbox-dropdown .i-listbox-options .i-listbox-option .i-listbox-option-label{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.i-listbox-wrapper .i-listbox-dropdown .i-listbox-options .i-listbox-no-options{padding:16px;font-style:italic;text-align:center;color:var(--color-text-secondary)}.i-listbox-wrapper .i-listbox-error{flex-shrink:0;padding:8px 12px;font-size:.9em;color:var(--color-danger);background:#ef44440d;border-top:1px solid var(--color-danger)}.i-listbox-wrapper.i-listbox--menu .i-listbox-options .i-listbox-option{padding:14px 16px;font-size:1.05em}.i-listbox-wrapper.i-listbox--menu .i-listbox-options .i-listbox-option.has-icon{padding:18px 16px}.i-listbox-wrapper.i-listbox--menu .i-listbox-options .i-listbox-option.selected{background-color:var(--surface-hover);border-left:3px solid var(--color-primary);font-weight:600}.i-listbox-wrapper.i-listbox--menu .i-listbox-options .i-listbox-option .i-listbox-option-icon--chevron{opacity:.8}@media(max-width:991px){.i-listbox-wrapper .i-listbox-options{max-height:120px}}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: IChipsComponent, selector: "i-chips", inputs: ["chips", "removable", "disabled", "collapseOnOverflow", "overflowLabel", "boxed", "allowCloseAll", "label", "useFloatLabel", "showError"], outputs: ["closedAll", "removeChip"] }, { kind: "component", type: ICheckbox, selector: "i-checkbox", inputs: ["label", "id", "disabled", "readonly", "size", "indeterminate", "checked"], outputs: ["onChange"] }, { kind: "component", type: IInputText, selector: "i-input-text", inputs: ["label", "type", "id", "fluid", "forceFloated", "hideText", "useFloatLabel", "placeholder", "externalInvalid", "externalErrorMessage", "backgroundStyle", "icon", "readonly", "disabled", "errorMessages"] }, { kind: "component", type: IButton, selector: "i-button", inputs: ["severity", "size", "type", "disabled", "outlined", "raised", "text", "icon", "fluid", "loading"], outputs: ["clicked"] }] });
+        ], 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      }\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:var(--scrollbar-track, transparent);border-radius:var(--scrollbar-radius, 3px)}.i-listbox-wrapper .i-listbox-dropdown .i-listbox-options::-webkit-scrollbar-thumb{background:#0003;border-radius:var(--scrollbar-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(--scrollbar-thumb, var(--color-text-secondary))}.i-listbox-wrapper .i-listbox-dropdown .i-listbox-options{scrollbar-color:var(--scrollbar-thumb, var(--color-text-secondary)) var(--scrollbar-track, transparent)}.i-listbox-wrapper .i-listbox-dropdown .i-listbox-options::-webkit-scrollbar{width:var(--scrollbar-size, 6px);height:var(--scrollbar-size, 6px)}.i-listbox-wrapper .i-listbox-dropdown .i-listbox-options::-webkit-scrollbar-track{background:var(--scrollbar-track-dropdown, rgba(0, 0, 0, .05));border-radius:var(--scrollbar-radius, 3px);margin:2px 0}.i-listbox-wrapper .i-listbox-dropdown .i-listbox-options::-webkit-scrollbar-thumb{border-radius:var(--scrollbar-radius, 3px);min-height:20px;background:var(--scrollbar-thumb, var(--color-text-secondary))}.i-listbox-wrapper .i-listbox-dropdown .i-listbox-options::-webkit-scrollbar-thumb:hover{background:var(--scrollbar-thumb-hover, var(--color-text-primary))}.i-listbox-wrapper .i-listbox-dropdown .i-listbox-options::-webkit-scrollbar-thumb:active{background:var(--scrollbar-thumb-active, var(--color-primary))}.i-listbox-wrapper .i-listbox-dropdown .i-listbox-options{scrollbar-width:thin;scrollbar-color:var(--scrollbar-thumb, var(--color-text-secondary)) var(--scrollbar-track-dropdown, rgba(0, 0, 0, .05))}.i-listbox-wrapper .i-listbox-dropdown .i-listbox-options .i-listbox-option{display:flex;align-items:center;gap:8px;padding:10px 12px;font-size:1em;cursor:pointer;transition:background-color .15s ease}.i-listbox-wrapper .i-listbox-dropdown .i-listbox-options .i-listbox-option.has-icon{padding:16px 12px}.i-listbox-wrapper .i-listbox-dropdown .i-listbox-options .i-listbox-option:hover{background-color:var(--surface-hover)}.i-listbox-wrapper .i-listbox-dropdown .i-listbox-options .i-listbox-option.selected{background-color:var(--surface-hover);font-weight:500}.i-listbox-wrapper .i-listbox-dropdown .i-listbox-options .i-listbox-option .i-listbox-checkbox{pointer-events:none;flex-shrink:0}.i-listbox-wrapper .i-listbox-dropdown .i-listbox-options .i-listbox-option .i-listbox-option-icon{font-size:16px;flex-shrink:0}.i-listbox-wrapper .i-listbox-dropdown .i-listbox-options .i-listbox-option .i-listbox-option-icon--left{color:var(--color-text-secondary)}.i-listbox-wrapper .i-listbox-dropdown .i-listbox-options .i-listbox-option .i-listbox-option-icon--chevron{color:var(--color-text-tertiary);margin-left:auto;font-size:12px;opacity:.6}.i-listbox-wrapper .i-listbox-dropdown .i-listbox-options .i-listbox-option .i-listbox-option-label{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.i-listbox-wrapper .i-listbox-dropdown .i-listbox-options .i-listbox-no-options{padding:16px;font-style:italic;text-align:center;color:var(--color-text-secondary)}.i-listbox-wrapper .i-listbox-error{flex-shrink:0;padding:8px 12px;font-size:.9em;color:var(--color-danger);background:#ef44440d;border-top:1px solid var(--color-danger)}.i-listbox-wrapper.i-listbox--menu .i-listbox-options .i-listbox-option{padding:14px 16px;font-size:1.05em}.i-listbox-wrapper.i-listbox--menu .i-listbox-options .i-listbox-option.has-icon{padding:18px 16px}.i-listbox-wrapper.i-listbox--menu .i-listbox-options .i-listbox-option.selected{background-color:var(--surface-hover);border-left:3px solid var(--color-primary);font-weight:600}.i-listbox-wrapper.i-listbox--menu .i-listbox-options .i-listbox-option .i-listbox-option-icon--chevron{opacity:.8}@media(max-width:991px){.i-listbox-wrapper .i-listbox-options{max-height:120px}}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: IChipsComponent, selector: "i-chips", inputs: ["chips", "removable", "disabled", "collapseOnOverflow", "overflowLabel", "boxed", "allowCloseAll", "label", "useFloatLabel", "showError"], outputs: ["closedAll", "removeChip"] }, { kind: "component", type: ICheckbox, selector: "i-checkbox", inputs: ["label", "id", "disabled", "readonly", "size", "indeterminate", "checked"], outputs: ["onChange"] }, { kind: "component", type: IInputText, selector: "i-input-text", inputs: ["label", "type", "id", "fluid", "forceFloated", "hideText", "useFloatLabel", "placeholder", "externalInvalid", "externalErrorMessage", "backgroundStyle", "icon", "readonly", "disabled", "errorMessages"] }, { kind: "component", type: IButton, selector: "i-button", inputs: ["severity", "size", "type", "disabled", "outlined", "raised", "text", "icon", "fluid", "loading"], outputs: ["clicked"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: IListbox, decorators: [{
             type: Component,
@@ -4454,7 +4457,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.12", ngImpo
                             useExisting: forwardRef(() => IListbox),
                             multi: true,
                         },
-                    ], template: "<div\n  class=\"i-listbox-wrapper\"\n  [class.i-listbox--fluid]=\"fluid\"\n  [class.i-listbox--disabled]=\"disabled\"\n  [class.i-listbox--invalid]=\"showErrors\"\n  [class.i-listbox--menu]=\"displayAsMenu\"\n  #dropdown\n>\n  <!-- Header -->\n  <div class=\"i-listbox-header\">\n    <div class=\"i-listbox-header-content\">\n      <span class=\"i-listbox-title\">{{ effectiveTitle }}</span>\n      @if (actionIcon) {\n      <i-button\n        [text]=\"true\"\n        [size]=\"'small'\"\n        [severity]=\"'contrast'\"\n        [icon]=\"actionIcon\"\n        [disabled]=\"disabled\"\n        (clicked)=\"onActionClick($event)\"\n        [attr.title]=\"actionTooltip\"\n      ></i-button>\n      }\n    </div>\n\n    <!-- Chips area for multiselect mode -->\n    @if (multiple && showChips) {\n    <div class=\"i-listbox-chips-wrapper\">\n      <i-chips\n        class=\"i-listbox-chips\"\n        [chips]=\"getSelectedChipItems()\"\n        [removable]=\"!disabled\"\n        [disabled]=\"disabled\"\n        [collapseOnOverflow]=\"true\"\n        [overflowLabel]=\"getDisplayLabel()\"\n        (removeChip)=\"onChipRemove($event)\"\n      ></i-chips>\n    </div>\n    }\n  </div>\n\n  <!-- Dropdown content -->\n  <div class=\"i-listbox-dropdown\">\n    @if (filter) {\n    <div class=\"i-listbox-filter\">\n      <i-input-text\n        #searchInput\n        [useFloatLabel]=\"false\"\n        placeholder=\"Search...\"\n        [ngModel]=\"filterValue()\"\n        (ngModelChange)=\"filterValue.set($event)\"\n        [fluid]=\"true\"\n        [icon]=\"'pi pi-search'\"\n      >\n      </i-input-text>\n    </div>\n    }\n\n    <div class=\"i-listbox-options\">\n      @for (option of filteredOptions(); track getOptionValue(option)) {\n      <div\n        class=\"i-listbox-option\"\n        [class.selected]=\"isOptionSelected(option)\"\n        [class.has-icon]=\"!multiple && getOptionIcon(option)\"\n        (click)=\"toggleOption(option)\"\n      >\n        <!-- Checkbox only in multiple mode -->\n        @if (multiple) {\n        <i-checkbox\n          [checked]=\"isOptionSelected(option)\"\n          [readonly]=\"true\"\n          size=\"small\"\n          class=\"i-listbox-checkbox\"\n        ></i-checkbox>\n        }\n\n        <!-- Left icon -->\n        @if (getOptionIcon(option) && !displayAsMenu) {\n        <i\n          [class]=\"getOptionIcon(option)\"\n          class=\"i-listbox-option-icon i-listbox-option-icon--left\"\n        ></i>\n        }\n\n        <span class=\"i-listbox-option-label\">\n          {{ getOptionLabel(option) }}\n        </span>\n\n        <!-- Right chevron for menu mode -->\n        @if (displayAsMenu) {\n        <i\n          class=\"pi pi-chevron-right i-listbox-option-icon i-listbox-option-icon--chevron\"\n        ></i>\n        }\n      </div>\n      } @if (filteredOptions().length === 0) {\n      <div class=\"i-listbox-no-options\">No options found</div>\n      }\n    </div>\n  </div>\n\n  <!-- Error message -->\n  @if (showErrors) {\n  <div class=\"i-listbox-error\">\n    {{ getErrorMessage() }}\n  </div>\n  }\n</div>\n", styles: [".i-listbox-wrapper{background:var(--color-component-background);border-color:var(--surface-border)}.i-listbox-wrapper.i-listbox--invalid .i-listbox-header{border-bottom-color:var(--color-danger)}.i-listbox-wrapper .i-listbox-header{background:var(--surface-card);border-bottom-color:var(--surface-border)}.i-listbox-wrapper .i-listbox-header .i-listbox-title{color:var(--color-text-primary)}.i-listbox-wrapper .i-listbox-header .i-listbox-action-btn{background:var(--color-primary);color:#fff}.i-listbox-wrapper .i-listbox-header .i-listbox-action-btn:hover:not(:disabled){background:var(--color-primary)}.i-listbox-wrapper .i-listbox-header .i-listbox-summary{color:var(--color-text-secondary)}.i-listbox-wrapper .i-listbox-dropdown{background:var(--color-component-background)}.i-listbox-wrapper .i-listbox-dropdown .i-listbox-filter{border-bottom-color:var(--surface-border)}.i-listbox-wrapper .i-listbox-dropdown .i-listbox-options{background:transparent}.i-listbox-wrapper .i-listbox-dropdown .i-listbox-options .i-listbox-option{color:var(--color-text-primary)}.i-listbox-wrapper .i-listbox-dropdown .i-listbox-options .i-listbox-option:hover,.i-listbox-wrapper .i-listbox-dropdown .i-listbox-options .i-listbox-option.selected{background-color:var(--surface-hover)}.i-listbox-wrapper .i-listbox-dropdown .i-listbox-options .i-listbox-option .i-listbox-checkbox{accent-color:var(--color-primary)}.i-listbox-wrapper .i-listbox-dropdown .i-listbox-options .i-listbox-option .i-listbox-option-icon--right{color:var(--color-text-tertiary)}.i-listbox-wrapper .i-listbox-dropdown .i-listbox-options .i-listbox-no-options{color:var(--color-text-secondary)}.i-listbox-wrapper .i-listbox-error{color:var(--color-danger);background:#ef44440d;border-top-color:var(--color-danger)}.i-listbox-wrapper{position:relative;display:flex;flex-direction:column;width:100%;height:100%;border-radius:4px;border:1px solid var(--surface-border);background:var(--color-component-background);overflow:hidden}.i-listbox-wrapper.i-listbox--fluid{width:100%}.i-listbox-wrapper.i-listbox--disabled{opacity:.6;pointer-events:none}.i-listbox-wrapper.i-listbox--invalid{border-color:var(--color-danger)}.i-listbox-wrapper .i-listbox-header{position:relative;display:flex;flex-direction:column;flex-shrink:0;gap:8px;padding:20px 14px;border-bottom:1px solid var(--surface-border);background:var(--surface-card)}.i-listbox-wrapper .i-listbox-header .i-listbox-header-content{display:flex;align-items:center;justify-content:space-between;min-height:24px}.i-listbox-wrapper .i-listbox-header .i-listbox-header-content .i-listbox-title{font-weight:600;font-size:1.15em;color:var(--color-text-primary)}.i-listbox-wrapper .i-listbox-header .i-listbox-header-content .i-listbox-action-btn{display:flex;align-items:center;justify-content:center;width:28px;height:28px;padding:0;border:none;border-radius:4px;background:var(--color-primary);color:#fff;cursor:pointer;transition:all .15s ease}.i-listbox-wrapper .i-listbox-header .i-listbox-header-content .i-listbox-action-btn:hover:not(:disabled){opacity:.85;transform:scale(1.05)}.i-listbox-wrapper .i-listbox-header .i-listbox-header-content .i-listbox-action-btn:active:not(:disabled){transform:scale(.95)}.i-listbox-wrapper .i-listbox-header .i-listbox-header-content .i-listbox-action-btn:disabled{opacity:.5;cursor:not-allowed}.i-listbox-wrapper .i-listbox-header .i-listbox-header-content .i-listbox-action-btn i{font-size:1em}.i-listbox-wrapper .i-listbox-header .i-listbox-chips-wrapper{height:32px}.i-listbox-wrapper .i-listbox-dropdown{display:flex;flex-direction:column;flex:1;min-height:0;overflow:hidden}.i-listbox-wrapper .i-listbox-dropdown .i-listbox-filter{flex-shrink:0;padding:8px;border-bottom:1px solid var(--surface-border)}.i-listbox-wrapper .i-listbox-dropdown .i-listbox-options{flex:1;min-height:0;overflow-x:hidden;overflow-y:auto}.i-listbox-wrapper .i-listbox-dropdown .i-listbox-options::-webkit-scrollbar-track{background:var(--scrollbar-track, transparent);border-radius:var(--scrollbar-radius, 3px)}.i-listbox-wrapper .i-listbox-dropdown .i-listbox-options::-webkit-scrollbar-thumb{background:#0003;border-radius:var(--scrollbar-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(--scrollbar-thumb, var(--color-text-secondary))}.i-listbox-wrapper .i-listbox-dropdown .i-listbox-options{scrollbar-color:var(--scrollbar-thumb, var(--color-text-secondary)) var(--scrollbar-track, transparent)}.i-listbox-wrapper .i-listbox-dropdown .i-listbox-options::-webkit-scrollbar{width:var(--scrollbar-size, 6px);height:var(--scrollbar-size, 6px)}.i-listbox-wrapper .i-listbox-dropdown .i-listbox-options::-webkit-scrollbar-track{background:var(--scrollbar-track-dropdown, rgba(0, 0, 0, .05));border-radius:var(--scrollbar-radius, 3px);margin:2px 0}.i-listbox-wrapper .i-listbox-dropdown .i-listbox-options::-webkit-scrollbar-thumb{border-radius:var(--scrollbar-radius, 3px);min-height:20px;background:var(--scrollbar-thumb, var(--color-text-secondary))}.i-listbox-wrapper .i-listbox-dropdown .i-listbox-options::-webkit-scrollbar-thumb:hover{background:var(--scrollbar-thumb-hover, var(--color-text-primary))}.i-listbox-wrapper .i-listbox-dropdown .i-listbox-options::-webkit-scrollbar-thumb:active{background:var(--scrollbar-thumb-active, var(--color-primary))}.i-listbox-wrapper .i-listbox-dropdown .i-listbox-options{scrollbar-width:thin;scrollbar-color:var(--scrollbar-thumb, var(--color-text-secondary)) var(--scrollbar-track-dropdown, rgba(0, 0, 0, .05))}.i-listbox-wrapper .i-listbox-dropdown .i-listbox-options .i-listbox-option{display:flex;align-items:center;gap:8px;padding:10px 12px;font-size:1em;cursor:pointer;transition:background-color .15s ease}.i-listbox-wrapper .i-listbox-dropdown .i-listbox-options .i-listbox-option.has-icon{padding:16px 12px}.i-listbox-wrapper .i-listbox-dropdown .i-listbox-options .i-listbox-option:hover{background-color:var(--surface-hover)}.i-listbox-wrapper .i-listbox-dropdown .i-listbox-options .i-listbox-option.selected{background-color:var(--surface-hover);font-weight:500}.i-listbox-wrapper .i-listbox-dropdown .i-listbox-options .i-listbox-option .i-listbox-checkbox{pointer-events:none;flex-shrink:0}.i-listbox-wrapper .i-listbox-dropdown .i-listbox-options .i-listbox-option .i-listbox-option-icon{font-size:16px;flex-shrink:0}.i-listbox-wrapper .i-listbox-dropdown .i-listbox-options .i-listbox-option .i-listbox-option-icon--left{color:var(--color-text-secondary)}.i-listbox-wrapper .i-listbox-dropdown .i-listbox-options .i-listbox-option .i-listbox-option-icon--chevron{color:var(--color-text-tertiary);margin-left:auto;font-size:12px;opacity:.6}.i-listbox-wrapper .i-listbox-dropdown .i-listbox-options .i-listbox-option .i-listbox-option-label{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.i-listbox-wrapper .i-listbox-dropdown .i-listbox-options .i-listbox-no-options{padding:16px;font-style:italic;text-align:center;color:var(--color-text-secondary)}.i-listbox-wrapper .i-listbox-error{flex-shrink:0;padding:8px 12px;font-size:.9em;color:var(--color-danger);background:#ef44440d;border-top:1px solid var(--color-danger)}.i-listbox-wrapper.i-listbox--menu .i-listbox-options .i-listbox-option{padding:14px 16px;font-size:1.05em}.i-listbox-wrapper.i-listbox--menu .i-listbox-options .i-listbox-option.has-icon{padding:18px 16px}.i-listbox-wrapper.i-listbox--menu .i-listbox-options .i-listbox-option.selected{background-color:var(--surface-hover);border-left:3px solid var(--color-primary);font-weight:600}.i-listbox-wrapper.i-listbox--menu .i-listbox-options .i-listbox-option .i-listbox-option-icon--chevron{opacity:.8}@media(max-width:991px){.i-listbox-wrapper .i-listbox-options{max-height:120px}}\n"] }]
+                    ], 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      }\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:var(--scrollbar-track, transparent);border-radius:var(--scrollbar-radius, 3px)}.i-listbox-wrapper .i-listbox-dropdown .i-listbox-options::-webkit-scrollbar-thumb{background:#0003;border-radius:var(--scrollbar-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(--scrollbar-thumb, var(--color-text-secondary))}.i-listbox-wrapper .i-listbox-dropdown .i-listbox-options{scrollbar-color:var(--scrollbar-thumb, var(--color-text-secondary)) var(--scrollbar-track, transparent)}.i-listbox-wrapper .i-listbox-dropdown .i-listbox-options::-webkit-scrollbar{width:var(--scrollbar-size, 6px);height:var(--scrollbar-size, 6px)}.i-listbox-wrapper .i-listbox-dropdown .i-listbox-options::-webkit-scrollbar-track{background:var(--scrollbar-track-dropdown, rgba(0, 0, 0, .05));border-radius:var(--scrollbar-radius, 3px);margin:2px 0}.i-listbox-wrapper .i-listbox-dropdown .i-listbox-options::-webkit-scrollbar-thumb{border-radius:var(--scrollbar-radius, 3px);min-height:20px;background:var(--scrollbar-thumb, var(--color-text-secondary))}.i-listbox-wrapper .i-listbox-dropdown .i-listbox-options::-webkit-scrollbar-thumb:hover{background:var(--scrollbar-thumb-hover, var(--color-text-primary))}.i-listbox-wrapper .i-listbox-dropdown .i-listbox-options::-webkit-scrollbar-thumb:active{background:var(--scrollbar-thumb-active, var(--color-primary))}.i-listbox-wrapper .i-listbox-dropdown .i-listbox-options{scrollbar-width:thin;scrollbar-color:var(--scrollbar-thumb, var(--color-text-secondary)) var(--scrollbar-track-dropdown, rgba(0, 0, 0, .05))}.i-listbox-wrapper .i-listbox-dropdown .i-listbox-options .i-listbox-option{display:flex;align-items:center;gap:8px;padding:10px 12px;font-size:1em;cursor:pointer;transition:background-color .15s ease}.i-listbox-wrapper .i-listbox-dropdown .i-listbox-options .i-listbox-option.has-icon{padding:16px 12px}.i-listbox-wrapper .i-listbox-dropdown .i-listbox-options .i-listbox-option:hover{background-color:var(--surface-hover)}.i-listbox-wrapper .i-listbox-dropdown .i-listbox-options .i-listbox-option.selected{background-color:var(--surface-hover);font-weight:500}.i-listbox-wrapper .i-listbox-dropdown .i-listbox-options .i-listbox-option .i-listbox-checkbox{pointer-events:none;flex-shrink:0}.i-listbox-wrapper .i-listbox-dropdown .i-listbox-options .i-listbox-option .i-listbox-option-icon{font-size:16px;flex-shrink:0}.i-listbox-wrapper .i-listbox-dropdown .i-listbox-options .i-listbox-option .i-listbox-option-icon--left{color:var(--color-text-secondary)}.i-listbox-wrapper .i-listbox-dropdown .i-listbox-options .i-listbox-option .i-listbox-option-icon--chevron{color:var(--color-text-tertiary);margin-left:auto;font-size:12px;opacity:.6}.i-listbox-wrapper .i-listbox-dropdown .i-listbox-options .i-listbox-option .i-listbox-option-label{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.i-listbox-wrapper .i-listbox-dropdown .i-listbox-options .i-listbox-no-options{padding:16px;font-style:italic;text-align:center;color:var(--color-text-secondary)}.i-listbox-wrapper .i-listbox-error{flex-shrink:0;padding:8px 12px;font-size:.9em;color:var(--color-danger);background:#ef44440d;border-top:1px solid var(--color-danger)}.i-listbox-wrapper.i-listbox--menu .i-listbox-options .i-listbox-option{padding:14px 16px;font-size:1.05em}.i-listbox-wrapper.i-listbox--menu .i-listbox-options .i-listbox-option.has-icon{padding:18px 16px}.i-listbox-wrapper.i-listbox--menu .i-listbox-options .i-listbox-option.selected{background-color:var(--surface-hover);border-left:3px solid var(--color-primary);font-weight:600}.i-listbox-wrapper.i-listbox--menu .i-listbox-options .i-listbox-option .i-listbox-option-icon--chevron{opacity:.8}@media(max-width:991px){.i-listbox-wrapper .i-listbox-options{max-height:120px}}\n"] }]
         }], ctorParameters: () => [{ type: i0.Injector }], propDecorators: { title: [{
                 type: Input
             }], label: [{
@@ -4766,7 +4769,7 @@ class IRadioButton {
                 useExisting: forwardRef(() => IRadioButton),
                 multi: true,
             },
-        ], ngImport: i0, template: "<div\n  class=\"i-radio-button-wrapper\"\n  [class.i-radio-button--disabled]=\"disabled\"\n  [class.i-radio-button--fluid]=\"fluid\"\n>\n  <div\n    class=\"i-radio-button\"\n    [class.i-radio-button--checked]=\"checked\"\n    (click)=\"select()\"\n    [attr.id]=\"effectiveInputId\"\n    role=\"radio\"\n    [attr.aria-checked]=\"checked\"\n    [attr.aria-disabled]=\"disabled\"\n    [attr.aria-labelledby]=\"label ? effectiveInputId + '-label' : null\"\n    tabindex=\"0\"\n    (keydown.space)=\"$event.preventDefault(); select()\"\n  >\n    <span class=\"i-radio-button-icon\"></span>\n  </div>\n  @if (label) {\n  <label\n    [id]=\"effectiveInputId + '-label'\"\n    class=\"i-radio-button-label\"\n    (click)=\"select()\"\n  >\n    {{ label }}\n  </label>\n  }\n</div>\n", styles: [".i-radio-button-wrapper .i-radio-button{border:1px solid var(--surface-border);background-color:var(--surface-ground)}.i-radio-button-wrapper .i-radio-button:hover:not(.i-radio-button--disabled){border-color:var(--color-primary)}.i-radio-button-wrapper .i-radio-button:focus{box-shadow:0 2px 10px #0003}.i-radio-button-wrapper .i-radio-button.i-radio-button--checked{border-color:var(--color-primary)}.i-radio-button-wrapper .i-radio-button.i-radio-button--checked .i-radio-button-icon{background-color:var(--color-primary)}.i-radio-button-wrapper .i-radio-button.i-radio-button--checked:hover{border-color:color-mix(in srgb,var(--color-primary) 80%,transparent)}.i-radio-button-wrapper .i-radio-button-label{color:var(--color-text-primary)}.i-radio-button-wrapper.i-radio-button--disabled .i-radio-button{border-color:var(--color-disabled-border);background-color:var(--color-disabled-background)}.i-radio-button-wrapper.i-radio-button--disabled .i-radio-button.i-radio-button--checked{border-color:var(--color-disabled-border)}.i-radio-button-wrapper.i-radio-button--disabled .i-radio-button.i-radio-button--checked .i-radio-button-icon{background-color:var(--color-text-disabled)}.i-radio-button-wrapper.i-radio-button--disabled .i-radio-button-label{color:var(--color-text-disabled)}.i-radio-button-wrapper{display:inline-flex;align-items:center;gap:8px;font-size:1em}.i-radio-button-wrapper.i-radio-button--fluid{display:flex;width:100%}.i-radio-button-wrapper.i-radio-button--disabled{opacity:.6;cursor:not-allowed}.i-radio-button-wrapper.i-radio-button--disabled .i-radio-button,.i-radio-button-wrapper.i-radio-button--disabled .i-radio-button-label{cursor:not-allowed;pointer-events:none}.i-radio-button-wrapper .i-radio-button{position:relative;display:inline-flex;align-items:center;justify-content:center;width:18px;height:18px;border-radius:50%;transition:all .15s ease;cursor:pointer;box-sizing:border-box}.i-radio-button-wrapper .i-radio-button:focus{outline:none;box-shadow:0 0 0 2px #3b82f64d}.i-radio-button-wrapper .i-radio-button .i-radio-button-icon{width:10px;height:10px;border-radius:50%;transition:all .15s ease;transform:scale(0)}.i-radio-button-wrapper .i-radio-button.i-radio-button--checked .i-radio-button-icon{transform:scale(1)}.i-radio-button-wrapper .i-radio-button-label{cursor:pointer;-webkit-user-select:none;user-select:none;line-height:1.4}\n"] });
+        ], ngImport: i0, template: "<div\n  class=\"i-radio-button-wrapper\"\n  [class.i-radio-button--disabled]=\"disabled\"\n  [class.i-radio-button--fluid]=\"fluid\"\n>\n  <div\n    class=\"i-radio-button\"\n    [class.i-radio-button--checked]=\"checked\"\n    (click)=\"select()\"\n    [attr.id]=\"effectiveInputId\"\n    role=\"radio\"\n    [attr.aria-checked]=\"checked\"\n    [attr.aria-disabled]=\"disabled\"\n    [attr.aria-labelledby]=\"label ? effectiveInputId + '-label' : null\"\n    tabindex=\"0\"\n    (keydown.space)=\"$event.preventDefault(); select()\"\n  >\n    <span class=\"i-radio-button-icon\"></span>\n  </div>\n  @if (label) {\n    <label\n      [id]=\"effectiveInputId + '-label'\"\n      class=\"i-radio-button-label\"\n      (click)=\"select()\"\n    >\n      {{ label }}\n    </label>\n  }\n</div>\n", styles: [".i-radio-button-wrapper .i-radio-button{border:1px solid var(--surface-border);background-color:var(--surface-ground)}.i-radio-button-wrapper .i-radio-button:hover:not(.i-radio-button--disabled){border-color:var(--color-primary)}.i-radio-button-wrapper .i-radio-button:focus{box-shadow:0 2px 10px #0003}.i-radio-button-wrapper .i-radio-button.i-radio-button--checked{border-color:var(--color-primary)}.i-radio-button-wrapper .i-radio-button.i-radio-button--checked .i-radio-button-icon{background-color:var(--color-primary)}.i-radio-button-wrapper .i-radio-button.i-radio-button--checked:hover{border-color:color-mix(in srgb,var(--color-primary) 80%,transparent)}.i-radio-button-wrapper .i-radio-button-label{color:var(--color-text-primary)}.i-radio-button-wrapper.i-radio-button--disabled .i-radio-button{border-color:var(--color-disabled-border);background-color:var(--color-disabled-background)}.i-radio-button-wrapper.i-radio-button--disabled .i-radio-button.i-radio-button--checked{border-color:var(--color-disabled-border)}.i-radio-button-wrapper.i-radio-button--disabled .i-radio-button.i-radio-button--checked .i-radio-button-icon{background-color:var(--color-text-disabled)}.i-radio-button-wrapper.i-radio-button--disabled .i-radio-button-label{color:var(--color-text-disabled)}.i-radio-button-wrapper{display:inline-flex;align-items:center;gap:8px;font-size:1em}.i-radio-button-wrapper.i-radio-button--fluid{display:flex;width:100%}.i-radio-button-wrapper.i-radio-button--disabled{opacity:.6;cursor:not-allowed}.i-radio-button-wrapper.i-radio-button--disabled .i-radio-button,.i-radio-button-wrapper.i-radio-button--disabled .i-radio-button-label{cursor:not-allowed;pointer-events:none}.i-radio-button-wrapper .i-radio-button{position:relative;display:inline-flex;align-items:center;justify-content:center;width:18px;height:18px;border-radius:50%;transition:all .15s ease;cursor:pointer;box-sizing:border-box}.i-radio-button-wrapper .i-radio-button:focus{outline:none;box-shadow:0 0 0 2px #3b82f64d}.i-radio-button-wrapper .i-radio-button .i-radio-button-icon{width:10px;height:10px;border-radius:50%;transition:all .15s ease;transform:scale(0)}.i-radio-button-wrapper .i-radio-button.i-radio-button--checked .i-radio-button-icon{transform:scale(1)}.i-radio-button-wrapper .i-radio-button-label{cursor:pointer;-webkit-user-select:none;user-select:none;line-height:1.4}\n"] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: IRadioButton, decorators: [{
             type: Component,
@@ -4776,7 +4779,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.12", ngImpo
                             useExisting: forwardRef(() => IRadioButton),
                             multi: true,
                         },
-                    ], template: "<div\n  class=\"i-radio-button-wrapper\"\n  [class.i-radio-button--disabled]=\"disabled\"\n  [class.i-radio-button--fluid]=\"fluid\"\n>\n  <div\n    class=\"i-radio-button\"\n    [class.i-radio-button--checked]=\"checked\"\n    (click)=\"select()\"\n    [attr.id]=\"effectiveInputId\"\n    role=\"radio\"\n    [attr.aria-checked]=\"checked\"\n    [attr.aria-disabled]=\"disabled\"\n    [attr.aria-labelledby]=\"label ? effectiveInputId + '-label' : null\"\n    tabindex=\"0\"\n    (keydown.space)=\"$event.preventDefault(); select()\"\n  >\n    <span class=\"i-radio-button-icon\"></span>\n  </div>\n  @if (label) {\n  <label\n    [id]=\"effectiveInputId + '-label'\"\n    class=\"i-radio-button-label\"\n    (click)=\"select()\"\n  >\n    {{ label }}\n  </label>\n  }\n</div>\n", styles: [".i-radio-button-wrapper .i-radio-button{border:1px solid var(--surface-border);background-color:var(--surface-ground)}.i-radio-button-wrapper .i-radio-button:hover:not(.i-radio-button--disabled){border-color:var(--color-primary)}.i-radio-button-wrapper .i-radio-button:focus{box-shadow:0 2px 10px #0003}.i-radio-button-wrapper .i-radio-button.i-radio-button--checked{border-color:var(--color-primary)}.i-radio-button-wrapper .i-radio-button.i-radio-button--checked .i-radio-button-icon{background-color:var(--color-primary)}.i-radio-button-wrapper .i-radio-button.i-radio-button--checked:hover{border-color:color-mix(in srgb,var(--color-primary) 80%,transparent)}.i-radio-button-wrapper .i-radio-button-label{color:var(--color-text-primary)}.i-radio-button-wrapper.i-radio-button--disabled .i-radio-button{border-color:var(--color-disabled-border);background-color:var(--color-disabled-background)}.i-radio-button-wrapper.i-radio-button--disabled .i-radio-button.i-radio-button--checked{border-color:var(--color-disabled-border)}.i-radio-button-wrapper.i-radio-button--disabled .i-radio-button.i-radio-button--checked .i-radio-button-icon{background-color:var(--color-text-disabled)}.i-radio-button-wrapper.i-radio-button--disabled .i-radio-button-label{color:var(--color-text-disabled)}.i-radio-button-wrapper{display:inline-flex;align-items:center;gap:8px;font-size:1em}.i-radio-button-wrapper.i-radio-button--fluid{display:flex;width:100%}.i-radio-button-wrapper.i-radio-button--disabled{opacity:.6;cursor:not-allowed}.i-radio-button-wrapper.i-radio-button--disabled .i-radio-button,.i-radio-button-wrapper.i-radio-button--disabled .i-radio-button-label{cursor:not-allowed;pointer-events:none}.i-radio-button-wrapper .i-radio-button{position:relative;display:inline-flex;align-items:center;justify-content:center;width:18px;height:18px;border-radius:50%;transition:all .15s ease;cursor:pointer;box-sizing:border-box}.i-radio-button-wrapper .i-radio-button:focus{outline:none;box-shadow:0 0 0 2px #3b82f64d}.i-radio-button-wrapper .i-radio-button .i-radio-button-icon{width:10px;height:10px;border-radius:50%;transition:all .15s ease;transform:scale(0)}.i-radio-button-wrapper .i-radio-button.i-radio-button--checked .i-radio-button-icon{transform:scale(1)}.i-radio-button-wrapper .i-radio-button-label{cursor:pointer;-webkit-user-select:none;user-select:none;line-height:1.4}\n"] }]
+                    ], template: "<div\n  class=\"i-radio-button-wrapper\"\n  [class.i-radio-button--disabled]=\"disabled\"\n  [class.i-radio-button--fluid]=\"fluid\"\n>\n  <div\n    class=\"i-radio-button\"\n    [class.i-radio-button--checked]=\"checked\"\n    (click)=\"select()\"\n    [attr.id]=\"effectiveInputId\"\n    role=\"radio\"\n    [attr.aria-checked]=\"checked\"\n    [attr.aria-disabled]=\"disabled\"\n    [attr.aria-labelledby]=\"label ? effectiveInputId + '-label' : null\"\n    tabindex=\"0\"\n    (keydown.space)=\"$event.preventDefault(); select()\"\n  >\n    <span class=\"i-radio-button-icon\"></span>\n  </div>\n  @if (label) {\n    <label\n      [id]=\"effectiveInputId + '-label'\"\n      class=\"i-radio-button-label\"\n      (click)=\"select()\"\n    >\n      {{ label }}\n    </label>\n  }\n</div>\n", styles: [".i-radio-button-wrapper .i-radio-button{border:1px solid var(--surface-border);background-color:var(--surface-ground)}.i-radio-button-wrapper .i-radio-button:hover:not(.i-radio-button--disabled){border-color:var(--color-primary)}.i-radio-button-wrapper .i-radio-button:focus{box-shadow:0 2px 10px #0003}.i-radio-button-wrapper .i-radio-button.i-radio-button--checked{border-color:var(--color-primary)}.i-radio-button-wrapper .i-radio-button.i-radio-button--checked .i-radio-button-icon{background-color:var(--color-primary)}.i-radio-button-wrapper .i-radio-button.i-radio-button--checked:hover{border-color:color-mix(in srgb,var(--color-primary) 80%,transparent)}.i-radio-button-wrapper .i-radio-button-label{color:var(--color-text-primary)}.i-radio-button-wrapper.i-radio-button--disabled .i-radio-button{border-color:var(--color-disabled-border);background-color:var(--color-disabled-background)}.i-radio-button-wrapper.i-radio-button--disabled .i-radio-button.i-radio-button--checked{border-color:var(--color-disabled-border)}.i-radio-button-wrapper.i-radio-button--disabled .i-radio-button.i-radio-button--checked .i-radio-button-icon{background-color:var(--color-text-disabled)}.i-radio-button-wrapper.i-radio-button--disabled .i-radio-button-label{color:var(--color-text-disabled)}.i-radio-button-wrapper{display:inline-flex;align-items:center;gap:8px;font-size:1em}.i-radio-button-wrapper.i-radio-button--fluid{display:flex;width:100%}.i-radio-button-wrapper.i-radio-button--disabled{opacity:.6;cursor:not-allowed}.i-radio-button-wrapper.i-radio-button--disabled .i-radio-button,.i-radio-button-wrapper.i-radio-button--disabled .i-radio-button-label{cursor:not-allowed;pointer-events:none}.i-radio-button-wrapper .i-radio-button{position:relative;display:inline-flex;align-items:center;justify-content:center;width:18px;height:18px;border-radius:50%;transition:all .15s ease;cursor:pointer;box-sizing:border-box}.i-radio-button-wrapper .i-radio-button:focus{outline:none;box-shadow:0 0 0 2px #3b82f64d}.i-radio-button-wrapper .i-radio-button .i-radio-button-icon{width:10px;height:10px;border-radius:50%;transition:all .15s ease;transform:scale(0)}.i-radio-button-wrapper .i-radio-button.i-radio-button--checked .i-radio-button-icon{transform:scale(1)}.i-radio-button-wrapper .i-radio-button-label{cursor:pointer;-webkit-user-select:none;user-select:none;line-height:1.4}\n"] }]
         }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i0.ChangeDetectorRef }, { type: i0.Injector }], propDecorators: { label: [{
                 type: Input
             }], value: [{
@@ -4849,11 +4852,11 @@ class IMessage {
         this.visibleChange.emit(this.visible);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: IMessage, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.12", type: IMessage, isStandalone: true, selector: "i-message", inputs: { severity: "severity", size: "size", icon: "icon", closable: "closable", visible: "visible" }, outputs: { visibleChange: "visibleChange" }, ngImport: i0, template: "@if (visible) {\n<div\n  class=\"i-message i-message-{{ severity }} i-message--{{ size }}\"\n  role=\"alert\"\n>\n  <div class=\"i-message-content\">\n    <div class=\"i-message-icon\">\n      <i [class]=\"getDefaultIcon()\"></i>\n    </div>\n    <div class=\"i-message-text\">\n      <ng-content></ng-content>\n    </div>\n    @if (closable) {\n    <button\n      class=\"i-message-close\"\n      type=\"button\"\n      (click)=\"close()\"\n      aria-label=\"Close\"\n    >\n      <i class=\"pi pi-times\"></i>\n    </button>\n    }\n  </div>\n</div>\n}\n", styles: [".i-message{background-color:var(--surface-section);border-left:4px solid transparent}.i-message .i-message-text{color:var(--color-text-primary)}.i-message .i-message-close{color:var(--color-text-secondary)}.i-message .i-message-close:hover{color:var(--color-text-primary);background-color:var(--surface-hover)}.i-message.i-message-success{border-left-color:var(--color-success)}.i-message.i-message-success .i-message-icon{color:var(--color-success)}.i-message.i-message-info{border-left-color:var(--color-info)}.i-message.i-message-info .i-message-icon{color:var(--color-info)}.i-message.i-message-warning{border-left-color:var(--color-warning)}.i-message.i-message-warning .i-message-icon{color:var(--color-warning)}.i-message.i-message-danger{border-left-color:var(--color-danger)}.i-message.i-message-danger .i-message-icon{color:var(--color-danger)}.i-message.i-message-primary{border-left-color:var(--color-primary)}.i-message.i-message-primary .i-message-icon{color:var(--color-primary)}.i-message.i-message-secondary{border-left-color:var(--color-secondary)}.i-message.i-message-secondary .i-message-icon{color:var(--color-secondary)}.i-message.i-message-tertiary{border-left-color:var(--color-text-tertiary)}.i-message.i-message-tertiary .i-message-icon{color:var(--color-text-tertiary)}.i-message.i-message-contrast{border-left-color:var(--color-contrast)}.i-message.i-message-contrast .i-message-icon{color:var(--color-contrast)}.i-message{display:flex;align-items:flex-start;border-radius:8px;margin-bottom:16px}.i-message:last-child{margin-bottom:0}.i-message--small .i-message-content{gap:8px;padding:8px 12px}.i-message--small .i-message-content .i-message-icon i{font-size:14px}.i-message--small .i-message-content .i-message-text{font-size:.95em}.i-message--small .i-message-content .i-message-close{padding:2px}.i-message--small .i-message-content .i-message-close i{font-size:10px}.i-message--medium .i-message-content{gap:12px;padding:16px}.i-message--medium .i-message-content .i-message-icon i{font-size:18px}.i-message--medium .i-message-content .i-message-text{font-size:1em}.i-message--medium .i-message-content .i-message-close i{font-size:12px}.i-message--large .i-message-content{gap:16px;padding:20px 24px}.i-message--large .i-message-content .i-message-icon i{font-size:24px}.i-message--large .i-message-content .i-message-text{font-size:1.1em}.i-message--large .i-message-content .i-message-close{padding:6px}.i-message--large .i-message-content .i-message-close i{font-size:14px}.i-message .i-message-content{display:flex;align-items:flex-start;width:100%}.i-message .i-message-content .i-message-icon{display:flex;align-items:center;justify-content:center;flex-shrink:0;margin-top:2px}.i-message .i-message-content .i-message-text{flex:1;line-height:1.5;min-width:0;word-wrap:break-word}.i-message .i-message-content .i-message-close{background:none;border:none;cursor:pointer;padding:4px;border-radius:8px;display:flex;align-items:center;justify-content:center;flex-shrink:0;margin-top:2px;transition:background-color .2s,color .2s}\n"] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.12", type: IMessage, isStandalone: true, selector: "i-message", inputs: { severity: "severity", size: "size", icon: "icon", closable: "closable", visible: "visible" }, outputs: { visibleChange: "visibleChange" }, ngImport: i0, template: "@if (visible) {\n  <div\n    class=\"i-message i-message-{{ severity }} i-message--{{ size }}\"\n    role=\"alert\"\n  >\n    <div class=\"i-message-content\">\n      <div class=\"i-message-icon\">\n        <i [class]=\"getDefaultIcon()\"></i>\n      </div>\n      <div class=\"i-message-text\">\n        <ng-content></ng-content>\n      </div>\n      @if (closable) {\n        <button\n          class=\"i-message-close\"\n          type=\"button\"\n          (click)=\"close()\"\n          aria-label=\"Close\"\n        >\n          <i class=\"pi pi-times\"></i>\n        </button>\n      }\n    </div>\n  </div>\n}\n", styles: [".i-message{background-color:var(--surface-section);border-left:4px solid transparent}.i-message .i-message-text{color:var(--color-text-primary)}.i-message .i-message-close{color:var(--color-text-secondary)}.i-message .i-message-close:hover{color:var(--color-text-primary);background-color:var(--surface-hover)}.i-message.i-message-success{border-left-color:var(--color-success)}.i-message.i-message-success .i-message-icon{color:var(--color-success)}.i-message.i-message-info{border-left-color:var(--color-info)}.i-message.i-message-info .i-message-icon{color:var(--color-info)}.i-message.i-message-warning{border-left-color:var(--color-warning)}.i-message.i-message-warning .i-message-icon{color:var(--color-warning)}.i-message.i-message-danger{border-left-color:var(--color-danger)}.i-message.i-message-danger .i-message-icon{color:var(--color-danger)}.i-message.i-message-primary{border-left-color:var(--color-primary)}.i-message.i-message-primary .i-message-icon{color:var(--color-primary)}.i-message.i-message-secondary{border-left-color:var(--color-secondary)}.i-message.i-message-secondary .i-message-icon{color:var(--color-secondary)}.i-message.i-message-tertiary{border-left-color:var(--color-text-tertiary)}.i-message.i-message-tertiary .i-message-icon{color:var(--color-text-tertiary)}.i-message.i-message-contrast{border-left-color:var(--color-contrast)}.i-message.i-message-contrast .i-message-icon{color:var(--color-contrast)}.i-message{display:flex;align-items:flex-start;border-radius:8px;margin-bottom:16px}.i-message:last-child{margin-bottom:0}.i-message--small .i-message-content{gap:8px;padding:8px 12px}.i-message--small .i-message-content .i-message-icon i{font-size:14px}.i-message--small .i-message-content .i-message-text{font-size:.95em}.i-message--small .i-message-content .i-message-close{padding:2px}.i-message--small .i-message-content .i-message-close i{font-size:10px}.i-message--medium .i-message-content{gap:12px;padding:16px}.i-message--medium .i-message-content .i-message-icon i{font-size:18px}.i-message--medium .i-message-content .i-message-text{font-size:1em}.i-message--medium .i-message-content .i-message-close i{font-size:12px}.i-message--large .i-message-content{gap:16px;padding:20px 24px}.i-message--large .i-message-content .i-message-icon i{font-size:24px}.i-message--large .i-message-content .i-message-text{font-size:1.1em}.i-message--large .i-message-content .i-message-close{padding:6px}.i-message--large .i-message-content .i-message-close i{font-size:14px}.i-message .i-message-content{display:flex;align-items:flex-start;width:100%}.i-message .i-message-content .i-message-icon{display:flex;align-items:center;justify-content:center;flex-shrink:0;margin-top:2px}.i-message .i-message-content .i-message-text{flex:1;line-height:1.5;min-width:0;word-wrap:break-word}.i-message .i-message-content .i-message-close{background:none;border:none;cursor:pointer;padding:4px;border-radius:8px;display:flex;align-items:center;justify-content:center;flex-shrink:0;margin-top:2px;transition:background-color .2s,color .2s}\n"] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: IMessage, decorators: [{
             type: Component,
-            args: [{ selector: 'i-message', imports: [], template: "@if (visible) {\n<div\n  class=\"i-message i-message-{{ severity }} i-message--{{ size }}\"\n  role=\"alert\"\n>\n  <div class=\"i-message-content\">\n    <div class=\"i-message-icon\">\n      <i [class]=\"getDefaultIcon()\"></i>\n    </div>\n    <div class=\"i-message-text\">\n      <ng-content></ng-content>\n    </div>\n    @if (closable) {\n    <button\n      class=\"i-message-close\"\n      type=\"button\"\n      (click)=\"close()\"\n      aria-label=\"Close\"\n    >\n      <i class=\"pi pi-times\"></i>\n    </button>\n    }\n  </div>\n</div>\n}\n", styles: [".i-message{background-color:var(--surface-section);border-left:4px solid transparent}.i-message .i-message-text{color:var(--color-text-primary)}.i-message .i-message-close{color:var(--color-text-secondary)}.i-message .i-message-close:hover{color:var(--color-text-primary);background-color:var(--surface-hover)}.i-message.i-message-success{border-left-color:var(--color-success)}.i-message.i-message-success .i-message-icon{color:var(--color-success)}.i-message.i-message-info{border-left-color:var(--color-info)}.i-message.i-message-info .i-message-icon{color:var(--color-info)}.i-message.i-message-warning{border-left-color:var(--color-warning)}.i-message.i-message-warning .i-message-icon{color:var(--color-warning)}.i-message.i-message-danger{border-left-color:var(--color-danger)}.i-message.i-message-danger .i-message-icon{color:var(--color-danger)}.i-message.i-message-primary{border-left-color:var(--color-primary)}.i-message.i-message-primary .i-message-icon{color:var(--color-primary)}.i-message.i-message-secondary{border-left-color:var(--color-secondary)}.i-message.i-message-secondary .i-message-icon{color:var(--color-secondary)}.i-message.i-message-tertiary{border-left-color:var(--color-text-tertiary)}.i-message.i-message-tertiary .i-message-icon{color:var(--color-text-tertiary)}.i-message.i-message-contrast{border-left-color:var(--color-contrast)}.i-message.i-message-contrast .i-message-icon{color:var(--color-contrast)}.i-message{display:flex;align-items:flex-start;border-radius:8px;margin-bottom:16px}.i-message:last-child{margin-bottom:0}.i-message--small .i-message-content{gap:8px;padding:8px 12px}.i-message--small .i-message-content .i-message-icon i{font-size:14px}.i-message--small .i-message-content .i-message-text{font-size:.95em}.i-message--small .i-message-content .i-message-close{padding:2px}.i-message--small .i-message-content .i-message-close i{font-size:10px}.i-message--medium .i-message-content{gap:12px;padding:16px}.i-message--medium .i-message-content .i-message-icon i{font-size:18px}.i-message--medium .i-message-content .i-message-text{font-size:1em}.i-message--medium .i-message-content .i-message-close i{font-size:12px}.i-message--large .i-message-content{gap:16px;padding:20px 24px}.i-message--large .i-message-content .i-message-icon i{font-size:24px}.i-message--large .i-message-content .i-message-text{font-size:1.1em}.i-message--large .i-message-content .i-message-close{padding:6px}.i-message--large .i-message-content .i-message-close i{font-size:14px}.i-message .i-message-content{display:flex;align-items:flex-start;width:100%}.i-message .i-message-content .i-message-icon{display:flex;align-items:center;justify-content:center;flex-shrink:0;margin-top:2px}.i-message .i-message-content .i-message-text{flex:1;line-height:1.5;min-width:0;word-wrap:break-word}.i-message .i-message-content .i-message-close{background:none;border:none;cursor:pointer;padding:4px;border-radius:8px;display:flex;align-items:center;justify-content:center;flex-shrink:0;margin-top:2px;transition:background-color .2s,color .2s}\n"] }]
+            args: [{ selector: 'i-message', imports: [], template: "@if (visible) {\n  <div\n    class=\"i-message i-message-{{ severity }} i-message--{{ size }}\"\n    role=\"alert\"\n  >\n    <div class=\"i-message-content\">\n      <div class=\"i-message-icon\">\n        <i [class]=\"getDefaultIcon()\"></i>\n      </div>\n      <div class=\"i-message-text\">\n        <ng-content></ng-content>\n      </div>\n      @if (closable) {\n        <button\n          class=\"i-message-close\"\n          type=\"button\"\n          (click)=\"close()\"\n          aria-label=\"Close\"\n        >\n          <i class=\"pi pi-times\"></i>\n        </button>\n      }\n    </div>\n  </div>\n}\n", styles: [".i-message{background-color:var(--surface-section);border-left:4px solid transparent}.i-message .i-message-text{color:var(--color-text-primary)}.i-message .i-message-close{color:var(--color-text-secondary)}.i-message .i-message-close:hover{color:var(--color-text-primary);background-color:var(--surface-hover)}.i-message.i-message-success{border-left-color:var(--color-success)}.i-message.i-message-success .i-message-icon{color:var(--color-success)}.i-message.i-message-info{border-left-color:var(--color-info)}.i-message.i-message-info .i-message-icon{color:var(--color-info)}.i-message.i-message-warning{border-left-color:var(--color-warning)}.i-message.i-message-warning .i-message-icon{color:var(--color-warning)}.i-message.i-message-danger{border-left-color:var(--color-danger)}.i-message.i-message-danger .i-message-icon{color:var(--color-danger)}.i-message.i-message-primary{border-left-color:var(--color-primary)}.i-message.i-message-primary .i-message-icon{color:var(--color-primary)}.i-message.i-message-secondary{border-left-color:var(--color-secondary)}.i-message.i-message-secondary .i-message-icon{color:var(--color-secondary)}.i-message.i-message-tertiary{border-left-color:var(--color-text-tertiary)}.i-message.i-message-tertiary .i-message-icon{color:var(--color-text-tertiary)}.i-message.i-message-contrast{border-left-color:var(--color-contrast)}.i-message.i-message-contrast .i-message-icon{color:var(--color-contrast)}.i-message{display:flex;align-items:flex-start;border-radius:8px;margin-bottom:16px}.i-message:last-child{margin-bottom:0}.i-message--small .i-message-content{gap:8px;padding:8px 12px}.i-message--small .i-message-content .i-message-icon i{font-size:14px}.i-message--small .i-message-content .i-message-text{font-size:.95em}.i-message--small .i-message-content .i-message-close{padding:2px}.i-message--small .i-message-content .i-message-close i{font-size:10px}.i-message--medium .i-message-content{gap:12px;padding:16px}.i-message--medium .i-message-content .i-message-icon i{font-size:18px}.i-message--medium .i-message-content .i-message-text{font-size:1em}.i-message--medium .i-message-content .i-message-close i{font-size:12px}.i-message--large .i-message-content{gap:16px;padding:20px 24px}.i-message--large .i-message-content .i-message-icon i{font-size:24px}.i-message--large .i-message-content .i-message-text{font-size:1.1em}.i-message--large .i-message-content .i-message-close{padding:6px}.i-message--large .i-message-content .i-message-close i{font-size:14px}.i-message .i-message-content{display:flex;align-items:flex-start;width:100%}.i-message .i-message-content .i-message-icon{display:flex;align-items:center;justify-content:center;flex-shrink:0;margin-top:2px}.i-message .i-message-content .i-message-text{flex:1;line-height:1.5;min-width:0;word-wrap:break-word}.i-message .i-message-content .i-message-close{background:none;border:none;cursor:pointer;padding:4px;border-radius:8px;display:flex;align-items:center;justify-content:center;flex-shrink:0;margin-top:2px;transition:background-color .2s,color .2s}\n"] }]
         }], propDecorators: { severity: [{
                 type: Input
             }], size: [{
@@ -5330,7 +5333,7 @@ class IMultiSelect {
                 useExisting: forwardRef(() => IMultiSelect),
                 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-multi-select-wrapper\"\n  [class.i-multi-select--fluid]=\"fluid\"\n  #dropdown\n  >\n  <!-- Input container with click handler -->\n  <div class=\"i-multi-select-input-container\" (click)=\"toggleDropdown()\">\n    <!-- Chips component with float label -->\n    <i-chips\n      [chips]=\"selectedChips()\"\n      [boxed]=\"true\"\n      [collapseOnOverflow]=\"true\"\n      [removable]=\"!disabled\"\n      [disabled]=\"disabled\"\n      [allowCloseAll]=\"showClear && value && value.length > 0\"\n      [useFloatLabel]=\"true\"\n      [label]=\"label\"\n      [showError]=\"showErrors\"\n      (removeChip)=\"onChipRemove($event)\"\n      (closedAll)=\"onChipsCloseAll()\"\n      class=\"i-multi-select-chips\"\n    ></i-chips>\n\n    <!-- Icons overlay -->\n    <div class=\"i-multi-select-icons-overlay\">\n      <span class=\"i-multi-select-arrow-wrapper\">\n        <i\n          class=\"pi pi-chevron-down i-multi-select-arrow\"\n          [class.flipped]=\"isOpen\"\n        ></i>\n      </span>\n    </div>\n\n    <!-- Error message -->\n    @if (showErrors) {\n      <div class=\"i-multi-select-error\">\n        {{ getErrorMessage() }}\n      </div>\n    }\n  </div>\n\n  @if (isOpen) {\n    <div class=\"i-multi-select-dropdown\" [class.open]=\"isOpen\">\n      @if (filter) {\n        <div class=\"i-multi-select-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-multi-select-options\">\n        @for (option of filteredOptions(); track option) {\n          <div\n            class=\"i-multi-select-option\"\n            [class.selected]=\"isOptionSelected(option)\"\n            (click)=\"toggleOption(option)\"\n            >\n            <i-checkbox\n              [checked]=\"isOptionSelected(option)\"\n              [readonly]=\"true\"\n              size=\"small\"\n              class=\"i-multi-select-checkbox\"\n            ></i-checkbox>\n            <span class=\"i-multi-select-option-label\">\n              {{ getOptionLabel(option) }}\n            </span>\n          </div>\n        }\n\n        @if (filteredOptions().length === 0) {\n          <div class=\"i-multi-select-no-options\">No options found</div>\n        }\n      </div>\n    </div>\n  }\n</div>\n", styles: [".i-multi-select-error{color:var(--color-danger)}.i-multi-select-icons-overlay{color:var(--color-text-secondary)}.i-multi-select-dropdown{background:var(--color-component-background);border:1px solid var(--surface-border)}.i-multi-select-dropdown .i-multi-select-filter .i-multi-select-search{border-color:var(--surface-border);background:var(--surface-ground);color:var(--color-text-primary)}.i-multi-select-dropdown .i-multi-select-filter .i-multi-select-search:focus{border-color:var(--color-primary);box-shadow:0 2px 10px #0003}.i-multi-select-dropdown .i-multi-select-options{background:transparent}.i-multi-select-dropdown .i-multi-select-options .i-multi-select-option{color:var(--color-text-primary)}.i-multi-select-dropdown .i-multi-select-options .i-multi-select-option:hover,.i-multi-select-dropdown .i-multi-select-options .i-multi-select-option.selected{background-color:var(--surface-hover)}.i-multi-select-dropdown .i-multi-select-options .i-multi-select-option .i-multi-select-checkbox{accent-color:var(--color-primary)}.i-multi-select-dropdown .i-multi-select-options .i-multi-select-no-options{color:var(--color-text-secondary)}.invalid .i-multi-select-trigger{border-color:var(--color-danger)}.invalid .i-label{color:var(--color-danger)}.i-multi-select-wrapper{position:relative;width:100%}.i-multi-select-wrapper.i-multi-select--fluid{width:100%}.i-multi-select-wrapper .i-multi-select-input-container{position:relative;cursor:pointer}.i-multi-select-wrapper .i-multi-select-input-container .i-multi-select-chips{position:relative;min-height:56px;cursor:pointer}.i-multi-select-wrapper .i-multi-select-input-container .i-multi-select-icons-overlay{position:absolute;top:18%;right:4px;z-index:3;display:flex;align-items:center;gap:0;pointer-events:none}.i-multi-select-wrapper .i-multi-select-input-container .i-multi-select-icons-overlay .i-multi-select-arrow-wrapper{width:24px;height:24px;display:inline-flex;align-items:center;justify-content:center}.i-multi-select-wrapper .i-multi-select-input-container .i-multi-select-icons-overlay .i-multi-select-arrow{font-size:.8em;transition:transform .15s ease}.i-multi-select-wrapper .i-multi-select-input-container .i-multi-select-icons-overlay .i-multi-select-arrow.flipped{transform:rotate(180deg)}.i-multi-select-wrapper .i-multi-select-input-container .i-multi-select-error{margin-top:4px;font-size:1em;padding-left:12px}.i-multi-select-wrapper .i-multi-select-dropdown{position:absolute;top:100%;left:0;right:0;z-index:1000;margin-top:4px;margin-bottom:8px;border-radius:4px;box-shadow:0 4px 12px #00000026;overflow:visible}.i-multi-select-wrapper .i-multi-select-dropdown .i-multi-select-filter{padding:8px}.i-multi-select-wrapper .i-multi-select-dropdown .i-multi-select-filter .i-multi-select-search{width:100%;padding:8px;border:1px solid;border-radius:4px;font-size:1em;outline:none}.i-multi-select-wrapper .i-multi-select-dropdown .i-multi-select-options{max-height:min(160px,100vh - 150px);padding-right:2px;overflow-x:hidden;overflow-y:auto;border-radius:0 0 4px 4px}.i-multi-select-wrapper .i-multi-select-dropdown .i-multi-select-options::-webkit-scrollbar-track{background:var(--scrollbar-track, transparent);border-radius:var(--scrollbar-radius, 3px)}.i-multi-select-wrapper .i-multi-select-dropdown .i-multi-select-options::-webkit-scrollbar-thumb{background:#0003;border-radius:var(--scrollbar-radius, 3px);transition:background .2s ease}.i-multi-select-wrapper .i-multi-select-dropdown .i-multi-select-options::-webkit-scrollbar-thumb:hover{background:#00000059}.i-multi-select-wrapper .i-multi-select-dropdown .i-multi-select-options::-webkit-scrollbar-thumb:active{background:#00000080}.i-multi-select-wrapper .i-multi-select-dropdown .i-multi-select-options::-webkit-scrollbar-corner{background:transparent}.i-multi-select-wrapper .i-multi-select-dropdown .i-multi-select-options{scrollbar-width:thin;scrollbar-color:rgba(0,0,0,.2) transparent;scroll-behavior:smooth}.i-multi-select-wrapper .i-multi-select-dropdown .i-multi-select-options::-webkit-scrollbar-thumb{background:var(--scrollbar-thumb, var(--color-text-secondary))}.i-multi-select-wrapper .i-multi-select-dropdown .i-multi-select-options{scrollbar-color:var(--scrollbar-thumb, var(--color-text-secondary)) var(--scrollbar-track, transparent)}.i-multi-select-wrapper .i-multi-select-dropdown .i-multi-select-options::-webkit-scrollbar{width:var(--scrollbar-size, 6px);height:var(--scrollbar-size, 6px)}.i-multi-select-wrapper .i-multi-select-dropdown .i-multi-select-options::-webkit-scrollbar-track{background:var(--scrollbar-track-dropdown, rgba(0, 0, 0, .05));border-radius:var(--scrollbar-radius, 3px);margin:2px 0}.i-multi-select-wrapper .i-multi-select-dropdown .i-multi-select-options::-webkit-scrollbar-thumb{border-radius:var(--scrollbar-radius, 3px);min-height:20px;background:var(--scrollbar-thumb, var(--color-text-secondary))}.i-multi-select-wrapper .i-multi-select-dropdown .i-multi-select-options::-webkit-scrollbar-thumb:hover{background:var(--scrollbar-thumb-hover, var(--color-text-primary))}.i-multi-select-wrapper .i-multi-select-dropdown .i-multi-select-options::-webkit-scrollbar-thumb:active{background:var(--scrollbar-thumb-active, var(--color-primary))}.i-multi-select-wrapper .i-multi-select-dropdown .i-multi-select-options{scrollbar-width:thin;scrollbar-color:var(--scrollbar-thumb, var(--color-text-secondary)) var(--scrollbar-track-dropdown, rgba(0, 0, 0, .05))}.i-multi-select-wrapper .i-multi-select-dropdown .i-multi-select-options .i-multi-select-option{display:flex;align-items:center;gap:8px;padding:8px 12px;font-size:1em;cursor:pointer;transition:background-color .15s ease}.i-multi-select-wrapper .i-multi-select-dropdown .i-multi-select-options .i-multi-select-option.selected{font-weight:500}.i-multi-select-wrapper .i-multi-select-dropdown .i-multi-select-options .i-multi-select-option .i-multi-select-checkbox{pointer-events:none}.i-multi-select-wrapper .i-multi-select-dropdown .i-multi-select-options .i-multi-select-option .i-multi-select-option-label{flex:1}.i-multi-select-wrapper .i-multi-select-dropdown .i-multi-select-options .i-multi-select-no-options{padding:12px;font-style:italic;text-align:center;opacity:.6}\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"] }] });
+        ], viewQueries: [{ propertyName: "dropdownRef", first: true, predicate: ["dropdown"], descendants: true }, { propertyName: "searchInputRef", first: true, predicate: ["searchInput"], descendants: true }], ngImport: i0, template: "<div\n  class=\"i-multi-select-wrapper\"\n  [class.i-multi-select--fluid]=\"fluid\"\n  #dropdown\n>\n  <!-- Input container with click handler -->\n  <div class=\"i-multi-select-input-container\" (click)=\"toggleDropdown()\">\n    <!-- Chips component with float label -->\n    <i-chips\n      [chips]=\"selectedChips()\"\n      [boxed]=\"true\"\n      [collapseOnOverflow]=\"true\"\n      [removable]=\"!disabled\"\n      [disabled]=\"disabled\"\n      [allowCloseAll]=\"showClear && value && value.length > 0\"\n      [useFloatLabel]=\"true\"\n      [label]=\"label\"\n      [showError]=\"showErrors\"\n      (removeChip)=\"onChipRemove($event)\"\n      (closedAll)=\"onChipsCloseAll()\"\n      class=\"i-multi-select-chips\"\n    ></i-chips>\n\n    <!-- Icons overlay -->\n    <div class=\"i-multi-select-icons-overlay\">\n      <span class=\"i-multi-select-arrow-wrapper\">\n        <i\n          class=\"pi pi-chevron-down i-multi-select-arrow\"\n          [class.flipped]=\"isOpen\"\n        ></i>\n      </span>\n    </div>\n\n    <!-- Error message -->\n    @if (showErrors) {\n      <div class=\"i-multi-select-error\">\n        {{ getErrorMessage() }}\n      </div>\n    }\n  </div>\n\n  @if (isOpen) {\n    <div class=\"i-multi-select-dropdown\" [class.open]=\"isOpen\">\n      @if (filter) {\n        <div class=\"i-multi-select-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-multi-select-options\">\n        @for (option of filteredOptions(); track option) {\n          <div\n            class=\"i-multi-select-option\"\n            [class.selected]=\"isOptionSelected(option)\"\n            (click)=\"toggleOption(option)\"\n          >\n            <i-checkbox\n              [checked]=\"isOptionSelected(option)\"\n              [readonly]=\"true\"\n              size=\"small\"\n              class=\"i-multi-select-checkbox\"\n            ></i-checkbox>\n            <span class=\"i-multi-select-option-label\">\n              {{ getOptionLabel(option) }}\n            </span>\n          </div>\n        }\n\n        @if (filteredOptions().length === 0) {\n          <div class=\"i-multi-select-no-options\">No options found</div>\n        }\n      </div>\n    </div>\n  }\n</div>\n", styles: [".i-multi-select-error{color:var(--color-danger)}.i-multi-select-icons-overlay{color:var(--color-text-secondary)}.i-multi-select-dropdown{background:var(--color-component-background);border:1px solid var(--surface-border)}.i-multi-select-dropdown .i-multi-select-filter .i-multi-select-search{border-color:var(--surface-border);background:var(--surface-ground);color:var(--color-text-primary)}.i-multi-select-dropdown .i-multi-select-filter .i-multi-select-search:focus{border-color:var(--color-primary);box-shadow:0 2px 10px #0003}.i-multi-select-dropdown .i-multi-select-options{background:transparent}.i-multi-select-dropdown .i-multi-select-options .i-multi-select-option{color:var(--color-text-primary)}.i-multi-select-dropdown .i-multi-select-options .i-multi-select-option:hover,.i-multi-select-dropdown .i-multi-select-options .i-multi-select-option.selected{background-color:var(--surface-hover)}.i-multi-select-dropdown .i-multi-select-options .i-multi-select-option .i-multi-select-checkbox{accent-color:var(--color-primary)}.i-multi-select-dropdown .i-multi-select-options .i-multi-select-no-options{color:var(--color-text-secondary)}.invalid .i-multi-select-trigger{border-color:var(--color-danger)}.invalid .i-label{color:var(--color-danger)}.i-multi-select-wrapper{position:relative;width:100%}.i-multi-select-wrapper.i-multi-select--fluid{width:100%}.i-multi-select-wrapper .i-multi-select-input-container{position:relative;cursor:pointer}.i-multi-select-wrapper .i-multi-select-input-container .i-multi-select-chips{position:relative;min-height:56px;cursor:pointer}.i-multi-select-wrapper .i-multi-select-input-container .i-multi-select-icons-overlay{position:absolute;top:18%;right:4px;z-index:3;display:flex;align-items:center;gap:0;pointer-events:none}.i-multi-select-wrapper .i-multi-select-input-container .i-multi-select-icons-overlay .i-multi-select-arrow-wrapper{width:24px;height:24px;display:inline-flex;align-items:center;justify-content:center}.i-multi-select-wrapper .i-multi-select-input-container .i-multi-select-icons-overlay .i-multi-select-arrow{font-size:.8em;transition:transform .15s ease}.i-multi-select-wrapper .i-multi-select-input-container .i-multi-select-icons-overlay .i-multi-select-arrow.flipped{transform:rotate(180deg)}.i-multi-select-wrapper .i-multi-select-input-container .i-multi-select-error{margin-top:4px;font-size:1em;padding-left:12px}.i-multi-select-wrapper .i-multi-select-dropdown{position:absolute;top:100%;left:0;right:0;z-index:1000;margin-top:4px;margin-bottom:8px;border-radius:4px;box-shadow:0 4px 12px #00000026;overflow:visible}.i-multi-select-wrapper .i-multi-select-dropdown .i-multi-select-filter{padding:8px}.i-multi-select-wrapper .i-multi-select-dropdown .i-multi-select-filter .i-multi-select-search{width:100%;padding:8px;border:1px solid;border-radius:4px;font-size:1em;outline:none}.i-multi-select-wrapper .i-multi-select-dropdown .i-multi-select-options{max-height:min(160px,100vh - 150px);padding-right:2px;overflow-x:hidden;overflow-y:auto;border-radius:0 0 4px 4px}.i-multi-select-wrapper .i-multi-select-dropdown .i-multi-select-options::-webkit-scrollbar-track{background:var(--scrollbar-track, transparent);border-radius:var(--scrollbar-radius, 3px)}.i-multi-select-wrapper .i-multi-select-dropdown .i-multi-select-options::-webkit-scrollbar-thumb{background:#0003;border-radius:var(--scrollbar-radius, 3px);transition:background .2s ease}.i-multi-select-wrapper .i-multi-select-dropdown .i-multi-select-options::-webkit-scrollbar-thumb:hover{background:#00000059}.i-multi-select-wrapper .i-multi-select-dropdown .i-multi-select-options::-webkit-scrollbar-thumb:active{background:#00000080}.i-multi-select-wrapper .i-multi-select-dropdown .i-multi-select-options::-webkit-scrollbar-corner{background:transparent}.i-multi-select-wrapper .i-multi-select-dropdown .i-multi-select-options{scrollbar-width:thin;scrollbar-color:rgba(0,0,0,.2) transparent;scroll-behavior:smooth}.i-multi-select-wrapper .i-multi-select-dropdown .i-multi-select-options::-webkit-scrollbar-thumb{background:var(--scrollbar-thumb, var(--color-text-secondary))}.i-multi-select-wrapper .i-multi-select-dropdown .i-multi-select-options{scrollbar-color:var(--scrollbar-thumb, var(--color-text-secondary)) var(--scrollbar-track, transparent)}.i-multi-select-wrapper .i-multi-select-dropdown .i-multi-select-options::-webkit-scrollbar{width:var(--scrollbar-size, 6px);height:var(--scrollbar-size, 6px)}.i-multi-select-wrapper .i-multi-select-dropdown .i-multi-select-options::-webkit-scrollbar-track{background:var(--scrollbar-track-dropdown, rgba(0, 0, 0, .05));border-radius:var(--scrollbar-radius, 3px);margin:2px 0}.i-multi-select-wrapper .i-multi-select-dropdown .i-multi-select-options::-webkit-scrollbar-thumb{border-radius:var(--scrollbar-radius, 3px);min-height:20px;background:var(--scrollbar-thumb, var(--color-text-secondary))}.i-multi-select-wrapper .i-multi-select-dropdown .i-multi-select-options::-webkit-scrollbar-thumb:hover{background:var(--scrollbar-thumb-hover, var(--color-text-primary))}.i-multi-select-wrapper .i-multi-select-dropdown .i-multi-select-options::-webkit-scrollbar-thumb:active{background:var(--scrollbar-thumb-active, var(--color-primary))}.i-multi-select-wrapper .i-multi-select-dropdown .i-multi-select-options{scrollbar-width:thin;scrollbar-color:var(--scrollbar-thumb, var(--color-text-secondary)) var(--scrollbar-track-dropdown, rgba(0, 0, 0, .05))}.i-multi-select-wrapper .i-multi-select-dropdown .i-multi-select-options .i-multi-select-option{display:flex;align-items:center;gap:8px;padding:8px 12px;font-size:1em;cursor:pointer;transition:background-color .15s ease}.i-multi-select-wrapper .i-multi-select-dropdown .i-multi-select-options .i-multi-select-option.selected{font-weight:500}.i-multi-select-wrapper .i-multi-select-dropdown .i-multi-select-options .i-multi-select-option .i-multi-select-checkbox{pointer-events:none}.i-multi-select-wrapper .i-multi-select-dropdown .i-multi-select-options .i-multi-select-option .i-multi-select-option-label{flex:1}.i-multi-select-wrapper .i-multi-select-dropdown .i-multi-select-options .i-multi-select-no-options{padding:12px;font-style:italic;text-align:center;opacity:.6}\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"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: IMultiSelect, decorators: [{
             type: Component,
@@ -5340,7 +5343,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.12", ngImpo
                             useExisting: forwardRef(() => IMultiSelect),
                             multi: true,
                         },
-                    ], template: "<div\n  class=\"i-multi-select-wrapper\"\n  [class.i-multi-select--fluid]=\"fluid\"\n  #dropdown\n  >\n  <!-- Input container with click handler -->\n  <div class=\"i-multi-select-input-container\" (click)=\"toggleDropdown()\">\n    <!-- Chips component with float label -->\n    <i-chips\n      [chips]=\"selectedChips()\"\n      [boxed]=\"true\"\n      [collapseOnOverflow]=\"true\"\n      [removable]=\"!disabled\"\n      [disabled]=\"disabled\"\n      [allowCloseAll]=\"showClear && value && value.length > 0\"\n      [useFloatLabel]=\"true\"\n      [label]=\"label\"\n      [showError]=\"showErrors\"\n      (removeChip)=\"onChipRemove($event)\"\n      (closedAll)=\"onChipsCloseAll()\"\n      class=\"i-multi-select-chips\"\n    ></i-chips>\n\n    <!-- Icons overlay -->\n    <div class=\"i-multi-select-icons-overlay\">\n      <span class=\"i-multi-select-arrow-wrapper\">\n        <i\n          class=\"pi pi-chevron-down i-multi-select-arrow\"\n          [class.flipped]=\"isOpen\"\n        ></i>\n      </span>\n    </div>\n\n    <!-- Error message -->\n    @if (showErrors) {\n      <div class=\"i-multi-select-error\">\n        {{ getErrorMessage() }}\n      </div>\n    }\n  </div>\n\n  @if (isOpen) {\n    <div class=\"i-multi-select-dropdown\" [class.open]=\"isOpen\">\n      @if (filter) {\n        <div class=\"i-multi-select-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-multi-select-options\">\n        @for (option of filteredOptions(); track option) {\n          <div\n            class=\"i-multi-select-option\"\n            [class.selected]=\"isOptionSelected(option)\"\n            (click)=\"toggleOption(option)\"\n            >\n            <i-checkbox\n              [checked]=\"isOptionSelected(option)\"\n              [readonly]=\"true\"\n              size=\"small\"\n              class=\"i-multi-select-checkbox\"\n            ></i-checkbox>\n            <span class=\"i-multi-select-option-label\">\n              {{ getOptionLabel(option) }}\n            </span>\n          </div>\n        }\n\n        @if (filteredOptions().length === 0) {\n          <div class=\"i-multi-select-no-options\">No options found</div>\n        }\n      </div>\n    </div>\n  }\n</div>\n", styles: [".i-multi-select-error{color:var(--color-danger)}.i-multi-select-icons-overlay{color:var(--color-text-secondary)}.i-multi-select-dropdown{background:var(--color-component-background);border:1px solid var(--surface-border)}.i-multi-select-dropdown .i-multi-select-filter .i-multi-select-search{border-color:var(--surface-border);background:var(--surface-ground);color:var(--color-text-primary)}.i-multi-select-dropdown .i-multi-select-filter .i-multi-select-search:focus{border-color:var(--color-primary);box-shadow:0 2px 10px #0003}.i-multi-select-dropdown .i-multi-select-options{background:transparent}.i-multi-select-dropdown .i-multi-select-options .i-multi-select-option{color:var(--color-text-primary)}.i-multi-select-dropdown .i-multi-select-options .i-multi-select-option:hover,.i-multi-select-dropdown .i-multi-select-options .i-multi-select-option.selected{background-color:var(--surface-hover)}.i-multi-select-dropdown .i-multi-select-options .i-multi-select-option .i-multi-select-checkbox{accent-color:var(--color-primary)}.i-multi-select-dropdown .i-multi-select-options .i-multi-select-no-options{color:var(--color-text-secondary)}.invalid .i-multi-select-trigger{border-color:var(--color-danger)}.invalid .i-label{color:var(--color-danger)}.i-multi-select-wrapper{position:relative;width:100%}.i-multi-select-wrapper.i-multi-select--fluid{width:100%}.i-multi-select-wrapper .i-multi-select-input-container{position:relative;cursor:pointer}.i-multi-select-wrapper .i-multi-select-input-container .i-multi-select-chips{position:relative;min-height:56px;cursor:pointer}.i-multi-select-wrapper .i-multi-select-input-container .i-multi-select-icons-overlay{position:absolute;top:18%;right:4px;z-index:3;display:flex;align-items:center;gap:0;pointer-events:none}.i-multi-select-wrapper .i-multi-select-input-container .i-multi-select-icons-overlay .i-multi-select-arrow-wrapper{width:24px;height:24px;display:inline-flex;align-items:center;justify-content:center}.i-multi-select-wrapper .i-multi-select-input-container .i-multi-select-icons-overlay .i-multi-select-arrow{font-size:.8em;transition:transform .15s ease}.i-multi-select-wrapper .i-multi-select-input-container .i-multi-select-icons-overlay .i-multi-select-arrow.flipped{transform:rotate(180deg)}.i-multi-select-wrapper .i-multi-select-input-container .i-multi-select-error{margin-top:4px;font-size:1em;padding-left:12px}.i-multi-select-wrapper .i-multi-select-dropdown{position:absolute;top:100%;left:0;right:0;z-index:1000;margin-top:4px;margin-bottom:8px;border-radius:4px;box-shadow:0 4px 12px #00000026;overflow:visible}.i-multi-select-wrapper .i-multi-select-dropdown .i-multi-select-filter{padding:8px}.i-multi-select-wrapper .i-multi-select-dropdown .i-multi-select-filter .i-multi-select-search{width:100%;padding:8px;border:1px solid;border-radius:4px;font-size:1em;outline:none}.i-multi-select-wrapper .i-multi-select-dropdown .i-multi-select-options{max-height:min(160px,100vh - 150px);padding-right:2px;overflow-x:hidden;overflow-y:auto;border-radius:0 0 4px 4px}.i-multi-select-wrapper .i-multi-select-dropdown .i-multi-select-options::-webkit-scrollbar-track{background:var(--scrollbar-track, transparent);border-radius:var(--scrollbar-radius, 3px)}.i-multi-select-wrapper .i-multi-select-dropdown .i-multi-select-options::-webkit-scrollbar-thumb{background:#0003;border-radius:var(--scrollbar-radius, 3px);transition:background .2s ease}.i-multi-select-wrapper .i-multi-select-dropdown .i-multi-select-options::-webkit-scrollbar-thumb:hover{background:#00000059}.i-multi-select-wrapper .i-multi-select-dropdown .i-multi-select-options::-webkit-scrollbar-thumb:active{background:#00000080}.i-multi-select-wrapper .i-multi-select-dropdown .i-multi-select-options::-webkit-scrollbar-corner{background:transparent}.i-multi-select-wrapper .i-multi-select-dropdown .i-multi-select-options{scrollbar-width:thin;scrollbar-color:rgba(0,0,0,.2) transparent;scroll-behavior:smooth}.i-multi-select-wrapper .i-multi-select-dropdown .i-multi-select-options::-webkit-scrollbar-thumb{background:var(--scrollbar-thumb, var(--color-text-secondary))}.i-multi-select-wrapper .i-multi-select-dropdown .i-multi-select-options{scrollbar-color:var(--scrollbar-thumb, var(--color-text-secondary)) var(--scrollbar-track, transparent)}.i-multi-select-wrapper .i-multi-select-dropdown .i-multi-select-options::-webkit-scrollbar{width:var(--scrollbar-size, 6px);height:var(--scrollbar-size, 6px)}.i-multi-select-wrapper .i-multi-select-dropdown .i-multi-select-options::-webkit-scrollbar-track{background:var(--scrollbar-track-dropdown, rgba(0, 0, 0, .05));border-radius:var(--scrollbar-radius, 3px);margin:2px 0}.i-multi-select-wrapper .i-multi-select-dropdown .i-multi-select-options::-webkit-scrollbar-thumb{border-radius:var(--scrollbar-radius, 3px);min-height:20px;background:var(--scrollbar-thumb, var(--color-text-secondary))}.i-multi-select-wrapper .i-multi-select-dropdown .i-multi-select-options::-webkit-scrollbar-thumb:hover{background:var(--scrollbar-thumb-hover, var(--color-text-primary))}.i-multi-select-wrapper .i-multi-select-dropdown .i-multi-select-options::-webkit-scrollbar-thumb:active{background:var(--scrollbar-thumb-active, var(--color-primary))}.i-multi-select-wrapper .i-multi-select-dropdown .i-multi-select-options{scrollbar-width:thin;scrollbar-color:var(--scrollbar-thumb, var(--color-text-secondary)) var(--scrollbar-track-dropdown, rgba(0, 0, 0, .05))}.i-multi-select-wrapper .i-multi-select-dropdown .i-multi-select-options .i-multi-select-option{display:flex;align-items:center;gap:8px;padding:8px 12px;font-size:1em;cursor:pointer;transition:background-color .15s ease}.i-multi-select-wrapper .i-multi-select-dropdown .i-multi-select-options .i-multi-select-option.selected{font-weight:500}.i-multi-select-wrapper .i-multi-select-dropdown .i-multi-select-options .i-multi-select-option .i-multi-select-checkbox{pointer-events:none}.i-multi-select-wrapper .i-multi-select-dropdown .i-multi-select-options .i-multi-select-option .i-multi-select-option-label{flex:1}.i-multi-select-wrapper .i-multi-select-dropdown .i-multi-select-options .i-multi-select-no-options{padding:12px;font-style:italic;text-align:center;opacity:.6}\n"] }]
+                    ], template: "<div\n  class=\"i-multi-select-wrapper\"\n  [class.i-multi-select--fluid]=\"fluid\"\n  #dropdown\n>\n  <!-- Input container with click handler -->\n  <div class=\"i-multi-select-input-container\" (click)=\"toggleDropdown()\">\n    <!-- Chips component with float label -->\n    <i-chips\n      [chips]=\"selectedChips()\"\n      [boxed]=\"true\"\n      [collapseOnOverflow]=\"true\"\n      [removable]=\"!disabled\"\n      [disabled]=\"disabled\"\n      [allowCloseAll]=\"showClear && value && value.length > 0\"\n      [useFloatLabel]=\"true\"\n      [label]=\"label\"\n      [showError]=\"showErrors\"\n      (removeChip)=\"onChipRemove($event)\"\n      (closedAll)=\"onChipsCloseAll()\"\n      class=\"i-multi-select-chips\"\n    ></i-chips>\n\n    <!-- Icons overlay -->\n    <div class=\"i-multi-select-icons-overlay\">\n      <span class=\"i-multi-select-arrow-wrapper\">\n        <i\n          class=\"pi pi-chevron-down i-multi-select-arrow\"\n          [class.flipped]=\"isOpen\"\n        ></i>\n      </span>\n    </div>\n\n    <!-- Error message -->\n    @if (showErrors) {\n      <div class=\"i-multi-select-error\">\n        {{ getErrorMessage() }}\n      </div>\n    }\n  </div>\n\n  @if (isOpen) {\n    <div class=\"i-multi-select-dropdown\" [class.open]=\"isOpen\">\n      @if (filter) {\n        <div class=\"i-multi-select-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-multi-select-options\">\n        @for (option of filteredOptions(); track option) {\n          <div\n            class=\"i-multi-select-option\"\n            [class.selected]=\"isOptionSelected(option)\"\n            (click)=\"toggleOption(option)\"\n          >\n            <i-checkbox\n              [checked]=\"isOptionSelected(option)\"\n              [readonly]=\"true\"\n              size=\"small\"\n              class=\"i-multi-select-checkbox\"\n            ></i-checkbox>\n            <span class=\"i-multi-select-option-label\">\n              {{ getOptionLabel(option) }}\n            </span>\n          </div>\n        }\n\n        @if (filteredOptions().length === 0) {\n          <div class=\"i-multi-select-no-options\">No options found</div>\n        }\n      </div>\n    </div>\n  }\n</div>\n", styles: [".i-multi-select-error{color:var(--color-danger)}.i-multi-select-icons-overlay{color:var(--color-text-secondary)}.i-multi-select-dropdown{background:var(--color-component-background);border:1px solid var(--surface-border)}.i-multi-select-dropdown .i-multi-select-filter .i-multi-select-search{border-color:var(--surface-border);background:var(--surface-ground);color:var(--color-text-primary)}.i-multi-select-dropdown .i-multi-select-filter .i-multi-select-search:focus{border-color:var(--color-primary);box-shadow:0 2px 10px #0003}.i-multi-select-dropdown .i-multi-select-options{background:transparent}.i-multi-select-dropdown .i-multi-select-options .i-multi-select-option{color:var(--color-text-primary)}.i-multi-select-dropdown .i-multi-select-options .i-multi-select-option:hover,.i-multi-select-dropdown .i-multi-select-options .i-multi-select-option.selected{background-color:var(--surface-hover)}.i-multi-select-dropdown .i-multi-select-options .i-multi-select-option .i-multi-select-checkbox{accent-color:var(--color-primary)}.i-multi-select-dropdown .i-multi-select-options .i-multi-select-no-options{color:var(--color-text-secondary)}.invalid .i-multi-select-trigger{border-color:var(--color-danger)}.invalid .i-label{color:var(--color-danger)}.i-multi-select-wrapper{position:relative;width:100%}.i-multi-select-wrapper.i-multi-select--fluid{width:100%}.i-multi-select-wrapper .i-multi-select-input-container{position:relative;cursor:pointer}.i-multi-select-wrapper .i-multi-select-input-container .i-multi-select-chips{position:relative;min-height:56px;cursor:pointer}.i-multi-select-wrapper .i-multi-select-input-container .i-multi-select-icons-overlay{position:absolute;top:18%;right:4px;z-index:3;display:flex;align-items:center;gap:0;pointer-events:none}.i-multi-select-wrapper .i-multi-select-input-container .i-multi-select-icons-overlay .i-multi-select-arrow-wrapper{width:24px;height:24px;display:inline-flex;align-items:center;justify-content:center}.i-multi-select-wrapper .i-multi-select-input-container .i-multi-select-icons-overlay .i-multi-select-arrow{font-size:.8em;transition:transform .15s ease}.i-multi-select-wrapper .i-multi-select-input-container .i-multi-select-icons-overlay .i-multi-select-arrow.flipped{transform:rotate(180deg)}.i-multi-select-wrapper .i-multi-select-input-container .i-multi-select-error{margin-top:4px;font-size:1em;padding-left:12px}.i-multi-select-wrapper .i-multi-select-dropdown{position:absolute;top:100%;left:0;right:0;z-index:1000;margin-top:4px;margin-bottom:8px;border-radius:4px;box-shadow:0 4px 12px #00000026;overflow:visible}.i-multi-select-wrapper .i-multi-select-dropdown .i-multi-select-filter{padding:8px}.i-multi-select-wrapper .i-multi-select-dropdown .i-multi-select-filter .i-multi-select-search{width:100%;padding:8px;border:1px solid;border-radius:4px;font-size:1em;outline:none}.i-multi-select-wrapper .i-multi-select-dropdown .i-multi-select-options{max-height:min(160px,100vh - 150px);padding-right:2px;overflow-x:hidden;overflow-y:auto;border-radius:0 0 4px 4px}.i-multi-select-wrapper .i-multi-select-dropdown .i-multi-select-options::-webkit-scrollbar-track{background:var(--scrollbar-track, transparent);border-radius:var(--scrollbar-radius, 3px)}.i-multi-select-wrapper .i-multi-select-dropdown .i-multi-select-options::-webkit-scrollbar-thumb{background:#0003;border-radius:var(--scrollbar-radius, 3px);transition:background .2s ease}.i-multi-select-wrapper .i-multi-select-dropdown .i-multi-select-options::-webkit-scrollbar-thumb:hover{background:#00000059}.i-multi-select-wrapper .i-multi-select-dropdown .i-multi-select-options::-webkit-scrollbar-thumb:active{background:#00000080}.i-multi-select-wrapper .i-multi-select-dropdown .i-multi-select-options::-webkit-scrollbar-corner{background:transparent}.i-multi-select-wrapper .i-multi-select-dropdown .i-multi-select-options{scrollbar-width:thin;scrollbar-color:rgba(0,0,0,.2) transparent;scroll-behavior:smooth}.i-multi-select-wrapper .i-multi-select-dropdown .i-multi-select-options::-webkit-scrollbar-thumb{background:var(--scrollbar-thumb, var(--color-text-secondary))}.i-multi-select-wrapper .i-multi-select-dropdown .i-multi-select-options{scrollbar-color:var(--scrollbar-thumb, var(--color-text-secondary)) var(--scrollbar-track, transparent)}.i-multi-select-wrapper .i-multi-select-dropdown .i-multi-select-options::-webkit-scrollbar{width:var(--scrollbar-size, 6px);height:var(--scrollbar-size, 6px)}.i-multi-select-wrapper .i-multi-select-dropdown .i-multi-select-options::-webkit-scrollbar-track{background:var(--scrollbar-track-dropdown, rgba(0, 0, 0, .05));border-radius:var(--scrollbar-radius, 3px);margin:2px 0}.i-multi-select-wrapper .i-multi-select-dropdown .i-multi-select-options::-webkit-scrollbar-thumb{border-radius:var(--scrollbar-radius, 3px);min-height:20px;background:var(--scrollbar-thumb, var(--color-text-secondary))}.i-multi-select-wrapper .i-multi-select-dropdown .i-multi-select-options::-webkit-scrollbar-thumb:hover{background:var(--scrollbar-thumb-hover, var(--color-text-primary))}.i-multi-select-wrapper .i-multi-select-dropdown .i-multi-select-options::-webkit-scrollbar-thumb:active{background:var(--scrollbar-thumb-active, var(--color-primary))}.i-multi-select-wrapper .i-multi-select-dropdown .i-multi-select-options{scrollbar-width:thin;scrollbar-color:var(--scrollbar-thumb, var(--color-text-secondary)) var(--scrollbar-track-dropdown, rgba(0, 0, 0, .05))}.i-multi-select-wrapper .i-multi-select-dropdown .i-multi-select-options .i-multi-select-option{display:flex;align-items:center;gap:8px;padding:8px 12px;font-size:1em;cursor:pointer;transition:background-color .15s ease}.i-multi-select-wrapper .i-multi-select-dropdown .i-multi-select-options .i-multi-select-option.selected{font-weight:500}.i-multi-select-wrapper .i-multi-select-dropdown .i-multi-select-options .i-multi-select-option .i-multi-select-checkbox{pointer-events:none}.i-multi-select-wrapper .i-multi-select-dropdown .i-multi-select-options .i-multi-select-option .i-multi-select-option-label{flex:1}.i-multi-select-wrapper .i-multi-select-dropdown .i-multi-select-options .i-multi-select-no-options{padding:12px;font-style:italic;text-align:center;opacity:.6}\n"] }]
         }], ctorParameters: () => [{ type: i0.Injector }], propDecorators: { label: [{
                 type: Input
             }], options: [{ type: i0.Input, args: [{ isSignal: true, alias: "options", required: false }] }], optionLabel: [{
@@ -5689,7 +5692,7 @@ class IOverlayPanel {
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: IOverlayPanel, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.12", type: IOverlayPanel, isStandalone: true, selector: "i-overlay-panel", inputs: { dismissable: "dismissable", appendTo: "appendTo", baseZIndex: "baseZIndex", autoZIndex: "autoZIndex" }, outputs: { onShow: "onShow", onHide: "onHide" }, viewQueries: [{ propertyName: "containerViewChild", first: true, predicate: ["container"], descendants: true }], ngImport: i0, template: "@if (render) {\n<div\n  #container\n  class=\"overlay-panel\"\n  [class.overlay-panel-visible]=\"overlayVisible\"\n  (click)=\"onContainerClick()\"\n  (keydown.escape)=\"onEscapeKey()\"\n  [@animation]=\"visible ? 'open' : 'closed'\"\n  (@animation.start)=\"onAnimationStart($event)\"\n  (@animation.done)=\"onAnimationEnd($event)\"\n  role=\"dialog\"\n  [attr.aria-hidden]=\"!visible\"\n>\n  <i-button\n    class=\"overlay-panel-close\"\n    size=\"xtra-small\"\n    [icon]=\"'pi pi-times'\"\n    [text]=\"true\"\n    [severity]=\"'contrast'\"\n    (clicked)=\"hide()\"\n  ></i-button>\n  <div class=\"overlay-panel-content\">\n    <ng-content></ng-content>\n  </div>\n</div>\n}\n", styles: [".overlay-panel{background:var(--color-component-background-secondary);border:1px solid var(--surface-border);color:var(--color-text-primary);box-shadow:0 2px 10px #0003}.overlay-panel-top .overlay-panel-arrow{border-top-color:var(--color-component-background-secondary)}.overlay-panel-bottom .overlay-panel-arrow{border-bottom-color:var(--color-component-background-secondary)}.overlay-panel-left .overlay-panel-arrow{border-left-color:var(--color-component-background-secondary)}.overlay-panel-right .overlay-panel-arrow{border-right-color:var(--color-component-background-secondary)}.overlay-panel-left .overlay-panel-arrow:before{border-right-color:var(--surface-border)}.overlay-panel-left .overlay-panel-arrow:after{border-right-color:var(--color-component-background-secondary)}.overlay-panel-close{color:var(--color-text-primary)}.overlay-panel-close:hover{color:var(--color-primary)}.overlay-panel{position:fixed;border-radius:4px;padding:1rem;min-width:200px;max-width:600px;box-shadow:0 2px 12px #0000001a;transform-origin:center top}.overlay-panel.overlay-panel-top{transform-origin:center bottom}.overlay-panel.overlay-panel-bottom{transform-origin:center top}.overlay-panel.overlay-panel-left{transform-origin:right center}.overlay-panel.overlay-panel-right{transform-origin:left center}.overlay-panel .overlay-panel-content{position:relative;z-index:1;margin-top:18px}.overlay-panel .overlay-panel-close{position:absolute;top:10px;right:5px;z-index:2}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: IButton, selector: "i-button", inputs: ["severity", "size", "type", "disabled", "outlined", "raised", "text", "icon", "fluid", "loading"], outputs: ["clicked"] }], animations: [
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.12", type: IOverlayPanel, isStandalone: true, selector: "i-overlay-panel", inputs: { dismissable: "dismissable", appendTo: "appendTo", baseZIndex: "baseZIndex", autoZIndex: "autoZIndex" }, outputs: { onShow: "onShow", onHide: "onHide" }, viewQueries: [{ propertyName: "containerViewChild", first: true, predicate: ["container"], descendants: true }], ngImport: i0, template: "@if (render) {\n  <div\n    #container\n    class=\"overlay-panel\"\n    [class.overlay-panel-visible]=\"overlayVisible\"\n    (click)=\"onContainerClick()\"\n    (keydown.escape)=\"onEscapeKey()\"\n    [@animation]=\"visible ? 'open' : 'closed'\"\n    (@animation.start)=\"onAnimationStart($event)\"\n    (@animation.done)=\"onAnimationEnd($event)\"\n    role=\"dialog\"\n    [attr.aria-hidden]=\"!visible\"\n  >\n    <i-button\n      class=\"overlay-panel-close\"\n      size=\"xtra-small\"\n      [icon]=\"'pi pi-times'\"\n      [text]=\"true\"\n      [severity]=\"'contrast'\"\n      (clicked)=\"hide()\"\n    ></i-button>\n    <div class=\"overlay-panel-content\">\n      <ng-content></ng-content>\n    </div>\n  </div>\n}\n", styles: [".overlay-panel{background:var(--color-component-background-secondary);border:1px solid var(--surface-border);color:var(--color-text-primary);box-shadow:0 2px 10px #0003}.overlay-panel-top .overlay-panel-arrow{border-top-color:var(--color-component-background-secondary)}.overlay-panel-bottom .overlay-panel-arrow{border-bottom-color:var(--color-component-background-secondary)}.overlay-panel-left .overlay-panel-arrow{border-left-color:var(--color-component-background-secondary)}.overlay-panel-right .overlay-panel-arrow{border-right-color:var(--color-component-background-secondary)}.overlay-panel-left .overlay-panel-arrow:before{border-right-color:var(--surface-border)}.overlay-panel-left .overlay-panel-arrow:after{border-right-color:var(--color-component-background-secondary)}.overlay-panel-close{color:var(--color-text-primary)}.overlay-panel-close:hover{color:var(--color-primary)}.overlay-panel{position:fixed;border-radius:4px;padding:1rem;min-width:200px;max-width:600px;box-shadow:0 2px 12px #0000001a;transform-origin:center top}.overlay-panel.overlay-panel-top{transform-origin:center bottom}.overlay-panel.overlay-panel-bottom{transform-origin:center top}.overlay-panel.overlay-panel-left{transform-origin:right center}.overlay-panel.overlay-panel-right{transform-origin:left center}.overlay-panel .overlay-panel-content{position:relative;z-index:1;margin-top:18px}.overlay-panel .overlay-panel-close{position:absolute;top:10px;right:5px;z-index:2}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: IButton, selector: "i-button", inputs: ["severity", "size", "type", "disabled", "outlined", "raised", "text", "icon", "fluid", "loading"], outputs: ["clicked"] }], animations: [
             trigger('animation', [
                 state('void', style({
                     transform: 'scaleY(0.8)',
@@ -5727,7 +5730,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.12", ngImpo
                             transition('void => open', animate('150ms ease-out')),
                             transition('open => closed', animate('150ms ease-in')),
                         ]),
-                    ], template: "@if (render) {\n<div\n  #container\n  class=\"overlay-panel\"\n  [class.overlay-panel-visible]=\"overlayVisible\"\n  (click)=\"onContainerClick()\"\n  (keydown.escape)=\"onEscapeKey()\"\n  [@animation]=\"visible ? 'open' : 'closed'\"\n  (@animation.start)=\"onAnimationStart($event)\"\n  (@animation.done)=\"onAnimationEnd($event)\"\n  role=\"dialog\"\n  [attr.aria-hidden]=\"!visible\"\n>\n  <i-button\n    class=\"overlay-panel-close\"\n    size=\"xtra-small\"\n    [icon]=\"'pi pi-times'\"\n    [text]=\"true\"\n    [severity]=\"'contrast'\"\n    (clicked)=\"hide()\"\n  ></i-button>\n  <div class=\"overlay-panel-content\">\n    <ng-content></ng-content>\n  </div>\n</div>\n}\n", styles: [".overlay-panel{background:var(--color-component-background-secondary);border:1px solid var(--surface-border);color:var(--color-text-primary);box-shadow:0 2px 10px #0003}.overlay-panel-top .overlay-panel-arrow{border-top-color:var(--color-component-background-secondary)}.overlay-panel-bottom .overlay-panel-arrow{border-bottom-color:var(--color-component-background-secondary)}.overlay-panel-left .overlay-panel-arrow{border-left-color:var(--color-component-background-secondary)}.overlay-panel-right .overlay-panel-arrow{border-right-color:var(--color-component-background-secondary)}.overlay-panel-left .overlay-panel-arrow:before{border-right-color:var(--surface-border)}.overlay-panel-left .overlay-panel-arrow:after{border-right-color:var(--color-component-background-secondary)}.overlay-panel-close{color:var(--color-text-primary)}.overlay-panel-close:hover{color:var(--color-primary)}.overlay-panel{position:fixed;border-radius:4px;padding:1rem;min-width:200px;max-width:600px;box-shadow:0 2px 12px #0000001a;transform-origin:center top}.overlay-panel.overlay-panel-top{transform-origin:center bottom}.overlay-panel.overlay-panel-bottom{transform-origin:center top}.overlay-panel.overlay-panel-left{transform-origin:right center}.overlay-panel.overlay-panel-right{transform-origin:left center}.overlay-panel .overlay-panel-content{position:relative;z-index:1;margin-top:18px}.overlay-panel .overlay-panel-close{position:absolute;top:10px;right:5px;z-index:2}\n"] }]
+                    ], template: "@if (render) {\n  <div\n    #container\n    class=\"overlay-panel\"\n    [class.overlay-panel-visible]=\"overlayVisible\"\n    (click)=\"onContainerClick()\"\n    (keydown.escape)=\"onEscapeKey()\"\n    [@animation]=\"visible ? 'open' : 'closed'\"\n    (@animation.start)=\"onAnimationStart($event)\"\n    (@animation.done)=\"onAnimationEnd($event)\"\n    role=\"dialog\"\n    [attr.aria-hidden]=\"!visible\"\n  >\n    <i-button\n      class=\"overlay-panel-close\"\n      size=\"xtra-small\"\n      [icon]=\"'pi pi-times'\"\n      [text]=\"true\"\n      [severity]=\"'contrast'\"\n      (clicked)=\"hide()\"\n    ></i-button>\n    <div class=\"overlay-panel-content\">\n      <ng-content></ng-content>\n    </div>\n  </div>\n}\n", styles: [".overlay-panel{background:var(--color-component-background-secondary);border:1px solid var(--surface-border);color:var(--color-text-primary);box-shadow:0 2px 10px #0003}.overlay-panel-top .overlay-panel-arrow{border-top-color:var(--color-component-background-secondary)}.overlay-panel-bottom .overlay-panel-arrow{border-bottom-color:var(--color-component-background-secondary)}.overlay-panel-left .overlay-panel-arrow{border-left-color:var(--color-component-background-secondary)}.overlay-panel-right .overlay-panel-arrow{border-right-color:var(--color-component-background-secondary)}.overlay-panel-left .overlay-panel-arrow:before{border-right-color:var(--surface-border)}.overlay-panel-left .overlay-panel-arrow:after{border-right-color:var(--color-component-background-secondary)}.overlay-panel-close{color:var(--color-text-primary)}.overlay-panel-close:hover{color:var(--color-primary)}.overlay-panel{position:fixed;border-radius:4px;padding:1rem;min-width:200px;max-width:600px;box-shadow:0 2px 12px #0000001a;transform-origin:center top}.overlay-panel.overlay-panel-top{transform-origin:center bottom}.overlay-panel.overlay-panel-bottom{transform-origin:center top}.overlay-panel.overlay-panel-left{transform-origin:right center}.overlay-panel.overlay-panel-right{transform-origin:left center}.overlay-panel .overlay-panel-content{position:relative;z-index:1;margin-top:18px}.overlay-panel .overlay-panel-close{position:absolute;top:10px;right:5px;z-index:2}\n"] }]
         }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i0.Renderer2 }, { type: i0.NgZone }], propDecorators: { dismissable: [{
                 type: Input
             }], appendTo: [{
@@ -5819,11 +5822,11 @@ class IPanel {
         this.onToggle.emit(this.collapsed);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: IPanel, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.12", type: IPanel, isStandalone: true, selector: "i-panel", inputs: { header: "header", collapsed: "collapsed", toggleable: "toggleable" }, outputs: { collapsedChange: "collapsedChange", onToggle: "onToggle" }, ngImport: i0, template: "<div\n  class=\"i-panel\"\n  [class.i-panel--collapsed]=\"collapsed\"\n  [class.i-panel--toggleable]=\"toggleable\"\n  [attr.id]=\"componentId\"\n>\n  <div class=\"i-panel-header-wrap\">\n    @if (toggleable) {\n    <button\n      class=\"i-panel-header\"\n      type=\"button\"\n      (click)=\"toggle()\"\n      [attr.aria-expanded]=\"!collapsed\"\n    >\n      <i\n        class=\"i-panel-toggle-icon pi\"\n        [class.pi-minus]=\"!collapsed\"\n        [class.pi-plus]=\"collapsed\"\n        aria-hidden=\"true\"\n      ></i>\n      <span class=\"i-panel-title\">{{ header }}</span>\n    </button>\n    } @if (!toggleable) {\n    <div class=\"i-panel-header\">\n      <i class=\"i-panel-toggle-icon\" aria-hidden=\"true\"></i>\n      <span class=\"i-panel-title\">{{ header }}</span>\n    </div>\n    }\n  </div>\n  <div\n    class=\"i-panel-content-wrapper\"\n    [class.i-panel-content-wrapper--collapsed]=\"collapsed\"\n  >\n    <div class=\"i-panel-content\">\n      <ng-content></ng-content>\n    </div>\n  </div>\n</div>\n", styles: [".i-panel{background:var(--surface-card);color:var(--color-text-primary);border:1px solid var(--surface-border)}.i-panel .i-panel-header{color:var(--color-text-secondary);background:var(--surface-card)}.i-panel .i-panel-header .i-panel-toggle-icon{color:var(--color-primary)}.i-panel .i-panel-header .i-panel-title{color:var(--color-text-secondary)}.i-panel.i-panel--toggleable .i-panel-header:hover{background:var(--surface-hover)}.i-panel .i-panel-content{color:var(--color-text-primary)}.i-panel{border-radius:8px;overflow:visible;position:relative;padding-top:14px;min-height:48px}.i-panel .i-panel-header-wrap{position:absolute;top:0;left:0;right:0;height:0;z-index:1}.i-panel .i-panel-header-wrap .i-panel-header{display:inline-flex;flex-direction:row;align-items:center;gap:8px;position:relative;top:0;transform:translateY(-50%);padding:4px 12px;margin-left:20px;background:var(--surface-card);-webkit-user-select:none;user-select:none;transition:background-color .2s ease}.i-panel .i-panel-header-wrap .i-panel-header.i-panel-header:where(button){border:none;background:var(--surface-card);cursor:pointer;padding:4px 12px;font-family:inherit;color:inherit}.i-panel .i-panel-header-wrap .i-panel-header .i-panel-toggle-icon{font-size:12px;font-weight:600;display:inline-block}.i-panel .i-panel-header-wrap .i-panel-header .i-panel-title{font-weight:500;font-size:1em;line-height:1;display:inline-block;white-space:nowrap}.i-panel .i-panel-content-wrapper{overflow:visible;transition:max-height .3s ease,opacity .2s ease;max-height:1000px;opacity:1}.i-panel .i-panel-content-wrapper.i-panel-content-wrapper--collapsed{max-height:0;opacity:0;overflow:hidden}.i-panel .i-panel-content{padding:16px}\n"] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.12", type: IPanel, isStandalone: true, selector: "i-panel", inputs: { header: "header", collapsed: "collapsed", toggleable: "toggleable" }, outputs: { collapsedChange: "collapsedChange", onToggle: "onToggle" }, ngImport: i0, template: "<div\n  class=\"i-panel\"\n  [class.i-panel--collapsed]=\"collapsed\"\n  [class.i-panel--toggleable]=\"toggleable\"\n  [attr.id]=\"componentId\"\n>\n  <div class=\"i-panel-header-wrap\">\n    @if (toggleable) {\n      <button\n        class=\"i-panel-header\"\n        type=\"button\"\n        (click)=\"toggle()\"\n        [attr.aria-expanded]=\"!collapsed\"\n      >\n        <i\n          class=\"i-panel-toggle-icon pi\"\n          [class.pi-minus]=\"!collapsed\"\n          [class.pi-plus]=\"collapsed\"\n          aria-hidden=\"true\"\n        ></i>\n        <span class=\"i-panel-title\">{{ header }}</span>\n      </button>\n    }\n    @if (!toggleable) {\n      <div class=\"i-panel-header\">\n        <i class=\"i-panel-toggle-icon\" aria-hidden=\"true\"></i>\n        <span class=\"i-panel-title\">{{ header }}</span>\n      </div>\n    }\n  </div>\n  <div\n    class=\"i-panel-content-wrapper\"\n    [class.i-panel-content-wrapper--collapsed]=\"collapsed\"\n  >\n    <div class=\"i-panel-content\">\n      <ng-content></ng-content>\n    </div>\n  </div>\n</div>\n", styles: [".i-panel{background:var(--surface-card);color:var(--color-text-primary);border:1px solid var(--surface-border)}.i-panel .i-panel-header{color:var(--color-text-secondary);background:var(--surface-card)}.i-panel .i-panel-header .i-panel-toggle-icon{color:var(--color-primary)}.i-panel .i-panel-header .i-panel-title{color:var(--color-text-secondary)}.i-panel.i-panel--toggleable .i-panel-header:hover{background:var(--surface-hover)}.i-panel .i-panel-content{color:var(--color-text-primary)}.i-panel{border-radius:8px;overflow:visible;position:relative;padding-top:14px;min-height:48px}.i-panel .i-panel-header-wrap{position:absolute;top:0;left:0;right:0;height:0;z-index:1}.i-panel .i-panel-header-wrap .i-panel-header{display:inline-flex;flex-direction:row;align-items:center;gap:8px;position:relative;top:0;transform:translateY(-50%);padding:4px 12px;margin-left:20px;background:var(--surface-card);-webkit-user-select:none;user-select:none;transition:background-color .2s ease}.i-panel .i-panel-header-wrap .i-panel-header.i-panel-header:where(button){border:none;background:var(--surface-card);cursor:pointer;padding:4px 12px;font-family:inherit;color:inherit}.i-panel .i-panel-header-wrap .i-panel-header .i-panel-toggle-icon{font-size:12px;font-weight:600;display:inline-block}.i-panel .i-panel-header-wrap .i-panel-header .i-panel-title{font-weight:500;font-size:1em;line-height:1;display:inline-block;white-space:nowrap}.i-panel .i-panel-content-wrapper{overflow:visible;transition:max-height .3s ease,opacity .2s ease;max-height:1000px;opacity:1}.i-panel .i-panel-content-wrapper.i-panel-content-wrapper--collapsed{max-height:0;opacity:0;overflow:hidden}.i-panel .i-panel-content{padding:16px}\n"] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: IPanel, decorators: [{
             type: Component,
-            args: [{ selector: 'i-panel', template: "<div\n  class=\"i-panel\"\n  [class.i-panel--collapsed]=\"collapsed\"\n  [class.i-panel--toggleable]=\"toggleable\"\n  [attr.id]=\"componentId\"\n>\n  <div class=\"i-panel-header-wrap\">\n    @if (toggleable) {\n    <button\n      class=\"i-panel-header\"\n      type=\"button\"\n      (click)=\"toggle()\"\n      [attr.aria-expanded]=\"!collapsed\"\n    >\n      <i\n        class=\"i-panel-toggle-icon pi\"\n        [class.pi-minus]=\"!collapsed\"\n        [class.pi-plus]=\"collapsed\"\n        aria-hidden=\"true\"\n      ></i>\n      <span class=\"i-panel-title\">{{ header }}</span>\n    </button>\n    } @if (!toggleable) {\n    <div class=\"i-panel-header\">\n      <i class=\"i-panel-toggle-icon\" aria-hidden=\"true\"></i>\n      <span class=\"i-panel-title\">{{ header }}</span>\n    </div>\n    }\n  </div>\n  <div\n    class=\"i-panel-content-wrapper\"\n    [class.i-panel-content-wrapper--collapsed]=\"collapsed\"\n  >\n    <div class=\"i-panel-content\">\n      <ng-content></ng-content>\n    </div>\n  </div>\n</div>\n", styles: [".i-panel{background:var(--surface-card);color:var(--color-text-primary);border:1px solid var(--surface-border)}.i-panel .i-panel-header{color:var(--color-text-secondary);background:var(--surface-card)}.i-panel .i-panel-header .i-panel-toggle-icon{color:var(--color-primary)}.i-panel .i-panel-header .i-panel-title{color:var(--color-text-secondary)}.i-panel.i-panel--toggleable .i-panel-header:hover{background:var(--surface-hover)}.i-panel .i-panel-content{color:var(--color-text-primary)}.i-panel{border-radius:8px;overflow:visible;position:relative;padding-top:14px;min-height:48px}.i-panel .i-panel-header-wrap{position:absolute;top:0;left:0;right:0;height:0;z-index:1}.i-panel .i-panel-header-wrap .i-panel-header{display:inline-flex;flex-direction:row;align-items:center;gap:8px;position:relative;top:0;transform:translateY(-50%);padding:4px 12px;margin-left:20px;background:var(--surface-card);-webkit-user-select:none;user-select:none;transition:background-color .2s ease}.i-panel .i-panel-header-wrap .i-panel-header.i-panel-header:where(button){border:none;background:var(--surface-card);cursor:pointer;padding:4px 12px;font-family:inherit;color:inherit}.i-panel .i-panel-header-wrap .i-panel-header .i-panel-toggle-icon{font-size:12px;font-weight:600;display:inline-block}.i-panel .i-panel-header-wrap .i-panel-header .i-panel-title{font-weight:500;font-size:1em;line-height:1;display:inline-block;white-space:nowrap}.i-panel .i-panel-content-wrapper{overflow:visible;transition:max-height .3s ease,opacity .2s ease;max-height:1000px;opacity:1}.i-panel .i-panel-content-wrapper.i-panel-content-wrapper--collapsed{max-height:0;opacity:0;overflow:hidden}.i-panel .i-panel-content{padding:16px}\n"] }]
+            args: [{ selector: 'i-panel', template: "<div\n  class=\"i-panel\"\n  [class.i-panel--collapsed]=\"collapsed\"\n  [class.i-panel--toggleable]=\"toggleable\"\n  [attr.id]=\"componentId\"\n>\n  <div class=\"i-panel-header-wrap\">\n    @if (toggleable) {\n      <button\n        class=\"i-panel-header\"\n        type=\"button\"\n        (click)=\"toggle()\"\n        [attr.aria-expanded]=\"!collapsed\"\n      >\n        <i\n          class=\"i-panel-toggle-icon pi\"\n          [class.pi-minus]=\"!collapsed\"\n          [class.pi-plus]=\"collapsed\"\n          aria-hidden=\"true\"\n        ></i>\n        <span class=\"i-panel-title\">{{ header }}</span>\n      </button>\n    }\n    @if (!toggleable) {\n      <div class=\"i-panel-header\">\n        <i class=\"i-panel-toggle-icon\" aria-hidden=\"true\"></i>\n        <span class=\"i-panel-title\">{{ header }}</span>\n      </div>\n    }\n  </div>\n  <div\n    class=\"i-panel-content-wrapper\"\n    [class.i-panel-content-wrapper--collapsed]=\"collapsed\"\n  >\n    <div class=\"i-panel-content\">\n      <ng-content></ng-content>\n    </div>\n  </div>\n</div>\n", styles: [".i-panel{background:var(--surface-card);color:var(--color-text-primary);border:1px solid var(--surface-border)}.i-panel .i-panel-header{color:var(--color-text-secondary);background:var(--surface-card)}.i-panel .i-panel-header .i-panel-toggle-icon{color:var(--color-primary)}.i-panel .i-panel-header .i-panel-title{color:var(--color-text-secondary)}.i-panel.i-panel--toggleable .i-panel-header:hover{background:var(--surface-hover)}.i-panel .i-panel-content{color:var(--color-text-primary)}.i-panel{border-radius:8px;overflow:visible;position:relative;padding-top:14px;min-height:48px}.i-panel .i-panel-header-wrap{position:absolute;top:0;left:0;right:0;height:0;z-index:1}.i-panel .i-panel-header-wrap .i-panel-header{display:inline-flex;flex-direction:row;align-items:center;gap:8px;position:relative;top:0;transform:translateY(-50%);padding:4px 12px;margin-left:20px;background:var(--surface-card);-webkit-user-select:none;user-select:none;transition:background-color .2s ease}.i-panel .i-panel-header-wrap .i-panel-header.i-panel-header:where(button){border:none;background:var(--surface-card);cursor:pointer;padding:4px 12px;font-family:inherit;color:inherit}.i-panel .i-panel-header-wrap .i-panel-header .i-panel-toggle-icon{font-size:12px;font-weight:600;display:inline-block}.i-panel .i-panel-header-wrap .i-panel-header .i-panel-title{font-weight:500;font-size:1em;line-height:1;display:inline-block;white-space:nowrap}.i-panel .i-panel-content-wrapper{overflow:visible;transition:max-height .3s ease,opacity .2s ease;max-height:1000px;opacity:1}.i-panel .i-panel-content-wrapper.i-panel-content-wrapper--collapsed{max-height:0;opacity:0;overflow:hidden}.i-panel .i-panel-content{padding:16px}\n"] }]
         }], propDecorators: { header: [{
                 type: Input
             }], collapsed: [{
@@ -6244,7 +6247,7 @@ class ISelect {
                 useExisting: forwardRef(() => ISelect),
                 multi: true,
             },
-        ], viewQueries: [{ propertyName: "inputTextRef", first: true, predicate: ["inputText"], descendants: true }, { propertyName: "dropdownRef", first: true, predicate: ["dropdown"], descendants: true }, { propertyName: "searchInputRef", first: true, predicate: ["searchInput"], descendants: true }], ngImport: i0, template: "<div class=\"i-select-wrapper\" [class.i-select--fluid]=\"fluid\" #dropdown>\n  <!-- Reuse the input-text component for consistent styling and form integration -->\n  <div class=\"i-select-input-container\" (click)=\"toggleDropdown()\">\n    <i-input-text\n      #inputText\n      [label]=\"label\"\n      [useFloatLabel]=\"useFloatLabel\"\n      [id]=\"id\"\n      [fluid]=\"fluid\"\n      [errorMessages]=\"errorMessages\"\n      [(ngModel)]=\"inputValue\"\n      [type]=\"'text'\"\n      [externalInvalid]=\"showErrors\"\n      [externalErrorMessage]=\"showErrors ? getErrorMessage() || '' : ''\"\n      [readonly]=\"readonly\"\n      >\n      <!-- Icons overlay on the input -->\n      <div class=\"i-select-icons\">\n        @if (showClear && value !== null && value !== undefined) {\n          <i\n            class=\"pi pi-times i-select-clear\"\n            (click)=\"clearSelection(); $event.stopPropagation()\"\n          ></i>\n        }\n        <i\n          class=\"pi pi-chevron-down i-multi-select-arrow\"\n          [class.flipped]=\"isOpen\"\n        ></i>\n      </div>\n    </i-input-text>\n  </div>\n\n  <!-- Dropdown overlay -->\n  @if (isOpen) {\n    <div class=\"i-select-dropdown\">\n      @if (filter) {\n        <div class=\"i-select-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-select-options\">\n        @for (option of filteredOptions(); track option) {\n          <div\n            class=\"i-select-option\"\n            [class.selected]=\"isOptionSelected(option)\"\n            (click)=\"selectOption(option)\"\n            >\n            {{ getOptionLabel(option) }}\n          </div>\n        }\n\n        @if (filteredOptions().length === 0) {\n          <div class=\"i-select-no-options\">No options found</div>\n        }\n      </div>\n    </div>\n  }\n</div>\n", styles: [".i-select-trigger{color:var(--color-text-primary);border:1px solid var(--surface-border);background:var(--surface-ground)}.i-select-trigger:focus,.i-select-trigger.open{outline:none;border-color:var(--color-primary);box-shadow:0 2px 10px #0003}.i-select-trigger.disabled{background:var(--color-disabled-background);border-color:var(--color-disabled-border);color:var(--color-text-disabled)}.i-select-dropdown{background:var(--color-component-background);border:1px solid var(--surface-border)}.i-select-dropdown .i-select-filter .i-select-search{border:1px solid var(--surface-border);background:var(--surface-ground);color:var(--color-text-primary)}.i-select-dropdown .i-select-filter .i-select-search:focus{border-color:var(--color-primary);box-shadow:0 2px 10px #0003}.i-select-dropdown .i-select-options{background:transparent}.i-select-dropdown .i-select-options .i-select-option{color:var(--color-text-primary)}.i-select-dropdown .i-select-options .i-select-option:hover{background-color:var(--surface-hover)}.i-select-dropdown .i-select-options .i-select-option.selected{background-color:var(--surface-hover);color:var(--color-primary)}.i-select-dropdown .i-select-options .i-select-no-options{color:var(--color-text-secondary)}.invalid .i-select-trigger{border-color:var(--color-danger)}.invalid .i-label{color:var(--color-danger)}.i-select-wrapper{position:relative;display:block}.i-select-wrapper.i-select--fluid{width:100%}.i-select-wrapper .i-select-input-container{position:relative;cursor:pointer}.i-select-wrapper .i-select-input-container .i-input-text .i-input.readonly{cursor:pointer}.i-select-wrapper .i-select-input-container .i-select-icons{position:absolute;top:50%;right:10px;display:flex;align-items:center;gap:8px;pointer-events:none;transform:translateY(-50%)}.i-select-wrapper .i-select-input-container .i-select-icons .i-select-clear{font-size:12px;opacity:.6;cursor:pointer;pointer-events:auto;transition:opacity .15s ease}.i-select-wrapper .i-select-input-container .i-select-icons .i-select-clear:hover{opacity:1}.i-select-wrapper .i-select-input-container .i-select-icons .i-select-arrow{font-size:12px;opacity:.6;transition:transform .15s ease}.i-select-wrapper .i-select-input-container .i-select-icons .i-select-arrow.flipped{transform:rotate(180deg)}.i-select-wrapper .i-select-dropdown{position:absolute;top:100%;left:0;right:0;z-index:1000;margin-top:4px;margin-bottom:8px;border-radius:4px;box-shadow:0 4px 12px #00000026;overflow:visible}.i-select-wrapper .i-select-dropdown .i-select-filter{padding:8px}.i-select-wrapper .i-select-dropdown .i-select-filter .i-select-search{width:100%;padding:8px;border:1px solid;border-radius:4px;font-size:1em;outline:none}.i-select-wrapper .i-select-dropdown .i-select-options{max-height:min(160px,100vh - 150px);padding-right:2px;overflow-x:hidden;overflow-y:auto;border-radius:0 0 4px 4px}.i-select-wrapper .i-select-dropdown .i-select-options::-webkit-scrollbar-track{background:var(--scrollbar-track, transparent);border-radius:var(--scrollbar-radius, 3px)}.i-select-wrapper .i-select-dropdown .i-select-options::-webkit-scrollbar-thumb{background:#0003;border-radius:var(--scrollbar-radius, 3px);transition:background .2s ease}.i-select-wrapper .i-select-dropdown .i-select-options::-webkit-scrollbar-thumb:hover{background:#00000059}.i-select-wrapper .i-select-dropdown .i-select-options::-webkit-scrollbar-thumb:active{background:#00000080}.i-select-wrapper .i-select-dropdown .i-select-options::-webkit-scrollbar-corner{background:transparent}.i-select-wrapper .i-select-dropdown .i-select-options{scrollbar-width:thin;scrollbar-color:rgba(0,0,0,.2) transparent;scroll-behavior:smooth}.i-select-wrapper .i-select-dropdown .i-select-options::-webkit-scrollbar-thumb{background:var(--scrollbar-thumb, var(--color-text-secondary))}.i-select-wrapper .i-select-dropdown .i-select-options{scrollbar-color:var(--scrollbar-thumb, var(--color-text-secondary)) var(--scrollbar-track, transparent)}.i-select-wrapper .i-select-dropdown .i-select-options::-webkit-scrollbar{width:var(--scrollbar-size, 6px);height:var(--scrollbar-size, 6px)}.i-select-wrapper .i-select-dropdown .i-select-options::-webkit-scrollbar-track{background:var(--scrollbar-track-dropdown, rgba(0, 0, 0, .05));border-radius:var(--scrollbar-radius, 3px);margin:2px 0}.i-select-wrapper .i-select-dropdown .i-select-options::-webkit-scrollbar-thumb{border-radius:var(--scrollbar-radius, 3px);min-height:20px;background:var(--scrollbar-thumb, var(--color-text-secondary))}.i-select-wrapper .i-select-dropdown .i-select-options::-webkit-scrollbar-thumb:hover{background:var(--scrollbar-thumb-hover, var(--color-text-primary))}.i-select-wrapper .i-select-dropdown .i-select-options::-webkit-scrollbar-thumb:active{background:var(--scrollbar-thumb-active, var(--color-primary))}.i-select-wrapper .i-select-dropdown .i-select-options{scrollbar-width:thin;scrollbar-color:var(--scrollbar-thumb, var(--color-text-secondary)) var(--scrollbar-track-dropdown, rgba(0, 0, 0, .05))}.i-select-wrapper .i-select-dropdown .i-select-options .i-select-option{padding:12px;font-size:1em;cursor:pointer;transition:background-color .15s ease}.i-select-wrapper .i-select-dropdown .i-select-options .i-select-option.selected{font-weight:500}.i-select-wrapper .i-select-dropdown .i-select-options .i-select-no-options{padding:12px;font-style:italic;text-align:center;opacity:.6}\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: IInputText, selector: "i-input-text", inputs: ["label", "type", "id", "fluid", "forceFloated", "hideText", "useFloatLabel", "placeholder", "externalInvalid", "externalErrorMessage", "backgroundStyle", "icon", "readonly", "disabled", "errorMessages"] }] });
+        ], viewQueries: [{ propertyName: "inputTextRef", first: true, predicate: ["inputText"], descendants: true }, { propertyName: "dropdownRef", first: true, predicate: ["dropdown"], descendants: true }, { propertyName: "searchInputRef", first: true, predicate: ["searchInput"], descendants: true }], ngImport: i0, template: "<div class=\"i-select-wrapper\" [class.i-select--fluid]=\"fluid\" #dropdown>\n  <!-- Reuse the input-text component for consistent styling and form integration -->\n  <div class=\"i-select-input-container\" (click)=\"toggleDropdown()\">\n    <i-input-text\n      #inputText\n      [label]=\"label\"\n      [useFloatLabel]=\"useFloatLabel\"\n      [id]=\"id\"\n      [fluid]=\"fluid\"\n      [errorMessages]=\"errorMessages\"\n      [(ngModel)]=\"inputValue\"\n      [type]=\"'text'\"\n      [externalInvalid]=\"showErrors\"\n      [externalErrorMessage]=\"showErrors ? getErrorMessage() || '' : ''\"\n      [readonly]=\"readonly\"\n    >\n      <!-- Icons overlay on the input -->\n      <div class=\"i-select-icons\">\n        @if (showClear && value !== null && value !== undefined) {\n          <i\n            class=\"pi pi-times i-select-clear\"\n            (click)=\"clearSelection(); $event.stopPropagation()\"\n          ></i>\n        }\n        <i\n          class=\"pi pi-chevron-down i-multi-select-arrow\"\n          [class.flipped]=\"isOpen\"\n        ></i>\n      </div>\n    </i-input-text>\n  </div>\n\n  <!-- Dropdown overlay -->\n  @if (isOpen) {\n    <div class=\"i-select-dropdown\">\n      @if (filter) {\n        <div class=\"i-select-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-select-options\">\n        @for (option of filteredOptions(); track option) {\n          <div\n            class=\"i-select-option\"\n            [class.selected]=\"isOptionSelected(option)\"\n            (click)=\"selectOption(option)\"\n          >\n            {{ getOptionLabel(option) }}\n          </div>\n        }\n\n        @if (filteredOptions().length === 0) {\n          <div class=\"i-select-no-options\">No options found</div>\n        }\n      </div>\n    </div>\n  }\n</div>\n", styles: [".i-select-trigger{color:var(--color-text-primary);border:1px solid var(--surface-border);background:var(--surface-ground)}.i-select-trigger:focus,.i-select-trigger.open{outline:none;border-color:var(--color-primary);box-shadow:0 2px 10px #0003}.i-select-trigger.disabled{background:var(--color-disabled-background);border-color:var(--color-disabled-border);color:var(--color-text-disabled)}.i-select-dropdown{background:var(--color-component-background);border:1px solid var(--surface-border)}.i-select-dropdown .i-select-filter .i-select-search{border:1px solid var(--surface-border);background:var(--surface-ground);color:var(--color-text-primary)}.i-select-dropdown .i-select-filter .i-select-search:focus{border-color:var(--color-primary);box-shadow:0 2px 10px #0003}.i-select-dropdown .i-select-options{background:transparent}.i-select-dropdown .i-select-options .i-select-option{color:var(--color-text-primary)}.i-select-dropdown .i-select-options .i-select-option:hover{background-color:var(--surface-hover)}.i-select-dropdown .i-select-options .i-select-option.selected{background-color:var(--surface-hover);color:var(--color-primary)}.i-select-dropdown .i-select-options .i-select-no-options{color:var(--color-text-secondary)}.invalid .i-select-trigger{border-color:var(--color-danger)}.invalid .i-label{color:var(--color-danger)}.i-select-wrapper{position:relative;display:block}.i-select-wrapper.i-select--fluid{width:100%}.i-select-wrapper .i-select-input-container{position:relative;cursor:pointer}.i-select-wrapper .i-select-input-container .i-input-text .i-input.readonly{cursor:pointer}.i-select-wrapper .i-select-input-container .i-select-icons{position:absolute;top:50%;right:10px;display:flex;align-items:center;gap:8px;pointer-events:none;transform:translateY(-50%)}.i-select-wrapper .i-select-input-container .i-select-icons .i-select-clear{font-size:12px;opacity:.6;cursor:pointer;pointer-events:auto;transition:opacity .15s ease}.i-select-wrapper .i-select-input-container .i-select-icons .i-select-clear:hover{opacity:1}.i-select-wrapper .i-select-input-container .i-select-icons .i-select-arrow{font-size:12px;opacity:.6;transition:transform .15s ease}.i-select-wrapper .i-select-input-container .i-select-icons .i-select-arrow.flipped{transform:rotate(180deg)}.i-select-wrapper .i-select-dropdown{position:absolute;top:100%;left:0;right:0;z-index:1000;margin-top:4px;margin-bottom:8px;border-radius:4px;box-shadow:0 4px 12px #00000026;overflow:visible}.i-select-wrapper .i-select-dropdown .i-select-filter{padding:8px}.i-select-wrapper .i-select-dropdown .i-select-filter .i-select-search{width:100%;padding:8px;border:1px solid;border-radius:4px;font-size:1em;outline:none}.i-select-wrapper .i-select-dropdown .i-select-options{max-height:min(160px,100vh - 150px);padding-right:2px;overflow-x:hidden;overflow-y:auto;border-radius:0 0 4px 4px}.i-select-wrapper .i-select-dropdown .i-select-options::-webkit-scrollbar-track{background:var(--scrollbar-track, transparent);border-radius:var(--scrollbar-radius, 3px)}.i-select-wrapper .i-select-dropdown .i-select-options::-webkit-scrollbar-thumb{background:#0003;border-radius:var(--scrollbar-radius, 3px);transition:background .2s ease}.i-select-wrapper .i-select-dropdown .i-select-options::-webkit-scrollbar-thumb:hover{background:#00000059}.i-select-wrapper .i-select-dropdown .i-select-options::-webkit-scrollbar-thumb:active{background:#00000080}.i-select-wrapper .i-select-dropdown .i-select-options::-webkit-scrollbar-corner{background:transparent}.i-select-wrapper .i-select-dropdown .i-select-options{scrollbar-width:thin;scrollbar-color:rgba(0,0,0,.2) transparent;scroll-behavior:smooth}.i-select-wrapper .i-select-dropdown .i-select-options::-webkit-scrollbar-thumb{background:var(--scrollbar-thumb, var(--color-text-secondary))}.i-select-wrapper .i-select-dropdown .i-select-options{scrollbar-color:var(--scrollbar-thumb, var(--color-text-secondary)) var(--scrollbar-track, transparent)}.i-select-wrapper .i-select-dropdown .i-select-options::-webkit-scrollbar{width:var(--scrollbar-size, 6px);height:var(--scrollbar-size, 6px)}.i-select-wrapper .i-select-dropdown .i-select-options::-webkit-scrollbar-track{background:var(--scrollbar-track-dropdown, rgba(0, 0, 0, .05));border-radius:var(--scrollbar-radius, 3px);margin:2px 0}.i-select-wrapper .i-select-dropdown .i-select-options::-webkit-scrollbar-thumb{border-radius:var(--scrollbar-radius, 3px);min-height:20px;background:var(--scrollbar-thumb, var(--color-text-secondary))}.i-select-wrapper .i-select-dropdown .i-select-options::-webkit-scrollbar-thumb:hover{background:var(--scrollbar-thumb-hover, var(--color-text-primary))}.i-select-wrapper .i-select-dropdown .i-select-options::-webkit-scrollbar-thumb:active{background:var(--scrollbar-thumb-active, var(--color-primary))}.i-select-wrapper .i-select-dropdown .i-select-options{scrollbar-width:thin;scrollbar-color:var(--scrollbar-thumb, var(--color-text-secondary)) var(--scrollbar-track-dropdown, rgba(0, 0, 0, .05))}.i-select-wrapper .i-select-dropdown .i-select-options .i-select-option{padding:12px;font-size:1em;cursor:pointer;transition:background-color .15s ease}.i-select-wrapper .i-select-dropdown .i-select-options .i-select-option.selected{font-weight:500}.i-select-wrapper .i-select-dropdown .i-select-options .i-select-no-options{padding:12px;font-style:italic;text-align:center;opacity:.6}\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: IInputText, selector: "i-input-text", inputs: ["label", "type", "id", "fluid", "forceFloated", "hideText", "useFloatLabel", "placeholder", "externalInvalid", "externalErrorMessage", "backgroundStyle", "icon", "readonly", "disabled", "errorMessages"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: ISelect, decorators: [{
             type: Component,
@@ -6254,7 +6257,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.12", ngImpo
                             useExisting: forwardRef(() => ISelect),
                             multi: true,
                         },
-                    ], template: "<div class=\"i-select-wrapper\" [class.i-select--fluid]=\"fluid\" #dropdown>\n  <!-- Reuse the input-text component for consistent styling and form integration -->\n  <div class=\"i-select-input-container\" (click)=\"toggleDropdown()\">\n    <i-input-text\n      #inputText\n      [label]=\"label\"\n      [useFloatLabel]=\"useFloatLabel\"\n      [id]=\"id\"\n      [fluid]=\"fluid\"\n      [errorMessages]=\"errorMessages\"\n      [(ngModel)]=\"inputValue\"\n      [type]=\"'text'\"\n      [externalInvalid]=\"showErrors\"\n      [externalErrorMessage]=\"showErrors ? getErrorMessage() || '' : ''\"\n      [readonly]=\"readonly\"\n      >\n      <!-- Icons overlay on the input -->\n      <div class=\"i-select-icons\">\n        @if (showClear && value !== null && value !== undefined) {\n          <i\n            class=\"pi pi-times i-select-clear\"\n            (click)=\"clearSelection(); $event.stopPropagation()\"\n          ></i>\n        }\n        <i\n          class=\"pi pi-chevron-down i-multi-select-arrow\"\n          [class.flipped]=\"isOpen\"\n        ></i>\n      </div>\n    </i-input-text>\n  </div>\n\n  <!-- Dropdown overlay -->\n  @if (isOpen) {\n    <div class=\"i-select-dropdown\">\n      @if (filter) {\n        <div class=\"i-select-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-select-options\">\n        @for (option of filteredOptions(); track option) {\n          <div\n            class=\"i-select-option\"\n            [class.selected]=\"isOptionSelected(option)\"\n            (click)=\"selectOption(option)\"\n            >\n            {{ getOptionLabel(option) }}\n          </div>\n        }\n\n        @if (filteredOptions().length === 0) {\n          <div class=\"i-select-no-options\">No options found</div>\n        }\n      </div>\n    </div>\n  }\n</div>\n", styles: [".i-select-trigger{color:var(--color-text-primary);border:1px solid var(--surface-border);background:var(--surface-ground)}.i-select-trigger:focus,.i-select-trigger.open{outline:none;border-color:var(--color-primary);box-shadow:0 2px 10px #0003}.i-select-trigger.disabled{background:var(--color-disabled-background);border-color:var(--color-disabled-border);color:var(--color-text-disabled)}.i-select-dropdown{background:var(--color-component-background);border:1px solid var(--surface-border)}.i-select-dropdown .i-select-filter .i-select-search{border:1px solid var(--surface-border);background:var(--surface-ground);color:var(--color-text-primary)}.i-select-dropdown .i-select-filter .i-select-search:focus{border-color:var(--color-primary);box-shadow:0 2px 10px #0003}.i-select-dropdown .i-select-options{background:transparent}.i-select-dropdown .i-select-options .i-select-option{color:var(--color-text-primary)}.i-select-dropdown .i-select-options .i-select-option:hover{background-color:var(--surface-hover)}.i-select-dropdown .i-select-options .i-select-option.selected{background-color:var(--surface-hover);color:var(--color-primary)}.i-select-dropdown .i-select-options .i-select-no-options{color:var(--color-text-secondary)}.invalid .i-select-trigger{border-color:var(--color-danger)}.invalid .i-label{color:var(--color-danger)}.i-select-wrapper{position:relative;display:block}.i-select-wrapper.i-select--fluid{width:100%}.i-select-wrapper .i-select-input-container{position:relative;cursor:pointer}.i-select-wrapper .i-select-input-container .i-input-text .i-input.readonly{cursor:pointer}.i-select-wrapper .i-select-input-container .i-select-icons{position:absolute;top:50%;right:10px;display:flex;align-items:center;gap:8px;pointer-events:none;transform:translateY(-50%)}.i-select-wrapper .i-select-input-container .i-select-icons .i-select-clear{font-size:12px;opacity:.6;cursor:pointer;pointer-events:auto;transition:opacity .15s ease}.i-select-wrapper .i-select-input-container .i-select-icons .i-select-clear:hover{opacity:1}.i-select-wrapper .i-select-input-container .i-select-icons .i-select-arrow{font-size:12px;opacity:.6;transition:transform .15s ease}.i-select-wrapper .i-select-input-container .i-select-icons .i-select-arrow.flipped{transform:rotate(180deg)}.i-select-wrapper .i-select-dropdown{position:absolute;top:100%;left:0;right:0;z-index:1000;margin-top:4px;margin-bottom:8px;border-radius:4px;box-shadow:0 4px 12px #00000026;overflow:visible}.i-select-wrapper .i-select-dropdown .i-select-filter{padding:8px}.i-select-wrapper .i-select-dropdown .i-select-filter .i-select-search{width:100%;padding:8px;border:1px solid;border-radius:4px;font-size:1em;outline:none}.i-select-wrapper .i-select-dropdown .i-select-options{max-height:min(160px,100vh - 150px);padding-right:2px;overflow-x:hidden;overflow-y:auto;border-radius:0 0 4px 4px}.i-select-wrapper .i-select-dropdown .i-select-options::-webkit-scrollbar-track{background:var(--scrollbar-track, transparent);border-radius:var(--scrollbar-radius, 3px)}.i-select-wrapper .i-select-dropdown .i-select-options::-webkit-scrollbar-thumb{background:#0003;border-radius:var(--scrollbar-radius, 3px);transition:background .2s ease}.i-select-wrapper .i-select-dropdown .i-select-options::-webkit-scrollbar-thumb:hover{background:#00000059}.i-select-wrapper .i-select-dropdown .i-select-options::-webkit-scrollbar-thumb:active{background:#00000080}.i-select-wrapper .i-select-dropdown .i-select-options::-webkit-scrollbar-corner{background:transparent}.i-select-wrapper .i-select-dropdown .i-select-options{scrollbar-width:thin;scrollbar-color:rgba(0,0,0,.2) transparent;scroll-behavior:smooth}.i-select-wrapper .i-select-dropdown .i-select-options::-webkit-scrollbar-thumb{background:var(--scrollbar-thumb, var(--color-text-secondary))}.i-select-wrapper .i-select-dropdown .i-select-options{scrollbar-color:var(--scrollbar-thumb, var(--color-text-secondary)) var(--scrollbar-track, transparent)}.i-select-wrapper .i-select-dropdown .i-select-options::-webkit-scrollbar{width:var(--scrollbar-size, 6px);height:var(--scrollbar-size, 6px)}.i-select-wrapper .i-select-dropdown .i-select-options::-webkit-scrollbar-track{background:var(--scrollbar-track-dropdown, rgba(0, 0, 0, .05));border-radius:var(--scrollbar-radius, 3px);margin:2px 0}.i-select-wrapper .i-select-dropdown .i-select-options::-webkit-scrollbar-thumb{border-radius:var(--scrollbar-radius, 3px);min-height:20px;background:var(--scrollbar-thumb, var(--color-text-secondary))}.i-select-wrapper .i-select-dropdown .i-select-options::-webkit-scrollbar-thumb:hover{background:var(--scrollbar-thumb-hover, var(--color-text-primary))}.i-select-wrapper .i-select-dropdown .i-select-options::-webkit-scrollbar-thumb:active{background:var(--scrollbar-thumb-active, var(--color-primary))}.i-select-wrapper .i-select-dropdown .i-select-options{scrollbar-width:thin;scrollbar-color:var(--scrollbar-thumb, var(--color-text-secondary)) var(--scrollbar-track-dropdown, rgba(0, 0, 0, .05))}.i-select-wrapper .i-select-dropdown .i-select-options .i-select-option{padding:12px;font-size:1em;cursor:pointer;transition:background-color .15s ease}.i-select-wrapper .i-select-dropdown .i-select-options .i-select-option.selected{font-weight:500}.i-select-wrapper .i-select-dropdown .i-select-options .i-select-no-options{padding:12px;font-style:italic;text-align:center;opacity:.6}\n"] }]
+                    ], template: "<div class=\"i-select-wrapper\" [class.i-select--fluid]=\"fluid\" #dropdown>\n  <!-- Reuse the input-text component for consistent styling and form integration -->\n  <div class=\"i-select-input-container\" (click)=\"toggleDropdown()\">\n    <i-input-text\n      #inputText\n      [label]=\"label\"\n      [useFloatLabel]=\"useFloatLabel\"\n      [id]=\"id\"\n      [fluid]=\"fluid\"\n      [errorMessages]=\"errorMessages\"\n      [(ngModel)]=\"inputValue\"\n      [type]=\"'text'\"\n      [externalInvalid]=\"showErrors\"\n      [externalErrorMessage]=\"showErrors ? getErrorMessage() || '' : ''\"\n      [readonly]=\"readonly\"\n    >\n      <!-- Icons overlay on the input -->\n      <div class=\"i-select-icons\">\n        @if (showClear && value !== null && value !== undefined) {\n          <i\n            class=\"pi pi-times i-select-clear\"\n            (click)=\"clearSelection(); $event.stopPropagation()\"\n          ></i>\n        }\n        <i\n          class=\"pi pi-chevron-down i-multi-select-arrow\"\n          [class.flipped]=\"isOpen\"\n        ></i>\n      </div>\n    </i-input-text>\n  </div>\n\n  <!-- Dropdown overlay -->\n  @if (isOpen) {\n    <div class=\"i-select-dropdown\">\n      @if (filter) {\n        <div class=\"i-select-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-select-options\">\n        @for (option of filteredOptions(); track option) {\n          <div\n            class=\"i-select-option\"\n            [class.selected]=\"isOptionSelected(option)\"\n            (click)=\"selectOption(option)\"\n          >\n            {{ getOptionLabel(option) }}\n          </div>\n        }\n\n        @if (filteredOptions().length === 0) {\n          <div class=\"i-select-no-options\">No options found</div>\n        }\n      </div>\n    </div>\n  }\n</div>\n", styles: [".i-select-trigger{color:var(--color-text-primary);border:1px solid var(--surface-border);background:var(--surface-ground)}.i-select-trigger:focus,.i-select-trigger.open{outline:none;border-color:var(--color-primary);box-shadow:0 2px 10px #0003}.i-select-trigger.disabled{background:var(--color-disabled-background);border-color:var(--color-disabled-border);color:var(--color-text-disabled)}.i-select-dropdown{background:var(--color-component-background);border:1px solid var(--surface-border)}.i-select-dropdown .i-select-filter .i-select-search{border:1px solid var(--surface-border);background:var(--surface-ground);color:var(--color-text-primary)}.i-select-dropdown .i-select-filter .i-select-search:focus{border-color:var(--color-primary);box-shadow:0 2px 10px #0003}.i-select-dropdown .i-select-options{background:transparent}.i-select-dropdown .i-select-options .i-select-option{color:var(--color-text-primary)}.i-select-dropdown .i-select-options .i-select-option:hover{background-color:var(--surface-hover)}.i-select-dropdown .i-select-options .i-select-option.selected{background-color:var(--surface-hover);color:var(--color-primary)}.i-select-dropdown .i-select-options .i-select-no-options{color:var(--color-text-secondary)}.invalid .i-select-trigger{border-color:var(--color-danger)}.invalid .i-label{color:var(--color-danger)}.i-select-wrapper{position:relative;display:block}.i-select-wrapper.i-select--fluid{width:100%}.i-select-wrapper .i-select-input-container{position:relative;cursor:pointer}.i-select-wrapper .i-select-input-container .i-input-text .i-input.readonly{cursor:pointer}.i-select-wrapper .i-select-input-container .i-select-icons{position:absolute;top:50%;right:10px;display:flex;align-items:center;gap:8px;pointer-events:none;transform:translateY(-50%)}.i-select-wrapper .i-select-input-container .i-select-icons .i-select-clear{font-size:12px;opacity:.6;cursor:pointer;pointer-events:auto;transition:opacity .15s ease}.i-select-wrapper .i-select-input-container .i-select-icons .i-select-clear:hover{opacity:1}.i-select-wrapper .i-select-input-container .i-select-icons .i-select-arrow{font-size:12px;opacity:.6;transition:transform .15s ease}.i-select-wrapper .i-select-input-container .i-select-icons .i-select-arrow.flipped{transform:rotate(180deg)}.i-select-wrapper .i-select-dropdown{position:absolute;top:100%;left:0;right:0;z-index:1000;margin-top:4px;margin-bottom:8px;border-radius:4px;box-shadow:0 4px 12px #00000026;overflow:visible}.i-select-wrapper .i-select-dropdown .i-select-filter{padding:8px}.i-select-wrapper .i-select-dropdown .i-select-filter .i-select-search{width:100%;padding:8px;border:1px solid;border-radius:4px;font-size:1em;outline:none}.i-select-wrapper .i-select-dropdown .i-select-options{max-height:min(160px,100vh - 150px);padding-right:2px;overflow-x:hidden;overflow-y:auto;border-radius:0 0 4px 4px}.i-select-wrapper .i-select-dropdown .i-select-options::-webkit-scrollbar-track{background:var(--scrollbar-track, transparent);border-radius:var(--scrollbar-radius, 3px)}.i-select-wrapper .i-select-dropdown .i-select-options::-webkit-scrollbar-thumb{background:#0003;border-radius:var(--scrollbar-radius, 3px);transition:background .2s ease}.i-select-wrapper .i-select-dropdown .i-select-options::-webkit-scrollbar-thumb:hover{background:#00000059}.i-select-wrapper .i-select-dropdown .i-select-options::-webkit-scrollbar-thumb:active{background:#00000080}.i-select-wrapper .i-select-dropdown .i-select-options::-webkit-scrollbar-corner{background:transparent}.i-select-wrapper .i-select-dropdown .i-select-options{scrollbar-width:thin;scrollbar-color:rgba(0,0,0,.2) transparent;scroll-behavior:smooth}.i-select-wrapper .i-select-dropdown .i-select-options::-webkit-scrollbar-thumb{background:var(--scrollbar-thumb, var(--color-text-secondary))}.i-select-wrapper .i-select-dropdown .i-select-options{scrollbar-color:var(--scrollbar-thumb, var(--color-text-secondary)) var(--scrollbar-track, transparent)}.i-select-wrapper .i-select-dropdown .i-select-options::-webkit-scrollbar{width:var(--scrollbar-size, 6px);height:var(--scrollbar-size, 6px)}.i-select-wrapper .i-select-dropdown .i-select-options::-webkit-scrollbar-track{background:var(--scrollbar-track-dropdown, rgba(0, 0, 0, .05));border-radius:var(--scrollbar-radius, 3px);margin:2px 0}.i-select-wrapper .i-select-dropdown .i-select-options::-webkit-scrollbar-thumb{border-radius:var(--scrollbar-radius, 3px);min-height:20px;background:var(--scrollbar-thumb, var(--color-text-secondary))}.i-select-wrapper .i-select-dropdown .i-select-options::-webkit-scrollbar-thumb:hover{background:var(--scrollbar-thumb-hover, var(--color-text-primary))}.i-select-wrapper .i-select-dropdown .i-select-options::-webkit-scrollbar-thumb:active{background:var(--scrollbar-thumb-active, var(--color-primary))}.i-select-wrapper .i-select-dropdown .i-select-options{scrollbar-width:thin;scrollbar-color:var(--scrollbar-thumb, var(--color-text-secondary)) var(--scrollbar-track-dropdown, rgba(0, 0, 0, .05))}.i-select-wrapper .i-select-dropdown .i-select-options .i-select-option{padding:12px;font-size:1em;cursor:pointer;transition:background-color .15s ease}.i-select-wrapper .i-select-dropdown .i-select-options .i-select-option.selected{font-weight:500}.i-select-wrapper .i-select-dropdown .i-select-options .i-select-no-options{padding:12px;font-style:italic;text-align:center;opacity:.6}\n"] }]
         }], ctorParameters: () => [{ type: i0.Injector }], propDecorators: { label: [{
                 type: Input
             }], options: [{ type: i0.Input, args: [{ isSignal: true, alias: "options", required: false }] }], optionLabel: [{
@@ -6296,6 +6299,189 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.12", ngImpo
                 args: ['document:click', ['$event']]
             }] } });
 
+/** A single step rendered inside an {@link IStepper}. */
+class IStep {
+    /** Primary text shown in the step navigation. */
+    label;
+    /** Optional supporting text shown below the label. */
+    description;
+    /** Optional PrimeIcons class used instead of the step number. */
+    icon;
+    /** Marks the step as successfully completed. */
+    completed = false;
+    /** Marks the step as optional. */
+    optional = false;
+    /** Prevents the step from being selected. */
+    disabled = false;
+    /** Projected step content. */
+    contentTemplate;
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: IStep, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.12", type: IStep, isStandalone: true, selector: "i-step", inputs: { label: "label", description: "description", icon: "icon", completed: "completed", optional: "optional", disabled: "disabled" }, viewQueries: [{ propertyName: "contentTemplate", first: true, predicate: ["contentTemplate"], descendants: true, static: true }], ngImport: i0, template: `
+    <ng-template #contentTemplate>
+      <ng-content></ng-content>
+    </ng-template>
+  `, isInline: true });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: IStep, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'i-step',
+                    standalone: true,
+                    template: `
+    <ng-template #contentTemplate>
+      <ng-content></ng-content>
+    </ng-template>
+  `,
+                }]
+        }], propDecorators: { label: [{
+                type: Input,
+                args: [{ required: true }]
+            }], description: [{
+                type: Input
+            }], icon: [{
+                type: Input
+            }], completed: [{
+                type: Input
+            }], optional: [{
+                type: Input
+            }], disabled: [{
+                type: Input
+            }], contentTemplate: [{
+                type: ViewChild,
+                args: ['contentTemplate', { static: true }]
+            }] } });
+
+/**
+ * Guided, stateful navigation for multi-step workflows.
+ *
+ * @example
+ * ```html
+ * <i-stepper [(activeIndex)]="activeStep" [linear]="true">
+ *   <i-step label="Details" description="Name and access" [completed]="detailsValid">
+ *     Details form
+ *   </i-step>
+ *   <i-step label="Columns" [disabled]="!detailsValid">
+ *     Column selection
+ *   </i-step>
+ * </i-stepper>
+ * ```
+ */
+class IStepper {
+    /** Zero-based index of the active step. */
+    activeIndex = 0;
+    /** Prevents skipping incomplete steps when enabled. */
+    linear = false;
+    /** Navigation layout. Horizontal steppers collapse to vertical on small screens. */
+    orientation = 'horizontal';
+    /** Accessible label for the step navigation. */
+    ariaLabel = 'Progress';
+    /** Supports two-way binding of the active step. */
+    activeIndexChange = new EventEmitter();
+    /** Emitted after the user selects a different step. */
+    onChange = new EventEmitter();
+    stepComponents;
+    componentId = UniqueComponentId('i-stepper-');
+    steps = [];
+    ngAfterContentInit() {
+        this.syncSteps();
+        this.stepComponents.changes.subscribe(() => this.syncSteps());
+    }
+    selectStep(event, index) {
+        if (index === this.activeIndex || !this.canSelect(index)) {
+            return;
+        }
+        const previousIndex = this.activeIndex;
+        this.activeIndex = index;
+        this.activeIndexChange.emit(index);
+        this.onChange.emit({ originalEvent: event, index, previousIndex });
+    }
+    canSelect(index) {
+        const step = this.steps[index];
+        if (!step || step.disabled) {
+            return false;
+        }
+        if (!this.linear || index <= this.activeIndex) {
+            return true;
+        }
+        return this.steps
+            .slice(0, index)
+            .every((item) => item.completed || item.optional);
+    }
+    onKeyDown(event, index) {
+        const directionKeys = this.orientation === 'vertical'
+            ? ['ArrowUp', 'ArrowDown']
+            : ['ArrowLeft', 'ArrowRight'];
+        if (event.key === directionKeys[0]) {
+            this.focusAdjacent(index, -1);
+            event.preventDefault();
+        }
+        else if (event.key === directionKeys[1]) {
+            this.focusAdjacent(index, 1);
+            event.preventDefault();
+        }
+        else if (event.key === 'Home') {
+            this.focusBoundary(0, 1);
+            event.preventDefault();
+        }
+        else if (event.key === 'End') {
+            this.focusBoundary(this.steps.length - 1, -1);
+            event.preventDefault();
+        }
+    }
+    syncSteps() {
+        this.steps = this.stepComponents.toArray();
+        if (this.steps.length === 0) {
+            this.activeIndex = 0;
+            return;
+        }
+        this.activeIndex = Math.min(Math.max(this.activeIndex, 0), this.steps.length - 1);
+    }
+    focusAdjacent(index, direction) {
+        let nextIndex = index + direction;
+        while (nextIndex >= 0 && nextIndex < this.steps.length) {
+            if (this.canSelect(nextIndex)) {
+                this.focusStep(nextIndex);
+                return;
+            }
+            nextIndex += direction;
+        }
+    }
+    focusBoundary(index, direction) {
+        let candidate = index;
+        while (candidate >= 0 && candidate < this.steps.length) {
+            if (this.canSelect(candidate)) {
+                this.focusStep(candidate);
+                return;
+            }
+            candidate += direction;
+        }
+    }
+    focusStep(index) {
+        document.getElementById(`${this.componentId}-step-${index}`)?.focus();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: IStepper, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.12", type: IStepper, isStandalone: true, selector: "i-stepper", inputs: { activeIndex: "activeIndex", linear: "linear", orientation: "orientation", ariaLabel: "ariaLabel" }, outputs: { activeIndexChange: "activeIndexChange", onChange: "onChange" }, queries: [{ propertyName: "stepComponents", predicate: IStep }], ngImport: i0, template: "<div\n  class=\"i-stepper\"\n  [ngClass]=\"'i-stepper--' + orientation\"\n  [attr.id]=\"componentId\"\n>\n  <ol class=\"i-stepper__navigation\" [attr.aria-label]=\"ariaLabel\">\n    @for (step of steps; track step; let index = $index; let last = $last) {\n      <li\n        class=\"i-stepper__item\"\n        [class.i-stepper__item--active]=\"activeIndex === index\"\n        [class.i-stepper__item--completed]=\"step.completed\"\n        [class.i-stepper__item--disabled]=\"!canSelect(index)\"\n      >\n        <button\n          class=\"i-stepper__trigger\"\n          type=\"button\"\n          [attr.id]=\"componentId + '-step-' + index\"\n          [attr.aria-current]=\"activeIndex === index ? 'step' : null\"\n          [attr.aria-controls]=\"componentId + '-panel-' + index\"\n          [attr.aria-describedby]=\"\n            step.description ? componentId + '-description-' + index : null\n          \"\n          [attr.tabindex]=\"activeIndex === index ? 0 : -1\"\n          [disabled]=\"!canSelect(index)\"\n          (click)=\"selectStep($event, index)\"\n          (keydown)=\"onKeyDown($event, index)\"\n        >\n          <span class=\"i-stepper__indicator\" aria-hidden=\"true\">\n            @if (step.icon) {\n              <i [ngClass]=\"step.icon\" class=\"i-stepper__icon\"></i>\n            } @else {\n              {{ index + 1 }}\n            }\n            @if (step.completed) {\n              <span class=\"i-stepper__complete-mark\">\n                <i class=\"pi pi-check\"></i>\n              </span>\n            }\n          </span>\n          <span class=\"i-stepper__copy\">\n            <span class=\"i-stepper__meta\">\n              <span>Step {{ index + 1 }} of {{ steps.length }}</span>\n              @if (step.completed) {\n                <span class=\"i-stepper__status i-stepper__status--completed\"\n                  >Completed</span\n                >\n              } @else if (step.optional) {\n                <span class=\"i-stepper__status\">Optional</span>\n              }\n            </span>\n            <span class=\"i-stepper__label\">{{ step.label }}</span>\n            @if (step.description) {\n              <span\n                class=\"i-stepper__description\"\n                [attr.id]=\"componentId + '-description-' + index\"\n                >{{ step.description }}</span\n              >\n            }\n          </span>\n          <i\n            class=\"pi pi-chevron-right i-stepper__chevron\"\n            aria-hidden=\"true\"\n          ></i>\n        </button>\n        @if (!last) {\n          <span class=\"i-stepper__connector\" aria-hidden=\"true\"></span>\n        }\n      </li>\n    }\n  </ol>\n\n  @for (step of steps; track step; let index = $index) {\n    <section\n      class=\"i-stepper__panel\"\n      [class.i-stepper__panel--active]=\"activeIndex === index\"\n      [attr.id]=\"componentId + '-panel-' + index\"\n      [attr.aria-labelledby]=\"componentId + '-step-' + index\"\n      [attr.hidden]=\"activeIndex !== index || null\"\n      role=\"region\"\n    >\n      @if (activeIndex === index) {\n        <ng-container [ngTemplateOutlet]=\"step.contentTemplate\"></ng-container>\n      }\n    </section>\n  }\n</div>\n", styles: [".i-stepper{color:var(--color-text-primary)}.i-stepper__trigger{border-color:var(--color-border);background:var(--surface-card)}.i-stepper__trigger:hover:not(:disabled){background:var(--surface-hover);border-color:color-mix(in srgb,var(--color-primary) 35%,var(--color-border));transform:translateY(-1px)}.i-stepper__trigger:focus-visible{outline:2px solid var(--color-primary);outline-offset:2px}.i-stepper__trigger:disabled{color:var(--color-text-disabled);cursor:not-allowed}.i-stepper__indicator{border-color:var(--color-border);background:var(--surface-ground);color:var(--color-text-secondary)}.i-stepper__description,.i-stepper__meta{color:var(--color-text-secondary)}.i-stepper__status{background:var(--surface-hover)}.i-stepper__status--completed{background:color-mix(in srgb,var(--color-success) 12%,transparent);color:var(--color-success)}.i-stepper__complete-mark{border-color:var(--surface-card);background:var(--color-success);color:var(--color-contrast-inverse)}.i-stepper__connector{background:var(--color-border)}.i-stepper__item--active .i-stepper__trigger{border-color:color-mix(in srgb,var(--color-primary) 55%,var(--color-border));box-shadow:0 6px 18px color-mix(in srgb,var(--color-primary) 12%,transparent)}.i-stepper__item--active .i-stepper__indicator{border-color:color-mix(in srgb,var(--color-primary) 35%,transparent);background:color-mix(in srgb,var(--color-primary) 10%,var(--surface-card));color:var(--color-primary)}.i-stepper__item--active .i-stepper__label{color:var(--color-primary)}.i-stepper__item--active .i-stepper__chevron{color:var(--color-primary);opacity:1;transform:translate(0)}.i-stepper__item--completed .i-stepper__indicator{border-color:var(--color-success);background:color-mix(in srgb,var(--color-success) 10%,var(--surface-card));color:var(--color-success)}.i-stepper__item--completed .i-stepper__connector{background:var(--color-success)}.i-stepper__item--disabled{opacity:.58}.i-stepper{display:flex;width:100%}.i-stepper--horizontal{flex-direction:column}.i-stepper--horizontal .i-stepper__navigation{display:flex;width:100%;align-items:stretch}.i-stepper--horizontal .i-stepper__item{display:flex;flex:1 1 0;align-items:center;min-width:0}.i-stepper--horizontal .i-stepper__trigger{flex:1 1 auto;align-self:stretch}.i-stepper--horizontal .i-stepper__connector{flex:0 0 24px;height:2px;margin:0 6px}.i-stepper--vertical{flex-direction:row;gap:24px}.i-stepper--vertical .i-stepper__navigation{flex:0 0 min(280px,35%)}.i-stepper--vertical .i-stepper__item{position:relative;padding-bottom:12px}.i-stepper--vertical .i-stepper__trigger{width:100%}.i-stepper--vertical .i-stepper__connector{position:absolute;top:66px;bottom:0;left:34px;width:2px}.i-stepper--vertical .i-stepper__panel{flex:1 1 auto;min-width:0}.i-stepper__navigation{box-sizing:border-box;margin:0;padding:0;list-style:none}.i-stepper__trigger{position:relative;display:flex;align-items:center;gap:12px;min-width:0;min-height:82px;padding:14px;overflow:hidden;border:1px solid;border-radius:8px;color:inherit;font:inherit;text-align:left;cursor:pointer;transition:background .2s,border-color .2s,box-shadow .2s,transform .2s}.i-stepper__indicator{position:relative;display:inline-flex;flex:0 0 42px;align-items:center;justify-content:center;width:42px;height:42px;border:1px solid;border-radius:10px;font-weight:600;transition:background .2s,border-color .2s,color .2s}.i-stepper__icon{font-size:18px}.i-stepper__complete-mark{position:absolute;right:-5px;bottom:-5px;display:inline-flex;align-items:center;justify-content:center;width:18px;height:18px;border:2px solid;border-radius:50%;font-size:9px}.i-stepper__copy,.i-stepper__label,.i-stepper__description{display:block}.i-stepper__copy{flex:1 1 auto;min-width:0}.i-stepper__meta{display:flex;align-items:center;gap:7px;margin-bottom:4px;font-size:.72em;font-weight:600;letter-spacing:.035em;line-height:1.2;text-transform:uppercase}.i-stepper__status{display:inline-flex;align-items:center;min-height:18px;padding:0 6px;border-radius:999px;font-size:.9em;letter-spacing:.02em}.i-stepper__label{font-weight:600;line-height:1.3}.i-stepper__description{margin-top:3px;font-size:.8em;line-height:1.35}.i-stepper__chevron{flex:0 0 auto;font-size:11px;opacity:0;transform:translate(-4px);transition:opacity .2s,transform .2s}.i-stepper__panel{display:none;padding-top:24px}.i-stepper__panel--active{display:block}@media(max-width:768px){.i-stepper--horizontal .i-stepper__navigation{flex-direction:column}.i-stepper--horizontal .i-stepper__item{position:relative;padding-bottom:10px}.i-stepper--horizontal .i-stepper__connector{position:absolute;top:82px;bottom:0;left:34px;width:2px;height:auto;margin:0}.i-stepper--vertical{flex-direction:column;gap:0}.i-stepper--vertical .i-stepper__navigation{flex-basis:auto}}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: IStepper, decorators: [{
+            type: Component,
+            args: [{ selector: 'i-stepper', standalone: true, imports: [NgClass, NgTemplateOutlet], template: "<div\n  class=\"i-stepper\"\n  [ngClass]=\"'i-stepper--' + orientation\"\n  [attr.id]=\"componentId\"\n>\n  <ol class=\"i-stepper__navigation\" [attr.aria-label]=\"ariaLabel\">\n    @for (step of steps; track step; let index = $index; let last = $last) {\n      <li\n        class=\"i-stepper__item\"\n        [class.i-stepper__item--active]=\"activeIndex === index\"\n        [class.i-stepper__item--completed]=\"step.completed\"\n        [class.i-stepper__item--disabled]=\"!canSelect(index)\"\n      >\n        <button\n          class=\"i-stepper__trigger\"\n          type=\"button\"\n          [attr.id]=\"componentId + '-step-' + index\"\n          [attr.aria-current]=\"activeIndex === index ? 'step' : null\"\n          [attr.aria-controls]=\"componentId + '-panel-' + index\"\n          [attr.aria-describedby]=\"\n            step.description ? componentId + '-description-' + index : null\n          \"\n          [attr.tabindex]=\"activeIndex === index ? 0 : -1\"\n          [disabled]=\"!canSelect(index)\"\n          (click)=\"selectStep($event, index)\"\n          (keydown)=\"onKeyDown($event, index)\"\n        >\n          <span class=\"i-stepper__indicator\" aria-hidden=\"true\">\n            @if (step.icon) {\n              <i [ngClass]=\"step.icon\" class=\"i-stepper__icon\"></i>\n            } @else {\n              {{ index + 1 }}\n            }\n            @if (step.completed) {\n              <span class=\"i-stepper__complete-mark\">\n                <i class=\"pi pi-check\"></i>\n              </span>\n            }\n          </span>\n          <span class=\"i-stepper__copy\">\n            <span class=\"i-stepper__meta\">\n              <span>Step {{ index + 1 }} of {{ steps.length }}</span>\n              @if (step.completed) {\n                <span class=\"i-stepper__status i-stepper__status--completed\"\n                  >Completed</span\n                >\n              } @else if (step.optional) {\n                <span class=\"i-stepper__status\">Optional</span>\n              }\n            </span>\n            <span class=\"i-stepper__label\">{{ step.label }}</span>\n            @if (step.description) {\n              <span\n                class=\"i-stepper__description\"\n                [attr.id]=\"componentId + '-description-' + index\"\n                >{{ step.description }}</span\n              >\n            }\n          </span>\n          <i\n            class=\"pi pi-chevron-right i-stepper__chevron\"\n            aria-hidden=\"true\"\n          ></i>\n        </button>\n        @if (!last) {\n          <span class=\"i-stepper__connector\" aria-hidden=\"true\"></span>\n        }\n      </li>\n    }\n  </ol>\n\n  @for (step of steps; track step; let index = $index) {\n    <section\n      class=\"i-stepper__panel\"\n      [class.i-stepper__panel--active]=\"activeIndex === index\"\n      [attr.id]=\"componentId + '-panel-' + index\"\n      [attr.aria-labelledby]=\"componentId + '-step-' + index\"\n      [attr.hidden]=\"activeIndex !== index || null\"\n      role=\"region\"\n    >\n      @if (activeIndex === index) {\n        <ng-container [ngTemplateOutlet]=\"step.contentTemplate\"></ng-container>\n      }\n    </section>\n  }\n</div>\n", styles: [".i-stepper{color:var(--color-text-primary)}.i-stepper__trigger{border-color:var(--color-border);background:var(--surface-card)}.i-stepper__trigger:hover:not(:disabled){background:var(--surface-hover);border-color:color-mix(in srgb,var(--color-primary) 35%,var(--color-border));transform:translateY(-1px)}.i-stepper__trigger:focus-visible{outline:2px solid var(--color-primary);outline-offset:2px}.i-stepper__trigger:disabled{color:var(--color-text-disabled);cursor:not-allowed}.i-stepper__indicator{border-color:var(--color-border);background:var(--surface-ground);color:var(--color-text-secondary)}.i-stepper__description,.i-stepper__meta{color:var(--color-text-secondary)}.i-stepper__status{background:var(--surface-hover)}.i-stepper__status--completed{background:color-mix(in srgb,var(--color-success) 12%,transparent);color:var(--color-success)}.i-stepper__complete-mark{border-color:var(--surface-card);background:var(--color-success);color:var(--color-contrast-inverse)}.i-stepper__connector{background:var(--color-border)}.i-stepper__item--active .i-stepper__trigger{border-color:color-mix(in srgb,var(--color-primary) 55%,var(--color-border));box-shadow:0 6px 18px color-mix(in srgb,var(--color-primary) 12%,transparent)}.i-stepper__item--active .i-stepper__indicator{border-color:color-mix(in srgb,var(--color-primary) 35%,transparent);background:color-mix(in srgb,var(--color-primary) 10%,var(--surface-card));color:var(--color-primary)}.i-stepper__item--active .i-stepper__label{color:var(--color-primary)}.i-stepper__item--active .i-stepper__chevron{color:var(--color-primary);opacity:1;transform:translate(0)}.i-stepper__item--completed .i-stepper__indicator{border-color:var(--color-success);background:color-mix(in srgb,var(--color-success) 10%,var(--surface-card));color:var(--color-success)}.i-stepper__item--completed .i-stepper__connector{background:var(--color-success)}.i-stepper__item--disabled{opacity:.58}.i-stepper{display:flex;width:100%}.i-stepper--horizontal{flex-direction:column}.i-stepper--horizontal .i-stepper__navigation{display:flex;width:100%;align-items:stretch}.i-stepper--horizontal .i-stepper__item{display:flex;flex:1 1 0;align-items:center;min-width:0}.i-stepper--horizontal .i-stepper__trigger{flex:1 1 auto;align-self:stretch}.i-stepper--horizontal .i-stepper__connector{flex:0 0 24px;height:2px;margin:0 6px}.i-stepper--vertical{flex-direction:row;gap:24px}.i-stepper--vertical .i-stepper__navigation{flex:0 0 min(280px,35%)}.i-stepper--vertical .i-stepper__item{position:relative;padding-bottom:12px}.i-stepper--vertical .i-stepper__trigger{width:100%}.i-stepper--vertical .i-stepper__connector{position:absolute;top:66px;bottom:0;left:34px;width:2px}.i-stepper--vertical .i-stepper__panel{flex:1 1 auto;min-width:0}.i-stepper__navigation{box-sizing:border-box;margin:0;padding:0;list-style:none}.i-stepper__trigger{position:relative;display:flex;align-items:center;gap:12px;min-width:0;min-height:82px;padding:14px;overflow:hidden;border:1px solid;border-radius:8px;color:inherit;font:inherit;text-align:left;cursor:pointer;transition:background .2s,border-color .2s,box-shadow .2s,transform .2s}.i-stepper__indicator{position:relative;display:inline-flex;flex:0 0 42px;align-items:center;justify-content:center;width:42px;height:42px;border:1px solid;border-radius:10px;font-weight:600;transition:background .2s,border-color .2s,color .2s}.i-stepper__icon{font-size:18px}.i-stepper__complete-mark{position:absolute;right:-5px;bottom:-5px;display:inline-flex;align-items:center;justify-content:center;width:18px;height:18px;border:2px solid;border-radius:50%;font-size:9px}.i-stepper__copy,.i-stepper__label,.i-stepper__description{display:block}.i-stepper__copy{flex:1 1 auto;min-width:0}.i-stepper__meta{display:flex;align-items:center;gap:7px;margin-bottom:4px;font-size:.72em;font-weight:600;letter-spacing:.035em;line-height:1.2;text-transform:uppercase}.i-stepper__status{display:inline-flex;align-items:center;min-height:18px;padding:0 6px;border-radius:999px;font-size:.9em;letter-spacing:.02em}.i-stepper__label{font-weight:600;line-height:1.3}.i-stepper__description{margin-top:3px;font-size:.8em;line-height:1.35}.i-stepper__chevron{flex:0 0 auto;font-size:11px;opacity:0;transform:translate(-4px);transition:opacity .2s,transform .2s}.i-stepper__panel{display:none;padding-top:24px}.i-stepper__panel--active{display:block}@media(max-width:768px){.i-stepper--horizontal .i-stepper__navigation{flex-direction:column}.i-stepper--horizontal .i-stepper__item{position:relative;padding-bottom:10px}.i-stepper--horizontal .i-stepper__connector{position:absolute;top:82px;bottom:0;left:34px;width:2px;height:auto;margin:0}.i-stepper--vertical{flex-direction:column;gap:0}.i-stepper--vertical .i-stepper__navigation{flex-basis:auto}}\n"] }]
+        }], propDecorators: { activeIndex: [{
+                type: Input
+            }], linear: [{
+                type: Input
+            }], orientation: [{
+                type: Input
+            }], ariaLabel: [{
+                type: Input
+            }], activeIndexChange: [{
+                type: Output
+            }], onChange: [{
+                type: Output
+            }], stepComponents: [{
+                type: ContentChildren,
+                args: [IStep]
+            }] } });
+
 /**
  * Tab Panel Component
  *
@@ -6541,11 +6727,11 @@ class ITabs {
         tabElement?.focus();
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: ITabs, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.12", type: ITabs, isStandalone: true, selector: "i-tabs", inputs: { activeIndex: "activeIndex" }, outputs: { activeIndexChange: "activeIndexChange", onChange: "onChange", onClose: "onClose" }, queries: [{ propertyName: "tabPanels", predicate: ITabPanel }], ngImport: i0, template: "<div class=\"i-tabs\" [attr.id]=\"componentId\">\n  <!-- Tab Headers -->\n  <div class=\"i-tabs__header\" role=\"tablist\">\n    @for (tab of tabs; track $index) {\n      <button\n        [attr.id]=\"componentId + '-tab-' + $index\"\n        class=\"i-tabs__tab\"\n        [ngClass]=\"{\n          'i-tabs__tab--active': activeIndex === $index,\n          'i-tabs__tab--disabled': tab.disabled,\n          'i-tabs__tab--icon-only': tab.icon && !tab.header\n        }\"\n        role=\"tab\"\n        [attr.aria-selected]=\"activeIndex === $index\"\n        [attr.aria-controls]=\"componentId + '-panel-' + $index\"\n        [attr.tabindex]=\"activeIndex === $index ? 0 : -1\"\n        [disabled]=\"tab.disabled\"\n        (click)=\"selectTab($event, $index)\"\n        (keydown)=\"onKeyDown($event, $index)\"\n      >\n        @if (tab.icon) {\n          <i [ngClass]=\"tab.icon\" class=\"i-tabs__tab-icon\"></i>\n        }\n        @if (tab.header) {\n          <span class=\"i-tabs__tab-label\">{{ tab.header }}</span>\n        }\n        @if (tab.closable && !tab.disabled) {\n          <button\n            class=\"i-tabs__tab-close\"\n            type=\"button\"\n            aria-label=\"Close tab\"\n            (click)=\"closeTab($event, $index)\"\n          >\n            <i class=\"pi pi-times\"></i>\n          </button>\n        }\n      </button>\n    }\n  </div>\n\n  <!-- Tab Panels -->\n  <div class=\"i-tabs__panels\">\n    @for (tab of tabs; track $index) {\n      <div\n        [attr.id]=\"componentId + '-panel-' + $index\"\n        class=\"i-tabs__panel\"\n        [ngClass]=\"{ 'i-tabs__panel--active': activeIndex === $index }\"\n        role=\"tabpanel\"\n        [attr.aria-labelledby]=\"componentId + '-tab-' + $index\"\n        [attr.hidden]=\"activeIndex !== $index || null\"\n      >\n        @if (activeIndex === $index) {\n          <ng-container [ngTemplateOutlet]=\"tab.contentTemplate\"></ng-container>\n        }\n      </div>\n    }\n  </div>\n</div>\n", styles: [".i-tabs__header{border-bottom:1px solid var(--color-border);background:var(--surface-card)}.i-tabs__header::-webkit-scrollbar-thumb{background:var(--color-border)}.i-tabs__tab{color:var(--color-text-secondary);transition:color .2s,background .2s}.i-tabs__tab:hover:not(:disabled){color:var(--color-text-primary);background:var(--surface-hover)}.i-tabs__tab--active{color:var(--color-primary)}.i-tabs__tab--active:after{background:var(--color-primary)}.i-tabs__tab--disabled{color:var(--color-text-disabled);opacity:.6}.i-tabs__tab-close{transition:background .2s;color:inherit}.i-tabs__tab-close:hover{background:color-mix(in srgb,var(--color-danger) 20%,transparent);color:var(--color-danger)}.i-tabs__panels{background:var(--surface-card)}.i-tabs{display:flex;flex-direction:column;width:100%}.i-tabs .i-tabs__header{display:flex;overflow-x:auto;scrollbar-width:none}.i-tabs .i-tabs__header::-webkit-scrollbar{display:none}.i-tabs .i-tabs__tab{display:flex;align-items:center;gap:8px;padding:12px 20px;border:none;background:transparent;font-size:1em;font-weight:500;cursor:pointer;position:relative;white-space:nowrap}.i-tabs .i-tabs__tab--active:after{content:\"\";position:absolute;bottom:0;left:0;right:0;height:2px}.i-tabs .i-tabs__tab--disabled{cursor:not-allowed}.i-tabs .i-tabs__tab--icon-only{padding:12px 16px}.i-tabs .i-tabs__tab--icon-only .i-tabs__tab-icon{margin:0}.i-tabs .i-tabs__tab .i-tabs__tab-icon{font-size:16px;display:inline-flex;align-items:center}.i-tabs .i-tabs__tab .i-tabs__tab-label{display:inline-block}.i-tabs .i-tabs__tab .i-tabs__tab-close{display:inline-flex;align-items:center;justify-content:center;width:18px;height:18px;margin-left:4px;padding:0;border:none;border-radius:50%;background:transparent;cursor:pointer}.i-tabs .i-tabs__tab .i-tabs__tab-close i{font-size:12px}.i-tabs .i-tabs__panels{flex:1}.i-tabs .i-tabs__panels .i-tabs__panel{display:none;padding:16px}.i-tabs .i-tabs__panels .i-tabs__panel--active{display:block}@media(max-width:768px){.i-tabs .i-tabs__panels .i-tabs__panel{padding-left:0;padding-right:0}}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.12", type: ITabs, isStandalone: true, selector: "i-tabs", inputs: { activeIndex: "activeIndex" }, outputs: { activeIndexChange: "activeIndexChange", onChange: "onChange", onClose: "onClose" }, queries: [{ propertyName: "tabPanels", predicate: ITabPanel }], ngImport: i0, template: "<div class=\"i-tabs\" [attr.id]=\"componentId\">\n  <!-- Tab Headers -->\n  <div class=\"i-tabs__header\" role=\"tablist\">\n    @for (tab of tabs; track $index) {\n      <button\n        [attr.id]=\"componentId + '-tab-' + $index\"\n        class=\"i-tabs__tab\"\n        [ngClass]=\"{\n          'i-tabs__tab--active': activeIndex === $index,\n          'i-tabs__tab--disabled': tab.disabled,\n          'i-tabs__tab--icon-only': tab.icon && !tab.header,\n        }\"\n        role=\"tab\"\n        [attr.aria-selected]=\"activeIndex === $index\"\n        [attr.aria-controls]=\"componentId + '-panel-' + $index\"\n        [attr.tabindex]=\"activeIndex === $index ? 0 : -1\"\n        [disabled]=\"tab.disabled\"\n        (click)=\"selectTab($event, $index)\"\n        (keydown)=\"onKeyDown($event, $index)\"\n      >\n        @if (tab.icon) {\n          <i [ngClass]=\"tab.icon\" class=\"i-tabs__tab-icon\"></i>\n        }\n        @if (tab.header) {\n          <span class=\"i-tabs__tab-label\">{{ tab.header }}</span>\n        }\n        @if (tab.closable && !tab.disabled) {\n          <button\n            class=\"i-tabs__tab-close\"\n            type=\"button\"\n            aria-label=\"Close tab\"\n            (click)=\"closeTab($event, $index)\"\n          >\n            <i class=\"pi pi-times\"></i>\n          </button>\n        }\n      </button>\n    }\n  </div>\n\n  <!-- Tab Panels -->\n  <div class=\"i-tabs__panels\">\n    @for (tab of tabs; track $index) {\n      <div\n        [attr.id]=\"componentId + '-panel-' + $index\"\n        class=\"i-tabs__panel\"\n        [ngClass]=\"{ 'i-tabs__panel--active': activeIndex === $index }\"\n        role=\"tabpanel\"\n        [attr.aria-labelledby]=\"componentId + '-tab-' + $index\"\n        [attr.hidden]=\"activeIndex !== $index || null\"\n      >\n        @if (activeIndex === $index) {\n          <ng-container [ngTemplateOutlet]=\"tab.contentTemplate\"></ng-container>\n        }\n      </div>\n    }\n  </div>\n</div>\n", styles: [".i-tabs__header{border-bottom:1px solid var(--color-border);background:var(--surface-card)}.i-tabs__header::-webkit-scrollbar-thumb{background:var(--color-border)}.i-tabs__tab{color:var(--color-text-secondary);transition:color .2s,background .2s}.i-tabs__tab:hover:not(:disabled){color:var(--color-text-primary);background:var(--surface-hover)}.i-tabs__tab--active{color:var(--color-primary)}.i-tabs__tab--active:after{background:var(--color-primary)}.i-tabs__tab--disabled{color:var(--color-text-disabled);opacity:.6}.i-tabs__tab-close{transition:background .2s;color:inherit}.i-tabs__tab-close:hover{background:color-mix(in srgb,var(--color-danger) 20%,transparent);color:var(--color-danger)}.i-tabs__panels{background:var(--surface-card)}.i-tabs{display:flex;flex-direction:column;width:100%}.i-tabs .i-tabs__header{display:flex;overflow-x:auto;scrollbar-width:none}.i-tabs .i-tabs__header::-webkit-scrollbar{display:none}.i-tabs .i-tabs__tab{display:flex;align-items:center;gap:8px;padding:12px 20px;border:none;background:transparent;font-size:1em;font-weight:500;cursor:pointer;position:relative;white-space:nowrap}.i-tabs .i-tabs__tab--active:after{content:\"\";position:absolute;bottom:0;left:0;right:0;height:2px}.i-tabs .i-tabs__tab--disabled{cursor:not-allowed}.i-tabs .i-tabs__tab--icon-only{padding:12px 16px}.i-tabs .i-tabs__tab--icon-only .i-tabs__tab-icon{margin:0}.i-tabs .i-tabs__tab .i-tabs__tab-icon{font-size:16px;display:inline-flex;align-items:center}.i-tabs .i-tabs__tab .i-tabs__tab-label{display:inline-block}.i-tabs .i-tabs__tab .i-tabs__tab-close{display:inline-flex;align-items:center;justify-content:center;width:18px;height:18px;margin-left:4px;padding:0;border:none;border-radius:50%;background:transparent;cursor:pointer}.i-tabs .i-tabs__tab .i-tabs__tab-close i{font-size:12px}.i-tabs .i-tabs__panels{flex:1}.i-tabs .i-tabs__panels .i-tabs__panel{display:none;padding:16px}.i-tabs .i-tabs__panels .i-tabs__panel--active{display:block}@media(max-width:768px){.i-tabs .i-tabs__panels .i-tabs__panel{padding-left:0;padding-right:0}}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: ITabs, decorators: [{
             type: Component,
-            args: [{ selector: 'i-tabs', standalone: true, imports: [NgClass, NgTemplateOutlet], template: "<div class=\"i-tabs\" [attr.id]=\"componentId\">\n  <!-- Tab Headers -->\n  <div class=\"i-tabs__header\" role=\"tablist\">\n    @for (tab of tabs; track $index) {\n      <button\n        [attr.id]=\"componentId + '-tab-' + $index\"\n        class=\"i-tabs__tab\"\n        [ngClass]=\"{\n          'i-tabs__tab--active': activeIndex === $index,\n          'i-tabs__tab--disabled': tab.disabled,\n          'i-tabs__tab--icon-only': tab.icon && !tab.header\n        }\"\n        role=\"tab\"\n        [attr.aria-selected]=\"activeIndex === $index\"\n        [attr.aria-controls]=\"componentId + '-panel-' + $index\"\n        [attr.tabindex]=\"activeIndex === $index ? 0 : -1\"\n        [disabled]=\"tab.disabled\"\n        (click)=\"selectTab($event, $index)\"\n        (keydown)=\"onKeyDown($event, $index)\"\n      >\n        @if (tab.icon) {\n          <i [ngClass]=\"tab.icon\" class=\"i-tabs__tab-icon\"></i>\n        }\n        @if (tab.header) {\n          <span class=\"i-tabs__tab-label\">{{ tab.header }}</span>\n        }\n        @if (tab.closable && !tab.disabled) {\n          <button\n            class=\"i-tabs__tab-close\"\n            type=\"button\"\n            aria-label=\"Close tab\"\n            (click)=\"closeTab($event, $index)\"\n          >\n            <i class=\"pi pi-times\"></i>\n          </button>\n        }\n      </button>\n    }\n  </div>\n\n  <!-- Tab Panels -->\n  <div class=\"i-tabs__panels\">\n    @for (tab of tabs; track $index) {\n      <div\n        [attr.id]=\"componentId + '-panel-' + $index\"\n        class=\"i-tabs__panel\"\n        [ngClass]=\"{ 'i-tabs__panel--active': activeIndex === $index }\"\n        role=\"tabpanel\"\n        [attr.aria-labelledby]=\"componentId + '-tab-' + $index\"\n        [attr.hidden]=\"activeIndex !== $index || null\"\n      >\n        @if (activeIndex === $index) {\n          <ng-container [ngTemplateOutlet]=\"tab.contentTemplate\"></ng-container>\n        }\n      </div>\n    }\n  </div>\n</div>\n", styles: [".i-tabs__header{border-bottom:1px solid var(--color-border);background:var(--surface-card)}.i-tabs__header::-webkit-scrollbar-thumb{background:var(--color-border)}.i-tabs__tab{color:var(--color-text-secondary);transition:color .2s,background .2s}.i-tabs__tab:hover:not(:disabled){color:var(--color-text-primary);background:var(--surface-hover)}.i-tabs__tab--active{color:var(--color-primary)}.i-tabs__tab--active:after{background:var(--color-primary)}.i-tabs__tab--disabled{color:var(--color-text-disabled);opacity:.6}.i-tabs__tab-close{transition:background .2s;color:inherit}.i-tabs__tab-close:hover{background:color-mix(in srgb,var(--color-danger) 20%,transparent);color:var(--color-danger)}.i-tabs__panels{background:var(--surface-card)}.i-tabs{display:flex;flex-direction:column;width:100%}.i-tabs .i-tabs__header{display:flex;overflow-x:auto;scrollbar-width:none}.i-tabs .i-tabs__header::-webkit-scrollbar{display:none}.i-tabs .i-tabs__tab{display:flex;align-items:center;gap:8px;padding:12px 20px;border:none;background:transparent;font-size:1em;font-weight:500;cursor:pointer;position:relative;white-space:nowrap}.i-tabs .i-tabs__tab--active:after{content:\"\";position:absolute;bottom:0;left:0;right:0;height:2px}.i-tabs .i-tabs__tab--disabled{cursor:not-allowed}.i-tabs .i-tabs__tab--icon-only{padding:12px 16px}.i-tabs .i-tabs__tab--icon-only .i-tabs__tab-icon{margin:0}.i-tabs .i-tabs__tab .i-tabs__tab-icon{font-size:16px;display:inline-flex;align-items:center}.i-tabs .i-tabs__tab .i-tabs__tab-label{display:inline-block}.i-tabs .i-tabs__tab .i-tabs__tab-close{display:inline-flex;align-items:center;justify-content:center;width:18px;height:18px;margin-left:4px;padding:0;border:none;border-radius:50%;background:transparent;cursor:pointer}.i-tabs .i-tabs__tab .i-tabs__tab-close i{font-size:12px}.i-tabs .i-tabs__panels{flex:1}.i-tabs .i-tabs__panels .i-tabs__panel{display:none;padding:16px}.i-tabs .i-tabs__panels .i-tabs__panel--active{display:block}@media(max-width:768px){.i-tabs .i-tabs__panels .i-tabs__panel{padding-left:0;padding-right:0}}\n"] }]
+            args: [{ selector: 'i-tabs', standalone: true, imports: [NgClass, NgTemplateOutlet], template: "<div class=\"i-tabs\" [attr.id]=\"componentId\">\n  <!-- Tab Headers -->\n  <div class=\"i-tabs__header\" role=\"tablist\">\n    @for (tab of tabs; track $index) {\n      <button\n        [attr.id]=\"componentId + '-tab-' + $index\"\n        class=\"i-tabs__tab\"\n        [ngClass]=\"{\n          'i-tabs__tab--active': activeIndex === $index,\n          'i-tabs__tab--disabled': tab.disabled,\n          'i-tabs__tab--icon-only': tab.icon && !tab.header,\n        }\"\n        role=\"tab\"\n        [attr.aria-selected]=\"activeIndex === $index\"\n        [attr.aria-controls]=\"componentId + '-panel-' + $index\"\n        [attr.tabindex]=\"activeIndex === $index ? 0 : -1\"\n        [disabled]=\"tab.disabled\"\n        (click)=\"selectTab($event, $index)\"\n        (keydown)=\"onKeyDown($event, $index)\"\n      >\n        @if (tab.icon) {\n          <i [ngClass]=\"tab.icon\" class=\"i-tabs__tab-icon\"></i>\n        }\n        @if (tab.header) {\n          <span class=\"i-tabs__tab-label\">{{ tab.header }}</span>\n        }\n        @if (tab.closable && !tab.disabled) {\n          <button\n            class=\"i-tabs__tab-close\"\n            type=\"button\"\n            aria-label=\"Close tab\"\n            (click)=\"closeTab($event, $index)\"\n          >\n            <i class=\"pi pi-times\"></i>\n          </button>\n        }\n      </button>\n    }\n  </div>\n\n  <!-- Tab Panels -->\n  <div class=\"i-tabs__panels\">\n    @for (tab of tabs; track $index) {\n      <div\n        [attr.id]=\"componentId + '-panel-' + $index\"\n        class=\"i-tabs__panel\"\n        [ngClass]=\"{ 'i-tabs__panel--active': activeIndex === $index }\"\n        role=\"tabpanel\"\n        [attr.aria-labelledby]=\"componentId + '-tab-' + $index\"\n        [attr.hidden]=\"activeIndex !== $index || null\"\n      >\n        @if (activeIndex === $index) {\n          <ng-container [ngTemplateOutlet]=\"tab.contentTemplate\"></ng-container>\n        }\n      </div>\n    }\n  </div>\n</div>\n", styles: [".i-tabs__header{border-bottom:1px solid var(--color-border);background:var(--surface-card)}.i-tabs__header::-webkit-scrollbar-thumb{background:var(--color-border)}.i-tabs__tab{color:var(--color-text-secondary);transition:color .2s,background .2s}.i-tabs__tab:hover:not(:disabled){color:var(--color-text-primary);background:var(--surface-hover)}.i-tabs__tab--active{color:var(--color-primary)}.i-tabs__tab--active:after{background:var(--color-primary)}.i-tabs__tab--disabled{color:var(--color-text-disabled);opacity:.6}.i-tabs__tab-close{transition:background .2s;color:inherit}.i-tabs__tab-close:hover{background:color-mix(in srgb,var(--color-danger) 20%,transparent);color:var(--color-danger)}.i-tabs__panels{background:var(--surface-card)}.i-tabs{display:flex;flex-direction:column;width:100%}.i-tabs .i-tabs__header{display:flex;overflow-x:auto;scrollbar-width:none}.i-tabs .i-tabs__header::-webkit-scrollbar{display:none}.i-tabs .i-tabs__tab{display:flex;align-items:center;gap:8px;padding:12px 20px;border:none;background:transparent;font-size:1em;font-weight:500;cursor:pointer;position:relative;white-space:nowrap}.i-tabs .i-tabs__tab--active:after{content:\"\";position:absolute;bottom:0;left:0;right:0;height:2px}.i-tabs .i-tabs__tab--disabled{cursor:not-allowed}.i-tabs .i-tabs__tab--icon-only{padding:12px 16px}.i-tabs .i-tabs__tab--icon-only .i-tabs__tab-icon{margin:0}.i-tabs .i-tabs__tab .i-tabs__tab-icon{font-size:16px;display:inline-flex;align-items:center}.i-tabs .i-tabs__tab .i-tabs__tab-label{display:inline-block}.i-tabs .i-tabs__tab .i-tabs__tab-close{display:inline-flex;align-items:center;justify-content:center;width:18px;height:18px;margin-left:4px;padding:0;border:none;border-radius:50%;background:transparent;cursor:pointer}.i-tabs .i-tabs__tab .i-tabs__tab-close i{font-size:12px}.i-tabs .i-tabs__panels{flex:1}.i-tabs .i-tabs__panels .i-tabs__panel{display:none;padding:16px}.i-tabs .i-tabs__panels .i-tabs__panel--active{display:block}@media(max-width:768px){.i-tabs .i-tabs__panels .i-tabs__panel{padding-left:0;padding-right:0}}\n"] }]
         }], propDecorators: { activeIndex: [{
                 type: Input
             }], activeIndexChange: [{
@@ -6715,7 +6901,7 @@ class IToggle {
                 useExisting: forwardRef(() => IToggle),
                 multi: true,
             },
-        ], ngImport: i0, template: "<div\n  class=\"i-toggle-wrapper\"\n  [class.i-toggle--disabled]=\"disabled\"\n  [class.i-toggle--readonly]=\"readonly\"\n  [class.i-toggle--small]=\"size === 'small'\"\n  [class.i-toggle--medium]=\"size === 'medium'\"\n  [class.i-toggle--large]=\"size === 'large'\"\n>\n  <div\n    class=\"i-toggle\"\n    [class.i-toggle--checked]=\"checked\"\n    (click)=\"toggle()\"\n    [attr.id]=\"id || componentId\"\n    role=\"switch\"\n    [attr.aria-checked]=\"checked\"\n    [attr.aria-disabled]=\"disabled\"\n    [attr.aria-readonly]=\"readonly\"\n    [attr.aria-labelledby]=\"label ? (id || componentId) + '-label' : null\"\n    tabindex=\"0\"\n    (keydown.space)=\"handleKeydown($event)\"\n    (keydown.enter)=\"handleKeydown($event)\"\n  >\n    <span class=\"i-toggle-thumb\"></span>\n  </div>\n  @if (label) {\n  <label\n    [id]=\"(id || componentId) + '-label'\"\n    class=\"i-toggle-label\"\n    (click)=\"toggle()\"\n  >\n    {{ label }}\n  </label>\n  }\n</div>\n", styles: [".i-toggle-wrapper .i-toggle{background-color:var(--surface-border);border:1px solid var(--surface-border)}.i-toggle-wrapper .i-toggle:focus{box-shadow:0 2px 10px #0003}.i-toggle-wrapper .i-toggle:hover:not(.i-toggle--checked){background-color:color-mix(in srgb,var(--surface-border) 80%,var(--color-primary) 20%)}.i-toggle-wrapper .i-toggle.i-toggle--checked{background-color:var(--color-primary);border-color:var(--color-primary)}.i-toggle-wrapper .i-toggle.i-toggle--checked:hover{background-color:color-mix(in srgb,var(--color-primary) 80%,transparent);border-color:color-mix(in srgb,var(--color-primary) 80%,transparent)}.i-toggle-wrapper .i-toggle.i-toggle--checked .i-toggle-thumb,.i-toggle-wrapper .i-toggle .i-toggle-thumb{background-color:var(--color-contrast-inverse)}.i-toggle-wrapper .i-toggle-label{color:var(--color-text-primary)}.i-toggle-wrapper.i-toggle--disabled .i-toggle,.i-toggle-wrapper.i-toggle--disabled .i-toggle.i-toggle--checked{background-color:var(--color-disabled-background);border-color:var(--color-disabled-border)}.i-toggle-wrapper.i-toggle--disabled .i-toggle.i-toggle--checked .i-toggle-thumb,.i-toggle-wrapper.i-toggle--disabled .i-toggle .i-toggle-thumb{background-color:var(--color-text-disabled)}.i-toggle-wrapper.i-toggle--disabled .i-toggle-label{color:var(--color-text-disabled)}.i-toggle-wrapper{display:inline-flex;align-items:center;gap:8px;font-size:1em}.i-toggle-wrapper.i-toggle--disabled{opacity:.6;cursor:not-allowed}.i-toggle-wrapper.i-toggle--disabled .i-toggle,.i-toggle-wrapper.i-toggle--disabled .i-toggle-label{cursor:not-allowed;pointer-events:none}.i-toggle-wrapper.i-toggle--readonly .i-toggle,.i-toggle-wrapper.i-toggle--readonly .i-toggle-label{cursor:default}.i-toggle-wrapper.i-toggle--small{font-size:.9em;gap:6px}.i-toggle-wrapper.i-toggle--small .i-toggle{width:28px;height:16px;border-radius:8px}.i-toggle-wrapper.i-toggle--small .i-toggle .i-toggle-thumb{width:10px;height:10px}.i-toggle-wrapper.i-toggle--small .i-toggle.i-toggle--checked .i-toggle-thumb{transform:translate(13px)}.i-toggle-wrapper.i-toggle--medium{font-size:1em;gap:8px}.i-toggle-wrapper.i-toggle--medium .i-toggle{width:36px;height:20px;border-radius:10px}.i-toggle-wrapper.i-toggle--medium .i-toggle .i-toggle-thumb{width:14px;height:14px}.i-toggle-wrapper.i-toggle--medium .i-toggle.i-toggle--checked .i-toggle-thumb{transform:translate(17px)}.i-toggle-wrapper.i-toggle--large{font-size:1.2em;gap:10px}.i-toggle-wrapper.i-toggle--large .i-toggle{width:44px;height:24px;border-radius:12px}.i-toggle-wrapper.i-toggle--large .i-toggle .i-toggle-thumb{width:18px;height:18px}.i-toggle-wrapper.i-toggle--large .i-toggle.i-toggle--checked .i-toggle-thumb{transform:translate(21px)}.i-toggle-wrapper .i-toggle{position:relative;display:inline-flex;align-items:center;padding:0 2px;transition:background-color .2s ease,border-color .2s ease;cursor:pointer;box-sizing:border-box;flex-shrink:0}.i-toggle-wrapper .i-toggle:focus{outline:none;box-shadow:0 0 0 2px #3b82f64d}.i-toggle-wrapper .i-toggle .i-toggle-thumb{border-radius:50%;transition:transform .2s ease,background-color .2s ease;flex-shrink:0}.i-toggle-wrapper .i-toggle-label{cursor:pointer;-webkit-user-select:none;user-select:none;line-height:1.4}\n"] });
+        ], ngImport: i0, template: "<div\n  class=\"i-toggle-wrapper\"\n  [class.i-toggle--disabled]=\"disabled\"\n  [class.i-toggle--readonly]=\"readonly\"\n  [class.i-toggle--small]=\"size === 'small'\"\n  [class.i-toggle--medium]=\"size === 'medium'\"\n  [class.i-toggle--large]=\"size === 'large'\"\n>\n  <div\n    class=\"i-toggle\"\n    [class.i-toggle--checked]=\"checked\"\n    (click)=\"toggle()\"\n    [attr.id]=\"id || componentId\"\n    role=\"switch\"\n    [attr.aria-checked]=\"checked\"\n    [attr.aria-disabled]=\"disabled\"\n    [attr.aria-readonly]=\"readonly\"\n    [attr.aria-labelledby]=\"label ? (id || componentId) + '-label' : null\"\n    tabindex=\"0\"\n    (keydown.space)=\"handleKeydown($event)\"\n    (keydown.enter)=\"handleKeydown($event)\"\n  >\n    <span class=\"i-toggle-thumb\"></span>\n  </div>\n  @if (label) {\n    <label\n      [id]=\"(id || componentId) + '-label'\"\n      class=\"i-toggle-label\"\n      (click)=\"toggle()\"\n    >\n      {{ label }}\n    </label>\n  }\n</div>\n", styles: [".i-toggle-wrapper .i-toggle{background-color:var(--surface-border);border:1px solid var(--surface-border)}.i-toggle-wrapper .i-toggle:focus{box-shadow:0 2px 10px #0003}.i-toggle-wrapper .i-toggle:hover:not(.i-toggle--checked){background-color:color-mix(in srgb,var(--surface-border) 80%,var(--color-primary) 20%)}.i-toggle-wrapper .i-toggle.i-toggle--checked{background-color:var(--color-primary);border-color:var(--color-primary)}.i-toggle-wrapper .i-toggle.i-toggle--checked:hover{background-color:color-mix(in srgb,var(--color-primary) 80%,transparent);border-color:color-mix(in srgb,var(--color-primary) 80%,transparent)}.i-toggle-wrapper .i-toggle.i-toggle--checked .i-toggle-thumb,.i-toggle-wrapper .i-toggle .i-toggle-thumb{background-color:var(--color-contrast-inverse)}.i-toggle-wrapper .i-toggle-label{color:var(--color-text-primary)}.i-toggle-wrapper.i-toggle--disabled .i-toggle,.i-toggle-wrapper.i-toggle--disabled .i-toggle.i-toggle--checked{background-color:var(--color-disabled-background);border-color:var(--color-disabled-border)}.i-toggle-wrapper.i-toggle--disabled .i-toggle.i-toggle--checked .i-toggle-thumb,.i-toggle-wrapper.i-toggle--disabled .i-toggle .i-toggle-thumb{background-color:var(--color-text-disabled)}.i-toggle-wrapper.i-toggle--disabled .i-toggle-label{color:var(--color-text-disabled)}.i-toggle-wrapper{display:inline-flex;align-items:center;gap:8px;font-size:1em}.i-toggle-wrapper.i-toggle--disabled{opacity:.6;cursor:not-allowed}.i-toggle-wrapper.i-toggle--disabled .i-toggle,.i-toggle-wrapper.i-toggle--disabled .i-toggle-label{cursor:not-allowed;pointer-events:none}.i-toggle-wrapper.i-toggle--readonly .i-toggle,.i-toggle-wrapper.i-toggle--readonly .i-toggle-label{cursor:default}.i-toggle-wrapper.i-toggle--small{font-size:.9em;gap:6px}.i-toggle-wrapper.i-toggle--small .i-toggle{width:28px;height:16px;border-radius:8px}.i-toggle-wrapper.i-toggle--small .i-toggle .i-toggle-thumb{width:10px;height:10px}.i-toggle-wrapper.i-toggle--small .i-toggle.i-toggle--checked .i-toggle-thumb{transform:translate(13px)}.i-toggle-wrapper.i-toggle--medium{font-size:1em;gap:8px}.i-toggle-wrapper.i-toggle--medium .i-toggle{width:36px;height:20px;border-radius:10px}.i-toggle-wrapper.i-toggle--medium .i-toggle .i-toggle-thumb{width:14px;height:14px}.i-toggle-wrapper.i-toggle--medium .i-toggle.i-toggle--checked .i-toggle-thumb{transform:translate(17px)}.i-toggle-wrapper.i-toggle--large{font-size:1.2em;gap:10px}.i-toggle-wrapper.i-toggle--large .i-toggle{width:44px;height:24px;border-radius:12px}.i-toggle-wrapper.i-toggle--large .i-toggle .i-toggle-thumb{width:18px;height:18px}.i-toggle-wrapper.i-toggle--large .i-toggle.i-toggle--checked .i-toggle-thumb{transform:translate(21px)}.i-toggle-wrapper .i-toggle{position:relative;display:inline-flex;align-items:center;padding:0 2px;transition:background-color .2s ease,border-color .2s ease;cursor:pointer;box-sizing:border-box;flex-shrink:0}.i-toggle-wrapper .i-toggle:focus{outline:none;box-shadow:0 0 0 2px #3b82f64d}.i-toggle-wrapper .i-toggle .i-toggle-thumb{border-radius:50%;transition:transform .2s ease,background-color .2s ease;flex-shrink:0}.i-toggle-wrapper .i-toggle-label{cursor:pointer;-webkit-user-select:none;user-select:none;line-height:1.4}\n"] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: IToggle, decorators: [{
             type: Component,
@@ -6725,7 +6911,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.12", ngImpo
                             useExisting: forwardRef(() => IToggle),
                             multi: true,
                         },
-                    ], template: "<div\n  class=\"i-toggle-wrapper\"\n  [class.i-toggle--disabled]=\"disabled\"\n  [class.i-toggle--readonly]=\"readonly\"\n  [class.i-toggle--small]=\"size === 'small'\"\n  [class.i-toggle--medium]=\"size === 'medium'\"\n  [class.i-toggle--large]=\"size === 'large'\"\n>\n  <div\n    class=\"i-toggle\"\n    [class.i-toggle--checked]=\"checked\"\n    (click)=\"toggle()\"\n    [attr.id]=\"id || componentId\"\n    role=\"switch\"\n    [attr.aria-checked]=\"checked\"\n    [attr.aria-disabled]=\"disabled\"\n    [attr.aria-readonly]=\"readonly\"\n    [attr.aria-labelledby]=\"label ? (id || componentId) + '-label' : null\"\n    tabindex=\"0\"\n    (keydown.space)=\"handleKeydown($event)\"\n    (keydown.enter)=\"handleKeydown($event)\"\n  >\n    <span class=\"i-toggle-thumb\"></span>\n  </div>\n  @if (label) {\n  <label\n    [id]=\"(id || componentId) + '-label'\"\n    class=\"i-toggle-label\"\n    (click)=\"toggle()\"\n  >\n    {{ label }}\n  </label>\n  }\n</div>\n", styles: [".i-toggle-wrapper .i-toggle{background-color:var(--surface-border);border:1px solid var(--surface-border)}.i-toggle-wrapper .i-toggle:focus{box-shadow:0 2px 10px #0003}.i-toggle-wrapper .i-toggle:hover:not(.i-toggle--checked){background-color:color-mix(in srgb,var(--surface-border) 80%,var(--color-primary) 20%)}.i-toggle-wrapper .i-toggle.i-toggle--checked{background-color:var(--color-primary);border-color:var(--color-primary)}.i-toggle-wrapper .i-toggle.i-toggle--checked:hover{background-color:color-mix(in srgb,var(--color-primary) 80%,transparent);border-color:color-mix(in srgb,var(--color-primary) 80%,transparent)}.i-toggle-wrapper .i-toggle.i-toggle--checked .i-toggle-thumb,.i-toggle-wrapper .i-toggle .i-toggle-thumb{background-color:var(--color-contrast-inverse)}.i-toggle-wrapper .i-toggle-label{color:var(--color-text-primary)}.i-toggle-wrapper.i-toggle--disabled .i-toggle,.i-toggle-wrapper.i-toggle--disabled .i-toggle.i-toggle--checked{background-color:var(--color-disabled-background);border-color:var(--color-disabled-border)}.i-toggle-wrapper.i-toggle--disabled .i-toggle.i-toggle--checked .i-toggle-thumb,.i-toggle-wrapper.i-toggle--disabled .i-toggle .i-toggle-thumb{background-color:var(--color-text-disabled)}.i-toggle-wrapper.i-toggle--disabled .i-toggle-label{color:var(--color-text-disabled)}.i-toggle-wrapper{display:inline-flex;align-items:center;gap:8px;font-size:1em}.i-toggle-wrapper.i-toggle--disabled{opacity:.6;cursor:not-allowed}.i-toggle-wrapper.i-toggle--disabled .i-toggle,.i-toggle-wrapper.i-toggle--disabled .i-toggle-label{cursor:not-allowed;pointer-events:none}.i-toggle-wrapper.i-toggle--readonly .i-toggle,.i-toggle-wrapper.i-toggle--readonly .i-toggle-label{cursor:default}.i-toggle-wrapper.i-toggle--small{font-size:.9em;gap:6px}.i-toggle-wrapper.i-toggle--small .i-toggle{width:28px;height:16px;border-radius:8px}.i-toggle-wrapper.i-toggle--small .i-toggle .i-toggle-thumb{width:10px;height:10px}.i-toggle-wrapper.i-toggle--small .i-toggle.i-toggle--checked .i-toggle-thumb{transform:translate(13px)}.i-toggle-wrapper.i-toggle--medium{font-size:1em;gap:8px}.i-toggle-wrapper.i-toggle--medium .i-toggle{width:36px;height:20px;border-radius:10px}.i-toggle-wrapper.i-toggle--medium .i-toggle .i-toggle-thumb{width:14px;height:14px}.i-toggle-wrapper.i-toggle--medium .i-toggle.i-toggle--checked .i-toggle-thumb{transform:translate(17px)}.i-toggle-wrapper.i-toggle--large{font-size:1.2em;gap:10px}.i-toggle-wrapper.i-toggle--large .i-toggle{width:44px;height:24px;border-radius:12px}.i-toggle-wrapper.i-toggle--large .i-toggle .i-toggle-thumb{width:18px;height:18px}.i-toggle-wrapper.i-toggle--large .i-toggle.i-toggle--checked .i-toggle-thumb{transform:translate(21px)}.i-toggle-wrapper .i-toggle{position:relative;display:inline-flex;align-items:center;padding:0 2px;transition:background-color .2s ease,border-color .2s ease;cursor:pointer;box-sizing:border-box;flex-shrink:0}.i-toggle-wrapper .i-toggle:focus{outline:none;box-shadow:0 0 0 2px #3b82f64d}.i-toggle-wrapper .i-toggle .i-toggle-thumb{border-radius:50%;transition:transform .2s ease,background-color .2s ease;flex-shrink:0}.i-toggle-wrapper .i-toggle-label{cursor:pointer;-webkit-user-select:none;user-select:none;line-height:1.4}\n"] }]
+                    ], template: "<div\n  class=\"i-toggle-wrapper\"\n  [class.i-toggle--disabled]=\"disabled\"\n  [class.i-toggle--readonly]=\"readonly\"\n  [class.i-toggle--small]=\"size === 'small'\"\n  [class.i-toggle--medium]=\"size === 'medium'\"\n  [class.i-toggle--large]=\"size === 'large'\"\n>\n  <div\n    class=\"i-toggle\"\n    [class.i-toggle--checked]=\"checked\"\n    (click)=\"toggle()\"\n    [attr.id]=\"id || componentId\"\n    role=\"switch\"\n    [attr.aria-checked]=\"checked\"\n    [attr.aria-disabled]=\"disabled\"\n    [attr.aria-readonly]=\"readonly\"\n    [attr.aria-labelledby]=\"label ? (id || componentId) + '-label' : null\"\n    tabindex=\"0\"\n    (keydown.space)=\"handleKeydown($event)\"\n    (keydown.enter)=\"handleKeydown($event)\"\n  >\n    <span class=\"i-toggle-thumb\"></span>\n  </div>\n  @if (label) {\n    <label\n      [id]=\"(id || componentId) + '-label'\"\n      class=\"i-toggle-label\"\n      (click)=\"toggle()\"\n    >\n      {{ label }}\n    </label>\n  }\n</div>\n", styles: [".i-toggle-wrapper .i-toggle{background-color:var(--surface-border);border:1px solid var(--surface-border)}.i-toggle-wrapper .i-toggle:focus{box-shadow:0 2px 10px #0003}.i-toggle-wrapper .i-toggle:hover:not(.i-toggle--checked){background-color:color-mix(in srgb,var(--surface-border) 80%,var(--color-primary) 20%)}.i-toggle-wrapper .i-toggle.i-toggle--checked{background-color:var(--color-primary);border-color:var(--color-primary)}.i-toggle-wrapper .i-toggle.i-toggle--checked:hover{background-color:color-mix(in srgb,var(--color-primary) 80%,transparent);border-color:color-mix(in srgb,var(--color-primary) 80%,transparent)}.i-toggle-wrapper .i-toggle.i-toggle--checked .i-toggle-thumb,.i-toggle-wrapper .i-toggle .i-toggle-thumb{background-color:var(--color-contrast-inverse)}.i-toggle-wrapper .i-toggle-label{color:var(--color-text-primary)}.i-toggle-wrapper.i-toggle--disabled .i-toggle,.i-toggle-wrapper.i-toggle--disabled .i-toggle.i-toggle--checked{background-color:var(--color-disabled-background);border-color:var(--color-disabled-border)}.i-toggle-wrapper.i-toggle--disabled .i-toggle.i-toggle--checked .i-toggle-thumb,.i-toggle-wrapper.i-toggle--disabled .i-toggle .i-toggle-thumb{background-color:var(--color-text-disabled)}.i-toggle-wrapper.i-toggle--disabled .i-toggle-label{color:var(--color-text-disabled)}.i-toggle-wrapper{display:inline-flex;align-items:center;gap:8px;font-size:1em}.i-toggle-wrapper.i-toggle--disabled{opacity:.6;cursor:not-allowed}.i-toggle-wrapper.i-toggle--disabled .i-toggle,.i-toggle-wrapper.i-toggle--disabled .i-toggle-label{cursor:not-allowed;pointer-events:none}.i-toggle-wrapper.i-toggle--readonly .i-toggle,.i-toggle-wrapper.i-toggle--readonly .i-toggle-label{cursor:default}.i-toggle-wrapper.i-toggle--small{font-size:.9em;gap:6px}.i-toggle-wrapper.i-toggle--small .i-toggle{width:28px;height:16px;border-radius:8px}.i-toggle-wrapper.i-toggle--small .i-toggle .i-toggle-thumb{width:10px;height:10px}.i-toggle-wrapper.i-toggle--small .i-toggle.i-toggle--checked .i-toggle-thumb{transform:translate(13px)}.i-toggle-wrapper.i-toggle--medium{font-size:1em;gap:8px}.i-toggle-wrapper.i-toggle--medium .i-toggle{width:36px;height:20px;border-radius:10px}.i-toggle-wrapper.i-toggle--medium .i-toggle .i-toggle-thumb{width:14px;height:14px}.i-toggle-wrapper.i-toggle--medium .i-toggle.i-toggle--checked .i-toggle-thumb{transform:translate(17px)}.i-toggle-wrapper.i-toggle--large{font-size:1.2em;gap:10px}.i-toggle-wrapper.i-toggle--large .i-toggle{width:44px;height:24px;border-radius:12px}.i-toggle-wrapper.i-toggle--large .i-toggle .i-toggle-thumb{width:18px;height:18px}.i-toggle-wrapper.i-toggle--large .i-toggle.i-toggle--checked .i-toggle-thumb{transform:translate(21px)}.i-toggle-wrapper .i-toggle{position:relative;display:inline-flex;align-items:center;padding:0 2px;transition:background-color .2s ease,border-color .2s ease;cursor:pointer;box-sizing:border-box;flex-shrink:0}.i-toggle-wrapper .i-toggle:focus{outline:none;box-shadow:0 0 0 2px #3b82f64d}.i-toggle-wrapper .i-toggle .i-toggle-thumb{border-radius:50%;transition:transform .2s ease,background-color .2s ease;flex-shrink:0}.i-toggle-wrapper .i-toggle-label{cursor:pointer;-webkit-user-select:none;user-select:none;line-height:1.4}\n"] }]
         }], propDecorators: { label: [{
                 type: Input
             }], id: [{
@@ -7227,11 +7413,11 @@ class ITreeView {
             allNodes.length > 0 && selectedNodes.length === allNodes.length;
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: ITreeView, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.12", type: ITreeView, isStandalone: true, selector: "i-tree-view", inputs: { value: "value", selectionMode: "selectionMode", selection: "selection", scrollHeight: "scrollHeight", loading: "loading", emptyMessage: "emptyMessage", togglerTemplate: "togglerTemplate", filter: "filter", filterBy: "filterBy", filterMode: "filterMode", filterPlaceholder: "filterPlaceholder", filteredNodes: "filteredNodes", validateDrop: "validateDrop", propagateSelectionUp: "propagateSelectionUp", propagateSelectionDown: "propagateSelectionDown", selectAll: "selectAll" }, outputs: { onNodeSelect: "onNodeSelect", onNodeUnselect: "onNodeUnselect", onNodeExpand: "onNodeExpand", onNodeCollapse: "onNodeCollapse", selectionChange: "selectionChange" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"i-tree-view-wrapper\" [style.height]=\"scrollHeight\">\n  @if (filter) {\n  <div class=\"i-tree-view-filter-container\">\n    <i-input-text\n      [(ngModel)]=\"filterValue\"\n      [placeholder]=\"filterPlaceholder\"\n      [icon]=\"'pi pi-search'\"\n      [useFloatLabel]=\"false\"\n      [fluid]=\"true\"\n      (input)=\"onFilterKeyup($event)\"\n      class=\"i-tree-view-filter\"\n    >\n    </i-input-text>\n  </div>\n  } @if (selectAll && selectionMode === 'checkbox') {\n  <div class=\"i-tree-view-select-all-container\">\n    <div class=\"select-box\">\n      <i-checkbox\n        [(ngModel)]=\"selectAllChecked\"\n        [id]=\"componentId + '-select-all'\"\n        [label]=\"'Select All'\"\n        (ngModelChange)=\"onSelectAllChange()\"\n      />\n    </div>\n  </div>\n  }\n\n  <div class=\"i-tree-view-container\">\n    @if (loading) {\n    <div class=\"i-tree-view-loading\">\n      <i class=\"pi pi-spin pi-spinner\"></i>\n      <span>Loading...</span>\n    </div>\n    } @else if (filteredValue.length === 0) {\n    <div class=\"i-tree-view-empty\">\n      <span>{{ emptyMessage }}</span>\n    </div>\n    } @else {\n    <ul class=\"i-tree-view-root\" [attr.id]=\"componentId\" role=\"tree\">\n      @for (node of filteredValue; track node.key || $index) {\n      <li>\n        <ng-container\n          [ngTemplateOutlet]=\"nodeTemplate\"\n          [ngTemplateOutletContext]=\"{ $implicit: node, level: 0 }\"\n        ></ng-container>\n      </li>\n      }\n    </ul>\n    }\n  </div>\n</div>\n\n<ng-template #nodeTemplate let-node let-level=\"level\">\n  <div\n    class=\"i-tree-view-node\"\n    [class.i-tree-view-node--selected]=\"isNodeHighlighted(node)\"\n    [class.i-tree-view-node--leaf]=\"!hasChildren(node)\"\n    [class.i-tree-view-node--expanded]=\"node.expanded\"\n    [class.i-tree-view-node--collapsed]=\"!node.expanded && hasChildren(node)\"\n    [class.i-tree-view-node--temporary-highlight]=\"\n      isTemporarilyHighlighted(node)\n    \"\n    [class]=\"node.styleClass\"\n    [style.padding-left.rem]=\"level * 1\"\n    role=\"treeitem\"\n    [attr.aria-expanded]=\"hasChildren(node) ? node.expanded : null\"\n    [attr.aria-selected]=\"isSelected(node)\"\n    [attr.aria-level]=\"level + 1\"\n    tabindex=\"0\"\n    (click)=\"onNodeClick($event, node)\"\n    (keydown.enter)=\"onNodeClick($event, node)\"\n    (keydown.space)=\"$event.preventDefault(); onNodeClick($event, node)\"\n  >\n    <div class=\"i-tree-view-node-content\">\n      @if (hasChildren(node)) {\n      <button\n        type=\"button\"\n        class=\"i-tree-view-toggler\"\n        (click)=\"$event.stopPropagation(); toggleNode($event, node)\"\n        [attr.aria-label]=\"node.expanded ? 'Collapse' : 'Expand'\"\n        tabindex=\"-1\"\n      >\n        <i [class]=\"getToggleIcon(node)\"></i>\n      </button>\n      } @else {\n      <span class=\"i-tree-view-toggler-spacer\"></span>\n      } @if (selectionMode === 'checkbox') {\n      <div class=\"i-tree-view-checkbox-container\">\n        <i-checkbox\n          [checked]=\"isSelected(node) && !isPartiallySelected(node)\"\n          [indeterminate]=\"isPartiallySelected(node)\"\n          (onChange)=\"onCheckboxChange($event, node)\"\n          [id]=\"getCheckboxId(node)\"\n          size=\"small\"\n          tabindex=\"-1\"\n        >\n        </i-checkbox>\n      </div>\n      }\n\n      <i [class]=\"getNodeIcon(node)\" class=\"i-tree-view-node-icon\"></i>\n\n      <span class=\"i-tree-view-node-label\">{{ node.label }}</span>\n    </div>\n  </div>\n\n  @if (hasChildren(node) && node.expanded) {\n  <ul class=\"i-tree-view-children\" role=\"group\">\n    @for (child of node.children; track child.key || $index) {\n    <li>\n      <ng-container\n        [ngTemplateOutlet]=\"nodeTemplate\"\n        [ngTemplateOutletContext]=\"{ $implicit: child, level: level + 1 }\"\n      ></ng-container>\n    </li>\n    }\n  </ul>\n  }\n</ng-template>\n", styles: [".i-tree-view-wrapper{background-color:var(--surface-ground);color:var(--color-text-primary);border:1px solid var(--surface-border);border-radius:4px;overflow:hidden}.i-tree-view-wrapper .i-tree-view-select-all-container{border-bottom:1px solid var(--surface-border)}.i-tree-view-wrapper .i-tree-view-loading{color:var(--color-text-secondary)}.i-tree-view-wrapper .i-tree-view-loading .pi-spinner{color:var(--color-primary)}.i-tree-view-wrapper .i-tree-view-empty{color:var(--color-text-secondary)}.i-tree-view-node .i-tree-view-node-content:hover{background-color:var(--surface-hover)}.i-tree-view-node.i-tree-view-node--selected .i-tree-view-node-content,.i-tree-view-node.i-tree-view-node--temporary-highlight .i-tree-view-node-content{background-color:var(--surface-hover);border-color:var(--surface-border)}.i-tree-view-node .i-tree-view-toggler{color:var(--color-text-secondary)}.i-tree-view-node .i-tree-view-toggler:hover{background-color:var(--surface-hover);color:var(--color-text-primary)}.i-tree-view-node .i-tree-view-checkbox-container .i-tree-view-partial-overlay i{color:var(--color-primary)}.i-tree-view-node .i-tree-view-node-icon{color:var(--color-text-secondary)}.i-tree-view-node .i-tree-view-node-label{color:var(--color-text-primary)}.i-tree-view-wrapper{padding:8px 8px 0;overflow:hidden;box-sizing:border-box;display:flex;flex-direction:column}.i-tree-view-wrapper .i-tree-view-filter-container{position:relative;margin-bottom:8px;flex-shrink:0}.i-tree-view-wrapper .i-tree-view-select-all-container{margin-bottom:8px;padding:8px 0;flex-shrink:0}.i-tree-view-wrapper .i-tree-view-select-all-container .select-box{padding-left:10px}.i-tree-view-wrapper .i-tree-view-container{overflow:auto;flex:1;min-height:0;box-sizing:border-box}.i-tree-view-wrapper .i-tree-view-container::-webkit-scrollbar-track{background:var(--scrollbar-track, transparent);border-radius:var(--scrollbar-radius, 3px)}.i-tree-view-wrapper .i-tree-view-container::-webkit-scrollbar-thumb{background:#0003;border-radius:var(--scrollbar-radius, 3px);transition:background .2s ease}.i-tree-view-wrapper .i-tree-view-container::-webkit-scrollbar-thumb:hover{background:#00000059}.i-tree-view-wrapper .i-tree-view-container::-webkit-scrollbar-thumb:active{background:#00000080}.i-tree-view-wrapper .i-tree-view-container::-webkit-scrollbar-corner{background:transparent}.i-tree-view-wrapper .i-tree-view-container{scrollbar-width:thin;scrollbar-color:rgba(0,0,0,.2) transparent;scroll-behavior:smooth}.i-tree-view-wrapper .i-tree-view-container::-webkit-scrollbar-thumb{background:var(--scrollbar-thumb, var(--color-text-secondary))}.i-tree-view-wrapper .i-tree-view-container{scrollbar-color:var(--scrollbar-thumb, var(--color-text-secondary)) var(--scrollbar-track, transparent)}.i-tree-view-wrapper .i-tree-view-container::-webkit-scrollbar{width:var(--scrollbar-size, 6px);height:var(--scrollbar-size, 6px)}.i-tree-view-wrapper .i-tree-view-container::-webkit-scrollbar-track{background:var(--scrollbar-track-dropdown, rgba(0, 0, 0, .05));border-radius:var(--scrollbar-radius, 3px);margin:2px 0}.i-tree-view-wrapper .i-tree-view-container::-webkit-scrollbar-thumb{border-radius:var(--scrollbar-radius, 3px);min-height:20px;background:var(--scrollbar-thumb, var(--color-text-secondary))}.i-tree-view-wrapper .i-tree-view-container::-webkit-scrollbar-thumb:hover{background:var(--scrollbar-thumb-hover, var(--color-text-primary))}.i-tree-view-wrapper .i-tree-view-container::-webkit-scrollbar-thumb:active{background:var(--scrollbar-thumb-active, var(--color-primary))}.i-tree-view-wrapper .i-tree-view-container{scrollbar-width:thin;scrollbar-color:var(--scrollbar-thumb, var(--color-text-secondary)) var(--scrollbar-track-dropdown, rgba(0, 0, 0, .05))}.i-tree-view-wrapper .i-tree-view-loading{display:flex;align-items:center;justify-content:center;gap:8px;padding:20px;font-size:1em}.i-tree-view-wrapper .i-tree-view-loading .pi-spinner{font-size:16px}.i-tree-view-wrapper .i-tree-view-empty{display:flex;align-items:center;justify-content:center;padding:20px;font-size:1em;font-style:italic}.i-tree-view-root,.i-tree-view-children{list-style:none;margin:0;padding:0}.i-tree-view-children{padding-left:0}.i-tree-view-node{position:relative;cursor:pointer;outline:none;-webkit-user-select:none;user-select:none}.i-tree-view-node:focus{outline:none}.i-tree-view-node.i-tree-view-node--temporary-highlight .i-tree-view-node-content{animation:highlight-fade .7s ease-out}.i-tree-view-node .i-tree-view-node-content{display:flex;align-items:center;gap:4px;padding:4px 8px;border-radius:4px;transition:all .15s ease;min-height:32px}.i-tree-view-node .i-tree-view-toggler{display:flex;align-items:center;justify-content:center;width:20px;height:20px;border:none;background:transparent;cursor:pointer;border-radius:2px;transition:all .15s ease}.i-tree-view-node .i-tree-view-toggler:focus{outline:none}.i-tree-view-node .i-tree-view-toggler i{font-size:12px;transition:transform .15s ease}.i-tree-view-node .i-tree-view-toggler-spacer{width:20px;height:20px;flex-shrink:0}.i-tree-view-node .i-tree-view-checkbox-container{display:flex;align-items:center;flex-shrink:0}.i-tree-view-node .i-tree-view-node-icon{font-size:1em;flex-shrink:0}.i-tree-view-node .i-tree-view-node-label{font-size:1em;line-height:1.4;flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { 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: 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"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.12", type: ITreeView, isStandalone: true, selector: "i-tree-view", inputs: { value: "value", selectionMode: "selectionMode", selection: "selection", scrollHeight: "scrollHeight", loading: "loading", emptyMessage: "emptyMessage", togglerTemplate: "togglerTemplate", filter: "filter", filterBy: "filterBy", filterMode: "filterMode", filterPlaceholder: "filterPlaceholder", filteredNodes: "filteredNodes", validateDrop: "validateDrop", propagateSelectionUp: "propagateSelectionUp", propagateSelectionDown: "propagateSelectionDown", selectAll: "selectAll" }, outputs: { onNodeSelect: "onNodeSelect", onNodeUnselect: "onNodeUnselect", onNodeExpand: "onNodeExpand", onNodeCollapse: "onNodeCollapse", selectionChange: "selectionChange" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"i-tree-view-wrapper\" [style.height]=\"scrollHeight\">\n  @if (filter) {\n    <div class=\"i-tree-view-filter-container\">\n      <i-input-text\n        [(ngModel)]=\"filterValue\"\n        [placeholder]=\"filterPlaceholder\"\n        [icon]=\"'pi pi-search'\"\n        [useFloatLabel]=\"false\"\n        [fluid]=\"true\"\n        (input)=\"onFilterKeyup($event)\"\n        class=\"i-tree-view-filter\"\n      >\n      </i-input-text>\n    </div>\n  }\n  @if (selectAll && selectionMode === \"checkbox\") {\n    <div class=\"i-tree-view-select-all-container\">\n      <div class=\"select-box\">\n        <i-checkbox\n          [(ngModel)]=\"selectAllChecked\"\n          [id]=\"componentId + '-select-all'\"\n          [label]=\"'Select All'\"\n          (ngModelChange)=\"onSelectAllChange()\"\n        />\n      </div>\n    </div>\n  }\n\n  <div class=\"i-tree-view-container\">\n    @if (loading) {\n      <div class=\"i-tree-view-loading\">\n        <i class=\"pi pi-spin pi-spinner\"></i>\n        <span>Loading...</span>\n      </div>\n    } @else if (filteredValue.length === 0) {\n      <div class=\"i-tree-view-empty\">\n        <span>{{ emptyMessage }}</span>\n      </div>\n    } @else {\n      <ul class=\"i-tree-view-root\" [attr.id]=\"componentId\" role=\"tree\">\n        @for (node of filteredValue; track node.key || $index) {\n          <li>\n            <ng-container\n              [ngTemplateOutlet]=\"nodeTemplate\"\n              [ngTemplateOutletContext]=\"{ $implicit: node, level: 0 }\"\n            ></ng-container>\n          </li>\n        }\n      </ul>\n    }\n  </div>\n</div>\n\n<ng-template #nodeTemplate let-node let-level=\"level\">\n  <div\n    class=\"i-tree-view-node\"\n    [class.i-tree-view-node--selected]=\"isNodeHighlighted(node)\"\n    [class.i-tree-view-node--leaf]=\"!hasChildren(node)\"\n    [class.i-tree-view-node--expanded]=\"node.expanded\"\n    [class.i-tree-view-node--collapsed]=\"!node.expanded && hasChildren(node)\"\n    [class.i-tree-view-node--temporary-highlight]=\"\n      isTemporarilyHighlighted(node)\n    \"\n    [class]=\"node.styleClass\"\n    [style.padding-left.rem]=\"level * 1\"\n    role=\"treeitem\"\n    [attr.aria-expanded]=\"hasChildren(node) ? node.expanded : null\"\n    [attr.aria-selected]=\"isSelected(node)\"\n    [attr.aria-level]=\"level + 1\"\n    tabindex=\"0\"\n    (click)=\"onNodeClick($event, node)\"\n    (keydown.enter)=\"onNodeClick($event, node)\"\n    (keydown.space)=\"$event.preventDefault(); onNodeClick($event, node)\"\n  >\n    <div class=\"i-tree-view-node-content\">\n      @if (hasChildren(node)) {\n        <button\n          type=\"button\"\n          class=\"i-tree-view-toggler\"\n          (click)=\"$event.stopPropagation(); toggleNode($event, node)\"\n          [attr.aria-label]=\"node.expanded ? 'Collapse' : 'Expand'\"\n          tabindex=\"-1\"\n        >\n          <i [class]=\"getToggleIcon(node)\"></i>\n        </button>\n      } @else {\n        <span class=\"i-tree-view-toggler-spacer\"></span>\n      }\n      @if (selectionMode === \"checkbox\") {\n        <div class=\"i-tree-view-checkbox-container\">\n          <i-checkbox\n            [checked]=\"isSelected(node) && !isPartiallySelected(node)\"\n            [indeterminate]=\"isPartiallySelected(node)\"\n            (onChange)=\"onCheckboxChange($event, node)\"\n            [id]=\"getCheckboxId(node)\"\n            size=\"small\"\n            tabindex=\"-1\"\n          >\n          </i-checkbox>\n        </div>\n      }\n\n      <i [class]=\"getNodeIcon(node)\" class=\"i-tree-view-node-icon\"></i>\n\n      <span class=\"i-tree-view-node-label\">{{ node.label }}</span>\n    </div>\n  </div>\n\n  @if (hasChildren(node) && node.expanded) {\n    <ul class=\"i-tree-view-children\" role=\"group\">\n      @for (child of node.children; track child.key || $index) {\n        <li>\n          <ng-container\n            [ngTemplateOutlet]=\"nodeTemplate\"\n            [ngTemplateOutletContext]=\"{ $implicit: child, level: level + 1 }\"\n          ></ng-container>\n        </li>\n      }\n    </ul>\n  }\n</ng-template>\n", styles: [".i-tree-view-wrapper{background-color:var(--surface-ground);color:var(--color-text-primary);border:1px solid var(--surface-border);border-radius:4px;overflow:hidden}.i-tree-view-wrapper .i-tree-view-select-all-container{border-bottom:1px solid var(--surface-border)}.i-tree-view-wrapper .i-tree-view-loading{color:var(--color-text-secondary)}.i-tree-view-wrapper .i-tree-view-loading .pi-spinner{color:var(--color-primary)}.i-tree-view-wrapper .i-tree-view-empty{color:var(--color-text-secondary)}.i-tree-view-node .i-tree-view-node-content:hover{background-color:var(--surface-hover)}.i-tree-view-node.i-tree-view-node--selected .i-tree-view-node-content,.i-tree-view-node.i-tree-view-node--temporary-highlight .i-tree-view-node-content{background-color:var(--surface-hover);border-color:var(--surface-border)}.i-tree-view-node .i-tree-view-toggler{color:var(--color-text-secondary)}.i-tree-view-node .i-tree-view-toggler:hover{background-color:var(--surface-hover);color:var(--color-text-primary)}.i-tree-view-node .i-tree-view-checkbox-container .i-tree-view-partial-overlay i{color:var(--color-primary)}.i-tree-view-node .i-tree-view-node-icon{color:var(--color-text-secondary)}.i-tree-view-node .i-tree-view-node-label{color:var(--color-text-primary)}.i-tree-view-wrapper{padding:8px 8px 0;overflow:hidden;box-sizing:border-box;display:flex;flex-direction:column}.i-tree-view-wrapper .i-tree-view-filter-container{position:relative;margin-bottom:8px;flex-shrink:0}.i-tree-view-wrapper .i-tree-view-select-all-container{margin-bottom:8px;padding:8px 0;flex-shrink:0}.i-tree-view-wrapper .i-tree-view-select-all-container .select-box{padding-left:10px}.i-tree-view-wrapper .i-tree-view-container{overflow:auto;flex:1;min-height:0;box-sizing:border-box}.i-tree-view-wrapper .i-tree-view-container::-webkit-scrollbar-track{background:var(--scrollbar-track, transparent);border-radius:var(--scrollbar-radius, 3px)}.i-tree-view-wrapper .i-tree-view-container::-webkit-scrollbar-thumb{background:#0003;border-radius:var(--scrollbar-radius, 3px);transition:background .2s ease}.i-tree-view-wrapper .i-tree-view-container::-webkit-scrollbar-thumb:hover{background:#00000059}.i-tree-view-wrapper .i-tree-view-container::-webkit-scrollbar-thumb:active{background:#00000080}.i-tree-view-wrapper .i-tree-view-container::-webkit-scrollbar-corner{background:transparent}.i-tree-view-wrapper .i-tree-view-container{scrollbar-width:thin;scrollbar-color:rgba(0,0,0,.2) transparent;scroll-behavior:smooth}.i-tree-view-wrapper .i-tree-view-container::-webkit-scrollbar-thumb{background:var(--scrollbar-thumb, var(--color-text-secondary))}.i-tree-view-wrapper .i-tree-view-container{scrollbar-color:var(--scrollbar-thumb, var(--color-text-secondary)) var(--scrollbar-track, transparent)}.i-tree-view-wrapper .i-tree-view-container::-webkit-scrollbar{width:var(--scrollbar-size, 6px);height:var(--scrollbar-size, 6px)}.i-tree-view-wrapper .i-tree-view-container::-webkit-scrollbar-track{background:var(--scrollbar-track-dropdown, rgba(0, 0, 0, .05));border-radius:var(--scrollbar-radius, 3px);margin:2px 0}.i-tree-view-wrapper .i-tree-view-container::-webkit-scrollbar-thumb{border-radius:var(--scrollbar-radius, 3px);min-height:20px;background:var(--scrollbar-thumb, var(--color-text-secondary))}.i-tree-view-wrapper .i-tree-view-container::-webkit-scrollbar-thumb:hover{background:var(--scrollbar-thumb-hover, var(--color-text-primary))}.i-tree-view-wrapper .i-tree-view-container::-webkit-scrollbar-thumb:active{background:var(--scrollbar-thumb-active, var(--color-primary))}.i-tree-view-wrapper .i-tree-view-container{scrollbar-width:thin;scrollbar-color:var(--scrollbar-thumb, var(--color-text-secondary)) var(--scrollbar-track-dropdown, rgba(0, 0, 0, .05))}.i-tree-view-wrapper .i-tree-view-loading{display:flex;align-items:center;justify-content:center;gap:8px;padding:20px;font-size:1em}.i-tree-view-wrapper .i-tree-view-loading .pi-spinner{font-size:16px}.i-tree-view-wrapper .i-tree-view-empty{display:flex;align-items:center;justify-content:center;padding:20px;font-size:1em;font-style:italic}.i-tree-view-root,.i-tree-view-children{list-style:none;margin:0;padding:0}.i-tree-view-children{padding-left:0}.i-tree-view-node{position:relative;cursor:pointer;outline:none;-webkit-user-select:none;user-select:none}.i-tree-view-node:focus{outline:none}.i-tree-view-node.i-tree-view-node--temporary-highlight .i-tree-view-node-content{animation:highlight-fade .7s ease-out}.i-tree-view-node .i-tree-view-node-content{display:flex;align-items:center;gap:4px;padding:4px 8px;border-radius:4px;transition:all .15s ease;min-height:32px}.i-tree-view-node .i-tree-view-toggler{display:flex;align-items:center;justify-content:center;width:20px;height:20px;border:none;background:transparent;cursor:pointer;border-radius:2px;transition:all .15s ease}.i-tree-view-node .i-tree-view-toggler:focus{outline:none}.i-tree-view-node .i-tree-view-toggler i{font-size:12px;transition:transform .15s ease}.i-tree-view-node .i-tree-view-toggler-spacer{width:20px;height:20px;flex-shrink:0}.i-tree-view-node .i-tree-view-checkbox-container{display:flex;align-items:center;flex-shrink:0}.i-tree-view-node .i-tree-view-node-icon{font-size:1em;flex-shrink:0}.i-tree-view-node .i-tree-view-node-label{font-size:1em;line-height:1.4;flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { 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: 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"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: ITreeView, decorators: [{
             type: Component,
-            args: [{ selector: 'i-tree-view', standalone: true, imports: [CommonModule, FormsModule, ICheckbox, IInputText], template: "<div class=\"i-tree-view-wrapper\" [style.height]=\"scrollHeight\">\n  @if (filter) {\n  <div class=\"i-tree-view-filter-container\">\n    <i-input-text\n      [(ngModel)]=\"filterValue\"\n      [placeholder]=\"filterPlaceholder\"\n      [icon]=\"'pi pi-search'\"\n      [useFloatLabel]=\"false\"\n      [fluid]=\"true\"\n      (input)=\"onFilterKeyup($event)\"\n      class=\"i-tree-view-filter\"\n    >\n    </i-input-text>\n  </div>\n  } @if (selectAll && selectionMode === 'checkbox') {\n  <div class=\"i-tree-view-select-all-container\">\n    <div class=\"select-box\">\n      <i-checkbox\n        [(ngModel)]=\"selectAllChecked\"\n        [id]=\"componentId + '-select-all'\"\n        [label]=\"'Select All'\"\n        (ngModelChange)=\"onSelectAllChange()\"\n      />\n    </div>\n  </div>\n  }\n\n  <div class=\"i-tree-view-container\">\n    @if (loading) {\n    <div class=\"i-tree-view-loading\">\n      <i class=\"pi pi-spin pi-spinner\"></i>\n      <span>Loading...</span>\n    </div>\n    } @else if (filteredValue.length === 0) {\n    <div class=\"i-tree-view-empty\">\n      <span>{{ emptyMessage }}</span>\n    </div>\n    } @else {\n    <ul class=\"i-tree-view-root\" [attr.id]=\"componentId\" role=\"tree\">\n      @for (node of filteredValue; track node.key || $index) {\n      <li>\n        <ng-container\n          [ngTemplateOutlet]=\"nodeTemplate\"\n          [ngTemplateOutletContext]=\"{ $implicit: node, level: 0 }\"\n        ></ng-container>\n      </li>\n      }\n    </ul>\n    }\n  </div>\n</div>\n\n<ng-template #nodeTemplate let-node let-level=\"level\">\n  <div\n    class=\"i-tree-view-node\"\n    [class.i-tree-view-node--selected]=\"isNodeHighlighted(node)\"\n    [class.i-tree-view-node--leaf]=\"!hasChildren(node)\"\n    [class.i-tree-view-node--expanded]=\"node.expanded\"\n    [class.i-tree-view-node--collapsed]=\"!node.expanded && hasChildren(node)\"\n    [class.i-tree-view-node--temporary-highlight]=\"\n      isTemporarilyHighlighted(node)\n    \"\n    [class]=\"node.styleClass\"\n    [style.padding-left.rem]=\"level * 1\"\n    role=\"treeitem\"\n    [attr.aria-expanded]=\"hasChildren(node) ? node.expanded : null\"\n    [attr.aria-selected]=\"isSelected(node)\"\n    [attr.aria-level]=\"level + 1\"\n    tabindex=\"0\"\n    (click)=\"onNodeClick($event, node)\"\n    (keydown.enter)=\"onNodeClick($event, node)\"\n    (keydown.space)=\"$event.preventDefault(); onNodeClick($event, node)\"\n  >\n    <div class=\"i-tree-view-node-content\">\n      @if (hasChildren(node)) {\n      <button\n        type=\"button\"\n        class=\"i-tree-view-toggler\"\n        (click)=\"$event.stopPropagation(); toggleNode($event, node)\"\n        [attr.aria-label]=\"node.expanded ? 'Collapse' : 'Expand'\"\n        tabindex=\"-1\"\n      >\n        <i [class]=\"getToggleIcon(node)\"></i>\n      </button>\n      } @else {\n      <span class=\"i-tree-view-toggler-spacer\"></span>\n      } @if (selectionMode === 'checkbox') {\n      <div class=\"i-tree-view-checkbox-container\">\n        <i-checkbox\n          [checked]=\"isSelected(node) && !isPartiallySelected(node)\"\n          [indeterminate]=\"isPartiallySelected(node)\"\n          (onChange)=\"onCheckboxChange($event, node)\"\n          [id]=\"getCheckboxId(node)\"\n          size=\"small\"\n          tabindex=\"-1\"\n        >\n        </i-checkbox>\n      </div>\n      }\n\n      <i [class]=\"getNodeIcon(node)\" class=\"i-tree-view-node-icon\"></i>\n\n      <span class=\"i-tree-view-node-label\">{{ node.label }}</span>\n    </div>\n  </div>\n\n  @if (hasChildren(node) && node.expanded) {\n  <ul class=\"i-tree-view-children\" role=\"group\">\n    @for (child of node.children; track child.key || $index) {\n    <li>\n      <ng-container\n        [ngTemplateOutlet]=\"nodeTemplate\"\n        [ngTemplateOutletContext]=\"{ $implicit: child, level: level + 1 }\"\n      ></ng-container>\n    </li>\n    }\n  </ul>\n  }\n</ng-template>\n", styles: [".i-tree-view-wrapper{background-color:var(--surface-ground);color:var(--color-text-primary);border:1px solid var(--surface-border);border-radius:4px;overflow:hidden}.i-tree-view-wrapper .i-tree-view-select-all-container{border-bottom:1px solid var(--surface-border)}.i-tree-view-wrapper .i-tree-view-loading{color:var(--color-text-secondary)}.i-tree-view-wrapper .i-tree-view-loading .pi-spinner{color:var(--color-primary)}.i-tree-view-wrapper .i-tree-view-empty{color:var(--color-text-secondary)}.i-tree-view-node .i-tree-view-node-content:hover{background-color:var(--surface-hover)}.i-tree-view-node.i-tree-view-node--selected .i-tree-view-node-content,.i-tree-view-node.i-tree-view-node--temporary-highlight .i-tree-view-node-content{background-color:var(--surface-hover);border-color:var(--surface-border)}.i-tree-view-node .i-tree-view-toggler{color:var(--color-text-secondary)}.i-tree-view-node .i-tree-view-toggler:hover{background-color:var(--surface-hover);color:var(--color-text-primary)}.i-tree-view-node .i-tree-view-checkbox-container .i-tree-view-partial-overlay i{color:var(--color-primary)}.i-tree-view-node .i-tree-view-node-icon{color:var(--color-text-secondary)}.i-tree-view-node .i-tree-view-node-label{color:var(--color-text-primary)}.i-tree-view-wrapper{padding:8px 8px 0;overflow:hidden;box-sizing:border-box;display:flex;flex-direction:column}.i-tree-view-wrapper .i-tree-view-filter-container{position:relative;margin-bottom:8px;flex-shrink:0}.i-tree-view-wrapper .i-tree-view-select-all-container{margin-bottom:8px;padding:8px 0;flex-shrink:0}.i-tree-view-wrapper .i-tree-view-select-all-container .select-box{padding-left:10px}.i-tree-view-wrapper .i-tree-view-container{overflow:auto;flex:1;min-height:0;box-sizing:border-box}.i-tree-view-wrapper .i-tree-view-container::-webkit-scrollbar-track{background:var(--scrollbar-track, transparent);border-radius:var(--scrollbar-radius, 3px)}.i-tree-view-wrapper .i-tree-view-container::-webkit-scrollbar-thumb{background:#0003;border-radius:var(--scrollbar-radius, 3px);transition:background .2s ease}.i-tree-view-wrapper .i-tree-view-container::-webkit-scrollbar-thumb:hover{background:#00000059}.i-tree-view-wrapper .i-tree-view-container::-webkit-scrollbar-thumb:active{background:#00000080}.i-tree-view-wrapper .i-tree-view-container::-webkit-scrollbar-corner{background:transparent}.i-tree-view-wrapper .i-tree-view-container{scrollbar-width:thin;scrollbar-color:rgba(0,0,0,.2) transparent;scroll-behavior:smooth}.i-tree-view-wrapper .i-tree-view-container::-webkit-scrollbar-thumb{background:var(--scrollbar-thumb, var(--color-text-secondary))}.i-tree-view-wrapper .i-tree-view-container{scrollbar-color:var(--scrollbar-thumb, var(--color-text-secondary)) var(--scrollbar-track, transparent)}.i-tree-view-wrapper .i-tree-view-container::-webkit-scrollbar{width:var(--scrollbar-size, 6px);height:var(--scrollbar-size, 6px)}.i-tree-view-wrapper .i-tree-view-container::-webkit-scrollbar-track{background:var(--scrollbar-track-dropdown, rgba(0, 0, 0, .05));border-radius:var(--scrollbar-radius, 3px);margin:2px 0}.i-tree-view-wrapper .i-tree-view-container::-webkit-scrollbar-thumb{border-radius:var(--scrollbar-radius, 3px);min-height:20px;background:var(--scrollbar-thumb, var(--color-text-secondary))}.i-tree-view-wrapper .i-tree-view-container::-webkit-scrollbar-thumb:hover{background:var(--scrollbar-thumb-hover, var(--color-text-primary))}.i-tree-view-wrapper .i-tree-view-container::-webkit-scrollbar-thumb:active{background:var(--scrollbar-thumb-active, var(--color-primary))}.i-tree-view-wrapper .i-tree-view-container{scrollbar-width:thin;scrollbar-color:var(--scrollbar-thumb, var(--color-text-secondary)) var(--scrollbar-track-dropdown, rgba(0, 0, 0, .05))}.i-tree-view-wrapper .i-tree-view-loading{display:flex;align-items:center;justify-content:center;gap:8px;padding:20px;font-size:1em}.i-tree-view-wrapper .i-tree-view-loading .pi-spinner{font-size:16px}.i-tree-view-wrapper .i-tree-view-empty{display:flex;align-items:center;justify-content:center;padding:20px;font-size:1em;font-style:italic}.i-tree-view-root,.i-tree-view-children{list-style:none;margin:0;padding:0}.i-tree-view-children{padding-left:0}.i-tree-view-node{position:relative;cursor:pointer;outline:none;-webkit-user-select:none;user-select:none}.i-tree-view-node:focus{outline:none}.i-tree-view-node.i-tree-view-node--temporary-highlight .i-tree-view-node-content{animation:highlight-fade .7s ease-out}.i-tree-view-node .i-tree-view-node-content{display:flex;align-items:center;gap:4px;padding:4px 8px;border-radius:4px;transition:all .15s ease;min-height:32px}.i-tree-view-node .i-tree-view-toggler{display:flex;align-items:center;justify-content:center;width:20px;height:20px;border:none;background:transparent;cursor:pointer;border-radius:2px;transition:all .15s ease}.i-tree-view-node .i-tree-view-toggler:focus{outline:none}.i-tree-view-node .i-tree-view-toggler i{font-size:12px;transition:transform .15s ease}.i-tree-view-node .i-tree-view-toggler-spacer{width:20px;height:20px;flex-shrink:0}.i-tree-view-node .i-tree-view-checkbox-container{display:flex;align-items:center;flex-shrink:0}.i-tree-view-node .i-tree-view-node-icon{font-size:1em;flex-shrink:0}.i-tree-view-node .i-tree-view-node-label{font-size:1em;line-height:1.4;flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}\n"] }]
+            args: [{ selector: 'i-tree-view', standalone: true, imports: [CommonModule, FormsModule, ICheckbox, IInputText], template: "<div class=\"i-tree-view-wrapper\" [style.height]=\"scrollHeight\">\n  @if (filter) {\n    <div class=\"i-tree-view-filter-container\">\n      <i-input-text\n        [(ngModel)]=\"filterValue\"\n        [placeholder]=\"filterPlaceholder\"\n        [icon]=\"'pi pi-search'\"\n        [useFloatLabel]=\"false\"\n        [fluid]=\"true\"\n        (input)=\"onFilterKeyup($event)\"\n        class=\"i-tree-view-filter\"\n      >\n      </i-input-text>\n    </div>\n  }\n  @if (selectAll && selectionMode === \"checkbox\") {\n    <div class=\"i-tree-view-select-all-container\">\n      <div class=\"select-box\">\n        <i-checkbox\n          [(ngModel)]=\"selectAllChecked\"\n          [id]=\"componentId + '-select-all'\"\n          [label]=\"'Select All'\"\n          (ngModelChange)=\"onSelectAllChange()\"\n        />\n      </div>\n    </div>\n  }\n\n  <div class=\"i-tree-view-container\">\n    @if (loading) {\n      <div class=\"i-tree-view-loading\">\n        <i class=\"pi pi-spin pi-spinner\"></i>\n        <span>Loading...</span>\n      </div>\n    } @else if (filteredValue.length === 0) {\n      <div class=\"i-tree-view-empty\">\n        <span>{{ emptyMessage }}</span>\n      </div>\n    } @else {\n      <ul class=\"i-tree-view-root\" [attr.id]=\"componentId\" role=\"tree\">\n        @for (node of filteredValue; track node.key || $index) {\n          <li>\n            <ng-container\n              [ngTemplateOutlet]=\"nodeTemplate\"\n              [ngTemplateOutletContext]=\"{ $implicit: node, level: 0 }\"\n            ></ng-container>\n          </li>\n        }\n      </ul>\n    }\n  </div>\n</div>\n\n<ng-template #nodeTemplate let-node let-level=\"level\">\n  <div\n    class=\"i-tree-view-node\"\n    [class.i-tree-view-node--selected]=\"isNodeHighlighted(node)\"\n    [class.i-tree-view-node--leaf]=\"!hasChildren(node)\"\n    [class.i-tree-view-node--expanded]=\"node.expanded\"\n    [class.i-tree-view-node--collapsed]=\"!node.expanded && hasChildren(node)\"\n    [class.i-tree-view-node--temporary-highlight]=\"\n      isTemporarilyHighlighted(node)\n    \"\n    [class]=\"node.styleClass\"\n    [style.padding-left.rem]=\"level * 1\"\n    role=\"treeitem\"\n    [attr.aria-expanded]=\"hasChildren(node) ? node.expanded : null\"\n    [attr.aria-selected]=\"isSelected(node)\"\n    [attr.aria-level]=\"level + 1\"\n    tabindex=\"0\"\n    (click)=\"onNodeClick($event, node)\"\n    (keydown.enter)=\"onNodeClick($event, node)\"\n    (keydown.space)=\"$event.preventDefault(); onNodeClick($event, node)\"\n  >\n    <div class=\"i-tree-view-node-content\">\n      @if (hasChildren(node)) {\n        <button\n          type=\"button\"\n          class=\"i-tree-view-toggler\"\n          (click)=\"$event.stopPropagation(); toggleNode($event, node)\"\n          [attr.aria-label]=\"node.expanded ? 'Collapse' : 'Expand'\"\n          tabindex=\"-1\"\n        >\n          <i [class]=\"getToggleIcon(node)\"></i>\n        </button>\n      } @else {\n        <span class=\"i-tree-view-toggler-spacer\"></span>\n      }\n      @if (selectionMode === \"checkbox\") {\n        <div class=\"i-tree-view-checkbox-container\">\n          <i-checkbox\n            [checked]=\"isSelected(node) && !isPartiallySelected(node)\"\n            [indeterminate]=\"isPartiallySelected(node)\"\n            (onChange)=\"onCheckboxChange($event, node)\"\n            [id]=\"getCheckboxId(node)\"\n            size=\"small\"\n            tabindex=\"-1\"\n          >\n          </i-checkbox>\n        </div>\n      }\n\n      <i [class]=\"getNodeIcon(node)\" class=\"i-tree-view-node-icon\"></i>\n\n      <span class=\"i-tree-view-node-label\">{{ node.label }}</span>\n    </div>\n  </div>\n\n  @if (hasChildren(node) && node.expanded) {\n    <ul class=\"i-tree-view-children\" role=\"group\">\n      @for (child of node.children; track child.key || $index) {\n        <li>\n          <ng-container\n            [ngTemplateOutlet]=\"nodeTemplate\"\n            [ngTemplateOutletContext]=\"{ $implicit: child, level: level + 1 }\"\n          ></ng-container>\n        </li>\n      }\n    </ul>\n  }\n</ng-template>\n", styles: [".i-tree-view-wrapper{background-color:var(--surface-ground);color:var(--color-text-primary);border:1px solid var(--surface-border);border-radius:4px;overflow:hidden}.i-tree-view-wrapper .i-tree-view-select-all-container{border-bottom:1px solid var(--surface-border)}.i-tree-view-wrapper .i-tree-view-loading{color:var(--color-text-secondary)}.i-tree-view-wrapper .i-tree-view-loading .pi-spinner{color:var(--color-primary)}.i-tree-view-wrapper .i-tree-view-empty{color:var(--color-text-secondary)}.i-tree-view-node .i-tree-view-node-content:hover{background-color:var(--surface-hover)}.i-tree-view-node.i-tree-view-node--selected .i-tree-view-node-content,.i-tree-view-node.i-tree-view-node--temporary-highlight .i-tree-view-node-content{background-color:var(--surface-hover);border-color:var(--surface-border)}.i-tree-view-node .i-tree-view-toggler{color:var(--color-text-secondary)}.i-tree-view-node .i-tree-view-toggler:hover{background-color:var(--surface-hover);color:var(--color-text-primary)}.i-tree-view-node .i-tree-view-checkbox-container .i-tree-view-partial-overlay i{color:var(--color-primary)}.i-tree-view-node .i-tree-view-node-icon{color:var(--color-text-secondary)}.i-tree-view-node .i-tree-view-node-label{color:var(--color-text-primary)}.i-tree-view-wrapper{padding:8px 8px 0;overflow:hidden;box-sizing:border-box;display:flex;flex-direction:column}.i-tree-view-wrapper .i-tree-view-filter-container{position:relative;margin-bottom:8px;flex-shrink:0}.i-tree-view-wrapper .i-tree-view-select-all-container{margin-bottom:8px;padding:8px 0;flex-shrink:0}.i-tree-view-wrapper .i-tree-view-select-all-container .select-box{padding-left:10px}.i-tree-view-wrapper .i-tree-view-container{overflow:auto;flex:1;min-height:0;box-sizing:border-box}.i-tree-view-wrapper .i-tree-view-container::-webkit-scrollbar-track{background:var(--scrollbar-track, transparent);border-radius:var(--scrollbar-radius, 3px)}.i-tree-view-wrapper .i-tree-view-container::-webkit-scrollbar-thumb{background:#0003;border-radius:var(--scrollbar-radius, 3px);transition:background .2s ease}.i-tree-view-wrapper .i-tree-view-container::-webkit-scrollbar-thumb:hover{background:#00000059}.i-tree-view-wrapper .i-tree-view-container::-webkit-scrollbar-thumb:active{background:#00000080}.i-tree-view-wrapper .i-tree-view-container::-webkit-scrollbar-corner{background:transparent}.i-tree-view-wrapper .i-tree-view-container{scrollbar-width:thin;scrollbar-color:rgba(0,0,0,.2) transparent;scroll-behavior:smooth}.i-tree-view-wrapper .i-tree-view-container::-webkit-scrollbar-thumb{background:var(--scrollbar-thumb, var(--color-text-secondary))}.i-tree-view-wrapper .i-tree-view-container{scrollbar-color:var(--scrollbar-thumb, var(--color-text-secondary)) var(--scrollbar-track, transparent)}.i-tree-view-wrapper .i-tree-view-container::-webkit-scrollbar{width:var(--scrollbar-size, 6px);height:var(--scrollbar-size, 6px)}.i-tree-view-wrapper .i-tree-view-container::-webkit-scrollbar-track{background:var(--scrollbar-track-dropdown, rgba(0, 0, 0, .05));border-radius:var(--scrollbar-radius, 3px);margin:2px 0}.i-tree-view-wrapper .i-tree-view-container::-webkit-scrollbar-thumb{border-radius:var(--scrollbar-radius, 3px);min-height:20px;background:var(--scrollbar-thumb, var(--color-text-secondary))}.i-tree-view-wrapper .i-tree-view-container::-webkit-scrollbar-thumb:hover{background:var(--scrollbar-thumb-hover, var(--color-text-primary))}.i-tree-view-wrapper .i-tree-view-container::-webkit-scrollbar-thumb:active{background:var(--scrollbar-thumb-active, var(--color-primary))}.i-tree-view-wrapper .i-tree-view-container{scrollbar-width:thin;scrollbar-color:var(--scrollbar-thumb, var(--color-text-secondary)) var(--scrollbar-track-dropdown, rgba(0, 0, 0, .05))}.i-tree-view-wrapper .i-tree-view-loading{display:flex;align-items:center;justify-content:center;gap:8px;padding:20px;font-size:1em}.i-tree-view-wrapper .i-tree-view-loading .pi-spinner{font-size:16px}.i-tree-view-wrapper .i-tree-view-empty{display:flex;align-items:center;justify-content:center;padding:20px;font-size:1em;font-style:italic}.i-tree-view-root,.i-tree-view-children{list-style:none;margin:0;padding:0}.i-tree-view-children{padding-left:0}.i-tree-view-node{position:relative;cursor:pointer;outline:none;-webkit-user-select:none;user-select:none}.i-tree-view-node:focus{outline:none}.i-tree-view-node.i-tree-view-node--temporary-highlight .i-tree-view-node-content{animation:highlight-fade .7s ease-out}.i-tree-view-node .i-tree-view-node-content{display:flex;align-items:center;gap:4px;padding:4px 8px;border-radius:4px;transition:all .15s ease;min-height:32px}.i-tree-view-node .i-tree-view-toggler{display:flex;align-items:center;justify-content:center;width:20px;height:20px;border:none;background:transparent;cursor:pointer;border-radius:2px;transition:all .15s ease}.i-tree-view-node .i-tree-view-toggler:focus{outline:none}.i-tree-view-node .i-tree-view-toggler i{font-size:12px;transition:transform .15s ease}.i-tree-view-node .i-tree-view-toggler-spacer{width:20px;height:20px;flex-shrink:0}.i-tree-view-node .i-tree-view-checkbox-container{display:flex;align-items:center;flex-shrink:0}.i-tree-view-node .i-tree-view-node-icon{font-size:1em;flex-shrink:0}.i-tree-view-node .i-tree-view-node-label{font-size:1em;line-height:1.4;flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}\n"] }]
         }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }], propDecorators: { value: [{
                 type: Input
             }], selectionMode: [{
@@ -7427,7 +7613,7 @@ class WhisperService {
      */
     addAll(messages) {
         if (messages && messages.length) {
-            messages.forEach(message => this.add(message));
+            messages.forEach((message) => this.add(message));
         }
     }
     /**
@@ -7734,11 +7920,11 @@ class IWhisper {
         return message.id;
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: IWhisper, deps: [{ token: WhisperService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.12", type: IWhisper, isStandalone: true, selector: "i-whisper", inputs: { key: "key", autoZIndex: "autoZIndex", baseZIndex: "baseZIndex", style: "style", position: "position", preventOpenDuplicates: "preventOpenDuplicates", preventDuplicates: "preventDuplicates" }, ngImport: i0, template: "@if (messages && messages.length > 0) {\n  <div\n    [ngClass]=\"getContainerClass()\"\n    [ngStyle]=\"style\"\n    [attr.id]=\"componentId\"\n    >\n    @for (message of messages; track trackByMessage($index, message)) {\n      <div\n        [ngClass]=\"getMessageClass(message)\"\n        [attr.data-whisper-key]=\"message.key\"\n        [attr.aria-live]=\"'polite'\"\n        [attr.aria-atomic]=\"'true'\"\n        role=\"alert\"\n        >\n        <div class=\"i-whisper-message-content\">\n          <div class=\"i-whisper-message-icon\">\n            <i [ngClass]=\"['pi', getMessageIcon(message.severity)]\"> </i>\n          </div>\n          <div class=\"i-whisper-message-text\">\n            @if (message.summary) {\n              <div class=\"i-whisper-message-summary\">\n                {{ message.summary }}\n              </div>\n            }\n            @if (message.detail) {\n              <div class=\"i-whisper-message-detail\">\n                {{ message.detail }}\n              </div>\n            }\n          </div>\n          @if (message.closable === true) {\n            <i-button\n              [severity]=\"message.severity\"\n              size=\"small\"\n              [text]=\"true\"\n              icon=\"pi pi-times\"\n              (click)=\"onClose(message)\"\n              [attr.aria-label]=\"'Close'\"\n              />\n            }\n          </div>\n        </div>\n      }\n    </div>\n  }\n", styles: [".i-whisper-message{background:var(--surface-section);color:var(--color-text-primary);border-left:4px solid transparent}.i-whisper-message .i-whisper-message-close{color:var(--color-text-secondary)}.i-whisper-message .i-whisper-message-close:hover{color:var(--color-text-primary);background-color:var(--surface-hover)}.i-whisper-message.i-whisper-message-success{border-left-color:var(--color-success)}.i-whisper-message.i-whisper-message-success .i-whisper-message-icon{color:var(--color-success)}.i-whisper-message.i-whisper-message-info{border-left-color:var(--color-info)}.i-whisper-message.i-whisper-message-info .i-whisper-message-icon{color:var(--color-info)}.i-whisper-message.i-whisper-message-warning{border-left-color:var(--color-warning)}.i-whisper-message.i-whisper-message-warning .i-whisper-message-icon{color:var(--color-warning)}.i-whisper-message.i-whisper-message-danger{border-left-color:var(--color-danger)}.i-whisper-message.i-whisper-message-danger .i-whisper-message-icon{color:var(--color-danger)}.i-whisper-message.i-whisper-message-primary{border-left-color:var(--color-primary)}.i-whisper-message.i-whisper-message-primary .i-whisper-message-icon{color:var(--color-primary)}.i-whisper-message.i-whisper-message-secondary{border-left-color:var(--color-secondary)}.i-whisper-message.i-whisper-message-secondary .i-whisper-message-icon{color:var(--color-secondary)}.i-whisper-message.i-whisper-message-tertiary{border-left-color:var(--color-text-tertiary)}.i-whisper-message.i-whisper-message-tertiary .i-whisper-message-icon{color:var(--color-text-tertiary)}.i-whisper-message.i-whisper-message-contrast{border-left-color:var(--color-contrast)}.i-whisper-message.i-whisper-message-contrast .i-whisper-message-icon{color:var(--color-contrast)}.i-whisper{position:fixed;z-index:1000;pointer-events:none;display:flex;flex-direction:column;gap:8px;max-width:400px;min-width:300px}.i-whisper.i-whisper-top-left{top:20px;left:20px}.i-whisper.i-whisper-top-left .i-whisper-message{animation:whisperSlideInLeft .3s ease-out}.i-whisper.i-whisper-top-center{top:20px;left:50%;transform:translate(-50%)}.i-whisper.i-whisper-top-center .i-whisper-message{animation:whisperSlideInBottom .3s ease-out}.i-whisper.i-whisper-top-right{top:20px;right:20px}.i-whisper.i-whisper-top-right .i-whisper-message{animation:whisperSlideIn .3s ease-out}.i-whisper.i-whisper-bottom-left{bottom:20px;left:20px;flex-direction:column-reverse}.i-whisper.i-whisper-bottom-left .i-whisper-message{animation:whisperSlideInLeft .3s ease-out}.i-whisper.i-whisper-bottom-center{bottom:20px;left:50%;transform:translate(-50%);flex-direction:column-reverse}.i-whisper.i-whisper-bottom-center .i-whisper-message{animation:whisperSlideInBottom .3s ease-out}.i-whisper.i-whisper-bottom-right{bottom:20px;right:20px;flex-direction:column-reverse}.i-whisper.i-whisper-bottom-right .i-whisper-message{animation:whisperSlideIn .3s ease-out}.i-whisper .i-whisper-message{pointer-events:auto;border-radius:8px;box-shadow:0 4px 12px #00000026;overflow:hidden;animation:whisperSlideIn .3s ease-out;margin-bottom:4px;min-height:56px;display:flex;align-items:center}.i-whisper .i-whisper-message .i-whisper-message-content{display:flex;align-items:center;padding:12px 16px;width:100%;gap:12px;min-height:56px}.i-whisper .i-whisper-message .i-whisper-message-icon{display:flex;align-items:center;justify-content:center;flex-shrink:0;margin-top:2px}.i-whisper .i-whisper-message .i-whisper-message-icon i{font-size:20px}.i-whisper .i-whisper-message .i-whisper-message-text{flex:1;display:flex;flex-direction:column;gap:10px;min-width:0}.i-whisper .i-whisper-message .i-whisper-message-summary{font-weight:600;font-size:1em;line-height:1.4;word-wrap:break-word}.i-whisper .i-whisper-message .i-whisper-message-detail{font-size:.9em;line-height:1.4;word-wrap:break-word;opacity:.9}.i-whisper .i-whisper-message .i-whisper-message-close{background:none;border:none;cursor:pointer;padding:4px;border-radius:4px;display:flex;align-items:center;justify-content:center;flex-shrink:0;margin-top:2px;margin-left:8px;transition:background-color .2s}.i-whisper .i-whisper-message .i-whisper-message-close:hover{background-color:#0000001a}.i-whisper .i-whisper-message .i-whisper-message-close i{font-size:18px}.i-whisper .i-whisper-message.i-whisper-message-exit{animation:whisperSlideOut .3s ease-in forwards}@keyframes whisperSlideIn{0%{opacity:0;transform:translate(100%)}to{opacity:1;transform:translate(0)}}@keyframes whisperSlideInLeft{0%{opacity:0;transform:translate(-100%)}to{opacity:1;transform:translate(0)}}@keyframes whisperSlideInBottom{0%{opacity:0;transform:translateY(100%)}to{opacity:1;transform:translateY(0)}}@keyframes whisperSlideOut{0%{opacity:1;transform:translate(0);max-height:200px;margin-bottom:4px}to{opacity:0;transform:translate(100%);max-height:0;margin-bottom:0;padding-top:0;padding-bottom:0}}@media(max-width:768px){.i-whisper{max-width:calc(100vw - 40px);min-width:280px}.i-whisper.i-whisper-top-center,.i-whisper.i-whisper-bottom-center{left:20px;right:20px;transform:none;max-width:none}}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: IButton, selector: "i-button", inputs: ["severity", "size", "type", "disabled", "outlined", "raised", "text", "icon", "fluid", "loading"], outputs: ["clicked"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.12", type: IWhisper, isStandalone: true, selector: "i-whisper", inputs: { key: "key", autoZIndex: "autoZIndex", baseZIndex: "baseZIndex", style: "style", position: "position", preventOpenDuplicates: "preventOpenDuplicates", preventDuplicates: "preventDuplicates" }, ngImport: i0, template: "@if (messages && messages.length > 0) {\n  <div\n    [ngClass]=\"getContainerClass()\"\n    [ngStyle]=\"style\"\n    [attr.id]=\"componentId\"\n  >\n    @for (message of messages; track trackByMessage($index, message)) {\n      <div\n        [ngClass]=\"getMessageClass(message)\"\n        [attr.data-whisper-key]=\"message.key\"\n        [attr.aria-live]=\"'polite'\"\n        [attr.aria-atomic]=\"'true'\"\n        role=\"alert\"\n      >\n        <div class=\"i-whisper-message-content\">\n          <div class=\"i-whisper-message-icon\">\n            <i [ngClass]=\"['pi', getMessageIcon(message.severity)]\"> </i>\n          </div>\n          <div class=\"i-whisper-message-text\">\n            @if (message.summary) {\n              <div class=\"i-whisper-message-summary\">\n                {{ message.summary }}\n              </div>\n            }\n            @if (message.detail) {\n              <div class=\"i-whisper-message-detail\">\n                {{ message.detail }}\n              </div>\n            }\n          </div>\n          @if (message.closable === true) {\n            <i-button\n              [severity]=\"message.severity\"\n              size=\"small\"\n              [text]=\"true\"\n              icon=\"pi pi-times\"\n              (click)=\"onClose(message)\"\n              [attr.aria-label]=\"'Close'\"\n            />\n          }\n        </div>\n      </div>\n    }\n  </div>\n}\n", styles: [".i-whisper-message{background:var(--surface-section);color:var(--color-text-primary);border-left:4px solid transparent}.i-whisper-message .i-whisper-message-close{color:var(--color-text-secondary)}.i-whisper-message .i-whisper-message-close:hover{color:var(--color-text-primary);background-color:var(--surface-hover)}.i-whisper-message.i-whisper-message-success{border-left-color:var(--color-success)}.i-whisper-message.i-whisper-message-success .i-whisper-message-icon{color:var(--color-success)}.i-whisper-message.i-whisper-message-info{border-left-color:var(--color-info)}.i-whisper-message.i-whisper-message-info .i-whisper-message-icon{color:var(--color-info)}.i-whisper-message.i-whisper-message-warning{border-left-color:var(--color-warning)}.i-whisper-message.i-whisper-message-warning .i-whisper-message-icon{color:var(--color-warning)}.i-whisper-message.i-whisper-message-danger{border-left-color:var(--color-danger)}.i-whisper-message.i-whisper-message-danger .i-whisper-message-icon{color:var(--color-danger)}.i-whisper-message.i-whisper-message-primary{border-left-color:var(--color-primary)}.i-whisper-message.i-whisper-message-primary .i-whisper-message-icon{color:var(--color-primary)}.i-whisper-message.i-whisper-message-secondary{border-left-color:var(--color-secondary)}.i-whisper-message.i-whisper-message-secondary .i-whisper-message-icon{color:var(--color-secondary)}.i-whisper-message.i-whisper-message-tertiary{border-left-color:var(--color-text-tertiary)}.i-whisper-message.i-whisper-message-tertiary .i-whisper-message-icon{color:var(--color-text-tertiary)}.i-whisper-message.i-whisper-message-contrast{border-left-color:var(--color-contrast)}.i-whisper-message.i-whisper-message-contrast .i-whisper-message-icon{color:var(--color-contrast)}.i-whisper{position:fixed;z-index:1000;pointer-events:none;display:flex;flex-direction:column;gap:8px;max-width:400px;min-width:300px}.i-whisper.i-whisper-top-left{top:20px;left:20px}.i-whisper.i-whisper-top-left .i-whisper-message{animation:whisperSlideInLeft .3s ease-out}.i-whisper.i-whisper-top-center{top:20px;left:50%;transform:translate(-50%)}.i-whisper.i-whisper-top-center .i-whisper-message{animation:whisperSlideInBottom .3s ease-out}.i-whisper.i-whisper-top-right{top:20px;right:20px}.i-whisper.i-whisper-top-right .i-whisper-message{animation:whisperSlideIn .3s ease-out}.i-whisper.i-whisper-bottom-left{bottom:20px;left:20px;flex-direction:column-reverse}.i-whisper.i-whisper-bottom-left .i-whisper-message{animation:whisperSlideInLeft .3s ease-out}.i-whisper.i-whisper-bottom-center{bottom:20px;left:50%;transform:translate(-50%);flex-direction:column-reverse}.i-whisper.i-whisper-bottom-center .i-whisper-message{animation:whisperSlideInBottom .3s ease-out}.i-whisper.i-whisper-bottom-right{bottom:20px;right:20px;flex-direction:column-reverse}.i-whisper.i-whisper-bottom-right .i-whisper-message{animation:whisperSlideIn .3s ease-out}.i-whisper .i-whisper-message{pointer-events:auto;border-radius:8px;box-shadow:0 4px 12px #00000026;overflow:hidden;animation:whisperSlideIn .3s ease-out;margin-bottom:4px;min-height:56px;display:flex;align-items:center}.i-whisper .i-whisper-message .i-whisper-message-content{display:flex;align-items:center;padding:12px 16px;width:100%;gap:12px;min-height:56px}.i-whisper .i-whisper-message .i-whisper-message-icon{display:flex;align-items:center;justify-content:center;flex-shrink:0;margin-top:2px}.i-whisper .i-whisper-message .i-whisper-message-icon i{font-size:20px}.i-whisper .i-whisper-message .i-whisper-message-text{flex:1;display:flex;flex-direction:column;gap:10px;min-width:0}.i-whisper .i-whisper-message .i-whisper-message-summary{font-weight:600;font-size:1em;line-height:1.4;word-wrap:break-word}.i-whisper .i-whisper-message .i-whisper-message-detail{font-size:.9em;line-height:1.4;word-wrap:break-word;opacity:.9}.i-whisper .i-whisper-message .i-whisper-message-close{background:none;border:none;cursor:pointer;padding:4px;border-radius:4px;display:flex;align-items:center;justify-content:center;flex-shrink:0;margin-top:2px;margin-left:8px;transition:background-color .2s}.i-whisper .i-whisper-message .i-whisper-message-close:hover{background-color:#0000001a}.i-whisper .i-whisper-message .i-whisper-message-close i{font-size:18px}.i-whisper .i-whisper-message.i-whisper-message-exit{animation:whisperSlideOut .3s ease-in forwards}@keyframes whisperSlideIn{0%{opacity:0;transform:translate(100%)}to{opacity:1;transform:translate(0)}}@keyframes whisperSlideInLeft{0%{opacity:0;transform:translate(-100%)}to{opacity:1;transform:translate(0)}}@keyframes whisperSlideInBottom{0%{opacity:0;transform:translateY(100%)}to{opacity:1;transform:translateY(0)}}@keyframes whisperSlideOut{0%{opacity:1;transform:translate(0);max-height:200px;margin-bottom:4px}to{opacity:0;transform:translate(100%);max-height:0;margin-bottom:0;padding-top:0;padding-bottom:0}}@media(max-width:768px){.i-whisper{max-width:calc(100vw - 40px);min-width:280px}.i-whisper.i-whisper-top-center,.i-whisper.i-whisper-bottom-center{left:20px;right:20px;transform:none;max-width:none}}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: IButton, selector: "i-button", inputs: ["severity", "size", "type", "disabled", "outlined", "raised", "text", "icon", "fluid", "loading"], outputs: ["clicked"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: IWhisper, decorators: [{
             type: Component,
-            args: [{ selector: 'i-whisper', standalone: true, imports: [NgClass, NgStyle, IButton], encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, template: "@if (messages && messages.length > 0) {\n  <div\n    [ngClass]=\"getContainerClass()\"\n    [ngStyle]=\"style\"\n    [attr.id]=\"componentId\"\n    >\n    @for (message of messages; track trackByMessage($index, message)) {\n      <div\n        [ngClass]=\"getMessageClass(message)\"\n        [attr.data-whisper-key]=\"message.key\"\n        [attr.aria-live]=\"'polite'\"\n        [attr.aria-atomic]=\"'true'\"\n        role=\"alert\"\n        >\n        <div class=\"i-whisper-message-content\">\n          <div class=\"i-whisper-message-icon\">\n            <i [ngClass]=\"['pi', getMessageIcon(message.severity)]\"> </i>\n          </div>\n          <div class=\"i-whisper-message-text\">\n            @if (message.summary) {\n              <div class=\"i-whisper-message-summary\">\n                {{ message.summary }}\n              </div>\n            }\n            @if (message.detail) {\n              <div class=\"i-whisper-message-detail\">\n                {{ message.detail }}\n              </div>\n            }\n          </div>\n          @if (message.closable === true) {\n            <i-button\n              [severity]=\"message.severity\"\n              size=\"small\"\n              [text]=\"true\"\n              icon=\"pi pi-times\"\n              (click)=\"onClose(message)\"\n              [attr.aria-label]=\"'Close'\"\n              />\n            }\n          </div>\n        </div>\n      }\n    </div>\n  }\n", styles: [".i-whisper-message{background:var(--surface-section);color:var(--color-text-primary);border-left:4px solid transparent}.i-whisper-message .i-whisper-message-close{color:var(--color-text-secondary)}.i-whisper-message .i-whisper-message-close:hover{color:var(--color-text-primary);background-color:var(--surface-hover)}.i-whisper-message.i-whisper-message-success{border-left-color:var(--color-success)}.i-whisper-message.i-whisper-message-success .i-whisper-message-icon{color:var(--color-success)}.i-whisper-message.i-whisper-message-info{border-left-color:var(--color-info)}.i-whisper-message.i-whisper-message-info .i-whisper-message-icon{color:var(--color-info)}.i-whisper-message.i-whisper-message-warning{border-left-color:var(--color-warning)}.i-whisper-message.i-whisper-message-warning .i-whisper-message-icon{color:var(--color-warning)}.i-whisper-message.i-whisper-message-danger{border-left-color:var(--color-danger)}.i-whisper-message.i-whisper-message-danger .i-whisper-message-icon{color:var(--color-danger)}.i-whisper-message.i-whisper-message-primary{border-left-color:var(--color-primary)}.i-whisper-message.i-whisper-message-primary .i-whisper-message-icon{color:var(--color-primary)}.i-whisper-message.i-whisper-message-secondary{border-left-color:var(--color-secondary)}.i-whisper-message.i-whisper-message-secondary .i-whisper-message-icon{color:var(--color-secondary)}.i-whisper-message.i-whisper-message-tertiary{border-left-color:var(--color-text-tertiary)}.i-whisper-message.i-whisper-message-tertiary .i-whisper-message-icon{color:var(--color-text-tertiary)}.i-whisper-message.i-whisper-message-contrast{border-left-color:var(--color-contrast)}.i-whisper-message.i-whisper-message-contrast .i-whisper-message-icon{color:var(--color-contrast)}.i-whisper{position:fixed;z-index:1000;pointer-events:none;display:flex;flex-direction:column;gap:8px;max-width:400px;min-width:300px}.i-whisper.i-whisper-top-left{top:20px;left:20px}.i-whisper.i-whisper-top-left .i-whisper-message{animation:whisperSlideInLeft .3s ease-out}.i-whisper.i-whisper-top-center{top:20px;left:50%;transform:translate(-50%)}.i-whisper.i-whisper-top-center .i-whisper-message{animation:whisperSlideInBottom .3s ease-out}.i-whisper.i-whisper-top-right{top:20px;right:20px}.i-whisper.i-whisper-top-right .i-whisper-message{animation:whisperSlideIn .3s ease-out}.i-whisper.i-whisper-bottom-left{bottom:20px;left:20px;flex-direction:column-reverse}.i-whisper.i-whisper-bottom-left .i-whisper-message{animation:whisperSlideInLeft .3s ease-out}.i-whisper.i-whisper-bottom-center{bottom:20px;left:50%;transform:translate(-50%);flex-direction:column-reverse}.i-whisper.i-whisper-bottom-center .i-whisper-message{animation:whisperSlideInBottom .3s ease-out}.i-whisper.i-whisper-bottom-right{bottom:20px;right:20px;flex-direction:column-reverse}.i-whisper.i-whisper-bottom-right .i-whisper-message{animation:whisperSlideIn .3s ease-out}.i-whisper .i-whisper-message{pointer-events:auto;border-radius:8px;box-shadow:0 4px 12px #00000026;overflow:hidden;animation:whisperSlideIn .3s ease-out;margin-bottom:4px;min-height:56px;display:flex;align-items:center}.i-whisper .i-whisper-message .i-whisper-message-content{display:flex;align-items:center;padding:12px 16px;width:100%;gap:12px;min-height:56px}.i-whisper .i-whisper-message .i-whisper-message-icon{display:flex;align-items:center;justify-content:center;flex-shrink:0;margin-top:2px}.i-whisper .i-whisper-message .i-whisper-message-icon i{font-size:20px}.i-whisper .i-whisper-message .i-whisper-message-text{flex:1;display:flex;flex-direction:column;gap:10px;min-width:0}.i-whisper .i-whisper-message .i-whisper-message-summary{font-weight:600;font-size:1em;line-height:1.4;word-wrap:break-word}.i-whisper .i-whisper-message .i-whisper-message-detail{font-size:.9em;line-height:1.4;word-wrap:break-word;opacity:.9}.i-whisper .i-whisper-message .i-whisper-message-close{background:none;border:none;cursor:pointer;padding:4px;border-radius:4px;display:flex;align-items:center;justify-content:center;flex-shrink:0;margin-top:2px;margin-left:8px;transition:background-color .2s}.i-whisper .i-whisper-message .i-whisper-message-close:hover{background-color:#0000001a}.i-whisper .i-whisper-message .i-whisper-message-close i{font-size:18px}.i-whisper .i-whisper-message.i-whisper-message-exit{animation:whisperSlideOut .3s ease-in forwards}@keyframes whisperSlideIn{0%{opacity:0;transform:translate(100%)}to{opacity:1;transform:translate(0)}}@keyframes whisperSlideInLeft{0%{opacity:0;transform:translate(-100%)}to{opacity:1;transform:translate(0)}}@keyframes whisperSlideInBottom{0%{opacity:0;transform:translateY(100%)}to{opacity:1;transform:translateY(0)}}@keyframes whisperSlideOut{0%{opacity:1;transform:translate(0);max-height:200px;margin-bottom:4px}to{opacity:0;transform:translate(100%);max-height:0;margin-bottom:0;padding-top:0;padding-bottom:0}}@media(max-width:768px){.i-whisper{max-width:calc(100vw - 40px);min-width:280px}.i-whisper.i-whisper-top-center,.i-whisper.i-whisper-bottom-center{left:20px;right:20px;transform:none;max-width:none}}\n"] }]
+            args: [{ selector: 'i-whisper', standalone: true, imports: [NgClass, NgStyle, IButton], encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, template: "@if (messages && messages.length > 0) {\n  <div\n    [ngClass]=\"getContainerClass()\"\n    [ngStyle]=\"style\"\n    [attr.id]=\"componentId\"\n  >\n    @for (message of messages; track trackByMessage($index, message)) {\n      <div\n        [ngClass]=\"getMessageClass(message)\"\n        [attr.data-whisper-key]=\"message.key\"\n        [attr.aria-live]=\"'polite'\"\n        [attr.aria-atomic]=\"'true'\"\n        role=\"alert\"\n      >\n        <div class=\"i-whisper-message-content\">\n          <div class=\"i-whisper-message-icon\">\n            <i [ngClass]=\"['pi', getMessageIcon(message.severity)]\"> </i>\n          </div>\n          <div class=\"i-whisper-message-text\">\n            @if (message.summary) {\n              <div class=\"i-whisper-message-summary\">\n                {{ message.summary }}\n              </div>\n            }\n            @if (message.detail) {\n              <div class=\"i-whisper-message-detail\">\n                {{ message.detail }}\n              </div>\n            }\n          </div>\n          @if (message.closable === true) {\n            <i-button\n              [severity]=\"message.severity\"\n              size=\"small\"\n              [text]=\"true\"\n              icon=\"pi pi-times\"\n              (click)=\"onClose(message)\"\n              [attr.aria-label]=\"'Close'\"\n            />\n          }\n        </div>\n      </div>\n    }\n  </div>\n}\n", styles: [".i-whisper-message{background:var(--surface-section);color:var(--color-text-primary);border-left:4px solid transparent}.i-whisper-message .i-whisper-message-close{color:var(--color-text-secondary)}.i-whisper-message .i-whisper-message-close:hover{color:var(--color-text-primary);background-color:var(--surface-hover)}.i-whisper-message.i-whisper-message-success{border-left-color:var(--color-success)}.i-whisper-message.i-whisper-message-success .i-whisper-message-icon{color:var(--color-success)}.i-whisper-message.i-whisper-message-info{border-left-color:var(--color-info)}.i-whisper-message.i-whisper-message-info .i-whisper-message-icon{color:var(--color-info)}.i-whisper-message.i-whisper-message-warning{border-left-color:var(--color-warning)}.i-whisper-message.i-whisper-message-warning .i-whisper-message-icon{color:var(--color-warning)}.i-whisper-message.i-whisper-message-danger{border-left-color:var(--color-danger)}.i-whisper-message.i-whisper-message-danger .i-whisper-message-icon{color:var(--color-danger)}.i-whisper-message.i-whisper-message-primary{border-left-color:var(--color-primary)}.i-whisper-message.i-whisper-message-primary .i-whisper-message-icon{color:var(--color-primary)}.i-whisper-message.i-whisper-message-secondary{border-left-color:var(--color-secondary)}.i-whisper-message.i-whisper-message-secondary .i-whisper-message-icon{color:var(--color-secondary)}.i-whisper-message.i-whisper-message-tertiary{border-left-color:var(--color-text-tertiary)}.i-whisper-message.i-whisper-message-tertiary .i-whisper-message-icon{color:var(--color-text-tertiary)}.i-whisper-message.i-whisper-message-contrast{border-left-color:var(--color-contrast)}.i-whisper-message.i-whisper-message-contrast .i-whisper-message-icon{color:var(--color-contrast)}.i-whisper{position:fixed;z-index:1000;pointer-events:none;display:flex;flex-direction:column;gap:8px;max-width:400px;min-width:300px}.i-whisper.i-whisper-top-left{top:20px;left:20px}.i-whisper.i-whisper-top-left .i-whisper-message{animation:whisperSlideInLeft .3s ease-out}.i-whisper.i-whisper-top-center{top:20px;left:50%;transform:translate(-50%)}.i-whisper.i-whisper-top-center .i-whisper-message{animation:whisperSlideInBottom .3s ease-out}.i-whisper.i-whisper-top-right{top:20px;right:20px}.i-whisper.i-whisper-top-right .i-whisper-message{animation:whisperSlideIn .3s ease-out}.i-whisper.i-whisper-bottom-left{bottom:20px;left:20px;flex-direction:column-reverse}.i-whisper.i-whisper-bottom-left .i-whisper-message{animation:whisperSlideInLeft .3s ease-out}.i-whisper.i-whisper-bottom-center{bottom:20px;left:50%;transform:translate(-50%);flex-direction:column-reverse}.i-whisper.i-whisper-bottom-center .i-whisper-message{animation:whisperSlideInBottom .3s ease-out}.i-whisper.i-whisper-bottom-right{bottom:20px;right:20px;flex-direction:column-reverse}.i-whisper.i-whisper-bottom-right .i-whisper-message{animation:whisperSlideIn .3s ease-out}.i-whisper .i-whisper-message{pointer-events:auto;border-radius:8px;box-shadow:0 4px 12px #00000026;overflow:hidden;animation:whisperSlideIn .3s ease-out;margin-bottom:4px;min-height:56px;display:flex;align-items:center}.i-whisper .i-whisper-message .i-whisper-message-content{display:flex;align-items:center;padding:12px 16px;width:100%;gap:12px;min-height:56px}.i-whisper .i-whisper-message .i-whisper-message-icon{display:flex;align-items:center;justify-content:center;flex-shrink:0;margin-top:2px}.i-whisper .i-whisper-message .i-whisper-message-icon i{font-size:20px}.i-whisper .i-whisper-message .i-whisper-message-text{flex:1;display:flex;flex-direction:column;gap:10px;min-width:0}.i-whisper .i-whisper-message .i-whisper-message-summary{font-weight:600;font-size:1em;line-height:1.4;word-wrap:break-word}.i-whisper .i-whisper-message .i-whisper-message-detail{font-size:.9em;line-height:1.4;word-wrap:break-word;opacity:.9}.i-whisper .i-whisper-message .i-whisper-message-close{background:none;border:none;cursor:pointer;padding:4px;border-radius:4px;display:flex;align-items:center;justify-content:center;flex-shrink:0;margin-top:2px;margin-left:8px;transition:background-color .2s}.i-whisper .i-whisper-message .i-whisper-message-close:hover{background-color:#0000001a}.i-whisper .i-whisper-message .i-whisper-message-close i{font-size:18px}.i-whisper .i-whisper-message.i-whisper-message-exit{animation:whisperSlideOut .3s ease-in forwards}@keyframes whisperSlideIn{0%{opacity:0;transform:translate(100%)}to{opacity:1;transform:translate(0)}}@keyframes whisperSlideInLeft{0%{opacity:0;transform:translate(-100%)}to{opacity:1;transform:translate(0)}}@keyframes whisperSlideInBottom{0%{opacity:0;transform:translateY(100%)}to{opacity:1;transform:translateY(0)}}@keyframes whisperSlideOut{0%{opacity:1;transform:translate(0);max-height:200px;margin-bottom:4px}to{opacity:0;transform:translate(100%);max-height:0;margin-bottom:0;padding-top:0;padding-bottom:0}}@media(max-width:768px){.i-whisper{max-width:calc(100vw - 40px);min-width:280px}.i-whisper.i-whisper-top-center,.i-whisper.i-whisper-bottom-center{left:20px;right:20px;transform:none;max-width:none}}\n"] }]
         }], ctorParameters: () => [{ type: WhisperService }, { type: i0.ChangeDetectorRef }], propDecorators: { key: [{
                 type: Input
             }], autoZIndex: [{
@@ -9488,11 +9674,11 @@ class IChart {
         return this.chartInstances.length;
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: IChart, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.12", type: IChart, isStandalone: true, selector: "i-chart", inputs: { charts: "charts", height: "height", responsive: "responsive" }, viewQueries: [{ propertyName: "canvasElements", predicate: ["chartCanvas"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div class=\"i-charts-container\">\n  @for (chartDisplay of chartDisplays; track chartDisplay.id; let chartIndex = $index) {\n    <div class=\"i-chart-panel\">\n      <div class=\"i-chart-item\" [style.height]=\"getChartHeightStyle(chartDisplay)\">\n        <canvas #chartCanvas></canvas>\n      </div>\n\n      @if (getLegendItems(chartIndex).length) {\n        <div class=\"i-chart-legend\" role=\"list\" aria-label=\"Chart data series\">\n          @for (legendItem of getLegendItems(chartIndex); track $index) {\n            <button\n              class=\"i-chart-legend-item\"\n              type=\"button\"\n              role=\"listitem\"\n              [class.i-chart-legend-item-hidden]=\"legendItem.hidden\"\n              [attr.aria-pressed]=\"!legendItem.hidden\"\n              (click)=\"toggleLegendItem(chartIndex, legendItem)\"\n            >\n              <span\n                class=\"i-chart-legend-marker\"\n                [style.background-color]=\"legendItem.fillStyleText\"\n                [style.border-color]=\"legendItem.strokeStyleText\"\n              ></span>\n              <span class=\"i-chart-legend-label\">{{ legendItem.text }}</span>\n            </button>\n          }\n        </div>\n      }\n    </div>\n  }\n</div>\n", styles: [":host{--chart-grid-color: var(--surface-border);--chart-text-color: var(--color-text-primary);--chart-text-secondary: var(--color-text-secondary)}.i-charts-container{display:flex;flex-wrap:wrap;width:100%;gap:4rem}.i-chart-panel{flex:1 1 45%;min-width:300px;box-sizing:border-box}.i-chart-item{width:100%;box-sizing:border-box}.i-chart-legend{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:.75rem 1rem;margin-top:1rem;padding:.75rem 1rem;border:1px solid var(--surface-border);border-radius:var(--border-radius, .5rem);background:var(--surface-card, var(--surface-ground, transparent))}.i-chart-legend-item{display:inline-flex;align-items:center;gap:.5rem;min-width:0;padding:.25rem .5rem;border:0;border-radius:var(--border-radius, .5rem);background:transparent;color:var(--chart-text-color);font:inherit;cursor:pointer;transition:background-color .2s ease,opacity .2s ease}.i-chart-legend-item:hover,.i-chart-legend-item:focus-visible{background:var(--surface-hover, rgba(148, 163, 184, .12));outline:none}.i-chart-legend-item-hidden{opacity:.55}.i-chart-legend-item-hidden .i-chart-legend-label{text-decoration:line-through}.i-chart-legend-marker{width:.875rem;height:.875rem;flex:0 0 .875rem;border:1px solid;border-radius:.25rem}.i-chart-legend-label{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}@media(max-width:768px){.i-charts-container{flex-direction:column}.i-chart-panel{width:100%}}\n"] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.12", type: IChart, isStandalone: true, selector: "i-chart", inputs: { charts: "charts", height: "height", responsive: "responsive" }, viewQueries: [{ propertyName: "canvasElements", predicate: ["chartCanvas"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div class=\"i-charts-container\">\n  @for (\n    chartDisplay of chartDisplays;\n    track chartDisplay.id;\n    let chartIndex = $index\n  ) {\n    <div class=\"i-chart-panel\">\n      <div\n        class=\"i-chart-item\"\n        [style.height]=\"getChartHeightStyle(chartDisplay)\"\n      >\n        <canvas #chartCanvas></canvas>\n      </div>\n\n      @if (getLegendItems(chartIndex).length) {\n        <div class=\"i-chart-legend\" role=\"list\" aria-label=\"Chart data series\">\n          @for (legendItem of getLegendItems(chartIndex); track $index) {\n            <button\n              class=\"i-chart-legend-item\"\n              type=\"button\"\n              role=\"listitem\"\n              [class.i-chart-legend-item-hidden]=\"legendItem.hidden\"\n              [attr.aria-pressed]=\"!legendItem.hidden\"\n              (click)=\"toggleLegendItem(chartIndex, legendItem)\"\n            >\n              <span\n                class=\"i-chart-legend-marker\"\n                [style.background-color]=\"legendItem.fillStyleText\"\n                [style.border-color]=\"legendItem.strokeStyleText\"\n              ></span>\n              <span class=\"i-chart-legend-label\">{{ legendItem.text }}</span>\n            </button>\n          }\n        </div>\n      }\n    </div>\n  }\n</div>\n", styles: [":host{--chart-grid-color: var(--surface-border);--chart-text-color: var(--color-text-primary);--chart-text-secondary: var(--color-text-secondary)}.i-charts-container{display:flex;flex-wrap:wrap;width:100%;gap:4rem}.i-chart-panel{flex:1 1 45%;min-width:300px;box-sizing:border-box}.i-chart-item{width:100%;box-sizing:border-box}.i-chart-legend{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:.75rem 1rem;margin-top:1rem;padding:.75rem 1rem;border:1px solid var(--surface-border);border-radius:var(--border-radius, .5rem);background:var(--surface-card, var(--surface-ground, transparent))}.i-chart-legend-item{display:inline-flex;align-items:center;gap:.5rem;min-width:0;padding:.25rem .5rem;border:0;border-radius:var(--border-radius, .5rem);background:transparent;color:var(--chart-text-color);font:inherit;cursor:pointer;transition:background-color .2s ease,opacity .2s ease}.i-chart-legend-item:hover,.i-chart-legend-item:focus-visible{background:var(--surface-hover, rgba(148, 163, 184, .12));outline:none}.i-chart-legend-item-hidden{opacity:.55}.i-chart-legend-item-hidden .i-chart-legend-label{text-decoration:line-through}.i-chart-legend-marker{width:.875rem;height:.875rem;flex:0 0 .875rem;border:1px solid;border-radius:.25rem}.i-chart-legend-label{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}@media(max-width:768px){.i-charts-container{flex-direction:column}.i-chart-panel{width:100%}}\n"] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: IChart, decorators: [{
             type: Component,
-            args: [{ selector: 'i-chart', standalone: true, imports: [], template: "<div class=\"i-charts-container\">\n  @for (chartDisplay of chartDisplays; track chartDisplay.id; let chartIndex = $index) {\n    <div class=\"i-chart-panel\">\n      <div class=\"i-chart-item\" [style.height]=\"getChartHeightStyle(chartDisplay)\">\n        <canvas #chartCanvas></canvas>\n      </div>\n\n      @if (getLegendItems(chartIndex).length) {\n        <div class=\"i-chart-legend\" role=\"list\" aria-label=\"Chart data series\">\n          @for (legendItem of getLegendItems(chartIndex); track $index) {\n            <button\n              class=\"i-chart-legend-item\"\n              type=\"button\"\n              role=\"listitem\"\n              [class.i-chart-legend-item-hidden]=\"legendItem.hidden\"\n              [attr.aria-pressed]=\"!legendItem.hidden\"\n              (click)=\"toggleLegendItem(chartIndex, legendItem)\"\n            >\n              <span\n                class=\"i-chart-legend-marker\"\n                [style.background-color]=\"legendItem.fillStyleText\"\n                [style.border-color]=\"legendItem.strokeStyleText\"\n              ></span>\n              <span class=\"i-chart-legend-label\">{{ legendItem.text }}</span>\n            </button>\n          }\n        </div>\n      }\n    </div>\n  }\n</div>\n", styles: [":host{--chart-grid-color: var(--surface-border);--chart-text-color: var(--color-text-primary);--chart-text-secondary: var(--color-text-secondary)}.i-charts-container{display:flex;flex-wrap:wrap;width:100%;gap:4rem}.i-chart-panel{flex:1 1 45%;min-width:300px;box-sizing:border-box}.i-chart-item{width:100%;box-sizing:border-box}.i-chart-legend{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:.75rem 1rem;margin-top:1rem;padding:.75rem 1rem;border:1px solid var(--surface-border);border-radius:var(--border-radius, .5rem);background:var(--surface-card, var(--surface-ground, transparent))}.i-chart-legend-item{display:inline-flex;align-items:center;gap:.5rem;min-width:0;padding:.25rem .5rem;border:0;border-radius:var(--border-radius, .5rem);background:transparent;color:var(--chart-text-color);font:inherit;cursor:pointer;transition:background-color .2s ease,opacity .2s ease}.i-chart-legend-item:hover,.i-chart-legend-item:focus-visible{background:var(--surface-hover, rgba(148, 163, 184, .12));outline:none}.i-chart-legend-item-hidden{opacity:.55}.i-chart-legend-item-hidden .i-chart-legend-label{text-decoration:line-through}.i-chart-legend-marker{width:.875rem;height:.875rem;flex:0 0 .875rem;border:1px solid;border-radius:.25rem}.i-chart-legend-label{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}@media(max-width:768px){.i-charts-container{flex-direction:column}.i-chart-panel{width:100%}}\n"] }]
+            args: [{ selector: 'i-chart', standalone: true, imports: [], template: "<div class=\"i-charts-container\">\n  @for (\n    chartDisplay of chartDisplays;\n    track chartDisplay.id;\n    let chartIndex = $index\n  ) {\n    <div class=\"i-chart-panel\">\n      <div\n        class=\"i-chart-item\"\n        [style.height]=\"getChartHeightStyle(chartDisplay)\"\n      >\n        <canvas #chartCanvas></canvas>\n      </div>\n\n      @if (getLegendItems(chartIndex).length) {\n        <div class=\"i-chart-legend\" role=\"list\" aria-label=\"Chart data series\">\n          @for (legendItem of getLegendItems(chartIndex); track $index) {\n            <button\n              class=\"i-chart-legend-item\"\n              type=\"button\"\n              role=\"listitem\"\n              [class.i-chart-legend-item-hidden]=\"legendItem.hidden\"\n              [attr.aria-pressed]=\"!legendItem.hidden\"\n              (click)=\"toggleLegendItem(chartIndex, legendItem)\"\n            >\n              <span\n                class=\"i-chart-legend-marker\"\n                [style.background-color]=\"legendItem.fillStyleText\"\n                [style.border-color]=\"legendItem.strokeStyleText\"\n              ></span>\n              <span class=\"i-chart-legend-label\">{{ legendItem.text }}</span>\n            </button>\n          }\n        </div>\n      }\n    </div>\n  }\n</div>\n", styles: [":host{--chart-grid-color: var(--surface-border);--chart-text-color: var(--color-text-primary);--chart-text-secondary: var(--color-text-secondary)}.i-charts-container{display:flex;flex-wrap:wrap;width:100%;gap:4rem}.i-chart-panel{flex:1 1 45%;min-width:300px;box-sizing:border-box}.i-chart-item{width:100%;box-sizing:border-box}.i-chart-legend{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:.75rem 1rem;margin-top:1rem;padding:.75rem 1rem;border:1px solid var(--surface-border);border-radius:var(--border-radius, .5rem);background:var(--surface-card, var(--surface-ground, transparent))}.i-chart-legend-item{display:inline-flex;align-items:center;gap:.5rem;min-width:0;padding:.25rem .5rem;border:0;border-radius:var(--border-radius, .5rem);background:transparent;color:var(--chart-text-color);font:inherit;cursor:pointer;transition:background-color .2s ease,opacity .2s ease}.i-chart-legend-item:hover,.i-chart-legend-item:focus-visible{background:var(--surface-hover, rgba(148, 163, 184, .12));outline:none}.i-chart-legend-item-hidden{opacity:.55}.i-chart-legend-item-hidden .i-chart-legend-label{text-decoration:line-through}.i-chart-legend-marker{width:.875rem;height:.875rem;flex:0 0 .875rem;border:1px solid;border-radius:.25rem}.i-chart-legend-label{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}@media(max-width:768px){.i-charts-container{flex-direction:column}.i-chart-panel{width:100%}}\n"] }]
         }], propDecorators: { charts: [{
                 type: Input
             }], height: [{
@@ -9916,6 +10102,336 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.12", ngImpo
                     args: [DOCUMENT]
                 }] }] });
 
+/**
+ * Searchable, grouped selection of fields. The form value is an array of keys.
+ * Composes the shared input and checkbox controls; contains no report semantics.
+ * @example
+ * ```html
+ * <i-field-picker [options]="fields" [(ngModel)]="selectedKeys" />
+ * ```
+ */
+class IFieldPicker {
+    /** Available fields. Selection is retained when options are filtered or reloaded. */
+    options = [];
+    /** Accessible name of the grouped selection. */
+    ariaLabel = 'Fields';
+    /** Label on the search input. */
+    searchLabel = 'Search fields';
+    /** Heading for options without a group. */
+    ungroupedLabel = 'Other';
+    /** Message shown when the search has no matches. */
+    emptyMessage = 'No matching fields.';
+    /** Prevents selection changes but allows searching. */
+    readonly = false;
+    /** Disables the control, including search. Angular Forms can set this state. */
+    disabled = false;
+    /** Emits a new array after a user changes the selection. */
+    onChange = new EventEmitter();
+    componentId = UniqueComponentId('i-field-picker-');
+    search = '';
+    value = [];
+    change = () => { };
+    touched = () => { };
+    get groups() {
+        const term = this.search.trim().toLocaleLowerCase();
+        const groups = new Map();
+        for (const option of this.options) {
+            const name = option.group || this.ungroupedLabel;
+            if (term &&
+                !`${option.label} ${name} ${option.description ?? ''}`
+                    .toLocaleLowerCase()
+                    .includes(term))
+                continue;
+            groups.set(name, [...(groups.get(name) ?? []), option]);
+        }
+        return Array.from(groups, ([name, options]) => ({ name, options }));
+    }
+    select(option, checked) {
+        if (this.disabled ||
+            this.readonly ||
+            option.disabled ||
+            this.value.includes(option.key) === checked)
+            return;
+        const remaining = this.value.filter((key) => key !== option.key);
+        this.value = checked ? [...remaining, option.key] : remaining;
+        this.change([...this.value]);
+        this.onChange.emit([...this.value]);
+        this.markTouched();
+    }
+    writeValue(value) {
+        this.value = [...(value ?? [])];
+    }
+    registerOnChange(fn) {
+        this.change = fn;
+    }
+    registerOnTouched(fn) {
+        this.touched = fn;
+    }
+    setDisabledState(disabled) {
+        this.disabled = disabled;
+    }
+    markTouched() {
+        this.touched();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: IFieldPicker, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.12", type: IFieldPicker, isStandalone: true, selector: "i-field-picker", inputs: { options: "options", ariaLabel: "ariaLabel", searchLabel: "searchLabel", ungroupedLabel: "ungroupedLabel", emptyMessage: "emptyMessage", readonly: "readonly", disabled: "disabled" }, outputs: { onChange: "onChange" }, host: { listeners: { "focusout": "markTouched()" } }, providers: [
+            {
+                provide: NG_VALUE_ACCESSOR,
+                useExisting: forwardRef(() => IFieldPicker),
+                multi: true,
+            },
+        ], ngImport: i0, template: "<div class=\"i-field-picker\" role=\"group\" [attr.aria-label]=\"ariaLabel\">\n  <i-input-text\n    [label]=\"searchLabel\"\n    icon=\"pi pi-search\"\n    [fluid]=\"true\"\n    [disabled]=\"disabled\"\n    [ngModel]=\"search\"\n    (ngModelChange)=\"search = $event ?? ''\"\n    [ngModelOptions]=\"{ standalone: true }\"\n  />\n  <div class=\"i-field-picker__catalog\">\n    @for (group of groups; track group.name; let groupIndex = $index) {\n      <section [attr.aria-labelledby]=\"componentId + '-group-' + groupIndex\">\n        <header class=\"i-field-picker__group-header\">\n          <h3 [id]=\"componentId + '-group-' + groupIndex\">{{ group.name }}</h3>\n          <span>{{ group.options.length }}</span>\n        </header>\n        @for (option of group.options; track option.key) {\n          <div class=\"i-field-picker__option\">\n            <i-checkbox\n              [label]=\"option.label\"\n              [checked]=\"value.includes(option.key)\"\n              [readonly]=\"readonly\"\n              [disabled]=\"disabled || !!option.disabled\"\n              (onChange)=\"select(option, $event)\"\n            />\n            @if (option.description) {\n              <small>{{ option.description }}</small>\n            }\n          </div>\n        }\n      </section>\n    } @empty {\n      <i-no-content [message]=\"emptyMessage\" />\n    }\n  </div>\n</div>\n", styles: [".i-field-picker{color:var(--color-text-primary)}.i-field-picker__catalog{border-color:var(--surface-border);background:var(--surface-section)}.i-field-picker__group-header{background:var(--surface-section);border-bottom:1px solid var(--surface-border)}.i-field-picker__group-header span{color:var(--color-text-secondary)}.i-field-picker__option:hover{background:var(--surface-hover)}.i-field-picker small{color:var(--color-text-secondary)}:host{display:block}.i-field-picker__catalog{max-height:32rem;overflow:auto;margin-top:1rem;padding:.5rem;border:1px solid var(--surface-border);border-radius:.5rem}.i-field-picker section+section{margin-top:.75rem}.i-field-picker__group-header{position:sticky;top:-.5rem;z-index:1;display:flex;align-items:center;justify-content:space-between;margin:0 -.5rem .25rem;padding:.75rem 1rem}.i-field-picker__group-header h3{margin:0;font-size:.8125rem;font-weight:600}.i-field-picker__group-header span{font-size:.75rem;font-weight:600}.i-field-picker__option{display:flex;align-items:center;justify-content:space-between;gap:1rem;min-height:2.75rem;padding:.5rem;border-radius:.375rem}\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: 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: NoContentComponent, selector: "i-no-content", inputs: ["icon", "message"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: IFieldPicker, decorators: [{
+            type: Component,
+            args: [{ selector: 'i-field-picker', standalone: true, imports: [FormsModule, ICheckbox, IInputText, NoContentComponent], providers: [
+                        {
+                            provide: NG_VALUE_ACCESSOR,
+                            useExisting: forwardRef(() => IFieldPicker),
+                            multi: true,
+                        },
+                    ], host: { '(focusout)': 'markTouched()' }, template: "<div class=\"i-field-picker\" role=\"group\" [attr.aria-label]=\"ariaLabel\">\n  <i-input-text\n    [label]=\"searchLabel\"\n    icon=\"pi pi-search\"\n    [fluid]=\"true\"\n    [disabled]=\"disabled\"\n    [ngModel]=\"search\"\n    (ngModelChange)=\"search = $event ?? ''\"\n    [ngModelOptions]=\"{ standalone: true }\"\n  />\n  <div class=\"i-field-picker__catalog\">\n    @for (group of groups; track group.name; let groupIndex = $index) {\n      <section [attr.aria-labelledby]=\"componentId + '-group-' + groupIndex\">\n        <header class=\"i-field-picker__group-header\">\n          <h3 [id]=\"componentId + '-group-' + groupIndex\">{{ group.name }}</h3>\n          <span>{{ group.options.length }}</span>\n        </header>\n        @for (option of group.options; track option.key) {\n          <div class=\"i-field-picker__option\">\n            <i-checkbox\n              [label]=\"option.label\"\n              [checked]=\"value.includes(option.key)\"\n              [readonly]=\"readonly\"\n              [disabled]=\"disabled || !!option.disabled\"\n              (onChange)=\"select(option, $event)\"\n            />\n            @if (option.description) {\n              <small>{{ option.description }}</small>\n            }\n          </div>\n        }\n      </section>\n    } @empty {\n      <i-no-content [message]=\"emptyMessage\" />\n    }\n  </div>\n</div>\n", styles: [".i-field-picker{color:var(--color-text-primary)}.i-field-picker__catalog{border-color:var(--surface-border);background:var(--surface-section)}.i-field-picker__group-header{background:var(--surface-section);border-bottom:1px solid var(--surface-border)}.i-field-picker__group-header span{color:var(--color-text-secondary)}.i-field-picker__option:hover{background:var(--surface-hover)}.i-field-picker small{color:var(--color-text-secondary)}:host{display:block}.i-field-picker__catalog{max-height:32rem;overflow:auto;margin-top:1rem;padding:.5rem;border:1px solid var(--surface-border);border-radius:.5rem}.i-field-picker section+section{margin-top:.75rem}.i-field-picker__group-header{position:sticky;top:-.5rem;z-index:1;display:flex;align-items:center;justify-content:space-between;margin:0 -.5rem .25rem;padding:.75rem 1rem}.i-field-picker__group-header h3{margin:0;font-size:.8125rem;font-weight:600}.i-field-picker__group-header span{font-size:.75rem;font-weight:600}.i-field-picker__option{display:flex;align-items:center;justify-content:space-between;gap:1rem;min-height:2.75rem;padding:.5rem;border-radius:.375rem}\n"] }]
+        }], propDecorators: { options: [{
+                type: Input
+            }], ariaLabel: [{
+                type: Input
+            }], searchLabel: [{
+                type: Input
+            }], ungroupedLabel: [{
+                type: Input
+            }], emptyMessage: [{
+                type: Input
+            }], readonly: [{
+                type: Input
+            }], disabled: [{
+                type: Input
+            }], onChange: [{
+                type: Output
+            }] } });
+
+/**
+ * Controlled ordered list with accessible move/remove actions and optional row content.
+ * Emits new arrays and never mutates the caller's items or their properties.
+ * @example
+ * ```html
+ * <i-ordered-list [(items)]="columns" [itemLabel]="columnLabel" [itemTemplate]="settings" />
+ * <ng-template #settings let-column let-index="index" let-readonly="readonly">
+ *   <!-- Domain-specific settings are owned by the consumer. -->
+ * </ng-template>
+ * ```
+ */
+class IOrderedList {
+    /** Items in display order. Bind itemsChange or use two-way binding. */
+    items = [];
+    /** Accessible row labels. */
+    itemLabel = (item) => String(item);
+    /** Stable identity for rows, particularly when immutable item objects are used. */
+    itemKey = (item) => item;
+    /** Optional content below each item's label. */
+    itemTemplate;
+    /** Accessible name of the ordered list. */
+    ariaLabel = 'Selected items';
+    /** Empty-list message. */
+    emptyMessage = 'No items selected.';
+    /** Prevents reordering and removal. The same state is passed into the row template. */
+    readonly = false;
+    /** Disables all list actions. */
+    disabled = false;
+    /** Controls whether remove actions are shown. */
+    removable = true;
+    /** New ordered array after a move or removal. */
+    itemsChange = new EventEmitter();
+    /** Additional move details for consumers that need them. */
+    onMove = new EventEmitter();
+    /** Removed item and its former index. */
+    onRemove = new EventEmitter();
+    announcement = '';
+    move(index, direction) {
+        const target = index + direction;
+        if (this.readonly ||
+            this.disabled ||
+            index < 0 ||
+            index >= this.items.length ||
+            target < 0 ||
+            target >= this.items.length)
+            return;
+        const items = [...this.items];
+        const item = items[index];
+        [items[index], items[target]] = [items[target], items[index]];
+        this.announcement = `${this.itemLabel(item)} moved to position ${target + 1}.`;
+        this.itemsChange.emit(items);
+        this.onMove.emit({ item, previousIndex: index, index: target });
+    }
+    remove(index) {
+        if (this.readonly ||
+            this.disabled ||
+            !this.removable ||
+            index < 0 ||
+            index >= this.items.length)
+            return;
+        const item = this.items[index];
+        this.announcement = `${this.itemLabel(item)} removed.`;
+        this.itemsChange.emit(this.items.filter((_, i) => i !== index));
+        this.onRemove.emit({ item, index });
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: IOrderedList, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.12", type: IOrderedList, isStandalone: true, selector: "i-ordered-list", inputs: { items: "items", itemLabel: "itemLabel", itemKey: "itemKey", itemTemplate: "itemTemplate", ariaLabel: "ariaLabel", emptyMessage: "emptyMessage", readonly: "readonly", disabled: "disabled", removable: "removable" }, outputs: { itemsChange: "itemsChange", onMove: "onMove", onRemove: "onRemove" }, ngImport: i0, template: "<ol class=\"i-ordered-list\" [attr.aria-label]=\"ariaLabel\">\n  @for (item of items; track itemKey(item); let index = $index) {\n    <li class=\"i-ordered-list__item\">\n      <span class=\"i-ordered-list__position\" aria-hidden=\"true\">{{\n        index + 1\n      }}</span>\n      <div class=\"i-ordered-list__content\">\n        <strong>{{ itemLabel(item) }}</strong>\n        @if (itemTemplate) {\n          <ng-container\n            [ngTemplateOutlet]=\"itemTemplate\"\n            [ngTemplateOutletContext]=\"{\n              $implicit: item,\n              index: index,\n              readonly: readonly || disabled,\n            }\"\n          />\n        }\n      </div>\n      <div\n        class=\"i-ordered-list__actions\"\n        role=\"group\"\n        [attr.aria-label]=\"'Actions for ' + itemLabel(item)\"\n      >\n        <i-button\n          icon=\"pi pi-arrow-up\"\n          size=\"small\"\n          [text]=\"true\"\n          [disabled]=\"readonly || disabled || index === 0\"\n          (clicked)=\"move(index, -1)\"\n          >Move up</i-button\n        >\n        <i-button\n          icon=\"pi pi-arrow-down\"\n          size=\"small\"\n          [text]=\"true\"\n          [disabled]=\"readonly || disabled || index === items.length - 1\"\n          (clicked)=\"move(index, 1)\"\n          >Move down</i-button\n        >\n        @if (removable) {\n          <i-button\n            icon=\"pi pi-times\"\n            size=\"small\"\n            severity=\"danger\"\n            [text]=\"true\"\n            [disabled]=\"readonly || disabled\"\n            (clicked)=\"remove(index)\"\n            >Remove</i-button\n          >\n        }\n      </div>\n    </li>\n  }\n</ol>\n@if (!items.length) {\n  <i-no-content [message]=\"emptyMessage\" />\n}\n<span class=\"i-ordered-list__announcement\" role=\"status\" aria-live=\"polite\">{{\n  announcement\n}}</span>\n", styles: [".i-ordered-list{color:var(--color-text-primary)}.i-ordered-list__item{border-color:var(--surface-border);background:var(--surface-card)}.i-ordered-list__position{color:var(--color-primary);background:var(--surface-section)}:host{display:block}.i-ordered-list{display:grid;gap:.75rem;list-style:none;padding:0;margin:0}.i-ordered-list__item{display:flex;flex-wrap:wrap;align-items:flex-start;gap:1rem;padding:1rem;border:1px solid var(--surface-border);border-radius:.5rem}.i-ordered-list__position{display:grid;flex:0 0 1.75rem;place-items:center;width:1.75rem;height:1.75rem;border-radius:50%;font-size:.8125rem;font-weight:700}.i-ordered-list__content{flex:1 1 15rem;min-width:0;display:flex;flex-direction:column;gap:.5rem;padding-top:.25rem}.i-ordered-list__actions{display:flex;flex-wrap:wrap;align-items:flex-start;gap:.25rem}.i-ordered-list__announcement{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}@media(max-width:34rem){.i-ordered-list__actions{flex-basis:100%;margin-left:2.75rem}}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: IButton, selector: "i-button", inputs: ["severity", "size", "type", "disabled", "outlined", "raised", "text", "icon", "fluid", "loading"], outputs: ["clicked"] }, { kind: "component", type: NoContentComponent, selector: "i-no-content", inputs: ["icon", "message"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: IOrderedList, decorators: [{
+            type: Component,
+            args: [{ selector: 'i-ordered-list', standalone: true, imports: [NgTemplateOutlet, IButton, NoContentComponent], template: "<ol class=\"i-ordered-list\" [attr.aria-label]=\"ariaLabel\">\n  @for (item of items; track itemKey(item); let index = $index) {\n    <li class=\"i-ordered-list__item\">\n      <span class=\"i-ordered-list__position\" aria-hidden=\"true\">{{\n        index + 1\n      }}</span>\n      <div class=\"i-ordered-list__content\">\n        <strong>{{ itemLabel(item) }}</strong>\n        @if (itemTemplate) {\n          <ng-container\n            [ngTemplateOutlet]=\"itemTemplate\"\n            [ngTemplateOutletContext]=\"{\n              $implicit: item,\n              index: index,\n              readonly: readonly || disabled,\n            }\"\n          />\n        }\n      </div>\n      <div\n        class=\"i-ordered-list__actions\"\n        role=\"group\"\n        [attr.aria-label]=\"'Actions for ' + itemLabel(item)\"\n      >\n        <i-button\n          icon=\"pi pi-arrow-up\"\n          size=\"small\"\n          [text]=\"true\"\n          [disabled]=\"readonly || disabled || index === 0\"\n          (clicked)=\"move(index, -1)\"\n          >Move up</i-button\n        >\n        <i-button\n          icon=\"pi pi-arrow-down\"\n          size=\"small\"\n          [text]=\"true\"\n          [disabled]=\"readonly || disabled || index === items.length - 1\"\n          (clicked)=\"move(index, 1)\"\n          >Move down</i-button\n        >\n        @if (removable) {\n          <i-button\n            icon=\"pi pi-times\"\n            size=\"small\"\n            severity=\"danger\"\n            [text]=\"true\"\n            [disabled]=\"readonly || disabled\"\n            (clicked)=\"remove(index)\"\n            >Remove</i-button\n          >\n        }\n      </div>\n    </li>\n  }\n</ol>\n@if (!items.length) {\n  <i-no-content [message]=\"emptyMessage\" />\n}\n<span class=\"i-ordered-list__announcement\" role=\"status\" aria-live=\"polite\">{{\n  announcement\n}}</span>\n", styles: [".i-ordered-list{color:var(--color-text-primary)}.i-ordered-list__item{border-color:var(--surface-border);background:var(--surface-card)}.i-ordered-list__position{color:var(--color-primary);background:var(--surface-section)}:host{display:block}.i-ordered-list{display:grid;gap:.75rem;list-style:none;padding:0;margin:0}.i-ordered-list__item{display:flex;flex-wrap:wrap;align-items:flex-start;gap:1rem;padding:1rem;border:1px solid var(--surface-border);border-radius:.5rem}.i-ordered-list__position{display:grid;flex:0 0 1.75rem;place-items:center;width:1.75rem;height:1.75rem;border-radius:50%;font-size:.8125rem;font-weight:700}.i-ordered-list__content{flex:1 1 15rem;min-width:0;display:flex;flex-direction:column;gap:.5rem;padding-top:.25rem}.i-ordered-list__actions{display:flex;flex-wrap:wrap;align-items:flex-start;gap:.25rem}.i-ordered-list__announcement{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}@media(max-width:34rem){.i-ordered-list__actions{flex-basis:100%;margin-left:2.75rem}}\n"] }]
+        }], propDecorators: { items: [{
+                type: Input
+            }], itemLabel: [{
+                type: Input
+            }], itemKey: [{
+                type: Input
+            }], itemTemplate: [{
+                type: Input
+            }], ariaLabel: [{
+                type: Input
+            }], emptyMessage: [{
+                type: Input
+            }], readonly: [{
+                type: Input
+            }], disabled: [{
+                type: Input
+            }], removable: [{
+                type: Input
+            }], itemsChange: [{
+                type: Output
+            }], onMove: [{
+                type: Output
+            }], onRemove: [{
+                type: Output
+            }] } });
+
+/**
+ * Controlled field/operator/value rows. Can also edit sorting rules by supplying
+ * direction operators with requiresValue=false. Does not execute or persist rules.
+ * @example
+ * ```html
+ * <i-rule-editor [fields]="fields" [operators]="operators" [(rules)]="filters" />
+ * ```
+ */
+class IRuleEditor {
+    /** Available fields. */
+    fields = [];
+    /** Available operators, optionally restricted by field type. */
+    operators = [];
+    /** Current rows. Bind rulesChange or use two-way binding. */
+    rules = [];
+    /** Accessible name for the collection. */
+    ariaLabel = 'Rules';
+    /** Label of the operator selector (for example Direction). */
+    operatorLabel = 'Operator';
+    /** Add action label. */
+    addLabel = 'Add rule';
+    /** Empty collection message. */
+    emptyMessage = 'No rules.';
+    /** Prevents user changes while retaining the current display. */
+    readonly = false;
+    /** Disables all row controls. */
+    disabled = false;
+    /** Immutable replacement emitted after a user action. */
+    rulesChange = new EventEmitter();
+    booleanOptions = [
+        { key: 'true', label: 'True' },
+        { key: 'false', label: 'False' },
+    ];
+    field(rule) {
+        return this.fields.find((field) => field.key === rule.fieldKey) ?? null;
+    }
+    operator(rule) {
+        return (this.operators.find((operator) => operator.key === rule.operator) ?? null);
+    }
+    booleanValue(rule) {
+        return (this.booleanOptions.find((option) => option.key === rule.value) ?? null);
+    }
+    operatorsFor(field) {
+        return field
+            ? this.operators.filter((operator) => !operator.fieldTypes || operator.fieldTypes.includes(field.type))
+            : [];
+    }
+    get canAdd() {
+        return (!this.readonly &&
+            !this.disabled &&
+            this.fields.some((field) => this.operatorsFor(field).length > 0));
+    }
+    add() {
+        if (!this.canAdd)
+            return;
+        const field = this.fields.find((field) => this.operatorsFor(field).length > 0);
+        this.rulesChange.emit([
+            ...this.rules,
+            {
+                fieldKey: field.key,
+                operator: this.operatorsFor(field)[0].key,
+                value: '',
+            },
+        ]);
+    }
+    changeField(index, field) {
+        if (!field)
+            return;
+        this.update(index, {
+            fieldKey: field.key,
+            operator: this.operatorsFor(field)[0]?.key ?? '',
+            value: '',
+        });
+    }
+    changeOperator(index, operator) {
+        if (!operator)
+            return;
+        this.update(index, {
+            operator: operator.key,
+            value: operator.requiresValue === false ? '' : this.rules[index]?.value,
+        });
+    }
+    update(index, changes) {
+        if (this.readonly ||
+            this.disabled ||
+            index < 0 ||
+            index >= this.rules.length)
+            return;
+        this.rulesChange.emit(this.rules.map((rule, i) => i === index ? { ...rule, ...changes } : rule));
+    }
+    remove(index) {
+        if (this.readonly ||
+            this.disabled ||
+            index < 0 ||
+            index >= this.rules.length)
+            return;
+        this.rulesChange.emit(this.rules.filter((_, i) => i !== index));
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: IRuleEditor, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.12", type: IRuleEditor, isStandalone: true, selector: "i-rule-editor", inputs: { fields: "fields", operators: "operators", rules: "rules", ariaLabel: "ariaLabel", operatorLabel: "operatorLabel", addLabel: "addLabel", emptyMessage: "emptyMessage", readonly: "readonly", disabled: "disabled" }, outputs: { rulesChange: "rulesChange" }, ngImport: i0, template: "<div class=\"i-rule-editor\" role=\"group\" [attr.aria-label]=\"ariaLabel\">\n  <div class=\"i-rule-editor__toolbar\">\n    <i-button\n      icon=\"pi pi-plus\"\n      size=\"small\"\n      [disabled]=\"!canAdd\"\n      (clicked)=\"add()\"\n      >{{ addLabel }}</i-button\n    >\n  </div>\n  <div class=\"i-rule-editor__rules\">\n    @for (rule of rules; track $index; let index = $index) {\n      <div\n        class=\"i-rule-editor__row\"\n        role=\"group\"\n        [attr.aria-label]=\"'Rule ' + (index + 1)\"\n      >\n        <span class=\"i-rule-editor__number\" aria-hidden=\"true\">{{\n          index + 1\n        }}</span>\n        <i-select\n          label=\"Field\"\n          [options]=\"fields\"\n          optionLabel=\"label\"\n          [readonly]=\"readonly || disabled\"\n          [fluid]=\"true\"\n          [ngModel]=\"field(rule)\"\n          (ngModelChange)=\"changeField(index, $event)\"\n          [ngModelOptions]=\"{ standalone: true }\"\n        />\n        <i-select\n          [label]=\"operatorLabel\"\n          [options]=\"operatorsFor(field(rule))\"\n          optionLabel=\"label\"\n          [filter]=\"false\"\n          [readonly]=\"readonly || disabled\"\n          [fluid]=\"true\"\n          [ngModel]=\"operator(rule)\"\n          (ngModelChange)=\"changeOperator(index, $event)\"\n          [ngModelOptions]=\"{ standalone: true }\"\n        />\n        @if (operator(rule)?.requiresValue !== false) {\n          @if (field(rule)?.type === \"boolean\") {\n            <i-select\n              label=\"Value\"\n              [options]=\"booleanOptions\"\n              optionLabel=\"label\"\n              [filter]=\"false\"\n              [readonly]=\"readonly || disabled\"\n              [fluid]=\"true\"\n              [ngModel]=\"booleanValue(rule)\"\n              (ngModelChange)=\"update(index, { value: $event?.key ?? '' })\"\n              [ngModelOptions]=\"{ standalone: true }\"\n            />\n          } @else {\n            <i-input-text\n              label=\"Value\"\n              [type]=\"field(rule)?.type ?? 'text'\"\n              [readonly]=\"readonly || disabled\"\n              [fluid]=\"true\"\n              [ngModel]=\"rule.value\"\n              (ngModelChange)=\"\n                update(index, { value: $event == null ? '' : '' + $event })\n              \"\n              [ngModelOptions]=\"{ standalone: true }\"\n            />\n          }\n        }\n        <i-button\n          icon=\"pi pi-trash\"\n          size=\"small\"\n          severity=\"danger\"\n          [text]=\"true\"\n          [disabled]=\"readonly || disabled\"\n          (clicked)=\"remove(index)\"\n          >Remove</i-button\n        >\n      </div>\n    } @empty {\n      <i-no-content [message]=\"emptyMessage\" />\n    }\n  </div>\n</div>\n", styles: [".i-rule-editor{color:var(--color-text-primary)}.i-rule-editor__row{border-color:var(--surface-border);background:var(--surface-card)}.i-rule-editor__number{color:var(--color-primary);background:var(--surface-section)}:host{display:block}.i-rule-editor__toolbar{display:flex;justify-content:flex-end;margin-bottom:.75rem}.i-rule-editor__rules{display:grid;gap:.75rem}.i-rule-editor__row{display:grid;grid-template-columns:auto minmax(9rem,1fr) minmax(9rem,1fr) minmax(9rem,1fr) auto;align-items:end;gap:.75rem;padding:1rem;border:1px solid var(--surface-border);border-radius:.5rem}.i-rule-editor__number{display:grid;place-items:center;width:1.75rem;height:1.75rem;margin-bottom:.25rem;border-radius:50%;font-size:.8125rem;font-weight:700}.i-rule-editor__row>i-select,.i-rule-editor__row>i-input-text{min-width:0}.i-rule-editor__row>i-button{grid-column:-1}@media(max-width:48rem){.i-rule-editor__row{grid-template-columns:auto repeat(2,minmax(0,1fr))}.i-rule-editor__row>i-input-text{grid-column:2}.i-rule-editor__row>i-button{grid-column:3;justify-self:end}}@media(max-width:34rem){.i-rule-editor__row{grid-template-columns:auto minmax(0,1fr)}.i-rule-editor__row>i-select,.i-rule-editor__row>i-input-text{grid-column:2}.i-rule-editor__row>i-button{grid-column:2;justify-self:end}}\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: IButton, selector: "i-button", inputs: ["severity", "size", "type", "disabled", "outlined", "raised", "text", "icon", "fluid", "loading"], outputs: ["clicked"] }, { 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: ISelect, selector: "i-select", inputs: ["label", "options", "optionLabel", "placeholder", "useFloatLabel", "id", "fluid", "showClear", "filter", "filterBy", "errorMessages", "readonly"], outputs: ["onChange", "onClear"] }, { kind: "component", type: NoContentComponent, selector: "i-no-content", inputs: ["icon", "message"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: IRuleEditor, decorators: [{
+            type: Component,
+            args: [{ selector: 'i-rule-editor', standalone: true, imports: [FormsModule, IButton, IInputText, ISelect, NoContentComponent], template: "<div class=\"i-rule-editor\" role=\"group\" [attr.aria-label]=\"ariaLabel\">\n  <div class=\"i-rule-editor__toolbar\">\n    <i-button\n      icon=\"pi pi-plus\"\n      size=\"small\"\n      [disabled]=\"!canAdd\"\n      (clicked)=\"add()\"\n      >{{ addLabel }}</i-button\n    >\n  </div>\n  <div class=\"i-rule-editor__rules\">\n    @for (rule of rules; track $index; let index = $index) {\n      <div\n        class=\"i-rule-editor__row\"\n        role=\"group\"\n        [attr.aria-label]=\"'Rule ' + (index + 1)\"\n      >\n        <span class=\"i-rule-editor__number\" aria-hidden=\"true\">{{\n          index + 1\n        }}</span>\n        <i-select\n          label=\"Field\"\n          [options]=\"fields\"\n          optionLabel=\"label\"\n          [readonly]=\"readonly || disabled\"\n          [fluid]=\"true\"\n          [ngModel]=\"field(rule)\"\n          (ngModelChange)=\"changeField(index, $event)\"\n          [ngModelOptions]=\"{ standalone: true }\"\n        />\n        <i-select\n          [label]=\"operatorLabel\"\n          [options]=\"operatorsFor(field(rule))\"\n          optionLabel=\"label\"\n          [filter]=\"false\"\n          [readonly]=\"readonly || disabled\"\n          [fluid]=\"true\"\n          [ngModel]=\"operator(rule)\"\n          (ngModelChange)=\"changeOperator(index, $event)\"\n          [ngModelOptions]=\"{ standalone: true }\"\n        />\n        @if (operator(rule)?.requiresValue !== false) {\n          @if (field(rule)?.type === \"boolean\") {\n            <i-select\n              label=\"Value\"\n              [options]=\"booleanOptions\"\n              optionLabel=\"label\"\n              [filter]=\"false\"\n              [readonly]=\"readonly || disabled\"\n              [fluid]=\"true\"\n              [ngModel]=\"booleanValue(rule)\"\n              (ngModelChange)=\"update(index, { value: $event?.key ?? '' })\"\n              [ngModelOptions]=\"{ standalone: true }\"\n            />\n          } @else {\n            <i-input-text\n              label=\"Value\"\n              [type]=\"field(rule)?.type ?? 'text'\"\n              [readonly]=\"readonly || disabled\"\n              [fluid]=\"true\"\n              [ngModel]=\"rule.value\"\n              (ngModelChange)=\"\n                update(index, { value: $event == null ? '' : '' + $event })\n              \"\n              [ngModelOptions]=\"{ standalone: true }\"\n            />\n          }\n        }\n        <i-button\n          icon=\"pi pi-trash\"\n          size=\"small\"\n          severity=\"danger\"\n          [text]=\"true\"\n          [disabled]=\"readonly || disabled\"\n          (clicked)=\"remove(index)\"\n          >Remove</i-button\n        >\n      </div>\n    } @empty {\n      <i-no-content [message]=\"emptyMessage\" />\n    }\n  </div>\n</div>\n", styles: [".i-rule-editor{color:var(--color-text-primary)}.i-rule-editor__row{border-color:var(--surface-border);background:var(--surface-card)}.i-rule-editor__number{color:var(--color-primary);background:var(--surface-section)}:host{display:block}.i-rule-editor__toolbar{display:flex;justify-content:flex-end;margin-bottom:.75rem}.i-rule-editor__rules{display:grid;gap:.75rem}.i-rule-editor__row{display:grid;grid-template-columns:auto minmax(9rem,1fr) minmax(9rem,1fr) minmax(9rem,1fr) auto;align-items:end;gap:.75rem;padding:1rem;border:1px solid var(--surface-border);border-radius:.5rem}.i-rule-editor__number{display:grid;place-items:center;width:1.75rem;height:1.75rem;margin-bottom:.25rem;border-radius:50%;font-size:.8125rem;font-weight:700}.i-rule-editor__row>i-select,.i-rule-editor__row>i-input-text{min-width:0}.i-rule-editor__row>i-button{grid-column:-1}@media(max-width:48rem){.i-rule-editor__row{grid-template-columns:auto repeat(2,minmax(0,1fr))}.i-rule-editor__row>i-input-text{grid-column:2}.i-rule-editor__row>i-button{grid-column:3;justify-self:end}}@media(max-width:34rem){.i-rule-editor__row{grid-template-columns:auto minmax(0,1fr)}.i-rule-editor__row>i-select,.i-rule-editor__row>i-input-text{grid-column:2}.i-rule-editor__row>i-button{grid-column:2;justify-self:end}}\n"] }]
+        }], propDecorators: { fields: [{
+                type: Input
+            }], operators: [{
+                type: Input
+            }], rules: [{
+                type: Input
+            }], ariaLabel: [{
+                type: Input
+            }], operatorLabel: [{
+                type: Input
+            }], addLabel: [{
+                type: Input
+            }], emptyMessage: [{
+                type: Input
+            }], readonly: [{
+                type: Input
+            }], disabled: [{
+                type: Input
+            }], rulesChange: [{
+                type: Output
+            }] } });
+
 /*
  * Public API Surface of invensys-ng
  */
@@ -9925,5 +10441,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.12", ngImpo
  * Generated bundle index. Do not edit.
  */
 
-export { AbstractDialog, CLAIMS_CHECKER, ConfirmationDialogComponent, ConfirmationDialogService, DataUpdateEventService, DialogService, EmptyStateComponent, IAccordion, IAccordionList, IButton, ICalendar, ICard, IChart, ICheckbox, IChip, IChipsComponent, IDialog, IDialogActions, IDialogBase, IDivider, IInputText, IListbox, IMessage, IMultiSelect, IOverlayPanel, IPanel, IPlaceholder, IProgressSpinner, IRadioButton, ISelect, ITabPanel, ITable, ITabs, ITag, ITextarea, IToggle, ITreeView, IWhisper, LayoutComponent, LayoutService, LocalStorageColorSchemeKey, MenuComponent, NoContentComponent, SeoService, SidebarComponent, StructuredDataService, TooltipComponent, TooltipDirective, TopbarComponent, UniqueComponentId, WhisperService, ZIndexUtils, lastId, provideMenuClaimsChecker };
+export { AbstractDialog, CLAIMS_CHECKER, ConfirmationDialogComponent, ConfirmationDialogService, DataUpdateEventService, DialogService, EmptyStateComponent, IAccordion, IAccordionList, IButton, ICalendar, ICard, IChart, ICheckbox, IChip, IChipsComponent, IDialog, IDialogActions, IDialogBase, IDivider, IFieldPicker, IInputText, IListbox, IMessage, IMultiSelect, IOrderedList, IOverlayPanel, IPanel, IPlaceholder, IProgressSpinner, IRadioButton, IRuleEditor, ISelect, IStep, IStepper, ITabPanel, ITable, ITabs, ITag, ITextarea, IToggle, ITreeView, IWhisper, LayoutComponent, LayoutService, LocalStorageColorSchemeKey, MenuComponent, NoContentComponent, SeoService, SidebarComponent, StructuredDataService, TooltipComponent, TooltipDirective, TopbarComponent, UniqueComponentId, WhisperService, ZIndexUtils, lastId, provideMenuClaimsChecker };
 //# sourceMappingURL=invensys-ng.mjs.map