valtech-components 2.0.19 → 2.0.21

package/fesm2022/valtech-components.mjs

@@ -1,10 +1,85 @@
-import * as i2 from '@angular/common';
-import { CommonModule } from '@angular/common';
 import * as i0 from '@angular/core';
-import { Injectable, EventEmitter, Component, Input, Output, InjectionToken, Inject } from '@angular/core';
-import { IonButton, IonIcon, IonSpinner, IonText, IonAvatar } from '@ionic/angular/standalone';
+import { EventEmitter, Component, Input, Output, Injectable, ViewChild, InjectionToken, Inject } from '@angular/core';
+import { IonAvatar, IonCard, IonIcon, IonButton, IonSpinner, IonText, IonProgressBar, IonCardContent, IonCardHeader, IonCardTitle, IonCardSubtitle, IonCheckbox, IonButtons, IonTextarea, IonDatetime, IonDatetimeButton, IonModal, IonInput, IonRadioGroup, IonRadio, IonSearchbar, IonToolbar, IonTitle, IonFooter, IonHeader, IonContent } from '@ionic/angular/standalone';
+import * as i1 from '@angular/common';
+import { CommonModule, NgIf, NgFor, NgClass } from '@angular/common';
+import * as i1$1 from '@angular/forms';
+import { ReactiveFormsModule, Validators } from '@angular/forms';
+import * as i1$2 from 'ng-otp-input';
+import { NgOtpInputComponent, NgOtpInputModule } from 'ng-otp-input';
+import * as i1$3 from '@ionic/angular';
 import { BehaviorSubject } from 'rxjs';
 
+class AvatarComponent {
+    constructor() {
+        this.onClick = new EventEmitter();
+    }
+    ngOnInit() { }
+    onClickHandler() {
+        this.onClick.emit();
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: AvatarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: AvatarComponent, isStandalone: true, selector: "val-avatar", inputs: { props: "props" }, outputs: { onClick: "onClick" }, ngImport: i0, template: `
+    <ion-avatar [class]="props.size" [class.box]="props.box" (click)="onClickHandler()">
+      <img alt="profile image" [src]="props.image || props.default" />
+    </ion-avatar>
+  `, isInline: true, styles: [".box{--border-radius: pxToRem(4)}.small{width:1.75rem;height:1.75rem}.medium{width:2.375rem;height:2.375rem}.large{width:3rem;height:3rem}\n"], dependencies: [{ kind: "component", type: IonAvatar, selector: "ion-avatar" }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: AvatarComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'val-avatar', standalone: true, imports: [IonAvatar], template: `
+    <ion-avatar [class]="props.size" [class.box]="props.box" (click)="onClickHandler()">
+      <img alt="profile image" [src]="props.image || props.default" />
+    </ion-avatar>
+  `, styles: [".box{--border-radius: pxToRem(4)}.small{width:1.75rem;height:1.75rem}.medium{width:2.375rem;height:2.375rem}.large{width:3rem;height:3rem}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { props: [{
+                type: Input
+            }], onClick: [{
+                type: Output
+            }] } });
+
+class BoxComponent {
+    constructor() {
+        this.onClick = new EventEmitter();
+    }
+    ngOnInit() { }
+    clickHandler() {
+        this.onClick.emit();
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: BoxComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: BoxComponent, isStandalone: true, selector: "val-box", inputs: { props: "props" }, outputs: { onClick: "onClick" }, ngImport: i0, template: `
+    <ion-card
+      class="box"
+      [color]="props.color"
+      [class.bordered]="props.bordered"
+      [class.transparent]="!props.color"
+      [class.left-border]="props.leftBorder"
+    >
+      <ion-icon *ngIf="!!props.icon" class="icon" [name]="props.icon" (click)="clickHandler()"></ion-icon>
+      <ng-content select="[body]"></ng-content>
+    </ion-card>
+  `, isInline: true, styles: [".bordered{border:.0625rem solid var(--ion-color-medium)}.box{width:100%;margin:0rem;border-radius:0rem;box-shadow:none;padding:.25rem}@media (min-width: 768px){.box{padding:.5rem}}.icon{cursor:pointer;margin:0rem;padding:0rem;position:absolute;right:.25rem;top:.25rem;font-size:1rem}@media (min-width: 768px){.icon{right:.5rem;top:.5rem;font-size:1.5rem}}.left-border{border-left:.1875rem solid #dde3ed}.left-border.small{border-width:.1875rem}.left-border.medium{border-width:.375rem}.left-border.large{border-width:.4375rem}.left-border.xlarge{border-width:.5rem}.transparent{--background: transparent}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: IonCard, selector: "ion-card", inputs: ["button", "color", "disabled", "download", "href", "mode", "rel", "routerAnimation", "routerDirection", "target", "type"] }, { kind: "component", type: IonIcon, selector: "ion-icon", inputs: ["color", "flipRtl", "icon", "ios", "lazy", "md", "mode", "name", "sanitize", "size", "src"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: BoxComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'val-box', standalone: true, imports: [CommonModule, IonCard, IonIcon], template: `
+    <ion-card
+      class="box"
+      [color]="props.color"
+      [class.bordered]="props.bordered"
+      [class.transparent]="!props.color"
+      [class.left-border]="props.leftBorder"
+    >
+      <ion-icon *ngIf="!!props.icon" class="icon" [name]="props.icon" (click)="clickHandler()"></ion-icon>
+      <ng-content select="[body]"></ng-content>
+    </ion-card>
+  `, styles: [".bordered{border:.0625rem solid var(--ion-color-medium)}.box{width:100%;margin:0rem;border-radius:0rem;box-shadow:none;padding:.25rem}@media (min-width: 768px){.box{padding:.5rem}}.icon{cursor:pointer;margin:0rem;padding:0rem;position:absolute;right:.25rem;top:.25rem;font-size:1rem}@media (min-width: 768px){.icon{right:.5rem;top:.5rem;font-size:1.5rem}}.left-border{border-left:.1875rem solid #dde3ed}.left-border.small{border-width:.1875rem}.left-border.medium{border-width:.375rem}.left-border.large{border-width:.4375rem}.left-border.xlarge{border-width:.5rem}.transparent{--background: transparent}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { props: [{
+                type: Input
+            }], onClick: [{
+                type: Output
+            }] } });
+
 const ENABLED = 'ENABLED';
 const DISABLED = 'DISABLED';
 const WORKING = 'WORKING';
@@ -33,6 +108,13 @@ var InputType;
     InputType[InputType["SELECT"] = 10] = "SELECT";
     InputType[InputType["FILE"] = 11] = "FILE";
 })(InputType || (InputType = {}));
+var ToolbarActionType;
+(function (ToolbarActionType) {
+    ToolbarActionType["AVATAR"] = "AVATAR";
+    ToolbarActionType["ICON"] = "ICON";
+    ToolbarActionType["IMAGE"] = "IMAGE";
+    ToolbarActionType["BUTTON"] = "BUTTON";
+})(ToolbarActionType || (ToolbarActionType = {}));
 
 class DownloadService {
     getFileNameFromUrl(url) {
@@ -129,7 +211,7 @@ class ButtonComponent {
       <ion-spinner *ngIf="props.state === states.WORKING" name="circular"></ion-spinner>
       <ion-text *ngIf="props.state !== states.WORKING">{{ props.text }}</ion-text>
     </ion-button>
-  `, isInline: true, styles: ["ion-button{font-family:var(--ion-default-font),Arial,sans-serif}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: IonButton, selector: "ion-button", inputs: ["buttonType", "color", "disabled", "download", "expand", "fill", "form", "href", "mode", "rel", "routerAnimation", "routerDirection", "shape", "size", "strong", "target", "type"] }, { kind: "component", type: IonIcon, selector: "ion-icon", inputs: ["color", "flipRtl", "icon", "ios", "lazy", "md", "mode", "name", "sanitize", "size", "src"] }, { kind: "component", type: IonSpinner, selector: "ion-spinner", inputs: ["color", "duration", "name", "paused"] }, { kind: "component", type: IonText, selector: "ion-text", inputs: ["color", "mode"] }] }); }
+  `, isInline: true, styles: ["ion-button{font-family:var(--ion-default-font),Arial,sans-serif}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: IonButton, selector: "ion-button", inputs: ["buttonType", "color", "disabled", "download", "expand", "fill", "form", "href", "mode", "rel", "routerAnimation", "routerDirection", "shape", "size", "strong", "target", "type"] }, { kind: "component", type: IonIcon, selector: "ion-icon", inputs: ["color", "flipRtl", "icon", "ios", "lazy", "md", "mode", "name", "sanitize", "size", "src"] }, { kind: "component", type: IonSpinner, selector: "ion-spinner", inputs: ["color", "duration", "name", "paused"] }, { kind: "component", type: IonText, selector: "ion-text", inputs: ["color", "mode"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: ButtonComponent, decorators: [{
             type: Component,
@@ -374,172 +456,2477 @@ const SecondarySolidBlockIconHrefButton = (text, icon, href, target) => {
     return { ...SecondarySolidBlockIconButton(text, icon), href, target };
 };
 
-class AvatarComponent {
-    constructor() {
+class DisplayComponent {
+    constructor() { }
+    ngOnInit() { }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: DisplayComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: DisplayComponent, isStandalone: true, selector: "val-display", inputs: { props: "props" }, ngImport: i0, template: `
+    <ion-text [color]="props.color">
+      <p [class]="props.size">
+        {{ props.content }}
+      </p>
+    </ion-text>
+  `, isInline: true, styles: [".small{font-size:1.5rem;line-height:2rem;font-weight:800}@media (min-width: 768px){.small{font-size:2rem;line-height:2.5rem}}.medium{font-size:2rem;line-height:2.5rem;font-weight:800}@media (min-width: 768px){.medium{font-size:2.5rem;line-height:3rem}}.large{font-size:2.5rem;line-height:3rem;font-weight:800}@media (min-width: 768px){.large{font-size:3rem;line-height:3.5rem}}.xlarge{font-size:3rem;line-height:3.5rem;font-weight:800}@media (min-width: 768px){.xlarge{font-size:3.5rem;line-height:4rem}}\n"], dependencies: [{ kind: "component", type: IonText, selector: "ion-text", inputs: ["color", "mode"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: DisplayComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'val-display', standalone: true, imports: [IonText], template: `
+    <ion-text [color]="props.color">
+      <p [class]="props.size">
+        {{ props.content }}
+      </p>
+    </ion-text>
+  `, styles: [".small{font-size:1.5rem;line-height:2rem;font-weight:800}@media (min-width: 768px){.small{font-size:2rem;line-height:2.5rem}}.medium{font-size:2rem;line-height:2.5rem;font-weight:800}@media (min-width: 768px){.medium{font-size:2.5rem;line-height:3rem}}.large{font-size:2.5rem;line-height:3rem;font-weight:800}@media (min-width: 768px){.large{font-size:3rem;line-height:3.5rem}}.xlarge{font-size:3rem;line-height:3.5rem;font-weight:800}@media (min-width: 768px){.xlarge{font-size:3.5rem;line-height:4rem}}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { props: [{
+                type: Input
+            }] } });
+
+class DividerComponent {
+    constructor() { }
+    ngOnInit() { }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: DividerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: DividerComponent, isStandalone: true, selector: "val-divider", inputs: { props: "props" }, ngImport: i0, template: ` <div [ngClass]="['divider', props.size, props.color, props.fill]"></div> `, isInline: true, styles: [".solid{border-top:.0625rem solid #878ca0}.gradient{height:.125rem}.gradient.primary{background:linear-gradient(to right,var(--ion-color-primary),var(--ion-color-light))}.gradient.secondary{background:linear-gradient(to right,var(--ion-color-secondary),var(--ion-color-light))}.gradient.dark{background:linear-gradient(to right,var(--ion-color-dark),var(--ion-color-light))}.gradient.light{background:linear-gradient(to right,var(--ion-color-light),#ffffff)}.gradient.medium{background:linear-gradient(to right,var(--ion-color-medium),#ffffff)}.small{margin:1rem}.medium{margin:1.5rem 1rem}.large{margin:2.25rem 1rem}.primary{border-color:var(--ion-color-primary)}.secondary{border-color:var(--ion-color-secondary)}.dark{border-color:var(--ion-color-dark)}.light{border-color:var(--ion-color-light)}.medium{border-color:var(--ion-color-medium)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: DividerComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'val-divider', standalone: true, imports: [CommonModule], template: ` <div [ngClass]="['divider', props.size, props.color, props.fill]"></div> `, styles: [".solid{border-top:.0625rem solid #878ca0}.gradient{height:.125rem}.gradient.primary{background:linear-gradient(to right,var(--ion-color-primary),var(--ion-color-light))}.gradient.secondary{background:linear-gradient(to right,var(--ion-color-secondary),var(--ion-color-light))}.gradient.dark{background:linear-gradient(to right,var(--ion-color-dark),var(--ion-color-light))}.gradient.light{background:linear-gradient(to right,var(--ion-color-light),#ffffff)}.gradient.medium{background:linear-gradient(to right,var(--ion-color-medium),#ffffff)}.small{margin:1rem}.medium{margin:1.5rem 1rem}.large{margin:2.25rem 1rem}.primary{border-color:var(--ion-color-primary)}.secondary{border-color:var(--ion-color-secondary)}.dark{border-color:var(--ion-color-dark)}.light{border-color:var(--ion-color-light)}.medium{border-color:var(--ion-color-medium)}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { props: [{
+                type: Input
+            }] } });
+
+class HrefComponent {
+    constructor(downloadService) {
+        this.downloadService = downloadService;
         this.onClick = new EventEmitter();
     }
     ngOnInit() { }
-    onClickHandler() {
-        this.onClick.emit();
+    getFileName() {
+        return this.downloadService.getFileNameFromUrl(this.props.url);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: AvatarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: AvatarComponent, isStandalone: true, selector: "val-avatar", inputs: { props: "props" }, outputs: { onClick: "onClick" }, ngImport: i0, template: `
-    <ion-avatar [class]="props.size" [class.box]="props.box" (click)="onClickHandler()">
-      <img alt="profile image" [src]="props.image || props.default" />
-    </ion-avatar>
-  `, isInline: true, styles: [".box{--border-radius: pxToRem(4)}.small{width:1.75rem;height:1.75rem}.medium{width:2.375rem;height:2.375rem}.large{width:3rem;height:3rem}\n"], dependencies: [{ kind: "component", type: IonAvatar, selector: "ion-avatar" }] }); }
+    onClickHandler(event) {
+        if (this.props.download && this.props.url) {
+            event.preventDefault();
+            this.downloadService.downloadLinkFromBrowser(this.props.url);
+        }
+        this.onClick.emit(this.props.token);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: HrefComponent, deps: [{ token: DownloadService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: HrefComponent, isStandalone: true, selector: "val-href", inputs: { props: "props" }, outputs: { onClick: "onClick" }, ngImport: i0, template: `
+    <a
+      [ngClass]="[props.color]"
+      [class.hoverable]="props.hoverable"
+      [href]="props.url"
+      target="_blank"
+      (click)="onClickHandler($event)"
+      >{{ props.text }}</a
+    >
+  `, isInline: true, styles: [".primary{color:var(--ion-color-primary)}.secondary{color:var(--ion-color-secondary)}.dark{color:var(--ion-color-dark)}.medium{color:var(--ion-color-medium)}.hoverable{text-decoration:none}.hoverable:hover{text-decoration:underline}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: AvatarComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: HrefComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'val-avatar', standalone: true, imports: [IonAvatar], template: `
-    <ion-avatar [class]="props.size" [class.box]="props.box" (click)="onClickHandler()">
-      <img alt="profile image" [src]="props.image || props.default" />
-    </ion-avatar>
-  `, styles: [".box{--border-radius: pxToRem(4)}.small{width:1.75rem;height:1.75rem}.medium{width:2.375rem;height:2.375rem}.large{width:3rem;height:3rem}\n"] }]
-        }], ctorParameters: () => [], propDecorators: { props: [{
+            args: [{ selector: 'val-href', standalone: true, imports: [CommonModule], template: `
+    <a
+      [ngClass]="[props.color]"
+      [class.hoverable]="props.hoverable"
+      [href]="props.url"
+      target="_blank"
+      (click)="onClickHandler($event)"
+      >{{ props.text }}</a
+    >
+  `, styles: [".primary{color:var(--ion-color-primary)}.secondary{color:var(--ion-color-secondary)}.dark{color:var(--ion-color-dark)}.medium{color:var(--ion-color-medium)}.hoverable{text-decoration:none}.hoverable:hover{text-decoration:underline}\n"] }]
+        }], ctorParameters: () => [{ type: DownloadService }], propDecorators: { props: [{
                 type: Input
             }], onClick: [{
                 type: Output
             }] } });
 
-class LayoutComponent {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: LayoutComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: LayoutComponent, isStandalone: true, selector: "val-layout", ngImport: i0, template: `
-    <div class="layout-container">
-      <ng-content></ng-content>
-    </div>
-  `, isInline: true, styles: [".layout-container{margin:0 auto;padding:0 1rem;width:100%;box-sizing:border-box;margin-bottom:1rem}@media (max-width: 768px){.layout-container{max-width:100%}}@media (min-width: 768px){.layout-container{max-width:60rem;margin-bottom:1.5rem}}@media (min-width: 1200px){.layout-container{max-width:75rem}}\n"] }); }
+class IconComponent {
+    constructor() { }
+    ngOnInit() { }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: IconComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: IconComponent, isStandalone: true, selector: "val-icon", inputs: { props: "props" }, ngImport: i0, template: ` <ion-icon [ngClass]="[props.size]" [name]="props.name" [color]="props.color"></ion-icon> `, isInline: true, styles: [".small{font-size:.75rem;line-height:1.25rem;font-weight:400}.small.bold{font-size:.75rem;line-height:1.25rem;font-weight:700}.medium{font-size:.875rem;line-height:1.5rem;font-weight:400}@media (min-width: 768px){.medium{font-size:1rem;line-height:1.5rem}}.medium.bold{font-size:.875rem;line-height:1.5rem;font-weight:700}@media (min-width: 768px){.medium.bold{font-size:1rem;line-height:1.5rem}}.large{font-size:1rem;line-height:1.5rem;font-weight:400}@media (min-width: 768px){.large{font-size:1.125rem;line-height:1.5rem}}.large.bold{font-size:1rem;line-height:1.5rem;font-weight:700}@media (min-width: 768px){.large.bold{font-size:1.125rem;line-height:1.5rem}}.xlarge{font-size:1.125rem;line-height:1.5rem;font-weight:400}@media (min-width: 768px){.xlarge{font-size:1.5rem;line-height:2rem}}.xlarge.bold{font-size:1.125rem;line-height:1.5rem;font-weight:700}@media (min-width: 768px){.xlarge.bold{font-size:1.5rem;line-height:2rem}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: IonIcon, selector: "ion-icon", inputs: ["color", "flipRtl", "icon", "ios", "lazy", "md", "mode", "name", "sanitize", "size", "src"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: LayoutComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: IconComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'val-layout', standalone: true, imports: [], template: `
-    <div class="layout-container">
-      <ng-content></ng-content>
-    </div>
-  `, styles: [".layout-container{margin:0 auto;padding:0 1rem;width:100%;box-sizing:border-box;margin-bottom:1rem}@media (max-width: 768px){.layout-container{max-width:100%}}@media (min-width: 768px){.layout-container{max-width:60rem;margin-bottom:1.5rem}}@media (min-width: 1200px){.layout-container{max-width:75rem}}\n"] }]
-        }] });
+            args: [{ selector: 'val-icon', standalone: true, imports: [CommonModule, IonIcon], template: ` <ion-icon [ngClass]="[props.size]" [name]="props.name" [color]="props.color"></ion-icon> `, styles: [".small{font-size:.75rem;line-height:1.25rem;font-weight:400}.small.bold{font-size:.75rem;line-height:1.25rem;font-weight:700}.medium{font-size:.875rem;line-height:1.5rem;font-weight:400}@media (min-width: 768px){.medium{font-size:1rem;line-height:1.5rem}}.medium.bold{font-size:.875rem;line-height:1.5rem;font-weight:700}@media (min-width: 768px){.medium.bold{font-size:1rem;line-height:1.5rem}}.large{font-size:1rem;line-height:1.5rem;font-weight:400}@media (min-width: 768px){.large{font-size:1.125rem;line-height:1.5rem}}.large.bold{font-size:1rem;line-height:1.5rem;font-weight:700}@media (min-width: 768px){.large.bold{font-size:1.125rem;line-height:1.5rem}}.xlarge{font-size:1.125rem;line-height:1.5rem;font-weight:400}@media (min-width: 768px){.xlarge{font-size:1.5rem;line-height:2rem}}.xlarge.bold{font-size:1.125rem;line-height:1.5rem;font-weight:700}@media (min-width: 768px){.xlarge.bold{font-size:1.5rem;line-height:2rem}}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { props: [{
+                type: Input
+            }] } });
 
-class TextContent {
-    constructor(text) {
-        this.text = text;
+class ImageComponent {
+    constructor() {
+        this.available = true;
     }
-    get Content() {
-        return this.text;
+    ngOnInit() { }
+    changeToVisible() {
+        setInterval(() => {
+            this.available = true;
+        }, 100);
     }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: ImageComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: ImageComponent, isStandalone: true, selector: "val-image", inputs: { props: "props" }, ngImport: i0, template: `
+    <img
+      [ngClass]="['image', props.mode, props.size]"
+      [class.bordered]="props.bordered"
+      [class.shaded]="props.shaded"
+      [class.limited]="props.limited"
+      [class.visible]="available"
+      [src]="props.src"
+      [alt]="props.alt"
+      [style.width.px]="props.width"
+      [style.max-width.px]="props.width"
+      [style.height.px]="props.height"
+    />
+  `, isInline: true, styles: [".small{width:30%}.small.limited{max-width:6.25rem}.medium{width:50%}.medium.limited{max-width:15rem}.large{width:70%}.large.limited{max-width:28.125rem}.xlarge{width:100%}.xlarge.limited{max-width:43.75rem}.image{opacity:0;height:0;display:block}.visible{animation:appereance ease-in 1s forwards}@keyframes appereance{0%{opacity:0;height:0}to{opacity:1;height:auto}}.rounded{border-radius:.5rem}.circular{border-radius:50%}.bordered{border:.0625rem solid var(--ion-color-medium)}.shaded{box-shadow:.1875rem .625rem .5rem #1219541a}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] }); }
 }
-var LangOption;
-(function (LangOption) {
-    LangOption["ES"] = "es";
-    LangOption["EN"] = "en";
-})(LangOption || (LangOption = {}));
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: ImageComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'val-image', standalone: true, imports: [CommonModule], template: `
+    <img
+      [ngClass]="['image', props.mode, props.size]"
+      [class.bordered]="props.bordered"
+      [class.shaded]="props.shaded"
+      [class.limited]="props.limited"
+      [class.visible]="available"
+      [src]="props.src"
+      [alt]="props.alt"
+      [style.width.px]="props.width"
+      [style.max-width.px]="props.width"
+      [style.height.px]="props.height"
+    />
+  `, styles: [".small{width:30%}.small.limited{max-width:6.25rem}.medium{width:50%}.medium.limited{max-width:15rem}.large{width:70%}.large.limited{max-width:28.125rem}.xlarge{width:100%}.xlarge.limited{max-width:43.75rem}.image{opacity:0;height:0;display:block}.visible{animation:appereance ease-in 1s forwards}@keyframes appereance{0%{opacity:0;height:0}to{opacity:1;height:auto}}.rounded{border-radius:.5rem}.circular{border-radius:50%}.bordered{border:.0625rem solid var(--ion-color-medium)}.shaded{box-shadow:.1875rem .625rem .5rem #1219541a}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { props: [{
+                type: Input
+            }] } });
 
-class 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();
-    }
+class ProgressBarComponent {
+    constructor() { }
+    ngOnInit() { }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: ProgressBarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: ProgressBarComponent, isStandalone: true, selector: "val-progress-bar", inputs: { props: "props" }, ngImport: i0, template: `
+    <ion-progress-bar
+      [ngClass]="[props.size]"
+      [class.rounded]="props.rounded"
+      [value]="props.progress"
+      [color]="props.color"
+      [buffer]="props.buffer"
+      [type]="props.type"
+    ></ion-progress-bar>
+  `, isInline: true, styles: ["ion-progress-bar.rounded{border-radius:.5rem}.medium{height:.25rem}.large{height:.375rem}.xlarge{height:.5rem}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: IonProgressBar, selector: "ion-progress-bar", inputs: ["buffer", "color", "mode", "reversed", "type", "value"] }] }); }
 }
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: ProgressBarComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'val-progress-bar', standalone: true, imports: [CommonModule, IonProgressBar], template: `
+    <ion-progress-bar
+      [ngClass]="[props.size]"
+      [class.rounded]="props.rounded"
+      [value]="props.progress"
+      [color]="props.color"
+      [buffer]="props.buffer"
+      [type]="props.type"
+    ></ion-progress-bar>
+  `, styles: ["ion-progress-bar.rounded{border-radius:.5rem}.medium{height:.25rem}.large{height:.375rem}.xlarge{height:.5rem}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { props: [{
+                type: Input
+            }] } });
 
-const LANG = 'LANG';
-const THEME = 'THEME';
+class TextComponent {
+    constructor() { }
+    ngOnInit() { }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: TextComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: TextComponent, isStandalone: true, selector: "val-text", inputs: { props: "props" }, ngImport: i0, template: `
+    <ion-text [color]="props.color">
+      <p [class]="props.size" [class.bold]="props.bold">{{ props.content }}</p>
+    </ion-text>
+  `, isInline: true, styles: [".small{font-size:.75rem;line-height:1.25rem;font-weight:400}.small.bold{font-size:.75rem;line-height:1.25rem;font-weight:700}.medium{font-size:.875rem;line-height:1.5rem;font-weight:400}@media (min-width: 768px){.medium{font-size:1rem;line-height:1.5rem}}.medium.bold{font-size:.875rem;line-height:1.5rem;font-weight:700}@media (min-width: 768px){.medium.bold{font-size:1rem;line-height:1.5rem}}.large{font-size:1rem;line-height:1.5rem;font-weight:400}@media (min-width: 768px){.large{font-size:1.125rem;line-height:1.5rem}}.large.bold{font-size:1rem;line-height:1.5rem;font-weight:700}@media (min-width: 768px){.large.bold{font-size:1.125rem;line-height:1.5rem}}.xlarge{font-size:1.125rem;line-height:1.5rem;font-weight:400}@media (min-width: 768px){.xlarge{font-size:1.5rem;line-height:2rem}}.xlarge.bold{font-size:1.125rem;line-height:1.5rem;font-weight:700}@media (min-width: 768px){.xlarge.bold{font-size:1.5rem;line-height:2rem}}\n"], dependencies: [{ kind: "component", type: IonText, selector: "ion-text", inputs: ["color", "mode"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: TextComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'val-text', standalone: true, imports: [IonText], template: `
+    <ion-text [color]="props.color">
+      <p [class]="props.size" [class.bold]="props.bold">{{ props.content }}</p>
+    </ion-text>
+  `, styles: [".small{font-size:.75rem;line-height:1.25rem;font-weight:400}.small.bold{font-size:.75rem;line-height:1.25rem;font-weight:700}.medium{font-size:.875rem;line-height:1.5rem;font-weight:400}@media (min-width: 768px){.medium{font-size:1rem;line-height:1.5rem}}.medium.bold{font-size:.875rem;line-height:1.5rem;font-weight:700}@media (min-width: 768px){.medium.bold{font-size:1rem;line-height:1.5rem}}.large{font-size:1rem;line-height:1.5rem;font-weight:400}@media (min-width: 768px){.large{font-size:1.125rem;line-height:1.5rem}}.large.bold{font-size:1rem;line-height:1.5rem;font-weight:700}@media (min-width: 768px){.large.bold{font-size:1.125rem;line-height:1.5rem}}.xlarge{font-size:1.125rem;line-height:1.5rem;font-weight:400}@media (min-width: 768px){.xlarge{font-size:1.5rem;line-height:2rem}}.xlarge.bold{font-size:1.125rem;line-height:1.5rem;font-weight:700}@media (min-width: 768px){.xlarge.bold{font-size:1.5rem;line-height:2rem}}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { props: [{
+                type: Input
+            }] } });
 
-const ValtechConfigService = new InjectionToken('ValtechConfig');
+class TitleComponent {
+    constructor() { }
+    ngOnInit() { }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: TitleComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: TitleComponent, isStandalone: true, selector: "val-title", inputs: { props: "props" }, ngImport: i0, template: `
+    <ion-text [color]="props.color">
+      <p *ngIf="!props.bold" [class]="props.size">{{ props.content }}</p>
+      <b *ngIf="props.bold">
+        <p [class]="props.size">{{ props.content }}</p>
+      </b>
+    </ion-text>
+  `, isInline: true, styles: [".small{font-size:.875rem;line-height:1.5rem;font-weight:700}@media (min-width: 768px){.small{font-size:1rem;line-height:1.5rem}}.medium{font-size:1rem;line-height:1.5rem;font-weight:700}@media (min-width: 768px){.medium{font-size:1.125rem;line-height:1.5rem}}.large{font-size:1.125rem;line-height:1.5rem;font-weight:700}@media (min-width: 768px){.large{font-size:1.5rem;line-height:2rem}}.xlarge{font-size:1.125rem;line-height:1.5rem;font-weight:700}@media (min-width: 768px){.xlarge{font-size:1.5rem;line-height:2rem}}\n"], dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: IonText, selector: "ion-text", inputs: ["color", "mode"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: TitleComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'val-title', standalone: true, imports: [NgIf, IonText], template: `
+    <ion-text [color]="props.color">
+      <p *ngIf="!props.bold" [class]="props.size">{{ props.content }}</p>
+      <b *ngIf="props.bold">
+        <p [class]="props.size">{{ props.content }}</p>
+      </b>
+    </ion-text>
+  `, styles: [".small{font-size:.875rem;line-height:1.5rem;font-weight:700}@media (min-width: 768px){.small{font-size:1rem;line-height:1.5rem}}.medium{font-size:1rem;line-height:1.5rem;font-weight:700}@media (min-width: 768px){.medium{font-size:1.125rem;line-height:1.5rem}}.large{font-size:1.125rem;line-height:1.5rem;font-weight:700}@media (min-width: 768px){.large{font-size:1.5rem;line-height:2rem}}.xlarge{font-size:1.125rem;line-height:1.5rem;font-weight:700}@media (min-width: 768px){.xlarge{font-size:1.5rem;line-height:2rem}}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { props: [{
+                type: Input
+            }] } });
 
-class LangService {
-    constructor(config) {
-        this.default = LangOption.ES;
-        console.log('injected config: ', config);
-        this.content = config.content;
-        this.config = config;
-        const current = LocalStorageService.get(LANG);
-        this.selectedLang = new BehaviorSubject(current || this.default);
-    }
-    Text(className) {
-        return this.content[className].Content[this.selectedLang.value];
-    }
-    get Lang() {
-        return this.selectedLang.value;
-    }
-    set Lang(lang) {
-        this.selectedLang.next(lang);
-        LocalStorageService.set(LANG, lang);
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: LangService, deps: [{ token: ValtechConfigService }], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: LangService, providedIn: 'root' }); }
+class AlertBoxComponent {
+    constructor() { }
+    ngOnInit() { }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: AlertBoxComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: AlertBoxComponent, isStandalone: true, selector: "val-alert-box", inputs: { props: "props" }, ngImport: i0, template: `
+    <val-box [props]="props.box">
+      <div class="content-container" body>
+        <val-icon [props]="props.icon"></val-icon>
+        <val-text class="text" [props]="props.text"></val-text>
+      </div>
+    </val-box>
+  `, isInline: true, styles: [".text{margin-left:.25rem}.content-container{display:flex;align-items:flex-start}\n"], dependencies: [{ kind: "component", type: BoxComponent, selector: "val-box", inputs: ["props"], outputs: ["onClick"] }, { kind: "component", type: IconComponent, selector: "val-icon", inputs: ["props"] }, { kind: "component", type: TextComponent, selector: "val-text", inputs: ["props"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: LangService, decorators: [{
-            type: Injectable,
-            args: [{
-                    providedIn: 'root',
-                }]
-        }], ctorParameters: () => [{ type: undefined, decorators: [{
-                    type: Inject,
-                    args: [ValtechConfigService]
-                }] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: AlertBoxComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'val-alert-box', standalone: true, imports: [BoxComponent, IconComponent, TextComponent], template: `
+    <val-box [props]="props.box">
+      <div class="content-container" body>
+        <val-icon [props]="props.icon"></val-icon>
+        <val-text class="text" [props]="props.text"></val-text>
+      </div>
+    </val-box>
+  `, styles: [".text{margin-left:.25rem}.content-container{display:flex;align-items:flex-start}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { props: [{
+                type: Input
+            }] } });
 
-var ThemeOption;
-(function (ThemeOption) {
-    ThemeOption["LIGHT"] = "light";
-    ThemeOption["DARK"] = "dark";
-    ThemeOption["AUTO"] = "auto";
-})(ThemeOption || (ThemeOption = {}));
-class ThemeService {
+class ButtonGroupComponent {
     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();
-        });
+        this.onClick = new EventEmitter();
     }
-    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);
-        }
+    ngOnInit() { }
+    clickHandler(token) {
+        this.onClick.emit(token);
     }
-    handleDarkPreference() {
-        this.toggleTheme(ThemeOption.DARK, true);
-        this.toggleTheme(ThemeOption.LIGHT, false);
+    get Position() {
+        if (this.props.buttons.length === 1 && this.props.position === 'spaced') {
+            return 'right';
+        }
+        return this.props.position;
     }
-    handleLightPreference() {
-        this.toggleTheme(ThemeOption.LIGHT, true);
-        this.toggleTheme(ThemeOption.DARK, false);
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: ButtonGroupComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: ButtonGroupComponent, isStandalone: true, selector: "val-button-group", inputs: { props: "props" }, outputs: { onClick: "onClick" }, ngImport: i0, template: `
+    <div [ngClass]="['group-container', Position]" [class.column]="props.columned" style="width: 100%;">
+      <val-button
+        *ngFor="let b of props.buttons"
+        [props]="b"
+        (click)="clickHandler(b?.token)"
+        [ngStyle]="{ width: props.buttons.length === 1 ? '100%' : 'auto' }"
+      ></val-button>
+    </div>
+  `, isInline: true, styles: ["val-button{display:inline-block}.group-container{width:100%}.group-container.left{text-align:left}.group-container.center{text-align:center}.group-container.right{text-align:right}.group-container.column{display:flex;flex-direction:column-reverse}.group-container.spaced{display:flex;justify-content:space-between}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: ButtonComponent, selector: "val-button", inputs: ["props"], outputs: ["onClick"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: ButtonGroupComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'val-button-group', standalone: true, imports: [CommonModule, ButtonComponent], template: `
+    <div [ngClass]="['group-container', Position]" [class.column]="props.columned" style="width: 100%;">
+      <val-button
+        *ngFor="let b of props.buttons"
+        [props]="b"
+        (click)="clickHandler(b?.token)"
+        [ngStyle]="{ width: props.buttons.length === 1 ? '100%' : 'auto' }"
+      ></val-button>
+    </div>
+  `, styles: ["val-button{display:inline-block}.group-container{width:100%}.group-container.left{text-align:left}.group-container.center{text-align:center}.group-container.right{text-align:right}.group-container.column{display:flex;flex-direction:column-reverse}.group-container.spaced{display:flex;justify-content:space-between}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { props: [{
+                type: Input
+            }], onClick: [{
+                type: Output
+            }] } });
+
+var CardType;
+(function (CardType) {
+    CardType["native"] = "native";
+    CardType["checker"] = "checker";
+    CardType["tappable"] = "tappable";
+    CardType["complex"] = "complex";
+})(CardType || (CardType = {}));
+var CardSection;
+(function (CardSection) {
+    CardSection[CardSection["headerLeft"] = 0] = "headerLeft";
+    CardSection[CardSection["headerRight"] = 1] = "headerRight";
+    CardSection[CardSection["content"] = 2] = "content";
+    CardSection[CardSection["footer"] = 3] = "footer";
+    CardSection[CardSection["footerExtra"] = 4] = "footerExtra";
+})(CardSection || (CardSection = {}));
+
+class CardComponent {
+    constructor() {
+        this.onClick = new EventEmitter();
+        this.types = CardType;
+        this.actionTypes = ToolbarActionType;
+        this.sections = CardSection;
     }
-    get Theme() {
-        return this.theme.value;
+    ngOnInit() { }
+    clickHandler(section, token) {
+        this.onClick.emit({ section, token });
     }
-    set Theme(theme) {
-        this.theme.next(theme);
-        LocalStorageService.set(THEME, theme);
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: CardComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: CardComponent, isStandalone: true, selector: "val-card", inputs: { metadata: "metadata" }, outputs: { onClick: "onClick" }, ngImport: i0, template: `
+    <ion-card *ngIf="metadata.type === types.native">
+      <img alt="image" [src]="metadata.image" />
+      <ion-card-header *ngIf="metadata.title || metadata.overtitle">
+        <ion-card-title *ngIf="metadata.title">{{ metadata.title }}</ion-card-title>
+        <ion-card-subtitle *ngIf="metadata.overtitle">{{ metadata.overtitle }}</ion-card-subtitle>
+      </ion-card-header>
+
+      <ion-card-content *ngIf="metadata.content">{{ metadata.content }}</ion-card-content>
+
+      <val-button
+        *ngFor="let b of metadata.footerActions"
+        [props]="b"
+        (click)="clickHandler(sections.footer, b.token)"
+      ></val-button>
+    </ion-card>
+
+    <ion-card
+      *ngIf="metadata.type === types.tappable"
+      (click)="clickHandler(sections.content, metadata.token)"
+      class="tapable"
+    >
+      <img alt="image" [src]="metadata.image" />
+      <ion-card-header *ngIf="metadata.title || metadata.overtitle">
+        <ion-card-title *ngIf="metadata.title">{{ metadata.title }}</ion-card-title>
+        <ion-card-subtitle *ngIf="metadata.overtitle">{{ metadata.overtitle }}</ion-card-subtitle>
+      </ion-card-header>
+
+      <ion-card-content *ngIf="metadata.content">{{ metadata.content }}</ion-card-content>
+    </ion-card>
+
+    <ion-card
+      *ngIf="metadata.type === types.checker"
+      (click)="clickHandler(sections.content, metadata.token)"
+      class="tapable"
+    >
+      <ion-card-header *ngIf="metadata.title || metadata.overtitle" class="checker">
+        <div>
+          <ion-card-subtitle *ngIf="metadata.overtitle">{{ metadata.overtitle }}</ion-card-subtitle>
+          <ion-card-title *ngIf="metadata.title">{{ metadata.title }}</ion-card-title>
+        </div>
+        <div>
+          <ion-checkbox [checked]="metadata.selected"></ion-checkbox>
+        </div>
+      </ion-card-header>
+
+      <ion-card-content *ngIf="metadata.content">{{ metadata.content }}</ion-card-content>
+    </ion-card>
+
+    <ion-card *ngIf="metadata.type === types.complex" class="complex">
+      <ion-card-header class="complex-header">
+        <ion-buttons style="display: flex; align-items: center" *ngIf="metadata.leftActions.length > 0">
+          <ng-container *ngFor="let action of metadata.leftActions">
+            <ion-button
+              *ngIf="action.type === actionTypes.ICON"
+              (click)="clickHandler(sections.headerLeft, action.token)"
+            >
+              <ion-icon slot="icon-only" [name]="action.description" color="dark"></ion-icon>
+            </ion-button>
+            <val-avatar
+              style="margin-right: 4px; cursor: pointer"
+              *ngIf="action.type === actionTypes.AVATAR"
+              [props]="{ size: 'small', image: action.description, default: '' }"
+              (onClick)="clickHandler(sections.headerLeft, action.token)"
+            ></val-avatar>
+            <val-image
+              *ngIf="action.type === actionTypes.IMAGE"
+              [props]="action.image"
+              (click)="clickHandler(sections.headerLeft, action.token)"
+            ></val-image>
+            <ion-button
+              *ngIf="action.type === actionTypes.BUTTON"
+              (click)="clickHandler(sections.headerLeft, action.token)"
+            >
+              {{ action.description }}
+            </ion-button>
+            <div *ngIf="metadata.headerText">
+              <val-text
+                [props]="{ content: metadata.headerText, color: 'dark', bold: true, size: 'medium' }"
+              ></val-text>
+            </div>
+          </ng-container>
+        </ion-buttons>
+        <ion-buttons style="display: flex; align-items: center" *ngIf="metadata.rightActions.length > 0">
+          <ng-container *ngFor="let action of metadata.rightActions">
+            <ion-button
+              *ngIf="action.type === actionTypes.ICON"
+              (click)="clickHandler(sections.headerRight, action.token)"
+            >
+              <ion-icon slot="icon-only" [name]="action.description" color="dark"></ion-icon>
+            </ion-button>
+            <val-avatar
+              style="margin-right: 4px; cursor: pointer"
+              *ngIf="action.type === actionTypes.AVATAR"
+              [props]="{ size: 'small', image: action.description, default: '' }"
+              (onClick)="clickHandler(sections.headerRight, action.token)"
+            ></val-avatar>
+            <val-image
+              *ngIf="action.type === actionTypes.IMAGE"
+              [props]="action.image"
+              (click)="clickHandler(sections.headerRight, action.token)"
+            ></val-image>
+            <ion-button
+              *ngIf="action.type === actionTypes.BUTTON"
+              (click)="clickHandler(sections.headerRight, action.token)"
+            >
+              {{ action.description }}
+            </ion-button>
+          </ng-container>
+        </ion-buttons>
+      </ion-card-header>
+
+      <div class="tapable" (click)="clickHandler(sections.content, metadata.token)">
+        <ion-card-header *ngIf="metadata.title || metadata.overtitle" class="complex-header">
+          <div>
+            <ion-card-subtitle *ngIf="metadata.overtitle">{{ metadata.overtitle }}</ion-card-subtitle>
+            <ion-card-title *ngIf="metadata.title">{{ metadata.title }}</ion-card-title>
+          </div>
+        </ion-card-header>
+
+        <img alt="image" [src]="metadata.image" />
+        <ion-card-content *ngIf="metadata.content" class="complex-content">{{ metadata.content }}</ion-card-content>
+      </div>
+      <val-button
+        *ngFor="let b of metadata.footerActions"
+        [props]="b"
+        (click)="clickHandler(sections.footer, b.token)"
+      ></val-button>
+      <ion-buttons
+        style="display: flex; align-items: center; justify-content: flex-end; margin: 8px"
+        *ngIf="metadata.footerComplexActions.length > 0"
+      >
+        <ng-container *ngFor="let action of metadata.footerComplexActions">
+          <ion-button
+            *ngIf="action.type === actionTypes.ICON"
+            (click)="clickHandler(sections.footerExtra, action.token)"
+          >
+            <ion-icon slot="icon-only" [name]="action.description" color="dark"></ion-icon>
+          </ion-button>
+          <val-avatar
+            style="margin-right: 4px; cursor: pointer"
+            *ngIf="action.type === actionTypes.AVATAR"
+            [props]="{ size: 'small', image: action.description, default: '' }"
+            (onClick)="clickHandler(sections.footerExtra, action.token)"
+          ></val-avatar>
+          <val-image
+            *ngIf="action.type === actionTypes.IMAGE"
+            [props]="action.image"
+            (click)="clickHandler(sections.footerExtra, action.token)"
+          ></val-image>
+          <ion-button
+            *ngIf="action.type === actionTypes.BUTTON"
+            (click)="clickHandler(sections.footerExtra, action.token)"
+            color="dark"
+          >
+            {{ action.description }}
+          </ion-button>
+        </ng-container>
+      </ion-buttons>
+    </ion-card>
+  `, isInline: true, styles: [".tapable{cursor:pointer}.checker{display:flex;flex-direction:row;justify-content:space-between;align-items:center}.complex-header{padding:10px;display:flex;flex-direction:row;justify-content:space-between;align-items:center}.complex-content{padding-left:10px;padding-top:4px;padding-bottom:10px}.complex{border-radius:16px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: ButtonComponent, selector: "val-button", inputs: ["props"], outputs: ["onClick"] }, { kind: "component", type: AvatarComponent, selector: "val-avatar", inputs: ["props"], outputs: ["onClick"] }, { kind: "component", type: ImageComponent, selector: "val-image", inputs: ["props"] }, { kind: "component", type: TextComponent, selector: "val-text", inputs: ["props"] }, { kind: "component", type: IonCard, selector: "ion-card", inputs: ["button", "color", "disabled", "download", "href", "mode", "rel", "routerAnimation", "routerDirection", "target", "type"] }, { kind: "component", type: IonCardContent, selector: "ion-card-content", inputs: ["mode"] }, { kind: "component", type: IonCardHeader, selector: "ion-card-header", inputs: ["color", "mode", "translucent"] }, { kind: "component", type: IonCardTitle, selector: "ion-card-title", inputs: ["color", "mode"] }, { kind: "component", type: IonCardSubtitle, selector: "ion-card-subtitle", inputs: ["color", "mode"] }, { kind: "component", type: IonCheckbox, selector: "ion-checkbox", inputs: ["checked", "color", "disabled", "indeterminate", "justify", "labelPlacement", "mode", "name", "value"] }, { kind: "component", type: IonButtons, selector: "ion-buttons", inputs: ["collapse"] }, { kind: "component", type: IonButton, selector: "ion-button", inputs: ["buttonType", "color", "disabled", "download", "expand", "fill", "form", "href", "mode", "rel", "routerAnimation", "routerDirection", "shape", "size", "strong", "target", "type"] }, { kind: "component", type: IonIcon, selector: "ion-icon", inputs: ["color", "flipRtl", "icon", "ios", "lazy", "md", "mode", "name", "sanitize", "size", "src"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: CardComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'val-card', standalone: true, imports: [
+                        CommonModule,
+                        ButtonComponent,
+                        AvatarComponent,
+                        ImageComponent,
+                        TextComponent,
+                        IonCard,
+                        IonCardContent,
+                        IonCardHeader,
+                        IonCardTitle,
+                        IonCardSubtitle,
+                        IonCheckbox,
+                        IonButtons,
+                        IonButton,
+                        IonIcon,
+                    ], template: `
+    <ion-card *ngIf="metadata.type === types.native">
+      <img alt="image" [src]="metadata.image" />
+      <ion-card-header *ngIf="metadata.title || metadata.overtitle">
+        <ion-card-title *ngIf="metadata.title">{{ metadata.title }}</ion-card-title>
+        <ion-card-subtitle *ngIf="metadata.overtitle">{{ metadata.overtitle }}</ion-card-subtitle>
+      </ion-card-header>
+
+      <ion-card-content *ngIf="metadata.content">{{ metadata.content }}</ion-card-content>
+
+      <val-button
+        *ngFor="let b of metadata.footerActions"
+        [props]="b"
+        (click)="clickHandler(sections.footer, b.token)"
+      ></val-button>
+    </ion-card>
+
+    <ion-card
+      *ngIf="metadata.type === types.tappable"
+      (click)="clickHandler(sections.content, metadata.token)"
+      class="tapable"
+    >
+      <img alt="image" [src]="metadata.image" />
+      <ion-card-header *ngIf="metadata.title || metadata.overtitle">
+        <ion-card-title *ngIf="metadata.title">{{ metadata.title }}</ion-card-title>
+        <ion-card-subtitle *ngIf="metadata.overtitle">{{ metadata.overtitle }}</ion-card-subtitle>
+      </ion-card-header>
+
+      <ion-card-content *ngIf="metadata.content">{{ metadata.content }}</ion-card-content>
+    </ion-card>
+
+    <ion-card
+      *ngIf="metadata.type === types.checker"
+      (click)="clickHandler(sections.content, metadata.token)"
+      class="tapable"
+    >
+      <ion-card-header *ngIf="metadata.title || metadata.overtitle" class="checker">
+        <div>
+          <ion-card-subtitle *ngIf="metadata.overtitle">{{ metadata.overtitle }}</ion-card-subtitle>
+          <ion-card-title *ngIf="metadata.title">{{ metadata.title }}</ion-card-title>
+        </div>
+        <div>
+          <ion-checkbox [checked]="metadata.selected"></ion-checkbox>
+        </div>
+      </ion-card-header>
+
+      <ion-card-content *ngIf="metadata.content">{{ metadata.content }}</ion-card-content>
+    </ion-card>
+
+    <ion-card *ngIf="metadata.type === types.complex" class="complex">
+      <ion-card-header class="complex-header">
+        <ion-buttons style="display: flex; align-items: center" *ngIf="metadata.leftActions.length > 0">
+          <ng-container *ngFor="let action of metadata.leftActions">
+            <ion-button
+              *ngIf="action.type === actionTypes.ICON"
+              (click)="clickHandler(sections.headerLeft, action.token)"
+            >
+              <ion-icon slot="icon-only" [name]="action.description" color="dark"></ion-icon>
+            </ion-button>
+            <val-avatar
+              style="margin-right: 4px; cursor: pointer"
+              *ngIf="action.type === actionTypes.AVATAR"
+              [props]="{ size: 'small', image: action.description, default: '' }"
+              (onClick)="clickHandler(sections.headerLeft, action.token)"
+            ></val-avatar>
+            <val-image
+              *ngIf="action.type === actionTypes.IMAGE"
+              [props]="action.image"
+              (click)="clickHandler(sections.headerLeft, action.token)"
+            ></val-image>
+            <ion-button
+              *ngIf="action.type === actionTypes.BUTTON"
+              (click)="clickHandler(sections.headerLeft, action.token)"
+            >
+              {{ action.description }}
+            </ion-button>
+            <div *ngIf="metadata.headerText">
+              <val-text
+                [props]="{ content: metadata.headerText, color: 'dark', bold: true, size: 'medium' }"
+              ></val-text>
+            </div>
+          </ng-container>
+        </ion-buttons>
+        <ion-buttons style="display: flex; align-items: center" *ngIf="metadata.rightActions.length > 0">
+          <ng-container *ngFor="let action of metadata.rightActions">
+            <ion-button
+              *ngIf="action.type === actionTypes.ICON"
+              (click)="clickHandler(sections.headerRight, action.token)"
+            >
+              <ion-icon slot="icon-only" [name]="action.description" color="dark"></ion-icon>
+            </ion-button>
+            <val-avatar
+              style="margin-right: 4px; cursor: pointer"
+              *ngIf="action.type === actionTypes.AVATAR"
+              [props]="{ size: 'small', image: action.description, default: '' }"
+              (onClick)="clickHandler(sections.headerRight, action.token)"
+            ></val-avatar>
+            <val-image
+              *ngIf="action.type === actionTypes.IMAGE"
+              [props]="action.image"
+              (click)="clickHandler(sections.headerRight, action.token)"
+            ></val-image>
+            <ion-button
+              *ngIf="action.type === actionTypes.BUTTON"
+              (click)="clickHandler(sections.headerRight, action.token)"
+            >
+              {{ action.description }}
+            </ion-button>
+          </ng-container>
+        </ion-buttons>
+      </ion-card-header>
+
+      <div class="tapable" (click)="clickHandler(sections.content, metadata.token)">
+        <ion-card-header *ngIf="metadata.title || metadata.overtitle" class="complex-header">
+          <div>
+            <ion-card-subtitle *ngIf="metadata.overtitle">{{ metadata.overtitle }}</ion-card-subtitle>
+            <ion-card-title *ngIf="metadata.title">{{ metadata.title }}</ion-card-title>
+          </div>
+        </ion-card-header>
+
+        <img alt="image" [src]="metadata.image" />
+        <ion-card-content *ngIf="metadata.content" class="complex-content">{{ metadata.content }}</ion-card-content>
+      </div>
+      <val-button
+        *ngFor="let b of metadata.footerActions"
+        [props]="b"
+        (click)="clickHandler(sections.footer, b.token)"
+      ></val-button>
+      <ion-buttons
+        style="display: flex; align-items: center; justify-content: flex-end; margin: 8px"
+        *ngIf="metadata.footerComplexActions.length > 0"
+      >
+        <ng-container *ngFor="let action of metadata.footerComplexActions">
+          <ion-button
+            *ngIf="action.type === actionTypes.ICON"
+            (click)="clickHandler(sections.footerExtra, action.token)"
+          >
+            <ion-icon slot="icon-only" [name]="action.description" color="dark"></ion-icon>
+          </ion-button>
+          <val-avatar
+            style="margin-right: 4px; cursor: pointer"
+            *ngIf="action.type === actionTypes.AVATAR"
+            [props]="{ size: 'small', image: action.description, default: '' }"
+            (onClick)="clickHandler(sections.footerExtra, action.token)"
+          ></val-avatar>
+          <val-image
+            *ngIf="action.type === actionTypes.IMAGE"
+            [props]="action.image"
+            (click)="clickHandler(sections.footerExtra, action.token)"
+          ></val-image>
+          <ion-button
+            *ngIf="action.type === actionTypes.BUTTON"
+            (click)="clickHandler(sections.footerExtra, action.token)"
+            color="dark"
+          >
+            {{ action.description }}
+          </ion-button>
+        </ng-container>
+      </ion-buttons>
+    </ion-card>
+  `, styles: [".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 CheckInputComponent {
+    constructor() { }
+    ngOnInit() { }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: CheckInputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: CheckInputComponent, isStandalone: true, selector: "val-check-input", ngImport: i0, template: ` <ion-checkbox>I agree to the terms and conditions</ion-checkbox> `, isInline: true, styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: IonCheckbox, selector: "ion-checkbox", inputs: ["checked", "color", "disabled", "indeterminate", "justify", "labelPlacement", "mode", "name", "value"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: CheckInputComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'val-check-input', standalone: true, imports: [CommonModule, IonCheckbox], template: ` <ion-checkbox>I agree to the terms and conditions</ion-checkbox> ` }]
+        }], ctorParameters: () => [] });
+
+class CommentInputComponent {
+    constructor() { }
+    ngOnInit() { }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: CommentInputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: CommentInputComponent, isStandalone: true, selector: "val-comment-input", inputs: { props: "props" }, ngImport: i0, template: `
+    <ion-textarea [formControl]="props.control" [counter]="true" [maxlength]="props.range.max"></ion-textarea>
+  `, isInline: true, styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { kind: "directive", type: i1$1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: IonTextarea, selector: "ion-textarea", inputs: ["autoGrow", "autocapitalize", "autofocus", "clearOnEdit", "color", "cols", "counter", "counterFormatter", "debounce", "disabled", "enterkeyhint", "errorText", "fill", "helperText", "inputmode", "label", "labelPlacement", "maxlength", "minlength", "mode", "name", "placeholder", "readonly", "required", "rows", "shape", "spellcheck", "value", "wrap"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: CommentInputComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'val-comment-input', standalone: true, imports: [CommonModule, ReactiveFormsModule, IonCheckbox, IonTextarea], template: `
+    <ion-textarea [formControl]="props.control" [counter]="true" [maxlength]="props.range.max"></ion-textarea>
+  ` }]
+        }], ctorParameters: () => [], propDecorators: { props: [{
+                type: Input
+            }] } });
+
+class ContentLoaderComponent {
+    constructor() { }
+    ngOnInit() { }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: ContentLoaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: ContentLoaderComponent, isStandalone: true, selector: "val-content-loader", inputs: { props: "props" }, ngImport: i0, template: `
+    <div [ngClass]="['spinner-wrapper', props.size]">
+      <ion-spinner [ngClass]="[props.size]" [name]="props.name" [color]="props.color"></ion-spinner>
+      <ion-text [color]="props.color">
+        <p>{{ props.text }}</p>
+      </ion-text>
+    </div>
+  `, isInline: true, styles: [".small{width:1.5rem;height:1.5rem}.medium{width:2.375rem;height:2.375rem}.large{width:3rem;height:3rem}.spinner-wrapper{width:100%;text-align:center}.spinner-wrapper.small{height:4.5rem;padding-top:1.5rem;font-size:.75rem;line-height:1.25rem;font-weight:400}.spinner-wrapper.medium{height:6.125rem;padding-top:2rem;font-size:.875rem;line-height:1.5rem;font-weight:400}@media (min-width: 768px){.spinner-wrapper.medium{font-size:1rem;line-height:1.5rem}}.spinner-wrapper.large{height:6.75rem;padding-top:2.625rem;font-size:1rem;line-height:1.5rem;font-weight:400}@media (min-width: 768px){.spinner-wrapper.large{font-size:1.125rem;line-height:1.5rem}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: IonSpinner, selector: "ion-spinner", inputs: ["color", "duration", "name", "paused"] }, { kind: "component", type: IonText, selector: "ion-text", inputs: ["color", "mode"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: ContentLoaderComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'val-content-loader', standalone: true, imports: [CommonModule, IonSpinner, IonText], template: `
+    <div [ngClass]="['spinner-wrapper', props.size]">
+      <ion-spinner [ngClass]="[props.size]" [name]="props.name" [color]="props.color"></ion-spinner>
+      <ion-text [color]="props.color">
+        <p>{{ props.text }}</p>
+      </ion-text>
+    </div>
+  `, styles: [".small{width:1.5rem;height:1.5rem}.medium{width:2.375rem;height:2.375rem}.large{width:3rem;height:3rem}.spinner-wrapper{width:100%;text-align:center}.spinner-wrapper.small{height:4.5rem;padding-top:1.5rem;font-size:.75rem;line-height:1.25rem;font-weight:400}.spinner-wrapper.medium{height:6.125rem;padding-top:2rem;font-size:.875rem;line-height:1.5rem;font-weight:400}@media (min-width: 768px){.spinner-wrapper.medium{font-size:1rem;line-height:1.5rem}}.spinner-wrapper.large{height:6.75rem;padding-top:2.625rem;font-size:1rem;line-height:1.5rem;font-weight:400}@media (min-width: 768px){.spinner-wrapper.large{font-size:1.125rem;line-height:1.5rem}}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { props: [{
+                type: Input
+            }] } });
+
+class DateInputComponent {
+    constructor() { }
+    ngOnInit() { }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: DateInputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: DateInputComponent, isStandalone: true, selector: "val-date-input", inputs: { props: "props" }, ngImport: i0, template: `
+    <div class="button-container">
+      <ion-datetime-button class="action" datetime="datetime"></ion-datetime-button>
+    </div>
+    <ion-modal [keepContentsMounted]="true">
+      <ng-template>
+        <ion-datetime
+          [formControl]="props.control"
+          id="datetime"
+          presentation="date"
+          locale="es-ES"
+          [firstDayOfWeek]="1"
+          [showDefaultButtons]="true"
+          doneText="Aceptar"
+          cancelText="Cancelar"
+          formatOptions="{
+            date: { weekday: 'short', month: 'long', day: '2-digit' },
+            time: {
+              hour: '2-digit',
+              minute: '2-digit',
+            },
+          }"
+        >
+          <span slot="title">{{ props.hint }}</span>
+        </ion-datetime>
+      </ng-template>
+    </ion-modal>
+  `, isInline: true, styles: [".section{margin-top:1rem}.input{margin:.5rem 0}@media (min-width: 768px){.input{margin:.75rem 0}}.button-container{display:flex;flex-direction:column;align-items:flex-start}.action{margin-top:.25rem}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: IonDatetime, selector: "ion-datetime", inputs: ["cancelText", "clearText", "color", "dayValues", "disabled", "doneText", "firstDayOfWeek", "highlightedDates", "hourCycle", "hourValues", "isDateEnabled", "locale", "max", "min", "minuteValues", "mode", "monthValues", "multiple", "name", "preferWheel", "presentation", "readonly", "showClearButton", "showDefaultButtons", "showDefaultTimeLabel", "showDefaultTitle", "size", "titleSelectedDatesFormatter", "value", "yearValues"] }, { kind: "component", type: IonDatetimeButton, selector: "ion-datetime-button", inputs: ["color", "datetime", "disabled", "mode"] }, { kind: "component", type: IonModal, selector: "ion-modal" }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: DateInputComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'val-date-input', standalone: true, imports: [CommonModule, ReactiveFormsModule, IonDatetime, IonDatetimeButton, IonModal], template: `
+    <div class="button-container">
+      <ion-datetime-button class="action" datetime="datetime"></ion-datetime-button>
+    </div>
+    <ion-modal [keepContentsMounted]="true">
+      <ng-template>
+        <ion-datetime
+          [formControl]="props.control"
+          id="datetime"
+          presentation="date"
+          locale="es-ES"
+          [firstDayOfWeek]="1"
+          [showDefaultButtons]="true"
+          doneText="Aceptar"
+          cancelText="Cancelar"
+          formatOptions="{
+            date: { weekday: 'short', month: 'long', day: '2-digit' },
+            time: {
+              hour: '2-digit',
+              minute: '2-digit',
+            },
+          }"
+        >
+          <span slot="title">{{ props.hint }}</span>
+        </ion-datetime>
+      </ng-template>
+    </ion-modal>
+  `, styles: [".section{margin-top:1rem}.input{margin:.5rem 0}@media (min-width: 768px){.input{margin:.75rem 0}}.button-container{display:flex;flex-direction:column;align-items:flex-start}.action{margin-top:.25rem}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { props: [{
+                type: Input
+            }] } });
+
+class EmailInputComponent {
+    constructor() { }
+    ngOnInit() { }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: EmailInputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: EmailInputComponent, isStandalone: true, selector: "val-email-input", inputs: { props: "props" }, ngImport: i0, template: ` <ion-input [formControl]="props.control" type="email" [placeholder]="props.placeholder"></ion-input> `, isInline: true, styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: IonInput, selector: "ion-input", inputs: ["accept", "autocapitalize", "autocomplete", "autocorrect", "autofocus", "clearInput", "clearOnEdit", "color", "counter", "counterFormatter", "debounce", "disabled", "enterkeyhint", "errorText", "fill", "helperText", "inputmode", "label", "labelPlacement", "max", "maxlength", "min", "minlength", "mode", "multiple", "name", "pattern", "placeholder", "readonly", "required", "shape", "size", "spellcheck", "step", "type", "value"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: EmailInputComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'val-email-input', standalone: true, imports: [CommonModule, ReactiveFormsModule, IonInput], template: ` <ion-input [formControl]="props.control" type="email" [placeholder]="props.placeholder"></ion-input> ` }]
+        }], ctorParameters: () => [], propDecorators: { props: [{
+                type: Input
+            }] } });
+
+class FileInputComponent {
+    constructor() {
+        this.contrastButton = {
+            ...PrimarySolidDefaultRoundButton('Subir archivo'),
+            color: 'light',
+        };
+    }
+    ngOnInit() { }
+    onFileSelected(event) {
+        this.selectedFile = event.target.files[0];
+        this.props.control.setValue(this.selectedFile);
+    }
+    reset() {
+        this.selectedFile = null;
+        this.fileInput.nativeElement.value = '';
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: FileInputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: FileInputComponent, isStandalone: true, selector: "val-file-input", inputs: { props: "props" }, viewQueries: [{ propertyName: "fileInput", first: true, predicate: ["fileInput"], descendants: true }], ngImport: i0, template: `
+    <div class="file-container">
+      <input style="display: none" type="file" (change)="onFileSelected($event)" #fileInput />
+      <div class="name-container">
+        <ion-icon [name]="selectedFile ? 'checkmark-circle-outline' : 'alert-circle-outline'"></ion-icon>
+        <val-text
+          style="margin-left: 4px;"
+          [props]="{
+            content: selectedFile ? selectedFile.name : 'No has seleccionado archivo',
+            color: 'dark',
+            bold: false,
+            size: 'medium',
+          }"
+        ></val-text>
+      </div>
+      <val-button [props]="contrastButton" (onClick)="fileInput.click()"></val-button>
+    </div>
+  `, isInline: true, styles: [".section{margin-top:1rem}.input{margin:.5rem 0}@media (min-width: 768px){.input{margin:.75rem 0}}.file-container{margin-top:.25rem}.name-container{display:flex;flex-direction:row;align-items:flex-start}\n"], dependencies: [{ kind: "component", type: IonIcon, selector: "ion-icon", inputs: ["color", "flipRtl", "icon", "ios", "lazy", "md", "mode", "name", "sanitize", "size", "src"] }, { kind: "component", type: TextComponent, selector: "val-text", inputs: ["props"] }, { kind: "component", type: ButtonComponent, selector: "val-button", inputs: ["props"], outputs: ["onClick"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: FileInputComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'val-file-input', standalone: true, imports: [IonIcon, TextComponent, ButtonComponent], template: `
+    <div class="file-container">
+      <input style="display: none" type="file" (change)="onFileSelected($event)" #fileInput />
+      <div class="name-container">
+        <ion-icon [name]="selectedFile ? 'checkmark-circle-outline' : 'alert-circle-outline'"></ion-icon>
+        <val-text
+          style="margin-left: 4px;"
+          [props]="{
+            content: selectedFile ? selectedFile.name : 'No has seleccionado archivo',
+            color: 'dark',
+            bold: false,
+            size: 'medium',
+          }"
+        ></val-text>
+      </div>
+      <val-button [props]="contrastButton" (onClick)="fileInput.click()"></val-button>
+    </div>
+  `, styles: [".section{margin-top:1rem}.input{margin:.5rem 0}@media (min-width: 768px){.input{margin:.75rem 0}}.file-container{margin-top:.25rem}.name-container{display:flex;flex-direction:row;align-items:flex-start}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { fileInput: [{
+                type: ViewChild,
+                args: ['fileInput']
+            }], props: [{
+                type: Input
+            }] } });
+
+class HintComponent {
+    constructor() { }
+    ngOnInit() { }
+    get Errors() {
+        const keys = Object.keys(this.props.errors);
+        const errors = [];
+        keys.map((e) => {
+            if (this.props.control.hasError(e)) {
+                errors.push(this.props.errors[e]);
+            }
+        });
+        return errors;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: HintComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: HintComponent, isStandalone: true, selector: "val-hint", inputs: { props: "props" }, ngImport: i0, template: `
+    <div class="hint-container" *ngIf="props.control.invalid && (props.control.touched || props.control.dirty)">
+      <val-text
+        *ngFor="let e of Errors"
+        [props]="{
+          content: e,
+          color: 'danger',
+          bold: false,
+          size: 'small',
+        }"
+      ></val-text>
+    </div>
+  `, isInline: true, styles: [".section{margin-top:1rem}.input{margin:.5rem 0}@media (min-width: 768px){.input{margin:.75rem 0}}.hint-container{margin-top:.25rem}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: TextComponent, selector: "val-text", inputs: ["props"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: HintComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'val-hint', standalone: true, imports: [CommonModule, TextComponent], template: `
+    <div class="hint-container" *ngIf="props.control.invalid && (props.control.touched || props.control.dirty)">
+      <val-text
+        *ngFor="let e of Errors"
+        [props]="{
+          content: e,
+          color: 'danger',
+          bold: false,
+          size: 'small',
+        }"
+      ></val-text>
+    </div>
+  `, styles: [".section{margin-top:1rem}.input{margin:.5rem 0}@media (min-width: 768px){.input{margin:.75rem 0}}.hint-container{margin-top:.25rem}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { props: [{
+                type: Input
+            }] } });
+
+class HourInputComponent {
+    constructor() { }
+    ngOnInit() { }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: HourInputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: HourInputComponent, isStandalone: true, selector: "val-hour-input", inputs: { props: "props" }, ngImport: i0, template: ` <ion-datetime [formControl]="props.control" presentation="time"></ion-datetime>`, isInline: true, styles: [""], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: IonDatetime, selector: "ion-datetime", inputs: ["cancelText", "clearText", "color", "dayValues", "disabled", "doneText", "firstDayOfWeek", "highlightedDates", "hourCycle", "hourValues", "isDateEnabled", "locale", "max", "min", "minuteValues", "mode", "monthValues", "multiple", "name", "preferWheel", "presentation", "readonly", "showClearButton", "showDefaultButtons", "showDefaultTimeLabel", "showDefaultTitle", "size", "titleSelectedDatesFormatter", "value", "yearValues"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: HourInputComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'val-hour-input', standalone: true, imports: [ReactiveFormsModule, IonDatetime], template: ` <ion-datetime [formControl]="props.control" presentation="time"></ion-datetime>` }]
+        }], ctorParameters: () => [], propDecorators: { props: [{
+                type: Input
+            }] } });
+
+class LinkComponent {
+    constructor() {
+        this.onClick = new EventEmitter();
+    }
+    ngOnInit() { }
+    onClickHandler() {
+        this.onClick.emit();
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: LinkComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: LinkComponent, isStandalone: true, selector: "val-link", inputs: { props: "props" }, outputs: { onClick: "onClick" }, ngImport: i0, template: `
+    <div>
+      <ion-button type="button" [color]="props.color" fill="clear" [size]="props.size" (click)="onClickHandler()">
+        <ion-icon slot="end" name="chevron-forward-outline"></ion-icon>
+        <ion-text>{{ props.text }}</ion-text>
+      </ion-button>
+    </div>
+  `, isInline: true, styles: ["ion-button{font-family:var(--ion-default-font),Arial,sans-serif}\n"], dependencies: [{ kind: "component", type: IonButton, selector: "ion-button", inputs: ["buttonType", "color", "disabled", "download", "expand", "fill", "form", "href", "mode", "rel", "routerAnimation", "routerDirection", "shape", "size", "strong", "target", "type"] }, { kind: "component", type: IonIcon, selector: "ion-icon", inputs: ["color", "flipRtl", "icon", "ios", "lazy", "md", "mode", "name", "sanitize", "size", "src"] }, { kind: "component", type: IonText, selector: "ion-text", inputs: ["color", "mode"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: LinkComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'val-link', standalone: true, imports: [IonButton, IonIcon, IonText], template: `
+    <div>
+      <ion-button type="button" [color]="props.color" fill="clear" [size]="props.size" (click)="onClickHandler()">
+        <ion-icon slot="end" name="chevron-forward-outline"></ion-icon>
+        <ion-text>{{ props.text }}</ion-text>
+      </ion-button>
+    </div>
+  `, styles: ["ion-button{font-family:var(--ion-default-font),Arial,sans-serif}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { props: [{
+                type: Input
+            }], onClick: [{
+                type: Output
+            }] } });
+
+class LinksCakeComponent {
+    constructor() { }
+    ngOnInit() { }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: LinksCakeComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: LinksCakeComponent, isStandalone: true, selector: "val-links-cake", inputs: { props: "props" }, ngImport: i0, template: `
+    <div>
+      <div class="title">
+        <val-title [props]="{ content: props.title, color: 'dark', bold: false, size: props.size }"></val-title>
+      </div>
+      <div class="link" *ngFor="let l of props.links">
+        <val-href [props]="l"></val-href>
+      </div>
+    </div>
+  `, isInline: true, styles: [".title{margin:1rem 0}.link{margin-bottom:.5rem}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "component", type: TitleComponent, selector: "val-title", inputs: ["props"] }, { kind: "component", type: HrefComponent, selector: "val-href", inputs: ["props"], outputs: ["onClick"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: LinksCakeComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'val-links-cake', standalone: true, imports: [CommonModule, TitleComponent, HrefComponent], template: `
+    <div>
+      <div class="title">
+        <val-title [props]="{ content: props.title, color: 'dark', bold: false, size: props.size }"></val-title>
+      </div>
+      <div class="link" *ngFor="let l of props.links">
+        <val-href [props]="l"></val-href>
+      </div>
+    </div>
+  `, styles: [".title{margin:1rem 0}.link{margin-bottom:.5rem}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { props: [{
+                type: Input
+            }] } });
+
+class NotesBoxComponent {
+    constructor() { }
+    ngOnInit() { }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: NotesBoxComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: NotesBoxComponent, isStandalone: true, selector: "val-notes-box", inputs: { props: "props" }, ngImport: i0, template: `
+    <val-box [props]="{ icon: '', bordered: false, color: props.color, leftBorder: true }">
+      <div [ngClass]="['content-container', props.size]" body>
+        <val-text [props]="{ content: props.prefix, color: props.textColor, bold: true, size: props.size }"></val-text>
+        <val-text [props]="{ content: props.text, color: props.textColor, bold: false, size: props.size }"></val-text>
+      </div>
+    </val-box>
+  `, isInline: true, styles: [".content-container{display:inline-grid}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: BoxComponent, selector: "val-box", inputs: ["props"], outputs: ["onClick"] }, { kind: "component", type: TextComponent, selector: "val-text", inputs: ["props"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: NotesBoxComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'val-notes-box', standalone: true, imports: [CommonModule, BoxComponent, TextComponent], template: `
+    <val-box [props]="{ icon: '', bordered: false, color: props.color, leftBorder: true }">
+      <div [ngClass]="['content-container', props.size]" body>
+        <val-text [props]="{ content: props.prefix, color: props.textColor, bold: true, size: props.size }"></val-text>
+        <val-text [props]="{ content: props.text, color: props.textColor, bold: false, size: props.size }"></val-text>
+      </div>
+    </val-box>
+  `, styles: [".content-container{display:inline-grid}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { props: [{
+                type: Input
+            }] } });
+
+class NumberInputComponent {
+    constructor() { }
+    ngOnInit() { }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: NumberInputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: NumberInputComponent, isStandalone: true, selector: "val-number-input", inputs: { props: "props" }, ngImport: i0, template: ` <ion-input [formControl]="props.control" type="number" [placeholder]="props.placeholder"></ion-input> `, isInline: true, styles: [""], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: IonInput, selector: "ion-input", inputs: ["accept", "autocapitalize", "autocomplete", "autocorrect", "autofocus", "clearInput", "clearOnEdit", "color", "counter", "counterFormatter", "debounce", "disabled", "enterkeyhint", "errorText", "fill", "helperText", "inputmode", "label", "labelPlacement", "max", "maxlength", "min", "minlength", "mode", "multiple", "name", "pattern", "placeholder", "readonly", "required", "shape", "size", "spellcheck", "step", "type", "value"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: NumberInputComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'val-number-input', standalone: true, imports: [ReactiveFormsModule, IonInput], template: ` <ion-input [formControl]="props.control" type="number" [placeholder]="props.placeholder"></ion-input> ` }]
+        }], ctorParameters: () => [], propDecorators: { props: [{
+                type: Input
+            }] } });
+
+class PasswordInputComponent {
+    constructor() {
+        this.hidePassword = true;
+    }
+    ngOnInit() { }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: PasswordInputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: PasswordInputComponent, isStandalone: true, selector: "val-password-input", inputs: { props: "props" }, ngImport: i0, template: `
+    <div class="input-container">
+      <ion-input
+        class="sign-in__input-password"
+        [formControl]="props.control"
+        [type]="hidePassword ? 'password' : 'text'"
+        [placeholder]="props.placeholder"
+      ></ion-input>
+      <ion-button color="dark" fill="clear" (click)="hidePassword = !hidePassword" size="small">
+        <ion-icon slot="icon-only" [name]="hidePassword ? 'eye-off-outline' : 'eye-outline'"></ion-icon>
+      </ion-button>
+    </div>
+  `, isInline: true, styles: [".section{margin-top:1rem}.input{margin:.5rem 0}@media (min-width: 768px){.input{margin:.75rem 0}}.input-container{display:flex;align-items:center;flex-direction:row}\n"], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: IonInput, selector: "ion-input", inputs: ["accept", "autocapitalize", "autocomplete", "autocorrect", "autofocus", "clearInput", "clearOnEdit", "color", "counter", "counterFormatter", "debounce", "disabled", "enterkeyhint", "errorText", "fill", "helperText", "inputmode", "label", "labelPlacement", "max", "maxlength", "min", "minlength", "mode", "multiple", "name", "pattern", "placeholder", "readonly", "required", "shape", "size", "spellcheck", "step", "type", "value"] }, { kind: "component", type: IonButton, selector: "ion-button", inputs: ["buttonType", "color", "disabled", "download", "expand", "fill", "form", "href", "mode", "rel", "routerAnimation", "routerDirection", "shape", "size", "strong", "target", "type"] }, { kind: "component", type: IonIcon, selector: "ion-icon", inputs: ["color", "flipRtl", "icon", "ios", "lazy", "md", "mode", "name", "sanitize", "size", "src"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: PasswordInputComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'val-password-input', standalone: true, imports: [ReactiveFormsModule, IonInput, IonButton, IonIcon], template: `
+    <div class="input-container">
+      <ion-input
+        class="sign-in__input-password"
+        [formControl]="props.control"
+        [type]="hidePassword ? 'password' : 'text'"
+        [placeholder]="props.placeholder"
+      ></ion-input>
+      <ion-button color="dark" fill="clear" (click)="hidePassword = !hidePassword" size="small">
+        <ion-icon slot="icon-only" [name]="hidePassword ? 'eye-off-outline' : 'eye-outline'"></ion-icon>
+      </ion-button>
+    </div>
+  `, styles: [".section{margin-top:1rem}.input{margin:.5rem 0}@media (min-width: 768px){.input{margin:.75rem 0}}.input-container{display:flex;align-items:center;flex-direction:row}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { props: [{
+                type: Input
+            }] } });
+
+class PinInputComponent {
+    constructor() {
+        this.codeLength = 5;
+        this.otpInputConfig = {
+            inputStyles: {
+                'font-size': '36px',
+                width: '55px',
+                height: '55px',
+            },
+            inputClass: 'otp-input-box',
+            length: this.codeLength,
+            allowNumbersOnly: true,
+        };
+    }
+    ngOnInit() { }
+    reset() {
+        if (this.pinCode) {
+            this.pinCode.setValue('');
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: PinInputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: PinInputComponent, isStandalone: true, selector: "val-pin-input", inputs: { props: "props" }, viewQueries: [{ propertyName: "pinCode", first: true, predicate: NgOtpInputComponent, descendants: true }], ngImport: i0, template: `
+    <div class="otp">
+      <ng-otp-input [formCtrl]="props.control" [config]="otpInputConfig"></ng-otp-input>
+    </div>
+  `, isInline: true, styles: [".section{margin-top:1rem}.input{margin:.5rem 0}@media (min-width: 768px){.input{margin:.75rem 0}}.otp{text-align:center;margin-top:.25rem;font-family:var(--ion-default-font),Arial,sans-serif}.otp-input-box:focus{border-color:#0ff}\n"], dependencies: [{ kind: "ngmodule", type: NgOtpInputModule }, { kind: "component", type: i1$2.NgOtpInputComponent, selector: "ng-otp-input", inputs: ["config", "formCtrl"], outputs: ["onInputChange"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: PinInputComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'val-pin-input', standalone: true, imports: [NgOtpInputModule], template: `
+    <div class="otp">
+      <ng-otp-input [formCtrl]="props.control" [config]="otpInputConfig"></ng-otp-input>
+    </div>
+  `, styles: [".section{margin-top:1rem}.input{margin:.5rem 0}@media (min-width: 768px){.input{margin:.75rem 0}}.otp{text-align:center;margin-top:.25rem;font-family:var(--ion-default-font),Arial,sans-serif}.otp-input-box:focus{border-color:#0ff}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { pinCode: [{
+                type: ViewChild,
+                args: [NgOtpInputComponent, { static: false }]
+            }], props: [{
+                type: Input
+            }] } });
+
+class TitleBlockComponent {
+    constructor() { }
+    ngOnInit() { }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: TitleBlockComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: TitleBlockComponent, isStandalone: true, selector: "val-title-block", inputs: { props: "props" }, ngImport: i0, template: `
+    <div [ngClass]="['titles-container', props.position]">
+      <val-title
+        *ngIf="props.aboveTitle"
+        [props]="{
+          content: props.aboveTitle.text | uppercase,
+          color: props.aboveTitle.color,
+          bold: false,
+          size: props.aboveTitle.size,
+        }"
+      ></val-title>
+      <val-display
+        *ngIf="props.title"
+        [props]="{
+          content: props.title.text,
+          color: props.title.color,
+          size: props.title.size,
+        }"
+      ></val-display>
+      <val-title
+        *ngIf="props.bellowTitle"
+        [props]="{
+          content: props.bellowTitle.text,
+          color: props.bellowTitle.color,
+          bold: false,
+          size: props.bellowTitle.size,
+        }"
+      ></val-title>
+    </div>
+  `, isInline: true, styles: ["val-button,val-title,val-display{display:inline-block}.titles-container{width:100%;padding:.25rem;display:flex;flex-direction:column;flex-wrap:wrap}.titles-container.left{align-content:flex-start;align-items:start}.titles-container.center{align-content:center;align-items:center;text-align:center}.titles-container.right{align-content:flex-end;align-items:end;text-align:end}@media (min-width: 768px){.titles-container{padding:.5rem}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: i1.UpperCasePipe, name: "uppercase" }, { kind: "component", type: TitleComponent, selector: "val-title", inputs: ["props"] }, { kind: "component", type: DisplayComponent, selector: "val-display", inputs: ["props"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: TitleBlockComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'val-title-block', standalone: true, imports: [CommonModule, TitleComponent, DisplayComponent], template: `
+    <div [ngClass]="['titles-container', props.position]">
+      <val-title
+        *ngIf="props.aboveTitle"
+        [props]="{
+          content: props.aboveTitle.text | uppercase,
+          color: props.aboveTitle.color,
+          bold: false,
+          size: props.aboveTitle.size,
+        }"
+      ></val-title>
+      <val-display
+        *ngIf="props.title"
+        [props]="{
+          content: props.title.text,
+          color: props.title.color,
+          size: props.title.size,
+        }"
+      ></val-display>
+      <val-title
+        *ngIf="props.bellowTitle"
+        [props]="{
+          content: props.bellowTitle.text,
+          color: props.bellowTitle.color,
+          bold: false,
+          size: props.bellowTitle.size,
+        }"
+      ></val-title>
+    </div>
+  `, styles: ["val-button,val-title,val-display{display:inline-block}.titles-container{width:100%;padding:.25rem;display:flex;flex-direction:column;flex-wrap:wrap}.titles-container.left{align-content:flex-start;align-items:start}.titles-container.center{align-content:center;align-items:center;text-align:center}.titles-container.right{align-content:flex-end;align-items:end;text-align:end}@media (min-width: 768px){.titles-container{padding:.5rem}}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { props: [{
+                type: Input
+            }] } });
+
+class ProgressStatusComponent {
+    constructor() {
+        this.currentIndex = 0;
+        this.blinking = false;
+    }
+    ngOnInit() {
+        setInterval(() => {
+            this.blinking = !this.blinking;
+        }, 1000);
+        setInterval(() => {
+            this.getNextMessage();
+        }, 9000);
+    }
+    get Content() {
+        return this.props.messages[this.currentIndex];
+    }
+    getNextMessage() {
+        this.currentIndex = (this.currentIndex + 1) % this.props.messages.length;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: ProgressStatusComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: ProgressStatusComponent, isStandalone: true, selector: "val-progress-status", inputs: { props: "props" }, ngImport: i0, template: `
+    <div class="status-container">
+      <div class="title-container">
+        <val-title-block
+          [props]="{
+            position: 'center',
+            aboveTitle: props.titles.aboveTitle,
+            title: props.titles.title,
+            bellowTitle: props.titles.bellowTitle,
+          }"
+        ></val-title-block>
+      </div>
+      <div class="progress-bar-container">
+        <val-progress-bar
+          [props]="{
+            progress: props.progress,
+            size: 'xlarge',
+            color: props.color,
+            rounded: true,
+            type: 'determinate',
+            buffer: 1,
+          }"
+        ></val-progress-bar>
+      </div>
+      <div class="subtitle-container">
+        <div class="subtitle" [class.blink]="blinking">
+          <val-text [props]="{ content: Content, color: 'medium', bold: false, size: props.size }"></val-text>
+        </div>
+      </div>
+    </div>
+  `, isInline: true, styles: [".status-container{min-height:6.25rem;margin:1rem .5rem}.progress-bar-container{max-width:60%;margin:0 auto}.title-container{margin-bottom:.5rem}.subtitle-container{width:100%;display:flex}.subtitle{padding:1rem;margin:0 auto;height:1rem}.blink{animation:blink 1s infinite alternate ease-in}@keyframes blink{0%{opacity:0;margin-top:6px}to{opacity:1;margin-top:0}}\n"], dependencies: [{ kind: "component", type: TitleBlockComponent, selector: "val-title-block", inputs: ["props"] }, { kind: "component", type: ProgressBarComponent, selector: "val-progress-bar", inputs: ["props"] }, { kind: "component", type: TextComponent, selector: "val-text", inputs: ["props"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: ProgressStatusComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'val-progress-status', standalone: true, imports: [TitleBlockComponent, ProgressBarComponent, TextComponent], template: `
+    <div class="status-container">
+      <div class="title-container">
+        <val-title-block
+          [props]="{
+            position: 'center',
+            aboveTitle: props.titles.aboveTitle,
+            title: props.titles.title,
+            bellowTitle: props.titles.bellowTitle,
+          }"
+        ></val-title-block>
+      </div>
+      <div class="progress-bar-container">
+        <val-progress-bar
+          [props]="{
+            progress: props.progress,
+            size: 'xlarge',
+            color: props.color,
+            rounded: true,
+            type: 'determinate',
+            buffer: 1,
+          }"
+        ></val-progress-bar>
+      </div>
+      <div class="subtitle-container">
+        <div class="subtitle" [class.blink]="blinking">
+          <val-text [props]="{ content: Content, color: 'medium', bold: false, size: props.size }"></val-text>
+        </div>
+      </div>
+    </div>
+  `, styles: [".status-container{min-height:6.25rem;margin:1rem .5rem}.progress-bar-container{max-width:60%;margin:0 auto}.title-container{margin-bottom:.5rem}.subtitle-container{width:100%;display:flex}.subtitle{padding:1rem;margin:0 auto;height:1rem}.blink{animation:blink 1s infinite alternate ease-in}@keyframes blink{0%{opacity:0;margin-top:6px}to{opacity:1;margin-top:0}}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { props: [{
+                type: Input
+            }] } });
+
+class PrompterComponent {
+    constructor() {
+        this.onClick = new EventEmitter();
+    }
+    ngOnInit() { }
+    clickHandler(token) {
+        this.onClick.emit(token);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: PrompterComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: PrompterComponent, isStandalone: true, selector: "val-prompter", inputs: { props: "props" }, outputs: { onClick: "onClick" }, ngImport: i0, template: `
+    <val-box
+      class="teleprompter-container"
+      [props]="{ icon: '', bordered: props.bordered, color: props.color, leftBorder: false }"
+    >
+      <div class="container" [class.teleprompter-content]="props.teleprompter" body>
+        <div>
+          <val-text
+            [props]="{
+              content: props.content,
+              color: '',
+              bold: true,
+              size: 'large',
+            }"
+          ></val-text>
+        </div>
+        <div *ngIf="props.buttons">
+          <val-button-group
+            class="buttons-container"
+            [props]="{ buttons: props.buttons, position: 'left', columned: false }"
+            (onClick)="clickHandler($event)"
+          ></val-button-group>
+        </div>
+        <div *ngIf="props.hrefs">
+          <val-href class="link" *ngFor="let l of props.hrefs" [props]="l" (onClick)="clickHandler($event)"></val-href>
+        </div>
+      </div>
+    </val-box>
+  `, isInline: true, styles: ["@charset \"UTF-8\";.container{display:flex;align-items:center;justify-content:center}.teleprompter-container{overflow:hidden;width:100%}.teleprompter-content{white-space:nowrap;animation:scroll-left 15s linear infinite}@keyframes scroll-left{0%{transform:translate(100%)}to{transform:translate(-100%)}}.link{margin:0 .25rem}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: BoxComponent, selector: "val-box", inputs: ["props"], outputs: ["onClick"] }, { kind: "component", type: ButtonGroupComponent, selector: "val-button-group", inputs: ["props"], outputs: ["onClick"] }, { kind: "component", type: TextComponent, selector: "val-text", inputs: ["props"] }, { kind: "component", type: HrefComponent, selector: "val-href", inputs: ["props"], outputs: ["onClick"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: PrompterComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'val-prompter', standalone: true, imports: [CommonModule, BoxComponent, ButtonGroupComponent, TextComponent, HrefComponent], template: `
+    <val-box
+      class="teleprompter-container"
+      [props]="{ icon: '', bordered: props.bordered, color: props.color, leftBorder: false }"
+    >
+      <div class="container" [class.teleprompter-content]="props.teleprompter" body>
+        <div>
+          <val-text
+            [props]="{
+              content: props.content,
+              color: '',
+              bold: true,
+              size: 'large',
+            }"
+          ></val-text>
+        </div>
+        <div *ngIf="props.buttons">
+          <val-button-group
+            class="buttons-container"
+            [props]="{ buttons: props.buttons, position: 'left', columned: false }"
+            (onClick)="clickHandler($event)"
+          ></val-button-group>
+        </div>
+        <div *ngIf="props.hrefs">
+          <val-href class="link" *ngFor="let l of props.hrefs" [props]="l" (onClick)="clickHandler($event)"></val-href>
+        </div>
+      </div>
+    </val-box>
+  `, styles: ["@charset \"UTF-8\";.container{display:flex;align-items:center;justify-content:center}.teleprompter-container{overflow:hidden;width:100%}.teleprompter-content{white-space:nowrap;animation:scroll-left 15s linear infinite}@keyframes scroll-left{0%{transform:translate(100%)}to{transform:translate(-100%)}}.link{margin:0 .25rem}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { props: [{
+                type: Input
+            }], onClick: [{
+                type: Output
+            }] } });
+
+class RadioInputComponent {
+    constructor() { }
+    ngOnInit() { }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: RadioInputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: RadioInputComponent, isStandalone: true, selector: "val-radio-input", inputs: { props: "props" }, ngImport: i0, template: `
+    <ion-radio-group [allowEmptySelection]="true" [formControl]="props.control">
+      <ng-container *ngFor="let o of props.options">
+        <ion-radio [value]="o.id">{{ o.name }}</ion-radio>
+        <br />
+      </ng-container>
+    </ion-radio-group>
+  `, isInline: true, styles: [""], dependencies: [{ kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: IonRadioGroup, selector: "ion-radio-group", inputs: ["allowEmptySelection", "name", "value"] }, { kind: "component", type: IonRadio, selector: "ion-radio", inputs: ["alignment", "color", "disabled", "justify", "labelPlacement", "mode", "name", "value"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: RadioInputComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'val-radio-input', standalone: true, imports: [NgFor, ReactiveFormsModule, IonRadioGroup, IonRadio], template: `
+    <ion-radio-group [allowEmptySelection]="true" [formControl]="props.control">
+      <ng-container *ngFor="let o of props.options">
+        <ion-radio [value]="o.id">{{ o.name }}</ion-radio>
+        <br />
+      </ng-container>
+    </ion-radio-group>
+  ` }]
+        }], ctorParameters: () => [], propDecorators: { props: [{
+                type: Input
+            }] } });
+
+class SearchbarComponent {
+    constructor() {
+        this.focusEvent = new EventEmitter();
+        this.blurEvent = new EventEmitter();
+        this.filterEvent = new EventEmitter();
+    }
+    onSearch($event) {
+        const searchTerm = $event.detail.value;
+        this.filterEvent.emit(searchTerm);
+    }
+    onFocus() {
+        this.focusEvent.emit();
+    }
+    onBlur() {
+        this.blurEvent.emit();
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: SearchbarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: SearchbarComponent, isStandalone: true, selector: "app-searchbar", inputs: { disabled: "disabled" }, outputs: { focusEvent: "focusEvent", blurEvent: "blurEvent", filterEvent: "filterEvent" }, ngImport: i0, template: `
+    <ion-searchbar
+      mode="ios"
+      debounce="500"
+      placeholder="Búsqueda"
+      [disabled]="disabled"
+      showCancelButton="focus"
+      cancelButtonText="Cancelar"
+      (ionInput)="onSearch($event)"
+      (ionBlur)="onBlur()"
+      (ionFocus)="onFocus()"
+    >
+    </ion-searchbar>
+  `, isInline: true, styles: ["ion-searchbar{--cancel-button-color: var(--ion-color-dark);--background: var(--ion-color-light);font-family:var(--ion-default-font),Arial,sans-serif}\n"], dependencies: [{ kind: "component", type: IonSearchbar, selector: "ion-searchbar", inputs: ["animated", "autocomplete", "autocorrect", "cancelButtonIcon", "cancelButtonText", "clearIcon", "color", "debounce", "disabled", "enterkeyhint", "inputmode", "mode", "name", "placeholder", "searchIcon", "showCancelButton", "showClearButton", "spellcheck", "type", "value"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: SearchbarComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'app-searchbar', standalone: true, imports: [IonSearchbar], template: `
+    <ion-searchbar
+      mode="ios"
+      debounce="500"
+      placeholder="Búsqueda"
+      [disabled]="disabled"
+      showCancelButton="focus"
+      cancelButtonText="Cancelar"
+      (ionInput)="onSearch($event)"
+      (ionBlur)="onBlur()"
+      (ionFocus)="onFocus()"
+    >
+    </ion-searchbar>
+  `, styles: ["ion-searchbar{--cancel-button-color: var(--ion-color-dark);--background: var(--ion-color-light);font-family:var(--ion-default-font),Arial,sans-serif}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { disabled: [{
+                type: Input
+            }], focusEvent: [{
+                type: Output
+            }], blurEvent: [{
+                type: Output
+            }], filterEvent: [{
+                type: Output
+            }] } });
+
+class TextInputComponent {
+    constructor() { }
+    ngOnInit() { }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: TextInputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: TextInputComponent, isStandalone: true, selector: "val-text-input", inputs: { props: "props" }, ngImport: i0, template: ` <ion-input [formControl]="props.control" type="text" [placeholder]="props.placeholder"></ion-input> `, isInline: true, styles: [".section{margin-top:1rem}.input{margin:.5rem 0}@media (min-width: 768px){.input{margin:.75rem 0}}\n"], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: IonInput, selector: "ion-input", inputs: ["accept", "autocapitalize", "autocomplete", "autocorrect", "autofocus", "clearInput", "clearOnEdit", "color", "counter", "counterFormatter", "debounce", "disabled", "enterkeyhint", "errorText", "fill", "helperText", "inputmode", "label", "labelPlacement", "max", "maxlength", "min", "minlength", "mode", "multiple", "name", "pattern", "placeholder", "readonly", "required", "shape", "size", "spellcheck", "step", "type", "value"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: TextInputComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'val-text-input', standalone: true, imports: [ReactiveFormsModule, IonInput], template: ` <ion-input [formControl]="props.control" type="text" [placeholder]="props.placeholder"></ion-input> `, styles: [".section{margin-top:1rem}.input{margin:.5rem 0}@media (min-width: 768px){.input{margin:.75rem 0}}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { props: [{
+                type: Input
+            }] } });
+
+class BannerComponent {
+    constructor() {
+        this.onClick = new EventEmitter();
+        this.onClose = new EventEmitter();
+    }
+    ngOnInit() { }
+    clickHandler(token) {
+        this.onClick.emit(token);
+    }
+    closeHandler() {
+        this.onClose.emit();
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: BannerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: BannerComponent, isStandalone: true, selector: "val-banner", inputs: { props: "props" }, outputs: { onClick: "onClick", onClose: "onClose" }, ngImport: i0, template: `
+    <val-box
+      [props]="{ icon: props.closable ? 'close-outline' : '', bordered: props.bordered, color: '' }"
+      (onClick)="closeHandler()"
+    >
+      <div [ngClass]="['content-container', props.mode]" body>
+        <val-title-block
+          [props]="{
+            position: props.mode === 'center' ? 'center' : 'left',
+            aboveTitle: props.content.aboveTitle,
+            title: props.content.title,
+            bellowTitle: props.content.bellowTitle,
+          }"
+        ></val-title-block>
+        <val-button-group
+          class="buttons-container"
+          [props]="{ position: props.mode === 'center' ? 'center' : 'left', buttons: props.actions, columned: false }"
+          (onClick)="clickHandler($event)"
+        ></val-button-group>
+      </div>
+    </val-box>
+  `, isInline: true, styles: [".content-container{display:flex;justify-content:space-between}.content-container.center{flex-direction:column}.content-container.column{flex-direction:row}.content-container.row,.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: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: BoxComponent, selector: "val-box", inputs: ["props"], outputs: ["onClick"] }, { kind: "component", type: TitleBlockComponent, selector: "val-title-block", inputs: ["props"] }, { kind: "component", type: ButtonGroupComponent, selector: "val-button-group", inputs: ["props"], outputs: ["onClick"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: BannerComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'val-banner', standalone: true, imports: [CommonModule, BoxComponent, TitleBlockComponent, ButtonGroupComponent], template: `
+    <val-box
+      [props]="{ icon: props.closable ? 'close-outline' : '', bordered: props.bordered, color: '' }"
+      (onClick)="closeHandler()"
+    >
+      <div [ngClass]="['content-container', props.mode]" body>
+        <val-title-block
+          [props]="{
+            position: props.mode === 'center' ? 'center' : 'left',
+            aboveTitle: props.content.aboveTitle,
+            title: props.content.title,
+            bellowTitle: props.content.bellowTitle,
+          }"
+        ></val-title-block>
+        <val-button-group
+          class="buttons-container"
+          [props]="{ position: props.mode === 'center' ? 'center' : 'left', buttons: props.actions, columned: false }"
+          (onClick)="clickHandler($event)"
+        ></val-button-group>
+      </div>
+    </val-box>
+  `, styles: [".content-container{display:flex;justify-content:space-between}.content-container.center{flex-direction:column}.content-container.column{flex-direction:row}.content-container.row,.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 ToolbarComponent {
+    constructor(navCtrl) {
+        this.navCtrl = navCtrl;
+        this.onClick = new EventEmitter();
+        this.actionTypes = ToolbarActionType;
+    }
+    ngOnInit() { }
+    goBack() {
+        this.navCtrl.back();
+    }
+    rightActions() {
+        return this.props.actions.filter(x => x.position === 'right');
+    }
+    leftActions() {
+        return this.props.actions.filter(x => x.position === 'left');
+    }
+    someInRight() {
+        return !!this.props.actions.find(x => x.position === 'right');
+    }
+    someInLeft() {
+        return !!this.props.actions.find(x => x.position === 'left');
+    }
+    clickHandler(token) {
+        this.onClick.emit(token);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: ToolbarComponent, deps: [{ token: i1$3.NavController }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: ToolbarComponent, isStandalone: true, selector: "val-toolbar", inputs: { props: "props" }, outputs: { onClick: "onClick" }, ngImport: i0, template: `
+    <ion-toolbar [color]="props.color" [class.background]="props.color === 'background'">
+      <ng-container *ngIf="props.withBack">
+        <ion-buttons class="left-buttons" slot="start" *ngIf="props.withBack">
+          <ion-button fill="clear" (click)="goBack()" [color]="props.textColor">
+            <ion-icon name="chevron-back-outline" [slot]="props.backText ? 'start' : 'icon-only'"></ion-icon>
+            <ion-text *ngIf="props.backText">{{ props.backText }}</ion-text>
+          </ion-button>
+        </ion-buttons>
+      </ng-container>
+      <ng-container *ngIf="props.withActions">
+        <ion-buttons slot="end" *ngIf="someInRight()">
+          <ng-container *ngFor="let action of rightActions()">
+            <ion-button *ngIf="action.type === actionTypes.ICON" (click)="clickHandler(action.token)">
+              <ion-icon slot="icon-only" [name]="action.description" color="dark"></ion-icon>
+            </ion-button>
+            <val-avatar
+              *ngIf="action.type === actionTypes.AVATAR"
+              [props]="{ size: 'small', image: action.description, default: '' }"
+              (onClick)="clickHandler(action.token)"
+            ></val-avatar>
+            <val-image
+              *ngIf="action.type === actionTypes.IMAGE"
+              [props]="action.image"
+              (click)="clickHandler(action.token)"
+            ></val-image>
+            <ion-button *ngIf="action.type === actionTypes.BUTTON" (click)="clickHandler(action.token)">{{
+              action.description
+            }}</ion-button>
+          </ng-container>
+        </ion-buttons>
+        <ion-buttons slot="start" *ngIf="someInLeft()">
+          <ng-container *ngFor="let action of leftActions()">
+            <ion-button *ngIf="action.type === actionTypes.ICON" (click)="clickHandler(action.token)">
+              <ion-icon slot="icon-only" [name]="action.description" color="dark"></ion-icon>
+            </ion-button>
+            <val-avatar
+              *ngIf="action.type === actionTypes.AVATAR"
+              [props]="{ size: 'small', image: action.description, default: '' }"
+              (onClick)="clickHandler(action.token)"
+            ></val-avatar>
+            <val-image
+              *ngIf="action.type === actionTypes.IMAGE"
+              [props]="action.image"
+              (click)="clickHandler(action.token)"
+            ></val-image>
+            <ion-button *ngIf="action.type === actionTypes.BUTTON" (click)="clickHandler(action.token)">{{
+              action.description
+            }}</ion-button>
+          </ng-container>
+        </ion-buttons>
+      </ng-container>
+      <ion-title *ngIf="props.title" [color]="props.textColor">{{ props.title }}</ion-title>
+      <!-- experimental -->
+      <ng-content select="[toolbar-bottom]"></ng-content>
+    </ion-toolbar>
+  `, isInline: true, styles: ["ion-button{font-family:var(--ion-default-font),Arial,sans-serif}.left-buttons{margin-left:-1rem}.background{background:var(--ion-background-color)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: IonToolbar, selector: "ion-toolbar", inputs: ["color", "mode"] }, { kind: "component", type: IonButtons, selector: "ion-buttons", inputs: ["collapse"] }, { kind: "component", type: IonButton, selector: "ion-button", inputs: ["buttonType", "color", "disabled", "download", "expand", "fill", "form", "href", "mode", "rel", "routerAnimation", "routerDirection", "shape", "size", "strong", "target", "type"] }, { kind: "component", type: IonIcon, selector: "ion-icon", inputs: ["color", "flipRtl", "icon", "ios", "lazy", "md", "mode", "name", "sanitize", "size", "src"] }, { kind: "component", type: IonText, selector: "ion-text", inputs: ["color", "mode"] }, { kind: "component", type: IonTitle, selector: "ion-title", inputs: ["color", "size"] }, { kind: "component", type: AvatarComponent, selector: "val-avatar", inputs: ["props"], outputs: ["onClick"] }, { kind: "component", type: ImageComponent, selector: "val-image", inputs: ["props"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: ToolbarComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'val-toolbar', standalone: true, imports: [
+                        CommonModule,
+                        IonToolbar,
+                        IonButtons,
+                        IonButton,
+                        IonIcon,
+                        IonText,
+                        IonTitle,
+                        AvatarComponent,
+                        ImageComponent,
+                    ], template: `
+    <ion-toolbar [color]="props.color" [class.background]="props.color === 'background'">
+      <ng-container *ngIf="props.withBack">
+        <ion-buttons class="left-buttons" slot="start" *ngIf="props.withBack">
+          <ion-button fill="clear" (click)="goBack()" [color]="props.textColor">
+            <ion-icon name="chevron-back-outline" [slot]="props.backText ? 'start' : 'icon-only'"></ion-icon>
+            <ion-text *ngIf="props.backText">{{ props.backText }}</ion-text>
+          </ion-button>
+        </ion-buttons>
+      </ng-container>
+      <ng-container *ngIf="props.withActions">
+        <ion-buttons slot="end" *ngIf="someInRight()">
+          <ng-container *ngFor="let action of rightActions()">
+            <ion-button *ngIf="action.type === actionTypes.ICON" (click)="clickHandler(action.token)">
+              <ion-icon slot="icon-only" [name]="action.description" color="dark"></ion-icon>
+            </ion-button>
+            <val-avatar
+              *ngIf="action.type === actionTypes.AVATAR"
+              [props]="{ size: 'small', image: action.description, default: '' }"
+              (onClick)="clickHandler(action.token)"
+            ></val-avatar>
+            <val-image
+              *ngIf="action.type === actionTypes.IMAGE"
+              [props]="action.image"
+              (click)="clickHandler(action.token)"
+            ></val-image>
+            <ion-button *ngIf="action.type === actionTypes.BUTTON" (click)="clickHandler(action.token)">{{
+              action.description
+            }}</ion-button>
+          </ng-container>
+        </ion-buttons>
+        <ion-buttons slot="start" *ngIf="someInLeft()">
+          <ng-container *ngFor="let action of leftActions()">
+            <ion-button *ngIf="action.type === actionTypes.ICON" (click)="clickHandler(action.token)">
+              <ion-icon slot="icon-only" [name]="action.description" color="dark"></ion-icon>
+            </ion-button>
+            <val-avatar
+              *ngIf="action.type === actionTypes.AVATAR"
+              [props]="{ size: 'small', image: action.description, default: '' }"
+              (onClick)="clickHandler(action.token)"
+            ></val-avatar>
+            <val-image
+              *ngIf="action.type === actionTypes.IMAGE"
+              [props]="action.image"
+              (click)="clickHandler(action.token)"
+            ></val-image>
+            <ion-button *ngIf="action.type === actionTypes.BUTTON" (click)="clickHandler(action.token)">{{
+              action.description
+            }}</ion-button>
+          </ng-container>
+        </ion-buttons>
+      </ng-container>
+      <ion-title *ngIf="props.title" [color]="props.textColor">{{ props.title }}</ion-title>
+      <!-- experimental -->
+      <ng-content select="[toolbar-bottom]"></ng-content>
+    </ion-toolbar>
+  `, styles: ["ion-button{font-family:var(--ion-default-font),Arial,sans-serif}.left-buttons{margin-left:-1rem}.background{background:var(--ion-background-color)}\n"] }]
+        }], ctorParameters: () => [{ type: i1$3.NavController }], propDecorators: { props: [{
+                type: Input
+            }], onClick: [{
+                type: Output
+            }] } });
+
+class FooterComponent {
+    constructor() {
+        this.onClick = new EventEmitter();
+    }
+    ngOnInit() { }
+    clickHandler(token) {
+        this.onClick.emit(token);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: FooterComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: FooterComponent, isStandalone: true, selector: "val-footer", inputs: { props: "props" }, outputs: { onClick: "onClick" }, ngImport: i0, template: `
+    <ion-footer
+      [class.ion-no-border]="!props.bordered"
+      [translucent]="props.translucent"
+      [class.background]="props.toolbar.color === 'background'"
+    >
+      <val-toolbar
+        *ngIf="props.toolbar.title || props.toolbar.withActions || props.toolbar.withBack"
+        [props]="props.toolbar"
+        (onClick)="clickHandler($event)"
+      ></val-toolbar>
+      <ng-content select="[extra]"></ng-content>
+    </ion-footer>
+  `, isInline: true, styles: [".background{background:var(--ion-background-color)}\n"], dependencies: [{ kind: "component", type: IonFooter, selector: "ion-footer", inputs: ["collapse", "mode", "translucent"] }, { kind: "component", type: ToolbarComponent, selector: "val-toolbar", inputs: ["props"], outputs: ["onClick"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: FooterComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'val-footer', standalone: true, imports: [IonFooter, ToolbarComponent], template: `
+    <ion-footer
+      [class.ion-no-border]="!props.bordered"
+      [translucent]="props.translucent"
+      [class.background]="props.toolbar.color === 'background'"
+    >
+      <val-toolbar
+        *ngIf="props.toolbar.title || props.toolbar.withActions || props.toolbar.withBack"
+        [props]="props.toolbar"
+        (onClick)="clickHandler($event)"
+      ></val-toolbar>
+      <ng-content select="[extra]"></ng-content>
+    </ion-footer>
+  `, styles: [".background{background:var(--ion-background-color)}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { props: [{
+                type: Input
+            }], onClick: [{
+                type: Output
+            }] } });
+
+const maxLength = (field, max) => {
+    return {
+        validator: Validators.maxLength(max),
+        error: `El campo ${field} no debe superar los ${max} caracteres.`,
+    };
+};
+
+class FormFooterComponent {
+    constructor() {
+        this.onSubmit = new EventEmitter();
+    }
+    ngOnInit() { }
+    async submitHandler(token) {
+        this.onSubmit.emit({ fields: this.form.value, token });
+    }
+    get actions() {
+        if (!this.form) {
+            return [];
+        }
+        if (this.form.valid) {
+            this.action.state = ComponentStates.ENABLED;
+        }
+        return [this.action];
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: FormFooterComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: FormFooterComponent, isStandalone: true, selector: "val-form-footer", inputs: { form: "form", action: "action" }, outputs: { onSubmit: "onSubmit" }, ngImport: i0, template: `
+    <val-footer
+      [props]="{
+        bordered: false,
+        translucent: false,
+        toolbar: {
+          title: '',
+          actions: [],
+          color: 'background',
+          withBack: false,
+          withActions: false,
+        },
+      }"
+    >
+      <val-button-group
+        extra
+        [props]="{ buttons: actions, position: 'center', columned: false }"
+        (onClick)="submitHandler($event)"
+      ></val-button-group>
+    </val-footer>
+  `, isInline: true, styles: [""], dependencies: [{ kind: "component", type: FooterComponent, selector: "val-footer", inputs: ["props"], outputs: ["onClick"] }, { kind: "component", type: ButtonGroupComponent, selector: "val-button-group", inputs: ["props"], outputs: ["onClick"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: FormFooterComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'val-form-footer', standalone: true, imports: [FooterComponent, ButtonGroupComponent], template: `
+    <val-footer
+      [props]="{
+        bordered: false,
+        translucent: false,
+        toolbar: {
+          title: '',
+          actions: [],
+          color: 'background',
+          withBack: false,
+          withActions: false,
+        },
+      }"
+    >
+      <val-button-group
+        extra
+        [props]="{ buttons: actions, position: 'center', columned: false }"
+        (onClick)="submitHandler($event)"
+      ></val-button-group>
+    </val-footer>
+  ` }]
+        }], ctorParameters: () => [], propDecorators: { form: [{
+                type: Input
+            }], action: [{
+                type: Input
+            }], onSubmit: [{
+                type: Output
+            }] } });
+
+const goToTop = (id) => {
+    const element = document.getElementById(id);
+    if (element) {
+        element.scrollIntoView({
+            block: 'start',
+            inline: 'nearest',
+            behavior: 'smooth',
+        });
+    }
+};
+const isAtEnd = (elementRef) => {
+    const formElement = elementRef.nativeElement;
+    const rect = formElement.getBoundingClientRect();
+    const windowHeight = window.innerHeight;
+    return rect.bottom <= windowHeight;
+};
+
+class FormComponent {
+    constructor(fb, elementRef) {
+        this.fb = fb;
+        this.elementRef = elementRef;
+        this.onSubmit = new EventEmitter();
+        this.onInvalid = new EventEmitter();
+        this.types = InputType;
+    }
+    ngOnInit() {
+        const formControls = {};
+        this.props.sections.forEach(section => {
+            section.fields.forEach(field => {
+                formControls[field.name] = [undefined, field.validators || []];
+            });
+        });
+        this.form = this.fb.group(formControls);
+    }
+    async submitHandler(token) {
+        this.onSubmit.emit({ fields: this.form.value, token });
+    }
+    getControl(field) {
+        return this.Form.get(field);
+    }
+    getFieldProp(field) {
+        return {
+            ...field,
+            control: this.getControl(field.name),
+        };
+    }
+    get isAtEndOfForm() {
+        return isAtEnd(this.elementRef);
+    }
+    get Form() {
+        return this.form;
+    }
+    get actions() {
+        if (!this.form) {
+            return [];
+        }
+        if (this.form.valid) {
+            this.props.actions.state = ComponentStates.ENABLED;
+        }
+        if (this.props.state === ComponentStates.WORKING) {
+            this.props.actions.state = ComponentStates.WORKING;
+        }
+        if (this.props.state === ComponentStates.ENABLED) {
+            this.props.actions.state = ComponentStates.ENABLED;
+        }
+        if (this.props.state === ComponentStates.DISABLED) {
+            this.props.actions.state = ComponentStates.DISABLED;
+        }
+        return [this.props.actions];
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: FormComponent, deps: [{ token: i1$1.FormBuilder }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: FormComponent, isStandalone: true, selector: "val-form", inputs: { props: "props" }, outputs: { onSubmit: "onSubmit", onInvalid: "onInvalid" }, ngImport: i0, template: `
+    <div class="container">
+      <form [formGroup]="form">
+        <val-display
+          [props]="{
+            content: props.name,
+            color: 'dark',
+            size: 'large',
+          }"
+        ></val-display>
+        <div class="section" *ngFor="let s of props.sections">
+          <val-title [props]="{ content: s.name, size: 'large', color: '', bold: false }"></val-title>
+          <div class="input" *ngFor="let f of s.fields">
+            <val-title [props]="{ content: f.label, size: 'small', color: 'dark', bold: false }"></val-title>
+            <ng-container *ngIf="f.type === types.TEXT">
+              <val-text-input [props]="getFieldProp(f)"></val-text-input>
+            </ng-container>
+            <ng-container *ngIf="f.type === types.CHECK">
+              <val-check-input></val-check-input>
+            </ng-container>
+            <ng-container *ngIf="f.type === types.COMMENT">
+              <val-comment-input [props]="getFieldProp(f)"></val-comment-input>
+            </ng-container>
+            <ng-container *ngIf="f.type === types.DATE">
+              <val-date-input [props]="getFieldProp(f)"></val-date-input>
+            </ng-container>
+            <ng-container *ngIf="f.type === types.EMAIL">
+              <val-email-input [props]="getFieldProp(f)"></val-email-input>
+            </ng-container>
+            <ng-container *ngIf="f.type === types.FILE">
+              <val-file-input [props]="getFieldProp(f)"></val-file-input>
+            </ng-container>
+            <ng-container *ngIf="f.type === types.HOUR">
+              <val-hour-input [props]="getFieldProp(f)"></val-hour-input>
+            </ng-container>
+            <ng-container *ngIf="f.type === types.NUMBER">
+              <val-number-input [props]="getFieldProp(f)"></val-number-input>
+            </ng-container>
+            <ng-container *ngIf="f.type === types.PASSWORD">
+              <val-password-input [props]="getFieldProp(f)"></val-password-input>
+            </ng-container>
+            <ng-container *ngIf="f.type === types.PIN_CODE">
+              <val-pin-input [props]="getFieldProp(f)"></val-pin-input>
+            </ng-container>
+            <ng-container *ngIf="f.type === types.RADIO">
+              <val-radio-input [props]="getFieldProp(f)"></val-radio-input>
+            </ng-container>
+            <ng-container *ngIf="f.type === types.SELECT">
+              <!-- <val-select-input></val-select-input> -->
+            </ng-container>
+            <val-hint [props]="getFieldProp(f)"></val-hint>
+          </div>
+          <val-divider [props]="{ fill: 'solid', size: 'medium', color: 'medium' }"></val-divider>
+        </div>
+        <val-button-group
+          [props]="{ buttons: actions, position: 'center', columned: false }"
+          (onClick)="submitHandler($event)"
+        ></val-button-group>
+      </form>
+    </div>
+  `, isInline: true, styles: [".section{margin-top:1rem}.input{margin:.5rem 0}@media (min-width: 768px){.input{margin:.75rem 0}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "component", type: DisplayComponent, selector: "val-display", inputs: ["props"] }, { kind: "component", type: TitleComponent, selector: "val-title", inputs: ["props"] }, { kind: "component", type: TextInputComponent, selector: "val-text-input", inputs: ["props"] }, { kind: "component", type: CheckInputComponent, selector: "val-check-input" }, { kind: "component", type: ButtonGroupComponent, selector: "val-button-group", inputs: ["props"], outputs: ["onClick"] }, { kind: "component", type: DividerComponent, selector: "val-divider", inputs: ["props"] }, { kind: "component", type: HintComponent, selector: "val-hint", inputs: ["props"] }, { kind: "component", type: CommentInputComponent, selector: "val-comment-input", inputs: ["props"] }, { kind: "component", type: DateInputComponent, selector: "val-date-input", inputs: ["props"] }, { kind: "component", type: FileInputComponent, selector: "val-file-input", inputs: ["props"] }, { kind: "component", type: HourInputComponent, selector: "val-hour-input", inputs: ["props"] }, { kind: "component", type: EmailInputComponent, selector: "val-email-input", inputs: ["props"] }, { kind: "component", type: NumberInputComponent, selector: "val-number-input", inputs: ["props"] }, { kind: "component", type: RadioInputComponent, selector: "val-radio-input", inputs: ["props"] }, { kind: "component", type: PasswordInputComponent, selector: "val-password-input", inputs: ["props"] }, { kind: "component", type: PinInputComponent, selector: "val-pin-input", inputs: ["props"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: FormComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'val-form', standalone: true, imports: [
+                        CommonModule,
+                        ReactiveFormsModule,
+                        DisplayComponent,
+                        TitleComponent,
+                        TextInputComponent,
+                        CheckInputComponent,
+                        ButtonGroupComponent,
+                        DividerComponent,
+                        HintComponent,
+                        CommentInputComponent,
+                        DateInputComponent,
+                        FileInputComponent,
+                        HourInputComponent,
+                        EmailInputComponent,
+                        NumberInputComponent,
+                        RadioInputComponent,
+                        PasswordInputComponent,
+                        PinInputComponent,
+                    ], template: `
+    <div class="container">
+      <form [formGroup]="form">
+        <val-display
+          [props]="{
+            content: props.name,
+            color: 'dark',
+            size: 'large',
+          }"
+        ></val-display>
+        <div class="section" *ngFor="let s of props.sections">
+          <val-title [props]="{ content: s.name, size: 'large', color: '', bold: false }"></val-title>
+          <div class="input" *ngFor="let f of s.fields">
+            <val-title [props]="{ content: f.label, size: 'small', color: 'dark', bold: false }"></val-title>
+            <ng-container *ngIf="f.type === types.TEXT">
+              <val-text-input [props]="getFieldProp(f)"></val-text-input>
+            </ng-container>
+            <ng-container *ngIf="f.type === types.CHECK">
+              <val-check-input></val-check-input>
+            </ng-container>
+            <ng-container *ngIf="f.type === types.COMMENT">
+              <val-comment-input [props]="getFieldProp(f)"></val-comment-input>
+            </ng-container>
+            <ng-container *ngIf="f.type === types.DATE">
+              <val-date-input [props]="getFieldProp(f)"></val-date-input>
+            </ng-container>
+            <ng-container *ngIf="f.type === types.EMAIL">
+              <val-email-input [props]="getFieldProp(f)"></val-email-input>
+            </ng-container>
+            <ng-container *ngIf="f.type === types.FILE">
+              <val-file-input [props]="getFieldProp(f)"></val-file-input>
+            </ng-container>
+            <ng-container *ngIf="f.type === types.HOUR">
+              <val-hour-input [props]="getFieldProp(f)"></val-hour-input>
+            </ng-container>
+            <ng-container *ngIf="f.type === types.NUMBER">
+              <val-number-input [props]="getFieldProp(f)"></val-number-input>
+            </ng-container>
+            <ng-container *ngIf="f.type === types.PASSWORD">
+              <val-password-input [props]="getFieldProp(f)"></val-password-input>
+            </ng-container>
+            <ng-container *ngIf="f.type === types.PIN_CODE">
+              <val-pin-input [props]="getFieldProp(f)"></val-pin-input>
+            </ng-container>
+            <ng-container *ngIf="f.type === types.RADIO">
+              <val-radio-input [props]="getFieldProp(f)"></val-radio-input>
+            </ng-container>
+            <ng-container *ngIf="f.type === types.SELECT">
+              <!-- <val-select-input></val-select-input> -->
+            </ng-container>
+            <val-hint [props]="getFieldProp(f)"></val-hint>
+          </div>
+          <val-divider [props]="{ fill: 'solid', size: 'medium', color: 'medium' }"></val-divider>
+        </div>
+        <val-button-group
+          [props]="{ buttons: actions, position: 'center', columned: false }"
+          (onClick)="submitHandler($event)"
+        ></val-button-group>
+      </form>
+    </div>
+  `, styles: [".section{margin-top:1rem}.input{margin:.5rem 0}@media (min-width: 768px){.input{margin:.75rem 0}}\n"] }]
+        }], ctorParameters: () => [{ type: i1$1.FormBuilder }, { type: i0.ElementRef }], propDecorators: { props: [{
+                type: Input
+            }], onSubmit: [{
+                type: Output
+            }], onInvalid: [{
+                type: Output
+            }] } });
+
+class HeaderComponent {
+    constructor() {
+        this.onClick = new EventEmitter();
+    }
+    ngOnInit() { }
+    clickHandler(token) {
+        this.onClick.emit(token);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: HeaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: HeaderComponent, isStandalone: true, selector: "val-header", inputs: { props: "props" }, outputs: { onClick: "onClick" }, ngImport: i0, template: `
+    <ion-header [class.ion-no-border]="!props.bordered" [translucent]="props.translucent">
+      <val-toolbar [props]="props.toolbar" (onClick)="clickHandler($event)"></val-toolbar>
+    </ion-header>
+  `, isInline: true, styles: [""], dependencies: [{ kind: "component", type: IonHeader, selector: "ion-header", inputs: ["collapse", "mode", "translucent"] }, { kind: "component", type: ToolbarComponent, selector: "val-toolbar", inputs: ["props"], outputs: ["onClick"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: HeaderComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'val-header', standalone: true, imports: [NgClass, IonHeader, ToolbarComponent], template: `
+    <ion-header [class.ion-no-border]="!props.bordered" [translucent]="props.translucent">
+      <val-toolbar [props]="props.toolbar" (onClick)="clickHandler($event)"></val-toolbar>
+    </ion-header>
+  ` }]
+        }], ctorParameters: () => [], propDecorators: { props: [{
+                type: Input
+            }], onClick: [{
+                type: Output
+            }] } });
+
+class NoContentComponent {
+    constructor() {
+        this.onClick = new EventEmitter();
+    }
+    ngOnInit() { }
+    onClickHandler(token) {
+        this.onClick.emit(token);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: NoContentComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: NoContentComponent, isStandalone: true, selector: "val-no-content", inputs: { props: "props" }, outputs: { onClick: "onClick" }, ngImport: i0, template: `
+    <val-image class="image-container" [props]="props.image"></val-image>
+    <div>
+      <val-banner [props]="props.content" (onClick)="onClickHandler($event)"></val-banner>
+    </div>
+  `, isInline: true, styles: [".image-container{display:flex;justify-content:center;margin-bottom:1rem}val-image .image{margin:0 auto}\n"], dependencies: [{ kind: "component", type: ImageComponent, selector: "val-image", inputs: ["props"] }, { kind: "component", type: BannerComponent, selector: "val-banner", inputs: ["props"], outputs: ["onClick", "onClose"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: NoContentComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'val-no-content', standalone: true, imports: [ImageComponent, BannerComponent], template: `
+    <val-image class="image-container" [props]="props.image"></val-image>
+    <div>
+      <val-banner [props]="props.content" (onClick)="onClickHandler($event)"></val-banner>
+    </div>
+  `, styles: [".image-container{display:flex;justify-content:center;margin-bottom:1rem}val-image .image{margin:0 auto}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { props: [{
+                type: Input
+            }], onClick: [{
+                type: Output
+            }] } });
+
+var MOTION;
+(function (MOTION) {
+    MOTION[MOTION["BACKWARD"] = 0] = "BACKWARD";
+    MOTION[MOTION["FORWARD"] = 1] = "FORWARD";
+    MOTION[MOTION["RETRY"] = 2] = "RETRY";
+})(MOTION || (MOTION = {}));
+
+class WizardFooterComponent {
+    constructor() {
+        this.onClick = new EventEmitter();
+        this.wrapperId = 'wizard-wrapper';
+    }
+    ngOnInit() { }
+    clickHandler(token) {
+        if (!token) {
+            return;
+        }
+        if (token.includes('right')) {
+            this.tryToStep(MOTION.FORWARD);
+        }
+        if (token.includes('left')) {
+            this.tryToStep(MOTION.BACKWARD);
+        }
+    }
+    get Current() {
+        return this.props.steps[this.props.current];
+    }
+    get Progress() {
+        if (this.props.steps && this.props.current) {
+            return this.props.current / Object.keys(this.props.steps).length;
+        }
+        return 0;
+    }
+    get actions() {
+        if (this.props.state === ComponentStates.ERROR && this.Current.buttons.length > 1) {
+            this.Current.buttons[1].state = ComponentStates.DISABLED;
+        }
+        if (this.props.current === 1 && this.Current.buttons.length > 1) {
+            return [this.Current.buttons[1]];
+        }
+        return this.Current.buttons;
+    }
+    tryToStep(motion) {
+        this.onClick.emit({ current: this.props.current, motion });
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: WizardFooterComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: WizardFooterComponent, isStandalone: true, selector: "val-wizard-footer", inputs: { props: "props" }, outputs: { onClick: "onClick" }, ngImport: i0, template: `
+    <val-footer
+      [props]="{
+        bordered: false,
+        translucent: false,
+        toolbar: {
+          title: '',
+          actions: [],
+          color: 'background',
+          withBack: false,
+          withActions: false,
+        },
+      }"
+    >
+      <val-progress-bar
+        extra
+        [props]="{ progress: Progress, color: '', type: 'determinate', buffer: 1, size: 'small', rounded: false }"
+      ></val-progress-bar>
+      <val-button-group
+        extra
+        [props]="{ buttons: actions, position: 'left', columned: false }"
+        position="spaced"
+        (onClick)="clickHandler($event)"
+      ></val-button-group>
+    </val-footer>
+  `, isInline: true, styles: [""], dependencies: [{ kind: "component", type: FooterComponent, selector: "val-footer", inputs: ["props"], outputs: ["onClick"] }, { kind: "component", type: ProgressBarComponent, selector: "val-progress-bar", inputs: ["props"] }, { kind: "component", type: ButtonGroupComponent, selector: "val-button-group", inputs: ["props"], outputs: ["onClick"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: WizardFooterComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'val-wizard-footer', standalone: true, imports: [FooterComponent, ProgressBarComponent, ButtonGroupComponent], template: `
+    <val-footer
+      [props]="{
+        bordered: false,
+        translucent: false,
+        toolbar: {
+          title: '',
+          actions: [],
+          color: 'background',
+          withBack: false,
+          withActions: false,
+        },
+      }"
+    >
+      <val-progress-bar
+        extra
+        [props]="{ progress: Progress, color: '', type: 'determinate', buffer: 1, size: 'small', rounded: false }"
+      ></val-progress-bar>
+      <val-button-group
+        extra
+        [props]="{ buttons: actions, position: 'left', columned: false }"
+        position="spaced"
+        (onClick)="clickHandler($event)"
+      ></val-button-group>
+    </val-footer>
+  ` }]
+        }], ctorParameters: () => [], propDecorators: { props: [{
+                type: Input
+            }], onClick: [{
+                type: Output
+            }] } });
+
+class WizardComponent {
+    constructor() {
+        this.onClick = new EventEmitter();
+        this.wrapperId = 'wizard-wrapper';
+    }
+    ngOnInit() { }
+    working() {
+        this.props.state = ComponentStates.WORKING;
+        this.Current.buttons.map(x => {
+            x.state = ComponentStates.DISABLED;
+        });
+    }
+    done() {
+        if (this.props.state === ComponentStates.ENABLED) {
+            return;
+        }
+        this.props.state = ComponentStates.ENABLED;
+        this.Current.buttons.map(x => {
+            x.state = ComponentStates.ENABLED;
+        });
+    }
+    get Current() {
+        return this.props.steps[this.props.current];
+    }
+    setCurrent(newStep) {
+        if (newStep === this.props.current) {
+            return;
+        }
+        this.props.current = newStep;
+        goToTop(this.wrapperId);
+    }
+    setError(error) {
+        if (this.props.state === ComponentStates.ERROR) {
+            return;
+        }
+        this.props.error.titles.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.12", ngImport: i0, type: WizardComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: WizardComponent, isStandalone: true, selector: "val-wizard", inputs: { props: "props" }, outputs: { onClick: "onClick" }, ngImport: i0, template: `
+    <div [id]="wrapperId" class="wrapper">
+      <ng-container *ngIf="props.state !== 'ERROR'">
+        <val-no-content [props]="Current.titles"></val-no-content>
+        <div class="step">
+          <div *ngIf="props.state === 'WORKING'">
+            <val-content-loader color="dark" size="large" text="Por favor espere..."></val-content-loader>
+          </div>
+          <ng-content select="[step]"></ng-content>
+        </div>
+      </ng-container>
+      <ng-container *ngIf="props.state === 'ERROR'">
+        <val-no-content [props]="props.error.titles" (onClick)="clickHandler($event)"></val-no-content>
+      </ng-container>
+    </div>
+  `, isInline: true, styles: [".wrapper{height:auto;display:flex;flex-direction:column;justify-content:space-between;position:relative}.step{min-height:9.375rem;margin:16px 0;text-align:center}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: NoContentComponent, selector: "val-no-content", inputs: ["props"], outputs: ["onClick"] }, { kind: "component", type: ContentLoaderComponent, selector: "val-content-loader", inputs: ["props"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: WizardComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'val-wizard', standalone: true, imports: [CommonModule, NoContentComponent, ContentLoaderComponent], template: `
+    <div [id]="wrapperId" class="wrapper">
+      <ng-container *ngIf="props.state !== 'ERROR'">
+        <val-no-content [props]="Current.titles"></val-no-content>
+        <div class="step">
+          <div *ngIf="props.state === 'WORKING'">
+            <val-content-loader color="dark" size="large" text="Por favor espere..."></val-content-loader>
+          </div>
+          <ng-content select="[step]"></ng-content>
+        </div>
+      </ng-container>
+      <ng-container *ngIf="props.state === 'ERROR'">
+        <val-no-content [props]="props.error.titles" (onClick)="clickHandler($event)"></val-no-content>
+      </ng-container>
+    </div>
+  `, styles: [".wrapper{height:auto;display:flex;flex-direction:column;justify-content:space-between;position:relative}.step{min-height:9.375rem;margin:16px 0;text-align:center}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { props: [{
+                type: Input
+            }], onClick: [{
+                type: Output
+            }] } });
+
+class LayoutComponent {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: LayoutComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: LayoutComponent, isStandalone: true, selector: "val-layout", ngImport: i0, template: `
+    <div class="layout-container">
+      <ng-content></ng-content>
+    </div>
+  `, isInline: true, styles: [".layout-container{margin:0 auto;padding:0 1rem;width:100%;box-sizing:border-box;margin-bottom:1rem}@media (max-width: 768px){.layout-container{max-width:100%}}@media (min-width: 768px){.layout-container{max-width:60rem;margin-bottom:1.5rem}}@media (min-width: 1200px){.layout-container{max-width:75rem}}\n"] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: LayoutComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'val-layout', standalone: true, imports: [], template: `
+    <div class="layout-container">
+      <ng-content></ng-content>
+    </div>
+  `, styles: [".layout-container{margin:0 auto;padding:0 1rem;width:100%;box-sizing:border-box;margin-bottom:1rem}@media (max-width: 768px){.layout-container{max-width:100%}}@media (min-width: 768px){.layout-container{max-width:60rem;margin-bottom:1.5rem}}@media (min-width: 1200px){.layout-container{max-width:75rem}}\n"] }]
+        }] });
+
+class SimpleComponent {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: SimpleComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: SimpleComponent, isStandalone: true, selector: "val-simple", inputs: { props: "props" }, ngImport: i0, template: `
+    <val-header [props]="props.header" />
+
+    <ion-content [fullscreen]="true">
+      <ion-header collapse="condense">
+        <ion-toolbar>
+          <ion-title size="large">{{ props.pageTitle }}</ion-title>
+        </ion-toolbar>
+      </ion-header>
+      <div *ngIf="props.pageDescription">
+        <ion-text>{{ props.pageDescription }}</ion-text>
+      </div>
+      <val-divider *ngIf="props.withDivider" [props]="{ fill: 'solid', size: 'medium', color: 'dark' }" />
+      <val-layout>
+        <ng-content></ng-content>
+      </val-layout>
+    </ion-content>
+  `, isInline: true, styles: [".layout-container{margin:0 auto;padding:0 1rem;width:100%;box-sizing:border-box;margin-bottom:1rem}@media (max-width: 768px){.layout-container{max-width:100%}}@media (min-width: 768px){.layout-container{max-width:60rem;margin-bottom:1.5rem}}@media (min-width: 1200px){.layout-container{max-width:75rem}}\n"], dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: IonHeader, selector: "ion-header", inputs: ["collapse", "mode", "translucent"] }, { kind: "component", type: IonToolbar, selector: "ion-toolbar", inputs: ["color", "mode"] }, { kind: "component", type: IonTitle, selector: "ion-title", inputs: ["color", "size"] }, { kind: "component", type: IonText, selector: "ion-text", inputs: ["color", "mode"] }, { kind: "component", type: IonContent, selector: "ion-content", inputs: ["color", "forceOverscroll", "fullscreen", "scrollEvents", "scrollX", "scrollY"] }, { kind: "component", type: HeaderComponent, selector: "val-header", inputs: ["props"], outputs: ["onClick"] }, { kind: "component", type: LayoutComponent, selector: "val-layout" }, { kind: "component", type: DividerComponent, selector: "val-divider", inputs: ["props"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: SimpleComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'val-simple', standalone: true, imports: [
+                        NgIf,
+                        IonHeader,
+                        IonToolbar,
+                        IonTitle,
+                        IonText,
+                        IonContent,
+                        ButtonComponent,
+                        HeaderComponent,
+                        LayoutComponent,
+                        DividerComponent,
+                    ], template: `
+    <val-header [props]="props.header" />
+
+    <ion-content [fullscreen]="true">
+      <ion-header collapse="condense">
+        <ion-toolbar>
+          <ion-title size="large">{{ props.pageTitle }}</ion-title>
+        </ion-toolbar>
+      </ion-header>
+      <div *ngIf="props.pageDescription">
+        <ion-text>{{ props.pageDescription }}</ion-text>
+      </div>
+      <val-divider *ngIf="props.withDivider" [props]="{ fill: 'solid', size: 'medium', color: 'dark' }" />
+      <val-layout>
+        <ng-content></ng-content>
+      </val-layout>
+    </ion-content>
+  `, styles: [".layout-container{margin:0 auto;padding:0 1rem;width:100%;box-sizing:border-box;margin-bottom:1rem}@media (max-width: 768px){.layout-container{max-width:100%}}@media (min-width: 768px){.layout-container{max-width:60rem;margin-bottom:1.5rem}}@media (min-width: 1200px){.layout-container{max-width:75rem}}\n"] }]
+        }], propDecorators: { props: [{
+                type: Input
+            }] } });
+
+class TextContent {
+    constructor(text) {
+        this.text = text;
+    }
+    get Content() {
+        return this.text;
+    }
+}
+var LangOption;
+(function (LangOption) {
+    LangOption["ES"] = "es";
+    LangOption["EN"] = "en";
+})(LangOption || (LangOption = {}));
+
+class LocalStorageService {
+    static set(reference, value) {
+        localStorage.setItem(reference, JSON.stringify(value));
+    }
+    static get(reference) {
+        const value = localStorage.getItem(reference);
+        return JSON.parse(value);
+    }
+    static remove(reference) {
+        localStorage.removeItem(reference);
+    }
+    static clear() {
+        localStorage.clear();
+    }
+}
+
+const LANG = 'LANG';
+const THEME = 'THEME';
+
+const ValtechConfigService = new InjectionToken('ValtechConfig');
+
+class LangService {
+    constructor(config) {
+        this.default = LangOption.ES;
+        console.log('injected config: ', config);
+        this.content = config.content;
+        this.config = config;
+        const current = LocalStorageService.get(LANG);
+        this.selectedLang = new BehaviorSubject(current || this.default);
+    }
+    Text(className) {
+        return this.content[className].Content[this.selectedLang.value];
+    }
+    get Lang() {
+        return this.selectedLang.value;
+    }
+    set Lang(lang) {
+        this.selectedLang.next(lang);
+        LocalStorageService.set(LANG, lang);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: LangService, deps: [{ token: ValtechConfigService }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: LangService, providedIn: 'root' }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: LangService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root',
+                }]
+        }], ctorParameters: () => [{ type: undefined, decorators: [{
+                    type: Inject,
+                    args: [ValtechConfigService]
+                }] }] });
+
+var ThemeOption;
+(function (ThemeOption) {
+    ThemeOption["LIGHT"] = "light";
+    ThemeOption["DARK"] = "dark";
+    ThemeOption["AUTO"] = "auto";
+})(ThemeOption || (ThemeOption = {}));
+class ThemeService {
+    constructor() {
+        this.lightToggle = false;
+        this.darkToggle = false;
+        this.autoToggle = false;
+        this.currentOption = ThemeOption.AUTO;
+        this.themeOptions = ThemeOption;
+        this.prefersDark = false;
+        this.default = ThemeOption.AUTO;
+        const current = LocalStorageService.get(THEME);
+        console.log('💡 ThemeConfig current::: ', current);
+        this.theme = new BehaviorSubject(current || this.default);
+        this.currentOption = this.Theme;
+        console.log('💡 ThemeConfig this.currentOption::: ', this.currentOption);
+        this.toggleUserPreference(this.currentOption);
+        const prefersDarkQuery = window.matchMedia('(prefers-color-scheme: dark)');
+        this.prefersDark = prefersDarkQuery.matches;
+        this.handleAutoConfiguration();
+        prefersDarkQuery.addEventListener('change', mediaQuery => {
+            console.log('💡 ThemeConfig addEventListener change::: ', mediaQuery);
+            this.prefersDark = mediaQuery.matches;
+            this.handleAutoConfiguration();
+        });
+    }
+    handleAutoConfiguration() {
+        if (this.prefersDark && this.currentOption === ThemeOption.AUTO) {
+            console.log('💡 ThemeConfig prefersDark::: ', this.prefersDark);
+            this.toggleUserPreference(ThemeOption.AUTO);
+        }
+        if (!this.prefersDark && this.currentOption === ThemeOption.AUTO) {
+            console.log('💡 ThemeConfig prefersDark::: ', this.prefersDark);
+            this.toggleUserPreference(ThemeOption.AUTO);
+        }
+    }
+    handleDarkPreference() {
+        this.toggleTheme(ThemeOption.DARK, true);
+        this.toggleTheme(ThemeOption.LIGHT, false);
+    }
+    handleLightPreference() {
+        this.toggleTheme(ThemeOption.LIGHT, true);
+        this.toggleTheme(ThemeOption.DARK, false);
+    }
+    get Theme() {
+        return this.theme.value;
+    }
+    set Theme(theme) {
+        this.theme.next(theme);
+        LocalStorageService.set(THEME, theme);
     }
     toggleTheme(name, shouldAdd) {
         console.log('toggleTheme::: ', name, shouldAdd);
@@ -578,23 +2965,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
                 }]
         }], ctorParameters: () => [] });
 
-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;
-};
-
 /*
  * Public API Surface of valtech-components
  */
@@ -606,5 +2976,5 @@ const isAtEnd = (elementRef) => {
  * Generated bundle index. Do not edit.
  */
 
-export { ActionType, AvatarComponent, BaseDefault, ButtonComponent, ClearDefault, ClearDefaultBlock, ClearDefaultFull, ClearDefaultRound, ClearDefaultRoundBlock, ClearDefaultRoundFull, ComponentStates, DownloadService, Icon, InputType, LangOption, LangService, LayoutComponent, LocalStorageService, OutlineDefault, OutlineDefaultBlock, OutlineDefaultFull, OutlineDefaultRound, OutlineDefaultRoundBlock, OutlineDefaultRoundFull, PrimarySolidBlockButton, PrimarySolidBlockHrefButton, PrimarySolidBlockIconButton, PrimarySolidBlockIconHrefButton, PrimarySolidDefaultRoundButton, PrimarySolidDefaultRoundHrefButton, PrimarySolidDefaultRoundIconButton, PrimarySolidDefaultRoundIconHrefButton, PrimarySolidFullButton, PrimarySolidFullHrefButton, PrimarySolidFullIconButton, PrimarySolidFullIconHrefButton, PrimarySolidLargeRoundButton, PrimarySolidLargeRoundHrefButton, PrimarySolidLargeRoundIconButton, PrimarySolidLargeRoundIconHrefButton, PrimarySolidSmallRoundButton, PrimarySolidSmallRoundHrefButton, PrimarySolidSmallRoundIconButton, PrimarySolidSmallRoundIconHrefButton, 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, TextContent, ThemeOption, ThemeService, ValtechConfigService, goToTop, isAtEnd };
+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, LayoutComponent, 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, SimpleComponent, SolidBlockButton, SolidDefault, SolidDefaultBlock, SolidDefaultButton, SolidDefaultFull, SolidDefaultRound, SolidDefaultRoundBlock, SolidDefaultRoundButton, SolidDefaultRoundFull, SolidFullButton, SolidLargeButton, SolidLargeRoundButton, SolidSmallButton, SolidSmallRoundButton, TextComponent, TextContent, TextInputComponent, ThemeOption, ThemeService, TitleBlockComponent, TitleComponent, ToolbarActionType, ToolbarComponent, ValtechConfigService, WizardComponent, WizardFooterComponent, goToTop, isAtEnd, maxLength };
 //# sourceMappingURL=valtech-components.mjs.map