@malva-ui/core 0.1.12

package/esm2022/card/lib/card-footer-def.js

@@ -0,0 +1,32 @@
+import { Directive, input } from '@angular/core';
+import { MlvStructural } from '@malva-ui/cdk/utils';
+import { coerceBooleanProperty } from '@angular/cdk/coercion';
+import * as i0 from "@angular/core";
+export class MlvCardFooterDef extends MlvStructural {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: MlvCardFooterDef, deps: null, target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0.7", type: MlvCardFooterDef, isStandalone: true, selector: "[mlvCardFooterDef]", usesInheritance: true, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: MlvCardFooterDef, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[mlvCardFooterDef]',
+                }]
+        }] });
+export class MlvCardFooter {
+    withBorder = input(false, { ...(ngDevMode ? { debugName: "withBorder" } : /* istanbul ignore next */ {}), transform: coerceBooleanProperty });
+    fullWidth = input(false, { ...(ngDevMode ? { debugName: "fullWidth" } : /* istanbul ignore next */ {}), transform: coerceBooleanProperty });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: MlvCardFooter, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.0.7", type: MlvCardFooter, isStandalone: true, selector: "[mlvCardFooter]", inputs: { withBorder: { classPropertyName: "withBorder", publicName: "withBorder", isSignal: true, isRequired: false, transformFunction: null }, fullWidth: { classPropertyName: "fullWidth", publicName: "fullWidth", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class.mlv-card__footer--full-width": "fullWidth()", "class.mlv-card__footer--border": "withBorder()" }, classAttribute: "mlv-card__footer" }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: MlvCardFooter, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[mlvCardFooter]',
+                    host: {
+                        class: 'mlv-card__footer',
+                        '[class.mlv-card__footer--full-width]': 'fullWidth()',
+                        '[class.mlv-card__footer--border]': 'withBorder()',
+                    },
+                }]
+        }], propDecorators: { withBorder: [{ type: i0.Input, args: [{ isSignal: true, alias: "withBorder", required: false }] }], fullWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "fullWidth", required: false }] }] } });
+//# sourceMappingURL=card-footer-def.js.map

package/esm2022/card/lib/card-footer-def.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"card-footer-def.js","sourceRoot":"","sources":["../../../../../../libs/core/card/src/lib/card-footer-def.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,KAAK,EAAE,MAAM,eAAe,CAAC;AACjD,OAAO,EAAE,aAAa,EAAE,MAAM,qBAAqB,CAAC;AAEpD,OAAO,EAAE,qBAAqB,EAAE,MAAM,uBAAuB,CAAC;;AAK9D,MAAM,OAAO,gBAAiB,SAAQ,aAAa;uGAAtC,gBAAgB;2FAAhB,gBAAgB;;2FAAhB,gBAAgB;kBAH5B,SAAS;mBAAC;oBACT,QAAQ,EAAE,oBAAoB;iBAC/B;;AAWD,MAAM,OAAO,aAAa;IACf,UAAU,GAAG,KAAK,CAAwB,KAAK,kFACtD,SAAS,EAAE,qBAAqB,GAChC,CAAC;IACM,SAAS,GAAG,KAAK,CAAwB,KAAK,iFACrD,SAAS,EAAE,qBAAqB,GAChC,CAAC;uGANQ,aAAa;2FAAb,aAAa;;2FAAb,aAAa;kBARzB,SAAS;mBAAC;oBACT,QAAQ,EAAE,iBAAiB;oBAC3B,IAAI,EAAE;wBACJ,KAAK,EAAE,kBAAkB;wBACzB,sCAAsC,EAAE,aAAa;wBACrD,kCAAkC,EAAE,cAAc;qBACnD;iBACF","sourcesContent":["import { Directive, input } from '@angular/core';\nimport { MlvStructural } from '@malva-ui/cdk/utils';\nimport type { BooleanInput } from '@angular/cdk/coercion';\nimport { coerceBooleanProperty } from '@angular/cdk/coercion';\n\n@Directive({\n  selector: '[mlvCardFooterDef]',\n})\nexport class MlvCardFooterDef extends MlvStructural {}\n\n@Directive({\n  selector: '[mlvCardFooter]',\n  host: {\n    class: 'mlv-card__footer',\n    '[class.mlv-card__footer--full-width]': 'fullWidth()',\n    '[class.mlv-card__footer--border]': 'withBorder()',\n  },\n})\nexport class MlvCardFooter {\n  readonly withBorder = input<boolean, BooleanInput>(false, {\n    transform: coerceBooleanProperty,\n  });\n  readonly fullWidth = input<boolean, BooleanInput>(false, {\n    transform: coerceBooleanProperty,\n  });\n}\n"]}

package/esm2022/card/lib/card-header-def.js

@@ -0,0 +1,27 @@
+import { Directive } from '@angular/core';
+import { MlvStructural } from '@malva-ui/cdk/utils';
+import * as i0 from "@angular/core";
+export class MlvCardHeaderDef extends MlvStructural {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: MlvCardHeaderDef, deps: null, target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0.7", type: MlvCardHeaderDef, isStandalone: true, selector: "[mlvCardHeaderDef]", usesInheritance: true, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: MlvCardHeaderDef, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[mlvCardHeaderDef]',
+                }]
+        }] });
+export class MlvCardHeader {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: MlvCardHeader, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0.7", type: MlvCardHeader, isStandalone: true, selector: "[mlvCardHeader]", host: { classAttribute: "mlv-card__header" }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: MlvCardHeader, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[mlvCardHeader]',
+                    host: {
+                        class: 'mlv-card__header',
+                    },
+                }]
+        }] });
+//# sourceMappingURL=card-header-def.js.map

package/esm2022/card/lib/card-header-def.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"card-header-def.js","sourceRoot":"","sources":["../../../../../../libs/core/card/src/lib/card-header-def.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,eAAe,CAAC;AAC1C,OAAO,EAAE,aAAa,EAAE,MAAM,qBAAqB,CAAC;;AAKpD,MAAM,OAAO,gBAAiB,SAAQ,aAAa;uGAAtC,gBAAgB;2FAAhB,gBAAgB;;2FAAhB,gBAAgB;kBAH5B,SAAS;mBAAC;oBACT,QAAQ,EAAE,oBAAoB;iBAC/B;;AASD,MAAM,OAAO,aAAa;uGAAb,aAAa;2FAAb,aAAa;;2FAAb,aAAa;kBANzB,SAAS;mBAAC;oBACT,QAAQ,EAAE,iBAAiB;oBAC3B,IAAI,EAAE;wBACJ,KAAK,EAAE,kBAAkB;qBAC1B;iBACF","sourcesContent":["import { Directive } from '@angular/core';\nimport { MlvStructural } from '@malva-ui/cdk/utils';\n\n@Directive({\n  selector: '[mlvCardHeaderDef]',\n})\nexport class MlvCardHeaderDef extends MlvStructural {}\n\n@Directive({\n  selector: '[mlvCardHeader]',\n  host: {\n    class: 'mlv-card__header',\n  },\n})\nexport class MlvCardHeader {}\n"]}

package/esm2022/card/lib/card-subheader-def.js

@@ -0,0 +1,33 @@
+import { Directive } from '@angular/core';
+import { MlvStructural } from '@malva-ui/cdk/utils';
+import * as i0 from "@angular/core";
+/**
+ * Structural directive responsible for rendering the card subheader template.
+ */
+export class MlvCardSubheaderDef extends MlvStructural {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: MlvCardSubheaderDef, deps: null, target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0.7", type: MlvCardSubheaderDef, isStandalone: true, selector: "[mlvCardSubheaderDef]", usesInheritance: true, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: MlvCardSubheaderDef, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[mlvCardSubheaderDef]',
+                }]
+        }] });
+/**
+ * Subheader directive. Used to apply correct classes to the element.
+ */
+export class MlvCardSubheader {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: MlvCardSubheader, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0.7", type: MlvCardSubheader, isStandalone: true, selector: "[mlvCardSubheader]", host: { classAttribute: "mlv-card__subheader" }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: MlvCardSubheader, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[mlvCardSubheader]',
+                    host: {
+                        class: 'mlv-card__subheader',
+                    },
+                }]
+        }] });
+//# sourceMappingURL=card-subheader-def.js.map

package/esm2022/card/lib/card-subheader-def.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"card-subheader-def.js","sourceRoot":"","sources":["../../../../../../libs/core/card/src/lib/card-subheader-def.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,eAAe,CAAC;AAC1C,OAAO,EAAE,aAAa,EAAE,MAAM,qBAAqB,CAAC;;AAEpD;;GAEG;AAIH,MAAM,OAAO,mBAAoB,SAAQ,aAAa;uGAAzC,mBAAmB;2FAAnB,mBAAmB;;2FAAnB,mBAAmB;kBAH/B,SAAS;mBAAC;oBACT,QAAQ,EAAE,uBAAuB;iBAClC;;AAGD;;GAEG;AAOH,MAAM,OAAO,gBAAgB;uGAAhB,gBAAgB;2FAAhB,gBAAgB;;2FAAhB,gBAAgB;kBAN5B,SAAS;mBAAC;oBACT,QAAQ,EAAE,oBAAoB;oBAC9B,IAAI,EAAE;wBACJ,KAAK,EAAE,qBAAqB;qBAC7B;iBACF","sourcesContent":["import { Directive } from '@angular/core';\nimport { MlvStructural } from '@malva-ui/cdk/utils';\n\n/**\n * Structural directive responsible for rendering the card subheader template.\n */\n@Directive({\n  selector: '[mlvCardSubheaderDef]',\n})\nexport class MlvCardSubheaderDef extends MlvStructural {}\n\n/**\n * Subheader directive. Used to apply correct classes to the element.\n */\n@Directive({\n  selector: '[mlvCardSubheader]',\n  host: {\n    class: 'mlv-card__subheader',\n  },\n})\nexport class MlvCardSubheader {}\n"]}

package/esm2022/card/malva-ui-core-card.js

@@ -0,0 +1,5 @@
+/**
+ * Generated bundle index. Do not edit.
+ */
+export * from './index';
+//# sourceMappingURL=malva-ui-core-card.js.map

package/esm2022/card/malva-ui-core-card.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"malva-ui-core-card.js","sourceRoot":"","sources":["../../../../../libs/core/card/src/malva-ui-core-card.ts"],"names":[],"mappings":"AAAA;;GAEG;AAEH,cAAc,SAAS,CAAC","sourcesContent":["/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"]}

package/esm2022/chat/index.js

@@ -0,0 +1,10 @@
+export * from './lib/chat.types';
+export * from './lib/chat-tokens';
+export * from './lib/chat/chat';
+export * from './lib/chat-message/chat-message';
+export * from './lib/defs/chat-message-def';
+export * from './lib/defs/chat-author-def';
+export * from './lib/defs/chat-date-def';
+export * from './lib/chat-render-list';
+export * from './lib/chat-format';
+//# sourceMappingURL=index.js.map

package/esm2022/chat/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../libs/core/chat/src/index.ts"],"names":[],"mappings":"AAAA,cAAc,kBAAkB,CAAC;AACjC,cAAc,mBAAmB,CAAC;AAClC,cAAc,iBAAiB,CAAC;AAChC,cAAc,iCAAiC,CAAC;AAChD,cAAc,6BAA6B,CAAC;AAC5C,cAAc,4BAA4B,CAAC;AAC3C,cAAc,0BAA0B,CAAC;AACzC,cAAc,wBAAwB,CAAC;AACvC,cAAc,mBAAmB,CAAC","sourcesContent":["export * from './lib/chat.types';\nexport * from './lib/chat-tokens';\nexport * from './lib/chat/chat';\nexport * from './lib/chat-message/chat-message';\nexport * from './lib/defs/chat-message-def';\nexport * from './lib/defs/chat-author-def';\nexport * from './lib/defs/chat-date-def';\nexport * from './lib/chat-render-list';\nexport * from './lib/chat-format';\n"]}

package/esm2022/chat/lib/chat/chat.js

@@ -0,0 +1,326 @@
+import { ChangeDetectionStrategy, Component, ViewEncapsulation, afterRenderEffect, computed, contentChild, contentChildren, effect, inject, input, output, signal, viewChild, } from '@angular/core';
+import { NgTemplateOutlet, formatDate } from '@angular/common';
+import { coerceBooleanProperty } from '@angular/cdk/coercion';
+import { MlvResizeObserverService } from '@malva-ui/cdk/utils';
+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 { buildChatRenderList, toChatDate } from '../chat-render-list';
+import { MLV_CHAT_MESSAGE_DEFS, MLV_CHAT_USERS } from '../chat-tokens';
+import { MlvChatMessage } from '../chat-message/chat-message';
+import { MlvChatDate } from '../chat-date/chat-date';
+import { MlvChatTyping } from '../chat-typing/chat-typing';
+import { MlvChatAudioService } from '../chat-audio/chat-audio.service';
+import { MlvChatAuthorDef } from '../defs/chat-author-def';
+import { MlvChatDateDef } from '../defs/chat-date-def';
+import { MlvChatMessageDef } from '../defs/chat-message-def';
+import * as i0 from "@angular/core";
+import * as i1 from "@malva-ui/cdk/density";
+/** 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.
+ */
+export 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('viewport', /* @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()?.nativeElement;
+        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()?.nativeElement;
+        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()?.nativeElement;
+        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()?.nativeElement;
+        if (viewport)
+            viewport.scrollTop = viewport.scrollHeight - pending;
+        return true;
+    }
+    /** @private Jumps the viewport to the newest message without animation. */
+    _stickToBottom() {
+        const viewport = this._viewport()?.nativeElement;
+        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: ["viewport"], descendants: true, isSignal: true }, { propertyName: "_content", first: true, predicate: ["content"], descendants: true, isSignal: true }], hostDirectives: [{ directive: i1.MlvDensityDirective, inputs: ["mlvDensity", "mlvDensity"] }], ngImport: i0, template: "<div\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()) {\n    @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    }\n  } @else {\n    @if (loadingOlder()) {\n      <div class=\"mlv-chat__older-loader\">\n        <mlv-loader variant=\"circle\" [indeterminate]=\"true\" [size]=\"20\" [strokeWidth]=\"2\" />\n        <span class=\"cdk-visually-hidden\">{{ _i18n().loadingOlder }}</span>\n      </div>\n    }\n    @for (item of _renderItems(); track item.id) {\n      @switch (item.kind) {\n        @case ('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        }\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 {\n                  {{ _usersMap().get(item.authorId)?.name }}\n                }\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        }\n      }\n    }\n    @if (_typingUserObjects().length) {\n      <mlv-chat-typing class=\"mlv-chat__typing\" [users]=\"_typingUserObjects()\" />\n    }\n  }\n  </div>\n</div>\n@if (!_pinned() && _newCount() > 0) {\n  <button type=\"button\" class=\"mlv-chat__pill\" (click)=\"_scrollToBottom('smooth')\">\n    {{ _i18n().newMessages | mlvTranslate: { count: _newCount() } }}\n  </button>\n}\n", styles: ["@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}.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__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) solid var(--mlv-border-focus);outline-offset:.125rem}[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: "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,
+                    ], 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: "<div\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()) {\n    @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    }\n  } @else {\n    @if (loadingOlder()) {\n      <div class=\"mlv-chat__older-loader\">\n        <mlv-loader variant=\"circle\" [indeterminate]=\"true\" [size]=\"20\" [strokeWidth]=\"2\" />\n        <span class=\"cdk-visually-hidden\">{{ _i18n().loadingOlder }}</span>\n      </div>\n    }\n    @for (item of _renderItems(); track item.id) {\n      @switch (item.kind) {\n        @case ('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        }\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 {\n                  {{ _usersMap().get(item.authorId)?.name }}\n                }\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        }\n      }\n    }\n    @if (_typingUserObjects().length) {\n      <mlv-chat-typing class=\"mlv-chat__typing\" [users]=\"_typingUserObjects()\" />\n    }\n  }\n  </div>\n</div>\n@if (!_pinned() && _newCount() > 0) {\n  <button type=\"button\" class=\"mlv-chat__pill\" (click)=\"_scrollToBottom('smooth')\">\n    {{ _i18n().newMessages | mlvTranslate: { count: _newCount() } }}\n  </button>\n}\n", styles: ["@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}.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__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) solid var(--mlv-border-focus);outline-offset:.125rem}[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: ['viewport', { isSignal: true }] }], _content: [{ type: i0.ViewChild, args: ['content', { isSignal: true }] }] } });
+//# sourceMappingURL=chat.js.map

package/esm2022/chat/lib/chat/chat.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"chat.js","sourceRoot":"","sources":["../../../../../../../libs/core/chat/src/lib/chat/chat.ts","../../../../../../../libs/core/chat/src/lib/chat/chat.html"],"names":[],"mappings":"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","sourcesContent":["import {\n  ChangeDetectionStrategy,\n  Component,\n  type ElementRef,\n  ViewEncapsulation,\n  afterRenderEffect,\n  computed,\n  contentChild,\n  contentChildren,\n  effect,\n  inject,\n  input,\n  output,\n  signal,\n  viewChild,\n} from '@angular/core';\nimport { NgTemplateOutlet, formatDate } from '@angular/common';\nimport type { BooleanInput } from '@angular/cdk/coercion';\nimport { coerceBooleanProperty } from '@angular/cdk/coercion';\nimport { MlvResizeObserverService } from '@malva-ui/cdk/utils';\nimport { MLV_DENSITY_ELEMENT, MlvDensityDirective } from '@malva-ui/cdk/density';\nimport { MLV_CHAT_I18N, MlvTranslatePipe } from '@malva-ui/i18n';\nimport { MlvAvatar, MlvColorFromTextPipe } from '@malva-ui/core/avatar';\nimport { MlvLoader } from '@malva-ui/core/loader';\nimport { MlvSkeleton } from '@malva-ui/core/skeleton';\nimport type {\n  MlvChatAttachment,\n  MlvChatMessageData,\n  MlvChatMessageStatus,\n  MlvChatUser,\n} from '../chat.types';\nimport { buildChatRenderList, toChatDate } from '../chat-render-list';\nimport { MLV_CHAT_MESSAGE_DEFS, MLV_CHAT_USERS } from '../chat-tokens';\nimport { MlvChatMessage } from '../chat-message/chat-message';\nimport { MlvChatDate } from '../chat-date/chat-date';\nimport { MlvChatTyping } from '../chat-typing/chat-typing';\nimport { MlvChatAudioService } from '../chat-audio/chat-audio.service';\nimport { MlvChatAuthorDef } from '../defs/chat-author-def';\nimport { MlvChatDateDef } from '../defs/chat-date-def';\nimport { MlvChatMessageDef } from '../defs/chat-message-def';\n\n/** Skeleton rows rendered while the first page loads. */\nconst SKELETON_ROWS: ReadonlyArray<{ own: boolean; width: string }> = [\n  { own: false, width: '55%' },\n  { own: false, width: '35%' },\n  { own: true, width: '45%' },\n  { own: false, width: '65%' },\n  { own: true, width: '30%' },\n  { own: false, width: '50%' },\n];\n\n/**\n * Scrollable chat surface. Renders an oldest→newest `messages` array as author\n * groups with date separators, delivery statuses, replies, media, and audio.\n * Grouping is computed internally — consumers only supply flat data.\n */\n@Component({\n  selector: 'mlv-chat',\n  templateUrl: './chat.html',\n  styleUrl: './chat.scss',\n  encapsulation: ViewEncapsulation.None,\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  imports: [\n    NgTemplateOutlet,\n    MlvTranslatePipe,\n    MlvAvatar,\n    MlvColorFromTextPipe,\n    MlvLoader,\n    MlvSkeleton,\n    MlvChatMessage,\n    MlvChatDate,\n    MlvChatTyping,\n  ],\n  providers: [\n    MlvChatAudioService,\n    { provide: MLV_DENSITY_ELEMENT, useValue: 'chat' },\n    { provide: MLV_CHAT_USERS, useFactory: () => inject(MlvChat)._usersMap },\n    { provide: MLV_CHAT_MESSAGE_DEFS, useFactory: () => inject(MlvChat)._defsMap },\n  ],\n  hostDirectives: [{ directive: MlvDensityDirective, inputs: ['mlvDensity'] }],\n  host: { class: 'mlv-chat' },\n})\nexport class MlvChat {\n  /** @private Distance from the bottom under which the view counts as pinned. */\n  private static readonly _PIN_THRESHOLD = 48;\n\n  /** @private Distance from the top under which the window grows / `loadOlder` fires. */\n  private static readonly _TOP_THRESHOLD = 150;\n\n  /** @private Number of messages the render window grows by per step. */\n  private static readonly _WINDOW_STEP = 50;\n\n  /** Messages ordered oldest → newest. */\n  readonly messages = input.required<MlvChatMessageData[]>();\n\n  /** Id of the current user; messages authored by it render as own messages. */\n  readonly selfId = input.required<string>();\n\n  /** Known participants, used for avatars and author names. */\n  readonly users = input<MlvChatUser[]>([]);\n\n  /** Renders skeleton bubbles instead of content while the first page loads. */\n  readonly loading = input<boolean, BooleanInput>(false, {\n    transform: coerceBooleanProperty,\n  });\n\n  /** Shows the top loader while an older page is being fetched. */\n  readonly loadingOlder = input<boolean, BooleanInput>(false, {\n    transform: coerceBooleanProperty,\n  });\n\n  /** Whether more history exists; gates the `loadOlder` output. */\n  readonly hasOlder = input<boolean, BooleanInput>(false, {\n    transform: coerceBooleanProperty,\n  });\n\n  /** Ids of users currently composing a message. */\n  readonly typingUsers = input<string[]>([]);\n\n  /** Maximum gap in minutes between messages of one author group. */\n  readonly groupWindow = input<number>(5);\n\n  /** Author slot visibility; `'auto'` shows it once more than two users are known. */\n  readonly showAuthors = input<'auto' | boolean>('auto');\n\n  /** Whether calendar-day separators are rendered. */\n  readonly dateSeparators = input<boolean, BooleanInput>(true, {\n    transform: coerceBooleanProperty,\n  });\n\n  /** Number of newest messages kept in the DOM. */\n  readonly windowSize = input<number>(150);\n\n  /** Emits when the user scrolls past the oldest rendered message and more history exists. */\n  readonly loadOlder = output<void>();\n\n  /** Emits the failed message whose retry action was activated. */\n  readonly retry = output<MlvChatMessageData>();\n\n  /** Emits the message and attachment of an activated media cell. */\n  readonly mediaClick = output<{ message: MlvChatMessageData; attachment: MlvChatAttachment }>();\n\n  /** Emits the message and its embedded original when a reply quote is activated. */\n  readonly replyClick = output<{ message: MlvChatMessageData; replyTo: MlvChatMessageData }>();\n\n  /** @internal Chat i18n strings. */\n  protected readonly _i18n = inject(MLV_CHAT_I18N);\n\n  /** @internal Author slot template, when a consumer provides one. */\n  protected readonly authorDef = contentChild(MlvChatAuthorDef);\n\n  /** @internal Date separator template, when a consumer provides one. */\n  protected readonly dateDef = contentChild(MlvChatDateDef);\n\n  /** @private Custom message-type templates projected by the consumer. */\n  private readonly _messageDefs = contentChildren(MlvChatMessageDef);\n\n  /** @internal id → user map, provided to bubbles through `MLV_CHAT_USERS`. */\n  readonly _usersMap = computed(() => new Map(this.users().map((u) => [u.id, u])));\n\n  /** @internal type → def map, provided to bubbles through `MLV_CHAT_MESSAGE_DEFS`. */\n  readonly _defsMap = computed(\n    () =>\n      new Map(\n        this._messageDefs()\n          .filter((def) => def.mlvChatMessageDefType())\n          .map((def) => [def.mlvChatMessageDefType(), def]),\n      ),\n  );\n\n  /** @internal Number of newest messages currently rendered; grown by the scroll engine. */\n  protected readonly _renderCount = signal(150);\n\n  /** @internal Newest slice of `messages` kept in the DOM. */\n  protected readonly _windowed = computed(() => this.messages().slice(-this._renderCount()));\n\n  /** @internal Flattened author groups and date separators of the render window. */\n  protected readonly _renderItems = computed(() =>\n    buildChatRenderList(this._windowed(), this.selfId(), this.groupWindow(), this.dateSeparators()),\n  );\n\n  /** @internal Whether the author slot renders above other-authored groups. */\n  protected readonly _authorsVisible = computed(() => {\n    const mode = this.showAuthors();\n    return mode === 'auto' ? this.users().length > 2 : mode;\n  });\n\n  /** @internal Typing users resolved against the known participants. */\n  protected readonly _typingUserObjects = computed(() =>\n    this.typingUsers()\n      .map((id) => this._usersMap().get(id))\n      .filter((user): user is MlvChatUser => !!user),\n  );\n\n  /** @internal Placeholder rows rendered while `loading` is set. */\n  protected readonly _skeletonRows = SKELETON_ROWS;\n\n  /** @internal The scroll container; measured by the scroll engine. */\n  protected readonly _viewport = viewChild<ElementRef<HTMLElement>>('viewport');\n\n  /** @private Inner content wrapper; its height changes drive re-pinning. */\n  private readonly _content = viewChild<ElementRef<HTMLElement>>('content');\n\n  /** @private Shared resize observer used to follow content height changes. */\n  private readonly _resizeObserver = inject(MlvResizeObserverService);\n\n  /** @internal True while the view sits at (or near) the newest message. */\n  protected readonly _pinned = signal(true);\n\n  /** @internal Messages appended while unpinned; drives the new-messages pill. */\n  protected readonly _newCount = signal(0);\n\n  /** @internal Ids of messages that arrived live, so only those animate in. */\n  protected readonly _liveIds = signal<ReadonlySet<string>>(new Set());\n\n  /** @private First/last ids of the previous `messages` value, to classify changes. */\n  private _edgeIds: { first: string | null; last: string | null } = { first: null, last: null };\n\n  /** @private Distance from the viewport bottom captured before a prepend renders. */\n  private _pendingCompensation: number | null = null;\n\n  constructor() {\n    // The window starts at the configured size; the scroll engine grows it as\n    // the user scrolls up and trims it back once they return to the bottom.\n    effect(() => this._renderCount.set(this.windowSize()));\n\n    effect(() => {\n      const list = this.messages();\n      const first = list[0]?.id ?? null;\n      const last = list[list.length - 1]?.id ?? null;\n      const previous = this._edgeIds;\n      this._edgeIds = { first, last };\n      if (previous.last === null) return;\n\n      const appended = last !== null && last !== previous.last;\n      const prepended = first !== null && first !== previous.first && last === previous.last;\n\n      if (prepended) this._captureCompensation();\n      if (appended) {\n        this._markLiveMessages(list, previous.last);\n        if (this._pinned()) this._scrollToBottom('smooth');\n        else this._newCount.update((count) => count + 1);\n      }\n    });\n\n    afterRenderEffect(() => {\n      // Re-runs whenever the rendered content changes.\n      this._renderItems();\n      this.loading();\n      if (this._applyCompensation()) return;\n      if (this._pinned()) this._stickToBottom();\n    });\n\n    // Renders alone are not enough: media can load late and `content-visibility`\n    // reveals height without a change-detection pass. Following the content box\n    // keeps the newest message in view in all of those cases.\n    effect((onCleanup) => {\n      const content = this._content()?.nativeElement;\n      if (!content) return;\n      const subscription = this._resizeObserver.observe(content).subscribe(() => {\n        if (this._pendingCompensation === null && this._pinned()) this._stickToBottom();\n      });\n      onCleanup(() => subscription.unsubscribe());\n    });\n  }\n\n  /** @internal Re-reads the viewport metrics after a scroll event. */\n  protected _onScroll(): void {\n    const viewport = this._viewport()?.nativeElement;\n    if (!viewport) return;\n    this._evaluateScroll(viewport.scrollTop, viewport.scrollHeight, viewport.clientHeight);\n  }\n\n  /**\n   * @internal Updates pinning and top-edge behavior from raw scroll metrics.\n   * Split from `_onScroll` so the logic is testable without layout.\n   */\n  protected _evaluateScroll(scrollTop: number, scrollHeight: number, clientHeight: number): void {\n    const bottomDistance = scrollHeight - scrollTop - clientHeight;\n    const pinned = bottomDistance < MlvChat._PIN_THRESHOLD;\n\n    if (pinned && !this._pinned()) {\n      this._newCount.set(0);\n      // Trimming is invisible while the view is anchored to the newest message.\n      this._renderCount.set(this.windowSize());\n    }\n    this._pinned.set(pinned);\n\n    if (scrollTop < MlvChat._TOP_THRESHOLD) this._growWindow();\n  }\n\n  /** @internal Grows the render window, or asks for an older page once it is exhausted. */\n  protected _growWindow(): void {\n    const total = this.messages().length;\n    if (this._renderCount() < total) {\n      this._captureCompensation();\n      this._renderCount.update((count) => Math.min(count + MlvChat._WINDOW_STEP, total));\n      return;\n    }\n    if (this.hasOlder() && !this.loadingOlder()) this.loadOlder.emit();\n  }\n\n  /** @internal Scrolls to the newest message and clears the pill counter. */\n  protected _scrollToBottom(behavior: ScrollBehavior = 'smooth'): void {\n    const viewport = this._viewport()?.nativeElement;\n    this._newCount.set(0);\n    this._pinned.set(true);\n    if (!viewport) return;\n    viewport.scrollTo?.({ top: viewport.scrollHeight, behavior });\n  }\n\n  /**\n   * @private Records every message newer than the previous last id so only\n   * live arrivals animate in — initial load, window growth, and prepended\n   * history render instantly.\n   */\n  private _markLiveMessages(list: readonly MlvChatMessageData[], previousLast: string): void {\n    const previousIndex = list.findIndex((message) => message.id === previousLast);\n    const fresh = list.slice(previousIndex + 1).map((message) => message.id);\n    if (!fresh.length) return;\n    this._liveIds.update((ids) => {\n      const next = new Set(ids);\n      for (const id of fresh) next.add(id);\n      return next;\n    });\n  }\n\n  /** @private Records the distance from the bottom so a prepend keeps the view still. */\n  private _captureCompensation(): void {\n    const viewport = this._viewport()?.nativeElement;\n    if (viewport) this._pendingCompensation = viewport.scrollHeight - viewport.scrollTop;\n  }\n\n  /**\n   * @private Restores the captured distance once the taller content has rendered.\n   * Returns true when a compensation was applied, so the caller skips pinning.\n   */\n  private _applyCompensation(): boolean {\n    const pending = this._pendingCompensation;\n    if (pending === null) return false;\n    this._pendingCompensation = null;\n    const viewport = this._viewport()?.nativeElement;\n    if (viewport) viewport.scrollTop = viewport.scrollHeight - pending;\n    return true;\n  }\n\n  /** @private Jumps the viewport to the newest message without animation. */\n  private _stickToBottom(): void {\n    const viewport = this._viewport()?.nativeElement;\n    if (viewport) viewport.scrollTop = viewport.scrollHeight;\n  }\n\n  /** @internal Composes the accessible label of one message article. */\n  protected _messageLabel(message: MlvChatMessageData, own: boolean): string {\n    const author = own\n      ? (this._usersMap().get(this.selfId())?.name ?? '')\n      : (this._usersMap().get(message.authorId)?.name ?? '');\n    const time = formatDate(toChatDate(message.timestamp), 'shortTime', 'en-US');\n    const status = own && message.status ? this._statusLabel(message.status) : '';\n    return [author, time, status].filter(Boolean).join(', ');\n  }\n\n  /** @private Maps a delivery status to its translated label. */\n  private _statusLabel(status: MlvChatMessageStatus): string {\n    const i18n = this._i18n();\n    switch (status) {\n      case 'sending':\n        return i18n.statusSending;\n      case 'sent':\n        return i18n.statusSent;\n      case 'delivered':\n        return i18n.statusDelivered;\n      case 'read':\n        return i18n.statusRead;\n      case 'failed':\n        return i18n.statusFailed;\n    }\n  }\n}\n","<div\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()) {\n    @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    }\n  } @else {\n    @if (loadingOlder()) {\n      <div class=\"mlv-chat__older-loader\">\n        <mlv-loader variant=\"circle\" [indeterminate]=\"true\" [size]=\"20\" [strokeWidth]=\"2\" />\n        <span class=\"cdk-visually-hidden\">{{ _i18n().loadingOlder }}</span>\n      </div>\n    }\n    @for (item of _renderItems(); track item.id) {\n      @switch (item.kind) {\n        @case ('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        }\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 {\n                  {{ _usersMap().get(item.authorId)?.name }}\n                }\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        }\n      }\n    }\n    @if (_typingUserObjects().length) {\n      <mlv-chat-typing class=\"mlv-chat__typing\" [users]=\"_typingUserObjects()\" />\n    }\n  }\n  </div>\n</div>\n@if (!_pinned() && _newCount() > 0) {\n  <button type=\"button\" class=\"mlv-chat__pill\" (click)=\"_scrollToBottom('smooth')\">\n    {{ _i18n().newMessages | mlvTranslate: { count: _newCount() } }}\n  </button>\n}\n"]}