npm - @fovestta2/web-angular - Versions diffs - 1.0.8 → 1.0.12 - Mend

@fovestta2/web-angular 1.0.8 → 1.0.12

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (23) hide show

package/fesm2022/fovestta2-web-angular.mjs CHANGED Viewed

@@ -7,6 +7,7 @@ import { ReactiveFormsModule, FormControl, NG_VALUE_ACCESSOR, FormsModule, Valid
 import { Validator } from '@fovestta2/validation-engine';
 import * as i1$1 from '@angular/platform-browser';
 import { distinctUntilChanged } from 'rxjs/operators';
+import { Subscription } from 'rxjs';
 class FvEntryFieldComponent {
     label = '';
@@ -38,9 +39,7 @@ class FvEntryFieldComponent {
             this.valueChange.emit(value);
         });
         // Validate initial value
-        if (this.control.value) {
-            this.validateValue(this.control.value);
-        }
+        this.validateValue(this.control.value);
     }
     ngOnDestroy() {
         this.subscription?.unsubscribe();
@@ -170,9 +169,7 @@ class FvDateFieldComponent {
             this.valueChange.emit(value);
         });
         // Validate initial value
-        if (this.control.value) {
-            this.validateValue(this.control.value);
-        }
+        this.validateValue(this.control.value);
     }
     ngOnDestroy() {
         this.subscription?.unsubscribe();
@@ -244,11 +241,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" }, 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=\"fv-required-asterisk\">*</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"] }] });
+    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=\"fv-required-asterisk\">*</span>\r\n  </label>\r\n\r\n  <input type=\"date\" [formControl]=\"control\" class=\"fv-input\" [class.error]=\"errorMessage && control?.touched\"\r\n    [attr.min]=\"min\" [attr.max]=\"max\" [readonly]=\"readonly\" (blur)=\"onBlur($event)\" (focus)=\"onFocus($event)\" />\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\";*{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=\"fv-required-asterisk\">*</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"] }]
+            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=\"fv-required-asterisk\">*</span>\r\n  </label>\r\n\r\n  <input type=\"date\" [formControl]=\"control\" class=\"fv-input\" [class.error]=\"errorMessage && control?.touched\"\r\n    [attr.min]=\"min\" [attr.max]=\"max\" [readonly]=\"readonly\" (blur)=\"onBlur($event)\" (focus)=\"onFocus($event)\" />\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\";*{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: [{
@@ -296,10 +293,8 @@ class FvMonthYearFieldComponent {
             this.updateDisplayValue(value);
             this.valueChange.emit(value);
         });
-        if (this.control.value) {
-            this.validateValue(this.control.value);
-            this.updateDisplayValue(this.control.value);
-        }
+        this.validateValue(this.control.value);
+        this.updateDisplayValue(this.control.value);
     }
     ngOnDestroy() {
         this.subscription?.unsubscribe();
@@ -363,7 +358,7 @@ class FvMonthYearFieldComponent {
         if (!this.errorMessage)
             return '';
         const errorMessages = {
-            ERR_REQUIRED: 'Month/Year is required',
+            ERR_REQUIRED: 'This field is required',
             ERR_MIN_DATE: `Date must be after ${this.min}`,
             ERR_MAX_DATE: `Date must be before ${this.max}`,
         };
@@ -403,11 +398,11 @@ class FvMonthYearFieldComponent {
         }
     }
     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" }, 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=\"fv-required-asterisk\">*</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 tabindex=\"-1\" />\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        <input #monthPicker type=\"month\" [formControl]=\"control\" class=\"fv-hidden-picker\" [attr.min]=\"min\"\r\n            [attr.max]=\"max\" [readonly]=\"readonly\" (blur)=\"onBlur($event)\" (focus)=\"onFocus($event)\" />\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%;position:relative;isolation:isolate}.fv-label{font-size:14px;font-weight:600;color:#151d48;margin-bottom:6px}.fv-required-asterisk{color:#e74c3c;margin-left:4px;font-weight:700}.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;top:0;left:0;width:100%;height:100%;opacity:0;cursor:pointer;z-index:100;pointer-events:auto;padding:0;margin:0;appearance:none;-webkit-appearance:none;border:none}.fv-hidden-picker::-webkit-calendar-picker-indicator{position:absolute;top:0;left:0;width:100%;height:100%;padding:0;margin:0;opacity:0;cursor:pointer}.fv-calendar-icon{position:absolute;right:10px;top:50%;transform:translateY(-50%);color:#666;pointer-events:none;display:flex;align-items:center;z-index:1}.fv-input:focus,.fv-input-wrapper:focus-within .fv-input{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"] }] });
+    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=\"fv-required-asterisk\">*</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 && control?.touched\"\r\n            placeholder=\"Select Month\" readonly tabindex=\"-1\" />\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        <input #monthPicker type=\"month\" [formControl]=\"control\" class=\"fv-hidden-picker\" [attr.min]=\"min\"\r\n            [attr.max]=\"max\" [readonly]=\"readonly\" (blur)=\"onBlur($event)\" (focus)=\"onFocus($event)\" />\r\n    </div>\r\n\r\n    <div *ngIf=\"errorMessage && control?.touched\" class=\"fv-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-field-container{display:flex;flex-direction:column;margin-bottom:16px;width:100%;position:relative;isolation:isolate}.fv-label{font-size:14px;font-weight:600;color:#151d48;margin-bottom:6px}.fv-required-asterisk{color:#e74c3c;margin-left:4px;font-weight:700}.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;top:0;left:0;width:100%;height:100%;opacity:0;cursor:pointer;z-index:100;pointer-events:auto;padding:0;margin:0;appearance:none;-webkit-appearance:none;border:none}.fv-hidden-picker::-webkit-calendar-picker-indicator{position:absolute;top:0;left:0;width:100%;height:100%;padding:0;margin:0;opacity:0;cursor:pointer}.fv-calendar-icon{position:absolute;right:10px;top:50%;transform:translateY(-50%);color:#666;pointer-events:none;display:flex;align-items:center;z-index:1}.fv-input:focus,.fv-input-wrapper:focus-within .fv-input{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=\"fv-required-asterisk\">*</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 tabindex=\"-1\" />\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        <input #monthPicker type=\"month\" [formControl]=\"control\" class=\"fv-hidden-picker\" [attr.min]=\"min\"\r\n            [attr.max]=\"max\" [readonly]=\"readonly\" (blur)=\"onBlur($event)\" (focus)=\"onFocus($event)\" />\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%;position:relative;isolation:isolate}.fv-label{font-size:14px;font-weight:600;color:#151d48;margin-bottom:6px}.fv-required-asterisk{color:#e74c3c;margin-left:4px;font-weight:700}.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;top:0;left:0;width:100%;height:100%;opacity:0;cursor:pointer;z-index:100;pointer-events:auto;padding:0;margin:0;appearance:none;-webkit-appearance:none;border:none}.fv-hidden-picker::-webkit-calendar-picker-indicator{position:absolute;top:0;left:0;width:100%;height:100%;padding:0;margin:0;opacity:0;cursor:pointer}.fv-calendar-icon{position:absolute;right:10px;top:50%;transform:translateY(-50%);color:#666;pointer-events:none;display:flex;align-items:center;z-index:1}.fv-input:focus,.fv-input-wrapper:focus-within .fv-input{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"] }]
+            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=\"fv-required-asterisk\">*</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 && control?.touched\"\r\n            placeholder=\"Select Month\" readonly tabindex=\"-1\" />\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        <input #monthPicker type=\"month\" [formControl]=\"control\" class=\"fv-hidden-picker\" [attr.min]=\"min\"\r\n            [attr.max]=\"max\" [readonly]=\"readonly\" (blur)=\"onBlur($event)\" (focus)=\"onFocus($event)\" />\r\n    </div>\r\n\r\n    <div *ngIf=\"errorMessage && control?.touched\" class=\"fv-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-field-container{display:flex;flex-direction:column;margin-bottom:16px;width:100%;position:relative;isolation:isolate}.fv-label{font-size:14px;font-weight:600;color:#151d48;margin-bottom:6px}.fv-required-asterisk{color:#e74c3c;margin-left:4px;font-weight:700}.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;top:0;left:0;width:100%;height:100%;opacity:0;cursor:pointer;z-index:100;pointer-events:auto;padding:0;margin:0;appearance:none;-webkit-appearance:none;border:none}.fv-hidden-picker::-webkit-calendar-picker-indicator{position:absolute;top:0;left:0;width:100%;height:100%;padding:0;margin:0;opacity:0;cursor:pointer}.fv-calendar-icon{position:absolute;right:10px;top:50%;transform:translateY(-50%);color:#666;pointer-events:none;display:flex;align-items:center;z-index:1}.fv-input:focus,.fv-input-wrapper:focus-within .fv-input{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: [{
@@ -458,9 +453,7 @@ class FvNumberFieldComponent {
             this.validateValue(value);
             this.valueChange.emit(value);
         });
-        if (this.control.value) {
-            this.validateValue(this.control.value);
-        }
+        this.validateValue(this.control.value);
     }
     ngOnDestroy() {
         this.subscription?.unsubscribe();
@@ -510,11 +503,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" }, 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"] }] });
+    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\"\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-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\" [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"] }]
+            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\"\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-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: [{
@@ -689,8 +682,8 @@ class FvDropdownComponent {
             this.filterOptions(term || '');
         });
         // Validate initial value
+        this.validateValue(this.control.value);
         if (this.control.value) {
-            this.validateValue(this.control.value);
             const selected = this.options.find(opt => opt.value === this.control.value);
             if (selected) {
                 this.searchControl.setValue(selected.label, { emitEvent: false });
@@ -881,11 +874,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: { "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\" (mouseenter)=\"highlightedIndex = i\"\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"] }] });
+    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 && control?.touched\"\r\n            [class.fv-dropdown-disabled]=\"disabled\" [class.fv-dropdown-open]=\"isOpen\"\r\n            (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\" (mouseenter)=\"highlightedIndex = i\"\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 && control?.touched\" 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; 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\" (mouseenter)=\"highlightedIndex = i\"\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"] }]
+            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 && control?.touched\"\r\n            [class.fv-dropdown-disabled]=\"disabled\" [class.fv-dropdown-open]=\"isOpen\"\r\n            (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\" (mouseenter)=\"highlightedIndex = i\"\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 && control?.touched\" 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: [{
@@ -946,8 +939,8 @@ class FvFileSelectorComponent {
         // Validate initial value
         if (this.control.value) {
             this.selectedFile = this.control.value;
-            this.validateValue(this.control.value);
         }
+        this.validateValue(this.control.value);
     }
     ngOnDestroy() {
         this.subscription?.unsubscribe();
@@ -1030,11 +1023,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 }], 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 }] });
+    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\"\r\n        [class.fv-file-selector-button-error]=\"errorMessage && control?.touched\"\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 && control?.touched\" 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: ["@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"] }]
+            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\"\r\n        [class.fv-file-selector-button-error]=\"errorMessage && control?.touched\"\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 && control?.touched\" 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: [{
@@ -1065,31 +1058,37 @@ class FvImageSelectorComponent {
     schema;
     control;
     disabled = false;
-    maxSize; // Maximum file size in bytes
+    maxSize;
     valueChange = new EventEmitter();
     blur = new EventEmitter();
     imageInput;
+    editorImage;
     errorMessage = null;
     selectedImage = null;
     subscription;
+    // Editor State
+    isEditorOpen = false;
+    editImageSrc = null;
+    editImageName = '';
+    scale = 1;
+    minScale = 0.5;
+    maxScale = 3;
+    step = 0.1;
+    panX = 0;
+    panY = 0;
+    isDragging = false;
+    startX = 0;
+    startY = 0;
     constructor(sanitizer) {
         this.sanitizer = sanitizer;
     }
     ngOnInit() {
-        if (!this.control) {
-            console.error('FvImageSelector: control is required');
-            return;
-        }
-        if (!this.schema) {
-            console.warn('FvImageSelector: schema is not provided, validation will be skipped');
+        if (!this.control)
             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.selectedImage = this.control.value;
             this.validateValue(this.control.value);
@@ -1114,39 +1113,119 @@ class FvImageSelectorComponent {
         const input = event.target;
         if (input.files && input.files.length > 0) {
             const file = input.files[0];
-            // Validate that it's an image
             if (!file.type.startsWith('image/')) {
                 alert('Please select an image file');
                 input.value = '';
                 return;
             }
-            // Check file size if maxSize is specified
             if (this.maxSize && file.size > this.maxSize) {
-                alert(`Image size exceeds the maximum allowed size of ${this.formatFileSize(this.maxSize)}`);
+                alert(`Image size exceeds ${this.formatFileSize(this.maxSize)}`);
                 input.value = '';
                 return;
             }
-            // Create object URL and get image dimensions
             const reader = new FileReader();
             reader.onload = (e) => {
-                const img = new Image();
-                img.onload = () => {
-                    const imageInfo = {
-                        file: file,
-                        url: this.sanitizer.bypassSecurityTrustUrl(e.target.result),
-                        width: img.width,
-                        height: img.height,
-                        size: file.size,
-                    };
-                    this.selectedImage = imageInfo;
-                    this.control.setValue(imageInfo);
-                    this.blur.emit();
-                };
-                img.src = e.target.result;
+                this.editImageSrc = e.target.result;
+                this.editImageName = file.name;
+                this.openEditor();
+                input.value = '';
             };
             reader.readAsDataURL(file);
         }
     }
+    openEditor() {
+        this.isEditorOpen = true;
+        this.scale = 1;
+        this.panX = 0;
+        this.panY = 0;
+    }
+    closeEditor() {
+        this.isEditorOpen = false;
+        this.editImageSrc = null;
+    }
+    // Drag Logic
+    startDrag(event) {
+        event.preventDefault();
+        this.isDragging = true;
+        this.startX = event.clientX - this.panX;
+        this.startY = event.clientY - this.panY;
+    }
+    onDrag(event) {
+        if (!this.isDragging)
+            return;
+        event.preventDefault();
+        this.panX = event.clientX - this.startX;
+        this.panY = event.clientY - this.startY;
+    }
+    endDrag() {
+        this.isDragging = false;
+    }
+    // Zoom Logic
+    onSliderChange(event) {
+        const value = event.target.value;
+        this.scale = parseFloat(value);
+    }
+    zoomIn() {
+        this.scale = Math.min(this.scale + this.step, this.maxScale);
+    }
+    zoomOut() {
+        this.scale = Math.max(this.scale - this.step, this.minScale);
+    }
+    resetEditor() {
+        this.scale = 1;
+        this.panX = 0;
+        this.panY = 0;
+    }
+    applyCrop() {
+        if (!this.editorImage)
+            return;
+        const img = this.editorImage.nativeElement;
+        const canvas = document.createElement('canvas');
+        const ctx = canvas.getContext('2d');
+        if (!ctx)
+            return;
+        // Output size 300x300 for the avatar
+        const size = 300;
+        canvas.width = size;
+        canvas.height = size;
+        // Fill background
+        ctx.fillStyle = '#ffffff';
+        ctx.fillRect(0, 0, size, size);
+        // Center transform
+        ctx.translate(size / 2, size / 2);
+        ctx.translate(this.panX, this.panY);
+        ctx.scale(this.scale, this.scale);
+        ctx.translate(-img.naturalWidth / 2, -img.naturalHeight / 2);
+        ctx.drawImage(img, 0, 0);
+        const dataUrl = canvas.toDataURL('image/png');
+        // Convert base64 to File object to mimic file selection
+        // We'll use the original name but .png
+        // This 'file' is mocked, but 'url' is what is displayed.
+        // In real app we might want to upload the blob.
+        // For ImageInfo we store the dataURL as url.
+        const imageInfo = {
+            file: new File([this.dataURLtoBlob(dataUrl)], this.editImageName, { type: 'image/png' }),
+            url: this.sanitizer.bypassSecurityTrustUrl(dataUrl),
+            width: size,
+            height: size,
+            size: 0 // Approximate or calc from blob
+        };
+        this.selectedImage = imageInfo;
+        this.control.setValue(imageInfo);
+        this.blur.emit();
+        this.closeEditor();
+    }
+    dataURLtoBlob(dataurl) {
+        const arr = dataurl.split(',');
+        const mime = arr[0].match(/:(.*?);/)[1];
+        const bstr = atob(arr[1]);
+        let n = bstr.length;
+        const u8arr = new Uint8Array(n);
+        while (n--) {
+            u8arr[n] = bstr.charCodeAt(n);
+        }
+        return new Blob([u8arr], { type: mime });
+    }
     openImageDialog() {
         if (!this.disabled) {
             this.imageInput.nativeElement.click();
@@ -1169,7 +1248,7 @@ class FvImageSelectorComponent {
         return Math.round((bytes / Math.pow(k, i)) * 100) / 100 + ' ' + sizes[i];
     }
     isRequired() {
-        return (this.schema?.rules?.some((r) => r.name === 'required' && r.params?.['enabled']) || false);
+        return this.schema?.rules?.some(r => r.name === 'required' && r.params?.['enabled']) || false;
     }
     getErrorMessage() {
         if (!this.errorMessage)
@@ -1181,11 +1260,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: ["@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 }] });
+    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" }, host: { listeners: { "document:mousemove": "onDrag($event)", "document:mouseup": "endDrag()" } }, viewQueries: [{ propertyName: "imageInput", first: true, predicate: ["imageInput"], descendants: true }, { propertyName: "editorImage", first: true, predicate: ["editorImage"], 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    <!-- Initial State -->\r\n    <div *ngIf=\"!selectedImage && !isEditorOpen\">\r\n        <button type=\"button\" class=\"fv-upload-btn\" (click)=\"openImageDialog()\" [disabled]=\"disabled\">\r\n            Upload\r\n            <svg viewBox=\"0 0 24 24\" class=\"upload-icon\">\r\n                <path d=\"M9 16h6v-6h4l-7-7-7 7h4zm-4 2h14v2H5z\" />\r\n            </svg>\r\n        </button>\r\n    </div>\r\n\r\n    <!-- Preview State -->\r\n    <div *ngIf=\"selectedImage && !isEditorOpen\" class=\"fv-preview-row\">\r\n        <div class=\"fv-preview-wrapper\">\r\n            <img [src]=\"selectedImage.url\" class=\"fv-circle-preview\" alt=\"Preview\" />\r\n        </div>\r\n        <span class=\"fv-filename\">{{ selectedImage.file.name }}</span>\r\n        <button type=\"button\" class=\"fv-trash-btn\" (click)=\"removeImage()\" [disabled]=\"disabled\">\r\n            <svg viewBox=\"0 0 24 24\" class=\"trash-icon\">\r\n                <path d=\"M6 19c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7H6v12zM19 4h-3.5l-1-1h-5l-1 1H5v2h14V4z\" />\r\n            </svg>\r\n        </button>\r\n    </div>\r\n\r\n    <!-- Modal -->\r\n    <div *ngIf=\"isEditorOpen\" class=\"fv-modal-overlay\">\r\n        <div class=\"fv-modal-content\">\r\n            <div class=\"fv-modal-header\">\r\n                <h3>Adjust Photo</h3>\r\n                <button type=\"button\" class=\"close-icon\" (click)=\"closeEditor()\">\u00D7</button>\r\n            </div>\r\n            <div class=\"fv-modal-body\">\r\n                <div class=\"fv-crop-container\" (mousedown)=\"startDrag($event)\">\r\n                    <img #editorImage [src]=\"editImageSrc\" class=\"fv-crop-image\"\r\n                        [style.transform]=\"'translate(' + panX + 'px, ' + panY + 'px) scale(' + scale + ')'\"\r\n                        draggable=\"false\" />\r\n                    <div class=\"fv-crop-mask\"></div>\r\n                </div>\r\n\r\n                <div class=\"fv-zoom-controls\">\r\n                    <span class=\"zoom-label\">Zoom</span>\r\n                    <button type=\"button\" class=\"zoom-btn\" (click)=\"zoomOut()\">-</button>\r\n                    <input type=\"range\" [min]=\"minScale\" [max]=\"maxScale\" [step]=\"step\" [value]=\"scale\"\r\n                        (input)=\"onSliderChange($event)\" class=\"zoom-slider\">\r\n                    <button type=\"button\" class=\"zoom-btn\" (click)=\"zoomIn()\">+</button>\r\n                    <span class=\"zoom-value\">{{ (scale * 100) | number:'1.0-0' }}%</span>\r\n                </div>\r\n\r\n                <p class=\"fv-hint-text\">Drag the image to reposition. Use the zoom control to fill the circle.</p>\r\n            </div>\r\n\r\n            <div class=\"fv-modal-footer\">\r\n                <button type=\"button\" class=\"btn-reset\" (click)=\"resetEditor()\">Reset</button>\r\n                <div class=\"footer-actions\">\r\n                    <button type=\"button\" class=\"btn-cancel\" (click)=\"closeEditor()\">Cancel</button>\r\n                    <button type=\"button\" class=\"btn-apply\" (click)=\"applyCrop()\">Apply</button>\r\n                </div>\r\n            </div>\r\n        </div>\r\n    </div>\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;box-sizing:border-box}.fv-image-selector-container{display:flex;flex-direction:column;margin-bottom:20px;width:100%}.fv-image-selector-label{font-size:14px;font-weight:600;color:#151d48;margin-bottom:8px;display:block}.required-asterisk{color:#e74c3c;font-weight:700;margin-left:4px}.fv-upload-btn{display:inline-flex;align-items:center;justify-content:space-between;background:#fff;border:1px solid #dcdcdc;border-radius:8px;padding:0 0 0 20px;font-size:16px;color:#1f2b41;cursor:pointer;overflow:hidden;height:48px;min-width:160px;transition:box-shadow .2s}.fv-upload-btn:hover:not(:disabled){box-shadow:0 2px 5px #0000000d;border-color:#bbb}.fv-upload-btn:disabled{opacity:.6;cursor:not-allowed;background:#f9f9f9}.upload-icon{width:50px;height:100%;padding:12px;background:#f4f5f7;border-left:1px solid #dcdcdc;fill:#333;margin-left:20px}.fv-preview-row{display:flex;align-items:center;gap:16px;padding:5px 0}.fv-preview-wrapper{position:relative;width:60px;height:60px}.fv-circle-preview{width:60px;height:60px;border-radius:50%;border:1px solid #eee;object-fit:cover}.fv-filename{flex:1;font-size:14px;color:#666;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:300px}.fv-trash-btn{background:none;border:none;cursor:pointer;padding:8px;border-radius:50%;transition:background .2s;display:flex}.fv-trash-btn:hover:not(:disabled){background:#fee}.trash-icon{width:24px;height:24px;fill:red}.fv-modal-overlay{position:fixed;top:0;left:0;width:100vw;height:100vh;background:#0009;display:flex;align-items:center;justify-content:center;z-index:9999}.fv-modal-content{background:#fff;width:650px;max-width:90vw;border-radius:8px;overflow:hidden;box-shadow:0 10px 30px #0003;display:flex;flex-direction:column}.fv-modal-header{display:flex;justify-content:space-between;align-items:center;padding:16px 24px;border-bottom:1px solid #f0f0f0}.fv-modal-header h3{margin:0;font-size:18px;font-weight:600;color:#1f2b41}.close-icon{background:none;border:none;font-size:24px;line-height:1;cursor:pointer;color:#888}.fv-modal-body{padding:24px;display:flex;flex-direction:column;align-items:center;background:#fff}.fv-crop-container{width:100%;height:350px;background:#333;position:relative;overflow:hidden;margin-bottom:24px;border-radius:4px;cursor:move;cursor:grab;display:flex;align-items:center;justify-content:center}.fv-crop-container:active{cursor:grabbing}.fv-crop-image{max-width:none;max-height:none;-webkit-user-select:none;user-select:none;pointer-events:none;transform-origin:center center}.fv-crop-mask{position:absolute;inset:0;background:radial-gradient(circle at center,transparent 150px,rgba(0,0,0,.6) 151px);pointer-events:none}.fv-zoom-controls{display:flex;align-items:center;gap:16px;width:100%;max-width:500px;margin-bottom:12px}.zoom-label{font-size:14px;font-weight:500;color:#333;min-width:40px}.zoom-btn{width:32px;height:32px;border-radius:50%;background:#e6f0ff;color:#006aff;border:none;font-weight:700;font-size:18px;cursor:pointer;display:flex;align-items:center;justify-content:center;padding-bottom:2px}.zoom-btn:hover{background:#d0e1ff}.zoom-slider{flex:1;-webkit-appearance:none;height:4px;background:#ddd;border-radius:2px;outline:none}.zoom-slider::-webkit-slider-thumb{-webkit-appearance:none;width:16px;height:16px;border-radius:50%;background:#006aff;cursor:pointer;box-shadow:0 0 0 4px #006aff33}.zoom-value{font-size:14px;color:#666;min-width:40px;text-align:right}.fv-hint-text{font-size:13px;color:#7f8c8d;margin:0;text-align:center}.fv-modal-footer{padding:16px 24px;border-top:1px solid #f0f0f0;display:flex;justify-content:space-between;align-items:center;background:#fff}.footer-actions{display:flex;gap:12px}.btn-reset,.btn-cancel,.btn-apply{padding:8px 20px;border-radius:6px;font-size:14px;font-weight:500;cursor:pointer;transition:background .2s}.btn-reset{background:#f5f5f5;border:1px solid #ddd;color:#333}.btn-reset:hover{background:#eee}.btn-cancel{background:#fff;border:1px solid #ddd;color:#333}.btn-cancel:hover{border-color:#bbb}.btn-apply{background:#006aff;border:1px solid #006aff;color:#fff}.btn-apply:hover{background:#0056cc;border-color:#0056cc}.fv-image-selector-error-message{margin-top:6px;font-size:12px;color:#e74c3c;display:flex;align-items:center;gap:4px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: i1.DecimalPipe, name: "number" }, { 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: ["@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"] }]
+            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    <!-- Initial State -->\r\n    <div *ngIf=\"!selectedImage && !isEditorOpen\">\r\n        <button type=\"button\" class=\"fv-upload-btn\" (click)=\"openImageDialog()\" [disabled]=\"disabled\">\r\n            Upload\r\n            <svg viewBox=\"0 0 24 24\" class=\"upload-icon\">\r\n                <path d=\"M9 16h6v-6h4l-7-7-7 7h4zm-4 2h14v2H5z\" />\r\n            </svg>\r\n        </button>\r\n    </div>\r\n\r\n    <!-- Preview State -->\r\n    <div *ngIf=\"selectedImage && !isEditorOpen\" class=\"fv-preview-row\">\r\n        <div class=\"fv-preview-wrapper\">\r\n            <img [src]=\"selectedImage.url\" class=\"fv-circle-preview\" alt=\"Preview\" />\r\n        </div>\r\n        <span class=\"fv-filename\">{{ selectedImage.file.name }}</span>\r\n        <button type=\"button\" class=\"fv-trash-btn\" (click)=\"removeImage()\" [disabled]=\"disabled\">\r\n            <svg viewBox=\"0 0 24 24\" class=\"trash-icon\">\r\n                <path d=\"M6 19c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7H6v12zM19 4h-3.5l-1-1h-5l-1 1H5v2h14V4z\" />\r\n            </svg>\r\n        </button>\r\n    </div>\r\n\r\n    <!-- Modal -->\r\n    <div *ngIf=\"isEditorOpen\" class=\"fv-modal-overlay\">\r\n        <div class=\"fv-modal-content\">\r\n            <div class=\"fv-modal-header\">\r\n                <h3>Adjust Photo</h3>\r\n                <button type=\"button\" class=\"close-icon\" (click)=\"closeEditor()\">\u00D7</button>\r\n            </div>\r\n            <div class=\"fv-modal-body\">\r\n                <div class=\"fv-crop-container\" (mousedown)=\"startDrag($event)\">\r\n                    <img #editorImage [src]=\"editImageSrc\" class=\"fv-crop-image\"\r\n                        [style.transform]=\"'translate(' + panX + 'px, ' + panY + 'px) scale(' + scale + ')'\"\r\n                        draggable=\"false\" />\r\n                    <div class=\"fv-crop-mask\"></div>\r\n                </div>\r\n\r\n                <div class=\"fv-zoom-controls\">\r\n                    <span class=\"zoom-label\">Zoom</span>\r\n                    <button type=\"button\" class=\"zoom-btn\" (click)=\"zoomOut()\">-</button>\r\n                    <input type=\"range\" [min]=\"minScale\" [max]=\"maxScale\" [step]=\"step\" [value]=\"scale\"\r\n                        (input)=\"onSliderChange($event)\" class=\"zoom-slider\">\r\n                    <button type=\"button\" class=\"zoom-btn\" (click)=\"zoomIn()\">+</button>\r\n                    <span class=\"zoom-value\">{{ (scale * 100) | number:'1.0-0' }}%</span>\r\n                </div>\r\n\r\n                <p class=\"fv-hint-text\">Drag the image to reposition. Use the zoom control to fill the circle.</p>\r\n            </div>\r\n\r\n            <div class=\"fv-modal-footer\">\r\n                <button type=\"button\" class=\"btn-reset\" (click)=\"resetEditor()\">Reset</button>\r\n                <div class=\"footer-actions\">\r\n                    <button type=\"button\" class=\"btn-cancel\" (click)=\"closeEditor()\">Cancel</button>\r\n                    <button type=\"button\" class=\"btn-apply\" (click)=\"applyCrop()\">Apply</button>\r\n                </div>\r\n            </div>\r\n        </div>\r\n    </div>\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;box-sizing:border-box}.fv-image-selector-container{display:flex;flex-direction:column;margin-bottom:20px;width:100%}.fv-image-selector-label{font-size:14px;font-weight:600;color:#151d48;margin-bottom:8px;display:block}.required-asterisk{color:#e74c3c;font-weight:700;margin-left:4px}.fv-upload-btn{display:inline-flex;align-items:center;justify-content:space-between;background:#fff;border:1px solid #dcdcdc;border-radius:8px;padding:0 0 0 20px;font-size:16px;color:#1f2b41;cursor:pointer;overflow:hidden;height:48px;min-width:160px;transition:box-shadow .2s}.fv-upload-btn:hover:not(:disabled){box-shadow:0 2px 5px #0000000d;border-color:#bbb}.fv-upload-btn:disabled{opacity:.6;cursor:not-allowed;background:#f9f9f9}.upload-icon{width:50px;height:100%;padding:12px;background:#f4f5f7;border-left:1px solid #dcdcdc;fill:#333;margin-left:20px}.fv-preview-row{display:flex;align-items:center;gap:16px;padding:5px 0}.fv-preview-wrapper{position:relative;width:60px;height:60px}.fv-circle-preview{width:60px;height:60px;border-radius:50%;border:1px solid #eee;object-fit:cover}.fv-filename{flex:1;font-size:14px;color:#666;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:300px}.fv-trash-btn{background:none;border:none;cursor:pointer;padding:8px;border-radius:50%;transition:background .2s;display:flex}.fv-trash-btn:hover:not(:disabled){background:#fee}.trash-icon{width:24px;height:24px;fill:red}.fv-modal-overlay{position:fixed;top:0;left:0;width:100vw;height:100vh;background:#0009;display:flex;align-items:center;justify-content:center;z-index:9999}.fv-modal-content{background:#fff;width:650px;max-width:90vw;border-radius:8px;overflow:hidden;box-shadow:0 10px 30px #0003;display:flex;flex-direction:column}.fv-modal-header{display:flex;justify-content:space-between;align-items:center;padding:16px 24px;border-bottom:1px solid #f0f0f0}.fv-modal-header h3{margin:0;font-size:18px;font-weight:600;color:#1f2b41}.close-icon{background:none;border:none;font-size:24px;line-height:1;cursor:pointer;color:#888}.fv-modal-body{padding:24px;display:flex;flex-direction:column;align-items:center;background:#fff}.fv-crop-container{width:100%;height:350px;background:#333;position:relative;overflow:hidden;margin-bottom:24px;border-radius:4px;cursor:move;cursor:grab;display:flex;align-items:center;justify-content:center}.fv-crop-container:active{cursor:grabbing}.fv-crop-image{max-width:none;max-height:none;-webkit-user-select:none;user-select:none;pointer-events:none;transform-origin:center center}.fv-crop-mask{position:absolute;inset:0;background:radial-gradient(circle at center,transparent 150px,rgba(0,0,0,.6) 151px);pointer-events:none}.fv-zoom-controls{display:flex;align-items:center;gap:16px;width:100%;max-width:500px;margin-bottom:12px}.zoom-label{font-size:14px;font-weight:500;color:#333;min-width:40px}.zoom-btn{width:32px;height:32px;border-radius:50%;background:#e6f0ff;color:#006aff;border:none;font-weight:700;font-size:18px;cursor:pointer;display:flex;align-items:center;justify-content:center;padding-bottom:2px}.zoom-btn:hover{background:#d0e1ff}.zoom-slider{flex:1;-webkit-appearance:none;height:4px;background:#ddd;border-radius:2px;outline:none}.zoom-slider::-webkit-slider-thumb{-webkit-appearance:none;width:16px;height:16px;border-radius:50%;background:#006aff;cursor:pointer;box-shadow:0 0 0 4px #006aff33}.zoom-value{font-size:14px;color:#666;min-width:40px;text-align:right}.fv-hint-text{font-size:13px;color:#7f8c8d;margin:0;text-align:center}.fv-modal-footer{padding:16px 24px;border-top:1px solid #f0f0f0;display:flex;justify-content:space-between;align-items:center;background:#fff}.footer-actions{display:flex;gap:12px}.btn-reset,.btn-cancel,.btn-apply{padding:8px 20px;border-radius:6px;font-size:14px;font-weight:500;cursor:pointer;transition:background .2s}.btn-reset{background:#f5f5f5;border:1px solid #ddd;color:#333}.btn-reset:hover{background:#eee}.btn-cancel{background:#fff;border:1px solid #ddd;color:#333}.btn-cancel:hover{border-color:#bbb}.btn-apply{background:#006aff;border:1px solid #006aff;color:#fff}.btn-apply:hover{background:#0056cc;border-color:#0056cc}.fv-image-selector-error-message{margin-top:6px;font-size:12px;color:#e74c3c;display:flex;align-items:center;gap:4px}\n"] }]
         }], ctorParameters: () => [{ type: i1$1.DomSanitizer }], propDecorators: { label: [{
                 type: Input
             }], placeholder: [{
@@ -1205,6 +1284,15 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
             }], imageInput: [{
                 type: ViewChild,
                 args: ['imageInput']
+            }], editorImage: [{
+                type: ViewChild,
+                args: ['editorImage']
+            }], onDrag: [{
+                type: HostListener,
+                args: ['document:mousemove', ['$event']]
+            }], endDrag: [{
+                type: HostListener,
+                args: ['document:mouseup']
             }] } });
 class FvRichTextEditorComponent {
@@ -1238,9 +1326,7 @@ class FvRichTextEditorComponent {
             this.valueChange.emit(value);
         });
         // Validate initial value
-        if (this.control.value) {
-            this.validateValue(this.control.value);
-        }
+        this.validateValue(this.control.value);
     }
     ngOnDestroy() {
         this.subscription?.unsubscribe();
@@ -1331,11 +1417,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: ["@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"] }] });
+    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 && control?.touched\"\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 && control?.touched\" 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: ["@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"] }]
+            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 && control?.touched\"\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 && control?.touched\" 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: [{
@@ -1591,7 +1677,7 @@ class FvNameCodeComponent {
       </div>
       <div *ngIf="isInvalid()" class="error-message">
-        {{ getErrorMessage() }}
+        ⚠ {{ getErrorMessage() }}
       </div>
     </div>
   `, 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"] }] });
@@ -1633,7 +1719,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
       </div>
       <div *ngIf="isInvalid()" class="error-message">
-        {{ getErrorMessage() }}
+        ⚠ {{ getErrorMessage() }}
       </div>
     </div>
   `, providers: [
@@ -1700,9 +1786,7 @@ class FvPhoneFieldComponent {
         this.subscription = this.control.valueChanges.subscribe((value) => {
             this.validateValue(value);
         });
-        if (this.control.value) {
-            this.validateValue(this.control.value);
-        }
+        this.validateValue(this.control.value);
     }
     ngOnDestroy() {
         this.subscription?.unsubscribe();
@@ -1753,12 +1837,23 @@ class FvPhoneFieldComponent {
     isRequired() {
         return this.schema?.rules?.some(r => r.name === 'required' && r.params?.['enabled']) || false;
     }
+    getErrorMessage() {
+        if (!this.errorMessage)
+            return '';
+        const errorMessages = {
+            ERR_REQUIRED: 'Phone number is required',
+            ERR_MIN_LENGTH: 'Invalid phone number',
+            ERR_MAX_LENGTH: 'Invalid phone number',
+            ERR_REGEX_MISMATCH: 'Invalid phone number format',
+        };
+        return errorMessages[this.errorMessage] || this.errorMessage;
+    }
     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" }, 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"] }] });
+    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 && control?.touched\" />\r\n    </div>\r\n\r\n    <div *ngIf=\"errorMessage && control?.touched\" class=\"fv-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-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\" (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"] }]
+            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 && control?.touched\" />\r\n    </div>\r\n\r\n    <div *ngIf=\"errorMessage && control?.touched\" class=\"fv-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-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: [{
@@ -2074,6 +2169,7 @@ class FvMicrFieldComponent {
         if (!this.control)
             return;
         this.subscription = this.control.valueChanges.subscribe((value) => this.validateValue(value));
+        this.validateValue(this.control.value);
     }
     ngOnDestroy() { this.subscription?.unsubscribe(); }
     onInput(event) {
@@ -2098,11 +2194,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: ["@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"] }] });
+    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 && control?.touched\" />\r\n    <span *ngIf=\"errorMessage && control?.touched\" 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: ["@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"] }]
+            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 && control?.touched\" />\r\n    <span *ngIf=\"errorMessage && control?.touched\" 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: [{
@@ -2130,6 +2226,7 @@ class FvIbanFieldComponent {
         if (!this.control)
             return;
         this.subscription = this.control.valueChanges.subscribe((value) => this.validateValue(value));
+        this.validateValue(this.control.value);
     }
     ngOnDestroy() { this.subscription?.unsubscribe(); }
     ngOnChanges(changes) {
@@ -2164,11 +2261,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" }, 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"] }] });
+    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 && control?.touched\" />\r\n    <span *ngIf=\"errorMessage && control?.touched\" 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\" (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"] }]
+            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 && control?.touched\" />\r\n    <span *ngIf=\"errorMessage && control?.touched\" 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: [{
@@ -2221,10 +2318,7 @@ class FvEmailFieldComponent {
             this.validateValue(value);
             this.valueChange.emit(value);
         });
-        // Validate initial value
-        if (this.control.value) {
-            this.validateValue(this.control.value);
-        }
+        this.validateValue(this.control.value);
     }
     ngOnDestroy() {
         this.subscription?.unsubscribe();
@@ -2323,9 +2417,7 @@ class FvPasswordFieldComponent {
             this.valueChange.emit(value);
         });
         // Validate initial value
-        if (this.control.value) {
-            this.validateValue(this.control.value);
-        }
+        this.validateValue(this.control.value);
     }
     ngOnDestroy() {
         this.subscription?.unsubscribe();
@@ -2410,6 +2502,109 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
                 type: Output
             }] } });
+class FvServicePeriodComponent {
+    label = 'Service Period';
+    group;
+    startField;
+    endField;
+    control;
+    years = 0;
+    months = 0;
+    days = 0;
+    totalDays = 0;
+    sub = new Subscription();
+    ngOnInit() {
+        if (this.group && this.startField && this.endField) {
+            const startCtrl = this.group.get(this.startField);
+            const endCtrl = this.group.get(this.endField);
+            if (startCtrl) {
+                this.sub.add(startCtrl.valueChanges.subscribe(() => this.calculatePeriod()));
+            }
+            if (endCtrl) {
+                this.sub.add(endCtrl.valueChanges.subscribe(() => this.calculatePeriod()));
+            }
+            if (this.control) {
+                this.sub.add(this.control.valueChanges.subscribe(() => this.calculatePeriod()));
+            }
+            // Initial calc
+            this.calculatePeriod();
+        }
+    }
+    ngOnDestroy() {
+        this.sub.unsubscribe();
+    }
+    calculatePeriod() {
+        if (!this.group)
+            return;
+        const startVal = this.group.get(this.startField)?.value;
+        const endVal = this.group.get(this.endField)?.value;
+        if (!startVal || !endVal) {
+            this.resetValues();
+            return;
+        }
+        const start = new Date(startVal);
+        const end = new Date(endVal);
+        if (isNaN(start.getTime()) || isNaN(end.getTime())) {
+            this.resetValues();
+            return;
+        }
+        if (end < start) {
+            this.resetValues();
+            return;
+        }
+        // Calculate difference
+        let years = end.getFullYear() - start.getFullYear();
+        let months = end.getMonth() - start.getMonth();
+        let days = end.getDate() - start.getDate();
+        if (days < 0) {
+            months--;
+            // Days in previous month
+            const prevMonth = new Date(end.getFullYear(), end.getMonth(), 0);
+            days += prevMonth.getDate();
+        }
+        if (months < 0) {
+            years--;
+            months += 12;
+        }
+        // Apply Rounding if checkbox is checked
+        if (this.control && this.control.value === true) {
+            if (months >= 6) {
+                years++;
+            }
+            months = 0;
+            days = 0;
+        }
+        this.years = years;
+        this.months = months;
+        this.days = days;
+        // Total Days
+        const diffTime = Math.abs(end.getTime() - start.getTime());
+        this.totalDays = Math.ceil(diffTime / (1000 * 60 * 60 * 24));
+    }
+    resetValues() {
+        this.years = 0;
+        this.months = 0;
+        this.days = 0;
+        this.totalDays = 0;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: FvServicePeriodComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: FvServicePeriodComponent, isStandalone: true, selector: "fv-service-period", inputs: { label: "label", group: "group", startField: "startField", endField: "endField", control: "control" }, ngImport: i0, template: "<div class=\"service-period-card\">\r\n    <div class=\"sp-header\">\r\n        <div class=\"sp-title-group\">\r\n            <span class=\"sp-label\">{{ label }}</span>\r\n            <svg class=\"sp-icon\" viewBox=\"0 0 24 24\" width=\"18\" height=\"18\" fill=\"#151D48\">\r\n                <path\r\n                    d=\"M19 3h-1V1h-2v2H8V1H6v2H5c-1.11 0-2 .9-2 2v14c0 1.1.89 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm0 16H5V8h14v11zM7 10h5v5H7z\" />\r\n            </svg>\r\n        </div>\r\n        <button type=\"button\" class=\"btn-edit\">\r\n            <svg viewBox=\"0 0 24 24\" width=\"16\" height=\"16\" fill=\"#666\">\r\n                <path\r\n                    d=\"M3 17.25V21h3.75L17.81 9.94l-3.75-3.75L3 17.25zM20.71 7.04c.39-.39.39-1.02 0-1.41l-2.34-2.34c-.39-.39-1.02-.39-1.41 0l-1.83 1.83 3.75 3.75 1.83-1.83z\" />\r\n            </svg>\r\n        </button>\r\n    </div>\r\n\r\n    <div class=\"sp-content\">\r\n        <div class=\"sp-duration\">\r\n            {{ years }} Years, {{ months }} Months, {{ days }} Days\r\n        </div>\r\n        <div class=\"sp-total\">\r\n            Total: {{ totalDays }} days\r\n        </div>\r\n    </div>\r\n\r\n    <div class=\"sp-divider\"></div>\r\n\r\n    <div class=\"sp-footer\" *ngIf=\"control\">\r\n        <label class=\"sp-checkbox-label\">\r\n            <input type=\"checkbox\" [formControl]=\"control\">\r\n            Round to years (if months >= 6)\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;box-sizing:border-box}.service-period-card{background:#fff;border:1px solid #e0e0e0;border-radius:8px;padding:20px;box-shadow:0 1px 3px #0000000d;width:100%}.sp-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:25px}.sp-title-group{display:flex;align-items:center;gap:8px}.sp-label{font-size:18px;font-weight:700;color:#1f2b41}.sp-icon{fill:#006aff}.btn-edit{background:none;border:none;cursor:pointer;padding:4px;color:#666;transition:color .2s}.btn-edit:hover{color:#333}.sp-content{text-align:center;margin-bottom:20px}.sp-duration{font-size:18px;font-weight:600;color:#333;margin-bottom:8px}.sp-total{font-size:13px;color:#666;font-weight:500}.sp-divider{height:1px;background:#e0e0e0;margin:15px 0}.sp-footer{display:flex;align-items:center;padding-left:5px}.sp-checkbox-label{display:flex;align-items:center;gap:10px;font-size:14px;color:#333;font-weight:500;cursor:pointer}input[type=checkbox]{width:18px;height:18px;cursor:pointer;border:1px solid #ccc;border-radius:4px}\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: FvServicePeriodComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'fv-service-period', standalone: true, imports: [CommonModule, ReactiveFormsModule], template: "<div class=\"service-period-card\">\r\n    <div class=\"sp-header\">\r\n        <div class=\"sp-title-group\">\r\n            <span class=\"sp-label\">{{ label }}</span>\r\n            <svg class=\"sp-icon\" viewBox=\"0 0 24 24\" width=\"18\" height=\"18\" fill=\"#151D48\">\r\n                <path\r\n                    d=\"M19 3h-1V1h-2v2H8V1H6v2H5c-1.11 0-2 .9-2 2v14c0 1.1.89 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm0 16H5V8h14v11zM7 10h5v5H7z\" />\r\n            </svg>\r\n        </div>\r\n        <button type=\"button\" class=\"btn-edit\">\r\n            <svg viewBox=\"0 0 24 24\" width=\"16\" height=\"16\" fill=\"#666\">\r\n                <path\r\n                    d=\"M3 17.25V21h3.75L17.81 9.94l-3.75-3.75L3 17.25zM20.71 7.04c.39-.39.39-1.02 0-1.41l-2.34-2.34c-.39-.39-1.02-.39-1.41 0l-1.83 1.83 3.75 3.75 1.83-1.83z\" />\r\n            </svg>\r\n        </button>\r\n    </div>\r\n\r\n    <div class=\"sp-content\">\r\n        <div class=\"sp-duration\">\r\n            {{ years }} Years, {{ months }} Months, {{ days }} Days\r\n        </div>\r\n        <div class=\"sp-total\">\r\n            Total: {{ totalDays }} days\r\n        </div>\r\n    </div>\r\n\r\n    <div class=\"sp-divider\"></div>\r\n\r\n    <div class=\"sp-footer\" *ngIf=\"control\">\r\n        <label class=\"sp-checkbox-label\">\r\n            <input type=\"checkbox\" [formControl]=\"control\">\r\n            Round to years (if months >= 6)\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;box-sizing:border-box}.service-period-card{background:#fff;border:1px solid #e0e0e0;border-radius:8px;padding:20px;box-shadow:0 1px 3px #0000000d;width:100%}.sp-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:25px}.sp-title-group{display:flex;align-items:center;gap:8px}.sp-label{font-size:18px;font-weight:700;color:#1f2b41}.sp-icon{fill:#006aff}.btn-edit{background:none;border:none;cursor:pointer;padding:4px;color:#666;transition:color .2s}.btn-edit:hover{color:#333}.sp-content{text-align:center;margin-bottom:20px}.sp-duration{font-size:18px;font-weight:600;color:#333;margin-bottom:8px}.sp-total{font-size:13px;color:#666;font-weight:500}.sp-divider{height:1px;background:#e0e0e0;margin:15px 0}.sp-footer{display:flex;align-items:center;padding-left:5px}.sp-checkbox-label{display:flex;align-items:center;gap:10px;font-size:14px;color:#333;font-weight:500;cursor:pointer}input[type=checkbox]{width:18px;height:18px;cursor:pointer;border:1px solid #ccc;border-radius:4px}\n"] }]
+        }], propDecorators: { label: [{
+                type: Input
+            }], group: [{
+                type: Input
+            }], startField: [{
+                type: Input
+            }], endField: [{
+                type: Input
+            }], control: [{
+                type: Input
+            }] } });
 // add-update-form.component.ts
 class AddUpdateFormComponent {
     fb;
@@ -2538,44 +2733,120 @@ class AddUpdateFormComponent {
         return (column.type === 'file' &&
             (column.accept?.startsWith('image') || column.filePreview === true));
     }
+    // Helpers for Repeatable Sections
+    getSectionArray(section) {
+        return this.form.get(section.sectionKey);
+    }
+    createSectionGroup(section) {
+        const groupConfig = {};
+        section.fields.forEach((column) => {
+            let initialValue = column.value || '';
+            if (column.type === 'month-year' && initialValue) {
+                initialValue = this.formatMonthYearValue(initialValue);
+            }
+            groupConfig[column.name] = [
+                { value: initialValue, disabled: column.disabled || false },
+            ];
+        });
+        const group = this.fb.group(groupConfig);
+        // Apply Validators
+        section.fields.forEach((column) => {
+            const validators = this.buildValidators(column.validations, group);
+            if (validators.length > 0) {
+                group.get(column.name)?.setValidators(validators);
+                group.get(column.name)?.updateValueAndValidity();
+            }
+        });
+        return group;
+    }
+    addSectionItem(section) {
+        const array = this.getSectionArray(section);
+        array.push(this.createSectionGroup(section));
+    }
+    removeSectionItem(section, index) {
+        const array = this.getSectionArray(section);
+        if (array.length > 1) {
+            array.removeAt(index);
+        }
+    }
+    isControlInvalid(control) {
+        return !!(control && control.invalid && (control.touched || this.submitted));
+    }
+    getErrorMessageForControl(column, control) {
+        if (!control?.errors)
+            return '';
+        const field = control;
+        const errors = field.errors;
+        if (errors['custom']) {
+            const customValidation = column?.validations?.find((v) => v.type === 'custom');
+            return customValidation?.message || 'Invalid field';
+        }
+        const errorKeys = Object.keys(errors);
+        for (const key of errorKeys) {
+            const validation = column?.validations?.find((v) => v.type === key);
+            if (validation && validation.message) {
+                return validation.message;
+            }
+        }
+        if (errors['required'])
+            return `${column?.label} is required`;
+        if (errors['email'])
+            return 'Invalid email format';
+        if (errors['minlength'])
+            return `Minimum length is ${errors['minlength'].requiredLength}`;
+        if (errors['maxlength'])
+            return `Maximum length is ${errors['maxlength'].requiredLength}`;
+        if (errors['min'])
+            return `Minimum value is ${errors['min'].min}`;
+        if (errors['max'])
+            return `Maximum value is ${errors['max'].max}`;
+        if (errors['pattern'])
+            return 'Invalid format';
+        return 'Invalid field';
+    }
     initializeForm() {
         this.submitted = false;
         const formGroupConfig = {};
         this.config.sections.forEach((section) => {
-            section.fields.forEach((column) => {
-                let initialValue = column.value || '';
-                // Format month-year fields to YYYY-MM format
-                if (column.type === 'month-year' && initialValue) {
-                    initialValue = this.formatMonthYearValue(initialValue);
-                }
-                formGroupConfig[column.name] = [
-                    { value: initialValue, disabled: column.disabled || false },
-                    null, // We'll set validators after form creation
-                ];
-                // If it's a file field with an existing value, set the preview
-                if (column.type === 'file' && column.value) {
-                    this.filePreviews.set(column.name, column.value);
-                    // Extract filename from URL or base64
-                    const fileName = this.extractFileName(column.value);
-                    if (fileName) {
-                        this.fileNames.set(column.name, fileName);
+            if (section.isRepeatable && section.sectionKey) {
+                formGroupConfig[section.sectionKey] = this.fb.array([
+                    this.createSectionGroup(section),
+                ]);
+            }
+            else {
+                section.fields.forEach((column) => {
+                    let initialValue = column.value || '';
+                    // Format month-year fields to YYYY-MM format
+                    if (column.type === 'month-year' && initialValue) {
+                        initialValue = this.formatMonthYearValue(initialValue);
                     }
-                }
-                // Initialize search display for name-code fields - No longer needed as FvNameCode handles display internally
-                /* if (column.type === 'name-code' && initialValue && column.options) {
-                     // Logic moved to component
-                } */
-            });
+                    formGroupConfig[column.name] = [
+                        { value: initialValue, disabled: column.disabled || false },
+                        null, // We'll set validators after form creation
+                    ];
+                    // If it's a file field with an existing value, set the preview
+                    if (column.type === 'file' && column.value) {
+                        this.filePreviews.set(column.name, column.value);
+                        // Extract filename from URL or base64
+                        const fileName = this.extractFileName(column.value);
+                        if (fileName) {
+                            this.fileNames.set(column.name, fileName);
+                        }
+                    }
+                });
+            }
         });
         this.form = this.fb.group(formGroupConfig);
         this.config.sections.forEach((section) => {
-            section.fields.forEach((column) => {
-                const validators = this.buildValidators(column.validations, this.form);
-                if (validators.length > 0) {
-                    this.form.get(column.name)?.setValidators(validators);
-                    this.form.get(column.name)?.updateValueAndValidity();
-                }
-            });
+            if (!section.isRepeatable) {
+                section.fields.forEach((column) => {
+                    const validators = this.buildValidators(column.validations, this.form);
+                    if (validators.length > 0) {
+                        this.form.get(column.name)?.setValidators(validators);
+                        this.form.get(column.name)?.updateValueAndValidity();
+                    }
+                });
+            }
         });
         // Subscribe to value changes for all fields to trigger onChange handlers
         Object.keys(this.form.controls).forEach((key) => {
@@ -2598,9 +2869,9 @@ class AddUpdateFormComponent {
         this.valueChangeSubscriptions.forEach((sub) => sub.unsubscribe());
         this.valueChangeSubscriptions = [];
     }
-    handleFieldChange(fieldName, eventValue) {
+    handleFieldChange(fieldName, eventValue, control) {
         const column = this.getColumnByName(fieldName);
-        const formControl = this.form.get(fieldName);
+        const formControl = control || this.form.get(fieldName);
         // Format month-year fields (especially expiryDate) to YYYY-MM
         if (column?.type === 'month-year' && eventValue) {
             const formattedValue = this.formatMonthYearValue(eventValue);
@@ -2612,7 +2883,7 @@ class AddUpdateFormComponent {
         if (column?.onChange) {
             // Use the event value directly (what the user just selected/typed)
             // This ensures we have the correct value even if form control hasn't updated yet
-            const valueToPass = eventValue !== undefined ? eventValue : this.form.get(fieldName)?.value;
+            const valueToPass = eventValue !== undefined ? eventValue : formControl?.value;
             const onChangeFn = column.onChange; // Store the function reference
             // Store the selected value - this is what the user chose
             const selectedValue = valueToPass;
@@ -2667,7 +2938,7 @@ class AddUpdateFormComponent {
         }
         return value;
     }
-    handleMonthYearChange(fieldName, value) {
+    handleMonthYearChange(fieldName, value, control) {
         // Format the input value to YYYY-MM format
         let formattedValue = value;
         // If it's in MM-YYYY format, convert to YYYY-MM
@@ -2689,11 +2960,11 @@ class AddUpdateFormComponent {
         else if (formattedValue.match(/^\d{1,6}$/)) {
             // Allow partial input while typing
         }
-        const formControl = this.form.get(fieldName);
+        const formControl = control || this.form.get(fieldName);
         if (formControl && formattedValue !== value) {
             formControl.setValue(formattedValue, { emitEvent: false });
         }
-        this.handleFieldChange(fieldName, formattedValue);
+        this.handleFieldChange(fieldName, formattedValue, control);
     }
     handleMonthYearBlur(fieldName) {
         const formControl = this.form.get(fieldName);
@@ -2878,24 +3149,9 @@ class AddUpdateFormComponent {
     handleSubmit() {
         this.submitted = true;
         if (this.form.invalid) {
-            // Mark all fields as touched to show red borders
-            Object.keys(this.form.controls).forEach((key) => {
-                this.form.get(key)?.markAsTouched();
-            });
-            // Count only required fields that are invalid
-            const allColumns = this.config.sections.flatMap((s) => s.fields);
-            const invalidRequiredCount = Object.keys(this.form.controls).filter((key) => {
-                const control = this.form.get(key);
-                if (!control?.invalid)
-                    return false;
-                // Check if this field has required validation
-                const column = allColumns.find((c) => c.name === key);
-                return (column?.validations?.some((v) => v.type === 'required') || false);
-            }).length;
-            // Only emit if there are required fields missing
-            if (invalidRequiredCount > 0) {
-                this.validationError.emit(`Please fill all required fields marked with *. ${invalidRequiredCount} field(s) need attention.`);
-            }
+            // Mark all fields as touched to show red borders (recursive)
+            this.form.markAllAsTouched();
+            this.validationError.emit('Please fill all required fields marked with *.');
             return;
         }
         const formData = this.form.getRawValue();
@@ -2910,7 +3166,7 @@ class AddUpdateFormComponent {
     }
     isFieldInvalid(fieldName) {
         const field = this.form.get(fieldName);
-        return !!(field && field.invalid && this.submitted);
+        return !!(field && field.invalid && (field.touched || this.submitted));
     }
     getErrorMessage(fieldName) {
         const field = this.form.get(fieldName);
@@ -2963,9 +3219,41 @@ class AddUpdateFormComponent {
             {{ section.title }}
           </h3>
-          <div class="fields-row">
-            <ng-container *ngFor="let column of section.fields">
-              <div
+          <ng-container *ngIf="section.isRepeatable && section.sectionKey; else flatSection">
+            <div *ngFor="let group of getSectionArray(section).controls; let i = index" class="repeatable-group-wrapper">
+               <div class="repeatable-actions">
+                  <button type="button" class="btn-icon btn-add" (click)="addSectionItem(section)">
+                    <svg viewBox="0 0 24 24" width="24" height="24" fill="#2ecc71">
+                      <path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm5 11h-4v4h-2v-4H7v-2h4V7h2v4h4v2z"/>
+                    </svg>
+                  </button>
+                  <button type="button" class="btn-icon btn-remove" (click)="removeSectionItem(section, i)" *ngIf="getSectionArray(section).controls.length > 1">
+                    <svg viewBox="0 0 24 24" width="24" height="24" fill="#e74c3c">
+                      <path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm5 11H7v-2h10v2z"/>
+                    </svg>
+                  </button>
+               </div>
+               <div class="fields-row">
+                 <ng-container *ngFor="let column of section.fields">
+                   <ng-container *ngTemplateOutlet="fieldRenderer; context: { column: column, control: group.get(column.name), group: group }">
+                   </ng-container>
+                 </ng-container>
+               </div>
+            </div>
+          </ng-container>
+          <ng-template #flatSection>
+             <div class="fields-row">
+                <ng-container *ngFor="let column of section.fields">
+                   <ng-container *ngTemplateOutlet="fieldRenderer; context: { column: column, control: getControl(column.name), group: form }">
+                   </ng-container>
+                </ng-container>
+             </div>
+          </ng-template>
+        </div>
+        <ng-template #fieldRenderer let-column="column" let-control="control" let-group="group">
+           <div
                 class="form-field-wrapper"
                 [ngClass]="'field-' + column.type"
                 [ngStyle]="column.hidden ? { display: 'none' } : {}"
@@ -2978,13 +3266,13 @@ class AddUpdateFormComponent {
                     [label]="column.label"
                     [placeholder]="column.placeholder || ''"
                     type="text"
-                    [control]="getControl(column.name)"
+                    [control]="control"
                     [schema]="getSchema(column)"
                     [disabled]="column.disabled || false"
                     [readonly]="false"
                     [allowAlphabetsOnly]="column.allowAlphabetsOnly || false"
                     [maxLength]="column.maxLength || null"
-                    (valueChange)="handleFieldChange(column.name, $event)"
+                    (valueChange)="handleFieldChange(column.name, $event, control)"
                   >
                   </fv-entry-field>
                 </ng-container>
@@ -2995,10 +3283,10 @@ class AddUpdateFormComponent {
                   <fv-email-field
                     [label]="column.label"
                     [placeholder]="column.placeholder || ''"
-                    [control]="getControl(column.name)"
+                    [control]="control"
                     [schema]="getSchema(column)"
                     [disabled]="column.disabled || false"
-                    (valueChange)="handleFieldChange(column.name, $event)"
+                    (valueChange)="handleFieldChange(column.name, $event, control)"
                   >
                   </fv-email-field>
                 </ng-container>
@@ -3009,10 +3297,10 @@ class AddUpdateFormComponent {
                   <fv-password-field
                     [label]="column.label"
                     [placeholder]="column.placeholder || ''"
-                    [control]="getControl(column.name)"
+                    [control]="control"
                     [schema]="getSchema(column)"
                     [disabled]="column.disabled || false"
-                    (valueChange)="handleFieldChange(column.name, $event)"
+                    (valueChange)="handleFieldChange(column.name, $event, control)"
                   >
                   </fv-password-field>
                 </ng-container>
@@ -3023,10 +3311,10 @@ class AddUpdateFormComponent {
                   <fv-number-field
                     [label]="column.label"
                     [placeholder]="column.placeholder || ''"
-                    [control]="getControl(column.name)"
+                    [control]="control"
                     [schema]="getSchema(column)"
                     [disabled]="column.disabled || false"
-                    (valueChange)="handleFieldChange(column.name, $event)"
+                    (valueChange)="handleFieldChange(column.name, $event, control)"
                   >
                   </fv-number-field>
                 </ng-container>
@@ -3038,10 +3326,10 @@ class AddUpdateFormComponent {
                     [label]="column.label"
                     [placeholder]="column.placeholder || 'Select option'"
                     [options]="column.options || []"
-                    [control]="getControl(column.name)"
+                    [control]="control"
                     [schema]="getSchema(column)"
                     [disabled]="column.disabled || false"
-                    (valueChange)="handleFieldChange(column.name, $event)"
+                    (valueChange)="handleFieldChange(column.name, $event, control)"
                   >
                   </fv-dropdown>
                 </ng-container>
@@ -3051,9 +3339,9 @@ class AddUpdateFormComponent {
                 >
                   <fv-checkbox
                     [label]="column.label"
-                    [control]="getControl(column.name)"
+                    [control]="control"
                     [disabled]="column.disabled || false"
-                    (valueChange)="handleFieldChange(column.name, $event)"
+                    (valueChange)="handleFieldChange(column.name, $event, control)"
                   >
                   </fv-checkbox>
                 </ng-container>
@@ -3062,10 +3350,10 @@ class AddUpdateFormComponent {
                   <fv-radio-group
                     [label]="column.label"
                     [options]="column.options || []"
-                    [control]="getControl(column.name)"
+                    [control]="control"
                     [disabled]="column.disabled || false"
                     [layout]="column.layout || 'vertical'"
-                    (valueChange)="handleFieldChange(column.name, $event)"
+                    (valueChange)="handleFieldChange(column.name, $event, control)"
                   >
                   </fv-radio-group>
                 </ng-container>
@@ -3073,10 +3361,10 @@ class AddUpdateFormComponent {
                 <ng-container *ngIf="column.type === 'date' && !column.hidden">
                   <fv-date-field
                     [label]="column.label"
-                    [control]="getControl(column.name)"
+                    [control]="control"
                     [schema]="getSchema(column)"
                     [disabled]="column.disabled || false"
-                    (valueChange)="handleFieldChange(column.name, $event)"
+                    (valueChange)="handleFieldChange(column.name, $event, control)"
                   >
                   </fv-date-field>
                 </ng-container>
@@ -3086,10 +3374,10 @@ class AddUpdateFormComponent {
                 >
                   <fv-month-year-field
                     [label]="column.label"
-                    [control]="getControl(column.name)"
+                    [control]="control"
                     [schema]="getSchema(column)"
                     [disabled]="column.disabled || false"
-                    (valueChange)="handleMonthYearChange(column.name, $event)"
+                    (valueChange)="handleMonthYearChange(column.name, $event, control)"
                   >
                   </fv-month-year-field>
                 </ng-container>
@@ -3100,10 +3388,10 @@ class AddUpdateFormComponent {
                   <fv-rich-text-editor
                     [label]="column.label"
                     [placeholder]="column.placeholder || ''"
-                    [control]="getControl(column.name)"
+                    [control]="control"
                     [schema]="getSchema(column)"
                     [disabled]="column.disabled || false"
-                    (valueChange)="handleFieldChange(column.name, $event)"
+                    (valueChange)="handleFieldChange(column.name, $event, control)"
                   >
                   </fv-rich-text-editor>
                 </ng-container>
@@ -3113,7 +3401,7 @@ class AddUpdateFormComponent {
                     <fv-image-selector
                       [label]="column.label"
                       [placeholder]="column.placeholder || 'Select image'"
-                      [control]="getControl(column.name)"
+                      [control]="control"
                       [schema]="getSchema(column)"
                       [disabled]="column.disabled || false"
                       (valueChange)="onFileChange($event, column.name)"
@@ -3126,7 +3414,7 @@ class AddUpdateFormComponent {
                       [label]="column.label"
                       [placeholder]="column.placeholder || 'Select file'"
                       [accept]="column.accept || '*/*'"
-                      [control]="getControl(column.name)"
+                      [control]="control"
                       [schema]="getSchema(column)"
                       [disabled]="column.disabled || false"
                       (valueChange)="onFileChange($event, column.name)"
@@ -3142,7 +3430,7 @@ class AddUpdateFormComponent {
                     [label]="column.label"
                     [placeholder]="column.placeholder || 'Search by Code or Name'"
                     [options]="column.options ? mapSearchOptions(column.options) : []"
-                    [control]="getControl(column.name)"
+                    [control]="control"
                     [schema]="getSchema(column)"
                     [disabled]="column.disabled || false"
                   >
@@ -3150,57 +3438,68 @@ class AddUpdateFormComponent {
                 </ng-container>
                 <ng-container *ngIf="column.type === 'phone' && !column.hidden">
-                  <fv-phone-field [label]="column.label" [control]="getControl(column.name)" [schema]="getSchema(column)" [disabled]="column.disabled || false"></fv-phone-field>
+                  <fv-phone-field [label]="column.label" [control]="control" [schema]="getSchema(column)" [disabled]="column.disabled || false"></fv-phone-field>
                 </ng-container>
                 <ng-container *ngIf="column.type === 'uan' && !column.hidden">
-                  <fv-uan-field [label]="column.label" [control]="getControl(column.name)" [schema]="getSchema(column)" [disabled]="column.disabled || false"></fv-uan-field>
+                  <fv-uan-field [label]="column.label" [control]="control" [schema]="getSchema(column)" [disabled]="column.disabled || false"></fv-uan-field>
                 </ng-container>
                 <ng-container *ngIf="column.type === 'pf' && !column.hidden">
-                  <fv-pf-field [label]="column.label" [control]="getControl(column.name)" [schema]="getSchema(column)" [disabled]="column.disabled || false"></fv-pf-field>
+                  <fv-pf-field [label]="column.label" [control]="control" [schema]="getSchema(column)" [disabled]="column.disabled || false"></fv-pf-field>
                 </ng-container>
                 <ng-container *ngIf="column.type === 'esi' && !column.hidden">
-                  <fv-esi-field [label]="column.label" [control]="getControl(column.name)" [schema]="getSchema(column)" [disabled]="column.disabled || false"></fv-esi-field>
+                  <fv-esi-field [label]="column.label" [control]="control" [schema]="getSchema(column)" [disabled]="column.disabled || false"></fv-esi-field>
                 </ng-container>
                 <ng-container *ngIf="column.type === 'ifsc' && !column.hidden">
-                  <fv-ifsc-field [label]="column.label" [control]="getControl(column.name)" [schema]="getSchema(column)" [disabled]="column.disabled || false"></fv-ifsc-field>
+                  <fv-ifsc-field [label]="column.label" [control]="control" [schema]="getSchema(column)" [disabled]="column.disabled || false"></fv-ifsc-field>
                 </ng-container>
                 <ng-container *ngIf="column.type === 'micr' && !column.hidden">
-                  <fv-micr-field [label]="column.label" [control]="getControl(column.name)" [schema]="getSchema(column)" [disabled]="column.disabled || false"></fv-micr-field>
+                  <fv-micr-field [label]="column.label" [control]="control" [schema]="getSchema(column)" [disabled]="column.disabled || false"></fv-micr-field>
                 </ng-container>
                 <ng-container *ngIf="column.type === 'iban' && !column.hidden">
-                  <fv-iban-field [label]="column.label" [control]="getControl(column.name)" [schema]="getSchema(column)" [disabled]="column.disabled || false"></fv-iban-field>
+                  <fv-iban-field [label]="column.label" [control]="control" [schema]="getSchema(column)" [disabled]="column.disabled || false"></fv-iban-field>
+                </ng-container>
+                <ng-container *ngIf="column.type === 'service-period' && !column.hidden">
+                   <fv-service-period
+                      [label]="column.label"
+                      [group]="group"
+                      [startField]="column.servicePeriodConfig?.startField || ''"
+                      [endField]="column.servicePeriodConfig?.endField || ''"
+                      [control]="control"
+                   ></fv-service-period>
                 </ng-container>
               </div>
-            </ng-container>
-          </div>
-        </div>
+        </ng-template>
         <div class="form-actions">
           <button
+            *ngIf="!config.hideSubmit"
             type="submit"
             class="btn btn-primary"
-            [disabled]="form.invalid && submitted"
+            [disabled]="config.disableSubmit"
           >
             {{ config.submitLabel || 'Save' }}
           </button>
           <button
+            *ngIf="!config.hideCancel"
             type="button"
             class="btn btn-outline"
             (click)="config.onCancel()"
+            [disabled]="config.disableCancel"
           >
             {{ config.cancelLabel || 'Cancel' }}
           </button>
         </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: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"] }] });
+  `, 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}.repeatable-group-wrapper{position:relative;background:#fff;border:1px solid #eee;border-radius:8px;padding:20px 100px 20px 20px;margin-bottom:15px;box-shadow:0 1px 2px #0000000d}.repeatable-actions{position:absolute;top:45px;right:15px;display:flex;gap:8px;z-index:10}.btn-icon{background:none;border:none;cursor:pointer;padding:4px;display:flex;align-items:center;justify-content:center;border-radius:50%;transition:background .2s}.btn-icon:hover{background:#f0f0f0}.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.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { 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"] }, { kind: "component", type: FvServicePeriodComponent, selector: "fv-service-period", inputs: ["label", "group", "startField", "endField", "control"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: AddUpdateFormComponent, decorators: [{
             type: Component,
@@ -3227,6 +3526,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
                         FvIbanFieldComponent,
                         FvEmailFieldComponent,
                         FvPasswordFieldComponent,
+                        FvServicePeriodComponent
                     ], template: `
     <div class="form-container">
       <div class="form-header" *ngIf="config.formTitle">
@@ -3239,9 +3539,41 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
             {{ section.title }}
           </h3>
-          <div class="fields-row">
-            <ng-container *ngFor="let column of section.fields">
-              <div
+          <ng-container *ngIf="section.isRepeatable && section.sectionKey; else flatSection">
+            <div *ngFor="let group of getSectionArray(section).controls; let i = index" class="repeatable-group-wrapper">
+               <div class="repeatable-actions">
+                  <button type="button" class="btn-icon btn-add" (click)="addSectionItem(section)">
+                    <svg viewBox="0 0 24 24" width="24" height="24" fill="#2ecc71">
+                      <path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm5 11h-4v4h-2v-4H7v-2h4V7h2v4h4v2z"/>
+                    </svg>
+                  </button>
+                  <button type="button" class="btn-icon btn-remove" (click)="removeSectionItem(section, i)" *ngIf="getSectionArray(section).controls.length > 1">
+                    <svg viewBox="0 0 24 24" width="24" height="24" fill="#e74c3c">
+                      <path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm5 11H7v-2h10v2z"/>
+                    </svg>
+                  </button>
+               </div>
+               <div class="fields-row">
+                 <ng-container *ngFor="let column of section.fields">
+                   <ng-container *ngTemplateOutlet="fieldRenderer; context: { column: column, control: group.get(column.name), group: group }">
+                   </ng-container>
+                 </ng-container>
+               </div>
+            </div>
+          </ng-container>
+          <ng-template #flatSection>
+             <div class="fields-row">
+                <ng-container *ngFor="let column of section.fields">
+                   <ng-container *ngTemplateOutlet="fieldRenderer; context: { column: column, control: getControl(column.name), group: form }">
+                   </ng-container>
+                </ng-container>
+             </div>
+          </ng-template>
+        </div>
+        <ng-template #fieldRenderer let-column="column" let-control="control" let-group="group">
+           <div
                 class="form-field-wrapper"
                 [ngClass]="'field-' + column.type"
                 [ngStyle]="column.hidden ? { display: 'none' } : {}"
@@ -3254,13 +3586,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
                     [label]="column.label"
                     [placeholder]="column.placeholder || ''"
                     type="text"
-                    [control]="getControl(column.name)"
+                    [control]="control"
                     [schema]="getSchema(column)"
                     [disabled]="column.disabled || false"
                     [readonly]="false"
                     [allowAlphabetsOnly]="column.allowAlphabetsOnly || false"
                     [maxLength]="column.maxLength || null"
-                    (valueChange)="handleFieldChange(column.name, $event)"
+                    (valueChange)="handleFieldChange(column.name, $event, control)"
                   >
                   </fv-entry-field>
                 </ng-container>
@@ -3271,10 +3603,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
                   <fv-email-field
                     [label]="column.label"
                     [placeholder]="column.placeholder || ''"
-                    [control]="getControl(column.name)"
+                    [control]="control"
                     [schema]="getSchema(column)"
                     [disabled]="column.disabled || false"
-                    (valueChange)="handleFieldChange(column.name, $event)"
+                    (valueChange)="handleFieldChange(column.name, $event, control)"
                   >
                   </fv-email-field>
                 </ng-container>
@@ -3285,10 +3617,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
                   <fv-password-field
                     [label]="column.label"
                     [placeholder]="column.placeholder || ''"
-                    [control]="getControl(column.name)"
+                    [control]="control"
                     [schema]="getSchema(column)"
                     [disabled]="column.disabled || false"
-                    (valueChange)="handleFieldChange(column.name, $event)"
+                    (valueChange)="handleFieldChange(column.name, $event, control)"
                   >
                   </fv-password-field>
                 </ng-container>
@@ -3299,10 +3631,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
                   <fv-number-field
                     [label]="column.label"
                     [placeholder]="column.placeholder || ''"
-                    [control]="getControl(column.name)"
+                    [control]="control"
                     [schema]="getSchema(column)"
                     [disabled]="column.disabled || false"
-                    (valueChange)="handleFieldChange(column.name, $event)"
+                    (valueChange)="handleFieldChange(column.name, $event, control)"
                   >
                   </fv-number-field>
                 </ng-container>
@@ -3314,10 +3646,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
                     [label]="column.label"
                     [placeholder]="column.placeholder || 'Select option'"
                     [options]="column.options || []"
-                    [control]="getControl(column.name)"
+                    [control]="control"
                     [schema]="getSchema(column)"
                     [disabled]="column.disabled || false"
-                    (valueChange)="handleFieldChange(column.name, $event)"
+                    (valueChange)="handleFieldChange(column.name, $event, control)"
                   >
                   </fv-dropdown>
                 </ng-container>
@@ -3327,9 +3659,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
                 >
                   <fv-checkbox
                     [label]="column.label"
-                    [control]="getControl(column.name)"
+                    [control]="control"
                     [disabled]="column.disabled || false"
-                    (valueChange)="handleFieldChange(column.name, $event)"
+                    (valueChange)="handleFieldChange(column.name, $event, control)"
                   >
                   </fv-checkbox>
                 </ng-container>
@@ -3338,10 +3670,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
                   <fv-radio-group
                     [label]="column.label"
                     [options]="column.options || []"
-                    [control]="getControl(column.name)"
+                    [control]="control"
                     [disabled]="column.disabled || false"
                     [layout]="column.layout || 'vertical'"
-                    (valueChange)="handleFieldChange(column.name, $event)"
+                    (valueChange)="handleFieldChange(column.name, $event, control)"
                   >
                   </fv-radio-group>
                 </ng-container>
@@ -3349,10 +3681,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
                 <ng-container *ngIf="column.type === 'date' && !column.hidden">
                   <fv-date-field
                     [label]="column.label"
-                    [control]="getControl(column.name)"
+                    [control]="control"
                     [schema]="getSchema(column)"
                     [disabled]="column.disabled || false"
-                    (valueChange)="handleFieldChange(column.name, $event)"
+                    (valueChange)="handleFieldChange(column.name, $event, control)"
                   >
                   </fv-date-field>
                 </ng-container>
@@ -3362,10 +3694,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
                 >
                   <fv-month-year-field
                     [label]="column.label"
-                    [control]="getControl(column.name)"
+                    [control]="control"
                     [schema]="getSchema(column)"
                     [disabled]="column.disabled || false"
-                    (valueChange)="handleMonthYearChange(column.name, $event)"
+                    (valueChange)="handleMonthYearChange(column.name, $event, control)"
                   >
                   </fv-month-year-field>
                 </ng-container>
@@ -3376,10 +3708,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
                   <fv-rich-text-editor
                     [label]="column.label"
                     [placeholder]="column.placeholder || ''"
-                    [control]="getControl(column.name)"
+                    [control]="control"
                     [schema]="getSchema(column)"
                     [disabled]="column.disabled || false"
-                    (valueChange)="handleFieldChange(column.name, $event)"
+                    (valueChange)="handleFieldChange(column.name, $event, control)"
                   >
                   </fv-rich-text-editor>
                 </ng-container>
@@ -3389,7 +3721,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
                     <fv-image-selector
                       [label]="column.label"
                       [placeholder]="column.placeholder || 'Select image'"
-                      [control]="getControl(column.name)"
+                      [control]="control"
                       [schema]="getSchema(column)"
                       [disabled]="column.disabled || false"
                       (valueChange)="onFileChange($event, column.name)"
@@ -3402,7 +3734,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
                       [label]="column.label"
                       [placeholder]="column.placeholder || 'Select file'"
                       [accept]="column.accept || '*/*'"
-                      [control]="getControl(column.name)"
+                      [control]="control"
                       [schema]="getSchema(column)"
                       [disabled]="column.disabled || false"
                       (valueChange)="onFileChange($event, column.name)"
@@ -3418,7 +3750,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
                     [label]="column.label"
                     [placeholder]="column.placeholder || 'Search by Code or Name'"
                     [options]="column.options ? mapSearchOptions(column.options) : []"
-                    [control]="getControl(column.name)"
+                    [control]="control"
                     [schema]="getSchema(column)"
                     [disabled]="column.disabled || false"
                   >
@@ -3426,57 +3758,68 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
                 </ng-container>
                 <ng-container *ngIf="column.type === 'phone' && !column.hidden">
-                  <fv-phone-field [label]="column.label" [control]="getControl(column.name)" [schema]="getSchema(column)" [disabled]="column.disabled || false"></fv-phone-field>
+                  <fv-phone-field [label]="column.label" [control]="control" [schema]="getSchema(column)" [disabled]="column.disabled || false"></fv-phone-field>
                 </ng-container>
                 <ng-container *ngIf="column.type === 'uan' && !column.hidden">
-                  <fv-uan-field [label]="column.label" [control]="getControl(column.name)" [schema]="getSchema(column)" [disabled]="column.disabled || false"></fv-uan-field>
+                  <fv-uan-field [label]="column.label" [control]="control" [schema]="getSchema(column)" [disabled]="column.disabled || false"></fv-uan-field>
                 </ng-container>
                 <ng-container *ngIf="column.type === 'pf' && !column.hidden">
-                  <fv-pf-field [label]="column.label" [control]="getControl(column.name)" [schema]="getSchema(column)" [disabled]="column.disabled || false"></fv-pf-field>
+                  <fv-pf-field [label]="column.label" [control]="control" [schema]="getSchema(column)" [disabled]="column.disabled || false"></fv-pf-field>
                 </ng-container>
                 <ng-container *ngIf="column.type === 'esi' && !column.hidden">
-                  <fv-esi-field [label]="column.label" [control]="getControl(column.name)" [schema]="getSchema(column)" [disabled]="column.disabled || false"></fv-esi-field>
+                  <fv-esi-field [label]="column.label" [control]="control" [schema]="getSchema(column)" [disabled]="column.disabled || false"></fv-esi-field>
                 </ng-container>
                 <ng-container *ngIf="column.type === 'ifsc' && !column.hidden">
-                  <fv-ifsc-field [label]="column.label" [control]="getControl(column.name)" [schema]="getSchema(column)" [disabled]="column.disabled || false"></fv-ifsc-field>
+                  <fv-ifsc-field [label]="column.label" [control]="control" [schema]="getSchema(column)" [disabled]="column.disabled || false"></fv-ifsc-field>
                 </ng-container>
                 <ng-container *ngIf="column.type === 'micr' && !column.hidden">
-                  <fv-micr-field [label]="column.label" [control]="getControl(column.name)" [schema]="getSchema(column)" [disabled]="column.disabled || false"></fv-micr-field>
+                  <fv-micr-field [label]="column.label" [control]="control" [schema]="getSchema(column)" [disabled]="column.disabled || false"></fv-micr-field>
                 </ng-container>
                 <ng-container *ngIf="column.type === 'iban' && !column.hidden">
-                  <fv-iban-field [label]="column.label" [control]="getControl(column.name)" [schema]="getSchema(column)" [disabled]="column.disabled || false"></fv-iban-field>
+                  <fv-iban-field [label]="column.label" [control]="control" [schema]="getSchema(column)" [disabled]="column.disabled || false"></fv-iban-field>
+                </ng-container>
+                <ng-container *ngIf="column.type === 'service-period' && !column.hidden">
+                   <fv-service-period
+                      [label]="column.label"
+                      [group]="group"
+                      [startField]="column.servicePeriodConfig?.startField || ''"
+                      [endField]="column.servicePeriodConfig?.endField || ''"
+                      [control]="control"
+                   ></fv-service-period>
                 </ng-container>
               </div>
-            </ng-container>
-          </div>
-        </div>
+        </ng-template>
         <div class="form-actions">
           <button
+            *ngIf="!config.hideSubmit"
             type="submit"
             class="btn btn-primary"
-            [disabled]="form.invalid && submitted"
+            [disabled]="config.disableSubmit"
           >
             {{ config.submitLabel || 'Save' }}
           </button>
           <button
+            *ngIf="!config.hideCancel"
             type="button"
             class="btn btn-outline"
             (click)="config.onCancel()"
+            [disabled]="config.disableCancel"
           >
             {{ config.cancelLabel || 'Cancel' }}
           </button>
         </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: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"] }]
+  `, 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}.repeatable-group-wrapper{position:relative;background:#fff;border:1px solid #eee;border-radius:8px;padding:20px 100px 20px 20px;margin-bottom:15px;box-shadow:0 1px 2px #0000000d}.repeatable-actions{position:absolute;top:45px;right:15px;display:flex;gap:8px;z-index:10}.btn-icon{background:none;border:none;cursor:pointer;padding:4px;display:flex;align-items:center;justify-content:center;border-radius:50%;transition:background .2s}.btn-icon:hover{background:#f0f0f0}.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: [{