valtech-components 2.0.44 → 2.0.46

package/fesm2022/valtech-components.mjs

@@ -1,3556 +0,0 @@
-import * as i0 from '@angular/core';
-import { EventEmitter, Component, Input, Output, Injectable, ViewChild, inject, InjectionToken, Inject } from '@angular/core';
-import { IonAvatar, IonCard, IonIcon, IonButton, IonSpinner, IonText, IonProgressBar, IonCardContent, IonCardHeader, IonCardTitle, IonCardSubtitle, IonCheckbox, IonButtons, IonTextarea, IonDatetime, IonDatetimeButton, IonModal, IonInput, IonRadioGroup, IonRadio, IonSearchbar, IonToolbar, IonTitle, IonFooter, IonHeader, IonList, IonListHeader, IonLabel, IonNote, IonItem, IonContent } from '@ionic/angular/standalone';
-import * as i1 from '@angular/common';
-import { CommonModule, NgIf, NgFor, NgStyle, NgClass } from '@angular/common';
-import { addIcons } from 'ionicons';
-import { addOutline, addCircleOutline, alertOutline, alertCircleOutline, arrowBackOutline, arrowForwardOutline, arrowDownOutline, checkmarkCircleOutline, ellipsisHorizontalOutline, notificationsOutline, chevronForwardOutline, chevronBackOutline } from 'ionicons/icons';
-import * as i1$1 from '@angular/forms';
-import { ReactiveFormsModule, Validators } from '@angular/forms';
-import { Router, RouterLink } from '@angular/router';
-import { Browser } from '@capacitor/browser';
-import * as i1$2 from 'ng-otp-input';
-import { NgOtpInputComponent, NgOtpInputModule } from 'ng-otp-input';
-import * as i1$3 from '@ionic/angular';
-import { BehaviorSubject } from 'rxjs';
-
-class AvatarComponent {
-    constructor() {
-        this.onClick = new EventEmitter();
-    }
-    ngOnInit() { }
-    onClickHandler() {
-        this.onClick.emit();
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: AvatarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: AvatarComponent, isStandalone: true, selector: "val-avatar", inputs: { props: "props" }, outputs: { onClick: "onClick" }, ngImport: i0, template: `
-    <ion-avatar aria-hidden="true" [class]="props.size" [class.box]="props.box" (click)="onClickHandler()">
-      <img alt="profile image" [src]="props.image || props.default" />
-    </ion-avatar>
-  `, isInline: true, styles: [".box{--border-radius: pxToRem(4)}.small{width:1.75rem;height:1.75rem}.medium{width:2.375rem;height:2.375rem}.large{width:3rem;height:3rem}\n"], dependencies: [{ kind: "component", type: IonAvatar, selector: "ion-avatar" }] }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: AvatarComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'val-avatar', standalone: true, imports: [IonAvatar], template: `
-    <ion-avatar aria-hidden="true" [class]="props.size" [class.box]="props.box" (click)="onClickHandler()">
-      <img alt="profile image" [src]="props.image || props.default" />
-    </ion-avatar>
-  `, styles: [".box{--border-radius: pxToRem(4)}.small{width:1.75rem;height:1.75rem}.medium{width:2.375rem;height:2.375rem}.large{width:3rem;height:3rem}\n"] }]
-        }], ctorParameters: () => [], propDecorators: { props: [{
-                type: Input
-            }], onClick: [{
-                type: Output
-            }] } });
-
-class BoxComponent {
-    constructor() {
-        this.onClick = new EventEmitter();
-    }
-    ngOnInit() { }
-    clickHandler() {
-        this.onClick.emit();
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: BoxComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: BoxComponent, isStandalone: true, selector: "val-box", inputs: { props: "props" }, outputs: { onClick: "onClick" }, ngImport: i0, template: `
-    <ion-card
-      class="box"
-      [color]="props.color"
-      [class.bordered]="props.bordered"
-      [class.transparent]="!props.color"
-      [class.left-border]="props.leftBorder"
-    >
-      <ion-icon *ngIf="!!props.icon" class="icon" [name]="props.icon" (click)="clickHandler()"></ion-icon>
-      <ng-content select="[body]"></ng-content>
-    </ion-card>
-  `, isInline: true, styles: [".bordered{border:.0625rem solid var(--ion-color-medium)}.box{width:100%;margin:0rem;border-radius:0rem;box-shadow:none;padding:.25rem}@media (min-width: 768px){.box{padding:.5rem}}.icon{cursor:pointer;margin:0rem;padding:0rem;position:absolute;right:.25rem;top:.25rem;font-size:1rem}@media (min-width: 768px){.icon{right:.5rem;top:.5rem;font-size:1.5rem}}.left-border{border-left:.1875rem solid #dde3ed}.left-border.small{border-width:.1875rem}.left-border.medium{border-width:.375rem}.left-border.large{border-width:.4375rem}.left-border.xlarge{border-width:.5rem}.transparent{--background: transparent}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: IonCard, selector: "ion-card", inputs: ["button", "color", "disabled", "download", "href", "mode", "rel", "routerAnimation", "routerDirection", "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: BoxComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'val-box', standalone: true, imports: [CommonModule, IonCard, IonIcon], template: `
-    <ion-card
-      class="box"
-      [color]="props.color"
-      [class.bordered]="props.bordered"
-      [class.transparent]="!props.color"
-      [class.left-border]="props.leftBorder"
-    >
-      <ion-icon *ngIf="!!props.icon" class="icon" [name]="props.icon" (click)="clickHandler()"></ion-icon>
-      <ng-content select="[body]"></ng-content>
-    </ion-card>
-  `, styles: [".bordered{border:.0625rem solid var(--ion-color-medium)}.box{width:100%;margin:0rem;border-radius:0rem;box-shadow:none;padding:.25rem}@media (min-width: 768px){.box{padding:.5rem}}.icon{cursor:pointer;margin:0rem;padding:0rem;position:absolute;right:.25rem;top:.25rem;font-size:1rem}@media (min-width: 768px){.icon{right:.5rem;top:.5rem;font-size:1.5rem}}.left-border{border-left:.1875rem solid #dde3ed}.left-border.small{border-width:.1875rem}.left-border.medium{border-width:.375rem}.left-border.large{border-width:.4375rem}.left-border.xlarge{border-width:.5rem}.transparent{--background: transparent}\n"] }]
-        }], ctorParameters: () => [], propDecorators: { props: [{
-                type: Input
-            }], onClick: [{
-                type: Output
-            }] } });
-
-const ENABLED = 'ENABLED';
-const DISABLED = 'DISABLED';
-const WORKING = 'WORKING';
-const ERROR = 'ERROR';
-const ComponentStates = { ENABLED, DISABLED, WORKING, ERROR };
-var ActionType;
-(function (ActionType) {
-    ActionType[ActionType["BROWSER_NEW_TAB"] = 0] = "BROWSER_NEW_TAB";
-    ActionType[ActionType["BROWSER_DOWNLOAD"] = 1] = "BROWSER_DOWNLOAD";
-    ActionType[ActionType["NATIVE_DOWNLOAD"] = 2] = "NATIVE_DOWNLOAD";
-    ActionType[ActionType["APP_NAVIGATION"] = 3] = "APP_NAVIGATION";
-    ActionType[ActionType["BROWSER_NAVIGATION"] = 4] = "BROWSER_NAVIGATION";
-})(ActionType || (ActionType = {}));
-var InputType;
-(function (InputType) {
-    InputType[InputType["TEXT"] = 0] = "TEXT";
-    InputType[InputType["EMAIL"] = 1] = "EMAIL";
-    InputType[InputType["PASSWORD"] = 2] = "PASSWORD";
-    InputType[InputType["COMMENT"] = 3] = "COMMENT";
-    InputType[InputType["NUMBER"] = 4] = "NUMBER";
-    InputType[InputType["PIN_CODE"] = 5] = "PIN_CODE";
-    InputType[InputType["DATE"] = 6] = "DATE";
-    InputType[InputType["HOUR"] = 7] = "HOUR";
-    InputType[InputType["CHECK"] = 8] = "CHECK";
-    InputType[InputType["RADIO"] = 9] = "RADIO";
-    InputType[InputType["SELECT"] = 10] = "SELECT";
-    InputType[InputType["FILE"] = 11] = "FILE";
-})(InputType || (InputType = {}));
-var ToolbarActionType;
-(function (ToolbarActionType) {
-    ToolbarActionType["AVATAR"] = "AVATAR";
-    ToolbarActionType["ICON"] = "ICON";
-    ToolbarActionType["IMAGE"] = "IMAGE";
-    ToolbarActionType["BUTTON"] = "BUTTON";
-})(ToolbarActionType || (ToolbarActionType = {}));
-
-class DownloadService {
-    getFileNameFromUrl(url) {
-        try {
-            const pathSegments = url.split('/');
-            const lastSegment = pathSegments[pathSegments.length - 1];
-            const fileName = decodeURIComponent(lastSegment);
-            return fileName;
-        }
-        catch (error) {
-            console.error('Error al obtener nombre de archivo: ', JSON.stringify(error));
-            return 'filename';
-        }
-    }
-    openNewTab(url) {
-        if (url) {
-            const fileName = this.getFileNameFromUrl(url);
-            const link = document.createElement('a');
-            link.href = url;
-            link.download = fileName;
-            link.target = '_blank';
-            document.body.appendChild(link);
-            link.click();
-            document.body.removeChild(link);
-        }
-        else {
-            console.error('La URL no está definida');
-        }
-    }
-    downloadLinkFromBrowser(url) {
-        console.log('trying to download file from url');
-        if (url) {
-            fetch(url)
-                .then(response => response.blob())
-                .then(blob => {
-                const url = window.URL.createObjectURL(blob);
-                const link = document.createElement('a');
-                link.href = url;
-                const fileName = this.getFileNameFromUrl(url);
-                link.download = `${+new Date()}-${fileName}`;
-                link.target = '_self';
-                link.click();
-                window.URL.revokeObjectURL(url);
-            })
-                .catch(error => {
-                console.error('Error al descargar el archivo:', JSON.stringify(error));
-            });
-        }
-        else {
-            console.error('La URL no está definida');
-        }
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: DownloadService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: DownloadService, providedIn: 'root' }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: DownloadService, decorators: [{
-            type: Injectable,
-            args: [{
-                    providedIn: 'root',
-                }]
-        }] });
-
-class ButtonComponent {
-    constructor(download) {
-        this.download = download;
-        this.states = ComponentStates;
-        this.onClick = new EventEmitter();
-    }
-    ngOnInit() { }
-    clickHandler() {
-        if (this.props.download) {
-            this.download.downloadLinkFromBrowser(this.props.download);
-        }
-        if (this.props.state === this.states.DISABLED) {
-            return;
-        }
-        this.onClick.emit(this.props.token);
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: ButtonComponent, deps: [{ token: DownloadService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: ButtonComponent, isStandalone: true, selector: "val-button", inputs: { props: "props" }, outputs: { onClick: "onClick" }, ngImport: i0, template: `
-    <ion-button
-      [type]="props.type"
-      [color]="props.color"
-      [expand]="props.expand"
-      [fill]="props.fill"
-      [size]="props.size"
-      [href]="props.href"
-      [target]="props.target"
-      [shape]="props.shape"
-      (click)="clickHandler()"
-      [disabled]="props.state === states.DISABLED"
-    >
-      <ion-icon *ngIf="props.icon" [slot]="props.icon.slot" [name]="props.icon.name"></ion-icon>
-      <ion-spinner *ngIf="props.state === states.WORKING" name="circular"></ion-spinner>
-      <ion-text *ngIf="props.state !== states.WORKING">{{ props.text }}</ion-text>
-    </ion-button>
-  `, isInline: true, styles: ["ion-button{font-family:var(--ion-default-font),Arial,sans-serif}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { 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: IonSpinner, selector: "ion-spinner", inputs: ["color", "duration", "name", "paused"] }, { kind: "component", type: IonText, selector: "ion-text", inputs: ["color", "mode"] }] }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: ButtonComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'val-button', standalone: true, imports: [CommonModule, IonButton, IonIcon, IonSpinner, IonText], template: `
-    <ion-button
-      [type]="props.type"
-      [color]="props.color"
-      [expand]="props.expand"
-      [fill]="props.fill"
-      [size]="props.size"
-      [href]="props.href"
-      [target]="props.target"
-      [shape]="props.shape"
-      (click)="clickHandler()"
-      [disabled]="props.state === states.DISABLED"
-    >
-      <ion-icon *ngIf="props.icon" [slot]="props.icon.slot" [name]="props.icon.name"></ion-icon>
-      <ion-spinner *ngIf="props.state === states.WORKING" name="circular"></ion-spinner>
-      <ion-text *ngIf="props.state !== states.WORKING">{{ props.text }}</ion-text>
-    </ion-button>
-  `, styles: ["ion-button{font-family:var(--ion-default-font),Arial,sans-serif}\n"] }]
-        }], ctorParameters: () => [{ type: DownloadService }], propDecorators: { props: [{
-                type: Input
-            }], onClick: [{
-                type: Output
-            }] } });
-
-const Icon = (name, slot) => {
-    return {
-        name,
-        slot,
-    };
-};
-/* name convention: COLOR FILL SIZE [optionals: SHAPE EXPAND ICON HREF/DOWNLOAD] TYPE */
-const BaseDefault = (text, type) => {
-    return {
-        color: 'primary',
-        state: 'ENABLED',
-        text,
-        size: 'default',
-        type,
-    };
-};
-const ClearDefault = (text, type) => {
-    return { ...BaseDefault(text, type), fill: 'clear' };
-};
-const ClearDefaultRound = (text, type) => {
-    return { ...ClearDefault(text, type), shape: 'round' };
-};
-const SolidDefault = (text, type) => {
-    return { ...BaseDefault(text, type), fill: 'solid' };
-};
-const SolidDefaultRound = (text, type) => {
-    return { ...SolidDefault(text, type), shape: 'round' };
-};
-const OutlineDefault = (text, type) => {
-    return { ...BaseDefault(text, type), fill: 'outline' };
-};
-const OutlineDefaultRound = (text, type) => {
-    return { ...OutlineDefault(text, type), shape: 'round' };
-};
-const ClearDefaultFull = (text, type) => {
-    return { ...ClearDefault(text, type), expand: 'full' };
-};
-const ClearDefaultRoundFull = (text, type) => {
-    return { ...ClearDefaultRound(text, type), expand: 'full' };
-};
-const ClearDefaultBlock = (text, type) => {
-    return { ...ClearDefault(text, type), expand: 'block' };
-};
-const ClearDefaultRoundBlock = (text, type) => {
-    return { ...ClearDefaultRound(text, type), expand: 'block' };
-};
-const SolidDefaultFull = (text, type) => {
-    return { ...SolidDefault(text, type), expand: 'full' };
-};
-const SolidDefaultRoundFull = (text, type) => {
-    return { ...SolidDefaultRound(text, type), expand: 'full' };
-};
-const SolidDefaultBlock = (text, type) => {
-    return { ...SolidDefault(text, type), expand: 'block' };
-};
-const SolidDefaultRoundBlock = (text, type) => {
-    return { ...SolidDefaultRound(text, type), expand: 'block' };
-};
-const OutlineDefaultFull = (text, type) => {
-    return { ...OutlineDefault(text, type), expand: 'full' };
-};
-const OutlineDefaultRoundFull = (text, type) => {
-    return { ...OutlineDefaultRound(text, type), expand: 'full' };
-};
-const OutlineDefaultBlock = (text, type) => {
-    return { ...OutlineDefault(text, type), expand: 'block' };
-};
-const OutlineDefaultRoundBlock = (text, type) => {
-    return { ...OutlineDefaultRound(text, type), expand: 'block' };
-};
-const SolidDefaultButton = (text) => {
-    return SolidDefault(text, 'button');
-};
-const SolidSmallButton = (text) => {
-    return { ...SolidDefault(text, 'button'), size: 'small' };
-};
-const SolidLargeButton = (text) => {
-    return { ...SolidDefault(text, 'button'), size: 'large' };
-};
-const SolidDefaultRoundButton = (text) => {
-    return SolidDefaultRound(text, 'button');
-};
-const SolidSmallRoundButton = (text) => {
-    return { ...SolidDefaultRound(text, 'button'), size: 'small' };
-};
-const SolidLargeRoundButton = (text) => {
-    return { ...SolidDefaultRound(text, 'button'), size: 'large' };
-};
-const SolidFullButton = (text) => {
-    return SolidDefaultFull(text, 'button');
-};
-const SolidBlockButton = (text) => {
-    return SolidDefaultBlock(text, 'button');
-};
-/** PRIMARY */
-const PrimarySolidDefaultRoundButton = (text) => {
-    return { ...SolidDefaultRoundButton(text), color: 'primary' };
-};
-const PrimarySolidDefaultRoundIconButton = (text, icon) => {
-    return { ...PrimarySolidDefaultRoundButton(text), icon };
-};
-const PrimarySolidDefaultRoundHrefButton = (text, href, target) => {
-    return { ...PrimarySolidDefaultRoundButton(text), href, target };
-};
-const PrimarySolidDefaultRoundIconHrefButton = (text, icon, href, target) => {
-    return { ...PrimarySolidDefaultRoundIconButton(text, icon), href, target };
-};
-const PrimarySolidSmallRoundButton = (text) => {
-    return { ...SolidSmallRoundButton(text), color: 'primary' };
-};
-const PrimarySolidSmallRoundIconButton = (text, icon) => {
-    return { ...PrimarySolidSmallRoundButton(text), icon };
-};
-const PrimarySolidSmallRoundHrefButton = (text, href, target) => {
-    return { ...PrimarySolidSmallRoundButton(text), href, target };
-};
-const PrimarySolidSmallRoundIconHrefButton = (text, icon, href, target) => {
-    return { ...PrimarySolidSmallRoundIconButton(text, icon), href, target };
-};
-const PrimarySolidLargeRoundButton = (text) => {
-    return { ...SolidLargeRoundButton(text), color: 'primary' };
-};
-const PrimarySolidLargeRoundIconButton = (text, icon) => {
-    return { ...PrimarySolidLargeRoundButton(text), icon };
-};
-const PrimarySolidLargeRoundHrefButton = (text, href, target) => {
-    return { ...PrimarySolidLargeRoundButton(text), href, target };
-};
-const PrimarySolidLargeRoundIconHrefButton = (text, icon, href, target) => {
-    return { ...PrimarySolidLargeRoundIconButton(text, icon), href, target };
-};
-const PrimarySolidBlockButton = (text) => {
-    return { ...SolidBlockButton(text), color: 'primary' };
-};
-const PrimarySolidBlockIconButton = (text, icon) => {
-    return { ...PrimarySolidBlockButton(text), icon };
-};
-const PrimarySolidBlockHrefButton = (text, href, target) => {
-    return { ...PrimarySolidBlockButton(text), href, target };
-};
-const PrimarySolidBlockIconHrefButton = (text, icon, href, target) => {
-    return { ...PrimarySolidBlockIconButton(text, icon), href, target };
-};
-const PrimarySolidFullButton = (text) => {
-    return { ...SolidFullButton(text), color: 'primary' };
-};
-const PrimarySolidFullIconButton = (text, icon) => {
-    return { ...PrimarySolidFullButton(text), icon };
-};
-const PrimarySolidFullHrefButton = (text, href, target) => {
-    return { ...PrimarySolidFullButton(text), href, target };
-};
-const PrimarySolidFullIconHrefButton = (text, icon, href, target) => {
-    return { ...PrimarySolidFullIconButton(text, icon), href, target };
-};
-/** SECONDARY */
-const SecondarySolidDefaultRoundButton = (text) => {
-    return { ...SolidDefaultRoundButton(text), color: 'secondary' };
-};
-const SecondarySolidDefaultRoundIconButton = (text, icon) => {
-    return { ...SecondarySolidDefaultRoundButton(text), icon };
-};
-const SecondarySolidDefaultRoundHrefButton = (text, href, target) => {
-    return { ...SecondarySolidDefaultRoundButton(text), href, target };
-};
-const SecondarySolidDefaultRoundIconHrefButton = (text, icon, href, target) => {
-    return { ...SecondarySolidDefaultRoundIconButton(text, icon), href, target };
-};
-const SecondarySolidSmallRoundButton = (text) => {
-    return { ...SolidSmallRoundButton(text), color: 'secondary' };
-};
-const SecondarySolidSmallRoundIconButton = (text, icon) => {
-    return { ...SecondarySolidSmallRoundButton(text), icon };
-};
-const SecondarySolidSmallRoundHrefButton = (text, href, target) => {
-    return { ...SecondarySolidSmallRoundButton(text), href, target };
-};
-const SecondarySolidSmallRoundIconHrefButton = (text, icon, href, target) => {
-    return { ...SecondarySolidSmallRoundIconButton(text, icon), href, target };
-};
-const SecondarySolidLargeRoundButton = (text) => {
-    return { ...SolidLargeRoundButton(text), color: 'secondary' };
-};
-const SecondarySolidLargeRoundIconButton = (text, icon) => {
-    return { ...SecondarySolidLargeRoundButton(text), icon };
-};
-const SecondarySolidLargeRoundHrefButton = (text, href, target) => {
-    return { ...SecondarySolidLargeRoundButton(text), href, target };
-};
-const SecondarySolidLargeRoundIconHrefButton = (text, icon, href, target) => {
-    return { ...SecondarySolidLargeRoundIconButton(text, icon), href, target };
-};
-const SecondarySolidFullButton = (text) => {
-    return { ...SolidFullButton(text), color: 'secondary' };
-};
-const SecondarySolidFullIconButton = (text, icon) => {
-    return { ...SecondarySolidFullButton(text), icon };
-};
-const SecondarySolidFullHrefButton = (text, href, target) => {
-    return { ...SecondarySolidFullButton(text), href, target };
-};
-const SecondarySolidFullIconHrefButton = (text, icon, href, target) => {
-    return { ...SecondarySolidFullIconButton(text, icon), href, target };
-};
-const SecondarySolidBlockButton = (text) => {
-    return { ...SolidBlockButton(text), color: 'secondary' };
-};
-const SecondarySolidBlockIconButton = (text, icon) => {
-    return { ...SecondarySolidBlockButton(text), icon };
-};
-const SecondarySolidBlockHrefButton = (text, href, target) => {
-    return { ...SecondarySolidBlockButton(text), href, target };
-};
-const SecondarySolidBlockIconHrefButton = (text, icon, href, target) => {
-    return { ...SecondarySolidBlockIconButton(text, icon), href, target };
-};
-
-class DisplayComponent {
-    constructor() { }
-    ngOnInit() { }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: DisplayComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: DisplayComponent, isStandalone: true, selector: "val-display", inputs: { props: "props" }, ngImport: i0, template: `
-    <ion-text [color]="props.color">
-      <p [class]="props.size">
-        {{ props.content }}
-      </p>
-    </ion-text>
-  `, isInline: true, styles: [".small{font-size:1.5rem;line-height:2rem;font-weight:800}@media (min-width: 768px){.small{font-size:2rem;line-height:2.5rem}}.medium{font-size:2rem;line-height:2.5rem;font-weight:800}@media (min-width: 768px){.medium{font-size:2.5rem;line-height:3rem}}.large{font-size:2.5rem;line-height:3rem;font-weight:800}@media (min-width: 768px){.large{font-size:3rem;line-height:3.5rem}}.xlarge{font-size:3rem;line-height:3.5rem;font-weight:800}@media (min-width: 768px){.xlarge{font-size:3.5rem;line-height:4rem}}\n"], dependencies: [{ kind: "component", type: IonText, selector: "ion-text", inputs: ["color", "mode"] }] }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: DisplayComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'val-display', standalone: true, imports: [IonText], template: `
-    <ion-text [color]="props.color">
-      <p [class]="props.size">
-        {{ props.content }}
-      </p>
-    </ion-text>
-  `, styles: [".small{font-size:1.5rem;line-height:2rem;font-weight:800}@media (min-width: 768px){.small{font-size:2rem;line-height:2.5rem}}.medium{font-size:2rem;line-height:2.5rem;font-weight:800}@media (min-width: 768px){.medium{font-size:2.5rem;line-height:3rem}}.large{font-size:2.5rem;line-height:3rem;font-weight:800}@media (min-width: 768px){.large{font-size:3rem;line-height:3.5rem}}.xlarge{font-size:3rem;line-height:3.5rem;font-weight:800}@media (min-width: 768px){.xlarge{font-size:3.5rem;line-height:4rem}}\n"] }]
-        }], ctorParameters: () => [], propDecorators: { props: [{
-                type: Input
-            }] } });
-
-class DividerComponent {
-    constructor() { }
-    ngOnInit() { }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: DividerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: DividerComponent, isStandalone: true, selector: "val-divider", inputs: { props: "props" }, ngImport: i0, template: ` <div [ngClass]="['divider', props.size, props.color, props.fill]"></div> `, isInline: true, styles: [".solid{border-top:.0625rem solid #878ca0}.gradient{height:.125rem}.gradient.primary{background:linear-gradient(to right,var(--ion-color-primary),var(--ion-color-light))}.gradient.secondary{background:linear-gradient(to right,var(--ion-color-secondary),var(--ion-color-light))}.gradient.dark{background:linear-gradient(to right,var(--ion-color-dark),var(--ion-color-light))}.gradient.light{background:linear-gradient(to right,var(--ion-color-light),#ffffff)}.gradient.medium{background:linear-gradient(to right,var(--ion-color-medium),#ffffff)}.small{margin:1rem}.medium{margin:1.5rem 1rem}.large{margin:2.25rem 1rem}.primary{border-color:var(--ion-color-primary)}.secondary{border-color:var(--ion-color-secondary)}.dark{border-color:var(--ion-color-dark)}.light{border-color:var(--ion-color-light)}.medium{border-color:var(--ion-color-medium)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: DividerComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'val-divider', standalone: true, imports: [CommonModule], template: ` <div [ngClass]="['divider', props.size, props.color, props.fill]"></div> `, styles: [".solid{border-top:.0625rem solid #878ca0}.gradient{height:.125rem}.gradient.primary{background:linear-gradient(to right,var(--ion-color-primary),var(--ion-color-light))}.gradient.secondary{background:linear-gradient(to right,var(--ion-color-secondary),var(--ion-color-light))}.gradient.dark{background:linear-gradient(to right,var(--ion-color-dark),var(--ion-color-light))}.gradient.light{background:linear-gradient(to right,var(--ion-color-light),#ffffff)}.gradient.medium{background:linear-gradient(to right,var(--ion-color-medium),#ffffff)}.small{margin:1rem}.medium{margin:1.5rem 1rem}.large{margin:2.25rem 1rem}.primary{border-color:var(--ion-color-primary)}.secondary{border-color:var(--ion-color-secondary)}.dark{border-color:var(--ion-color-dark)}.light{border-color:var(--ion-color-light)}.medium{border-color:var(--ion-color-medium)}\n"] }]
-        }], ctorParameters: () => [], propDecorators: { props: [{
-                type: Input
-            }] } });
-
-class HrefComponent {
-    constructor(downloadService) {
-        this.downloadService = downloadService;
-        this.onClick = new EventEmitter();
-    }
-    ngOnInit() { }
-    getFileName() {
-        return this.downloadService.getFileNameFromUrl(this.props.url);
-    }
-    onClickHandler(event) {
-        if (this.props.download && this.props.url) {
-            event.preventDefault();
-            this.downloadService.downloadLinkFromBrowser(this.props.url);
-        }
-        this.onClick.emit(this.props.token);
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: HrefComponent, deps: [{ token: DownloadService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: HrefComponent, isStandalone: true, selector: "val-href", inputs: { props: "props" }, outputs: { onClick: "onClick" }, ngImport: i0, template: `
-    <a
-      [ngClass]="[props.color]"
-      [class.hoverable]="props.hoverable"
-      [href]="props.url"
-      target="_blank"
-      (click)="onClickHandler($event)"
-      >{{ props.text }}</a
-    >
-  `, isInline: true, styles: [".primary{color:var(--ion-color-primary)}.secondary{color:var(--ion-color-secondary)}.dark{color:var(--ion-color-dark)}.medium{color:var(--ion-color-medium)}.hoverable{text-decoration:none}.hoverable:hover{text-decoration:underline}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: HrefComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'val-href', standalone: true, imports: [CommonModule], template: `
-    <a
-      [ngClass]="[props.color]"
-      [class.hoverable]="props.hoverable"
-      [href]="props.url"
-      target="_blank"
-      (click)="onClickHandler($event)"
-      >{{ props.text }}</a
-    >
-  `, styles: [".primary{color:var(--ion-color-primary)}.secondary{color:var(--ion-color-secondary)}.dark{color:var(--ion-color-dark)}.medium{color:var(--ion-color-medium)}.hoverable{text-decoration:none}.hoverable:hover{text-decoration:underline}\n"] }]
-        }], ctorParameters: () => [{ type: DownloadService }], propDecorators: { props: [{
-                type: Input
-            }], onClick: [{
-                type: Output
-            }] } });
-
-/* eslint-disable no-underscore-dangle */
-class IconService {
-    constructor() {
-        addIcons({
-            addOutline,
-            addCircleOutline,
-            alertOutline,
-            alertCircleOutline,
-            arrowBackOutline,
-            arrowForwardOutline,
-            arrowDownOutline,
-            checkmarkCircleOutline,
-            ellipsisHorizontalOutline,
-            notificationsOutline,
-        });
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: IconService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: IconService, providedIn: 'root' }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: IconService, decorators: [{
-            type: Injectable,
-            args: [{
-                    providedIn: 'root',
-                }]
-        }], ctorParameters: () => [] });
-
-class IconComponent {
-    constructor(service) { }
-    ngOnInit() { }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: IconComponent, deps: [{ token: IconService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: IconComponent, isStandalone: true, selector: "val-icon", inputs: { props: "props" }, ngImport: i0, template: ` <ion-icon aria-hidden="true" [ngClass]="[props.size]" [name]="props.name" [color]="props.color" /> `, isInline: true, styles: [".small{font-size:.75rem;line-height:1.25rem;font-weight:400}.small.bold{font-size:.75rem;line-height:1.25rem;font-weight:700}.medium{font-size:.875rem;line-height:1.5rem;font-weight:400}@media (min-width: 768px){.medium{font-size:1rem;line-height:1.5rem}}.medium.bold{font-size:.875rem;line-height:1.5rem;font-weight:700}@media (min-width: 768px){.medium.bold{font-size:1rem;line-height:1.5rem}}.large{font-size:1rem;line-height:1.5rem;font-weight:400}@media (min-width: 768px){.large{font-size:1.125rem;line-height:1.5rem}}.large.bold{font-size:1rem;line-height:1.5rem;font-weight:700}@media (min-width: 768px){.large.bold{font-size:1.125rem;line-height:1.5rem}}.xlarge{font-size:1.125rem;line-height:1.5rem;font-weight:400}@media (min-width: 768px){.xlarge{font-size:1.5rem;line-height:2rem}}.xlarge.bold{font-size:1.125rem;line-height:1.5rem;font-weight:700}@media (min-width: 768px){.xlarge.bold{font-size:1.5rem;line-height:2rem}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { 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: IconComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'val-icon', standalone: true, imports: [CommonModule, IonIcon], template: ` <ion-icon aria-hidden="true" [ngClass]="[props.size]" [name]="props.name" [color]="props.color" /> `, styles: [".small{font-size:.75rem;line-height:1.25rem;font-weight:400}.small.bold{font-size:.75rem;line-height:1.25rem;font-weight:700}.medium{font-size:.875rem;line-height:1.5rem;font-weight:400}@media (min-width: 768px){.medium{font-size:1rem;line-height:1.5rem}}.medium.bold{font-size:.875rem;line-height:1.5rem;font-weight:700}@media (min-width: 768px){.medium.bold{font-size:1rem;line-height:1.5rem}}.large{font-size:1rem;line-height:1.5rem;font-weight:400}@media (min-width: 768px){.large{font-size:1.125rem;line-height:1.5rem}}.large.bold{font-size:1rem;line-height:1.5rem;font-weight:700}@media (min-width: 768px){.large.bold{font-size:1.125rem;line-height:1.5rem}}.xlarge{font-size:1.125rem;line-height:1.5rem;font-weight:400}@media (min-width: 768px){.xlarge{font-size:1.5rem;line-height:2rem}}.xlarge.bold{font-size:1.125rem;line-height:1.5rem;font-weight:700}@media (min-width: 768px){.xlarge.bold{font-size:1.5rem;line-height:2rem}}\n"] }]
-        }], ctorParameters: () => [{ type: IconService }], propDecorators: { props: [{
-                type: Input
-            }] } });
-
-class ImageComponent {
-    constructor() {
-        this.available = true;
-    }
-    ngOnInit() { }
-    changeToVisible() {
-        setInterval(() => {
-            this.available = true;
-        }, 100);
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: ImageComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: ImageComponent, isStandalone: true, selector: "val-image", inputs: { props: "props" }, ngImport: i0, template: `
-    <img
-      [ngClass]="['image', props.mode, props.size]"
-      [class.bordered]="props.bordered"
-      [class.shaded]="props.shaded"
-      [class.limited]="props.limited"
-      [class.visible]="available"
-      [src]="props.src"
-      [alt]="props.alt"
-      [style.width.px]="props.width"
-      [style.max-width.px]="props.width"
-      [style.height.px]="props.height"
-    />
-  `, isInline: true, styles: [".small{width:30%}.small.limited{max-width:6.25rem}.medium{width:50%}.medium.limited{max-width:15rem}.large{width:70%}.large.limited{max-width:28.125rem}.xlarge{width:100%}.xlarge.limited{max-width:43.75rem}.image{opacity:0;height:0;display:block}.visible{animation:appereance ease-in 1s forwards}@keyframes appereance{0%{opacity:0;height:0}to{opacity:1;height:auto}}.rounded{border-radius:.5rem}.circular{border-radius:50%}.bordered{border:.0625rem solid var(--ion-color-medium)}.shaded{box-shadow:.1875rem .625rem .5rem #1219541a}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: ImageComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'val-image', standalone: true, imports: [CommonModule], template: `
-    <img
-      [ngClass]="['image', props.mode, props.size]"
-      [class.bordered]="props.bordered"
-      [class.shaded]="props.shaded"
-      [class.limited]="props.limited"
-      [class.visible]="available"
-      [src]="props.src"
-      [alt]="props.alt"
-      [style.width.px]="props.width"
-      [style.max-width.px]="props.width"
-      [style.height.px]="props.height"
-    />
-  `, styles: [".small{width:30%}.small.limited{max-width:6.25rem}.medium{width:50%}.medium.limited{max-width:15rem}.large{width:70%}.large.limited{max-width:28.125rem}.xlarge{width:100%}.xlarge.limited{max-width:43.75rem}.image{opacity:0;height:0;display:block}.visible{animation:appereance ease-in 1s forwards}@keyframes appereance{0%{opacity:0;height:0}to{opacity:1;height:auto}}.rounded{border-radius:.5rem}.circular{border-radius:50%}.bordered{border:.0625rem solid var(--ion-color-medium)}.shaded{box-shadow:.1875rem .625rem .5rem #1219541a}\n"] }]
-        }], ctorParameters: () => [], propDecorators: { props: [{
-                type: Input
-            }] } });
-
-class ProgressBarComponent {
-    constructor() { }
-    ngOnInit() { }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: ProgressBarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: ProgressBarComponent, isStandalone: true, selector: "val-progress-bar", inputs: { props: "props" }, ngImport: i0, template: `
-    <ion-progress-bar
-      [ngClass]="[props.size]"
-      [class.rounded]="props.rounded"
-      [value]="props.progress"
-      [color]="props.color"
-      [buffer]="props.buffer"
-      [type]="props.type"
-    ></ion-progress-bar>
-  `, isInline: true, styles: ["ion-progress-bar.rounded{border-radius:.5rem}.medium{height:.25rem}.large{height:.375rem}.xlarge{height:.5rem}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: IonProgressBar, selector: "ion-progress-bar", inputs: ["buffer", "color", "mode", "reversed", "type", "value"] }] }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: ProgressBarComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'val-progress-bar', standalone: true, imports: [CommonModule, IonProgressBar], template: `
-    <ion-progress-bar
-      [ngClass]="[props.size]"
-      [class.rounded]="props.rounded"
-      [value]="props.progress"
-      [color]="props.color"
-      [buffer]="props.buffer"
-      [type]="props.type"
-    ></ion-progress-bar>
-  `, styles: ["ion-progress-bar.rounded{border-radius:.5rem}.medium{height:.25rem}.large{height:.375rem}.xlarge{height:.5rem}\n"] }]
-        }], ctorParameters: () => [], propDecorators: { props: [{
-                type: Input
-            }] } });
-
-class TextComponent {
-    constructor() { }
-    ngOnInit() { }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: TextComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: TextComponent, isStandalone: true, selector: "val-text", inputs: { props: "props" }, ngImport: i0, template: `
-    <ion-text [color]="props.color">
-      <p [class]="props.size" [class.bold]="props.bold">{{ props.content }}</p>
-    </ion-text>
-  `, isInline: true, styles: [".small{font-size:.75rem;line-height:1.25rem;font-weight:400}.small.bold{font-size:.75rem;line-height:1.25rem;font-weight:700}.medium{font-size:.875rem;line-height:1.5rem;font-weight:400}@media (min-width: 768px){.medium{font-size:1rem;line-height:1.5rem}}.medium.bold{font-size:.875rem;line-height:1.5rem;font-weight:700}@media (min-width: 768px){.medium.bold{font-size:1rem;line-height:1.5rem}}.large{font-size:1rem;line-height:1.5rem;font-weight:400}@media (min-width: 768px){.large{font-size:1.125rem;line-height:1.5rem}}.large.bold{font-size:1rem;line-height:1.5rem;font-weight:700}@media (min-width: 768px){.large.bold{font-size:1.125rem;line-height:1.5rem}}.xlarge{font-size:1.125rem;line-height:1.5rem;font-weight:400}@media (min-width: 768px){.xlarge{font-size:1.5rem;line-height:2rem}}.xlarge.bold{font-size:1.125rem;line-height:1.5rem;font-weight:700}@media (min-width: 768px){.xlarge.bold{font-size:1.5rem;line-height:2rem}}\n"], dependencies: [{ kind: "component", type: IonText, selector: "ion-text", inputs: ["color", "mode"] }] }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: TextComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'val-text', standalone: true, imports: [IonText], template: `
-    <ion-text [color]="props.color">
-      <p [class]="props.size" [class.bold]="props.bold">{{ props.content }}</p>
-    </ion-text>
-  `, styles: [".small{font-size:.75rem;line-height:1.25rem;font-weight:400}.small.bold{font-size:.75rem;line-height:1.25rem;font-weight:700}.medium{font-size:.875rem;line-height:1.5rem;font-weight:400}@media (min-width: 768px){.medium{font-size:1rem;line-height:1.5rem}}.medium.bold{font-size:.875rem;line-height:1.5rem;font-weight:700}@media (min-width: 768px){.medium.bold{font-size:1rem;line-height:1.5rem}}.large{font-size:1rem;line-height:1.5rem;font-weight:400}@media (min-width: 768px){.large{font-size:1.125rem;line-height:1.5rem}}.large.bold{font-size:1rem;line-height:1.5rem;font-weight:700}@media (min-width: 768px){.large.bold{font-size:1.125rem;line-height:1.5rem}}.xlarge{font-size:1.125rem;line-height:1.5rem;font-weight:400}@media (min-width: 768px){.xlarge{font-size:1.5rem;line-height:2rem}}.xlarge.bold{font-size:1.125rem;line-height:1.5rem;font-weight:700}@media (min-width: 768px){.xlarge.bold{font-size:1.5rem;line-height:2rem}}\n"] }]
-        }], ctorParameters: () => [], propDecorators: { props: [{
-                type: Input
-            }] } });
-
-class TitleComponent {
-    constructor() { }
-    ngOnInit() { }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: TitleComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: TitleComponent, isStandalone: true, selector: "val-title", inputs: { props: "props" }, ngImport: i0, template: `
-    <ion-text [color]="props.color">
-      <p *ngIf="!props.bold" [class]="props.size">{{ props.content }}</p>
-      <b *ngIf="props.bold">
-        <p [class]="props.size">{{ props.content }}</p>
-      </b>
-    </ion-text>
-  `, isInline: true, styles: [".small{font-size:.875rem;line-height:1.5rem;font-weight:700}@media (min-width: 768px){.small{font-size:1rem;line-height:1.5rem}}.medium{font-size:1rem;line-height:1.5rem;font-weight:700}@media (min-width: 768px){.medium{font-size:1.125rem;line-height:1.5rem}}.large{font-size:1.125rem;line-height:1.5rem;font-weight:700}@media (min-width: 768px){.large{font-size:1.5rem;line-height:2rem}}.xlarge{font-size:1.125rem;line-height:1.5rem;font-weight:700}@media (min-width: 768px){.xlarge{font-size:1.5rem;line-height:2rem}}\n"], dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: IonText, selector: "ion-text", inputs: ["color", "mode"] }] }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: TitleComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'val-title', standalone: true, imports: [NgIf, IonText], template: `
-    <ion-text [color]="props.color">
-      <p *ngIf="!props.bold" [class]="props.size">{{ props.content }}</p>
-      <b *ngIf="props.bold">
-        <p [class]="props.size">{{ props.content }}</p>
-      </b>
-    </ion-text>
-  `, styles: [".small{font-size:.875rem;line-height:1.5rem;font-weight:700}@media (min-width: 768px){.small{font-size:1rem;line-height:1.5rem}}.medium{font-size:1rem;line-height:1.5rem;font-weight:700}@media (min-width: 768px){.medium{font-size:1.125rem;line-height:1.5rem}}.large{font-size:1.125rem;line-height:1.5rem;font-weight:700}@media (min-width: 768px){.large{font-size:1.5rem;line-height:2rem}}.xlarge{font-size:1.125rem;line-height:1.5rem;font-weight:700}@media (min-width: 768px){.xlarge{font-size:1.5rem;line-height:2rem}}\n"] }]
-        }], ctorParameters: () => [], propDecorators: { props: [{
-                type: Input
-            }] } });
-
-class AlertBoxComponent {
-    constructor() { }
-    ngOnInit() { }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: AlertBoxComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: AlertBoxComponent, isStandalone: true, selector: "val-alert-box", inputs: { props: "props" }, ngImport: i0, template: `
-    <val-box [props]="props.box">
-      <div class="content-container" body>
-        <val-icon [props]="props.icon"></val-icon>
-        <val-text class="text" [props]="props.text"></val-text>
-      </div>
-    </val-box>
-  `, isInline: true, styles: [".text{margin-left:.25rem}.content-container{display:flex;align-items:flex-start}\n"], dependencies: [{ kind: "component", type: BoxComponent, selector: "val-box", inputs: ["props"], outputs: ["onClick"] }, { kind: "component", type: IconComponent, selector: "val-icon", inputs: ["props"] }, { kind: "component", type: TextComponent, selector: "val-text", inputs: ["props"] }] }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: AlertBoxComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'val-alert-box', standalone: true, imports: [BoxComponent, IconComponent, TextComponent], template: `
-    <val-box [props]="props.box">
-      <div class="content-container" body>
-        <val-icon [props]="props.icon"></val-icon>
-        <val-text class="text" [props]="props.text"></val-text>
-      </div>
-    </val-box>
-  `, styles: [".text{margin-left:.25rem}.content-container{display:flex;align-items:flex-start}\n"] }]
-        }], ctorParameters: () => [], propDecorators: { props: [{
-                type: Input
-            }] } });
-
-class ButtonGroupComponent {
-    constructor() {
-        this.onClick = new EventEmitter();
-    }
-    ngOnInit() { }
-    clickHandler(token) {
-        this.onClick.emit(token);
-    }
-    get Position() {
-        if (this.props.buttons.length === 1 && this.props.position === 'spaced') {
-            return 'right';
-        }
-        return this.props.position;
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: ButtonGroupComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: ButtonGroupComponent, isStandalone: true, selector: "val-button-group", inputs: { props: "props" }, outputs: { onClick: "onClick" }, ngImport: i0, template: `
-    <div [ngClass]="['group-container', Position]" [class.column]="props.columned" style="width: 100%;">
-      <val-button
-        *ngFor="let b of props.buttons"
-        [props]="b"
-        (onClick)="clickHandler(b?.token)"
-        [ngStyle]="{ width: props.buttons.length === 1 ? '100%' : 'auto' }"
-      ></val-button>
-    </div>
-  `, isInline: true, styles: ["val-button{display:inline-block}.group-container{width:100%}.group-container.left{text-align:left}.group-container.center{text-align:center}.group-container.right{text-align:right}.group-container.column{display:flex;flex-direction:column-reverse}.group-container.spaced{display:flex;justify-content:space-between}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: ButtonComponent, selector: "val-button", inputs: ["props"], outputs: ["onClick"] }] }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: ButtonGroupComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'val-button-group', standalone: true, imports: [CommonModule, ButtonComponent], template: `
-    <div [ngClass]="['group-container', Position]" [class.column]="props.columned" style="width: 100%;">
-      <val-button
-        *ngFor="let b of props.buttons"
-        [props]="b"
-        (onClick)="clickHandler(b?.token)"
-        [ngStyle]="{ width: props.buttons.length === 1 ? '100%' : 'auto' }"
-      ></val-button>
-    </div>
-  `, styles: ["val-button{display:inline-block}.group-container{width:100%}.group-container.left{text-align:left}.group-container.center{text-align:center}.group-container.right{text-align:right}.group-container.column{display:flex;flex-direction:column-reverse}.group-container.spaced{display:flex;justify-content:space-between}\n"] }]
-        }], ctorParameters: () => [], propDecorators: { props: [{
-                type: Input
-            }], onClick: [{
-                type: Output
-            }] } });
-
-var CardType;
-(function (CardType) {
-    CardType["native"] = "native";
-    CardType["checker"] = "checker";
-    CardType["tappable"] = "tappable";
-    CardType["complex"] = "complex";
-})(CardType || (CardType = {}));
-var CardSection;
-(function (CardSection) {
-    CardSection[CardSection["headerLeft"] = 0] = "headerLeft";
-    CardSection[CardSection["headerRight"] = 1] = "headerRight";
-    CardSection[CardSection["content"] = 2] = "content";
-    CardSection[CardSection["footer"] = 3] = "footer";
-    CardSection[CardSection["footerExtra"] = 4] = "footerExtra";
-})(CardSection || (CardSection = {}));
-
-class CardComponent {
-    constructor() {
-        this.onClick = new EventEmitter();
-        this.types = CardType;
-        this.actionTypes = ToolbarActionType;
-        this.sections = CardSection;
-    }
-    ngOnInit() { }
-    clickHandler(section, token) {
-        this.onClick.emit({ section, token });
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: CardComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: CardComponent, isStandalone: true, selector: "val-card", inputs: { props: "props" }, outputs: { onClick: "onClick" }, ngImport: i0, template: `
-    <ion-card *ngIf="props.type === types.native">
-      <img alt="image" [src]="props.image" />
-      <ion-card-header *ngIf="props.title || props.overtitle">
-        <ion-card-title *ngIf="props.title">{{ props.title }}</ion-card-title>
-        <ion-card-subtitle *ngIf="props.overtitle">{{ props.overtitle }}</ion-card-subtitle>
-      </ion-card-header>
-
-      <ion-card-content *ngIf="props.content">{{ props.content }}</ion-card-content>
-
-      <val-button
-        *ngFor="let b of props.footerActions"
-        [props]="b"
-        (onClick)="clickHandler(sections.footer, b.token)"
-      ></val-button>
-    </ion-card>
-
-    <ion-card
-      *ngIf="props.type === types.tappable"
-      (click)="clickHandler(sections.content, props.token)"
-      class="tapable"
-    >
-      <img alt="image" [src]="props.image" />
-      <ion-card-header *ngIf="props.title || props.overtitle">
-        <ion-card-title *ngIf="props.title">{{ props.title }}</ion-card-title>
-        <ion-card-subtitle *ngIf="props.overtitle">{{ props.overtitle }}</ion-card-subtitle>
-      </ion-card-header>
-
-      <ion-card-content *ngIf="props.content">{{ props.content }}</ion-card-content>
-    </ion-card>
-
-    <ion-card
-      *ngIf="props.type === types.checker"
-      (click)="clickHandler(sections.content, props.token)"
-      class="tapable"
-    >
-      <ion-card-header *ngIf="props.title || props.overtitle" class="checker">
-        <div>
-          <ion-card-subtitle *ngIf="props.overtitle">{{ props.overtitle }}</ion-card-subtitle>
-          <ion-card-title *ngIf="props.title">{{ props.title }}</ion-card-title>
-        </div>
-        <div>
-          <ion-checkbox [checked]="props.selected"></ion-checkbox>
-        </div>
-      </ion-card-header>
-
-      <ion-card-content *ngIf="props.content">{{ props.content }}</ion-card-content>
-    </ion-card>
-
-    <ion-card *ngIf="props.type === types.complex" class="complex">
-      <ion-card-header class="complex-header">
-        <ion-buttons style="display: flex; align-items: center" *ngIf="props.leftActions.length > 0">
-          <ng-container *ngFor="let action of props.leftActions">
-            <ion-button
-              *ngIf="action.type === actionTypes.ICON"
-              (click)="clickHandler(sections.headerLeft, action.token)"
-            >
-              <ion-icon slot="icon-only" [name]="action.description" color="dark"></ion-icon>
-            </ion-button>
-            <val-avatar
-              style="margin-right: 4px; cursor: pointer"
-              *ngIf="action.type === actionTypes.AVATAR"
-              [props]="{ size: 'small', image: action.description, default: '' }"
-              (onClick)="clickHandler(sections.headerLeft, action.token)"
-            ></val-avatar>
-            <val-image
-              *ngIf="action.type === actionTypes.IMAGE"
-              [props]="action.image"
-              (click)="clickHandler(sections.headerLeft, action.token)"
-            ></val-image>
-            <ion-button
-              *ngIf="action.type === actionTypes.BUTTON"
-              (click)="clickHandler(sections.headerLeft, action.token)"
-            >
-              {{ action.description }}
-            </ion-button>
-            <div *ngIf="props.headerText">
-              <val-text [props]="{ content: props.headerText, color: 'dark', bold: true, size: 'medium' }" />
-            </div>
-          </ng-container>
-        </ion-buttons>
-        <ion-buttons style="display: flex; align-items: center" *ngIf="props.rightActions.length > 0">
-          <ng-container *ngFor="let action of props.rightActions">
-            <ion-button
-              *ngIf="action.type === actionTypes.ICON"
-              (click)="clickHandler(sections.headerRight, action.token)"
-            >
-              <ion-icon slot="icon-only" [name]="action.description" color="dark"></ion-icon>
-            </ion-button>
-            <val-avatar
-              style="margin-right: 4px; cursor: pointer"
-              *ngIf="action.type === actionTypes.AVATAR"
-              [props]="{ size: 'small', image: action.description, default: '' }"
-              (onClick)="clickHandler(sections.headerRight, action.token)"
-            ></val-avatar>
-            <val-image
-              *ngIf="action.type === actionTypes.IMAGE"
-              [props]="action.image"
-              (click)="clickHandler(sections.headerRight, action.token)"
-            ></val-image>
-            <ion-button
-              *ngIf="action.type === actionTypes.BUTTON"
-              (click)="clickHandler(sections.headerRight, action.token)"
-            >
-              {{ action.description }}
-            </ion-button>
-          </ng-container>
-        </ion-buttons>
-      </ion-card-header>
-
-      <div class="tapable" (click)="clickHandler(sections.content, props.token)">
-        <ion-card-header *ngIf="props.title || props.overtitle" class="complex-header">
-          <div>
-            <ion-card-subtitle *ngIf="props.overtitle">{{ props.overtitle }}</ion-card-subtitle>
-            <ion-card-title *ngIf="props.title">{{ props.title }}</ion-card-title>
-          </div>
-        </ion-card-header>
-
-        <img alt="image" [src]="props.image" />
-        <ion-card-content *ngIf="props.content" class="complex-content">{{ props.content }}</ion-card-content>
-      </div>
-      <val-button
-        *ngFor="let b of props.footerActions"
-        [props]="b"
-        (onClick)="clickHandler(sections.footer, b.token)"
-      ></val-button>
-      <ion-buttons
-        style="display: flex; align-items: center; justify-content: flex-end; margin: 8px"
-        *ngIf="props.footerComplexActions.length > 0"
-      >
-        <ng-container *ngFor="let action of props.footerComplexActions">
-          <ion-button
-            *ngIf="action.type === actionTypes.ICON"
-            (click)="clickHandler(sections.footerExtra, action.token)"
-          >
-            <ion-icon slot="icon-only" [name]="action.description" color="dark"></ion-icon>
-          </ion-button>
-          <val-avatar
-            style="margin-right: 4px; cursor: pointer"
-            *ngIf="action.type === actionTypes.AVATAR"
-            [props]="{ size: 'small', image: action.description, default: '' }"
-            (onClick)="clickHandler(sections.footerExtra, action.token)"
-          ></val-avatar>
-          <val-image
-            *ngIf="action.type === actionTypes.IMAGE"
-            [props]="action.image"
-            (click)="clickHandler(sections.footerExtra, action.token)"
-          ></val-image>
-          <ion-button
-            *ngIf="action.type === actionTypes.BUTTON"
-            (click)="clickHandler(sections.footerExtra, action.token)"
-            color="dark"
-          >
-            {{ action.description }}
-          </ion-button>
-        </ng-container>
-      </ion-buttons>
-    </ion-card>
-  `, isInline: true, styles: ["ion-card.tapable{transition:transform .3s ease,box-shadow .3s ease}ion-card.tapable:hover{transform:scale(1.01);box-shadow:.1875rem .625rem .5rem #1219541a}.tapable{cursor:pointer}.checker{display:flex;flex-direction:row;justify-content:space-between;align-items:center}.complex-header{padding:10px;display:flex;flex-direction:row;justify-content:space-between;align-items:center}.complex-content{padding-left:10px;padding-top:4px;padding-bottom:10px}.complex{border-radius:16px}\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: ButtonComponent, selector: "val-button", inputs: ["props"], outputs: ["onClick"] }, { kind: "component", type: AvatarComponent, selector: "val-avatar", inputs: ["props"], outputs: ["onClick"] }, { kind: "component", type: ImageComponent, selector: "val-image", inputs: ["props"] }, { kind: "component", type: TextComponent, selector: "val-text", inputs: ["props"] }, { kind: "component", type: IonCard, selector: "ion-card", inputs: ["button", "color", "disabled", "download", "href", "mode", "rel", "routerAnimation", "routerDirection", "target", "type"] }, { kind: "component", type: IonCardContent, selector: "ion-card-content", inputs: ["mode"] }, { kind: "component", type: IonCardHeader, selector: "ion-card-header", inputs: ["color", "mode", "translucent"] }, { kind: "component", type: IonCardTitle, selector: "ion-card-title", inputs: ["color", "mode"] }, { kind: "component", type: IonCardSubtitle, selector: "ion-card-subtitle", inputs: ["color", "mode"] }, { kind: "component", type: IonCheckbox, selector: "ion-checkbox", inputs: ["checked", "color", "disabled", "indeterminate", "justify", "labelPlacement", "mode", "name", "value"] }, { kind: "component", type: IonButtons, selector: "ion-buttons", inputs: ["collapse"] }, { kind: "component", type: IonButton, selector: "ion-button", inputs: ["buttonType", "color", "disabled", "download", "expand", "fill", "form", "href", "mode", "rel", "routerAnimation", "routerDirection", "shape", "size", "strong", "target", "type"] }, { kind: "component", type: 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: CardComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'val-card', standalone: true, imports: [
-                        CommonModule,
-                        ButtonComponent,
-                        AvatarComponent,
-                        ImageComponent,
-                        TextComponent,
-                        IonCard,
-                        IonCardContent,
-                        IonCardHeader,
-                        IonCardTitle,
-                        IonCardSubtitle,
-                        IonCheckbox,
-                        IonButtons,
-                        IonButton,
-                        IonIcon,
-                    ], template: `
-    <ion-card *ngIf="props.type === types.native">
-      <img alt="image" [src]="props.image" />
-      <ion-card-header *ngIf="props.title || props.overtitle">
-        <ion-card-title *ngIf="props.title">{{ props.title }}</ion-card-title>
-        <ion-card-subtitle *ngIf="props.overtitle">{{ props.overtitle }}</ion-card-subtitle>
-      </ion-card-header>
-
-      <ion-card-content *ngIf="props.content">{{ props.content }}</ion-card-content>
-
-      <val-button
-        *ngFor="let b of props.footerActions"
-        [props]="b"
-        (onClick)="clickHandler(sections.footer, b.token)"
-      ></val-button>
-    </ion-card>
-
-    <ion-card
-      *ngIf="props.type === types.tappable"
-      (click)="clickHandler(sections.content, props.token)"
-      class="tapable"
-    >
-      <img alt="image" [src]="props.image" />
-      <ion-card-header *ngIf="props.title || props.overtitle">
-        <ion-card-title *ngIf="props.title">{{ props.title }}</ion-card-title>
-        <ion-card-subtitle *ngIf="props.overtitle">{{ props.overtitle }}</ion-card-subtitle>
-      </ion-card-header>
-
-      <ion-card-content *ngIf="props.content">{{ props.content }}</ion-card-content>
-    </ion-card>
-
-    <ion-card
-      *ngIf="props.type === types.checker"
-      (click)="clickHandler(sections.content, props.token)"
-      class="tapable"
-    >
-      <ion-card-header *ngIf="props.title || props.overtitle" class="checker">
-        <div>
-          <ion-card-subtitle *ngIf="props.overtitle">{{ props.overtitle }}</ion-card-subtitle>
-          <ion-card-title *ngIf="props.title">{{ props.title }}</ion-card-title>
-        </div>
-        <div>
-          <ion-checkbox [checked]="props.selected"></ion-checkbox>
-        </div>
-      </ion-card-header>
-
-      <ion-card-content *ngIf="props.content">{{ props.content }}</ion-card-content>
-    </ion-card>
-
-    <ion-card *ngIf="props.type === types.complex" class="complex">
-      <ion-card-header class="complex-header">
-        <ion-buttons style="display: flex; align-items: center" *ngIf="props.leftActions.length > 0">
-          <ng-container *ngFor="let action of props.leftActions">
-            <ion-button
-              *ngIf="action.type === actionTypes.ICON"
-              (click)="clickHandler(sections.headerLeft, action.token)"
-            >
-              <ion-icon slot="icon-only" [name]="action.description" color="dark"></ion-icon>
-            </ion-button>
-            <val-avatar
-              style="margin-right: 4px; cursor: pointer"
-              *ngIf="action.type === actionTypes.AVATAR"
-              [props]="{ size: 'small', image: action.description, default: '' }"
-              (onClick)="clickHandler(sections.headerLeft, action.token)"
-            ></val-avatar>
-            <val-image
-              *ngIf="action.type === actionTypes.IMAGE"
-              [props]="action.image"
-              (click)="clickHandler(sections.headerLeft, action.token)"
-            ></val-image>
-            <ion-button
-              *ngIf="action.type === actionTypes.BUTTON"
-              (click)="clickHandler(sections.headerLeft, action.token)"
-            >
-              {{ action.description }}
-            </ion-button>
-            <div *ngIf="props.headerText">
-              <val-text [props]="{ content: props.headerText, color: 'dark', bold: true, size: 'medium' }" />
-            </div>
-          </ng-container>
-        </ion-buttons>
-        <ion-buttons style="display: flex; align-items: center" *ngIf="props.rightActions.length > 0">
-          <ng-container *ngFor="let action of props.rightActions">
-            <ion-button
-              *ngIf="action.type === actionTypes.ICON"
-              (click)="clickHandler(sections.headerRight, action.token)"
-            >
-              <ion-icon slot="icon-only" [name]="action.description" color="dark"></ion-icon>
-            </ion-button>
-            <val-avatar
-              style="margin-right: 4px; cursor: pointer"
-              *ngIf="action.type === actionTypes.AVATAR"
-              [props]="{ size: 'small', image: action.description, default: '' }"
-              (onClick)="clickHandler(sections.headerRight, action.token)"
-            ></val-avatar>
-            <val-image
-              *ngIf="action.type === actionTypes.IMAGE"
-              [props]="action.image"
-              (click)="clickHandler(sections.headerRight, action.token)"
-            ></val-image>
-            <ion-button
-              *ngIf="action.type === actionTypes.BUTTON"
-              (click)="clickHandler(sections.headerRight, action.token)"
-            >
-              {{ action.description }}
-            </ion-button>
-          </ng-container>
-        </ion-buttons>
-      </ion-card-header>
-
-      <div class="tapable" (click)="clickHandler(sections.content, props.token)">
-        <ion-card-header *ngIf="props.title || props.overtitle" class="complex-header">
-          <div>
-            <ion-card-subtitle *ngIf="props.overtitle">{{ props.overtitle }}</ion-card-subtitle>
-            <ion-card-title *ngIf="props.title">{{ props.title }}</ion-card-title>
-          </div>
-        </ion-card-header>
-
-        <img alt="image" [src]="props.image" />
-        <ion-card-content *ngIf="props.content" class="complex-content">{{ props.content }}</ion-card-content>
-      </div>
-      <val-button
-        *ngFor="let b of props.footerActions"
-        [props]="b"
-        (onClick)="clickHandler(sections.footer, b.token)"
-      ></val-button>
-      <ion-buttons
-        style="display: flex; align-items: center; justify-content: flex-end; margin: 8px"
-        *ngIf="props.footerComplexActions.length > 0"
-      >
-        <ng-container *ngFor="let action of props.footerComplexActions">
-          <ion-button
-            *ngIf="action.type === actionTypes.ICON"
-            (click)="clickHandler(sections.footerExtra, action.token)"
-          >
-            <ion-icon slot="icon-only" [name]="action.description" color="dark"></ion-icon>
-          </ion-button>
-          <val-avatar
-            style="margin-right: 4px; cursor: pointer"
-            *ngIf="action.type === actionTypes.AVATAR"
-            [props]="{ size: 'small', image: action.description, default: '' }"
-            (onClick)="clickHandler(sections.footerExtra, action.token)"
-          ></val-avatar>
-          <val-image
-            *ngIf="action.type === actionTypes.IMAGE"
-            [props]="action.image"
-            (click)="clickHandler(sections.footerExtra, action.token)"
-          ></val-image>
-          <ion-button
-            *ngIf="action.type === actionTypes.BUTTON"
-            (click)="clickHandler(sections.footerExtra, action.token)"
-            color="dark"
-          >
-            {{ action.description }}
-          </ion-button>
-        </ng-container>
-      </ion-buttons>
-    </ion-card>
-  `, styles: ["ion-card.tapable{transition:transform .3s ease,box-shadow .3s ease}ion-card.tapable:hover{transform:scale(1.01);box-shadow:.1875rem .625rem .5rem #1219541a}.tapable{cursor:pointer}.checker{display:flex;flex-direction:row;justify-content:space-between;align-items:center}.complex-header{padding:10px;display:flex;flex-direction:row;justify-content:space-between;align-items:center}.complex-content{padding-left:10px;padding-top:4px;padding-bottom:10px}.complex{border-radius:16px}\n"] }]
-        }], ctorParameters: () => [], propDecorators: { props: [{
-                type: Input
-            }], onClick: [{
-                type: Output
-            }] } });
-
-class CheckInputComponent {
-    constructor() { }
-    ngOnInit() { }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: CheckInputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: CheckInputComponent, isStandalone: true, selector: "val-check-input", ngImport: i0, template: ` <ion-checkbox>I agree to the terms and conditions</ion-checkbox> `, isInline: true, styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: IonCheckbox, selector: "ion-checkbox", inputs: ["checked", "color", "disabled", "indeterminate", "justify", "labelPlacement", "mode", "name", "value"] }] }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: CheckInputComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'val-check-input', standalone: true, imports: [CommonModule, IonCheckbox], template: ` <ion-checkbox>I agree to the terms and conditions</ion-checkbox> ` }]
-        }], ctorParameters: () => [] });
-
-class CommentInputComponent {
-    constructor() { }
-    ngOnInit() { }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: CommentInputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: CommentInputComponent, isStandalone: true, selector: "val-comment-input", inputs: { props: "props" }, ngImport: i0, template: `
-    <ion-textarea [formControl]="props.control" [counter]="true" [maxlength]="props.range.max"></ion-textarea>
-  `, isInline: true, styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { kind: "directive", type: i1$1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: IonTextarea, selector: "ion-textarea", inputs: ["autoGrow", "autocapitalize", "autofocus", "clearOnEdit", "color", "cols", "counter", "counterFormatter", "debounce", "disabled", "enterkeyhint", "errorText", "fill", "helperText", "inputmode", "label", "labelPlacement", "maxlength", "minlength", "mode", "name", "placeholder", "readonly", "required", "rows", "shape", "spellcheck", "value", "wrap"] }] }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: CommentInputComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'val-comment-input', standalone: true, imports: [CommonModule, ReactiveFormsModule, IonCheckbox, IonTextarea], template: `
-    <ion-textarea [formControl]="props.control" [counter]="true" [maxlength]="props.range.max"></ion-textarea>
-  ` }]
-        }], ctorParameters: () => [], propDecorators: { props: [{
-                type: Input
-            }] } });
-
-class ContentLoaderComponent {
-    constructor() { }
-    ngOnInit() { }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: ContentLoaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: ContentLoaderComponent, isStandalone: true, selector: "val-content-loader", inputs: { props: "props" }, ngImport: i0, template: `
-    <div [ngClass]="['spinner-wrapper', props.size]">
-      <ion-spinner [ngClass]="[props.size]" [name]="props.name" [color]="props.color"></ion-spinner>
-      <ion-text [color]="props.color">
-        <p>{{ props.text }}</p>
-      </ion-text>
-    </div>
-  `, isInline: true, styles: [".small{width:1.5rem;height:1.5rem}.medium{width:2.375rem;height:2.375rem}.large{width:3rem;height:3rem}.spinner-wrapper{width:100%;text-align:center}.spinner-wrapper.small{height:4.5rem;padding-top:1.5rem;font-size:.75rem;line-height:1.25rem;font-weight:400}.spinner-wrapper.medium{height:6.125rem;padding-top:2rem;font-size:.875rem;line-height:1.5rem;font-weight:400}@media (min-width: 768px){.spinner-wrapper.medium{font-size:1rem;line-height:1.5rem}}.spinner-wrapper.large{height:6.75rem;padding-top:2.625rem;font-size:1rem;line-height:1.5rem;font-weight:400}@media (min-width: 768px){.spinner-wrapper.large{font-size:1.125rem;line-height:1.5rem}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: IonSpinner, selector: "ion-spinner", inputs: ["color", "duration", "name", "paused"] }, { kind: "component", type: IonText, selector: "ion-text", inputs: ["color", "mode"] }] }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: ContentLoaderComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'val-content-loader', standalone: true, imports: [CommonModule, IonSpinner, IonText], template: `
-    <div [ngClass]="['spinner-wrapper', props.size]">
-      <ion-spinner [ngClass]="[props.size]" [name]="props.name" [color]="props.color"></ion-spinner>
-      <ion-text [color]="props.color">
-        <p>{{ props.text }}</p>
-      </ion-text>
-    </div>
-  `, styles: [".small{width:1.5rem;height:1.5rem}.medium{width:2.375rem;height:2.375rem}.large{width:3rem;height:3rem}.spinner-wrapper{width:100%;text-align:center}.spinner-wrapper.small{height:4.5rem;padding-top:1.5rem;font-size:.75rem;line-height:1.25rem;font-weight:400}.spinner-wrapper.medium{height:6.125rem;padding-top:2rem;font-size:.875rem;line-height:1.5rem;font-weight:400}@media (min-width: 768px){.spinner-wrapper.medium{font-size:1rem;line-height:1.5rem}}.spinner-wrapper.large{height:6.75rem;padding-top:2.625rem;font-size:1rem;line-height:1.5rem;font-weight:400}@media (min-width: 768px){.spinner-wrapper.large{font-size:1.125rem;line-height:1.5rem}}\n"] }]
-        }], ctorParameters: () => [], propDecorators: { props: [{
-                type: Input
-            }] } });
-
-class DateInputComponent {
-    constructor() { }
-    ngOnInit() { }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: DateInputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: DateInputComponent, isStandalone: true, selector: "val-date-input", inputs: { props: "props" }, ngImport: i0, template: `
-    <div class="button-container">
-      <ion-datetime-button class="action" datetime="datetime"></ion-datetime-button>
-    </div>
-    <ion-modal [keepContentsMounted]="true">
-      <ng-template>
-        <ion-datetime
-          [formControl]="props.control"
-          id="datetime"
-          presentation="date"
-          locale="es-ES"
-          [firstDayOfWeek]="1"
-          [showDefaultButtons]="true"
-          doneText="Aceptar"
-          cancelText="Cancelar"
-          formatOptions="{
-            date: { weekday: 'short', month: 'long', day: '2-digit' },
-            time: {
-              hour: '2-digit',
-              minute: '2-digit',
-            },
-          }"
-        >
-          <span slot="title">{{ props.hint }}</span>
-        </ion-datetime>
-      </ng-template>
-    </ion-modal>
-  `, isInline: true, styles: [".section{margin-top:1rem}.input{margin:.5rem 0}@media (min-width: 768px){.input{margin:.75rem 0}}.button-container{display:flex;flex-direction:column;align-items:flex-start}.action{margin-top:.25rem}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: IonDatetime, selector: "ion-datetime", inputs: ["cancelText", "clearText", "color", "dayValues", "disabled", "doneText", "firstDayOfWeek", "highlightedDates", "hourCycle", "hourValues", "isDateEnabled", "locale", "max", "min", "minuteValues", "mode", "monthValues", "multiple", "name", "preferWheel", "presentation", "readonly", "showClearButton", "showDefaultButtons", "showDefaultTimeLabel", "showDefaultTitle", "size", "titleSelectedDatesFormatter", "value", "yearValues"] }, { kind: "component", type: IonDatetimeButton, selector: "ion-datetime-button", inputs: ["color", "datetime", "disabled", "mode"] }, { kind: "component", type: IonModal, selector: "ion-modal" }] }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: DateInputComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'val-date-input', standalone: true, imports: [CommonModule, ReactiveFormsModule, IonDatetime, IonDatetimeButton, IonModal], template: `
-    <div class="button-container">
-      <ion-datetime-button class="action" datetime="datetime"></ion-datetime-button>
-    </div>
-    <ion-modal [keepContentsMounted]="true">
-      <ng-template>
-        <ion-datetime
-          [formControl]="props.control"
-          id="datetime"
-          presentation="date"
-          locale="es-ES"
-          [firstDayOfWeek]="1"
-          [showDefaultButtons]="true"
-          doneText="Aceptar"
-          cancelText="Cancelar"
-          formatOptions="{
-            date: { weekday: 'short', month: 'long', day: '2-digit' },
-            time: {
-              hour: '2-digit',
-              minute: '2-digit',
-            },
-          }"
-        >
-          <span slot="title">{{ props.hint }}</span>
-        </ion-datetime>
-      </ng-template>
-    </ion-modal>
-  `, styles: [".section{margin-top:1rem}.input{margin:.5rem 0}@media (min-width: 768px){.input{margin:.75rem 0}}.button-container{display:flex;flex-direction:column;align-items:flex-start}.action{margin-top:.25rem}\n"] }]
-        }], ctorParameters: () => [], propDecorators: { props: [{
-                type: Input
-            }] } });
-
-class EmailInputComponent {
-    constructor() { }
-    ngOnInit() { }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: EmailInputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: EmailInputComponent, isStandalone: true, selector: "val-email-input", inputs: { props: "props" }, ngImport: i0, template: ` <ion-input [formControl]="props.control" type="email" [placeholder]="props.placeholder"></ion-input> `, isInline: true, styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.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: EmailInputComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'val-email-input', standalone: true, imports: [CommonModule, ReactiveFormsModule, IonInput], template: ` <ion-input [formControl]="props.control" type="email" [placeholder]="props.placeholder"></ion-input> ` }]
-        }], ctorParameters: () => [], propDecorators: { props: [{
-                type: Input
-            }] } });
-
-class FileInputComponent {
-    constructor() {
-        this.contrastButton = {
-            ...PrimarySolidDefaultRoundButton('Subir archivo'),
-            color: 'light',
-        };
-    }
-    ngOnInit() { }
-    onFileSelected(event) {
-        this.selectedFile = event.target.files[0];
-        this.props.control.setValue(this.selectedFile);
-    }
-    reset() {
-        this.selectedFile = null;
-        this.fileInput.nativeElement.value = '';
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: FileInputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: FileInputComponent, isStandalone: true, selector: "val-file-input", inputs: { props: "props" }, viewQueries: [{ propertyName: "fileInput", first: true, predicate: ["fileInput"], descendants: true }], ngImport: i0, template: `
-    <div class="file-container">
-      <input style="display: none" type="file" (change)="onFileSelected($event)" #fileInput />
-      <div class="name-container">
-        <ion-icon [name]="selectedFile ? 'checkmark-circle-outline' : 'alert-circle-outline'"></ion-icon>
-        <val-text
-          style="margin-left: 4px;"
-          [props]="{
-            content: selectedFile ? selectedFile.name : 'No has seleccionado archivo',
-            color: 'dark',
-            bold: false,
-            size: 'medium',
-          }"
-        ></val-text>
-      </div>
-      <val-button [props]="contrastButton" (onClick)="fileInput.click()"></val-button>
-    </div>
-  `, isInline: true, styles: [".section{margin-top:1rem}.input{margin:.5rem 0}@media (min-width: 768px){.input{margin:.75rem 0}}.file-container{margin-top:.25rem}.name-container{display:flex;flex-direction:row;align-items:flex-start}\n"], dependencies: [{ kind: "component", type: IonIcon, selector: "ion-icon", inputs: ["color", "flipRtl", "icon", "ios", "lazy", "md", "mode", "name", "sanitize", "size", "src"] }, { kind: "component", type: TextComponent, selector: "val-text", 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: FileInputComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'val-file-input', standalone: true, imports: [IonIcon, TextComponent, ButtonComponent], template: `
-    <div class="file-container">
-      <input style="display: none" type="file" (change)="onFileSelected($event)" #fileInput />
-      <div class="name-container">
-        <ion-icon [name]="selectedFile ? 'checkmark-circle-outline' : 'alert-circle-outline'"></ion-icon>
-        <val-text
-          style="margin-left: 4px;"
-          [props]="{
-            content: selectedFile ? selectedFile.name : 'No has seleccionado archivo',
-            color: 'dark',
-            bold: false,
-            size: 'medium',
-          }"
-        ></val-text>
-      </div>
-      <val-button [props]="contrastButton" (onClick)="fileInput.click()"></val-button>
-    </div>
-  `, styles: [".section{margin-top:1rem}.input{margin:.5rem 0}@media (min-width: 768px){.input{margin:.75rem 0}}.file-container{margin-top:.25rem}.name-container{display:flex;flex-direction:row;align-items:flex-start}\n"] }]
-        }], ctorParameters: () => [], propDecorators: { fileInput: [{
-                type: ViewChild,
-                args: ['fileInput']
-            }], props: [{
-                type: Input
-            }] } });
-
-class HintComponent {
-    constructor() { }
-    ngOnInit() { }
-    get Errors() {
-        const keys = Object.keys(this.props.errors);
-        const errors = [];
-        keys.map((e) => {
-            if (this.props.control.hasError(e)) {
-                errors.push(this.props.errors[e]);
-            }
-        });
-        return errors;
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: HintComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: HintComponent, isStandalone: true, selector: "val-hint", inputs: { props: "props" }, ngImport: i0, template: `
-    <div class="hint-container" *ngIf="props.control.invalid && (props.control.touched || props.control.dirty)">
-      <val-text
-        *ngFor="let e of Errors"
-        [props]="{
-          content: e,
-          color: 'danger',
-          bold: false,
-          size: 'small',
-        }"
-      ></val-text>
-    </div>
-  `, isInline: true, styles: [".section{margin-top:1rem}.input{margin:.5rem 0}@media (min-width: 768px){.input{margin:.75rem 0}}.hint-container{margin-top:.25rem}\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: TextComponent, selector: "val-text", inputs: ["props"] }] }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: HintComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'val-hint', standalone: true, imports: [CommonModule, TextComponent], template: `
-    <div class="hint-container" *ngIf="props.control.invalid && (props.control.touched || props.control.dirty)">
-      <val-text
-        *ngFor="let e of Errors"
-        [props]="{
-          content: e,
-          color: 'danger',
-          bold: false,
-          size: 'small',
-        }"
-      ></val-text>
-    </div>
-  `, styles: [".section{margin-top:1rem}.input{margin:.5rem 0}@media (min-width: 768px){.input{margin:.75rem 0}}.hint-container{margin-top:.25rem}\n"] }]
-        }], ctorParameters: () => [], propDecorators: { props: [{
-                type: Input
-            }] } });
-
-class HourInputComponent {
-    constructor() { }
-    ngOnInit() { }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: HourInputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: HourInputComponent, isStandalone: true, selector: "val-hour-input", inputs: { props: "props" }, ngImport: i0, template: ` <ion-datetime [formControl]="props.control" presentation="time"></ion-datetime>`, isInline: true, styles: [""], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: IonDatetime, selector: "ion-datetime", inputs: ["cancelText", "clearText", "color", "dayValues", "disabled", "doneText", "firstDayOfWeek", "highlightedDates", "hourCycle", "hourValues", "isDateEnabled", "locale", "max", "min", "minuteValues", "mode", "monthValues", "multiple", "name", "preferWheel", "presentation", "readonly", "showClearButton", "showDefaultButtons", "showDefaultTimeLabel", "showDefaultTitle", "size", "titleSelectedDatesFormatter", "value", "yearValues"] }] }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: HourInputComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'val-hour-input', standalone: true, imports: [ReactiveFormsModule, IonDatetime], template: ` <ion-datetime [formControl]="props.control" presentation="time"></ion-datetime>` }]
-        }], ctorParameters: () => [], propDecorators: { props: [{
-                type: Input
-            }] } });
-
-/* eslint-disable no-underscore-dangle */
-class InAppBrowserService {
-    constructor() {
-        this.options = {
-            presentationStyle: 'popover',
-            url: '',
-        };
-    }
-    async openWithInAppBrowser(url) {
-        await Browser.open({ ...this.options, url });
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: InAppBrowserService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: InAppBrowserService, providedIn: 'root' }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: InAppBrowserService, decorators: [{
-            type: Injectable,
-            args: [{
-                    providedIn: 'root',
-                }]
-        }], ctorParameters: () => [] });
-
-class NavigationService {
-    constructor() {
-        this.router = inject(Router);
-        this.inAppBrowser = inject(InAppBrowserService);
-    }
-    navigateInApp(url) {
-        this.inAppBrowser.openWithInAppBrowser(url);
-    }
-    navigateWithData(route, dataTransfer) {
-        const navigationExtras = {
-            state: {
-                data: dataTransfer,
-            },
-        };
-        this.router.navigate([route], navigationExtras);
-    }
-    navigateByUrl(url) {
-        this.router
-            .navigateByUrl(url)
-            .then(response => { })
-            .catch(error => { });
-    }
-    openInNewTab(url) {
-        window.open(url, '_blank', 'noopener,noreferrer');
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: NavigationService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: NavigationService, providedIn: 'root' }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: NavigationService, decorators: [{
-            type: Injectable,
-            args: [{
-                    providedIn: 'root',
-                }]
-        }], ctorParameters: () => [] });
-
-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: ["ion-button{font-family:var(--ion-default-font),Arial,sans-serif}\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: ["ion-button{font-family:var(--ion-default-font),Arial,sans-serif}\n"] }]
-        }], ctorParameters: () => [], propDecorators: { props: [{
-                type: Input
-            }], onClick: [{
-                type: Output
-            }] } });
-
-class LinksCakeComponent {
-    constructor() { }
-    ngOnInit() { }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: LinksCakeComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: LinksCakeComponent, isStandalone: true, selector: "val-links-cake", inputs: { props: "props" }, ngImport: i0, template: `
-    <div>
-      <div class="title">
-        <val-title [props]="{ content: props.title, color: 'dark', bold: false, size: props.size }"></val-title>
-      </div>
-      <div class="link" *ngFor="let l of props.links">
-        <val-href [props]="l"></val-href>
-      </div>
-    </div>
-  `, isInline: true, styles: [".title{margin:1rem 0}.link{margin-bottom:.5rem}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "component", type: TitleComponent, selector: "val-title", 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: LinksCakeComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'val-links-cake', standalone: true, imports: [CommonModule, TitleComponent, HrefComponent], template: `
-    <div>
-      <div class="title">
-        <val-title [props]="{ content: props.title, color: 'dark', bold: false, size: props.size }"></val-title>
-      </div>
-      <div class="link" *ngFor="let l of props.links">
-        <val-href [props]="l"></val-href>
-      </div>
-    </div>
-  `, styles: [".title{margin:1rem 0}.link{margin-bottom:.5rem}\n"] }]
-        }], ctorParameters: () => [], propDecorators: { props: [{
-                type: Input
-            }] } });
-
-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: "14.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 }">
-      <div [ngClass]="['content-container', props.size]" body>
-        <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: [".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 }">
-      <div [ngClass]="['content-container', props.size]" body>
-        <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: [".content-container{display:inline-grid}\n"] }]
-        }], ctorParameters: () => [], propDecorators: { props: [{
-                type: Input
-            }] } });
-
-class NumberInputComponent {
-    constructor() { }
-    ngOnInit() { }
-    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$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.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: NumberInputComponent, 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> ` }]
-        }], ctorParameters: () => [], propDecorators: { props: [{
-                type: Input
-            }] } });
-
-class PasswordInputComponent {
-    constructor() {
-        this.hidePassword = true;
-    }
-    ngOnInit() { }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: PasswordInputComponent, deps: [], 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: [".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$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.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: [".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: () => [], propDecorators: { props: [{
-                type: Input
-            }] } });
-
-class PinInputComponent {
-    constructor() {
-        this.codeLength = 5;
-        this.otpInputConfig = {
-            inputStyles: {
-                'font-size': '36px',
-                width: '55px',
-                height: '55px',
-            },
-            inputClass: 'otp-input-box',
-            length: this.codeLength,
-            allowNumbersOnly: true,
-        };
-    }
-    ngOnInit() { }
-    reset() {
-        if (this.pinCode) {
-            this.pinCode.setValue('');
-        }
-    }
-    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: [".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$2.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: [".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
-            }] } });
-
-class TitleBlockComponent {
-    constructor() { }
-    ngOnInit() { }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: TitleBlockComponent, deps: [], 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" }, ngImport: i0, template: `
-    <div [ngClass]="['titles-container', props.position]">
-      <val-title
-        *ngIf="props.aboveTitle"
-        [props]="{
-          content: props.aboveTitle.text | uppercase,
-          color: props.aboveTitle.color,
-          bold: false,
-          size: props.aboveTitle.size,
-        }"
-      ></val-title>
-      <val-display
-        *ngIf="props.title"
-        [props]="{
-          content: props.title.text,
-          color: props.title.color,
-          size: props.title.size,
-        }"
-      ></val-display>
-      <val-title
-        *ngIf="props.bellowTitle"
-        [props]="{
-          content: props.bellowTitle.text,
-          color: props.bellowTitle.color,
-          bold: false,
-          size: props.bellowTitle.size,
-        }"
-      ></val-title>
-    </div>
-  `, isInline: true, styles: ["val-button,val-title,val-display{display:inline-block}.titles-container{width:100%;padding:.25rem;display:flex;flex-direction:column;flex-wrap:wrap}.titles-container.left{align-content:flex-start;align-items:start}.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}@media (min-width: 768px){.titles-container{padding:.5rem}}\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.text | uppercase,
-          color: props.aboveTitle.color,
-          bold: false,
-          size: props.aboveTitle.size,
-        }"
-      ></val-title>
-      <val-display
-        *ngIf="props.title"
-        [props]="{
-          content: props.title.text,
-          color: props.title.color,
-          size: props.title.size,
-        }"
-      ></val-display>
-      <val-title
-        *ngIf="props.bellowTitle"
-        [props]="{
-          content: props.bellowTitle.text,
-          color: props.bellowTitle.color,
-          bold: false,
-          size: props.bellowTitle.size,
-        }"
-      ></val-title>
-    </div>
-  `, styles: ["val-button,val-title,val-display{display:inline-block}.titles-container{width:100%;padding:.25rem;display:flex;flex-direction:column;flex-wrap:wrap}.titles-container.left{align-content:flex-start;align-items:start}.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}@media (min-width: 768px){.titles-container{padding:.5rem}}\n"] }]
-        }], ctorParameters: () => [], propDecorators: { props: [{
-                type: Input
-            }] } });
-
-class ProgressStatusComponent {
-    constructor() {
-        this.currentIndex = 0;
-        this.blinking = false;
-    }
-    ngOnInit() {
-        setInterval(() => {
-            this.blinking = !this.blinking;
-        }, 1000);
-        setInterval(() => {
-            this.getNextMessage();
-        }, 9000);
-    }
-    get Content() {
-        return this.props.messages[this.currentIndex];
-    }
-    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: 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: [".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: [".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
-            }] } });
-
-class PrompterComponent {
-    constructor() {
-        this.onClick = new EventEmitter();
-    }
-    ngOnInit() { }
-    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: "14.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 }"
-    >
-      <div class="container" [class.teleprompter-content]="props.teleprompter" body>
-        <div>
-          <val-text
-            [props]="{
-              content: props.content,
-              color: '',
-              bold: true,
-              size: 'large',
-            }"
-          ></val-text>
-        </div>
-        <div *ngIf="props.buttons">
-          <val-button-group
-            class="buttons-container"
-            [props]="{ buttons: props.buttons, position: 'left', columned: false }"
-            (onClick)="clickHandler($event)"
-          ></val-button-group>
-        </div>
-        <div *ngIf="props.hrefs">
-          <val-href class="link" *ngFor="let l of props.hrefs" [props]="l" (onClick)="clickHandler($event)"></val-href>
-        </div>
-      </div>
-    </val-box>
-  `, isInline: true, styles: ["@charset \"UTF-8\";.container{display:flex;align-items:center;justify-content:center}.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 .25rem}\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: 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 }"
-    >
-      <div class="container" [class.teleprompter-content]="props.teleprompter" body>
-        <div>
-          <val-text
-            [props]="{
-              content: props.content,
-              color: '',
-              bold: true,
-              size: 'large',
-            }"
-          ></val-text>
-        </div>
-        <div *ngIf="props.buttons">
-          <val-button-group
-            class="buttons-container"
-            [props]="{ buttons: props.buttons, position: 'left', columned: false }"
-            (onClick)="clickHandler($event)"
-          ></val-button-group>
-        </div>
-        <div *ngIf="props.hrefs">
-          <val-href class="link" *ngFor="let l of props.hrefs" [props]="l" (onClick)="clickHandler($event)"></val-href>
-        </div>
-      </div>
-    </val-box>
-  `, styles: ["@charset \"UTF-8\";.container{display:flex;align-items:center;justify-content:center}.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 .25rem}\n"] }]
-        }], ctorParameters: () => [], propDecorators: { props: [{
-                type: Input
-            }], onClick: [{
-                type: Output
-            }] } });
-
-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$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.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: RadioInputComponent, 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: [{
-                type: Input
-            }] } });
-
-class SearchbarComponent {
-    constructor() {
-        this.focusEvent = new EventEmitter();
-        this.blurEvent = new EventEmitter();
-        this.filterEvent = new EventEmitter();
-    }
-    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: "app-searchbar", inputs: { disabled: "disabled" }, outputs: { focusEvent: "focusEvent", blurEvent: "blurEvent", filterEvent: "filterEvent" }, 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: ["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: SearchbarComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'app-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: ["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
-            }], focusEvent: [{
-                type: Output
-            }], blurEvent: [{
-                type: Output
-            }], filterEvent: [{
-                type: Output
-            }] } });
-
-class TextInputComponent {
-    constructor() { }
-    ngOnInit() { }
-    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"></ion-input> `, isInline: true, styles: [".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$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.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"></ion-input> `, styles: [".section{margin-top:1rem}.input{margin:.5rem 0}@media (min-width: 768px){.input{margin:.75rem 0}}\n"] }]
-        }], ctorParameters: () => [], propDecorators: { props: [{
-                type: Input
-            }] } });
-
-function resolveColor(color) {
-    // Si el color empieza con "--", se asume que es una variable CSS válida
-    if (color.startsWith('--')) {
-        return `var(${color})`;
-    }
-    // Lista de colores predefinidos de Ionic
-    const ionicColors = [
-        'primary',
-        'secondary',
-        'tertiary',
-        'success',
-        'warning',
-        'danger',
-        'light',
-        'medium',
-        'dark',
-    ];
-    // Verificar si el color es un color de Ionic
-    if (ionicColors.includes(color)) {
-        return `var(--ion-color-${color})`;
-    }
-    // Si no es una variable CSS ni un color de Ionic, devolver el color tal cual
-    return color;
-}
-
-class ExpandableTextComponent {
-    constructor() {
-        this.expanded = false;
-        this.defaultColor = 'primary';
-    }
-    get truncatedText() {
-        const maxLength = this.props.limit || 100; // Longitud por defecto
-        return this.props.content?.length > maxLength ? this.props.content.slice(0, maxLength) + '...' : this.props.content;
-    }
-    get isTruncated() {
-        return this.props.content?.length > (this.props.limit || 100);
-    }
-    toggleExpand() {
-        this.expanded = !this.expanded;
-    }
-    color() {
-        return resolveColor(this.props.color || this.defaultColor);
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: ExpandableTextComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.12", type: ExpandableTextComponent, isStandalone: true, selector: "val-expandable-text", inputs: { props: "props" }, ngImport: i0, template: `
-    <div class="description-container" [class.expanded]="expanded" [class.has-gradient]="!expanded && isTruncated">
-      <ion-text>
-        <p class="description">
-          <span class="content">{{ expanded ? props.content : truncatedText }}</span>
-          @if (!expanded && isTruncated) {
-            <span class="see-more" [style.color]="this.color()" (click)="toggleExpand()">
-              {{ props.expandText || 'ver más' }}
-            </span>
-          }
-        </p>
-      </ion-text>
-    </div>
-  `, isInline: true, styles: [".description-container{position:relative;overflow:hidden;max-height:10rem;transition:max-height .3s ease-in-out}.description-container.expanded{max-height:none}.description{position:relative;overflow:hidden;text-overflow:ellipsis}.description-container:not(.expanded) .description:after{content:\"\";position:absolute;bottom:0;left:0;right:0;height:3.5rem;background:linear-gradient(to top,var(--ion-background-color),rgba(255,255,255,0));pointer-events:none}.description-container:not(.has-gradient) .description:after{background:transparent}.see-more{position:relative;font-weight:700;cursor:pointer;z-index:1;margin-left:.3rem}\n"], dependencies: [{ kind: "component", type: IonText, selector: "ion-text", inputs: ["color", "mode"] }] }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: ExpandableTextComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'val-expandable-text', standalone: true, imports: [IonText], template: `
-    <div class="description-container" [class.expanded]="expanded" [class.has-gradient]="!expanded && isTruncated">
-      <ion-text>
-        <p class="description">
-          <span class="content">{{ expanded ? props.content : truncatedText }}</span>
-          @if (!expanded && isTruncated) {
-            <span class="see-more" [style.color]="this.color()" (click)="toggleExpand()">
-              {{ props.expandText || 'ver más' }}
-            </span>
-          }
-        </p>
-      </ion-text>
-    </div>
-  `, styles: [".description-container{position:relative;overflow:hidden;max-height:10rem;transition:max-height .3s ease-in-out}.description-container.expanded{max-height:none}.description{position:relative;overflow:hidden;text-overflow:ellipsis}.description-container:not(.expanded) .description:after{content:\"\";position:absolute;bottom:0;left:0;right:0;height:3.5rem;background:linear-gradient(to top,var(--ion-background-color),rgba(255,255,255,0));pointer-events:none}.description-container:not(.has-gradient) .description:after{background:transparent}.see-more{position:relative;font-weight:700;cursor:pointer;z-index:1;margin-left:.3rem}\n"] }]
-        }], propDecorators: { props: [{
-                type: Input
-            }] } });
-
-class BannerComponent {
-    constructor() {
-        this.onClick = new EventEmitter();
-        this.onClose = new EventEmitter();
-    }
-    ngOnInit() { }
-    clickHandler(token) {
-        this.onClick.emit(token);
-    }
-    closeHandler() {
-        this.onClose.emit();
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: BannerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: BannerComponent, isStandalone: true, selector: "val-banner", inputs: { props: "props" }, outputs: { onClick: "onClick", onClose: "onClose" }, ngImport: i0, template: `
-    <val-box
-      [props]="{ icon: props.closable ? 'close-outline' : '', bordered: props.bordered, color: '' }"
-      (onClick)="closeHandler()"
-    >
-      <div [ngClass]="['content-container', props.mode, props.alignment]" body>
-        <val-title-block
-          [props]="{
-            position: props.mode === 'center' ? 'center' : 'left',
-            aboveTitle: props.content.aboveTitle,
-            title: props.content.title,
-            bellowTitle: props.content.bellowTitle,
-          }"
-        ></val-title-block>
-        <val-button-group
-          class="buttons-container"
-          [props]="{ position: props.mode === 'center' ? 'center' : 'left', buttons: props.actions, columned: false }"
-          (onClick)="clickHandler($event)"
-        ></val-button-group>
-      </div>
-    </val-box>
-  `, isInline: true, styles: [".content-container{display:flex;justify-content:space-between}.content-container.center{flex-direction:column}.content-container.column{flex-direction:row}.content-container.row{flex-direction:column}.content-container.middle{align-items:center}.content-container.top{align-items:flex-start}.content-container.bottom{align-items:flex-end}.content-container.hybrid{flex-direction:column;align-items:flex-start}@media (min-width: 768px){.content-container.hybrid{flex-direction:row;align-items:center}}.buttons-container{align-items:center;display:flex}\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: TitleBlockComponent, selector: "val-title-block", 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: BannerComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'val-banner', standalone: true, imports: [CommonModule, BoxComponent, TitleBlockComponent, ButtonGroupComponent], template: `
-    <val-box
-      [props]="{ icon: props.closable ? 'close-outline' : '', bordered: props.bordered, color: '' }"
-      (onClick)="closeHandler()"
-    >
-      <div [ngClass]="['content-container', props.mode, props.alignment]" body>
-        <val-title-block
-          [props]="{
-            position: props.mode === 'center' ? 'center' : 'left',
-            aboveTitle: props.content.aboveTitle,
-            title: props.content.title,
-            bellowTitle: props.content.bellowTitle,
-          }"
-        ></val-title-block>
-        <val-button-group
-          class="buttons-container"
-          [props]="{ position: props.mode === 'center' ? 'center' : 'left', buttons: props.actions, columned: false }"
-          (onClick)="clickHandler($event)"
-        ></val-button-group>
-      </div>
-    </val-box>
-  `, styles: [".content-container{display:flex;justify-content:space-between}.content-container.center{flex-direction:column}.content-container.column{flex-direction:row}.content-container.row{flex-direction:column}.content-container.middle{align-items:center}.content-container.top{align-items:flex-start}.content-container.bottom{align-items:flex-end}.content-container.hybrid{flex-direction:column;align-items:flex-start}@media (min-width: 768px){.content-container.hybrid{flex-direction:row;align-items:center}}.buttons-container{align-items:center;display:flex}\n"] }]
-        }], ctorParameters: () => [], propDecorators: { props: [{
-                type: Input
-            }], onClick: [{
-                type: Output
-            }], onClose: [{
-                type: Output
-            }] } });
-
-class ToolbarComponent {
-    constructor(navCtrl) {
-        this.navCtrl = navCtrl;
-        this.onClick = new EventEmitter();
-        this.actionTypes = ToolbarActionType;
-        addIcons({ chevronBackOutline });
-    }
-    ngOnInit() { }
-    goBack() {
-        this.navCtrl.back();
-    }
-    rightActions() {
-        return this.props.actions.filter(x => x.position === 'right');
-    }
-    leftActions() {
-        return this.props.actions.filter(x => x.position === 'left');
-    }
-    someInRight() {
-        return !!this.props.actions.find(x => x.position === 'right');
-    }
-    someInLeft() {
-        return !!this.props.actions.find(x => x.position === 'left');
-    }
-    clickHandler(token) {
-        this.onClick.emit(token);
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: ToolbarComponent, deps: [{ token: i1$3.NavController }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: ToolbarComponent, isStandalone: true, selector: "val-toolbar", inputs: { props: "props" }, outputs: { onClick: "onClick" }, ngImport: i0, template: `
-    <ion-toolbar [color]="props.color" [class.background]="props.color === 'background'">
-      <ng-container *ngIf="props.withBack">
-        <ion-buttons class="left-buttons" slot="start" *ngIf="props.withBack">
-          <ion-button fill="clear" (click)="goBack()" [color]="props.textColor">
-            <ion-icon name="chevron-back-outline" [slot]="props.backText ? 'start' : 'icon-only'"></ion-icon>
-            <ion-text *ngIf="props.backText">{{ props.backText }}</ion-text>
-          </ion-button>
-        </ion-buttons>
-      </ng-container>
-      <ng-container *ngIf="props.withActions">
-        <ion-buttons slot="end" *ngIf="someInRight()">
-          <ng-container *ngFor="let action of rightActions()">
-            <ion-button *ngIf="action.type === actionTypes.ICON" (click)="clickHandler(action.token)">
-              <ion-icon slot="icon-only" [name]="action.description" color="dark"></ion-icon>
-            </ion-button>
-            <val-avatar
-              *ngIf="action.type === actionTypes.AVATAR"
-              [props]="{ size: 'small', image: action.description, default: '' }"
-              (onClick)="clickHandler(action.token)"
-            ></val-avatar>
-            <val-image
-              *ngIf="action.type === actionTypes.IMAGE"
-              [props]="action.image"
-              (click)="clickHandler(action.token)"
-            ></val-image>
-            <ion-button *ngIf="action.type === actionTypes.BUTTON" (click)="clickHandler(action.token)">{{
-              action.description
-            }}</ion-button>
-          </ng-container>
-        </ion-buttons>
-        <ion-buttons slot="start" *ngIf="someInLeft()">
-          <ng-container *ngFor="let action of leftActions()">
-            <ion-button *ngIf="action.type === actionTypes.ICON" (click)="clickHandler(action.token)">
-              <ion-icon slot="icon-only" [name]="action.description" color="dark"></ion-icon>
-            </ion-button>
-            <val-avatar
-              *ngIf="action.type === actionTypes.AVATAR"
-              [props]="{ size: 'small', image: action.description, default: '' }"
-              (onClick)="clickHandler(action.token)"
-            ></val-avatar>
-            <val-image
-              *ngIf="action.type === actionTypes.IMAGE"
-              [props]="action.image"
-              (click)="clickHandler(action.token)"
-            ></val-image>
-            <ion-button *ngIf="action.type === actionTypes.BUTTON" (click)="clickHandler(action.token)">{{
-              action.description
-            }}</ion-button>
-          </ng-container>
-        </ion-buttons>
-      </ng-container>
-      <ion-title *ngIf="props.title" [color]="props.textColor">{{ props.title }}</ion-title>
-      <!-- experimental -->
-      <ng-content select="[toolbar-bottom]"></ng-content>
-    </ion-toolbar>
-  `, isInline: true, styles: ["ion-button{font-family:var(--ion-default-font),Arial,sans-serif}.left-buttons{margin-left:-1rem}.background{background:var(--ion-background-color)}\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: IonToolbar, selector: "ion-toolbar", inputs: ["color", "mode"] }, { kind: "component", type: IonButtons, selector: "ion-buttons", inputs: ["collapse"] }, { kind: "component", type: IonButton, selector: "ion-button", inputs: ["buttonType", "color", "disabled", "download", "expand", "fill", "form", "href", "mode", "rel", "routerAnimation", "routerDirection", "shape", "size", "strong", "target", "type"] }, { kind: "component", type: 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"] }, { kind: "component", type: IonTitle, selector: "ion-title", inputs: ["color", "size"] }, { kind: "component", type: AvatarComponent, selector: "val-avatar", inputs: ["props"], outputs: ["onClick"] }, { kind: "component", type: ImageComponent, selector: "val-image", inputs: ["props"] }] }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: ToolbarComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'val-toolbar', standalone: true, imports: [
-                        CommonModule,
-                        IonToolbar,
-                        IonButtons,
-                        IonButton,
-                        IonIcon,
-                        IonText,
-                        IonTitle,
-                        AvatarComponent,
-                        ImageComponent,
-                    ], template: `
-    <ion-toolbar [color]="props.color" [class.background]="props.color === 'background'">
-      <ng-container *ngIf="props.withBack">
-        <ion-buttons class="left-buttons" slot="start" *ngIf="props.withBack">
-          <ion-button fill="clear" (click)="goBack()" [color]="props.textColor">
-            <ion-icon name="chevron-back-outline" [slot]="props.backText ? 'start' : 'icon-only'"></ion-icon>
-            <ion-text *ngIf="props.backText">{{ props.backText }}</ion-text>
-          </ion-button>
-        </ion-buttons>
-      </ng-container>
-      <ng-container *ngIf="props.withActions">
-        <ion-buttons slot="end" *ngIf="someInRight()">
-          <ng-container *ngFor="let action of rightActions()">
-            <ion-button *ngIf="action.type === actionTypes.ICON" (click)="clickHandler(action.token)">
-              <ion-icon slot="icon-only" [name]="action.description" color="dark"></ion-icon>
-            </ion-button>
-            <val-avatar
-              *ngIf="action.type === actionTypes.AVATAR"
-              [props]="{ size: 'small', image: action.description, default: '' }"
-              (onClick)="clickHandler(action.token)"
-            ></val-avatar>
-            <val-image
-              *ngIf="action.type === actionTypes.IMAGE"
-              [props]="action.image"
-              (click)="clickHandler(action.token)"
-            ></val-image>
-            <ion-button *ngIf="action.type === actionTypes.BUTTON" (click)="clickHandler(action.token)">{{
-              action.description
-            }}</ion-button>
-          </ng-container>
-        </ion-buttons>
-        <ion-buttons slot="start" *ngIf="someInLeft()">
-          <ng-container *ngFor="let action of leftActions()">
-            <ion-button *ngIf="action.type === actionTypes.ICON" (click)="clickHandler(action.token)">
-              <ion-icon slot="icon-only" [name]="action.description" color="dark"></ion-icon>
-            </ion-button>
-            <val-avatar
-              *ngIf="action.type === actionTypes.AVATAR"
-              [props]="{ size: 'small', image: action.description, default: '' }"
-              (onClick)="clickHandler(action.token)"
-            ></val-avatar>
-            <val-image
-              *ngIf="action.type === actionTypes.IMAGE"
-              [props]="action.image"
-              (click)="clickHandler(action.token)"
-            ></val-image>
-            <ion-button *ngIf="action.type === actionTypes.BUTTON" (click)="clickHandler(action.token)">{{
-              action.description
-            }}</ion-button>
-          </ng-container>
-        </ion-buttons>
-      </ng-container>
-      <ion-title *ngIf="props.title" [color]="props.textColor">{{ props.title }}</ion-title>
-      <!-- experimental -->
-      <ng-content select="[toolbar-bottom]"></ng-content>
-    </ion-toolbar>
-  `, styles: ["ion-button{font-family:var(--ion-default-font),Arial,sans-serif}.left-buttons{margin-left:-1rem}.background{background:var(--ion-background-color)}\n"] }]
-        }], ctorParameters: () => [{ type: i1$3.NavController }], propDecorators: { props: [{
-                type: Input
-            }], onClick: [{
-                type: Output
-            }] } });
-
-class FooterComponent {
-    constructor() {
-        this.onClick = new EventEmitter();
-    }
-    ngOnInit() { }
-    clickHandler(token) {
-        this.onClick.emit(token);
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: FooterComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: FooterComponent, isStandalone: true, selector: "val-footer", inputs: { props: "props" }, outputs: { onClick: "onClick" }, ngImport: i0, template: `
-    <ion-footer
-      [class.ion-no-border]="!props.bordered"
-      [translucent]="props.translucent"
-      [class.background]="props.toolbar.color === 'background'"
-    >
-      <val-toolbar
-        *ngIf="props.toolbar.title || props.toolbar.withActions || props.toolbar.withBack"
-        [props]="props.toolbar"
-        (onClick)="clickHandler($event)"
-      ></val-toolbar>
-      <ng-content select="[extra]"></ng-content>
-    </ion-footer>
-  `, isInline: true, styles: [".background{background:var(--ion-background-color)}\n"], dependencies: [{ kind: "component", type: IonFooter, selector: "ion-footer", inputs: ["collapse", "mode", "translucent"] }, { kind: "component", type: ToolbarComponent, selector: "val-toolbar", inputs: ["props"], outputs: ["onClick"] }] }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: FooterComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'val-footer', standalone: true, imports: [IonFooter, ToolbarComponent], template: `
-    <ion-footer
-      [class.ion-no-border]="!props.bordered"
-      [translucent]="props.translucent"
-      [class.background]="props.toolbar.color === 'background'"
-    >
-      <val-toolbar
-        *ngIf="props.toolbar.title || props.toolbar.withActions || props.toolbar.withBack"
-        [props]="props.toolbar"
-        (onClick)="clickHandler($event)"
-      ></val-toolbar>
-      <ng-content select="[extra]"></ng-content>
-    </ion-footer>
-  `, styles: [".background{background:var(--ion-background-color)}\n"] }]
-        }], ctorParameters: () => [], propDecorators: { props: [{
-                type: Input
-            }], onClick: [{
-                type: Output
-            }] } });
-
-const maxLength = (field, max) => {
-    return {
-        validator: Validators.maxLength(max),
-        error: `El campo ${field} no debe superar los ${max} caracteres.`,
-    };
-};
-
-class FormFooterComponent {
-    constructor() {
-        this.onSubmit = new EventEmitter();
-    }
-    ngOnInit() { }
-    async submitHandler(token) {
-        this.onSubmit.emit({ fields: this.form.value, token });
-    }
-    get actions() {
-        if (!this.form) {
-            return [];
-        }
-        if (this.form.valid) {
-            this.action.state = ComponentStates.ENABLED;
-        }
-        return [this.action];
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: FormFooterComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: FormFooterComponent, isStandalone: true, selector: "val-form-footer", inputs: { form: "form", action: "action" }, outputs: { onSubmit: "onSubmit" }, ngImport: i0, template: `
-    <val-footer
-      [props]="{
-        bordered: false,
-        translucent: false,
-        toolbar: {
-          title: '',
-          actions: [],
-          color: 'background',
-          withBack: false,
-          withActions: false,
-        },
-      }"
-    >
-      <val-button-group
-        extra
-        [props]="{ buttons: actions, position: 'center', columned: false }"
-        (onClick)="submitHandler($event)"
-      ></val-button-group>
-    </val-footer>
-  `, isInline: true, styles: [""], dependencies: [{ kind: "component", type: FooterComponent, selector: "val-footer", inputs: ["props"], outputs: ["onClick"] }, { 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: FormFooterComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'val-form-footer', standalone: true, imports: [FooterComponent, ButtonGroupComponent], template: `
-    <val-footer
-      [props]="{
-        bordered: false,
-        translucent: false,
-        toolbar: {
-          title: '',
-          actions: [],
-          color: 'background',
-          withBack: false,
-          withActions: false,
-        },
-      }"
-    >
-      <val-button-group
-        extra
-        [props]="{ buttons: actions, position: 'center', columned: false }"
-        (onClick)="submitHandler($event)"
-      ></val-button-group>
-    </val-footer>
-  ` }]
-        }], ctorParameters: () => [], propDecorators: { form: [{
-                type: Input
-            }], action: [{
-                type: Input
-            }], onSubmit: [{
-                type: Output
-            }] } });
-
-const goToTop = (id) => {
-    const element = document.getElementById(id);
-    if (element) {
-        element.scrollIntoView({
-            block: 'start',
-            inline: 'nearest',
-            behavior: 'smooth',
-        });
-    }
-};
-const isAtEnd = (elementRef) => {
-    const formElement = elementRef.nativeElement;
-    const rect = formElement.getBoundingClientRect();
-    const windowHeight = window.innerHeight;
-    return rect.bottom <= windowHeight;
-};
-
-class FormComponent {
-    constructor(fb, elementRef) {
-        this.fb = fb;
-        this.elementRef = elementRef;
-        this.onSubmit = new EventEmitter();
-        this.onInvalid = new EventEmitter();
-        this.types = InputType;
-    }
-    ngOnInit() {
-        const formControls = {};
-        this.props.sections.forEach(section => {
-            section.fields.forEach(field => {
-                formControls[field.name] = [undefined, field.validators || []];
-            });
-        });
-        this.form = this.fb.group(formControls);
-    }
-    async submitHandler(token) {
-        this.onSubmit.emit({ fields: this.form.value, token });
-    }
-    getControl(field) {
-        return this.Form.get(field);
-    }
-    getFieldProp(field) {
-        return {
-            ...field,
-            control: this.getControl(field.name),
-        };
-    }
-    get isAtEndOfForm() {
-        return isAtEnd(this.elementRef);
-    }
-    get Form() {
-        return this.form;
-    }
-    get actions() {
-        if (!this.form) {
-            return [];
-        }
-        if (this.form.valid) {
-            this.props.actions.state = ComponentStates.ENABLED;
-        }
-        if (this.props.state === ComponentStates.WORKING) {
-            this.props.actions.state = ComponentStates.WORKING;
-        }
-        if (this.props.state === ComponentStates.ENABLED) {
-            this.props.actions.state = ComponentStates.ENABLED;
-        }
-        if (this.props.state === ComponentStates.DISABLED) {
-            this.props.actions.state = ComponentStates.DISABLED;
-        }
-        return [this.props.actions];
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: FormComponent, deps: [{ token: i1$1.FormBuilder }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: FormComponent, isStandalone: true, selector: "val-form", inputs: { props: "props" }, outputs: { onSubmit: "onSubmit", onInvalid: "onInvalid" }, ngImport: i0, template: `
-    <div class="container">
-      <form [formGroup]="form">
-        <val-display
-          [props]="{
-            content: props.name,
-            color: 'dark',
-            size: 'large',
-          }"
-        ></val-display>
-        <div class="section" *ngFor="let s of props.sections">
-          <val-title [props]="{ content: s.name, size: 'large', color: '', bold: false }"></val-title>
-          <div class="input" *ngFor="let f of s.fields">
-            <val-title [props]="{ content: f.label, size: 'small', color: 'dark', bold: false }"></val-title>
-            <ng-container *ngIf="f.type === types.TEXT">
-              <val-text-input [props]="getFieldProp(f)"></val-text-input>
-            </ng-container>
-            <ng-container *ngIf="f.type === types.CHECK">
-              <val-check-input></val-check-input>
-            </ng-container>
-            <ng-container *ngIf="f.type === types.COMMENT">
-              <val-comment-input [props]="getFieldProp(f)"></val-comment-input>
-            </ng-container>
-            <ng-container *ngIf="f.type === types.DATE">
-              <val-date-input [props]="getFieldProp(f)"></val-date-input>
-            </ng-container>
-            <ng-container *ngIf="f.type === types.EMAIL">
-              <val-email-input [props]="getFieldProp(f)"></val-email-input>
-            </ng-container>
-            <ng-container *ngIf="f.type === types.FILE">
-              <val-file-input [props]="getFieldProp(f)"></val-file-input>
-            </ng-container>
-            <ng-container *ngIf="f.type === types.HOUR">
-              <val-hour-input [props]="getFieldProp(f)"></val-hour-input>
-            </ng-container>
-            <ng-container *ngIf="f.type === types.NUMBER">
-              <val-number-input [props]="getFieldProp(f)"></val-number-input>
-            </ng-container>
-            <ng-container *ngIf="f.type === types.PASSWORD">
-              <val-password-input [props]="getFieldProp(f)"></val-password-input>
-            </ng-container>
-            <ng-container *ngIf="f.type === types.PIN_CODE">
-              <val-pin-input [props]="getFieldProp(f)"></val-pin-input>
-            </ng-container>
-            <ng-container *ngIf="f.type === types.RADIO">
-              <val-radio-input [props]="getFieldProp(f)"></val-radio-input>
-            </ng-container>
-            <ng-container *ngIf="f.type === types.SELECT">
-              <!-- <val-select-input></val-select-input> -->
-            </ng-container>
-            <val-hint [props]="getFieldProp(f)"></val-hint>
-          </div>
-          <val-divider [props]="{ fill: 'solid', size: 'medium', color: 'medium' }"></val-divider>
-        </div>
-        <val-button-group
-          [props]="{ buttons: actions, position: 'center', columned: false }"
-          (onClick)="submitHandler($event)"
-        ></val-button-group>
-      </form>
-    </div>
-  `, isInline: true, styles: [".section{margin-top:1rem}.input{margin:.5rem 0}@media (min-width: 768px){.input{margin:.75rem 0}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "component", type: DisplayComponent, selector: "val-display", inputs: ["props"] }, { kind: "component", type: TitleComponent, selector: "val-title", inputs: ["props"] }, { kind: "component", type: TextInputComponent, selector: "val-text-input", inputs: ["props"] }, { kind: "component", type: CheckInputComponent, selector: "val-check-input" }, { kind: "component", type: ButtonGroupComponent, selector: "val-button-group", inputs: ["props"], outputs: ["onClick"] }, { kind: "component", type: DividerComponent, selector: "val-divider", inputs: ["props"] }, { kind: "component", type: HintComponent, selector: "val-hint", inputs: ["props"] }, { kind: "component", type: CommentInputComponent, selector: "val-comment-input", inputs: ["props"] }, { kind: "component", type: DateInputComponent, selector: "val-date-input", inputs: ["props"] }, { kind: "component", type: FileInputComponent, selector: "val-file-input", inputs: ["props"] }, { kind: "component", type: HourInputComponent, selector: "val-hour-input", inputs: ["props"] }, { kind: "component", type: EmailInputComponent, selector: "val-email-input", inputs: ["props"] }, { kind: "component", type: NumberInputComponent, selector: "val-number-input", inputs: ["props"] }, { kind: "component", type: RadioInputComponent, selector: "val-radio-input", inputs: ["props"] }, { kind: "component", type: PasswordInputComponent, selector: "val-password-input", inputs: ["props"] }, { kind: "component", type: PinInputComponent, selector: "val-pin-input", inputs: ["props"] }] }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: FormComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'val-form', standalone: true, imports: [
-                        CommonModule,
-                        ReactiveFormsModule,
-                        DisplayComponent,
-                        TitleComponent,
-                        TextInputComponent,
-                        CheckInputComponent,
-                        ButtonGroupComponent,
-                        DividerComponent,
-                        HintComponent,
-                        CommentInputComponent,
-                        DateInputComponent,
-                        FileInputComponent,
-                        HourInputComponent,
-                        EmailInputComponent,
-                        NumberInputComponent,
-                        RadioInputComponent,
-                        PasswordInputComponent,
-                        PinInputComponent,
-                    ], template: `
-    <div class="container">
-      <form [formGroup]="form">
-        <val-display
-          [props]="{
-            content: props.name,
-            color: 'dark',
-            size: 'large',
-          }"
-        ></val-display>
-        <div class="section" *ngFor="let s of props.sections">
-          <val-title [props]="{ content: s.name, size: 'large', color: '', bold: false }"></val-title>
-          <div class="input" *ngFor="let f of s.fields">
-            <val-title [props]="{ content: f.label, size: 'small', color: 'dark', bold: false }"></val-title>
-            <ng-container *ngIf="f.type === types.TEXT">
-              <val-text-input [props]="getFieldProp(f)"></val-text-input>
-            </ng-container>
-            <ng-container *ngIf="f.type === types.CHECK">
-              <val-check-input></val-check-input>
-            </ng-container>
-            <ng-container *ngIf="f.type === types.COMMENT">
-              <val-comment-input [props]="getFieldProp(f)"></val-comment-input>
-            </ng-container>
-            <ng-container *ngIf="f.type === types.DATE">
-              <val-date-input [props]="getFieldProp(f)"></val-date-input>
-            </ng-container>
-            <ng-container *ngIf="f.type === types.EMAIL">
-              <val-email-input [props]="getFieldProp(f)"></val-email-input>
-            </ng-container>
-            <ng-container *ngIf="f.type === types.FILE">
-              <val-file-input [props]="getFieldProp(f)"></val-file-input>
-            </ng-container>
-            <ng-container *ngIf="f.type === types.HOUR">
-              <val-hour-input [props]="getFieldProp(f)"></val-hour-input>
-            </ng-container>
-            <ng-container *ngIf="f.type === types.NUMBER">
-              <val-number-input [props]="getFieldProp(f)"></val-number-input>
-            </ng-container>
-            <ng-container *ngIf="f.type === types.PASSWORD">
-              <val-password-input [props]="getFieldProp(f)"></val-password-input>
-            </ng-container>
-            <ng-container *ngIf="f.type === types.PIN_CODE">
-              <val-pin-input [props]="getFieldProp(f)"></val-pin-input>
-            </ng-container>
-            <ng-container *ngIf="f.type === types.RADIO">
-              <val-radio-input [props]="getFieldProp(f)"></val-radio-input>
-            </ng-container>
-            <ng-container *ngIf="f.type === types.SELECT">
-              <!-- <val-select-input></val-select-input> -->
-            </ng-container>
-            <val-hint [props]="getFieldProp(f)"></val-hint>
-          </div>
-          <val-divider [props]="{ fill: 'solid', size: 'medium', color: 'medium' }"></val-divider>
-        </div>
-        <val-button-group
-          [props]="{ buttons: actions, position: 'center', columned: false }"
-          (onClick)="submitHandler($event)"
-        ></val-button-group>
-      </form>
-    </div>
-  `, styles: [".section{margin-top:1rem}.input{margin:.5rem 0}@media (min-width: 768px){.input{margin:.75rem 0}}\n"] }]
-        }], ctorParameters: () => [{ type: i1$1.FormBuilder }, { type: i0.ElementRef }], propDecorators: { props: [{
-                type: Input
-            }], onSubmit: [{
-                type: Output
-            }], onInvalid: [{
-                type: Output
-            }] } });
-
-class HeaderComponent {
-    constructor() {
-        this.onClick = new EventEmitter();
-    }
-    ngOnInit() { }
-    clickHandler(token) {
-        this.onClick.emit(token);
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: HeaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: HeaderComponent, isStandalone: true, selector: "val-header", inputs: { props: "props" }, outputs: { onClick: "onClick" }, ngImport: i0, template: `
-    <ion-header [class.ion-no-border]="!props.bordered" [translucent]="props.translucent">
-      <val-toolbar [props]="props.toolbar" (onClick)="clickHandler($event)"></val-toolbar>
-    </ion-header>
-  `, isInline: true, styles: [""], dependencies: [{ kind: "component", type: IonHeader, selector: "ion-header", inputs: ["collapse", "mode", "translucent"] }, { kind: "component", type: ToolbarComponent, selector: "val-toolbar", inputs: ["props"], outputs: ["onClick"] }] }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: HeaderComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'val-header', standalone: true, imports: [IonHeader, ToolbarComponent], template: `
-    <ion-header [class.ion-no-border]="!props.bordered" [translucent]="props.translucent">
-      <val-toolbar [props]="props.toolbar" (onClick)="clickHandler($event)"></val-toolbar>
-    </ion-header>
-  ` }]
-        }], ctorParameters: () => [], propDecorators: { props: [{
-                type: Input
-            }], onClick: [{
-                type: Output
-            }] } });
-
-class NoContentComponent {
-    constructor() {
-        this.onClick = new EventEmitter();
-    }
-    ngOnInit() { }
-    onClickHandler(token) {
-        this.onClick.emit(token);
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: NoContentComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.12", type: NoContentComponent, isStandalone: true, selector: "val-no-content", inputs: { props: "props" }, outputs: { onClick: "onClick" }, ngImport: i0, template: `
-    @if (props.topContent) {
-      <div>
-        <val-banner [props]="props.topContent" (onClick)="onClickHandler($event)"></val-banner>
-      </div>
-    }
-    <val-image class="image-container" [props]="props.image"></val-image>
-    <div>
-      <val-banner [props]="props.bottomContent" (onClick)="onClickHandler($event)"></val-banner>
-    </div>
-  `, isInline: true, styles: [".image-container{display:flex;justify-content:center;margin-bottom:1rem}val-image .image{margin:0 auto}\n"], dependencies: [{ kind: "component", type: ImageComponent, selector: "val-image", inputs: ["props"] }, { kind: "component", type: BannerComponent, selector: "val-banner", inputs: ["props"], outputs: ["onClick", "onClose"] }] }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: NoContentComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'val-no-content', standalone: true, imports: [ImageComponent, BannerComponent], template: `
-    @if (props.topContent) {
-      <div>
-        <val-banner [props]="props.topContent" (onClick)="onClickHandler($event)"></val-banner>
-      </div>
-    }
-    <val-image class="image-container" [props]="props.image"></val-image>
-    <div>
-      <val-banner [props]="props.bottomContent" (onClick)="onClickHandler($event)"></val-banner>
-    </div>
-  `, styles: [".image-container{display:flex;justify-content:center;margin-bottom:1rem}val-image .image{margin:0 auto}\n"] }]
-        }], ctorParameters: () => [], propDecorators: { props: [{
-                type: Input
-            }], onClick: [{
-                type: Output
-            }] } });
-
-var MOTION;
-(function (MOTION) {
-    MOTION[MOTION["BACKWARD"] = 0] = "BACKWARD";
-    MOTION[MOTION["FORWARD"] = 1] = "FORWARD";
-    MOTION[MOTION["RETRY"] = 2] = "RETRY";
-})(MOTION || (MOTION = {}));
-
-class WizardFooterComponent {
-    constructor() {
-        this.onClick = new EventEmitter();
-        this.wrapperId = 'wizard-wrapper';
-    }
-    ngOnInit() { }
-    clickHandler(token) {
-        if (!token) {
-            return;
-        }
-        if (token.includes('right')) {
-            this.tryToStep(MOTION.FORWARD);
-        }
-        if (token.includes('left')) {
-            this.tryToStep(MOTION.BACKWARD);
-        }
-    }
-    get Current() {
-        return this.props.steps[this.props.current];
-    }
-    get Progress() {
-        if (this.props.steps && this.props.current) {
-            return this.props.current / Object.keys(this.props.steps).length;
-        }
-        return 0;
-    }
-    get actions() {
-        if (this.props.state === ComponentStates.ERROR && this.Current.buttons.length > 1) {
-            this.Current.buttons[1].state = ComponentStates.DISABLED;
-        }
-        if (this.props.current === 1 && this.Current.buttons.length > 1) {
-            return [this.Current.buttons[1]];
-        }
-        return this.Current.buttons;
-    }
-    tryToStep(motion) {
-        this.onClick.emit({ current: this.props.current, motion });
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: WizardFooterComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: WizardFooterComponent, isStandalone: true, selector: "val-wizard-footer", inputs: { props: "props" }, outputs: { onClick: "onClick" }, ngImport: i0, template: `
-    <val-footer
-      [props]="{
-        bordered: false,
-        translucent: false,
-        toolbar: {
-          title: '',
-          actions: [],
-          color: 'background',
-          withBack: false,
-          withActions: false,
-        },
-      }"
-    >
-      <val-progress-bar
-        extra
-        [props]="{ progress: Progress, color: '', type: 'determinate', buffer: 1, size: 'small', rounded: false }"
-      ></val-progress-bar>
-      <val-button-group
-        extra
-        [props]="{ buttons: actions, position: 'left', columned: false }"
-        position="spaced"
-        (onClick)="clickHandler($event)"
-      ></val-button-group>
-    </val-footer>
-  `, isInline: true, styles: [""], dependencies: [{ kind: "component", type: FooterComponent, selector: "val-footer", inputs: ["props"], outputs: ["onClick"] }, { kind: "component", type: ProgressBarComponent, selector: "val-progress-bar", 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: WizardFooterComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'val-wizard-footer', standalone: true, imports: [FooterComponent, ProgressBarComponent, ButtonGroupComponent], template: `
-    <val-footer
-      [props]="{
-        bordered: false,
-        translucent: false,
-        toolbar: {
-          title: '',
-          actions: [],
-          color: 'background',
-          withBack: false,
-          withActions: false,
-        },
-      }"
-    >
-      <val-progress-bar
-        extra
-        [props]="{ progress: Progress, color: '', type: 'determinate', buffer: 1, size: 'small', rounded: false }"
-      ></val-progress-bar>
-      <val-button-group
-        extra
-        [props]="{ buttons: actions, position: 'left', columned: false }"
-        position="spaced"
-        (onClick)="clickHandler($event)"
-      ></val-button-group>
-    </val-footer>
-  ` }]
-        }], ctorParameters: () => [], propDecorators: { props: [{
-                type: Input
-            }], onClick: [{
-                type: Output
-            }] } });
-
-class WizardComponent {
-    constructor() {
-        this.onClick = new EventEmitter();
-        this.wrapperId = 'wizard-wrapper';
-    }
-    ngOnInit() { }
-    working() {
-        this.props.state = ComponentStates.WORKING;
-        this.Current.buttons.map(x => {
-            x.state = ComponentStates.DISABLED;
-        });
-    }
-    done() {
-        if (this.props.state === ComponentStates.ENABLED) {
-            return;
-        }
-        this.props.state = ComponentStates.ENABLED;
-        this.Current.buttons.map(x => {
-            x.state = ComponentStates.ENABLED;
-        });
-    }
-    get Current() {
-        return this.props.steps[this.props.current];
-    }
-    setCurrent(newStep) {
-        if (newStep === this.props.current) {
-            return;
-        }
-        this.props.current = newStep;
-        goToTop(this.wrapperId);
-    }
-    setError(error) {
-        if (this.props.state === ComponentStates.ERROR) {
-            return;
-        }
-        this.props.error.titles.bottomContent.content.bellowTitle.text = error;
-        this.props.state = ComponentStates.ERROR;
-        goToTop(this.wrapperId);
-    }
-    reset() {
-        this.props.error.titles.bottomContent.content.bellowTitle.text = '';
-        this.done();
-    }
-    clickHandler(token) {
-        if (!token) {
-            return;
-        }
-        if (token.includes('retry')) {
-            this.reset();
-        }
-        this.onClick.emit({ current: this.props.current, motion: MOTION.RETRY });
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: WizardComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: WizardComponent, isStandalone: true, selector: "val-wizard", inputs: { props: "props" }, outputs: { onClick: "onClick" }, ngImport: i0, template: `
-    <div [id]="wrapperId" class="wrapper">
-      <ng-container *ngIf="props.state !== 'ERROR'">
-        <val-no-content [props]="Current.titles"></val-no-content>
-        <div class="step">
-          <div *ngIf="props.state === 'WORKING'">
-            <val-content-loader color="dark" size="large" text="Por favor espere..."></val-content-loader>
-          </div>
-          <ng-content select="[step]"></ng-content>
-        </div>
-      </ng-container>
-      <ng-container *ngIf="props.state === 'ERROR'">
-        <val-no-content [props]="props.error.titles" (onClick)="clickHandler($event)"></val-no-content>
-      </ng-container>
-    </div>
-  `, isInline: true, styles: [".wrapper{height:auto;display:flex;flex-direction:column;justify-content:space-between;position:relative}.step{min-height:9.375rem;margin:16px 0;text-align:center}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: NoContentComponent, selector: "val-no-content", inputs: ["props"], outputs: ["onClick"] }, { kind: "component", type: ContentLoaderComponent, selector: "val-content-loader", inputs: ["props"] }] }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: WizardComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'val-wizard', standalone: true, imports: [CommonModule, NoContentComponent, ContentLoaderComponent], template: `
-    <div [id]="wrapperId" class="wrapper">
-      <ng-container *ngIf="props.state !== 'ERROR'">
-        <val-no-content [props]="Current.titles"></val-no-content>
-        <div class="step">
-          <div *ngIf="props.state === 'WORKING'">
-            <val-content-loader color="dark" size="large" text="Por favor espere..."></val-content-loader>
-          </div>
-          <ng-content select="[step]"></ng-content>
-        </div>
-      </ng-container>
-      <ng-container *ngIf="props.state === 'ERROR'">
-        <val-no-content [props]="props.error.titles" (onClick)="clickHandler($event)"></val-no-content>
-      </ng-container>
-    </div>
-  `, styles: [".wrapper{height:auto;display:flex;flex-direction:column;justify-content:space-between;position:relative}.step{min-height:9.375rem;margin:16px 0;text-align:center}\n"] }]
-        }], ctorParameters: () => [], propDecorators: { props: [{
-                type: Input
-            }], onClick: [{
-                type: Output
-            }] } });
-
-class ItemListComponent {
-    constructor(icon) {
-        this.states = ComponentStates;
-        this.defaultColor = 'primary';
-        this.onClick = new EventEmitter();
-        this.onActionClick = new EventEmitter();
-    }
-    ngOnInit() { }
-    clickHandler(token) {
-        this.onClick.emit(token);
-    }
-    onActionClickHandler(token) {
-        this.onActionClick.emit(token);
-    }
-    color() {
-        return resolveColor(this.props.color || this.defaultColor);
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: ItemListComponent, deps: [{ token: IconService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.12", type: ItemListComponent, isStandalone: true, selector: "val-item-list", inputs: { props: "props" }, outputs: { onClick: "onClick", onActionClick: "onActionClick" }, ngImport: i0, template: `
-    <div>
-      <ion-list
-        [inset]="props.rounded"
-        [class.shadowed]="props.shadowed"
-        [class.bordered]="props.bordered"
-        [ngStyle]="{
-          borderColor: props.bordered ? this.color : '',
-        }"
-      >
-        <ion-list-header [color]="props.color">
-          <ion-label>{{ props.title }}</ion-label>
-        </ion-list-header>
-        @for (item of props.items; track item.text) {
-          @if (item.mode == 'justext') {
-            <ion-item
-              [lines]="item.lines"
-              [button]="item.clickable"
-              [disabled]="item.disabled"
-              (click)="clickHandler(item.token)"
-            >
-              @if (item.unreadIndicator) {
-                <div class="unread-indicator-wrapper" slot="start">
-                  <div class="unread-indicator"></div>
-                </div>
-              }
-
-              <ion-label [ngClass]="{ 'ion-text-nowrap': item.ellipsis }">
-                <h2>{{ item.text }}</h2>
-
-                @if (item.comments) {
-                  <ion-note color="medium"> {{ item.comments }} </ion-note>
-                }
-              </ion-label>
-
-              @if (item.endNote) {
-                <ion-note slot="end">{{ item.endNote }}</ion-note>
-              }
-            </ion-item>
-          }
-
-          @if (item.mode == 'actionable') {
-            <ion-item [lines]="item.lines" [button]="item.clickable" [disabled]="item.disabled">
-              @if (item.unreadIndicator) {
-                <div class="unread-indicator-wrapper" slot="start">
-                  <div class="unread-indicator"></div>
-                </div>
-              }
-
-              <ion-label [ngClass]="{ 'ion-text-nowrap': item.ellipsis }">
-                <h2>{{ item.text }}</h2>
-
-                @if (item.comments) {
-                  <ion-note color="medium"> {{ item.comments }} </ion-note>
-                }
-              </ion-label>
-
-              @if (item.actions) {
-                @for (action of item.actions; track action.token) {
-                  <ion-button
-                    fill="outline"
-                    color="dark"
-                    slot="end"
-                    [disabled]="action.state === states.WORKING"
-                    (click)="onActionClickHandler(action.token)"
-                  >
-                    @if (action.state !== states.WORKING) {
-                      @if (action.icon) {
-                        <ion-icon aria-hidden="true" [name]="action.icon" size="medium" slot="start"></ion-icon>
-                      }
-
-                      {{ action.description }}
-                    }
-
-                    @if (action.state === states.WORKING) {
-                      <ion-spinner class="action-spinner" name="circular"></ion-spinner>
-                    }
-                  </ion-button>
-                }
-              }
-            </ion-item>
-          }
-
-          @if (item.mode == 'route') {
-            <ion-item
-              [lines]="item.lines"
-              [button]="item.clickable"
-              [disabled]="item.disabled"
-              (click)="clickHandler(item.token)"
-              [routerLink]="item.routerLink"
-            >
-              @if (item.unreadIndicator) {
-                <div class="unread-indicator-wrapper" slot="start">
-                  <div class="unread-indicator"></div>
-                </div>
-              }
-
-              <ion-label [ngClass]="{ 'ion-text-nowrap': item.ellipsis }">
-                <h2>{{ item.text }}</h2>
-
-                @if (item.comments) {
-                  <ion-note color="medium"> {{ item.comments }} </ion-note>
-                }
-              </ion-label>
-            </ion-item>
-          }
-
-          @if (item.mode == 'subtitule') {
-            <ion-item
-              [lines]="item.lines"
-              [button]="item.clickable"
-              [disabled]="item.disabled"
-              (click)="clickHandler(item.token)"
-            >
-              @if (item.unreadIndicator) {
-                <div class="unread-indicator-wrapper" slot="start">
-                  <div class="unread-indicator"></div>
-                </div>
-              }
-
-              <ion-label [ngClass]="{ 'ion-text-nowrap': item.ellipsis }">
-                <h1>{{ item.text }}</h1>
-                <p>{{ item.subtitle }}</p>
-              </ion-label>
-            </ion-item>
-          }
-
-          @if (item.mode == 'avatar') {
-            <ion-item
-              [lines]="item.lines"
-              [button]="item.clickable"
-              [disabled]="item.disabled"
-              (click)="clickHandler(item.token)"
-            >
-              <ion-avatar aria-hidden="true" slot="start">
-                <img alt="" [src]="item.image" />
-              </ion-avatar>
-              <ion-label>{{ item.text }}</ion-label>
-            </ion-item>
-          }
-
-          @if (item.mode == 'icon') {
-            <ion-item
-              [lines]="item.lines"
-              [button]="item.clickable"
-              [disabled]="item.disabled"
-              (click)="clickHandler(item.token)"
-            >
-              <ion-icon aria-hidden="true" [name]="item.icon" size="medium" slot="start"></ion-icon>
-              <ion-label>{{ item.text }}</ion-label>
-            </ion-item>
-          }
-        }
-      </ion-list>
-    </div>
-  `, isInline: true, styles: ["ion-label{font-family:var(--ion-default-font),Arial,sans-serif}ion-note{font-family:var(--ion-default-font),Arial,sans-serif;font-weight:400}ion-button{font-family:var(--ion-default-font),Arial,sans-serif}.shadowed{box-shadow:.1875rem .625rem .5rem #1219541a}.bordered{border:1px solid}.unread-indicator{background:var(--ion-color-primary);width:.625rem;height:.625rem;border-radius:100%;position:absolute;inset-inline-start:.75rem;top:.75rem}.action-spinner{width:3.125rem;height:1rem}\n"], dependencies: [{ kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: IonList, selector: "ion-list", inputs: ["inset", "lines", "mode"] }, { kind: "component", type: IonListHeader, selector: "ion-list-header", inputs: ["color", "lines", "mode"] }, { kind: "component", type: IonLabel, selector: "ion-label", inputs: ["color", "mode", "position"] }, { kind: "component", type: IonNote, selector: "ion-note", inputs: ["color", "mode"] }, { kind: "component", type: IonItem, selector: "ion-item", inputs: ["button", "color", "detail", "detailIcon", "disabled", "download", "href", "lines", "mode", "rel", "routerAnimation", "routerDirection", "target", "type"] }, { kind: "component", type: IonAvatar, selector: "ion-avatar" }, { 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"] }, { kind: "component", type: IonSpinner, selector: "ion-spinner", inputs: ["color", "duration", "name", "paused"] }] }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: ItemListComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'val-item-list', standalone: true, imports: [
-                        RouterLink,
-                        NgStyle,
-                        NgClass,
-                        IonList,
-                        IonListHeader,
-                        IonLabel,
-                        IonNote,
-                        IonItem,
-                        IonAvatar,
-                        IonIcon,
-                        IonButton,
-                        IonSpinner,
-                    ], template: `
-    <div>
-      <ion-list
-        [inset]="props.rounded"
-        [class.shadowed]="props.shadowed"
-        [class.bordered]="props.bordered"
-        [ngStyle]="{
-          borderColor: props.bordered ? this.color : '',
-        }"
-      >
-        <ion-list-header [color]="props.color">
-          <ion-label>{{ props.title }}</ion-label>
-        </ion-list-header>
-        @for (item of props.items; track item.text) {
-          @if (item.mode == 'justext') {
-            <ion-item
-              [lines]="item.lines"
-              [button]="item.clickable"
-              [disabled]="item.disabled"
-              (click)="clickHandler(item.token)"
-            >
-              @if (item.unreadIndicator) {
-                <div class="unread-indicator-wrapper" slot="start">
-                  <div class="unread-indicator"></div>
-                </div>
-              }
-
-              <ion-label [ngClass]="{ 'ion-text-nowrap': item.ellipsis }">
-                <h2>{{ item.text }}</h2>
-
-                @if (item.comments) {
-                  <ion-note color="medium"> {{ item.comments }} </ion-note>
-                }
-              </ion-label>
-
-              @if (item.endNote) {
-                <ion-note slot="end">{{ item.endNote }}</ion-note>
-              }
-            </ion-item>
-          }
-
-          @if (item.mode == 'actionable') {
-            <ion-item [lines]="item.lines" [button]="item.clickable" [disabled]="item.disabled">
-              @if (item.unreadIndicator) {
-                <div class="unread-indicator-wrapper" slot="start">
-                  <div class="unread-indicator"></div>
-                </div>
-              }
-
-              <ion-label [ngClass]="{ 'ion-text-nowrap': item.ellipsis }">
-                <h2>{{ item.text }}</h2>
-
-                @if (item.comments) {
-                  <ion-note color="medium"> {{ item.comments }} </ion-note>
-                }
-              </ion-label>
-
-              @if (item.actions) {
-                @for (action of item.actions; track action.token) {
-                  <ion-button
-                    fill="outline"
-                    color="dark"
-                    slot="end"
-                    [disabled]="action.state === states.WORKING"
-                    (click)="onActionClickHandler(action.token)"
-                  >
-                    @if (action.state !== states.WORKING) {
-                      @if (action.icon) {
-                        <ion-icon aria-hidden="true" [name]="action.icon" size="medium" slot="start"></ion-icon>
-                      }
-
-                      {{ action.description }}
-                    }
-
-                    @if (action.state === states.WORKING) {
-                      <ion-spinner class="action-spinner" name="circular"></ion-spinner>
-                    }
-                  </ion-button>
-                }
-              }
-            </ion-item>
-          }
-
-          @if (item.mode == 'route') {
-            <ion-item
-              [lines]="item.lines"
-              [button]="item.clickable"
-              [disabled]="item.disabled"
-              (click)="clickHandler(item.token)"
-              [routerLink]="item.routerLink"
-            >
-              @if (item.unreadIndicator) {
-                <div class="unread-indicator-wrapper" slot="start">
-                  <div class="unread-indicator"></div>
-                </div>
-              }
-
-              <ion-label [ngClass]="{ 'ion-text-nowrap': item.ellipsis }">
-                <h2>{{ item.text }}</h2>
-
-                @if (item.comments) {
-                  <ion-note color="medium"> {{ item.comments }} </ion-note>
-                }
-              </ion-label>
-            </ion-item>
-          }
-
-          @if (item.mode == 'subtitule') {
-            <ion-item
-              [lines]="item.lines"
-              [button]="item.clickable"
-              [disabled]="item.disabled"
-              (click)="clickHandler(item.token)"
-            >
-              @if (item.unreadIndicator) {
-                <div class="unread-indicator-wrapper" slot="start">
-                  <div class="unread-indicator"></div>
-                </div>
-              }
-
-              <ion-label [ngClass]="{ 'ion-text-nowrap': item.ellipsis }">
-                <h1>{{ item.text }}</h1>
-                <p>{{ item.subtitle }}</p>
-              </ion-label>
-            </ion-item>
-          }
-
-          @if (item.mode == 'avatar') {
-            <ion-item
-              [lines]="item.lines"
-              [button]="item.clickable"
-              [disabled]="item.disabled"
-              (click)="clickHandler(item.token)"
-            >
-              <ion-avatar aria-hidden="true" slot="start">
-                <img alt="" [src]="item.image" />
-              </ion-avatar>
-              <ion-label>{{ item.text }}</ion-label>
-            </ion-item>
-          }
-
-          @if (item.mode == 'icon') {
-            <ion-item
-              [lines]="item.lines"
-              [button]="item.clickable"
-              [disabled]="item.disabled"
-              (click)="clickHandler(item.token)"
-            >
-              <ion-icon aria-hidden="true" [name]="item.icon" size="medium" slot="start"></ion-icon>
-              <ion-label>{{ item.text }}</ion-label>
-            </ion-item>
-          }
-        }
-      </ion-list>
-    </div>
-  `, styles: ["ion-label{font-family:var(--ion-default-font),Arial,sans-serif}ion-note{font-family:var(--ion-default-font),Arial,sans-serif;font-weight:400}ion-button{font-family:var(--ion-default-font),Arial,sans-serif}.shadowed{box-shadow:.1875rem .625rem .5rem #1219541a}.bordered{border:1px solid}.unread-indicator{background:var(--ion-color-primary);width:.625rem;height:.625rem;border-radius:100%;position:absolute;inset-inline-start:.75rem;top:.75rem}.action-spinner{width:3.125rem;height:1rem}\n"] }]
-        }], ctorParameters: () => [{ type: IconService }], propDecorators: { props: [{
-                type: Input
-            }], onClick: [{
-                type: Output
-            }], onActionClick: [{
-                type: Output
-            }] } });
-
-class LayoutComponent {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: LayoutComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: LayoutComponent, isStandalone: true, selector: "val-layout", ngImport: i0, template: `
-    <div class="layout-container">
-      <ng-content></ng-content>
-    </div>
-  `, isInline: true, styles: [".layout-container{margin:0 auto;padding:0;width:100%;box-sizing:border-box;margin-bottom:1rem}@media (max-width: 768px){.layout-container{max-width:100%}}@media (min-width: 768px){.layout-container{max-width:60rem;margin-bottom:1.5rem}}@media (min-width: 1200px){.layout-container{max-width:68.75rem}}\n"] }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: LayoutComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'val-layout', standalone: true, imports: [], template: `
-    <div class="layout-container">
-      <ng-content></ng-content>
-    </div>
-  `, styles: [".layout-container{margin:0 auto;padding:0;width:100%;box-sizing:border-box;margin-bottom:1rem}@media (max-width: 768px){.layout-container{max-width:100%}}@media (min-width: 768px){.layout-container{max-width:60rem;margin-bottom:1.5rem}}@media (min-width: 1200px){.layout-container{max-width:68.75rem}}\n"] }]
-        }] });
-
-class SimpleComponent {
-    constructor() {
-        this.onClick = new EventEmitter();
-    }
-    onClickHandler(token) {
-        this.onClick.emit(token);
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: SimpleComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.12", type: SimpleComponent, isStandalone: true, selector: "val-simple", inputs: { props: "props" }, outputs: { onClick: "onClick" }, ngImport: i0, template: `
-    <val-header [props]="props.header" />
-
-    <ion-content [fullscreen]="true">
-      <ion-header collapse="condense">
-        <ion-toolbar>
-          <ion-title style="padding: 0;" size="large">{{ props.pageTitle }}</ion-title>
-        </ion-toolbar>
-      </ion-header>
-      @if (props.pageDescription) {
-        <div class="description-container">
-          <val-expandable-text
-            [props]="{
-              limit: 180,
-              content: props.pageDescription,
-              color: 'primary',
-              expandText: 'Ver más',
-            }"
-          />
-        </div>
-      }
-      @if (props.link) {
-        <val-link [props]="props.link" (onClick)="onClickHandler($event)"></val-link>
-      }
-      @if (props.withDivider) {
-        <val-divider [props]="{ fill: 'solid', size: 'medium', color: 'dark' }" />
-      }
-      <val-layout>
-        <ng-content></ng-content>
-      </val-layout>
-    </ion-content>
-  `, isInline: true, styles: [".description-container{padding:0 16px}\n"], dependencies: [{ kind: "component", type: IonHeader, selector: "ion-header", inputs: ["collapse", "mode", "translucent"] }, { kind: "component", type: IonToolbar, selector: "ion-toolbar", inputs: ["color", "mode"] }, { kind: "component", type: IonTitle, selector: "ion-title", inputs: ["color", "size"] }, { kind: "component", type: IonContent, selector: "ion-content", inputs: ["color", "forceOverscroll", "fullscreen", "scrollEvents", "scrollX", "scrollY"] }, { kind: "component", type: HeaderComponent, selector: "val-header", inputs: ["props"], outputs: ["onClick"] }, { kind: "component", type: LayoutComponent, selector: "val-layout" }, { kind: "component", type: DividerComponent, selector: "val-divider", inputs: ["props"] }, { kind: "component", type: LinkComponent, selector: "val-link", inputs: ["props"], outputs: ["onClick"] }, { kind: "component", type: ExpandableTextComponent, selector: "val-expandable-text", inputs: ["props"] }] }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: SimpleComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'val-simple', standalone: true, imports: [
-                        NgIf,
-                        IonHeader,
-                        IonToolbar,
-                        IonTitle,
-                        IonText,
-                        IonContent,
-                        HeaderComponent,
-                        LayoutComponent,
-                        DividerComponent,
-                        LinkComponent,
-                        ExpandableTextComponent,
-                    ], template: `
-    <val-header [props]="props.header" />
-
-    <ion-content [fullscreen]="true">
-      <ion-header collapse="condense">
-        <ion-toolbar>
-          <ion-title style="padding: 0;" size="large">{{ props.pageTitle }}</ion-title>
-        </ion-toolbar>
-      </ion-header>
-      @if (props.pageDescription) {
-        <div class="description-container">
-          <val-expandable-text
-            [props]="{
-              limit: 180,
-              content: props.pageDescription,
-              color: 'primary',
-              expandText: 'Ver más',
-            }"
-          />
-        </div>
-      }
-      @if (props.link) {
-        <val-link [props]="props.link" (onClick)="onClickHandler($event)"></val-link>
-      }
-      @if (props.withDivider) {
-        <val-divider [props]="{ fill: 'solid', size: 'medium', color: 'dark' }" />
-      }
-      <val-layout>
-        <ng-content></ng-content>
-      </val-layout>
-    </ion-content>
-  `, styles: [".description-container{padding:0 16px}\n"] }]
-        }], propDecorators: { props: [{
-                type: Input
-            }], onClick: [{
-                type: Output
-            }] } });
-
-class TextContent {
-    constructor(text) {
-        this.text = text;
-    }
-    get Content() {
-        return this.text;
-    }
-}
-var LangOption;
-(function (LangOption) {
-    LangOption["ES"] = "es";
-    LangOption["EN"] = "en";
-})(LangOption || (LangOption = {}));
-
-class LocalStorageService {
-    static set(reference, value) {
-        localStorage.setItem(reference, JSON.stringify(value));
-    }
-    static get(reference) {
-        const value = localStorage.getItem(reference);
-        return JSON.parse(value);
-    }
-    static remove(reference) {
-        localStorage.removeItem(reference);
-    }
-    static clear() {
-        localStorage.clear();
-    }
-}
-
-const LANG = 'LANG';
-const THEME = 'THEME';
-
-const ValtechConfigService = new InjectionToken('ValtechConfig');
-
-class LangService {
-    constructor(config) {
-        this.default = LangOption.ES;
-        console.log('injected config: ', config);
-        this.content = config.content;
-        this.config = config;
-        const current = LocalStorageService.get(LANG);
-        this.selectedLang = new BehaviorSubject(current || this.default);
-    }
-    Text(className) {
-        return this.content[className].Content[this.selectedLang.value];
-    }
-    get Lang() {
-        return this.selectedLang.value;
-    }
-    set Lang(lang) {
-        this.selectedLang.next(lang);
-        LocalStorageService.set(LANG, lang);
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: LangService, deps: [{ token: ValtechConfigService }], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: LangService, providedIn: 'root' }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: LangService, decorators: [{
-            type: Injectable,
-            args: [{
-                    providedIn: 'root',
-                }]
-        }], ctorParameters: () => [{ type: undefined, decorators: [{
-                    type: Inject,
-                    args: [ValtechConfigService]
-                }] }] });
-
-var ThemeOption;
-(function (ThemeOption) {
-    ThemeOption["LIGHT"] = "light";
-    ThemeOption["DARK"] = "dark";
-    ThemeOption["AUTO"] = "auto";
-})(ThemeOption || (ThemeOption = {}));
-class ThemeService {
-    constructor() {
-        this.lightToggle = false;
-        this.darkToggle = false;
-        this.autoToggle = false;
-        this.currentOption = ThemeOption.AUTO;
-        this.themeOptions = ThemeOption;
-        this.prefersDark = false;
-        this.default = ThemeOption.AUTO;
-        const current = LocalStorageService.get(THEME);
-        console.log('💡 ThemeConfig current::: ', current);
-        this.theme = new BehaviorSubject(current || this.default);
-        this.currentOption = this.Theme;
-        console.log('💡 ThemeConfig this.currentOption::: ', this.currentOption);
-        this.toggleUserPreference(this.currentOption);
-        const prefersDarkQuery = window.matchMedia('(prefers-color-scheme: dark)');
-        this.prefersDark = prefersDarkQuery.matches;
-        this.handleAutoConfiguration();
-        prefersDarkQuery.addEventListener('change', mediaQuery => {
-            console.log('💡 ThemeConfig addEventListener change::: ', mediaQuery);
-            this.prefersDark = mediaQuery.matches;
-            this.handleAutoConfiguration();
-        });
-    }
-    handleAutoConfiguration() {
-        if (this.prefersDark && this.currentOption === ThemeOption.AUTO) {
-            console.log('💡 ThemeConfig prefersDark::: ', this.prefersDark);
-            this.toggleUserPreference(ThemeOption.AUTO);
-        }
-        if (!this.prefersDark && this.currentOption === ThemeOption.AUTO) {
-            console.log('💡 ThemeConfig prefersDark::: ', this.prefersDark);
-            this.toggleUserPreference(ThemeOption.AUTO);
-        }
-    }
-    handleDarkPreference() {
-        this.toggleTheme(ThemeOption.DARK, true);
-        this.toggleTheme(ThemeOption.LIGHT, false);
-    }
-    handleLightPreference() {
-        this.toggleTheme(ThemeOption.LIGHT, true);
-        this.toggleTheme(ThemeOption.DARK, false);
-    }
-    get Theme() {
-        return this.theme.value;
-    }
-    set Theme(theme) {
-        this.theme.next(theme);
-        LocalStorageService.set(THEME, theme);
-    }
-    toggleTheme(name, shouldAdd) {
-        console.log('toggleTheme::: ', name, shouldAdd);
-        document.body.classList.toggle(name, shouldAdd);
-    }
-    toggleUserPreference(option) {
-        this.currentOption = option;
-        this.Theme = option;
-        this.lightToggle = option === ThemeOption.LIGHT;
-        this.darkToggle = option === ThemeOption.DARK;
-        this.autoToggle = option === ThemeOption.AUTO;
-        switch (option) {
-            case ThemeOption.LIGHT:
-                this.handleLightPreference();
-                break;
-            case ThemeOption.DARK:
-                this.handleDarkPreference();
-                break;
-            case ThemeOption.AUTO:
-                if (this.prefersDark) {
-                    this.handleDarkPreference();
-                }
-                else {
-                    this.handleLightPreference();
-                }
-                break;
-        }
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: ThemeService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: ThemeService, providedIn: 'root' }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: ThemeService, decorators: [{
-            type: Injectable,
-            args: [{
-                    providedIn: 'root',
-                }]
-        }], ctorParameters: () => [] });
-
-/*
- * Public API Surface of valtech-components
- */
-/*
- * Public API Surface of valtech-components
- */
-
-/**
- * Generated bundle index. Do not edit.
- */
-
-export { ActionType, AlertBoxComponent, AvatarComponent, BannerComponent, BaseDefault, BoxComponent, ButtonComponent, ButtonGroupComponent, CardComponent, CardSection, CardType, CheckInputComponent, ClearDefault, ClearDefaultBlock, ClearDefaultFull, ClearDefaultRound, ClearDefaultRoundBlock, ClearDefaultRoundFull, CommentInputComponent, ComponentStates, ContentLoaderComponent, DateInputComponent, DisplayComponent, DividerComponent, DownloadService, EmailInputComponent, ExpandableTextComponent, FileInputComponent, FooterComponent, FormComponent, FormFooterComponent, HeaderComponent, HintComponent, HourInputComponent, HrefComponent, Icon, IconComponent, IconService, ImageComponent, InAppBrowserService, InputType, ItemListComponent, LangOption, LangService, LayoutComponent, LinkComponent, LinksCakeComponent, LocalStorageService, MOTION, NavigationService, NoContentComponent, NotesBoxComponent, NumberInputComponent, OutlineDefault, OutlineDefaultBlock, OutlineDefaultFull, OutlineDefaultRound, OutlineDefaultRoundBlock, OutlineDefaultRoundFull, PasswordInputComponent, PinInputComponent, PrimarySolidBlockButton, PrimarySolidBlockHrefButton, PrimarySolidBlockIconButton, PrimarySolidBlockIconHrefButton, PrimarySolidDefaultRoundButton, PrimarySolidDefaultRoundHrefButton, PrimarySolidDefaultRoundIconButton, PrimarySolidDefaultRoundIconHrefButton, PrimarySolidFullButton, PrimarySolidFullHrefButton, PrimarySolidFullIconButton, PrimarySolidFullIconHrefButton, PrimarySolidLargeRoundButton, PrimarySolidLargeRoundHrefButton, PrimarySolidLargeRoundIconButton, PrimarySolidLargeRoundIconHrefButton, PrimarySolidSmallRoundButton, PrimarySolidSmallRoundHrefButton, PrimarySolidSmallRoundIconButton, PrimarySolidSmallRoundIconHrefButton, ProgressBarComponent, ProgressStatusComponent, PrompterComponent, RadioInputComponent, SearchbarComponent, SecondarySolidBlockButton, SecondarySolidBlockHrefButton, SecondarySolidBlockIconButton, SecondarySolidBlockIconHrefButton, SecondarySolidDefaultRoundButton, SecondarySolidDefaultRoundHrefButton, SecondarySolidDefaultRoundIconButton, SecondarySolidDefaultRoundIconHrefButton, SecondarySolidFullButton, SecondarySolidFullHrefButton, SecondarySolidFullIconButton, SecondarySolidFullIconHrefButton, SecondarySolidLargeRoundButton, SecondarySolidLargeRoundHrefButton, SecondarySolidLargeRoundIconButton, SecondarySolidLargeRoundIconHrefButton, SecondarySolidSmallRoundButton, SecondarySolidSmallRoundHrefButton, SecondarySolidSmallRoundIconButton, SecondarySolidSmallRoundIconHrefButton, SimpleComponent, SolidBlockButton, SolidDefault, SolidDefaultBlock, SolidDefaultButton, SolidDefaultFull, SolidDefaultRound, SolidDefaultRoundBlock, SolidDefaultRoundButton, SolidDefaultRoundFull, SolidFullButton, SolidLargeButton, SolidLargeRoundButton, SolidSmallButton, SolidSmallRoundButton, TextComponent, TextContent, TextInputComponent, ThemeOption, ThemeService, TitleBlockComponent, TitleComponent, ToolbarActionType, ToolbarComponent, ValtechConfigService, WizardComponent, WizardFooterComponent, goToTop, isAtEnd, maxLength };
-//# sourceMappingURL=valtech-components.mjs.map