valtech-components 2.0.963 → 2.0.964

package/fesm2022/valtech-components.mjs

@@ -23,7 +23,7 @@ import { IonicModule, ToastController, NavController } from '@ionic/angular';
 import { isSupported, getMessaging as getMessaging$1 } from 'firebase/messaging';
 import { getApps, getApp, initializeApp as initializeApp$1 } from 'firebase/app';
 import * as i2$1 from '@ionic/angular/standalone';
-import { AlertController, IonAvatar, IonCard, IonIcon, IonButton, IonSpinner, IonText, IonModal, IonHeader, IonToolbar, IonContent, IonButtons, IonTitle, IonProgressBar, IonSkeletonText, IonFab, IonFabButton, IonFabList, IonLabel, IonCardContent, IonCardHeader, IonCardTitle, IonCardSubtitle, IonCheckbox, IonTextarea, IonDatetime, IonDatetimeButton, IonInput, IonSelect, IonSelectOption, IonPopover, IonList, IonItem, IonRadioGroup, IonRadio, IonRange, IonSearchbar, IonSegment, IonSegmentButton, IonToggle, IonAccordion, IonAccordionGroup, IonTabBar, IonTabButton, IonBadge, IonBreadcrumb, IonBreadcrumbs, IonChip, IonNote, ToastController as ToastController$1, IonCol, IonRow, IonRefresher, IonRefresherContent, IonRippleEffect, IonMenuButton, IonFooter, IonListHeader, IonInfiniteScroll, IonInfiniteScrollContent, IonGrid, MenuController, IonMenu, IonMenuToggle, IonSplitPane } from '@ionic/angular/standalone';
+import { AlertController, IonAvatar, IonCard, IonIcon, IonButton, IonSpinner, IonText, IonModal, IonHeader, IonToolbar, IonContent, IonButtons, IonTitle, IonProgressBar, IonSkeletonText, IonFab, IonFabButton, IonFabList, IonLabel, IonCardContent, IonCardHeader, IonCardTitle, IonCardSubtitle, IonCheckbox, IonTextarea, IonDatetime, IonDatetimeButton, IonInput, IonSelect, IonSelectOption, IonPopover, IonList, IonItem, IonRadioGroup, IonRadio, IonRange, IonSearchbar, IonSegment, IonSegmentButton, IonToggle, IonRippleEffect, IonAccordion, IonAccordionGroup, IonTabBar, IonTabButton, IonBadge, IonBreadcrumb, IonBreadcrumbs, IonChip, IonNote, ToastController as ToastController$1, IonCol, IonRow, IonRefresher, IonRefresherContent, IonMenuButton, IonFooter, IonListHeader, IonInfiniteScroll, IonInfiniteScrollContent, IonGrid, MenuController, IonMenu, IonMenuToggle, IonSplitPane } from '@ionic/angular/standalone';
 import { addIcons } from 'ionicons';
 import { addOutline, addCircleOutline, alertOutline, alertCircleOutline, arrowBackOutline, arrowForwardOutline, arrowDownOutline, settings, settingsOutline, checkmarkCircleOutline, ellipsisHorizontalOutline, notifications, notificationsOutline, openOutline, closeOutline, chatbubblesOutline, shareOutline, heart, heartOutline, home, homeOutline, eyeOffOutline, eyeOutline, scanOutline, chevronDownOutline, chevronForwardOutline, checkmarkOutline, clipboardOutline, copyOutline, filterOutline, locationOutline, calendarOutline, businessOutline, logoTwitter, logoInstagram, logoLinkedin, logoYoutube, logoTiktok, logoFacebook, logoGoogle, createOutline, trashOutline, playOutline, peopleOutline, phonePortraitOutline, refreshOutline, documentTextOutline, lockClosedOutline, informationCircleOutline, logoNpm, removeOutline, optionsOutline, personOutline, shieldCheckmarkOutline, keyOutline, desktopOutline, logOutOutline, cloudDownloadOutline, cloudOutline, gitBranchOutline, layersOutline, serverOutline, warningOutline, bulbOutline, lockOpenOutline, diamondOutline, add, close, share, create, trash, star, camera, mic, send, downloadOutline, chevronDown, language, globeOutline, checkmark, list, grid, apps, menu, search, person, helpCircle, informationCircle, documentText, mail, calendar, folder, chevronForward, ellipsisHorizontal, chevronBack, playBack, playForward, ellipse, starOutline, starHalf, heartHalf, checkmarkCircle, timeOutline, flag, trendingUp, trendingDown, remove, analytics, people, cash, cart, eye, chatbubbleOutline, thumbsUpOutline, thumbsUp, happyOutline, happy, sadOutline, sad, chevronUp, pin, pencil, callOutline, logoWhatsapp, paperPlaneOutline, mailOutline, chevronDownCircleOutline, closeCircle, alertCircle, logoApple, logoMicrosoft, linkOutline, unlinkOutline, cloudOfflineOutline, documentOutline, attachOutline, cameraOutline, closeCircleOutline, imageOutline, chevronBackOutline, sendOutline, chatbubbleEllipsesOutline, swapVerticalOutline, chevronUpOutline, searchOutline, cartOutline, chatbubble, compass, compassOutline, gridOutline, listOutline, folderOutline, documents, documentsOutline, statsChart, statsChartOutline, menuOutline } from 'ionicons/icons';
 import { Browser } from '@capacitor/browser';
@@ -54,7 +54,7 @@ import 'prismjs/components/prism-json';
  * Current version of valtech-components.
  * This is automatically updated during the publish process.
  */
-const VERSION = '2.0.963';
+const VERSION = '2.0.964';
 
 // Control de estado de refresco (singleton a nivel de módulo)
 let isRefreshing = false;
@@ -16009,7 +16009,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
  * resolveColor('--my-custom-color'); // returns 'var(--my-custom-color)'
  * resolveColor('#ff0000'); // returns '#ff0000'
  */
-function resolveColor(color) {
+function resolveColor$1(color) {
     // Si el color empieza con "--", se asume que es una variable CSS válida
     if (color.startsWith('--')) {
         return `var(${color})`;
@@ -16064,7 +16064,7 @@ class ExpandableTextComponent {
         this.expanded = !this.expanded;
     }
     color() {
-        return resolveColor(this.props.color || this.defaultColor);
+        return resolveColor$1(this.props.color || this.defaultColor);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: ExpandableTextComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: ExpandableTextComponent, isStandalone: true, selector: "val-expandable-text", inputs: { props: "props" }, ngImport: i0, template: `
@@ -16987,7 +16987,7 @@ class LayeredCardComponent {
         if (!background) {
             return '';
         }
-        return resolveColor(background);
+        return resolveColor$1(background);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: LayeredCardComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: LayeredCardComponent, isStandalone: true, selector: "layered-card", inputs: { props: "props" }, ngImport: i0, template: `
@@ -19319,102 +19319,95 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
                 type: Input
             }] } });
 
-/**
- * val-pill
- *
- * Has two modes:
- *
- * 1. **Card mode** (legacy) — pass `content` (`ActionHeaderMetadata`). Renders a
- *    large fun-card with a title + action. Backwards compatible.
- *
- * 2. **Text-pill / badge mode** — pass `label`. Renders a compact rounded pill
- *    with configurable `color`, `weight`, `size`, optional `icon`, and an
- *    optional click action (`clickable` → emits `pillClick`).
- *
- * @example Text-pill (badge):
- * <val-pill [props]="{ label: 'v1.2.0', color: 'dark', weight: 'bold' }" />
- *
- * @example Clickable text-pill:
- * <val-pill
- *   [props]="{ label: 'Beta', color: 'primary', clickable: true }"
- *   (pillClick)="onClick($event)"
- * />
- *
- * @example Card mode (legacy):
- * <val-pill [props]="{ background: '#fff', bordered: true, content: {...} }" />
- *
- * @input preset: string - Name of preset to apply
- * @input props: PillMetadata - Configuration for the pill
- * @output pillClick: PillClickEvent - Emits when a clickable text-pill is activated
- */
+const IONIC_COLORS$9 = ['primary', 'secondary', 'tertiary', 'success', 'warning', 'danger', 'light', 'medium', 'dark'];
 class PillComponent {
     constructor() {
-        this.theme = inject(ThemeService);
         this.presets = inject(PresetService);
-        /**
-         * Pill configuration object. Values here override preset values.
-         */
+        /** Pill configuration. Overrides preset values when both are set. */
         this.props = {};
-        /**
-         * Emits when a clickable text-pill is activated (click / Enter / Space).
-         */
+        /** Emits when a clickable badge pill is activated. */
         this.pillClick = new EventEmitter();
-        /**
-         * Resolved props after merging preset + explicit props.
-         */
+        /** Emits when a notification-pill action button is pressed. */
+        this.pillAction = new EventEmitter();
         this.resolvedProps = {};
     }
     ngOnInit() {
         this.resolveProps();
     }
     ngOnChanges(changes) {
-        if (changes['preset'] || changes['props']) {
+        if (changes['preset'] || changes['props'])
             this.resolveProps();
-        }
     }
-    /**
-     * Merge preset configuration with explicit props.
-     * Explicit props take precedence over preset values.
-     */
     resolveProps() {
         const presetProps = this.preset ? this.presets.get('pill', this.preset) : {};
-        this.resolvedProps = {
-            ...presetProps,
-            ...this.props,
-        };
+        this.resolvedProps = { ...presetProps, ...this.props };
+    }
+    get isNotificationPill() {
+        return !!this.resolvedProps.notification && !this.resolvedProps.label;
     }
-    /** Text-pill mode is active when a `label` is provided. */
     get isTextPill() {
         return !!this.resolvedProps.label;
     }
-    /** Color variant for the text-pill, with a sensible default. */
     get pillColor() {
         return this.resolvedProps.color || 'medium';
     }
-    /** Font weight for the text-pill, with a sensible default. */
     get pillWeight() {
         return this.resolvedProps.weight || 'medium';
     }
-    /** Size for the text-pill, with a sensible default. */
     get pillSize() {
         return this.resolvedProps.size || 'small';
     }
-    /** Handles activation of a clickable text-pill. */
+    getIconColor() {
+        const c = this.resolvedProps.notification?.iconColor || 'warning';
+        return IONIC_COLORS$9.includes(c) ? `var(--ion-color-${c})` : c;
+    }
     onPillClick(event) {
-        if (!this.resolvedProps.clickable) {
+        if (!this.resolvedProps.clickable)
             return;
-        }
-        // For the Space key, prevent the page from scrolling.
         event?.preventDefault();
-        this.pillClick.emit({
-            token: this.resolvedProps.token,
-            label: this.resolvedProps.label,
-        });
+        this.pillClick.emit({ token: this.resolvedProps.token, label: this.resolvedProps.label });
+    }
+    onActionClick(actionToken, event) {
+        event.stopPropagation();
+        this.pillAction.emit({ actionToken, pillToken: this.resolvedProps.token });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: PillComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: PillComponent, isStandalone: true, selector: "val-pill", inputs: { preset: "preset", props: "props" }, outputs: { pillClick: "pillClick" }, usesOnChanges: true, ngImport: i0, template: `
-    @if (isTextPill) {
-      <!-- Text-pill / badge mode -->
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: PillComponent, isStandalone: true, selector: "val-pill", inputs: { preset: "preset", props: "props" }, outputs: { pillClick: "pillClick", pillAction: "pillAction" }, usesOnChanges: true, ngImport: i0, template: `
+    @if (isNotificationPill) {
+      <!-- Notification mode -->
+      <div class="notif-pill" [attr.aria-live]="'polite'">
+        @if (resolvedProps.notification?.icon) {
+          <div class="notif-pill__icon-wrap" [style.color]="getIconColor()">
+            <ion-icon [name]="resolvedProps.notification!.icon!" />
+          </div>
+        }
+
+        <div class="notif-pill__content">
+          @if (resolvedProps.notification?.time) {
+            <span class="notif-pill__time">{{ resolvedProps.notification!.time }}</span>
+          }
+          <span class="notif-pill__title">{{ resolvedProps.notification!.title }}</span>
+          @if (resolvedProps.notification?.body) {
+            <span class="notif-pill__body">{{ resolvedProps.notification!.body }}</span>
+          }
+        </div>
+
+        @if (resolvedProps.notification?.actions?.length) {
+          <div class="notif-pill__actions">
+            @for (action of resolvedProps.notification!.actions!; track action.token) {
+              <button
+                class="notif-pill__action-btn"
+                [attr.aria-label]="action.ariaLabel || action.token"
+                (click)="onActionClick(action.token, $event)"
+              >
+                <ion-icon [name]="action.icon" />
+              </button>
+            }
+          </div>
+        }
+      </div>
+    } @else if (isTextPill) {
+      <!-- Badge mode -->
       <span
         class="val-pill"
         [class.val-pill--clickable]="resolvedProps.clickable"
@@ -19427,7 +19420,7 @@ class PillComponent {
         [class.val-pill--w-bold]="pillWeight === 'bold'"
         [style.--val-pill-color]="'var(--ion-color-' + pillColor + ')'"
         [style.--val-pill-color-rgb]="'var(--ion-color-' + pillColor + '-rgb)'"
-        [style.--val-pill-contrast]="'var(--ion-color-' + pillColor + '-contrast)'"
+        [style.--val-pill-color-contrast]="'var(--ion-color-' + pillColor + '-contrast)'"
         [attr.role]="resolvedProps.clickable ? 'button' : null"
         [attr.tabindex]="resolvedProps.clickable ? 0 : null"
         [attr.aria-label]="resolvedProps.clickable ? resolvedProps.ariaLabel || resolvedProps.label : null"
@@ -19440,29 +19433,47 @@ class PillComponent {
         }
         <span class="val-pill__label">{{ resolvedProps.label }}</span>
       </span>
-    } @else {
-      <!-- Card mode (legacy fun-card) -->
-      <div
-        [id]="resolvedProps.token"
-        class="fun-card"
-        [class.bordered]="resolvedProps.bordered"
-        [class.hoverable]="resolvedProps.hoverable"
-        [ngStyle]="{
-          background: theme.IsDark ? 'var(--ion-background-color)' : resolvedProps.background,
-        }"
-      >
-        @if (resolvedProps.content) {
-          <val-action-header style="width: 100%;" [props]="resolvedProps.content" />
-        }
-      </div>
     }
-  `, isInline: true, styles: ["@charset \"UTF-8\";:root{--val-container-sm: 540px;--val-container-md: 720px;--val-container-lg: 880px;--val-container-xl: 1100px;--val-container-padding: 16px;--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)}body.dark,html.ion-palette-dark,body[data-theme=dark]{--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)}.fun-card{z-index:0;position:relative;margin-bottom:8px;cursor:pointer;background:var(--ion-card-background, var(--ion-item-background, var(--ion-background-color, #fff)));display:flex;border-radius:48px;align-items:start;padding:8px 8px 8px 24px;flex-direction:column;box-shadow:0 .25rem .75rem #12195412}.fun-card.hoverable{transition:transform .3s ease,box-shadow .3s ease}.fun-card.hoverable:hover{transform:scale(1.01);box-shadow:.1875rem .625rem .5rem #1219541a}.bordered{border:.0625rem solid var(--ion-color-medium)}.val-pill{display:inline-flex;align-items:center;gap:6px;border-radius:999px;white-space:nowrap;line-height:1;background:rgba(var(--val-pill-color-rgb),.12);color:var(--val-pill-color);border:.0625rem solid rgba(var(--val-pill-color-rgb),.22);transition:background .15s ease,transform .15s ease,box-shadow .15s ease}.val-pill__icon{font-size:1em;flex-shrink:0}.val-pill__label{display:inline-block}.val-pill--solid{background:var(--val-pill-color);color:var(--val-pill-contrast);border-color:var(--val-pill-color)}.val-pill--small{padding:5px 12px;font-size:.75rem}.val-pill--medium{padding:7px 14px;font-size:.875rem}.val-pill--large{padding:9px 18px;font-size:1rem}.val-pill--w-normal{font-weight:400}.val-pill--w-medium{font-weight:600}.val-pill--w-bold{font-weight:700}.val-pill--clickable{cursor:pointer;-webkit-tap-highlight-color:transparent}.val-pill--clickable:hover{background:rgba(var(--val-pill-color-rgb),.2);transform:translateY(-1px)}.val-pill--clickable:active{transform:translateY(0) scale(.98)}.val-pill--clickable:focus-visible{outline:none;box-shadow:0 0 0 3px rgba(var(--val-pill-color-rgb),.3)}.val-pill--clickable.val-pill--solid:hover{filter:brightness(1.08)}:host-context(body.dark) .val-pill:not(.val-pill--solid),:host-context(html.ion-palette-dark) .val-pill:not(.val-pill--solid),:host-context([data-theme=dark]) .val-pill:not(.val-pill--solid){background:rgba(var(--val-pill-color-rgb),.22);border-color:rgba(var(--val-pill-color-rgb),.32)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$5.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: ActionHeaderComponent, selector: "val-action-header", inputs: ["props"] }, { kind: "component", type: IonIcon, selector: "ion-icon", inputs: ["color", "flipRtl", "icon", "ios", "lazy", "md", "mode", "name", "sanitize", "size", "src"] }] }); }
+  `, isInline: true, styles: ["@charset \"UTF-8\";:root{--val-container-sm: 540px;--val-container-md: 720px;--val-container-lg: 880px;--val-container-xl: 1100px;--val-container-padding: 16px;--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)}body.dark,html.ion-palette-dark,body[data-theme=dark]{--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-pill{display:inline-flex;align-items:center;gap:6px;border-radius:999px;white-space:nowrap;line-height:1;background:rgba(var(--val-pill-color-rgb),.12);color:var(--val-pill-color);border:.0625rem solid rgba(var(--val-pill-color-rgb),.22);transition:background .15s ease,transform .15s ease,box-shadow .15s ease}.val-pill__icon{font-size:1em;flex-shrink:0}.val-pill__label{display:inline-block}.val-pill--solid{background:var(--val-pill-color);color:var(--val-pill-color-contrast);border-color:var(--val-pill-color)}.val-pill--small{padding:5px 12px;font-size:.75rem}.val-pill--medium{padding:7px 14px;font-size:.875rem}.val-pill--large{padding:9px 18px;font-size:1rem}.val-pill--w-normal{font-weight:400}.val-pill--w-medium{font-weight:600}.val-pill--w-bold{font-weight:700}.val-pill--clickable{cursor:pointer;-webkit-tap-highlight-color:transparent}.val-pill--clickable:hover{background:rgba(var(--val-pill-color-rgb),.2);transform:translateY(-1px)}.val-pill--clickable:active{transform:translateY(0) scale(.98)}.val-pill--clickable:focus-visible{outline:none;box-shadow:0 0 0 3px rgba(var(--val-pill-color-rgb),.3)}.val-pill--clickable.val-pill--solid:hover{filter:brightness(1.08)}:host-context(body.dark) .val-pill:not(.val-pill--solid),:host-context(html.ion-palette-dark) .val-pill:not(.val-pill--solid),:host-context([data-theme=dark]) .val-pill:not(.val-pill--solid){background:rgba(var(--val-pill-color-rgb),.22);border-color:rgba(var(--val-pill-color-rgb),.32)}.notif-pill{display:inline-flex;align-items:center;gap:12px;padding:10px 14px;border-radius:999px;background:var(--ion-color-dark);color:var(--ion-color-dark-contrast);max-width:100%;box-sizing:border-box;box-shadow:.1875rem .625rem .5rem #1219541a}.notif-pill__icon-wrap{display:flex;align-items:center;justify-content:center;flex-shrink:0;width:32px;height:32px;border-radius:50%;background:#ffffff1a;font-size:1rem}.notif-pill__content{display:flex;align-items:baseline;gap:8px;flex:1;min-width:0;overflow:hidden}.notif-pill__time{font-size:.72rem;font-weight:600;opacity:.55;flex-shrink:0;letter-spacing:.02em}.notif-pill__title{font-size:.875rem;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.notif-pill__body{font-size:.75rem;opacity:.7;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;flex-shrink:1}.notif-pill__actions{display:flex;align-items:center;gap:6px;flex-shrink:0;margin-left:4px}.notif-pill__action-btn{display:flex;align-items:center;justify-content:center;width:30px;height:30px;border-radius:50%;border:none;background:#ffffff1f;color:var(--ion-color-dark-contrast);cursor:pointer;font-size:.9rem;transition:background .15s ease,transform .1s ease;-webkit-tap-highlight-color:transparent}.notif-pill__action-btn:hover{background:#ffffff38}.notif-pill__action-btn:active{transform:scale(.9)}.notif-pill__action-btn:focus-visible{outline:none;box-shadow:0 0 0 2px #ffffff80}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: IonIcon, selector: "ion-icon", inputs: ["color", "flipRtl", "icon", "ios", "lazy", "md", "mode", "name", "sanitize", "size", "src"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: PillComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'val-pill', standalone: true, imports: [CommonModule, ActionHeaderComponent, IonIcon], template: `
-    @if (isTextPill) {
-      <!-- Text-pill / badge mode -->
+            args: [{ selector: 'val-pill', standalone: true, imports: [CommonModule, IonIcon, IonRippleEffect], template: `
+    @if (isNotificationPill) {
+      <!-- Notification mode -->
+      <div class="notif-pill" [attr.aria-live]="'polite'">
+        @if (resolvedProps.notification?.icon) {
+          <div class="notif-pill__icon-wrap" [style.color]="getIconColor()">
+            <ion-icon [name]="resolvedProps.notification!.icon!" />
+          </div>
+        }
+
+        <div class="notif-pill__content">
+          @if (resolvedProps.notification?.time) {
+            <span class="notif-pill__time">{{ resolvedProps.notification!.time }}</span>
+          }
+          <span class="notif-pill__title">{{ resolvedProps.notification!.title }}</span>
+          @if (resolvedProps.notification?.body) {
+            <span class="notif-pill__body">{{ resolvedProps.notification!.body }}</span>
+          }
+        </div>
+
+        @if (resolvedProps.notification?.actions?.length) {
+          <div class="notif-pill__actions">
+            @for (action of resolvedProps.notification!.actions!; track action.token) {
+              <button
+                class="notif-pill__action-btn"
+                [attr.aria-label]="action.ariaLabel || action.token"
+                (click)="onActionClick(action.token, $event)"
+              >
+                <ion-icon [name]="action.icon" />
+              </button>
+            }
+          </div>
+        }
+      </div>
+    } @else if (isTextPill) {
+      <!-- Badge mode -->
       <span
         class="val-pill"
         [class.val-pill--clickable]="resolvedProps.clickable"
@@ -19475,7 +19486,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
         [class.val-pill--w-bold]="pillWeight === 'bold'"
         [style.--val-pill-color]="'var(--ion-color-' + pillColor + ')'"
         [style.--val-pill-color-rgb]="'var(--ion-color-' + pillColor + '-rgb)'"
-        [style.--val-pill-contrast]="'var(--ion-color-' + pillColor + '-contrast)'"
+        [style.--val-pill-color-contrast]="'var(--ion-color-' + pillColor + '-contrast)'"
         [attr.role]="resolvedProps.clickable ? 'button' : null"
         [attr.tabindex]="resolvedProps.clickable ? 0 : null"
         [attr.aria-label]="resolvedProps.clickable ? resolvedProps.ariaLabel || resolvedProps.label : null"
@@ -19488,29 +19499,16 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
         }
         <span class="val-pill__label">{{ resolvedProps.label }}</span>
       </span>
-    } @else {
-      <!-- Card mode (legacy fun-card) -->
-      <div
-        [id]="resolvedProps.token"
-        class="fun-card"
-        [class.bordered]="resolvedProps.bordered"
-        [class.hoverable]="resolvedProps.hoverable"
-        [ngStyle]="{
-          background: theme.IsDark ? 'var(--ion-background-color)' : resolvedProps.background,
-        }"
-      >
-        @if (resolvedProps.content) {
-          <val-action-header style="width: 100%;" [props]="resolvedProps.content" />
-        }
-      </div>
     }
-  `, styles: ["@charset \"UTF-8\";:root{--val-container-sm: 540px;--val-container-md: 720px;--val-container-lg: 880px;--val-container-xl: 1100px;--val-container-padding: 16px;--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)}body.dark,html.ion-palette-dark,body[data-theme=dark]{--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)}.fun-card{z-index:0;position:relative;margin-bottom:8px;cursor:pointer;background:var(--ion-card-background, var(--ion-item-background, var(--ion-background-color, #fff)));display:flex;border-radius:48px;align-items:start;padding:8px 8px 8px 24px;flex-direction:column;box-shadow:0 .25rem .75rem #12195412}.fun-card.hoverable{transition:transform .3s ease,box-shadow .3s ease}.fun-card.hoverable:hover{transform:scale(1.01);box-shadow:.1875rem .625rem .5rem #1219541a}.bordered{border:.0625rem solid var(--ion-color-medium)}.val-pill{display:inline-flex;align-items:center;gap:6px;border-radius:999px;white-space:nowrap;line-height:1;background:rgba(var(--val-pill-color-rgb),.12);color:var(--val-pill-color);border:.0625rem solid rgba(var(--val-pill-color-rgb),.22);transition:background .15s ease,transform .15s ease,box-shadow .15s ease}.val-pill__icon{font-size:1em;flex-shrink:0}.val-pill__label{display:inline-block}.val-pill--solid{background:var(--val-pill-color);color:var(--val-pill-contrast);border-color:var(--val-pill-color)}.val-pill--small{padding:5px 12px;font-size:.75rem}.val-pill--medium{padding:7px 14px;font-size:.875rem}.val-pill--large{padding:9px 18px;font-size:1rem}.val-pill--w-normal{font-weight:400}.val-pill--w-medium{font-weight:600}.val-pill--w-bold{font-weight:700}.val-pill--clickable{cursor:pointer;-webkit-tap-highlight-color:transparent}.val-pill--clickable:hover{background:rgba(var(--val-pill-color-rgb),.2);transform:translateY(-1px)}.val-pill--clickable:active{transform:translateY(0) scale(.98)}.val-pill--clickable:focus-visible{outline:none;box-shadow:0 0 0 3px rgba(var(--val-pill-color-rgb),.3)}.val-pill--clickable.val-pill--solid:hover{filter:brightness(1.08)}:host-context(body.dark) .val-pill:not(.val-pill--solid),:host-context(html.ion-palette-dark) .val-pill:not(.val-pill--solid),:host-context([data-theme=dark]) .val-pill:not(.val-pill--solid){background:rgba(var(--val-pill-color-rgb),.22);border-color:rgba(var(--val-pill-color-rgb),.32)}\n"] }]
+  `, styles: ["@charset \"UTF-8\";:root{--val-container-sm: 540px;--val-container-md: 720px;--val-container-lg: 880px;--val-container-xl: 1100px;--val-container-padding: 16px;--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)}body.dark,html.ion-palette-dark,body[data-theme=dark]{--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-pill{display:inline-flex;align-items:center;gap:6px;border-radius:999px;white-space:nowrap;line-height:1;background:rgba(var(--val-pill-color-rgb),.12);color:var(--val-pill-color);border:.0625rem solid rgba(var(--val-pill-color-rgb),.22);transition:background .15s ease,transform .15s ease,box-shadow .15s ease}.val-pill__icon{font-size:1em;flex-shrink:0}.val-pill__label{display:inline-block}.val-pill--solid{background:var(--val-pill-color);color:var(--val-pill-color-contrast);border-color:var(--val-pill-color)}.val-pill--small{padding:5px 12px;font-size:.75rem}.val-pill--medium{padding:7px 14px;font-size:.875rem}.val-pill--large{padding:9px 18px;font-size:1rem}.val-pill--w-normal{font-weight:400}.val-pill--w-medium{font-weight:600}.val-pill--w-bold{font-weight:700}.val-pill--clickable{cursor:pointer;-webkit-tap-highlight-color:transparent}.val-pill--clickable:hover{background:rgba(var(--val-pill-color-rgb),.2);transform:translateY(-1px)}.val-pill--clickable:active{transform:translateY(0) scale(.98)}.val-pill--clickable:focus-visible{outline:none;box-shadow:0 0 0 3px rgba(var(--val-pill-color-rgb),.3)}.val-pill--clickable.val-pill--solid:hover{filter:brightness(1.08)}:host-context(body.dark) .val-pill:not(.val-pill--solid),:host-context(html.ion-palette-dark) .val-pill:not(.val-pill--solid),:host-context([data-theme=dark]) .val-pill:not(.val-pill--solid){background:rgba(var(--val-pill-color-rgb),.22);border-color:rgba(var(--val-pill-color-rgb),.32)}.notif-pill{display:inline-flex;align-items:center;gap:12px;padding:10px 14px;border-radius:999px;background:var(--ion-color-dark);color:var(--ion-color-dark-contrast);max-width:100%;box-sizing:border-box;box-shadow:.1875rem .625rem .5rem #1219541a}.notif-pill__icon-wrap{display:flex;align-items:center;justify-content:center;flex-shrink:0;width:32px;height:32px;border-radius:50%;background:#ffffff1a;font-size:1rem}.notif-pill__content{display:flex;align-items:baseline;gap:8px;flex:1;min-width:0;overflow:hidden}.notif-pill__time{font-size:.72rem;font-weight:600;opacity:.55;flex-shrink:0;letter-spacing:.02em}.notif-pill__title{font-size:.875rem;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.notif-pill__body{font-size:.75rem;opacity:.7;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;flex-shrink:1}.notif-pill__actions{display:flex;align-items:center;gap:6px;flex-shrink:0;margin-left:4px}.notif-pill__action-btn{display:flex;align-items:center;justify-content:center;width:30px;height:30px;border-radius:50%;border:none;background:#ffffff1f;color:var(--ion-color-dark-contrast);cursor:pointer;font-size:.9rem;transition:background .15s ease,transform .1s ease;-webkit-tap-highlight-color:transparent}.notif-pill__action-btn:hover{background:#ffffff38}.notif-pill__action-btn:active{transform:scale(.9)}.notif-pill__action-btn:focus-visible{outline:none;box-shadow:0 0 0 2px #ffffff80}\n"] }]
         }], propDecorators: { preset: [{
                 type: Input
             }], props: [{
                 type: Input
             }], pillClick: [{
                 type: Output
+            }], pillAction: [{
+                type: Output
             }] } });
 
 class CommandDisplayComponent {
@@ -27046,7 +27044,7 @@ const ACTION_CARD_DEFAULTS = {
 };
 
 addIcons({ chevronForwardOutline });
-const IONIC_COLORS$5 = ['primary', 'secondary', 'tertiary', 'success', 'warning', 'danger', 'light', 'medium', 'dark'];
+const IONIC_COLORS$8 = ['primary', 'secondary', 'tertiary', 'success', 'warning', 'danger', 'light', 'medium', 'dark'];
 /**
  * val-action-card
  *
@@ -27126,7 +27124,7 @@ class ActionCardComponent {
     resolveColor(color) {
         if (!color)
             return null;
-        if (IONIC_COLORS$5.includes(color)) {
+        if (IONIC_COLORS$8.includes(color)) {
             return `var(--ion-color-${color})`;
         }
         return color;
@@ -27319,7 +27317,7 @@ const MEDIA_OBJECT_DEFAULTS = {
     circle: false,
 };
 
-const IONIC_COLORS$4 = ['primary', 'secondary', 'tertiary', 'success', 'warning', 'danger', 'light', 'medium', 'dark'];
+const IONIC_COLORS$7 = ['primary', 'secondary', 'tertiary', 'success', 'warning', 'danger', 'light', 'medium', 'dark'];
 /**
  * val-media-object
  *
@@ -27359,7 +27357,7 @@ class MediaObjectComponent {
         const color = this.config().color;
         if (!color)
             return 'var(--ion-color-primary)';
-        return IONIC_COLORS$4.includes(color) ? `var(--ion-color-${color})` : color;
+        return IONIC_COLORS$7.includes(color) ? `var(--ion-color-${color})` : color;
     }
     handleLinkClick(event) {
         const link = this.config().link;
@@ -27463,7 +27461,7 @@ const STATS_BAR_DEFAULTS = {
     stackOnMobile: true,
 };
 
-const IONIC_COLORS$3 = ['primary', 'secondary', 'tertiary', 'success', 'warning', 'danger', 'light', 'medium', 'dark'];
+const IONIC_COLORS$6 = ['primary', 'secondary', 'tertiary', 'success', 'warning', 'danger', 'light', 'medium', 'dark'];
 /**
  * val-stats-bar
  *
@@ -27500,7 +27498,7 @@ class StatsBarComponent {
         const color = stat.color;
         if (!color)
             return null;
-        return IONIC_COLORS$3.includes(color) ? `var(--ion-color-${color})` : color;
+        return IONIC_COLORS$6.includes(color) ? `var(--ion-color-${color})` : color;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: StatsBarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: StatsBarComponent, isStandalone: true, selector: "val-stats-bar", inputs: { props: { classPropertyName: "props", publicName: "props", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: `
@@ -27568,7 +27566,7 @@ const ARTICLE_CARD_DEFAULTS = {
     excerptLines: 3,
 };
 
-const IONIC_COLORS$2 = ['primary', 'secondary', 'tertiary', 'success', 'warning', 'danger', 'light', 'medium', 'dark'];
+const IONIC_COLORS$5 = ['primary', 'secondary', 'tertiary', 'success', 'warning', 'danger', 'light', 'medium', 'dark'];
 /**
  * val-article-card
  *
@@ -27611,7 +27609,7 @@ class ArticleCardComponent {
         const color = this.config().topicColor;
         if (!color)
             return 'var(--ion-color-primary)';
-        return IONIC_COLORS$2.includes(color) ? `var(--ion-color-${color})` : color;
+        return IONIC_COLORS$5.includes(color) ? `var(--ion-color-${color})` : color;
     }
     handleClick(event) {
         const cfg = this.config();
@@ -27726,7 +27724,7 @@ const CTA_CARD_DEFAULTS = {
     shadowed: false,
 };
 
-const IONIC_COLORS$1 = ['primary', 'secondary', 'tertiary', 'success', 'warning', 'danger', 'light', 'medium', 'dark'];
+const IONIC_COLORS$4 = ['primary', 'secondary', 'tertiary', 'success', 'warning', 'danger', 'light', 'medium', 'dark'];
 /**
  * val-cta-card
  *
@@ -27770,7 +27768,7 @@ class CtaCardComponent {
     resolveColor(color) {
         if (!color)
             return null;
-        return IONIC_COLORS$1.includes(color) ? `var(--ion-color-${color})` : color;
+        return IONIC_COLORS$4.includes(color) ? `var(--ion-color-${color})` : color;
     }
     getBackground() {
         return this.resolveColor(this.config().backgroundColor) || 'var(--ion-color-light, #f4f5f8)';
@@ -32913,7 +32911,7 @@ const FUN_MODAL_DEFAULTS = {
     imageRadius: 16,
 };
 
-const IONIC_COLORS = ['primary', 'secondary', 'tertiary', 'success', 'warning', 'danger', 'light', 'medium', 'dark'];
+const IONIC_COLORS$3 = ['primary', 'secondary', 'tertiary', 'success', 'warning', 'danger', 'light', 'medium', 'dark'];
 /**
  * `val-fun-modal` — modal moderno tipo promo/onboarding: imagen o ilustración
  * arriba, título, cuerpo y botones de acción, con redondeo personalizable.
@@ -32963,7 +32961,7 @@ class FunModalComponent {
         const color = this.config().backgroundColor;
         if (!color)
             return null;
-        return IONIC_COLORS.includes(color) ? `var(--ion-color-${color})` : color;
+        return IONIC_COLORS$3.includes(color) ? `var(--ion-color-${color})` : color;
     }
     close() {
         this._isOpen = false;
@@ -34712,7 +34710,7 @@ class ItemListComponent {
      * Devuelve el color de borde de la lista.
      */
     color() {
-        return resolveColor(this.props.color || this.defaultColor);
+        return resolveColor$1(this.props.color || this.defaultColor);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: ItemListComponent, deps: [{ token: IconService }], target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: ItemListComponent, isStandalone: true, selector: "val-item-list", inputs: { props: "props" }, outputs: { onClick: "onClick", onActionClick: "onActionClick" }, ngImport: i0, template: `
@@ -42378,7 +42376,7 @@ class PageContentComponent {
         if (!bg) {
             return 'var(--ion-background-color)';
         }
-        return resolveColor(bg);
+        return resolveColor$1(bg);
     }
     /**
      * Handles header action clicks.
@@ -42784,7 +42782,7 @@ class PageWrapperComponent {
             if (!bg) {
                 return 'var(--ion-background-color)';
             }
-            return resolveColor(bg);
+            return resolveColor$1(bg);
         });
     }
     /**
@@ -51608,17 +51606,23 @@ class RequestService {
         return this.http.get(`${this.baseUrl}/my${qs}`);
     }
     getRequest(id) {
-        return this.http.get(`${this.baseUrl}/${id}`);
+        return this.http
+            .get(`${this.baseUrl}/${id}`)
+            .pipe(map$1(r => r.request));
     }
     updateRequest(id, payload) {
-        return this.http.put(`${this.baseUrl}/${id}`, payload);
+        return this.http
+            .put(`${this.baseUrl}/${id}`, payload)
+            .pipe(map$1(r => r.request));
     }
     transition(id, payload) {
         return this.http.post(`${this.baseUrl}/${id}/transition`, payload);
     }
     // ── Comments ──
     addComment(requestId, payload) {
-        return this.http.post(`${this.baseUrl}/${requestId}/comments`, payload);
+        return this.http
+            .post(`${this.baseUrl}/${requestId}/comments`, payload)
+            .pipe(map$1(r => r.comment));
     }
     listComments(requestId) {
         return this.http.get(`${this.baseUrl}/${requestId}/comments`);
@@ -51821,6 +51825,689 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
             args: [{ providedIn: 'root' }]
         }] });
 
+/**
+ * Default values for ArticleStripMetadata.
+ */
+const ARTICLE_STRIP_DEFAULTS = {
+    cardWidth: '280px',
+    gap: '16px',
+};
+
+/**
+ * val-article-strip
+ *
+ * Horizontal scroll row of article cards with a section header and an optional
+ * "see all" link/action. Reuses val-horizontal-scroll + val-article-card.
+ *
+ * @example
+ * ```html
+ * <val-article-strip
+ *   [props]="{
+ *     title: 'Latest Articles',
+ *     seeAllLabel: 'View all',
+ *     seeAllRoute: '/blog',
+ *     articles: [...]
+ *   }"
+ *   (onArticleClick)="openArticle($event)"
+ * />
+ * ```
+ */
+class ArticleStripComponent {
+    constructor() {
+        this.navigation = inject(NavigationService);
+        /** Component configuration */
+        this.props = input({ articles: [] });
+        /** Emitted when the "see all" link/button is clicked */
+        this.onSeeAll = new EventEmitter();
+        /** Re-emits the onClick event from each article card */
+        this.onArticleClick = new EventEmitter();
+        /** Merged configuration with defaults */
+        this.config = computed(() => ({
+            ...ARTICLE_STRIP_DEFAULTS,
+            articles: [],
+            ...this.props(),
+        }));
+        this.hasSeeAll = computed(() => !!(this.config().seeAllLabel &&
+            (this.config().seeAllRoute || this.config().seeAllHref || this.config().seeAllToken)));
+    }
+    handleSeeAll(event) {
+        const cfg = this.config();
+        if (cfg.seeAllHref) {
+            event.preventDefault();
+            this.navigation.openInNewTab(cfg.seeAllHref);
+        }
+        this.onSeeAll.emit(cfg.seeAllToken);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: ArticleStripComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: ArticleStripComponent, isStandalone: true, selector: "val-article-strip", inputs: { props: { classPropertyName: "props", publicName: "props", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onSeeAll: "onSeeAll", onArticleClick: "onArticleClick" }, ngImport: i0, template: `
+    @if (config().title || hasSeeAll()) {
+      <div class="article-strip__header">
+        @if (config().title) {
+          <h3 class="article-strip__title">{{ config().title }}</h3>
+        }
+
+        @if (hasSeeAll()) {
+          <a
+            class="article-strip__see-all"
+            [routerLink]="config().seeAllRoute ?? null"
+            [attr.href]="config().seeAllHref ?? null"
+            (click)="handleSeeAll($event)"
+          >
+            {{ config().seeAllLabel }}
+          </a>
+        }
+      </div>
+    }
+
+    <val-horizontal-scroll
+      [items]="config().articles"
+      [itemTemplate]="cardTpl"
+      [props]="{ gap: config().gap }"
+    ></val-horizontal-scroll>
+
+    <ng-template #cardTpl let-article>
+      <div [style.width]="config().cardWidth" [style.flex-shrink]="0">
+        <val-article-card [props]="article" (onClick)="onArticleClick.emit($event)"></val-article-card>
+      </div>
+    </ng-template>
+  `, isInline: true, styles: [":host{display:block}.article-strip__header{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:0 0 .75rem}.article-strip__title{margin:0;font-size:1.1rem;font-weight:700;color:var(--ion-text-color);line-height:1.3}.article-strip__see-all{flex-shrink:0;font-size:.875rem;font-weight:600;color:var(--ion-color-primary);text-decoration:none;transition:opacity .15s ease;cursor:pointer}.article-strip__see-all:hover{opacity:.75;text-decoration:underline}:host-context(body.dark) .article-strip__title,:host-context(html.ion-palette-dark) .article-strip__title,:host-context([data-theme=dark]) .article-strip__title{color:var(--ion-text-color)}\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: HorizontalScrollComponent, selector: "val-horizontal-scroll", inputs: ["items", "itemTemplate", "props"] }, { kind: "component", type: ArticleCardComponent, selector: "val-article-card", inputs: ["props"], outputs: ["onClick"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: ArticleStripComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'val-article-strip', standalone: true, imports: [CommonModule, RouterLink, HorizontalScrollComponent, ArticleCardComponent], template: `
+    @if (config().title || hasSeeAll()) {
+      <div class="article-strip__header">
+        @if (config().title) {
+          <h3 class="article-strip__title">{{ config().title }}</h3>
+        }
+
+        @if (hasSeeAll()) {
+          <a
+            class="article-strip__see-all"
+            [routerLink]="config().seeAllRoute ?? null"
+            [attr.href]="config().seeAllHref ?? null"
+            (click)="handleSeeAll($event)"
+          >
+            {{ config().seeAllLabel }}
+          </a>
+        }
+      </div>
+    }
+
+    <val-horizontal-scroll
+      [items]="config().articles"
+      [itemTemplate]="cardTpl"
+      [props]="{ gap: config().gap }"
+    ></val-horizontal-scroll>
+
+    <ng-template #cardTpl let-article>
+      <div [style.width]="config().cardWidth" [style.flex-shrink]="0">
+        <val-article-card [props]="article" (onClick)="onArticleClick.emit($event)"></val-article-card>
+      </div>
+    </ng-template>
+  `, styles: [":host{display:block}.article-strip__header{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:0 0 .75rem}.article-strip__title{margin:0;font-size:1.1rem;font-weight:700;color:var(--ion-text-color);line-height:1.3}.article-strip__see-all{flex-shrink:0;font-size:.875rem;font-weight:600;color:var(--ion-color-primary);text-decoration:none;transition:opacity .15s ease;cursor:pointer}.article-strip__see-all:hover{opacity:.75;text-decoration:underline}:host-context(body.dark) .article-strip__title,:host-context(html.ion-palette-dark) .article-strip__title,:host-context([data-theme=dark]) .article-strip__title{color:var(--ion-text-color)}\n"] }]
+        }], propDecorators: { onSeeAll: [{
+                type: Output
+            }], onArticleClick: [{
+                type: Output
+            }] } });
+
+/**
+ * Default values for InfoCardMetadata.
+ */
+const INFO_CARD_DEFAULTS = {
+    iconColor: 'primary',
+    bordered: true,
+    shadowed: false,
+    padding: '1.5rem',
+    borderRadius: '16px',
+};
+
+const IONIC_COLORS$2 = ['primary', 'secondary', 'tertiary', 'success', 'warning', 'danger', 'light', 'medium', 'dark'];
+/**
+ * val-info-card
+ *
+ * Card with icon + overtitle + title + subtitle on the left side, and a list
+ * of key-value pairs (label: value) on the right side. Inspired by npm's
+ * "Provenance" / metadata panel style.
+ *
+ * Two-column layout on desktop, stacked single-column on mobile.
+ *
+ * Presentational — pass already-resolved strings.
+ *
+ * @example
+ * ```html
+ * <val-info-card
+ *   [props]="{
+ *     icon: 'cube-outline',
+ *     title: 'valtech-components',
+ *     subtitle: 'v2.0.962',
+ *     keyValues: [
+ *       { label: 'License', value: 'MIT' },
+ *       { label: 'Downloads', value: '1.2M' }
+ *     ]
+ *   }"
+ * />
+ * ```
+ */
+class InfoCardComponent {
+    constructor() {
+        /** Component configuration */
+        this.props = input({});
+        /** Merged configuration with defaults */
+        this.config = computed(() => ({
+            ...INFO_CARD_DEFAULTS,
+            ...this.props(),
+        }));
+    }
+    getIconColor() {
+        const color = this.config().iconColor;
+        if (!color)
+            return `var(--ion-color-primary)`;
+        return IONIC_COLORS$2.includes(color) ? `var(--ion-color-${color})` : color;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: InfoCardComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: InfoCardComponent, isStandalone: true, selector: "val-info-card", inputs: { props: { classPropertyName: "props", publicName: "props", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: `
+    <div
+      class="info-card"
+      [class.info-card--bordered]="config().bordered"
+      [class.info-card--shadowed]="config().shadowed"
+      [style.padding]="config().padding"
+      [style.border-radius]="config().borderRadius"
+    >
+      <div class="info-card__left">
+        @if (config().icon) {
+          <ion-icon class="info-card__icon" [name]="config().icon" [style.color]="getIconColor()"></ion-icon>
+        }
+
+        @if (config().overtitle) {
+          <span class="info-card__overtitle">{{ config().overtitle }}</span>
+        }
+
+        <h3 class="info-card__title">{{ config().title }}</h3>
+
+        @if (config().subtitle) {
+          <p class="info-card__subtitle">{{ config().subtitle }}</p>
+        }
+      </div>
+
+      @if (config().keyValues?.length) {
+        <div class="info-card__right">
+          @for (kv of config().keyValues; track $index) {
+            <div class="info-card__kv">
+              <span class="info-card__kv-label">{{ kv.label }}</span>
+              <span class="info-card__kv-value">{{ kv.value }}</span>
+            </div>
+          }
+        </div>
+      }
+    </div>
+  `, isInline: true, styles: [":host{display:block}.info-card{display:flex;flex-direction:row;gap:2rem;background:var(--ion-card-background, var(--ion-background-color))}.info-card--bordered{border:1px solid var(--ion-color-light-shade, rgba(0, 0, 0, .1))}.info-card--shadowed{box-shadow:0 2px 8px #00000014}.info-card__left{display:flex;flex-direction:column;gap:.35rem;flex:1 1 0;min-width:0}.info-card__icon{font-size:2rem;margin-bottom:.25rem}.info-card__overtitle{font-size:.75rem;font-weight:600;text-transform:uppercase;letter-spacing:.08em;color:var(--ion-color-medium)}.info-card__title{margin:0;font-size:1.25rem;font-weight:700;color:var(--ion-text-color);line-height:1.3}.info-card__subtitle{margin:0;font-size:.875rem;color:var(--ion-color-medium-shade)}.info-card__right{display:flex;flex-direction:column;gap:.6rem;flex:0 0 auto;min-width:160px;max-width:260px}.info-card__kv{display:flex;flex-direction:column;gap:.1rem}.info-card__kv-label{font-size:.75rem;color:var(--ion-color-medium)}.info-card__kv-value{font-size:.9rem;font-weight:600;color:var(--ion-text-color);word-break:break-word}@media (max-width: 600px){.info-card{flex-direction:column;gap:1.25rem}.info-card__right{max-width:100%;flex-direction:row;flex-wrap:wrap;gap:.75rem 1.5rem}.info-card__kv{flex:0 0 auto}}:host-context(body.dark) .info-card--bordered,:host-context(html.ion-palette-dark) .info-card--bordered,:host-context([data-theme=dark]) .info-card--bordered{border-color:#ffffff1f}:host-context(body.dark) .info-card--shadowed,:host-context(html.ion-palette-dark) .info-card--shadowed,:host-context([data-theme=dark]) .info-card--shadowed{box-shadow:0 2px 8px #0000004d}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: IonIcon, selector: "ion-icon", inputs: ["color", "flipRtl", "icon", "ios", "lazy", "md", "mode", "name", "sanitize", "size", "src"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: InfoCardComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'val-info-card', standalone: true, imports: [CommonModule, IonIcon], template: `
+    <div
+      class="info-card"
+      [class.info-card--bordered]="config().bordered"
+      [class.info-card--shadowed]="config().shadowed"
+      [style.padding]="config().padding"
+      [style.border-radius]="config().borderRadius"
+    >
+      <div class="info-card__left">
+        @if (config().icon) {
+          <ion-icon class="info-card__icon" [name]="config().icon" [style.color]="getIconColor()"></ion-icon>
+        }
+
+        @if (config().overtitle) {
+          <span class="info-card__overtitle">{{ config().overtitle }}</span>
+        }
+
+        <h3 class="info-card__title">{{ config().title }}</h3>
+
+        @if (config().subtitle) {
+          <p class="info-card__subtitle">{{ config().subtitle }}</p>
+        }
+      </div>
+
+      @if (config().keyValues?.length) {
+        <div class="info-card__right">
+          @for (kv of config().keyValues; track $index) {
+            <div class="info-card__kv">
+              <span class="info-card__kv-label">{{ kv.label }}</span>
+              <span class="info-card__kv-value">{{ kv.value }}</span>
+            </div>
+          }
+        </div>
+      }
+    </div>
+  `, styles: [":host{display:block}.info-card{display:flex;flex-direction:row;gap:2rem;background:var(--ion-card-background, var(--ion-background-color))}.info-card--bordered{border:1px solid var(--ion-color-light-shade, rgba(0, 0, 0, .1))}.info-card--shadowed{box-shadow:0 2px 8px #00000014}.info-card__left{display:flex;flex-direction:column;gap:.35rem;flex:1 1 0;min-width:0}.info-card__icon{font-size:2rem;margin-bottom:.25rem}.info-card__overtitle{font-size:.75rem;font-weight:600;text-transform:uppercase;letter-spacing:.08em;color:var(--ion-color-medium)}.info-card__title{margin:0;font-size:1.25rem;font-weight:700;color:var(--ion-text-color);line-height:1.3}.info-card__subtitle{margin:0;font-size:.875rem;color:var(--ion-color-medium-shade)}.info-card__right{display:flex;flex-direction:column;gap:.6rem;flex:0 0 auto;min-width:160px;max-width:260px}.info-card__kv{display:flex;flex-direction:column;gap:.1rem}.info-card__kv-label{font-size:.75rem;color:var(--ion-color-medium)}.info-card__kv-value{font-size:.9rem;font-weight:600;color:var(--ion-text-color);word-break:break-word}@media (max-width: 600px){.info-card{flex-direction:column;gap:1.25rem}.info-card__right{max-width:100%;flex-direction:row;flex-wrap:wrap;gap:.75rem 1.5rem}.info-card__kv{flex:0 0 auto}}:host-context(body.dark) .info-card--bordered,:host-context(html.ion-palette-dark) .info-card--bordered,:host-context([data-theme=dark]) .info-card--bordered{border-color:#ffffff1f}:host-context(body.dark) .info-card--shadowed,:host-context(html.ion-palette-dark) .info-card--shadowed,:host-context([data-theme=dark]) .info-card--shadowed{box-shadow:0 2px 8px #0000004d}\n"] }]
+        }] });
+
+/**
+ * Default values for MetricCardMetadata.
+ */
+const METRIC_CARD_DEFAULTS = {
+    bordered: true,
+    shadowed: false,
+    padding: '1.25rem 1.5rem',
+    borderRadius: '16px',
+};
+
+/**
+ * val-metric-card
+ *
+ * Card with title + optional info link + description + horizontal stats row
+ * (val-stats-bar) + a discrete icon action button in the top-right corner.
+ *
+ * Presentational — pass already-resolved strings.
+ *
+ * @example
+ * ```html
+ * <val-metric-card
+ *   [props]="{
+ *     title: 'Email Activity',
+ *     description: 'Last 30 days',
+ *     stats: { stats: [{ label: 'Sent', value: 1240 }, { label: 'Opens', value: 680 }] },
+ *     action: { icon: 'refresh-outline', token: 'refresh' }
+ *   }"
+ *   (onAction)="handleAction($event)"
+ * />
+ * ```
+ */
+class MetricCardComponent {
+    constructor() {
+        /** Component configuration */
+        this.props = input({});
+        /** Emitted with the token of the clicked action */
+        this.onAction = new EventEmitter();
+        /** Merged configuration with defaults */
+        this.config = computed(() => ({
+            ...METRIC_CARD_DEFAULTS,
+            ...this.props(),
+        }));
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: MetricCardComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: MetricCardComponent, isStandalone: true, selector: "val-metric-card", inputs: { props: { classPropertyName: "props", publicName: "props", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onAction: "onAction" }, ngImport: i0, template: `
+    <div
+      class="metric-card"
+      [class.metric-card--bordered]="config().bordered"
+      [class.metric-card--shadowed]="config().shadowed"
+      [style.padding]="config().padding"
+      [style.border-radius]="config().borderRadius"
+    >
+      <div class="metric-card__header">
+        <div class="metric-card__header-left">
+          <h3 class="metric-card__title">{{ config().title }}</h3>
+
+          @if (config().infoLabel) {
+            <a
+              class="metric-card__info-link"
+              [routerLink]="config().infoRoute ?? null"
+              [attr.href]="config().infoHref ?? null"
+              [attr.target]="config().infoHref ? '_blank' : null"
+              [attr.rel]="config().infoHref ? 'noopener noreferrer' : null"
+            >
+              {{ config().infoLabel }}
+            </a>
+          }
+        </div>
+
+        @if (config().action; as action) {
+          <ion-button
+            class="metric-card__action"
+            fill="clear"
+            size="small"
+            [disabled]="action.disabled ?? false"
+            (click)="onAction.emit(action.token)"
+          >
+            <ion-icon [name]="action.icon" slot="icon-only"></ion-icon>
+          </ion-button>
+        }
+      </div>
+
+      @if (config().description) {
+        <p class="metric-card__description">{{ config().description }}</p>
+      }
+
+      @if (config().stats; as stats) {
+        <div class="metric-card__stats">
+          <val-stats-bar [props]="stats"></val-stats-bar>
+        </div>
+      }
+    </div>
+  `, isInline: true, styles: [":host{display:block}.metric-card{background:var(--ion-card-background, var(--ion-background-color))}.metric-card--bordered{border:1px solid var(--ion-color-light-shade, rgba(0, 0, 0, .1))}.metric-card--shadowed{box-shadow:0 2px 8px #00000014}.metric-card__header{display:flex;align-items:flex-start;justify-content:space-between;gap:.5rem;margin-bottom:.25rem}.metric-card__header-left{display:flex;flex-direction:column;gap:.2rem;flex:1 1 0;min-width:0}.metric-card__title{margin:0;font-size:1rem;font-weight:700;color:var(--ion-text-color);line-height:1.3;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.metric-card__info-link{font-size:.8rem;font-weight:500;color:var(--ion-color-primary);text-decoration:none;transition:opacity .15s ease;width:fit-content}.metric-card__info-link:hover{opacity:.75;text-decoration:underline}.metric-card__action{flex-shrink:0;margin:-6px -8px 0 0}.metric-card__description{margin:0 0 .75rem;font-size:.875rem;color:var(--ion-color-medium-shade);line-height:1.5}.metric-card__stats{margin-top:.5rem}:host-context(body.dark) .metric-card--bordered,:host-context(html.ion-palette-dark) .metric-card--bordered,:host-context([data-theme=dark]) .metric-card--bordered{border-color:#ffffff1f}:host-context(body.dark) .metric-card--shadowed,:host-context(html.ion-palette-dark) .metric-card--shadowed,:host-context([data-theme=dark]) .metric-card--shadowed{box-shadow:0 2px 8px #0000004d}\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: IonButton, selector: "ion-button", inputs: ["buttonType", "color", "disabled", "download", "expand", "fill", "form", "href", "mode", "rel", "routerAnimation", "routerDirection", "shape", "size", "strong", "target", "type"] }, { kind: "component", type: IonIcon, selector: "ion-icon", inputs: ["color", "flipRtl", "icon", "ios", "lazy", "md", "mode", "name", "sanitize", "size", "src"] }, { kind: "component", type: StatsBarComponent, selector: "val-stats-bar", inputs: ["props"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: MetricCardComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'val-metric-card', standalone: true, imports: [CommonModule, RouterLink, IonButton, IonIcon, StatsBarComponent], template: `
+    <div
+      class="metric-card"
+      [class.metric-card--bordered]="config().bordered"
+      [class.metric-card--shadowed]="config().shadowed"
+      [style.padding]="config().padding"
+      [style.border-radius]="config().borderRadius"
+    >
+      <div class="metric-card__header">
+        <div class="metric-card__header-left">
+          <h3 class="metric-card__title">{{ config().title }}</h3>
+
+          @if (config().infoLabel) {
+            <a
+              class="metric-card__info-link"
+              [routerLink]="config().infoRoute ?? null"
+              [attr.href]="config().infoHref ?? null"
+              [attr.target]="config().infoHref ? '_blank' : null"
+              [attr.rel]="config().infoHref ? 'noopener noreferrer' : null"
+            >
+              {{ config().infoLabel }}
+            </a>
+          }
+        </div>
+
+        @if (config().action; as action) {
+          <ion-button
+            class="metric-card__action"
+            fill="clear"
+            size="small"
+            [disabled]="action.disabled ?? false"
+            (click)="onAction.emit(action.token)"
+          >
+            <ion-icon [name]="action.icon" slot="icon-only"></ion-icon>
+          </ion-button>
+        }
+      </div>
+
+      @if (config().description) {
+        <p class="metric-card__description">{{ config().description }}</p>
+      }
+
+      @if (config().stats; as stats) {
+        <div class="metric-card__stats">
+          <val-stats-bar [props]="stats"></val-stats-bar>
+        </div>
+      }
+    </div>
+  `, styles: [":host{display:block}.metric-card{background:var(--ion-card-background, var(--ion-background-color))}.metric-card--bordered{border:1px solid var(--ion-color-light-shade, rgba(0, 0, 0, .1))}.metric-card--shadowed{box-shadow:0 2px 8px #00000014}.metric-card__header{display:flex;align-items:flex-start;justify-content:space-between;gap:.5rem;margin-bottom:.25rem}.metric-card__header-left{display:flex;flex-direction:column;gap:.2rem;flex:1 1 0;min-width:0}.metric-card__title{margin:0;font-size:1rem;font-weight:700;color:var(--ion-text-color);line-height:1.3;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.metric-card__info-link{font-size:.8rem;font-weight:500;color:var(--ion-color-primary);text-decoration:none;transition:opacity .15s ease;width:fit-content}.metric-card__info-link:hover{opacity:.75;text-decoration:underline}.metric-card__action{flex-shrink:0;margin:-6px -8px 0 0}.metric-card__description{margin:0 0 .75rem;font-size:.875rem;color:var(--ion-color-medium-shade);line-height:1.5}.metric-card__stats{margin-top:.5rem}:host-context(body.dark) .metric-card--bordered,:host-context(html.ion-palette-dark) .metric-card--bordered,:host-context([data-theme=dark]) .metric-card--bordered{border-color:#ffffff1f}:host-context(body.dark) .metric-card--shadowed,:host-context(html.ion-palette-dark) .metric-card--shadowed,:host-context([data-theme=dark]) .metric-card--shadowed{box-shadow:0 2px 8px #0000004d}\n"] }]
+        }], propDecorators: { onAction: [{
+                type: Output
+            }] } });
+
+/**
+ * Default values for ContentCardMetadata.
+ */
+const CONTENT_CARD_DEFAULTS = {
+    padding: '1.5rem',
+    borderRadius: '20px',
+    bordered: false,
+    shadowed: true,
+    align: 'start',
+};
+
+const IONIC_COLORS$1 = ['primary', 'secondary', 'tertiary', 'success', 'warning', 'danger', 'light', 'medium', 'dark'];
+function resolveColor(value) {
+    if (!value)
+        return undefined;
+    return IONIC_COLORS$1.includes(value) ? `var(--ion-color-${value})` : value;
+}
+/**
+ * val-content-card
+ *
+ * Generic container card with configurable padding, border radius, background
+ * color and shadow. Accepts arbitrary content via ng-content. Use it to wrap
+ * val-article, stats, or any other content that needs a card shell.
+ *
+ * @example
+ * ```html
+ * <val-content-card [props]="{ title: 'Summary', shadowed: true }">
+ *   <p>Any inner content here.</p>
+ * </val-content-card>
+ * ```
+ */
+class ContentCardComponent {
+    constructor() {
+        /** Component configuration */
+        this.props = input({});
+        /** Merged configuration with defaults */
+        this.config = computed(() => ({
+            ...CONTENT_CARD_DEFAULTS,
+            ...this.props(),
+        }));
+        this.resolvedBg = computed(() => resolveColor(this.config().backgroundColor));
+        this.resolvedColor = computed(() => resolveColor(this.config().color));
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: ContentCardComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: ContentCardComponent, isStandalone: true, selector: "val-content-card", inputs: { props: { classPropertyName: "props", publicName: "props", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: `
+    <div
+      class="content-card"
+      [class.content-card--bordered]="config().bordered"
+      [class.content-card--shadowed]="config().shadowed"
+      [class.content-card--center]="config().align === 'center'"
+      [style.padding]="config().padding"
+      [style.border-radius]="config().borderRadius"
+      [style.background-color]="resolvedBg()"
+      [style.color]="resolvedColor()"
+    >
+      @if (config().title) {
+        <h3 class="content-card__title">{{ config().title }}</h3>
+      }
+
+      @if (config().description) {
+        <p class="content-card__description">{{ config().description }}</p>
+      }
+
+      <ng-content></ng-content>
+    </div>
+  `, isInline: true, styles: [":host{display:block}.content-card{background:var(--ion-card-background, var(--ion-background-color))}.content-card--bordered{border:1px solid var(--ion-color-light-shade, rgba(0, 0, 0, .1))}.content-card--shadowed{box-shadow:0 4px 16px #00000014}.content-card--center{text-align:center}.content-card__title{margin:0 0 .5rem;font-size:1.1rem;font-weight:700;color:inherit;line-height:1.3}.content-card__description{margin:0 0 1rem;font-size:.875rem;color:var(--ion-color-medium-shade);line-height:1.5}:host-context(body.dark) .content-card--bordered,:host-context(html.ion-palette-dark) .content-card--bordered,:host-context([data-theme=dark]) .content-card--bordered{border-color:#ffffff1f}:host-context(body.dark) .content-card--shadowed,:host-context(html.ion-palette-dark) .content-card--shadowed,:host-context([data-theme=dark]) .content-card--shadowed{box-shadow:0 4px 16px #0000004d}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: ContentCardComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'val-content-card', standalone: true, imports: [CommonModule], template: `
+    <div
+      class="content-card"
+      [class.content-card--bordered]="config().bordered"
+      [class.content-card--shadowed]="config().shadowed"
+      [class.content-card--center]="config().align === 'center'"
+      [style.padding]="config().padding"
+      [style.border-radius]="config().borderRadius"
+      [style.background-color]="resolvedBg()"
+      [style.color]="resolvedColor()"
+    >
+      @if (config().title) {
+        <h3 class="content-card__title">{{ config().title }}</h3>
+      }
+
+      @if (config().description) {
+        <p class="content-card__description">{{ config().description }}</p>
+      }
+
+      <ng-content></ng-content>
+    </div>
+  `, styles: [":host{display:block}.content-card{background:var(--ion-card-background, var(--ion-background-color))}.content-card--bordered{border:1px solid var(--ion-color-light-shade, rgba(0, 0, 0, .1))}.content-card--shadowed{box-shadow:0 4px 16px #00000014}.content-card--center{text-align:center}.content-card__title{margin:0 0 .5rem;font-size:1.1rem;font-weight:700;color:inherit;line-height:1.3}.content-card__description{margin:0 0 1rem;font-size:.875rem;color:var(--ion-color-medium-shade);line-height:1.5}:host-context(body.dark) .content-card--bordered,:host-context(html.ion-palette-dark) .content-card--bordered,:host-context([data-theme=dark]) .content-card--bordered{border-color:#ffffff1f}:host-context(body.dark) .content-card--shadowed,:host-context(html.ion-palette-dark) .content-card--shadowed,:host-context([data-theme=dark]) .content-card--shadowed{box-shadow:0 4px 16px #0000004d}\n"] }]
+        }] });
+
+/**
+ * Default values for AuthCtaMetadata.
+ */
+const AUTH_CTA_DEFAULTS = {
+    align: 'center',
+    borderRadius: '0',
+    padding: '3rem 1.5rem',
+};
+
+const IONIC_COLORS = ['primary', 'secondary', 'tertiary', 'success', 'warning', 'danger', 'light', 'medium', 'dark'];
+const AUTH_CTA_I18N = {
+    es: { login: 'Iniciar sesión', register: 'Registrarse' },
+    en: { login: 'Log in', register: 'Sign up' },
+};
+/**
+ * val-auth-cta
+ *
+ * Full-width CTA section inviting unauthenticated users to sign up or log in.
+ * Desktop: text on the left, optional image on the right.
+ * Mobile: stacked, image below text.
+ *
+ * Auto-registers its own i18n defaults (AuthCta namespace) so there are never
+ * missing keys, even if the consumer does not register them.
+ *
+ * @example
+ * ```html
+ * <val-auth-cta
+ *   [props]="{
+ *     title: 'Join Valtech today',
+ *     subtitle: 'The platform built for teams that ship.',
+ *     loginRoute: '/login',
+ *     registerRoute: '/register'
+ *   }"
+ *   (onLogin)="openLogin()"
+ *   (onRegister)="openRegister()"
+ * />
+ * ```
+ */
+class AuthCtaComponent {
+    constructor() {
+        this.i18n = inject(I18nService);
+        /** Component configuration */
+        this.props = input({});
+        /** Emitted when the login button is clicked */
+        this.onLogin = new EventEmitter();
+        /** Emitted when the register button is clicked */
+        this.onRegister = new EventEmitter();
+        /** Merged configuration with defaults */
+        this.config = computed(() => ({
+            ...AUTH_CTA_DEFAULTS,
+            ...this.props(),
+        }));
+        this.loginLabel = computed(() => this.config().loginLabel ?? this.i18n.t('AuthCta.login'));
+        this.registerLabel = computed(() => this.config().registerLabel ?? this.i18n.t('AuthCta.register'));
+        this.resolvedBg = computed(() => {
+            const bg = this.config().backgroundColor;
+            if (!bg)
+                return undefined;
+            return IONIC_COLORS.includes(bg) ? `var(--ion-color-${bg})` : bg;
+        });
+        if (!this.i18n.hasNamespace('AuthCta')) {
+            this.i18n.registerContent('AuthCta', AUTH_CTA_I18N);
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: AuthCtaComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: AuthCtaComponent, isStandalone: true, selector: "val-auth-cta", inputs: { props: { classPropertyName: "props", publicName: "props", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onLogin: "onLogin", onRegister: "onRegister" }, ngImport: i0, template: `
+    <div
+      class="auth-cta"
+      [class.auth-cta--center]="config().align === 'center'"
+      [class.auth-cta--has-image]="!!config().image"
+      [style.padding]="config().padding"
+      [style.border-radius]="config().borderRadius"
+      [style.background-color]="resolvedBg()"
+    >
+      <div class="auth-cta__text">
+        @if (config().eyebrow) {
+          <span class="auth-cta__eyebrow">{{ config().eyebrow }}</span>
+        }
+
+        <h2 class="auth-cta__title">{{ config().title }}</h2>
+
+        @if (config().subtitle) {
+          <p class="auth-cta__subtitle">{{ config().subtitle }}</p>
+        }
+
+        <div class="auth-cta__actions">
+          <ion-button
+            class="auth-cta__btn-register"
+            fill="solid"
+            color="dark"
+            shape="round"
+            [routerLink]="config().registerRoute ?? null"
+            [attr.href]="config().registerHref ?? null"
+            (click)="onRegister.emit()"
+          >
+            {{ registerLabel() }}
+          </ion-button>
+
+          <ion-button
+            class="auth-cta__btn-login"
+            fill="outline"
+            color="dark"
+            shape="round"
+            [routerLink]="config().loginRoute ?? null"
+            [attr.href]="config().loginHref ?? null"
+            (click)="onLogin.emit()"
+          >
+            {{ loginLabel() }}
+          </ion-button>
+        </div>
+      </div>
+
+      @if (config().image) {
+        <div class="auth-cta__image-wrap">
+          <img class="auth-cta__image" [src]="config().image" [alt]="config().imageAlt ?? ''" loading="lazy" />
+        </div>
+      }
+    </div>
+  `, isInline: true, styles: [":host{display:block}.auth-cta{display:flex;flex-direction:row;align-items:center;gap:3rem;background:var(--ion-background-color)}.auth-cta--center{text-align:center}.auth-cta--center .auth-cta__actions{justify-content:center}.auth-cta--has-image{text-align:start}.auth-cta--has-image .auth-cta__actions{justify-content:flex-start}.auth-cta__text{flex:1 1 0;min-width:0;display:flex;flex-direction:column;gap:1rem}.auth-cta__eyebrow{font-size:.8rem;font-weight:700;text-transform:uppercase;letter-spacing:.1em;color:var(--ion-color-primary)}.auth-cta__title{margin:0;font-size:2rem;font-weight:800;line-height:1.2;color:var(--ion-text-color)}.auth-cta__subtitle{margin:0;font-size:1.05rem;line-height:1.6;color:var(--ion-color-medium-shade)}.auth-cta__actions{display:flex;flex-wrap:wrap;gap:.75rem;align-items:center;margin-top:.5rem}.auth-cta__image-wrap{flex:0 0 auto;max-width:420px;width:40%}.auth-cta__image{display:block;width:100%;height:auto;border-radius:12px;object-fit:cover}@media (max-width: 768px){.auth-cta{flex-direction:column;gap:2rem;text-align:center}.auth-cta--has-image{text-align:center}.auth-cta--has-image .auth-cta__actions{justify-content:center}.auth-cta__image-wrap{max-width:100%;width:100%}.auth-cta__actions{justify-content:center}}:host-context(body.dark) .auth-cta__title,:host-context(html.ion-palette-dark) .auth-cta__title,:host-context([data-theme=dark]) .auth-cta__title{color:var(--ion-text-color)}:host-context(body.dark) .auth-cta__subtitle,:host-context(html.ion-palette-dark) .auth-cta__subtitle,:host-context([data-theme=dark]) .auth-cta__subtitle{color:var(--ion-color-medium)}\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: IonButton, selector: "ion-button", inputs: ["buttonType", "color", "disabled", "download", "expand", "fill", "form", "href", "mode", "rel", "routerAnimation", "routerDirection", "shape", "size", "strong", "target", "type"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: AuthCtaComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'val-auth-cta', standalone: true, imports: [CommonModule, RouterLink, IonButton], template: `
+    <div
+      class="auth-cta"
+      [class.auth-cta--center]="config().align === 'center'"
+      [class.auth-cta--has-image]="!!config().image"
+      [style.padding]="config().padding"
+      [style.border-radius]="config().borderRadius"
+      [style.background-color]="resolvedBg()"
+    >
+      <div class="auth-cta__text">
+        @if (config().eyebrow) {
+          <span class="auth-cta__eyebrow">{{ config().eyebrow }}</span>
+        }
+
+        <h2 class="auth-cta__title">{{ config().title }}</h2>
+
+        @if (config().subtitle) {
+          <p class="auth-cta__subtitle">{{ config().subtitle }}</p>
+        }
+
+        <div class="auth-cta__actions">
+          <ion-button
+            class="auth-cta__btn-register"
+            fill="solid"
+            color="dark"
+            shape="round"
+            [routerLink]="config().registerRoute ?? null"
+            [attr.href]="config().registerHref ?? null"
+            (click)="onRegister.emit()"
+          >
+            {{ registerLabel() }}
+          </ion-button>
+
+          <ion-button
+            class="auth-cta__btn-login"
+            fill="outline"
+            color="dark"
+            shape="round"
+            [routerLink]="config().loginRoute ?? null"
+            [attr.href]="config().loginHref ?? null"
+            (click)="onLogin.emit()"
+          >
+            {{ loginLabel() }}
+          </ion-button>
+        </div>
+      </div>
+
+      @if (config().image) {
+        <div class="auth-cta__image-wrap">
+          <img class="auth-cta__image" [src]="config().image" [alt]="config().imageAlt ?? ''" loading="lazy" />
+        </div>
+      }
+    </div>
+  `, styles: [":host{display:block}.auth-cta{display:flex;flex-direction:row;align-items:center;gap:3rem;background:var(--ion-background-color)}.auth-cta--center{text-align:center}.auth-cta--center .auth-cta__actions{justify-content:center}.auth-cta--has-image{text-align:start}.auth-cta--has-image .auth-cta__actions{justify-content:flex-start}.auth-cta__text{flex:1 1 0;min-width:0;display:flex;flex-direction:column;gap:1rem}.auth-cta__eyebrow{font-size:.8rem;font-weight:700;text-transform:uppercase;letter-spacing:.1em;color:var(--ion-color-primary)}.auth-cta__title{margin:0;font-size:2rem;font-weight:800;line-height:1.2;color:var(--ion-text-color)}.auth-cta__subtitle{margin:0;font-size:1.05rem;line-height:1.6;color:var(--ion-color-medium-shade)}.auth-cta__actions{display:flex;flex-wrap:wrap;gap:.75rem;align-items:center;margin-top:.5rem}.auth-cta__image-wrap{flex:0 0 auto;max-width:420px;width:40%}.auth-cta__image{display:block;width:100%;height:auto;border-radius:12px;object-fit:cover}@media (max-width: 768px){.auth-cta{flex-direction:column;gap:2rem;text-align:center}.auth-cta--has-image{text-align:center}.auth-cta--has-image .auth-cta__actions{justify-content:center}.auth-cta__image-wrap{max-width:100%;width:100%}.auth-cta__actions{justify-content:center}}:host-context(body.dark) .auth-cta__title,:host-context(html.ion-palette-dark) .auth-cta__title,:host-context([data-theme=dark]) .auth-cta__title{color:var(--ion-text-color)}:host-context(body.dark) .auth-cta__subtitle,:host-context(html.ion-palette-dark) .auth-cta__subtitle,:host-context([data-theme=dark]) .auth-cta__subtitle{color:var(--ion-color-medium)}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { onLogin: [{
+                type: Output
+            }], onRegister: [{
+                type: Output
+            }] } });
+
 /*
  * Public API Surface of valtech-components
  */
@@ -51830,5 +52517,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
  * Generated bundle index. Do not edit.
  */
 
-export { ACTION_CARD_DEFAULTS, AD_SIZE_MAP, API_TABLE_COLUMN_LABELS, ARTICLE_CARD_DEFAULTS, ARTICLE_SPACING, AVATAR_UPLOAD_DEFAULTS, AccordionComponent, ActionCardComponent, ActionHeaderComponent, ActionType, AdSlotComponent, AdsLoaderService, AdsService, AlertBoxComponent, AnalyticsErrorHandler, AnalyticsRouterTracker, AnalyticsService, AnimatedTerminalComponent, AppConfigService, AppVersionService, ArticleBuilder, ArticleCardComponent, ArticleComponent, AttachmentUploaderComponent, AuthBackgroundComponent, AuthService, AuthStateService, AuthStorageService, AuthSyncService, AvatarComponent, AvatarUploadComponent, BOTTOM_NAV_DEFAULTS, BannerComponent, BaseDefault, BlogPostBuilder, BottomNavComponent, BoxComponent, BreadcrumbComponent, ButtonComponent, ButtonGroupComponent, CALLOUT_LABELS, CHEV_KEYS, CIRCLE_KEYS, COMMON_COUNTRY_CODES, COMMON_CURRENCIES, CORNER_KEYS, CTA_CARD_DEFAULTS, CURRENCY_INFO, CardComponent, CardSection, CardType, CardsCarouselComponent, ChangeEmailModalComponent, ChangePasswordModalComponent, CheckInputComponent, CheckboxRadioInputComponent, ChipGroupComponent, ClearDefault, ClearDefaultBlock, ClearDefaultFull, ClearDefaultRound, ClearDefaultRoundBlock, ClearDefaultRoundFull, CodeDisplayComponent, CommandDisplayComponent, CommentComponent, CommentInputComponent, CommentSectionComponent, CompanyFooterComponent, ComponentStates, ConfirmationDialogService, ContainerComponent, ContentLoaderComponent, ContentReactionComponent, ContentService, ContentTransformer, CookieBannerComponent, CountdownComponent, CtaCardComponent, CurrencyInputComponent, DEFAULT_ADS_CONFIG, DEFAULT_APP_CONFIG_SERVICE_CONFIG, DEFAULT_APP_VERSION_SERVICE_CONFIG, DEFAULT_AUTH_CONFIG, DEFAULT_BACK_HEADER, DEFAULT_CANCEL_BUTTON, DEFAULT_CHECK_INTERVAL_MS, DEFAULT_CONFIRM_BUTTON, DEFAULT_COUNTDOWN_LABELS, DEFAULT_COUNTDOWN_LABELS_EN, DEFAULT_DEBUG_CONSOLE_CONFIG, DEFAULT_DONATION_CONFIG, DEFAULT_EMPTY_STATE, DEFAULT_EMULATOR_CONFIG, DEFAULT_FEEDBACK_CONFIG, DEFAULT_FEEDBACK_TYPE_OPTIONS, DEFAULT_HOME_HEADER, DEFAULT_INFINITE_LIST_METADATA, DEFAULT_MODAL_CANCEL_BUTTON, DEFAULT_MODAL_CONFIRM_BUTTON, DEFAULT_PAGE_SIZE_OPTIONS, DEFAULT_PLATFORMS, DEFAULT_REFRESHER_METADATA, DEFAULT_SKELETON_CONFIG, DEFAULT_SPLASH_SCREEN_CONFIG, DataTableComponent, DateInputComponent, DateRangeInputComponent, DebugConsoleComponent, DetailSkeletonComponent, DeviceService, DisplayComponent, DividerComponent, DocsApiTableComponent, DocsBreadcrumbComponent, DocsBuilder, DocsCalloutComponent, DocsCodeExampleComponent, DocsLayoutComponent, DocsNavLinksComponent, DocsNavigationService, DocsPageComponent, DocsSearchComponent, DocsSectionComponent, DocsShellComponent, DocsSidebarComponent, DocsTocComponent, DonationService, DownloadService, EmailInputComponent, EmptyStateComponent, ExpandableTextComponent, FEATURES_LIST_DEFAULTS, FUN_MODAL_DEFAULTS, FabComponent, FaqComponent, FeaturesListComponent, FeedbackFormComponent, FeedbackService, FileInputComponent, FirebaseService, FirestoreCollectionFactory, FirestoreService, FooterComponent, FooterLinksComponent, FormComponent, FormFooterComponent, FormSkeletonComponent, FunHeaderComponent, FunModalComponent, GlassComponent, GlowCardComponent, GlowComponent, GridSkeletonComponent, HANDOFF_ROUTE_PARAM, HANDOFF_TOKEN_PARAM, HandoffService, HasPermissionDirective, HeaderComponent, HintComponent, HorizontalScrollComponent, HourInputComponent, HrefComponent, I18nService, IMAGE_DEFAULTS, INITIAL_AUTH_STATE, INITIAL_MFA_STATE, INVITATION_CARD_DEFAULTS, Icon, IconComponent, IconService, ImageComponent, ImageCropComponent, ImageService, InAppBrowserService, InfiniteListComponent, InfoComponent, InputI18nHelper, InputType, InvitationCardComponent, ItemListComponent, LANG_STORAGE_KEY$1 as LANG_STORAGE_KEY, LEGAL_CONTENT_CONFIG, LOGIN_DEFAULTS, LandingSplitComponent, LandingStepsComponent, LanguageSelectorComponent, LayeredCardComponent, LegalContentService, LegalLinkService, LinkComponent, LinkProcessorService, LinkedProvidersComponent, LinksAccordionComponent, LinksCakeComponent, ListSkeletonComponent, LoadingDirective, LocalStorageService, LocaleService, LoginComponent, MEDIA_OBJECT_DEFAULTS, MEMBER_CARD_DEFAULTS, MODAL_SIZES, MOTIF_KEYS, MOTION, MaintenancePageComponent, MarkdownArticleParserService, MediaObjectComponent, MemberCardComponent, MenuComponent, MessagingService, MetaService, MfaModalComponent, ModalService, ModalShellComponent, MultiSelectSearchComponent, NUM_KEYS, NavigationService, NetworkBannerComponent, NetworkStatusService, NewsBuilder, NoContentComponent, NotesBoxComponent, NotificationActionService, NotificationsService, NumberFromToComponent, NumberInputComponent, NumberStepperComponent, OAUTH_PROVIDERS_INFO, OAuthCallbackComponent, OAuthService, OrgService, OrgSwitchService, OutlineDefault, OutlineDefaultBlock, OutlineDefaultFull, OutlineDefaultRound, OutlineDefaultRoundBlock, OutlineDefaultRoundFull, PATTERN_MOTIFS, PATTERN_PALETTES, PATTERN_STYLE_CONFIGS, PLATFORM_CONFIGS, PageContentComponent, PageLinksComponent, PageRefreshService, PageTemplateComponent, PageWavesComponent, PageWrapperComponent, PaginationComponent, PaginationService, PasswordInputComponent, PatternComponent, PhoneInputComponent, PillComponent, PinInputComponent, PlainCodeBoxComponent, PopoverSelectorComponent, PreferencesService, PresetService, PriceTagComponent, PrimarySolidBlockButton, PrimarySolidBlockHrefButton, PrimarySolidBlockIconButton, PrimarySolidBlockIconHrefButton, PrimarySolidDefaultRoundButton, PrimarySolidDefaultRoundHrefButton, PrimarySolidDefaultRoundIconButton, PrimarySolidDefaultRoundIconHrefButton, PrimarySolidFullButton, PrimarySolidFullHrefButton, PrimarySolidFullIconButton, PrimarySolidFullIconHrefButton, PrimarySolidLargeRoundButton, PrimarySolidLargeRoundHrefButton, PrimarySolidLargeRoundIconButton, PrimarySolidLargeRoundIconHrefButton, PrimarySolidSmallRoundButton, PrimarySolidSmallRoundHrefButton, PrimarySolidSmallRoundIconButton, PrimarySolidSmallRoundIconHrefButton, ProcessLinksPipe, ProfileSkeletonComponent, ProgressBarComponent, ProgressRingComponent, ProgressStatusComponent, PrompterComponent, QR_PRESETS, QrCodeComponent, QrGeneratorService, QueryBuilder, QuoteBoxComponent, REQUEST_STATUSES, RadioInputComponent, RangeInputComponent, RatingComponent, RefresherComponent, RequestFirestoreService, RequestFormBuilderService, RequestService, RightsFooterComponent, RotatingTextComponent, SEARCH_HEADER_DEFAULTS, SHAPE_KEYS, SHARE_PROFILE_MODAL_DEFAULTS, SKELETON_LAYOUT_DEFAULT_ROWS, SKELETON_PRESETS, SOLID_KEYS, STATS_BAR_DEFAULTS, STROKE_KEYS, SearchHeaderComponent, SearchSelectorComponent, SearchbarComponent, SecondarySolidBlockButton, SecondarySolidBlockHrefButton, SecondarySolidBlockIconButton, SecondarySolidBlockIconHrefButton, SecondarySolidDefaultRoundButton, SecondarySolidDefaultRoundHrefButton, SecondarySolidDefaultRoundIconButton, SecondarySolidDefaultRoundIconHrefButton, SecondarySolidFullButton, SecondarySolidFullHrefButton, SecondarySolidFullIconButton, SecondarySolidFullIconHrefButton, SecondarySolidLargeRoundButton, SecondarySolidLargeRoundHrefButton, SecondarySolidLargeRoundIconButton, SecondarySolidLargeRoundIconHrefButton, SecondarySolidSmallRoundButton, SecondarySolidSmallRoundHrefButton, SecondarySolidSmallRoundIconButton, SecondarySolidSmallRoundIconHrefButton, SegmentControlComponent, SelectSearchComponent, SessionService, ShareButtonsComponent, ShareProfileModalComponent, SimpleComponent, SkeletonComponent, SkeletonLayoutComponent, SkeletonService, SolidBlockButton, SolidDefault, SolidDefaultBlock, SolidDefaultButton, SolidDefaultFull, SolidDefaultRound, SolidDefaultRoundBlock, SolidDefaultRoundButton, SolidDefaultRoundFull, SolidFullButton, SolidLargeButton, SolidLargeRoundButton, SolidSmallButton, SolidSmallRoundButton, SplashScreenService, StatsBarComponent, StatsCardComponent, StepperComponent, StorageService, SwipeCarouselComponent, TRI_KEYS, TabbedContentComponent, TableSkeletonComponent, TabsComponent, Terminal404Component, TestimonialCardComponent, TestimonialCarouselComponent, TextComponent, TextInputComponent, TextareaInputComponent, ThemeOption, ThemeService, TimelineComponent, TitleBlockComponent, TitleComponent, ToastService, ToggleInputComponent, TokenService, ToolbarActionType, ToolbarComponent, TranslatePipe, TypedCollection, UPDATE_BANNER_DEFAULT_CONTENT, UPDATE_BANNER_I18N_NAMESPACE, UpdateBannerComponent, UserAvatarComponent, UsernameInputComponent, VALTECH_ADS_CONFIG, VALTECH_APP_CONFIG, VALTECH_APP_VERSION, VALTECH_AUTH_CONFIG, VALTECH_COMPANY_LINKS, VALTECH_CONTENT_CONFIG, VALTECH_DEBUG_CONSOLE, VALTECH_DEFAULT_CONTENT, VALTECH_DONATION_CONFIG, VALTECH_FEEDBACK_CONFIG, VALTECH_FIREBASE_CONFIG, VALTECH_FOOTER_I18N, VALTECH_FOOTER_LOGO, VALTECH_LANGUAGE_SELECTOR, VALTECH_LEGAL_CONFIG, VALTECH_NETWORK_ERROR_KEY, VALTECH_SITE_PATHS, VALTECH_SOCIAL_LINKS, VALTECH_SPLASH_SCREEN, VALTECH_WEB_BASE_URLS, VERSION, ValtechErrorService, WizardComponent, WizardFooterComponent, applyDefaultValueToControl, authGuard, authInterceptor, authPasswordValidator, blogPost, buildFooterLinks, buildPath, collections, connectPageRefresh, createErrorStateProps, createFirebaseConfig, createGlowCardProps, createInitialPaginationState, createNumberFromToField, createRefreshableStream, createTitleProps, docs, errorLoggingInterceptor, extractPathParams, generatePatternTiles, generateRandomTile, getAppInfo, getAppVersion, getCollectionPath, getDocumentId, getTimeOfDayKey, goToTop, guestGuard, hasEmulators, interpretError, isAtEnd, isCollectionPath, isDocumentPath, isEmulatorMode, isValidPath, joinPath, maxLength, mulberry32, news, parseMarkdownArticle, permissionGuard, permissionGuardFromRoute, provideLegalContent, provideSplashScreen, provideValtechAds, provideValtechAppConfig, provideValtechAppVersion, provideValtechAuth, provideValtechAuthInterceptor, provideValtechContent, provideValtechDebugConsole, provideValtechDonations, provideValtechErrorHandling, provideValtechFeedback, provideValtechFirebase, provideValtechI18n, provideValtechLegal, provideValtechPresets, provideValtechSite, provideValtechSkeleton, query, renderPatternSvgInner, replaceSpecialChars, resolveColor, resolveInputDefaultValue, resolveWebBaseUrl, roleGuard, storagePaths, superAdminGuard, toArticle };
+export { ACTION_CARD_DEFAULTS, AD_SIZE_MAP, API_TABLE_COLUMN_LABELS, ARTICLE_CARD_DEFAULTS, ARTICLE_SPACING, ARTICLE_STRIP_DEFAULTS, AUTH_CTA_DEFAULTS, AVATAR_UPLOAD_DEFAULTS, AccordionComponent, ActionCardComponent, ActionHeaderComponent, ActionType, AdSlotComponent, AdsLoaderService, AdsService, AlertBoxComponent, AnalyticsErrorHandler, AnalyticsRouterTracker, AnalyticsService, AnimatedTerminalComponent, AppConfigService, AppVersionService, ArticleBuilder, ArticleCardComponent, ArticleComponent, ArticleStripComponent, AttachmentUploaderComponent, AuthBackgroundComponent, AuthCtaComponent, AuthService, AuthStateService, AuthStorageService, AuthSyncService, AvatarComponent, AvatarUploadComponent, BOTTOM_NAV_DEFAULTS, BannerComponent, BaseDefault, BlogPostBuilder, BottomNavComponent, BoxComponent, BreadcrumbComponent, ButtonComponent, ButtonGroupComponent, CALLOUT_LABELS, CHEV_KEYS, CIRCLE_KEYS, COMMON_COUNTRY_CODES, COMMON_CURRENCIES, CONTENT_CARD_DEFAULTS, CORNER_KEYS, CTA_CARD_DEFAULTS, CURRENCY_INFO, CardComponent, CardSection, CardType, CardsCarouselComponent, ChangeEmailModalComponent, ChangePasswordModalComponent, CheckInputComponent, CheckboxRadioInputComponent, ChipGroupComponent, ClearDefault, ClearDefaultBlock, ClearDefaultFull, ClearDefaultRound, ClearDefaultRoundBlock, ClearDefaultRoundFull, CodeDisplayComponent, CommandDisplayComponent, CommentComponent, CommentInputComponent, CommentSectionComponent, CompanyFooterComponent, ComponentStates, ConfirmationDialogService, ContainerComponent, ContentCardComponent, ContentLoaderComponent, ContentReactionComponent, ContentService, ContentTransformer, CookieBannerComponent, CountdownComponent, CtaCardComponent, CurrencyInputComponent, DEFAULT_ADS_CONFIG, DEFAULT_APP_CONFIG_SERVICE_CONFIG, DEFAULT_APP_VERSION_SERVICE_CONFIG, DEFAULT_AUTH_CONFIG, DEFAULT_BACK_HEADER, DEFAULT_CANCEL_BUTTON, DEFAULT_CHECK_INTERVAL_MS, DEFAULT_CONFIRM_BUTTON, DEFAULT_COUNTDOWN_LABELS, DEFAULT_COUNTDOWN_LABELS_EN, DEFAULT_DEBUG_CONSOLE_CONFIG, DEFAULT_DONATION_CONFIG, DEFAULT_EMPTY_STATE, DEFAULT_EMULATOR_CONFIG, DEFAULT_FEEDBACK_CONFIG, DEFAULT_FEEDBACK_TYPE_OPTIONS, DEFAULT_HOME_HEADER, DEFAULT_INFINITE_LIST_METADATA, DEFAULT_MODAL_CANCEL_BUTTON, DEFAULT_MODAL_CONFIRM_BUTTON, DEFAULT_PAGE_SIZE_OPTIONS, DEFAULT_PLATFORMS, DEFAULT_REFRESHER_METADATA, DEFAULT_SKELETON_CONFIG, DEFAULT_SPLASH_SCREEN_CONFIG, DataTableComponent, DateInputComponent, DateRangeInputComponent, DebugConsoleComponent, DetailSkeletonComponent, DeviceService, DisplayComponent, DividerComponent, DocsApiTableComponent, DocsBreadcrumbComponent, DocsBuilder, DocsCalloutComponent, DocsCodeExampleComponent, DocsLayoutComponent, DocsNavLinksComponent, DocsNavigationService, DocsPageComponent, DocsSearchComponent, DocsSectionComponent, DocsShellComponent, DocsSidebarComponent, DocsTocComponent, DonationService, DownloadService, EmailInputComponent, EmptyStateComponent, ExpandableTextComponent, FEATURES_LIST_DEFAULTS, FUN_MODAL_DEFAULTS, FabComponent, FaqComponent, FeaturesListComponent, FeedbackFormComponent, FeedbackService, FileInputComponent, FirebaseService, FirestoreCollectionFactory, FirestoreService, FooterComponent, FooterLinksComponent, FormComponent, FormFooterComponent, FormSkeletonComponent, FunHeaderComponent, FunModalComponent, GlassComponent, GlowCardComponent, GlowComponent, GridSkeletonComponent, HANDOFF_ROUTE_PARAM, HANDOFF_TOKEN_PARAM, HandoffService, HasPermissionDirective, HeaderComponent, HintComponent, HorizontalScrollComponent, HourInputComponent, HrefComponent, I18nService, IMAGE_DEFAULTS, INFO_CARD_DEFAULTS, INITIAL_AUTH_STATE, INITIAL_MFA_STATE, INVITATION_CARD_DEFAULTS, Icon, IconComponent, IconService, ImageComponent, ImageCropComponent, ImageService, InAppBrowserService, InfiniteListComponent, InfoCardComponent, InfoComponent, InputI18nHelper, InputType, InvitationCardComponent, ItemListComponent, LANG_STORAGE_KEY$1 as LANG_STORAGE_KEY, LEGAL_CONTENT_CONFIG, LOGIN_DEFAULTS, LandingSplitComponent, LandingStepsComponent, LanguageSelectorComponent, LayeredCardComponent, LegalContentService, LegalLinkService, LinkComponent, LinkProcessorService, LinkedProvidersComponent, LinksAccordionComponent, LinksCakeComponent, ListSkeletonComponent, LoadingDirective, LocalStorageService, LocaleService, LoginComponent, MEDIA_OBJECT_DEFAULTS, MEMBER_CARD_DEFAULTS, METRIC_CARD_DEFAULTS, MODAL_SIZES, MOTIF_KEYS, MOTION, MaintenancePageComponent, MarkdownArticleParserService, MediaObjectComponent, MemberCardComponent, MenuComponent, MessagingService, MetaService, MetricCardComponent, MfaModalComponent, ModalService, ModalShellComponent, MultiSelectSearchComponent, NUM_KEYS, NavigationService, NetworkBannerComponent, NetworkStatusService, NewsBuilder, NoContentComponent, NotesBoxComponent, NotificationActionService, NotificationsService, NumberFromToComponent, NumberInputComponent, NumberStepperComponent, OAUTH_PROVIDERS_INFO, OAuthCallbackComponent, OAuthService, OrgService, OrgSwitchService, OutlineDefault, OutlineDefaultBlock, OutlineDefaultFull, OutlineDefaultRound, OutlineDefaultRoundBlock, OutlineDefaultRoundFull, PATTERN_MOTIFS, PATTERN_PALETTES, PATTERN_STYLE_CONFIGS, PLATFORM_CONFIGS, PageContentComponent, PageLinksComponent, PageRefreshService, PageTemplateComponent, PageWavesComponent, PageWrapperComponent, PaginationComponent, PaginationService, PasswordInputComponent, PatternComponent, PhoneInputComponent, PillComponent, PinInputComponent, PlainCodeBoxComponent, PopoverSelectorComponent, PreferencesService, PresetService, PriceTagComponent, PrimarySolidBlockButton, PrimarySolidBlockHrefButton, PrimarySolidBlockIconButton, PrimarySolidBlockIconHrefButton, PrimarySolidDefaultRoundButton, PrimarySolidDefaultRoundHrefButton, PrimarySolidDefaultRoundIconButton, PrimarySolidDefaultRoundIconHrefButton, PrimarySolidFullButton, PrimarySolidFullHrefButton, PrimarySolidFullIconButton, PrimarySolidFullIconHrefButton, PrimarySolidLargeRoundButton, PrimarySolidLargeRoundHrefButton, PrimarySolidLargeRoundIconButton, PrimarySolidLargeRoundIconHrefButton, PrimarySolidSmallRoundButton, PrimarySolidSmallRoundHrefButton, PrimarySolidSmallRoundIconButton, PrimarySolidSmallRoundIconHrefButton, ProcessLinksPipe, ProfileSkeletonComponent, ProgressBarComponent, ProgressRingComponent, ProgressStatusComponent, PrompterComponent, QR_PRESETS, QrCodeComponent, QrGeneratorService, QueryBuilder, QuoteBoxComponent, REQUEST_STATUSES, RadioInputComponent, RangeInputComponent, RatingComponent, RefresherComponent, RequestFirestoreService, RequestFormBuilderService, RequestService, RightsFooterComponent, RotatingTextComponent, SEARCH_HEADER_DEFAULTS, SHAPE_KEYS, SHARE_PROFILE_MODAL_DEFAULTS, SKELETON_LAYOUT_DEFAULT_ROWS, SKELETON_PRESETS, SOLID_KEYS, STATS_BAR_DEFAULTS, STROKE_KEYS, SearchHeaderComponent, SearchSelectorComponent, SearchbarComponent, SecondarySolidBlockButton, SecondarySolidBlockHrefButton, SecondarySolidBlockIconButton, SecondarySolidBlockIconHrefButton, SecondarySolidDefaultRoundButton, SecondarySolidDefaultRoundHrefButton, SecondarySolidDefaultRoundIconButton, SecondarySolidDefaultRoundIconHrefButton, SecondarySolidFullButton, SecondarySolidFullHrefButton, SecondarySolidFullIconButton, SecondarySolidFullIconHrefButton, SecondarySolidLargeRoundButton, SecondarySolidLargeRoundHrefButton, SecondarySolidLargeRoundIconButton, SecondarySolidLargeRoundIconHrefButton, SecondarySolidSmallRoundButton, SecondarySolidSmallRoundHrefButton, SecondarySolidSmallRoundIconButton, SecondarySolidSmallRoundIconHrefButton, SegmentControlComponent, SelectSearchComponent, SessionService, ShareButtonsComponent, ShareProfileModalComponent, SimpleComponent, SkeletonComponent, SkeletonLayoutComponent, SkeletonService, SolidBlockButton, SolidDefault, SolidDefaultBlock, SolidDefaultButton, SolidDefaultFull, SolidDefaultRound, SolidDefaultRoundBlock, SolidDefaultRoundButton, SolidDefaultRoundFull, SolidFullButton, SolidLargeButton, SolidLargeRoundButton, SolidSmallButton, SolidSmallRoundButton, SplashScreenService, StatsBarComponent, StatsCardComponent, StepperComponent, StorageService, SwipeCarouselComponent, TRI_KEYS, TabbedContentComponent, TableSkeletonComponent, TabsComponent, Terminal404Component, TestimonialCardComponent, TestimonialCarouselComponent, TextComponent, TextInputComponent, TextareaInputComponent, ThemeOption, ThemeService, TimelineComponent, TitleBlockComponent, TitleComponent, ToastService, ToggleInputComponent, TokenService, ToolbarActionType, ToolbarComponent, TranslatePipe, TypedCollection, UPDATE_BANNER_DEFAULT_CONTENT, UPDATE_BANNER_I18N_NAMESPACE, UpdateBannerComponent, UserAvatarComponent, UsernameInputComponent, VALTECH_ADS_CONFIG, VALTECH_APP_CONFIG, VALTECH_APP_VERSION, VALTECH_AUTH_CONFIG, VALTECH_COMPANY_LINKS, VALTECH_CONTENT_CONFIG, VALTECH_DEBUG_CONSOLE, VALTECH_DEFAULT_CONTENT, VALTECH_DONATION_CONFIG, VALTECH_FEEDBACK_CONFIG, VALTECH_FIREBASE_CONFIG, VALTECH_FOOTER_I18N, VALTECH_FOOTER_LOGO, VALTECH_LANGUAGE_SELECTOR, VALTECH_LEGAL_CONFIG, VALTECH_NETWORK_ERROR_KEY, VALTECH_SITE_PATHS, VALTECH_SOCIAL_LINKS, VALTECH_SPLASH_SCREEN, VALTECH_WEB_BASE_URLS, VERSION, ValtechErrorService, WizardComponent, WizardFooterComponent, applyDefaultValueToControl, authGuard, authInterceptor, authPasswordValidator, blogPost, buildFooterLinks, buildPath, collections, connectPageRefresh, createErrorStateProps, createFirebaseConfig, createGlowCardProps, createInitialPaginationState, createNumberFromToField, createRefreshableStream, createTitleProps, docs, errorLoggingInterceptor, extractPathParams, generatePatternTiles, generateRandomTile, getAppInfo, getAppVersion, getCollectionPath, getDocumentId, getTimeOfDayKey, goToTop, guestGuard, hasEmulators, interpretError, isAtEnd, isCollectionPath, isDocumentPath, isEmulatorMode, isValidPath, joinPath, maxLength, mulberry32, news, parseMarkdownArticle, permissionGuard, permissionGuardFromRoute, provideLegalContent, provideSplashScreen, provideValtechAds, provideValtechAppConfig, provideValtechAppVersion, provideValtechAuth, provideValtechAuthInterceptor, provideValtechContent, provideValtechDebugConsole, provideValtechDonations, provideValtechErrorHandling, provideValtechFeedback, provideValtechFirebase, provideValtechI18n, provideValtechLegal, provideValtechPresets, provideValtechSite, provideValtechSkeleton, query, renderPatternSvgInner, replaceSpecialChars, resolveColor$1 as resolveColor, resolveInputDefaultValue, resolveWebBaseUrl, roleGuard, storagePaths, superAdminGuard, toArticle };
 //# sourceMappingURL=valtech-components.mjs.map