valtech-components 2.0.393 → 2.0.395

package/fesm2022/valtech-components.mjs

@@ -1,5 +1,5 @@
 import * as i0 from '@angular/core';
-import { EventEmitter, Component, Input, Output, Injectable, inject, InjectionToken, Inject, ChangeDetectorRef, HostListener, Pipe, ChangeDetectionStrategy, ViewChild, signal, computed, effect, forwardRef } from '@angular/core';
+import { EventEmitter, Component, Input, Output, Injectable, inject, InjectionToken, Inject, ChangeDetectorRef, HostListener, Pipe, ChangeDetectionStrategy, ViewChild, forwardRef } from '@angular/core';
 import { IonAvatar, IonCard, IonIcon, IonButton, IonSpinner, IonText, IonModal, IonHeader, IonToolbar, IonContent, IonButtons, IonTitle, IonProgressBar, IonCardContent, IonCardHeader, IonCardTitle, IonCardSubtitle, IonCheckbox, IonTextarea, IonDatetime, IonDatetimeButton, IonInput, IonSelect, IonSelectOption, IonLabel, IonSearchbar, IonRadioGroup, IonRadio, IonMenuButton, IonFooter, IonList, IonListHeader, IonNote, IonItem } from '@ionic/angular/standalone';
 import * as i1 from '@angular/common';
 import { CommonModule, NgStyle, Location, AsyncPipe, NgFor, NgClass } from '@angular/common';
@@ -5670,48 +5670,13 @@ class MultiSelectSimpleComponent {
         this.valueProperty = 'id';
         this.placeholder = '';
         this.langService = inject(LangService);
-        // Signals for reactive state management
-        this.isOpen = signal(false);
-        this.searchTerm = signal('');
-        this.selectedValues = signal([]);
-        // Force options to be reactive
-        this.optionsSignal = signal([]);
-        // Computed signals
-        this.displayValue = computed(() => {
-            const selected = this.selectedValues();
-            if (selected.length === 0) {
-                return '';
-            }
-            if (selected.length === 1) {
-                const option = this.getOptionByValue(selected[0]);
-                return option ? option[this.labelProperty] : '';
-            }
-            return `${selected.length} elementos seleccionados`;
-        });
-        this.filteredOptions = computed(() => {
-            // Use signal instead of props directly
-            const options = this.optionsSignal();
-            const search = this.searchTerm().toLowerCase();
-            // Debug
-            console.log('[MultiSelectSimple] filteredOptions computed:', {
-                optionsCount: options.length,
-                searchTerm: search,
-                options: options.slice(0, 3) // Primeras 3 opciones
-            });
-            if (!search) {
-                return options;
-            }
-            return options.filter(option => {
-                const label = option[this.labelProperty]
-                    ? replaceSpecialChars(String(option[this.labelProperty]).toLowerCase())
-                    : '';
-                const value = option[this.valueProperty]
-                    ? replaceSpecialChars(String(option[this.valueProperty]).toLowerCase())
-                    : '';
-                const searchTerm = replaceSpecialChars(search);
-                return label.includes(searchTerm) || value.includes(searchTerm);
-            });
-        });
+        this.changeDetector = inject(ChangeDetectorRef);
+        // Classic Angular properties
+        this.isOpen = false;
+        this.searchTerm = '';
+        this.selectedValues = [];
+        this.displayValue = '';
+        this.filteredOptions = [];
         this.searchPlaceholder = '';
         // ControlValueAccessor
         this.onChange = (_value) => { };
@@ -5720,52 +5685,29 @@ class MultiSelectSimpleComponent {
         this.searchPlaceholder = this.langService.getText('_global', 'search', 'Buscar');
         // Close dropdown when clicking outside
         document.addEventListener('click', this.handleClickOutside.bind(this));
-        // Debug effect to track when filteredOptions changes
-        effect(() => {
-            const options = this.filteredOptions();
-            console.log('[MultiSelectSimple] EFFECT - filteredOptions changed:', {
-                optionsCount: options.length,
-                options: options,
-                timestamp: new Date().toLocaleTimeString()
-            });
-        });
     }
     ngOnInit() {
-        console.log('[MultiSelectSimple] ngOnInit:', {
-            props: !!this.props,
-            options: this.props?.options?.length || 0,
-            control: !!this.props?.control
-        });
-        // Update options signal
-        if (this.props?.options) {
-            this.optionsSignal.set(this.props.options);
-        }
         this.applyDefaultValue();
+        this.initializeOptions();
         this.syncSelectedValues();
+        this.updateDisplayValue();
     }
     ngOnDestroy() {
         document.removeEventListener('click', this.handleClickOutside.bind(this));
     }
     ngOnChanges(changes) {
-        console.log('[MultiSelectSimple] ngOnChanges:', {
-            hasPropsChange: !!changes['props'],
-            props: !!this.props,
-            options: this.props?.options?.length || 0,
-            propsOptions: this.props?.options
-        });
         if (changes['props'] && this.props) {
-            // Update options signal when props change
-            if (this.props.options) {
-                console.log('[MultiSelectSimple] Updating optionsSignal with:', this.props.options);
-                this.optionsSignal.set(this.props.options);
-            }
+            this.initializeOptions();
             this.syncSelectedValues();
+            this.updateDisplayValue();
+            this.changeDetector.detectChanges();
         }
     }
     // ControlValueAccessor implementation
     writeValue(value) {
         const valueArray = this.parseValue(value);
-        this.selectedValues.set(valueArray);
+        this.selectedValues = valueArray;
+        this.updateDisplayValue();
     }
     registerOnChange(fn) {
         this.onChange = fn;
@@ -5779,8 +5721,8 @@ class MultiSelectSimpleComponent {
     // Component methods
     toggleDropdown(event) {
         event.stopPropagation();
-        this.isOpen.update(value => !value);
-        if (this.isOpen()) {
+        this.isOpen = !this.isOpen;
+        if (this.isOpen) {
             this.onTouched();
             // Focus search bar when opening
             setTimeout(() => {
@@ -5792,45 +5734,48 @@ class MultiSelectSimpleComponent {
         }
     }
     onSearch(event) {
-        this.searchTerm.set(event.detail.value || '');
+        this.searchTerm = event.detail.value || '';
+        this.filterOptions();
     }
     toggleOption(option) {
-        const value = String(option[this.valueProperty]); // Convertir a string
-        const currentSelected = this.selectedValues();
+        const value = String(option[this.valueProperty]);
         if (this.isSelected(option)) {
             // Remove from selection
-            this.selectedValues.set(currentSelected.filter(v => v !== value));
+            this.selectedValues = this.selectedValues.filter(v => v !== value);
         }
         else {
             // Add to selection
-            this.selectedValues.set([...currentSelected, value]);
+            this.selectedValues = [...this.selectedValues, value];
         }
+        this.updateDisplayValue();
         this.emitValue();
     }
     selectAll() {
-        const allValues = this.filteredOptions().map(option => String(option[this.valueProperty]));
-        const currentSelected = this.selectedValues();
+        const allValues = this.filteredOptions.map(option => String(option[this.valueProperty]));
         // Add only new values to avoid duplicates
-        const newValues = allValues.filter(value => !currentSelected.includes(value));
-        this.selectedValues.set([...currentSelected, ...newValues]);
+        const newValues = allValues.filter(value => !this.selectedValues.includes(value));
+        this.selectedValues = [...this.selectedValues, ...newValues];
+        this.updateDisplayValue();
         this.emitValue();
     }
     clearAll() {
-        this.selectedValues.set([]);
+        this.selectedValues = [];
+        this.updateDisplayValue();
         this.emitValue();
     }
     isSelected(option) {
-        return this.selectedValues().includes(String(option[this.valueProperty]));
+        return this.selectedValues.includes(String(option[this.valueProperty]));
     }
     trackByFn(_index, option) {
         return option[this.valueProperty];
     }
     handleClickOutside(event) {
-        if (this.isOpen() &&
+        if (this.isOpen &&
             !this.mainInputRef?.nativeElement?.contains(event.target) &&
             !this.dropdownRef?.nativeElement?.contains(event.target)) {
-            this.isOpen.set(false);
-            this.searchTerm.set('');
+            this.isOpen = false;
+            this.searchTerm = '';
+            this.initializeOptions();
         }
     }
     parseValue(value) {
@@ -5844,7 +5789,7 @@ class MultiSelectSimpleComponent {
         return [String(value)];
     }
     emitValue() {
-        const value = this.selectedValues().join(',');
+        const value = this.selectedValues.join(',');
         this.onChange(value);
         if (this.props?.control) {
             this.props.control.setValue(value);
@@ -5853,27 +5798,49 @@ class MultiSelectSimpleComponent {
         }
     }
     getOptionByValue(value) {
-        return this.optionsSignal().find(option => String(option[this.valueProperty]) === String(value));
+        return this.filteredOptions.find(option => String(option[this.valueProperty]) === String(value));
     }
     applyDefaultValue() {
         if (this.props) {
             applyDefaultValueToControl(this.props);
         }
     }
-    debugOptions() {
-        console.log('[MultiSelectSimple] DEBUG CLICK:', {
-            props: this.props,
-            filteredOptions: this.filteredOptions(),
-            searchTerm: this.searchTerm(),
-            propsOptions: this.props?.options,
-            optionsSignal: this.optionsSignal(),
-            computed: this.filteredOptions()
+    initializeOptions() {
+        this.filteredOptions = this.props?.options || [];
+    }
+    filterOptions() {
+        if (!this.searchTerm) {
+            this.initializeOptions();
+            return;
+        }
+        const search = replaceSpecialChars(this.searchTerm.toLowerCase());
+        this.filteredOptions = (this.props?.options || []).filter(option => {
+            const label = option[this.labelProperty]
+                ? replaceSpecialChars(String(option[this.labelProperty]).toLowerCase())
+                : '';
+            const value = option[this.valueProperty]
+                ? replaceSpecialChars(String(option[this.valueProperty]).toLowerCase())
+                : '';
+            return label.includes(search) || value.includes(search);
         });
     }
+    updateDisplayValue() {
+        if (this.selectedValues.length === 0) {
+            this.displayValue = '';
+            return;
+        }
+        if (this.selectedValues.length === 1) {
+            const option = this.getOptionByValue(this.selectedValues[0]);
+            this.displayValue = option ? option[this.labelProperty] : '';
+        }
+        else {
+            this.displayValue = `${this.selectedValues.length} elementos seleccionados`;
+        }
+    }
     syncSelectedValues() {
         if (this.props?.control?.value) {
             const valueArray = this.parseValue(this.props.control.value);
-            this.selectedValues.set(valueArray);
+            this.selectedValues = valueArray;
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: MultiSelectSimpleComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
@@ -5889,18 +5856,18 @@ class MultiSelectSimpleComponent {
       <ion-input
         #mainInput
         type="text"
-        [value]="displayValue()"
+        [value]="displayValue"
         [placeholder]="props?.placeholder || placeholder"
         readonly
         class="main-input"
-        [class.is-open]="isOpen()"
+        [class.is-open]="isOpen"
       />
       
       <!-- Dropdown icon -->
       <ion-icon 
         name="chevron-down-outline" 
         class="dropdown-icon" 
-        [class.rotated]="isOpen()"
+        [class.rotated]="isOpen"
       ></ion-icon>
       
       <!-- Hidden input for form control -->
@@ -5914,7 +5881,7 @@ class MultiSelectSimpleComponent {
     <!-- Dropdown overlay -->
     <div 
       class="dropdown-overlay" 
-      [class.visible]="isOpen()"
+      [class.visible]="isOpen"
       #dropdown
     >
       <!-- Search bar -->
@@ -5923,7 +5890,7 @@ class MultiSelectSimpleComponent {
           #searchbar
           [placeholder]="searchPlaceholder"
           (ionInput)="onSearch($event)"
-          [value]="searchTerm()"
+          [value]="searchTerm"
           show-clear-button="focus"
         ></ion-searchbar>
       </div>
@@ -5934,7 +5901,7 @@ class MultiSelectSimpleComponent {
           fill="clear" 
           size="small" 
           (click)="selectAll()"
-          [disabled]="filteredOptions().length === 0"
+          [disabled]="filteredOptions.length === 0"
         >
           Seleccionar todos
         </ion-button>
@@ -5943,22 +5910,17 @@ class MultiSelectSimpleComponent {
           size="small" 
           color="medium" 
           (click)="clearAll()"
-          [disabled]="selectedValues().length === 0"
+          [disabled]="selectedValues.length === 0"
         >
           Limpiar
         </ion-button>
       </div>
       
-      <!-- Debug button -->
-      <div class="search-container" style="background: red; color: white; padding: 4px;">
-        <button (click)="debugOptions()">DEBUG: {{ filteredOptions().length }} opciones</button>
-      </div>
-      
       <!-- Options list -->
       <div class="options-container">
         <ion-list class="options-list">
           <ion-item 
-            *ngFor="let option of filteredOptions(); trackBy: trackByFn" 
+            *ngFor="let option of filteredOptions; trackBy: trackByFn" 
             button 
             (click)="toggleOption(option)"
             class="option-item"
@@ -5971,9 +5933,9 @@ class MultiSelectSimpleComponent {
           </ion-item>
           
           <!-- No results message -->
-          <ion-item *ngIf="filteredOptions().length === 0" class="no-results">
+          <ion-item *ngIf="filteredOptions.length === 0" class="no-results">
             <ion-label color="medium">
-              {{ searchTerm() ? 'No se encontraron resultados' : 'No hay opciones disponibles' }}
+              {{ searchTerm ? 'No se encontraron resultados' : 'No hay opciones disponibles' }}
             </ion-label>
           </ion-item>
         </ion-list>
@@ -5995,18 +5957,18 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
       <ion-input
         #mainInput
         type="text"
-        [value]="displayValue()"
+        [value]="displayValue"
         [placeholder]="props?.placeholder || placeholder"
         readonly
         class="main-input"
-        [class.is-open]="isOpen()"
+        [class.is-open]="isOpen"
       />
       
       <!-- Dropdown icon -->
       <ion-icon 
         name="chevron-down-outline" 
         class="dropdown-icon" 
-        [class.rotated]="isOpen()"
+        [class.rotated]="isOpen"
       ></ion-icon>
       
       <!-- Hidden input for form control -->
@@ -6020,7 +5982,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
     <!-- Dropdown overlay -->
     <div 
       class="dropdown-overlay" 
-      [class.visible]="isOpen()"
+      [class.visible]="isOpen"
       #dropdown
     >
       <!-- Search bar -->
@@ -6029,7 +5991,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
           #searchbar
           [placeholder]="searchPlaceholder"
           (ionInput)="onSearch($event)"
-          [value]="searchTerm()"
+          [value]="searchTerm"
           show-clear-button="focus"
         ></ion-searchbar>
       </div>
@@ -6040,7 +6002,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
           fill="clear" 
           size="small" 
           (click)="selectAll()"
-          [disabled]="filteredOptions().length === 0"
+          [disabled]="filteredOptions.length === 0"
         >
           Seleccionar todos
         </ion-button>
@@ -6049,22 +6011,17 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
           size="small" 
           color="medium" 
           (click)="clearAll()"
-          [disabled]="selectedValues().length === 0"
+          [disabled]="selectedValues.length === 0"
         >
           Limpiar
         </ion-button>
       </div>
       
-      <!-- Debug button -->
-      <div class="search-container" style="background: red; color: white; padding: 4px;">
-        <button (click)="debugOptions()">DEBUG: {{ filteredOptions().length }} opciones</button>
-      </div>
-      
       <!-- Options list -->
       <div class="options-container">
         <ion-list class="options-list">
           <ion-item 
-            *ngFor="let option of filteredOptions(); trackBy: trackByFn" 
+            *ngFor="let option of filteredOptions; trackBy: trackByFn" 
             button 
             (click)="toggleOption(option)"
             class="option-item"
@@ -6077,9 +6034,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
           </ion-item>
           
           <!-- No results message -->
-          <ion-item *ngIf="filteredOptions().length === 0" class="no-results">
+          <ion-item *ngIf="filteredOptions.length === 0" class="no-results">
             <ion-label color="medium">
-              {{ searchTerm() ? 'No se encontraron resultados' : 'No hay opciones disponibles' }}
+              {{ searchTerm ? 'No se encontraron resultados' : 'No hay opciones disponibles' }}
             </ion-label>
           </ion-item>
         </ion-list>
@@ -6817,105 +6774,39 @@ class SelectSearchComponent {
         this.valueProperty = 'id';
         this.placeholder = '';
         this.langService = inject(LangService);
-        // Signals for reactive state management
-        this.isOpen = signal(false);
-        this.searchTerm = signal('');
-        this.selectedValue = signal(null);
-        // Force options to be reactive
-        this.optionsSignal = signal([]);
-        // Computed signals
-        this.displayValue = computed(() => {
-            const value = this.selectedValue();
-            if (!value)
-                return '';
-            const option = this.getOptionByValue(value);
-            return option ? option[this.labelProperty] : '';
-        });
-        this.filteredOptions = computed(() => {
-            // Use signal instead of props directly
-            const options = this.optionsSignal();
-            const search = this.searchTerm().toLowerCase();
-            // Debug mejorado
-            console.log('[SelectSearch] filteredOptions computed:', {
-                optionsCount: options.length,
-                searchTerm: search,
-                options: options,
-                labelProperty: this.labelProperty,
-                valueProperty: this.valueProperty,
-                propsExists: !!this.props,
-                propsOptionsExists: !!this.props?.options,
-                propsOptionsLength: this.props?.options?.length || 0,
-                firstOptionStructure: options[0] ? {
-                    [this.labelProperty]: options[0][this.labelProperty],
-                    [this.valueProperty]: options[0][this.valueProperty],
-                    typeOfId: typeof options[0][this.valueProperty],
-                    fullOption: options[0]
-                } : 'NO_OPTIONS'
-            });
-            if (!search) {
-                return options;
-            }
-            return options.filter(option => {
-                const label = option[this.labelProperty]
-                    ? replaceSpecialChars(String(option[this.labelProperty]).toLowerCase())
-                    : '';
-                const value = option[this.valueProperty]
-                    ? replaceSpecialChars(String(option[this.valueProperty]).toLowerCase())
-                    : '';
-                const searchTerm = replaceSpecialChars(search);
-                return label.includes(searchTerm) || value.includes(searchTerm);
-            });
-        });
+        this.changeDetector = inject(ChangeDetectorRef);
+        // Classic Angular properties
+        this.isOpen = false;
+        this.searchTerm = '';
+        this.selectedValue = null;
+        this.displayValue = '';
+        this.filteredOptions = [];
         this.placeholder = this.langService.getText('_global', 'selectOption', 'Seleccione una opción');
         // Close dropdown when clicking outside
         document.addEventListener('click', this.handleClickOutside.bind(this));
-        // Debug effect to track when filteredOptions changes
-        effect(() => {
-            const options = this.filteredOptions();
-            console.log('[SelectSearch] EFFECT - filteredOptions changed:', {
-                optionsCount: options.length,
-                options: options,
-                timestamp: new Date().toLocaleTimeString()
-            });
-        });
     }
     ngOnInit() {
-        console.log('[SelectSearch] ngOnInit:', {
-            props: !!this.props,
-            options: this.props?.options?.length || 0,
-            control: !!this.props?.control
-        });
-        // Update options signal
-        if (this.props?.options) {
-            this.optionsSignal.set(this.props.options);
-        }
         this.applyDefaultValue();
+        this.initializeOptions();
         this.syncSelectedValue();
+        this.updateDisplayValue();
     }
     ngOnDestroy() {
         document.removeEventListener('click', this.handleClickOutside.bind(this));
     }
     ngOnChanges(changes) {
-        console.log('[SelectSearch] ngOnChanges:', {
-            hasPropsChange: !!changes['props'],
-            props: !!this.props,
-            options: this.props?.options?.length || 0,
-            propsOptions: this.props?.options
-        });
         if (changes['props'] && this.props) {
-            // Update options signal when props change
-            if (this.props.options) {
-                console.log('[SelectSearch] Updating optionsSignal with:', this.props.options);
-                this.optionsSignal.set(this.props.options);
-            }
+            this.initializeOptions();
             this.syncSelectedValue();
+            this.updateDisplayValue();
+            this.changeDetector.detectChanges();
         }
     }
     // Component methods
     toggleDropdown(event) {
         event.stopPropagation();
-        this.isOpen.update(value => !value);
-        if (this.isOpen()) {
+        this.isOpen = !this.isOpen;
+        if (this.isOpen) {
             // Focus search bar when opening if available
             setTimeout(() => {
                 const searchbar = this.dropdownRef?.nativeElement?.querySelector('ion-searchbar');
@@ -6926,13 +6817,16 @@ class SelectSearchComponent {
         }
     }
     onSearch(event) {
-        this.searchTerm.set(event.detail.value || '');
+        this.searchTerm = event.detail.value || '';
+        this.filterOptions();
     }
     selectOption(option) {
-        const value = String(option[this.valueProperty]); // Convertir a string
-        this.selectedValue.set(value);
-        this.isOpen.set(false);
-        this.searchTerm.set('');
+        const value = String(option[this.valueProperty]);
+        this.selectedValue = value;
+        this.isOpen = false;
+        this.searchTerm = '';
+        this.updateDisplayValue();
+        this.initializeOptions(); // Reset filter
         // Update form control
         if (this.props?.control) {
             this.props.control.setValue(value);
@@ -6941,21 +6835,49 @@ class SelectSearchComponent {
         }
     }
     isSelected(option) {
-        return String(this.selectedValue()) === String(option[this.valueProperty]);
+        return String(this.selectedValue) === String(option[this.valueProperty]);
     }
     trackByFn(_index, option) {
         return option[this.valueProperty];
     }
     handleClickOutside(event) {
-        if (this.isOpen() &&
+        if (this.isOpen &&
             !this.mainInputRef?.nativeElement?.contains(event.target) &&
             !this.dropdownRef?.nativeElement?.contains(event.target)) {
-            this.isOpen.set(false);
-            this.searchTerm.set('');
+            this.isOpen = false;
+            this.searchTerm = '';
+            this.initializeOptions();
         }
     }
     getOptionByValue(value) {
-        return this.optionsSignal().find(option => String(option[this.valueProperty]) === String(value));
+        return this.filteredOptions.find(option => String(option[this.valueProperty]) === String(value));
+    }
+    initializeOptions() {
+        this.filteredOptions = this.props?.options || [];
+    }
+    filterOptions() {
+        if (!this.searchTerm) {
+            this.initializeOptions();
+            return;
+        }
+        const search = replaceSpecialChars(this.searchTerm.toLowerCase());
+        this.filteredOptions = (this.props?.options || []).filter(option => {
+            const label = option[this.labelProperty]
+                ? replaceSpecialChars(String(option[this.labelProperty]).toLowerCase())
+                : '';
+            const value = option[this.valueProperty]
+                ? replaceSpecialChars(String(option[this.valueProperty]).toLowerCase())
+                : '';
+            return label.includes(search) || value.includes(search);
+        });
+    }
+    updateDisplayValue() {
+        if (!this.selectedValue) {
+            this.displayValue = '';
+            return;
+        }
+        const option = this.getOptionByValue(this.selectedValue);
+        this.displayValue = option ? option[this.labelProperty] : '';
     }
     applyDefaultValue() {
         if (this.props) {
@@ -6965,15 +6887,17 @@ class SelectSearchComponent {
     debugOptions() {
         console.log('[SelectSearch] DEBUG CLICK:', {
             props: this.props,
-            filteredOptions: this.filteredOptions(),
-            searchTerm: this.searchTerm(),
+            filteredOptions: this.filteredOptions,
+            searchTerm: this.searchTerm,
             propsOptions: this.props?.options,
-            computed: this.filteredOptions()
+            displayValue: this.displayValue,
+            selectedValue: this.selectedValue,
+            isOpen: this.isOpen
         });
     }
     syncSelectedValue() {
         if (this.props?.control?.value) {
-            this.selectedValue.set(String(this.props.control.value));
+            this.selectedValue = String(this.props.control.value);
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: SelectSearchComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
@@ -6983,18 +6907,18 @@ class SelectSearchComponent {
       <ion-input
         #mainInput
         type="text"
-        [value]="displayValue()"
+        [value]="displayValue"
         [placeholder]="props?.placeholder || placeholder"
         readonly
         class="main-input"
-        [class.is-open]="isOpen()"
+        [class.is-open]="isOpen"
       />
       
       <!-- Dropdown icon -->
       <ion-icon 
         name="chevron-down-outline" 
         class="dropdown-icon" 
-        [class.rotated]="isOpen()"
+        [class.rotated]="isOpen"
       ></ion-icon>
       
       <!-- Hidden input for form control -->
@@ -7008,12 +6932,12 @@ class SelectSearchComponent {
     <!-- Dropdown overlay -->
     <div 
       class="dropdown-overlay" 
-      [class.visible]="isOpen()"
+      [class.visible]="isOpen"
       #dropdown
     >
       <!-- Debug button -->
       <div class="search-container" style="background: red; color: white; padding: 4px;">
-        <button (click)="debugOptions()">DEBUG: {{ filteredOptions().length }} opciones</button>
+        <button (click)="debugOptions()">DEBUG: {{ filteredOptions.length }} opciones</button>
       </div>
       
       <!-- Search bar -->
@@ -7022,7 +6946,7 @@ class SelectSearchComponent {
           #searchbar
           [placeholder]="'Buscar'"
           (ionInput)="onSearch($event)"
-          [value]="searchTerm()"
+          [value]="searchTerm"
           show-clear-button="focus"
           [debounce]="200"
         ></ion-searchbar>
@@ -7032,7 +6956,7 @@ class SelectSearchComponent {
       <div class="options-container">
         <ion-list class="options-list">
           <ion-item 
-            *ngFor="let option of filteredOptions(); trackBy: trackByFn" 
+            *ngFor="let option of filteredOptions; trackBy: trackByFn" 
             button 
             (click)="selectOption(option)"
             class="option-item"
@@ -7047,11 +6971,11 @@ class SelectSearchComponent {
           </ion-item>
           
           <!-- No results message -->
-          <ion-item *ngIf="filteredOptions().length === 0" class="no-results">
+          <ion-item *ngIf="filteredOptions.length === 0" class="no-results">
             <ion-label color="medium">
-              {{ searchTerm() ? 'No se encontraron resultados' : 'No hay opciones disponibles' }}
+              {{ searchTerm ? 'No se encontraron resultados' : 'No hay opciones disponibles' }}
               <!-- Debug info -->
-              <br><small>Debug: {{ filteredOptions().length }} opciones | Props: {{ !!props }} | Search: "{{ searchTerm() }}"</small>
+              <br><small>Debug: {{ filteredOptions.length }} opciones | Props: {{ !!props }} | Search: "{{ searchTerm }}"</small>
             </ion-label>
           </ion-item>
         </ion-list>
@@ -7067,18 +6991,18 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
       <ion-input
         #mainInput
         type="text"
-        [value]="displayValue()"
+        [value]="displayValue"
         [placeholder]="props?.placeholder || placeholder"
         readonly
         class="main-input"
-        [class.is-open]="isOpen()"
+        [class.is-open]="isOpen"
       />
       
       <!-- Dropdown icon -->
       <ion-icon 
         name="chevron-down-outline" 
         class="dropdown-icon" 
-        [class.rotated]="isOpen()"
+        [class.rotated]="isOpen"
       ></ion-icon>
       
       <!-- Hidden input for form control -->
@@ -7092,12 +7016,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
     <!-- Dropdown overlay -->
     <div 
       class="dropdown-overlay" 
-      [class.visible]="isOpen()"
+      [class.visible]="isOpen"
       #dropdown
     >
       <!-- Debug button -->
       <div class="search-container" style="background: red; color: white; padding: 4px;">
-        <button (click)="debugOptions()">DEBUG: {{ filteredOptions().length }} opciones</button>
+        <button (click)="debugOptions()">DEBUG: {{ filteredOptions.length }} opciones</button>
       </div>
       
       <!-- Search bar -->
@@ -7106,7 +7030,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
           #searchbar
           [placeholder]="'Buscar'"
           (ionInput)="onSearch($event)"
-          [value]="searchTerm()"
+          [value]="searchTerm"
           show-clear-button="focus"
           [debounce]="200"
         ></ion-searchbar>
@@ -7116,7 +7040,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
       <div class="options-container">
         <ion-list class="options-list">
           <ion-item 
-            *ngFor="let option of filteredOptions(); trackBy: trackByFn" 
+            *ngFor="let option of filteredOptions; trackBy: trackByFn" 
             button 
             (click)="selectOption(option)"
             class="option-item"
@@ -7131,11 +7055,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
           </ion-item>
           
           <!-- No results message -->
-          <ion-item *ngIf="filteredOptions().length === 0" class="no-results">
+          <ion-item *ngIf="filteredOptions.length === 0" class="no-results">
             <ion-label color="medium">
-              {{ searchTerm() ? 'No se encontraron resultados' : 'No hay opciones disponibles' }}
+              {{ searchTerm ? 'No se encontraron resultados' : 'No hay opciones disponibles' }}
               <!-- Debug info -->
-              <br><small>Debug: {{ filteredOptions().length }} opciones | Props: {{ !!props }} | Search: "{{ searchTerm() }}"</small>
+              <br><small>Debug: {{ filteredOptions.length }} opciones | Props: {{ !!props }} | Search: "{{ searchTerm }}"</small>
             </ion-label>
           </ion-item>
         </ion-list>
@@ -8325,9 +8249,16 @@ 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 => {
@@ -8342,6 +8273,60 @@ class FormComponent {
             });
         });
         this.form = this.fb.group(formControls);
+    }
+    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))
+        }));
+    }
+    processField(field) {
+        // Generate token if not provided
+        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`);
+            if (field.state === ComponentStates.DISABLED) {
+                fromControl.disable();
+                toControl.disable();
+            }
+            else {
+                fromControl.enable();
+                toControl.enable();
+            }
+            return {
+                ...field,
+                fromControl,
+                toControl,
+                control: undefined, // Remove control for NUMBER_FROM_TO fields
+            };
+        }
+        else {
+            const control = this.getControl(field.name);
+            if (field.state === ComponentStates.DISABLED) {
+                control.disable();
+            }
+            else {
+                control.enable();
+            }
+            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)
@@ -8357,6 +8342,8 @@ class FormComponent {
     }
     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 => {
@@ -8385,50 +8372,13 @@ class FormComponent {
     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) {
-        field.token;
-        if (!field.token) {
-            field.token = `input-${field.type}-${field.name}`;
-        }
-        // Debug: verificar opciones para select fields
-        if (field.type === this.types.SEARCH_SELECT || field.type === this.types.MULTI_SELECT || field.type === this.types.MULTI_SELECT_SIMPLE) {
-            console.log(`[FormComponent] ${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`);
-            if (field.state === ComponentStates.DISABLED) {
-                fromControl.disable();
-                toControl.disable();
-            }
-            else {
-                fromControl.enable();
-                toControl.enable();
-            }
-            return {
-                ...field,
-                fromControl,
-                toControl,
-                control: undefined, // Remove control for NUMBER_FROM_TO fields
-            };
-        }
-        else {
-            const control = this.getControl(field.name);
-            if (field.state === ComponentStates.DISABLED) {
-                control.disable();
-            }
-            else {
-                control.enable();
-            }
-            return {
-                ...field,
-                control,
-            };
-        }
+        console.warn('[FormComponent] getFieldProp is deprecated and should not be called directly');
+        return this.processField(field);
     }
     get isAtEndOfForm() {
         return isAtEnd(this.elementRef);
@@ -8442,6 +8392,19 @@ 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 [];
@@ -8472,59 +8435,59 @@ class FormComponent {
             size: 'large',
           }"
         ></val-display>
-        <div class="section" *ngFor="let s of props.sections">
+        <div class="section" *ngFor="let s of processedSections">
           <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]="getFieldProp(f)"></val-text-input>
+              <val-text-input [props]="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]="getFieldProp(f)"></val-comment-input>
+              <val-comment-input [props]="f"></val-comment-input>
             </ng-container>
             <ng-container *ngIf="f.type === types.DATE">
-              <val-date-input [props]="getFieldProp(f)"></val-date-input>
+              <val-date-input [props]="f"></val-date-input>
             </ng-container>
             <ng-container *ngIf="f.type === types.EMAIL">
-              <val-email-input [props]="getFieldProp(f)"></val-email-input>
+              <val-email-input [props]="f"></val-email-input>
             </ng-container>
             <ng-container *ngIf="f.type === types.FILE">
-              <val-file-input [props]="getFieldProp(f)"></val-file-input>
+              <val-file-input [props]="f"></val-file-input>
             </ng-container>
             <ng-container *ngIf="f.type === types.HOUR">
-              <val-hour-input [props]="getFieldProp(f)"></val-hour-input>
+              <val-hour-input [props]="f"></val-hour-input>
             </ng-container>
             <ng-container *ngIf="f.type === types.NUMBER">
-              <val-number-input [props]="getFieldProp(f)"></val-number-input>
+              <val-number-input [props]="f"></val-number-input>
             </ng-container>
             <ng-container *ngIf="f.type === types.NUMBER_FROM_TO">
-              <val-number-from-to [props]="getFieldProp(f)"></val-number-from-to>
+              <val-number-from-to [props]="f"></val-number-from-to>
             </ng-container>
             <ng-container *ngIf="f.type === types.PASSWORD">
-              <val-password-input [props]="getFieldProp(f)"></val-password-input>
+              <val-password-input [props]="f"></val-password-input>
             </ng-container>
             <ng-container *ngIf="f.type === types.PIN_CODE">
-              <val-pin-input [props]="getFieldProp(f)"></val-pin-input>
+              <val-pin-input [props]="f"></val-pin-input>
             </ng-container>
             <ng-container *ngIf="f.type === types.RADIO">
-              <val-radio-input [props]="getFieldProp(f)"></val-radio-input>
+              <val-radio-input [props]="f"></val-radio-input>
             </ng-container>
             <ng-container *ngIf="f.type === types.SELECT">
-              <val-select-input [props]="getFieldProp(f)"></val-select-input>
+              <val-select-input [props]="f"></val-select-input>
             </ng-container>
             <ng-container *ngIf="f.type === types.SEARCH_SELECT">
-              <val-select-search [props]="getFieldProp(f)"></val-select-search>
+              <val-select-search [props]="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>
+              <val-multi-select-search [props]="f"></val-multi-select-search>
             </ng-container>
             <ng-container *ngIf="f.type === types.MULTI_SELECT_SIMPLE">
-              <val-multi-select-simple [props]="getFieldProp(f)"></val-multi-select-simple>
+              <val-multi-select-simple [props]="f"></val-multi-select-simple>
             </ng-container>
-            <val-hint [props]="getFieldProp(f)"></val-hint>
+            <val-hint [props]="f"></val-hint>
           </div>
           <val-divider [props]="{ fill: 'solid', size: 'medium', color: 'medium' }"></val-divider>
           <ng-content></ng-content>
@@ -8574,59 +8537,59 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
             size: 'large',
           }"
         ></val-display>
-        <div class="section" *ngFor="let s of props.sections">
+        <div class="section" *ngFor="let s of processedSections">
           <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]="getFieldProp(f)"></val-text-input>
+              <val-text-input [props]="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]="getFieldProp(f)"></val-comment-input>
+              <val-comment-input [props]="f"></val-comment-input>
             </ng-container>
             <ng-container *ngIf="f.type === types.DATE">
-              <val-date-input [props]="getFieldProp(f)"></val-date-input>
+              <val-date-input [props]="f"></val-date-input>
             </ng-container>
             <ng-container *ngIf="f.type === types.EMAIL">
-              <val-email-input [props]="getFieldProp(f)"></val-email-input>
+              <val-email-input [props]="f"></val-email-input>
             </ng-container>
             <ng-container *ngIf="f.type === types.FILE">
-              <val-file-input [props]="getFieldProp(f)"></val-file-input>
+              <val-file-input [props]="f"></val-file-input>
             </ng-container>
             <ng-container *ngIf="f.type === types.HOUR">
-              <val-hour-input [props]="getFieldProp(f)"></val-hour-input>
+              <val-hour-input [props]="f"></val-hour-input>
             </ng-container>
             <ng-container *ngIf="f.type === types.NUMBER">
-              <val-number-input [props]="getFieldProp(f)"></val-number-input>
+              <val-number-input [props]="f"></val-number-input>
             </ng-container>
             <ng-container *ngIf="f.type === types.NUMBER_FROM_TO">
-              <val-number-from-to [props]="getFieldProp(f)"></val-number-from-to>
+              <val-number-from-to [props]="f"></val-number-from-to>
             </ng-container>
             <ng-container *ngIf="f.type === types.PASSWORD">
-              <val-password-input [props]="getFieldProp(f)"></val-password-input>
+              <val-password-input [props]="f"></val-password-input>
             </ng-container>
             <ng-container *ngIf="f.type === types.PIN_CODE">
-              <val-pin-input [props]="getFieldProp(f)"></val-pin-input>
+              <val-pin-input [props]="f"></val-pin-input>
             </ng-container>
             <ng-container *ngIf="f.type === types.RADIO">
-              <val-radio-input [props]="getFieldProp(f)"></val-radio-input>
+              <val-radio-input [props]="f"></val-radio-input>
             </ng-container>
             <ng-container *ngIf="f.type === types.SELECT">
-              <val-select-input [props]="getFieldProp(f)"></val-select-input>
+              <val-select-input [props]="f"></val-select-input>
             </ng-container>
             <ng-container *ngIf="f.type === types.SEARCH_SELECT">
-              <val-select-search [props]="getFieldProp(f)"></val-select-search>
+              <val-select-search [props]="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>
+              <val-multi-select-search [props]="f"></val-multi-select-search>
             </ng-container>
             <ng-container *ngIf="f.type === types.MULTI_SELECT_SIMPLE">
-              <val-multi-select-simple [props]="getFieldProp(f)"></val-multi-select-simple>
+              <val-multi-select-simple [props]="f"></val-multi-select-simple>
             </ng-container>
-            <val-hint [props]="getFieldProp(f)"></val-hint>
+            <val-hint [props]="f"></val-hint>
           </div>
           <val-divider [props]="{ fill: 'solid', size: 'medium', color: 'medium' }"></val-divider>
           <ng-content></ng-content>