valtech-components 2.0.397 → 2.0.399

package/fesm2022/valtech-components.mjs

@@ -11,7 +11,7 @@ import { Browser } from '@capacitor/browser';
 import * as i1$1 from '@angular/platform-browser';
 import * as i1$2 from '@angular/forms';
 import { ReactiveFormsModule, FormsModule, Validators } from '@angular/forms';
-import { map as map$1, distinctUntilChanged as distinctUntilChanged$1 } from 'rxjs/operators';
+import { map as map$1 } from 'rxjs/operators';
 import * as i1$3 from 'ng-otp-input';
 import { NgOtpInputComponent, NgOtpInputModule } from 'ng-otp-input';
 import * as i2 from '@ionic/angular';
@@ -7513,6 +7513,366 @@ const isAtEnd = (elementRef) => {
     return rect.bottom <= windowHeight;
 };
 
+class MultiSelectSearchComponent {
+    constructor() {
+        this.labelProperty = 'name';
+        this.valueProperty = 'id';
+        this.langService = inject(LangService);
+        this.icon = inject(IconService);
+        this.changeDetector = inject(ChangeDetectorRef);
+        this.searchTerm = '';
+        this.filteredItems = [];
+        this.selectedItems = [];
+        this.displayValue = '';
+        this.previousOptions = [];
+        this.isProcessingChanges = false;
+        this.label = this.langService.getText('_global', 'selectMultiple', 'Seleccionar múltiples');
+        this.placeholder = this.langService.getText('_global', 'selectOptions', 'Seleccione opciones');
+    }
+    ngOnInit() {
+        this.applyDefaultValue();
+        this.initializeItems();
+        this.syncControlValueWithSelectedItems();
+        this.updateDisplayValue();
+        this.subscribeToValueChanges();
+    }
+    ngOnDestroy() {
+        if (this.valueChangesSubscription) {
+            this.valueChangesSubscription.unsubscribe();
+        }
+    }
+    ngOnChanges(changes) {
+        if (this.isProcessingChanges) {
+            return;
+        }
+        if (changes['props']) {
+            try {
+                this.isProcessingChanges = true;
+                if (this.valueChangesSubscription) {
+                    this.valueChangesSubscription.unsubscribe();
+                }
+                if (this.props?.options) {
+                    const optionsChanged = !this.areOptionsEqual(this.previousOptions, this.props.options);
+                    if (optionsChanged) {
+                        this.previousOptions = [...this.props.options];
+                        this.initializeItems();
+                    }
+                }
+                this.syncControlValueWithSelectedItems();
+                this.updateDisplayValue();
+                this.subscribeToValueChanges();
+            }
+            finally {
+                this.isProcessingChanges = false;
+            }
+        }
+    }
+    ionViewWillEnter() {
+        if (this.isProcessingChanges) {
+            return;
+        }
+        try {
+            this.isProcessingChanges = true;
+            this.initializeItems();
+            this.syncControlValueWithSelectedItems();
+            this.updateDisplayValue();
+            this.subscribeToValueChanges();
+        }
+        finally {
+            this.isProcessingChanges = false;
+        }
+    }
+    subscribeToValueChanges() {
+        if (!this.props?.control)
+            return;
+        this.valueChangesSubscription = this.props.control.valueChanges.subscribe(value => {
+            if (this.isProcessingChanges)
+                return;
+            try {
+                this.isProcessingChanges = true;
+                this.syncControlValueWithSelectedItems();
+                this.updateDisplayValue();
+            }
+            finally {
+                this.isProcessingChanges = false;
+            }
+        });
+    }
+    areOptionsEqual(prevOptions, newOptions) {
+        if (prevOptions === newOptions)
+            return true;
+        if (!prevOptions || !newOptions)
+            return prevOptions === newOptions;
+        if (prevOptions.length !== newOptions.length)
+            return false;
+        for (let i = 0; i < prevOptions.length; i++) {
+            if (prevOptions[i][this.valueProperty] !== newOptions[i][this.valueProperty]) {
+                return false;
+            }
+        }
+        return true;
+    }
+    initializeItems() {
+        this.filteredItems = this.props?.options || [];
+    }
+    syncControlValueWithSelectedItems() {
+        if (!this.props?.control) {
+            this.selectedItems = [];
+            return;
+        }
+        const controlValue = this.props.control.value;
+        if (!Array.isArray(controlValue) || controlValue.length === 0) {
+            this.selectedItems = [];
+            return;
+        }
+        if (this.props.options && this.props.options.length > 0) {
+            const map = new Map(this.props.options.map(opt => [opt[this.valueProperty], opt]));
+            this.selectedItems = controlValue
+                .map(value => map.get(value))
+                .filter(item => item !== undefined);
+        }
+        else {
+            this.selectedItems = [];
+        }
+    }
+    applyDefaultValue() {
+        applyDefaultValueToControl(this.props);
+    }
+    onFilter(event) {
+        if (!event || event.trim() === '') {
+            this.filteredItems = this.props?.options ? [...this.props.options] : [];
+            this.changeDetector.detectChanges();
+            return;
+        }
+        if (!this.props?.options || this.props.options.length === 0) {
+            this.filteredItems = [];
+            this.changeDetector.detectChanges();
+            return;
+        }
+        const search = replaceSpecialChars(event.toLowerCase());
+        this.filteredItems = this.props.options.filter(element => {
+            const label = element[this.labelProperty]
+                ? replaceSpecialChars(String(element[this.labelProperty]).toLowerCase())
+                : '';
+            const value = element[this.valueProperty]
+                ? replaceSpecialChars(String(element[this.valueProperty]).toLowerCase())
+                : '';
+            return label.includes(search) || value.includes(search);
+        });
+        this.changeDetector.detectChanges();
+    }
+    onFocus() {
+        console.log('onFocus');
+    }
+    onBlur() {
+        console.log('onBlur');
+    }
+    openModal() {
+        if (this.modal) {
+            this.modal.present();
+        }
+    }
+    preventDefaultBehavior(event) {
+        event.preventDefault();
+        event.stopPropagation();
+        this.openModal();
+    }
+    cancelModal() {
+        // Reset filter and show all options when closing modal
+        this.searchTerm = '';
+        this.filteredItems = this.props?.options ? [...this.props.options] : [];
+        this.changeDetector.detectChanges();
+        if (this.modal) {
+            this.modal.dismiss();
+        }
+    }
+    toggleItem(item) {
+        const index = this.selectedItems.findIndex(selectedItem => selectedItem[this.valueProperty] === item[this.valueProperty]);
+        if (index === -1) {
+            this.selectedItems.push(item);
+        }
+        else {
+            this.selectedItems.splice(index, 1);
+        }
+        this.updateDisplayValue();
+    }
+    isItemSelected(item) {
+        return this.selectedItems.some(selectedItem => selectedItem[this.valueProperty] === item[this.valueProperty]);
+    }
+    clearSelection() {
+        this.selectedItems = [];
+        this.updateDisplayValue();
+    }
+    applySelection() {
+        this.applyChanges();
+        this.cancelModal();
+    }
+    updateDisplayValue() {
+        if (this.selectedItems.length === 0) {
+            this.displayValue = '';
+            return;
+        }
+        if (this.selectedItems.length === 1) {
+            this.displayValue = this.selectedItems[0][this.labelProperty];
+        }
+        else {
+            this.displayValue = `${this.selectedItems.length} elementos seleccionados`;
+        }
+    }
+    applyChanges() {
+        if (!this.props?.control) {
+            return;
+        }
+        try {
+            this.isProcessingChanges = true;
+            const values = this.selectedItems.map(item => item[this.valueProperty]);
+            this.props.control.setValue(values);
+            this.props.control.markAsDirty();
+            this.props.control.updateValueAndValidity();
+        }
+        finally {
+            this.isProcessingChanges = false;
+        }
+    }
+    reset() {
+        this.selectedItems = [];
+        this.displayValue = '';
+        if (this.props?.control) {
+            this.props.control.setValue([]);
+        }
+        this.changeDetector.detectChanges();
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: MultiSelectSearchComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: MultiSelectSearchComponent, isStandalone: true, selector: "val-multi-select-search", inputs: { label: "label", labelProperty: "labelProperty", valueProperty: "valueProperty", placeholder: "placeholder", props: "props" }, viewQueries: [{ propertyName: "modal", first: true, predicate: ["modal"], descendants: true }], usesOnChanges: true, ngImport: i0, template: `
+    <ion-input
+      type="text"
+      [value]="displayValue"
+      [placeholder]="props?.placeholder || placeholder"
+      readonly
+      (mousedown)="preventDefaultBehavior($event)"
+    />
+
+    <ion-input style="position: absolute;" [formControl]="props.control" type="hidden"></ion-input>
+
+    <ion-modal
+      #modal
+      trigger="open-modal"
+      [initialBreakpoint]="1"
+      [breakpoints]="[0, 0.5, 0.75, 1]"
+      (didDismiss)="cancelModal()"
+    >
+      <ng-template>
+        <ion-header>
+          <ion-toolbar>
+            <ion-title>{{ label }}</ion-title>
+            <ion-buttons slot="end">
+              <ion-button (click)="cancelModal()">Cerrar</ion-button>
+            </ion-buttons>
+          </ion-toolbar>
+          <ion-toolbar>
+            <val-searchbar (filterEvent)="onFilter($event)" (focusEvent)="onFocus()" (blurEvent)="onBlur()" />
+          </ion-toolbar>
+        </ion-header>
+        <ion-content>
+          <ion-list>
+            <ion-item *ngFor="let item of filteredItems" button (click)="toggleItem(item)" detail="false">
+              <ion-checkbox 
+                [checked]="isItemSelected(item)" 
+                slot="start"
+                (ionChange)="toggleItem(item)"
+              ></ion-checkbox>
+              <ion-label>{{ item[labelProperty] }}</ion-label>
+            </ion-item>
+            <ion-item *ngIf="filteredItems.length === 0" lines="none">
+              <ion-label color="dark">No se encontraron resultados</ion-label>
+            </ion-item>
+          </ion-list>
+        </ion-content>
+        <ion-footer *ngIf="selectedItems.length > 0">
+          <ion-toolbar>
+            <ion-buttons slot="end">
+              <ion-button (click)="clearSelection()">Limpiar</ion-button>
+              <ion-button fill="solid" (click)="applySelection()">Aplicar ({{ selectedItems.length }})</ion-button>
+            </ion-buttons>
+          </ion-toolbar>
+        </ion-footer>
+      </ng-template>
+    </ion-modal>
+  `, isInline: true, styles: ["ion-header{padding:8px 8px 0}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: IonicModule }, { kind: "component", type: i2.IonButton, selector: "ion-button", inputs: ["buttonType", "color", "disabled", "download", "expand", "fill", "form", "href", "mode", "rel", "routerAnimation", "routerDirection", "shape", "size", "strong", "target", "type"] }, { kind: "component", type: i2.IonButtons, selector: "ion-buttons", inputs: ["collapse"] }, { kind: "component", type: i2.IonCheckbox, selector: "ion-checkbox", inputs: ["alignment", "checked", "color", "disabled", "indeterminate", "justify", "labelPlacement", "mode", "name", "value"] }, { kind: "component", type: i2.IonContent, selector: "ion-content", inputs: ["color", "forceOverscroll", "fullscreen", "scrollEvents", "scrollX", "scrollY"] }, { kind: "component", type: i2.IonFooter, selector: "ion-footer", inputs: ["collapse", "mode", "translucent"] }, { kind: "component", type: i2.IonHeader, selector: "ion-header", inputs: ["collapse", "mode", "translucent"] }, { kind: "component", type: i2.IonInput, selector: "ion-input", inputs: ["autocapitalize", "autocomplete", "autocorrect", "autofocus", "clearInput", "clearOnEdit", "color", "counter", "counterFormatter", "debounce", "disabled", "enterkeyhint", "errorText", "fill", "helperText", "inputmode", "label", "labelPlacement", "max", "maxlength", "min", "minlength", "mode", "multiple", "name", "pattern", "placeholder", "readonly", "required", "shape", "spellcheck", "step", "type", "value"] }, { kind: "component", type: i2.IonItem, selector: "ion-item", inputs: ["button", "color", "detail", "detailIcon", "disabled", "download", "href", "lines", "mode", "rel", "routerAnimation", "routerDirection", "target", "type"] }, { kind: "component", type: i2.IonLabel, selector: "ion-label", inputs: ["color", "mode", "position"] }, { kind: "component", type: i2.IonList, selector: "ion-list", inputs: ["inset", "lines", "mode"] }, { kind: "component", type: i2.IonTitle, selector: "ion-title", inputs: ["color", "size"] }, { kind: "component", type: i2.IonToolbar, selector: "ion-toolbar", inputs: ["color", "mode"] }, { kind: "component", type: i2.IonModal, selector: "ion-modal" }, { kind: "directive", type: i2.BooleanValueAccessor, selector: "ion-checkbox,ion-toggle" }, { kind: "directive", type: i2.TextValueAccessor, selector: "ion-input:not([type=number]),ion-textarea,ion-searchbar" }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "component", type: SearchbarComponent, selector: "val-searchbar", inputs: ["disabled"], outputs: ["filterEvent", "focusEvent", "blurEvent"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: MultiSelectSearchComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'val-multi-select-search', standalone: true, imports: [CommonModule, IonicModule, FormsModule, SearchbarComponent, ReactiveFormsModule], template: `
+    <ion-input
+      type="text"
+      [value]="displayValue"
+      [placeholder]="props?.placeholder || placeholder"
+      readonly
+      (mousedown)="preventDefaultBehavior($event)"
+    />
+
+    <ion-input style="position: absolute;" [formControl]="props.control" type="hidden"></ion-input>
+
+    <ion-modal
+      #modal
+      trigger="open-modal"
+      [initialBreakpoint]="1"
+      [breakpoints]="[0, 0.5, 0.75, 1]"
+      (didDismiss)="cancelModal()"
+    >
+      <ng-template>
+        <ion-header>
+          <ion-toolbar>
+            <ion-title>{{ label }}</ion-title>
+            <ion-buttons slot="end">
+              <ion-button (click)="cancelModal()">Cerrar</ion-button>
+            </ion-buttons>
+          </ion-toolbar>
+          <ion-toolbar>
+            <val-searchbar (filterEvent)="onFilter($event)" (focusEvent)="onFocus()" (blurEvent)="onBlur()" />
+          </ion-toolbar>
+        </ion-header>
+        <ion-content>
+          <ion-list>
+            <ion-item *ngFor="let item of filteredItems" button (click)="toggleItem(item)" detail="false">
+              <ion-checkbox 
+                [checked]="isItemSelected(item)" 
+                slot="start"
+                (ionChange)="toggleItem(item)"
+              ></ion-checkbox>
+              <ion-label>{{ item[labelProperty] }}</ion-label>
+            </ion-item>
+            <ion-item *ngIf="filteredItems.length === 0" lines="none">
+              <ion-label color="dark">No se encontraron resultados</ion-label>
+            </ion-item>
+          </ion-list>
+        </ion-content>
+        <ion-footer *ngIf="selectedItems.length > 0">
+          <ion-toolbar>
+            <ion-buttons slot="end">
+              <ion-button (click)="clearSelection()">Limpiar</ion-button>
+              <ion-button fill="solid" (click)="applySelection()">Aplicar ({{ selectedItems.length }})</ion-button>
+            </ion-buttons>
+          </ion-toolbar>
+        </ion-footer>
+      </ng-template>
+    </ion-modal>
+  `, styles: ["ion-header{padding:8px 8px 0}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { modal: [{
+                type: ViewChild,
+                args: ['modal']
+            }], label: [{
+                type: Input
+            }], labelProperty: [{
+                type: Input
+            }], valueProperty: [{
+                type: Input
+            }], placeholder: [{
+                type: Input
+            }], props: [{
+                type: Input
+            }] } });
+
 class FormComponent {
     constructor(fb, elementRef) {
         this.fb = fb;
@@ -7522,16 +7882,8 @@ class FormComponent {
         this.onSelectChange = new EventEmitter();
         this.types = InputType;
         this.subscriptions = [];
-        // Cache processed field properties
-        this.processedSections = [];
-        this.previousValues = new Map();
     }
     ngOnInit() {
-        this.createForm();
-        this.processAllSections();
-        this.setupChangeTracking();
-    }
-    createForm() {
         const formControls = {};
         this.props.sections.forEach(section => {
             section.fields.forEach(field => {
@@ -7546,27 +7898,36 @@ class FormComponent {
             });
         });
         this.form = this.fb.group(formControls);
+        this.props.sections.forEach(section => {
+            section.fields
+                .filter(x => x.type === this.types.SELECT || x.type === this.types.TEXT || x.type === this.types.SEARCH_SELECT || x.type === this.types.MULTI_SELECT)
+                .forEach(field => {
+                this.trackSelectChanges(field.name);
+            });
+        });
     }
-    processAllSections() {
-        console.log('[FormComponent] Processing all sections - ONE TIME ONLY');
-        this.processedSections = this.props.sections.map(section => ({
-            name: section.name,
-            fields: section.fields.map(field => this.processField(field))
-        }));
+    ngOnDestroy() {
+        // Cleanup subscriptions to avoid memory leaks
+        this.subscriptions.forEach(sub => sub.unsubscribe());
+    }
+    trackSelectChanges(fieldName) {
+        const control = this.getControl(fieldName);
+        const subscription = control.valueChanges.subscribe(value => {
+            this.onSelectChange.emit({ field: fieldName, value });
+        });
+        this.subscriptions.push(subscription);
+    }
+    async submitHandler(token) {
+        this.onSubmit.emit({ fields: this.form.getRawValue(), token });
+    }
+    getControl(field) {
+        return this.Form.get(field);
     }
-    processField(field) {
-        // Generate token if not provided
+    getFieldProp(field) {
+        field.token;
         if (!field.token) {
             field.token = `input-${field.type}-${field.name}`;
         }
-        // Debug: verificar opciones para select fields - SOLO UNA VEZ
-        if (field.type === this.types.SEARCH_SELECT || field.type === this.types.MULTI_SELECT || field.type === this.types.MULTI_SELECT_SIMPLE) {
-            console.log(`[FormComponent] Processing field ${field.name} options:`, {
-                type: field.type,
-                optionsCount: field.options?.length || 0,
-                options: field.options?.slice(0, 2) || []
-            });
-        }
         if (field.type === this.types.NUMBER_FROM_TO) {
             const fromControl = this.getControl(`${field.name}_from`);
             const toControl = this.getControl(`${field.name}_to`);
@@ -7578,11 +7939,12 @@ class FormComponent {
                 fromControl.enable();
                 toControl.enable();
             }
-            // Modify original field object to maintain reactivity
-            field.fromControl = fromControl;
-            field.toControl = toControl;
-            field.control = undefined; // Remove control for NUMBER_FROM_TO fields
-            return field;
+            return {
+                ...field,
+                fromControl,
+                toControl,
+                control: undefined, // Remove control for NUMBER_FROM_TO fields
+            };
         }
         else {
             const control = this.getControl(field.name);
@@ -7592,65 +7954,12 @@ class FormComponent {
             else {
                 control.enable();
             }
-            // Modify original field object to maintain reactivity
-            field.control = control;
-            return field;
+            return {
+                ...field,
+                control,
+            };
         }
     }
-    setupChangeTracking() {
-        this.props.sections.forEach(section => {
-            section.fields
-                .filter(x => x.type === this.types.SELECT || x.type === this.types.TEXT || x.type === this.types.SEARCH_SELECT || x.type === this.types.MULTI_SELECT || x.type === this.types.MULTI_SELECT_SIMPLE)
-                .forEach(field => {
-                console.log(`[FormComponent] Tracking changes for field: ${field.name}, type: ${field.type}`);
-                this.trackSelectChanges(field.name);
-            });
-        });
-    }
-    ngOnDestroy() {
-        // Cleanup subscriptions to avoid memory leaks
-        this.subscriptions.forEach(sub => sub.unsubscribe());
-    }
-    trackSelectChanges(fieldName) {
-        const control = this.getControl(fieldName);
-        // Initialize previous value
-        this.previousValues.set(fieldName, control.value);
-        const subscription = control.valueChanges
-            .pipe(distinctUntilChanged$1()) // Evitar valores duplicados
-            .subscribe(value => {
-            console.log(`[FormComponent] valueChanges for ${fieldName}:`, {
-                field: fieldName,
-                newValue: value,
-                previousValue: this.previousValues.get(fieldName),
-                willEmit: this.previousValues.get(fieldName) !== value
-            });
-            // Evitar loops - solo emitir si el valor realmente cambió
-            const previousValue = this.previousValues.get(fieldName);
-            if (previousValue !== value) {
-                this.previousValues.set(fieldName, value);
-                console.log(`[FormComponent] EMITTING onSelectChange:`, { field: fieldName, value });
-                this.onSelectChange.emit({ field: fieldName, value });
-            }
-            else {
-                console.log(`[FormComponent] SKIPPING emit - same value for ${fieldName}`);
-            }
-        });
-        this.subscriptions.push(subscription);
-    }
-    async submitHandler(token) {
-        this.onSubmit.emit({ fields: this.form.getRawValue(), token });
-    }
-    getControl(field) {
-        return this.Form.get(field);
-    }
-    /**
-     * @deprecated This method is now only used internally.
-     * Use processedSections property instead to avoid multiple calls.
-     */
-    getFieldProp(field) {
-        console.warn('[FormComponent] getFieldProp is deprecated and should not be called directly');
-        return this.processField(field);
-    }
     get isAtEndOfForm() {
         return isAtEnd(this.elementRef);
     }
@@ -7663,19 +7972,6 @@ class FormComponent {
             data: this.props,
         };
     }
-    // Helper method to reset field value without triggering change event
-    resetField(fieldName, emitEvent = false) {
-        const control = this.getControl(fieldName);
-        const currentValue = control.value;
-        console.log(`[FormComponent] Resetting field ${fieldName}:`, { currentValue, emitEvent });
-        // Update our cache to avoid triggering change event
-        if (!emitEvent) {
-            this.previousValues.set(fieldName, '');
-        }
-        control.setValue('', { emitEvent });
-        control.markAsPristine();
-        control.markAsUntouched();
-    }
     get actions() {
         if (!this.form) {
             return [];
@@ -7706,53 +8002,56 @@ class FormComponent {
             size: 'large',
           }"
         ></val-display>
-        <div class="section" *ngFor="let s of processedSections">
+        <div class="section" *ngFor="let s of props.sections">
           <val-title [props]="{ content: s.name, size: 'large', color: '', bold: false }"></val-title>
           <div class="input" *ngFor="let f of s.fields">
             <val-title [props]="{ content: f.label, size: 'small', color: 'dark', bold: false }"></val-title>
             <ng-container *ngIf="f.type === types.TEXT">
-              <val-text-input [props]="f"></val-text-input>
+              <val-text-input [props]="getFieldProp(f)"></val-text-input>
             </ng-container>
             <ng-container *ngIf="f.type === types.CHECK">
               <val-check-input></val-check-input>
             </ng-container>
             <ng-container *ngIf="f.type === types.COMMENT">
-              <val-comment-input [props]="f"></val-comment-input>
+              <val-comment-input [props]="getFieldProp(f)"></val-comment-input>
             </ng-container>
             <ng-container *ngIf="f.type === types.DATE">
-              <val-date-input [props]="f"></val-date-input>
+              <val-date-input [props]="getFieldProp(f)"></val-date-input>
             </ng-container>
             <ng-container *ngIf="f.type === types.EMAIL">
-              <val-email-input [props]="f"></val-email-input>
+              <val-email-input [props]="getFieldProp(f)"></val-email-input>
             </ng-container>
             <ng-container *ngIf="f.type === types.FILE">
-              <val-file-input [props]="f"></val-file-input>
+              <val-file-input [props]="getFieldProp(f)"></val-file-input>
             </ng-container>
             <ng-container *ngIf="f.type === types.HOUR">
-              <val-hour-input [props]="f"></val-hour-input>
+              <val-hour-input [props]="getFieldProp(f)"></val-hour-input>
             </ng-container>
             <ng-container *ngIf="f.type === types.NUMBER">
-              <val-number-input [props]="f"></val-number-input>
+              <val-number-input [props]="getFieldProp(f)"></val-number-input>
             </ng-container>
             <ng-container *ngIf="f.type === types.NUMBER_FROM_TO">
-              <val-number-from-to [props]="f"></val-number-from-to>
+              <val-number-from-to [props]="getFieldProp(f)"></val-number-from-to>
             </ng-container>
             <ng-container *ngIf="f.type === types.PASSWORD">
-              <val-password-input [props]="f"></val-password-input>
+              <val-password-input [props]="getFieldProp(f)"></val-password-input>
             </ng-container>
             <ng-container *ngIf="f.type === types.PIN_CODE">
-              <val-pin-input [props]="f"></val-pin-input>
+              <val-pin-input [props]="getFieldProp(f)"></val-pin-input>
             </ng-container>
             <ng-container *ngIf="f.type === types.RADIO">
-              <val-radio-input [props]="f"></val-radio-input>
+              <val-radio-input [props]="getFieldProp(f)"></val-radio-input>
             </ng-container>
             <ng-container *ngIf="f.type === types.SELECT">
-              <val-select-input [props]="f"></val-select-input>
+              <val-select-input [props]="getFieldProp(f)"></val-select-input>
             </ng-container>
             <ng-container *ngIf="f.type === types.SEARCH_SELECT">
-              <val-select-search [props]="f"></val-select-search>
+              <val-select-search [props]="getFieldProp(f)"></val-select-search>
             </ng-container>
-            <val-hint [props]="f"></val-hint>
+            <ng-container *ngIf="f.type === types.MULTI_SELECT">
+              <val-multi-select-search [props]="getFieldProp(f)"></val-multi-select-search>
+            </ng-container>
+            <val-hint [props]="getFieldProp(f)"></val-hint>
           </div>
           <val-divider [props]="{ fill: 'solid', size: 'medium', color: 'medium' }"></val-divider>
           <ng-content></ng-content>
@@ -7763,7 +8062,7 @@ class FormComponent {
         ></val-button-group>
       </form>
     </div>
-  `, isInline: true, styles: [":root{--ion-color-primary: #7026df;--ion-color-primary-rgb: 112, 38, 223;--ion-color-primary-contrast: #ffffff;--ion-color-primary-contrast-rgb: 255, 255, 255;--ion-color-primary-shade: #6321c4;--ion-color-primary-tint: #7e3ce2;--ion-color-secondary: #e2ccff;--ion-color-secondary-rgb: 226, 204, 255;--ion-color-secondary-contrast: #000000;--ion-color-secondary-contrast-rgb: 0, 0, 0;--ion-color-secondary-shade: #c7b4e0;--ion-color-secondary-tint: #e5d1ff;--ion-color-texti: #354c69;--ion-color-texti-rgb: 53, 76, 105;--ion-color-texti-contrast: #ffffff;--ion-color-texti-contrast-rgb: 255, 255, 255;--ion-color-texti-shade: #2f435c;--ion-color-texti-tint: #495e78;--ion-color-darki: #090f1b;--ion-color-darki-rgb: 9, 15, 27;--ion-color-darki-contrast: #ffffff;--ion-color-darki-contrast-rgb: 255, 255, 255;--ion-color-darki-shade: #080d18;--ion-color-darki-tint: #222732;--ion-color-medium: #9e9e9e;--ion-color-medium-rgb: 158, 158, 158;--ion-color-medium-contrast: #000000;--ion-color-medium-contrast-rgb: 0, 0, 0;--ion-color-medium-shade: #8b8b8b;--ion-color-medium-tint: #a8a8a8;--swiper-pagination-color: var(--ion-color-primary);--swiper-navigation-color: var(--ion-color-primary);--swiper-pagination-bullet-inactive-color: var(--ion-color-medium)}@media (prefers-color-scheme: dark){:root{--ion-color-texti: #8fc1ff;--ion-color-texti-rgb: 143, 193, 255;--ion-color-texti-contrast: #000000;--ion-color-texti-contrast-rgb: 0, 0, 0;--ion-color-texti-shade: #7eaae0;--ion-color-texti-tint: #9ac7ff;--ion-color-darki: #ffffff;--ion-color-darki-rgb: 255, 255, 255;--ion-color-darki-contrast: #000000;--ion-color-darki-contrast-rgb: 0, 0, 0;--ion-color-darki-shade: #e0e0e0;--ion-color-darki-tint: #ffffff;--ion-color-primary: #8f49f8;--ion-color-primary-rgb: 143, 73, 248;--ion-color-primary-contrast: #ffffff;--ion-color-primary-contrast-rgb: 255, 255, 255;--ion-color-primary-shade: #7e40da;--ion-color-primary-tint: #9a5bf9}}.ion-color-texti{--ion-color-base: var(--ion-color-texti);--ion-color-base-rgb: var(--ion-color-texti-rgb);--ion-color-contrast: var(--ion-color-texti-contrast);--ion-color-contrast-rgb: var(--ion-color-texti-contrast-rgb);--ion-color-shade: var(--ion-color-texti-shade);--ion-color-tint: var(--ion-color-texti-tint)}.ion-color-darki{--ion-color-base: var(--ion-color-darki);--ion-color-base-rgb: var(--ion-color-darki-rgb);--ion-color-contrast: var(--ion-color-darki-contrast);--ion-color-contrast-rgb: var(--ion-color-darki-contrast-rgb);--ion-color-shade: var(--ion-color-darki-shade);--ion-color-tint: var(--ion-color-darki-tint)}.section{margin-top:1rem}.input{margin:.5rem 0}@media (min-width: 768px){.input{margin:.75rem 0}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "component", type: DisplayComponent, selector: "val-display", inputs: ["props"] }, { kind: "component", type: TitleComponent, selector: "val-title", inputs: ["props"] }, { kind: "component", type: TextInputComponent, selector: "val-text-input", inputs: ["props"] }, { kind: "component", type: CheckInputComponent, selector: "val-check-input" }, { kind: "component", type: ButtonGroupComponent, selector: "val-button-group", inputs: ["props"], outputs: ["onClick"] }, { kind: "component", type: DividerComponent, selector: "val-divider", inputs: ["props"] }, { kind: "component", type: HintComponent, selector: "val-hint", inputs: ["props"] }, { kind: "component", type: CommentInputComponent, selector: "val-comment-input", inputs: ["props"] }, { kind: "component", type: DateInputComponent, selector: "val-date-input", inputs: ["props"] }, { kind: "component", type: FileInputComponent, selector: "val-file-input", inputs: ["props"] }, { kind: "component", type: HourInputComponent, selector: "val-hour-input", inputs: ["props"] }, { kind: "component", type: EmailInputComponent, selector: "val-email-input", inputs: ["props"] }, { kind: "component", type: NumberInputComponent, selector: "val-number-input", inputs: ["props"] }, { kind: "component", type: NumberFromToComponent, selector: "val-number-from-to", inputs: ["props"] }, { kind: "component", type: RadioInputComponent, selector: "val-radio-input", inputs: ["props"] }, { kind: "component", type: PasswordInputComponent, selector: "val-password-input", inputs: ["props"] }, { kind: "component", type: PinInputComponent, selector: "val-pin-input", inputs: ["props"] }, { kind: "component", type: SelectSearchComponent, selector: "val-select-search", inputs: ["label", "labelProperty", "valueProperty", "multiple", "placeholder", "props"] }, { kind: "component", type: SearchSelectorComponent, selector: "val-select-input", inputs: ["props"] }] }); }
+  `, isInline: true, styles: [":root{--ion-color-primary: #7026df;--ion-color-primary-rgb: 112, 38, 223;--ion-color-primary-contrast: #ffffff;--ion-color-primary-contrast-rgb: 255, 255, 255;--ion-color-primary-shade: #6321c4;--ion-color-primary-tint: #7e3ce2;--ion-color-secondary: #e2ccff;--ion-color-secondary-rgb: 226, 204, 255;--ion-color-secondary-contrast: #000000;--ion-color-secondary-contrast-rgb: 0, 0, 0;--ion-color-secondary-shade: #c7b4e0;--ion-color-secondary-tint: #e5d1ff;--ion-color-texti: #354c69;--ion-color-texti-rgb: 53, 76, 105;--ion-color-texti-contrast: #ffffff;--ion-color-texti-contrast-rgb: 255, 255, 255;--ion-color-texti-shade: #2f435c;--ion-color-texti-tint: #495e78;--ion-color-darki: #090f1b;--ion-color-darki-rgb: 9, 15, 27;--ion-color-darki-contrast: #ffffff;--ion-color-darki-contrast-rgb: 255, 255, 255;--ion-color-darki-shade: #080d18;--ion-color-darki-tint: #222732;--ion-color-medium: #9e9e9e;--ion-color-medium-rgb: 158, 158, 158;--ion-color-medium-contrast: #000000;--ion-color-medium-contrast-rgb: 0, 0, 0;--ion-color-medium-shade: #8b8b8b;--ion-color-medium-tint: #a8a8a8;--swiper-pagination-color: var(--ion-color-primary);--swiper-navigation-color: var(--ion-color-primary);--swiper-pagination-bullet-inactive-color: var(--ion-color-medium)}@media (prefers-color-scheme: dark){:root{--ion-color-texti: #8fc1ff;--ion-color-texti-rgb: 143, 193, 255;--ion-color-texti-contrast: #000000;--ion-color-texti-contrast-rgb: 0, 0, 0;--ion-color-texti-shade: #7eaae0;--ion-color-texti-tint: #9ac7ff;--ion-color-darki: #ffffff;--ion-color-darki-rgb: 255, 255, 255;--ion-color-darki-contrast: #000000;--ion-color-darki-contrast-rgb: 0, 0, 0;--ion-color-darki-shade: #e0e0e0;--ion-color-darki-tint: #ffffff;--ion-color-primary: #8f49f8;--ion-color-primary-rgb: 143, 73, 248;--ion-color-primary-contrast: #ffffff;--ion-color-primary-contrast-rgb: 255, 255, 255;--ion-color-primary-shade: #7e40da;--ion-color-primary-tint: #9a5bf9}}.ion-color-texti{--ion-color-base: var(--ion-color-texti);--ion-color-base-rgb: var(--ion-color-texti-rgb);--ion-color-contrast: var(--ion-color-texti-contrast);--ion-color-contrast-rgb: var(--ion-color-texti-contrast-rgb);--ion-color-shade: var(--ion-color-texti-shade);--ion-color-tint: var(--ion-color-texti-tint)}.ion-color-darki{--ion-color-base: var(--ion-color-darki);--ion-color-base-rgb: var(--ion-color-darki-rgb);--ion-color-contrast: var(--ion-color-darki-contrast);--ion-color-contrast-rgb: var(--ion-color-darki-contrast-rgb);--ion-color-shade: var(--ion-color-darki-shade);--ion-color-tint: var(--ion-color-darki-tint)}.section{margin-top:1rem}.input{margin:.5rem 0}@media (min-width: 768px){.input{margin:.75rem 0}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "component", type: DisplayComponent, selector: "val-display", inputs: ["props"] }, { kind: "component", type: TitleComponent, selector: "val-title", inputs: ["props"] }, { kind: "component", type: TextInputComponent, selector: "val-text-input", inputs: ["props"] }, { kind: "component", type: CheckInputComponent, selector: "val-check-input" }, { kind: "component", type: ButtonGroupComponent, selector: "val-button-group", inputs: ["props"], outputs: ["onClick"] }, { kind: "component", type: DividerComponent, selector: "val-divider", inputs: ["props"] }, { kind: "component", type: HintComponent, selector: "val-hint", inputs: ["props"] }, { kind: "component", type: CommentInputComponent, selector: "val-comment-input", inputs: ["props"] }, { kind: "component", type: DateInputComponent, selector: "val-date-input", inputs: ["props"] }, { kind: "component", type: FileInputComponent, selector: "val-file-input", inputs: ["props"] }, { kind: "component", type: HourInputComponent, selector: "val-hour-input", inputs: ["props"] }, { kind: "component", type: EmailInputComponent, selector: "val-email-input", inputs: ["props"] }, { kind: "component", type: NumberInputComponent, selector: "val-number-input", inputs: ["props"] }, { kind: "component", type: NumberFromToComponent, selector: "val-number-from-to", inputs: ["props"] }, { kind: "component", type: RadioInputComponent, selector: "val-radio-input", inputs: ["props"] }, { kind: "component", type: PasswordInputComponent, selector: "val-password-input", inputs: ["props"] }, { kind: "component", type: PinInputComponent, selector: "val-pin-input", inputs: ["props"] }, { kind: "component", type: SelectSearchComponent, selector: "val-select-search", inputs: ["label", "labelProperty", "valueProperty", "multiple", "placeholder", "props"] }, { kind: "component", type: MultiSelectSearchComponent, selector: "val-multi-select-search", inputs: ["label", "labelProperty", "valueProperty", "placeholder", "props"] }, { kind: "component", type: SearchSelectorComponent, selector: "val-select-input", inputs: ["props"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: FormComponent, decorators: [{
             type: Component,
@@ -7788,6 +8087,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
                         PasswordInputComponent,
                         PinInputComponent,
                         SelectSearchComponent,
+                        MultiSelectSearchComponent,
                         SearchSelectorComponent,
                     ], template: `
     <div class="container">
@@ -7800,53 +8100,56 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
             size: 'large',
           }"
         ></val-display>
-        <div class="section" *ngFor="let s of processedSections">
+        <div class="section" *ngFor="let s of props.sections">
           <val-title [props]="{ content: s.name, size: 'large', color: '', bold: false }"></val-title>
           <div class="input" *ngFor="let f of s.fields">
             <val-title [props]="{ content: f.label, size: 'small', color: 'dark', bold: false }"></val-title>
             <ng-container *ngIf="f.type === types.TEXT">
-              <val-text-input [props]="f"></val-text-input>
+              <val-text-input [props]="getFieldProp(f)"></val-text-input>
             </ng-container>
             <ng-container *ngIf="f.type === types.CHECK">
               <val-check-input></val-check-input>
             </ng-container>
             <ng-container *ngIf="f.type === types.COMMENT">
-              <val-comment-input [props]="f"></val-comment-input>
+              <val-comment-input [props]="getFieldProp(f)"></val-comment-input>
             </ng-container>
             <ng-container *ngIf="f.type === types.DATE">
-              <val-date-input [props]="f"></val-date-input>
+              <val-date-input [props]="getFieldProp(f)"></val-date-input>
             </ng-container>
             <ng-container *ngIf="f.type === types.EMAIL">
-              <val-email-input [props]="f"></val-email-input>
+              <val-email-input [props]="getFieldProp(f)"></val-email-input>
             </ng-container>
             <ng-container *ngIf="f.type === types.FILE">
-              <val-file-input [props]="f"></val-file-input>
+              <val-file-input [props]="getFieldProp(f)"></val-file-input>
             </ng-container>
             <ng-container *ngIf="f.type === types.HOUR">
-              <val-hour-input [props]="f"></val-hour-input>
+              <val-hour-input [props]="getFieldProp(f)"></val-hour-input>
             </ng-container>
             <ng-container *ngIf="f.type === types.NUMBER">
-              <val-number-input [props]="f"></val-number-input>
+              <val-number-input [props]="getFieldProp(f)"></val-number-input>
             </ng-container>
             <ng-container *ngIf="f.type === types.NUMBER_FROM_TO">
-              <val-number-from-to [props]="f"></val-number-from-to>
+              <val-number-from-to [props]="getFieldProp(f)"></val-number-from-to>
             </ng-container>
             <ng-container *ngIf="f.type === types.PASSWORD">
-              <val-password-input [props]="f"></val-password-input>
+              <val-password-input [props]="getFieldProp(f)"></val-password-input>
             </ng-container>
             <ng-container *ngIf="f.type === types.PIN_CODE">
-              <val-pin-input [props]="f"></val-pin-input>
+              <val-pin-input [props]="getFieldProp(f)"></val-pin-input>
             </ng-container>
             <ng-container *ngIf="f.type === types.RADIO">
-              <val-radio-input [props]="f"></val-radio-input>
+              <val-radio-input [props]="getFieldProp(f)"></val-radio-input>
             </ng-container>
             <ng-container *ngIf="f.type === types.SELECT">
-              <val-select-input [props]="f"></val-select-input>
+              <val-select-input [props]="getFieldProp(f)"></val-select-input>
             </ng-container>
             <ng-container *ngIf="f.type === types.SEARCH_SELECT">
-              <val-select-search [props]="f"></val-select-search>
+              <val-select-search [props]="getFieldProp(f)"></val-select-search>
+            </ng-container>
+            <ng-container *ngIf="f.type === types.MULTI_SELECT">
+              <val-multi-select-search [props]="getFieldProp(f)"></val-multi-select-search>
             </ng-container>
-            <val-hint [props]="f"></val-hint>
+            <val-hint [props]="getFieldProp(f)"></val-hint>
           </div>
           <val-divider [props]="{ fill: 'solid', size: 'medium', color: 'medium' }"></val-divider>
           <ng-content></ng-content>