valtech-components 2.0.392 → 2.0.394

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, forwardRef, effect } 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,45 +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([]);
-        // 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(() => {
-            const options = this.props?.options || [];
-            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,20 +5688,26 @@ class MultiSelectSimpleComponent {
     }
     ngOnInit() {
         this.applyDefaultValue();
+        this.initializeOptions();
         this.syncSelectedValues();
+        this.updateDisplayValue();
     }
     ngOnDestroy() {
         document.removeEventListener('click', this.handleClickOutside.bind(this));
     }
     ngOnChanges(changes) {
         if (changes['props'] && this.props) {
+            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;
@@ -5747,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(() => {
@@ -5760,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) {
@@ -5812,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);
@@ -5821,17 +5798,49 @@ class MultiSelectSimpleComponent {
         }
     }
     getOptionByValue(value) {
-        return this.props?.options?.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);
         }
     }
+    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 }); }
@@ -5847,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 -->
@@ -5872,7 +5881,7 @@ class MultiSelectSimpleComponent {
     <!-- Dropdown overlay -->
     <div 
       class="dropdown-overlay" 
-      [class.visible]="isOpen()"
+      [class.visible]="isOpen"
       #dropdown
     >
       <!-- Search bar -->
@@ -5881,7 +5890,7 @@ class MultiSelectSimpleComponent {
           #searchbar
           [placeholder]="searchPlaceholder"
           (ionInput)="onSearch($event)"
-          [value]="searchTerm()"
+          [value]="searchTerm"
           show-clear-button="focus"
         ></ion-searchbar>
       </div>
@@ -5892,7 +5901,7 @@ class MultiSelectSimpleComponent {
           fill="clear" 
           size="small" 
           (click)="selectAll()"
-          [disabled]="filteredOptions().length === 0"
+          [disabled]="filteredOptions.length === 0"
         >
           Seleccionar todos
         </ion-button>
@@ -5901,7 +5910,7 @@ class MultiSelectSimpleComponent {
           size="small" 
           color="medium" 
           (click)="clearAll()"
-          [disabled]="selectedValues().length === 0"
+          [disabled]="selectedValues.length === 0"
         >
           Limpiar
         </ion-button>
@@ -5911,7 +5920,7 @@ class MultiSelectSimpleComponent {
       <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"
@@ -5924,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>
@@ -5948,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 -->
@@ -5973,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 -->
@@ -5982,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>
@@ -5993,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>
@@ -6002,7 +6011,7 @@ 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>
@@ -6012,7 +6021,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)="toggleOption(option)"
             class="option-item"
@@ -6025,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>
@@ -6765,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');
@@ -6874,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);
@@ -6889,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) {
@@ -6913,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 }); }
@@ -6931,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 -->
@@ -6956,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 -->
@@ -6970,7 +6946,7 @@ class SelectSearchComponent {
           #searchbar
           [placeholder]="'Buscar'"
           (ionInput)="onSearch($event)"
-          [value]="searchTerm()"
+          [value]="searchTerm"
           show-clear-button="focus"
           [debounce]="200"
         ></ion-searchbar>
@@ -6980,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"
@@ -6995,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>
@@ -7015,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 -->
@@ -7040,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 -->
@@ -7054,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>
@@ -7064,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"
@@ -7079,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>
@@ -8294,6 +8270,7 @@ class FormComponent {
             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);
             });
         });
@@ -8304,15 +8281,27 @@ 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 => {
+            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);
     }
@@ -8379,6 +8368,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 [];