valtech-components 2.0.135 → 2.0.137

package/fesm2022/valtech-components.mjs

@@ -1,17 +1,18 @@
 import * as i0 from '@angular/core';
 import { EventEmitter, Component, Input, Output, Injectable, ViewChild, inject, InjectionToken, Inject } from '@angular/core';
-import { IonAvatar, IonCard, IonIcon, IonButton, IonSpinner, IonText, IonProgressBar, IonCardContent, IonCardHeader, IonCardTitle, IonCardSubtitle, IonCheckbox, IonButtons, IonTextarea, IonDatetime, IonDatetimeButton, IonModal, IonInput, IonRadioGroup, IonRadio, IonSearchbar, IonHeader, IonToolbar, IonTitle, IonFooter, IonList, IonContent, IonItem, IonLabel, IonSelect, IonSelectOption, IonListHeader, IonNote } from '@ionic/angular/standalone';
+import { IonAvatar, IonCard, IonIcon, IonButton, IonSpinner, IonText, IonProgressBar, IonCardContent, IonCardHeader, IonCardTitle, IonCardSubtitle, IonCheckbox, IonButtons, IonTextarea, IonDatetime, IonDatetimeButton, IonModal, IonInput, IonRadioGroup, IonRadio, IonSearchbar, IonSelect, IonSelectOption, IonToolbar, IonTitle, IonFooter, IonHeader, IonList, IonListHeader, IonLabel, IonNote, IonItem, IonContent } from '@ionic/angular/standalone';
 import * as i1 from '@angular/common';
 import { CommonModule, NgStyle, NgIf, NgFor, NgClass } from '@angular/common';
 import { addIcons } from 'ionicons';
-import { addOutline, addCircleOutline, alertOutline, alertCircleOutline, arrowBackOutline, arrowForwardOutline, arrowDownOutline, checkmarkCircleOutline, ellipsisHorizontalOutline, notificationsOutline, openOutline, closeOutline, chatbubblesOutline, shareOutline, heart, heartOutline, homeOutline, eyeOffOutline, eyeOutline, scanOutline, chevronForwardOutline, chevronBackOutline } from 'ionicons/icons';
+import { addOutline, addCircleOutline, alertOutline, alertCircleOutline, arrowBackOutline, arrowForwardOutline, arrowDownOutline, checkmarkCircleOutline, ellipsisHorizontalOutline, notificationsOutline, openOutline, closeOutline, chatbubblesOutline, shareOutline, heart, heartOutline, homeOutline, eyeOffOutline, eyeOutline, scanOutline, chevronDownOutline, checkmarkOutline, chevronForwardOutline, chevronBackOutline } from 'ionicons/icons';
 import * as i1$1 from '@angular/forms';
 import { ReactiveFormsModule, FormsModule, Validators } from '@angular/forms';
 import { Router, RouterLink } from '@angular/router';
 import { Browser } from '@capacitor/browser';
 import * as i1$2 from 'ng-otp-input';
 import { NgOtpInputComponent, NgOtpInputModule } from 'ng-otp-input';
-import * as i1$3 from '@ionic/angular';
+import * as i2 from '@ionic/angular';
+import { IonicModule } from '@ionic/angular';
 import { BehaviorSubject } from 'rxjs';
 
 class AvatarComponent {
@@ -66,6 +67,8 @@ class IconService {
             eyeOffOutline,
             eyeOutline,
             scanOutline,
+            chevronDownOutline,
+            checkmarkOutline,
         });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: IconService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
@@ -2121,55 +2124,43 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
                 type: Output
             }] } });
 
-/* eslint-disable @typescript-eslint/naming-convention */
-const SEARCH_SELECTOR_NO_RESULT = {
-    title: 'No se encontraron resultados',
-    subtitle: 'Intenta con otras palabras.',
-};
-const SEARCH_SELECTOR_NO_OPTIONS = {
-    title: 'No hay opciones',
-    subtitle: 'El campo seleccionado no tiene opciones. Intenta nuevamente más tarde.',
-};
-class SelectorModalComponent {
+// modal-select.component.ts
+class SelectSearchComponent {
     constructor() {
-        this.selection = -1;
-        this.showAllAtStart = true;
-        this.searching = false;
-        this.isModalOpen = false;
-        this.listVolatile = [];
-        this.noResult = SEARCH_SELECTOR_NO_RESULT;
-        this.noNothing = SEARCH_SELECTOR_NO_OPTIONS;
-        this.customModalOptions = {
-            header: 'Seleccione',
-            breakpoints: [0, 0.6],
-            initialBreakpoint: 0.6,
-        };
-        this.selectedOption = '';
+        this.label = 'Seleccionar';
+        this.labelProperty = 'name';
+        this.valueProperty = 'id';
+        this.multiple = false;
+        this.placeholder = 'Seleccione una opción';
+        this.selectionChange = new EventEmitter();
+        this.icon = inject(IconService);
+        this.items = [];
+        this.searchTerm = '';
+        this.filteredItems = [];
+        this.selectedItems = [];
+        this.displayValue = '';
     }
     ngOnInit() {
-        this.listVolatile = this.props.options;
-    }
-    dismiss() {
-        this.toggleModal(false);
-    }
-    applyChanges() {
-        console.log(this.props.control);
-        if (this.props.control.invalid) {
-            return;
+        if (this.props?.options) {
+            this.items = [...this.props.options];
+            this.filteredItems = [...this.items];
+        }
+        else {
+            this.filteredItems = [...this.items];
         }
-        this.props.control.setValue(this.selectedOption);
+        this.updateDisplayValue();
     }
     onFilter(event) {
-        console.log('💡 onSearch::: ', event);
+        console.log('onFilter: ', event);
         if (!event) {
-            this.props.options = this.listVolatile;
+            this.filteredItems = [...this.items];
             return;
         }
-        if (this.props.options.length === 0) {
+        if (this.items.length === 0) {
             return;
         }
         const text = replaceSpecialChars(event.toLowerCase());
-        const filter = this.props.options.filter(element => {
+        const filter = this.items.filter(element => {
             const values = Object.values(element).map((a) => replaceSpecialChars(`${a}`).toLocaleLowerCase());
             if (values.some((value) => value.indexOf(text) > -1)) {
                 return true;
@@ -2177,170 +2168,189 @@ class SelectorModalComponent {
             return false;
         });
         console.log('filter: ', filter);
-        this.props.options = filter;
-    }
-    onBlur() {
-        this.searching = false;
+        this.filteredItems = filter;
     }
     onFocus() {
-        this.searching = true;
+        console.log('onFocus: ');
     }
-    showSelected() {
-        if (!this.props.control) {
-            return '';
-        }
-        const option = this.props.options.find(x => x.id === this.props.control.value);
-        if (option) {
-            return option.name;
-        }
-        return '';
+    onBlur() {
+        console.log('onBlur: ');
     }
-    toggleModal(isOpen) {
-        this.isModalOpen = isOpen;
+    openModal() {
+        if (this.modal) {
+            this.modal.present();
+        }
     }
     preventDefaultBehavior(event) {
         event.preventDefault(); // Evita el comportamiento predeterminado del selector
         event.stopPropagation(); // Detiene la propagación del evento
-        this.toggleModal(!this.isModalOpen); // Abre el modal personalizado
+        this.openModal();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: SelectorModalComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: SelectorModalComponent, isStandalone: true, selector: "val-search-selector-input", inputs: { props: "props", selection: "selection", showAllAtStart: "showAllAtStart" }, ngImport: i0, template: `
-    <!-- <ion-select
-      id="select-search-option-action"
-      [formControl]="props.control"
-      [label]="props.label"
-      [interfaceOptions]="customModalOptions"
-      interface="popover"
-      [placeholder]="[props.placeholder]"
-      cancelText="Cancelar"
-      okText="Ok"
-      (mousedown)="preventDefaultBehavior($event)"
-    >
-    </ion-select> -->
+    cancelModal() {
+        if (this.modal) {
+            this.modal.dismiss();
+        }
+    }
+    selectItem(item) {
+        if (this.multiple) {
+            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);
+            }
+        }
+        else {
+            this.selectedItems = [item];
+            this.cancelModal();
+        }
+        this.updateDisplayValue();
+        this.emitSelectionChange();
+    }
+    isItemSelected(item) {
+        return this.selectedItems.some(selectedItem => selectedItem[this.valueProperty] === item[this.valueProperty]);
+    }
+    updateDisplayValue() {
+        if (this.selectedItems.length === 0) {
+            this.displayValue = '';
+            return;
+        }
+        if (this.multiple) {
+            if (this.selectedItems.length === 1) {
+                this.displayValue = this.selectedItems[0][this.labelProperty];
+            }
+            else {
+                this.displayValue = `${this.selectedItems.length} elementos seleccionados`;
+            }
+        }
+        else {
+            this.displayValue = this.selectedItems[0][this.labelProperty];
+        }
+    }
+    emitSelectionChange() {
+        if (this.multiple) {
+            const selectedValues = this.selectedItems.map(item => item[this.valueProperty]);
+            this.selectionChange.emit(selectedValues);
+        }
+        else {
+            const selectedValue = this.selectedItems.length > 0 ? this.selectedItems[0][this.valueProperty] : null;
+            this.selectionChange.emit(selectedValue);
+        }
+    }
+    // Método para establecer el valor desde el componente padre
+    setValue(value) {
+        if (this.multiple && Array.isArray(value)) {
+            this.selectedItems = this.items.filter(item => value.includes(item[this.valueProperty]));
+        }
+        else if (!this.multiple && value !== null && value !== undefined) {
+            const selectedItem = this.items.find(item => item[this.valueProperty] === value);
+            if (selectedItem) {
+                this.selectedItems = [selectedItem];
+            }
+        }
+        else {
+            this.selectedItems = [];
+        }
+        this.updateDisplayValue();
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: SelectSearchComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: SelectSearchComponent, isStandalone: true, selector: "val-select-search", inputs: { label: "label", labelProperty: "labelProperty", valueProperty: "valueProperty", multiple: "multiple", placeholder: "placeholder", props: "props" }, outputs: { selectionChange: "selectionChange" }, viewQueries: [{ propertyName: "modal", first: true, predicate: ["modal"], descendants: true }], ngImport: i0, template: `
     <ion-input
       type="text"
-      [value]="showSelected()"
-      [placeholder]="props.placeholder"
+      [value]="displayValue"
+      [placeholder]="props?.placeholder || placeholder"
       readonly
       (mousedown)="preventDefaultBehavior($event)"
     />
 
     <ion-input [formControl]="props.control" type="hidden"></ion-input>
 
-    <ion-modal #modal [isOpen]="isModalOpen">
+    <ion-modal #modal trigger="open-modal" [initialBreakpoint]="0.75" [breakpoints]="[0, 0.5, 0.75, 1]">
       <ng-template>
         <ion-header>
           <ion-toolbar>
-            <ion-title>Seleccione</ion-title>
+            <ion-title>{{ label }}</ion-title>
             <ion-buttons slot="end">
-              <ion-button (click)="dismiss()">Cancelar</ion-button>
+              <ion-button (click)="cancelModal()">Cancelar</ion-button>
             </ion-buttons>
           </ion-toolbar>
+          <ion-toolbar>
+            <val-searchbar (filterEvent)="onFilter($event)" (focusEvent)="onFocus()" (blurEvent)="onBlur()" />
+          </ion-toolbar>
         </ion-header>
-
         <ion-content>
-          <val-searchbar (filterEvent)="onFilter($event)" (focusEvent)="onFocus()" (blurEvent)="onBlur()" />
-
-          <div class="unit-list-container" *ngIf="props.options.length > 0">
-            <ion-list class="unit-list">
-              <ion-radio-group allow-empty-selection [(ngModel)]="selectedOption">
-                <ion-item *ngFor="let option of props.options">
-                  <ion-radio justify="space-between" color="primary" [value]="option.id">{{ option.name }}</ion-radio>
-                </ion-item>
-              </ion-radio-group>
-            </ion-list>
-          </div>
+          <ion-list>
+            <ion-item *ngFor="let item of filteredItems" button (click)="selectItem(item)">
+              <ion-label>{{ item[labelProperty] }}</ion-label>
+              <ion-icon *ngIf="isItemSelected(item)" name="checkmark-outline" slot="end" color="primary"></ion-icon>
+            </ion-item>
+            <ion-item *ngIf="filteredItems.length === 0">
+              <ion-label color="medium">No se encontraron resultados</ion-label>
+            </ion-item>
+          </ion-list>
         </ion-content>
-        <ion-footer style="display: flex;justify-content: space-around;padding: 8px 0px;">
-          <ion-button color="dark" shape="round" fill="outline" (click)="dismiss()"> Cancelar </ion-button>
-          <ion-button color="primary" shape="round" (click)="applyChanges()"> Confirmar </ion-button>
-        </ion-footer>
       </ng-template>
     </ion-modal>
-  `, isInline: true, styles: [".form-element{margin-top:1rem;text-align:start}x .form-element:last-child{margin-bottom:2rem}.small-form{min-width:7.5rem;max-width:7.5rem}.sibling{margin-left:.5rem}.filter-container{display:flex;margin-left:1rem}.filter-form{padding:0 .25rem 6.25rem}.options-container{margin-bottom:1rem}.unit-list-container{overflow-y:auto}.unit-list{padding-bottom:1rem;margin-bottom:.5rem}.detail-title{font-size:1.125rem;line-height:1.5rem;font-weight:700;margin:0;margin-bottom:.5rem;margin-left:.625rem;font-weight:800}@media (min-width: 768px){.detail-title{font-size:1.5rem;line-height:2rem}}.button-section{width:98%;height:3.75rem;border-radius:.5rem;margin:0 auto;padding:0 .25rem;max-width:36.25rem;margin-top:2.5rem}.event-selector{width:90%;margin-left:1rem}.selectable-container{margin-bottom:1rem}\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: FormsModule }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: IonHeader, selector: "ion-header", inputs: ["collapse", "mode", "translucent"] }, { kind: "component", type: IonToolbar, selector: "ion-toolbar", inputs: ["color", "mode"] }, { kind: "component", type: IonTitle, selector: "ion-title", inputs: ["color", "size"] }, { kind: "component", type: IonButtons, selector: "ion-buttons", inputs: ["collapse"] }, { kind: "component", type: 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: IonFooter, selector: "ion-footer", inputs: ["collapse", "mode", "translucent"] }, { kind: "component", type: IonList, selector: "ion-list", inputs: ["inset", "lines", "mode"] }, { kind: "component", type: IonContent, selector: "ion-content", inputs: ["color", "forceOverscroll", "fullscreen", "scrollEvents", "scrollX", "scrollY"] }, { kind: "component", type: IonItem, selector: "ion-item", inputs: ["button", "color", "detail", "detailIcon", "disabled", "download", "href", "lines", "mode", "rel", "routerAnimation", "routerDirection", "target", "type"] }, { kind: "component", type: IonRadio, selector: "ion-radio", inputs: ["alignment", "color", "disabled", "justify", "labelPlacement", "mode", "name", "value"] }, { kind: "component", type: SearchbarComponent, selector: "val-searchbar", inputs: ["disabled"], outputs: ["focusEvent", "blurEvent", "filterEvent"] }, { kind: "component", type: IonModal, selector: "ion-modal" }, { kind: "component", type: IonInput, selector: "ion-input", inputs: ["accept", "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", "size", "spellcheck", "step", "type", "value"] }, { kind: "component", type: IonRadioGroup, selector: "ion-radio-group", inputs: ["allowEmptySelection", "name", "value"] }] }); }
+  `, isInline: true, styles: [""], 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.IonContent, selector: "ion-content", inputs: ["color", "forceOverscroll", "fullscreen", "scrollEvents", "scrollX", "scrollY"] }, { kind: "component", type: i2.IonHeader, selector: "ion-header", inputs: ["collapse", "mode", "translucent"] }, { kind: "component", type: i2.IonIcon, selector: "ion-icon", inputs: ["color", "flipRtl", "icon", "ios", "lazy", "md", "mode", "name", "sanitize", "size", "src"] }, { 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.TextValueAccessor, selector: "ion-input:not([type=number]),ion-textarea,ion-searchbar" }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "component", type: SearchbarComponent, selector: "val-searchbar", inputs: ["disabled"], outputs: ["focusEvent", "blurEvent", "filterEvent"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: SelectorModalComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: SelectSearchComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'val-search-selector-input', standalone: true, imports: [
-                        CommonModule,
-                        FormsModule,
-                        ReactiveFormsModule,
-                        IonHeader,
-                        IonToolbar,
-                        IonTitle,
-                        IonButtons,
-                        IonButton,
-                        IonFooter,
-                        IonList,
-                        IonContent,
-                        IonItem,
-                        IonLabel,
-                        IonRadio,
-                        SearchbarComponent,
-                        IonModal,
-                        IonInput,
-                        IonSelect,
-                        IonRadioGroup,
-                    ], template: `
-    <!-- <ion-select
-      id="select-search-option-action"
-      [formControl]="props.control"
-      [label]="props.label"
-      [interfaceOptions]="customModalOptions"
-      interface="popover"
-      [placeholder]="[props.placeholder]"
-      cancelText="Cancelar"
-      okText="Ok"
-      (mousedown)="preventDefaultBehavior($event)"
-    >
-    </ion-select> -->
+            args: [{ selector: 'val-select-search', standalone: true, imports: [CommonModule, IonicModule, FormsModule, SearchbarComponent, ReactiveFormsModule], template: `
     <ion-input
       type="text"
-      [value]="showSelected()"
-      [placeholder]="props.placeholder"
+      [value]="displayValue"
+      [placeholder]="props?.placeholder || placeholder"
       readonly
       (mousedown)="preventDefaultBehavior($event)"
     />
 
     <ion-input [formControl]="props.control" type="hidden"></ion-input>
 
-    <ion-modal #modal [isOpen]="isModalOpen">
+    <ion-modal #modal trigger="open-modal" [initialBreakpoint]="0.75" [breakpoints]="[0, 0.5, 0.75, 1]">
       <ng-template>
         <ion-header>
           <ion-toolbar>
-            <ion-title>Seleccione</ion-title>
+            <ion-title>{{ label }}</ion-title>
             <ion-buttons slot="end">
-              <ion-button (click)="dismiss()">Cancelar</ion-button>
+              <ion-button (click)="cancelModal()">Cancelar</ion-button>
             </ion-buttons>
           </ion-toolbar>
+          <ion-toolbar>
+            <val-searchbar (filterEvent)="onFilter($event)" (focusEvent)="onFocus()" (blurEvent)="onBlur()" />
+          </ion-toolbar>
         </ion-header>
-
         <ion-content>
-          <val-searchbar (filterEvent)="onFilter($event)" (focusEvent)="onFocus()" (blurEvent)="onBlur()" />
-
-          <div class="unit-list-container" *ngIf="props.options.length > 0">
-            <ion-list class="unit-list">
-              <ion-radio-group allow-empty-selection [(ngModel)]="selectedOption">
-                <ion-item *ngFor="let option of props.options">
-                  <ion-radio justify="space-between" color="primary" [value]="option.id">{{ option.name }}</ion-radio>
-                </ion-item>
-              </ion-radio-group>
-            </ion-list>
-          </div>
+          <ion-list>
+            <ion-item *ngFor="let item of filteredItems" button (click)="selectItem(item)">
+              <ion-label>{{ item[labelProperty] }}</ion-label>
+              <ion-icon *ngIf="isItemSelected(item)" name="checkmark-outline" slot="end" color="primary"></ion-icon>
+            </ion-item>
+            <ion-item *ngIf="filteredItems.length === 0">
+              <ion-label color="medium">No se encontraron resultados</ion-label>
+            </ion-item>
+          </ion-list>
         </ion-content>
-        <ion-footer style="display: flex;justify-content: space-around;padding: 8px 0px;">
-          <ion-button color="dark" shape="round" fill="outline" (click)="dismiss()"> Cancelar </ion-button>
-          <ion-button color="primary" shape="round" (click)="applyChanges()"> Confirmar </ion-button>
-        </ion-footer>
       </ng-template>
     </ion-modal>
-  `, styles: [".form-element{margin-top:1rem;text-align:start}x .form-element:last-child{margin-bottom:2rem}.small-form{min-width:7.5rem;max-width:7.5rem}.sibling{margin-left:.5rem}.filter-container{display:flex;margin-left:1rem}.filter-form{padding:0 .25rem 6.25rem}.options-container{margin-bottom:1rem}.unit-list-container{overflow-y:auto}.unit-list{padding-bottom:1rem;margin-bottom:.5rem}.detail-title{font-size:1.125rem;line-height:1.5rem;font-weight:700;margin:0;margin-bottom:.5rem;margin-left:.625rem;font-weight:800}@media (min-width: 768px){.detail-title{font-size:1.5rem;line-height:2rem}}.button-section{width:98%;height:3.75rem;border-radius:.5rem;margin:0 auto;padding:0 .25rem;max-width:36.25rem;margin-top:2.5rem}.event-selector{width:90%;margin-left:1rem}.selectable-container{margin-bottom:1rem}\n"] }]
-        }], ctorParameters: () => [], propDecorators: { props: [{
+  ` }]
+        }], propDecorators: { modal: [{
+                type: ViewChild,
+                args: ['modal']
+            }], label: [{
                 type: Input
-            }], selection: [{
+            }], labelProperty: [{
                 type: Input
-            }], showAllAtStart: [{
+            }], valueProperty: [{
                 type: Input
+            }], multiple: [{
+                type: Input
+            }], placeholder: [{
+                type: Input
+            }], props: [{
+                type: Input
+            }], selectionChange: [{
+                type: Output
             }] } });
 
 class SearchSelectorComponent {
@@ -2518,7 +2528,7 @@ class ToolbarComponent {
     clickHandler(token) {
         this.onClick.emit(token);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: ToolbarComponent, deps: [{ token: i1$3.NavController }, { token: IconService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: ToolbarComponent, deps: [{ token: i2.NavController }, { token: IconService }], target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: ToolbarComponent, isStandalone: true, selector: "val-toolbar", inputs: { props: "props" }, outputs: { onClick: "onClick" }, ngImport: i0, template: `
     <ion-toolbar [color]="props.color" [class.background]="props.color === 'background'">
       <ng-container *ngIf="props.withBack">
@@ -2646,7 +2656,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
       <ng-content select="[toolbar-bottom]"></ng-content>
     </ion-toolbar>
   `, styles: ["ion-button{font-family:var(--ion-default-font),Arial,sans-serif}.left-buttons{margin-left:-1rem}.background{background:var(--ion-background-color)}\n"] }]
-        }], ctorParameters: () => [{ type: i1$3.NavController }, { type: IconService }], propDecorators: { props: [{
+        }], ctorParameters: () => [{ type: i2.NavController }, { type: IconService }], propDecorators: { props: [{
                 type: Input
             }], onClick: [{
                 type: Output
@@ -2943,7 +2953,7 @@ class FormComponent {
               <val-select-input [props]="getFieldProp(f)"></val-select-input>
             </ng-container>
             <ng-container *ngIf="f.type === types.SEARCH_SELECT">
-              <val-search-selector-input [props]="getFieldProp(f)"></val-search-selector-input>
+              <val-select-search [props]="getFieldProp(f)"></val-select-search>
             </ng-container>
             <val-hint [props]="getFieldProp(f)"></val-hint>
           </div>
@@ -2956,7 +2966,7 @@ class FormComponent {
         ></val-button-group>
       </form>
     </div>
-  `, isInline: true, styles: [".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$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$1.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: 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: SearchSelectorComponent, selector: "val-select-input", inputs: ["props"] }, { kind: "component", type: SelectorModalComponent, selector: "val-search-selector-input", inputs: ["props", "selection", "showAllAtStart"] }] }); }
+  `, isInline: true, styles: [".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$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$1.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: 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"], outputs: ["selectionChange"] }, { 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,
@@ -2979,8 +2989,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
                         RadioInputComponent,
                         PasswordInputComponent,
                         PinInputComponent,
+                        SelectSearchComponent,
                         SearchSelectorComponent,
-                        SelectorModalComponent,
                     ], template: `
     <div class="container">
       <form [formGroup]="form">
@@ -3033,7 +3043,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
               <val-select-input [props]="getFieldProp(f)"></val-select-input>
             </ng-container>
             <ng-container *ngIf="f.type === types.SEARCH_SELECT">
-              <val-search-selector-input [props]="getFieldProp(f)"></val-search-selector-input>
+              <val-select-search [props]="getFieldProp(f)"></val-select-search>
             </ng-container>
             <val-hint [props]="getFieldProp(f)"></val-hint>
           </div>
@@ -4014,7 +4024,7 @@ class ToastService {
             console.error(JSON.stringify(error));
         });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: ToastService, deps: [{ token: i1$3.ToastController }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: ToastService, deps: [{ token: i2.ToastController }], target: i0.ɵɵFactoryTarget.Injectable }); }
     static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: ToastService, providedIn: 'root' }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: ToastService, decorators: [{
@@ -4022,7 +4032,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
             args: [{
                     providedIn: 'root',
                 }]
-        }], ctorParameters: () => [{ type: i1$3.ToastController }] });
+        }], ctorParameters: () => [{ type: i2.ToastController }] });
 
 /*
  * Public API Surface of valtech-components
@@ -4035,5 +4045,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
  * Generated bundle index. Do not edit.
  */
 
-export { ActionType, AlertBoxComponent, AvatarComponent, BannerComponent, BaseDefault, BoxComponent, ButtonComponent, ButtonGroupComponent, CardComponent, CardSection, CardType, CheckInputComponent, ClearDefault, ClearDefaultBlock, ClearDefaultFull, ClearDefaultRound, ClearDefaultRoundBlock, ClearDefaultRoundFull, CommentInputComponent, ComponentStates, ContentLoaderComponent, DateInputComponent, DisplayComponent, DividerComponent, DownloadService, EmailInputComponent, ExpandableTextComponent, FileInputComponent, FooterComponent, FormComponent, FormFooterComponent, HeaderComponent, HintComponent, HourInputComponent, HrefComponent, Icon, IconComponent, IconService, ImageComponent, InAppBrowserService, InputType, ItemListComponent, LangOption, LangService, LayoutComponent, LinkComponent, LinksCakeComponent, LocalStorageService, MOTION, NavigationService, NoContentComponent, NotesBoxComponent, NumberInputComponent, OutlineDefault, OutlineDefaultBlock, OutlineDefaultFull, OutlineDefaultRound, OutlineDefaultRoundBlock, OutlineDefaultRoundFull, PasswordInputComponent, PinInputComponent, PrimarySolidBlockButton, PrimarySolidBlockHrefButton, PrimarySolidBlockIconButton, PrimarySolidBlockIconHrefButton, PrimarySolidDefaultRoundButton, PrimarySolidDefaultRoundHrefButton, PrimarySolidDefaultRoundIconButton, PrimarySolidDefaultRoundIconHrefButton, PrimarySolidFullButton, PrimarySolidFullHrefButton, PrimarySolidFullIconButton, PrimarySolidFullIconHrefButton, PrimarySolidLargeRoundButton, PrimarySolidLargeRoundHrefButton, PrimarySolidLargeRoundIconButton, PrimarySolidLargeRoundIconHrefButton, PrimarySolidSmallRoundButton, PrimarySolidSmallRoundHrefButton, PrimarySolidSmallRoundIconButton, PrimarySolidSmallRoundIconHrefButton, ProgressBarComponent, ProgressStatusComponent, PrompterComponent, RadioInputComponent, SEARCH_SELECTOR_NO_OPTIONS, SEARCH_SELECTOR_NO_RESULT, SearchSelectorComponent, SearchbarComponent, SecondarySolidBlockButton, SecondarySolidBlockHrefButton, SecondarySolidBlockIconButton, SecondarySolidBlockIconHrefButton, SecondarySolidDefaultRoundButton, SecondarySolidDefaultRoundHrefButton, SecondarySolidDefaultRoundIconButton, SecondarySolidDefaultRoundIconHrefButton, SecondarySolidFullButton, SecondarySolidFullHrefButton, SecondarySolidFullIconButton, SecondarySolidFullIconHrefButton, SecondarySolidLargeRoundButton, SecondarySolidLargeRoundHrefButton, SecondarySolidLargeRoundIconButton, SecondarySolidLargeRoundIconHrefButton, SecondarySolidSmallRoundButton, SecondarySolidSmallRoundHrefButton, SecondarySolidSmallRoundIconButton, SecondarySolidSmallRoundIconHrefButton, SelectorModalComponent, SimpleComponent, SolidBlockButton, SolidDefault, SolidDefaultBlock, SolidDefaultButton, SolidDefaultFull, SolidDefaultRound, SolidDefaultRoundBlock, SolidDefaultRoundButton, SolidDefaultRoundFull, SolidFullButton, SolidLargeButton, SolidLargeRoundButton, SolidSmallButton, SolidSmallRoundButton, TextComponent, TextContent, TextInputComponent, ThemeOption, ThemeService, TitleBlockComponent, TitleComponent, ToastService, ToolbarActionType, ToolbarComponent, ValtechConfigService, WizardComponent, WizardFooterComponent, goToTop, isAtEnd, maxLength, replaceSpecialChars };
+export { ActionType, AlertBoxComponent, AvatarComponent, BannerComponent, BaseDefault, BoxComponent, ButtonComponent, ButtonGroupComponent, CardComponent, CardSection, CardType, CheckInputComponent, ClearDefault, ClearDefaultBlock, ClearDefaultFull, ClearDefaultRound, ClearDefaultRoundBlock, ClearDefaultRoundFull, CommentInputComponent, ComponentStates, ContentLoaderComponent, DateInputComponent, DisplayComponent, DividerComponent, DownloadService, EmailInputComponent, ExpandableTextComponent, FileInputComponent, FooterComponent, FormComponent, FormFooterComponent, HeaderComponent, HintComponent, HourInputComponent, HrefComponent, Icon, IconComponent, IconService, ImageComponent, InAppBrowserService, InputType, ItemListComponent, LangOption, LangService, LayoutComponent, LinkComponent, LinksCakeComponent, LocalStorageService, MOTION, NavigationService, NoContentComponent, NotesBoxComponent, NumberInputComponent, OutlineDefault, OutlineDefaultBlock, OutlineDefaultFull, OutlineDefaultRound, OutlineDefaultRoundBlock, OutlineDefaultRoundFull, PasswordInputComponent, PinInputComponent, PrimarySolidBlockButton, PrimarySolidBlockHrefButton, PrimarySolidBlockIconButton, PrimarySolidBlockIconHrefButton, PrimarySolidDefaultRoundButton, PrimarySolidDefaultRoundHrefButton, PrimarySolidDefaultRoundIconButton, PrimarySolidDefaultRoundIconHrefButton, PrimarySolidFullButton, PrimarySolidFullHrefButton, PrimarySolidFullIconButton, PrimarySolidFullIconHrefButton, PrimarySolidLargeRoundButton, PrimarySolidLargeRoundHrefButton, PrimarySolidLargeRoundIconButton, PrimarySolidLargeRoundIconHrefButton, PrimarySolidSmallRoundButton, PrimarySolidSmallRoundHrefButton, PrimarySolidSmallRoundIconButton, PrimarySolidSmallRoundIconHrefButton, ProgressBarComponent, ProgressStatusComponent, PrompterComponent, RadioInputComponent, SearchSelectorComponent, SearchbarComponent, SecondarySolidBlockButton, SecondarySolidBlockHrefButton, SecondarySolidBlockIconButton, SecondarySolidBlockIconHrefButton, SecondarySolidDefaultRoundButton, SecondarySolidDefaultRoundHrefButton, SecondarySolidDefaultRoundIconButton, SecondarySolidDefaultRoundIconHrefButton, SecondarySolidFullButton, SecondarySolidFullHrefButton, SecondarySolidFullIconButton, SecondarySolidFullIconHrefButton, SecondarySolidLargeRoundButton, SecondarySolidLargeRoundHrefButton, SecondarySolidLargeRoundIconButton, SecondarySolidLargeRoundIconHrefButton, SecondarySolidSmallRoundButton, SecondarySolidSmallRoundHrefButton, SecondarySolidSmallRoundIconButton, SecondarySolidSmallRoundIconHrefButton, SelectSearchComponent, SimpleComponent, SolidBlockButton, SolidDefault, SolidDefaultBlock, SolidDefaultButton, SolidDefaultFull, SolidDefaultRound, SolidDefaultRoundBlock, SolidDefaultRoundButton, SolidDefaultRoundFull, SolidFullButton, SolidLargeButton, SolidLargeRoundButton, SolidSmallButton, SolidSmallRoundButton, TextComponent, TextContent, TextInputComponent, ThemeOption, ThemeService, TitleBlockComponent, TitleComponent, ToastService, ToolbarActionType, ToolbarComponent, ValtechConfigService, WizardComponent, WizardFooterComponent, goToTop, isAtEnd, maxLength, replaceSpecialChars };
 //# sourceMappingURL=valtech-components.mjs.map