valtech-components 1.11.76 → 2.0.2

package/fesm2022/valtech-components.mjs

@@ -1,1813 +0,0 @@
-import * as i0 from '@angular/core';
-import { Injectable, EventEmitter, Component, Input, Output, ViewChild, InjectionToken, NgModule, Inject } from '@angular/core';
-import * as i1 from '@angular/common';
-import { CommonModule } from '@angular/common';
-import * as i1$1 from '@ionic/angular';
-import { IonicModule } from '@ionic/angular';
-import * as i2 from '@angular/forms';
-import { Validators, ReactiveFormsModule } from '@angular/forms';
-import * as i1$2 from 'ng-otp-input';
-import { NgOtpInputComponent, NgOtpInputModule } from 'ng-otp-input';
-import { BehaviorSubject } from 'rxjs';
-import { HttpClientModule } from '@angular/common/http';
-
-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 = {}));
-
-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.0", ngImport: i0, type: DownloadService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: DownloadService, providedIn: 'root' }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: DownloadService, decorators: [{
-            type: Injectable,
-            args: [{
-                    providedIn: 'root',
-                }]
-        }] });
-
-class ButtonComponent {
-    constructor(download) {
-        this.download = download;
-        this.states = ComponentStates;
-        this.onClick = new EventEmitter();
-    }
-    ngOnInit() { }
-    clickHandler() {
-        if (this.props.download) {
-            this.download.downloadLinkFromBrowser(this.props.download);
-        }
-        if (this.props.state === this.states.DISABLED) {
-            return;
-        }
-        this.onClick.emit(this.props.token);
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: ButtonComponent, deps: [{ token: DownloadService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.0", type: ButtonComponent, selector: "val-button", inputs: { props: "props" }, outputs: { onClick: "onClick" }, ngImport: i0, template: "<ion-button\n  [type]=\"props.type\"\n  [color]=\"props.color\"\n  [expand]=\"props.expand\"\n  [fill]=\"props.fill\"\n  [size]=\"props.size\"\n  [href]=\"props.href\"\n  [target]=\"props.target\"\n  [shape]=\"props.shape\"\n  (click)=\"clickHandler()\"\n  [disabled]=\"props.state === states.DISABLED\"\n>\n  <ion-icon *ngIf=\"props.icon\" [slot]=\"props.icon.slot\" [name]=\"props.icon.name\"></ion-icon>\n  <ion-spinner *ngIf=\"props.state === states.WORKING\" name=\"circular\"></ion-spinner>\n  <ion-text *ngIf=\"props.state !== states.WORKING\">{{ props.text }}</ion-text>\n</ion-button>\n", styles: ["ion-button{font-family:var(--ion-default-font),Arial,sans-serif}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i1$1.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: i1$1.IonIcon, selector: "ion-icon", inputs: ["color", "flipRtl", "icon", "ios", "lazy", "md", "mode", "name", "sanitize", "size", "src"] }, { kind: "component", type: i1$1.IonSpinner, selector: "ion-spinner", inputs: ["color", "duration", "name", "paused"] }, { kind: "component", type: i1$1.IonText, selector: "ion-text", inputs: ["color", "mode"] }] }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: ButtonComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'val-button', template: "<ion-button\n  [type]=\"props.type\"\n  [color]=\"props.color\"\n  [expand]=\"props.expand\"\n  [fill]=\"props.fill\"\n  [size]=\"props.size\"\n  [href]=\"props.href\"\n  [target]=\"props.target\"\n  [shape]=\"props.shape\"\n  (click)=\"clickHandler()\"\n  [disabled]=\"props.state === states.DISABLED\"\n>\n  <ion-icon *ngIf=\"props.icon\" [slot]=\"props.icon.slot\" [name]=\"props.icon.name\"></ion-icon>\n  <ion-spinner *ngIf=\"props.state === states.WORKING\" name=\"circular\"></ion-spinner>\n  <ion-text *ngIf=\"props.state !== states.WORKING\">{{ props.text }}</ion-text>\n</ion-button>\n", styles: ["ion-button{font-family:var(--ion-default-font),Arial,sans-serif}\n"] }]
-        }], ctorParameters: () => [{ type: DownloadService }], propDecorators: { props: [{
-                type: Input
-            }], onClick: [{
-                type: Output
-            }] } });
-
-const Icon = (name, slot) => {
-    return {
-        name,
-        slot,
-    };
-};
-/* name convention: COLOR FILL SIZE [optionals: SHAPE EXPAND ICON HREF/DOWNLOAD] TYPE */
-const BaseDefault = (text, type) => {
-    return {
-        color: 'primary',
-        state: 'ENABLED',
-        text,
-        size: 'default',
-        type,
-    };
-};
-const ClearDefault = (text, type) => {
-    return { ...BaseDefault(text, type), fill: 'clear' };
-};
-const ClearDefaultRound = (text, type) => {
-    return { ...ClearDefault(text, type), shape: 'round' };
-};
-const SolidDefault = (text, type) => {
-    return { ...BaseDefault(text, type), fill: 'solid' };
-};
-const SolidDefaultRound = (text, type) => {
-    return { ...SolidDefault(text, type), shape: 'round' };
-};
-const OutlineDefault = (text, type) => {
-    return { ...BaseDefault(text, type), fill: 'outline' };
-};
-const OutlineDefaultRound = (text, type) => {
-    return { ...OutlineDefault(text, type), shape: 'round' };
-};
-const ClearDefaultFull = (text, type) => {
-    return { ...ClearDefault(text, type), expand: 'full' };
-};
-const ClearDefaultRoundFull = (text, type) => {
-    return { ...ClearDefaultRound(text, type), expand: 'full' };
-};
-const ClearDefaultBlock = (text, type) => {
-    return { ...ClearDefault(text, type), expand: 'block' };
-};
-const ClearDefaultRoundBlock = (text, type) => {
-    return { ...ClearDefaultRound(text, type), expand: 'block' };
-};
-const SolidDefaultFull = (text, type) => {
-    return { ...SolidDefault(text, type), expand: 'full' };
-};
-const SolidDefaultRoundFull = (text, type) => {
-    return { ...SolidDefaultRound(text, type), expand: 'full' };
-};
-const SolidDefaultBlock = (text, type) => {
-    return { ...SolidDefault(text, type), expand: 'block' };
-};
-const SolidDefaultRoundBlock = (text, type) => {
-    return { ...SolidDefaultRound(text, type), expand: 'block' };
-};
-const OutlineDefaultFull = (text, type) => {
-    return { ...OutlineDefault(text, type), expand: 'full' };
-};
-const OutlineDefaultRoundFull = (text, type) => {
-    return { ...OutlineDefaultRound(text, type), expand: 'full' };
-};
-const OutlineDefaultBlock = (text, type) => {
-    return { ...OutlineDefault(text, type), expand: 'block' };
-};
-const OutlineDefaultRoundBlock = (text, type) => {
-    return { ...OutlineDefaultRound(text, type), expand: 'block' };
-};
-const SolidDefaultButton = (text) => {
-    return SolidDefault(text, 'button');
-};
-const SolidSmallButton = (text) => {
-    return { ...SolidDefault(text, 'button'), size: 'small' };
-};
-const SolidLargeButton = (text) => {
-    return { ...SolidDefault(text, 'button'), size: 'large' };
-};
-const SolidDefaultRoundButton = (text) => {
-    return SolidDefaultRound(text, 'button');
-};
-const SolidSmallRoundButton = (text) => {
-    return { ...SolidDefaultRound(text, 'button'), size: 'small' };
-};
-const SolidLargeRoundButton = (text) => {
-    return { ...SolidDefaultRound(text, 'button'), size: 'large' };
-};
-const SolidFullButton = (text) => {
-    return SolidDefaultFull(text, 'button');
-};
-const SolidBlockButton = (text) => {
-    return SolidDefaultBlock(text, 'button');
-};
-/** PRIMARY */
-const PrimarySolidDefaultRoundButton = (text) => {
-    return { ...SolidDefaultRoundButton(text), color: 'primary' };
-};
-const PrimarySolidDefaultRoundIconButton = (text, icon) => {
-    return { ...PrimarySolidDefaultRoundButton(text), icon };
-};
-const PrimarySolidDefaultRoundHrefButton = (text, href, target) => {
-    return { ...PrimarySolidDefaultRoundButton(text), href, target };
-};
-const PrimarySolidDefaultRoundIconHrefButton = (text, icon, href, target) => {
-    return { ...PrimarySolidDefaultRoundIconButton(text, icon), href, target };
-};
-const PrimarySolidSmallRoundButton = (text) => {
-    return { ...SolidSmallRoundButton(text), color: 'primary' };
-};
-const PrimarySolidSmallRoundIconButton = (text, icon) => {
-    return { ...PrimarySolidSmallRoundButton(text), icon };
-};
-const PrimarySolidSmallRoundHrefButton = (text, href, target) => {
-    return { ...PrimarySolidSmallRoundButton(text), href, target };
-};
-const PrimarySolidSmallRoundIconHrefButton = (text, icon, href, target) => {
-    return { ...PrimarySolidSmallRoundIconButton(text, icon), href, target };
-};
-const PrimarySolidLargeRoundButton = (text) => {
-    return { ...SolidLargeRoundButton(text), color: 'primary' };
-};
-const PrimarySolidLargeRoundIconButton = (text, icon) => {
-    return { ...PrimarySolidLargeRoundButton(text), icon };
-};
-const PrimarySolidLargeRoundHrefButton = (text, href, target) => {
-    return { ...PrimarySolidLargeRoundButton(text), href, target };
-};
-const PrimarySolidLargeRoundIconHrefButton = (text, icon, href, target) => {
-    return { ...PrimarySolidLargeRoundIconButton(text, icon), href, target };
-};
-const PrimarySolidBlockButton = (text) => {
-    return { ...SolidBlockButton(text), color: 'primary' };
-};
-const PrimarySolidBlockIconButton = (text, icon) => {
-    return { ...PrimarySolidBlockButton(text), icon };
-};
-const PrimarySolidBlockHrefButton = (text, href, target) => {
-    return { ...PrimarySolidBlockButton(text), href, target };
-};
-const PrimarySolidBlockIconHrefButton = (text, icon, href, target) => {
-    return { ...PrimarySolidBlockIconButton(text, icon), href, target };
-};
-const PrimarySolidFullButton = (text) => {
-    return { ...SolidFullButton(text), color: 'primary' };
-};
-const PrimarySolidFullIconButton = (text, icon) => {
-    return { ...PrimarySolidFullButton(text), icon };
-};
-const PrimarySolidFullHrefButton = (text, href, target) => {
-    return { ...PrimarySolidFullButton(text), href, target };
-};
-const PrimarySolidFullIconHrefButton = (text, icon, href, target) => {
-    return { ...PrimarySolidFullIconButton(text, icon), href, target };
-};
-/** SECONDARY */
-const SecondarySolidDefaultRoundButton = (text) => {
-    return { ...SolidDefaultRoundButton(text), color: 'secondary' };
-};
-const SecondarySolidDefaultRoundIconButton = (text, icon) => {
-    return { ...SecondarySolidDefaultRoundButton(text), icon };
-};
-const SecondarySolidDefaultRoundHrefButton = (text, href, target) => {
-    return { ...SecondarySolidDefaultRoundButton(text), href, target };
-};
-const SecondarySolidDefaultRoundIconHrefButton = (text, icon, href, target) => {
-    return { ...SecondarySolidDefaultRoundIconButton(text, icon), href, target };
-};
-const SecondarySolidSmallRoundButton = (text) => {
-    return { ...SolidSmallRoundButton(text), color: 'secondary' };
-};
-const SecondarySolidSmallRoundIconButton = (text, icon) => {
-    return { ...SecondarySolidSmallRoundButton(text), icon };
-};
-const SecondarySolidSmallRoundHrefButton = (text, href, target) => {
-    return { ...SecondarySolidSmallRoundButton(text), href, target };
-};
-const SecondarySolidSmallRoundIconHrefButton = (text, icon, href, target) => {
-    return { ...SecondarySolidSmallRoundIconButton(text, icon), href, target };
-};
-const SecondarySolidLargeRoundButton = (text) => {
-    return { ...SolidLargeRoundButton(text), color: 'secondary' };
-};
-const SecondarySolidLargeRoundIconButton = (text, icon) => {
-    return { ...SecondarySolidLargeRoundButton(text), icon };
-};
-const SecondarySolidLargeRoundHrefButton = (text, href, target) => {
-    return { ...SecondarySolidLargeRoundButton(text), href, target };
-};
-const SecondarySolidLargeRoundIconHrefButton = (text, icon, href, target) => {
-    return { ...SecondarySolidLargeRoundIconButton(text, icon), href, target };
-};
-const SecondarySolidFullButton = (text) => {
-    return { ...SolidFullButton(text), color: 'secondary' };
-};
-const SecondarySolidFullIconButton = (text, icon) => {
-    return { ...SecondarySolidFullButton(text), icon };
-};
-const SecondarySolidFullHrefButton = (text, href, target) => {
-    return { ...SecondarySolidFullButton(text), href, target };
-};
-const SecondarySolidFullIconHrefButton = (text, icon, href, target) => {
-    return { ...SecondarySolidFullIconButton(text, icon), href, target };
-};
-const SecondarySolidBlockButton = (text) => {
-    return { ...SolidBlockButton(text), color: 'secondary' };
-};
-const SecondarySolidBlockIconButton = (text, icon) => {
-    return { ...SecondarySolidBlockButton(text), icon };
-};
-const SecondarySolidBlockHrefButton = (text, href, target) => {
-    return { ...SecondarySolidBlockButton(text), href, target };
-};
-const SecondarySolidBlockIconHrefButton = (text, icon, href, target) => {
-    return { ...SecondarySolidBlockIconButton(text, icon), href, target };
-};
-
-class TextComponent {
-    constructor() {
-        this.bold = false;
-    }
-    ngOnInit() { }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: TextComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.0", type: TextComponent, selector: "val-text", inputs: { size: "size", color: "color", content: "content", bold: "bold" }, ngImport: i0, template: "<ion-text [color]=\"color\">\n  <p [class]=\"size\" [class.bold]=\"bold\">\n    {{ content }}\n  </p>\n</ion-text>\n", 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: i1$1.IonText, selector: "ion-text", inputs: ["color", "mode"] }] }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: TextComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'val-text', template: "<ion-text [color]=\"color\">\n  <p [class]=\"size\" [class.bold]=\"bold\">\n    {{ content }}\n  </p>\n</ion-text>\n", 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: { size: [{
-                type: Input
-            }], color: [{
-                type: Input
-            }], content: [{
-                type: Input
-            }], bold: [{
-                type: Input
-            }] } });
-
-class TitleComponent {
-    constructor() { }
-    ngOnInit() { }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: TitleComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.0", type: TitleComponent, selector: "val-title", inputs: { size: "size", color: "color", content: "content" }, ngImport: i0, template: "<ion-text [color]=\"color\">\n  <p [class]=\"size\">\n    {{ content }}\n  </p>\n</ion-text>\n", 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: "component", type: i1$1.IonText, selector: "ion-text", inputs: ["color", "mode"] }] }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: TitleComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'val-title', template: "<ion-text [color]=\"color\">\n  <p [class]=\"size\">\n    {{ content }}\n  </p>\n</ion-text>\n", 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: { size: [{
-                type: Input
-            }], color: [{
-                type: Input
-            }], content: [{
-                type: Input
-            }] } });
-
-class DisplayComponent {
-    constructor() { }
-    ngOnInit() { }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: DisplayComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.0", type: DisplayComponent, selector: "val-display", inputs: { size: "size", color: "color", content: "content" }, ngImport: i0, template: "<ion-text [color]=\"color\">\n  <p [class]=\"size\">\n    {{ content }}\n  </p>\n</ion-text>\n", 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: i1$1.IonText, selector: "ion-text", inputs: ["color", "mode"] }] }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: DisplayComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'val-display', template: "<ion-text [color]=\"color\">\n  <p [class]=\"size\">\n    {{ content }}\n  </p>\n</ion-text>\n", 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: { size: [{
-                type: Input
-            }], color: [{
-                type: Input
-            }], content: [{
-                type: Input
-            }] } });
-
-class AvatarComponent {
-    constructor() {
-        this.size = 'medium';
-        this.box = false;
-        this.onClick = new EventEmitter();
-    }
-    ngOnInit() { }
-    onClickHandler() {
-        this.onClick.emit();
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: AvatarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.0", type: AvatarComponent, selector: "val-avatar", inputs: { image: "image", default: "default", size: "size", box: "box" }, outputs: { onClick: "onClick" }, ngImport: i0, template: "<ion-avatar [class]=\"size\" [class.box]=\"box\" (click)=\"onClickHandler()\">\n  <img alt=\"profile image\" [src]=\"image || default\" />\n</ion-avatar>\n", 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: i1$1.IonAvatar, selector: "ion-avatar" }] }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: AvatarComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'val-avatar', template: "<ion-avatar [class]=\"size\" [class.box]=\"box\" (click)=\"onClickHandler()\">\n  <img alt=\"profile image\" [src]=\"image || default\" />\n</ion-avatar>\n", 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: { image: [{
-                type: Input
-            }], default: [{
-                type: Input
-            }], size: [{
-                type: Input
-            }], box: [{
-                type: Input
-            }], onClick: [{
-                type: Output
-            }] } });
-
-class DividerComponent {
-    constructor() {
-        this.size = 'small';
-        this.color = 'dark';
-        this.fill = 'solid';
-    }
-    ngOnInit() { }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: DividerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.0", type: DividerComponent, selector: "val-divider", inputs: { size: "size", color: "color", fill: "fill" }, ngImport: i0, template: "<div [ngClass]=\"['divider', size, color, fill]\"></div>\n", 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: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: DividerComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'val-divider', template: "<div [ngClass]=\"['divider', size, color, fill]\"></div>\n", 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: { size: [{
-                type: Input
-            }], color: [{
-                type: Input
-            }], fill: [{
-                type: Input
-            }] } });
-
-class BoxComponent {
-    constructor() {
-        this.bordered = false;
-        this.leftBorder = false;
-        this.onClick = new EventEmitter();
-    }
-    ngOnInit() { }
-    clickHandler() {
-        this.onClick.emit();
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: BoxComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.0", type: BoxComponent, selector: "val-box", inputs: { color: "color", icon: "icon", bordered: "bordered", leftBorder: "leftBorder" }, outputs: { onClick: "onClick" }, ngImport: i0, template: "<ion-card class=\"box\" [color]=\"color\" [class.bordered]=\"bordered\" [class.transparent]=\"!color\"[class.left-border]=\"leftBorder\">\n  <ion-icon *ngIf=\"!!icon\" class=\"icon\" [name]=\"icon\" (click)=\"clickHandler()\"></ion-icon>\n  <ng-content select=\"[body]\"></ng-content>\n</ion-card>\n", styles: [".bordered{border:.0625rem solid var(--ion-color-medium)}.box{width:100%;margin:0rem;border-radius:0rem;box-shadow:none;padding:.25rem}@media (min-width: 768px){.box{padding:.5rem}}.icon{cursor:pointer;margin:0rem;padding:0rem;position:absolute;right:.25rem;top:.25rem;font-size:1rem}@media (min-width: 768px){.icon{right:.5rem;top:.5rem;font-size:1.5rem}}.left-border{border-left:.1875rem solid #dde3ed}.left-border.small{border-width:.1875rem}.left-border.medium{border-width:.375rem}.left-border.large{border-width:.4375rem}.left-border.xlarge{border-width:.5rem}.transparent{--background: transparent}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i1$1.IonCard, selector: "ion-card", inputs: ["button", "color", "disabled", "download", "href", "mode", "rel", "routerAnimation", "routerDirection", "target", "type"] }, { kind: "component", type: i1$1.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.0", ngImport: i0, type: BoxComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'val-box', template: "<ion-card class=\"box\" [color]=\"color\" [class.bordered]=\"bordered\" [class.transparent]=\"!color\"[class.left-border]=\"leftBorder\">\n  <ion-icon *ngIf=\"!!icon\" class=\"icon\" [name]=\"icon\" (click)=\"clickHandler()\"></ion-icon>\n  <ng-content select=\"[body]\"></ng-content>\n</ion-card>\n", styles: [".bordered{border:.0625rem solid var(--ion-color-medium)}.box{width:100%;margin:0rem;border-radius:0rem;box-shadow:none;padding:.25rem}@media (min-width: 768px){.box{padding:.5rem}}.icon{cursor:pointer;margin:0rem;padding:0rem;position:absolute;right:.25rem;top:.25rem;font-size:1rem}@media (min-width: 768px){.icon{right:.5rem;top:.5rem;font-size:1.5rem}}.left-border{border-left:.1875rem solid #dde3ed}.left-border.small{border-width:.1875rem}.left-border.medium{border-width:.375rem}.left-border.large{border-width:.4375rem}.left-border.xlarge{border-width:.5rem}.transparent{--background: transparent}\n"] }]
-        }], ctorParameters: () => [], propDecorators: { color: [{
-                type: Input
-            }], icon: [{
-                type: Input
-            }], bordered: [{
-                type: Input
-            }], leftBorder: [{
-                type: Input
-            }], onClick: [{
-                type: Output
-            }] } });
-
-class IconComponent {
-    constructor() {
-        this.size = 'small';
-    }
-    ngOnInit() { }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: IconComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.0", type: IconComponent, selector: "val-icon", inputs: { size: "size", color: "color", name: "name" }, ngImport: i0, template: "<ion-icon [ngClass]=\"[size]\" [name]=\"name\" [color]=\"color\"></ion-icon>\n", 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: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: i1$1.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.0", ngImport: i0, type: IconComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'val-icon', template: "<ion-icon [ngClass]=\"[size]\" [name]=\"name\" [color]=\"color\"></ion-icon>\n", 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: { size: [{
-                type: Input
-            }], color: [{
-                type: Input
-            }], name: [{
-                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.0", ngImport: i0, type: ImageComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.0", type: ImageComponent, selector: "val-image", inputs: { props: "props" }, ngImport: i0, template: "<img\n  [ngClass]=\"['image', props.mode, props.size]\"\n  [class.bordered]=\"props.bordered\"\n  [class.shaded]=\"props.shaded\"\n  [class.limited]=\"props.limited\"\n  [class.visible]=\"available\"\n  [src]=\"props.src\"\n  [alt]=\"props.alt\"\n  [style.width.px]=\"props.width\"\n  [style.max-width.px]=\"props.width\"\n  [style.height.px]=\"props.height\"\n/>\n", 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: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: ImageComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'val-image', template: "<img\n  [ngClass]=\"['image', props.mode, props.size]\"\n  [class.bordered]=\"props.bordered\"\n  [class.shaded]=\"props.shaded\"\n  [class.limited]=\"props.limited\"\n  [class.visible]=\"available\"\n  [src]=\"props.src\"\n  [alt]=\"props.alt\"\n  [style.width.px]=\"props.width\"\n  [style.max-width.px]=\"props.width\"\n  [style.height.px]=\"props.height\"\n/>\n", 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 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.0", ngImport: i0, type: HrefComponent, deps: [{ token: DownloadService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.0", type: HrefComponent, 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\"\n  (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"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: HrefComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'val-href', template: "<a [ngClass]=\"[props.color]\" [class.hoverable]=\"props.hoverable\" [href]=\"props.url\" target=\"_blank\"\n  (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 ProgressBarComponent {
-    constructor() {
-        this.size = 'small';
-        this.buffer = 1;
-        this.type = 'determinate';
-        this.rounded = false;
-    }
-    ngOnInit() { }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: ProgressBarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.0", type: ProgressBarComponent, selector: "val-progress-bar", inputs: { progress: "progress", size: "size", color: "color", buffer: "buffer", type: "type", rounded: "rounded" }, ngImport: i0, template: "<ion-progress-bar [ngClass]=\"[size]\" [class.rounded]=\"rounded\" [value]=\"progress\" [color]=\"color\" [buffer]=\"buffer\" [type]=\"type\"></ion-progress-bar>", styles: ["ion-progress-bar.rounded{border-radius:.5rem}.medium{height:.25rem}.large{height:.375rem}.xlarge{height:.5rem}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: i1$1.IonProgressBar, selector: "ion-progress-bar", inputs: ["buffer", "color", "mode", "reversed", "type", "value"] }] }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: ProgressBarComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'val-progress-bar', template: "<ion-progress-bar [ngClass]=\"[size]\" [class.rounded]=\"rounded\" [value]=\"progress\" [color]=\"color\" [buffer]=\"buffer\" [type]=\"type\"></ion-progress-bar>", styles: ["ion-progress-bar.rounded{border-radius:.5rem}.medium{height:.25rem}.large{height:.375rem}.xlarge{height:.5rem}\n"] }]
-        }], ctorParameters: () => [], propDecorators: { progress: [{
-                type: Input
-            }], size: [{
-                type: Input
-            }], color: [{
-                type: Input
-            }], buffer: [{
-                type: Input
-            }], type: [{
-                type: Input
-            }], rounded: [{
-                type: Input
-            }] } });
-
-class ContentLoaderComponent {
-    constructor() {
-        this.color = 'primary';
-        this.size = 'small';
-        this.name = 'circular';
-    }
-    ngOnInit() { }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: ContentLoaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.0", type: ContentLoaderComponent, selector: "val-content-loader", inputs: { color: "color", size: "size", name: "name", text: "text" }, ngImport: i0, template: "<div [ngClass]=\"['spinner-wrapper', size]\">\n  <ion-spinner [ngClass]=\"[size]\" [name]=\"name\" [color]=\"color\"></ion-spinner>\n  <ion-text [color]=\"color\">\n    <p>{{ text }}</p>\n  </ion-text>\n</div>\n", 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: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: i1$1.IonSpinner, selector: "ion-spinner", inputs: ["color", "duration", "name", "paused"] }, { kind: "component", type: i1$1.IonText, selector: "ion-text", inputs: ["color", "mode"] }] }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: ContentLoaderComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'val-content-loader', template: "<div [ngClass]=\"['spinner-wrapper', size]\">\n  <ion-spinner [ngClass]=\"[size]\" [name]=\"name\" [color]=\"color\"></ion-spinner>\n  <ion-text [color]=\"color\">\n    <p>{{ text }}</p>\n  </ion-text>\n</div>\n", 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: { color: [{
-                type: Input
-            }], size: [{
-                type: Input
-            }], name: [{
-                type: Input
-            }], text: [{
-                type: Input
-            }] } });
-
-class LinkComponent {
-    constructor() {
-        this.onClick = new EventEmitter();
-    }
-    ngOnInit() { }
-    onClickHandler() {
-        this.onClick.emit();
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: LinkComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.0", type: LinkComponent, selector: "val-link", inputs: { text: "text", size: "size", color: "color" }, outputs: { onClick: "onClick" }, ngImport: i0, template: "<div>\n  <ion-button type=\"button\" [color]=\"color\" fill=\"clear\" [size]=\"size\" (click)=\"onClickHandler()\">\n    <ion-icon slot=\"end\" name=\"chevron-forward-outline\"></ion-icon>\n    <ion-text>{{ text }}</ion-text>\n  </ion-button>\n</div>\n", styles: ["ion-button{font-family:var(--ion-default-font),Arial,sans-serif}\n"], dependencies: [{ kind: "component", type: i1$1.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: i1$1.IonIcon, selector: "ion-icon", inputs: ["color", "flipRtl", "icon", "ios", "lazy", "md", "mode", "name", "sanitize", "size", "src"] }, { kind: "component", type: i1$1.IonText, selector: "ion-text", inputs: ["color", "mode"] }] }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: LinkComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'val-link', template: "<div>\n  <ion-button type=\"button\" [color]=\"color\" fill=\"clear\" [size]=\"size\" (click)=\"onClickHandler()\">\n    <ion-icon slot=\"end\" name=\"chevron-forward-outline\"></ion-icon>\n    <ion-text>{{ text }}</ion-text>\n  </ion-button>\n</div>\n", styles: ["ion-button{font-family:var(--ion-default-font),Arial,sans-serif}\n"] }]
-        }], ctorParameters: () => [], propDecorators: { text: [{
-                type: Input
-            }], size: [{
-                type: Input
-            }], color: [{
-                type: Input
-            }], onClick: [{
-                type: Output
-            }] } });
-
-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.0", ngImport: i0, type: SearchbarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.0", type: SearchbarComponent, selector: "app-searchbar", inputs: { disabled: "disabled" }, outputs: { focusEvent: "focusEvent", blurEvent: "blurEvent", filterEvent: "filterEvent" }, ngImport: i0, template: "<ion-searchbar mode=\"ios\" debounce=\"500\" placeholder=\"B\u00FAsqueda\" [disabled]=\"disabled\"\n  showCancelButton=\"focus\" cancelButtonText=\"Cancelar\" (ionInput)=\"onSearch($event)\" \n  (ionBlur)=\"onBlur()\" (ionFocus)=\"onFocus()\">\n</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"], dependencies: [{ kind: "component", type: i1$1.IonSearchbar, selector: "ion-searchbar", inputs: ["animated", "autocapitalize", "autocomplete", "autocorrect", "cancelButtonIcon", "cancelButtonText", "clearIcon", "color", "debounce", "disabled", "enterkeyhint", "inputmode", "maxlength", "minlength", "mode", "name", "placeholder", "searchIcon", "showCancelButton", "showClearButton", "spellcheck", "type", "value"] }, { kind: "directive", type: i1$1.TextValueAccessor, selector: "ion-input:not([type=number]),ion-textarea,ion-searchbar,ion-range" }] }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: SearchbarComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'app-searchbar', template: "<ion-searchbar mode=\"ios\" debounce=\"500\" placeholder=\"B\u00FAsqueda\" [disabled]=\"disabled\"\n  showCancelButton=\"focus\" cancelButtonText=\"Cancelar\" (ionInput)=\"onSearch($event)\" \n  (ionBlur)=\"onBlur()\" (ionFocus)=\"onFocus()\">\n</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 ButtonGroupComponent {
-    constructor() {
-        this.position = 'left';
-        this.columned = false;
-        this.onClick = new EventEmitter();
-    }
-    ngOnInit() { }
-    clickHandler(token) {
-        this.onClick.emit(token);
-    }
-    get Position() {
-        if (this.buttons.length === 1 && this.position === 'spaced') {
-            return 'right';
-        }
-        return this.position;
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: ButtonGroupComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.0", type: ButtonGroupComponent, selector: "val-button-group", inputs: { buttons: "buttons", position: "position", columned: "columned" }, outputs: { onClick: "onClick" }, ngImport: i0, template: "<div [ngClass]=\"['group-container', Position]\" [class.column]=\"columned\" style=\"width: 100%;\">\n  <val-button *ngFor=\"let b of buttons\" [props]=\"b\" (click)=\"clickHandler(b?.token)\" [ngStyle]=\"{'width': buttons.length === 1 ? '100%' : 'auto'}\"></val-button>\n</div>\n", 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: "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.0", ngImport: i0, type: ButtonGroupComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'val-button-group', template: "<div [ngClass]=\"['group-container', Position]\" [class.column]=\"columned\" style=\"width: 100%;\">\n  <val-button *ngFor=\"let b of buttons\" [props]=\"b\" (click)=\"clickHandler(b?.token)\" [ngStyle]=\"{'width': buttons.length === 1 ? '100%' : 'auto'}\"></val-button>\n</div>\n", 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: { buttons: [{
-                type: Input
-            }], position: [{
-                type: Input
-            }], columned: [{
-                type: Input
-            }], onClick: [{
-                type: Output
-            }] } });
-
-class TitleBlockComponent {
-    constructor() {
-        this.position = 'left';
-    }
-    ngOnInit() { }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: TitleBlockComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.0", type: TitleBlockComponent, selector: "val-title-block", inputs: { position: "position", title: "title", aboveTitle: "aboveTitle", bellowTitle: "bellowTitle" }, ngImport: i0, template: "<div [ngClass]=\"['titles-container', position]\">\n  <val-title\n    *ngIf=\"aboveTitle\"\n    [size]=\"aboveTitle.size\"\n    [color]=\"aboveTitle.color\"\n    content=\"{{ aboveTitle.text | uppercase }}\"\n  ></val-title>\n  <val-display\n    *ngIf=\"title\"\n    [size]=\"title.size\"\n    [color]=\"title.color\"\n    [content]=\"title.text\"\n  ></val-display>\n  <val-title\n    *ngIf=\"bellowTitle\"\n    [size]=\"bellowTitle.size\"\n    [color]=\"bellowTitle.color\"\n    [content]=\"bellowTitle.text\"\n  ></val-title>\n</div>\n", 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: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: DisplayComponent, selector: "val-display", inputs: ["size", "color", "content"] }, { kind: "component", type: TitleComponent, selector: "val-title", inputs: ["size", "color", "content"] }, { kind: "pipe", type: i1.UpperCasePipe, name: "uppercase" }] }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: TitleBlockComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'val-title-block', template: "<div [ngClass]=\"['titles-container', position]\">\n  <val-title\n    *ngIf=\"aboveTitle\"\n    [size]=\"aboveTitle.size\"\n    [color]=\"aboveTitle.color\"\n    content=\"{{ aboveTitle.text | uppercase }}\"\n  ></val-title>\n  <val-display\n    *ngIf=\"title\"\n    [size]=\"title.size\"\n    [color]=\"title.color\"\n    [content]=\"title.text\"\n  ></val-display>\n  <val-title\n    *ngIf=\"bellowTitle\"\n    [size]=\"bellowTitle.size\"\n    [color]=\"bellowTitle.color\"\n    [content]=\"bellowTitle.text\"\n  ></val-title>\n</div>\n", 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: { position: [{
-                type: Input
-            }], title: [{
-                type: Input
-            }], aboveTitle: [{
-                type: Input
-            }], bellowTitle: [{
-                type: Input
-            }] } });
-
-class NotesBoxComponent {
-    constructor() {
-        this.color = 'light';
-        this.size = 'small';
-    }
-    ngOnInit() { }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: NotesBoxComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.0", type: NotesBoxComponent, selector: "val-notes-box", inputs: { color: "color", textColor: "textColor", prefix: "prefix", text: "text", size: "size" }, ngImport: i0, template: "<val-box [color]=\"color\" icon=\"\" [bordered]=\"false\" [leftBorder]=\"true\">\n  <div [ngClass]=\"['content-container', size]\" body>\n    <val-text [content]=\"prefix\" [size]=\"size\" [bold]=\"true\" [color]=\"textColor\"></val-text>\n    <val-text [content]=\"text\" [size]=\"size\" [bold]=\"false\" [color]=\"textColor\"></val-text>\n  </div>\n</val-box>\n", styles: [".content-container{display:inline-grid}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: BoxComponent, selector: "val-box", inputs: ["color", "icon", "bordered", "leftBorder"], outputs: ["onClick"] }, { kind: "component", type: TextComponent, selector: "val-text", inputs: ["size", "color", "content", "bold"] }] }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: NotesBoxComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'val-notes-box', template: "<val-box [color]=\"color\" icon=\"\" [bordered]=\"false\" [leftBorder]=\"true\">\n  <div [ngClass]=\"['content-container', size]\" body>\n    <val-text [content]=\"prefix\" [size]=\"size\" [bold]=\"true\" [color]=\"textColor\"></val-text>\n    <val-text [content]=\"text\" [size]=\"size\" [bold]=\"false\" [color]=\"textColor\"></val-text>\n  </div>\n</val-box>\n", styles: [".content-container{display:inline-grid}\n"] }]
-        }], ctorParameters: () => [], propDecorators: { color: [{
-                type: Input
-            }], textColor: [{
-                type: Input
-            }], prefix: [{
-                type: Input
-            }], text: [{
-                type: Input
-            }], size: [{
-                type: Input
-            }] } });
-
-class AlertBoxComponent {
-    constructor() {
-        this.color = 'warning';
-        this.icon = 'alert-circle-outline';
-        this.bold = false;
-        this.size = 'small';
-    }
-    ngOnInit() { }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: AlertBoxComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.0", type: AlertBoxComponent, selector: "val-alert-box", inputs: { color: "color", icon: "icon", text: "text", bold: "bold", size: "size" }, ngImport: i0, template: "<val-box [color]=\"color\" icon=\"\" [bordered]=\"false\">\n  <div class=\"content-container\" body>\n    <val-icon [name]=\"icon\" [size]=\"size\"></val-icon>\n    <val-text class=\"text\" [content]=\"text\" [size]=\"size\" [bold]=\"bold\"></val-text>\n  </div>\n</val-box>\n", styles: [".text{margin-left:.25rem}.content-container{display:flex;align-items:flex-start}\n"], dependencies: [{ kind: "component", type: BoxComponent, selector: "val-box", inputs: ["color", "icon", "bordered", "leftBorder"], outputs: ["onClick"] }, { kind: "component", type: TextComponent, selector: "val-text", inputs: ["size", "color", "content", "bold"] }, { kind: "component", type: IconComponent, selector: "val-icon", inputs: ["size", "color", "name"] }] }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: AlertBoxComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'val-alert-box', template: "<val-box [color]=\"color\" icon=\"\" [bordered]=\"false\">\n  <div class=\"content-container\" body>\n    <val-icon [name]=\"icon\" [size]=\"size\"></val-icon>\n    <val-text class=\"text\" [content]=\"text\" [size]=\"size\" [bold]=\"bold\"></val-text>\n  </div>\n</val-box>\n", styles: [".text{margin-left:.25rem}.content-container{display:flex;align-items:flex-start}\n"] }]
-        }], ctorParameters: () => [], propDecorators: { color: [{
-                type: Input
-            }], icon: [{
-                type: Input
-            }], text: [{
-                type: Input
-            }], bold: [{
-                type: Input
-            }], size: [{
-                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.0", ngImport: i0, type: BannerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.0", type: BannerComponent, selector: "val-banner", inputs: { props: "props" }, outputs: { onClick: "onClick", onClose: "onClose" }, ngImport: i0, template: "<val-box\n  [icon]=\"props.closable ? 'close-outline' : ''\"\n  [bordered]=\"props.bordered\"\n  (onClick)=\"closeHandler()\"\n>\n  <div [ngClass]=\"['content-container', props.mode]\" body>\n    <val-title-block\n      [position]=\"props.mode === 'center' ? 'center' : 'left'\"\n      [aboveTitle]=\"props.content.aboveTitle\"\n      [title]=\"props.content.title\"\n      [bellowTitle]=\"props.content.bellowTitle\"\n    ></val-title-block>\n    <val-button-group\n      [position]=\"props.mode === 'center' ? 'center' : 'left'\"\n      class=\"buttons-container\"\n      [buttons]=\"props.actions\"\n      (onClick)=\"clickHandler($event)\"\n    ></val-button-group>\n  </div>\n</val-box>\n", styles: [".content-container{display:flex;justify-content:space-between}.content-container.center{flex-direction:column}.content-container.column{flex-direction:row}.content-container.row,.content-container.hybrid{flex-direction:column}@media (min-width: 768px){.content-container.hybrid{flex-direction:row}}.buttons-container{align-items:center;display:flex}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: BoxComponent, selector: "val-box", inputs: ["color", "icon", "bordered", "leftBorder"], outputs: ["onClick"] }, { kind: "component", type: ButtonGroupComponent, selector: "val-button-group", inputs: ["buttons", "position", "columned"], outputs: ["onClick"] }, { kind: "component", type: TitleBlockComponent, selector: "val-title-block", inputs: ["position", "title", "aboveTitle", "bellowTitle"] }] }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: BannerComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'val-banner', template: "<val-box\n  [icon]=\"props.closable ? 'close-outline' : ''\"\n  [bordered]=\"props.bordered\"\n  (onClick)=\"closeHandler()\"\n>\n  <div [ngClass]=\"['content-container', props.mode]\" body>\n    <val-title-block\n      [position]=\"props.mode === 'center' ? 'center' : 'left'\"\n      [aboveTitle]=\"props.content.aboveTitle\"\n      [title]=\"props.content.title\"\n      [bellowTitle]=\"props.content.bellowTitle\"\n    ></val-title-block>\n    <val-button-group\n      [position]=\"props.mode === 'center' ? 'center' : 'left'\"\n      class=\"buttons-container\"\n      [buttons]=\"props.actions\"\n      (onClick)=\"clickHandler($event)\"\n    ></val-button-group>\n  </div>\n</val-box>\n", styles: [".content-container{display:flex;justify-content:space-between}.content-container.center{flex-direction:column}.content-container.column{flex-direction:row}.content-container.row,.content-container.hybrid{flex-direction:column}@media (min-width: 768px){.content-container.hybrid{flex-direction:row}}.buttons-container{align-items:center;display:flex}\n"] }]
-        }], ctorParameters: () => [], propDecorators: { props: [{
-                type: Input
-            }], onClick: [{
-                type: Output
-            }], onClose: [{
-                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.0", ngImport: i0, type: NoContentComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.0", type: NoContentComponent, selector: "val-no-content", inputs: { props: "props" }, outputs: { onClick: "onClick" }, ngImport: i0, template: "<val-image class=\"image-container\" [props]=\"props.image\"></val-image>\n<div>\n  <val-banner [props]=\"props.content\" (onClick)=\"onClickHandler($event)\"></val-banner>\n</div>\n", styles: [".image-container{display:flex;justify-content:center;margin-bottom:1rem}val-image .image{margin:0 auto}\n"], dependencies: [{ kind: "component", type: BannerComponent, selector: "val-banner", inputs: ["props"], outputs: ["onClick", "onClose"] }, { kind: "component", type: ImageComponent, selector: "val-image", inputs: ["props"] }] }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: NoContentComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'val-no-content', template: "<val-image class=\"image-container\" [props]=\"props.image\"></val-image>\n<div>\n  <val-banner [props]=\"props.content\" (onClick)=\"onClickHandler($event)\"></val-banner>\n</div>\n", 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
-            }] } });
-
-class LinksCakeComponent {
-    constructor() {
-        this.size = 'small';
-    }
-    ngOnInit() { }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: LinksCakeComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.0", type: LinksCakeComponent, selector: "val-links-cake", inputs: { title: "title", links: "links", size: "size" }, ngImport: i0, template: "<div>\n  <div class=\"title\">\n    <val-title color=\"dark\" [content]=\"title\" [size]=\"size\"></val-title>\n  </div>\n  <div class=\"link\" *ngFor=\"let l of links\">\n    <val-href [props]=\"l\"></val-href>\n  </div>\n</div>\n", styles: [".title{margin:1rem 0}.link{margin-bottom:.5rem}\n"], dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "component", type: TitleComponent, selector: "val-title", inputs: ["size", "color", "content"] }, { kind: "component", type: HrefComponent, selector: "val-href", inputs: ["props"], outputs: ["onClick"] }] }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: LinksCakeComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'val-links-cake', template: "<div>\n  <div class=\"title\">\n    <val-title color=\"dark\" [content]=\"title\" [size]=\"size\"></val-title>\n  </div>\n  <div class=\"link\" *ngFor=\"let l of links\">\n    <val-href [props]=\"l\"></val-href>\n  </div>\n</div>\n", styles: [".title{margin:1rem 0}.link{margin-bottom:.5rem}\n"] }]
-        }], ctorParameters: () => [], propDecorators: { title: [{
-                type: Input
-            }], links: [{
-                type: Input
-            }], size: [{
-                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.0", ngImport: i0, type: ProgressStatusComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.0", type: ProgressStatusComponent, selector: "val-progress-status", inputs: { props: "props" }, ngImport: i0, template: "<div class=\"status-container\">\n  <div class=\"title-container\">\n    <val-title-block\n      position=\"center\"\n      [aboveTitle]=\"props.titles.aboveTitle\"\n      [title]=\"props.titles.title\"\n      [bellowTitle]=\"props.titles.bellowTitle\"\n    ></val-title-block>\n  </div>\n  <div class=\"progress-bar-container\">\n    <val-progress-bar\n      [progress]=\"props.progress\"\n      size=\"xlarge\"\n      [color]=\"props.color\"\n      [rounded]=\"true\"\n    ></val-progress-bar>\n  </div>\n  <div class=\"subtitle-container\">\n    <div class=\"subtitle\" [class.blink]=\"blinking\"><val-text [content]=\"Content\" color=\"medium\"></val-text></div>\n  </div>\n</div>\n", 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: TextComponent, selector: "val-text", inputs: ["size", "color", "content", "bold"] }, { kind: "component", type: TitleBlockComponent, selector: "val-title-block", inputs: ["position", "title", "aboveTitle", "bellowTitle"] }, { kind: "component", type: ProgressBarComponent, selector: "val-progress-bar", inputs: ["progress", "size", "color", "buffer", "type", "rounded"] }] }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: ProgressStatusComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'val-progress-status', template: "<div class=\"status-container\">\n  <div class=\"title-container\">\n    <val-title-block\n      position=\"center\"\n      [aboveTitle]=\"props.titles.aboveTitle\"\n      [title]=\"props.titles.title\"\n      [bellowTitle]=\"props.titles.bellowTitle\"\n    ></val-title-block>\n  </div>\n  <div class=\"progress-bar-container\">\n    <val-progress-bar\n      [progress]=\"props.progress\"\n      size=\"xlarge\"\n      [color]=\"props.color\"\n      [rounded]=\"true\"\n    ></val-progress-bar>\n  </div>\n  <div class=\"subtitle-container\">\n    <div class=\"subtitle\" [class.blink]=\"blinking\"><val-text [content]=\"Content\" color=\"medium\"></val-text></div>\n  </div>\n</div>\n", 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 CheckInputComponent {
-    constructor() { }
-    ngOnInit() { }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: CheckInputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.0", type: CheckInputComponent, selector: "val-check-input", ngImport: i0, template: "<ion-checkbox>I agree to the terms and conditions</ion-checkbox>", styles: [""], dependencies: [{ kind: "component", type: i1$1.IonCheckbox, selector: "ion-checkbox", inputs: ["alignment", "checked", "color", "disabled", "indeterminate", "justify", "labelPlacement", "legacy", "mode", "name", "value"] }, { kind: "directive", type: i1$1.BooleanValueAccessor, selector: "ion-checkbox,ion-toggle" }] }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: CheckInputComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'val-check-input', 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.0", ngImport: i0, type: CommentInputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.0", type: CommentInputComponent, selector: "val-comment-input", inputs: { control: "control", metadata: "metadata" }, ngImport: i0, template: "<ion-textarea [formControl]=\"control\" [counter]=\"true\" [maxlength]=\"metadata.range.max\"></ion-textarea>", styles: [""], dependencies: [{ kind: "component", type: i1$1.IonTextarea, selector: "ion-textarea", inputs: ["autoGrow", "autocapitalize", "autofocus", "clearOnEdit", "color", "cols", "counter", "counterFormatter", "debounce", "disabled", "enterkeyhint", "errorText", "fill", "helperText", "inputmode", "label", "labelPlacement", "legacy", "maxlength", "minlength", "mode", "name", "placeholder", "readonly", "required", "rows", "shape", "spellcheck", "value", "wrap"] }, { kind: "directive", type: i1$1.TextValueAccessor, selector: "ion-input:not([type=number]),ion-textarea,ion-searchbar,ion-range" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { kind: "directive", type: i2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }] }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: CommentInputComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'val-comment-input', template: "<ion-textarea [formControl]=\"control\" [counter]=\"true\" [maxlength]=\"metadata.range.max\"></ion-textarea>" }]
-        }], ctorParameters: () => [], propDecorators: { control: [{
-                type: Input
-            }], metadata: [{
-                type: Input
-            }] } });
-
-class DateInputComponent {
-    constructor() {
-    }
-    ngOnInit() { }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: DateInputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.0", type: DateInputComponent, selector: "val-date-input", inputs: { control: "control", metadata: "metadata" }, ngImport: i0, template: "<div class=\"button-container\">\n  <ion-datetime-button class=\"action\" datetime=\"datetime\"></ion-datetime-button>\n</div>\n<ion-modal [keepContentsMounted]=\"true\">\n  <ng-template>\n    <ion-datetime\n      [formControl]=\"control\"\n      id=\"datetime\"\n      presentation=\"date\"\n      locale=\"es-ES\"\n      [firstDayOfWeek]=\"1\"\n      [showDefaultButtons]=\"true\"\n      doneText=\"Aceptar\"\n      cancelText=\"Cancelar\"\n      [formatOptions]=\"{\n        date: { weekday: 'short', month: 'long', day: '2-digit', },\n        time: {\n          hour: '2-digit',\n          minute: '2-digit',\n        },\n      }\"\n    >\n      <span slot=\"title\">{{ metadata.hint }}</span>\n    </ion-datetime>\n  </ng-template>\n</ion-modal>\n", 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: "component", type: i1$1.IonDatetime, selector: "ion-datetime", inputs: ["cancelText", "clearText", "color", "dayValues", "disabled", "doneText", "firstDayOfWeek", "formatOptions", "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: i1$1.IonDatetimeButton, selector: "ion-datetime-button", inputs: ["color", "datetime", "disabled", "mode"] }, { kind: "component", type: i1$1.IonModal, selector: "ion-modal" }, { kind: "directive", type: i1$1.SelectValueAccessor, selector: "ion-select, ion-radio-group, ion-segment, ion-datetime" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }] }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: DateInputComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'val-date-input', template: "<div class=\"button-container\">\n  <ion-datetime-button class=\"action\" datetime=\"datetime\"></ion-datetime-button>\n</div>\n<ion-modal [keepContentsMounted]=\"true\">\n  <ng-template>\n    <ion-datetime\n      [formControl]=\"control\"\n      id=\"datetime\"\n      presentation=\"date\"\n      locale=\"es-ES\"\n      [firstDayOfWeek]=\"1\"\n      [showDefaultButtons]=\"true\"\n      doneText=\"Aceptar\"\n      cancelText=\"Cancelar\"\n      [formatOptions]=\"{\n        date: { weekday: 'short', month: 'long', day: '2-digit', },\n        time: {\n          hour: '2-digit',\n          minute: '2-digit',\n        },\n      }\"\n    >\n      <span slot=\"title\">{{ metadata.hint }}</span>\n    </ion-datetime>\n  </ng-template>\n</ion-modal>\n", 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: { control: [{
-                type: Input
-            }], metadata: [{
-                type: Input
-            }] } });
-
-class EmailInputComponent {
-    constructor() { }
-    ngOnInit() { }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: EmailInputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.0", type: EmailInputComponent, selector: "val-email-input", inputs: { control: "control", metadata: "metadata" }, ngImport: i0, template: "<ion-input\n  [formControl]=\"control\"\n  type=\"email\"\n  [placeholder]=\"metadata.placeholder\"\n></ion-input>\n\n", styles: [""], dependencies: [{ kind: "component", type: i1$1.IonInput, selector: "ion-input", inputs: ["accept", "autocapitalize", "autocomplete", "autocorrect", "autofocus", "clearInput", "clearOnEdit", "color", "counter", "counterFormatter", "debounce", "disabled", "enterkeyhint", "errorText", "fill", "helperText", "inputmode", "label", "labelPlacement", "legacy", "max", "maxlength", "min", "minlength", "mode", "multiple", "name", "pattern", "placeholder", "readonly", "required", "shape", "size", "spellcheck", "step", "type", "value"] }, { kind: "directive", type: i1$1.TextValueAccessor, selector: "ion-input:not([type=number]),ion-textarea,ion-searchbar,ion-range" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }] }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: EmailInputComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'val-email-input', template: "<ion-input\n  [formControl]=\"control\"\n  type=\"email\"\n  [placeholder]=\"metadata.placeholder\"\n></ion-input>\n\n" }]
-        }], ctorParameters: () => [], propDecorators: { control: [{
-                type: Input
-            }], metadata: [{
-                type: Input
-            }] } });
-
-class FileInputComponent {
-    constructor() {
-        this.contrastButton = {
-            ...PrimarySolidDefaultRoundButton('Subir archivo'),
-            color: 'light',
-        };
-    }
-    ngOnInit() { }
-    onFileSelected(event) {
-        this.selectedFile = event.target.files[0];
-        this.control.setValue(this.selectedFile);
-    }
-    reset() {
-        this.selectedFile = null;
-        this.fileInput.nativeElement.value = '';
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: FileInputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.0", type: FileInputComponent, selector: "val-file-input", inputs: { control: "control", metadata: "metadata" }, viewQueries: [{ propertyName: "fileInput", first: true, predicate: ["fileInput"], descendants: true }], ngImport: i0, template: "<div class=\"file-container\">\n  <input style=\"display: none\" type=\"file\" (change)=\"onFileSelected($event)\" #fileInput>\n  <div class=\"name-container\">\n    <ion-icon [name]=\"selectedFile ? 'checkmark-circle-outline' : 'alert-circle-outline'\"></ion-icon>\n    <val-text style=\"margin-left: 4px;\" color=\"dark\" size=\"medium\" [content]=\"selectedFile ? selectedFile.name : 'No has seleccionado archivo'\"></val-text>\n  </div>\n  <val-button [props]=\"contrastButton\" (onClick)=\"fileInput.click()\"></val-button>\n</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"], dependencies: [{ kind: "component", type: i1$1.IonIcon, selector: "ion-icon", inputs: ["color", "flipRtl", "icon", "ios", "lazy", "md", "mode", "name", "sanitize", "size", "src"] }, { kind: "component", type: ButtonComponent, selector: "val-button", inputs: ["props"], outputs: ["onClick"] }, { kind: "component", type: TextComponent, selector: "val-text", inputs: ["size", "color", "content", "bold"] }] }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: FileInputComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'val-file-input', template: "<div class=\"file-container\">\n  <input style=\"display: none\" type=\"file\" (change)=\"onFileSelected($event)\" #fileInput>\n  <div class=\"name-container\">\n    <ion-icon [name]=\"selectedFile ? 'checkmark-circle-outline' : 'alert-circle-outline'\"></ion-icon>\n    <val-text style=\"margin-left: 4px;\" color=\"dark\" size=\"medium\" [content]=\"selectedFile ? selectedFile.name : 'No has seleccionado archivo'\"></val-text>\n  </div>\n  <val-button [props]=\"contrastButton\" (onClick)=\"fileInput.click()\"></val-button>\n</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']
-            }], control: [{
-                type: Input
-            }], metadata: [{
-                type: Input
-            }] } });
-
-class HintComponent {
-    constructor() { }
-    ngOnInit() { }
-    get Errors() {
-        const keys = Object.keys(this.metadata.errors);
-        const errors = [];
-        keys.map((e) => {
-            if (this.control.hasError(e)) {
-                errors.push(this.metadata.errors[e]);
-            }
-        });
-        return errors;
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: HintComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.0", type: HintComponent, selector: "val-hint", inputs: { control: "control", metadata: "metadata" }, ngImport: i0, template: "<div class=\"hint-container\" *ngIf=\"control.invalid && (control.touched || control.dirty)\">\n  <val-text *ngFor=\"let e of Errors\" color=\"danger\" [content]=\"e\" size=\"small\"></val-text>\n</div>", 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: "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: ["size", "color", "content", "bold"] }] }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: HintComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'val-hint', template: "<div class=\"hint-container\" *ngIf=\"control.invalid && (control.touched || control.dirty)\">\n  <val-text *ngFor=\"let e of Errors\" color=\"danger\" [content]=\"e\" size=\"small\"></val-text>\n</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: { control: [{
-                type: Input
-            }], metadata: [{
-                type: Input
-            }] } });
-
-class HourInputComponent {
-    constructor() { }
-    ngOnInit() { }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: HourInputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.0", type: HourInputComponent, selector: "val-hour-input", inputs: { control: "control", metadata: "metadata" }, ngImport: i0, template: "\n<ion-datetime [formControl]=\"control\" presentation=\"time\"></ion-datetime>", styles: [""], dependencies: [{ kind: "component", type: i1$1.IonDatetime, selector: "ion-datetime", inputs: ["cancelText", "clearText", "color", "dayValues", "disabled", "doneText", "firstDayOfWeek", "formatOptions", "highlightedDates", "hourCycle", "hourValues", "isDateEnabled", "locale", "max", "min", "minuteValues", "mode", "monthValues", "multiple", "name", "preferWheel", "presentation", "readonly", "showClearButton", "showDefaultButtons", "showDefaultTimeLabel", "showDefaultTitle", "size", "titleSelectedDatesFormatter", "value", "yearValues"] }, { kind: "directive", type: i1$1.SelectValueAccessor, selector: "ion-select, ion-radio-group, ion-segment, ion-datetime" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }] }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: HourInputComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'val-hour-input', template: "\n<ion-datetime [formControl]=\"control\" presentation=\"time\"></ion-datetime>" }]
-        }], ctorParameters: () => [], propDecorators: { control: [{
-                type: Input
-            }], metadata: [{
-                type: Input
-            }] } });
-
-class NumberInputComponent {
-    constructor() { }
-    ngOnInit() { }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: NumberInputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.0", type: NumberInputComponent, selector: "val-number-input", inputs: { control: "control", metadata: "metadata" }, ngImport: i0, template: "<ion-input\n  [formControl]=\"control\"\n  type=\"number\"\n  [placeholder]=\"metadata.placeholder\"\n></ion-input>", styles: [""], dependencies: [{ kind: "component", type: i1$1.IonInput, selector: "ion-input", inputs: ["accept", "autocapitalize", "autocomplete", "autocorrect", "autofocus", "clearInput", "clearOnEdit", "color", "counter", "counterFormatter", "debounce", "disabled", "enterkeyhint", "errorText", "fill", "helperText", "inputmode", "label", "labelPlacement", "legacy", "max", "maxlength", "min", "minlength", "mode", "multiple", "name", "pattern", "placeholder", "readonly", "required", "shape", "size", "spellcheck", "step", "type", "value"] }, { kind: "directive", type: i1$1.NumericValueAccessor, selector: "ion-input[type=number]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }] }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: NumberInputComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'val-number-input', template: "<ion-input\n  [formControl]=\"control\"\n  type=\"number\"\n  [placeholder]=\"metadata.placeholder\"\n></ion-input>" }]
-        }], ctorParameters: () => [], propDecorators: { control: [{
-                type: Input
-            }], metadata: [{
-                type: Input
-            }] } });
-
-class PasswordInputComponent {
-    constructor() {
-        this.hidePassword = true;
-    }
-    ngOnInit() { }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: PasswordInputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.0", type: PasswordInputComponent, selector: "val-password-input", inputs: { control: "control", metadata: "metadata" }, ngImport: i0, template: "<div class=\"input-container\">\n  <ion-input\n    class=\"sign-in__input-password\"\n    [formControl]=\"control\"\n    [type]=\"hidePassword ? 'password' : 'text'\"\n    [placeholder]=\"metadata.placeholder\"\n  ></ion-input>\n  <ion-button color=\"dark\" fill=\"clear\" (click)=\"hidePassword = !hidePassword\" size=\"small\">\n    <ion-icon slot=\"icon-only\" [name]=\"hidePassword ? 'eye-off-outline' : 'eye-outline'\"></ion-icon>\n  </ion-button>\n</div>\n", 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: "component", type: i1$1.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: i1$1.IonIcon, selector: "ion-icon", inputs: ["color", "flipRtl", "icon", "ios", "lazy", "md", "mode", "name", "sanitize", "size", "src"] }, { kind: "component", type: i1$1.IonInput, selector: "ion-input", inputs: ["accept", "autocapitalize", "autocomplete", "autocorrect", "autofocus", "clearInput", "clearOnEdit", "color", "counter", "counterFormatter", "debounce", "disabled", "enterkeyhint", "errorText", "fill", "helperText", "inputmode", "label", "labelPlacement", "legacy", "max", "maxlength", "min", "minlength", "mode", "multiple", "name", "pattern", "placeholder", "readonly", "required", "shape", "size", "spellcheck", "step", "type", "value"] }, { kind: "directive", type: i1$1.TextValueAccessor, selector: "ion-input:not([type=number]),ion-textarea,ion-searchbar,ion-range" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }] }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: PasswordInputComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'val-password-input', template: "<div class=\"input-container\">\n  <ion-input\n    class=\"sign-in__input-password\"\n    [formControl]=\"control\"\n    [type]=\"hidePassword ? 'password' : 'text'\"\n    [placeholder]=\"metadata.placeholder\"\n  ></ion-input>\n  <ion-button color=\"dark\" fill=\"clear\" (click)=\"hidePassword = !hidePassword\" size=\"small\">\n    <ion-icon slot=\"icon-only\" [name]=\"hidePassword ? 'eye-off-outline' : 'eye-outline'\"></ion-icon>\n  </ion-button>\n</div>\n", 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: { control: [{
-                type: Input
-            }], metadata: [{
-                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.0", ngImport: i0, type: PinInputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.0", type: PinInputComponent, selector: "val-pin-input", inputs: { control: "control", metadata: "metadata" }, viewQueries: [{ propertyName: "pinCode", first: true, predicate: NgOtpInputComponent, descendants: true }], ngImport: i0, template: "<div class=\"otp\">\n  <ng-otp-input [formCtrl]=\"control\" [config]=\"otpInputConfig\"></ng-otp-input>\n</div>\n", 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: "component", type: i1$2.NgOtpInputComponent, selector: "ng-otp-input", inputs: ["config", "formCtrl"], outputs: ["onInputChange"] }] }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: PinInputComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'val-pin-input', template: "<div class=\"otp\">\n  <ng-otp-input [formCtrl]=\"control\" [config]=\"otpInputConfig\"></ng-otp-input>\n</div>\n", 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 }]
-            }], control: [{
-                type: Input
-            }], metadata: [{
-                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.0", ngImport: i0, type: PrompterComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.0", type: PrompterComponent, selector: "val-prompter", inputs: { props: "props" }, outputs: { onClick: "onClick" }, ngImport: i0, template: "<val-box [color]=\"props.color\" class=\"teleprompter-container\" [bordered]=\"props.bordered\">\n  <div class=\"container\" [class.teleprompter-content]=\"props.teleprompter\" body>\n    <div>\n      <val-text [content]=\"props.content\" size=\"large\" [bold]=\"true\"></val-text>\n    </div>\n    <div *ngIf=\"props.buttons\">\n      <val-button-group\n        class=\"buttons-container\"\n        [buttons]=\"props.buttons\"\n        (onClick)=\"clickHandler($event)\"\n      ></val-button-group>\n    </div>\n    <div *ngIf=\"props.hrefs\">\n      <val-href class=\"link\" *ngFor=\"let l of props.hrefs\" [props]=\"l\" (onClick)=\"clickHandler($event)\"></val-href>\n    </div>\n  </div>\n</val-box>\n", 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: "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: ["color", "icon", "bordered", "leftBorder"], outputs: ["onClick"] }, { kind: "component", type: TextComponent, selector: "val-text", inputs: ["size", "color", "content", "bold"] }, { kind: "component", type: ButtonGroupComponent, selector: "val-button-group", inputs: ["buttons", "position", "columned"], outputs: ["onClick"] }, { kind: "component", type: HrefComponent, selector: "val-href", inputs: ["props"], outputs: ["onClick"] }] }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: PrompterComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'val-prompter', template: "<val-box [color]=\"props.color\" class=\"teleprompter-container\" [bordered]=\"props.bordered\">\n  <div class=\"container\" [class.teleprompter-content]=\"props.teleprompter\" body>\n    <div>\n      <val-text [content]=\"props.content\" size=\"large\" [bold]=\"true\"></val-text>\n    </div>\n    <div *ngIf=\"props.buttons\">\n      <val-button-group\n        class=\"buttons-container\"\n        [buttons]=\"props.buttons\"\n        (onClick)=\"clickHandler($event)\"\n      ></val-button-group>\n    </div>\n    <div *ngIf=\"props.hrefs\">\n      <val-href class=\"link\" *ngFor=\"let l of props.hrefs\" [props]=\"l\" (onClick)=\"clickHandler($event)\"></val-href>\n    </div>\n  </div>\n</val-box>\n", 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.0", ngImport: i0, type: RadioInputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.0", type: RadioInputComponent, selector: "val-radio-input", inputs: { control: "control", metadata: "metadata" }, ngImport: i0, template: "<ion-radio-group [allowEmptySelection]=\"true\" [formControl]=\"control\">\n  <ng-container *ngFor=\"let o of metadata.options\">\n    <ion-radio [value]=\"o.id\">{{ o.name }}</ion-radio>\n    <br />\n  </ng-container>\n</ion-radio-group>\n", styles: [""], dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "component", type: i1$1.IonRadio, selector: "ion-radio", inputs: ["alignment", "color", "disabled", "justify", "labelPlacement", "legacy", "mode", "name", "value"] }, { kind: "component", type: i1$1.IonRadioGroup, selector: "ion-radio-group", inputs: ["allowEmptySelection", "compareWith", "name", "value"] }, { kind: "directive", type: i1$1.RadioValueAccessor, selector: "ion-radio" }, { kind: "directive", type: i1$1.SelectValueAccessor, selector: "ion-select, ion-radio-group, ion-segment, ion-datetime" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }] }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: RadioInputComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'val-radio-input', template: "<ion-radio-group [allowEmptySelection]=\"true\" [formControl]=\"control\">\n  <ng-container *ngFor=\"let o of metadata.options\">\n    <ion-radio [value]=\"o.id\">{{ o.name }}</ion-radio>\n    <br />\n  </ng-container>\n</ion-radio-group>\n" }]
-        }], ctorParameters: () => [], propDecorators: { control: [{
-                type: Input
-            }], metadata: [{
-                type: Input
-            }] } });
-
-class TextInputComponent {
-    constructor() {
-    }
-    ngOnInit() { }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: TextInputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.0", type: TextInputComponent, selector: "val-text-input", inputs: { control: "control", metadata: "metadata" }, ngImport: i0, template: "<ion-input\n  [formControl]=\"control\"\n  type=\"text\"\n  [placeholder]=\"metadata.placeholder\"\n></ion-input>", styles: [".section{margin-top:1rem}.input{margin:.5rem 0}@media (min-width: 768px){.input{margin:.75rem 0}}\n"], dependencies: [{ kind: "component", type: i1$1.IonInput, selector: "ion-input", inputs: ["accept", "autocapitalize", "autocomplete", "autocorrect", "autofocus", "clearInput", "clearOnEdit", "color", "counter", "counterFormatter", "debounce", "disabled", "enterkeyhint", "errorText", "fill", "helperText", "inputmode", "label", "labelPlacement", "legacy", "max", "maxlength", "min", "minlength", "mode", "multiple", "name", "pattern", "placeholder", "readonly", "required", "shape", "size", "spellcheck", "step", "type", "value"] }, { kind: "directive", type: i1$1.TextValueAccessor, selector: "ion-input:not([type=number]),ion-textarea,ion-searchbar,ion-range" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }] }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: TextInputComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'val-text-input', template: "<ion-input\n  [formControl]=\"control\"\n  type=\"text\"\n  [placeholder]=\"metadata.placeholder\"\n></ion-input>", styles: [".section{margin-top:1rem}.input{margin:.5rem 0}@media (min-width: 768px){.input{margin:.75rem 0}}\n"] }]
-        }], ctorParameters: () => [], propDecorators: { control: [{
-                type: Input
-            }], metadata: [{
-                type: Input
-            }] } });
-
-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 = {}));
-
-var ToolbarActionType;
-(function (ToolbarActionType) {
-    ToolbarActionType["AVATAR"] = "AVATAR";
-    ToolbarActionType["ICON"] = "ICON";
-    ToolbarActionType["IMAGE"] = "IMAGE";
-    ToolbarActionType["BUTTON"] = "BUTTON";
-})(ToolbarActionType || (ToolbarActionType = {}));
-
-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.0", ngImport: i0, type: CardComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.0", type: CardComponent, selector: "val-card", inputs: { metadata: "metadata" }, outputs: { onClick: "onClick" }, ngImport: i0, template: "<ion-card *ngIf=\"metadata.type === types.native\">\n  <img alt=\"image\" [src]=\"metadata.image\" />\n  <ion-card-header *ngIf=\"metadata.title || metadata.overtitle\">\n    <ion-card-title *ngIf=\"metadata.title\">{{ metadata.title }}</ion-card-title>\n    <ion-card-subtitle *ngIf=\"metadata.overtitle\">{{ metadata.overtitle }}</ion-card-subtitle>\n  </ion-card-header>\n\n  <ion-card-content *ngIf=\"metadata.content\">{{ metadata.content }}</ion-card-content>\n\n  <val-button *ngFor=\"let b of metadata.footerActions\" [props]=\"b\" (click)=\"clickHandler(sections.footer, b.token)\"></val-button>\n</ion-card>\n\n<ion-card *ngIf=\"metadata.type === types.tappable\" (click)=\"clickHandler(sections.content, metadata.token)\" class=\"tapable\">\n  <img alt=\"image\" [src]=\"metadata.image\" />\n  <ion-card-header *ngIf=\"metadata.title || metadata.overtitle\">\n    <ion-card-title *ngIf=\"metadata.title\">{{ metadata.title }}</ion-card-title>\n    <ion-card-subtitle *ngIf=\"metadata.overtitle\">{{ metadata.overtitle }}</ion-card-subtitle>\n  </ion-card-header>\n\n  <ion-card-content *ngIf=\"metadata.content\">{{ metadata.content }}</ion-card-content>\n</ion-card>\n\n<ion-card *ngIf=\"metadata.type === types.checker\" (click)=\"clickHandler(sections.content, metadata.token)\" class=\"tapable\">\n  <ion-card-header *ngIf=\"metadata.title || metadata.overtitle\" class=\"checker\">\n    <div>\n      <ion-card-subtitle *ngIf=\"metadata.overtitle\">{{ metadata.overtitle }}</ion-card-subtitle>\n      <ion-card-title *ngIf=\"metadata.title\">{{ metadata.title }}</ion-card-title>\n    </div>\n    <div>\n      <ion-checkbox [checked]=\"metadata.selected\"></ion-checkbox>\n    </div>\n  </ion-card-header>\n\n  <ion-card-content *ngIf=\"metadata.content\">{{ metadata.content }}</ion-card-content>\n</ion-card>\n\n<ion-card *ngIf=\"metadata.type === types.complex\" class=\"complex\">\n  <ion-card-header class=\"complex-header\">\n    <ion-buttons style=\"display: flex; align-items: center\" *ngIf=\"metadata.leftActions.length > 0\">\n      <ng-container *ngFor=\"let action of metadata.leftActions\">\n        <ion-button *ngIf=\"action.type === actionTypes.ICON\" (click)=\"clickHandler(sections.headerLeft, action.token)\">\n          <ion-icon slot=\"icon-only\" [name]=\"action.description\" color=\"dark\"></ion-icon>\n        </ion-button>\n        <val-avatar\n          style=\"margin-right: 4px; cursor: pointer\"\n          *ngIf=\"action.type === actionTypes.AVATAR\"\n          [image]=\"action.description\"\n          size=\"small\"\n          (onClick)=\"clickHandler(sections.headerLeft, action.token)\"\n        ></val-avatar>\n        <val-image\n          *ngIf=\"action.type === actionTypes.IMAGE\"\n          [props]=\"action.image\"\n          (click)=\"clickHandler(sections.headerLeft, action.token)\"\n        ></val-image>\n        <ion-button *ngIf=\"action.type === actionTypes.BUTTON\" (click)=\"clickHandler(sections.headerLeft, action.token)\">\n          {{ action.description }}\n        </ion-button>\n        <div *ngIf=\"metadata.headerText\">\n          <val-text [content]=\"metadata.headerText\" color=\"dark\" [bold]=\"true\" size=\"medium\"></val-text>\n        </div>\n      </ng-container>\n    </ion-buttons>\n    <ion-buttons style=\"display: flex; align-items: center\" *ngIf=\"metadata.rightActions.length > 0\">\n      <ng-container *ngFor=\"let action of metadata.rightActions\">\n        <ion-button *ngIf=\"action.type === actionTypes.ICON\" (click)=\"clickHandler(sections.headerRight, action.token)\">\n          <ion-icon slot=\"icon-only\" [name]=\"action.description\" color=\"dark\"></ion-icon>\n        </ion-button>\n        <val-avatar\n          style=\"margin-right: 4px; cursor: pointer\"\n          *ngIf=\"action.type === actionTypes.AVATAR\"\n          [image]=\"action.description\"\n          size=\"small\"\n          (onClick)=\"clickHandler(sections.headerRight, action.token)\"\n        ></val-avatar>\n        <val-image\n          *ngIf=\"action.type === actionTypes.IMAGE\"\n          [props]=\"action.image\"\n          (click)=\"clickHandler(sections.headerRight, action.token)\"\n        ></val-image>\n        <ion-button *ngIf=\"action.type === actionTypes.BUTTON\" (click)=\"clickHandler(sections.headerRight, action.token)\">\n          {{ action.description }}\n        </ion-button>\n      </ng-container>\n    </ion-buttons>\n  </ion-card-header>\n\n  <div class=\"tapable\" (click)=\"clickHandler(sections.content, metadata.token)\">\n    <ion-card-header *ngIf=\"metadata.title || metadata.overtitle\" class=\"complex-header\">\n      <div>\n        <ion-card-subtitle *ngIf=\"metadata.overtitle\">{{ metadata.overtitle }}</ion-card-subtitle>\n        <ion-card-title *ngIf=\"metadata.title\">{{ metadata.title }}</ion-card-title>\n      </div>\n    </ion-card-header>\n\n    <img alt=\"image\" [src]=\"metadata.image\" />\n    <ion-card-content *ngIf=\"metadata.content\" class=\"complex-content\">{{ metadata.content }}</ion-card-content>\n  </div>\n  <val-button *ngFor=\"let b of metadata.footerActions\" [props]=\"b\" (click)=\"clickHandler(sections.footer, b.token)\"></val-button>\n  <ion-buttons\n    style=\"display: flex; align-items: center; justify-content: flex-end; margin: 8px\"\n    *ngIf=\"metadata.footerComplexActions.length > 0\"\n  >\n    <ng-container *ngFor=\"let action of metadata.footerComplexActions\">\n      <ion-button *ngIf=\"action.type === actionTypes.ICON\" (click)=\"clickHandler(sections.footerExtra, action.token)\">\n        <ion-icon slot=\"icon-only\" [name]=\"action.description\" color=\"dark\"></ion-icon>\n      </ion-button>\n      <val-avatar\n        style=\"margin-right: 4px; cursor: pointer\"\n        *ngIf=\"action.type === actionTypes.AVATAR\"\n        [image]=\"action.description\"\n        size=\"small\"\n        (onClick)=\"clickHandler(sections.footerExtra, action.token)\"\n      ></val-avatar>\n      <val-image\n        *ngIf=\"action.type === actionTypes.IMAGE\"\n        [props]=\"action.image\"\n        (click)=\"clickHandler(sections.footerExtra, action.token)\"\n      ></val-image>\n      <ion-button *ngIf=\"action.type === actionTypes.BUTTON\" (click)=\"clickHandler(sections.footerExtra, action.token)\" color=\"dark\">\n        {{ action.description }}\n      </ion-button>\n    </ng-container>\n  </ion-buttons>\n</ion-card>\n", styles: [".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: "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: i1$1.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: i1$1.IonButtons, selector: "ion-buttons", inputs: ["collapse"] }, { kind: "component", type: i1$1.IonCard, selector: "ion-card", inputs: ["button", "color", "disabled", "download", "href", "mode", "rel", "routerAnimation", "routerDirection", "target", "type"] }, { kind: "component", type: i1$1.IonCardContent, selector: "ion-card-content", inputs: ["mode"] }, { kind: "component", type: i1$1.IonCardHeader, selector: "ion-card-header", inputs: ["color", "mode", "translucent"] }, { kind: "component", type: i1$1.IonCardSubtitle, selector: "ion-card-subtitle", inputs: ["color", "mode"] }, { kind: "component", type: i1$1.IonCardTitle, selector: "ion-card-title", inputs: ["color", "mode"] }, { kind: "component", type: i1$1.IonCheckbox, selector: "ion-checkbox", inputs: ["alignment", "checked", "color", "disabled", "indeterminate", "justify", "labelPlacement", "legacy", "mode", "name", "value"] }, { kind: "component", type: i1$1.IonIcon, selector: "ion-icon", inputs: ["color", "flipRtl", "icon", "ios", "lazy", "md", "mode", "name", "sanitize", "size", "src"] }, { kind: "directive", type: i1$1.BooleanValueAccessor, selector: "ion-checkbox,ion-toggle" }, { kind: "component", type: ButtonComponent, selector: "val-button", inputs: ["props"], outputs: ["onClick"] }, { kind: "component", type: TextComponent, selector: "val-text", inputs: ["size", "color", "content", "bold"] }, { kind: "component", type: AvatarComponent, selector: "val-avatar", inputs: ["image", "default", "size", "box"], outputs: ["onClick"] }, { kind: "component", type: ImageComponent, selector: "val-image", inputs: ["props"] }] }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: CardComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'val-card', template: "<ion-card *ngIf=\"metadata.type === types.native\">\n  <img alt=\"image\" [src]=\"metadata.image\" />\n  <ion-card-header *ngIf=\"metadata.title || metadata.overtitle\">\n    <ion-card-title *ngIf=\"metadata.title\">{{ metadata.title }}</ion-card-title>\n    <ion-card-subtitle *ngIf=\"metadata.overtitle\">{{ metadata.overtitle }}</ion-card-subtitle>\n  </ion-card-header>\n\n  <ion-card-content *ngIf=\"metadata.content\">{{ metadata.content }}</ion-card-content>\n\n  <val-button *ngFor=\"let b of metadata.footerActions\" [props]=\"b\" (click)=\"clickHandler(sections.footer, b.token)\"></val-button>\n</ion-card>\n\n<ion-card *ngIf=\"metadata.type === types.tappable\" (click)=\"clickHandler(sections.content, metadata.token)\" class=\"tapable\">\n  <img alt=\"image\" [src]=\"metadata.image\" />\n  <ion-card-header *ngIf=\"metadata.title || metadata.overtitle\">\n    <ion-card-title *ngIf=\"metadata.title\">{{ metadata.title }}</ion-card-title>\n    <ion-card-subtitle *ngIf=\"metadata.overtitle\">{{ metadata.overtitle }}</ion-card-subtitle>\n  </ion-card-header>\n\n  <ion-card-content *ngIf=\"metadata.content\">{{ metadata.content }}</ion-card-content>\n</ion-card>\n\n<ion-card *ngIf=\"metadata.type === types.checker\" (click)=\"clickHandler(sections.content, metadata.token)\" class=\"tapable\">\n  <ion-card-header *ngIf=\"metadata.title || metadata.overtitle\" class=\"checker\">\n    <div>\n      <ion-card-subtitle *ngIf=\"metadata.overtitle\">{{ metadata.overtitle }}</ion-card-subtitle>\n      <ion-card-title *ngIf=\"metadata.title\">{{ metadata.title }}</ion-card-title>\n    </div>\n    <div>\n      <ion-checkbox [checked]=\"metadata.selected\"></ion-checkbox>\n    </div>\n  </ion-card-header>\n\n  <ion-card-content *ngIf=\"metadata.content\">{{ metadata.content }}</ion-card-content>\n</ion-card>\n\n<ion-card *ngIf=\"metadata.type === types.complex\" class=\"complex\">\n  <ion-card-header class=\"complex-header\">\n    <ion-buttons style=\"display: flex; align-items: center\" *ngIf=\"metadata.leftActions.length > 0\">\n      <ng-container *ngFor=\"let action of metadata.leftActions\">\n        <ion-button *ngIf=\"action.type === actionTypes.ICON\" (click)=\"clickHandler(sections.headerLeft, action.token)\">\n          <ion-icon slot=\"icon-only\" [name]=\"action.description\" color=\"dark\"></ion-icon>\n        </ion-button>\n        <val-avatar\n          style=\"margin-right: 4px; cursor: pointer\"\n          *ngIf=\"action.type === actionTypes.AVATAR\"\n          [image]=\"action.description\"\n          size=\"small\"\n          (onClick)=\"clickHandler(sections.headerLeft, action.token)\"\n        ></val-avatar>\n        <val-image\n          *ngIf=\"action.type === actionTypes.IMAGE\"\n          [props]=\"action.image\"\n          (click)=\"clickHandler(sections.headerLeft, action.token)\"\n        ></val-image>\n        <ion-button *ngIf=\"action.type === actionTypes.BUTTON\" (click)=\"clickHandler(sections.headerLeft, action.token)\">\n          {{ action.description }}\n        </ion-button>\n        <div *ngIf=\"metadata.headerText\">\n          <val-text [content]=\"metadata.headerText\" color=\"dark\" [bold]=\"true\" size=\"medium\"></val-text>\n        </div>\n      </ng-container>\n    </ion-buttons>\n    <ion-buttons style=\"display: flex; align-items: center\" *ngIf=\"metadata.rightActions.length > 0\">\n      <ng-container *ngFor=\"let action of metadata.rightActions\">\n        <ion-button *ngIf=\"action.type === actionTypes.ICON\" (click)=\"clickHandler(sections.headerRight, action.token)\">\n          <ion-icon slot=\"icon-only\" [name]=\"action.description\" color=\"dark\"></ion-icon>\n        </ion-button>\n        <val-avatar\n          style=\"margin-right: 4px; cursor: pointer\"\n          *ngIf=\"action.type === actionTypes.AVATAR\"\n          [image]=\"action.description\"\n          size=\"small\"\n          (onClick)=\"clickHandler(sections.headerRight, action.token)\"\n        ></val-avatar>\n        <val-image\n          *ngIf=\"action.type === actionTypes.IMAGE\"\n          [props]=\"action.image\"\n          (click)=\"clickHandler(sections.headerRight, action.token)\"\n        ></val-image>\n        <ion-button *ngIf=\"action.type === actionTypes.BUTTON\" (click)=\"clickHandler(sections.headerRight, action.token)\">\n          {{ action.description }}\n        </ion-button>\n      </ng-container>\n    </ion-buttons>\n  </ion-card-header>\n\n  <div class=\"tapable\" (click)=\"clickHandler(sections.content, metadata.token)\">\n    <ion-card-header *ngIf=\"metadata.title || metadata.overtitle\" class=\"complex-header\">\n      <div>\n        <ion-card-subtitle *ngIf=\"metadata.overtitle\">{{ metadata.overtitle }}</ion-card-subtitle>\n        <ion-card-title *ngIf=\"metadata.title\">{{ metadata.title }}</ion-card-title>\n      </div>\n    </ion-card-header>\n\n    <img alt=\"image\" [src]=\"metadata.image\" />\n    <ion-card-content *ngIf=\"metadata.content\" class=\"complex-content\">{{ metadata.content }}</ion-card-content>\n  </div>\n  <val-button *ngFor=\"let b of metadata.footerActions\" [props]=\"b\" (click)=\"clickHandler(sections.footer, b.token)\"></val-button>\n  <ion-buttons\n    style=\"display: flex; align-items: center; justify-content: flex-end; margin: 8px\"\n    *ngIf=\"metadata.footerComplexActions.length > 0\"\n  >\n    <ng-container *ngFor=\"let action of metadata.footerComplexActions\">\n      <ion-button *ngIf=\"action.type === actionTypes.ICON\" (click)=\"clickHandler(sections.footerExtra, action.token)\">\n        <ion-icon slot=\"icon-only\" [name]=\"action.description\" color=\"dark\"></ion-icon>\n      </ion-button>\n      <val-avatar\n        style=\"margin-right: 4px; cursor: pointer\"\n        *ngIf=\"action.type === actionTypes.AVATAR\"\n        [image]=\"action.description\"\n        size=\"small\"\n        (onClick)=\"clickHandler(sections.footerExtra, action.token)\"\n      ></val-avatar>\n      <val-image\n        *ngIf=\"action.type === actionTypes.IMAGE\"\n        [props]=\"action.image\"\n        (click)=\"clickHandler(sections.footerExtra, action.token)\"\n      ></val-image>\n      <ion-button *ngIf=\"action.type === actionTypes.BUTTON\" (click)=\"clickHandler(sections.footerExtra, action.token)\" color=\"dark\">\n        {{ action.description }}\n      </ion-button>\n    </ng-container>\n  </ion-buttons>\n</ion-card>\n", styles: [".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: { metadata: [{
-                type: Input
-            }], onClick: [{
-                type: Output
-            }] } });
-
-class ToolbarComponent {
-    constructor(navCtrl) {
-        this.navCtrl = navCtrl;
-        this.actionTypes = ToolbarActionType;
-        this.onClick = new EventEmitter();
-    }
-    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.0", ngImport: i0, type: ToolbarComponent, deps: [{ token: i1$1.NavController }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.0", type: ToolbarComponent, selector: "val-toolbar", inputs: { props: "props" }, outputs: { onClick: "onClick" }, ngImport: i0, template: "<ion-toolbar [color]=\"props.color\" [class.background]=\"props.color === 'background'\">\n  <ng-container *ngIf=\"props.withBack\">\n    <ion-buttons class=\"left-buttons\" slot=\"start\" *ngIf=\"props.withBack\">\n      <ion-button fill=\"clear\" (click)=\"goBack()\" [color]=\"props.textColor\">\n        <ion-icon name=\"chevron-back-outline\" [slot]=\"props.backText ? 'start' : 'icon-only'\"></ion-icon>\n        <ion-text *ngIf=\"props.backText\">{{ props.backText }}</ion-text>\n      </ion-button>\n    </ion-buttons>\n  </ng-container>\n  <ng-container *ngIf=\"props.withActions\">\n    <ion-buttons slot=\"end\" *ngIf=\"someInRight()\">\n      <ng-container *ngFor=\"let action of rightActions()\">\n        <ion-button *ngIf=\"action.type === actionTypes.ICON\" (click)=\"clickHandler(action.token)\">\n          <ion-icon slot=\"icon-only\" [name]=\"action.description\" color=\"dark\"></ion-icon>\n        </ion-button>\n        <val-avatar\n          *ngIf=\"action.type === actionTypes.AVATAR\"\n          [image]=\"action.description\"\n          size=\"small\"\n          (onClick)=\"clickHandler(action.token)\"\n        ></val-avatar>\n        <val-image\n          *ngIf=\"action.type === actionTypes.IMAGE\"\n          [props]=\"action.image\"\n          (click)=\"clickHandler(action.token)\"\n        ></val-image>\n        <ion-button *ngIf=\"action.type === actionTypes.BUTTON\" (click)=\"clickHandler(action.token)\">{{ action.description }}</ion-button>\n      </ng-container>\n    </ion-buttons>\n    <ion-buttons slot=\"start\" *ngIf=\"someInLeft()\">\n      <ng-container *ngFor=\"let action of leftActions()\">\n        <ion-button *ngIf=\"action.type === actionTypes.ICON\" (click)=\"clickHandler(action.token)\">\n          <ion-icon slot=\"icon-only\" [name]=\"action.description\" color=\"dark\"></ion-icon>\n        </ion-button>\n        <val-avatar\n          *ngIf=\"action.type === actionTypes.AVATAR\"\n          [image]=\"action.description\"\n          size=\"small\"\n          (onClick)=\"clickHandler(action.token)\"\n        ></val-avatar>\n        <val-image\n          *ngIf=\"action.type === actionTypes.IMAGE\"\n          [props]=\"action.image\"\n          (click)=\"clickHandler(action.token)\"\n        ></val-image>\n        <ion-button *ngIf=\"action.type === actionTypes.BUTTON\" (click)=\"clickHandler(action.token)\">{{ action.description }}</ion-button>\n      </ng-container>\n    </ion-buttons>\n  </ng-container>\n  <ion-title *ngIf=\"props.title\" [color]=\"props.textColor\">{{ props.title }}</ion-title>\n  <!-- experimental -->\n  <ng-content select=\"[toolbar-bottom]\"></ng-content>\n</ion-toolbar>\n", 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: "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: i1$1.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: i1$1.IonButtons, selector: "ion-buttons", inputs: ["collapse"] }, { kind: "component", type: i1$1.IonIcon, selector: "ion-icon", inputs: ["color", "flipRtl", "icon", "ios", "lazy", "md", "mode", "name", "sanitize", "size", "src"] }, { kind: "component", type: i1$1.IonText, selector: "ion-text", inputs: ["color", "mode"] }, { kind: "component", type: i1$1.IonTitle, selector: "ion-title", inputs: ["color", "size"] }, { kind: "component", type: i1$1.IonToolbar, selector: "ion-toolbar", inputs: ["color", "mode"] }, { kind: "component", type: AvatarComponent, selector: "val-avatar", inputs: ["image", "default", "size", "box"], outputs: ["onClick"] }, { kind: "component", type: ImageComponent, selector: "val-image", inputs: ["props"] }] }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: ToolbarComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'val-toolbar', template: "<ion-toolbar [color]=\"props.color\" [class.background]=\"props.color === 'background'\">\n  <ng-container *ngIf=\"props.withBack\">\n    <ion-buttons class=\"left-buttons\" slot=\"start\" *ngIf=\"props.withBack\">\n      <ion-button fill=\"clear\" (click)=\"goBack()\" [color]=\"props.textColor\">\n        <ion-icon name=\"chevron-back-outline\" [slot]=\"props.backText ? 'start' : 'icon-only'\"></ion-icon>\n        <ion-text *ngIf=\"props.backText\">{{ props.backText }}</ion-text>\n      </ion-button>\n    </ion-buttons>\n  </ng-container>\n  <ng-container *ngIf=\"props.withActions\">\n    <ion-buttons slot=\"end\" *ngIf=\"someInRight()\">\n      <ng-container *ngFor=\"let action of rightActions()\">\n        <ion-button *ngIf=\"action.type === actionTypes.ICON\" (click)=\"clickHandler(action.token)\">\n          <ion-icon slot=\"icon-only\" [name]=\"action.description\" color=\"dark\"></ion-icon>\n        </ion-button>\n        <val-avatar\n          *ngIf=\"action.type === actionTypes.AVATAR\"\n          [image]=\"action.description\"\n          size=\"small\"\n          (onClick)=\"clickHandler(action.token)\"\n        ></val-avatar>\n        <val-image\n          *ngIf=\"action.type === actionTypes.IMAGE\"\n          [props]=\"action.image\"\n          (click)=\"clickHandler(action.token)\"\n        ></val-image>\n        <ion-button *ngIf=\"action.type === actionTypes.BUTTON\" (click)=\"clickHandler(action.token)\">{{ action.description }}</ion-button>\n      </ng-container>\n    </ion-buttons>\n    <ion-buttons slot=\"start\" *ngIf=\"someInLeft()\">\n      <ng-container *ngFor=\"let action of leftActions()\">\n        <ion-button *ngIf=\"action.type === actionTypes.ICON\" (click)=\"clickHandler(action.token)\">\n          <ion-icon slot=\"icon-only\" [name]=\"action.description\" color=\"dark\"></ion-icon>\n        </ion-button>\n        <val-avatar\n          *ngIf=\"action.type === actionTypes.AVATAR\"\n          [image]=\"action.description\"\n          size=\"small\"\n          (onClick)=\"clickHandler(action.token)\"\n        ></val-avatar>\n        <val-image\n          *ngIf=\"action.type === actionTypes.IMAGE\"\n          [props]=\"action.image\"\n          (click)=\"clickHandler(action.token)\"\n        ></val-image>\n        <ion-button *ngIf=\"action.type === actionTypes.BUTTON\" (click)=\"clickHandler(action.token)\">{{ action.description }}</ion-button>\n      </ng-container>\n    </ion-buttons>\n  </ng-container>\n  <ion-title *ngIf=\"props.title\" [color]=\"props.textColor\">{{ props.title }}</ion-title>\n  <!-- experimental -->\n  <ng-content select=\"[toolbar-bottom]\"></ng-content>\n</ion-toolbar>\n", 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$1.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.0", ngImport: i0, type: FooterComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.0", type: FooterComponent, selector: "val-footer", inputs: { props: "props" }, outputs: { onClick: "onClick" }, ngImport: i0, template: "<ion-footer\n  [class.ion-no-border]=\"!props.bordered\"\n  [translucent]=\"props.translucent\"\n  [class.background]=\"props.toolbar.color === 'background'\"\n>\n  <val-toolbar\n    *ngIf=\"props.toolbar.title || props.toolbar.withActions || props.toolbar.withBack\"\n    [props]=\"props.toolbar\"\n    (onClick)=\"clickHandler($event)\"\n  ></val-toolbar>\n  <ng-content select=\"[extra]\"></ng-content>\n</ion-footer>\n", styles: [".background{background:var(--ion-background-color)}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i1$1.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.0", ngImport: i0, type: FooterComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'val-footer', template: "<ion-footer\n  [class.ion-no-border]=\"!props.bordered\"\n  [translucent]=\"props.translucent\"\n  [class.background]=\"props.toolbar.color === 'background'\"\n>\n  <val-toolbar\n    *ngIf=\"props.toolbar.title || props.toolbar.withActions || props.toolbar.withBack\"\n    [props]=\"props.toolbar\"\n    (onClick)=\"clickHandler($event)\"\n  ></val-toolbar>\n  <ng-content select=\"[extra]\"></ng-content>\n</ion-footer>\n", styles: [".background{background:var(--ion-background-color)}\n"] }]
-        }], ctorParameters: () => [], propDecorators: { props: [{
-                type: Input
-            }], onClick: [{
-                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.0", ngImport: i0, type: HeaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.0", type: HeaderComponent, selector: "val-header", inputs: { props: "props" }, outputs: { onClick: "onClick" }, ngImport: i0, template: "<ion-header [class.ion-no-border]=\"!props.bordered\" [translucent]=\"props.translucent\">\n  <val-toolbar [props]=\"props.toolbar\" (onClick)=\"clickHandler($event)\"></val-toolbar>\n</ion-header>\n", styles: [""], dependencies: [{ kind: "component", type: i1$1.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.0", ngImport: i0, type: HeaderComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'val-header', template: "<ion-header [class.ion-no-border]=\"!props.bordered\" [translucent]=\"props.translucent\">\n  <val-toolbar [props]=\"props.toolbar\" (onClick)=\"clickHandler($event)\"></val-toolbar>\n</ion-header>\n" }]
-        }], ctorParameters: () => [], propDecorators: { props: [{
-                type: Input
-            }], onClick: [{
-                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);
-    }
-    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.0", ngImport: i0, type: FormComponent, deps: [{ token: i2.FormBuilder }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.0", type: FormComponent, selector: "val-form", inputs: { props: "props" }, outputs: { onSubmit: "onSubmit", onInvalid: "onInvalid" }, ngImport: i0, template: "<div class=\"container\">\n  <form [formGroup]=\"form\">\n    <val-display [content]=\"props.name\" color=\"dark\" size=\"large\"></val-display>\n    <div class=\"section\" *ngFor=\"let s of props.sections\">\n      <val-title [content]=\"s.name\" size=\"large\"></val-title>\n      <div class=\"input\" *ngFor=\"let f of s.fields\">\n        <val-title color=\"dark\" [content]=\"f.label\" size=\"small\"></val-title>\n        <ng-container *ngIf=\"f.type === types.TEXT\">\n          <val-text-input [control]=\"getControl(f.name)\" [metadata]=\"f\"></val-text-input>\n        </ng-container>\n        <ng-container *ngIf=\"f.type === types.CHECK\">\n          <val-check-input></val-check-input>\n        </ng-container>\n        <ng-container *ngIf=\"f.type === types.COMMENT\">\n          <val-comment-input [control]=\"getControl(f.name)\" [metadata]=\"f\"></val-comment-input>\n        </ng-container>\n        <ng-container *ngIf=\"f.type === types.DATE\">\n          <val-date-input [control]=\"getControl(f.name)\" [metadata]=\"f\"></val-date-input>\n        </ng-container>\n        <ng-container *ngIf=\"f.type === types.EMAIL\">\n          <val-email-input [control]=\"getControl(f.name)\" [metadata]=\"f\"></val-email-input>\n        </ng-container>\n        <ng-container *ngIf=\"f.type === types.FILE\">\n          <val-file-input [control]=\"getControl(f.name)\" [metadata]=\"f\"></val-file-input>\n        </ng-container>\n        <ng-container *ngIf=\"f.type === types.HOUR\">\n          <val-hour-input [control]=\"getControl(f.name)\" [metadata]=\"f\"></val-hour-input>\n        </ng-container>\n        <ng-container *ngIf=\"f.type === types.NUMBER\">\n          <val-number-input [control]=\"getControl(f.name)\" [metadata]=\"f\"></val-number-input>\n        </ng-container>\n        <ng-container *ngIf=\"f.type === types.PASSWORD\">\n          <val-password-input [control]=\"getControl(f.name)\" [metadata]=\"f\"></val-password-input>\n        </ng-container>\n        <ng-container *ngIf=\"f.type === types.PIN_CODE\">\n          <val-pin-input [control]=\"getControl(f.name)\" [metadata]=\"f\"></val-pin-input>\n        </ng-container>\n        <ng-container *ngIf=\"f.type === types.RADIO\">\n          <val-radio-input [control]=\"getControl(f.name)\" [metadata]=\"f\"></val-radio-input>\n        </ng-container>\n        <ng-container *ngIf=\"f.type === types.SELECT\">\n          <!-- <val-select-input></val-select-input> -->\n        </ng-container>\n        <val-hint [control]=\"getControl(f.name)\" [metadata]=\"f\"></val-hint>\n      </div>\n      <val-divider color=\"medium\" size=\"medium\" fill=\"solid\"></val-divider>\n    </div>\n    <val-button-group position=\"center\" [buttons]=\"actions\" (onClick)=\"submitHandler($event)\"></val-button-group>\n  </form>\n</div>\n", styles: [".section{margin-top:1rem}.input{margin:.5rem 0}@media (min-width: 768px){.input{margin:.75rem 0}}\n"], dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "component", type: DisplayComponent, selector: "val-display", inputs: ["size", "color", "content"] }, { kind: "component", type: TitleComponent, selector: "val-title", inputs: ["size", "color", "content"] }, { kind: "component", type: DividerComponent, selector: "val-divider", inputs: ["size", "color", "fill"] }, { kind: "component", type: ButtonGroupComponent, selector: "val-button-group", inputs: ["buttons", "position", "columned"], outputs: ["onClick"] }, { kind: "component", type: CheckInputComponent, selector: "val-check-input" }, { kind: "component", type: CommentInputComponent, selector: "val-comment-input", inputs: ["control", "metadata"] }, { kind: "component", type: DateInputComponent, selector: "val-date-input", inputs: ["control", "metadata"] }, { kind: "component", type: EmailInputComponent, selector: "val-email-input", inputs: ["control", "metadata"] }, { kind: "component", type: FileInputComponent, selector: "val-file-input", inputs: ["control", "metadata"] }, { kind: "component", type: HintComponent, selector: "val-hint", inputs: ["control", "metadata"] }, { kind: "component", type: HourInputComponent, selector: "val-hour-input", inputs: ["control", "metadata"] }, { kind: "component", type: NumberInputComponent, selector: "val-number-input", inputs: ["control", "metadata"] }, { kind: "component", type: PasswordInputComponent, selector: "val-password-input", inputs: ["control", "metadata"] }, { kind: "component", type: PinInputComponent, selector: "val-pin-input", inputs: ["control", "metadata"] }, { kind: "component", type: RadioInputComponent, selector: "val-radio-input", inputs: ["control", "metadata"] }, { kind: "component", type: TextInputComponent, selector: "val-text-input", inputs: ["control", "metadata"] }] }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: FormComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'val-form', template: "<div class=\"container\">\n  <form [formGroup]=\"form\">\n    <val-display [content]=\"props.name\" color=\"dark\" size=\"large\"></val-display>\n    <div class=\"section\" *ngFor=\"let s of props.sections\">\n      <val-title [content]=\"s.name\" size=\"large\"></val-title>\n      <div class=\"input\" *ngFor=\"let f of s.fields\">\n        <val-title color=\"dark\" [content]=\"f.label\" size=\"small\"></val-title>\n        <ng-container *ngIf=\"f.type === types.TEXT\">\n          <val-text-input [control]=\"getControl(f.name)\" [metadata]=\"f\"></val-text-input>\n        </ng-container>\n        <ng-container *ngIf=\"f.type === types.CHECK\">\n          <val-check-input></val-check-input>\n        </ng-container>\n        <ng-container *ngIf=\"f.type === types.COMMENT\">\n          <val-comment-input [control]=\"getControl(f.name)\" [metadata]=\"f\"></val-comment-input>\n        </ng-container>\n        <ng-container *ngIf=\"f.type === types.DATE\">\n          <val-date-input [control]=\"getControl(f.name)\" [metadata]=\"f\"></val-date-input>\n        </ng-container>\n        <ng-container *ngIf=\"f.type === types.EMAIL\">\n          <val-email-input [control]=\"getControl(f.name)\" [metadata]=\"f\"></val-email-input>\n        </ng-container>\n        <ng-container *ngIf=\"f.type === types.FILE\">\n          <val-file-input [control]=\"getControl(f.name)\" [metadata]=\"f\"></val-file-input>\n        </ng-container>\n        <ng-container *ngIf=\"f.type === types.HOUR\">\n          <val-hour-input [control]=\"getControl(f.name)\" [metadata]=\"f\"></val-hour-input>\n        </ng-container>\n        <ng-container *ngIf=\"f.type === types.NUMBER\">\n          <val-number-input [control]=\"getControl(f.name)\" [metadata]=\"f\"></val-number-input>\n        </ng-container>\n        <ng-container *ngIf=\"f.type === types.PASSWORD\">\n          <val-password-input [control]=\"getControl(f.name)\" [metadata]=\"f\"></val-password-input>\n        </ng-container>\n        <ng-container *ngIf=\"f.type === types.PIN_CODE\">\n          <val-pin-input [control]=\"getControl(f.name)\" [metadata]=\"f\"></val-pin-input>\n        </ng-container>\n        <ng-container *ngIf=\"f.type === types.RADIO\">\n          <val-radio-input [control]=\"getControl(f.name)\" [metadata]=\"f\"></val-radio-input>\n        </ng-container>\n        <ng-container *ngIf=\"f.type === types.SELECT\">\n          <!-- <val-select-input></val-select-input> -->\n        </ng-container>\n        <val-hint [control]=\"getControl(f.name)\" [metadata]=\"f\"></val-hint>\n      </div>\n      <val-divider color=\"medium\" size=\"medium\" fill=\"solid\"></val-divider>\n    </div>\n    <val-button-group position=\"center\" [buttons]=\"actions\" (onClick)=\"submitHandler($event)\"></val-button-group>\n  </form>\n</div>\n", styles: [".section{margin-top:1rem}.input{margin:.5rem 0}@media (min-width: 768px){.input{margin:.75rem 0}}\n"] }]
-        }], ctorParameters: () => [{ type: i2.FormBuilder }, { type: i0.ElementRef }], propDecorators: { props: [{
-                type: Input
-            }], onSubmit: [{
-                type: Output
-            }], onInvalid: [{
-                type: Output
-            }] } });
-
-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.0", ngImport: i0, type: FormFooterComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.0", type: FormFooterComponent, selector: "val-form-footer", inputs: { form: "form", action: "action" }, outputs: { onSubmit: "onSubmit" }, ngImport: i0, template: "<val-footer\n  [props]=\"{\n    bordered: false,\n    translucent: false,\n    toolbar: {\n      title: '',\n      actions: [],\n      color: 'background',\n      withBack: false,\n      withActions: false,\n    },\n  }\"\n>\n  <val-button-group extra position=\"center\" [buttons]=\"actions\" (onClick)=\"submitHandler($event)\"></val-button-group>\n</val-footer>\n", styles: [""], dependencies: [{ kind: "component", type: ButtonGroupComponent, selector: "val-button-group", inputs: ["buttons", "position", "columned"], outputs: ["onClick"] }, { kind: "component", type: FooterComponent, selector: "val-footer", inputs: ["props"], outputs: ["onClick"] }] }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: FormFooterComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'val-form-footer', template: "<val-footer\n  [props]=\"{\n    bordered: false,\n    translucent: false,\n    toolbar: {\n      title: '',\n      actions: [],\n      color: 'background',\n      withBack: false,\n      withActions: false,\n    },\n  }\"\n>\n  <val-button-group extra position=\"center\" [buttons]=\"actions\" (onClick)=\"submitHandler($event)\"></val-button-group>\n</val-footer>\n" }]
-        }], ctorParameters: () => [], propDecorators: { form: [{
-                type: Input
-            }], action: [{
-                type: Input
-            }], onSubmit: [{
-                type: Output
-            }] } });
-
-const maxLength = (field, max) => {
-    return {
-        validator: Validators.maxLength(max),
-        error: `El campo ${field} no debe superar los ${max} caracteres.`,
-    };
-};
-
-var MOTION;
-(function (MOTION) {
-    MOTION[MOTION["BACKWARD"] = 0] = "BACKWARD";
-    MOTION[MOTION["FORWARD"] = 1] = "FORWARD";
-    MOTION[MOTION["RETRY"] = 2] = "RETRY";
-})(MOTION || (MOTION = {}));
-
-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.content.content.bellowTitle.text = error;
-        this.props.state = ComponentStates.ERROR;
-        goToTop(this.wrapperId);
-    }
-    reset() {
-        this.props.error.titles.content.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.0", ngImport: i0, type: WizardComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.0", type: WizardComponent, selector: "val-wizard", inputs: { props: "props" }, outputs: { onClick: "onClick" }, ngImport: i0, template: "<div [id]=\"wrapperId\" class=\"wrapper\">\n  <ng-container *ngIf=\"props.state !== 'ERROR'\">\n    <val-no-content [props]=\"Current.titles\"></val-no-content>\n    <div class=\"step\">\n      <div *ngIf=\"props.state === 'WORKING'\">\n        <val-content-loader color=\"dark\" size=\"large\" text=\"Por favor espere...\"></val-content-loader>\n      </div>\n      <ng-content select=\"[step]\"></ng-content>\n    </div>\n  </ng-container>\n  <ng-container *ngIf=\"props.state === 'ERROR'\">\n    <val-no-content [props]=\"props.error.titles\" (onClick)=\"clickHandler($event)\"></val-no-content>\n  </ng-container>\n</div>\n", 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: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: ContentLoaderComponent, selector: "val-content-loader", inputs: ["color", "size", "name", "text"] }, { kind: "component", type: NoContentComponent, selector: "val-no-content", inputs: ["props"], outputs: ["onClick"] }] }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: WizardComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'val-wizard', template: "<div [id]=\"wrapperId\" class=\"wrapper\">\n  <ng-container *ngIf=\"props.state !== 'ERROR'\">\n    <val-no-content [props]=\"Current.titles\"></val-no-content>\n    <div class=\"step\">\n      <div *ngIf=\"props.state === 'WORKING'\">\n        <val-content-loader color=\"dark\" size=\"large\" text=\"Por favor espere...\"></val-content-loader>\n      </div>\n      <ng-content select=\"[step]\"></ng-content>\n    </div>\n  </ng-container>\n  <ng-container *ngIf=\"props.state === 'ERROR'\">\n    <val-no-content [props]=\"props.error.titles\" (onClick)=\"clickHandler($event)\"></val-no-content>\n  </ng-container>\n</div>\n", 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 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.0", ngImport: i0, type: WizardFooterComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.0", type: WizardFooterComponent, selector: "val-wizard-footer", inputs: { props: "props" }, outputs: { onClick: "onClick" }, ngImport: i0, template: "<val-footer\n  [props]=\"{\nbordered: false,\ntranslucent: false,\ntoolbar: {\n  title: '',\n  actions: [],\n  color: 'background',\n  withBack: false,\n  withActions: false,\n  },\n}\"\n>\n  <val-progress-bar extra [progress]=\"Progress\" size=\"medium\"></val-progress-bar>\n  <val-button-group extra [buttons]=\"actions\" position=\"spaced\" (onClick)=\"clickHandler($event)\"></val-button-group>\n</val-footer>\n", styles: [""], dependencies: [{ kind: "component", type: ButtonGroupComponent, selector: "val-button-group", inputs: ["buttons", "position", "columned"], outputs: ["onClick"] }, { kind: "component", type: ProgressBarComponent, selector: "val-progress-bar", inputs: ["progress", "size", "color", "buffer", "type", "rounded"] }, { kind: "component", type: FooterComponent, selector: "val-footer", inputs: ["props"], outputs: ["onClick"] }] }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: WizardFooterComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'val-wizard-footer', template: "<val-footer\n  [props]=\"{\nbordered: false,\ntranslucent: false,\ntoolbar: {\n  title: '',\n  actions: [],\n  color: 'background',\n  withBack: false,\n  withActions: false,\n  },\n}\"\n>\n  <val-progress-bar extra [progress]=\"Progress\" size=\"medium\"></val-progress-bar>\n  <val-button-group extra [buttons]=\"actions\" position=\"spaced\" (onClick)=\"clickHandler($event)\"></val-button-group>\n</val-footer>\n" }]
-        }], ctorParameters: () => [], 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 ValtechComponentsModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: ValtechComponentsModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.3.0", ngImport: i0, type: ValtechComponentsModule, declarations: [ButtonComponent,
-            BoxComponent,
-            DisplayComponent,
-            TextComponent,
-            TitleComponent,
-            AvatarComponent,
-            DividerComponent,
-            ContentLoaderComponent,
-            LinkComponent,
-            SearchbarComponent,
-            ToolbarComponent,
-            IconComponent,
-            ButtonGroupComponent,
-            TitleBlockComponent,
-            AlertBoxComponent,
-            BannerComponent,
-            NotesBoxComponent,
-            ImageComponent,
-            NoContentComponent,
-            HrefComponent,
-            ProgressBarComponent,
-            LinksCakeComponent,
-            ProgressStatusComponent,
-            CheckInputComponent,
-            CommentInputComponent,
-            DateInputComponent,
-            EmailInputComponent,
-            FileInputComponent,
-            HintComponent,
-            HourInputComponent,
-            NumberInputComponent,
-            PasswordInputComponent,
-            PinInputComponent,
-            PrompterComponent,
-            RadioInputComponent,
-            TextInputComponent,
-            FooterComponent,
-            FormComponent,
-            FormFooterComponent,
-            HeaderComponent,
-            WizardComponent,
-            WizardFooterComponent,
-            CardComponent], imports: [CommonModule, HttpClientModule, IonicModule, ReactiveFormsModule, NgOtpInputModule], exports: [ButtonComponent,
-            BoxComponent,
-            DisplayComponent,
-            TextComponent,
-            TitleComponent,
-            AvatarComponent,
-            DividerComponent,
-            ContentLoaderComponent,
-            LinkComponent,
-            SearchbarComponent,
-            ToolbarComponent,
-            IconComponent,
-            ButtonGroupComponent,
-            TitleBlockComponent,
-            AlertBoxComponent,
-            BannerComponent,
-            NotesBoxComponent,
-            ImageComponent,
-            NoContentComponent,
-            HrefComponent,
-            ProgressBarComponent,
-            LinksCakeComponent,
-            ProgressStatusComponent,
-            CheckInputComponent,
-            CommentInputComponent,
-            DateInputComponent,
-            EmailInputComponent,
-            FileInputComponent,
-            HintComponent,
-            HourInputComponent,
-            NumberInputComponent,
-            PasswordInputComponent,
-            PinInputComponent,
-            PrompterComponent,
-            RadioInputComponent,
-            TextInputComponent,
-            FooterComponent,
-            FormComponent,
-            FormFooterComponent,
-            HeaderComponent,
-            WizardComponent,
-            WizardFooterComponent,
-            CardComponent] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: ValtechComponentsModule, providers: [DownloadService], imports: [CommonModule, HttpClientModule, IonicModule, ReactiveFormsModule, NgOtpInputModule] }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: ValtechComponentsModule, decorators: [{
-            type: NgModule,
-            args: [{
-                    imports: [CommonModule, HttpClientModule, IonicModule, ReactiveFormsModule, NgOtpInputModule],
-                    declarations: [
-                        ButtonComponent,
-                        BoxComponent,
-                        DisplayComponent,
-                        TextComponent,
-                        TitleComponent,
-                        AvatarComponent,
-                        DividerComponent,
-                        ContentLoaderComponent,
-                        LinkComponent,
-                        SearchbarComponent,
-                        ToolbarComponent,
-                        IconComponent,
-                        ButtonGroupComponent,
-                        TitleBlockComponent,
-                        AlertBoxComponent,
-                        BannerComponent,
-                        NotesBoxComponent,
-                        ImageComponent,
-                        NoContentComponent,
-                        HrefComponent,
-                        ProgressBarComponent,
-                        LinksCakeComponent,
-                        ProgressStatusComponent,
-                        CheckInputComponent,
-                        CommentInputComponent,
-                        DateInputComponent,
-                        EmailInputComponent,
-                        FileInputComponent,
-                        HintComponent,
-                        HourInputComponent,
-                        NumberInputComponent,
-                        PasswordInputComponent,
-                        PinInputComponent,
-                        PrompterComponent,
-                        RadioInputComponent,
-                        TextInputComponent,
-                        FooterComponent,
-                        FormComponent,
-                        FormFooterComponent,
-                        HeaderComponent,
-                        WizardComponent,
-                        WizardFooterComponent,
-                        CardComponent,
-                    ],
-                    exports: [
-                        ButtonComponent,
-                        BoxComponent,
-                        DisplayComponent,
-                        TextComponent,
-                        TitleComponent,
-                        AvatarComponent,
-                        DividerComponent,
-                        ContentLoaderComponent,
-                        LinkComponent,
-                        SearchbarComponent,
-                        ToolbarComponent,
-                        IconComponent,
-                        ButtonGroupComponent,
-                        TitleBlockComponent,
-                        AlertBoxComponent,
-                        BannerComponent,
-                        NotesBoxComponent,
-                        ImageComponent,
-                        NoContentComponent,
-                        HrefComponent,
-                        ProgressBarComponent,
-                        LinksCakeComponent,
-                        ProgressStatusComponent,
-                        CheckInputComponent,
-                        CommentInputComponent,
-                        DateInputComponent,
-                        EmailInputComponent,
-                        FileInputComponent,
-                        HintComponent,
-                        HourInputComponent,
-                        NumberInputComponent,
-                        PasswordInputComponent,
-                        PinInputComponent,
-                        PrompterComponent,
-                        RadioInputComponent,
-                        TextInputComponent,
-                        FooterComponent,
-                        FormComponent,
-                        FormFooterComponent,
-                        HeaderComponent,
-                        WizardComponent,
-                        WizardFooterComponent,
-                        CardComponent,
-                    ],
-                    providers: [DownloadService],
-                }]
-        }] });
-
-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.0", ngImport: i0, type: LangService, deps: [{ token: ValtechConfigService }], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: LangService, providedIn: 'root' }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.0", 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.0", ngImport: i0, type: ThemeService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: ThemeService, providedIn: 'root' }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: ThemeService, decorators: [{
-            type: Injectable,
-            args: [{
-                    providedIn: 'root',
-                }]
-        }], ctorParameters: () => [] });
-
-/*
- * 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, FileInputComponent, FooterComponent, FormComponent, FormFooterComponent, HeaderComponent, HintComponent, HourInputComponent, HrefComponent, Icon, IconComponent, ImageComponent, InputType, LangOption, LangService, LinkComponent, LinksCakeComponent, LocalStorageService, MOTION, 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, SolidBlockButton, SolidDefault, SolidDefaultBlock, SolidDefaultButton, SolidDefaultFull, SolidDefaultRound, SolidDefaultRoundBlock, SolidDefaultRoundButton, SolidDefaultRoundFull, SolidFullButton, SolidLargeButton, SolidLargeRoundButton, SolidSmallButton, SolidSmallRoundButton, TextComponent, TextContent, TextInputComponent, ThemeOption, ThemeService, TitleBlockComponent, TitleComponent, ToolbarActionType, ToolbarComponent, ValtechComponentsModule, ValtechConfigService, WizardComponent, WizardFooterComponent, goToTop, isAtEnd, maxLength };
-//# sourceMappingURL=valtech-components.mjs.map