valtech-components 1.11.64 → 1.11.66

package/fesm2022/valtech-components.mjs

@@ -1,9 +1,13 @@
 import * as i0 from '@angular/core';
-import { Injectable, EventEmitter, Component, Input, Output, InjectionToken, NgModule, Inject } from '@angular/core';
+import { Injectable, EventEmitter, Component, Input, Output, ViewChild, InjectionToken, NgModule, Inject } from '@angular/core';
 import * as i1 from '@angular/common';
 import { CommonModule } from '@angular/common';
 import * as i1$1 from '@ionic/angular';
 import { IonicModule } from '@ionic/angular';
+import * as i2 from '@angular/forms';
+import { ReactiveFormsModule } from '@angular/forms';
+import * as i1$2 from 'ng-otp-input';
+import { NgOtpInputComponent, NgOtpInputModule } from 'ng-otp-input';
 import { BehaviorSubject } from 'rxjs';
 import { HttpClientModule } from '@angular/common/http';
 
@@ -20,6 +24,21 @@ var ActionType;
     ActionType[ActionType["APP_NAVIGATION"] = 3] = "APP_NAVIGATION";
     ActionType[ActionType["BROWSER_NAVIGATION"] = 4] = "BROWSER_NAVIGATION";
 })(ActionType || (ActionType = {}));
+var InputType;
+(function (InputType) {
+    InputType[InputType["TEXT"] = 0] = "TEXT";
+    InputType[InputType["EMAIL"] = 1] = "EMAIL";
+    InputType[InputType["PASSWORD"] = 2] = "PASSWORD";
+    InputType[InputType["COMMENT"] = 3] = "COMMENT";
+    InputType[InputType["NUMBER"] = 4] = "NUMBER";
+    InputType[InputType["PIN_CODE"] = 5] = "PIN_CODE";
+    InputType[InputType["DATE"] = 6] = "DATE";
+    InputType[InputType["HOUR"] = 7] = "HOUR";
+    InputType[InputType["CHECK"] = 8] = "CHECK";
+    InputType[InputType["RADIO"] = 9] = "RADIO";
+    InputType[InputType["SELECT"] = 10] = "SELECT";
+    InputType[InputType["FILE"] = 11] = "FILE";
+})(InputType || (InputType = {}));
 
 class DownloadService {
     getFileNameFromUrl(url) {
@@ -352,11 +371,11 @@ class TitleComponent {
     constructor() { }
     ngOnInit() { }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: TitleComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.0", type: TitleComponent, selector: "val-title", inputs: { size: "size", color: "color", content: "content" }, ngImport: i0, template: "<ion-text [color]=\"color\">\n  <p [class]=\"size\">\n    {{ content }}\n  </p>\n</ion-text>\n", styles: [".small{font-size:.875rem;line-height:1.5rem;font-weight:700}@media (min-width: 768px){.small{font-size:1rem;line-height:1.5rem}}.medium{font-size:1rem;line-height:1.5rem;font-weight:700}@media (min-width: 768px){.medium{font-size:1.125rem;line-height:1.5rem}}.large{font-size:1.125rem;line-height:1.5rem;font-weight:700}@media (min-width: 768px){.large{font-size:1.5rem;line-height:2rem}}\n"], dependencies: [{ kind: "component", type: i1$1.IonText, selector: "ion-text", inputs: ["color", "mode"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.0", type: TitleComponent, selector: "val-title", inputs: { size: "size", color: "color", content: "content" }, ngImport: i0, template: "<ion-text [color]=\"color\">\n  <p [class]=\"size\">\n    {{ content }}\n  </p>\n</ion-text>\n", styles: [".small{font-size:.875rem;line-height:1.5rem;font-weight:700}@media (min-width: 768px){.small{font-size:1rem;line-height:1.5rem}}.medium{font-size:1rem;line-height:1.5rem;font-weight:700}@media (min-width: 768px){.medium{font-size:1.125rem;line-height:1.5rem}}.large{font-size:1.125rem;line-height:1.5rem;font-weight:700}@media (min-width: 768px){.large{font-size:1.5rem;line-height:2rem}}.xlarge{font-size:1.125rem;line-height:1.5rem;font-weight:700}@media (min-width: 768px){.xlarge{font-size:1.5rem;line-height:2rem}}\n"], dependencies: [{ kind: "component", type: i1$1.IonText, selector: "ion-text", inputs: ["color", "mode"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: TitleComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'val-title', template: "<ion-text [color]=\"color\">\n  <p [class]=\"size\">\n    {{ content }}\n  </p>\n</ion-text>\n", styles: [".small{font-size:.875rem;line-height:1.5rem;font-weight:700}@media (min-width: 768px){.small{font-size:1rem;line-height:1.5rem}}.medium{font-size:1rem;line-height:1.5rem;font-weight:700}@media (min-width: 768px){.medium{font-size:1.125rem;line-height:1.5rem}}.large{font-size:1.125rem;line-height:1.5rem;font-weight:700}@media (min-width: 768px){.large{font-size:1.5rem;line-height:2rem}}\n"] }]
+            args: [{ selector: 'val-title', template: "<ion-text [color]=\"color\">\n  <p [class]=\"size\">\n    {{ content }}\n  </p>\n</ion-text>\n", styles: [".small{font-size:.875rem;line-height:1.5rem;font-weight:700}@media (min-width: 768px){.small{font-size:1rem;line-height:1.5rem}}.medium{font-size:1rem;line-height:1.5rem;font-weight:700}@media (min-width: 768px){.medium{font-size:1.125rem;line-height:1.5rem}}.large{font-size:1.125rem;line-height:1.5rem;font-weight:700}@media (min-width: 768px){.large{font-size:1.5rem;line-height:2rem}}.xlarge{font-size:1.125rem;line-height:1.5rem;font-weight:700}@media (min-width: 768px){.xlarge{font-size:1.5rem;line-height:2rem}}\n"] }]
         }], ctorParameters: () => [], propDecorators: { size: [{
                 type: Input
             }], color: [{
@@ -771,11 +790,11 @@ class NoContentComponent {
         this.onClick.emit(token);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: NoContentComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.0", type: NoContentComponent, selector: "val-no-content", inputs: { props: "props" }, outputs: { onClick: "onClick" }, ngImport: i0, template: "<val-image class=\"image-container\" [props]=\"props.image\"></val-image>\n<div>\n  <val-banner [props]=\"props.content\"></val-banner>\n</div>\n", styles: [".image-container{display:flex;justify-content:center;margin-bottom:1rem}val-image .image{margin:0 auto}\n"], dependencies: [{ kind: "component", type: BannerComponent, selector: "val-banner", inputs: ["props"], outputs: ["onClick", "onClose"] }, { kind: "component", type: ImageComponent, selector: "val-image", inputs: ["props"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.0", type: NoContentComponent, selector: "val-no-content", inputs: { props: "props" }, outputs: { onClick: "onClick" }, ngImport: i0, template: "<val-image class=\"image-container\" [props]=\"props.image\"></val-image>\n<div>\n  <val-banner [props]=\"props.content\" (onClick)=\"onClickHandler($event)\"></val-banner>\n</div>\n", styles: [".image-container{display:flex;justify-content:center;margin-bottom:1rem}val-image .image{margin:0 auto}\n"], dependencies: [{ kind: "component", type: BannerComponent, selector: "val-banner", inputs: ["props"], outputs: ["onClick", "onClose"] }, { kind: "component", type: ImageComponent, selector: "val-image", inputs: ["props"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: NoContentComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'val-no-content', template: "<val-image class=\"image-container\" [props]=\"props.image\"></val-image>\n<div>\n  <val-banner [props]=\"props.content\"></val-banner>\n</div>\n", styles: [".image-container{display:flex;justify-content:center;margin-bottom:1rem}val-image .image{margin:0 auto}\n"] }]
+            args: [{ selector: 'val-no-content', template: "<val-image class=\"image-container\" [props]=\"props.image\"></val-image>\n<div>\n  <val-banner [props]=\"props.content\" (onClick)=\"onClickHandler($event)\"></val-banner>\n</div>\n", styles: [".image-container{display:flex;justify-content:center;margin-bottom:1rem}val-image .image{margin:0 auto}\n"] }]
         }], ctorParameters: () => [], propDecorators: { props: [{
                 type: Input
             }], onClick: [{
@@ -830,6 +849,252 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.0", ngImpor
                 type: Input
             }] } });
 
+class CheckInputComponent {
+    constructor() { }
+    ngOnInit() { }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: CheckInputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.0", type: CheckInputComponent, selector: "val-check-input", ngImport: i0, template: "<ion-checkbox>I agree to the terms and conditions</ion-checkbox>", styles: [""], dependencies: [{ kind: "component", type: i1$1.IonCheckbox, selector: "ion-checkbox", inputs: ["alignment", "checked", "color", "disabled", "indeterminate", "justify", "labelPlacement", "legacy", "mode", "name", "value"] }, { kind: "directive", type: i1$1.BooleanValueAccessor, selector: "ion-checkbox,ion-toggle" }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: CheckInputComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'val-check-input', template: "<ion-checkbox>I agree to the terms and conditions</ion-checkbox>" }]
+        }], ctorParameters: () => [] });
+
+class CommentInputComponent {
+    constructor() { }
+    ngOnInit() { }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: CommentInputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.0", type: CommentInputComponent, selector: "val-comment-input", inputs: { control: "control", metadata: "metadata" }, ngImport: i0, template: "<ion-textarea [formControl]=\"control\" [counter]=\"true\" [maxlength]=\"metadata.range.max\"></ion-textarea>", styles: [""], dependencies: [{ kind: "component", type: i1$1.IonTextarea, selector: "ion-textarea", inputs: ["autoGrow", "autocapitalize", "autofocus", "clearOnEdit", "color", "cols", "counter", "counterFormatter", "debounce", "disabled", "enterkeyhint", "errorText", "fill", "helperText", "inputmode", "label", "labelPlacement", "legacy", "maxlength", "minlength", "mode", "name", "placeholder", "readonly", "required", "rows", "shape", "spellcheck", "value", "wrap"] }, { kind: "directive", type: i1$1.TextValueAccessor, selector: "ion-input:not([type=number]),ion-textarea,ion-searchbar,ion-range" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { kind: "directive", type: i2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: CommentInputComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'val-comment-input', template: "<ion-textarea [formControl]=\"control\" [counter]=\"true\" [maxlength]=\"metadata.range.max\"></ion-textarea>" }]
+        }], ctorParameters: () => [], propDecorators: { control: [{
+                type: Input
+            }], metadata: [{
+                type: Input
+            }] } });
+
+class DateInputComponent {
+    constructor() {
+    }
+    ngOnInit() { }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: DateInputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.0", type: DateInputComponent, selector: "val-date-input", inputs: { control: "control", metadata: "metadata" }, ngImport: i0, template: "<div class=\"button-container\">\n  <ion-datetime-button class=\"action\" datetime=\"datetime\"></ion-datetime-button>\n</div>\n<ion-modal [keepContentsMounted]=\"true\">\n  <ng-template>\n    <ion-datetime\n      [formControl]=\"control\"\n      id=\"datetime\"\n      presentation=\"date\"\n      locale=\"es-ES\"\n      [firstDayOfWeek]=\"1\"\n      [showDefaultButtons]=\"true\"\n      doneText=\"Aceptar\"\n      cancelText=\"Cancelar\"\n      [formatOptions]=\"{\n        date: { weekday: 'short', month: 'long', day: '2-digit', },\n        time: {\n          hour: '2-digit',\n          minute: '2-digit',\n        },\n      }\"\n    >\n      <span slot=\"title\">{{ metadata.hint }}</span>\n    </ion-datetime>\n  </ng-template>\n</ion-modal>\n", styles: [".section{margin-top:1rem}.input{margin:.5rem 0}@media (min-width: 768px){.input{margin:.75rem 0}}.button-container{display:flex;flex-direction:column;align-items:flex-start}.action{margin-top:.25rem}\n"], dependencies: [{ kind: "component", type: i1$1.IonDatetime, selector: "ion-datetime", inputs: ["cancelText", "clearText", "color", "dayValues", "disabled", "doneText", "firstDayOfWeek", "formatOptions", "highlightedDates", "hourCycle", "hourValues", "isDateEnabled", "locale", "max", "min", "minuteValues", "mode", "monthValues", "multiple", "name", "preferWheel", "presentation", "readonly", "showClearButton", "showDefaultButtons", "showDefaultTimeLabel", "showDefaultTitle", "size", "titleSelectedDatesFormatter", "value", "yearValues"] }, { kind: "component", type: i1$1.IonDatetimeButton, selector: "ion-datetime-button", inputs: ["color", "datetime", "disabled", "mode"] }, { kind: "component", type: i1$1.IonModal, selector: "ion-modal" }, { kind: "directive", type: i1$1.SelectValueAccessor, selector: "ion-select, ion-radio-group, ion-segment, ion-datetime" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: DateInputComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'val-date-input', template: "<div class=\"button-container\">\n  <ion-datetime-button class=\"action\" datetime=\"datetime\"></ion-datetime-button>\n</div>\n<ion-modal [keepContentsMounted]=\"true\">\n  <ng-template>\n    <ion-datetime\n      [formControl]=\"control\"\n      id=\"datetime\"\n      presentation=\"date\"\n      locale=\"es-ES\"\n      [firstDayOfWeek]=\"1\"\n      [showDefaultButtons]=\"true\"\n      doneText=\"Aceptar\"\n      cancelText=\"Cancelar\"\n      [formatOptions]=\"{\n        date: { weekday: 'short', month: 'long', day: '2-digit', },\n        time: {\n          hour: '2-digit',\n          minute: '2-digit',\n        },\n      }\"\n    >\n      <span slot=\"title\">{{ metadata.hint }}</span>\n    </ion-datetime>\n  </ng-template>\n</ion-modal>\n", styles: [".section{margin-top:1rem}.input{margin:.5rem 0}@media (min-width: 768px){.input{margin:.75rem 0}}.button-container{display:flex;flex-direction:column;align-items:flex-start}.action{margin-top:.25rem}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { control: [{
+                type: Input
+            }], metadata: [{
+                type: Input
+            }] } });
+
+class EmailInputComponent {
+    constructor() { }
+    ngOnInit() { }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: EmailInputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.0", type: EmailInputComponent, selector: "val-email-input", inputs: { control: "control", metadata: "metadata" }, ngImport: i0, template: "<ion-input\n  [formControl]=\"control\"\n  type=\"email\"\n  [placeholder]=\"metadata.placeholder\"\n></ion-input>\n\n", styles: [""], dependencies: [{ kind: "component", type: i1$1.IonInput, selector: "ion-input", inputs: ["accept", "autocapitalize", "autocomplete", "autocorrect", "autofocus", "clearInput", "clearOnEdit", "color", "counter", "counterFormatter", "debounce", "disabled", "enterkeyhint", "errorText", "fill", "helperText", "inputmode", "label", "labelPlacement", "legacy", "max", "maxlength", "min", "minlength", "mode", "multiple", "name", "pattern", "placeholder", "readonly", "required", "shape", "size", "spellcheck", "step", "type", "value"] }, { kind: "directive", type: i1$1.TextValueAccessor, selector: "ion-input:not([type=number]),ion-textarea,ion-searchbar,ion-range" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: EmailInputComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'val-email-input', template: "<ion-input\n  [formControl]=\"control\"\n  type=\"email\"\n  [placeholder]=\"metadata.placeholder\"\n></ion-input>\n\n" }]
+        }], ctorParameters: () => [], propDecorators: { control: [{
+                type: Input
+            }], metadata: [{
+                type: Input
+            }] } });
+
+class FileInputComponent {
+    constructor() {
+        this.contrastButton = {
+            ...PrimarySolidDefaultRoundButton('Subir archivo'),
+            color: 'light',
+        };
+    }
+    ngOnInit() { }
+    onFileSelected(event) {
+        this.selectedFile = event.target.files[0];
+        this.control.setValue(this.selectedFile);
+    }
+    reset() {
+        this.selectedFile = null;
+        this.fileInput.nativeElement.value = '';
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: FileInputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.0", type: FileInputComponent, selector: "val-file-input", inputs: { control: "control", metadata: "metadata" }, viewQueries: [{ propertyName: "fileInput", first: true, predicate: ["fileInput"], descendants: true }], ngImport: i0, template: "<div class=\"file-container\">\n  <input style=\"display: none\" type=\"file\" (change)=\"onFileSelected($event)\" #fileInput>\n  <div class=\"name-container\">\n    <ion-icon [name]=\"selectedFile ? 'checkmark-circle-outline' : 'alert-circle-outline'\"></ion-icon>\n    <val-text style=\"margin-left: 4px;\" color=\"dark\" size=\"medium\" [content]=\"selectedFile ? selectedFile.name : 'No has seleccionado archivo'\"></val-text>\n  </div>\n  <val-button [props]=\"contrastButton\" (onClick)=\"fileInput.click()\"></val-button>\n</div>", styles: [".section{margin-top:1rem}.input{margin:.5rem 0}@media (min-width: 768px){.input{margin:.75rem 0}}.file-container{margin-top:.25rem}.name-container{display:flex;flex-direction:row;align-items:flex-start}\n"], dependencies: [{ kind: "component", type: i1$1.IonIcon, selector: "ion-icon", inputs: ["color", "flipRtl", "icon", "ios", "lazy", "md", "mode", "name", "sanitize", "size", "src"] }, { kind: "component", type: ButtonComponent, selector: "val-button", inputs: ["props"], outputs: ["onClick"] }, { kind: "component", type: TextComponent, selector: "val-text", inputs: ["size", "color", "content", "bold"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: FileInputComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'val-file-input', template: "<div class=\"file-container\">\n  <input style=\"display: none\" type=\"file\" (change)=\"onFileSelected($event)\" #fileInput>\n  <div class=\"name-container\">\n    <ion-icon [name]=\"selectedFile ? 'checkmark-circle-outline' : 'alert-circle-outline'\"></ion-icon>\n    <val-text style=\"margin-left: 4px;\" color=\"dark\" size=\"medium\" [content]=\"selectedFile ? selectedFile.name : 'No has seleccionado archivo'\"></val-text>\n  </div>\n  <val-button [props]=\"contrastButton\" (onClick)=\"fileInput.click()\"></val-button>\n</div>", styles: [".section{margin-top:1rem}.input{margin:.5rem 0}@media (min-width: 768px){.input{margin:.75rem 0}}.file-container{margin-top:.25rem}.name-container{display:flex;flex-direction:row;align-items:flex-start}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { fileInput: [{
+                type: ViewChild,
+                args: ['fileInput']
+            }], control: [{
+                type: Input
+            }], metadata: [{
+                type: Input
+            }] } });
+
+class HintComponent {
+    constructor() { }
+    ngOnInit() { }
+    get Errors() {
+        const keys = Object.keys(this.metadata.errors);
+        const errors = [];
+        keys.map((e) => {
+            if (this.control.hasError(e)) {
+                errors.push(this.metadata.errors[e]);
+            }
+        });
+        return errors;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: HintComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.0", type: HintComponent, selector: "val-hint", inputs: { control: "control", metadata: "metadata" }, ngImport: i0, template: "<div class=\"hint-container\" *ngIf=\"control.invalid && (control.touched || control.dirty)\">\n  <val-text *ngFor=\"let e of Errors\" color=\"danger\" [content]=\"e\" size=\"small\"></val-text>\n</div>", styles: [".section{margin-top:1rem}.input{margin:.5rem 0}@media (min-width: 768px){.input{margin:.75rem 0}}.hint-container{margin-top:.25rem}\n"], dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: TextComponent, selector: "val-text", inputs: ["size", "color", "content", "bold"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: HintComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'val-hint', template: "<div class=\"hint-container\" *ngIf=\"control.invalid && (control.touched || control.dirty)\">\n  <val-text *ngFor=\"let e of Errors\" color=\"danger\" [content]=\"e\" size=\"small\"></val-text>\n</div>", styles: [".section{margin-top:1rem}.input{margin:.5rem 0}@media (min-width: 768px){.input{margin:.75rem 0}}.hint-container{margin-top:.25rem}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { control: [{
+                type: Input
+            }], metadata: [{
+                type: Input
+            }] } });
+
+class HourInputComponent {
+    constructor() { }
+    ngOnInit() { }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: HourInputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.0", type: HourInputComponent, selector: "val-hour-input", inputs: { control: "control", metadata: "metadata" }, ngImport: i0, template: "\n<ion-datetime [formControl]=\"control\" presentation=\"time\"></ion-datetime>", styles: [""], dependencies: [{ kind: "component", type: i1$1.IonDatetime, selector: "ion-datetime", inputs: ["cancelText", "clearText", "color", "dayValues", "disabled", "doneText", "firstDayOfWeek", "formatOptions", "highlightedDates", "hourCycle", "hourValues", "isDateEnabled", "locale", "max", "min", "minuteValues", "mode", "monthValues", "multiple", "name", "preferWheel", "presentation", "readonly", "showClearButton", "showDefaultButtons", "showDefaultTimeLabel", "showDefaultTitle", "size", "titleSelectedDatesFormatter", "value", "yearValues"] }, { kind: "directive", type: i1$1.SelectValueAccessor, selector: "ion-select, ion-radio-group, ion-segment, ion-datetime" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: HourInputComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'val-hour-input', template: "\n<ion-datetime [formControl]=\"control\" presentation=\"time\"></ion-datetime>" }]
+        }], ctorParameters: () => [], propDecorators: { control: [{
+                type: Input
+            }], metadata: [{
+                type: Input
+            }] } });
+
+class NumberInputComponent {
+    constructor() { }
+    ngOnInit() { }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: NumberInputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.0", type: NumberInputComponent, selector: "val-number-input", inputs: { control: "control", metadata: "metadata" }, ngImport: i0, template: "<ion-input\n  [formControl]=\"control\"\n  type=\"number\"\n  [placeholder]=\"metadata.placeholder\"\n></ion-input>", styles: [""], dependencies: [{ kind: "component", type: i1$1.IonInput, selector: "ion-input", inputs: ["accept", "autocapitalize", "autocomplete", "autocorrect", "autofocus", "clearInput", "clearOnEdit", "color", "counter", "counterFormatter", "debounce", "disabled", "enterkeyhint", "errorText", "fill", "helperText", "inputmode", "label", "labelPlacement", "legacy", "max", "maxlength", "min", "minlength", "mode", "multiple", "name", "pattern", "placeholder", "readonly", "required", "shape", "size", "spellcheck", "step", "type", "value"] }, { kind: "directive", type: i1$1.NumericValueAccessor, selector: "ion-input[type=number]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: NumberInputComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'val-number-input', template: "<ion-input\n  [formControl]=\"control\"\n  type=\"number\"\n  [placeholder]=\"metadata.placeholder\"\n></ion-input>" }]
+        }], ctorParameters: () => [], propDecorators: { control: [{
+                type: Input
+            }], metadata: [{
+                type: Input
+            }] } });
+
+class PasswordInputComponent {
+    constructor() {
+        this.hidePassword = true;
+    }
+    ngOnInit() { }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: PasswordInputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.0", type: PasswordInputComponent, selector: "val-password-input", inputs: { control: "control", metadata: "metadata" }, ngImport: i0, template: "<div class=\"input-container\">\n  <ion-input\n    class=\"sign-in__input-password\"\n    [formControl]=\"control\"\n    [type]=\"hidePassword ? 'password' : 'text'\"\n    [placeholder]=\"metadata.placeholder\"\n  ></ion-input>\n  <ion-button color=\"dark\" fill=\"clear\" (click)=\"hidePassword = !hidePassword\" size=\"small\">\n    <ion-icon slot=\"icon-only\" [name]=\"hidePassword ? 'eye-off-outline' : 'eye-outline'\"></ion-icon>\n  </ion-button>\n</div>\n", styles: [".section{margin-top:1rem}.input{margin:.5rem 0}@media (min-width: 768px){.input{margin:.75rem 0}}.input-container{display:flex;align-items:center;flex-direction:row}\n"], dependencies: [{ kind: "component", type: i1$1.IonButton, selector: "ion-button", inputs: ["buttonType", "color", "disabled", "download", "expand", "fill", "form", "href", "mode", "rel", "routerAnimation", "routerDirection", "shape", "size", "strong", "target", "type"] }, { kind: "component", type: i1$1.IonIcon, selector: "ion-icon", inputs: ["color", "flipRtl", "icon", "ios", "lazy", "md", "mode", "name", "sanitize", "size", "src"] }, { kind: "component", type: i1$1.IonInput, selector: "ion-input", inputs: ["accept", "autocapitalize", "autocomplete", "autocorrect", "autofocus", "clearInput", "clearOnEdit", "color", "counter", "counterFormatter", "debounce", "disabled", "enterkeyhint", "errorText", "fill", "helperText", "inputmode", "label", "labelPlacement", "legacy", "max", "maxlength", "min", "minlength", "mode", "multiple", "name", "pattern", "placeholder", "readonly", "required", "shape", "size", "spellcheck", "step", "type", "value"] }, { kind: "directive", type: i1$1.TextValueAccessor, selector: "ion-input:not([type=number]),ion-textarea,ion-searchbar,ion-range" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: PasswordInputComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'val-password-input', template: "<div class=\"input-container\">\n  <ion-input\n    class=\"sign-in__input-password\"\n    [formControl]=\"control\"\n    [type]=\"hidePassword ? 'password' : 'text'\"\n    [placeholder]=\"metadata.placeholder\"\n  ></ion-input>\n  <ion-button color=\"dark\" fill=\"clear\" (click)=\"hidePassword = !hidePassword\" size=\"small\">\n    <ion-icon slot=\"icon-only\" [name]=\"hidePassword ? 'eye-off-outline' : 'eye-outline'\"></ion-icon>\n  </ion-button>\n</div>\n", styles: [".section{margin-top:1rem}.input{margin:.5rem 0}@media (min-width: 768px){.input{margin:.75rem 0}}.input-container{display:flex;align-items:center;flex-direction:row}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { control: [{
+                type: Input
+            }], metadata: [{
+                type: Input
+            }] } });
+
+class PinInputComponent {
+    constructor() {
+        this.codeLength = 5;
+        this.otpInputConfig = {
+            inputStyles: {
+                'font-size': '36px',
+                width: '55px',
+                height: '55px',
+            },
+            inputClass: 'otp-input-box',
+            length: this.codeLength,
+            allowNumbersOnly: true,
+        };
+    }
+    ngOnInit() { }
+    reset() {
+        if (this.pinCode) {
+            this.pinCode.setValue('');
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: PinInputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.0", type: PinInputComponent, selector: "val-pin-input", inputs: { control: "control", metadata: "metadata" }, viewQueries: [{ propertyName: "pinCode", first: true, predicate: NgOtpInputComponent, descendants: true }], ngImport: i0, template: "<div class=\"otp\">\n  <ng-otp-input [formCtrl]=\"control\" [config]=\"otpInputConfig\"></ng-otp-input>\n</div>\n", styles: [".section{margin-top:1rem}.input{margin:.5rem 0}@media (min-width: 768px){.input{margin:.75rem 0}}.otp{text-align:center;margin-top:.25rem;font-family:var(--ion-default-font),Arial,sans-serif}.otp-input-box:focus{border-color:#0ff}\n"], dependencies: [{ kind: "component", type: i1$2.NgOtpInputComponent, selector: "ng-otp-input", inputs: ["config", "formCtrl"], outputs: ["onInputChange"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: PinInputComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'val-pin-input', template: "<div class=\"otp\">\n  <ng-otp-input [formCtrl]=\"control\" [config]=\"otpInputConfig\"></ng-otp-input>\n</div>\n", styles: [".section{margin-top:1rem}.input{margin:.5rem 0}@media (min-width: 768px){.input{margin:.75rem 0}}.otp{text-align:center;margin-top:.25rem;font-family:var(--ion-default-font),Arial,sans-serif}.otp-input-box:focus{border-color:#0ff}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { pinCode: [{
+                type: ViewChild,
+                args: [NgOtpInputComponent, { static: false }]
+            }], control: [{
+                type: Input
+            }], metadata: [{
+                type: Input
+            }] } });
+
+class PrompterComponent {
+    constructor() {
+        this.onClick = new EventEmitter();
+    }
+    ngOnInit() { }
+    clickHandler(token) {
+        this.onClick.emit(token);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: PrompterComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.0", type: PrompterComponent, selector: "val-prompter", inputs: { props: "props" }, outputs: { onClick: "onClick" }, ngImport: i0, template: "<val-box [color]=\"props.color\" class=\"teleprompter-container\" [bordered]=\"props.bordered\">\n  <div class=\"container\" [class.teleprompter-content]=\"props.teleprompter\" body>\n    <div>\n      <val-text [content]=\"props.content\" size=\"large\" [bold]=\"true\"></val-text>\n    </div>\n    <div *ngIf=\"props.buttons\">\n      <val-button-group\n        class=\"buttons-container\"\n        [buttons]=\"props.buttons\"\n        (onClick)=\"clickHandler($event)\"\n      ></val-button-group>\n    </div>\n    <div *ngIf=\"props.hrefs\">\n      <val-href class=\"link\" *ngFor=\"let l of props.hrefs\" [props]=\"l\" (onClick)=\"clickHandler($event)\"></val-href>\n    </div>\n  </div>\n</val-box>\n", styles: ["@charset \"UTF-8\";.container{display:flex;align-items:center;justify-content:center}.teleprompter-container{overflow:hidden;width:100%}.teleprompter-content{white-space:nowrap;animation:scroll-left 15s linear infinite}@keyframes scroll-left{0%{transform:translate(100%)}to{transform:translate(-100%)}}.link{margin:0 .25rem}\n"], dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: BoxComponent, selector: "val-box", inputs: ["color", "icon", "bordered", "leftBorder"], outputs: ["onClick"] }, { kind: "component", type: TextComponent, selector: "val-text", inputs: ["size", "color", "content", "bold"] }, { kind: "component", type: ButtonGroupComponent, selector: "val-button-group", inputs: ["buttons", "position", "columned"], outputs: ["onClick"] }, { kind: "component", type: HrefComponent, selector: "val-href", inputs: ["props"], outputs: ["onClick"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: PrompterComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'val-prompter', template: "<val-box [color]=\"props.color\" class=\"teleprompter-container\" [bordered]=\"props.bordered\">\n  <div class=\"container\" [class.teleprompter-content]=\"props.teleprompter\" body>\n    <div>\n      <val-text [content]=\"props.content\" size=\"large\" [bold]=\"true\"></val-text>\n    </div>\n    <div *ngIf=\"props.buttons\">\n      <val-button-group\n        class=\"buttons-container\"\n        [buttons]=\"props.buttons\"\n        (onClick)=\"clickHandler($event)\"\n      ></val-button-group>\n    </div>\n    <div *ngIf=\"props.hrefs\">\n      <val-href class=\"link\" *ngFor=\"let l of props.hrefs\" [props]=\"l\" (onClick)=\"clickHandler($event)\"></val-href>\n    </div>\n  </div>\n</val-box>\n", styles: ["@charset \"UTF-8\";.container{display:flex;align-items:center;justify-content:center}.teleprompter-container{overflow:hidden;width:100%}.teleprompter-content{white-space:nowrap;animation:scroll-left 15s linear infinite}@keyframes scroll-left{0%{transform:translate(100%)}to{transform:translate(-100%)}}.link{margin:0 .25rem}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { props: [{
+                type: Input
+            }], onClick: [{
+                type: Output
+            }] } });
+
+class RadioInputComponent {
+    constructor() { }
+    ngOnInit() { }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: RadioInputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.0", type: RadioInputComponent, selector: "val-radio-input", inputs: { control: "control", metadata: "metadata" }, ngImport: i0, template: "<ion-radio-group [allowEmptySelection]=\"true\" [formControl]=\"control\">\n  <ng-container *ngFor=\"let o of metadata.options\">\n    <ion-radio [value]=\"o.id\">{{ o.name }}</ion-radio>\n    <br />\n  </ng-container>\n</ion-radio-group>\n", styles: [""], dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "component", type: i1$1.IonRadio, selector: "ion-radio", inputs: ["alignment", "color", "disabled", "justify", "labelPlacement", "legacy", "mode", "name", "value"] }, { kind: "component", type: i1$1.IonRadioGroup, selector: "ion-radio-group", inputs: ["allowEmptySelection", "compareWith", "name", "value"] }, { kind: "directive", type: i1$1.RadioValueAccessor, selector: "ion-radio" }, { kind: "directive", type: i1$1.SelectValueAccessor, selector: "ion-select, ion-radio-group, ion-segment, ion-datetime" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: RadioInputComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'val-radio-input', template: "<ion-radio-group [allowEmptySelection]=\"true\" [formControl]=\"control\">\n  <ng-container *ngFor=\"let o of metadata.options\">\n    <ion-radio [value]=\"o.id\">{{ o.name }}</ion-radio>\n    <br />\n  </ng-container>\n</ion-radio-group>\n" }]
+        }], ctorParameters: () => [], propDecorators: { control: [{
+                type: Input
+            }], metadata: [{
+                type: Input
+            }] } });
+
+class TextInputComponent {
+    constructor() {
+    }
+    ngOnInit() { }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: TextInputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.0", type: TextInputComponent, selector: "val-text-input", inputs: { control: "control", metadata: "metadata" }, ngImport: i0, template: "<ion-input\n  [formControl]=\"control\"\n  type=\"text\"\n  [placeholder]=\"metadata.placeholder\"\n></ion-input>", styles: [".section{margin-top:1rem}.input{margin:.5rem 0}@media (min-width: 768px){.input{margin:.75rem 0}}\n"], dependencies: [{ kind: "component", type: i1$1.IonInput, selector: "ion-input", inputs: ["accept", "autocapitalize", "autocomplete", "autocorrect", "autofocus", "clearInput", "clearOnEdit", "color", "counter", "counterFormatter", "debounce", "disabled", "enterkeyhint", "errorText", "fill", "helperText", "inputmode", "label", "labelPlacement", "legacy", "max", "maxlength", "min", "minlength", "mode", "multiple", "name", "pattern", "placeholder", "readonly", "required", "shape", "size", "spellcheck", "step", "type", "value"] }, { kind: "directive", type: i1$1.TextValueAccessor, selector: "ion-input:not([type=number]),ion-textarea,ion-searchbar,ion-range" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: TextInputComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'val-text-input', template: "<ion-input\n  [formControl]=\"control\"\n  type=\"text\"\n  [placeholder]=\"metadata.placeholder\"\n></ion-input>", styles: [".section{margin-top:1rem}.input{margin:.5rem 0}@media (min-width: 768px){.input{margin:.75rem 0}}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { control: [{
+                type: Input
+            }], metadata: [{
+                type: Input
+            }] } });
+
 var ToolbarActionType;
 (function (ToolbarActionType) {
     ToolbarActionType["AVATAR"] = "AVATAR";
@@ -875,6 +1140,268 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.0", ngImpor
                 type: Output
             }] } });
 
+class FooterComponent {
+    constructor() {
+        this.onClick = new EventEmitter();
+    }
+    ngOnInit() { }
+    clickHandler(token) {
+        this.onClick.emit(token);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: FooterComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.0", type: FooterComponent, selector: "val-footer", inputs: { props: "props" }, outputs: { onClick: "onClick" }, ngImport: i0, template: "<ion-footer\n  [class.ion-no-border]=\"!props.bordered\"\n  [translucent]=\"props.translucent\"\n  [class.background]=\"props.toolbar.color === 'background'\"\n>\n  <val-toolbar\n    *ngIf=\"props.toolbar.title || props.toolbar.withActions || props.toolbar.withBack\"\n    [props]=\"props.toolbar\"\n    (onClick)=\"clickHandler($event)\"\n  ></val-toolbar>\n  <ng-content select=\"[extra]\"></ng-content>\n</ion-footer>\n", styles: [".background{background:var(--ion-background-color)}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i1$1.IonFooter, selector: "ion-footer", inputs: ["collapse", "mode", "translucent"] }, { kind: "component", type: ToolbarComponent, selector: "val-toolbar", inputs: ["props"], outputs: ["onClick"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: FooterComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'val-footer', template: "<ion-footer\n  [class.ion-no-border]=\"!props.bordered\"\n  [translucent]=\"props.translucent\"\n  [class.background]=\"props.toolbar.color === 'background'\"\n>\n  <val-toolbar\n    *ngIf=\"props.toolbar.title || props.toolbar.withActions || props.toolbar.withBack\"\n    [props]=\"props.toolbar\"\n    (onClick)=\"clickHandler($event)\"\n  ></val-toolbar>\n  <ng-content select=\"[extra]\"></ng-content>\n</ion-footer>\n", styles: [".background{background:var(--ion-background-color)}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { props: [{
+                type: Input
+            }], onClick: [{
+                type: Output
+            }] } });
+
+class HeaderComponent {
+    constructor() {
+        this.onClick = new EventEmitter();
+    }
+    ngOnInit() { }
+    clickHandler(token) {
+        this.onClick.emit(token);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: HeaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.0", type: HeaderComponent, selector: "val-header", inputs: { props: "props" }, outputs: { onClick: "onClick" }, ngImport: i0, template: "<ion-header [class.ion-no-border]=\"!props.bordered\" [translucent]=\"props.translucent\">\n  <val-toolbar [props]=\"props.toolbar\" (onClick)=\"clickHandler($event)\"></val-toolbar>\n</ion-header>\n", styles: [""], dependencies: [{ kind: "component", type: i1$1.IonHeader, selector: "ion-header", inputs: ["collapse", "mode", "translucent"] }, { kind: "component", type: ToolbarComponent, selector: "val-toolbar", inputs: ["props"], outputs: ["onClick"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: HeaderComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'val-header', template: "<ion-header [class.ion-no-border]=\"!props.bordered\" [translucent]=\"props.translucent\">\n  <val-toolbar [props]=\"props.toolbar\" (onClick)=\"clickHandler($event)\"></val-toolbar>\n</ion-header>\n" }]
+        }], ctorParameters: () => [], propDecorators: { props: [{
+                type: Input
+            }], onClick: [{
+                type: Output
+            }] } });
+
+const goToTop = (id) => {
+    const element = document.getElementById(id);
+    if (element) {
+        element.scrollIntoView({
+            block: 'start',
+            inline: 'nearest',
+            behavior: 'smooth',
+        });
+    }
+};
+const isAtEnd = (elementRef) => {
+    const formElement = elementRef.nativeElement;
+    const rect = formElement.getBoundingClientRect();
+    const windowHeight = window.innerHeight;
+    return rect.bottom <= windowHeight;
+};
+
+class FormComponent {
+    constructor(fb, elementRef) {
+        this.fb = fb;
+        this.elementRef = elementRef;
+        this.onSubmit = new EventEmitter();
+        this.onInvalid = new EventEmitter();
+        this.types = InputType;
+        this.formId = 'form-wrapper';
+    }
+    ngOnInit() {
+        const formControls = {};
+        this.props.sections.forEach((section) => {
+            section.fields.forEach((field) => {
+                formControls[field.name] = [undefined, field.validators || []];
+            });
+        });
+        this.form = this.fb.group(formControls);
+    }
+    async submitHandler(token) {
+        this.onSubmit.emit({ fields: this.form.value, token });
+    }
+    getControl(field) {
+        return this.Form.get(field);
+    }
+    get isAtEndOfForm() {
+        return isAtEnd(this.elementRef);
+    }
+    get Form() {
+        return this.form;
+    }
+    get actions() {
+        if (!this.form) {
+            return [];
+        }
+        if (this.form.valid) {
+            this.props.actions.state = ComponentStates.ENABLED;
+        }
+        return [this.props.actions];
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: FormComponent, deps: [{ token: i2.FormBuilder }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.0", type: FormComponent, selector: "val-form", inputs: { props: "props" }, outputs: { onSubmit: "onSubmit", onInvalid: "onInvalid" }, ngImport: i0, template: "<div class=\"container\">\n  <form [formGroup]=\"form\">\n    <val-display [content]=\"props.name\" color=\"dark\" size=\"large\"></val-display>\n    <div class=\"section\" *ngFor=\"let s of props.sections\">\n      <val-title [content]=\"s.name\" size=\"large\"></val-title>\n      <div class=\"input\" *ngFor=\"let f of s.fields\">\n        <val-title color=\"dark\" [content]=\"f.label\" size=\"small\"></val-title>\n        <ng-container *ngIf=\"f.type === types.TEXT\">\n          <val-text-input [control]=\"getControl(f.name)\" [metadata]=\"f\"></val-text-input>\n        </ng-container>\n        <ng-container *ngIf=\"f.type === types.CHECK\">\n          <val-check-input></val-check-input>\n        </ng-container>\n        <ng-container *ngIf=\"f.type === types.COMMENT\">\n          <val-comment-input [control]=\"getControl(f.name)\" [metadata]=\"f\"></val-comment-input>\n        </ng-container>\n        <ng-container *ngIf=\"f.type === types.DATE\">\n          <val-date-input [control]=\"getControl(f.name)\" [metadata]=\"f\"></val-date-input>\n        </ng-container>\n        <ng-container *ngIf=\"f.type === types.EMAIL\">\n          <val-email-input [control]=\"getControl(f.name)\" [metadata]=\"f\"></val-email-input>\n        </ng-container>\n        <ng-container *ngIf=\"f.type === types.FILE\">\n          <val-file-input [control]=\"getControl(f.name)\" [metadata]=\"f\"></val-file-input>\n        </ng-container>\n        <ng-container *ngIf=\"f.type === types.HOUR\">\n          <val-hour-input [control]=\"getControl(f.name)\" [metadata]=\"f\"></val-hour-input>\n        </ng-container>\n        <ng-container *ngIf=\"f.type === types.NUMBER\">\n          <val-number-input [control]=\"getControl(f.name)\" [metadata]=\"f\"></val-number-input>\n        </ng-container>\n        <ng-container *ngIf=\"f.type === types.PASSWORD\">\n          <val-password-input [control]=\"getControl(f.name)\" [metadata]=\"f\"></val-password-input>\n        </ng-container>\n        <ng-container *ngIf=\"f.type === types.PIN_CODE\">\n          <val-pin-input [control]=\"getControl(f.name)\" [metadata]=\"f\"></val-pin-input>\n        </ng-container>\n        <ng-container *ngIf=\"f.type === types.RADIO\">\n          <val-radio-input [control]=\"getControl(f.name)\" [metadata]=\"f\"></val-radio-input>\n        </ng-container>\n        <ng-container *ngIf=\"f.type === types.SELECT\">\n          <!-- <val-select-input></val-select-input> -->\n        </ng-container>\n        <val-hint [control]=\"getControl(f.name)\" [metadata]=\"f\"></val-hint>\n      </div>\n      <val-divider color=\"medium\" size=\"medium\" fill=\"solid\"></val-divider>\n    </div>\n    <val-button-group position=\"center\" [buttons]=\"actions\" (onClick)=\"submitHandler($event)\"></val-button-group>\n  </form>\n</div>\n", styles: [".section{margin-top:1rem}.input{margin:.5rem 0}@media (min-width: 768px){.input{margin:.75rem 0}}\n"], dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "component", type: DisplayComponent, selector: "val-display", inputs: ["size", "color", "content"] }, { kind: "component", type: TitleComponent, selector: "val-title", inputs: ["size", "color", "content"] }, { kind: "component", type: DividerComponent, selector: "val-divider", inputs: ["size", "color", "fill"] }, { kind: "component", type: ButtonGroupComponent, selector: "val-button-group", inputs: ["buttons", "position", "columned"], outputs: ["onClick"] }, { kind: "component", type: CheckInputComponent, selector: "val-check-input" }, { kind: "component", type: CommentInputComponent, selector: "val-comment-input", inputs: ["control", "metadata"] }, { kind: "component", type: DateInputComponent, selector: "val-date-input", inputs: ["control", "metadata"] }, { kind: "component", type: EmailInputComponent, selector: "val-email-input", inputs: ["control", "metadata"] }, { kind: "component", type: FileInputComponent, selector: "val-file-input", inputs: ["control", "metadata"] }, { kind: "component", type: HintComponent, selector: "val-hint", inputs: ["control", "metadata"] }, { kind: "component", type: HourInputComponent, selector: "val-hour-input", inputs: ["control", "metadata"] }, { kind: "component", type: NumberInputComponent, selector: "val-number-input", inputs: ["control", "metadata"] }, { kind: "component", type: PasswordInputComponent, selector: "val-password-input", inputs: ["control", "metadata"] }, { kind: "component", type: PinInputComponent, selector: "val-pin-input", inputs: ["control", "metadata"] }, { kind: "component", type: RadioInputComponent, selector: "val-radio-input", inputs: ["control", "metadata"] }, { kind: "component", type: TextInputComponent, selector: "val-text-input", inputs: ["control", "metadata"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: FormComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'val-form', template: "<div class=\"container\">\n  <form [formGroup]=\"form\">\n    <val-display [content]=\"props.name\" color=\"dark\" size=\"large\"></val-display>\n    <div class=\"section\" *ngFor=\"let s of props.sections\">\n      <val-title [content]=\"s.name\" size=\"large\"></val-title>\n      <div class=\"input\" *ngFor=\"let f of s.fields\">\n        <val-title color=\"dark\" [content]=\"f.label\" size=\"small\"></val-title>\n        <ng-container *ngIf=\"f.type === types.TEXT\">\n          <val-text-input [control]=\"getControl(f.name)\" [metadata]=\"f\"></val-text-input>\n        </ng-container>\n        <ng-container *ngIf=\"f.type === types.CHECK\">\n          <val-check-input></val-check-input>\n        </ng-container>\n        <ng-container *ngIf=\"f.type === types.COMMENT\">\n          <val-comment-input [control]=\"getControl(f.name)\" [metadata]=\"f\"></val-comment-input>\n        </ng-container>\n        <ng-container *ngIf=\"f.type === types.DATE\">\n          <val-date-input [control]=\"getControl(f.name)\" [metadata]=\"f\"></val-date-input>\n        </ng-container>\n        <ng-container *ngIf=\"f.type === types.EMAIL\">\n          <val-email-input [control]=\"getControl(f.name)\" [metadata]=\"f\"></val-email-input>\n        </ng-container>\n        <ng-container *ngIf=\"f.type === types.FILE\">\n          <val-file-input [control]=\"getControl(f.name)\" [metadata]=\"f\"></val-file-input>\n        </ng-container>\n        <ng-container *ngIf=\"f.type === types.HOUR\">\n          <val-hour-input [control]=\"getControl(f.name)\" [metadata]=\"f\"></val-hour-input>\n        </ng-container>\n        <ng-container *ngIf=\"f.type === types.NUMBER\">\n          <val-number-input [control]=\"getControl(f.name)\" [metadata]=\"f\"></val-number-input>\n        </ng-container>\n        <ng-container *ngIf=\"f.type === types.PASSWORD\">\n          <val-password-input [control]=\"getControl(f.name)\" [metadata]=\"f\"></val-password-input>\n        </ng-container>\n        <ng-container *ngIf=\"f.type === types.PIN_CODE\">\n          <val-pin-input [control]=\"getControl(f.name)\" [metadata]=\"f\"></val-pin-input>\n        </ng-container>\n        <ng-container *ngIf=\"f.type === types.RADIO\">\n          <val-radio-input [control]=\"getControl(f.name)\" [metadata]=\"f\"></val-radio-input>\n        </ng-container>\n        <ng-container *ngIf=\"f.type === types.SELECT\">\n          <!-- <val-select-input></val-select-input> -->\n        </ng-container>\n        <val-hint [control]=\"getControl(f.name)\" [metadata]=\"f\"></val-hint>\n      </div>\n      <val-divider color=\"medium\" size=\"medium\" fill=\"solid\"></val-divider>\n    </div>\n    <val-button-group position=\"center\" [buttons]=\"actions\" (onClick)=\"submitHandler($event)\"></val-button-group>\n  </form>\n</div>\n", styles: [".section{margin-top:1rem}.input{margin:.5rem 0}@media (min-width: 768px){.input{margin:.75rem 0}}\n"] }]
+        }], ctorParameters: () => [{ type: i2.FormBuilder }, { type: i0.ElementRef }], propDecorators: { props: [{
+                type: Input
+            }], onSubmit: [{
+                type: Output
+            }], onInvalid: [{
+                type: Output
+            }] } });
+
+class FormFooterComponent {
+    constructor() {
+        this.onSubmit = new EventEmitter();
+    }
+    ngOnInit() { }
+    async submitHandler(token) {
+        this.onSubmit.emit({ fields: this.form.value, token });
+    }
+    get actions() {
+        if (!this.form) {
+            return [];
+        }
+        if (this.form.valid) {
+            this.action.state = ComponentStates.ENABLED;
+        }
+        return [this.action];
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: FormFooterComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.0", type: FormFooterComponent, selector: "val-form-footer", inputs: { form: "form", action: "action" }, outputs: { onSubmit: "onSubmit" }, ngImport: i0, template: "<val-footer\n  [props]=\"{\n    bordered: false,\n    translucent: false,\n    toolbar: {\n      title: '',\n      actions: [],\n      color: 'background',\n      withBack: false,\n      withActions: false,\n    },\n  }\"\n>\n  <val-button-group extra position=\"center\" [buttons]=\"actions\" (onClick)=\"submitHandler($event)\"></val-button-group>\n</val-footer>\n", styles: [""], dependencies: [{ kind: "component", type: ButtonGroupComponent, selector: "val-button-group", inputs: ["buttons", "position", "columned"], outputs: ["onClick"] }, { kind: "component", type: FooterComponent, selector: "val-footer", inputs: ["props"], outputs: ["onClick"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: FormFooterComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'val-form-footer', template: "<val-footer\n  [props]=\"{\n    bordered: false,\n    translucent: false,\n    toolbar: {\n      title: '',\n      actions: [],\n      color: 'background',\n      withBack: false,\n      withActions: false,\n    },\n  }\"\n>\n  <val-button-group extra position=\"center\" [buttons]=\"actions\" (onClick)=\"submitHandler($event)\"></val-button-group>\n</val-footer>\n" }]
+        }], ctorParameters: () => [], propDecorators: { form: [{
+                type: Input
+            }], action: [{
+                type: Input
+            }], onSubmit: [{
+                type: Output
+            }] } });
+
+var MOTION;
+(function (MOTION) {
+    MOTION[MOTION["BACKWARD"] = 0] = "BACKWARD";
+    MOTION[MOTION["FORWARD"] = 1] = "FORWARD";
+    MOTION[MOTION["RETRY"] = 2] = "RETRY";
+})(MOTION || (MOTION = {}));
+
+class WizardComponent {
+    constructor() {
+        this.onClick = new EventEmitter();
+        this.wrapperId = 'wizard-wrapper';
+    }
+    ngOnInit() { }
+    working() {
+        this.props.state = ComponentStates.WORKING;
+        this.Current.buttons.map((x) => {
+            x.state = ComponentStates.DISABLED;
+        });
+    }
+    done() {
+        if (this.props.state === ComponentStates.ENABLED) {
+            return;
+        }
+        this.props.state = ComponentStates.ENABLED;
+        this.Current.buttons.map((x) => {
+            x.state = ComponentStates.ENABLED;
+        });
+    }
+    get Current() {
+        return this.props.steps[this.props.current];
+    }
+    setCurrent(newStep) {
+        if (newStep === this.props.current) {
+            return;
+        }
+        this.props.current = newStep;
+        goToTop(this.wrapperId);
+    }
+    setError(error) {
+        if (this.props.state === ComponentStates.ERROR) {
+            return;
+        }
+        this.props.error.titles.content.content.bellowTitle.text = error;
+        this.props.state = ComponentStates.ERROR;
+        goToTop(this.wrapperId);
+    }
+    reset() {
+        this.props.error.titles.content.content.bellowTitle.text = '';
+        this.done();
+    }
+    clickHandler(token) {
+        if (!token) {
+            return;
+        }
+        if (token.includes('retry')) {
+            this.reset();
+        }
+        this.onClick.emit({ current: this.props.current, motion: MOTION.RETRY });
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: WizardComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.0", type: WizardComponent, selector: "val-wizard", inputs: { props: "props" }, outputs: { onClick: "onClick" }, ngImport: i0, template: "<div [id]=\"wrapperId\" class=\"wrapper\">\n  <ng-container *ngIf=\"props.state !== 'ERROR'\">\n    <val-no-content [props]=\"Current.titles\"></val-no-content>\n    <div class=\"step\">\n      <div *ngIf=\"props.state === 'WORKING'\">\n        <val-content-loader color=\"dark\" size=\"large\" text=\"Por favor espere...\"></val-content-loader>\n      </div>\n      <ng-content select=\"[step]\"></ng-content>\n    </div>\n  </ng-container>\n  <ng-container *ngIf=\"props.state === 'ERROR'\">\n    <val-no-content [props]=\"props.error.titles\" (onClick)=\"clickHandler($event)\"></val-no-content>\n  </ng-container>\n</div>\n", styles: [".wrapper{height:auto;display:flex;flex-direction:column;justify-content:space-between;position:relative}.step{min-height:9.375rem;margin:16px 0;text-align:center}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: ContentLoaderComponent, selector: "val-content-loader", inputs: ["color", "size", "name", "text"] }, { kind: "component", type: NoContentComponent, selector: "val-no-content", inputs: ["props"], outputs: ["onClick"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: WizardComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'val-wizard', template: "<div [id]=\"wrapperId\" class=\"wrapper\">\n  <ng-container *ngIf=\"props.state !== 'ERROR'\">\n    <val-no-content [props]=\"Current.titles\"></val-no-content>\n    <div class=\"step\">\n      <div *ngIf=\"props.state === 'WORKING'\">\n        <val-content-loader color=\"dark\" size=\"large\" text=\"Por favor espere...\"></val-content-loader>\n      </div>\n      <ng-content select=\"[step]\"></ng-content>\n    </div>\n  </ng-container>\n  <ng-container *ngIf=\"props.state === 'ERROR'\">\n    <val-no-content [props]=\"props.error.titles\" (onClick)=\"clickHandler($event)\"></val-no-content>\n  </ng-container>\n</div>\n", styles: [".wrapper{height:auto;display:flex;flex-direction:column;justify-content:space-between;position:relative}.step{min-height:9.375rem;margin:16px 0;text-align:center}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { props: [{
+                type: Input
+            }], onClick: [{
+                type: Output
+            }] } });
+
+class WizardFooterComponent {
+    constructor() {
+        this.onClick = new EventEmitter();
+        this.wrapperId = 'wizard-wrapper';
+    }
+    ngOnInit() { }
+    clickHandler(token) {
+        if (!token) {
+            return;
+        }
+        if (token.includes('right')) {
+            this.tryToStep(MOTION.FORWARD);
+        }
+        if (token.includes('left')) {
+            this.tryToStep(MOTION.BACKWARD);
+        }
+    }
+    get Current() {
+        return this.props.steps[this.props.current];
+    }
+    get Progress() {
+        if (this.props.steps && this.props.current) {
+            return this.props.current / Object.keys(this.props.steps).length;
+        }
+        return 0;
+    }
+    get actions() {
+        if (this.props.state === ComponentStates.ERROR && this.Current.buttons.length > 1) {
+            this.Current.buttons[1].state = ComponentStates.DISABLED;
+        }
+        if (this.props.current === 1 && this.Current.buttons.length > 1) {
+            return [this.Current.buttons[1]];
+        }
+        return this.Current.buttons;
+    }
+    tryToStep(motion) {
+        this.onClick.emit({ current: this.props.current, motion });
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: WizardFooterComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.0", type: WizardFooterComponent, selector: "val-wizard-footer", inputs: { props: "props" }, outputs: { onClick: "onClick" }, ngImport: i0, template: "<val-footer\n  [props]=\"{\nbordered: false,\ntranslucent: false,\ntoolbar: {\n  title: '',\n  actions: [],\n  color: 'background',\n  withBack: false,\n  withActions: false,\n  },\n}\"\n>\n  <val-progress-bar extra [progress]=\"Progress\" size=\"medium\"></val-progress-bar>\n  <val-button-group extra [buttons]=\"actions\" position=\"spaced\" (onClick)=\"clickHandler($event)\"></val-button-group>\n</val-footer>\n", styles: [""], dependencies: [{ kind: "component", type: ButtonGroupComponent, selector: "val-button-group", inputs: ["buttons", "position", "columned"], outputs: ["onClick"] }, { kind: "component", type: ProgressBarComponent, selector: "val-progress-bar", inputs: ["progress", "size", "color", "buffer", "type", "rounded"] }, { kind: "component", type: FooterComponent, selector: "val-footer", inputs: ["props"], outputs: ["onClick"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: WizardFooterComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'val-wizard-footer', template: "<val-footer\n  [props]=\"{\nbordered: false,\ntranslucent: false,\ntoolbar: {\n  title: '',\n  actions: [],\n  color: 'background',\n  withBack: false,\n  withActions: false,\n  },\n}\"\n>\n  <val-progress-bar extra [progress]=\"Progress\" size=\"medium\"></val-progress-bar>\n  <val-button-group extra [buttons]=\"actions\" position=\"spaced\" (onClick)=\"clickHandler($event)\"></val-button-group>\n</val-footer>\n" }]
+        }], ctorParameters: () => [], propDecorators: { props: [{
+                type: Input
+            }], onClick: [{
+                type: Output
+            }] } });
+
 class TextContent {
     constructor(text) {
         this.text = text;
@@ -933,7 +1460,26 @@ class ValtechComponentsModule {
             HrefComponent,
             ProgressBarComponent,
             LinksCakeComponent,
-            ProgressStatusComponent], imports: [CommonModule, HttpClientModule, IonicModule], exports: [ButtonComponent,
+            ProgressStatusComponent,
+            CheckInputComponent,
+            CommentInputComponent,
+            DateInputComponent,
+            EmailInputComponent,
+            FileInputComponent,
+            HintComponent,
+            HourInputComponent,
+            NumberInputComponent,
+            PasswordInputComponent,
+            PinInputComponent,
+            PrompterComponent,
+            RadioInputComponent,
+            TextInputComponent,
+            FooterComponent,
+            FormComponent,
+            FormFooterComponent,
+            HeaderComponent,
+            WizardComponent,
+            WizardFooterComponent], imports: [CommonModule, HttpClientModule, IonicModule, ReactiveFormsModule, NgOtpInputModule], exports: [ButtonComponent,
             BoxComponent,
             DisplayComponent,
             TextComponent,
@@ -955,12 +1501,32 @@ class ValtechComponentsModule {
             HrefComponent,
             ProgressBarComponent,
             LinksCakeComponent,
-            ProgressStatusComponent] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: ValtechComponentsModule, providers: [DownloadService], imports: [CommonModule, HttpClientModule, IonicModule] }); }
+            ProgressStatusComponent,
+            CheckInputComponent,
+            CommentInputComponent,
+            DateInputComponent,
+            EmailInputComponent,
+            FileInputComponent,
+            HintComponent,
+            HourInputComponent,
+            NumberInputComponent,
+            PasswordInputComponent,
+            PinInputComponent,
+            PrompterComponent,
+            RadioInputComponent,
+            TextInputComponent,
+            FooterComponent,
+            FormComponent,
+            FormFooterComponent,
+            HeaderComponent,
+            WizardComponent,
+            WizardFooterComponent] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: ValtechComponentsModule, providers: [DownloadService], imports: [CommonModule, HttpClientModule, IonicModule, ReactiveFormsModule, NgOtpInputModule] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: ValtechComponentsModule, decorators: [{
             type: NgModule,
             args: [{
+                    imports: [CommonModule, HttpClientModule, IonicModule, ReactiveFormsModule, NgOtpInputModule],
                     declarations: [
                         ButtonComponent,
                         BoxComponent,
@@ -985,8 +1551,26 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.0", ngImpor
                         ProgressBarComponent,
                         LinksCakeComponent,
                         ProgressStatusComponent,
+                        CheckInputComponent,
+                        CommentInputComponent,
+                        DateInputComponent,
+                        EmailInputComponent,
+                        FileInputComponent,
+                        HintComponent,
+                        HourInputComponent,
+                        NumberInputComponent,
+                        PasswordInputComponent,
+                        PinInputComponent,
+                        PrompterComponent,
+                        RadioInputComponent,
+                        TextInputComponent,
+                        FooterComponent,
+                        FormComponent,
+                        FormFooterComponent,
+                        HeaderComponent,
+                        WizardComponent,
+                        WizardFooterComponent,
                     ],
-                    imports: [CommonModule, HttpClientModule, IonicModule],
                     exports: [
                         ButtonComponent,
                         BoxComponent,
@@ -1011,6 +1595,25 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.0", ngImpor
                         ProgressBarComponent,
                         LinksCakeComponent,
                         ProgressStatusComponent,
+                        CheckInputComponent,
+                        CommentInputComponent,
+                        DateInputComponent,
+                        EmailInputComponent,
+                        FileInputComponent,
+                        HintComponent,
+                        HourInputComponent,
+                        NumberInputComponent,
+                        PasswordInputComponent,
+                        PinInputComponent,
+                        PrompterComponent,
+                        RadioInputComponent,
+                        TextInputComponent,
+                        FooterComponent,
+                        FormComponent,
+                        FormFooterComponent,
+                        HeaderComponent,
+                        WizardComponent,
+                        WizardFooterComponent,
                     ],
                     providers: [DownloadService],
                 }]
@@ -1148,5 +1751,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.0", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { ActionType, AlertBoxComponent, AvatarComponent, BannerComponent, BaseDefault, BoxComponent, ButtonComponent, ButtonGroupComponent, ClearDefault, ClearDefaultBlock, ClearDefaultFull, ClearDefaultRound, ClearDefaultRoundBlock, ClearDefaultRoundFull, ComponentStates, ContentLoaderComponent, DisplayComponent, DividerComponent, DownloadService, HrefComponent, Icon, IconComponent, ImageComponent, LangOption, LangService, LinkComponent, LinksCakeComponent, LocalStorageService, NoContentComponent, NotesBoxComponent, 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, ProgressBarComponent, ProgressStatusComponent, SearchbarComponent, SecondarySolidBlockButton, SecondarySolidBlockHrefButton, SecondarySolidBlockIconButton, SecondarySolidBlockIconHrefButton, SecondarySolidDefaultRoundButton, SecondarySolidDefaultRoundHrefButton, SecondarySolidDefaultRoundIconButton, SecondarySolidDefaultRoundIconHrefButton, SecondarySolidFullButton, SecondarySolidFullHrefButton, SecondarySolidFullIconButton, SecondarySolidFullIconHrefButton, SecondarySolidLargeRoundButton, SecondarySolidLargeRoundHrefButton, SecondarySolidLargeRoundIconButton, SecondarySolidLargeRoundIconHrefButton, SecondarySolidSmallRoundButton, SecondarySolidSmallRoundHrefButton, SecondarySolidSmallRoundIconButton, SecondarySolidSmallRoundIconHrefButton, SolidBlockButton, SolidDefault, SolidDefaultBlock, SolidDefaultButton, SolidDefaultFull, SolidDefaultRound, SolidDefaultRoundBlock, SolidDefaultRoundButton, SolidDefaultRoundFull, SolidFullButton, SolidLargeButton, SolidLargeRoundButton, SolidSmallButton, SolidSmallRoundButton, TextComponent, TextContent, ThemeOption, ThemeService, TitleBlockComponent, TitleComponent, ToolbarActionType, ToolbarComponent, ValtechComponentsModule, ValtechConfigService };
+export { ActionType, AlertBoxComponent, AvatarComponent, BannerComponent, BaseDefault, BoxComponent, ButtonComponent, ButtonGroupComponent, CheckInputComponent, ClearDefault, ClearDefaultBlock, ClearDefaultFull, ClearDefaultRound, ClearDefaultRoundBlock, ClearDefaultRoundFull, CommentInputComponent, ComponentStates, ContentLoaderComponent, DateInputComponent, DisplayComponent, DividerComponent, DownloadService, EmailInputComponent, FileInputComponent, FooterComponent, FormComponent, FormFooterComponent, HeaderComponent, HintComponent, HourInputComponent, HrefComponent, Icon, IconComponent, ImageComponent, InputType, LangOption, LangService, LinkComponent, LinksCakeComponent, LocalStorageService, NoContentComponent, NotesBoxComponent, NumberInputComponent, OutlineDefault, OutlineDefaultBlock, OutlineDefaultFull, OutlineDefaultRound, OutlineDefaultRoundBlock, OutlineDefaultRoundFull, PasswordInputComponent, PinInputComponent, PrimarySolidBlockButton, PrimarySolidBlockHrefButton, PrimarySolidBlockIconButton, PrimarySolidBlockIconHrefButton, PrimarySolidDefaultRoundButton, PrimarySolidDefaultRoundHrefButton, PrimarySolidDefaultRoundIconButton, PrimarySolidDefaultRoundIconHrefButton, PrimarySolidFullButton, PrimarySolidFullHrefButton, PrimarySolidFullIconButton, PrimarySolidFullIconHrefButton, PrimarySolidLargeRoundButton, PrimarySolidLargeRoundHrefButton, PrimarySolidLargeRoundIconButton, PrimarySolidLargeRoundIconHrefButton, PrimarySolidSmallRoundButton, PrimarySolidSmallRoundHrefButton, PrimarySolidSmallRoundIconButton, PrimarySolidSmallRoundIconHrefButton, ProgressBarComponent, ProgressStatusComponent, PrompterComponent, RadioInputComponent, SearchbarComponent, SecondarySolidBlockButton, SecondarySolidBlockHrefButton, SecondarySolidBlockIconButton, SecondarySolidBlockIconHrefButton, SecondarySolidDefaultRoundButton, SecondarySolidDefaultRoundHrefButton, SecondarySolidDefaultRoundIconButton, SecondarySolidDefaultRoundIconHrefButton, SecondarySolidFullButton, SecondarySolidFullHrefButton, SecondarySolidFullIconButton, SecondarySolidFullIconHrefButton, SecondarySolidLargeRoundButton, SecondarySolidLargeRoundHrefButton, SecondarySolidLargeRoundIconButton, SecondarySolidLargeRoundIconHrefButton, SecondarySolidSmallRoundButton, SecondarySolidSmallRoundHrefButton, SecondarySolidSmallRoundIconButton, SecondarySolidSmallRoundIconHrefButton, SolidBlockButton, SolidDefault, SolidDefaultBlock, SolidDefaultButton, SolidDefaultFull, SolidDefaultRound, SolidDefaultRoundBlock, SolidDefaultRoundButton, SolidDefaultRoundFull, SolidFullButton, SolidLargeButton, SolidLargeRoundButton, SolidSmallButton, SolidSmallRoundButton, TextComponent, TextContent, TextInputComponent, ThemeOption, ThemeService, TitleBlockComponent, TitleComponent, ToolbarActionType, ToolbarComponent, ValtechComponentsModule, ValtechConfigService, WizardComponent, WizardFooterComponent, goToTop, isAtEnd };
 //# sourceMappingURL=valtech-components.mjs.map