valtech-components 2.0.779 → 2.0.781

package/fesm2022/valtech-components.mjs

@@ -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.779';
+const VERSION = '2.0.781';
 
 /**
  * Servicio para gestionar presets de componentes.
@@ -6268,6 +6268,209 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
                 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);
+        /** Indica si el `<img>` actual disparó su evento `load`. Conduce el fade-in. */
+        this.imageLoaded = 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 la última carga falló — eso evita re-intentar
+         * con la misma URL cuando el browser ya marcó error. El placeholder
+         * (iniciales/icono) sigue visible debajo.
+         */
+        this.imageUrl = computed(() => {
+            if (this.imageFailed())
+                return '';
+            return this.resolvedUser().avatarUrl;
+        });
+        /** 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) {
+        const prev = this.props_();
+        const next = value ?? {};
+        this.props_.set(next);
+        // Reset estado de carga si cambia la URL — re-disparar fade-in.
+        const prevUrl = prev?.user?.avatarUrl || prev?.avatarUrl || '';
+        const nextUrl = next.user?.avatarUrl || next.avatarUrl || '';
+        if (prevUrl !== nextUrl) {
+            this.imageFailed.set(false);
+            this.imageLoaded.set(false);
+        }
+    }
+    /** Subscribers — usado para condicionar cursor/aria. */
+    get hasClick() {
+        return this.onClick.observed;
+    }
+    onImageError() {
+        this.imageFailed.set(true);
+        this.imageLoaded.set(false);
+    }
+    onImageLoad() {
+        this.imageFailed.set(false);
+        this.imageLoaded.set(true);
+    }
+    /**
+     * 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]="bgColor()"
+      [style.color]="resolvedProps().foreground || '#fff'"
+      [attr.aria-label]="ariaLabel()"
+      (click)="onClick.emit()"
+    >
+      <!-- Placeholder layer (siempre presente) — iniciales o icono. La imagen
+           se monta encima y hace fade-in al cargar; si falla queda invisible
+           y el placeholder permanece visible sin parpadeo. -->
+      @if (initials()) {
+        <span class="val-user-avatar__initials">{{ initials() }}</span>
+      } @else {
+        <ion-icon name="person-outline" class="val-user-avatar__icon" aria-hidden="true" />
+      }
+
+      @if (imageUrl()) {
+        <img
+          class="val-user-avatar__img"
+          [class.loaded]="imageLoaded()"
+          [src]="imageUrl()"
+          alt=""
+          loading="lazy"
+          decoding="async"
+          (error)="onImageError()"
+          (load)="onImageLoad()"
+        />
+      }
+    </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{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;opacity:0;transition:opacity .35s ease-in-out;pointer-events:none}.val-user-avatar__img.loaded{opacity:1}.val-user-avatar__initials{text-transform:uppercase;letter-spacing:.02em;position:relative;z-index:0}.val-user-avatar__icon{font-size:60%;position:relative;z-index:0}\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]="bgColor()"
+      [style.color]="resolvedProps().foreground || '#fff'"
+      [attr.aria-label]="ariaLabel()"
+      (click)="onClick.emit()"
+    >
+      <!-- Placeholder layer (siempre presente) — iniciales o icono. La imagen
+           se monta encima y hace fade-in al cargar; si falla queda invisible
+           y el placeholder permanece visible sin parpadeo. -->
+      @if (initials()) {
+        <span class="val-user-avatar__initials">{{ initials() }}</span>
+      } @else {
+        <ion-icon name="person-outline" class="val-user-avatar__icon" aria-hidden="true" />
+      }
+
+      @if (imageUrl()) {
+        <img
+          class="val-user-avatar__img"
+          [class.loaded]="imageLoaded()"
+          [src]="imageUrl()"
+          alt=""
+          loading="lazy"
+          decoding="async"
+          (error)="onImageError()"
+          (load)="onImageLoad()"
+        />
+      }
+    </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{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;opacity:0;transition:opacity .35s ease-in-out;pointer-events:none}.val-user-avatar__img.loaded{opacity:1}.val-user-avatar__initials{text-transform:uppercase;letter-spacing:.02em;position:relative;z-index:0}.val-user-avatar__icon{font-size:60%;position:relative;z-index:0}\n"] }]
+        }], propDecorators: { props: [{
+                type: Input
+            }], onClick: [{
+                type: Output
+            }] } });
+
 /**
  * val-alert-box
  *
@@ -8489,95 +8692,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
             }] } });
 
@@ -19890,6 +20088,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,
@@ -19903,7 +20105,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.
@@ -19929,7 +20131,7 @@ class AuthStateService {
      */
     updateAccessToken(accessToken, expiresIn) {
         const expiresAt = Date.now() + expiresIn * 1000;
-        this._state.update((s) => ({
+        this._state.update(s => ({
             ...s,
             accessToken,
             expiresAt,
@@ -19939,7 +20141,7 @@ class AuthStateService {
      * Actualiza el refresh token (token rotation).
      */
     updateRefreshToken(refreshToken) {
-        this._state.update((s) => ({
+        this._state.update(s => ({
             ...s,
             refreshToken,
         }));
@@ -19948,7 +20150,7 @@ class AuthStateService {
      * Actualiza los permisos.
      */
     updatePermissions(roles, permissions, isSuperAdmin) {
-        this._state.update((s) => ({
+        this._state.update(s => ({
             ...s,
             roles,
             permissions,
@@ -19959,7 +20161,7 @@ class AuthStateService {
      * Establece un error de autenticación.
      */
     setError(error) {
-        this._state.update((s) => ({
+        this._state.update(s => ({
             ...s,
             error,
             isLoading: false,
@@ -19969,7 +20171,7 @@ class AuthStateService {
      * Limpia el error.
      */
     clearError() {
-        this._state.update((s) => ({
+        this._state.update(s => ({
             ...s,
             error: null,
         }));
@@ -20018,12 +20220,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' }); }
 }
@@ -24086,29 +24305,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
@@ -24231,9 +24453,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.
@@ -26415,11 +26635,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"
@@ -26444,11 +26668,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"
@@ -26464,7 +26692,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,
@@ -26478,6 +26706,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
                         IonTitle,
                         AvatarComponent,
                         ImageComponent,
+                        UserAvatarComponent,
                         IonMenuButton,
                         LanguageSelectorComponent,
                     ], template: `
@@ -26496,11 +26725,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"
@@ -26525,11 +26758,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"
@@ -35825,6 +36062,45 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
                 }]
         }] });
 
+/** Built-in label sets for the three platform locales. */
+const CALLOUT_LABELS = {
+    es: {
+        NOTE: 'Nota',
+        TIP: 'Tip',
+        INFO: 'Info',
+        IMPORTANT: 'Importante',
+        WARNING: 'Atención',
+        CAUTION: 'Precaución',
+    },
+    en: {
+        NOTE: 'Note',
+        TIP: 'Tip',
+        INFO: 'Info',
+        IMPORTANT: 'Important',
+        WARNING: 'Warning',
+        CAUTION: 'Caution',
+    },
+    pt: {
+        NOTE: 'Nota',
+        TIP: 'Dica',
+        INFO: 'Info',
+        IMPORTANT: 'Importante',
+        WARNING: 'Atenção',
+        CAUTION: 'Cuidado',
+    },
+};
+/**
+ * Per-callout-kind color (Ionic semantic color). Fixed across locales since
+ * red = danger no matter what language you speak.
+ */
+const CALLOUT_COLORS = {
+    NOTE: 'primary',
+    TIP: 'success',
+    INFO: 'tertiary',
+    IMPORTANT: 'warning',
+    WARNING: 'warning',
+    CAUTION: 'danger',
+};
 const BOX_DRAWING = /[┌┐└┘├┤┬┴┼─│╔╗╚╝═║]/;
 const CALLOUT_RE = /^>\s*\[!(NOTE|TIP|INFO|WARNING|CAUTION|IMPORTANT)\]\s*(.*)$/i;
 const FENCE_RE = /^```([\w-]*)\s*$/;
@@ -35849,9 +36125,11 @@ const TABLE_ROW_RE = /^\s*\|(.+)\|\s*$/;
  * - Tables → flattened into paragraphs with bold keys
  * - Horizontal rules (---, ***, ___) → separator
  */
-function parseMarkdownArticle(markdown, config) {
+function parseMarkdownArticle(markdown, options) {
     const lines = normalize(markdown).split('\n');
     const elements = [];
+    const labels = options?.calloutLabels ??
+        (options?.locale ? CALLOUT_LABELS[options.locale] : CALLOUT_LABELS.es);
     let i = 0;
     while (i < lines.length) {
         const line = lines[i];
@@ -35906,7 +36184,7 @@ function parseMarkdownArticle(markdown, config) {
                 block.push(lines[i]);
                 i++;
             }
-            elements.push(makeQuoteOrCallout(block));
+            elements.push(makeQuoteOrCallout(block, labels));
             continue;
         }
         if (TABLE_ROW_RE.test(line)) {
@@ -35963,12 +36241,14 @@ function parseMarkdownArticle(markdown, config) {
             });
         }
     }
+    // Strip parser-only options before merging into ArticleMetadata
+    const { locale: _l, calloutLabels: _c, ...metadataOverrides } = options ?? {};
     return {
         elements,
         maxWidth: '900px',
         centered: true,
         theme: 'auto',
-        ...config,
+        ...metadataOverrides,
     };
 }
 function normalize(md) {
@@ -35998,7 +36278,7 @@ function makeHeading(level, content) {
         props: { content, size, color: 'dark', bold: true },
     };
 }
-function makeQuoteOrCallout(block) {
+function makeQuoteOrCallout(block, labels) {
     const first = block[0];
     const callout = first.match(CALLOUT_RE);
     const lines = block.map(l => l.replace(/^>\s?/, ''));
@@ -36007,7 +36287,7 @@ function makeQuoteOrCallout(block) {
         const firstLineRest = callout[2] || '';
         const rest = lines.slice(1).join(' ').trim();
         const text = [firstLineRest, rest].filter(Boolean).join(' ').trim();
-        return makeNote(type, text);
+        return makeNote(type, text, labels);
     }
     const text = lines.join(' ').trim();
     return {
@@ -36022,22 +36302,13 @@ function makeQuoteOrCallout(block) {
         },
     };
 }
-function makeNote(kind, text) {
-    const map = {
-        NOTE: { color: 'primary', prefix: 'Nota' },
-        TIP: { color: 'success', prefix: 'Tip' },
-        INFO: { color: 'tertiary', prefix: 'Info' },
-        IMPORTANT: { color: 'warning', prefix: 'Importante' },
-        WARNING: { color: 'warning', prefix: 'Atención' },
-        CAUTION: { color: 'danger', prefix: 'Precaución' },
-    };
-    const cfg = map[kind];
+function makeNote(kind, text, labels) {
     return {
         type: 'note',
         props: {
             text,
-            prefix: `${cfg.prefix}:`,
-            color: cfg.color,
+            prefix: `${labels[kind]}:`,
+            color: CALLOUT_COLORS[kind],
             textColor: 'dark',
             size: 'medium',
             rounded: true,
@@ -43619,5 +43890,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, 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, 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, CALLOUT_LABELS, 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