valtech-components 2.0.62 → 2.0.64

package/fesm2022/valtech-components.mjs

@@ -0,0 +1,3558 @@
+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, NgClass, NgStyle } from '@angular/common';
+import { addIcons } from 'ionicons';
+import { addOutline, addCircleOutline, alertOutline, alertCircleOutline, arrowBackOutline, arrowForwardOutline, arrowDownOutline, checkmarkCircleOutline, ellipsisHorizontalOutline, notificationsOutline, openOutline, closeOutline, 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
+            }] } });
+
+/* eslint-disable no-underscore-dangle */
+class IconService {
+    constructor() {
+        addIcons({
+            addOutline,
+            addCircleOutline,
+            alertOutline,
+            alertCircleOutline,
+            arrowBackOutline,
+            arrowForwardOutline,
+            arrowDownOutline,
+            checkmarkCircleOutline,
+            ellipsisHorizontalOutline,
+            notificationsOutline,
+            openOutline,
+            closeOutline,
+        });
+    }
+    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 BoxComponent {
+    constructor(icon) {
+        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: [{ token: IconService }], 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>
+      <div style="margin-right: 24px; padding: 8px;">
+        <ng-content select="[body]"></ng-content>
+      </div>
+    </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:0rem}@media (min-width: 768px){.box{padding:.5rem}}.icon{cursor:pointer;margin:0rem;padding:0rem;position:absolute;right:.25rem;top:.25rem;font-size:1.5rem}@media (min-width: 768px){.icon{right:.5rem;top:.5rem;font-size:2rem}}.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>
+      <div style="margin-right: 24px; padding: 8px;">
+        <ng-content select="[body]"></ng-content>
+      </div>
+    </ion-card>
+  `, styles: [".bordered{border:.0625rem solid var(--ion-color-medium)}.box{width:100%;margin:0rem;border-radius:0rem;box-shadow:none;padding:0rem}@media (min-width: 768px){.box{padding:.5rem}}.icon{cursor:pointer;margin:0rem;padding:0rem;position:absolute;right:.25rem;top:.25rem;font-size:1.5rem}@media (min-width: 768px){.icon{right:.5rem;top:.5rem;font-size:2rem}}.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: () => [{ type: IconService }], 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, icon) {
+        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 }, { token: IconService }], 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;min-width:pxToRem(100)}\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;min-width:pxToRem(100)}\n"] }]
+        }], ctorParameters: () => [{ type: DownloadService }, { type: IconService }], 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
+            }] } });
+
+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: ["ion-toolbar{padding:0 1rem}\n"], 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>
+  `, styles: ["ion-toolbar{padding:0 1rem}\n"] }]
+        }], 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: `
+    <ion-list
+      [inset]="props.rounded"
+      [class.shadowed]="props.shadowed"
+      [class.bordered]="props.bordered"
+      [style.borderColor]="this.color()"
+    >
+      @if (props.title) {
+        <ion-list-header>
+          <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>
+  `, 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: 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: `
+    <ion-list
+      [inset]="props.rounded"
+      [class.shadowed]="props.shadowed"
+      [class.bordered]="props.bordered"
+      [style.borderColor]="this.color()"
+    >
+      @if (props.title) {
+        <ion-list-header>
+          <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>
+  `, 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{margin:0 auto;max-width:55rem;margin-bottom:1.5rem}}@media (min-width: 1200px){.layout-container{margin:0 auto;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{margin:0 auto;max-width:55rem;margin-bottom:1.5rem}}@media (min-width: 1200px){.layout-container{margin:0 auto;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: '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: '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