valtech-components 2.0.396 → 2.0.397

package/fesm2022/valtech-components.mjs

@@ -1,6 +1,6 @@
 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 { IonAvatar, IonCard, IonIcon, IonButton, IonSpinner, IonText, IonModal, IonHeader, IonToolbar, IonContent, IonButtons, IonTitle, IonProgressBar, IonCardContent, IonCardHeader, IonCardTitle, IonCardSubtitle, IonCheckbox, IonTextarea, IonDatetime, IonDatetimeButton, IonInput, IonSelect, IonSelectOption, IonLabel, IonSearchbar, IonRadioGroup, IonRadio, IonMenuButton, IonFooter, IonList, IonListHeader, IonNote, IonItem } from '@ionic/angular/standalone';
+import { 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';
 import { addIcons } from 'ionicons';
@@ -9,19 +9,19 @@ import { BehaviorSubject, distinctUntilChanged, shareReplay, map, Subscription,
 import { Router, RouterLink } from '@angular/router';
 import { Browser } from '@capacitor/browser';
 import * as i1$1 from '@angular/platform-browser';
-import { Clipboard } from '@capacitor/clipboard';
+import * as i1$2 from '@angular/forms';
+import { ReactiveFormsModule, FormsModule, Validators } from '@angular/forms';
+import { map as map$1, distinctUntilChanged as distinctUntilChanged$1 } from 'rxjs/operators';
+import * as i1$3 from 'ng-otp-input';
+import { NgOtpInputComponent, NgOtpInputModule } from 'ng-otp-input';
 import * as i2 from '@ionic/angular';
-import { ToastController, IonicModule } from '@ionic/angular';
+import { IonicModule, ToastController } from '@ionic/angular';
+import { Clipboard } from '@capacitor/clipboard';
 import * as Prism from 'prismjs';
 import 'prismjs/components/prism-css';
 import 'prismjs/components/prism-javascript';
 import 'prismjs/components/prism-markup';
 import 'prismjs/components/prism-typescript';
-import * as i1$2 from '@angular/forms';
-import { ReactiveFormsModule, FormsModule, NG_VALUE_ACCESSOR, Validators } from '@angular/forms';
-import { map as map$1, distinctUntilChanged as distinctUntilChanged$1 } from 'rxjs/operators';
-import * as i1$3 from 'ng-otp-input';
-import { NgOtpInputComponent, NgOtpInputModule } from 'ng-otp-input';
 import 'prismjs/components/prism-bash';
 
 /**
@@ -3043,27 +3043,6 @@ function createTitleProps(styleConfig, contentConfig) {
     };
 }
 
-class ActionHeaderComponent {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: ActionHeaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: ActionHeaderComponent, isStandalone: true, selector: "val-action-header", inputs: { props: "props" }, ngImport: i0, template: `
-    <section class="header-content-container">
-      <val-display [props]="props.title" />
-      <val-button [props]="props.action" />
-    </section>
-  `, isInline: true, styles: [".header-content-container{width:100%;display:flex;align-items:center;justify-content:space-between}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: DisplayComponent, selector: "val-display", inputs: ["props"] }, { kind: "component", type: ButtonComponent, selector: "val-button", inputs: ["props"], outputs: ["onClick"] }] }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: ActionHeaderComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'val-action-header', standalone: true, imports: [CommonModule, DisplayComponent, ButtonComponent], template: `
-    <section class="header-content-container">
-      <val-display [props]="props.title" />
-      <val-button [props]="props.action" />
-    </section>
-  `, styles: [".header-content-container{width:100%;display:flex;align-items:center;justify-content:space-between}\n"] }]
-        }], propDecorators: { props: [{
-                type: Input
-            }] } });
-
 /**
  * val-alert-box
  *
@@ -3613,150 +3592,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
             args: [{ selector: 'val-check-input', standalone: true, imports: [CommonModule, IonCheckbox], template: ` <ion-checkbox>I agree to the terms and conditions</ion-checkbox> ` }]
         }], ctorParameters: () => [] });
 
-class CodeDisplayComponent {
-    constructor(cdr) {
-        this.cdr = cdr;
-        this.toast = inject(ToastController);
-        this.langService = inject(LangService);
-        this.selectedTab = 0;
-    }
-    ngOnChanges(changes) {
-        if (changes['code'] || changes['language'] || changes['tabs']) {
-            this.cdr.detectChanges();
-            setTimeout(() => this.highlightCode());
-        }
-    }
-    ngAfterViewInit() {
-        setTimeout(() => this.highlightCode());
-    }
-    selectTab(i) {
-        this.selectedTab = i;
-        this.cdr.detectChanges();
-        setTimeout(() => this.highlightCode());
-    }
-    highlightCode() {
-        if (this.codeElement) {
-            const code = this.props.tabs.length > 0 ? this.props.tabs[this.selectedTab]?.code : this.props.code;
-            this.codeElement.nativeElement.textContent = code || '';
-            Prism.highlightElement(this.codeElement.nativeElement);
-        }
-    }
-    async copyToClipboard() {
-        try {
-            const code = this.props.tabs.length > 0 ? this.props.tabs[this.selectedTab]?.code : this.props.code;
-            await Clipboard.write({ string: code || '' });
-            const copiedMessage = this.langService.getText('_global', 'copied', '¡Copiado al portapapeles!');
-            this.presentToast(copiedMessage);
-        }
-        catch (error) {
-            console.error('Error al copiar al portapapeles:', error);
-        }
-    }
-    async presentToast(message) {
-        const toast = await this.toast.create({
-            message: message,
-            duration: 2000,
-            position: 'bottom',
-            color: 'dark',
-        });
-        toast.present();
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: CodeDisplayComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: CodeDisplayComponent, isStandalone: true, selector: "val-code-display", inputs: { props: "props" }, viewQueries: [{ propertyName: "codeElement", first: true, predicate: ["codeElement"], descendants: true }], usesOnChanges: true, ngImport: i0, template: `
-    <div class="code-viewer-container">
-      <div class="tab-bar">
-        <div
-          class="tab"
-          *ngFor="let tab of props.tabs; let i = index"
-          [class.active]="i === selectedTab"
-          (click)="selectTab(i)"
-        >
-          <span class="tab-label">{{ tab.label }}</span>
-        </div>
-      </div>
-      <div class="code-content">
-        <!-- <span class="language-badge">{{ props.tabs[selectedTab]?.language || props.language }}</span> -->
-        <ion-button fill="clear" class="copy-button" (click)="copyToClipboard()">
-          <ion-icon name="copy-outline"></ion-icon>
-        </ion-button>
-        <pre><code [class]="'language-' + (props.tabs[selectedTab]?.language || props.language)" #codeElement></code></pre>
-      </div>
-    </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)}.code-viewer-container{background-color:#fff;border-radius:24px;overflow:hidden;box-shadow:0 2px 4px #0000000d;border:1px solid #f2f6f7;position:relative;min-width:320px;max-width:100%}.tab-bar{display:flex;background:#f6f9fa;border-bottom:1px solid #f2f6f7;gap:2px;overflow-x:auto;overflow-y:hidden;scrollbar-width:thin;scrollbar-color:#e0e0e0 #f6f9fa;-webkit-overflow-scrolling:touch;max-width:100%;font-size:12px}.tab-bar::-webkit-scrollbar{height:6px;background:#f6f9fa}.tab-bar::-webkit-scrollbar-thumb{background:#e0e0e0;border-radius:4px}.tab{padding:10px 18px 8px;font-family:Roboto Mono,monospace;font-size:.95em;color:#899396;cursor:pointer;border-radius:8px 8px 0 0;background:transparent;transition:background .2s,color .2s;margin-bottom:-1px;border:1px solid transparent;border-bottom:none}.tab:hover{background:#e8eef2}.tab.active{background:#fff;color:#19422d;border:1px solid #f2f6f7;border-bottom:1px solid #ffffff;z-index:2}.tab-label{font-weight:500}.code-content{overflow-x:auto;overflow-y:auto;max-height:30rem;min-height:5rem;background:#fff;position:relative}.language-badge{position:absolute;top:15px;left:15px;background:#f6f9fa;color:#899396;font-family:Roboto Mono,monospace;font-size:.8em;font-weight:500;border-radius:6px;padding:2px 8px;z-index:3;pointer-events:none;text-transform:uppercase}.copy-button{position:absolute;top:10px;right:15px;z-index:10;--padding-start: 2px;--padding-end: 2px;--padding-top: 2px;--padding-bottom: 2px;min-width:28px;min-height:28px;height:28px;width:28px;color:var(--ion-color-primary);background:#ffffffb3;border-radius:6px;box-shadow:0 1px 4px #0000000d;display:flex;align-items:center;justify-content:center;transition:background .2s ease}.copy-button:hover{background:#ffffffe6}.copy-button ion-icon{font-size:1.2em;margin:0}pre{margin:0;padding:0;background-color:transparent;min-width:100%;min-height:100%;white-space:pre;word-break:normal;font-family:Roboto Mono,monospace}code{font-family:Roboto Mono,monospace;font-size:.9em;line-height:1.5;display:block;white-space:inherit;word-break:normal}@media (max-width: 600px){.code-viewer-container{border-radius:24px}.tab-bar{font-size:11px}.language-badge{font-size:.7em;padding:1px 6px;top:10px;left:10px}.copy-button{top:10px;right:10px}.code-content{max-height:20rem}code{font-size:.7em}}@media (min-width: 600px){code{font-size:.8em}}@media (prefers-color-scheme: dark){.code-viewer-container{background-color:#21252b;box-shadow:0 4px 15px #0009;border:1px solid #3b4048}.tab-bar{background:#1a1a1a;border-bottom:1px solid #3b4048;scrollbar-color:#3b4048 #1a1a1a}.tab-bar::-webkit-scrollbar{background:#1a1a1a}.tab-bar::-webkit-scrollbar-thumb{background:#3b4048}.tab{color:#8b949e}.tab:hover{background:#21252b}.tab.active{background:#282c34;color:#c9d1d9;border:1px solid #3b4048;border-bottom:1px solid #282c34}.code-content{background:#161b22}.language-badge{background:#3e4451;color:#8b949e}.copy-button{background:#0006}.copy-button:hover{background:#0009}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "component", type: IonIcon, selector: "ion-icon", inputs: ["color", "flipRtl", "icon", "ios", "lazy", "md", "mode", "name", "sanitize", "size", "src"] }, { 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"] }] }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: CodeDisplayComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'val-code-display', standalone: true, imports: [CommonModule, IonIcon, IonButton], template: `
-    <div class="code-viewer-container">
-      <div class="tab-bar">
-        <div
-          class="tab"
-          *ngFor="let tab of props.tabs; let i = index"
-          [class.active]="i === selectedTab"
-          (click)="selectTab(i)"
-        >
-          <span class="tab-label">{{ tab.label }}</span>
-        </div>
-      </div>
-      <div class="code-content">
-        <!-- <span class="language-badge">{{ props.tabs[selectedTab]?.language || props.language }}</span> -->
-        <ion-button fill="clear" class="copy-button" (click)="copyToClipboard()">
-          <ion-icon name="copy-outline"></ion-icon>
-        </ion-button>
-        <pre><code [class]="'language-' + (props.tabs[selectedTab]?.language || props.language)" #codeElement></code></pre>
-      </div>
-    </div>
-  `, 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)}.code-viewer-container{background-color:#fff;border-radius:24px;overflow:hidden;box-shadow:0 2px 4px #0000000d;border:1px solid #f2f6f7;position:relative;min-width:320px;max-width:100%}.tab-bar{display:flex;background:#f6f9fa;border-bottom:1px solid #f2f6f7;gap:2px;overflow-x:auto;overflow-y:hidden;scrollbar-width:thin;scrollbar-color:#e0e0e0 #f6f9fa;-webkit-overflow-scrolling:touch;max-width:100%;font-size:12px}.tab-bar::-webkit-scrollbar{height:6px;background:#f6f9fa}.tab-bar::-webkit-scrollbar-thumb{background:#e0e0e0;border-radius:4px}.tab{padding:10px 18px 8px;font-family:Roboto Mono,monospace;font-size:.95em;color:#899396;cursor:pointer;border-radius:8px 8px 0 0;background:transparent;transition:background .2s,color .2s;margin-bottom:-1px;border:1px solid transparent;border-bottom:none}.tab:hover{background:#e8eef2}.tab.active{background:#fff;color:#19422d;border:1px solid #f2f6f7;border-bottom:1px solid #ffffff;z-index:2}.tab-label{font-weight:500}.code-content{overflow-x:auto;overflow-y:auto;max-height:30rem;min-height:5rem;background:#fff;position:relative}.language-badge{position:absolute;top:15px;left:15px;background:#f6f9fa;color:#899396;font-family:Roboto Mono,monospace;font-size:.8em;font-weight:500;border-radius:6px;padding:2px 8px;z-index:3;pointer-events:none;text-transform:uppercase}.copy-button{position:absolute;top:10px;right:15px;z-index:10;--padding-start: 2px;--padding-end: 2px;--padding-top: 2px;--padding-bottom: 2px;min-width:28px;min-height:28px;height:28px;width:28px;color:var(--ion-color-primary);background:#ffffffb3;border-radius:6px;box-shadow:0 1px 4px #0000000d;display:flex;align-items:center;justify-content:center;transition:background .2s ease}.copy-button:hover{background:#ffffffe6}.copy-button ion-icon{font-size:1.2em;margin:0}pre{margin:0;padding:0;background-color:transparent;min-width:100%;min-height:100%;white-space:pre;word-break:normal;font-family:Roboto Mono,monospace}code{font-family:Roboto Mono,monospace;font-size:.9em;line-height:1.5;display:block;white-space:inherit;word-break:normal}@media (max-width: 600px){.code-viewer-container{border-radius:24px}.tab-bar{font-size:11px}.language-badge{font-size:.7em;padding:1px 6px;top:10px;left:10px}.copy-button{top:10px;right:10px}.code-content{max-height:20rem}code{font-size:.7em}}@media (min-width: 600px){code{font-size:.8em}}@media (prefers-color-scheme: dark){.code-viewer-container{background-color:#21252b;box-shadow:0 4px 15px #0009;border:1px solid #3b4048}.tab-bar{background:#1a1a1a;border-bottom:1px solid #3b4048;scrollbar-color:#3b4048 #1a1a1a}.tab-bar::-webkit-scrollbar{background:#1a1a1a}.tab-bar::-webkit-scrollbar-thumb{background:#3b4048}.tab{color:#8b949e}.tab:hover{background:#21252b}.tab.active{background:#282c34;color:#c9d1d9;border:1px solid #3b4048;border-bottom:1px solid #282c34}.code-content{background:#161b22}.language-badge{background:#3e4451;color:#8b949e}.copy-button{background:#0006}.copy-button:hover{background:#0009}}\n"] }]
-        }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }], propDecorators: { codeElement: [{
-                type: ViewChild,
-                args: ['codeElement']
-            }], props: [{
-                type: Input
-            }] } });
-
-class CommandDisplayComponent {
-    constructor() {
-        this.toast = inject(ToastController);
-        this.langService = inject(LangService);
-    }
-    async copyCommand() {
-        if (this.props.text) {
-            await Clipboard.write({
-                string: this.props.text,
-            });
-            const copiedMessage = this.langService.getText('_global', 'copied', '¡Copiado al portapapeles!');
-            this.presentToast(copiedMessage);
-        }
-    }
-    async presentToast(message) {
-        const toast = await this.toast.create({
-            message: message,
-            duration: 2000,
-            position: 'bottom',
-            color: 'dark',
-        });
-        toast.present();
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: CommandDisplayComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: CommandDisplayComponent, isStandalone: true, selector: "val-command-display", inputs: { props: "props" }, ngImport: i0, template: `
-    <div class="command-container">
-      <div class="command-text">$ {{ props.text }}</div>
-      <ion-icon name="copy-outline" class="copy-icon" (click)="copyCommand()"></ion-icon>
-    </div>
-  `, isInline: true, styles: [".command-container{display:flex;align-items:center;justify-content:space-between;background-color:var(--ion-color-light, #f2f2f2);border-radius:24px;padding:12px 16px;box-shadow:0 2px 4px #0000001a}.command-text{flex-grow:1;font-family:monospace;font-size:.8rem;color:var(--ion-color-dark, #333);margin-right:10px}.copy-icon{font-size:1.3rem;color:var(--ion-color-medium, #92949c);cursor:pointer;transition:color .2s ease-in-out}.copy-icon:hover{color:var(--ion-color-primary, #3880ff)}@media (min-width: 600px){.command-text,.copy-icon{font-size:1.2rem}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: IonIcon, selector: "ion-icon", inputs: ["color", "flipRtl", "icon", "ios", "lazy", "md", "mode", "name", "sanitize", "size", "src"] }] }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: CommandDisplayComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'val-command-display', standalone: true, imports: [CommonModule, IonIcon], template: `
-    <div class="command-container">
-      <div class="command-text">$ {{ props.text }}</div>
-      <ion-icon name="copy-outline" class="copy-icon" (click)="copyCommand()"></ion-icon>
-    </div>
-  `, styles: [".command-container{display:flex;align-items:center;justify-content:space-between;background-color:var(--ion-color-light, #f2f2f2);border-radius:24px;padding:12px 16px;box-shadow:0 2px 4px #0000001a}.command-text{flex-grow:1;font-family:monospace;font-size:.8rem;color:var(--ion-color-dark, #333);margin-right:10px}.copy-icon{font-size:1.3rem;color:var(--ion-color-medium, #92949c);cursor:pointer;transition:color .2s ease-in-out}.copy-icon:hover{color:var(--ion-color-primary, #3880ff)}@media (min-width: 600px){.command-text,.copy-icon{font-size:1.2rem}}\n"] }]
-        }], ctorParameters: () => [], propDecorators: { props: [{
-                type: Input
-            }] } });
-
 /**
  * val-comment-input
  *
@@ -4315,247 +4150,52 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
             }] } });
 
 /**
- * val-link
+ * val-popover-selector
  *
- * A stylized link button with navigation support for internal, in-app, or new tab links.
+ * A generic reusable popover selector component that can be used for any type of selection.
+ * Provides a button trigger that opens a popover with selectable options.
  *
  * @example
- * <val-link [props]="{ text: 'Go', color: 'primary', link: '/home', type: 'internal' }" (onClick)="handler($event)"></val-link>
+ * // Basic usage
+ * <val-popover-selector
+ *   [props]="selectorProps"
+ *   (selectionChange)="onSelectionChange($event)">
+ * </val-popover-selector>
  *
- * @input props: LinkMetadata - Configuration for the link (text, color, link, type, etc.)
- * @output onClick - Emits the token of the clicked link
+ * @example
+ * // With icon and custom styling
+ * const selectorProps: PopoverSelectorMetadata = {
+ *   options: [
+ *     { value: 'option1', label: 'Option 1', icon: 'star' },
+ *     { value: 'option2', label: 'Option 2', icon: 'heart' }
+ *   ],
+ *   selectedValue: 'option1',
+ *   label: 'Choose option',
+ *   icon: 'settings',
+ *   color: 'primary',
+ *   size: 'large',
+ *   fill: 'solid'
+ * };
+ *
+ * @input props: PopoverSelectorMetadata - Configuration for the selector
+ * @output selectionChange: EventEmitter<string | string[]> - Emitted when selection changes
  */
-class LinkComponent {
+class PopoverSelectorComponent {
     constructor() {
-        this.onClick = new EventEmitter();
-        this.service = inject(NavigationService);
-        addIcons({ chevronForwardOutline });
+        /**
+         * Event emitted when the selection changes.
+         * Emits the selected value(s).
+         */
+        this.selectionChange = new EventEmitter();
+        this.langService = inject(LangService);
+        // Register required icons
+        addIcons({ chevronDown });
     }
-    ngOnInit() { }
-    onClickHandler() {
-        this.onClick.emit(this.props.token);
-        switch (this.props.type) {
-            case 'internal':
-                this.service.navigateByUrl(this.props.link);
-                break;
-            case 'browse':
-                this.service.navigateInApp(this.props.link);
-                break;
-            case 'tab':
-                this.service.openInNewTab(this.props.link);
-                break;
-        }
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: LinkComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: LinkComponent, isStandalone: true, selector: "val-link", inputs: { props: "props" }, outputs: { onClick: "onClick" }, ngImport: i0, template: `
-    <div>
-      <ion-button type="button" [color]="props.color" fill="clear" [size]="props.size" (click)="onClickHandler()">
-        <ion-icon slot="end" name="chevron-forward-outline"></ion-icon>
-        <ion-text>{{ props.text }}</ion-text>
-      </ion-button>
-    </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)}ion-button{font-family:var(--ion-default-font),Arial,sans-serif;margin:0;--padding-bottom: 0;--padding-top: 0;--padding-start: 0;--padding-end: 0}\n"], dependencies: [{ 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: IonIcon, selector: "ion-icon", inputs: ["color", "flipRtl", "icon", "ios", "lazy", "md", "mode", "name", "sanitize", "size", "src"] }, { kind: "component", type: IonText, selector: "ion-text", inputs: ["color", "mode"] }] }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: LinkComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'val-link', standalone: true, imports: [IonButton, IonIcon, IonText], template: `
-    <div>
-      <ion-button type="button" [color]="props.color" fill="clear" [size]="props.size" (click)="onClickHandler()">
-        <ion-icon slot="end" name="chevron-forward-outline"></ion-icon>
-        <ion-text>{{ props.text }}</ion-text>
-      </ion-button>
-    </div>
-  `, 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)}ion-button{font-family:var(--ion-default-font),Arial,sans-serif;margin:0;--padding-bottom: 0;--padding-top: 0;--padding-start: 0;--padding-end: 0}\n"] }]
-        }], ctorParameters: () => [], propDecorators: { props: [{
-                type: Input
-            }], onClick: [{
-                type: Output
-            }] } });
-
-/**
- * val-title-block
- *
- * Displays a block of titles (above, main, below) with configurable styles and positions.
- *
- * @example
- * <val-title-block [props]="{ title: {...}, aboveTitle: {...}, bellowTitle: {...}, position: 'center' }"></val-title-block>
- *
- * @input props: TitleBlockMetada - Configuration for the title block (title, aboveTitle, bellowTitle, position)
- */
-class TitleBlockComponent {
-    constructor(cdr) {
-        this.cdr = cdr;
-    }
-    ngOnInit() { }
-    ngOnChanges(changes) {
-        if (changes['props']) {
-            // Forzar detección de cambios múltiple
-            this.cdr.detectChanges();
-            setTimeout(() => {
-                this.cdr.detectChanges();
-            }, 0);
-        }
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: TitleBlockComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: TitleBlockComponent, isStandalone: true, selector: "val-title-block", inputs: { props: "props" }, usesOnChanges: true, ngImport: i0, template: `
-    <div [ngClass]="['titles-container', props.position]">
-      <val-title
-        *ngIf="props.aboveTitle"
-        [props]="{
-          content: props.aboveTitle.content | uppercase,
-          color: props.aboveTitle.color,
-          bold: false,
-          size: props.aboveTitle.size,
-        }"
-      ></val-title>
-      <val-display
-        *ngIf="props.title"
-        [props]="{
-          content: props.title.content,
-          color: props.title.color,
-          size: props.title.size,
-        }"
-      ></val-display>
-      <val-title
-        style="margin-top: 16px;"
-        *ngIf="props.bellowTitle"
-        [props]="{
-          content: props.bellowTitle.content,
-          color: props.bellowTitle.color,
-          bold: false,
-          size: props.bellowTitle.size,
-          thin: props.bellowTitle.thin,
-        }"
-      ></val-title>
-    </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)}val-button,val-title,val-display{display:inline-block}.titles-container{width:100%;display:flex;flex-direction:column;flex-wrap:wrap}.titles-container.left{align-content:flex-start;align-items:start;text-align:left}.titles-container.center{align-content:center;align-items:center;text-align:center}.titles-container.right{align-content:flex-end;align-items:end;text-align:end}.titles-container.leftocenter{align-content:flex-start;align-items:start;text-align:left}@media (min-width: 768px){.titles-container.leftocenter{align-content:center;align-items:center;text-align:center}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: i1.UpperCasePipe, name: "uppercase" }, { kind: "component", type: TitleComponent, selector: "val-title", inputs: ["props"] }, { kind: "component", type: DisplayComponent, selector: "val-display", inputs: ["props"] }] }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: TitleBlockComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'val-title-block', standalone: true, imports: [CommonModule, TitleComponent, DisplayComponent], template: `
-    <div [ngClass]="['titles-container', props.position]">
-      <val-title
-        *ngIf="props.aboveTitle"
-        [props]="{
-          content: props.aboveTitle.content | uppercase,
-          color: props.aboveTitle.color,
-          bold: false,
-          size: props.aboveTitle.size,
-        }"
-      ></val-title>
-      <val-display
-        *ngIf="props.title"
-        [props]="{
-          content: props.title.content,
-          color: props.title.color,
-          size: props.title.size,
-        }"
-      ></val-display>
-      <val-title
-        style="margin-top: 16px;"
-        *ngIf="props.bellowTitle"
-        [props]="{
-          content: props.bellowTitle.content,
-          color: props.bellowTitle.color,
-          bold: false,
-          size: props.bellowTitle.size,
-          thin: props.bellowTitle.thin,
-        }"
-      ></val-title>
-    </div>
-  `, 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)}val-button,val-title,val-display{display:inline-block}.titles-container{width:100%;display:flex;flex-direction:column;flex-wrap:wrap}.titles-container.left{align-content:flex-start;align-items:start;text-align:left}.titles-container.center{align-content:center;align-items:center;text-align:center}.titles-container.right{align-content:flex-end;align-items:end;text-align:end}.titles-container.leftocenter{align-content:flex-start;align-items:start;text-align:left}@media (min-width: 768px){.titles-container.leftocenter{align-content:center;align-items:center;text-align:center}}\n"] }]
-        }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }], propDecorators: { props: [{
-                type: Input
-            }] } });
-
-// src/app/layout/layout.component.ts (solo la parte de styles)
-class InfoComponent {
-    constructor() {
-        this.icon = inject(IconService);
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: InfoComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.12", type: InfoComponent, isStandalone: true, selector: "val-info", inputs: { props: "props" }, ngImport: i0, template: `
-    @if (props.image) {
-      <val-image style="display: contents;" [props]="props.image" />
-    }
-    <val-title-block style="display: block;margin-top: 16px;" [props]="props.title" />
-
-    @if (props.link) {
-      <val-link [props]="props.link" />
-    }
-
-    @if (props.actions) {
-      <val-button-group [props]="props.actions" />
-    }
-  `, isInline: true, styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: LinkComponent, selector: "val-link", inputs: ["props"], outputs: ["onClick"] }, { kind: "component", type: TitleBlockComponent, selector: "val-title-block", inputs: ["props"] }, { kind: "component", type: ImageComponent, selector: "val-image", inputs: ["props"] }, { kind: "component", type: ButtonGroupComponent, selector: "val-button-group", inputs: ["props"], outputs: ["onClick"] }] }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: InfoComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'val-info', standalone: true, imports: [CommonModule, LinkComponent, TitleBlockComponent, ImageComponent, ButtonGroupComponent], template: `
-    @if (props.image) {
-      <val-image style="display: contents;" [props]="props.image" />
-    }
-    <val-title-block style="display: block;margin-top: 16px;" [props]="props.title" />
-
-    @if (props.link) {
-      <val-link [props]="props.link" />
-    }
-
-    @if (props.actions) {
-      <val-button-group [props]="props.actions" />
-    }
-  ` }]
-        }], propDecorators: { props: [{
-                type: Input
-            }] } });
-
-/**
- * val-popover-selector
- *
- * A generic reusable popover selector component that can be used for any type of selection.
- * Provides a button trigger that opens a popover with selectable options.
- *
- * @example
- * // Basic usage
- * <val-popover-selector
- *   [props]="selectorProps"
- *   (selectionChange)="onSelectionChange($event)">
- * </val-popover-selector>
- *
- * @example
- * // With icon and custom styling
- * const selectorProps: PopoverSelectorMetadata = {
- *   options: [
- *     { value: 'option1', label: 'Option 1', icon: 'star' },
- *     { value: 'option2', label: 'Option 2', icon: 'heart' }
- *   ],
- *   selectedValue: 'option1',
- *   label: 'Choose option',
- *   icon: 'settings',
- *   color: 'primary',
- *   size: 'large',
- *   fill: 'solid'
- * };
- *
- * @input props: PopoverSelectorMetadata - Configuration for the selector
- * @output selectionChange: EventEmitter<string | string[]> - Emitted when selection changes
- */
-class PopoverSelectorComponent {
-    constructor() {
-        /**
-         * Event emitted when the selection changes.
-         * Emits the selected value(s).
-         */
-        this.selectionChange = new EventEmitter();
-        this.langService = inject(LangService);
-        // Register required icons
-        addIcons({ chevronDown });
-    }
-    /**
-     * Get reactive placeholder text.
-     */
-    getPlaceholderText() {
-        return this.props.placeholder || this.langService.getText('_global', 'select', 'Seleccionar...');
+    /**
+     * Get reactive placeholder text.
+     */
+    getPlaceholderText() {
+        return this.props.placeholder || this.langService.getText('_global', 'select', 'Seleccionar...');
     }
     /**
      * Get reactive cancel text.
@@ -5039,52 +4679,148 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
                 }]
         }], ctorParameters: () => [] });
 
-class LayeredCardComponent {
-    constructor() {
-        this.theme = inject(ThemeService);
+/**
+ * val-title-block
+ *
+ * Displays a block of titles (above, main, below) with configurable styles and positions.
+ *
+ * @example
+ * <val-title-block [props]="{ title: {...}, aboveTitle: {...}, bellowTitle: {...}, position: 'center' }"></val-title-block>
+ *
+ * @input props: TitleBlockMetada - Configuration for the title block (title, aboveTitle, bellowTitle, position)
+ */
+class TitleBlockComponent {
+    constructor(cdr) {
+        this.cdr = cdr;
     }
-    color(background) {
-        if (!background) {
-            return '';
+    ngOnInit() { }
+    ngOnChanges(changes) {
+        if (changes['props']) {
+            // Forzar detección de cambios múltiple
+            this.cdr.detectChanges();
+            setTimeout(() => {
+                this.cdr.detectChanges();
+            }, 0);
         }
-        return resolveColor(background);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: LayeredCardComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.12", type: LayeredCardComponent, isStandalone: true, selector: "layered-card", inputs: { props: "props" }, ngImport: i0, template: `
-    <div
-      class="fun-card"
-      [class.big-space]="props.bigSpace"
-      [class.hoverable]="props.hoverable"
-      [class.layered]="props.mode === 'layered'"
-      [class.poster]="props.mode === 'poster'"
-      [ngStyle]="{
-        background: theme.IsDark ? 'var(--ion-background-color)' : color(props.background),
-        minHeight: props.withMin ? '340px' : 'auto',
-      }"
-    >
-      @if (props.mode === 'poster') {
-        <img
-          class="poster-image"
-          [class.dark]="props.dark"
-          [class.with-opacity]="props.withOpacity"
-          alt="image"
-          [src]="props.image"
-        />
-      }
-      @if (props.mode === 'layered') {
-        <img
-          class="layer-image"
-          [class.dark]="props.dark"
-          [class.with-opacity]="props.withOpacity"
-          alt="image"
-          [src]="props.image"
-        />
-      }
-
-      <section>
-        <val-title-block [props]="props.content" />
-        @if (props.actions) {
-          <val-button-group style="display:block; margin-top: 16px;" [props]="props.actions" />
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: TitleBlockComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: TitleBlockComponent, isStandalone: true, selector: "val-title-block", inputs: { props: "props" }, usesOnChanges: true, ngImport: i0, template: `
+    <div [ngClass]="['titles-container', props.position]">
+      <val-title
+        *ngIf="props.aboveTitle"
+        [props]="{
+          content: props.aboveTitle.content | uppercase,
+          color: props.aboveTitle.color,
+          bold: false,
+          size: props.aboveTitle.size,
+        }"
+      ></val-title>
+      <val-display
+        *ngIf="props.title"
+        [props]="{
+          content: props.title.content,
+          color: props.title.color,
+          size: props.title.size,
+        }"
+      ></val-display>
+      <val-title
+        style="margin-top: 16px;"
+        *ngIf="props.bellowTitle"
+        [props]="{
+          content: props.bellowTitle.content,
+          color: props.bellowTitle.color,
+          bold: false,
+          size: props.bellowTitle.size,
+          thin: props.bellowTitle.thin,
+        }"
+      ></val-title>
+    </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)}val-button,val-title,val-display{display:inline-block}.titles-container{width:100%;display:flex;flex-direction:column;flex-wrap:wrap}.titles-container.left{align-content:flex-start;align-items:start;text-align:left}.titles-container.center{align-content:center;align-items:center;text-align:center}.titles-container.right{align-content:flex-end;align-items:end;text-align:end}.titles-container.leftocenter{align-content:flex-start;align-items:start;text-align:left}@media (min-width: 768px){.titles-container.leftocenter{align-content:center;align-items:center;text-align:center}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: i1.UpperCasePipe, name: "uppercase" }, { kind: "component", type: TitleComponent, selector: "val-title", inputs: ["props"] }, { kind: "component", type: DisplayComponent, selector: "val-display", inputs: ["props"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: TitleBlockComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'val-title-block', standalone: true, imports: [CommonModule, TitleComponent, DisplayComponent], template: `
+    <div [ngClass]="['titles-container', props.position]">
+      <val-title
+        *ngIf="props.aboveTitle"
+        [props]="{
+          content: props.aboveTitle.content | uppercase,
+          color: props.aboveTitle.color,
+          bold: false,
+          size: props.aboveTitle.size,
+        }"
+      ></val-title>
+      <val-display
+        *ngIf="props.title"
+        [props]="{
+          content: props.title.content,
+          color: props.title.color,
+          size: props.title.size,
+        }"
+      ></val-display>
+      <val-title
+        style="margin-top: 16px;"
+        *ngIf="props.bellowTitle"
+        [props]="{
+          content: props.bellowTitle.content,
+          color: props.bellowTitle.color,
+          bold: false,
+          size: props.bellowTitle.size,
+          thin: props.bellowTitle.thin,
+        }"
+      ></val-title>
+    </div>
+  `, 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)}val-button,val-title,val-display{display:inline-block}.titles-container{width:100%;display:flex;flex-direction:column;flex-wrap:wrap}.titles-container.left{align-content:flex-start;align-items:start;text-align:left}.titles-container.center{align-content:center;align-items:center;text-align:center}.titles-container.right{align-content:flex-end;align-items:end;text-align:end}.titles-container.leftocenter{align-content:flex-start;align-items:start;text-align:left}@media (min-width: 768px){.titles-container.leftocenter{align-content:center;align-items:center;text-align:center}}\n"] }]
+        }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }], propDecorators: { props: [{
+                type: Input
+            }] } });
+
+class LayeredCardComponent {
+    constructor() {
+        this.theme = inject(ThemeService);
+    }
+    color(background) {
+        if (!background) {
+            return '';
+        }
+        return resolveColor(background);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: LayeredCardComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.12", type: LayeredCardComponent, isStandalone: true, selector: "layered-card", inputs: { props: "props" }, ngImport: i0, template: `
+    <div
+      class="fun-card"
+      [class.big-space]="props.bigSpace"
+      [class.hoverable]="props.hoverable"
+      [class.layered]="props.mode === 'layered'"
+      [class.poster]="props.mode === 'poster'"
+      [ngStyle]="{
+        background: theme.IsDark ? 'var(--ion-background-color)' : color(props.background),
+        minHeight: props.withMin ? '340px' : 'auto',
+      }"
+    >
+      @if (props.mode === 'poster') {
+        <img
+          class="poster-image"
+          [class.dark]="props.dark"
+          [class.with-opacity]="props.withOpacity"
+          alt="image"
+          [src]="props.image"
+        />
+      }
+      @if (props.mode === 'layered') {
+        <img
+          class="layer-image"
+          [class.dark]="props.dark"
+          [class.with-opacity]="props.withOpacity"
+          alt="image"
+          [src]="props.image"
+        />
+      }
+
+      <section>
+        <val-title-block [props]="props.content" />
+        @if (props.actions) {
+          <val-button-group style="display:block; margin-top: 16px;" [props]="props.actions" />
         }
       </section>
     </div>
@@ -5135,6 +4871,64 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
                 type: Input
             }] } });
 
+/**
+ * val-link
+ *
+ * A stylized link button with navigation support for internal, in-app, or new tab links.
+ *
+ * @example
+ * <val-link [props]="{ text: 'Go', color: 'primary', link: '/home', type: 'internal' }" (onClick)="handler($event)"></val-link>
+ *
+ * @input props: LinkMetadata - Configuration for the link (text, color, link, type, etc.)
+ * @output onClick - Emits the token of the clicked link
+ */
+class LinkComponent {
+    constructor() {
+        this.onClick = new EventEmitter();
+        this.service = inject(NavigationService);
+        addIcons({ chevronForwardOutline });
+    }
+    ngOnInit() { }
+    onClickHandler() {
+        this.onClick.emit(this.props.token);
+        switch (this.props.type) {
+            case 'internal':
+                this.service.navigateByUrl(this.props.link);
+                break;
+            case 'browse':
+                this.service.navigateInApp(this.props.link);
+                break;
+            case 'tab':
+                this.service.openInNewTab(this.props.link);
+                break;
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: LinkComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: LinkComponent, isStandalone: true, selector: "val-link", inputs: { props: "props" }, outputs: { onClick: "onClick" }, ngImport: i0, template: `
+    <div>
+      <ion-button type="button" [color]="props.color" fill="clear" [size]="props.size" (click)="onClickHandler()">
+        <ion-icon slot="end" name="chevron-forward-outline"></ion-icon>
+        <ion-text>{{ props.text }}</ion-text>
+      </ion-button>
+    </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)}ion-button{font-family:var(--ion-default-font),Arial,sans-serif;margin:0;--padding-bottom: 0;--padding-top: 0;--padding-start: 0;--padding-end: 0}\n"], dependencies: [{ 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: IonIcon, selector: "ion-icon", inputs: ["color", "flipRtl", "icon", "ios", "lazy", "md", "mode", "name", "sanitize", "size", "src"] }, { kind: "component", type: IonText, selector: "ion-text", inputs: ["color", "mode"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: LinkComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'val-link', standalone: true, imports: [IonButton, IonIcon, IonText], template: `
+    <div>
+      <ion-button type="button" [color]="props.color" fill="clear" [size]="props.size" (click)="onClickHandler()">
+        <ion-icon slot="end" name="chevron-forward-outline"></ion-icon>
+        <ion-text>{{ props.text }}</ion-text>
+      </ion-button>
+    </div>
+  `, 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)}ion-button{font-family:var(--ion-default-font),Arial,sans-serif;margin:0;--padding-bottom: 0;--padding-top: 0;--padding-start: 0;--padding-end: 0}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { props: [{
+                type: Input
+            }], onClick: [{
+                type: Output
+            }] } });
+
 /**
  * val-links-cake
  *
@@ -5181,1935 +4975,1414 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
             }] } });
 
 /**
- * Removes diacritical marks (accents) from a string using Unicode normalization.
- * Useful for text search and comparison.
+ * val-notes-box
  *
- * @param text The input string
- * @returns The normalized string without diacritical marks
+ * Displays a styled notes/info box with optional prefix and configurable color, size, and padding.
  *
  * @example
- * replaceSpecialChars('canción') // returns 'cancion'
+ * <val-notes-box [props]="{ text: 'Note', prefix: 'Info', color: 'primary', textColor: 'dark', size: 'medium', rounded: true, padding: '8px' }"></val-notes-box>
+ *
+ * @input props: NotesBoxMetadata - Configuration for the notes box (text, prefix, color, textColor, size, rounded, padding)
  */
-const replaceSpecialChars = (text) => text.normalize('NFD').replace(/[\u0300-\u036f]/g, '');
+class NotesBoxComponent {
+    constructor() { }
+    ngOnInit() { }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: NotesBoxComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.12", type: NotesBoxComponent, isStandalone: true, selector: "val-notes-box", inputs: { props: "props" }, ngImport: i0, template: `
+    <val-box
+      [props]="{
+        icon: '',
+        bordered: false,
+        color: props.color,
+        leftBorder: true,
+        rounded: props.rounded,
+        padding: props.padding,
+      }"
+    >
+      <div [ngClass]="['content-container', props.size]" body>
+        @if (props.prefix) {
+          <val-text
+            [props]="{ content: props.prefix, color: props.textColor, bold: true, size: props.size }"
+          ></val-text>
+        }
+        <val-text [props]="{ content: props.text, color: props.textColor, bold: false, size: props.size }"></val-text>
+      </div>
+    </val-box>
+  `, 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)}.content-container{display:inline-grid}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: BoxComponent, selector: "val-box", inputs: ["props"], outputs: ["onClick"] }, { kind: "component", type: TextComponent, selector: "val-text", inputs: ["props"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: NotesBoxComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'val-notes-box', standalone: true, imports: [CommonModule, BoxComponent, TextComponent], template: `
+    <val-box
+      [props]="{
+        icon: '',
+        bordered: false,
+        color: props.color,
+        leftBorder: true,
+        rounded: props.rounded,
+        padding: props.padding,
+      }"
+    >
+      <div [ngClass]="['content-container', props.size]" body>
+        @if (props.prefix) {
+          <val-text
+            [props]="{ content: props.prefix, color: props.textColor, bold: true, size: props.size }"
+          ></val-text>
+        }
+        <val-text [props]="{ content: props.text, color: props.textColor, bold: false, size: props.size }"></val-text>
+      </div>
+    </val-box>
+  `, 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)}.content-container{display:inline-grid}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { props: [{
+                type: Input
+            }] } });
 
 /**
- * val-searchbar
+ * val-number-input
  *
- * A search bar component with debounce and event emitters for filtering, focus, and blur.
+ * A number input field integrated with Angular forms.
  *
  * @example
- * <val-searchbar (filterEvent)="onFilter($event)" (focusEvent)="onFocus()" (blurEvent)="onBlur()"></val-searchbar>
+ * <val-number-input [props]="{ control: myControl, placeholder: 'Enter a number' }"></val-number-input>
  *
- * @input disabled - Whether the searchbar is disabled.
- * @output filterEvent - Emits the search term on input.
- * @output focusEvent - Emits when the searchbar gains focus.
- * @output blurEvent - Emits when the searchbar loses focus.
+ * @input props: InputMetadata - Configuration for the input (form control, placeholder, etc.)
  */
-class SearchbarComponent {
-    constructor() {
-        /**
-         * Emits the search term on input.
-         */
-        this.filterEvent = new EventEmitter();
-        /**
-         * Emits when the searchbar gains focus.
-         */
-        this.focusEvent = new EventEmitter();
-        /**
-         * Emits when the searchbar loses focus.
-         */
-        this.blurEvent = new EventEmitter();
-    }
-    onSearch($event) {
-        const searchTerm = $event.detail.value;
-        this.filterEvent.emit(searchTerm);
-    }
-    onFocus() {
-        this.focusEvent.emit();
-    }
-    onBlur() {
-        this.blurEvent.emit();
+class NumberInputComponent {
+    constructor() { }
+    ngOnInit() {
+        // Apply default values on initialization
+        if (this.props?.withDefault || this.props?.value) {
+            applyDefaultValueToControl(this.props);
+        }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: SearchbarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: SearchbarComponent, isStandalone: true, selector: "val-searchbar", inputs: { disabled: "disabled" }, outputs: { filterEvent: "filterEvent", focusEvent: "focusEvent", blurEvent: "blurEvent" }, ngImport: i0, template: `
-    <ion-searchbar
-      mode="ios"
-      debounce="500"
-      placeholder="Búsqueda"
-      [disabled]="disabled"
-      showCancelButton="focus"
-      cancelButtonText="Cancelar"
-      (ionInput)="onSearch($event)"
-      (ionBlur)="onBlur()"
-      (ionFocus)="onFocus()"
-    >
-    </ion-searchbar>
-  `, 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)}ion-searchbar{--cancel-button-color: var(--ion-color-dark);--background: var(--ion-color-light);font-family:var(--ion-default-font),Arial,sans-serif}\n"], dependencies: [{ kind: "component", type: IonSearchbar, selector: "ion-searchbar", inputs: ["animated", "autocomplete", "autocorrect", "cancelButtonIcon", "cancelButtonText", "clearIcon", "color", "debounce", "disabled", "enterkeyhint", "inputmode", "mode", "name", "placeholder", "searchIcon", "showCancelButton", "showClearButton", "spellcheck", "type", "value"] }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: NumberInputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: NumberInputComponent, isStandalone: true, selector: "val-number-input", inputs: { props: "props" }, ngImport: i0, template: ` <ion-input [formControl]="props.control" type="number" [placeholder]="props.placeholder"></ion-input> `, isInline: true, styles: [""], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { 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"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: SearchbarComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: NumberInputComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'val-searchbar', standalone: true, imports: [IonSearchbar], template: `
-    <ion-searchbar
-      mode="ios"
-      debounce="500"
-      placeholder="Búsqueda"
-      [disabled]="disabled"
-      showCancelButton="focus"
-      cancelButtonText="Cancelar"
-      (ionInput)="onSearch($event)"
-      (ionBlur)="onBlur()"
-      (ionFocus)="onFocus()"
-    >
-    </ion-searchbar>
-  `, 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)}ion-searchbar{--cancel-button-color: var(--ion-color-dark);--background: var(--ion-color-light);font-family:var(--ion-default-font),Arial,sans-serif}\n"] }]
-        }], ctorParameters: () => [], propDecorators: { disabled: [{
+            args: [{ selector: 'val-number-input', standalone: true, imports: [ReactiveFormsModule, IonInput], template: ` <ion-input [formControl]="props.control" type="number" [placeholder]="props.placeholder"></ion-input> ` }]
+        }], ctorParameters: () => [], propDecorators: { props: [{
                 type: Input
-            }], filterEvent: [{
-                type: Output
-            }], focusEvent: [{
-                type: Output
-            }], blurEvent: [{
-                type: Output
             }] } });
 
-class MultiSelectSearchComponent {
-    constructor() {
-        this.labelProperty = 'name';
-        this.valueProperty = 'id';
-        this.langService = inject(LangService);
-        this.icon = inject(IconService);
-        this.changeDetector = inject(ChangeDetectorRef);
-        this.searchTerm = '';
-        this.filteredItems = [];
-        this.selectedItems = [];
-        this.tempSelectedItems = [];
-        this.displayValue = '';
-        this.previousOptions = [];
-        this.isProcessingChanges = false;
-        this.label = this.langService.getText('_global', 'selectMultiple', 'Seleccionar múltiples');
-        this.placeholder = this.langService.getText('_global', 'selectOptions', 'Seleccione opciones');
-    }
+class NumberFromToComponent {
+    constructor() { }
     ngOnInit() {
-        this.applyDefaultValue();
-        this.initializeItems();
-        this.syncControlValueWithSelectedItems();
-        this.updateDisplayValue();
-        this.subscribeToValueChanges();
-    }
-    ngOnDestroy() {
-        if (this.valueChangesSubscription) {
-            this.valueChangesSubscription.unsubscribe();
-        }
-    }
-    ngOnChanges(changes) {
-        if (this.isProcessingChanges) {
-            return;
-        }
-        if (changes['props']) {
-            try {
-                this.isProcessingChanges = true;
-                if (this.valueChangesSubscription) {
-                    this.valueChangesSubscription.unsubscribe();
-                }
-                if (this.props?.options) {
-                    const optionsChanged = !this.areOptionsEqual(this.previousOptions, this.props.options);
-                    if (optionsChanged) {
-                        this.previousOptions = [...this.props.options];
-                        this.initializeItems();
-                    }
-                }
-                this.syncControlValueWithSelectedItems();
-                this.updateDisplayValue();
-                this.subscribeToValueChanges();
-            }
-            finally {
-                this.isProcessingChanges = false;
-            }
-        }
-    }
-    ionViewWillEnter() {
-        if (this.isProcessingChanges) {
-            return;
-        }
-        try {
-            this.isProcessingChanges = true;
-            this.initializeItems();
-            this.syncControlValueWithSelectedItems();
-            this.updateDisplayValue();
-            this.subscribeToValueChanges();
-        }
-        finally {
-            this.isProcessingChanges = false;
+        // Apply default values if configured
+        if (this.props?.withDefault || this.props?.value) {
+            this.applyDefaultValues();
         }
     }
-    subscribeToValueChanges() {
-        if (!this.props?.control)
-            return;
-        this.valueChangesSubscription = this.props.control.valueChanges.subscribe(() => {
-            if (this.isProcessingChanges)
-                return;
-            try {
-                this.isProcessingChanges = true;
-                this.syncControlValueWithSelectedItems();
-                this.updateDisplayValue();
-            }
-            finally {
-                this.isProcessingChanges = false;
+    applyDefaultValues() {
+        const defaultValue = this.resolveDefaultValue();
+        if (defaultValue !== null) {
+            if (typeof defaultValue === 'object' && defaultValue.from !== undefined) {
+                this.fromControl?.setValue(defaultValue.from);
+                this.toControl?.setValue(defaultValue.to);
             }
-        });
-    }
-    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;
+            else {
+                // Si es un valor simple, aplicarlo a ambos controles
+                this.fromControl?.setValue(defaultValue);
+                this.toControl?.setValue(defaultValue);
             }
+            this.fromControl?.markAsPristine();
+            this.toControl?.markAsPristine();
+            this.fromControl?.updateValueAndValidity();
+            this.toControl?.updateValueAndValidity();
         }
-        return true;
-    }
-    initializeItems() {
-        this.filteredItems = this.props?.options || [];
     }
-    syncControlValueWithSelectedItems() {
-        if (!this.props?.control) {
-            this.selectedItems = [];
-            return;
-        }
-        const controlValue = this.props.control.value;
-        if (!controlValue || controlValue === '') {
-            this.selectedItems = [];
-            return;
-        }
-        // Handle both array and string formats
-        let valueArray = [];
-        if (Array.isArray(controlValue)) {
-            valueArray = controlValue;
-        }
-        else if (typeof controlValue === 'string') {
-            valueArray = controlValue.split(',').filter(v => v.trim() !== '');
+    resolveDefaultValue() {
+        // Explicit value takes precedence
+        if (this.props.value !== undefined && this.props.value !== null && this.props.value !== '') {
+            return this.parseValue(this.props.value);
         }
-        if (this.props.options && this.props.options.length > 0) {
-            const map = new Map(this.props.options.map(opt => [opt[this.valueProperty], opt]));
-            this.selectedItems = valueArray
-                .map(value => map.get(value.toString().trim()))
-                .filter(item => item !== undefined);
+        // No default configuration
+        if (!this.props.withDefault) {
+            return null;
         }
-        else {
-            this.selectedItems = [];
+        // Custom default value
+        if (typeof this.props.withDefault === 'string') {
+            return this.parseValue(this.props.withDefault);
         }
+        // Auto default value (withDefault === true)
+        return { from: 0, to: 0 };
     }
-    applyDefaultValue() {
-        applyDefaultValueToControl(this.props);
-    }
-    onFilter(event) {
-        if (!event || event.trim() === '') {
-            this.filteredItems = this.props?.options ? [...this.props.options] : [];
-            this.changeDetector.detectChanges();
-            return;
+    parseValue(value) {
+        try {
+            // Try to parse as JSON first (for object values)
+            return JSON.parse(value);
         }
-        if (!this.props?.options || this.props.options.length === 0) {
-            this.filteredItems = [];
-            this.changeDetector.detectChanges();
-            return;
+        catch {
+            // If not JSON, treat as number
+            const numValue = parseFloat(value) || 0;
+            return { from: numValue, to: numValue };
         }
-        const search = replaceSpecialChars(event.toLowerCase());
-        this.filteredItems = this.props.options.filter(element => {
-            const label = element[this.labelProperty]
-                ? replaceSpecialChars(String(element[this.labelProperty]).toLowerCase())
-                : '';
-            const value = element[this.valueProperty]
-                ? replaceSpecialChars(String(element[this.valueProperty]).toLowerCase())
-                : '';
-            return label.includes(search) || value.includes(search);
-        });
-        this.changeDetector.detectChanges();
-    }
-    onFocus() {
-        console.log('onFocus');
-    }
-    onBlur() {
-        console.log('onBlur');
     }
-    openModal() {
-        this.syncControlValueWithSelectedItems();
-        this.tempSelectedItems = [...this.selectedItems];
-        this.updateDisplayValue();
-        if (this.modal) {
-            this.modal.present();
-        }
+    get fromControl() {
+        return this.props.fromControl;
     }
-    preventDefaultBehavior(event) {
-        event.preventDefault();
-        event.stopPropagation();
-        this.openModal();
+    get toControl() {
+        return this.props.toControl;
     }
-    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();
-        }
-    }
-    selectItem(item) {
-        const index = this.tempSelectedItems.findIndex(selectedItem => selectedItem[this.valueProperty] === item[this.valueProperty]);
-        if (index === -1) {
-            this.tempSelectedItems.push(item);
-        }
-        else {
-            this.tempSelectedItems.splice(index, 1);
-        }
-    }
-    isItemSelected(item) {
-        return this.tempSelectedItems.some(selectedItem => selectedItem[this.valueProperty] === item[this.valueProperty]);
-    }
-    clearSelection() {
-        this.tempSelectedItems = [];
-    }
-    applySelection() {
-        this.selectedItems = [...this.tempSelectedItems];
-        this.updateDisplayValue();
-        this.applyChanges();
-        this.cancelModal();
-    }
-    updateDisplayValue() {
-        if (this.selectedItems.length === 0) {
-            this.displayValue = '';
-            return;
-        }
-        if (this.selectedItems.length === 1) {
-            this.displayValue = this.selectedItems[0][this.labelProperty];
-        }
-        else {
-            this.displayValue = `${this.selectedItems.length} elementos seleccionados`;
-        }
-    }
-    applyChanges() {
-        if (!this.props?.control) {
-            return;
-        }
-        try {
-            this.isProcessingChanges = true;
-            const values = this.selectedItems.map(item => item[this.valueProperty]);
-            const stringValue = values.join(',');
-            this.props.control.setValue(stringValue);
-            this.props.control.markAsDirty();
-            this.props.control.markAsTouched();
-            this.props.control.updateValueAndValidity();
-            // Debug validators if still having issues
-            if (this.props.control.invalid) {
-                console.warn('Control is invalid after setValue:', {
-                    value: this.props.control.value,
-                    errors: this.props.control.errors,
-                    validators: this.props.control.validator
-                });
-            }
-        }
-        finally {
-            this.isProcessingChanges = false;
-        }
-    }
-    reset() {
-        this.selectedItems = [];
-        this.displayValue = '';
-        if (this.props?.control) {
-            this.props.control.setValue('');
-        }
-        this.changeDetector.detectChanges();
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: MultiSelectSearchComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: MultiSelectSearchComponent, isStandalone: true, selector: "val-multi-select-search", inputs: { label: "label", labelProperty: "labelProperty", valueProperty: "valueProperty", placeholder: "placeholder", props: "props" }, viewQueries: [{ propertyName: "modal", first: true, predicate: ["modal"], descendants: true }], usesOnChanges: true, ngImport: i0, template: `
-    <ion-input
-      type="text"
-      [value]="displayValue"
-      [placeholder]="props?.placeholder || placeholder"
-      readonly
-      (mousedown)="preventDefaultBehavior($event)"
-    />
-
-    <ion-input style="position: absolute;" [formControl]="props.control" type="hidden"></ion-input>
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: NumberFromToComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: NumberFromToComponent, isStandalone: true, selector: "val-number-from-to", inputs: { props: "props" }, ngImport: i0, template: `
+    <div class="number-from-to-container">
+      <ion-label position="stacked">{{ props.fromLabel || 'Inicial' }}</ion-label>
+      <ion-input
+        [formControl]="fromControl"
+        type="number"
+        [placeholder]="props.fromPlaceholder || props.placeholder"
+        [min]="props.range?.min"
+        [max]="props.range?.max"
+      >
+      </ion-input>
 
-    <ion-modal
-      #modal
-      [initialBreakpoint]="1"
-      [breakpoints]="[0, 0.5, 0.75, 1]"
-      (didDismiss)="cancelModal()"
-    >
-      <ng-template>
-        <ion-header>
-          <ion-toolbar>
-            <ion-title>{{ label }}</ion-title>
-            <ion-buttons slot="end">
-              <ion-button (click)="cancelModal()">Cerrar</ion-button>
-            </ion-buttons>
-          </ion-toolbar>
-          <ion-toolbar>
-            <val-searchbar (filterEvent)="onFilter($event)" (focusEvent)="onFocus()" (blurEvent)="onBlur()" />
-          </ion-toolbar>
-        </ion-header>
-        <ion-content>
-          <ion-item *ngIf="tempSelectedItems.length > 0" lines="none" color="light">
-            <ion-icon name="checkmark-circle-outline" slot="start" color="success"></ion-icon>
-            <ion-label>
-              <h3>{{ tempSelectedItems.length }} item{{ tempSelectedItems.length === 1 ? '' : 's' }} seleccionado{{ tempSelectedItems.length === 1 ? '' : 's' }}</h3>
-            </ion-label>
-          </ion-item>
-          <ion-list>
-            <ion-item *ngFor="let item of filteredItems" button (click)="selectItem(item)" detail="false">
-              <ion-checkbox 
-                [checked]="isItemSelected(item)" 
-                slot="start"
-                [disabled]="true"
-              ></ion-checkbox>
-              <ion-label>{{ item[labelProperty] }}</ion-label>
-            </ion-item>
-            <ion-item *ngIf="filteredItems.length === 0" lines="none">
-              <ion-label color="dark">No se encontraron resultados</ion-label>
-            </ion-item>
-          </ion-list>
-        </ion-content>
-        <ion-footer *ngIf="tempSelectedItems.length > 0">
-          <ion-toolbar>
-            <ion-buttons slot="end">
-              <ion-button (click)="clearSelection()">Limpiar</ion-button>
-              <ion-button fill="solid" (click)="applySelection()">Aplicar ({{ tempSelectedItems.length }})</ion-button>
-            </ion-buttons>
-          </ion-toolbar>
-        </ion-footer>
-      </ng-template>
-    </ion-modal>
-  `, isInline: true, styles: ["ion-header{padding:8px 8px 0}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: IonicModule }, { kind: "component", type: i2.IonButton, selector: "ion-button", inputs: ["buttonType", "color", "disabled", "download", "expand", "fill", "form", "href", "mode", "rel", "routerAnimation", "routerDirection", "shape", "size", "strong", "target", "type"] }, { kind: "component", type: i2.IonButtons, selector: "ion-buttons", inputs: ["collapse"] }, { kind: "component", type: i2.IonCheckbox, selector: "ion-checkbox", inputs: ["alignment", "checked", "color", "disabled", "indeterminate", "justify", "labelPlacement", "mode", "name", "value"] }, { kind: "component", type: i2.IonContent, selector: "ion-content", inputs: ["color", "forceOverscroll", "fullscreen", "scrollEvents", "scrollX", "scrollY"] }, { kind: "component", type: i2.IonFooter, selector: "ion-footer", inputs: ["collapse", "mode", "translucent"] }, { kind: "component", type: i2.IonHeader, selector: "ion-header", inputs: ["collapse", "mode", "translucent"] }, { kind: "component", type: i2.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.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"] }] }); }
+      <ion-label position="stacked">{{ props.toLabel || 'Final' }}</ion-label>
+      <ion-input
+        [formControl]="toControl"
+        type="number"
+        [placeholder]="props.toPlaceholder || props.placeholder"
+        [min]="props.range?.min"
+        [max]="props.range?.max"
+      >
+      </ion-input>
+    </div>
+  `, isInline: true, styles: [""], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { 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: IonLabel, selector: "ion-label", inputs: ["color", "mode", "position"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: MultiSelectSearchComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: NumberFromToComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'val-multi-select-search', standalone: true, imports: [CommonModule, IonicModule, FormsModule, SearchbarComponent, ReactiveFormsModule], template: `
-    <ion-input
-      type="text"
-      [value]="displayValue"
-      [placeholder]="props?.placeholder || placeholder"
-      readonly
-      (mousedown)="preventDefaultBehavior($event)"
-    />
-
-    <ion-input style="position: absolute;" [formControl]="props.control" type="hidden"></ion-input>
+            args: [{ selector: 'val-number-from-to', standalone: true, imports: [ReactiveFormsModule, IonInput, IonLabel], template: `
+    <div class="number-from-to-container">
+      <ion-label position="stacked">{{ props.fromLabel || 'Inicial' }}</ion-label>
+      <ion-input
+        [formControl]="fromControl"
+        type="number"
+        [placeholder]="props.fromPlaceholder || props.placeholder"
+        [min]="props.range?.min"
+        [max]="props.range?.max"
+      >
+      </ion-input>
 
-    <ion-modal
-      #modal
-      [initialBreakpoint]="1"
-      [breakpoints]="[0, 0.5, 0.75, 1]"
-      (didDismiss)="cancelModal()"
-    >
-      <ng-template>
-        <ion-header>
-          <ion-toolbar>
-            <ion-title>{{ label }}</ion-title>
-            <ion-buttons slot="end">
-              <ion-button (click)="cancelModal()">Cerrar</ion-button>
-            </ion-buttons>
-          </ion-toolbar>
-          <ion-toolbar>
-            <val-searchbar (filterEvent)="onFilter($event)" (focusEvent)="onFocus()" (blurEvent)="onBlur()" />
-          </ion-toolbar>
-        </ion-header>
-        <ion-content>
-          <ion-item *ngIf="tempSelectedItems.length > 0" lines="none" color="light">
-            <ion-icon name="checkmark-circle-outline" slot="start" color="success"></ion-icon>
-            <ion-label>
-              <h3>{{ tempSelectedItems.length }} item{{ tempSelectedItems.length === 1 ? '' : 's' }} seleccionado{{ tempSelectedItems.length === 1 ? '' : 's' }}</h3>
-            </ion-label>
-          </ion-item>
-          <ion-list>
-            <ion-item *ngFor="let item of filteredItems" button (click)="selectItem(item)" detail="false">
-              <ion-checkbox 
-                [checked]="isItemSelected(item)" 
-                slot="start"
-                [disabled]="true"
-              ></ion-checkbox>
-              <ion-label>{{ item[labelProperty] }}</ion-label>
-            </ion-item>
-            <ion-item *ngIf="filteredItems.length === 0" lines="none">
-              <ion-label color="dark">No se encontraron resultados</ion-label>
-            </ion-item>
-          </ion-list>
-        </ion-content>
-        <ion-footer *ngIf="tempSelectedItems.length > 0">
-          <ion-toolbar>
-            <ion-buttons slot="end">
-              <ion-button (click)="clearSelection()">Limpiar</ion-button>
-              <ion-button fill="solid" (click)="applySelection()">Aplicar ({{ tempSelectedItems.length }})</ion-button>
-            </ion-buttons>
-          </ion-toolbar>
-        </ion-footer>
-      </ng-template>
-    </ion-modal>
-  `, styles: ["ion-header{padding:8px 8px 0}\n"] }]
-        }], ctorParameters: () => [], propDecorators: { modal: [{
-                type: ViewChild,
-                args: ['modal']
-            }], label: [{
-                type: Input
-            }], labelProperty: [{
-                type: Input
-            }], valueProperty: [{
-                type: Input
-            }], placeholder: [{
-                type: Input
-            }], props: [{
+      <ion-label position="stacked">{{ props.toLabel || 'Final' }}</ion-label>
+      <ion-input
+        [formControl]="toControl"
+        type="number"
+        [placeholder]="props.toPlaceholder || props.placeholder"
+        [min]="props.range?.min"
+        [max]="props.range?.max"
+      >
+      </ion-input>
+    </div>
+  ` }]
+        }], ctorParameters: () => [], propDecorators: { props: [{
                 type: Input
             }] } });
 
-class MultiSelectSimpleComponent {
-    constructor() {
-        this.labelProperty = 'name';
-        this.valueProperty = 'id';
-        this.placeholder = '';
-        this.langService = inject(LangService);
-        this.changeDetector = inject(ChangeDetectorRef);
-        // Classic Angular properties
-        this.isOpen = false;
-        this.searchTerm = '';
-        this.selectedValues = [];
-        this.displayValue = '';
-        this.filteredOptions = [];
-        this.searchPlaceholder = '';
-        // ControlValueAccessor
-        this.onChange = (_value) => { };
-        this.onTouched = () => { };
-        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() {
-        this.applyDefaultValue();
-        this.initializeOptions();
-        this.syncSelectedValues();
-        this.updateDisplayValue();
-    }
-    ngOnDestroy() {
-        document.removeEventListener('click', this.handleClickOutside.bind(this));
-    }
-    ngOnChanges(changes) {
-        if (changes['props'] && this.props) {
-            this.initializeOptions();
-            this.syncSelectedValues();
-            this.updateDisplayValue();
-            this.changeDetector.detectChanges();
-        }
-    }
-    // ControlValueAccessor implementation
-    writeValue(value) {
-        const valueArray = this.parseValue(value);
-        this.selectedValues = valueArray;
-        this.updateDisplayValue();
-    }
-    registerOnChange(fn) {
-        this.onChange = fn;
-    }
-    registerOnTouched(fn) {
-        this.onTouched = fn;
-    }
-    setDisabledState(_isDisabled) {
-        // Handle disabled state if needed
-    }
-    // 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);
-        }
-    }
-    onSearch(event) {
-        this.searchTerm = event.detail.value || '';
-        this.filterOptions();
-    }
-    toggleOption(option) {
-        const value = String(option[this.valueProperty]);
-        if (this.isSelected(option)) {
-            // Remove from selection
-            this.selectedValues = this.selectedValues.filter(v => v !== value);
-        }
-        else {
-            // Add to selection
-            this.selectedValues = [...this.selectedValues, value];
-        }
-        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];
-    }
-    handleClickOutside(event) {
-        if (this.isOpen &&
-            !this.mainInputRef?.nativeElement?.contains(event.target) &&
-            !this.dropdownRef?.nativeElement?.contains(event.target)) {
-            this.isOpen = false;
-            this.searchTerm = '';
-            this.initializeOptions();
-        }
+/**
+ * val-password-input
+ *
+ * A password input field with show/hide toggle, integrated with Angular forms.
+ *
+ * @example
+ * <val-password-input [props]="{ control: myControl, placeholder: 'Enter password' }"></val-password-input>
+ *
+ * @input props: InputMetadata - Configuration for the input (form control, placeholder, etc.)
+ */
+class PasswordInputComponent {
+    constructor(icon) {
+        this.hidePassword = true;
     }
-    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();
-        }
-    }
-    getOptionByValue(value) {
-        return this.filteredOptions.find(option => String(option[this.valueProperty]) === String(value));
+    ngOnInit() { }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: PasswordInputComponent, deps: [{ token: IconService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: PasswordInputComponent, isStandalone: true, selector: "val-password-input", inputs: { props: "props" }, ngImport: i0, template: `
+    <div class="input-container">
+      <ion-input
+        class="sign-in__input-password"
+        [formControl]="props.control"
+        [type]="hidePassword ? 'password' : 'text'"
+        [placeholder]="props.placeholder"
+      ></ion-input>
+      <ion-button color="dark" fill="clear" (click)="hidePassword = !hidePassword" size="small">
+        <ion-icon slot="icon-only" [name]="hidePassword ? 'eye-off-outline' : 'eye-outline'"></ion-icon>
+      </ion-button>
+    </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}}.input-container{display:flex;align-items:center;flex-direction:row}\n"], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { 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: 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: IonIcon, selector: "ion-icon", inputs: ["color", "flipRtl", "icon", "ios", "lazy", "md", "mode", "name", "sanitize", "size", "src"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: PasswordInputComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'val-password-input', standalone: true, imports: [ReactiveFormsModule, IonInput, IonButton, IonIcon], template: `
+    <div class="input-container">
+      <ion-input
+        class="sign-in__input-password"
+        [formControl]="props.control"
+        [type]="hidePassword ? 'password' : 'text'"
+        [placeholder]="props.placeholder"
+      ></ion-input>
+      <ion-button color="dark" fill="clear" (click)="hidePassword = !hidePassword" size="small">
+        <ion-icon slot="icon-only" [name]="hidePassword ? 'eye-off-outline' : 'eye-outline'"></ion-icon>
+      </ion-button>
+    </div>
+  `, 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}}.input-container{display:flex;align-items:center;flex-direction:row}\n"] }]
+        }], ctorParameters: () => [{ type: IconService }], propDecorators: { props: [{
+                type: Input
+            }] } });
+
+/**
+ * val-pin-input
+ *
+ * A PIN code input using ng-otp-input, integrated with Angular forms.
+ *
+ * @example
+ * <val-pin-input [props]="{ control: myControl }"></val-pin-input>
+ *
+ * @input props: InputMetadata - Configuration for the PIN input (form control, etc.)
+ */
+class PinInputComponent {
+    constructor() {
+        this.codeLength = 5;
+        this.otpInputConfig = {
+            inputStyles: {
+                'font-size': '32px',
+                width: '58px',
+                height: '60px',
+            },
+            inputClass: 'otp-input-box',
+            length: this.codeLength,
+            allowNumbersOnly: true,
+        };
     }
-    applyDefaultValue() {
-        if (this.props) {
-            applyDefaultValueToControl(this.props);
+    ngOnInit() { }
+    reset() {
+        if (this.pinCode) {
+            this.pinCode.setValue('');
         }
     }
-    initializeOptions() {
-        this.filteredOptions = this.props?.options || [];
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: PinInputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: PinInputComponent, isStandalone: true, selector: "val-pin-input", inputs: { props: "props" }, viewQueries: [{ propertyName: "pinCode", first: true, predicate: NgOtpInputComponent, descendants: true }], ngImport: i0, template: `
+    <div class="otp">
+      <ng-otp-input [formCtrl]="props.control" [config]="otpInputConfig"></ng-otp-input>
+    </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}}.otp{text-align:center;margin-top:.25rem;font-family:var(--ion-default-font),Arial,sans-serif}.otp-input-box:focus{border-color:#0ff}\n"], dependencies: [{ kind: "ngmodule", type: NgOtpInputModule }, { kind: "component", type: i1$3.NgOtpInputComponent, selector: "ng-otp-input", inputs: ["config", "formCtrl"], outputs: ["onInputChange"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: PinInputComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'val-pin-input', standalone: true, imports: [NgOtpInputModule], template: `
+    <div class="otp">
+      <ng-otp-input [formCtrl]="props.control" [config]="otpInputConfig"></ng-otp-input>
+    </div>
+  `, 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}}.otp{text-align:center;margin-top:.25rem;font-family:var(--ion-default-font),Arial,sans-serif}.otp-input-box:focus{border-color:#0ff}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { pinCode: [{
+                type: ViewChild,
+                args: [NgOtpInputComponent, { static: false }]
+            }], props: [{
+                type: Input
+            }] } });
+
+//TODO: support automatic or manual interval for messages. Include the interval number as a parameter.
+/**
+ * val-progress-status
+ *
+ * Displays a progress bar with status messages and titles, useful for multi-step or loading processes.
+ *
+ * @example
+ * <val-progress-status [props]="{ progress: 0.5, color: 'primary', size: 'medium', titles: {...}, messages: [...] }"></val-progress-status>
+ *
+ * @input props: ProgressStatusMetadata - Configuration for the progress status (progress, color, size, titles, messages)
+ */
+class ProgressStatusComponent {
+    constructor() {
+        this.currentIndex = 0;
+        this.blinking = false;
     }
-    filterOptions() {
-        if (!this.searchTerm) {
-            this.initializeOptions();
-            return;
-        }
-        const search = replaceSpecialChars(this.searchTerm.toLowerCase());
-        this.filteredOptions = (this.props?.options || []).filter(option => {
-            const label = option[this.labelProperty]
-                ? replaceSpecialChars(String(option[this.labelProperty]).toLowerCase())
-                : '';
-            const value = option[this.valueProperty]
-                ? replaceSpecialChars(String(option[this.valueProperty]).toLowerCase())
-                : '';
-            return label.includes(search) || value.includes(search);
-        });
+    ngOnInit() {
+        setInterval(() => {
+            this.blinking = !this.blinking;
+        }, 1000);
+        setInterval(() => {
+            this.getNextMessage();
+        }, 9000);
     }
-    updateDisplayValue() {
-        if (this.selectedValues.length === 0) {
-            this.displayValue = '';
-            return;
-        }
-        if (this.selectedValues.length === 1) {
-            const option = this.getOptionByValue(this.selectedValues[0]);
-            this.displayValue = option ? option[this.labelProperty] : '';
-        }
-        else {
-            this.displayValue = `${this.selectedValues.length} elementos seleccionados`;
-        }
+    get Content() {
+        return this.props.messages[this.currentIndex];
     }
-    syncSelectedValues() {
-        if (this.props?.control?.value) {
-            const valueArray = this.parseValue(this.props.control.value);
-            this.selectedValues = valueArray;
-        }
+    getNextMessage() {
+        this.currentIndex = (this.currentIndex + 1) % this.props.messages.length;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: MultiSelectSimpleComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: MultiSelectSimpleComponent, isStandalone: true, selector: "val-multi-select-simple", inputs: { props: "props", labelProperty: "labelProperty", valueProperty: "valueProperty", placeholder: "placeholder" }, providers: [
-            {
-                provide: NG_VALUE_ACCESSOR,
-                useExisting: forwardRef(() => MultiSelectSimpleComponent),
-                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">
-        <ion-searchbar
-          #searchbar
-          [placeholder]="searchPlaceholder"
-          (ionInput)="onSearch($event)"
-          [value]="searchTerm"
-          show-clear-button="focus"
-        ></ion-searchbar>
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: ProgressStatusComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: ProgressStatusComponent, isStandalone: true, selector: "val-progress-status", inputs: { props: "props" }, ngImport: i0, template: `
+    <div class="status-container">
+      <div class="title-container">
+        <val-title-block
+          [props]="{
+            position: 'center',
+            aboveTitle: props.titles.aboveTitle,
+            title: props.titles.title,
+            bellowTitle: props.titles.bellowTitle,
+          }"
+        ></val-title-block>
       </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 class="progress-bar-container">
+        <val-progress-bar
+          [props]="{
+            progress: props.progress,
+            size: 'xlarge',
+            color: props.color,
+            rounded: true,
+            type: 'determinate',
+            buffer: 1,
+          }"
+        ></val-progress-bar>
       </div>
-      
-      <!-- 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>
-          
-          <!-- 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 class="subtitle-container">
+        <div class="subtitle" [class.blink]="blinking">
+          <val-text [props]="{ content: Content, color: 'medium', bold: false, size: props.size }"></val-text>
+        </div>
       </div>
     </div>
-  `, isInline: true, styles: [":host{display:block;position:relative;width:100%}.multi-select-container{position:relative;display:flex;align-items:center;cursor:pointer}.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;z-index:2}.multi-select-container .dropdown-icon.rotated{transform:rotate(180deg)}.dropdown-overlay{position:absolute;top:100%;left:0;right:0;background:var(--ion-background-color);border:1px solid var(--ion-color-light);border-radius:8px;box-shadow:0 4px 16px #0000001a;z-index:1000;max-height:400px;opacity:0;transform:translateY(-8px);pointer-events:none;transition:all .2s ease}.dropdown-overlay.visible{opacity:1;transform:translateY(4px);pointer-events:all}.search-container{padding:12px;border-bottom:1px solid var(--ion-color-light)}.search-container ion-searchbar{--background: var(--ion-color-light);--border-radius: 8px;--box-shadow: none;--padding-start: 12px;--padding-end: 12px;height:40px}.actions-container{display:flex;justify-content:space-between;padding:8px 12px;border-bottom:1px solid var(--ion-color-light)}.actions-container ion-button{--padding-start: 8px;--padding-end: 8px;height:32px;font-size:14px}.options-container{max-height:240px;overflow-y:auto}.options-container .options-list{padding:0}.options-container .option-item{--padding-start: 16px;--padding-end: 16px;--min-height: 48px;cursor:pointer}.options-container .option-item:hover{--background: var(--ion-color-light)}.options-container .option-item ion-checkbox{--size: 20px;margin-right:12px}.options-container .option-item ion-label{font-size:16px;line-height:1.4}.options-container .no-results{--padding-start: 16px;--padding-end: 16px;--min-height: 48px;text-align:center}.options-container .no-results ion-label{font-style:italic;font-size:14px}@media (max-width: 768px){.dropdown-overlay{max-height:300px}.options-container{max-height:200px}.actions-container ion-button{font-size:12px;--padding-start: 6px;--padding-end: 6px}}@media (prefers-color-scheme: dark){.dropdown-overlay{box-shadow:0 4px 16px #0000004d}}.option-item:focus-within{--background: var(--ion-color-primary-tint);outline:2px solid var(--ion-color-primary);outline-offset:-2px}.option-item{transition:background-color .15s ease}.dropdown-icon{transition:transform .2s cubic-bezier(.4,0,.2,1)}\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"] }] }); }
+  `, 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)}.status-container{min-height:6.25rem;margin:1rem .5rem}.progress-bar-container{max-width:60%;margin:0 auto}.title-container{margin-bottom:.5rem}.subtitle-container{width:100%;display:flex}.subtitle{padding:1rem;margin:0 auto;height:1rem}.blink{animation:blink 1s infinite alternate ease-in}@keyframes blink{0%{opacity:0;margin-top:6px}to{opacity:1;margin-top:0}}\n"], dependencies: [{ kind: "component", type: TitleBlockComponent, selector: "val-title-block", inputs: ["props"] }, { kind: "component", type: ProgressBarComponent, selector: "val-progress-bar", inputs: ["props"] }, { kind: "component", type: TextComponent, selector: "val-text", inputs: ["props"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: MultiSelectSimpleComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: ProgressStatusComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'val-multi-select-simple', standalone: true, imports: [CommonModule, IonicModule, FormsModule, ReactiveFormsModule], providers: [
-                        {
-                            provide: NG_VALUE_ACCESSOR,
-                            useExisting: forwardRef(() => MultiSelectSimpleComponent),
-                            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">
-        <ion-searchbar
-          #searchbar
-          [placeholder]="searchPlaceholder"
-          (ionInput)="onSearch($event)"
-          [value]="searchTerm"
-          show-clear-button="focus"
-        ></ion-searchbar>
+            args: [{ selector: 'val-progress-status', standalone: true, imports: [TitleBlockComponent, ProgressBarComponent, TextComponent], template: `
+    <div class="status-container">
+      <div class="title-container">
+        <val-title-block
+          [props]="{
+            position: 'center',
+            aboveTitle: props.titles.aboveTitle,
+            title: props.titles.title,
+            bellowTitle: props.titles.bellowTitle,
+          }"
+        ></val-title-block>
       </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 class="progress-bar-container">
+        <val-progress-bar
+          [props]="{
+            progress: props.progress,
+            size: 'xlarge',
+            color: props.color,
+            rounded: true,
+            type: 'determinate',
+            buffer: 1,
+          }"
+        ></val-progress-bar>
       </div>
-      
-      <!-- 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>
-          
-          <!-- 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 class="subtitle-container">
+        <div class="subtitle" [class.blink]="blinking">
+          <val-text [props]="{ content: Content, color: 'medium', bold: false, size: props.size }"></val-text>
+        </div>
       </div>
     </div>
-  `, styles: [":host{display:block;position:relative;width:100%}.multi-select-container{position:relative;display:flex;align-items:center;cursor:pointer}.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;z-index:2}.multi-select-container .dropdown-icon.rotated{transform:rotate(180deg)}.dropdown-overlay{position:absolute;top:100%;left:0;right:0;background:var(--ion-background-color);border:1px solid var(--ion-color-light);border-radius:8px;box-shadow:0 4px 16px #0000001a;z-index:1000;max-height:400px;opacity:0;transform:translateY(-8px);pointer-events:none;transition:all .2s ease}.dropdown-overlay.visible{opacity:1;transform:translateY(4px);pointer-events:all}.search-container{padding:12px;border-bottom:1px solid var(--ion-color-light)}.search-container ion-searchbar{--background: var(--ion-color-light);--border-radius: 8px;--box-shadow: none;--padding-start: 12px;--padding-end: 12px;height:40px}.actions-container{display:flex;justify-content:space-between;padding:8px 12px;border-bottom:1px solid var(--ion-color-light)}.actions-container ion-button{--padding-start: 8px;--padding-end: 8px;height:32px;font-size:14px}.options-container{max-height:240px;overflow-y:auto}.options-container .options-list{padding:0}.options-container .option-item{--padding-start: 16px;--padding-end: 16px;--min-height: 48px;cursor:pointer}.options-container .option-item:hover{--background: var(--ion-color-light)}.options-container .option-item ion-checkbox{--size: 20px;margin-right:12px}.options-container .option-item ion-label{font-size:16px;line-height:1.4}.options-container .no-results{--padding-start: 16px;--padding-end: 16px;--min-height: 48px;text-align:center}.options-container .no-results ion-label{font-style:italic;font-size:14px}@media (max-width: 768px){.dropdown-overlay{max-height:300px}.options-container{max-height:200px}.actions-container ion-button{font-size:12px;--padding-start: 6px;--padding-end: 6px}}@media (prefers-color-scheme: dark){.dropdown-overlay{box-shadow:0 4px 16px #0000004d}}.option-item:focus-within{--background: var(--ion-color-primary-tint);outline:2px solid var(--ion-color-primary);outline-offset:-2px}.option-item{transition:background-color .15s ease}.dropdown-icon{transition:transform .2s cubic-bezier(.4,0,.2,1)}\n"] }]
-        }], ctorParameters: () => [], propDecorators: { dropdownRef: [{
-                type: ViewChild,
-                args: ['dropdown']
-            }], mainInputRef: [{
-                type: ViewChild,
-                args: ['mainInput']
-            }], props: [{
-                type: Input
-            }], labelProperty: [{
-                type: Input
-            }], valueProperty: [{
-                type: Input
-            }], placeholder: [{
+  `, 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)}.status-container{min-height:6.25rem;margin:1rem .5rem}.progress-bar-container{max-width:60%;margin:0 auto}.title-container{margin-bottom:.5rem}.subtitle-container{width:100%;display:flex}.subtitle{padding:1rem;margin:0 auto;height:1rem}.blink{animation:blink 1s infinite alternate ease-in}@keyframes blink{0%{opacity:0;margin-top:6px}to{opacity:1;margin-top:0}}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { props: [{
                 type: Input
             }] } });
 
 /**
- * val-notes-box
+ * val-prompter
  *
- * Displays a styled notes/info box with optional prefix and configurable color, size, and padding.
+ * Displays a prompt/info box with text, actions (buttons/links), and custom styles.
  *
  * @example
- * <val-notes-box [props]="{ text: 'Note', prefix: 'Info', color: 'primary', textColor: 'dark', size: 'medium', rounded: true, padding: '8px' }"></val-notes-box>
+ * <val-prompter [props]="{ content: 'Message', buttons: [...], hrefs: [...], color: 'primary', size: 'medium' }"></val-prompter>
  *
- * @input props: NotesBoxMetadata - Configuration for the notes box (text, prefix, color, textColor, size, rounded, padding)
+ * @input props: PrompterMetadata - Configuration for the prompter (content, buttons, hrefs, color, size, etc.)
+ * @output onClick - Emits when an action is clicked
  */
-class NotesBoxComponent {
-    constructor() { }
+class PrompterComponent {
+    constructor() {
+        this.onClick = new EventEmitter();
+    }
     ngOnInit() { }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: NotesBoxComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.12", type: NotesBoxComponent, isStandalone: true, selector: "val-notes-box", inputs: { props: "props" }, ngImport: i0, template: `
+    clickHandler(token) {
+        this.onClick.emit(token);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: PrompterComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.12", type: PrompterComponent, isStandalone: true, selector: "val-prompter", inputs: { props: "props" }, outputs: { onClick: "onClick" }, ngImport: i0, template: `
     <val-box
-      [props]="{
-        icon: '',
-        bordered: false,
-        color: props.color,
-        leftBorder: true,
-        rounded: props.rounded,
-        padding: props.padding,
-      }"
-    >
-      <div [ngClass]="['content-container', props.size]" body>
-        @if (props.prefix) {
+      class="teleprompter-container"
+      [props]="{ icon: '', bordered: props.bordered, color: props.color, leftBorder: false, padding: props.padding }"
+      (onClick)="clickHandler()"
+    >
+      <div class="container" [class.teleprompter-content]="props.teleprompter" body>
+        <div>
           <val-text
-            [props]="{ content: props.prefix, color: props.textColor, bold: true, size: props.size }"
+            [props]="{
+              content: props.content,
+              color: '',
+              bold: true,
+              size: props.size,
+            }"
           ></val-text>
+        </div>
+        @if (props.buttons || props.hrefs) {
+          <div class="actions-container">
+            <val-button-group
+              class="buttons-container"
+              [props]="{ buttons: props.buttons, position: 'right', columned: false }"
+              (onClick)="clickHandler($event)"
+            ></val-button-group>
+            <val-href
+              class="link"
+              *ngFor="let l of props.hrefs"
+              [props]="l"
+              (onClick)="clickHandler($event)"
+            ></val-href>
+          </div>
         }
-        <val-text [props]="{ content: props.text, color: props.textColor, bold: false, size: props.size }"></val-text>
       </div>
     </val-box>
-  `, 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)}.content-container{display:inline-grid}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: BoxComponent, selector: "val-box", inputs: ["props"], outputs: ["onClick"] }, { kind: "component", type: TextComponent, selector: "val-text", inputs: ["props"] }] }); }
+  `, isInline: true, styles: ["@charset \"UTF-8\";: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)}.container{display:flex;align-items:center;justify-content:space-between;flex-direction:column}@media (min-width: 768px){.container{flex-direction:row}}.teleprompter-container{overflow:hidden;width:100%}.teleprompter-content{white-space:nowrap;animation:scroll-left 15s linear infinite}@keyframes scroll-left{0%{transform:translate(100%)}to{transform:translate(-100%)}}.link{margin:0 .5rem;width:max-content}.actions-container{display:flex;align-items:center}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "component", type: BoxComponent, selector: "val-box", inputs: ["props"], outputs: ["onClick"] }, { kind: "component", type: ButtonGroupComponent, selector: "val-button-group", inputs: ["props"], outputs: ["onClick"] }, { kind: "component", type: TextComponent, selector: "val-text", inputs: ["props"] }, { kind: "component", type: HrefComponent, selector: "val-href", inputs: ["props"], outputs: ["onClick"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: NotesBoxComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: PrompterComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'val-notes-box', standalone: true, imports: [CommonModule, BoxComponent, TextComponent], template: `
+            args: [{ selector: 'val-prompter', standalone: true, imports: [CommonModule, BoxComponent, ButtonGroupComponent, TextComponent, HrefComponent], template: `
     <val-box
-      [props]="{
-        icon: '',
-        bordered: false,
-        color: props.color,
-        leftBorder: true,
-        rounded: props.rounded,
-        padding: props.padding,
-      }"
+      class="teleprompter-container"
+      [props]="{ icon: '', bordered: props.bordered, color: props.color, leftBorder: false, padding: props.padding }"
+      (onClick)="clickHandler()"
     >
-      <div [ngClass]="['content-container', props.size]" body>
-        @if (props.prefix) {
+      <div class="container" [class.teleprompter-content]="props.teleprompter" body>
+        <div>
           <val-text
-            [props]="{ content: props.prefix, color: props.textColor, bold: true, size: props.size }"
+            [props]="{
+              content: props.content,
+              color: '',
+              bold: true,
+              size: props.size,
+            }"
           ></val-text>
+        </div>
+        @if (props.buttons || props.hrefs) {
+          <div class="actions-container">
+            <val-button-group
+              class="buttons-container"
+              [props]="{ buttons: props.buttons, position: 'right', columned: false }"
+              (onClick)="clickHandler($event)"
+            ></val-button-group>
+            <val-href
+              class="link"
+              *ngFor="let l of props.hrefs"
+              [props]="l"
+              (onClick)="clickHandler($event)"
+            ></val-href>
+          </div>
         }
-        <val-text [props]="{ content: props.text, color: props.textColor, bold: false, size: props.size }"></val-text>
       </div>
     </val-box>
-  `, 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)}.content-container{display:inline-grid}\n"] }]
-        }], ctorParameters: () => [], propDecorators: { props: [{
-                type: Input
-            }] } });
-
-class NumberFromToComponent {
-    constructor() { }
-    ngOnInit() {
-        // Apply default values if configured
-        if (this.props?.withDefault || this.props?.value) {
-            this.applyDefaultValues();
-        }
-    }
-    applyDefaultValues() {
-        const defaultValue = this.resolveDefaultValue();
-        if (defaultValue !== null) {
-            if (typeof defaultValue === 'object' && defaultValue.from !== undefined) {
-                this.fromControl?.setValue(defaultValue.from);
-                this.toControl?.setValue(defaultValue.to);
-            }
-            else {
-                // Si es un valor simple, aplicarlo a ambos controles
-                this.fromControl?.setValue(defaultValue);
-                this.toControl?.setValue(defaultValue);
-            }
-            this.fromControl?.markAsPristine();
-            this.toControl?.markAsPristine();
-            this.fromControl?.updateValueAndValidity();
-            this.toControl?.updateValueAndValidity();
-        }
-    }
-    resolveDefaultValue() {
-        // Explicit value takes precedence
-        if (this.props.value !== undefined && this.props.value !== null && this.props.value !== '') {
-            return this.parseValue(this.props.value);
-        }
-        // No default configuration
-        if (!this.props.withDefault) {
-            return null;
-        }
-        // Custom default value
-        if (typeof this.props.withDefault === 'string') {
-            return this.parseValue(this.props.withDefault);
-        }
-        // Auto default value (withDefault === true)
-        return { from: 0, to: 0 };
-    }
-    parseValue(value) {
-        try {
-            // Try to parse as JSON first (for object values)
-            return JSON.parse(value);
-        }
-        catch {
-            // If not JSON, treat as number
-            const numValue = parseFloat(value) || 0;
-            return { from: numValue, to: numValue };
-        }
-    }
-    get fromControl() {
-        return this.props.fromControl;
-    }
-    get toControl() {
-        return this.props.toControl;
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: NumberFromToComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: NumberFromToComponent, isStandalone: true, selector: "val-number-from-to", inputs: { props: "props" }, ngImport: i0, template: `
-    <div class="number-from-to-container">
-      <ion-label position="stacked">{{ props.fromLabel || 'Inicial' }}</ion-label>
-      <ion-input
-        [formControl]="fromControl"
-        type="number"
-        [placeholder]="props.fromPlaceholder || props.placeholder"
-        [min]="props.range?.min"
-        [max]="props.range?.max"
-      >
-      </ion-input>
-
-      <ion-label position="stacked">{{ props.toLabel || 'Final' }}</ion-label>
-      <ion-input
-        [formControl]="toControl"
-        type="number"
-        [placeholder]="props.toPlaceholder || props.placeholder"
-        [min]="props.range?.min"
-        [max]="props.range?.max"
-      >
-      </ion-input>
-    </div>
-  `, isInline: true, styles: [""], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { 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: IonLabel, selector: "ion-label", inputs: ["color", "mode", "position"] }] }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: NumberFromToComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'val-number-from-to', standalone: true, imports: [ReactiveFormsModule, IonInput, IonLabel], template: `
-    <div class="number-from-to-container">
-      <ion-label position="stacked">{{ props.fromLabel || 'Inicial' }}</ion-label>
-      <ion-input
-        [formControl]="fromControl"
-        type="number"
-        [placeholder]="props.fromPlaceholder || props.placeholder"
-        [min]="props.range?.min"
-        [max]="props.range?.max"
-      >
-      </ion-input>
-
-      <ion-label position="stacked">{{ props.toLabel || 'Final' }}</ion-label>
-      <ion-input
-        [formControl]="toControl"
-        type="number"
-        [placeholder]="props.toPlaceholder || props.placeholder"
-        [min]="props.range?.min"
-        [max]="props.range?.max"
-      >
-      </ion-input>
-    </div>
-  ` }]
+  `, styles: ["@charset \"UTF-8\";: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)}.container{display:flex;align-items:center;justify-content:space-between;flex-direction:column}@media (min-width: 768px){.container{flex-direction:row}}.teleprompter-container{overflow:hidden;width:100%}.teleprompter-content{white-space:nowrap;animation:scroll-left 15s linear infinite}@keyframes scroll-left{0%{transform:translate(100%)}to{transform:translate(-100%)}}.link{margin:0 .5rem;width:max-content}.actions-container{display:flex;align-items:center}\n"] }]
         }], ctorParameters: () => [], propDecorators: { props: [{
                 type: Input
+            }], onClick: [{
+                type: Output
             }] } });
 
 /**
- * val-number-input
+ * val-radio-input
  *
- * A number input field integrated with Angular forms.
+ * A radio group input for selecting one option, integrated with Angular forms.
  *
  * @example
- * <val-number-input [props]="{ control: myControl, placeholder: 'Enter a number' }"></val-number-input>
+ * <val-radio-input [props]="{ control: myControl, options: [{ id: '1', name: 'Option 1' }] }"></val-radio-input>
  *
- * @input props: InputMetadata - Configuration for the input (form control, placeholder, etc.)
+ * @input props: InputMetadata - Configuration for the radio input (form control, options, etc.)
  */
-class NumberInputComponent {
+class RadioInputComponent {
     constructor() { }
-    ngOnInit() {
-        // Apply default values on initialization
-        if (this.props?.withDefault || this.props?.value) {
-            applyDefaultValueToControl(this.props);
-        }
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: NumberInputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: NumberInputComponent, isStandalone: true, selector: "val-number-input", inputs: { props: "props" }, ngImport: i0, template: ` <ion-input [formControl]="props.control" type="number" [placeholder]="props.placeholder"></ion-input> `, isInline: true, styles: [""], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { 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"] }] }); }
+    ngOnInit() { }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: RadioInputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: RadioInputComponent, isStandalone: true, selector: "val-radio-input", inputs: { props: "props" }, ngImport: i0, template: `
+    <ion-radio-group [allowEmptySelection]="true" [formControl]="props.control">
+      <ng-container *ngFor="let o of props.options">
+        <ion-radio [value]="o.id">{{ o.name }}</ion-radio>
+        <br />
+      </ng-container>
+    </ion-radio-group>
+  `, isInline: true, styles: [""], dependencies: [{ kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: IonRadioGroup, selector: "ion-radio-group", inputs: ["allowEmptySelection", "name", "value"] }, { kind: "component", type: IonRadio, selector: "ion-radio", inputs: ["alignment", "color", "disabled", "justify", "labelPlacement", "mode", "name", "value"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: NumberInputComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: RadioInputComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'val-number-input', standalone: true, imports: [ReactiveFormsModule, IonInput], template: ` <ion-input [formControl]="props.control" type="number" [placeholder]="props.placeholder"></ion-input> ` }]
+            args: [{ selector: 'val-radio-input', standalone: true, imports: [NgFor, ReactiveFormsModule, IonRadioGroup, IonRadio], template: `
+    <ion-radio-group [allowEmptySelection]="true" [formControl]="props.control">
+      <ng-container *ngFor="let o of props.options">
+        <ion-radio [value]="o.id">{{ o.name }}</ion-radio>
+        <br />
+      </ng-container>
+    </ion-radio-group>
+  ` }]
         }], ctorParameters: () => [], propDecorators: { props: [{
                 type: Input
             }] } });
 
 /**
- * val-password-input
+ * val-searchbar
  *
- * A password input field with show/hide toggle, integrated with Angular forms.
+ * A search bar component with debounce and event emitters for filtering, focus, and blur.
  *
  * @example
- * <val-password-input [props]="{ control: myControl, placeholder: 'Enter password' }"></val-password-input>
+ * <val-searchbar (filterEvent)="onFilter($event)" (focusEvent)="onFocus()" (blurEvent)="onBlur()"></val-searchbar>
  *
- * @input props: InputMetadata - Configuration for the input (form control, placeholder, etc.)
+ * @input disabled - Whether the searchbar is disabled.
+ * @output filterEvent - Emits the search term on input.
+ * @output focusEvent - Emits when the searchbar gains focus.
+ * @output blurEvent - Emits when the searchbar loses focus.
  */
-class PasswordInputComponent {
-    constructor(icon) {
-        this.hidePassword = true;
-    }
-    ngOnInit() { }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: PasswordInputComponent, deps: [{ token: IconService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: PasswordInputComponent, isStandalone: true, selector: "val-password-input", inputs: { props: "props" }, ngImport: i0, template: `
-    <div class="input-container">
-      <ion-input
-        class="sign-in__input-password"
-        [formControl]="props.control"
-        [type]="hidePassword ? 'password' : 'text'"
-        [placeholder]="props.placeholder"
-      ></ion-input>
-      <ion-button color="dark" fill="clear" (click)="hidePassword = !hidePassword" size="small">
-        <ion-icon slot="icon-only" [name]="hidePassword ? 'eye-off-outline' : 'eye-outline'"></ion-icon>
-      </ion-button>
-    </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}}.input-container{display:flex;align-items:center;flex-direction:row}\n"], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { 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: 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: IonIcon, selector: "ion-icon", inputs: ["color", "flipRtl", "icon", "ios", "lazy", "md", "mode", "name", "sanitize", "size", "src"] }] }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: PasswordInputComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'val-password-input', standalone: true, imports: [ReactiveFormsModule, IonInput, IonButton, IonIcon], template: `
-    <div class="input-container">
-      <ion-input
-        class="sign-in__input-password"
-        [formControl]="props.control"
-        [type]="hidePassword ? 'password' : 'text'"
-        [placeholder]="props.placeholder"
-      ></ion-input>
-      <ion-button color="dark" fill="clear" (click)="hidePassword = !hidePassword" size="small">
-        <ion-icon slot="icon-only" [name]="hidePassword ? 'eye-off-outline' : 'eye-outline'"></ion-icon>
-      </ion-button>
-    </div>
-  `, 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}}.input-container{display:flex;align-items:center;flex-direction:row}\n"] }]
-        }], ctorParameters: () => [{ type: IconService }], propDecorators: { props: [{
-                type: Input
-            }] } });
-
-class PillComponent {
+class SearchbarComponent {
     constructor() {
-        this.theme = inject(ThemeService);
+        /**
+         * Emits the search term on input.
+         */
+        this.filterEvent = new EventEmitter();
+        /**
+         * Emits when the searchbar gains focus.
+         */
+        this.focusEvent = new EventEmitter();
+        /**
+         * Emits when the searchbar loses focus.
+         */
+        this.blurEvent = new EventEmitter();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: PillComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: PillComponent, isStandalone: true, selector: "val-pill", inputs: { props: "props" }, ngImport: i0, template: `
-    <div
-      [id]="props.token"
-      class="fun-card"
-      [class.bordered]="props.bordered"
-      [class.hoverable]="props.hoverable"
-      [ngStyle]="{
-        background: theme.IsDark ? 'var(--ion-background-color)' : props.background,
-      }"
+    onSearch($event) {
+        const searchTerm = $event.detail.value;
+        this.filterEvent.emit(searchTerm);
+    }
+    onFocus() {
+        this.focusEvent.emit();
+    }
+    onBlur() {
+        this.blurEvent.emit();
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: SearchbarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: SearchbarComponent, isStandalone: true, selector: "val-searchbar", inputs: { disabled: "disabled" }, outputs: { filterEvent: "filterEvent", focusEvent: "focusEvent", blurEvent: "blurEvent" }, ngImport: i0, template: `
+    <ion-searchbar
+      mode="ios"
+      debounce="500"
+      placeholder="Búsqueda"
+      [disabled]="disabled"
+      showCancelButton="focus"
+      cancelButtonText="Cancelar"
+      (ionInput)="onSearch($event)"
+      (ionBlur)="onBlur()"
+      (ionFocus)="onFocus()"
     >
-      <val-action-header style="width: 100%;" [props]="props.content" />
-    </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)}.fun-card{z-index:0;position:relative;margin-bottom:8px;cursor:pointer;background:var(--ion-card-background, var(--ion-item-background, var(--ion-background-color, #fff)));display:flex;border-radius:48px;align-items:start;padding:8px 8px 8px 24px;flex-direction:column;box-shadow:0 .25rem .75rem #12195412}.fun-card.hoverable{transition:transform .3s ease,box-shadow .3s ease}.fun-card.hoverable:hover{transform:scale(1.01);box-shadow:.1875rem .625rem .5rem #1219541a}.bordered{border:.0625rem solid var(--ion-color-medium)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: ActionHeaderComponent, selector: "val-action-header", inputs: ["props"] }] }); }
+    </ion-searchbar>
+  `, 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)}ion-searchbar{--cancel-button-color: var(--ion-color-dark);--background: var(--ion-color-light);font-family:var(--ion-default-font),Arial,sans-serif}\n"], dependencies: [{ kind: "component", type: IonSearchbar, selector: "ion-searchbar", inputs: ["animated", "autocomplete", "autocorrect", "cancelButtonIcon", "cancelButtonText", "clearIcon", "color", "debounce", "disabled", "enterkeyhint", "inputmode", "mode", "name", "placeholder", "searchIcon", "showCancelButton", "showClearButton", "spellcheck", "type", "value"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: PillComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: SearchbarComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'val-pill', standalone: true, imports: [CommonModule, ActionHeaderComponent], template: `
-    <div
-      [id]="props.token"
-      class="fun-card"
-      [class.bordered]="props.bordered"
-      [class.hoverable]="props.hoverable"
-      [ngStyle]="{
-        background: theme.IsDark ? 'var(--ion-background-color)' : props.background,
-      }"
+            args: [{ selector: 'val-searchbar', standalone: true, imports: [IonSearchbar], template: `
+    <ion-searchbar
+      mode="ios"
+      debounce="500"
+      placeholder="Búsqueda"
+      [disabled]="disabled"
+      showCancelButton="focus"
+      cancelButtonText="Cancelar"
+      (ionInput)="onSearch($event)"
+      (ionBlur)="onBlur()"
+      (ionFocus)="onFocus()"
     >
-      <val-action-header style="width: 100%;" [props]="props.content" />
-    </div>
-  `, 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)}.fun-card{z-index:0;position:relative;margin-bottom:8px;cursor:pointer;background:var(--ion-card-background, var(--ion-item-background, var(--ion-background-color, #fff)));display:flex;border-radius:48px;align-items:start;padding:8px 8px 8px 24px;flex-direction:column;box-shadow:0 .25rem .75rem #12195412}.fun-card.hoverable{transition:transform .3s ease,box-shadow .3s ease}.fun-card.hoverable:hover{transform:scale(1.01);box-shadow:.1875rem .625rem .5rem #1219541a}.bordered{border:.0625rem solid var(--ion-color-medium)}\n"] }]
-        }], propDecorators: { props: [{
+    </ion-searchbar>
+  `, 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)}ion-searchbar{--cancel-button-color: var(--ion-color-dark);--background: var(--ion-color-light);font-family:var(--ion-default-font),Arial,sans-serif}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { disabled: [{
                 type: Input
+            }], filterEvent: [{
+                type: Output
+            }], focusEvent: [{
+                type: Output
+            }], blurEvent: [{
+                type: Output
             }] } });
 
 /**
- * val-pin-input
+ * val-select-input
  *
- * A PIN code input using ng-otp-input, integrated with Angular forms.
+ * A select/dropdown input integrated with Angular forms, using Ionic's select component.
  *
  * @example
- * <val-pin-input [props]="{ control: myControl }"></val-pin-input>
+ * <val-select-input [props]="{ control: myControl, label: 'Choose', options: [{ id: '1', name: 'Option 1' }] }"></val-select-input>
  *
- * @input props: InputMetadata - Configuration for the PIN input (form control, etc.)
+ * @input props: InputMetadata - Configuration for the select input (form control, label, options, etc.)
  */
-class PinInputComponent {
+class SearchSelectorComponent {
     constructor() {
-        this.codeLength = 5;
-        this.otpInputConfig = {
-            inputStyles: {
-                'font-size': '32px',
-                width: '58px',
-                height: '60px',
-            },
-            inputClass: 'otp-input-box',
-            length: this.codeLength,
-            allowNumbersOnly: true,
+        this.customModalOptions = {
+            header: 'Seleccione',
+            breakpoints: [0, 0.6],
+            initialBreakpoint: 0.6,
         };
     }
-    ngOnInit() { }
-    reset() {
-        if (this.pinCode) {
-            this.pinCode.setValue('');
+    ngOnInit() {
+        if (this.props?.withDefault || this.props?.value) {
+            applyDefaultValueToControl(this.props);
         }
+        this.customModalOptions.header = this.props.label;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: PinInputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: PinInputComponent, isStandalone: true, selector: "val-pin-input", inputs: { props: "props" }, viewQueries: [{ propertyName: "pinCode", first: true, predicate: NgOtpInputComponent, descendants: true }], ngImport: i0, template: `
-    <div class="otp">
-      <ng-otp-input [formCtrl]="props.control" [config]="otpInputConfig"></ng-otp-input>
-    </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}}.otp{text-align:center;margin-top:.25rem;font-family:var(--ion-default-font),Arial,sans-serif}.otp-input-box:focus{border-color:#0ff}\n"], dependencies: [{ kind: "ngmodule", type: NgOtpInputModule }, { kind: "component", type: i1$3.NgOtpInputComponent, selector: "ng-otp-input", inputs: ["config", "formCtrl"], outputs: ["onInputChange"] }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: SearchSelectorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.12", type: SearchSelectorComponent, isStandalone: true, selector: "val-select-input", inputs: { props: "props" }, ngImport: i0, template: `
+    <ion-select
+      [formControl]="props.control"
+      [label]="props.label"
+      [interfaceOptions]="customModalOptions"
+      interface="modal"
+      [placeholder]="[props.placeholder]"
+      cancelText="Cancelar"
+      okText="Ok"
+    >
+      @for (o of props.options; track o.id) {
+        <ion-select-option [value]="o.id">{{ o.name }}</ion-select-option>
+      }
+    </ion-select>
+  `, isInline: true, styles: [""], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: IonSelect, selector: "ion-select", inputs: ["cancelText", "color", "compareWith", "disabled", "expandedIcon", "fill", "interface", "interfaceOptions", "justify", "label", "labelPlacement", "mode", "multiple", "name", "okText", "placeholder", "selectedText", "shape", "toggleIcon", "value"] }, { kind: "component", type: IonSelectOption, selector: "ion-select-option", inputs: ["disabled", "value"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: PinInputComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: SearchSelectorComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'val-pin-input', standalone: true, imports: [NgOtpInputModule], template: `
-    <div class="otp">
-      <ng-otp-input [formCtrl]="props.control" [config]="otpInputConfig"></ng-otp-input>
-    </div>
-  `, 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}}.otp{text-align:center;margin-top:.25rem;font-family:var(--ion-default-font),Arial,sans-serif}.otp-input-box:focus{border-color:#0ff}\n"] }]
-        }], ctorParameters: () => [], propDecorators: { pinCode: [{
-                type: ViewChild,
-                args: [NgOtpInputComponent, { static: false }]
-            }], props: [{
+            args: [{ selector: 'val-select-input', standalone: true, imports: [ReactiveFormsModule, IonSelect, IonSelectOption], template: `
+    <ion-select
+      [formControl]="props.control"
+      [label]="props.label"
+      [interfaceOptions]="customModalOptions"
+      interface="modal"
+      [placeholder]="[props.placeholder]"
+      cancelText="Cancelar"
+      okText="Ok"
+    >
+      @for (o of props.options; track o.id) {
+        <ion-select-option [value]="o.id">{{ o.name }}</ion-select-option>
+      }
+    </ion-select>
+  ` }]
+        }], ctorParameters: () => [], propDecorators: { props: [{
                 type: Input
             }] } });
 
-class PlainCodeBoxComponent {
+/**
+ * Removes diacritical marks (accents) from a string using Unicode normalization.
+ * Useful for text search and comparison.
+ *
+ * @param text The input string
+ * @returns The normalized string without diacritical marks
+ *
+ * @example
+ * replaceSpecialChars('canción') // returns 'cancion'
+ */
+const replaceSpecialChars = (text) => text.normalize('NFD').replace(/[\u0300-\u036f]/g, '');
+
+/**
+ * val-select-search
+ *
+ * A searchable select/dropdown input with modal and filtering, integrated with Angular forms.
+ *
+ * @example
+ * <val-select-search [props]="{ control: myControl, label: 'Choose', options: [{ id: '1', name: 'Option 1' }] }"></val-select-search>
+ *
+ * @input props: InputMetadata - Configuration for the select input (form control, label, options, etc.)
+ */
+class SelectSearchComponent {
     constructor() {
-        this.toast = inject(ToastController);
-        this.cdr = inject(ChangeDetectorRef);
+        this.labelProperty = 'name';
+        this.valueProperty = 'id';
+        this.multiple = false;
         this.langService = inject(LangService);
-        this.props = { lines: [] };
-    }
-    ngOnChanges(changes) {
-        if (changes['props'] && !changes['props'].firstChange) {
-            this.cdr.detectChanges();
-            setTimeout(() => this.highlightCode());
-        }
+        this.icon = inject(IconService);
+        this.changeDetector = inject(ChangeDetectorRef);
+        this.searchTerm = '';
+        this.filteredItems = [];
+        this.selectedItems = [];
+        this.displayValue = '';
+        this.previousOptions = [];
+        this.isProcessingChanges = false;
+        this.label = this.langService.getText('_global', 'select', 'Seleccionar');
+        this.placeholder = this.langService.getText('_global', 'selectOption', 'Seleccione una opción');
     }
-    ngAfterViewInit() {
-        setTimeout(() => this.highlightCode());
+    ngOnInit() {
+        this.applyDefaultValue();
+        this.initializeItems();
+        this.syncControlValueWithSelectedItems();
+        this.updateDisplayValue();
+        this.subscribeToValueChanges();
     }
-    highlightCode() {
-        if (this.codeBlock && this.props.lines && this.props.lines.length > 0) {
-            Prism.highlightElement(this.codeBlock.nativeElement);
+    ngOnDestroy() {
+        // Limpiar suscripciones para evitar memory leaks
+        if (this.valueChangesSubscription) {
+            this.valueChangesSubscription.unsubscribe();
         }
     }
-    async copyCode() {
-        const fullCode = this.props.lines.map(line => line.text).join('\n');
-        if (fullCode) {
-            await Clipboard.write({
-                string: fullCode,
-            });
-            const copiedMessage = this.langService.getText('_global', 'copied', '¡Copiado al portapapeles!');
-            this.presentToast(copiedMessage);
-        }
+    ngOnChanges(changes) {
+        // 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;
+            }
+        }
     }
-    async presentToast(message) {
-        const toast = await this.toast.create({
-            message: message,
-            duration: 2000,
-            position: 'bottom',
-            color: 'dark',
+    ionViewWillEnter() {
+        if (this.isProcessingChanges) {
+            return;
+        }
+        try {
+            this.isProcessingChanges = true;
+            this.initializeItems();
+            this.syncControlValueWithSelectedItems();
+            this.updateDisplayValue();
+            this.subscribeToValueChanges();
+        }
+        finally {
+            this.isProcessingChanges = false;
+        }
+    }
+    // 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;
+            }
         });
-        toast.present();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: PlainCodeBoxComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: PlainCodeBoxComponent, isStandalone: true, selector: "val-plain-code-box", inputs: { props: "props" }, viewQueries: [{ propertyName: "codeBlock", first: true, predicate: ["codeBlock"], descendants: true }], usesOnChanges: true, ngImport: i0, template: `
-    <div class="code-box-container">
-      <ion-button *ngIf="props.showCopyButton !== false" fill="clear" class="copy-button" (click)="copyCode()">
-        <ion-icon name="copy-outline"></ion-icon>
-      </ion-button>
-      <pre><code [class]="'language-' + (props.language || 'bash')" #codeBlock><ng-container *ngFor="let line of props.lines; let i = index"><span [class]="line.type ? 'line-' + line.type : 'line-normal'">{{ line.text }}</span><br *ngIf="i < props.lines.length - 1">
-</ng-container></code></pre>
-    </div>
-  `, isInline: true, styles: [".code-box-container{position:relative;background-color:#282c34;border-radius:16px;overflow:hidden;box-shadow:0 4px 15px #0009;margin:0}@media (prefers-color-scheme: light){.code-box-container{background-color:#fff;box-shadow:0 2px 4px #0000001a}}.copy-button{position:absolute;top:8px;right:8px;z-index:10;--padding-start: 2px;--padding-end: 2px;--padding-top: 2px;--padding-bottom: 2px;min-width:28px;min-height:28px;height:28px;width:28px;color:#61afef;background:#0006;border-radius:6px;box-shadow:0 1px 4px #0000000d;display:flex;align-items:center;justify-content:center;transition:background .2s ease,color .2s ease}.copy-button:hover{background:#00000080;color:#8cc4ff}.copy-button ion-icon{font-size:1.2em;margin:0}@media (prefers-color-scheme: light){.copy-button{color:var(--ion-color-primary, #007bff);background:#ffffffb3}.copy-button:hover{background:#ffffffe6;color:var(--ion-color-primary-tint, #3880ff)}}pre{margin:0;padding:0;background-color:transparent;min-width:100%;min-height:100%;white-space:pre-wrap;word-break:normal;font-family:Roboto Mono,monospace}code{font-family:Roboto Mono,monospace;font-size:.9em;line-height:1.6;display:block;white-space:inherit;word-break:inherit;color:#abb2bf;margin:0}@media (prefers-color-scheme: light){code{color:#333}}code .line-normal{color:#abb2bf}@media (prefers-color-scheme: light){code .line-normal{color:#333}}code .line-command{color:#c678dd}@media (prefers-color-scheme: light){code .line-command{color:var(--ion-color-primary, #3880ff)}}code .line-error{color:#e06c75}@media (prefers-color-scheme: light){code .line-error{color:var(--ion-color-danger, #eb445a)}}code .line-success{color:#98c379}@media (prefers-color-scheme: light){code .line-success{color:var(--ion-color-success, #2dd36f)}}code .token.comment{color:#5c6370}code .token.selector,code .token.string{color:#98c379}code .token.punctuation{color:#abb2bf}code .token.operator{color:#c678dd}code .token.boolean,code .token.number{color:#d19a66}code .token.function{color:#61afef}code .token.keyword{color:#c678dd}code .token.class-name{color:#e6c07b}code .token.tag{color:#e06c75}code .token.attr-name{color:#d19a66}code .token.attr-value{color:#98c379}code .token.property{color:#56b6c2}code .token.variable{color:#e06c75}@media (max-width: 600px){.code-box-container{border-radius:16px}.copy-button{top:6px;right:6px;min-width:24px;min-height:24px;height:24px;width:24px}.copy-button ion-icon{font-size:1em}pre{padding:0;margin:0}code{font-size:.8em;line-height:1.5;margin:0}}@media (min-width: 601px) and (max-width: 1024px){code{font-size:.9em}}@media (min-width: 1025px){code{font-size:1em}}\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: "component", type: IonIcon, selector: "ion-icon", inputs: ["color", "flipRtl", "icon", "ios", "lazy", "md", "mode", "name", "sanitize", "size", "src"] }, { 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"] }] }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: PlainCodeBoxComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'val-plain-code-box', standalone: true, imports: [CommonModule, IonIcon, IonButton], template: `
-    <div class="code-box-container">
-      <ion-button *ngIf="props.showCopyButton !== false" fill="clear" class="copy-button" (click)="copyCode()">
-        <ion-icon name="copy-outline"></ion-icon>
-      </ion-button>
-      <pre><code [class]="'language-' + (props.language || 'bash')" #codeBlock><ng-container *ngFor="let line of props.lines; let i = index"><span [class]="line.type ? 'line-' + line.type : 'line-normal'">{{ line.text }}</span><br *ngIf="i < props.lines.length - 1">
-</ng-container></code></pre>
-    </div>
-  `, styles: [".code-box-container{position:relative;background-color:#282c34;border-radius:16px;overflow:hidden;box-shadow:0 4px 15px #0009;margin:0}@media (prefers-color-scheme: light){.code-box-container{background-color:#fff;box-shadow:0 2px 4px #0000001a}}.copy-button{position:absolute;top:8px;right:8px;z-index:10;--padding-start: 2px;--padding-end: 2px;--padding-top: 2px;--padding-bottom: 2px;min-width:28px;min-height:28px;height:28px;width:28px;color:#61afef;background:#0006;border-radius:6px;box-shadow:0 1px 4px #0000000d;display:flex;align-items:center;justify-content:center;transition:background .2s ease,color .2s ease}.copy-button:hover{background:#00000080;color:#8cc4ff}.copy-button ion-icon{font-size:1.2em;margin:0}@media (prefers-color-scheme: light){.copy-button{color:var(--ion-color-primary, #007bff);background:#ffffffb3}.copy-button:hover{background:#ffffffe6;color:var(--ion-color-primary-tint, #3880ff)}}pre{margin:0;padding:0;background-color:transparent;min-width:100%;min-height:100%;white-space:pre-wrap;word-break:normal;font-family:Roboto Mono,monospace}code{font-family:Roboto Mono,monospace;font-size:.9em;line-height:1.6;display:block;white-space:inherit;word-break:inherit;color:#abb2bf;margin:0}@media (prefers-color-scheme: light){code{color:#333}}code .line-normal{color:#abb2bf}@media (prefers-color-scheme: light){code .line-normal{color:#333}}code .line-command{color:#c678dd}@media (prefers-color-scheme: light){code .line-command{color:var(--ion-color-primary, #3880ff)}}code .line-error{color:#e06c75}@media (prefers-color-scheme: light){code .line-error{color:var(--ion-color-danger, #eb445a)}}code .line-success{color:#98c379}@media (prefers-color-scheme: light){code .line-success{color:var(--ion-color-success, #2dd36f)}}code .token.comment{color:#5c6370}code .token.selector,code .token.string{color:#98c379}code .token.punctuation{color:#abb2bf}code .token.operator{color:#c678dd}code .token.boolean,code .token.number{color:#d19a66}code .token.function{color:#61afef}code .token.keyword{color:#c678dd}code .token.class-name{color:#e6c07b}code .token.tag{color:#e06c75}code .token.attr-name{color:#d19a66}code .token.attr-value{color:#98c379}code .token.property{color:#56b6c2}code .token.variable{color:#e06c75}@media (max-width: 600px){.code-box-container{border-radius:16px}.copy-button{top:6px;right:6px;min-width:24px;min-height:24px;height:24px;width:24px}.copy-button ion-icon{font-size:1em}pre{padding:0;margin:0}code{font-size:.8em;line-height:1.5;margin:0}}@media (min-width: 601px) and (max-width: 1024px){code{font-size:.9em}}@media (min-width: 1025px){code{font-size:1em}}\n"] }]
-        }], ctorParameters: () => [], propDecorators: { props: [{
-                type: Input
-            }], codeBlock: [{
-                type: ViewChild,
-                args: ['codeBlock']
-            }] } });
-
-//TODO: support automatic or manual interval for messages. Include the interval number as a parameter.
-/**
- * val-progress-status
- *
- * Displays a progress bar with status messages and titles, useful for multi-step or loading processes.
- *
- * @example
- * <val-progress-status [props]="{ progress: 0.5, color: 'primary', size: 'medium', titles: {...}, messages: [...] }"></val-progress-status>
- *
- * @input props: ProgressStatusMetadata - Configuration for the progress status (progress, color, size, titles, messages)
- */
-class ProgressStatusComponent {
-    constructor() {
-        this.currentIndex = 0;
-        this.blinking = false;
+    // Compara si dos arrays de opciones son iguales
+    areOptionsEqual(prevOptions, newOptions) {
+        // PERF: Use reference equality first for fast path
+        if (prevOptions === newOptions)
+            return true;
+        if (!prevOptions || !newOptions)
+            return prevOptions === newOptions;
+        if (prevOptions.length !== newOptions.length)
+            return false;
+        // Only compare valueProperty for equality
+        for (let i = 0; i < prevOptions.length; i++) {
+            if (prevOptions[i][this.valueProperty] !== newOptions[i][this.valueProperty]) {
+                return false;
+            }
+        }
+        return true;
     }
-    ngOnInit() {
-        setInterval(() => {
-            this.blinking = !this.blinking;
-        }, 1000);
-        setInterval(() => {
-            this.getNextMessage();
-        }, 9000);
+    initializeItems() {
+        // PERF: Avoid unnecessary array copies
+        this.filteredItems = this.props?.options || [];
     }
-    get Content() {
-        return this.props.messages[this.currentIndex];
+    syncControlValueWithSelectedItems() {
+        if (!this.props?.control) {
+            this.selectedItems = [];
+            return;
+        }
+        const controlValue = this.props.control.value;
+        if (controlValue === null || controlValue === undefined) {
+            this.selectedItems = [];
+            return;
+        }
+        // PERF: Use a Map for faster lookup if options are large
+        if (this.props.options && this.props.options.length > 0) {
+            const map = new Map(this.props.options.map(opt => [opt[this.valueProperty], opt]));
+            const selectedOption = map.get(controlValue);
+            this.selectedItems = selectedOption ? [selectedOption] : [];
+        }
+        else {
+            this.selectedItems = [];
+        }
     }
-    getNextMessage() {
-        this.currentIndex = (this.currentIndex + 1) % this.props.messages.length;
+    applyDefaultValue() {
+        applyDefaultValueToControl(this.props);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: ProgressStatusComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: ProgressStatusComponent, isStandalone: true, selector: "val-progress-status", inputs: { props: "props" }, ngImport: i0, template: `
-    <div class="status-container">
-      <div class="title-container">
-        <val-title-block
-          [props]="{
-            position: 'center',
-            aboveTitle: props.titles.aboveTitle,
-            title: props.titles.title,
-            bellowTitle: props.titles.bellowTitle,
-          }"
-        ></val-title-block>
-      </div>
-      <div class="progress-bar-container">
-        <val-progress-bar
-          [props]="{
-            progress: props.progress,
-            size: 'xlarge',
-            color: props.color,
-            rounded: true,
-            type: 'determinate',
-            buffer: 1,
-          }"
-        ></val-progress-bar>
-      </div>
-      <div class="subtitle-container">
-        <div class="subtitle" [class.blink]="blinking">
-          <val-text [props]="{ content: Content, color: 'medium', bold: false, size: props.size }"></val-text>
-        </div>
-      </div>
-    </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)}.status-container{min-height:6.25rem;margin:1rem .5rem}.progress-bar-container{max-width:60%;margin:0 auto}.title-container{margin-bottom:.5rem}.subtitle-container{width:100%;display:flex}.subtitle{padding:1rem;margin:0 auto;height:1rem}.blink{animation:blink 1s infinite alternate ease-in}@keyframes blink{0%{opacity:0;margin-top:6px}to{opacity:1;margin-top:0}}\n"], dependencies: [{ kind: "component", type: TitleBlockComponent, selector: "val-title-block", inputs: ["props"] }, { kind: "component", type: ProgressBarComponent, selector: "val-progress-bar", inputs: ["props"] }, { kind: "component", type: TextComponent, selector: "val-text", inputs: ["props"] }] }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: ProgressStatusComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'val-progress-status', standalone: true, imports: [TitleBlockComponent, ProgressBarComponent, TextComponent], template: `
-    <div class="status-container">
-      <div class="title-container">
-        <val-title-block
-          [props]="{
-            position: 'center',
-            aboveTitle: props.titles.aboveTitle,
-            title: props.titles.title,
-            bellowTitle: props.titles.bellowTitle,
-          }"
-        ></val-title-block>
-      </div>
-      <div class="progress-bar-container">
-        <val-progress-bar
-          [props]="{
-            progress: props.progress,
-            size: 'xlarge',
-            color: props.color,
-            rounded: true,
-            type: 'determinate',
-            buffer: 1,
-          }"
-        ></val-progress-bar>
-      </div>
-      <div class="subtitle-container">
-        <div class="subtitle" [class.blink]="blinking">
-          <val-text [props]="{ content: Content, color: 'medium', bold: false, size: props.size }"></val-text>
-        </div>
-      </div>
-    </div>
-  `, 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)}.status-container{min-height:6.25rem;margin:1rem .5rem}.progress-bar-container{max-width:60%;margin:0 auto}.title-container{margin-bottom:.5rem}.subtitle-container{width:100%;display:flex}.subtitle{padding:1rem;margin:0 auto;height:1rem}.blink{animation:blink 1s infinite alternate ease-in}@keyframes blink{0%{opacity:0;margin-top:6px}to{opacity:1;margin-top:0}}\n"] }]
-        }], ctorParameters: () => [], propDecorators: { props: [{
-                type: Input
-            }] } });
-
-/**
- * val-prompter
- *
- * Displays a prompt/info box with text, actions (buttons/links), and custom styles.
- *
- * @example
- * <val-prompter [props]="{ content: 'Message', buttons: [...], hrefs: [...], color: 'primary', size: 'medium' }"></val-prompter>
- *
- * @input props: PrompterMetadata - Configuration for the prompter (content, buttons, hrefs, color, size, etc.)
- * @output onClick - Emits when an action is clicked
- */
-class PrompterComponent {
-    constructor() {
-        this.onClick = new EventEmitter();
+    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;
+        }
+        // If no options, nothing to filter
+        if (!this.props?.options || this.props.options.length === 0) {
+            this.filteredItems = [];
+            this.changeDetector.detectChanges();
+            return;
+        }
+        // PERF: Avoid repeated replaceSpecialChars and toLowerCase for each option
+        const search = replaceSpecialChars(event.toLowerCase());
+        this.filteredItems = this.props.options.filter(element => {
+            // Only use labelProperty and valueProperty for filtering (faster)
+            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();
     }
-    ngOnInit() { }
-    clickHandler(token) {
-        this.onClick.emit(token);
+    onFocus() {
+        console.log('onFocus');
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: PrompterComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.12", type: PrompterComponent, isStandalone: true, selector: "val-prompter", inputs: { props: "props" }, outputs: { onClick: "onClick" }, ngImport: i0, template: `
-    <val-box
-      class="teleprompter-container"
-      [props]="{ icon: '', bordered: props.bordered, color: props.color, leftBorder: false, padding: props.padding }"
-      (onClick)="clickHandler()"
-    >
-      <div class="container" [class.teleprompter-content]="props.teleprompter" body>
-        <div>
-          <val-text
-            [props]="{
-              content: props.content,
-              color: '',
-              bold: true,
-              size: props.size,
-            }"
-          ></val-text>
-        </div>
-        @if (props.buttons || props.hrefs) {
-          <div class="actions-container">
-            <val-button-group
-              class="buttons-container"
-              [props]="{ buttons: props.buttons, position: 'right', columned: false }"
-              (onClick)="clickHandler($event)"
-            ></val-button-group>
-            <val-href
-              class="link"
-              *ngFor="let l of props.hrefs"
-              [props]="l"
-              (onClick)="clickHandler($event)"
-            ></val-href>
-          </div>
+    onBlur() {
+        console.log('onBlur');
+    }
+    openModal() {
+        if (this.modal) {
+            this.modal.present();
         }
-      </div>
-    </val-box>
-  `, isInline: true, styles: ["@charset \"UTF-8\";: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)}.container{display:flex;align-items:center;justify-content:space-between;flex-direction:column}@media (min-width: 768px){.container{flex-direction:row}}.teleprompter-container{overflow:hidden;width:100%}.teleprompter-content{white-space:nowrap;animation:scroll-left 15s linear infinite}@keyframes scroll-left{0%{transform:translate(100%)}to{transform:translate(-100%)}}.link{margin:0 .5rem;width:max-content}.actions-container{display:flex;align-items:center}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "component", type: BoxComponent, selector: "val-box", inputs: ["props"], outputs: ["onClick"] }, { kind: "component", type: ButtonGroupComponent, selector: "val-button-group", inputs: ["props"], outputs: ["onClick"] }, { kind: "component", type: TextComponent, selector: "val-text", inputs: ["props"] }, { kind: "component", type: HrefComponent, selector: "val-href", inputs: ["props"], outputs: ["onClick"] }] }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: PrompterComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'val-prompter', standalone: true, imports: [CommonModule, BoxComponent, ButtonGroupComponent, TextComponent, HrefComponent], template: `
-    <val-box
-      class="teleprompter-container"
-      [props]="{ icon: '', bordered: props.bordered, color: props.color, leftBorder: false, padding: props.padding }"
-      (onClick)="clickHandler()"
-    >
-      <div class="container" [class.teleprompter-content]="props.teleprompter" body>
-        <div>
-          <val-text
-            [props]="{
-              content: props.content,
-              color: '',
-              bold: true,
-              size: props.size,
-            }"
-          ></val-text>
-        </div>
-        @if (props.buttons || props.hrefs) {
-          <div class="actions-container">
-            <val-button-group
-              class="buttons-container"
-              [props]="{ buttons: props.buttons, position: 'right', columned: false }"
-              (onClick)="clickHandler($event)"
-            ></val-button-group>
-            <val-href
-              class="link"
-              *ngFor="let l of props.hrefs"
-              [props]="l"
-              (onClick)="clickHandler($event)"
-            ></val-href>
-          </div>
+    }
+    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();
         }
-      </div>
-    </val-box>
-  `, styles: ["@charset \"UTF-8\";: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)}.container{display:flex;align-items:center;justify-content:space-between;flex-direction:column}@media (min-width: 768px){.container{flex-direction:row}}.teleprompter-container{overflow:hidden;width:100%}.teleprompter-content{white-space:nowrap;animation:scroll-left 15s linear infinite}@keyframes scroll-left{0%{transform:translate(100%)}to{transform:translate(-100%)}}.link{margin:0 .5rem;width:max-content}.actions-container{display:flex;align-items:center}\n"] }]
-        }], ctorParameters: () => [], propDecorators: { props: [{
-                type: Input
-            }], onClick: [{
-                type: Output
-            }] } });
+    }
+    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.applyChanges();
+    }
+    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];
+        }
+    }
+    applyChanges() {
+        if (!this.props?.control) {
+            return;
+        }
+        try {
+            this.isProcessingChanges = true;
+            if (this.selectedItems.length > 0) {
+                this.props.control.setValue(this.selectedItems[0][this.valueProperty]);
+            }
+            else {
+                this.props.control.setValue(null);
+            }
+            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(null);
+        }
+        this.changeDetector.detectChanges();
+    }
+    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" }, 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)"
+    />
 
-/**
- * val-radio-input
- *
- * A radio group input for selecting one option, integrated with Angular forms.
- *
- * @example
- * <val-radio-input [props]="{ control: myControl, options: [{ id: '1', name: 'Option 1' }] }"></val-radio-input>
- *
- * @input props: InputMetadata - Configuration for the radio input (form control, options, etc.)
- */
-class RadioInputComponent {
-    constructor() { }
-    ngOnInit() { }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: RadioInputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: RadioInputComponent, isStandalone: true, selector: "val-radio-input", inputs: { props: "props" }, ngImport: i0, template: `
-    <ion-radio-group [allowEmptySelection]="true" [formControl]="props.control">
-      <ng-container *ngFor="let o of props.options">
-        <ion-radio [value]="o.id">{{ o.name }}</ion-radio>
-        <br />
-      </ng-container>
-    </ion-radio-group>
-  `, isInline: true, styles: [""], dependencies: [{ kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: IonRadioGroup, selector: "ion-radio-group", inputs: ["allowEmptySelection", "name", "value"] }, { kind: "component", type: IonRadio, selector: "ion-radio", inputs: ["alignment", "color", "disabled", "justify", "labelPlacement", "mode", "name", "value"] }] }); }
+    <ion-input style="position: absolute;" [formControl]="props.control" type="hidden"></ion-input>
+
+    <ion-modal
+      #modal
+      trigger="open-modal"
+      [initialBreakpoint]="1"
+      [breakpoints]="[0, 0.5, 0.75, 1]"
+      (didDismiss)="cancelModal()"
+    >
+      <ng-template>
+        <ion-header>
+          <ion-toolbar>
+            <ion-title>{{ label }}</ion-title>
+            <ion-buttons slot="end">
+              <ion-button (click)="cancelModal()">Cerrar</ion-button>
+            </ion-buttons>
+          </ion-toolbar>
+          <ion-toolbar>
+            <val-searchbar (filterEvent)="onFilter($event)" (focusEvent)="onFocus()" (blurEvent)="onBlur()" />
+          </ion-toolbar>
+        </ion-header>
+        <ion-content>
+          <ion-list>
+            <ion-item *ngFor="let item of filteredItems" button (click)="selectItem(item)" detail="false">
+              <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" 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}\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.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$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: RadioInputComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: SelectSearchComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'val-radio-input', standalone: true, imports: [NgFor, ReactiveFormsModule, IonRadioGroup, IonRadio], template: `
-    <ion-radio-group [allowEmptySelection]="true" [formControl]="props.control">
-      <ng-container *ngFor="let o of props.options">
-        <ion-radio [value]="o.id">{{ o.name }}</ion-radio>
-        <br />
-      </ng-container>
-    </ion-radio-group>
-  ` }]
-        }], ctorParameters: () => [], propDecorators: { props: [{
+            args: [{ selector: 'val-select-search', standalone: true, imports: [CommonModule, IonicModule, FormsModule, SearchbarComponent, ReactiveFormsModule], template: `
+    <ion-input
+      type="text"
+      [value]="displayValue"
+      [placeholder]="props?.placeholder || placeholder"
+      readonly
+      (mousedown)="preventDefaultBehavior($event)"
+    />
+
+    <ion-input style="position: absolute;" [formControl]="props.control" type="hidden"></ion-input>
+
+    <ion-modal
+      #modal
+      trigger="open-modal"
+      [initialBreakpoint]="1"
+      [breakpoints]="[0, 0.5, 0.75, 1]"
+      (didDismiss)="cancelModal()"
+    >
+      <ng-template>
+        <ion-header>
+          <ion-toolbar>
+            <ion-title>{{ label }}</ion-title>
+            <ion-buttons slot="end">
+              <ion-button (click)="cancelModal()">Cerrar</ion-button>
+            </ion-buttons>
+          </ion-toolbar>
+          <ion-toolbar>
+            <val-searchbar (filterEvent)="onFilter($event)" (focusEvent)="onFocus()" (blurEvent)="onBlur()" />
+          </ion-toolbar>
+        </ion-header>
+        <ion-content>
+          <ion-list>
+            <ion-item *ngFor="let item of filteredItems" button (click)="selectItem(item)" detail="false">
+              <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" 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}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { modal: [{
+                type: ViewChild,
+                args: ['modal']
+            }], label: [{
+                type: Input
+            }], labelProperty: [{
+                type: Input
+            }], valueProperty: [{
+                type: Input
+            }], multiple: [{
+                type: Input
+            }], placeholder: [{
+                type: Input
+            }], props: [{
                 type: Input
             }] } });
 
 /**
- * val-select-input
+ * val-text-input
  *
- * A select/dropdown input integrated with Angular forms, using Ionic's select component.
+ * A text input field integrated with Angular forms.
  *
  * @example
- * <val-select-input [props]="{ control: myControl, label: 'Choose', options: [{ id: '1', name: 'Option 1' }] }"></val-select-input>
+ * <val-text-input [props]="{ control: myControl, placeholder: 'Enter text', ... }"></val-text-input>
  *
- * @input props: InputMetadata - Configuration for the select input (form control, label, options, etc.)
+ * @input props: InputMetadata - Configuration for the input (form control, placeholder, label, etc.)
  */
-class SearchSelectorComponent {
+class TextInputComponent {
     constructor() {
-        this.customModalOptions = {
-            header: 'Seleccione',
-            breakpoints: [0, 0.6],
-            initialBreakpoint: 0.6,
-        };
+        this.states = ComponentStates;
     }
     ngOnInit() {
+        // Apply default values on initialization
         if (this.props?.withDefault || this.props?.value) {
             applyDefaultValueToControl(this.props);
         }
-        this.customModalOptions.header = this.props.label;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: SearchSelectorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.12", type: SearchSelectorComponent, isStandalone: true, selector: "val-select-input", inputs: { props: "props" }, ngImport: i0, template: `
-    <ion-select
-      [formControl]="props.control"
-      [label]="props.label"
-      [interfaceOptions]="customModalOptions"
-      interface="modal"
-      [placeholder]="[props.placeholder]"
-      cancelText="Cancelar"
-      okText="Ok"
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: TextInputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: TextInputComponent, isStandalone: true, selector: "val-text-input", inputs: { props: "props" }, ngImport: i0, template: ` <ion-input [formControl]="props.control" type="text" [placeholder]="props.placeholder" /> `, 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: ReactiveFormsModule }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { 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"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: TextInputComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'val-text-input', standalone: true, imports: [ReactiveFormsModule, IonInput], template: ` <ion-input [formControl]="props.control" type="text" [placeholder]="props.placeholder" /> `, 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"] }]
+        }], ctorParameters: () => [], propDecorators: { props: [{
+                type: Input
+            }] } });
+
+class CodeDisplayComponent {
+    constructor(cdr) {
+        this.cdr = cdr;
+        this.toast = inject(ToastController);
+        this.langService = inject(LangService);
+        this.selectedTab = 0;
+    }
+    ngOnChanges(changes) {
+        if (changes['code'] || changes['language'] || changes['tabs']) {
+            this.cdr.detectChanges();
+            setTimeout(() => this.highlightCode());
+        }
+    }
+    ngAfterViewInit() {
+        setTimeout(() => this.highlightCode());
+    }
+    selectTab(i) {
+        this.selectedTab = i;
+        this.cdr.detectChanges();
+        setTimeout(() => this.highlightCode());
+    }
+    highlightCode() {
+        if (this.codeElement) {
+            const code = this.props.tabs.length > 0 ? this.props.tabs[this.selectedTab]?.code : this.props.code;
+            this.codeElement.nativeElement.textContent = code || '';
+            Prism.highlightElement(this.codeElement.nativeElement);
+        }
+    }
+    async copyToClipboard() {
+        try {
+            const code = this.props.tabs.length > 0 ? this.props.tabs[this.selectedTab]?.code : this.props.code;
+            await Clipboard.write({ string: code || '' });
+            const copiedMessage = this.langService.getText('_global', 'copied', '¡Copiado al portapapeles!');
+            this.presentToast(copiedMessage);
+        }
+        catch (error) {
+            console.error('Error al copiar al portapapeles:', error);
+        }
+    }
+    async presentToast(message) {
+        const toast = await this.toast.create({
+            message: message,
+            duration: 2000,
+            position: 'bottom',
+            color: 'dark',
+        });
+        toast.present();
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: CodeDisplayComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: CodeDisplayComponent, isStandalone: true, selector: "val-code-display", inputs: { props: "props" }, viewQueries: [{ propertyName: "codeElement", first: true, predicate: ["codeElement"], descendants: true }], usesOnChanges: true, ngImport: i0, template: `
+    <div class="code-viewer-container">
+      <div class="tab-bar">
+        <div
+          class="tab"
+          *ngFor="let tab of props.tabs; let i = index"
+          [class.active]="i === selectedTab"
+          (click)="selectTab(i)"
+        >
+          <span class="tab-label">{{ tab.label }}</span>
+        </div>
+      </div>
+      <div class="code-content">
+        <!-- <span class="language-badge">{{ props.tabs[selectedTab]?.language || props.language }}</span> -->
+        <ion-button fill="clear" class="copy-button" (click)="copyToClipboard()">
+          <ion-icon name="copy-outline"></ion-icon>
+        </ion-button>
+        <pre><code [class]="'language-' + (props.tabs[selectedTab]?.language || props.language)" #codeElement></code></pre>
+      </div>
+    </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)}.code-viewer-container{background-color:#fff;border-radius:24px;overflow:hidden;box-shadow:0 2px 4px #0000000d;border:1px solid #f2f6f7;position:relative;min-width:320px;max-width:100%}.tab-bar{display:flex;background:#f6f9fa;border-bottom:1px solid #f2f6f7;gap:2px;overflow-x:auto;overflow-y:hidden;scrollbar-width:thin;scrollbar-color:#e0e0e0 #f6f9fa;-webkit-overflow-scrolling:touch;max-width:100%;font-size:12px}.tab-bar::-webkit-scrollbar{height:6px;background:#f6f9fa}.tab-bar::-webkit-scrollbar-thumb{background:#e0e0e0;border-radius:4px}.tab{padding:10px 18px 8px;font-family:Roboto Mono,monospace;font-size:.95em;color:#899396;cursor:pointer;border-radius:8px 8px 0 0;background:transparent;transition:background .2s,color .2s;margin-bottom:-1px;border:1px solid transparent;border-bottom:none}.tab:hover{background:#e8eef2}.tab.active{background:#fff;color:#19422d;border:1px solid #f2f6f7;border-bottom:1px solid #ffffff;z-index:2}.tab-label{font-weight:500}.code-content{overflow-x:auto;overflow-y:auto;max-height:30rem;min-height:5rem;background:#fff;position:relative}.language-badge{position:absolute;top:15px;left:15px;background:#f6f9fa;color:#899396;font-family:Roboto Mono,monospace;font-size:.8em;font-weight:500;border-radius:6px;padding:2px 8px;z-index:3;pointer-events:none;text-transform:uppercase}.copy-button{position:absolute;top:10px;right:15px;z-index:10;--padding-start: 2px;--padding-end: 2px;--padding-top: 2px;--padding-bottom: 2px;min-width:28px;min-height:28px;height:28px;width:28px;color:var(--ion-color-primary);background:#ffffffb3;border-radius:6px;box-shadow:0 1px 4px #0000000d;display:flex;align-items:center;justify-content:center;transition:background .2s ease}.copy-button:hover{background:#ffffffe6}.copy-button ion-icon{font-size:1.2em;margin:0}pre{margin:0;padding:0;background-color:transparent;min-width:100%;min-height:100%;white-space:pre;word-break:normal;font-family:Roboto Mono,monospace}code{font-family:Roboto Mono,monospace;font-size:.9em;line-height:1.5;display:block;white-space:inherit;word-break:normal}@media (max-width: 600px){.code-viewer-container{border-radius:24px}.tab-bar{font-size:11px}.language-badge{font-size:.7em;padding:1px 6px;top:10px;left:10px}.copy-button{top:10px;right:10px}.code-content{max-height:20rem}code{font-size:.7em}}@media (min-width: 600px){code{font-size:.8em}}@media (prefers-color-scheme: dark){.code-viewer-container{background-color:#21252b;box-shadow:0 4px 15px #0009;border:1px solid #3b4048}.tab-bar{background:#1a1a1a;border-bottom:1px solid #3b4048;scrollbar-color:#3b4048 #1a1a1a}.tab-bar::-webkit-scrollbar{background:#1a1a1a}.tab-bar::-webkit-scrollbar-thumb{background:#3b4048}.tab{color:#8b949e}.tab:hover{background:#21252b}.tab.active{background:#282c34;color:#c9d1d9;border:1px solid #3b4048;border-bottom:1px solid #282c34}.code-content{background:#161b22}.language-badge{background:#3e4451;color:#8b949e}.copy-button{background:#0006}.copy-button:hover{background:#0009}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "component", type: IonIcon, selector: "ion-icon", inputs: ["color", "flipRtl", "icon", "ios", "lazy", "md", "mode", "name", "sanitize", "size", "src"] }, { 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"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: CodeDisplayComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'val-code-display', standalone: true, imports: [CommonModule, IonIcon, IonButton], template: `
+    <div class="code-viewer-container">
+      <div class="tab-bar">
+        <div
+          class="tab"
+          *ngFor="let tab of props.tabs; let i = index"
+          [class.active]="i === selectedTab"
+          (click)="selectTab(i)"
+        >
+          <span class="tab-label">{{ tab.label }}</span>
+        </div>
+      </div>
+      <div class="code-content">
+        <!-- <span class="language-badge">{{ props.tabs[selectedTab]?.language || props.language }}</span> -->
+        <ion-button fill="clear" class="copy-button" (click)="copyToClipboard()">
+          <ion-icon name="copy-outline"></ion-icon>
+        </ion-button>
+        <pre><code [class]="'language-' + (props.tabs[selectedTab]?.language || props.language)" #codeElement></code></pre>
+      </div>
+    </div>
+  `, 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)}.code-viewer-container{background-color:#fff;border-radius:24px;overflow:hidden;box-shadow:0 2px 4px #0000000d;border:1px solid #f2f6f7;position:relative;min-width:320px;max-width:100%}.tab-bar{display:flex;background:#f6f9fa;border-bottom:1px solid #f2f6f7;gap:2px;overflow-x:auto;overflow-y:hidden;scrollbar-width:thin;scrollbar-color:#e0e0e0 #f6f9fa;-webkit-overflow-scrolling:touch;max-width:100%;font-size:12px}.tab-bar::-webkit-scrollbar{height:6px;background:#f6f9fa}.tab-bar::-webkit-scrollbar-thumb{background:#e0e0e0;border-radius:4px}.tab{padding:10px 18px 8px;font-family:Roboto Mono,monospace;font-size:.95em;color:#899396;cursor:pointer;border-radius:8px 8px 0 0;background:transparent;transition:background .2s,color .2s;margin-bottom:-1px;border:1px solid transparent;border-bottom:none}.tab:hover{background:#e8eef2}.tab.active{background:#fff;color:#19422d;border:1px solid #f2f6f7;border-bottom:1px solid #ffffff;z-index:2}.tab-label{font-weight:500}.code-content{overflow-x:auto;overflow-y:auto;max-height:30rem;min-height:5rem;background:#fff;position:relative}.language-badge{position:absolute;top:15px;left:15px;background:#f6f9fa;color:#899396;font-family:Roboto Mono,monospace;font-size:.8em;font-weight:500;border-radius:6px;padding:2px 8px;z-index:3;pointer-events:none;text-transform:uppercase}.copy-button{position:absolute;top:10px;right:15px;z-index:10;--padding-start: 2px;--padding-end: 2px;--padding-top: 2px;--padding-bottom: 2px;min-width:28px;min-height:28px;height:28px;width:28px;color:var(--ion-color-primary);background:#ffffffb3;border-radius:6px;box-shadow:0 1px 4px #0000000d;display:flex;align-items:center;justify-content:center;transition:background .2s ease}.copy-button:hover{background:#ffffffe6}.copy-button ion-icon{font-size:1.2em;margin:0}pre{margin:0;padding:0;background-color:transparent;min-width:100%;min-height:100%;white-space:pre;word-break:normal;font-family:Roboto Mono,monospace}code{font-family:Roboto Mono,monospace;font-size:.9em;line-height:1.5;display:block;white-space:inherit;word-break:normal}@media (max-width: 600px){.code-viewer-container{border-radius:24px}.tab-bar{font-size:11px}.language-badge{font-size:.7em;padding:1px 6px;top:10px;left:10px}.copy-button{top:10px;right:10px}.code-content{max-height:20rem}code{font-size:.7em}}@media (min-width: 600px){code{font-size:.8em}}@media (prefers-color-scheme: dark){.code-viewer-container{background-color:#21252b;box-shadow:0 4px 15px #0009;border:1px solid #3b4048}.tab-bar{background:#1a1a1a;border-bottom:1px solid #3b4048;scrollbar-color:#3b4048 #1a1a1a}.tab-bar::-webkit-scrollbar{background:#1a1a1a}.tab-bar::-webkit-scrollbar-thumb{background:#3b4048}.tab{color:#8b949e}.tab:hover{background:#21252b}.tab.active{background:#282c34;color:#c9d1d9;border:1px solid #3b4048;border-bottom:1px solid #282c34}.code-content{background:#161b22}.language-badge{background:#3e4451;color:#8b949e}.copy-button{background:#0006}.copy-button:hover{background:#0009}}\n"] }]
+        }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }], propDecorators: { codeElement: [{
+                type: ViewChild,
+                args: ['codeElement']
+            }], props: [{
+                type: Input
+            }] } });
+
+class ActionHeaderComponent {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: ActionHeaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: ActionHeaderComponent, isStandalone: true, selector: "val-action-header", inputs: { props: "props" }, ngImport: i0, template: `
+    <section class="header-content-container">
+      <val-display [props]="props.title" />
+      <val-button [props]="props.action" />
+    </section>
+  `, isInline: true, styles: [".header-content-container{width:100%;display:flex;align-items:center;justify-content:space-between}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: DisplayComponent, selector: "val-display", inputs: ["props"] }, { kind: "component", type: ButtonComponent, selector: "val-button", inputs: ["props"], outputs: ["onClick"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: ActionHeaderComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'val-action-header', standalone: true, imports: [CommonModule, DisplayComponent, ButtonComponent], template: `
+    <section class="header-content-container">
+      <val-display [props]="props.title" />
+      <val-button [props]="props.action" />
+    </section>
+  `, styles: [".header-content-container{width:100%;display:flex;align-items:center;justify-content:space-between}\n"] }]
+        }], propDecorators: { props: [{
+                type: Input
+            }] } });
+
+class PillComponent {
+    constructor() {
+        this.theme = inject(ThemeService);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: PillComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: PillComponent, isStandalone: true, selector: "val-pill", inputs: { props: "props" }, ngImport: i0, template: `
+    <div
+      [id]="props.token"
+      class="fun-card"
+      [class.bordered]="props.bordered"
+      [class.hoverable]="props.hoverable"
+      [ngStyle]="{
+        background: theme.IsDark ? 'var(--ion-background-color)' : props.background,
+      }"
     >
-      @for (o of props.options; track o.id) {
-        <ion-select-option [value]="o.id">{{ o.name }}</ion-select-option>
-      }
-    </ion-select>
-  `, isInline: true, styles: [""], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: IonSelect, selector: "ion-select", inputs: ["cancelText", "color", "compareWith", "disabled", "expandedIcon", "fill", "interface", "interfaceOptions", "justify", "label", "labelPlacement", "mode", "multiple", "name", "okText", "placeholder", "selectedText", "shape", "toggleIcon", "value"] }, { kind: "component", type: IonSelectOption, selector: "ion-select-option", inputs: ["disabled", "value"] }] }); }
+      <val-action-header style="width: 100%;" [props]="props.content" />
+    </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)}.fun-card{z-index:0;position:relative;margin-bottom:8px;cursor:pointer;background:var(--ion-card-background, var(--ion-item-background, var(--ion-background-color, #fff)));display:flex;border-radius:48px;align-items:start;padding:8px 8px 8px 24px;flex-direction:column;box-shadow:0 .25rem .75rem #12195412}.fun-card.hoverable{transition:transform .3s ease,box-shadow .3s ease}.fun-card.hoverable:hover{transform:scale(1.01);box-shadow:.1875rem .625rem .5rem #1219541a}.bordered{border:.0625rem solid var(--ion-color-medium)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: ActionHeaderComponent, selector: "val-action-header", inputs: ["props"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: SearchSelectorComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: PillComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'val-select-input', standalone: true, imports: [ReactiveFormsModule, IonSelect, IonSelectOption], template: `
-    <ion-select
-      [formControl]="props.control"
-      [label]="props.label"
-      [interfaceOptions]="customModalOptions"
-      interface="modal"
-      [placeholder]="[props.placeholder]"
-      cancelText="Cancelar"
-      okText="Ok"
+            args: [{ selector: 'val-pill', standalone: true, imports: [CommonModule, ActionHeaderComponent], template: `
+    <div
+      [id]="props.token"
+      class="fun-card"
+      [class.bordered]="props.bordered"
+      [class.hoverable]="props.hoverable"
+      [ngStyle]="{
+        background: theme.IsDark ? 'var(--ion-background-color)' : props.background,
+      }"
     >
-      @for (o of props.options; track o.id) {
-        <ion-select-option [value]="o.id">{{ o.name }}</ion-select-option>
-      }
-    </ion-select>
-  ` }]
-        }], ctorParameters: () => [], propDecorators: { props: [{
+      <val-action-header style="width: 100%;" [props]="props.content" />
+    </div>
+  `, 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)}.fun-card{z-index:0;position:relative;margin-bottom:8px;cursor:pointer;background:var(--ion-card-background, var(--ion-item-background, var(--ion-background-color, #fff)));display:flex;border-radius:48px;align-items:start;padding:8px 8px 8px 24px;flex-direction:column;box-shadow:0 .25rem .75rem #12195412}.fun-card.hoverable{transition:transform .3s ease,box-shadow .3s ease}.fun-card.hoverable:hover{transform:scale(1.01);box-shadow:.1875rem .625rem .5rem #1219541a}.bordered{border:.0625rem solid var(--ion-color-medium)}\n"] }]
+        }], propDecorators: { props: [{
                 type: Input
             }] } });
 
-class SelectSearchComponent {
+class CommandDisplayComponent {
     constructor() {
-        this.labelProperty = 'name';
-        this.valueProperty = 'id';
-        this.placeholder = '';
+        this.toast = inject(ToastController);
         this.langService = inject(LangService);
-        this.changeDetector = inject(ChangeDetectorRef);
-        // Classic Angular properties
-        this.isOpen = false;
-        this.searchTerm = '';
-        this.selectedValue = null;
-        this.displayValue = '';
-        this.filteredOptions = [];
-        this.placeholder = this.langService.getText('_global', 'selectOption', 'Seleccione una opción');
-        // Close dropdown when clicking outside
-        document.addEventListener('click', this.handleClickOutside.bind(this));
-    }
-    ngOnInit() {
-        this.applyDefaultValue();
-        this.initializeOptions();
-        this.syncSelectedValue();
-        this.updateDisplayValue();
-    }
-    ngOnDestroy() {
-        document.removeEventListener('click', this.handleClickOutside.bind(this));
     }
-    ngOnChanges(changes) {
-        if (changes['props'] && this.props) {
-            this.initializeOptions();
-            this.syncSelectedValue();
-            this.updateDisplayValue();
-            this.changeDetector.detectChanges();
+    async copyCommand() {
+        if (this.props.text) {
+            await Clipboard.write({
+                string: this.props.text,
+            });
+            const copiedMessage = this.langService.getText('_global', 'copied', '¡Copiado al portapapeles!');
+            this.presentToast(copiedMessage);
         }
     }
-    // Component methods
-    toggleDropdown(event) {
-        event.stopPropagation();
-        this.isOpen = !this.isOpen;
-        if (this.isOpen) {
-            // Focus search bar when opening if available
-            setTimeout(() => {
-                const searchbar = this.dropdownRef?.nativeElement?.querySelector('ion-searchbar');
-                if (searchbar) {
-                    searchbar.setFocus();
-                }
-            }, 100);
-        }
+    async presentToast(message) {
+        const toast = await this.toast.create({
+            message: message,
+            duration: 2000,
+            position: 'bottom',
+            color: 'dark',
+        });
+        toast.present();
     }
-    onSearch(event) {
-        this.searchTerm = event.detail.value || '';
-        this.filterOptions();
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: CommandDisplayComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: CommandDisplayComponent, isStandalone: true, selector: "val-command-display", inputs: { props: "props" }, ngImport: i0, template: `
+    <div class="command-container">
+      <div class="command-text">$ {{ props.text }}</div>
+      <ion-icon name="copy-outline" class="copy-icon" (click)="copyCommand()"></ion-icon>
+    </div>
+  `, isInline: true, styles: [".command-container{display:flex;align-items:center;justify-content:space-between;background-color:var(--ion-color-light, #f2f2f2);border-radius:24px;padding:12px 16px;box-shadow:0 2px 4px #0000001a}.command-text{flex-grow:1;font-family:monospace;font-size:.8rem;color:var(--ion-color-dark, #333);margin-right:10px}.copy-icon{font-size:1.3rem;color:var(--ion-color-medium, #92949c);cursor:pointer;transition:color .2s ease-in-out}.copy-icon:hover{color:var(--ion-color-primary, #3880ff)}@media (min-width: 600px){.command-text,.copy-icon{font-size:1.2rem}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: IonIcon, selector: "ion-icon", inputs: ["color", "flipRtl", "icon", "ios", "lazy", "md", "mode", "name", "sanitize", "size", "src"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: CommandDisplayComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'val-command-display', standalone: true, imports: [CommonModule, IonIcon], template: `
+    <div class="command-container">
+      <div class="command-text">$ {{ props.text }}</div>
+      <ion-icon name="copy-outline" class="copy-icon" (click)="copyCommand()"></ion-icon>
+    </div>
+  `, styles: [".command-container{display:flex;align-items:center;justify-content:space-between;background-color:var(--ion-color-light, #f2f2f2);border-radius:24px;padding:12px 16px;box-shadow:0 2px 4px #0000001a}.command-text{flex-grow:1;font-family:monospace;font-size:.8rem;color:var(--ion-color-dark, #333);margin-right:10px}.copy-icon{font-size:1.3rem;color:var(--ion-color-medium, #92949c);cursor:pointer;transition:color .2s ease-in-out}.copy-icon:hover{color:var(--ion-color-primary, #3880ff)}@media (min-width: 600px){.command-text,.copy-icon{font-size:1.2rem}}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { props: [{
+                type: Input
+            }] } });
+
+// src/app/layout/layout.component.ts (solo la parte de styles)
+class InfoComponent {
+    constructor() {
+        this.icon = inject(IconService);
     }
-    selectOption(option) {
-        const value = String(option[this.valueProperty]);
-        this.selectedValue = value;
-        this.isOpen = false;
-        this.searchTerm = '';
-        this.updateDisplayValue();
-        this.initializeOptions(); // Reset filter
-        // Update form control
-        if (this.props?.control) {
-            this.props.control.setValue(value);
-            this.props.control.markAsDirty();
-            this.props.control.markAsTouched();
-        }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: InfoComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.12", type: InfoComponent, isStandalone: true, selector: "val-info", inputs: { props: "props" }, ngImport: i0, template: `
+    @if (props.image) {
+      <val-image style="display: contents;" [props]="props.image" />
     }
-    isSelected(option) {
-        return String(this.selectedValue) === String(option[this.valueProperty]);
+    <val-title-block style="display: block;margin-top: 16px;" [props]="props.title" />
+
+    @if (props.link) {
+      <val-link [props]="props.link" />
     }
-    trackByFn(_index, option) {
-        return option[this.valueProperty];
+
+    @if (props.actions) {
+      <val-button-group [props]="props.actions" />
     }
-    handleClickOutside(event) {
-        if (this.isOpen &&
-            !this.mainInputRef?.nativeElement?.contains(event.target) &&
-            !this.dropdownRef?.nativeElement?.contains(event.target)) {
-            this.isOpen = false;
-            this.searchTerm = '';
-            this.initializeOptions();
-        }
+  `, isInline: true, styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: LinkComponent, selector: "val-link", inputs: ["props"], outputs: ["onClick"] }, { kind: "component", type: TitleBlockComponent, selector: "val-title-block", inputs: ["props"] }, { kind: "component", type: ImageComponent, selector: "val-image", inputs: ["props"] }, { kind: "component", type: ButtonGroupComponent, selector: "val-button-group", inputs: ["props"], outputs: ["onClick"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: InfoComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'val-info', standalone: true, imports: [CommonModule, LinkComponent, TitleBlockComponent, ImageComponent, ButtonGroupComponent], template: `
+    @if (props.image) {
+      <val-image style="display: contents;" [props]="props.image" />
     }
-    getOptionByValue(value) {
-        return this.filteredOptions.find(option => String(option[this.valueProperty]) === String(value));
+    <val-title-block style="display: block;margin-top: 16px;" [props]="props.title" />
+
+    @if (props.link) {
+      <val-link [props]="props.link" />
     }
-    initializeOptions() {
-        this.filteredOptions = this.props?.options || [];
+
+    @if (props.actions) {
+      <val-button-group [props]="props.actions" />
     }
-    filterOptions() {
-        if (!this.searchTerm) {
-            this.initializeOptions();
-            return;
+  ` }]
+        }], propDecorators: { props: [{
+                type: Input
+            }] } });
+
+class PlainCodeBoxComponent {
+    constructor() {
+        this.toast = inject(ToastController);
+        this.cdr = inject(ChangeDetectorRef);
+        this.langService = inject(LangService);
+        this.props = { lines: [] };
+    }
+    ngOnChanges(changes) {
+        if (changes['props'] && !changes['props'].firstChange) {
+            this.cdr.detectChanges();
+            setTimeout(() => this.highlightCode());
         }
-        const search = replaceSpecialChars(this.searchTerm.toLowerCase());
-        this.filteredOptions = (this.props?.options || []).filter(option => {
-            const label = option[this.labelProperty]
-                ? replaceSpecialChars(String(option[this.labelProperty]).toLowerCase())
-                : '';
-            const value = option[this.valueProperty]
-                ? replaceSpecialChars(String(option[this.valueProperty]).toLowerCase())
-                : '';
-            return label.includes(search) || value.includes(search);
-        });
     }
-    updateDisplayValue() {
-        if (!this.selectedValue) {
-            this.displayValue = '';
-            return;
+    ngAfterViewInit() {
+        setTimeout(() => this.highlightCode());
+    }
+    highlightCode() {
+        if (this.codeBlock && this.props.lines && this.props.lines.length > 0) {
+            Prism.highlightElement(this.codeBlock.nativeElement);
         }
-        const option = this.getOptionByValue(this.selectedValue);
-        this.displayValue = option ? option[this.labelProperty] : '';
     }
-    applyDefaultValue() {
-        if (this.props) {
-            applyDefaultValueToControl(this.props);
+    async copyCode() {
+        const fullCode = this.props.lines.map(line => line.text).join('\n');
+        if (fullCode) {
+            await Clipboard.write({
+                string: fullCode,
+            });
+            const copiedMessage = this.langService.getText('_global', 'copied', '¡Copiado al portapapeles!');
+            this.presentToast(copiedMessage);
         }
     }
-    debugOptions() {
-        console.log('[SelectSearch] DEBUG CLICK:', {
-            props: this.props,
-            filteredOptions: this.filteredOptions,
-            searchTerm: this.searchTerm,
-            propsOptions: this.props?.options,
-            displayValue: this.displayValue,
-            selectedValue: this.selectedValue,
-            isOpen: this.isOpen
+    async presentToast(message) {
+        const toast = await this.toast.create({
+            message: message,
+            duration: 2000,
+            position: 'bottom',
+            color: 'dark',
         });
+        toast.present();
     }
-    syncSelectedValue() {
-        if (this.props?.control?.value) {
-            this.selectedValue = String(this.props.control.value);
-        }
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: SelectSearchComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: SelectSearchComponent, isStandalone: true, selector: "val-select-search", inputs: { props: "props", labelProperty: "labelProperty", valueProperty: "valueProperty", placeholder: "placeholder" }, viewQueries: [{ propertyName: "dropdownRef", first: true, predicate: ["dropdown"], descendants: true }, { propertyName: "mainInputRef", first: true, predicate: ["mainInput"], descendants: true }], usesOnChanges: true, ngImport: i0, template: `
-    <div class="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
-    >
-      <!-- Debug button -->
-      <div class="search-container" style="background: red; color: white; padding: 4px;">
-        <button (click)="debugOptions()">DEBUG: {{ filteredOptions.length }} opciones</button>
-      </div>
-      
-      <!-- Search bar -->
-      <div class="search-container" *ngIf="props?.options && props.options.length > 5">
-        <ion-searchbar
-          #searchbar
-          [placeholder]="'Buscar'"
-          (ionInput)="onSearch($event)"
-          [value]="searchTerm"
-          show-clear-button="focus"
-          [debounce]="200"
-        ></ion-searchbar>
-      </div>
-      
-      <!-- Options list -->
-      <div class="options-container">
-        <ion-list class="options-list">
-          <ion-item 
-            *ngFor="let option of filteredOptions; trackBy: trackByFn" 
-            button 
-            (click)="selectOption(option)"
-            class="option-item"
-          >
-            <ion-label>{{ option[labelProperty] }}</ion-label>
-            <ion-icon 
-              *ngIf="isSelected(option)" 
-              name="checkmark-outline" 
-              slot="end" 
-              color="primary"
-            ></ion-icon>
-          </ion-item>
-          
-          <!-- 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' }}
-              <!-- Debug info -->
-              <br><small>Debug: {{ filteredOptions.length }} opciones | Props: {{ !!props }} | Search: "{{ searchTerm }}"</small>
-            </ion-label>
-          </ion-item>
-        </ion-list>
-      </div>
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: PlainCodeBoxComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: PlainCodeBoxComponent, isStandalone: true, selector: "val-plain-code-box", inputs: { props: "props" }, viewQueries: [{ propertyName: "codeBlock", first: true, predicate: ["codeBlock"], descendants: true }], usesOnChanges: true, ngImport: i0, template: `
+    <div class="code-box-container">
+      <ion-button *ngIf="props.showCopyButton !== false" fill="clear" class="copy-button" (click)="copyCode()">
+        <ion-icon name="copy-outline"></ion-icon>
+      </ion-button>
+      <pre><code [class]="'language-' + (props.language || 'bash')" #codeBlock><ng-container *ngFor="let line of props.lines; let i = index"><span [class]="line.type ? 'line-' + line.type : 'line-normal'">{{ line.text }}</span><br *ngIf="i < props.lines.length - 1">
+</ng-container></code></pre>
     </div>
-  `, isInline: true, styles: [":host{display:block;position:relative;width:100%}.select-container{position:relative;display:flex;align-items:center;cursor:pointer}.select-container .main-input{flex:1;cursor:pointer}.select-container .main-input.is-open{--border-color: var(--ion-color-primary)}.select-container .dropdown-icon{position:absolute;right:12px;font-size:16px;color:var(--ion-color-medium);transition:transform .2s ease;pointer-events:none;z-index:2}.select-container .dropdown-icon.rotated{transform:rotate(180deg)}.dropdown-overlay{position:absolute;top:100%;left:0;right:0;background:var(--ion-background-color);border:1px solid var(--ion-color-light);border-radius:8px;box-shadow:0 4px 16px #0000001a;z-index:1000;max-height:300px;opacity:0;transform:translateY(-8px);pointer-events:none;transition:all .2s ease}.dropdown-overlay.visible{opacity:1;transform:translateY(4px);pointer-events:all}.search-container{padding:12px;border-bottom:1px solid var(--ion-color-light)}.search-container ion-searchbar{--background: var(--ion-color-light);--border-radius: 8px;--box-shadow: none;--padding-start: 12px;--padding-end: 12px;height:40px}.options-container{max-height:240px;overflow-y:auto}.options-container .options-list{padding:0}.options-container .option-item{--padding-start: 16px;--padding-end: 16px;--min-height: 48px;cursor:pointer}.options-container .option-item:hover{--background: var(--ion-color-light)}.options-container .option-item ion-label{font-size:16px;line-height:1.4}.options-container .option-item ion-icon{font-size:20px}.options-container .no-results{--padding-start: 16px;--padding-end: 16px;--min-height: 48px;text-align:center}.options-container .no-results ion-label{font-style:italic;font-size:14px}@media (max-width: 768px){.dropdown-overlay{max-height:250px}.options-container{max-height:200px}}@media (prefers-color-scheme: dark){.dropdown-overlay{box-shadow:0 4px 16px #0000004d}}.option-item:focus-within{--background: var(--ion-color-primary-tint);outline:2px solid var(--ion-color-primary);outline-offset:-2px}.option-item{transition:background-color .15s ease}.dropdown-icon{transition:transform .2s cubic-bezier(.4,0,.2,1)}\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.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.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"] }] }); }
+  `, isInline: true, styles: [".code-box-container{position:relative;background-color:#282c34;border-radius:16px;overflow:hidden;box-shadow:0 4px 15px #0009;margin:0}@media (prefers-color-scheme: light){.code-box-container{background-color:#fff;box-shadow:0 2px 4px #0000001a}}.copy-button{position:absolute;top:8px;right:8px;z-index:10;--padding-start: 2px;--padding-end: 2px;--padding-top: 2px;--padding-bottom: 2px;min-width:28px;min-height:28px;height:28px;width:28px;color:#61afef;background:#0006;border-radius:6px;box-shadow:0 1px 4px #0000000d;display:flex;align-items:center;justify-content:center;transition:background .2s ease,color .2s ease}.copy-button:hover{background:#00000080;color:#8cc4ff}.copy-button ion-icon{font-size:1.2em;margin:0}@media (prefers-color-scheme: light){.copy-button{color:var(--ion-color-primary, #007bff);background:#ffffffb3}.copy-button:hover{background:#ffffffe6;color:var(--ion-color-primary-tint, #3880ff)}}pre{margin:0;padding:0;background-color:transparent;min-width:100%;min-height:100%;white-space:pre-wrap;word-break:normal;font-family:Roboto Mono,monospace}code{font-family:Roboto Mono,monospace;font-size:.9em;line-height:1.6;display:block;white-space:inherit;word-break:inherit;color:#abb2bf;margin:0}@media (prefers-color-scheme: light){code{color:#333}}code .line-normal{color:#abb2bf}@media (prefers-color-scheme: light){code .line-normal{color:#333}}code .line-command{color:#c678dd}@media (prefers-color-scheme: light){code .line-command{color:var(--ion-color-primary, #3880ff)}}code .line-error{color:#e06c75}@media (prefers-color-scheme: light){code .line-error{color:var(--ion-color-danger, #eb445a)}}code .line-success{color:#98c379}@media (prefers-color-scheme: light){code .line-success{color:var(--ion-color-success, #2dd36f)}}code .token.comment{color:#5c6370}code .token.selector,code .token.string{color:#98c379}code .token.punctuation{color:#abb2bf}code .token.operator{color:#c678dd}code .token.boolean,code .token.number{color:#d19a66}code .token.function{color:#61afef}code .token.keyword{color:#c678dd}code .token.class-name{color:#e6c07b}code .token.tag{color:#e06c75}code .token.attr-name{color:#d19a66}code .token.attr-value{color:#98c379}code .token.property{color:#56b6c2}code .token.variable{color:#e06c75}@media (max-width: 600px){.code-box-container{border-radius:16px}.copy-button{top:6px;right:6px;min-width:24px;min-height:24px;height:24px;width:24px}.copy-button ion-icon{font-size:1em}pre{padding:0;margin:0}code{font-size:.8em;line-height:1.5;margin:0}}@media (min-width: 601px) and (max-width: 1024px){code{font-size:.9em}}@media (min-width: 1025px){code{font-size:1em}}\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: "component", type: IonIcon, selector: "ion-icon", inputs: ["color", "flipRtl", "icon", "ios", "lazy", "md", "mode", "name", "sanitize", "size", "src"] }, { 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"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: SelectSearchComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: PlainCodeBoxComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'val-select-search', standalone: true, imports: [CommonModule, IonicModule, FormsModule, ReactiveFormsModule], template: `
-    <div class="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
-    >
-      <!-- Debug button -->
-      <div class="search-container" style="background: red; color: white; padding: 4px;">
-        <button (click)="debugOptions()">DEBUG: {{ filteredOptions.length }} opciones</button>
-      </div>
-      
-      <!-- Search bar -->
-      <div class="search-container" *ngIf="props?.options && props.options.length > 5">
-        <ion-searchbar
-          #searchbar
-          [placeholder]="'Buscar'"
-          (ionInput)="onSearch($event)"
-          [value]="searchTerm"
-          show-clear-button="focus"
-          [debounce]="200"
-        ></ion-searchbar>
-      </div>
-      
-      <!-- Options list -->
-      <div class="options-container">
-        <ion-list class="options-list">
-          <ion-item 
-            *ngFor="let option of filteredOptions; trackBy: trackByFn" 
-            button 
-            (click)="selectOption(option)"
-            class="option-item"
-          >
-            <ion-label>{{ option[labelProperty] }}</ion-label>
-            <ion-icon 
-              *ngIf="isSelected(option)" 
-              name="checkmark-outline" 
-              slot="end" 
-              color="primary"
-            ></ion-icon>
-          </ion-item>
-          
-          <!-- 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' }}
-              <!-- Debug info -->
-              <br><small>Debug: {{ filteredOptions.length }} opciones | Props: {{ !!props }} | Search: "{{ searchTerm }}"</small>
-            </ion-label>
-          </ion-item>
-        </ion-list>
-      </div>
+            args: [{ selector: 'val-plain-code-box', standalone: true, imports: [CommonModule, IonIcon, IonButton], template: `
+    <div class="code-box-container">
+      <ion-button *ngIf="props.showCopyButton !== false" fill="clear" class="copy-button" (click)="copyCode()">
+        <ion-icon name="copy-outline"></ion-icon>
+      </ion-button>
+      <pre><code [class]="'language-' + (props.language || 'bash')" #codeBlock><ng-container *ngFor="let line of props.lines; let i = index"><span [class]="line.type ? 'line-' + line.type : 'line-normal'">{{ line.text }}</span><br *ngIf="i < props.lines.length - 1">
+</ng-container></code></pre>
     </div>
-  `, styles: [":host{display:block;position:relative;width:100%}.select-container{position:relative;display:flex;align-items:center;cursor:pointer}.select-container .main-input{flex:1;cursor:pointer}.select-container .main-input.is-open{--border-color: var(--ion-color-primary)}.select-container .dropdown-icon{position:absolute;right:12px;font-size:16px;color:var(--ion-color-medium);transition:transform .2s ease;pointer-events:none;z-index:2}.select-container .dropdown-icon.rotated{transform:rotate(180deg)}.dropdown-overlay{position:absolute;top:100%;left:0;right:0;background:var(--ion-background-color);border:1px solid var(--ion-color-light);border-radius:8px;box-shadow:0 4px 16px #0000001a;z-index:1000;max-height:300px;opacity:0;transform:translateY(-8px);pointer-events:none;transition:all .2s ease}.dropdown-overlay.visible{opacity:1;transform:translateY(4px);pointer-events:all}.search-container{padding:12px;border-bottom:1px solid var(--ion-color-light)}.search-container ion-searchbar{--background: var(--ion-color-light);--border-radius: 8px;--box-shadow: none;--padding-start: 12px;--padding-end: 12px;height:40px}.options-container{max-height:240px;overflow-y:auto}.options-container .options-list{padding:0}.options-container .option-item{--padding-start: 16px;--padding-end: 16px;--min-height: 48px;cursor:pointer}.options-container .option-item:hover{--background: var(--ion-color-light)}.options-container .option-item ion-label{font-size:16px;line-height:1.4}.options-container .option-item ion-icon{font-size:20px}.options-container .no-results{--padding-start: 16px;--padding-end: 16px;--min-height: 48px;text-align:center}.options-container .no-results ion-label{font-style:italic;font-size:14px}@media (max-width: 768px){.dropdown-overlay{max-height:250px}.options-container{max-height:200px}}@media (prefers-color-scheme: dark){.dropdown-overlay{box-shadow:0 4px 16px #0000004d}}.option-item:focus-within{--background: var(--ion-color-primary-tint);outline:2px solid var(--ion-color-primary);outline-offset:-2px}.option-item{transition:background-color .15s ease}.dropdown-icon{transition:transform .2s cubic-bezier(.4,0,.2,1)}\n"] }]
-        }], ctorParameters: () => [], propDecorators: { dropdownRef: [{
-                type: ViewChild,
-                args: ['dropdown']
-            }], mainInputRef: [{
-                type: ViewChild,
-                args: ['mainInput']
-            }], props: [{
-                type: Input
-            }], labelProperty: [{
-                type: Input
-            }], valueProperty: [{
-                type: Input
-            }], placeholder: [{
-                type: Input
-            }] } });
-
-/**
- * val-text-input
- *
- * A text input field integrated with Angular forms.
- *
- * @example
- * <val-text-input [props]="{ control: myControl, placeholder: 'Enter text', ... }"></val-text-input>
- *
- * @input props: InputMetadata - Configuration for the input (form control, placeholder, label, etc.)
- */
-class TextInputComponent {
-    constructor() {
-        this.states = ComponentStates;
-    }
-    ngOnInit() {
-        // Apply default values on initialization
-        if (this.props?.withDefault || this.props?.value) {
-            applyDefaultValueToControl(this.props);
-        }
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: TextInputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: TextInputComponent, isStandalone: true, selector: "val-text-input", inputs: { props: "props" }, ngImport: i0, template: ` <ion-input [formControl]="props.control" type="text" [placeholder]="props.placeholder" /> `, 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: ReactiveFormsModule }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { 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"] }] }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: TextInputComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'val-text-input', standalone: true, imports: [ReactiveFormsModule, IonInput], template: ` <ion-input [formControl]="props.control" type="text" [placeholder]="props.placeholder" /> `, 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"] }]
+  `, styles: [".code-box-container{position:relative;background-color:#282c34;border-radius:16px;overflow:hidden;box-shadow:0 4px 15px #0009;margin:0}@media (prefers-color-scheme: light){.code-box-container{background-color:#fff;box-shadow:0 2px 4px #0000001a}}.copy-button{position:absolute;top:8px;right:8px;z-index:10;--padding-start: 2px;--padding-end: 2px;--padding-top: 2px;--padding-bottom: 2px;min-width:28px;min-height:28px;height:28px;width:28px;color:#61afef;background:#0006;border-radius:6px;box-shadow:0 1px 4px #0000000d;display:flex;align-items:center;justify-content:center;transition:background .2s ease,color .2s ease}.copy-button:hover{background:#00000080;color:#8cc4ff}.copy-button ion-icon{font-size:1.2em;margin:0}@media (prefers-color-scheme: light){.copy-button{color:var(--ion-color-primary, #007bff);background:#ffffffb3}.copy-button:hover{background:#ffffffe6;color:var(--ion-color-primary-tint, #3880ff)}}pre{margin:0;padding:0;background-color:transparent;min-width:100%;min-height:100%;white-space:pre-wrap;word-break:normal;font-family:Roboto Mono,monospace}code{font-family:Roboto Mono,monospace;font-size:.9em;line-height:1.6;display:block;white-space:inherit;word-break:inherit;color:#abb2bf;margin:0}@media (prefers-color-scheme: light){code{color:#333}}code .line-normal{color:#abb2bf}@media (prefers-color-scheme: light){code .line-normal{color:#333}}code .line-command{color:#c678dd}@media (prefers-color-scheme: light){code .line-command{color:var(--ion-color-primary, #3880ff)}}code .line-error{color:#e06c75}@media (prefers-color-scheme: light){code .line-error{color:var(--ion-color-danger, #eb445a)}}code .line-success{color:#98c379}@media (prefers-color-scheme: light){code .line-success{color:var(--ion-color-success, #2dd36f)}}code .token.comment{color:#5c6370}code .token.selector,code .token.string{color:#98c379}code .token.punctuation{color:#abb2bf}code .token.operator{color:#c678dd}code .token.boolean,code .token.number{color:#d19a66}code .token.function{color:#61afef}code .token.keyword{color:#c678dd}code .token.class-name{color:#e6c07b}code .token.tag{color:#e06c75}code .token.attr-name{color:#d19a66}code .token.attr-value{color:#98c379}code .token.property{color:#56b6c2}code .token.variable{color:#e06c75}@media (max-width: 600px){.code-box-container{border-radius:16px}.copy-button{top:6px;right:6px;min-width:24px;min-height:24px;height:24px;width:24px}.copy-button ion-icon{font-size:1em}pre{padding:0;margin:0}code{font-size:.8em;line-height:1.5;margin:0}}@media (min-width: 601px) and (max-width: 1024px){code{font-size:.9em}}@media (min-width: 1025px){code{font-size:1em}}\n"] }]
         }], ctorParameters: () => [], propDecorators: { props: [{
                 type: Input
+            }], codeBlock: [{
+                type: ViewChild,
+                args: ['codeBlock']
             }] } });
 
 /**
@@ -8479,12 +7752,6 @@ class FormComponent {
             <ng-container *ngIf="f.type === types.SEARCH_SELECT">
               <val-select-search [props]="f"></val-select-search>
             </ng-container>
-            <ng-container *ngIf="f.type === types.MULTI_SELECT">
-              <val-multi-select-search [props]="f"></val-multi-select-search>
-            </ng-container>
-            <ng-container *ngIf="f.type === types.MULTI_SELECT_SIMPLE">
-              <val-multi-select-simple [props]="f"></val-multi-select-simple>
-            </ng-container>
             <val-hint [props]="f"></val-hint>
           </div>
           <val-divider [props]="{ fill: 'solid', size: 'medium', color: 'medium' }"></val-divider>
@@ -8496,7 +7763,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: ["props", "labelProperty", "valueProperty", "placeholder"] }, { kind: "component", type: MultiSelectSearchComponent, selector: "val-multi-select-search", inputs: ["label", "labelProperty", "valueProperty", "placeholder", "props"] }, { kind: "component", type: MultiSelectSimpleComponent, selector: "val-multi-select-simple", 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: SearchSelectorComponent, selector: "val-select-input", inputs: ["props"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: FormComponent, decorators: [{
             type: Component,
@@ -8521,8 +7788,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
                         PasswordInputComponent,
                         PinInputComponent,
                         SelectSearchComponent,
-                        MultiSelectSearchComponent,
-                        MultiSelectSimpleComponent,
                         SearchSelectorComponent,
                     ], template: `
     <div class="container">
@@ -8581,12 +7846,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
             <ng-container *ngIf="f.type === types.SEARCH_SELECT">
               <val-select-search [props]="f"></val-select-search>
             </ng-container>
-            <ng-container *ngIf="f.type === types.MULTI_SELECT">
-              <val-multi-select-search [props]="f"></val-multi-select-search>
-            </ng-container>
-            <ng-container *ngIf="f.type === types.MULTI_SELECT_SIMPLE">
-              <val-multi-select-simple [props]="f"></val-multi-select-simple>
-            </ng-container>
             <val-hint [props]="f"></val-hint>
           </div>
           <val-divider [props]="{ fill: 'solid', size: 'medium', color: 'medium' }"></val-divider>
@@ -9927,5 +9186,5 @@ function createContentHelper(langService, className) {
  * Generated bundle index. Do not edit.
  */
 
-export { ARTICLE_SPACING, ActionHeaderComponent, ActionType, AlertBoxComponent, ArticleBuilder, ArticleComponent, AvatarComponent, BannerComponent, BaseDefault, BoxComponent, ButtonComponent, ButtonGroupComponent, CardComponent, CardSection, CardType, CheckInputComponent, ClearDefault, ClearDefaultBlock, ClearDefaultFull, ClearDefaultRound, ClearDefaultRoundBlock, ClearDefaultRoundFull, CodeDisplayComponent, CommandDisplayComponent, CommentInputComponent, ComponentStates, ContentLoaderComponent, DateInputComponent, DisplayComponent, DividerComponent, DownloadService, EmailInputComponent, ExpandableTextComponent, FileInputComponent, FooterComponent, FormComponent, FormFooterComponent, GlobalContent, HeaderComponent, HintComponent, HourInputComponent, HrefComponent, Icon, IconComponent, IconService, ImageComponent, InAppBrowserService, InfoComponent, InputType, ItemListComponent, LANGUAGES, LangService, LanguageSelectorComponent, LayeredCardComponent, LayoutComponent, LinkComponent, LinkProcessorService, LinksCakeComponent, LocalStorageService, MOTION, MultiSelectSearchComponent, MultiSelectSimpleComponent, NavigationService, NoContentComponent, NotesBoxComponent, NumberFromToComponent, NumberInputComponent, OutlineDefault, OutlineDefaultBlock, OutlineDefaultFull, OutlineDefaultRound, OutlineDefaultRoundBlock, OutlineDefaultRoundFull, PasswordInputComponent, PillComponent, PinInputComponent, PlainCodeBoxComponent, PopoverSelectorComponent, PrimarySolidBlockButton, PrimarySolidBlockHrefButton, PrimarySolidBlockIconButton, PrimarySolidBlockIconHrefButton, PrimarySolidDefaultRoundButton, PrimarySolidDefaultRoundHrefButton, PrimarySolidDefaultRoundIconButton, PrimarySolidDefaultRoundIconHrefButton, PrimarySolidFullButton, PrimarySolidFullHrefButton, PrimarySolidFullIconButton, PrimarySolidFullIconHrefButton, PrimarySolidLargeRoundButton, PrimarySolidLargeRoundHrefButton, PrimarySolidLargeRoundIconButton, PrimarySolidLargeRoundIconHrefButton, PrimarySolidSmallRoundButton, PrimarySolidSmallRoundHrefButton, PrimarySolidSmallRoundIconButton, PrimarySolidSmallRoundIconHrefButton, ProcessLinksPipe, 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, applyDefaultValueToControl, content, createButtonProps, createContentHelper, createDisplayProps, createNumberFromToField, createReactiveContentMetadata, createTextProps, createTitleProps, extractContentConfig, extractContentConfigWithInterpolation, fromContent, fromContentWithInterpolation, fromMultipleContent, globalContentData, goToTop, interpolateContent, interpolateStaticContent, isAtEnd, maxLength, replaceSpecialChars, resolveColor, resolveInputDefaultValue, shouldUseReactiveContent, shouldUseReactiveContentWithInterpolation };
+export { ARTICLE_SPACING, ActionHeaderComponent, ActionType, AlertBoxComponent, ArticleBuilder, ArticleComponent, AvatarComponent, BannerComponent, BaseDefault, BoxComponent, ButtonComponent, ButtonGroupComponent, CardComponent, CardSection, CardType, CheckInputComponent, ClearDefault, ClearDefaultBlock, ClearDefaultFull, ClearDefaultRound, ClearDefaultRoundBlock, ClearDefaultRoundFull, CodeDisplayComponent, CommandDisplayComponent, CommentInputComponent, ComponentStates, ContentLoaderComponent, DateInputComponent, DisplayComponent, DividerComponent, DownloadService, EmailInputComponent, ExpandableTextComponent, FileInputComponent, FooterComponent, FormComponent, FormFooterComponent, GlobalContent, HeaderComponent, HintComponent, HourInputComponent, HrefComponent, Icon, IconComponent, IconService, ImageComponent, InAppBrowserService, InfoComponent, InputType, ItemListComponent, LANGUAGES, LangService, LanguageSelectorComponent, LayeredCardComponent, LayoutComponent, LinkComponent, LinkProcessorService, LinksCakeComponent, LocalStorageService, MOTION, NavigationService, NoContentComponent, NotesBoxComponent, NumberFromToComponent, NumberInputComponent, OutlineDefault, OutlineDefaultBlock, OutlineDefaultFull, OutlineDefaultRound, OutlineDefaultRoundBlock, OutlineDefaultRoundFull, PasswordInputComponent, PillComponent, PinInputComponent, PlainCodeBoxComponent, PopoverSelectorComponent, PrimarySolidBlockButton, PrimarySolidBlockHrefButton, PrimarySolidBlockIconButton, PrimarySolidBlockIconHrefButton, PrimarySolidDefaultRoundButton, PrimarySolidDefaultRoundHrefButton, PrimarySolidDefaultRoundIconButton, PrimarySolidDefaultRoundIconHrefButton, PrimarySolidFullButton, PrimarySolidFullHrefButton, PrimarySolidFullIconButton, PrimarySolidFullIconHrefButton, PrimarySolidLargeRoundButton, PrimarySolidLargeRoundHrefButton, PrimarySolidLargeRoundIconButton, PrimarySolidLargeRoundIconHrefButton, PrimarySolidSmallRoundButton, PrimarySolidSmallRoundHrefButton, PrimarySolidSmallRoundIconButton, PrimarySolidSmallRoundIconHrefButton, ProcessLinksPipe, 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, applyDefaultValueToControl, content, createButtonProps, createContentHelper, createDisplayProps, createNumberFromToField, createReactiveContentMetadata, createTextProps, createTitleProps, extractContentConfig, extractContentConfigWithInterpolation, fromContent, fromContentWithInterpolation, fromMultipleContent, globalContentData, goToTop, interpolateContent, interpolateStaticContent, isAtEnd, maxLength, replaceSpecialChars, resolveColor, resolveInputDefaultValue, shouldUseReactiveContent, shouldUseReactiveContentWithInterpolation };
 //# sourceMappingURL=valtech-components.mjs.map