@fovestta2/web-angular 1.0.14 → 1.0.17

package/fesm2022/fovestta2-web-angular.mjs

@@ -111,11 +111,11 @@ class FvEntryFieldComponent {
         return errorMessages[this.errorMessage] || this.errorMessage;
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: FvEntryFieldComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: FvEntryFieldComponent, isStandalone: true, selector: "fv-entry-field", inputs: { label: "label", placeholder: "placeholder", schema: "schema", control: "control", disabled: "disabled", readonly: "readonly", type: "type", allowAlphabetsOnly: "allowAlphabetsOnly", maxLength: "maxLength" }, outputs: { valueChange: "valueChange", blur: "blur", focus: "focus" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"fv-entry-field-container\">\r\n  <label *ngIf=\"label\" class=\"fv-label\" [class.fv-label-required]=\"isRequired()\">\r\n    {{ label }}\r\n    <span *ngIf=\"isRequired()\" class=\"fv-required-asterisk\">*</span>\r\n  </label>\r\n\r\n  <input [type]=\"type\" [formControl]=\"control\" [placeholder]=\"placeholder\" [readonly]=\"readonly\" (blur)=\"onBlur($event)\"\r\n    (focus)=\"onFocus($event)\" (input)=\"onInput($event)\" [attr.maxlength]=\"maxLength\" class=\"fv-input\"\r\n    [class.fv-input-error]=\"errorMessage && control.touched\" [class.fv-input-disabled]=\"disabled\" />\r\n\r\n  <span *ngIf=\"errorMessage && control.touched\" class=\"fv-error-message\">\r\n    {{ getErrorMessage() }}\r\n  </span>\r\n</div>", styles: ["@import\"https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap\";*{font-family:Poppins,sans-serif}.fv-entry-field-container{display:flex;flex-direction:column;margin-bottom:16px;width:100%}.fv-label{margin-bottom:6px;font-size:14px;font-weight:600;color:#151d48;display:flex;align-items:center;gap:4px}.fv-required-asterisk{color:#e74c3c;font-weight:700}.fv-input{padding:5px 10px;border:1px solid #8CBBA8;border-radius:8px;font-size:14px;font-weight:400;font-family:Poppins,sans-serif;transition:all .2s ease-in-out;background-color:#fff;color:#1f2b41;box-sizing:border-box;height:34px;width:100%;min-width:0}.fv-input:focus{outline:none;border-color:#3498db;box-shadow:0 0 0 3px #3498db1a}.fv-input:hover:not(:disabled):not(:focus){border-color:#3498db}.fv-input-error{border-color:#dc3545!important}.fv-input-error:focus{box-shadow:0 0 0 3px #dc35451a}.fv-input-disabled{background-color:#ecf0f1;cursor:not-allowed;opacity:.6}.fv-input::placeholder{color:#999;opacity:1}.fv-error-message{margin-top:4px;font-size:12px;color:#e74c3c;display:flex;align-items:center;gap:4px}.fv-error-message:before{content:\"\\26a0\";font-size:14px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: FvEntryFieldComponent, isStandalone: true, selector: "fv-entry-field", inputs: { label: "label", placeholder: "placeholder", schema: "schema", control: "control", disabled: "disabled", readonly: "readonly", type: "type", allowAlphabetsOnly: "allowAlphabetsOnly", maxLength: "maxLength" }, outputs: { valueChange: "valueChange", blur: "blur", focus: "focus" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"fv-entry-field-container\" *ngIf=\"control\">\r\n  <label *ngIf=\"label\" class=\"fv-label\" [class.fv-label-required]=\"isRequired()\">\r\n    {{ label }}\r\n    <span *ngIf=\"isRequired()\" class=\"fv-required-asterisk\">*</span>\r\n  </label>\r\n\r\n  <input [type]=\"type\" [formControl]=\"control\" [placeholder]=\"placeholder\" [readonly]=\"readonly\" (blur)=\"onBlur($event)\"\r\n    (focus)=\"onFocus($event)\" (input)=\"onInput($event)\" [attr.maxlength]=\"maxLength\" class=\"fv-input\"\r\n    [class.fv-input-error]=\"errorMessage && control.touched\" [class.fv-input-disabled]=\"disabled\" />\r\n\r\n  <span *ngIf=\"errorMessage && control.touched\" class=\"fv-error-message\">\r\n    {{ getErrorMessage() }}\r\n  </span>\r\n</div>", styles: ["@import\"https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap\";*{font-family:Poppins,sans-serif}.fv-entry-field-container{display:flex;flex-direction:column;margin-bottom:16px;width:100%}.fv-label{margin-bottom:6px;font-size:14px;font-weight:600;color:#151d48;display:flex;align-items:center;gap:4px}.fv-required-asterisk{color:#e74c3c;font-weight:700}.fv-input{padding:5px 10px;border:1px solid #8CBBA8;border-radius:8px;font-size:14px;font-weight:400;font-family:Poppins,sans-serif;transition:all .2s ease-in-out;background-color:#fff;color:#1f2b41;box-sizing:border-box;height:34px;width:100%;min-width:0}.fv-input:focus{outline:none;border-color:#3498db;box-shadow:0 0 0 3px #3498db1a}.fv-input:hover:not(:disabled):not(:focus){border-color:#3498db}.fv-input-error{border-color:#dc3545!important}.fv-input-error:focus{box-shadow:0 0 0 3px #dc35451a}.fv-input-disabled{background-color:#ecf0f1;cursor:not-allowed;opacity:.6}.fv-input::placeholder{color:#999;opacity:1}.fv-error-message{margin-top:4px;font-size:12px;color:#e74c3c;display:flex;align-items:center;gap:4px}.fv-error-message:before{content:\"\\26a0\";font-size:14px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: FvEntryFieldComponent, decorators: [{
             type: Component,
-            args: [{ standalone: true, imports: [CommonModule, ReactiveFormsModule], selector: 'fv-entry-field', template: "<div class=\"fv-entry-field-container\">\r\n  <label *ngIf=\"label\" class=\"fv-label\" [class.fv-label-required]=\"isRequired()\">\r\n    {{ label }}\r\n    <span *ngIf=\"isRequired()\" class=\"fv-required-asterisk\">*</span>\r\n  </label>\r\n\r\n  <input [type]=\"type\" [formControl]=\"control\" [placeholder]=\"placeholder\" [readonly]=\"readonly\" (blur)=\"onBlur($event)\"\r\n    (focus)=\"onFocus($event)\" (input)=\"onInput($event)\" [attr.maxlength]=\"maxLength\" class=\"fv-input\"\r\n    [class.fv-input-error]=\"errorMessage && control.touched\" [class.fv-input-disabled]=\"disabled\" />\r\n\r\n  <span *ngIf=\"errorMessage && control.touched\" class=\"fv-error-message\">\r\n    {{ getErrorMessage() }}\r\n  </span>\r\n</div>", styles: ["@import\"https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap\";*{font-family:Poppins,sans-serif}.fv-entry-field-container{display:flex;flex-direction:column;margin-bottom:16px;width:100%}.fv-label{margin-bottom:6px;font-size:14px;font-weight:600;color:#151d48;display:flex;align-items:center;gap:4px}.fv-required-asterisk{color:#e74c3c;font-weight:700}.fv-input{padding:5px 10px;border:1px solid #8CBBA8;border-radius:8px;font-size:14px;font-weight:400;font-family:Poppins,sans-serif;transition:all .2s ease-in-out;background-color:#fff;color:#1f2b41;box-sizing:border-box;height:34px;width:100%;min-width:0}.fv-input:focus{outline:none;border-color:#3498db;box-shadow:0 0 0 3px #3498db1a}.fv-input:hover:not(:disabled):not(:focus){border-color:#3498db}.fv-input-error{border-color:#dc3545!important}.fv-input-error:focus{box-shadow:0 0 0 3px #dc35451a}.fv-input-disabled{background-color:#ecf0f1;cursor:not-allowed;opacity:.6}.fv-input::placeholder{color:#999;opacity:1}.fv-error-message{margin-top:4px;font-size:12px;color:#e74c3c;display:flex;align-items:center;gap:4px}.fv-error-message:before{content:\"\\26a0\";font-size:14px}\n"] }]
+            args: [{ standalone: true, imports: [CommonModule, ReactiveFormsModule], selector: 'fv-entry-field', template: "<div class=\"fv-entry-field-container\" *ngIf=\"control\">\r\n  <label *ngIf=\"label\" class=\"fv-label\" [class.fv-label-required]=\"isRequired()\">\r\n    {{ label }}\r\n    <span *ngIf=\"isRequired()\" class=\"fv-required-asterisk\">*</span>\r\n  </label>\r\n\r\n  <input [type]=\"type\" [formControl]=\"control\" [placeholder]=\"placeholder\" [readonly]=\"readonly\" (blur)=\"onBlur($event)\"\r\n    (focus)=\"onFocus($event)\" (input)=\"onInput($event)\" [attr.maxlength]=\"maxLength\" class=\"fv-input\"\r\n    [class.fv-input-error]=\"errorMessage && control.touched\" [class.fv-input-disabled]=\"disabled\" />\r\n\r\n  <span *ngIf=\"errorMessage && control.touched\" class=\"fv-error-message\">\r\n    {{ getErrorMessage() }}\r\n  </span>\r\n</div>", styles: ["@import\"https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap\";*{font-family:Poppins,sans-serif}.fv-entry-field-container{display:flex;flex-direction:column;margin-bottom:16px;width:100%}.fv-label{margin-bottom:6px;font-size:14px;font-weight:600;color:#151d48;display:flex;align-items:center;gap:4px}.fv-required-asterisk{color:#e74c3c;font-weight:700}.fv-input{padding:5px 10px;border:1px solid #8CBBA8;border-radius:8px;font-size:14px;font-weight:400;font-family:Poppins,sans-serif;transition:all .2s ease-in-out;background-color:#fff;color:#1f2b41;box-sizing:border-box;height:34px;width:100%;min-width:0}.fv-input:focus{outline:none;border-color:#3498db;box-shadow:0 0 0 3px #3498db1a}.fv-input:hover:not(:disabled):not(:focus){border-color:#3498db}.fv-input-error{border-color:#dc3545!important}.fv-input-error:focus{box-shadow:0 0 0 3px #dc35451a}.fv-input-disabled{background-color:#ecf0f1;cursor:not-allowed;opacity:.6}.fv-input::placeholder{color:#999;opacity:1}.fv-error-message{margin-top:4px;font-size:12px;color:#e74c3c;display:flex;align-items:center;gap:4px}.fv-error-message:before{content:\"\\26a0\";font-size:14px}\n"] }]
         }], propDecorators: { label: [{
                 type: Input
             }], placeholder: [{
@@ -985,7 +985,9 @@ class FvFileSelectorComponent {
                 type: file.type,
             };
             this.selectedFile = fileInfo;
-            this.control.setValue(fileInfo);
+            if (this.control) {
+                this.control.setValue(fileInfo);
+            }
             this.blur.emit();
         }
     }
@@ -996,7 +998,9 @@ class FvFileSelectorComponent {
     }
     removeFile() {
         this.selectedFile = null;
-        this.control.setValue(null);
+        if (this.control) {
+            this.control.setValue(null);
+        }
         if (this.fileInput) {
             this.fileInput.nativeElement.value = '';
         }
@@ -1023,11 +1027,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\"\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 }] });
+    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\" *ngIf=\"control\">\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\"\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"] }]
+            args: [{ standalone: true, imports: [CommonModule, ReactiveFormsModule], selector: 'fv-file-selector', template: "<div class=\"fv-file-selector-container\" *ngIf=\"control\">\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: [{
@@ -1211,7 +1215,9 @@ class FvImageSelectorComponent {
             size: 0 // Approximate or calc from blob
         };
         this.selectedImage = imageInfo;
-        this.control.setValue(imageInfo);
+        if (this.control) {
+            this.control.setValue(imageInfo);
+        }
         this.blur.emit();
         this.closeEditor();
     }
@@ -1233,7 +1239,9 @@ class FvImageSelectorComponent {
     }
     removeImage() {
         this.selectedImage = null;
-        this.control.setValue(null);
+        if (this.control) {
+            this.control.setValue(null);
+        }
         if (this.imageInput) {
             this.imageInput.nativeElement.value = '';
         }
@@ -1260,11 +1268,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" }, 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 }] });
+    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\" *ngIf=\"control\">\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    <!-- 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"] }]
+            args: [{ standalone: true, imports: [CommonModule, ReactiveFormsModule], selector: 'fv-image-selector', template: "<div class=\"fv-image-selector-container\" *ngIf=\"control\">\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: [{
@@ -2764,11 +2772,11 @@ class FvDocumentFieldComponent {
         return errorMessages[this.errorMessage] || this.errorMessage;
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: FvDocumentFieldComponent, deps: [{ token: i1$1.DomSanitizer }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: FvDocumentFieldComponent, isStandalone: true, selector: "fv-document-field", inputs: { label: "label", placeholder: "placeholder", schema: "schema", control: "control", disabled: "disabled", accept: "accept", maxSize: "maxSize" }, outputs: { valueChange: "valueChange" }, viewQueries: [{ propertyName: "fileInput", first: true, predicate: ["fileInput"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div class=\"fv-document-field-container\">\r\n    <label *ngIf=\"label\" class=\"fv-document-field-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    <div *ngIf=\"!control.value; else fileUploaded\" class=\"fv-upload-btn-wrapper\">\r\n        <button type=\"button\" class=\"fv-upload-button\" [disabled]=\"disabled\" (click)=\"openFileDialog()\">\r\n            <span class=\"fv-upload-text\">{{ placeholder }}</span>\r\n            <span class=\"fv-upload-icon-section\">\r\n                <svg width=\"18\" height=\"18\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n                    <path d=\"M12 15V3M12 3L8 7M12 3L16 7M4 17H20V19H4V17Z\" stroke=\"currentColor\" stroke-width=\"2.5\"\r\n                        stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n                </svg>\r\n            </span>\r\n        </button>\r\n    </div>\r\n\r\n    <ng-template #fileUploaded>\r\n        <div class=\"fv-uploaded-actions\">\r\n            <button type=\"button\" class=\"fv-action-button v-view-btn\" (click)=\"viewFile()\">\r\n                <svg width=\"22\" height=\"22\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n                    <path d=\"M1 12C1 12 5 4 12 4C19 4 23 12 23 12C23 12 19 20 12 20C5 20 1 12 1 12Z\" stroke=\"#3F51B5\"\r\n                        stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n                    <path\r\n                        d=\"M12 15C13.6569 15 15 13.6569 15 12C15 10.3431 13.6569 9 12 9C10.3431 9 9 10.3431 9 12C9 13.6569 10.3431 15 12 15Z\"\r\n                        stroke=\"#3F51B5\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n                </svg>\r\n                <span>View</span>\r\n            </button>\r\n            <button type=\"button\" class=\"fv-action-button v-delete-btn\" (click)=\"removeFile()\" [disabled]=\"disabled\">\r\n                <svg width=\"22\" height=\"22\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n                    <path d=\"M3 6H5H21\" stroke=\"#F44336\" stroke-width=\"2.5\" stroke-linecap=\"round\"\r\n                        stroke-linejoin=\"round\" />\r\n                    <path\r\n                        d=\"M8 6V4C8 3.46957 8.21071 2.96086 8.58579 2.58579C8.96086 2.21071 9.46957 2 10 2H14C14.5304 2 15.0391 2.21071 15.4142 2.58579C15.7893 2.96086 16 3.46957 16 4V6M19 6V20C19 20.5304 18.7893 21.0391 18.4142 21.4142C18.0391 21.7893 17.5304 22 17 22H7C6.46957 22 5.96086 21.7893 5.58579 21.4142C5.21071 21.0391 5 20.5304 5 20V6L19 6Z\"\r\n                        stroke=\"#F44336\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n                </svg>\r\n                <span>Delete</span>\r\n            </button>\r\n        </div>\r\n    </ng-template>\r\n\r\n    <div *ngIf=\"errorMessage && control?.touched\" class=\"fv-document-error-message\">\r\n        \u26A0 {{ getErrorMessage() }}\r\n    </div>\r\n</div>\r\n\r\n<!-- Preview Overlay/Modal for Image -->\r\n<div *ngIf=\"showPreview\" class=\"fv-preview-overlay\" (click)=\"closePreview()\">\r\n    <div class=\"fv-preview-content\" (click)=\"$event.stopPropagation()\">\r\n        <img [src]=\"previewUrl\" alt=\"Preview\" />\r\n        <div class=\"fv-preview-actions\">\r\n            <button type=\"button\" class=\"fv-download-btn\" (click)=\"downloadFile()\">Download</button>\r\n            <button type=\"button\" class=\"fv-close-btn\" (click)=\"closePreview()\">Close</button>\r\n        </div>\r\n    </div>\r\n</div>", styles: ["@import\"https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap\";.fv-document-field-container{display:flex;flex-direction:column;margin-bottom:16px;width:100%;font-family:Poppins,sans-serif}.fv-document-field-label{font-size:14px;font-weight:600;color:#151d48;margin-bottom:8px;display:block}.required-asterisk{color:#e74c3c;font-weight:700}.fv-upload-button{display:flex;align-items:center;border:1px solid #D9D9D9;border-radius:8px;background:#fff;padding:0;cursor:pointer;overflow:hidden;width:fit-content;min-width:120px;transition:all .2s ease}.fv-upload-button:hover:not(:disabled){border-color:#3498db;box-shadow:0 2px 4px #0000000d}.fv-upload-button:disabled{cursor:not-allowed;background-color:#f5f5f5;opacity:.7}.fv-upload-text{flex:1;padding:8px 16px;font-size:14px;color:#151d48;text-align:center;font-weight:500}.fv-upload-icon-section{background:#f5f5f5;padding:8px 12px;border-left:1px solid #D9D9D9;display:flex;align-items:center;justify-content:center;color:#000}.fv-uploaded-actions{display:flex;gap:24px;align-items:center;padding:4px 0}.fv-action-button{display:flex;align-items:center;gap:8px;background:none;border:none;cursor:pointer;font-size:15px;padding:4px 8px;color:#000;font-weight:500;transition:opacity .2s}.fv-action-button:hover:not(:disabled){opacity:.8}.fv-action-button:disabled{cursor:not-allowed;opacity:.5}.fv-document-error-message{margin-top:4px;font-size:12px;color:#e74c3c}.fv-preview-overlay{position:fixed;top:0;left:0;width:100vw;height:100vh;background:#000c;display:flex;justify-content:center;align-items:center;z-index:10000}.fv-preview-content{position:relative;background:#fff;padding:24px;border-radius:12px;max-width:90vw;max-height:90vh;display:flex;flex-direction:column;align-items:center}.fv-preview-content img{max-width:100%;max-height:70vh;object-fit:contain;border-radius:4px;margin-bottom:20px}.fv-preview-actions{display:flex;gap:16px}.fv-preview-actions button{padding:10px 24px;border-radius:6px;border:none;cursor:pointer;font-weight:500;transition:background .2s}.fv-download-btn{background:#3498db;color:#fff}.fv-download-btn:hover{background:#2980b9}.fv-close-btn{background:#f0f0f0;color:#333}.fv-close-btn:hover{background:#e0e0e0}\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: FvDocumentFieldComponent, isStandalone: true, selector: "fv-document-field", inputs: { label: "label", placeholder: "placeholder", schema: "schema", control: "control", disabled: "disabled", accept: "accept", maxSize: "maxSize" }, outputs: { valueChange: "valueChange" }, viewQueries: [{ propertyName: "fileInput", first: true, predicate: ["fileInput"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div class=\"fv-document-field-container\">\r\n    <label *ngIf=\"label\" class=\"fv-document-field-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    <div *ngIf=\"!control.value; else fileUploaded\" class=\"fv-upload-btn-wrapper\">\r\n        <button type=\"button\" class=\"fv-upload-button\" [disabled]=\"disabled\" (click)=\"openFileDialog()\">\r\n            <span class=\"fv-upload-text\">{{ placeholder }}</span>\r\n            <span class=\"fv-upload-icon-section\">\r\n                <svg width=\"18\" height=\"18\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n                    <path d=\"M12 15V3M12 3L8 7M12 3L16 7M4 17H20V19H4V17Z\" stroke=\"currentColor\" stroke-width=\"2.5\"\r\n                        stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n                </svg>\r\n            </span>\r\n        </button>\r\n    </div>\r\n\r\n    <ng-template #fileUploaded>\r\n        <div class=\"fv-uploaded-actions\">\r\n            <button type=\"button\" class=\"fv-action-button v-view-btn\" (click)=\"viewFile()\">\r\n                <svg width=\"22\" height=\"22\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n                    <path d=\"M1 12C1 12 5 4 12 4C19 4 23 12 23 12C23 12 19 20 12 20C5 20 1 12 1 12Z\" stroke=\"#3F51B5\"\r\n                        stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n                    <path\r\n                        d=\"M12 15C13.6569 15 15 13.6569 15 12C15 10.3431 13.6569 9 12 9C10.3431 9 9 10.3431 9 12C9 13.6569 10.3431 15 12 15Z\"\r\n                        stroke=\"#3F51B5\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n                </svg>\r\n                <span>View</span>\r\n            </button>\r\n            <button type=\"button\" class=\"fv-action-button v-delete-btn\" (click)=\"removeFile()\" [disabled]=\"disabled\">\r\n                <svg width=\"22\" height=\"22\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n                    <path d=\"M3 6H5H21\" stroke=\"#F44336\" stroke-width=\"2.5\" stroke-linecap=\"round\"\r\n                        stroke-linejoin=\"round\" />\r\n                    <path\r\n                        d=\"M8 6V4C8 3.46957 8.21071 2.96086 8.58579 2.58579C8.96086 2.21071 9.46957 2 10 2H14C14.5304 2 15.0391 2.21071 15.4142 2.58579C15.7893 2.96086 16 3.46957 16 4V6M19 6V20C19 20.5304 18.7893 21.0391 18.4142 21.4142C18.0391 21.7893 17.5304 22 17 22H7C6.46957 22 5.96086 21.7893 5.58579 21.4142C5.21071 21.0391 5 20.5304 5 20V6L19 6Z\"\r\n                        stroke=\"#F44336\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n                </svg>\r\n                <span>Delete</span>\r\n            </button>\r\n        </div>\r\n    </ng-template>\r\n\r\n    <div *ngIf=\"errorMessage && control?.touched\" class=\"fv-document-error-message\">\r\n        \u26A0 {{ getErrorMessage() }}\r\n    </div>\r\n</div>\r\n\r\n<!-- Preview Overlay/Modal for Image -->\r\n<div *ngIf=\"showPreview\" class=\"fv-preview-overlay\" (click)=\"closePreview()\">\r\n    <div class=\"fv-preview-content\" (click)=\"$event.stopPropagation()\">\r\n        <img [src]=\"previewUrl\" alt=\"Preview\" />\r\n        <div class=\"fv-preview-actions\">\r\n            <button type=\"button\" class=\"fv-download-btn\" (click)=\"downloadFile()\">Download</button>\r\n            <button type=\"button\" class=\"fv-close-btn\" (click)=\"closePreview()\">Close</button>\r\n        </div>\r\n    </div>\r\n</div>", styles: ["@import\"https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap\";.fv-document-field-container{display:flex;flex-direction:column;margin-bottom:16px;width:100%;font-family:Poppins,sans-serif}.fv-document-field-label{font-size:14px;font-weight:600;color:#151d48;margin-bottom:8px;display:block}.required-asterisk{color:#e74c3c;font-weight:700}.fv-upload-button{display:flex;align-items:center;border:1px solid #D9D9D9;border-radius:8px;background:#fff;padding:0;cursor:pointer;overflow:hidden;width:fit-content;min-width:120px;transition:all .2s ease}.fv-upload-button:hover:not(:disabled){border-color:#3498db;box-shadow:0 2px 4px #0000000d}.fv-upload-button:disabled{cursor:not-allowed;background-color:#f5f5f5;opacity:.7}.fv-upload-text{flex:1;padding:8px 16px;font-size:14px;color:#151d48;text-align:center;font-weight:500}.fv-upload-icon-section{background:#f5f5f5;padding:8px 12px;border-left:1px solid #D9D9D9;display:flex;align-items:center;justify-content:center;color:#000}.fv-uploaded-actions{display:flex;gap:0px;align-items:center;padding:4px 0}.fv-action-button{display:flex;align-items:center;gap:8px;background:none;border:none;cursor:pointer;font-size:15px;padding:4px 8px;color:#000;font-weight:500;transition:opacity .2s}.fv-action-button:hover:not(:disabled){opacity:.8}.fv-action-button:disabled{cursor:not-allowed;opacity:.5}.fv-document-error-message{margin-top:4px;font-size:12px;color:#e74c3c}.fv-preview-overlay{position:fixed;top:0;left:0;width:100vw;height:100vh;background:#000c;display:flex;justify-content:center;align-items:center;z-index:10000}.fv-preview-content{position:relative;background:#fff;padding:24px;border-radius:12px;max-width:90vw;max-height:90vh;display:flex;flex-direction:column;align-items:center}.fv-preview-content img{max-width:100%;max-height:70vh;object-fit:contain;border-radius:4px;margin-bottom:20px}.fv-preview-actions{display:flex;gap:16px}.fv-preview-actions button{padding:10px 24px;border-radius:6px;border:none;cursor:pointer;font-weight:500;transition:background .2s}.fv-download-btn{background:#3498db;color:#fff}.fv-download-btn:hover{background:#2980b9}.fv-close-btn{background:#f0f0f0;color:#333}.fv-close-btn:hover{background:#e0e0e0}\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: FvDocumentFieldComponent, decorators: [{
             type: Component,
-            args: [{ standalone: true, imports: [CommonModule, ReactiveFormsModule], selector: 'fv-document-field', template: "<div class=\"fv-document-field-container\">\r\n    <label *ngIf=\"label\" class=\"fv-document-field-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    <div *ngIf=\"!control.value; else fileUploaded\" class=\"fv-upload-btn-wrapper\">\r\n        <button type=\"button\" class=\"fv-upload-button\" [disabled]=\"disabled\" (click)=\"openFileDialog()\">\r\n            <span class=\"fv-upload-text\">{{ placeholder }}</span>\r\n            <span class=\"fv-upload-icon-section\">\r\n                <svg width=\"18\" height=\"18\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n                    <path d=\"M12 15V3M12 3L8 7M12 3L16 7M4 17H20V19H4V17Z\" stroke=\"currentColor\" stroke-width=\"2.5\"\r\n                        stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n                </svg>\r\n            </span>\r\n        </button>\r\n    </div>\r\n\r\n    <ng-template #fileUploaded>\r\n        <div class=\"fv-uploaded-actions\">\r\n            <button type=\"button\" class=\"fv-action-button v-view-btn\" (click)=\"viewFile()\">\r\n                <svg width=\"22\" height=\"22\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n                    <path d=\"M1 12C1 12 5 4 12 4C19 4 23 12 23 12C23 12 19 20 12 20C5 20 1 12 1 12Z\" stroke=\"#3F51B5\"\r\n                        stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n                    <path\r\n                        d=\"M12 15C13.6569 15 15 13.6569 15 12C15 10.3431 13.6569 9 12 9C10.3431 9 9 10.3431 9 12C9 13.6569 10.3431 15 12 15Z\"\r\n                        stroke=\"#3F51B5\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n                </svg>\r\n                <span>View</span>\r\n            </button>\r\n            <button type=\"button\" class=\"fv-action-button v-delete-btn\" (click)=\"removeFile()\" [disabled]=\"disabled\">\r\n                <svg width=\"22\" height=\"22\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n                    <path d=\"M3 6H5H21\" stroke=\"#F44336\" stroke-width=\"2.5\" stroke-linecap=\"round\"\r\n                        stroke-linejoin=\"round\" />\r\n                    <path\r\n                        d=\"M8 6V4C8 3.46957 8.21071 2.96086 8.58579 2.58579C8.96086 2.21071 9.46957 2 10 2H14C14.5304 2 15.0391 2.21071 15.4142 2.58579C15.7893 2.96086 16 3.46957 16 4V6M19 6V20C19 20.5304 18.7893 21.0391 18.4142 21.4142C18.0391 21.7893 17.5304 22 17 22H7C6.46957 22 5.96086 21.7893 5.58579 21.4142C5.21071 21.0391 5 20.5304 5 20V6L19 6Z\"\r\n                        stroke=\"#F44336\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n                </svg>\r\n                <span>Delete</span>\r\n            </button>\r\n        </div>\r\n    </ng-template>\r\n\r\n    <div *ngIf=\"errorMessage && control?.touched\" class=\"fv-document-error-message\">\r\n        \u26A0 {{ getErrorMessage() }}\r\n    </div>\r\n</div>\r\n\r\n<!-- Preview Overlay/Modal for Image -->\r\n<div *ngIf=\"showPreview\" class=\"fv-preview-overlay\" (click)=\"closePreview()\">\r\n    <div class=\"fv-preview-content\" (click)=\"$event.stopPropagation()\">\r\n        <img [src]=\"previewUrl\" alt=\"Preview\" />\r\n        <div class=\"fv-preview-actions\">\r\n            <button type=\"button\" class=\"fv-download-btn\" (click)=\"downloadFile()\">Download</button>\r\n            <button type=\"button\" class=\"fv-close-btn\" (click)=\"closePreview()\">Close</button>\r\n        </div>\r\n    </div>\r\n</div>", styles: ["@import\"https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap\";.fv-document-field-container{display:flex;flex-direction:column;margin-bottom:16px;width:100%;font-family:Poppins,sans-serif}.fv-document-field-label{font-size:14px;font-weight:600;color:#151d48;margin-bottom:8px;display:block}.required-asterisk{color:#e74c3c;font-weight:700}.fv-upload-button{display:flex;align-items:center;border:1px solid #D9D9D9;border-radius:8px;background:#fff;padding:0;cursor:pointer;overflow:hidden;width:fit-content;min-width:120px;transition:all .2s ease}.fv-upload-button:hover:not(:disabled){border-color:#3498db;box-shadow:0 2px 4px #0000000d}.fv-upload-button:disabled{cursor:not-allowed;background-color:#f5f5f5;opacity:.7}.fv-upload-text{flex:1;padding:8px 16px;font-size:14px;color:#151d48;text-align:center;font-weight:500}.fv-upload-icon-section{background:#f5f5f5;padding:8px 12px;border-left:1px solid #D9D9D9;display:flex;align-items:center;justify-content:center;color:#000}.fv-uploaded-actions{display:flex;gap:24px;align-items:center;padding:4px 0}.fv-action-button{display:flex;align-items:center;gap:8px;background:none;border:none;cursor:pointer;font-size:15px;padding:4px 8px;color:#000;font-weight:500;transition:opacity .2s}.fv-action-button:hover:not(:disabled){opacity:.8}.fv-action-button:disabled{cursor:not-allowed;opacity:.5}.fv-document-error-message{margin-top:4px;font-size:12px;color:#e74c3c}.fv-preview-overlay{position:fixed;top:0;left:0;width:100vw;height:100vh;background:#000c;display:flex;justify-content:center;align-items:center;z-index:10000}.fv-preview-content{position:relative;background:#fff;padding:24px;border-radius:12px;max-width:90vw;max-height:90vh;display:flex;flex-direction:column;align-items:center}.fv-preview-content img{max-width:100%;max-height:70vh;object-fit:contain;border-radius:4px;margin-bottom:20px}.fv-preview-actions{display:flex;gap:16px}.fv-preview-actions button{padding:10px 24px;border-radius:6px;border:none;cursor:pointer;font-weight:500;transition:background .2s}.fv-download-btn{background:#3498db;color:#fff}.fv-download-btn:hover{background:#2980b9}.fv-close-btn{background:#f0f0f0;color:#333}.fv-close-btn:hover{background:#e0e0e0}\n"] }]
+            args: [{ standalone: true, imports: [CommonModule, ReactiveFormsModule], selector: 'fv-document-field', template: "<div class=\"fv-document-field-container\">\r\n    <label *ngIf=\"label\" class=\"fv-document-field-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    <div *ngIf=\"!control.value; else fileUploaded\" class=\"fv-upload-btn-wrapper\">\r\n        <button type=\"button\" class=\"fv-upload-button\" [disabled]=\"disabled\" (click)=\"openFileDialog()\">\r\n            <span class=\"fv-upload-text\">{{ placeholder }}</span>\r\n            <span class=\"fv-upload-icon-section\">\r\n                <svg width=\"18\" height=\"18\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n                    <path d=\"M12 15V3M12 3L8 7M12 3L16 7M4 17H20V19H4V17Z\" stroke=\"currentColor\" stroke-width=\"2.5\"\r\n                        stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n                </svg>\r\n            </span>\r\n        </button>\r\n    </div>\r\n\r\n    <ng-template #fileUploaded>\r\n        <div class=\"fv-uploaded-actions\">\r\n            <button type=\"button\" class=\"fv-action-button v-view-btn\" (click)=\"viewFile()\">\r\n                <svg width=\"22\" height=\"22\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n                    <path d=\"M1 12C1 12 5 4 12 4C19 4 23 12 23 12C23 12 19 20 12 20C5 20 1 12 1 12Z\" stroke=\"#3F51B5\"\r\n                        stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n                    <path\r\n                        d=\"M12 15C13.6569 15 15 13.6569 15 12C15 10.3431 13.6569 9 12 9C10.3431 9 9 10.3431 9 12C9 13.6569 10.3431 15 12 15Z\"\r\n                        stroke=\"#3F51B5\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n                </svg>\r\n                <span>View</span>\r\n            </button>\r\n            <button type=\"button\" class=\"fv-action-button v-delete-btn\" (click)=\"removeFile()\" [disabled]=\"disabled\">\r\n                <svg width=\"22\" height=\"22\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n                    <path d=\"M3 6H5H21\" stroke=\"#F44336\" stroke-width=\"2.5\" stroke-linecap=\"round\"\r\n                        stroke-linejoin=\"round\" />\r\n                    <path\r\n                        d=\"M8 6V4C8 3.46957 8.21071 2.96086 8.58579 2.58579C8.96086 2.21071 9.46957 2 10 2H14C14.5304 2 15.0391 2.21071 15.4142 2.58579C15.7893 2.96086 16 3.46957 16 4V6M19 6V20C19 20.5304 18.7893 21.0391 18.4142 21.4142C18.0391 21.7893 17.5304 22 17 22H7C6.46957 22 5.96086 21.7893 5.58579 21.4142C5.21071 21.0391 5 20.5304 5 20V6L19 6Z\"\r\n                        stroke=\"#F44336\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n                </svg>\r\n                <span>Delete</span>\r\n            </button>\r\n        </div>\r\n    </ng-template>\r\n\r\n    <div *ngIf=\"errorMessage && control?.touched\" class=\"fv-document-error-message\">\r\n        \u26A0 {{ getErrorMessage() }}\r\n    </div>\r\n</div>\r\n\r\n<!-- Preview Overlay/Modal for Image -->\r\n<div *ngIf=\"showPreview\" class=\"fv-preview-overlay\" (click)=\"closePreview()\">\r\n    <div class=\"fv-preview-content\" (click)=\"$event.stopPropagation()\">\r\n        <img [src]=\"previewUrl\" alt=\"Preview\" />\r\n        <div class=\"fv-preview-actions\">\r\n            <button type=\"button\" class=\"fv-download-btn\" (click)=\"downloadFile()\">Download</button>\r\n            <button type=\"button\" class=\"fv-close-btn\" (click)=\"closePreview()\">Close</button>\r\n        </div>\r\n    </div>\r\n</div>", styles: ["@import\"https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap\";.fv-document-field-container{display:flex;flex-direction:column;margin-bottom:16px;width:100%;font-family:Poppins,sans-serif}.fv-document-field-label{font-size:14px;font-weight:600;color:#151d48;margin-bottom:8px;display:block}.required-asterisk{color:#e74c3c;font-weight:700}.fv-upload-button{display:flex;align-items:center;border:1px solid #D9D9D9;border-radius:8px;background:#fff;padding:0;cursor:pointer;overflow:hidden;width:fit-content;min-width:120px;transition:all .2s ease}.fv-upload-button:hover:not(:disabled){border-color:#3498db;box-shadow:0 2px 4px #0000000d}.fv-upload-button:disabled{cursor:not-allowed;background-color:#f5f5f5;opacity:.7}.fv-upload-text{flex:1;padding:8px 16px;font-size:14px;color:#151d48;text-align:center;font-weight:500}.fv-upload-icon-section{background:#f5f5f5;padding:8px 12px;border-left:1px solid #D9D9D9;display:flex;align-items:center;justify-content:center;color:#000}.fv-uploaded-actions{display:flex;gap:0px;align-items:center;padding:4px 0}.fv-action-button{display:flex;align-items:center;gap:8px;background:none;border:none;cursor:pointer;font-size:15px;padding:4px 8px;color:#000;font-weight:500;transition:opacity .2s}.fv-action-button:hover:not(:disabled){opacity:.8}.fv-action-button:disabled{cursor:not-allowed;opacity:.5}.fv-document-error-message{margin-top:4px;font-size:12px;color:#e74c3c}.fv-preview-overlay{position:fixed;top:0;left:0;width:100vw;height:100vh;background:#000c;display:flex;justify-content:center;align-items:center;z-index:10000}.fv-preview-content{position:relative;background:#fff;padding:24px;border-radius:12px;max-width:90vw;max-height:90vh;display:flex;flex-direction:column;align-items:center}.fv-preview-content img{max-width:100%;max-height:70vh;object-fit:contain;border-radius:4px;margin-bottom:20px}.fv-preview-actions{display:flex;gap:16px}.fv-preview-actions button{padding:10px 24px;border-radius:6px;border:none;cursor:pointer;font-weight:500;transition:background .2s}.fv-download-btn{background:#3498db;color:#fff}.fv-download-btn:hover{background:#2980b9}.fv-close-btn{background:#f0f0f0;color:#333}.fv-close-btn:hover{background:#e0e0e0}\n"] }]
         }], ctorParameters: () => [{ type: i1$1.DomSanitizer }], propDecorators: { label: [{
                 type: Input
             }], placeholder: [{
@@ -2810,6 +2818,11 @@ class AddUpdateFormComponent {
     ngOnInit() {
         this.initializeForm();
     }
+    ngOnChanges(changes) {
+        if (changes['config'] && !changes['config'].firstChange) {
+            this.initializeForm();
+        }
+    }
     ngAfterViewInit() {
         // Lifecycle hook - can be used for datepicker initialization if needed
     }
@@ -3392,7 +3405,7 @@ class AddUpdateFormComponent {
         return 'Invalid field';
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: AddUpdateFormComponent, deps: [{ token: i2.FormBuilder }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: AddUpdateFormComponent, isStandalone: true, selector: "lib-add-update-form", inputs: { config: "config" }, outputs: { validationError: "validationError" }, ngImport: i0, template: `
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: AddUpdateFormComponent, isStandalone: true, selector: "lib-add-update-form", inputs: { config: "config" }, outputs: { validationError: "validationError" }, usesOnChanges: true, ngImport: i0, template: `
     <div class="form-container">
       <div class="form-header" *ngIf="config.formTitle">
         <h2>{{ config.formTitle }}</h2>
@@ -4748,5 +4761,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
  * Generated bundle index. Do not edit.
  */
 
-export { AddUpdateFormComponent, FvCheckboxComponent, FvControlsModule, FvDateFieldComponent, FvDocumentFieldComponent, FvDropdownComponent, FvEmailFieldComponent, FvEntryFieldComponent, FvEsiFieldComponent, FvFileSelectorComponent, FvIbanFieldComponent, FvIfscFieldComponent, FvImageSelectorComponent, FvMicrFieldComponent, FvMonthYearFieldComponent, FvNameCodeComponent, FvNumberFieldComponent, FvPasswordFieldComponent, FvPfFieldComponent, FvPhoneFieldComponent, FvRadioGroupComponent, FvRichTextEditorComponent, FvUanFieldComponent, QueryFormComponent };
+export { AddUpdateFormComponent, FvCheckboxComponent, FvControlsModule, FvDateFieldComponent, FvDocumentFieldComponent, FvDropdownComponent, FvEmailFieldComponent, FvEntryFieldComponent, FvEsiFieldComponent, FvFileSelectorComponent, FvIbanFieldComponent, FvIfscFieldComponent, FvImageSelectorComponent, FvMicrFieldComponent, FvMonthYearFieldComponent, FvNameCodeComponent, FvNumberFieldComponent, FvPasswordFieldComponent, FvPfFieldComponent, FvPhoneFieldComponent, FvRadioGroupComponent, FvRichTextEditorComponent, FvServicePeriodComponent, FvUanFieldComponent, QueryFormComponent };
 //# sourceMappingURL=fovestta2-web-angular.mjs.map