@malva-ui/core 0.1.13 → 0.1.14

package/fesm2022/malva-ui-core-chat.mjs

@@ -0,0 +1,825 @@
+import * as i0 from '@angular/core';
+import { InjectionToken, input, output, inject, signal, computed, ChangeDetectionStrategy, ViewEncapsulation, Component, Injectable, DestroyRef, TemplateRef, Directive, contentChild, contentChildren, viewChild, effect, afterRenderEffect } from '@angular/core';
+import { NgTemplateOutlet, DatePipe, formatDate } from '@angular/common';
+import { coerceBooleanProperty } from '@angular/cdk/coercion';
+import { MlvResizeObserverService } from '@malva-ui/cdk/utils';
+import * as i1 from '@malva-ui/cdk/density';
+import { MLV_DENSITY_ELEMENT, MlvDensityDirective } from '@malva-ui/cdk/density';
+import { MLV_CHAT_I18N, MlvTranslatePipe } from '@malva-ui/i18n';
+import { MlvAvatar, MlvColorFromTextPipe } from '@malva-ui/core/avatar';
+import { MlvLoader } from '@malva-ui/core/loader';
+import { MlvSkeleton } from '@malva-ui/core/skeleton';
+import { LucidePlay, LucidePause, LucideCheck, LucideCheckCheck, LucideCircleAlert, LucideClock, LucideCornerUpLeft, LucideMusic } from '@lucide/angular';
+import { MlvProgress } from '@malva-ui/core/progress';
+import { MlvButton } from '@malva-ui/core/button';
+import { MlvSlider } from '@malva-ui/core/slider';
+import { MlvScrollbar } from '@malva-ui/core/scrollbar';
+
+/**
+ * Users map (id → user) provided by `mlv-chat` so bubbles can resolve author
+ * display names (reply quotes). Optional — standalone bubbles render without it.
+ */
+const MLV_CHAT_USERS = new InjectionToken('MLV_CHAT_USERS');
+/** Custom message-type templates (type → def) provided by `mlv-chat`. */
+const MLV_CHAT_MESSAGE_DEFS = new InjectionToken('MLV_CHAT_MESSAGE_DEFS');
+
+/** Normalizes the {@link MlvChatMessageData.timestamp} union to a Date. */
+function toChatDate(timestamp) {
+    return timestamp instanceof Date ? timestamp : new Date(timestamp);
+}
+/** True when both dates fall on the same calendar day (local time). */
+function isSameChatDay(a, b) {
+    return a.getFullYear() === b.getFullYear() && a.getMonth() === b.getMonth() && a.getDate() === b.getDate();
+}
+/**
+ * Flattens an oldest→newest message array into date separators + author groups.
+ * A group breaks on author change, on a gap larger than `groupWindowMinutes`,
+ * and always at a calendar-day boundary.
+ *
+ * @param messages Messages ordered oldest → newest.
+ * @param selfId Current user id; groups authored by it are flagged `own`.
+ * @param groupWindowMinutes Maximum gap between consecutive messages of one group.
+ * @param dateSeparators Whether `kind: 'date'` items are emitted at day boundaries.
+ */
+function buildChatRenderList(messages, selfId, groupWindowMinutes, dateSeparators) {
+    const items = [];
+    let pending = [];
+    let prevDate = null;
+    const flush = () => {
+        if (!pending.length)
+            return;
+        const rendered = pending.map((message, i) => ({
+            message,
+            position: pending.length === 1 ? 'single' : i === 0 ? 'first' : i === pending.length - 1 ? 'last' : 'middle',
+        }));
+        items.push({
+            kind: 'group',
+            id: `group-${pending[0].id}`,
+            authorId: pending[0].authorId,
+            own: pending[0].authorId === selfId,
+            messages: rendered,
+        });
+        pending = [];
+    };
+    for (const message of messages) {
+        const date = toChatDate(message.timestamp);
+        const dayBreak = prevDate === null || !isSameChatDay(prevDate, date);
+        const gapBreak = prevDate !== null && date.getTime() - prevDate.getTime() > groupWindowMinutes * 60_000;
+        const authorBreak = pending.length > 0 && pending[0].authorId !== message.authorId;
+        if (dayBreak || gapBreak || authorBreak)
+            flush();
+        if (dayBreak && dateSeparators) {
+            items.push({ kind: 'date', id: `date-${date.getFullYear()}-${date.getMonth()}-${date.getDate()}`, date });
+        }
+        pending.push(message);
+        prevDate = date;
+    }
+    flush();
+    return items;
+}
+
+/**
+ * Formats a duration in seconds as `m:ss` (e.g. 75 → '1:15').
+ * Negative or non-finite input renders as '0:00'.
+ */
+function formatChatDuration(seconds) {
+    const total = Number.isFinite(seconds) && seconds > 0 ? Math.floor(seconds) : 0;
+    const minutes = Math.floor(total / 60);
+    const rest = total % 60;
+    return `${minutes}:${rest.toString().padStart(2, '0')}`;
+}
+
+/**
+ * Internal renderer for the image/gif/video attachments of a chat message.
+ * Not exported from the package barrel — `mlv-chat-message` owns it.
+ */
+class MlvChatMediaGrid {
+    /** Visual attachments to render; audio entries must be filtered out by the caller. */
+    attachments = input.required(/* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "attachments" }] : /* istanbul ignore next */ []));
+    /** Condensed rendering inside a reply quote: a single small thumbnail. */
+    quote = input(false, { ...(ngDevMode ? { debugName: "quote" } : /* istanbul ignore next */ {}), transform: coerceBooleanProperty });
+    /** Emits the attachment whose cell was activated. */
+    mediaClick = output();
+    /** @internal Chat i18n strings. */
+    _i18n = inject(MLV_CHAT_I18N);
+    /** @internal Ids of images whose load event fired, so their skeleton is removed. */
+    _loaded = signal(new Set(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_loaded" }] : /* istanbul ignore next */ []));
+    /** @internal Cells rendered to the DOM: one in quote mode, otherwise the first four. */
+    _visible = computed(() => this.attachments().slice(0, this.quote() ? 1 : 4), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_visible" }] : /* istanbul ignore next */ []));
+    /** @internal Count of attachments hidden behind the +N overlay. */
+    _extra = computed(() => this.quote() ? 0 : Math.max(0, this.attachments().length - 4), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_extra" }] : /* istanbul ignore next */ []));
+    /** @internal Formats a duration in seconds as `m:ss` for the video chip. */
+    _formatDuration = formatChatDuration;
+    /** @internal True while an attachment carries upload progress, so the overlay shows. */
+    _isUploading(attachment) {
+        return attachment.uploadProgress !== undefined && attachment.uploadProgress !== null;
+    }
+    /** @internal Marks an image as loaded so its skeleton placeholder is removed. */
+    _onLoad(id) {
+        this._loaded.update((set) => new Set(set).add(id));
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: MlvChatMediaGrid, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.7", type: MlvChatMediaGrid, isStandalone: true, selector: "mlv-chat-media-grid", inputs: { attachments: { classPropertyName: "attachments", publicName: "attachments", isSignal: true, isRequired: true, transformFunction: null }, quote: { classPropertyName: "quote", publicName: "quote", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { mediaClick: "mediaClick" }, host: { properties: { "class.mlv-chat-media-grid--single": "_visible().length === 1", "class.mlv-chat-media-grid--quote": "quote()" }, classAttribute: "mlv-chat-media-grid" }, ngImport: i0, template: "@for (att of _visible(); track att.id; let last = $last) {\n  <button\n    type=\"button\"\n    class=\"mlv-chat-media-grid__cell\"\n    [class.mlv-chat-media-grid__cell--uploading]=\"_isUploading(att)\"\n    [style.aspect-ratio]=\"att.width && att.height ? att.width + ' / ' + att.height : null\"\n    [attr.aria-label]=\"\n      last && _extra() > 0\n        ? (_i18n().moreMedia | mlvTranslate: { count: _extra() })\n        : (att.alt ?? _i18n().imageFallbackAlt)\n    \"\n    (click)=\"mediaClick.emit(att)\"\n  >\n    @switch (att.kind) {\n      @case ('gif') {\n        <video [src]=\"att.src\" [autoplay]=\"true\" [muted]=\"true\" [loop]=\"true\" playsinline></video>\n      }\n      @case ('video') {\n        @if (att.poster) {\n          <img [src]=\"att.poster\" [alt]=\"att.alt ?? ''\" loading=\"lazy\" />\n        } @else {\n          <video [src]=\"att.src\" preload=\"metadata\" [muted]=\"true\" playsinline></video>\n        }\n        <span class=\"mlv-chat-media-grid__play\">\n          <svg lucidePlay [size]=\"20\" aria-hidden=\"true\" />\n        </span>\n        @if (att.duration) {\n          <span class=\"mlv-chat-media-grid__duration\">{{ _formatDuration(att.duration) }}</span>\n        }\n      }\n      @default {\n        @if (!_loaded().has(att.id)) {\n          <mlv-skeleton class=\"mlv-chat-media-grid__placeholder\" width=\"100%\" height=\"100%\" />\n        }\n        <img [src]=\"att.src\" [alt]=\"att.alt ?? ''\" loading=\"lazy\" (load)=\"_onLoad(att.id)\" />\n      }\n    }\n    @if (_isUploading(att)) {\n      <span class=\"mlv-chat-media-grid__upload\">\n        <mlv-progress shape=\"circle\" size=\"s\" [value]=\"att.uploadProgress ?? 0\" />\n      </span>\n    }\n    @if (last && _extra() > 0) {\n      <span class=\"mlv-chat-media-grid__more\" aria-hidden=\"true\">+{{ _extra() }}</span>\n    }\n  </button>\n}\n", styles: ["@layer mlv.components{.mlv-chat-media-grid{box-sizing:border-box;padding:0;margin:0;font-family:var(--mlv-typography-family-text);font-size:var(--mlv-typography-body-s-size)}.mlv-chat-media-grid *{box-sizing:border-box}.mlv-chat-media-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:.125rem;max-width:20rem;border-radius:var(--mlv-radius-m);overflow:hidden}.mlv-chat-media-grid--single{grid-template-columns:1fr}.mlv-chat-media-grid--quote{max-width:2.5rem;gap:0}.mlv-chat-media-grid__cell{position:relative;display:block;padding:0;border:none;background:none;cursor:pointer;min-height:4rem;overflow:hidden}.mlv-chat-media-grid__cell img,.mlv-chat-media-grid__cell video{display:block;width:100%;height:100%;object-fit:cover}.mlv-chat-media-grid__cell:focus-visible{outline:var(--mlv-stroke-width-medium) solid var(--mlv-border-focus);outline-offset:calc(var(--mlv-focus-ring-offset) * -1)}.mlv-chat-media-grid__cell--uploading img,.mlv-chat-media-grid__cell--uploading video{opacity:var(--mlv-disabled-opacity)}.mlv-chat-media-grid--quote .mlv-chat-media-grid__cell{width:2.5rem;height:2.5rem;min-height:0}.mlv-chat-media-grid__placeholder{position:absolute;inset:0}.mlv-chat-media-grid__play,.mlv-chat-media-grid__upload{position:absolute;inset-block-start:50%;inset-inline-start:50%;transform:translate(-50%,-50%);display:inline-flex;align-items:center;justify-content:center}.mlv-chat-media-grid__play{inline-size:2.5rem;block-size:2.5rem;border-radius:var(--mlv-radius-full);background-color:var(--mlv-background-overlay);color:var(--mlv-text-inverse)}.mlv-chat-media-grid__duration{position:absolute;inset-block-end:.25rem;inset-inline-end:.25rem;padding:.0625rem .25rem;border-radius:var(--mlv-radius-badge);background-color:var(--mlv-background-overlay);color:var(--mlv-text-inverse)}.mlv-chat-media-grid__more{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background-color:var(--mlv-background-overlay);color:var(--mlv-text-inverse);font-size:var(--mlv-typography-body-l-size)}}\n"], dependencies: [{ kind: "component", type: LucidePlay, selector: "svg[lucidePlay]" }, { kind: "component", type: MlvProgress, selector: "mlv-progress", inputs: ["shape", "value", "size", "tone", "showPercentage", "ariaLabel"] }, { kind: "component", type: MlvSkeleton, selector: "mlv-skeleton", inputs: ["variant", "width", "height", "animated", "animationDuration"] }, { kind: "pipe", type: MlvTranslatePipe, name: "mlvTranslate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: MlvChatMediaGrid, decorators: [{
+            type: Component,
+            args: [{ selector: 'mlv-chat-media-grid', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, imports: [LucidePlay, MlvProgress, MlvSkeleton, MlvTranslatePipe], host: {
+                        class: 'mlv-chat-media-grid',
+                        '[class.mlv-chat-media-grid--single]': '_visible().length === 1',
+                        '[class.mlv-chat-media-grid--quote]': 'quote()',
+                    }, template: "@for (att of _visible(); track att.id; let last = $last) {\n  <button\n    type=\"button\"\n    class=\"mlv-chat-media-grid__cell\"\n    [class.mlv-chat-media-grid__cell--uploading]=\"_isUploading(att)\"\n    [style.aspect-ratio]=\"att.width && att.height ? att.width + ' / ' + att.height : null\"\n    [attr.aria-label]=\"\n      last && _extra() > 0\n        ? (_i18n().moreMedia | mlvTranslate: { count: _extra() })\n        : (att.alt ?? _i18n().imageFallbackAlt)\n    \"\n    (click)=\"mediaClick.emit(att)\"\n  >\n    @switch (att.kind) {\n      @case ('gif') {\n        <video [src]=\"att.src\" [autoplay]=\"true\" [muted]=\"true\" [loop]=\"true\" playsinline></video>\n      }\n      @case ('video') {\n        @if (att.poster) {\n          <img [src]=\"att.poster\" [alt]=\"att.alt ?? ''\" loading=\"lazy\" />\n        } @else {\n          <video [src]=\"att.src\" preload=\"metadata\" [muted]=\"true\" playsinline></video>\n        }\n        <span class=\"mlv-chat-media-grid__play\">\n          <svg lucidePlay [size]=\"20\" aria-hidden=\"true\" />\n        </span>\n        @if (att.duration) {\n          <span class=\"mlv-chat-media-grid__duration\">{{ _formatDuration(att.duration) }}</span>\n        }\n      }\n      @default {\n        @if (!_loaded().has(att.id)) {\n          <mlv-skeleton class=\"mlv-chat-media-grid__placeholder\" width=\"100%\" height=\"100%\" />\n        }\n        <img [src]=\"att.src\" [alt]=\"att.alt ?? ''\" loading=\"lazy\" (load)=\"_onLoad(att.id)\" />\n      }\n    }\n    @if (_isUploading(att)) {\n      <span class=\"mlv-chat-media-grid__upload\">\n        <mlv-progress shape=\"circle\" size=\"s\" [value]=\"att.uploadProgress ?? 0\" />\n      </span>\n    }\n    @if (last && _extra() > 0) {\n      <span class=\"mlv-chat-media-grid__more\" aria-hidden=\"true\">+{{ _extra() }}</span>\n    }\n  </button>\n}\n", styles: ["@layer mlv.components{.mlv-chat-media-grid{box-sizing:border-box;padding:0;margin:0;font-family:var(--mlv-typography-family-text);font-size:var(--mlv-typography-body-s-size)}.mlv-chat-media-grid *{box-sizing:border-box}.mlv-chat-media-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:.125rem;max-width:20rem;border-radius:var(--mlv-radius-m);overflow:hidden}.mlv-chat-media-grid--single{grid-template-columns:1fr}.mlv-chat-media-grid--quote{max-width:2.5rem;gap:0}.mlv-chat-media-grid__cell{position:relative;display:block;padding:0;border:none;background:none;cursor:pointer;min-height:4rem;overflow:hidden}.mlv-chat-media-grid__cell img,.mlv-chat-media-grid__cell video{display:block;width:100%;height:100%;object-fit:cover}.mlv-chat-media-grid__cell:focus-visible{outline:var(--mlv-stroke-width-medium) solid var(--mlv-border-focus);outline-offset:calc(var(--mlv-focus-ring-offset) * -1)}.mlv-chat-media-grid__cell--uploading img,.mlv-chat-media-grid__cell--uploading video{opacity:var(--mlv-disabled-opacity)}.mlv-chat-media-grid--quote .mlv-chat-media-grid__cell{width:2.5rem;height:2.5rem;min-height:0}.mlv-chat-media-grid__placeholder{position:absolute;inset:0}.mlv-chat-media-grid__play,.mlv-chat-media-grid__upload{position:absolute;inset-block-start:50%;inset-inline-start:50%;transform:translate(-50%,-50%);display:inline-flex;align-items:center;justify-content:center}.mlv-chat-media-grid__play{inline-size:2.5rem;block-size:2.5rem;border-radius:var(--mlv-radius-full);background-color:var(--mlv-background-overlay);color:var(--mlv-text-inverse)}.mlv-chat-media-grid__duration{position:absolute;inset-block-end:.25rem;inset-inline-end:.25rem;padding:.0625rem .25rem;border-radius:var(--mlv-radius-badge);background-color:var(--mlv-background-overlay);color:var(--mlv-text-inverse)}.mlv-chat-media-grid__more{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background-color:var(--mlv-background-overlay);color:var(--mlv-text-inverse);font-size:var(--mlv-typography-body-l-size)}}\n"] }]
+        }], propDecorators: { attachments: [{ type: i0.Input, args: [{ isSignal: true, alias: "attachments", required: true }] }], quote: [{ type: i0.Input, args: [{ isSignal: true, alias: "quote", required: false }] }], mediaClick: [{ type: i0.Output, args: ["mediaClick"] }] } });
+
+/**
+ * Coordinates one-at-a-time playback across the audio bubbles of a single
+ * `mlv-chat`. Provided by the container, never `providedIn: 'root'` — two
+ * chats on one page keep independent playback.
+ */
+class MlvChatAudioService {
+    /** @private The player currently allowed to play. */
+    _current = null;
+    /** Registers `player` as the active one, pausing the previously active player. */
+    requestPlay(player) {
+        if (this._current && this._current !== player)
+            this._current.pause();
+        this._current = player;
+    }
+    /** Clears the active slot when a player pauses or ends on its own. */
+    release(player) {
+        if (this._current === player)
+            this._current = null;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: MlvChatAudioService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: MlvChatAudioService });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: MlvChatAudioService, decorators: [{
+            type: Injectable
+        }] });
+
+/** Creates the `HTMLAudioElement` a player drives; overridable in tests. */
+const MLV_CHAT_AUDIO_FACTORY = new InjectionToken('MLV_CHAT_AUDIO_FACTORY', { providedIn: 'root', factory: () => (src) => new Audio(src) });
+/**
+ * Internal player for an audio attachment: play/pause, a seek slider, and the
+ * elapsed/total time. Playback is exclusive per `mlv-chat` when the container
+ * provides {@link MlvChatAudioService}.
+ */
+class MlvChatAudio {
+    /** The audio attachment to play. */
+    attachment = input.required(/* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "attachment" }] : /* istanbul ignore next */ []));
+    /** @internal Chat i18n strings. */
+    _i18n = inject(MLV_CHAT_I18N);
+    /** @private Creates the underlying audio element on first playback. */
+    _audioFactory = inject(MLV_CHAT_AUDIO_FACTORY);
+    /** @private Container-scoped playback coordinator; null for a standalone player. */
+    _playback = inject(MlvChatAudioService, { optional: true });
+    /** @private Lazily created audio element; null until the first play. */
+    _audio = null;
+    /** @internal True while the element is playing. */
+    _playing = signal(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_playing" }] : /* istanbul ignore next */ []));
+    /** @internal Playback position in seconds. */
+    _currentTime = signal(0, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_currentTime" }] : /* istanbul ignore next */ []));
+    /** @private Duration reported by the element once metadata has loaded. */
+    _metadataDuration = signal(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_metadataDuration" }] : /* istanbul ignore next */ []));
+    /** @internal Total duration: element metadata wins over the declared value. */
+    _duration = computed(() => this._metadataDuration() ?? this.attachment().duration ?? 0, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_duration" }] : /* istanbul ignore next */ []));
+    /** @internal True while the attachment is still uploading; playback is blocked. */
+    _uploading = computed(() => {
+        const progress = this.attachment().uploadProgress;
+        return progress !== undefined && progress !== null;
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_uploading" }] : /* istanbul ignore next */ []));
+    /** @internal Formats seconds as `m:ss` for the elapsed/total readout. */
+    _formatDuration = formatChatDuration;
+    constructor() {
+        inject(DestroyRef).onDestroy(() => {
+            this._audio?.pause();
+            this._playback?.release(this);
+        });
+    }
+    /** Pauses playback. Called by the container coordinator when another player starts. */
+    pause() {
+        this._audio?.pause();
+        this._playing.set(false);
+    }
+    /** @internal Toggles between play and pause. */
+    _toggle() {
+        if (this._playing()) {
+            this.pause();
+            this._playback?.release(this);
+            return;
+        }
+        const audio = this._ensureAudio();
+        this._playback?.requestPlay(this);
+        void audio.play();
+        this._playing.set(true);
+    }
+    /**
+     * @internal Seeks to the given position in seconds. The slider emits the shared
+     * `MlvSliderValue` union; only the scalar form is used here (no range thumbs).
+     */
+    _seek(value) {
+        const seconds = Array.isArray(value) ? value[0] : value;
+        this._currentTime.set(seconds);
+        if (this._audio)
+            this._audio.currentTime = seconds;
+    }
+    /** @private Creates the audio element and wires its listeners on first use. */
+    _ensureAudio() {
+        if (this._audio)
+            return this._audio;
+        const audio = this._audioFactory(this.attachment().src);
+        audio.addEventListener('timeupdate', () => this._currentTime.set(audio.currentTime));
+        audio.addEventListener('loadedmetadata', () => {
+            if (Number.isFinite(audio.duration))
+                this._metadataDuration.set(audio.duration);
+        });
+        audio.addEventListener('ended', () => {
+            this._playing.set(false);
+            this._currentTime.set(0);
+            this._playback?.release(this);
+        });
+        this._audio = audio;
+        return audio;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: MlvChatAudio, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.7", type: MlvChatAudio, isStandalone: true, selector: "mlv-chat-audio", inputs: { attachment: { classPropertyName: "attachment", publicName: "attachment", isSignal: true, isRequired: true, transformFunction: null } }, host: { properties: { "class.mlv-chat-audio--uploading": "_uploading()" }, classAttribute: "mlv-chat-audio" }, ngImport: i0, template: "<button\n  mlvButton\n  type=\"button\"\n  class=\"mlv-chat-audio__toggle\"\n  shape=\"circle\"\n  [disabled]=\"_uploading()\"\n  [attr.aria-label]=\"_playing() ? _i18n().pauseAudio : _i18n().playAudio\"\n  (click)=\"_toggle()\"\n>\n  @if (_playing()) {\n  <svg lucidePause [size]=\"16\" aria-hidden=\"true\" />\n  } @else {\n  <svg lucidePlay [size]=\"16\" aria-hidden=\"true\" />\n  }\n</button>\n@if (_uploading()) {\n<span class=\"mlv-chat-audio__upload\">\n  <mlv-progress size=\"s\" [value]=\"attachment().uploadProgress ?? 0\" />\n</span>\n} @else {\n<mlv-slider\n  class=\"mlv-chat-audio__seek\"\n  [min]=\"0\"\n  [max]=\"_duration()\"\n  [value]=\"_currentTime()\"\n  [label]=\"_i18n().playAudio\"\n  (valueChange)=\"_seek($event)\"\n/>\n}\n<span class=\"mlv-chat-audio__time\">\n  {{ _formatDuration(_currentTime()) }} / {{ _formatDuration(_duration()) }}\n</span>\n", styles: ["@layer mlv.components{.mlv-chat-audio{box-sizing:border-box;padding:0;margin:0;font-family:var(--mlv-typography-family-text);font-size:var(--mlv-typography-body-s-size)}.mlv-chat-audio *{box-sizing:border-box}.mlv-chat-audio{display:flex;align-items:center;gap:.5rem;min-inline-size:12rem}.mlv-chat-audio__seek,.mlv-chat-audio__upload{flex:1;min-inline-size:4rem}.mlv-chat-audio__time{font-variant-numeric:tabular-nums;white-space:nowrap;opacity:.7}}\n"], dependencies: [{ kind: "component", type: LucidePause, selector: "svg[lucidePause]" }, { kind: "component", type: LucidePlay, selector: "svg[lucidePlay]" }, { kind: "component", type: MlvButton, selector: "button[mlvButton], a[mlvButton]", inputs: ["variant", "shape", "disabled", "loading", "selected"] }, { kind: "component", type: MlvProgress, selector: "mlv-progress", inputs: ["shape", "value", "size", "tone", "showPercentage", "ariaLabel"] }, { kind: "component", type: MlvSlider, selector: "mlv-slider", inputs: ["orientation", "min", "max", "step", "showTicks", "range", "tooltip", "value"], outputs: ["valueChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: MlvChatAudio, decorators: [{
+            type: Component,
+            args: [{ selector: 'mlv-chat-audio', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, imports: [LucidePause, LucidePlay, MlvButton, MlvProgress, MlvSlider], host: {
+                        class: 'mlv-chat-audio',
+                        '[class.mlv-chat-audio--uploading]': '_uploading()',
+                    }, template: "<button\n  mlvButton\n  type=\"button\"\n  class=\"mlv-chat-audio__toggle\"\n  shape=\"circle\"\n  [disabled]=\"_uploading()\"\n  [attr.aria-label]=\"_playing() ? _i18n().pauseAudio : _i18n().playAudio\"\n  (click)=\"_toggle()\"\n>\n  @if (_playing()) {\n  <svg lucidePause [size]=\"16\" aria-hidden=\"true\" />\n  } @else {\n  <svg lucidePlay [size]=\"16\" aria-hidden=\"true\" />\n  }\n</button>\n@if (_uploading()) {\n<span class=\"mlv-chat-audio__upload\">\n  <mlv-progress size=\"s\" [value]=\"attachment().uploadProgress ?? 0\" />\n</span>\n} @else {\n<mlv-slider\n  class=\"mlv-chat-audio__seek\"\n  [min]=\"0\"\n  [max]=\"_duration()\"\n  [value]=\"_currentTime()\"\n  [label]=\"_i18n().playAudio\"\n  (valueChange)=\"_seek($event)\"\n/>\n}\n<span class=\"mlv-chat-audio__time\">\n  {{ _formatDuration(_currentTime()) }} / {{ _formatDuration(_duration()) }}\n</span>\n", styles: ["@layer mlv.components{.mlv-chat-audio{box-sizing:border-box;padding:0;margin:0;font-family:var(--mlv-typography-family-text);font-size:var(--mlv-typography-body-s-size)}.mlv-chat-audio *{box-sizing:border-box}.mlv-chat-audio{display:flex;align-items:center;gap:.5rem;min-inline-size:12rem}.mlv-chat-audio__seek,.mlv-chat-audio__upload{flex:1;min-inline-size:4rem}.mlv-chat-audio__time{font-variant-numeric:tabular-nums;white-space:nowrap;opacity:.7}}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { attachment: [{ type: i0.Input, args: [{ isSignal: true, alias: "attachment", required: true }] }] } });
+
+/**
+ * A single chat bubble. Normally rendered internally by `mlv-chat`, but usable
+ * standalone. Renders text, reply quotes, delivery status ticks, and the meta
+ * row; media/audio attachments are rendered by internal sub-components.
+ */
+class MlvChatMessage {
+    /** The message to render. */
+    message = input.required(/* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "message" }] : /* istanbul ignore next */ []));
+    /** True when authored by the current user (right-aligned, accent bubble, status ticks). */
+    own = input(false, { ...(ngDevMode ? { debugName: "own" } : /* istanbul ignore next */ {}), transform: coerceBooleanProperty });
+    /** Position inside the consecutive-author group; drives corner-tail radii. */
+    groupPosition = input('single', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "groupPosition" }] : /* istanbul ignore next */ []));
+    /** Condensed quote rendering (inside a reply block): clamped text, no meta row. */
+    quote = input(false, { ...(ngDevMode ? { debugName: "quote" } : /* istanbul ignore next */ {}), transform: coerceBooleanProperty });
+    /** Emits when the retry button of a failed own message is activated. */
+    retry = output();
+    /** Emits the clicked media attachment (image/video cell). */
+    mediaClick = output();
+    /** Emits the embedded replied-to message when the quote block is activated. */
+    replyClick = output();
+    /** @internal Chat i18n strings. */
+    _i18n = inject(MLV_CHAT_I18N);
+    /** @private Users map provided by the surrounding `mlv-chat`; null when standalone. */
+    _users = inject(MLV_CHAT_USERS, { optional: true });
+    /** @internal Custom message-type templates provided by the surrounding `mlv-chat`. */
+    _defs = inject(MLV_CHAT_MESSAGE_DEFS, { optional: true });
+    /** @internal Normalized timestamp for the DatePipe. */
+    _date = computed(() => toChatDate(this.message().timestamp), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_date" }] : /* istanbul ignore next */ []));
+    /** @internal Image/gif/video attachments, rendered by the media grid. */
+    _mediaAttachments = computed(() => (this.message().attachments ?? []).filter((a) => a.kind !== 'audio'), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_mediaAttachments" }] : /* istanbul ignore next */ []));
+    /** @internal Audio attachments, each rendered by its own player. */
+    _audioAttachments = computed(() => (this.message().attachments ?? []).filter((a) => a.kind === 'audio'), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_audioAttachments" }] : /* istanbul ignore next */ []));
+    /** @internal Formats seconds as `m:ss` for the condensed audio chip in quote mode. */
+    _formatDuration = formatChatDuration;
+    /** @internal Template for this message's custom type, if registered. */
+    _typeTemplate = computed(() => {
+        const type = this.message().type;
+        return type ? (this._defs?.().get(type)?.templateRef ?? null) : null;
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_typeTemplate" }] : /* istanbul ignore next */ []));
+    /** @internal Resolves an author display name from the container-provided users map. */
+    _userName(id) {
+        return this._users?.().get(id)?.name ?? '';
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: MlvChatMessage, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.7", type: MlvChatMessage, isStandalone: true, selector: "mlv-chat-message", inputs: { message: { classPropertyName: "message", publicName: "message", isSignal: true, isRequired: true, transformFunction: null }, own: { classPropertyName: "own", publicName: "own", isSignal: true, isRequired: false, transformFunction: null }, groupPosition: { classPropertyName: "groupPosition", publicName: "groupPosition", isSignal: true, isRequired: false, transformFunction: null }, quote: { classPropertyName: "quote", publicName: "quote", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { retry: "retry", mediaClick: "mediaClick", replyClick: "replyClick" }, host: { properties: { "class.mlv-chat-message--own": "own()", "class.mlv-chat-message--other": "!own()", "class": "\"mlv-chat-message--pos-\" + groupPosition()", "class.mlv-chat-message--failed": "message().status === \"failed\"", "class.mlv-chat-message--quote": "quote()" }, classAttribute: "mlv-chat-message" }, ngImport: i0, template: "@if (_typeTemplate(); as tpl) {\n<ng-container\n  [ngTemplateOutlet]=\"tpl\"\n  [ngTemplateOutletContext]=\"{\n      $implicit: message(),\n      isOwn: own(),\n      groupPosition: groupPosition(),\n      quote: quote(),\n    }\"\n/>\n} @else { @if (quote()) {\n<span class=\"mlv-chat-message__quote-author\"\n  >{{ _userName(message().authorId) }}</span\n>\n@if (message().replyTo) {\n<svg\n  class=\"mlv-chat-message__reply-marker\"\n  lucideCornerUpLeft\n  [size]=\"12\"\n  aria-hidden=\"true\"\n/>\n} } @else if (message().replyTo; as reply) {\n<button\n  type=\"button\"\n  class=\"mlv-chat-message__reply\"\n  (click)=\"replyClick.emit(reply)\"\n>\n  <mlv-chat-message [message]=\"reply\" quote />\n</button>\n} @if (_mediaAttachments().length) {\n<mlv-chat-media-grid\n  [attachments]=\"_mediaAttachments()\"\n  [quote]=\"quote()\"\n  (mediaClick)=\"mediaClick.emit($event)\"\n/>\n} @if (quote()) { @if (_audioAttachments()[0]; as audio) {\n<span class=\"mlv-chat-message__quote-audio\">\n  <svg lucideMusic [size]=\"12\" aria-hidden=\"true\" />\n  {{ _formatDuration(audio.duration ?? 0) }}\n</span>\n} } @else { @for (audio of _audioAttachments(); track audio.id) {\n<mlv-chat-audio [attachment]=\"audio\" />\n} } @if (message().text; as text) {\n<span class=\"mlv-chat-message__text\">{{ text }}</span>\n} } @if (!quote()) {\n<span class=\"mlv-chat-message__meta\">\n  @if (own() && message().status === 'failed') {\n  <button type=\"button\" class=\"mlv-chat-message__retry\" (click)=\"retry.emit()\">\n    <svg lucideCircleAlert [size]=\"14\" aria-hidden=\"true\" />\n    {{ _i18n().retry }}\n  </button>\n  }\n  <time class=\"mlv-chat-message__time\" [attr.datetime]=\"_date().toISOString()\">\n    {{ _date() | date: 'shortTime' }}\n  </time>\n  @if (own() && message().status; as status) { @switch (status) { @case\n  ('sending') {\n  <svg\n    class=\"mlv-chat-message__status mlv-chat-message__status--sending\"\n    lucideClock\n    [size]=\"14\"\n    aria-hidden=\"true\"\n  />\n  } @case ('sent') {\n  <svg\n    class=\"mlv-chat-message__status mlv-chat-message__status--sent\"\n    lucideCheck\n    [size]=\"14\"\n    aria-hidden=\"true\"\n  />\n  } @case ('delivered') {\n  <svg\n    class=\"mlv-chat-message__status mlv-chat-message__status--delivered\"\n    lucideCheckCheck\n    [size]=\"14\"\n    aria-hidden=\"true\"\n  />\n  } @case ('read') {\n  <svg\n    class=\"mlv-chat-message__status mlv-chat-message__status--read\"\n    lucideCheckCheck\n    [size]=\"14\"\n    aria-hidden=\"true\"\n  />\n  } } }\n</span>\n}\n", styles: ["@charset \"UTF-8\";@layer mlv.components{.mlv-chat-message{box-sizing:border-box;padding:.5rem .75rem;margin:0;font-family:var(--mlv-typography-family-text);font-size:var(--mlv-typography-body-m-size)}.mlv-chat-message *{box-sizing:border-box}.mlv-chat-message{--mlv-chat-message-bg: var(--mlv-background-neutral-1);--mlv-chat-message-color: var(--mlv-text-primary);--mlv-chat-message-radius: var(--mlv-radius-l);--mlv-chat-message-tail-radius: var(--mlv-radius-xs);display:inline-flex;flex-direction:column;gap:.25rem;width:fit-content;max-width:100%;background-color:var(--mlv-chat-message-bg);color:var(--mlv-chat-message-color);border-radius:var(--mlv-chat-message-radius);overflow-wrap:anywhere}.mlv-chat-message--own{--mlv-chat-message-bg: var(--mlv-background-accent-1);--mlv-chat-message-color: var(--mlv-text-primary-on-accent-1)}.mlv-chat-message__reply{--mlv-chat-quote-fg: var(--mlv-chat-message-color);--mlv-chat-quote-accent: var(--mlv-background-accent-1);--mlv-chat-quote-author: var(--mlv-text-action);--mlv-chat-quote-surface: color-mix( in srgb, var(--mlv-chat-message-color) 8%, transparent );--mlv-chat-quote-surface-hover: color-mix( in srgb, var(--mlv-chat-message-color) 14%, transparent );display:flex;width:100%;margin:0;border:0;border-radius:var(--mlv-radius-s);padding:0;background-color:var(--mlv-chat-quote-surface);color:inherit;font:inherit;text-align:start;cursor:pointer;overflow:hidden;transition:background-color var(--mlv-duration-fast) var(--mlv-ease-default)}.mlv-chat-message__reply:hover{background-color:var(--mlv-chat-quote-surface-hover)}.mlv-chat-message__reply:focus-visible{outline:var(--mlv-stroke-width-medium) solid var(--mlv-border-focus);outline-offset:var(--mlv-focus-ring-offset)}.mlv-chat-message--own .mlv-chat-message__reply{--mlv-chat-quote-accent: var(--mlv-text-primary-on-accent-1);--mlv-chat-quote-author: var(--mlv-text-primary-on-accent-1);--mlv-border-focus: var(--mlv-text-primary-on-accent-1)}.mlv-chat-message--other.mlv-chat-message--pos-first{border-end-start-radius:var(--mlv-chat-message-tail-radius)}.mlv-chat-message--other.mlv-chat-message--pos-middle{border-start-start-radius:var(--mlv-chat-message-tail-radius);border-end-start-radius:var(--mlv-chat-message-tail-radius)}.mlv-chat-message--other.mlv-chat-message--pos-last{border-start-start-radius:var(--mlv-chat-message-tail-radius)}.mlv-chat-message--own.mlv-chat-message--pos-first{border-end-end-radius:var(--mlv-chat-message-tail-radius)}.mlv-chat-message--own.mlv-chat-message--pos-middle{border-start-end-radius:var(--mlv-chat-message-tail-radius);border-end-end-radius:var(--mlv-chat-message-tail-radius)}.mlv-chat-message--own.mlv-chat-message--pos-last{border-start-end-radius:var(--mlv-chat-message-tail-radius)}.mlv-chat-message--failed{--mlv-chat-message-bg: var(--mlv-background-danger-1-pale);--mlv-chat-message-color: var(--mlv-text-negative)}.mlv-chat-message__text{white-space:pre-wrap;text-wrap:pretty;color:var(--mlv-chat-message-color);font-size:inherit}.mlv-chat-message__meta{display:inline-flex;align-items:center;gap:.25rem;align-self:flex-end;font-size:var(--mlv-typography-body-s-size);color:var(--mlv-chat-message-color);opacity:.7}.mlv-chat-message__time,.mlv-chat-message__status{color:var(--mlv-chat-message-color);font-size:inherit}.mlv-chat-message__status--read{color:var(--mlv-chat-message-color);opacity:1}.mlv-chat-message__retry{display:inline-flex;align-items:center;gap:.25rem;background:none;border:none;color:var(--mlv-text-negative);cursor:pointer;font-size:var(--mlv-typography-body-s-size);padding:0}.mlv-chat-message__retry:focus-visible{outline:var(--mlv-stroke-width-medium) solid var(--mlv-border-focus);outline-offset:var(--mlv-focus-ring-offset)}.mlv-chat-message--quote{--mlv-chat-message-bg: transparent;--mlv-chat-message-color: var(--mlv-chat-quote-fg, var(--mlv-text-primary));flex:1 1 auto;gap:.125rem;min-width:0;border-inline-start:.1875rem solid var(--mlv-chat-quote-accent, var(--mlv-background-accent-1));border-radius:0;padding:var(--mlv-spacing-1) var(--mlv-spacing-2);font-size:var(--mlv-typography-body-s-size)}.mlv-chat-message--quote .mlv-chat-message__text{display:-webkit-box;-webkit-line-clamp:2;line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;opacity:.85}.mlv-chat-message__quote-author{display:inline-flex;align-items:center;gap:var(--mlv-spacing-1);color:var(--mlv-chat-quote-author, var(--mlv-text-action));font-weight:var(--mlv-font-weight-semibold)}.mlv-chat-message__reply-marker{flex:none;color:var(--mlv-chat-quote-author, var(--mlv-text-action));opacity:.7}.mlv-chat-message__quote-audio{display:inline-flex;align-items:center;gap:var(--mlv-spacing-1);color:var(--mlv-chat-quote-fg, var(--mlv-text-primary));opacity:.85}@media(prefers-reduced-motion:reduce){.mlv-chat-message,.mlv-chat-message *,.mlv-chat-message:before,.mlv-chat-message:after,[class^=mlv-chat-message__],[class*=\" mlv-chat-message__\"],[class^=mlv-chat-message--],[class*=\" mlv-chat-message--\"]{scroll-behavior:auto!important;animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:var(--mlv-duration-instant)!important}}}\n"], dependencies: [{ kind: "component", type: MlvChatMessage, selector: "mlv-chat-message", inputs: ["message", "own", "groupPosition", "quote"], outputs: ["retry", "mediaClick", "replyClick"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: LucideCheck, selector: "svg[lucideCheck]" }, { kind: "component", type: LucideCheckCheck, selector: "svg[lucideCheckCheck]" }, { kind: "component", type: LucideCircleAlert, selector: "svg[lucideCircleAlert], svg[lucideAlertCircle]" }, { kind: "component", type: LucideClock, selector: "svg[lucideClock]" }, { kind: "component", type: LucideCornerUpLeft, selector: "svg[lucideCornerUpLeft]" }, { kind: "component", type: LucideMusic, selector: "svg[lucideMusic]" }, { kind: "component", type: MlvChatMediaGrid, selector: "mlv-chat-media-grid", inputs: ["attachments", "quote"], outputs: ["mediaClick"] }, { kind: "component", type: MlvChatAudio, selector: "mlv-chat-audio", inputs: ["attachment"] }, { kind: "pipe", type: DatePipe, name: "date" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: MlvChatMessage, decorators: [{
+            type: Component,
+            args: [{ selector: 'mlv-chat-message', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, imports: [
+                        DatePipe,
+                        NgTemplateOutlet,
+                        LucideCheck,
+                        LucideCheckCheck,
+                        LucideCircleAlert,
+                        LucideClock,
+                        LucideCornerUpLeft,
+                        LucideMusic,
+                        MlvChatMediaGrid,
+                        MlvChatAudio,
+                    ], host: {
+                        class: 'mlv-chat-message',
+                        '[class.mlv-chat-message--own]': 'own()',
+                        '[class.mlv-chat-message--other]': '!own()',
+                        '[class]': '"mlv-chat-message--pos-" + groupPosition()',
+                        '[class.mlv-chat-message--failed]': 'message().status === "failed"',
+                        '[class.mlv-chat-message--quote]': 'quote()',
+                    }, template: "@if (_typeTemplate(); as tpl) {\n<ng-container\n  [ngTemplateOutlet]=\"tpl\"\n  [ngTemplateOutletContext]=\"{\n      $implicit: message(),\n      isOwn: own(),\n      groupPosition: groupPosition(),\n      quote: quote(),\n    }\"\n/>\n} @else { @if (quote()) {\n<span class=\"mlv-chat-message__quote-author\"\n  >{{ _userName(message().authorId) }}</span\n>\n@if (message().replyTo) {\n<svg\n  class=\"mlv-chat-message__reply-marker\"\n  lucideCornerUpLeft\n  [size]=\"12\"\n  aria-hidden=\"true\"\n/>\n} } @else if (message().replyTo; as reply) {\n<button\n  type=\"button\"\n  class=\"mlv-chat-message__reply\"\n  (click)=\"replyClick.emit(reply)\"\n>\n  <mlv-chat-message [message]=\"reply\" quote />\n</button>\n} @if (_mediaAttachments().length) {\n<mlv-chat-media-grid\n  [attachments]=\"_mediaAttachments()\"\n  [quote]=\"quote()\"\n  (mediaClick)=\"mediaClick.emit($event)\"\n/>\n} @if (quote()) { @if (_audioAttachments()[0]; as audio) {\n<span class=\"mlv-chat-message__quote-audio\">\n  <svg lucideMusic [size]=\"12\" aria-hidden=\"true\" />\n  {{ _formatDuration(audio.duration ?? 0) }}\n</span>\n} } @else { @for (audio of _audioAttachments(); track audio.id) {\n<mlv-chat-audio [attachment]=\"audio\" />\n} } @if (message().text; as text) {\n<span class=\"mlv-chat-message__text\">{{ text }}</span>\n} } @if (!quote()) {\n<span class=\"mlv-chat-message__meta\">\n  @if (own() && message().status === 'failed') {\n  <button type=\"button\" class=\"mlv-chat-message__retry\" (click)=\"retry.emit()\">\n    <svg lucideCircleAlert [size]=\"14\" aria-hidden=\"true\" />\n    {{ _i18n().retry }}\n  </button>\n  }\n  <time class=\"mlv-chat-message__time\" [attr.datetime]=\"_date().toISOString()\">\n    {{ _date() | date: 'shortTime' }}\n  </time>\n  @if (own() && message().status; as status) { @switch (status) { @case\n  ('sending') {\n  <svg\n    class=\"mlv-chat-message__status mlv-chat-message__status--sending\"\n    lucideClock\n    [size]=\"14\"\n    aria-hidden=\"true\"\n  />\n  } @case ('sent') {\n  <svg\n    class=\"mlv-chat-message__status mlv-chat-message__status--sent\"\n    lucideCheck\n    [size]=\"14\"\n    aria-hidden=\"true\"\n  />\n  } @case ('delivered') {\n  <svg\n    class=\"mlv-chat-message__status mlv-chat-message__status--delivered\"\n    lucideCheckCheck\n    [size]=\"14\"\n    aria-hidden=\"true\"\n  />\n  } @case ('read') {\n  <svg\n    class=\"mlv-chat-message__status mlv-chat-message__status--read\"\n    lucideCheckCheck\n    [size]=\"14\"\n    aria-hidden=\"true\"\n  />\n  } } }\n</span>\n}\n", styles: ["@charset \"UTF-8\";@layer mlv.components{.mlv-chat-message{box-sizing:border-box;padding:.5rem .75rem;margin:0;font-family:var(--mlv-typography-family-text);font-size:var(--mlv-typography-body-m-size)}.mlv-chat-message *{box-sizing:border-box}.mlv-chat-message{--mlv-chat-message-bg: var(--mlv-background-neutral-1);--mlv-chat-message-color: var(--mlv-text-primary);--mlv-chat-message-radius: var(--mlv-radius-l);--mlv-chat-message-tail-radius: var(--mlv-radius-xs);display:inline-flex;flex-direction:column;gap:.25rem;width:fit-content;max-width:100%;background-color:var(--mlv-chat-message-bg);color:var(--mlv-chat-message-color);border-radius:var(--mlv-chat-message-radius);overflow-wrap:anywhere}.mlv-chat-message--own{--mlv-chat-message-bg: var(--mlv-background-accent-1);--mlv-chat-message-color: var(--mlv-text-primary-on-accent-1)}.mlv-chat-message__reply{--mlv-chat-quote-fg: var(--mlv-chat-message-color);--mlv-chat-quote-accent: var(--mlv-background-accent-1);--mlv-chat-quote-author: var(--mlv-text-action);--mlv-chat-quote-surface: color-mix( in srgb, var(--mlv-chat-message-color) 8%, transparent );--mlv-chat-quote-surface-hover: color-mix( in srgb, var(--mlv-chat-message-color) 14%, transparent );display:flex;width:100%;margin:0;border:0;border-radius:var(--mlv-radius-s);padding:0;background-color:var(--mlv-chat-quote-surface);color:inherit;font:inherit;text-align:start;cursor:pointer;overflow:hidden;transition:background-color var(--mlv-duration-fast) var(--mlv-ease-default)}.mlv-chat-message__reply:hover{background-color:var(--mlv-chat-quote-surface-hover)}.mlv-chat-message__reply:focus-visible{outline:var(--mlv-stroke-width-medium) solid var(--mlv-border-focus);outline-offset:var(--mlv-focus-ring-offset)}.mlv-chat-message--own .mlv-chat-message__reply{--mlv-chat-quote-accent: var(--mlv-text-primary-on-accent-1);--mlv-chat-quote-author: var(--mlv-text-primary-on-accent-1);--mlv-border-focus: var(--mlv-text-primary-on-accent-1)}.mlv-chat-message--other.mlv-chat-message--pos-first{border-end-start-radius:var(--mlv-chat-message-tail-radius)}.mlv-chat-message--other.mlv-chat-message--pos-middle{border-start-start-radius:var(--mlv-chat-message-tail-radius);border-end-start-radius:var(--mlv-chat-message-tail-radius)}.mlv-chat-message--other.mlv-chat-message--pos-last{border-start-start-radius:var(--mlv-chat-message-tail-radius)}.mlv-chat-message--own.mlv-chat-message--pos-first{border-end-end-radius:var(--mlv-chat-message-tail-radius)}.mlv-chat-message--own.mlv-chat-message--pos-middle{border-start-end-radius:var(--mlv-chat-message-tail-radius);border-end-end-radius:var(--mlv-chat-message-tail-radius)}.mlv-chat-message--own.mlv-chat-message--pos-last{border-start-end-radius:var(--mlv-chat-message-tail-radius)}.mlv-chat-message--failed{--mlv-chat-message-bg: var(--mlv-background-danger-1-pale);--mlv-chat-message-color: var(--mlv-text-negative)}.mlv-chat-message__text{white-space:pre-wrap;text-wrap:pretty;color:var(--mlv-chat-message-color);font-size:inherit}.mlv-chat-message__meta{display:inline-flex;align-items:center;gap:.25rem;align-self:flex-end;font-size:var(--mlv-typography-body-s-size);color:var(--mlv-chat-message-color);opacity:.7}.mlv-chat-message__time,.mlv-chat-message__status{color:var(--mlv-chat-message-color);font-size:inherit}.mlv-chat-message__status--read{color:var(--mlv-chat-message-color);opacity:1}.mlv-chat-message__retry{display:inline-flex;align-items:center;gap:.25rem;background:none;border:none;color:var(--mlv-text-negative);cursor:pointer;font-size:var(--mlv-typography-body-s-size);padding:0}.mlv-chat-message__retry:focus-visible{outline:var(--mlv-stroke-width-medium) solid var(--mlv-border-focus);outline-offset:var(--mlv-focus-ring-offset)}.mlv-chat-message--quote{--mlv-chat-message-bg: transparent;--mlv-chat-message-color: var(--mlv-chat-quote-fg, var(--mlv-text-primary));flex:1 1 auto;gap:.125rem;min-width:0;border-inline-start:.1875rem solid var(--mlv-chat-quote-accent, var(--mlv-background-accent-1));border-radius:0;padding:var(--mlv-spacing-1) var(--mlv-spacing-2);font-size:var(--mlv-typography-body-s-size)}.mlv-chat-message--quote .mlv-chat-message__text{display:-webkit-box;-webkit-line-clamp:2;line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;opacity:.85}.mlv-chat-message__quote-author{display:inline-flex;align-items:center;gap:var(--mlv-spacing-1);color:var(--mlv-chat-quote-author, var(--mlv-text-action));font-weight:var(--mlv-font-weight-semibold)}.mlv-chat-message__reply-marker{flex:none;color:var(--mlv-chat-quote-author, var(--mlv-text-action));opacity:.7}.mlv-chat-message__quote-audio{display:inline-flex;align-items:center;gap:var(--mlv-spacing-1);color:var(--mlv-chat-quote-fg, var(--mlv-text-primary));opacity:.85}@media(prefers-reduced-motion:reduce){.mlv-chat-message,.mlv-chat-message *,.mlv-chat-message:before,.mlv-chat-message:after,[class^=mlv-chat-message__],[class*=\" mlv-chat-message__\"],[class^=mlv-chat-message--],[class*=\" mlv-chat-message--\"]{scroll-behavior:auto!important;animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:var(--mlv-duration-instant)!important}}}\n"] }]
+        }], propDecorators: { message: [{ type: i0.Input, args: [{ isSignal: true, alias: "message", required: true }] }], own: [{ type: i0.Input, args: [{ isSignal: true, alias: "own", required: false }] }], groupPosition: [{ type: i0.Input, args: [{ isSignal: true, alias: "groupPosition", required: false }] }], quote: [{ type: i0.Input, args: [{ isSignal: true, alias: "quote", required: false }] }], retry: [{ type: i0.Output, args: ["retry"] }], mediaClick: [{ type: i0.Output, args: ["mediaClick"] }], replyClick: [{ type: i0.Output, args: ["replyClick"] }] } });
+
+/**
+ * Internal default renderer of a date separator. Shows Today/Yesterday for the
+ * two most recent days and a formatted date otherwise. Consumers override the
+ * whole slot with `[mlvChatDateDef]`.
+ */
+class MlvChatDate {
+    /** Start of the calendar day this separator introduces. */
+    date = input.required(/* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "date" }] : /* istanbul ignore next */ []));
+    /** @internal Chat i18n strings. */
+    _i18n = inject(MLV_CHAT_I18N);
+    /** @internal Relative label, or null when the template should format the date. */
+    _label = computed(() => {
+        const date = this.date();
+        const now = new Date();
+        if (isSameChatDay(date, now))
+            return this._i18n().today;
+        const yesterday = new Date(now.getFullYear(), now.getMonth(), now.getDate() - 1);
+        return isSameChatDay(date, yesterday) ? this._i18n().yesterday : null;
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_label" }] : /* istanbul ignore next */ []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: MlvChatDate, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.7", type: MlvChatDate, isStandalone: true, selector: "mlv-chat-date", inputs: { date: { classPropertyName: "date", publicName: "date", isSignal: true, isRequired: true, transformFunction: null } }, host: { classAttribute: "mlv-chat-date" }, ngImport: i0, template: `
+    @if (_label(); as label) {
+      {{ label }}
+    } @else {
+      {{ date() | date: 'mediumDate' }}
+    }
+  `, isInline: true, styles: ["@layer mlv.components{.mlv-chat-date{box-sizing:border-box;padding:.125rem .625rem;margin:0;font-family:var(--mlv-typography-family-text);font-size:var(--mlv-typography-body-s-size)}.mlv-chat-date *{box-sizing:border-box}.mlv-chat-date{display:inline-block;border-radius:var(--mlv-radius-full);background-color:var(--mlv-background-neutral-1);color:var(--mlv-text-secondary)}}\n"], dependencies: [{ kind: "pipe", type: DatePipe, name: "date" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: MlvChatDate, decorators: [{
+            type: Component,
+            args: [{ selector: 'mlv-chat-date', template: `
+    @if (_label(); as label) {
+      {{ label }}
+    } @else {
+      {{ date() | date: 'mediumDate' }}
+    }
+  `, encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, imports: [DatePipe], host: { class: 'mlv-chat-date' }, styles: ["@layer mlv.components{.mlv-chat-date{box-sizing:border-box;padding:.125rem .625rem;margin:0;font-family:var(--mlv-typography-family-text);font-size:var(--mlv-typography-body-s-size)}.mlv-chat-date *{box-sizing:border-box}.mlv-chat-date{display:inline-block;border-radius:var(--mlv-radius-full);background-color:var(--mlv-background-neutral-1);color:var(--mlv-text-secondary)}}\n"] }]
+        }], propDecorators: { date: [{ type: i0.Input, args: [{ isSignal: true, alias: "date", required: true }] }] } });
+
+/**
+ * Internal three-dot typing bubble. Rendered by `mlv-chat` at the bottom of the
+ * transcript while `typingUsers` is non-empty.
+ */
+class MlvChatTyping {
+    /** Users currently composing a message. */
+    users = input([], /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "users" }] : /* istanbul ignore next */ []));
+    /** @internal Chat i18n strings. */
+    _i18n = inject(MLV_CHAT_I18N);
+    /** @internal Accessible label naming the typing users when they are known. */
+    _ariaLabel = computed(() => {
+        const names = this.users()
+            .map((u) => u.name)
+            .filter(Boolean);
+        return names.length ? names.join(', ') : null;
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_ariaLabel" }] : /* istanbul ignore next */ []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: MlvChatTyping, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.0.7", type: MlvChatTyping, isStandalone: true, selector: "mlv-chat-typing", inputs: { users: { classPropertyName: "users", publicName: "users", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "attr.aria-label": "_ariaLabel()" }, classAttribute: "mlv-chat-typing" }, ngImport: i0, template: `
+    <span class="mlv-chat-typing__dots" aria-hidden="true">
+      <span class="mlv-chat-typing__dot"></span>
+      <span class="mlv-chat-typing__dot"></span>
+      <span class="mlv-chat-typing__dot"></span>
+    </span>
+    <span class="mlv-chat-typing__label">
+      {{ _i18n().typing | mlvTranslate: { count: users().length } }}
+    </span>
+  `, isInline: true, styles: ["@layer mlv.components{.mlv-chat-typing{box-sizing:border-box;padding:.375rem .75rem;margin:0;font-family:var(--mlv-typography-family-text);font-size:var(--mlv-typography-body-s-size)}.mlv-chat-typing *{box-sizing:border-box}.mlv-chat-typing{display:inline-flex;align-items:center;gap:.5rem;border-radius:var(--mlv-radius-l);background-color:var(--mlv-background-neutral-1);color:var(--mlv-text-secondary)}.mlv-chat-typing__dots{display:inline-flex;gap:.1875rem}.mlv-chat-typing__dot{inline-size:.375rem;block-size:.375rem;border-radius:var(--mlv-radius-full);background-color:currentcolor;animation:mlv-chat-typing-bounce var(--mlv-duration-slower) var(--mlv-ease-in-out) infinite}.mlv-chat-typing__dot:nth-child(2){animation-delay:var(--mlv-duration-fast)}.mlv-chat-typing__dot:nth-child(3){animation-delay:var(--mlv-duration-normal)}@keyframes mlv-chat-typing-bounce{0%,60%,to{opacity:.35;transform:translateY(0)}30%{opacity:1;transform:translateY(-.1875rem)}}@media(prefers-reduced-motion:reduce){.mlv-chat-typing,.mlv-chat-typing *,.mlv-chat-typing:before,.mlv-chat-typing:after,[class^=mlv-chat-typing__],[class*=\" mlv-chat-typing__\"],[class^=mlv-chat-typing--],[class*=\" mlv-chat-typing--\"]{scroll-behavior:auto!important;animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:var(--mlv-duration-instant)!important}}}\n"], dependencies: [{ kind: "pipe", type: MlvTranslatePipe, name: "mlvTranslate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: MlvChatTyping, decorators: [{
+            type: Component,
+            args: [{ selector: 'mlv-chat-typing', template: `
+    <span class="mlv-chat-typing__dots" aria-hidden="true">
+      <span class="mlv-chat-typing__dot"></span>
+      <span class="mlv-chat-typing__dot"></span>
+      <span class="mlv-chat-typing__dot"></span>
+    </span>
+    <span class="mlv-chat-typing__label">
+      {{ _i18n().typing | mlvTranslate: { count: users().length } }}
+    </span>
+  `, encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, imports: [MlvTranslatePipe], host: {
+                        class: 'mlv-chat-typing',
+                        '[attr.aria-label]': '_ariaLabel()',
+                    }, styles: ["@layer mlv.components{.mlv-chat-typing{box-sizing:border-box;padding:.375rem .75rem;margin:0;font-family:var(--mlv-typography-family-text);font-size:var(--mlv-typography-body-s-size)}.mlv-chat-typing *{box-sizing:border-box}.mlv-chat-typing{display:inline-flex;align-items:center;gap:.5rem;border-radius:var(--mlv-radius-l);background-color:var(--mlv-background-neutral-1);color:var(--mlv-text-secondary)}.mlv-chat-typing__dots{display:inline-flex;gap:.1875rem}.mlv-chat-typing__dot{inline-size:.375rem;block-size:.375rem;border-radius:var(--mlv-radius-full);background-color:currentcolor;animation:mlv-chat-typing-bounce var(--mlv-duration-slower) var(--mlv-ease-in-out) infinite}.mlv-chat-typing__dot:nth-child(2){animation-delay:var(--mlv-duration-fast)}.mlv-chat-typing__dot:nth-child(3){animation-delay:var(--mlv-duration-normal)}@keyframes mlv-chat-typing-bounce{0%,60%,to{opacity:.35;transform:translateY(0)}30%{opacity:1;transform:translateY(-.1875rem)}}@media(prefers-reduced-motion:reduce){.mlv-chat-typing,.mlv-chat-typing *,.mlv-chat-typing:before,.mlv-chat-typing:after,[class^=mlv-chat-typing__],[class*=\" mlv-chat-typing__\"],[class^=mlv-chat-typing--],[class*=\" mlv-chat-typing--\"]{scroll-behavior:auto!important;animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:var(--mlv-duration-instant)!important}}}\n"] }]
+        }], propDecorators: { users: [{ type: i0.Input, args: [{ isSignal: true, alias: "users", required: false }] }] } });
+
+/**
+ * Replaces the default author name shown above a group of other-authored
+ * messages — for example to render an avatar plus a role badge.
+ *
+ * @example
+ * <ng-template mlvChatAuthorDef let-user>
+ *   <mlv-avatar size="xs" [name]="user.name" [src]="user.avatarSrc ?? null" />
+ *   {{ user.name }}
+ * </ng-template>
+ */
+class MlvChatAuthorDef {
+    /** The template rendered in the author slot. */
+    templateRef = inject(TemplateRef);
+    /** Type guard giving template variables their concrete types. */
+    static ngTemplateContextGuard(_dir, _ctx) {
+        return true;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: MlvChatAuthorDef, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0.7", type: MlvChatAuthorDef, isStandalone: true, selector: "[mlvChatAuthorDef]", ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: MlvChatAuthorDef, decorators: [{
+            type: Directive,
+            args: [{ selector: '[mlvChatAuthorDef]' }]
+        }] });
+
+/**
+ * Replaces the default Today/Yesterday/date pill rendered between messages of
+ * different calendar days.
+ *
+ * @example
+ * <ng-template mlvChatDateDef let-date>{{ date | date: 'fullDate' }}</ng-template>
+ */
+class MlvChatDateDef {
+    /** The template rendered for each date separator. */
+    templateRef = inject(TemplateRef);
+    /** Type guard giving template variables their concrete types. */
+    static ngTemplateContextGuard(_dir, _ctx) {
+        return true;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: MlvChatDateDef, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0.7", type: MlvChatDateDef, isStandalone: true, selector: "[mlvChatDateDef]", ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: MlvChatDateDef, decorators: [{
+            type: Directive,
+            args: [{ selector: '[mlvChatDateDef]' }]
+        }] });
+
+/**
+ * Marks an `<ng-template>` as the renderer for chat messages whose `type`
+ * matches `mlvChatMessageDefType`. The template replaces the bubble body;
+ * alignment, meta row, and animations stay owned by the chat.
+ *
+ * @example
+ * <ng-template mlvChatMessageDef mlvChatMessageDefType="poll" let-message let-isOwn="isOwn">
+ *   <app-poll [poll]="message.data" />
+ * </ng-template>
+ */
+class MlvChatMessageDef {
+    /** The message `type` this template renders. Templates without a type are ignored. */
+    mlvChatMessageDefType = input('', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "mlvChatMessageDefType" }] : /* istanbul ignore next */ []));
+    /** The template rendered for matching messages. */
+    templateRef = inject(TemplateRef);
+    /** Type guard giving template variables their concrete types. */
+    static ngTemplateContextGuard(_dir, _ctx) {
+        return true;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: MlvChatMessageDef, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.0.7", type: MlvChatMessageDef, isStandalone: true, selector: "[mlvChatMessageDef]", inputs: { mlvChatMessageDefType: { classPropertyName: "mlvChatMessageDefType", publicName: "mlvChatMessageDefType", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: MlvChatMessageDef, decorators: [{
+            type: Directive,
+            args: [{ selector: '[mlvChatMessageDef]' }]
+        }], propDecorators: { mlvChatMessageDefType: [{ type: i0.Input, args: [{ isSignal: true, alias: "mlvChatMessageDefType", required: false }] }] } });
+
+/** Skeleton rows rendered while the first page loads. */
+const SKELETON_ROWS = [
+    { own: false, width: '55%' },
+    { own: false, width: '35%' },
+    { own: true, width: '45%' },
+    { own: false, width: '65%' },
+    { own: true, width: '30%' },
+    { own: false, width: '50%' },
+];
+/**
+ * Scrollable chat surface. Renders an oldest→newest `messages` array as author
+ * groups with date separators, delivery statuses, replies, media, and audio.
+ * Grouping is computed internally — consumers only supply flat data.
+ */
+class MlvChat {
+    /** @private Distance from the bottom under which the view counts as pinned. */
+    static _PIN_THRESHOLD = 48;
+    /** @private Distance from the top under which the window grows / `loadOlder` fires. */
+    static _TOP_THRESHOLD = 150;
+    /** @private Number of messages the render window grows by per step. */
+    static _WINDOW_STEP = 50;
+    /** Messages ordered oldest → newest. */
+    messages = input.required(/* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "messages" }] : /* istanbul ignore next */ []));
+    /** Id of the current user; messages authored by it render as own messages. */
+    selfId = input.required(/* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "selfId" }] : /* istanbul ignore next */ []));
+    /** Known participants, used for avatars and author names. */
+    users = input([], /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "users" }] : /* istanbul ignore next */ []));
+    /** Renders skeleton bubbles instead of content while the first page loads. */
+    loading = input(false, { ...(ngDevMode ? { debugName: "loading" } : /* istanbul ignore next */ {}), transform: coerceBooleanProperty });
+    /** Shows the top loader while an older page is being fetched. */
+    loadingOlder = input(false, { ...(ngDevMode ? { debugName: "loadingOlder" } : /* istanbul ignore next */ {}), transform: coerceBooleanProperty });
+    /** Whether more history exists; gates the `loadOlder` output. */
+    hasOlder = input(false, { ...(ngDevMode ? { debugName: "hasOlder" } : /* istanbul ignore next */ {}), transform: coerceBooleanProperty });
+    /** Ids of users currently composing a message. */
+    typingUsers = input([], /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "typingUsers" }] : /* istanbul ignore next */ []));
+    /** Maximum gap in minutes between messages of one author group. */
+    groupWindow = input(5, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "groupWindow" }] : /* istanbul ignore next */ []));
+    /** Author slot visibility; `'auto'` shows it once more than two users are known. */
+    showAuthors = input('auto', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "showAuthors" }] : /* istanbul ignore next */ []));
+    /** Whether calendar-day separators are rendered. */
+    dateSeparators = input(true, { ...(ngDevMode ? { debugName: "dateSeparators" } : /* istanbul ignore next */ {}), transform: coerceBooleanProperty });
+    /** Number of newest messages kept in the DOM. */
+    windowSize = input(150, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "windowSize" }] : /* istanbul ignore next */ []));
+    /** Emits when the user scrolls past the oldest rendered message and more history exists. */
+    loadOlder = output();
+    /** Emits the failed message whose retry action was activated. */
+    retry = output();
+    /** Emits the message and attachment of an activated media cell. */
+    mediaClick = output();
+    /** Emits the message and its embedded original when a reply quote is activated. */
+    replyClick = output();
+    /** @internal Chat i18n strings. */
+    _i18n = inject(MLV_CHAT_I18N);
+    /** @internal Author slot template, when a consumer provides one. */
+    authorDef = contentChild(MlvChatAuthorDef, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "authorDef" }] : /* istanbul ignore next */ []));
+    /** @internal Date separator template, when a consumer provides one. */
+    dateDef = contentChild(MlvChatDateDef, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "dateDef" }] : /* istanbul ignore next */ []));
+    /** @private Custom message-type templates projected by the consumer. */
+    _messageDefs = contentChildren(MlvChatMessageDef, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_messageDefs" }] : /* istanbul ignore next */ []));
+    /** @internal id → user map, provided to bubbles through `MLV_CHAT_USERS`. */
+    _usersMap = computed(() => new Map(this.users().map((u) => [u.id, u])), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_usersMap" }] : /* istanbul ignore next */ []));
+    /** @internal type → def map, provided to bubbles through `MLV_CHAT_MESSAGE_DEFS`. */
+    _defsMap = computed(() => new Map(this._messageDefs()
+        .filter((def) => def.mlvChatMessageDefType())
+        .map((def) => [def.mlvChatMessageDefType(), def])), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_defsMap" }] : /* istanbul ignore next */ []));
+    /** @internal Number of newest messages currently rendered; grown by the scroll engine. */
+    _renderCount = signal(150, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_renderCount" }] : /* istanbul ignore next */ []));
+    /** @internal Newest slice of `messages` kept in the DOM. */
+    _windowed = computed(() => this.messages().slice(-this._renderCount()), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_windowed" }] : /* istanbul ignore next */ []));
+    /** @internal Flattened author groups and date separators of the render window. */
+    _renderItems = computed(() => buildChatRenderList(this._windowed(), this.selfId(), this.groupWindow(), this.dateSeparators()), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_renderItems" }] : /* istanbul ignore next */ []));
+    /** @internal Whether the author slot renders above other-authored groups. */
+    _authorsVisible = computed(() => {
+        const mode = this.showAuthors();
+        return mode === 'auto' ? this.users().length > 2 : mode;
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_authorsVisible" }] : /* istanbul ignore next */ []));
+    /** @internal Typing users resolved against the known participants. */
+    _typingUserObjects = computed(() => this.typingUsers()
+        .map((id) => this._usersMap().get(id))
+        .filter((user) => !!user), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_typingUserObjects" }] : /* istanbul ignore next */ []));
+    /** @internal Placeholder rows rendered while `loading` is set. */
+    _skeletonRows = SKELETON_ROWS;
+    /** @internal The scroll container; measured by the scroll engine. */
+    _viewport = viewChild(MlvScrollbar, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_viewport" }] : /* istanbul ignore next */ []));
+    /** @private Inner content wrapper; its height changes drive re-pinning. */
+    _content = viewChild('content', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_content" }] : /* istanbul ignore next */ []));
+    /** @private Shared resize observer used to follow content height changes. */
+    _resizeObserver = inject(MlvResizeObserverService);
+    /** @internal True while the view sits at (or near) the newest message. */
+    _pinned = signal(true, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_pinned" }] : /* istanbul ignore next */ []));
+    /** @internal Messages appended while unpinned; drives the new-messages pill. */
+    _newCount = signal(0, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_newCount" }] : /* istanbul ignore next */ []));
+    /** @internal Ids of messages that arrived live, so only those animate in. */
+    _liveIds = signal(new Set(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_liveIds" }] : /* istanbul ignore next */ []));
+    /** @private First/last ids of the previous `messages` value, to classify changes. */
+    _edgeIds = {
+        first: null,
+        last: null,
+    };
+    /** @private Distance from the viewport bottom captured before a prepend renders. */
+    _pendingCompensation = null;
+    constructor() {
+        // The window starts at the configured size; the scroll engine grows it as
+        // the user scrolls up and trims it back once they return to the bottom.
+        effect(() => this._renderCount.set(this.windowSize()));
+        effect(() => {
+            const list = this.messages();
+            const first = list[0]?.id ?? null;
+            const last = list[list.length - 1]?.id ?? null;
+            const previous = this._edgeIds;
+            this._edgeIds = { first, last };
+            if (previous.last === null)
+                return;
+            const appended = last !== null && last !== previous.last;
+            const prepended = first !== null && first !== previous.first && last === previous.last;
+            if (prepended)
+                this._captureCompensation();
+            if (appended) {
+                this._markLiveMessages(list, previous.last);
+                if (this._pinned())
+                    this._scrollToBottom('smooth');
+                else
+                    this._newCount.update((count) => count + 1);
+            }
+        });
+        afterRenderEffect(() => {
+            // Re-runs whenever the rendered content changes.
+            this._renderItems();
+            this.loading();
+            if (this._applyCompensation())
+                return;
+            if (this._pinned())
+                this._stickToBottom();
+        });
+        // Renders alone are not enough: media can load late and `content-visibility`
+        // reveals height without a change-detection pass. Following the content box
+        // keeps the newest message in view in all of those cases.
+        effect((onCleanup) => {
+            const content = this._content()?.nativeElement;
+            if (!content)
+                return;
+            const subscription = this._resizeObserver
+                .observe(content)
+                .subscribe(() => {
+                if (this._pendingCompensation === null && this._pinned())
+                    this._stickToBottom();
+            });
+            onCleanup(() => subscription.unsubscribe());
+        });
+    }
+    /** @internal Re-reads the viewport metrics after a scroll event. */
+    _onScroll() {
+        const viewport = this._viewport()?.viewportElement;
+        if (!viewport)
+            return;
+        this._evaluateScroll(viewport.scrollTop, viewport.scrollHeight, viewport.clientHeight);
+    }
+    /**
+     * @internal Updates pinning and top-edge behavior from raw scroll metrics.
+     * Split from `_onScroll` so the logic is testable without layout.
+     */
+    _evaluateScroll(scrollTop, scrollHeight, clientHeight) {
+        const bottomDistance = scrollHeight - scrollTop - clientHeight;
+        const pinned = bottomDistance < MlvChat._PIN_THRESHOLD;
+        if (pinned && !this._pinned()) {
+            this._newCount.set(0);
+            // Trimming is invisible while the view is anchored to the newest message.
+            this._renderCount.set(this.windowSize());
+        }
+        this._pinned.set(pinned);
+        if (scrollTop < MlvChat._TOP_THRESHOLD)
+            this._growWindow();
+    }
+    /** @internal Grows the render window, or asks for an older page once it is exhausted. */
+    _growWindow() {
+        const total = this.messages().length;
+        if (this._renderCount() < total) {
+            this._captureCompensation();
+            this._renderCount.update((count) => Math.min(count + MlvChat._WINDOW_STEP, total));
+            return;
+        }
+        if (this.hasOlder() && !this.loadingOlder())
+            this.loadOlder.emit();
+    }
+    /** @internal Scrolls to the newest message and clears the pill counter. */
+    _scrollToBottom(behavior = 'smooth') {
+        const viewport = this._viewport()?.viewportElement;
+        this._newCount.set(0);
+        this._pinned.set(true);
+        if (!viewport)
+            return;
+        viewport.scrollTo?.({ top: viewport.scrollHeight, behavior });
+    }
+    /**
+     * @private Records every message newer than the previous last id so only
+     * live arrivals animate in — initial load, window growth, and prepended
+     * history render instantly.
+     */
+    _markLiveMessages(list, previousLast) {
+        const previousIndex = list.findIndex((message) => message.id === previousLast);
+        const fresh = list.slice(previousIndex + 1).map((message) => message.id);
+        if (!fresh.length)
+            return;
+        this._liveIds.update((ids) => {
+            const next = new Set(ids);
+            for (const id of fresh)
+                next.add(id);
+            return next;
+        });
+    }
+    /** @private Records the distance from the bottom so a prepend keeps the view still. */
+    _captureCompensation() {
+        const viewport = this._viewport()?.viewportElement;
+        if (viewport)
+            this._pendingCompensation = viewport.scrollHeight - viewport.scrollTop;
+    }
+    /**
+     * @private Restores the captured distance once the taller content has rendered.
+     * Returns true when a compensation was applied, so the caller skips pinning.
+     */
+    _applyCompensation() {
+        const pending = this._pendingCompensation;
+        if (pending === null)
+            return false;
+        this._pendingCompensation = null;
+        const viewport = this._viewport()?.viewportElement;
+        if (viewport)
+            viewport.scrollTop = viewport.scrollHeight - pending;
+        return true;
+    }
+    /** @private Jumps the viewport to the newest message without animation. */
+    _stickToBottom() {
+        const viewport = this._viewport()?.viewportElement;
+        if (viewport)
+            viewport.scrollTop = viewport.scrollHeight;
+    }
+    /** @internal Composes the accessible label of one message article. */
+    _messageLabel(message, own) {
+        const author = own
+            ? (this._usersMap().get(this.selfId())?.name ?? '')
+            : (this._usersMap().get(message.authorId)?.name ?? '');
+        const time = formatDate(toChatDate(message.timestamp), 'shortTime', 'en-US');
+        const status = own && message.status ? this._statusLabel(message.status) : '';
+        return [author, time, status].filter(Boolean).join(', ');
+    }
+    /** @private Maps a delivery status to its translated label. */
+    _statusLabel(status) {
+        const i18n = this._i18n();
+        switch (status) {
+            case 'sending':
+                return i18n.statusSending;
+            case 'sent':
+                return i18n.statusSent;
+            case 'delivered':
+                return i18n.statusDelivered;
+            case 'read':
+                return i18n.statusRead;
+            case 'failed':
+                return i18n.statusFailed;
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: MlvChat, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.7", type: MlvChat, isStandalone: true, selector: "mlv-chat", inputs: { messages: { classPropertyName: "messages", publicName: "messages", isSignal: true, isRequired: true, transformFunction: null }, selfId: { classPropertyName: "selfId", publicName: "selfId", isSignal: true, isRequired: true, transformFunction: null }, users: { classPropertyName: "users", publicName: "users", isSignal: true, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, loadingOlder: { classPropertyName: "loadingOlder", publicName: "loadingOlder", isSignal: true, isRequired: false, transformFunction: null }, hasOlder: { classPropertyName: "hasOlder", publicName: "hasOlder", isSignal: true, isRequired: false, transformFunction: null }, typingUsers: { classPropertyName: "typingUsers", publicName: "typingUsers", isSignal: true, isRequired: false, transformFunction: null }, groupWindow: { classPropertyName: "groupWindow", publicName: "groupWindow", isSignal: true, isRequired: false, transformFunction: null }, showAuthors: { classPropertyName: "showAuthors", publicName: "showAuthors", isSignal: true, isRequired: false, transformFunction: null }, dateSeparators: { classPropertyName: "dateSeparators", publicName: "dateSeparators", isSignal: true, isRequired: false, transformFunction: null }, windowSize: { classPropertyName: "windowSize", publicName: "windowSize", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { loadOlder: "loadOlder", retry: "retry", mediaClick: "mediaClick", replyClick: "replyClick" }, host: { classAttribute: "mlv-chat" }, providers: [
+            MlvChatAudioService,
+            { provide: MLV_DENSITY_ELEMENT, useValue: 'chat' },
+            { provide: MLV_CHAT_USERS, useFactory: () => inject(MlvChat)._usersMap },
+            {
+                provide: MLV_CHAT_MESSAGE_DEFS,
+                useFactory: () => inject(MlvChat)._defsMap,
+            },
+        ], queries: [{ propertyName: "authorDef", first: true, predicate: MlvChatAuthorDef, descendants: true, isSignal: true }, { propertyName: "dateDef", first: true, predicate: MlvChatDateDef, descendants: true, isSignal: true }, { propertyName: "_messageDefs", predicate: MlvChatMessageDef, isSignal: true }], viewQueries: [{ propertyName: "_viewport", first: true, predicate: MlvScrollbar, descendants: true, isSignal: true }, { propertyName: "_content", first: true, predicate: ["content"], descendants: true, isSignal: true }], hostDirectives: [{ directive: i1.MlvDensityDirective, inputs: ["mlvDensity", "mlvDensity"] }], ngImport: i0, template: "<mlv-scrollbar\n  #viewport\n  class=\"mlv-chat__viewport\"\n  role=\"log\"\n  [attr.aria-label]=\"_i18n().chatLabel\"\n  tabindex=\"0\"\n  (scroll)=\"_onScroll()\"\n>\n  <div #content class=\"mlv-chat__content\">\n    @if (loading()) { @for (row of _skeletonRows; track $index) {\n    <div class=\"mlv-chat__skeleton\" [class.mlv-chat__skeleton--own]=\"row.own\">\n      <mlv-skeleton variant=\"rectangle\" [width]=\"row.width\" height=\"2.25rem\" />\n    </div>\n    } } @else { @if (loadingOlder()) {\n    <div class=\"mlv-chat__older-loader\">\n      <mlv-loader\n        variant=\"circle\"\n        [indeterminate]=\"true\"\n        [size]=\"20\"\n        [strokeWidth]=\"2\"\n      />\n      <span class=\"cdk-visually-hidden\">{{ _i18n().loadingOlder }}</span>\n    </div>\n    } @for (item of _renderItems(); track item.id) { @switch (item.kind) { @case\n    ('date') {\n    <div class=\"mlv-chat__date\">\n      @if (dateDef(); as def) {\n      <ng-container\n        [ngTemplateOutlet]=\"def.templateRef\"\n        [ngTemplateOutletContext]=\"{ $implicit: item.date }\"\n      />\n      } @else {\n      <mlv-chat-date [date]=\"item.date\" />\n      }\n    </div>\n    } @case ('group') {\n    <div class=\"mlv-chat__group\" [class.mlv-chat__group--own]=\"item.own\">\n      @if (!item.own && _authorsVisible()) {\n      <div class=\"mlv-chat__author\">\n        @if (authorDef(); as def) {\n        <ng-container\n          [ngTemplateOutlet]=\"def.templateRef\"\n          [ngTemplateOutletContext]=\"{\n                      $implicit: _usersMap().get(item.authorId),\n                      isOwn: item.own,\n                      firstMessage: item.messages[0].message,\n                    }\"\n        />\n        } @else { {{ _usersMap().get(item.authorId)?.name }} }\n      </div>\n      }\n      <div class=\"mlv-chat__group-body\">\n        @if (!item.own) {\n        <mlv-avatar\n          class=\"mlv-chat__avatar\"\n          size=\"s\"\n          [src]=\"_usersMap().get(item.authorId)?.avatarSrc ?? null\"\n          [name]=\"_usersMap().get(item.authorId)?.name ?? ''\"\n          [color]=\"(_usersMap().get(item.authorId)?.name ?? '') | mlvColorFromText\"\n        />\n        }\n        <div class=\"mlv-chat__bubbles\">\n          @for (rendered of item.messages; track rendered.message.id) {\n          <article\n            class=\"mlv-chat__item\"\n            [class.mlv-chat__item--enter]=\"_liveIds().has(rendered.message.id)\"\n            animate.leave=\"mlv-chat__item--leave\"\n            [attr.aria-label]=\"_messageLabel(rendered.message, item.own)\"\n          >\n            <mlv-chat-message\n              [message]=\"rendered.message\"\n              [own]=\"item.own\"\n              [groupPosition]=\"rendered.position\"\n              (retry)=\"retry.emit(rendered.message)\"\n              (mediaClick)=\"mediaClick.emit({ message: rendered.message, attachment: $event })\"\n              (replyClick)=\"replyClick.emit({ message: rendered.message, replyTo: $event })\"\n            />\n          </article>\n          }\n        </div>\n      </div>\n    </div>\n    } } } @if (_typingUserObjects().length) {\n    <mlv-chat-typing class=\"mlv-chat__typing\" [users]=\"_typingUserObjects()\" />\n    } }\n  </div>\n</mlv-scrollbar>\n@if (!_pinned() && _newCount() > 0) {\n<button\n  type=\"button\"\n  class=\"mlv-chat__pill\"\n  (click)=\"_scrollToBottom('smooth')\"\n>\n  {{ _i18n().newMessages | mlvTranslate: { count: _newCount() } }}\n</button>\n}\n", styles: ["@layer mlv.components{@keyframes mlv-chat-item-enter{0%{opacity:0;transform:translateY(.5rem);grid-template-rows:0fr}to{opacity:1;transform:translateY(0);grid-template-rows:1fr}}@keyframes mlv-chat-item-leave-fade{to{opacity:0}}@keyframes mlv-chat-item-leave-collapse{to{grid-template-rows:0fr}}.mlv-chat{box-sizing:border-box;padding:0;margin:0;font-family:var(--mlv-typography-family-text);font-size:var(--mlv-typography-body-m-size)}.mlv-chat *{box-sizing:border-box}.mlv-chat{--mlv-chat-gap: .5rem;--mlv-chat-padding: var(--mlv-padding-m);--mlv-chat-bubble-gap: .125rem;position:relative;display:flex;flex-direction:column;min-block-size:0}.mlv-chat__viewport{flex:1;display:flex;flex-direction:column;padding:var(--mlv-chat-padding);overflow-y:auto;overflow-anchor:auto}.mlv-chat__content{display:flex;flex-direction:column;gap:var(--mlv-chat-gap);margin-block-start:auto}.mlv-chat__group{display:flex;flex-direction:column;gap:.125rem;content-visibility:auto;contain-intrinsic-size:auto 3.5rem}.mlv-chat__group--own{align-items:flex-end}.mlv-chat__group-body{display:flex;align-items:flex-end;gap:.5rem;max-inline-size:100%}.mlv-chat__avatar{position:sticky;inset-block-end:0;align-self:flex-end;flex-shrink:0}.mlv-chat__group--own .mlv-chat__group-body{flex-direction:row-reverse}.mlv-chat__bubbles{display:flex;flex-direction:column;gap:var(--mlv-chat-bubble-gap);max-inline-size:75%;min-inline-size:0}.mlv-chat__group--own .mlv-chat__bubbles{align-items:flex-end}.mlv-chat__item{display:grid;grid-template-rows:1fr;min-inline-size:0;will-change:transform,opacity,grid-template-rows}.mlv-chat__item>*{min-block-size:0;overflow:hidden}.mlv-chat__item--enter{animation:mlv-chat-item-enter var(--mlv-duration-slow) var(--mlv-ease-out-strong) both}.mlv-chat__item--leave{animation:mlv-chat-item-leave-fade var(--mlv-duration-fast) var(--mlv-ease-out-strong) forwards,mlv-chat-item-leave-collapse var(--mlv-duration-normal) var(--mlv-ease-out-strong) forwards}.mlv-chat__group--own .mlv-chat__item{justify-items:end}.mlv-chat__author{font-size:var(--mlv-typography-body-s-size);color:var(--mlv-text-secondary);margin-inline-start:2.25rem}.mlv-chat__date{align-self:center;font-size:inherit}.mlv-chat__older-loader{display:flex;justify-content:center;padding-block:.5rem}.mlv-chat__skeleton{display:flex}.mlv-chat__skeleton mlv-skeleton{border-radius:var(--mlv-radius-l)}.mlv-chat__skeleton--own{justify-content:flex-end}.mlv-chat__typing{align-self:flex-start}.mlv-chat-typing__label{font-size:var(--mlv-typography-body-m-size)}.mlv-chat__pill{position:absolute;inset-block-end:1rem;inset-inline:0;inline-size:fit-content;margin-inline:auto;padding:.375rem .75rem;border:none;border-radius:var(--mlv-radius-full);background-color:var(--mlv-background-raised);color:var(--mlv-text-action);box-shadow:var(--mlv-shadow-floating);font-size:var(--mlv-typography-body-s-size);cursor:pointer}.mlv-chat__pill:focus-visible{outline:var(--mlv-stroke-width-medium) solid var(--mlv-border-focus);outline-offset:var(--mlv-focus-ring-offset)}[class*=--tight] .mlv-chat:not([class*=--compact],[class*=--comfortable],[class*=--spacious],[class*=--airy]),.mlv-chat[class*=--tight]{--mlv-chat-gap: .25rem;--mlv-chat-padding: var(--mlv-padding-xs);--mlv-chat-bubble-gap: .0625rem}[class*=--compact] .mlv-chat:not([class*=--tight],[class*=--comfortable],[class*=--spacious],[class*=--airy]),.mlv-chat[class*=--compact]{--mlv-chat-gap: .375rem;--mlv-chat-padding: var(--mlv-padding-s)}[class*=--spacious] .mlv-chat:not([class*=--tight],[class*=--compact],[class*=--comfortable],[class*=--airy]),.mlv-chat[class*=--spacious]{--mlv-chat-gap: .75rem;--mlv-chat-padding: var(--mlv-padding-l);--mlv-chat-bubble-gap: .25rem}[class*=--airy] .mlv-chat:not([class*=--tight],[class*=--compact],[class*=--comfortable],[class*=--spacious]),.mlv-chat[class*=--airy]{--mlv-chat-gap: 1rem;--mlv-chat-padding: var(--mlv-padding-xl);--mlv-chat-bubble-gap: .375rem}@media(prefers-reduced-motion:reduce){.mlv-chat,.mlv-chat *,.mlv-chat:before,.mlv-chat:after,[class^=mlv-chat__],[class*=\" mlv-chat__\"],[class^=mlv-chat--],[class*=\" mlv-chat--\"]{scroll-behavior:auto!important;animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:var(--mlv-duration-instant)!important}}}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: MlvAvatar, selector: "mlv-avatar", inputs: ["size", "shape", "src", "name", "initials", "color", "label"] }, { kind: "component", type: MlvLoader, selector: "mlv-loader", inputs: ["variant", "tone", "value", "max", "indeterminate", "size", "strokeWidth", "ariaLabel", "showHint", "color", "trackColor", "glow"] }, { kind: "component", type: MlvSkeleton, selector: "mlv-skeleton", inputs: ["variant", "width", "height", "animated", "animationDuration"] }, { kind: "component", type: MlvChatMessage, selector: "mlv-chat-message", inputs: ["message", "own", "groupPosition", "quote"], outputs: ["retry", "mediaClick", "replyClick"] }, { kind: "component", type: MlvChatDate, selector: "mlv-chat-date", inputs: ["date"] }, { kind: "component", type: MlvChatTyping, selector: "mlv-chat-typing", inputs: ["users"] }, { kind: "component", type: MlvScrollbar, selector: "mlv-scrollbar", inputs: ["orientation", "scrollbarSize", "disabled", "ariaLabel", "viewportTabIndex"] }, { kind: "pipe", type: MlvTranslatePipe, name: "mlvTranslate" }, { kind: "pipe", type: MlvColorFromTextPipe, name: "mlvColorFromText" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: MlvChat, decorators: [{
+            type: Component,
+            args: [{ selector: 'mlv-chat', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, imports: [
+                        NgTemplateOutlet,
+                        MlvTranslatePipe,
+                        MlvAvatar,
+                        MlvColorFromTextPipe,
+                        MlvLoader,
+                        MlvSkeleton,
+                        MlvChatMessage,
+                        MlvChatDate,
+                        MlvChatTyping,
+                        MlvScrollbar,
+                    ], providers: [
+                        MlvChatAudioService,
+                        { provide: MLV_DENSITY_ELEMENT, useValue: 'chat' },
+                        { provide: MLV_CHAT_USERS, useFactory: () => inject(MlvChat)._usersMap },
+                        {
+                            provide: MLV_CHAT_MESSAGE_DEFS,
+                            useFactory: () => inject(MlvChat)._defsMap,
+                        },
+                    ], hostDirectives: [{ directive: MlvDensityDirective, inputs: ['mlvDensity'] }], host: { class: 'mlv-chat' }, template: "<mlv-scrollbar\n  #viewport\n  class=\"mlv-chat__viewport\"\n  role=\"log\"\n  [attr.aria-label]=\"_i18n().chatLabel\"\n  tabindex=\"0\"\n  (scroll)=\"_onScroll()\"\n>\n  <div #content class=\"mlv-chat__content\">\n    @if (loading()) { @for (row of _skeletonRows; track $index) {\n    <div class=\"mlv-chat__skeleton\" [class.mlv-chat__skeleton--own]=\"row.own\">\n      <mlv-skeleton variant=\"rectangle\" [width]=\"row.width\" height=\"2.25rem\" />\n    </div>\n    } } @else { @if (loadingOlder()) {\n    <div class=\"mlv-chat__older-loader\">\n      <mlv-loader\n        variant=\"circle\"\n        [indeterminate]=\"true\"\n        [size]=\"20\"\n        [strokeWidth]=\"2\"\n      />\n      <span class=\"cdk-visually-hidden\">{{ _i18n().loadingOlder }}</span>\n    </div>\n    } @for (item of _renderItems(); track item.id) { @switch (item.kind) { @case\n    ('date') {\n    <div class=\"mlv-chat__date\">\n      @if (dateDef(); as def) {\n      <ng-container\n        [ngTemplateOutlet]=\"def.templateRef\"\n        [ngTemplateOutletContext]=\"{ $implicit: item.date }\"\n      />\n      } @else {\n      <mlv-chat-date [date]=\"item.date\" />\n      }\n    </div>\n    } @case ('group') {\n    <div class=\"mlv-chat__group\" [class.mlv-chat__group--own]=\"item.own\">\n      @if (!item.own && _authorsVisible()) {\n      <div class=\"mlv-chat__author\">\n        @if (authorDef(); as def) {\n        <ng-container\n          [ngTemplateOutlet]=\"def.templateRef\"\n          [ngTemplateOutletContext]=\"{\n                      $implicit: _usersMap().get(item.authorId),\n                      isOwn: item.own,\n                      firstMessage: item.messages[0].message,\n                    }\"\n        />\n        } @else { {{ _usersMap().get(item.authorId)?.name }} }\n      </div>\n      }\n      <div class=\"mlv-chat__group-body\">\n        @if (!item.own) {\n        <mlv-avatar\n          class=\"mlv-chat__avatar\"\n          size=\"s\"\n          [src]=\"_usersMap().get(item.authorId)?.avatarSrc ?? null\"\n          [name]=\"_usersMap().get(item.authorId)?.name ?? ''\"\n          [color]=\"(_usersMap().get(item.authorId)?.name ?? '') | mlvColorFromText\"\n        />\n        }\n        <div class=\"mlv-chat__bubbles\">\n          @for (rendered of item.messages; track rendered.message.id) {\n          <article\n            class=\"mlv-chat__item\"\n            [class.mlv-chat__item--enter]=\"_liveIds().has(rendered.message.id)\"\n            animate.leave=\"mlv-chat__item--leave\"\n            [attr.aria-label]=\"_messageLabel(rendered.message, item.own)\"\n          >\n            <mlv-chat-message\n              [message]=\"rendered.message\"\n              [own]=\"item.own\"\n              [groupPosition]=\"rendered.position\"\n              (retry)=\"retry.emit(rendered.message)\"\n              (mediaClick)=\"mediaClick.emit({ message: rendered.message, attachment: $event })\"\n              (replyClick)=\"replyClick.emit({ message: rendered.message, replyTo: $event })\"\n            />\n          </article>\n          }\n        </div>\n      </div>\n    </div>\n    } } } @if (_typingUserObjects().length) {\n    <mlv-chat-typing class=\"mlv-chat__typing\" [users]=\"_typingUserObjects()\" />\n    } }\n  </div>\n</mlv-scrollbar>\n@if (!_pinned() && _newCount() > 0) {\n<button\n  type=\"button\"\n  class=\"mlv-chat__pill\"\n  (click)=\"_scrollToBottom('smooth')\"\n>\n  {{ _i18n().newMessages | mlvTranslate: { count: _newCount() } }}\n</button>\n}\n", styles: ["@layer mlv.components{@keyframes mlv-chat-item-enter{0%{opacity:0;transform:translateY(.5rem);grid-template-rows:0fr}to{opacity:1;transform:translateY(0);grid-template-rows:1fr}}@keyframes mlv-chat-item-leave-fade{to{opacity:0}}@keyframes mlv-chat-item-leave-collapse{to{grid-template-rows:0fr}}.mlv-chat{box-sizing:border-box;padding:0;margin:0;font-family:var(--mlv-typography-family-text);font-size:var(--mlv-typography-body-m-size)}.mlv-chat *{box-sizing:border-box}.mlv-chat{--mlv-chat-gap: .5rem;--mlv-chat-padding: var(--mlv-padding-m);--mlv-chat-bubble-gap: .125rem;position:relative;display:flex;flex-direction:column;min-block-size:0}.mlv-chat__viewport{flex:1;display:flex;flex-direction:column;padding:var(--mlv-chat-padding);overflow-y:auto;overflow-anchor:auto}.mlv-chat__content{display:flex;flex-direction:column;gap:var(--mlv-chat-gap);margin-block-start:auto}.mlv-chat__group{display:flex;flex-direction:column;gap:.125rem;content-visibility:auto;contain-intrinsic-size:auto 3.5rem}.mlv-chat__group--own{align-items:flex-end}.mlv-chat__group-body{display:flex;align-items:flex-end;gap:.5rem;max-inline-size:100%}.mlv-chat__avatar{position:sticky;inset-block-end:0;align-self:flex-end;flex-shrink:0}.mlv-chat__group--own .mlv-chat__group-body{flex-direction:row-reverse}.mlv-chat__bubbles{display:flex;flex-direction:column;gap:var(--mlv-chat-bubble-gap);max-inline-size:75%;min-inline-size:0}.mlv-chat__group--own .mlv-chat__bubbles{align-items:flex-end}.mlv-chat__item{display:grid;grid-template-rows:1fr;min-inline-size:0;will-change:transform,opacity,grid-template-rows}.mlv-chat__item>*{min-block-size:0;overflow:hidden}.mlv-chat__item--enter{animation:mlv-chat-item-enter var(--mlv-duration-slow) var(--mlv-ease-out-strong) both}.mlv-chat__item--leave{animation:mlv-chat-item-leave-fade var(--mlv-duration-fast) var(--mlv-ease-out-strong) forwards,mlv-chat-item-leave-collapse var(--mlv-duration-normal) var(--mlv-ease-out-strong) forwards}.mlv-chat__group--own .mlv-chat__item{justify-items:end}.mlv-chat__author{font-size:var(--mlv-typography-body-s-size);color:var(--mlv-text-secondary);margin-inline-start:2.25rem}.mlv-chat__date{align-self:center;font-size:inherit}.mlv-chat__older-loader{display:flex;justify-content:center;padding-block:.5rem}.mlv-chat__skeleton{display:flex}.mlv-chat__skeleton mlv-skeleton{border-radius:var(--mlv-radius-l)}.mlv-chat__skeleton--own{justify-content:flex-end}.mlv-chat__typing{align-self:flex-start}.mlv-chat-typing__label{font-size:var(--mlv-typography-body-m-size)}.mlv-chat__pill{position:absolute;inset-block-end:1rem;inset-inline:0;inline-size:fit-content;margin-inline:auto;padding:.375rem .75rem;border:none;border-radius:var(--mlv-radius-full);background-color:var(--mlv-background-raised);color:var(--mlv-text-action);box-shadow:var(--mlv-shadow-floating);font-size:var(--mlv-typography-body-s-size);cursor:pointer}.mlv-chat__pill:focus-visible{outline:var(--mlv-stroke-width-medium) solid var(--mlv-border-focus);outline-offset:var(--mlv-focus-ring-offset)}[class*=--tight] .mlv-chat:not([class*=--compact],[class*=--comfortable],[class*=--spacious],[class*=--airy]),.mlv-chat[class*=--tight]{--mlv-chat-gap: .25rem;--mlv-chat-padding: var(--mlv-padding-xs);--mlv-chat-bubble-gap: .0625rem}[class*=--compact] .mlv-chat:not([class*=--tight],[class*=--comfortable],[class*=--spacious],[class*=--airy]),.mlv-chat[class*=--compact]{--mlv-chat-gap: .375rem;--mlv-chat-padding: var(--mlv-padding-s)}[class*=--spacious] .mlv-chat:not([class*=--tight],[class*=--compact],[class*=--comfortable],[class*=--airy]),.mlv-chat[class*=--spacious]{--mlv-chat-gap: .75rem;--mlv-chat-padding: var(--mlv-padding-l);--mlv-chat-bubble-gap: .25rem}[class*=--airy] .mlv-chat:not([class*=--tight],[class*=--compact],[class*=--comfortable],[class*=--spacious]),.mlv-chat[class*=--airy]{--mlv-chat-gap: 1rem;--mlv-chat-padding: var(--mlv-padding-xl);--mlv-chat-bubble-gap: .375rem}@media(prefers-reduced-motion:reduce){.mlv-chat,.mlv-chat *,.mlv-chat:before,.mlv-chat:after,[class^=mlv-chat__],[class*=\" mlv-chat__\"],[class^=mlv-chat--],[class*=\" mlv-chat--\"]{scroll-behavior:auto!important;animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:var(--mlv-duration-instant)!important}}}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { messages: [{ type: i0.Input, args: [{ isSignal: true, alias: "messages", required: true }] }], selfId: [{ type: i0.Input, args: [{ isSignal: true, alias: "selfId", required: true }] }], users: [{ type: i0.Input, args: [{ isSignal: true, alias: "users", required: false }] }], loading: [{ type: i0.Input, args: [{ isSignal: true, alias: "loading", required: false }] }], loadingOlder: [{ type: i0.Input, args: [{ isSignal: true, alias: "loadingOlder", required: false }] }], hasOlder: [{ type: i0.Input, args: [{ isSignal: true, alias: "hasOlder", required: false }] }], typingUsers: [{ type: i0.Input, args: [{ isSignal: true, alias: "typingUsers", required: false }] }], groupWindow: [{ type: i0.Input, args: [{ isSignal: true, alias: "groupWindow", required: false }] }], showAuthors: [{ type: i0.Input, args: [{ isSignal: true, alias: "showAuthors", required: false }] }], dateSeparators: [{ type: i0.Input, args: [{ isSignal: true, alias: "dateSeparators", required: false }] }], windowSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "windowSize", required: false }] }], loadOlder: [{ type: i0.Output, args: ["loadOlder"] }], retry: [{ type: i0.Output, args: ["retry"] }], mediaClick: [{ type: i0.Output, args: ["mediaClick"] }], replyClick: [{ type: i0.Output, args: ["replyClick"] }], authorDef: [{ type: i0.ContentChild, args: [i0.forwardRef(() => MlvChatAuthorDef), { isSignal: true }] }], dateDef: [{ type: i0.ContentChild, args: [i0.forwardRef(() => MlvChatDateDef), { isSignal: true }] }], _messageDefs: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => MlvChatMessageDef), { isSignal: true }] }], _viewport: [{ type: i0.ViewChild, args: [i0.forwardRef(() => MlvScrollbar), { isSignal: true }] }], _content: [{ type: i0.ViewChild, args: ['content', { isSignal: true }] }] } });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { MLV_CHAT_MESSAGE_DEFS, MLV_CHAT_USERS, MlvChat, MlvChatAuthorDef, MlvChatDateDef, MlvChatMessage, MlvChatMessageDef, buildChatRenderList, formatChatDuration, isSameChatDay, toChatDate };
+//# sourceMappingURL=malva-ui-core-chat.mjs.map