valtech-components 2.0.719 → 2.0.720

package/fesm2022/valtech-components.mjs

@@ -50,7 +50,7 @@ import 'prismjs/components/prism-json';
  * Current version of valtech-components.
  * This is automatically updated during the publish process.
  */
-const VERSION = '2.0.719';
+const VERSION = '2.0.720';
 
 /**
  * Servicio para gestionar presets de componentes.
@@ -11419,14 +11419,14 @@ addIcons({ trendingUp, trendingDown, remove, analytics, people, cash, cart, eye,
  *
  * @input preset: string - Name of preset to apply
  * @input props: StatsCardMetadata - Configuration for the stats card
- * @output cardClick: void - Emits when card is clicked
+ * @output onClick: void - Emits when card is clicked
  */
 class StatsCardComponent {
     constructor() {
         this.presets = inject(PresetService);
         this.props = {};
         this.resolvedProps = {};
-        this.cardClick = new EventEmitter();
+        this.onClick = new EventEmitter();
         this.Math = Math;
     }
     ngOnInit() {
@@ -11438,9 +11438,7 @@ class StatsCardComponent {
         }
     }
     resolveProps() {
-        const presetProps = this.preset
-            ? this.presets.get('statsCard', this.preset)
-            : {};
+        const presetProps = this.preset ? this.presets.get('statsCard', this.preset) : {};
         this.resolvedProps = {
             ...presetProps,
             ...this.props,
@@ -11472,13 +11470,13 @@ class StatsCardComponent {
         return 'remove';
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: StatsCardComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: StatsCardComponent, isStandalone: true, selector: "val-stats-card", inputs: { preset: "preset", props: "props" }, outputs: { cardClick: "cardClick" }, usesOnChanges: true, ngImport: i0, template: `
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: StatsCardComponent, isStandalone: true, selector: "val-stats-card", inputs: { preset: "preset", props: "props" }, outputs: { onClick: "onClick" }, usesOnChanges: true, ngImport: i0, template: `
     <ion-card
       class="stats-card"
       [class]="getBackgroundClass()"
       [style.--card-color]="getCardColor()"
       [style.min-height.px]="resolvedProps.minHeight"
-      (click)="cardClick.emit()"
+      (click)="onClick.emit()"
     >
       <ion-card-content>
         <div class="stats-header">
@@ -11542,7 +11540,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
       [class]="getBackgroundClass()"
       [style.--card-color]="getCardColor()"
       [style.min-height.px]="resolvedProps.minHeight"
-      (click)="cardClick.emit()"
+      (click)="onClick.emit()"
     >
       <ion-card-content>
         <div class="stats-header">
@@ -11601,7 +11599,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
                 type: Input
             }], props: [{
                 type: Input
-            }], cardClick: [{
+            }], onClick: [{
                 type: Output
             }] } });
 
@@ -18782,10 +18780,7 @@ const ACTION_CARD_DEFAULTS = {
 };
 
 addIcons({ chevronForwardOutline });
-const IONIC_COLORS = [
-    'primary', 'secondary', 'tertiary', 'success',
-    'warning', 'danger', 'light', 'medium', 'dark'
-];
+const IONIC_COLORS = ['primary', 'secondary', 'tertiary', 'success', 'warning', 'danger', 'light', 'medium', 'dark'];
 /**
  * val-action-card
  *
@@ -18800,7 +18795,7 @@ const IONIC_COLORS = [
  *     title: 'Settings',
  *     description: 'Manage your preferences'
  *   }"
- *   (cardClick)="onCardClick($event)"
+ *   (onClick)="onCardClick($event)"
  * />
  * ```
  *
@@ -18836,7 +18831,7 @@ class ActionCardComponent {
         /** Component configuration */
         this.props = input({});
         /** Event emitted when card is clicked */
-        this.cardClick = new EventEmitter();
+        this.onClick = new EventEmitter();
         /** Merged configuration with defaults */
         this.config = computed(() => ({
             ...ACTION_CARD_DEFAULTS,
@@ -18900,7 +18895,7 @@ class ActionCardComponent {
             return;
         }
         // Emit click event
-        this.cardClick.emit({
+        this.onClick.emit({
             token: cfg.token,
             navigated: !!cfg.routerLink || !!cfg.href,
         });
@@ -18910,7 +18905,7 @@ class ActionCardComponent {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: ActionCardComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: ActionCardComponent, isStandalone: true, selector: "val-action-card", inputs: { props: { classPropertyName: "props", publicName: "props", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { cardClick: "cardClick" }, ngImport: i0, template: `
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: ActionCardComponent, isStandalone: true, selector: "val-action-card", inputs: { props: { classPropertyName: "props", publicName: "props", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onClick: "onClick" }, ngImport: i0, template: `
     <article
       class="action-card"
       [class.action-card--small]="config().size === 'small'"
@@ -18942,11 +18937,7 @@ class ActionCardComponent {
       }
 
       <!-- Icon Container -->
-      <div
-        class="action-card__icon"
-        [style.color]="getIconColor()"
-        [style.background-color]="getIconBackgroundColor()"
-      >
+      <div class="action-card__icon" [style.color]="getIconColor()" [style.background-color]="getIconBackgroundColor()">
         @if (config().icon?.ionicon) {
           <ion-icon [name]="config().icon!.ionicon!"></ion-icon>
         } @else if (config().icon?.svgPath) {
@@ -18961,11 +18952,7 @@ class ActionCardComponent {
             <path [attr.d]="config().icon!.svgPath" />
           </svg>
         } @else if (config().icon?.imageUrl) {
-          <img
-            [src]="config().icon!.imageUrl"
-            [alt]="getTitle()"
-            class="action-card__icon-image"
-          />
+          <img [src]="config().icon!.imageUrl" [alt]="getTitle()" class="action-card__icon-image" />
         }
       </div>
 
@@ -18979,10 +18966,7 @@ class ActionCardComponent {
 
       <!-- Chevron (optional) -->
       @if (config().showChevron && !config().disabled) {
-        <ion-icon
-          name="chevron-forward-outline"
-          class="action-card__chevron"
-        ></ion-icon>
+        <ion-icon name="chevron-forward-outline" class="action-card__chevron"></ion-icon>
       }
     </article>
   `, isInline: true, styles: [":host{display:block}.action-card{position:relative;display:flex;align-items:center;gap:1rem;padding:1rem;background:var(--card-bg, var(--ion-card-background, var(--ion-background-color)));border-radius:12px;cursor:pointer;transition:transform .2s ease,box-shadow .2s ease,background-color .2s ease;text-decoration:none;overflow:hidden;--ripple-color: var(--ion-color-primary)}.action-card--small{padding:.75rem;gap:.75rem}.action-card--small .action-card__icon{width:36px;height:36px;font-size:18px;border-radius:8px}.action-card--small .action-card__icon svg{width:18px;height:18px}.action-card--small .action-card__title{font-size:.9rem}.action-card--small .action-card__description{font-size:.8rem}.action-card--medium{padding:1rem;gap:1rem}.action-card--medium .action-card__icon{width:48px;height:48px;font-size:24px;border-radius:10px}.action-card--medium .action-card__icon svg{width:24px;height:24px}.action-card--medium .action-card__title{font-size:1rem}.action-card--medium .action-card__description{font-size:.875rem}.action-card--large{padding:1.25rem;gap:1.25rem}.action-card--large .action-card__icon{width:56px;height:56px;font-size:28px;border-radius:12px}.action-card--large .action-card__icon svg{width:28px;height:28px}.action-card--large .action-card__title{font-size:1.1rem}.action-card--large .action-card__description{font-size:.9rem}.action-card--bordered{border:1px solid var(--card-border-color, var(--ion-color-light-shade))}.action-card--shadowed{box-shadow:0 2px 8px #00000014}.action-card--clickable:hover{transform:translateY(-2px);box-shadow:0 4px 16px #0000001f}.action-card--clickable:focus-visible{outline:2px solid var(--ion-color-primary);outline-offset:2px}.action-card--clickable:active{transform:translateY(0)}.action-card--disabled{opacity:.5;cursor:not-allowed;pointer-events:none}.action-card__badge{position:absolute;top:8px;right:8px;padding:2px 8px;font-size:.7rem;font-weight:600;text-transform:uppercase;letter-spacing:.5px;border-radius:10px;z-index:1}.action-card__icon{flex-shrink:0;display:flex;align-items:center;justify-content:center}.action-card__icon ion-icon{font-size:inherit}.action-card__icon svg{display:block}.action-card__icon-image{width:100%;height:100%;object-fit:cover;border-radius:8px}.action-card__content{flex:1;min-width:0}.action-card__title{margin:0 0 .25rem;font-weight:600;color:var(--ion-text-color);line-height:1.3}.action-card__description{margin:0;color:var(--ion-color-medium);line-height:1.4}.action-card__chevron{flex-shrink:0;font-size:1.25rem;color:var(--ion-color-medium);transition:transform .2s ease}.action-card--clickable:hover .action-card__chevron{transform:translate(4px)}@media (prefers-color-scheme: dark){.action-card--shadowed{box-shadow:0 2px 8px #0000004d}.action-card--clickable:hover{box-shadow:0 4px 16px #0006}}:host-context(.dark) .action-card--shadowed,:host-context(body.dark) .action-card--shadowed,:host-context([data-theme=dark]) .action-card--shadowed{box-shadow:0 2px 8px #0000004d}:host-context(.dark) .action-card--clickable:hover,:host-context(body.dark) .action-card--clickable:hover,:host-context([data-theme=dark]) .action-card--clickable:hover{box-shadow:0 4px 16px #0006}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "component", type: IonIcon, selector: "ion-icon", inputs: ["color", "flipRtl", "icon", "ios", "lazy", "md", "mode", "name", "sanitize", "size", "src"] }, { kind: "component", type: IonRippleEffect, selector: "ion-ripple-effect", inputs: ["type"] }] }); }
@@ -19021,11 +19005,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
       }
 
       <!-- Icon Container -->
-      <div
-        class="action-card__icon"
-        [style.color]="getIconColor()"
-        [style.background-color]="getIconBackgroundColor()"
-      >
+      <div class="action-card__icon" [style.color]="getIconColor()" [style.background-color]="getIconBackgroundColor()">
         @if (config().icon?.ionicon) {
           <ion-icon [name]="config().icon!.ionicon!"></ion-icon>
         } @else if (config().icon?.svgPath) {
@@ -19040,11 +19020,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
             <path [attr.d]="config().icon!.svgPath" />
           </svg>
         } @else if (config().icon?.imageUrl) {
-          <img
-            [src]="config().icon!.imageUrl"
-            [alt]="getTitle()"
-            class="action-card__icon-image"
-          />
+          <img [src]="config().icon!.imageUrl" [alt]="getTitle()" class="action-card__icon-image" />
         }
       </div>
 
@@ -19058,14 +19034,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
 
       <!-- Chevron (optional) -->
       @if (config().showChevron && !config().disabled) {
-        <ion-icon
-          name="chevron-forward-outline"
-          class="action-card__chevron"
-        ></ion-icon>
+        <ion-icon name="chevron-forward-outline" class="action-card__chevron"></ion-icon>
       }
     </article>
   `, styles: [":host{display:block}.action-card{position:relative;display:flex;align-items:center;gap:1rem;padding:1rem;background:var(--card-bg, var(--ion-card-background, var(--ion-background-color)));border-radius:12px;cursor:pointer;transition:transform .2s ease,box-shadow .2s ease,background-color .2s ease;text-decoration:none;overflow:hidden;--ripple-color: var(--ion-color-primary)}.action-card--small{padding:.75rem;gap:.75rem}.action-card--small .action-card__icon{width:36px;height:36px;font-size:18px;border-radius:8px}.action-card--small .action-card__icon svg{width:18px;height:18px}.action-card--small .action-card__title{font-size:.9rem}.action-card--small .action-card__description{font-size:.8rem}.action-card--medium{padding:1rem;gap:1rem}.action-card--medium .action-card__icon{width:48px;height:48px;font-size:24px;border-radius:10px}.action-card--medium .action-card__icon svg{width:24px;height:24px}.action-card--medium .action-card__title{font-size:1rem}.action-card--medium .action-card__description{font-size:.875rem}.action-card--large{padding:1.25rem;gap:1.25rem}.action-card--large .action-card__icon{width:56px;height:56px;font-size:28px;border-radius:12px}.action-card--large .action-card__icon svg{width:28px;height:28px}.action-card--large .action-card__title{font-size:1.1rem}.action-card--large .action-card__description{font-size:.9rem}.action-card--bordered{border:1px solid var(--card-border-color, var(--ion-color-light-shade))}.action-card--shadowed{box-shadow:0 2px 8px #00000014}.action-card--clickable:hover{transform:translateY(-2px);box-shadow:0 4px 16px #0000001f}.action-card--clickable:focus-visible{outline:2px solid var(--ion-color-primary);outline-offset:2px}.action-card--clickable:active{transform:translateY(0)}.action-card--disabled{opacity:.5;cursor:not-allowed;pointer-events:none}.action-card__badge{position:absolute;top:8px;right:8px;padding:2px 8px;font-size:.7rem;font-weight:600;text-transform:uppercase;letter-spacing:.5px;border-radius:10px;z-index:1}.action-card__icon{flex-shrink:0;display:flex;align-items:center;justify-content:center}.action-card__icon ion-icon{font-size:inherit}.action-card__icon svg{display:block}.action-card__icon-image{width:100%;height:100%;object-fit:cover;border-radius:8px}.action-card__content{flex:1;min-width:0}.action-card__title{margin:0 0 .25rem;font-weight:600;color:var(--ion-text-color);line-height:1.3}.action-card__description{margin:0;color:var(--ion-color-medium);line-height:1.4}.action-card__chevron{flex-shrink:0;font-size:1.25rem;color:var(--ion-color-medium);transition:transform .2s ease}.action-card--clickable:hover .action-card__chevron{transform:translate(4px)}@media (prefers-color-scheme: dark){.action-card--shadowed{box-shadow:0 2px 8px #0000004d}.action-card--clickable:hover{box-shadow:0 4px 16px #0006}}:host-context(.dark) .action-card--shadowed,:host-context(body.dark) .action-card--shadowed,:host-context([data-theme=dark]) .action-card--shadowed{box-shadow:0 2px 8px #0000004d}:host-context(.dark) .action-card--clickable:hover,:host-context(body.dark) .action-card--clickable:hover,:host-context([data-theme=dark]) .action-card--clickable:hover{box-shadow:0 4px 16px #0006}\n"] }]
-        }], propDecorators: { cardClick: [{
+        }], propDecorators: { onClick: [{
                 type: Output
             }] } });
 
@@ -28796,15 +28769,22 @@ class ConfirmationDialogService {
      */
     async confirm(options) {
         const buttons = this.buildButtons(options);
+        // Default: usa val-alert (estilo iOS dark unificado de la lib)
+        const userClasses = options.cssClass
+            ? Array.isArray(options.cssClass)
+                ? options.cssClass
+                : [options.cssClass]
+            : [];
+        const cssClass = ['val-alert', ...userClasses];
         const alert = await this.alertController.create({
             header: options.title,
             subHeader: options.subHeader,
             message: options.message,
             buttons,
             backdropDismiss: options.backdropDismiss ?? false,
-            cssClass: options.cssClass,
-            mode: options.mode,
-            translucent: options.translucent ?? false,
+            cssClass,
+            mode: options.mode ?? 'ios',
+            translucent: options.translucent ?? true,
             animated: options.animated ?? true,
         });
         await alert.present();
@@ -28831,13 +28811,20 @@ class ConfirmationDialogService {
      * @returns Promise resolving to the confirmation result
      */
     async confirmDestructive(options) {
+        // Marca el modal con val-alert--destructive para que el CSS pinte
+        // el texto del botón destructivo en rojo (sin tocar el fondo).
+        const extraClass = 'val-alert--destructive';
+        const userClasses = options.cssClass
+            ? Array.isArray(options.cssClass)
+                ? options.cssClass
+                : [options.cssClass]
+            : [];
         return this.confirm({
             ...options,
+            cssClass: [...userClasses, extraClass],
             confirmButton: {
                 text: options.confirmButton?.text || 'Delete',
                 role: 'destructive',
-                color: 'danger',
-                cssClass: 'destructive-button',
                 ...options.confirmButton,
             },
         });
@@ -28894,21 +28881,21 @@ class ConfirmationDialogService {
     }
     buildButtons(options) {
         const buttons = [];
-        // Cancel button
+        // Cancel button — sin color ionic por default (el CSS de val-alert se encarga)
         const cancelBtn = options.cancelButton || DEFAULT_CANCEL_BUTTON;
         buttons.push({
             text: cancelBtn.text,
             role: cancelBtn.role || 'cancel',
-            cssClass: cancelBtn.cssClass || `button-${cancelBtn.color || 'medium'}`,
+            cssClass: cancelBtn.cssClass,
             handler: cancelBtn.handler,
         });
         // Extra buttons (if any)
         if (options.extraButtons) {
-            options.extraButtons.forEach((btn) => {
+            options.extraButtons.forEach(btn => {
                 buttons.push({
                     text: btn.text,
                     role: btn.role,
-                    cssClass: btn.cssClass || `button-${btn.color || 'medium'}`,
+                    cssClass: btn.cssClass,
                     handler: btn.handler,
                 });
             });
@@ -28918,7 +28905,7 @@ class ConfirmationDialogService {
         buttons.push({
             text: confirmBtn.text,
             role: confirmBtn.role || 'confirm',
-            cssClass: confirmBtn.cssClass || `button-${confirmBtn.color || 'primary'}`,
+            cssClass: confirmBtn.cssClass,
             handler: confirmBtn.handler,
         });
         return buttons;