valtech-components 2.0.347 → 2.0.349

package/fesm2022/valtech-components.mjs

@@ -1,5 +1,5 @@
 import * as i0 from '@angular/core';
-import { EventEmitter, Component, Input, Output, Injectable, inject, InjectionToken, Inject, Pipe, ChangeDetectionStrategy, ViewChild, ChangeDetectorRef } from '@angular/core';
+import { EventEmitter, Component, Input, Output, Injectable, inject, InjectionToken, Inject, ChangeDetectorRef, Pipe, ChangeDetectionStrategy, ViewChild } from '@angular/core';
 import { IonAvatar, IonCard, IonIcon, IonButton, IonSpinner, IonText, IonProgressBar, IonCardContent, IonCardHeader, IonCardTitle, IonCardSubtitle, IonCheckbox, IonButtons, IonTextarea, IonDatetime, IonDatetimeButton, IonModal, IonInput, IonSelect, IonSelectOption, IonLabel, IonRadioGroup, IonRadio, IonSearchbar, IonToolbar, IonTitle, IonMenuButton, IonFooter, IonHeader, IonList, IonListHeader, IonNote, IonItem, IonContent } from '@ionic/angular/standalone';
 import * as i1 from '@angular/common';
 import { CommonModule, NgStyle, AsyncPipe, NgFor, NgClass } from '@angular/common';
@@ -1579,10 +1579,17 @@ class DisplayComponent {
     constructor() {
         this.subscriptions = new Subscription();
         this.langService = inject(LangService);
+        this.cdr = inject(ChangeDetectorRef);
     }
     ngOnInit() {
         this.initializeDisplayContent();
     }
+    ngOnChanges(changes) {
+        if (changes['props']) {
+            this.initializeDisplayContent();
+            this.cdr.detectChanges();
+        }
+    }
     ngOnDestroy() {
         this.subscriptions.unsubscribe();
     }
@@ -1603,7 +1610,7 @@ class DisplayComponent {
         this.displayContent$ = of('');
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: DisplayComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: DisplayComponent, isStandalone: true, selector: "val-display", inputs: { props: "props" }, ngImport: i0, template: `
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: DisplayComponent, isStandalone: true, selector: "val-display", inputs: { props: "props" }, usesOnChanges: true, ngImport: i0, template: `
     <ion-text [color]="props.color">
       <p [class]="props.size">
         {{ displayContent$ | async }}
@@ -2599,8 +2606,18 @@ function createTextProps(contentConfig, styleConfig = {}) {
 class TitleComponent {
     constructor() {
         this.langService = inject(LangService);
+        this.cdr = inject(ChangeDetectorRef);
     }
     ngOnInit() {
+        this.updateContent();
+    }
+    ngOnChanges(changes) {
+        if (changes['props']) {
+            this.updateContent();
+            this.cdr.detectChanges();
+        }
+    }
+    updateContent() {
         // Always convert to Observable for consistent template handling
         if (shouldUseReactiveContent(this.props)) {
             // Use reactive content with LangService
@@ -2614,7 +2631,7 @@ class TitleComponent {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: TitleComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.12", type: TitleComponent, isStandalone: true, selector: "val-title", inputs: { props: "props" }, ngImport: i0, template: `
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.12", type: TitleComponent, isStandalone: true, selector: "val-title", inputs: { props: "props" }, usesOnChanges: true, ngImport: i0, template: `
     <ion-text [color]="props.color">
       @if (!props.bold) {
         <p [ngClass]="[props.size]" [class.thin]="props.thin">
@@ -4283,10 +4300,21 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
  * @input props: TitleBlockMetada - Configuration for the title block (title, aboveTitle, bellowTitle, position)
  */
 class TitleBlockComponent {
-    constructor() { }
+    constructor(cdr) {
+        this.cdr = cdr;
+    }
     ngOnInit() { }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: TitleBlockComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: TitleBlockComponent, isStandalone: true, selector: "val-title-block", inputs: { props: "props" }, ngImport: i0, template: `
+    ngOnChanges(changes) {
+        if (changes['props']) {
+            // Forzar detección de cambios múltiple
+            this.cdr.detectChanges();
+            setTimeout(() => {
+                this.cdr.detectChanges();
+            }, 0);
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: TitleBlockComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: TitleBlockComponent, isStandalone: true, selector: "val-title-block", inputs: { props: "props" }, usesOnChanges: true, ngImport: i0, template: `
     <div [ngClass]="['titles-container', props.position]">
       <val-title
         *ngIf="props.aboveTitle"
@@ -4353,7 +4381,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
       ></val-title>
     </div>
   `, styles: [":root{--ion-color-primary: #7026df;--ion-color-primary-rgb: 112, 38, 223;--ion-color-primary-contrast: #ffffff;--ion-color-primary-contrast-rgb: 255, 255, 255;--ion-color-primary-shade: #6321c4;--ion-color-primary-tint: #7e3ce2;--ion-color-secondary: #e2ccff;--ion-color-secondary-rgb: 226, 204, 255;--ion-color-secondary-contrast: #000000;--ion-color-secondary-contrast-rgb: 0, 0, 0;--ion-color-secondary-shade: #c7b4e0;--ion-color-secondary-tint: #e5d1ff;--ion-color-texti: #354c69;--ion-color-texti-rgb: 53, 76, 105;--ion-color-texti-contrast: #ffffff;--ion-color-texti-contrast-rgb: 255, 255, 255;--ion-color-texti-shade: #2f435c;--ion-color-texti-tint: #495e78;--ion-color-darki: #090f1b;--ion-color-darki-rgb: 9, 15, 27;--ion-color-darki-contrast: #ffffff;--ion-color-darki-contrast-rgb: 255, 255, 255;--ion-color-darki-shade: #080d18;--ion-color-darki-tint: #222732;--ion-color-medium: #9e9e9e;--ion-color-medium-rgb: 158, 158, 158;--ion-color-medium-contrast: #000000;--ion-color-medium-contrast-rgb: 0, 0, 0;--ion-color-medium-shade: #8b8b8b;--ion-color-medium-tint: #a8a8a8;--swiper-pagination-color: var(--ion-color-primary);--swiper-navigation-color: var(--ion-color-primary);--swiper-pagination-bullet-inactive-color: var(--ion-color-medium)}@media (prefers-color-scheme: dark){:root{--ion-color-texti: #8fc1ff;--ion-color-texti-rgb: 143, 193, 255;--ion-color-texti-contrast: #000000;--ion-color-texti-contrast-rgb: 0, 0, 0;--ion-color-texti-shade: #7eaae0;--ion-color-texti-tint: #9ac7ff;--ion-color-darki: #ffffff;--ion-color-darki-rgb: 255, 255, 255;--ion-color-darki-contrast: #000000;--ion-color-darki-contrast-rgb: 0, 0, 0;--ion-color-darki-shade: #e0e0e0;--ion-color-darki-tint: #ffffff;--ion-color-primary: #8f49f8;--ion-color-primary-rgb: 143, 73, 248;--ion-color-primary-contrast: #ffffff;--ion-color-primary-contrast-rgb: 255, 255, 255;--ion-color-primary-shade: #7e40da;--ion-color-primary-tint: #9a5bf9}}.ion-color-texti{--ion-color-base: var(--ion-color-texti);--ion-color-base-rgb: var(--ion-color-texti-rgb);--ion-color-contrast: var(--ion-color-texti-contrast);--ion-color-contrast-rgb: var(--ion-color-texti-contrast-rgb);--ion-color-shade: var(--ion-color-texti-shade);--ion-color-tint: var(--ion-color-texti-tint)}.ion-color-darki{--ion-color-base: var(--ion-color-darki);--ion-color-base-rgb: var(--ion-color-darki-rgb);--ion-color-contrast: var(--ion-color-darki-contrast);--ion-color-contrast-rgb: var(--ion-color-darki-contrast-rgb);--ion-color-shade: var(--ion-color-darki-shade);--ion-color-tint: var(--ion-color-darki-tint)}val-button,val-title,val-display{display:inline-block}.titles-container{width:100%;display:flex;flex-direction:column;flex-wrap:wrap}.titles-container.left{align-content:flex-start;align-items:start;text-align:left}.titles-container.center{align-content:center;align-items:center;text-align:center}.titles-container.right{align-content:flex-end;align-items:end;text-align:end}.titles-container.leftocenter{align-content:flex-start;align-items:start;text-align:left}@media (min-width: 768px){.titles-container.leftocenter{align-content:center;align-items:center;text-align:center}}\n"] }]
-        }], ctorParameters: () => [], propDecorators: { props: [{
+        }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }], propDecorators: { props: [{
                 type: Input
             }] } });
 
@@ -6477,19 +6505,29 @@ class ArticleBuilder {
  * @output onClose - Emits when the banner is closed
  */
 class BannerComponent {
-    constructor() {
+    constructor(cdr) {
+        this.cdr = cdr;
         this.onClick = new EventEmitter();
         this.onClose = new EventEmitter();
     }
     ngOnInit() { }
+    ngOnChanges(changes) {
+        if (changes['props']) {
+            // Forzar detección de cambios múltiple
+            this.cdr.detectChanges();
+            setTimeout(() => {
+                this.cdr.detectChanges();
+            }, 0);
+        }
+    }
     clickHandler(token) {
         this.onClick.emit(token);
     }
     closeHandler() {
         this.onClose.emit();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: BannerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.12", type: BannerComponent, isStandalone: true, selector: "val-banner", inputs: { props: "props" }, outputs: { onClick: "onClick", onClose: "onClose" }, ngImport: i0, template: `
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: BannerComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.12", type: BannerComponent, isStandalone: true, selector: "val-banner", inputs: { props: "props" }, outputs: { onClick: "onClick", onClose: "onClose" }, usesOnChanges: true, ngImport: i0, template: `
     <val-box
       [props]="{
         icon: props.closable ? 'close-outline' : '',
@@ -6550,7 +6588,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
       </div>
     </val-box>
   `, styles: [":root{--ion-color-primary: #7026df;--ion-color-primary-rgb: 112, 38, 223;--ion-color-primary-contrast: #ffffff;--ion-color-primary-contrast-rgb: 255, 255, 255;--ion-color-primary-shade: #6321c4;--ion-color-primary-tint: #7e3ce2;--ion-color-secondary: #e2ccff;--ion-color-secondary-rgb: 226, 204, 255;--ion-color-secondary-contrast: #000000;--ion-color-secondary-contrast-rgb: 0, 0, 0;--ion-color-secondary-shade: #c7b4e0;--ion-color-secondary-tint: #e5d1ff;--ion-color-texti: #354c69;--ion-color-texti-rgb: 53, 76, 105;--ion-color-texti-contrast: #ffffff;--ion-color-texti-contrast-rgb: 255, 255, 255;--ion-color-texti-shade: #2f435c;--ion-color-texti-tint: #495e78;--ion-color-darki: #090f1b;--ion-color-darki-rgb: 9, 15, 27;--ion-color-darki-contrast: #ffffff;--ion-color-darki-contrast-rgb: 255, 255, 255;--ion-color-darki-shade: #080d18;--ion-color-darki-tint: #222732;--ion-color-medium: #9e9e9e;--ion-color-medium-rgb: 158, 158, 158;--ion-color-medium-contrast: #000000;--ion-color-medium-contrast-rgb: 0, 0, 0;--ion-color-medium-shade: #8b8b8b;--ion-color-medium-tint: #a8a8a8;--swiper-pagination-color: var(--ion-color-primary);--swiper-navigation-color: var(--ion-color-primary);--swiper-pagination-bullet-inactive-color: var(--ion-color-medium)}@media (prefers-color-scheme: dark){:root{--ion-color-texti: #8fc1ff;--ion-color-texti-rgb: 143, 193, 255;--ion-color-texti-contrast: #000000;--ion-color-texti-contrast-rgb: 0, 0, 0;--ion-color-texti-shade: #7eaae0;--ion-color-texti-tint: #9ac7ff;--ion-color-darki: #ffffff;--ion-color-darki-rgb: 255, 255, 255;--ion-color-darki-contrast: #000000;--ion-color-darki-contrast-rgb: 0, 0, 0;--ion-color-darki-shade: #e0e0e0;--ion-color-darki-tint: #ffffff;--ion-color-primary: #8f49f8;--ion-color-primary-rgb: 143, 73, 248;--ion-color-primary-contrast: #ffffff;--ion-color-primary-contrast-rgb: 255, 255, 255;--ion-color-primary-shade: #7e40da;--ion-color-primary-tint: #9a5bf9}}.ion-color-texti{--ion-color-base: var(--ion-color-texti);--ion-color-base-rgb: var(--ion-color-texti-rgb);--ion-color-contrast: var(--ion-color-texti-contrast);--ion-color-contrast-rgb: var(--ion-color-texti-contrast-rgb);--ion-color-shade: var(--ion-color-texti-shade);--ion-color-tint: var(--ion-color-texti-tint)}.ion-color-darki{--ion-color-base: var(--ion-color-darki);--ion-color-base-rgb: var(--ion-color-darki-rgb);--ion-color-contrast: var(--ion-color-darki-contrast);--ion-color-contrast-rgb: var(--ion-color-darki-contrast-rgb);--ion-color-shade: var(--ion-color-darki-shade);--ion-color-tint: var(--ion-color-darki-tint)}.content-container{display:flex;justify-content:space-between}.content-container.center{flex-direction:column}.content-container.column{flex-direction:row}.content-container.row{flex-direction:column}.content-container.middle{align-items:center}.content-container.top{align-items:flex-start}.content-container.bottom{align-items:flex-end}.content-container.hybrid{flex-direction:column;align-items:flex-start}@media (min-width: 768px){.content-container.hybrid{flex-direction:row;align-items:center}}.buttons-container{align-items:center;display:flex;margin-top:1rem;margin-bottom:.0625rem}.buttons-container.column{margin-top:0rem}\n"] }]
-        }], ctorParameters: () => [], propDecorators: { props: [{
+        }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }], propDecorators: { props: [{
                 type: Input
             }], onClick: [{
                 type: Output
@@ -7678,7 +7716,11 @@ class NoContentComponent {
     ngOnInit() { }
     ngOnChanges(changes) {
         if (changes['props']) {
+            // Forzar detección de cambios múltiple para asegurar actualización
             this.cdr.detectChanges();
+            setTimeout(() => {
+                this.cdr.detectChanges();
+            }, 0);
         }
     }
     onClickHandler(token) {
@@ -7727,11 +7769,17 @@ var MOTION;
 })(MOTION || (MOTION = {}));
 
 class WizardFooterComponent {
-    constructor() {
+    constructor(cdr) {
+        this.cdr = cdr;
         this.onClick = new EventEmitter();
         this.wrapperId = 'wizard-wrapper';
     }
     ngOnInit() { }
+    ngOnChanges(changes) {
+        if (changes['props']) {
+            this.cdr.detectChanges();
+        }
+    }
     clickHandler(token) {
         if (!token) {
             return;
@@ -7764,8 +7812,8 @@ class WizardFooterComponent {
     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: `
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: WizardFooterComponent, deps: [{ token: i0.ChangeDetectorRef }], 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" }, usesOnChanges: true, ngImport: i0, template: `
     <val-footer
       [props]="{
         bordered: false,
@@ -7818,7 +7866,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
       ></val-button-group>
     </val-footer>
   ` }]
-        }], ctorParameters: () => [], propDecorators: { props: [{
+        }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }], propDecorators: { props: [{
                 type: Input
             }], onClick: [{
                 type: Output
@@ -7844,7 +7892,17 @@ class WizardComponent {
     updateCurrentStep() {
         if (this.props?.steps && this.props?.current) {
             this.currentStep = this.props.steps[this.props.current];
-            this.currentStepTitles = this.currentStep?.titles ? JSON.parse(JSON.stringify(this.currentStep.titles)) : null;
+            // Forzar nueva referencia de objeto para asegurar detección de cambios
+            // Agregar timestamp para garantizar que es un objeto completamente nuevo
+            this.currentStepTitles = this.currentStep?.titles
+                ? {
+                    ...JSON.parse(JSON.stringify(this.currentStep.titles)),
+                    _timestamp: Date.now(), // Forzar nueva referencia
+                    _step: this.props.current, // Agregar identificador del paso
+                }
+                : null;
+            // Forzar detección de cambios inmediatamente
+            this.cdr.detectChanges();
         }
     }
     working() {
@@ -7880,7 +7938,11 @@ class WizardComponent {
         }
         this.props.current = newStep;
         this.updateCurrentStep();
+        // Forzar múltiples ciclos de detección de cambios
         this.cdr.detectChanges();
+        setTimeout(() => {
+            this.cdr.detectChanges();
+        }, 0);
         goToTop(this.wrapperId);
     }
     setError(error) {
@@ -7909,7 +7971,7 @@ class WizardComponent {
     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" }, usesOnChanges: true, ngImport: i0, template: `
     <div [id]="wrapperId" class="wrapper">
       <ng-container *ngIf="props.state !== 'ERROR'">
-        <val-no-content [props]="currentStepTitles"></val-no-content>
+        <val-no-content [props]="currentStepTitles" [attr.data-step]="props.current"></val-no-content>
         <div class="step">
           <div *ngIf="props.state === 'WORKING'">
             <val-content-loader
@@ -7935,7 +7997,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
             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]="currentStepTitles"></val-no-content>
+        <val-no-content [props]="currentStepTitles" [attr.data-step]="props.current"></val-no-content>
         <div class="step">
           <div *ngIf="props.state === 'WORKING'">
             <val-content-loader