integra-ng 21.0.22 → 21.0.23

package/fesm2022/integra-ng.mjs

@@ -754,6 +754,10 @@ class IInputText {
      * HTML id attribute for the input element
      */
     id;
+    /**
+     * HTML name attribute for better browser autofill support
+     */
+    name;
     /**
      * Whether the input should take full width of its container
      * @default false
@@ -778,6 +782,10 @@ class IInputText {
      * Placeholder text for the input
      */
     placeholder;
+    /**
+     * HTML autocomplete attribute (e.g. 'username', 'current-password')
+     */
+    autocomplete;
     /**
      * Allows external control to override validation state
      * @default false
@@ -821,6 +829,16 @@ class IInputText {
      * @internal
      */
     componentId = UniqueComponentId('i-input-text-');
+    /**
+     * Native input element reference
+     * @internal
+     */
+    inputElementRef;
+    /**
+     * Pending autofill sync timers
+     * @internal
+     */
+    autofillCheckTimeouts = [];
     /**
      * Callback for ControlValueAccessor
      * @internal
@@ -837,6 +855,20 @@ class IInputText {
             this.ngControl.valueAccessor = this;
         }
     }
+    /**
+     * Runs post-render checks to catch browser autofill values
+     * @internal
+     */
+    ngAfterViewInit() {
+        this.scheduleAutofillChecks();
+    }
+    /**
+     * Clears pending timers
+     * @internal
+     */
+    ngOnDestroy() {
+        this.clearAutofillChecks();
+    }
     /**
      * Writes a value to the input (ControlValueAccessor)
      * @internal
@@ -881,6 +913,46 @@ class IInputText {
     touch() {
         this.onTouched();
     }
+    /**
+     * Handles blur event
+     * @internal
+     */
+    handleBlur() {
+        this.syncValueFromNativeInput(true);
+        this.touch();
+    }
+    /**
+     * Handles focus event
+     * @internal
+     */
+    handleFocus() {
+        this.syncValueFromNativeInput(true);
+    }
+    /**
+     * Handles browser autofill animation hook
+     * @internal
+     */
+    handleAutoFillAnimation(event) {
+        if (event.animationName === 'i-input-autofill-start') {
+            this.syncValueFromNativeInput(true);
+        }
+    }
+    /**
+     * Synchronizes component value from native input value
+     * @internal
+     */
+    syncValueFromNativeInput(emitChange = false) {
+        const nativeValue = this.inputElementRef?.nativeElement?.value;
+        if (typeof nativeValue !== 'string')
+            return;
+        const normalized = nativeValue === '' ? null : nativeValue;
+        if (this.value === normalized)
+            return;
+        this.value = normalized;
+        if (emitChange) {
+            this.onChange(this.value);
+        }
+    }
     /**
      * Gets the form control instance
      * @internal
@@ -943,12 +1015,35 @@ class IInputText {
      * @internal
      */
     get hasValue() {
+        const nativeValue = this.inputElementRef?.nativeElement?.value;
+        const hasNativeValue = typeof nativeValue === 'string' && nativeValue.length > 0;
         if (this.value === null || this.value === undefined)
-            return false;
+            return hasNativeValue;
         if (typeof this.value === 'string')
             return this.value.length > 0;
         return true; // For numbers including 0
     }
+    /**
+     * Queues multiple checks because browsers may autofill asynchronously
+     * @internal
+     */
+    scheduleAutofillChecks() {
+        this.clearAutofillChecks();
+        [0, 50, 250, 1000].forEach((delay) => {
+            const timeoutId = setTimeout(() => {
+                this.syncValueFromNativeInput(true);
+            }, delay);
+            this.autofillCheckTimeouts.push(timeoutId);
+        });
+    }
+    /**
+     * Clears queued autofill checks
+     * @internal
+     */
+    clearAutofillChecks() {
+        this.autofillCheckTimeouts.forEach((timeoutId) => clearTimeout(timeoutId));
+        this.autofillCheckTimeouts = [];
+    }
     /**
      * Increment number input value
      * @internal
@@ -982,11 +1077,11 @@ class IInputText {
         inputElement.value = this.value;
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: IInputText, deps: [{ token: i1.NgControl, optional: true, self: true }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.3", type: IInputText, isStandalone: true, selector: "i-input-text", inputs: { label: "label", type: "type", id: "id", fluid: "fluid", forceFloated: "forceFloated", hideText: "hideText", useFloatLabel: "useFloatLabel", placeholder: "placeholder", externalInvalid: "externalInvalid", externalErrorMessage: "externalErrorMessage", backgroundStyle: "backgroundStyle", icon: "icon", readonly: "readonly", disabled: "disabled", errorMessages: "errorMessages" }, ngImport: i0, template: "<div\n  class=\"i-input-wrapper\"\n  [class.invalid]=\"showErrors\"\n  [class.i-input--fluid]=\"fluid\"\n  [class.i-input--no-float]=\"!useFloatLabel\"\n  [attr.id]=\"componentId\"\n>\n  <div\n    [ngClass]=\"useFloatLabel ? 'float-label' : 'normal-input'\"\n    class=\"i-input-container\"\n    [class.has-icon]=\"icon\"\n  >\n    <div class=\"i-input-icon-wrapper\">\n      @if (icon) {\n      <span class=\"i-input-icon\" [attr.aria-hidden]=\"true\">\n        <i [class]=\"icon\" [attr.aria-hidden]=\"true\"></i>\n      </span>\n      }\n      <input\n        #inputElement\n        [id]=\"id || componentId\"\n        [type]=\"type\"\n        [disabled]=\"disabled\"\n        [readonly]=\"readonly\"\n        [value]=\"hideText ? '' : value || ''\"\n        (input)=\"handleInput($event)\"\n        (blur)=\"touch()\"\n        [placeholder]=\"useFloatLabel ? ' ' : placeholder || label\"\n        class=\"i-input\"\n        [class.has-icon]=\"icon\"\n        [class.hide-text]=\"hideText\"\n        [class.readonly]=\"readonly\"\n        [class.component-border]=\"backgroundStyle === 'component'\"\n        [iTooltip]=\"showErrors ? (getErrorMessage() || '') : ''\"\n        tooltipPosition=\"below\"\n        [tooltipDelay]=\"100\"\n      />\n      @if (type === 'number' && !disabled && !readonly) {\n      <div class=\"i-input-spinners\">\n        <button\n          type=\"button\"\n          class=\"i-input-spinner-button i-input-spinner-up\"\n          (click)=\"incrementNumber(inputElement)\"\n          [attr.aria-label]=\"'Increment ' + label\"\n          tabindex=\"-1\"\n        >\n          <i class=\"pi pi-chevron-up\"></i>\n        </button>\n        <button\n          type=\"button\"\n          class=\"i-input-spinner-button i-input-spinner-down\"\n          (click)=\"decrementNumber(inputElement)\"\n          [attr.aria-label]=\"'Decrement ' + label\"\n          tabindex=\"-1\"\n        >\n          <i class=\"pi pi-chevron-down\"></i>\n        </button>\n      </div>\n      }\n    </div>\n    @if (useFloatLabel) {\n    <label\n      [for]=\"id || componentId\"\n      class=\"i-label\"\n      [class.floated]=\"forceFloated || hasValue\"\n      >{{ label }}</label\n    >\n    }\n    <ng-content></ng-content>\n  </div>\n</div>\n", styles: [".i-input{color:var(--color-text-primary);border:1px solid var(--surface-border);background:var(--color-component-background-secondary)}.i-input.component-border{background:var(--color-component-background)}.i-input:focus{outline:none;border-color:var(--color-primary);box-shadow:0 2px 10px #0003}.i-label{color:var(--color-text-secondary)}.i-input:focus+.i-label,.i-input:not(:placeholder-shown)+.i-label,.i-label.floated{background:var(--color-component-background-secondary)}.i-input[disabled]{background:#f5f5f5;border-color:#e0e0e0;color:#9e9e9e}.invalid .i-input{border-color:var(--color-danger)}.invalid .i-label,.invalid .i-error{color:var(--color-danger)}.i-input-spinner-button{color:var(--color-text-secondary);background:transparent}.i-input-spinner-button:hover{background:var(--surface-hover);color:var(--color-text-primary)}.i-input-spinner-button:active{background:var(--surface-hover);color:var(--color-primary)}.i-input-wrapper{display:flex;flex-direction:column;gap:8px;width:100%;margin-top:4px;font-size:1em}.i-input-wrapper.i-input--fluid{width:100%}Ch .i-input-wrapper.i-input--no-float{margin-top:0;height:auto}.i-input-wrapper .i-input-container{display:flex;align-items:center;gap:8px}.i-input-wrapper .i-input{box-sizing:border-box;width:100%;border-radius:4px;min-height:42px;transition:border-color .15s ease,box-shadow .15s ease}.i-input-wrapper .i-input:focus{outline:none}.i-input-wrapper .i-input.has-icon{padding-left:34px}.i-input-wrapper .i-input.hide-text{color:transparent;text-shadow:none;cursor:pointer}.i-input-wrapper .i-input.readonly{cursor:pointer;-webkit-user-select:none;user-select:none;caret-color:transparent}.i-input-wrapper .i-input-icon-wrapper{position:relative;width:100%;display:flex}.i-input-wrapper .i-input-icon{position:absolute;top:50%;display:flex;align-items:center;justify-content:center;flex-shrink:0;width:16px;height:16px;color:inherit;pointer-events:none;transform:translateY(-50%)}.i-input-wrapper .float-label{position:relative;display:flex;align-items:stretch}.i-input-wrapper .float-label .i-input-icon{left:10px}.i-input-wrapper .float-label .i-input{padding:14px 10px}.i-input-wrapper .float-label .i-input.has-icon{padding-left:34px}.i-input-wrapper .float-label .i-label{position:absolute;top:14px;left:8px;padding:0 4px;pointer-events:none;transition:all .15s ease}.i-input-wrapper .float-label .i-input:focus+.i-label,.i-input-wrapper .float-label .i-input:not(:placeholder-shown)+.i-label,.i-input-wrapper .float-label .i-label.floated{top:-8px}.i-input-wrapper .float-label.has-icon .i-label:not(.floated){left:34px}.i-input-wrapper .normal-input{position:relative}.i-input-wrapper .normal-input .i-input-icon{left:12px}.i-input-wrapper .normal-input .i-input{padding:8px 12px}.i-input-wrapper .normal-input .i-input.has-icon{padding-left:38px}.i-input-wrapper .i-input[type=number]{padding-right:32px}.i-input-wrapper .i-input[type=number]::-webkit-outer-spin-button,.i-input-wrapper .i-input[type=number]::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}.i-input-wrapper .i-input[type=number]{appearance:textfield;-moz-appearance:textfield}.i-input-wrapper .i-input-spinners{position:absolute;right:4px;top:50%;transform:translateY(-50%);display:flex;flex-direction:column;gap:2px}.i-input-wrapper .i-input-spinner-button{display:flex;align-items:center;justify-content:center;width:24px;height:16px;border:none;border-radius:3px;cursor:pointer;transition:background-color .15s ease,color .15s ease;padding:0;font-size:10px}.i-input-wrapper .i-input-spinner-button i{font-size:10px;line-height:1}.i-input-wrapper .i-input-spinner-button:focus{outline:none}\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.0.3", type: IInputText, isStandalone: true, selector: "i-input-text", inputs: { label: "label", type: "type", id: "id", name: "name", fluid: "fluid", forceFloated: "forceFloated", hideText: "hideText", useFloatLabel: "useFloatLabel", placeholder: "placeholder", autocomplete: "autocomplete", externalInvalid: "externalInvalid", externalErrorMessage: "externalErrorMessage", backgroundStyle: "backgroundStyle", icon: "icon", readonly: "readonly", disabled: "disabled", errorMessages: "errorMessages" }, viewQueries: [{ propertyName: "inputElementRef", first: true, predicate: ["inputElement"], descendants: true }], ngImport: i0, template: "<div\n  class=\"i-input-wrapper\"\n  [class.invalid]=\"showErrors\"\n  [class.i-input--fluid]=\"fluid\"\n  [class.i-input--no-float]=\"!useFloatLabel\"\n  [attr.id]=\"componentId\"\n>\n  <div\n    [ngClass]=\"useFloatLabel ? 'float-label' : 'normal-input'\"\n    class=\"i-input-container\"\n    [class.has-icon]=\"icon\"\n  >\n    <div class=\"i-input-icon-wrapper\">\n      @if (icon) {\n      <span class=\"i-input-icon\" [attr.aria-hidden]=\"true\">\n        <i [class]=\"icon\" [attr.aria-hidden]=\"true\"></i>\n      </span>\n      }\n      <input\n        #inputElement\n        [id]=\"id || componentId\"\n        [attr.name]=\"name\"\n        [type]=\"type\"\n        [attr.autocomplete]=\"autocomplete\"\n        [disabled]=\"disabled\"\n        [readonly]=\"readonly\"\n        [value]=\"hideText ? '' : value || ''\"\n        (input)=\"handleInput($event)\"\n        (focus)=\"handleFocus()\"\n        (blur)=\"handleBlur()\"\n        (animationstart)=\"handleAutoFillAnimation($event)\"\n        [placeholder]=\"useFloatLabel ? ' ' : placeholder || label\"\n        class=\"i-input\"\n        [class.has-icon]=\"icon\"\n        [class.hide-text]=\"hideText\"\n        [class.readonly]=\"readonly\"\n        [class.component-border]=\"backgroundStyle === 'component'\"\n        [iTooltip]=\"showErrors ? (getErrorMessage() || '') : ''\"\n        tooltipPosition=\"below\"\n        [tooltipDelay]=\"100\"\n      />\n      @if (type === 'number' && !disabled && !readonly) {\n      <div class=\"i-input-spinners\">\n        <button\n          type=\"button\"\n          class=\"i-input-spinner-button i-input-spinner-up\"\n          (click)=\"incrementNumber(inputElement)\"\n          [attr.aria-label]=\"'Increment ' + label\"\n          tabindex=\"-1\"\n        >\n          <i class=\"pi pi-chevron-up\"></i>\n        </button>\n        <button\n          type=\"button\"\n          class=\"i-input-spinner-button i-input-spinner-down\"\n          (click)=\"decrementNumber(inputElement)\"\n          [attr.aria-label]=\"'Decrement ' + label\"\n          tabindex=\"-1\"\n        >\n          <i class=\"pi pi-chevron-down\"></i>\n        </button>\n      </div>\n      }\n    </div>\n    @if (useFloatLabel) {\n    <label\n      [for]=\"id || componentId\"\n      class=\"i-label\"\n      [class.floated]=\"forceFloated || hasValue\"\n      >{{ label }}</label\n    >\n    }\n    <ng-content></ng-content>\n  </div>\n</div>\n", styles: [".i-input{color:var(--color-text-primary);border:1px solid var(--surface-border);background:var(--color-component-background-secondary)}.i-input.component-border{background:var(--color-component-background)}.i-input:focus{outline:none;border-color:var(--color-primary);box-shadow:0 2px 10px #0003}.i-label{color:var(--color-text-secondary)}.i-input:focus+.i-label,.i-input:not(:placeholder-shown)+.i-label,.i-label.floated{background:var(--color-component-background-secondary)}.i-input[disabled]{background:#f5f5f5;border-color:#e0e0e0;color:#9e9e9e}.invalid .i-input{border-color:var(--color-danger)}.invalid .i-label,.invalid .i-error{color:var(--color-danger)}.i-input-spinner-button{color:var(--color-text-secondary);background:transparent}.i-input-spinner-button:hover{background:var(--surface-hover);color:var(--color-text-primary)}.i-input-spinner-button:active{background:var(--surface-hover);color:var(--color-primary)}@keyframes i-input-autofill-start{}.i-input-wrapper{display:flex;flex-direction:column;gap:8px;width:100%;margin-top:4px;font-size:1em}.i-input-wrapper.i-input--fluid{width:100%}.i-input-wrapper.i-input--no-float{margin-top:0;height:auto}.i-input-wrapper .i-input-container{display:flex;align-items:center;gap:8px}.i-input-wrapper .i-input{box-sizing:border-box;width:100%;border-radius:4px;min-height:42px;transition:border-color .15s ease,box-shadow .15s ease}.i-input-wrapper .i-input:focus{outline:none}.i-input-wrapper .i-input.has-icon{padding-left:34px}.i-input-wrapper .i-input.hide-text{color:transparent;text-shadow:none;cursor:pointer}.i-input-wrapper .i-input.readonly{cursor:pointer;-webkit-user-select:none;user-select:none;caret-color:transparent}.i-input-wrapper .i-input-icon-wrapper{position:relative;width:100%;display:flex}.i-input-wrapper .i-input-icon{position:absolute;top:50%;display:flex;align-items:center;justify-content:center;flex-shrink:0;width:16px;height:16px;color:inherit;pointer-events:none;transform:translateY(-50%)}.i-input-wrapper .float-label{position:relative;display:flex;align-items:stretch}.i-input-wrapper .float-label .i-input-icon{left:10px}.i-input-wrapper .float-label .i-input{padding:14px 10px}.i-input-wrapper .float-label .i-input:-webkit-autofill{animation-name:i-input-autofill-start;animation-duration:.01s}.i-input-wrapper .float-label .i-input.has-icon{padding-left:34px}.i-input-wrapper .float-label .i-label{position:absolute;top:14px;left:8px;padding:0 4px;pointer-events:none;transition:all .15s ease}.i-input-wrapper .float-label .i-input:focus+.i-label,.i-input-wrapper .float-label .i-input:not(:placeholder-shown)+.i-label,.i-input-wrapper .float-label .i-label.floated{top:-8px}.i-input-wrapper .float-label.has-icon .i-label:not(.floated){left:34px}.i-input-wrapper .normal-input{position:relative}.i-input-wrapper .normal-input .i-input-icon{left:12px}.i-input-wrapper .normal-input .i-input{padding:8px 12px}.i-input-wrapper .normal-input .i-input.has-icon{padding-left:38px}.i-input-wrapper .i-input[type=number]{padding-right:32px}.i-input-wrapper .i-input[type=number]::-webkit-outer-spin-button,.i-input-wrapper .i-input[type=number]::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}.i-input-wrapper .i-input[type=number]{appearance:textfield;-moz-appearance:textfield}.i-input-wrapper .i-input-spinners{position:absolute;right:4px;top:50%;transform:translateY(-50%);display:flex;flex-direction:column;gap:2px}.i-input-wrapper .i-input-spinner-button{display:flex;align-items:center;justify-content:center;width:24px;height:16px;border:none;border-radius:3px;cursor:pointer;transition:background-color .15s ease,color .15s ease;padding:0;font-size:10px}.i-input-wrapper .i-input-spinner-button i{font-size:10px;line-height:1}.i-input-wrapper .i-input-spinner-button:focus{outline:none}\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.0.3", ngImport: i0, type: IInputText, decorators: [{
             type: Component,
-            args: [{ selector: 'i-input-text', standalone: true, imports: [CommonModule, TooltipDirective], template: "<div\n  class=\"i-input-wrapper\"\n  [class.invalid]=\"showErrors\"\n  [class.i-input--fluid]=\"fluid\"\n  [class.i-input--no-float]=\"!useFloatLabel\"\n  [attr.id]=\"componentId\"\n>\n  <div\n    [ngClass]=\"useFloatLabel ? 'float-label' : 'normal-input'\"\n    class=\"i-input-container\"\n    [class.has-icon]=\"icon\"\n  >\n    <div class=\"i-input-icon-wrapper\">\n      @if (icon) {\n      <span class=\"i-input-icon\" [attr.aria-hidden]=\"true\">\n        <i [class]=\"icon\" [attr.aria-hidden]=\"true\"></i>\n      </span>\n      }\n      <input\n        #inputElement\n        [id]=\"id || componentId\"\n        [type]=\"type\"\n        [disabled]=\"disabled\"\n        [readonly]=\"readonly\"\n        [value]=\"hideText ? '' : value || ''\"\n        (input)=\"handleInput($event)\"\n        (blur)=\"touch()\"\n        [placeholder]=\"useFloatLabel ? ' ' : placeholder || label\"\n        class=\"i-input\"\n        [class.has-icon]=\"icon\"\n        [class.hide-text]=\"hideText\"\n        [class.readonly]=\"readonly\"\n        [class.component-border]=\"backgroundStyle === 'component'\"\n        [iTooltip]=\"showErrors ? (getErrorMessage() || '') : ''\"\n        tooltipPosition=\"below\"\n        [tooltipDelay]=\"100\"\n      />\n      @if (type === 'number' && !disabled && !readonly) {\n      <div class=\"i-input-spinners\">\n        <button\n          type=\"button\"\n          class=\"i-input-spinner-button i-input-spinner-up\"\n          (click)=\"incrementNumber(inputElement)\"\n          [attr.aria-label]=\"'Increment ' + label\"\n          tabindex=\"-1\"\n        >\n          <i class=\"pi pi-chevron-up\"></i>\n        </button>\n        <button\n          type=\"button\"\n          class=\"i-input-spinner-button i-input-spinner-down\"\n          (click)=\"decrementNumber(inputElement)\"\n          [attr.aria-label]=\"'Decrement ' + label\"\n          tabindex=\"-1\"\n        >\n          <i class=\"pi pi-chevron-down\"></i>\n        </button>\n      </div>\n      }\n    </div>\n    @if (useFloatLabel) {\n    <label\n      [for]=\"id || componentId\"\n      class=\"i-label\"\n      [class.floated]=\"forceFloated || hasValue\"\n      >{{ label }}</label\n    >\n    }\n    <ng-content></ng-content>\n  </div>\n</div>\n", styles: [".i-input{color:var(--color-text-primary);border:1px solid var(--surface-border);background:var(--color-component-background-secondary)}.i-input.component-border{background:var(--color-component-background)}.i-input:focus{outline:none;border-color:var(--color-primary);box-shadow:0 2px 10px #0003}.i-label{color:var(--color-text-secondary)}.i-input:focus+.i-label,.i-input:not(:placeholder-shown)+.i-label,.i-label.floated{background:var(--color-component-background-secondary)}.i-input[disabled]{background:#f5f5f5;border-color:#e0e0e0;color:#9e9e9e}.invalid .i-input{border-color:var(--color-danger)}.invalid .i-label,.invalid .i-error{color:var(--color-danger)}.i-input-spinner-button{color:var(--color-text-secondary);background:transparent}.i-input-spinner-button:hover{background:var(--surface-hover);color:var(--color-text-primary)}.i-input-spinner-button:active{background:var(--surface-hover);color:var(--color-primary)}.i-input-wrapper{display:flex;flex-direction:column;gap:8px;width:100%;margin-top:4px;font-size:1em}.i-input-wrapper.i-input--fluid{width:100%}Ch .i-input-wrapper.i-input--no-float{margin-top:0;height:auto}.i-input-wrapper .i-input-container{display:flex;align-items:center;gap:8px}.i-input-wrapper .i-input{box-sizing:border-box;width:100%;border-radius:4px;min-height:42px;transition:border-color .15s ease,box-shadow .15s ease}.i-input-wrapper .i-input:focus{outline:none}.i-input-wrapper .i-input.has-icon{padding-left:34px}.i-input-wrapper .i-input.hide-text{color:transparent;text-shadow:none;cursor:pointer}.i-input-wrapper .i-input.readonly{cursor:pointer;-webkit-user-select:none;user-select:none;caret-color:transparent}.i-input-wrapper .i-input-icon-wrapper{position:relative;width:100%;display:flex}.i-input-wrapper .i-input-icon{position:absolute;top:50%;display:flex;align-items:center;justify-content:center;flex-shrink:0;width:16px;height:16px;color:inherit;pointer-events:none;transform:translateY(-50%)}.i-input-wrapper .float-label{position:relative;display:flex;align-items:stretch}.i-input-wrapper .float-label .i-input-icon{left:10px}.i-input-wrapper .float-label .i-input{padding:14px 10px}.i-input-wrapper .float-label .i-input.has-icon{padding-left:34px}.i-input-wrapper .float-label .i-label{position:absolute;top:14px;left:8px;padding:0 4px;pointer-events:none;transition:all .15s ease}.i-input-wrapper .float-label .i-input:focus+.i-label,.i-input-wrapper .float-label .i-input:not(:placeholder-shown)+.i-label,.i-input-wrapper .float-label .i-label.floated{top:-8px}.i-input-wrapper .float-label.has-icon .i-label:not(.floated){left:34px}.i-input-wrapper .normal-input{position:relative}.i-input-wrapper .normal-input .i-input-icon{left:12px}.i-input-wrapper .normal-input .i-input{padding:8px 12px}.i-input-wrapper .normal-input .i-input.has-icon{padding-left:38px}.i-input-wrapper .i-input[type=number]{padding-right:32px}.i-input-wrapper .i-input[type=number]::-webkit-outer-spin-button,.i-input-wrapper .i-input[type=number]::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}.i-input-wrapper .i-input[type=number]{appearance:textfield;-moz-appearance:textfield}.i-input-wrapper .i-input-spinners{position:absolute;right:4px;top:50%;transform:translateY(-50%);display:flex;flex-direction:column;gap:2px}.i-input-wrapper .i-input-spinner-button{display:flex;align-items:center;justify-content:center;width:24px;height:16px;border:none;border-radius:3px;cursor:pointer;transition:background-color .15s ease,color .15s ease;padding:0;font-size:10px}.i-input-wrapper .i-input-spinner-button i{font-size:10px;line-height:1}.i-input-wrapper .i-input-spinner-button:focus{outline:none}\n"] }]
+            args: [{ selector: 'i-input-text', standalone: true, imports: [CommonModule, TooltipDirective], template: "<div\n  class=\"i-input-wrapper\"\n  [class.invalid]=\"showErrors\"\n  [class.i-input--fluid]=\"fluid\"\n  [class.i-input--no-float]=\"!useFloatLabel\"\n  [attr.id]=\"componentId\"\n>\n  <div\n    [ngClass]=\"useFloatLabel ? 'float-label' : 'normal-input'\"\n    class=\"i-input-container\"\n    [class.has-icon]=\"icon\"\n  >\n    <div class=\"i-input-icon-wrapper\">\n      @if (icon) {\n      <span class=\"i-input-icon\" [attr.aria-hidden]=\"true\">\n        <i [class]=\"icon\" [attr.aria-hidden]=\"true\"></i>\n      </span>\n      }\n      <input\n        #inputElement\n        [id]=\"id || componentId\"\n        [attr.name]=\"name\"\n        [type]=\"type\"\n        [attr.autocomplete]=\"autocomplete\"\n        [disabled]=\"disabled\"\n        [readonly]=\"readonly\"\n        [value]=\"hideText ? '' : value || ''\"\n        (input)=\"handleInput($event)\"\n        (focus)=\"handleFocus()\"\n        (blur)=\"handleBlur()\"\n        (animationstart)=\"handleAutoFillAnimation($event)\"\n        [placeholder]=\"useFloatLabel ? ' ' : placeholder || label\"\n        class=\"i-input\"\n        [class.has-icon]=\"icon\"\n        [class.hide-text]=\"hideText\"\n        [class.readonly]=\"readonly\"\n        [class.component-border]=\"backgroundStyle === 'component'\"\n        [iTooltip]=\"showErrors ? (getErrorMessage() || '') : ''\"\n        tooltipPosition=\"below\"\n        [tooltipDelay]=\"100\"\n      />\n      @if (type === 'number' && !disabled && !readonly) {\n      <div class=\"i-input-spinners\">\n        <button\n          type=\"button\"\n          class=\"i-input-spinner-button i-input-spinner-up\"\n          (click)=\"incrementNumber(inputElement)\"\n          [attr.aria-label]=\"'Increment ' + label\"\n          tabindex=\"-1\"\n        >\n          <i class=\"pi pi-chevron-up\"></i>\n        </button>\n        <button\n          type=\"button\"\n          class=\"i-input-spinner-button i-input-spinner-down\"\n          (click)=\"decrementNumber(inputElement)\"\n          [attr.aria-label]=\"'Decrement ' + label\"\n          tabindex=\"-1\"\n        >\n          <i class=\"pi pi-chevron-down\"></i>\n        </button>\n      </div>\n      }\n    </div>\n    @if (useFloatLabel) {\n    <label\n      [for]=\"id || componentId\"\n      class=\"i-label\"\n      [class.floated]=\"forceFloated || hasValue\"\n      >{{ label }}</label\n    >\n    }\n    <ng-content></ng-content>\n  </div>\n</div>\n", styles: [".i-input{color:var(--color-text-primary);border:1px solid var(--surface-border);background:var(--color-component-background-secondary)}.i-input.component-border{background:var(--color-component-background)}.i-input:focus{outline:none;border-color:var(--color-primary);box-shadow:0 2px 10px #0003}.i-label{color:var(--color-text-secondary)}.i-input:focus+.i-label,.i-input:not(:placeholder-shown)+.i-label,.i-label.floated{background:var(--color-component-background-secondary)}.i-input[disabled]{background:#f5f5f5;border-color:#e0e0e0;color:#9e9e9e}.invalid .i-input{border-color:var(--color-danger)}.invalid .i-label,.invalid .i-error{color:var(--color-danger)}.i-input-spinner-button{color:var(--color-text-secondary);background:transparent}.i-input-spinner-button:hover{background:var(--surface-hover);color:var(--color-text-primary)}.i-input-spinner-button:active{background:var(--surface-hover);color:var(--color-primary)}@keyframes i-input-autofill-start{}.i-input-wrapper{display:flex;flex-direction:column;gap:8px;width:100%;margin-top:4px;font-size:1em}.i-input-wrapper.i-input--fluid{width:100%}.i-input-wrapper.i-input--no-float{margin-top:0;height:auto}.i-input-wrapper .i-input-container{display:flex;align-items:center;gap:8px}.i-input-wrapper .i-input{box-sizing:border-box;width:100%;border-radius:4px;min-height:42px;transition:border-color .15s ease,box-shadow .15s ease}.i-input-wrapper .i-input:focus{outline:none}.i-input-wrapper .i-input.has-icon{padding-left:34px}.i-input-wrapper .i-input.hide-text{color:transparent;text-shadow:none;cursor:pointer}.i-input-wrapper .i-input.readonly{cursor:pointer;-webkit-user-select:none;user-select:none;caret-color:transparent}.i-input-wrapper .i-input-icon-wrapper{position:relative;width:100%;display:flex}.i-input-wrapper .i-input-icon{position:absolute;top:50%;display:flex;align-items:center;justify-content:center;flex-shrink:0;width:16px;height:16px;color:inherit;pointer-events:none;transform:translateY(-50%)}.i-input-wrapper .float-label{position:relative;display:flex;align-items:stretch}.i-input-wrapper .float-label .i-input-icon{left:10px}.i-input-wrapper .float-label .i-input{padding:14px 10px}.i-input-wrapper .float-label .i-input:-webkit-autofill{animation-name:i-input-autofill-start;animation-duration:.01s}.i-input-wrapper .float-label .i-input.has-icon{padding-left:34px}.i-input-wrapper .float-label .i-label{position:absolute;top:14px;left:8px;padding:0 4px;pointer-events:none;transition:all .15s ease}.i-input-wrapper .float-label .i-input:focus+.i-label,.i-input-wrapper .float-label .i-input:not(:placeholder-shown)+.i-label,.i-input-wrapper .float-label .i-label.floated{top:-8px}.i-input-wrapper .float-label.has-icon .i-label:not(.floated){left:34px}.i-input-wrapper .normal-input{position:relative}.i-input-wrapper .normal-input .i-input-icon{left:12px}.i-input-wrapper .normal-input .i-input{padding:8px 12px}.i-input-wrapper .normal-input .i-input.has-icon{padding-left:38px}.i-input-wrapper .i-input[type=number]{padding-right:32px}.i-input-wrapper .i-input[type=number]::-webkit-outer-spin-button,.i-input-wrapper .i-input[type=number]::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}.i-input-wrapper .i-input[type=number]{appearance:textfield;-moz-appearance:textfield}.i-input-wrapper .i-input-spinners{position:absolute;right:4px;top:50%;transform:translateY(-50%);display:flex;flex-direction:column;gap:2px}.i-input-wrapper .i-input-spinner-button{display:flex;align-items:center;justify-content:center;width:24px;height:16px;border:none;border-radius:3px;cursor:pointer;transition:background-color .15s ease,color .15s ease;padding:0;font-size:10px}.i-input-wrapper .i-input-spinner-button i{font-size:10px;line-height:1}.i-input-wrapper .i-input-spinner-button:focus{outline:none}\n"] }]
         }], ctorParameters: () => [{ type: i1.NgControl, decorators: [{
                     type: Optional
                 }, {
@@ -997,6 +1092,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.3", ngImpor
                 type: Input
             }], id: [{
                 type: Input
+            }], name: [{
+                type: Input
             }], fluid: [{
                 type: Input
             }], forceFloated: [{
@@ -1007,6 +1104,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.3", ngImpor
                 type: Input
             }], placeholder: [{
                 type: Input
+            }], autocomplete: [{
+                type: Input
             }], externalInvalid: [{
                 type: Input
             }], externalErrorMessage: [{
@@ -1021,6 +1120,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.3", ngImpor
                 type: Input
             }], errorMessages: [{
                 type: Input
+            }], inputElementRef: [{
+                type: ViewChild,
+                args: ['inputElement']
             }] } });
 
 /**
@@ -1536,7 +1638,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) { @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", "name", "fluid", "forceFloated", "hideText", "useFloatLabel", "placeholder", "autocomplete", "externalInvalid", "externalErrorMessage", "backgroundStyle", "icon", "readonly", "disabled", "errorMessages"] }, { kind: "component", type: IButton, selector: "i-button", inputs: ["severity", "size", "type", "disabled", "outlined", "raised", "text", "icon", "fluid", "loading"], outputs: ["clicked"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: ICalendar, decorators: [{
             type: Component,
@@ -2146,11 +2248,11 @@ class IDialogActions {
         this.submitEvent.emit();
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: IDialogActions, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.3", type: IDialogActions, isStandalone: true, selector: "i-dialog-actions", inputs: { submitLabel: "submitLabel", cancelLabel: "cancelLabel", severity: "severity", showCancel: "showCancel", showSubmit: "showSubmit", submitDisabled: "submitDisabled" }, outputs: { cancelEvent: "cancelEvent", submitEvent: "submitEvent" }, ngImport: i0, template: "<div class=\"dialog-actions\">\n  @if (showCancel) {\n    <i-button [text]=\"true\" severity=\"secondary\" (click)=\"onCancel()\">{{\n      cancelLabel\n    }}</i-button>\n  }\n  @if (showSubmit) {\n    <i-button\n      [outlined]=\"true\"\n      [severity]=\"severity\"\n      [disabled]=\"submitDisabled\"\n      (click)=\"onSubmit()\"\n      >{{ submitLabel }}</i-button\n    >\n  }\n</div>\n", styles: [".dialog-actions{display:flex;justify-content:flex-end;flex-wrap:wrap;gap:6px}\n"], dependencies: [{ kind: "component", type: IButton, selector: "i-button", inputs: ["severity", "size", "type", "disabled", "outlined", "raised", "text", "icon", "fluid", "loading"], outputs: ["clicked"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.3", type: IDialogActions, isStandalone: true, selector: "i-dialog-actions", inputs: { submitLabel: "submitLabel", cancelLabel: "cancelLabel", severity: "severity", showCancel: "showCancel", showSubmit: "showSubmit", submitDisabled: "submitDisabled" }, outputs: { cancelEvent: "cancelEvent", submitEvent: "submitEvent" }, ngImport: i0, template: "<div class=\"dialog-actions\">\n  @if (showCancel) {\n    <i-button [text]=\"true\" severity=\"secondary\" (click)=\"onCancel()\">{{\n      cancelLabel\n    }}</i-button>\n  }\n  @if (showSubmit) {\n    <i-button\n      [outlined]=\"true\"\n      [severity]=\"severity\"\n      [disabled]=\"submitDisabled\"\n      type=\"submit\"\n      (click)=\"onSubmit()\"\n      >{{ submitLabel }}</i-button\n    >\n  }\n</div>\n", styles: [".dialog-actions{display:flex;justify-content:flex-end;flex-wrap:wrap;gap:6px}\n"], dependencies: [{ kind: "component", type: IButton, selector: "i-button", inputs: ["severity", "size", "type", "disabled", "outlined", "raised", "text", "icon", "fluid", "loading"], outputs: ["clicked"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: IDialogActions, decorators: [{
             type: Component,
-            args: [{ selector: 'i-dialog-actions', imports: [IButton], template: "<div class=\"dialog-actions\">\n  @if (showCancel) {\n    <i-button [text]=\"true\" severity=\"secondary\" (click)=\"onCancel()\">{{\n      cancelLabel\n    }}</i-button>\n  }\n  @if (showSubmit) {\n    <i-button\n      [outlined]=\"true\"\n      [severity]=\"severity\"\n      [disabled]=\"submitDisabled\"\n      (click)=\"onSubmit()\"\n      >{{ submitLabel }}</i-button\n    >\n  }\n</div>\n", styles: [".dialog-actions{display:flex;justify-content:flex-end;flex-wrap:wrap;gap:6px}\n"] }]
+            args: [{ selector: 'i-dialog-actions', imports: [IButton], template: "<div class=\"dialog-actions\">\n  @if (showCancel) {\n    <i-button [text]=\"true\" severity=\"secondary\" (click)=\"onCancel()\">{{\n      cancelLabel\n    }}</i-button>\n  }\n  @if (showSubmit) {\n    <i-button\n      [outlined]=\"true\"\n      [severity]=\"severity\"\n      [disabled]=\"submitDisabled\"\n      type=\"submit\"\n      (click)=\"onSubmit()\"\n      >{{ submitLabel }}</i-button\n    >\n  }\n</div>\n", styles: [".dialog-actions{display:flex;justify-content:flex-end;flex-wrap:wrap;gap:6px}\n"] }]
         }], propDecorators: { submitLabel: [{
                 type: Input
             }], cancelLabel: [{
@@ -3996,7 +4098,7 @@ class IListbox {
                 useExisting: forwardRef(() => IListbox),
                 multi: true,
             },
-        ], viewQueries: [{ propertyName: "dropdownRef", first: true, predicate: ["dropdown"], descendants: true }, { propertyName: "searchInputRef", first: true, predicate: ["searchInput"], descendants: true }], ngImport: i0, template: "<div\n  class=\"i-listbox-wrapper\"\n  [class.i-listbox--fluid]=\"fluid\"\n  [class.i-listbox--disabled]=\"disabled\"\n  [class.i-listbox--invalid]=\"showErrors\"\n  [class.i-listbox--menu]=\"displayAsMenu\"\n  #dropdown\n>\n  <!-- Header -->\n  <div class=\"i-listbox-header\">\n    <div class=\"i-listbox-header-content\">\n      <span class=\"i-listbox-title\">{{ effectiveTitle }}</span>\n      @if (actionIcon) {\n      <i-button\n        [text]=\"true\"\n        [size]=\"'small'\"\n        [severity]=\"'contrast'\"\n        [icon]=\"actionIcon\"\n        [disabled]=\"disabled\"\n        (clicked)=\"onActionClick($event)\"\n        [attr.title]=\"actionTooltip\"\n      ></i-button>\n      }\n    </div>\n\n    <!-- Chips area for multiselect mode -->\n    @if (multiple && showChips) {\n    <div class=\"i-listbox-chips-wrapper\">\n      <i-chips\n        class=\"i-listbox-chips\"\n        [chips]=\"getSelectedChipItems()\"\n        [removable]=\"!disabled\"\n        [disabled]=\"disabled\"\n        [collapseOnOverflow]=\"true\"\n        [overflowLabel]=\"getDisplayLabel()\"\n        (removeChip)=\"onChipRemove($event)\"\n      ></i-chips>\n    </div>\n    }\n  </div>\n\n  <!-- Dropdown content -->\n  <div class=\"i-listbox-dropdown\">\n    @if (filter) {\n    <div class=\"i-listbox-filter\">\n      <i-input-text\n        #searchInput\n        [useFloatLabel]=\"false\"\n        placeholder=\"Search...\"\n        [ngModel]=\"filterValue()\"\n        (ngModelChange)=\"filterValue.set($event)\"\n        [fluid]=\"true\"\n        [icon]=\"'pi pi-search'\"\n      >\n      </i-input-text>\n    </div>\n    }\n\n    <div class=\"i-listbox-options\">\n      @for (option of filteredOptions(); track getOptionValue(option)) {\n      <div\n        class=\"i-listbox-option\"\n        [class.selected]=\"isOptionSelected(option)\"\n        [class.has-icon]=\"!multiple && getOptionIcon(option)\"\n        (click)=\"toggleOption(option)\"\n      >\n        <!-- Checkbox only in multiple mode -->\n        @if (multiple) {\n        <i-checkbox\n          [checked]=\"isOptionSelected(option)\"\n          [readonly]=\"true\"\n          size=\"small\"\n          class=\"i-listbox-checkbox\"\n        ></i-checkbox>\n        }\n\n        <!-- Left icon -->\n        @if (getOptionIcon(option) && !displayAsMenu) {\n        <i\n          [class]=\"getOptionIcon(option)\"\n          class=\"i-listbox-option-icon i-listbox-option-icon--left\"\n        ></i>\n        }\n\n        <span class=\"i-listbox-option-label\">\n          {{ getOptionLabel(option) }}\n        </span>\n\n        <!-- Right chevron for menu mode -->\n        @if (displayAsMenu) {\n        <i\n          class=\"pi pi-chevron-right i-listbox-option-icon i-listbox-option-icon--chevron\"\n        ></i>\n        }\n      </div>\n      } @if (filteredOptions().length === 0) {\n      <div class=\"i-listbox-no-options\">No options found</div>\n      }\n    </div>\n  </div>\n\n  <!-- Error message -->\n  @if (showErrors) {\n  <div class=\"i-listbox-error\">\n    {{ getErrorMessage() }}\n  </div>\n  }\n</div>\n", styles: [".i-listbox-wrapper{background:var(--color-component-background);border-color:var(--surface-border)}.i-listbox-wrapper.i-listbox--invalid .i-listbox-header{border-bottom-color:var(--color-danger)}.i-listbox-wrapper .i-listbox-header{background:var(--surface-card);border-bottom-color:var(--surface-border)}.i-listbox-wrapper .i-listbox-header .i-listbox-title{color:var(--color-text-primary)}.i-listbox-wrapper .i-listbox-header .i-listbox-action-btn{background:var(--color-primary);color:#fff}.i-listbox-wrapper .i-listbox-header .i-listbox-action-btn:hover:not(:disabled){background:var(--color-primary)}.i-listbox-wrapper .i-listbox-header .i-listbox-summary{color:var(--color-text-secondary)}.i-listbox-wrapper .i-listbox-dropdown{background:var(--color-component-background)}.i-listbox-wrapper .i-listbox-dropdown .i-listbox-filter{border-bottom-color:var(--surface-border)}.i-listbox-wrapper .i-listbox-dropdown .i-listbox-options{background:transparent}.i-listbox-wrapper .i-listbox-dropdown .i-listbox-options .i-listbox-option{color:var(--color-text-primary)}.i-listbox-wrapper .i-listbox-dropdown .i-listbox-options .i-listbox-option:hover,.i-listbox-wrapper .i-listbox-dropdown .i-listbox-options .i-listbox-option.selected{background-color:var(--surface-hover)}.i-listbox-wrapper .i-listbox-dropdown .i-listbox-options .i-listbox-option .i-listbox-checkbox{accent-color:var(--color-primary)}.i-listbox-wrapper .i-listbox-dropdown .i-listbox-options .i-listbox-option .i-listbox-option-icon--right{color:var(--color-text-tertiary)}.i-listbox-wrapper .i-listbox-dropdown .i-listbox-options .i-listbox-no-options{color:var(--color-text-secondary)}.i-listbox-wrapper .i-listbox-error{color:var(--color-danger);background:#ef44440d;border-top-color:var(--color-danger)}.i-listbox-wrapper{position:relative;display:flex;flex-direction:column;width:100%;height:100%;border-radius:4px;border:1px solid var(--surface-border);background:var(--color-component-background);overflow:hidden}.i-listbox-wrapper.i-listbox--fluid{width:100%}.i-listbox-wrapper.i-listbox--disabled{opacity:.6;pointer-events:none}.i-listbox-wrapper.i-listbox--invalid{border-color:var(--color-danger)}.i-listbox-wrapper .i-listbox-header{position:relative;display:flex;flex-direction:column;flex-shrink:0;gap:8px;padding:20px 14px;border-bottom:1px solid var(--surface-border);background:var(--surface-card)}.i-listbox-wrapper .i-listbox-header .i-listbox-header-content{display:flex;align-items:center;justify-content:space-between;min-height:24px}.i-listbox-wrapper .i-listbox-header .i-listbox-header-content .i-listbox-title{font-weight:600;font-size:1.15em;color:var(--color-text-primary)}.i-listbox-wrapper .i-listbox-header .i-listbox-header-content .i-listbox-action-btn{display:flex;align-items:center;justify-content:center;width:28px;height:28px;padding:0;border:none;border-radius:4px;background:var(--color-primary);color:#fff;cursor:pointer;transition:all .15s ease}.i-listbox-wrapper .i-listbox-header .i-listbox-header-content .i-listbox-action-btn:hover:not(:disabled){opacity:.85;transform:scale(1.05)}.i-listbox-wrapper .i-listbox-header .i-listbox-header-content .i-listbox-action-btn:active:not(:disabled){transform:scale(.95)}.i-listbox-wrapper .i-listbox-header .i-listbox-header-content .i-listbox-action-btn:disabled{opacity:.5;cursor:not-allowed}.i-listbox-wrapper .i-listbox-header .i-listbox-header-content .i-listbox-action-btn i{font-size:1em}.i-listbox-wrapper .i-listbox-header .i-listbox-chips-wrapper{height:32px}.i-listbox-wrapper .i-listbox-dropdown{display:flex;flex-direction:column;flex:1;min-height:0;overflow:hidden}.i-listbox-wrapper .i-listbox-dropdown .i-listbox-filter{flex-shrink:0;padding:8px;border-bottom:1px solid var(--surface-border)}.i-listbox-wrapper .i-listbox-dropdown .i-listbox-options{flex:1;min-height:0;overflow-x:hidden;overflow-y:auto}.i-listbox-wrapper .i-listbox-dropdown .i-listbox-options::-webkit-scrollbar-track{background:transparent;border-radius:3px}.i-listbox-wrapper .i-listbox-dropdown .i-listbox-options::-webkit-scrollbar-thumb{background:#0003;border-radius:3px;transition:background .2s ease}.i-listbox-wrapper .i-listbox-dropdown .i-listbox-options::-webkit-scrollbar-thumb:hover{background:#00000059}.i-listbox-wrapper .i-listbox-dropdown .i-listbox-options::-webkit-scrollbar-thumb:active{background:#00000080}.i-listbox-wrapper .i-listbox-dropdown .i-listbox-options::-webkit-scrollbar-corner{background:transparent}.i-listbox-wrapper .i-listbox-dropdown .i-listbox-options{scrollbar-width:thin;scrollbar-color:rgba(0,0,0,.2) transparent;scroll-behavior:smooth}.i-listbox-wrapper .i-listbox-dropdown .i-listbox-options::-webkit-scrollbar-thumb{background:var(--color-text-secondary);opacity:.4}.i-listbox-wrapper .i-listbox-dropdown .i-listbox-options::-webkit-scrollbar-thumb:hover{background:var(--color-text-primary);opacity:.6}.i-listbox-wrapper .i-listbox-dropdown .i-listbox-options::-webkit-scrollbar-thumb:active{background:var(--color-primary);opacity:.7}.i-listbox-wrapper .i-listbox-dropdown .i-listbox-options{scrollbar-color:var(--color-text-secondary) transparent}.i-listbox-wrapper .i-listbox-dropdown .i-listbox-options::-webkit-scrollbar{width:6px;height:6px}.i-listbox-wrapper .i-listbox-dropdown .i-listbox-options::-webkit-scrollbar-track{background:#0000000d;border-radius:3px;margin:2px 0}.i-listbox-wrapper .i-listbox-dropdown .i-listbox-options::-webkit-scrollbar-thumb{border-radius:3px;min-height:20px;background:var(--color-text-secondary);opacity:.6}.i-listbox-wrapper .i-listbox-dropdown .i-listbox-options::-webkit-scrollbar-thumb:hover{background:var(--color-text-primary);opacity:.8}.i-listbox-wrapper .i-listbox-dropdown .i-listbox-options::-webkit-scrollbar-thumb:active{background:var(--color-primary);opacity:.9}.i-listbox-wrapper .i-listbox-dropdown .i-listbox-options{scrollbar-width:thin;scrollbar-color:var(--color-text-secondary) rgba(0,0,0,.05)}.i-listbox-wrapper .i-listbox-dropdown .i-listbox-options .i-listbox-option{display:flex;align-items:center;gap:8px;padding:10px 12px;font-size:1em;cursor:pointer;transition:background-color .15s ease}.i-listbox-wrapper .i-listbox-dropdown .i-listbox-options .i-listbox-option.has-icon{padding:16px 12px}.i-listbox-wrapper .i-listbox-dropdown .i-listbox-options .i-listbox-option:hover{background-color:var(--surface-hover)}.i-listbox-wrapper .i-listbox-dropdown .i-listbox-options .i-listbox-option.selected{background-color:var(--surface-hover);font-weight:500}.i-listbox-wrapper .i-listbox-dropdown .i-listbox-options .i-listbox-option .i-listbox-checkbox{pointer-events:none;flex-shrink:0}.i-listbox-wrapper .i-listbox-dropdown .i-listbox-options .i-listbox-option .i-listbox-option-icon{font-size:16px;flex-shrink:0}.i-listbox-wrapper .i-listbox-dropdown .i-listbox-options .i-listbox-option .i-listbox-option-icon--left{color:var(--color-text-secondary)}.i-listbox-wrapper .i-listbox-dropdown .i-listbox-options .i-listbox-option .i-listbox-option-icon--chevron{color:var(--color-text-tertiary);margin-left:auto;font-size:12px;opacity:.6}.i-listbox-wrapper .i-listbox-dropdown .i-listbox-options .i-listbox-option .i-listbox-option-label{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.i-listbox-wrapper .i-listbox-dropdown .i-listbox-options .i-listbox-no-options{padding:16px;font-style:italic;text-align:center;color:var(--color-text-secondary)}.i-listbox-wrapper .i-listbox-error{flex-shrink:0;padding:8px 12px;font-size:.9em;color:var(--color-danger);background:#ef44440d;border-top:1px solid var(--color-danger)}.i-listbox-wrapper.i-listbox--menu .i-listbox-options .i-listbox-option{padding:14px 16px;font-size:1.05em}.i-listbox-wrapper.i-listbox--menu .i-listbox-options .i-listbox-option.has-icon{padding:18px 16px}.i-listbox-wrapper.i-listbox--menu .i-listbox-options .i-listbox-option.selected{background-color:var(--surface-hover);border-left:3px solid var(--color-primary);font-weight:600}.i-listbox-wrapper.i-listbox--menu .i-listbox-options .i-listbox-option .i-listbox-option-icon--chevron{opacity:.8}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: IChipsComponent, selector: "i-chips", inputs: ["chips", "removable", "disabled", "collapseOnOverflow", "overflowLabel", "boxed", "allowCloseAll", "label", "useFloatLabel", "showError"], outputs: ["closedAll", "removeChip"] }, { kind: "component", type: ICheckbox, selector: "i-checkbox", inputs: ["label", "id", "disabled", "readonly", "size", "indeterminate", "checked"], outputs: ["onChange"] }, { kind: "component", type: IInputText, selector: "i-input-text", inputs: ["label", "type", "id", "fluid", "forceFloated", "hideText", "useFloatLabel", "placeholder", "externalInvalid", "externalErrorMessage", "backgroundStyle", "icon", "readonly", "disabled", "errorMessages"] }, { kind: "component", type: IButton, selector: "i-button", inputs: ["severity", "size", "type", "disabled", "outlined", "raised", "text", "icon", "fluid", "loading"], outputs: ["clicked"] }] });
+        ], viewQueries: [{ propertyName: "dropdownRef", first: true, predicate: ["dropdown"], descendants: true }, { propertyName: "searchInputRef", first: true, predicate: ["searchInput"], descendants: true }], ngImport: i0, template: "<div\n  class=\"i-listbox-wrapper\"\n  [class.i-listbox--fluid]=\"fluid\"\n  [class.i-listbox--disabled]=\"disabled\"\n  [class.i-listbox--invalid]=\"showErrors\"\n  [class.i-listbox--menu]=\"displayAsMenu\"\n  #dropdown\n>\n  <!-- Header -->\n  <div class=\"i-listbox-header\">\n    <div class=\"i-listbox-header-content\">\n      <span class=\"i-listbox-title\">{{ effectiveTitle }}</span>\n      @if (actionIcon) {\n      <i-button\n        [text]=\"true\"\n        [size]=\"'small'\"\n        [severity]=\"'contrast'\"\n        [icon]=\"actionIcon\"\n        [disabled]=\"disabled\"\n        (clicked)=\"onActionClick($event)\"\n        [attr.title]=\"actionTooltip\"\n      ></i-button>\n      }\n    </div>\n\n    <!-- Chips area for multiselect mode -->\n    @if (multiple && showChips) {\n    <div class=\"i-listbox-chips-wrapper\">\n      <i-chips\n        class=\"i-listbox-chips\"\n        [chips]=\"getSelectedChipItems()\"\n        [removable]=\"!disabled\"\n        [disabled]=\"disabled\"\n        [collapseOnOverflow]=\"true\"\n        [overflowLabel]=\"getDisplayLabel()\"\n        (removeChip)=\"onChipRemove($event)\"\n      ></i-chips>\n    </div>\n    }\n  </div>\n\n  <!-- Dropdown content -->\n  <div class=\"i-listbox-dropdown\">\n    @if (filter) {\n    <div class=\"i-listbox-filter\">\n      <i-input-text\n        #searchInput\n        [useFloatLabel]=\"false\"\n        placeholder=\"Search...\"\n        [ngModel]=\"filterValue()\"\n        (ngModelChange)=\"filterValue.set($event)\"\n        [fluid]=\"true\"\n        [icon]=\"'pi pi-search'\"\n      >\n      </i-input-text>\n    </div>\n    }\n\n    <div class=\"i-listbox-options\">\n      @for (option of filteredOptions(); track getOptionValue(option)) {\n      <div\n        class=\"i-listbox-option\"\n        [class.selected]=\"isOptionSelected(option)\"\n        [class.has-icon]=\"!multiple && getOptionIcon(option)\"\n        (click)=\"toggleOption(option)\"\n      >\n        <!-- Checkbox only in multiple mode -->\n        @if (multiple) {\n        <i-checkbox\n          [checked]=\"isOptionSelected(option)\"\n          [readonly]=\"true\"\n          size=\"small\"\n          class=\"i-listbox-checkbox\"\n        ></i-checkbox>\n        }\n\n        <!-- Left icon -->\n        @if (getOptionIcon(option) && !displayAsMenu) {\n        <i\n          [class]=\"getOptionIcon(option)\"\n          class=\"i-listbox-option-icon i-listbox-option-icon--left\"\n        ></i>\n        }\n\n        <span class=\"i-listbox-option-label\">\n          {{ getOptionLabel(option) }}\n        </span>\n\n        <!-- Right chevron for menu mode -->\n        @if (displayAsMenu) {\n        <i\n          class=\"pi pi-chevron-right i-listbox-option-icon i-listbox-option-icon--chevron\"\n        ></i>\n        }\n      </div>\n      } @if (filteredOptions().length === 0) {\n      <div class=\"i-listbox-no-options\">No options found</div>\n      }\n    </div>\n  </div>\n\n  <!-- Error message -->\n  @if (showErrors) {\n  <div class=\"i-listbox-error\">\n    {{ getErrorMessage() }}\n  </div>\n  }\n</div>\n", styles: [".i-listbox-wrapper{background:var(--color-component-background);border-color:var(--surface-border)}.i-listbox-wrapper.i-listbox--invalid .i-listbox-header{border-bottom-color:var(--color-danger)}.i-listbox-wrapper .i-listbox-header{background:var(--surface-card);border-bottom-color:var(--surface-border)}.i-listbox-wrapper .i-listbox-header .i-listbox-title{color:var(--color-text-primary)}.i-listbox-wrapper .i-listbox-header .i-listbox-action-btn{background:var(--color-primary);color:#fff}.i-listbox-wrapper .i-listbox-header .i-listbox-action-btn:hover:not(:disabled){background:var(--color-primary)}.i-listbox-wrapper .i-listbox-header .i-listbox-summary{color:var(--color-text-secondary)}.i-listbox-wrapper .i-listbox-dropdown{background:var(--color-component-background)}.i-listbox-wrapper .i-listbox-dropdown .i-listbox-filter{border-bottom-color:var(--surface-border)}.i-listbox-wrapper .i-listbox-dropdown .i-listbox-options{background:transparent}.i-listbox-wrapper .i-listbox-dropdown .i-listbox-options .i-listbox-option{color:var(--color-text-primary)}.i-listbox-wrapper .i-listbox-dropdown .i-listbox-options .i-listbox-option:hover,.i-listbox-wrapper .i-listbox-dropdown .i-listbox-options .i-listbox-option.selected{background-color:var(--surface-hover)}.i-listbox-wrapper .i-listbox-dropdown .i-listbox-options .i-listbox-option .i-listbox-checkbox{accent-color:var(--color-primary)}.i-listbox-wrapper .i-listbox-dropdown .i-listbox-options .i-listbox-option .i-listbox-option-icon--right{color:var(--color-text-tertiary)}.i-listbox-wrapper .i-listbox-dropdown .i-listbox-options .i-listbox-no-options{color:var(--color-text-secondary)}.i-listbox-wrapper .i-listbox-error{color:var(--color-danger);background:#ef44440d;border-top-color:var(--color-danger)}.i-listbox-wrapper{position:relative;display:flex;flex-direction:column;width:100%;height:100%;border-radius:4px;border:1px solid var(--surface-border);background:var(--color-component-background);overflow:hidden}.i-listbox-wrapper.i-listbox--fluid{width:100%}.i-listbox-wrapper.i-listbox--disabled{opacity:.6;pointer-events:none}.i-listbox-wrapper.i-listbox--invalid{border-color:var(--color-danger)}.i-listbox-wrapper .i-listbox-header{position:relative;display:flex;flex-direction:column;flex-shrink:0;gap:8px;padding:20px 14px;border-bottom:1px solid var(--surface-border);background:var(--surface-card)}.i-listbox-wrapper .i-listbox-header .i-listbox-header-content{display:flex;align-items:center;justify-content:space-between;min-height:24px}.i-listbox-wrapper .i-listbox-header .i-listbox-header-content .i-listbox-title{font-weight:600;font-size:1.15em;color:var(--color-text-primary)}.i-listbox-wrapper .i-listbox-header .i-listbox-header-content .i-listbox-action-btn{display:flex;align-items:center;justify-content:center;width:28px;height:28px;padding:0;border:none;border-radius:4px;background:var(--color-primary);color:#fff;cursor:pointer;transition:all .15s ease}.i-listbox-wrapper .i-listbox-header .i-listbox-header-content .i-listbox-action-btn:hover:not(:disabled){opacity:.85;transform:scale(1.05)}.i-listbox-wrapper .i-listbox-header .i-listbox-header-content .i-listbox-action-btn:active:not(:disabled){transform:scale(.95)}.i-listbox-wrapper .i-listbox-header .i-listbox-header-content .i-listbox-action-btn:disabled{opacity:.5;cursor:not-allowed}.i-listbox-wrapper .i-listbox-header .i-listbox-header-content .i-listbox-action-btn i{font-size:1em}.i-listbox-wrapper .i-listbox-header .i-listbox-chips-wrapper{height:32px}.i-listbox-wrapper .i-listbox-dropdown{display:flex;flex-direction:column;flex:1;min-height:0;overflow:hidden}.i-listbox-wrapper .i-listbox-dropdown .i-listbox-filter{flex-shrink:0;padding:8px;border-bottom:1px solid var(--surface-border)}.i-listbox-wrapper .i-listbox-dropdown .i-listbox-options{flex:1;min-height:0;overflow-x:hidden;overflow-y:auto}.i-listbox-wrapper .i-listbox-dropdown .i-listbox-options::-webkit-scrollbar-track{background:transparent;border-radius:3px}.i-listbox-wrapper .i-listbox-dropdown .i-listbox-options::-webkit-scrollbar-thumb{background:#0003;border-radius:3px;transition:background .2s ease}.i-listbox-wrapper .i-listbox-dropdown .i-listbox-options::-webkit-scrollbar-thumb:hover{background:#00000059}.i-listbox-wrapper .i-listbox-dropdown .i-listbox-options::-webkit-scrollbar-thumb:active{background:#00000080}.i-listbox-wrapper .i-listbox-dropdown .i-listbox-options::-webkit-scrollbar-corner{background:transparent}.i-listbox-wrapper .i-listbox-dropdown .i-listbox-options{scrollbar-width:thin;scrollbar-color:rgba(0,0,0,.2) transparent;scroll-behavior:smooth}.i-listbox-wrapper .i-listbox-dropdown .i-listbox-options::-webkit-scrollbar-thumb{background:var(--color-text-secondary);opacity:.4}.i-listbox-wrapper .i-listbox-dropdown .i-listbox-options::-webkit-scrollbar-thumb:hover{background:var(--color-text-primary);opacity:.6}.i-listbox-wrapper .i-listbox-dropdown .i-listbox-options::-webkit-scrollbar-thumb:active{background:var(--color-primary);opacity:.7}.i-listbox-wrapper .i-listbox-dropdown .i-listbox-options{scrollbar-color:var(--color-text-secondary) transparent}.i-listbox-wrapper .i-listbox-dropdown .i-listbox-options::-webkit-scrollbar{width:6px;height:6px}.i-listbox-wrapper .i-listbox-dropdown .i-listbox-options::-webkit-scrollbar-track{background:#0000000d;border-radius:3px;margin:2px 0}.i-listbox-wrapper .i-listbox-dropdown .i-listbox-options::-webkit-scrollbar-thumb{border-radius:3px;min-height:20px;background:var(--color-text-secondary);opacity:.6}.i-listbox-wrapper .i-listbox-dropdown .i-listbox-options::-webkit-scrollbar-thumb:hover{background:var(--color-text-primary);opacity:.8}.i-listbox-wrapper .i-listbox-dropdown .i-listbox-options::-webkit-scrollbar-thumb:active{background:var(--color-primary);opacity:.9}.i-listbox-wrapper .i-listbox-dropdown .i-listbox-options{scrollbar-width:thin;scrollbar-color:var(--color-text-secondary) rgba(0,0,0,.05)}.i-listbox-wrapper .i-listbox-dropdown .i-listbox-options .i-listbox-option{display:flex;align-items:center;gap:8px;padding:10px 12px;font-size:1em;cursor:pointer;transition:background-color .15s ease}.i-listbox-wrapper .i-listbox-dropdown .i-listbox-options .i-listbox-option.has-icon{padding:16px 12px}.i-listbox-wrapper .i-listbox-dropdown .i-listbox-options .i-listbox-option:hover{background-color:var(--surface-hover)}.i-listbox-wrapper .i-listbox-dropdown .i-listbox-options .i-listbox-option.selected{background-color:var(--surface-hover);font-weight:500}.i-listbox-wrapper .i-listbox-dropdown .i-listbox-options .i-listbox-option .i-listbox-checkbox{pointer-events:none;flex-shrink:0}.i-listbox-wrapper .i-listbox-dropdown .i-listbox-options .i-listbox-option .i-listbox-option-icon{font-size:16px;flex-shrink:0}.i-listbox-wrapper .i-listbox-dropdown .i-listbox-options .i-listbox-option .i-listbox-option-icon--left{color:var(--color-text-secondary)}.i-listbox-wrapper .i-listbox-dropdown .i-listbox-options .i-listbox-option .i-listbox-option-icon--chevron{color:var(--color-text-tertiary);margin-left:auto;font-size:12px;opacity:.6}.i-listbox-wrapper .i-listbox-dropdown .i-listbox-options .i-listbox-option .i-listbox-option-label{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.i-listbox-wrapper .i-listbox-dropdown .i-listbox-options .i-listbox-no-options{padding:16px;font-style:italic;text-align:center;color:var(--color-text-secondary)}.i-listbox-wrapper .i-listbox-error{flex-shrink:0;padding:8px 12px;font-size:.9em;color:var(--color-danger);background:#ef44440d;border-top:1px solid var(--color-danger)}.i-listbox-wrapper.i-listbox--menu .i-listbox-options .i-listbox-option{padding:14px 16px;font-size:1.05em}.i-listbox-wrapper.i-listbox--menu .i-listbox-options .i-listbox-option.has-icon{padding:18px 16px}.i-listbox-wrapper.i-listbox--menu .i-listbox-options .i-listbox-option.selected{background-color:var(--surface-hover);border-left:3px solid var(--color-primary);font-weight:600}.i-listbox-wrapper.i-listbox--menu .i-listbox-options .i-listbox-option .i-listbox-option-icon--chevron{opacity:.8}\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", "name", "fluid", "forceFloated", "hideText", "useFloatLabel", "placeholder", "autocomplete", "externalInvalid", "externalErrorMessage", "backgroundStyle", "icon", "readonly", "disabled", "errorMessages"] }, { kind: "component", type: IButton, selector: "i-button", inputs: ["severity", "size", "type", "disabled", "outlined", "raised", "text", "icon", "fluid", "loading"], outputs: ["clicked"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: IListbox, decorators: [{
             type: Component,
@@ -4882,7 +4984,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:transparent;border-radius:3px}.i-multi-select-wrapper .i-multi-select-dropdown .i-multi-select-options::-webkit-scrollbar-thumb{background:#0003;border-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(--color-text-secondary);opacity:.4}.i-multi-select-wrapper .i-multi-select-dropdown .i-multi-select-options::-webkit-scrollbar-thumb:hover{background:var(--color-text-primary);opacity:.6}.i-multi-select-wrapper .i-multi-select-dropdown .i-multi-select-options::-webkit-scrollbar-thumb:active{background:var(--color-primary);opacity:.7}.i-multi-select-wrapper .i-multi-select-dropdown .i-multi-select-options{scrollbar-color:var(--color-text-secondary) transparent}.i-multi-select-wrapper .i-multi-select-dropdown .i-multi-select-options::-webkit-scrollbar{width:6px;height:6px}.i-multi-select-wrapper .i-multi-select-dropdown .i-multi-select-options::-webkit-scrollbar-track{background:#0000000d;border-radius:3px;margin:2px 0}.i-multi-select-wrapper .i-multi-select-dropdown .i-multi-select-options::-webkit-scrollbar-thumb{border-radius:3px;min-height:20px;background:var(--color-text-secondary);opacity:.6}.i-multi-select-wrapper .i-multi-select-dropdown .i-multi-select-options::-webkit-scrollbar-thumb:hover{background:var(--color-text-primary);opacity:.8}.i-multi-select-wrapper .i-multi-select-dropdown .i-multi-select-options::-webkit-scrollbar-thumb:active{background:var(--color-primary);opacity:.9}.i-multi-select-wrapper .i-multi-select-dropdown .i-multi-select-options{scrollbar-width:thin;scrollbar-color:var(--color-text-secondary) 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:transparent;border-radius:3px}.i-multi-select-wrapper .i-multi-select-dropdown .i-multi-select-options::-webkit-scrollbar-thumb{background:#0003;border-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(--color-text-secondary);opacity:.4}.i-multi-select-wrapper .i-multi-select-dropdown .i-multi-select-options::-webkit-scrollbar-thumb:hover{background:var(--color-text-primary);opacity:.6}.i-multi-select-wrapper .i-multi-select-dropdown .i-multi-select-options::-webkit-scrollbar-thumb:active{background:var(--color-primary);opacity:.7}.i-multi-select-wrapper .i-multi-select-dropdown .i-multi-select-options{scrollbar-color:var(--color-text-secondary) transparent}.i-multi-select-wrapper .i-multi-select-dropdown .i-multi-select-options::-webkit-scrollbar{width:6px;height:6px}.i-multi-select-wrapper .i-multi-select-dropdown .i-multi-select-options::-webkit-scrollbar-track{background:#0000000d;border-radius:3px;margin:2px 0}.i-multi-select-wrapper .i-multi-select-dropdown .i-multi-select-options::-webkit-scrollbar-thumb{border-radius:3px;min-height:20px;background:var(--color-text-secondary);opacity:.6}.i-multi-select-wrapper .i-multi-select-dropdown .i-multi-select-options::-webkit-scrollbar-thumb:hover{background:var(--color-text-primary);opacity:.8}.i-multi-select-wrapper .i-multi-select-dropdown .i-multi-select-options::-webkit-scrollbar-thumb:active{background:var(--color-primary);opacity:.9}.i-multi-select-wrapper .i-multi-select-dropdown .i-multi-select-options{scrollbar-width:thin;scrollbar-color:var(--color-text-secondary) 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", "name", "fluid", "forceFloated", "hideText", "useFloatLabel", "placeholder", "autocomplete", "externalInvalid", "externalErrorMessage", "backgroundStyle", "icon", "readonly", "disabled", "errorMessages"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: IMultiSelect, decorators: [{
             type: Component,
@@ -5796,7 +5898,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:#f5f5f5;border-color:#e0e0e0;color:#9e9e9e}.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:transparent;border-radius:3px}.i-select-wrapper .i-select-dropdown .i-select-options::-webkit-scrollbar-thumb{background:#0003;border-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(--color-text-secondary);opacity:.4}.i-select-wrapper .i-select-dropdown .i-select-options::-webkit-scrollbar-thumb:hover{background:var(--color-text-primary);opacity:.6}.i-select-wrapper .i-select-dropdown .i-select-options::-webkit-scrollbar-thumb:active{background:var(--color-primary);opacity:.7}.i-select-wrapper .i-select-dropdown .i-select-options{scrollbar-color:var(--color-text-secondary) transparent}.i-select-wrapper .i-select-dropdown .i-select-options::-webkit-scrollbar{width:6px;height:6px}.i-select-wrapper .i-select-dropdown .i-select-options::-webkit-scrollbar-track{background:#0000000d;border-radius:3px;margin:2px 0}.i-select-wrapper .i-select-dropdown .i-select-options::-webkit-scrollbar-thumb{border-radius:3px;min-height:20px;background:var(--color-text-secondary);opacity:.6}.i-select-wrapper .i-select-dropdown .i-select-options::-webkit-scrollbar-thumb:hover{background:var(--color-text-primary);opacity:.8}.i-select-wrapper .i-select-dropdown .i-select-options::-webkit-scrollbar-thumb:active{background:var(--color-primary);opacity:.9}.i-select-wrapper .i-select-dropdown .i-select-options{scrollbar-width:thin;scrollbar-color:var(--color-text-secondary) 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:#f5f5f5;border-color:#e0e0e0;color:#9e9e9e}.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:transparent;border-radius:3px}.i-select-wrapper .i-select-dropdown .i-select-options::-webkit-scrollbar-thumb{background:#0003;border-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(--color-text-secondary);opacity:.4}.i-select-wrapper .i-select-dropdown .i-select-options::-webkit-scrollbar-thumb:hover{background:var(--color-text-primary);opacity:.6}.i-select-wrapper .i-select-dropdown .i-select-options::-webkit-scrollbar-thumb:active{background:var(--color-primary);opacity:.7}.i-select-wrapper .i-select-dropdown .i-select-options{scrollbar-color:var(--color-text-secondary) transparent}.i-select-wrapper .i-select-dropdown .i-select-options::-webkit-scrollbar{width:6px;height:6px}.i-select-wrapper .i-select-dropdown .i-select-options::-webkit-scrollbar-track{background:#0000000d;border-radius:3px;margin:2px 0}.i-select-wrapper .i-select-dropdown .i-select-options::-webkit-scrollbar-thumb{border-radius:3px;min-height:20px;background:var(--color-text-secondary);opacity:.6}.i-select-wrapper .i-select-dropdown .i-select-options::-webkit-scrollbar-thumb:hover{background:var(--color-text-primary);opacity:.8}.i-select-wrapper .i-select-dropdown .i-select-options::-webkit-scrollbar-thumb:active{background:var(--color-primary);opacity:.9}.i-select-wrapper .i-select-dropdown .i-select-options{scrollbar-width:thin;scrollbar-color:var(--color-text-secondary) 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", "name", "fluid", "forceFloated", "hideText", "useFloatLabel", "placeholder", "autocomplete", "externalInvalid", "externalErrorMessage", "backgroundStyle", "icon", "readonly", "disabled", "errorMessages"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: ISelect, decorators: [{
             type: Component,
@@ -6596,7 +6698,7 @@ class ITreeView {
             allNodes.length > 0 && selectedNodes.length === allNodes.length;
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: ITreeView, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.3", 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:transparent;border-radius:3px}.i-tree-view-wrapper .i-tree-view-container::-webkit-scrollbar-thumb{background:#0003;border-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(--color-text-secondary);opacity:.4}.i-tree-view-wrapper .i-tree-view-container::-webkit-scrollbar-thumb:hover{background:var(--color-text-primary);opacity:.6}.i-tree-view-wrapper .i-tree-view-container::-webkit-scrollbar-thumb:active{background:var(--color-primary);opacity:.7}.i-tree-view-wrapper .i-tree-view-container{scrollbar-color:var(--color-text-secondary) transparent}.i-tree-view-wrapper .i-tree-view-container::-webkit-scrollbar{width:6px;height:6px}.i-tree-view-wrapper .i-tree-view-container::-webkit-scrollbar-track{background:#0000000d;border-radius:3px;margin:2px 0}.i-tree-view-wrapper .i-tree-view-container::-webkit-scrollbar-thumb{border-radius:3px;min-height:20px;background:var(--color-text-secondary);opacity:.6}.i-tree-view-wrapper .i-tree-view-container::-webkit-scrollbar-thumb:hover{background:var(--color-text-primary);opacity:.8}.i-tree-view-wrapper .i-tree-view-container::-webkit-scrollbar-thumb:active{background:var(--color-primary);opacity:.9}.i-tree-view-wrapper .i-tree-view-container{scrollbar-width:thin;scrollbar-color:var(--color-text-secondary) 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.0.3", 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:transparent;border-radius:3px}.i-tree-view-wrapper .i-tree-view-container::-webkit-scrollbar-thumb{background:#0003;border-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(--color-text-secondary);opacity:.4}.i-tree-view-wrapper .i-tree-view-container::-webkit-scrollbar-thumb:hover{background:var(--color-text-primary);opacity:.6}.i-tree-view-wrapper .i-tree-view-container::-webkit-scrollbar-thumb:active{background:var(--color-primary);opacity:.7}.i-tree-view-wrapper .i-tree-view-container{scrollbar-color:var(--color-text-secondary) transparent}.i-tree-view-wrapper .i-tree-view-container::-webkit-scrollbar{width:6px;height:6px}.i-tree-view-wrapper .i-tree-view-container::-webkit-scrollbar-track{background:#0000000d;border-radius:3px;margin:2px 0}.i-tree-view-wrapper .i-tree-view-container::-webkit-scrollbar-thumb{border-radius:3px;min-height:20px;background:var(--color-text-secondary);opacity:.6}.i-tree-view-wrapper .i-tree-view-container::-webkit-scrollbar-thumb:hover{background:var(--color-text-primary);opacity:.8}.i-tree-view-wrapper .i-tree-view-container::-webkit-scrollbar-thumb:active{background:var(--color-primary);opacity:.9}.i-tree-view-wrapper .i-tree-view-container{scrollbar-width:thin;scrollbar-color:var(--color-text-secondary) 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", "name", "fluid", "forceFloated", "hideText", "useFloatLabel", "placeholder", "autocomplete", "externalInvalid", "externalErrorMessage", "backgroundStyle", "icon", "readonly", "disabled", "errorMessages"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: ITreeView, decorators: [{
             type: Component,
@@ -8164,7 +8266,7 @@ class ITable {
         return 0;
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: ITable, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.3", type: ITable, isStandalone: true, selector: "i-table", inputs: { data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: false, transformFunction: null }, columns: { classPropertyName: "columns", publicName: "columns", isSignal: true, isRequired: false, transformFunction: null }, groupedData: { classPropertyName: "groupedData", publicName: "groupedData", isSignal: true, isRequired: false, transformFunction: null }, emptyMessage: { classPropertyName: "emptyMessage", publicName: "emptyMessage", isSignal: false, isRequired: false, transformFunction: null }, sortable: { classPropertyName: "sortable", publicName: "sortable", isSignal: false, isRequired: false, transformFunction: null }, sortField: { classPropertyName: "sortField", publicName: "sortField", isSignal: false, isRequired: false, transformFunction: null }, sortOrder: { classPropertyName: "sortOrder", publicName: "sortOrder", isSignal: false, isRequired: false, transformFunction: null }, filterable: { classPropertyName: "filterable", publicName: "filterable", isSignal: false, isRequired: false, transformFunction: null }, globalFilter: { classPropertyName: "globalFilter", publicName: "globalFilter", isSignal: false, isRequired: false, transformFunction: null }, filterDelay: { classPropertyName: "filterDelay", publicName: "filterDelay", isSignal: false, isRequired: false, transformFunction: null }, selectionMode: { classPropertyName: "selectionMode", publicName: "selectionMode", isSignal: false, isRequired: false, transformFunction: null }, selection: { classPropertyName: "selection", publicName: "selection", isSignal: false, isRequired: false, transformFunction: null }, dataKey: { classPropertyName: "dataKey", publicName: "dataKey", isSignal: false, isRequired: false, transformFunction: null }, showActions: { classPropertyName: "showActions", publicName: "showActions", isSignal: false, isRequired: false, transformFunction: null }, actions: { classPropertyName: "actions", publicName: "actions", isSignal: false, isRequired: false, transformFunction: null }, striped: { classPropertyName: "striped", publicName: "striped", isSignal: false, isRequired: false, transformFunction: null }, hoverable: { classPropertyName: "hoverable", publicName: "hoverable", isSignal: false, isRequired: false, transformFunction: null }, bordered: { classPropertyName: "bordered", publicName: "bordered", isSignal: false, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: false, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: false, isRequired: false, transformFunction: null }, scrollable: { classPropertyName: "scrollable", publicName: "scrollable", isSignal: false, isRequired: false, transformFunction: null }, scrollHeight: { classPropertyName: "scrollHeight", publicName: "scrollHeight", isSignal: false, isRequired: false, transformFunction: null }, height: { classPropertyName: "height", publicName: "height", isSignal: false, isRequired: false, transformFunction: null }, virtualScroll: { classPropertyName: "virtualScroll", publicName: "virtualScroll", isSignal: false, isRequired: false, transformFunction: null }, virtualScrollItemSize: { classPropertyName: "virtualScrollItemSize", publicName: "virtualScrollItemSize", isSignal: false, isRequired: false, transformFunction: null }, virtualScrollMinBufferPx: { classPropertyName: "virtualScrollMinBufferPx", publicName: "virtualScrollMinBufferPx", isSignal: false, isRequired: false, transformFunction: null }, virtualScrollMaxBufferPx: { classPropertyName: "virtualScrollMaxBufferPx", publicName: "virtualScrollMaxBufferPx", isSignal: false, isRequired: false, transformFunction: null }, resizableColumns: { classPropertyName: "resizableColumns", publicName: "resizableColumns", isSignal: false, isRequired: false, transformFunction: null }, reorderableColumns: { classPropertyName: "reorderableColumns", publicName: "reorderableColumns", isSignal: false, isRequired: false, transformFunction: null }, rowExpandable: { classPropertyName: "rowExpandable", publicName: "rowExpandable", isSignal: false, isRequired: false, transformFunction: null }, downloadable: { classPropertyName: "downloadable", publicName: "downloadable", isSignal: false, isRequired: false, transformFunction: null }, downloadMode: { classPropertyName: "downloadMode", publicName: "downloadMode", isSignal: false, isRequired: false, transformFunction: null }, downloadFormat: { classPropertyName: "downloadFormat", publicName: "downloadFormat", isSignal: false, isRequired: false, transformFunction: null }, downloadFilename: { classPropertyName: "downloadFilename", publicName: "downloadFilename", isSignal: false, isRequired: false, transformFunction: null } }, outputs: { onSort: "onSort", onFilter: "onFilter", selectionChange: "selectionChange", onSelectionChange: "onSelectionChange", onRowSelect: "onRowSelect", onRowUnselect: "onRowUnselect", onAction: "onAction", onRowExpand: "onRowExpand", onRowCollapse: "onRowCollapse", onDownload: "onDownload" }, host: { listeners: { "document:mousemove": "onColumnResize($event)", "document:mouseup": "onColumnResizeEnd()" } }, viewQueries: [{ propertyName: "virtualScrollViewport", first: true, predicate: CdkVirtualScrollViewport, descendants: true }], ngImport: i0, template: "<div class=\"i-table-wrapper\" [ngClass]=\"getTableClasses()\">\n  <!-- Table Header with ng-content, search, and download -->\n  @if (globalFilter || downloadable) {\n    <div class=\"i-table-header\">\n      <div class=\"i-table-header-start\">\n        <ng-content select=\"[header]\"></ng-content>\n      </div>\n      <div class=\"i-table-header-end\">\n        @if (globalFilter) {\n          <div class=\"i-table-global-filter\">\n            <i-input-text\n              [useFloatLabel]=\"false\"\n              placeholder=\"Search...\"\n              [ngModel]=\"globalFilterValue()\"\n              (ngModelChange)=\"onGlobalFilterInput($event)\"\n              [fluid]=\"false\"\n              [icon]=\"'pi pi-search'\"\n            ></i-input-text>\n          </div>\n        }\n        @if (downloadable) {\n          <div class=\"i-table-download\">\n            <i-button\n              severity=\"secondary\"\n              [text]=\"true\"\n              size=\"small\"\n              icon=\"pi pi-download\"\n              label=\"Download\"\n              (clicked)=\"handleDownload()\"\n            ></i-button>\n          </div>\n        }\n      </div>\n    </div>\n  }\n\n  <!-- Loading Overlay -->\n  @if (loading) {\n    <div class=\"i-table-loading-overlay\">\n      <i class=\"pi pi-spin pi-spinner i-table-loading-icon\"></i>\n    </div>\n  }\n\n  <!-- Scrollable Table Container -->\n  <div\n    class=\"i-table-container\"\n    [class.i-table-container--scrollable]=\"scrollable || height || scrollHeight\"\n    [class.i-table-container--virtual-scroll]=\"virtualScroll\"\n    [style.height]=\"virtualScroll ? height || scrollHeight || '400px' : null\"\n    [style.max-height]=\"!virtualScroll ? height || scrollHeight || null : null\"\n  >\n    <!-- Virtual Scroll Mode -->\n    @if (virtualScroll) {\n      <!-- Sticky Header Table (outside viewport) -->\n      <div class=\"i-table-virtual-header\">\n        <table class=\"i-table\">\n          <thead>\n            <!-- Column Filters Row -->\n            @if (filterable) {\n              <tr class=\"i-table-filter-row\">\n                @if (selectionMode === \"multiple\") {\n                  <th class=\"i-table-selection-header\"></th>\n                }\n                @if (rowExpandable) {\n                  <th class=\"i-table-expand-header\"></th>\n                }\n                @for (\n                  column of columns();\n                  track trackByColumn($index, column)\n                ) {\n                  @if (column.filterable !== false) {\n                    <th [style.width]=\"getColumnWidth(column)\">\n                      <input\n                        type=\"text\"\n                        class=\"i-table-column-filter\"\n                        placeholder=\"Filter...\"\n                        [ngModel]=\"columnFilters()[column.field] || ''\"\n                        (ngModelChange)=\"\n                          onColumnFilterInput(column.field, $event)\n                        \"\n                      />\n                    </th>\n                  } @else {\n                    <th [style.width]=\"getColumnWidth(column)\"></th>\n                  }\n                }\n                @if (showActions && actions.length > 0) {\n                  <th class=\"i-table-actions-header\"></th>\n                }\n              </tr>\n            }\n\n            <!-- Column Headers Row -->\n            <tr>\n              @if (selectionMode === \"multiple\") {\n                <th class=\"i-table-selection-header\">\n                  <i-checkbox\n                    [checked]=\"areAllRowsSelected()\"\n                    [indeterminate]=\"areSomeRowsSelected()\"\n                    (onChange)=\"toggleAllSelection()\"\n                  ></i-checkbox>\n                </th>\n              }\n              @if (rowExpandable) {\n                <th class=\"i-table-expand-header\"></th>\n              }\n              @for (column of columns(); track trackByColumn($index, column)) {\n                <th\n                  [style.width]=\"getColumnWidth(column)\"\n                  [style.text-align]=\"column.align || 'left'\"\n                  [class.i-table-sortable-column]=\"sortable && column.sortable\"\n                  [class.i-table-sorted]=\"sortField === column.field\"\n                  (click)=\"onSortColumn(column)\"\n                >\n                  <div class=\"i-table-header-content\">\n                    <span class=\"i-table-header-text\">{{ column.header }}</span>\n                    @if (sortable && column.sortable) {\n                      <i\n                        [class]=\"getSortIcon(column)\"\n                        class=\"i-table-sort-icon\"\n                      ></i>\n                    }\n                  </div>\n                  @if (resizableColumns) {\n                    <span\n                      class=\"i-table-column-resizer\"\n                      (mousedown)=\"onColumnResizeStart($event, column)\"\n                    ></span>\n                  }\n                </th>\n              }\n              @if (showActions && actions.length > 0) {\n                <th class=\"i-table-actions-header\">Actions</th>\n              }\n            </tr>\n          </thead>\n        </table>\n      </div>\n\n      <!-- Virtual Scroll Viewport (body only) -->\n      <cdk-virtual-scroll-viewport\n        [itemSize]=\"virtualScrollItemSize\"\n        [minBufferPx]=\"virtualScrollMinBufferPx\"\n        [maxBufferPx]=\"virtualScrollMaxBufferPx\"\n        class=\"i-table-virtual-viewport\"\n      >\n        <table class=\"i-table i-table-virtual-body\">\n          <tbody>\n            @if (processedData().length === 0) {\n              <tr class=\"i-table-empty-row\">\n                <td\n                  [attr.colspan]=\"\n                    columns().length +\n                    (selectionMode === 'multiple' ? 1 : 0) +\n                    (rowExpandable ? 1 : 0) +\n                    (showActions && actions.length > 0 ? 1 : 0)\n                  \"\n                >\n                  <i-no-content />\n                </td>\n              </tr>\n            }\n            <!-- Virtual Scroll Rows -->\n            <tr\n              *cdkVirtualFor=\"\n                let row of processedData();\n                let rowIndex = index;\n                trackBy: trackByRow\n              \"\n              [style.height.px]=\"virtualScrollItemSize\"\n              [class.i-table-row-odd]=\"rowIndex % 2 !== 0\"\n              [class.i-table-row-selected]=\"isRowSelected(row)\"\n              (click)=\"toggleRowSelection(row)\"\n            >\n              @if (selectionMode === \"multiple\") {\n                <td class=\"i-table-selection-cell\">\n                  <i-checkbox\n                    [checked]=\"isRowSelected(row)\"\n                    (onChange)=\"toggleRowSelection(row)\"\n                    (click)=\"$event.stopPropagation()\"\n                  ></i-checkbox>\n                </td>\n              }\n              @if (rowExpandable) {\n                <td class=\"i-table-expand-cell\">\n                  <i-button\n                    severity=\"secondary\"\n                    [text]=\"true\"\n                    size=\"small\"\n                    [icon]=\"\n                      isRowExpanded(row)\n                        ? 'pi pi-chevron-down'\n                        : 'pi pi-chevron-right'\n                    \"\n                    (clicked)=\"toggleRowExpansion(row, $event)\"\n                  ></i-button>\n                </td>\n              }\n              @for (column of columns(); track trackByColumn($index, column)) {\n                <td\n                  [style.text-align]=\"column.align || 'left'\"\n                  [style.width]=\"getColumnWidth(column)\"\n                  [class]=\"\n                    getCellSeverity(row, column)\n                      ? 'i-table-cell-' + getCellSeverity(row, column)\n                      : ''\n                  \"\n                >\n                  @if (isIconColumn(column)) {\n                    <i\n                      [class]=\"getCellIcon(row, column)\"\n                      [class.i-severity-icon]=\"getCellSeverity(row, column)\"\n                      [style.font-size]=\"column.iconSize || '1rem'\"\n                    ></i>\n                  } @else if (isListColumn(column)) {\n                    <div class=\"i-table-list-cell\">\n                      @for (item of getCellListItems(row, column); track item) {\n                        <i-chip [label]=\"item\"></i-chip>\n                      }\n                    </div>\n                  } @else {\n                    <span\n                      [class.i-severity-text]=\"getCellSeverity(row, column)\"\n                    >\n                      {{\n                        formatCellValue(getCellValue(row, column.field), column)\n                      }}\n                    </span>\n                  }\n                </td>\n              }\n              @if (showActions && actions.length > 0) {\n                <td class=\"i-table-actions-cell\">\n                  <div class=\"i-table-actions\">\n                    @for (action of actions; track action.id) {\n                      <i-button\n                        [severity]=\"action.severity || 'secondary'\"\n                        [text]=\"true\"\n                        size=\"small\"\n                        [icon]=\"action.icon || ''\"\n                        [disabled]=\"isActionDisabled(action, row)\"\n                        [iTooltip]=\"getActionTooltip(action, row)\"\n                        [class.i-action-hidden]=\"!isActionVisible(action, row)\"\n                        (clicked)=\"onActionClick(action, row, $event)\"\n                      >\n                        @if (action.label) {\n                          {{ action.label }}\n                        }\n                      </i-button>\n                    }\n                  </div>\n                </td>\n              }\n            </tr>\n          </tbody>\n        </table>\n      </cdk-virtual-scroll-viewport>\n    } @else {\n      <!-- Non-Virtual Scroll Table -->\n      <table class=\"i-table\">\n        <!-- Table Header (sticky when scrollable) -->\n        <thead>\n          <!-- Column Filters Row -->\n          @if (filterable) {\n            <tr class=\"i-table-filter-row\">\n              @if (selectionMode === \"multiple\") {\n                <th class=\"i-table-selection-header\"></th>\n              }\n              @if (rowExpandable) {\n                <th class=\"i-table-expand-header\"></th>\n              }\n              @for (column of columns(); track trackByColumn($index, column)) {\n                @if (column.filterable !== false) {\n                  <th [style.width]=\"getColumnWidth(column)\">\n                    <input\n                      type=\"text\"\n                      class=\"i-table-column-filter\"\n                      placeholder=\"Filter...\"\n                      [ngModel]=\"columnFilters()[column.field] || ''\"\n                      (ngModelChange)=\"\n                        onColumnFilterInput(column.field, $event)\n                      \"\n                    />\n                  </th>\n                } @else {\n                  <th [style.width]=\"getColumnWidth(column)\"></th>\n                }\n              }\n              @if (showActions && actions.length > 0) {\n                <th class=\"i-table-actions-header\"></th>\n              }\n            </tr>\n          }\n\n          <!-- Column Headers Row -->\n          <tr>\n            @if (selectionMode === \"multiple\") {\n              <th class=\"i-table-selection-header\">\n                <i-checkbox\n                  [checked]=\"areAllRowsSelected()\"\n                  [indeterminate]=\"areSomeRowsSelected()\"\n                  (onChange)=\"toggleAllSelection()\"\n                ></i-checkbox>\n              </th>\n            }\n            @if (rowExpandable) {\n              <th class=\"i-table-expand-header\"></th>\n            }\n            @for (column of columns(); track trackByColumn($index, column)) {\n              <th\n                [style.width]=\"getColumnWidth(column)\"\n                [style.text-align]=\"column.align || 'left'\"\n                [class.i-table-sortable-column]=\"sortable && column.sortable\"\n                [class.i-table-sorted]=\"sortField === column.field\"\n                (click)=\"onSortColumn(column)\"\n              >\n                <div class=\"i-table-header-content\">\n                  <span class=\"i-table-header-text\">{{ column.header }}</span>\n                  @if (sortable && column.sortable) {\n                    <i\n                      [class]=\"getSortIcon(column)\"\n                      class=\"i-table-sort-icon\"\n                    ></i>\n                  }\n                </div>\n                @if (resizableColumns) {\n                  <span\n                    class=\"i-table-column-resizer\"\n                    (mousedown)=\"onColumnResizeStart($event, column)\"\n                  ></span>\n                }\n              </th>\n            }\n            @if (showActions && actions.length > 0) {\n              <th class=\"i-table-actions-header\">Actions</th>\n            }\n          </tr>\n        </thead>\n\n        <!-- Table Body - Grouped Mode -->\n        @if (isGroupedMode()) {\n          <tbody>\n            @for (group of groupedData(); track $index) {\n              <!-- Group Header Row -->\n              <tr class=\"i-table-group-header\" [ngClass]=\"group.styleClass\">\n                <td\n                  [attr.colspan]=\"\n                    (getGroupColumns(group).length || columns().length) +\n                    (selectionMode === 'multiple' ? 1 : 0) +\n                    (rowExpandable ? 1 : 0) +\n                    (showActions && actions.length > 0 ? 1 : 0)\n                  \"\n                  (click)=\"toggleGroupExpansion(group.label)\"\n                >\n                  <div class=\"i-table-group-header-content\">\n                    <i\n                      [class]=\"\n                        isGroupExpanded(group.label)\n                          ? 'pi pi-chevron-down'\n                          : 'pi pi-chevron-right'\n                      \"\n                      class=\"i-table-group-toggle-icon\"\n                    ></i>\n                    <span class=\"i-table-group-label\">{{ group.label }}</span>\n                    <span class=\"i-table-group-count\"\n                      >({{ group.data.length }})</span\n                    >\n                  </div>\n                </td>\n              </tr>\n\n              <!-- Group Column Headers (when expanded) -->\n              @if (isGroupExpanded(group.label) && group.columns) {\n                <tr class=\"i-table-group-columns-header\">\n                  @if (selectionMode === \"multiple\") {\n                    <th class=\"i-table-selection-header\"></th>\n                  }\n                  @if (rowExpandable) {\n                    <th class=\"i-table-expand-header\"></th>\n                  }\n                  @for (\n                    column of getGroupColumns(group);\n                    track trackByColumn($index, column)\n                  ) {\n                    <th\n                      [style.width]=\"getColumnWidth(column)\"\n                      [style.text-align]=\"column.align || 'left'\"\n                    >\n                      {{ column.header }}\n                    </th>\n                  }\n                  @if (showActions && actions.length > 0) {\n                    <th class=\"i-table-actions-header\">Actions</th>\n                  }\n                </tr>\n              }\n\n              <!-- Group Data Rows (when expanded) -->\n              @if (isGroupExpanded(group.label)) {\n                @if (group.data.length === 0) {\n                  <tr class=\"i-table-empty-row\">\n                    <td\n                      [attr.colspan]=\"\n                        (getGroupColumns(group).length || columns().length) +\n                        (selectionMode === 'multiple' ? 1 : 0) +\n                        (rowExpandable ? 1 : 0) +\n                        (showActions && actions.length > 0 ? 1 : 0)\n                      \"\n                    >\n                      <i-no-content />\n                    </td>\n                  </tr>\n                } @else {\n                  @for (row of group.data; track trackByRow($index, row)) {\n                    <tr\n                      class=\"i-table-group-row\"\n                      [class.i-table-row-odd]=\"$odd\"\n                      [class.i-table-row-selected]=\"isRowSelected(row)\"\n                      (click)=\"toggleRowSelection(row)\"\n                    >\n                      @if (selectionMode === \"multiple\") {\n                        <td class=\"i-table-selection-cell\">\n                          <i-checkbox\n                            [checked]=\"isRowSelected(row)\"\n                            (onChange)=\"toggleRowSelection(row)\"\n                            (click)=\"$event.stopPropagation()\"\n                          ></i-checkbox>\n                        </td>\n                      }\n                      @if (rowExpandable) {\n                        <td class=\"i-table-expand-cell\">\n                          <i-button\n                            severity=\"secondary\"\n                            [text]=\"true\"\n                            size=\"small\"\n                            [icon]=\"\n                              isRowExpanded(row)\n                                ? 'pi pi-chevron-down'\n                                : 'pi pi-chevron-right'\n                            \"\n                            (clicked)=\"toggleRowExpansion(row, $event)\"\n                          ></i-button>\n                        </td>\n                      }\n                      @for (\n                        column of getGroupColumns(group);\n                        track trackByColumn($index, column)\n                      ) {\n                        <td\n                          [style.text-align]=\"column.align || 'left'\"\n                          [style.width]=\"getColumnWidth(column)\"\n                          [class]=\"\n                            getCellSeverity(row, column)\n                              ? 'i-table-cell-' + getCellSeverity(row, column)\n                              : ''\n                          \"\n                        >\n                          @if (isIconColumn(column)) {\n                            <i\n                              [class]=\"getCellIcon(row, column)\"\n                              [class.i-severity-icon]=\"\n                                getCellSeverity(row, column)\n                              \"\n                              [style.font-size]=\"column.iconSize || '1rem'\"\n                            ></i>\n                          } @else if (isListColumn(column)) {\n                            <div class=\"i-table-list-cell\">\n                              @for (\n                                item of getCellListItems(row, column);\n                                track item\n                              ) {\n                                <i-chip [label]=\"item\"></i-chip>\n                              }\n                            </div>\n                          } @else {\n                            <span\n                              [class.i-severity-text]=\"\n                                getCellSeverity(row, column)\n                              \"\n                            >\n                              {{\n                                formatCellValue(\n                                  getCellValue(row, column.field),\n                                  column\n                                )\n                              }}\n                            </span>\n                          }\n                        </td>\n                      }\n                      @if (showActions && actions.length > 0) {\n                        <td class=\"i-table-actions-cell\">\n                          <div class=\"i-table-actions\">\n                            @for (action of actions; track action.id) {\n                              <i-button\n                                [severity]=\"action.severity || 'secondary'\"\n                                [text]=\"true\"\n                                size=\"small\"\n                                [icon]=\"action.icon || ''\"\n                                [disabled]=\"isActionDisabled(action, row)\"\n                                [iTooltip]=\"getActionTooltip(action, row)\"\n                                [class.i-action-hidden]=\"\n                                  !isActionVisible(action, row)\n                                \"\n                                (clicked)=\"onActionClick(action, row, $event)\"\n                              >\n                                @if (action.label) {\n                                  {{ action.label }}\n                                }\n                              </i-button>\n                            }\n                          </div>\n                        </td>\n                      }\n                    </tr>\n                    <!-- Expanded Row Content -->\n                    @if (rowExpandable && isRowExpanded(row)) {\n                      <tr class=\"i-table-expanded-row\">\n                        <td\n                          [attr.colspan]=\"\n                            (getGroupColumns(group).length ||\n                              columns().length) +\n                            (selectionMode === 'multiple' ? 1 : 0) +\n                            1 +\n                            (showActions && actions.length > 0 ? 1 : 0)\n                          \"\n                        >\n                          <div class=\"i-table-expanded-content\">\n                            <pre>{{ row | json }}</pre>\n                          </div>\n                        </td>\n                      </tr>\n                    }\n                  }\n                }\n              }\n            }\n          </tbody>\n        } @else {\n          <!-- Table Body - Regular Mode -->\n          <tbody>\n            @if (processedData().length === 0) {\n              <tr class=\"i-table-empty-row\">\n                <td\n                  [attr.colspan]=\"\n                    columns().length +\n                    (selectionMode === 'multiple' ? 1 : 0) +\n                    (rowExpandable ? 1 : 0) +\n                    (showActions && actions.length > 0 ? 1 : 0)\n                  \"\n                >\n                  <i-no-content />\n                </td>\n              </tr>\n            } @else {\n              @for (\n                row of processedData();\n                track trackByRow($index, row);\n                let rowIndex = $index\n              ) {\n                <tr\n                  [class.i-table-row-odd]=\"$odd\"\n                  [class.i-table-row-selected]=\"isRowSelected(row)\"\n                  (click)=\"toggleRowSelection(row)\"\n                >\n                  @if (selectionMode === \"multiple\") {\n                    <td class=\"i-table-selection-cell\">\n                      <i-checkbox\n                        [checked]=\"isRowSelected(row)\"\n                        (onChange)=\"toggleRowSelection(row)\"\n                        (click)=\"$event.stopPropagation()\"\n                      ></i-checkbox>\n                    </td>\n                  }\n                  @if (rowExpandable) {\n                    <td class=\"i-table-expand-cell\">\n                      <i-button\n                        severity=\"secondary\"\n                        [text]=\"true\"\n                        size=\"small\"\n                        [icon]=\"\n                          isRowExpanded(row)\n                            ? 'pi pi-chevron-down'\n                            : 'pi pi-chevron-right'\n                        \"\n                        (clicked)=\"toggleRowExpansion(row, $event)\"\n                      ></i-button>\n                    </td>\n                  }\n                  @for (\n                    column of columns();\n                    track trackByColumn($index, column)\n                  ) {\n                    <td\n                      [style.text-align]=\"column.align || 'left'\"\n                      [style.width]=\"getColumnWidth(column)\"\n                      [class]=\"\n                        getCellSeverity(row, column)\n                          ? 'i-table-cell-' + getCellSeverity(row, column)\n                          : ''\n                      \"\n                    >\n                      @if (isIconColumn(column)) {\n                        <i\n                          [class]=\"getCellIcon(row, column)\"\n                          [class.i-severity-icon]=\"getCellSeverity(row, column)\"\n                          [style.font-size]=\"column.iconSize || '1rem'\"\n                        ></i>\n                      } @else if (isListColumn(column)) {\n                        <div class=\"i-table-list-cell\">\n                          @for (\n                            item of getCellListItems(row, column);\n                            track item\n                          ) {\n                            <i-chip [label]=\"item\"></i-chip>\n                          }\n                        </div>\n                      } @else {\n                        <span\n                          [class.i-severity-text]=\"getCellSeverity(row, column)\"\n                        >\n                          {{\n                            formatCellValue(\n                              getCellValue(row, column.field),\n                              column\n                            )\n                          }}\n                        </span>\n                      }\n                    </td>\n                  }\n                  @if (showActions && actions.length > 0) {\n                    <td class=\"i-table-actions-cell\">\n                      <div class=\"i-table-actions\">\n                        @for (action of actions; track action.id) {\n                          <i-button\n                            [severity]=\"action.severity || 'secondary'\"\n                            [text]=\"true\"\n                            size=\"small\"\n                            [icon]=\"action.icon || ''\"\n                            [disabled]=\"isActionDisabled(action, row)\"\n                            [iTooltip]=\"getActionTooltip(action, row)\"\n                            [class.i-action-hidden]=\"\n                              !isActionVisible(action, row)\n                            \"\n                            (clicked)=\"onActionClick(action, row, $event)\"\n                          >\n                            @if (action.label) {\n                              {{ action.label }}\n                            }\n                          </i-button>\n                        }\n                      </div>\n                    </td>\n                  }\n                </tr>\n                <!-- Expanded Row Content -->\n                @if (rowExpandable && isRowExpanded(row)) {\n                  <tr class=\"i-table-expanded-row\">\n                    <td\n                      [attr.colspan]=\"\n                        columns().length +\n                        (selectionMode === 'multiple' ? 1 : 0) +\n                        1 +\n                        (showActions && actions.length > 0 ? 1 : 0)\n                      \"\n                    >\n                      <div class=\"i-table-expanded-content\">\n                        <pre>{{ row | json }}</pre>\n                      </div>\n                    </td>\n                  </tr>\n                }\n              }\n            }\n          </tbody>\n        }\n      </table>\n    }\n  </div>\n</div>\n", styles: [".i-table-wrapper{color:var(--color-text-primary);background:var(--color-component-background)}.i-table-wrapper .i-table-header{background:var(--surface-section);border-bottom:1px solid var(--surface-border)}.i-table-wrapper .i-table-global-filter .i-input-text{background:var(--surface-ground)}.i-table-wrapper .i-table-loading-overlay{background:#ffffffb3}.i-table-wrapper .i-table-loading-overlay .i-table-loading-icon{color:var(--color-primary)}.i-table-wrapper table thead tr{background:var(--color-component-background)}.i-table-wrapper table thead tr th{color:var(--color-text-primary);border-bottom:1px solid var(--surface-border)}.i-table-wrapper table thead tr th.i-table-sortable-column{cursor:pointer}.i-table-wrapper table thead tr th.i-table-sortable-column:hover{background:var(--surface-hover)}.i-table-wrapper table thead tr th.i-table-sorted{background:var(--surface-hover);color:var(--color-primary)}.i-table-wrapper table thead tr th .i-table-sort-icon{color:var(--color-text-secondary)}.i-table-wrapper table thead tr th.i-table-sorted .i-table-sort-icon{color:var(--color-primary)}.i-table-wrapper table thead .i-table-filter-row th{background:var(--color-component-background)}.i-table-wrapper table thead .i-table-filter-row .i-table-column-filter{border:1px solid var(--surface-border);background:var(--surface-ground);color:var(--color-text-primary)}.i-table-wrapper table thead .i-table-filter-row .i-table-column-filter:focus{border-color:var(--color-primary);box-shadow:0 2px 10px #0003;outline:none}.i-table-wrapper table thead .i-table-filter-row .i-table-column-filter::placeholder{color:var(--color-text-tertiary)}.i-table-wrapper table tbody tr{background:var(--color-component-background);border-bottom:1px solid var(--surface-border)}.i-table-wrapper table tbody tr td{color:var(--color-text-primary)}.i-table-wrapper table tbody tr.i-table-row-odd{background:var(--color-component-background)}.i-table-wrapper table tbody tr.i-table-row-selected{background:var(--surface-hover);color:var(--color-primary)}.i-table-wrapper table tbody .i-table-expanded-row{background:var(--color-component-background)}.i-table-wrapper table tbody .i-table-expanded-row .i-table-expanded-content{background:var(--surface-ground);border:1px solid var(--surface-border)}.i-table-wrapper table tbody .i-table-empty-row td{background:var(--color-component-background)}.i-table-wrapper table tbody .i-table-group-header{background:var(--color-component-background);border-bottom:2px solid var(--surface-border)}.i-table-wrapper table tbody .i-table-group-header td{color:var(--color-text-primary)}.i-table-wrapper table tbody .i-table-group-header:hover{background:var(--surface-hover)}.i-table-wrapper table tbody .i-table-group-header .i-table-group-toggle-icon,.i-table-wrapper table tbody .i-table-group-header .i-table-group-count{color:var(--color-text-secondary)}.i-table-wrapper table tbody .i-table-group-columns-header{background:var(--color-component-background);border-bottom:1px solid var(--surface-border)}.i-table-wrapper table tbody .i-table-group-columns-header th{color:var(--color-text-primary);border-bottom:1px solid var(--surface-border)}.i-table-wrapper table tbody .i-table-group-row,.i-table-wrapper table tbody .i-table-group-row.i-table-row-odd{background:var(--color-component-background)}.i-table-wrapper table tbody .i-table-group-row.i-table-row-selected{background:var(--surface-hover);color:var(--color-primary)}.i-table-wrapper.i-table--bordered table,.i-table-wrapper.i-table--bordered table th,.i-table-wrapper.i-table--bordered table td{border:1px solid var(--surface-border)}.i-table-wrapper.i-table--hoverable table tbody tr:not(.i-table-empty-row):not(.i-table-expanded-row):not(.i-table-group-header):not(.i-table-group-columns-header):hover{background:var(--surface-hover)}.i-table-wrapper.i-table--hoverable table tbody tr:not(.i-table-empty-row):not(.i-table-expanded-row):not(.i-table-group-header):not(.i-table-group-columns-header).i-table-row-selected:hover{background:var(--surface-hover)}.i-table-wrapper .i-table-column-resizer{background:var(--surface-border)}.i-table-wrapper .i-table-column-resizer:hover{background:var(--color-primary)}.i-table-wrapper{position:relative;display:block;border-radius:4px;overflow:visible}.i-table-wrapper.i-table--small table thead th{padding:8px 12px;font-size:13px}.i-table-wrapper.i-table--small table tbody td{padding:6px 12px;font-size:1em}.i-table-wrapper.i-table--small table .i-table-filter-row th{padding:4px 12px}.i-table-wrapper.i-table--large table thead th,.i-table-wrapper.i-table--large table tbody td{padding:16px 20px;font-size:16px}.i-table-wrapper.i-table--large table .i-table-filter-row th{padding:12px 20px}.i-table-wrapper.i-table--scrollable table{table-layout:fixed}.i-table-wrapper.i-table--loading{pointer-events:none;-webkit-user-select:none;user-select:none}.i-table-wrapper .i-table-header{display:flex;justify-content:space-between;align-items:center;padding:12px 16px;gap:16px}.i-table-wrapper .i-table-header .i-table-header-start{flex:0 1 auto;display:flex;align-items:center}.i-table-wrapper .i-table-header .i-table-header-end{flex:0 1 auto;display:flex;align-items:center;gap:12px;margin-left:auto}.i-table-wrapper .i-table-header .i-table-header-end .i-table-global-filter{width:250px}.i-table-wrapper .i-table-header .i-table-header-end .i-table-download{flex-shrink:0}.i-table-wrapper .i-table-loading-overlay{position:absolute;inset:0;z-index:10;display:flex;align-items:center;justify-content:center}.i-table-wrapper .i-table-loading-overlay .i-table-loading-icon{font-size:32px}.i-table-wrapper .i-table-container{overflow-x:auto}.i-table-wrapper .i-table-container::-webkit-scrollbar-track{background:transparent;border-radius:3px}.i-table-wrapper .i-table-container::-webkit-scrollbar-thumb{background:#0003;border-radius:3px;transition:background .2s ease}.i-table-wrapper .i-table-container::-webkit-scrollbar-thumb:hover{background:#00000059}.i-table-wrapper .i-table-container::-webkit-scrollbar-thumb:active{background:#00000080}.i-table-wrapper .i-table-container::-webkit-scrollbar-corner{background:transparent}.i-table-wrapper .i-table-container{scrollbar-width:thin;scrollbar-color:rgba(0,0,0,.2) transparent;scroll-behavior:smooth}.i-table-wrapper .i-table-container::-webkit-scrollbar-thumb{background:var(--color-text-secondary);opacity:.4}.i-table-wrapper .i-table-container::-webkit-scrollbar-thumb:hover{background:var(--color-text-primary);opacity:.6}.i-table-wrapper .i-table-container::-webkit-scrollbar-thumb:active{background:var(--color-primary);opacity:.7}.i-table-wrapper .i-table-container{scrollbar-color:var(--color-text-secondary) transparent}.i-table-wrapper .i-table-container::-webkit-scrollbar{width:6px;height:6px}.i-table-wrapper .i-table-container::-webkit-scrollbar-track{background:#0000000d;border-radius:3px;margin:2px 0}.i-table-wrapper .i-table-container::-webkit-scrollbar-thumb{border-radius:3px;min-height:20px;background:var(--color-text-secondary);opacity:.6}.i-table-wrapper .i-table-container::-webkit-scrollbar-thumb:hover{background:var(--color-text-primary);opacity:.8}.i-table-wrapper .i-table-container::-webkit-scrollbar-thumb:active{background:var(--color-primary);opacity:.9}.i-table-wrapper .i-table-container{scrollbar-width:thin;scrollbar-color:var(--color-text-secondary) rgba(0,0,0,.05)}.i-table-wrapper .i-table-container--scrollable{overflow-y:auto}.i-table-wrapper .i-table-container--scrollable thead{position:sticky;top:0;z-index:2}.i-table-wrapper .i-table-container--virtual-scroll{overflow:hidden;display:flex;flex-direction:column}.i-table-wrapper .i-table-container--virtual-scroll .i-table-virtual-header{flex-shrink:0;overflow:hidden;background:var(--color-surface-50)}.i-table-wrapper .i-table-container--virtual-scroll .i-table-virtual-header table{width:100%;border-collapse:collapse;table-layout:fixed}.i-table-wrapper .i-table-container--virtual-scroll .i-table-virtual-viewport{flex:1;min-height:0;width:100%}.i-table-wrapper .i-table-container--virtual-scroll .i-table-virtual-viewport .cdk-virtual-scroll-content-wrapper{width:100%}.i-table-wrapper .i-table-container--virtual-scroll .i-table-virtual-body{width:100%;border-collapse:collapse;table-layout:fixed}.i-table-wrapper .i-table-container--virtual-scroll table{display:table;width:100%;border-collapse:collapse}.i-table-wrapper .i-table-container--virtual-scroll tbody{display:table-row-group}.i-table-wrapper .i-table-container--virtual-scroll tr{display:table-row;box-sizing:border-box}.i-table-wrapper .i-table-container--virtual-scroll td,.i-table-wrapper .i-table-container--virtual-scroll th{display:table-cell}.i-table-wrapper table{width:100%;border-collapse:collapse;table-layout:auto}.i-table-wrapper table thead tr th{position:relative;padding:12px 16px;font-weight:600;text-align:left;white-space:nowrap;-webkit-user-select:none;user-select:none}.i-table-wrapper table thead tr th .i-table-header-content{display:flex;align-items:center;gap:8px}.i-table-wrapper table thead tr th .i-table-header-content .i-table-header-text{flex:1}.i-table-wrapper table thead tr th .i-table-sort-icon{font-size:1em;opacity:.6;transition:opacity .15s ease,color .15s ease}.i-table-wrapper table thead tr th.i-table-sortable-column{transition:background-color .15s ease}.i-table-wrapper table thead tr th.i-table-sortable-column .i-table-sort-icon{opacity:.4}.i-table-wrapper table thead tr th.i-table-sortable-column:hover .i-table-sort-icon,.i-table-wrapper table thead tr th.i-table-sortable-column.i-table-sorted .i-table-sort-icon{opacity:1}.i-table-wrapper table thead tr th:hover .i-table-column-resizer{opacity:.5}.i-table-wrapper table thead .i-table-filter-row th{padding:8px 16px}.i-table-wrapper table thead .i-table-filter-row th .i-table-column-filter{width:100%;padding:6px 10px;font-size:1em;border-radius:4px;transition:border-color .15s ease,box-shadow .15s ease}.i-table-wrapper table tbody{display:table-row-group}.i-table-wrapper table tbody tr{transition:background-color .15s ease}.i-table-wrapper table tbody tr td{padding:12px 16px;vertical-align:middle}.i-table-wrapper table tbody .i-table-empty-row td{padding:40px 16px;text-align:center}.i-table-wrapper table tbody .i-table-expanded-row td{padding:0}.i-table-wrapper table tbody .i-table-expanded-row td .i-table-expanded-content{padding:16px;margin:8px 16px;border-radius:4px}.i-table-wrapper table tbody .i-table-expanded-row td .i-table-expanded-content pre{margin:0;font-family:monospace;font-size:1em;white-space:pre-wrap;word-wrap:break-word}.i-table-wrapper table tbody .i-table-group-header td{padding:12px 16px;font-weight:600;cursor:pointer;-webkit-user-select:none;user-select:none;transition:background-color .15s ease}.i-table-wrapper table tbody .i-table-group-header td:hover{opacity:.8}.i-table-wrapper table tbody .i-table-group-header .i-table-group-header-content{display:flex;align-items:center;gap:8px}.i-table-wrapper table tbody .i-table-group-header .i-table-group-header-content .i-table-group-toggle-icon{font-size:.9em;transition:transform .15s ease}.i-table-wrapper table tbody .i-table-group-header .i-table-group-header-content .i-table-group-label{flex:1;font-size:1.1em}.i-table-wrapper table tbody .i-table-group-header .i-table-group-header-content .i-table-group-count{opacity:.7;font-size:.9em;font-weight:400}.i-table-wrapper table tbody .i-table-group-columns-header th{font-size:.95em;font-weight:600;padding:10px 16px}.i-table-wrapper table tbody .i-table-group-row td{padding-left:32px}.i-table-wrapper table tbody .i-table-group-row td:first-child{padding-left:16px}.i-table-wrapper .i-table-selection-header,.i-table-wrapper .i-table-selection-cell,.i-table-wrapper .i-table-expand-header,.i-table-wrapper .i-table-expand-cell{width:50px;text-align:center}.i-table-wrapper .i-table-actions-header,.i-table-wrapper .i-table-actions-cell{width:auto;white-space:nowrap}.i-table-wrapper .i-table-actions-header .i-table-actions,.i-table-wrapper .i-table-actions-cell .i-table-actions{display:flex;gap:4px;justify-content:flex-end}.i-table-wrapper .i-table-column-resizer{position:absolute;right:0;top:50%;transform:translateY(-50%);width:4px;height:60%;cursor:col-resize;opacity:0;transition:opacity .15s ease,background-color .15s ease}.i-table-wrapper .i-table-column-resizer:hover{opacity:1}.i-severity-icon.success,.i-table-cell-success .i-severity-icon,.i-severity-text.success,.i-table-cell-success .i-severity-text{color:var(--color-success)}.i-severity-icon.info,.i-table-cell-info .i-severity-icon,.i-severity-text.info,.i-table-cell-info .i-severity-text{color:var(--color-info)}.i-severity-icon.warning,.i-table-cell-warning .i-severity-icon,.i-severity-text.warning,.i-table-cell-warning .i-severity-text{color:var(--color-warning)}.i-severity-icon.danger,.i-table-cell-danger .i-severity-icon,.i-severity-text.danger,.i-table-cell-danger .i-severity-text{color:var(--color-danger)}.i-severity-icon.secondary,.i-table-cell-secondary .i-severity-icon,.i-severity-text.secondary,.i-table-cell-secondary .i-severity-text{color:var(--color-text-secondary)}.i-table-list-cell{display:flex;flex-direction:column;gap:4px;align-items:flex-start}.i-table-list-cell i-chip{display:block}.i-action-hidden{visibility:hidden;pointer-events:none}@media(max-width:768px){.i-table-wrapper .i-table-header{padding:8px 12px;flex-wrap:wrap}.i-table-wrapper .i-table-header .i-table-header-start{flex:1 1 100%;margin-bottom:8px}.i-table-wrapper .i-table-header .i-table-header-end{flex:1 1 100%;justify-content:flex-end}.i-table-wrapper .i-table-header .i-table-header-end .i-table-global-filter{flex:1;max-width:250px}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: CdkVirtualScrollViewport, selector: "cdk-virtual-scroll-viewport", inputs: ["orientation", "appendOnly"], outputs: ["scrolledIndexChange"] }, { kind: "directive", type: CdkVirtualForOf, selector: "[cdkVirtualFor][cdkVirtualForOf]", inputs: ["cdkVirtualForOf", "cdkVirtualForTrackBy", "cdkVirtualForTemplate", "cdkVirtualForTemplateCacheSize"] }, { kind: "directive", type: CdkFixedSizeVirtualScroll, selector: "cdk-virtual-scroll-viewport[itemSize]", inputs: ["itemSize", "minBufferPx", "maxBufferPx"] }, { kind: "component", type: IInputText, selector: "i-input-text", inputs: ["label", "type", "id", "fluid", "forceFloated", "hideText", "useFloatLabel", "placeholder", "externalInvalid", "externalErrorMessage", "backgroundStyle", "icon", "readonly", "disabled", "errorMessages"] }, { kind: "component", type: IButton, selector: "i-button", inputs: ["severity", "size", "type", "disabled", "outlined", "raised", "text", "icon", "fluid", "loading"], outputs: ["clicked"] }, { kind: "component", type: ICheckbox, selector: "i-checkbox", inputs: ["label", "id", "disabled", "readonly", "size", "indeterminate", "checked"], outputs: ["onChange"] }, { kind: "component", type: IChip, selector: "i-chip", inputs: ["label", "icon", "image", "removable", "removeIcon", "styleClass", "disabled"], outputs: ["onRemove"] }, { kind: "component", type: NoContentComponent, selector: "i-no-content", inputs: ["icon", "message"] }, { kind: "directive", type: TooltipDirective, selector: "[iTooltip]", inputs: ["iTooltip", "tooltipPosition", "tooltipDelay"] }, { kind: "pipe", type: i1$1.JsonPipe, name: "json" }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.3", type: ITable, isStandalone: true, selector: "i-table", inputs: { data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: false, transformFunction: null }, columns: { classPropertyName: "columns", publicName: "columns", isSignal: true, isRequired: false, transformFunction: null }, groupedData: { classPropertyName: "groupedData", publicName: "groupedData", isSignal: true, isRequired: false, transformFunction: null }, emptyMessage: { classPropertyName: "emptyMessage", publicName: "emptyMessage", isSignal: false, isRequired: false, transformFunction: null }, sortable: { classPropertyName: "sortable", publicName: "sortable", isSignal: false, isRequired: false, transformFunction: null }, sortField: { classPropertyName: "sortField", publicName: "sortField", isSignal: false, isRequired: false, transformFunction: null }, sortOrder: { classPropertyName: "sortOrder", publicName: "sortOrder", isSignal: false, isRequired: false, transformFunction: null }, filterable: { classPropertyName: "filterable", publicName: "filterable", isSignal: false, isRequired: false, transformFunction: null }, globalFilter: { classPropertyName: "globalFilter", publicName: "globalFilter", isSignal: false, isRequired: false, transformFunction: null }, filterDelay: { classPropertyName: "filterDelay", publicName: "filterDelay", isSignal: false, isRequired: false, transformFunction: null }, selectionMode: { classPropertyName: "selectionMode", publicName: "selectionMode", isSignal: false, isRequired: false, transformFunction: null }, selection: { classPropertyName: "selection", publicName: "selection", isSignal: false, isRequired: false, transformFunction: null }, dataKey: { classPropertyName: "dataKey", publicName: "dataKey", isSignal: false, isRequired: false, transformFunction: null }, showActions: { classPropertyName: "showActions", publicName: "showActions", isSignal: false, isRequired: false, transformFunction: null }, actions: { classPropertyName: "actions", publicName: "actions", isSignal: false, isRequired: false, transformFunction: null }, striped: { classPropertyName: "striped", publicName: "striped", isSignal: false, isRequired: false, transformFunction: null }, hoverable: { classPropertyName: "hoverable", publicName: "hoverable", isSignal: false, isRequired: false, transformFunction: null }, bordered: { classPropertyName: "bordered", publicName: "bordered", isSignal: false, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: false, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: false, isRequired: false, transformFunction: null }, scrollable: { classPropertyName: "scrollable", publicName: "scrollable", isSignal: false, isRequired: false, transformFunction: null }, scrollHeight: { classPropertyName: "scrollHeight", publicName: "scrollHeight", isSignal: false, isRequired: false, transformFunction: null }, height: { classPropertyName: "height", publicName: "height", isSignal: false, isRequired: false, transformFunction: null }, virtualScroll: { classPropertyName: "virtualScroll", publicName: "virtualScroll", isSignal: false, isRequired: false, transformFunction: null }, virtualScrollItemSize: { classPropertyName: "virtualScrollItemSize", publicName: "virtualScrollItemSize", isSignal: false, isRequired: false, transformFunction: null }, virtualScrollMinBufferPx: { classPropertyName: "virtualScrollMinBufferPx", publicName: "virtualScrollMinBufferPx", isSignal: false, isRequired: false, transformFunction: null }, virtualScrollMaxBufferPx: { classPropertyName: "virtualScrollMaxBufferPx", publicName: "virtualScrollMaxBufferPx", isSignal: false, isRequired: false, transformFunction: null }, resizableColumns: { classPropertyName: "resizableColumns", publicName: "resizableColumns", isSignal: false, isRequired: false, transformFunction: null }, reorderableColumns: { classPropertyName: "reorderableColumns", publicName: "reorderableColumns", isSignal: false, isRequired: false, transformFunction: null }, rowExpandable: { classPropertyName: "rowExpandable", publicName: "rowExpandable", isSignal: false, isRequired: false, transformFunction: null }, downloadable: { classPropertyName: "downloadable", publicName: "downloadable", isSignal: false, isRequired: false, transformFunction: null }, downloadMode: { classPropertyName: "downloadMode", publicName: "downloadMode", isSignal: false, isRequired: false, transformFunction: null }, downloadFormat: { classPropertyName: "downloadFormat", publicName: "downloadFormat", isSignal: false, isRequired: false, transformFunction: null }, downloadFilename: { classPropertyName: "downloadFilename", publicName: "downloadFilename", isSignal: false, isRequired: false, transformFunction: null } }, outputs: { onSort: "onSort", onFilter: "onFilter", selectionChange: "selectionChange", onSelectionChange: "onSelectionChange", onRowSelect: "onRowSelect", onRowUnselect: "onRowUnselect", onAction: "onAction", onRowExpand: "onRowExpand", onRowCollapse: "onRowCollapse", onDownload: "onDownload" }, host: { listeners: { "document:mousemove": "onColumnResize($event)", "document:mouseup": "onColumnResizeEnd()" } }, viewQueries: [{ propertyName: "virtualScrollViewport", first: true, predicate: CdkVirtualScrollViewport, descendants: true }], ngImport: i0, template: "<div class=\"i-table-wrapper\" [ngClass]=\"getTableClasses()\">\n  <!-- Table Header with ng-content, search, and download -->\n  @if (globalFilter || downloadable) {\n    <div class=\"i-table-header\">\n      <div class=\"i-table-header-start\">\n        <ng-content select=\"[header]\"></ng-content>\n      </div>\n      <div class=\"i-table-header-end\">\n        @if (globalFilter) {\n          <div class=\"i-table-global-filter\">\n            <i-input-text\n              [useFloatLabel]=\"false\"\n              placeholder=\"Search...\"\n              [ngModel]=\"globalFilterValue()\"\n              (ngModelChange)=\"onGlobalFilterInput($event)\"\n              [fluid]=\"false\"\n              [icon]=\"'pi pi-search'\"\n            ></i-input-text>\n          </div>\n        }\n        @if (downloadable) {\n          <div class=\"i-table-download\">\n            <i-button\n              severity=\"secondary\"\n              [text]=\"true\"\n              size=\"small\"\n              icon=\"pi pi-download\"\n              label=\"Download\"\n              (clicked)=\"handleDownload()\"\n            ></i-button>\n          </div>\n        }\n      </div>\n    </div>\n  }\n\n  <!-- Loading Overlay -->\n  @if (loading) {\n    <div class=\"i-table-loading-overlay\">\n      <i class=\"pi pi-spin pi-spinner i-table-loading-icon\"></i>\n    </div>\n  }\n\n  <!-- Scrollable Table Container -->\n  <div\n    class=\"i-table-container\"\n    [class.i-table-container--scrollable]=\"scrollable || height || scrollHeight\"\n    [class.i-table-container--virtual-scroll]=\"virtualScroll\"\n    [style.height]=\"virtualScroll ? height || scrollHeight || '400px' : null\"\n    [style.max-height]=\"!virtualScroll ? height || scrollHeight || null : null\"\n  >\n    <!-- Virtual Scroll Mode -->\n    @if (virtualScroll) {\n      <!-- Sticky Header Table (outside viewport) -->\n      <div class=\"i-table-virtual-header\">\n        <table class=\"i-table\">\n          <thead>\n            <!-- Column Filters Row -->\n            @if (filterable) {\n              <tr class=\"i-table-filter-row\">\n                @if (selectionMode === \"multiple\") {\n                  <th class=\"i-table-selection-header\"></th>\n                }\n                @if (rowExpandable) {\n                  <th class=\"i-table-expand-header\"></th>\n                }\n                @for (\n                  column of columns();\n                  track trackByColumn($index, column)\n                ) {\n                  @if (column.filterable !== false) {\n                    <th [style.width]=\"getColumnWidth(column)\">\n                      <input\n                        type=\"text\"\n                        class=\"i-table-column-filter\"\n                        placeholder=\"Filter...\"\n                        [ngModel]=\"columnFilters()[column.field] || ''\"\n                        (ngModelChange)=\"\n                          onColumnFilterInput(column.field, $event)\n                        \"\n                      />\n                    </th>\n                  } @else {\n                    <th [style.width]=\"getColumnWidth(column)\"></th>\n                  }\n                }\n                @if (showActions && actions.length > 0) {\n                  <th class=\"i-table-actions-header\"></th>\n                }\n              </tr>\n            }\n\n            <!-- Column Headers Row -->\n            <tr>\n              @if (selectionMode === \"multiple\") {\n                <th class=\"i-table-selection-header\">\n                  <i-checkbox\n                    [checked]=\"areAllRowsSelected()\"\n                    [indeterminate]=\"areSomeRowsSelected()\"\n                    (onChange)=\"toggleAllSelection()\"\n                  ></i-checkbox>\n                </th>\n              }\n              @if (rowExpandable) {\n                <th class=\"i-table-expand-header\"></th>\n              }\n              @for (column of columns(); track trackByColumn($index, column)) {\n                <th\n                  [style.width]=\"getColumnWidth(column)\"\n                  [style.text-align]=\"column.align || 'left'\"\n                  [class.i-table-sortable-column]=\"sortable && column.sortable\"\n                  [class.i-table-sorted]=\"sortField === column.field\"\n                  (click)=\"onSortColumn(column)\"\n                >\n                  <div class=\"i-table-header-content\">\n                    <span class=\"i-table-header-text\">{{ column.header }}</span>\n                    @if (sortable && column.sortable) {\n                      <i\n                        [class]=\"getSortIcon(column)\"\n                        class=\"i-table-sort-icon\"\n                      ></i>\n                    }\n                  </div>\n                  @if (resizableColumns) {\n                    <span\n                      class=\"i-table-column-resizer\"\n                      (mousedown)=\"onColumnResizeStart($event, column)\"\n                    ></span>\n                  }\n                </th>\n              }\n              @if (showActions && actions.length > 0) {\n                <th class=\"i-table-actions-header\">Actions</th>\n              }\n            </tr>\n          </thead>\n        </table>\n      </div>\n\n      <!-- Virtual Scroll Viewport (body only) -->\n      <cdk-virtual-scroll-viewport\n        [itemSize]=\"virtualScrollItemSize\"\n        [minBufferPx]=\"virtualScrollMinBufferPx\"\n        [maxBufferPx]=\"virtualScrollMaxBufferPx\"\n        class=\"i-table-virtual-viewport\"\n      >\n        <table class=\"i-table i-table-virtual-body\">\n          <tbody>\n            @if (processedData().length === 0) {\n              <tr class=\"i-table-empty-row\">\n                <td\n                  [attr.colspan]=\"\n                    columns().length +\n                    (selectionMode === 'multiple' ? 1 : 0) +\n                    (rowExpandable ? 1 : 0) +\n                    (showActions && actions.length > 0 ? 1 : 0)\n                  \"\n                >\n                  <i-no-content />\n                </td>\n              </tr>\n            }\n            <!-- Virtual Scroll Rows -->\n            <tr\n              *cdkVirtualFor=\"\n                let row of processedData();\n                let rowIndex = index;\n                trackBy: trackByRow\n              \"\n              [style.height.px]=\"virtualScrollItemSize\"\n              [class.i-table-row-odd]=\"rowIndex % 2 !== 0\"\n              [class.i-table-row-selected]=\"isRowSelected(row)\"\n              (click)=\"toggleRowSelection(row)\"\n            >\n              @if (selectionMode === \"multiple\") {\n                <td class=\"i-table-selection-cell\">\n                  <i-checkbox\n                    [checked]=\"isRowSelected(row)\"\n                    (onChange)=\"toggleRowSelection(row)\"\n                    (click)=\"$event.stopPropagation()\"\n                  ></i-checkbox>\n                </td>\n              }\n              @if (rowExpandable) {\n                <td class=\"i-table-expand-cell\">\n                  <i-button\n                    severity=\"secondary\"\n                    [text]=\"true\"\n                    size=\"small\"\n                    [icon]=\"\n                      isRowExpanded(row)\n                        ? 'pi pi-chevron-down'\n                        : 'pi pi-chevron-right'\n                    \"\n                    (clicked)=\"toggleRowExpansion(row, $event)\"\n                  ></i-button>\n                </td>\n              }\n              @for (column of columns(); track trackByColumn($index, column)) {\n                <td\n                  [style.text-align]=\"column.align || 'left'\"\n                  [style.width]=\"getColumnWidth(column)\"\n                  [class]=\"\n                    getCellSeverity(row, column)\n                      ? 'i-table-cell-' + getCellSeverity(row, column)\n                      : ''\n                  \"\n                >\n                  @if (isIconColumn(column)) {\n                    <i\n                      [class]=\"getCellIcon(row, column)\"\n                      [class.i-severity-icon]=\"getCellSeverity(row, column)\"\n                      [style.font-size]=\"column.iconSize || '1rem'\"\n                    ></i>\n                  } @else if (isListColumn(column)) {\n                    <div class=\"i-table-list-cell\">\n                      @for (item of getCellListItems(row, column); track item) {\n                        <i-chip [label]=\"item\"></i-chip>\n                      }\n                    </div>\n                  } @else {\n                    <span\n                      [class.i-severity-text]=\"getCellSeverity(row, column)\"\n                    >\n                      {{\n                        formatCellValue(getCellValue(row, column.field), column)\n                      }}\n                    </span>\n                  }\n                </td>\n              }\n              @if (showActions && actions.length > 0) {\n                <td class=\"i-table-actions-cell\">\n                  <div class=\"i-table-actions\">\n                    @for (action of actions; track action.id) {\n                      <i-button\n                        [severity]=\"action.severity || 'secondary'\"\n                        [text]=\"true\"\n                        size=\"small\"\n                        [icon]=\"action.icon || ''\"\n                        [disabled]=\"isActionDisabled(action, row)\"\n                        [iTooltip]=\"getActionTooltip(action, row)\"\n                        [class.i-action-hidden]=\"!isActionVisible(action, row)\"\n                        (clicked)=\"onActionClick(action, row, $event)\"\n                      >\n                        @if (action.label) {\n                          {{ action.label }}\n                        }\n                      </i-button>\n                    }\n                  </div>\n                </td>\n              }\n            </tr>\n          </tbody>\n        </table>\n      </cdk-virtual-scroll-viewport>\n    } @else {\n      <!-- Non-Virtual Scroll Table -->\n      <table class=\"i-table\">\n        <!-- Table Header (sticky when scrollable) -->\n        <thead>\n          <!-- Column Filters Row -->\n          @if (filterable) {\n            <tr class=\"i-table-filter-row\">\n              @if (selectionMode === \"multiple\") {\n                <th class=\"i-table-selection-header\"></th>\n              }\n              @if (rowExpandable) {\n                <th class=\"i-table-expand-header\"></th>\n              }\n              @for (column of columns(); track trackByColumn($index, column)) {\n                @if (column.filterable !== false) {\n                  <th [style.width]=\"getColumnWidth(column)\">\n                    <input\n                      type=\"text\"\n                      class=\"i-table-column-filter\"\n                      placeholder=\"Filter...\"\n                      [ngModel]=\"columnFilters()[column.field] || ''\"\n                      (ngModelChange)=\"\n                        onColumnFilterInput(column.field, $event)\n                      \"\n                    />\n                  </th>\n                } @else {\n                  <th [style.width]=\"getColumnWidth(column)\"></th>\n                }\n              }\n              @if (showActions && actions.length > 0) {\n                <th class=\"i-table-actions-header\"></th>\n              }\n            </tr>\n          }\n\n          <!-- Column Headers Row -->\n          <tr>\n            @if (selectionMode === \"multiple\") {\n              <th class=\"i-table-selection-header\">\n                <i-checkbox\n                  [checked]=\"areAllRowsSelected()\"\n                  [indeterminate]=\"areSomeRowsSelected()\"\n                  (onChange)=\"toggleAllSelection()\"\n                ></i-checkbox>\n              </th>\n            }\n            @if (rowExpandable) {\n              <th class=\"i-table-expand-header\"></th>\n            }\n            @for (column of columns(); track trackByColumn($index, column)) {\n              <th\n                [style.width]=\"getColumnWidth(column)\"\n                [style.text-align]=\"column.align || 'left'\"\n                [class.i-table-sortable-column]=\"sortable && column.sortable\"\n                [class.i-table-sorted]=\"sortField === column.field\"\n                (click)=\"onSortColumn(column)\"\n              >\n                <div class=\"i-table-header-content\">\n                  <span class=\"i-table-header-text\">{{ column.header }}</span>\n                  @if (sortable && column.sortable) {\n                    <i\n                      [class]=\"getSortIcon(column)\"\n                      class=\"i-table-sort-icon\"\n                    ></i>\n                  }\n                </div>\n                @if (resizableColumns) {\n                  <span\n                    class=\"i-table-column-resizer\"\n                    (mousedown)=\"onColumnResizeStart($event, column)\"\n                  ></span>\n                }\n              </th>\n            }\n            @if (showActions && actions.length > 0) {\n              <th class=\"i-table-actions-header\">Actions</th>\n            }\n          </tr>\n        </thead>\n\n        <!-- Table Body - Grouped Mode -->\n        @if (isGroupedMode()) {\n          <tbody>\n            @for (group of groupedData(); track $index) {\n              <!-- Group Header Row -->\n              <tr class=\"i-table-group-header\" [ngClass]=\"group.styleClass\">\n                <td\n                  [attr.colspan]=\"\n                    (getGroupColumns(group).length || columns().length) +\n                    (selectionMode === 'multiple' ? 1 : 0) +\n                    (rowExpandable ? 1 : 0) +\n                    (showActions && actions.length > 0 ? 1 : 0)\n                  \"\n                  (click)=\"toggleGroupExpansion(group.label)\"\n                >\n                  <div class=\"i-table-group-header-content\">\n                    <i\n                      [class]=\"\n                        isGroupExpanded(group.label)\n                          ? 'pi pi-chevron-down'\n                          : 'pi pi-chevron-right'\n                      \"\n                      class=\"i-table-group-toggle-icon\"\n                    ></i>\n                    <span class=\"i-table-group-label\">{{ group.label }}</span>\n                    <span class=\"i-table-group-count\"\n                      >({{ group.data.length }})</span\n                    >\n                  </div>\n                </td>\n              </tr>\n\n              <!-- Group Column Headers (when expanded) -->\n              @if (isGroupExpanded(group.label) && group.columns) {\n                <tr class=\"i-table-group-columns-header\">\n                  @if (selectionMode === \"multiple\") {\n                    <th class=\"i-table-selection-header\"></th>\n                  }\n                  @if (rowExpandable) {\n                    <th class=\"i-table-expand-header\"></th>\n                  }\n                  @for (\n                    column of getGroupColumns(group);\n                    track trackByColumn($index, column)\n                  ) {\n                    <th\n                      [style.width]=\"getColumnWidth(column)\"\n                      [style.text-align]=\"column.align || 'left'\"\n                    >\n                      {{ column.header }}\n                    </th>\n                  }\n                  @if (showActions && actions.length > 0) {\n                    <th class=\"i-table-actions-header\">Actions</th>\n                  }\n                </tr>\n              }\n\n              <!-- Group Data Rows (when expanded) -->\n              @if (isGroupExpanded(group.label)) {\n                @if (group.data.length === 0) {\n                  <tr class=\"i-table-empty-row\">\n                    <td\n                      [attr.colspan]=\"\n                        (getGroupColumns(group).length || columns().length) +\n                        (selectionMode === 'multiple' ? 1 : 0) +\n                        (rowExpandable ? 1 : 0) +\n                        (showActions && actions.length > 0 ? 1 : 0)\n                      \"\n                    >\n                      <i-no-content />\n                    </td>\n                  </tr>\n                } @else {\n                  @for (row of group.data; track trackByRow($index, row)) {\n                    <tr\n                      class=\"i-table-group-row\"\n                      [class.i-table-row-odd]=\"$odd\"\n                      [class.i-table-row-selected]=\"isRowSelected(row)\"\n                      (click)=\"toggleRowSelection(row)\"\n                    >\n                      @if (selectionMode === \"multiple\") {\n                        <td class=\"i-table-selection-cell\">\n                          <i-checkbox\n                            [checked]=\"isRowSelected(row)\"\n                            (onChange)=\"toggleRowSelection(row)\"\n                            (click)=\"$event.stopPropagation()\"\n                          ></i-checkbox>\n                        </td>\n                      }\n                      @if (rowExpandable) {\n                        <td class=\"i-table-expand-cell\">\n                          <i-button\n                            severity=\"secondary\"\n                            [text]=\"true\"\n                            size=\"small\"\n                            [icon]=\"\n                              isRowExpanded(row)\n                                ? 'pi pi-chevron-down'\n                                : 'pi pi-chevron-right'\n                            \"\n                            (clicked)=\"toggleRowExpansion(row, $event)\"\n                          ></i-button>\n                        </td>\n                      }\n                      @for (\n                        column of getGroupColumns(group);\n                        track trackByColumn($index, column)\n                      ) {\n                        <td\n                          [style.text-align]=\"column.align || 'left'\"\n                          [style.width]=\"getColumnWidth(column)\"\n                          [class]=\"\n                            getCellSeverity(row, column)\n                              ? 'i-table-cell-' + getCellSeverity(row, column)\n                              : ''\n                          \"\n                        >\n                          @if (isIconColumn(column)) {\n                            <i\n                              [class]=\"getCellIcon(row, column)\"\n                              [class.i-severity-icon]=\"\n                                getCellSeverity(row, column)\n                              \"\n                              [style.font-size]=\"column.iconSize || '1rem'\"\n                            ></i>\n                          } @else if (isListColumn(column)) {\n                            <div class=\"i-table-list-cell\">\n                              @for (\n                                item of getCellListItems(row, column);\n                                track item\n                              ) {\n                                <i-chip [label]=\"item\"></i-chip>\n                              }\n                            </div>\n                          } @else {\n                            <span\n                              [class.i-severity-text]=\"\n                                getCellSeverity(row, column)\n                              \"\n                            >\n                              {{\n                                formatCellValue(\n                                  getCellValue(row, column.field),\n                                  column\n                                )\n                              }}\n                            </span>\n                          }\n                        </td>\n                      }\n                      @if (showActions && actions.length > 0) {\n                        <td class=\"i-table-actions-cell\">\n                          <div class=\"i-table-actions\">\n                            @for (action of actions; track action.id) {\n                              <i-button\n                                [severity]=\"action.severity || 'secondary'\"\n                                [text]=\"true\"\n                                size=\"small\"\n                                [icon]=\"action.icon || ''\"\n                                [disabled]=\"isActionDisabled(action, row)\"\n                                [iTooltip]=\"getActionTooltip(action, row)\"\n                                [class.i-action-hidden]=\"\n                                  !isActionVisible(action, row)\n                                \"\n                                (clicked)=\"onActionClick(action, row, $event)\"\n                              >\n                                @if (action.label) {\n                                  {{ action.label }}\n                                }\n                              </i-button>\n                            }\n                          </div>\n                        </td>\n                      }\n                    </tr>\n                    <!-- Expanded Row Content -->\n                    @if (rowExpandable && isRowExpanded(row)) {\n                      <tr class=\"i-table-expanded-row\">\n                        <td\n                          [attr.colspan]=\"\n                            (getGroupColumns(group).length ||\n                              columns().length) +\n                            (selectionMode === 'multiple' ? 1 : 0) +\n                            1 +\n                            (showActions && actions.length > 0 ? 1 : 0)\n                          \"\n                        >\n                          <div class=\"i-table-expanded-content\">\n                            <pre>{{ row | json }}</pre>\n                          </div>\n                        </td>\n                      </tr>\n                    }\n                  }\n                }\n              }\n            }\n          </tbody>\n        } @else {\n          <!-- Table Body - Regular Mode -->\n          <tbody>\n            @if (processedData().length === 0) {\n              <tr class=\"i-table-empty-row\">\n                <td\n                  [attr.colspan]=\"\n                    columns().length +\n                    (selectionMode === 'multiple' ? 1 : 0) +\n                    (rowExpandable ? 1 : 0) +\n                    (showActions && actions.length > 0 ? 1 : 0)\n                  \"\n                >\n                  <i-no-content />\n                </td>\n              </tr>\n            } @else {\n              @for (\n                row of processedData();\n                track trackByRow($index, row);\n                let rowIndex = $index\n              ) {\n                <tr\n                  [class.i-table-row-odd]=\"$odd\"\n                  [class.i-table-row-selected]=\"isRowSelected(row)\"\n                  (click)=\"toggleRowSelection(row)\"\n                >\n                  @if (selectionMode === \"multiple\") {\n                    <td class=\"i-table-selection-cell\">\n                      <i-checkbox\n                        [checked]=\"isRowSelected(row)\"\n                        (onChange)=\"toggleRowSelection(row)\"\n                        (click)=\"$event.stopPropagation()\"\n                      ></i-checkbox>\n                    </td>\n                  }\n                  @if (rowExpandable) {\n                    <td class=\"i-table-expand-cell\">\n                      <i-button\n                        severity=\"secondary\"\n                        [text]=\"true\"\n                        size=\"small\"\n                        [icon]=\"\n                          isRowExpanded(row)\n                            ? 'pi pi-chevron-down'\n                            : 'pi pi-chevron-right'\n                        \"\n                        (clicked)=\"toggleRowExpansion(row, $event)\"\n                      ></i-button>\n                    </td>\n                  }\n                  @for (\n                    column of columns();\n                    track trackByColumn($index, column)\n                  ) {\n                    <td\n                      [style.text-align]=\"column.align || 'left'\"\n                      [style.width]=\"getColumnWidth(column)\"\n                      [class]=\"\n                        getCellSeverity(row, column)\n                          ? 'i-table-cell-' + getCellSeverity(row, column)\n                          : ''\n                      \"\n                    >\n                      @if (isIconColumn(column)) {\n                        <i\n                          [class]=\"getCellIcon(row, column)\"\n                          [class.i-severity-icon]=\"getCellSeverity(row, column)\"\n                          [style.font-size]=\"column.iconSize || '1rem'\"\n                        ></i>\n                      } @else if (isListColumn(column)) {\n                        <div class=\"i-table-list-cell\">\n                          @for (\n                            item of getCellListItems(row, column);\n                            track item\n                          ) {\n                            <i-chip [label]=\"item\"></i-chip>\n                          }\n                        </div>\n                      } @else {\n                        <span\n                          [class.i-severity-text]=\"getCellSeverity(row, column)\"\n                        >\n                          {{\n                            formatCellValue(\n                              getCellValue(row, column.field),\n                              column\n                            )\n                          }}\n                        </span>\n                      }\n                    </td>\n                  }\n                  @if (showActions && actions.length > 0) {\n                    <td class=\"i-table-actions-cell\">\n                      <div class=\"i-table-actions\">\n                        @for (action of actions; track action.id) {\n                          <i-button\n                            [severity]=\"action.severity || 'secondary'\"\n                            [text]=\"true\"\n                            size=\"small\"\n                            [icon]=\"action.icon || ''\"\n                            [disabled]=\"isActionDisabled(action, row)\"\n                            [iTooltip]=\"getActionTooltip(action, row)\"\n                            [class.i-action-hidden]=\"\n                              !isActionVisible(action, row)\n                            \"\n                            (clicked)=\"onActionClick(action, row, $event)\"\n                          >\n                            @if (action.label) {\n                              {{ action.label }}\n                            }\n                          </i-button>\n                        }\n                      </div>\n                    </td>\n                  }\n                </tr>\n                <!-- Expanded Row Content -->\n                @if (rowExpandable && isRowExpanded(row)) {\n                  <tr class=\"i-table-expanded-row\">\n                    <td\n                      [attr.colspan]=\"\n                        columns().length +\n                        (selectionMode === 'multiple' ? 1 : 0) +\n                        1 +\n                        (showActions && actions.length > 0 ? 1 : 0)\n                      \"\n                    >\n                      <div class=\"i-table-expanded-content\">\n                        <pre>{{ row | json }}</pre>\n                      </div>\n                    </td>\n                  </tr>\n                }\n              }\n            }\n          </tbody>\n        }\n      </table>\n    }\n  </div>\n</div>\n", styles: [".i-table-wrapper{color:var(--color-text-primary);background:var(--color-component-background)}.i-table-wrapper .i-table-header{background:var(--surface-section);border-bottom:1px solid var(--surface-border)}.i-table-wrapper .i-table-global-filter .i-input-text{background:var(--surface-ground)}.i-table-wrapper .i-table-loading-overlay{background:#ffffffb3}.i-table-wrapper .i-table-loading-overlay .i-table-loading-icon{color:var(--color-primary)}.i-table-wrapper table thead tr{background:var(--color-component-background)}.i-table-wrapper table thead tr th{color:var(--color-text-primary);border-bottom:1px solid var(--surface-border)}.i-table-wrapper table thead tr th.i-table-sortable-column{cursor:pointer}.i-table-wrapper table thead tr th.i-table-sortable-column:hover{background:var(--surface-hover)}.i-table-wrapper table thead tr th.i-table-sorted{background:var(--surface-hover);color:var(--color-primary)}.i-table-wrapper table thead tr th .i-table-sort-icon{color:var(--color-text-secondary)}.i-table-wrapper table thead tr th.i-table-sorted .i-table-sort-icon{color:var(--color-primary)}.i-table-wrapper table thead .i-table-filter-row th{background:var(--color-component-background)}.i-table-wrapper table thead .i-table-filter-row .i-table-column-filter{border:1px solid var(--surface-border);background:var(--surface-ground);color:var(--color-text-primary)}.i-table-wrapper table thead .i-table-filter-row .i-table-column-filter:focus{border-color:var(--color-primary);box-shadow:0 2px 10px #0003;outline:none}.i-table-wrapper table thead .i-table-filter-row .i-table-column-filter::placeholder{color:var(--color-text-tertiary)}.i-table-wrapper table tbody tr{background:var(--color-component-background);border-bottom:1px solid var(--surface-border)}.i-table-wrapper table tbody tr td{color:var(--color-text-primary)}.i-table-wrapper table tbody tr.i-table-row-odd{background:var(--color-component-background)}.i-table-wrapper table tbody tr.i-table-row-selected{background:var(--surface-hover);color:var(--color-primary)}.i-table-wrapper table tbody .i-table-expanded-row{background:var(--color-component-background)}.i-table-wrapper table tbody .i-table-expanded-row .i-table-expanded-content{background:var(--surface-ground);border:1px solid var(--surface-border)}.i-table-wrapper table tbody .i-table-empty-row td{background:var(--color-component-background)}.i-table-wrapper table tbody .i-table-group-header{background:var(--color-component-background);border-bottom:2px solid var(--surface-border)}.i-table-wrapper table tbody .i-table-group-header td{color:var(--color-text-primary)}.i-table-wrapper table tbody .i-table-group-header:hover{background:var(--surface-hover)}.i-table-wrapper table tbody .i-table-group-header .i-table-group-toggle-icon,.i-table-wrapper table tbody .i-table-group-header .i-table-group-count{color:var(--color-text-secondary)}.i-table-wrapper table tbody .i-table-group-columns-header{background:var(--color-component-background);border-bottom:1px solid var(--surface-border)}.i-table-wrapper table tbody .i-table-group-columns-header th{color:var(--color-text-primary);border-bottom:1px solid var(--surface-border)}.i-table-wrapper table tbody .i-table-group-row,.i-table-wrapper table tbody .i-table-group-row.i-table-row-odd{background:var(--color-component-background)}.i-table-wrapper table tbody .i-table-group-row.i-table-row-selected{background:var(--surface-hover);color:var(--color-primary)}.i-table-wrapper.i-table--bordered table,.i-table-wrapper.i-table--bordered table th,.i-table-wrapper.i-table--bordered table td{border:1px solid var(--surface-border)}.i-table-wrapper.i-table--hoverable table tbody tr:not(.i-table-empty-row):not(.i-table-expanded-row):not(.i-table-group-header):not(.i-table-group-columns-header):hover{background:var(--surface-hover)}.i-table-wrapper.i-table--hoverable table tbody tr:not(.i-table-empty-row):not(.i-table-expanded-row):not(.i-table-group-header):not(.i-table-group-columns-header).i-table-row-selected:hover{background:var(--surface-hover)}.i-table-wrapper .i-table-column-resizer{background:var(--surface-border)}.i-table-wrapper .i-table-column-resizer:hover{background:var(--color-primary)}.i-table-wrapper{position:relative;display:block;border-radius:4px;overflow:visible}.i-table-wrapper.i-table--small table thead th{padding:8px 12px;font-size:13px}.i-table-wrapper.i-table--small table tbody td{padding:6px 12px;font-size:1em}.i-table-wrapper.i-table--small table .i-table-filter-row th{padding:4px 12px}.i-table-wrapper.i-table--large table thead th,.i-table-wrapper.i-table--large table tbody td{padding:16px 20px;font-size:16px}.i-table-wrapper.i-table--large table .i-table-filter-row th{padding:12px 20px}.i-table-wrapper.i-table--scrollable table{table-layout:fixed}.i-table-wrapper.i-table--loading{pointer-events:none;-webkit-user-select:none;user-select:none}.i-table-wrapper .i-table-header{display:flex;justify-content:space-between;align-items:center;padding:12px 16px;gap:16px}.i-table-wrapper .i-table-header .i-table-header-start{flex:0 1 auto;display:flex;align-items:center}.i-table-wrapper .i-table-header .i-table-header-end{flex:0 1 auto;display:flex;align-items:center;gap:12px;margin-left:auto}.i-table-wrapper .i-table-header .i-table-header-end .i-table-global-filter{width:250px}.i-table-wrapper .i-table-header .i-table-header-end .i-table-download{flex-shrink:0}.i-table-wrapper .i-table-loading-overlay{position:absolute;inset:0;z-index:10;display:flex;align-items:center;justify-content:center}.i-table-wrapper .i-table-loading-overlay .i-table-loading-icon{font-size:32px}.i-table-wrapper .i-table-container{overflow-x:auto}.i-table-wrapper .i-table-container::-webkit-scrollbar-track{background:transparent;border-radius:3px}.i-table-wrapper .i-table-container::-webkit-scrollbar-thumb{background:#0003;border-radius:3px;transition:background .2s ease}.i-table-wrapper .i-table-container::-webkit-scrollbar-thumb:hover{background:#00000059}.i-table-wrapper .i-table-container::-webkit-scrollbar-thumb:active{background:#00000080}.i-table-wrapper .i-table-container::-webkit-scrollbar-corner{background:transparent}.i-table-wrapper .i-table-container{scrollbar-width:thin;scrollbar-color:rgba(0,0,0,.2) transparent;scroll-behavior:smooth}.i-table-wrapper .i-table-container::-webkit-scrollbar-thumb{background:var(--color-text-secondary);opacity:.4}.i-table-wrapper .i-table-container::-webkit-scrollbar-thumb:hover{background:var(--color-text-primary);opacity:.6}.i-table-wrapper .i-table-container::-webkit-scrollbar-thumb:active{background:var(--color-primary);opacity:.7}.i-table-wrapper .i-table-container{scrollbar-color:var(--color-text-secondary) transparent}.i-table-wrapper .i-table-container::-webkit-scrollbar{width:6px;height:6px}.i-table-wrapper .i-table-container::-webkit-scrollbar-track{background:#0000000d;border-radius:3px;margin:2px 0}.i-table-wrapper .i-table-container::-webkit-scrollbar-thumb{border-radius:3px;min-height:20px;background:var(--color-text-secondary);opacity:.6}.i-table-wrapper .i-table-container::-webkit-scrollbar-thumb:hover{background:var(--color-text-primary);opacity:.8}.i-table-wrapper .i-table-container::-webkit-scrollbar-thumb:active{background:var(--color-primary);opacity:.9}.i-table-wrapper .i-table-container{scrollbar-width:thin;scrollbar-color:var(--color-text-secondary) rgba(0,0,0,.05)}.i-table-wrapper .i-table-container--scrollable{overflow-y:auto}.i-table-wrapper .i-table-container--scrollable thead{position:sticky;top:0;z-index:2}.i-table-wrapper .i-table-container--virtual-scroll{overflow:hidden;display:flex;flex-direction:column}.i-table-wrapper .i-table-container--virtual-scroll .i-table-virtual-header{flex-shrink:0;overflow:hidden;background:var(--color-surface-50)}.i-table-wrapper .i-table-container--virtual-scroll .i-table-virtual-header table{width:100%;border-collapse:collapse;table-layout:fixed}.i-table-wrapper .i-table-container--virtual-scroll .i-table-virtual-viewport{flex:1;min-height:0;width:100%}.i-table-wrapper .i-table-container--virtual-scroll .i-table-virtual-viewport .cdk-virtual-scroll-content-wrapper{width:100%}.i-table-wrapper .i-table-container--virtual-scroll .i-table-virtual-body{width:100%;border-collapse:collapse;table-layout:fixed}.i-table-wrapper .i-table-container--virtual-scroll table{display:table;width:100%;border-collapse:collapse}.i-table-wrapper .i-table-container--virtual-scroll tbody{display:table-row-group}.i-table-wrapper .i-table-container--virtual-scroll tr{display:table-row;box-sizing:border-box}.i-table-wrapper .i-table-container--virtual-scroll td,.i-table-wrapper .i-table-container--virtual-scroll th{display:table-cell}.i-table-wrapper table{width:100%;border-collapse:collapse;table-layout:auto}.i-table-wrapper table thead tr th{position:relative;padding:12px 16px;font-weight:600;text-align:left;white-space:nowrap;-webkit-user-select:none;user-select:none}.i-table-wrapper table thead tr th .i-table-header-content{display:flex;align-items:center;gap:8px}.i-table-wrapper table thead tr th .i-table-header-content .i-table-header-text{flex:1}.i-table-wrapper table thead tr th .i-table-sort-icon{font-size:1em;opacity:.6;transition:opacity .15s ease,color .15s ease}.i-table-wrapper table thead tr th.i-table-sortable-column{transition:background-color .15s ease}.i-table-wrapper table thead tr th.i-table-sortable-column .i-table-sort-icon{opacity:.4}.i-table-wrapper table thead tr th.i-table-sortable-column:hover .i-table-sort-icon,.i-table-wrapper table thead tr th.i-table-sortable-column.i-table-sorted .i-table-sort-icon{opacity:1}.i-table-wrapper table thead tr th:hover .i-table-column-resizer{opacity:.5}.i-table-wrapper table thead .i-table-filter-row th{padding:8px 16px}.i-table-wrapper table thead .i-table-filter-row th .i-table-column-filter{width:100%;padding:6px 10px;font-size:1em;border-radius:4px;transition:border-color .15s ease,box-shadow .15s ease}.i-table-wrapper table tbody{display:table-row-group}.i-table-wrapper table tbody tr{transition:background-color .15s ease}.i-table-wrapper table tbody tr td{padding:12px 16px;vertical-align:middle}.i-table-wrapper table tbody .i-table-empty-row td{padding:40px 16px;text-align:center}.i-table-wrapper table tbody .i-table-expanded-row td{padding:0}.i-table-wrapper table tbody .i-table-expanded-row td .i-table-expanded-content{padding:16px;margin:8px 16px;border-radius:4px}.i-table-wrapper table tbody .i-table-expanded-row td .i-table-expanded-content pre{margin:0;font-family:monospace;font-size:1em;white-space:pre-wrap;word-wrap:break-word}.i-table-wrapper table tbody .i-table-group-header td{padding:12px 16px;font-weight:600;cursor:pointer;-webkit-user-select:none;user-select:none;transition:background-color .15s ease}.i-table-wrapper table tbody .i-table-group-header td:hover{opacity:.8}.i-table-wrapper table tbody .i-table-group-header .i-table-group-header-content{display:flex;align-items:center;gap:8px}.i-table-wrapper table tbody .i-table-group-header .i-table-group-header-content .i-table-group-toggle-icon{font-size:.9em;transition:transform .15s ease}.i-table-wrapper table tbody .i-table-group-header .i-table-group-header-content .i-table-group-label{flex:1;font-size:1.1em}.i-table-wrapper table tbody .i-table-group-header .i-table-group-header-content .i-table-group-count{opacity:.7;font-size:.9em;font-weight:400}.i-table-wrapper table tbody .i-table-group-columns-header th{font-size:.95em;font-weight:600;padding:10px 16px}.i-table-wrapper table tbody .i-table-group-row td{padding-left:32px}.i-table-wrapper table tbody .i-table-group-row td:first-child{padding-left:16px}.i-table-wrapper .i-table-selection-header,.i-table-wrapper .i-table-selection-cell,.i-table-wrapper .i-table-expand-header,.i-table-wrapper .i-table-expand-cell{width:50px;text-align:center}.i-table-wrapper .i-table-actions-header,.i-table-wrapper .i-table-actions-cell{width:auto;white-space:nowrap}.i-table-wrapper .i-table-actions-header .i-table-actions,.i-table-wrapper .i-table-actions-cell .i-table-actions{display:flex;gap:4px;justify-content:flex-end}.i-table-wrapper .i-table-column-resizer{position:absolute;right:0;top:50%;transform:translateY(-50%);width:4px;height:60%;cursor:col-resize;opacity:0;transition:opacity .15s ease,background-color .15s ease}.i-table-wrapper .i-table-column-resizer:hover{opacity:1}.i-severity-icon.success,.i-table-cell-success .i-severity-icon,.i-severity-text.success,.i-table-cell-success .i-severity-text{color:var(--color-success)}.i-severity-icon.info,.i-table-cell-info .i-severity-icon,.i-severity-text.info,.i-table-cell-info .i-severity-text{color:var(--color-info)}.i-severity-icon.warning,.i-table-cell-warning .i-severity-icon,.i-severity-text.warning,.i-table-cell-warning .i-severity-text{color:var(--color-warning)}.i-severity-icon.danger,.i-table-cell-danger .i-severity-icon,.i-severity-text.danger,.i-table-cell-danger .i-severity-text{color:var(--color-danger)}.i-severity-icon.secondary,.i-table-cell-secondary .i-severity-icon,.i-severity-text.secondary,.i-table-cell-secondary .i-severity-text{color:var(--color-text-secondary)}.i-table-list-cell{display:flex;flex-direction:column;gap:4px;align-items:flex-start}.i-table-list-cell i-chip{display:block}.i-action-hidden{visibility:hidden;pointer-events:none}@media(max-width:768px){.i-table-wrapper .i-table-header{padding:8px 12px;flex-wrap:wrap}.i-table-wrapper .i-table-header .i-table-header-start{flex:1 1 100%;margin-bottom:8px}.i-table-wrapper .i-table-header .i-table-header-end{flex:1 1 100%;justify-content:flex-end}.i-table-wrapper .i-table-header .i-table-header-end .i-table-global-filter{flex:1;max-width:250px}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: CdkVirtualScrollViewport, selector: "cdk-virtual-scroll-viewport", inputs: ["orientation", "appendOnly"], outputs: ["scrolledIndexChange"] }, { kind: "directive", type: CdkVirtualForOf, selector: "[cdkVirtualFor][cdkVirtualForOf]", inputs: ["cdkVirtualForOf", "cdkVirtualForTrackBy", "cdkVirtualForTemplate", "cdkVirtualForTemplateCacheSize"] }, { kind: "directive", type: CdkFixedSizeVirtualScroll, selector: "cdk-virtual-scroll-viewport[itemSize]", inputs: ["itemSize", "minBufferPx", "maxBufferPx"] }, { kind: "component", type: IInputText, selector: "i-input-text", inputs: ["label", "type", "id", "name", "fluid", "forceFloated", "hideText", "useFloatLabel", "placeholder", "autocomplete", "externalInvalid", "externalErrorMessage", "backgroundStyle", "icon", "readonly", "disabled", "errorMessages"] }, { kind: "component", type: IButton, selector: "i-button", inputs: ["severity", "size", "type", "disabled", "outlined", "raised", "text", "icon", "fluid", "loading"], outputs: ["clicked"] }, { kind: "component", type: ICheckbox, selector: "i-checkbox", inputs: ["label", "id", "disabled", "readonly", "size", "indeterminate", "checked"], outputs: ["onChange"] }, { kind: "component", type: IChip, selector: "i-chip", inputs: ["label", "icon", "image", "removable", "removeIcon", "styleClass", "disabled"], outputs: ["onRemove"] }, { kind: "component", type: NoContentComponent, selector: "i-no-content", inputs: ["icon", "message"] }, { kind: "directive", type: TooltipDirective, selector: "[iTooltip]", inputs: ["iTooltip", "tooltipPosition", "tooltipDelay"] }, { kind: "pipe", type: i1$1.JsonPipe, name: "json" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: ITable, decorators: [{
             type: Component,