superlikers-dynamic-forms 0.4.3 → 1.0.0

package/fesm2022/superlikers-dynamic-forms.mjs

@@ -1,94 +1,204 @@
 import * as i0 from '@angular/core';
-import { InjectionToken, inject, Injector, Pipe, Injectable, HostBinding, Input, ChangeDetectionStrategy, Component, ElementRef, ViewContainerRef, Directive } from '@angular/core';
-import { of, from, tap, distinctUntilChanged, map, merge, fromEvent, iif, EMPTY, startWith } from 'rxjs';
-import * as i2 from '@angular/forms';
-import { NgControl, ControlContainer, ReactiveFormsModule, FormControl, Validators, FormArray, FormGroup } from '@angular/forms';
-import * as i1 from '@angular/common';
-import { KeyValuePipe, CommonModule, AsyncPipe } from '@angular/common';
+import { InjectionToken, Injectable, inject, input, ChangeDetectionStrategy, Component, Injector, signal, Pipe, ViewContainerRef, TemplateRef, computed, effect, Directive, ElementRef } from '@angular/core';
+import * as i1 from '@angular/forms';
+import { Validators, FormGroupDirective, NgControl, ControlContainer, FormBuilder, ReactiveFormsModule, FormControl, NonNullableFormBuilder, FormArray } from '@angular/forms';
+import { of, from, tap, startWith, merge, fromEvent, iif, EMPTY, map as map$1, switchMap as switchMap$1, Observable } from 'rxjs';
+import * as i4 from '@angular/common';
+import { KeyValuePipe, NgComponentOutlet, AsyncPipe } from '@angular/common';
+import { toSignal } from '@angular/core/rxjs-interop';
+import * as i5 from '@angular/cdk/overlay';
+import { OverlayModule } from '@angular/cdk/overlay';
+import { startWith as startWith$1, debounceTime, map, distinctUntilChanged, switchMap } from 'rxjs/operators';
+import { SelectionModel } from '@angular/cdk/collections';
 
-const CONTROL_DATA = new InjectionToken('Control Data');
+/**
+ * Type guards for control types
+ */
+function isInputControl(control) {
+    return control.controlType === 'input';
+}
+function isGroupControl(control) {
+    return control.controlType === 'group';
+}
+function isArrayControl(control) {
+    return control.controlType === 'array';
+}
+function isMultiSelectControl(control) {
+    return control.controlType === 'multi-select-dropdown';
+}
+function isAutocompleteControl(control) {
+    return control.controlType === 'autocomplete';
+}
 
-class ControlInjector {
+const CONTROL_DATA = new InjectionToken('CONTROL_DATA');
+
+const DEFAULT_SETTINGS = {
+    wrapperClasses: 'field-wrapper',
+    labelClasses: 'field-label',
+    errorClasses: 'field-error',
+    helpTextClasses: 'field-help-text',
+    inputClasses: 'field-input',
+    validationFeedbackClasses: 'validation-feedback',
+    selectClasses: 'field-select',
+    selectOptionClasses: 'field-select-option',
+    checkboxWrapperClasses: 'checkbox-wrapper',
+    checkboxInputClasses: 'checkbox-input',
+    checkboxLabelTextClasses: 'checkbox-label',
+    checkboxGroupContainerClasses: 'checkbox-group-container',
+    checkboxGroupItemWrapperClasses: 'checkbox-group-item-wrapper',
+    checkboxGroupItemInputClasses: 'checkbox-group-item-input',
+    checkboxGroupItemLabelClasses: 'checkbox-group-item-label',
+    radioGroupContainerClasses: 'radio-group-container',
+    radioItemWrapperClasses: 'radio-item-wrapper',
+    radioItemInputClasses: 'radio-item-input',
+    radioItemLabelClasses: 'radio-item-label',
+    groupContainerClasses: 'group-container',
+    groupLegendClasses: 'group-legend',
+    legendClasses: 'legend',
+    arrayItemContainerClasses: 'array-item-container',
+    arrayControlRemoveButtonClasses: 'array-remove-button',
+    arrayControlAddButtonClasses: 'array-add-button',
+    arrayControlRemoveButtonLabel: 'Remove',
+    arrayControlAddButtonLabel: 'Add',
+    multiSelectControlRemoveButtonLabel: 'Remove',
+    multiSelectEmptyText: 'Select options',
+    multiSelectDisplayedOptionsClasses: 'multi-select-displayed-options',
+    multiSelectDisplayedOptionClasses: 'multi-select-displayed-option',
+    multiselectDropdownClasses: 'multi-select-dropdown',
+    multiselectDropdownItemClasses: 'multi-select-dropdown-item',
+    chipslistRemoveButtonLabel: 'Remove',
+    chipslistAddButtonLabel: 'Add',
+    chipslistInputClasses: 'chips-list-input',
+    chipslistContainerClasses: 'chips-list-container',
+    chipslistChipClasses: 'chips-list-chip',
+    chipslistAddWrapperClasses: 'chips-list-add-wrapper',
+    autocompleteInputClasses: 'autocomplete-input',
+    autocompleteDropdownClasses: 'autocomplete-dropdown',
+    autocompleteDropdownItemClasses: 'autocomplete-dropdown-item',
+    autocompleteLoadingText: 'Loading...',
+    autocompleteLoadingWrapperClasses: 'autocomplete-loading-wrapper'
+};
+const SETTINGS = new InjectionToken('Settings', {
+    providedIn: 'root',
+    factory: () => DEFAULT_SETTINGS
+});
+
+const ERROR_MESSAGES = {
+    required: () => `This field is required`,
+    requiredTrue: () => `This field is required`,
+    pattern: () => `Does not match the pattern`,
+    email: () => `Must be a valid email`,
+    minlength: args => `Length must be at least ${args?.['requiredLength']} characters`,
+    maxlength: args => `Length must not exceed ${args?.['requiredLength']} characters. Currently, it has ${args?.['actualLength']} characters.`,
+    min: args => `The value must be at least ${args?.['min']}`,
+    max: args => `The value must not exceed ${args?.['max']}`,
+    custom: error => String(error)
+};
+const SPANISH_ERROR_MESSAGES = {
+    required: () => `Este campo es obligatorio`,
+    requiredTrue: () => `Este campo es obligatorio`,
+    pattern: () => `No coincide con el patrón`,
+    email: () => `Debe ser un correo electrónico válido`,
+    minlength: args => `La longitud debe ser al menos ${args?.['requiredLength']} caracteres`,
+    maxlength: args => `La longitud no debe exceder los ${args?.['requiredLength']} caracteres. Actualmente tiene ${args?.['actualLength']} caracteres.`,
+    min: args => `El valor debe ser al menos ${args?.['min']}`,
+    max: args => `El valor no debe exceder ${args?.['max']}`,
+    custom: error => String(error)
+};
+const VALIDATION_ERROR_MESSAGES = new InjectionToken('Validation Messages', {
+    providedIn: 'root',
+    factory: () => ERROR_MESSAGES
+});
+
+class ValidatorsService {
     constructor() {
-        this.injector = inject(Injector);
+        this.validatorStrategies = {
+            customValidation: (value) => {
+                if (typeof value === 'function') {
+                    return [value];
+                }
+                if (Array.isArray(value)) {
+                    return value.filter((fn) => typeof fn === 'function');
+                }
+                return [];
+            },
+            pattern: (value) => {
+                if (typeof value === 'string' || value instanceof RegExp) {
+                    return [Validators.pattern(value)];
+                }
+                return [];
+            },
+            max: (value) => {
+                return typeof value === 'number' ? [Validators.max(value)] : [];
+            },
+            min: (value) => {
+                return typeof value === 'number' ? [Validators.min(value)] : [];
+            },
+            maxLength: (value) => {
+                return typeof value === 'number' ? [Validators.maxLength(value)] : [];
+            },
+            minLength: (value) => {
+                return typeof value === 'number' ? [Validators.minLength(value)] : [];
+            },
+            requiredTrue: () => {
+                return [Validators.requiredTrue];
+            },
+            email: () => {
+                return [Validators.email];
+            },
+            required: () => {
+                return [Validators.required];
+            }
+        };
     }
-    transform(name, control, formGroup, index) {
-        return Injector.create({
-            parent: this.injector,
-            providers: [
-                {
-                    provide: CONTROL_DATA,
-                    useValue: { key: name, control, formGroup, index }
+    resolveValidators({ validators = {} }) {
+        const validatorFns = [];
+        for (const key in validators) {
+            if (Object.prototype.hasOwnProperty.call(validators, key)) {
+                const typedKey = key;
+                const strategy = this.validatorStrategies[typedKey];
+                if (strategy) {
+                    const value = validators[typedKey];
+                    const fns = strategy(value);
+                    validatorFns.push(...fns);
                 }
-            ]
-        });
+            }
+        }
+        return validatorFns.length > 0 ? Validators.compose(validatorFns) : null;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: ControlInjector, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
-    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "20.3.1", ngImport: i0, type: ControlInjector, isStandalone: true, name: "controlInjector" }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: ValidatorsService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: ValidatorsService, providedIn: 'root' }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: ControlInjector, decorators: [{
-            type: Pipe,
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: ValidatorsService, decorators: [{
+            type: Injectable,
             args: [{
-                    name: 'controlInjector',
-                    standalone: true
+                    providedIn: 'root'
                 }]
         }] });
 
-var ControlTypeValues;
-(function (ControlTypeValues) {
-    ControlTypeValues["INPUT"] = "input";
-    ControlTypeValues["GROUP"] = "group";
-    ControlTypeValues["CHECKBOX"] = "checkbox";
-    ControlTypeValues["CHECKBOX_GROUP"] = "checkbox-group";
-    ControlTypeValues["RADIO"] = "radio";
-    ControlTypeValues["SELECT"] = "select";
-})(ControlTypeValues || (ControlTypeValues = {}));
-
 class ControlResolver {
     constructor() {
         this.lazyControlComponents = {
             input: () => Promise.resolve().then(function () { return inputField_component; }).then(c => c.InputFieldComponent),
-            group: () => Promise.resolve().then(function () { return groupField_component; }).then(c => c.GroupFieldComponent),
             radio: () => Promise.resolve().then(function () { return radioField_component; }).then(c => c.RadioFieldComponent),
             checkbox: () => Promise.resolve().then(function () { return checkboxField_component; }).then(c => c.CheckboxFieldComponent),
+            select: () => Promise.resolve().then(function () { return selectField_component; }).then(c => c.SelectFieldComponent),
+            group: () => Promise.resolve().then(function () { return groupField_component; }).then(c => c.GroupFieldComponent),
+            array: () => Promise.resolve().then(function () { return arrayField_component; }).then(c => c.ArrayFieldComponent),
+            autocomplete: () => Promise.resolve().then(function () { return autocompleteField_component; }).then(c => c.AutocompleteFieldComponent),
             'checkbox-group': () => Promise.resolve().then(function () { return checkboxGroupField_component; }).then(c => c.CheckboxGroupFieldComponent),
-            select: () => import('./superlikers-dynamic-forms-select-field.component-D6Qy_SzE.mjs').then(c => c.SelectFieldComponent)
+            'multi-select-dropdown': () => Promise.resolve().then(function () { return multiSelectDropdown_component; }).then(c => c.MultiSelectDropdownComponent),
+            'chips-list': () => Promise.resolve().then(function () { return chipsListField_component; }).then(c => c.ChipsListFieldComponent)
         };
         this.loadedControlComponents = new Map();
     }
-    resolve(control, form) {
+    resolve(control) {
         const controlType = control.controlType;
-        const isVisible = this.checkVisible(control, form);
-        if (!isVisible)
-            return;
         const loadedComponent = this.loadedControlComponents.get(controlType);
-        if (loadedComponent)
+        if (loadedComponent) {
             return of(loadedComponent);
-        return from(this.lazyControlComponents[controlType]()).pipe(tap(component => {
-            this.loadedControlComponents.set(controlType, component);
-        }));
-    }
-    checkVisible(control, form) {
-        if (!control.visible)
-            return true;
-        return control.visible(form);
-    }
-    toggleControlDisability(controls, form) {
-        return form.valueChanges.pipe(distinctUntilChanged((prev, current) => {
-            return JSON.stringify(prev) === JSON.stringify(current);
-        }), map(() => {
-            controls.forEach(control => {
-                if (control.disabled) {
-                    const disabled = control.disabled(form);
-                    if (disabled) {
-                        form.get(control.name)?.disable();
-                    }
-                    else {
-                        form.get(control.name)?.enable();
-                    }
-                }
-            });
-        }));
+        }
+        return from(this.lazyControlComponents[controlType]()).pipe(tap(component => this.loadedControlComponents.set(controlType, component)));
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: ControlResolver, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
     static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: ControlResolver, providedIn: 'root' }); }
@@ -100,181 +210,163 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.1", ngImpor
                 }]
         }] });
 
-/* eslint-disable @typescript-eslint/no-explicit-any */
-const ERROR_MESSAGES = {
-    required: () => `This field is required`,
-    requiredTrue: () => `This field is required`,
-    pattern: () => `Does not match the pattern`,
-    email: () => `Must be a valid email`,
-    minlength: ({ requiredLength }) => `Length must be at least ${requiredLength} characters`,
-    customError: error => error
-};
-const ERROR_MESSAGES_ES = {
-    required: () => `Este campo es obligatorio`,
-    requiredTrue: () => `Este campo es obligatorio`,
-    pattern: () => `No coincide con el patrón`,
-    email: () => `Debe ser un correo electrónico válido`,
-    minlength: ({ requiredLength }) => `La longitud debe ser al menos de ${requiredLength} caracteres`,
-    customError: error => error
-};
-const VALIDATION_ERROR_MESSAGES = new InjectionToken(`Validation Messages`, {
-    providedIn: 'root',
-    factory: () => ERROR_MESSAGES
-});
-
-/* eslint-disable @typescript-eslint/no-explicit-any */
-class ErrorsComponent {
+class ErrorMessageComponent {
     constructor() {
-        this.errors = null;
-        this.hostClass = '';
+        this.settings = inject(SETTINGS);
         this.errorsMap = inject(VALIDATION_ERROR_MESSAGES);
+        this.errors = input(...(ngDevMode ? [undefined, { debugName: "errors" }] : []));
     }
     getError(error) {
         if (!this.errorsMap[error.key]) {
-            console.warn(`missing message for ${error.key}`);
             return;
         }
-        return this.errorsMap[error.key](error.value);
+        const message = this.errorsMap[error.key](error.value);
+        return message;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: ErrorsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.1", type: ErrorsComponent, isStandalone: true, selector: "app-errors", inputs: { errors: "errors" }, host: { properties: { "class": "this.hostClass" } }, ngImport: i0, template: `
-    @for (error of errors | keyvalue; track error.key) {
-      <div class="error-text">{{ getError(error) }}</div>
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: ErrorMessageComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.1", type: ErrorMessageComponent, isStandalone: true, selector: "error-message", inputs: { errors: { classPropertyName: "errors", publicName: "errors", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: `
+    @for (error of errors() | keyvalue; track error.key) {
+      <p [class]="settings.errorClasses">{{ getError(error) }}</p>
     }
   `, isInline: true, dependencies: [{ kind: "pipe", type: KeyValuePipe, name: "keyvalue" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: ErrorsComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: ErrorMessageComponent, decorators: [{
             type: Component,
             args: [{
-                    selector: 'app-errors',
+                    selector: 'error-message',
                     imports: [KeyValuePipe],
-                    changeDetection: ChangeDetectionStrategy.OnPush,
                     template: `
-    @for (error of errors | keyvalue; track error.key) {
-      <div class="error-text">{{ getError(error) }}</div>
+    @for (error of errors() | keyvalue; track error.key) {
+      <p [class]="settings.errorClasses">{{ getError(error) }}</p>
     }
   `,
-                    standalone: true
+                    changeDetection: ChangeDetectionStrategy.OnPush
                 }]
-        }], propDecorators: { errors: [{
-                type: Input
-            }], hostClass: [{
-                type: HostBinding,
-                args: ['class']
-            }] } });
+        }] });
 
-class ValidatorMessageDirective {
+class ControlInjector {
     constructor() {
-        this.ngControl = inject(NgControl, { self: true });
-        this.elementRef = inject(ElementRef);
-        this.componentRef = null;
-        this.parentContainer = inject(ControlContainer, { optional: true });
-        this.vcr = inject(ViewContainerRef);
-    }
-    get form() {
-        return this.parentContainer?.formDirective;
+        this.injector = inject(Injector);
     }
-    ngOnInit() {
-        if (!this.ngControl.control)
-            return;
-        this.controlSubscription = merge(this.ngControl.control.statusChanges, fromEvent(this.elementRef.nativeElement, 'blur'), iif(() => !!this.form, this.form.ngSubmit, EMPTY))
-            .pipe(startWith(this.ngControl.control.status))
-            .subscribe(() => {
-            if (this.ngControl.errors && this.form?.submitted) {
-                if (this.componentRef)
-                    return;
-                this.componentRef = this.vcr.createComponent(ErrorsComponent);
-                this.componentRef.changeDetectorRef.markForCheck();
-                this.componentRef.setInput('errors', this.ngControl.errors);
-            }
-            else {
-                this.componentRef?.destroy();
-                this.componentRef = null;
-            }
+    transform(control, initialValues) {
+        const controlPatchValue = initialValues?.[control.name];
+        const data = { control, initialValue: controlPatchValue };
+        return Injector.create({
+            parent: this.injector,
+            providers: [
+                {
+                    provide: CONTROL_DATA,
+                    useValue: signal(data)
+                }
+            ]
         });
     }
-    ngOnDestroy() {
-        this.controlSubscription.unsubscribe();
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: ValidatorMessageDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.1", type: ValidatorMessageDirective, isStandalone: true, selector: "[appValidatorMessage]", ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: ControlInjector, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
+    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "20.3.1", ngImport: i0, type: ControlInjector, isStandalone: true, name: "controlInjector" }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: ValidatorMessageDirective, decorators: [{
-            type: Directive,
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: ControlInjector, decorators: [{
+            type: Pipe,
             args: [{
-                    selector: '[appValidatorMessage]',
-                    standalone: true
+                    name: 'controlInjector'
                 }]
         }] });
 
-class HelpTextComponent {
+class ActivateControlDirective {
     constructor() {
-        this.message = '';
+        this.activateControl = input(...(ngDevMode ? [undefined, { debugName: "activateControl" }] : []));
+        this.vcr = inject(ViewContainerRef);
+        this.templateRef = inject(TemplateRef);
+        this.rootFormGroup = inject(FormGroupDirective).form;
+        // ✅ Convertir valueChanges a signal
+        this.formValue = toSignal(this.rootFormGroup.valueChanges.pipe(startWith(this.rootFormGroup.value)), {
+            initialValue: this.rootFormGroup.value
+        });
+        // ✅ Computed para visibilidad
+        this.isVisible = computed(() => {
+            // Trigger reactivity cuando cambia el form
+            const _ = this.formValue();
+            const visible = this.activateControl()?.visible;
+            if (visible === undefined) {
+                return true;
+            }
+            if (typeof visible === 'function') {
+                return visible(this.rootFormGroup);
+            }
+            return visible;
+        }, ...(ngDevMode ? [{ debugName: "isVisible" }] : []));
+        // ✅ Effect para manejar el DOM
+        effect(() => {
+            const visible = this.isVisible();
+            if (visible) {
+                if (this.vcr.length === 0) {
+                    this.vcr.createEmbeddedView(this.templateRef);
+                }
+            }
+            else {
+                if (this.vcr.length > 0) {
+                    this.vcr.clear();
+                }
+            }
+        });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: HelpTextComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.1", type: HelpTextComponent, isStandalone: true, selector: "app-help-text", inputs: { message: "message" }, ngImport: i0, template: '<p class="help-text">{{ message }}</p>', isInline: true }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: ActivateControlDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "20.3.1", type: ActivateControlDirective, isStandalone: true, selector: "[activateControl]", inputs: { activateControl: { classPropertyName: "activateControl", publicName: "activateControl", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: HelpTextComponent, decorators: [{
-            type: Component,
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: ActivateControlDirective, decorators: [{
+            type: Directive,
             args: [{
-                    selector: 'app-help-text',
-                    imports: [],
-                    template: '<p class="help-text">{{ message }}</p>',
-                    standalone: true
+                    selector: '[activateControl]'
                 }]
-        }], propDecorators: { message: [{
-                type: Input
-            }] } });
+        }], ctorParameters: () => [] });
 
 class HelpTextDirective {
     constructor() {
-        this.message = '';
+        this.helpMessage = input(...(ngDevMode ? [undefined, { debugName: "helpMessage" }] : []));
         this.elementRef = inject(ElementRef);
         this.vcr = inject(ViewContainerRef);
         this.componentRef = null;
     }
     ngOnInit() {
-        if (!this.message)
+        if (!this.helpMessage()) {
             return;
+        }
         this.componentRef = this.vcr.createComponent(HelpTextComponent);
-        this.componentRef.setInput('message', this.message);
+        this.componentRef.setInput('message', this.helpMessage());
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: HelpTextDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.1", type: HelpTextDirective, isStandalone: true, selector: "[appHelpText]", inputs: { message: "message" }, ngImport: i0 }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "20.3.1", type: HelpTextDirective, isStandalone: true, selector: "[helpMessage]", inputs: { helpMessage: { classPropertyName: "helpMessage", publicName: "helpMessage", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: HelpTextDirective, decorators: [{
             type: Directive,
             args: [{
-                    selector: '[appHelpText]',
-                    standalone: true
+                    selector: '[helpMessage]'
                 }]
-        }], propDecorators: { message: [{
-                type: Input
-            }] } });
+        }] });
 
-class ValidatorArrayMessageDirective {
+class ValidatorMessageDirective {
     constructor() {
-        this.parentContainer = inject(ControlContainer);
-        this.vcr = inject(ViewContainerRef);
+        this.ngControl = inject(NgControl, { self: true });
         this.elementRef = inject(ElementRef);
+        this.vcr = inject(ViewContainerRef);
+        this.parentContainer = inject(ControlContainer, { optional: true });
         this.componentRef = null;
     }
     get form() {
         return this.parentContainer?.formDirective;
     }
     ngOnInit() {
-        const formArray = this.parentContainer.control;
-        if (!formArray)
+        const control = this.ngControl.control;
+        if (!control) {
             return;
-        this.controlSubscription = merge(formArray.statusChanges, fromEvent(this.elementRef.nativeElement, 'blur'), iif(() => !!this.form, this.form.ngSubmit, EMPTY))
-            .pipe(startWith(formArray.status))
+        }
+        this.controlSubscription = merge(control.statusChanges, fromEvent(this.elementRef.nativeElement, 'blur'), iif(() => !!this.form, this.form.ngSubmit, EMPTY))
+            .pipe(startWith(control.status))
             .subscribe(() => {
-            if (formArray.errors && this.form?.submitted) {
-                if (this.componentRef)
-                    return;
-                this.componentRef = this.vcr.createComponent(ErrorsComponent);
-                this.componentRef.changeDetectorRef.markForCheck();
-                this.componentRef.setInput('errors', formArray.errors);
+            if (control.errors && (control.touched || this.form?.submitted)) {
+                if (!this.componentRef) {
+                    this.componentRef = this.vcr.createComponent(ErrorMessageComponent);
+                }
+                this.componentRef.setInput('errors', control.errors);
             }
             else {
                 this.componentRef?.destroy();
@@ -283,103 +375,335 @@ class ValidatorArrayMessageDirective {
         });
     }
     ngOnDestroy() {
-        this.controlSubscription?.unsubscribe();
+        this.controlSubscription.unsubscribe();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: ValidatorArrayMessageDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.1", type: ValidatorArrayMessageDirective, isStandalone: true, selector: "[appValidatorArrayMessage]", ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: ValidatorMessageDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.1", type: ValidatorMessageDirective, isStandalone: true, selector: "[validatorMessage]", ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: ValidatorArrayMessageDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: ValidatorMessageDirective, decorators: [{
             type: Directive,
             args: [{
-                    selector: '[appValidatorArrayMessage]',
-                    standalone: true
+                    selector: '[validatorMessage]'
+                }]
+        }] });
+
+class FieldsComponent {
+    constructor() {
+        this.controls = input.required(...(ngDevMode ? [{ debugName: "controls" }] : []));
+        this.data = input(...(ngDevMode ? [undefined, { debugName: "data" }] : []));
+        this.fb = inject(FormBuilder);
+        this.controlResolver = inject(ControlResolver);
+        this.controlContainer = inject(ControlContainer);
+    }
+    get form() {
+        return this.controlContainer.control;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: FieldsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.1", type: FieldsComponent, isStandalone: true, selector: "fields", inputs: { controls: { classPropertyName: "controls", publicName: "controls", isSignal: true, isRequired: true, transformFunction: null }, data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: `
+    @for (control of controls(); track control.name) {
+      <ng-container
+        *activateControl="control"
+        [ngComponentOutlet]="controlResolver.resolve(control) | async"
+        [ngComponentOutletInjector]="control | controlInjector: data()" />
+    }
+  `, isInline: true, dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: NgComponentOutlet, selector: "[ngComponentOutlet]", inputs: ["ngComponentOutlet", "ngComponentOutletInputs", "ngComponentOutletInjector", "ngComponentOutletEnvironmentInjector", "ngComponentOutletContent", "ngComponentOutletNgModule", "ngComponentOutletNgModuleFactory"], exportAs: ["ngComponentOutlet"] }, { kind: "directive", type: ActivateControlDirective, selector: "[activateControl]", inputs: ["activateControl"] }, { kind: "pipe", type: ControlInjector, name: "controlInjector" }, { kind: "pipe", type: AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: FieldsComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'fields',
+                    imports: [ReactiveFormsModule, NgComponentOutlet, ControlInjector, AsyncPipe, ActivateControlDirective],
+                    template: `
+    @for (control of controls(); track control.name) {
+      <ng-container
+        *activateControl="control"
+        [ngComponentOutlet]="controlResolver.resolve(control) | async"
+        [ngComponentOutletInjector]="control | controlInjector: data()" />
+    }
+  `,
+                    changeDetection: ChangeDetectionStrategy.OnPush
+                }]
+        }] });
+
+class HelpTextComponent {
+    constructor() {
+        this.settings = inject(SETTINGS);
+        this.message = input(...(ngDevMode ? [undefined, { debugName: "message" }] : []));
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: HelpTextComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.3.1", type: HelpTextComponent, isStandalone: true, selector: "help-text", inputs: { message: { classPropertyName: "message", publicName: "message", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: `<p [class]="settings.helpTextClasses">{{ message() }}</p>`, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: HelpTextComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'help-text',
+                    template: `<p [class]="settings.helpTextClasses">{{ message() }}</p>`,
+                    changeDetection: ChangeDetectionStrategy.OnPush
                 }]
         }] });
 
-const sharedControlDeps = [CommonModule, ReactiveFormsModule, ValidatorMessageDirective, HelpTextDirective, ValidatorArrayMessageDirective, AsyncPipe];
 const controlProvider = {
     provide: ControlContainer,
     useFactory: () => inject(ControlContainer, { skipSelf: true })
 };
-class BaseControlComponent {
+const controlDeps = [ReactiveFormsModule, HelpTextDirective, ValidatorMessageDirective, NgComponentOutlet, ControlInjector, ActivateControlDirective];
+class BaseInputComponent {
     constructor() {
-        this.hostClass = '';
-        this.control = inject(CONTROL_DATA);
-        this.formControl = new FormControl(this.control.control.value, this.resolveValidators(this.control.control));
-        this.id = this.control.control.name + this.control.control.id + (this.control.index ?? '');
-        this.parentGroupDir = inject(ControlContainer);
-    }
-    get parentFormGroup() {
-        return this.parentGroupDir.control;
+        this.settings = inject(SETTINGS);
+        this.hostClass = signal('', ...(ngDevMode ? [{ debugName: "hostClass" }] : []));
+        // Injections
+        this.controlData = inject(CONTROL_DATA);
+        this.validatorsService = inject(ValidatorsService);
+        this.controlContainer = inject(ControlContainer);
+        // Computed signals
+        this.control = computed(() => this.controlData().control, ...(ngDevMode ? [{ debugName: "control" }] : []));
+        this.value = computed(() => this.controlData().initialValue ?? this.control().value, ...(ngDevMode ? [{ debugName: "value" }] : []));
+        // Form control
+        this.validatorFn = this.validatorsService.resolveValidators(this.control());
+        this.formControl = new FormControl(this.value(), this.validatorFn);
+        this.parentForm = this.controlContainer.control;
+        this.formValue = toSignal(this.parentForm.valueChanges.pipe(startWith(this.parentForm.value)), {
+            initialValue: this.parentForm.value
+        });
+        this.options = computed(() => {
+            const _ = this.formValue();
+            const optionsFn = this.control().options;
+            if (!optionsFn) {
+                return [];
+            }
+            if (Array.isArray(optionsFn)) {
+                return optionsFn;
+            }
+            const result = optionsFn(this.parentForm);
+            if (Array.isArray(result)) {
+                return result;
+            }
+            return [];
+        }, ...(ngDevMode ? [{ debugName: "options" }] : []));
+        this.isDisabled = computed(() => {
+            const _ = this.formValue();
+            const control = this.control();
+            if (control.disabled === undefined) {
+                return false;
+            }
+            if (typeof control.disabled === 'boolean') {
+                return control.disabled;
+            }
+            if (typeof control.disabled === 'function') {
+                return control.disabled(this.parentForm);
+            }
+            return false;
+        }, ...(ngDevMode ? [{ debugName: "isDisabled" }] : []));
+        effect(() => {
+            const disabled = this.isDisabled();
+            if (disabled && !this.formControl.disabled) {
+                this.formControl.disable({ emitEvent: false });
+            }
+            else if (!disabled && this.formControl.disabled) {
+                this.formControl.enable({ emitEvent: false });
+            }
+        });
     }
     ngOnInit() {
         this.initialize();
     }
-    ngOnDestroy() {
-        this.destroy();
-    }
     initialize() {
-        if (this.control.formGroup) {
-            this.control.formGroup.addControl(this.control.control.name, this.formControl);
+        const control = this.control();
+        const classes = this.settings.wrapperClasses ?? `field wrapper-${control.name}`;
+        this.hostClass.set(classes);
+        this.parentForm.addControl(control.name, this.formControl);
+    }
+    destroy() {
+        const control = this.control();
+        if (this.parentForm.contains(control.name)) {
+            this.parentForm.removeControl(control.name);
         }
-        else {
-            this.parentFormGroup.addControl(this.control.control.name, this.formControl);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: BaseInputComponent, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.1", type: BaseInputComponent, isStandalone: true, host: { properties: { "class": "hostClass()" } }, ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: BaseInputComponent, decorators: [{
+            type: Directive,
+            args: [{
+                    host: {
+                        '[class]': 'hostClass()'
+                    }
+                }]
+        }], ctorParameters: () => [] });
+
+class ArrayFieldComponent extends BaseInputComponent {
+    constructor() {
+        super(...arguments);
+        this.controlResolver = inject(ControlResolver);
+        this.fb = inject(NonNullableFormBuilder);
+        this.formControl = new FormArray([], this.validatorFn);
+        this.controls = computed(() => {
+            const ctrl = this.control();
+            return isArrayControl(ctrl) ? ctrl.controls : [];
+        }, ...(ngDevMode ? [{ debugName: "controls" }] : []));
+    }
+    ngOnInit() {
+        this.initialize();
+        const val = this.value();
+        if (Array.isArray(val)) {
+            val.forEach(() => {
+                const group = this.fb.group({});
+                this.formControl.push(group);
+            });
         }
-        this.hostClass = `field wrapper-${this.control.control.name}`;
     }
-    destroy() {
-        if (this.control.formGroup)
+    getControlValue(index) {
+        const val = this.value();
+        if (Array.isArray(val)) {
+            return val[index] ?? null;
+        }
+        return null;
+    }
+    removeItem(i) {
+        if (this.isDisabled()) {
             return;
-        else
-            this.parentFormGroup.removeControl(this.control.control.name);
+        }
+        this.formControl.removeAt(i);
     }
-    resolveValidators({ validators = {} }) {
-        const validatorsKeys = Object.keys(validators);
-        return validatorsKeys.map(key => {
-            const value = validators[key];
-            if (key === 'required') {
-                return Validators.required;
+    addItem() {
+        if (this.isDisabled()) {
+            return;
+        }
+        const group = this.fb.group({});
+        this.formControl.push(group);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: ArrayFieldComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.1", type: ArrayFieldComponent, isStandalone: true, selector: "array-field", usesInheritance: true, ngImport: i0, template: "<fieldset [formArrayName]=\"control().name\">\n  @if (control().label) {\n    <legend [class]=\"settings.legendClasses\">{{ control().label }}</legend>\n  }\n\n  @for (group of formControl.controls; track group; let i = $index) {\n    <div\n      [formGroupName]=\"i\"\n      [class]=\"settings.arrayItemContainerClasses\">\n      @for (ctrl of control().controls; track ctrl.name) {\n        <ng-container\n          *activateControl=\"ctrl\"\n          [ngComponentOutlet]=\"controlResolver.resolve(ctrl) | async\"\n          [ngComponentOutletInjector]=\"ctrl | controlInjector: getControlValue(i)\" />\n      }\n\n      <button\n        [class]=\"settings.arrayControlRemoveButtonClasses\"\n        role=\"button\"\n        tabindex=\"0\"\n        type=\"button\"\n        (click)=\"removeItem(i)\"\n        (keydown.enter)=\"removeItem(i)\">\n        @if (settings.arrayControlRemoveButtonIcon) {\n          <div [class]=\"settings.arrayControlRemoveButtonIconClasses\">\n            <ng-container *ngComponentOutlet=\"settings.arrayControlRemoveButtonIcon\" />\n          </div>\n        }\n        @if (settings.arrayControlRemoveButtonLabel) {\n          <span>{{ settings.arrayControlRemoveButtonLabel }}</span>\n        }\n      </button>\n    </div>\n  }\n\n  <button\n    [class]=\"settings.arrayControlAddButtonClasses\"\n    role=\"button\"\n    tabindex=\"0\"\n    type=\"button\"\n    (click)=\"addItem()\"\n    (keydown.enter)=\"addItem()\">\n    @if (settings.arrayControlAddButtonIcon) {\n      <div [class]=\"settings.arrayControlAddButtonIconClasses\">\n        <ng-container *ngComponentOutlet=\"settings.arrayControlAddButtonIcon\" />\n      </div>\n    }\n    @if (settings.arrayControlAddButtonLabel) {\n      <span>{{ settings.arrayControlAddButtonLabel }}</span>\n    }\n  </button>\n</fieldset>\n\n<div [class]=\"settings.validationFeedbackClasses\">\n  <ng-container [helpMessage]=\"control().helpText\" />\n</div>\n", dependencies: [{ kind: "ngmodule", type: i1.ReactiveFormsModule }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1.FormGroupName, selector: "[formGroupName]", inputs: ["formGroupName"] }, { kind: "directive", type: i1.FormArrayName, selector: "[formArrayName]", inputs: ["formArrayName"] }, { kind: "directive", type: HelpTextDirective, selector: "[helpMessage]", inputs: ["helpMessage"] }, { kind: "directive", type: i4.NgComponentOutlet, selector: "[ngComponentOutlet]", inputs: ["ngComponentOutlet", "ngComponentOutletInputs", "ngComponentOutletInjector", "ngComponentOutletEnvironmentInjector", "ngComponentOutletContent", "ngComponentOutletNgModule", "ngComponentOutletNgModuleFactory"], exportAs: ["ngComponentOutlet"] }, { kind: "directive", type: ActivateControlDirective, selector: "[activateControl]", inputs: ["activateControl"] }, { kind: "pipe", type: ControlInjector, name: "controlInjector" }, { kind: "pipe", type: AsyncPipe, name: "async" }], viewProviders: [controlProvider], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: ArrayFieldComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'array-field', imports: [...controlDeps, AsyncPipe], changeDetection: ChangeDetectionStrategy.OnPush, viewProviders: [controlProvider], template: "<fieldset [formArrayName]=\"control().name\">\n  @if (control().label) {\n    <legend [class]=\"settings.legendClasses\">{{ control().label }}</legend>\n  }\n\n  @for (group of formControl.controls; track group; let i = $index) {\n    <div\n      [formGroupName]=\"i\"\n      [class]=\"settings.arrayItemContainerClasses\">\n      @for (ctrl of control().controls; track ctrl.name) {\n        <ng-container\n          *activateControl=\"ctrl\"\n          [ngComponentOutlet]=\"controlResolver.resolve(ctrl) | async\"\n          [ngComponentOutletInjector]=\"ctrl | controlInjector: getControlValue(i)\" />\n      }\n\n      <button\n        [class]=\"settings.arrayControlRemoveButtonClasses\"\n        role=\"button\"\n        tabindex=\"0\"\n        type=\"button\"\n        (click)=\"removeItem(i)\"\n        (keydown.enter)=\"removeItem(i)\">\n        @if (settings.arrayControlRemoveButtonIcon) {\n          <div [class]=\"settings.arrayControlRemoveButtonIconClasses\">\n            <ng-container *ngComponentOutlet=\"settings.arrayControlRemoveButtonIcon\" />\n          </div>\n        }\n        @if (settings.arrayControlRemoveButtonLabel) {\n          <span>{{ settings.arrayControlRemoveButtonLabel }}</span>\n        }\n      </button>\n    </div>\n  }\n\n  <button\n    [class]=\"settings.arrayControlAddButtonClasses\"\n    role=\"button\"\n    tabindex=\"0\"\n    type=\"button\"\n    (click)=\"addItem()\"\n    (keydown.enter)=\"addItem()\">\n    @if (settings.arrayControlAddButtonIcon) {\n      <div [class]=\"settings.arrayControlAddButtonIconClasses\">\n        <ng-container *ngComponentOutlet=\"settings.arrayControlAddButtonIcon\" />\n      </div>\n    }\n    @if (settings.arrayControlAddButtonLabel) {\n      <span>{{ settings.arrayControlAddButtonLabel }}</span>\n    }\n  </button>\n</fieldset>\n\n<div [class]=\"settings.validationFeedbackClasses\">\n  <ng-container [helpMessage]=\"control().helpText\" />\n</div>\n" }]
+        }] });
+
+var arrayField_component = /*#__PURE__*/Object.freeze({
+    __proto__: null,
+    ArrayFieldComponent: ArrayFieldComponent
+});
+
+// autocomplete-field.component.ts
+class AutocompleteFieldComponent extends BaseInputComponent {
+    constructor() {
+        super(...arguments);
+        // A separate control for the query input.
+        this.queryControl = new FormControl('');
+        this.isOpen = signal(false, ...(ngDevMode ? [{ debugName: "isOpen" }] : []));
+        this.loading = signal(false, ...(ngDevMode ? [{ debugName: "loading" }] : []));
+        this.dependencySubscriptions = [];
+        // suggestions$ emits an array of options based on the current query.
+        this.suggestions$ = this.queryControl.valueChanges.pipe(startWith$1(this.queryControl.value), debounceTime(300), map(query => query || ''), distinctUntilChanged(), switchMap((query) => {
+            const ctrl = this.control();
+            if (!ctrl.autocompleteOptions) {
+                this.loading.set(false);
+                return of([]);
             }
-            if (key === 'email') {
-                return Validators.email;
+            // Set loading to true before fetching
+            this.loading.set(true);
+            const result = ctrl.autocompleteOptions(this.parentForm, query);
+            let resultObservable;
+            // Handle Promise
+            if (result instanceof Promise) {
+                resultObservable = from(result);
             }
-            if (key === 'requiredTrue') {
-                return Validators.requiredTrue;
+            // Handle Observable
+            else if (result && typeof result === 'object' && 'subscribe' in result) {
+                resultObservable = result;
             }
-            if (key === 'minLength' && typeof value === 'number') {
-                return Validators.minLength(value);
+            // Handle Array
+            else if (Array.isArray(result)) {
+                resultObservable = of(result);
             }
-            if (key === 'pattern' && typeof value === 'string') {
-                return Validators.pattern(value);
+            else {
+                resultObservable = of([]);
             }
-            return Validators.nullValidator;
-        });
+            // Set loading to false after results arrive
+            return resultObservable.pipe(map(results => {
+                this.loading.set(false);
+                return results;
+            }));
+        }));
     }
-    getOptions() {
-        if (this.control.control.options) {
-            return of(this.control.control.options);
+    displayWithFn(item) {
+        const control = this.control();
+        if (control.itemLabel) {
+            const label = item[control.itemLabel];
+            return label !== null && label !== undefined ? String(label) : '';
         }
-        if (!this.control.control.asyncOptions)
-            return of([]);
-        return this.control.control.asyncOptions(this.parentFormGroup);
+        else {
+            return String(item);
+        }
+    }
+    selectOption(option) {
+        const ctrl = this.control();
+        const valueToStore = ctrl.itemValue ? option[ctrl.itemValue] : option;
+        this.formControl.setValue(valueToStore);
+        this.queryControl.setValue(this.displayWithFn(option));
+        this.close();
+    }
+    isSelected(option) {
+        const ctrl = this.control();
+        const value = this.formControl.value;
+        const optionValue = ctrl.itemValue ? option[ctrl.itemValue] : option;
+        if (Array.isArray(value)) {
+            return value.includes(optionValue);
+        }
+        return value === optionValue;
+    }
+    open() {
+        this.isOpen.set(true);
+    }
+    close() {
+        this.isOpen.set(false);
+    }
+    trackByFn(index, item) {
+        const ctrl = this.control();
+        return ctrl.itemValue ? item[ctrl.itemValue] : index;
+    }
+    ngOnInit() {
+        this.initialize();
+        // If the control configuration has a 'resetOnChange' array, subscribe to each dependency.
+        const ctrl = this.control();
+        if (ctrl.resetOnChange && Array.isArray(ctrl.resetOnChange)) {
+            ctrl.resetOnChange.forEach((depName) => {
+                const depControl = this.parentForm.get(depName);
+                if (depControl) {
+                    const sub = depControl.valueChanges.pipe(distinctUntilChanged()).subscribe(() => {
+                        this.formControl.reset();
+                        this.queryControl.reset();
+                    });
+                    this.dependencySubscriptions.push(sub);
+                }
+            });
+        }
+    }
+    ngOnDestroy() {
+        this.destroy();
+        this.dependencySubscriptions.forEach(sub => sub.unsubscribe());
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: BaseControlComponent, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.1", type: BaseControlComponent, isStandalone: true, host: { properties: { "class": "this.hostClass" } }, ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: AutocompleteFieldComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.1", type: AutocompleteFieldComponent, isStandalone: true, selector: "autocomplete-field", usesInheritance: true, ngImport: i0, template: "<label\n  [class]=\"settings.labelClasses\"\n  [attr.for]=\"control().name\">\n  {{ control().label }}\n</label>\n\n<div class=\"relative\">\n  <input\n    #origin\n    [id]=\"control().name\"\n    [name]=\"control().name\"\n    [class]=\"settings.autocompleteInputClasses\"\n    [placeholder]=\"control().placeholder ?? ''\"\n    [formControl]=\"queryControl\"\n    (focus)=\"open()\"\n    autocomplete=\"off\"\n    [attr.aria-expanded]=\"isOpen() ? 'true' : 'false'\"\n    aria-controls=\"autocomplete-list\" />\n\n  @if (loading()) {\n    <div [class]=\"settings.autocompleteLoadingWrapperClasses\">\n      @if (settings.autocompleteLoadingIcon) {\n        <div [class]=\"settings.autocompleteLoadingIconClasses\">\n          <ng-container [ngComponentOutlet]=\"settings.autocompleteLoadingIcon\" />\n        </div>\n      } @else {\n        <span [class]=\"settings.autocompleteLoadingTextClasses\">{{ settings.autocompleteLoadingText }}</span>\n      }\n    </div>\n  }\n</div>\n\n<!-- CDK Connected Overlay for suggestions dropdown -->\n<ng-template\n  cdkConnectedOverlay\n  [cdkConnectedOverlayOrigin]=\"origin\"\n  [cdkConnectedOverlayOpen]=\"isOpen()\"\n  cdkConnectedOverlayHasBackdrop\n  cdkConnectedOverlayBackdropClass=\"cdk-overlay-transparent-backdrop\"\n  (backdropClick)=\"close()\"\n  (detach)=\"close()\">\n  <div\n    [class]=\"settings.autocompleteDropdownClasses\"\n    role=\"listbox\"\n    aria-live=\"assertive\"\n    id=\"autocomplete-list\">\n    @for (option of suggestions$ | async; track trackByFn($index, option)) {\n      <div\n        [class]=\"[settings.autocompleteDropdownItemClasses, isSelected(option) ? settings.autocompleteDropdownItemSelectedClasses : '']\"\n        tabindex=\"0\"\n        (click)=\"selectOption(option)\"\n        (keyup)=\"selectOption(option)\"\n        role=\"option\"\n        [attr.aria-selected]=\"isSelected(option)\">\n        {{ displayWithFn(option) }}\n      </div>\n    }\n  </div>\n</ng-template>\n\n<div [class]=\"settings.validationFeedbackClasses\">\n  <ng-container\n    ngDefaultControl\n    validatorMessage\n    [helpMessage]=\"control().helpText\"\n    [formControlName]=\"control().name\" />\n</div>\n", dependencies: [{ kind: "ngmodule", type: i1.ReactiveFormsModule }, { kind: "directive", type: i1.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: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: HelpTextDirective, selector: "[helpMessage]", inputs: ["helpMessage"] }, { kind: "directive", type: ValidatorMessageDirective, selector: "[validatorMessage]" }, { kind: "directive", type: i4.NgComponentOutlet, selector: "[ngComponentOutlet]", inputs: ["ngComponentOutlet", "ngComponentOutletInputs", "ngComponentOutletInjector", "ngComponentOutletEnvironmentInjector", "ngComponentOutletContent", "ngComponentOutletNgModule", "ngComponentOutletNgModuleFactory"], exportAs: ["ngComponentOutlet"] }, { kind: "ngmodule", type: OverlayModule }, { kind: "directive", type: i5.CdkConnectedOverlay, selector: "[cdk-connected-overlay], [connected-overlay], [cdkConnectedOverlay]", inputs: ["cdkConnectedOverlayOrigin", "cdkConnectedOverlayPositions", "cdkConnectedOverlayPositionStrategy", "cdkConnectedOverlayOffsetX", "cdkConnectedOverlayOffsetY", "cdkConnectedOverlayWidth", "cdkConnectedOverlayHeight", "cdkConnectedOverlayMinWidth", "cdkConnectedOverlayMinHeight", "cdkConnectedOverlayBackdropClass", "cdkConnectedOverlayPanelClass", "cdkConnectedOverlayViewportMargin", "cdkConnectedOverlayScrollStrategy", "cdkConnectedOverlayOpen", "cdkConnectedOverlayDisableClose", "cdkConnectedOverlayTransformOriginOn", "cdkConnectedOverlayHasBackdrop", "cdkConnectedOverlayLockPosition", "cdkConnectedOverlayFlexibleDimensions", "cdkConnectedOverlayGrowAfterOpen", "cdkConnectedOverlayPush", "cdkConnectedOverlayDisposeOnNavigation"], outputs: ["backdropClick", "positionChange", "attach", "detach", "overlayKeydown", "overlayOutsideClick"], exportAs: ["cdkConnectedOverlay"] }, { kind: "pipe", type: AsyncPipe, name: "async" }], viewProviders: [controlProvider], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: BaseControlComponent, decorators: [{
-            type: Directive
-        }], propDecorators: { hostClass: [{
-                type: HostBinding,
-                args: ['class']
-            }] } });
-
-class CheckboxFieldComponent extends BaseControlComponent {
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: AutocompleteFieldComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'autocomplete-field', imports: [...controlDeps, OverlayModule, AsyncPipe], changeDetection: ChangeDetectionStrategy.OnPush, viewProviders: [controlProvider], template: "<label\n  [class]=\"settings.labelClasses\"\n  [attr.for]=\"control().name\">\n  {{ control().label }}\n</label>\n\n<div class=\"relative\">\n  <input\n    #origin\n    [id]=\"control().name\"\n    [name]=\"control().name\"\n    [class]=\"settings.autocompleteInputClasses\"\n    [placeholder]=\"control().placeholder ?? ''\"\n    [formControl]=\"queryControl\"\n    (focus)=\"open()\"\n    autocomplete=\"off\"\n    [attr.aria-expanded]=\"isOpen() ? 'true' : 'false'\"\n    aria-controls=\"autocomplete-list\" />\n\n  @if (loading()) {\n    <div [class]=\"settings.autocompleteLoadingWrapperClasses\">\n      @if (settings.autocompleteLoadingIcon) {\n        <div [class]=\"settings.autocompleteLoadingIconClasses\">\n          <ng-container [ngComponentOutlet]=\"settings.autocompleteLoadingIcon\" />\n        </div>\n      } @else {\n        <span [class]=\"settings.autocompleteLoadingTextClasses\">{{ settings.autocompleteLoadingText }}</span>\n      }\n    </div>\n  }\n</div>\n\n<!-- CDK Connected Overlay for suggestions dropdown -->\n<ng-template\n  cdkConnectedOverlay\n  [cdkConnectedOverlayOrigin]=\"origin\"\n  [cdkConnectedOverlayOpen]=\"isOpen()\"\n  cdkConnectedOverlayHasBackdrop\n  cdkConnectedOverlayBackdropClass=\"cdk-overlay-transparent-backdrop\"\n  (backdropClick)=\"close()\"\n  (detach)=\"close()\">\n  <div\n    [class]=\"settings.autocompleteDropdownClasses\"\n    role=\"listbox\"\n    aria-live=\"assertive\"\n    id=\"autocomplete-list\">\n    @for (option of suggestions$ | async; track trackByFn($index, option)) {\n      <div\n        [class]=\"[settings.autocompleteDropdownItemClasses, isSelected(option) ? settings.autocompleteDropdownItemSelectedClasses : '']\"\n        tabindex=\"0\"\n        (click)=\"selectOption(option)\"\n        (keyup)=\"selectOption(option)\"\n        role=\"option\"\n        [attr.aria-selected]=\"isSelected(option)\">\n        {{ displayWithFn(option) }}\n      </div>\n    }\n  </div>\n</ng-template>\n\n<div [class]=\"settings.validationFeedbackClasses\">\n  <ng-container\n    ngDefaultControl\n    validatorMessage\n    [helpMessage]=\"control().helpText\"\n    [formControlName]=\"control().name\" />\n</div>\n" }]
+        }] });
+
+var autocompleteField_component = /*#__PURE__*/Object.freeze({
+    __proto__: null,
+    AutocompleteFieldComponent: AutocompleteFieldComponent
+});
+
+class CheckboxFieldComponent extends BaseInputComponent {
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: CheckboxFieldComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.1", type: CheckboxFieldComponent, isStandalone: true, selector: "app-checkbox-field", usesInheritance: true, ngImport: i0, template: "<div>\n  <input\n    type=\"checkbox\"\n    [id]=\"id\"\n    [formControlName]=\"control.control.name\" />\n  @if (control.control.label) {\n    <label\n      [for]=\"id\"\n      [innerHTML]=\"control.control.label\">\n    </label>\n  }\n\n  <div\n    appHelpText\n    [message]=\"control.control.helpText ?? ''\"\n    appValidatorMessage\n    ngDefaultControl\n    [formControlName]=\"control.control.name\"></div>\n</div>\n", dependencies: [{ kind: "ngmodule", type: i1.CommonModule }, { kind: "ngmodule", type: i2.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.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.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: ValidatorMessageDirective, selector: "[appValidatorMessage]" }, { kind: "directive", type: HelpTextDirective, selector: "[appHelpText]", inputs: ["message"] }], viewProviders: [controlProvider] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.1", type: CheckboxFieldComponent, isStandalone: true, selector: "checkbox-field", usesInheritance: true, ngImport: i0, template: "<label [class]=\"settings.checkboxWrapperClasses\">\n  <input\n    [id]=\"control().name\"\n    [name]=\"control().name\"\n    [class]=\"settings.checkboxInputClasses\"\n    type=\"checkbox\"\n    [attr.aria-checked]=\"formControl.value ? 'true' : 'false'\"\n    [formControlName]=\"control().name\" />\n  <span\n    [class]=\"settings.checkboxLabelTextClasses\"\n    [innerHTML]=\"control().label\"></span>\n</label>\n\n<div [class]=\"settings.validationFeedbackClasses\">\n  <ng-container\n    ngDefaultControl\n    validatorMessage\n    [helpMessage]=\"control().helpText\"\n    [formControlName]=\"control().name\" />\n</div>\n", dependencies: [{ kind: "ngmodule", type: i1.ReactiveFormsModule }, { kind: "directive", type: i1.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: i1.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: HelpTextDirective, selector: "[helpMessage]", inputs: ["helpMessage"] }, { kind: "directive", type: ValidatorMessageDirective, selector: "[validatorMessage]" }], viewProviders: [controlProvider], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: CheckboxFieldComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'app-checkbox-field', imports: [...sharedControlDeps], viewProviders: [controlProvider], standalone: true, template: "<div>\n  <input\n    type=\"checkbox\"\n    [id]=\"id\"\n    [formControlName]=\"control.control.name\" />\n  @if (control.control.label) {\n    <label\n      [for]=\"id\"\n      [innerHTML]=\"control.control.label\">\n    </label>\n  }\n\n  <div\n    appHelpText\n    [message]=\"control.control.helpText ?? ''\"\n    appValidatorMessage\n    ngDefaultControl\n    [formControlName]=\"control.control.name\"></div>\n</div>\n" }]
+            args: [{ selector: 'checkbox-field', imports: [...controlDeps], changeDetection: ChangeDetectionStrategy.OnPush, viewProviders: [controlProvider], template: "<label [class]=\"settings.checkboxWrapperClasses\">\n  <input\n    [id]=\"control().name\"\n    [name]=\"control().name\"\n    [class]=\"settings.checkboxInputClasses\"\n    type=\"checkbox\"\n    [attr.aria-checked]=\"formControl.value ? 'true' : 'false'\"\n    [formControlName]=\"control().name\" />\n  <span\n    [class]=\"settings.checkboxLabelTextClasses\"\n    [innerHTML]=\"control().label\"></span>\n</label>\n\n<div [class]=\"settings.validationFeedbackClasses\">\n  <ng-container\n    ngDefaultControl\n    validatorMessage\n    [helpMessage]=\"control().helpText\"\n    [formControlName]=\"control().name\" />\n</div>\n" }]
         }] });
 
 var checkboxField_component = /*#__PURE__*/Object.freeze({
@@ -387,29 +711,33 @@ var checkboxField_component = /*#__PURE__*/Object.freeze({
     CheckboxFieldComponent: CheckboxFieldComponent
 });
 
-class CheckboxGroupFieldComponent extends BaseControlComponent {
+class CheckboxGroupFieldComponent extends BaseInputComponent {
     constructor() {
         super(...arguments);
-        this.formControl = new FormArray([], this.resolveValidators(this.control.control));
-    }
-    change(event) {
-        const element = event.target;
-        const value = element.value;
-        const index = this.formControl.value.indexOf(value);
-        if (index === -1) {
-            const fc = new FormControl(value);
-            this.formControl.push(fc);
+        this.formControl = new FormControl(Array.isArray(this.value()) ? this.value() : [], this.validatorFn);
+    }
+    isSelected(value) {
+        const selectedValues = this.formControl.value;
+        return selectedValues.includes(value);
+    }
+    onCheckboxChange(event, value) {
+        const target = event.target;
+        const isChecked = target.checked;
+        let selectedValues = this.formControl.value;
+        if (isChecked && !this.isSelected(value)) {
+            selectedValues.push(value);
         }
         else {
-            this.formControl.removeAt(index);
+            selectedValues = selectedValues.filter(item => item !== value);
         }
+        this.formControl.setValue(selectedValues);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: CheckboxGroupFieldComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.1", type: CheckboxGroupFieldComponent, isStandalone: true, selector: "app-checkbox-group-field", usesInheritance: true, ngImport: i0, template: "@if (control.control.label) {\n  <label for=\"\">\n    {{ control.control.label }}\n  </label>\n}\n\n<div\n  [formArrayName]=\"control.control.name\"\n  appHelpText\n  [message]=\"control.control.helpText ?? ''\"\n  appValidatorArrayMessage>\n  @for (option of getOptions() | async; track option.value; let index = $index) {\n    <div>\n      <input\n        type=\"checkbox\"\n        (change)=\"change($event)\"\n        [value]=\"option.value\"\n        [id]=\"id + index\" />\n      <label [for]=\"id + index\">\n        {{ option.label }}\n      </label>\n    </div>\n  }\n</div>\n", dependencies: [{ kind: "ngmodule", type: i1.CommonModule }, { kind: "ngmodule", type: i2.ReactiveFormsModule }, { kind: "directive", type: i2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2.FormArrayName, selector: "[formArrayName]", inputs: ["formArrayName"] }, { kind: "directive", type: HelpTextDirective, selector: "[appHelpText]", inputs: ["message"] }, { kind: "directive", type: ValidatorArrayMessageDirective, selector: "[appValidatorArrayMessage]" }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }], viewProviders: [controlProvider] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.1", type: CheckboxGroupFieldComponent, isStandalone: true, selector: "checkbox-group-field", usesInheritance: true, ngImport: i0, template: "<label\n  [class]=\"settings.labelClasses\"\n  [attr.for]=\"control().name\">\n  {{ control().label }}\n</label>\n\n<div [class]=\"settings.checkboxGroupContainerClasses\">\n  @for (option of options(); track option.value) {\n    <label [class]=\"settings.checkboxGroupItemWrapperClasses\">\n      <input\n        [id]=\"control().name + '-' + option.value\"\n        [name]=\"control().name + '-' + option.value\"\n        [class]=\"settings.checkboxGroupItemInputClasses\"\n        type=\"checkbox\"\n        [checked]=\"isSelected(option.value)\"\n        [disabled]=\"option.disabled\"\n        (change)=\"onCheckboxChange($event, option.value)\" />\n      <span [class]=\"settings.checkboxGroupItemLabelClasses\">{{ option.label }}</span>\n    </label>\n  }\n</div>\n\n<div [class]=\"settings.validationFeedbackClasses\">\n  <ng-container\n    ngDefaultControl\n    validatorMessage\n    [helpMessage]=\"control().helpText\"\n    [formControlName]=\"control().name\" />\n</div>\n", dependencies: [{ kind: "ngmodule", type: i1.ReactiveFormsModule }, { kind: "directive", type: i1.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: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: HelpTextDirective, selector: "[helpMessage]", inputs: ["helpMessage"] }, { kind: "directive", type: ValidatorMessageDirective, selector: "[validatorMessage]" }], viewProviders: [controlProvider], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: CheckboxGroupFieldComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'app-checkbox-group-field', imports: [...sharedControlDeps], viewProviders: [controlProvider], standalone: true, template: "@if (control.control.label) {\n  <label for=\"\">\n    {{ control.control.label }}\n  </label>\n}\n\n<div\n  [formArrayName]=\"control.control.name\"\n  appHelpText\n  [message]=\"control.control.helpText ?? ''\"\n  appValidatorArrayMessage>\n  @for (option of getOptions() | async; track option.value; let index = $index) {\n    <div>\n      <input\n        type=\"checkbox\"\n        (change)=\"change($event)\"\n        [value]=\"option.value\"\n        [id]=\"id + index\" />\n      <label [for]=\"id + index\">\n        {{ option.label }}\n      </label>\n    </div>\n  }\n</div>\n" }]
+            args: [{ selector: 'checkbox-group-field', imports: [...controlDeps], changeDetection: ChangeDetectionStrategy.OnPush, viewProviders: [controlProvider], template: "<label\n  [class]=\"settings.labelClasses\"\n  [attr.for]=\"control().name\">\n  {{ control().label }}\n</label>\n\n<div [class]=\"settings.checkboxGroupContainerClasses\">\n  @for (option of options(); track option.value) {\n    <label [class]=\"settings.checkboxGroupItemWrapperClasses\">\n      <input\n        [id]=\"control().name + '-' + option.value\"\n        [name]=\"control().name + '-' + option.value\"\n        [class]=\"settings.checkboxGroupItemInputClasses\"\n        type=\"checkbox\"\n        [checked]=\"isSelected(option.value)\"\n        [disabled]=\"option.disabled\"\n        (change)=\"onCheckboxChange($event, option.value)\" />\n      <span [class]=\"settings.checkboxGroupItemLabelClasses\">{{ option.label }}</span>\n    </label>\n  }\n</div>\n\n<div [class]=\"settings.validationFeedbackClasses\">\n  <ng-container\n    ngDefaultControl\n    validatorMessage\n    [helpMessage]=\"control().helpText\"\n    [formControlName]=\"control().name\" />\n</div>\n" }]
         }] });
 
 var checkboxGroupField_component = /*#__PURE__*/Object.freeze({
@@ -417,18 +745,57 @@ var checkboxGroupField_component = /*#__PURE__*/Object.freeze({
     CheckboxGroupFieldComponent: CheckboxGroupFieldComponent
 });
 
-class GroupFieldComponent extends BaseControlComponent {
+class ChipsListFieldComponent extends BaseInputComponent {
+    constructor() {
+        super(...arguments);
+        this.formControl = new FormControl(Array.isArray(this.value()) ? this.value() : [], this.validatorFn);
+        this.inputValue = signal('', ...(ngDevMode ? [{ debugName: "inputValue" }] : []));
+    }
+    addChip() {
+        const trimmed = this.inputValue().trim();
+        if (!trimmed) {
+            return;
+        }
+        const currentChips = this.formControl.value || [];
+        this.formControl.setValue([...currentChips, trimmed]);
+        this.inputValue.set('');
+    }
+    removeChip(chipToRemove) {
+        const currentChips = this.formControl.value || [];
+        const updatedChips = currentChips.filter(chip => chip !== chipToRemove);
+        this.formControl.setValue(updatedChips);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: ChipsListFieldComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.1", type: ChipsListFieldComponent, isStandalone: true, selector: "chips-list-field", usesInheritance: true, ngImport: i0, template: "<label\n  [class]=\"settings.labelClasses\"\n  [attr.for]=\"control().name\">\n  {{ control().label }}\n</label>\n\n<div [class]=\"settings.chipslistContainerClasses\">\n  @for (chip of formControl.value; track $index) {\n    <div [class]=\"settings.chipslistChipClasses\">\n      {{ chip }}\n      <button\n        type=\"button\"\n        [class]=\"settings.chipslistRemoveButtonClasses\"\n        (click)=\"removeChip(chip)\">\n        @if (settings.chipslistRemoveButtonIcon) {\n          <div [class]=\"settings.chipslistRemoveButtonIconClasses\">\n            <ng-container [ngComponentOutlet]=\"settings.chipslistRemoveButtonIcon\" />\n          </div>\n        }\n        @if (settings.chipslistRemoveButtonLabel) {\n          <span [class]=\"settings.chipslistRemoveButtonLabelClasses\">\n            {{ settings.chipslistRemoveButtonLabel }}\n          </span>\n        }\n      </button>\n    </div>\n  }\n</div>\n\n<div>\n  <input\n    [id]=\"control().name\"\n    [class]=\"settings.chipslistInputClasses\"\n    [name]=\"control().name\"\n    [placeholder]=\"control().placeholder ?? ''\"\n    [value]=\"inputValue()\"\n    (input)=\"inputValue.set($any($event.target).value)\"\n    (keydown.enter)=\"$event.preventDefault(); addChip()\"\n    aria-label=\"Add new chip\" />\n  <button\n    type=\"button\"\n    [class]=\"settings.chipslistAddButtonClasses\"\n    aria-label=\"Add chip\"\n    (click)=\"addChip()\">\n    @if (settings.chipslistAddButtonIcon) {\n      <div [class]=\"settings.chipslistAddButtonIconClasses\">\n        <ng-container [ngComponentOutlet]=\"settings.chipslistAddButtonIcon\" />\n      </div>\n    }\n    @if (settings.chipslistAddButtonLabel) {\n      <span [class]=\"settings.chipslistAddButtonLabelClasses\">\n        {{ settings.chipslistAddButtonLabel }}\n      </span>\n    }\n  </button>\n</div>\n\n<div [class]=\"settings.validationFeedbackClasses\">\n  <ng-container\n    ngDefaultControl\n    validatorMessage\n    [helpMessage]=\"control().helpText\"\n    [formControl]=\"formControl\" />\n</div>\n", dependencies: [{ kind: "ngmodule", type: i1.ReactiveFormsModule }, { kind: "directive", type: i1.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: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: HelpTextDirective, selector: "[helpMessage]", inputs: ["helpMessage"] }, { kind: "directive", type: ValidatorMessageDirective, selector: "[validatorMessage]" }, { kind: "directive", type: i4.NgComponentOutlet, selector: "[ngComponentOutlet]", inputs: ["ngComponentOutlet", "ngComponentOutletInputs", "ngComponentOutletInjector", "ngComponentOutletEnvironmentInjector", "ngComponentOutletContent", "ngComponentOutletNgModule", "ngComponentOutletNgModuleFactory"], exportAs: ["ngComponentOutlet"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: ChipsListFieldComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'chips-list-field', imports: [...controlDeps], changeDetection: ChangeDetectionStrategy.OnPush, template: "<label\n  [class]=\"settings.labelClasses\"\n  [attr.for]=\"control().name\">\n  {{ control().label }}\n</label>\n\n<div [class]=\"settings.chipslistContainerClasses\">\n  @for (chip of formControl.value; track $index) {\n    <div [class]=\"settings.chipslistChipClasses\">\n      {{ chip }}\n      <button\n        type=\"button\"\n        [class]=\"settings.chipslistRemoveButtonClasses\"\n        (click)=\"removeChip(chip)\">\n        @if (settings.chipslistRemoveButtonIcon) {\n          <div [class]=\"settings.chipslistRemoveButtonIconClasses\">\n            <ng-container [ngComponentOutlet]=\"settings.chipslistRemoveButtonIcon\" />\n          </div>\n        }\n        @if (settings.chipslistRemoveButtonLabel) {\n          <span [class]=\"settings.chipslistRemoveButtonLabelClasses\">\n            {{ settings.chipslistRemoveButtonLabel }}\n          </span>\n        }\n      </button>\n    </div>\n  }\n</div>\n\n<div>\n  <input\n    [id]=\"control().name\"\n    [class]=\"settings.chipslistInputClasses\"\n    [name]=\"control().name\"\n    [placeholder]=\"control().placeholder ?? ''\"\n    [value]=\"inputValue()\"\n    (input)=\"inputValue.set($any($event.target).value)\"\n    (keydown.enter)=\"$event.preventDefault(); addChip()\"\n    aria-label=\"Add new chip\" />\n  <button\n    type=\"button\"\n    [class]=\"settings.chipslistAddButtonClasses\"\n    aria-label=\"Add chip\"\n    (click)=\"addChip()\">\n    @if (settings.chipslistAddButtonIcon) {\n      <div [class]=\"settings.chipslistAddButtonIconClasses\">\n        <ng-container [ngComponentOutlet]=\"settings.chipslistAddButtonIcon\" />\n      </div>\n    }\n    @if (settings.chipslistAddButtonLabel) {\n      <span [class]=\"settings.chipslistAddButtonLabelClasses\">\n        {{ settings.chipslistAddButtonLabel }}\n      </span>\n    }\n  </button>\n</div>\n\n<div [class]=\"settings.validationFeedbackClasses\">\n  <ng-container\n    ngDefaultControl\n    validatorMessage\n    [helpMessage]=\"control().helpText\"\n    [formControl]=\"formControl\" />\n</div>\n" }]
+        }] });
+
+var chipsListField_component = /*#__PURE__*/Object.freeze({
+    __proto__: null,
+    ChipsListFieldComponent: ChipsListFieldComponent
+});
+
+class GroupFieldComponent extends BaseInputComponent {
     constructor() {
         super(...arguments);
+        this.fb = inject(NonNullableFormBuilder);
         this.controlResolver = inject(ControlResolver);
-        this.formControl = new FormGroup({});
+        this.formControl = this.fb.group({});
+        this.controls = computed(() => {
+            const ctrl = this.control();
+            return isGroupControl(ctrl) ? ctrl.controls : [];
+        }, ...(ngDevMode ? [{ debugName: "controls" }] : []));
+        this.groupValue = computed(() => this.value(), ...(ngDevMode ? [{ debugName: "groupValue" }] : []));
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: GroupFieldComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.1", type: GroupFieldComponent, isStandalone: true, selector: "app-group-field", usesInheritance: true, ngImport: i0, template: "<div [formGroupName]=\"control.control.name\">\n  @for (control of control.control.controls; track control.name) {\n    <ng-container\n      [ngComponentOutlet]=\"controlResolver.resolve(control, parentFormGroup) | async\"\n      [ngComponentOutletInjector]=\"control.name | controlInjector: control\">\n    </ng-container>\n  }\n</div>\n", dependencies: [{ kind: "ngmodule", type: i1.CommonModule }, { kind: "directive", type: i1.NgComponentOutlet, selector: "[ngComponentOutlet]", inputs: ["ngComponentOutlet", "ngComponentOutletInputs", "ngComponentOutletInjector", "ngComponentOutletEnvironmentInjector", "ngComponentOutletContent", "ngComponentOutletNgModule", "ngComponentOutletNgModuleFactory"], exportAs: ["ngComponentOutlet"] }, { kind: "ngmodule", type: i2.ReactiveFormsModule }, { kind: "directive", type: i2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2.FormGroupName, selector: "[formGroupName]", inputs: ["formGroupName"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "pipe", type: ControlInjector, name: "controlInjector" }], viewProviders: [controlProvider] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.1", type: GroupFieldComponent, isStandalone: true, selector: "group-field", usesInheritance: true, ngImport: i0, template: "<fieldset\n  [class]=\"settings.groupContainerClasses\"\n  [formGroupName]=\"control().name\">\n  @if (control().label) {\n    <legend [class]=\"settings.groupLegendClasses\">{{ control().label }}</legend>\n  }\n  @for (control of controls(); track control.name) {\n    <ng-container\n      *activateControl=\"control\"\n      [ngComponentOutlet]=\"controlResolver.resolve(control) | async\"\n      [ngComponentOutletInjector]=\"control | controlInjector: groupValue()\" />\n  }\n</fieldset>\n", dependencies: [{ kind: "ngmodule", type: i1.ReactiveFormsModule }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1.FormGroupName, selector: "[formGroupName]", inputs: ["formGroupName"] }, { kind: "directive", type: i4.NgComponentOutlet, selector: "[ngComponentOutlet]", inputs: ["ngComponentOutlet", "ngComponentOutletInputs", "ngComponentOutletInjector", "ngComponentOutletEnvironmentInjector", "ngComponentOutletContent", "ngComponentOutletNgModule", "ngComponentOutletNgModuleFactory"], exportAs: ["ngComponentOutlet"] }, { kind: "directive", type: ActivateControlDirective, selector: "[activateControl]", inputs: ["activateControl"] }, { kind: "pipe", type: ControlInjector, name: "controlInjector" }, { kind: "pipe", type: AsyncPipe, name: "async" }], viewProviders: [controlProvider], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: GroupFieldComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'app-group-field', imports: [...sharedControlDeps, ControlInjector], viewProviders: [controlProvider], standalone: true, template: "<div [formGroupName]=\"control.control.name\">\n  @for (control of control.control.controls; track control.name) {\n    <ng-container\n      [ngComponentOutlet]=\"controlResolver.resolve(control, parentFormGroup) | async\"\n      [ngComponentOutletInjector]=\"control.name | controlInjector: control\">\n    </ng-container>\n  }\n</div>\n" }]
+            args: [{ selector: 'group-field', imports: [...controlDeps, AsyncPipe], changeDetection: ChangeDetectionStrategy.OnPush, viewProviders: [controlProvider], template: "<fieldset\n  [class]=\"settings.groupContainerClasses\"\n  [formGroupName]=\"control().name\">\n  @if (control().label) {\n    <legend [class]=\"settings.groupLegendClasses\">{{ control().label }}</legend>\n  }\n  @for (control of controls(); track control.name) {\n    <ng-container\n      *activateControl=\"control\"\n      [ngComponentOutlet]=\"controlResolver.resolve(control) | async\"\n      [ngComponentOutletInjector]=\"control | controlInjector: groupValue()\" />\n  }\n</fieldset>\n" }]
         }] });
 
 var groupField_component = /*#__PURE__*/Object.freeze({
@@ -436,105 +803,178 @@ var groupField_component = /*#__PURE__*/Object.freeze({
     GroupFieldComponent: GroupFieldComponent
 });
 
-class EyeIcon {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: EyeIcon, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.1", type: EyeIcon, isStandalone: true, selector: "eye-icon", ngImport: i0, template: `<svg
-    width="100%"
-    height="100%"
-    viewBox="0 0 16 10"
-    fill="none"
-    xmlns="http://www.w3.org/2000/svg">
-    <path
-      d="M15.4569 4.7975C15.435 4.74813 14.9056 3.57375 13.7287 2.39687C12.1606 0.82875 10.18 0 7.99999 0C5.81999 0 3.83937 0.82875 2.27124 2.39687C1.09437 3.57375 0.562494 4.75 0.543119 4.7975C0.51469 4.86144 0.5 4.93064 0.5 5.00062C0.5 5.0706 0.51469 5.1398 0.543119 5.20375C0.564994 5.25312 1.09437 6.42688 2.27124 7.60375C3.83937 9.17125 5.81999 10 7.99999 10C10.18 10 12.1606 9.17125 13.7287 7.60375C14.9056 6.42688 15.435 5.25312 15.4569 5.20375C15.4853 5.1398 15.5 5.0706 15.5 5.00062C15.5 4.93064 15.4853 4.86144 15.4569 4.7975ZM7.99999 7.5C7.50554 7.5 7.02219 7.35338 6.61107 7.07867C6.19995 6.80397 5.87951 6.41352 5.6903 5.95671C5.50108 5.49989 5.45157 4.99723 5.54803 4.51227C5.64449 4.02732 5.8826 3.58186 6.23223 3.23223C6.58186 2.8826 7.02732 2.6445 7.51227 2.54804C7.99722 2.45157 8.49989 2.50108 8.9567 2.6903C9.41352 2.87952 9.80396 3.19995 10.0787 3.61107C10.3534 4.0222 10.5 4.50555 10.5 5C10.5 5.66304 10.2366 6.29893 9.76776 6.76777C9.29892 7.23661 8.66304 7.5 7.99999 7.5Z"
-      fill="#252623" />
-  </svg>`, isInline: true }); }
+class InputFieldComponent extends BaseInputComponent {
+    constructor() {
+        super(...arguments);
+        this.isPasswordOpen = signal(false, ...(ngDevMode ? [{ debugName: "isPasswordOpen" }] : []));
+        this.eyeComponent = computed(() => (this.isPasswordOpen() ? this.settings.passwordEyeOpenIcon : this.settings.passwordEyeCloseIcon), ...(ngDevMode ? [{ debugName: "eyeComponent" }] : []));
+        this.inputType = computed(() => {
+            const ctrl = this.control();
+            if (!isInputControl(ctrl)) {
+                return 'text';
+            }
+            const type = ctrl.type || 'text';
+            if (type === 'password' && this.isPasswordOpen()) {
+                return 'text';
+            }
+            return type;
+        }, ...(ngDevMode ? [{ debugName: "inputType" }] : []));
+        this.inputPlaceholder = computed(() => {
+            const ctrl = this.control();
+            return isInputControl(ctrl) ? (ctrl.placeholder ?? '') : '';
+        }, ...(ngDevMode ? [{ debugName: "inputPlaceholder" }] : []));
+    }
+    togglePassword() {
+        this.isPasswordOpen.set(!this.isPasswordOpen());
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: InputFieldComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.1", type: InputFieldComponent, isStandalone: true, selector: "input-field", usesInheritance: true, ngImport: i0, template: "<label\n  [class]=\"settings.labelClasses\"\n  [attr.for]=\"control().name\">\n  {{ control().label }}\n</label>\n\n<input\n  [class]=\"settings.inputClasses\"\n  [id]=\"control().name\"\n  [name]=\"control().name\"\n  [type]=\"inputType()\"\n  [formControlName]=\"control().name\"\n  [placeholder]=\"inputPlaceholder()\"\n  autocomplete=\"off\" />\n\n@if (control().type === 'password' && eyeComponent()) {\n  <button\n    type=\"button\"\n    [class]=\"settings.passwordIconClasses\"\n    (click)=\"togglePassword()\">\n    <ng-container [ngComponentOutlet]=\"eyeComponent()!\" />\n  </button>\n}\n\n<div [class]=\"settings.validationFeedbackClasses\">\n  <ng-container\n    ngDefaultControl\n    validatorMessage\n    [helpMessage]=\"control().helpText\"\n    [formControlName]=\"control().name\" />\n</div>\n", dependencies: [{ kind: "ngmodule", type: i1.ReactiveFormsModule }, { kind: "directive", type: i1.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: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: HelpTextDirective, selector: "[helpMessage]", inputs: ["helpMessage"] }, { kind: "directive", type: ValidatorMessageDirective, selector: "[validatorMessage]" }, { kind: "directive", type: i4.NgComponentOutlet, selector: "[ngComponentOutlet]", inputs: ["ngComponentOutlet", "ngComponentOutletInputs", "ngComponentOutletInjector", "ngComponentOutletEnvironmentInjector", "ngComponentOutletContent", "ngComponentOutletNgModule", "ngComponentOutletNgModuleFactory"], exportAs: ["ngComponentOutlet"] }], viewProviders: [controlProvider], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: EyeIcon, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: InputFieldComponent, decorators: [{
             type: Component,
-            args: [{
-                    selector: 'eye-icon',
-                    standalone: true,
-                    template: `<svg
-    width="100%"
-    height="100%"
-    viewBox="0 0 16 10"
-    fill="none"
-    xmlns="http://www.w3.org/2000/svg">
-    <path
-      d="M15.4569 4.7975C15.435 4.74813 14.9056 3.57375 13.7287 2.39687C12.1606 0.82875 10.18 0 7.99999 0C5.81999 0 3.83937 0.82875 2.27124 2.39687C1.09437 3.57375 0.562494 4.75 0.543119 4.7975C0.51469 4.86144 0.5 4.93064 0.5 5.00062C0.5 5.0706 0.51469 5.1398 0.543119 5.20375C0.564994 5.25312 1.09437 6.42688 2.27124 7.60375C3.83937 9.17125 5.81999 10 7.99999 10C10.18 10 12.1606 9.17125 13.7287 7.60375C14.9056 6.42688 15.435 5.25312 15.4569 5.20375C15.4853 5.1398 15.5 5.0706 15.5 5.00062C15.5 4.93064 15.4853 4.86144 15.4569 4.7975ZM7.99999 7.5C7.50554 7.5 7.02219 7.35338 6.61107 7.07867C6.19995 6.80397 5.87951 6.41352 5.6903 5.95671C5.50108 5.49989 5.45157 4.99723 5.54803 4.51227C5.64449 4.02732 5.8826 3.58186 6.23223 3.23223C6.58186 2.8826 7.02732 2.6445 7.51227 2.54804C7.99722 2.45157 8.49989 2.50108 8.9567 2.6903C9.41352 2.87952 9.80396 3.19995 10.0787 3.61107C10.3534 4.0222 10.5 4.50555 10.5 5C10.5 5.66304 10.2366 6.29893 9.76776 6.76777C9.29892 7.23661 8.66304 7.5 7.99999 7.5Z"
-      fill="#252623" />
-  </svg>`
-                }]
+            args: [{ selector: 'input-field', imports: [...controlDeps], changeDetection: ChangeDetectionStrategy.OnPush, viewProviders: [controlProvider], template: "<label\n  [class]=\"settings.labelClasses\"\n  [attr.for]=\"control().name\">\n  {{ control().label }}\n</label>\n\n<input\n  [class]=\"settings.inputClasses\"\n  [id]=\"control().name\"\n  [name]=\"control().name\"\n  [type]=\"inputType()\"\n  [formControlName]=\"control().name\"\n  [placeholder]=\"inputPlaceholder()\"\n  autocomplete=\"off\" />\n\n@if (control().type === 'password' && eyeComponent()) {\n  <button\n    type=\"button\"\n    [class]=\"settings.passwordIconClasses\"\n    (click)=\"togglePassword()\">\n    <ng-container [ngComponentOutlet]=\"eyeComponent()!\" />\n  </button>\n}\n\n<div [class]=\"settings.validationFeedbackClasses\">\n  <ng-container\n    ngDefaultControl\n    validatorMessage\n    [helpMessage]=\"control().helpText\"\n    [formControlName]=\"control().name\" />\n</div>\n" }]
         }] });
 
-class EyeOffIcon {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: EyeOffIcon, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.1", type: EyeOffIcon, isStandalone: true, selector: "eye-off-icon", ngImport: i0, template: `<svg
-    width="100%"
-    height="100%"
-    viewBox="0 0 16 12"
-    fill="none"
-    xmlns="http://www.w3.org/2000/svg">
-    <path
-      d="M6.04249 1.61686C6.01297 1.58451 5.99246 1.54497 5.98301 1.5022C5.97357 1.45944 5.97553 1.41494 5.9887 1.37317C6.00186 1.33139 6.02577 1.29381 6.05803 1.26419C6.09028 1.23456 6.12976 1.21393 6.17249 1.20436C6.77196 1.06729 7.38506 0.998729 7.99999 0.999981C10.18 0.999981 12.1606 1.82873 13.7287 3.39686C14.9056 4.57373 15.435 5.74811 15.4569 5.79748C15.4853 5.86143 15.5 5.93063 15.5 6.00061C15.5 6.07059 15.4853 6.13979 15.4569 6.20373C15.435 6.25311 14.9056 7.42686 13.7287 8.60373C13.5504 8.78123 13.3673 8.94936 13.1794 9.10811C13.1299 9.15008 13.0661 9.1712 13.0014 9.16701C12.9367 9.16281 12.8761 9.13362 12.8325 9.08561L6.04249 1.61686ZM13.37 11.1637C13.4151 11.2122 13.4501 11.2691 13.473 11.3311C13.496 11.3932 13.5064 11.4592 13.5036 11.5253C13.5008 11.5914 13.485 11.6563 13.4569 11.7162C13.4289 11.7762 13.3893 11.8299 13.3403 11.8744C13.2913 11.9189 13.234 11.9533 13.1717 11.9755C13.1094 11.9977 13.0432 12.0072 12.9772 12.0037C12.9111 12.0001 12.8464 11.9835 12.7868 11.9548C12.7272 11.926 12.6739 11.8857 12.63 11.8362L11.25 10.3206C10.2266 10.7733 9.11907 11.0048 7.99999 11C5.81999 11 3.83937 10.1712 2.27124 8.60373C1.09437 7.42686 0.562494 6.25311 0.543119 6.20373C0.51469 6.13979 0.5 6.07059 0.5 6.00061C0.5 5.93063 0.51469 5.86143 0.543119 5.79748C0.562494 5.74998 1.09437 4.57373 2.27124 3.39686C2.74142 2.92451 3.26591 2.50953 3.83374 2.16061L2.62999 0.836231C2.58491 0.787802 2.54989 0.730907 2.52696 0.668843C2.50402 0.606779 2.49364 0.54078 2.4964 0.474672C2.49916 0.408565 2.51502 0.343662 2.54305 0.283728C2.57108 0.223793 2.61072 0.170017 2.65969 0.125518C2.70865 0.0810184 2.76597 0.0466801 2.8283 0.0244932C2.89063 0.00230626 2.95675 -0.00728797 3.02282 -0.00373355C3.08889 -0.000179118 3.1536 0.0164534 3.21319 0.0451998C3.27279 0.0739463 3.32608 0.114235 3.36999 0.163731L13.37 11.1637ZM9.27687 8.14811L5.98374 4.52311C5.64441 4.98804 5.47591 5.55583 5.50668 6.1306C5.53746 6.70538 5.76562 7.25192 6.15266 7.67797C6.5397 8.10401 7.0619 8.38345 7.63109 8.4691C8.20028 8.55476 8.78159 8.44138 9.27687 8.14811Z"
-      fill="#252623" />
-  </svg>`, isInline: true }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: EyeOffIcon, decorators: [{
-            type: Component,
-            args: [{
-                    selector: 'eye-off-icon',
-                    standalone: true,
-                    template: `<svg
-    width="100%"
-    height="100%"
-    viewBox="0 0 16 12"
-    fill="none"
-    xmlns="http://www.w3.org/2000/svg">
-    <path
-      d="M6.04249 1.61686C6.01297 1.58451 5.99246 1.54497 5.98301 1.5022C5.97357 1.45944 5.97553 1.41494 5.9887 1.37317C6.00186 1.33139 6.02577 1.29381 6.05803 1.26419C6.09028 1.23456 6.12976 1.21393 6.17249 1.20436C6.77196 1.06729 7.38506 0.998729 7.99999 0.999981C10.18 0.999981 12.1606 1.82873 13.7287 3.39686C14.9056 4.57373 15.435 5.74811 15.4569 5.79748C15.4853 5.86143 15.5 5.93063 15.5 6.00061C15.5 6.07059 15.4853 6.13979 15.4569 6.20373C15.435 6.25311 14.9056 7.42686 13.7287 8.60373C13.5504 8.78123 13.3673 8.94936 13.1794 9.10811C13.1299 9.15008 13.0661 9.1712 13.0014 9.16701C12.9367 9.16281 12.8761 9.13362 12.8325 9.08561L6.04249 1.61686ZM13.37 11.1637C13.4151 11.2122 13.4501 11.2691 13.473 11.3311C13.496 11.3932 13.5064 11.4592 13.5036 11.5253C13.5008 11.5914 13.485 11.6563 13.4569 11.7162C13.4289 11.7762 13.3893 11.8299 13.3403 11.8744C13.2913 11.9189 13.234 11.9533 13.1717 11.9755C13.1094 11.9977 13.0432 12.0072 12.9772 12.0037C12.9111 12.0001 12.8464 11.9835 12.7868 11.9548C12.7272 11.926 12.6739 11.8857 12.63 11.8362L11.25 10.3206C10.2266 10.7733 9.11907 11.0048 7.99999 11C5.81999 11 3.83937 10.1712 2.27124 8.60373C1.09437 7.42686 0.562494 6.25311 0.543119 6.20373C0.51469 6.13979 0.5 6.07059 0.5 6.00061C0.5 5.93063 0.51469 5.86143 0.543119 5.79748C0.562494 5.74998 1.09437 4.57373 2.27124 3.39686C2.74142 2.92451 3.26591 2.50953 3.83374 2.16061L2.62999 0.836231C2.58491 0.787802 2.54989 0.730907 2.52696 0.668843C2.50402 0.606779 2.49364 0.54078 2.4964 0.474672C2.49916 0.408565 2.51502 0.343662 2.54305 0.283728C2.57108 0.223793 2.61072 0.170017 2.65969 0.125518C2.70865 0.0810184 2.76597 0.0466801 2.8283 0.0244932C2.89063 0.00230626 2.95675 -0.00728797 3.02282 -0.00373355C3.08889 -0.000179118 3.1536 0.0164534 3.21319 0.0451998C3.27279 0.0739463 3.32608 0.114235 3.36999 0.163731L13.37 11.1637ZM9.27687 8.14811L5.98374 4.52311C5.64441 4.98804 5.47591 5.55583 5.50668 6.1306C5.53746 6.70538 5.76562 7.25192 6.15266 7.67797C6.5397 8.10401 7.0619 8.38345 7.63109 8.4691C8.20028 8.55476 8.78159 8.44138 9.27687 8.14811Z"
-      fill="#252623" />
-  </svg>`
-                }]
-        }] });
+var inputField_component = /*#__PURE__*/Object.freeze({
+    __proto__: null,
+    InputFieldComponent: InputFieldComponent
+});
 
-class InputFieldComponent extends BaseControlComponent {
+class MultiSelectDropdownComponent extends BaseInputComponent {
     constructor() {
-        super(...arguments);
-        this.showPassword = false;
+        super();
+        this.formControl = new FormControl(Array.isArray(this.value()) ? this.value() : [], this.validatorFn);
+        this.items = toSignal(this.getItems(), { initialValue: [] });
+        this.isOpen = signal(false, ...(ngDevMode ? [{ debugName: "isOpen" }] : []));
+        this.multipleMode = computed(() => {
+            const ctrl = this.control();
+            return isMultiSelectControl(ctrl) ? (ctrl.multiple ?? true) : true;
+        }, ...(ngDevMode ? [{ debugName: "multipleMode" }] : []));
+        this.selectedOptionsModel = new SelectionModel(this.multipleMode());
+        this.displayOptions = toSignal(this.selectedOptionsModel.changed.pipe(map$1(() => this.selectedOptionsModel.selected)), { initialValue: [] });
+        effect(() => {
+            this.setSelectedItems(this.items());
+        });
+        effect(() => {
+            const selected = this.displayOptions();
+            this.valueHasChanged(selected);
+        });
+    }
+    setSelectedItems(items) {
+        const formControlValue = this.formControl.value;
+        this.selectedOptionsModel.clear();
+        if (Array.isArray(formControlValue)) {
+            items.forEach(item => {
+                if (formControlValue.some((val) => this.compareWithFn(item, val))) {
+                    this.selectedOptionsModel.select(item);
+                }
+            });
+        }
+        else {
+            items.forEach(item => {
+                if (this.compareWithFn(item, String(formControlValue))) {
+                    this.selectedOptionsModel.select(item);
+                }
+            });
+        }
     }
-    togglePasswordVisibility() {
-        this.showPassword = !this.showPassword;
+    getItems() {
+        return this.parentForm.valueChanges.pipe(switchMap$1(() => {
+            const control = this.control();
+            const itemsFn = control.items;
+            if (!itemsFn) {
+                return of([]);
+            }
+            if (Array.isArray(itemsFn)) {
+                return of(itemsFn);
+            }
+            const result = itemsFn(this.parentForm);
+            if (result instanceof Promise) {
+                return from(result);
+            }
+            if (result instanceof Observable) {
+                return result;
+            }
+            if (Array.isArray(result)) {
+                return of(result);
+            }
+            return of([]);
+        }));
     }
-    get inputType() {
-        if (this.control.control.type === 'password' && this.showPassword) {
-            return 'text';
+    displayWithFn(item) {
+        const control = this.control();
+        if (control.itemLabel) {
+            return String(item[control.itemLabel] ?? '');
+        }
+        else {
+            return String(item);
         }
-        return this.control.control.type ?? 'text';
     }
-    get isPasswordField() {
-        return this.control.control.type === 'password';
+    compareWithFn(item, value) {
+        const control = this.control();
+        if (control.itemValue) {
+            const itemValue = item[control.itemValue];
+            return itemValue === value;
+        }
+        else {
+            return item === value;
+        }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: InputFieldComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.1", type: InputFieldComponent, isStandalone: true, selector: "app-input-field", usesInheritance: true, ngImport: i0, template: "@if (control.control.label) {\n  <label [for]=\"id\">\n    {{ control.control.label }}\n  </label>\n}\n<div class=\"input-container\">\n  <div class=\"input-with-icon\">\n    <input\n      [placeholder]=\"control.control.placeholder ?? ''\"\n      [type]=\"inputType\"\n      [formControlName]=\"control.control.name\"\n      [checked]=\"control.control.value\"\n      [id]=\"id\"\n      [class.has-toggle]=\"isPasswordField\" />\n    @if (isPasswordField) {\n      <button\n        type=\"button\"\n        class=\"toggle-password-btn\"\n        (click)=\"togglePasswordVisibility()\"\n        [attr.aria-label]=\"showPassword ? 'Ocultar contrase\u00F1a' : 'Mostrar contrase\u00F1a'\">\n        @if (showPassword) {\n          <eye-off-icon />\n        } @else {\n          <eye-icon />\n        }\n      </button>\n    }\n  </div>\n  <div\n    appHelpText\n    [message]=\"control.control.helpText ?? ''\"\n    appValidatorMessage\n    [formControlName]=\"control.control.name\"\n    ngDefaultControl></div>\n</div>\n", styles: [".input-with-icon{position:relative}.toggle-password-btn{position:absolute;right:12px;top:50%;transform:translateY(-50%);background:none;border:none;cursor:pointer;padding:4px;display:flex;align-items:center;justify-content:center;width:24px;height:24px}.toggle-password-btn:hover{opacity:.7}input.has-toggle{padding-right:40px}\n"], dependencies: [{ kind: "ngmodule", type: i1.CommonModule }, { kind: "ngmodule", type: i2.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.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: ValidatorMessageDirective, selector: "[appValidatorMessage]" }, { kind: "directive", type: HelpTextDirective, selector: "[appHelpText]", inputs: ["message"] }, { kind: "component", type: EyeIcon, selector: "eye-icon" }, { kind: "component", type: EyeOffIcon, selector: "eye-off-icon" }], viewProviders: [controlProvider] }); }
+    valueHasChanged(items) {
+        const control = this.control();
+        const isMultiple = control.multiple !== false;
+        const values = items.map(item => {
+            if (!control.itemValue) {
+                return item;
+            }
+            return item[control.itemValue];
+        });
+        if (isMultiple) {
+            this.formControl.setValue(values, { emitEvent: false });
+        }
+        else {
+            this.formControl.setValue(values.at(0) ?? null, { emitEvent: false });
+        }
+    }
+    open() {
+        this.isOpen.set(true);
+    }
+    close() {
+        this.isOpen.set(false);
+    }
+    trackByFn(index, item) {
+        const ctrl = this.control();
+        return ctrl.itemValue ? item[ctrl.itemValue] : index;
+    }
+    toggleSelection(option) {
+        this.selectedOptionsModel.toggle(option);
+    }
+    deselectOption(event, option) {
+        event.stopPropagation();
+        this.selectedOptionsModel.deselect(option);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: MultiSelectDropdownComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.1", type: MultiSelectDropdownComponent, isStandalone: true, selector: "multi-select-dropdown", host: { listeners: { "click": "open()" } }, usesInheritance: true, ngImport: i0, template: "<label\n  [class]=\"settings.labelClasses\"\n  [attr.for]=\"control().name\">\n  {{ control().label }}\n</label>\n\n<div\n  cdkOverlayOrigin\n  #origin=\"cdkOverlayOrigin\">\n  <div>\n    @if (displayOptions().length === 0) {\n      <span>{{ settings.multiSelectEmptyText }}</span>\n    } @else {\n      <div [class]=\"settings.multiSelectDisplayedOptionsClasses\">\n        @for (option of displayOptions(); track trackByFn($index, option)) {\n          <div [class]=\"settings.multiSelectDisplayedOptionClasses\">\n            <span>{{ displayWithFn(option) }}</span>\n            <button\n              type=\"button\"\n              [class]=\"settings.multiSelectControlRemoveButtonClasses\"\n              (click)=\"deselectOption($event, option)\">\n              @if (settings.multiSelectControlRemoveButtonIcon) {\n                <div [class]=\"settings.multiSelectControlRemoveButtonIconClasses\">\n                  <ng-container [ngComponentOutlet]=\"settings.multiSelectControlRemoveButtonIcon\" />\n                </div>\n              }\n              @if (settings.multiSelectControlRemoveButtonLabel) {\n                {{ settings.multiSelectControlRemoveButtonLabel }}\n              }\n            </button>\n          </div>\n        }\n      </div>\n    }\n  </div>\n</div>\n\n<ng-template\n  cdkConnectedOverlay\n  [cdkConnectedOverlayOrigin]=\"origin\"\n  [cdkConnectedOverlayOpen]=\"isOpen()\"\n  cdkConnectedOverlayHasBackdrop\n  cdkConnectedOverlayBackdropClass=\"cdk-overlay-transparent-backdrop\"\n  (backdropClick)=\"close()\"\n  (detach)=\"close()\">\n  <div [class]=\"settings.multiselectDropdownClasses\">\n    @for (option of items(); track trackByFn($index, option)) {\n      <div [class]=\"[settings.multiselectDropdownItemClasses, selectedOptionsModel.isSelected(option) ? settings.multiselectDropdownItemSelectedClasses : '']\">\n        <label class=\"flex items-center gap-2 cursor-pointer\">\n          <input\n            [id]=\"control().name + '-option-' + $index\"\n            [name]=\"control().name + '-option-' + $index\"\n            type=\"checkbox\"\n            class=\"rounded border-gray-300 text-blue-600 focus:ring-blue-500\"\n            [checked]=\"selectedOptionsModel.isSelected(option)\"\n            (change)=\"toggleSelection(option)\"\n            [attr.aria-checked]=\"selectedOptionsModel.isSelected(option) ? 'true' : 'false'\"\n            [attr.aria-selected]=\"selectedOptionsModel.isSelected(option) ? 'true' : 'false'\"\n            role=\"option\" />\n          {{ displayWithFn(option) }}\n        </label>\n      </div>\n    }\n  </div>\n</ng-template>\n\n<div [class]=\"settings.validationFeedbackClasses\">\n  <ng-container\n    ngDefaultControl\n    validatorMessage\n    [helpMessage]=\"control().helpText\"\n    [formControl]=\"formControl\" />\n</div>\n", dependencies: [{ kind: "ngmodule", type: i1.ReactiveFormsModule }, { kind: "directive", type: i1.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: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: HelpTextDirective, selector: "[helpMessage]", inputs: ["helpMessage"] }, { kind: "directive", type: ValidatorMessageDirective, selector: "[validatorMessage]" }, { kind: "directive", type: i4.NgComponentOutlet, selector: "[ngComponentOutlet]", inputs: ["ngComponentOutlet", "ngComponentOutletInputs", "ngComponentOutletInjector", "ngComponentOutletEnvironmentInjector", "ngComponentOutletContent", "ngComponentOutletNgModule", "ngComponentOutletNgModuleFactory"], exportAs: ["ngComponentOutlet"] }, { kind: "ngmodule", type: OverlayModule }, { kind: "directive", type: i5.CdkConnectedOverlay, selector: "[cdk-connected-overlay], [connected-overlay], [cdkConnectedOverlay]", inputs: ["cdkConnectedOverlayOrigin", "cdkConnectedOverlayPositions", "cdkConnectedOverlayPositionStrategy", "cdkConnectedOverlayOffsetX", "cdkConnectedOverlayOffsetY", "cdkConnectedOverlayWidth", "cdkConnectedOverlayHeight", "cdkConnectedOverlayMinWidth", "cdkConnectedOverlayMinHeight", "cdkConnectedOverlayBackdropClass", "cdkConnectedOverlayPanelClass", "cdkConnectedOverlayViewportMargin", "cdkConnectedOverlayScrollStrategy", "cdkConnectedOverlayOpen", "cdkConnectedOverlayDisableClose", "cdkConnectedOverlayTransformOriginOn", "cdkConnectedOverlayHasBackdrop", "cdkConnectedOverlayLockPosition", "cdkConnectedOverlayFlexibleDimensions", "cdkConnectedOverlayGrowAfterOpen", "cdkConnectedOverlayPush", "cdkConnectedOverlayDisposeOnNavigation"], outputs: ["backdropClick", "positionChange", "attach", "detach", "overlayKeydown", "overlayOutsideClick"], exportAs: ["cdkConnectedOverlay"] }, { kind: "directive", type: i5.CdkOverlayOrigin, selector: "[cdk-overlay-origin], [overlay-origin], [cdkOverlayOrigin]", exportAs: ["cdkOverlayOrigin"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: InputFieldComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: MultiSelectDropdownComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'app-input-field', imports: [...sharedControlDeps, EyeIcon, EyeOffIcon], viewProviders: [controlProvider], standalone: true, template: "@if (control.control.label) {\n  <label [for]=\"id\">\n    {{ control.control.label }}\n  </label>\n}\n<div class=\"input-container\">\n  <div class=\"input-with-icon\">\n    <input\n      [placeholder]=\"control.control.placeholder ?? ''\"\n      [type]=\"inputType\"\n      [formControlName]=\"control.control.name\"\n      [checked]=\"control.control.value\"\n      [id]=\"id\"\n      [class.has-toggle]=\"isPasswordField\" />\n    @if (isPasswordField) {\n      <button\n        type=\"button\"\n        class=\"toggle-password-btn\"\n        (click)=\"togglePasswordVisibility()\"\n        [attr.aria-label]=\"showPassword ? 'Ocultar contrase\u00F1a' : 'Mostrar contrase\u00F1a'\">\n        @if (showPassword) {\n          <eye-off-icon />\n        } @else {\n          <eye-icon />\n        }\n      </button>\n    }\n  </div>\n  <div\n    appHelpText\n    [message]=\"control.control.helpText ?? ''\"\n    appValidatorMessage\n    [formControlName]=\"control.control.name\"\n    ngDefaultControl></div>\n</div>\n", styles: [".input-with-icon{position:relative}.toggle-password-btn{position:absolute;right:12px;top:50%;transform:translateY(-50%);background:none;border:none;cursor:pointer;padding:4px;display:flex;align-items:center;justify-content:center;width:24px;height:24px}.toggle-password-btn:hover{opacity:.7}input.has-toggle{padding-right:40px}\n"] }]
-        }] });
+            args: [{ selector: 'multi-select-dropdown', imports: [...controlDeps, OverlayModule], changeDetection: ChangeDetectionStrategy.OnPush, host: {
+                        '(click)': 'open()'
+                    }, template: "<label\n  [class]=\"settings.labelClasses\"\n  [attr.for]=\"control().name\">\n  {{ control().label }}\n</label>\n\n<div\n  cdkOverlayOrigin\n  #origin=\"cdkOverlayOrigin\">\n  <div>\n    @if (displayOptions().length === 0) {\n      <span>{{ settings.multiSelectEmptyText }}</span>\n    } @else {\n      <div [class]=\"settings.multiSelectDisplayedOptionsClasses\">\n        @for (option of displayOptions(); track trackByFn($index, option)) {\n          <div [class]=\"settings.multiSelectDisplayedOptionClasses\">\n            <span>{{ displayWithFn(option) }}</span>\n            <button\n              type=\"button\"\n              [class]=\"settings.multiSelectControlRemoveButtonClasses\"\n              (click)=\"deselectOption($event, option)\">\n              @if (settings.multiSelectControlRemoveButtonIcon) {\n                <div [class]=\"settings.multiSelectControlRemoveButtonIconClasses\">\n                  <ng-container [ngComponentOutlet]=\"settings.multiSelectControlRemoveButtonIcon\" />\n                </div>\n              }\n              @if (settings.multiSelectControlRemoveButtonLabel) {\n                {{ settings.multiSelectControlRemoveButtonLabel }}\n              }\n            </button>\n          </div>\n        }\n      </div>\n    }\n  </div>\n</div>\n\n<ng-template\n  cdkConnectedOverlay\n  [cdkConnectedOverlayOrigin]=\"origin\"\n  [cdkConnectedOverlayOpen]=\"isOpen()\"\n  cdkConnectedOverlayHasBackdrop\n  cdkConnectedOverlayBackdropClass=\"cdk-overlay-transparent-backdrop\"\n  (backdropClick)=\"close()\"\n  (detach)=\"close()\">\n  <div [class]=\"settings.multiselectDropdownClasses\">\n    @for (option of items(); track trackByFn($index, option)) {\n      <div [class]=\"[settings.multiselectDropdownItemClasses, selectedOptionsModel.isSelected(option) ? settings.multiselectDropdownItemSelectedClasses : '']\">\n        <label class=\"flex items-center gap-2 cursor-pointer\">\n          <input\n            [id]=\"control().name + '-option-' + $index\"\n            [name]=\"control().name + '-option-' + $index\"\n            type=\"checkbox\"\n            class=\"rounded border-gray-300 text-blue-600 focus:ring-blue-500\"\n            [checked]=\"selectedOptionsModel.isSelected(option)\"\n            (change)=\"toggleSelection(option)\"\n            [attr.aria-checked]=\"selectedOptionsModel.isSelected(option) ? 'true' : 'false'\"\n            [attr.aria-selected]=\"selectedOptionsModel.isSelected(option) ? 'true' : 'false'\"\n            role=\"option\" />\n          {{ displayWithFn(option) }}\n        </label>\n      </div>\n    }\n  </div>\n</ng-template>\n\n<div [class]=\"settings.validationFeedbackClasses\">\n  <ng-container\n    ngDefaultControl\n    validatorMessage\n    [helpMessage]=\"control().helpText\"\n    [formControl]=\"formControl\" />\n</div>\n" }]
+        }], ctorParameters: () => [] });
 
-var inputField_component = /*#__PURE__*/Object.freeze({
+var multiSelectDropdown_component = /*#__PURE__*/Object.freeze({
     __proto__: null,
-    InputFieldComponent: InputFieldComponent
+    MultiSelectDropdownComponent: MultiSelectDropdownComponent
 });
 
-class RadioFieldComponent extends BaseControlComponent {
+class RadioFieldComponent extends BaseInputComponent {
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: RadioFieldComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.1", type: RadioFieldComponent, isStandalone: true, selector: "app-radio-field", usesInheritance: true, ngImport: i0, template: "@if (control.control.label) {\n  <label for=\"\">\n    {{ control.control.label }}\n  </label>\n}\n\n<div>\n  @for (option of getOptions() | async; track option.value; let i = $index) {\n    <div>\n      <input\n        type=\"radio\"\n        [formControlName]=\"control.control.name\"\n        [value]=\"option.value\"\n        [id]=\"id + i\" />\n      <label [for]=\"id + i\">\n        {{ option.label }}\n      </label>\n    </div>\n  }\n</div>\n\n<div\n  appHelpText\n  [message]=\"control.control.helpText ?? ''\"\n  appValidatorMessage\n  [formControlName]=\"control.control.name\"\n  ngDefaultControl></div>\n", dependencies: [{ kind: "ngmodule", type: i1.CommonModule }, { kind: "ngmodule", type: i2.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.RadioControlValueAccessor, selector: "input[type=radio][formControlName],input[type=radio][formControl],input[type=radio][ngModel]", inputs: ["name", "formControlName", "value"] }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: ValidatorMessageDirective, selector: "[appValidatorMessage]" }, { kind: "directive", type: HelpTextDirective, selector: "[appHelpText]", inputs: ["message"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }], viewProviders: [controlProvider] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.1", type: RadioFieldComponent, isStandalone: true, selector: "radio-field", usesInheritance: true, ngImport: i0, template: "<label\n  [class]=\"settings.labelClasses\"\n  [for]=\"control().name\">\n  {{ control().label }}\n</label>\n\n<div [class]=\"settings.radioGroupContainerClasses\">\n  @for (option of options(); track option.value) {\n    <label [class]=\"settings.radioItemWrapperClasses\">\n      <input\n        [id]=\"control().name + '-' + option.value\"\n        [name]=\"control().name\"\n        [class]=\"settings.radioItemInputClasses\"\n        type=\"radio\"\n        [formControlName]=\"control().name\"\n        [value]=\"option.value\"\n        [attr.aria-checked]=\"formControl.value === option.value ? 'true' : 'false'\" />\n      <span [class]=\"settings.radioItemLabelClasses\">{{ option.label }}</span>\n    </label>\n  }\n</div>\n\n<div [class]=\"settings.validationFeedbackClasses\">\n  <ng-container\n    ngDefaultControl\n    validatorMessage\n    [helpMessage]=\"control().helpText\"\n    [formControlName]=\"control().name\" />\n</div>\n", dependencies: [{ kind: "ngmodule", type: i1.ReactiveFormsModule }, { kind: "directive", type: i1.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: i1.RadioControlValueAccessor, selector: "input[type=radio][formControlName],input[type=radio][formControl],input[type=radio][ngModel]", inputs: ["name", "formControlName", "value"] }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: HelpTextDirective, selector: "[helpMessage]", inputs: ["helpMessage"] }, { kind: "directive", type: ValidatorMessageDirective, selector: "[validatorMessage]" }], viewProviders: [controlProvider], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: RadioFieldComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'app-radio-field', imports: [...sharedControlDeps], viewProviders: [controlProvider], standalone: true, template: "@if (control.control.label) {\n  <label for=\"\">\n    {{ control.control.label }}\n  </label>\n}\n\n<div>\n  @for (option of getOptions() | async; track option.value; let i = $index) {\n    <div>\n      <input\n        type=\"radio\"\n        [formControlName]=\"control.control.name\"\n        [value]=\"option.value\"\n        [id]=\"id + i\" />\n      <label [for]=\"id + i\">\n        {{ option.label }}\n      </label>\n    </div>\n  }\n</div>\n\n<div\n  appHelpText\n  [message]=\"control.control.helpText ?? ''\"\n  appValidatorMessage\n  [formControlName]=\"control.control.name\"\n  ngDefaultControl></div>\n" }]
+            args: [{ selector: 'radio-field', imports: [...controlDeps], changeDetection: ChangeDetectionStrategy.OnPush, viewProviders: [controlProvider], template: "<label\n  [class]=\"settings.labelClasses\"\n  [for]=\"control().name\">\n  {{ control().label }}\n</label>\n\n<div [class]=\"settings.radioGroupContainerClasses\">\n  @for (option of options(); track option.value) {\n    <label [class]=\"settings.radioItemWrapperClasses\">\n      <input\n        [id]=\"control().name + '-' + option.value\"\n        [name]=\"control().name\"\n        [class]=\"settings.radioItemInputClasses\"\n        type=\"radio\"\n        [formControlName]=\"control().name\"\n        [value]=\"option.value\"\n        [attr.aria-checked]=\"formControl.value === option.value ? 'true' : 'false'\" />\n      <span [class]=\"settings.radioItemLabelClasses\">{{ option.label }}</span>\n    </label>\n  }\n</div>\n\n<div [class]=\"settings.validationFeedbackClasses\">\n  <ng-container\n    ngDefaultControl\n    validatorMessage\n    [helpMessage]=\"control().helpText\"\n    [formControlName]=\"control().name\" />\n</div>\n" }]
         }] });
 
 var radioField_component = /*#__PURE__*/Object.freeze({
@@ -542,6 +982,20 @@ var radioField_component = /*#__PURE__*/Object.freeze({
     RadioFieldComponent: RadioFieldComponent
 });
 
+class SelectFieldComponent extends BaseInputComponent {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: SelectFieldComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.1", type: SelectFieldComponent, isStandalone: true, selector: "select-field", usesInheritance: true, ngImport: i0, template: "<label\n  [class]=\"settings.labelClasses\"\n  [attr.for]=\"control().name\">\n  {{ control().label }}\n</label>\n\n<select\n  [class]=\"settings.selectClasses || settings.inputClasses\"\n  [id]=\"control().name\"\n  [name]=\"control().name\"\n  [formControlName]=\"control().name\">\n  @for (option of options(); track option.value) {\n    <option\n      [class]=\"settings.selectOptionClasses\"\n      [value]=\"option.value\"\n      [selected]=\"option.selected\"\n      [disabled]=\"option.disabled\">\n      {{ option.label }}\n    </option>\n  }\n</select>\n\n<div [class]=\"settings.validationFeedbackClasses\">\n  <ng-container\n    ngDefaultControl\n    validatorMessage\n    [helpMessage]=\"control().helpText\"\n    [formControlName]=\"control().name\" />\n</div>\n", dependencies: [{ kind: "ngmodule", type: i1.ReactiveFormsModule }, { kind: "directive", type: i1.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1.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: i1.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: HelpTextDirective, selector: "[helpMessage]", inputs: ["helpMessage"] }, { kind: "directive", type: ValidatorMessageDirective, selector: "[validatorMessage]" }], viewProviders: [controlProvider], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: SelectFieldComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'select-field', imports: [...controlDeps], changeDetection: ChangeDetectionStrategy.OnPush, viewProviders: [controlProvider], template: "<label\n  [class]=\"settings.labelClasses\"\n  [attr.for]=\"control().name\">\n  {{ control().label }}\n</label>\n\n<select\n  [class]=\"settings.selectClasses || settings.inputClasses\"\n  [id]=\"control().name\"\n  [name]=\"control().name\"\n  [formControlName]=\"control().name\">\n  @for (option of options(); track option.value) {\n    <option\n      [class]=\"settings.selectOptionClasses\"\n      [value]=\"option.value\"\n      [selected]=\"option.selected\"\n      [disabled]=\"option.disabled\">\n      {{ option.label }}\n    </option>\n  }\n</select>\n\n<div [class]=\"settings.validationFeedbackClasses\">\n  <ng-container\n    ngDefaultControl\n    validatorMessage\n    [helpMessage]=\"control().helpText\"\n    [formControlName]=\"control().name\" />\n</div>\n" }]
+        }] });
+
+var selectField_component = /*#__PURE__*/Object.freeze({
+    __proto__: null,
+    SelectFieldComponent: SelectFieldComponent
+});
+
 /*
  * Public API Surface of ngx-dynamic-forms
  */
@@ -550,5 +1004,5 @@ var radioField_component = /*#__PURE__*/Object.freeze({
  * Generated bundle index. Do not edit.
  */
 
-export { BaseControlComponent, CONTROL_DATA, CheckboxFieldComponent, CheckboxGroupFieldComponent, ControlInjector, ControlResolver, ControlTypeValues, ERROR_MESSAGES, ERROR_MESSAGES_ES, ErrorsComponent, GroupFieldComponent, HelpTextComponent, HelpTextDirective, InputFieldComponent, RadioFieldComponent, VALIDATION_ERROR_MESSAGES, ValidatorArrayMessageDirective, ValidatorMessageDirective, controlProvider, sharedControlDeps };
+export { ActivateControlDirective, ArrayFieldComponent, AutocompleteFieldComponent, BaseInputComponent, CONTROL_DATA, CheckboxFieldComponent, CheckboxGroupFieldComponent, ChipsListFieldComponent, ControlInjector, ControlResolver, DEFAULT_SETTINGS, ERROR_MESSAGES, ErrorMessageComponent, FieldsComponent, GroupFieldComponent, HelpTextComponent, HelpTextDirective, InputFieldComponent, MultiSelectDropdownComponent, RadioFieldComponent, SETTINGS, SPANISH_ERROR_MESSAGES, SelectFieldComponent, VALIDATION_ERROR_MESSAGES, ValidatorMessageDirective, ValidatorsService, controlDeps, controlProvider, isArrayControl, isAutocompleteControl, isGroupControl, isInputControl, isMultiSelectControl };
 //# sourceMappingURL=superlikers-dynamic-forms.mjs.map