valtech-components 4.0.225 → 4.0.227

package/fesm2022/valtech-components.mjs

@@ -25,7 +25,7 @@ import { getApps, getApp, initializeApp as initializeApp$1 } from 'firebase/app'
 import * as i2$1 from '@ionic/angular/standalone';
 import { AlertController, IonAvatar, IonCard, IonIcon, IonButton, IonSpinner, IonText, IonModal, IonHeader, IonToolbar, IonContent, IonButtons, IonTitle, IonProgressBar, IonSkeletonText, IonFab, IonFabButton, IonFabList, IonLabel, IonCardContent, IonCardHeader, IonCardTitle, IonCardSubtitle, IonCheckbox, IonRadio, IonRadioGroup, IonTextarea, IonDatetime, IonSelect, IonSelectOption, IonPopover, IonList, IonItem, IonInput, IonChip, IonRange, IonSearchbar, IonSegment, IonSegmentButton, IonToggle, IonRippleEffect, IonAccordion, IonAccordionGroup, IonTabBar, IonTabButton, IonBadge, IonBreadcrumb, IonBreadcrumbs, IonInfiniteScroll, IonInfiniteScrollContent, IonNote, IonDatetimeButton, ToastController as ToastController$1, IonCol, IonRow, IonRefresher, IonRefresherContent, IonMenuButton, IonFooter, IonListHeader, IonGrid, MenuController, IonMenu, IonMenuToggle, IonSplitPane } from '@ionic/angular/standalone';
 import { addIcons } from 'ionicons';
-import { addOutline, addCircleOutline, alertOutline, alertCircleOutline, arrowBackOutline, arrowForwardOutline, arrowDownOutline, settings, settingsOutline, checkmarkCircleOutline, ellipsisHorizontalOutline, notifications, notificationsOutline, openOutline, closeOutline, chatbubblesOutline, shareOutline, heart, heartOutline, home, homeOutline, eyeOffOutline, eyeOutline, scanOutline, chevronDownOutline, chevronForwardOutline, checkmarkOutline, clipboardOutline, copyOutline, filterOutline, locationOutline, calendarOutline, businessOutline, logoTwitter, logoInstagram, logoLinkedin, logoYoutube, logoTiktok, logoFacebook, logoGoogle, createOutline, trashOutline, playOutline, peopleOutline, phonePortraitOutline, refreshOutline, documentTextOutline, lockClosedOutline, cloudUploadOutline, textOutline, informationCircleOutline, logoNpm, removeOutline, optionsOutline, personOutline, shieldCheckmarkOutline, keyOutline, desktopOutline, logOutOutline, cloudDownloadOutline, cloudOutline, gitBranchOutline, layersOutline, serverOutline, warningOutline, bulbOutline, lockOpenOutline, diamondOutline, newspaperOutline, add, close, share, create, trash, star, camera, mic, send, downloadOutline, chevronDown, language, globeOutline, checkmark, list, grid, apps, menu, search, person, helpCircle, informationCircle, documentText, mail, calendar, folder, chevronForward, ellipsisHorizontal, chevronBack, playBack, playForward, ellipse, starOutline, starHalf, heartHalf, checkmarkCircle, timeOutline, flag, trendingUp, trendingDown, remove, analytics, people, cash, cart, eye, chatbubbleOutline, thumbsUpOutline, thumbsUp, happyOutline, happy, sadOutline, sad, chevronUp, pin, pencil, callOutline, logoWhatsapp, paperPlaneOutline, mailOutline, chevronDownCircleOutline, closeCircle, alertCircle, logoApple, logoMicrosoft, linkOutline, unlinkOutline, cloudOfflineOutline, documentOutline, attachOutline, cameraOutline, closeCircleOutline, imageOutline, printOutline, chevronBackOutline, sendOutline, chatbubbleEllipsesOutline, swapVerticalOutline, chevronUpOutline, searchOutline, cartOutline, chatbubble, compass, compassOutline, gridOutline, listOutline, folderOutline, documents, documentsOutline, statsChart, statsChartOutline, laptopOutline, swapHorizontalOutline, codeSlashOutline, notificationsOffOutline, alarmOutline, chatboxEllipsesOutline, checkmarkDoneOutline, cogOutline, shareSocialOutline, helpCircleOutline, menuOutline, stopCircleOutline, videocamOffOutline, checkmarkDone, returnDownBackOutline } 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, peopleOutline, phonePortraitOutline, refreshOutline, documentTextOutline, lockClosedOutline, cloudUploadOutline, textOutline, informationCircleOutline, logoNpm, removeOutline, optionsOutline, personOutline, shieldCheckmarkOutline, keyOutline, desktopOutline, logOutOutline, cloudDownloadOutline, cloudOutline, gitBranchOutline, layersOutline, serverOutline, warningOutline, bulbOutline, lockOpenOutline, diamondOutline, newspaperOutline, add, close, share, create, trash, star, camera, mic, send, downloadOutline, chevronDown, language, globeOutline, checkmark, list, grid, apps, menu, search, person, helpCircle, informationCircle, documentText, mail, calendar, folder, chevronForward, ellipsisHorizontal, chevronBack, playBack, playForward, ellipse, starOutline, starHalf, heartHalf, checkmarkCircle, timeOutline, flag, trendingUp, trendingDown, remove, analytics, people, cash, cart, eye, chatbubbleOutline, thumbsUpOutline, thumbsUp, happyOutline, happy, sadOutline, sad, chevronUp, pin, pencil, callOutline, logoWhatsapp, paperPlaneOutline, mailOutline, chevronDownCircleOutline, closeCircle, alertCircle, logoApple, logoMicrosoft, linkOutline, unlinkOutline, cloudOfflineOutline, documentOutline, attachOutline, cameraOutline, closeCircleOutline, imageOutline, printOutline, chevronBackOutline, sendOutline, chatbubbleEllipsesOutline, swapVerticalOutline, chevronUpOutline, searchOutline, cartOutline, chatbubble, compass, compassOutline, gridOutline, listOutline, folderOutline, documents, documentsOutline, statsChart, statsChartOutline, laptopOutline, swapHorizontalOutline, codeSlashOutline, notificationsOffOutline, alarmOutline, chatboxEllipsesOutline, checkmarkDoneOutline, cogOutline, shareSocialOutline, helpCircleOutline, menuOutline, stopCircleOutline, videocamOffOutline, checkmarkDone, arrowUndoOutline, micOutline, arrowUpOutline } from 'ionicons/icons';
 import { Browser } from '@capacitor/browser';
 import * as i1$6 from '@angular/platform-browser';
 import { DomSanitizer, Meta, Title } from '@angular/platform-browser';
@@ -56,7 +56,7 @@ import { BrowserMultiFormatReader } from '@zxing/browser';
  * Current version of valtech-components.
  * This is automatically updated during the publish process.
  */
-const VERSION = '4.0.225';
+const VERSION = '4.0.227';
 
 // Control de estado de refresco (singleton a nivel de módulo)
 let isRefreshing = false;
@@ -1538,6 +1538,59 @@ function getTimeOfDayKey(date = new Date()) {
         return 'goodAfternoon';
     return 'goodEvening';
 }
+/** Convierte un valor de fecha (Date | ISO string | undefined) a Date válido o null. */
+function toDate(value) {
+    if (!value)
+        return null;
+    const d = value instanceof Date ? value : new Date(value);
+    return Number.isNaN(d.getTime()) ? null : d;
+}
+/** Diferencia en días-calendario entre `from` y `to` (to - from), ignorando la hora. */
+function calendarDayDiff(from, to) {
+    const a = new Date(from.getFullYear(), from.getMonth(), from.getDate());
+    const b = new Date(to.getFullYear(), to.getMonth(), to.getDate());
+    return Math.round((b.getTime() - a.getTime()) / 86_400_000);
+}
+/** Hora corta local, ej. "14:05". */
+function formatClockTime(value, locale = 'es-CL') {
+    const d = toDate(value);
+    if (!d)
+        return '';
+    return d.toLocaleTimeString(locale, { hour: '2-digit', minute: '2-digit' });
+}
+/**
+ * Etiqueta corta para listas de conversaciones (estilo Telegram/WhatsApp):
+ * hoy → hora ("14:05"), ayer → label `yesterday`, esta semana → día de semana,
+ * más viejo → fecha corta. `labels.today/yesterday` se inyectan ya traducidos.
+ */
+function formatRelativeTime(value, locale = 'es-CL', labels = {}) {
+    const d = toDate(value);
+    if (!d)
+        return '';
+    const diff = calendarDayDiff(d, new Date());
+    if (diff <= 0)
+        return formatClockTime(d, locale);
+    if (diff === 1)
+        return labels.yesterday ?? 'Ayer';
+    if (diff < 7)
+        return d.toLocaleDateString(locale, { weekday: 'short' });
+    return d.toLocaleDateString(locale, { day: '2-digit', month: '2-digit', year: '2-digit' });
+}
+/**
+ * Etiqueta para separadores de fecha dentro de un chat: "Hoy" / "Ayer" /
+ * fecha larga ("12 de junio de 2026"). `labels.today/yesterday` ya traducidos.
+ */
+function formatDateSeparator(value, locale = 'es-CL', labels = {}) {
+    const d = toDate(value);
+    if (!d)
+        return '';
+    const diff = calendarDayDiff(d, new Date());
+    if (diff <= 0)
+        return labels.today ?? 'Hoy';
+    if (diff === 1)
+        return labels.yesterday ?? 'Ayer';
+    return d.toLocaleDateString(locale, { day: 'numeric', month: 'long', year: 'numeric' });
+}
 
 /**
  * Servicio de internacionalización basado en Angular Signals.
@@ -72118,10 +72171,21 @@ class ConversationService {
         return this.http.delete(`${this.baseUrl}/conversations/${convId}/participants/${userId}`);
     }
     /**
-     * Envia un mensaje a una conversacion.
+     * Envia un mensaje a una conversacion, opcionalmente con adjuntos.
+     * El backend espera `attachments: { url, type, name, size }[]` (key `type` = MIME),
+     * mientras que el front usa `mimeType` — se mapea aqui.
      */
-    sendMessage(convId, body) {
-        return this.http.post(`${this.baseUrl}/conversations/${convId}/messages`, { body });
+    sendMessage(convId, body, attachments) {
+        const payload = { body };
+        if (attachments?.length) {
+            payload['attachments'] = attachments.map(a => ({
+                url: a.url,
+                type: a.mimeType,
+                name: a.name,
+                size: a.size ?? 0,
+            }));
+        }
+        return this.http.post(`${this.baseUrl}/conversations/${convId}/messages`, payload);
     }
     /**
      * Elimina (marca como eliminado) un mensaje.
@@ -72290,241 +72354,323 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
  */
 
 addIcons({
+    alertCircle,
     checkmark,
     checkmarkDone,
+    createOutline,
+    documentOutline,
+    happyOutline,
+    arrowUndoOutline,
     timeOutline,
-    alertCircle,
-    pencil,
-    trash,
-    returnDownBackOutline,
+    trashOutline,
 });
-const CHAT_I18N = {
+const MESSAGE_BUBBLE_I18N = {
     es: {
-        messageDeleted: '[mensaje eliminado]',
-        edited: '(editado)',
-        react: 'Reaccionar',
         reply: 'Responder',
         edit: 'Editar',
         delete: 'Eliminar',
+        react: 'Reaccionar',
+        deleted: 'Mensaje eliminado',
+        edited: 'editado',
     },
     en: {
-        messageDeleted: '[message deleted]',
-        edited: '(edited)',
-        react: 'React',
         reply: 'Reply',
         edit: 'Edit',
         delete: 'Delete',
+        react: 'React',
+        deleted: 'Message deleted',
+        edited: 'edited',
     },
 };
 /**
- * val-message-bubble
+ * val-message-bubble — burbuja de mensaje presentacional (signal inputs).
  *
- * Burbuja de mensaje para el chat. Alineada a la derecha si isMine, a la izquierda si no.
- * Muestra nombre del emisor, cuerpo, timestamp, estado de envio, reacciones y acciones.
- * Si el mensaje fue eliminado muestra un texto en gris sin acciones.
+ * Sin lógica de negocio: el contenedor (`val-chat-window`) decide agrupación y
+ * pasa flags (showAvatar/showName/tail). Las acciones (responder/editar/borrar/
+ * reaccionar) NO están siempre visibles: se revelan en hover (desktop) o al tocar
+ * la burbuja (móvil), y se emiten por un único `(action)` tipado.
  *
- * @example
- * <val-message-bubble
- *   [props]="msg"
- *   (reactionClick)="onReaction($event)"
- *   (replyClick)="onReply($event)"
- *   (deleteClick)="onDelete($event)"
- * />
+ * Read receipts estilo WhatsApp: sending → reloj, sent → ✓, delivered/read → ✓✓
+ * (read en color), failed → alerta.
  */
 class MessageBubbleComponent {
     constructor() {
         this.i18n = inject(I18nService);
-        this.reactionClick = new EventEmitter();
-        this.replyClick = new EventEmitter();
-        this.deleteClick = new EventEmitter();
-        this.editClick = new EventEmitter();
-        if (!this.i18n.hasNamespace('Chat')) {
-            this.i18n.registerDefaults('Chat', CHAT_I18N);
-        }
-    }
-    ngOnInit() { }
-    deletedText() {
-        this.i18n.lang();
-        return this.i18n.t('messageDeleted', 'Chat');
-    }
-    editedLabel() {
-        this.i18n.lang();
-        return this.i18n.t('edited', 'Chat');
-    }
-    formatTime(date) {
-        if (!date)
-            return '';
-        const d = date instanceof Date ? date : new Date(date);
-        return d.toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' });
-    }
-    statusIcon() {
-        switch (this.props.status) {
-            case 'sending':
-                return 'time-outline';
-            case 'failed':
-                return 'alert-circle';
-            case 'sent':
-            default:
-                return 'checkmark';
-        }
-    }
-    onReactionClick(reaction) {
-        this.reactionClick.emit({ token: reaction.token, msgId: this.props.msgId });
+        this.msg = input.required();
+        this.showAvatar = input(false);
+        this.showName = input(false);
+        this.tail = input(true);
+        this.locale = input('es-CL');
+        this.action = output();
+        this.actionsOpen = signal(false);
+        this.time = computed(() => formatClockTime(this.msg().createdAt, this.locale()));
+        this.initials = computed(() => {
+            const name = this.msg().senderName?.trim() ?? '';
+            if (!name)
+                return '?';
+            const parts = name.split(/\s+/);
+            return (parts[0][0] + (parts[1]?.[0] ?? '')).toUpperCase();
+        });
+        this.imageAttachments = computed(() => (this.msg().attachments ?? []).filter(a => a.mimeType?.startsWith('image/')));
+        this.audioAttachments = computed(() => (this.msg().attachments ?? []).filter(a => a.mimeType?.startsWith('audio/')));
+        this.fileAttachments = computed(() => (this.msg().attachments ?? []).filter(a => !a.mimeType?.startsWith('image/') && !a.mimeType?.startsWith('audio/')));
+        this.statusIcon = computed(() => {
+            switch (this.msg().status) {
+                case 'sending':
+                    return 'time-outline';
+                case 'failed':
+                    return 'alert-circle';
+                case 'delivered':
+                case 'read':
+                    return 'checkmark-done';
+                case 'sent':
+                default:
+                    return 'checkmark';
+            }
+        });
+        this.i18n.registerDefaults('MessageBubble', MESSAGE_BUBBLE_I18N);
     }
-    onReplyClick() {
-        this.replyClick.emit({ msgId: this.props.msgId });
+    toggleActions() {
+        if (this.msg().isDeleted)
+            return;
+        this.actionsOpen.update(v => !v);
     }
-    onDeleteClick() {
-        this.deleteClick.emit({ msgId: this.props.msgId });
+    emit(type, token) {
+        this.actionsOpen.set(false);
+        this.action.emit({ type, msgId: this.msg().msgId, token });
     }
-    onEditClick() {
-        this.editClick.emit({ msgId: this.props.msgId });
+    t(key) {
+        return this.i18n.t(key, 'MessageBubble');
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: MessageBubbleComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: MessageBubbleComponent, isStandalone: true, selector: "val-message-bubble", inputs: { props: "props" }, outputs: { reactionClick: "reactionClick", replyClick: "replyClick", deleteClick: "deleteClick", editClick: "editClick" }, ngImport: i0, template: `
-    <div class="message-bubble-wrapper" [class.is-mine]="props.isMine">
-      @if (!props.isMine && !props.isDeleted) {
-        <span class="sender-name">{{ props.senderName }}</span>
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: MessageBubbleComponent, isStandalone: true, selector: "val-message-bubble", inputs: { msg: { classPropertyName: "msg", publicName: "msg", isSignal: true, isRequired: true, transformFunction: null }, showAvatar: { classPropertyName: "showAvatar", publicName: "showAvatar", isSignal: true, isRequired: false, transformFunction: null }, showName: { classPropertyName: "showName", publicName: "showName", isSignal: true, isRequired: false, transformFunction: null }, tail: { classPropertyName: "tail", publicName: "tail", isSignal: true, isRequired: false, transformFunction: null }, locale: { classPropertyName: "locale", publicName: "locale", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { action: "action" }, ngImport: i0, template: `
+    <div class="row" [class.mine]="msg().isMine" [class.tail]="tail()" [class.with-avatar]="showAvatar()">
+      @if (showAvatar() && !msg().isMine) {
+        <div class="avatar" [class.hidden]="!tail()">
+          @if (msg().senderAvatar) {
+            <img [src]="msg().senderAvatar" [alt]="msg().senderName" />
+          } @else {
+            <span>{{ initials() }}</span>
+          }
+        </div>
       }
 
-      <div class="bubble">
-        @if (props.replyTo && !props.isDeleted) {
-          <div class="reply-preview">
-            <div class="reply-sender">{{ props.replyTo.senderName }}</div>
-            <div class="reply-body">{{ props.replyTo.body }}</div>
-          </div>
-        }
-
-        @if (props.isDeleted) {
-          <span class="deleted-text">{{ deletedText() }}</span>
-        } @else {
-          <div class="bubble-body">{{ props.body }}</div>
-        }
-
-        <div class="bubble-meta">
-          <span class="timestamp">{{ formatTime(props.createdAt) }}</span>
-          @if (props.isEdited && !props.isDeleted) {
-            <span class="edited-label">{{ editedLabel() }}</span>
-          }
-          @if (props.isMine && props.status) {
-            <ion-icon
-              [name]="statusIcon()"
-              [class]="'status-icon ' + (props.status ?? '')"
-              aria-hidden="true"
-            ></ion-icon>
+      <div class="bubble-wrap">
+        <div
+          class="bubble"
+          [class.deleted]="msg().isDeleted"
+          (click)="toggleActions()"
+          (keyup.enter)="toggleActions()"
+          tabindex="0"
+        >
+          @if (showName() && !msg().isMine && !msg().isDeleted) {
+            <span class="name">{{ msg().senderName }}</span>
           }
-        </div>
-      </div>
 
-      @if (!props.isDeleted && props.reactions && props.reactions.length > 0) {
-        <div class="reactions-bar">
-          @for (reaction of props.reactions; track reaction.token) {
-            <button class="reaction-btn" [class.active]="reaction.active" (click)="onReactionClick(reaction)">
-              <span>{{ reaction.token }}</span>
-              @if (reaction.count > 0) {
-                <span class="reaction-count">{{ reaction.count }}</span>
-              }
-            </button>
+          @if (msg().replyTo && !msg().isDeleted) {
+            <div class="reply-preview">
+              <span class="reply-name">{{ msg().replyTo!.senderName }}</span>
+              <span class="reply-body">{{ msg().replyTo!.body }}</span>
+            </div>
           }
-        </div>
-      }
 
-      @if (!props.isDeleted) {
-        <div class="bubble-actions">
-          <ion-button fill="clear" size="small" (click)="onReplyClick()">
-            <ion-icon name="return-down-back-outline" slot="icon-only" aria-hidden="true"></ion-icon>
-          </ion-button>
-          @if (props.isMine) {
-            <ion-button fill="clear" size="small" (click)="onEditClick()">
-              <ion-icon name="pencil" slot="icon-only" aria-hidden="true"></ion-icon>
-            </ion-button>
-            <ion-button fill="clear" size="small" color="danger" (click)="onDeleteClick()">
-              <ion-icon name="trash" slot="icon-only" aria-hidden="true"></ion-icon>
-            </ion-button>
+          @if (msg().isDeleted) {
+            <span class="body deleted-text">{{ t('deleted') }}</span>
+          } @else {
+            @if (imageAttachments().length > 0) {
+              <div class="attachments">
+                @for (att of imageAttachments(); track att.url) {
+                  <img class="att-image" [src]="att.url" [alt]="att.name" />
+                }
+              </div>
+            }
+            @if (audioAttachments().length > 0) {
+              <div class="audios">
+                @for (att of audioAttachments(); track att.url) {
+                  <audio class="att-audio" controls preload="metadata" [src]="att.url"></audio>
+                }
+              </div>
+            }
+            @if (fileAttachments().length > 0) {
+              <div class="files">
+                @for (att of fileAttachments(); track att.url) {
+                  <a class="file-chip" [href]="att.url" target="_blank" rel="noopener">
+                    <ion-icon name="document-outline" aria-hidden="true" />
+                    <span>{{ att.name }}</span>
+                  </a>
+                }
+              </div>
+            }
+            @if (msg().body) {
+              <span class="body">{{ msg().body }}</span>
+            }
           }
+
+          <span class="meta">
+            @if (msg().isEdited && !msg().isDeleted) {
+              <span class="edited">{{ t('edited') }}</span>
+            }
+            <span class="time">{{ time() }}</span>
+            @if (msg().isMine && !msg().isDeleted) {
+              <ion-icon
+                class="status"
+                [class.read]="msg().status === 'read'"
+                [class.failed]="msg().status === 'failed'"
+                [name]="statusIcon()"
+                aria-hidden="true"
+              />
+            }
+          </span>
         </div>
-      }
-    </div>
-  `, isInline: true, styles: [".message-bubble-wrapper{display:flex;flex-direction:column;align-items:flex-start;margin-bottom:4px}.message-bubble-wrapper.is-mine{align-items:flex-end}.message-bubble-wrapper.is-mine .bubble{background:var(--ion-color-primary);color:#fff;border-radius:18px 18px 4px}.message-bubble-wrapper.is-mine .bubble-meta{justify-content:flex-end}.message-bubble-wrapper:not(.is-mine) .bubble{background:var(--ion-card-background, var(--ion-background-color, #fff));color:var(--ion-text-color, #000);border-radius:18px 18px 18px 4px;border:1px solid var(--ion-border-color, rgba(0, 0, 0, .08))}.sender-name{font-size:.75rem;font-weight:600;color:var(--ion-color-medium, #92949c);margin:0 0 2px 12px}.bubble{max-width:75%;min-width:60px;padding:10px 14px;word-break:break-word;position:relative;box-shadow:0 1px 2px #0000000f}.reply-preview{background:#0000000f;border-left:3px solid var(--ion-color-primary);border-radius:6px;padding:6px 8px;margin-bottom:6px;font-size:.75rem;opacity:.85}.reply-preview .reply-sender{font-weight:700;margin-bottom:2px}.reply-preview .reply-body{opacity:.8;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:200px}.bubble-body{font-size:.9375rem;line-height:1.4;white-space:pre-wrap}.deleted-text{font-size:.875rem;font-style:italic;opacity:.6}.bubble-meta{display:flex;align-items:center;gap:4px;margin-top:4px;font-size:.6875rem;opacity:.7}.edited-label{font-style:italic}.status-icon{font-size:.75rem}.status-icon.sending{color:var(--ion-color-medium)}.status-icon.sent{color:#fff}.status-icon.failed{color:var(--ion-color-danger)}.reactions-bar{display:flex;flex-wrap:wrap;gap:4px;margin-top:4px}.reactions-bar .reaction-btn{display:inline-flex;align-items:center;gap:3px;background:var(--ion-card-background, var(--ion-background-color, #fff));border:1px solid var(--ion-border-color, rgba(0, 0, 0, .1));border-radius:12px;padding:2px 8px;font-size:.8125rem;cursor:pointer;transition:background .15s ease}.reactions-bar .reaction-btn.active{background:var(--ion-color-primary-tint, #4c8dff);color:#fff;border-color:var(--ion-color-primary)}.reactions-bar .reaction-btn .reaction-count{font-weight:600}.bubble-actions{display:flex;gap:4px;margin-top:2px}.bubble-actions ion-button{--padding-start: 6px;--padding-end: 6px;font-size:.75rem}\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"] }, { kind: "component", type: IonButton, selector: "ion-button", inputs: ["buttonType", "color", "disabled", "download", "expand", "fill", "form", "href", "mode", "rel", "routerAnimation", "routerDirection", "shape", "size", "strong", "target", "type"] }] }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: MessageBubbleComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'val-message-bubble', standalone: true, imports: [CommonModule, IonIcon, IonButton], template: `
-    <div class="message-bubble-wrapper" [class.is-mine]="props.isMine">
-      @if (!props.isMine && !props.isDeleted) {
-        <span class="sender-name">{{ props.senderName }}</span>
-      }
 
-      <div class="bubble">
-        @if (props.replyTo && !props.isDeleted) {
-          <div class="reply-preview">
-            <div class="reply-sender">{{ props.replyTo.senderName }}</div>
-            <div class="reply-body">{{ props.replyTo.body }}</div>
+        @if (msg().reactions && msg().reactions!.length > 0) {
+          <div class="reactions">
+            @for (r of msg().reactions!; track r.token) {
+              <button class="reaction" [class.active]="r.active" (click)="emit('react', r.token)">
+                <span>{{ r.token }}</span>
+                <span class="count">{{ r.count }}</span>
+              </button>
+            }
           </div>
         }
 
-        @if (props.isDeleted) {
-          <span class="deleted-text">{{ deletedText() }}</span>
-        } @else {
-          <div class="bubble-body">{{ props.body }}</div>
+        @if (!msg().isDeleted) {
+          <div class="actions" [class.open]="actionsOpen()">
+            <button class="act" [attr.aria-label]="t('react')" (click)="emit('react', '👍')">
+              <ion-icon name="happy-outline" aria-hidden="true" />
+            </button>
+            <button class="act" [attr.aria-label]="t('reply')" (click)="emit('reply')">
+              <ion-icon name="arrow-undo-outline" aria-hidden="true" />
+            </button>
+            @if (msg().isMine) {
+              <button class="act" [attr.aria-label]="t('edit')" (click)="emit('edit')">
+                <ion-icon name="create-outline" aria-hidden="true" />
+              </button>
+              <button class="act danger" [attr.aria-label]="t('delete')" (click)="emit('delete')">
+                <ion-icon name="trash-outline" aria-hidden="true" />
+              </button>
+            }
+          </div>
         }
-
-        <div class="bubble-meta">
-          <span class="timestamp">{{ formatTime(props.createdAt) }}</span>
-          @if (props.isEdited && !props.isDeleted) {
-            <span class="edited-label">{{ editedLabel() }}</span>
-          }
-          @if (props.isMine && props.status) {
-            <ion-icon
-              [name]="statusIcon()"
-              [class]="'status-icon ' + (props.status ?? '')"
-              aria-hidden="true"
-            ></ion-icon>
-          }
-        </div>
       </div>
-
-      @if (!props.isDeleted && props.reactions && props.reactions.length > 0) {
-        <div class="reactions-bar">
-          @for (reaction of props.reactions; track reaction.token) {
-            <button class="reaction-btn" [class.active]="reaction.active" (click)="onReactionClick(reaction)">
-              <span>{{ reaction.token }}</span>
-              @if (reaction.count > 0) {
-                <span class="reaction-count">{{ reaction.count }}</span>
-              }
-            </button>
+    </div>
+  `, isInline: true, styles: [":host{display:block}.row{display:flex;align-items:flex-end;gap:8px;margin:1px 0}.row.mine{flex-direction:row-reverse}.row.tail{margin-bottom:8px}.avatar{width:28px;height:28px;border-radius:50%;overflow:hidden;flex-shrink:0;display:flex;align-items:center;justify-content:center;background:var(--ion-color-primary);color:#fff;font-size:.6875rem;font-weight:700}.avatar.hidden{visibility:hidden}.avatar img{width:100%;height:100%;object-fit:cover}.bubble-wrap{position:relative;max-width:min(78%,520px);display:flex;flex-direction:column}.row.mine .bubble-wrap{align-items:flex-end}.bubble{position:relative;padding:7px 11px;border-radius:16px;background:var(--ion-card-background, var(--ion-background-color, #fff));border:1px solid var(--ion-border-color, rgba(0, 0, 0, .08));color:var(--ion-text-color, #000);font-size:.9375rem;line-height:1.35;cursor:pointer;outline:none;word-break:break-word}.row:not(.mine).tail .bubble{border-bottom-left-radius:5px}.mine .bubble{background:var(--ion-color-primary);border-color:var(--ion-color-primary);color:var(--ion-color-primary-contrast, #fff)}.mine.tail .bubble{border-bottom-right-radius:5px}.bubble.deleted{background:transparent;border-style:dashed;cursor:default}.name{display:block;font-size:.75rem;font-weight:700;color:var(--ion-color-primary);margin-bottom:2px}.reply-preview{display:flex;flex-direction:column;gap:1px;padding:4px 8px;margin-bottom:4px;border-left:3px solid currentColor;border-radius:6px;background:var(--ion-color-step-100, rgba(127, 127, 127, .12));font-size:.8125rem;opacity:.85}.reply-name{font-weight:700}.reply-body{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:240px}.body{white-space:pre-wrap}.deleted-text{font-style:italic;opacity:.6}.attachments{display:flex;flex-direction:column;gap:4px;margin-bottom:4px}.att-image{max-width:100%;border-radius:10px;display:block}.audios{display:flex;flex-direction:column;gap:4px;margin-bottom:4px}.att-audio{width:240px;max-width:100%;height:40px}.files{display:flex;flex-direction:column;gap:4px;margin-bottom:4px}.file-chip{display:inline-flex;align-items:center;gap:6px;padding:6px 10px;border-radius:8px;background:var(--ion-color-step-100, rgba(127, 127, 127, .12));color:inherit;text-decoration:none;font-size:.8125rem}.meta{display:inline-flex;align-items:center;gap:4px;float:right;margin:2px 0 -2px 8px;font-size:.6875rem;opacity:.7}.edited{font-style:italic}.status{font-size:.875rem}.status.read{color:var(--ion-color-secondary, #4fc3f7);opacity:1}.status.failed{color:var(--ion-color-danger, #eb445a);opacity:1}.reactions{display:flex;flex-wrap:wrap;gap:4px;margin-top:3px}.reaction{display:inline-flex;align-items:center;gap:3px;padding:1px 7px;border-radius:999px;border:1px solid var(--ion-border-color, rgba(0, 0, 0, .1));background:var(--ion-card-background, var(--ion-background-color, #fff));font-size:.75rem;cursor:pointer;color:var(--ion-text-color, #000)}.reaction.active{border-color:var(--ion-color-primary);background:var(--ion-color-primary-tint, var(--ion-color-primary));color:var(--ion-color-primary-contrast, #fff)}.reaction .count{opacity:.75}.actions{position:absolute;top:-14px;display:flex;gap:2px;padding:2px;border-radius:999px;background:var(--ion-card-background, var(--ion-background-color, #fff));border:1px solid var(--ion-border-color, rgba(0, 0, 0, .1));box-shadow:0 2px 8px #0000001f;opacity:0;pointer-events:none;transition:opacity .12s ease;z-index:2}.row.mine .actions{right:0}.row:not(.mine) .actions{left:0}.bubble-wrap:hover .actions,.actions.open{opacity:1;pointer-events:auto}.act{display:inline-flex;align-items:center;justify-content:center;width:28px;height:28px;border:none;border-radius:50%;background:transparent;color:var(--ion-color-medium, #92949c);cursor:pointer;font-size:1rem}.act:hover{background:var(--ion-color-step-100, rgba(127, 127, 127, .12));color:var(--ion-text-color, #000)}.act.danger:hover{color:var(--ion-color-danger, #eb445a)}\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: MessageBubbleComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'val-message-bubble', standalone: true, imports: [CommonModule, IonIcon], template: `
+    <div class="row" [class.mine]="msg().isMine" [class.tail]="tail()" [class.with-avatar]="showAvatar()">
+      @if (showAvatar() && !msg().isMine) {
+        <div class="avatar" [class.hidden]="!tail()">
+          @if (msg().senderAvatar) {
+            <img [src]="msg().senderAvatar" [alt]="msg().senderName" />
+          } @else {
+            <span>{{ initials() }}</span>
           }
         </div>
       }
 
-      @if (!props.isDeleted) {
-        <div class="bubble-actions">
-          <ion-button fill="clear" size="small" (click)="onReplyClick()">
-            <ion-icon name="return-down-back-outline" slot="icon-only" aria-hidden="true"></ion-icon>
-          </ion-button>
-          @if (props.isMine) {
-            <ion-button fill="clear" size="small" (click)="onEditClick()">
-              <ion-icon name="pencil" slot="icon-only" aria-hidden="true"></ion-icon>
-            </ion-button>
-            <ion-button fill="clear" size="small" color="danger" (click)="onDeleteClick()">
-              <ion-icon name="trash" slot="icon-only" aria-hidden="true"></ion-icon>
-            </ion-button>
+      <div class="bubble-wrap">
+        <div
+          class="bubble"
+          [class.deleted]="msg().isDeleted"
+          (click)="toggleActions()"
+          (keyup.enter)="toggleActions()"
+          tabindex="0"
+        >
+          @if (showName() && !msg().isMine && !msg().isDeleted) {
+            <span class="name">{{ msg().senderName }}</span>
+          }
+
+          @if (msg().replyTo && !msg().isDeleted) {
+            <div class="reply-preview">
+              <span class="reply-name">{{ msg().replyTo!.senderName }}</span>
+              <span class="reply-body">{{ msg().replyTo!.body }}</span>
+            </div>
+          }
+
+          @if (msg().isDeleted) {
+            <span class="body deleted-text">{{ t('deleted') }}</span>
+          } @else {
+            @if (imageAttachments().length > 0) {
+              <div class="attachments">
+                @for (att of imageAttachments(); track att.url) {
+                  <img class="att-image" [src]="att.url" [alt]="att.name" />
+                }
+              </div>
+            }
+            @if (audioAttachments().length > 0) {
+              <div class="audios">
+                @for (att of audioAttachments(); track att.url) {
+                  <audio class="att-audio" controls preload="metadata" [src]="att.url"></audio>
+                }
+              </div>
+            }
+            @if (fileAttachments().length > 0) {
+              <div class="files">
+                @for (att of fileAttachments(); track att.url) {
+                  <a class="file-chip" [href]="att.url" target="_blank" rel="noopener">
+                    <ion-icon name="document-outline" aria-hidden="true" />
+                    <span>{{ att.name }}</span>
+                  </a>
+                }
+              </div>
+            }
+            @if (msg().body) {
+              <span class="body">{{ msg().body }}</span>
+            }
           }
+
+          <span class="meta">
+            @if (msg().isEdited && !msg().isDeleted) {
+              <span class="edited">{{ t('edited') }}</span>
+            }
+            <span class="time">{{ time() }}</span>
+            @if (msg().isMine && !msg().isDeleted) {
+              <ion-icon
+                class="status"
+                [class.read]="msg().status === 'read'"
+                [class.failed]="msg().status === 'failed'"
+                [name]="statusIcon()"
+                aria-hidden="true"
+              />
+            }
+          </span>
         </div>
-      }
+
+        @if (msg().reactions && msg().reactions!.length > 0) {
+          <div class="reactions">
+            @for (r of msg().reactions!; track r.token) {
+              <button class="reaction" [class.active]="r.active" (click)="emit('react', r.token)">
+                <span>{{ r.token }}</span>
+                <span class="count">{{ r.count }}</span>
+              </button>
+            }
+          </div>
+        }
+
+        @if (!msg().isDeleted) {
+          <div class="actions" [class.open]="actionsOpen()">
+            <button class="act" [attr.aria-label]="t('react')" (click)="emit('react', '👍')">
+              <ion-icon name="happy-outline" aria-hidden="true" />
+            </button>
+            <button class="act" [attr.aria-label]="t('reply')" (click)="emit('reply')">
+              <ion-icon name="arrow-undo-outline" aria-hidden="true" />
+            </button>
+            @if (msg().isMine) {
+              <button class="act" [attr.aria-label]="t('edit')" (click)="emit('edit')">
+                <ion-icon name="create-outline" aria-hidden="true" />
+              </button>
+              <button class="act danger" [attr.aria-label]="t('delete')" (click)="emit('delete')">
+                <ion-icon name="trash-outline" aria-hidden="true" />
+              </button>
+            }
+          </div>
+        }
+      </div>
     </div>
-  `, styles: [".message-bubble-wrapper{display:flex;flex-direction:column;align-items:flex-start;margin-bottom:4px}.message-bubble-wrapper.is-mine{align-items:flex-end}.message-bubble-wrapper.is-mine .bubble{background:var(--ion-color-primary);color:#fff;border-radius:18px 18px 4px}.message-bubble-wrapper.is-mine .bubble-meta{justify-content:flex-end}.message-bubble-wrapper:not(.is-mine) .bubble{background:var(--ion-card-background, var(--ion-background-color, #fff));color:var(--ion-text-color, #000);border-radius:18px 18px 18px 4px;border:1px solid var(--ion-border-color, rgba(0, 0, 0, .08))}.sender-name{font-size:.75rem;font-weight:600;color:var(--ion-color-medium, #92949c);margin:0 0 2px 12px}.bubble{max-width:75%;min-width:60px;padding:10px 14px;word-break:break-word;position:relative;box-shadow:0 1px 2px #0000000f}.reply-preview{background:#0000000f;border-left:3px solid var(--ion-color-primary);border-radius:6px;padding:6px 8px;margin-bottom:6px;font-size:.75rem;opacity:.85}.reply-preview .reply-sender{font-weight:700;margin-bottom:2px}.reply-preview .reply-body{opacity:.8;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:200px}.bubble-body{font-size:.9375rem;line-height:1.4;white-space:pre-wrap}.deleted-text{font-size:.875rem;font-style:italic;opacity:.6}.bubble-meta{display:flex;align-items:center;gap:4px;margin-top:4px;font-size:.6875rem;opacity:.7}.edited-label{font-style:italic}.status-icon{font-size:.75rem}.status-icon.sending{color:var(--ion-color-medium)}.status-icon.sent{color:#fff}.status-icon.failed{color:var(--ion-color-danger)}.reactions-bar{display:flex;flex-wrap:wrap;gap:4px;margin-top:4px}.reactions-bar .reaction-btn{display:inline-flex;align-items:center;gap:3px;background:var(--ion-card-background, var(--ion-background-color, #fff));border:1px solid var(--ion-border-color, rgba(0, 0, 0, .1));border-radius:12px;padding:2px 8px;font-size:.8125rem;cursor:pointer;transition:background .15s ease}.reactions-bar .reaction-btn.active{background:var(--ion-color-primary-tint, #4c8dff);color:#fff;border-color:var(--ion-color-primary)}.reactions-bar .reaction-btn .reaction-count{font-weight:600}.bubble-actions{display:flex;gap:4px;margin-top:2px}.bubble-actions ion-button{--padding-start: 6px;--padding-end: 6px;font-size:.75rem}\n"] }]
-        }], ctorParameters: () => [], propDecorators: { props: [{
-                type: Input
-            }], reactionClick: [{
-                type: Output
-            }], replyClick: [{
-                type: Output
-            }], deleteClick: [{
-                type: Output
-            }], editClick: [{
-                type: Output
-            }] } });
+  `, styles: [":host{display:block}.row{display:flex;align-items:flex-end;gap:8px;margin:1px 0}.row.mine{flex-direction:row-reverse}.row.tail{margin-bottom:8px}.avatar{width:28px;height:28px;border-radius:50%;overflow:hidden;flex-shrink:0;display:flex;align-items:center;justify-content:center;background:var(--ion-color-primary);color:#fff;font-size:.6875rem;font-weight:700}.avatar.hidden{visibility:hidden}.avatar img{width:100%;height:100%;object-fit:cover}.bubble-wrap{position:relative;max-width:min(78%,520px);display:flex;flex-direction:column}.row.mine .bubble-wrap{align-items:flex-end}.bubble{position:relative;padding:7px 11px;border-radius:16px;background:var(--ion-card-background, var(--ion-background-color, #fff));border:1px solid var(--ion-border-color, rgba(0, 0, 0, .08));color:var(--ion-text-color, #000);font-size:.9375rem;line-height:1.35;cursor:pointer;outline:none;word-break:break-word}.row:not(.mine).tail .bubble{border-bottom-left-radius:5px}.mine .bubble{background:var(--ion-color-primary);border-color:var(--ion-color-primary);color:var(--ion-color-primary-contrast, #fff)}.mine.tail .bubble{border-bottom-right-radius:5px}.bubble.deleted{background:transparent;border-style:dashed;cursor:default}.name{display:block;font-size:.75rem;font-weight:700;color:var(--ion-color-primary);margin-bottom:2px}.reply-preview{display:flex;flex-direction:column;gap:1px;padding:4px 8px;margin-bottom:4px;border-left:3px solid currentColor;border-radius:6px;background:var(--ion-color-step-100, rgba(127, 127, 127, .12));font-size:.8125rem;opacity:.85}.reply-name{font-weight:700}.reply-body{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:240px}.body{white-space:pre-wrap}.deleted-text{font-style:italic;opacity:.6}.attachments{display:flex;flex-direction:column;gap:4px;margin-bottom:4px}.att-image{max-width:100%;border-radius:10px;display:block}.audios{display:flex;flex-direction:column;gap:4px;margin-bottom:4px}.att-audio{width:240px;max-width:100%;height:40px}.files{display:flex;flex-direction:column;gap:4px;margin-bottom:4px}.file-chip{display:inline-flex;align-items:center;gap:6px;padding:6px 10px;border-radius:8px;background:var(--ion-color-step-100, rgba(127, 127, 127, .12));color:inherit;text-decoration:none;font-size:.8125rem}.meta{display:inline-flex;align-items:center;gap:4px;float:right;margin:2px 0 -2px 8px;font-size:.6875rem;opacity:.7}.edited{font-style:italic}.status{font-size:.875rem}.status.read{color:var(--ion-color-secondary, #4fc3f7);opacity:1}.status.failed{color:var(--ion-color-danger, #eb445a);opacity:1}.reactions{display:flex;flex-wrap:wrap;gap:4px;margin-top:3px}.reaction{display:inline-flex;align-items:center;gap:3px;padding:1px 7px;border-radius:999px;border:1px solid var(--ion-border-color, rgba(0, 0, 0, .1));background:var(--ion-card-background, var(--ion-background-color, #fff));font-size:.75rem;cursor:pointer;color:var(--ion-text-color, #000)}.reaction.active{border-color:var(--ion-color-primary);background:var(--ion-color-primary-tint, var(--ion-color-primary));color:var(--ion-color-primary-contrast, #fff)}.reaction .count{opacity:.75}.actions{position:absolute;top:-14px;display:flex;gap:2px;padding:2px;border-radius:999px;background:var(--ion-card-background, var(--ion-background-color, #fff));border:1px solid var(--ion-border-color, rgba(0, 0, 0, .1));box-shadow:0 2px 8px #0000001f;opacity:0;pointer-events:none;transition:opacity .12s ease;z-index:2}.row.mine .actions{right:0}.row:not(.mine) .actions{left:0}.bubble-wrap:hover .actions,.actions.open{opacity:1;pointer-events:auto}.act{display:inline-flex;align-items:center;justify-content:center;width:28px;height:28px;border:none;border-radius:50%;background:transparent;color:var(--ion-color-medium, #92949c);cursor:pointer;font-size:1rem}.act:hover{background:var(--ion-color-step-100, rgba(127, 127, 127, .12));color:var(--ion-text-color, #000)}.act.danger:hover{color:var(--ion-color-danger, #eb445a)}\n"] }]
+        }], ctorParameters: () => [] });
 
 addIcons({ sendOutline });
 const CHAT_INPUT_I18N = {
@@ -72676,6 +72822,493 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
                 type: Output
             }] } });
 
+addIcons({ addOutline, closeOutline, happyOutline, micOutline, arrowUpOutline, trashOutline });
+const CHAT_COMPOSER_I18N = {
+    es: {
+        placeholder: 'Escribe un mensaje',
+        send: 'Enviar',
+        attach: 'Adjuntar',
+        emoji: 'Emoji',
+        voice: 'Mensaje de voz',
+        replyingTo: 'Respondiendo a',
+        cancel: 'Cancelar',
+    },
+    en: {
+        placeholder: 'Write a message',
+        send: 'Send',
+        attach: 'Attach',
+        emoji: 'Emoji',
+        voice: 'Voice message',
+        replyingTo: 'Replying to',
+        cancel: 'Cancel',
+    },
+};
+const QUICK_EMOJIS = ['👍', '❤️', '😂', '🎉', '🙏', '🔥', '😮', '😢'];
+/**
+ * val-chat-composer — barra de redacción de chat moderna (signal inputs).
+ *
+ * Pill con: adjuntar (+), textarea auto-grow, emoji (fila rápida) y mic/enviar
+ * (mic cuando está vacío, enviar cuando hay texto — patrón WhatsApp/Telegram).
+ * Muestra una barra de contexto "respondiendo a" cuando `replyingTo` está seteado.
+ * `typing` se emite con debounce (máx. 1 vez cada 2s) para no spamear writes.
+ */
+class ChatComposerComponent {
+    constructor() {
+        this.i18n = inject(I18nService);
+        this.placeholder = input('');
+        this.disabled = input(false);
+        this.maxLength = input(2000);
+        this.replyingTo = input(null);
+        this.showAttach = input(true);
+        this.showEmoji = input(true);
+        this.showMic = input(true);
+        this.send = output();
+        this.typing = output();
+        this.attach = output();
+        this.voice = output();
+        this.cancelReply = output();
+        this.body = signal('');
+        this.emojiOpen = signal(false);
+        this.quickEmojis = QUICK_EMOJIS;
+        // Grabación de audio (MediaRecorder).
+        this.recording = signal(false);
+        this.recSeconds = signal(0);
+        this.recChunks = [];
+        this.recTimeLabel = computed(() => {
+            const s = this.recSeconds();
+            const mm = String(Math.floor(s / 60)).padStart(2, '0');
+            const ss = String(s % 60).padStart(2, '0');
+            return `${mm}:${ss}`;
+        });
+        this.lastTypingEmit = 0;
+        this.canSend = computed(() => {
+            const t = this.body().trim();
+            return t.length > 0 && t.length <= this.maxLength() && !this.disabled();
+        });
+        this.placeholderText = computed(() => {
+            this.i18n.lang();
+            return this.placeholder() || this.i18n.t('placeholder', 'ChatComposer');
+        });
+        this.i18n.registerDefaults('ChatComposer', CHAT_COMPOSER_I18N);
+    }
+    onInput(event) {
+        const target = event.target;
+        this.body.set(target.value ?? '');
+        this.emitTypingDebounced();
+    }
+    onKeydown(event) {
+        if (event.key === 'Enter' && !event.shiftKey) {
+            event.preventDefault();
+            this.onSend();
+        }
+    }
+    onSend() {
+        const trimmed = this.body().trim();
+        if (!trimmed || trimmed.length > this.maxLength())
+            return;
+        this.send.emit(trimmed);
+        this.body.set('');
+        this.emojiOpen.set(false);
+    }
+    toggleEmoji() {
+        this.emojiOpen.update(v => !v);
+    }
+    insertEmoji(emoji) {
+        this.body.update(v => v + emoji);
+    }
+    onFile(event) {
+        const input = event.target;
+        const file = input.files?.[0];
+        if (file)
+            this.attach.emit(file);
+        input.value = '';
+    }
+    /** Pegar imagen desde el portapapeles (captura de pantalla, copiar imagen). */
+    onPaste(event) {
+        const items = event.clipboardData?.items;
+        if (!items)
+            return;
+        for (const item of Array.from(items)) {
+            if (item.type.startsWith('image/')) {
+                const file = item.getAsFile();
+                if (file) {
+                    event.preventDefault();
+                    this.attach.emit(file);
+                }
+                return;
+            }
+        }
+    }
+    /**
+     * Emite typing como máximo 1 vez cada 2s. No usa Date.now() directo en plantillas
+     * de workflow; aquí estamos en runtime de navegador, performance.now es seguro.
+     */
+    emitTypingDebounced() {
+        const now = performance.now();
+        if (now - this.lastTypingEmit > 2000) {
+            this.lastTypingEmit = now;
+            this.typing.emit();
+        }
+    }
+    // ─── Grabación de audio ───────────────────────────────────────────────────
+    /** Selecciona un mimeType de audio soportado por el navegador. */
+    pickAudioMime() {
+        const candidates = ['audio/webm;codecs=opus', 'audio/webm', 'audio/mp4'];
+        const MR = window.MediaRecorder;
+        if (!MR?.isTypeSupported)
+            return '';
+        return candidates.find(c => MR.isTypeSupported(c)) ?? '';
+    }
+    async startRecording() {
+        if (this.recording())
+            return;
+        if (!navigator.mediaDevices?.getUserMedia || !('MediaRecorder' in window)) {
+            this.voice.emit(); // sin soporte: deja que el consumer decida (fallback)
+            return;
+        }
+        try {
+            const stream = await navigator.mediaDevices.getUserMedia({ audio: true });
+            this.recStream = stream;
+            const mimeType = this.pickAudioMime();
+            this.recorder = new MediaRecorder(stream, mimeType ? { mimeType } : undefined);
+            this.recChunks = [];
+            this.recorder.ondataavailable = e => {
+                if (e.data.size > 0)
+                    this.recChunks.push(e.data);
+            };
+            this.recorder.start();
+            this.recording.set(true);
+            this.recSeconds.set(0);
+            this.recTimer = setInterval(() => this.recSeconds.update(s => s + 1), 1000);
+        }
+        catch {
+            this.cleanupRecording();
+        }
+    }
+    stopAndSend() {
+        const rec = this.recorder;
+        if (!rec) {
+            this.cleanupRecording();
+            return;
+        }
+        rec.onstop = () => {
+            const type = rec.mimeType || 'audio/webm';
+            const blob = new Blob(this.recChunks, { type });
+            const ext = type.includes('mp4') ? 'm4a' : 'webm';
+            const file = new File([blob], `audio-${this.recSeconds()}s.${ext}`, { type });
+            if (blob.size > 0)
+                this.attach.emit(file);
+            this.cleanupRecording();
+        };
+        rec.stop();
+    }
+    cancelRecording() {
+        const rec = this.recorder;
+        if (rec)
+            rec.onstop = () => this.cleanupRecording();
+        try {
+            rec?.stop();
+        }
+        catch {
+            this.cleanupRecording();
+        }
+        if (!rec)
+            this.cleanupRecording();
+    }
+    cleanupRecording() {
+        if (this.recTimer)
+            clearInterval(this.recTimer);
+        this.recTimer = undefined;
+        this.recStream?.getTracks().forEach(t => t.stop());
+        this.recStream = undefined;
+        this.recorder = undefined;
+        this.recChunks = [];
+        this.recording.set(false);
+        this.recSeconds.set(0);
+    }
+    ngOnDestroy() {
+        this.cleanupRecording();
+    }
+    t(key) {
+        return this.i18n.t(key, 'ChatComposer');
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: ChatComposerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: ChatComposerComponent, isStandalone: true, selector: "val-chat-composer", inputs: { placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, maxLength: { classPropertyName: "maxLength", publicName: "maxLength", isSignal: true, isRequired: false, transformFunction: null }, replyingTo: { classPropertyName: "replyingTo", publicName: "replyingTo", isSignal: true, isRequired: false, transformFunction: null }, showAttach: { classPropertyName: "showAttach", publicName: "showAttach", isSignal: true, isRequired: false, transformFunction: null }, showEmoji: { classPropertyName: "showEmoji", publicName: "showEmoji", isSignal: true, isRequired: false, transformFunction: null }, showMic: { classPropertyName: "showMic", publicName: "showMic", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { send: "send", typing: "typing", attach: "attach", voice: "voice", cancelReply: "cancelReply" }, ngImport: i0, template: `
+    <div class="composer">
+      @if (replyingTo()) {
+        <div class="reply-bar">
+          <div class="reply-content">
+            <span class="reply-name">{{ replyingTo()!.senderName }}</span>
+            <span class="reply-body">{{ replyingTo()!.body }}</span>
+          </div>
+          <button class="icon-btn" [attr.aria-label]="t('cancel')" (click)="cancelReply.emit()">
+            <ion-icon name="close-outline" aria-hidden="true" />
+          </button>
+        </div>
+      }
+
+      @if (emojiOpen()) {
+        <div class="emoji-row">
+          @for (e of quickEmojis; track e) {
+            <button class="emoji" (click)="insertEmoji(e)">{{ e }}</button>
+          }
+        </div>
+      }
+
+      @if (recording()) {
+        <div class="rec-bar">
+          <button class="icon-btn danger" [attr.aria-label]="t('cancel')" (click)="cancelRecording()">
+            <ion-icon name="trash-outline" aria-hidden="true" />
+          </button>
+          <span class="rec-dot"></span>
+          <span class="rec-time">{{ recTimeLabel() }}</span>
+          <span class="rec-spacer"></span>
+          <button class="send-btn" [attr.aria-label]="t('send')" (click)="stopAndSend()">
+            <ion-icon name="arrow-up-outline" aria-hidden="true" />
+          </button>
+        </div>
+      } @else {
+        <div class="pill">
+          @if (showAttach()) {
+            <label class="icon-btn" [attr.aria-label]="t('attach')">
+              <ion-icon name="add-outline" aria-hidden="true" />
+              <input type="file" hidden (change)="onFile($event)" accept="image/*,application/pdf" />
+            </label>
+          }
+
+          <ion-textarea
+            class="field"
+            [placeholder]="placeholderText()"
+            [disabled]="disabled()"
+            [maxlength]="maxLength()"
+            [autoGrow]="true"
+            [rows]="1"
+            [value]="body()"
+            [spellcheck]="false"
+            autocapitalize="sentences"
+            autocorrect="off"
+            enterkeyhint="enter"
+            (ionInput)="onInput($event)"
+            (keydown)="onKeydown($event)"
+            (paste)="onPaste($event)"
+          ></ion-textarea>
+
+          @if (showEmoji()) {
+            <button
+              class="icon-btn"
+              [class.active]="emojiOpen()"
+              [attr.aria-label]="t('emoji')"
+              (click)="toggleEmoji()"
+            >
+              <ion-icon name="happy-outline" aria-hidden="true" />
+            </button>
+          }
+
+          @if (canSend()) {
+            <button class="send-btn" [attr.aria-label]="t('send')" (click)="onSend()">
+              <ion-icon name="arrow-up-outline" aria-hidden="true" />
+            </button>
+          } @else if (showMic()) {
+            <button class="icon-btn mic" [attr.aria-label]="t('voice')" (click)="startRecording()">
+              <ion-icon name="mic-outline" aria-hidden="true" />
+            </button>
+          }
+        </div>
+      }
+    </div>
+  `, isInline: true, styles: [":host{display:block}.composer{display:flex;flex-direction:column;gap:6px;padding:8px 10px calc(8px + env(safe-area-inset-bottom,0px));background:var(--ion-background-color, #fff);border-top:1px solid var(--ion-border-color, rgba(0, 0, 0, .08))}.reply-bar{display:flex;align-items:center;gap:8px;padding:6px 10px;border-left:3px solid var(--ion-color-primary);border-radius:8px;background:var(--ion-color-step-100, rgba(127, 127, 127, .1))}.reply-content{display:flex;flex-direction:column;flex:1;min-width:0;font-size:.8125rem}.reply-name{font-weight:700;color:var(--ion-color-primary)}.reply-body{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--ion-color-medium, #92949c)}.emoji-row{display:flex;gap:4px;flex-wrap:wrap}.emoji{border:none;background:var(--ion-color-step-100, rgba(127, 127, 127, .1));border-radius:10px;padding:4px 8px;font-size:1.25rem;cursor:pointer}.pill{display:flex;align-items:flex-end;gap:4px;background:var(--ion-color-light, #f4f5f8);border:1px solid var(--ion-border-color, rgba(0, 0, 0, .08));border-radius:24px;padding:2px 6px}.field{flex:1;--background: transparent;--padding-start: 6px;--padding-end: 6px;--padding-top: 8px;--padding-bottom: 8px;margin:0;max-height:120px;font-size:.9375rem}.icon-btn{display:inline-flex;align-items:center;justify-content:center;width:38px;height:38px;flex-shrink:0;border:none;border-radius:50%;background:transparent;color:var(--ion-color-medium, #92949c);cursor:pointer;font-size:1.375rem}.icon-btn:hover,.icon-btn.active,.icon-btn.mic:hover{color:var(--ion-color-primary)}.send-btn{display:inline-flex;align-items:center;justify-content:center;width:38px;height:38px;flex-shrink:0;border:none;border-radius:50%;background:var(--ion-color-primary);color:var(--ion-color-primary-contrast, #fff);cursor:pointer;font-size:1.25rem;transition:transform .1s ease}.send-btn:active{transform:scale(.92)}.icon-btn.danger{color:var(--ion-color-danger, #eb445a)}.rec-bar{display:flex;align-items:center;gap:10px;background:var(--ion-color-light, #f4f5f8);border:1px solid var(--ion-border-color, rgba(0, 0, 0, .08));border-radius:24px;padding:2px 6px}.rec-dot{width:10px;height:10px;border-radius:50%;background:var(--ion-color-danger, #eb445a);animation:rec-pulse 1.2s ease-in-out infinite}.rec-time{font-variant-numeric:tabular-nums;font-size:.9375rem;color:var(--ion-text-color, #000)}.rec-spacer{flex:1}@keyframes rec-pulse{0%,to{opacity:1}50%{opacity:.3}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: IonTextarea, selector: "ion-textarea", inputs: ["autoGrow", "autocapitalize", "autofocus", "clearOnEdit", "color", "cols", "counter", "counterFormatter", "debounce", "disabled", "enterkeyhint", "errorText", "fill", "helperText", "inputmode", "label", "labelPlacement", "maxlength", "minlength", "mode", "name", "placeholder", "readonly", "required", "rows", "shape", "spellcheck", "value", "wrap"] }, { 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: ChatComposerComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'val-chat-composer', standalone: true, imports: [CommonModule, IonTextarea, IonIcon], template: `
+    <div class="composer">
+      @if (replyingTo()) {
+        <div class="reply-bar">
+          <div class="reply-content">
+            <span class="reply-name">{{ replyingTo()!.senderName }}</span>
+            <span class="reply-body">{{ replyingTo()!.body }}</span>
+          </div>
+          <button class="icon-btn" [attr.aria-label]="t('cancel')" (click)="cancelReply.emit()">
+            <ion-icon name="close-outline" aria-hidden="true" />
+          </button>
+        </div>
+      }
+
+      @if (emojiOpen()) {
+        <div class="emoji-row">
+          @for (e of quickEmojis; track e) {
+            <button class="emoji" (click)="insertEmoji(e)">{{ e }}</button>
+          }
+        </div>
+      }
+
+      @if (recording()) {
+        <div class="rec-bar">
+          <button class="icon-btn danger" [attr.aria-label]="t('cancel')" (click)="cancelRecording()">
+            <ion-icon name="trash-outline" aria-hidden="true" />
+          </button>
+          <span class="rec-dot"></span>
+          <span class="rec-time">{{ recTimeLabel() }}</span>
+          <span class="rec-spacer"></span>
+          <button class="send-btn" [attr.aria-label]="t('send')" (click)="stopAndSend()">
+            <ion-icon name="arrow-up-outline" aria-hidden="true" />
+          </button>
+        </div>
+      } @else {
+        <div class="pill">
+          @if (showAttach()) {
+            <label class="icon-btn" [attr.aria-label]="t('attach')">
+              <ion-icon name="add-outline" aria-hidden="true" />
+              <input type="file" hidden (change)="onFile($event)" accept="image/*,application/pdf" />
+            </label>
+          }
+
+          <ion-textarea
+            class="field"
+            [placeholder]="placeholderText()"
+            [disabled]="disabled()"
+            [maxlength]="maxLength()"
+            [autoGrow]="true"
+            [rows]="1"
+            [value]="body()"
+            [spellcheck]="false"
+            autocapitalize="sentences"
+            autocorrect="off"
+            enterkeyhint="enter"
+            (ionInput)="onInput($event)"
+            (keydown)="onKeydown($event)"
+            (paste)="onPaste($event)"
+          ></ion-textarea>
+
+          @if (showEmoji()) {
+            <button
+              class="icon-btn"
+              [class.active]="emojiOpen()"
+              [attr.aria-label]="t('emoji')"
+              (click)="toggleEmoji()"
+            >
+              <ion-icon name="happy-outline" aria-hidden="true" />
+            </button>
+          }
+
+          @if (canSend()) {
+            <button class="send-btn" [attr.aria-label]="t('send')" (click)="onSend()">
+              <ion-icon name="arrow-up-outline" aria-hidden="true" />
+            </button>
+          } @else if (showMic()) {
+            <button class="icon-btn mic" [attr.aria-label]="t('voice')" (click)="startRecording()">
+              <ion-icon name="mic-outline" aria-hidden="true" />
+            </button>
+          }
+        </div>
+      }
+    </div>
+  `, styles: [":host{display:block}.composer{display:flex;flex-direction:column;gap:6px;padding:8px 10px calc(8px + env(safe-area-inset-bottom,0px));background:var(--ion-background-color, #fff);border-top:1px solid var(--ion-border-color, rgba(0, 0, 0, .08))}.reply-bar{display:flex;align-items:center;gap:8px;padding:6px 10px;border-left:3px solid var(--ion-color-primary);border-radius:8px;background:var(--ion-color-step-100, rgba(127, 127, 127, .1))}.reply-content{display:flex;flex-direction:column;flex:1;min-width:0;font-size:.8125rem}.reply-name{font-weight:700;color:var(--ion-color-primary)}.reply-body{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--ion-color-medium, #92949c)}.emoji-row{display:flex;gap:4px;flex-wrap:wrap}.emoji{border:none;background:var(--ion-color-step-100, rgba(127, 127, 127, .1));border-radius:10px;padding:4px 8px;font-size:1.25rem;cursor:pointer}.pill{display:flex;align-items:flex-end;gap:4px;background:var(--ion-color-light, #f4f5f8);border:1px solid var(--ion-border-color, rgba(0, 0, 0, .08));border-radius:24px;padding:2px 6px}.field{flex:1;--background: transparent;--padding-start: 6px;--padding-end: 6px;--padding-top: 8px;--padding-bottom: 8px;margin:0;max-height:120px;font-size:.9375rem}.icon-btn{display:inline-flex;align-items:center;justify-content:center;width:38px;height:38px;flex-shrink:0;border:none;border-radius:50%;background:transparent;color:var(--ion-color-medium, #92949c);cursor:pointer;font-size:1.375rem}.icon-btn:hover,.icon-btn.active,.icon-btn.mic:hover{color:var(--ion-color-primary)}.send-btn{display:inline-flex;align-items:center;justify-content:center;width:38px;height:38px;flex-shrink:0;border:none;border-radius:50%;background:var(--ion-color-primary);color:var(--ion-color-primary-contrast, #fff);cursor:pointer;font-size:1.25rem;transition:transform .1s ease}.send-btn:active{transform:scale(.92)}.icon-btn.danger{color:var(--ion-color-danger, #eb445a)}.rec-bar{display:flex;align-items:center;gap:10px;background:var(--ion-color-light, #f4f5f8);border:1px solid var(--ion-border-color, rgba(0, 0, 0, .08));border-radius:24px;padding:2px 6px}.rec-dot{width:10px;height:10px;border-radius:50%;background:var(--ion-color-danger, #eb445a);animation:rec-pulse 1.2s ease-in-out infinite}.rec-time{font-variant-numeric:tabular-nums;font-size:.9375rem;color:var(--ion-text-color, #000)}.rec-spacer{flex:1}@keyframes rec-pulse{0%,to{opacity:1}50%{opacity:.3}}\n"] }]
+        }], ctorParameters: () => [] });
+
+/**
+ * val-conversation-list-item — fila de lista de conversaciones estilo
+ * Telegram/WhatsApp: avatar (imagen o iniciales), nombre + hora relativa,
+ * preview del último mensaje + badge de no-leídos. Signal inputs, dark-safe.
+ *
+ * @example
+ * <val-conversation-list-item
+ *   [name]="conv.name"
+ *   [lastMessage]="conv.lastMsgPreview"
+ *   [timestamp]="conv.lastMsgAt"
+ *   [unreadCount]="conv.unread"
+ *   (select)="open(conv.convId)" />
+ */
+class ConversationListItemComponent {
+    constructor() {
+        this.i18n = inject(I18nService);
+        this.name = input('');
+        this.avatarUrl = input(undefined);
+        this.lastMessage = input('');
+        this.timestamp = input(undefined);
+        this.unreadCount = input(0);
+        this.locale = input('es-CL');
+        this.select = output();
+        this.initials = computed(() => {
+            const name = this.name().trim();
+            if (!name)
+                return '?';
+            const parts = name.split(/\s+/);
+            return (parts[0][0] + (parts[1]?.[0] ?? '')).toUpperCase();
+        });
+        this.timeLabel = computed(() => formatRelativeTime(this.timestamp(), this.locale(), {
+            today: '',
+            yesterday: this.i18n.t('yesterday', '_global'),
+        }));
+        this.i18n.registerDefaults('ConversationListItem', {
+            es: { empty: 'Sin mensajes' },
+            en: { empty: 'No messages' },
+        });
+    }
+    emptyText() {
+        this.i18n.lang();
+        return this.i18n.t('empty', 'ConversationListItem');
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: ConversationListItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: ConversationListItemComponent, isStandalone: true, selector: "val-conversation-list-item", inputs: { name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: false, transformFunction: null }, avatarUrl: { classPropertyName: "avatarUrl", publicName: "avatarUrl", isSignal: true, isRequired: false, transformFunction: null }, lastMessage: { classPropertyName: "lastMessage", publicName: "lastMessage", isSignal: true, isRequired: false, transformFunction: null }, timestamp: { classPropertyName: "timestamp", publicName: "timestamp", isSignal: true, isRequired: false, transformFunction: null }, unreadCount: { classPropertyName: "unreadCount", publicName: "unreadCount", isSignal: true, isRequired: false, transformFunction: null }, locale: { classPropertyName: "locale", publicName: "locale", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { select: "select" }, ngImport: i0, template: `
+    <button class="item" (click)="select.emit()">
+      <div class="avatar">
+        @if (avatarUrl()) {
+          <img [src]="avatarUrl()" [alt]="name()" />
+        } @else {
+          <span>{{ initials() }}</span>
+        }
+      </div>
+      <div class="content">
+        <div class="top">
+          <span class="name">{{ name() }}</span>
+          @if (timeLabel()) {
+            <span class="time" [class.unread]="unreadCount() > 0">{{ timeLabel() }}</span>
+          }
+        </div>
+        <div class="bottom">
+          <span class="preview" [class.muted]="!lastMessage()">
+            {{ lastMessage() || emptyText() }}
+          </span>
+          @if (unreadCount() > 0) {
+            <span class="badge">{{ unreadCount() > 99 ? '99+' : unreadCount() }}</span>
+          }
+        </div>
+      </div>
+    </button>
+  `, isInline: true, styles: [":host{display:block}.item{display:flex;align-items:center;gap:12px;width:100%;padding:10px 12px;border:none;background:transparent;cursor:pointer;text-align:left;border-radius:12px;transition:background .12s ease}.item:hover{background:var(--ion-color-step-50, rgba(127, 127, 127, .06))}.avatar{width:48px;height:48px;flex-shrink:0;border-radius:50%;overflow:hidden;display:flex;align-items:center;justify-content:center;background:var(--ion-color-primary);color:#fff;font-weight:700;font-size:1rem}.avatar img{width:100%;height:100%;object-fit:cover}.content{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}.top,.bottom{display:flex;align-items:center;gap:8px}.name{flex:1;min-width:0;font-weight:600;font-size:.9375rem;color:var(--ion-text-color, #000);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.time{flex-shrink:0;font-size:.75rem;color:var(--ion-color-medium, #92949c)}.time.unread{color:var(--ion-color-primary);font-weight:600}.preview{flex:1;min-width:0;font-size:.875rem;color:var(--ion-color-medium, #92949c);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.preview.muted{font-style:italic;opacity:.7}.badge{flex-shrink:0;min-width:20px;height:20px;padding:0 6px;border-radius:10px;background:var(--ion-color-primary);color:var(--ion-color-primary-contrast, #fff);font-size:.6875rem;font-weight:700;display:inline-flex;align-items:center;justify-content:center}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: ConversationListItemComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'val-conversation-list-item', standalone: true, imports: [CommonModule], template: `
+    <button class="item" (click)="select.emit()">
+      <div class="avatar">
+        @if (avatarUrl()) {
+          <img [src]="avatarUrl()" [alt]="name()" />
+        } @else {
+          <span>{{ initials() }}</span>
+        }
+      </div>
+      <div class="content">
+        <div class="top">
+          <span class="name">{{ name() }}</span>
+          @if (timeLabel()) {
+            <span class="time" [class.unread]="unreadCount() > 0">{{ timeLabel() }}</span>
+          }
+        </div>
+        <div class="bottom">
+          <span class="preview" [class.muted]="!lastMessage()">
+            {{ lastMessage() || emptyText() }}
+          </span>
+          @if (unreadCount() > 0) {
+            <span class="badge">{{ unreadCount() > 99 ? '99+' : unreadCount() }}</span>
+          }
+        </div>
+      </div>
+    </button>
+  `, styles: [":host{display:block}.item{display:flex;align-items:center;gap:12px;width:100%;padding:10px 12px;border:none;background:transparent;cursor:pointer;text-align:left;border-radius:12px;transition:background .12s ease}.item:hover{background:var(--ion-color-step-50, rgba(127, 127, 127, .06))}.avatar{width:48px;height:48px;flex-shrink:0;border-radius:50%;overflow:hidden;display:flex;align-items:center;justify-content:center;background:var(--ion-color-primary);color:#fff;font-weight:700;font-size:1rem}.avatar img{width:100%;height:100%;object-fit:cover}.content{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}.top,.bottom{display:flex;align-items:center;gap:8px}.name{flex:1;min-width:0;font-weight:600;font-size:.9375rem;color:var(--ion-text-color, #000);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.time{flex-shrink:0;font-size:.75rem;color:var(--ion-color-medium, #92949c)}.time.unread{color:var(--ion-color-primary);font-weight:600}.preview{flex:1;min-width:0;font-size:.875rem;color:var(--ion-color-medium, #92949c);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.preview.muted{font-style:italic;opacity:.7}.badge{flex-shrink:0;min-width:20px;height:20px;padding:0 6px;border-radius:10px;background:var(--ion-color-primary);color:var(--ion-color-primary-contrast, #fff);font-size:.6875rem;font-weight:700;display:inline-flex;align-items:center;justify-content:center}\n"] }]
+        }], ctorParameters: () => [] });
+
 const TYPING_I18N = {
     es: {
         one: '{name} esta escribiendo',
@@ -72691,8 +73324,9 @@ const TYPING_I18N = {
 /**
  * val-typing-indicator
  *
- * Muestra quienes estan escribiendo en el chat con animacion de tres puntos.
- * Se oculta automaticamente si typingUsers esta vacio.
+ * Muestra quienes estan escribiendo con animacion de tres puntos. Se oculta
+ * si `typingUsers` esta vacio. Usa signal input para que `typingText` (computed)
+ * recompute al cambiar la lista.
  *
  * @example
  * <val-typing-indicator [typingUsers]="['Maria', 'Carlos']" />
@@ -72700,10 +73334,10 @@ const TYPING_I18N = {
 class TypingIndicatorComponent {
     constructor() {
         this.i18n = inject(I18nService);
-        this.typingUsers = [];
+        this.typingUsers = input([]);
         this.typingText = computed(() => {
             this.i18n.lang();
-            const users = this.typingUsers ?? [];
+            const users = this.typingUsers();
             if (users.length === 0)
                 return '';
             if (users.length === 1) {
@@ -72717,8 +73351,8 @@ class TypingIndicatorComponent {
         this.i18n.registerDefaults('TypingIndicator', TYPING_I18N);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: TypingIndicatorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: TypingIndicatorComponent, isStandalone: true, selector: "val-typing-indicator", inputs: { typingUsers: "typingUsers" }, ngImport: i0, template: `
-    @if (typingUsers && typingUsers.length > 0) {
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: TypingIndicatorComponent, isStandalone: true, selector: "val-typing-indicator", inputs: { typingUsers: { classPropertyName: "typingUsers", publicName: "typingUsers", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: `
+    @if (typingUsers().length > 0) {
       <div class="typing-indicator">
         <div class="dots">
           <span></span>
@@ -72733,7 +73367,7 @@ class TypingIndicatorComponent {
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: TypingIndicatorComponent, decorators: [{
             type: Component,
             args: [{ selector: 'val-typing-indicator', standalone: true, imports: [CommonModule], template: `
-    @if (typingUsers && typingUsers.length > 0) {
+    @if (typingUsers().length > 0) {
       <div class="typing-indicator">
         <div class="dots">
           <span></span>
@@ -72744,250 +73378,280 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
       </div>
     }
   `, styles: [".typing-indicator{display:flex;align-items:center;gap:8px;padding:4px 12px;min-height:28px}.typing-text{font-size:.8125rem;color:var(--ion-color-medium, #92949c);font-style:italic}.dots{display:flex;align-items:center;gap:3px}.dots span{display:inline-block;width:5px;height:5px;border-radius:50%;background:var(--ion-color-medium, #92949c);animation:typing-dot 1.2s infinite ease-in-out}.dots span:nth-child(1){animation-delay:0s}.dots span:nth-child(2){animation-delay:.2s}.dots span:nth-child(3){animation-delay:.4s}@keyframes typing-dot{0%,60%,to{transform:translateY(0);opacity:.4}30%{transform:translateY(-4px);opacity:1}}\n"] }]
-        }], ctorParameters: () => [], propDecorators: { typingUsers: [{
-                type: Input
-            }] } });
+        }], ctorParameters: () => [] });
 
-addIcons({ chatbubblesOutline });
+addIcons({ arrowDownOutline, chatbubblesOutline });
 const CHAT_WINDOW_I18N = {
     es: {
         conversationClosed: 'Esta conversacion esta cerrada',
         loading: 'Cargando mensajes...',
-        noMessages: 'No hay mensajes aun',
+        noMessages: 'Aun no hay mensajes. Escribe el primero.',
+        newMessages: 'Mensajes nuevos',
     },
     en: {
         conversationClosed: 'This conversation is closed',
         loading: 'Loading messages...',
-        noMessages: 'No messages yet',
+        noMessages: 'No messages yet. Send the first one.',
+        newMessages: 'New messages',
     },
 };
 /**
- * val-chat-window
+ * val-chat-window — ventana de chat completa (signal inputs).
  *
- * Ventana de chat completa. Muestra la lista de mensajes agrupados por fecha,
- * el indicador de escritura, el input de mensaje (solo si isOpen) y un banner
- * cuando la conversacion esta cerrada. Auto-scroll al ultimo mensaje cuando
- * llegan mensajes nuevos.
+ * Agrupa mensajes consecutivos del mismo emisor y por día (separadores sticky),
+ * muestra avatar/nombre solo en los bordes del grupo, scroll-to-bottom inteligente
+ * (auto-scroll si estás abajo, pill "mensajes nuevos" si estás leyendo arriba),
+ * composer moderno con contexto de respuesta, y typing indicator.
  *
- * @example
- * <val-chat-window
- *   [convId]="conv.id"
- *   [messages]="messages()"
- *   [currentUserId]="userId"
- *   [isOpen]="conv.status === 'open'"
- *   [typingUsers]="typingUsers()"
- *   (sendMessage)="onSend($event)"
- *   (reactionClick)="onReaction($event)"
- * />
+ * API pública estable (consumida por thread-panel y showcase): inputs convId,
+ * messages, currentUserId, isOpen, typingUsers, isLoading; outputs sendMessage,
+ * loadMore, reactionClick, deleteMessage, replyTo (+ editMessage/attach/voice nuevos).
  */
 class ChatWindowComponent {
     constructor() {
         this.i18n = inject(I18nService);
-        this.convId = '';
-        this.messages = [];
-        this.participants = [];
-        this.currentUserId = '';
-        this.isOpen = true;
-        this.typingUsers = [];
-        this.isLoading = false;
-        this.sendMessage = new EventEmitter();
-        this.loadMore = new EventEmitter();
-        this.reactionClick = new EventEmitter();
-        this.deleteMessage = new EventEmitter();
-        this.replyTo = new EventEmitter();
-        this.prevMessageCount = 0;
-        this.shouldScrollToBottom = false;
-        // Espejo signal de @Input() messages. `messageGroups` es un computed() y solo
-        // reacciona a señales — leer `this.messages` (input clasico) directo NO lo
-        // recomputa cuando el input cambia, dejando la lista de mensajes congelada.
-        this.messagesSig = signal([]);
-        this.messageGroups = computed(() => {
-            const msgs = this.messagesSig();
+        this.convId = input('');
+        this.messages = input([]);
+        this.currentUserId = input('');
+        this.isOpen = input(true);
+        this.typingUsers = input([]);
+        this.isLoading = input(false);
+        this.sendMessage = output();
+        this.loadMore = output();
+        this.reactionClick = output();
+        this.deleteMessage = output();
+        this.replyTo = output();
+        this.editMessage = output();
+        this.typing = output();
+        this.attach = output();
+        this.voice = output();
+        this.msgsEl = viewChild('msgs');
+        this.replyingTo = signal(null);
+        this.atBottom = signal(true);
+        this.hasNew = signal(false);
+        this.locale = computed(() => (this.i18n.lang() === 'en' ? 'en-US' : 'es-CL'));
+        this.rows = computed(() => {
+            const msgs = this.messages();
             if (msgs.length === 0)
                 return [];
-            const groups = [];
-            let currentLabel = '';
-            let currentGroup = [];
-            for (const msg of msgs) {
-                const label = this.formatDateLabel(msg.createdAt);
-                if (label !== currentLabel) {
-                    if (currentGroup.length > 0) {
-                        groups.push({ dateLabel: currentLabel, messages: currentGroup });
-                    }
-                    currentLabel = label;
-                    currentGroup = [msg];
-                }
-                else {
-                    currentGroup.push(msg);
+            const labels = {
+                today: this.i18n.t('today', '_global'),
+                yesterday: this.i18n.t('yesterday', '_global'),
+            };
+            const out = [];
+            let prevDay = '';
+            for (let i = 0; i < msgs.length; i++) {
+                const m = msgs[i];
+                const d = m.createdAt instanceof Date ? m.createdAt : new Date(m.createdAt);
+                const day = `${d.getFullYear()}-${d.getMonth()}-${d.getDate()}`;
+                const newDay = day !== prevDay;
+                if (newDay) {
+                    out.push({ kind: 'date', id: 'date-' + day, label: formatDateSeparator(d, this.locale(), labels) });
+                    prevDay = day;
                 }
+                const prev = msgs[i - 1];
+                const next = msgs[i + 1];
+                const firstInGroup = newDay || !prev || prev.senderId !== m.senderId;
+                const nextDay = next
+                    ? `${new Date(next.createdAt).getFullYear()}-${new Date(next.createdAt).getMonth()}-${new Date(next.createdAt).getDate()}`
+                    : '';
+                const lastInGroup = !next || next.senderId !== m.senderId || nextDay !== day;
+                out.push({
+                    kind: 'msg',
+                    id: m.msgId,
+                    msg: m,
+                    showName: firstInGroup && !m.isMine,
+                    showAvatar: lastInGroup && !m.isMine,
+                    tail: lastInGroup,
+                });
             }
-            if (currentGroup.length > 0) {
-                groups.push({ dateLabel: currentLabel, messages: currentGroup });
-            }
-            return groups;
-        });
-        this.closedText = computed(() => {
-            this.i18n.lang();
-            return this.i18n.t('conversationClosed', 'ChatWindow');
-        });
-        this.loadingText = computed(() => {
-            this.i18n.lang();
-            return this.i18n.t('loading', 'ChatWindow');
+            return out;
         });
         this.i18n.registerDefaults('ChatWindow', CHAT_WINDOW_I18N);
-    }
-    ngOnChanges(changes) {
-        if (changes['messages']) {
-            const current = changes['messages'].currentValue ?? [];
-            this.messagesSig.set(current);
-            if (current.length !== this.prevMessageCount) {
-                this.prevMessageCount = current.length;
-                this.shouldScrollToBottom = true;
+        // Auto-scroll al fondo cuando llegan mensajes y el usuario ya estaba abajo
+        // (o el último mensaje es propio). Si está leyendo arriba, marca "nuevos".
+        let prevCount = 0;
+        effect(() => {
+            const rows = this.rows();
+            const count = rows.length;
+            if (count === prevCount)
+                return;
+            const grew = count > prevCount;
+            prevCount = count;
+            const last = this.messages()[this.messages().length - 1];
+            const mine = last?.isMine ?? false;
+            if (this.atBottom() || mine) {
+                setTimeout(() => this.scrollToBottom(false), 0);
             }
-        }
-    }
-    ngAfterViewChecked() {
-        if (this.shouldScrollToBottom) {
-            this.scrollToBottom();
-            this.shouldScrollToBottom = false;
-        }
+            else if (grew) {
+                this.hasNew.set(true);
+            }
+        });
     }
-    onReactionClick(event) {
-        this.reactionClick.emit({ msgId: event.msgId, token: event.token });
+    onScroll() {
+        const el = this.msgsEl()?.nativeElement;
+        if (!el)
+            return;
+        const nearBottom = el.scrollHeight - el.scrollTop - el.clientHeight < 80;
+        this.atBottom.set(nearBottom);
+        if (nearBottom)
+            this.hasNew.set(false);
+        if (el.scrollTop < 40)
+            this.loadMore.emit();
     }
-    onEditClick(_msgId) {
-        // Implementacion futura: emitir evento de edicion
+    scrollToBottom(smooth) {
+        const el = this.msgsEl()?.nativeElement;
+        if (!el)
+            return;
+        el.scrollTo({ top: el.scrollHeight, behavior: smooth ? 'smooth' : 'auto' });
+        this.atBottom.set(true);
+        this.hasNew.set(false);
     }
-    onTyping() {
-        // El padre puede suscribirse al output typing si necesita propagar a Firestore
+    onSend(body) {
+        this.sendMessage.emit(body);
+        this.replyingTo.set(null);
     }
-    scrollToBottom() {
-        const el = this.messagesListRef?.nativeElement;
-        if (el) {
-            el.scrollTop = el.scrollHeight;
+    onAction(event) {
+        switch (event.type) {
+            case 'reply': {
+                const m = this.messages().find(x => x.msgId === event.msgId);
+                if (m) {
+                    this.replyingTo.set({ msgId: m.msgId, senderName: m.senderName, body: m.body });
+                }
+                this.replyTo.emit(event.msgId);
+                break;
+            }
+            case 'edit':
+                this.editMessage.emit(event.msgId);
+                break;
+            case 'delete':
+                this.deleteMessage.emit(event.msgId);
+                break;
+            case 'react':
+                this.reactionClick.emit({ msgId: event.msgId, token: event.token ?? '👍' });
+                break;
         }
     }
-    formatDateLabel(date) {
-        if (!date)
-            return '';
-        const d = date instanceof Date ? date : new Date(date);
-        const now = new Date();
-        const today = new Date(now.getFullYear(), now.getMonth(), now.getDate());
-        const msgDay = new Date(d.getFullYear(), d.getMonth(), d.getDate());
-        const diffMs = today.getTime() - msgDay.getTime();
-        const diffDays = Math.round(diffMs / 86400000);
-        if (diffDays === 0)
-            return this.i18n.t('today', '_global') || 'Hoy';
-        if (diffDays === 1)
-            return this.i18n.t('yesterday', '_global') || 'Ayer';
-        return d.toLocaleDateString([], { day: '2-digit', month: 'short', year: 'numeric' });
+    t(key) {
+        return this.i18n.t(key, 'ChatWindow');
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: ChatWindowComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: ChatWindowComponent, isStandalone: true, selector: "val-chat-window", inputs: { convId: "convId", messages: "messages", participants: "participants", currentUserId: "currentUserId", isOpen: "isOpen", typingUsers: "typingUsers", isLoading: "isLoading" }, outputs: { sendMessage: "sendMessage", loadMore: "loadMore", reactionClick: "reactionClick", deleteMessage: "deleteMessage", replyTo: "replyTo" }, viewQueries: [{ propertyName: "messagesListRef", first: true, predicate: ["messagesList"], descendants: true }], usesOnChanges: true, ngImport: i0, template: `
-    <div class="chat-window">
-      <div class="messages-list" #messagesList>
-        @if (isLoading) {
-          <div class="loading-state">
-            <ion-spinner name="dots"></ion-spinner>
-            <span>{{ loadingText() }}</span>
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: ChatWindowComponent, isStandalone: true, selector: "val-chat-window", inputs: { convId: { classPropertyName: "convId", publicName: "convId", isSignal: true, isRequired: false, transformFunction: null }, messages: { classPropertyName: "messages", publicName: "messages", isSignal: true, isRequired: false, transformFunction: null }, currentUserId: { classPropertyName: "currentUserId", publicName: "currentUserId", isSignal: true, isRequired: false, transformFunction: null }, isOpen: { classPropertyName: "isOpen", publicName: "isOpen", isSignal: true, isRequired: false, transformFunction: null }, typingUsers: { classPropertyName: "typingUsers", publicName: "typingUsers", isSignal: true, isRequired: false, transformFunction: null }, isLoading: { classPropertyName: "isLoading", publicName: "isLoading", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { sendMessage: "sendMessage", loadMore: "loadMore", reactionClick: "reactionClick", deleteMessage: "deleteMessage", replyTo: "replyTo", editMessage: "editMessage", typing: "typing", attach: "attach", voice: "voice" }, viewQueries: [{ propertyName: "msgsEl", first: true, predicate: ["msgs"], descendants: true, isSignal: true }], ngImport: i0, template: `
+    <div class="chat">
+      <div #msgs class="messages" (scroll)="onScroll()">
+        @if (isLoading()) {
+          <div class="state">
+            <span>{{ t('loading') }}</span>
+          </div>
+        } @else if (rows().length === 0) {
+          <div class="state empty">
+            <ion-icon name="chatbubbles-outline" aria-hidden="true" />
+            <span>{{ t('noMessages') }}</span>
           </div>
         } @else {
-          @for (group of messageGroups(); track group.dateLabel) {
-            <div class="date-separator">
-              <div class="date-line"></div>
-              <span class="date-label">{{ group.dateLabel }}</span>
-              <div class="date-line"></div>
-            </div>
-            @for (msg of group.messages; track msg.msgId) {
+          @for (row of rows(); track row.id) {
+            @if (row.kind === 'date') {
+              <div class="date-sep">
+                <span>{{ row.label }}</span>
+              </div>
+            } @else {
               <val-message-bubble
-                [props]="msg"
-                (reactionClick)="onReactionClick($event)"
-                (replyClick)="replyTo.emit($event.msgId)"
-                (deleteClick)="deleteMessage.emit($event.msgId)"
-                (editClick)="onEditClick($event.msgId)"
+                [msg]="row.msg"
+                [showName]="row.showName"
+                [showAvatar]="row.showAvatar"
+                [tail]="row.tail"
+                [locale]="locale()"
+                (action)="onAction($event)"
               />
             }
           }
         }
+        <val-typing-indicator [typingUsers]="typingUsers()" />
       </div>
 
-      <val-typing-indicator [typingUsers]="typingUsers" />
+      @if (!atBottom()) {
+        <button class="scroll-down" (click)="scrollToBottom(true)" aria-label="scroll">
+          <ion-icon name="arrow-down-outline" aria-hidden="true" />
+          @if (hasNew()) {
+            <span class="dot"></span>
+          }
+        </button>
+      }
 
-      @if (!isOpen) {
-        <div class="closed-banner">{{ closedText() }}</div>
+      @if (isOpen()) {
+        <val-chat-composer
+          [replyingTo]="replyingTo()"
+          (send)="onSend($event)"
+          (typing)="typing.emit()"
+          (attach)="attach.emit($event)"
+          (voice)="voice.emit()"
+          (cancelReply)="replyingTo.set(null)"
+        />
       } @else {
-        <val-chat-input [props]="{ disabled: isLoading }" (send)="sendMessage.emit($event)" (typing)="onTyping()" />
+        <div class="closed-banner">{{ t('conversationClosed') }}</div>
       }
     </div>
-  `, isInline: true, styles: [".chat-window{display:flex;flex-direction:column;height:100%;background:var(--ion-background-color, #f4f5f8);overflow:hidden}.messages-list{flex:1;overflow-y:auto;padding:12px 8px;scroll-behavior:smooth}.messages-list::-webkit-scrollbar{width:4px}.messages-list::-webkit-scrollbar-thumb{background:var(--ion-color-light-shade, #d7d8da);border-radius:2px}.date-separator{display:flex;align-items:center;gap:8px;margin:12px 0}.date-separator .date-line{flex:1;height:1px;background:var(--ion-border-color, rgba(0, 0, 0, .1))}.date-separator .date-label{font-size:.75rem;color:var(--ion-color-medium, #92949c);white-space:nowrap;padding:0 4px}.loading-state{display:flex;align-items:center;justify-content:center;padding:24px;color:var(--ion-color-medium, #92949c);font-size:.875rem;gap:8px}.closed-banner{padding:10px 16px;background:var(--ion-color-warning-tint, #fff9e6);border-top:1px solid var(--ion-color-warning, #ffc409);text-align:center;font-size:.875rem;color:var(--ion-color-warning-shade, #b29500)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: IonSpinner, selector: "ion-spinner", inputs: ["color", "duration", "name", "paused"] }, { kind: "component", type: MessageBubbleComponent, selector: "val-message-bubble", inputs: ["props"], outputs: ["reactionClick", "replyClick", "deleteClick", "editClick"] }, { kind: "component", type: ChatInputComponent, selector: "val-chat-input", inputs: ["props"], outputs: ["send", "typing"] }, { kind: "component", type: TypingIndicatorComponent, selector: "val-typing-indicator", inputs: ["typingUsers"] }] }); }
+  `, isInline: true, styles: [":host{display:block;height:100%}.chat{position:relative;display:flex;flex-direction:column;height:100%;min-height:0}.messages{flex:1;min-height:0;overflow-y:auto;padding:12px;display:flex;flex-direction:column;gap:0}.state{margin:auto;display:flex;flex-direction:column;align-items:center;gap:8px;color:var(--ion-color-medium, #92949c);font-size:.9375rem;text-align:center;padding:24px}.state.empty ion-icon{font-size:2.5rem;opacity:.5}.date-sep{position:sticky;top:4px;z-index:1;display:flex;justify-content:center;margin:8px 0}.date-sep span{font-size:.75rem;color:var(--ion-color-medium, #92949c);background:var(--ion-color-step-100, rgba(127, 127, 127, .14));padding:3px 12px;border-radius:999px;backdrop-filter:blur(4px)}.scroll-down{position:absolute;right:14px;bottom:84px;width:40px;height:40px;border-radius:50%;border:1px solid var(--ion-border-color, rgba(0, 0, 0, .1));background:var(--ion-card-background, var(--ion-background-color, #fff));color:var(--ion-color-medium, #92949c);box-shadow:0 2px 10px #00000026;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;font-size:1.25rem;z-index:3}.scroll-down .dot{position:absolute;top:0;right:0;width:12px;height:12px;border-radius:50%;background:var(--ion-color-primary);border:2px solid var(--ion-card-background, #fff)}.closed-banner{text-align:center;padding:14px;color:var(--ion-color-medium, #92949c);font-size:.875rem;border-top:1px solid var(--ion-border-color, rgba(0, 0, 0, .08))}\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"] }, { kind: "component", type: MessageBubbleComponent, selector: "val-message-bubble", inputs: ["msg", "showAvatar", "showName", "tail", "locale"], outputs: ["action"] }, { kind: "component", type: ChatComposerComponent, selector: "val-chat-composer", inputs: ["placeholder", "disabled", "maxLength", "replyingTo", "showAttach", "showEmoji", "showMic"], outputs: ["send", "typing", "attach", "voice", "cancelReply"] }, { kind: "component", type: TypingIndicatorComponent, selector: "val-typing-indicator", inputs: ["typingUsers"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: ChatWindowComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'val-chat-window', standalone: true, imports: [CommonModule, IonIcon, IonSpinner, MessageBubbleComponent, ChatInputComponent, TypingIndicatorComponent], template: `
-    <div class="chat-window">
-      <div class="messages-list" #messagesList>
-        @if (isLoading) {
-          <div class="loading-state">
-            <ion-spinner name="dots"></ion-spinner>
-            <span>{{ loadingText() }}</span>
+            args: [{ selector: 'val-chat-window', standalone: true, imports: [CommonModule, IonIcon, MessageBubbleComponent, ChatComposerComponent, TypingIndicatorComponent], template: `
+    <div class="chat">
+      <div #msgs class="messages" (scroll)="onScroll()">
+        @if (isLoading()) {
+          <div class="state">
+            <span>{{ t('loading') }}</span>
+          </div>
+        } @else if (rows().length === 0) {
+          <div class="state empty">
+            <ion-icon name="chatbubbles-outline" aria-hidden="true" />
+            <span>{{ t('noMessages') }}</span>
           </div>
         } @else {
-          @for (group of messageGroups(); track group.dateLabel) {
-            <div class="date-separator">
-              <div class="date-line"></div>
-              <span class="date-label">{{ group.dateLabel }}</span>
-              <div class="date-line"></div>
-            </div>
-            @for (msg of group.messages; track msg.msgId) {
+          @for (row of rows(); track row.id) {
+            @if (row.kind === 'date') {
+              <div class="date-sep">
+                <span>{{ row.label }}</span>
+              </div>
+            } @else {
               <val-message-bubble
-                [props]="msg"
-                (reactionClick)="onReactionClick($event)"
-                (replyClick)="replyTo.emit($event.msgId)"
-                (deleteClick)="deleteMessage.emit($event.msgId)"
-                (editClick)="onEditClick($event.msgId)"
+                [msg]="row.msg"
+                [showName]="row.showName"
+                [showAvatar]="row.showAvatar"
+                [tail]="row.tail"
+                [locale]="locale()"
+                (action)="onAction($event)"
               />
             }
           }
         }
+        <val-typing-indicator [typingUsers]="typingUsers()" />
       </div>
 
-      <val-typing-indicator [typingUsers]="typingUsers" />
+      @if (!atBottom()) {
+        <button class="scroll-down" (click)="scrollToBottom(true)" aria-label="scroll">
+          <ion-icon name="arrow-down-outline" aria-hidden="true" />
+          @if (hasNew()) {
+            <span class="dot"></span>
+          }
+        </button>
+      }
 
-      @if (!isOpen) {
-        <div class="closed-banner">{{ closedText() }}</div>
+      @if (isOpen()) {
+        <val-chat-composer
+          [replyingTo]="replyingTo()"
+          (send)="onSend($event)"
+          (typing)="typing.emit()"
+          (attach)="attach.emit($event)"
+          (voice)="voice.emit()"
+          (cancelReply)="replyingTo.set(null)"
+        />
       } @else {
-        <val-chat-input [props]="{ disabled: isLoading }" (send)="sendMessage.emit($event)" (typing)="onTyping()" />
+        <div class="closed-banner">{{ t('conversationClosed') }}</div>
       }
     </div>
-  `, styles: [".chat-window{display:flex;flex-direction:column;height:100%;background:var(--ion-background-color, #f4f5f8);overflow:hidden}.messages-list{flex:1;overflow-y:auto;padding:12px 8px;scroll-behavior:smooth}.messages-list::-webkit-scrollbar{width:4px}.messages-list::-webkit-scrollbar-thumb{background:var(--ion-color-light-shade, #d7d8da);border-radius:2px}.date-separator{display:flex;align-items:center;gap:8px;margin:12px 0}.date-separator .date-line{flex:1;height:1px;background:var(--ion-border-color, rgba(0, 0, 0, .1))}.date-separator .date-label{font-size:.75rem;color:var(--ion-color-medium, #92949c);white-space:nowrap;padding:0 4px}.loading-state{display:flex;align-items:center;justify-content:center;padding:24px;color:var(--ion-color-medium, #92949c);font-size:.875rem;gap:8px}.closed-banner{padding:10px 16px;background:var(--ion-color-warning-tint, #fff9e6);border-top:1px solid var(--ion-color-warning, #ffc409);text-align:center;font-size:.875rem;color:var(--ion-color-warning-shade, #b29500)}\n"] }]
-        }], ctorParameters: () => [], propDecorators: { convId: [{
-                type: Input
-            }], messages: [{
-                type: Input
-            }], participants: [{
-                type: Input
-            }], currentUserId: [{
-                type: Input
-            }], isOpen: [{
-                type: Input
-            }], typingUsers: [{
-                type: Input
-            }], isLoading: [{
-                type: Input
-            }], sendMessage: [{
-                type: Output
-            }], loadMore: [{
-                type: Output
-            }], reactionClick: [{
-                type: Output
-            }], deleteMessage: [{
-                type: Output
-            }], replyTo: [{
-                type: Output
-            }], messagesListRef: [{
-                type: ViewChild,
-                args: ['messagesList']
-            }] } });
+  `, styles: [":host{display:block;height:100%}.chat{position:relative;display:flex;flex-direction:column;height:100%;min-height:0}.messages{flex:1;min-height:0;overflow-y:auto;padding:12px;display:flex;flex-direction:column;gap:0}.state{margin:auto;display:flex;flex-direction:column;align-items:center;gap:8px;color:var(--ion-color-medium, #92949c);font-size:.9375rem;text-align:center;padding:24px}.state.empty ion-icon{font-size:2.5rem;opacity:.5}.date-sep{position:sticky;top:4px;z-index:1;display:flex;justify-content:center;margin:8px 0}.date-sep span{font-size:.75rem;color:var(--ion-color-medium, #92949c);background:var(--ion-color-step-100, rgba(127, 127, 127, .14));padding:3px 12px;border-radius:999px;backdrop-filter:blur(4px)}.scroll-down{position:absolute;right:14px;bottom:84px;width:40px;height:40px;border-radius:50%;border:1px solid var(--ion-border-color, rgba(0, 0, 0, .1));background:var(--ion-card-background, var(--ion-background-color, #fff));color:var(--ion-color-medium, #92949c);box-shadow:0 2px 10px #00000026;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;font-size:1.25rem;z-index:3}.scroll-down .dot{position:absolute;top:0;right:0;width:12px;height:12px;border-radius:50%;background:var(--ion-color-primary);border:2px solid var(--ion-card-background, #fff)}.closed-banner{text-align:center;padding:14px;color:var(--ion-color-medium, #92949c);font-size:.875rem;border-top:1px solid var(--ion-border-color, rgba(0, 0, 0, .08))}\n"] }]
+        }], ctorParameters: () => [] });
 
 const THREAD_PANEL_I18N = {
     es: {
@@ -73145,7 +73809,7 @@ class ThreadPanelComponent {
         </div>
       }
     </div>
-  `, isInline: true, styles: [".thread-panel{display:flex;flex-direction:column;height:100%;background:var(--ion-background-color, #f4f5f8)}.thread-header{padding:12px 16px;border-bottom:1px solid var(--ion-border-color, rgba(0, 0, 0, .1));background:var(--ion-card-background, var(--ion-background-color, #fff))}.thread-header .thread-title{font-size:1rem;font-weight:600;color:var(--ion-text-color, #000);margin:0}.thread-loading{display:flex;align-items:center;justify-content:center;flex:1;gap:10px;color:var(--ion-color-medium, #92949c);font-size:.875rem}.thread-chat{flex:1;overflow:hidden;display:flex;flex-direction:column}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: IonSpinner, selector: "ion-spinner", inputs: ["color", "duration", "name", "paused"] }, { kind: "component", type: ChatWindowComponent, selector: "val-chat-window", inputs: ["convId", "messages", "participants", "currentUserId", "isOpen", "typingUsers", "isLoading"], outputs: ["sendMessage", "loadMore", "reactionClick", "deleteMessage", "replyTo"] }] }); }
+  `, isInline: true, styles: [".thread-panel{display:flex;flex-direction:column;height:100%;background:var(--ion-background-color, #f4f5f8)}.thread-header{padding:12px 16px;border-bottom:1px solid var(--ion-border-color, rgba(0, 0, 0, .1));background:var(--ion-card-background, var(--ion-background-color, #fff))}.thread-header .thread-title{font-size:1rem;font-weight:600;color:var(--ion-text-color, #000);margin:0}.thread-loading{display:flex;align-items:center;justify-content:center;flex:1;gap:10px;color:var(--ion-color-medium, #92949c);font-size:.875rem}.thread-chat{flex:1;overflow:hidden;display:flex;flex-direction:column}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: IonSpinner, selector: "ion-spinner", inputs: ["color", "duration", "name", "paused"] }, { kind: "component", type: ChatWindowComponent, selector: "val-chat-window", inputs: ["convId", "messages", "currentUserId", "isOpen", "typingUsers", "isLoading"], outputs: ["sendMessage", "loadMore", "reactionClick", "deleteMessage", "replyTo", "editMessage", "typing", "attach", "voice"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: ThreadPanelComponent, decorators: [{
             type: Component,
@@ -73199,5 +73863,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
  * Generated bundle index. Do not edit.
  */
 
-export { ACTION_CARD_DEFAULTS, AD_SIZE_MAP, API_TABLE_COLUMN_LABELS, APP_VERSION_PLATFORM_PLUGIN, APP_VERSION_REMOTE_PLUGIN, ARTICLE_CARD_DEFAULTS, ARTICLE_SPACING, ARTICLE_STRIP_DEFAULTS, AUTH_CTA_DEFAULTS, AVATAR_UPLOAD_DEFAULTS, AboutViewComponent, AccordionComponent, AccountViewComponent, ActionCardComponent, ActionHeaderComponent, ActionType, AdSlotComponent, AdsLoaderService, AdsService, AlertBoxComponent, AnalyticsErrorHandler, AnalyticsRouterTracker, AnalyticsService, AnimatedTerminalComponent, ApiKeyCreateModalComponent, ApiKeyService, ApiKeysModalComponent, ApiKeysViewComponent, AppConfigService, AppVersionService, ArticleBuilder, ArticleCardComponent, ArticleComponent, ArticleStripComponent, AttachmentUploaderComponent, AuthBackgroundComponent, AuthCtaComponent, AuthService, AuthStateService, AuthStorageService, AuthSyncService, AvatarComponent, AvatarUploadComponent, BOTTOM_NAV_DEFAULTS, BannerComponent, BlogPostBuilder, BottomNavComponent, BoxComponent, BreadcrumbComponent, ButtonComponent, ButtonGroupComponent, CALLOUT_LABELS, CHEV_KEYS, CIRCLE_KEYS, COMMON_COUNTRY_CODES, COMMON_CURRENCIES, CORNER_KEYS, CTA_CARD_DEFAULTS, CURRENCY_INFO, CardComponent, CardSection, CardType, CardsCarouselComponent, ChangeEmailModalComponent, ChangePasswordModalComponent, ChatInputComponent, ChatWindowComponent, CheckInputComponent, CheckboxRadioInputComponent, ChipGroupComponent, CodeDisplayComponent, CommandDisplayComponent, CommentComponent, CommentInputComponent, CommentSectionComponent, CompanyFooterComponent, ComponentStates, ConfirmationDialogService, ContainerComponent, ContentLoaderComponent, ContentReactionComponent, ContentService, ContentTransformer, ConversationService, CookieBannerComponent, CookieSettingsComponent, CountdownComponent, CreateOrgModalComponent, CtaCardComponent, CurrencyInputComponent, DEFAULT_ADS_CONFIG, DEFAULT_APP_CONFIG_SERVICE_CONFIG, DEFAULT_APP_VERSION_SERVICE_CONFIG, DEFAULT_AUTH_CONFIG, DEFAULT_BACK_HEADER, DEFAULT_BUTTON_PRESETS, DEFAULT_CANCEL_BUTTON, DEFAULT_CHECK_INTERVAL_MS, DEFAULT_CONFIRM_BUTTON, DEFAULT_COUNTDOWN_LABELS, DEFAULT_COUNTDOWN_LABELS_EN, DEFAULT_DEBUG_CONSOLE_CONFIG, DEFAULT_DONATION_CONFIG, DEFAULT_EMPTY_STATE, DEFAULT_EMULATOR_CONFIG, DEFAULT_FEEDBACK_CONFIG, DEFAULT_FEEDBACK_TYPE_OPTIONS, DEFAULT_HOME_HEADER, DEFAULT_INFINITE_LIST_METADATA, DEFAULT_LOGIN_LOGO, DEFAULT_MODAL_CANCEL_BUTTON, DEFAULT_MODAL_CONFIRM_BUTTON, DEFAULT_PAGE_SIZE_OPTIONS, DEFAULT_PLATFORMS, DEFAULT_POST_UPDATE_GRACE_MS, DEFAULT_PRESETS, DEFAULT_REFRESHER_METADATA, DEFAULT_SKELETON_CONFIG, DEFAULT_SPLASH_SCREEN_CONFIG, DataTableComponent, DateInputComponent, DatePickerComponent, DateRangeInputComponent, DebugConsoleComponent, DeleteAccountModalComponent, DetailSkeletonComponent, DeviceService, DisplayComponent, DividerComponent, DocsApiTableComponent, DocsBreadcrumbComponent, DocsBuilder, DocsCalloutComponent, DocsCodeExampleComponent, DocsLayoutComponent, DocsNavLinksComponent, DocsNavigationService, DocsPageComponent, DocsSearchComponent, DocsSectionComponent, DocsShellComponent, DocsSidebarComponent, DocsTocComponent, DonationService, DownloadService, EditOrgModalComponent, EmptyStateComponent, EntityCardComponent, EntityFeedService, ExpandableTextComponent, FEATURES_LIST_DEFAULTS, FUN_MODAL_DEFAULTS, FabComponent, FaqComponent, FeaturesListComponent, FeedbackFormComponent, FeedbackService, FieldListComponent, FileInputComponent, FirebaseService, FirestoreCollectionFactory, FirestoreService, FontSizeOption, FontSizeSelectorComponent, FontSizeService, FooterComponent, FooterLinksComponent, FormComponent, FormFieldComponent, FormSkeletonComponent, FunHeaderComponent, FunModalComponent, GlassComponent, GlowCardComponent, GlowComponent, GridSkeletonComponent, HANDOFF_ROUTE_PARAM, HANDOFF_TOKEN_PARAM, HandoffService, HapticsService, HasPermissionDirective, HeaderComponent, HintComponent, HorizontalScrollComponent, HrefComponent, HtmlViewerModalComponent, I18nService, IMAGE_DEFAULTS, INITIAL_AUTH_STATE, INITIAL_MFA_STATE, INVITATION_CARD_DEFAULTS, IONIC_COLORS$5 as IONIC_COLORS, Icon, IconComponent, IconService, ImageComponent, ImageCropComponent, ImageService, InAppBrowserService, InfiniteListComponent, InfoComponent, InputI18nHelper, InputType, InvitationCardComponent, InviteMemberModalComponent, ItemListComponent, LANG_STORAGE_KEY$1 as LANG_STORAGE_KEY, LEGAL_CONTENT_CONFIG, LOGGED_IN_HINT_COOKIE, LOGIN_DEFAULTS, LandingSplitComponent, LandingStepsComponent, LanguageSelectorComponent, LanguageSelectorV2Component, LayeredCardComponent, LegalContentService, LegalLinkService, LinkComponent, LinkProcessorService, LinkedProvidersComponent, LinksAccordionComponent, LinksCakeComponent, ListSkeletonComponent, LoadMoreComponent, LoadingDirective, LocalStorageService, LocaleService, LoginAttemptModalComponent, LoginComponent, MEDIA_OBJECT_DEFAULTS, MEMBER_CARD_DEFAULTS, METRIC_CARD_DEFAULTS, MODAL_SIZES, MOTIF_KEYS, MOTION, MaintenancePageComponent, MarkdownArticleParserService, MediaObjectComponent, MemberCardComponent, MemberDetailModalComponent, MemberImportModalComponent, MenuComponent, MessageBubbleComponent, MessagingService, MetaService, MetricCardComponent, MfaModalComponent, ModalService, ModalShellComponent, MultiSelectSearchComponent, NUM_KEYS, NavigationService, NetworkBannerComponent, NetworkStatusService, NewsBuilder, NoContentComponent, NotesBoxComponent, NotificationActionService, NotificationPreferencesViewComponent, NotificationsService, NotificationsViewComponent, NumberFromToComponent, NumberStepperComponent, OAUTH_PROVIDERS_INFO, OAuthCallbackComponent, OAuthService, OptionCardsComponent, OrgInfoSheetComponent, OrgService, OrgSwitchService, OrganizationViewComponent, PATTERN_MOTIFS, PATTERN_PALETTES, PATTERN_STYLE_CONFIGS, PLATFORM_CONFIGS, POST_UPDATE_TS_KEY, PageContentComponent, PageLinksComponent, PageRefreshService, PageTemplateComponent, PageWavesComponent, PageWrapperComponent, PaginationComponent, PaginationService, PasswordInputComponent, PatternComponent, PdfService, PermissionCatalogService, PermissionSelectorComponent, PermissionsModalComponent, PermissionsViewComponent, PhoneInputComponent, PillComponent, PinInputComponent, PlainCodeBoxComponent, PopoverSelectorComponent, PreferencesService, PreferencesViewComponent, PresetService, PriceTagComponent, ProcessLinksPipe, ProfileSkeletonComponent, ProfileViewComponent, ProgressBarComponent, ProgressRingComponent, ProgressStatusComponent, PrompterComponent, QR_PRESETS, QrCodeComponent, QrGeneratorService, QrScannerComponent, QueryBuilder, QuoteBoxComponent, REQUEST_STATUSES, RadioInputComponent, RangeInputComponent, RatingComponent, ReactionBarComponent, ReactionsService, RefresherComponent, RequestFirestoreService, RequestFormBuilderService, RequestFormComponent, RequestModalComponent, RequestService, RightsFooterComponent, RotatingTextComponent, SEARCH_HEADER_DEFAULTS, SETTINGS_SECTIONS_CATALOG, SHAPE_KEYS, SHARE_PROFILE_MODAL_DEFAULTS, SKELETON_LAYOUT_DEFAULT_ROWS, SKELETON_PRESETS, SOLID_KEYS, STATS_BAR_DEFAULTS, STROKE_KEYS, SearchHeaderComponent, SearchSelectorComponent, SearchbarComponent, SectionHeaderComponent, SecurityViewComponent, SegmentControlComponent, SelectSearchComponent, SessionListModalComponent, SessionService, SettingsHubComponent, ShareButtonsComponent, ShareProfileModalComponent, SimpleComponent, SkeletonComponent, SkeletonLayoutComponent, SkeletonService, SplashComponent, SplashScreenService, StatsBarComponent, StatsCardComponent, StepperComponent, StorageService, SwipeCarouselComponent, SwitchOrgModalComponent, TRI_KEYS, TabbedContentComponent, TableSkeletonComponent, TabsComponent, Terminal404Component, TestimonialCardComponent, TestimonialCarouselComponent, TextComponent, TextInputComponent, TextareaInputComponent, ThemeOption, ThemeService, ThreadPanelComponent, TicketCardComponent, TicketCardImageService, TimelineComponent, TitleBlockComponent, TitleComponent, ToastService, ToggleInputComponent, TokenService, ToolbarActionType, ToolbarComponent, TransferOwnershipModalComponent, TranslatePipe, TypedCollection, TypingIndicatorComponent, UPDATE_BANNER_DEFAULT_CONTENT, UPDATE_BANNER_I18N_NAMESPACE, UpdateBannerComponent, UserAvatarComponent, UsernameInputComponent, VALTECH_ADS_CONFIG, VALTECH_APP_CONFIG, VALTECH_APP_VERSION, VALTECH_AUTH_CONFIG, VALTECH_CHAT_CONFIG, VALTECH_COMPANY_LINKS, VALTECH_CONTENT_CONFIG, VALTECH_DEBUG_CONSOLE, VALTECH_DEFAULT_CONTENT, VALTECH_DONATION_CONFIG, VALTECH_FEEDBACK_CONFIG, VALTECH_FIREBASE_CONFIG, VALTECH_FOOTER_I18N, VALTECH_FOOTER_LOGO, VALTECH_LANGUAGE_SELECTOR, VALTECH_LEGAL_CONFIG, VALTECH_NETWORK_ERROR_KEY, VALTECH_REACTIONS_CONFIG, VALTECH_SETTINGS_MENU_LINKS, VALTECH_SITE_PATHS, VALTECH_SOCIAL_LINKS, VALTECH_SPLASH_SCREEN, VALTECH_WEB_BASE_URLS, VALTECH_WHATSAPP_CONFIG, VERSION, ValtechErrorService, VerifyViewComponent, WhatsappFabComponent, WhatsappService, WizardComponent, WizardFooterComponent, applyDefaultValueToControl, authGuard, authInterceptor, authPasswordValidator, beautifyLegalArticle, blogPost, buildCompanyFooterProps, buildFooterLinks, buildLegalLinkResolver, buildPath, buildSettingsCards, button, canSubmitRequestType, collections, connectPageRefresh, createErrorStateProps, createFirebaseConfig, createGlowCardProps, createInitialPaginationState, createNumberFromToField, createPageState, createPermissionLabeler, createRefreshableStream, createTitleProps, docs, errorLoggingInterceptor, extractPathParams, generatePatternTiles, generateRandomTile, getAppInfo, getAppVersion, getCollectionPath, getDocumentId, getTimeOfDayKey, goToTop, groupPermissionsByScope, guestGuard, hasEmulators, iconButton, interpretError, isAtEnd, isCollectionPath, isDocumentPath, isEmulatorMode, isIonicColor, isValidPath, joinPath, maxLength, mulberry32, news, parseMarkdownArticle, permissionGuard, permissionGuardFromRoute, provideLegalContent, provideSplashScreen, provideValtechAboutRoutes, provideValtechAccountRoutes, provideValtechAds, provideValtechApiKeysRoutes, provideValtechAppConfig, provideValtechAppVersion, provideValtechAppVersionHttp, provideValtechAuth, provideValtechAuthInterceptor, provideValtechChat, provideValtechContent, provideValtechDebugConsole, provideValtechDonations, provideValtechErrorHandling, provideValtechFeedback, provideValtechFirebase, provideValtechI18n, provideValtechLegal, provideValtechNotificationPreferencesRoutes, provideValtechNotificationsRoutes, provideValtechOrganizationRoutes, provideValtechPermissionsRoutes, provideValtechPreferencesRoutes, provideValtechPresets, provideValtechProfileRoutes, provideValtechReactions, provideValtechSecurityRoutes, provideValtechSettingsRoutes, provideValtechSite, provideValtechSkeleton, provideValtechWhatsapp, query, rbacGuard, renderPatternSvgInner, replaceSpecialChars, requestSubmitMode, resolveColor, resolveInputDefaultValue, resolveIonicColor, resolveWebBaseUrl, roleGuard, selectableRequestTypes, storagePaths, superAdminGuard, toArticle };
+export { ACTION_CARD_DEFAULTS, AD_SIZE_MAP, API_TABLE_COLUMN_LABELS, APP_VERSION_PLATFORM_PLUGIN, APP_VERSION_REMOTE_PLUGIN, ARTICLE_CARD_DEFAULTS, ARTICLE_SPACING, ARTICLE_STRIP_DEFAULTS, AUTH_CTA_DEFAULTS, AVATAR_UPLOAD_DEFAULTS, AboutViewComponent, AccordionComponent, AccountViewComponent, ActionCardComponent, ActionHeaderComponent, ActionType, AdSlotComponent, AdsLoaderService, AdsService, AlertBoxComponent, AnalyticsErrorHandler, AnalyticsRouterTracker, AnalyticsService, AnimatedTerminalComponent, ApiKeyCreateModalComponent, ApiKeyService, ApiKeysModalComponent, ApiKeysViewComponent, AppConfigService, AppVersionService, ArticleBuilder, ArticleCardComponent, ArticleComponent, ArticleStripComponent, AttachmentUploaderComponent, AuthBackgroundComponent, AuthCtaComponent, AuthService, AuthStateService, AuthStorageService, AuthSyncService, AvatarComponent, AvatarUploadComponent, BOTTOM_NAV_DEFAULTS, BannerComponent, BlogPostBuilder, BottomNavComponent, BoxComponent, BreadcrumbComponent, ButtonComponent, ButtonGroupComponent, CALLOUT_LABELS, CHEV_KEYS, CIRCLE_KEYS, COMMON_COUNTRY_CODES, COMMON_CURRENCIES, CORNER_KEYS, CTA_CARD_DEFAULTS, CURRENCY_INFO, CardComponent, CardSection, CardType, CardsCarouselComponent, ChangeEmailModalComponent, ChangePasswordModalComponent, ChatComposerComponent, ChatInputComponent, ChatWindowComponent, CheckInputComponent, CheckboxRadioInputComponent, ChipGroupComponent, CodeDisplayComponent, CommandDisplayComponent, CommentComponent, CommentInputComponent, CommentSectionComponent, CompanyFooterComponent, ComponentStates, ConfirmationDialogService, ContainerComponent, ContentLoaderComponent, ContentReactionComponent, ContentService, ContentTransformer, ConversationListItemComponent, ConversationService, CookieBannerComponent, CookieSettingsComponent, CountdownComponent, CreateOrgModalComponent, CtaCardComponent, CurrencyInputComponent, DEFAULT_ADS_CONFIG, DEFAULT_APP_CONFIG_SERVICE_CONFIG, DEFAULT_APP_VERSION_SERVICE_CONFIG, DEFAULT_AUTH_CONFIG, DEFAULT_BACK_HEADER, DEFAULT_BUTTON_PRESETS, DEFAULT_CANCEL_BUTTON, DEFAULT_CHECK_INTERVAL_MS, DEFAULT_CONFIRM_BUTTON, DEFAULT_COUNTDOWN_LABELS, DEFAULT_COUNTDOWN_LABELS_EN, DEFAULT_DEBUG_CONSOLE_CONFIG, DEFAULT_DONATION_CONFIG, DEFAULT_EMPTY_STATE, DEFAULT_EMULATOR_CONFIG, DEFAULT_FEEDBACK_CONFIG, DEFAULT_FEEDBACK_TYPE_OPTIONS, DEFAULT_HOME_HEADER, DEFAULT_INFINITE_LIST_METADATA, DEFAULT_LOGIN_LOGO, DEFAULT_MODAL_CANCEL_BUTTON, DEFAULT_MODAL_CONFIRM_BUTTON, DEFAULT_PAGE_SIZE_OPTIONS, DEFAULT_PLATFORMS, DEFAULT_POST_UPDATE_GRACE_MS, DEFAULT_PRESETS, DEFAULT_REFRESHER_METADATA, DEFAULT_SKELETON_CONFIG, DEFAULT_SPLASH_SCREEN_CONFIG, DataTableComponent, DateInputComponent, DatePickerComponent, DateRangeInputComponent, DebugConsoleComponent, DeleteAccountModalComponent, DetailSkeletonComponent, DeviceService, DisplayComponent, DividerComponent, DocsApiTableComponent, DocsBreadcrumbComponent, DocsBuilder, DocsCalloutComponent, DocsCodeExampleComponent, DocsLayoutComponent, DocsNavLinksComponent, DocsNavigationService, DocsPageComponent, DocsSearchComponent, DocsSectionComponent, DocsShellComponent, DocsSidebarComponent, DocsTocComponent, DonationService, DownloadService, EditOrgModalComponent, EmptyStateComponent, EntityCardComponent, EntityFeedService, ExpandableTextComponent, FEATURES_LIST_DEFAULTS, FUN_MODAL_DEFAULTS, FabComponent, FaqComponent, FeaturesListComponent, FeedbackFormComponent, FeedbackService, FieldListComponent, FileInputComponent, FirebaseService, FirestoreCollectionFactory, FirestoreService, FontSizeOption, FontSizeSelectorComponent, FontSizeService, FooterComponent, FooterLinksComponent, FormComponent, FormFieldComponent, FormSkeletonComponent, FunHeaderComponent, FunModalComponent, GlassComponent, GlowCardComponent, GlowComponent, GridSkeletonComponent, HANDOFF_ROUTE_PARAM, HANDOFF_TOKEN_PARAM, HandoffService, HapticsService, HasPermissionDirective, HeaderComponent, HintComponent, HorizontalScrollComponent, HrefComponent, HtmlViewerModalComponent, I18nService, IMAGE_DEFAULTS, INITIAL_AUTH_STATE, INITIAL_MFA_STATE, INVITATION_CARD_DEFAULTS, IONIC_COLORS$5 as IONIC_COLORS, Icon, IconComponent, IconService, ImageComponent, ImageCropComponent, ImageService, InAppBrowserService, InfiniteListComponent, InfoComponent, InputI18nHelper, InputType, InvitationCardComponent, InviteMemberModalComponent, ItemListComponent, LANG_STORAGE_KEY$1 as LANG_STORAGE_KEY, LEGAL_CONTENT_CONFIG, LOGGED_IN_HINT_COOKIE, LOGIN_DEFAULTS, LandingSplitComponent, LandingStepsComponent, LanguageSelectorComponent, LanguageSelectorV2Component, LayeredCardComponent, LegalContentService, LegalLinkService, LinkComponent, LinkProcessorService, LinkedProvidersComponent, LinksAccordionComponent, LinksCakeComponent, ListSkeletonComponent, LoadMoreComponent, LoadingDirective, LocalStorageService, LocaleService, LoginAttemptModalComponent, LoginComponent, MEDIA_OBJECT_DEFAULTS, MEMBER_CARD_DEFAULTS, METRIC_CARD_DEFAULTS, MODAL_SIZES, MOTIF_KEYS, MOTION, MaintenancePageComponent, MarkdownArticleParserService, MediaObjectComponent, MemberCardComponent, MemberDetailModalComponent, MemberImportModalComponent, MenuComponent, MessageBubbleComponent, MessagingService, MetaService, MetricCardComponent, MfaModalComponent, ModalService, ModalShellComponent, MultiSelectSearchComponent, NUM_KEYS, NavigationService, NetworkBannerComponent, NetworkStatusService, NewsBuilder, NoContentComponent, NotesBoxComponent, NotificationActionService, NotificationPreferencesViewComponent, NotificationsService, NotificationsViewComponent, NumberFromToComponent, NumberStepperComponent, OAUTH_PROVIDERS_INFO, OAuthCallbackComponent, OAuthService, OptionCardsComponent, OrgInfoSheetComponent, OrgService, OrgSwitchService, OrganizationViewComponent, PATTERN_MOTIFS, PATTERN_PALETTES, PATTERN_STYLE_CONFIGS, PLATFORM_CONFIGS, POST_UPDATE_TS_KEY, PageContentComponent, PageLinksComponent, PageRefreshService, PageTemplateComponent, PageWavesComponent, PageWrapperComponent, PaginationComponent, PaginationService, PasswordInputComponent, PatternComponent, PdfService, PermissionCatalogService, PermissionSelectorComponent, PermissionsModalComponent, PermissionsViewComponent, PhoneInputComponent, PillComponent, PinInputComponent, PlainCodeBoxComponent, PopoverSelectorComponent, PreferencesService, PreferencesViewComponent, PresetService, PriceTagComponent, ProcessLinksPipe, ProfileSkeletonComponent, ProfileViewComponent, ProgressBarComponent, ProgressRingComponent, ProgressStatusComponent, PrompterComponent, QR_PRESETS, QrCodeComponent, QrGeneratorService, QrScannerComponent, QueryBuilder, QuoteBoxComponent, REQUEST_STATUSES, RadioInputComponent, RangeInputComponent, RatingComponent, ReactionBarComponent, ReactionsService, RefresherComponent, RequestFirestoreService, RequestFormBuilderService, RequestFormComponent, RequestModalComponent, RequestService, RightsFooterComponent, RotatingTextComponent, SEARCH_HEADER_DEFAULTS, SETTINGS_SECTIONS_CATALOG, SHAPE_KEYS, SHARE_PROFILE_MODAL_DEFAULTS, SKELETON_LAYOUT_DEFAULT_ROWS, SKELETON_PRESETS, SOLID_KEYS, STATS_BAR_DEFAULTS, STROKE_KEYS, SearchHeaderComponent, SearchSelectorComponent, SearchbarComponent, SectionHeaderComponent, SecurityViewComponent, SegmentControlComponent, SelectSearchComponent, SessionListModalComponent, SessionService, SettingsHubComponent, ShareButtonsComponent, ShareProfileModalComponent, SimpleComponent, SkeletonComponent, SkeletonLayoutComponent, SkeletonService, SplashComponent, SplashScreenService, StatsBarComponent, StatsCardComponent, StepperComponent, StorageService, SwipeCarouselComponent, SwitchOrgModalComponent, TRI_KEYS, TabbedContentComponent, TableSkeletonComponent, TabsComponent, Terminal404Component, TestimonialCardComponent, TestimonialCarouselComponent, TextComponent, TextInputComponent, TextareaInputComponent, ThemeOption, ThemeService, ThreadPanelComponent, TicketCardComponent, TicketCardImageService, TimelineComponent, TitleBlockComponent, TitleComponent, ToastService, ToggleInputComponent, TokenService, ToolbarActionType, ToolbarComponent, TransferOwnershipModalComponent, TranslatePipe, TypedCollection, TypingIndicatorComponent, UPDATE_BANNER_DEFAULT_CONTENT, UPDATE_BANNER_I18N_NAMESPACE, UpdateBannerComponent, UserAvatarComponent, UsernameInputComponent, VALTECH_ADS_CONFIG, VALTECH_APP_CONFIG, VALTECH_APP_VERSION, VALTECH_AUTH_CONFIG, VALTECH_CHAT_CONFIG, VALTECH_COMPANY_LINKS, VALTECH_CONTENT_CONFIG, VALTECH_DEBUG_CONSOLE, VALTECH_DEFAULT_CONTENT, VALTECH_DONATION_CONFIG, VALTECH_FEEDBACK_CONFIG, VALTECH_FIREBASE_CONFIG, VALTECH_FOOTER_I18N, VALTECH_FOOTER_LOGO, VALTECH_LANGUAGE_SELECTOR, VALTECH_LEGAL_CONFIG, VALTECH_NETWORK_ERROR_KEY, VALTECH_REACTIONS_CONFIG, VALTECH_SETTINGS_MENU_LINKS, VALTECH_SITE_PATHS, VALTECH_SOCIAL_LINKS, VALTECH_SPLASH_SCREEN, VALTECH_WEB_BASE_URLS, VALTECH_WHATSAPP_CONFIG, VERSION, ValtechErrorService, VerifyViewComponent, WhatsappFabComponent, WhatsappService, WizardComponent, WizardFooterComponent, applyDefaultValueToControl, authGuard, authInterceptor, authPasswordValidator, beautifyLegalArticle, blogPost, buildCompanyFooterProps, buildFooterLinks, buildLegalLinkResolver, buildPath, buildSettingsCards, button, canSubmitRequestType, collections, connectPageRefresh, createErrorStateProps, createFirebaseConfig, createGlowCardProps, createInitialPaginationState, createNumberFromToField, createPageState, createPermissionLabeler, createRefreshableStream, createTitleProps, docs, errorLoggingInterceptor, extractPathParams, formatClockTime, formatDateSeparator, formatRelativeTime, generatePatternTiles, generateRandomTile, getAppInfo, getAppVersion, getCollectionPath, getDocumentId, getTimeOfDayKey, goToTop, groupPermissionsByScope, guestGuard, hasEmulators, iconButton, interpretError, isAtEnd, isCollectionPath, isDocumentPath, isEmulatorMode, isIonicColor, isValidPath, joinPath, maxLength, mulberry32, news, parseMarkdownArticle, permissionGuard, permissionGuardFromRoute, provideLegalContent, provideSplashScreen, provideValtechAboutRoutes, provideValtechAccountRoutes, provideValtechAds, provideValtechApiKeysRoutes, provideValtechAppConfig, provideValtechAppVersion, provideValtechAppVersionHttp, provideValtechAuth, provideValtechAuthInterceptor, provideValtechChat, provideValtechContent, provideValtechDebugConsole, provideValtechDonations, provideValtechErrorHandling, provideValtechFeedback, provideValtechFirebase, provideValtechI18n, provideValtechLegal, provideValtechNotificationPreferencesRoutes, provideValtechNotificationsRoutes, provideValtechOrganizationRoutes, provideValtechPermissionsRoutes, provideValtechPreferencesRoutes, provideValtechPresets, provideValtechProfileRoutes, provideValtechReactions, provideValtechSecurityRoutes, provideValtechSettingsRoutes, provideValtechSite, provideValtechSkeleton, provideValtechWhatsapp, query, rbacGuard, renderPatternSvgInner, replaceSpecialChars, requestSubmitMode, resolveColor, resolveInputDefaultValue, resolveIonicColor, resolveWebBaseUrl, roleGuard, selectableRequestTypes, storagePaths, superAdminGuard, toArticle };
 //# sourceMappingURL=valtech-components.mjs.map