valtech-components 2.0.95 → 2.0.97

package/fesm2022/valtech-components.mjs

@@ -1,6 +1,6 @@
 import * as i0 from '@angular/core';
 import { EventEmitter, Component, Input, Output, Injectable, ViewChild, inject, InjectionToken, Inject } from '@angular/core';
-import { IonAvatar, IonCard, IonIcon, IonButton, IonSpinner, IonText, IonProgressBar, IonCardContent, IonCardHeader, IonCardTitle, IonCardSubtitle, IonCheckbox, IonButtons, IonTextarea, IonDatetime, IonDatetimeButton, IonModal, IonInput, IonRadioGroup, IonRadio, IonSearchbar, IonToolbar, IonTitle, IonFooter, IonHeader, IonList, IonListHeader, IonLabel, IonNote, IonItem, IonContent } from '@ionic/angular/standalone';
+import { IonAvatar, IonCard, IonIcon, IonButton, IonSpinner, IonText, IonProgressBar, IonCardContent, IonCardHeader, IonCardTitle, IonCardSubtitle, IonCheckbox, IonButtons, IonTextarea, IonDatetime, IonDatetimeButton, IonModal, IonInput, IonRadioGroup, IonRadio, IonSelect, IonSelectOption, IonSearchbar, IonToolbar, IonTitle, IonFooter, IonHeader, IonList, IonListHeader, IonLabel, IonNote, IonItem, IonContent } from '@ionic/angular/standalone';
 import * as i1 from '@angular/common';
 import { CommonModule, NgStyle, NgIf, NgFor, NgClass } from '@angular/common';
 import { addIcons } from 'ionicons';
@@ -1314,6 +1314,85 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
                 type: Input
             }] } });
 
+function resolveColor(color) {
+    // Si el color empieza con "--", se asume que es una variable CSS válida
+    if (color.startsWith('--')) {
+        return `var(${color})`;
+    }
+    // Lista de colores predefinidos de Ionic
+    const ionicColors = [
+        'primary',
+        'secondary',
+        'tertiary',
+        'success',
+        'warning',
+        'danger',
+        'light',
+        'medium',
+        'dark',
+    ];
+    // Verificar si el color es un color de Ionic
+    if (ionicColors.includes(color)) {
+        return `var(--ion-color-${color})`;
+    }
+    // Si no es una variable CSS ni un color de Ionic, devolver el color tal cual
+    return color;
+}
+
+class ExpandableTextComponent {
+    constructor() {
+        this.expanded = false;
+        this.defaultColor = 'primary';
+    }
+    get truncatedText() {
+        const maxLength = this.props.limit || 100; // Longitud por defecto
+        return this.props.content?.length > maxLength ? this.props.content.slice(0, maxLength) + '...' : this.props.content;
+    }
+    get isTruncated() {
+        return this.props.content?.length > (this.props.limit || 100);
+    }
+    toggleExpand() {
+        this.expanded = !this.expanded;
+    }
+    color() {
+        return resolveColor(this.props.color || this.defaultColor);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: ExpandableTextComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.12", type: ExpandableTextComponent, isStandalone: true, selector: "val-expandable-text", inputs: { props: "props" }, ngImport: i0, template: `
+    <div class="description-container" [class.expanded]="expanded" [class.has-gradient]="!expanded && isTruncated">
+      <ion-text>
+        <p class="description">
+          <span class="content">{{ expanded ? props.content : truncatedText }}</span>
+          @if (!expanded && isTruncated) {
+            <span class="see-more" [style.color]="this.color()" (click)="toggleExpand()">
+              {{ props.expandText || 'ver más' }}
+            </span>
+          }
+        </p>
+      </ion-text>
+    </div>
+  `, isInline: true, styles: [".description-container{position:relative;overflow:hidden;max-height:10rem;transition:max-height .3s ease-in-out}.description-container.expanded{max-height:none}.description{position:relative;overflow:hidden;text-overflow:ellipsis}.description-container:not(.expanded) .description:after{content:\"\";position:absolute;bottom:0;left:0;right:0;height:3.5rem;background:linear-gradient(to top,var(--ion-background-color),rgba(255,255,255,0));pointer-events:none}.description-container:not(.has-gradient) .description:after{background:transparent}.see-more{position:relative;font-weight:700;cursor:pointer;z-index:1;margin-left:.3rem}\n"], dependencies: [{ kind: "component", type: IonText, selector: "ion-text", inputs: ["color", "mode"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: ExpandableTextComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'val-expandable-text', standalone: true, imports: [IonText], template: `
+    <div class="description-container" [class.expanded]="expanded" [class.has-gradient]="!expanded && isTruncated">
+      <ion-text>
+        <p class="description">
+          <span class="content">{{ expanded ? props.content : truncatedText }}</span>
+          @if (!expanded && isTruncated) {
+            <span class="see-more" [style.color]="this.color()" (click)="toggleExpand()">
+              {{ props.expandText || 'ver más' }}
+            </span>
+          }
+        </p>
+      </ion-text>
+    </div>
+  `, styles: [".description-container{position:relative;overflow:hidden;max-height:10rem;transition:max-height .3s ease-in-out}.description-container.expanded{max-height:none}.description{position:relative;overflow:hidden;text-overflow:ellipsis}.description-container:not(.expanded) .description:after{content:\"\";position:absolute;bottom:0;left:0;right:0;height:3.5rem;background:linear-gradient(to top,var(--ion-background-color),rgba(255,255,255,0));pointer-events:none}.description-container:not(.has-gradient) .description:after{background:transparent}.see-more{position:relative;font-weight:700;cursor:pointer;z-index:1;margin-left:.3rem}\n"] }]
+        }], propDecorators: { props: [{
+                type: Input
+            }] } });
+
 class FileInputComponent {
     constructor() {
         this.contrastButton = {
@@ -1977,6 +2056,57 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
                 type: Input
             }] } });
 
+class SearchSelectorComponent {
+    constructor() {
+        this.customModalOptions = {
+            header: 'Seleccione',
+            breakpoints: [0, 0.6],
+            initialBreakpoint: 0.6,
+        };
+    }
+    ngOnInit() {
+        this.customModalOptions.header = this.props.label;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: SearchSelectorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: SearchSelectorComponent, isStandalone: true, selector: "val-search-selector-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>
+    <ion-select
+      [label]="props.label"
+      [interfaceOptions]="customModalOptions"
+      interface="modal"
+      [placeholder]="[props.placeholder]"
+    >
+      <ion-select-option *ngFor="let o of props.options" [value]="o.id">{{ o.name }}</ion-select-option>
+    </ion-select>
+  `, 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"] }, { kind: "component", type: IonSelect, selector: "ion-select", inputs: ["cancelText", "color", "compareWith", "disabled", "expandedIcon", "fill", "interface", "interfaceOptions", "justify", "label", "labelPlacement", "mode", "multiple", "name", "okText", "placeholder", "selectedText", "shape", "toggleIcon", "value"] }, { kind: "component", type: IonSelectOption, selector: "ion-select-option", inputs: ["disabled", "value"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: SearchSelectorComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'val-search-selector-input', standalone: true, imports: [NgFor, ReactiveFormsModule, IonRadioGroup, IonRadio, IonSelect, IonSelectOption], 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>
+    <ion-select
+      [label]="props.label"
+      [interfaceOptions]="customModalOptions"
+      interface="modal"
+      [placeholder]="[props.placeholder]"
+    >
+      <ion-select-option *ngFor="let o of props.options" [value]="o.id">{{ o.name }}</ion-select-option>
+    </ion-select>
+  ` }]
+        }], ctorParameters: () => [], propDecorators: { props: [{
+                type: Input
+            }] } });
+
 class SearchbarComponent {
     constructor() {
         this.focusEvent = new EventEmitter();
@@ -2048,85 +2178,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
                 type: Input
             }] } });
 
-function resolveColor(color) {
-    // Si el color empieza con "--", se asume que es una variable CSS válida
-    if (color.startsWith('--')) {
-        return `var(${color})`;
-    }
-    // Lista de colores predefinidos de Ionic
-    const ionicColors = [
-        'primary',
-        'secondary',
-        'tertiary',
-        'success',
-        'warning',
-        'danger',
-        'light',
-        'medium',
-        'dark',
-    ];
-    // Verificar si el color es un color de Ionic
-    if (ionicColors.includes(color)) {
-        return `var(--ion-color-${color})`;
-    }
-    // Si no es una variable CSS ni un color de Ionic, devolver el color tal cual
-    return color;
-}
-
-class ExpandableTextComponent {
-    constructor() {
-        this.expanded = false;
-        this.defaultColor = 'primary';
-    }
-    get truncatedText() {
-        const maxLength = this.props.limit || 100; // Longitud por defecto
-        return this.props.content?.length > maxLength ? this.props.content.slice(0, maxLength) + '...' : this.props.content;
-    }
-    get isTruncated() {
-        return this.props.content?.length > (this.props.limit || 100);
-    }
-    toggleExpand() {
-        this.expanded = !this.expanded;
-    }
-    color() {
-        return resolveColor(this.props.color || this.defaultColor);
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: ExpandableTextComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.12", type: ExpandableTextComponent, isStandalone: true, selector: "val-expandable-text", inputs: { props: "props" }, ngImport: i0, template: `
-    <div class="description-container" [class.expanded]="expanded" [class.has-gradient]="!expanded && isTruncated">
-      <ion-text>
-        <p class="description">
-          <span class="content">{{ expanded ? props.content : truncatedText }}</span>
-          @if (!expanded && isTruncated) {
-            <span class="see-more" [style.color]="this.color()" (click)="toggleExpand()">
-              {{ props.expandText || 'ver más' }}
-            </span>
-          }
-        </p>
-      </ion-text>
-    </div>
-  `, isInline: true, styles: [".description-container{position:relative;overflow:hidden;max-height:10rem;transition:max-height .3s ease-in-out}.description-container.expanded{max-height:none}.description{position:relative;overflow:hidden;text-overflow:ellipsis}.description-container:not(.expanded) .description:after{content:\"\";position:absolute;bottom:0;left:0;right:0;height:3.5rem;background:linear-gradient(to top,var(--ion-background-color),rgba(255,255,255,0));pointer-events:none}.description-container:not(.has-gradient) .description:after{background:transparent}.see-more{position:relative;font-weight:700;cursor:pointer;z-index:1;margin-left:.3rem}\n"], dependencies: [{ kind: "component", type: IonText, selector: "ion-text", inputs: ["color", "mode"] }] }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: ExpandableTextComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'val-expandable-text', standalone: true, imports: [IonText], template: `
-    <div class="description-container" [class.expanded]="expanded" [class.has-gradient]="!expanded && isTruncated">
-      <ion-text>
-        <p class="description">
-          <span class="content">{{ expanded ? props.content : truncatedText }}</span>
-          @if (!expanded && isTruncated) {
-            <span class="see-more" [style.color]="this.color()" (click)="toggleExpand()">
-              {{ props.expandText || 'ver más' }}
-            </span>
-          }
-        </p>
-      </ion-text>
-    </div>
-  `, styles: [".description-container{position:relative;overflow:hidden;max-height:10rem;transition:max-height .3s ease-in-out}.description-container.expanded{max-height:none}.description{position:relative;overflow:hidden;text-overflow:ellipsis}.description-container:not(.expanded) .description:after{content:\"\";position:absolute;bottom:0;left:0;right:0;height:3.5rem;background:linear-gradient(to top,var(--ion-background-color),rgba(255,255,255,0));pointer-events:none}.description-container:not(.has-gradient) .description:after{background:transparent}.see-more{position:relative;font-weight:700;cursor:pointer;z-index:1;margin-left:.3rem}\n"] }]
-        }], propDecorators: { props: [{
-                type: Input
-            }] } });
-
 class BannerComponent {
     constructor() {
         this.onClick = new EventEmitter();
@@ -2381,11 +2432,11 @@ class FooterComponent {
       ></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"] }] }); }
+  `, isInline: true, styles: [".background{background:var(--ion-background-color)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { 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: `
+            args: [{ selector: 'val-footer', standalone: true, imports: [CommonModule, IonFooter, ToolbarComponent], template: `
     <ion-footer
       [class.ion-no-border]="!props.bordered"
       [translucent]="props.translucent"
@@ -2603,7 +2654,7 @@ class FormComponent {
               <val-radio-input [props]="getFieldProp(f)"></val-radio-input>
             </ng-container>
             <ng-container *ngIf="f.type === types.SELECT">
-              <!-- <val-select-input></val-select-input> -->
+              <val-search-selector-input [props]="getFieldProp(f)"></val-search-selector-input>
             </ng-container>
             <val-hint [props]="getFieldProp(f)"></val-hint>
           </div>
@@ -2615,7 +2666,7 @@ class FormComponent {
         ></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"] }] }); }
+  `, 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"] }, { kind: "component", type: SearchSelectorComponent, selector: "val-search-selector-input", inputs: ["props"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: FormComponent, decorators: [{
             type: Component,
@@ -2638,6 +2689,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
                         RadioInputComponent,
                         PasswordInputComponent,
                         PinInputComponent,
+                        SearchSelectorComponent,
                     ], template: `
     <div class="container">
       <form [formGroup]="form">
@@ -2687,7 +2739,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
               <val-radio-input [props]="getFieldProp(f)"></val-radio-input>
             </ng-container>
             <ng-container *ngIf="f.type === types.SELECT">
-              <!-- <val-select-input></val-select-input> -->
+              <val-search-selector-input [props]="getFieldProp(f)"></val-search-selector-input>
             </ng-container>
             <val-hint [props]="getFieldProp(f)"></val-hint>
           </div>
@@ -2736,304 +2788,49 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
                 type: Output
             }] } });
 
-class NoContentComponent {
-    constructor() {
+class ItemListComponent {
+    constructor(icon) {
+        this.states = ComponentStates;
+        this.defaultColor = 'primary';
         this.onClick = new EventEmitter();
+        this.onActionClick = new EventEmitter();
     }
     ngOnInit() { }
-    onClickHandler(token) {
+    clickHandler(token) {
         this.onClick.emit(token);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: NoContentComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.12", type: NoContentComponent, isStandalone: true, selector: "val-no-content", inputs: { props: "props" }, outputs: { onClick: "onClick" }, ngImport: i0, template: `
-    @if (props.topContent) {
-      <div>
-        <val-banner [props]="props.topContent" (onClick)="onClickHandler($event)"></val-banner>
-      </div>
+    onActionClickHandler(token) {
+        this.onActionClick.emit(token);
     }
-    <val-image class="image-container" [props]="props.image"></val-image>
-    <div>
-      <val-banner [props]="props.bottomContent" (onClick)="onClickHandler($event)"></val-banner>
-    </div>
-  `, isInline: true, styles: [".image-container{display:flex;justify-content:center;margin-bottom:1rem}val-image .image{margin:0 auto}\n"], dependencies: [{ kind: "component", type: ImageComponent, selector: "val-image", inputs: ["props"] }, { kind: "component", type: BannerComponent, selector: "val-banner", inputs: ["props"], outputs: ["onClick", "onClose"] }] }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: NoContentComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'val-no-content', standalone: true, imports: [ImageComponent, BannerComponent], template: `
-    @if (props.topContent) {
-      <div>
-        <val-banner [props]="props.topContent" (onClick)="onClickHandler($event)"></val-banner>
-      </div>
+    color() {
+        return resolveColor(this.props.color || this.defaultColor);
     }
-    <val-image class="image-container" [props]="props.image"></val-image>
-    <div>
-      <val-banner [props]="props.bottomContent" (onClick)="onClickHandler($event)"></val-banner>
-    </div>
-  `, styles: [".image-container{display:flex;justify-content:center;margin-bottom:1rem}val-image .image{margin:0 auto}\n"] }]
-        }], ctorParameters: () => [], propDecorators: { props: [{
-                type: Input
-            }], onClick: [{
-                type: Output
-            }] } });
-
-var MOTION;
-(function (MOTION) {
-    MOTION[MOTION["BACKWARD"] = 0] = "BACKWARD";
-    MOTION[MOTION["FORWARD"] = 1] = "FORWARD";
-    MOTION[MOTION["RETRY"] = 2] = "RETRY";
-})(MOTION || (MOTION = {}));
-
-class WizardFooterComponent {
-    constructor() {
-        this.onClick = new EventEmitter();
-        this.wrapperId = 'wizard-wrapper';
-    }
-    ngOnInit() { }
-    clickHandler(token) {
-        if (!token) {
-            return;
-        }
-        if (token.includes('right')) {
-            this.tryToStep(MOTION.FORWARD);
-        }
-        if (token.includes('left')) {
-            this.tryToStep(MOTION.BACKWARD);
-        }
-    }
-    get Current() {
-        return this.props.steps[this.props.current];
-    }
-    get Progress() {
-        if (this.props.steps && this.props.current) {
-            return this.props.current / Object.keys(this.props.steps).length;
-        }
-        return 0;
-    }
-    get actions() {
-        if (this.props.state === ComponentStates.ERROR && this.Current.buttons.length > 1) {
-            this.Current.buttons[1].state = ComponentStates.DISABLED;
-        }
-        if (this.props.current === 1 && this.Current.buttons.length > 1) {
-            return [this.Current.buttons[1]];
-        }
-        return this.Current.buttons;
-    }
-    tryToStep(motion) {
-        this.onClick.emit({ current: this.props.current, motion });
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: WizardFooterComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: WizardFooterComponent, isStandalone: true, selector: "val-wizard-footer", inputs: { props: "props" }, outputs: { onClick: "onClick" }, ngImport: i0, template: `
-    <val-footer
-      [props]="{
-        bordered: false,
-        translucent: false,
-        toolbar: {
-          title: '',
-          actions: [],
-          color: 'background',
-          withBack: false,
-          withActions: false,
-        },
-      }"
-    >
-      <val-progress-bar
-        extra
-        [props]="{ progress: Progress, color: '', type: 'determinate', buffer: 1, size: 'small', rounded: false }"
-      ></val-progress-bar>
-      <val-button-group
-        extra
-        [props]="{ buttons: actions, position: 'left', columned: false }"
-        position="spaced"
-        (onClick)="clickHandler($event)"
-      ></val-button-group>
-    </val-footer>
-  `, isInline: true, styles: [""], dependencies: [{ kind: "component", type: FooterComponent, selector: "val-footer", inputs: ["props"], outputs: ["onClick"] }, { kind: "component", type: ProgressBarComponent, selector: "val-progress-bar", inputs: ["props"] }, { kind: "component", type: ButtonGroupComponent, selector: "val-button-group", inputs: ["props"], outputs: ["onClick"] }] }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: WizardFooterComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'val-wizard-footer', standalone: true, imports: [FooterComponent, ProgressBarComponent, ButtonGroupComponent], template: `
-    <val-footer
-      [props]="{
-        bordered: false,
-        translucent: false,
-        toolbar: {
-          title: '',
-          actions: [],
-          color: 'background',
-          withBack: false,
-          withActions: false,
-        },
-      }"
-    >
-      <val-progress-bar
-        extra
-        [props]="{ progress: Progress, color: '', type: 'determinate', buffer: 1, size: 'small', rounded: false }"
-      ></val-progress-bar>
-      <val-button-group
-        extra
-        [props]="{ buttons: actions, position: 'left', columned: false }"
-        position="spaced"
-        (onClick)="clickHandler($event)"
-      ></val-button-group>
-    </val-footer>
-  ` }]
-        }], ctorParameters: () => [], propDecorators: { props: [{
-                type: Input
-            }], onClick: [{
-                type: Output
-            }] } });
-
-class WizardComponent {
-    constructor() {
-        this.onClick = new EventEmitter();
-        this.wrapperId = 'wizard-wrapper';
-    }
-    ngOnInit() { }
-    working() {
-        this.props.state = ComponentStates.WORKING;
-        this.Current.buttons.map(x => {
-            x.state = ComponentStates.DISABLED;
-        });
-    }
-    done() {
-        if (this.props.state === ComponentStates.ENABLED) {
-            return;
-        }
-        this.props.state = ComponentStates.ENABLED;
-        this.Current.buttons.map(x => {
-            x.state = ComponentStates.ENABLED;
-        });
-    }
-    get Current() {
-        return this.props.steps[this.props.current];
-    }
-    setCurrent(newStep) {
-        if (newStep === this.props.current) {
-            return;
-        }
-        this.props.current = newStep;
-        goToTop(this.wrapperId);
-    }
-    setError(error) {
-        if (this.props.state === ComponentStates.ERROR) {
-            return;
-        }
-        this.props.error.titles.bottomContent.content.bellowTitle.text = error;
-        this.props.state = ComponentStates.ERROR;
-        goToTop(this.wrapperId);
-    }
-    reset() {
-        this.props.error.titles.bottomContent.content.bellowTitle.text = '';
-        this.done();
-    }
-    clickHandler(token) {
-        if (!token) {
-            return;
-        }
-        if (token.includes('retry')) {
-            this.reset();
-        }
-        this.onClick.emit({ current: this.props.current, motion: MOTION.RETRY });
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: WizardComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: WizardComponent, isStandalone: true, selector: "val-wizard", inputs: { props: "props" }, outputs: { onClick: "onClick" }, ngImport: i0, template: `
-    <div [id]="wrapperId" class="wrapper">
-      <ng-container *ngIf="props.state !== 'ERROR'">
-        <val-no-content [props]="Current.titles"></val-no-content>
-        <div class="step">
-          <div *ngIf="props.state === 'WORKING'">
-            <val-content-loader
-              [props]="{
-                name: 'circular',
-                color: 'primary',
-                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
-              [props]="{
-                name: 'circular',
-                color: 'primary',
-                size: 'large',
-                text: 'Por favor espere...',
-              }"
-            ></val-content-loader>
-          </div>
-          <ng-content select="[step]"></ng-content>
-        </div>
-      </ng-container>
-      <ng-container *ngIf="props.state === 'ERROR'">
-        <val-no-content [props]="props.error.titles" (onClick)="clickHandler($event)"></val-no-content>
-      </ng-container>
-    </div>
-  `, styles: [".wrapper{height:auto;display:flex;flex-direction:column;justify-content:space-between;position:relative}.step{min-height:9.375rem;margin:16px 0;text-align:center}\n"] }]
-        }], ctorParameters: () => [], propDecorators: { props: [{
-                type: Input
-            }], onClick: [{
-                type: Output
-            }] } });
-
-class ItemListComponent {
-    constructor(icon) {
-        this.states = ComponentStates;
-        this.defaultColor = 'primary';
-        this.onClick = new EventEmitter();
-        this.onActionClick = new EventEmitter();
-    }
-    ngOnInit() { }
-    clickHandler(token) {
-        this.onClick.emit(token);
-    }
-    onActionClickHandler(token) {
-        this.onActionClick.emit(token);
-    }
-    color() {
-        return resolveColor(this.props.color || this.defaultColor);
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: ItemListComponent, deps: [{ token: IconService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.12", type: ItemListComponent, isStandalone: true, selector: "val-item-list", inputs: { props: "props" }, outputs: { onClick: "onClick", onActionClick: "onActionClick" }, ngImport: i0, template: `
-    <ion-list
-      [inset]="props.rounded"
-      [class.shadowed]="props.shadowed"
-      [class.bordered]="props.bordered"
-      [style.borderColor]="this.color()"
-    >
-      @if (props.title) {
-        <ion-list-header>
-          <ion-label>{{ props.title }}</ion-label>
-        </ion-list-header>
-      }
-      @for (item of props.items; track item.text) {
-        @if (item.mode == 'justext') {
-          <ion-item
-            [lines]="item.lines"
-            [button]="item.clickable"
-            [disabled]="item.disabled"
-            (click)="clickHandler(item.token)"
-          >
-            @if (item.unreadIndicator) {
-              <div class="unread-indicator-wrapper" slot="start">
-                <div class="unread-indicator"></div>
-              </div>
-            }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: ItemListComponent, deps: [{ token: IconService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.12", type: ItemListComponent, isStandalone: true, selector: "val-item-list", inputs: { props: "props" }, outputs: { onClick: "onClick", onActionClick: "onActionClick" }, ngImport: i0, template: `
+    <ion-list
+      [inset]="props.rounded"
+      [class.shadowed]="props.shadowed"
+      [class.bordered]="props.bordered"
+      [style.borderColor]="this.color()"
+    >
+      @if (props.title) {
+        <ion-list-header>
+          <ion-label>{{ props.title }}</ion-label>
+        </ion-list-header>
+      }
+      @for (item of props.items; track item.text) {
+        @if (item.mode == 'justext') {
+          <ion-item
+            [lines]="item.lines"
+            [button]="item.clickable"
+            [disabled]="item.disabled"
+            (click)="clickHandler(item.token)"
+          >
+            @if (item.unreadIndicator) {
+              <div class="unread-indicator-wrapper" slot="start">
+                <div class="unread-indicator"></div>
+              </div>
+            }
 
             <ion-label [ngClass]="{ 'ion-text-nowrap': item.ellipsis }">
               <h2>{{ item.text }}</h2>
@@ -3341,6 +3138,261 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
                 type: Output
             }] } });
 
+class NoContentComponent {
+    constructor() {
+        this.onClick = new EventEmitter();
+    }
+    ngOnInit() { }
+    onClickHandler(token) {
+        this.onClick.emit(token);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: NoContentComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.12", type: NoContentComponent, isStandalone: true, selector: "val-no-content", inputs: { props: "props" }, outputs: { onClick: "onClick" }, ngImport: i0, template: `
+    @if (props.topContent) {
+      <div>
+        <val-banner [props]="props.topContent" (onClick)="onClickHandler($event)"></val-banner>
+      </div>
+    }
+    <val-image class="image-container" [props]="props.image"></val-image>
+    <div>
+      <val-banner [props]="props.bottomContent" (onClick)="onClickHandler($event)"></val-banner>
+    </div>
+  `, isInline: true, styles: [".image-container{display:flex;justify-content:center;margin-bottom:1rem}val-image .image{margin:0 auto}\n"], dependencies: [{ kind: "component", type: ImageComponent, selector: "val-image", inputs: ["props"] }, { kind: "component", type: BannerComponent, selector: "val-banner", inputs: ["props"], outputs: ["onClick", "onClose"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: NoContentComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'val-no-content', standalone: true, imports: [ImageComponent, BannerComponent], template: `
+    @if (props.topContent) {
+      <div>
+        <val-banner [props]="props.topContent" (onClick)="onClickHandler($event)"></val-banner>
+      </div>
+    }
+    <val-image class="image-container" [props]="props.image"></val-image>
+    <div>
+      <val-banner [props]="props.bottomContent" (onClick)="onClickHandler($event)"></val-banner>
+    </div>
+  `, styles: [".image-container{display:flex;justify-content:center;margin-bottom:1rem}val-image .image{margin:0 auto}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { props: [{
+                type: Input
+            }], onClick: [{
+                type: Output
+            }] } });
+
+var MOTION;
+(function (MOTION) {
+    MOTION[MOTION["BACKWARD"] = 0] = "BACKWARD";
+    MOTION[MOTION["FORWARD"] = 1] = "FORWARD";
+    MOTION[MOTION["RETRY"] = 2] = "RETRY";
+})(MOTION || (MOTION = {}));
+
+class WizardFooterComponent {
+    constructor() {
+        this.onClick = new EventEmitter();
+        this.wrapperId = 'wizard-wrapper';
+    }
+    ngOnInit() { }
+    clickHandler(token) {
+        if (!token) {
+            return;
+        }
+        if (token.includes('right')) {
+            this.tryToStep(MOTION.FORWARD);
+        }
+        if (token.includes('left')) {
+            this.tryToStep(MOTION.BACKWARD);
+        }
+    }
+    get Current() {
+        return this.props.steps[this.props.current];
+    }
+    get Progress() {
+        if (this.props.steps && this.props.current) {
+            return this.props.current / Object.keys(this.props.steps).length;
+        }
+        return 0;
+    }
+    get actions() {
+        if (this.props.state === ComponentStates.ERROR && this.Current.buttons.length > 1) {
+            this.Current.buttons[1].state = ComponentStates.DISABLED;
+        }
+        if (this.props.current === 1 && this.Current.buttons.length > 1) {
+            return [this.Current.buttons[1]];
+        }
+        return this.Current.buttons;
+    }
+    tryToStep(motion) {
+        this.onClick.emit({ current: this.props.current, motion });
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: WizardFooterComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: WizardFooterComponent, isStandalone: true, selector: "val-wizard-footer", inputs: { props: "props" }, outputs: { onClick: "onClick" }, ngImport: i0, template: `
+    <val-footer
+      [props]="{
+        bordered: false,
+        translucent: false,
+        toolbar: {
+          title: '',
+          actions: [],
+          color: 'background',
+          withBack: false,
+          withActions: false,
+        },
+      }"
+    >
+      <val-progress-bar
+        extra
+        [props]="{ progress: Progress, color: '', type: 'determinate', buffer: 1, size: 'small', rounded: false }"
+      ></val-progress-bar>
+      <val-button-group
+        extra
+        [props]="{ buttons: actions, position: 'left', columned: false }"
+        position="spaced"
+        (onClick)="clickHandler($event)"
+      ></val-button-group>
+    </val-footer>
+  `, isInline: true, styles: [""], dependencies: [{ kind: "component", type: FooterComponent, selector: "val-footer", inputs: ["props"], outputs: ["onClick"] }, { kind: "component", type: ProgressBarComponent, selector: "val-progress-bar", inputs: ["props"] }, { kind: "component", type: ButtonGroupComponent, selector: "val-button-group", inputs: ["props"], outputs: ["onClick"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: WizardFooterComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'val-wizard-footer', standalone: true, imports: [FooterComponent, ProgressBarComponent, ButtonGroupComponent], template: `
+    <val-footer
+      [props]="{
+        bordered: false,
+        translucent: false,
+        toolbar: {
+          title: '',
+          actions: [],
+          color: 'background',
+          withBack: false,
+          withActions: false,
+        },
+      }"
+    >
+      <val-progress-bar
+        extra
+        [props]="{ progress: Progress, color: '', type: 'determinate', buffer: 1, size: 'small', rounded: false }"
+      ></val-progress-bar>
+      <val-button-group
+        extra
+        [props]="{ buttons: actions, position: 'left', columned: false }"
+        position="spaced"
+        (onClick)="clickHandler($event)"
+      ></val-button-group>
+    </val-footer>
+  ` }]
+        }], ctorParameters: () => [], propDecorators: { props: [{
+                type: Input
+            }], onClick: [{
+                type: Output
+            }] } });
+
+class WizardComponent {
+    constructor() {
+        this.onClick = new EventEmitter();
+        this.wrapperId = 'wizard-wrapper';
+    }
+    ngOnInit() { }
+    working() {
+        this.props.state = ComponentStates.WORKING;
+        this.Current.buttons.map(x => {
+            x.state = ComponentStates.DISABLED;
+        });
+    }
+    done() {
+        if (this.props.state === ComponentStates.ENABLED) {
+            return;
+        }
+        this.props.state = ComponentStates.ENABLED;
+        this.Current.buttons.map(x => {
+            x.state = ComponentStates.ENABLED;
+        });
+    }
+    get Current() {
+        return this.props.steps[this.props.current];
+    }
+    setCurrent(newStep) {
+        if (newStep === this.props.current) {
+            return;
+        }
+        this.props.current = newStep;
+        goToTop(this.wrapperId);
+    }
+    setError(error) {
+        if (this.props.state === ComponentStates.ERROR) {
+            return;
+        }
+        this.props.error.titles.bottomContent.content.bellowTitle.text = error;
+        this.props.state = ComponentStates.ERROR;
+        goToTop(this.wrapperId);
+    }
+    reset() {
+        this.props.error.titles.bottomContent.content.bellowTitle.text = '';
+        this.done();
+    }
+    clickHandler(token) {
+        if (!token) {
+            return;
+        }
+        if (token.includes('retry')) {
+            this.reset();
+        }
+        this.onClick.emit({ current: this.props.current, motion: MOTION.RETRY });
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: WizardComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: WizardComponent, isStandalone: true, selector: "val-wizard", inputs: { props: "props" }, outputs: { onClick: "onClick" }, ngImport: i0, template: `
+    <div [id]="wrapperId" class="wrapper">
+      <ng-container *ngIf="props.state !== 'ERROR'">
+        <val-no-content [props]="Current.titles"></val-no-content>
+        <div class="step">
+          <div *ngIf="props.state === 'WORKING'">
+            <val-content-loader
+              [props]="{
+                name: 'circular',
+                color: 'primary',
+                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
+              [props]="{
+                name: 'circular',
+                color: 'primary',
+                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: `
@@ -3676,5 +3728,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
  * Generated bundle index. Do not edit.
  */
 
-export { ActionType, AlertBoxComponent, AvatarComponent, BannerComponent, BaseDefault, BoxComponent, ButtonComponent, ButtonGroupComponent, CardComponent, CardSection, CardType, CheckInputComponent, ClearDefault, ClearDefaultBlock, ClearDefaultFull, ClearDefaultRound, ClearDefaultRoundBlock, ClearDefaultRoundFull, CommentInputComponent, ComponentStates, ContentLoaderComponent, DateInputComponent, DisplayComponent, DividerComponent, DownloadService, EmailInputComponent, ExpandableTextComponent, FileInputComponent, FooterComponent, FormComponent, FormFooterComponent, HeaderComponent, HintComponent, HourInputComponent, HrefComponent, Icon, IconComponent, IconService, ImageComponent, InAppBrowserService, InputType, ItemListComponent, LangOption, LangService, LayoutComponent, LinkComponent, LinksCakeComponent, LocalStorageService, MOTION, NavigationService, NoContentComponent, NotesBoxComponent, NumberInputComponent, OutlineDefault, OutlineDefaultBlock, OutlineDefaultFull, OutlineDefaultRound, OutlineDefaultRoundBlock, OutlineDefaultRoundFull, PasswordInputComponent, PinInputComponent, PrimarySolidBlockButton, PrimarySolidBlockHrefButton, PrimarySolidBlockIconButton, PrimarySolidBlockIconHrefButton, PrimarySolidDefaultRoundButton, PrimarySolidDefaultRoundHrefButton, PrimarySolidDefaultRoundIconButton, PrimarySolidDefaultRoundIconHrefButton, PrimarySolidFullButton, PrimarySolidFullHrefButton, PrimarySolidFullIconButton, PrimarySolidFullIconHrefButton, PrimarySolidLargeRoundButton, PrimarySolidLargeRoundHrefButton, PrimarySolidLargeRoundIconButton, PrimarySolidLargeRoundIconHrefButton, PrimarySolidSmallRoundButton, PrimarySolidSmallRoundHrefButton, PrimarySolidSmallRoundIconButton, PrimarySolidSmallRoundIconHrefButton, ProgressBarComponent, ProgressStatusComponent, PrompterComponent, RadioInputComponent, SearchbarComponent, SecondarySolidBlockButton, SecondarySolidBlockHrefButton, SecondarySolidBlockIconButton, SecondarySolidBlockIconHrefButton, SecondarySolidDefaultRoundButton, SecondarySolidDefaultRoundHrefButton, SecondarySolidDefaultRoundIconButton, SecondarySolidDefaultRoundIconHrefButton, SecondarySolidFullButton, SecondarySolidFullHrefButton, SecondarySolidFullIconButton, SecondarySolidFullIconHrefButton, SecondarySolidLargeRoundButton, SecondarySolidLargeRoundHrefButton, SecondarySolidLargeRoundIconButton, SecondarySolidLargeRoundIconHrefButton, SecondarySolidSmallRoundButton, SecondarySolidSmallRoundHrefButton, SecondarySolidSmallRoundIconButton, SecondarySolidSmallRoundIconHrefButton, SimpleComponent, SolidBlockButton, SolidDefault, SolidDefaultBlock, SolidDefaultButton, SolidDefaultFull, SolidDefaultRound, SolidDefaultRoundBlock, SolidDefaultRoundButton, SolidDefaultRoundFull, SolidFullButton, SolidLargeButton, SolidLargeRoundButton, SolidSmallButton, SolidSmallRoundButton, TextComponent, TextContent, TextInputComponent, ThemeOption, ThemeService, TitleBlockComponent, TitleComponent, ToastService, ToolbarActionType, ToolbarComponent, ValtechConfigService, WizardComponent, WizardFooterComponent, goToTop, isAtEnd, maxLength };
+export { ActionType, AlertBoxComponent, AvatarComponent, BannerComponent, BaseDefault, BoxComponent, ButtonComponent, ButtonGroupComponent, CardComponent, CardSection, CardType, CheckInputComponent, ClearDefault, ClearDefaultBlock, ClearDefaultFull, ClearDefaultRound, ClearDefaultRoundBlock, ClearDefaultRoundFull, CommentInputComponent, ComponentStates, ContentLoaderComponent, DateInputComponent, DisplayComponent, DividerComponent, DownloadService, EmailInputComponent, ExpandableTextComponent, FileInputComponent, FooterComponent, FormComponent, FormFooterComponent, HeaderComponent, HintComponent, HourInputComponent, HrefComponent, Icon, IconComponent, IconService, ImageComponent, InAppBrowserService, InputType, ItemListComponent, LangOption, LangService, LayoutComponent, LinkComponent, LinksCakeComponent, LocalStorageService, MOTION, NavigationService, NoContentComponent, NotesBoxComponent, NumberInputComponent, OutlineDefault, OutlineDefaultBlock, OutlineDefaultFull, OutlineDefaultRound, OutlineDefaultRoundBlock, OutlineDefaultRoundFull, PasswordInputComponent, PinInputComponent, PrimarySolidBlockButton, PrimarySolidBlockHrefButton, PrimarySolidBlockIconButton, PrimarySolidBlockIconHrefButton, PrimarySolidDefaultRoundButton, PrimarySolidDefaultRoundHrefButton, PrimarySolidDefaultRoundIconButton, PrimarySolidDefaultRoundIconHrefButton, PrimarySolidFullButton, PrimarySolidFullHrefButton, PrimarySolidFullIconButton, PrimarySolidFullIconHrefButton, PrimarySolidLargeRoundButton, PrimarySolidLargeRoundHrefButton, PrimarySolidLargeRoundIconButton, PrimarySolidLargeRoundIconHrefButton, PrimarySolidSmallRoundButton, PrimarySolidSmallRoundHrefButton, PrimarySolidSmallRoundIconButton, PrimarySolidSmallRoundIconHrefButton, ProgressBarComponent, ProgressStatusComponent, PrompterComponent, RadioInputComponent, SearchSelectorComponent, 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, ToastService, ToolbarActionType, ToolbarComponent, ValtechConfigService, WizardComponent, WizardFooterComponent, goToTop, isAtEnd, maxLength };
 //# sourceMappingURL=valtech-components.mjs.map