@fovestta2/web-angular 1.0.4 → 1.0.6

package/fesm2022/fovestta2-web-angular.mjs

@@ -6,7 +6,6 @@ import * as i2 from '@angular/forms';
 import { ReactiveFormsModule, FormControl, NG_VALUE_ACCESSOR, FormsModule, Validators } from '@angular/forms';
 import { Validator } from '@fovestta2/validation-engine';
 import * as i1$1 from '@angular/platform-browser';
-import { Validator as Validator$1 } from '@fovestta/validation-engine';
 import { distinctUntilChanged } from 'rxjs/operators';
 
 class FvEntryFieldComponent {
@@ -46,6 +45,16 @@ class FvEntryFieldComponent {
     ngOnDestroy() {
         this.subscription?.unsubscribe();
     }
+    ngOnChanges(changes) {
+        if (changes['disabled'] && this.control) {
+            if (this.disabled) {
+                this.control.disable({ emitEvent: false });
+            }
+            else {
+                this.control.enable({ emitEvent: false });
+            }
+        }
+    }
     validateValue(value) {
         if (!this.schema)
             return;
@@ -103,11 +112,11 @@ class FvEntryFieldComponent {
         return errorMessages[this.errorMessage] || this.errorMessage;
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: FvEntryFieldComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: FvEntryFieldComponent, isStandalone: true, selector: "fv-entry-field", inputs: { label: "label", placeholder: "placeholder", schema: "schema", control: "control", disabled: "disabled", readonly: "readonly", type: "type", allowAlphabetsOnly: "allowAlphabetsOnly", maxLength: "maxLength" }, outputs: { valueChange: "valueChange", blur: "blur", focus: "focus" }, ngImport: i0, template: "<div class=\"fv-entry-field-container\">\r\n  <label *ngIf=\"label\" class=\"fv-label\" [class.fv-label-required]=\"isRequired()\">\r\n    {{ label }}\r\n    <span *ngIf=\"isRequired()\" class=\"fv-required-asterisk\">*</span>\r\n  </label>\r\n\r\n  <input [type]=\"type\" [formControl]=\"control\" [placeholder]=\"placeholder\" [disabled]=\"disabled\" [readonly]=\"readonly\"\r\n    (blur)=\"onBlur($event)\" (focus)=\"onFocus($event)\" (input)=\"onInput($event)\" [attr.maxlength]=\"maxLength\"\r\n    class=\"fv-input\" [class.fv-input-error]=\"errorMessage\" [class.fv-input-disabled]=\"disabled\" />\r\n\r\n  <span *ngIf=\"errorMessage\" class=\"fv-error-message\">\r\n    {{ getErrorMessage() }}\r\n  </span>\r\n</div>", styles: [".fv-entry-field-container{display:flex;flex-direction:column;margin-bottom:16px;width:100%}.fv-label{margin-bottom:6px;font-size:14px;font-weight:500;color:var(--fv-text-primary, #333333);display:flex;align-items:center;gap:4px}.fv-required-asterisk{color:var(--fv-error-color, #dc3545);font-weight:700}.fv-input{padding:10px 12px;border:1px solid var(--fv-border-default, #cccccc);border-radius:4px;font-size:14px;font-family:inherit;transition:all .2s ease-in-out;background-color:var(--fv-background-default, #ffffff);color:var(--fv-text-primary, #333333)}.fv-input:focus{outline:none;border-color:var(--fv-border-focus, #007bff);box-shadow:0 0 0 3px var(--fv-focus-shadow, rgba(0, 123, 255, .1))}.fv-input:hover:not(:disabled):not(:focus){border-color:var(--fv-border-hover, #999999)}.fv-input-error{border-color:var(--fv-border-error, #dc3545)!important}.fv-input-error:focus{box-shadow:0 0 0 3px var(--fv-error-shadow, rgba(220, 53, 69, .1))}.fv-input-disabled{background-color:var(--fv-background-disabled, #f5f5f5);cursor:not-allowed;opacity:.6}.fv-input::placeholder{color:var(--fv-text-placeholder, #999999);opacity:1}.fv-error-message{margin-top:4px;font-size:12px;color:var(--fv-error-color, #dc3545);display:flex;align-items:center;gap:4px}.fv-error-message:before{content:\"\\26a0\";font-size:14px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: FvEntryFieldComponent, isStandalone: true, selector: "fv-entry-field", inputs: { label: "label", placeholder: "placeholder", schema: "schema", control: "control", disabled: "disabled", readonly: "readonly", type: "type", allowAlphabetsOnly: "allowAlphabetsOnly", maxLength: "maxLength" }, outputs: { valueChange: "valueChange", blur: "blur", focus: "focus" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"fv-entry-field-container\">\r\n  <label *ngIf=\"label\" class=\"fv-label\" [class.fv-label-required]=\"isRequired()\">\r\n    {{ label }}\r\n    <span *ngIf=\"isRequired()\" class=\"fv-required-asterisk\">*</span>\r\n  </label>\r\n\r\n  <input [type]=\"type\" [formControl]=\"control\" [placeholder]=\"placeholder\" [readonly]=\"readonly\" (blur)=\"onBlur($event)\"\r\n    (focus)=\"onFocus($event)\" (input)=\"onInput($event)\" [attr.maxlength]=\"maxLength\" class=\"fv-input\"\r\n    [class.fv-input-error]=\"errorMessage && control.touched\" [class.fv-input-disabled]=\"disabled\" />\r\n\r\n  <span *ngIf=\"errorMessage && control.touched\" class=\"fv-error-message\">\r\n    {{ getErrorMessage() }}\r\n  </span>\r\n</div>", styles: ["@import\"https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap\";*{font-family:Poppins,sans-serif}.fv-entry-field-container{display:flex;flex-direction:column;margin-bottom:16px;width:100%}.fv-label{margin-bottom:6px;font-size:14px;font-weight:600;color:#151d48;display:flex;align-items:center;gap:4px}.fv-required-asterisk{color:#e74c3c;font-weight:700}.fv-input{padding:5px 10px;border:1px solid #8CBBA8;border-radius:8px;font-size:14px;font-weight:400;font-family:Poppins,sans-serif;transition:all .2s ease-in-out;background-color:#fff;color:#1f2b41;box-sizing:border-box;height:34px;width:100%;min-width:0}.fv-input:focus{outline:none;border-color:#3498db;box-shadow:0 0 0 3px #3498db1a}.fv-input:hover:not(:disabled):not(:focus){border-color:#3498db}.fv-input-error{border-color:#dc3545!important}.fv-input-error:focus{box-shadow:0 0 0 3px #dc35451a}.fv-input-disabled{background-color:#ecf0f1;cursor:not-allowed;opacity:.6}.fv-input::placeholder{color:#999;opacity:1}.fv-error-message{margin-top:4px;font-size:12px;color:#e74c3c;display:flex;align-items:center;gap:4px}.fv-error-message:before{content:\"\\26a0\";font-size:14px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: FvEntryFieldComponent, decorators: [{
             type: Component,
-            args: [{ standalone: true, imports: [CommonModule, ReactiveFormsModule], selector: 'fv-entry-field', template: "<div class=\"fv-entry-field-container\">\r\n  <label *ngIf=\"label\" class=\"fv-label\" [class.fv-label-required]=\"isRequired()\">\r\n    {{ label }}\r\n    <span *ngIf=\"isRequired()\" class=\"fv-required-asterisk\">*</span>\r\n  </label>\r\n\r\n  <input [type]=\"type\" [formControl]=\"control\" [placeholder]=\"placeholder\" [disabled]=\"disabled\" [readonly]=\"readonly\"\r\n    (blur)=\"onBlur($event)\" (focus)=\"onFocus($event)\" (input)=\"onInput($event)\" [attr.maxlength]=\"maxLength\"\r\n    class=\"fv-input\" [class.fv-input-error]=\"errorMessage\" [class.fv-input-disabled]=\"disabled\" />\r\n\r\n  <span *ngIf=\"errorMessage\" class=\"fv-error-message\">\r\n    {{ getErrorMessage() }}\r\n  </span>\r\n</div>", styles: [".fv-entry-field-container{display:flex;flex-direction:column;margin-bottom:16px;width:100%}.fv-label{margin-bottom:6px;font-size:14px;font-weight:500;color:var(--fv-text-primary, #333333);display:flex;align-items:center;gap:4px}.fv-required-asterisk{color:var(--fv-error-color, #dc3545);font-weight:700}.fv-input{padding:10px 12px;border:1px solid var(--fv-border-default, #cccccc);border-radius:4px;font-size:14px;font-family:inherit;transition:all .2s ease-in-out;background-color:var(--fv-background-default, #ffffff);color:var(--fv-text-primary, #333333)}.fv-input:focus{outline:none;border-color:var(--fv-border-focus, #007bff);box-shadow:0 0 0 3px var(--fv-focus-shadow, rgba(0, 123, 255, .1))}.fv-input:hover:not(:disabled):not(:focus){border-color:var(--fv-border-hover, #999999)}.fv-input-error{border-color:var(--fv-border-error, #dc3545)!important}.fv-input-error:focus{box-shadow:0 0 0 3px var(--fv-error-shadow, rgba(220, 53, 69, .1))}.fv-input-disabled{background-color:var(--fv-background-disabled, #f5f5f5);cursor:not-allowed;opacity:.6}.fv-input::placeholder{color:var(--fv-text-placeholder, #999999);opacity:1}.fv-error-message{margin-top:4px;font-size:12px;color:var(--fv-error-color, #dc3545);display:flex;align-items:center;gap:4px}.fv-error-message:before{content:\"\\26a0\";font-size:14px}\n"] }]
+            args: [{ standalone: true, imports: [CommonModule, ReactiveFormsModule], selector: 'fv-entry-field', template: "<div class=\"fv-entry-field-container\">\r\n  <label *ngIf=\"label\" class=\"fv-label\" [class.fv-label-required]=\"isRequired()\">\r\n    {{ label }}\r\n    <span *ngIf=\"isRequired()\" class=\"fv-required-asterisk\">*</span>\r\n  </label>\r\n\r\n  <input [type]=\"type\" [formControl]=\"control\" [placeholder]=\"placeholder\" [readonly]=\"readonly\" (blur)=\"onBlur($event)\"\r\n    (focus)=\"onFocus($event)\" (input)=\"onInput($event)\" [attr.maxlength]=\"maxLength\" class=\"fv-input\"\r\n    [class.fv-input-error]=\"errorMessage && control.touched\" [class.fv-input-disabled]=\"disabled\" />\r\n\r\n  <span *ngIf=\"errorMessage && control.touched\" class=\"fv-error-message\">\r\n    {{ getErrorMessage() }}\r\n  </span>\r\n</div>", styles: ["@import\"https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap\";*{font-family:Poppins,sans-serif}.fv-entry-field-container{display:flex;flex-direction:column;margin-bottom:16px;width:100%}.fv-label{margin-bottom:6px;font-size:14px;font-weight:600;color:#151d48;display:flex;align-items:center;gap:4px}.fv-required-asterisk{color:#e74c3c;font-weight:700}.fv-input{padding:5px 10px;border:1px solid #8CBBA8;border-radius:8px;font-size:14px;font-weight:400;font-family:Poppins,sans-serif;transition:all .2s ease-in-out;background-color:#fff;color:#1f2b41;box-sizing:border-box;height:34px;width:100%;min-width:0}.fv-input:focus{outline:none;border-color:#3498db;box-shadow:0 0 0 3px #3498db1a}.fv-input:hover:not(:disabled):not(:focus){border-color:#3498db}.fv-input-error{border-color:#dc3545!important}.fv-input-error:focus{box-shadow:0 0 0 3px #dc35451a}.fv-input-disabled{background-color:#ecf0f1;cursor:not-allowed;opacity:.6}.fv-input::placeholder{color:#999;opacity:1}.fv-error-message{margin-top:4px;font-size:12px;color:#e74c3c;display:flex;align-items:center;gap:4px}.fv-error-message:before{content:\"\\26a0\";font-size:14px}\n"] }]
         }], propDecorators: { label: [{
                 type: Input
             }], placeholder: [{
@@ -168,6 +177,16 @@ class FvDateFieldComponent {
     ngOnDestroy() {
         this.subscription?.unsubscribe();
     }
+    ngOnChanges(changes) {
+        if (changes['disabled'] && this.control) {
+            if (this.disabled) {
+                this.control.disable({ emitEvent: false });
+            }
+            else {
+                this.control.enable({ emitEvent: false });
+            }
+        }
+    }
     extractConstraintsFromSchema() {
         if (!this.schema?.rules)
             return;
@@ -225,11 +244,11 @@ class FvDateFieldComponent {
         return errorMessages[this.errorMessage] || this.errorMessage;
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: FvDateFieldComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: FvDateFieldComponent, isStandalone: true, selector: "fv-date-field", inputs: { label: "label", schema: "schema", control: "control", disabled: "disabled", readonly: "readonly", min: "min", max: "max" }, outputs: { valueChange: "valueChange", blur: "blur", focus: "focus" }, ngImport: i0, template: "<div class=\"fv-field-container\">\r\n  <label *ngIf=\"label\" class=\"fv-label\">\r\n    {{ label }} <span *ngIf=\"isRequired()\" class=\"required\">*</span>\r\n  </label>\r\n\r\n  <input type=\"date\" [formControl]=\"control\" class=\"fv-input\" [class.error]=\"!!errorMessage\" [attr.min]=\"min\"\r\n    [attr.max]=\"max\" [readonly]=\"readonly\" (blur)=\"onBlur($event)\" (focus)=\"onFocus($event)\" />\r\n\r\n  <div *ngIf=\"errorMessage\" class=\"fv-error-message\">\r\n    {{ getErrorMessage() }}\r\n  </div>\r\n</div>", styles: [".fv-field-container{display:flex;flex-direction:column;margin-bottom:1rem}.fv-label{font-size:.875rem;font-weight:500;margin-bottom:.5rem;color:#374151}.required{color:#ef4444}.fv-input{padding:.5rem .75rem;border:1px solid #d1d5db;border-radius:.375rem;font-size:1rem;line-height:1.5;transition:border-color .15s ease-in-out,box-shadow .15s ease-in-out}.fv-input:focus{outline:none;border-color:#3b82f6;box-shadow:0 0 0 3px #3b82f61a}.fv-input.error{border-color:#ef4444}.fv-input.error:focus{box-shadow:0 0 0 3px #ef44441a}.fv-error-message{margin-top:.25rem;font-size:.75rem;color:#ef4444}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: FvDateFieldComponent, isStandalone: true, selector: "fv-date-field", inputs: { label: "label", schema: "schema", control: "control", disabled: "disabled", readonly: "readonly", min: "min", max: "max" }, outputs: { valueChange: "valueChange", blur: "blur", focus: "focus" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"fv-field-container\">\r\n  <label *ngIf=\"label\" class=\"fv-label\">\r\n    {{ label }} <span *ngIf=\"isRequired()\" class=\"required\">*</span>\r\n  </label>\r\n\r\n  <input type=\"date\" [formControl]=\"control\" class=\"fv-input\" [class.error]=\"!!errorMessage\" [attr.min]=\"min\"\r\n    [attr.max]=\"max\" [readonly]=\"readonly\" (blur)=\"onBlur($event)\" (focus)=\"onFocus($event)\" />\r\n\r\n  <div *ngIf=\"errorMessage\" class=\"fv-error-message\">\r\n    {{ getErrorMessage() }}\r\n  </div>\r\n</div>", styles: ["@import\"https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap\";*{font-family:Poppins,sans-serif}.fv-date-field-container{display:flex;flex-direction:column;margin-bottom:16px;width:100%}.fv-label{margin-bottom:6px;font-size:14px;font-weight:600;color:#151d48;display:flex;align-items:center;gap:4px}.fv-required-asterisk{color:#e74c3c;font-weight:700}.fv-input{padding:5px 10px;border:1px solid #8CBBA8;border-radius:8px;font-size:14px;font-weight:400;font-family:Poppins,sans-serif;transition:all .2s ease-in-out;background-color:#fff;color:#1f2b41;box-sizing:border-box;width:100%;height:34px;min-width:0}.fv-input:focus{outline:none;border-color:#3498db;box-shadow:0 0 0 3px #3498db1a}.fv-input:hover:not(:disabled):not(:focus){border-color:#3498db}.fv-input-error{border-color:#dc3545!important}.fv-input-error:focus{box-shadow:0 0 0 3px #dc35451a}.fv-input-disabled{background-color:#ecf0f1;cursor:not-allowed;opacity:.6}.fv-error-message{margin-top:4px;font-size:12px;color:#e74c3c;display:flex;align-items:center;gap:4px}.fv-error-message:before{content:\"\\26a0\";font-size:14px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: FvDateFieldComponent, decorators: [{
             type: Component,
-            args: [{ standalone: true, imports: [CommonModule, ReactiveFormsModule], selector: 'fv-date-field', template: "<div class=\"fv-field-container\">\r\n  <label *ngIf=\"label\" class=\"fv-label\">\r\n    {{ label }} <span *ngIf=\"isRequired()\" class=\"required\">*</span>\r\n  </label>\r\n\r\n  <input type=\"date\" [formControl]=\"control\" class=\"fv-input\" [class.error]=\"!!errorMessage\" [attr.min]=\"min\"\r\n    [attr.max]=\"max\" [readonly]=\"readonly\" (blur)=\"onBlur($event)\" (focus)=\"onFocus($event)\" />\r\n\r\n  <div *ngIf=\"errorMessage\" class=\"fv-error-message\">\r\n    {{ getErrorMessage() }}\r\n  </div>\r\n</div>", styles: [".fv-field-container{display:flex;flex-direction:column;margin-bottom:1rem}.fv-label{font-size:.875rem;font-weight:500;margin-bottom:.5rem;color:#374151}.required{color:#ef4444}.fv-input{padding:.5rem .75rem;border:1px solid #d1d5db;border-radius:.375rem;font-size:1rem;line-height:1.5;transition:border-color .15s ease-in-out,box-shadow .15s ease-in-out}.fv-input:focus{outline:none;border-color:#3b82f6;box-shadow:0 0 0 3px #3b82f61a}.fv-input.error{border-color:#ef4444}.fv-input.error:focus{box-shadow:0 0 0 3px #ef44441a}.fv-error-message{margin-top:.25rem;font-size:.75rem;color:#ef4444}\n"] }]
+            args: [{ standalone: true, imports: [CommonModule, ReactiveFormsModule], selector: 'fv-date-field', template: "<div class=\"fv-field-container\">\r\n  <label *ngIf=\"label\" class=\"fv-label\">\r\n    {{ label }} <span *ngIf=\"isRequired()\" class=\"required\">*</span>\r\n  </label>\r\n\r\n  <input type=\"date\" [formControl]=\"control\" class=\"fv-input\" [class.error]=\"!!errorMessage\" [attr.min]=\"min\"\r\n    [attr.max]=\"max\" [readonly]=\"readonly\" (blur)=\"onBlur($event)\" (focus)=\"onFocus($event)\" />\r\n\r\n  <div *ngIf=\"errorMessage\" class=\"fv-error-message\">\r\n    {{ getErrorMessage() }}\r\n  </div>\r\n</div>", styles: ["@import\"https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap\";*{font-family:Poppins,sans-serif}.fv-date-field-container{display:flex;flex-direction:column;margin-bottom:16px;width:100%}.fv-label{margin-bottom:6px;font-size:14px;font-weight:600;color:#151d48;display:flex;align-items:center;gap:4px}.fv-required-asterisk{color:#e74c3c;font-weight:700}.fv-input{padding:5px 10px;border:1px solid #8CBBA8;border-radius:8px;font-size:14px;font-weight:400;font-family:Poppins,sans-serif;transition:all .2s ease-in-out;background-color:#fff;color:#1f2b41;box-sizing:border-box;width:100%;height:34px;min-width:0}.fv-input:focus{outline:none;border-color:#3498db;box-shadow:0 0 0 3px #3498db1a}.fv-input:hover:not(:disabled):not(:focus){border-color:#3498db}.fv-input-error{border-color:#dc3545!important}.fv-input-error:focus{box-shadow:0 0 0 3px #dc35451a}.fv-input-disabled{background-color:#ecf0f1;cursor:not-allowed;opacity:.6}.fv-error-message{margin-top:4px;font-size:12px;color:#e74c3c;display:flex;align-items:center;gap:4px}.fv-error-message:before{content:\"\\26a0\";font-size:14px}\n"] }]
         }], propDecorators: { label: [{
                 type: Input
             }], schema: [{
@@ -264,6 +283,7 @@ class FvMonthYearFieldComponent {
     blur = new EventEmitter();
     focus = new EventEmitter();
     errorMessage = null;
+    displayValue = '';
     subscription;
     ngOnInit() {
         if (!this.control) {
@@ -273,15 +293,27 @@ class FvMonthYearFieldComponent {
         this.extractConstraintsFromSchema();
         this.subscription = this.control.valueChanges.subscribe((value) => {
             this.validateValue(value);
+            this.updateDisplayValue(value);
             this.valueChange.emit(value);
         });
         if (this.control.value) {
             this.validateValue(this.control.value);
+            this.updateDisplayValue(this.control.value);
         }
     }
     ngOnDestroy() {
         this.subscription?.unsubscribe();
     }
+    ngOnChanges(changes) {
+        if (changes['disabled'] && this.control) {
+            if (this.disabled) {
+                this.control.disable({ emitEvent: false });
+            }
+            else {
+                this.control.enable({ emitEvent: false });
+            }
+        }
+    }
     extractConstraintsFromSchema() {
         if (!this.schema?.rules)
             return;
@@ -337,12 +369,35 @@ class FvMonthYearFieldComponent {
         };
         return errorMessages[this.errorMessage] || this.errorMessage;
     }
+    updateDisplayValue(value) {
+        if (!value) {
+            this.displayValue = '';
+            return;
+        }
+        const date = new Date(value + '-01'); // Ensure it's treated as YYYY-MM-01
+        if (isNaN(date.getTime())) {
+            this.displayValue = value;
+            return;
+        }
+        const monthNames = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];
+        this.displayValue = `${monthNames[date.getMonth()]} ${date.getFullYear()}`;
+    }
+    openPicker(picker) {
+        if (this.disabled || this.readonly)
+            return;
+        if (picker.showPicker) {
+            picker.showPicker();
+        }
+        else {
+            picker.click();
+        }
+    }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: FvMonthYearFieldComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: FvMonthYearFieldComponent, isStandalone: true, selector: "fv-month-year-field", inputs: { label: "label", schema: "schema", control: "control", disabled: "disabled", readonly: "readonly", min: "min", max: "max" }, outputs: { valueChange: "valueChange", blur: "blur", focus: "focus" }, ngImport: i0, template: "<div class=\"fv-field-container\">\r\n    <label *ngIf=\"label\" class=\"fv-label\">\r\n        {{ label }} <span *ngIf=\"isRequired()\" class=\"required\">*</span>\r\n    </label>\r\n\r\n    <input type=\"month\" [formControl]=\"control\" class=\"fv-input\" [class.error]=\"!!errorMessage\" [attr.min]=\"min\"\r\n        [attr.max]=\"max\" [readonly]=\"readonly\" (blur)=\"onBlur($event)\" (focus)=\"onFocus($event)\" />\r\n\r\n    <div *ngIf=\"errorMessage\" class=\"fv-error-message\">\r\n        {{ getErrorMessage() }}\r\n    </div>\r\n</div>", styles: [".fv-field-container{display:flex;flex-direction:column;margin-bottom:1rem}.fv-label{font-size:.875rem;font-weight:500;margin-bottom:.5rem;color:#374151}.required{color:#ef4444}.fv-input{padding:.5rem .75rem;border:1px solid #d1d5db;border-radius:.375rem;font-size:1rem;line-height:1.5;transition:border-color .15s ease-in-out,box-shadow .15s ease-in-out}.fv-input:focus{outline:none;border-color:#3b82f6;box-shadow:0 0 0 3px #3b82f61a}.fv-input.error{border-color:#ef4444}.fv-input.error:focus{box-shadow:0 0 0 3px #ef44441a}.fv-error-message{margin-top:.25rem;font-size:.75rem;color:#ef4444}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: FvMonthYearFieldComponent, isStandalone: true, selector: "fv-month-year-field", inputs: { label: "label", schema: "schema", control: "control", disabled: "disabled", readonly: "readonly", min: "min", max: "max" }, outputs: { valueChange: "valueChange", blur: "blur", focus: "focus" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"fv-field-container\">\r\n    <label *ngIf=\"label\" class=\"fv-label\">\r\n        {{ label }} <span *ngIf=\"isRequired()\" class=\"required\">*</span>\r\n    </label>\r\n\r\n    <div class=\"fv-input-wrapper\" (click)=\"openPicker(monthPicker)\">\r\n        <input type=\"text\" [value]=\"displayValue\" class=\"fv-input\" [class.error]=\"!!errorMessage\"\r\n            placeholder=\"Select Month\" readonly />\r\n        <input #monthPicker type=\"month\" [formControl]=\"control\" class=\"fv-hidden-picker\" [attr.min]=\"min\"\r\n            [attr.max]=\"max\" (blur)=\"onBlur($event)\" (focus)=\"onFocus($event)\" />\r\n        <span class=\"fv-calendar-icon\">\r\n            <svg viewBox=\"0 0 24 24\" width=\"18\" height=\"18\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"\r\n                stroke-linecap=\"round\" stroke-linejoin=\"round\">\r\n                <rect x=\"3\" y=\"4\" width=\"18\" height=\"18\" rx=\"2\" ry=\"2\"></rect>\r\n                <line x1=\"16\" y1=\"2\" x2=\"16\" y2=\"6\"></line>\r\n                <line x1=\"8\" y1=\"2\" x2=\"8\" y2=\"6\"></line>\r\n                <line x1=\"3\" y1=\"10\" x2=\"21\" y2=\"10\"></line>\r\n            </svg>\r\n        </span>\r\n    </div>\r\n\r\n    <div *ngIf=\"errorMessage\" class=\"fv-error-message\">\r\n        {{ getErrorMessage() }}\r\n    </div>\r\n</div>", styles: ["@import\"https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap\";*{font-family:Poppins,sans-serif}.fv-field-container{display:flex;flex-direction:column;margin-bottom:16px;width:100%}.fv-label{font-size:14px;font-weight:600;color:#151d48;margin-bottom:6px}.required{color:#e74c3c;margin-left:2px}.fv-input{padding:5px 35px 5px 10px;border:1px solid #8CBBA8;border-radius:8px;font-size:14px;font-weight:400;outline:none;width:100%;box-sizing:border-box;background-color:#fff;color:#1f2b41;transition:border-color .2s;height:34px;min-width:0;cursor:pointer}.fv-input-wrapper{position:relative;width:100%;cursor:pointer}.fv-hidden-picker{position:absolute;opacity:0;width:0;height:0;pointer-events:none}.fv-calendar-icon{position:absolute;right:10px;top:50%;transform:translateY(-50%);color:#666;pointer-events:none;display:flex;align-items:center}.fv-input:focus{border-color:#3498db;box-shadow:0 0 0 3px #3498db1a}.fv-input.error{border-color:#dc3545!important}.fv-error-message{margin-top:4px;font-size:12px;color:#e74c3c}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: FvMonthYearFieldComponent, decorators: [{
             type: Component,
-            args: [{ standalone: true, imports: [CommonModule, ReactiveFormsModule], selector: 'fv-month-year-field', template: "<div class=\"fv-field-container\">\r\n    <label *ngIf=\"label\" class=\"fv-label\">\r\n        {{ label }} <span *ngIf=\"isRequired()\" class=\"required\">*</span>\r\n    </label>\r\n\r\n    <input type=\"month\" [formControl]=\"control\" class=\"fv-input\" [class.error]=\"!!errorMessage\" [attr.min]=\"min\"\r\n        [attr.max]=\"max\" [readonly]=\"readonly\" (blur)=\"onBlur($event)\" (focus)=\"onFocus($event)\" />\r\n\r\n    <div *ngIf=\"errorMessage\" class=\"fv-error-message\">\r\n        {{ getErrorMessage() }}\r\n    </div>\r\n</div>", styles: [".fv-field-container{display:flex;flex-direction:column;margin-bottom:1rem}.fv-label{font-size:.875rem;font-weight:500;margin-bottom:.5rem;color:#374151}.required{color:#ef4444}.fv-input{padding:.5rem .75rem;border:1px solid #d1d5db;border-radius:.375rem;font-size:1rem;line-height:1.5;transition:border-color .15s ease-in-out,box-shadow .15s ease-in-out}.fv-input:focus{outline:none;border-color:#3b82f6;box-shadow:0 0 0 3px #3b82f61a}.fv-input.error{border-color:#ef4444}.fv-input.error:focus{box-shadow:0 0 0 3px #ef44441a}.fv-error-message{margin-top:.25rem;font-size:.75rem;color:#ef4444}\n"] }]
+            args: [{ standalone: true, imports: [CommonModule, ReactiveFormsModule], selector: 'fv-month-year-field', template: "<div class=\"fv-field-container\">\r\n    <label *ngIf=\"label\" class=\"fv-label\">\r\n        {{ label }} <span *ngIf=\"isRequired()\" class=\"required\">*</span>\r\n    </label>\r\n\r\n    <div class=\"fv-input-wrapper\" (click)=\"openPicker(monthPicker)\">\r\n        <input type=\"text\" [value]=\"displayValue\" class=\"fv-input\" [class.error]=\"!!errorMessage\"\r\n            placeholder=\"Select Month\" readonly />\r\n        <input #monthPicker type=\"month\" [formControl]=\"control\" class=\"fv-hidden-picker\" [attr.min]=\"min\"\r\n            [attr.max]=\"max\" (blur)=\"onBlur($event)\" (focus)=\"onFocus($event)\" />\r\n        <span class=\"fv-calendar-icon\">\r\n            <svg viewBox=\"0 0 24 24\" width=\"18\" height=\"18\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"\r\n                stroke-linecap=\"round\" stroke-linejoin=\"round\">\r\n                <rect x=\"3\" y=\"4\" width=\"18\" height=\"18\" rx=\"2\" ry=\"2\"></rect>\r\n                <line x1=\"16\" y1=\"2\" x2=\"16\" y2=\"6\"></line>\r\n                <line x1=\"8\" y1=\"2\" x2=\"8\" y2=\"6\"></line>\r\n                <line x1=\"3\" y1=\"10\" x2=\"21\" y2=\"10\"></line>\r\n            </svg>\r\n        </span>\r\n    </div>\r\n\r\n    <div *ngIf=\"errorMessage\" class=\"fv-error-message\">\r\n        {{ getErrorMessage() }}\r\n    </div>\r\n</div>", styles: ["@import\"https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap\";*{font-family:Poppins,sans-serif}.fv-field-container{display:flex;flex-direction:column;margin-bottom:16px;width:100%}.fv-label{font-size:14px;font-weight:600;color:#151d48;margin-bottom:6px}.required{color:#e74c3c;margin-left:2px}.fv-input{padding:5px 35px 5px 10px;border:1px solid #8CBBA8;border-radius:8px;font-size:14px;font-weight:400;outline:none;width:100%;box-sizing:border-box;background-color:#fff;color:#1f2b41;transition:border-color .2s;height:34px;min-width:0;cursor:pointer}.fv-input-wrapper{position:relative;width:100%;cursor:pointer}.fv-hidden-picker{position:absolute;opacity:0;width:0;height:0;pointer-events:none}.fv-calendar-icon{position:absolute;right:10px;top:50%;transform:translateY(-50%);color:#666;pointer-events:none;display:flex;align-items:center}.fv-input:focus{border-color:#3498db;box-shadow:0 0 0 3px #3498db1a}.fv-input.error{border-color:#dc3545!important}.fv-error-message{margin-top:4px;font-size:12px;color:#e74c3c}\n"] }]
         }], propDecorators: { label: [{
                 type: Input
             }], schema: [{
@@ -400,6 +455,16 @@ class FvNumberFieldComponent {
     ngOnDestroy() {
         this.subscription?.unsubscribe();
     }
+    ngOnChanges(changes) {
+        if (changes['disabled'] && this.control) {
+            if (this.disabled) {
+                this.control.disable({ emitEvent: false });
+            }
+            else {
+                this.control.enable({ emitEvent: false });
+            }
+        }
+    }
     validateValue(value) {
         if (!this.schema)
             return;
@@ -435,11 +500,11 @@ class FvNumberFieldComponent {
         return errorMessages[this.errorMessage] || this.errorMessage;
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: FvNumberFieldComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: FvNumberFieldComponent, isStandalone: true, selector: "fv-number-field", inputs: { label: "label", placeholder: "placeholder", schema: "schema", control: "control", disabled: "disabled", readonly: "readonly", min: "min", max: "max", step: "step" }, outputs: { valueChange: "valueChange", blur: "blur", focus: "focus" }, ngImport: i0, template: "<div class=\"fv-number-field-container\">\r\n  <label *ngIf=\"label\" class=\"fv-label\">\r\n    {{ label }}\r\n    <span *ngIf=\"isRequired()\" class=\"fv-required-asterisk\">*</span>\r\n  </label>\r\n\r\n  <input type=\"number\" [formControl]=\"control\" [placeholder]=\"placeholder\" [disabled]=\"disabled\" [readonly]=\"readonly\"\r\n    [min]=\"min\" [max]=\"max\" [step]=\"step\" (blur)=\"onBlur()\" (focus)=\"onFocus()\" class=\"fv-input\"\r\n    [class.fv-input-error]=\"errorMessage\" [class.fv-input-disabled]=\"disabled\" />\r\n\r\n  <span *ngIf=\"errorMessage\" class=\"fv-error-message\">\r\n    {{ getErrorMessage() }}\r\n  </span>\r\n</div>", styles: [".fv-number-field-container{display:flex;flex-direction:column;margin-bottom:16px;width:100%}.fv-label{margin-bottom:6px;font-size:14px;font-weight:500;color:var(--fv-text-primary, #333333);display:flex;align-items:center;gap:4px}.fv-required-asterisk{color:var(--fv-error-color, #dc3545);font-weight:700}.fv-input{padding:10px 12px;border:1px solid var(--fv-border-default, #cccccc);border-radius:4px;font-size:14px;font-family:inherit;transition:all .2s ease-in-out;background-color:var(--fv-background-default, #ffffff);color:var(--fv-text-primary, #333333)}.fv-input:focus{outline:none;border-color:var(--fv-border-focus, #007bff);box-shadow:0 0 0 3px var(--fv-focus-shadow, rgba(0, 123, 255, .1))}.fv-input:hover:not(:disabled):not(:focus){border-color:var(--fv-border-hover, #999999)}.fv-input-error{border-color:var(--fv-border-error, #dc3545)!important}.fv-input-error:focus{box-shadow:0 0 0 3px var(--fv-error-shadow, rgba(220, 53, 69, .1))}.fv-input-disabled{background-color:var(--fv-background-disabled, #f5f5f5);cursor:not-allowed;opacity:.6}.fv-error-message{margin-top:4px;font-size:12px;color:var(--fv-error-color, #dc3545);display:flex;align-items:center;gap:4px}.fv-error-message:before{content:\"\\26a0\";font-size:14px}.fv-input::-webkit-inner-spin-button,.fv-input::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}.fv-input[type=number]{-moz-appearance:textfield}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.MinValidator, selector: "input[type=number][min][formControlName],input[type=number][min][formControl],input[type=number][min][ngModel]", inputs: ["min"] }, { kind: "directive", type: i2.MaxValidator, selector: "input[type=number][max][formControlName],input[type=number][max][formControl],input[type=number][max][ngModel]", inputs: ["max"] }, { kind: "directive", type: i2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: FvNumberFieldComponent, isStandalone: true, selector: "fv-number-field", inputs: { label: "label", placeholder: "placeholder", schema: "schema", control: "control", disabled: "disabled", readonly: "readonly", min: "min", max: "max", step: "step" }, outputs: { valueChange: "valueChange", blur: "blur", focus: "focus" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"fv-number-field-container\">\r\n  <label *ngIf=\"label\" class=\"fv-label\">\r\n    {{ label }}\r\n    <span *ngIf=\"isRequired()\" class=\"fv-required-asterisk\">*</span>\r\n  </label>\r\n\r\n  <input type=\"number\" [formControl]=\"control\" [placeholder]=\"placeholder\" [readonly]=\"readonly\" [min]=\"min\" [max]=\"max\"\r\n    [step]=\"step\" (blur)=\"onBlur()\" (focus)=\"onFocus()\" class=\"fv-input\" [class.fv-input-error]=\"errorMessage\"\r\n    [class.fv-input-disabled]=\"disabled\" />\r\n\r\n  <span *ngIf=\"errorMessage\" class=\"fv-error-message\">\r\n    {{ getErrorMessage() }}\r\n  </span>\r\n</div>", styles: ["@import\"https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap\";*{font-family:Poppins,sans-serif}.fv-number-field-container{display:flex;flex-direction:column;margin-bottom:16px;width:100%}.fv-label{margin-bottom:6px;font-size:14px;font-weight:600;color:#151d48;display:flex;align-items:center;gap:4px}.fv-required-asterisk{color:#e74c3c;font-weight:700}.fv-input{padding:5px 10px;border:1px solid #8CBBA8;border-radius:8px;font-size:14px;font-weight:400;font-family:Poppins,sans-serif;transition:all .2s ease-in-out;background-color:#fff;color:#1f2b41;box-sizing:border-box;height:34px;width:100%;min-width:0}.fv-input:focus{outline:none;border-color:#3498db;box-shadow:0 0 0 3px #3498db1a}.fv-input:hover:not(:disabled):not(:focus){border-color:#3498db}.fv-input-error{border-color:#dc3545!important}.fv-input-error:focus{box-shadow:0 0 0 3px #dc35451a}.fv-input-disabled{background-color:#ecf0f1;cursor:not-allowed;opacity:.6}.fv-error-message{margin-top:4px;font-size:12px;color:#e74c3c;display:flex;align-items:center;gap:4px}.fv-error-message:before{content:\"\\26a0\";font-size:14px}.fv-input::-webkit-inner-spin-button,.fv-input::-webkit-outer-spin-button{-webkit-appearance:none;appearance:none;margin:0}.fv-input[type=number]{-moz-appearance:textfield;appearance:none}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.MinValidator, selector: "input[type=number][min][formControlName],input[type=number][min][formControl],input[type=number][min][ngModel]", inputs: ["min"] }, { kind: "directive", type: i2.MaxValidator, selector: "input[type=number][max][formControlName],input[type=number][max][formControl],input[type=number][max][ngModel]", inputs: ["max"] }, { kind: "directive", type: i2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: FvNumberFieldComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'fv-number-field', standalone: true, imports: [CommonModule, ReactiveFormsModule], template: "<div class=\"fv-number-field-container\">\r\n  <label *ngIf=\"label\" class=\"fv-label\">\r\n    {{ label }}\r\n    <span *ngIf=\"isRequired()\" class=\"fv-required-asterisk\">*</span>\r\n  </label>\r\n\r\n  <input type=\"number\" [formControl]=\"control\" [placeholder]=\"placeholder\" [disabled]=\"disabled\" [readonly]=\"readonly\"\r\n    [min]=\"min\" [max]=\"max\" [step]=\"step\" (blur)=\"onBlur()\" (focus)=\"onFocus()\" class=\"fv-input\"\r\n    [class.fv-input-error]=\"errorMessage\" [class.fv-input-disabled]=\"disabled\" />\r\n\r\n  <span *ngIf=\"errorMessage\" class=\"fv-error-message\">\r\n    {{ getErrorMessage() }}\r\n  </span>\r\n</div>", styles: [".fv-number-field-container{display:flex;flex-direction:column;margin-bottom:16px;width:100%}.fv-label{margin-bottom:6px;font-size:14px;font-weight:500;color:var(--fv-text-primary, #333333);display:flex;align-items:center;gap:4px}.fv-required-asterisk{color:var(--fv-error-color, #dc3545);font-weight:700}.fv-input{padding:10px 12px;border:1px solid var(--fv-border-default, #cccccc);border-radius:4px;font-size:14px;font-family:inherit;transition:all .2s ease-in-out;background-color:var(--fv-background-default, #ffffff);color:var(--fv-text-primary, #333333)}.fv-input:focus{outline:none;border-color:var(--fv-border-focus, #007bff);box-shadow:0 0 0 3px var(--fv-focus-shadow, rgba(0, 123, 255, .1))}.fv-input:hover:not(:disabled):not(:focus){border-color:var(--fv-border-hover, #999999)}.fv-input-error{border-color:var(--fv-border-error, #dc3545)!important}.fv-input-error:focus{box-shadow:0 0 0 3px var(--fv-error-shadow, rgba(220, 53, 69, .1))}.fv-input-disabled{background-color:var(--fv-background-disabled, #f5f5f5);cursor:not-allowed;opacity:.6}.fv-error-message{margin-top:4px;font-size:12px;color:var(--fv-error-color, #dc3545);display:flex;align-items:center;gap:4px}.fv-error-message:before{content:\"\\26a0\";font-size:14px}.fv-input::-webkit-inner-spin-button,.fv-input::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}.fv-input[type=number]{-moz-appearance:textfield}\n"] }]
+            args: [{ selector: 'fv-number-field', standalone: true, imports: [CommonModule, ReactiveFormsModule], template: "<div class=\"fv-number-field-container\">\r\n  <label *ngIf=\"label\" class=\"fv-label\">\r\n    {{ label }}\r\n    <span *ngIf=\"isRequired()\" class=\"fv-required-asterisk\">*</span>\r\n  </label>\r\n\r\n  <input type=\"number\" [formControl]=\"control\" [placeholder]=\"placeholder\" [readonly]=\"readonly\" [min]=\"min\" [max]=\"max\"\r\n    [step]=\"step\" (blur)=\"onBlur()\" (focus)=\"onFocus()\" class=\"fv-input\" [class.fv-input-error]=\"errorMessage\"\r\n    [class.fv-input-disabled]=\"disabled\" />\r\n\r\n  <span *ngIf=\"errorMessage\" class=\"fv-error-message\">\r\n    {{ getErrorMessage() }}\r\n  </span>\r\n</div>", styles: ["@import\"https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap\";*{font-family:Poppins,sans-serif}.fv-number-field-container{display:flex;flex-direction:column;margin-bottom:16px;width:100%}.fv-label{margin-bottom:6px;font-size:14px;font-weight:600;color:#151d48;display:flex;align-items:center;gap:4px}.fv-required-asterisk{color:#e74c3c;font-weight:700}.fv-input{padding:5px 10px;border:1px solid #8CBBA8;border-radius:8px;font-size:14px;font-weight:400;font-family:Poppins,sans-serif;transition:all .2s ease-in-out;background-color:#fff;color:#1f2b41;box-sizing:border-box;height:34px;width:100%;min-width:0}.fv-input:focus{outline:none;border-color:#3498db;box-shadow:0 0 0 3px #3498db1a}.fv-input:hover:not(:disabled):not(:focus){border-color:#3498db}.fv-input-error{border-color:#dc3545!important}.fv-input-error:focus{box-shadow:0 0 0 3px #dc35451a}.fv-input-disabled{background-color:#ecf0f1;cursor:not-allowed;opacity:.6}.fv-error-message{margin-top:4px;font-size:12px;color:#e74c3c;display:flex;align-items:center;gap:4px}.fv-error-message:before{content:\"\\26a0\";font-size:14px}.fv-input::-webkit-inner-spin-button,.fv-input::-webkit-outer-spin-button{-webkit-appearance:none;appearance:none;margin:0}.fv-input[type=number]{-moz-appearance:textfield;appearance:none}\n"] }]
         }], propDecorators: { label: [{
                 type: Input
             }], placeholder: [{
@@ -477,17 +542,27 @@ class FvCheckboxComponent {
             console.error('FvCheckbox: control is required');
         }
     }
+    ngOnChanges(changes) {
+        if (changes['disabled'] && this.control) {
+            if (this.disabled) {
+                this.control.disable({ emitEvent: false });
+            }
+            else {
+                this.control.enable({ emitEvent: false });
+            }
+        }
+    }
     onChange(event) {
         const checked = event.target.checked;
         this.control.setValue(checked);
         this.valueChange.emit(checked);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: FvCheckboxComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: FvCheckboxComponent, isStandalone: true, selector: "fv-checkbox", inputs: { label: "label", control: "control", disabled: "disabled", required: "required" }, outputs: { valueChange: "valueChange" }, ngImport: i0, template: "<div class=\"fv-checkbox-container\">\r\n  <label class=\"fv-checkbox-label\">\r\n    <input type=\"checkbox\" [formControl]=\"control\" [disabled]=\"disabled\" (change)=\"onChange($event)\"\r\n      class=\"fv-checkbox-input\" />\r\n    <span class=\"fv-checkbox-custom\"></span>\r\n    <span class=\"fv-checkbox-text\">\r\n      {{ label }}\r\n      <span *ngIf=\"required\" class=\"fv-required-asterisk\">*</span>\r\n    </span>\r\n  </label>\r\n</div>", styles: [".fv-checkbox-container{margin-bottom:12px}.fv-checkbox-label{display:flex;align-items:center;cursor:pointer;-webkit-user-select:none;user-select:none;position:relative;padding-left:32px;min-height:24px}.fv-checkbox-input{position:absolute;opacity:0;cursor:pointer;height:0;width:0}.fv-checkbox-custom{position:absolute;left:0;top:0;height:20px;width:20px;background-color:var(--fv-background-default, #ffffff);border:2px solid var(--fv-border-default, #cccccc);border-radius:4px;transition:all .2s}.fv-checkbox-label:hover .fv-checkbox-custom{border-color:var(--fv-border-hover, #999999)}.fv-checkbox-input:checked~.fv-checkbox-custom{background-color:var(--fv-border-focus, #667eea);border-color:var(--fv-border-focus, #667eea)}.fv-checkbox-custom:after{content:\"\";position:absolute;display:none;left:6px;top:2px;width:5px;height:10px;border:solid white;border-width:0 2px 2px 0;transform:rotate(45deg)}.fv-checkbox-input:checked~.fv-checkbox-custom:after{display:block}.fv-checkbox-input:disabled~.fv-checkbox-custom{background-color:var(--fv-background-disabled, #f5f5f5);cursor:not-allowed;opacity:.6}.fv-checkbox-text{font-size:14px;color:var(--fv-text-primary, #333333)}.fv-required-asterisk{color:var(--fv-error-color, #dc3545);margin-left:4px;font-weight:700}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: FvCheckboxComponent, isStandalone: true, selector: "fv-checkbox", inputs: { label: "label", control: "control", disabled: "disabled", required: "required" }, outputs: { valueChange: "valueChange" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"fv-checkbox-container\">\r\n  <label class=\"fv-checkbox-label\">\r\n    <input type=\"checkbox\" [formControl]=\"control\" [disabled]=\"disabled\" (change)=\"onChange($event)\"\r\n      class=\"fv-checkbox-input\" />\r\n    <span class=\"fv-checkbox-custom\"></span>\r\n    <span class=\"fv-checkbox-text\">\r\n      {{ label }}\r\n      <span *ngIf=\"required\" class=\"fv-required-asterisk\">*</span>\r\n    </span>\r\n  </label>\r\n</div>", styles: ["@import\"https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap\";*{font-family:Poppins,sans-serif}.fv-checkbox-container{margin-bottom:12px}.fv-checkbox-label{display:flex;align-items:center;cursor:pointer;-webkit-user-select:none;user-select:none;position:relative;padding-left:32px;min-height:24px}.fv-checkbox-input{position:absolute;opacity:0;cursor:pointer;height:0;width:0}.fv-checkbox-custom{position:absolute;left:0;top:0;height:18px;width:18px;background-color:#fff;border:1px solid #8CBBA8;border-radius:4px;transition:all .2s}.fv-checkbox-label:hover .fv-checkbox-custom{border-color:#3498db}.fv-checkbox-input:checked~.fv-checkbox-custom{background-color:#3498db;border-color:#3498db}.fv-checkbox-custom:after{content:\"\";position:absolute;display:none;left:5px;top:1px;width:5px;height:10px;border:solid white;border-width:0 2px 2px 0;transform:rotate(45deg)}.fv-checkbox-input:checked~.fv-checkbox-custom:after{display:block}.fv-checkbox-input:disabled~.fv-checkbox-custom{background-color:#ecf0f1;cursor:not-allowed;opacity:.6}.fv-checkbox-text{font-size:14px;font-weight:600;color:#151d48}.fv-required-asterisk{color:#e74c3c;margin-left:4px;font-weight:700}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: FvCheckboxComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'fv-checkbox', standalone: true, imports: [CommonModule, ReactiveFormsModule], template: "<div class=\"fv-checkbox-container\">\r\n  <label class=\"fv-checkbox-label\">\r\n    <input type=\"checkbox\" [formControl]=\"control\" [disabled]=\"disabled\" (change)=\"onChange($event)\"\r\n      class=\"fv-checkbox-input\" />\r\n    <span class=\"fv-checkbox-custom\"></span>\r\n    <span class=\"fv-checkbox-text\">\r\n      {{ label }}\r\n      <span *ngIf=\"required\" class=\"fv-required-asterisk\">*</span>\r\n    </span>\r\n  </label>\r\n</div>", styles: [".fv-checkbox-container{margin-bottom:12px}.fv-checkbox-label{display:flex;align-items:center;cursor:pointer;-webkit-user-select:none;user-select:none;position:relative;padding-left:32px;min-height:24px}.fv-checkbox-input{position:absolute;opacity:0;cursor:pointer;height:0;width:0}.fv-checkbox-custom{position:absolute;left:0;top:0;height:20px;width:20px;background-color:var(--fv-background-default, #ffffff);border:2px solid var(--fv-border-default, #cccccc);border-radius:4px;transition:all .2s}.fv-checkbox-label:hover .fv-checkbox-custom{border-color:var(--fv-border-hover, #999999)}.fv-checkbox-input:checked~.fv-checkbox-custom{background-color:var(--fv-border-focus, #667eea);border-color:var(--fv-border-focus, #667eea)}.fv-checkbox-custom:after{content:\"\";position:absolute;display:none;left:6px;top:2px;width:5px;height:10px;border:solid white;border-width:0 2px 2px 0;transform:rotate(45deg)}.fv-checkbox-input:checked~.fv-checkbox-custom:after{display:block}.fv-checkbox-input:disabled~.fv-checkbox-custom{background-color:var(--fv-background-disabled, #f5f5f5);cursor:not-allowed;opacity:.6}.fv-checkbox-text{font-size:14px;color:var(--fv-text-primary, #333333)}.fv-required-asterisk{color:var(--fv-error-color, #dc3545);margin-left:4px;font-weight:700}\n"] }]
+            args: [{ selector: 'fv-checkbox', standalone: true, imports: [CommonModule, ReactiveFormsModule], template: "<div class=\"fv-checkbox-container\">\r\n  <label class=\"fv-checkbox-label\">\r\n    <input type=\"checkbox\" [formControl]=\"control\" [disabled]=\"disabled\" (change)=\"onChange($event)\"\r\n      class=\"fv-checkbox-input\" />\r\n    <span class=\"fv-checkbox-custom\"></span>\r\n    <span class=\"fv-checkbox-text\">\r\n      {{ label }}\r\n      <span *ngIf=\"required\" class=\"fv-required-asterisk\">*</span>\r\n    </span>\r\n  </label>\r\n</div>", styles: ["@import\"https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap\";*{font-family:Poppins,sans-serif}.fv-checkbox-container{margin-bottom:12px}.fv-checkbox-label{display:flex;align-items:center;cursor:pointer;-webkit-user-select:none;user-select:none;position:relative;padding-left:32px;min-height:24px}.fv-checkbox-input{position:absolute;opacity:0;cursor:pointer;height:0;width:0}.fv-checkbox-custom{position:absolute;left:0;top:0;height:18px;width:18px;background-color:#fff;border:1px solid #8CBBA8;border-radius:4px;transition:all .2s}.fv-checkbox-label:hover .fv-checkbox-custom{border-color:#3498db}.fv-checkbox-input:checked~.fv-checkbox-custom{background-color:#3498db;border-color:#3498db}.fv-checkbox-custom:after{content:\"\";position:absolute;display:none;left:5px;top:1px;width:5px;height:10px;border:solid white;border-width:0 2px 2px 0;transform:rotate(45deg)}.fv-checkbox-input:checked~.fv-checkbox-custom:after{display:block}.fv-checkbox-input:disabled~.fv-checkbox-custom{background-color:#ecf0f1;cursor:not-allowed;opacity:.6}.fv-checkbox-text{font-size:14px;font-weight:600;color:#151d48}.fv-required-asterisk{color:#e74c3c;margin-left:4px;font-weight:700}\n"] }]
         }], propDecorators: { label: [{
                 type: Input
             }], control: [{
@@ -507,12 +582,23 @@ class FvRadioGroupComponent {
     disabled = false;
     required = false;
     name = `fv-radio-${Math.random().toString(36).substr(2, 9)}`;
+    layout = 'vertical';
     valueChange = new EventEmitter();
     ngOnInit() {
         if (!this.control) {
             console.error('FvRadioGroup: control is required');
         }
     }
+    ngOnChanges(changes) {
+        if (changes['disabled'] && this.control) {
+            if (this.disabled) {
+                this.control.disable({ emitEvent: false });
+            }
+            else {
+                this.control.enable({ emitEvent: false });
+            }
+        }
+    }
     onChange(value) {
         this.control.setValue(value);
         this.valueChange.emit(value);
@@ -521,11 +607,11 @@ class FvRadioGroupComponent {
         return this.control.value === value;
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: FvRadioGroupComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: FvRadioGroupComponent, isStandalone: true, selector: "fv-radio-group", inputs: { label: "label", control: "control", options: "options", disabled: "disabled", required: "required", name: "name" }, outputs: { valueChange: "valueChange" }, ngImport: i0, template: "<div class=\"fv-radio-group-container\">\r\n  <label *ngIf=\"label\" class=\"fv-group-label\">\r\n    {{ label }}\r\n    <span *ngIf=\"required\" class=\"fv-required-asterisk\">*</span>\r\n  </label>\r\n  \r\n  <div class=\"fv-radio-options\">\r\n    <label \r\n      *ngFor=\"let option of options\" \r\n      class=\"fv-radio-label\"\r\n      [class.fv-radio-disabled]=\"disabled || option.disabled\">\r\n      <input\r\n        type=\"radio\"\r\n        [name]=\"name\"\r\n        [value]=\"option.value\"\r\n        [checked]=\"isSelected(option.value)\"\r\n        [disabled]=\"disabled || option.disabled\"\r\n        (change)=\"onChange(option.value)\"\r\n        class=\"fv-radio-input\"\r\n      />\r\n      <span class=\"fv-radio-custom\"></span>\r\n      <span class=\"fv-radio-text\">{{ option.label }}</span>\r\n    </label>\r\n  </div>\r\n</div>", styles: [".fv-radio-group-container{margin-bottom:16px}.fv-group-label{display:block;margin-bottom:10px;font-size:14px;font-weight:500;color:var(--fv-text-primary, #333333)}.fv-required-asterisk{color:var(--fv-error-color, #dc3545);margin-left:4px;font-weight:700}.fv-radio-options{display:flex;flex-direction:column;gap:12px}.fv-radio-label{display:flex;align-items:center;cursor:pointer;-webkit-user-select:none;user-select:none;position:relative;padding-left:32px;min-height:24px}.fv-radio-input{position:absolute;opacity:0;cursor:pointer;height:0;width:0}.fv-radio-custom{position:absolute;left:0;top:0;height:20px;width:20px;background-color:var(--fv-background-default, #ffffff);border:2px solid var(--fv-border-default, #cccccc);border-radius:50%;transition:all .2s}.fv-radio-label:hover .fv-radio-custom{border-color:var(--fv-border-hover, #999999)}.fv-radio-input:checked~.fv-radio-custom{border-color:var(--fv-border-focus, #667eea)}.fv-radio-custom:after{content:\"\";position:absolute;display:none;top:4px;left:4px;width:13px;height:13px;border-radius:50%;background:var(--fv-border-focus, #667eea)}.fv-radio-input:checked~.fv-radio-custom:after{display:block}.fv-radio-disabled{opacity:.6;cursor:not-allowed}.fv-radio-disabled .fv-radio-custom{background-color:var(--fv-background-disabled, #f5f5f5)}.fv-radio-text{font-size:14px;color:var(--fv-text-primary, #333333)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: ReactiveFormsModule }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: FvRadioGroupComponent, isStandalone: true, selector: "fv-radio-group", inputs: { label: "label", control: "control", options: "options", disabled: "disabled", required: "required", name: "name", layout: "layout" }, outputs: { valueChange: "valueChange" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"fv-radio-group-container\">\r\n  <label *ngIf=\"label\" class=\"fv-group-label\">\r\n    {{ label }}\r\n    <span *ngIf=\"required\" class=\"fv-required-asterisk\">*</span>\r\n  </label>\r\n\r\n  <div class=\"fv-radio-options\" [class.horizontal]=\"layout === 'horizontal'\" [class.vertical]=\"layout === 'vertical'\">\r\n    <label *ngFor=\"let option of options\" class=\"fv-radio-label\"\r\n      [class.fv-radio-disabled]=\"disabled || option.disabled\">\r\n      <input type=\"radio\" [name]=\"name\" [value]=\"option.value\" [checked]=\"isSelected(option.value)\"\r\n        [disabled]=\"disabled || option.disabled\" (change)=\"onChange(option.value)\" class=\"fv-radio-input\" />\r\n      <span class=\"fv-radio-custom\"></span>\r\n      <span class=\"fv-radio-text\">{{ option.label }}</span>\r\n    </label>\r\n  </div>\r\n</div>", styles: ["@import\"https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap\";*{font-family:Poppins,sans-serif}.fv-radio-group-container{display:flex;flex-direction:column;margin-bottom:16px;width:100%}.fv-group-label{display:block;margin-bottom:6px;font-size:14px;font-weight:600;color:#151d48}.fv-required-asterisk{color:#e74c3c;margin-left:4px;font-weight:700}.fv-radio-options{display:flex;gap:12px}.fv-radio-options.vertical{flex-direction:column}.fv-radio-options.horizontal{flex-direction:row;flex-wrap:wrap;gap:24px}.fv-radio-label{display:flex;align-items:center;cursor:pointer;-webkit-user-select:none;user-select:none;position:relative;padding-left:32px;min-height:24px}.fv-radio-input{position:absolute;opacity:0;cursor:pointer;height:0;width:0}.fv-radio-custom{position:absolute;left:0;top:0;height:20px;width:20px;background-color:#fff;border:1px solid #8CBBA8;border-radius:50%;transition:all .2s;box-sizing:border-box}.fv-radio-label:hover .fv-radio-custom{border-color:#006aff}.fv-radio-input:checked~.fv-radio-custom{border-color:#006aff;border-width:1px}.fv-radio-custom:after{content:\"\";position:absolute;display:none;top:50%;left:50%;transform:translate(-50%,-50%);width:12px;height:12px;border-radius:50%;background:#006aff}.fv-radio-input:checked~.fv-radio-custom:after{display:block}.fv-radio-disabled{opacity:.6;cursor:not-allowed}.fv-radio-disabled .fv-radio-custom{background-color:#ecf0f1}.fv-radio-text{font-size:14px;font-weight:400;color:#1f2b41}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: ReactiveFormsModule }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: FvRadioGroupComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'fv-radio-group', standalone: true, imports: [CommonModule, ReactiveFormsModule], template: "<div class=\"fv-radio-group-container\">\r\n  <label *ngIf=\"label\" class=\"fv-group-label\">\r\n    {{ label }}\r\n    <span *ngIf=\"required\" class=\"fv-required-asterisk\">*</span>\r\n  </label>\r\n  \r\n  <div class=\"fv-radio-options\">\r\n    <label \r\n      *ngFor=\"let option of options\" \r\n      class=\"fv-radio-label\"\r\n      [class.fv-radio-disabled]=\"disabled || option.disabled\">\r\n      <input\r\n        type=\"radio\"\r\n        [name]=\"name\"\r\n        [value]=\"option.value\"\r\n        [checked]=\"isSelected(option.value)\"\r\n        [disabled]=\"disabled || option.disabled\"\r\n        (change)=\"onChange(option.value)\"\r\n        class=\"fv-radio-input\"\r\n      />\r\n      <span class=\"fv-radio-custom\"></span>\r\n      <span class=\"fv-radio-text\">{{ option.label }}</span>\r\n    </label>\r\n  </div>\r\n</div>", styles: [".fv-radio-group-container{margin-bottom:16px}.fv-group-label{display:block;margin-bottom:10px;font-size:14px;font-weight:500;color:var(--fv-text-primary, #333333)}.fv-required-asterisk{color:var(--fv-error-color, #dc3545);margin-left:4px;font-weight:700}.fv-radio-options{display:flex;flex-direction:column;gap:12px}.fv-radio-label{display:flex;align-items:center;cursor:pointer;-webkit-user-select:none;user-select:none;position:relative;padding-left:32px;min-height:24px}.fv-radio-input{position:absolute;opacity:0;cursor:pointer;height:0;width:0}.fv-radio-custom{position:absolute;left:0;top:0;height:20px;width:20px;background-color:var(--fv-background-default, #ffffff);border:2px solid var(--fv-border-default, #cccccc);border-radius:50%;transition:all .2s}.fv-radio-label:hover .fv-radio-custom{border-color:var(--fv-border-hover, #999999)}.fv-radio-input:checked~.fv-radio-custom{border-color:var(--fv-border-focus, #667eea)}.fv-radio-custom:after{content:\"\";position:absolute;display:none;top:4px;left:4px;width:13px;height:13px;border-radius:50%;background:var(--fv-border-focus, #667eea)}.fv-radio-input:checked~.fv-radio-custom:after{display:block}.fv-radio-disabled{opacity:.6;cursor:not-allowed}.fv-radio-disabled .fv-radio-custom{background-color:var(--fv-background-disabled, #f5f5f5)}.fv-radio-text{font-size:14px;color:var(--fv-text-primary, #333333)}\n"] }]
+            args: [{ selector: 'fv-radio-group', standalone: true, imports: [CommonModule, ReactiveFormsModule], template: "<div class=\"fv-radio-group-container\">\r\n  <label *ngIf=\"label\" class=\"fv-group-label\">\r\n    {{ label }}\r\n    <span *ngIf=\"required\" class=\"fv-required-asterisk\">*</span>\r\n  </label>\r\n\r\n  <div class=\"fv-radio-options\" [class.horizontal]=\"layout === 'horizontal'\" [class.vertical]=\"layout === 'vertical'\">\r\n    <label *ngFor=\"let option of options\" class=\"fv-radio-label\"\r\n      [class.fv-radio-disabled]=\"disabled || option.disabled\">\r\n      <input type=\"radio\" [name]=\"name\" [value]=\"option.value\" [checked]=\"isSelected(option.value)\"\r\n        [disabled]=\"disabled || option.disabled\" (change)=\"onChange(option.value)\" class=\"fv-radio-input\" />\r\n      <span class=\"fv-radio-custom\"></span>\r\n      <span class=\"fv-radio-text\">{{ option.label }}</span>\r\n    </label>\r\n  </div>\r\n</div>", styles: ["@import\"https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap\";*{font-family:Poppins,sans-serif}.fv-radio-group-container{display:flex;flex-direction:column;margin-bottom:16px;width:100%}.fv-group-label{display:block;margin-bottom:6px;font-size:14px;font-weight:600;color:#151d48}.fv-required-asterisk{color:#e74c3c;margin-left:4px;font-weight:700}.fv-radio-options{display:flex;gap:12px}.fv-radio-options.vertical{flex-direction:column}.fv-radio-options.horizontal{flex-direction:row;flex-wrap:wrap;gap:24px}.fv-radio-label{display:flex;align-items:center;cursor:pointer;-webkit-user-select:none;user-select:none;position:relative;padding-left:32px;min-height:24px}.fv-radio-input{position:absolute;opacity:0;cursor:pointer;height:0;width:0}.fv-radio-custom{position:absolute;left:0;top:0;height:20px;width:20px;background-color:#fff;border:1px solid #8CBBA8;border-radius:50%;transition:all .2s;box-sizing:border-box}.fv-radio-label:hover .fv-radio-custom{border-color:#006aff}.fv-radio-input:checked~.fv-radio-custom{border-color:#006aff;border-width:1px}.fv-radio-custom:after{content:\"\";position:absolute;display:none;top:50%;left:50%;transform:translate(-50%,-50%);width:12px;height:12px;border-radius:50%;background:#006aff}.fv-radio-input:checked~.fv-radio-custom:after{display:block}.fv-radio-disabled{opacity:.6;cursor:not-allowed}.fv-radio-disabled .fv-radio-custom{background-color:#ecf0f1}.fv-radio-text{font-size:14px;font-weight:400;color:#1f2b41}\n"] }]
         }], propDecorators: { label: [{
                 type: Input
             }], control: [{
@@ -538,6 +624,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
                 type: Input
             }], name: [{
                 type: Input
+            }], layout: [{
+                type: Input
             }], valueChange: [{
                 type: Output
             }] } });
@@ -559,6 +647,7 @@ class FvDropdownComponent {
     subscription;
     searchControl = new FormControl('');
     filteredOptions = [];
+    highlightedIndex = -1;
     constructor(el) {
         this.el = el;
     }
@@ -633,10 +722,12 @@ class FvDropdownComponent {
     filterOptions(term) {
         if (!term) {
             this.filteredOptions = this.options;
-            return;
         }
-        const lower = term.toLowerCase();
-        this.filteredOptions = this.options.filter(opt => opt.label.toLowerCase().includes(lower));
+        else {
+            const lower = term.toLowerCase();
+            this.filteredOptions = this.options.filter(opt => opt.label.toLowerCase().includes(lower));
+        }
+        this.highlightedIndex = this.filteredOptions.length === 1 ? 0 : -1;
     }
     toggleDropdown() {
         if (!this.disabled) {
@@ -654,6 +745,7 @@ class FvDropdownComponent {
             this.focus.emit();
             // Filter based on current text, do not reset blindly
             this.filterOptions(this.searchControl.value || '');
+            this.highlightedIndex = this.filteredOptions.length === 1 ? 0 : -1;
         }
     }
     onContainerClick(event) {
@@ -670,6 +762,7 @@ class FvDropdownComponent {
     }
     closeDropdown() {
         this.isOpen = false;
+        this.highlightedIndex = -1;
         // Restore label
         const selected = this.options.find(opt => opt.value === this.control.value);
         if (selected) {
@@ -681,12 +774,65 @@ class FvDropdownComponent {
         }
     }
     selectOption(option) {
+        if (!option)
+            return;
         this.control.setValue(option.value);
         this.searchControl.setValue(option.label, { emitEvent: false });
         this.isOpen = false;
+        this.highlightedIndex = -1;
         this.searchInput.nativeElement.blur(); // Remove focus from input
         this.blur.emit();
     }
+    onKeyDown(event) {
+        if (!this.isOpen && (event.key === 'ArrowDown' || event.key === 'ArrowUp' || event.key === 'Enter')) {
+            this.openDropdown();
+            event.preventDefault();
+            return;
+        }
+        if (!this.isOpen)
+            return;
+        switch (event.key) {
+            case 'ArrowDown':
+                event.preventDefault();
+                this.highlightedIndex = (this.highlightedIndex + 1) % this.filteredOptions.length;
+                this.scrollToHighlighted();
+                break;
+            case 'ArrowUp':
+                event.preventDefault();
+                this.highlightedIndex = (this.highlightedIndex - 1 + this.filteredOptions.length) % this.filteredOptions.length;
+                this.scrollToHighlighted();
+                break;
+            case 'Enter':
+                event.preventDefault();
+                if (this.filteredOptions.length === 1) {
+                    this.selectOption(this.filteredOptions[0]);
+                }
+                else if (this.highlightedIndex >= 0 && this.highlightedIndex < this.filteredOptions.length) {
+                    this.selectOption(this.filteredOptions[this.highlightedIndex]);
+                }
+                break;
+            case 'Escape':
+                this.closeDropdown();
+                break;
+            case 'Tab':
+                this.closeDropdown();
+                break;
+        }
+    }
+    scrollToHighlighted() {
+        const list = document.querySelector('.fv-dropdown-options');
+        const item = document.querySelectorAll('.fv-dropdown-option')[this.highlightedIndex];
+        if (list && item) {
+            const listRect = list.getBoundingClientRect();
+            const itemRect = item.getBoundingClientRect();
+            if (itemRect.bottom > listRect.bottom) {
+                list.scrollTop += (itemRect.bottom - listRect.bottom);
+            }
+            else if (itemRect.top < listRect.top) {
+                list.scrollTop -= (listRect.top - itemRect.top);
+            }
+        }
+    }
     onBlur() {
         // Validation handled on closeDropdown
     }
@@ -724,11 +870,11 @@ class FvDropdownComponent {
         return option.value === this.control?.value;
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: FvDropdownComponent, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: FvDropdownComponent, isStandalone: true, selector: "fv-dropdown", inputs: { label: "label", placeholder: "placeholder", options: "options", schema: "schema", control: "control", disabled: "disabled" }, outputs: { valueChange: "valueChange", blur: "blur", focus: "focus" }, host: { listeners: { "document:click": "onClickOutside($event)" } }, viewQueries: [{ propertyName: "searchInput", first: true, predicate: ["searchInput"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div class=\"fv-dropdown-container\">\r\n    <label *ngIf=\"label\" class=\"fv-dropdown-label\">\r\n        {{ label }}\r\n        <span *ngIf=\"isRequired()\" class=\"required-asterisk\">*</span>\r\n    </label>\r\n\r\n    <div class=\"fv-dropdown-wrapper\">\r\n        <div class=\"fv-dropdown\" [class.fv-dropdown-error]=\"errorMessage\" [class.fv-dropdown-disabled]=\"disabled\"\r\n            [class.fv-dropdown-open]=\"isOpen\" (click)=\"onContainerClick($event)\">\r\n            <input #searchInput type=\"text\" class=\"fv-dropdown-input\" [formControl]=\"searchControl\"\r\n                [placeholder]=\"placeholder\" (focus)=\"onInputFocus()\" (click)=\"$event.stopPropagation()\"\r\n                autocomplete=\"off\">\r\n            <span class=\"fv-dropdown-arrow\" [class.arrow-up]=\"isOpen\" (click)=\"toggleDropdown()\">\u25BC</span>\r\n        </div>\r\n\r\n        <div *ngIf=\"isOpen\" class=\"fv-dropdown-options\">\r\n            <div *ngFor=\"let option of filteredOptions\" class=\"fv-dropdown-option\"\r\n                [class.fv-dropdown-option-selected]=\"isSelected(option)\" (mousedown)=\"$event.preventDefault()\"\r\n                (click)=\"selectOption(option)\">\r\n                {{ option.label }}\r\n            </div>\r\n            <div *ngIf=\"filteredOptions.length === 0\" class=\"fv-dropdown-option fv-no-results\">\r\n                No options found\r\n            </div>\r\n        </div>\r\n    </div>\r\n\r\n    <div *ngIf=\"errorMessage\" class=\"fv-dropdown-error-message\">\r\n        \u26A0 {{ getErrorMessage() }}\r\n    </div>\r\n</div>", styles: [".fv-dropdown-container{display:flex;flex-direction:column;margin-bottom:16px;width:100%}.fv-dropdown-label{font-size:14px;font-weight:500;color:#333;margin-bottom:6px;display:block}.required-asterisk{color:#dc3545;font-weight:700}.fv-dropdown-wrapper{position:relative}.fv-dropdown{padding:10px;border:1px solid #cccccc;border-radius:4px;background-color:#fff;cursor:pointer;display:flex;justify-content:space-between;align-items:center;transition:border-color .2s;outline:none}.fv-dropdown:hover:not(.fv-dropdown-disabled){border-color:#007bff}.fv-dropdown:focus:not(.fv-dropdown-disabled){border-color:#007bff;box-shadow:0 0 0 2px #007bff1a}.fv-dropdown-error{border-color:#dc3545!important}.fv-dropdown-disabled{background-color:#f5f5f5;opacity:.6;cursor:not-allowed}.fv-dropdown-open{border-color:#007bff}.fv-dropdown-selected{font-size:14px;color:#333;flex:1}.fv-dropdown-placeholder{color:#999}.fv-dropdown-arrow{font-size:10px;color:#666;margin-left:8px;margin-right:5px;transition:transform .2s}.arrow-up{transform:rotate(180deg)}.fv-dropdown-options{position:absolute;top:100%;left:0;right:0;margin-top:4px;background-color:#fff;border:1px solid #cccccc;border-radius:4px;max-height:300px;overflow-y:auto;z-index:1000;box-shadow:0 4px 6px #0000001a}.fv-dropdown-option{padding:12px 16px;font-size:14px;color:#333;cursor:pointer;transition:background-color .2s;border-bottom:1px solid #eeeeee}.fv-dropdown-option:last-child{border-bottom:none}.fv-dropdown-option:hover{background-color:#f8f9fa}.fv-dropdown-option-selected{background-color:#e7f3ff;color:#007bff;font-weight:600}.fv-dropdown-error-message{margin-top:4px;font-size:12px;color:#dc3545}.fv-dropdown-input{border:none;outline:none;background:transparent;flex:1;width:auto;font-size:14px;color:#333;padding:0;margin:0;cursor:text;z-index:2;position:relative;pointer-events:auto;height:100%}.fv-dropdown-input::placeholder{color:#999}.fv-no-results{color:#999;font-style:italic;cursor:default;text-align:center}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: FvDropdownComponent, isStandalone: true, selector: "fv-dropdown", inputs: { label: "label", placeholder: "placeholder", options: "options", schema: "schema", control: "control", disabled: "disabled" }, outputs: { valueChange: "valueChange", blur: "blur", focus: "focus" }, host: { listeners: { "keydown": "onKeyDown($event)", "document:click": "onClickOutside($event)" } }, viewQueries: [{ propertyName: "searchInput", first: true, predicate: ["searchInput"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div class=\"fv-dropdown-container\">\r\n    <label *ngIf=\"label\" class=\"fv-dropdown-label\">\r\n        {{ label }}\r\n        <span *ngIf=\"isRequired()\" class=\"required-asterisk\">*</span>\r\n    </label>\r\n\r\n    <div class=\"fv-dropdown-wrapper\">\r\n        <div class=\"fv-dropdown\" [class.fv-dropdown-error]=\"errorMessage\" [class.fv-dropdown-disabled]=\"disabled\"\r\n            [class.fv-dropdown-open]=\"isOpen\" (click)=\"onContainerClick($event)\">\r\n            <input #searchInput type=\"text\" class=\"fv-dropdown-input\" [formControl]=\"searchControl\"\r\n                [placeholder]=\"placeholder\" (focus)=\"onInputFocus()\" (click)=\"$event.stopPropagation()\"\r\n                autocomplete=\"off\">\r\n            <span class=\"fv-dropdown-arrow\" [class.arrow-up]=\"isOpen\" (click)=\"toggleDropdown()\">\u25BC</span>\r\n        </div>\r\n\r\n        <div *ngIf=\"isOpen\" class=\"fv-dropdown-options\">\r\n            <div *ngFor=\"let option of filteredOptions; let i = index\" class=\"fv-dropdown-option\"\r\n                [class.fv-dropdown-option-selected]=\"isSelected(option)\"\r\n                [class.fv-dropdown-option-highlighted]=\"i === highlightedIndex\" (mousedown)=\"$event.preventDefault()\"\r\n                (click)=\"selectOption(option)\">\r\n                {{ option.label }}\r\n            </div>\r\n            <div *ngIf=\"filteredOptions.length === 0\" class=\"fv-dropdown-option fv-no-results\">\r\n                No options found\r\n            </div>\r\n        </div>\r\n    </div>\r\n\r\n    <div *ngIf=\"errorMessage\" class=\"fv-dropdown-error-message\">\r\n        \u26A0 {{ getErrorMessage() }}\r\n    </div>\r\n</div>", styles: ["@import\"https://fonts.googleapis.com/icon?family=Material+Icons\";@import\"https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap\";*{font-family:Poppins,sans-serif}.material-icons{font-family:Material Icons!important}.fv-dropdown-container{display:flex;flex-direction:column;margin-bottom:16px;width:100%}.fv-dropdown-label{font-size:14px;font-weight:600;color:#151d48;margin-bottom:6px;display:block}.required-asterisk{color:#e74c3c;font-weight:700}.fv-dropdown-wrapper{position:relative}.fv-dropdown{padding:5px 10px;border:1px solid #8CBBA8;border-radius:8px;background-color:#fff;cursor:pointer;display:flex;justify-content:space-between;align-items:center;transition:border-color .2s;outline:none;font-size:14px;font-weight:400;color:#1f2b41;box-sizing:border-box;height:34px}.fv-dropdown:hover:not(.fv-dropdown-disabled){border-color:#3498db}.fv-dropdown:focus-within:not(.fv-dropdown-disabled){border-color:#3498db;box-shadow:0 0 0 3px #3498db1a}.fv-dropdown-error{border-color:#dc3545!important}.fv-dropdown-disabled{background-color:#ecf0f1;opacity:.6;cursor:not-allowed}.fv-dropdown-open{border-color:#3498db}.fv-dropdown-selected{font-size:14px;font-weight:400;color:#1f2b41;flex:1}.fv-dropdown-placeholder{color:#999}.fv-dropdown-arrow{font-size:10px;color:#666;margin-left:8px;margin-right:5px;transition:transform .2s}.arrow-up{transform:rotate(180deg)}.fv-dropdown-options{position:absolute;top:100%;left:0;right:0;margin-top:4px;background-color:#fff;border:1px solid #cccccc;border-radius:4px;max-height:300px;overflow-y:auto;z-index:1000;box-shadow:0 4px 6px #0000001a}.fv-dropdown-option{padding:12px 16px;font-size:14px;color:#333;cursor:pointer;transition:background-color .2s;border-bottom:1px solid #eeeeee}.fv-dropdown-option:last-child{border-bottom:none}.fv-dropdown-option:hover,.fv-dropdown-option-highlighted{background-color:#f8f9fa}.fv-dropdown-option-selected{background-color:#e7f3ff;color:#007bff;font-weight:600}.fv-dropdown-error-message{margin-top:4px;font-size:12px;color:#dc3545}.fv-dropdown-input{border:none!important;outline:none!important;box-shadow:none!important;background:transparent;flex:1;width:100%;min-width:0;appearance:none;-webkit-appearance:none;font-size:14px;color:#1f2b41;padding:0;margin:0;cursor:text;z-index:2;position:relative;pointer-events:auto;height:100%}.fv-dropdown-input::placeholder{color:#999}.fv-no-results{color:#999;font-style:italic;cursor:default;text-align:center}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: FvDropdownComponent, decorators: [{
             type: Component,
-            args: [{ standalone: true, imports: [CommonModule, ReactiveFormsModule], selector: 'fv-dropdown', template: "<div class=\"fv-dropdown-container\">\r\n    <label *ngIf=\"label\" class=\"fv-dropdown-label\">\r\n        {{ label }}\r\n        <span *ngIf=\"isRequired()\" class=\"required-asterisk\">*</span>\r\n    </label>\r\n\r\n    <div class=\"fv-dropdown-wrapper\">\r\n        <div class=\"fv-dropdown\" [class.fv-dropdown-error]=\"errorMessage\" [class.fv-dropdown-disabled]=\"disabled\"\r\n            [class.fv-dropdown-open]=\"isOpen\" (click)=\"onContainerClick($event)\">\r\n            <input #searchInput type=\"text\" class=\"fv-dropdown-input\" [formControl]=\"searchControl\"\r\n                [placeholder]=\"placeholder\" (focus)=\"onInputFocus()\" (click)=\"$event.stopPropagation()\"\r\n                autocomplete=\"off\">\r\n            <span class=\"fv-dropdown-arrow\" [class.arrow-up]=\"isOpen\" (click)=\"toggleDropdown()\">\u25BC</span>\r\n        </div>\r\n\r\n        <div *ngIf=\"isOpen\" class=\"fv-dropdown-options\">\r\n            <div *ngFor=\"let option of filteredOptions\" class=\"fv-dropdown-option\"\r\n                [class.fv-dropdown-option-selected]=\"isSelected(option)\" (mousedown)=\"$event.preventDefault()\"\r\n                (click)=\"selectOption(option)\">\r\n                {{ option.label }}\r\n            </div>\r\n            <div *ngIf=\"filteredOptions.length === 0\" class=\"fv-dropdown-option fv-no-results\">\r\n                No options found\r\n            </div>\r\n        </div>\r\n    </div>\r\n\r\n    <div *ngIf=\"errorMessage\" class=\"fv-dropdown-error-message\">\r\n        \u26A0 {{ getErrorMessage() }}\r\n    </div>\r\n</div>", styles: [".fv-dropdown-container{display:flex;flex-direction:column;margin-bottom:16px;width:100%}.fv-dropdown-label{font-size:14px;font-weight:500;color:#333;margin-bottom:6px;display:block}.required-asterisk{color:#dc3545;font-weight:700}.fv-dropdown-wrapper{position:relative}.fv-dropdown{padding:10px;border:1px solid #cccccc;border-radius:4px;background-color:#fff;cursor:pointer;display:flex;justify-content:space-between;align-items:center;transition:border-color .2s;outline:none}.fv-dropdown:hover:not(.fv-dropdown-disabled){border-color:#007bff}.fv-dropdown:focus:not(.fv-dropdown-disabled){border-color:#007bff;box-shadow:0 0 0 2px #007bff1a}.fv-dropdown-error{border-color:#dc3545!important}.fv-dropdown-disabled{background-color:#f5f5f5;opacity:.6;cursor:not-allowed}.fv-dropdown-open{border-color:#007bff}.fv-dropdown-selected{font-size:14px;color:#333;flex:1}.fv-dropdown-placeholder{color:#999}.fv-dropdown-arrow{font-size:10px;color:#666;margin-left:8px;margin-right:5px;transition:transform .2s}.arrow-up{transform:rotate(180deg)}.fv-dropdown-options{position:absolute;top:100%;left:0;right:0;margin-top:4px;background-color:#fff;border:1px solid #cccccc;border-radius:4px;max-height:300px;overflow-y:auto;z-index:1000;box-shadow:0 4px 6px #0000001a}.fv-dropdown-option{padding:12px 16px;font-size:14px;color:#333;cursor:pointer;transition:background-color .2s;border-bottom:1px solid #eeeeee}.fv-dropdown-option:last-child{border-bottom:none}.fv-dropdown-option:hover{background-color:#f8f9fa}.fv-dropdown-option-selected{background-color:#e7f3ff;color:#007bff;font-weight:600}.fv-dropdown-error-message{margin-top:4px;font-size:12px;color:#dc3545}.fv-dropdown-input{border:none;outline:none;background:transparent;flex:1;width:auto;font-size:14px;color:#333;padding:0;margin:0;cursor:text;z-index:2;position:relative;pointer-events:auto;height:100%}.fv-dropdown-input::placeholder{color:#999}.fv-no-results{color:#999;font-style:italic;cursor:default;text-align:center}\n"] }]
+            args: [{ standalone: true, imports: [CommonModule, ReactiveFormsModule], selector: 'fv-dropdown', template: "<div class=\"fv-dropdown-container\">\r\n    <label *ngIf=\"label\" class=\"fv-dropdown-label\">\r\n        {{ label }}\r\n        <span *ngIf=\"isRequired()\" class=\"required-asterisk\">*</span>\r\n    </label>\r\n\r\n    <div class=\"fv-dropdown-wrapper\">\r\n        <div class=\"fv-dropdown\" [class.fv-dropdown-error]=\"errorMessage\" [class.fv-dropdown-disabled]=\"disabled\"\r\n            [class.fv-dropdown-open]=\"isOpen\" (click)=\"onContainerClick($event)\">\r\n            <input #searchInput type=\"text\" class=\"fv-dropdown-input\" [formControl]=\"searchControl\"\r\n                [placeholder]=\"placeholder\" (focus)=\"onInputFocus()\" (click)=\"$event.stopPropagation()\"\r\n                autocomplete=\"off\">\r\n            <span class=\"fv-dropdown-arrow\" [class.arrow-up]=\"isOpen\" (click)=\"toggleDropdown()\">\u25BC</span>\r\n        </div>\r\n\r\n        <div *ngIf=\"isOpen\" class=\"fv-dropdown-options\">\r\n            <div *ngFor=\"let option of filteredOptions; let i = index\" class=\"fv-dropdown-option\"\r\n                [class.fv-dropdown-option-selected]=\"isSelected(option)\"\r\n                [class.fv-dropdown-option-highlighted]=\"i === highlightedIndex\" (mousedown)=\"$event.preventDefault()\"\r\n                (click)=\"selectOption(option)\">\r\n                {{ option.label }}\r\n            </div>\r\n            <div *ngIf=\"filteredOptions.length === 0\" class=\"fv-dropdown-option fv-no-results\">\r\n                No options found\r\n            </div>\r\n        </div>\r\n    </div>\r\n\r\n    <div *ngIf=\"errorMessage\" class=\"fv-dropdown-error-message\">\r\n        \u26A0 {{ getErrorMessage() }}\r\n    </div>\r\n</div>", styles: ["@import\"https://fonts.googleapis.com/icon?family=Material+Icons\";@import\"https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap\";*{font-family:Poppins,sans-serif}.material-icons{font-family:Material Icons!important}.fv-dropdown-container{display:flex;flex-direction:column;margin-bottom:16px;width:100%}.fv-dropdown-label{font-size:14px;font-weight:600;color:#151d48;margin-bottom:6px;display:block}.required-asterisk{color:#e74c3c;font-weight:700}.fv-dropdown-wrapper{position:relative}.fv-dropdown{padding:5px 10px;border:1px solid #8CBBA8;border-radius:8px;background-color:#fff;cursor:pointer;display:flex;justify-content:space-between;align-items:center;transition:border-color .2s;outline:none;font-size:14px;font-weight:400;color:#1f2b41;box-sizing:border-box;height:34px}.fv-dropdown:hover:not(.fv-dropdown-disabled){border-color:#3498db}.fv-dropdown:focus-within:not(.fv-dropdown-disabled){border-color:#3498db;box-shadow:0 0 0 3px #3498db1a}.fv-dropdown-error{border-color:#dc3545!important}.fv-dropdown-disabled{background-color:#ecf0f1;opacity:.6;cursor:not-allowed}.fv-dropdown-open{border-color:#3498db}.fv-dropdown-selected{font-size:14px;font-weight:400;color:#1f2b41;flex:1}.fv-dropdown-placeholder{color:#999}.fv-dropdown-arrow{font-size:10px;color:#666;margin-left:8px;margin-right:5px;transition:transform .2s}.arrow-up{transform:rotate(180deg)}.fv-dropdown-options{position:absolute;top:100%;left:0;right:0;margin-top:4px;background-color:#fff;border:1px solid #cccccc;border-radius:4px;max-height:300px;overflow-y:auto;z-index:1000;box-shadow:0 4px 6px #0000001a}.fv-dropdown-option{padding:12px 16px;font-size:14px;color:#333;cursor:pointer;transition:background-color .2s;border-bottom:1px solid #eeeeee}.fv-dropdown-option:last-child{border-bottom:none}.fv-dropdown-option:hover,.fv-dropdown-option-highlighted{background-color:#f8f9fa}.fv-dropdown-option-selected{background-color:#e7f3ff;color:#007bff;font-weight:600}.fv-dropdown-error-message{margin-top:4px;font-size:12px;color:#dc3545}.fv-dropdown-input{border:none!important;outline:none!important;box-shadow:none!important;background:transparent;flex:1;width:100%;min-width:0;appearance:none;-webkit-appearance:none;font-size:14px;color:#1f2b41;padding:0;margin:0;cursor:text;z-index:2;position:relative;pointer-events:auto;height:100%}.fv-dropdown-input::placeholder{color:#999}.fv-no-results{color:#999;font-style:italic;cursor:default;text-align:center}\n"] }]
         }], ctorParameters: () => [{ type: i0.ElementRef }], propDecorators: { label: [{
                 type: Input
             }], placeholder: [{
@@ -750,6 +896,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
             }], searchInput: [{
                 type: ViewChild,
                 args: ['searchInput']
+            }], onKeyDown: [{
+                type: HostListener,
+                args: ['keydown', ['$event']]
             }], onClickOutside: [{
                 type: HostListener,
                 args: ['document:click', ['$event']]
@@ -792,6 +941,16 @@ class FvFileSelectorComponent {
     ngOnDestroy() {
         this.subscription?.unsubscribe();
     }
+    ngOnChanges(changes) {
+        if (changes['disabled'] && this.control) {
+            if (this.disabled) {
+                this.control.disable({ emitEvent: false });
+            }
+            else {
+                this.control.enable({ emitEvent: false });
+            }
+        }
+    }
     validateValue(value) {
         if (!this.schema)
             return;
@@ -860,11 +1019,11 @@ class FvFileSelectorComponent {
         return errorMessages[this.errorMessage] || this.errorMessage;
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: FvFileSelectorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: FvFileSelectorComponent, isStandalone: true, selector: "fv-file-selector", inputs: { label: "label", placeholder: "placeholder", schema: "schema", control: "control", disabled: "disabled", accept: "accept", maxSize: "maxSize" }, outputs: { valueChange: "valueChange", blur: "blur" }, viewQueries: [{ propertyName: "fileInput", first: true, predicate: ["fileInput"], descendants: true }], ngImport: i0, template: "<div class=\"fv-file-selector-container\">\r\n    <label *ngIf=\"label\" class=\"fv-file-selector-label\">\r\n        {{ label }}\r\n        <span *ngIf=\"isRequired()\" class=\"required-asterisk\">*</span>\r\n    </label>\r\n\r\n    <input #fileInput type=\"file\" [accept]=\"accept\" (change)=\"onFileSelected($event)\" style=\"display: none\" />\r\n\r\n    <button type=\"button\" class=\"fv-file-selector-button\" [class.fv-file-selector-button-error]=\"errorMessage\"\r\n        [class.fv-file-selector-button-disabled]=\"disabled\" (click)=\"openFileDialog()\" [disabled]=\"disabled\">\r\n        {{ placeholder }}\r\n    </button>\r\n\r\n    <div *ngIf=\"selectedFile\" class=\"fv-file-info\">\r\n        <div class=\"fv-file-details\">\r\n            <div class=\"fv-file-name\">\uD83D\uDCC4 {{ selectedFile.name }}</div>\r\n            <div class=\"fv-file-size\">{{ formatFileSize(selectedFile.size) }}</div>\r\n        </div>\r\n        <button type=\"button\" class=\"fv-file-remove\" (click)=\"removeFile()\" [disabled]=\"disabled\">\r\n            \u2715\r\n        </button>\r\n    </div>\r\n\r\n    <div *ngIf=\"errorMessage\" class=\"fv-file-selector-error-message\">\r\n        \u26A0 {{ getErrorMessage() }}\r\n    </div>\r\n</div>", styles: [".fv-file-selector-container{display:flex;flex-direction:column;margin-bottom:16px;width:100%}.fv-file-selector-label{font-size:14px;font-weight:500;color:#333;margin-bottom:6px;display:block}.required-asterisk{color:#dc3545;font-weight:700}.fv-file-selector-button{padding:10px;border:1px solid #007bff;border-radius:4px;background-color:#007bff;color:#fff;font-size:14px;font-weight:500;cursor:pointer;transition:background-color .2s,border-color .2s;text-align:center}.fv-file-selector-button:hover:not(:disabled){background-color:#0056b3;border-color:#0056b3}.fv-file-selector-button-error{border-color:#dc3545;background-color:#dc3545}.fv-file-selector-button-error:hover:not(:disabled){background-color:#c82333;border-color:#c82333}.fv-file-selector-button-disabled{background-color:#ccc;border-color:#ccc;opacity:.6;cursor:not-allowed}.fv-file-info{display:flex;align-items:center;margin-top:8px;padding:10px;background-color:#f8f9fa;border:1px solid #dee2e6;border-radius:4px}.fv-file-details{flex:1}.fv-file-name{font-size:14px;color:#333;margin-bottom:4px;word-break:break-all}.fv-file-size{font-size:12px;color:#6c757d}.fv-file-remove{padding:4px 8px;margin-left:8px;background:none;border:none;font-size:18px;color:#dc3545;font-weight:700;cursor:pointer;transition:color .2s}.fv-file-remove:hover:not(:disabled){color:#c82333}.fv-file-remove:disabled{opacity:.5;cursor:not-allowed}.fv-file-selector-error-message{margin-top:4px;font-size:12px;color:#dc3545}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: ReactiveFormsModule }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: FvFileSelectorComponent, isStandalone: true, selector: "fv-file-selector", inputs: { label: "label", placeholder: "placeholder", schema: "schema", control: "control", disabled: "disabled", accept: "accept", maxSize: "maxSize" }, outputs: { valueChange: "valueChange", blur: "blur" }, viewQueries: [{ propertyName: "fileInput", first: true, predicate: ["fileInput"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div class=\"fv-file-selector-container\">\r\n    <label *ngIf=\"label\" class=\"fv-file-selector-label\">\r\n        {{ label }}\r\n        <span *ngIf=\"isRequired()\" class=\"required-asterisk\">*</span>\r\n    </label>\r\n\r\n    <input #fileInput type=\"file\" [accept]=\"accept\" (change)=\"onFileSelected($event)\" style=\"display: none\" />\r\n\r\n    <button type=\"button\" class=\"fv-file-selector-button\" [class.fv-file-selector-button-error]=\"errorMessage\"\r\n        [class.fv-file-selector-button-disabled]=\"disabled\" (click)=\"openFileDialog()\" [disabled]=\"disabled\">\r\n        {{ placeholder }}\r\n    </button>\r\n\r\n    <div *ngIf=\"selectedFile\" class=\"fv-file-info\">\r\n        <div class=\"fv-file-details\">\r\n            <div class=\"fv-file-name\">\uD83D\uDCC4 {{ selectedFile.name }}</div>\r\n            <div class=\"fv-file-size\">{{ formatFileSize(selectedFile.size) }}</div>\r\n        </div>\r\n        <button type=\"button\" class=\"fv-file-remove\" (click)=\"removeFile()\" [disabled]=\"disabled\">\r\n            \u2715\r\n        </button>\r\n    </div>\r\n\r\n    <div *ngIf=\"errorMessage\" class=\"fv-file-selector-error-message\">\r\n        \u26A0 {{ getErrorMessage() }}\r\n    </div>\r\n</div>", styles: ["@import\"https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap\";*{font-family:Poppins,sans-serif}.fv-file-selector-container{display:flex;flex-direction:column;margin-bottom:16px;width:100%}.fv-file-selector-label{font-size:14px;font-weight:600;color:#151d48;margin-bottom:6px;display:block}.required-asterisk{color:#e74c3c;font-weight:700}.fv-file-selector-button{padding:8px 16px;border:1px solid #3498db;border-radius:8px;background-color:#3498db;color:#fff;font-size:14px;font-weight:500;cursor:pointer;transition:background-color .2s,border-color .2s;text-align:center}.fv-file-selector-button:hover:not(:disabled){background-color:#2980b9;border-color:#2980b9}.fv-file-selector-button-error{border-color:#e74c3c;background-color:#e74c3c}.fv-file-selector-button-error:hover:not(:disabled){background-color:#c0392b;border-color:#c0392b}.fv-file-selector-button-disabled{background-color:#ecf0f1;border-color:#ecf0f1;color:#7f8c8d;opacity:.6;cursor:not-allowed}.fv-file-info{display:flex;align-items:center;margin-top:8px;padding:10px;background-color:#f8f9fa;border:1px solid #8CBBA8;border-radius:8px}.fv-file-details{flex:1}.fv-file-name{font-size:14px;color:#1f2b41;margin-bottom:4px;word-break:break-all}.fv-file-size{font-size:12px;color:#6c757d}.fv-file-remove{padding:4px 8px;margin-left:8px;background:none;border:none;font-size:18px;color:#e74c3c;font-weight:700;cursor:pointer;transition:color .2s}.fv-file-remove:hover:not(:disabled){color:#c0392b}.fv-file-remove:disabled{opacity:.5;cursor:not-allowed}.fv-file-selector-error-message{margin-top:4px;font-size:12px;color:#e74c3c}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: ReactiveFormsModule }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: FvFileSelectorComponent, decorators: [{
             type: Component,
-            args: [{ standalone: true, imports: [CommonModule, ReactiveFormsModule], selector: 'fv-file-selector', template: "<div class=\"fv-file-selector-container\">\r\n    <label *ngIf=\"label\" class=\"fv-file-selector-label\">\r\n        {{ label }}\r\n        <span *ngIf=\"isRequired()\" class=\"required-asterisk\">*</span>\r\n    </label>\r\n\r\n    <input #fileInput type=\"file\" [accept]=\"accept\" (change)=\"onFileSelected($event)\" style=\"display: none\" />\r\n\r\n    <button type=\"button\" class=\"fv-file-selector-button\" [class.fv-file-selector-button-error]=\"errorMessage\"\r\n        [class.fv-file-selector-button-disabled]=\"disabled\" (click)=\"openFileDialog()\" [disabled]=\"disabled\">\r\n        {{ placeholder }}\r\n    </button>\r\n\r\n    <div *ngIf=\"selectedFile\" class=\"fv-file-info\">\r\n        <div class=\"fv-file-details\">\r\n            <div class=\"fv-file-name\">\uD83D\uDCC4 {{ selectedFile.name }}</div>\r\n            <div class=\"fv-file-size\">{{ formatFileSize(selectedFile.size) }}</div>\r\n        </div>\r\n        <button type=\"button\" class=\"fv-file-remove\" (click)=\"removeFile()\" [disabled]=\"disabled\">\r\n            \u2715\r\n        </button>\r\n    </div>\r\n\r\n    <div *ngIf=\"errorMessage\" class=\"fv-file-selector-error-message\">\r\n        \u26A0 {{ getErrorMessage() }}\r\n    </div>\r\n</div>", styles: [".fv-file-selector-container{display:flex;flex-direction:column;margin-bottom:16px;width:100%}.fv-file-selector-label{font-size:14px;font-weight:500;color:#333;margin-bottom:6px;display:block}.required-asterisk{color:#dc3545;font-weight:700}.fv-file-selector-button{padding:10px;border:1px solid #007bff;border-radius:4px;background-color:#007bff;color:#fff;font-size:14px;font-weight:500;cursor:pointer;transition:background-color .2s,border-color .2s;text-align:center}.fv-file-selector-button:hover:not(:disabled){background-color:#0056b3;border-color:#0056b3}.fv-file-selector-button-error{border-color:#dc3545;background-color:#dc3545}.fv-file-selector-button-error:hover:not(:disabled){background-color:#c82333;border-color:#c82333}.fv-file-selector-button-disabled{background-color:#ccc;border-color:#ccc;opacity:.6;cursor:not-allowed}.fv-file-info{display:flex;align-items:center;margin-top:8px;padding:10px;background-color:#f8f9fa;border:1px solid #dee2e6;border-radius:4px}.fv-file-details{flex:1}.fv-file-name{font-size:14px;color:#333;margin-bottom:4px;word-break:break-all}.fv-file-size{font-size:12px;color:#6c757d}.fv-file-remove{padding:4px 8px;margin-left:8px;background:none;border:none;font-size:18px;color:#dc3545;font-weight:700;cursor:pointer;transition:color .2s}.fv-file-remove:hover:not(:disabled){color:#c82333}.fv-file-remove:disabled{opacity:.5;cursor:not-allowed}.fv-file-selector-error-message{margin-top:4px;font-size:12px;color:#dc3545}\n"] }]
+            args: [{ standalone: true, imports: [CommonModule, ReactiveFormsModule], selector: 'fv-file-selector', template: "<div class=\"fv-file-selector-container\">\r\n    <label *ngIf=\"label\" class=\"fv-file-selector-label\">\r\n        {{ label }}\r\n        <span *ngIf=\"isRequired()\" class=\"required-asterisk\">*</span>\r\n    </label>\r\n\r\n    <input #fileInput type=\"file\" [accept]=\"accept\" (change)=\"onFileSelected($event)\" style=\"display: none\" />\r\n\r\n    <button type=\"button\" class=\"fv-file-selector-button\" [class.fv-file-selector-button-error]=\"errorMessage\"\r\n        [class.fv-file-selector-button-disabled]=\"disabled\" (click)=\"openFileDialog()\" [disabled]=\"disabled\">\r\n        {{ placeholder }}\r\n    </button>\r\n\r\n    <div *ngIf=\"selectedFile\" class=\"fv-file-info\">\r\n        <div class=\"fv-file-details\">\r\n            <div class=\"fv-file-name\">\uD83D\uDCC4 {{ selectedFile.name }}</div>\r\n            <div class=\"fv-file-size\">{{ formatFileSize(selectedFile.size) }}</div>\r\n        </div>\r\n        <button type=\"button\" class=\"fv-file-remove\" (click)=\"removeFile()\" [disabled]=\"disabled\">\r\n            \u2715\r\n        </button>\r\n    </div>\r\n\r\n    <div *ngIf=\"errorMessage\" class=\"fv-file-selector-error-message\">\r\n        \u26A0 {{ getErrorMessage() }}\r\n    </div>\r\n</div>", styles: ["@import\"https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap\";*{font-family:Poppins,sans-serif}.fv-file-selector-container{display:flex;flex-direction:column;margin-bottom:16px;width:100%}.fv-file-selector-label{font-size:14px;font-weight:600;color:#151d48;margin-bottom:6px;display:block}.required-asterisk{color:#e74c3c;font-weight:700}.fv-file-selector-button{padding:8px 16px;border:1px solid #3498db;border-radius:8px;background-color:#3498db;color:#fff;font-size:14px;font-weight:500;cursor:pointer;transition:background-color .2s,border-color .2s;text-align:center}.fv-file-selector-button:hover:not(:disabled){background-color:#2980b9;border-color:#2980b9}.fv-file-selector-button-error{border-color:#e74c3c;background-color:#e74c3c}.fv-file-selector-button-error:hover:not(:disabled){background-color:#c0392b;border-color:#c0392b}.fv-file-selector-button-disabled{background-color:#ecf0f1;border-color:#ecf0f1;color:#7f8c8d;opacity:.6;cursor:not-allowed}.fv-file-info{display:flex;align-items:center;margin-top:8px;padding:10px;background-color:#f8f9fa;border:1px solid #8CBBA8;border-radius:8px}.fv-file-details{flex:1}.fv-file-name{font-size:14px;color:#1f2b41;margin-bottom:4px;word-break:break-all}.fv-file-size{font-size:12px;color:#6c757d}.fv-file-remove{padding:4px 8px;margin-left:8px;background:none;border:none;font-size:18px;color:#e74c3c;font-weight:700;cursor:pointer;transition:color .2s}.fv-file-remove:hover:not(:disabled){color:#c0392b}.fv-file-remove:disabled{opacity:.5;cursor:not-allowed}.fv-file-selector-error-message{margin-top:4px;font-size:12px;color:#e74c3c}\n"] }]
         }], propDecorators: { label: [{
                 type: Input
             }], placeholder: [{
@@ -1011,11 +1170,11 @@ class FvImageSelectorComponent {
         return errorMessages[this.errorMessage] || this.errorMessage;
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: FvImageSelectorComponent, deps: [{ token: i1$1.DomSanitizer }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: FvImageSelectorComponent, isStandalone: true, selector: "fv-image-selector", inputs: { label: "label", placeholder: "placeholder", schema: "schema", control: "control", disabled: "disabled", maxSize: "maxSize" }, outputs: { valueChange: "valueChange", blur: "blur" }, viewQueries: [{ propertyName: "imageInput", first: true, predicate: ["imageInput"], descendants: true }], ngImport: i0, template: "<div class=\"fv-image-selector-container\">\r\n    <label *ngIf=\"label\" class=\"fv-image-selector-label\">\r\n        {{ label }}\r\n        <span *ngIf=\"isRequired()\" class=\"required-asterisk\">*</span>\r\n    </label>\r\n\r\n    <input #imageInput type=\"file\" accept=\"image/*\" (change)=\"onImageSelected($event)\" style=\"display: none\" />\r\n\r\n    <div *ngIf=\"!selectedImage; else previewTemplate\">\r\n        <button type=\"button\" class=\"fv-image-selector-button\" [class.fv-image-selector-button-error]=\"errorMessage\"\r\n            [class.fv-image-selector-button-disabled]=\"disabled\" (click)=\"openImageDialog()\" [disabled]=\"disabled\">\r\n            \uD83D\uDCF7 {{ placeholder }}\r\n        </button>\r\n    </div>\r\n\r\n    <ng-template #previewTemplate>\r\n        <div class=\"fv-image-preview-container\">\r\n            <img [src]=\"selectedImage!.url\" class=\"fv-image-preview\" alt=\"Selected image\" />\r\n            <div class=\"fv-image-actions\">\r\n                <button type=\"button\" class=\"fv-image-change-button\" (click)=\"openImageDialog()\" [disabled]=\"disabled\">\r\n                    Change\r\n                </button>\r\n                <button type=\"button\" class=\"fv-image-remove-button\" (click)=\"removeImage()\" [disabled]=\"disabled\">\r\n                    Remove\r\n                </button>\r\n            </div>\r\n            <div class=\"fv-image-info\">\r\n                {{ selectedImage!.width }} \u00D7 {{ selectedImage!.height }} \u2022\r\n                {{ formatFileSize(selectedImage!.size) }}\r\n            </div>\r\n        </div>\r\n    </ng-template>\r\n\r\n    <div *ngIf=\"errorMessage\" class=\"fv-image-selector-error-message\">\r\n        \u26A0 {{ getErrorMessage() }}\r\n    </div>\r\n</div>", styles: [".fv-image-selector-container{display:flex;flex-direction:column;margin-bottom:16px;width:100%}.fv-image-selector-label{font-size:14px;font-weight:500;color:#333;margin-bottom:6px;display:block}.required-asterisk{color:#dc3545;font-weight:700}.fv-image-selector-button{padding:40px;border:2px dashed #007bff;border-radius:8px;background-color:#f8f9fa;color:#007bff;font-size:14px;font-weight:500;cursor:pointer;transition:background-color .2s,border-color .2s;width:100%;text-align:center}.fv-image-selector-button:hover:not(:disabled){background-color:#e7f3ff}.fv-image-selector-button-error{border-color:#dc3545;color:#dc3545}.fv-image-selector-button-disabled{border-color:#ccc;background-color:#f5f5f5;color:#ccc;opacity:.6;cursor:not-allowed}.fv-image-preview-container{display:flex;flex-direction:column;align-items:center}.fv-image-preview{width:100%;max-width:600px;height:200px;object-fit:cover;border-radius:8px;background-color:#f0f0f0;margin-bottom:8px}.fv-image-actions{display:flex;gap:8px;margin-bottom:4px}.fv-image-change-button{padding:8px 16px;background-color:#007bff;color:#fff;border:none;border-radius:4px;font-size:14px;font-weight:500;cursor:pointer;transition:background-color .2s}.fv-image-change-button:hover:not(:disabled){background-color:#0056b3}.fv-image-change-button:disabled{opacity:.6;cursor:not-allowed}.fv-image-remove-button{padding:8px 16px;background-color:#dc3545;color:#fff;border:none;border-radius:4px;font-size:14px;font-weight:500;cursor:pointer;transition:background-color .2s}.fv-image-remove-button:hover:not(:disabled){background-color:#c82333}.fv-image-remove-button:disabled{opacity:.6;cursor:not-allowed}.fv-image-info{font-size:12px;color:#6c757d;text-align:center}.fv-image-selector-error-message{margin-top:4px;font-size:12px;color:#dc3545}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: ReactiveFormsModule }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: FvImageSelectorComponent, isStandalone: true, selector: "fv-image-selector", inputs: { label: "label", placeholder: "placeholder", schema: "schema", control: "control", disabled: "disabled", maxSize: "maxSize" }, outputs: { valueChange: "valueChange", blur: "blur" }, viewQueries: [{ propertyName: "imageInput", first: true, predicate: ["imageInput"], descendants: true }], ngImport: i0, template: "<div class=\"fv-image-selector-container\">\r\n    <label *ngIf=\"label\" class=\"fv-image-selector-label\">\r\n        {{ label }}\r\n        <span *ngIf=\"isRequired()\" class=\"required-asterisk\">*</span>\r\n    </label>\r\n\r\n    <input #imageInput type=\"file\" accept=\"image/*\" (change)=\"onImageSelected($event)\" style=\"display: none\" />\r\n\r\n    <div *ngIf=\"!selectedImage; else previewTemplate\">\r\n        <button type=\"button\" class=\"fv-image-selector-button\" [class.fv-image-selector-button-error]=\"errorMessage\"\r\n            [class.fv-image-selector-button-disabled]=\"disabled\" (click)=\"openImageDialog()\" [disabled]=\"disabled\">\r\n            \uD83D\uDCF7 {{ placeholder }}\r\n        </button>\r\n    </div>\r\n\r\n    <ng-template #previewTemplate>\r\n        <div class=\"fv-image-preview-container\">\r\n            <img [src]=\"selectedImage!.url\" class=\"fv-image-preview\" alt=\"Selected image\" />\r\n            <div class=\"fv-image-actions\">\r\n                <button type=\"button\" class=\"fv-image-change-button\" (click)=\"openImageDialog()\" [disabled]=\"disabled\">\r\n                    Change\r\n                </button>\r\n                <button type=\"button\" class=\"fv-image-remove-button\" (click)=\"removeImage()\" [disabled]=\"disabled\">\r\n                    Remove\r\n                </button>\r\n            </div>\r\n            <div class=\"fv-image-info\">\r\n                {{ selectedImage!.width }} \u00D7 {{ selectedImage!.height }} \u2022\r\n                {{ formatFileSize(selectedImage!.size) }}\r\n            </div>\r\n        </div>\r\n    </ng-template>\r\n\r\n    <div *ngIf=\"errorMessage\" class=\"fv-image-selector-error-message\">\r\n        \u26A0 {{ getErrorMessage() }}\r\n    </div>\r\n</div>", styles: ["@import\"https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap\";*{font-family:Poppins,sans-serif}.fv-image-selector-container{display:flex;flex-direction:column;margin-bottom:16px;width:100%}.fv-image-selector-label{font-size:14px;font-weight:600;color:#151d48;margin-bottom:6px;display:block}.required-asterisk{color:#e74c3c;font-weight:700}.fv-image-selector-button{padding:40px;border:2px dashed #3498db;border-radius:8px;background-color:#f8f9fa;color:#3498db;font-size:14px;font-weight:500;cursor:pointer;transition:background-color .2s,border-color .2s;width:100%;text-align:center;box-sizing:border-box}.fv-image-selector-button:hover:not(:disabled){background-color:#e7f3ff}.fv-image-selector-button-error{border-color:#e74c3c;color:#e74c3c}.fv-image-selector-button-disabled{border-color:#ccc;background-color:#f5f5f5;color:#ccc;opacity:.6;cursor:not-allowed}.fv-image-preview-container{display:flex;flex-direction:column;align-items:center}.fv-image-preview{width:100%;max-width:600px;height:200px;object-fit:cover;border-radius:8px;background-color:#f0f0f0;margin-bottom:8px}.fv-image-actions{display:flex;gap:8px;margin-bottom:4px}.fv-image-change-button{padding:8px 16px;background-color:#3498db;color:#fff;border:none;border-radius:8px;font-size:14px;font-weight:500;cursor:pointer;transition:background-color .2s}.fv-image-change-button:hover:not(:disabled){background-color:#2980b9}.fv-image-change-button:disabled{opacity:.6;cursor:not-allowed}.fv-image-remove-button{padding:8px 16px;background-color:#e74c3c;color:#fff;border:none;border-radius:8px;font-size:14px;font-weight:500;cursor:pointer;transition:background-color .2s}.fv-image-remove-button:hover:not(:disabled){background-color:#c0392b}.fv-image-remove-button:disabled{opacity:.6;cursor:not-allowed}.fv-image-info{font-size:12px;color:#6c757d;text-align:center}.fv-image-selector-error-message{margin-top:4px;font-size:12px;color:#e74c3c}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: ReactiveFormsModule }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: FvImageSelectorComponent, decorators: [{
             type: Component,
-            args: [{ standalone: true, imports: [CommonModule, ReactiveFormsModule], selector: 'fv-image-selector', template: "<div class=\"fv-image-selector-container\">\r\n    <label *ngIf=\"label\" class=\"fv-image-selector-label\">\r\n        {{ label }}\r\n        <span *ngIf=\"isRequired()\" class=\"required-asterisk\">*</span>\r\n    </label>\r\n\r\n    <input #imageInput type=\"file\" accept=\"image/*\" (change)=\"onImageSelected($event)\" style=\"display: none\" />\r\n\r\n    <div *ngIf=\"!selectedImage; else previewTemplate\">\r\n        <button type=\"button\" class=\"fv-image-selector-button\" [class.fv-image-selector-button-error]=\"errorMessage\"\r\n            [class.fv-image-selector-button-disabled]=\"disabled\" (click)=\"openImageDialog()\" [disabled]=\"disabled\">\r\n            \uD83D\uDCF7 {{ placeholder }}\r\n        </button>\r\n    </div>\r\n\r\n    <ng-template #previewTemplate>\r\n        <div class=\"fv-image-preview-container\">\r\n            <img [src]=\"selectedImage!.url\" class=\"fv-image-preview\" alt=\"Selected image\" />\r\n            <div class=\"fv-image-actions\">\r\n                <button type=\"button\" class=\"fv-image-change-button\" (click)=\"openImageDialog()\" [disabled]=\"disabled\">\r\n                    Change\r\n                </button>\r\n                <button type=\"button\" class=\"fv-image-remove-button\" (click)=\"removeImage()\" [disabled]=\"disabled\">\r\n                    Remove\r\n                </button>\r\n            </div>\r\n            <div class=\"fv-image-info\">\r\n                {{ selectedImage!.width }} \u00D7 {{ selectedImage!.height }} \u2022\r\n                {{ formatFileSize(selectedImage!.size) }}\r\n            </div>\r\n        </div>\r\n    </ng-template>\r\n\r\n    <div *ngIf=\"errorMessage\" class=\"fv-image-selector-error-message\">\r\n        \u26A0 {{ getErrorMessage() }}\r\n    </div>\r\n</div>", styles: [".fv-image-selector-container{display:flex;flex-direction:column;margin-bottom:16px;width:100%}.fv-image-selector-label{font-size:14px;font-weight:500;color:#333;margin-bottom:6px;display:block}.required-asterisk{color:#dc3545;font-weight:700}.fv-image-selector-button{padding:40px;border:2px dashed #007bff;border-radius:8px;background-color:#f8f9fa;color:#007bff;font-size:14px;font-weight:500;cursor:pointer;transition:background-color .2s,border-color .2s;width:100%;text-align:center}.fv-image-selector-button:hover:not(:disabled){background-color:#e7f3ff}.fv-image-selector-button-error{border-color:#dc3545;color:#dc3545}.fv-image-selector-button-disabled{border-color:#ccc;background-color:#f5f5f5;color:#ccc;opacity:.6;cursor:not-allowed}.fv-image-preview-container{display:flex;flex-direction:column;align-items:center}.fv-image-preview{width:100%;max-width:600px;height:200px;object-fit:cover;border-radius:8px;background-color:#f0f0f0;margin-bottom:8px}.fv-image-actions{display:flex;gap:8px;margin-bottom:4px}.fv-image-change-button{padding:8px 16px;background-color:#007bff;color:#fff;border:none;border-radius:4px;font-size:14px;font-weight:500;cursor:pointer;transition:background-color .2s}.fv-image-change-button:hover:not(:disabled){background-color:#0056b3}.fv-image-change-button:disabled{opacity:.6;cursor:not-allowed}.fv-image-remove-button{padding:8px 16px;background-color:#dc3545;color:#fff;border:none;border-radius:4px;font-size:14px;font-weight:500;cursor:pointer;transition:background-color .2s}.fv-image-remove-button:hover:not(:disabled){background-color:#c82333}.fv-image-remove-button:disabled{opacity:.6;cursor:not-allowed}.fv-image-info{font-size:12px;color:#6c757d;text-align:center}.fv-image-selector-error-message{margin-top:4px;font-size:12px;color:#dc3545}\n"] }]
+            args: [{ standalone: true, imports: [CommonModule, ReactiveFormsModule], selector: 'fv-image-selector', template: "<div class=\"fv-image-selector-container\">\r\n    <label *ngIf=\"label\" class=\"fv-image-selector-label\">\r\n        {{ label }}\r\n        <span *ngIf=\"isRequired()\" class=\"required-asterisk\">*</span>\r\n    </label>\r\n\r\n    <input #imageInput type=\"file\" accept=\"image/*\" (change)=\"onImageSelected($event)\" style=\"display: none\" />\r\n\r\n    <div *ngIf=\"!selectedImage; else previewTemplate\">\r\n        <button type=\"button\" class=\"fv-image-selector-button\" [class.fv-image-selector-button-error]=\"errorMessage\"\r\n            [class.fv-image-selector-button-disabled]=\"disabled\" (click)=\"openImageDialog()\" [disabled]=\"disabled\">\r\n            \uD83D\uDCF7 {{ placeholder }}\r\n        </button>\r\n    </div>\r\n\r\n    <ng-template #previewTemplate>\r\n        <div class=\"fv-image-preview-container\">\r\n            <img [src]=\"selectedImage!.url\" class=\"fv-image-preview\" alt=\"Selected image\" />\r\n            <div class=\"fv-image-actions\">\r\n                <button type=\"button\" class=\"fv-image-change-button\" (click)=\"openImageDialog()\" [disabled]=\"disabled\">\r\n                    Change\r\n                </button>\r\n                <button type=\"button\" class=\"fv-image-remove-button\" (click)=\"removeImage()\" [disabled]=\"disabled\">\r\n                    Remove\r\n                </button>\r\n            </div>\r\n            <div class=\"fv-image-info\">\r\n                {{ selectedImage!.width }} \u00D7 {{ selectedImage!.height }} \u2022\r\n                {{ formatFileSize(selectedImage!.size) }}\r\n            </div>\r\n        </div>\r\n    </ng-template>\r\n\r\n    <div *ngIf=\"errorMessage\" class=\"fv-image-selector-error-message\">\r\n        \u26A0 {{ getErrorMessage() }}\r\n    </div>\r\n</div>", styles: ["@import\"https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap\";*{font-family:Poppins,sans-serif}.fv-image-selector-container{display:flex;flex-direction:column;margin-bottom:16px;width:100%}.fv-image-selector-label{font-size:14px;font-weight:600;color:#151d48;margin-bottom:6px;display:block}.required-asterisk{color:#e74c3c;font-weight:700}.fv-image-selector-button{padding:40px;border:2px dashed #3498db;border-radius:8px;background-color:#f8f9fa;color:#3498db;font-size:14px;font-weight:500;cursor:pointer;transition:background-color .2s,border-color .2s;width:100%;text-align:center;box-sizing:border-box}.fv-image-selector-button:hover:not(:disabled){background-color:#e7f3ff}.fv-image-selector-button-error{border-color:#e74c3c;color:#e74c3c}.fv-image-selector-button-disabled{border-color:#ccc;background-color:#f5f5f5;color:#ccc;opacity:.6;cursor:not-allowed}.fv-image-preview-container{display:flex;flex-direction:column;align-items:center}.fv-image-preview{width:100%;max-width:600px;height:200px;object-fit:cover;border-radius:8px;background-color:#f0f0f0;margin-bottom:8px}.fv-image-actions{display:flex;gap:8px;margin-bottom:4px}.fv-image-change-button{padding:8px 16px;background-color:#3498db;color:#fff;border:none;border-radius:8px;font-size:14px;font-weight:500;cursor:pointer;transition:background-color .2s}.fv-image-change-button:hover:not(:disabled){background-color:#2980b9}.fv-image-change-button:disabled{opacity:.6;cursor:not-allowed}.fv-image-remove-button{padding:8px 16px;background-color:#e74c3c;color:#fff;border:none;border-radius:8px;font-size:14px;font-weight:500;cursor:pointer;transition:background-color .2s}.fv-image-remove-button:hover:not(:disabled){background-color:#c0392b}.fv-image-remove-button:disabled{opacity:.6;cursor:not-allowed}.fv-image-info{font-size:12px;color:#6c757d;text-align:center}.fv-image-selector-error-message{margin-top:4px;font-size:12px;color:#e74c3c}\n"] }]
         }], ctorParameters: () => [{ type: i1$1.DomSanitizer }], propDecorators: { label: [{
                 type: Input
             }], placeholder: [{
@@ -1078,7 +1237,7 @@ class FvRichTextEditorComponent {
     validateValue(value) {
         if (!this.schema)
             return;
-        const result = Validator$1.validate(value, this.schema);
+        const result = Validator.validate(value, this.schema);
         this.errorMessage = result.errorKey;
         if (!result.isValid && result.errorKey) {
             this.control.setErrors({ [result.errorKey]: true });
@@ -1161,11 +1320,11 @@ class FvRichTextEditorComponent {
         return text.trim() ? text.trim().split(/\s+/).length : 0;
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: FvRichTextEditorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: FvRichTextEditorComponent, isStandalone: true, selector: "fv-rich-text-editor", inputs: { label: "label", placeholder: "placeholder", schema: "schema", control: "control", disabled: "disabled", readonly: "readonly", minHeight: "minHeight", showToolbar: "showToolbar" }, outputs: { valueChange: "valueChange", blur: "blur", focus: "focus" }, viewQueries: [{ propertyName: "editorRef", first: true, predicate: ["editor"], descendants: true }], ngImport: i0, template: "<div class=\"fv-rich-text-editor-container\">\r\n    <label *ngIf=\"label\" class=\"fv-rich-text-editor-label\">\r\n        {{ label }}\r\n        <span *ngIf=\"isRequired()\" class=\"required-asterisk\">*</span>\r\n    </label>\r\n\r\n    <div *ngIf=\"showToolbar && !disabled && !readonly\" class=\"fv-rich-text-toolbar\">\r\n        <button type=\"button\" class=\"fv-toolbar-button\" (click)=\"insertText('**', '**')\" title=\"Bold\">\r\n            <strong>B</strong>\r\n        </button>\r\n\r\n        <button type=\"button\" class=\"fv-toolbar-button\" (click)=\"insertText('*', '*')\" title=\"Italic\">\r\n            <em>I</em>\r\n        </button>\r\n\r\n        <button type=\"button\" class=\"fv-toolbar-button\" (click)=\"insertText('__', '__')\" title=\"Underline\">\r\n            <u>U</u>\r\n        </button>\r\n\r\n        <button type=\"button\" class=\"fv-toolbar-button\" (click)=\"insertText('~~', '~~')\" title=\"Strikethrough\">\r\n            <s>S</s>\r\n        </button>\r\n\r\n        <div class=\"fv-toolbar-divider\"></div>\r\n\r\n        <button type=\"button\" class=\"fv-toolbar-button\" (click)=\"handleBulletList()\" title=\"Bullet List\">\r\n            \u2022 List\r\n        </button>\r\n\r\n        <button type=\"button\" class=\"fv-toolbar-button\" (click)=\"handleNumberedList()\" title=\"Numbered List\">\r\n            1. List\r\n        </button>\r\n\r\n        <div class=\"fv-toolbar-divider\"></div>\r\n\r\n        <button type=\"button\" class=\"fv-toolbar-button fv-toolbar-button-danger\" (click)=\"handleClear()\" title=\"Clear\">\r\n            Clear\r\n        </button>\r\n    </div>\r\n\r\n    <textarea #editor class=\"fv-rich-text-editor\" [class.fv-rich-text-editor-error]=\"errorMessage\"\r\n        [class.fv-rich-text-editor-disabled]=\"disabled\" [class.fv-rich-text-editor-focused]=\"isFocused\"\r\n        [formControl]=\"control\" [placeholder]=\"placeholder\" [readonly]=\"readonly\" [disabled]=\"disabled\"\r\n        [style.min-height.px]=\"minHeight\" (blur)=\"onBlur()\" (focus)=\"onFocus()\"></textarea>\r\n\r\n    <div class=\"fv-rich-text-footer\">\r\n        <div class=\"fv-rich-text-stats\">\r\n            {{ getCharacterCount() }} characters \u2022 {{ getWordCount() }} words\r\n        </div>\r\n    </div>\r\n\r\n    <div *ngIf=\"errorMessage\" class=\"fv-rich-text-editor-error-message\">\r\n        \u26A0 {{ getErrorMessage() }}\r\n    </div>\r\n</div>", styles: [".fv-rich-text-editor-container{display:flex;flex-direction:column;margin-bottom:16px;width:100%}.fv-rich-text-editor-label{font-size:14px;font-weight:500;color:#333;margin-bottom:6px;display:block}.required-asterisk{color:#dc3545;font-weight:700}.fv-rich-text-toolbar{display:flex;align-items:center;gap:4px;padding:4px;margin-bottom:8px;border:1px solid #dee2e6;border-radius:4px;background-color:#f8f9fa;flex-wrap:wrap}.fv-toolbar-button{padding:6px 10px;background-color:#fff;border:1px solid #dee2e6;border-radius:4px;font-size:14px;font-weight:500;color:#333;cursor:pointer;transition:background-color .2s,border-color .2s}.fv-toolbar-button:hover{background-color:#e7f3ff;border-color:#007bff}.fv-toolbar-button-danger{color:#dc3545}.fv-toolbar-button-danger:hover{background-color:#ffe0e0;border-color:#dc3545}.fv-toolbar-divider{width:1px;height:24px;background-color:#dee2e6;margin:0 4px}.fv-rich-text-editor{padding:10px;border:1px solid #cccccc;border-radius:4px;font-size:14px;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;background-color:#fff;color:#333;resize:vertical;transition:border-color .2s,box-shadow .2s;outline:none}.fv-rich-text-editor::placeholder{color:#999}.fv-rich-text-editor:focus:not(:disabled):not([readonly]){border-color:#007bff;box-shadow:0 0 0 2px #007bff1a}.fv-rich-text-editor-error{border-color:#dc3545}.fv-rich-text-editor-disabled,.fv-rich-text-editor[readonly]{background-color:#f5f5f5;opacity:.6;cursor:not-allowed}.fv-rich-text-editor-focused{border-color:#007bff;border-width:2px;padding:9px}.fv-rich-text-footer{display:flex;justify-content:flex-end;margin-top:4px}.fv-rich-text-stats{font-size:12px;color:#6c757d}.fv-rich-text-editor-error-message{margin-top:4px;font-size:12px;color:#dc3545}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: FvRichTextEditorComponent, isStandalone: true, selector: "fv-rich-text-editor", inputs: { label: "label", placeholder: "placeholder", schema: "schema", control: "control", disabled: "disabled", readonly: "readonly", minHeight: "minHeight", showToolbar: "showToolbar" }, outputs: { valueChange: "valueChange", blur: "blur", focus: "focus" }, viewQueries: [{ propertyName: "editorRef", first: true, predicate: ["editor"], descendants: true }], ngImport: i0, template: "<div class=\"fv-rich-text-editor-container\">\r\n    <label *ngIf=\"label\" class=\"fv-rich-text-editor-label\">\r\n        {{ label }}\r\n        <span *ngIf=\"isRequired()\" class=\"required-asterisk\">*</span>\r\n    </label>\r\n\r\n    <div *ngIf=\"showToolbar && !disabled && !readonly\" class=\"fv-rich-text-toolbar\">\r\n        <button type=\"button\" class=\"fv-toolbar-button\" (click)=\"insertText('**', '**')\" title=\"Bold\">\r\n            <strong>B</strong>\r\n        </button>\r\n\r\n        <button type=\"button\" class=\"fv-toolbar-button\" (click)=\"insertText('*', '*')\" title=\"Italic\">\r\n            <em>I</em>\r\n        </button>\r\n\r\n        <button type=\"button\" class=\"fv-toolbar-button\" (click)=\"insertText('__', '__')\" title=\"Underline\">\r\n            <u>U</u>\r\n        </button>\r\n\r\n        <button type=\"button\" class=\"fv-toolbar-button\" (click)=\"insertText('~~', '~~')\" title=\"Strikethrough\">\r\n            <s>S</s>\r\n        </button>\r\n\r\n        <div class=\"fv-toolbar-divider\"></div>\r\n\r\n        <button type=\"button\" class=\"fv-toolbar-button\" (click)=\"handleBulletList()\" title=\"Bullet List\">\r\n            \u2022 List\r\n        </button>\r\n\r\n        <button type=\"button\" class=\"fv-toolbar-button\" (click)=\"handleNumberedList()\" title=\"Numbered List\">\r\n            1. List\r\n        </button>\r\n\r\n        <div class=\"fv-toolbar-divider\"></div>\r\n\r\n        <button type=\"button\" class=\"fv-toolbar-button fv-toolbar-button-danger\" (click)=\"handleClear()\" title=\"Clear\">\r\n            Clear\r\n        </button>\r\n    </div>\r\n\r\n    <textarea #editor class=\"fv-rich-text-editor\" [class.fv-rich-text-editor-error]=\"errorMessage\"\r\n        [class.fv-rich-text-editor-disabled]=\"disabled\" [class.fv-rich-text-editor-focused]=\"isFocused\"\r\n        [formControl]=\"control\" [placeholder]=\"placeholder\" [readonly]=\"readonly\" [disabled]=\"disabled\"\r\n        [style.min-height.px]=\"minHeight\" (blur)=\"onBlur()\" (focus)=\"onFocus()\"></textarea>\r\n\r\n    <div class=\"fv-rich-text-footer\">\r\n        <div class=\"fv-rich-text-stats\">\r\n            {{ getCharacterCount() }} characters \u2022 {{ getWordCount() }} words\r\n        </div>\r\n    </div>\r\n\r\n    <div *ngIf=\"errorMessage\" class=\"fv-rich-text-editor-error-message\">\r\n        \u26A0 {{ getErrorMessage() }}\r\n    </div>\r\n</div>", styles: ["@import\"https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap\";*{font-family:Poppins,sans-serif}.fv-rich-text-editor-container{display:flex;flex-direction:column;margin-bottom:16px;width:100%}.fv-rich-text-editor-label{font-size:14px;font-weight:600;color:#151d48;margin-bottom:6px;display:block}.required-asterisk{color:#e74c3c;font-weight:700}.fv-rich-text-toolbar{display:flex;align-items:center;gap:4px;padding:4px;margin-bottom:8px;border:1px solid #dee2e6;border-radius:8px;background-color:#f8f9fa;flex-wrap:wrap}.fv-toolbar-button{padding:6px 10px;background-color:#fff;border:1px solid #dee2e6;border-radius:8px;font-size:14px;font-weight:500;color:#1f2b41;cursor:pointer;transition:background-color .2s,border-color .2s}.fv-toolbar-button:hover{background-color:#e7f3ff;border-color:#3498db}.fv-toolbar-button-danger{color:#e74c3c}.fv-toolbar-button-danger:hover{background-color:#ffe0e0;border-color:#e74c3c}.fv-toolbar-divider{width:1px;height:24px;background-color:#dee2e6;margin:0 4px}.fv-rich-text-editor{padding:10px;border:1px solid #8CBBA8;border-radius:8px;font-size:14px;font-weight:400;font-family:Poppins,sans-serif;background-color:#fff;color:#1f2b41;resize:vertical;transition:border-color .2s,box-shadow .2s;outline:none;box-sizing:border-box;width:100%}.fv-rich-text-editor::placeholder{color:#999}.fv-rich-text-editor:focus:not(:disabled):not([readonly]){border-color:#3498db;box-shadow:0 0 0 3px #3498db1a}.fv-rich-text-editor-error{border-color:#e74c3c}.fv-rich-text-editor-disabled,.fv-rich-text-editor[readonly]{background-color:#ecf0f1;opacity:.6;cursor:not-allowed}.fv-rich-text-editor-focused{border-color:#3498db;border-width:1px}.fv-rich-text-footer{display:flex;justify-content:flex-end;margin-top:4px}.fv-rich-text-stats{font-size:12px;color:#6c757d}.fv-rich-text-editor-error-message{margin-top:4px;font-size:12px;color:#e74c3c}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: FvRichTextEditorComponent, decorators: [{
             type: Component,
-            args: [{ standalone: true, imports: [CommonModule, ReactiveFormsModule], selector: 'fv-rich-text-editor', template: "<div class=\"fv-rich-text-editor-container\">\r\n    <label *ngIf=\"label\" class=\"fv-rich-text-editor-label\">\r\n        {{ label }}\r\n        <span *ngIf=\"isRequired()\" class=\"required-asterisk\">*</span>\r\n    </label>\r\n\r\n    <div *ngIf=\"showToolbar && !disabled && !readonly\" class=\"fv-rich-text-toolbar\">\r\n        <button type=\"button\" class=\"fv-toolbar-button\" (click)=\"insertText('**', '**')\" title=\"Bold\">\r\n            <strong>B</strong>\r\n        </button>\r\n\r\n        <button type=\"button\" class=\"fv-toolbar-button\" (click)=\"insertText('*', '*')\" title=\"Italic\">\r\n            <em>I</em>\r\n        </button>\r\n\r\n        <button type=\"button\" class=\"fv-toolbar-button\" (click)=\"insertText('__', '__')\" title=\"Underline\">\r\n            <u>U</u>\r\n        </button>\r\n\r\n        <button type=\"button\" class=\"fv-toolbar-button\" (click)=\"insertText('~~', '~~')\" title=\"Strikethrough\">\r\n            <s>S</s>\r\n        </button>\r\n\r\n        <div class=\"fv-toolbar-divider\"></div>\r\n\r\n        <button type=\"button\" class=\"fv-toolbar-button\" (click)=\"handleBulletList()\" title=\"Bullet List\">\r\n            \u2022 List\r\n        </button>\r\n\r\n        <button type=\"button\" class=\"fv-toolbar-button\" (click)=\"handleNumberedList()\" title=\"Numbered List\">\r\n            1. List\r\n        </button>\r\n\r\n        <div class=\"fv-toolbar-divider\"></div>\r\n\r\n        <button type=\"button\" class=\"fv-toolbar-button fv-toolbar-button-danger\" (click)=\"handleClear()\" title=\"Clear\">\r\n            Clear\r\n        </button>\r\n    </div>\r\n\r\n    <textarea #editor class=\"fv-rich-text-editor\" [class.fv-rich-text-editor-error]=\"errorMessage\"\r\n        [class.fv-rich-text-editor-disabled]=\"disabled\" [class.fv-rich-text-editor-focused]=\"isFocused\"\r\n        [formControl]=\"control\" [placeholder]=\"placeholder\" [readonly]=\"readonly\" [disabled]=\"disabled\"\r\n        [style.min-height.px]=\"minHeight\" (blur)=\"onBlur()\" (focus)=\"onFocus()\"></textarea>\r\n\r\n    <div class=\"fv-rich-text-footer\">\r\n        <div class=\"fv-rich-text-stats\">\r\n            {{ getCharacterCount() }} characters \u2022 {{ getWordCount() }} words\r\n        </div>\r\n    </div>\r\n\r\n    <div *ngIf=\"errorMessage\" class=\"fv-rich-text-editor-error-message\">\r\n        \u26A0 {{ getErrorMessage() }}\r\n    </div>\r\n</div>", styles: [".fv-rich-text-editor-container{display:flex;flex-direction:column;margin-bottom:16px;width:100%}.fv-rich-text-editor-label{font-size:14px;font-weight:500;color:#333;margin-bottom:6px;display:block}.required-asterisk{color:#dc3545;font-weight:700}.fv-rich-text-toolbar{display:flex;align-items:center;gap:4px;padding:4px;margin-bottom:8px;border:1px solid #dee2e6;border-radius:4px;background-color:#f8f9fa;flex-wrap:wrap}.fv-toolbar-button{padding:6px 10px;background-color:#fff;border:1px solid #dee2e6;border-radius:4px;font-size:14px;font-weight:500;color:#333;cursor:pointer;transition:background-color .2s,border-color .2s}.fv-toolbar-button:hover{background-color:#e7f3ff;border-color:#007bff}.fv-toolbar-button-danger{color:#dc3545}.fv-toolbar-button-danger:hover{background-color:#ffe0e0;border-color:#dc3545}.fv-toolbar-divider{width:1px;height:24px;background-color:#dee2e6;margin:0 4px}.fv-rich-text-editor{padding:10px;border:1px solid #cccccc;border-radius:4px;font-size:14px;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;background-color:#fff;color:#333;resize:vertical;transition:border-color .2s,box-shadow .2s;outline:none}.fv-rich-text-editor::placeholder{color:#999}.fv-rich-text-editor:focus:not(:disabled):not([readonly]){border-color:#007bff;box-shadow:0 0 0 2px #007bff1a}.fv-rich-text-editor-error{border-color:#dc3545}.fv-rich-text-editor-disabled,.fv-rich-text-editor[readonly]{background-color:#f5f5f5;opacity:.6;cursor:not-allowed}.fv-rich-text-editor-focused{border-color:#007bff;border-width:2px;padding:9px}.fv-rich-text-footer{display:flex;justify-content:flex-end;margin-top:4px}.fv-rich-text-stats{font-size:12px;color:#6c757d}.fv-rich-text-editor-error-message{margin-top:4px;font-size:12px;color:#dc3545}\n"] }]
+            args: [{ standalone: true, imports: [CommonModule, ReactiveFormsModule], selector: 'fv-rich-text-editor', template: "<div class=\"fv-rich-text-editor-container\">\r\n    <label *ngIf=\"label\" class=\"fv-rich-text-editor-label\">\r\n        {{ label }}\r\n        <span *ngIf=\"isRequired()\" class=\"required-asterisk\">*</span>\r\n    </label>\r\n\r\n    <div *ngIf=\"showToolbar && !disabled && !readonly\" class=\"fv-rich-text-toolbar\">\r\n        <button type=\"button\" class=\"fv-toolbar-button\" (click)=\"insertText('**', '**')\" title=\"Bold\">\r\n            <strong>B</strong>\r\n        </button>\r\n\r\n        <button type=\"button\" class=\"fv-toolbar-button\" (click)=\"insertText('*', '*')\" title=\"Italic\">\r\n            <em>I</em>\r\n        </button>\r\n\r\n        <button type=\"button\" class=\"fv-toolbar-button\" (click)=\"insertText('__', '__')\" title=\"Underline\">\r\n            <u>U</u>\r\n        </button>\r\n\r\n        <button type=\"button\" class=\"fv-toolbar-button\" (click)=\"insertText('~~', '~~')\" title=\"Strikethrough\">\r\n            <s>S</s>\r\n        </button>\r\n\r\n        <div class=\"fv-toolbar-divider\"></div>\r\n\r\n        <button type=\"button\" class=\"fv-toolbar-button\" (click)=\"handleBulletList()\" title=\"Bullet List\">\r\n            \u2022 List\r\n        </button>\r\n\r\n        <button type=\"button\" class=\"fv-toolbar-button\" (click)=\"handleNumberedList()\" title=\"Numbered List\">\r\n            1. List\r\n        </button>\r\n\r\n        <div class=\"fv-toolbar-divider\"></div>\r\n\r\n        <button type=\"button\" class=\"fv-toolbar-button fv-toolbar-button-danger\" (click)=\"handleClear()\" title=\"Clear\">\r\n            Clear\r\n        </button>\r\n    </div>\r\n\r\n    <textarea #editor class=\"fv-rich-text-editor\" [class.fv-rich-text-editor-error]=\"errorMessage\"\r\n        [class.fv-rich-text-editor-disabled]=\"disabled\" [class.fv-rich-text-editor-focused]=\"isFocused\"\r\n        [formControl]=\"control\" [placeholder]=\"placeholder\" [readonly]=\"readonly\" [disabled]=\"disabled\"\r\n        [style.min-height.px]=\"minHeight\" (blur)=\"onBlur()\" (focus)=\"onFocus()\"></textarea>\r\n\r\n    <div class=\"fv-rich-text-footer\">\r\n        <div class=\"fv-rich-text-stats\">\r\n            {{ getCharacterCount() }} characters \u2022 {{ getWordCount() }} words\r\n        </div>\r\n    </div>\r\n\r\n    <div *ngIf=\"errorMessage\" class=\"fv-rich-text-editor-error-message\">\r\n        \u26A0 {{ getErrorMessage() }}\r\n    </div>\r\n</div>", styles: ["@import\"https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap\";*{font-family:Poppins,sans-serif}.fv-rich-text-editor-container{display:flex;flex-direction:column;margin-bottom:16px;width:100%}.fv-rich-text-editor-label{font-size:14px;font-weight:600;color:#151d48;margin-bottom:6px;display:block}.required-asterisk{color:#e74c3c;font-weight:700}.fv-rich-text-toolbar{display:flex;align-items:center;gap:4px;padding:4px;margin-bottom:8px;border:1px solid #dee2e6;border-radius:8px;background-color:#f8f9fa;flex-wrap:wrap}.fv-toolbar-button{padding:6px 10px;background-color:#fff;border:1px solid #dee2e6;border-radius:8px;font-size:14px;font-weight:500;color:#1f2b41;cursor:pointer;transition:background-color .2s,border-color .2s}.fv-toolbar-button:hover{background-color:#e7f3ff;border-color:#3498db}.fv-toolbar-button-danger{color:#e74c3c}.fv-toolbar-button-danger:hover{background-color:#ffe0e0;border-color:#e74c3c}.fv-toolbar-divider{width:1px;height:24px;background-color:#dee2e6;margin:0 4px}.fv-rich-text-editor{padding:10px;border:1px solid #8CBBA8;border-radius:8px;font-size:14px;font-weight:400;font-family:Poppins,sans-serif;background-color:#fff;color:#1f2b41;resize:vertical;transition:border-color .2s,box-shadow .2s;outline:none;box-sizing:border-box;width:100%}.fv-rich-text-editor::placeholder{color:#999}.fv-rich-text-editor:focus:not(:disabled):not([readonly]){border-color:#3498db;box-shadow:0 0 0 3px #3498db1a}.fv-rich-text-editor-error{border-color:#e74c3c}.fv-rich-text-editor-disabled,.fv-rich-text-editor[readonly]{background-color:#ecf0f1;opacity:.6;cursor:not-allowed}.fv-rich-text-editor-focused{border-color:#3498db;border-width:1px}.fv-rich-text-footer{display:flex;justify-content:flex-end;margin-top:4px}.fv-rich-text-stats{font-size:12px;color:#6c757d}.fv-rich-text-editor-error-message{margin-top:4px;font-size:12px;color:#e74c3c}\n"] }]
         }], propDecorators: { label: [{
                 type: Input
             }], placeholder: [{
@@ -1198,31 +1357,21 @@ class FvNameCodeComponent {
     placeholder = '';
     options = [];
     schema;
-    control; // Alternative to formControlName
+    control;
     disabled = false;
     selectionChange = new EventEmitter();
     searchControl = new FormControl('');
     filteredOptions = [];
     isOpen = false;
-    // Implementation of ControlValueAccessor
+    highlightedIndex = -1;
     onChange = () => { };
     onTouched = () => { };
     value = null;
     ngOnInit() {
         this.filteredOptions = this.options;
-        // Setup search filter
         this.searchControl.valueChanges.subscribe(term => {
             this.filterOptions(term || '');
-            if (!term && this.value) {
-                // If user clears search but had a value, we might want to keep the value or clear it?
-                // Usually search box is separate from value display. 
-                // But here the input acts as both display and search.
-                // If user types, value is technically unset until selection?
-                // Let's assume typing clears the current selection if it doesn't match?
-                // For now, simple behavior: typing filters list. Selection sets value and display text.
-            }
         });
-        // If control is passed directly
         if (this.control) {
             if (this.control.value) {
                 this.writeValue(this.control.value);
@@ -1230,7 +1379,6 @@ class FvNameCodeComponent {
             this.control.valueChanges.subscribe(val => {
                 this.writeValue(val);
             });
-            // Sync disabled state
             if (this.control.disabled !== this.disabled) {
                 this.setDisabledState(this.control.disabled);
             }
@@ -1249,6 +1397,7 @@ class FvNameCodeComponent {
         if (!this.disabled) {
             this.isOpen = true;
             this.filterOptions(this.searchControl.value || '');
+            this.highlightedIndex = this.filteredOptions.length === 1 ? 0 : -1;
         }
     }
     onBlur() {
@@ -1256,14 +1405,12 @@ class FvNameCodeComponent {
     }
     closeDropdown() {
         this.isOpen = false;
-        // Restore display text if not selected?
+        this.highlightedIndex = -1;
         const selectedOption = this.options.find(o => o.value === this.value);
         if (selectedOption) {
             this.searchControl.setValue(`${selectedOption.code} - ${selectedOption.name}`, { emitEvent: false });
         }
         else {
-            // If no valid value, clear text? or keep partial text?
-            // Usually better to clear if no selection made
             if (!this.value) {
                 this.searchControl.setValue('', { emitEvent: false });
             }
@@ -1271,11 +1418,14 @@ class FvNameCodeComponent {
         this.onTouched();
     }
     selectOption(option) {
+        if (!option)
+            return;
         this.value = option.value;
         this.onChange(this.value);
         this.searchControl.setValue(`${option.code} - ${option.name}`, { emitEvent: false });
         this.selectionChange.emit(this.value);
         this.isOpen = false;
+        this.highlightedIndex = -1;
     }
     writeValue(value) {
         this.value = value;
@@ -1315,18 +1465,12 @@ class FvNameCodeComponent {
         if (!this.control || !this.control.errors || !this.schema)
             return '';
         for (const errorKey of this.schema.errorPriority) {
-            if (this.control.hasError(errorKey)) { // This matches how typical validators set errors (e.g. required: true)
-                // However, our validation engine might set explicit keys. 
-                // Standard angular validators use 'required', 'minlength', etc.
-                // Our schema maps 'required' -> 'ERR_REQUIRED'.
-                // We need to fetch the message based on rules.
-                // For simplicity in this demo, return generic or mapped string.
-                const rule = this.schema.rules.find(r => r.name === (errorKey === 'required' ? 'required' : errorKey)); // simplified logic
+            if (this.control.hasError(errorKey)) {
+                const rule = this.schema.rules.find(r => r.name === (errorKey === 'required' ? 'required' : errorKey));
                 if (rule)
-                    return this.getReadableError(rule.errorKey);
+                    return this.getReadableError(rule.errorKey || '');
             }
         }
-        // Fallback for standard angular errors
         if (this.control.hasError('required'))
             return 'This field is required';
         return 'Invalid value';
@@ -1335,27 +1479,74 @@ class FvNameCodeComponent {
         const map = {
             'ERR_REQUIRED': 'This field is required',
             'ERR_MIN_LENGTH': 'Value is too short',
-            // Add others as needed
         };
         return map[key] || 'Invalid value';
     }
     onClickOutside(event) {
-        const element = event.target;
-        // Check if click is inside component
         const clickedInside = event.target.closest('.fv-name-code-container');
         if (!clickedInside) {
             this.closeDropdown();
         }
     }
+    onKeyDown(event) {
+        if (!this.isOpen && (event.key === 'ArrowDown' || event.key === 'ArrowUp' || event.key === 'Enter')) {
+            this.openDropdown();
+            event.preventDefault();
+            return;
+        }
+        if (!this.isOpen)
+            return;
+        switch (event.key) {
+            case 'ArrowDown':
+                event.preventDefault();
+                this.highlightedIndex = (this.highlightedIndex + 1) % this.filteredOptions.length;
+                this.scrollToHighlighted();
+                break;
+            case 'ArrowUp':
+                event.preventDefault();
+                this.highlightedIndex = (this.highlightedIndex - 1 + this.filteredOptions.length) % this.filteredOptions.length;
+                this.scrollToHighlighted();
+                break;
+            case 'Enter':
+                event.preventDefault();
+                if (this.filteredOptions.length === 1) {
+                    this.selectOption(this.filteredOptions[0]);
+                }
+                else if (this.highlightedIndex >= 0 && this.highlightedIndex < this.filteredOptions.length) {
+                    this.selectOption(this.filteredOptions[this.highlightedIndex]);
+                }
+                break;
+            case 'Escape':
+                this.closeDropdown();
+                break;
+            case 'Tab':
+                this.closeDropdown();
+                break;
+        }
+    }
+    scrollToHighlighted() {
+        const list = document.querySelector('.dropdown-list');
+        const item = document.querySelectorAll('.dropdown-item')[this.highlightedIndex];
+        if (list && item) {
+            const listRect = list.getBoundingClientRect();
+            const itemRect = item.getBoundingClientRect();
+            if (itemRect.bottom > listRect.bottom) {
+                list.scrollTop += (itemRect.bottom - listRect.bottom);
+            }
+            else if (itemRect.top < listRect.top) {
+                list.scrollTop -= (listRect.top - itemRect.top);
+            }
+        }
+    }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: FvNameCodeComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: FvNameCodeComponent, isStandalone: true, selector: "fv-name-code", inputs: { label: "label", placeholder: "placeholder", options: "options", schema: "schema", control: "control", disabled: "disabled" }, outputs: { selectionChange: "selectionChange" }, host: { listeners: { "document:click": "onClickOutside($event)" } }, providers: [
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: FvNameCodeComponent, isStandalone: true, selector: "fv-name-code", inputs: { label: "label", placeholder: "placeholder", options: "options", schema: "schema", control: "control", disabled: "disabled" }, outputs: { selectionChange: "selectionChange" }, host: { listeners: { "document:click": "onClickOutside($event)", "keydown": "onKeyDown($event)" } }, providers: [
             {
                 provide: NG_VALUE_ACCESSOR,
                 useExisting: forwardRef(() => FvNameCodeComponent),
                 multi: true
             }
         ], ngImport: i0, template: `
-    <div class="fv-name-code-container" (clickOutside)="closeDropdown()">
+    <div class="fv-name-code-container">
       <label *ngIf="label" class="fv-label">
         {{ label }}
         <span *ngIf="isRequired()" class="required-asterisk">*</span>
@@ -1370,14 +1561,14 @@ class FvNameCodeComponent {
           (focus)="openDropdown()"
           (blur)="onBlur()"
           [class.error]="isInvalid()"
-          [attr.disabled]="disabled ? true : null"
         />
       </div>
 
       <div class="dropdown-list" *ngIf="isOpen && !disabled">
         <div 
           class="dropdown-item" 
-          *ngFor="let option of filteredOptions"
+          *ngFor="let option of filteredOptions; let i = index"
+          [class.highlighted]="i === highlightedIndex"
           (click)="selectOption(option)"
         >
           <span class="code">{{ option.code }}</span>
@@ -1392,12 +1583,12 @@ class FvNameCodeComponent {
         {{ getErrorMessage() }}
       </div>
     </div>
-  `, isInline: true, styles: ["@import\"https://fonts.googleapis.com/icon?family=Material+Icons\";@import\"https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap\";*{font-family:Poppins,sans-serif}.fv-name-code-container{position:relative;width:100%;margin-bottom:15px}.fv-label{display:block;font-size:14px;font-weight:600;color:#151d48;margin-bottom:6px}.required-asterisk{color:#e74c3c;margin-left:2px}.search-box-wrapper{position:relative;display:flex;align-items:center}.fv-input{width:100%;padding:10px 12px;border:1px solid #8CBBA8;border-radius:8px;font-size:14px;color:#303030;outline:none;transition:all .2s;background-color:#fff}.fv-input:focus{border-color:#006aff;box-shadow:0 0 0 2px #006aff1a}.fv-input.error{border-color:#e74c3c}.fv-input:disabled{background-color:#f5f5f5;cursor:not-allowed}.dropdown-list{position:absolute;top:100%;left:0;right:0;background:#fff;border:1px solid #ddd;border-radius:8px;margin-top:4px;max-height:200px;overflow-y:auto;z-index:1000;box-shadow:0 4px 6px #0000001a}.dropdown-item{padding:10px 12px;display:flex;justify-content:space-between;cursor:pointer;border-bottom:1px solid #f0f0f0}.dropdown-item:last-child{border-bottom:none}.dropdown-item:hover{background-color:#f9f9f9}.code{color:#0056b3;font-weight:600;font-size:14px}.name{color:#333;font-size:14px}.no-results{padding:10px;color:#999;text-align:center;font-size:13px}.error-message{color:#e74c3c;font-size:12px;margin-top:4px;display:flex;align-items:center;gap:4px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }] });
+  `, isInline: true, styles: ["@import\"https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap\";*{font-family:Poppins,sans-serif}.fv-name-code-container{position:relative;width:100%;margin-bottom:0}.fv-label{display:block;font-size:14px;font-weight:600;color:#151d48;margin-bottom:6px}.required-asterisk{color:#e74c3c;margin-left:2px}.search-box-wrapper{position:relative;display:flex;align-items:center}.fv-input{width:100%;padding:5px 10px;height:34px;border:1px solid #8CBBA8;border-radius:8px;font-size:14px;color:#1f2b41;outline:none;transition:all .2s;background-color:#fff;box-sizing:border-box;font-family:Poppins,sans-serif;min-width:0}.fv-input:focus{border-color:#3498db;box-shadow:0 0 0 3px #3498db1a}.fv-input.error{border-color:#e74c3c}.fv-input:disabled{background-color:#f5f5f5;cursor:not-allowed}.dropdown-list{position:absolute;top:100%;left:0;min-width:100%;width:max-content;max-width:300px;background:#fff;border:1px solid #ddd;border-radius:8px;margin-top:4px;max-height:200px;overflow-y:auto;overflow-x:hidden;z-index:1000;box-shadow:0 4px 6px #0000001a}.dropdown-item{padding:10px 12px;display:flex;justify-content:space-between;align-items:center;cursor:pointer;border-bottom:1px solid #f0f0f0;gap:12px}.dropdown-item:last-child{border-bottom:none}.dropdown-item:hover,.dropdown-item.highlighted{background-color:#f0f7ff}.code{color:#0056b3;font-weight:600;font-size:14px;white-space:nowrap}.name{color:#333;font-size:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-align:right}.no-results{padding:10px;color:#999;text-align:center;font-size:13px}.error-message{color:#e74c3c;font-size:12px;margin-top:4px;display:flex;align-items:center;gap:4px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: FvNameCodeComponent, decorators: [{
             type: Component,
             args: [{ selector: 'fv-name-code', standalone: true, imports: [CommonModule, ReactiveFormsModule], template: `
-    <div class="fv-name-code-container" (clickOutside)="closeDropdown()">
+    <div class="fv-name-code-container">
       <label *ngIf="label" class="fv-label">
         {{ label }}
         <span *ngIf="isRequired()" class="required-asterisk">*</span>
@@ -1412,14 +1603,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
           (focus)="openDropdown()"
           (blur)="onBlur()"
           [class.error]="isInvalid()"
-          [attr.disabled]="disabled ? true : null"
         />
       </div>
 
       <div class="dropdown-list" *ngIf="isOpen && !disabled">
         <div 
           class="dropdown-item" 
-          *ngFor="let option of filteredOptions"
+          *ngFor="let option of filteredOptions; let i = index"
+          [class.highlighted]="i === highlightedIndex"
           (click)="selectOption(option)"
         >
           <span class="code">{{ option.code }}</span>
@@ -1440,7 +1631,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
                             useExisting: forwardRef(() => FvNameCodeComponent),
                             multi: true
                         }
-                    ], styles: ["@import\"https://fonts.googleapis.com/icon?family=Material+Icons\";@import\"https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap\";*{font-family:Poppins,sans-serif}.fv-name-code-container{position:relative;width:100%;margin-bottom:15px}.fv-label{display:block;font-size:14px;font-weight:600;color:#151d48;margin-bottom:6px}.required-asterisk{color:#e74c3c;margin-left:2px}.search-box-wrapper{position:relative;display:flex;align-items:center}.fv-input{width:100%;padding:10px 12px;border:1px solid #8CBBA8;border-radius:8px;font-size:14px;color:#303030;outline:none;transition:all .2s;background-color:#fff}.fv-input:focus{border-color:#006aff;box-shadow:0 0 0 2px #006aff1a}.fv-input.error{border-color:#e74c3c}.fv-input:disabled{background-color:#f5f5f5;cursor:not-allowed}.dropdown-list{position:absolute;top:100%;left:0;right:0;background:#fff;border:1px solid #ddd;border-radius:8px;margin-top:4px;max-height:200px;overflow-y:auto;z-index:1000;box-shadow:0 4px 6px #0000001a}.dropdown-item{padding:10px 12px;display:flex;justify-content:space-between;cursor:pointer;border-bottom:1px solid #f0f0f0}.dropdown-item:last-child{border-bottom:none}.dropdown-item:hover{background-color:#f9f9f9}.code{color:#0056b3;font-weight:600;font-size:14px}.name{color:#333;font-size:14px}.no-results{padding:10px;color:#999;text-align:center;font-size:13px}.error-message{color:#e74c3c;font-size:12px;margin-top:4px;display:flex;align-items:center;gap:4px}\n"] }]
+                    ], styles: ["@import\"https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap\";*{font-family:Poppins,sans-serif}.fv-name-code-container{position:relative;width:100%;margin-bottom:0}.fv-label{display:block;font-size:14px;font-weight:600;color:#151d48;margin-bottom:6px}.required-asterisk{color:#e74c3c;margin-left:2px}.search-box-wrapper{position:relative;display:flex;align-items:center}.fv-input{width:100%;padding:5px 10px;height:34px;border:1px solid #8CBBA8;border-radius:8px;font-size:14px;color:#1f2b41;outline:none;transition:all .2s;background-color:#fff;box-sizing:border-box;font-family:Poppins,sans-serif;min-width:0}.fv-input:focus{border-color:#3498db;box-shadow:0 0 0 3px #3498db1a}.fv-input.error{border-color:#e74c3c}.fv-input:disabled{background-color:#f5f5f5;cursor:not-allowed}.dropdown-list{position:absolute;top:100%;left:0;min-width:100%;width:max-content;max-width:300px;background:#fff;border:1px solid #ddd;border-radius:8px;margin-top:4px;max-height:200px;overflow-y:auto;overflow-x:hidden;z-index:1000;box-shadow:0 4px 6px #0000001a}.dropdown-item{padding:10px 12px;display:flex;justify-content:space-between;align-items:center;cursor:pointer;border-bottom:1px solid #f0f0f0;gap:12px}.dropdown-item:last-child{border-bottom:none}.dropdown-item:hover,.dropdown-item.highlighted{background-color:#f0f7ff}.code{color:#0056b3;font-weight:600;font-size:14px;white-space:nowrap}.name{color:#333;font-size:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-align:right}.no-results{padding:10px;color:#999;text-align:center;font-size:13px}.error-message{color:#e74c3c;font-size:12px;margin-top:4px;display:flex;align-items:center;gap:4px}\n"] }]
         }], propDecorators: { label: [{
                 type: Input
             }], placeholder: [{
@@ -1458,6 +1649,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
             }], onClickOutside: [{
                 type: HostListener,
                 args: ['document:click', ['$event']]
+            }], onKeyDown: [{
+                type: HostListener,
+                args: ['keydown', ['$event']]
             }] } });
 
 class FvPhoneFieldComponent {
@@ -1502,6 +1696,16 @@ class FvPhoneFieldComponent {
     ngOnDestroy() {
         this.subscription?.unsubscribe();
     }
+    ngOnChanges(changes) {
+        if (changes['disabled'] && this.control) {
+            if (this.disabled) {
+                this.control.disable({ emitEvent: false });
+            }
+            else {
+                this.control.enable({ emitEvent: false });
+            }
+        }
+    }
     onInput(event) {
         const input = event.target;
         let value = input.value;
@@ -1539,11 +1743,11 @@ class FvPhoneFieldComponent {
         return this.schema?.rules?.some(r => r.name === 'required' && r.params?.['enabled']) || false;
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: FvPhoneFieldComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: FvPhoneFieldComponent, isStandalone: true, selector: "fv-phone-field", inputs: { label: "label", control: "control", disabled: "disabled", schema: "schema" }, outputs: { blur: "blur", focus: "focus" }, ngImport: i0, template: "<div class=\"fv-phone-field-container\">\r\n    <label *ngIf=\"label\" class=\"fv-label\">\r\n        {{ label }}\r\n        <span *ngIf=\"isRequired()\" class=\"fv-required-asterisk\">*</span>\r\n    </label>\r\n\r\n    <div class=\"fv-phone-input-group\">\r\n        <div class=\"fv-select-wrapper\">\r\n            <select class=\"fv-country-code-select\" [disabled]=\"disabled\" [(ngModel)]=\"countryCode\">\r\n                <option *ngFor=\"let code of countryCodes\" [value]=\"code\">{{code}}</option>\r\n            </select>\r\n            <i class=\"material-icons fv-select-arrow\">arrow_drop_down</i>\r\n        </div>\r\n        <input type=\"text\" [formControl]=\"control\" [disabled]=\"disabled\" (input)=\"onInput($event)\" (blur)=\"onBlur()\"\r\n            (focus)=\"onFocus()\" placeholder=\"10 digit mobile number\" class=\"fv-input fv-phone-input\"\r\n            [class.fv-input-error]=\"errorMessage\" />\r\n    </div>\r\n\r\n    <span *ngIf=\"errorMessage\" class=\"fv-error-message\">\r\n        {{ errorMessage }}\r\n    </span>\r\n</div>", styles: [".fv-phone-field-container{display:flex;flex-direction:column;margin-bottom:16px;width:100%}.fv-label{font-size:14px;font-weight:500;color:#333;margin-bottom:6px}.fv-required-asterisk{color:#dc3545;margin-left:2px}.fv-phone-input-group{display:flex;align-items:center}.fv-country-code-select{padding:10px 24px 10px 8px;border:1px solid #cccccc;border-radius:4px 0 0 4px;background-color:#f8f9fa;border-right:none;outline:none;cursor:pointer;font-size:14px;color:#333;height:42px;width:60px;box-sizing:border-box;appearance:none;-webkit-appearance:none;-moz-appearance:none}.fv-select-wrapper{position:relative;display:flex;align-items:center}.fv-select-arrow{position:absolute;right:4px;top:50%;transform:translateY(-50%);pointer-events:none;color:#666;font-size:20px}.fv-phone-input{flex:1;border-radius:0 4px 4px 0!important}.fv-input{padding:10px;border:1px solid #cccccc;border-radius:4px;font-size:14px;outline:none;transition:border-color .2s;width:100%;box-sizing:border-box;height:42px}.fv-input:focus{border-color:#007bff;box-shadow:0 0 0 2px #007bff1a}.fv-input-error{border-color:#dc3545!important}.fv-error-message{margin-top:4px;font-size:12px;color:#dc3545}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i2.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: FvPhoneFieldComponent, isStandalone: true, selector: "fv-phone-field", inputs: { label: "label", control: "control", disabled: "disabled", schema: "schema" }, outputs: { blur: "blur", focus: "focus" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"fv-phone-field-container\">\r\n    <label *ngIf=\"label\" class=\"fv-label\">\r\n        {{ label }}\r\n        <span *ngIf=\"isRequired()\" class=\"fv-required-asterisk\">*</span>\r\n    </label>\r\n\r\n    <div class=\"fv-phone-input-group\">\r\n        <div class=\"fv-select-wrapper\">\r\n            <select class=\"fv-country-code-select\" [disabled]=\"disabled\" [(ngModel)]=\"countryCode\">\r\n                <option *ngFor=\"let code of countryCodes\" [value]=\"code\">{{code}}</option>\r\n            </select>\r\n            <i class=\"material-icons fv-select-arrow\">arrow_drop_down</i>\r\n        </div>\r\n        <input type=\"text\" [formControl]=\"control\" (input)=\"onInput($event)\" (blur)=\"onBlur()\" (focus)=\"onFocus()\"\r\n            placeholder=\"10 digit mobile number\" class=\"fv-input fv-phone-input\"\r\n            [class.fv-input-error]=\"errorMessage\" />\r\n    </div>\r\n\r\n    <span *ngIf=\"errorMessage\" class=\"fv-error-message\">\r\n        {{ errorMessage }}\r\n    </span>\r\n</div>", styles: ["@import\"https://fonts.googleapis.com/icon?family=Material+Icons\";@import\"https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap\";*{font-family:Poppins,sans-serif}.material-icons{font-family:Material Icons!important}.fv-phone-field-container{display:flex;flex-direction:column;margin-bottom:16px;width:100%}.fv-label{font-size:14px;font-weight:600;color:#151d48;margin-bottom:6px}.fv-required-asterisk{color:#e74c3c;margin-left:2px}.fv-phone-input-group{display:flex;align-items:center}.fv-country-code-select{padding:5px 24px 5px 8px;border:1px solid #8CBBA8;border-radius:8px 0 0 8px;background-color:#f8f9fa;border-right:none;outline:none;cursor:pointer;font-size:14px;font-weight:400;color:#1f2b41;height:34px;width:60px;box-sizing:border-box;appearance:none;-webkit-appearance:none;-moz-appearance:none}.fv-select-wrapper{position:relative;display:flex;align-items:center}.fv-select-arrow{position:absolute;right:4px;top:50%;transform:translateY(-50%);pointer-events:none;color:#666;font-size:20px}.fv-phone-input{flex:1;border-radius:0 8px 8px 0!important}.fv-input{padding:5px 10px;border:1px solid #8CBBA8;border-radius:8px;font-size:14px;font-weight:400;outline:none;transition:border-color .2s;width:100%;box-sizing:border-box;height:34px;background-color:#fff;color:#1f2b41;min-width:0}.fv-input:focus{border-color:#3498db;box-shadow:0 0 0 3px #3498db1a}.fv-input-error{border-color:#dc3545!important}.fv-error-message{margin-top:4px;font-size:12px;color:#e74c3c}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i2.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: FvPhoneFieldComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'fv-phone-field', standalone: true, imports: [CommonModule, ReactiveFormsModule, FormsModule], template: "<div class=\"fv-phone-field-container\">\r\n    <label *ngIf=\"label\" class=\"fv-label\">\r\n        {{ label }}\r\n        <span *ngIf=\"isRequired()\" class=\"fv-required-asterisk\">*</span>\r\n    </label>\r\n\r\n    <div class=\"fv-phone-input-group\">\r\n        <div class=\"fv-select-wrapper\">\r\n            <select class=\"fv-country-code-select\" [disabled]=\"disabled\" [(ngModel)]=\"countryCode\">\r\n                <option *ngFor=\"let code of countryCodes\" [value]=\"code\">{{code}}</option>\r\n            </select>\r\n            <i class=\"material-icons fv-select-arrow\">arrow_drop_down</i>\r\n        </div>\r\n        <input type=\"text\" [formControl]=\"control\" [disabled]=\"disabled\" (input)=\"onInput($event)\" (blur)=\"onBlur()\"\r\n            (focus)=\"onFocus()\" placeholder=\"10 digit mobile number\" class=\"fv-input fv-phone-input\"\r\n            [class.fv-input-error]=\"errorMessage\" />\r\n    </div>\r\n\r\n    <span *ngIf=\"errorMessage\" class=\"fv-error-message\">\r\n        {{ errorMessage }}\r\n    </span>\r\n</div>", styles: [".fv-phone-field-container{display:flex;flex-direction:column;margin-bottom:16px;width:100%}.fv-label{font-size:14px;font-weight:500;color:#333;margin-bottom:6px}.fv-required-asterisk{color:#dc3545;margin-left:2px}.fv-phone-input-group{display:flex;align-items:center}.fv-country-code-select{padding:10px 24px 10px 8px;border:1px solid #cccccc;border-radius:4px 0 0 4px;background-color:#f8f9fa;border-right:none;outline:none;cursor:pointer;font-size:14px;color:#333;height:42px;width:60px;box-sizing:border-box;appearance:none;-webkit-appearance:none;-moz-appearance:none}.fv-select-wrapper{position:relative;display:flex;align-items:center}.fv-select-arrow{position:absolute;right:4px;top:50%;transform:translateY(-50%);pointer-events:none;color:#666;font-size:20px}.fv-phone-input{flex:1;border-radius:0 4px 4px 0!important}.fv-input{padding:10px;border:1px solid #cccccc;border-radius:4px;font-size:14px;outline:none;transition:border-color .2s;width:100%;box-sizing:border-box;height:42px}.fv-input:focus{border-color:#007bff;box-shadow:0 0 0 2px #007bff1a}.fv-input-error{border-color:#dc3545!important}.fv-error-message{margin-top:4px;font-size:12px;color:#dc3545}\n"] }]
+            args: [{ selector: 'fv-phone-field', standalone: true, imports: [CommonModule, ReactiveFormsModule, FormsModule], template: "<div class=\"fv-phone-field-container\">\r\n    <label *ngIf=\"label\" class=\"fv-label\">\r\n        {{ label }}\r\n        <span *ngIf=\"isRequired()\" class=\"fv-required-asterisk\">*</span>\r\n    </label>\r\n\r\n    <div class=\"fv-phone-input-group\">\r\n        <div class=\"fv-select-wrapper\">\r\n            <select class=\"fv-country-code-select\" [disabled]=\"disabled\" [(ngModel)]=\"countryCode\">\r\n                <option *ngFor=\"let code of countryCodes\" [value]=\"code\">{{code}}</option>\r\n            </select>\r\n            <i class=\"material-icons fv-select-arrow\">arrow_drop_down</i>\r\n        </div>\r\n        <input type=\"text\" [formControl]=\"control\" (input)=\"onInput($event)\" (blur)=\"onBlur()\" (focus)=\"onFocus()\"\r\n            placeholder=\"10 digit mobile number\" class=\"fv-input fv-phone-input\"\r\n            [class.fv-input-error]=\"errorMessage\" />\r\n    </div>\r\n\r\n    <span *ngIf=\"errorMessage\" class=\"fv-error-message\">\r\n        {{ errorMessage }}\r\n    </span>\r\n</div>", styles: ["@import\"https://fonts.googleapis.com/icon?family=Material+Icons\";@import\"https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap\";*{font-family:Poppins,sans-serif}.material-icons{font-family:Material Icons!important}.fv-phone-field-container{display:flex;flex-direction:column;margin-bottom:16px;width:100%}.fv-label{font-size:14px;font-weight:600;color:#151d48;margin-bottom:6px}.fv-required-asterisk{color:#e74c3c;margin-left:2px}.fv-phone-input-group{display:flex;align-items:center}.fv-country-code-select{padding:5px 24px 5px 8px;border:1px solid #8CBBA8;border-radius:8px 0 0 8px;background-color:#f8f9fa;border-right:none;outline:none;cursor:pointer;font-size:14px;font-weight:400;color:#1f2b41;height:34px;width:60px;box-sizing:border-box;appearance:none;-webkit-appearance:none;-moz-appearance:none}.fv-select-wrapper{position:relative;display:flex;align-items:center}.fv-select-arrow{position:absolute;right:4px;top:50%;transform:translateY(-50%);pointer-events:none;color:#666;font-size:20px}.fv-phone-input{flex:1;border-radius:0 8px 8px 0!important}.fv-input{padding:5px 10px;border:1px solid #8CBBA8;border-radius:8px;font-size:14px;font-weight:400;outline:none;transition:border-color .2s;width:100%;box-sizing:border-box;height:34px;background-color:#fff;color:#1f2b41;min-width:0}.fv-input:focus{border-color:#3498db;box-shadow:0 0 0 3px #3498db1a}.fv-input-error{border-color:#dc3545!important}.fv-error-message{margin-top:4px;font-size:12px;color:#e74c3c}\n"] }]
         }], propDecorators: { label: [{
                 type: Input
             }], control: [{
@@ -1573,6 +1777,16 @@ class FvUanFieldComponent {
         this.subscription = this.control.valueChanges.subscribe((value) => this.validateValue(value));
     }
     ngOnDestroy() { this.subscription?.unsubscribe(); }
+    ngOnChanges(changes) {
+        if (changes['disabled'] && this.control) {
+            if (this.disabled) {
+                this.control.disable({ emitEvent: false });
+            }
+            else {
+                this.control.enable({ emitEvent: false });
+            }
+        }
+    }
     onInput(event) {
         const input = event.target;
         let value = input.value;
@@ -1597,11 +1811,11 @@ class FvUanFieldComponent {
         return this.schema?.rules?.some(r => r.name === 'required' && r.params?.['enabled']) || false;
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: FvUanFieldComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: FvUanFieldComponent, isStandalone: true, selector: "fv-uan-field", inputs: { label: "label", control: "control", disabled: "disabled", schema: "schema" }, outputs: { blur: "blur", focus: "focus" }, ngImport: i0, template: "<div class=\"fv-field-container\">\r\n    <label *ngIf=\"label\" class=\"fv-label\">\r\n        {{ label }}\r\n        <span *ngIf=\"isRequired()\" class=\"fv-required-asterisk\">*</span>\r\n    </label>\r\n    <input type=\"text\" [formControl]=\"control\" [disabled]=\"disabled\" (input)=\"onInput($event)\"\r\n        placeholder=\"12 digit UAN\" class=\"fv-input\" [class.fv-input-error]=\"errorMessage\" />\r\n    <span *ngIf=\"errorMessage\" class=\"fv-error-message\">{{ errorMessage }}</span>\r\n</div>", styles: [".fv-field-container{display:flex;flex-direction:column;margin-bottom:16px;width:100%}.fv-label{font-size:14px;font-weight:500;color:#333;margin-bottom:6px}.fv-required-asterisk{color:#dc3545;margin-left:2px}.fv-input{padding:10px;border:1px solid #ccc;border-radius:4px;font-size:14px;outline:none;width:100%;box-sizing:border-box}.fv-input:focus{border-color:#007bff;box-shadow:0 0 0 2px #007bff1a}.fv-input-error{border-color:#dc3545!important}.fv-error-message{margin-top:4px;font-size:12px;color:#dc3545}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: FvUanFieldComponent, isStandalone: true, selector: "fv-uan-field", inputs: { label: "label", control: "control", disabled: "disabled", schema: "schema" }, outputs: { blur: "blur", focus: "focus" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"fv-field-container\">\r\n    <label *ngIf=\"label\" class=\"fv-label\">\r\n        {{ label }}\r\n        <span *ngIf=\"isRequired()\" class=\"fv-required-asterisk\">*</span>\r\n    </label>\r\n    <input type=\"text\" [formControl]=\"control\" (input)=\"onInput($event)\" placeholder=\"12 digit UAN\" class=\"fv-input\"\r\n        [class.fv-input-error]=\"errorMessage\" />\r\n    <span *ngIf=\"errorMessage\" class=\"fv-error-message\">{{ errorMessage }}</span>\r\n</div>", styles: ["@import\"https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap\";*{font-family:Poppins,sans-serif}.fv-field-container{display:flex;flex-direction:column;margin-bottom:16px;width:100%}.fv-label{font-size:14px;font-weight:600;color:#151d48;margin-bottom:6px}.fv-required-asterisk{color:#e74c3c;margin-left:2px}.fv-input{padding:5px 10px;border:1px solid #8CBBA8;border-radius:8px;font-size:14px;font-weight:400;outline:none;width:100%;box-sizing:border-box;background-color:#fff;color:#1f2b41;transition:border-color .2s;height:34px}.fv-input:focus{border-color:#3498db;box-shadow:0 0 0 3px #3498db1a}.fv-input-error{border-color:#dc3545!important}.fv-error-message{margin-top:4px;font-size:12px;color:#e74c3c}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: FvUanFieldComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'fv-uan-field', standalone: true, imports: [CommonModule, ReactiveFormsModule], template: "<div class=\"fv-field-container\">\r\n    <label *ngIf=\"label\" class=\"fv-label\">\r\n        {{ label }}\r\n        <span *ngIf=\"isRequired()\" class=\"fv-required-asterisk\">*</span>\r\n    </label>\r\n    <input type=\"text\" [formControl]=\"control\" [disabled]=\"disabled\" (input)=\"onInput($event)\"\r\n        placeholder=\"12 digit UAN\" class=\"fv-input\" [class.fv-input-error]=\"errorMessage\" />\r\n    <span *ngIf=\"errorMessage\" class=\"fv-error-message\">{{ errorMessage }}</span>\r\n</div>", styles: [".fv-field-container{display:flex;flex-direction:column;margin-bottom:16px;width:100%}.fv-label{font-size:14px;font-weight:500;color:#333;margin-bottom:6px}.fv-required-asterisk{color:#dc3545;margin-left:2px}.fv-input{padding:10px;border:1px solid #ccc;border-radius:4px;font-size:14px;outline:none;width:100%;box-sizing:border-box}.fv-input:focus{border-color:#007bff;box-shadow:0 0 0 2px #007bff1a}.fv-input-error{border-color:#dc3545!important}.fv-error-message{margin-top:4px;font-size:12px;color:#dc3545}\n"] }]
+            args: [{ selector: 'fv-uan-field', standalone: true, imports: [CommonModule, ReactiveFormsModule], template: "<div class=\"fv-field-container\">\r\n    <label *ngIf=\"label\" class=\"fv-label\">\r\n        {{ label }}\r\n        <span *ngIf=\"isRequired()\" class=\"fv-required-asterisk\">*</span>\r\n    </label>\r\n    <input type=\"text\" [formControl]=\"control\" (input)=\"onInput($event)\" placeholder=\"12 digit UAN\" class=\"fv-input\"\r\n        [class.fv-input-error]=\"errorMessage\" />\r\n    <span *ngIf=\"errorMessage\" class=\"fv-error-message\">{{ errorMessage }}</span>\r\n</div>", styles: ["@import\"https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap\";*{font-family:Poppins,sans-serif}.fv-field-container{display:flex;flex-direction:column;margin-bottom:16px;width:100%}.fv-label{font-size:14px;font-weight:600;color:#151d48;margin-bottom:6px}.fv-required-asterisk{color:#e74c3c;margin-left:2px}.fv-input{padding:5px 10px;border:1px solid #8CBBA8;border-radius:8px;font-size:14px;font-weight:400;outline:none;width:100%;box-sizing:border-box;background-color:#fff;color:#1f2b41;transition:border-color .2s;height:34px}.fv-input:focus{border-color:#3498db;box-shadow:0 0 0 3px #3498db1a}.fv-input-error{border-color:#dc3545!important}.fv-error-message{margin-top:4px;font-size:12px;color:#e74c3c}\n"] }]
         }], propDecorators: { label: [{
                 type: Input
             }], control: [{
@@ -1626,9 +1840,41 @@ class FvPfFieldComponent {
     errorMessage = null;
     subscription;
     ngOnInit() {
-        if (!this.control)
+        if (!this.control) {
+            console.error('FvPfField: control is required');
             return;
+        }
+        // Default PF Schema
+        if (!this.schema) {
+            this.schema = {
+                controlType: 'PfField',
+                errorPriority: ['required', 'regex'],
+                rules: [
+                    {
+                        name: 'regex',
+                        params: {
+                            pattern: '^[A-Z]{2}/[A-Z]{3}/[0-9]{7}/[0-9]{3}/[0-9]{7}$'
+                        },
+                        errorKey: 'ERR_PF_INVALID'
+                    }
+                ]
+            };
+        }
         this.subscription = this.control.valueChanges.subscribe((value) => this.validateValue(value));
+        // Initial validation
+        if (this.control.value) {
+            this.validateValue(this.control.value);
+        }
+    }
+    ngOnChanges(changes) {
+        if (changes['disabled'] && this.control) {
+            if (this.disabled) {
+                this.control.disable({ emitEvent: false });
+            }
+            else {
+                this.control.enable({ emitEvent: false });
+            }
+        }
     }
     ngOnDestroy() { this.subscription?.unsubscribe(); }
     onInput(event) {
@@ -1652,12 +1898,22 @@ class FvPfFieldComponent {
             this.control.setErrors(null);
     }
     isRequired() { return this.schema?.rules?.some(r => r.name === 'required' && r.params?.['enabled']) || false; }
+    getErrorMessage() {
+        if (!this.errorMessage)
+            return '';
+        const errorMessages = {
+            ERR_REQUIRED: 'PF Number is required',
+            ERR_PF_INVALID: 'Invalid PF Number format (e.g. AA/AAA/0000000/000/0000000)',
+            ERR_REGEX_MISMATCH: 'Invalid PF Number format'
+        };
+        return errorMessages[this.errorMessage] || this.errorMessage;
+    }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: FvPfFieldComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: FvPfFieldComponent, isStandalone: true, selector: "fv-pf-field", inputs: { label: "label", control: "control", disabled: "disabled", schema: "schema" }, outputs: { blur: "blur", focus: "focus" }, ngImport: i0, template: "<div class=\"fv-field-container\">\r\n    <label *ngIf=\"label\" class=\"fv-label\">\r\n        {{ label }}\r\n        <span *ngIf=\"isRequired()\" class=\"fv-required-asterisk\">*</span>\r\n    </label>\r\n    <input type=\"text\" [formControl]=\"control\" [disabled]=\"disabled\" (input)=\"onInput($event)\" placeholder=\"PF Number\"\r\n        class=\"fv-input\" [class.fv-input-error]=\"errorMessage\" />\r\n    <span *ngIf=\"errorMessage\" class=\"fv-error-message\">{{ errorMessage }}</span>\r\n</div>", styles: [".fv-field-container{display:flex;flex-direction:column;margin-bottom:16px;width:100%}.fv-label{font-size:14px;font-weight:500;color:#333;margin-bottom:6px}.fv-required-asterisk{color:#dc3545;margin-left:2px}.fv-input{padding:10px;border:1px solid #ccc;border-radius:4px;font-size:14px;outline:none;width:100%;box-sizing:border-box}.fv-input:focus{border-color:#007bff;box-shadow:0 0 0 2px #007bff1a}.fv-input-error{border-color:#dc3545!important}.fv-error-message{margin-top:4px;font-size:12px;color:#dc3545}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: FvPfFieldComponent, isStandalone: true, selector: "fv-pf-field", inputs: { label: "label", control: "control", disabled: "disabled", schema: "schema" }, outputs: { blur: "blur", focus: "focus" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"fv-field-container\">\r\n    <label *ngIf=\"label\" class=\"fv-label\">\r\n        {{ label }}\r\n        <span *ngIf=\"isRequired()\" class=\"fv-required-asterisk\">*</span>\r\n    </label>\r\n    <input type=\"text\" [formControl]=\"control\" [disabled]=\"disabled\" (input)=\"onInput($event)\"\r\n        placeholder=\"AA/AAA/0000000/000/0000000\" class=\"fv-input\"\r\n        [class.fv-input-error]=\"errorMessage && control.touched\" />\r\n    <span *ngIf=\"errorMessage && control.touched\" class=\"fv-error-message\">{{ getErrorMessage() }}</span>\r\n</div>", styles: ["@import\"https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap\";*{font-family:Poppins,sans-serif}.fv-field-container{display:flex;flex-direction:column;margin-bottom:16px;width:100%}.fv-label{font-size:14px;font-weight:600;color:#151d48;margin-bottom:6px}.fv-required-asterisk{color:#e74c3c;margin-left:2px}.fv-input{padding:5px 10px;border:1px solid #8CBBA8;border-radius:8px;font-size:14px;font-weight:400;outline:none;width:100%;box-sizing:border-box;background-color:#fff;color:#1f2b41;transition:border-color .2s;height:34px}.fv-input:focus{border-color:#3498db;box-shadow:0 0 0 3px #3498db1a}.fv-input-error{border-color:#dc3545!important}.fv-error-message{margin-top:4px;font-size:12px;color:#e74c3c}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: FvPfFieldComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'fv-pf-field', standalone: true, imports: [CommonModule, ReactiveFormsModule], template: "<div class=\"fv-field-container\">\r\n    <label *ngIf=\"label\" class=\"fv-label\">\r\n        {{ label }}\r\n        <span *ngIf=\"isRequired()\" class=\"fv-required-asterisk\">*</span>\r\n    </label>\r\n    <input type=\"text\" [formControl]=\"control\" [disabled]=\"disabled\" (input)=\"onInput($event)\" placeholder=\"PF Number\"\r\n        class=\"fv-input\" [class.fv-input-error]=\"errorMessage\" />\r\n    <span *ngIf=\"errorMessage\" class=\"fv-error-message\">{{ errorMessage }}</span>\r\n</div>", styles: [".fv-field-container{display:flex;flex-direction:column;margin-bottom:16px;width:100%}.fv-label{font-size:14px;font-weight:500;color:#333;margin-bottom:6px}.fv-required-asterisk{color:#dc3545;margin-left:2px}.fv-input{padding:10px;border:1px solid #ccc;border-radius:4px;font-size:14px;outline:none;width:100%;box-sizing:border-box}.fv-input:focus{border-color:#007bff;box-shadow:0 0 0 2px #007bff1a}.fv-input-error{border-color:#dc3545!important}.fv-error-message{margin-top:4px;font-size:12px;color:#dc3545}\n"] }]
+            args: [{ selector: 'fv-pf-field', standalone: true, imports: [CommonModule, ReactiveFormsModule], template: "<div class=\"fv-field-container\">\r\n    <label *ngIf=\"label\" class=\"fv-label\">\r\n        {{ label }}\r\n        <span *ngIf=\"isRequired()\" class=\"fv-required-asterisk\">*</span>\r\n    </label>\r\n    <input type=\"text\" [formControl]=\"control\" [disabled]=\"disabled\" (input)=\"onInput($event)\"\r\n        placeholder=\"AA/AAA/0000000/000/0000000\" class=\"fv-input\"\r\n        [class.fv-input-error]=\"errorMessage && control.touched\" />\r\n    <span *ngIf=\"errorMessage && control.touched\" class=\"fv-error-message\">{{ getErrorMessage() }}</span>\r\n</div>", styles: ["@import\"https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap\";*{font-family:Poppins,sans-serif}.fv-field-container{display:flex;flex-direction:column;margin-bottom:16px;width:100%}.fv-label{font-size:14px;font-weight:600;color:#151d48;margin-bottom:6px}.fv-required-asterisk{color:#e74c3c;margin-left:2px}.fv-input{padding:5px 10px;border:1px solid #8CBBA8;border-radius:8px;font-size:14px;font-weight:400;outline:none;width:100%;box-sizing:border-box;background-color:#fff;color:#1f2b41;transition:border-color .2s;height:34px}.fv-input:focus{border-color:#3498db;box-shadow:0 0 0 3px #3498db1a}.fv-input-error{border-color:#dc3545!important}.fv-error-message{margin-top:4px;font-size:12px;color:#e74c3c}\n"] }]
         }], propDecorators: { label: [{
                 type: Input
             }], control: [{
@@ -1687,6 +1943,16 @@ class FvEsiFieldComponent {
         this.subscription = this.control.valueChanges.subscribe((value) => this.validateValue(value));
     }
     ngOnDestroy() { this.subscription?.unsubscribe(); }
+    ngOnChanges(changes) {
+        if (changes['disabled'] && this.control) {
+            if (this.disabled) {
+                this.control.disable({ emitEvent: false });
+            }
+            else {
+                this.control.enable({ emitEvent: false });
+            }
+        }
+    }
     onInput(event) {
         const input = event.target;
         let value = input.value;
@@ -1709,11 +1975,11 @@ class FvEsiFieldComponent {
     }
     isRequired() { return this.schema?.rules?.some(r => r.name === 'required' && r.params?.['enabled']) || false; }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: FvEsiFieldComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: FvEsiFieldComponent, isStandalone: true, selector: "fv-esi-field", inputs: { label: "label", control: "control", disabled: "disabled", schema: "schema" }, outputs: { blur: "blur", focus: "focus" }, ngImport: i0, template: "<div class=\"fv-field-container\">\r\n    <label *ngIf=\"label\" class=\"fv-label\">\r\n        {{ label }}\r\n        <span *ngIf=\"isRequired()\" class=\"fv-required-asterisk\">*</span>\r\n    </label>\r\n    <input type=\"text\" [formControl]=\"control\" [disabled]=\"disabled\" (input)=\"onInput($event)\"\r\n        placeholder=\"17 digit ESI\" class=\"fv-input\" [class.fv-input-error]=\"errorMessage\" />\r\n    <span *ngIf=\"errorMessage\" class=\"fv-error-message\">{{ errorMessage }}</span>\r\n</div>", styles: [".fv-field-container{display:flex;flex-direction:column;margin-bottom:16px;width:100%}.fv-label{font-size:14px;font-weight:500;color:#333;margin-bottom:6px}.fv-required-asterisk{color:#dc3545;margin-left:2px}.fv-input{padding:10px;border:1px solid #ccc;border-radius:4px;font-size:14px;outline:none;width:100%;box-sizing:border-box}.fv-input:focus{border-color:#007bff;box-shadow:0 0 0 2px #007bff1a}.fv-input-error{border-color:#dc3545!important}.fv-error-message{margin-top:4px;font-size:12px;color:#dc3545}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: FvEsiFieldComponent, isStandalone: true, selector: "fv-esi-field", inputs: { label: "label", control: "control", disabled: "disabled", schema: "schema" }, outputs: { blur: "blur", focus: "focus" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"fv-field-container\">\r\n    <label *ngIf=\"label\" class=\"fv-label\">\r\n        {{ label }}\r\n        <span *ngIf=\"isRequired()\" class=\"fv-required-asterisk\">*</span>\r\n    </label>\r\n    <input type=\"text\" [formControl]=\"control\" (input)=\"onInput($event)\" placeholder=\"17 digit ESI\" class=\"fv-input\"\r\n        [class.fv-input-error]=\"errorMessage\" />\r\n    <span *ngIf=\"errorMessage\" class=\"fv-error-message\">{{ errorMessage }}</span>\r\n</div>", styles: ["@import\"https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap\";*{font-family:Poppins,sans-serif}.fv-field-container{display:flex;flex-direction:column;margin-bottom:16px;width:100%}.fv-label{font-size:14px;font-weight:600;color:#151d48;margin-bottom:6px}.fv-required-asterisk{color:#e74c3c;margin-left:2px}.fv-input{padding:5px 10px;border:1px solid #8CBBA8;border-radius:8px;font-size:14px;font-weight:400;outline:none;width:100%;box-sizing:border-box;background-color:#fff;color:#1f2b41;transition:border-color .2s;height:34px}.fv-input:focus{border-color:#3498db;box-shadow:0 0 0 3px #3498db1a}.fv-input-error{border-color:#dc3545!important}.fv-error-message{margin-top:4px;font-size:12px;color:#e74c3c}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: FvEsiFieldComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'fv-esi-field', standalone: true, imports: [CommonModule, ReactiveFormsModule], template: "<div class=\"fv-field-container\">\r\n    <label *ngIf=\"label\" class=\"fv-label\">\r\n        {{ label }}\r\n        <span *ngIf=\"isRequired()\" class=\"fv-required-asterisk\">*</span>\r\n    </label>\r\n    <input type=\"text\" [formControl]=\"control\" [disabled]=\"disabled\" (input)=\"onInput($event)\"\r\n        placeholder=\"17 digit ESI\" class=\"fv-input\" [class.fv-input-error]=\"errorMessage\" />\r\n    <span *ngIf=\"errorMessage\" class=\"fv-error-message\">{{ errorMessage }}</span>\r\n</div>", styles: [".fv-field-container{display:flex;flex-direction:column;margin-bottom:16px;width:100%}.fv-label{font-size:14px;font-weight:500;color:#333;margin-bottom:6px}.fv-required-asterisk{color:#dc3545;margin-left:2px}.fv-input{padding:10px;border:1px solid #ccc;border-radius:4px;font-size:14px;outline:none;width:100%;box-sizing:border-box}.fv-input:focus{border-color:#007bff;box-shadow:0 0 0 2px #007bff1a}.fv-input-error{border-color:#dc3545!important}.fv-error-message{margin-top:4px;font-size:12px;color:#dc3545}\n"] }]
+            args: [{ selector: 'fv-esi-field', standalone: true, imports: [CommonModule, ReactiveFormsModule], template: "<div class=\"fv-field-container\">\r\n    <label *ngIf=\"label\" class=\"fv-label\">\r\n        {{ label }}\r\n        <span *ngIf=\"isRequired()\" class=\"fv-required-asterisk\">*</span>\r\n    </label>\r\n    <input type=\"text\" [formControl]=\"control\" (input)=\"onInput($event)\" placeholder=\"17 digit ESI\" class=\"fv-input\"\r\n        [class.fv-input-error]=\"errorMessage\" />\r\n    <span *ngIf=\"errorMessage\" class=\"fv-error-message\">{{ errorMessage }}</span>\r\n</div>", styles: ["@import\"https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap\";*{font-family:Poppins,sans-serif}.fv-field-container{display:flex;flex-direction:column;margin-bottom:16px;width:100%}.fv-label{font-size:14px;font-weight:600;color:#151d48;margin-bottom:6px}.fv-required-asterisk{color:#e74c3c;margin-left:2px}.fv-input{padding:5px 10px;border:1px solid #8CBBA8;border-radius:8px;font-size:14px;font-weight:400;outline:none;width:100%;box-sizing:border-box;background-color:#fff;color:#1f2b41;transition:border-color .2s;height:34px}.fv-input:focus{border-color:#3498db;box-shadow:0 0 0 3px #3498db1a}.fv-input-error{border-color:#dc3545!important}.fv-error-message{margin-top:4px;font-size:12px;color:#e74c3c}\n"] }]
         }], propDecorators: { label: [{
                 type: Input
             }], control: [{
@@ -1765,11 +2031,11 @@ class FvIfscFieldComponent {
     }
     isRequired() { return this.schema?.rules?.some(r => r.name === 'required' && r.params?.['enabled']) || false; }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: FvIfscFieldComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: FvIfscFieldComponent, isStandalone: true, selector: "fv-ifsc-field", inputs: { label: "label", control: "control", disabled: "disabled", schema: "schema" }, outputs: { blur: "blur", focus: "focus" }, ngImport: i0, template: "<div class=\"fv-field-container\">\r\n    <label *ngIf=\"label\" class=\"fv-label\">\r\n        {{ label }}\r\n        <span *ngIf=\"isRequired()\" class=\"fv-required-asterisk\">*</span>\r\n    </label>\r\n    <input type=\"text\" [formControl]=\"control\" [disabled]=\"disabled\" (input)=\"onInput($event)\" placeholder=\"IFSC Code\"\r\n        class=\"fv-input\" [class.fv-input-error]=\"errorMessage\" />\r\n    <span *ngIf=\"errorMessage\" class=\"fv-error-message\">{{ errorMessage }}</span>\r\n</div>", styles: [".fv-field-container{display:flex;flex-direction:column;margin-bottom:16px;width:100%}.fv-label{font-size:14px;font-weight:500;color:#333;margin-bottom:6px}.fv-required-asterisk{color:#dc3545;margin-left:2px}.fv-input{padding:10px;border:1px solid #ccc;border-radius:4px;font-size:14px;outline:none;width:100%;box-sizing:border-box}.fv-input:focus{border-color:#007bff;box-shadow:0 0 0 2px #007bff1a}.fv-input-error{border-color:#dc3545!important}.fv-error-message{margin-top:4px;font-size:12px;color:#dc3545}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: FvIfscFieldComponent, isStandalone: true, selector: "fv-ifsc-field", inputs: { label: "label", control: "control", disabled: "disabled", schema: "schema" }, outputs: { blur: "blur", focus: "focus" }, ngImport: i0, template: "<div class=\"fv-field-container\">\r\n    <label *ngIf=\"label\" class=\"fv-label\">\r\n        {{ label }}\r\n        <span *ngIf=\"isRequired()\" class=\"fv-required-asterisk\">*</span>\r\n    </label>\r\n    <input type=\"text\" [formControl]=\"control\" [disabled]=\"disabled\" (input)=\"onInput($event)\" placeholder=\"IFSC Code\"\r\n        class=\"fv-input\" [class.fv-input-error]=\"errorMessage\" />\r\n    <span *ngIf=\"errorMessage\" class=\"fv-error-message\">{{ errorMessage }}</span>\r\n</div>", styles: ["@import\"https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap\";*{font-family:Poppins,sans-serif}.fv-field-container{display:flex;flex-direction:column;margin-bottom:16px;width:100%}.fv-label{font-size:14px;font-weight:600;color:#151d48;margin-bottom:6px}.fv-required-asterisk{color:#e74c3c;margin-left:2px}.fv-input{padding:5px 10px;border:1px solid #8CBBA8;border-radius:8px;font-size:14px;font-weight:400;outline:none;width:100%;box-sizing:border-box;background-color:#fff;color:#1f2b41;transition:border-color .2s;height:34px}.fv-input:focus{border-color:#3498db;box-shadow:0 0 0 3px #3498db1a}.fv-input-error{border-color:#dc3545!important}.fv-error-message{margin-top:4px;font-size:12px;color:#e74c3c}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: FvIfscFieldComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'fv-ifsc-field', standalone: true, imports: [CommonModule, ReactiveFormsModule], template: "<div class=\"fv-field-container\">\r\n    <label *ngIf=\"label\" class=\"fv-label\">\r\n        {{ label }}\r\n        <span *ngIf=\"isRequired()\" class=\"fv-required-asterisk\">*</span>\r\n    </label>\r\n    <input type=\"text\" [formControl]=\"control\" [disabled]=\"disabled\" (input)=\"onInput($event)\" placeholder=\"IFSC Code\"\r\n        class=\"fv-input\" [class.fv-input-error]=\"errorMessage\" />\r\n    <span *ngIf=\"errorMessage\" class=\"fv-error-message\">{{ errorMessage }}</span>\r\n</div>", styles: [".fv-field-container{display:flex;flex-direction:column;margin-bottom:16px;width:100%}.fv-label{font-size:14px;font-weight:500;color:#333;margin-bottom:6px}.fv-required-asterisk{color:#dc3545;margin-left:2px}.fv-input{padding:10px;border:1px solid #ccc;border-radius:4px;font-size:14px;outline:none;width:100%;box-sizing:border-box}.fv-input:focus{border-color:#007bff;box-shadow:0 0 0 2px #007bff1a}.fv-input-error{border-color:#dc3545!important}.fv-error-message{margin-top:4px;font-size:12px;color:#dc3545}\n"] }]
+            args: [{ selector: 'fv-ifsc-field', standalone: true, imports: [CommonModule, ReactiveFormsModule], template: "<div class=\"fv-field-container\">\r\n    <label *ngIf=\"label\" class=\"fv-label\">\r\n        {{ label }}\r\n        <span *ngIf=\"isRequired()\" class=\"fv-required-asterisk\">*</span>\r\n    </label>\r\n    <input type=\"text\" [formControl]=\"control\" [disabled]=\"disabled\" (input)=\"onInput($event)\" placeholder=\"IFSC Code\"\r\n        class=\"fv-input\" [class.fv-input-error]=\"errorMessage\" />\r\n    <span *ngIf=\"errorMessage\" class=\"fv-error-message\">{{ errorMessage }}</span>\r\n</div>", styles: ["@import\"https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap\";*{font-family:Poppins,sans-serif}.fv-field-container{display:flex;flex-direction:column;margin-bottom:16px;width:100%}.fv-label{font-size:14px;font-weight:600;color:#151d48;margin-bottom:6px}.fv-required-asterisk{color:#e74c3c;margin-left:2px}.fv-input{padding:5px 10px;border:1px solid #8CBBA8;border-radius:8px;font-size:14px;font-weight:400;outline:none;width:100%;box-sizing:border-box;background-color:#fff;color:#1f2b41;transition:border-color .2s;height:34px}.fv-input:focus{border-color:#3498db;box-shadow:0 0 0 3px #3498db1a}.fv-input-error{border-color:#dc3545!important}.fv-error-message{margin-top:4px;font-size:12px;color:#e74c3c}\n"] }]
         }], propDecorators: { label: [{
                 type: Input
             }], control: [{
@@ -1821,11 +2087,11 @@ class FvMicrFieldComponent {
     }
     isRequired() { return this.schema?.rules?.some(r => r.name === 'required' && r.params?.['enabled']) || false; }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: FvMicrFieldComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: FvMicrFieldComponent, isStandalone: true, selector: "fv-micr-field", inputs: { label: "label", control: "control", disabled: "disabled", schema: "schema" }, outputs: { blur: "blur", focus: "focus" }, ngImport: i0, template: "<div class=\"fv-field-container\">\r\n    <label *ngIf=\"label\" class=\"fv-label\">\r\n        {{ label }}\r\n        <span *ngIf=\"isRequired()\" class=\"fv-required-asterisk\">*</span>\r\n    </label>\r\n    <input type=\"text\" [formControl]=\"control\" [disabled]=\"disabled\" (input)=\"onInput($event)\"\r\n        placeholder=\"9 digit MICR\" class=\"fv-input\" [class.fv-input-error]=\"errorMessage\" />\r\n    <span *ngIf=\"errorMessage\" class=\"fv-error-message\">{{ errorMessage }}</span>\r\n</div>", styles: [".fv-field-container{display:flex;flex-direction:column;margin-bottom:16px;width:100%}.fv-label{font-size:14px;font-weight:500;color:#333;margin-bottom:6px}.fv-required-asterisk{color:#dc3545;margin-left:2px}.fv-input{padding:10px;border:1px solid #ccc;border-radius:4px;font-size:14px;outline:none;width:100%;box-sizing:border-box}.fv-input:focus{border-color:#007bff;box-shadow:0 0 0 2px #007bff1a}.fv-input-error{border-color:#dc3545!important}.fv-error-message{margin-top:4px;font-size:12px;color:#dc3545}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: FvMicrFieldComponent, isStandalone: true, selector: "fv-micr-field", inputs: { label: "label", control: "control", disabled: "disabled", schema: "schema" }, outputs: { blur: "blur", focus: "focus" }, ngImport: i0, template: "<div class=\"fv-field-container\">\r\n    <label *ngIf=\"label\" class=\"fv-label\">\r\n        {{ label }}\r\n        <span *ngIf=\"isRequired()\" class=\"fv-required-asterisk\">*</span>\r\n    </label>\r\n    <input type=\"text\" [formControl]=\"control\" [disabled]=\"disabled\" (input)=\"onInput($event)\"\r\n        placeholder=\"9 digit MICR\" class=\"fv-input\" [class.fv-input-error]=\"errorMessage\" />\r\n    <span *ngIf=\"errorMessage\" class=\"fv-error-message\">{{ errorMessage }}</span>\r\n</div>", styles: ["@import\"https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap\";*{font-family:Poppins,sans-serif}.fv-micr-field-container{display:flex;flex-direction:column;margin-bottom:16px;width:100%}.fv-label{font-size:14px;font-weight:600;color:#151d48;margin-bottom:6px}.fv-required-asterisk{color:#e74c3c;margin-left:2px}.fv-input{padding:5px 10px;border:1px solid #8CBBA8;border-radius:8px;font-size:14px;font-weight:400;outline:none;width:100%;box-sizing:border-box;background-color:#fff;color:#1f2b41;transition:border-color .2s;height:34px}.fv-input:focus{border-color:#3498db;box-shadow:0 0 0 3px #3498db1a}.fv-input-error{border-color:#dc3545!important}.fv-error-message{margin-top:4px;font-size:12px;color:#e74c3c}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: FvMicrFieldComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'fv-micr-field', standalone: true, imports: [CommonModule, ReactiveFormsModule], template: "<div class=\"fv-field-container\">\r\n    <label *ngIf=\"label\" class=\"fv-label\">\r\n        {{ label }}\r\n        <span *ngIf=\"isRequired()\" class=\"fv-required-asterisk\">*</span>\r\n    </label>\r\n    <input type=\"text\" [formControl]=\"control\" [disabled]=\"disabled\" (input)=\"onInput($event)\"\r\n        placeholder=\"9 digit MICR\" class=\"fv-input\" [class.fv-input-error]=\"errorMessage\" />\r\n    <span *ngIf=\"errorMessage\" class=\"fv-error-message\">{{ errorMessage }}</span>\r\n</div>", styles: [".fv-field-container{display:flex;flex-direction:column;margin-bottom:16px;width:100%}.fv-label{font-size:14px;font-weight:500;color:#333;margin-bottom:6px}.fv-required-asterisk{color:#dc3545;margin-left:2px}.fv-input{padding:10px;border:1px solid #ccc;border-radius:4px;font-size:14px;outline:none;width:100%;box-sizing:border-box}.fv-input:focus{border-color:#007bff;box-shadow:0 0 0 2px #007bff1a}.fv-input-error{border-color:#dc3545!important}.fv-error-message{margin-top:4px;font-size:12px;color:#dc3545}\n"] }]
+            args: [{ selector: 'fv-micr-field', standalone: true, imports: [CommonModule, ReactiveFormsModule], template: "<div class=\"fv-field-container\">\r\n    <label *ngIf=\"label\" class=\"fv-label\">\r\n        {{ label }}\r\n        <span *ngIf=\"isRequired()\" class=\"fv-required-asterisk\">*</span>\r\n    </label>\r\n    <input type=\"text\" [formControl]=\"control\" [disabled]=\"disabled\" (input)=\"onInput($event)\"\r\n        placeholder=\"9 digit MICR\" class=\"fv-input\" [class.fv-input-error]=\"errorMessage\" />\r\n    <span *ngIf=\"errorMessage\" class=\"fv-error-message\">{{ errorMessage }}</span>\r\n</div>", styles: ["@import\"https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap\";*{font-family:Poppins,sans-serif}.fv-micr-field-container{display:flex;flex-direction:column;margin-bottom:16px;width:100%}.fv-label{font-size:14px;font-weight:600;color:#151d48;margin-bottom:6px}.fv-required-asterisk{color:#e74c3c;margin-left:2px}.fv-input{padding:5px 10px;border:1px solid #8CBBA8;border-radius:8px;font-size:14px;font-weight:400;outline:none;width:100%;box-sizing:border-box;background-color:#fff;color:#1f2b41;transition:border-color .2s;height:34px}.fv-input:focus{border-color:#3498db;box-shadow:0 0 0 3px #3498db1a}.fv-input-error{border-color:#dc3545!important}.fv-error-message{margin-top:4px;font-size:12px;color:#e74c3c}\n"] }]
         }], propDecorators: { label: [{
                 type: Input
             }], control: [{
@@ -1855,6 +2121,16 @@ class FvIbanFieldComponent {
         this.subscription = this.control.valueChanges.subscribe((value) => this.validateValue(value));
     }
     ngOnDestroy() { this.subscription?.unsubscribe(); }
+    ngOnChanges(changes) {
+        if (changes['disabled'] && this.control) {
+            if (this.disabled) {
+                this.control.disable({ emitEvent: false });
+            }
+            else {
+                this.control.enable({ emitEvent: false });
+            }
+        }
+    }
     onInput(event) {
         const input = event.target;
         let value = input.value;
@@ -1877,11 +2153,11 @@ class FvIbanFieldComponent {
     }
     isRequired() { return this.schema?.rules?.some(r => r.name === 'required' && r.params?.['enabled']) || false; }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: FvIbanFieldComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: FvIbanFieldComponent, isStandalone: true, selector: "fv-iban-field", inputs: { label: "label", control: "control", disabled: "disabled", schema: "schema" }, outputs: { blur: "blur", focus: "focus" }, ngImport: i0, template: "<div class=\"fv-field-container\">\r\n    <label *ngIf=\"label\" class=\"fv-label\">\r\n        {{ label }}\r\n        <span *ngIf=\"isRequired()\" class=\"fv-required-asterisk\">*</span>\r\n    </label>\r\n    <input type=\"text\" [formControl]=\"control\" [disabled]=\"disabled\" (input)=\"onInput($event)\" placeholder=\"IBAN\"\r\n        class=\"fv-input\" [class.fv-input-error]=\"errorMessage\" />\r\n    <span *ngIf=\"errorMessage\" class=\"fv-error-message\">{{ errorMessage }}</span>\r\n</div>", styles: [".fv-field-container{display:flex;flex-direction:column;margin-bottom:16px;width:100%}.fv-label{font-size:14px;font-weight:500;color:#333;margin-bottom:6px}.fv-required-asterisk{color:#dc3545;margin-left:2px}.fv-input{padding:10px;border:1px solid #ccc;border-radius:4px;font-size:14px;outline:none;width:100%;box-sizing:border-box}.fv-input:focus{border-color:#007bff;box-shadow:0 0 0 2px #007bff1a}.fv-input-error{border-color:#dc3545!important}.fv-error-message{margin-top:4px;font-size:12px;color:#dc3545}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: FvIbanFieldComponent, isStandalone: true, selector: "fv-iban-field", inputs: { label: "label", control: "control", disabled: "disabled", schema: "schema" }, outputs: { blur: "blur", focus: "focus" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"fv-field-container\">\r\n    <label *ngIf=\"label\" class=\"fv-label\">\r\n        {{ label }}\r\n        <span *ngIf=\"isRequired()\" class=\"fv-required-asterisk\">*</span>\r\n    </label>\r\n    <input type=\"text\" [formControl]=\"control\" (input)=\"onInput($event)\" placeholder=\"IBAN\" class=\"fv-input\"\r\n        [class.fv-input-error]=\"errorMessage\" />\r\n    <span *ngIf=\"errorMessage\" class=\"fv-error-message\">{{ errorMessage }}</span>\r\n</div>", styles: ["@import\"https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap\";*{font-family:Poppins,sans-serif}.fv-iban-field-container{display:flex;flex-direction:column;margin-bottom:16px;width:100%}.fv-label{font-size:14px;font-weight:600;color:#151d48;margin-bottom:6px}.fv-required-asterisk{color:#e74c3c;margin-left:2px}.fv-input{padding:5px 10px;border:1px solid #8CBBA8;border-radius:8px;font-size:14px;font-weight:400;outline:none;width:100%;box-sizing:border-box;background-color:#fff;color:#1f2b41;transition:border-color .2s;height:34px}.fv-input:focus{border-color:#3498db;box-shadow:0 0 0 3px #3498db1a}.fv-input-error{border-color:#dc3545!important}.fv-error-message{margin-top:4px;font-size:12px;color:#e74c3c}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: FvIbanFieldComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'fv-iban-field', standalone: true, imports: [CommonModule, ReactiveFormsModule], template: "<div class=\"fv-field-container\">\r\n    <label *ngIf=\"label\" class=\"fv-label\">\r\n        {{ label }}\r\n        <span *ngIf=\"isRequired()\" class=\"fv-required-asterisk\">*</span>\r\n    </label>\r\n    <input type=\"text\" [formControl]=\"control\" [disabled]=\"disabled\" (input)=\"onInput($event)\" placeholder=\"IBAN\"\r\n        class=\"fv-input\" [class.fv-input-error]=\"errorMessage\" />\r\n    <span *ngIf=\"errorMessage\" class=\"fv-error-message\">{{ errorMessage }}</span>\r\n</div>", styles: [".fv-field-container{display:flex;flex-direction:column;margin-bottom:16px;width:100%}.fv-label{font-size:14px;font-weight:500;color:#333;margin-bottom:6px}.fv-required-asterisk{color:#dc3545;margin-left:2px}.fv-input{padding:10px;border:1px solid #ccc;border-radius:4px;font-size:14px;outline:none;width:100%;box-sizing:border-box}.fv-input:focus{border-color:#007bff;box-shadow:0 0 0 2px #007bff1a}.fv-input-error{border-color:#dc3545!important}.fv-error-message{margin-top:4px;font-size:12px;color:#dc3545}\n"] }]
+            args: [{ selector: 'fv-iban-field', standalone: true, imports: [CommonModule, ReactiveFormsModule], template: "<div class=\"fv-field-container\">\r\n    <label *ngIf=\"label\" class=\"fv-label\">\r\n        {{ label }}\r\n        <span *ngIf=\"isRequired()\" class=\"fv-required-asterisk\">*</span>\r\n    </label>\r\n    <input type=\"text\" [formControl]=\"control\" (input)=\"onInput($event)\" placeholder=\"IBAN\" class=\"fv-input\"\r\n        [class.fv-input-error]=\"errorMessage\" />\r\n    <span *ngIf=\"errorMessage\" class=\"fv-error-message\">{{ errorMessage }}</span>\r\n</div>", styles: ["@import\"https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap\";*{font-family:Poppins,sans-serif}.fv-iban-field-container{display:flex;flex-direction:column;margin-bottom:16px;width:100%}.fv-label{font-size:14px;font-weight:600;color:#151d48;margin-bottom:6px}.fv-required-asterisk{color:#e74c3c;margin-left:2px}.fv-input{padding:5px 10px;border:1px solid #8CBBA8;border-radius:8px;font-size:14px;font-weight:400;outline:none;width:100%;box-sizing:border-box;background-color:#fff;color:#1f2b41;transition:border-color .2s;height:34px}.fv-input:focus{border-color:#3498db;box-shadow:0 0 0 3px #3498db1a}.fv-input-error{border-color:#dc3545!important}.fv-error-message{margin-top:4px;font-size:12px;color:#e74c3c}\n"] }]
         }], propDecorators: { label: [{
                 type: Input
             }], control: [{
@@ -1896,75 +2172,302 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
                 type: Output
             }] } });
 
-// add-update-form.component.ts
-class AddUpdateFormComponent {
-    fb;
-    hostRef;
-    config;
-    validationError = new EventEmitter();
-    form;
-    submitted = false;
-    filePreviews = new Map();
-    fileNames = new Map();
-    valueChangeSubscriptions = [];
-    passwordVisibility = new Map();
-    searchQueries = new Map();
-    constructor(fb, hostRef) {
-        this.fb = fb;
-        this.hostRef = hostRef;
-    }
+class FvEmailFieldComponent {
+    label = 'Email Address';
+    placeholder = 'e.g. john@example.com';
+    schema;
+    control;
+    disabled = false;
+    readonly = false;
+    valueChange = new EventEmitter();
+    blur = new EventEmitter();
+    focus = new EventEmitter();
+    errorMessage = null;
+    subscription;
     ngOnInit() {
-        this.initializeForm();
+        if (!this.control) {
+            console.error('FvEmailField: control is required');
+            return;
+        }
+        // Default email schema if not provided
+        if (!this.schema) {
+            this.schema = {
+                controlType: 'EntryField',
+                errorPriority: ['required', 'regex'],
+                rules: [
+                    {
+                        name: 'regex',
+                        params: {
+                            pattern: '^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\\.[a-zA-Z]{2,}$',
+                        },
+                        errorKey: 'ERR_EMAIL_INVALID',
+                    },
+                ],
+            };
+        }
+        // Subscribe to value changes
+        this.subscription = this.control.valueChanges.subscribe((value) => {
+            this.validateValue(value);
+            this.valueChange.emit(value);
+        });
+        // Validate initial value
+        if (this.control.value) {
+            this.validateValue(this.control.value);
+        }
     }
-    ngAfterViewInit() {
-        // Lifecycle hook - can be used for datepicker initialization if needed
+    ngOnDestroy() {
+        this.subscription?.unsubscribe();
     }
-    getColumnWidth(column) {
-        const maxCols = this.config.maxColsPerRow || 5;
-        const colSpan = Math.min(column.colSpan || 1, maxCols);
-        return `calc(${(colSpan / maxCols) * 100}% - 16px)`;
+    ngOnChanges(changes) {
+        if (changes['disabled'] && this.control) {
+            if (this.disabled) {
+                this.control.disable({ emitEvent: false });
+            }
+            else {
+                this.control.enable({ emitEvent: false });
+            }
+        }
     }
-    getControl(name) {
-        return this.form.get(name);
+    validateValue(value) {
+        if (!this.schema)
+            return;
+        const result = Validator.validate(value, this.schema);
+        this.errorMessage = result.errorKey;
+        if (!result.isValid && result.errorKey) {
+            this.control.setErrors({ [result.errorKey]: true });
+        }
+        else {
+            this.control.setErrors(null);
+        }
     }
-    // 2. HELPER: Convert your FieldValidation[] to the library's ValidationSchema
-    getSchema(column) {
-        const rules = [];
-        const errorPriority = [];
-        if (column.validations) {
-            column.validations.forEach((v) => {
-                switch (v.type) {
-                    case 'required':
-                        rules.push({
-                            name: 'required',
-                            params: { enabled: true },
-                            errorKey: 'ERR_REQUIRED',
-                        });
-                        errorPriority.push('required');
-                        break;
-                    case 'email':
-                        rules.push({
-                            name: 'regex',
-                            params: {
-                                pattern: '^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\\.[a-zA-Z]{2,}$',
-                            },
-                            errorKey: 'ERR_REGEX_MISMATCH',
-                        });
-                        errorPriority.push('regex');
-                        break;
-                    case 'minLength':
-                        rules.push({
-                            name: 'minLength',
-                            params: { value: v.value },
-                            errorKey: 'ERR_MIN_LENGTH',
-                        });
-                        errorPriority.push('minLength');
-                        break;
-                    case 'maxLength':
-                        rules.push({
-                            name: 'maxLength',
-                            params: { value: v.value },
-                            errorKey: 'ERR_MAX_LENGTH',
+    onBlur(event) {
+        if (this.control && this.schema) {
+            this.validateValue(this.control.value);
+        }
+        this.blur.emit();
+    }
+    onFocus(event) {
+        this.focus.emit();
+    }
+    isRequired() {
+        return (this.schema?.rules?.some((r) => r.name === 'required' && r.params?.['enabled']) || false);
+    }
+    getErrorMessage() {
+        if (!this.errorMessage)
+            return '';
+        const errorMessages = {
+            ERR_REQUIRED: 'Email is required',
+            ERR_EMAIL_INVALID: 'Invalid email format',
+            ERR_REGEX_MISMATCH: 'Invalid email format',
+        };
+        return errorMessages[this.errorMessage] || this.errorMessage;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: FvEmailFieldComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: FvEmailFieldComponent, isStandalone: true, selector: "fv-email-field", inputs: { label: "label", placeholder: "placeholder", schema: "schema", control: "control", disabled: "disabled", readonly: "readonly" }, outputs: { valueChange: "valueChange", blur: "blur", focus: "focus" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"fv-field-container\">\r\n    <label *ngIf=\"label\" class=\"fv-label\">\r\n        {{ label }} <span *ngIf=\"isRequired()\" class=\"required\">*</span>\r\n    </label>\r\n\r\n    <div class=\"fv-input-wrapper\">\r\n        <input type=\"email\" [formControl]=\"control\" [placeholder]=\"placeholder\" [readonly]=\"readonly\"\r\n            (blur)=\"onBlur($event)\" (focus)=\"onFocus($event)\" class=\"fv-input\"\r\n            [class.error]=\"!!errorMessage && control.touched\" />\r\n        <span class=\"fv-field-icon\">\r\n            <svg viewBox=\"0 0 24 24\" width=\"18\" height=\"18\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"\r\n                stroke-linecap=\"round\" stroke-linejoin=\"round\">\r\n                <path d=\"M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z\"></path>\r\n                <polyline points=\"22,6 12,13 2,6\"></polyline>\r\n            </svg>\r\n        </span>\r\n    </div>\r\n\r\n    <div *ngIf=\"errorMessage && control.touched\" class=\"fv-error-message\">\r\n        {{ getErrorMessage() }}\r\n    </div>\r\n</div>", styles: ["@import\"https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap\";.fv-field-container,.fv-field-container *{font-family:Poppins,sans-serif}.fv-field-container{display:flex;flex-direction:column;margin-bottom:16px;width:100%}.fv-label{font-size:14px;font-weight:600;color:#151d48;margin-bottom:6px}.required{color:#e74c3c;margin-left:2px}.fv-input-wrapper{position:relative;width:100%}.fv-input{padding:5px 35px 5px 12px;border:1px solid #8CBBA8;border-radius:8px;font-size:14px;font-weight:400;outline:none;width:100%;box-sizing:border-box;background-color:#fff;color:#1f2b41;transition:all .2s ease-in-out;height:34px}.fv-input:focus{border-color:#3498db;box-shadow:0 0 0 3px #3498db1a}.fv-input.error{border-color:#dc3545!important}.fv-field-icon{position:absolute;right:12px;top:50%;transform:translateY(-50%);color:#666;display:flex;align-items:center;pointer-events:none}.fv-error-message{margin-top:4px;font-size:12px;color:#e74c3c;display:flex;align-items:center;gap:4px}.fv-error-message:before{content:\"\\26a0\";font-size:14px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: FvEmailFieldComponent, decorators: [{
+            type: Component,
+            args: [{ standalone: true, imports: [CommonModule, ReactiveFormsModule], selector: 'fv-email-field', template: "<div class=\"fv-field-container\">\r\n    <label *ngIf=\"label\" class=\"fv-label\">\r\n        {{ label }} <span *ngIf=\"isRequired()\" class=\"required\">*</span>\r\n    </label>\r\n\r\n    <div class=\"fv-input-wrapper\">\r\n        <input type=\"email\" [formControl]=\"control\" [placeholder]=\"placeholder\" [readonly]=\"readonly\"\r\n            (blur)=\"onBlur($event)\" (focus)=\"onFocus($event)\" class=\"fv-input\"\r\n            [class.error]=\"!!errorMessage && control.touched\" />\r\n        <span class=\"fv-field-icon\">\r\n            <svg viewBox=\"0 0 24 24\" width=\"18\" height=\"18\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"\r\n                stroke-linecap=\"round\" stroke-linejoin=\"round\">\r\n                <path d=\"M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z\"></path>\r\n                <polyline points=\"22,6 12,13 2,6\"></polyline>\r\n            </svg>\r\n        </span>\r\n    </div>\r\n\r\n    <div *ngIf=\"errorMessage && control.touched\" class=\"fv-error-message\">\r\n        {{ getErrorMessage() }}\r\n    </div>\r\n</div>", styles: ["@import\"https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap\";.fv-field-container,.fv-field-container *{font-family:Poppins,sans-serif}.fv-field-container{display:flex;flex-direction:column;margin-bottom:16px;width:100%}.fv-label{font-size:14px;font-weight:600;color:#151d48;margin-bottom:6px}.required{color:#e74c3c;margin-left:2px}.fv-input-wrapper{position:relative;width:100%}.fv-input{padding:5px 35px 5px 12px;border:1px solid #8CBBA8;border-radius:8px;font-size:14px;font-weight:400;outline:none;width:100%;box-sizing:border-box;background-color:#fff;color:#1f2b41;transition:all .2s ease-in-out;height:34px}.fv-input:focus{border-color:#3498db;box-shadow:0 0 0 3px #3498db1a}.fv-input.error{border-color:#dc3545!important}.fv-field-icon{position:absolute;right:12px;top:50%;transform:translateY(-50%);color:#666;display:flex;align-items:center;pointer-events:none}.fv-error-message{margin-top:4px;font-size:12px;color:#e74c3c;display:flex;align-items:center;gap:4px}.fv-error-message:before{content:\"\\26a0\";font-size:14px}\n"] }]
+        }], propDecorators: { label: [{
+                type: Input
+            }], placeholder: [{
+                type: Input
+            }], schema: [{
+                type: Input
+            }], control: [{
+                type: Input
+            }], disabled: [{
+                type: Input
+            }], readonly: [{
+                type: Input
+            }], valueChange: [{
+                type: Output
+            }], blur: [{
+                type: Output
+            }], focus: [{
+                type: Output
+            }] } });
+
+class FvPasswordFieldComponent {
+    label = 'Password';
+    placeholder = '••••••••';
+    schema;
+    control;
+    disabled = false;
+    readonly = false;
+    valueChange = new EventEmitter();
+    blur = new EventEmitter();
+    focus = new EventEmitter();
+    errorMessage = null;
+    showPassword = false;
+    subscription;
+    ngOnInit() {
+        if (!this.control) {
+            console.error('FvPasswordField: control is required');
+            return;
+        }
+        // Subscribe to value changes
+        this.subscription = this.control.valueChanges.subscribe((value) => {
+            this.validateValue(value);
+            this.valueChange.emit(value);
+        });
+        // Validate initial value
+        if (this.control.value) {
+            this.validateValue(this.control.value);
+        }
+    }
+    ngOnDestroy() {
+        this.subscription?.unsubscribe();
+    }
+    ngOnChanges(changes) {
+        if (changes['disabled'] && this.control) {
+            if (this.disabled) {
+                this.control.disable({ emitEvent: false });
+            }
+            else {
+                this.control.enable({ emitEvent: false });
+            }
+        }
+    }
+    validateValue(value) {
+        if (!this.schema)
+            return;
+        const result = Validator.validate(value, this.schema);
+        this.errorMessage = result.errorKey;
+        if (!result.isValid && result.errorKey) {
+            this.control.setErrors({ [result.errorKey]: true });
+        }
+        else {
+            this.control.setErrors(null);
+        }
+    }
+    toggleVisibility() {
+        if (this.disabled)
+            return;
+        this.showPassword = !this.showPassword;
+    }
+    onBlur(event) {
+        if (this.control && this.schema) {
+            this.validateValue(this.control.value);
+        }
+        this.blur.emit();
+    }
+    onFocus(event) {
+        this.focus.emit();
+    }
+    isRequired() {
+        return (this.schema?.rules?.some((r) => r.name === 'required' && r.params?.['enabled']) || false);
+    }
+    getErrorMessage() {
+        if (!this.errorMessage)
+            return '';
+        const errorMessages = {
+            ERR_REQUIRED: 'Password is required',
+            ERR_MIN_LENGTH: 'Password is too short',
+            ERR_REGEX_MISMATCH: 'Invalid password format',
+            ERR_PASSWORD_TOO_SHORT: 'Password must be at least 8 characters',
+            ERR_PASSWORD_MISSING_UPPERCASE: 'Uppercase letter missing',
+            ERR_PASSWORD_MISSING_LOWERCASE: 'Lowercase letter missing',
+            ERR_PASSWORD_MISSING_NUMBER: 'At least one number missing',
+            ERR_PASSWORD_MISSING_SPECIAL_CHAR: 'Special character missing',
+        };
+        return errorMessages[this.errorMessage] || this.errorMessage;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: FvPasswordFieldComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: FvPasswordFieldComponent, isStandalone: true, selector: "fv-password-field", inputs: { label: "label", placeholder: "placeholder", schema: "schema", control: "control", disabled: "disabled", readonly: "readonly" }, outputs: { valueChange: "valueChange", blur: "blur", focus: "focus" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"fv-field-container\">\r\n    <label *ngIf=\"label\" class=\"fv-label\">\r\n        {{ label }} <span *ngIf=\"isRequired()\" class=\"required\">*</span>\r\n    </label>\r\n\r\n    <div class=\"fv-input-wrapper\">\r\n        <input [type]=\"showPassword ? 'text' : 'password'\" [formControl]=\"control\" [placeholder]=\"placeholder\"\r\n            [readonly]=\"readonly\" (blur)=\"onBlur($event)\" (focus)=\"onFocus($event)\" class=\"fv-input\"\r\n            [class.error]=\"!!errorMessage && control.touched\" />\r\n        <button type=\"button\" class=\"fv-visibility-toggle\" (click)=\"toggleVisibility()\" [disabled]=\"disabled\">\r\n            <svg *ngIf=\"!showPassword\" viewBox=\"0 0 24 24\" width=\"18\" height=\"18\" fill=\"none\" stroke=\"currentColor\"\r\n                stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\r\n                <path d=\"M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z\"></path>\r\n                <circle cx=\"12\" cy=\"12\" r=\"3\"></circle>\r\n            </svg>\r\n            <svg *ngIf=\"showPassword\" viewBox=\"0 0 24 24\" width=\"18\" height=\"18\" fill=\"none\" stroke=\"currentColor\"\r\n                stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\r\n                <path\r\n                    d=\"M17.94 17.94A10.07 10.07 0 0 1 12 20c-7 0-11-8-11-8a18.45 18.45 0 0 1 5.06-5.94M9.9 4.24A9.12 9.12 0 0 1 12 4c7 0 11 8 11 8a18.5 18.5 0 0 1-2.16 3.19m-6.72-1.07a3 3 0 1 1-4.24-4.24\">\r\n                </path>\r\n                <line x1=\"1\" y1=\"1\" x2=\"23\" y2=\"23\"></line>\r\n            </svg>\r\n        </button>\r\n    </div>\r\n\r\n    <div *ngIf=\"errorMessage && control.touched\" class=\"fv-error-message\">\r\n        {{ getErrorMessage() }}\r\n    </div>\r\n</div>", styles: ["@import\"https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap\";.fv-field-container,.fv-field-container *{font-family:Poppins,sans-serif}.fv-field-container{display:flex;flex-direction:column;margin-bottom:16px;width:100%}.fv-label{font-size:14px;font-weight:600;color:#151d48;margin-bottom:6px}.required{color:#e74c3c;margin-left:2px}.fv-input-wrapper{position:relative;width:100%}.fv-input{padding:5px 40px 5px 12px;border:1px solid #8CBBA8;border-radius:8px;font-size:14px;font-weight:400;outline:none;width:100%;box-sizing:border-box;background-color:#fff;color:#1f2b41;transition:all .2s ease-in-out;height:34px}:host ::ng-deep input::-ms-reveal,:host ::ng-deep input::-ms-clear,:host ::ng-deep input::-webkit-contacts-auto-fill-button,:host ::ng-deep input::-webkit-credentials-auto-fill-button,:host ::ng-deep input::-webkit-password-reveal-button{display:none!important;width:0!important;height:0!important}.fv-input::-ms-reveal,.fv-input::-ms-clear,.fv-input::-webkit-contacts-auto-fill-button,.fv-input::-webkit-credentials-auto-fill-button{display:none!important}.fv-input:focus{border-color:#3498db;box-shadow:0 0 0 3px #3498db1a}.fv-input.error{border-color:#dc3545!important}.fv-visibility-toggle{position:absolute;right:8px;top:50%;transform:translateY(-50%);background:transparent;border:none;cursor:pointer;padding:6px;display:flex;align-items:center;justify-content:center;color:#666;transition:color .2s;z-index:2}.fv-visibility-toggle:hover:not(:disabled){color:#3498db}.fv-visibility-toggle:disabled{cursor:not-allowed;opacity:.5}.fv-visibility-toggle svg{display:block}.fv-error-message{margin-top:4px;font-size:12px;color:#e74c3c;display:flex;align-items:center;gap:4px}.fv-error-message:before{content:\"\\26a0\";font-size:14px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: FvPasswordFieldComponent, decorators: [{
+            type: Component,
+            args: [{ standalone: true, imports: [CommonModule, ReactiveFormsModule], selector: 'fv-password-field', template: "<div class=\"fv-field-container\">\r\n    <label *ngIf=\"label\" class=\"fv-label\">\r\n        {{ label }} <span *ngIf=\"isRequired()\" class=\"required\">*</span>\r\n    </label>\r\n\r\n    <div class=\"fv-input-wrapper\">\r\n        <input [type]=\"showPassword ? 'text' : 'password'\" [formControl]=\"control\" [placeholder]=\"placeholder\"\r\n            [readonly]=\"readonly\" (blur)=\"onBlur($event)\" (focus)=\"onFocus($event)\" class=\"fv-input\"\r\n            [class.error]=\"!!errorMessage && control.touched\" />\r\n        <button type=\"button\" class=\"fv-visibility-toggle\" (click)=\"toggleVisibility()\" [disabled]=\"disabled\">\r\n            <svg *ngIf=\"!showPassword\" viewBox=\"0 0 24 24\" width=\"18\" height=\"18\" fill=\"none\" stroke=\"currentColor\"\r\n                stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\r\n                <path d=\"M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z\"></path>\r\n                <circle cx=\"12\" cy=\"12\" r=\"3\"></circle>\r\n            </svg>\r\n            <svg *ngIf=\"showPassword\" viewBox=\"0 0 24 24\" width=\"18\" height=\"18\" fill=\"none\" stroke=\"currentColor\"\r\n                stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\r\n                <path\r\n                    d=\"M17.94 17.94A10.07 10.07 0 0 1 12 20c-7 0-11-8-11-8a18.45 18.45 0 0 1 5.06-5.94M9.9 4.24A9.12 9.12 0 0 1 12 4c7 0 11 8 11 8a18.5 18.5 0 0 1-2.16 3.19m-6.72-1.07a3 3 0 1 1-4.24-4.24\">\r\n                </path>\r\n                <line x1=\"1\" y1=\"1\" x2=\"23\" y2=\"23\"></line>\r\n            </svg>\r\n        </button>\r\n    </div>\r\n\r\n    <div *ngIf=\"errorMessage && control.touched\" class=\"fv-error-message\">\r\n        {{ getErrorMessage() }}\r\n    </div>\r\n</div>", styles: ["@import\"https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap\";.fv-field-container,.fv-field-container *{font-family:Poppins,sans-serif}.fv-field-container{display:flex;flex-direction:column;margin-bottom:16px;width:100%}.fv-label{font-size:14px;font-weight:600;color:#151d48;margin-bottom:6px}.required{color:#e74c3c;margin-left:2px}.fv-input-wrapper{position:relative;width:100%}.fv-input{padding:5px 40px 5px 12px;border:1px solid #8CBBA8;border-radius:8px;font-size:14px;font-weight:400;outline:none;width:100%;box-sizing:border-box;background-color:#fff;color:#1f2b41;transition:all .2s ease-in-out;height:34px}:host ::ng-deep input::-ms-reveal,:host ::ng-deep input::-ms-clear,:host ::ng-deep input::-webkit-contacts-auto-fill-button,:host ::ng-deep input::-webkit-credentials-auto-fill-button,:host ::ng-deep input::-webkit-password-reveal-button{display:none!important;width:0!important;height:0!important}.fv-input::-ms-reveal,.fv-input::-ms-clear,.fv-input::-webkit-contacts-auto-fill-button,.fv-input::-webkit-credentials-auto-fill-button{display:none!important}.fv-input:focus{border-color:#3498db;box-shadow:0 0 0 3px #3498db1a}.fv-input.error{border-color:#dc3545!important}.fv-visibility-toggle{position:absolute;right:8px;top:50%;transform:translateY(-50%);background:transparent;border:none;cursor:pointer;padding:6px;display:flex;align-items:center;justify-content:center;color:#666;transition:color .2s;z-index:2}.fv-visibility-toggle:hover:not(:disabled){color:#3498db}.fv-visibility-toggle:disabled{cursor:not-allowed;opacity:.5}.fv-visibility-toggle svg{display:block}.fv-error-message{margin-top:4px;font-size:12px;color:#e74c3c;display:flex;align-items:center;gap:4px}.fv-error-message:before{content:\"\\26a0\";font-size:14px}\n"] }]
+        }], propDecorators: { label: [{
+                type: Input
+            }], placeholder: [{
+                type: Input
+            }], schema: [{
+                type: Input
+            }], control: [{
+                type: Input
+            }], disabled: [{
+                type: Input
+            }], readonly: [{
+                type: Input
+            }], valueChange: [{
+                type: Output
+            }], blur: [{
+                type: Output
+            }], focus: [{
+                type: Output
+            }] } });
+
+// add-update-form.component.ts
+class AddUpdateFormComponent {
+    fb;
+    hostRef;
+    config;
+    validationError = new EventEmitter();
+    form;
+    submitted = false;
+    filePreviews = new Map();
+    fileNames = new Map();
+    valueChangeSubscriptions = [];
+    passwordVisibility = new Map();
+    searchQueries = new Map();
+    constructor(fb, hostRef) {
+        this.fb = fb;
+        this.hostRef = hostRef;
+    }
+    ngOnInit() {
+        this.initializeForm();
+    }
+    ngAfterViewInit() {
+        // Lifecycle hook - can be used for datepicker initialization if needed
+    }
+    getColumnWidth(column) {
+        const maxCols = this.config.maxColsPerRow || 5;
+        const colSpan = Math.min(column.colSpan || 1, maxCols);
+        return `calc(${(colSpan / maxCols) * 100}% - 16px)`;
+    }
+    getControl(name) {
+        return this.form.get(name);
+    }
+    // 2. HELPER: Convert your FieldValidation[] to the library's ValidationSchema
+    getSchema(column) {
+        const rules = [];
+        const errorPriority = [];
+        if (column.validations) {
+            column.validations.forEach((v) => {
+                switch (v.type) {
+                    case 'required':
+                        rules.push({
+                            name: 'required',
+                            params: { enabled: true },
+                            errorKey: 'ERR_REQUIRED',
+                        });
+                        errorPriority.push('required');
+                        break;
+                    case 'email':
+                        rules.push({
+                            name: 'regex',
+                            params: {
+                                pattern: '^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\\.[a-zA-Z]{2,}$',
+                            },
+                            errorKey: 'ERR_REGEX_MISMATCH',
+                        });
+                        errorPriority.push('regex');
+                        break;
+                    case 'minLength':
+                        rules.push({
+                            name: 'minLength',
+                            params: { value: v.value },
+                            errorKey: 'ERR_MIN_LENGTH',
+                        });
+                        errorPriority.push('minLength');
+                        break;
+                    case 'maxLength':
+                        rules.push({
+                            name: 'maxLength',
+                            params: { value: v.value },
+                            errorKey: 'ERR_MAX_LENGTH',
                         });
                         errorPriority.push('maxLength');
                         break;
@@ -1976,6 +2479,20 @@ class AddUpdateFormComponent {
                         });
                         errorPriority.push('regex');
                         break;
+                    case 'passwordComplexity':
+                        rules.push({
+                            name: 'passwordComplexity',
+                            params: v.params || {
+                                requireUppercase: true,
+                                requireLowercase: true,
+                                requireNumber: true,
+                                requireSpecialChar: true,
+                                minLength: 8
+                            },
+                            errorKey: v.errorKey || 'ERR_PASSWORD_COMPLEXITY_INVALID',
+                        });
+                        errorPriority.push('passwordComplexity');
+                        break;
                     case 'min':
                         rules.push({
                             name: 'min',
@@ -2444,21 +2961,12 @@ class AddUpdateFormComponent {
                 [style.grid-column]="'span ' + (column.colSpan || 1)"
               >
                 <ng-container
-                  *ngIf="
-                    ['text', 'email', 'password'].includes(column.type) &&
-                    !column.hidden
-                  "
+                  *ngIf="column.type === 'text' && !column.hidden"
                 >
                   <fv-entry-field
                     [label]="column.label"
                     [placeholder]="column.placeholder || ''"
-                    [type]="
-                      column.type === 'password'
-                        ? 'password'
-                        : column.type === 'email'
-                        ? 'email'
-                        : 'text'
-                    "
+                    type="text"
                     [control]="getControl(column.name)"
                     [schema]="getSchema(column)"
                     [disabled]="column.disabled || false"
@@ -2470,6 +2978,34 @@ class AddUpdateFormComponent {
                   </fv-entry-field>
                 </ng-container>
 
+                <ng-container
+                  *ngIf="column.type === 'email' && !column.hidden"
+                >
+                  <fv-email-field
+                    [label]="column.label"
+                    [placeholder]="column.placeholder || ''"
+                    [control]="getControl(column.name)"
+                    [schema]="getSchema(column)"
+                    [disabled]="column.disabled || false"
+                    (valueChange)="handleFieldChange(column.name, $event)"
+                  >
+                  </fv-email-field>
+                </ng-container>
+
+                <ng-container
+                  *ngIf="column.type === 'password' && !column.hidden"
+                >
+                  <fv-password-field
+                    [label]="column.label"
+                    [placeholder]="column.placeholder || ''"
+                    [control]="getControl(column.name)"
+                    [schema]="getSchema(column)"
+                    [disabled]="column.disabled || false"
+                    (valueChange)="handleFieldChange(column.name, $event)"
+                  >
+                  </fv-password-field>
+                </ng-container>
+
                 <ng-container
                   *ngIf="column.type === 'number' && !column.hidden"
                 >
@@ -2517,6 +3053,7 @@ class AddUpdateFormComponent {
                     [options]="column.options || []"
                     [control]="getControl(column.name)"
                     [disabled]="column.disabled || false"
+                    [layout]="column.layout || 'vertical'"
                     (valueChange)="handleFieldChange(column.name, $event)"
                   >
                   </fv-radio-group>
@@ -2652,7 +3189,7 @@ class AddUpdateFormComponent {
         </div>
       </form>
     </div>
-  `, isInline: true, styles: ["@import\"https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap\";@import\"https://fonts.googleapis.com/icon?family=Material+Icons\";*{font-family:Poppins!important}.form-container{background:#f5f5f5;padding:10px;border-radius:8px;margin:0 auto;max-width:100%;box-sizing:border-box}.error-border{border-color:red!important}.hidden{display:none!important}.form-header{margin-bottom:10px}.form-header h2{margin:0;font-size:20px;font-weight:700;color:#303030}.dynamic-form{background:#fff;padding:10px;border-radius:6px;box-shadow:0 1px 3px #0000001a;max-width:100%;box-sizing:border-box}.form-section{margin-bottom:10px}.section-title{font-size:16px;font-weight:700;color:#303030;margin:0 0 16px;text-transform:uppercase;letter-spacing:.5px}.fields-row{display:grid;grid-template-columns:repeat(5,1fr);gap:16px;width:100%;box-sizing:border-box;overflow:visible}.form-field-wrapper{display:flex;position:relative;flex-direction:column;min-width:0;width:100%;box-sizing:border-box;overflow:visible}.password-toggle-btn{position:absolute;right:10px;top:32px;background:none;border:none;cursor:pointer;padding:4px;color:#666}.password-toggle-btn:hover{color:#333}.password-toggle-btn .material-icons{font-size:20px;width:auto;height:auto;padding:0}@media (min-width: 1200px) and (max-width: 1400px){.fields-row{grid-template-columns:repeat(5,1fr)}.form-control{width:180px;max-width:180px}}@media (max-width: 1200px){.fields-row{grid-template-columns:repeat(3,1fr)}.form-control{width:100%;max-width:100%}}@media (max-width: 992px){.fields-row{grid-template-columns:repeat(2,1fr);gap:12px}}@media (max-width: 768px){.fields-row{grid-template-columns:repeat(2,1fr);gap:10px}}@media (max-width: 640px){.fields-row{grid-template-columns:1fr;gap:12px}.form-field-wrapper{width:100%}}label{font-weight:600;margin-bottom:6px;color:#151d48;font-size:14px}.required{color:#e74c3c;margin-left:2px}.form-control{padding:5px 10px;width:100%;max-width:100%;border:1px solid #8CBBA8;border-radius:8px;background-color:#fff;font-size:14px;font-weight:400;font-family:inherit;color:#1f2b41;transition:border-color .2s,box-shadow .2s;box-sizing:border-box}.form-control:focus{outline:none;border-color:#3498db;box-shadow:0 0 0 3px #3498db1a}.form-control:disabled{background-color:#ecf0f1;cursor:not-allowed}textarea.form-control{resize:vertical;min-height:100px}select.form-control{cursor:pointer;appearance:none;background-image:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23333' d='M6 9L1 4h10z'/%3E%3C/svg%3E\");background-repeat:no-repeat;background-position:right 8px center;padding-right:40px}.checkbox-wrapper{display:flex;align-items:center;gap:8px}input[type=checkbox]{width:18px;height:18px;cursor:pointer}.checkbox-label{cursor:pointer;margin:0}.file-upload-container{display:flex;align-items:center;gap:20px;padding:20px;background:#fff;max-width:100%;box-sizing:border-box;flex-wrap:wrap}.material-icons{font-family:Material Icons!important;border-radius:4px;display:inline-block;width:40px;padding:8px;height:40px}.file-field-wrapper{width:100%;margin-top:16px;max-width:100%;box-sizing:border-box}.photo-preview-circle{width:100px;height:100px;border-radius:50%;overflow:hidden;border:2px solid #ddd;cursor:pointer;transition:border-color .2s}.photo-preview-circle:hover{border-color:#3498db}.preview-image,.default-photo{width:100%;height:100%;display:flex;align-items:center;justify-content:center}.preview-image img{width:100%;height:100%;object-fit:cover}.default-photo{background:#f0f0f0;color:#999;font-size:40px}.file-info{display:flex;flex-direction:column;gap:8px}.btn-delete{border:none;border-radius:4px;cursor:pointer;font-size:14px;padding:0}.upload-btn-group{display:flex;align-items:center;border:1px solid #d3d3d3;border-radius:8px;background:#fff;overflow:hidden;width:fit-content}.btn-upload{background:#fff;color:#222;border:none;padding:0 18px;font-size:16px;border-right:1px solid #e0e0e0;border-radius:8px 0 0 8px;outline:none;box-shadow:none;cursor:pointer;height:40px;transition:background .2s}.btn-upload-icon{background:#f5f5f5;border:none;border-radius:0 8px 8px 0;display:flex;align-items:center;justify-content:center;width:48px;height:40px;cursor:pointer;transition:background .2s}.btn-upload-icon i.material-icons{font-size:22px;color:#222}.btn-upload:hover,.btn-upload-icon:hover{background:#f0f0f0}.btn-delete{background:#fff;color:red}.btn-delete:hover{background:#f0f0f0}.file-name{font-size:12px;color:#666;margin:10px 8px 8px}.file-label{font-weight:600;margin-bottom:6px;color:#151d48;font-size:14px;display:block}.radio-label{font-weight:600;margin-bottom:15px;color:#151d48;font-size:14px;display:block}.radio-group{display:flex;gap:20px;align-items:center}.radio-item{display:flex;align-items:center;gap:6px}input[type=radio]{width:18px;height:18px;cursor:pointer;accent-color:#3498db}.radio-option-label{cursor:pointer;margin:0;font-weight:400}.hint{font-size:12px;color:#7f8c8d;margin-top:4px}.error-message{color:#e74c3c;font-size:12px;margin-top:4px}.form-actions{display:flex;gap:8px;align-items:center;justify-content:space-between;gap:12px;padding-top:5px}.btn{padding:8px 20px;border:none;border-radius:7px;font-size:12px;font-weight:600;cursor:pointer;transition:all .2s}.btn-primary{background-color:#006aff;color:#fff}.btn-primary:hover:not(:disabled){background-color:#2980b9}.btn-primary:disabled{background-color:#bdc3c7;cursor:not-allowed}.btn-secondary{background-color:#95a5a6;color:#fff}.btn-secondary:hover{background-color:#7f8c8d}.btn-outline{background-color:#303030;color:#fff}.btn-outline:hover{background-color:#2b2b2b;color:#fff}.month-year-wrapper{position:relative;display:flex;align-items:center;width:100%}.month-year-wrapper .form-control{padding-right:45px}.month-picker-hidden{position:absolute;opacity:0;pointer-events:none;width:0;height:0;border:none;padding:0;margin:0}.month-picker-btn{position:absolute;right:5px;background:transparent;border:none;cursor:pointer;padding:5px;display:flex;align-items:center;justify-content:center;color:#666;transition:color .2s;z-index:1}.month-picker-btn:hover:not(:disabled){color:#3498db}.month-picker-btn:disabled{cursor:not-allowed;opacity:.5}.month-picker-btn .material-icons{font-size:20px;width:auto;height:auto;padding:0}.search-select-wrapper{position:relative;width:100%}.search-select-input{padding-right:10px}.search-select-dropdown{position:absolute;top:calc(100% + 4px);left:0;right:auto;min-width:100%;max-width:calc(100vw - 16px);background:#fff;border:1px solid #d3d3d3;border-radius:8px;max-height:220px;overflow-y:auto;box-shadow:0 4px 10px #00000014;z-index:5;padding:6px 0;transform:translate(0);transition:transform .1s ease-out}.search-select-option{padding:8px 12px;cursor:pointer;display:flex;gap:8px;align-items:center;border-bottom:1px solid #f2f2f2}.search-select-option:last-child{border-bottom:none}.search-select-option:hover{background:#f5f9ff}.option-code{color:#0052cc;font-weight:700;min-width:90px}.option-name{color:#151d48;font-weight:500}.time-picker-wrapper{position:relative;display:flex;align-items:center;width:100%}.time-input{padding-right:45px;flex:1}.time-picker-btn{position:absolute;right:5px;background:transparent;border:none;cursor:pointer;padding:5px;display:flex;align-items:center;justify-content:center;color:#666;transition:color .2s;z-index:1}.time-picker-btn:hover:not(:disabled){color:#3498db}.time-picker-btn:disabled{cursor:not-allowed;opacity:.5}.time-picker-btn .material-icons{font-size:20px;width:auto;height:auto;padding:0}input[type=time]{cursor:pointer}input[type=time]::-webkit-calendar-picker-indicator{cursor:pointer;opacity:0;position:absolute;right:0;width:100%;height:100%}.date-picker-field{width:100%}.date-picker-field ::ng-deep .mat-mdc-form-field{width:100%}.date-picker-field ::ng-deep .mat-mdc-text-field-wrapper{background-color:#fff}.date-picker-field ::ng-deep .mdc-text-field--outlined .mdc-notched-outline__leading,.date-picker-field ::ng-deep .mdc-text-field--outlined .mdc-notched-outline__notch,.date-picker-field ::ng-deep .mdc-text-field--outlined .mdc-notched-outline__trailing{border-color:#8cbba8}.date-picker-field ::ng-deep .mdc-text-field--outlined:not(.mdc-text-field--disabled) .mdc-notched-outline__leading,.date-picker-field ::ng-deep .mdc-text-field--outlined:not(.mdc-text-field--disabled) .mdc-notched-outline__notch,.date-picker-field ::ng-deep .mdc-text-field--outlined:not(.mdc-text-field--disabled) .mdc-notched-outline__trailing{border-color:#8cbba8}.date-picker-field ::ng-deep .mdc-text-field--outlined.mdc-text-field--focused .mdc-notched-outline__leading,.date-picker-field ::ng-deep .mdc-text-field--outlined.mdc-text-field--focused .mdc-notched-outline__notch,.date-picker-field ::ng-deep .mdc-text-field--outlined.mdc-text-field--focused .mdc-notched-outline__trailing{border-color:#3498db}.date-picker-field.error-border ::ng-deep .mdc-text-field--outlined .mdc-notched-outline__leading,.date-picker-field.error-border ::ng-deep .mdc-text-field--outlined .mdc-notched-outline__notch,.date-picker-field.error-border ::ng-deep .mdc-text-field--outlined .mdc-notched-outline__trailing{border-color:red!important}.date-picker-field ::ng-deep .mat-mdc-form-field-subscript-wrapper{display:none}.date-picker-field ::ng-deep .mat-mdc-form-field-input-control input{font-family:Poppins!important;font-size:14px;font-weight:400;color:#1f2b41}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "component", type: FvEntryFieldComponent, selector: "fv-entry-field", inputs: ["label", "placeholder", "schema", "control", "disabled", "readonly", "type", "allowAlphabetsOnly", "maxLength"], outputs: ["valueChange", "blur", "focus"] }, { kind: "component", type: FvNumberFieldComponent, selector: "fv-number-field", inputs: ["label", "placeholder", "schema", "control", "disabled", "readonly", "min", "max", "step"], outputs: ["valueChange", "blur", "focus"] }, { kind: "component", type: FvDropdownComponent, selector: "fv-dropdown", inputs: ["label", "placeholder", "options", "schema", "control", "disabled"], outputs: ["valueChange", "blur", "focus"] }, { kind: "component", type: FvRadioGroupComponent, selector: "fv-radio-group", inputs: ["label", "control", "options", "disabled", "required", "name"], outputs: ["valueChange"] }, { kind: "component", type: FvCheckboxComponent, selector: "fv-checkbox", inputs: ["label", "control", "disabled", "required"], outputs: ["valueChange"] }, { kind: "component", type: FvDateFieldComponent, selector: "fv-date-field", inputs: ["label", "schema", "control", "disabled", "readonly", "min", "max"], outputs: ["valueChange", "blur", "focus"] }, { kind: "component", type: FvMonthYearFieldComponent, selector: "fv-month-year-field", inputs: ["label", "schema", "control", "disabled", "readonly", "min", "max"], outputs: ["valueChange", "blur", "focus"] }, { kind: "component", type: FvFileSelectorComponent, selector: "fv-file-selector", inputs: ["label", "placeholder", "schema", "control", "disabled", "accept", "maxSize"], outputs: ["valueChange", "blur"] }, { kind: "component", type: FvImageSelectorComponent, selector: "fv-image-selector", inputs: ["label", "placeholder", "schema", "control", "disabled", "maxSize"], outputs: ["valueChange", "blur"] }, { kind: "component", type: FvRichTextEditorComponent, selector: "fv-rich-text-editor", inputs: ["label", "placeholder", "schema", "control", "disabled", "readonly", "minHeight", "showToolbar"], outputs: ["valueChange", "blur", "focus"] }, { kind: "component", type: FvNameCodeComponent, selector: "fv-name-code", inputs: ["label", "placeholder", "options", "schema", "control", "disabled"], outputs: ["selectionChange"] }, { kind: "component", type: FvPhoneFieldComponent, selector: "fv-phone-field", inputs: ["label", "control", "disabled", "schema"], outputs: ["blur", "focus"] }, { kind: "component", type: FvUanFieldComponent, selector: "fv-uan-field", inputs: ["label", "control", "disabled", "schema"], outputs: ["blur", "focus"] }, { kind: "component", type: FvPfFieldComponent, selector: "fv-pf-field", inputs: ["label", "control", "disabled", "schema"], outputs: ["blur", "focus"] }, { kind: "component", type: FvEsiFieldComponent, selector: "fv-esi-field", inputs: ["label", "control", "disabled", "schema"], outputs: ["blur", "focus"] }, { kind: "component", type: FvIfscFieldComponent, selector: "fv-ifsc-field", inputs: ["label", "control", "disabled", "schema"], outputs: ["blur", "focus"] }, { kind: "component", type: FvMicrFieldComponent, selector: "fv-micr-field", inputs: ["label", "control", "disabled", "schema"], outputs: ["blur", "focus"] }, { kind: "component", type: FvIbanFieldComponent, selector: "fv-iban-field", inputs: ["label", "control", "disabled", "schema"], outputs: ["blur", "focus"] }] });
+  `, isInline: true, styles: ["@import\"https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap\";@import\"https://fonts.googleapis.com/icon?family=Material+Icons\";*{font-family:Poppins!important}.form-container{background:#f5f5f5;padding:5px 10px 10px;border-radius:8px;margin:0 auto;max-width:100%;box-sizing:border-box}.error-border{border-color:red!important}.hidden{display:none!important}.form-header{margin-bottom:5px}.form-header h2{margin:0;font-size:20px;font-weight:700;color:#303030}.dynamic-form{background:#fff;padding:10px;border-radius:6px;box-shadow:0 1px 3px #0000001a;max-width:100%;box-sizing:border-box}.form-section{margin-bottom:10px}.section-title{font-size:16px;font-weight:700;color:#303030;margin:0 0 16px;text-transform:uppercase;letter-spacing:.5px}.fields-row{display:grid;grid-template-columns:repeat(5,1fr);gap:16px;width:100%;box-sizing:border-box;overflow:visible}.form-field-wrapper{display:flex;position:relative;flex-direction:column;min-width:0;width:100%;box-sizing:border-box;overflow:visible}.password-toggle-btn{position:absolute;right:10px;top:32px;background:none;border:none;cursor:pointer;padding:4px;color:#666}.password-toggle-btn:hover{color:#333}.password-toggle-btn .material-icons{font-size:20px;width:auto;height:auto;padding:0}@media (min-width: 1200px) and (max-width: 1400px){.fields-row{grid-template-columns:repeat(5,1fr)}.form-control{width:180px;max-width:180px}}@media (max-width: 1200px){.fields-row{grid-template-columns:repeat(3,1fr)}.form-control{width:100%;max-width:100%}}@media (max-width: 992px){.fields-row{grid-template-columns:repeat(2,1fr);gap:12px}}@media (max-width: 768px){.fields-row{grid-template-columns:repeat(2,1fr);gap:10px}}@media (max-width: 640px){.fields-row{grid-template-columns:1fr;gap:12px}.form-field-wrapper{width:100%}}label{font-weight:600;margin-bottom:6px;color:#151d48;font-size:14px}.required{color:#e74c3c;margin-left:2px}.form-control{padding:5px 10px;width:100%;max-width:100%;height:34px;border:1px solid #8CBBA8;border-radius:8px;background-color:#fff;font-size:14px;font-weight:400;font-family:inherit;color:#1f2b41;transition:border-color .2s,box-shadow .2s;box-sizing:border-box}.form-control:focus{outline:none;border-color:#3498db;box-shadow:0 0 0 3px #3498db1a}.form-control:disabled{background-color:#ecf0f1;cursor:not-allowed}textarea.form-control{resize:vertical;min-height:100px}select.form-control{cursor:pointer;appearance:none;background-image:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23333' d='M6 9L1 4h10z'/%3E%3C/svg%3E\");background-repeat:no-repeat;background-position:right 8px center;padding-right:40px}.checkbox-wrapper{display:flex;align-items:center;gap:8px}input[type=checkbox]{width:18px;height:18px;cursor:pointer}.checkbox-label{cursor:pointer;margin:0}.file-upload-container{display:flex;align-items:center;gap:20px;padding:20px;background:#fff;max-width:100%;box-sizing:border-box;flex-wrap:wrap}.material-icons{font-family:Material Icons!important;border-radius:4px;display:inline-block;width:40px;padding:8px;height:40px}.file-field-wrapper{width:100%;margin-top:16px;max-width:100%;box-sizing:border-box}.photo-preview-circle{width:100px;height:100px;border-radius:50%;overflow:hidden;border:2px solid #ddd;cursor:pointer;transition:border-color .2s}.photo-preview-circle:hover{border-color:#3498db}.preview-image,.default-photo{width:100%;height:100%;display:flex;align-items:center;justify-content:center}.preview-image img{width:100%;height:100%;object-fit:cover}.default-photo{background:#f0f0f0;color:#999;font-size:40px}.file-info{display:flex;flex-direction:column;gap:8px}.btn-delete{border:none;border-radius:4px;cursor:pointer;font-size:14px;padding:0}.upload-btn-group{display:flex;align-items:center;border:1px solid #d3d3d3;border-radius:8px;background:#fff;overflow:hidden;width:fit-content}.btn-upload{background:#fff;color:#222;border:none;padding:0 18px;font-size:16px;border-right:1px solid #e0e0e0;border-radius:8px 0 0 8px;outline:none;box-shadow:none;cursor:pointer;height:40px;transition:background .2s}.btn-upload-icon{background:#f5f5f5;border:none;border-radius:0 8px 8px 0;display:flex;align-items:center;justify-content:center;width:48px;height:40px;cursor:pointer;transition:background .2s}.btn-upload-icon i.material-icons{font-size:22px;color:#222}.btn-upload:hover,.btn-upload-icon:hover{background:#f0f0f0}.btn-delete{background:#fff;color:red}.btn-delete:hover{background:#f0f0f0}.file-name{font-size:12px;color:#666;margin:10px 8px 8px}.file-label{font-weight:600;margin-bottom:6px;color:#151d48;font-size:14px;display:block}.radio-label{font-weight:600;margin-bottom:15px;color:#151d48;font-size:14px;display:block}.radio-group{display:flex;gap:20px;align-items:center}.radio-item{display:flex;align-items:center;gap:6px}input[type=radio]{width:18px;height:18px;cursor:pointer;accent-color:#3498db}.radio-option-label{cursor:pointer;margin:0;font-weight:400}.hint{font-size:12px;color:#7f8c8d;margin-top:4px}.error-message{color:#e74c3c;font-size:12px;margin-top:4px}.form-actions{display:flex;gap:8px;align-items:center;justify-content:space-between;gap:12px;padding-top:5px}.btn{padding:8px 20px;border:none;border-radius:7px;font-size:12px;font-weight:600;cursor:pointer;transition:all .2s}.btn-primary{background-color:#006aff;color:#fff}.btn-primary:hover:not(:disabled){background-color:#2980b9}.btn-primary:disabled{background-color:#bdc3c7;cursor:not-allowed}.btn-secondary{background-color:#95a5a6;color:#fff}.btn-secondary:hover{background-color:#7f8c8d}.btn-outline{background-color:#303030;color:#fff}.btn-outline:hover{background-color:#2b2b2b;color:#fff}.month-year-wrapper{position:relative;display:flex;align-items:center;width:100%}.month-year-wrapper .form-control{padding-right:45px}.month-picker-hidden{position:absolute;opacity:0;pointer-events:none;width:0;height:0;border:none;padding:0;margin:0}.month-picker-btn{position:absolute;right:5px;background:transparent;border:none;cursor:pointer;padding:5px;display:flex;align-items:center;justify-content:center;color:#666;transition:color .2s;z-index:1}.month-picker-btn:hover:not(:disabled){color:#3498db}.month-picker-btn:disabled{cursor:not-allowed;opacity:.5}.month-picker-btn .material-icons{font-size:20px;width:auto;height:auto;padding:0}.search-select-wrapper{position:relative;width:100%}.search-select-input{padding-right:10px}.search-select-dropdown{position:absolute;top:calc(100% + 4px);left:0;right:auto;min-width:100%;max-width:calc(100vw - 16px);background:#fff;border:1px solid #d3d3d3;border-radius:8px;max-height:220px;overflow-y:auto;box-shadow:0 4px 10px #00000014;z-index:5;padding:6px 0;transform:translate(0);transition:transform .1s ease-out}.search-select-option{padding:8px 12px;cursor:pointer;display:flex;gap:8px;align-items:center;border-bottom:1px solid #f2f2f2}.search-select-option:last-child{border-bottom:none}.search-select-option:hover{background:#f5f9ff}.option-code{color:#0052cc;font-weight:700;min-width:90px}.option-name{color:#151d48;font-weight:500}.time-picker-wrapper{position:relative;display:flex;align-items:center;width:100%}.time-input{padding-right:45px;flex:1}.time-picker-btn{position:absolute;right:5px;background:transparent;border:none;cursor:pointer;padding:5px;display:flex;align-items:center;justify-content:center;color:#666;transition:color .2s;z-index:1}.time-picker-btn:hover:not(:disabled){color:#3498db}.time-picker-btn:disabled{cursor:not-allowed;opacity:.5}.time-picker-btn .material-icons{font-size:20px;width:auto;height:auto;padding:0}input[type=time]{cursor:pointer}input[type=time]::-webkit-calendar-picker-indicator{cursor:pointer;opacity:0;position:absolute;right:0;width:100%;height:100%}.date-picker-field{width:100%}.date-picker-field ::ng-deep .mat-mdc-form-field{width:100%}.date-picker-field ::ng-deep .mat-mdc-text-field-wrapper{background-color:#fff}.date-picker-field ::ng-deep .mdc-text-field--outlined .mdc-notched-outline__leading,.date-picker-field ::ng-deep .mdc-text-field--outlined .mdc-notched-outline__notch,.date-picker-field ::ng-deep .mdc-text-field--outlined .mdc-notched-outline__trailing{border-color:#8cbba8}.date-picker-field ::ng-deep .mdc-text-field--outlined:not(.mdc-text-field--disabled) .mdc-notched-outline__leading,.date-picker-field ::ng-deep .mdc-text-field--outlined:not(.mdc-text-field--disabled) .mdc-notched-outline__notch,.date-picker-field ::ng-deep .mdc-text-field--outlined:not(.mdc-text-field--disabled) .mdc-notched-outline__trailing{border-color:#8cbba8}.date-picker-field ::ng-deep .mdc-text-field--outlined.mdc-text-field--focused .mdc-notched-outline__leading,.date-picker-field ::ng-deep .mdc-text-field--outlined.mdc-text-field--focused .mdc-notched-outline__notch,.date-picker-field ::ng-deep .mdc-text-field--outlined.mdc-text-field--focused .mdc-notched-outline__trailing{border-color:#3498db}.date-picker-field.error-border ::ng-deep .mdc-text-field--outlined .mdc-notched-outline__leading,.date-picker-field.error-border ::ng-deep .mdc-text-field--outlined .mdc-notched-outline__notch,.date-picker-field.error-border ::ng-deep .mdc-text-field--outlined .mdc-notched-outline__trailing{border-color:red!important}.date-picker-field ::ng-deep .mat-mdc-form-field-subscript-wrapper{display:none}.date-picker-field ::ng-deep .mat-mdc-form-field-input-control input{font-family:Poppins!important;font-size:14px;font-weight:400;color:#1f2b41}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "component", type: FvEntryFieldComponent, selector: "fv-entry-field", inputs: ["label", "placeholder", "schema", "control", "disabled", "readonly", "type", "allowAlphabetsOnly", "maxLength"], outputs: ["valueChange", "blur", "focus"] }, { kind: "component", type: FvNumberFieldComponent, selector: "fv-number-field", inputs: ["label", "placeholder", "schema", "control", "disabled", "readonly", "min", "max", "step"], outputs: ["valueChange", "blur", "focus"] }, { kind: "component", type: FvDropdownComponent, selector: "fv-dropdown", inputs: ["label", "placeholder", "options", "schema", "control", "disabled"], outputs: ["valueChange", "blur", "focus"] }, { kind: "component", type: FvRadioGroupComponent, selector: "fv-radio-group", inputs: ["label", "control", "options", "disabled", "required", "name", "layout"], outputs: ["valueChange"] }, { kind: "component", type: FvCheckboxComponent, selector: "fv-checkbox", inputs: ["label", "control", "disabled", "required"], outputs: ["valueChange"] }, { kind: "component", type: FvDateFieldComponent, selector: "fv-date-field", inputs: ["label", "schema", "control", "disabled", "readonly", "min", "max"], outputs: ["valueChange", "blur", "focus"] }, { kind: "component", type: FvMonthYearFieldComponent, selector: "fv-month-year-field", inputs: ["label", "schema", "control", "disabled", "readonly", "min", "max"], outputs: ["valueChange", "blur", "focus"] }, { kind: "component", type: FvFileSelectorComponent, selector: "fv-file-selector", inputs: ["label", "placeholder", "schema", "control", "disabled", "accept", "maxSize"], outputs: ["valueChange", "blur"] }, { kind: "component", type: FvImageSelectorComponent, selector: "fv-image-selector", inputs: ["label", "placeholder", "schema", "control", "disabled", "maxSize"], outputs: ["valueChange", "blur"] }, { kind: "component", type: FvRichTextEditorComponent, selector: "fv-rich-text-editor", inputs: ["label", "placeholder", "schema", "control", "disabled", "readonly", "minHeight", "showToolbar"], outputs: ["valueChange", "blur", "focus"] }, { kind: "component", type: FvNameCodeComponent, selector: "fv-name-code", inputs: ["label", "placeholder", "options", "schema", "control", "disabled"], outputs: ["selectionChange"] }, { kind: "component", type: FvPhoneFieldComponent, selector: "fv-phone-field", inputs: ["label", "control", "disabled", "schema"], outputs: ["blur", "focus"] }, { kind: "component", type: FvUanFieldComponent, selector: "fv-uan-field", inputs: ["label", "control", "disabled", "schema"], outputs: ["blur", "focus"] }, { kind: "component", type: FvPfFieldComponent, selector: "fv-pf-field", inputs: ["label", "control", "disabled", "schema"], outputs: ["blur", "focus"] }, { kind: "component", type: FvEsiFieldComponent, selector: "fv-esi-field", inputs: ["label", "control", "disabled", "schema"], outputs: ["blur", "focus"] }, { kind: "component", type: FvIfscFieldComponent, selector: "fv-ifsc-field", inputs: ["label", "control", "disabled", "schema"], outputs: ["blur", "focus"] }, { kind: "component", type: FvMicrFieldComponent, selector: "fv-micr-field", inputs: ["label", "control", "disabled", "schema"], outputs: ["blur", "focus"] }, { kind: "component", type: FvIbanFieldComponent, selector: "fv-iban-field", inputs: ["label", "control", "disabled", "schema"], outputs: ["blur", "focus"] }, { kind: "component", type: FvEmailFieldComponent, selector: "fv-email-field", inputs: ["label", "placeholder", "schema", "control", "disabled", "readonly"], outputs: ["valueChange", "blur", "focus"] }, { kind: "component", type: FvPasswordFieldComponent, selector: "fv-password-field", inputs: ["label", "placeholder", "schema", "control", "disabled", "readonly"], outputs: ["valueChange", "blur", "focus"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: AddUpdateFormComponent, decorators: [{
             type: Component,
@@ -2669,7 +3206,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
                         FvFileSelectorComponent,
                         FvImageSelectorComponent,
                         FvRichTextEditorComponent,
-                        FvRichTextEditorComponent,
                         FvNameCodeComponent,
                         FvPhoneFieldComponent,
                         FvUanFieldComponent,
@@ -2678,6 +3214,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
                         FvIfscFieldComponent,
                         FvMicrFieldComponent,
                         FvIbanFieldComponent,
+                        FvEmailFieldComponent,
+                        FvPasswordFieldComponent,
                     ], template: `
     <div class="form-container">
       <div class="form-header" *ngIf="config.formTitle">
@@ -2699,21 +3237,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
                 [style.grid-column]="'span ' + (column.colSpan || 1)"
               >
                 <ng-container
-                  *ngIf="
-                    ['text', 'email', 'password'].includes(column.type) &&
-                    !column.hidden
-                  "
+                  *ngIf="column.type === 'text' && !column.hidden"
                 >
                   <fv-entry-field
                     [label]="column.label"
                     [placeholder]="column.placeholder || ''"
-                    [type]="
-                      column.type === 'password'
-                        ? 'password'
-                        : column.type === 'email'
-                        ? 'email'
-                        : 'text'
-                    "
+                    type="text"
                     [control]="getControl(column.name)"
                     [schema]="getSchema(column)"
                     [disabled]="column.disabled || false"
@@ -2725,6 +3254,34 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
                   </fv-entry-field>
                 </ng-container>
 
+                <ng-container
+                  *ngIf="column.type === 'email' && !column.hidden"
+                >
+                  <fv-email-field
+                    [label]="column.label"
+                    [placeholder]="column.placeholder || ''"
+                    [control]="getControl(column.name)"
+                    [schema]="getSchema(column)"
+                    [disabled]="column.disabled || false"
+                    (valueChange)="handleFieldChange(column.name, $event)"
+                  >
+                  </fv-email-field>
+                </ng-container>
+
+                <ng-container
+                  *ngIf="column.type === 'password' && !column.hidden"
+                >
+                  <fv-password-field
+                    [label]="column.label"
+                    [placeholder]="column.placeholder || ''"
+                    [control]="getControl(column.name)"
+                    [schema]="getSchema(column)"
+                    [disabled]="column.disabled || false"
+                    (valueChange)="handleFieldChange(column.name, $event)"
+                  >
+                  </fv-password-field>
+                </ng-container>
+
                 <ng-container
                   *ngIf="column.type === 'number' && !column.hidden"
                 >
@@ -2772,6 +3329,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
                     [options]="column.options || []"
                     [control]="getControl(column.name)"
                     [disabled]="column.disabled || false"
+                    [layout]="column.layout || 'vertical'"
                     (valueChange)="handleFieldChange(column.name, $event)"
                   >
                   </fv-radio-group>
@@ -2907,92 +3465,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
         </div>
       </form>
     </div>
-  `, styles: ["@import\"https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap\";@import\"https://fonts.googleapis.com/icon?family=Material+Icons\";*{font-family:Poppins!important}.form-container{background:#f5f5f5;padding:10px;border-radius:8px;margin:0 auto;max-width:100%;box-sizing:border-box}.error-border{border-color:red!important}.hidden{display:none!important}.form-header{margin-bottom:10px}.form-header h2{margin:0;font-size:20px;font-weight:700;color:#303030}.dynamic-form{background:#fff;padding:10px;border-radius:6px;box-shadow:0 1px 3px #0000001a;max-width:100%;box-sizing:border-box}.form-section{margin-bottom:10px}.section-title{font-size:16px;font-weight:700;color:#303030;margin:0 0 16px;text-transform:uppercase;letter-spacing:.5px}.fields-row{display:grid;grid-template-columns:repeat(5,1fr);gap:16px;width:100%;box-sizing:border-box;overflow:visible}.form-field-wrapper{display:flex;position:relative;flex-direction:column;min-width:0;width:100%;box-sizing:border-box;overflow:visible}.password-toggle-btn{position:absolute;right:10px;top:32px;background:none;border:none;cursor:pointer;padding:4px;color:#666}.password-toggle-btn:hover{color:#333}.password-toggle-btn .material-icons{font-size:20px;width:auto;height:auto;padding:0}@media (min-width: 1200px) and (max-width: 1400px){.fields-row{grid-template-columns:repeat(5,1fr)}.form-control{width:180px;max-width:180px}}@media (max-width: 1200px){.fields-row{grid-template-columns:repeat(3,1fr)}.form-control{width:100%;max-width:100%}}@media (max-width: 992px){.fields-row{grid-template-columns:repeat(2,1fr);gap:12px}}@media (max-width: 768px){.fields-row{grid-template-columns:repeat(2,1fr);gap:10px}}@media (max-width: 640px){.fields-row{grid-template-columns:1fr;gap:12px}.form-field-wrapper{width:100%}}label{font-weight:600;margin-bottom:6px;color:#151d48;font-size:14px}.required{color:#e74c3c;margin-left:2px}.form-control{padding:5px 10px;width:100%;max-width:100%;border:1px solid #8CBBA8;border-radius:8px;background-color:#fff;font-size:14px;font-weight:400;font-family:inherit;color:#1f2b41;transition:border-color .2s,box-shadow .2s;box-sizing:border-box}.form-control:focus{outline:none;border-color:#3498db;box-shadow:0 0 0 3px #3498db1a}.form-control:disabled{background-color:#ecf0f1;cursor:not-allowed}textarea.form-control{resize:vertical;min-height:100px}select.form-control{cursor:pointer;appearance:none;background-image:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23333' d='M6 9L1 4h10z'/%3E%3C/svg%3E\");background-repeat:no-repeat;background-position:right 8px center;padding-right:40px}.checkbox-wrapper{display:flex;align-items:center;gap:8px}input[type=checkbox]{width:18px;height:18px;cursor:pointer}.checkbox-label{cursor:pointer;margin:0}.file-upload-container{display:flex;align-items:center;gap:20px;padding:20px;background:#fff;max-width:100%;box-sizing:border-box;flex-wrap:wrap}.material-icons{font-family:Material Icons!important;border-radius:4px;display:inline-block;width:40px;padding:8px;height:40px}.file-field-wrapper{width:100%;margin-top:16px;max-width:100%;box-sizing:border-box}.photo-preview-circle{width:100px;height:100px;border-radius:50%;overflow:hidden;border:2px solid #ddd;cursor:pointer;transition:border-color .2s}.photo-preview-circle:hover{border-color:#3498db}.preview-image,.default-photo{width:100%;height:100%;display:flex;align-items:center;justify-content:center}.preview-image img{width:100%;height:100%;object-fit:cover}.default-photo{background:#f0f0f0;color:#999;font-size:40px}.file-info{display:flex;flex-direction:column;gap:8px}.btn-delete{border:none;border-radius:4px;cursor:pointer;font-size:14px;padding:0}.upload-btn-group{display:flex;align-items:center;border:1px solid #d3d3d3;border-radius:8px;background:#fff;overflow:hidden;width:fit-content}.btn-upload{background:#fff;color:#222;border:none;padding:0 18px;font-size:16px;border-right:1px solid #e0e0e0;border-radius:8px 0 0 8px;outline:none;box-shadow:none;cursor:pointer;height:40px;transition:background .2s}.btn-upload-icon{background:#f5f5f5;border:none;border-radius:0 8px 8px 0;display:flex;align-items:center;justify-content:center;width:48px;height:40px;cursor:pointer;transition:background .2s}.btn-upload-icon i.material-icons{font-size:22px;color:#222}.btn-upload:hover,.btn-upload-icon:hover{background:#f0f0f0}.btn-delete{background:#fff;color:red}.btn-delete:hover{background:#f0f0f0}.file-name{font-size:12px;color:#666;margin:10px 8px 8px}.file-label{font-weight:600;margin-bottom:6px;color:#151d48;font-size:14px;display:block}.radio-label{font-weight:600;margin-bottom:15px;color:#151d48;font-size:14px;display:block}.radio-group{display:flex;gap:20px;align-items:center}.radio-item{display:flex;align-items:center;gap:6px}input[type=radio]{width:18px;height:18px;cursor:pointer;accent-color:#3498db}.radio-option-label{cursor:pointer;margin:0;font-weight:400}.hint{font-size:12px;color:#7f8c8d;margin-top:4px}.error-message{color:#e74c3c;font-size:12px;margin-top:4px}.form-actions{display:flex;gap:8px;align-items:center;justify-content:space-between;gap:12px;padding-top:5px}.btn{padding:8px 20px;border:none;border-radius:7px;font-size:12px;font-weight:600;cursor:pointer;transition:all .2s}.btn-primary{background-color:#006aff;color:#fff}.btn-primary:hover:not(:disabled){background-color:#2980b9}.btn-primary:disabled{background-color:#bdc3c7;cursor:not-allowed}.btn-secondary{background-color:#95a5a6;color:#fff}.btn-secondary:hover{background-color:#7f8c8d}.btn-outline{background-color:#303030;color:#fff}.btn-outline:hover{background-color:#2b2b2b;color:#fff}.month-year-wrapper{position:relative;display:flex;align-items:center;width:100%}.month-year-wrapper .form-control{padding-right:45px}.month-picker-hidden{position:absolute;opacity:0;pointer-events:none;width:0;height:0;border:none;padding:0;margin:0}.month-picker-btn{position:absolute;right:5px;background:transparent;border:none;cursor:pointer;padding:5px;display:flex;align-items:center;justify-content:center;color:#666;transition:color .2s;z-index:1}.month-picker-btn:hover:not(:disabled){color:#3498db}.month-picker-btn:disabled{cursor:not-allowed;opacity:.5}.month-picker-btn .material-icons{font-size:20px;width:auto;height:auto;padding:0}.search-select-wrapper{position:relative;width:100%}.search-select-input{padding-right:10px}.search-select-dropdown{position:absolute;top:calc(100% + 4px);left:0;right:auto;min-width:100%;max-width:calc(100vw - 16px);background:#fff;border:1px solid #d3d3d3;border-radius:8px;max-height:220px;overflow-y:auto;box-shadow:0 4px 10px #00000014;z-index:5;padding:6px 0;transform:translate(0);transition:transform .1s ease-out}.search-select-option{padding:8px 12px;cursor:pointer;display:flex;gap:8px;align-items:center;border-bottom:1px solid #f2f2f2}.search-select-option:last-child{border-bottom:none}.search-select-option:hover{background:#f5f9ff}.option-code{color:#0052cc;font-weight:700;min-width:90px}.option-name{color:#151d48;font-weight:500}.time-picker-wrapper{position:relative;display:flex;align-items:center;width:100%}.time-input{padding-right:45px;flex:1}.time-picker-btn{position:absolute;right:5px;background:transparent;border:none;cursor:pointer;padding:5px;display:flex;align-items:center;justify-content:center;color:#666;transition:color .2s;z-index:1}.time-picker-btn:hover:not(:disabled){color:#3498db}.time-picker-btn:disabled{cursor:not-allowed;opacity:.5}.time-picker-btn .material-icons{font-size:20px;width:auto;height:auto;padding:0}input[type=time]{cursor:pointer}input[type=time]::-webkit-calendar-picker-indicator{cursor:pointer;opacity:0;position:absolute;right:0;width:100%;height:100%}.date-picker-field{width:100%}.date-picker-field ::ng-deep .mat-mdc-form-field{width:100%}.date-picker-field ::ng-deep .mat-mdc-text-field-wrapper{background-color:#fff}.date-picker-field ::ng-deep .mdc-text-field--outlined .mdc-notched-outline__leading,.date-picker-field ::ng-deep .mdc-text-field--outlined .mdc-notched-outline__notch,.date-picker-field ::ng-deep .mdc-text-field--outlined .mdc-notched-outline__trailing{border-color:#8cbba8}.date-picker-field ::ng-deep .mdc-text-field--outlined:not(.mdc-text-field--disabled) .mdc-notched-outline__leading,.date-picker-field ::ng-deep .mdc-text-field--outlined:not(.mdc-text-field--disabled) .mdc-notched-outline__notch,.date-picker-field ::ng-deep .mdc-text-field--outlined:not(.mdc-text-field--disabled) .mdc-notched-outline__trailing{border-color:#8cbba8}.date-picker-field ::ng-deep .mdc-text-field--outlined.mdc-text-field--focused .mdc-notched-outline__leading,.date-picker-field ::ng-deep .mdc-text-field--outlined.mdc-text-field--focused .mdc-notched-outline__notch,.date-picker-field ::ng-deep .mdc-text-field--outlined.mdc-text-field--focused .mdc-notched-outline__trailing{border-color:#3498db}.date-picker-field.error-border ::ng-deep .mdc-text-field--outlined .mdc-notched-outline__leading,.date-picker-field.error-border ::ng-deep .mdc-text-field--outlined .mdc-notched-outline__notch,.date-picker-field.error-border ::ng-deep .mdc-text-field--outlined .mdc-notched-outline__trailing{border-color:red!important}.date-picker-field ::ng-deep .mat-mdc-form-field-subscript-wrapper{display:none}.date-picker-field ::ng-deep .mat-mdc-form-field-input-control input{font-family:Poppins!important;font-size:14px;font-weight:400;color:#1f2b41}\n"] }]
+  `, styles: ["@import\"https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap\";@import\"https://fonts.googleapis.com/icon?family=Material+Icons\";*{font-family:Poppins!important}.form-container{background:#f5f5f5;padding:5px 10px 10px;border-radius:8px;margin:0 auto;max-width:100%;box-sizing:border-box}.error-border{border-color:red!important}.hidden{display:none!important}.form-header{margin-bottom:5px}.form-header h2{margin:0;font-size:20px;font-weight:700;color:#303030}.dynamic-form{background:#fff;padding:10px;border-radius:6px;box-shadow:0 1px 3px #0000001a;max-width:100%;box-sizing:border-box}.form-section{margin-bottom:10px}.section-title{font-size:16px;font-weight:700;color:#303030;margin:0 0 16px;text-transform:uppercase;letter-spacing:.5px}.fields-row{display:grid;grid-template-columns:repeat(5,1fr);gap:16px;width:100%;box-sizing:border-box;overflow:visible}.form-field-wrapper{display:flex;position:relative;flex-direction:column;min-width:0;width:100%;box-sizing:border-box;overflow:visible}.password-toggle-btn{position:absolute;right:10px;top:32px;background:none;border:none;cursor:pointer;padding:4px;color:#666}.password-toggle-btn:hover{color:#333}.password-toggle-btn .material-icons{font-size:20px;width:auto;height:auto;padding:0}@media (min-width: 1200px) and (max-width: 1400px){.fields-row{grid-template-columns:repeat(5,1fr)}.form-control{width:180px;max-width:180px}}@media (max-width: 1200px){.fields-row{grid-template-columns:repeat(3,1fr)}.form-control{width:100%;max-width:100%}}@media (max-width: 992px){.fields-row{grid-template-columns:repeat(2,1fr);gap:12px}}@media (max-width: 768px){.fields-row{grid-template-columns:repeat(2,1fr);gap:10px}}@media (max-width: 640px){.fields-row{grid-template-columns:1fr;gap:12px}.form-field-wrapper{width:100%}}label{font-weight:600;margin-bottom:6px;color:#151d48;font-size:14px}.required{color:#e74c3c;margin-left:2px}.form-control{padding:5px 10px;width:100%;max-width:100%;height:34px;border:1px solid #8CBBA8;border-radius:8px;background-color:#fff;font-size:14px;font-weight:400;font-family:inherit;color:#1f2b41;transition:border-color .2s,box-shadow .2s;box-sizing:border-box}.form-control:focus{outline:none;border-color:#3498db;box-shadow:0 0 0 3px #3498db1a}.form-control:disabled{background-color:#ecf0f1;cursor:not-allowed}textarea.form-control{resize:vertical;min-height:100px}select.form-control{cursor:pointer;appearance:none;background-image:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23333' d='M6 9L1 4h10z'/%3E%3C/svg%3E\");background-repeat:no-repeat;background-position:right 8px center;padding-right:40px}.checkbox-wrapper{display:flex;align-items:center;gap:8px}input[type=checkbox]{width:18px;height:18px;cursor:pointer}.checkbox-label{cursor:pointer;margin:0}.file-upload-container{display:flex;align-items:center;gap:20px;padding:20px;background:#fff;max-width:100%;box-sizing:border-box;flex-wrap:wrap}.material-icons{font-family:Material Icons!important;border-radius:4px;display:inline-block;width:40px;padding:8px;height:40px}.file-field-wrapper{width:100%;margin-top:16px;max-width:100%;box-sizing:border-box}.photo-preview-circle{width:100px;height:100px;border-radius:50%;overflow:hidden;border:2px solid #ddd;cursor:pointer;transition:border-color .2s}.photo-preview-circle:hover{border-color:#3498db}.preview-image,.default-photo{width:100%;height:100%;display:flex;align-items:center;justify-content:center}.preview-image img{width:100%;height:100%;object-fit:cover}.default-photo{background:#f0f0f0;color:#999;font-size:40px}.file-info{display:flex;flex-direction:column;gap:8px}.btn-delete{border:none;border-radius:4px;cursor:pointer;font-size:14px;padding:0}.upload-btn-group{display:flex;align-items:center;border:1px solid #d3d3d3;border-radius:8px;background:#fff;overflow:hidden;width:fit-content}.btn-upload{background:#fff;color:#222;border:none;padding:0 18px;font-size:16px;border-right:1px solid #e0e0e0;border-radius:8px 0 0 8px;outline:none;box-shadow:none;cursor:pointer;height:40px;transition:background .2s}.btn-upload-icon{background:#f5f5f5;border:none;border-radius:0 8px 8px 0;display:flex;align-items:center;justify-content:center;width:48px;height:40px;cursor:pointer;transition:background .2s}.btn-upload-icon i.material-icons{font-size:22px;color:#222}.btn-upload:hover,.btn-upload-icon:hover{background:#f0f0f0}.btn-delete{background:#fff;color:red}.btn-delete:hover{background:#f0f0f0}.file-name{font-size:12px;color:#666;margin:10px 8px 8px}.file-label{font-weight:600;margin-bottom:6px;color:#151d48;font-size:14px;display:block}.radio-label{font-weight:600;margin-bottom:15px;color:#151d48;font-size:14px;display:block}.radio-group{display:flex;gap:20px;align-items:center}.radio-item{display:flex;align-items:center;gap:6px}input[type=radio]{width:18px;height:18px;cursor:pointer;accent-color:#3498db}.radio-option-label{cursor:pointer;margin:0;font-weight:400}.hint{font-size:12px;color:#7f8c8d;margin-top:4px}.error-message{color:#e74c3c;font-size:12px;margin-top:4px}.form-actions{display:flex;gap:8px;align-items:center;justify-content:space-between;gap:12px;padding-top:5px}.btn{padding:8px 20px;border:none;border-radius:7px;font-size:12px;font-weight:600;cursor:pointer;transition:all .2s}.btn-primary{background-color:#006aff;color:#fff}.btn-primary:hover:not(:disabled){background-color:#2980b9}.btn-primary:disabled{background-color:#bdc3c7;cursor:not-allowed}.btn-secondary{background-color:#95a5a6;color:#fff}.btn-secondary:hover{background-color:#7f8c8d}.btn-outline{background-color:#303030;color:#fff}.btn-outline:hover{background-color:#2b2b2b;color:#fff}.month-year-wrapper{position:relative;display:flex;align-items:center;width:100%}.month-year-wrapper .form-control{padding-right:45px}.month-picker-hidden{position:absolute;opacity:0;pointer-events:none;width:0;height:0;border:none;padding:0;margin:0}.month-picker-btn{position:absolute;right:5px;background:transparent;border:none;cursor:pointer;padding:5px;display:flex;align-items:center;justify-content:center;color:#666;transition:color .2s;z-index:1}.month-picker-btn:hover:not(:disabled){color:#3498db}.month-picker-btn:disabled{cursor:not-allowed;opacity:.5}.month-picker-btn .material-icons{font-size:20px;width:auto;height:auto;padding:0}.search-select-wrapper{position:relative;width:100%}.search-select-input{padding-right:10px}.search-select-dropdown{position:absolute;top:calc(100% + 4px);left:0;right:auto;min-width:100%;max-width:calc(100vw - 16px);background:#fff;border:1px solid #d3d3d3;border-radius:8px;max-height:220px;overflow-y:auto;box-shadow:0 4px 10px #00000014;z-index:5;padding:6px 0;transform:translate(0);transition:transform .1s ease-out}.search-select-option{padding:8px 12px;cursor:pointer;display:flex;gap:8px;align-items:center;border-bottom:1px solid #f2f2f2}.search-select-option:last-child{border-bottom:none}.search-select-option:hover{background:#f5f9ff}.option-code{color:#0052cc;font-weight:700;min-width:90px}.option-name{color:#151d48;font-weight:500}.time-picker-wrapper{position:relative;display:flex;align-items:center;width:100%}.time-input{padding-right:45px;flex:1}.time-picker-btn{position:absolute;right:5px;background:transparent;border:none;cursor:pointer;padding:5px;display:flex;align-items:center;justify-content:center;color:#666;transition:color .2s;z-index:1}.time-picker-btn:hover:not(:disabled){color:#3498db}.time-picker-btn:disabled{cursor:not-allowed;opacity:.5}.time-picker-btn .material-icons{font-size:20px;width:auto;height:auto;padding:0}input[type=time]{cursor:pointer}input[type=time]::-webkit-calendar-picker-indicator{cursor:pointer;opacity:0;position:absolute;right:0;width:100%;height:100%}.date-picker-field{width:100%}.date-picker-field ::ng-deep .mat-mdc-form-field{width:100%}.date-picker-field ::ng-deep .mat-mdc-text-field-wrapper{background-color:#fff}.date-picker-field ::ng-deep .mdc-text-field--outlined .mdc-notched-outline__leading,.date-picker-field ::ng-deep .mdc-text-field--outlined .mdc-notched-outline__notch,.date-picker-field ::ng-deep .mdc-text-field--outlined .mdc-notched-outline__trailing{border-color:#8cbba8}.date-picker-field ::ng-deep .mdc-text-field--outlined:not(.mdc-text-field--disabled) .mdc-notched-outline__leading,.date-picker-field ::ng-deep .mdc-text-field--outlined:not(.mdc-text-field--disabled) .mdc-notched-outline__notch,.date-picker-field ::ng-deep .mdc-text-field--outlined:not(.mdc-text-field--disabled) .mdc-notched-outline__trailing{border-color:#8cbba8}.date-picker-field ::ng-deep .mdc-text-field--outlined.mdc-text-field--focused .mdc-notched-outline__leading,.date-picker-field ::ng-deep .mdc-text-field--outlined.mdc-text-field--focused .mdc-notched-outline__notch,.date-picker-field ::ng-deep .mdc-text-field--outlined.mdc-text-field--focused .mdc-notched-outline__trailing{border-color:#3498db}.date-picker-field.error-border ::ng-deep .mdc-text-field--outlined .mdc-notched-outline__leading,.date-picker-field.error-border ::ng-deep .mdc-text-field--outlined .mdc-notched-outline__notch,.date-picker-field.error-border ::ng-deep .mdc-text-field--outlined .mdc-notched-outline__trailing{border-color:red!important}.date-picker-field ::ng-deep .mat-mdc-form-field-subscript-wrapper{display:none}.date-picker-field ::ng-deep .mat-mdc-form-field-input-control input{font-family:Poppins!important;font-size:14px;font-weight:400;color:#1f2b41}\n"] }]
         }], ctorParameters: () => [{ type: i2.FormBuilder }, { type: i0.ElementRef }], propDecorators: { config: [{
                 type: Input
             }], validationError: [{
                 type: Output
             }] } });
 
-class FvControlsModule {
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: FvControlsModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.2.14", ngImport: i0, type: FvControlsModule, imports: [CommonModule,
-            ReactiveFormsModule,
-            FvEntryFieldComponent,
-            FvDateFieldComponent,
-            FvMonthYearFieldComponent,
-            FvNumberFieldComponent,
-            FvCheckboxComponent,
-            FvRadioGroupComponent,
-            FvDropdownComponent,
-            FvFileSelectorComponent,
-            FvImageSelectorComponent,
-            FvRichTextEditorComponent,
-            FvNameCodeComponent,
-            AddUpdateFormComponent], exports: [FvEntryFieldComponent,
-            FvDateFieldComponent,
-            FvMonthYearFieldComponent,
-            FvNumberFieldComponent,
-            FvCheckboxComponent,
-            FvRadioGroupComponent,
-            FvDropdownComponent,
-            FvFileSelectorComponent,
-            FvImageSelectorComponent,
-            FvRichTextEditorComponent,
-            FvNameCodeComponent,
-            AddUpdateFormComponent] });
-    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: FvControlsModule, imports: [CommonModule,
-            ReactiveFormsModule,
-            FvEntryFieldComponent,
-            FvDateFieldComponent,
-            FvMonthYearFieldComponent,
-            FvNumberFieldComponent,
-            FvCheckboxComponent,
-            FvRadioGroupComponent,
-            FvDropdownComponent,
-            FvFileSelectorComponent,
-            FvImageSelectorComponent,
-            FvRichTextEditorComponent,
-            FvNameCodeComponent,
-            AddUpdateFormComponent] });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: FvControlsModule, decorators: [{
-            type: NgModule,
-            args: [{
-                    declarations: [],
-                    imports: [
-                        CommonModule,
-                        ReactiveFormsModule,
-                        FvEntryFieldComponent,
-                        FvDateFieldComponent,
-                        FvMonthYearFieldComponent,
-                        FvNumberFieldComponent,
-                        FvCheckboxComponent,
-                        FvRadioGroupComponent,
-                        FvDropdownComponent,
-                        FvFileSelectorComponent,
-                        FvImageSelectorComponent,
-                        FvRichTextEditorComponent,
-                        FvNameCodeComponent,
-                        AddUpdateFormComponent,
-                    ],
-                    exports: [
-                        FvEntryFieldComponent,
-                        FvDateFieldComponent,
-                        FvMonthYearFieldComponent,
-                        FvNumberFieldComponent,
-                        FvCheckboxComponent,
-                        FvRadioGroupComponent,
-                        FvDropdownComponent,
-                        FvFileSelectorComponent,
-                        FvImageSelectorComponent,
-                        FvRichTextEditorComponent,
-                        FvNameCodeComponent,
-                        AddUpdateFormComponent,
-                    ],
-                }]
-        }] });
-
 class QueryFormComponent {
     fb;
     config;
@@ -3062,6 +3541,39 @@ class QueryFormComponent {
             rules.push({ name: 'required', params: { enabled: true }, errorKey: 'ERR_REQUIRED' });
             errorPriority.push('required');
         }
+        if (column.type === 'email') {
+            rules.push({
+                name: 'regex',
+                params: {
+                    pattern: '^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\\.[a-zA-Z]{2,}$',
+                },
+                errorKey: 'ERR_EMAIL_INVALID',
+            });
+            errorPriority.push('regex');
+        }
+        if (column.type === 'pf') {
+            rules.push({
+                name: 'regex',
+                params: {
+                    pattern: '^[A-Z]{2}/[A-Z]{3}/[0-9]{7}/[0-9]{3}/[0-9]{7}$'
+                },
+                errorKey: 'ERR_PF_INVALID'
+            });
+            errorPriority.push('regex');
+        }
+        if (column.type === 'password') {
+            rules.push({
+                name: 'passwordComplexity',
+                params: {
+                    minLength: 8,
+                    requireUppercase: true,
+                    requireLowercase: true,
+                    requireNumber: true,
+                    requireSpecialChar: true
+                }
+            });
+            errorPriority.push('passwordComplexity');
+        }
         return {
             controlType: this.mapType(column.type),
             rules: rules,
@@ -3084,6 +3596,8 @@ class QueryFormComponent {
             case 'ifsc': return 'IfscField';
             case 'micr': return 'MicrField';
             case 'iban': return 'IbanField';
+            case 'email': return 'EmailField';
+            case 'password': return 'PasswordField';
             default: return 'EntryField';
         }
     }
@@ -3289,6 +3803,14 @@ class QueryFormComponent {
                 <ng-container *ngIf="column.type === 'iban'">
                   <fv-iban-field [label]="column.label" [control]="getControl(column.key)" [schema]="getSchema(column)" [disabled]="column.readonly || false"></fv-iban-field>
                 </ng-container>
+                
+                <ng-container *ngIf="column.type === 'email'">
+                  <fv-email-field [label]="column.label" [placeholder]="column.placeholder || ''" [control]="getControl(column.key)" [schema]="getSchema(column)" [disabled]="column.readonly || false"></fv-email-field>
+                </ng-container>
+
+                <ng-container *ngIf="column.type === 'password'">
+                  <fv-password-field [label]="column.label" [placeholder]="column.placeholder || ''" [control]="getControl(column.key)" [schema]="getSchema(column)" [disabled]="column.readonly || false"></fv-password-field>
+                </ng-container>
             </div>
           </div>
 
@@ -3315,7 +3837,7 @@ class QueryFormComponent {
         </form>
       </div>
     </div>
-  `, isInline: true, styles: ["@import\"https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap\";@import\"https://fonts.googleapis.com/icon?family=Material+Icons\";*{font-family:Poppins}.material-icons{font-family:Material Icons!important;font-size:22px;display:inline-block}.cont{display:flex;justify-content:space-between;align-items:center;margin-bottom:10px}.validation-message{background-color:#fee;color:#c33;padding:12px 16px;border-radius:8px;margin:10px 0;display:flex;align-items:center;gap:8px;font-size:14px;font-weight:500;border:1px solid #fcc}.export-buttons{display:flex;gap:10px}.export-btn{cursor:pointer;display:flex;align-items:center;gap:5px;transition:all .3s ease;border:none;padding:8px 16px;border-radius:7px;background:#006aff;color:#fff}.export-btn:hover{background:#0045a6;box-shadow:0 4px 8px #00000026}.export-menu-container{position:relative;border-radius:7px}.export-menu{position:absolute;top:100%;right:0;background:#fff;border-radius:4px;box-shadow:0 4px 12px #00000026;margin-top:5px;min-width:180px;z-index:1000}.menu-item{width:100%;color:#000;text-align:left;background:#fff;border:none;cursor:pointer;font-size:14px;transition:background .2s;padding:12px 16px;display:flex;align-items:center;gap:10px}.menu-item:hover{background:#f5f5f5}.query-form-container{background:#f2f2f2;border-radius:8px;padding:10px;margin:auto;box-shadow:0 2px 5px #0000001a;margin-bottom:1rem;overflow:visible}.form-title{font-size:20px;font-weight:700;color:#303030;margin:0;font-family:Poppins}.form-content{display:flex;flex-direction:column;gap:5px;background-color:#fff;padding:10px;border:.5px solid #cfcfcf;border-radius:12px;overflow:visible}.form-row{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));justify-content:flex-start;gap:20px;align-items:end;margin-bottom:15px;overflow:visible}.form-field{display:flex;flex-direction:column;width:100%;position:relative;overflow:visible}.view-button{padding:8px 15px;background:#006aff;color:#fff;border:none;border-radius:7px;font-size:14px;font-weight:600;cursor:pointer;transition:background-color .2s}.view-button:hover{background:#0045a6}.button-row{display:flex;justify-content:space-between;gap:10px;padding-top:5px;margin-top:10px;border-top:1px solid #eee}.back-button{padding:8px 15px;background-color:#303030;color:#fff;border:none;border-radius:7px;font-size:14px;font-weight:600;cursor:pointer;transition:background-color .2s}.back-button:hover{background-color:#000}@media (max-width: 768px){.form-row{grid-template-columns:1fr}.button-row{justify-content:center}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "component", type: FvEntryFieldComponent, selector: "fv-entry-field", inputs: ["label", "placeholder", "schema", "control", "disabled", "readonly", "type", "allowAlphabetsOnly", "maxLength"], outputs: ["valueChange", "blur", "focus"] }, { kind: "component", type: FvDropdownComponent, selector: "fv-dropdown", inputs: ["label", "placeholder", "options", "schema", "control", "disabled"], outputs: ["valueChange", "blur", "focus"] }, { kind: "component", type: FvNumberFieldComponent, selector: "fv-number-field", inputs: ["label", "placeholder", "schema", "control", "disabled", "readonly", "min", "max", "step"], outputs: ["valueChange", "blur", "focus"] }, { kind: "component", type: FvDateFieldComponent, selector: "fv-date-field", inputs: ["label", "schema", "control", "disabled", "readonly", "min", "max"], outputs: ["valueChange", "blur", "focus"] }, { kind: "component", type: FvMonthYearFieldComponent, selector: "fv-month-year-field", inputs: ["label", "schema", "control", "disabled", "readonly", "min", "max"], outputs: ["valueChange", "blur", "focus"] }, { kind: "component", type: FvFileSelectorComponent, selector: "fv-file-selector", inputs: ["label", "placeholder", "schema", "control", "disabled", "accept", "maxSize"], outputs: ["valueChange", "blur"] }, { kind: "component", type: FvNameCodeComponent, selector: "fv-name-code", inputs: ["label", "placeholder", "options", "schema", "control", "disabled"], outputs: ["selectionChange"] }, { kind: "component", type: FvPhoneFieldComponent, selector: "fv-phone-field", inputs: ["label", "control", "disabled", "schema"], outputs: ["blur", "focus"] }, { kind: "component", type: FvUanFieldComponent, selector: "fv-uan-field", inputs: ["label", "control", "disabled", "schema"], outputs: ["blur", "focus"] }, { kind: "component", type: FvPfFieldComponent, selector: "fv-pf-field", inputs: ["label", "control", "disabled", "schema"], outputs: ["blur", "focus"] }, { kind: "component", type: FvEsiFieldComponent, selector: "fv-esi-field", inputs: ["label", "control", "disabled", "schema"], outputs: ["blur", "focus"] }, { kind: "component", type: FvIfscFieldComponent, selector: "fv-ifsc-field", inputs: ["label", "control", "disabled", "schema"], outputs: ["blur", "focus"] }, { kind: "component", type: FvMicrFieldComponent, selector: "fv-micr-field", inputs: ["label", "control", "disabled", "schema"], outputs: ["blur", "focus"] }, { kind: "component", type: FvIbanFieldComponent, selector: "fv-iban-field", inputs: ["label", "control", "disabled", "schema"], outputs: ["blur", "focus"] }] });
+  `, isInline: true, styles: ["@import\"https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap\";@import\"https://fonts.googleapis.com/icon?family=Material+Icons\";*{font-family:Poppins}.material-icons{font-family:Material Icons!important;font-size:22px;display:inline-block}.cont{display:flex;justify-content:space-between;align-items:center;margin-bottom:10px}.validation-message{background-color:#fee;color:#c33;padding:12px 16px;border-radius:8px;margin:10px 0;display:flex;align-items:center;gap:8px;font-size:14px;font-weight:500;border:1px solid #fcc}.export-buttons{display:flex;gap:10px}.export-btn{cursor:pointer;display:flex;align-items:center;gap:5px;transition:all .3s ease;border:none;padding:8px 16px;border-radius:7px;background:#006aff;color:#fff}.export-btn:hover{background:#0045a6;box-shadow:0 4px 8px #00000026}.export-menu-container{position:relative;border-radius:7px}.export-menu{position:absolute;top:100%;right:0;background:#fff;border-radius:4px;box-shadow:0 4px 12px #00000026;margin-top:5px;min-width:180px;z-index:1000}.menu-item{width:100%;color:#000;text-align:left;background:#fff;border:none;cursor:pointer;font-size:14px;transition:background .2s;padding:12px 16px;display:flex;align-items:center;gap:10px}.menu-item:hover{background:#f5f5f5}.query-form-container{background:#f2f2f2;border-radius:8px;padding:5px 10px 10px;margin:auto;box-shadow:0 2px 5px #0000001a;margin-bottom:1rem;overflow:visible}.form-title{font-size:20px;font-weight:700;color:#303030;margin:0;font-family:Poppins}.form-content{display:flex;flex-direction:column;gap:5px;background-color:#fff;padding:10px;border:.5px solid #cfcfcf;border-radius:12px;overflow:visible}.form-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:12px;width:100%;box-sizing:border-box;overflow:visible}.form-field{display:flex;flex-direction:column;min-width:0;width:100%;position:relative;overflow:visible;box-sizing:border-box}.view-button{padding:8px 20px;background:#006aff;color:#fff;border:none;border-radius:7px;font-size:12px;font-weight:600;cursor:pointer;transition:background-color .2s}.view-button:hover{background:#0045a6}.button-row{display:flex;justify-content:space-between;gap:12px;padding-top:5px;margin-top:5px}.back-button{padding:8px 20px;background-color:#303030;color:#fff;border:none;border-radius:7px;font-size:12px;font-weight:600;cursor:pointer;transition:background-color .2s}.back-button:hover{background-color:#2b2b2b}@media (min-width: 1200px) and (max-width: 1400px){.form-row{grid-template-columns:repeat(5,1fr)}}@media (max-width: 1200px){.form-row{grid-template-columns:repeat(3,1fr)}}@media (max-width: 992px){.form-row{grid-template-columns:repeat(2,1fr);gap:12px}}@media (max-width: 768px){.form-row{grid-template-columns:repeat(2,1fr);gap:10px}}@media (max-width: 640px){.form-row{grid-template-columns:1fr;gap:12px}.form-field{width:100%}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "component", type: FvEntryFieldComponent, selector: "fv-entry-field", inputs: ["label", "placeholder", "schema", "control", "disabled", "readonly", "type", "allowAlphabetsOnly", "maxLength"], outputs: ["valueChange", "blur", "focus"] }, { kind: "component", type: FvDropdownComponent, selector: "fv-dropdown", inputs: ["label", "placeholder", "options", "schema", "control", "disabled"], outputs: ["valueChange", "blur", "focus"] }, { kind: "component", type: FvNumberFieldComponent, selector: "fv-number-field", inputs: ["label", "placeholder", "schema", "control", "disabled", "readonly", "min", "max", "step"], outputs: ["valueChange", "blur", "focus"] }, { kind: "component", type: FvDateFieldComponent, selector: "fv-date-field", inputs: ["label", "schema", "control", "disabled", "readonly", "min", "max"], outputs: ["valueChange", "blur", "focus"] }, { kind: "component", type: FvMonthYearFieldComponent, selector: "fv-month-year-field", inputs: ["label", "schema", "control", "disabled", "readonly", "min", "max"], outputs: ["valueChange", "blur", "focus"] }, { kind: "component", type: FvFileSelectorComponent, selector: "fv-file-selector", inputs: ["label", "placeholder", "schema", "control", "disabled", "accept", "maxSize"], outputs: ["valueChange", "blur"] }, { kind: "component", type: FvNameCodeComponent, selector: "fv-name-code", inputs: ["label", "placeholder", "options", "schema", "control", "disabled"], outputs: ["selectionChange"] }, { kind: "component", type: FvPhoneFieldComponent, selector: "fv-phone-field", inputs: ["label", "control", "disabled", "schema"], outputs: ["blur", "focus"] }, { kind: "component", type: FvUanFieldComponent, selector: "fv-uan-field", inputs: ["label", "control", "disabled", "schema"], outputs: ["blur", "focus"] }, { kind: "component", type: FvPfFieldComponent, selector: "fv-pf-field", inputs: ["label", "control", "disabled", "schema"], outputs: ["blur", "focus"] }, { kind: "component", type: FvEsiFieldComponent, selector: "fv-esi-field", inputs: ["label", "control", "disabled", "schema"], outputs: ["blur", "focus"] }, { kind: "component", type: FvIfscFieldComponent, selector: "fv-ifsc-field", inputs: ["label", "control", "disabled", "schema"], outputs: ["blur", "focus"] }, { kind: "component", type: FvMicrFieldComponent, selector: "fv-micr-field", inputs: ["label", "control", "disabled", "schema"], outputs: ["blur", "focus"] }, { kind: "component", type: FvIbanFieldComponent, selector: "fv-iban-field", inputs: ["label", "control", "disabled", "schema"], outputs: ["blur", "focus"] }, { kind: "component", type: FvEmailFieldComponent, selector: "fv-email-field", inputs: ["label", "placeholder", "schema", "control", "disabled", "readonly"], outputs: ["valueChange", "blur", "focus"] }, { kind: "component", type: FvPasswordFieldComponent, selector: "fv-password-field", inputs: ["label", "placeholder", "schema", "control", "disabled", "readonly"], outputs: ["valueChange", "blur", "focus"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: QueryFormComponent, decorators: [{
             type: Component,
@@ -3336,6 +3858,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
                         FvIfscFieldComponent,
                         FvMicrFieldComponent,
                         FvIbanFieldComponent,
+                        FvEmailFieldComponent,
+                        FvPasswordFieldComponent,
                     ], template: `
     <div class="query-form-container">
       <div class="d-flex cont">
@@ -3501,6 +4025,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
                 <ng-container *ngIf="column.type === 'iban'">
                   <fv-iban-field [label]="column.label" [control]="getControl(column.key)" [schema]="getSchema(column)" [disabled]="column.readonly || false"></fv-iban-field>
                 </ng-container>
+                
+                <ng-container *ngIf="column.type === 'email'">
+                  <fv-email-field [label]="column.label" [placeholder]="column.placeholder || ''" [control]="getControl(column.key)" [schema]="getSchema(column)" [disabled]="column.readonly || false"></fv-email-field>
+                </ng-container>
+
+                <ng-container *ngIf="column.type === 'password'">
+                  <fv-password-field [label]="column.label" [placeholder]="column.placeholder || ''" [control]="getControl(column.key)" [schema]="getSchema(column)" [disabled]="column.readonly || false"></fv-password-field>
+                </ng-container>
             </div>
           </div>
 
@@ -3527,7 +4059,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
         </form>
       </div>
     </div>
-  `, styles: ["@import\"https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap\";@import\"https://fonts.googleapis.com/icon?family=Material+Icons\";*{font-family:Poppins}.material-icons{font-family:Material Icons!important;font-size:22px;display:inline-block}.cont{display:flex;justify-content:space-between;align-items:center;margin-bottom:10px}.validation-message{background-color:#fee;color:#c33;padding:12px 16px;border-radius:8px;margin:10px 0;display:flex;align-items:center;gap:8px;font-size:14px;font-weight:500;border:1px solid #fcc}.export-buttons{display:flex;gap:10px}.export-btn{cursor:pointer;display:flex;align-items:center;gap:5px;transition:all .3s ease;border:none;padding:8px 16px;border-radius:7px;background:#006aff;color:#fff}.export-btn:hover{background:#0045a6;box-shadow:0 4px 8px #00000026}.export-menu-container{position:relative;border-radius:7px}.export-menu{position:absolute;top:100%;right:0;background:#fff;border-radius:4px;box-shadow:0 4px 12px #00000026;margin-top:5px;min-width:180px;z-index:1000}.menu-item{width:100%;color:#000;text-align:left;background:#fff;border:none;cursor:pointer;font-size:14px;transition:background .2s;padding:12px 16px;display:flex;align-items:center;gap:10px}.menu-item:hover{background:#f5f5f5}.query-form-container{background:#f2f2f2;border-radius:8px;padding:10px;margin:auto;box-shadow:0 2px 5px #0000001a;margin-bottom:1rem;overflow:visible}.form-title{font-size:20px;font-weight:700;color:#303030;margin:0;font-family:Poppins}.form-content{display:flex;flex-direction:column;gap:5px;background-color:#fff;padding:10px;border:.5px solid #cfcfcf;border-radius:12px;overflow:visible}.form-row{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));justify-content:flex-start;gap:20px;align-items:end;margin-bottom:15px;overflow:visible}.form-field{display:flex;flex-direction:column;width:100%;position:relative;overflow:visible}.view-button{padding:8px 15px;background:#006aff;color:#fff;border:none;border-radius:7px;font-size:14px;font-weight:600;cursor:pointer;transition:background-color .2s}.view-button:hover{background:#0045a6}.button-row{display:flex;justify-content:space-between;gap:10px;padding-top:5px;margin-top:10px;border-top:1px solid #eee}.back-button{padding:8px 15px;background-color:#303030;color:#fff;border:none;border-radius:7px;font-size:14px;font-weight:600;cursor:pointer;transition:background-color .2s}.back-button:hover{background-color:#000}@media (max-width: 768px){.form-row{grid-template-columns:1fr}.button-row{justify-content:center}}\n"] }]
+  `, styles: ["@import\"https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap\";@import\"https://fonts.googleapis.com/icon?family=Material+Icons\";*{font-family:Poppins}.material-icons{font-family:Material Icons!important;font-size:22px;display:inline-block}.cont{display:flex;justify-content:space-between;align-items:center;margin-bottom:10px}.validation-message{background-color:#fee;color:#c33;padding:12px 16px;border-radius:8px;margin:10px 0;display:flex;align-items:center;gap:8px;font-size:14px;font-weight:500;border:1px solid #fcc}.export-buttons{display:flex;gap:10px}.export-btn{cursor:pointer;display:flex;align-items:center;gap:5px;transition:all .3s ease;border:none;padding:8px 16px;border-radius:7px;background:#006aff;color:#fff}.export-btn:hover{background:#0045a6;box-shadow:0 4px 8px #00000026}.export-menu-container{position:relative;border-radius:7px}.export-menu{position:absolute;top:100%;right:0;background:#fff;border-radius:4px;box-shadow:0 4px 12px #00000026;margin-top:5px;min-width:180px;z-index:1000}.menu-item{width:100%;color:#000;text-align:left;background:#fff;border:none;cursor:pointer;font-size:14px;transition:background .2s;padding:12px 16px;display:flex;align-items:center;gap:10px}.menu-item:hover{background:#f5f5f5}.query-form-container{background:#f2f2f2;border-radius:8px;padding:5px 10px 10px;margin:auto;box-shadow:0 2px 5px #0000001a;margin-bottom:1rem;overflow:visible}.form-title{font-size:20px;font-weight:700;color:#303030;margin:0;font-family:Poppins}.form-content{display:flex;flex-direction:column;gap:5px;background-color:#fff;padding:10px;border:.5px solid #cfcfcf;border-radius:12px;overflow:visible}.form-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:12px;width:100%;box-sizing:border-box;overflow:visible}.form-field{display:flex;flex-direction:column;min-width:0;width:100%;position:relative;overflow:visible;box-sizing:border-box}.view-button{padding:8px 20px;background:#006aff;color:#fff;border:none;border-radius:7px;font-size:12px;font-weight:600;cursor:pointer;transition:background-color .2s}.view-button:hover{background:#0045a6}.button-row{display:flex;justify-content:space-between;gap:12px;padding-top:5px;margin-top:5px}.back-button{padding:8px 20px;background-color:#303030;color:#fff;border:none;border-radius:7px;font-size:12px;font-weight:600;cursor:pointer;transition:background-color .2s}.back-button:hover{background-color:#2b2b2b}@media (min-width: 1200px) and (max-width: 1400px){.form-row{grid-template-columns:repeat(5,1fr)}}@media (max-width: 1200px){.form-row{grid-template-columns:repeat(3,1fr)}}@media (max-width: 992px){.form-row{grid-template-columns:repeat(2,1fr);gap:12px}}@media (max-width: 768px){.form-row{grid-template-columns:repeat(2,1fr);gap:10px}}@media (max-width: 640px){.form-row{grid-template-columns:1fr;gap:12px}.form-field{width:100%}}\n"] }]
         }], ctorParameters: () => [{ type: i2.FormBuilder }], propDecorators: { config: [{
                 type: Input
             }], onSubmit: [{
@@ -3541,6 +4073,100 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
                 args: ['document:click', ['$event']]
             }] } });
 
+class FvControlsModule {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: FvControlsModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.2.14", ngImport: i0, type: FvControlsModule, imports: [CommonModule,
+            ReactiveFormsModule,
+            FvEntryFieldComponent,
+            FvDateFieldComponent,
+            FvMonthYearFieldComponent,
+            FvNumberFieldComponent,
+            FvCheckboxComponent,
+            FvRadioGroupComponent,
+            FvDropdownComponent,
+            FvFileSelectorComponent,
+            FvImageSelectorComponent,
+            FvRichTextEditorComponent,
+            FvNameCodeComponent,
+            AddUpdateFormComponent,
+            QueryFormComponent,
+            FvEmailFieldComponent,
+            FvPasswordFieldComponent], exports: [FvEntryFieldComponent,
+            FvDateFieldComponent,
+            FvMonthYearFieldComponent,
+            FvNumberFieldComponent,
+            FvCheckboxComponent,
+            FvRadioGroupComponent,
+            FvDropdownComponent,
+            FvFileSelectorComponent,
+            FvImageSelectorComponent,
+            FvRichTextEditorComponent,
+            FvNameCodeComponent,
+            AddUpdateFormComponent,
+            QueryFormComponent,
+            FvEmailFieldComponent,
+            FvPasswordFieldComponent] });
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: FvControlsModule, imports: [CommonModule,
+            ReactiveFormsModule,
+            FvEntryFieldComponent,
+            FvDateFieldComponent,
+            FvMonthYearFieldComponent,
+            FvNumberFieldComponent,
+            FvCheckboxComponent,
+            FvRadioGroupComponent,
+            FvDropdownComponent,
+            FvFileSelectorComponent,
+            FvImageSelectorComponent,
+            FvRichTextEditorComponent,
+            FvNameCodeComponent,
+            AddUpdateFormComponent,
+            QueryFormComponent,
+            FvEmailFieldComponent,
+            FvPasswordFieldComponent] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: FvControlsModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [],
+                    imports: [
+                        CommonModule,
+                        ReactiveFormsModule,
+                        FvEntryFieldComponent,
+                        FvDateFieldComponent,
+                        FvMonthYearFieldComponent,
+                        FvNumberFieldComponent,
+                        FvCheckboxComponent,
+                        FvRadioGroupComponent,
+                        FvDropdownComponent,
+                        FvFileSelectorComponent,
+                        FvImageSelectorComponent,
+                        FvRichTextEditorComponent,
+                        FvNameCodeComponent,
+                        AddUpdateFormComponent,
+                        QueryFormComponent,
+                        FvEmailFieldComponent,
+                        FvPasswordFieldComponent,
+                    ],
+                    exports: [
+                        FvEntryFieldComponent,
+                        FvDateFieldComponent,
+                        FvMonthYearFieldComponent,
+                        FvNumberFieldComponent,
+                        FvCheckboxComponent,
+                        FvRadioGroupComponent,
+                        FvDropdownComponent,
+                        FvFileSelectorComponent,
+                        FvImageSelectorComponent,
+                        FvRichTextEditorComponent,
+                        FvNameCodeComponent,
+                        AddUpdateFormComponent,
+                        QueryFormComponent,
+                        FvEmailFieldComponent,
+                        FvPasswordFieldComponent,
+                    ],
+                }]
+        }] });
+
 /*
  * Public API Surface of fv-controls
  */
@@ -3549,5 +4175,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
  * Generated bundle index. Do not edit.
  */
 
-export { AddUpdateFormComponent, FvCheckboxComponent, FvControlsModule, FvDateFieldComponent, FvDropdownComponent, FvEntryFieldComponent, FvEsiFieldComponent, FvFileSelectorComponent, FvIbanFieldComponent, FvIfscFieldComponent, FvImageSelectorComponent, FvMicrFieldComponent, FvMonthYearFieldComponent, FvNameCodeComponent, FvNumberFieldComponent, FvPfFieldComponent, FvPhoneFieldComponent, FvRadioGroupComponent, FvRichTextEditorComponent, FvUanFieldComponent, QueryFormComponent };
+export { AddUpdateFormComponent, FvCheckboxComponent, FvControlsModule, FvDateFieldComponent, FvDropdownComponent, FvEmailFieldComponent, FvEntryFieldComponent, FvEsiFieldComponent, FvFileSelectorComponent, FvIbanFieldComponent, FvIfscFieldComponent, FvImageSelectorComponent, FvMicrFieldComponent, FvMonthYearFieldComponent, FvNameCodeComponent, FvNumberFieldComponent, FvPasswordFieldComponent, FvPfFieldComponent, FvPhoneFieldComponent, FvRadioGroupComponent, FvRichTextEditorComponent, FvUanFieldComponent, QueryFormComponent };
 //# sourceMappingURL=fovestta2-web-angular.mjs.map