@fovestta2/web-angular 1.0.1 → 1.0.4

package/fesm2022/fovestta2-web-angular.mjs

@@ -1,12 +1,13 @@
 import * as i0 from '@angular/core';
-import { EventEmitter, Component, Input, Output, ViewChild, NgModule } from '@angular/core';
+import { EventEmitter, Component, Input, Output, ViewChild, HostListener, forwardRef, NgModule } from '@angular/core';
 import * as i1 from '@angular/common';
 import { CommonModule } from '@angular/common';
 import * as i2 from '@angular/forms';
-import { ReactiveFormsModule } from '@angular/forms';
+import { ReactiveFormsModule, FormControl, NG_VALUE_ACCESSOR, FormsModule, Validators } from '@angular/forms';
 import { Validator } from '@fovestta2/validation-engine';
 import * as i1$1 from '@angular/platform-browser';
 import { Validator as Validator$1 } from '@fovestta/validation-engine';
+import { distinctUntilChanged } from 'rxjs/operators';
 
 class FvEntryFieldComponent {
     label = '';
@@ -16,6 +17,8 @@ class FvEntryFieldComponent {
     disabled = false;
     readonly = false;
     type = 'text';
+    allowAlphabetsOnly = false;
+    maxLength = null;
     valueChange = new EventEmitter();
     blur = new EventEmitter();
     focus = new EventEmitter();
@@ -64,6 +67,26 @@ class FvEntryFieldComponent {
     onFocus(event) {
         this.focus.emit();
     }
+    onInput(event) {
+        const input = event.target;
+        let value = input.value;
+        if (this.allowAlphabetsOnly) {
+            // Remove any non-alphabet characters (keeping spaces if desired, usually names have spaces)
+            // Assuming 'alphabets' means [a-zA-Z] and maybe spaces.
+            // Strict alphabets: /[^a-zA-Z]/g
+            const newValue = value.replace(/[^a-zA-Z ]/g, '');
+            if (newValue !== value) {
+                value = newValue;
+                input.value = value;
+                this.control.setValue(value);
+            }
+        }
+        if (this.maxLength && value.length > this.maxLength) {
+            value = value.substring(0, this.maxLength);
+            input.value = value;
+            this.control.setValue(value);
+        }
+    }
     isRequired() {
         return (this.schema?.rules?.some((r) => r.name === 'required' && r.params?.['enabled']) || false);
     }
@@ -80,11 +103,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" }, outputs: { valueChange: "valueChange", blur: "blur", focus: "focus" }, ngImport: i0, template: "<div class=\"fv-entry-field-container\">\r\n  <label *ngIf=\"label\" class=\"fv-label\" [class.fv-label-required]=\"isRequired()\">\r\n    {{ label }}\r\n    <span *ngIf=\"isRequired()\" class=\"fv-required-asterisk\">*</span>\r\n  </label>\r\n\r\n  <input [type]=\"type\" [formControl]=\"control\" [placeholder]=\"placeholder\" [disabled]=\"disabled\" [readonly]=\"readonly\"\r\n    (blur)=\"onBlur($event)\" (focus)=\"onFocus($event)\" 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: [".fv-entry-field-container{display:flex;flex-direction:column;margin-bottom:16px;width:100%}.fv-label{margin-bottom:6px;font-size:14px;font-weight:500;color:var(--fv-text-primary, #333333);display:flex;align-items:center;gap:4px}.fv-required-asterisk{color:var(--fv-error-color, #dc3545);font-weight:700}.fv-input{padding:10px 12px;border:1px solid var(--fv-border-default, #cccccc);border-radius:4px;font-size:14px;font-family:inherit;transition:all .2s ease-in-out;background-color:var(--fv-background-default, #ffffff);color:var(--fv-text-primary, #333333)}.fv-input:focus{outline:none;border-color:var(--fv-border-focus, #007bff);box-shadow:0 0 0 3px var(--fv-focus-shadow, rgba(0, 123, 255, .1))}.fv-input:hover:not(:disabled):not(:focus){border-color:var(--fv-border-hover, #999999)}.fv-input-error{border-color:var(--fv-border-error, #dc3545)!important}.fv-input-error:focus{box-shadow:0 0 0 3px var(--fv-error-shadow, rgba(220, 53, 69, .1))}.fv-input-disabled{background-color:var(--fv-background-disabled, #f5f5f5);cursor:not-allowed;opacity:.6}.fv-input::placeholder{color:var(--fv-text-placeholder, #999999);opacity:1}.fv-error-message{margin-top:4px;font-size:12px;color:var(--fv-error-color, #dc3545);display:flex;align-items:center;gap:4px}.fv-error-message:before{content:\"\\26a0\";font-size:14px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: FvEntryFieldComponent, isStandalone: true, selector: "fv-entry-field", inputs: { label: "label", placeholder: "placeholder", schema: "schema", control: "control", disabled: "disabled", readonly: "readonly", type: "type", allowAlphabetsOnly: "allowAlphabetsOnly", maxLength: "maxLength" }, outputs: { valueChange: "valueChange", blur: "blur", focus: "focus" }, ngImport: i0, template: "<div class=\"fv-entry-field-container\">\r\n  <label *ngIf=\"label\" class=\"fv-label\" [class.fv-label-required]=\"isRequired()\">\r\n    {{ label }}\r\n    <span *ngIf=\"isRequired()\" class=\"fv-required-asterisk\">*</span>\r\n  </label>\r\n\r\n  <input [type]=\"type\" [formControl]=\"control\" [placeholder]=\"placeholder\" [disabled]=\"disabled\" [readonly]=\"readonly\"\r\n    (blur)=\"onBlur($event)\" (focus)=\"onFocus($event)\" (input)=\"onInput($event)\" [attr.maxlength]=\"maxLength\"\r\n    class=\"fv-input\" [class.fv-input-error]=\"errorMessage\" [class.fv-input-disabled]=\"disabled\" />\r\n\r\n  <span *ngIf=\"errorMessage\" class=\"fv-error-message\">\r\n    {{ getErrorMessage() }}\r\n  </span>\r\n</div>", styles: [".fv-entry-field-container{display:flex;flex-direction:column;margin-bottom:16px;width:100%}.fv-label{margin-bottom:6px;font-size:14px;font-weight:500;color:var(--fv-text-primary, #333333);display:flex;align-items:center;gap:4px}.fv-required-asterisk{color:var(--fv-error-color, #dc3545);font-weight:700}.fv-input{padding:10px 12px;border:1px solid var(--fv-border-default, #cccccc);border-radius:4px;font-size:14px;font-family:inherit;transition:all .2s ease-in-out;background-color:var(--fv-background-default, #ffffff);color:var(--fv-text-primary, #333333)}.fv-input:focus{outline:none;border-color:var(--fv-border-focus, #007bff);box-shadow:0 0 0 3px var(--fv-focus-shadow, rgba(0, 123, 255, .1))}.fv-input:hover:not(:disabled):not(:focus){border-color:var(--fv-border-hover, #999999)}.fv-input-error{border-color:var(--fv-border-error, #dc3545)!important}.fv-input-error:focus{box-shadow:0 0 0 3px var(--fv-error-shadow, rgba(220, 53, 69, .1))}.fv-input-disabled{background-color:var(--fv-background-disabled, #f5f5f5);cursor:not-allowed;opacity:.6}.fv-input::placeholder{color:var(--fv-text-placeholder, #999999);opacity:1}.fv-error-message{margin-top:4px;font-size:12px;color:var(--fv-error-color, #dc3545);display:flex;align-items:center;gap:4px}.fv-error-message:before{content:\"\\26a0\";font-size:14px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: FvEntryFieldComponent, decorators: [{
             type: Component,
-            args: [{ standalone: true, imports: [CommonModule, ReactiveFormsModule], selector: 'fv-entry-field', template: "<div class=\"fv-entry-field-container\">\r\n  <label *ngIf=\"label\" class=\"fv-label\" [class.fv-label-required]=\"isRequired()\">\r\n    {{ label }}\r\n    <span *ngIf=\"isRequired()\" class=\"fv-required-asterisk\">*</span>\r\n  </label>\r\n\r\n  <input [type]=\"type\" [formControl]=\"control\" [placeholder]=\"placeholder\" [disabled]=\"disabled\" [readonly]=\"readonly\"\r\n    (blur)=\"onBlur($event)\" (focus)=\"onFocus($event)\" 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: [".fv-entry-field-container{display:flex;flex-direction:column;margin-bottom:16px;width:100%}.fv-label{margin-bottom:6px;font-size:14px;font-weight:500;color:var(--fv-text-primary, #333333);display:flex;align-items:center;gap:4px}.fv-required-asterisk{color:var(--fv-error-color, #dc3545);font-weight:700}.fv-input{padding:10px 12px;border:1px solid var(--fv-border-default, #cccccc);border-radius:4px;font-size:14px;font-family:inherit;transition:all .2s ease-in-out;background-color:var(--fv-background-default, #ffffff);color:var(--fv-text-primary, #333333)}.fv-input:focus{outline:none;border-color:var(--fv-border-focus, #007bff);box-shadow:0 0 0 3px var(--fv-focus-shadow, rgba(0, 123, 255, .1))}.fv-input:hover:not(:disabled):not(:focus){border-color:var(--fv-border-hover, #999999)}.fv-input-error{border-color:var(--fv-border-error, #dc3545)!important}.fv-input-error:focus{box-shadow:0 0 0 3px var(--fv-error-shadow, rgba(220, 53, 69, .1))}.fv-input-disabled{background-color:var(--fv-background-disabled, #f5f5f5);cursor:not-allowed;opacity:.6}.fv-input::placeholder{color:var(--fv-text-placeholder, #999999);opacity:1}.fv-error-message{margin-top:4px;font-size:12px;color:var(--fv-error-color, #dc3545);display:flex;align-items:center;gap:4px}.fv-error-message:before{content:\"\\26a0\";font-size:14px}\n"] }]
+            args: [{ standalone: true, imports: [CommonModule, ReactiveFormsModule], selector: 'fv-entry-field', template: "<div class=\"fv-entry-field-container\">\r\n  <label *ngIf=\"label\" class=\"fv-label\" [class.fv-label-required]=\"isRequired()\">\r\n    {{ label }}\r\n    <span *ngIf=\"isRequired()\" class=\"fv-required-asterisk\">*</span>\r\n  </label>\r\n\r\n  <input [type]=\"type\" [formControl]=\"control\" [placeholder]=\"placeholder\" [disabled]=\"disabled\" [readonly]=\"readonly\"\r\n    (blur)=\"onBlur($event)\" (focus)=\"onFocus($event)\" (input)=\"onInput($event)\" [attr.maxlength]=\"maxLength\"\r\n    class=\"fv-input\" [class.fv-input-error]=\"errorMessage\" [class.fv-input-disabled]=\"disabled\" />\r\n\r\n  <span *ngIf=\"errorMessage\" class=\"fv-error-message\">\r\n    {{ getErrorMessage() }}\r\n  </span>\r\n</div>", styles: [".fv-entry-field-container{display:flex;flex-direction:column;margin-bottom:16px;width:100%}.fv-label{margin-bottom:6px;font-size:14px;font-weight:500;color:var(--fv-text-primary, #333333);display:flex;align-items:center;gap:4px}.fv-required-asterisk{color:var(--fv-error-color, #dc3545);font-weight:700}.fv-input{padding:10px 12px;border:1px solid var(--fv-border-default, #cccccc);border-radius:4px;font-size:14px;font-family:inherit;transition:all .2s ease-in-out;background-color:var(--fv-background-default, #ffffff);color:var(--fv-text-primary, #333333)}.fv-input:focus{outline:none;border-color:var(--fv-border-focus, #007bff);box-shadow:0 0 0 3px var(--fv-focus-shadow, rgba(0, 123, 255, .1))}.fv-input:hover:not(:disabled):not(:focus){border-color:var(--fv-border-hover, #999999)}.fv-input-error{border-color:var(--fv-border-error, #dc3545)!important}.fv-input-error:focus{box-shadow:0 0 0 3px var(--fv-error-shadow, rgba(220, 53, 69, .1))}.fv-input-disabled{background-color:var(--fv-background-disabled, #f5f5f5);cursor:not-allowed;opacity:.6}.fv-input::placeholder{color:var(--fv-text-placeholder, #999999);opacity:1}.fv-error-message{margin-top:4px;font-size:12px;color:var(--fv-error-color, #dc3545);display:flex;align-items:center;gap:4px}.fv-error-message:before{content:\"\\26a0\";font-size:14px}\n"] }]
         }], propDecorators: { label: [{
                 type: Input
             }], placeholder: [{
@@ -99,6 +122,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
                 type: Input
             }], type: [{
                 type: Input
+            }], allowAlphabetsOnly: [{
+                type: Input
+            }], maxLength: [{
+                type: Input
             }], valueChange: [{
                 type: Output
             }], blur: [{
@@ -494,11 +521,11 @@ class FvRadioGroupComponent {
         return this.control.value === value;
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: FvRadioGroupComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: FvRadioGroupComponent, isStandalone: true, selector: "fv-radio-group", inputs: { label: "label", control: "control", options: "options", disabled: "disabled", required: "required", name: "name" }, outputs: { valueChange: "valueChange" }, ngImport: i0, template: "<div class=\"fv-radio-group-container\">\r\n  <label *ngIf=\"label\" class=\"fv-group-label\">\r\n    {{ label }}\r\n    <span *ngIf=\"required\" class=\"fv-required-asterisk\">*</span>\r\n  </label>\r\n  \r\n  <div class=\"fv-radio-options\">\r\n    <label \r\n      *ngFor=\"let option of options\" \r\n      class=\"fv-radio-label\"\r\n      [class.fv-radio-disabled]=\"disabled || option.disabled\">\r\n      <input\r\n        type=\"radio\"\r\n        [name]=\"name\"\r\n        [value]=\"option.value\"\r\n        [checked]=\"isSelected(option.value)\"\r\n        [disabled]=\"disabled || option.disabled\"\r\n        (change)=\"onChange(option.value)\"\r\n        class=\"fv-radio-input\"\r\n      />\r\n      <span class=\"fv-radio-custom\"></span>\r\n      <span class=\"fv-radio-text\">{{ option.label }}</span>\r\n    </label>\r\n  </div>\r\n</div>", styles: [".fv-radio-group-container{margin-bottom:16px}.fv-group-label{display:block;margin-bottom:10px;font-size:14px;font-weight:500;color:var(--fv-text-primary, #333333)}.fv-required-asterisk{color:var(--fv-error-color, #dc3545);margin-left:4px;font-weight:700}.fv-radio-options{display:flex;flex-direction:column;gap:12px}.fv-radio-label{display:flex;align-items:center;cursor:pointer;-webkit-user-select:none;user-select:none;position:relative;padding-left:32px;min-height:24px}.fv-radio-input{position:absolute;opacity:0;cursor:pointer;height:0;width:0}.fv-radio-custom{position:absolute;left:0;top:0;height:20px;width:20px;background-color:var(--fv-background-default, #ffffff);border:2px solid var(--fv-border-default, #cccccc);border-radius:50%;transition:all .2s}.fv-radio-label:hover .fv-radio-custom{border-color:var(--fv-border-hover, #999999)}.fv-radio-input:checked~.fv-radio-custom{border-color:var(--fv-border-focus, #667eea)}.fv-radio-custom:after{content:\"\";position:absolute;display:none;top:4px;left:4px;width:8px;height:8px;border-radius:50%;background:var(--fv-border-focus, #667eea)}.fv-radio-input:checked~.fv-radio-custom:after{display:block}.fv-radio-disabled{opacity:.6;cursor:not-allowed}.fv-radio-disabled .fv-radio-custom{background-color:var(--fv-background-disabled, #f5f5f5)}.fv-radio-text{font-size:14px;color:var(--fv-text-primary, #333333)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: ReactiveFormsModule }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: FvRadioGroupComponent, isStandalone: true, selector: "fv-radio-group", inputs: { label: "label", control: "control", options: "options", disabled: "disabled", required: "required", name: "name" }, outputs: { valueChange: "valueChange" }, ngImport: i0, template: "<div class=\"fv-radio-group-container\">\r\n  <label *ngIf=\"label\" class=\"fv-group-label\">\r\n    {{ label }}\r\n    <span *ngIf=\"required\" class=\"fv-required-asterisk\">*</span>\r\n  </label>\r\n  \r\n  <div class=\"fv-radio-options\">\r\n    <label \r\n      *ngFor=\"let option of options\" \r\n      class=\"fv-radio-label\"\r\n      [class.fv-radio-disabled]=\"disabled || option.disabled\">\r\n      <input\r\n        type=\"radio\"\r\n        [name]=\"name\"\r\n        [value]=\"option.value\"\r\n        [checked]=\"isSelected(option.value)\"\r\n        [disabled]=\"disabled || option.disabled\"\r\n        (change)=\"onChange(option.value)\"\r\n        class=\"fv-radio-input\"\r\n      />\r\n      <span class=\"fv-radio-custom\"></span>\r\n      <span class=\"fv-radio-text\">{{ option.label }}</span>\r\n    </label>\r\n  </div>\r\n</div>", styles: [".fv-radio-group-container{margin-bottom:16px}.fv-group-label{display:block;margin-bottom:10px;font-size:14px;font-weight:500;color:var(--fv-text-primary, #333333)}.fv-required-asterisk{color:var(--fv-error-color, #dc3545);margin-left:4px;font-weight:700}.fv-radio-options{display:flex;flex-direction:column;gap:12px}.fv-radio-label{display:flex;align-items:center;cursor:pointer;-webkit-user-select:none;user-select:none;position:relative;padding-left:32px;min-height:24px}.fv-radio-input{position:absolute;opacity:0;cursor:pointer;height:0;width:0}.fv-radio-custom{position:absolute;left:0;top:0;height:20px;width:20px;background-color:var(--fv-background-default, #ffffff);border:2px solid var(--fv-border-default, #cccccc);border-radius:50%;transition:all .2s}.fv-radio-label:hover .fv-radio-custom{border-color:var(--fv-border-hover, #999999)}.fv-radio-input:checked~.fv-radio-custom{border-color:var(--fv-border-focus, #667eea)}.fv-radio-custom:after{content:\"\";position:absolute;display:none;top:4px;left:4px;width:13px;height:13px;border-radius:50%;background:var(--fv-border-focus, #667eea)}.fv-radio-input:checked~.fv-radio-custom:after{display:block}.fv-radio-disabled{opacity:.6;cursor:not-allowed}.fv-radio-disabled .fv-radio-custom{background-color:var(--fv-background-disabled, #f5f5f5)}.fv-radio-text{font-size:14px;color:var(--fv-text-primary, #333333)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: ReactiveFormsModule }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: FvRadioGroupComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'fv-radio-group', standalone: true, imports: [CommonModule, ReactiveFormsModule], template: "<div class=\"fv-radio-group-container\">\r\n  <label *ngIf=\"label\" class=\"fv-group-label\">\r\n    {{ label }}\r\n    <span *ngIf=\"required\" class=\"fv-required-asterisk\">*</span>\r\n  </label>\r\n  \r\n  <div class=\"fv-radio-options\">\r\n    <label \r\n      *ngFor=\"let option of options\" \r\n      class=\"fv-radio-label\"\r\n      [class.fv-radio-disabled]=\"disabled || option.disabled\">\r\n      <input\r\n        type=\"radio\"\r\n        [name]=\"name\"\r\n        [value]=\"option.value\"\r\n        [checked]=\"isSelected(option.value)\"\r\n        [disabled]=\"disabled || option.disabled\"\r\n        (change)=\"onChange(option.value)\"\r\n        class=\"fv-radio-input\"\r\n      />\r\n      <span class=\"fv-radio-custom\"></span>\r\n      <span class=\"fv-radio-text\">{{ option.label }}</span>\r\n    </label>\r\n  </div>\r\n</div>", styles: [".fv-radio-group-container{margin-bottom:16px}.fv-group-label{display:block;margin-bottom:10px;font-size:14px;font-weight:500;color:var(--fv-text-primary, #333333)}.fv-required-asterisk{color:var(--fv-error-color, #dc3545);margin-left:4px;font-weight:700}.fv-radio-options{display:flex;flex-direction:column;gap:12px}.fv-radio-label{display:flex;align-items:center;cursor:pointer;-webkit-user-select:none;user-select:none;position:relative;padding-left:32px;min-height:24px}.fv-radio-input{position:absolute;opacity:0;cursor:pointer;height:0;width:0}.fv-radio-custom{position:absolute;left:0;top:0;height:20px;width:20px;background-color:var(--fv-background-default, #ffffff);border:2px solid var(--fv-border-default, #cccccc);border-radius:50%;transition:all .2s}.fv-radio-label:hover .fv-radio-custom{border-color:var(--fv-border-hover, #999999)}.fv-radio-input:checked~.fv-radio-custom{border-color:var(--fv-border-focus, #667eea)}.fv-radio-custom:after{content:\"\";position:absolute;display:none;top:4px;left:4px;width:8px;height:8px;border-radius:50%;background:var(--fv-border-focus, #667eea)}.fv-radio-input:checked~.fv-radio-custom:after{display:block}.fv-radio-disabled{opacity:.6;cursor:not-allowed}.fv-radio-disabled .fv-radio-custom{background-color:var(--fv-background-disabled, #f5f5f5)}.fv-radio-text{font-size:14px;color:var(--fv-text-primary, #333333)}\n"] }]
+            args: [{ selector: 'fv-radio-group', standalone: true, imports: [CommonModule, ReactiveFormsModule], template: "<div class=\"fv-radio-group-container\">\r\n  <label *ngIf=\"label\" class=\"fv-group-label\">\r\n    {{ label }}\r\n    <span *ngIf=\"required\" class=\"fv-required-asterisk\">*</span>\r\n  </label>\r\n  \r\n  <div class=\"fv-radio-options\">\r\n    <label \r\n      *ngFor=\"let option of options\" \r\n      class=\"fv-radio-label\"\r\n      [class.fv-radio-disabled]=\"disabled || option.disabled\">\r\n      <input\r\n        type=\"radio\"\r\n        [name]=\"name\"\r\n        [value]=\"option.value\"\r\n        [checked]=\"isSelected(option.value)\"\r\n        [disabled]=\"disabled || option.disabled\"\r\n        (change)=\"onChange(option.value)\"\r\n        class=\"fv-radio-input\"\r\n      />\r\n      <span class=\"fv-radio-custom\"></span>\r\n      <span class=\"fv-radio-text\">{{ option.label }}</span>\r\n    </label>\r\n  </div>\r\n</div>", styles: [".fv-radio-group-container{margin-bottom:16px}.fv-group-label{display:block;margin-bottom:10px;font-size:14px;font-weight:500;color:var(--fv-text-primary, #333333)}.fv-required-asterisk{color:var(--fv-error-color, #dc3545);margin-left:4px;font-weight:700}.fv-radio-options{display:flex;flex-direction:column;gap:12px}.fv-radio-label{display:flex;align-items:center;cursor:pointer;-webkit-user-select:none;user-select:none;position:relative;padding-left:32px;min-height:24px}.fv-radio-input{position:absolute;opacity:0;cursor:pointer;height:0;width:0}.fv-radio-custom{position:absolute;left:0;top:0;height:20px;width:20px;background-color:var(--fv-background-default, #ffffff);border:2px solid var(--fv-border-default, #cccccc);border-radius:50%;transition:all .2s}.fv-radio-label:hover .fv-radio-custom{border-color:var(--fv-border-hover, #999999)}.fv-radio-input:checked~.fv-radio-custom{border-color:var(--fv-border-focus, #667eea)}.fv-radio-custom:after{content:\"\";position:absolute;display:none;top:4px;left:4px;width:13px;height:13px;border-radius:50%;background:var(--fv-border-focus, #667eea)}.fv-radio-input:checked~.fv-radio-custom:after{display:block}.fv-radio-disabled{opacity:.6;cursor:not-allowed}.fv-radio-disabled .fv-radio-custom{background-color:var(--fv-background-disabled, #f5f5f5)}.fv-radio-text{font-size:14px;color:var(--fv-text-primary, #333333)}\n"] }]
         }], propDecorators: { label: [{
                 type: Input
             }], control: [{
@@ -516,6 +543,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
             }] } });
 
 class FvDropdownComponent {
+    el;
     label = '';
     placeholder = 'Select an option';
     options = [];
@@ -525,14 +553,21 @@ class FvDropdownComponent {
     valueChange = new EventEmitter();
     blur = new EventEmitter();
     focus = new EventEmitter();
+    searchInput;
     errorMessage = null;
     isOpen = false;
     subscription;
+    searchControl = new FormControl('');
+    filteredOptions = [];
+    constructor(el) {
+        this.el = el;
+    }
     ngOnInit() {
         if (!this.control) {
             console.error('FvDropdown: control is required');
             return;
         }
+        this.filteredOptions = this.options;
         if (!this.schema) {
             console.warn('FvDropdown: schema is not provided, validation will be skipped');
             return;
@@ -541,15 +576,48 @@ class FvDropdownComponent {
         this.subscription = this.control.valueChanges.subscribe((value) => {
             this.validateValue(value);
             this.valueChange.emit(value);
+            // Sync search text
+            const selected = this.options.find(opt => opt.value === value);
+            if (selected) {
+                this.searchControl.setValue(selected.label, { emitEvent: false });
+            }
+            else if (!value) {
+                this.searchControl.setValue('', { emitEvent: false });
+            }
+        });
+        // Search Control Changes
+        this.searchControl.valueChanges.subscribe(term => {
+            this.filterOptions(term || '');
         });
         // Validate initial 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 });
+            }
         }
     }
     ngOnDestroy() {
         this.subscription?.unsubscribe();
     }
+    ngOnChanges(changes) {
+        if (changes['options'] && changes['options'].currentValue) {
+            this.filteredOptions = this.options;
+            // Re-filter if search text exists
+            if (this.searchControl.value) {
+                this.filterOptions(this.searchControl.value);
+            }
+        }
+        if (changes['disabled']) {
+            if (this.disabled) {
+                this.searchControl.disable({ emitEvent: false });
+            }
+            else {
+                this.searchControl.enable({ emitEvent: false });
+            }
+        }
+    }
     validateValue(value) {
         if (!this.schema)
             return;
@@ -562,28 +630,79 @@ class FvDropdownComponent {
             this.control.setErrors(null);
         }
     }
+    filterOptions(term) {
+        if (!term) {
+            this.filteredOptions = this.options;
+            return;
+        }
+        const lower = term.toLowerCase();
+        this.filteredOptions = this.options.filter(opt => opt.label.toLowerCase().includes(lower));
+    }
     toggleDropdown() {
         if (!this.disabled) {
-            this.isOpen = !this.isOpen;
-            if (this.isOpen) {
-                this.focus.emit();
+            if (!this.isOpen) {
+                this.openDropdown();
             }
+            else {
+                this.closeDropdown();
+            }
+        }
+    }
+    openDropdown() {
+        if (!this.disabled) {
+            this.isOpen = true;
+            this.focus.emit();
+            // Filter based on current text, do not reset blindly
+            this.filterOptions(this.searchControl.value || '');
+        }
+    }
+    onContainerClick(event) {
+        if (this.disabled)
+            return;
+        // If click is on the arrow or input, let them handle it.
+        // But if on the padding of div, focus input.
+        const target = event.target;
+        if (!target.classList.contains('fv-dropdown-input') && !target.classList.contains('fv-dropdown-arrow')) {
+            this.searchInput.nativeElement.focus();
+            if (!this.isOpen)
+                this.openDropdown();
+        }
+    }
+    closeDropdown() {
+        this.isOpen = false;
+        // Restore label
+        const selected = this.options.find(opt => opt.value === this.control.value);
+        if (selected) {
+            this.searchControl.setValue(selected.label, { emitEvent: false });
+        }
+        else {
+            if (!this.control.value)
+                this.searchControl.setValue('', { emitEvent: false });
         }
     }
     selectOption(option) {
         this.control.setValue(option.value);
+        this.searchControl.setValue(option.label, { emitEvent: false });
         this.isOpen = false;
+        this.searchInput.nativeElement.blur(); // Remove focus from input
         this.blur.emit();
     }
     onBlur() {
-        // Close dropdown after a small delay to allow click events to fire
-        setTimeout(() => {
-            this.isOpen = false;
-            if (this.control && this.schema) {
-                this.validateValue(this.control.value);
+        // Validation handled on closeDropdown
+    }
+    onClickOutside(event) {
+        if (!this.el.nativeElement.contains(event.target)) {
+            if (this.isOpen) {
+                this.closeDropdown();
+                if (this.control && this.schema) {
+                    this.validateValue(this.control.value);
+                }
+                this.blur.emit();
             }
-            this.blur.emit();
-        }, 200);
+        }
+    }
+    onInputFocus() {
+        this.openDropdown();
     }
     isRequired() {
         return (this.schema?.rules?.some((r) => r.name === 'required' && r.params?.['enabled']) || false);
@@ -604,13 +723,13 @@ class FvDropdownComponent {
     isSelected(option) {
         return option.value === this.control?.value;
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: FvDropdownComponent, deps: [], 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" }, 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)=\"toggleDropdown()\" (blur)=\"onBlur()\" tabindex=\"0\">\r\n            <span class=\"fv-dropdown-selected\" [class.fv-dropdown-placeholder]=\"!control.value\">\r\n                {{ getSelectedLabel() }}\r\n            </span>\r\n            <span class=\"fv-dropdown-arrow\" [class.arrow-up]=\"isOpen\">\u25BC</span>\r\n        </div>\r\n\r\n        <div *ngIf=\"isOpen\" class=\"fv-dropdown-options\">\r\n            <div *ngFor=\"let option of options\" class=\"fv-dropdown-option\"\r\n                [class.fv-dropdown-option-selected]=\"isSelected(option)\" (click)=\"selectOption(option)\">\r\n                {{ option.label }}\r\n            </div>\r\n        </div>\r\n    </div>\r\n\r\n    <div *ngIf=\"errorMessage\" class=\"fv-dropdown-error-message\">\r\n        \u26A0 {{ getErrorMessage() }}\r\n    </div>\r\n</div>", styles: [".fv-dropdown-container{display:flex;flex-direction:column;margin-bottom:16px;width:100%}.fv-dropdown-label{font-size:14px;font-weight:500;color:#333;margin-bottom:6px;display:block}.required-asterisk{color:#dc3545;font-weight:700}.fv-dropdown-wrapper{position:relative}.fv-dropdown{padding:10px;border:1px solid #cccccc;border-radius:4px;background-color:#fff;cursor:pointer;display:flex;justify-content:space-between;align-items:center;transition:border-color .2s;outline:none}.fv-dropdown:hover:not(.fv-dropdown-disabled){border-color:#007bff}.fv-dropdown:focus:not(.fv-dropdown-disabled){border-color:#007bff;box-shadow:0 0 0 2px #007bff1a}.fv-dropdown-error{border-color:#dc3545!important}.fv-dropdown-disabled{background-color:#f5f5f5;opacity:.6;cursor:not-allowed}.fv-dropdown-open{border-color:#007bff}.fv-dropdown-selected{font-size:14px;color:#333;flex:1}.fv-dropdown-placeholder{color:#999}.fv-dropdown-arrow{font-size:10px;color:#666;margin-left:8px;transition:transform .2s}.arrow-up{transform:rotate(180deg)}.fv-dropdown-options{position:absolute;top:100%;left:0;right:0;margin-top:4px;background-color:#fff;border:1px solid #cccccc;border-radius:4px;max-height:300px;overflow-y:auto;z-index:1000;box-shadow:0 4px 6px #0000001a}.fv-dropdown-option{padding:12px 16px;font-size:14px;color:#333;cursor:pointer;transition:background-color .2s;border-bottom:1px solid #eeeeee}.fv-dropdown-option:last-child{border-bottom:none}.fv-dropdown-option:hover{background-color:#f8f9fa}.fv-dropdown-option-selected{background-color:#e7f3ff;color:#007bff;font-weight:600}.fv-dropdown-error-message{margin-top:4px;font-size:12px;color:#dc3545}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: ReactiveFormsModule }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: FvDropdownComponent, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: FvDropdownComponent, isStandalone: true, selector: "fv-dropdown", inputs: { label: "label", placeholder: "placeholder", options: "options", schema: "schema", control: "control", disabled: "disabled" }, outputs: { valueChange: "valueChange", blur: "blur", focus: "focus" }, host: { listeners: { "document:click": "onClickOutside($event)" } }, viewQueries: [{ propertyName: "searchInput", first: true, predicate: ["searchInput"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div class=\"fv-dropdown-container\">\r\n    <label *ngIf=\"label\" class=\"fv-dropdown-label\">\r\n        {{ label }}\r\n        <span *ngIf=\"isRequired()\" class=\"required-asterisk\">*</span>\r\n    </label>\r\n\r\n    <div class=\"fv-dropdown-wrapper\">\r\n        <div class=\"fv-dropdown\" [class.fv-dropdown-error]=\"errorMessage\" [class.fv-dropdown-disabled]=\"disabled\"\r\n            [class.fv-dropdown-open]=\"isOpen\" (click)=\"onContainerClick($event)\">\r\n            <input #searchInput type=\"text\" class=\"fv-dropdown-input\" [formControl]=\"searchControl\"\r\n                [placeholder]=\"placeholder\" (focus)=\"onInputFocus()\" (click)=\"$event.stopPropagation()\"\r\n                autocomplete=\"off\">\r\n            <span class=\"fv-dropdown-arrow\" [class.arrow-up]=\"isOpen\" (click)=\"toggleDropdown()\">\u25BC</span>\r\n        </div>\r\n\r\n        <div *ngIf=\"isOpen\" class=\"fv-dropdown-options\">\r\n            <div *ngFor=\"let option of filteredOptions\" class=\"fv-dropdown-option\"\r\n                [class.fv-dropdown-option-selected]=\"isSelected(option)\" (mousedown)=\"$event.preventDefault()\"\r\n                (click)=\"selectOption(option)\">\r\n                {{ option.label }}\r\n            </div>\r\n            <div *ngIf=\"filteredOptions.length === 0\" class=\"fv-dropdown-option fv-no-results\">\r\n                No options found\r\n            </div>\r\n        </div>\r\n    </div>\r\n\r\n    <div *ngIf=\"errorMessage\" class=\"fv-dropdown-error-message\">\r\n        \u26A0 {{ getErrorMessage() }}\r\n    </div>\r\n</div>", styles: [".fv-dropdown-container{display:flex;flex-direction:column;margin-bottom:16px;width:100%}.fv-dropdown-label{font-size:14px;font-weight:500;color:#333;margin-bottom:6px;display:block}.required-asterisk{color:#dc3545;font-weight:700}.fv-dropdown-wrapper{position:relative}.fv-dropdown{padding:10px;border:1px solid #cccccc;border-radius:4px;background-color:#fff;cursor:pointer;display:flex;justify-content:space-between;align-items:center;transition:border-color .2s;outline:none}.fv-dropdown:hover:not(.fv-dropdown-disabled){border-color:#007bff}.fv-dropdown:focus:not(.fv-dropdown-disabled){border-color:#007bff;box-shadow:0 0 0 2px #007bff1a}.fv-dropdown-error{border-color:#dc3545!important}.fv-dropdown-disabled{background-color:#f5f5f5;opacity:.6;cursor:not-allowed}.fv-dropdown-open{border-color:#007bff}.fv-dropdown-selected{font-size:14px;color:#333;flex:1}.fv-dropdown-placeholder{color:#999}.fv-dropdown-arrow{font-size:10px;color:#666;margin-left:8px;margin-right:5px;transition:transform .2s}.arrow-up{transform:rotate(180deg)}.fv-dropdown-options{position:absolute;top:100%;left:0;right:0;margin-top:4px;background-color:#fff;border:1px solid #cccccc;border-radius:4px;max-height:300px;overflow-y:auto;z-index:1000;box-shadow:0 4px 6px #0000001a}.fv-dropdown-option{padding:12px 16px;font-size:14px;color:#333;cursor:pointer;transition:background-color .2s;border-bottom:1px solid #eeeeee}.fv-dropdown-option:last-child{border-bottom:none}.fv-dropdown-option:hover{background-color:#f8f9fa}.fv-dropdown-option-selected{background-color:#e7f3ff;color:#007bff;font-weight:600}.fv-dropdown-error-message{margin-top:4px;font-size:12px;color:#dc3545}.fv-dropdown-input{border:none;outline:none;background:transparent;flex:1;width:auto;font-size:14px;color:#333;padding:0;margin:0;cursor:text;z-index:2;position:relative;pointer-events:auto;height:100%}.fv-dropdown-input::placeholder{color:#999}.fv-no-results{color:#999;font-style:italic;cursor:default;text-align:center}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }] });
 }
 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)=\"toggleDropdown()\" (blur)=\"onBlur()\" tabindex=\"0\">\r\n            <span class=\"fv-dropdown-selected\" [class.fv-dropdown-placeholder]=\"!control.value\">\r\n                {{ getSelectedLabel() }}\r\n            </span>\r\n            <span class=\"fv-dropdown-arrow\" [class.arrow-up]=\"isOpen\">\u25BC</span>\r\n        </div>\r\n\r\n        <div *ngIf=\"isOpen\" class=\"fv-dropdown-options\">\r\n            <div *ngFor=\"let option of options\" class=\"fv-dropdown-option\"\r\n                [class.fv-dropdown-option-selected]=\"isSelected(option)\" (click)=\"selectOption(option)\">\r\n                {{ option.label }}\r\n            </div>\r\n        </div>\r\n    </div>\r\n\r\n    <div *ngIf=\"errorMessage\" class=\"fv-dropdown-error-message\">\r\n        \u26A0 {{ getErrorMessage() }}\r\n    </div>\r\n</div>", styles: [".fv-dropdown-container{display:flex;flex-direction:column;margin-bottom:16px;width:100%}.fv-dropdown-label{font-size:14px;font-weight:500;color:#333;margin-bottom:6px;display:block}.required-asterisk{color:#dc3545;font-weight:700}.fv-dropdown-wrapper{position:relative}.fv-dropdown{padding:10px;border:1px solid #cccccc;border-radius:4px;background-color:#fff;cursor:pointer;display:flex;justify-content:space-between;align-items:center;transition:border-color .2s;outline:none}.fv-dropdown:hover:not(.fv-dropdown-disabled){border-color:#007bff}.fv-dropdown:focus:not(.fv-dropdown-disabled){border-color:#007bff;box-shadow:0 0 0 2px #007bff1a}.fv-dropdown-error{border-color:#dc3545!important}.fv-dropdown-disabled{background-color:#f5f5f5;opacity:.6;cursor:not-allowed}.fv-dropdown-open{border-color:#007bff}.fv-dropdown-selected{font-size:14px;color:#333;flex:1}.fv-dropdown-placeholder{color:#999}.fv-dropdown-arrow{font-size:10px;color:#666;margin-left:8px;transition:transform .2s}.arrow-up{transform:rotate(180deg)}.fv-dropdown-options{position:absolute;top:100%;left:0;right:0;margin-top:4px;background-color:#fff;border:1px solid #cccccc;border-radius:4px;max-height:300px;overflow-y:auto;z-index:1000;box-shadow:0 4px 6px #0000001a}.fv-dropdown-option{padding:12px 16px;font-size:14px;color:#333;cursor:pointer;transition:background-color .2s;border-bottom:1px solid #eeeeee}.fv-dropdown-option:last-child{border-bottom:none}.fv-dropdown-option:hover{background-color:#f8f9fa}.fv-dropdown-option-selected{background-color:#e7f3ff;color:#007bff;font-weight:600}.fv-dropdown-error-message{margin-top:4px;font-size:12px;color:#dc3545}\n"] }]
-        }], propDecorators: { label: [{
+            args: [{ standalone: true, imports: [CommonModule, ReactiveFormsModule], selector: 'fv-dropdown', template: "<div class=\"fv-dropdown-container\">\r\n    <label *ngIf=\"label\" class=\"fv-dropdown-label\">\r\n        {{ label }}\r\n        <span *ngIf=\"isRequired()\" class=\"required-asterisk\">*</span>\r\n    </label>\r\n\r\n    <div class=\"fv-dropdown-wrapper\">\r\n        <div class=\"fv-dropdown\" [class.fv-dropdown-error]=\"errorMessage\" [class.fv-dropdown-disabled]=\"disabled\"\r\n            [class.fv-dropdown-open]=\"isOpen\" (click)=\"onContainerClick($event)\">\r\n            <input #searchInput type=\"text\" class=\"fv-dropdown-input\" [formControl]=\"searchControl\"\r\n                [placeholder]=\"placeholder\" (focus)=\"onInputFocus()\" (click)=\"$event.stopPropagation()\"\r\n                autocomplete=\"off\">\r\n            <span class=\"fv-dropdown-arrow\" [class.arrow-up]=\"isOpen\" (click)=\"toggleDropdown()\">\u25BC</span>\r\n        </div>\r\n\r\n        <div *ngIf=\"isOpen\" class=\"fv-dropdown-options\">\r\n            <div *ngFor=\"let option of filteredOptions\" class=\"fv-dropdown-option\"\r\n                [class.fv-dropdown-option-selected]=\"isSelected(option)\" (mousedown)=\"$event.preventDefault()\"\r\n                (click)=\"selectOption(option)\">\r\n                {{ option.label }}\r\n            </div>\r\n            <div *ngIf=\"filteredOptions.length === 0\" class=\"fv-dropdown-option fv-no-results\">\r\n                No options found\r\n            </div>\r\n        </div>\r\n    </div>\r\n\r\n    <div *ngIf=\"errorMessage\" class=\"fv-dropdown-error-message\">\r\n        \u26A0 {{ getErrorMessage() }}\r\n    </div>\r\n</div>", styles: [".fv-dropdown-container{display:flex;flex-direction:column;margin-bottom:16px;width:100%}.fv-dropdown-label{font-size:14px;font-weight:500;color:#333;margin-bottom:6px;display:block}.required-asterisk{color:#dc3545;font-weight:700}.fv-dropdown-wrapper{position:relative}.fv-dropdown{padding:10px;border:1px solid #cccccc;border-radius:4px;background-color:#fff;cursor:pointer;display:flex;justify-content:space-between;align-items:center;transition:border-color .2s;outline:none}.fv-dropdown:hover:not(.fv-dropdown-disabled){border-color:#007bff}.fv-dropdown:focus:not(.fv-dropdown-disabled){border-color:#007bff;box-shadow:0 0 0 2px #007bff1a}.fv-dropdown-error{border-color:#dc3545!important}.fv-dropdown-disabled{background-color:#f5f5f5;opacity:.6;cursor:not-allowed}.fv-dropdown-open{border-color:#007bff}.fv-dropdown-selected{font-size:14px;color:#333;flex:1}.fv-dropdown-placeholder{color:#999}.fv-dropdown-arrow{font-size:10px;color:#666;margin-left:8px;margin-right:5px;transition:transform .2s}.arrow-up{transform:rotate(180deg)}.fv-dropdown-options{position:absolute;top:100%;left:0;right:0;margin-top:4px;background-color:#fff;border:1px solid #cccccc;border-radius:4px;max-height:300px;overflow-y:auto;z-index:1000;box-shadow:0 4px 6px #0000001a}.fv-dropdown-option{padding:12px 16px;font-size:14px;color:#333;cursor:pointer;transition:background-color .2s;border-bottom:1px solid #eeeeee}.fv-dropdown-option:last-child{border-bottom:none}.fv-dropdown-option:hover{background-color:#f8f9fa}.fv-dropdown-option-selected{background-color:#e7f3ff;color:#007bff;font-weight:600}.fv-dropdown-error-message{margin-top:4px;font-size:12px;color:#dc3545}.fv-dropdown-input{border:none;outline:none;background:transparent;flex:1;width:auto;font-size:14px;color:#333;padding:0;margin:0;cursor:text;z-index:2;position:relative;pointer-events:auto;height:100%}.fv-dropdown-input::placeholder{color:#999}.fv-no-results{color:#999;font-style:italic;cursor:default;text-align:center}\n"] }]
+        }], ctorParameters: () => [{ type: i0.ElementRef }], propDecorators: { label: [{
                 type: Input
             }], placeholder: [{
                 type: Input
@@ -628,6 +747,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
                 type: Output
             }], focus: [{
                 type: Output
+            }], searchInput: [{
+                type: ViewChild,
+                args: ['searchInput']
+            }], onClickOutside: [{
+                type: HostListener,
+                args: ['document:click', ['$event']]
             }] } });
 
 class FvFileSelectorComponent {
@@ -1068,74 +1193,2353 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
                 args: ['editor']
             }] } });
 
-class FvControlsModule {
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: FvControlsModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.2.14", ngImport: i0, type: FvControlsModule, imports: [CommonModule,
-            ReactiveFormsModule,
-            FvEntryFieldComponent,
-            FvDateFieldComponent,
-            FvMonthYearFieldComponent,
-            FvNumberFieldComponent,
-            FvCheckboxComponent,
-            FvRadioGroupComponent,
-            FvDropdownComponent,
-            FvFileSelectorComponent,
-            FvImageSelectorComponent,
-            FvRichTextEditorComponent], exports: [FvEntryFieldComponent,
-            FvDateFieldComponent,
-            FvMonthYearFieldComponent,
-            FvNumberFieldComponent,
-            FvCheckboxComponent,
-            FvRadioGroupComponent,
-            FvDropdownComponent,
-            FvFileSelectorComponent,
-            FvImageSelectorComponent,
-            FvRichTextEditorComponent] });
-    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: FvControlsModule, imports: [CommonModule,
-            ReactiveFormsModule,
-            FvEntryFieldComponent,
-            FvDateFieldComponent,
-            FvMonthYearFieldComponent,
-            FvNumberFieldComponent,
-            FvCheckboxComponent,
-            FvRadioGroupComponent,
-            FvDropdownComponent,
-            FvFileSelectorComponent,
-            FvImageSelectorComponent,
-            FvRichTextEditorComponent] });
+class FvNameCodeComponent {
+    label = '';
+    placeholder = '';
+    options = [];
+    schema;
+    control; // Alternative to formControlName
+    disabled = false;
+    selectionChange = new EventEmitter();
+    searchControl = new FormControl('');
+    filteredOptions = [];
+    isOpen = false;
+    // Implementation of ControlValueAccessor
+    onChange = () => { };
+    onTouched = () => { };
+    value = null;
+    ngOnInit() {
+        this.filteredOptions = this.options;
+        // Setup search filter
+        this.searchControl.valueChanges.subscribe(term => {
+            this.filterOptions(term || '');
+            if (!term && this.value) {
+                // If user clears search but had a value, we might want to keep the value or clear it?
+                // Usually search box is separate from value display. 
+                // But here the input acts as both display and search.
+                // If user types, value is technically unset until selection?
+                // Let's assume typing clears the current selection if it doesn't match?
+                // For now, simple behavior: typing filters list. Selection sets value and display text.
+            }
+        });
+        // If control is passed directly
+        if (this.control) {
+            if (this.control.value) {
+                this.writeValue(this.control.value);
+            }
+            this.control.valueChanges.subscribe(val => {
+                this.writeValue(val);
+            });
+            // Sync disabled state
+            if (this.control.disabled !== this.disabled) {
+                this.setDisabledState(this.control.disabled);
+            }
+        }
+    }
+    filterOptions(term) {
+        if (!term) {
+            this.filteredOptions = this.options;
+            return;
+        }
+        const lowerTerm = term.toLowerCase();
+        this.filteredOptions = this.options.filter(opt => opt.code.toLowerCase().includes(lowerTerm) ||
+            opt.name.toLowerCase().includes(lowerTerm));
+    }
+    openDropdown() {
+        if (!this.disabled) {
+            this.isOpen = true;
+            this.filterOptions(this.searchControl.value || '');
+        }
+    }
+    onBlur() {
+        this.onTouched();
+    }
+    closeDropdown() {
+        this.isOpen = false;
+        // Restore display text if not selected?
+        const selectedOption = this.options.find(o => o.value === this.value);
+        if (selectedOption) {
+            this.searchControl.setValue(`${selectedOption.code} - ${selectedOption.name}`, { emitEvent: false });
+        }
+        else {
+            // If no valid value, clear text? or keep partial text?
+            // Usually better to clear if no selection made
+            if (!this.value) {
+                this.searchControl.setValue('', { emitEvent: false });
+            }
+        }
+        this.onTouched();
+    }
+    selectOption(option) {
+        this.value = option.value;
+        this.onChange(this.value);
+        this.searchControl.setValue(`${option.code} - ${option.name}`, { emitEvent: false });
+        this.selectionChange.emit(this.value);
+        this.isOpen = false;
+    }
+    writeValue(value) {
+        this.value = value;
+        const selectedOption = this.options.find(o => o.value === value);
+        if (selectedOption) {
+            this.searchControl.setValue(`${selectedOption.code} - ${selectedOption.name}`, { emitEvent: false });
+        }
+        else {
+            this.searchControl.setValue('', { emitEvent: false });
+        }
+    }
+    registerOnChange(fn) {
+        this.onChange = fn;
+    }
+    registerOnTouched(fn) {
+        this.onTouched = fn;
+    }
+    setDisabledState(isDisabled) {
+        this.disabled = isDisabled;
+        if (isDisabled) {
+            this.searchControl.disable({ emitEvent: false });
+        }
+        else {
+            this.searchControl.enable({ emitEvent: false });
+        }
+    }
+    isInvalid() {
+        if (this.control) {
+            return this.control.invalid && (this.control.dirty || this.control.touched);
+        }
+        return false;
+    }
+    isRequired() {
+        return this.schema?.rules?.some(r => r.name === 'required') || false;
+    }
+    getErrorMessage() {
+        if (!this.control || !this.control.errors || !this.schema)
+            return '';
+        for (const errorKey of this.schema.errorPriority) {
+            if (this.control.hasError(errorKey)) { // This matches how typical validators set errors (e.g. required: true)
+                // However, our validation engine might set explicit keys. 
+                // Standard angular validators use 'required', 'minlength', etc.
+                // Our schema maps 'required' -> 'ERR_REQUIRED'.
+                // We need to fetch the message based on rules.
+                // For simplicity in this demo, return generic or mapped string.
+                const rule = this.schema.rules.find(r => r.name === (errorKey === 'required' ? 'required' : errorKey)); // simplified logic
+                if (rule)
+                    return this.getReadableError(rule.errorKey);
+            }
+        }
+        // Fallback for standard angular errors
+        if (this.control.hasError('required'))
+            return 'This field is required';
+        return 'Invalid value';
+    }
+    getReadableError(key) {
+        const map = {
+            'ERR_REQUIRED': 'This field is required',
+            'ERR_MIN_LENGTH': 'Value is too short',
+            // Add others as needed
+        };
+        return map[key] || 'Invalid value';
+    }
+    onClickOutside(event) {
+        const element = event.target;
+        // Check if click is inside component
+        const clickedInside = event.target.closest('.fv-name-code-container');
+        if (!clickedInside) {
+            this.closeDropdown();
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: FvNameCodeComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: FvNameCodeComponent, isStandalone: true, selector: "fv-name-code", inputs: { label: "label", placeholder: "placeholder", options: "options", schema: "schema", control: "control", disabled: "disabled" }, outputs: { selectionChange: "selectionChange" }, host: { listeners: { "document:click": "onClickOutside($event)" } }, providers: [
+            {
+                provide: NG_VALUE_ACCESSOR,
+                useExisting: forwardRef(() => FvNameCodeComponent),
+                multi: true
+            }
+        ], ngImport: i0, template: `
+    <div class="fv-name-code-container" (clickOutside)="closeDropdown()">
+      <label *ngIf="label" class="fv-label">
+        {{ label }}
+        <span *ngIf="isRequired()" class="required-asterisk">*</span>
+      </label>
+
+      <div class="search-box-wrapper">
+        <input
+          type="text"
+          class="fv-input"
+          [placeholder]="(searchControl.value || isOpen) ? '' : (placeholder || 'Search by Code or Name')"
+          [formControl]="searchControl"
+          (focus)="openDropdown()"
+          (blur)="onBlur()"
+          [class.error]="isInvalid()"
+          [attr.disabled]="disabled ? true : null"
+        />
+      </div>
+
+      <div class="dropdown-list" *ngIf="isOpen && !disabled">
+        <div 
+          class="dropdown-item" 
+          *ngFor="let option of filteredOptions"
+          (click)="selectOption(option)"
+        >
+          <span class="code">{{ option.code }}</span>
+          <span class="name">{{ option.name }}</span>
+        </div>
+        <div class="no-results" *ngIf="filteredOptions.length === 0">
+          No results found
+        </div>
+      </div>
+
+      <div *ngIf="isInvalid()" class="error-message">
+        {{ getErrorMessage() }}
+      </div>
+    </div>
+  `, isInline: true, styles: ["@import\"https://fonts.googleapis.com/icon?family=Material+Icons\";@import\"https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap\";*{font-family:Poppins,sans-serif}.fv-name-code-container{position:relative;width:100%;margin-bottom:15px}.fv-label{display:block;font-size:14px;font-weight:600;color:#151d48;margin-bottom:6px}.required-asterisk{color:#e74c3c;margin-left:2px}.search-box-wrapper{position:relative;display:flex;align-items:center}.fv-input{width:100%;padding:10px 12px;border:1px solid #8CBBA8;border-radius:8px;font-size:14px;color:#303030;outline:none;transition:all .2s;background-color:#fff}.fv-input:focus{border-color:#006aff;box-shadow:0 0 0 2px #006aff1a}.fv-input.error{border-color:#e74c3c}.fv-input:disabled{background-color:#f5f5f5;cursor:not-allowed}.dropdown-list{position:absolute;top:100%;left:0;right:0;background:#fff;border:1px solid #ddd;border-radius:8px;margin-top:4px;max-height:200px;overflow-y:auto;z-index:1000;box-shadow:0 4px 6px #0000001a}.dropdown-item{padding:10px 12px;display:flex;justify-content:space-between;cursor:pointer;border-bottom:1px solid #f0f0f0}.dropdown-item:last-child{border-bottom:none}.dropdown-item:hover{background-color:#f9f9f9}.code{color:#0056b3;font-weight:600;font-size:14px}.name{color:#333;font-size:14px}.no-results{padding:10px;color:#999;text-align:center;font-size:13px}.error-message{color:#e74c3c;font-size:12px;margin-top:4px;display:flex;align-items:center;gap:4px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: FvControlsModule, decorators: [{
-            type: NgModule,
-            args: [{
-                    declarations: [],
-                    imports: [
-                        CommonModule,
-                        ReactiveFormsModule,
-                        FvEntryFieldComponent,
-                        FvDateFieldComponent,
-                        FvMonthYearFieldComponent,
-                        FvNumberFieldComponent,
-                        FvCheckboxComponent,
-                        FvRadioGroupComponent,
-                        FvDropdownComponent,
-                        FvFileSelectorComponent,
-                        FvImageSelectorComponent,
-                        FvRichTextEditorComponent,
-                    ],
-                    exports: [
-                        FvEntryFieldComponent,
-                        FvDateFieldComponent,
-                        FvMonthYearFieldComponent,
-                        FvNumberFieldComponent,
-                        FvCheckboxComponent,
-                        FvRadioGroupComponent,
-                        FvDropdownComponent,
-                        FvFileSelectorComponent,
-                        FvImageSelectorComponent,
-                        FvRichTextEditorComponent,
-                    ],
-                }]
-        }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: FvNameCodeComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'fv-name-code', standalone: true, imports: [CommonModule, ReactiveFormsModule], template: `
+    <div class="fv-name-code-container" (clickOutside)="closeDropdown()">
+      <label *ngIf="label" class="fv-label">
+        {{ label }}
+        <span *ngIf="isRequired()" class="required-asterisk">*</span>
+      </label>
+
+      <div class="search-box-wrapper">
+        <input
+          type="text"
+          class="fv-input"
+          [placeholder]="(searchControl.value || isOpen) ? '' : (placeholder || 'Search by Code or Name')"
+          [formControl]="searchControl"
+          (focus)="openDropdown()"
+          (blur)="onBlur()"
+          [class.error]="isInvalid()"
+          [attr.disabled]="disabled ? true : null"
+        />
+      </div>
+
+      <div class="dropdown-list" *ngIf="isOpen && !disabled">
+        <div 
+          class="dropdown-item" 
+          *ngFor="let option of filteredOptions"
+          (click)="selectOption(option)"
+        >
+          <span class="code">{{ option.code }}</span>
+          <span class="name">{{ option.name }}</span>
+        </div>
+        <div class="no-results" *ngIf="filteredOptions.length === 0">
+          No results found
+        </div>
+      </div>
+
+      <div *ngIf="isInvalid()" class="error-message">
+        {{ getErrorMessage() }}
+      </div>
+    </div>
+  `, providers: [
+                        {
+                            provide: NG_VALUE_ACCESSOR,
+                            useExisting: forwardRef(() => FvNameCodeComponent),
+                            multi: true
+                        }
+                    ], styles: ["@import\"https://fonts.googleapis.com/icon?family=Material+Icons\";@import\"https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap\";*{font-family:Poppins,sans-serif}.fv-name-code-container{position:relative;width:100%;margin-bottom:15px}.fv-label{display:block;font-size:14px;font-weight:600;color:#151d48;margin-bottom:6px}.required-asterisk{color:#e74c3c;margin-left:2px}.search-box-wrapper{position:relative;display:flex;align-items:center}.fv-input{width:100%;padding:10px 12px;border:1px solid #8CBBA8;border-radius:8px;font-size:14px;color:#303030;outline:none;transition:all .2s;background-color:#fff}.fv-input:focus{border-color:#006aff;box-shadow:0 0 0 2px #006aff1a}.fv-input.error{border-color:#e74c3c}.fv-input:disabled{background-color:#f5f5f5;cursor:not-allowed}.dropdown-list{position:absolute;top:100%;left:0;right:0;background:#fff;border:1px solid #ddd;border-radius:8px;margin-top:4px;max-height:200px;overflow-y:auto;z-index:1000;box-shadow:0 4px 6px #0000001a}.dropdown-item{padding:10px 12px;display:flex;justify-content:space-between;cursor:pointer;border-bottom:1px solid #f0f0f0}.dropdown-item:last-child{border-bottom:none}.dropdown-item:hover{background-color:#f9f9f9}.code{color:#0056b3;font-weight:600;font-size:14px}.name{color:#333;font-size:14px}.no-results{padding:10px;color:#999;text-align:center;font-size:13px}.error-message{color:#e74c3c;font-size:12px;margin-top:4px;display:flex;align-items:center;gap:4px}\n"] }]
+        }], propDecorators: { label: [{
+                type: Input
+            }], placeholder: [{
+                type: Input
+            }], options: [{
+                type: Input
+            }], schema: [{
+                type: Input
+            }], control: [{
+                type: Input
+            }], disabled: [{
+                type: Input
+            }], selectionChange: [{
+                type: Output
+            }], onClickOutside: [{
+                type: HostListener,
+                args: ['document:click', ['$event']]
+            }] } });
+
+class FvPhoneFieldComponent {
+    label = '';
+    control;
+    disabled = false;
+    schema;
+    blur = new EventEmitter();
+    focus = new EventEmitter();
+    countryCode = '+91';
+    countryCodes = [
+        '+1', '+7', '+20', '+27', '+30', '+31', '+32', '+33', '+34', '+36', '+39', '+40', '+41', '+43', '+44', '+45', '+46', '+47',
+        '+48', '+49', '+51', '+52', '+53', '+54', '+55', '+56', '+57', '+58', '+60', '+61', '+62', '+63', '+64', '+65', '+66',
+        '+81', '+82', '+84', '+86', '+90', '+91', '+92', '+93', '+94', '+95', '+98', '+212', '+213', '+216', '+218', '+220',
+        '+221', '+222', '+223', '+224', '+225', '+226', '+227', '+228', '+229', '+230', '+231', '+232', '+233', '+234', '+235',
+        '+236', '+237', '+238', '+239', '+240', '+241', '+242', '+243', '+244', '+245', '+246', '+248', '+249', '+250', '+251',
+        '+252', '+253', '+254', '+255', '+256', '+257', '+258', '+260', '+261', '+262', '+263', '+264', '+265', '+266', '+267',
+        '+268', '+269', '+290', '+291', '+297', '+298', '+299', '+350', '+351', '+352', '+353', '+354', '+355', '+356', '+357',
+        '+358', '+359', '+370', '+371', '+372', '+373', '+374', '+375', '+376', '+377', '+378', '+380', '+381', '+382', '+383',
+        '+385', '+386', '+387', '+389', '+420', '+421', '+423', '+500', '+501', '+502', '+503', '+504', '+505', '+506', '+507',
+        '+508', '+509', '+590', '+591', '+592', '+593', '+594', '+595', '+596', '+597', '+598', '+599', '+670', '+672', '+673',
+        '+674', '+675', '+676', '+677', '+678', '+679', '+680', '+681', '+682', '+683', '+685', '+686', '+687', '+688', '+689',
+        '+690', '+691', '+692', '+850', '+852', '+853', '+855', '+856', '+880', '+886', '+960', '+961', '+962', '+963', '+964',
+        '+965', '+966', '+967', '+968', '+970', '+971', '+972', '+973', '+974', '+975', '+976', '+977', '+992', '+993', '+994',
+        '+995', '+996', '+998'
+    ];
+    errorMessage = null;
+    subscription;
+    ngOnInit() {
+        if (!this.control) {
+            console.error('FvPhoneField: control is required');
+            return;
+        }
+        // Subscribe to value changes
+        this.subscription = this.control.valueChanges.subscribe((value) => {
+            this.validateValue(value);
+        });
+        if (this.control.value) {
+            this.validateValue(this.control.value);
+        }
+    }
+    ngOnDestroy() {
+        this.subscription?.unsubscribe();
+    }
+    onInput(event) {
+        const input = event.target;
+        let value = input.value;
+        // Allow only numbers
+        const numericValue = value.replace(/[^0-9]/g, '');
+        // Limit to 10 digits
+        const truncatedValue = numericValue.substring(0, 10);
+        if (value !== truncatedValue) {
+            input.value = truncatedValue;
+            this.control.setValue(truncatedValue);
+        }
+    }
+    validateValue(value) {
+        if (!this.schema)
+            return;
+        const result = Validator.validate(value, this.schema);
+        this.errorMessage = result.errorKey;
+        if (!result.isValid && result.errorKey) {
+            this.control.setErrors({ [result.errorKey]: true });
+        }
+        else {
+            this.control.setErrors(null);
+        }
+    }
+    onBlur() {
+        this.blur.emit();
+        if (this.control && this.schema) {
+            this.validateValue(this.control.value);
+        }
+    }
+    onFocus() {
+        this.focus.emit();
+    }
+    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: FvPhoneFieldComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: FvPhoneFieldComponent, isStandalone: true, selector: "fv-phone-field", inputs: { label: "label", control: "control", disabled: "disabled", schema: "schema" }, outputs: { blur: "blur", focus: "focus" }, ngImport: i0, template: "<div class=\"fv-phone-field-container\">\r\n    <label *ngIf=\"label\" class=\"fv-label\">\r\n        {{ label }}\r\n        <span *ngIf=\"isRequired()\" class=\"fv-required-asterisk\">*</span>\r\n    </label>\r\n\r\n    <div class=\"fv-phone-input-group\">\r\n        <div class=\"fv-select-wrapper\">\r\n            <select class=\"fv-country-code-select\" [disabled]=\"disabled\" [(ngModel)]=\"countryCode\">\r\n                <option *ngFor=\"let code of countryCodes\" [value]=\"code\">{{code}}</option>\r\n            </select>\r\n            <i class=\"material-icons fv-select-arrow\">arrow_drop_down</i>\r\n        </div>\r\n        <input type=\"text\" [formControl]=\"control\" [disabled]=\"disabled\" (input)=\"onInput($event)\" (blur)=\"onBlur()\"\r\n            (focus)=\"onFocus()\" placeholder=\"10 digit mobile number\" class=\"fv-input fv-phone-input\"\r\n            [class.fv-input-error]=\"errorMessage\" />\r\n    </div>\r\n\r\n    <span *ngIf=\"errorMessage\" class=\"fv-error-message\">\r\n        {{ errorMessage }}\r\n    </span>\r\n</div>", styles: [".fv-phone-field-container{display:flex;flex-direction:column;margin-bottom:16px;width:100%}.fv-label{font-size:14px;font-weight:500;color:#333;margin-bottom:6px}.fv-required-asterisk{color:#dc3545;margin-left:2px}.fv-phone-input-group{display:flex;align-items:center}.fv-country-code-select{padding:10px 24px 10px 8px;border:1px solid #cccccc;border-radius:4px 0 0 4px;background-color:#f8f9fa;border-right:none;outline:none;cursor:pointer;font-size:14px;color:#333;height:42px;width:60px;box-sizing:border-box;appearance:none;-webkit-appearance:none;-moz-appearance:none}.fv-select-wrapper{position:relative;display:flex;align-items:center}.fv-select-arrow{position:absolute;right:4px;top:50%;transform:translateY(-50%);pointer-events:none;color:#666;font-size:20px}.fv-phone-input{flex:1;border-radius:0 4px 4px 0!important}.fv-input{padding:10px;border:1px solid #cccccc;border-radius:4px;font-size:14px;outline:none;transition:border-color .2s;width:100%;box-sizing:border-box;height:42px}.fv-input:focus{border-color:#007bff;box-shadow:0 0 0 2px #007bff1a}.fv-input-error{border-color:#dc3545!important}.fv-error-message{margin-top:4px;font-size:12px;color:#dc3545}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i2.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: FvPhoneFieldComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'fv-phone-field', standalone: true, imports: [CommonModule, ReactiveFormsModule, FormsModule], template: "<div class=\"fv-phone-field-container\">\r\n    <label *ngIf=\"label\" class=\"fv-label\">\r\n        {{ label }}\r\n        <span *ngIf=\"isRequired()\" class=\"fv-required-asterisk\">*</span>\r\n    </label>\r\n\r\n    <div class=\"fv-phone-input-group\">\r\n        <div class=\"fv-select-wrapper\">\r\n            <select class=\"fv-country-code-select\" [disabled]=\"disabled\" [(ngModel)]=\"countryCode\">\r\n                <option *ngFor=\"let code of countryCodes\" [value]=\"code\">{{code}}</option>\r\n            </select>\r\n            <i class=\"material-icons fv-select-arrow\">arrow_drop_down</i>\r\n        </div>\r\n        <input type=\"text\" [formControl]=\"control\" [disabled]=\"disabled\" (input)=\"onInput($event)\" (blur)=\"onBlur()\"\r\n            (focus)=\"onFocus()\" placeholder=\"10 digit mobile number\" class=\"fv-input fv-phone-input\"\r\n            [class.fv-input-error]=\"errorMessage\" />\r\n    </div>\r\n\r\n    <span *ngIf=\"errorMessage\" class=\"fv-error-message\">\r\n        {{ errorMessage }}\r\n    </span>\r\n</div>", styles: [".fv-phone-field-container{display:flex;flex-direction:column;margin-bottom:16px;width:100%}.fv-label{font-size:14px;font-weight:500;color:#333;margin-bottom:6px}.fv-required-asterisk{color:#dc3545;margin-left:2px}.fv-phone-input-group{display:flex;align-items:center}.fv-country-code-select{padding:10px 24px 10px 8px;border:1px solid #cccccc;border-radius:4px 0 0 4px;background-color:#f8f9fa;border-right:none;outline:none;cursor:pointer;font-size:14px;color:#333;height:42px;width:60px;box-sizing:border-box;appearance:none;-webkit-appearance:none;-moz-appearance:none}.fv-select-wrapper{position:relative;display:flex;align-items:center}.fv-select-arrow{position:absolute;right:4px;top:50%;transform:translateY(-50%);pointer-events:none;color:#666;font-size:20px}.fv-phone-input{flex:1;border-radius:0 4px 4px 0!important}.fv-input{padding:10px;border:1px solid #cccccc;border-radius:4px;font-size:14px;outline:none;transition:border-color .2s;width:100%;box-sizing:border-box;height:42px}.fv-input:focus{border-color:#007bff;box-shadow:0 0 0 2px #007bff1a}.fv-input-error{border-color:#dc3545!important}.fv-error-message{margin-top:4px;font-size:12px;color:#dc3545}\n"] }]
+        }], propDecorators: { label: [{
+                type: Input
+            }], control: [{
+                type: Input
+            }], disabled: [{
+                type: Input
+            }], schema: [{
+                type: Input
+            }], blur: [{
+                type: Output
+            }], focus: [{
+                type: Output
+            }] } });
+
+class FvUanFieldComponent {
+    label = 'UAN Number';
+    control;
+    disabled = false;
+    schema;
+    blur = new EventEmitter();
+    focus = new EventEmitter();
+    errorMessage = null;
+    subscription;
+    ngOnInit() {
+        if (!this.control)
+            return;
+        this.subscription = this.control.valueChanges.subscribe((value) => this.validateValue(value));
+    }
+    ngOnDestroy() { this.subscription?.unsubscribe(); }
+    onInput(event) {
+        const input = event.target;
+        let value = input.value;
+        const numericValue = value.replace(/[^0-9]/g, ''); // Numbers only
+        const truncatedValue = numericValue.substring(0, 12); // UAN is 12 digits
+        if (value !== truncatedValue) {
+            input.value = truncatedValue;
+            this.control.setValue(truncatedValue);
+        }
+    }
+    validateValue(value) {
+        if (!this.schema)
+            return;
+        const result = Validator.validate(value, this.schema);
+        this.errorMessage = result.errorKey;
+        if (!result.isValid && result.errorKey)
+            this.control.setErrors({ [result.errorKey]: true });
+        else
+            this.control.setErrors(null);
+    }
+    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: FvUanFieldComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: FvUanFieldComponent, isStandalone: true, selector: "fv-uan-field", inputs: { label: "label", control: "control", disabled: "disabled", schema: "schema" }, outputs: { blur: "blur", focus: "focus" }, ngImport: i0, template: "<div class=\"fv-field-container\">\r\n    <label *ngIf=\"label\" class=\"fv-label\">\r\n        {{ label }}\r\n        <span *ngIf=\"isRequired()\" class=\"fv-required-asterisk\">*</span>\r\n    </label>\r\n    <input type=\"text\" [formControl]=\"control\" [disabled]=\"disabled\" (input)=\"onInput($event)\"\r\n        placeholder=\"12 digit UAN\" class=\"fv-input\" [class.fv-input-error]=\"errorMessage\" />\r\n    <span *ngIf=\"errorMessage\" class=\"fv-error-message\">{{ errorMessage }}</span>\r\n</div>", styles: [".fv-field-container{display:flex;flex-direction:column;margin-bottom:16px;width:100%}.fv-label{font-size:14px;font-weight:500;color:#333;margin-bottom:6px}.fv-required-asterisk{color:#dc3545;margin-left:2px}.fv-input{padding:10px;border:1px solid #ccc;border-radius:4px;font-size:14px;outline:none;width:100%;box-sizing:border-box}.fv-input:focus{border-color:#007bff;box-shadow:0 0 0 2px #007bff1a}.fv-input-error{border-color:#dc3545!important}.fv-error-message{margin-top:4px;font-size:12px;color:#dc3545}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: FvUanFieldComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'fv-uan-field', standalone: true, imports: [CommonModule, ReactiveFormsModule], template: "<div class=\"fv-field-container\">\r\n    <label *ngIf=\"label\" class=\"fv-label\">\r\n        {{ label }}\r\n        <span *ngIf=\"isRequired()\" class=\"fv-required-asterisk\">*</span>\r\n    </label>\r\n    <input type=\"text\" [formControl]=\"control\" [disabled]=\"disabled\" (input)=\"onInput($event)\"\r\n        placeholder=\"12 digit UAN\" class=\"fv-input\" [class.fv-input-error]=\"errorMessage\" />\r\n    <span *ngIf=\"errorMessage\" class=\"fv-error-message\">{{ errorMessage }}</span>\r\n</div>", styles: [".fv-field-container{display:flex;flex-direction:column;margin-bottom:16px;width:100%}.fv-label{font-size:14px;font-weight:500;color:#333;margin-bottom:6px}.fv-required-asterisk{color:#dc3545;margin-left:2px}.fv-input{padding:10px;border:1px solid #ccc;border-radius:4px;font-size:14px;outline:none;width:100%;box-sizing:border-box}.fv-input:focus{border-color:#007bff;box-shadow:0 0 0 2px #007bff1a}.fv-input-error{border-color:#dc3545!important}.fv-error-message{margin-top:4px;font-size:12px;color:#dc3545}\n"] }]
+        }], propDecorators: { label: [{
+                type: Input
+            }], control: [{
+                type: Input
+            }], disabled: [{
+                type: Input
+            }], schema: [{
+                type: Input
+            }], blur: [{
+                type: Output
+            }], focus: [{
+                type: Output
+            }] } });
+
+class FvPfFieldComponent {
+    label = 'PF Number';
+    control;
+    disabled = false;
+    schema;
+    blur = new EventEmitter();
+    focus = new EventEmitter();
+    errorMessage = null;
+    subscription;
+    ngOnInit() {
+        if (!this.control)
+            return;
+        this.subscription = this.control.valueChanges.subscribe((value) => this.validateValue(value));
+    }
+    ngOnDestroy() { this.subscription?.unsubscribe(); }
+    onInput(event) {
+        const input = event.target;
+        let value = input.value;
+        // Allow Alphanumeric and slash
+        const formatted = value.replace(/[^a-zA-Z0-9/]/g, '').toUpperCase();
+        if (value !== formatted) {
+            input.value = formatted;
+            this.control.setValue(formatted);
+        }
+    }
+    validateValue(value) {
+        if (!this.schema)
+            return;
+        const result = Validator.validate(value, this.schema);
+        this.errorMessage = result.errorKey;
+        if (!result.isValid && result.errorKey)
+            this.control.setErrors({ [result.errorKey]: true });
+        else
+            this.control.setErrors(null);
+    }
+    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: FvPfFieldComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: FvPfFieldComponent, isStandalone: true, selector: "fv-pf-field", inputs: { label: "label", control: "control", disabled: "disabled", schema: "schema" }, outputs: { blur: "blur", focus: "focus" }, ngImport: i0, template: "<div class=\"fv-field-container\">\r\n    <label *ngIf=\"label\" class=\"fv-label\">\r\n        {{ label }}\r\n        <span *ngIf=\"isRequired()\" class=\"fv-required-asterisk\">*</span>\r\n    </label>\r\n    <input type=\"text\" [formControl]=\"control\" [disabled]=\"disabled\" (input)=\"onInput($event)\" placeholder=\"PF Number\"\r\n        class=\"fv-input\" [class.fv-input-error]=\"errorMessage\" />\r\n    <span *ngIf=\"errorMessage\" class=\"fv-error-message\">{{ errorMessage }}</span>\r\n</div>", styles: [".fv-field-container{display:flex;flex-direction:column;margin-bottom:16px;width:100%}.fv-label{font-size:14px;font-weight:500;color:#333;margin-bottom:6px}.fv-required-asterisk{color:#dc3545;margin-left:2px}.fv-input{padding:10px;border:1px solid #ccc;border-radius:4px;font-size:14px;outline:none;width:100%;box-sizing:border-box}.fv-input:focus{border-color:#007bff;box-shadow:0 0 0 2px #007bff1a}.fv-input-error{border-color:#dc3545!important}.fv-error-message{margin-top:4px;font-size:12px;color:#dc3545}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: FvPfFieldComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'fv-pf-field', standalone: true, imports: [CommonModule, ReactiveFormsModule], template: "<div class=\"fv-field-container\">\r\n    <label *ngIf=\"label\" class=\"fv-label\">\r\n        {{ label }}\r\n        <span *ngIf=\"isRequired()\" class=\"fv-required-asterisk\">*</span>\r\n    </label>\r\n    <input type=\"text\" [formControl]=\"control\" [disabled]=\"disabled\" (input)=\"onInput($event)\" placeholder=\"PF Number\"\r\n        class=\"fv-input\" [class.fv-input-error]=\"errorMessage\" />\r\n    <span *ngIf=\"errorMessage\" class=\"fv-error-message\">{{ errorMessage }}</span>\r\n</div>", styles: [".fv-field-container{display:flex;flex-direction:column;margin-bottom:16px;width:100%}.fv-label{font-size:14px;font-weight:500;color:#333;margin-bottom:6px}.fv-required-asterisk{color:#dc3545;margin-left:2px}.fv-input{padding:10px;border:1px solid #ccc;border-radius:4px;font-size:14px;outline:none;width:100%;box-sizing:border-box}.fv-input:focus{border-color:#007bff;box-shadow:0 0 0 2px #007bff1a}.fv-input-error{border-color:#dc3545!important}.fv-error-message{margin-top:4px;font-size:12px;color:#dc3545}\n"] }]
+        }], propDecorators: { label: [{
+                type: Input
+            }], control: [{
+                type: Input
+            }], disabled: [{
+                type: Input
+            }], schema: [{
+                type: Input
+            }], blur: [{
+                type: Output
+            }], focus: [{
+                type: Output
+            }] } });
+
+class FvEsiFieldComponent {
+    label = 'ESI Number';
+    control;
+    disabled = false;
+    schema;
+    blur = new EventEmitter();
+    focus = new EventEmitter();
+    errorMessage = null;
+    subscription;
+    ngOnInit() {
+        if (!this.control)
+            return;
+        this.subscription = this.control.valueChanges.subscribe((value) => this.validateValue(value));
+    }
+    ngOnDestroy() { this.subscription?.unsubscribe(); }
+    onInput(event) {
+        const input = event.target;
+        let value = input.value;
+        const numericValue = value.replace(/[^0-9]/g, '');
+        const truncatedValue = numericValue.substring(0, 17);
+        if (value !== truncatedValue) {
+            input.value = truncatedValue;
+            this.control.setValue(truncatedValue);
+        }
+    }
+    validateValue(value) {
+        if (!this.schema)
+            return;
+        const result = Validator.validate(value, this.schema);
+        this.errorMessage = result.errorKey;
+        if (!result.isValid && result.errorKey)
+            this.control.setErrors({ [result.errorKey]: true });
+        else
+            this.control.setErrors(null);
+    }
+    isRequired() { return this.schema?.rules?.some(r => r.name === 'required' && r.params?.['enabled']) || false; }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: FvEsiFieldComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: FvEsiFieldComponent, isStandalone: true, selector: "fv-esi-field", inputs: { label: "label", control: "control", disabled: "disabled", schema: "schema" }, outputs: { blur: "blur", focus: "focus" }, ngImport: i0, template: "<div class=\"fv-field-container\">\r\n    <label *ngIf=\"label\" class=\"fv-label\">\r\n        {{ label }}\r\n        <span *ngIf=\"isRequired()\" class=\"fv-required-asterisk\">*</span>\r\n    </label>\r\n    <input type=\"text\" [formControl]=\"control\" [disabled]=\"disabled\" (input)=\"onInput($event)\"\r\n        placeholder=\"17 digit ESI\" class=\"fv-input\" [class.fv-input-error]=\"errorMessage\" />\r\n    <span *ngIf=\"errorMessage\" class=\"fv-error-message\">{{ errorMessage }}</span>\r\n</div>", styles: [".fv-field-container{display:flex;flex-direction:column;margin-bottom:16px;width:100%}.fv-label{font-size:14px;font-weight:500;color:#333;margin-bottom:6px}.fv-required-asterisk{color:#dc3545;margin-left:2px}.fv-input{padding:10px;border:1px solid #ccc;border-radius:4px;font-size:14px;outline:none;width:100%;box-sizing:border-box}.fv-input:focus{border-color:#007bff;box-shadow:0 0 0 2px #007bff1a}.fv-input-error{border-color:#dc3545!important}.fv-error-message{margin-top:4px;font-size:12px;color:#dc3545}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: FvEsiFieldComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'fv-esi-field', standalone: true, imports: [CommonModule, ReactiveFormsModule], template: "<div class=\"fv-field-container\">\r\n    <label *ngIf=\"label\" class=\"fv-label\">\r\n        {{ label }}\r\n        <span *ngIf=\"isRequired()\" class=\"fv-required-asterisk\">*</span>\r\n    </label>\r\n    <input type=\"text\" [formControl]=\"control\" [disabled]=\"disabled\" (input)=\"onInput($event)\"\r\n        placeholder=\"17 digit ESI\" class=\"fv-input\" [class.fv-input-error]=\"errorMessage\" />\r\n    <span *ngIf=\"errorMessage\" class=\"fv-error-message\">{{ errorMessage }}</span>\r\n</div>", styles: [".fv-field-container{display:flex;flex-direction:column;margin-bottom:16px;width:100%}.fv-label{font-size:14px;font-weight:500;color:#333;margin-bottom:6px}.fv-required-asterisk{color:#dc3545;margin-left:2px}.fv-input{padding:10px;border:1px solid #ccc;border-radius:4px;font-size:14px;outline:none;width:100%;box-sizing:border-box}.fv-input:focus{border-color:#007bff;box-shadow:0 0 0 2px #007bff1a}.fv-input-error{border-color:#dc3545!important}.fv-error-message{margin-top:4px;font-size:12px;color:#dc3545}\n"] }]
+        }], propDecorators: { label: [{
+                type: Input
+            }], control: [{
+                type: Input
+            }], disabled: [{
+                type: Input
+            }], schema: [{
+                type: Input
+            }], blur: [{
+                type: Output
+            }], focus: [{
+                type: Output
+            }] } });
+
+class FvIfscFieldComponent {
+    label = 'IFSC Code';
+    control;
+    disabled = false;
+    schema;
+    blur = new EventEmitter();
+    focus = new EventEmitter();
+    errorMessage = null;
+    subscription;
+    ngOnInit() {
+        if (!this.control)
+            return;
+        this.subscription = this.control.valueChanges.subscribe((value) => this.validateValue(value));
+    }
+    ngOnDestroy() { this.subscription?.unsubscribe(); }
+    onInput(event) {
+        const input = event.target;
+        let value = input.value;
+        const formatted = value.replace(/[^a-zA-Z0-9]/g, '').toUpperCase();
+        const truncated = formatted.substring(0, 11);
+        if (value !== truncated) {
+            input.value = truncated;
+            this.control.setValue(truncated);
+        }
+    }
+    validateValue(value) {
+        if (!this.schema)
+            return;
+        const result = Validator.validate(value, this.schema);
+        this.errorMessage = result.errorKey;
+        if (!result.isValid && result.errorKey)
+            this.control.setErrors({ [result.errorKey]: true });
+        else
+            this.control.setErrors(null);
+    }
+    isRequired() { return this.schema?.rules?.some(r => r.name === 'required' && r.params?.['enabled']) || false; }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: FvIfscFieldComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: FvIfscFieldComponent, isStandalone: true, selector: "fv-ifsc-field", inputs: { label: "label", control: "control", disabled: "disabled", schema: "schema" }, outputs: { blur: "blur", focus: "focus" }, ngImport: i0, template: "<div class=\"fv-field-container\">\r\n    <label *ngIf=\"label\" class=\"fv-label\">\r\n        {{ label }}\r\n        <span *ngIf=\"isRequired()\" class=\"fv-required-asterisk\">*</span>\r\n    </label>\r\n    <input type=\"text\" [formControl]=\"control\" [disabled]=\"disabled\" (input)=\"onInput($event)\" placeholder=\"IFSC Code\"\r\n        class=\"fv-input\" [class.fv-input-error]=\"errorMessage\" />\r\n    <span *ngIf=\"errorMessage\" class=\"fv-error-message\">{{ errorMessage }}</span>\r\n</div>", styles: [".fv-field-container{display:flex;flex-direction:column;margin-bottom:16px;width:100%}.fv-label{font-size:14px;font-weight:500;color:#333;margin-bottom:6px}.fv-required-asterisk{color:#dc3545;margin-left:2px}.fv-input{padding:10px;border:1px solid #ccc;border-radius:4px;font-size:14px;outline:none;width:100%;box-sizing:border-box}.fv-input:focus{border-color:#007bff;box-shadow:0 0 0 2px #007bff1a}.fv-input-error{border-color:#dc3545!important}.fv-error-message{margin-top:4px;font-size:12px;color:#dc3545}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: FvIfscFieldComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'fv-ifsc-field', standalone: true, imports: [CommonModule, ReactiveFormsModule], template: "<div class=\"fv-field-container\">\r\n    <label *ngIf=\"label\" class=\"fv-label\">\r\n        {{ label }}\r\n        <span *ngIf=\"isRequired()\" class=\"fv-required-asterisk\">*</span>\r\n    </label>\r\n    <input type=\"text\" [formControl]=\"control\" [disabled]=\"disabled\" (input)=\"onInput($event)\" placeholder=\"IFSC Code\"\r\n        class=\"fv-input\" [class.fv-input-error]=\"errorMessage\" />\r\n    <span *ngIf=\"errorMessage\" class=\"fv-error-message\">{{ errorMessage }}</span>\r\n</div>", styles: [".fv-field-container{display:flex;flex-direction:column;margin-bottom:16px;width:100%}.fv-label{font-size:14px;font-weight:500;color:#333;margin-bottom:6px}.fv-required-asterisk{color:#dc3545;margin-left:2px}.fv-input{padding:10px;border:1px solid #ccc;border-radius:4px;font-size:14px;outline:none;width:100%;box-sizing:border-box}.fv-input:focus{border-color:#007bff;box-shadow:0 0 0 2px #007bff1a}.fv-input-error{border-color:#dc3545!important}.fv-error-message{margin-top:4px;font-size:12px;color:#dc3545}\n"] }]
+        }], propDecorators: { label: [{
+                type: Input
+            }], control: [{
+                type: Input
+            }], disabled: [{
+                type: Input
+            }], schema: [{
+                type: Input
+            }], blur: [{
+                type: Output
+            }], focus: [{
+                type: Output
+            }] } });
+
+class FvMicrFieldComponent {
+    label = 'MICR Code';
+    control;
+    disabled = false;
+    schema;
+    blur = new EventEmitter();
+    focus = new EventEmitter();
+    errorMessage = null;
+    subscription;
+    ngOnInit() {
+        if (!this.control)
+            return;
+        this.subscription = this.control.valueChanges.subscribe((value) => this.validateValue(value));
+    }
+    ngOnDestroy() { this.subscription?.unsubscribe(); }
+    onInput(event) {
+        const input = event.target;
+        let value = input.value;
+        const numericValue = value.replace(/[^0-9]/g, '');
+        const truncatedValue = numericValue.substring(0, 9);
+        if (value !== truncatedValue) {
+            input.value = truncatedValue;
+            this.control.setValue(truncatedValue);
+        }
+    }
+    validateValue(value) {
+        if (!this.schema)
+            return;
+        const result = Validator.validate(value, this.schema);
+        this.errorMessage = result.errorKey;
+        if (!result.isValid && result.errorKey)
+            this.control.setErrors({ [result.errorKey]: true });
+        else
+            this.control.setErrors(null);
+    }
+    isRequired() { return this.schema?.rules?.some(r => r.name === 'required' && r.params?.['enabled']) || false; }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: FvMicrFieldComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: FvMicrFieldComponent, isStandalone: true, selector: "fv-micr-field", inputs: { label: "label", control: "control", disabled: "disabled", schema: "schema" }, outputs: { blur: "blur", focus: "focus" }, ngImport: i0, template: "<div class=\"fv-field-container\">\r\n    <label *ngIf=\"label\" class=\"fv-label\">\r\n        {{ label }}\r\n        <span *ngIf=\"isRequired()\" class=\"fv-required-asterisk\">*</span>\r\n    </label>\r\n    <input type=\"text\" [formControl]=\"control\" [disabled]=\"disabled\" (input)=\"onInput($event)\"\r\n        placeholder=\"9 digit MICR\" class=\"fv-input\" [class.fv-input-error]=\"errorMessage\" />\r\n    <span *ngIf=\"errorMessage\" class=\"fv-error-message\">{{ errorMessage }}</span>\r\n</div>", styles: [".fv-field-container{display:flex;flex-direction:column;margin-bottom:16px;width:100%}.fv-label{font-size:14px;font-weight:500;color:#333;margin-bottom:6px}.fv-required-asterisk{color:#dc3545;margin-left:2px}.fv-input{padding:10px;border:1px solid #ccc;border-radius:4px;font-size:14px;outline:none;width:100%;box-sizing:border-box}.fv-input:focus{border-color:#007bff;box-shadow:0 0 0 2px #007bff1a}.fv-input-error{border-color:#dc3545!important}.fv-error-message{margin-top:4px;font-size:12px;color:#dc3545}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: FvMicrFieldComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'fv-micr-field', standalone: true, imports: [CommonModule, ReactiveFormsModule], template: "<div class=\"fv-field-container\">\r\n    <label *ngIf=\"label\" class=\"fv-label\">\r\n        {{ label }}\r\n        <span *ngIf=\"isRequired()\" class=\"fv-required-asterisk\">*</span>\r\n    </label>\r\n    <input type=\"text\" [formControl]=\"control\" [disabled]=\"disabled\" (input)=\"onInput($event)\"\r\n        placeholder=\"9 digit MICR\" class=\"fv-input\" [class.fv-input-error]=\"errorMessage\" />\r\n    <span *ngIf=\"errorMessage\" class=\"fv-error-message\">{{ errorMessage }}</span>\r\n</div>", styles: [".fv-field-container{display:flex;flex-direction:column;margin-bottom:16px;width:100%}.fv-label{font-size:14px;font-weight:500;color:#333;margin-bottom:6px}.fv-required-asterisk{color:#dc3545;margin-left:2px}.fv-input{padding:10px;border:1px solid #ccc;border-radius:4px;font-size:14px;outline:none;width:100%;box-sizing:border-box}.fv-input:focus{border-color:#007bff;box-shadow:0 0 0 2px #007bff1a}.fv-input-error{border-color:#dc3545!important}.fv-error-message{margin-top:4px;font-size:12px;color:#dc3545}\n"] }]
+        }], propDecorators: { label: [{
+                type: Input
+            }], control: [{
+                type: Input
+            }], disabled: [{
+                type: Input
+            }], schema: [{
+                type: Input
+            }], blur: [{
+                type: Output
+            }], focus: [{
+                type: Output
+            }] } });
+
+class FvIbanFieldComponent {
+    label = 'IBAN Number';
+    control;
+    disabled = false;
+    schema;
+    blur = new EventEmitter();
+    focus = new EventEmitter();
+    errorMessage = null;
+    subscription;
+    ngOnInit() {
+        if (!this.control)
+            return;
+        this.subscription = this.control.valueChanges.subscribe((value) => this.validateValue(value));
+    }
+    ngOnDestroy() { this.subscription?.unsubscribe(); }
+    onInput(event) {
+        const input = event.target;
+        let value = input.value;
+        const formatted = value.replace(/[^a-zA-Z0-9]/g, '').toUpperCase();
+        const truncated = formatted.substring(0, 34);
+        if (value !== truncated) {
+            input.value = truncated;
+            this.control.setValue(truncated);
+        }
+    }
+    validateValue(value) {
+        if (!this.schema)
+            return;
+        const result = Validator.validate(value, this.schema);
+        this.errorMessage = result.errorKey;
+        if (!result.isValid && result.errorKey)
+            this.control.setErrors({ [result.errorKey]: true });
+        else
+            this.control.setErrors(null);
+    }
+    isRequired() { return this.schema?.rules?.some(r => r.name === 'required' && r.params?.['enabled']) || false; }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: FvIbanFieldComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: FvIbanFieldComponent, isStandalone: true, selector: "fv-iban-field", inputs: { label: "label", control: "control", disabled: "disabled", schema: "schema" }, outputs: { blur: "blur", focus: "focus" }, ngImport: i0, template: "<div class=\"fv-field-container\">\r\n    <label *ngIf=\"label\" class=\"fv-label\">\r\n        {{ label }}\r\n        <span *ngIf=\"isRequired()\" class=\"fv-required-asterisk\">*</span>\r\n    </label>\r\n    <input type=\"text\" [formControl]=\"control\" [disabled]=\"disabled\" (input)=\"onInput($event)\" placeholder=\"IBAN\"\r\n        class=\"fv-input\" [class.fv-input-error]=\"errorMessage\" />\r\n    <span *ngIf=\"errorMessage\" class=\"fv-error-message\">{{ errorMessage }}</span>\r\n</div>", styles: [".fv-field-container{display:flex;flex-direction:column;margin-bottom:16px;width:100%}.fv-label{font-size:14px;font-weight:500;color:#333;margin-bottom:6px}.fv-required-asterisk{color:#dc3545;margin-left:2px}.fv-input{padding:10px;border:1px solid #ccc;border-radius:4px;font-size:14px;outline:none;width:100%;box-sizing:border-box}.fv-input:focus{border-color:#007bff;box-shadow:0 0 0 2px #007bff1a}.fv-input-error{border-color:#dc3545!important}.fv-error-message{margin-top:4px;font-size:12px;color:#dc3545}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: FvIbanFieldComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'fv-iban-field', standalone: true, imports: [CommonModule, ReactiveFormsModule], template: "<div class=\"fv-field-container\">\r\n    <label *ngIf=\"label\" class=\"fv-label\">\r\n        {{ label }}\r\n        <span *ngIf=\"isRequired()\" class=\"fv-required-asterisk\">*</span>\r\n    </label>\r\n    <input type=\"text\" [formControl]=\"control\" [disabled]=\"disabled\" (input)=\"onInput($event)\" placeholder=\"IBAN\"\r\n        class=\"fv-input\" [class.fv-input-error]=\"errorMessage\" />\r\n    <span *ngIf=\"errorMessage\" class=\"fv-error-message\">{{ errorMessage }}</span>\r\n</div>", styles: [".fv-field-container{display:flex;flex-direction:column;margin-bottom:16px;width:100%}.fv-label{font-size:14px;font-weight:500;color:#333;margin-bottom:6px}.fv-required-asterisk{color:#dc3545;margin-left:2px}.fv-input{padding:10px;border:1px solid #ccc;border-radius:4px;font-size:14px;outline:none;width:100%;box-sizing:border-box}.fv-input:focus{border-color:#007bff;box-shadow:0 0 0 2px #007bff1a}.fv-input-error{border-color:#dc3545!important}.fv-error-message{margin-top:4px;font-size:12px;color:#dc3545}\n"] }]
+        }], propDecorators: { label: [{
+                type: Input
+            }], control: [{
+                type: Input
+            }], disabled: [{
+                type: Input
+            }], schema: [{
+                type: Input
+            }], blur: [{
+                type: Output
+            }], focus: [{
+                type: Output
+            }] } });
+
+// add-update-form.component.ts
+class AddUpdateFormComponent {
+    fb;
+    hostRef;
+    config;
+    validationError = new EventEmitter();
+    form;
+    submitted = false;
+    filePreviews = new Map();
+    fileNames = new Map();
+    valueChangeSubscriptions = [];
+    passwordVisibility = new Map();
+    searchQueries = new Map();
+    constructor(fb, hostRef) {
+        this.fb = fb;
+        this.hostRef = hostRef;
+    }
+    ngOnInit() {
+        this.initializeForm();
+    }
+    ngAfterViewInit() {
+        // Lifecycle hook - can be used for datepicker initialization if needed
+    }
+    getColumnWidth(column) {
+        const maxCols = this.config.maxColsPerRow || 5;
+        const colSpan = Math.min(column.colSpan || 1, maxCols);
+        return `calc(${(colSpan / maxCols) * 100}% - 16px)`;
+    }
+    getControl(name) {
+        return this.form.get(name);
+    }
+    // 2. HELPER: Convert your FieldValidation[] to the library's ValidationSchema
+    getSchema(column) {
+        const rules = [];
+        const errorPriority = [];
+        if (column.validations) {
+            column.validations.forEach((v) => {
+                switch (v.type) {
+                    case 'required':
+                        rules.push({
+                            name: 'required',
+                            params: { enabled: true },
+                            errorKey: 'ERR_REQUIRED',
+                        });
+                        errorPriority.push('required');
+                        break;
+                    case 'email':
+                        rules.push({
+                            name: 'regex',
+                            params: {
+                                pattern: '^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\\.[a-zA-Z]{2,}$',
+                            },
+                            errorKey: 'ERR_REGEX_MISMATCH',
+                        });
+                        errorPriority.push('regex');
+                        break;
+                    case 'minLength':
+                        rules.push({
+                            name: 'minLength',
+                            params: { value: v.value },
+                            errorKey: 'ERR_MIN_LENGTH',
+                        });
+                        errorPriority.push('minLength');
+                        break;
+                    case 'maxLength':
+                        rules.push({
+                            name: 'maxLength',
+                            params: { value: v.value },
+                            errorKey: 'ERR_MAX_LENGTH',
+                        });
+                        errorPriority.push('maxLength');
+                        break;
+                    case 'pattern':
+                        rules.push({
+                            name: 'regex',
+                            params: { pattern: v.value },
+                            errorKey: 'ERR_REGEX_MISMATCH',
+                        });
+                        errorPriority.push('regex');
+                        break;
+                    case 'min':
+                        rules.push({
+                            name: 'min',
+                            params: { value: v.value },
+                            errorKey: 'ERR_MIN_VALUE',
+                        });
+                        errorPriority.push('min');
+                        break;
+                    case 'max':
+                        rules.push({
+                            name: 'max',
+                            params: { value: v.value },
+                            errorKey: 'ERR_MAX_VALUE',
+                        });
+                        errorPriority.push('max');
+                        break;
+                }
+            });
+        }
+        // Map 'name-code' to 'Dropdown' or similar for validation schema purposes if needed
+        let controlType = column.type;
+        if (column.type === 'name-code') {
+            controlType = 'select'; // Treat as select for schema lookup if library expects 'select' or 'Dropdown'
+        }
+        return {
+            controlType: controlType,
+            errorPriority: errorPriority,
+            rules: rules,
+        };
+    }
+    isImageField(column) {
+        return (column.type === 'file' &&
+            (column.accept?.startsWith('image') || column.filePreview === true));
+    }
+    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);
+                    }
+                }
+                // 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
+                } */
+            });
+        });
+        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();
+                }
+            });
+        });
+        // Subscribe to value changes for all fields to trigger onChange handlers
+        Object.keys(this.form.controls).forEach((key) => {
+            const control = this.form.get(key);
+            if (control) {
+                const subscription = control.valueChanges
+                    .pipe(distinctUntilChanged())
+                    .subscribe((value) => {
+                    const column = this.getColumnByName(key);
+                    if (column?.onChange) {
+                        column.onChange(value, this.form);
+                    }
+                });
+                this.valueChangeSubscriptions.push(subscription);
+            }
+        });
+    }
+    ngOnDestroy() {
+        // Clean up all subscriptions to prevent memory leaks
+        this.valueChangeSubscriptions.forEach((sub) => sub.unsubscribe());
+        this.valueChangeSubscriptions = [];
+    }
+    handleFieldChange(fieldName, eventValue) {
+        const column = this.getColumnByName(fieldName);
+        const formControl = this.form.get(fieldName);
+        // Format month-year fields (especially expiryDate) to YYYY-MM
+        if (column?.type === 'month-year' && eventValue) {
+            const formattedValue = this.formatMonthYearValue(eventValue);
+            if (formControl && formattedValue !== eventValue) {
+                formControl.setValue(formattedValue, { emitEvent: false });
+                eventValue = formattedValue;
+            }
+        }
+        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 onChangeFn = column.onChange; // Store the function reference
+            // Store the selected value - this is what the user chose
+            const selectedValue = valueToPass;
+            // Ensure the form control has the selected value before calling onChange
+            if (formControl && selectedValue !== undefined) {
+                if (formControl.value !== selectedValue) {
+                    formControl.setValue(selectedValue, { emitEvent: false });
+                }
+            }
+            // Call onChange with the selected value
+            if (onChangeFn) {
+                onChangeFn(selectedValue, this.form);
+            }
+            // Restore the value for the field that triggered the change if it was cleared by onChange
+            // This is critical: if onChange clears the field that was just changed, we restore it
+            // Only restore if we had a non-empty value (empty string, null, undefined are not restored)
+            if (formControl &&
+                selectedValue !== undefined &&
+                selectedValue !== null &&
+                selectedValue !== '') {
+                // Use setTimeout with 0 delay to run after any synchronous operations in onChange
+                setTimeout(() => {
+                    // Check if the value was cleared or changed
+                    const currentValue = formControl.value;
+                    // If the value doesn't match what was selected, restore it
+                    // This handles the case where onChange cleared the field unintentionally
+                    if (currentValue !== selectedValue) {
+                        formControl.setValue(selectedValue, { emitEvent: false });
+                    }
+                }, 0);
+            }
+        }
+    }
+    formatMonthYearValue(value) {
+        if (!value)
+            return value;
+        // Normalize to YYYY-MM
+        if (value.match(/^\d{2}-\d{4}$/)) {
+            const [month, year] = value.split('-');
+            return `${year}-${month}`;
+        }
+        // If already in YYYY-MM format, return as is
+        return value;
+    }
+    parseMonthYearValue(value) {
+        if (!value)
+            return value;
+        // Display and picker both use YYYY-MM; normalize MM-YYYY if present
+        if (value.match(/^\d{2}-\d{4}$/)) {
+            const [month, year] = value.split('-');
+            return `${year}-${month}`;
+        }
+        return value;
+    }
+    handleMonthYearChange(fieldName, value) {
+        // Format the input value to YYYY-MM format
+        let formattedValue = value;
+        // If it's in MM-YYYY format, convert to YYYY-MM
+        if (formattedValue.match(/^\d{2}-\d{4}$/)) {
+            const [month, year] = formattedValue.split('-');
+            formattedValue = `${year}-${month}`;
+        }
+        // If it's in YYYYMM format (no dash), convert to YYYY-MM
+        else if (formattedValue.match(/^\d{6}$/)) {
+            const year = formattedValue.substring(0, 4);
+            const month = formattedValue.substring(4, 6);
+            formattedValue = `${year}-${month}`;
+        }
+        // If it's already in YYYY-MM format, leave as is
+        else if (formattedValue.match(/^\d{4}-\d{2}$/)) {
+            // Already in correct format
+        }
+        // If user is typing, allow partial input
+        else if (formattedValue.match(/^\d{1,6}$/)) {
+            // Allow partial input while typing
+        }
+        const formControl = this.form.get(fieldName);
+        if (formControl && formattedValue !== value) {
+            formControl.setValue(formattedValue, { emitEvent: false });
+        }
+        this.handleFieldChange(fieldName, formattedValue);
+    }
+    handleMonthYearBlur(fieldName) {
+        const formControl = this.form.get(fieldName);
+        if (!formControl)
+            return;
+        const value = formControl.value || '';
+        // Ensure the value is in YYYY-MM format on blur
+        if (value && !value.match(/^\d{4}-\d{2}$/)) {
+            // Try to parse and format
+            const formatted = this.formatMonthYearValue(value);
+            if (formatted !== value) {
+                formControl.setValue(formatted, { emitEvent: false });
+            }
+        }
+    }
+    handleMonthYearPickerChange(fieldName, value) {
+        // Month picker outputs YYYY-MM; just normalize
+        const formattedValue = this.formatMonthYearValue(value);
+        const formControl = this.form.get(fieldName);
+        if (formControl) {
+            formControl.setValue(formattedValue, { emitEvent: false });
+            this.handleFieldChange(fieldName, formattedValue);
+        }
+    }
+    getMonthYearPickerValue(fieldName) {
+        const formControl = this.form.get(fieldName);
+        if (!formControl)
+            return '';
+        const value = formControl.value || '';
+        // Display and picker both expect YYYY-MM
+        return this.parseMonthYearValue(value);
+    }
+    openMonthPicker(fieldName) {
+        const monthInput = document.getElementById(fieldName + '_picker');
+        if (monthInput && monthInput.type === 'month') {
+            // Update the picker value before opening
+            const currentValue = this.getMonthYearPickerValue(fieldName);
+            if (currentValue) {
+                monthInput.value = currentValue;
+            }
+            // Try modern showPicker API first, fallback to click
+            if (monthInput.showPicker) {
+                monthInput.showPicker();
+            }
+            else {
+                monthInput.focus();
+                monthInput.click();
+            }
+        }
+    }
+    getColumnByName(name) {
+        return this.config.sections
+            .flatMap((s) => s.fields)
+            .find((c) => c.name === name);
+    }
+    getFileFields(fields) {
+        return fields.filter((f) => f.type === 'file');
+    }
+    getNonFileFields(fields) {
+        return fields.filter((f) => f.type !== 'file');
+    }
+    togglePasswordVisibility(fieldName) {
+        const current = this.passwordVisibility.get(fieldName) || false;
+        this.passwordVisibility.set(fieldName, !current);
+    }
+    hasRequiredValidation(column) {
+        return column.validations?.some((v) => v.type === 'required') || false;
+    }
+    isPasswordVisible(fieldName) {
+        return this.passwordVisibility.get(fieldName) || false;
+    }
+    buildValidators(validations, formGroup) {
+        if (!validations)
+            return [];
+        const validators = [];
+        validations.forEach((validation) => {
+            switch (validation.type) {
+                case 'required':
+                    validators.push(Validators.required);
+                    break;
+                case 'email':
+                    validators.push(Validators.email);
+                    break;
+                case 'minLength':
+                    validators.push(Validators.minLength(validation.value));
+                    break;
+                case 'maxLength':
+                    validators.push(Validators.maxLength(validation.value));
+                    break;
+                case 'min':
+                    validators.push(Validators.min(validation.value));
+                    break;
+                case 'max':
+                    validators.push(Validators.max(validation.value));
+                    break;
+                case 'pattern':
+                    validators.push(Validators.pattern(validation.value));
+                    break;
+                case 'custom':
+                    if (validation.validator) {
+                        validators.push((control) => {
+                            const isValid = validation.validator(control.value, formGroup);
+                            return isValid ? null : { custom: true };
+                        });
+                    }
+                    break;
+            }
+        });
+        return validators;
+    }
+    triggerFileUpload(fieldName) {
+        document.getElementById('fileInput_' + fieldName)?.click();
+    }
+    openTimePicker(fieldName) {
+        const timeInput = document.getElementById(fieldName);
+        if (timeInput && timeInput.type === 'time') {
+            // Try modern showPicker API first, fallback to click
+            if (timeInput.showPicker) {
+                timeInput.showPicker();
+            }
+            else {
+                timeInput.focus();
+                timeInput.click();
+            }
+        }
+    }
+    onFileChange(event, fieldName) {
+        const file = event.target.files[0];
+        if (file) {
+            this.fileNames.set(fieldName, file.name);
+            const reader = new FileReader();
+            reader.readAsDataURL(file);
+            reader.onload = () => {
+                const base64String = reader.result;
+                this.filePreviews.set(fieldName, base64String);
+                this.form.get(fieldName)?.setValue(base64String);
+                // Trigger onChange handler for file fields
+                const column = this.getColumnByName(fieldName);
+                if (column?.onChange) {
+                    column.onChange(base64String, this.form);
+                }
+            };
+        }
+    }
+    extractFileName(value) {
+        if (!value)
+            return '';
+        // If it's a URL, extract filename from URL
+        if (value.startsWith('http')) {
+            const parts = value.split('/');
+            return parts[parts.length - 1];
+        }
+        // If it's base64, return a generic name
+        if (value.startsWith(`data:image`)) {
+            return 'uploaded-image.jpg';
+        }
+        return 'existing-photo.jpg';
+    }
+    getFilePreview(fieldName) {
+        return this.filePreviews.get(fieldName) || null;
+    }
+    getFileName(fieldName) {
+        return this.fileNames.get(fieldName) || null;
+    }
+    mapSearchOptions(options) {
+        return options.map(opt => ({
+            code: opt.code || opt.value,
+            name: opt.name || opt.label || opt.value,
+            value: opt.value
+        }));
+    }
+    deleteFile(fieldName) {
+        this.filePreviews.delete(fieldName);
+        this.fileNames.delete(fieldName);
+        this.form.get(fieldName)?.setValue('');
+        // Trigger onChange handler when file is deleted
+        const column = this.getColumnByName(fieldName);
+        if (column?.onChange) {
+            column.onChange('', this.form);
+        }
+    }
+    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.`);
+            }
+            return;
+        }
+        const formData = this.form.getRawValue();
+        this.config.onSubmit(formData);
+    }
+    handleReset() {
+        this.submitted = false;
+        this.form.reset();
+        if (this.config.onReset) {
+            this.config.onReset();
+        }
+    }
+    isFieldInvalid(fieldName) {
+        const field = this.form.get(fieldName);
+        return !!(field && field.invalid && this.submitted);
+    }
+    getErrorMessage(fieldName) {
+        const field = this.form.get(fieldName);
+        if (!field?.errors)
+            return '';
+        // Check if there's a custom message from validations
+        const allColumns = this.config.sections.flatMap((s) => s.fields);
+        const column = allColumns.find((c) => c.name === fieldName);
+        // Check for custom validation error
+        if (field.errors['custom']) {
+            const customValidation = column?.validations?.find((v) => v.type === 'custom');
+            return customValidation?.message || 'Invalid field';
+        }
+        // Check if there's a custom message from validations
+        const errorKeys = Object.keys(field.errors);
+        for (const key of errorKeys) {
+            const validation = column?.validations?.find((v) => v.type === key);
+            if (validation?.message) {
+                return validation.message;
+            }
+        }
+        // Default error messages
+        if (field.errors['required']) {
+            return `${column?.label} is required`;
+        }
+        if (field.errors['email'])
+            return 'Invalid email format';
+        if (field.errors['minlength'])
+            return `Minimum length is ${field.errors['minlength'].requiredLength}`;
+        if (field.errors['maxlength'])
+            return `Maximum length is ${field.errors['maxlength'].requiredLength}`;
+        if (field.errors['min'])
+            return `Minimum value is ${field.errors['min'].min}`;
+        if (field.errors['max'])
+            return `Maximum value is ${field.errors['max'].max}`;
+        if (field.errors['pattern'])
+            return 'Invalid format';
+        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: `
+    <div class="form-container">
+      <div class="form-header" *ngIf="config.formTitle">
+        <h2>{{ config.formTitle }}</h2>
+      </div>
+
+      <form [formGroup]="form" (ngSubmit)="handleSubmit()" class="dynamic-form">
+        <div *ngFor="let section of config.sections" class="form-section">
+          <h3 class="section-title" *ngIf="section.title">
+            {{ section.title }}
+          </h3>
+
+          <div class="fields-row">
+            <ng-container *ngFor="let column of section.fields">
+              <div
+                class="form-field-wrapper"
+                [ngClass]="'field-' + column.type"
+                [ngStyle]="column.hidden ? { display: 'none' } : {}"
+                [style.grid-column]="'span ' + (column.colSpan || 1)"
+              >
+                <ng-container
+                  *ngIf="
+                    ['text', 'email', 'password'].includes(column.type) &&
+                    !column.hidden
+                  "
+                >
+                  <fv-entry-field
+                    [label]="column.label"
+                    [placeholder]="column.placeholder || ''"
+                    [type]="
+                      column.type === 'password'
+                        ? 'password'
+                        : column.type === 'email'
+                        ? 'email'
+                        : 'text'
+                    "
+                    [control]="getControl(column.name)"
+                    [schema]="getSchema(column)"
+                    [disabled]="column.disabled || false"
+                    [readonly]="false"
+                    [allowAlphabetsOnly]="column.allowAlphabetsOnly || false"
+                    [maxLength]="column.maxLength || null"
+                    (valueChange)="handleFieldChange(column.name, $event)"
+                  >
+                  </fv-entry-field>
+                </ng-container>
+
+                <ng-container
+                  *ngIf="column.type === 'number' && !column.hidden"
+                >
+                  <fv-number-field
+                    [label]="column.label"
+                    [placeholder]="column.placeholder || ''"
+                    [control]="getControl(column.name)"
+                    [schema]="getSchema(column)"
+                    [disabled]="column.disabled || false"
+                    (valueChange)="handleFieldChange(column.name, $event)"
+                  >
+                  </fv-number-field>
+                </ng-container>
+
+                <ng-container
+                  *ngIf="column.type === 'select' && !column.hidden"
+                >
+                  <fv-dropdown
+                    [label]="column.label"
+                    [placeholder]="column.placeholder || 'Select option'"
+                    [options]="column.options || []"
+                    [control]="getControl(column.name)"
+                    [schema]="getSchema(column)"
+                    [disabled]="column.disabled || false"
+                    (valueChange)="handleFieldChange(column.name, $event)"
+                  >
+                  </fv-dropdown>
+                </ng-container>
+
+                <ng-container
+                  *ngIf="column.type === 'checkbox' && !column.hidden"
+                >
+                  <fv-checkbox
+                    [label]="column.label"
+                    [control]="getControl(column.name)"
+                    [disabled]="column.disabled || false"
+                    (valueChange)="handleFieldChange(column.name, $event)"
+                  >
+                  </fv-checkbox>
+                </ng-container>
+
+                <ng-container *ngIf="column.type === 'radio' && !column.hidden">
+                  <fv-radio-group
+                    [label]="column.label"
+                    [options]="column.options || []"
+                    [control]="getControl(column.name)"
+                    [disabled]="column.disabled || false"
+                    (valueChange)="handleFieldChange(column.name, $event)"
+                  >
+                  </fv-radio-group>
+                </ng-container>
+
+                <ng-container *ngIf="column.type === 'date' && !column.hidden">
+                  <fv-date-field
+                    [label]="column.label"
+                    [control]="getControl(column.name)"
+                    [schema]="getSchema(column)"
+                    [disabled]="column.disabled || false"
+                    (valueChange)="handleFieldChange(column.name, $event)"
+                  >
+                  </fv-date-field>
+                </ng-container>
+
+                <ng-container
+                  *ngIf="column.type === 'month-year' && !column.hidden"
+                >
+                  <fv-month-year-field
+                    [label]="column.label"
+                    [control]="getControl(column.name)"
+                    [schema]="getSchema(column)"
+                    [disabled]="column.disabled || false"
+                    (valueChange)="handleMonthYearChange(column.name, $event)"
+                  >
+                  </fv-month-year-field>
+                </ng-container>
+
+                <ng-container
+                  *ngIf="column.type === 'textarea' && !column.hidden"
+                >
+                  <fv-rich-text-editor
+                    [label]="column.label"
+                    [placeholder]="column.placeholder || ''"
+                    [control]="getControl(column.name)"
+                    [schema]="getSchema(column)"
+                    [disabled]="column.disabled || false"
+                    (valueChange)="handleFieldChange(column.name, $event)"
+                  >
+                  </fv-rich-text-editor>
+                </ng-container>
+
+                <ng-container *ngIf="column.type === 'file' && !column.hidden">
+                  <ng-container *ngIf="isImageField(column); else standardFile">
+                    <fv-image-selector
+                      [label]="column.label"
+                      [placeholder]="column.placeholder || 'Select image'"
+                      [control]="getControl(column.name)"
+                      [schema]="getSchema(column)"
+                      [disabled]="column.disabled || false"
+                      (valueChange)="onFileChange($event, column.name)"
+                    >
+                    </fv-image-selector>
+                  </ng-container>
+
+                  <ng-template #standardFile>
+                    <fv-file-selector
+                      [label]="column.label"
+                      [placeholder]="column.placeholder || 'Select file'"
+                      [accept]="column.accept || '*/*'"
+                      [control]="getControl(column.name)"
+                      [schema]="getSchema(column)"
+                      [disabled]="column.disabled || false"
+                      (valueChange)="onFileChange($event, column.name)"
+                    >
+                    </fv-file-selector>
+                  </ng-template>
+                </ng-container>
+
+                <ng-container
+                  *ngIf="column.type === 'name-code' && !column.hidden"
+                >
+                  <fv-name-code
+                    [label]="column.label"
+                    [placeholder]="column.placeholder || 'Search by Code or Name'"
+                    [options]="column.options ? mapSearchOptions(column.options) : []"
+                    [control]="getControl(column.name)"
+                    [schema]="getSchema(column)"
+                    [disabled]="column.disabled || false"
+                  >
+                  </fv-name-code>
+                </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>
+                </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>
+                </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>
+                </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>
+                </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>
+                </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>
+                </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>
+                </ng-container>
+              </div>
+            </ng-container>
+          </div>
+        </div>
+
+
+        <div class="form-actions">
+          <button
+            type="submit"
+            class="btn btn-primary"
+            [disabled]="form.invalid && submitted"
+          >
+            {{ config.submitLabel || 'Save' }}
+          </button>
+          <button
+            type="button"
+            class="btn btn-outline"
+            (click)="config.onCancel()"
+          >
+            {{ 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:10px;border-radius:8px;margin:0 auto;max-width:100%;box-sizing:border-box}.error-border{border-color:red!important}.hidden{display:none!important}.form-header{margin-bottom:10px}.form-header h2{margin:0;font-size:20px;font-weight:700;color:#303030}.dynamic-form{background:#fff;padding:10px;border-radius:6px;box-shadow:0 1px 3px #0000001a;max-width:100%;box-sizing:border-box}.form-section{margin-bottom:10px}.section-title{font-size:16px;font-weight:700;color:#303030;margin:0 0 16px;text-transform:uppercase;letter-spacing:.5px}.fields-row{display:grid;grid-template-columns:repeat(5,1fr);gap:16px;width:100%;box-sizing:border-box;overflow:visible}.form-field-wrapper{display:flex;position:relative;flex-direction:column;min-width:0;width:100%;box-sizing:border-box;overflow:visible}.password-toggle-btn{position:absolute;right:10px;top:32px;background:none;border:none;cursor:pointer;padding:4px;color:#666}.password-toggle-btn:hover{color:#333}.password-toggle-btn .material-icons{font-size:20px;width:auto;height:auto;padding:0}@media (min-width: 1200px) and (max-width: 1400px){.fields-row{grid-template-columns:repeat(5,1fr)}.form-control{width:180px;max-width:180px}}@media (max-width: 1200px){.fields-row{grid-template-columns:repeat(3,1fr)}.form-control{width:100%;max-width:100%}}@media (max-width: 992px){.fields-row{grid-template-columns:repeat(2,1fr);gap:12px}}@media (max-width: 768px){.fields-row{grid-template-columns:repeat(2,1fr);gap:10px}}@media (max-width: 640px){.fields-row{grid-template-columns:1fr;gap:12px}.form-field-wrapper{width:100%}}label{font-weight:600;margin-bottom:6px;color:#151d48;font-size:14px}.required{color:#e74c3c;margin-left:2px}.form-control{padding:5px 10px;width:100%;max-width:100%;border:1px solid #8CBBA8;border-radius:8px;background-color:#fff;font-size:14px;font-weight:400;font-family:inherit;color:#1f2b41;transition:border-color .2s,box-shadow .2s;box-sizing:border-box}.form-control:focus{outline:none;border-color:#3498db;box-shadow:0 0 0 3px #3498db1a}.form-control:disabled{background-color:#ecf0f1;cursor:not-allowed}textarea.form-control{resize:vertical;min-height:100px}select.form-control{cursor:pointer;appearance:none;background-image:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23333' d='M6 9L1 4h10z'/%3E%3C/svg%3E\");background-repeat:no-repeat;background-position:right 8px center;padding-right:40px}.checkbox-wrapper{display:flex;align-items:center;gap:8px}input[type=checkbox]{width:18px;height:18px;cursor:pointer}.checkbox-label{cursor:pointer;margin:0}.file-upload-container{display:flex;align-items:center;gap:20px;padding:20px;background:#fff;max-width:100%;box-sizing:border-box;flex-wrap:wrap}.material-icons{font-family:Material Icons!important;border-radius:4px;display:inline-block;width:40px;padding:8px;height:40px}.file-field-wrapper{width:100%;margin-top:16px;max-width:100%;box-sizing:border-box}.photo-preview-circle{width:100px;height:100px;border-radius:50%;overflow:hidden;border:2px solid #ddd;cursor:pointer;transition:border-color .2s}.photo-preview-circle:hover{border-color:#3498db}.preview-image,.default-photo{width:100%;height:100%;display:flex;align-items:center;justify-content:center}.preview-image img{width:100%;height:100%;object-fit:cover}.default-photo{background:#f0f0f0;color:#999;font-size:40px}.file-info{display:flex;flex-direction:column;gap:8px}.btn-delete{border:none;border-radius:4px;cursor:pointer;font-size:14px;padding:0}.upload-btn-group{display:flex;align-items:center;border:1px solid #d3d3d3;border-radius:8px;background:#fff;overflow:hidden;width:fit-content}.btn-upload{background:#fff;color:#222;border:none;padding:0 18px;font-size:16px;border-right:1px solid #e0e0e0;border-radius:8px 0 0 8px;outline:none;box-shadow:none;cursor:pointer;height:40px;transition:background .2s}.btn-upload-icon{background:#f5f5f5;border:none;border-radius:0 8px 8px 0;display:flex;align-items:center;justify-content:center;width:48px;height:40px;cursor:pointer;transition:background .2s}.btn-upload-icon i.material-icons{font-size:22px;color:#222}.btn-upload:hover,.btn-upload-icon:hover{background:#f0f0f0}.btn-delete{background:#fff;color:red}.btn-delete:hover{background:#f0f0f0}.file-name{font-size:12px;color:#666;margin:10px 8px 8px}.file-label{font-weight:600;margin-bottom:6px;color:#151d48;font-size:14px;display:block}.radio-label{font-weight:600;margin-bottom:15px;color:#151d48;font-size:14px;display:block}.radio-group{display:flex;gap:20px;align-items:center}.radio-item{display:flex;align-items:center;gap:6px}input[type=radio]{width:18px;height:18px;cursor:pointer;accent-color:#3498db}.radio-option-label{cursor:pointer;margin:0;font-weight:400}.hint{font-size:12px;color:#7f8c8d;margin-top:4px}.error-message{color:#e74c3c;font-size:12px;margin-top:4px}.form-actions{display:flex;gap:8px;align-items:center;justify-content:space-between;gap:12px;padding-top:5px}.btn{padding:8px 20px;border:none;border-radius:7px;font-size:12px;font-weight:600;cursor:pointer;transition:all .2s}.btn-primary{background-color:#006aff;color:#fff}.btn-primary:hover:not(:disabled){background-color:#2980b9}.btn-primary:disabled{background-color:#bdc3c7;cursor:not-allowed}.btn-secondary{background-color:#95a5a6;color:#fff}.btn-secondary:hover{background-color:#7f8c8d}.btn-outline{background-color:#303030;color:#fff}.btn-outline:hover{background-color:#2b2b2b;color:#fff}.month-year-wrapper{position:relative;display:flex;align-items:center;width:100%}.month-year-wrapper .form-control{padding-right:45px}.month-picker-hidden{position:absolute;opacity:0;pointer-events:none;width:0;height:0;border:none;padding:0;margin:0}.month-picker-btn{position:absolute;right:5px;background:transparent;border:none;cursor:pointer;padding:5px;display:flex;align-items:center;justify-content:center;color:#666;transition:color .2s;z-index:1}.month-picker-btn:hover:not(:disabled){color:#3498db}.month-picker-btn:disabled{cursor:not-allowed;opacity:.5}.month-picker-btn .material-icons{font-size:20px;width:auto;height:auto;padding:0}.search-select-wrapper{position:relative;width:100%}.search-select-input{padding-right:10px}.search-select-dropdown{position:absolute;top:calc(100% + 4px);left:0;right:auto;min-width:100%;max-width:calc(100vw - 16px);background:#fff;border:1px solid #d3d3d3;border-radius:8px;max-height:220px;overflow-y:auto;box-shadow:0 4px 10px #00000014;z-index:5;padding:6px 0;transform:translate(0);transition:transform .1s ease-out}.search-select-option{padding:8px 12px;cursor:pointer;display:flex;gap:8px;align-items:center;border-bottom:1px solid #f2f2f2}.search-select-option:last-child{border-bottom:none}.search-select-option:hover{background:#f5f9ff}.option-code{color:#0052cc;font-weight:700;min-width:90px}.option-name{color:#151d48;font-weight:500}.time-picker-wrapper{position:relative;display:flex;align-items:center;width:100%}.time-input{padding-right:45px;flex:1}.time-picker-btn{position:absolute;right:5px;background:transparent;border:none;cursor:pointer;padding:5px;display:flex;align-items:center;justify-content:center;color:#666;transition:color .2s;z-index:1}.time-picker-btn:hover:not(:disabled){color:#3498db}.time-picker-btn:disabled{cursor:not-allowed;opacity:.5}.time-picker-btn .material-icons{font-size:20px;width:auto;height:auto;padding:0}input[type=time]{cursor:pointer}input[type=time]::-webkit-calendar-picker-indicator{cursor:pointer;opacity:0;position:absolute;right:0;width:100%;height:100%}.date-picker-field{width:100%}.date-picker-field ::ng-deep .mat-mdc-form-field{width:100%}.date-picker-field ::ng-deep .mat-mdc-text-field-wrapper{background-color:#fff}.date-picker-field ::ng-deep .mdc-text-field--outlined .mdc-notched-outline__leading,.date-picker-field ::ng-deep .mdc-text-field--outlined .mdc-notched-outline__notch,.date-picker-field ::ng-deep .mdc-text-field--outlined .mdc-notched-outline__trailing{border-color:#8cbba8}.date-picker-field ::ng-deep .mdc-text-field--outlined:not(.mdc-text-field--disabled) .mdc-notched-outline__leading,.date-picker-field ::ng-deep .mdc-text-field--outlined:not(.mdc-text-field--disabled) .mdc-notched-outline__notch,.date-picker-field ::ng-deep .mdc-text-field--outlined:not(.mdc-text-field--disabled) .mdc-notched-outline__trailing{border-color:#8cbba8}.date-picker-field ::ng-deep .mdc-text-field--outlined.mdc-text-field--focused .mdc-notched-outline__leading,.date-picker-field ::ng-deep .mdc-text-field--outlined.mdc-text-field--focused .mdc-notched-outline__notch,.date-picker-field ::ng-deep .mdc-text-field--outlined.mdc-text-field--focused .mdc-notched-outline__trailing{border-color:#3498db}.date-picker-field.error-border ::ng-deep .mdc-text-field--outlined .mdc-notched-outline__leading,.date-picker-field.error-border ::ng-deep .mdc-text-field--outlined .mdc-notched-outline__notch,.date-picker-field.error-border ::ng-deep .mdc-text-field--outlined .mdc-notched-outline__trailing{border-color:red!important}.date-picker-field ::ng-deep .mat-mdc-form-field-subscript-wrapper{display:none}.date-picker-field ::ng-deep .mat-mdc-form-field-input-control input{font-family:Poppins!important;font-size:14px;font-weight:400;color:#1f2b41}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "component", type: FvEntryFieldComponent, selector: "fv-entry-field", inputs: ["label", "placeholder", "schema", "control", "disabled", "readonly", "type", "allowAlphabetsOnly", "maxLength"], outputs: ["valueChange", "blur", "focus"] }, { kind: "component", type: FvNumberFieldComponent, selector: "fv-number-field", inputs: ["label", "placeholder", "schema", "control", "disabled", "readonly", "min", "max", "step"], outputs: ["valueChange", "blur", "focus"] }, { kind: "component", type: FvDropdownComponent, selector: "fv-dropdown", inputs: ["label", "placeholder", "options", "schema", "control", "disabled"], outputs: ["valueChange", "blur", "focus"] }, { kind: "component", type: FvRadioGroupComponent, selector: "fv-radio-group", inputs: ["label", "control", "options", "disabled", "required", "name"], outputs: ["valueChange"] }, { kind: "component", type: FvCheckboxComponent, selector: "fv-checkbox", inputs: ["label", "control", "disabled", "required"], outputs: ["valueChange"] }, { kind: "component", type: FvDateFieldComponent, selector: "fv-date-field", inputs: ["label", "schema", "control", "disabled", "readonly", "min", "max"], outputs: ["valueChange", "blur", "focus"] }, { kind: "component", type: FvMonthYearFieldComponent, selector: "fv-month-year-field", inputs: ["label", "schema", "control", "disabled", "readonly", "min", "max"], outputs: ["valueChange", "blur", "focus"] }, { kind: "component", type: FvFileSelectorComponent, selector: "fv-file-selector", inputs: ["label", "placeholder", "schema", "control", "disabled", "accept", "maxSize"], outputs: ["valueChange", "blur"] }, { kind: "component", type: FvImageSelectorComponent, selector: "fv-image-selector", inputs: ["label", "placeholder", "schema", "control", "disabled", "maxSize"], outputs: ["valueChange", "blur"] }, { kind: "component", type: FvRichTextEditorComponent, selector: "fv-rich-text-editor", inputs: ["label", "placeholder", "schema", "control", "disabled", "readonly", "minHeight", "showToolbar"], outputs: ["valueChange", "blur", "focus"] }, { kind: "component", type: FvNameCodeComponent, selector: "fv-name-code", inputs: ["label", "placeholder", "options", "schema", "control", "disabled"], outputs: ["selectionChange"] }, { kind: "component", type: FvPhoneFieldComponent, selector: "fv-phone-field", inputs: ["label", "control", "disabled", "schema"], outputs: ["blur", "focus"] }, { kind: "component", type: FvUanFieldComponent, selector: "fv-uan-field", inputs: ["label", "control", "disabled", "schema"], outputs: ["blur", "focus"] }, { kind: "component", type: FvPfFieldComponent, selector: "fv-pf-field", inputs: ["label", "control", "disabled", "schema"], outputs: ["blur", "focus"] }, { kind: "component", type: FvEsiFieldComponent, selector: "fv-esi-field", inputs: ["label", "control", "disabled", "schema"], outputs: ["blur", "focus"] }, { kind: "component", type: FvIfscFieldComponent, selector: "fv-ifsc-field", inputs: ["label", "control", "disabled", "schema"], outputs: ["blur", "focus"] }, { kind: "component", type: FvMicrFieldComponent, selector: "fv-micr-field", inputs: ["label", "control", "disabled", "schema"], outputs: ["blur", "focus"] }, { kind: "component", type: FvIbanFieldComponent, selector: "fv-iban-field", inputs: ["label", "control", "disabled", "schema"], outputs: ["blur", "focus"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: AddUpdateFormComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'lib-add-update-form', standalone: true, imports: [
+                        CommonModule,
+                        ReactiveFormsModule,
+                        FvEntryFieldComponent,
+                        FvNumberFieldComponent,
+                        FvDropdownComponent,
+                        FvRadioGroupComponent,
+                        FvCheckboxComponent,
+                        FvDateFieldComponent,
+                        FvMonthYearFieldComponent,
+                        FvFileSelectorComponent,
+                        FvImageSelectorComponent,
+                        FvRichTextEditorComponent,
+                        FvRichTextEditorComponent,
+                        FvNameCodeComponent,
+                        FvPhoneFieldComponent,
+                        FvUanFieldComponent,
+                        FvPfFieldComponent,
+                        FvEsiFieldComponent,
+                        FvIfscFieldComponent,
+                        FvMicrFieldComponent,
+                        FvIbanFieldComponent,
+                    ], template: `
+    <div class="form-container">
+      <div class="form-header" *ngIf="config.formTitle">
+        <h2>{{ config.formTitle }}</h2>
+      </div>
+
+      <form [formGroup]="form" (ngSubmit)="handleSubmit()" class="dynamic-form">
+        <div *ngFor="let section of config.sections" class="form-section">
+          <h3 class="section-title" *ngIf="section.title">
+            {{ section.title }}
+          </h3>
+
+          <div class="fields-row">
+            <ng-container *ngFor="let column of section.fields">
+              <div
+                class="form-field-wrapper"
+                [ngClass]="'field-' + column.type"
+                [ngStyle]="column.hidden ? { display: 'none' } : {}"
+                [style.grid-column]="'span ' + (column.colSpan || 1)"
+              >
+                <ng-container
+                  *ngIf="
+                    ['text', 'email', 'password'].includes(column.type) &&
+                    !column.hidden
+                  "
+                >
+                  <fv-entry-field
+                    [label]="column.label"
+                    [placeholder]="column.placeholder || ''"
+                    [type]="
+                      column.type === 'password'
+                        ? 'password'
+                        : column.type === 'email'
+                        ? 'email'
+                        : 'text'
+                    "
+                    [control]="getControl(column.name)"
+                    [schema]="getSchema(column)"
+                    [disabled]="column.disabled || false"
+                    [readonly]="false"
+                    [allowAlphabetsOnly]="column.allowAlphabetsOnly || false"
+                    [maxLength]="column.maxLength || null"
+                    (valueChange)="handleFieldChange(column.name, $event)"
+                  >
+                  </fv-entry-field>
+                </ng-container>
+
+                <ng-container
+                  *ngIf="column.type === 'number' && !column.hidden"
+                >
+                  <fv-number-field
+                    [label]="column.label"
+                    [placeholder]="column.placeholder || ''"
+                    [control]="getControl(column.name)"
+                    [schema]="getSchema(column)"
+                    [disabled]="column.disabled || false"
+                    (valueChange)="handleFieldChange(column.name, $event)"
+                  >
+                  </fv-number-field>
+                </ng-container>
+
+                <ng-container
+                  *ngIf="column.type === 'select' && !column.hidden"
+                >
+                  <fv-dropdown
+                    [label]="column.label"
+                    [placeholder]="column.placeholder || 'Select option'"
+                    [options]="column.options || []"
+                    [control]="getControl(column.name)"
+                    [schema]="getSchema(column)"
+                    [disabled]="column.disabled || false"
+                    (valueChange)="handleFieldChange(column.name, $event)"
+                  >
+                  </fv-dropdown>
+                </ng-container>
+
+                <ng-container
+                  *ngIf="column.type === 'checkbox' && !column.hidden"
+                >
+                  <fv-checkbox
+                    [label]="column.label"
+                    [control]="getControl(column.name)"
+                    [disabled]="column.disabled || false"
+                    (valueChange)="handleFieldChange(column.name, $event)"
+                  >
+                  </fv-checkbox>
+                </ng-container>
+
+                <ng-container *ngIf="column.type === 'radio' && !column.hidden">
+                  <fv-radio-group
+                    [label]="column.label"
+                    [options]="column.options || []"
+                    [control]="getControl(column.name)"
+                    [disabled]="column.disabled || false"
+                    (valueChange)="handleFieldChange(column.name, $event)"
+                  >
+                  </fv-radio-group>
+                </ng-container>
+
+                <ng-container *ngIf="column.type === 'date' && !column.hidden">
+                  <fv-date-field
+                    [label]="column.label"
+                    [control]="getControl(column.name)"
+                    [schema]="getSchema(column)"
+                    [disabled]="column.disabled || false"
+                    (valueChange)="handleFieldChange(column.name, $event)"
+                  >
+                  </fv-date-field>
+                </ng-container>
+
+                <ng-container
+                  *ngIf="column.type === 'month-year' && !column.hidden"
+                >
+                  <fv-month-year-field
+                    [label]="column.label"
+                    [control]="getControl(column.name)"
+                    [schema]="getSchema(column)"
+                    [disabled]="column.disabled || false"
+                    (valueChange)="handleMonthYearChange(column.name, $event)"
+                  >
+                  </fv-month-year-field>
+                </ng-container>
+
+                <ng-container
+                  *ngIf="column.type === 'textarea' && !column.hidden"
+                >
+                  <fv-rich-text-editor
+                    [label]="column.label"
+                    [placeholder]="column.placeholder || ''"
+                    [control]="getControl(column.name)"
+                    [schema]="getSchema(column)"
+                    [disabled]="column.disabled || false"
+                    (valueChange)="handleFieldChange(column.name, $event)"
+                  >
+                  </fv-rich-text-editor>
+                </ng-container>
+
+                <ng-container *ngIf="column.type === 'file' && !column.hidden">
+                  <ng-container *ngIf="isImageField(column); else standardFile">
+                    <fv-image-selector
+                      [label]="column.label"
+                      [placeholder]="column.placeholder || 'Select image'"
+                      [control]="getControl(column.name)"
+                      [schema]="getSchema(column)"
+                      [disabled]="column.disabled || false"
+                      (valueChange)="onFileChange($event, column.name)"
+                    >
+                    </fv-image-selector>
+                  </ng-container>
+
+                  <ng-template #standardFile>
+                    <fv-file-selector
+                      [label]="column.label"
+                      [placeholder]="column.placeholder || 'Select file'"
+                      [accept]="column.accept || '*/*'"
+                      [control]="getControl(column.name)"
+                      [schema]="getSchema(column)"
+                      [disabled]="column.disabled || false"
+                      (valueChange)="onFileChange($event, column.name)"
+                    >
+                    </fv-file-selector>
+                  </ng-template>
+                </ng-container>
+
+                <ng-container
+                  *ngIf="column.type === 'name-code' && !column.hidden"
+                >
+                  <fv-name-code
+                    [label]="column.label"
+                    [placeholder]="column.placeholder || 'Search by Code or Name'"
+                    [options]="column.options ? mapSearchOptions(column.options) : []"
+                    [control]="getControl(column.name)"
+                    [schema]="getSchema(column)"
+                    [disabled]="column.disabled || false"
+                  >
+                  </fv-name-code>
+                </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>
+                </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>
+                </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>
+                </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>
+                </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>
+                </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>
+                </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>
+                </ng-container>
+              </div>
+            </ng-container>
+          </div>
+        </div>
+
+
+        <div class="form-actions">
+          <button
+            type="submit"
+            class="btn btn-primary"
+            [disabled]="form.invalid && submitted"
+          >
+            {{ config.submitLabel || 'Save' }}
+          </button>
+          <button
+            type="button"
+            class="btn btn-outline"
+            (click)="config.onCancel()"
+          >
+            {{ 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:10px;border-radius:8px;margin:0 auto;max-width:100%;box-sizing:border-box}.error-border{border-color:red!important}.hidden{display:none!important}.form-header{margin-bottom:10px}.form-header h2{margin:0;font-size:20px;font-weight:700;color:#303030}.dynamic-form{background:#fff;padding:10px;border-radius:6px;box-shadow:0 1px 3px #0000001a;max-width:100%;box-sizing:border-box}.form-section{margin-bottom:10px}.section-title{font-size:16px;font-weight:700;color:#303030;margin:0 0 16px;text-transform:uppercase;letter-spacing:.5px}.fields-row{display:grid;grid-template-columns:repeat(5,1fr);gap:16px;width:100%;box-sizing:border-box;overflow:visible}.form-field-wrapper{display:flex;position:relative;flex-direction:column;min-width:0;width:100%;box-sizing:border-box;overflow:visible}.password-toggle-btn{position:absolute;right:10px;top:32px;background:none;border:none;cursor:pointer;padding:4px;color:#666}.password-toggle-btn:hover{color:#333}.password-toggle-btn .material-icons{font-size:20px;width:auto;height:auto;padding:0}@media (min-width: 1200px) and (max-width: 1400px){.fields-row{grid-template-columns:repeat(5,1fr)}.form-control{width:180px;max-width:180px}}@media (max-width: 1200px){.fields-row{grid-template-columns:repeat(3,1fr)}.form-control{width:100%;max-width:100%}}@media (max-width: 992px){.fields-row{grid-template-columns:repeat(2,1fr);gap:12px}}@media (max-width: 768px){.fields-row{grid-template-columns:repeat(2,1fr);gap:10px}}@media (max-width: 640px){.fields-row{grid-template-columns:1fr;gap:12px}.form-field-wrapper{width:100%}}label{font-weight:600;margin-bottom:6px;color:#151d48;font-size:14px}.required{color:#e74c3c;margin-left:2px}.form-control{padding:5px 10px;width:100%;max-width:100%;border:1px solid #8CBBA8;border-radius:8px;background-color:#fff;font-size:14px;font-weight:400;font-family:inherit;color:#1f2b41;transition:border-color .2s,box-shadow .2s;box-sizing:border-box}.form-control:focus{outline:none;border-color:#3498db;box-shadow:0 0 0 3px #3498db1a}.form-control:disabled{background-color:#ecf0f1;cursor:not-allowed}textarea.form-control{resize:vertical;min-height:100px}select.form-control{cursor:pointer;appearance:none;background-image:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23333' d='M6 9L1 4h10z'/%3E%3C/svg%3E\");background-repeat:no-repeat;background-position:right 8px center;padding-right:40px}.checkbox-wrapper{display:flex;align-items:center;gap:8px}input[type=checkbox]{width:18px;height:18px;cursor:pointer}.checkbox-label{cursor:pointer;margin:0}.file-upload-container{display:flex;align-items:center;gap:20px;padding:20px;background:#fff;max-width:100%;box-sizing:border-box;flex-wrap:wrap}.material-icons{font-family:Material Icons!important;border-radius:4px;display:inline-block;width:40px;padding:8px;height:40px}.file-field-wrapper{width:100%;margin-top:16px;max-width:100%;box-sizing:border-box}.photo-preview-circle{width:100px;height:100px;border-radius:50%;overflow:hidden;border:2px solid #ddd;cursor:pointer;transition:border-color .2s}.photo-preview-circle:hover{border-color:#3498db}.preview-image,.default-photo{width:100%;height:100%;display:flex;align-items:center;justify-content:center}.preview-image img{width:100%;height:100%;object-fit:cover}.default-photo{background:#f0f0f0;color:#999;font-size:40px}.file-info{display:flex;flex-direction:column;gap:8px}.btn-delete{border:none;border-radius:4px;cursor:pointer;font-size:14px;padding:0}.upload-btn-group{display:flex;align-items:center;border:1px solid #d3d3d3;border-radius:8px;background:#fff;overflow:hidden;width:fit-content}.btn-upload{background:#fff;color:#222;border:none;padding:0 18px;font-size:16px;border-right:1px solid #e0e0e0;border-radius:8px 0 0 8px;outline:none;box-shadow:none;cursor:pointer;height:40px;transition:background .2s}.btn-upload-icon{background:#f5f5f5;border:none;border-radius:0 8px 8px 0;display:flex;align-items:center;justify-content:center;width:48px;height:40px;cursor:pointer;transition:background .2s}.btn-upload-icon i.material-icons{font-size:22px;color:#222}.btn-upload:hover,.btn-upload-icon:hover{background:#f0f0f0}.btn-delete{background:#fff;color:red}.btn-delete:hover{background:#f0f0f0}.file-name{font-size:12px;color:#666;margin:10px 8px 8px}.file-label{font-weight:600;margin-bottom:6px;color:#151d48;font-size:14px;display:block}.radio-label{font-weight:600;margin-bottom:15px;color:#151d48;font-size:14px;display:block}.radio-group{display:flex;gap:20px;align-items:center}.radio-item{display:flex;align-items:center;gap:6px}input[type=radio]{width:18px;height:18px;cursor:pointer;accent-color:#3498db}.radio-option-label{cursor:pointer;margin:0;font-weight:400}.hint{font-size:12px;color:#7f8c8d;margin-top:4px}.error-message{color:#e74c3c;font-size:12px;margin-top:4px}.form-actions{display:flex;gap:8px;align-items:center;justify-content:space-between;gap:12px;padding-top:5px}.btn{padding:8px 20px;border:none;border-radius:7px;font-size:12px;font-weight:600;cursor:pointer;transition:all .2s}.btn-primary{background-color:#006aff;color:#fff}.btn-primary:hover:not(:disabled){background-color:#2980b9}.btn-primary:disabled{background-color:#bdc3c7;cursor:not-allowed}.btn-secondary{background-color:#95a5a6;color:#fff}.btn-secondary:hover{background-color:#7f8c8d}.btn-outline{background-color:#303030;color:#fff}.btn-outline:hover{background-color:#2b2b2b;color:#fff}.month-year-wrapper{position:relative;display:flex;align-items:center;width:100%}.month-year-wrapper .form-control{padding-right:45px}.month-picker-hidden{position:absolute;opacity:0;pointer-events:none;width:0;height:0;border:none;padding:0;margin:0}.month-picker-btn{position:absolute;right:5px;background:transparent;border:none;cursor:pointer;padding:5px;display:flex;align-items:center;justify-content:center;color:#666;transition:color .2s;z-index:1}.month-picker-btn:hover:not(:disabled){color:#3498db}.month-picker-btn:disabled{cursor:not-allowed;opacity:.5}.month-picker-btn .material-icons{font-size:20px;width:auto;height:auto;padding:0}.search-select-wrapper{position:relative;width:100%}.search-select-input{padding-right:10px}.search-select-dropdown{position:absolute;top:calc(100% + 4px);left:0;right:auto;min-width:100%;max-width:calc(100vw - 16px);background:#fff;border:1px solid #d3d3d3;border-radius:8px;max-height:220px;overflow-y:auto;box-shadow:0 4px 10px #00000014;z-index:5;padding:6px 0;transform:translate(0);transition:transform .1s ease-out}.search-select-option{padding:8px 12px;cursor:pointer;display:flex;gap:8px;align-items:center;border-bottom:1px solid #f2f2f2}.search-select-option:last-child{border-bottom:none}.search-select-option:hover{background:#f5f9ff}.option-code{color:#0052cc;font-weight:700;min-width:90px}.option-name{color:#151d48;font-weight:500}.time-picker-wrapper{position:relative;display:flex;align-items:center;width:100%}.time-input{padding-right:45px;flex:1}.time-picker-btn{position:absolute;right:5px;background:transparent;border:none;cursor:pointer;padding:5px;display:flex;align-items:center;justify-content:center;color:#666;transition:color .2s;z-index:1}.time-picker-btn:hover:not(:disabled){color:#3498db}.time-picker-btn:disabled{cursor:not-allowed;opacity:.5}.time-picker-btn .material-icons{font-size:20px;width:auto;height:auto;padding:0}input[type=time]{cursor:pointer}input[type=time]::-webkit-calendar-picker-indicator{cursor:pointer;opacity:0;position:absolute;right:0;width:100%;height:100%}.date-picker-field{width:100%}.date-picker-field ::ng-deep .mat-mdc-form-field{width:100%}.date-picker-field ::ng-deep .mat-mdc-text-field-wrapper{background-color:#fff}.date-picker-field ::ng-deep .mdc-text-field--outlined .mdc-notched-outline__leading,.date-picker-field ::ng-deep .mdc-text-field--outlined .mdc-notched-outline__notch,.date-picker-field ::ng-deep .mdc-text-field--outlined .mdc-notched-outline__trailing{border-color:#8cbba8}.date-picker-field ::ng-deep .mdc-text-field--outlined:not(.mdc-text-field--disabled) .mdc-notched-outline__leading,.date-picker-field ::ng-deep .mdc-text-field--outlined:not(.mdc-text-field--disabled) .mdc-notched-outline__notch,.date-picker-field ::ng-deep .mdc-text-field--outlined:not(.mdc-text-field--disabled) .mdc-notched-outline__trailing{border-color:#8cbba8}.date-picker-field ::ng-deep .mdc-text-field--outlined.mdc-text-field--focused .mdc-notched-outline__leading,.date-picker-field ::ng-deep .mdc-text-field--outlined.mdc-text-field--focused .mdc-notched-outline__notch,.date-picker-field ::ng-deep .mdc-text-field--outlined.mdc-text-field--focused .mdc-notched-outline__trailing{border-color:#3498db}.date-picker-field.error-border ::ng-deep .mdc-text-field--outlined .mdc-notched-outline__leading,.date-picker-field.error-border ::ng-deep .mdc-text-field--outlined .mdc-notched-outline__notch,.date-picker-field.error-border ::ng-deep .mdc-text-field--outlined .mdc-notched-outline__trailing{border-color:red!important}.date-picker-field ::ng-deep .mat-mdc-form-field-subscript-wrapper{display:none}.date-picker-field ::ng-deep .mat-mdc-form-field-input-control input{font-family:Poppins!important;font-size:14px;font-weight:400;color:#1f2b41}\n"] }]
+        }], ctorParameters: () => [{ type: i2.FormBuilder }, { type: i0.ElementRef }], propDecorators: { config: [{
+                type: Input
+            }], validationError: [{
+                type: Output
+            }] } });
+
+class FvControlsModule {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: FvControlsModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.2.14", ngImport: i0, type: FvControlsModule, imports: [CommonModule,
+            ReactiveFormsModule,
+            FvEntryFieldComponent,
+            FvDateFieldComponent,
+            FvMonthYearFieldComponent,
+            FvNumberFieldComponent,
+            FvCheckboxComponent,
+            FvRadioGroupComponent,
+            FvDropdownComponent,
+            FvFileSelectorComponent,
+            FvImageSelectorComponent,
+            FvRichTextEditorComponent,
+            FvNameCodeComponent,
+            AddUpdateFormComponent], exports: [FvEntryFieldComponent,
+            FvDateFieldComponent,
+            FvMonthYearFieldComponent,
+            FvNumberFieldComponent,
+            FvCheckboxComponent,
+            FvRadioGroupComponent,
+            FvDropdownComponent,
+            FvFileSelectorComponent,
+            FvImageSelectorComponent,
+            FvRichTextEditorComponent,
+            FvNameCodeComponent,
+            AddUpdateFormComponent] });
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: FvControlsModule, imports: [CommonModule,
+            ReactiveFormsModule,
+            FvEntryFieldComponent,
+            FvDateFieldComponent,
+            FvMonthYearFieldComponent,
+            FvNumberFieldComponent,
+            FvCheckboxComponent,
+            FvRadioGroupComponent,
+            FvDropdownComponent,
+            FvFileSelectorComponent,
+            FvImageSelectorComponent,
+            FvRichTextEditorComponent,
+            FvNameCodeComponent,
+            AddUpdateFormComponent] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: FvControlsModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [],
+                    imports: [
+                        CommonModule,
+                        ReactiveFormsModule,
+                        FvEntryFieldComponent,
+                        FvDateFieldComponent,
+                        FvMonthYearFieldComponent,
+                        FvNumberFieldComponent,
+                        FvCheckboxComponent,
+                        FvRadioGroupComponent,
+                        FvDropdownComponent,
+                        FvFileSelectorComponent,
+                        FvImageSelectorComponent,
+                        FvRichTextEditorComponent,
+                        FvNameCodeComponent,
+                        AddUpdateFormComponent,
+                    ],
+                    exports: [
+                        FvEntryFieldComponent,
+                        FvDateFieldComponent,
+                        FvMonthYearFieldComponent,
+                        FvNumberFieldComponent,
+                        FvCheckboxComponent,
+                        FvRadioGroupComponent,
+                        FvDropdownComponent,
+                        FvFileSelectorComponent,
+                        FvImageSelectorComponent,
+                        FvRichTextEditorComponent,
+                        FvNameCodeComponent,
+                        AddUpdateFormComponent,
+                    ],
+                }]
+        }] });
+
+class QueryFormComponent {
+    fb;
+    config;
+    onSubmit = new EventEmitter();
+    onExport = new EventEmitter();
+    onBack = new EventEmitter();
+    form;
+    showExportMenu = false;
+    showValidationError = false;
+    subs = [];
+    constructor(fb) {
+        this.fb = fb;
+    }
+    ngOnInit() {
+        const group = {};
+        if (this.config && this.config.rows) {
+            this.config.rows.forEach((row) => {
+                row.columns.forEach((col) => {
+                    const validators = [];
+                    if (col.required) {
+                        validators.push(Validators.required);
+                    }
+                    group[col.key] = new FormControl({ value: '', disabled: col.readonly || false }, validators);
+                });
+            });
+        }
+        this.form = this.fb.group(group);
+        // Subscribe to value changes to trigger onChange callbacks
+        this.subs.push(this.form.valueChanges.subscribe((value) => {
+            this.config.rows.forEach((row) => {
+                row.columns.forEach((col) => {
+                    if (col.onChange) {
+                        // Verify if this specific control changed? 
+                        // For simplicity, we can pass value[col.key] but strictly we should check diff.
+                        // However, simple approach:
+                        // This runs on every change, might be noisy but acceptable for now.
+                        // A better approach would be subscribing to individual controls if performance matters.
+                    }
+                });
+            });
+        }));
+        // Subscribe individually to support onChange
+        this.config.rows.forEach((row) => {
+            row.columns.forEach((col) => {
+                if (col.onChange) {
+                    const control = this.form.get(col.key);
+                    if (control) {
+                        this.subs.push(control.valueChanges.subscribe(val => {
+                            col.onChange(val);
+                        }));
+                    }
+                }
+            });
+        });
+    }
+    ngOnDestroy() {
+        this.subs.forEach((s) => s.unsubscribe());
+    }
+    getControl(key) {
+        return this.form.get(key);
+    }
+    getSchema(column) {
+        // Generate a simple schema based on column definition
+        const rules = [];
+        const errorPriority = [];
+        if (column.required) {
+            rules.push({ name: 'required', params: { enabled: true }, errorKey: 'ERR_REQUIRED' });
+            errorPriority.push('required');
+        }
+        return {
+            controlType: this.mapType(column.type),
+            rules: rules,
+            errorPriority: errorPriority
+        };
+    }
+    mapType(type) {
+        switch (type) {
+            case 'text': return 'EntryField';
+            case 'number': return 'NumberField';
+            case 'date': return 'DateField';
+            case 'dropdown': return 'Dropdown';
+            case 'month': return 'MonthYearField';
+            case 'file': return 'FileSelector';
+            case 'name-code': return 'Dropdown';
+            case 'phone': return 'PhoneField';
+            case 'uan': return 'UanField';
+            case 'pf': return 'PfField';
+            case 'esi': return 'EsiField';
+            case 'ifsc': return 'IfscField';
+            case 'micr': return 'MicrField';
+            case 'iban': return 'IbanField';
+            default: return 'EntryField';
+        }
+    }
+    mapSearchOptions(options) {
+        return options.map(opt => ({
+            code: opt.code || opt.value,
+            name: opt.name || opt.label || opt.value,
+            value: opt.value
+        }));
+    }
+    triggerFileUpload(columnKey) {
+        // FvFileSelector handles this internally, but if we needed external trigger...
+    }
+    toggleExportMenu(event) {
+        event.stopPropagation();
+        this.showExportMenu = !this.showExportMenu;
+    }
+    clickOutside(event) {
+        if (this.showExportMenu) {
+            this.showExportMenu = false;
+        }
+    }
+    exportToFormat(format) {
+        this.onExport.emit(format);
+        this.showExportMenu = false;
+    }
+    onButtonClick() {
+        if (this.form.valid) {
+            this.showValidationError = false;
+            this.onSubmit.emit(this.form.value);
+        }
+        else {
+            this.showValidationError = true;
+            this.form.markAllAsTouched();
+        }
+    }
+    onBackClick() {
+        this.onBack.emit();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: QueryFormComponent, deps: [{ token: i2.FormBuilder }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: QueryFormComponent, isStandalone: true, selector: "lib-query-form", inputs: { config: "config" }, outputs: { onSubmit: "onSubmit", onExport: "onExport", onBack: "onBack" }, host: { listeners: { "document:click": "clickOutside($event)" } }, ngImport: i0, template: `
+    <div class="query-form-container">
+      <div class="d-flex cont">
+        <h2 class="form-title">{{ config.title }}</h2>
+
+        <div
+          class="export-buttons"
+          *ngIf="
+            config.showExportButton &&
+            config.exportFormats &&
+            config.exportFormats.length > 0
+          "
+        >
+          <div class="export-menu-container">
+            <button
+              type="button"
+              class="export-btn menu-trigger"
+              (click)="toggleExportMenu($event)"
+              title="Toggle export options"
+            >
+              <i class="material-icons">file_download</i>
+              <i class="material-icons arrow">arrow_drop_down</i>
+            </button>
+            <div class="export-menu" *ngIf="showExportMenu">
+              <button
+                type="button"
+                *ngFor="let format of config.exportFormats"
+                class="menu-item"
+                (click)="exportToFormat(format)"
+                [attr.title]="'Export as ' + format.toUpperCase()"
+              >
+                Export as {{ format.toUpperCase() }}
+              </button>
+            </div>
+          </div>
+        </div>
+      </div>
+      
+      <!-- Validation Error Message -->
+      <div *ngIf="showValidationError" class="validation-message">
+        <i class="material-icons">error</i>
+        Please fill all required fields
+      </div>
+
+      <div class="form-content">
+        <form [formGroup]="form">
+          <div
+            *ngFor="let row of config.rows; let rowIndex = index"
+            class="form-row"
+          >
+            <div *ngFor="let column of row.columns" class="form-field">
+             
+              <!-- Dropdown -->
+              <ng-container *ngIf="column.type === 'dropdown'">
+                <fv-dropdown
+                  [label]="column.label"
+                  [placeholder]="column.placeholder || 'Select option'"
+                  [options]="column.options || []"
+                  [control]="getControl(column.key)"
+                  [schema]="getSchema(column)"
+                  [disabled]="column.readonly || false"
+                >
+                </fv-dropdown>
+              </ng-container>
+
+              <!-- Text Input -->
+              <ng-container *ngIf="column.type === 'text'">
+                <fv-entry-field
+                  [label]="column.label"
+                  [placeholder]="column.placeholder || ''"
+                  type="text"
+                  [control]="getControl(column.key)"
+                  [schema]="getSchema(column)"
+                  [disabled]="column.readonly || false"
+                >
+                </fv-entry-field>
+              </ng-container>
+
+              <!-- Number Input -->
+              <ng-container *ngIf="column.type === 'number'">
+                <fv-number-field
+                  [label]="column.label"
+                  [placeholder]="column.placeholder || ''"
+                  [control]="getControl(column.key)"
+                  [schema]="getSchema(column)"
+                  [disabled]="column.readonly || false"
+                >
+                </fv-number-field>
+              </ng-container>
+
+              <!-- Date Input -->
+              <ng-container *ngIf="column.type === 'date'">
+                <fv-date-field
+                  [label]="column.label"
+                  [control]="getControl(column.key)"
+                  [schema]="getSchema(column)"
+                  [disabled]="column.readonly || false"
+                >
+                </fv-date-field>
+              </ng-container>
+
+              <!-- Month/Year Input -->
+              <ng-container *ngIf="column.type === 'month'">
+                <fv-month-year-field
+                  [label]="column.label"
+                  [control]="getControl(column.key)"
+                  [schema]="getSchema(column)"
+                  [disabled]="column.readonly || false"
+                >
+                </fv-month-year-field>
+              </ng-container>
+
+              <!-- File Upload -->
+              <ng-container *ngIf="column.type === 'file'">
+                <fv-file-selector
+                  [label]="column.label"
+                  [placeholder]="column.placeholder || 'Select file'"
+                  [accept]="column.accept || '*/*'"
+                  [control]="getControl(column.key)"
+                  [schema]="getSchema(column)"
+                  [disabled]="column.readonly || false"
+                >
+                </fv-file-selector>
+              </ng-container>
+
+              <!-- Name Code Field -->
+              <ng-container *ngIf="column.type === 'name-code'">
+                <fv-name-code
+                  [label]="column.label"
+                  [placeholder]="column.placeholder || 'Search by Code or Name'"
+                  [options]="mapSearchOptions(column.options || [])"
+                  [control]="getControl(column.key)"
+                  [schema]="getSchema(column)"
+                  [disabled]="column.readonly || false"
+                >
+                </fv-name-code>
+              </ng-container>
+
+                <ng-container *ngIf="column.type === 'phone'">
+                  <fv-phone-field [label]="column.label" [control]="getControl(column.key)" [schema]="getSchema(column)" [disabled]="column.readonly || false"></fv-phone-field>
+                </ng-container>
+
+                <ng-container *ngIf="column.type === 'uan'">
+                  <fv-uan-field [label]="column.label" [control]="getControl(column.key)" [schema]="getSchema(column)" [disabled]="column.readonly || false"></fv-uan-field>
+                </ng-container>
+
+                <ng-container *ngIf="column.type === 'pf'">
+                  <fv-pf-field [label]="column.label" [control]="getControl(column.key)" [schema]="getSchema(column)" [disabled]="column.readonly || false"></fv-pf-field>
+                </ng-container>
+
+                <ng-container *ngIf="column.type === 'esi'">
+                  <fv-esi-field [label]="column.label" [control]="getControl(column.key)" [schema]="getSchema(column)" [disabled]="column.readonly || false"></fv-esi-field>
+                </ng-container>
+
+                <ng-container *ngIf="column.type === 'ifsc'">
+                  <fv-ifsc-field [label]="column.label" [control]="getControl(column.key)" [schema]="getSchema(column)" [disabled]="column.readonly || false"></fv-ifsc-field>
+                </ng-container>
+
+                <ng-container *ngIf="column.type === 'micr'">
+                  <fv-micr-field [label]="column.label" [control]="getControl(column.key)" [schema]="getSchema(column)" [disabled]="column.readonly || false"></fv-micr-field>
+                </ng-container>
+
+                <ng-container *ngIf="column.type === 'iban'">
+                  <fv-iban-field [label]="column.label" [control]="getControl(column.key)" [schema]="getSchema(column)" [disabled]="column.readonly || false"></fv-iban-field>
+                </ng-container>
+            </div>
+          </div>
+
+          <!-- Buttons Row -->
+          <div class="button-row">
+            <button
+              type="button"
+              class="view-button"
+              (click)="onButtonClick()"
+              [attr.title]="config.buttonText || 'View'"
+            >
+              {{ config.buttonText || 'View' }}
+            </button>
+            <button
+              *ngIf="config.showBackButton"
+              type="button"
+              class="back-button"
+              (click)="onBackClick()"
+              [attr.title]="config.backButtonText || 'Back'"
+            >
+              {{ config.backButtonText || 'Back' }}
+            </button>
+          </div>
+        </form>
+      </div>
+    </div>
+  `, isInline: true, styles: ["@import\"https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap\";@import\"https://fonts.googleapis.com/icon?family=Material+Icons\";*{font-family:Poppins}.material-icons{font-family:Material Icons!important;font-size:22px;display:inline-block}.cont{display:flex;justify-content:space-between;align-items:center;margin-bottom:10px}.validation-message{background-color:#fee;color:#c33;padding:12px 16px;border-radius:8px;margin:10px 0;display:flex;align-items:center;gap:8px;font-size:14px;font-weight:500;border:1px solid #fcc}.export-buttons{display:flex;gap:10px}.export-btn{cursor:pointer;display:flex;align-items:center;gap:5px;transition:all .3s ease;border:none;padding:8px 16px;border-radius:7px;background:#006aff;color:#fff}.export-btn:hover{background:#0045a6;box-shadow:0 4px 8px #00000026}.export-menu-container{position:relative;border-radius:7px}.export-menu{position:absolute;top:100%;right:0;background:#fff;border-radius:4px;box-shadow:0 4px 12px #00000026;margin-top:5px;min-width:180px;z-index:1000}.menu-item{width:100%;color:#000;text-align:left;background:#fff;border:none;cursor:pointer;font-size:14px;transition:background .2s;padding:12px 16px;display:flex;align-items:center;gap:10px}.menu-item:hover{background:#f5f5f5}.query-form-container{background:#f2f2f2;border-radius:8px;padding:10px;margin:auto;box-shadow:0 2px 5px #0000001a;margin-bottom:1rem;overflow:visible}.form-title{font-size:20px;font-weight:700;color:#303030;margin:0;font-family:Poppins}.form-content{display:flex;flex-direction:column;gap:5px;background-color:#fff;padding:10px;border:.5px solid #cfcfcf;border-radius:12px;overflow:visible}.form-row{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));justify-content:flex-start;gap:20px;align-items:end;margin-bottom:15px;overflow:visible}.form-field{display:flex;flex-direction:column;width:100%;position:relative;overflow:visible}.view-button{padding:8px 15px;background:#006aff;color:#fff;border:none;border-radius:7px;font-size:14px;font-weight:600;cursor:pointer;transition:background-color .2s}.view-button:hover{background:#0045a6}.button-row{display:flex;justify-content:space-between;gap:10px;padding-top:5px;margin-top:10px;border-top:1px solid #eee}.back-button{padding:8px 15px;background-color:#303030;color:#fff;border:none;border-radius:7px;font-size:14px;font-weight:600;cursor:pointer;transition:background-color .2s}.back-button:hover{background-color:#000}@media (max-width: 768px){.form-row{grid-template-columns:1fr}.button-row{justify-content:center}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "component", type: FvEntryFieldComponent, selector: "fv-entry-field", inputs: ["label", "placeholder", "schema", "control", "disabled", "readonly", "type", "allowAlphabetsOnly", "maxLength"], outputs: ["valueChange", "blur", "focus"] }, { kind: "component", type: FvDropdownComponent, selector: "fv-dropdown", inputs: ["label", "placeholder", "options", "schema", "control", "disabled"], outputs: ["valueChange", "blur", "focus"] }, { kind: "component", type: FvNumberFieldComponent, selector: "fv-number-field", inputs: ["label", "placeholder", "schema", "control", "disabled", "readonly", "min", "max", "step"], outputs: ["valueChange", "blur", "focus"] }, { kind: "component", type: FvDateFieldComponent, selector: "fv-date-field", inputs: ["label", "schema", "control", "disabled", "readonly", "min", "max"], outputs: ["valueChange", "blur", "focus"] }, { kind: "component", type: FvMonthYearFieldComponent, selector: "fv-month-year-field", inputs: ["label", "schema", "control", "disabled", "readonly", "min", "max"], outputs: ["valueChange", "blur", "focus"] }, { kind: "component", type: FvFileSelectorComponent, selector: "fv-file-selector", inputs: ["label", "placeholder", "schema", "control", "disabled", "accept", "maxSize"], outputs: ["valueChange", "blur"] }, { kind: "component", type: FvNameCodeComponent, selector: "fv-name-code", inputs: ["label", "placeholder", "options", "schema", "control", "disabled"], outputs: ["selectionChange"] }, { kind: "component", type: FvPhoneFieldComponent, selector: "fv-phone-field", inputs: ["label", "control", "disabled", "schema"], outputs: ["blur", "focus"] }, { kind: "component", type: FvUanFieldComponent, selector: "fv-uan-field", inputs: ["label", "control", "disabled", "schema"], outputs: ["blur", "focus"] }, { kind: "component", type: FvPfFieldComponent, selector: "fv-pf-field", inputs: ["label", "control", "disabled", "schema"], outputs: ["blur", "focus"] }, { kind: "component", type: FvEsiFieldComponent, selector: "fv-esi-field", inputs: ["label", "control", "disabled", "schema"], outputs: ["blur", "focus"] }, { kind: "component", type: FvIfscFieldComponent, selector: "fv-ifsc-field", inputs: ["label", "control", "disabled", "schema"], outputs: ["blur", "focus"] }, { kind: "component", type: FvMicrFieldComponent, selector: "fv-micr-field", inputs: ["label", "control", "disabled", "schema"], outputs: ["blur", "focus"] }, { kind: "component", type: FvIbanFieldComponent, selector: "fv-iban-field", inputs: ["label", "control", "disabled", "schema"], outputs: ["blur", "focus"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: QueryFormComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'lib-query-form', standalone: true, imports: [
+                        CommonModule,
+                        ReactiveFormsModule,
+                        FvEntryFieldComponent,
+                        FvDropdownComponent,
+                        FvNumberFieldComponent,
+                        FvDateFieldComponent,
+                        FvMonthYearFieldComponent,
+                        FvFileSelectorComponent,
+                        FvNameCodeComponent,
+                        FvPhoneFieldComponent,
+                        FvUanFieldComponent,
+                        FvPfFieldComponent,
+                        FvEsiFieldComponent,
+                        FvIfscFieldComponent,
+                        FvMicrFieldComponent,
+                        FvIbanFieldComponent,
+                    ], template: `
+    <div class="query-form-container">
+      <div class="d-flex cont">
+        <h2 class="form-title">{{ config.title }}</h2>
+
+        <div
+          class="export-buttons"
+          *ngIf="
+            config.showExportButton &&
+            config.exportFormats &&
+            config.exportFormats.length > 0
+          "
+        >
+          <div class="export-menu-container">
+            <button
+              type="button"
+              class="export-btn menu-trigger"
+              (click)="toggleExportMenu($event)"
+              title="Toggle export options"
+            >
+              <i class="material-icons">file_download</i>
+              <i class="material-icons arrow">arrow_drop_down</i>
+            </button>
+            <div class="export-menu" *ngIf="showExportMenu">
+              <button
+                type="button"
+                *ngFor="let format of config.exportFormats"
+                class="menu-item"
+                (click)="exportToFormat(format)"
+                [attr.title]="'Export as ' + format.toUpperCase()"
+              >
+                Export as {{ format.toUpperCase() }}
+              </button>
+            </div>
+          </div>
+        </div>
+      </div>
+      
+      <!-- Validation Error Message -->
+      <div *ngIf="showValidationError" class="validation-message">
+        <i class="material-icons">error</i>
+        Please fill all required fields
+      </div>
+
+      <div class="form-content">
+        <form [formGroup]="form">
+          <div
+            *ngFor="let row of config.rows; let rowIndex = index"
+            class="form-row"
+          >
+            <div *ngFor="let column of row.columns" class="form-field">
+             
+              <!-- Dropdown -->
+              <ng-container *ngIf="column.type === 'dropdown'">
+                <fv-dropdown
+                  [label]="column.label"
+                  [placeholder]="column.placeholder || 'Select option'"
+                  [options]="column.options || []"
+                  [control]="getControl(column.key)"
+                  [schema]="getSchema(column)"
+                  [disabled]="column.readonly || false"
+                >
+                </fv-dropdown>
+              </ng-container>
+
+              <!-- Text Input -->
+              <ng-container *ngIf="column.type === 'text'">
+                <fv-entry-field
+                  [label]="column.label"
+                  [placeholder]="column.placeholder || ''"
+                  type="text"
+                  [control]="getControl(column.key)"
+                  [schema]="getSchema(column)"
+                  [disabled]="column.readonly || false"
+                >
+                </fv-entry-field>
+              </ng-container>
+
+              <!-- Number Input -->
+              <ng-container *ngIf="column.type === 'number'">
+                <fv-number-field
+                  [label]="column.label"
+                  [placeholder]="column.placeholder || ''"
+                  [control]="getControl(column.key)"
+                  [schema]="getSchema(column)"
+                  [disabled]="column.readonly || false"
+                >
+                </fv-number-field>
+              </ng-container>
+
+              <!-- Date Input -->
+              <ng-container *ngIf="column.type === 'date'">
+                <fv-date-field
+                  [label]="column.label"
+                  [control]="getControl(column.key)"
+                  [schema]="getSchema(column)"
+                  [disabled]="column.readonly || false"
+                >
+                </fv-date-field>
+              </ng-container>
+
+              <!-- Month/Year Input -->
+              <ng-container *ngIf="column.type === 'month'">
+                <fv-month-year-field
+                  [label]="column.label"
+                  [control]="getControl(column.key)"
+                  [schema]="getSchema(column)"
+                  [disabled]="column.readonly || false"
+                >
+                </fv-month-year-field>
+              </ng-container>
+
+              <!-- File Upload -->
+              <ng-container *ngIf="column.type === 'file'">
+                <fv-file-selector
+                  [label]="column.label"
+                  [placeholder]="column.placeholder || 'Select file'"
+                  [accept]="column.accept || '*/*'"
+                  [control]="getControl(column.key)"
+                  [schema]="getSchema(column)"
+                  [disabled]="column.readonly || false"
+                >
+                </fv-file-selector>
+              </ng-container>
+
+              <!-- Name Code Field -->
+              <ng-container *ngIf="column.type === 'name-code'">
+                <fv-name-code
+                  [label]="column.label"
+                  [placeholder]="column.placeholder || 'Search by Code or Name'"
+                  [options]="mapSearchOptions(column.options || [])"
+                  [control]="getControl(column.key)"
+                  [schema]="getSchema(column)"
+                  [disabled]="column.readonly || false"
+                >
+                </fv-name-code>
+              </ng-container>
+
+                <ng-container *ngIf="column.type === 'phone'">
+                  <fv-phone-field [label]="column.label" [control]="getControl(column.key)" [schema]="getSchema(column)" [disabled]="column.readonly || false"></fv-phone-field>
+                </ng-container>
+
+                <ng-container *ngIf="column.type === 'uan'">
+                  <fv-uan-field [label]="column.label" [control]="getControl(column.key)" [schema]="getSchema(column)" [disabled]="column.readonly || false"></fv-uan-field>
+                </ng-container>
+
+                <ng-container *ngIf="column.type === 'pf'">
+                  <fv-pf-field [label]="column.label" [control]="getControl(column.key)" [schema]="getSchema(column)" [disabled]="column.readonly || false"></fv-pf-field>
+                </ng-container>
+
+                <ng-container *ngIf="column.type === 'esi'">
+                  <fv-esi-field [label]="column.label" [control]="getControl(column.key)" [schema]="getSchema(column)" [disabled]="column.readonly || false"></fv-esi-field>
+                </ng-container>
+
+                <ng-container *ngIf="column.type === 'ifsc'">
+                  <fv-ifsc-field [label]="column.label" [control]="getControl(column.key)" [schema]="getSchema(column)" [disabled]="column.readonly || false"></fv-ifsc-field>
+                </ng-container>
+
+                <ng-container *ngIf="column.type === 'micr'">
+                  <fv-micr-field [label]="column.label" [control]="getControl(column.key)" [schema]="getSchema(column)" [disabled]="column.readonly || false"></fv-micr-field>
+                </ng-container>
+
+                <ng-container *ngIf="column.type === 'iban'">
+                  <fv-iban-field [label]="column.label" [control]="getControl(column.key)" [schema]="getSchema(column)" [disabled]="column.readonly || false"></fv-iban-field>
+                </ng-container>
+            </div>
+          </div>
+
+          <!-- Buttons Row -->
+          <div class="button-row">
+            <button
+              type="button"
+              class="view-button"
+              (click)="onButtonClick()"
+              [attr.title]="config.buttonText || 'View'"
+            >
+              {{ config.buttonText || 'View' }}
+            </button>
+            <button
+              *ngIf="config.showBackButton"
+              type="button"
+              class="back-button"
+              (click)="onBackClick()"
+              [attr.title]="config.backButtonText || 'Back'"
+            >
+              {{ config.backButtonText || 'Back' }}
+            </button>
+          </div>
+        </form>
+      </div>
+    </div>
+  `, styles: ["@import\"https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap\";@import\"https://fonts.googleapis.com/icon?family=Material+Icons\";*{font-family:Poppins}.material-icons{font-family:Material Icons!important;font-size:22px;display:inline-block}.cont{display:flex;justify-content:space-between;align-items:center;margin-bottom:10px}.validation-message{background-color:#fee;color:#c33;padding:12px 16px;border-radius:8px;margin:10px 0;display:flex;align-items:center;gap:8px;font-size:14px;font-weight:500;border:1px solid #fcc}.export-buttons{display:flex;gap:10px}.export-btn{cursor:pointer;display:flex;align-items:center;gap:5px;transition:all .3s ease;border:none;padding:8px 16px;border-radius:7px;background:#006aff;color:#fff}.export-btn:hover{background:#0045a6;box-shadow:0 4px 8px #00000026}.export-menu-container{position:relative;border-radius:7px}.export-menu{position:absolute;top:100%;right:0;background:#fff;border-radius:4px;box-shadow:0 4px 12px #00000026;margin-top:5px;min-width:180px;z-index:1000}.menu-item{width:100%;color:#000;text-align:left;background:#fff;border:none;cursor:pointer;font-size:14px;transition:background .2s;padding:12px 16px;display:flex;align-items:center;gap:10px}.menu-item:hover{background:#f5f5f5}.query-form-container{background:#f2f2f2;border-radius:8px;padding:10px;margin:auto;box-shadow:0 2px 5px #0000001a;margin-bottom:1rem;overflow:visible}.form-title{font-size:20px;font-weight:700;color:#303030;margin:0;font-family:Poppins}.form-content{display:flex;flex-direction:column;gap:5px;background-color:#fff;padding:10px;border:.5px solid #cfcfcf;border-radius:12px;overflow:visible}.form-row{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));justify-content:flex-start;gap:20px;align-items:end;margin-bottom:15px;overflow:visible}.form-field{display:flex;flex-direction:column;width:100%;position:relative;overflow:visible}.view-button{padding:8px 15px;background:#006aff;color:#fff;border:none;border-radius:7px;font-size:14px;font-weight:600;cursor:pointer;transition:background-color .2s}.view-button:hover{background:#0045a6}.button-row{display:flex;justify-content:space-between;gap:10px;padding-top:5px;margin-top:10px;border-top:1px solid #eee}.back-button{padding:8px 15px;background-color:#303030;color:#fff;border:none;border-radius:7px;font-size:14px;font-weight:600;cursor:pointer;transition:background-color .2s}.back-button:hover{background-color:#000}@media (max-width: 768px){.form-row{grid-template-columns:1fr}.button-row{justify-content:center}}\n"] }]
+        }], ctorParameters: () => [{ type: i2.FormBuilder }], propDecorators: { config: [{
+                type: Input
+            }], onSubmit: [{
+                type: Output
+            }], onExport: [{
+                type: Output
+            }], onBack: [{
+                type: Output
+            }], clickOutside: [{
+                type: HostListener,
+                args: ['document:click', ['$event']]
+            }] } });
 
 /*
  * Public API Surface of fv-controls
@@ -1145,5 +3549,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
  * Generated bundle index. Do not edit.
  */
 
-export { FvCheckboxComponent, FvControlsModule, FvDateFieldComponent, FvDropdownComponent, FvEntryFieldComponent, FvFileSelectorComponent, FvImageSelectorComponent, FvMonthYearFieldComponent, FvNumberFieldComponent, FvRadioGroupComponent, FvRichTextEditorComponent };
+export { AddUpdateFormComponent, FvCheckboxComponent, FvControlsModule, FvDateFieldComponent, FvDropdownComponent, FvEntryFieldComponent, FvEsiFieldComponent, FvFileSelectorComponent, FvIbanFieldComponent, FvIfscFieldComponent, FvImageSelectorComponent, FvMicrFieldComponent, FvMonthYearFieldComponent, FvNameCodeComponent, FvNumberFieldComponent, FvPfFieldComponent, FvPhoneFieldComponent, FvRadioGroupComponent, FvRichTextEditorComponent, FvUanFieldComponent, QueryFormComponent };
 //# sourceMappingURL=fovestta2-web-angular.mjs.map