@fovestta2/web-angular 1.0.19 → 1.0.22

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
+                    });
+                }
+            }
+        }
+        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;
+            }
         }
-        this.highlightedIndex = this.filteredOptions.length === 1 ? 0 : -1;
+        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: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;min-width:140px;transition:all .2s ease;width:fit-content}.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:16px;padding:8px 0}.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: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;min-width:140px;transition:all .2s ease;width:fit-content}.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:16px;padding:8px 0}.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: [{
@@ -1284,11 +1358,11 @@ class FvImageSelectorComponent {
         return errorMessages[this.errorMessage] || this.errorMessage;
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: FvImageSelectorComponent, deps: [{ token: i1$1.DomSanitizer }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: FvImageSelectorComponent, isStandalone: true, selector: "fv-image-selector", inputs: { label: "label", placeholder: "placeholder", schema: "schema", control: "control", disabled: "disabled", maxSize: "maxSize" }, outputs: { valueChange: "valueChange", blur: "blur" }, host: { listeners: { "document:mousemove": "onDrag($event)", "document:mouseup": "endDrag()" } }, viewQueries: [{ propertyName: "imageInput", first: true, predicate: ["imageInput"], descendants: true }, { propertyName: "editorImage", first: true, predicate: ["editorImage"], descendants: true }], ngImport: i0, template: "<div class=\"fv-image-selector-container\" *ngIf=\"control\">\r\n    <label *ngIf=\"label\" class=\"fv-image-selector-label\">\r\n        {{ label }}\r\n        <span *ngIf=\"isRequired()\" class=\"required-asterisk\">*</span>\r\n    </label>\r\n\r\n    <input #imageInput type=\"file\" accept=\"image/*\" (change)=\"onImageSelected($event)\" style=\"display: none\" />\r\n\r\n    <!-- Initial State -->\r\n    <div *ngIf=\"!selectedImage && !isEditorOpen\">\r\n        <button type=\"button\" class=\"fv-upload-btn\" (click)=\"openImageDialog()\" [disabled]=\"disabled\">\r\n            Upload\r\n            <svg viewBox=\"0 0 24 24\" class=\"upload-icon\">\r\n                <path d=\"M9 16h6v-6h4l-7-7-7 7h4zm-4 2h14v2H5z\" />\r\n            </svg>\r\n        </button>\r\n    </div>\r\n\r\n    <!-- Preview State -->\r\n    <div *ngIf=\"selectedImage && !isEditorOpen\" class=\"fv-preview-row\">\r\n        <div class=\"fv-preview-wrapper\">\r\n            <img [src]=\"selectedImage.url\" class=\"fv-circle-preview\" alt=\"Preview\" />\r\n        </div>\r\n        <span class=\"fv-filename\">{{ selectedImage.file.name }}</span>\r\n        <button type=\"button\" class=\"fv-trash-btn\" (click)=\"removeImage()\" [disabled]=\"disabled\">\r\n            <svg viewBox=\"0 0 24 24\" class=\"trash-icon\">\r\n                <path d=\"M6 19c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7H6v12zM19 4h-3.5l-1-1h-5l-1 1H5v2h14V4z\" />\r\n            </svg>\r\n        </button>\r\n    </div>\r\n\r\n    <!-- Modal -->\r\n    <div *ngIf=\"isEditorOpen\" class=\"fv-modal-overlay\">\r\n        <div class=\"fv-modal-content\">\r\n            <div class=\"fv-modal-header\">\r\n                <h3>Adjust Photo</h3>\r\n                <button type=\"button\" class=\"close-icon\" (click)=\"closeEditor()\">\u00D7</button>\r\n            </div>\r\n            <div class=\"fv-modal-body\">\r\n                <div class=\"fv-crop-container\" (mousedown)=\"startDrag($event)\">\r\n                    <img #editorImage [src]=\"editImageSrc\" class=\"fv-crop-image\"\r\n                        [style.transform]=\"'translate(' + panX + 'px, ' + panY + 'px) scale(' + scale + ')'\"\r\n                        draggable=\"false\" />\r\n                    <div class=\"fv-crop-mask\"></div>\r\n                </div>\r\n\r\n                <div class=\"fv-zoom-controls\">\r\n                    <span class=\"zoom-label\">Zoom</span>\r\n                    <button type=\"button\" class=\"zoom-btn\" (click)=\"zoomOut()\">-</button>\r\n                    <input type=\"range\" [min]=\"minScale\" [max]=\"maxScale\" [step]=\"step\" [value]=\"scale\"\r\n                        (input)=\"onSliderChange($event)\" class=\"zoom-slider\">\r\n                    <button type=\"button\" class=\"zoom-btn\" (click)=\"zoomIn()\">+</button>\r\n                    <span class=\"zoom-value\">{{ (scale * 100) | number:'1.0-0' }}%</span>\r\n                </div>\r\n\r\n                <p class=\"fv-hint-text\">Drag the image to reposition. Use the zoom control to fill the circle.</p>\r\n            </div>\r\n\r\n            <div class=\"fv-modal-footer\">\r\n                <button type=\"button\" class=\"btn-reset\" (click)=\"resetEditor()\">Reset</button>\r\n                <div class=\"footer-actions\">\r\n                    <button type=\"button\" class=\"btn-cancel\" (click)=\"closeEditor()\">Cancel</button>\r\n                    <button type=\"button\" class=\"btn-apply\" (click)=\"applyCrop()\">Apply</button>\r\n                </div>\r\n            </div>\r\n        </div>\r\n    </div>\r\n\r\n    <div *ngIf=\"errorMessage\" class=\"fv-image-selector-error-message\">\r\n        \u26A0 {{ getErrorMessage() }}\r\n    </div>\r\n</div>", styles: ["@import\"https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap\";*{font-family:Poppins,sans-serif;box-sizing:border-box}.fv-image-selector-container{display:flex;flex-direction:column;margin-bottom:20px;width:100%}.fv-image-selector-label{font-size:14px;font-weight:600;color:#151d48;margin-bottom:6px;display:block}.required-asterisk{color:#e74c3c;font-weight:700;margin-left:4px}.fv-upload-btn{display:inline-flex;align-items:center;justify-content:space-between;background:#fff;border:1px solid #dcdcdc;border-radius:8px;padding:0 0 0 16px;font-size:14px;color:#1f2b41;cursor:pointer;overflow:hidden;height:34px;min-width:140px;transition:box-shadow .2s}.fv-upload-btn:hover:not(:disabled){box-shadow:0 2px 5px #0000000d;border-color:#bbb}.fv-upload-btn:disabled{opacity:.6;cursor:not-allowed;background:#f9f9f9}.upload-icon{width:40px;height:100%;padding:8px;background:#f4f5f7;border-left:1px solid #dcdcdc;fill:#333;margin-left:16px}.fv-preview-row{display:flex;align-items:center;gap:16px;padding:8px 0}.fv-preview-wrapper{position:relative;width:60px;height:60px}.fv-circle-preview{width:60px;height:60px;border-radius:50%;border:1px solid #eee;object-fit:cover}.fv-filename{flex:1;font-size:14px;color:#666;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:300px}.fv-trash-btn{background:none;border:none;cursor:pointer;padding: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-modal-overlay{position:fixed;top:0;left:0;width:100vw;height:100vh;background:#0009;display:flex;align-items:center;justify-content:center;z-index:9999}.fv-modal-content{background:#fff;width:650px;max-width:90vw;border-radius:8px;overflow:hidden;box-shadow:0 10px 30px #0003;display:flex;flex-direction:column}.fv-modal-header{display:flex;justify-content:space-between;align-items:center;padding:16px 24px;border-bottom:1px solid #f0f0f0}.fv-modal-header h3{margin:0;font-size:18px;font-weight:600;color:#1f2b41}.close-icon{background:none;border:none;font-size:24px;line-height:1;cursor:pointer;color:#888}.fv-modal-body{padding:24px;display:flex;flex-direction:column;align-items:center;background:#fff}.fv-crop-container{width:100%;height:350px;background:#333;position:relative;overflow:hidden;margin-bottom:24px;border-radius:4px;cursor:move;cursor:grab;display:flex;align-items:center;justify-content:center}.fv-crop-container:active{cursor:grabbing}.fv-crop-image{max-width:none;max-height:none;-webkit-user-select:none;user-select:none;pointer-events:none;transform-origin:center center}.fv-crop-mask{position:absolute;inset:0;background:radial-gradient(circle at center,transparent 150px,rgba(0,0,0,.6) 151px);pointer-events:none}.fv-zoom-controls{display:flex;align-items:center;gap:16px;width:100%;max-width:500px;margin-bottom:12px}.zoom-label{font-size:14px;font-weight:500;color:#333;min-width:40px}.zoom-btn{width:32px;height:32px;border-radius:50%;background:#e6f0ff;color:#006aff;border:none;font-weight:700;font-size:18px;cursor:pointer;display:flex;align-items:center;justify-content:center;padding-bottom:2px}.zoom-btn:hover{background:#d0e1ff}.zoom-slider{flex:1;-webkit-appearance:none;height:4px;background:#ddd;border-radius:2px;outline:none}.zoom-slider::-webkit-slider-thumb{-webkit-appearance:none;width:16px;height:16px;border-radius:50%;background:#006aff;cursor:pointer;box-shadow:0 0 0 4px #006aff33}.zoom-value{font-size:14px;color:#666;min-width:40px;text-align:right}.fv-hint-text{font-size:13px;color:#7f8c8d;margin:0;text-align:center}.fv-modal-footer{padding:16px 24px;border-top:1px solid #f0f0f0;display:flex;justify-content:space-between;align-items:center;background:#fff}.footer-actions{display:flex;gap:12px}.btn-reset,.btn-cancel,.btn-apply{padding:8px 20px;border-radius:6px;font-size:14px;font-weight:500;cursor:pointer;transition:background .2s}.btn-reset{background:#f5f5f5;border:1px solid #ddd;color:#333}.btn-reset:hover{background:#eee}.btn-cancel{background:#fff;border:1px solid #ddd;color:#333}.btn-cancel:hover{border-color:#bbb}.btn-apply{background:#006aff;border:1px solid #006aff;color:#fff}.btn-apply:hover{background:#0056cc;border-color:#0056cc}.fv-image-selector-error-message{margin-top:6px;font-size:12px;color:#e74c3c;display:flex;align-items:center;gap:4px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: i1.DecimalPipe, name: "number" }, { kind: "ngmodule", type: ReactiveFormsModule }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: FvImageSelectorComponent, isStandalone: true, selector: "fv-image-selector", inputs: { label: "label", placeholder: "placeholder", schema: "schema", control: "control", disabled: "disabled", maxSize: "maxSize" }, outputs: { valueChange: "valueChange", blur: "blur" }, host: { listeners: { "document:mousemove": "onDrag($event)", "document:mouseup": "endDrag()" } }, viewQueries: [{ propertyName: "imageInput", first: true, predicate: ["imageInput"], descendants: true }, { propertyName: "editorImage", first: true, predicate: ["editorImage"], descendants: true }], ngImport: i0, template: "<div class=\"fv-image-selector-container\" *ngIf=\"control\">\r\n    <label *ngIf=\"label\" class=\"fv-image-selector-label\">\r\n        {{ label }}\r\n        <span *ngIf=\"isRequired()\" class=\"required-asterisk\">*</span>\r\n    </label>\r\n\r\n    <input #imageInput type=\"file\" accept=\"image/*\" (change)=\"onImageSelected($event)\" style=\"display: none\" />\r\n\r\n    <!-- Initial State -->\r\n    <div *ngIf=\"!selectedImage && !isEditorOpen\">\r\n        <button type=\"button\" class=\"fv-upload-btn\" (click)=\"openImageDialog()\" [disabled]=\"disabled\">\r\n            Upload\r\n            <svg viewBox=\"0 0 24 24\" class=\"upload-icon\">\r\n                <path d=\"M9 16h6v-6h4l-7-7-7 7h4zm-4 2h14v2H5z\" />\r\n            </svg>\r\n        </button>\r\n    </div>\r\n\r\n    <!-- Preview State -->\r\n    <div *ngIf=\"selectedImage && !isEditorOpen\" class=\"fv-preview-row\">\r\n        <div class=\"fv-preview-wrapper\">\r\n            <img [src]=\"selectedImage.url\" class=\"fv-circle-preview\" alt=\"Preview\" />\r\n        </div>\r\n        <span class=\"fv-filename\">{{ selectedImage.file.name }}</span>\r\n        <button type=\"button\" class=\"fv-trash-btn\" (click)=\"removeImage()\" [disabled]=\"disabled\">\r\n            <svg viewBox=\"0 0 24 24\" class=\"trash-icon\">\r\n                <path d=\"M6 19c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7H6v12zM19 4h-3.5l-1-1h-5l-1 1H5v2h14V4z\" />\r\n            </svg>\r\n        </button>\r\n    </div>\r\n\r\n    <!-- Modal -->\r\n    <div *ngIf=\"isEditorOpen\" class=\"fv-modal-overlay\">\r\n        <div class=\"fv-modal-content\">\r\n            <div class=\"fv-modal-header\">\r\n                <h3>Adjust Photo</h3>\r\n                <button type=\"button\" class=\"close-icon\" (click)=\"closeEditor()\">\u00D7</button>\r\n            </div>\r\n            <div class=\"fv-modal-body\">\r\n                <div class=\"fv-crop-container\" (mousedown)=\"startDrag($event)\">\r\n                    <img #editorImage [src]=\"editImageSrc\" class=\"fv-crop-image\"\r\n                        [style.transform]=\"'translate(' + panX + 'px, ' + panY + 'px) scale(' + scale + ')'\"\r\n                        draggable=\"false\" />\r\n                    <div class=\"fv-crop-mask\"></div>\r\n                </div>\r\n\r\n                <div class=\"fv-zoom-controls\">\r\n                    <span class=\"zoom-label\">Zoom</span>\r\n                    <button type=\"button\" class=\"zoom-btn\" (click)=\"zoomOut()\">-</button>\r\n                    <input type=\"range\" [min]=\"minScale\" [max]=\"maxScale\" [step]=\"step\" [value]=\"scale\"\r\n                        (input)=\"onSliderChange($event)\" class=\"zoom-slider\">\r\n                    <button type=\"button\" class=\"zoom-btn\" (click)=\"zoomIn()\">+</button>\r\n                    <span class=\"zoom-value\">{{ (scale * 100) | number:'1.0-0' }}%</span>\r\n                </div>\r\n\r\n                <p class=\"fv-hint-text\">Drag the image to reposition. Use the zoom control to fill the circle.</p>\r\n            </div>\r\n\r\n            <div class=\"fv-modal-footer\">\r\n                <button type=\"button\" class=\"btn-reset\" (click)=\"resetEditor()\">Reset</button>\r\n                <div class=\"footer-actions\">\r\n                    <button type=\"button\" class=\"btn-cancel\" (click)=\"closeEditor()\">Cancel</button>\r\n                    <button type=\"button\" class=\"btn-apply\" (click)=\"applyCrop()\">Apply</button>\r\n                </div>\r\n            </div>\r\n        </div>\r\n    </div>\r\n\r\n    <div *ngIf=\"errorMessage\" class=\"fv-image-selector-error-message\">\r\n        \u26A0 {{ getErrorMessage() }}\r\n    </div>\r\n</div>", styles: ["@import\"https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap\";*{font-family:Poppins,sans-serif;box-sizing:border-box}.fv-image-selector-container{display:flex;flex-direction:column;margin-bottom:20px;width:fit-content;max-width:100%}.fv-image-selector-label{font-size:14px;font-weight:600;color:#151d48;margin-bottom:6px;display:block}.required-asterisk{color:#e74c3c;font-weight:700;margin-left:4px}.fv-upload-btn{display:inline-flex;align-items:center;justify-content:space-between;background:#fff;border:1px solid #dcdcdc;border-radius:8px;padding:0 0 0 16px;font-size:14px;color:#1f2b41;cursor:pointer;overflow:hidden;height:34px;width:100px;transition:box-shadow .2s}.fv-upload-btn:hover:not(:disabled){box-shadow:0 2px 5px #0000000d;border-color:#bbb}.fv-upload-btn:disabled{opacity:.6;cursor:not-allowed;background:#f9f9f9}.upload-icon{width:40px;height:100%;padding:8px;background:#f4f5f7;border-left:1px solid #dcdcdc;fill:#333;margin-left:16px}.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:60px;height:60px}.fv-circle-preview{width:60px;height:60px;border-radius:50%;border:1px solid #eee;object-fit:cover}.fv-filename{flex:1;font-size:14px;color:#666;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:300px}.fv-trash-btn{background:none;border:none;cursor:pointer;padding: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-modal-overlay{position:fixed;top:0;left:0;width:100vw;height:100vh;background:#0009;display:flex;align-items:center;justify-content:center;z-index:9999}.fv-modal-content{background:#fff;width:650px;max-width:90vw;border-radius:8px;overflow:hidden;box-shadow:0 10px 30px #0003;display:flex;flex-direction:column}.fv-modal-header{display:flex;justify-content:space-between;align-items:center;padding:16px 24px;border-bottom:1px solid #f0f0f0}.fv-modal-header h3{margin:0;font-size:18px;font-weight:600;color:#1f2b41}.close-icon{background:none;border:none;font-size:24px;line-height:1;cursor:pointer;color:#888}.fv-modal-body{padding:24px;display:flex;flex-direction:column;align-items:center;background:#fff}.fv-crop-container{width:100%;height:350px;background:#333;position:relative;overflow:hidden;margin-bottom:24px;border-radius:4px;cursor:move;cursor:grab;display:flex;align-items:center;justify-content:center}.fv-crop-container:active{cursor:grabbing}.fv-crop-image{max-width:none;max-height:none;-webkit-user-select:none;user-select:none;pointer-events:none;transform-origin:center center}.fv-crop-mask{position:absolute;inset:0;background:radial-gradient(circle at center,transparent 150px,rgba(0,0,0,.6) 151px);pointer-events:none}.fv-zoom-controls{display:flex;align-items:center;gap:16px;width:100%;max-width:500px;margin-bottom:12px}.zoom-label{font-size:14px;font-weight:500;color:#333;min-width:40px}.zoom-btn{width:32px;height:32px;border-radius:50%;background:#e6f0ff;color:#006aff;border:none;font-weight:700;font-size:18px;cursor:pointer;display:flex;align-items:center;justify-content:center;padding-bottom:2px}.zoom-btn:hover{background:#d0e1ff}.zoom-slider{flex:1;-webkit-appearance:none;appearance:none;height:4px;background:#ddd;border-radius:2px;outline:none}.zoom-slider::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:16px;height:16px;border-radius:50%;background:#006aff;cursor:pointer;box-shadow:0 0 0 4px #006aff33}.zoom-value{font-size:14px;color:#666;min-width:40px;text-align:right}.fv-hint-text{font-size:13px;color:#7f8c8d;margin:0;text-align:center}.fv-modal-footer{padding:16px 24px;border-top:1px solid #f0f0f0;display:flex;justify-content:space-between;align-items:center;background:#fff}.footer-actions{display:flex;gap:12px}.btn-reset,.btn-cancel,.btn-apply{padding:8px 20px;border-radius:6px;font-size:14px;font-weight:500;cursor:pointer;transition:background .2s}.btn-reset{background:#f5f5f5;border:1px solid #ddd;color:#333}.btn-reset:hover{background:#eee}.btn-cancel{background:#fff;border:1px solid #ddd;color:#333}.btn-cancel:hover{border-color:#bbb}.btn-apply{background:#006aff;border:1px solid #006aff;color:#fff}.btn-apply:hover{background:#0056cc;border-color:#0056cc}.fv-image-selector-error-message{margin-top:6px;font-size:12px;color:#e74c3c;display:flex;align-items:center;gap:4px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: i1.DecimalPipe, name: "number" }, { kind: "ngmodule", type: ReactiveFormsModule }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: FvImageSelectorComponent, decorators: [{
             type: Component,
-            args: [{ standalone: true, imports: [CommonModule, ReactiveFormsModule], selector: 'fv-image-selector', template: "<div class=\"fv-image-selector-container\" *ngIf=\"control\">\r\n    <label *ngIf=\"label\" class=\"fv-image-selector-label\">\r\n        {{ label }}\r\n        <span *ngIf=\"isRequired()\" class=\"required-asterisk\">*</span>\r\n    </label>\r\n\r\n    <input #imageInput type=\"file\" accept=\"image/*\" (change)=\"onImageSelected($event)\" style=\"display: none\" />\r\n\r\n    <!-- Initial State -->\r\n    <div *ngIf=\"!selectedImage && !isEditorOpen\">\r\n        <button type=\"button\" class=\"fv-upload-btn\" (click)=\"openImageDialog()\" [disabled]=\"disabled\">\r\n            Upload\r\n            <svg viewBox=\"0 0 24 24\" class=\"upload-icon\">\r\n                <path d=\"M9 16h6v-6h4l-7-7-7 7h4zm-4 2h14v2H5z\" />\r\n            </svg>\r\n        </button>\r\n    </div>\r\n\r\n    <!-- Preview State -->\r\n    <div *ngIf=\"selectedImage && !isEditorOpen\" class=\"fv-preview-row\">\r\n        <div class=\"fv-preview-wrapper\">\r\n            <img [src]=\"selectedImage.url\" class=\"fv-circle-preview\" alt=\"Preview\" />\r\n        </div>\r\n        <span class=\"fv-filename\">{{ selectedImage.file.name }}</span>\r\n        <button type=\"button\" class=\"fv-trash-btn\" (click)=\"removeImage()\" [disabled]=\"disabled\">\r\n            <svg viewBox=\"0 0 24 24\" class=\"trash-icon\">\r\n                <path d=\"M6 19c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7H6v12zM19 4h-3.5l-1-1h-5l-1 1H5v2h14V4z\" />\r\n            </svg>\r\n        </button>\r\n    </div>\r\n\r\n    <!-- Modal -->\r\n    <div *ngIf=\"isEditorOpen\" class=\"fv-modal-overlay\">\r\n        <div class=\"fv-modal-content\">\r\n            <div class=\"fv-modal-header\">\r\n                <h3>Adjust Photo</h3>\r\n                <button type=\"button\" class=\"close-icon\" (click)=\"closeEditor()\">\u00D7</button>\r\n            </div>\r\n            <div class=\"fv-modal-body\">\r\n                <div class=\"fv-crop-container\" (mousedown)=\"startDrag($event)\">\r\n                    <img #editorImage [src]=\"editImageSrc\" class=\"fv-crop-image\"\r\n                        [style.transform]=\"'translate(' + panX + 'px, ' + panY + 'px) scale(' + scale + ')'\"\r\n                        draggable=\"false\" />\r\n                    <div class=\"fv-crop-mask\"></div>\r\n                </div>\r\n\r\n                <div class=\"fv-zoom-controls\">\r\n                    <span class=\"zoom-label\">Zoom</span>\r\n                    <button type=\"button\" class=\"zoom-btn\" (click)=\"zoomOut()\">-</button>\r\n                    <input type=\"range\" [min]=\"minScale\" [max]=\"maxScale\" [step]=\"step\" [value]=\"scale\"\r\n                        (input)=\"onSliderChange($event)\" class=\"zoom-slider\">\r\n                    <button type=\"button\" class=\"zoom-btn\" (click)=\"zoomIn()\">+</button>\r\n                    <span class=\"zoom-value\">{{ (scale * 100) | number:'1.0-0' }}%</span>\r\n                </div>\r\n\r\n                <p class=\"fv-hint-text\">Drag the image to reposition. Use the zoom control to fill the circle.</p>\r\n            </div>\r\n\r\n            <div class=\"fv-modal-footer\">\r\n                <button type=\"button\" class=\"btn-reset\" (click)=\"resetEditor()\">Reset</button>\r\n                <div class=\"footer-actions\">\r\n                    <button type=\"button\" class=\"btn-cancel\" (click)=\"closeEditor()\">Cancel</button>\r\n                    <button type=\"button\" class=\"btn-apply\" (click)=\"applyCrop()\">Apply</button>\r\n                </div>\r\n            </div>\r\n        </div>\r\n    </div>\r\n\r\n    <div *ngIf=\"errorMessage\" class=\"fv-image-selector-error-message\">\r\n        \u26A0 {{ getErrorMessage() }}\r\n    </div>\r\n</div>", styles: ["@import\"https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap\";*{font-family:Poppins,sans-serif;box-sizing:border-box}.fv-image-selector-container{display:flex;flex-direction:column;margin-bottom:20px;width:100%}.fv-image-selector-label{font-size:14px;font-weight:600;color:#151d48;margin-bottom:6px;display:block}.required-asterisk{color:#e74c3c;font-weight:700;margin-left:4px}.fv-upload-btn{display:inline-flex;align-items:center;justify-content:space-between;background:#fff;border:1px solid #dcdcdc;border-radius:8px;padding:0 0 0 16px;font-size:14px;color:#1f2b41;cursor:pointer;overflow:hidden;height:34px;min-width:140px;transition:box-shadow .2s}.fv-upload-btn:hover:not(:disabled){box-shadow:0 2px 5px #0000000d;border-color:#bbb}.fv-upload-btn:disabled{opacity:.6;cursor:not-allowed;background:#f9f9f9}.upload-icon{width:40px;height:100%;padding:8px;background:#f4f5f7;border-left:1px solid #dcdcdc;fill:#333;margin-left:16px}.fv-preview-row{display:flex;align-items:center;gap:16px;padding:8px 0}.fv-preview-wrapper{position:relative;width:60px;height:60px}.fv-circle-preview{width:60px;height:60px;border-radius:50%;border:1px solid #eee;object-fit:cover}.fv-filename{flex:1;font-size:14px;color:#666;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:300px}.fv-trash-btn{background:none;border:none;cursor:pointer;padding: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-modal-overlay{position:fixed;top:0;left:0;width:100vw;height:100vh;background:#0009;display:flex;align-items:center;justify-content:center;z-index:9999}.fv-modal-content{background:#fff;width:650px;max-width:90vw;border-radius:8px;overflow:hidden;box-shadow:0 10px 30px #0003;display:flex;flex-direction:column}.fv-modal-header{display:flex;justify-content:space-between;align-items:center;padding:16px 24px;border-bottom:1px solid #f0f0f0}.fv-modal-header h3{margin:0;font-size:18px;font-weight:600;color:#1f2b41}.close-icon{background:none;border:none;font-size:24px;line-height:1;cursor:pointer;color:#888}.fv-modal-body{padding:24px;display:flex;flex-direction:column;align-items:center;background:#fff}.fv-crop-container{width:100%;height:350px;background:#333;position:relative;overflow:hidden;margin-bottom:24px;border-radius:4px;cursor:move;cursor:grab;display:flex;align-items:center;justify-content:center}.fv-crop-container:active{cursor:grabbing}.fv-crop-image{max-width:none;max-height:none;-webkit-user-select:none;user-select:none;pointer-events:none;transform-origin:center center}.fv-crop-mask{position:absolute;inset:0;background:radial-gradient(circle at center,transparent 150px,rgba(0,0,0,.6) 151px);pointer-events:none}.fv-zoom-controls{display:flex;align-items:center;gap:16px;width:100%;max-width:500px;margin-bottom:12px}.zoom-label{font-size:14px;font-weight:500;color:#333;min-width:40px}.zoom-btn{width:32px;height:32px;border-radius:50%;background:#e6f0ff;color:#006aff;border:none;font-weight:700;font-size:18px;cursor:pointer;display:flex;align-items:center;justify-content:center;padding-bottom:2px}.zoom-btn:hover{background:#d0e1ff}.zoom-slider{flex:1;-webkit-appearance:none;height:4px;background:#ddd;border-radius:2px;outline:none}.zoom-slider::-webkit-slider-thumb{-webkit-appearance:none;width:16px;height:16px;border-radius:50%;background:#006aff;cursor:pointer;box-shadow:0 0 0 4px #006aff33}.zoom-value{font-size:14px;color:#666;min-width:40px;text-align:right}.fv-hint-text{font-size:13px;color:#7f8c8d;margin:0;text-align:center}.fv-modal-footer{padding:16px 24px;border-top:1px solid #f0f0f0;display:flex;justify-content:space-between;align-items:center;background:#fff}.footer-actions{display:flex;gap:12px}.btn-reset,.btn-cancel,.btn-apply{padding:8px 20px;border-radius:6px;font-size:14px;font-weight:500;cursor:pointer;transition:background .2s}.btn-reset{background:#f5f5f5;border:1px solid #ddd;color:#333}.btn-reset:hover{background:#eee}.btn-cancel{background:#fff;border:1px solid #ddd;color:#333}.btn-cancel:hover{border-color:#bbb}.btn-apply{background:#006aff;border:1px solid #006aff;color:#fff}.btn-apply:hover{background:#0056cc;border-color:#0056cc}.fv-image-selector-error-message{margin-top:6px;font-size:12px;color:#e74c3c;display:flex;align-items:center;gap:4px}\n"] }]
+            args: [{ standalone: true, imports: [CommonModule, ReactiveFormsModule], selector: 'fv-image-selector', template: "<div class=\"fv-image-selector-container\" *ngIf=\"control\">\r\n    <label *ngIf=\"label\" class=\"fv-image-selector-label\">\r\n        {{ label }}\r\n        <span *ngIf=\"isRequired()\" class=\"required-asterisk\">*</span>\r\n    </label>\r\n\r\n    <input #imageInput type=\"file\" accept=\"image/*\" (change)=\"onImageSelected($event)\" style=\"display: none\" />\r\n\r\n    <!-- Initial State -->\r\n    <div *ngIf=\"!selectedImage && !isEditorOpen\">\r\n        <button type=\"button\" class=\"fv-upload-btn\" (click)=\"openImageDialog()\" [disabled]=\"disabled\">\r\n            Upload\r\n            <svg viewBox=\"0 0 24 24\" class=\"upload-icon\">\r\n                <path d=\"M9 16h6v-6h4l-7-7-7 7h4zm-4 2h14v2H5z\" />\r\n            </svg>\r\n        </button>\r\n    </div>\r\n\r\n    <!-- Preview State -->\r\n    <div *ngIf=\"selectedImage && !isEditorOpen\" class=\"fv-preview-row\">\r\n        <div class=\"fv-preview-wrapper\">\r\n            <img [src]=\"selectedImage.url\" class=\"fv-circle-preview\" alt=\"Preview\" />\r\n        </div>\r\n        <span class=\"fv-filename\">{{ selectedImage.file.name }}</span>\r\n        <button type=\"button\" class=\"fv-trash-btn\" (click)=\"removeImage()\" [disabled]=\"disabled\">\r\n            <svg viewBox=\"0 0 24 24\" class=\"trash-icon\">\r\n                <path d=\"M6 19c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7H6v12zM19 4h-3.5l-1-1h-5l-1 1H5v2h14V4z\" />\r\n            </svg>\r\n        </button>\r\n    </div>\r\n\r\n    <!-- Modal -->\r\n    <div *ngIf=\"isEditorOpen\" class=\"fv-modal-overlay\">\r\n        <div class=\"fv-modal-content\">\r\n            <div class=\"fv-modal-header\">\r\n                <h3>Adjust Photo</h3>\r\n                <button type=\"button\" class=\"close-icon\" (click)=\"closeEditor()\">\u00D7</button>\r\n            </div>\r\n            <div class=\"fv-modal-body\">\r\n                <div class=\"fv-crop-container\" (mousedown)=\"startDrag($event)\">\r\n                    <img #editorImage [src]=\"editImageSrc\" class=\"fv-crop-image\"\r\n                        [style.transform]=\"'translate(' + panX + 'px, ' + panY + 'px) scale(' + scale + ')'\"\r\n                        draggable=\"false\" />\r\n                    <div class=\"fv-crop-mask\"></div>\r\n                </div>\r\n\r\n                <div class=\"fv-zoom-controls\">\r\n                    <span class=\"zoom-label\">Zoom</span>\r\n                    <button type=\"button\" class=\"zoom-btn\" (click)=\"zoomOut()\">-</button>\r\n                    <input type=\"range\" [min]=\"minScale\" [max]=\"maxScale\" [step]=\"step\" [value]=\"scale\"\r\n                        (input)=\"onSliderChange($event)\" class=\"zoom-slider\">\r\n                    <button type=\"button\" class=\"zoom-btn\" (click)=\"zoomIn()\">+</button>\r\n                    <span class=\"zoom-value\">{{ (scale * 100) | number:'1.0-0' }}%</span>\r\n                </div>\r\n\r\n                <p class=\"fv-hint-text\">Drag the image to reposition. Use the zoom control to fill the circle.</p>\r\n            </div>\r\n\r\n            <div class=\"fv-modal-footer\">\r\n                <button type=\"button\" class=\"btn-reset\" (click)=\"resetEditor()\">Reset</button>\r\n                <div class=\"footer-actions\">\r\n                    <button type=\"button\" class=\"btn-cancel\" (click)=\"closeEditor()\">Cancel</button>\r\n                    <button type=\"button\" class=\"btn-apply\" (click)=\"applyCrop()\">Apply</button>\r\n                </div>\r\n            </div>\r\n        </div>\r\n    </div>\r\n\r\n    <div *ngIf=\"errorMessage\" class=\"fv-image-selector-error-message\">\r\n        \u26A0 {{ getErrorMessage() }}\r\n    </div>\r\n</div>", styles: ["@import\"https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap\";*{font-family:Poppins,sans-serif;box-sizing:border-box}.fv-image-selector-container{display:flex;flex-direction:column;margin-bottom:20px;width:fit-content;max-width:100%}.fv-image-selector-label{font-size:14px;font-weight:600;color:#151d48;margin-bottom:6px;display:block}.required-asterisk{color:#e74c3c;font-weight:700;margin-left:4px}.fv-upload-btn{display:inline-flex;align-items:center;justify-content:space-between;background:#fff;border:1px solid #dcdcdc;border-radius:8px;padding:0 0 0 16px;font-size:14px;color:#1f2b41;cursor:pointer;overflow:hidden;height:34px;width:100px;transition:box-shadow .2s}.fv-upload-btn:hover:not(:disabled){box-shadow:0 2px 5px #0000000d;border-color:#bbb}.fv-upload-btn:disabled{opacity:.6;cursor:not-allowed;background:#f9f9f9}.upload-icon{width:40px;height:100%;padding:8px;background:#f4f5f7;border-left:1px solid #dcdcdc;fill:#333;margin-left:16px}.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:60px;height:60px}.fv-circle-preview{width:60px;height:60px;border-radius:50%;border:1px solid #eee;object-fit:cover}.fv-filename{flex:1;font-size:14px;color:#666;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:300px}.fv-trash-btn{background:none;border:none;cursor:pointer;padding: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-modal-overlay{position:fixed;top:0;left:0;width:100vw;height:100vh;background:#0009;display:flex;align-items:center;justify-content:center;z-index:9999}.fv-modal-content{background:#fff;width:650px;max-width:90vw;border-radius:8px;overflow:hidden;box-shadow:0 10px 30px #0003;display:flex;flex-direction:column}.fv-modal-header{display:flex;justify-content:space-between;align-items:center;padding:16px 24px;border-bottom:1px solid #f0f0f0}.fv-modal-header h3{margin:0;font-size:18px;font-weight:600;color:#1f2b41}.close-icon{background:none;border:none;font-size:24px;line-height:1;cursor:pointer;color:#888}.fv-modal-body{padding:24px;display:flex;flex-direction:column;align-items:center;background:#fff}.fv-crop-container{width:100%;height:350px;background:#333;position:relative;overflow:hidden;margin-bottom:24px;border-radius:4px;cursor:move;cursor:grab;display:flex;align-items:center;justify-content:center}.fv-crop-container:active{cursor:grabbing}.fv-crop-image{max-width:none;max-height:none;-webkit-user-select:none;user-select:none;pointer-events:none;transform-origin:center center}.fv-crop-mask{position:absolute;inset:0;background:radial-gradient(circle at center,transparent 150px,rgba(0,0,0,.6) 151px);pointer-events:none}.fv-zoom-controls{display:flex;align-items:center;gap:16px;width:100%;max-width:500px;margin-bottom:12px}.zoom-label{font-size:14px;font-weight:500;color:#333;min-width:40px}.zoom-btn{width:32px;height:32px;border-radius:50%;background:#e6f0ff;color:#006aff;border:none;font-weight:700;font-size:18px;cursor:pointer;display:flex;align-items:center;justify-content:center;padding-bottom:2px}.zoom-btn:hover{background:#d0e1ff}.zoom-slider{flex:1;-webkit-appearance:none;appearance:none;height:4px;background:#ddd;border-radius:2px;outline:none}.zoom-slider::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:16px;height:16px;border-radius:50%;background:#006aff;cursor:pointer;box-shadow:0 0 0 4px #006aff33}.zoom-value{font-size:14px;color:#666;min-width:40px;text-align:right}.fv-hint-text{font-size:13px;color:#7f8c8d;margin:0;text-align:center}.fv-modal-footer{padding:16px 24px;border-top:1px solid #f0f0f0;display:flex;justify-content:space-between;align-items:center;background:#fff}.footer-actions{display:flex;gap:12px}.btn-reset,.btn-cancel,.btn-apply{padding:8px 20px;border-radius:6px;font-size:14px;font-weight:500;cursor:pointer;transition:background .2s}.btn-reset{background:#f5f5f5;border:1px solid #ddd;color:#333}.btn-reset:hover{background:#eee}.btn-cancel{background:#fff;border:1px solid #ddd;color:#333}.btn-cancel:hover{border-color:#bbb}.btn-apply{background:#006aff;border:1px solid #006aff;color:#fff}.btn-apply:hover{background:#0056cc;border-color:#0056cc}.fv-image-selector-error-message{margin-top:6px;font-size:12px;color:#e74c3c;display:flex;align-items:center;gap:4px}\n"] }]
         }], ctorParameters: () => [{ type: i1$1.DomSanitizer }], propDecorators: { label: [{
                 type: Input
             }], placeholder: [{
@@ -2804,11 +2878,11 @@ class FvDocumentFieldComponent {
         return errorMessages[this.errorMessage] || this.errorMessage;
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: FvDocumentFieldComponent, deps: [{ token: i1$1.DomSanitizer }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: FvDocumentFieldComponent, isStandalone: true, selector: "fv-document-field", inputs: { label: "label", placeholder: "placeholder", schema: "schema", control: "control", disabled: "disabled", accept: "accept", maxSize: "maxSize" }, outputs: { valueChange: "valueChange" }, viewQueries: [{ propertyName: "fileInput", first: true, predicate: ["fileInput"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div class=\"fv-document-field-container\">\r\n    <label *ngIf=\"label\" class=\"fv-document-field-label\">\r\n        {{ label }}\r\n        <span *ngIf=\"isRequired()\" class=\"required-asterisk\">*</span>\r\n    </label>\r\n\r\n    <input #fileInput type=\"file\" [accept]=\"accept\" (change)=\"onFileSelected($event)\" style=\"display: none\" />\r\n\r\n    <div *ngIf=\"!control.value; else fileUploaded\" class=\"fv-upload-btn-wrapper\">\r\n        <button type=\"button\" class=\"fv-upload-button\" [disabled]=\"disabled\" (click)=\"openFileDialog()\">\r\n            <span class=\"fv-upload-text\">{{ placeholder }}</span>\r\n            <span class=\"fv-upload-icon-section\">\r\n                <svg 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    <ng-template #fileUploaded>\r\n        <div class=\"fv-preview-row\">\r\n            <div class=\"fv-preview-wrapper\" (click)=\"viewFile()\" style=\"cursor: pointer;\">\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\" (click)=\"viewFile()\" style=\"cursor: pointer;\">{{ control.value?.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    </ng-template>\r\n\r\n    <div *ngIf=\"errorMessage && control?.touched\" class=\"fv-document-error-message\">\r\n        \u26A0 {{ getErrorMessage() }}\r\n    </div>\r\n</div>\r\n\r\n<!-- Preview Overlay/Modal for Image -->\r\n<div *ngIf=\"showPreview\" class=\"fv-preview-overlay\" (click)=\"closePreview()\">\r\n    <div class=\"fv-preview-content\" (click)=\"$event.stopPropagation()\">\r\n        <img [src]=\"previewUrl\" alt=\"Preview\" />\r\n        <div class=\"fv-preview-actions\">\r\n            <button type=\"button\" class=\"fv-download-btn\" (click)=\"downloadFile()\">Download</button>\r\n            <button type=\"button\" class=\"fv-close-btn\" (click)=\"closePreview()\">Close</button>\r\n        </div>\r\n    </div>\r\n</div>", styles: ["@import\"https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap\";.fv-document-field-container{display:flex;flex-direction:column;margin-bottom:16px;width:100%;font-family:Poppins,sans-serif}.fv-document-field-label{font-size:14px;font-weight:600;color:#151d48;margin-bottom:6px;display:block}.required-asterisk{color:#e74c3c;font-weight:700}.fv-upload-button{display:flex;align-items:center;border:1px solid #dcdcdc;border-radius:8px;background:#fff;padding:0;cursor:pointer;overflow:hidden;width:fit-content;min-width:140px;height:34px;transition:all .2s ease}.fv-upload-button:hover:not(:disabled){border-color:#bbb;box-shadow:0 2px 4px #0000000d}.fv-upload-button:disabled{cursor:not-allowed;background-color:#f9f9f9;opacity:.7}.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:16px;padding:8px 0}.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-document-error-message{margin-top:4px;font-size:12px;color:#e74c3c}.fv-preview-overlay{position:fixed;top:0;left:0;width:100vw;height:100vh;background:#000c;display:flex;justify-content:center;align-items:center;z-index:10000}.fv-preview-content{position:relative;background:#fff;padding:24px;border-radius:12px;max-width:90vw;max-height:90vh;display:flex;flex-direction:column;align-items:center}.fv-preview-content img{max-width:100%;max-height:70vh;object-fit:contain;border-radius:4px;margin-bottom:20px}.fv-preview-actions{display:flex;gap:16px}.fv-preview-actions button{padding:10px 24px;border-radius:6px;border:none;cursor:pointer;font-weight:500;transition:background .2s}.fv-download-btn{background:#3498db;color:#fff}.fv-download-btn:hover{background:#2980b9}.fv-close-btn{background:#f0f0f0;color:#333}.fv-close-btn:hover{background:#e0e0e0}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.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: FvDocumentFieldComponent, isStandalone: true, selector: "fv-document-field", inputs: { label: "label", placeholder: "placeholder", schema: "schema", control: "control", disabled: "disabled", accept: "accept", maxSize: "maxSize" }, outputs: { valueChange: "valueChange" }, viewQueries: [{ propertyName: "fileInput", first: true, predicate: ["fileInput"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div class=\"fv-document-field-container\">\r\n    <label *ngIf=\"label\" class=\"fv-document-field-label\">\r\n        {{ label }}\r\n        <span *ngIf=\"isRequired()\" class=\"required-asterisk\">*</span>\r\n    </label>\r\n\r\n    <input #fileInput type=\"file\" [accept]=\"accept\" (change)=\"onFileSelected($event)\" style=\"display: none\" />\r\n\r\n    <div *ngIf=\"!control.value; else fileUploaded\" class=\"fv-upload-btn-wrapper\">\r\n        <button type=\"button\" class=\"fv-upload-button\" [disabled]=\"disabled\" (click)=\"openFileDialog()\">\r\n            <span class=\"fv-upload-text\">{{ placeholder }}</span>\r\n            <span class=\"fv-upload-icon-section\">\r\n                <svg 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    <ng-template #fileUploaded>\r\n        <div class=\"fv-preview-row\">\r\n            <div class=\"fv-preview-wrapper\" (click)=\"viewFile()\" style=\"cursor: pointer;\">\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\" (click)=\"viewFile()\" style=\"cursor: pointer;\">{{ control.value?.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    </ng-template>\r\n\r\n    <div *ngIf=\"errorMessage && control?.touched\" class=\"fv-document-error-message\">\r\n        \u26A0 {{ getErrorMessage() }}\r\n    </div>\r\n</div>\r\n\r\n<!-- Preview Overlay/Modal for Image -->\r\n<div *ngIf=\"showPreview\" class=\"fv-preview-overlay\" (click)=\"closePreview()\">\r\n    <div class=\"fv-preview-content\" (click)=\"$event.stopPropagation()\">\r\n        <img [src]=\"previewUrl\" alt=\"Preview\" />\r\n        <div class=\"fv-preview-actions\">\r\n            <button type=\"button\" class=\"fv-download-btn\" (click)=\"downloadFile()\">Download</button>\r\n            <button type=\"button\" class=\"fv-close-btn\" (click)=\"closePreview()\">Close</button>\r\n        </div>\r\n    </div>\r\n</div>", styles: ["@import\"https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap\";.fv-document-field-container{display:flex;flex-direction:column;margin-bottom:16px;width:fit-content;max-width:100%;font-family:Poppins,sans-serif}.fv-document-field-label{font-size:14px;font-weight:600;color:#151d48;margin-bottom:6px;display:block}.required-asterisk{color:#e74c3c;font-weight:700}.fv-upload-button{display:flex;align-items:center;border:1px solid #dcdcdc;border-radius:8px;background:#fff;padding:0;cursor:pointer;overflow:hidden;width:100px;height:34px;transition:all .2s ease}.fv-upload-button:hover:not(:disabled){border-color:#bbb;box-shadow:0 2px 4px #0000000d}.fv-upload-button:disabled{cursor:not-allowed;background-color:#f9f9f9;opacity:.7}.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-document-error-message{margin-top:4px;font-size:12px;color:#e74c3c}.fv-preview-overlay{position:fixed;top:0;left:0;width:100vw;height:100vh;background:#000c;display:flex;justify-content:center;align-items:center;z-index:10000}.fv-preview-content{position:relative;background:#fff;padding:24px;border-radius:12px;max-width:90vw;max-height:90vh;display:flex;flex-direction:column;align-items:center}.fv-preview-content img{max-width:100%;max-height:70vh;object-fit:contain;border-radius:4px;margin-bottom:20px}.fv-preview-actions{display:flex;gap:16px}.fv-preview-actions button{padding:10px 24px;border-radius:6px;border:none;cursor:pointer;font-weight:500;transition:background .2s}.fv-download-btn{background:#3498db;color:#fff}.fv-download-btn:hover{background:#2980b9}.fv-close-btn{background:#f0f0f0;color:#333}.fv-close-btn:hover{background:#e0e0e0}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.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: FvDocumentFieldComponent, decorators: [{
             type: Component,
-            args: [{ standalone: true, imports: [CommonModule, ReactiveFormsModule], selector: 'fv-document-field', template: "<div class=\"fv-document-field-container\">\r\n    <label *ngIf=\"label\" class=\"fv-document-field-label\">\r\n        {{ label }}\r\n        <span *ngIf=\"isRequired()\" class=\"required-asterisk\">*</span>\r\n    </label>\r\n\r\n    <input #fileInput type=\"file\" [accept]=\"accept\" (change)=\"onFileSelected($event)\" style=\"display: none\" />\r\n\r\n    <div *ngIf=\"!control.value; else fileUploaded\" class=\"fv-upload-btn-wrapper\">\r\n        <button type=\"button\" class=\"fv-upload-button\" [disabled]=\"disabled\" (click)=\"openFileDialog()\">\r\n            <span class=\"fv-upload-text\">{{ placeholder }}</span>\r\n            <span class=\"fv-upload-icon-section\">\r\n                <svg 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    <ng-template #fileUploaded>\r\n        <div class=\"fv-preview-row\">\r\n            <div class=\"fv-preview-wrapper\" (click)=\"viewFile()\" style=\"cursor: pointer;\">\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\" (click)=\"viewFile()\" style=\"cursor: pointer;\">{{ control.value?.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    </ng-template>\r\n\r\n    <div *ngIf=\"errorMessage && control?.touched\" class=\"fv-document-error-message\">\r\n        \u26A0 {{ getErrorMessage() }}\r\n    </div>\r\n</div>\r\n\r\n<!-- Preview Overlay/Modal for Image -->\r\n<div *ngIf=\"showPreview\" class=\"fv-preview-overlay\" (click)=\"closePreview()\">\r\n    <div class=\"fv-preview-content\" (click)=\"$event.stopPropagation()\">\r\n        <img [src]=\"previewUrl\" alt=\"Preview\" />\r\n        <div class=\"fv-preview-actions\">\r\n            <button type=\"button\" class=\"fv-download-btn\" (click)=\"downloadFile()\">Download</button>\r\n            <button type=\"button\" class=\"fv-close-btn\" (click)=\"closePreview()\">Close</button>\r\n        </div>\r\n    </div>\r\n</div>", styles: ["@import\"https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap\";.fv-document-field-container{display:flex;flex-direction:column;margin-bottom:16px;width:100%;font-family:Poppins,sans-serif}.fv-document-field-label{font-size:14px;font-weight:600;color:#151d48;margin-bottom:6px;display:block}.required-asterisk{color:#e74c3c;font-weight:700}.fv-upload-button{display:flex;align-items:center;border:1px solid #dcdcdc;border-radius:8px;background:#fff;padding:0;cursor:pointer;overflow:hidden;width:fit-content;min-width:140px;height:34px;transition:all .2s ease}.fv-upload-button:hover:not(:disabled){border-color:#bbb;box-shadow:0 2px 4px #0000000d}.fv-upload-button:disabled{cursor:not-allowed;background-color:#f9f9f9;opacity:.7}.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:16px;padding:8px 0}.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-document-error-message{margin-top:4px;font-size:12px;color:#e74c3c}.fv-preview-overlay{position:fixed;top:0;left:0;width:100vw;height:100vh;background:#000c;display:flex;justify-content:center;align-items:center;z-index:10000}.fv-preview-content{position:relative;background:#fff;padding:24px;border-radius:12px;max-width:90vw;max-height:90vh;display:flex;flex-direction:column;align-items:center}.fv-preview-content img{max-width:100%;max-height:70vh;object-fit:contain;border-radius:4px;margin-bottom:20px}.fv-preview-actions{display:flex;gap:16px}.fv-preview-actions button{padding:10px 24px;border-radius:6px;border:none;cursor:pointer;font-weight:500;transition:background .2s}.fv-download-btn{background:#3498db;color:#fff}.fv-download-btn:hover{background:#2980b9}.fv-close-btn{background:#f0f0f0;color:#333}.fv-close-btn:hover{background:#e0e0e0}\n"] }]
+            args: [{ standalone: true, imports: [CommonModule, ReactiveFormsModule], selector: 'fv-document-field', template: "<div class=\"fv-document-field-container\">\r\n    <label *ngIf=\"label\" class=\"fv-document-field-label\">\r\n        {{ label }}\r\n        <span *ngIf=\"isRequired()\" class=\"required-asterisk\">*</span>\r\n    </label>\r\n\r\n    <input #fileInput type=\"file\" [accept]=\"accept\" (change)=\"onFileSelected($event)\" style=\"display: none\" />\r\n\r\n    <div *ngIf=\"!control.value; else fileUploaded\" class=\"fv-upload-btn-wrapper\">\r\n        <button type=\"button\" class=\"fv-upload-button\" [disabled]=\"disabled\" (click)=\"openFileDialog()\">\r\n            <span class=\"fv-upload-text\">{{ placeholder }}</span>\r\n            <span class=\"fv-upload-icon-section\">\r\n                <svg 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    <ng-template #fileUploaded>\r\n        <div class=\"fv-preview-row\">\r\n            <div class=\"fv-preview-wrapper\" (click)=\"viewFile()\" style=\"cursor: pointer;\">\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\" (click)=\"viewFile()\" style=\"cursor: pointer;\">{{ control.value?.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    </ng-template>\r\n\r\n    <div *ngIf=\"errorMessage && control?.touched\" class=\"fv-document-error-message\">\r\n        \u26A0 {{ getErrorMessage() }}\r\n    </div>\r\n</div>\r\n\r\n<!-- Preview Overlay/Modal for Image -->\r\n<div *ngIf=\"showPreview\" class=\"fv-preview-overlay\" (click)=\"closePreview()\">\r\n    <div class=\"fv-preview-content\" (click)=\"$event.stopPropagation()\">\r\n        <img [src]=\"previewUrl\" alt=\"Preview\" />\r\n        <div class=\"fv-preview-actions\">\r\n            <button type=\"button\" class=\"fv-download-btn\" (click)=\"downloadFile()\">Download</button>\r\n            <button type=\"button\" class=\"fv-close-btn\" (click)=\"closePreview()\">Close</button>\r\n        </div>\r\n    </div>\r\n</div>", styles: ["@import\"https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap\";.fv-document-field-container{display:flex;flex-direction:column;margin-bottom:16px;width:fit-content;max-width:100%;font-family:Poppins,sans-serif}.fv-document-field-label{font-size:14px;font-weight:600;color:#151d48;margin-bottom:6px;display:block}.required-asterisk{color:#e74c3c;font-weight:700}.fv-upload-button{display:flex;align-items:center;border:1px solid #dcdcdc;border-radius:8px;background:#fff;padding:0;cursor:pointer;overflow:hidden;width:100px;height:34px;transition:all .2s ease}.fv-upload-button:hover:not(:disabled){border-color:#bbb;box-shadow:0 2px 4px #0000000d}.fv-upload-button:disabled{cursor:not-allowed;background-color:#f9f9f9;opacity:.7}.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-document-error-message{margin-top:4px;font-size:12px;color:#e74c3c}.fv-preview-overlay{position:fixed;top:0;left:0;width:100vw;height:100vh;background:#000c;display:flex;justify-content:center;align-items:center;z-index:10000}.fv-preview-content{position:relative;background:#fff;padding:24px;border-radius:12px;max-width:90vw;max-height:90vh;display:flex;flex-direction:column;align-items:center}.fv-preview-content img{max-width:100%;max-height:70vh;object-fit:contain;border-radius:4px;margin-bottom:20px}.fv-preview-actions{display:flex;gap:16px}.fv-preview-actions button{padding:10px 24px;border-radius:6px;border:none;cursor:pointer;font-weight:500;transition:background .2s}.fv-download-btn{background:#3498db;color:#fff}.fv-download-btn:hover{background:#2980b9}.fv-close-btn{background:#f0f0f0;color:#333}.fv-close-btn:hover{background:#e0e0e0}\n"] }]
         }], ctorParameters: () => [{ type: i1$1.DomSanitizer }], propDecorators: { label: [{
                 type: Input
             }], placeholder: [{