valtech-components 2.0.402 → 2.0.403

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, forwardRef } from '@angular/core';
+import { EventEmitter, Component, Input, Output, Injectable, inject, InjectionToken, Inject, ChangeDetectorRef, HostListener, Pipe, ChangeDetectionStrategy, ViewChild } 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, IonRadioGroup, IonRadio, IonSearchbar, 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';
@@ -10,7 +10,7 @@ import { Router, RouterLink } from '@angular/router';
 import { Browser } from '@capacitor/browser';
 import * as i1$1 from '@angular/platform-browser';
 import * as i1$2 from '@angular/forms';
-import { ReactiveFormsModule, FormsModule, Validators, NG_VALUE_ACCESSOR } from '@angular/forms';
+import { ReactiveFormsModule, FormsModule, Validators } from '@angular/forms';
 import { map as map$1 } from 'rxjs/operators';
 import * as i1$3 from 'ng-otp-input';
 import { NgOtpInputComponent, NgOtpInputModule } from 'ng-otp-input';
@@ -7517,402 +7517,403 @@ class MultiSelectSearchComponent {
     constructor() {
         this.labelProperty = 'name';
         this.valueProperty = 'id';
-        this.placeholder = '';
         this.langService = inject(LangService);
+        this.icon = inject(IconService);
         this.changeDetector = inject(ChangeDetectorRef);
-        // Component state
-        this.isOpen = false;
         this.searchTerm = '';
-        this.selectedValues = [];
+        this.filteredItems = [];
+        this.selectedItems = [];
         this.displayValue = '';
-        this.filteredOptions = [];
-        this.searchPlaceholder = '';
-        // ControlValueAccessor
-        this.onChange = (_value) => { };
-        this.onTouched = () => { };
+        this.previousOptions = [];
+        this.isProcessingChanges = false;
+        this.label = this.langService.getText('_global', 'selectOptions', 'Seleccionar opciones');
         this.placeholder = this.langService.getText('_global', 'selectOptions', 'Seleccione opciones');
-        this.searchPlaceholder = this.langService.getText('_global', 'search', 'Buscar');
-        // Close dropdown when clicking outside
-        document.addEventListener('click', this.handleClickOutside.bind(this));
     }
     ngOnInit() {
-        console.log('[MultiSelectSearch] ngOnInit:', {
-            props: !!this.props,
-            options: this.props?.options?.length || 0,
-            propsOptions: this.props?.options
-        });
         this.applyDefaultValue();
-        this.initializeOptions();
-        this.syncSelectedValues();
+        this.initializeItems();
+        this.syncControlValueWithSelectedItems();
         this.updateDisplayValue();
-        // Force change detection after initialization
-        this.changeDetector.detectChanges();
+        this.subscribeToValueChanges();
     }
     ngOnDestroy() {
-        document.removeEventListener('click', this.handleClickOutside.bind(this));
+        // Limpiar suscripciones para evitar memory leaks
+        if (this.valueChangesSubscription) {
+            this.valueChangesSubscription.unsubscribe();
+        }
     }
     ngOnChanges(changes) {
-        console.log('[MultiSelectSearch] ngOnChanges:', {
-            hasPropsChange: !!changes['props'],
-            props: !!this.props,
-            options: this.props?.options?.length || 0,
-            propsOptions: this.props?.options
-        });
-        if (changes['props'] && this.props) {
-            this.initializeOptions();
-            this.syncSelectedValues();
-            this.updateDisplayValue();
-            this.changeDetector.detectChanges();
+        // Evitar bucles infinitos
+        if (this.isProcessingChanges) {
+            return;
+        }
+        // Cuando cambia props o props.options
+        if (changes['props']) {
+            try {
+                this.isProcessingChanges = true;
+                // Desuscribirse del antiguo control si existe
+                if (this.valueChangesSubscription) {
+                    this.valueChangesSubscription.unsubscribe();
+                }
+                if (this.props?.options) {
+                    // Verificar si las opciones han cambiado realmente
+                    const optionsChanged = !this.areOptionsEqual(this.previousOptions, this.props.options);
+                    if (optionsChanged) {
+                        this.previousOptions = [...this.props.options];
+                        this.initializeItems();
+                    }
+                }
+                // Sincronizar con el nuevo control si existe
+                this.syncControlValueWithSelectedItems();
+                this.updateDisplayValue();
+                // Suscribirse al nuevo control
+                this.subscribeToValueChanges();
+            }
+            finally {
+                this.isProcessingChanges = false;
+            }
         }
     }
-    // ControlValueAccessor implementation
-    writeValue(value) {
-        const valueArray = this.parseValue(value);
-        this.selectedValues = valueArray;
-        this.updateDisplayValue();
-    }
-    registerOnChange(fn) {
-        this.onChange = fn;
-    }
-    registerOnTouched(fn) {
-        this.onTouched = fn;
+    ionViewWillEnter() {
+        if (this.isProcessingChanges) {
+            return;
+        }
+        try {
+            this.isProcessingChanges = true;
+            this.initializeItems();
+            this.syncControlValueWithSelectedItems();
+            this.updateDisplayValue();
+            this.subscribeToValueChanges();
+        }
+        finally {
+            this.isProcessingChanges = false;
+        }
     }
-    setDisabledState(_isDisabled) {
-        // Handle disabled state if needed
+    // Suscribirse a cambios en el FormControl
+    subscribeToValueChanges() {
+        if (!this.props?.control)
+            return;
+        this.valueChangesSubscription = this.props.control.valueChanges.subscribe(value => {
+            if (this.isProcessingChanges)
+                return;
+            try {
+                this.isProcessingChanges = true;
+                this.syncControlValueWithSelectedItems();
+                this.updateDisplayValue();
+            }
+            finally {
+                this.isProcessingChanges = false;
+            }
+        });
     }
-    // Component methods
-    toggleDropdown(event) {
-        event.stopPropagation();
-        this.isOpen = !this.isOpen;
-        if (this.isOpen) {
-            this.onTouched();
-            // Focus search bar when opening
-            setTimeout(() => {
-                const searchbar = this.dropdownRef?.nativeElement?.querySelector('ion-searchbar');
-                if (searchbar) {
-                    searchbar.setFocus();
-                }
-            }, 100);
+    // Compara si dos arrays de opciones son iguales
+    areOptionsEqual(prevOptions, newOptions) {
+        if (prevOptions === newOptions)
+            return true;
+        if (!prevOptions || !newOptions)
+            return prevOptions === newOptions;
+        if (prevOptions.length !== newOptions.length)
+            return false;
+        for (let i = 0; i < prevOptions.length; i++) {
+            if (prevOptions[i][this.valueProperty] !== newOptions[i][this.valueProperty]) {
+                return false;
+            }
         }
+        return true;
     }
-    onSearch(event) {
-        this.searchTerm = event.detail.value || '';
-        this.filterOptions();
+    initializeItems() {
+        this.filteredItems = this.props?.options || [];
     }
-    toggleOption(option) {
-        const value = String(option[this.valueProperty]);
-        if (this.isSelected(option)) {
-            // Remove from selection
-            this.selectedValues = this.selectedValues.filter(v => v !== value);
+    syncControlValueWithSelectedItems() {
+        if (!this.props?.control) {
+            this.selectedItems = [];
+            return;
+        }
+        const controlValue = this.props.control.value;
+        if (controlValue === null || controlValue === undefined || controlValue === '') {
+            this.selectedItems = [];
+            return;
+        }
+        // Parse comma-separated values for multi-select
+        const values = typeof controlValue === 'string'
+            ? controlValue.split(',').map(v => v.trim()).filter(v => v !== '')
+            : Array.isArray(controlValue) ? controlValue : [controlValue];
+        if (this.props.options && this.props.options.length > 0) {
+            const map = new Map(this.props.options.map(opt => [String(opt[this.valueProperty]), opt]));
+            this.selectedItems = values.map(val => map.get(String(val))).filter(Boolean);
         }
         else {
-            // Add to selection
-            this.selectedValues = [...this.selectedValues, value];
+            this.selectedItems = [];
         }
-        this.updateDisplayValue();
-        this.emitValue();
-    }
-    selectAll() {
-        const allValues = this.filteredOptions.map(option => String(option[this.valueProperty]));
-        // Add only new values to avoid duplicates
-        const newValues = allValues.filter(value => !this.selectedValues.includes(value));
-        this.selectedValues = [...this.selectedValues, ...newValues];
-        this.updateDisplayValue();
-        this.emitValue();
     }
-    clearAll() {
-        this.selectedValues = [];
-        this.updateDisplayValue();
-        this.emitValue();
-    }
-    isSelected(option) {
-        return this.selectedValues.includes(String(option[this.valueProperty]));
-    }
-    trackByFn(_index, option) {
-        return option[this.valueProperty];
-    }
-    debugOptions() {
-        console.log('[MultiSelectSearch] DEBUG CLICK:', {
-            props: this.props,
-            filteredOptions: this.filteredOptions,
-            searchTerm: this.searchTerm,
-            propsOptions: this.props?.options,
-            displayValue: this.displayValue,
-            selectedValues: this.selectedValues,
-            isOpen: this.isOpen
-        });
+    applyDefaultValue() {
+        applyDefaultValueToControl(this.props);
     }
-    handleClickOutside(event) {
-        if (this.isOpen &&
-            !this.mainInputRef?.nativeElement?.contains(event.target) &&
-            !this.dropdownRef?.nativeElement?.contains(event.target)) {
-            this.isOpen = false;
-            this.searchTerm = '';
-            this.initializeOptions();
+    onFilter(event) {
+        // If no search term, show all options
+        if (!event || event.trim() === '') {
+            this.filteredItems = this.props?.options ? [...this.props.options] : [];
+            this.changeDetector.detectChanges();
+            return;
         }
-    }
-    parseValue(value) {
-        if (!value)
-            return [];
-        if (Array.isArray(value))
-            return value.map(v => String(v));
-        if (typeof value === 'string') {
-            return value
-                .split(',')
-                .map(v => v.trim())
-                .filter(v => v !== '');
-        }
-        return [String(value)];
-    }
-    emitValue() {
-        const value = this.selectedValues.join(',');
-        this.onChange(value);
-        if (this.props?.control) {
-            this.props.control.setValue(value);
-            this.props.control.markAsDirty();
-            this.props.control.markAsTouched();
+        // If no options, nothing to filter
+        if (!this.props?.options || this.props.options.length === 0) {
+            this.filteredItems = [];
+            this.changeDetector.detectChanges();
+            return;
         }
+        const search = replaceSpecialChars(event.toLowerCase());
+        this.filteredItems = this.props.options.filter(element => {
+            const label = element[this.labelProperty]
+                ? replaceSpecialChars(String(element[this.labelProperty]).toLowerCase())
+                : '';
+            const value = element[this.valueProperty]
+                ? replaceSpecialChars(String(element[this.valueProperty]).toLowerCase())
+                : '';
+            return label.includes(search) || value.includes(search);
+        });
+        this.changeDetector.detectChanges();
     }
-    getOptionByValue(value) {
-        return this.filteredOptions.find(option => String(option[this.valueProperty]) === String(value));
+    onFocus() {
+        console.log('onFocus');
     }
-    applyDefaultValue() {
-        if (this.props) {
-            applyDefaultValueToControl(this.props);
+    onBlur() {
+        console.log('onBlur');
+    }
+    openModal() {
+        if (this.modal) {
+            this.modal.present();
         }
     }
-    initializeOptions() {
-        console.log('[MultiSelectSearch] initializeOptions:', {
-            propsOptions: this.props?.options,
-            optionsLength: this.props?.options?.length || 0
-        });
-        this.filteredOptions = this.props?.options || [];
-        console.log('[MultiSelectSearch] filteredOptions set to:', this.filteredOptions);
-        // Force change detection
+    preventDefaultBehavior(event) {
+        event.preventDefault();
+        event.stopPropagation();
+        this.openModal();
+    }
+    cancelModal() {
+        // Reset filter and show all options when closing modal
+        this.searchTerm = '';
+        this.filteredItems = this.props?.options ? [...this.props.options] : [];
         this.changeDetector.detectChanges();
+        if (this.modal) {
+            this.modal.dismiss();
+        }
     }
-    filterOptions() {
-        if (!this.searchTerm) {
-            this.initializeOptions();
-            return;
+    selectItem(item) {
+        // Multi-select logic: toggle selection
+        const index = this.selectedItems.findIndex(selectedItem => selectedItem[this.valueProperty] === item[this.valueProperty]);
+        if (index === -1) {
+            // Add to selection
+            this.selectedItems.push(item);
         }
-        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);
+        else {
+            // Remove from selection
+            this.selectedItems.splice(index, 1);
+        }
+        this.updateDisplayValue();
+        this.applyChanges();
+    }
+    selectAll() {
+        // Add all filtered items that aren't already selected
+        this.filteredItems.forEach(item => {
+            const isAlreadySelected = this.selectedItems.some(selectedItem => selectedItem[this.valueProperty] === item[this.valueProperty]);
+            if (!isAlreadySelected) {
+                this.selectedItems.push(item);
+            }
         });
+        this.updateDisplayValue();
+        this.applyChanges();
+    }
+    clearAll() {
+        this.selectedItems = [];
+        this.updateDisplayValue();
+        this.applyChanges();
+    }
+    isItemSelected(item) {
+        return this.selectedItems.some(selectedItem => selectedItem[this.valueProperty] === item[this.valueProperty]);
     }
     updateDisplayValue() {
-        if (this.selectedValues.length === 0) {
+        if (this.selectedItems.length === 0) {
             this.displayValue = '';
             return;
         }
-        if (this.selectedValues.length === 1) {
-            const option = this.getOptionByValue(this.selectedValues[0]);
-            this.displayValue = option ? option[this.labelProperty] : '';
+        if (this.selectedItems.length === 1) {
+            this.displayValue = this.selectedItems[0][this.labelProperty];
         }
         else {
-            this.displayValue = `${this.selectedValues.length} elementos seleccionados`;
+            this.displayValue = `${this.selectedItems.length} elementos seleccionados`;
         }
     }
-    syncSelectedValues() {
-        if (this.props?.control?.value) {
-            const valueArray = this.parseValue(this.props.control.value);
-            this.selectedValues = valueArray;
+    applyChanges() {
+        if (!this.props?.control) {
+            return;
+        }
+        try {
+            this.isProcessingChanges = true;
+            // Convert selected items to comma-separated string of values
+            const selectedValues = this.selectedItems.map(item => String(item[this.valueProperty]));
+            const value = selectedValues.join(',');
+            this.props.control.setValue(value);
+            this.props.control.markAsDirty();
+            this.props.control.updateValueAndValidity();
+        }
+        finally {
+            this.isProcessingChanges = false;
         }
     }
+    // Método público para reiniciar el componente
+    reset() {
+        this.selectedItems = [];
+        this.displayValue = '';
+        if (this.props?.control) {
+            this.props.control.setValue('');
+        }
+        this.changeDetector.detectChanges();
+    }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: MultiSelectSearchComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: MultiSelectSearchComponent, isStandalone: true, selector: "val-multi-select-search", inputs: { props: "props", labelProperty: "labelProperty", valueProperty: "valueProperty", placeholder: "placeholder" }, providers: [
-            {
-                provide: NG_VALUE_ACCESSOR,
-                useExisting: forwardRef(() => MultiSelectSearchComponent),
-                multi: true,
-            },
-        ], viewQueries: [{ propertyName: "dropdownRef", first: true, predicate: ["dropdown"], descendants: true }, { propertyName: "mainInputRef", first: true, predicate: ["mainInput"], descendants: true }], usesOnChanges: true, ngImport: i0, template: `
-    <div class="multi-select-container" (click)="toggleDropdown($event)">
-      <!-- Main input display -->
-      <ion-input
-        #mainInput
-        type="text"
-        [value]="displayValue"
-        [placeholder]="props?.placeholder || placeholder"
-        readonly
-        class="main-input"
-        [class.is-open]="isOpen"
-      />
-
-      <!-- Dropdown icon -->
-      <ion-icon name="chevron-down-outline" class="dropdown-icon" [class.rotated]="isOpen"></ion-icon>
-
-      <!-- Hidden input for form control -->
-      <ion-input
-        style="position: absolute; opacity: 0; pointer-events: none;"
-        [formControl]="props?.control"
-        type="hidden"
-      />
-    </div>
-
-    <!-- Dropdown overlay -->
-    <div class="dropdown-overlay" [class.visible]="isOpen" #dropdown>
-      <!-- Search bar -->
-      <div class="search-container" *ngIf="props?.options && props.options.length > 5">
-        <ion-searchbar
-          #searchbar
-          [placeholder]="searchPlaceholder"
-          (ionInput)="onSearch($event)"
-          [value]="searchTerm"
-          show-clear-button="focus"
-          [debounce]="200"
-        ></ion-searchbar>
-      </div>
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: MultiSelectSearchComponent, isStandalone: true, selector: "val-multi-select-search", inputs: { label: "label", labelProperty: "labelProperty", valueProperty: "valueProperty", placeholder: "placeholder", props: "props" }, viewQueries: [{ propertyName: "modal", first: true, predicate: ["modal"], descendants: true }], usesOnChanges: true, ngImport: i0, template: `
+    <ion-input
+      type="text"
+      [value]="displayValue"
+      [placeholder]="props?.placeholder || placeholder"
+      readonly
+      (mousedown)="preventDefaultBehavior($event)"
+    />
 
-      <!-- Debug button -->
-      <div class="search-container" style="background: red; color: white; padding: 4px;">
-        <button (click)="debugOptions()">DEBUG: {{ filteredOptions.length }} opciones</button>
-      </div>
-      
-      <!-- Action buttons -->
-      <div class="actions-container">
-        <ion-button fill="clear" size="small" (click)="selectAll()" [disabled]="filteredOptions.length === 0">
-          Seleccionar todos
-        </ion-button>
-        <ion-button
-          fill="clear"
-          size="small"
-          color="medium"
-          (click)="clearAll()"
-          [disabled]="selectedValues.length === 0"
-        >
-          Limpiar
-        </ion-button>
-      </div>
+    <ion-input style="position: absolute;" [formControl]="props.control" type="hidden"></ion-input>
 
-      <!-- Options list -->
-      <div class="options-container">
-        <ion-list class="options-list">
-          <ion-item
-            *ngFor="let option of filteredOptions; trackBy: trackByFn"
-            button
-            (click)="toggleOption(option)"
-            class="option-item"
-          >
-            <ion-checkbox slot="start" [checked]="isSelected(option)"></ion-checkbox>
-            <ion-label>{{ option[labelProperty] }}</ion-label>
-          </ion-item>
+    <ion-modal
+      #modal
+      trigger="open-modal"
+      [initialBreakpoint]="1"
+      [breakpoints]="[0, 0.5, 0.75, 1]"
+      (didDismiss)="cancelModal()"
+    >
+      <ng-template>
+        <ion-header>
+          <ion-toolbar>
+            <ion-title>{{ label }}</ion-title>
+            <ion-buttons slot="end">
+              <ion-button (click)="cancelModal()">Cerrar</ion-button>
+            </ion-buttons>
+          </ion-toolbar>
+          <ion-toolbar>
+            <val-searchbar (filterEvent)="onFilter($event)" (focusEvent)="onFocus()" (blurEvent)="onBlur()" />
+          </ion-toolbar>
+        </ion-header>
+        <ion-content>
+          <!-- Action buttons for multi-select -->
+          <div class="actions-container" style="padding: 16px; border-bottom: 1px solid var(--ion-color-light-shade);">
+            <ion-button 
+              fill="clear" 
+              size="small" 
+              (click)="selectAll()"
+              [disabled]="filteredItems.length === 0"
+            >
+              Seleccionar todos
+            </ion-button>
+            <ion-button 
+              fill="clear" 
+              size="small" 
+              color="medium" 
+              (click)="clearAll()"
+              [disabled]="selectedItems.length === 0"
+            >
+              Limpiar
+            </ion-button>
+          </div>
 
-          <!-- No results message -->
-          <ion-item *ngIf="filteredOptions.length === 0" class="no-results">
-            <ion-label color="medium">
-              {{ searchTerm ? 'No se encontraron resultados' : 'No hay opciones disponibles' }}
-            </ion-label>
-          </ion-item>
-        </ion-list>
-      </div>
-    </div>
-  `, isInline: true, styles: [".multi-select-container{position:relative;display:flex;align-items:center;width:100%}.multi-select-container .main-input{flex:1;cursor:pointer}.multi-select-container .main-input.is-open{border-color:var(--ion-color-primary)}.multi-select-container .dropdown-icon{position:absolute;right:12px;font-size:16px;color:var(--ion-color-medium);transition:transform .2s ease;pointer-events:none}.multi-select-container .dropdown-icon.rotated{transform:rotate(180deg)}.dropdown-overlay{position:absolute;top:100%;left:0;right:0;z-index:1000;background:var(--ion-color-light);border:1px solid var(--ion-color-medium);border-radius:8px;box-shadow:0 4px 16px #00000026;max-height:300px;overflow:hidden;opacity:0;visibility:hidden;transform:translateY(-10px);transition:all .2s ease}.dropdown-overlay.visible{opacity:1;visibility:visible;transform:translateY(0)}.dropdown-overlay .search-container{padding:8px;border-bottom:1px solid var(--ion-color-light-shade)}.dropdown-overlay .search-container ion-searchbar{--background: var(--ion-color-light);--border-radius: 6px;--box-shadow: none;padding:0}.dropdown-overlay .actions-container{display:flex;justify-content:space-between;padding:8px;border-bottom:1px solid var(--ion-color-light-shade);background:var(--ion-color-light-tint)}.dropdown-overlay .actions-container ion-button{--padding-start: 8px;--padding-end: 8px;font-size:12px;height:28px}.dropdown-overlay .options-container{max-height:200px;overflow-y:auto}.dropdown-overlay .options-container .options-list{padding:0;margin:0}.dropdown-overlay .options-container .options-list .option-item{--padding-start: 12px;--padding-end: 12px;--inner-padding-end: 0;cursor:pointer;transition:background-color .2s ease}.dropdown-overlay .options-container .options-list .option-item:hover{--background: var(--ion-color-light-shade)}.dropdown-overlay .options-container .options-list .option-item ion-checkbox{margin-right:12px}.dropdown-overlay .options-container .options-list .option-item ion-label{font-size:14px;color:var(--ion-color-dark)}.dropdown-overlay .options-container .options-list .no-results{--padding-start: 12px;--padding-end: 12px;cursor:default}.dropdown-overlay .options-container .options-list .no-results ion-label{font-size:14px;font-style:italic}@media (prefers-color-scheme: dark){.dropdown-overlay{background:var(--ion-color-dark);border-color:var(--ion-color-medium-shade)}.dropdown-overlay .search-container{border-bottom-color:var(--ion-color-dark-shade)}.dropdown-overlay .search-container ion-searchbar{--background: var(--ion-color-dark-tint)}.dropdown-overlay .actions-container{border-bottom-color:var(--ion-color-dark-shade);background:var(--ion-color-dark-tint)}.dropdown-overlay .options-list .option-item:hover{--background: var(--ion-color-dark-shade)}.dropdown-overlay .options-list .option-item ion-label{color:var(--ion-color-light)}}@media (max-width: 768px){.dropdown-overlay .options-container{max-height:180px}.dropdown-overlay .actions-container ion-button{font-size:11px;height:26px}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: IonicModule }, { kind: "component", type: i2.IonButton, selector: "ion-button", inputs: ["buttonType", "color", "disabled", "download", "expand", "fill", "form", "href", "mode", "rel", "routerAnimation", "routerDirection", "shape", "size", "strong", "target", "type"] }, { kind: "component", type: i2.IonCheckbox, selector: "ion-checkbox", inputs: ["alignment", "checked", "color", "disabled", "indeterminate", "justify", "labelPlacement", "mode", "name", "value"] }, { 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.IonSearchbar, selector: "ion-searchbar", inputs: ["animated", "autocapitalize", "autocomplete", "autocorrect", "cancelButtonIcon", "cancelButtonText", "clearIcon", "color", "debounce", "disabled", "enterkeyhint", "inputmode", "maxlength", "minlength", "mode", "name", "placeholder", "searchIcon", "showCancelButton", "showClearButton", "spellcheck", "type", "value"] }, { kind: "directive", type: i2.BooleanValueAccessor, selector: "ion-checkbox,ion-toggle" }, { kind: "directive", type: i2.TextValueAccessor, selector: "ion-input:not([type=number]),ion-textarea,ion-searchbar" }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }] }); }
+          <ion-list>
+            <ion-item *ngFor="let item of filteredItems" button (click)="selectItem(item)" detail="false">
+              <ion-checkbox
+                slot="start"
+                [checked]="isItemSelected(item)"
+              ></ion-checkbox>
+              <ion-label>{{ item[labelProperty] }}</ion-label>
+            </ion-item>
+            <ion-item *ngIf="filteredItems.length === 0" lines="none">
+              <ion-label color="dark">No se encontraron resultados</ion-label>
+            </ion-item>
+          </ion-list>
+        </ion-content>
+      </ng-template>
+    </ion-modal>
+  `, isInline: true, styles: ["ion-header{padding:8px 8px 0}.actions-container{display:flex;justify-content:space-between;align-items:center}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: IonicModule }, { kind: "component", type: i2.IonButton, selector: "ion-button", inputs: ["buttonType", "color", "disabled", "download", "expand", "fill", "form", "href", "mode", "rel", "routerAnimation", "routerDirection", "shape", "size", "strong", "target", "type"] }, { kind: "component", type: i2.IonButtons, selector: "ion-buttons", inputs: ["collapse"] }, { kind: "component", type: i2.IonCheckbox, selector: "ion-checkbox", inputs: ["alignment", "checked", "color", "disabled", "indeterminate", "justify", "labelPlacement", "mode", "name", "value"] }, { kind: "component", type: i2.IonContent, selector: "ion-content", inputs: ["color", "forceOverscroll", "fullscreen", "scrollEvents", "scrollX", "scrollY"] }, { kind: "component", type: i2.IonHeader, selector: "ion-header", inputs: ["collapse", "mode", "translucent"] }, { kind: "component", type: i2.IonInput, selector: "ion-input", inputs: ["autocapitalize", "autocomplete", "autocorrect", "autofocus", "clearInput", "clearOnEdit", "color", "counter", "counterFormatter", "debounce", "disabled", "enterkeyhint", "errorText", "fill", "helperText", "inputmode", "label", "labelPlacement", "max", "maxlength", "min", "minlength", "mode", "multiple", "name", "pattern", "placeholder", "readonly", "required", "shape", "spellcheck", "step", "type", "value"] }, { kind: "component", type: i2.IonItem, selector: "ion-item", inputs: ["button", "color", "detail", "detailIcon", "disabled", "download", "href", "lines", "mode", "rel", "routerAnimation", "routerDirection", "target", "type"] }, { kind: "component", type: i2.IonLabel, selector: "ion-label", inputs: ["color", "mode", "position"] }, { kind: "component", type: i2.IonList, selector: "ion-list", inputs: ["inset", "lines", "mode"] }, { kind: "component", type: i2.IonTitle, selector: "ion-title", inputs: ["color", "size"] }, { kind: "component", type: i2.IonToolbar, selector: "ion-toolbar", inputs: ["color", "mode"] }, { kind: "component", type: i2.IonModal, selector: "ion-modal" }, { kind: "directive", type: i2.BooleanValueAccessor, selector: "ion-checkbox,ion-toggle" }, { kind: "directive", type: i2.TextValueAccessor, selector: "ion-input:not([type=number]),ion-textarea,ion-searchbar" }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "component", type: SearchbarComponent, selector: "val-searchbar", inputs: ["disabled"], outputs: ["filterEvent", "focusEvent", "blurEvent"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: MultiSelectSearchComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'val-multi-select-search', standalone: true, imports: [CommonModule, IonicModule, FormsModule, ReactiveFormsModule], providers: [
-                        {
-                            provide: NG_VALUE_ACCESSOR,
-                            useExisting: forwardRef(() => MultiSelectSearchComponent),
-                            multi: true,
-                        },
-                    ], template: `
-    <div class="multi-select-container" (click)="toggleDropdown($event)">
-      <!-- Main input display -->
-      <ion-input
-        #mainInput
-        type="text"
-        [value]="displayValue"
-        [placeholder]="props?.placeholder || placeholder"
-        readonly
-        class="main-input"
-        [class.is-open]="isOpen"
-      />
-
-      <!-- Dropdown icon -->
-      <ion-icon name="chevron-down-outline" class="dropdown-icon" [class.rotated]="isOpen"></ion-icon>
-
-      <!-- Hidden input for form control -->
-      <ion-input
-        style="position: absolute; opacity: 0; pointer-events: none;"
-        [formControl]="props?.control"
-        type="hidden"
-      />
-    </div>
-
-    <!-- Dropdown overlay -->
-    <div class="dropdown-overlay" [class.visible]="isOpen" #dropdown>
-      <!-- Search bar -->
-      <div class="search-container" *ngIf="props?.options && props.options.length > 5">
-        <ion-searchbar
-          #searchbar
-          [placeholder]="searchPlaceholder"
-          (ionInput)="onSearch($event)"
-          [value]="searchTerm"
-          show-clear-button="focus"
-          [debounce]="200"
-        ></ion-searchbar>
-      </div>
+            args: [{ selector: 'val-multi-select-search', standalone: true, imports: [CommonModule, IonicModule, FormsModule, SearchbarComponent, ReactiveFormsModule], template: `
+    <ion-input
+      type="text"
+      [value]="displayValue"
+      [placeholder]="props?.placeholder || placeholder"
+      readonly
+      (mousedown)="preventDefaultBehavior($event)"
+    />
 
-      <!-- Debug button -->
-      <div class="search-container" style="background: red; color: white; padding: 4px;">
-        <button (click)="debugOptions()">DEBUG: {{ filteredOptions.length }} opciones</button>
-      </div>
-      
-      <!-- Action buttons -->
-      <div class="actions-container">
-        <ion-button fill="clear" size="small" (click)="selectAll()" [disabled]="filteredOptions.length === 0">
-          Seleccionar todos
-        </ion-button>
-        <ion-button
-          fill="clear"
-          size="small"
-          color="medium"
-          (click)="clearAll()"
-          [disabled]="selectedValues.length === 0"
-        >
-          Limpiar
-        </ion-button>
-      </div>
+    <ion-input style="position: absolute;" [formControl]="props.control" type="hidden"></ion-input>
 
-      <!-- Options list -->
-      <div class="options-container">
-        <ion-list class="options-list">
-          <ion-item
-            *ngFor="let option of filteredOptions; trackBy: trackByFn"
-            button
-            (click)="toggleOption(option)"
-            class="option-item"
-          >
-            <ion-checkbox slot="start" [checked]="isSelected(option)"></ion-checkbox>
-            <ion-label>{{ option[labelProperty] }}</ion-label>
-          </ion-item>
+    <ion-modal
+      #modal
+      trigger="open-modal"
+      [initialBreakpoint]="1"
+      [breakpoints]="[0, 0.5, 0.75, 1]"
+      (didDismiss)="cancelModal()"
+    >
+      <ng-template>
+        <ion-header>
+          <ion-toolbar>
+            <ion-title>{{ label }}</ion-title>
+            <ion-buttons slot="end">
+              <ion-button (click)="cancelModal()">Cerrar</ion-button>
+            </ion-buttons>
+          </ion-toolbar>
+          <ion-toolbar>
+            <val-searchbar (filterEvent)="onFilter($event)" (focusEvent)="onFocus()" (blurEvent)="onBlur()" />
+          </ion-toolbar>
+        </ion-header>
+        <ion-content>
+          <!-- Action buttons for multi-select -->
+          <div class="actions-container" style="padding: 16px; border-bottom: 1px solid var(--ion-color-light-shade);">
+            <ion-button 
+              fill="clear" 
+              size="small" 
+              (click)="selectAll()"
+              [disabled]="filteredItems.length === 0"
+            >
+              Seleccionar todos
+            </ion-button>
+            <ion-button 
+              fill="clear" 
+              size="small" 
+              color="medium" 
+              (click)="clearAll()"
+              [disabled]="selectedItems.length === 0"
+            >
+              Limpiar
+            </ion-button>
+          </div>
 
-          <!-- No results message -->
-          <ion-item *ngIf="filteredOptions.length === 0" class="no-results">
-            <ion-label color="medium">
-              {{ searchTerm ? 'No se encontraron resultados' : 'No hay opciones disponibles' }}
-            </ion-label>
-          </ion-item>
-        </ion-list>
-      </div>
-    </div>
-  `, styles: [".multi-select-container{position:relative;display:flex;align-items:center;width:100%}.multi-select-container .main-input{flex:1;cursor:pointer}.multi-select-container .main-input.is-open{border-color:var(--ion-color-primary)}.multi-select-container .dropdown-icon{position:absolute;right:12px;font-size:16px;color:var(--ion-color-medium);transition:transform .2s ease;pointer-events:none}.multi-select-container .dropdown-icon.rotated{transform:rotate(180deg)}.dropdown-overlay{position:absolute;top:100%;left:0;right:0;z-index:1000;background:var(--ion-color-light);border:1px solid var(--ion-color-medium);border-radius:8px;box-shadow:0 4px 16px #00000026;max-height:300px;overflow:hidden;opacity:0;visibility:hidden;transform:translateY(-10px);transition:all .2s ease}.dropdown-overlay.visible{opacity:1;visibility:visible;transform:translateY(0)}.dropdown-overlay .search-container{padding:8px;border-bottom:1px solid var(--ion-color-light-shade)}.dropdown-overlay .search-container ion-searchbar{--background: var(--ion-color-light);--border-radius: 6px;--box-shadow: none;padding:0}.dropdown-overlay .actions-container{display:flex;justify-content:space-between;padding:8px;border-bottom:1px solid var(--ion-color-light-shade);background:var(--ion-color-light-tint)}.dropdown-overlay .actions-container ion-button{--padding-start: 8px;--padding-end: 8px;font-size:12px;height:28px}.dropdown-overlay .options-container{max-height:200px;overflow-y:auto}.dropdown-overlay .options-container .options-list{padding:0;margin:0}.dropdown-overlay .options-container .options-list .option-item{--padding-start: 12px;--padding-end: 12px;--inner-padding-end: 0;cursor:pointer;transition:background-color .2s ease}.dropdown-overlay .options-container .options-list .option-item:hover{--background: var(--ion-color-light-shade)}.dropdown-overlay .options-container .options-list .option-item ion-checkbox{margin-right:12px}.dropdown-overlay .options-container .options-list .option-item ion-label{font-size:14px;color:var(--ion-color-dark)}.dropdown-overlay .options-container .options-list .no-results{--padding-start: 12px;--padding-end: 12px;cursor:default}.dropdown-overlay .options-container .options-list .no-results ion-label{font-size:14px;font-style:italic}@media (prefers-color-scheme: dark){.dropdown-overlay{background:var(--ion-color-dark);border-color:var(--ion-color-medium-shade)}.dropdown-overlay .search-container{border-bottom-color:var(--ion-color-dark-shade)}.dropdown-overlay .search-container ion-searchbar{--background: var(--ion-color-dark-tint)}.dropdown-overlay .actions-container{border-bottom-color:var(--ion-color-dark-shade);background:var(--ion-color-dark-tint)}.dropdown-overlay .options-list .option-item:hover{--background: var(--ion-color-dark-shade)}.dropdown-overlay .options-list .option-item ion-label{color:var(--ion-color-light)}}@media (max-width: 768px){.dropdown-overlay .options-container{max-height:180px}.dropdown-overlay .actions-container ion-button{font-size:11px;height:26px}}\n"] }]
-        }], ctorParameters: () => [], propDecorators: { dropdownRef: [{
-                type: ViewChild,
-                args: ['dropdown']
-            }], mainInputRef: [{
+          <ion-list>
+            <ion-item *ngFor="let item of filteredItems" button (click)="selectItem(item)" detail="false">
+              <ion-checkbox
+                slot="start"
+                [checked]="isItemSelected(item)"
+              ></ion-checkbox>
+              <ion-label>{{ item[labelProperty] }}</ion-label>
+            </ion-item>
+            <ion-item *ngIf="filteredItems.length === 0" lines="none">
+              <ion-label color="dark">No se encontraron resultados</ion-label>
+            </ion-item>
+          </ion-list>
+        </ion-content>
+      </ng-template>
+    </ion-modal>
+  `, styles: ["ion-header{padding:8px 8px 0}.actions-container{display:flex;justify-content:space-between;align-items:center}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { modal: [{
                 type: ViewChild,
-                args: ['mainInput']
-            }], props: [{
+                args: ['modal']
+            }], label: [{
                 type: Input
             }], labelProperty: [{
                 type: Input
@@ -7920,6 +7921,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
                 type: Input
             }], placeholder: [{
                 type: Input
+            }], props: [{
+                type: Input
             }] } });
 
 class FormComponent {
@@ -8114,7 +8117,7 @@ class FormComponent {
         ></val-button-group>
       </form>
     </div>
-  `, isInline: true, styles: [":root{--ion-color-primary: #7026df;--ion-color-primary-rgb: 112, 38, 223;--ion-color-primary-contrast: #ffffff;--ion-color-primary-contrast-rgb: 255, 255, 255;--ion-color-primary-shade: #6321c4;--ion-color-primary-tint: #7e3ce2;--ion-color-secondary: #e2ccff;--ion-color-secondary-rgb: 226, 204, 255;--ion-color-secondary-contrast: #000000;--ion-color-secondary-contrast-rgb: 0, 0, 0;--ion-color-secondary-shade: #c7b4e0;--ion-color-secondary-tint: #e5d1ff;--ion-color-texti: #354c69;--ion-color-texti-rgb: 53, 76, 105;--ion-color-texti-contrast: #ffffff;--ion-color-texti-contrast-rgb: 255, 255, 255;--ion-color-texti-shade: #2f435c;--ion-color-texti-tint: #495e78;--ion-color-darki: #090f1b;--ion-color-darki-rgb: 9, 15, 27;--ion-color-darki-contrast: #ffffff;--ion-color-darki-contrast-rgb: 255, 255, 255;--ion-color-darki-shade: #080d18;--ion-color-darki-tint: #222732;--ion-color-medium: #9e9e9e;--ion-color-medium-rgb: 158, 158, 158;--ion-color-medium-contrast: #000000;--ion-color-medium-contrast-rgb: 0, 0, 0;--ion-color-medium-shade: #8b8b8b;--ion-color-medium-tint: #a8a8a8;--swiper-pagination-color: var(--ion-color-primary);--swiper-navigation-color: var(--ion-color-primary);--swiper-pagination-bullet-inactive-color: var(--ion-color-medium)}@media (prefers-color-scheme: dark){:root{--ion-color-texti: #8fc1ff;--ion-color-texti-rgb: 143, 193, 255;--ion-color-texti-contrast: #000000;--ion-color-texti-contrast-rgb: 0, 0, 0;--ion-color-texti-shade: #7eaae0;--ion-color-texti-tint: #9ac7ff;--ion-color-darki: #ffffff;--ion-color-darki-rgb: 255, 255, 255;--ion-color-darki-contrast: #000000;--ion-color-darki-contrast-rgb: 0, 0, 0;--ion-color-darki-shade: #e0e0e0;--ion-color-darki-tint: #ffffff;--ion-color-primary: #8f49f8;--ion-color-primary-rgb: 143, 73, 248;--ion-color-primary-contrast: #ffffff;--ion-color-primary-contrast-rgb: 255, 255, 255;--ion-color-primary-shade: #7e40da;--ion-color-primary-tint: #9a5bf9}}.ion-color-texti{--ion-color-base: var(--ion-color-texti);--ion-color-base-rgb: var(--ion-color-texti-rgb);--ion-color-contrast: var(--ion-color-texti-contrast);--ion-color-contrast-rgb: var(--ion-color-texti-contrast-rgb);--ion-color-shade: var(--ion-color-texti-shade);--ion-color-tint: var(--ion-color-texti-tint)}.ion-color-darki{--ion-color-base: var(--ion-color-darki);--ion-color-base-rgb: var(--ion-color-darki-rgb);--ion-color-contrast: var(--ion-color-darki-contrast);--ion-color-contrast-rgb: var(--ion-color-darki-contrast-rgb);--ion-color-shade: var(--ion-color-darki-shade);--ion-color-tint: var(--ion-color-darki-tint)}.section{margin-top:1rem}.input{margin:.5rem 0}@media (min-width: 768px){.input{margin:.75rem 0}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "component", type: DisplayComponent, selector: "val-display", inputs: ["props"] }, { kind: "component", type: TitleComponent, selector: "val-title", inputs: ["props"] }, { kind: "component", type: TextInputComponent, selector: "val-text-input", inputs: ["props"] }, { kind: "component", type: CheckInputComponent, selector: "val-check-input" }, { kind: "component", type: ButtonGroupComponent, selector: "val-button-group", inputs: ["props"], outputs: ["onClick"] }, { kind: "component", type: DividerComponent, selector: "val-divider", inputs: ["props"] }, { kind: "component", type: HintComponent, selector: "val-hint", inputs: ["props"] }, { kind: "component", type: CommentInputComponent, selector: "val-comment-input", inputs: ["props"] }, { kind: "component", type: DateInputComponent, selector: "val-date-input", inputs: ["props"] }, { kind: "component", type: FileInputComponent, selector: "val-file-input", inputs: ["props"] }, { kind: "component", type: HourInputComponent, selector: "val-hour-input", inputs: ["props"] }, { kind: "component", type: EmailInputComponent, selector: "val-email-input", inputs: ["props"] }, { kind: "component", type: NumberInputComponent, selector: "val-number-input", inputs: ["props"] }, { kind: "component", type: NumberFromToComponent, selector: "val-number-from-to", inputs: ["props"] }, { kind: "component", type: RadioInputComponent, selector: "val-radio-input", inputs: ["props"] }, { kind: "component", type: PasswordInputComponent, selector: "val-password-input", inputs: ["props"] }, { kind: "component", type: PinInputComponent, selector: "val-pin-input", inputs: ["props"] }, { kind: "component", type: SelectSearchComponent, selector: "val-select-search", inputs: ["label", "labelProperty", "valueProperty", "multiple", "placeholder", "props"] }, { kind: "component", type: MultiSelectSearchComponent, selector: "val-multi-select-search", inputs: ["props", "labelProperty", "valueProperty", "placeholder"] }, { kind: "component", type: SearchSelectorComponent, selector: "val-select-input", inputs: ["props"] }] }); }
+  `, isInline: true, styles: [":root{--ion-color-primary: #7026df;--ion-color-primary-rgb: 112, 38, 223;--ion-color-primary-contrast: #ffffff;--ion-color-primary-contrast-rgb: 255, 255, 255;--ion-color-primary-shade: #6321c4;--ion-color-primary-tint: #7e3ce2;--ion-color-secondary: #e2ccff;--ion-color-secondary-rgb: 226, 204, 255;--ion-color-secondary-contrast: #000000;--ion-color-secondary-contrast-rgb: 0, 0, 0;--ion-color-secondary-shade: #c7b4e0;--ion-color-secondary-tint: #e5d1ff;--ion-color-texti: #354c69;--ion-color-texti-rgb: 53, 76, 105;--ion-color-texti-contrast: #ffffff;--ion-color-texti-contrast-rgb: 255, 255, 255;--ion-color-texti-shade: #2f435c;--ion-color-texti-tint: #495e78;--ion-color-darki: #090f1b;--ion-color-darki-rgb: 9, 15, 27;--ion-color-darki-contrast: #ffffff;--ion-color-darki-contrast-rgb: 255, 255, 255;--ion-color-darki-shade: #080d18;--ion-color-darki-tint: #222732;--ion-color-medium: #9e9e9e;--ion-color-medium-rgb: 158, 158, 158;--ion-color-medium-contrast: #000000;--ion-color-medium-contrast-rgb: 0, 0, 0;--ion-color-medium-shade: #8b8b8b;--ion-color-medium-tint: #a8a8a8;--swiper-pagination-color: var(--ion-color-primary);--swiper-navigation-color: var(--ion-color-primary);--swiper-pagination-bullet-inactive-color: var(--ion-color-medium)}@media (prefers-color-scheme: dark){:root{--ion-color-texti: #8fc1ff;--ion-color-texti-rgb: 143, 193, 255;--ion-color-texti-contrast: #000000;--ion-color-texti-contrast-rgb: 0, 0, 0;--ion-color-texti-shade: #7eaae0;--ion-color-texti-tint: #9ac7ff;--ion-color-darki: #ffffff;--ion-color-darki-rgb: 255, 255, 255;--ion-color-darki-contrast: #000000;--ion-color-darki-contrast-rgb: 0, 0, 0;--ion-color-darki-shade: #e0e0e0;--ion-color-darki-tint: #ffffff;--ion-color-primary: #8f49f8;--ion-color-primary-rgb: 143, 73, 248;--ion-color-primary-contrast: #ffffff;--ion-color-primary-contrast-rgb: 255, 255, 255;--ion-color-primary-shade: #7e40da;--ion-color-primary-tint: #9a5bf9}}.ion-color-texti{--ion-color-base: var(--ion-color-texti);--ion-color-base-rgb: var(--ion-color-texti-rgb);--ion-color-contrast: var(--ion-color-texti-contrast);--ion-color-contrast-rgb: var(--ion-color-texti-contrast-rgb);--ion-color-shade: var(--ion-color-texti-shade);--ion-color-tint: var(--ion-color-texti-tint)}.ion-color-darki{--ion-color-base: var(--ion-color-darki);--ion-color-base-rgb: var(--ion-color-darki-rgb);--ion-color-contrast: var(--ion-color-darki-contrast);--ion-color-contrast-rgb: var(--ion-color-darki-contrast-rgb);--ion-color-shade: var(--ion-color-darki-shade);--ion-color-tint: var(--ion-color-darki-tint)}.section{margin-top:1rem}.input{margin:.5rem 0}@media (min-width: 768px){.input{margin:.75rem 0}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "component", type: DisplayComponent, selector: "val-display", inputs: ["props"] }, { kind: "component", type: TitleComponent, selector: "val-title", inputs: ["props"] }, { kind: "component", type: TextInputComponent, selector: "val-text-input", inputs: ["props"] }, { kind: "component", type: CheckInputComponent, selector: "val-check-input" }, { kind: "component", type: ButtonGroupComponent, selector: "val-button-group", inputs: ["props"], outputs: ["onClick"] }, { kind: "component", type: DividerComponent, selector: "val-divider", inputs: ["props"] }, { kind: "component", type: HintComponent, selector: "val-hint", inputs: ["props"] }, { kind: "component", type: CommentInputComponent, selector: "val-comment-input", inputs: ["props"] }, { kind: "component", type: DateInputComponent, selector: "val-date-input", inputs: ["props"] }, { kind: "component", type: FileInputComponent, selector: "val-file-input", inputs: ["props"] }, { kind: "component", type: HourInputComponent, selector: "val-hour-input", inputs: ["props"] }, { kind: "component", type: EmailInputComponent, selector: "val-email-input", inputs: ["props"] }, { kind: "component", type: NumberInputComponent, selector: "val-number-input", inputs: ["props"] }, { kind: "component", type: NumberFromToComponent, selector: "val-number-from-to", inputs: ["props"] }, { kind: "component", type: RadioInputComponent, selector: "val-radio-input", inputs: ["props"] }, { kind: "component", type: PasswordInputComponent, selector: "val-password-input", inputs: ["props"] }, { kind: "component", type: PinInputComponent, selector: "val-pin-input", inputs: ["props"] }, { kind: "component", type: SelectSearchComponent, selector: "val-select-search", inputs: ["label", "labelProperty", "valueProperty", "multiple", "placeholder", "props"] }, { kind: "component", type: MultiSelectSearchComponent, selector: "val-multi-select-search", inputs: ["label", "labelProperty", "valueProperty", "placeholder", "props"] }, { kind: "component", type: SearchSelectorComponent, selector: "val-select-input", inputs: ["props"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: FormComponent, decorators: [{
             type: Component,