@fovestta2/web-angular 1.0.1

package/fesm2022/fovestta2-web-angular.mjs

@@ -0,0 +1,1149 @@
+import * as i0 from '@angular/core';
+import { EventEmitter, Component, Input, Output, ViewChild, NgModule } from '@angular/core';
+import * as i1 from '@angular/common';
+import { CommonModule } from '@angular/common';
+import * as i2 from '@angular/forms';
+import { ReactiveFormsModule } from '@angular/forms';
+import { Validator } from '@fovestta2/validation-engine';
+import * as i1$1 from '@angular/platform-browser';
+import { Validator as Validator$1 } from '@fovestta/validation-engine';
+
+class FvEntryFieldComponent {
+    label = '';
+    placeholder = '';
+    schema;
+    control;
+    disabled = false;
+    readonly = false;
+    type = 'text';
+    valueChange = new EventEmitter();
+    blur = new EventEmitter();
+    focus = new EventEmitter();
+    errorMessage = null;
+    subscription;
+    ngOnInit() {
+        if (!this.control) {
+            console.error('FvEntryField: control is required');
+            return;
+        }
+        if (!this.schema) {
+            console.warn('FvEntryField: schema is not provided, validation will be skipped');
+            return;
+        }
+        // Subscribe to value changes
+        this.subscription = this.control.valueChanges.subscribe((value) => {
+            this.validateValue(value);
+            this.valueChange.emit(value);
+        });
+        // Validate initial value
+        if (this.control.value) {
+            this.validateValue(this.control.value);
+        }
+    }
+    ngOnDestroy() {
+        this.subscription?.unsubscribe();
+    }
+    validateValue(value) {
+        if (!this.schema)
+            return;
+        const result = Validator.validate(value, this.schema);
+        this.errorMessage = result.errorKey;
+        if (!result.isValid && result.errorKey) {
+            this.control.setErrors({ [result.errorKey]: true });
+        }
+        else {
+            this.control.setErrors(null);
+        }
+    }
+    onBlur(event) {
+        if (this.control && this.schema) {
+            this.validateValue(this.control.value);
+        }
+        this.blur.emit();
+    }
+    onFocus(event) {
+        this.focus.emit();
+    }
+    isRequired() {
+        return (this.schema?.rules?.some((r) => r.name === 'required' && r.params?.['enabled']) || false);
+    }
+    getErrorMessage() {
+        if (!this.errorMessage)
+            return '';
+        // You can implement a translation service here
+        const errorMessages = {
+            ERR_REQUIRED: 'This field is required',
+            ERR_MIN_LENGTH: 'Value is too short',
+            ERR_MAX_LENGTH: 'Value is too long',
+            ERR_REGEX_MISMATCH: 'Invalid format',
+        };
+        return errorMessages[this.errorMessage] || this.errorMessage;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: FvEntryFieldComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: FvEntryFieldComponent, isStandalone: true, selector: "fv-entry-field", inputs: { label: "label", placeholder: "placeholder", schema: "schema", control: "control", disabled: "disabled", readonly: "readonly", type: "type" }, outputs: { valueChange: "valueChange", blur: "blur", focus: "focus" }, ngImport: i0, template: "<div class=\"fv-entry-field-container\">\r\n  <label *ngIf=\"label\" class=\"fv-label\" [class.fv-label-required]=\"isRequired()\">\r\n    {{ label }}\r\n    <span *ngIf=\"isRequired()\" class=\"fv-required-asterisk\">*</span>\r\n  </label>\r\n\r\n  <input [type]=\"type\" [formControl]=\"control\" [placeholder]=\"placeholder\" [disabled]=\"disabled\" [readonly]=\"readonly\"\r\n    (blur)=\"onBlur($event)\" (focus)=\"onFocus($event)\" class=\"fv-input\" [class.fv-input-error]=\"errorMessage\"\r\n    [class.fv-input-disabled]=\"disabled\" />\r\n\r\n  <span *ngIf=\"errorMessage\" class=\"fv-error-message\">\r\n    {{ getErrorMessage() }}\r\n  </span>\r\n</div>", styles: [".fv-entry-field-container{display:flex;flex-direction:column;margin-bottom:16px;width:100%}.fv-label{margin-bottom:6px;font-size:14px;font-weight:500;color:var(--fv-text-primary, #333333);display:flex;align-items:center;gap:4px}.fv-required-asterisk{color:var(--fv-error-color, #dc3545);font-weight:700}.fv-input{padding:10px 12px;border:1px solid var(--fv-border-default, #cccccc);border-radius:4px;font-size:14px;font-family:inherit;transition:all .2s ease-in-out;background-color:var(--fv-background-default, #ffffff);color:var(--fv-text-primary, #333333)}.fv-input:focus{outline:none;border-color:var(--fv-border-focus, #007bff);box-shadow:0 0 0 3px var(--fv-focus-shadow, rgba(0, 123, 255, .1))}.fv-input:hover:not(:disabled):not(:focus){border-color:var(--fv-border-hover, #999999)}.fv-input-error{border-color:var(--fv-border-error, #dc3545)!important}.fv-input-error:focus{box-shadow:0 0 0 3px var(--fv-error-shadow, rgba(220, 53, 69, .1))}.fv-input-disabled{background-color:var(--fv-background-disabled, #f5f5f5);cursor:not-allowed;opacity:.6}.fv-input::placeholder{color:var(--fv-text-placeholder, #999999);opacity:1}.fv-error-message{margin-top:4px;font-size:12px;color:var(--fv-error-color, #dc3545);display:flex;align-items:center;gap:4px}.fv-error-message:before{content:\"\\26a0\";font-size:14px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: FvEntryFieldComponent, decorators: [{
+            type: Component,
+            args: [{ standalone: true, imports: [CommonModule, ReactiveFormsModule], selector: 'fv-entry-field', template: "<div class=\"fv-entry-field-container\">\r\n  <label *ngIf=\"label\" class=\"fv-label\" [class.fv-label-required]=\"isRequired()\">\r\n    {{ label }}\r\n    <span *ngIf=\"isRequired()\" class=\"fv-required-asterisk\">*</span>\r\n  </label>\r\n\r\n  <input [type]=\"type\" [formControl]=\"control\" [placeholder]=\"placeholder\" [disabled]=\"disabled\" [readonly]=\"readonly\"\r\n    (blur)=\"onBlur($event)\" (focus)=\"onFocus($event)\" class=\"fv-input\" [class.fv-input-error]=\"errorMessage\"\r\n    [class.fv-input-disabled]=\"disabled\" />\r\n\r\n  <span *ngIf=\"errorMessage\" class=\"fv-error-message\">\r\n    {{ getErrorMessage() }}\r\n  </span>\r\n</div>", styles: [".fv-entry-field-container{display:flex;flex-direction:column;margin-bottom:16px;width:100%}.fv-label{margin-bottom:6px;font-size:14px;font-weight:500;color:var(--fv-text-primary, #333333);display:flex;align-items:center;gap:4px}.fv-required-asterisk{color:var(--fv-error-color, #dc3545);font-weight:700}.fv-input{padding:10px 12px;border:1px solid var(--fv-border-default, #cccccc);border-radius:4px;font-size:14px;font-family:inherit;transition:all .2s ease-in-out;background-color:var(--fv-background-default, #ffffff);color:var(--fv-text-primary, #333333)}.fv-input:focus{outline:none;border-color:var(--fv-border-focus, #007bff);box-shadow:0 0 0 3px var(--fv-focus-shadow, rgba(0, 123, 255, .1))}.fv-input:hover:not(:disabled):not(:focus){border-color:var(--fv-border-hover, #999999)}.fv-input-error{border-color:var(--fv-border-error, #dc3545)!important}.fv-input-error:focus{box-shadow:0 0 0 3px var(--fv-error-shadow, rgba(220, 53, 69, .1))}.fv-input-disabled{background-color:var(--fv-background-disabled, #f5f5f5);cursor:not-allowed;opacity:.6}.fv-input::placeholder{color:var(--fv-text-placeholder, #999999);opacity:1}.fv-error-message{margin-top:4px;font-size:12px;color:var(--fv-error-color, #dc3545);display:flex;align-items:center;gap:4px}.fv-error-message:before{content:\"\\26a0\";font-size:14px}\n"] }]
+        }], propDecorators: { label: [{
+                type: Input
+            }], placeholder: [{
+                type: Input
+            }], schema: [{
+                type: Input
+            }], control: [{
+                type: Input
+            }], disabled: [{
+                type: Input
+            }], readonly: [{
+                type: Input
+            }], type: [{
+                type: Input
+            }], valueChange: [{
+                type: Output
+            }], blur: [{
+                type: Output
+            }], focus: [{
+                type: Output
+            }] } });
+
+class FvDateFieldComponent {
+    label = '';
+    schema;
+    control;
+    disabled = false;
+    readonly = false;
+    // Optional native constraints (can also be derived from schema)
+    min;
+    max;
+    valueChange = new EventEmitter();
+    blur = new EventEmitter();
+    focus = new EventEmitter();
+    errorMessage = null;
+    subscription;
+    ngOnInit() {
+        if (!this.control) {
+            console.error('FvDateField: control is required');
+            return;
+        }
+        // Try to derive min/max from schema if not explicitly provided
+        this.extractConstraintsFromSchema();
+        // Subscribe to value changes
+        this.subscription = this.control.valueChanges.subscribe((value) => {
+            this.validateValue(value);
+            this.valueChange.emit(value);
+        });
+        // Validate initial value
+        if (this.control.value) {
+            this.validateValue(this.control.value);
+        }
+    }
+    ngOnDestroy() {
+        this.subscription?.unsubscribe();
+    }
+    extractConstraintsFromSchema() {
+        if (!this.schema?.rules)
+            return;
+        for (const rule of this.schema.rules) {
+            if (rule.name === 'minDate' && !this.min) {
+                this.min = this.formatDate(rule.params?.['value']);
+            }
+            if (rule.name === 'maxDate' && !this.max) {
+                this.max = this.formatDate(rule.params?.['value']);
+            }
+            // We could also calculate min/max from age rules, but that's complex (dynamic dates)
+            // leaving out for now or can be added later.
+        }
+    }
+    formatDate(date) {
+        if (!date)
+            return '';
+        const d = new Date(date);
+        if (isNaN(d.getTime()))
+            return '';
+        return d.toISOString().split('T')[0];
+    }
+    validateValue(value) {
+        if (!this.schema)
+            return;
+        const result = Validator.validate(value, this.schema);
+        this.errorMessage = result.errorKey;
+        if (!result.isValid && result.errorKey) {
+            this.control.setErrors({ [result.errorKey]: true });
+        }
+        else {
+            this.control.setErrors(null);
+        }
+    }
+    onBlur(event) {
+        this.validateValue(this.control.value);
+        this.blur.emit();
+    }
+    onFocus(event) {
+        this.focus.emit();
+    }
+    isRequired() {
+        return (this.schema?.rules?.some((r) => r.name === 'required' && r.params?.['enabled']) || false);
+    }
+    getErrorMessage() {
+        if (!this.errorMessage)
+            return '';
+        const errorMessages = {
+            ERR_REQUIRED: 'Date is required',
+            ERR_MIN_DATE: `Date must be after ${this.min}`,
+            ERR_MAX_DATE: `Date must be before ${this.max}`,
+            ERR_MIN_AGE: 'Age requirement not met (too young)',
+            ERR_MAX_AGE: 'Age requirement not met (too old)',
+        };
+        return errorMessages[this.errorMessage] || this.errorMessage;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: FvDateFieldComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: FvDateFieldComponent, isStandalone: true, selector: "fv-date-field", inputs: { label: "label", schema: "schema", control: "control", disabled: "disabled", readonly: "readonly", min: "min", max: "max" }, outputs: { valueChange: "valueChange", blur: "blur", focus: "focus" }, ngImport: i0, template: "<div class=\"fv-field-container\">\r\n  <label *ngIf=\"label\" class=\"fv-label\">\r\n    {{ label }} <span *ngIf=\"isRequired()\" class=\"required\">*</span>\r\n  </label>\r\n\r\n  <input type=\"date\" [formControl]=\"control\" class=\"fv-input\" [class.error]=\"!!errorMessage\" [attr.min]=\"min\"\r\n    [attr.max]=\"max\" [readonly]=\"readonly\" (blur)=\"onBlur($event)\" (focus)=\"onFocus($event)\" />\r\n\r\n  <div *ngIf=\"errorMessage\" class=\"fv-error-message\">\r\n    {{ getErrorMessage() }}\r\n  </div>\r\n</div>", styles: [".fv-field-container{display:flex;flex-direction:column;margin-bottom:1rem}.fv-label{font-size:.875rem;font-weight:500;margin-bottom:.5rem;color:#374151}.required{color:#ef4444}.fv-input{padding:.5rem .75rem;border:1px solid #d1d5db;border-radius:.375rem;font-size:1rem;line-height:1.5;transition:border-color .15s ease-in-out,box-shadow .15s ease-in-out}.fv-input:focus{outline:none;border-color:#3b82f6;box-shadow:0 0 0 3px #3b82f61a}.fv-input.error{border-color:#ef4444}.fv-input.error:focus{box-shadow:0 0 0 3px #ef44441a}.fv-error-message{margin-top:.25rem;font-size:.75rem;color:#ef4444}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: FvDateFieldComponent, decorators: [{
+            type: Component,
+            args: [{ standalone: true, imports: [CommonModule, ReactiveFormsModule], selector: 'fv-date-field', template: "<div class=\"fv-field-container\">\r\n  <label *ngIf=\"label\" class=\"fv-label\">\r\n    {{ label }} <span *ngIf=\"isRequired()\" class=\"required\">*</span>\r\n  </label>\r\n\r\n  <input type=\"date\" [formControl]=\"control\" class=\"fv-input\" [class.error]=\"!!errorMessage\" [attr.min]=\"min\"\r\n    [attr.max]=\"max\" [readonly]=\"readonly\" (blur)=\"onBlur($event)\" (focus)=\"onFocus($event)\" />\r\n\r\n  <div *ngIf=\"errorMessage\" class=\"fv-error-message\">\r\n    {{ getErrorMessage() }}\r\n  </div>\r\n</div>", styles: [".fv-field-container{display:flex;flex-direction:column;margin-bottom:1rem}.fv-label{font-size:.875rem;font-weight:500;margin-bottom:.5rem;color:#374151}.required{color:#ef4444}.fv-input{padding:.5rem .75rem;border:1px solid #d1d5db;border-radius:.375rem;font-size:1rem;line-height:1.5;transition:border-color .15s ease-in-out,box-shadow .15s ease-in-out}.fv-input:focus{outline:none;border-color:#3b82f6;box-shadow:0 0 0 3px #3b82f61a}.fv-input.error{border-color:#ef4444}.fv-input.error:focus{box-shadow:0 0 0 3px #ef44441a}.fv-error-message{margin-top:.25rem;font-size:.75rem;color:#ef4444}\n"] }]
+        }], propDecorators: { label: [{
+                type: Input
+            }], schema: [{
+                type: Input
+            }], control: [{
+                type: Input
+            }], disabled: [{
+                type: Input
+            }], readonly: [{
+                type: Input
+            }], min: [{
+                type: Input
+            }], max: [{
+                type: Input
+            }], valueChange: [{
+                type: Output
+            }], blur: [{
+                type: Output
+            }], focus: [{
+                type: Output
+            }] } });
+
+class FvMonthYearFieldComponent {
+    label = '';
+    schema;
+    control;
+    disabled = false;
+    readonly = false;
+    min; // YYYY-MM
+    max; // YYYY-MM
+    valueChange = new EventEmitter();
+    blur = new EventEmitter();
+    focus = new EventEmitter();
+    errorMessage = null;
+    subscription;
+    ngOnInit() {
+        if (!this.control) {
+            console.error('FvMonthYearField: control is required');
+            return;
+        }
+        this.extractConstraintsFromSchema();
+        this.subscription = this.control.valueChanges.subscribe((value) => {
+            this.validateValue(value);
+            this.valueChange.emit(value);
+        });
+        if (this.control.value) {
+            this.validateValue(this.control.value);
+        }
+    }
+    ngOnDestroy() {
+        this.subscription?.unsubscribe();
+    }
+    extractConstraintsFromSchema() {
+        if (!this.schema?.rules)
+            return;
+        for (const rule of this.schema.rules) {
+            if (rule.name === 'minDate' && !this.min) {
+                this.min = this.formatMonth(rule.params?.['value']);
+            }
+            if (rule.name === 'maxDate' && !this.max) {
+                this.max = this.formatMonth(rule.params?.['value']);
+            }
+        }
+    }
+    formatMonth(date) {
+        if (!date)
+            return '';
+        const d = new Date(date);
+        if (isNaN(d.getTime()))
+            return '';
+        return d.toISOString().slice(0, 7); // YYYY-MM
+    }
+    validateValue(value) {
+        if (!this.schema)
+            return;
+        // For month picker, value is YYYY-MM. 
+        // The generic Validator rules use new Date(value), which treats YYYY-MM as YYYY-MM-01.
+        // This generally works for min/max logic.
+        const result = Validator.validate(value, this.schema);
+        this.errorMessage = result.errorKey;
+        if (!result.isValid && result.errorKey) {
+            this.control.setErrors({ [result.errorKey]: true });
+        }
+        else {
+            this.control.setErrors(null);
+        }
+    }
+    onBlur(event) {
+        this.validateValue(this.control.value);
+        this.blur.emit();
+    }
+    onFocus(event) {
+        this.focus.emit();
+    }
+    isRequired() {
+        return (this.schema?.rules?.some((r) => r.name === 'required' && r.params?.['enabled']) || false);
+    }
+    getErrorMessage() {
+        if (!this.errorMessage)
+            return '';
+        const errorMessages = {
+            ERR_REQUIRED: 'Month/Year is required',
+            ERR_MIN_DATE: `Date must be after ${this.min}`,
+            ERR_MAX_DATE: `Date must be before ${this.max}`,
+        };
+        return errorMessages[this.errorMessage] || this.errorMessage;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: FvMonthYearFieldComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: FvMonthYearFieldComponent, isStandalone: true, selector: "fv-month-year-field", inputs: { label: "label", schema: "schema", control: "control", disabled: "disabled", readonly: "readonly", min: "min", max: "max" }, outputs: { valueChange: "valueChange", blur: "blur", focus: "focus" }, ngImport: i0, template: "<div class=\"fv-field-container\">\r\n    <label *ngIf=\"label\" class=\"fv-label\">\r\n        {{ label }} <span *ngIf=\"isRequired()\" class=\"required\">*</span>\r\n    </label>\r\n\r\n    <input type=\"month\" [formControl]=\"control\" class=\"fv-input\" [class.error]=\"!!errorMessage\" [attr.min]=\"min\"\r\n        [attr.max]=\"max\" [readonly]=\"readonly\" (blur)=\"onBlur($event)\" (focus)=\"onFocus($event)\" />\r\n\r\n    <div *ngIf=\"errorMessage\" class=\"fv-error-message\">\r\n        {{ getErrorMessage() }}\r\n    </div>\r\n</div>", styles: [".fv-field-container{display:flex;flex-direction:column;margin-bottom:1rem}.fv-label{font-size:.875rem;font-weight:500;margin-bottom:.5rem;color:#374151}.required{color:#ef4444}.fv-input{padding:.5rem .75rem;border:1px solid #d1d5db;border-radius:.375rem;font-size:1rem;line-height:1.5;transition:border-color .15s ease-in-out,box-shadow .15s ease-in-out}.fv-input:focus{outline:none;border-color:#3b82f6;box-shadow:0 0 0 3px #3b82f61a}.fv-input.error{border-color:#ef4444}.fv-input.error:focus{box-shadow:0 0 0 3px #ef44441a}.fv-error-message{margin-top:.25rem;font-size:.75rem;color:#ef4444}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: FvMonthYearFieldComponent, decorators: [{
+            type: Component,
+            args: [{ standalone: true, imports: [CommonModule, ReactiveFormsModule], selector: 'fv-month-year-field', template: "<div class=\"fv-field-container\">\r\n    <label *ngIf=\"label\" class=\"fv-label\">\r\n        {{ label }} <span *ngIf=\"isRequired()\" class=\"required\">*</span>\r\n    </label>\r\n\r\n    <input type=\"month\" [formControl]=\"control\" class=\"fv-input\" [class.error]=\"!!errorMessage\" [attr.min]=\"min\"\r\n        [attr.max]=\"max\" [readonly]=\"readonly\" (blur)=\"onBlur($event)\" (focus)=\"onFocus($event)\" />\r\n\r\n    <div *ngIf=\"errorMessage\" class=\"fv-error-message\">\r\n        {{ getErrorMessage() }}\r\n    </div>\r\n</div>", styles: [".fv-field-container{display:flex;flex-direction:column;margin-bottom:1rem}.fv-label{font-size:.875rem;font-weight:500;margin-bottom:.5rem;color:#374151}.required{color:#ef4444}.fv-input{padding:.5rem .75rem;border:1px solid #d1d5db;border-radius:.375rem;font-size:1rem;line-height:1.5;transition:border-color .15s ease-in-out,box-shadow .15s ease-in-out}.fv-input:focus{outline:none;border-color:#3b82f6;box-shadow:0 0 0 3px #3b82f61a}.fv-input.error{border-color:#ef4444}.fv-input.error:focus{box-shadow:0 0 0 3px #ef44441a}.fv-error-message{margin-top:.25rem;font-size:.75rem;color:#ef4444}\n"] }]
+        }], propDecorators: { label: [{
+                type: Input
+            }], schema: [{
+                type: Input
+            }], control: [{
+                type: Input
+            }], disabled: [{
+                type: Input
+            }], readonly: [{
+                type: Input
+            }], min: [{
+                type: Input
+            }], max: [{
+                type: Input
+            }], valueChange: [{
+                type: Output
+            }], blur: [{
+                type: Output
+            }], focus: [{
+                type: Output
+            }] } });
+
+class FvNumberFieldComponent {
+    label = '';
+    placeholder = '';
+    schema;
+    control;
+    disabled = false;
+    readonly = false;
+    min;
+    max;
+    step = 1;
+    valueChange = new EventEmitter();
+    blur = new EventEmitter();
+    focus = new EventEmitter();
+    errorMessage = null;
+    subscription;
+    ngOnInit() {
+        if (!this.control) {
+            console.error('FvNumberField: control is required');
+            return;
+        }
+        if (!this.schema) {
+            console.warn('FvNumberField: schema is not provided');
+            return;
+        }
+        this.subscription = this.control.valueChanges.subscribe((value) => {
+            this.validateValue(value);
+            this.valueChange.emit(value);
+        });
+        if (this.control.value) {
+            this.validateValue(this.control.value);
+        }
+    }
+    ngOnDestroy() {
+        this.subscription?.unsubscribe();
+    }
+    validateValue(value) {
+        if (!this.schema)
+            return;
+        const result = Validator.validate(value, this.schema);
+        this.errorMessage = result.errorKey;
+        if (!result.isValid && result.errorKey) {
+            this.control.setErrors({ [result.errorKey]: true });
+        }
+        else {
+            this.control.setErrors(null);
+        }
+    }
+    onBlur() {
+        if (this.control && this.schema) {
+            this.validateValue(this.control.value);
+        }
+        this.blur.emit();
+    }
+    onFocus() {
+        this.focus.emit();
+    }
+    isRequired() {
+        return (this.schema?.rules?.some((r) => r.name === 'required' && r.params?.['enabled']) || false);
+    }
+    getErrorMessage() {
+        if (!this.errorMessage)
+            return '';
+        const errorMessages = {
+            ERR_REQUIRED: 'This field is required',
+            ERR_NUMERIC_INVALID: 'Please enter a valid number',
+            ERR_RANGE_INVALID: 'Number is out of range',
+        };
+        return errorMessages[this.errorMessage] || this.errorMessage;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: FvNumberFieldComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: FvNumberFieldComponent, isStandalone: true, selector: "fv-number-field", inputs: { label: "label", placeholder: "placeholder", schema: "schema", control: "control", disabled: "disabled", readonly: "readonly", min: "min", max: "max", step: "step" }, outputs: { valueChange: "valueChange", blur: "blur", focus: "focus" }, ngImport: i0, template: "<div class=\"fv-number-field-container\">\r\n  <label *ngIf=\"label\" class=\"fv-label\">\r\n    {{ label }}\r\n    <span *ngIf=\"isRequired()\" class=\"fv-required-asterisk\">*</span>\r\n  </label>\r\n\r\n  <input type=\"number\" [formControl]=\"control\" [placeholder]=\"placeholder\" [disabled]=\"disabled\" [readonly]=\"readonly\"\r\n    [min]=\"min\" [max]=\"max\" [step]=\"step\" (blur)=\"onBlur()\" (focus)=\"onFocus()\" class=\"fv-input\"\r\n    [class.fv-input-error]=\"errorMessage\" [class.fv-input-disabled]=\"disabled\" />\r\n\r\n  <span *ngIf=\"errorMessage\" class=\"fv-error-message\">\r\n    {{ getErrorMessage() }}\r\n  </span>\r\n</div>", styles: [".fv-number-field-container{display:flex;flex-direction:column;margin-bottom:16px;width:100%}.fv-label{margin-bottom:6px;font-size:14px;font-weight:500;color:var(--fv-text-primary, #333333);display:flex;align-items:center;gap:4px}.fv-required-asterisk{color:var(--fv-error-color, #dc3545);font-weight:700}.fv-input{padding:10px 12px;border:1px solid var(--fv-border-default, #cccccc);border-radius:4px;font-size:14px;font-family:inherit;transition:all .2s ease-in-out;background-color:var(--fv-background-default, #ffffff);color:var(--fv-text-primary, #333333)}.fv-input:focus{outline:none;border-color:var(--fv-border-focus, #007bff);box-shadow:0 0 0 3px var(--fv-focus-shadow, rgba(0, 123, 255, .1))}.fv-input:hover:not(:disabled):not(:focus){border-color:var(--fv-border-hover, #999999)}.fv-input-error{border-color:var(--fv-border-error, #dc3545)!important}.fv-input-error:focus{box-shadow:0 0 0 3px var(--fv-error-shadow, rgba(220, 53, 69, .1))}.fv-input-disabled{background-color:var(--fv-background-disabled, #f5f5f5);cursor:not-allowed;opacity:.6}.fv-error-message{margin-top:4px;font-size:12px;color:var(--fv-error-color, #dc3545);display:flex;align-items:center;gap:4px}.fv-error-message:before{content:\"\\26a0\";font-size:14px}.fv-input::-webkit-inner-spin-button,.fv-input::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}.fv-input[type=number]{-moz-appearance:textfield}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.MinValidator, selector: "input[type=number][min][formControlName],input[type=number][min][formControl],input[type=number][min][ngModel]", inputs: ["min"] }, { kind: "directive", type: i2.MaxValidator, selector: "input[type=number][max][formControlName],input[type=number][max][formControl],input[type=number][max][ngModel]", inputs: ["max"] }, { kind: "directive", type: i2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: FvNumberFieldComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'fv-number-field', standalone: true, imports: [CommonModule, ReactiveFormsModule], template: "<div class=\"fv-number-field-container\">\r\n  <label *ngIf=\"label\" class=\"fv-label\">\r\n    {{ label }}\r\n    <span *ngIf=\"isRequired()\" class=\"fv-required-asterisk\">*</span>\r\n  </label>\r\n\r\n  <input type=\"number\" [formControl]=\"control\" [placeholder]=\"placeholder\" [disabled]=\"disabled\" [readonly]=\"readonly\"\r\n    [min]=\"min\" [max]=\"max\" [step]=\"step\" (blur)=\"onBlur()\" (focus)=\"onFocus()\" class=\"fv-input\"\r\n    [class.fv-input-error]=\"errorMessage\" [class.fv-input-disabled]=\"disabled\" />\r\n\r\n  <span *ngIf=\"errorMessage\" class=\"fv-error-message\">\r\n    {{ getErrorMessage() }}\r\n  </span>\r\n</div>", styles: [".fv-number-field-container{display:flex;flex-direction:column;margin-bottom:16px;width:100%}.fv-label{margin-bottom:6px;font-size:14px;font-weight:500;color:var(--fv-text-primary, #333333);display:flex;align-items:center;gap:4px}.fv-required-asterisk{color:var(--fv-error-color, #dc3545);font-weight:700}.fv-input{padding:10px 12px;border:1px solid var(--fv-border-default, #cccccc);border-radius:4px;font-size:14px;font-family:inherit;transition:all .2s ease-in-out;background-color:var(--fv-background-default, #ffffff);color:var(--fv-text-primary, #333333)}.fv-input:focus{outline:none;border-color:var(--fv-border-focus, #007bff);box-shadow:0 0 0 3px var(--fv-focus-shadow, rgba(0, 123, 255, .1))}.fv-input:hover:not(:disabled):not(:focus){border-color:var(--fv-border-hover, #999999)}.fv-input-error{border-color:var(--fv-border-error, #dc3545)!important}.fv-input-error:focus{box-shadow:0 0 0 3px var(--fv-error-shadow, rgba(220, 53, 69, .1))}.fv-input-disabled{background-color:var(--fv-background-disabled, #f5f5f5);cursor:not-allowed;opacity:.6}.fv-error-message{margin-top:4px;font-size:12px;color:var(--fv-error-color, #dc3545);display:flex;align-items:center;gap:4px}.fv-error-message:before{content:\"\\26a0\";font-size:14px}.fv-input::-webkit-inner-spin-button,.fv-input::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}.fv-input[type=number]{-moz-appearance:textfield}\n"] }]
+        }], propDecorators: { label: [{
+                type: Input
+            }], placeholder: [{
+                type: Input
+            }], schema: [{
+                type: Input
+            }], control: [{
+                type: Input
+            }], disabled: [{
+                type: Input
+            }], readonly: [{
+                type: Input
+            }], min: [{
+                type: Input
+            }], max: [{
+                type: Input
+            }], step: [{
+                type: Input
+            }], valueChange: [{
+                type: Output
+            }], blur: [{
+                type: Output
+            }], focus: [{
+                type: Output
+            }] } });
+
+class FvCheckboxComponent {
+    label = '';
+    control;
+    disabled = false;
+    required = false;
+    valueChange = new EventEmitter();
+    ngOnInit() {
+        if (!this.control) {
+            console.error('FvCheckbox: control is required');
+        }
+    }
+    onChange(event) {
+        const checked = event.target.checked;
+        this.control.setValue(checked);
+        this.valueChange.emit(checked);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: FvCheckboxComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: FvCheckboxComponent, isStandalone: true, selector: "fv-checkbox", inputs: { label: "label", control: "control", disabled: "disabled", required: "required" }, outputs: { valueChange: "valueChange" }, ngImport: i0, template: "<div class=\"fv-checkbox-container\">\r\n  <label class=\"fv-checkbox-label\">\r\n    <input type=\"checkbox\" [formControl]=\"control\" [disabled]=\"disabled\" (change)=\"onChange($event)\"\r\n      class=\"fv-checkbox-input\" />\r\n    <span class=\"fv-checkbox-custom\"></span>\r\n    <span class=\"fv-checkbox-text\">\r\n      {{ label }}\r\n      <span *ngIf=\"required\" class=\"fv-required-asterisk\">*</span>\r\n    </span>\r\n  </label>\r\n</div>", styles: [".fv-checkbox-container{margin-bottom:12px}.fv-checkbox-label{display:flex;align-items:center;cursor:pointer;-webkit-user-select:none;user-select:none;position:relative;padding-left:32px;min-height:24px}.fv-checkbox-input{position:absolute;opacity:0;cursor:pointer;height:0;width:0}.fv-checkbox-custom{position:absolute;left:0;top:0;height:20px;width:20px;background-color:var(--fv-background-default, #ffffff);border:2px solid var(--fv-border-default, #cccccc);border-radius:4px;transition:all .2s}.fv-checkbox-label:hover .fv-checkbox-custom{border-color:var(--fv-border-hover, #999999)}.fv-checkbox-input:checked~.fv-checkbox-custom{background-color:var(--fv-border-focus, #667eea);border-color:var(--fv-border-focus, #667eea)}.fv-checkbox-custom:after{content:\"\";position:absolute;display:none;left:6px;top:2px;width:5px;height:10px;border:solid white;border-width:0 2px 2px 0;transform:rotate(45deg)}.fv-checkbox-input:checked~.fv-checkbox-custom:after{display:block}.fv-checkbox-input:disabled~.fv-checkbox-custom{background-color:var(--fv-background-disabled, #f5f5f5);cursor:not-allowed;opacity:.6}.fv-checkbox-text{font-size:14px;color:var(--fv-text-primary, #333333)}.fv-required-asterisk{color:var(--fv-error-color, #dc3545);margin-left:4px;font-weight:700}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: FvCheckboxComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'fv-checkbox', standalone: true, imports: [CommonModule, ReactiveFormsModule], template: "<div class=\"fv-checkbox-container\">\r\n  <label class=\"fv-checkbox-label\">\r\n    <input type=\"checkbox\" [formControl]=\"control\" [disabled]=\"disabled\" (change)=\"onChange($event)\"\r\n      class=\"fv-checkbox-input\" />\r\n    <span class=\"fv-checkbox-custom\"></span>\r\n    <span class=\"fv-checkbox-text\">\r\n      {{ label }}\r\n      <span *ngIf=\"required\" class=\"fv-required-asterisk\">*</span>\r\n    </span>\r\n  </label>\r\n</div>", styles: [".fv-checkbox-container{margin-bottom:12px}.fv-checkbox-label{display:flex;align-items:center;cursor:pointer;-webkit-user-select:none;user-select:none;position:relative;padding-left:32px;min-height:24px}.fv-checkbox-input{position:absolute;opacity:0;cursor:pointer;height:0;width:0}.fv-checkbox-custom{position:absolute;left:0;top:0;height:20px;width:20px;background-color:var(--fv-background-default, #ffffff);border:2px solid var(--fv-border-default, #cccccc);border-radius:4px;transition:all .2s}.fv-checkbox-label:hover .fv-checkbox-custom{border-color:var(--fv-border-hover, #999999)}.fv-checkbox-input:checked~.fv-checkbox-custom{background-color:var(--fv-border-focus, #667eea);border-color:var(--fv-border-focus, #667eea)}.fv-checkbox-custom:after{content:\"\";position:absolute;display:none;left:6px;top:2px;width:5px;height:10px;border:solid white;border-width:0 2px 2px 0;transform:rotate(45deg)}.fv-checkbox-input:checked~.fv-checkbox-custom:after{display:block}.fv-checkbox-input:disabled~.fv-checkbox-custom{background-color:var(--fv-background-disabled, #f5f5f5);cursor:not-allowed;opacity:.6}.fv-checkbox-text{font-size:14px;color:var(--fv-text-primary, #333333)}.fv-required-asterisk{color:var(--fv-error-color, #dc3545);margin-left:4px;font-weight:700}\n"] }]
+        }], propDecorators: { label: [{
+                type: Input
+            }], control: [{
+                type: Input
+            }], disabled: [{
+                type: Input
+            }], required: [{
+                type: Input
+            }], valueChange: [{
+                type: Output
+            }] } });
+
+class FvRadioGroupComponent {
+    label = '';
+    control;
+    options = [];
+    disabled = false;
+    required = false;
+    name = `fv-radio-${Math.random().toString(36).substr(2, 9)}`;
+    valueChange = new EventEmitter();
+    ngOnInit() {
+        if (!this.control) {
+            console.error('FvRadioGroup: control is required');
+        }
+    }
+    onChange(value) {
+        this.control.setValue(value);
+        this.valueChange.emit(value);
+    }
+    isSelected(value) {
+        return this.control.value === value;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: FvRadioGroupComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: FvRadioGroupComponent, isStandalone: true, selector: "fv-radio-group", inputs: { label: "label", control: "control", options: "options", disabled: "disabled", required: "required", name: "name" }, outputs: { valueChange: "valueChange" }, ngImport: i0, template: "<div class=\"fv-radio-group-container\">\r\n  <label *ngIf=\"label\" class=\"fv-group-label\">\r\n    {{ label }}\r\n    <span *ngIf=\"required\" class=\"fv-required-asterisk\">*</span>\r\n  </label>\r\n  \r\n  <div class=\"fv-radio-options\">\r\n    <label \r\n      *ngFor=\"let option of options\" \r\n      class=\"fv-radio-label\"\r\n      [class.fv-radio-disabled]=\"disabled || option.disabled\">\r\n      <input\r\n        type=\"radio\"\r\n        [name]=\"name\"\r\n        [value]=\"option.value\"\r\n        [checked]=\"isSelected(option.value)\"\r\n        [disabled]=\"disabled || option.disabled\"\r\n        (change)=\"onChange(option.value)\"\r\n        class=\"fv-radio-input\"\r\n      />\r\n      <span class=\"fv-radio-custom\"></span>\r\n      <span class=\"fv-radio-text\">{{ option.label }}</span>\r\n    </label>\r\n  </div>\r\n</div>", styles: [".fv-radio-group-container{margin-bottom:16px}.fv-group-label{display:block;margin-bottom:10px;font-size:14px;font-weight:500;color:var(--fv-text-primary, #333333)}.fv-required-asterisk{color:var(--fv-error-color, #dc3545);margin-left:4px;font-weight:700}.fv-radio-options{display:flex;flex-direction:column;gap:12px}.fv-radio-label{display:flex;align-items:center;cursor:pointer;-webkit-user-select:none;user-select:none;position:relative;padding-left:32px;min-height:24px}.fv-radio-input{position:absolute;opacity:0;cursor:pointer;height:0;width:0}.fv-radio-custom{position:absolute;left:0;top:0;height:20px;width:20px;background-color:var(--fv-background-default, #ffffff);border:2px solid var(--fv-border-default, #cccccc);border-radius:50%;transition:all .2s}.fv-radio-label:hover .fv-radio-custom{border-color:var(--fv-border-hover, #999999)}.fv-radio-input:checked~.fv-radio-custom{border-color:var(--fv-border-focus, #667eea)}.fv-radio-custom:after{content:\"\";position:absolute;display:none;top:4px;left:4px;width:8px;height:8px;border-radius:50%;background:var(--fv-border-focus, #667eea)}.fv-radio-input:checked~.fv-radio-custom:after{display:block}.fv-radio-disabled{opacity:.6;cursor:not-allowed}.fv-radio-disabled .fv-radio-custom{background-color:var(--fv-background-disabled, #f5f5f5)}.fv-radio-text{font-size:14px;color:var(--fv-text-primary, #333333)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: ReactiveFormsModule }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: FvRadioGroupComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'fv-radio-group', standalone: true, imports: [CommonModule, ReactiveFormsModule], template: "<div class=\"fv-radio-group-container\">\r\n  <label *ngIf=\"label\" class=\"fv-group-label\">\r\n    {{ label }}\r\n    <span *ngIf=\"required\" class=\"fv-required-asterisk\">*</span>\r\n  </label>\r\n  \r\n  <div class=\"fv-radio-options\">\r\n    <label \r\n      *ngFor=\"let option of options\" \r\n      class=\"fv-radio-label\"\r\n      [class.fv-radio-disabled]=\"disabled || option.disabled\">\r\n      <input\r\n        type=\"radio\"\r\n        [name]=\"name\"\r\n        [value]=\"option.value\"\r\n        [checked]=\"isSelected(option.value)\"\r\n        [disabled]=\"disabled || option.disabled\"\r\n        (change)=\"onChange(option.value)\"\r\n        class=\"fv-radio-input\"\r\n      />\r\n      <span class=\"fv-radio-custom\"></span>\r\n      <span class=\"fv-radio-text\">{{ option.label }}</span>\r\n    </label>\r\n  </div>\r\n</div>", styles: [".fv-radio-group-container{margin-bottom:16px}.fv-group-label{display:block;margin-bottom:10px;font-size:14px;font-weight:500;color:var(--fv-text-primary, #333333)}.fv-required-asterisk{color:var(--fv-error-color, #dc3545);margin-left:4px;font-weight:700}.fv-radio-options{display:flex;flex-direction:column;gap:12px}.fv-radio-label{display:flex;align-items:center;cursor:pointer;-webkit-user-select:none;user-select:none;position:relative;padding-left:32px;min-height:24px}.fv-radio-input{position:absolute;opacity:0;cursor:pointer;height:0;width:0}.fv-radio-custom{position:absolute;left:0;top:0;height:20px;width:20px;background-color:var(--fv-background-default, #ffffff);border:2px solid var(--fv-border-default, #cccccc);border-radius:50%;transition:all .2s}.fv-radio-label:hover .fv-radio-custom{border-color:var(--fv-border-hover, #999999)}.fv-radio-input:checked~.fv-radio-custom{border-color:var(--fv-border-focus, #667eea)}.fv-radio-custom:after{content:\"\";position:absolute;display:none;top:4px;left:4px;width:8px;height:8px;border-radius:50%;background:var(--fv-border-focus, #667eea)}.fv-radio-input:checked~.fv-radio-custom:after{display:block}.fv-radio-disabled{opacity:.6;cursor:not-allowed}.fv-radio-disabled .fv-radio-custom{background-color:var(--fv-background-disabled, #f5f5f5)}.fv-radio-text{font-size:14px;color:var(--fv-text-primary, #333333)}\n"] }]
+        }], propDecorators: { label: [{
+                type: Input
+            }], control: [{
+                type: Input
+            }], options: [{
+                type: Input
+            }], disabled: [{
+                type: Input
+            }], required: [{
+                type: Input
+            }], name: [{
+                type: Input
+            }], valueChange: [{
+                type: Output
+            }] } });
+
+class FvDropdownComponent {
+    label = '';
+    placeholder = 'Select an option';
+    options = [];
+    schema;
+    control;
+    disabled = false;
+    valueChange = new EventEmitter();
+    blur = new EventEmitter();
+    focus = new EventEmitter();
+    errorMessage = null;
+    isOpen = false;
+    subscription;
+    ngOnInit() {
+        if (!this.control) {
+            console.error('FvDropdown: control is required');
+            return;
+        }
+        if (!this.schema) {
+            console.warn('FvDropdown: schema is not provided, validation will be skipped');
+            return;
+        }
+        // Subscribe to value changes
+        this.subscription = this.control.valueChanges.subscribe((value) => {
+            this.validateValue(value);
+            this.valueChange.emit(value);
+        });
+        // Validate initial value
+        if (this.control.value) {
+            this.validateValue(this.control.value);
+        }
+    }
+    ngOnDestroy() {
+        this.subscription?.unsubscribe();
+    }
+    validateValue(value) {
+        if (!this.schema)
+            return;
+        const result = Validator.validate(value, this.schema);
+        this.errorMessage = result.errorKey;
+        if (!result.isValid && result.errorKey) {
+            this.control.setErrors({ [result.errorKey]: true });
+        }
+        else {
+            this.control.setErrors(null);
+        }
+    }
+    toggleDropdown() {
+        if (!this.disabled) {
+            this.isOpen = !this.isOpen;
+            if (this.isOpen) {
+                this.focus.emit();
+            }
+        }
+    }
+    selectOption(option) {
+        this.control.setValue(option.value);
+        this.isOpen = false;
+        this.blur.emit();
+    }
+    onBlur() {
+        // Close dropdown after a small delay to allow click events to fire
+        setTimeout(() => {
+            this.isOpen = false;
+            if (this.control && this.schema) {
+                this.validateValue(this.control.value);
+            }
+            this.blur.emit();
+        }, 200);
+    }
+    isRequired() {
+        return (this.schema?.rules?.some((r) => r.name === 'required' && r.params?.['enabled']) || false);
+    }
+    getErrorMessage() {
+        if (!this.errorMessage)
+            return '';
+        const errorMessages = {
+            ERR_REQUIRED: 'This field is required',
+            ERR_INVALID_VALUE: 'Invalid selection',
+        };
+        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;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: FvDropdownComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: FvDropdownComponent, isStandalone: true, selector: "fv-dropdown", inputs: { label: "label", placeholder: "placeholder", options: "options", schema: "schema", control: "control", disabled: "disabled" }, outputs: { valueChange: "valueChange", blur: "blur", focus: "focus" }, ngImport: i0, template: "<div class=\"fv-dropdown-container\">\r\n    <label *ngIf=\"label\" class=\"fv-dropdown-label\">\r\n        {{ label }}\r\n        <span *ngIf=\"isRequired()\" class=\"required-asterisk\">*</span>\r\n    </label>\r\n\r\n    <div class=\"fv-dropdown-wrapper\">\r\n        <div class=\"fv-dropdown\" [class.fv-dropdown-error]=\"errorMessage\" [class.fv-dropdown-disabled]=\"disabled\"\r\n            [class.fv-dropdown-open]=\"isOpen\" (click)=\"toggleDropdown()\" (blur)=\"onBlur()\" tabindex=\"0\">\r\n            <span class=\"fv-dropdown-selected\" [class.fv-dropdown-placeholder]=\"!control.value\">\r\n                {{ getSelectedLabel() }}\r\n            </span>\r\n            <span class=\"fv-dropdown-arrow\" [class.arrow-up]=\"isOpen\">\u25BC</span>\r\n        </div>\r\n\r\n        <div *ngIf=\"isOpen\" class=\"fv-dropdown-options\">\r\n            <div *ngFor=\"let option of options\" class=\"fv-dropdown-option\"\r\n                [class.fv-dropdown-option-selected]=\"isSelected(option)\" (click)=\"selectOption(option)\">\r\n                {{ option.label }}\r\n            </div>\r\n        </div>\r\n    </div>\r\n\r\n    <div *ngIf=\"errorMessage\" class=\"fv-dropdown-error-message\">\r\n        \u26A0 {{ getErrorMessage() }}\r\n    </div>\r\n</div>", styles: [".fv-dropdown-container{display:flex;flex-direction:column;margin-bottom:16px;width:100%}.fv-dropdown-label{font-size:14px;font-weight:500;color:#333;margin-bottom:6px;display:block}.required-asterisk{color:#dc3545;font-weight:700}.fv-dropdown-wrapper{position:relative}.fv-dropdown{padding:10px;border:1px solid #cccccc;border-radius:4px;background-color:#fff;cursor:pointer;display:flex;justify-content:space-between;align-items:center;transition:border-color .2s;outline:none}.fv-dropdown:hover:not(.fv-dropdown-disabled){border-color:#007bff}.fv-dropdown:focus:not(.fv-dropdown-disabled){border-color:#007bff;box-shadow:0 0 0 2px #007bff1a}.fv-dropdown-error{border-color:#dc3545!important}.fv-dropdown-disabled{background-color:#f5f5f5;opacity:.6;cursor:not-allowed}.fv-dropdown-open{border-color:#007bff}.fv-dropdown-selected{font-size:14px;color:#333;flex:1}.fv-dropdown-placeholder{color:#999}.fv-dropdown-arrow{font-size:10px;color:#666;margin-left:8px;transition:transform .2s}.arrow-up{transform:rotate(180deg)}.fv-dropdown-options{position:absolute;top:100%;left:0;right:0;margin-top:4px;background-color:#fff;border:1px solid #cccccc;border-radius:4px;max-height:300px;overflow-y:auto;z-index:1000;box-shadow:0 4px 6px #0000001a}.fv-dropdown-option{padding:12px 16px;font-size:14px;color:#333;cursor:pointer;transition:background-color .2s;border-bottom:1px solid #eeeeee}.fv-dropdown-option:last-child{border-bottom:none}.fv-dropdown-option:hover{background-color:#f8f9fa}.fv-dropdown-option-selected{background-color:#e7f3ff;color:#007bff;font-weight:600}.fv-dropdown-error-message{margin-top:4px;font-size:12px;color:#dc3545}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: ReactiveFormsModule }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: FvDropdownComponent, decorators: [{
+            type: Component,
+            args: [{ standalone: true, imports: [CommonModule, ReactiveFormsModule], selector: 'fv-dropdown', template: "<div class=\"fv-dropdown-container\">\r\n    <label *ngIf=\"label\" class=\"fv-dropdown-label\">\r\n        {{ label }}\r\n        <span *ngIf=\"isRequired()\" class=\"required-asterisk\">*</span>\r\n    </label>\r\n\r\n    <div class=\"fv-dropdown-wrapper\">\r\n        <div class=\"fv-dropdown\" [class.fv-dropdown-error]=\"errorMessage\" [class.fv-dropdown-disabled]=\"disabled\"\r\n            [class.fv-dropdown-open]=\"isOpen\" (click)=\"toggleDropdown()\" (blur)=\"onBlur()\" tabindex=\"0\">\r\n            <span class=\"fv-dropdown-selected\" [class.fv-dropdown-placeholder]=\"!control.value\">\r\n                {{ getSelectedLabel() }}\r\n            </span>\r\n            <span class=\"fv-dropdown-arrow\" [class.arrow-up]=\"isOpen\">\u25BC</span>\r\n        </div>\r\n\r\n        <div *ngIf=\"isOpen\" class=\"fv-dropdown-options\">\r\n            <div *ngFor=\"let option of options\" class=\"fv-dropdown-option\"\r\n                [class.fv-dropdown-option-selected]=\"isSelected(option)\" (click)=\"selectOption(option)\">\r\n                {{ option.label }}\r\n            </div>\r\n        </div>\r\n    </div>\r\n\r\n    <div *ngIf=\"errorMessage\" class=\"fv-dropdown-error-message\">\r\n        \u26A0 {{ getErrorMessage() }}\r\n    </div>\r\n</div>", styles: [".fv-dropdown-container{display:flex;flex-direction:column;margin-bottom:16px;width:100%}.fv-dropdown-label{font-size:14px;font-weight:500;color:#333;margin-bottom:6px;display:block}.required-asterisk{color:#dc3545;font-weight:700}.fv-dropdown-wrapper{position:relative}.fv-dropdown{padding:10px;border:1px solid #cccccc;border-radius:4px;background-color:#fff;cursor:pointer;display:flex;justify-content:space-between;align-items:center;transition:border-color .2s;outline:none}.fv-dropdown:hover:not(.fv-dropdown-disabled){border-color:#007bff}.fv-dropdown:focus:not(.fv-dropdown-disabled){border-color:#007bff;box-shadow:0 0 0 2px #007bff1a}.fv-dropdown-error{border-color:#dc3545!important}.fv-dropdown-disabled{background-color:#f5f5f5;opacity:.6;cursor:not-allowed}.fv-dropdown-open{border-color:#007bff}.fv-dropdown-selected{font-size:14px;color:#333;flex:1}.fv-dropdown-placeholder{color:#999}.fv-dropdown-arrow{font-size:10px;color:#666;margin-left:8px;transition:transform .2s}.arrow-up{transform:rotate(180deg)}.fv-dropdown-options{position:absolute;top:100%;left:0;right:0;margin-top:4px;background-color:#fff;border:1px solid #cccccc;border-radius:4px;max-height:300px;overflow-y:auto;z-index:1000;box-shadow:0 4px 6px #0000001a}.fv-dropdown-option{padding:12px 16px;font-size:14px;color:#333;cursor:pointer;transition:background-color .2s;border-bottom:1px solid #eeeeee}.fv-dropdown-option:last-child{border-bottom:none}.fv-dropdown-option:hover{background-color:#f8f9fa}.fv-dropdown-option-selected{background-color:#e7f3ff;color:#007bff;font-weight:600}.fv-dropdown-error-message{margin-top:4px;font-size:12px;color:#dc3545}\n"] }]
+        }], propDecorators: { label: [{
+                type: Input
+            }], placeholder: [{
+                type: Input
+            }], options: [{
+                type: Input
+            }], schema: [{
+                type: Input
+            }], control: [{
+                type: Input
+            }], disabled: [{
+                type: Input
+            }], valueChange: [{
+                type: Output
+            }], blur: [{
+                type: Output
+            }], focus: [{
+                type: Output
+            }] } });
+
+class FvFileSelectorComponent {
+    label = '';
+    placeholder = 'Select a file';
+    schema;
+    control;
+    disabled = false;
+    accept = '*/*'; // MIME types, e.g., 'application/pdf,image/*'
+    maxSize; // Maximum file size in bytes
+    valueChange = new EventEmitter();
+    blur = new EventEmitter();
+    fileInput;
+    errorMessage = null;
+    selectedFile = null;
+    subscription;
+    ngOnInit() {
+        if (!this.control) {
+            console.error('FvFileSelector: control is required');
+            return;
+        }
+        if (!this.schema) {
+            console.warn('FvFileSelector: schema is not provided, validation will be skipped');
+            return;
+        }
+        // Subscribe to value changes
+        this.subscription = this.control.valueChanges.subscribe((value) => {
+            this.validateValue(value);
+            this.valueChange.emit(value);
+        });
+        // Validate initial value
+        if (this.control.value) {
+            this.selectedFile = this.control.value;
+            this.validateValue(this.control.value);
+        }
+    }
+    ngOnDestroy() {
+        this.subscription?.unsubscribe();
+    }
+    validateValue(value) {
+        if (!this.schema)
+            return;
+        const result = Validator.validate(value, this.schema);
+        this.errorMessage = result.errorKey;
+        if (!result.isValid && result.errorKey) {
+            this.control.setErrors({ [result.errorKey]: true });
+        }
+        else {
+            this.control.setErrors(null);
+        }
+    }
+    onFileSelected(event) {
+        const input = event.target;
+        if (input.files && input.files.length > 0) {
+            const file = input.files[0];
+            // Check file size if maxSize is specified
+            if (this.maxSize && file.size > this.maxSize) {
+                alert(`File size exceeds the maximum allowed size of ${this.formatFileSize(this.maxSize)}`);
+                // Reset the input
+                input.value = '';
+                return;
+            }
+            const fileInfo = {
+                file: file,
+                name: file.name,
+                size: file.size,
+                type: file.type,
+            };
+            this.selectedFile = fileInfo;
+            this.control.setValue(fileInfo);
+            this.blur.emit();
+        }
+    }
+    openFileDialog() {
+        if (!this.disabled) {
+            this.fileInput.nativeElement.click();
+        }
+    }
+    removeFile() {
+        this.selectedFile = null;
+        this.control.setValue(null);
+        if (this.fileInput) {
+            this.fileInput.nativeElement.value = '';
+        }
+        this.blur.emit();
+    }
+    formatFileSize(bytes) {
+        if (bytes === 0)
+            return '0 Bytes';
+        const k = 1024;
+        const sizes = ['Bytes', 'KB', 'MB', 'GB'];
+        const i = Math.floor(Math.log(bytes) / Math.log(k));
+        return Math.round((bytes / Math.pow(k, i)) * 100) / 100 + ' ' + sizes[i];
+    }
+    isRequired() {
+        return (this.schema?.rules?.some((r) => r.name === 'required' && r.params?.['enabled']) || false);
+    }
+    getErrorMessage() {
+        if (!this.errorMessage)
+            return '';
+        const errorMessages = {
+            ERR_REQUIRED: 'This field is required',
+            ERR_INVALID_FILE: 'Invalid file',
+        };
+        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 }], ngImport: i0, template: "<div class=\"fv-file-selector-container\">\r\n    <label *ngIf=\"label\" class=\"fv-file-selector-label\">\r\n        {{ label }}\r\n        <span *ngIf=\"isRequired()\" class=\"required-asterisk\">*</span>\r\n    </label>\r\n\r\n    <input #fileInput type=\"file\" [accept]=\"accept\" (change)=\"onFileSelected($event)\" style=\"display: none\" />\r\n\r\n    <button type=\"button\" class=\"fv-file-selector-button\" [class.fv-file-selector-button-error]=\"errorMessage\"\r\n        [class.fv-file-selector-button-disabled]=\"disabled\" (click)=\"openFileDialog()\" [disabled]=\"disabled\">\r\n        {{ placeholder }}\r\n    </button>\r\n\r\n    <div *ngIf=\"selectedFile\" class=\"fv-file-info\">\r\n        <div class=\"fv-file-details\">\r\n            <div class=\"fv-file-name\">\uD83D\uDCC4 {{ selectedFile.name }}</div>\r\n            <div class=\"fv-file-size\">{{ formatFileSize(selectedFile.size) }}</div>\r\n        </div>\r\n        <button type=\"button\" class=\"fv-file-remove\" (click)=\"removeFile()\" [disabled]=\"disabled\">\r\n            \u2715\r\n        </button>\r\n    </div>\r\n\r\n    <div *ngIf=\"errorMessage\" class=\"fv-file-selector-error-message\">\r\n        \u26A0 {{ getErrorMessage() }}\r\n    </div>\r\n</div>", styles: [".fv-file-selector-container{display:flex;flex-direction:column;margin-bottom:16px;width:100%}.fv-file-selector-label{font-size:14px;font-weight:500;color:#333;margin-bottom:6px;display:block}.required-asterisk{color:#dc3545;font-weight:700}.fv-file-selector-button{padding:10px;border:1px solid #007bff;border-radius:4px;background-color:#007bff;color:#fff;font-size:14px;font-weight:500;cursor:pointer;transition:background-color .2s,border-color .2s;text-align:center}.fv-file-selector-button:hover:not(:disabled){background-color:#0056b3;border-color:#0056b3}.fv-file-selector-button-error{border-color:#dc3545;background-color:#dc3545}.fv-file-selector-button-error:hover:not(:disabled){background-color:#c82333;border-color:#c82333}.fv-file-selector-button-disabled{background-color:#ccc;border-color:#ccc;opacity:.6;cursor:not-allowed}.fv-file-info{display:flex;align-items:center;margin-top:8px;padding:10px;background-color:#f8f9fa;border:1px solid #dee2e6;border-radius:4px}.fv-file-details{flex:1}.fv-file-name{font-size:14px;color:#333;margin-bottom:4px;word-break:break-all}.fv-file-size{font-size:12px;color:#6c757d}.fv-file-remove{padding:4px 8px;margin-left:8px;background:none;border:none;font-size:18px;color:#dc3545;font-weight:700;cursor:pointer;transition:color .2s}.fv-file-remove:hover:not(:disabled){color:#c82333}.fv-file-remove:disabled{opacity:.5;cursor:not-allowed}.fv-file-selector-error-message{margin-top:4px;font-size:12px;color:#dc3545}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: ReactiveFormsModule }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: FvFileSelectorComponent, decorators: [{
+            type: Component,
+            args: [{ standalone: true, imports: [CommonModule, ReactiveFormsModule], selector: 'fv-file-selector', template: "<div class=\"fv-file-selector-container\">\r\n    <label *ngIf=\"label\" class=\"fv-file-selector-label\">\r\n        {{ label }}\r\n        <span *ngIf=\"isRequired()\" class=\"required-asterisk\">*</span>\r\n    </label>\r\n\r\n    <input #fileInput type=\"file\" [accept]=\"accept\" (change)=\"onFileSelected($event)\" style=\"display: none\" />\r\n\r\n    <button type=\"button\" class=\"fv-file-selector-button\" [class.fv-file-selector-button-error]=\"errorMessage\"\r\n        [class.fv-file-selector-button-disabled]=\"disabled\" (click)=\"openFileDialog()\" [disabled]=\"disabled\">\r\n        {{ placeholder }}\r\n    </button>\r\n\r\n    <div *ngIf=\"selectedFile\" class=\"fv-file-info\">\r\n        <div class=\"fv-file-details\">\r\n            <div class=\"fv-file-name\">\uD83D\uDCC4 {{ selectedFile.name }}</div>\r\n            <div class=\"fv-file-size\">{{ formatFileSize(selectedFile.size) }}</div>\r\n        </div>\r\n        <button type=\"button\" class=\"fv-file-remove\" (click)=\"removeFile()\" [disabled]=\"disabled\">\r\n            \u2715\r\n        </button>\r\n    </div>\r\n\r\n    <div *ngIf=\"errorMessage\" class=\"fv-file-selector-error-message\">\r\n        \u26A0 {{ getErrorMessage() }}\r\n    </div>\r\n</div>", styles: [".fv-file-selector-container{display:flex;flex-direction:column;margin-bottom:16px;width:100%}.fv-file-selector-label{font-size:14px;font-weight:500;color:#333;margin-bottom:6px;display:block}.required-asterisk{color:#dc3545;font-weight:700}.fv-file-selector-button{padding:10px;border:1px solid #007bff;border-radius:4px;background-color:#007bff;color:#fff;font-size:14px;font-weight:500;cursor:pointer;transition:background-color .2s,border-color .2s;text-align:center}.fv-file-selector-button:hover:not(:disabled){background-color:#0056b3;border-color:#0056b3}.fv-file-selector-button-error{border-color:#dc3545;background-color:#dc3545}.fv-file-selector-button-error:hover:not(:disabled){background-color:#c82333;border-color:#c82333}.fv-file-selector-button-disabled{background-color:#ccc;border-color:#ccc;opacity:.6;cursor:not-allowed}.fv-file-info{display:flex;align-items:center;margin-top:8px;padding:10px;background-color:#f8f9fa;border:1px solid #dee2e6;border-radius:4px}.fv-file-details{flex:1}.fv-file-name{font-size:14px;color:#333;margin-bottom:4px;word-break:break-all}.fv-file-size{font-size:12px;color:#6c757d}.fv-file-remove{padding:4px 8px;margin-left:8px;background:none;border:none;font-size:18px;color:#dc3545;font-weight:700;cursor:pointer;transition:color .2s}.fv-file-remove:hover:not(:disabled){color:#c82333}.fv-file-remove:disabled{opacity:.5;cursor:not-allowed}.fv-file-selector-error-message{margin-top:4px;font-size:12px;color:#dc3545}\n"] }]
+        }], propDecorators: { label: [{
+                type: Input
+            }], placeholder: [{
+                type: Input
+            }], schema: [{
+                type: Input
+            }], control: [{
+                type: Input
+            }], disabled: [{
+                type: Input
+            }], accept: [{
+                type: Input
+            }], maxSize: [{
+                type: Input
+            }], valueChange: [{
+                type: Output
+            }], blur: [{
+                type: Output
+            }], fileInput: [{
+                type: ViewChild,
+                args: ['fileInput']
+            }] } });
+
+class FvImageSelectorComponent {
+    sanitizer;
+    label = '';
+    placeholder = 'Select an image';
+    schema;
+    control;
+    disabled = false;
+    maxSize; // Maximum file size in bytes
+    valueChange = new EventEmitter();
+    blur = new EventEmitter();
+    imageInput;
+    errorMessage = null;
+    selectedImage = null;
+    subscription;
+    constructor(sanitizer) {
+        this.sanitizer = sanitizer;
+    }
+    ngOnInit() {
+        if (!this.control) {
+            console.error('FvImageSelector: control is required');
+            return;
+        }
+        if (!this.schema) {
+            console.warn('FvImageSelector: schema is not provided, validation will be skipped');
+            return;
+        }
+        // Subscribe to value changes
+        this.subscription = this.control.valueChanges.subscribe((value) => {
+            this.validateValue(value);
+            this.valueChange.emit(value);
+        });
+        // Validate initial value
+        if (this.control.value) {
+            this.selectedImage = this.control.value;
+            this.validateValue(this.control.value);
+        }
+    }
+    ngOnDestroy() {
+        this.subscription?.unsubscribe();
+    }
+    validateValue(value) {
+        if (!this.schema)
+            return;
+        const result = Validator.validate(value, this.schema);
+        this.errorMessage = result.errorKey;
+        if (!result.isValid && result.errorKey) {
+            this.control.setErrors({ [result.errorKey]: true });
+        }
+        else {
+            this.control.setErrors(null);
+        }
+    }
+    onImageSelected(event) {
+        const input = event.target;
+        if (input.files && input.files.length > 0) {
+            const file = input.files[0];
+            // Validate that it's an image
+            if (!file.type.startsWith('image/')) {
+                alert('Please select an image file');
+                input.value = '';
+                return;
+            }
+            // Check file size if maxSize is specified
+            if (this.maxSize && file.size > this.maxSize) {
+                alert(`Image size exceeds the maximum allowed size of ${this.formatFileSize(this.maxSize)}`);
+                input.value = '';
+                return;
+            }
+            // Create object URL and get image dimensions
+            const reader = new FileReader();
+            reader.onload = (e) => {
+                const img = new Image();
+                img.onload = () => {
+                    const imageInfo = {
+                        file: file,
+                        url: this.sanitizer.bypassSecurityTrustUrl(e.target.result),
+                        width: img.width,
+                        height: img.height,
+                        size: file.size,
+                    };
+                    this.selectedImage = imageInfo;
+                    this.control.setValue(imageInfo);
+                    this.blur.emit();
+                };
+                img.src = e.target.result;
+            };
+            reader.readAsDataURL(file);
+        }
+    }
+    openImageDialog() {
+        if (!this.disabled) {
+            this.imageInput.nativeElement.click();
+        }
+    }
+    removeImage() {
+        this.selectedImage = null;
+        this.control.setValue(null);
+        if (this.imageInput) {
+            this.imageInput.nativeElement.value = '';
+        }
+        this.blur.emit();
+    }
+    formatFileSize(bytes) {
+        if (bytes === 0)
+            return '0 Bytes';
+        const k = 1024;
+        const sizes = ['Bytes', 'KB', 'MB', 'GB'];
+        const i = Math.floor(Math.log(bytes) / Math.log(k));
+        return Math.round((bytes / Math.pow(k, i)) * 100) / 100 + ' ' + sizes[i];
+    }
+    isRequired() {
+        return (this.schema?.rules?.some((r) => r.name === 'required' && r.params?.['enabled']) || false);
+    }
+    getErrorMessage() {
+        if (!this.errorMessage)
+            return '';
+        const errorMessages = {
+            ERR_REQUIRED: 'This field is required',
+            ERR_INVALID_IMAGE: 'Invalid image',
+        };
+        return errorMessages[this.errorMessage] || this.errorMessage;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: FvImageSelectorComponent, deps: [{ token: i1$1.DomSanitizer }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: FvImageSelectorComponent, isStandalone: true, selector: "fv-image-selector", inputs: { label: "label", placeholder: "placeholder", schema: "schema", control: "control", disabled: "disabled", maxSize: "maxSize" }, outputs: { valueChange: "valueChange", blur: "blur" }, viewQueries: [{ propertyName: "imageInput", first: true, predicate: ["imageInput"], descendants: true }], ngImport: i0, template: "<div class=\"fv-image-selector-container\">\r\n    <label *ngIf=\"label\" class=\"fv-image-selector-label\">\r\n        {{ label }}\r\n        <span *ngIf=\"isRequired()\" class=\"required-asterisk\">*</span>\r\n    </label>\r\n\r\n    <input #imageInput type=\"file\" accept=\"image/*\" (change)=\"onImageSelected($event)\" style=\"display: none\" />\r\n\r\n    <div *ngIf=\"!selectedImage; else previewTemplate\">\r\n        <button type=\"button\" class=\"fv-image-selector-button\" [class.fv-image-selector-button-error]=\"errorMessage\"\r\n            [class.fv-image-selector-button-disabled]=\"disabled\" (click)=\"openImageDialog()\" [disabled]=\"disabled\">\r\n            \uD83D\uDCF7 {{ placeholder }}\r\n        </button>\r\n    </div>\r\n\r\n    <ng-template #previewTemplate>\r\n        <div class=\"fv-image-preview-container\">\r\n            <img [src]=\"selectedImage!.url\" class=\"fv-image-preview\" alt=\"Selected image\" />\r\n            <div class=\"fv-image-actions\">\r\n                <button type=\"button\" class=\"fv-image-change-button\" (click)=\"openImageDialog()\" [disabled]=\"disabled\">\r\n                    Change\r\n                </button>\r\n                <button type=\"button\" class=\"fv-image-remove-button\" (click)=\"removeImage()\" [disabled]=\"disabled\">\r\n                    Remove\r\n                </button>\r\n            </div>\r\n            <div class=\"fv-image-info\">\r\n                {{ selectedImage!.width }} \u00D7 {{ selectedImage!.height }} \u2022\r\n                {{ formatFileSize(selectedImage!.size) }}\r\n            </div>\r\n        </div>\r\n    </ng-template>\r\n\r\n    <div *ngIf=\"errorMessage\" class=\"fv-image-selector-error-message\">\r\n        \u26A0 {{ getErrorMessage() }}\r\n    </div>\r\n</div>", styles: [".fv-image-selector-container{display:flex;flex-direction:column;margin-bottom:16px;width:100%}.fv-image-selector-label{font-size:14px;font-weight:500;color:#333;margin-bottom:6px;display:block}.required-asterisk{color:#dc3545;font-weight:700}.fv-image-selector-button{padding:40px;border:2px dashed #007bff;border-radius:8px;background-color:#f8f9fa;color:#007bff;font-size:14px;font-weight:500;cursor:pointer;transition:background-color .2s,border-color .2s;width:100%;text-align:center}.fv-image-selector-button:hover:not(:disabled){background-color:#e7f3ff}.fv-image-selector-button-error{border-color:#dc3545;color:#dc3545}.fv-image-selector-button-disabled{border-color:#ccc;background-color:#f5f5f5;color:#ccc;opacity:.6;cursor:not-allowed}.fv-image-preview-container{display:flex;flex-direction:column;align-items:center}.fv-image-preview{width:100%;max-width:600px;height:200px;object-fit:cover;border-radius:8px;background-color:#f0f0f0;margin-bottom:8px}.fv-image-actions{display:flex;gap:8px;margin-bottom:4px}.fv-image-change-button{padding:8px 16px;background-color:#007bff;color:#fff;border:none;border-radius:4px;font-size:14px;font-weight:500;cursor:pointer;transition:background-color .2s}.fv-image-change-button:hover:not(:disabled){background-color:#0056b3}.fv-image-change-button:disabled{opacity:.6;cursor:not-allowed}.fv-image-remove-button{padding:8px 16px;background-color:#dc3545;color:#fff;border:none;border-radius:4px;font-size:14px;font-weight:500;cursor:pointer;transition:background-color .2s}.fv-image-remove-button:hover:not(:disabled){background-color:#c82333}.fv-image-remove-button:disabled{opacity:.6;cursor:not-allowed}.fv-image-info{font-size:12px;color:#6c757d;text-align:center}.fv-image-selector-error-message{margin-top:4px;font-size:12px;color:#dc3545}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: ReactiveFormsModule }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: FvImageSelectorComponent, decorators: [{
+            type: Component,
+            args: [{ standalone: true, imports: [CommonModule, ReactiveFormsModule], selector: 'fv-image-selector', template: "<div class=\"fv-image-selector-container\">\r\n    <label *ngIf=\"label\" class=\"fv-image-selector-label\">\r\n        {{ label }}\r\n        <span *ngIf=\"isRequired()\" class=\"required-asterisk\">*</span>\r\n    </label>\r\n\r\n    <input #imageInput type=\"file\" accept=\"image/*\" (change)=\"onImageSelected($event)\" style=\"display: none\" />\r\n\r\n    <div *ngIf=\"!selectedImage; else previewTemplate\">\r\n        <button type=\"button\" class=\"fv-image-selector-button\" [class.fv-image-selector-button-error]=\"errorMessage\"\r\n            [class.fv-image-selector-button-disabled]=\"disabled\" (click)=\"openImageDialog()\" [disabled]=\"disabled\">\r\n            \uD83D\uDCF7 {{ placeholder }}\r\n        </button>\r\n    </div>\r\n\r\n    <ng-template #previewTemplate>\r\n        <div class=\"fv-image-preview-container\">\r\n            <img [src]=\"selectedImage!.url\" class=\"fv-image-preview\" alt=\"Selected image\" />\r\n            <div class=\"fv-image-actions\">\r\n                <button type=\"button\" class=\"fv-image-change-button\" (click)=\"openImageDialog()\" [disabled]=\"disabled\">\r\n                    Change\r\n                </button>\r\n                <button type=\"button\" class=\"fv-image-remove-button\" (click)=\"removeImage()\" [disabled]=\"disabled\">\r\n                    Remove\r\n                </button>\r\n            </div>\r\n            <div class=\"fv-image-info\">\r\n                {{ selectedImage!.width }} \u00D7 {{ selectedImage!.height }} \u2022\r\n                {{ formatFileSize(selectedImage!.size) }}\r\n            </div>\r\n        </div>\r\n    </ng-template>\r\n\r\n    <div *ngIf=\"errorMessage\" class=\"fv-image-selector-error-message\">\r\n        \u26A0 {{ getErrorMessage() }}\r\n    </div>\r\n</div>", styles: [".fv-image-selector-container{display:flex;flex-direction:column;margin-bottom:16px;width:100%}.fv-image-selector-label{font-size:14px;font-weight:500;color:#333;margin-bottom:6px;display:block}.required-asterisk{color:#dc3545;font-weight:700}.fv-image-selector-button{padding:40px;border:2px dashed #007bff;border-radius:8px;background-color:#f8f9fa;color:#007bff;font-size:14px;font-weight:500;cursor:pointer;transition:background-color .2s,border-color .2s;width:100%;text-align:center}.fv-image-selector-button:hover:not(:disabled){background-color:#e7f3ff}.fv-image-selector-button-error{border-color:#dc3545;color:#dc3545}.fv-image-selector-button-disabled{border-color:#ccc;background-color:#f5f5f5;color:#ccc;opacity:.6;cursor:not-allowed}.fv-image-preview-container{display:flex;flex-direction:column;align-items:center}.fv-image-preview{width:100%;max-width:600px;height:200px;object-fit:cover;border-radius:8px;background-color:#f0f0f0;margin-bottom:8px}.fv-image-actions{display:flex;gap:8px;margin-bottom:4px}.fv-image-change-button{padding:8px 16px;background-color:#007bff;color:#fff;border:none;border-radius:4px;font-size:14px;font-weight:500;cursor:pointer;transition:background-color .2s}.fv-image-change-button:hover:not(:disabled){background-color:#0056b3}.fv-image-change-button:disabled{opacity:.6;cursor:not-allowed}.fv-image-remove-button{padding:8px 16px;background-color:#dc3545;color:#fff;border:none;border-radius:4px;font-size:14px;font-weight:500;cursor:pointer;transition:background-color .2s}.fv-image-remove-button:hover:not(:disabled){background-color:#c82333}.fv-image-remove-button:disabled{opacity:.6;cursor:not-allowed}.fv-image-info{font-size:12px;color:#6c757d;text-align:center}.fv-image-selector-error-message{margin-top:4px;font-size:12px;color:#dc3545}\n"] }]
+        }], ctorParameters: () => [{ type: i1$1.DomSanitizer }], propDecorators: { label: [{
+                type: Input
+            }], placeholder: [{
+                type: Input
+            }], schema: [{
+                type: Input
+            }], control: [{
+                type: Input
+            }], disabled: [{
+                type: Input
+            }], maxSize: [{
+                type: Input
+            }], valueChange: [{
+                type: Output
+            }], blur: [{
+                type: Output
+            }], imageInput: [{
+                type: ViewChild,
+                args: ['imageInput']
+            }] } });
+
+class FvRichTextEditorComponent {
+    label = '';
+    placeholder = 'Enter text...';
+    schema;
+    control;
+    disabled = false;
+    readonly = false;
+    minHeight = 150;
+    showToolbar = true;
+    valueChange = new EventEmitter();
+    blur = new EventEmitter();
+    focus = new EventEmitter();
+    editorRef;
+    errorMessage = null;
+    isFocused = false;
+    subscription;
+    ngOnInit() {
+        if (!this.control) {
+            console.error('FvRichTextEditor: control is required');
+            return;
+        }
+        if (!this.schema) {
+            console.warn('FvRichTextEditor: schema is not provided, validation will be skipped');
+            return;
+        }
+        // Subscribe to value changes
+        this.subscription = this.control.valueChanges.subscribe((value) => {
+            this.validateValue(value);
+            this.valueChange.emit(value);
+        });
+        // Validate initial value
+        if (this.control.value) {
+            this.validateValue(this.control.value);
+        }
+    }
+    ngOnDestroy() {
+        this.subscription?.unsubscribe();
+    }
+    validateValue(value) {
+        if (!this.schema)
+            return;
+        const result = Validator$1.validate(value, this.schema);
+        this.errorMessage = result.errorKey;
+        if (!result.isValid && result.errorKey) {
+            this.control.setErrors({ [result.errorKey]: true });
+        }
+        else {
+            this.control.setErrors(null);
+        }
+    }
+    onBlur() {
+        this.isFocused = false;
+        if (this.control && this.schema) {
+            this.validateValue(this.control.value);
+        }
+        this.blur.emit();
+    }
+    onFocus() {
+        this.isFocused = true;
+        this.focus.emit();
+    }
+    insertText(before, after = before) {
+        if (this.disabled || this.readonly)
+            return;
+        const textarea = this.editorRef.nativeElement;
+        const start = textarea.selectionStart;
+        const end = textarea.selectionEnd;
+        const text = this.control.value || '';
+        const selectedText = text.substring(start, end);
+        const newText = text.substring(0, start) +
+            before +
+            selectedText +
+            after +
+            text.substring(end);
+        this.control.setValue(newText);
+        // Restore cursor position
+        setTimeout(() => {
+            const newPosition = start + before.length + selectedText.length;
+            textarea.setSelectionRange(newPosition, newPosition);
+            textarea.focus();
+        });
+    }
+    handleBulletList() {
+        if (this.disabled || this.readonly)
+            return;
+        const text = this.control.value || '';
+        const lines = text.split('\n');
+        const bulletedLines = lines.map((line) => line.trim() ? `• ${line}` : line);
+        this.control.setValue(bulletedLines.join('\n'));
+    }
+    handleNumberedList() {
+        if (this.disabled || this.readonly)
+            return;
+        const text = this.control.value || '';
+        const lines = text.split('\n').filter((line) => line.trim());
+        const numberedLines = lines.map((line, index) => `${index + 1}. ${line}`);
+        this.control.setValue(numberedLines.join('\n'));
+    }
+    handleClear() {
+        if (this.disabled || this.readonly)
+            return;
+        this.control.setValue('');
+    }
+    isRequired() {
+        return (this.schema?.rules?.some((r) => r.name === 'required' && r.params?.['enabled']) || false);
+    }
+    getErrorMessage() {
+        if (!this.errorMessage)
+            return '';
+        const errorMessages = {
+            ERR_REQUIRED: 'This field is required',
+            ERR_MIN_LENGTH: 'Text is too short',
+            ERR_MAX_LENGTH: 'Text is too long',
+        };
+        return errorMessages[this.errorMessage] || this.errorMessage;
+    }
+    getCharacterCount() {
+        return this.control?.value?.length || 0;
+    }
+    getWordCount() {
+        const text = this.control?.value || '';
+        return text.trim() ? text.trim().split(/\s+/).length : 0;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: FvRichTextEditorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: FvRichTextEditorComponent, isStandalone: true, selector: "fv-rich-text-editor", inputs: { label: "label", placeholder: "placeholder", schema: "schema", control: "control", disabled: "disabled", readonly: "readonly", minHeight: "minHeight", showToolbar: "showToolbar" }, outputs: { valueChange: "valueChange", blur: "blur", focus: "focus" }, viewQueries: [{ propertyName: "editorRef", first: true, predicate: ["editor"], descendants: true }], ngImport: i0, template: "<div class=\"fv-rich-text-editor-container\">\r\n    <label *ngIf=\"label\" class=\"fv-rich-text-editor-label\">\r\n        {{ label }}\r\n        <span *ngIf=\"isRequired()\" class=\"required-asterisk\">*</span>\r\n    </label>\r\n\r\n    <div *ngIf=\"showToolbar && !disabled && !readonly\" class=\"fv-rich-text-toolbar\">\r\n        <button type=\"button\" class=\"fv-toolbar-button\" (click)=\"insertText('**', '**')\" title=\"Bold\">\r\n            <strong>B</strong>\r\n        </button>\r\n\r\n        <button type=\"button\" class=\"fv-toolbar-button\" (click)=\"insertText('*', '*')\" title=\"Italic\">\r\n            <em>I</em>\r\n        </button>\r\n\r\n        <button type=\"button\" class=\"fv-toolbar-button\" (click)=\"insertText('__', '__')\" title=\"Underline\">\r\n            <u>U</u>\r\n        </button>\r\n\r\n        <button type=\"button\" class=\"fv-toolbar-button\" (click)=\"insertText('~~', '~~')\" title=\"Strikethrough\">\r\n            <s>S</s>\r\n        </button>\r\n\r\n        <div class=\"fv-toolbar-divider\"></div>\r\n\r\n        <button type=\"button\" class=\"fv-toolbar-button\" (click)=\"handleBulletList()\" title=\"Bullet List\">\r\n            \u2022 List\r\n        </button>\r\n\r\n        <button type=\"button\" class=\"fv-toolbar-button\" (click)=\"handleNumberedList()\" title=\"Numbered List\">\r\n            1. List\r\n        </button>\r\n\r\n        <div class=\"fv-toolbar-divider\"></div>\r\n\r\n        <button type=\"button\" class=\"fv-toolbar-button fv-toolbar-button-danger\" (click)=\"handleClear()\" title=\"Clear\">\r\n            Clear\r\n        </button>\r\n    </div>\r\n\r\n    <textarea #editor class=\"fv-rich-text-editor\" [class.fv-rich-text-editor-error]=\"errorMessage\"\r\n        [class.fv-rich-text-editor-disabled]=\"disabled\" [class.fv-rich-text-editor-focused]=\"isFocused\"\r\n        [formControl]=\"control\" [placeholder]=\"placeholder\" [readonly]=\"readonly\" [disabled]=\"disabled\"\r\n        [style.min-height.px]=\"minHeight\" (blur)=\"onBlur()\" (focus)=\"onFocus()\"></textarea>\r\n\r\n    <div class=\"fv-rich-text-footer\">\r\n        <div class=\"fv-rich-text-stats\">\r\n            {{ getCharacterCount() }} characters \u2022 {{ getWordCount() }} words\r\n        </div>\r\n    </div>\r\n\r\n    <div *ngIf=\"errorMessage\" class=\"fv-rich-text-editor-error-message\">\r\n        \u26A0 {{ getErrorMessage() }}\r\n    </div>\r\n</div>", styles: [".fv-rich-text-editor-container{display:flex;flex-direction:column;margin-bottom:16px;width:100%}.fv-rich-text-editor-label{font-size:14px;font-weight:500;color:#333;margin-bottom:6px;display:block}.required-asterisk{color:#dc3545;font-weight:700}.fv-rich-text-toolbar{display:flex;align-items:center;gap:4px;padding:4px;margin-bottom:8px;border:1px solid #dee2e6;border-radius:4px;background-color:#f8f9fa;flex-wrap:wrap}.fv-toolbar-button{padding:6px 10px;background-color:#fff;border:1px solid #dee2e6;border-radius:4px;font-size:14px;font-weight:500;color:#333;cursor:pointer;transition:background-color .2s,border-color .2s}.fv-toolbar-button:hover{background-color:#e7f3ff;border-color:#007bff}.fv-toolbar-button-danger{color:#dc3545}.fv-toolbar-button-danger:hover{background-color:#ffe0e0;border-color:#dc3545}.fv-toolbar-divider{width:1px;height:24px;background-color:#dee2e6;margin:0 4px}.fv-rich-text-editor{padding:10px;border:1px solid #cccccc;border-radius:4px;font-size:14px;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;background-color:#fff;color:#333;resize:vertical;transition:border-color .2s,box-shadow .2s;outline:none}.fv-rich-text-editor::placeholder{color:#999}.fv-rich-text-editor:focus:not(:disabled):not([readonly]){border-color:#007bff;box-shadow:0 0 0 2px #007bff1a}.fv-rich-text-editor-error{border-color:#dc3545}.fv-rich-text-editor-disabled,.fv-rich-text-editor[readonly]{background-color:#f5f5f5;opacity:.6;cursor:not-allowed}.fv-rich-text-editor-focused{border-color:#007bff;border-width:2px;padding:9px}.fv-rich-text-footer{display:flex;justify-content:flex-end;margin-top:4px}.fv-rich-text-stats{font-size:12px;color:#6c757d}.fv-rich-text-editor-error-message{margin-top:4px;font-size:12px;color:#dc3545}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: FvRichTextEditorComponent, decorators: [{
+            type: Component,
+            args: [{ standalone: true, imports: [CommonModule, ReactiveFormsModule], selector: 'fv-rich-text-editor', template: "<div class=\"fv-rich-text-editor-container\">\r\n    <label *ngIf=\"label\" class=\"fv-rich-text-editor-label\">\r\n        {{ label }}\r\n        <span *ngIf=\"isRequired()\" class=\"required-asterisk\">*</span>\r\n    </label>\r\n\r\n    <div *ngIf=\"showToolbar && !disabled && !readonly\" class=\"fv-rich-text-toolbar\">\r\n        <button type=\"button\" class=\"fv-toolbar-button\" (click)=\"insertText('**', '**')\" title=\"Bold\">\r\n            <strong>B</strong>\r\n        </button>\r\n\r\n        <button type=\"button\" class=\"fv-toolbar-button\" (click)=\"insertText('*', '*')\" title=\"Italic\">\r\n            <em>I</em>\r\n        </button>\r\n\r\n        <button type=\"button\" class=\"fv-toolbar-button\" (click)=\"insertText('__', '__')\" title=\"Underline\">\r\n            <u>U</u>\r\n        </button>\r\n\r\n        <button type=\"button\" class=\"fv-toolbar-button\" (click)=\"insertText('~~', '~~')\" title=\"Strikethrough\">\r\n            <s>S</s>\r\n        </button>\r\n\r\n        <div class=\"fv-toolbar-divider\"></div>\r\n\r\n        <button type=\"button\" class=\"fv-toolbar-button\" (click)=\"handleBulletList()\" title=\"Bullet List\">\r\n            \u2022 List\r\n        </button>\r\n\r\n        <button type=\"button\" class=\"fv-toolbar-button\" (click)=\"handleNumberedList()\" title=\"Numbered List\">\r\n            1. List\r\n        </button>\r\n\r\n        <div class=\"fv-toolbar-divider\"></div>\r\n\r\n        <button type=\"button\" class=\"fv-toolbar-button fv-toolbar-button-danger\" (click)=\"handleClear()\" title=\"Clear\">\r\n            Clear\r\n        </button>\r\n    </div>\r\n\r\n    <textarea #editor class=\"fv-rich-text-editor\" [class.fv-rich-text-editor-error]=\"errorMessage\"\r\n        [class.fv-rich-text-editor-disabled]=\"disabled\" [class.fv-rich-text-editor-focused]=\"isFocused\"\r\n        [formControl]=\"control\" [placeholder]=\"placeholder\" [readonly]=\"readonly\" [disabled]=\"disabled\"\r\n        [style.min-height.px]=\"minHeight\" (blur)=\"onBlur()\" (focus)=\"onFocus()\"></textarea>\r\n\r\n    <div class=\"fv-rich-text-footer\">\r\n        <div class=\"fv-rich-text-stats\">\r\n            {{ getCharacterCount() }} characters \u2022 {{ getWordCount() }} words\r\n        </div>\r\n    </div>\r\n\r\n    <div *ngIf=\"errorMessage\" class=\"fv-rich-text-editor-error-message\">\r\n        \u26A0 {{ getErrorMessage() }}\r\n    </div>\r\n</div>", styles: [".fv-rich-text-editor-container{display:flex;flex-direction:column;margin-bottom:16px;width:100%}.fv-rich-text-editor-label{font-size:14px;font-weight:500;color:#333;margin-bottom:6px;display:block}.required-asterisk{color:#dc3545;font-weight:700}.fv-rich-text-toolbar{display:flex;align-items:center;gap:4px;padding:4px;margin-bottom:8px;border:1px solid #dee2e6;border-radius:4px;background-color:#f8f9fa;flex-wrap:wrap}.fv-toolbar-button{padding:6px 10px;background-color:#fff;border:1px solid #dee2e6;border-radius:4px;font-size:14px;font-weight:500;color:#333;cursor:pointer;transition:background-color .2s,border-color .2s}.fv-toolbar-button:hover{background-color:#e7f3ff;border-color:#007bff}.fv-toolbar-button-danger{color:#dc3545}.fv-toolbar-button-danger:hover{background-color:#ffe0e0;border-color:#dc3545}.fv-toolbar-divider{width:1px;height:24px;background-color:#dee2e6;margin:0 4px}.fv-rich-text-editor{padding:10px;border:1px solid #cccccc;border-radius:4px;font-size:14px;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;background-color:#fff;color:#333;resize:vertical;transition:border-color .2s,box-shadow .2s;outline:none}.fv-rich-text-editor::placeholder{color:#999}.fv-rich-text-editor:focus:not(:disabled):not([readonly]){border-color:#007bff;box-shadow:0 0 0 2px #007bff1a}.fv-rich-text-editor-error{border-color:#dc3545}.fv-rich-text-editor-disabled,.fv-rich-text-editor[readonly]{background-color:#f5f5f5;opacity:.6;cursor:not-allowed}.fv-rich-text-editor-focused{border-color:#007bff;border-width:2px;padding:9px}.fv-rich-text-footer{display:flex;justify-content:flex-end;margin-top:4px}.fv-rich-text-stats{font-size:12px;color:#6c757d}.fv-rich-text-editor-error-message{margin-top:4px;font-size:12px;color:#dc3545}\n"] }]
+        }], propDecorators: { label: [{
+                type: Input
+            }], placeholder: [{
+                type: Input
+            }], schema: [{
+                type: Input
+            }], control: [{
+                type: Input
+            }], disabled: [{
+                type: Input
+            }], readonly: [{
+                type: Input
+            }], minHeight: [{
+                type: Input
+            }], showToolbar: [{
+                type: Input
+            }], valueChange: [{
+                type: Output
+            }], blur: [{
+                type: Output
+            }], focus: [{
+                type: Output
+            }], editorRef: [{
+                type: ViewChild,
+                args: ['editor']
+            }] } });
+
+class FvControlsModule {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: FvControlsModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.2.14", ngImport: i0, type: FvControlsModule, imports: [CommonModule,
+            ReactiveFormsModule,
+            FvEntryFieldComponent,
+            FvDateFieldComponent,
+            FvMonthYearFieldComponent,
+            FvNumberFieldComponent,
+            FvCheckboxComponent,
+            FvRadioGroupComponent,
+            FvDropdownComponent,
+            FvFileSelectorComponent,
+            FvImageSelectorComponent,
+            FvRichTextEditorComponent], exports: [FvEntryFieldComponent,
+            FvDateFieldComponent,
+            FvMonthYearFieldComponent,
+            FvNumberFieldComponent,
+            FvCheckboxComponent,
+            FvRadioGroupComponent,
+            FvDropdownComponent,
+            FvFileSelectorComponent,
+            FvImageSelectorComponent,
+            FvRichTextEditorComponent] });
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: FvControlsModule, imports: [CommonModule,
+            ReactiveFormsModule,
+            FvEntryFieldComponent,
+            FvDateFieldComponent,
+            FvMonthYearFieldComponent,
+            FvNumberFieldComponent,
+            FvCheckboxComponent,
+            FvRadioGroupComponent,
+            FvDropdownComponent,
+            FvFileSelectorComponent,
+            FvImageSelectorComponent,
+            FvRichTextEditorComponent] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: FvControlsModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [],
+                    imports: [
+                        CommonModule,
+                        ReactiveFormsModule,
+                        FvEntryFieldComponent,
+                        FvDateFieldComponent,
+                        FvMonthYearFieldComponent,
+                        FvNumberFieldComponent,
+                        FvCheckboxComponent,
+                        FvRadioGroupComponent,
+                        FvDropdownComponent,
+                        FvFileSelectorComponent,
+                        FvImageSelectorComponent,
+                        FvRichTextEditorComponent,
+                    ],
+                    exports: [
+                        FvEntryFieldComponent,
+                        FvDateFieldComponent,
+                        FvMonthYearFieldComponent,
+                        FvNumberFieldComponent,
+                        FvCheckboxComponent,
+                        FvRadioGroupComponent,
+                        FvDropdownComponent,
+                        FvFileSelectorComponent,
+                        FvImageSelectorComponent,
+                        FvRichTextEditorComponent,
+                    ],
+                }]
+        }] });
+
+/*
+ * Public API Surface of fv-controls
+ */
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { FvCheckboxComponent, FvControlsModule, FvDateFieldComponent, FvDropdownComponent, FvEntryFieldComponent, FvFileSelectorComponent, FvImageSelectorComponent, FvMonthYearFieldComponent, FvNumberFieldComponent, FvRadioGroupComponent, FvRichTextEditorComponent };
+//# sourceMappingURL=fovestta2-web-angular.mjs.map