valtech-components 2.0.778 → 2.0.780

package/fesm2022/valtech-components.mjs

@@ -5,7 +5,7 @@ import { IonAvatar, IonCard, IonIcon, IonButton, IonSpinner, IonText, IonModal,
 import * as i1 from '@angular/common';
 import { CommonModule, NgStyle, NgFor, isPlatformBrowser, NgClass } from '@angular/common';
 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, phonePortraitOutline, refreshOutline, documentTextOutline, lockClosedOutline, informationCircleOutline, logoNpm, removeOutline, optionsOutline, 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, closeCircle, alertCircle, logoApple, logoMicrosoft, linkOutline, unlinkOutline, chevronBackOutline, sendOutline, chatbubbleEllipsesOutline, swapVerticalOutline, chevronUpOutline, documentOutline, searchOutline, personOutline, cartOutline, chatbubble, compass, compassOutline, gridOutline, listOutline, folderOutline, documents, documentsOutline, statsChart, statsChartOutline, cameraOutline, bugOutline, bulbOutline, closeCircleOutline, menuOutline } from 'ionicons/icons';
+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, phonePortraitOutline, refreshOutline, documentTextOutline, lockClosedOutline, informationCircleOutline, logoNpm, removeOutline, optionsOutline, personOutline, shieldCheckmarkOutline, keyOutline, desktopOutline, logOutOutline, 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, closeCircle, alertCircle, logoApple, logoMicrosoft, linkOutline, unlinkOutline, chevronBackOutline, sendOutline, chatbubbleEllipsesOutline, swapVerticalOutline, chevronUpOutline, documentOutline, searchOutline, cartOutline, chatbubble, compass, compassOutline, gridOutline, listOutline, folderOutline, documents, documentsOutline, statsChart, statsChartOutline, cameraOutline, bugOutline, bulbOutline, closeCircleOutline, menuOutline } from 'ionicons/icons';
 import * as i1$1 from '@angular/router';
 import { Router, NavigationEnd, RouterLink, RouterOutlet, RouterModule } from '@angular/router';
 import { Browser } from '@capacitor/browser';
@@ -52,7 +52,7 @@ import 'prismjs/components/prism-json';
  * Current version of valtech-components.
  * This is automatically updated during the publish process.
  */
-const VERSION = '2.0.778';
+const VERSION = '2.0.780';
 
 /**
  * Servicio para gestionar presets de componentes.
@@ -354,6 +354,11 @@ class IconService {
             logoNpm,
             removeOutline,
             optionsOutline,
+            personOutline,
+            shieldCheckmarkOutline,
+            keyOutline,
+            desktopOutline,
+            logOutOutline,
         });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: IconService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
@@ -6141,6 +6146,284 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
                 type: Input
             }] } });
 
+/**
+ * `val-glass`
+ *
+ * Capa **glassmorphism** reusable. Frosted glass overlay con backdrop blur,
+ * tint semi-translúcido, border sutil y shadow. Acepta cualquier contenido via
+ * `<ng-content>` — desde un texto a un card entero.
+ *
+ * Ideal sobre backgrounds decorativos (val-pattern, gradients, imágenes) para
+ * mejorar legibilidad del contenido sin tapar la decoración.
+ *
+ * @example Pill sobre patrón:
+ * ```html
+ * <val-glass><h1>Buenos días</h1></val-glass>
+ * ```
+ *
+ * @example Card glass (block) con auto tint:
+ * ```html
+ * <val-glass [props]="{ tint: 'auto', display: 'block', radius: '20px', padding: '24px' }">
+ *   <p>Contenido del card</p>
+ * </val-glass>
+ * ```
+ */
+class GlassComponent {
+    constructor() {
+        this.props_ = signal({});
+        /** Snapshot reactivo de los props con defaults aplicados. */
+        this.resolvedProps = computed(() => this.props_());
+        /**
+         * Resuelve el background según `tint` + `tintAlpha`.
+         * - `'dark'` → rgba purple-dark
+         * - `'light'` → rgba blanco
+         * - `'auto'` → CSS var con fallback (resolved vía media/class del tema)
+         * - custom string → usado tal cual
+         */
+        this.bgStyle = computed(() => {
+            const p = this.resolvedProps();
+            const tint = p.tint ?? 'dark';
+            const alpha = p.tintAlpha ?? 0.55;
+            if (tint === 'dark')
+                return `rgba(14, 4, 32, ${alpha})`;
+            if (tint === 'light')
+                return `rgba(255, 255, 255, ${alpha})`;
+            if (tint === 'auto') {
+                // CSS var — definida en :host vía host bindings de tema. Fallback dark.
+                return `var(--val-glass-auto-bg, rgba(14, 4, 32, ${alpha}))`;
+            }
+            return tint; // custom rgba/hsl/hex
+        });
+        this.filterStyle = computed(() => {
+            const p = this.resolvedProps();
+            const blur = p.blur ?? 10;
+            const sat = p.saturate ?? 140;
+            return `blur(${blur}px) saturate(${sat}%)`;
+        });
+        this.borderStyle = computed(() => {
+            const showBorder = this.resolvedProps().border ?? true;
+            if (!showBorder)
+                return 'none';
+            const tint = this.resolvedProps().tint ?? 'dark';
+            // light tint → border más oscuro para visibilidad; dark tint → blanco.
+            if (tint === 'light')
+                return '1px solid rgba(0, 0, 0, 0.08)';
+            return '1px solid rgba(255, 255, 255, 0.08)';
+        });
+        this.shadowStyle = computed(() => {
+            const elevation = this.resolvedProps().elevation ?? 'md';
+            switch (elevation) {
+                case 'none':
+                    return 'none';
+                case 'sm':
+                    return '0 2px 8px rgba(0, 0, 0, 0.15)';
+                case 'lg':
+                    return '0 12px 40px rgba(0, 0, 0, 0.35)';
+                case 'md':
+                default:
+                    return '0 4px 24px rgba(0, 0, 0, 0.25)';
+            }
+        });
+    }
+    set props(value) {
+        this.props_.set(value ?? {});
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: GlassComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: GlassComponent, isStandalone: true, selector: "val-glass", inputs: { props: "props" }, ngImport: i0, template: `
+    <div
+      class="val-glass"
+      [class]="resolvedProps().cssClass || ''"
+      [style.background]="bgStyle()"
+      [style.backdrop-filter]="filterStyle()"
+      [style.-webkit-backdrop-filter]="filterStyle()"
+      [style.border-radius]="resolvedProps().radius || '14px'"
+      [style.padding]="resolvedProps().padding || '10px 18px'"
+      [style.border]="borderStyle()"
+      [style.box-shadow]="shadowStyle()"
+      [style.display]="resolvedProps().display || 'inline-block'"
+    >
+      <ng-content />
+    </div>
+  `, isInline: true, styles: [":host{display:contents}.val-glass{max-width:100%;box-sizing:border-box;transition:background .2s ease,border-color .2s ease}@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))){.val-glass{background:#0e0420d9!important}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: GlassComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'val-glass', standalone: true, imports: [CommonModule], template: `
+    <div
+      class="val-glass"
+      [class]="resolvedProps().cssClass || ''"
+      [style.background]="bgStyle()"
+      [style.backdrop-filter]="filterStyle()"
+      [style.-webkit-backdrop-filter]="filterStyle()"
+      [style.border-radius]="resolvedProps().radius || '14px'"
+      [style.padding]="resolvedProps().padding || '10px 18px'"
+      [style.border]="borderStyle()"
+      [style.box-shadow]="shadowStyle()"
+      [style.display]="resolvedProps().display || 'inline-block'"
+    >
+      <ng-content />
+    </div>
+  `, styles: [":host{display:contents}.val-glass{max-width:100%;box-sizing:border-box;transition:background .2s ease,border-color .2s ease}@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))){.val-glass{background:#0e0420d9!important}}\n"] }]
+        }], propDecorators: { props: [{
+                type: Input
+            }] } });
+
+addIcons({ personOutline });
+/**
+ * `val-user-avatar`
+ *
+ * Avatar **smart** con cadena de fallback automática:
+ *
+ *   foto (`avatarUrl`) → iniciales (de `name`/`email`) → icono persona.
+ *
+ * Si la imagen falla en cargar (404, CORS, etc.), automáticamente cae a las
+ * iniciales sin que el caller tenga que hacer nada. Color de fondo derivado
+ * deterministicamente del user para que el mismo user tenga siempre el mismo
+ * color (a menos que `background` se sobrescriba).
+ *
+ * @example
+ * ```html
+ * <val-user-avatar [props]="{ user: auth.user() }" (onClick)="goProfile()" />
+ * ```
+ */
+class UserAvatarComponent {
+    constructor() {
+        this.props_ = signal({});
+        this.imageFailed = signal(false);
+        this.onClick = new EventEmitter();
+        this.resolvedProps = computed(() => this.props_());
+        /** Resuelve los campos del user (user prop > campos sueltos). */
+        this.resolvedUser = computed(() => {
+            const p = this.resolvedProps();
+            return {
+                name: p.user?.name?.trim() || p.name?.trim() || '',
+                email: p.user?.email?.trim() || p.email?.trim() || '',
+                avatarUrl: p.user?.avatarUrl?.trim() || p.avatarUrl?.trim() || '',
+            };
+        });
+        /** URL de imagen — empty si no hay o si la carga falló. */
+        this.imageUrl = computed(() => this.resolvedUser().avatarUrl);
+        this.showImage = computed(() => !!this.imageUrl() && !this.imageFailed());
+        /** Iniciales — 1-2 chars derivados de name (preferred) o email prefix. */
+        this.initials = computed(() => {
+            const { name, email } = this.resolvedUser();
+            if (name) {
+                const parts = name.split(/\s+/).filter(Boolean);
+                if (parts.length >= 2)
+                    return parts[0][0] + parts[1][0];
+                if (parts.length === 1 && parts[0].length >= 2) {
+                    return parts[0].slice(0, 2);
+                }
+                return parts[0]?.[0] ?? '';
+            }
+            if (email) {
+                const prefix = email.split('@')[0] ?? '';
+                // Tomar 1-2 chars del prefix
+                if (prefix.length >= 2)
+                    return prefix.slice(0, 2);
+                return prefix[0] ?? '';
+            }
+            return '';
+        });
+        this.sizeClass = computed(() => this.resolvedProps().size || 'small');
+        this.shapeClass = computed(() => this.resolvedProps().shape || 'circle');
+        /** Background — explicito o derivado deterministicamente del user. */
+        this.bgColor = computed(() => {
+            const p = this.resolvedProps();
+            if (p.background)
+                return p.background;
+            const { name, email } = this.resolvedUser();
+            const seed = name || email || 'val';
+            return this.colorFromSeed(seed);
+        });
+        this.ariaLabel = computed(() => {
+            const { name, email } = this.resolvedUser();
+            return name || email || 'User avatar';
+        });
+    }
+    set props(value) {
+        this.props_.set(value ?? {});
+        this.imageFailed.set(false);
+    }
+    /** Subscribers — usado para condicionar cursor/aria. */
+    get hasClick() {
+        return this.onClick.observed;
+    }
+    onImageError() {
+        this.imageFailed.set(true);
+    }
+    onImageLoad() {
+        this.imageFailed.set(false);
+    }
+    /**
+     * Hash determinista string → HSL color del rango Valtech (purples/blues).
+     * Mismo seed → mismo color (consistencia entre sessions).
+     */
+    colorFromSeed(seed) {
+        let hash = 0;
+        for (let i = 0; i < seed.length; i++) {
+            hash = (hash * 31 + seed.charCodeAt(i)) >>> 0;
+        }
+        // Restringir a rango violet/blue (240-290°) para coherencia con palette
+        const hue = 240 + (hash % 50);
+        const sat = 55 + ((hash >>> 8) % 20); // 55-75%
+        const light = 38 + ((hash >>> 16) % 12); // 38-50% — siempre legible con fg blanco
+        return `hsl(${hue}, ${sat}%, ${light}%)`;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: UserAvatarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: UserAvatarComponent, isStandalone: true, selector: "val-user-avatar", inputs: { props: "props" }, outputs: { onClick: "onClick" }, ngImport: i0, template: `
+    <button
+      type="button"
+      class="val-user-avatar"
+      [class.bordered]="resolvedProps().bordered"
+      [class.grayscale]="resolvedProps().grayscale"
+      [class.has-click]="hasClick"
+      [class]="shapeClass() + ' ' + sizeClass() + ' ' + (resolvedProps().cssClass || '')"
+      [style.background]="!showImage() ? bgColor() : 'transparent'"
+      [style.color]="resolvedProps().foreground || '#fff'"
+      [attr.aria-label]="ariaLabel()"
+      (click)="onClick.emit()"
+    >
+      @if (showImage()) {
+        <img class="val-user-avatar__img" [src]="imageUrl()" alt="" (error)="onImageError()" (load)="onImageLoad()" />
+      } @else if (initials()) {
+        <span class="val-user-avatar__initials">{{ initials() }}</span>
+      } @else {
+        <ion-icon name="person-outline" class="val-user-avatar__icon" aria-hidden="true" />
+      }
+    </button>
+  `, isInline: true, styles: [":host{display:inline-flex}.val-user-avatar{position:relative;display:inline-flex;align-items:center;justify-content:center;overflow:hidden;padding:0;margin:0;border:none;background:var(--ion-color-medium, #92949c);color:#fff;font-weight:600;font-family:inherit;line-height:1;-webkit-user-select:none;user-select:none;cursor:default;transition:transform .15s ease,box-shadow .15s ease}.val-user-avatar.has-click{cursor:pointer}.val-user-avatar.has-click:hover{transform:scale(1.04)}.val-user-avatar.has-click:active{transform:scale(.96)}.val-user-avatar.circle{border-radius:50%}.val-user-avatar.square{border-radius:8px}.val-user-avatar.xsmall{width:24px;height:24px;font-size:.625rem}.val-user-avatar.small{width:32px;height:32px;font-size:.75rem}.val-user-avatar.medium{width:48px;height:48px;font-size:1rem}.val-user-avatar.large{width:72px;height:72px;font-size:1.5rem}.val-user-avatar.xlarge{width:96px;height:96px;font-size:2rem}.val-user-avatar.bordered{box-shadow:0 0 0 2px var(--ion-background-color, #fff)}.val-user-avatar.grayscale{filter:grayscale(100%)}.val-user-avatar__img{width:100%;height:100%;object-fit:cover;display:block}.val-user-avatar__initials{text-transform:uppercase;letter-spacing:.02em}.val-user-avatar__icon{font-size:60%}\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: UserAvatarComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'val-user-avatar', standalone: true, imports: [CommonModule, IonIcon], template: `
+    <button
+      type="button"
+      class="val-user-avatar"
+      [class.bordered]="resolvedProps().bordered"
+      [class.grayscale]="resolvedProps().grayscale"
+      [class.has-click]="hasClick"
+      [class]="shapeClass() + ' ' + sizeClass() + ' ' + (resolvedProps().cssClass || '')"
+      [style.background]="!showImage() ? bgColor() : 'transparent'"
+      [style.color]="resolvedProps().foreground || '#fff'"
+      [attr.aria-label]="ariaLabel()"
+      (click)="onClick.emit()"
+    >
+      @if (showImage()) {
+        <img class="val-user-avatar__img" [src]="imageUrl()" alt="" (error)="onImageError()" (load)="onImageLoad()" />
+      } @else if (initials()) {
+        <span class="val-user-avatar__initials">{{ initials() }}</span>
+      } @else {
+        <ion-icon name="person-outline" class="val-user-avatar__icon" aria-hidden="true" />
+      }
+    </button>
+  `, styles: [":host{display:inline-flex}.val-user-avatar{position:relative;display:inline-flex;align-items:center;justify-content:center;overflow:hidden;padding:0;margin:0;border:none;background:var(--ion-color-medium, #92949c);color:#fff;font-weight:600;font-family:inherit;line-height:1;-webkit-user-select:none;user-select:none;cursor:default;transition:transform .15s ease,box-shadow .15s ease}.val-user-avatar.has-click{cursor:pointer}.val-user-avatar.has-click:hover{transform:scale(1.04)}.val-user-avatar.has-click:active{transform:scale(.96)}.val-user-avatar.circle{border-radius:50%}.val-user-avatar.square{border-radius:8px}.val-user-avatar.xsmall{width:24px;height:24px;font-size:.625rem}.val-user-avatar.small{width:32px;height:32px;font-size:.75rem}.val-user-avatar.medium{width:48px;height:48px;font-size:1rem}.val-user-avatar.large{width:72px;height:72px;font-size:1.5rem}.val-user-avatar.xlarge{width:96px;height:96px;font-size:2rem}.val-user-avatar.bordered{box-shadow:0 0 0 2px var(--ion-background-color, #fff)}.val-user-avatar.grayscale{filter:grayscale(100%)}.val-user-avatar__img{width:100%;height:100%;object-fit:cover;display:block}.val-user-avatar__initials{text-transform:uppercase;letter-spacing:.02em}.val-user-avatar__icon{font-size:60%}\n"] }]
+        }], propDecorators: { props: [{
+                type: Input
+            }], onClick: [{
+                type: Output
+            }] } });
+
 /**
  * val-alert-box
  *
@@ -8362,95 +8645,90 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
             }] } });
 
 /**
- * val-notes-box
+ * `val-notes-box` — callout / admonition para resaltar información dentro de un
+ * flujo de texto.
  *
- * Displays a styled notes/info box with optional prefix and configurable color, size, and padding.
+ * Diseño tipo GitHub/Docusaurus: fondo tintado suave, accent en el borde
+ * izquierdo, prefijo en mayúsculas pequeñas. Funciona en light & dark.
  *
- * @example
- * <val-notes-box [props]="{ text: 'Note', prefix: 'Info', color: 'primary', textColor: 'dark', size: 'medium', rounded: true, padding: '8px' }"></val-notes-box>
+ * El color es un Ionic Color (primary, success, warning, danger, tertiary, …).
+ * No usa `ion-card` ni `ion-color="X"` como background — sino una mezcla
+ * `rgba(--ion-color-X-rgb, 0.08)` para no asfixiar el contenido.
+ *
+ * Renderiza inline HTML (`<strong>`, links via `processLinks`) cuando los
+ * flags están activos.
  *
- * @input props: NotesBoxMetadata - Configuration for the notes box (text, prefix, color, textColor, size, rounded, padding)
+ * @example
+ * <val-notes-box [props]="{
+ *   text: 'Recordá guardar tus cambios antes de salir.',
+ *   prefix: 'Tip',
+ *   color: 'tertiary',
+ *   textColor: 'dark',
+ *   size: 'medium',
+ *   rounded: true,
+ *   allowPartialBold: true,
+ * }"></val-notes-box>
  */
 class NotesBoxComponent {
-    constructor() { }
-    ngOnInit() { }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: NotesBoxComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: NotesBoxComponent, isStandalone: true, selector: "val-notes-box", inputs: { props: "props" }, ngImport: i0, template: `
     <div
-      [class.notes-box-compact]="props.compact"
-      [class.notes-box-align-center]="props.align === 'center'"
-      [class.notes-box-align-right]="props.align === 'right'"
+      class="val-notes-box"
+      [class.is-compact]="props.compact"
+      [class.is-rounded]="props.rounded"
+      [class.align-center]="props.align === 'center'"
+      [class.align-right]="props.align === 'right'"
+      [attr.data-color]="props.color || 'primary'"
+      role="note"
     >
-      <val-box
-        [props]="{
-          icon: '',
-          bordered: false,
-          color: props.color,
-          leftBorder: !props.compact,
-          rounded: props.rounded,
-          padding: props.padding || (props.compact ? '6px 12px' : undefined),
-        }"
-      >
-        <div [ngClass]="['content-container', props.size]" body>
-          @if (props.prefix) {
-            <val-text
-              [props]="{ content: props.prefix, color: props.textColor, bold: true, size: props.size }"
-            ></val-text>
-          }
-          <val-text
-            [props]="{
-              content: props.text,
-              color: props.textColor,
-              bold: false,
-              size: props.size,
-              allowPartialBold: props.allowPartialBold,
-              processLinks: props.processLinks,
-            }"
-          ></val-text>
-        </div>
-      </val-box>
+      @if (props.prefix) {
+        <div class="val-notes-box__header">{{ props.prefix }}</div>
+      }
+      <div class="val-notes-box__body" [class]="'size-' + (props.size || 'medium')">
+        <val-text
+          [props]="{
+            content: props.text,
+            color: props.textColor,
+            bold: false,
+            size: props.size,
+            allowPartialBold: props.allowPartialBold,
+            processLinks: props.processLinks,
+          }"
+        ></val-text>
+      </div>
     </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)}.content-container{display:inline-grid}.notes-box-compact{display:inline-block;width:fit-content;max-width:100%}.notes-box-compact ::ng-deep val-box ion-card{margin:0;box-shadow:none}.notes-box-align-center{text-align:center}.notes-box-align-center:not(.notes-box-compact){display:flex;justify-content:center}.notes-box-align-right{text-align:right}.notes-box-align-right:not(.notes-box-compact){display:flex;justify-content:flex-end}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: BoxComponent, selector: "val-box", inputs: ["props"], outputs: ["onClick"] }, { kind: "component", type: TextComponent, selector: "val-text", inputs: ["props"] }] }); }
+  `, 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)}:host{display:block}.val-notes-box{--notes-rgb: var(--ion-color-primary-rgb, 112, 38, 223);--notes-bg: rgba(var(--notes-rgb), .07);--notes-border: rgba(var(--notes-rgb), .18);--notes-accent: rgb(var(--notes-rgb));--notes-text: var(--ion-color-dark, #0a0612);--notes-link: rgb(var(--notes-rgb));position:relative;display:block;padding:14px 18px 14px 20px;background:var(--notes-bg);border:1px solid var(--notes-border);border-left:4px solid var(--notes-accent);border-radius:10px;color:var(--notes-text);margin:0;line-height:1.55}.val-notes-box.is-rounded{border-radius:12px}.val-notes-box[data-color=primary]{--notes-rgb: var(--ion-color-primary-rgb)}.val-notes-box[data-color=secondary]{--notes-rgb: var(--ion-color-secondary-rgb)}.val-notes-box[data-color=tertiary]{--notes-rgb: var(--ion-color-tertiary-rgb)}.val-notes-box[data-color=success]{--notes-rgb: var(--ion-color-success-rgb)}.val-notes-box[data-color=warning]{--notes-rgb: var(--ion-color-warning-rgb)}.val-notes-box[data-color=danger]{--notes-rgb: var(--ion-color-danger-rgb)}.val-notes-box[data-color=medium]{--notes-rgb: var(--ion-color-medium-rgb)}.val-notes-box[data-color=dark]{--notes-rgb: var(--ion-color-dark-rgb)}.val-notes-box[data-color=light]{--notes-rgb: var(--ion-color-medium-rgb)}.val-notes-box__header{display:block;margin:0 0 6px;font-weight:700;font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--notes-accent);font-family:var(--ion-font-family, inherit)}.val-notes-box__body{display:block;color:var(--notes-text);font-size:14px;line-height:1.6}.val-notes-box__body.size-small{font-size:13px;line-height:1.55}.val-notes-box__body.size-large{font-size:15px;line-height:1.6}.val-notes-box__body.size-xlarge{font-size:16px;line-height:1.55}.val-notes-box__body ::ng-deep val-text{display:block;color:var(--notes-text)}.val-notes-box__body ::ng-deep val-text p{margin:0;color:inherit}.val-notes-box__body ::ng-deep val-text ion-text{color:var(--notes-text)!important}.val-notes-box__body ::ng-deep val-text strong,.val-notes-box__body ::ng-deep val-text b,.val-notes-box__body ::ng-deep .partial-bold{color:var(--notes-text);font-weight:700}.val-notes-box__body ::ng-deep val-text a{color:var(--notes-link);text-decoration:underline;text-underline-offset:2px;font-weight:600}.val-notes-box__body ::ng-deep val-text a:hover{opacity:.85}.val-notes-box.align-center,.val-notes-box.align-center .val-notes-box__header{text-align:center}.val-notes-box.align-right,.val-notes-box.align-right .val-notes-box__header{text-align:right}.val-notes-box.is-compact{display:inline-block;width:fit-content;max-width:100%;padding:5px 12px;border-left-width:1px;border-radius:999px;font-size:12px;line-height:1.3}.val-notes-box.is-compact .val-notes-box__header{display:inline;margin:0 6px 0 0;font-size:11px;letter-spacing:.06em}.val-notes-box.is-compact .val-notes-box__body{display:inline;font-size:12px}.val-notes-box.is-compact ::ng-deep val-text{display:inline}.val-notes-box.is-compact ::ng-deep val-text p{display:inline}@media (prefers-color-scheme: dark){:host-context(body:not(.light)) .val-notes-box{--notes-bg: rgba(var(--notes-rgb), .16);--notes-border: rgba(var(--notes-rgb), .3);--notes-text: var(--ion-color-light, #f4f5f8)}}:host-context(body.dark) .val-notes-box,:host-context(.theme-dark) .val-notes-box,:host-context([data-theme=dark]) .val-notes-box{--notes-bg: rgba(var(--notes-rgb), .16);--notes-border: rgba(var(--notes-rgb), .3);--notes-text: var(--ion-color-light, #f4f5f8)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: TextComponent, selector: "val-text", inputs: ["props"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: NotesBoxComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'val-notes-box', standalone: true, imports: [CommonModule, BoxComponent, TextComponent], template: `
+            args: [{ selector: 'val-notes-box', standalone: true, imports: [CommonModule, TextComponent], template: `
     <div
-      [class.notes-box-compact]="props.compact"
-      [class.notes-box-align-center]="props.align === 'center'"
-      [class.notes-box-align-right]="props.align === 'right'"
+      class="val-notes-box"
+      [class.is-compact]="props.compact"
+      [class.is-rounded]="props.rounded"
+      [class.align-center]="props.align === 'center'"
+      [class.align-right]="props.align === 'right'"
+      [attr.data-color]="props.color || 'primary'"
+      role="note"
     >
-      <val-box
-        [props]="{
-          icon: '',
-          bordered: false,
-          color: props.color,
-          leftBorder: !props.compact,
-          rounded: props.rounded,
-          padding: props.padding || (props.compact ? '6px 12px' : undefined),
-        }"
-      >
-        <div [ngClass]="['content-container', props.size]" body>
-          @if (props.prefix) {
-            <val-text
-              [props]="{ content: props.prefix, color: props.textColor, bold: true, size: props.size }"
-            ></val-text>
-          }
-          <val-text
-            [props]="{
-              content: props.text,
-              color: props.textColor,
-              bold: false,
-              size: props.size,
-              allowPartialBold: props.allowPartialBold,
-              processLinks: props.processLinks,
-            }"
-          ></val-text>
-        </div>
-      </val-box>
+      @if (props.prefix) {
+        <div class="val-notes-box__header">{{ props.prefix }}</div>
+      }
+      <div class="val-notes-box__body" [class]="'size-' + (props.size || 'medium')">
+        <val-text
+          [props]="{
+            content: props.text,
+            color: props.textColor,
+            bold: false,
+            size: props.size,
+            allowPartialBold: props.allowPartialBold,
+            processLinks: props.processLinks,
+          }"
+        ></val-text>
+      </div>
     </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)}.content-container{display:inline-grid}.notes-box-compact{display:inline-block;width:fit-content;max-width:100%}.notes-box-compact ::ng-deep val-box ion-card{margin:0;box-shadow:none}.notes-box-align-center{text-align:center}.notes-box-align-center:not(.notes-box-compact){display:flex;justify-content:center}.notes-box-align-right{text-align:right}.notes-box-align-right:not(.notes-box-compact){display:flex;justify-content:flex-end}\n"] }]
-        }], ctorParameters: () => [], propDecorators: { props: [{
+  `, changeDetection: ChangeDetectionStrategy.OnPush, 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)}:host{display:block}.val-notes-box{--notes-rgb: var(--ion-color-primary-rgb, 112, 38, 223);--notes-bg: rgba(var(--notes-rgb), .07);--notes-border: rgba(var(--notes-rgb), .18);--notes-accent: rgb(var(--notes-rgb));--notes-text: var(--ion-color-dark, #0a0612);--notes-link: rgb(var(--notes-rgb));position:relative;display:block;padding:14px 18px 14px 20px;background:var(--notes-bg);border:1px solid var(--notes-border);border-left:4px solid var(--notes-accent);border-radius:10px;color:var(--notes-text);margin:0;line-height:1.55}.val-notes-box.is-rounded{border-radius:12px}.val-notes-box[data-color=primary]{--notes-rgb: var(--ion-color-primary-rgb)}.val-notes-box[data-color=secondary]{--notes-rgb: var(--ion-color-secondary-rgb)}.val-notes-box[data-color=tertiary]{--notes-rgb: var(--ion-color-tertiary-rgb)}.val-notes-box[data-color=success]{--notes-rgb: var(--ion-color-success-rgb)}.val-notes-box[data-color=warning]{--notes-rgb: var(--ion-color-warning-rgb)}.val-notes-box[data-color=danger]{--notes-rgb: var(--ion-color-danger-rgb)}.val-notes-box[data-color=medium]{--notes-rgb: var(--ion-color-medium-rgb)}.val-notes-box[data-color=dark]{--notes-rgb: var(--ion-color-dark-rgb)}.val-notes-box[data-color=light]{--notes-rgb: var(--ion-color-medium-rgb)}.val-notes-box__header{display:block;margin:0 0 6px;font-weight:700;font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--notes-accent);font-family:var(--ion-font-family, inherit)}.val-notes-box__body{display:block;color:var(--notes-text);font-size:14px;line-height:1.6}.val-notes-box__body.size-small{font-size:13px;line-height:1.55}.val-notes-box__body.size-large{font-size:15px;line-height:1.6}.val-notes-box__body.size-xlarge{font-size:16px;line-height:1.55}.val-notes-box__body ::ng-deep val-text{display:block;color:var(--notes-text)}.val-notes-box__body ::ng-deep val-text p{margin:0;color:inherit}.val-notes-box__body ::ng-deep val-text ion-text{color:var(--notes-text)!important}.val-notes-box__body ::ng-deep val-text strong,.val-notes-box__body ::ng-deep val-text b,.val-notes-box__body ::ng-deep .partial-bold{color:var(--notes-text);font-weight:700}.val-notes-box__body ::ng-deep val-text a{color:var(--notes-link);text-decoration:underline;text-underline-offset:2px;font-weight:600}.val-notes-box__body ::ng-deep val-text a:hover{opacity:.85}.val-notes-box.align-center,.val-notes-box.align-center .val-notes-box__header{text-align:center}.val-notes-box.align-right,.val-notes-box.align-right .val-notes-box__header{text-align:right}.val-notes-box.is-compact{display:inline-block;width:fit-content;max-width:100%;padding:5px 12px;border-left-width:1px;border-radius:999px;font-size:12px;line-height:1.3}.val-notes-box.is-compact .val-notes-box__header{display:inline;margin:0 6px 0 0;font-size:11px;letter-spacing:.06em}.val-notes-box.is-compact .val-notes-box__body{display:inline;font-size:12px}.val-notes-box.is-compact ::ng-deep val-text{display:inline}.val-notes-box.is-compact ::ng-deep val-text p{display:inline}@media (prefers-color-scheme: dark){:host-context(body:not(.light)) .val-notes-box{--notes-bg: rgba(var(--notes-rgb), .16);--notes-border: rgba(var(--notes-rgb), .3);--notes-text: var(--ion-color-light, #f4f5f8)}}:host-context(body.dark) .val-notes-box,:host-context(.theme-dark) .val-notes-box,:host-context([data-theme=dark]) .val-notes-box{--notes-bg: rgba(var(--notes-rgb), .16);--notes-border: rgba(var(--notes-rgb), .3);--notes-text: var(--ion-color-light, #f4f5f8)}\n"] }]
+        }], propDecorators: { props: [{
                 type: Input
             }] } });
 
@@ -19763,6 +20041,10 @@ class AuthStateService {
             return {
                 userId: state.userId,
                 email: state.email || '',
+                name: state.name ?? undefined,
+                handle: state.handle ?? undefined,
+                avatarUrl: state.avatarUrl ?? undefined,
+                phone: state.phone ?? undefined,
                 roles: state.roles,
                 permissions: state.permissions,
                 isSuperAdmin: state.isSuperAdmin,
@@ -19776,7 +20058,7 @@ class AuthStateService {
      * Establece el estado de carga.
      */
     setLoading(isLoading) {
-        this._state.update((s) => ({ ...s, isLoading }));
+        this._state.update(s => ({ ...s, isLoading }));
     }
     /**
      * Establece el estado de autenticación exitosa.
@@ -19802,7 +20084,7 @@ class AuthStateService {
      */
     updateAccessToken(accessToken, expiresIn) {
         const expiresAt = Date.now() + expiresIn * 1000;
-        this._state.update((s) => ({
+        this._state.update(s => ({
             ...s,
             accessToken,
             expiresAt,
@@ -19812,7 +20094,7 @@ class AuthStateService {
      * Actualiza el refresh token (token rotation).
      */
     updateRefreshToken(refreshToken) {
-        this._state.update((s) => ({
+        this._state.update(s => ({
             ...s,
             refreshToken,
         }));
@@ -19821,7 +20103,7 @@ class AuthStateService {
      * Actualiza los permisos.
      */
     updatePermissions(roles, permissions, isSuperAdmin) {
-        this._state.update((s) => ({
+        this._state.update(s => ({
             ...s,
             roles,
             permissions,
@@ -19832,7 +20114,7 @@ class AuthStateService {
      * Establece un error de autenticación.
      */
     setError(error) {
-        this._state.update((s) => ({
+        this._state.update(s => ({
             ...s,
             error,
             isLoading: false,
@@ -19842,7 +20124,7 @@ class AuthStateService {
      * Limpia el error.
      */
     clearError() {
-        this._state.update((s) => ({
+        this._state.update(s => ({
             ...s,
             error: null,
         }));
@@ -19891,12 +20173,29 @@ class AuthStateService {
      * Actualiza el userId y email (después de parsear el token).
      */
     updateUserInfo(userId, email) {
-        this._state.update((s) => ({
+        this._state.update(s => ({
             ...s,
             userId,
             email,
         }));
     }
+    /**
+     * Hidrata el state con campos del profile (nombre, handle, avatar, phone).
+     * Invocado tras `getProfile()` o `updateProfile()` para que consumers de
+     * `auth.user()` vean los campos enriched automáticamente.
+     *
+     * Cualquier campo `undefined` se ignora (no sobrescribe con null). Campos
+     * `null` explícitos se persisten (signal de "limpiado").
+     */
+    updateProfileFields(fields) {
+        this._state.update(s => ({
+            ...s,
+            ...(fields.name !== undefined && { name: fields.name }),
+            ...(fields.handle !== undefined && { handle: fields.handle }),
+            ...(fields.avatarUrl !== undefined && { avatarUrl: fields.avatarUrl }),
+            ...(fields.phone !== undefined && { phone: fields.phone }),
+        }));
+    }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: AuthStateService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
     static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: AuthStateService, providedIn: 'root' }); }
 }
@@ -23959,29 +24258,32 @@ class AuthService {
     // =============================================
     /**
      * Obtiene el perfil del usuario autenticado.
-     * Incluye información de MFA y teléfono.
+     * Incluye información de MFA y teléfono. Hidrata el state automáticamente
+     * con `name/handle/avatarUrl/phone` para que `auth.user()` los retorne.
      */
     getProfile() {
-        return this.http
-            .get(`${this.baseUrl}/profile`)
-            .pipe(catchError(error => this.handleAuthError(error)));
+        return this.http.get(`${this.baseUrl}/profile`).pipe(tap(profile => this.stateService.updateProfileFields({
+            name: profile.name,
+            handle: profile.handle ?? null,
+            avatarUrl: profile.avatarUrl ?? null,
+            phone: profile.phone ?? null,
+        })), catchError(error => this.handleAuthError(error)));
     }
     /**
-     * Actualiza el perfil del usuario.
+     * Actualiza el perfil del usuario. Sincroniza state con los nuevos values
+     * (name/phone) — el backend response no los echo'a pero el caller ya tiene
+     * los valores que mandó.
      */
     updateProfile(request) {
-        return this.http
-            .put(`${this.baseUrl}/profile`, request)
-            .pipe(catchError(error => this.handleAuthError(error)));
+        return this.http.put(`${this.baseUrl}/profile`, request).pipe(tap(() => this.stateService.updateProfileFields(request)), catchError(error => this.handleAuthError(error)));
     }
     /**
-     * Actualiza el avatar del usuario en el backend.
-     * Nota: El estado local del avatar se maneja a través de getProfile().
+     * Actualiza el avatar del usuario en el backend. Sincroniza state con el
+     * `avatarUrl` retornado para que el header / dashboard se refresquen sin
+     * necesidad de un getProfile adicional.
      */
     updateAvatar(request) {
-        return this.http
-            .put(`${this.baseUrl}/profile/avatar`, request)
-            .pipe(catchError(error => this.handleAuthError(error)));
+        return this.http.put(`${this.baseUrl}/profile/avatar`, request).pipe(tap(res => this.stateService.updateProfileFields({ avatarUrl: res.avatarUrl })), catchError(error => this.handleAuthError(error)));
     }
     // =============================================
     // RECUPERACIÓN DE CONTRASEÑA
@@ -24104,9 +24406,7 @@ class AuthService {
      * @param handle - Nuevo handle (sin @, ej: "victorv")
      */
     updateHandle(handle) {
-        return this.http
-            .put(`${this.baseUrl}/profile/handle`, { handle })
-            .pipe(catchError(error => this.handleAuthError(error)));
+        return this.http.put(`${this.baseUrl}/profile/handle`, { handle }).pipe(tap(() => this.stateService.updateProfileFields({ handle })), catchError(error => this.handleAuthError(error)));
     }
     /**
      * Verifica si un handle está disponible.
@@ -26288,11 +26588,15 @@ class ToolbarComponent {
             <ion-button *ngIf="action.type === actionTypes.ICON" (click)="clickHandler(action.token)">
               <ion-icon slot="icon-only" [name]="action.description" [color]="props.textColor"></ion-icon>
             </ion-button>
-            <val-avatar
+            <val-user-avatar
               *ngIf="action.type === actionTypes.AVATAR"
-              [props]="{ size: 'small', image: action.description, default: '' }"
+              [props]="{
+                user: action.user,
+                avatarUrl: action.description,
+                size: 'small',
+              }"
               (onClick)="clickHandler(action.token)"
-            ></val-avatar>
+            ></val-user-avatar>
             <val-image
               *ngIf="action.type === actionTypes.IMAGE"
               [props]="action.image"
@@ -26317,11 +26621,15 @@ class ToolbarComponent {
             <ion-button *ngIf="action.type === actionTypes.ICON" (click)="clickHandler(action.token)">
               <ion-icon slot="icon-only" [name]="action.description" [color]="props.textColor"></ion-icon>
             </ion-button>
-            <val-avatar
+            <val-user-avatar
               *ngIf="action.type === actionTypes.AVATAR"
-              [props]="{ size: 'small', image: action.description, default: '' }"
+              [props]="{
+                user: action.user,
+                avatarUrl: action.description,
+                size: 'small',
+              }"
               (onClick)="clickHandler(action.token)"
-            ></val-avatar>
+            ></val-user-avatar>
             <val-image
               *ngIf="action.type === actionTypes.IMAGE"
               [props]="action.image"
@@ -26337,7 +26645,7 @@ class ToolbarComponent {
       <!-- experimental -->
       <ng-content select="[toolbar-bottom]"></ng-content>
     </ion-toolbar>
-  `, 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)}ion-button{font-family:var(--ion-default-font),Arial,sans-serif}.left-buttons{margin-left:-1rem}.background{background:var(--ion-background-color)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: IonToolbar, selector: "ion-toolbar", inputs: ["color", "mode"] }, { kind: "component", type: IonButtons, selector: "ion-buttons", inputs: ["collapse"] }, { 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: IonText, selector: "ion-text", inputs: ["color", "mode"] }, { kind: "component", type: IonTitle, selector: "ion-title", inputs: ["color", "size"] }, { kind: "component", type: AvatarComponent, selector: "val-avatar", inputs: ["preset", "props"], outputs: ["onClick"] }, { kind: "component", type: ImageComponent, selector: "val-image", inputs: ["props"] }, { kind: "component", type: IonMenuButton, selector: "ion-menu-button", inputs: ["autoHide", "color", "disabled", "menu", "mode", "type"] }, { kind: "component", type: LanguageSelectorComponent, selector: "val-language-selector", inputs: ["props"], outputs: ["languageChange"] }] }); }
+  `, 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)}ion-button{font-family:var(--ion-default-font),Arial,sans-serif}.left-buttons{margin-left:-1rem}.background{background:var(--ion-background-color)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: IonToolbar, selector: "ion-toolbar", inputs: ["color", "mode"] }, { kind: "component", type: IonButtons, selector: "ion-buttons", inputs: ["collapse"] }, { 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: IonText, selector: "ion-text", inputs: ["color", "mode"] }, { kind: "component", type: IonTitle, selector: "ion-title", inputs: ["color", "size"] }, { kind: "component", type: ImageComponent, selector: "val-image", inputs: ["props"] }, { kind: "component", type: UserAvatarComponent, selector: "val-user-avatar", inputs: ["props"], outputs: ["onClick"] }, { kind: "component", type: IonMenuButton, selector: "ion-menu-button", inputs: ["autoHide", "color", "disabled", "menu", "mode", "type"] }, { kind: "component", type: LanguageSelectorComponent, selector: "val-language-selector", inputs: ["props"], outputs: ["languageChange"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: ToolbarComponent, decorators: [{
             type: Component,
@@ -26351,6 +26659,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
                         IonTitle,
                         AvatarComponent,
                         ImageComponent,
+                        UserAvatarComponent,
                         IonMenuButton,
                         LanguageSelectorComponent,
                     ], template: `
@@ -26369,11 +26678,15 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
             <ion-button *ngIf="action.type === actionTypes.ICON" (click)="clickHandler(action.token)">
               <ion-icon slot="icon-only" [name]="action.description" [color]="props.textColor"></ion-icon>
             </ion-button>
-            <val-avatar
+            <val-user-avatar
               *ngIf="action.type === actionTypes.AVATAR"
-              [props]="{ size: 'small', image: action.description, default: '' }"
+              [props]="{
+                user: action.user,
+                avatarUrl: action.description,
+                size: 'small',
+              }"
               (onClick)="clickHandler(action.token)"
-            ></val-avatar>
+            ></val-user-avatar>
             <val-image
               *ngIf="action.type === actionTypes.IMAGE"
               [props]="action.image"
@@ -26398,11 +26711,15 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
             <ion-button *ngIf="action.type === actionTypes.ICON" (click)="clickHandler(action.token)">
               <ion-icon slot="icon-only" [name]="action.description" [color]="props.textColor"></ion-icon>
             </ion-button>
-            <val-avatar
+            <val-user-avatar
               *ngIf="action.type === actionTypes.AVATAR"
-              [props]="{ size: 'small', image: action.description, default: '' }"
+              [props]="{
+                user: action.user,
+                avatarUrl: action.description,
+                size: 'small',
+              }"
               (onClick)="clickHandler(action.token)"
-            ></val-avatar>
+            ></val-user-avatar>
             <val-image
               *ngIf="action.type === actionTypes.IMAGE"
               [props]="action.image"
@@ -43492,5 +43809,5 @@ function buildFooterLinks(links, t, resolver) {
  * Generated bundle index. Do not edit.
  */
 
-export { ACTION_CARD_DEFAULTS, AD_SIZE_MAP, API_TABLE_COLUMN_LABELS, ARTICLE_SPACING, AVATAR_UPLOAD_DEFAULTS, AccordionComponent, ActionCardComponent, ActionHeaderComponent, ActionType, AdSlotComponent, AdsLoaderService, AdsService, AlertBoxComponent, AnalyticsErrorHandler, AnalyticsRouterTracker, AnalyticsService, AppConfigService, ArticleBuilder, ArticleComponent, AuthBackgroundComponent, AuthService, AuthStateService, AuthStorageService, AuthSyncService, AvatarComponent, AvatarUploadComponent, BOTTOM_NAV_DEFAULTS, BannerComponent, BaseDefault, BlogPostBuilder, BottomNavComponent, BoxComponent, BreadcrumbComponent, ButtonComponent, ButtonGroupComponent, CHEV_KEYS, COMMON_COUNTRY_CODES, COMMON_CURRENCIES, CURRENCY_INFO, CardComponent, CardSection, CardType, CardsCarouselComponent, CheckInputComponent, CheckboxRadioInputComponent, ChipGroupComponent, ClearDefault, ClearDefaultBlock, ClearDefaultFull, ClearDefaultRound, ClearDefaultRoundBlock, ClearDefaultRoundFull, CodeDisplayComponent, CommandDisplayComponent, CommentComponent, CommentInputComponent, CommentSectionComponent, CompanyFooterComponent, ComponentStates, ConfirmationDialogService, ContainerComponent, ContentLoaderComponent, ContentReactionComponent, ContentTransformer, CookieBannerComponent, CountdownComponent, CurrencyInputComponent, DEFAULT_ADS_CONFIG, DEFAULT_APP_CONFIG_SERVICE_CONFIG, DEFAULT_AUTH_CONFIG, DEFAULT_BACK_HEADER, DEFAULT_CANCEL_BUTTON, DEFAULT_CONFIRM_BUTTON, DEFAULT_COUNTDOWN_LABELS, DEFAULT_COUNTDOWN_LABELS_EN, 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, DataTableComponent, DateInputComponent, DateRangeInputComponent, DetailSkeletonComponent, DeviceService, DisplayComponent, DividerComponent, DocsApiTableComponent, DocsBreadcrumbComponent, DocsBuilder, DocsCalloutComponent, DocsCodeExampleComponent, DocsLayoutComponent, DocsNavLinksComponent, DocsNavigationService, DocsPageComponent, DocsSearchComponent, DocsSectionComponent, DocsShellComponent, DocsSidebarComponent, DocsTocComponent, DownloadService, EmailInputComponent, ExpandableTextComponent, FEATURES_LIST_DEFAULTS, FabComponent, FeaturesListComponent, FeedbackFormComponent, FeedbackService, FileInputComponent, FirebaseService, FirestoreCollectionFactory, FirestoreService, FooterComponent, FooterLinksComponent, FormComponent, FormFooterComponent, FormSkeletonComponent, FunHeaderComponent, GlowCardComponent, GlowComponent, GridSkeletonComponent, HANDOFF_ROUTE_PARAM, HANDOFF_TOKEN_PARAM, HandoffService, HeaderComponent, HintComponent, HorizontalScrollComponent, HourInputComponent, HrefComponent, I18nService, IMAGE_DEFAULTS, INITIAL_AUTH_STATE, INITIAL_MFA_STATE, Icon, IconComponent, IconService, ImageComponent, ImageCropComponent, ImageService, InAppBrowserService, InfiniteListComponent, InfoComponent, InputI18nHelper, InputType, ItemListComponent, LANG_STORAGE_KEY$1 as LANG_STORAGE_KEY, LEGAL_CONTENT_CONFIG, LOGIN_DEFAULTS, LanguageSelectorComponent, LayeredCardComponent, LegalContentService, LegalLinkService, LinkComponent, LinkProcessorService, LinkedProvidersComponent, LinksAccordionComponent, LinksCakeComponent, ListSkeletonComponent, LoadingDirective, LocalStorageService, LocaleService, LoginComponent, MODAL_SIZES, MOTIF_KEYS, MOTION, MaintenancePageComponent, MarkdownArticleParserService, MenuComponent, MessagingService, MetaService, ModalService, MultiSelectSearchComponent, NavigationService, NewsBuilder, NoContentComponent, NotesBoxComponent, NotificationActionService, NotificationsService, NumberFromToComponent, NumberInputComponent, NumberStepperComponent, OAUTH_PROVIDERS_INFO, OAuthCallbackComponent, OAuthService, OrgSwitchService, OutlineDefault, OutlineDefaultBlock, OutlineDefaultFull, OutlineDefaultRound, OutlineDefaultRoundBlock, OutlineDefaultRoundFull, PATTERN_MOTIFS, PATTERN_PALETTES, PLATFORM_CONFIGS, PageContentComponent, PageTemplateComponent, 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, RadioInputComponent, RangeInputComponent, RatingComponent, RefresherComponent, RightsFooterComponent, RotatingTextComponent, SHAPE_KEYS, SKELETON_PRESETS, SOLID_KEYS, 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, SimpleComponent, SkeletonComponent, SkeletonService, SolidBlockButton, SolidDefault, SolidDefaultBlock, SolidDefaultButton, SolidDefaultFull, SolidDefaultRound, SolidDefaultRoundBlock, SolidDefaultRoundButton, SolidDefaultRoundFull, SolidFullButton, SolidLargeButton, SolidLargeRoundButton, SolidSmallButton, SolidSmallRoundButton, 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, UpdateBannerComponent, UsernameInputComponent, VALTECH_ADS_CONFIG, VALTECH_APP_CONFIG, VALTECH_AUTH_CONFIG, VALTECH_COMPANY_LINKS, VALTECH_DEFAULT_CONTENT, VALTECH_FEEDBACK_CONFIG, VALTECH_FIREBASE_CONFIG, VALTECH_FOOTER_I18N, VALTECH_FOOTER_LOGO, VALTECH_LANGUAGE_SELECTOR, VALTECH_LEGAL_CONFIG, VALTECH_SOCIAL_LINKS, VERSION, WizardComponent, WizardFooterComponent, applyDefaultValueToControl, authGuard, authInterceptor, blogPost, buildFooterLinks, buildPath, collections, createFirebaseConfig, createGlowCardProps, createInitialPaginationState, createNumberFromToField, createTitleProps, docs, extractPathParams, generatePatternTiles, generateRandomTile, getAppInfo, getAppVersion, getCollectionPath, getDocumentId, getTimeOfDayKey, goToTop, guestGuard, hasEmulators, isAtEnd, isCollectionPath, isDocumentPath, isEmulatorMode, isValidPath, joinPath, maxLength, mulberry32, news, parseMarkdownArticle, permissionGuard, permissionGuardFromRoute, provideLegalContent, provideValtechAds, provideValtechAppConfig, provideValtechAuth, provideValtechAuthInterceptor, provideValtechFeedback, provideValtechFirebase, provideValtechI18n, provideValtechLegal, provideValtechPresets, provideValtechSkeleton, query, renderPatternSvgInner, replaceSpecialChars, resolveColor, resolveInputDefaultValue, roleGuard, storagePaths, superAdminGuard, toArticle };
+export { ACTION_CARD_DEFAULTS, AD_SIZE_MAP, API_TABLE_COLUMN_LABELS, ARTICLE_SPACING, AVATAR_UPLOAD_DEFAULTS, AccordionComponent, ActionCardComponent, ActionHeaderComponent, ActionType, AdSlotComponent, AdsLoaderService, AdsService, AlertBoxComponent, AnalyticsErrorHandler, AnalyticsRouterTracker, AnalyticsService, AppConfigService, ArticleBuilder, ArticleComponent, AuthBackgroundComponent, AuthService, AuthStateService, AuthStorageService, AuthSyncService, AvatarComponent, AvatarUploadComponent, BOTTOM_NAV_DEFAULTS, BannerComponent, BaseDefault, BlogPostBuilder, BottomNavComponent, BoxComponent, BreadcrumbComponent, ButtonComponent, ButtonGroupComponent, CHEV_KEYS, COMMON_COUNTRY_CODES, COMMON_CURRENCIES, CURRENCY_INFO, CardComponent, CardSection, CardType, CardsCarouselComponent, CheckInputComponent, CheckboxRadioInputComponent, ChipGroupComponent, ClearDefault, ClearDefaultBlock, ClearDefaultFull, ClearDefaultRound, ClearDefaultRoundBlock, ClearDefaultRoundFull, CodeDisplayComponent, CommandDisplayComponent, CommentComponent, CommentInputComponent, CommentSectionComponent, CompanyFooterComponent, ComponentStates, ConfirmationDialogService, ContainerComponent, ContentLoaderComponent, ContentReactionComponent, ContentTransformer, CookieBannerComponent, CountdownComponent, CurrencyInputComponent, DEFAULT_ADS_CONFIG, DEFAULT_APP_CONFIG_SERVICE_CONFIG, DEFAULT_AUTH_CONFIG, DEFAULT_BACK_HEADER, DEFAULT_CANCEL_BUTTON, DEFAULT_CONFIRM_BUTTON, DEFAULT_COUNTDOWN_LABELS, DEFAULT_COUNTDOWN_LABELS_EN, 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, DataTableComponent, DateInputComponent, DateRangeInputComponent, DetailSkeletonComponent, DeviceService, DisplayComponent, DividerComponent, DocsApiTableComponent, DocsBreadcrumbComponent, DocsBuilder, DocsCalloutComponent, DocsCodeExampleComponent, DocsLayoutComponent, DocsNavLinksComponent, DocsNavigationService, DocsPageComponent, DocsSearchComponent, DocsSectionComponent, DocsShellComponent, DocsSidebarComponent, DocsTocComponent, DownloadService, EmailInputComponent, ExpandableTextComponent, FEATURES_LIST_DEFAULTS, FabComponent, FeaturesListComponent, FeedbackFormComponent, FeedbackService, FileInputComponent, FirebaseService, FirestoreCollectionFactory, FirestoreService, FooterComponent, FooterLinksComponent, FormComponent, FormFooterComponent, FormSkeletonComponent, FunHeaderComponent, GlassComponent, GlowCardComponent, GlowComponent, GridSkeletonComponent, HANDOFF_ROUTE_PARAM, HANDOFF_TOKEN_PARAM, HandoffService, HeaderComponent, HintComponent, HorizontalScrollComponent, HourInputComponent, HrefComponent, I18nService, IMAGE_DEFAULTS, INITIAL_AUTH_STATE, INITIAL_MFA_STATE, Icon, IconComponent, IconService, ImageComponent, ImageCropComponent, ImageService, InAppBrowserService, InfiniteListComponent, InfoComponent, InputI18nHelper, InputType, ItemListComponent, LANG_STORAGE_KEY$1 as LANG_STORAGE_KEY, LEGAL_CONTENT_CONFIG, LOGIN_DEFAULTS, LanguageSelectorComponent, LayeredCardComponent, LegalContentService, LegalLinkService, LinkComponent, LinkProcessorService, LinkedProvidersComponent, LinksAccordionComponent, LinksCakeComponent, ListSkeletonComponent, LoadingDirective, LocalStorageService, LocaleService, LoginComponent, MODAL_SIZES, MOTIF_KEYS, MOTION, MaintenancePageComponent, MarkdownArticleParserService, MenuComponent, MessagingService, MetaService, ModalService, MultiSelectSearchComponent, NavigationService, NewsBuilder, NoContentComponent, NotesBoxComponent, NotificationActionService, NotificationsService, NumberFromToComponent, NumberInputComponent, NumberStepperComponent, OAUTH_PROVIDERS_INFO, OAuthCallbackComponent, OAuthService, OrgSwitchService, OutlineDefault, OutlineDefaultBlock, OutlineDefaultFull, OutlineDefaultRound, OutlineDefaultRoundBlock, OutlineDefaultRoundFull, PATTERN_MOTIFS, PATTERN_PALETTES, PLATFORM_CONFIGS, PageContentComponent, PageTemplateComponent, 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, RadioInputComponent, RangeInputComponent, RatingComponent, RefresherComponent, RightsFooterComponent, RotatingTextComponent, SHAPE_KEYS, SKELETON_PRESETS, SOLID_KEYS, 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, SimpleComponent, SkeletonComponent, SkeletonService, SolidBlockButton, SolidDefault, SolidDefaultBlock, SolidDefaultButton, SolidDefaultFull, SolidDefaultRound, SolidDefaultRoundBlock, SolidDefaultRoundButton, SolidDefaultRoundFull, SolidFullButton, SolidLargeButton, SolidLargeRoundButton, SolidSmallButton, SolidSmallRoundButton, 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, UpdateBannerComponent, UserAvatarComponent, UsernameInputComponent, VALTECH_ADS_CONFIG, VALTECH_APP_CONFIG, VALTECH_AUTH_CONFIG, VALTECH_COMPANY_LINKS, VALTECH_DEFAULT_CONTENT, VALTECH_FEEDBACK_CONFIG, VALTECH_FIREBASE_CONFIG, VALTECH_FOOTER_I18N, VALTECH_FOOTER_LOGO, VALTECH_LANGUAGE_SELECTOR, VALTECH_LEGAL_CONFIG, VALTECH_SOCIAL_LINKS, VERSION, WizardComponent, WizardFooterComponent, applyDefaultValueToControl, authGuard, authInterceptor, blogPost, buildFooterLinks, buildPath, collections, createFirebaseConfig, createGlowCardProps, createInitialPaginationState, createNumberFromToField, createTitleProps, docs, extractPathParams, generatePatternTiles, generateRandomTile, getAppInfo, getAppVersion, getCollectionPath, getDocumentId, getTimeOfDayKey, goToTop, guestGuard, hasEmulators, isAtEnd, isCollectionPath, isDocumentPath, isEmulatorMode, isValidPath, joinPath, maxLength, mulberry32, news, parseMarkdownArticle, permissionGuard, permissionGuardFromRoute, provideLegalContent, provideValtechAds, provideValtechAppConfig, provideValtechAuth, provideValtechAuthInterceptor, provideValtechFeedback, provideValtechFirebase, provideValtechI18n, provideValtechLegal, provideValtechPresets, provideValtechSkeleton, query, renderPatternSvgInner, replaceSpecialChars, resolveColor, resolveInputDefaultValue, roleGuard, storagePaths, superAdminGuard, toArticle };
 //# sourceMappingURL=valtech-components.mjs.map