@fovestta2/web-angular 1.0.21 → 1.0.23

package/fesm2022/fovestta2-web-angular.mjs

@@ -659,7 +659,7 @@ class FvDropdownComponent {
             console.error('FvDropdown: control is required');
             return;
         }
-        this.filteredOptions = this.options;
+        this.filterOptions('');
         if (!this.schema) {
             console.warn('FvDropdown: schema is not provided, validation will be skipped');
             return;
@@ -669,7 +669,7 @@ class FvDropdownComponent {
             this.validateValue(value);
             this.valueChange.emit(value);
             // Sync search text
-            const selected = this.options.find(opt => opt.value === value);
+            const selected = this.findOption(value);
             if (selected) {
                 this.searchControl.setValue(selected.label, { emitEvent: false });
             }
@@ -684,7 +684,7 @@ class FvDropdownComponent {
         // Validate initial value
         this.validateValue(this.control.value);
         if (this.control.value) {
-            const selected = this.options.find(opt => opt.value === this.control.value);
+            const selected = this.findOption(this.control.value);
             if (selected) {
                 this.searchControl.setValue(selected.label, { emitEvent: false });
             }
@@ -695,11 +695,8 @@ class FvDropdownComponent {
     }
     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);
-            }
+            this.filterOptions(this.searchControl.value || '');
         }
         if (changes['disabled']) {
             if (this.disabled) {
@@ -723,14 +720,72 @@ class FvDropdownComponent {
         }
     }
     filterOptions(term) {
-        if (!term) {
-            this.filteredOptions = this.options;
+        this.filteredOptions = this.generateViewItems(this.options, term);
+        // Adjust highlight index if needed (reset if search changed)
+        if (this.filteredOptions.length === 1 && !this.filteredOptions[0].isGroupLabel) {
+            this.highlightedIndex = 0;
         }
         else {
-            const lower = term.toLowerCase();
-            this.filteredOptions = this.options.filter(opt => opt.label.toLowerCase().includes(lower));
+            this.highlightedIndex = -1;
+        }
+    }
+    // Flattens the mixed options input into a view-ready list
+    generateViewItems(options, term) {
+        const result = [];
+        const lowerTerm = term ? term.toLowerCase() : '';
+        for (const item of options) {
+            if (this.isGroup(item)) {
+                // It's a group
+                let matchingItems = item.items;
+                if (lowerTerm) {
+                    matchingItems = item.items.filter(opt => opt.label.toLowerCase().includes(lowerTerm));
+                }
+                if (matchingItems.length > 0) {
+                    // Add header
+                    result.push({ isGroupLabel: true, label: item.label });
+                    // Add items
+                    matchingItems.forEach(opt => {
+                        result.push({
+                            isGroupLabel: false,
+                            label: opt.label,
+                            value: opt.value,
+                            option: opt,
+                            isChild: true
+                        });
+                    });
+                }
+            }
+            else {
+                // It's a standalone option
+                if (!lowerTerm || item.label.toLowerCase().includes(lowerTerm)) {
+                    result.push({
+                        isGroupLabel: false,
+                        label: item.label,
+                        value: item.value,
+                        option: item,
+                        isChild: false
+                    });
+                }
+            }
         }
-        this.highlightedIndex = this.filteredOptions.length === 1 ? 0 : -1;
+        return result;
+    }
+    isGroup(item) {
+        return 'items' in item && Array.isArray(item.items);
+    }
+    findOption(value) {
+        for (const item of this.options) {
+            if (this.isGroup(item)) {
+                const found = item.items.find(opt => opt.value === value);
+                if (found)
+                    return found;
+            }
+            else {
+                if (item.value === value)
+                    return item;
+            }
+        }
+        return undefined;
     }
     toggleDropdown() {
         if (!this.disabled) {
@@ -746,16 +801,25 @@ class FvDropdownComponent {
         if (!this.disabled) {
             this.isOpen = true;
             this.focus.emit();
-            // Filter based on current text, do not reset blindly
+            // Filter based on current text
             this.filterOptions(this.searchControl.value || '');
-            this.highlightedIndex = this.filteredOptions.length === 1 ? 0 : -1;
+            // Highlight selected option if available
+            if (this.control.value) {
+                const idx = this.filteredOptions.findIndex(v => !v.isGroupLabel && v.value === this.control.value);
+                if (idx >= 0)
+                    this.highlightedIndex = idx;
+            }
+            else if (this.filteredOptions.length === 1 && !this.filteredOptions[0].isGroupLabel) {
+                this.highlightedIndex = 0;
+            }
+            else {
+                this.highlightedIndex = -1;
+            }
         }
     }
     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();
@@ -767,7 +831,7 @@ class FvDropdownComponent {
         this.isOpen = false;
         this.highlightedIndex = -1;
         // Restore label
-        const selected = this.options.find(opt => opt.value === this.control.value);
+        const selected = this.findOption(this.control.value);
         if (selected) {
             this.searchControl.setValue(selected.label, { emitEvent: false });
         }
@@ -776,14 +840,14 @@ class FvDropdownComponent {
                 this.searchControl.setValue('', { emitEvent: false });
         }
     }
-    selectOption(option) {
-        if (!option)
+    selectOption(viewItem) {
+        if (viewItem.isGroupLabel || !viewItem.option)
             return;
-        this.control.setValue(option.value);
-        this.searchControl.setValue(option.label, { emitEvent: false });
+        this.control.setValue(viewItem.value);
+        this.searchControl.setValue(viewItem.label, { emitEvent: false });
         this.isOpen = false;
         this.highlightedIndex = -1;
-        this.searchInput.nativeElement.blur(); // Remove focus from input
+        this.searchInput.nativeElement.blur();
         this.blur.emit();
     }
     onKeyDown(event) {
@@ -797,20 +861,17 @@ class FvDropdownComponent {
         switch (event.key) {
             case 'ArrowDown':
                 event.preventDefault();
-                this.highlightedIndex = (this.highlightedIndex + 1) % this.filteredOptions.length;
+                this.moveHighlight(1);
                 this.scrollToHighlighted();
                 break;
             case 'ArrowUp':
                 event.preventDefault();
-                this.highlightedIndex = (this.highlightedIndex - 1 + this.filteredOptions.length) % this.filteredOptions.length;
+                this.moveHighlight(-1);
                 this.scrollToHighlighted();
                 break;
             case 'Enter':
                 event.preventDefault();
-                if (this.filteredOptions.length === 1) {
-                    this.selectOption(this.filteredOptions[0]);
-                }
-                else if (this.highlightedIndex >= 0 && this.highlightedIndex < this.filteredOptions.length) {
+                if (this.highlightedIndex >= 0 && this.highlightedIndex < this.filteredOptions.length) {
                     this.selectOption(this.filteredOptions[this.highlightedIndex]);
                 }
                 break;
@@ -822,6 +883,21 @@ class FvDropdownComponent {
                 break;
         }
     }
+    moveHighlight(step) {
+        let nextIndex = this.highlightedIndex;
+        const len = this.filteredOptions.length;
+        if (len === 0)
+            return;
+        // Loop to find next non-group item
+        // Max iterations to avoid infinite loop (though unlikely)
+        for (let i = 0; i < len; i++) {
+            nextIndex = (nextIndex + step + len) % len;
+            if (!this.filteredOptions[nextIndex].isGroupLabel) {
+                this.highlightedIndex = nextIndex;
+                return;
+            }
+        }
+    }
     scrollToHighlighted() {
         const list = this.el.nativeElement.querySelector('.fv-dropdown-options');
         const items = this.el.nativeElement.querySelectorAll('.fv-dropdown-option');
@@ -866,19 +942,17 @@ class FvDropdownComponent {
         };
         return errorMessages[this.errorMessage] || this.errorMessage;
     }
-    getSelectedLabel() {
-        const selected = this.options.find((opt) => opt.value === this.control?.value);
-        return selected ? selected.label : this.placeholder;
-    }
-    isSelected(option) {
-        return option.value === this.control?.value;
+    isSelected(viewItem) {
+        if (viewItem.value === undefined || viewItem.value === null)
+            return false;
+        return viewItem.value === this.control?.value;
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: FvDropdownComponent, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: FvDropdownComponent, isStandalone: true, selector: "fv-dropdown", inputs: { label: "label", placeholder: "placeholder", options: "options", schema: "schema", control: "control", disabled: "disabled" }, outputs: { valueChange: "valueChange", blur: "blur", focus: "focus" }, host: { listeners: { "keydown": "onKeyDown($event)", "document:click": "onClickOutside($event)" } }, viewQueries: [{ propertyName: "searchInput", first: true, predicate: ["searchInput"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div class=\"fv-dropdown-container\">\r\n    <label *ngIf=\"label\" class=\"fv-dropdown-label\">\r\n        {{ label }}\r\n        <span *ngIf=\"isRequired()\" class=\"required-asterisk\">*</span>\r\n    </label>\r\n\r\n    <div class=\"fv-dropdown-wrapper\">\r\n        <div class=\"fv-dropdown\" [class.fv-dropdown-error]=\"errorMessage && control?.touched\"\r\n            [class.fv-dropdown-disabled]=\"disabled\" [class.fv-dropdown-open]=\"isOpen\"\r\n            (click)=\"onContainerClick($event)\">\r\n            <input #searchInput type=\"text\" class=\"fv-dropdown-input\" [formControl]=\"searchControl\"\r\n                [placeholder]=\"placeholder\" (focus)=\"onInputFocus()\" (click)=\"$event.stopPropagation()\"\r\n                autocomplete=\"off\">\r\n            <span class=\"fv-dropdown-arrow\" [class.arrow-up]=\"isOpen\" (click)=\"toggleDropdown()\">\u25BC</span>\r\n        </div>\r\n\r\n        <div *ngIf=\"isOpen\" class=\"fv-dropdown-options\">\r\n            <div *ngFor=\"let option of filteredOptions; let i = index\" class=\"fv-dropdown-option\"\r\n                [class.fv-dropdown-option-selected]=\"isSelected(option)\"\r\n                [class.fv-dropdown-option-highlighted]=\"i === highlightedIndex\" (mouseenter)=\"highlightedIndex = i\"\r\n                (click)=\"selectOption(option)\">\r\n                {{ option.label }}\r\n            </div>\r\n            <div *ngIf=\"filteredOptions.length === 0\" class=\"fv-dropdown-option fv-no-results\">\r\n                No options found\r\n            </div>\r\n        </div>\r\n    </div>\r\n\r\n    <div *ngIf=\"errorMessage && control?.touched\" class=\"fv-dropdown-error-message\">\r\n        \u26A0 {{ getErrorMessage() }}\r\n    </div>\r\n</div>", styles: ["@import\"https://fonts.googleapis.com/icon?family=Material+Icons\";@import\"https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap\";*{font-family:Poppins,sans-serif}.material-icons{font-family:Material Icons!important}.fv-dropdown-container{display:flex;flex-direction:column;margin-bottom:16px;width:100%}.fv-dropdown-label{font-size:14px;font-weight:600;color:#151d48;margin-bottom:6px;display:block}.required-asterisk{color:#e74c3c;font-weight:700}.fv-dropdown-wrapper{position:relative}.fv-dropdown{padding:5px 10px;border:1px solid #8CBBA8;border-radius:8px;background-color:#fff;cursor:pointer;display:flex;justify-content:space-between;align-items:center;transition:border-color .2s;outline:none;font-size:14px;font-weight:400;color:#1f2b41;box-sizing:border-box;height:34px}.fv-dropdown:hover:not(.fv-dropdown-disabled){border-color:#3498db}.fv-dropdown:focus-within:not(.fv-dropdown-disabled){border-color:#3498db;box-shadow:0 0 0 3px #3498db1a}.fv-dropdown-error{border-color:#dc3545!important}.fv-dropdown-disabled{background-color:#ecf0f1;opacity:.6;cursor:not-allowed}.fv-dropdown-open{border-color:#3498db}.fv-dropdown-selected{font-size:14px;font-weight:400;color:#1f2b41;flex:1}.fv-dropdown-placeholder{color:#999}.fv-dropdown-arrow{font-size:10px;color:#666;margin-left:8px;margin-right:5px;transition:transform .2s}.arrow-up{transform:rotate(180deg)}.fv-dropdown-options{position:absolute;top:100%;left:0;right:0;margin-top:4px;background-color:#fff;border:1px solid #cccccc;border-radius:4px;max-height:300px;overflow-y:auto;z-index:1000;box-shadow:0 4px 6px #0000001a}.fv-dropdown-option{padding:12px 16px;font-size:14px;color:#333;cursor:pointer;transition:background-color .2s;border-bottom:1px solid #eeeeee}.fv-dropdown-option:last-child{border-bottom:none}.fv-dropdown-option:hover,.fv-dropdown-option-highlighted{background-color:#f8f9fa}.fv-dropdown-option-selected{background-color:#e7f3ff;color:#007bff;font-weight:600}.fv-dropdown-error-message{margin-top:4px;font-size:12px;color:#dc3545}.fv-dropdown-input{border:none!important;outline:none!important;box-shadow:none!important;background:transparent;flex:1;width:100%;min-width:0;appearance:none;-webkit-appearance:none;font-size:14px;color:#1f2b41;padding:0;margin:0;cursor:text;z-index:2;position:relative;pointer-events:auto;height:100%}.fv-dropdown-input::placeholder{color:#999}.fv-no-results{color:#999;font-style:italic;cursor:default;text-align:center}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: FvDropdownComponent, isStandalone: true, selector: "fv-dropdown", inputs: { label: "label", placeholder: "placeholder", options: "options", schema: "schema", control: "control", disabled: "disabled" }, outputs: { valueChange: "valueChange", blur: "blur", focus: "focus" }, host: { listeners: { "keydown": "onKeyDown($event)", "document:click": "onClickOutside($event)" } }, viewQueries: [{ propertyName: "searchInput", first: true, predicate: ["searchInput"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div class=\"fv-dropdown-container\">\r\n    <label *ngIf=\"label\" class=\"fv-dropdown-label\">\r\n        {{ label }}\r\n        <span *ngIf=\"isRequired()\" class=\"required-asterisk\">*</span>\r\n    </label>\r\n\r\n    <div class=\"fv-dropdown-wrapper\">\r\n        <div class=\"fv-dropdown\" [class.fv-dropdown-error]=\"errorMessage && control?.touched\"\r\n            [class.fv-dropdown-disabled]=\"disabled\" [class.fv-dropdown-open]=\"isOpen\"\r\n            (click)=\"onContainerClick($event)\">\r\n            <input #searchInput type=\"text\" class=\"fv-dropdown-input\" [formControl]=\"searchControl\"\r\n                [placeholder]=\"placeholder\" (focus)=\"onInputFocus()\" (click)=\"$event.stopPropagation()\"\r\n                autocomplete=\"off\">\r\n            <span class=\"fv-dropdown-arrow\" [class.arrow-up]=\"isOpen\" (click)=\"toggleDropdown()\">\u25BC</span>\r\n        </div>\r\n\r\n        <div *ngIf=\"isOpen\" class=\"fv-dropdown-options\">\r\n            <ng-container *ngFor=\"let option of filteredOptions; let i = index\">\r\n                <div *ngIf=\"option.isGroupLabel\" class=\"fv-dropdown-group-label\">\r\n                    {{ option.label }}\r\n                </div>\r\n                <div *ngIf=\"!option.isGroupLabel\" class=\"fv-dropdown-option\"\r\n                    [class.fv-dropdown-option-selected]=\"isSelected(option)\"\r\n                    [class.fv-dropdown-option-highlighted]=\"i === highlightedIndex\"\r\n                    [class.child-option]=\"option.isChild\" (mouseenter)=\"highlightedIndex = i\"\r\n                    (click)=\"selectOption(option)\">\r\n                    {{ option.label }}\r\n                </div>\r\n            </ng-container>\r\n\r\n            <div *ngIf=\"filteredOptions.length === 0\" class=\"fv-dropdown-option fv-no-results\">\r\n                No options found\r\n            </div>\r\n        </div>\r\n    </div>\r\n\r\n    <div *ngIf=\"errorMessage && control?.touched\" class=\"fv-dropdown-error-message\">\r\n        \u26A0 {{ getErrorMessage() }}\r\n    </div>\r\n</div>", styles: ["@import\"https://fonts.googleapis.com/icon?family=Material+Icons\";@import\"https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap\";*{font-family:Poppins,sans-serif}.material-icons{font-family:Material Icons!important}.fv-dropdown-container{display:flex;flex-direction:column;margin-bottom:16px;width:100%}.fv-dropdown-label{font-size:14px;font-weight:600;color:#151d48;margin-bottom:6px;display:block}.required-asterisk{color:#e74c3c;font-weight:700}.fv-dropdown-wrapper{position:relative}.fv-dropdown{padding:5px 10px;border:1px solid #8CBBA8;border-radius:8px;background-color:#fff;cursor:pointer;display:flex;justify-content:space-between;align-items:center;transition:border-color .2s;outline:none;font-size:14px;font-weight:400;color:#1f2b41;box-sizing:border-box;height:34px}.fv-dropdown:hover:not(.fv-dropdown-disabled){border-color:#3498db}.fv-dropdown:focus-within:not(.fv-dropdown-disabled){border-color:#3498db;box-shadow:0 0 0 3px #3498db1a}.fv-dropdown-error{border-color:#dc3545!important}.fv-dropdown-disabled{background-color:#ecf0f1;opacity:.6;cursor:not-allowed}.fv-dropdown-open{border-color:#3498db}.fv-dropdown-selected{font-size:14px;font-weight:400;color:#1f2b41;flex:1}.fv-dropdown-placeholder{color:#999}.fv-dropdown-arrow{font-size:10px;color:#666;margin-left:8px;margin-right:5px;transition:transform .2s}.arrow-up{transform:rotate(180deg)}.fv-dropdown-options{position:absolute;top:100%;left:0;right:0;margin-top:4px;background-color:#fff;border:1px solid #cccccc;border-radius:4px;max-height:300px;overflow-y:auto;z-index:1000;box-shadow:0 4px 6px #0000001a}.fv-dropdown-option{padding:12px 16px;font-size:14px;color:#151d48;cursor:pointer;transition:background-color .2s;border-bottom:1px solid #eeeeee}.fv-dropdown-option:last-child{border-bottom:none}.fv-dropdown-option:hover,.fv-dropdown-option-highlighted{background-color:#f8f9fa}.fv-dropdown-option-selected{background-color:#e7f3ff;color:#007bff;font-weight:600}.fv-dropdown-error-message{margin-top:4px;font-size:12px;color:#dc3545}.fv-dropdown-input{border:none!important;outline:none!important;box-shadow:none!important;background:transparent;flex:1;width:100%;min-width:0;appearance:none;-webkit-appearance:none;font-size:14px;color:#1f2b41;padding:0;margin:0;cursor:text;z-index:2;position:relative;pointer-events:auto;height:100%}.fv-dropdown-input::placeholder{color:#999}.fv-no-results{color:#999;font-style:italic;cursor:default;text-align:center}.fv-dropdown-group-label{font-weight:600;color:#151d48;padding:8px 16px;background-color:#f9f9f9;cursor:default;pointer-events:none;font-size:14px;letter-spacing:normal;border-bottom:1px solid #eee}.fv-dropdown-option.child-option{padding-left:32px}\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 && control?.touched\"\r\n            [class.fv-dropdown-disabled]=\"disabled\" [class.fv-dropdown-open]=\"isOpen\"\r\n            (click)=\"onContainerClick($event)\">\r\n            <input #searchInput type=\"text\" class=\"fv-dropdown-input\" [formControl]=\"searchControl\"\r\n                [placeholder]=\"placeholder\" (focus)=\"onInputFocus()\" (click)=\"$event.stopPropagation()\"\r\n                autocomplete=\"off\">\r\n            <span class=\"fv-dropdown-arrow\" [class.arrow-up]=\"isOpen\" (click)=\"toggleDropdown()\">\u25BC</span>\r\n        </div>\r\n\r\n        <div *ngIf=\"isOpen\" class=\"fv-dropdown-options\">\r\n            <div *ngFor=\"let option of filteredOptions; let i = index\" class=\"fv-dropdown-option\"\r\n                [class.fv-dropdown-option-selected]=\"isSelected(option)\"\r\n                [class.fv-dropdown-option-highlighted]=\"i === highlightedIndex\" (mouseenter)=\"highlightedIndex = i\"\r\n                (click)=\"selectOption(option)\">\r\n                {{ option.label }}\r\n            </div>\r\n            <div *ngIf=\"filteredOptions.length === 0\" class=\"fv-dropdown-option fv-no-results\">\r\n                No options found\r\n            </div>\r\n        </div>\r\n    </div>\r\n\r\n    <div *ngIf=\"errorMessage && control?.touched\" class=\"fv-dropdown-error-message\">\r\n        \u26A0 {{ getErrorMessage() }}\r\n    </div>\r\n</div>", styles: ["@import\"https://fonts.googleapis.com/icon?family=Material+Icons\";@import\"https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap\";*{font-family:Poppins,sans-serif}.material-icons{font-family:Material Icons!important}.fv-dropdown-container{display:flex;flex-direction:column;margin-bottom:16px;width:100%}.fv-dropdown-label{font-size:14px;font-weight:600;color:#151d48;margin-bottom:6px;display:block}.required-asterisk{color:#e74c3c;font-weight:700}.fv-dropdown-wrapper{position:relative}.fv-dropdown{padding:5px 10px;border:1px solid #8CBBA8;border-radius:8px;background-color:#fff;cursor:pointer;display:flex;justify-content:space-between;align-items:center;transition:border-color .2s;outline:none;font-size:14px;font-weight:400;color:#1f2b41;box-sizing:border-box;height:34px}.fv-dropdown:hover:not(.fv-dropdown-disabled){border-color:#3498db}.fv-dropdown:focus-within:not(.fv-dropdown-disabled){border-color:#3498db;box-shadow:0 0 0 3px #3498db1a}.fv-dropdown-error{border-color:#dc3545!important}.fv-dropdown-disabled{background-color:#ecf0f1;opacity:.6;cursor:not-allowed}.fv-dropdown-open{border-color:#3498db}.fv-dropdown-selected{font-size:14px;font-weight:400;color:#1f2b41;flex:1}.fv-dropdown-placeholder{color:#999}.fv-dropdown-arrow{font-size:10px;color:#666;margin-left:8px;margin-right:5px;transition:transform .2s}.arrow-up{transform:rotate(180deg)}.fv-dropdown-options{position:absolute;top:100%;left:0;right:0;margin-top:4px;background-color:#fff;border:1px solid #cccccc;border-radius:4px;max-height:300px;overflow-y:auto;z-index:1000;box-shadow:0 4px 6px #0000001a}.fv-dropdown-option{padding:12px 16px;font-size:14px;color:#333;cursor:pointer;transition:background-color .2s;border-bottom:1px solid #eeeeee}.fv-dropdown-option:last-child{border-bottom:none}.fv-dropdown-option:hover,.fv-dropdown-option-highlighted{background-color:#f8f9fa}.fv-dropdown-option-selected{background-color:#e7f3ff;color:#007bff;font-weight:600}.fv-dropdown-error-message{margin-top:4px;font-size:12px;color:#dc3545}.fv-dropdown-input{border:none!important;outline:none!important;box-shadow:none!important;background:transparent;flex:1;width:100%;min-width:0;appearance:none;-webkit-appearance:none;font-size:14px;color:#1f2b41;padding:0;margin:0;cursor:text;z-index:2;position:relative;pointer-events:auto;height:100%}.fv-dropdown-input::placeholder{color:#999}.fv-no-results{color:#999;font-style:italic;cursor:default;text-align:center}\n"] }]
+            args: [{ standalone: true, imports: [CommonModule, ReactiveFormsModule], selector: 'fv-dropdown', template: "<div class=\"fv-dropdown-container\">\r\n    <label *ngIf=\"label\" class=\"fv-dropdown-label\">\r\n        {{ label }}\r\n        <span *ngIf=\"isRequired()\" class=\"required-asterisk\">*</span>\r\n    </label>\r\n\r\n    <div class=\"fv-dropdown-wrapper\">\r\n        <div class=\"fv-dropdown\" [class.fv-dropdown-error]=\"errorMessage && control?.touched\"\r\n            [class.fv-dropdown-disabled]=\"disabled\" [class.fv-dropdown-open]=\"isOpen\"\r\n            (click)=\"onContainerClick($event)\">\r\n            <input #searchInput type=\"text\" class=\"fv-dropdown-input\" [formControl]=\"searchControl\"\r\n                [placeholder]=\"placeholder\" (focus)=\"onInputFocus()\" (click)=\"$event.stopPropagation()\"\r\n                autocomplete=\"off\">\r\n            <span class=\"fv-dropdown-arrow\" [class.arrow-up]=\"isOpen\" (click)=\"toggleDropdown()\">\u25BC</span>\r\n        </div>\r\n\r\n        <div *ngIf=\"isOpen\" class=\"fv-dropdown-options\">\r\n            <ng-container *ngFor=\"let option of filteredOptions; let i = index\">\r\n                <div *ngIf=\"option.isGroupLabel\" class=\"fv-dropdown-group-label\">\r\n                    {{ option.label }}\r\n                </div>\r\n                <div *ngIf=\"!option.isGroupLabel\" class=\"fv-dropdown-option\"\r\n                    [class.fv-dropdown-option-selected]=\"isSelected(option)\"\r\n                    [class.fv-dropdown-option-highlighted]=\"i === highlightedIndex\"\r\n                    [class.child-option]=\"option.isChild\" (mouseenter)=\"highlightedIndex = i\"\r\n                    (click)=\"selectOption(option)\">\r\n                    {{ option.label }}\r\n                </div>\r\n            </ng-container>\r\n\r\n            <div *ngIf=\"filteredOptions.length === 0\" class=\"fv-dropdown-option fv-no-results\">\r\n                No options found\r\n            </div>\r\n        </div>\r\n    </div>\r\n\r\n    <div *ngIf=\"errorMessage && control?.touched\" class=\"fv-dropdown-error-message\">\r\n        \u26A0 {{ getErrorMessage() }}\r\n    </div>\r\n</div>", styles: ["@import\"https://fonts.googleapis.com/icon?family=Material+Icons\";@import\"https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap\";*{font-family:Poppins,sans-serif}.material-icons{font-family:Material Icons!important}.fv-dropdown-container{display:flex;flex-direction:column;margin-bottom:16px;width:100%}.fv-dropdown-label{font-size:14px;font-weight:600;color:#151d48;margin-bottom:6px;display:block}.required-asterisk{color:#e74c3c;font-weight:700}.fv-dropdown-wrapper{position:relative}.fv-dropdown{padding:5px 10px;border:1px solid #8CBBA8;border-radius:8px;background-color:#fff;cursor:pointer;display:flex;justify-content:space-between;align-items:center;transition:border-color .2s;outline:none;font-size:14px;font-weight:400;color:#1f2b41;box-sizing:border-box;height:34px}.fv-dropdown:hover:not(.fv-dropdown-disabled){border-color:#3498db}.fv-dropdown:focus-within:not(.fv-dropdown-disabled){border-color:#3498db;box-shadow:0 0 0 3px #3498db1a}.fv-dropdown-error{border-color:#dc3545!important}.fv-dropdown-disabled{background-color:#ecf0f1;opacity:.6;cursor:not-allowed}.fv-dropdown-open{border-color:#3498db}.fv-dropdown-selected{font-size:14px;font-weight:400;color:#1f2b41;flex:1}.fv-dropdown-placeholder{color:#999}.fv-dropdown-arrow{font-size:10px;color:#666;margin-left:8px;margin-right:5px;transition:transform .2s}.arrow-up{transform:rotate(180deg)}.fv-dropdown-options{position:absolute;top:100%;left:0;right:0;margin-top:4px;background-color:#fff;border:1px solid #cccccc;border-radius:4px;max-height:300px;overflow-y:auto;z-index:1000;box-shadow:0 4px 6px #0000001a}.fv-dropdown-option{padding:12px 16px;font-size:14px;color:#151d48;cursor:pointer;transition:background-color .2s;border-bottom:1px solid #eeeeee}.fv-dropdown-option:last-child{border-bottom:none}.fv-dropdown-option:hover,.fv-dropdown-option-highlighted{background-color:#f8f9fa}.fv-dropdown-option-selected{background-color:#e7f3ff;color:#007bff;font-weight:600}.fv-dropdown-error-message{margin-top:4px;font-size:12px;color:#dc3545}.fv-dropdown-input{border:none!important;outline:none!important;box-shadow:none!important;background:transparent;flex:1;width:100%;min-width:0;appearance:none;-webkit-appearance:none;font-size:14px;color:#1f2b41;padding:0;margin:0;cursor:text;z-index:2;position:relative;pointer-events:auto;height:100%}.fv-dropdown-input::placeholder{color:#999}.fv-no-results{color:#999;font-style:italic;cursor:default;text-align:center}.fv-dropdown-group-label{font-weight:600;color:#151d48;padding:8px 16px;background-color:#f9f9f9;cursor:default;pointer-events:none;font-size:14px;letter-spacing:normal;border-bottom:1px solid #eee}.fv-dropdown-option.child-option{padding-left:32px}\n"] }]
         }], ctorParameters: () => [{ type: i0.ElementRef }], propDecorators: { label: [{
                 type: Input
             }], placeholder: [{
@@ -1043,11 +1117,11 @@ class FvFileSelectorComponent {
         return errorMessages[this.errorMessage] || this.errorMessage;
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: FvFileSelectorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: FvFileSelectorComponent, isStandalone: true, selector: "fv-file-selector", inputs: { label: "label", placeholder: "placeholder", schema: "schema", control: "control", disabled: "disabled", accept: "accept", maxSize: "maxSize" }, outputs: { valueChange: "valueChange", blur: "blur" }, viewQueries: [{ propertyName: "fileInput", first: true, predicate: ["fileInput"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div class=\"fv-file-selector-container\" *ngIf=\"control\">\r\n    <label *ngIf=\"label\" class=\"fv-file-selector-label\">\r\n        {{ label }}\r\n        <span *ngIf=\"isRequired()\" class=\"required-asterisk\">*</span>\r\n    </label>\r\n\r\n    <input #fileInput type=\"file\" [accept]=\"accept\" (change)=\"onFileSelected($event)\" style=\"display: none\" />\r\n\r\n    <div *ngIf=\"!selectedFile\">\r\n        <button type=\"button\" class=\"fv-file-selector-button\"\r\n            [class.fv-file-selector-button-error]=\"errorMessage && control?.touched\"\r\n            [class.fv-file-selector-button-disabled]=\"disabled\" (click)=\"openFileDialog()\" [disabled]=\"disabled\">\r\n            <span class=\"fv-upload-text\">{{ placeholder }}</span>\r\n            <span class=\"fv-upload-icon-section\">\r\n                <svg viewBox=\"0 0 24 24\" class=\"upload-icon\">\r\n                    <path d=\"M9 16h6v-6h4l-7-7-7 7h4zm-4 2h14v2H5z\" fill=\"currentColor\" />\r\n                </svg>\r\n            </span>\r\n        </button>\r\n    </div>\r\n\r\n    <div *ngIf=\"selectedFile\" class=\"fv-preview-row\">\r\n        <div class=\"fv-preview-wrapper\">\r\n            <div class=\"fv-file-icon-preview\" [ngClass]=\"getFileIcon()\">\r\n                <span class=\"material-icons\">{{ getFileIcon() }}</span>\r\n            </div>\r\n        </div>\r\n        <span class=\"fv-filename\">{{ selectedFile.name }}</span>\r\n        <button type=\"button\" class=\"fv-trash-btn\" (click)=\"removeFile()\" [disabled]=\"disabled\">\r\n            <svg viewBox=\"0 0 24 24\" class=\"trash-icon\">\r\n                <path d=\"M6 19c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7H6v12zM19 4h-3.5l-1-1h-5l-1 1H5v2h14V4z\" />\r\n            </svg>\r\n        </button>\r\n    </div>\r\n\r\n    <div *ngIf=\"errorMessage && control?.touched\" class=\"fv-file-selector-error-message\">\r\n        \u26A0 {{ getErrorMessage() }}\r\n    </div>\r\n</div>", styles: ["@import\"https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap\";*{font-family:Poppins,sans-serif}.fv-file-selector-container{display:flex;flex-direction:column;margin-bottom:16px;width:fit-content;max-width:100%}.fv-file-selector-label{font-size:14px;font-weight:600;color:#151d48;margin-bottom:6px;display:block}.required-asterisk{color:#e74c3c;font-weight:700}.fv-file-selector-button{display:flex;align-items:center;border:1px solid #dcdcdc;border-radius:8px;background-color:#fff;padding:0;cursor:pointer;overflow:hidden;height:34px;width:100px;transition:all .2s ease}.fv-file-selector-button:hover:not(:disabled){border-color:#bbb;box-shadow:0 2px 4px #0000000d}.fv-file-selector-button-error{border-color:#e74c3c}.fv-file-selector-button-disabled{background-color:#f9f9f9;border-color:#dcdcdc;color:#7f8c8d;opacity:.6;cursor:not-allowed}.fv-upload-text{flex:1;padding:0 16px;font-size:14px;color:#1f2b41;text-align:left;font-weight:500}.fv-upload-icon-section{background:#f4f5f7;padding:0 10px;border-left:1px solid #dcdcdc;display:flex;align-items:center;justify-content:center;color:#333;height:100%}.upload-icon{width:20px;height:20px}.fv-preview-row{display:flex;align-items:center;gap:8px;padding:8px 0;width:100px;box-sizing:border-box}.fv-preview-wrapper{position:relative;width:40px;height:40px}.fv-file-icon-preview{width:40px;height:40px;border-radius:8px;background:#f4f5f7;display:flex;align-items:center;justify-content:center;color:#3498db;border:1px solid #dcdcdc}.fv-file-icon-preview.picture_as_pdf{color:#e74c3c;background:#fdf2f2}.fv-file-icon-preview.image{color:#3498db;background:#f1f8fe}.fv-file-icon-preview.table_view{color:#27ae60;background:#f1f9f4}.material-icons{font-size:24px}.fv-filename{flex:1;font-size:14px;color:#666;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:300px}.fv-trash-btn{background:none;border:none;cursor:pointer;padding:6px;border-radius:50%;transition:background .2s;display:flex}.fv-trash-btn:hover:not(:disabled){background:#fee}.trash-icon{width:22px;height:22px;fill:red}.fv-file-selector-error-message{margin-top:4px;font-size:12px;color:#e74c3c}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: ReactiveFormsModule }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: FvFileSelectorComponent, isStandalone: true, selector: "fv-file-selector", inputs: { label: "label", placeholder: "placeholder", schema: "schema", control: "control", disabled: "disabled", accept: "accept", maxSize: "maxSize" }, outputs: { valueChange: "valueChange", blur: "blur" }, viewQueries: [{ propertyName: "fileInput", first: true, predicate: ["fileInput"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div class=\"fv-file-selector-container\" *ngIf=\"control\">\r\n    <label *ngIf=\"label\" class=\"fv-file-selector-label\">\r\n        {{ label }}\r\n        <span *ngIf=\"isRequired()\" class=\"required-asterisk\">*</span>\r\n    </label>\r\n\r\n    <input #fileInput type=\"file\" [accept]=\"accept\" (change)=\"onFileSelected($event)\" style=\"display: none\" />\r\n\r\n    <div *ngIf=\"!selectedFile\">\r\n        <button type=\"button\" class=\"fv-file-selector-button\"\r\n            [class.fv-file-selector-button-error]=\"errorMessage && control?.touched\"\r\n            [class.fv-file-selector-button-disabled]=\"disabled\" (click)=\"openFileDialog()\" [disabled]=\"disabled\">\r\n            <span class=\"fv-upload-text\">{{ placeholder }}</span>\r\n            <span class=\"fv-upload-icon-section\">\r\n                <svg viewBox=\"0 0 24 24\" class=\"upload-icon\">\r\n                    <path d=\"M9 16h6v-6h4l-7-7-7 7h4zm-4 2h14v2H5z\" fill=\"currentColor\" />\r\n                </svg>\r\n            </span>\r\n        </button>\r\n    </div>\r\n\r\n    <div *ngIf=\"selectedFile\" class=\"fv-preview-row\">\r\n        <div class=\"fv-preview-wrapper\">\r\n            <div class=\"fv-file-icon-preview\" [ngClass]=\"getFileIcon()\">\r\n                <span class=\"material-icons\">{{ getFileIcon() }}</span>\r\n            </div>\r\n        </div>\r\n        <span class=\"fv-filename\">{{ selectedFile.name }}</span>\r\n        <button type=\"button\" class=\"fv-trash-btn\" (click)=\"removeFile()\" [disabled]=\"disabled\">\r\n            <svg viewBox=\"0 0 24 24\" class=\"trash-icon\">\r\n                <path d=\"M6 19c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7H6v12zM19 4h-3.5l-1-1h-5l-1 1H5v2h14V4z\" />\r\n            </svg>\r\n        </button>\r\n    </div>\r\n\r\n    <div *ngIf=\"errorMessage && control?.touched\" class=\"fv-file-selector-error-message\">\r\n        \u26A0 {{ getErrorMessage() }}\r\n    </div>\r\n</div>", styles: ["@import\"https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap\";*{font-family:Poppins,sans-serif}.fv-file-selector-container{display:flex;flex-direction:column;margin-bottom:16px;width:fit-content;max-width:100%}.fv-file-selector-label{font-size:14px;font-weight:600;color:#151d48;margin-bottom:6px;display:block}.required-asterisk{color:#e74c3c;font-weight:700}.fv-file-selector-button{display:flex;align-items:center;border:1px solid #dcdcdc;border-radius:8px;background-color:#fff;padding:0;cursor:pointer;overflow:hidden;height:34px;width:150px;transition:all .2s ease}.fv-file-selector-button:hover:not(:disabled){border-color:#bbb;box-shadow:0 2px 4px #0000000d}.fv-file-selector-button-error{border-color:#e74c3c}.fv-file-selector-button-disabled{background-color:#f9f9f9;border-color:#dcdcdc;color:#7f8c8d;opacity:.6;cursor:not-allowed}.fv-upload-text{flex:1;padding:0 16px;font-size:14px;color:#1f2b41;text-align:left;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.fv-upload-icon-section{background:#f4f5f7;padding:0 10px;border-left:1px solid #dcdcdc;display:flex;align-items:center;justify-content:center;color:#333;height:100%}.upload-icon{width:20px;height:20px}.fv-preview-row{display:flex;align-items:center;gap:8px;padding:8px 0;width:100px;box-sizing:border-box}.fv-preview-wrapper{position:relative;width:40px;height:40px}.fv-file-icon-preview{width:40px;height:40px;border-radius:8px;background:#f4f5f7;display:flex;align-items:center;justify-content:center;color:#3498db;border:1px solid #dcdcdc}.fv-file-icon-preview.picture_as_pdf{color:#e74c3c;background:#fdf2f2}.fv-file-icon-preview.image{color:#3498db;background:#f1f8fe}.fv-file-icon-preview.table_view{color:#27ae60;background:#f1f9f4}.material-icons{font-size:24px}.fv-filename{flex:1;font-size:14px;color:#666;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:300px}.fv-trash-btn{background:none;border:none;cursor:pointer;padding:6px;border-radius:50%;transition:background .2s;display:flex}.fv-trash-btn:hover:not(:disabled){background:#fee}.trash-icon{width:22px;height:22px;fill:red}.fv-file-selector-error-message{margin-top:4px;font-size:12px;color:#e74c3c}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: ReactiveFormsModule }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: FvFileSelectorComponent, decorators: [{
             type: Component,
-            args: [{ standalone: true, imports: [CommonModule, ReactiveFormsModule], selector: 'fv-file-selector', template: "<div class=\"fv-file-selector-container\" *ngIf=\"control\">\r\n    <label *ngIf=\"label\" class=\"fv-file-selector-label\">\r\n        {{ label }}\r\n        <span *ngIf=\"isRequired()\" class=\"required-asterisk\">*</span>\r\n    </label>\r\n\r\n    <input #fileInput type=\"file\" [accept]=\"accept\" (change)=\"onFileSelected($event)\" style=\"display: none\" />\r\n\r\n    <div *ngIf=\"!selectedFile\">\r\n        <button type=\"button\" class=\"fv-file-selector-button\"\r\n            [class.fv-file-selector-button-error]=\"errorMessage && control?.touched\"\r\n            [class.fv-file-selector-button-disabled]=\"disabled\" (click)=\"openFileDialog()\" [disabled]=\"disabled\">\r\n            <span class=\"fv-upload-text\">{{ placeholder }}</span>\r\n            <span class=\"fv-upload-icon-section\">\r\n                <svg viewBox=\"0 0 24 24\" class=\"upload-icon\">\r\n                    <path d=\"M9 16h6v-6h4l-7-7-7 7h4zm-4 2h14v2H5z\" fill=\"currentColor\" />\r\n                </svg>\r\n            </span>\r\n        </button>\r\n    </div>\r\n\r\n    <div *ngIf=\"selectedFile\" class=\"fv-preview-row\">\r\n        <div class=\"fv-preview-wrapper\">\r\n            <div class=\"fv-file-icon-preview\" [ngClass]=\"getFileIcon()\">\r\n                <span class=\"material-icons\">{{ getFileIcon() }}</span>\r\n            </div>\r\n        </div>\r\n        <span class=\"fv-filename\">{{ selectedFile.name }}</span>\r\n        <button type=\"button\" class=\"fv-trash-btn\" (click)=\"removeFile()\" [disabled]=\"disabled\">\r\n            <svg viewBox=\"0 0 24 24\" class=\"trash-icon\">\r\n                <path d=\"M6 19c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7H6v12zM19 4h-3.5l-1-1h-5l-1 1H5v2h14V4z\" />\r\n            </svg>\r\n        </button>\r\n    </div>\r\n\r\n    <div *ngIf=\"errorMessage && control?.touched\" class=\"fv-file-selector-error-message\">\r\n        \u26A0 {{ getErrorMessage() }}\r\n    </div>\r\n</div>", styles: ["@import\"https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap\";*{font-family:Poppins,sans-serif}.fv-file-selector-container{display:flex;flex-direction:column;margin-bottom:16px;width:fit-content;max-width:100%}.fv-file-selector-label{font-size:14px;font-weight:600;color:#151d48;margin-bottom:6px;display:block}.required-asterisk{color:#e74c3c;font-weight:700}.fv-file-selector-button{display:flex;align-items:center;border:1px solid #dcdcdc;border-radius:8px;background-color:#fff;padding:0;cursor:pointer;overflow:hidden;height:34px;width:100px;transition:all .2s ease}.fv-file-selector-button:hover:not(:disabled){border-color:#bbb;box-shadow:0 2px 4px #0000000d}.fv-file-selector-button-error{border-color:#e74c3c}.fv-file-selector-button-disabled{background-color:#f9f9f9;border-color:#dcdcdc;color:#7f8c8d;opacity:.6;cursor:not-allowed}.fv-upload-text{flex:1;padding:0 16px;font-size:14px;color:#1f2b41;text-align:left;font-weight:500}.fv-upload-icon-section{background:#f4f5f7;padding:0 10px;border-left:1px solid #dcdcdc;display:flex;align-items:center;justify-content:center;color:#333;height:100%}.upload-icon{width:20px;height:20px}.fv-preview-row{display:flex;align-items:center;gap:8px;padding:8px 0;width:100px;box-sizing:border-box}.fv-preview-wrapper{position:relative;width:40px;height:40px}.fv-file-icon-preview{width:40px;height:40px;border-radius:8px;background:#f4f5f7;display:flex;align-items:center;justify-content:center;color:#3498db;border:1px solid #dcdcdc}.fv-file-icon-preview.picture_as_pdf{color:#e74c3c;background:#fdf2f2}.fv-file-icon-preview.image{color:#3498db;background:#f1f8fe}.fv-file-icon-preview.table_view{color:#27ae60;background:#f1f9f4}.material-icons{font-size:24px}.fv-filename{flex:1;font-size:14px;color:#666;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:300px}.fv-trash-btn{background:none;border:none;cursor:pointer;padding:6px;border-radius:50%;transition:background .2s;display:flex}.fv-trash-btn:hover:not(:disabled){background:#fee}.trash-icon{width:22px;height:22px;fill:red}.fv-file-selector-error-message{margin-top:4px;font-size:12px;color:#e74c3c}\n"] }]
+            args: [{ standalone: true, imports: [CommonModule, ReactiveFormsModule], selector: 'fv-file-selector', template: "<div class=\"fv-file-selector-container\" *ngIf=\"control\">\r\n    <label *ngIf=\"label\" class=\"fv-file-selector-label\">\r\n        {{ label }}\r\n        <span *ngIf=\"isRequired()\" class=\"required-asterisk\">*</span>\r\n    </label>\r\n\r\n    <input #fileInput type=\"file\" [accept]=\"accept\" (change)=\"onFileSelected($event)\" style=\"display: none\" />\r\n\r\n    <div *ngIf=\"!selectedFile\">\r\n        <button type=\"button\" class=\"fv-file-selector-button\"\r\n            [class.fv-file-selector-button-error]=\"errorMessage && control?.touched\"\r\n            [class.fv-file-selector-button-disabled]=\"disabled\" (click)=\"openFileDialog()\" [disabled]=\"disabled\">\r\n            <span class=\"fv-upload-text\">{{ placeholder }}</span>\r\n            <span class=\"fv-upload-icon-section\">\r\n                <svg viewBox=\"0 0 24 24\" class=\"upload-icon\">\r\n                    <path d=\"M9 16h6v-6h4l-7-7-7 7h4zm-4 2h14v2H5z\" fill=\"currentColor\" />\r\n                </svg>\r\n            </span>\r\n        </button>\r\n    </div>\r\n\r\n    <div *ngIf=\"selectedFile\" class=\"fv-preview-row\">\r\n        <div class=\"fv-preview-wrapper\">\r\n            <div class=\"fv-file-icon-preview\" [ngClass]=\"getFileIcon()\">\r\n                <span class=\"material-icons\">{{ getFileIcon() }}</span>\r\n            </div>\r\n        </div>\r\n        <span class=\"fv-filename\">{{ selectedFile.name }}</span>\r\n        <button type=\"button\" class=\"fv-trash-btn\" (click)=\"removeFile()\" [disabled]=\"disabled\">\r\n            <svg viewBox=\"0 0 24 24\" class=\"trash-icon\">\r\n                <path d=\"M6 19c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7H6v12zM19 4h-3.5l-1-1h-5l-1 1H5v2h14V4z\" />\r\n            </svg>\r\n        </button>\r\n    </div>\r\n\r\n    <div *ngIf=\"errorMessage && control?.touched\" class=\"fv-file-selector-error-message\">\r\n        \u26A0 {{ getErrorMessage() }}\r\n    </div>\r\n</div>", styles: ["@import\"https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap\";*{font-family:Poppins,sans-serif}.fv-file-selector-container{display:flex;flex-direction:column;margin-bottom:16px;width:fit-content;max-width:100%}.fv-file-selector-label{font-size:14px;font-weight:600;color:#151d48;margin-bottom:6px;display:block}.required-asterisk{color:#e74c3c;font-weight:700}.fv-file-selector-button{display:flex;align-items:center;border:1px solid #dcdcdc;border-radius:8px;background-color:#fff;padding:0;cursor:pointer;overflow:hidden;height:34px;width:150px;transition:all .2s ease}.fv-file-selector-button:hover:not(:disabled){border-color:#bbb;box-shadow:0 2px 4px #0000000d}.fv-file-selector-button-error{border-color:#e74c3c}.fv-file-selector-button-disabled{background-color:#f9f9f9;border-color:#dcdcdc;color:#7f8c8d;opacity:.6;cursor:not-allowed}.fv-upload-text{flex:1;padding:0 16px;font-size:14px;color:#1f2b41;text-align:left;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.fv-upload-icon-section{background:#f4f5f7;padding:0 10px;border-left:1px solid #dcdcdc;display:flex;align-items:center;justify-content:center;color:#333;height:100%}.upload-icon{width:20px;height:20px}.fv-preview-row{display:flex;align-items:center;gap:8px;padding:8px 0;width:100px;box-sizing:border-box}.fv-preview-wrapper{position:relative;width:40px;height:40px}.fv-file-icon-preview{width:40px;height:40px;border-radius:8px;background:#f4f5f7;display:flex;align-items:center;justify-content:center;color:#3498db;border:1px solid #dcdcdc}.fv-file-icon-preview.picture_as_pdf{color:#e74c3c;background:#fdf2f2}.fv-file-icon-preview.image{color:#3498db;background:#f1f8fe}.fv-file-icon-preview.table_view{color:#27ae60;background:#f1f9f4}.material-icons{font-size:24px}.fv-filename{flex:1;font-size:14px;color:#666;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:300px}.fv-trash-btn{background:none;border:none;cursor:pointer;padding:6px;border-radius:50%;transition:background .2s;display:flex}.fv-trash-btn:hover:not(:disabled){background:#fee}.trash-icon{width:22px;height:22px;fill:red}.fv-file-selector-error-message{margin-top:4px;font-size:12px;color:#e74c3c}\n"] }]
         }], propDecorators: { label: [{
                 type: Input
             }], placeholder: [{
@@ -1480,7 +1554,7 @@ class FvNameCodeComponent {
     schema;
     control;
     disabled = false;
-    selectionChange = new EventEmitter();
+    valueChange = new EventEmitter();
     searchControl = new FormControl('');
     filteredOptions = [];
     isOpen = false;
@@ -1488,13 +1562,21 @@ class FvNameCodeComponent {
     onChange = () => { };
     onTouched = () => { };
     value = null;
+    ngOnChanges(changes) {
+        if (changes['options']) {
+            this.filteredOptions = this.options;
+            if (this.value !== null && this.value !== undefined) {
+                this.writeValue(this.value);
+            }
+        }
+    }
     ngOnInit() {
         this.filteredOptions = this.options;
         this.searchControl.valueChanges.subscribe(term => {
             this.filterOptions(term || '');
         });
         if (this.control) {
-            if (this.control.value) {
+            if (this.control.value !== null && this.control.value !== undefined) {
                 this.writeValue(this.control.value);
             }
             this.control.valueChanges.subscribe(val => {
@@ -1543,8 +1625,13 @@ class FvNameCodeComponent {
             return;
         this.value = option.value;
         this.onChange(this.value);
+        if (this.control) {
+            this.control.setValue(this.value);
+            this.control.markAsDirty();
+            this.control.markAsTouched();
+        }
         this.searchControl.setValue(`${option.code} - ${option.name}`, { emitEvent: false });
-        this.selectionChange.emit(this.value);
+        this.valueChange.emit(this.value);
         this.isOpen = false;
         this.highlightedIndex = -1;
     }
@@ -1660,13 +1747,13 @@ class FvNameCodeComponent {
         }
     }
     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)", "keydown": "onKeyDown($event)" } }, providers: [
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: FvNameCodeComponent, isStandalone: true, selector: "fv-name-code", inputs: { label: "label", placeholder: "placeholder", options: "options", schema: "schema", control: "control", disabled: "disabled" }, outputs: { valueChange: "valueChange" }, host: { listeners: { "document:click": "onClickOutside($event)", "keydown": "onKeyDown($event)" } }, providers: [
             {
                 provide: NG_VALUE_ACCESSOR,
                 useExisting: forwardRef(() => FvNameCodeComponent),
                 multi: true
             }
-        ], ngImport: i0, template: `
+        ], usesOnChanges: true, ngImport: i0, template: `
     <div class="fv-name-code-container">
       <label *ngIf="label" class="fv-label">
         {{ label }}
@@ -1765,7 +1852,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
                 type: Input
             }], disabled: [{
                 type: Input
-            }], selectionChange: [{
+            }], valueChange: [{
                 type: Output
             }], onClickOutside: [{
                 type: HostListener,
@@ -2830,6 +2917,166 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
                 args: ['fileInput']
             }] } });
 
+class FvTimeFieldComponent {
+    label = '';
+    schema;
+    control;
+    disabled = false;
+    readonly = false;
+    placeholder = '--:--';
+    valueChange = new EventEmitter();
+    blur = new EventEmitter();
+    focus = new EventEmitter();
+    errorMessage = null;
+    subscription;
+    showPicker = false;
+    hours = [];
+    minutes = [];
+    selectedHour = null;
+    selectedMinute = null;
+    ngOnInit() {
+        if (!this.control) {
+            console.error('FvTimeField: control is required');
+            return;
+        }
+        // Generate hours (00-23) and minutes (00-59)
+        this.hours = Array.from({ length: 24 }, (_, i) => i);
+        this.minutes = Array.from({ length: 60 }, (_, i) => i);
+        // Subscribe to value changes
+        this.subscription = this.control.valueChanges.subscribe((value) => {
+            this.validateValue(value);
+            this.parseTimeValue(value);
+            this.valueChange.emit(value);
+        });
+        // Validate and parse initial value
+        this.validateValue(this.control.value);
+        this.parseTimeValue(this.control.value);
+    }
+    ngOnDestroy() {
+        this.subscription?.unsubscribe();
+    }
+    ngOnChanges(changes) {
+        if (changes['disabled'] && this.control) {
+            if (this.disabled) {
+                this.control.disable({ emitEvent: false });
+            }
+            else {
+                this.control.enable({ emitEvent: false });
+            }
+        }
+    }
+    parseTimeValue(value) {
+        if (!value || typeof value !== 'string') {
+            this.selectedHour = null;
+            this.selectedMinute = null;
+            return;
+        }
+        const parts = value.split(':');
+        if (parts.length === 2) {
+            const hour = parseInt(parts[0], 10);
+            const minute = parseInt(parts[1], 10);
+            if (!isNaN(hour) && hour >= 0 && hour <= 23) {
+                this.selectedHour = hour;
+            }
+            if (!isNaN(minute) && minute >= 0 && minute <= 59) {
+                this.selectedMinute = minute;
+            }
+        }
+    }
+    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);
+        }
+    }
+    togglePicker() {
+        if (!this.disabled && !this.readonly) {
+            this.showPicker = !this.showPicker;
+        }
+    }
+    selectHour(hour) {
+        this.selectedHour = hour;
+        this.updateTimeValue();
+    }
+    selectMinute(minute) {
+        this.selectedMinute = minute;
+        this.updateTimeValue();
+    }
+    updateTimeValue() {
+        if (this.selectedHour !== null && this.selectedMinute !== null) {
+            const timeValue = `${this.padZero(this.selectedHour)}:${this.padZero(this.selectedMinute)}`;
+            this.control.setValue(timeValue, { emitEvent: true });
+            this.showPicker = false;
+        }
+    }
+    padZero(num) {
+        return num.toString().padStart(2, '0');
+    }
+    getDisplayValue() {
+        if (this.selectedHour !== null && this.selectedMinute !== null) {
+            return `${this.padZero(this.selectedHour)}:${this.padZero(this.selectedMinute)}`;
+        }
+        return this.placeholder;
+    }
+    onBlur(event) {
+        // Delay to allow click on picker
+        setTimeout(() => {
+            if (!this.showPicker) {
+                this.validateValue(this.control.value);
+                this.blur.emit();
+            }
+        }, 200);
+    }
+    onFocus(event) {
+        this.focus.emit();
+    }
+    isRequired() {
+        return (this.schema?.rules?.some((r) => r.name === 'required' && r.params?.['enabled']) || false);
+    }
+    getErrorMessage() {
+        if (!this.errorMessage)
+            return '';
+        const errorMessages = {
+            ERR_REQUIRED: 'Time is required',
+            ERR_INVALID_TIME: 'Invalid time format',
+        };
+        return errorMessages[this.errorMessage] || this.errorMessage;
+    }
+    closePicker() {
+        this.showPicker = false;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: FvTimeFieldComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: FvTimeFieldComponent, isStandalone: true, selector: "fv-time-field", inputs: { label: "label", schema: "schema", control: "control", disabled: "disabled", readonly: "readonly", placeholder: "placeholder" }, outputs: { valueChange: "valueChange", blur: "blur", focus: "focus" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"fv-field-container\">\r\n    <label *ngIf=\"label\" class=\"fv-label\">\r\n        {{ label }} <span *ngIf=\"isRequired()\" class=\"fv-required-asterisk\">*</span>\r\n    </label>\r\n\r\n    <div class=\"time-input-wrapper\">\r\n        <div class=\"time-input\" [class.error]=\"errorMessage && control?.touched\" [class.disabled]=\"disabled\"\r\n            (click)=\"togglePicker()\" tabindex=\"0\" (blur)=\"onBlur($event)\" (focus)=\"onFocus($event)\">\r\n            <span class=\"time-display\">{{ getDisplayValue() }}</span>\r\n            <svg class=\"clock-icon\" viewBox=\"0 0 24 24\" width=\"20\" height=\"20\" fill=\"currentColor\">\r\n                <path\r\n                    d=\"M12 2C6.5 2 2 6.5 2 12s4.5 10 10 10 10-4.5 10-10S17.5 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8zm.5-13H11v6l5.25 3.15.75-1.23-4.5-2.67z\" />\r\n            </svg>\r\n        </div>\r\n\r\n        <div *ngIf=\"showPicker\" class=\"time-picker-dropdown\">\r\n            <div class=\"time-picker-header\">\r\n                <span class=\"selected-time\">\r\n                    {{ selectedHour !== null ? padZero(selectedHour) : '--' }}:{{ selectedMinute !== null ?\r\n                    padZero(selectedMinute) : '--' }}\r\n                </span>\r\n                <button type=\"button\" class=\"close-btn\" (click)=\"closePicker()\">\u00D7</button>\r\n            </div>\r\n\r\n            <div class=\"time-picker-body\">\r\n                <div class=\"time-column\">\r\n                    <div class=\"column-header\">Hour</div>\r\n                    <div class=\"time-list\">\r\n                        <div *ngFor=\"let hour of hours\" class=\"time-item\" [class.selected]=\"selectedHour === hour\"\r\n                            (click)=\"selectHour(hour)\">\r\n                            {{ padZero(hour) }}\r\n                        </div>\r\n                    </div>\r\n                </div>\r\n\r\n                <div class=\"time-column\">\r\n                    <div class=\"column-header\">Minute</div>\r\n                    <div class=\"time-list\">\r\n                        <div *ngFor=\"let minute of minutes\" class=\"time-item\"\r\n                            [class.selected]=\"selectedMinute === minute\" (click)=\"selectMinute(minute)\">\r\n                            {{ padZero(minute) }}\r\n                        </div>\r\n                    </div>\r\n                </div>\r\n            </div>\r\n        </div>\r\n    </div>\r\n\r\n    <div *ngIf=\"errorMessage && control?.touched\" class=\"fv-error-message\">\r\n        {{ getErrorMessage() }}\r\n    </div>\r\n</div>", styles: ["@import\"https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap\";*{font-family:Poppins,sans-serif}.fv-field-container{display:flex;flex-direction:column;margin-bottom:16px;width:100%;position:relative}.fv-label{margin-bottom:6px;font-size:14px;font-weight:600;color:#151d48;display:flex;align-items:center;gap:4px}.fv-required-asterisk{color:#e74c3c;font-weight:700}.time-input-wrapper{position:relative;width:100%}.time-input{display:flex;align-items:center;justify-content:space-between;padding:5px 10px;border:1px solid #8CBBA8;border-radius:8px;font-size:14px;font-weight:400;font-family:Poppins,sans-serif;transition:all .2s ease-in-out;background-color:#fff;color:#1f2b41;box-sizing:border-box;width:100%;height:34px;cursor:pointer;-webkit-user-select:none;user-select:none}.time-input:focus{outline:none;border-color:#3498db;box-shadow:0 0 0 3px #3498db1a}.time-input:hover:not(.disabled){border-color:#3498db}.time-input.error{border-color:#dc3545!important}.time-input.error:focus{box-shadow:0 0 0 3px #dc35451a}.time-input.disabled{background-color:#ecf0f1;cursor:not-allowed;opacity:.6}.time-display{flex:1;color:#1f2b41}.clock-icon{color:#666;flex-shrink:0}.time-picker-dropdown{position:absolute;top:calc(100% + 4px);left:0;background:#fff;border:1px solid #8CBBA8;border-radius:8px;box-shadow:0 4px 12px #00000026;z-index:1000;min-width:200px;overflow:hidden}.time-picker-header{display:flex;justify-content:space-between;align-items:center;padding:12px 16px;background:#f8f9fa;border-bottom:1px solid #e0e0e0}.selected-time{font-size:18px;font-weight:600;color:#151d48}.close-btn{background:none;border:none;font-size:24px;color:#666;cursor:pointer;padding:0;width:24px;height:24px;display:flex;align-items:center;justify-content:center;transition:color .2s}.close-btn:hover{color:#e74c3c}.time-picker-body{display:flex;gap:1px;background:#e0e0e0}.time-column{flex:1;background:#fff;display:flex;flex-direction:column}.column-header{padding:8px;text-align:center;font-weight:600;font-size:12px;color:#666;background:#f8f9fa;border-bottom:1px solid #e0e0e0;text-transform:uppercase;letter-spacing:.5px}.time-list{max-height:200px;overflow-y:auto;scrollbar-width:thin;scrollbar-color:#8CBBA8 #f0f0f0}.time-list::-webkit-scrollbar{width:6px}.time-list::-webkit-scrollbar-track{background:#f0f0f0}.time-list::-webkit-scrollbar-thumb{background:#8cbba8;border-radius:3px}.time-list::-webkit-scrollbar-thumb:hover{background:#7aaa98}.time-item{padding:8px 12px;text-align:center;cursor:pointer;transition:all .2s;font-size:14px;color:#1f2b41}.time-item:hover{background:#e8f4f0}.time-item.selected{background:#8cbba8;color:#fff;font-weight:600}.fv-error-message{margin-top:4px;font-size:12px;color:#e74c3c;display:flex;align-items:center;gap:4px}.fv-error-message:before{content:\"\\26a0\";font-size:14px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.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: FvTimeFieldComponent, decorators: [{
+            type: Component,
+            args: [{ standalone: true, imports: [CommonModule, ReactiveFormsModule], selector: 'fv-time-field', template: "<div class=\"fv-field-container\">\r\n    <label *ngIf=\"label\" class=\"fv-label\">\r\n        {{ label }} <span *ngIf=\"isRequired()\" class=\"fv-required-asterisk\">*</span>\r\n    </label>\r\n\r\n    <div class=\"time-input-wrapper\">\r\n        <div class=\"time-input\" [class.error]=\"errorMessage && control?.touched\" [class.disabled]=\"disabled\"\r\n            (click)=\"togglePicker()\" tabindex=\"0\" (blur)=\"onBlur($event)\" (focus)=\"onFocus($event)\">\r\n            <span class=\"time-display\">{{ getDisplayValue() }}</span>\r\n            <svg class=\"clock-icon\" viewBox=\"0 0 24 24\" width=\"20\" height=\"20\" fill=\"currentColor\">\r\n                <path\r\n                    d=\"M12 2C6.5 2 2 6.5 2 12s4.5 10 10 10 10-4.5 10-10S17.5 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8zm.5-13H11v6l5.25 3.15.75-1.23-4.5-2.67z\" />\r\n            </svg>\r\n        </div>\r\n\r\n        <div *ngIf=\"showPicker\" class=\"time-picker-dropdown\">\r\n            <div class=\"time-picker-header\">\r\n                <span class=\"selected-time\">\r\n                    {{ selectedHour !== null ? padZero(selectedHour) : '--' }}:{{ selectedMinute !== null ?\r\n                    padZero(selectedMinute) : '--' }}\r\n                </span>\r\n                <button type=\"button\" class=\"close-btn\" (click)=\"closePicker()\">\u00D7</button>\r\n            </div>\r\n\r\n            <div class=\"time-picker-body\">\r\n                <div class=\"time-column\">\r\n                    <div class=\"column-header\">Hour</div>\r\n                    <div class=\"time-list\">\r\n                        <div *ngFor=\"let hour of hours\" class=\"time-item\" [class.selected]=\"selectedHour === hour\"\r\n                            (click)=\"selectHour(hour)\">\r\n                            {{ padZero(hour) }}\r\n                        </div>\r\n                    </div>\r\n                </div>\r\n\r\n                <div class=\"time-column\">\r\n                    <div class=\"column-header\">Minute</div>\r\n                    <div class=\"time-list\">\r\n                        <div *ngFor=\"let minute of minutes\" class=\"time-item\"\r\n                            [class.selected]=\"selectedMinute === minute\" (click)=\"selectMinute(minute)\">\r\n                            {{ padZero(minute) }}\r\n                        </div>\r\n                    </div>\r\n                </div>\r\n            </div>\r\n        </div>\r\n    </div>\r\n\r\n    <div *ngIf=\"errorMessage && control?.touched\" class=\"fv-error-message\">\r\n        {{ getErrorMessage() }}\r\n    </div>\r\n</div>", styles: ["@import\"https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap\";*{font-family:Poppins,sans-serif}.fv-field-container{display:flex;flex-direction:column;margin-bottom:16px;width:100%;position:relative}.fv-label{margin-bottom:6px;font-size:14px;font-weight:600;color:#151d48;display:flex;align-items:center;gap:4px}.fv-required-asterisk{color:#e74c3c;font-weight:700}.time-input-wrapper{position:relative;width:100%}.time-input{display:flex;align-items:center;justify-content:space-between;padding:5px 10px;border:1px solid #8CBBA8;border-radius:8px;font-size:14px;font-weight:400;font-family:Poppins,sans-serif;transition:all .2s ease-in-out;background-color:#fff;color:#1f2b41;box-sizing:border-box;width:100%;height:34px;cursor:pointer;-webkit-user-select:none;user-select:none}.time-input:focus{outline:none;border-color:#3498db;box-shadow:0 0 0 3px #3498db1a}.time-input:hover:not(.disabled){border-color:#3498db}.time-input.error{border-color:#dc3545!important}.time-input.error:focus{box-shadow:0 0 0 3px #dc35451a}.time-input.disabled{background-color:#ecf0f1;cursor:not-allowed;opacity:.6}.time-display{flex:1;color:#1f2b41}.clock-icon{color:#666;flex-shrink:0}.time-picker-dropdown{position:absolute;top:calc(100% + 4px);left:0;background:#fff;border:1px solid #8CBBA8;border-radius:8px;box-shadow:0 4px 12px #00000026;z-index:1000;min-width:200px;overflow:hidden}.time-picker-header{display:flex;justify-content:space-between;align-items:center;padding:12px 16px;background:#f8f9fa;border-bottom:1px solid #e0e0e0}.selected-time{font-size:18px;font-weight:600;color:#151d48}.close-btn{background:none;border:none;font-size:24px;color:#666;cursor:pointer;padding:0;width:24px;height:24px;display:flex;align-items:center;justify-content:center;transition:color .2s}.close-btn:hover{color:#e74c3c}.time-picker-body{display:flex;gap:1px;background:#e0e0e0}.time-column{flex:1;background:#fff;display:flex;flex-direction:column}.column-header{padding:8px;text-align:center;font-weight:600;font-size:12px;color:#666;background:#f8f9fa;border-bottom:1px solid #e0e0e0;text-transform:uppercase;letter-spacing:.5px}.time-list{max-height:200px;overflow-y:auto;scrollbar-width:thin;scrollbar-color:#8CBBA8 #f0f0f0}.time-list::-webkit-scrollbar{width:6px}.time-list::-webkit-scrollbar-track{background:#f0f0f0}.time-list::-webkit-scrollbar-thumb{background:#8cbba8;border-radius:3px}.time-list::-webkit-scrollbar-thumb:hover{background:#7aaa98}.time-item{padding:8px 12px;text-align:center;cursor:pointer;transition:all .2s;font-size:14px;color:#1f2b41}.time-item:hover{background:#e8f4f0}.time-item.selected{background:#8cbba8;color:#fff;font-weight:600}.fv-error-message{margin-top:4px;font-size:12px;color:#e74c3c;display:flex;align-items:center;gap:4px}.fv-error-message:before{content:\"\\26a0\";font-size:14px}\n"] }]
+        }], propDecorators: { label: [{
+                type: Input
+            }], schema: [{
+                type: Input
+            }], control: [{
+                type: Input
+            }], disabled: [{
+                type: Input
+            }], readonly: [{
+                type: Input
+            }], placeholder: [{
+                type: Input
+            }], valueChange: [{
+                type: Output
+            }], blur: [{
+                type: Output
+            }], focus: [{
+                type: Output
+            }] } });
+
 // add-update-form.component.ts
 class AddUpdateFormComponent {
     fb;
@@ -3361,8 +3608,8 @@ class AddUpdateFormComponent {
     }
     mapSearchOptions(options) {
         return options.map(opt => ({
-            code: opt.code || opt.value,
-            name: opt.name || opt.label || opt.value,
+            code: String(opt.code || opt.value || ''),
+            name: String(opt.name || opt.label || opt.value || ''),
             value: opt.value
         }));
     }
@@ -3663,6 +3910,7 @@ class AddUpdateFormComponent {
                     [control]="control"
                     [schema]="getSchema(column)"
                     [disabled]="column.disabled || false"
+                    (valueChange)="handleFieldChange(column.name, $event, control)"
                   >
                   </fv-name-code>
                 </ng-container>
@@ -3717,6 +3965,18 @@ class AddUpdateFormComponent {
                   >
                   </fv-document-field>
                 </ng-container>
+
+                <ng-container *ngIf="column.type === 'time' && !column.hidden">
+                  <fv-time-field
+                    [label]="column.label"
+                    [placeholder]="column.placeholder || '--:--'"
+                    [control]="control"
+                    [schema]="getSchema(column)"
+                    [disabled]="column.disabled || false"
+                    (valueChange)="handleFieldChange(column.name, $event, control)"
+                  >
+                  </fv-time-field>
+                </ng-container>
               </div>
 
         </ng-template>
@@ -3743,7 +4003,7 @@ class AddUpdateFormComponent {
         </div>
       </form>
     </div>
-  `, isInline: true, styles: ["@import\"https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap\";@import\"https://fonts.googleapis.com/icon?family=Material+Icons\";*{font-family:Poppins!important}.form-container{background:#f5f5f5;padding:5px 10px 10px;border-radius:8px;margin:0 auto;max-width:100%;box-sizing:border-box}.error-border{border-color:red!important}.hidden{display:none!important}.form-header{margin-bottom:5px}.form-header h2{margin:0;font-size:20px;font-weight:700;color:#303030}.dynamic-form{background:#fff;padding:10px;border-radius:6px;box-shadow:0 1px 3px #0000001a;max-width:100%;box-sizing:border-box}.form-section{margin-bottom:10px}.section-title{font-size:16px;font-weight:700;color:#303030;margin:0 0 16px;text-transform:uppercase;letter-spacing:.5px}.fields-row{display:grid;grid-template-columns:repeat(5,1fr);gap:16px;width:100%;box-sizing:border-box;overflow:visible}.form-field-wrapper{display:flex;position:relative;flex-direction:column;min-width:0;width:100%;box-sizing:border-box;overflow:visible}.password-toggle-btn{position:absolute;right:10px;top:32px;background:none;border:none;cursor:pointer;padding:4px;color:#666}.password-toggle-btn:hover{color:#333}.password-toggle-btn .material-icons{font-size:20px;width:auto;height:auto;padding:0}@media (min-width: 1200px) and (max-width: 1400px){.fields-row{grid-template-columns:repeat(5,1fr)}.form-control{width:180px;max-width:180px}}@media (max-width: 1200px){.fields-row{grid-template-columns:repeat(3,1fr)}.form-control{width:100%;max-width:100%}}@media (max-width: 992px){.fields-row{grid-template-columns:repeat(2,1fr);gap:12px}}@media (max-width: 768px){.fields-row{grid-template-columns:repeat(2,1fr);gap:10px}}@media (max-width: 640px){.fields-row{grid-template-columns:1fr;gap:12px}.form-field-wrapper{width:100%}}label{font-weight:600;margin-bottom:6px;color:#151d48;font-size:14px}.required{color:#e74c3c;margin-left:2px}.form-control{padding:5px 10px;width:100%;max-width:100%;height:34px;border:1px solid #8CBBA8;border-radius:8px;background-color:#fff;font-size:14px;font-weight:400;font-family:inherit;color:#1f2b41;transition:border-color .2s,box-shadow .2s;box-sizing:border-box}.form-control:focus{outline:none;border-color:#3498db;box-shadow:0 0 0 3px #3498db1a}.form-control:disabled{background-color:#ecf0f1;cursor:not-allowed}textarea.form-control{resize:vertical;min-height:100px}select.form-control{cursor:pointer;appearance:none;background-image:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23333' d='M6 9L1 4h10z'/%3E%3C/svg%3E\");background-repeat:no-repeat;background-position:right 8px center;padding-right:40px}.checkbox-wrapper{display:flex;align-items:center;gap:8px}input[type=checkbox]{width:18px;height:18px;cursor:pointer}.checkbox-label{cursor:pointer;margin:0}.file-upload-container{display:flex;align-items:center;gap:20px;padding:20px;background:#fff;max-width:100%;box-sizing:border-box;flex-wrap:wrap}.material-icons{font-family:Material Icons!important;border-radius:4px;display:inline-block;width:40px;padding:8px;height:40px}.file-field-wrapper{width:100%;margin-top:16px;max-width:100%;box-sizing:border-box}.photo-preview-circle{width:100px;height:100px;border-radius:50%;overflow:hidden;border:2px solid #ddd;cursor:pointer;transition:border-color .2s}.photo-preview-circle:hover{border-color:#3498db}.preview-image,.default-photo{width:100%;height:100%;display:flex;align-items:center;justify-content:center}.preview-image img{width:100%;height:100%;object-fit:cover}.default-photo{background:#f0f0f0;color:#999;font-size:40px}.file-info{display:flex;flex-direction:column;gap:8px}.btn-delete{border:none;border-radius:4px;cursor:pointer;font-size:14px;padding:0}.upload-btn-group{display:flex;align-items:center;border:1px solid #d3d3d3;border-radius:8px;background:#fff;overflow:hidden;width:fit-content}.btn-upload{background:#fff;color:#222;border:none;padding:0 18px;font-size:16px;border-right:1px solid #e0e0e0;border-radius:8px 0 0 8px;outline:none;box-shadow:none;cursor:pointer;height:40px;transition:background .2s}.btn-upload-icon{background:#f5f5f5;border:none;border-radius:0 8px 8px 0;display:flex;align-items:center;justify-content:center;width:48px;height:40px;cursor:pointer;transition:background .2s}.btn-upload-icon i.material-icons{font-size:22px;color:#222}.btn-upload:hover,.btn-upload-icon:hover{background:#f0f0f0}.btn-delete{background:#fff;color:red}.btn-delete:hover{background:#f0f0f0}.file-name{font-size:12px;color:#666;margin:10px 8px 8px}.file-label{font-weight:600;margin-bottom:6px;color:#151d48;font-size:14px;display:block}.radio-label{font-weight:600;margin-bottom:15px;color:#151d48;font-size:14px;display:block}.radio-group{display:flex;gap:20px;align-items:center}.radio-item{display:flex;align-items:center;gap:6px}input[type=radio]{width:18px;height:18px;cursor:pointer;accent-color:#3498db}.radio-option-label{cursor:pointer;margin:0;font-weight:400}.hint{font-size:12px;color:#7f8c8d;margin-top:4px}.error-message{color:#e74c3c;font-size:12px;margin-top:4px}.form-actions{display:flex;gap:8px;align-items:center;justify-content:space-between;gap:12px;padding-top:5px}.btn{padding:8px 20px;border:none;border-radius:7px;font-size:12px;font-weight:600;cursor:pointer;transition:all .2s}.btn-primary{background-color:#006aff;color:#fff}.btn-primary:hover:not(:disabled){background-color:#2980b9}.btn-primary:disabled{background-color:#bdc3c7;cursor:not-allowed}.btn-secondary{background-color:#95a5a6;color:#fff}.btn-secondary:hover{background-color:#7f8c8d}.btn-outline{background-color:#303030;color:#fff}.btn-outline:hover{background-color:#2b2b2b;color:#fff}.month-year-wrapper{position:relative;display:flex;align-items:center;width:100%}.month-year-wrapper .form-control{padding-right:45px}.month-picker-hidden{position:absolute;opacity:0;pointer-events:none;width:0;height:0;border:none;padding:0;margin:0}.month-picker-btn{position:absolute;right:5px;background:transparent;border:none;cursor:pointer;padding:5px;display:flex;align-items:center;justify-content:center;color:#666;transition:color .2s;z-index:1}.month-picker-btn:hover:not(:disabled){color:#3498db}.month-picker-btn:disabled{cursor:not-allowed;opacity:.5}.month-picker-btn .material-icons{font-size:20px;width:auto;height:auto;padding:0}.search-select-wrapper{position:relative;width:100%}.search-select-input{padding-right:10px}.search-select-dropdown{position:absolute;top:calc(100% + 4px);left:0;right:auto;min-width:100%;max-width:calc(100vw - 16px);background:#fff;border:1px solid #d3d3d3;border-radius:8px;max-height:220px;overflow-y:auto;box-shadow:0 4px 10px #00000014;z-index:5;padding:6px 0;transform:translate(0);transition:transform .1s ease-out}.search-select-option{padding:8px 12px;cursor:pointer;display:flex;gap:8px;align-items:center;border-bottom:1px solid #f2f2f2}.search-select-option:last-child{border-bottom:none}.search-select-option:hover{background:#f5f9ff}.repeatable-group-wrapper{position:relative;background:#fff;border:1px solid #eee;border-radius:8px;padding:20px 100px 20px 20px;margin-bottom:15px;box-shadow:0 1px 2px #0000000d}.repeatable-actions{position:absolute;top:45px;right:15px;display:flex;gap:8px;z-index:10}.btn-icon{background:none;border:none;cursor:pointer;padding:4px;display:flex;align-items:center;justify-content:center;border-radius:50%;transition:background .2s}.btn-icon:hover{background:#f0f0f0}.option-code{color:#0052cc;font-weight:700;min-width:90px}.option-name{color:#151d48;font-weight:500}.time-picker-wrapper{position:relative;display:flex;align-items:center;width:100%}.time-input{padding-right:45px;flex:1}.time-picker-btn{position:absolute;right:5px;background:transparent;border:none;cursor:pointer;padding:5px;display:flex;align-items:center;justify-content:center;color:#666;transition:color .2s;z-index:1}.time-picker-btn:hover:not(:disabled){color:#3498db}.time-picker-btn:disabled{cursor:not-allowed;opacity:.5}.time-picker-btn .material-icons{font-size:20px;width:auto;height:auto;padding:0}input[type=time]{cursor:pointer}input[type=time]::-webkit-calendar-picker-indicator{cursor:pointer;opacity:0;position:absolute;right:0;width:100%;height:100%}.date-picker-field{width:100%}.date-picker-field ::ng-deep .mat-mdc-form-field{width:100%}.date-picker-field ::ng-deep .mat-mdc-text-field-wrapper{background-color:#fff}.date-picker-field ::ng-deep .mdc-text-field--outlined .mdc-notched-outline__leading,.date-picker-field ::ng-deep .mdc-text-field--outlined .mdc-notched-outline__notch,.date-picker-field ::ng-deep .mdc-text-field--outlined .mdc-notched-outline__trailing{border-color:#8cbba8}.date-picker-field ::ng-deep .mdc-text-field--outlined:not(.mdc-text-field--disabled) .mdc-notched-outline__leading,.date-picker-field ::ng-deep .mdc-text-field--outlined:not(.mdc-text-field--disabled) .mdc-notched-outline__notch,.date-picker-field ::ng-deep .mdc-text-field--outlined:not(.mdc-text-field--disabled) .mdc-notched-outline__trailing{border-color:#8cbba8}.date-picker-field ::ng-deep .mdc-text-field--outlined.mdc-text-field--focused .mdc-notched-outline__leading,.date-picker-field ::ng-deep .mdc-text-field--outlined.mdc-text-field--focused .mdc-notched-outline__notch,.date-picker-field ::ng-deep .mdc-text-field--outlined.mdc-text-field--focused .mdc-notched-outline__trailing{border-color:#3498db}.date-picker-field.error-border ::ng-deep .mdc-text-field--outlined .mdc-notched-outline__leading,.date-picker-field.error-border ::ng-deep .mdc-text-field--outlined .mdc-notched-outline__notch,.date-picker-field.error-border ::ng-deep .mdc-text-field--outlined .mdc-notched-outline__trailing{border-color:red!important}.date-picker-field ::ng-deep .mat-mdc-form-field-subscript-wrapper{display:none}.date-picker-field ::ng-deep .mat-mdc-form-field-input-control input{font-family:Poppins!important;font-size:14px;font-weight:400;color:#1f2b41}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "component", type: FvEntryFieldComponent, selector: "fv-entry-field", inputs: ["label", "placeholder", "schema", "control", "disabled", "readonly", "type", "allowAlphabetsOnly", "maxLength"], outputs: ["valueChange", "blur", "focus"] }, { kind: "component", type: FvNumberFieldComponent, selector: "fv-number-field", inputs: ["label", "placeholder", "schema", "control", "disabled", "readonly", "min", "max", "step"], outputs: ["valueChange", "blur", "focus"] }, { kind: "component", type: FvDropdownComponent, selector: "fv-dropdown", inputs: ["label", "placeholder", "options", "schema", "control", "disabled"], outputs: ["valueChange", "blur", "focus"] }, { kind: "component", type: FvRadioGroupComponent, selector: "fv-radio-group", inputs: ["label", "control", "options", "disabled", "required", "name", "layout"], outputs: ["valueChange"] }, { kind: "component", type: FvCheckboxComponent, selector: "fv-checkbox", inputs: ["label", "control", "disabled", "required"], outputs: ["valueChange"] }, { kind: "component", type: FvDateFieldComponent, selector: "fv-date-field", inputs: ["label", "schema", "control", "disabled", "readonly", "min", "max"], outputs: ["valueChange", "blur", "focus"] }, { kind: "component", type: FvMonthYearFieldComponent, selector: "fv-month-year-field", inputs: ["label", "schema", "control", "disabled", "readonly", "min", "max"], outputs: ["valueChange", "blur", "focus"] }, { kind: "component", type: FvFileSelectorComponent, selector: "fv-file-selector", inputs: ["label", "placeholder", "schema", "control", "disabled", "accept", "maxSize"], outputs: ["valueChange", "blur"] }, { kind: "component", type: FvImageSelectorComponent, selector: "fv-image-selector", inputs: ["label", "placeholder", "schema", "control", "disabled", "maxSize"], outputs: ["valueChange", "blur"] }, { kind: "component", type: FvRichTextEditorComponent, selector: "fv-rich-text-editor", inputs: ["label", "placeholder", "schema", "control", "disabled", "readonly", "minHeight", "showToolbar"], outputs: ["valueChange", "blur", "focus"] }, { kind: "component", type: FvNameCodeComponent, selector: "fv-name-code", inputs: ["label", "placeholder", "options", "schema", "control", "disabled"], outputs: ["selectionChange"] }, { kind: "component", type: FvPhoneFieldComponent, selector: "fv-phone-field", inputs: ["label", "control", "disabled", "schema"], outputs: ["blur", "focus"] }, { kind: "component", type: FvUanFieldComponent, selector: "fv-uan-field", inputs: ["label", "control", "disabled", "schema"], outputs: ["blur", "focus"] }, { kind: "component", type: FvPfFieldComponent, selector: "fv-pf-field", inputs: ["label", "control", "disabled", "schema"], outputs: ["blur", "focus"] }, { kind: "component", type: FvEsiFieldComponent, selector: "fv-esi-field", inputs: ["label", "control", "disabled", "schema"], outputs: ["blur", "focus"] }, { kind: "component", type: FvIfscFieldComponent, selector: "fv-ifsc-field", inputs: ["label", "control", "disabled", "schema"], outputs: ["blur", "focus"] }, { kind: "component", type: FvMicrFieldComponent, selector: "fv-micr-field", inputs: ["label", "control", "disabled", "schema"], outputs: ["blur", "focus"] }, { kind: "component", type: FvIbanFieldComponent, selector: "fv-iban-field", inputs: ["label", "control", "disabled", "schema"], outputs: ["blur", "focus"] }, { kind: "component", type: FvEmailFieldComponent, selector: "fv-email-field", inputs: ["label", "placeholder", "schema", "control", "disabled", "readonly"], outputs: ["valueChange", "blur", "focus"] }, { kind: "component", type: FvPasswordFieldComponent, selector: "fv-password-field", inputs: ["label", "placeholder", "schema", "control", "disabled", "readonly"], outputs: ["valueChange", "blur", "focus"] }, { kind: "component", type: FvServicePeriodComponent, selector: "fv-service-period", inputs: ["label", "group", "startField", "endField", "control"] }, { kind: "component", type: FvDocumentFieldComponent, selector: "fv-document-field", inputs: ["label", "placeholder", "schema", "control", "disabled", "accept", "maxSize"], outputs: ["valueChange"] }] });
+  `, isInline: true, styles: ["@import\"https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap\";@import\"https://fonts.googleapis.com/icon?family=Material+Icons\";*{font-family:Poppins!important}.form-container{background:#f5f5f5;padding:5px 10px 10px;border-radius:8px;margin:0 auto;max-width:100%;box-sizing:border-box}.error-border{border-color:red!important}.hidden{display:none!important}.form-header{margin-bottom:5px}.form-header h2{margin:0;font-size:20px;font-weight:700;color:#303030}.dynamic-form{background:#fff;padding:10px;border-radius:6px;box-shadow:0 1px 3px #0000001a;max-width:100%;box-sizing:border-box}.form-section{margin-bottom:10px}.section-title{font-size:16px;font-weight:700;color:#303030;margin:0 0 16px;text-transform:uppercase;letter-spacing:.5px}.fields-row{display:grid;grid-template-columns:repeat(5,1fr);gap:16px;width:100%;box-sizing:border-box;overflow:visible}.form-field-wrapper{display:flex;position:relative;flex-direction:column;min-width:0;width:100%;box-sizing:border-box;overflow:visible}.password-toggle-btn{position:absolute;right:10px;top:32px;background:none;border:none;cursor:pointer;padding:4px;color:#666}.password-toggle-btn:hover{color:#333}.password-toggle-btn .material-icons{font-size:20px;width:auto;height:auto;padding:0}@media (min-width: 1200px) and (max-width: 1400px){.fields-row{grid-template-columns:repeat(5,1fr)}.form-control{width:180px;max-width:180px}}@media (max-width: 1200px){.fields-row{grid-template-columns:repeat(3,1fr)}.form-control{width:100%;max-width:100%}}@media (max-width: 992px){.fields-row{grid-template-columns:repeat(2,1fr);gap:12px}}@media (max-width: 768px){.fields-row{grid-template-columns:repeat(2,1fr);gap:10px}}@media (max-width: 640px){.fields-row{grid-template-columns:1fr;gap:12px}.form-field-wrapper{width:100%}}label{font-weight:600;margin-bottom:6px;color:#151d48;font-size:14px}.required{color:#e74c3c;margin-left:2px}.form-control{padding:5px 10px;width:100%;max-width:100%;height:34px;border:1px solid #8CBBA8;border-radius:8px;background-color:#fff;font-size:14px;font-weight:400;font-family:inherit;color:#1f2b41;transition:border-color .2s,box-shadow .2s;box-sizing:border-box}.form-control:focus{outline:none;border-color:#3498db;box-shadow:0 0 0 3px #3498db1a}.form-control:disabled{background-color:#ecf0f1;cursor:not-allowed}textarea.form-control{resize:vertical;min-height:100px}select.form-control{cursor:pointer;appearance:none;background-image:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23333' d='M6 9L1 4h10z'/%3E%3C/svg%3E\");background-repeat:no-repeat;background-position:right 8px center;padding-right:40px}.checkbox-wrapper{display:flex;align-items:center;gap:8px}input[type=checkbox]{width:18px;height:18px;cursor:pointer}.checkbox-label{cursor:pointer;margin:0}.file-upload-container{display:flex;align-items:center;gap:20px;padding:20px;background:#fff;max-width:100%;box-sizing:border-box;flex-wrap:wrap}.material-icons{font-family:Material Icons!important;border-radius:4px;display:inline-block;width:40px;padding:8px;height:40px}.file-field-wrapper{width:100%;margin-top:16px;max-width:100%;box-sizing:border-box}.photo-preview-circle{width:100px;height:100px;border-radius:50%;overflow:hidden;border:2px solid #ddd;cursor:pointer;transition:border-color .2s}.photo-preview-circle:hover{border-color:#3498db}.preview-image,.default-photo{width:100%;height:100%;display:flex;align-items:center;justify-content:center}.preview-image img{width:100%;height:100%;object-fit:cover}.default-photo{background:#f0f0f0;color:#999;font-size:40px}.file-info{display:flex;flex-direction:column;gap:8px}.btn-delete{border:none;border-radius:4px;cursor:pointer;font-size:14px;padding:0}.upload-btn-group{display:flex;align-items:center;border:1px solid #d3d3d3;border-radius:8px;background:#fff;overflow:hidden;width:fit-content}.btn-upload{background:#fff;color:#222;border:none;padding:0 18px;font-size:16px;border-right:1px solid #e0e0e0;border-radius:8px 0 0 8px;outline:none;box-shadow:none;cursor:pointer;height:40px;transition:background .2s}.btn-upload-icon{background:#f5f5f5;border:none;border-radius:0 8px 8px 0;display:flex;align-items:center;justify-content:center;width:48px;height:40px;cursor:pointer;transition:background .2s}.btn-upload-icon i.material-icons{font-size:22px;color:#222}.btn-upload:hover,.btn-upload-icon:hover{background:#f0f0f0}.btn-delete{background:#fff;color:red}.btn-delete:hover{background:#f0f0f0}.file-name{font-size:12px;color:#666;margin:10px 8px 8px}.file-label{font-weight:600;margin-bottom:6px;color:#151d48;font-size:14px;display:block}.radio-label{font-weight:600;margin-bottom:15px;color:#151d48;font-size:14px;display:block}.radio-group{display:flex;gap:20px;align-items:center}.radio-item{display:flex;align-items:center;gap:6px}input[type=radio]{width:18px;height:18px;cursor:pointer;accent-color:#3498db}.radio-option-label{cursor:pointer;margin:0;font-weight:400}.hint{font-size:12px;color:#7f8c8d;margin-top:4px}.error-message{color:#e74c3c;font-size:12px;margin-top:4px}.form-actions{display:flex;gap:8px;align-items:center;justify-content:space-between;gap:12px;padding-top:5px}.btn{padding:8px 20px;border:none;border-radius:7px;font-size:12px;font-weight:600;cursor:pointer;transition:all .2s}.btn-primary{background-color:#006aff;color:#fff}.btn-primary:hover:not(:disabled){background-color:#2980b9}.btn-primary:disabled{background-color:#bdc3c7;cursor:not-allowed}.btn-secondary{background-color:#95a5a6;color:#fff}.btn-secondary:hover{background-color:#7f8c8d}.btn-outline{background-color:#303030;color:#fff}.btn-outline:hover{background-color:#2b2b2b;color:#fff}.month-year-wrapper{position:relative;display:flex;align-items:center;width:100%}.month-year-wrapper .form-control{padding-right:45px}.month-picker-hidden{position:absolute;opacity:0;pointer-events:none;width:0;height:0;border:none;padding:0;margin:0}.month-picker-btn{position:absolute;right:5px;background:transparent;border:none;cursor:pointer;padding:5px;display:flex;align-items:center;justify-content:center;color:#666;transition:color .2s;z-index:1}.month-picker-btn:hover:not(:disabled){color:#3498db}.month-picker-btn:disabled{cursor:not-allowed;opacity:.5}.month-picker-btn .material-icons{font-size:20px;width:auto;height:auto;padding:0}.search-select-wrapper{position:relative;width:100%}.search-select-input{padding-right:10px}.search-select-dropdown{position:absolute;top:calc(100% + 4px);left:0;right:auto;min-width:100%;max-width:calc(100vw - 16px);background:#fff;border:1px solid #d3d3d3;border-radius:8px;max-height:220px;overflow-y:auto;box-shadow:0 4px 10px #00000014;z-index:5;padding:6px 0;transform:translate(0);transition:transform .1s ease-out}.search-select-option{padding:8px 12px;cursor:pointer;display:flex;gap:8px;align-items:center;border-bottom:1px solid #f2f2f2}.search-select-option:last-child{border-bottom:none}.search-select-option:hover{background:#f5f9ff}.repeatable-group-wrapper{position:relative;background:#fff;border:1px solid #eee;border-radius:8px;padding:20px 100px 20px 20px;margin-bottom:15px;box-shadow:0 1px 2px #0000000d}.repeatable-actions{position:absolute;top:45px;right:15px;display:flex;gap:8px;z-index:10}.btn-icon{background:none;border:none;cursor:pointer;padding:4px;display:flex;align-items:center;justify-content:center;border-radius:50%;transition:background .2s}.btn-icon:hover{background:#f0f0f0}.option-code{color:#0052cc;font-weight:700;min-width:90px}.option-name{color:#151d48;font-weight:500}.time-picker-wrapper{position:relative;display:flex;align-items:center;width:100%}.time-input{padding-right:45px;flex:1}.time-picker-btn{position:absolute;right:5px;background:transparent;border:none;cursor:pointer;padding:5px;display:flex;align-items:center;justify-content:center;color:#666;transition:color .2s;z-index:1}.time-picker-btn:hover:not(:disabled){color:#3498db}.time-picker-btn:disabled{cursor:not-allowed;opacity:.5}.time-picker-btn .material-icons{font-size:20px;width:auto;height:auto;padding:0}input[type=time]{cursor:pointer}input[type=time]::-webkit-calendar-picker-indicator{cursor:pointer;opacity:0;position:absolute;right:0;width:100%;height:100%}.date-picker-field{width:100%}.date-picker-field ::ng-deep .mat-mdc-form-field{width:100%}.date-picker-field ::ng-deep .mat-mdc-text-field-wrapper{background-color:#fff}.date-picker-field ::ng-deep .mdc-text-field--outlined .mdc-notched-outline__leading,.date-picker-field ::ng-deep .mdc-text-field--outlined .mdc-notched-outline__notch,.date-picker-field ::ng-deep .mdc-text-field--outlined .mdc-notched-outline__trailing{border-color:#8cbba8}.date-picker-field ::ng-deep .mdc-text-field--outlined:not(.mdc-text-field--disabled) .mdc-notched-outline__leading,.date-picker-field ::ng-deep .mdc-text-field--outlined:not(.mdc-text-field--disabled) .mdc-notched-outline__notch,.date-picker-field ::ng-deep .mdc-text-field--outlined:not(.mdc-text-field--disabled) .mdc-notched-outline__trailing{border-color:#8cbba8}.date-picker-field ::ng-deep .mdc-text-field--outlined.mdc-text-field--focused .mdc-notched-outline__leading,.date-picker-field ::ng-deep .mdc-text-field--outlined.mdc-text-field--focused .mdc-notched-outline__notch,.date-picker-field ::ng-deep .mdc-text-field--outlined.mdc-text-field--focused .mdc-notched-outline__trailing{border-color:#3498db}.date-picker-field.error-border ::ng-deep .mdc-text-field--outlined .mdc-notched-outline__leading,.date-picker-field.error-border ::ng-deep .mdc-text-field--outlined .mdc-notched-outline__notch,.date-picker-field.error-border ::ng-deep .mdc-text-field--outlined .mdc-notched-outline__trailing{border-color:red!important}.date-picker-field ::ng-deep .mat-mdc-form-field-subscript-wrapper{display:none}.date-picker-field ::ng-deep .mat-mdc-form-field-input-control input{font-family:Poppins!important;font-size:14px;font-weight:400;color:#1f2b41}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "component", type: FvEntryFieldComponent, selector: "fv-entry-field", inputs: ["label", "placeholder", "schema", "control", "disabled", "readonly", "type", "allowAlphabetsOnly", "maxLength"], outputs: ["valueChange", "blur", "focus"] }, { kind: "component", type: FvNumberFieldComponent, selector: "fv-number-field", inputs: ["label", "placeholder", "schema", "control", "disabled", "readonly", "min", "max", "step"], outputs: ["valueChange", "blur", "focus"] }, { kind: "component", type: FvDropdownComponent, selector: "fv-dropdown", inputs: ["label", "placeholder", "options", "schema", "control", "disabled"], outputs: ["valueChange", "blur", "focus"] }, { kind: "component", type: FvRadioGroupComponent, selector: "fv-radio-group", inputs: ["label", "control", "options", "disabled", "required", "name", "layout"], outputs: ["valueChange"] }, { kind: "component", type: FvCheckboxComponent, selector: "fv-checkbox", inputs: ["label", "control", "disabled", "required"], outputs: ["valueChange"] }, { kind: "component", type: FvDateFieldComponent, selector: "fv-date-field", inputs: ["label", "schema", "control", "disabled", "readonly", "min", "max"], outputs: ["valueChange", "blur", "focus"] }, { kind: "component", type: FvMonthYearFieldComponent, selector: "fv-month-year-field", inputs: ["label", "schema", "control", "disabled", "readonly", "min", "max"], outputs: ["valueChange", "blur", "focus"] }, { kind: "component", type: FvFileSelectorComponent, selector: "fv-file-selector", inputs: ["label", "placeholder", "schema", "control", "disabled", "accept", "maxSize"], outputs: ["valueChange", "blur"] }, { kind: "component", type: FvImageSelectorComponent, selector: "fv-image-selector", inputs: ["label", "placeholder", "schema", "control", "disabled", "maxSize"], outputs: ["valueChange", "blur"] }, { kind: "component", type: FvRichTextEditorComponent, selector: "fv-rich-text-editor", inputs: ["label", "placeholder", "schema", "control", "disabled", "readonly", "minHeight", "showToolbar"], outputs: ["valueChange", "blur", "focus"] }, { kind: "component", type: FvNameCodeComponent, selector: "fv-name-code", inputs: ["label", "placeholder", "options", "schema", "control", "disabled"], outputs: ["valueChange"] }, { kind: "component", type: FvPhoneFieldComponent, selector: "fv-phone-field", inputs: ["label", "control", "disabled", "schema"], outputs: ["blur", "focus"] }, { kind: "component", type: FvUanFieldComponent, selector: "fv-uan-field", inputs: ["label", "control", "disabled", "schema"], outputs: ["blur", "focus"] }, { kind: "component", type: FvPfFieldComponent, selector: "fv-pf-field", inputs: ["label", "control", "disabled", "schema"], outputs: ["blur", "focus"] }, { kind: "component", type: FvEsiFieldComponent, selector: "fv-esi-field", inputs: ["label", "control", "disabled", "schema"], outputs: ["blur", "focus"] }, { kind: "component", type: FvIfscFieldComponent, selector: "fv-ifsc-field", inputs: ["label", "control", "disabled", "schema"], outputs: ["blur", "focus"] }, { kind: "component", type: FvMicrFieldComponent, selector: "fv-micr-field", inputs: ["label", "control", "disabled", "schema"], outputs: ["blur", "focus"] }, { kind: "component", type: FvIbanFieldComponent, selector: "fv-iban-field", inputs: ["label", "control", "disabled", "schema"], outputs: ["blur", "focus"] }, { kind: "component", type: FvEmailFieldComponent, selector: "fv-email-field", inputs: ["label", "placeholder", "schema", "control", "disabled", "readonly"], outputs: ["valueChange", "blur", "focus"] }, { kind: "component", type: FvPasswordFieldComponent, selector: "fv-password-field", inputs: ["label", "placeholder", "schema", "control", "disabled", "readonly"], outputs: ["valueChange", "blur", "focus"] }, { kind: "component", type: FvServicePeriodComponent, selector: "fv-service-period", inputs: ["label", "group", "startField", "endField", "control"] }, { kind: "component", type: FvDocumentFieldComponent, selector: "fv-document-field", inputs: ["label", "placeholder", "schema", "control", "disabled", "accept", "maxSize"], outputs: ["valueChange"] }, { kind: "component", type: FvTimeFieldComponent, selector: "fv-time-field", inputs: ["label", "schema", "control", "disabled", "readonly", "placeholder"], outputs: ["valueChange", "blur", "focus"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: AddUpdateFormComponent, decorators: [{
             type: Component,
@@ -3771,7 +4031,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
                         FvEmailFieldComponent,
                         FvPasswordFieldComponent,
                         FvServicePeriodComponent,
-                        FvDocumentFieldComponent
+                        FvDocumentFieldComponent,
+                        FvTimeFieldComponent
                     ], template: `
     <div class="form-container">
       <div class="form-header" *ngIf="config.formTitle">
@@ -3998,6 +4259,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
                     [control]="control"
                     [schema]="getSchema(column)"
                     [disabled]="column.disabled || false"
+                    (valueChange)="handleFieldChange(column.name, $event, control)"
                   >
                   </fv-name-code>
                 </ng-container>
@@ -4052,6 +4314,18 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
                   >
                   </fv-document-field>
                 </ng-container>
+
+                <ng-container *ngIf="column.type === 'time' && !column.hidden">
+                  <fv-time-field
+                    [label]="column.label"
+                    [placeholder]="column.placeholder || '--:--'"
+                    [control]="control"
+                    [schema]="getSchema(column)"
+                    [disabled]="column.disabled || false"
+                    (valueChange)="handleFieldChange(column.name, $event, control)"
+                  >
+                  </fv-time-field>
+                </ng-container>
               </div>
 
         </ng-template>
@@ -4450,7 +4724,7 @@ class QueryFormComponent {
         </form>
       </div>
     </div>
-  `, isInline: true, styles: ["@import\"https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap\";@import\"https://fonts.googleapis.com/icon?family=Material+Icons\";*{font-family:Poppins}.material-icons{font-family:Material Icons!important;font-size:22px;display:inline-block}.cont{display:flex;justify-content:space-between;align-items:center;margin-bottom:10px}.validation-message{background-color:#fee;color:#c33;padding:12px 16px;border-radius:8px;margin:10px 0;display:flex;align-items:center;gap:8px;font-size:14px;font-weight:500;border:1px solid #fcc}.export-buttons{display:flex;gap:10px}.export-btn{cursor:pointer;display:flex;align-items:center;gap:5px;transition:all .3s ease;border:none;padding:8px 16px;border-radius:7px;background:#006aff;color:#fff}.export-btn:hover{background:#0045a6;box-shadow:0 4px 8px #00000026}.export-menu-container{position:relative;border-radius:7px}.export-menu{position:absolute;top:100%;right:0;background:#fff;border-radius:4px;box-shadow:0 4px 12px #00000026;margin-top:5px;min-width:180px;z-index:1000}.menu-item{width:100%;color:#000;text-align:left;background:#fff;border:none;cursor:pointer;font-size:14px;transition:background .2s;padding:12px 16px;display:flex;align-items:center;gap:10px}.menu-item:hover{background:#f5f5f5}.query-form-container{background:#f2f2f2;border-radius:8px;padding:5px 10px 10px;margin:auto;box-shadow:0 2px 5px #0000001a;margin-bottom:1rem;overflow:visible}.form-title{font-size:20px;font-weight:700;color:#303030;margin:0;font-family:Poppins}.form-content{display:flex;flex-direction:column;gap:5px;background-color:#fff;padding:10px;border:.5px solid #cfcfcf;border-radius:12px;overflow:visible}.form-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:12px;width:100%;box-sizing:border-box;overflow:visible}.form-field{display:flex;flex-direction:column;min-width:0;width:100%;position:relative;overflow:visible;box-sizing:border-box}.view-button{padding:8px 20px;background:#006aff;color:#fff;border:none;border-radius:7px;font-size:12px;font-weight:600;cursor:pointer;transition:background-color .2s}.view-button:hover{background:#0045a6}.button-row{display:flex;justify-content:space-between;gap:12px;padding-top:5px;margin-top:5px}.back-button{padding:8px 20px;background-color:#303030;color:#fff;border:none;border-radius:7px;font-size:12px;font-weight:600;cursor:pointer;transition:background-color .2s}.back-button:hover{background-color:#2b2b2b}@media (min-width: 1200px) and (max-width: 1400px){.form-row{grid-template-columns:repeat(5,1fr)}}@media (max-width: 1200px){.form-row{grid-template-columns:repeat(3,1fr)}}@media (max-width: 992px){.form-row{grid-template-columns:repeat(2,1fr);gap:12px}}@media (max-width: 768px){.form-row{grid-template-columns:repeat(2,1fr);gap:10px}}@media (max-width: 640px){.form-row{grid-template-columns:1fr;gap:12px}.form-field{width:100%}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "component", type: FvEntryFieldComponent, selector: "fv-entry-field", inputs: ["label", "placeholder", "schema", "control", "disabled", "readonly", "type", "allowAlphabetsOnly", "maxLength"], outputs: ["valueChange", "blur", "focus"] }, { kind: "component", type: FvDropdownComponent, selector: "fv-dropdown", inputs: ["label", "placeholder", "options", "schema", "control", "disabled"], outputs: ["valueChange", "blur", "focus"] }, { kind: "component", type: FvNumberFieldComponent, selector: "fv-number-field", inputs: ["label", "placeholder", "schema", "control", "disabled", "readonly", "min", "max", "step"], outputs: ["valueChange", "blur", "focus"] }, { kind: "component", type: FvDateFieldComponent, selector: "fv-date-field", inputs: ["label", "schema", "control", "disabled", "readonly", "min", "max"], outputs: ["valueChange", "blur", "focus"] }, { kind: "component", type: FvMonthYearFieldComponent, selector: "fv-month-year-field", inputs: ["label", "schema", "control", "disabled", "readonly", "min", "max"], outputs: ["valueChange", "blur", "focus"] }, { kind: "component", type: FvFileSelectorComponent, selector: "fv-file-selector", inputs: ["label", "placeholder", "schema", "control", "disabled", "accept", "maxSize"], outputs: ["valueChange", "blur"] }, { kind: "component", type: FvNameCodeComponent, selector: "fv-name-code", inputs: ["label", "placeholder", "options", "schema", "control", "disabled"], outputs: ["selectionChange"] }, { kind: "component", type: FvPhoneFieldComponent, selector: "fv-phone-field", inputs: ["label", "control", "disabled", "schema"], outputs: ["blur", "focus"] }, { kind: "component", type: FvUanFieldComponent, selector: "fv-uan-field", inputs: ["label", "control", "disabled", "schema"], outputs: ["blur", "focus"] }, { kind: "component", type: FvPfFieldComponent, selector: "fv-pf-field", inputs: ["label", "control", "disabled", "schema"], outputs: ["blur", "focus"] }, { kind: "component", type: FvEsiFieldComponent, selector: "fv-esi-field", inputs: ["label", "control", "disabled", "schema"], outputs: ["blur", "focus"] }, { kind: "component", type: FvIfscFieldComponent, selector: "fv-ifsc-field", inputs: ["label", "control", "disabled", "schema"], outputs: ["blur", "focus"] }, { kind: "component", type: FvMicrFieldComponent, selector: "fv-micr-field", inputs: ["label", "control", "disabled", "schema"], outputs: ["blur", "focus"] }, { kind: "component", type: FvIbanFieldComponent, selector: "fv-iban-field", inputs: ["label", "control", "disabled", "schema"], outputs: ["blur", "focus"] }, { kind: "component", type: FvEmailFieldComponent, selector: "fv-email-field", inputs: ["label", "placeholder", "schema", "control", "disabled", "readonly"], outputs: ["valueChange", "blur", "focus"] }, { kind: "component", type: FvPasswordFieldComponent, selector: "fv-password-field", inputs: ["label", "placeholder", "schema", "control", "disabled", "readonly"], outputs: ["valueChange", "blur", "focus"] }] });
+  `, isInline: true, styles: ["@import\"https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap\";@import\"https://fonts.googleapis.com/icon?family=Material+Icons\";*{font-family:Poppins}.material-icons{font-family:Material Icons!important;font-size:22px;display:inline-block}.cont{display:flex;justify-content:space-between;align-items:center;margin-bottom:10px}.validation-message{background-color:#fee;color:#c33;padding:12px 16px;border-radius:8px;margin:10px 0;display:flex;align-items:center;gap:8px;font-size:14px;font-weight:500;border:1px solid #fcc}.export-buttons{display:flex;gap:10px}.export-btn{cursor:pointer;display:flex;align-items:center;gap:5px;transition:all .3s ease;border:none;padding:8px 16px;border-radius:7px;background:#006aff;color:#fff}.export-btn:hover{background:#0045a6;box-shadow:0 4px 8px #00000026}.export-menu-container{position:relative;border-radius:7px}.export-menu{position:absolute;top:100%;right:0;background:#fff;border-radius:4px;box-shadow:0 4px 12px #00000026;margin-top:5px;min-width:180px;z-index:1000}.menu-item{width:100%;color:#000;text-align:left;background:#fff;border:none;cursor:pointer;font-size:14px;transition:background .2s;padding:12px 16px;display:flex;align-items:center;gap:10px}.menu-item:hover{background:#f5f5f5}.query-form-container{background:#f2f2f2;border-radius:8px;padding:5px 10px 10px;margin:auto;box-shadow:0 2px 5px #0000001a;margin-bottom:1rem;overflow:visible}.form-title{font-size:20px;font-weight:700;color:#303030;margin:0;font-family:Poppins}.form-content{display:flex;flex-direction:column;gap:5px;background-color:#fff;padding:10px;border:.5px solid #cfcfcf;border-radius:12px;overflow:visible}.form-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:12px;width:100%;box-sizing:border-box;overflow:visible}.form-field{display:flex;flex-direction:column;min-width:0;width:100%;position:relative;overflow:visible;box-sizing:border-box}.view-button{padding:8px 20px;background:#006aff;color:#fff;border:none;border-radius:7px;font-size:12px;font-weight:600;cursor:pointer;transition:background-color .2s}.view-button:hover{background:#0045a6}.button-row{display:flex;justify-content:space-between;gap:12px;padding-top:5px;margin-top:5px}.back-button{padding:8px 20px;background-color:#303030;color:#fff;border:none;border-radius:7px;font-size:12px;font-weight:600;cursor:pointer;transition:background-color .2s}.back-button:hover{background-color:#2b2b2b}@media (min-width: 1200px) and (max-width: 1400px){.form-row{grid-template-columns:repeat(5,1fr)}}@media (max-width: 1200px){.form-row{grid-template-columns:repeat(3,1fr)}}@media (max-width: 992px){.form-row{grid-template-columns:repeat(2,1fr);gap:12px}}@media (max-width: 768px){.form-row{grid-template-columns:repeat(2,1fr);gap:10px}}@media (max-width: 640px){.form-row{grid-template-columns:1fr;gap:12px}.form-field{width:100%}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "component", type: FvEntryFieldComponent, selector: "fv-entry-field", inputs: ["label", "placeholder", "schema", "control", "disabled", "readonly", "type", "allowAlphabetsOnly", "maxLength"], outputs: ["valueChange", "blur", "focus"] }, { kind: "component", type: FvDropdownComponent, selector: "fv-dropdown", inputs: ["label", "placeholder", "options", "schema", "control", "disabled"], outputs: ["valueChange", "blur", "focus"] }, { kind: "component", type: FvNumberFieldComponent, selector: "fv-number-field", inputs: ["label", "placeholder", "schema", "control", "disabled", "readonly", "min", "max", "step"], outputs: ["valueChange", "blur", "focus"] }, { kind: "component", type: FvDateFieldComponent, selector: "fv-date-field", inputs: ["label", "schema", "control", "disabled", "readonly", "min", "max"], outputs: ["valueChange", "blur", "focus"] }, { kind: "component", type: FvMonthYearFieldComponent, selector: "fv-month-year-field", inputs: ["label", "schema", "control", "disabled", "readonly", "min", "max"], outputs: ["valueChange", "blur", "focus"] }, { kind: "component", type: FvFileSelectorComponent, selector: "fv-file-selector", inputs: ["label", "placeholder", "schema", "control", "disabled", "accept", "maxSize"], outputs: ["valueChange", "blur"] }, { kind: "component", type: FvNameCodeComponent, selector: "fv-name-code", inputs: ["label", "placeholder", "options", "schema", "control", "disabled"], outputs: ["valueChange"] }, { kind: "component", type: FvPhoneFieldComponent, selector: "fv-phone-field", inputs: ["label", "control", "disabled", "schema"], outputs: ["blur", "focus"] }, { kind: "component", type: FvUanFieldComponent, selector: "fv-uan-field", inputs: ["label", "control", "disabled", "schema"], outputs: ["blur", "focus"] }, { kind: "component", type: FvPfFieldComponent, selector: "fv-pf-field", inputs: ["label", "control", "disabled", "schema"], outputs: ["blur", "focus"] }, { kind: "component", type: FvEsiFieldComponent, selector: "fv-esi-field", inputs: ["label", "control", "disabled", "schema"], outputs: ["blur", "focus"] }, { kind: "component", type: FvIfscFieldComponent, selector: "fv-ifsc-field", inputs: ["label", "control", "disabled", "schema"], outputs: ["blur", "focus"] }, { kind: "component", type: FvMicrFieldComponent, selector: "fv-micr-field", inputs: ["label", "control", "disabled", "schema"], outputs: ["blur", "focus"] }, { kind: "component", type: FvIbanFieldComponent, selector: "fv-iban-field", inputs: ["label", "control", "disabled", "schema"], outputs: ["blur", "focus"] }, { kind: "component", type: FvEmailFieldComponent, selector: "fv-email-field", inputs: ["label", "placeholder", "schema", "control", "disabled", "readonly"], outputs: ["valueChange", "blur", "focus"] }, { kind: "component", type: FvPasswordFieldComponent, selector: "fv-password-field", inputs: ["label", "placeholder", "schema", "control", "disabled", "readonly"], outputs: ["valueChange", "blur", "focus"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: QueryFormComponent, decorators: [{
             type: Component,
@@ -4705,7 +4979,8 @@ class FvControlsModule {
             QueryFormComponent,
             FvEmailFieldComponent,
             FvPasswordFieldComponent,
-            FvDocumentFieldComponent], exports: [FvEntryFieldComponent,
+            FvDocumentFieldComponent,
+            FvTimeFieldComponent], exports: [FvEntryFieldComponent,
             FvDateFieldComponent,
             FvMonthYearFieldComponent,
             FvNumberFieldComponent,
@@ -4720,7 +4995,8 @@ class FvControlsModule {
             QueryFormComponent,
             FvEmailFieldComponent,
             FvPasswordFieldComponent,
-            FvDocumentFieldComponent] });
+            FvDocumentFieldComponent,
+            FvTimeFieldComponent] });
     static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: FvControlsModule, imports: [CommonModule,
             ReactiveFormsModule,
             FvEntryFieldComponent,
@@ -4738,7 +5014,8 @@ class FvControlsModule {
             QueryFormComponent,
             FvEmailFieldComponent,
             FvPasswordFieldComponent,
-            FvDocumentFieldComponent] });
+            FvDocumentFieldComponent,
+            FvTimeFieldComponent] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: FvControlsModule, decorators: [{
             type: NgModule,
@@ -4763,6 +5040,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
                         FvEmailFieldComponent,
                         FvPasswordFieldComponent,
                         FvDocumentFieldComponent,
+                        FvTimeFieldComponent,
                     ],
                     exports: [
                         FvEntryFieldComponent,
@@ -4781,6 +5059,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
                         FvEmailFieldComponent,
                         FvPasswordFieldComponent,
                         FvDocumentFieldComponent,
+                        FvTimeFieldComponent,
                     ],
                 }]
         }] });
@@ -4793,5 +5072,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
  * Generated bundle index. Do not edit.
  */
 
-export { AddUpdateFormComponent, FvCheckboxComponent, FvControlsModule, FvDateFieldComponent, FvDocumentFieldComponent, FvDropdownComponent, FvEmailFieldComponent, FvEntryFieldComponent, FvEsiFieldComponent, FvFileSelectorComponent, FvIbanFieldComponent, FvIfscFieldComponent, FvImageSelectorComponent, FvMicrFieldComponent, FvMonthYearFieldComponent, FvNameCodeComponent, FvNumberFieldComponent, FvPasswordFieldComponent, FvPfFieldComponent, FvPhoneFieldComponent, FvRadioGroupComponent, FvRichTextEditorComponent, FvServicePeriodComponent, FvUanFieldComponent, QueryFormComponent };
+export { AddUpdateFormComponent, FvCheckboxComponent, FvControlsModule, FvDateFieldComponent, FvDocumentFieldComponent, FvDropdownComponent, FvEmailFieldComponent, FvEntryFieldComponent, FvEsiFieldComponent, FvFileSelectorComponent, FvIbanFieldComponent, FvIfscFieldComponent, FvImageSelectorComponent, FvMicrFieldComponent, FvMonthYearFieldComponent, FvNameCodeComponent, FvNumberFieldComponent, FvPasswordFieldComponent, FvPfFieldComponent, FvPhoneFieldComponent, FvRadioGroupComponent, FvRichTextEditorComponent, FvServicePeriodComponent, FvTimeFieldComponent, FvUanFieldComponent, QueryFormComponent };
 //# sourceMappingURL=fovestta2-web-angular.mjs.map