stream-chat-angular 4.63.0 → 4.64.0

package/fesm2015/stream-chat-angular.js

@@ -20,7 +20,7 @@ import transliterate from '@stream-io/transliterate';
 import * as i8$1 from 'angular-mentions';
 import { MentionModule } from 'angular-mentions';
 
-const version = '4.63.0';
+const version = '4.64.0';
 
 /**
  * The `NotificationService` can be used to add or remove notifications. By default the [`NotificationList`](../components/NotificationListComponent.mdx) component displays the currently active notifications.
@@ -2676,6 +2676,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.5", ngImpor
  * A central location for registering your custom templates to override parts of the chat application.
  *
  * For code examples to the different customizations see our [customizations example application](https://github.com/GetStream/stream-chat-angular/tree/master/projects/customizations-example), specifically the [AppComponent](https://github.com/GetStream/stream-chat-angular/tree/master/projects/customizations-example/src/app) (see [README](https://github.com/GetStream/stream-chat-angular/blob/master/README.md#customization-examples) for instructions on how to start the application).
+ *
+ * You can find the type definitions of the context that is provided for each template [on GitHub](https://github.com/GetStream/stream-chat-angular/blob/master/projects/stream-chat-angu)
  */
 class CustomTemplatesService {
     constructor() {
@@ -2685,116 +2687,96 @@ class CustomTemplatesService {
         this.mentionAutocompleteItemTemplate$ = new BehaviorSubject(undefined);
         /**
          * The autocomplete list item template for commands (used in the [`AutocompleteTextareaComponent`](../components/AutocompleteTextareaComponent.mdx))
-         *
-         * For code examples to the different customizations see our [customizations example application](https://github.com/GetStream/stream-chat-angular/tree/master/projects/customizations-example), specifically the [AppComponent](https://github.com/GetStream/stream-chat-angular/tree/master/projects/customizations-example/src/app) (see [README](https://github.com/GetStream/stream-chat-angular/blob/master/README.md#customization-examples) for instructions on how to start the application).
          */
         this.commandAutocompleteItemTemplate$ = new BehaviorSubject(undefined);
         /**
          * Template used to display an item in the [channel list](../components/ChannelListComponent.mdx) (instead of the default [channal list item](../components/ChannelPreviewComponent.mdx))
          *
-         * For code examples to the different customizations see our [customizations example application](https://github.com/GetStream/stream-chat-angular/tree/master/projects/customizations-example), specifically the [AppComponent](https://github.com/GetStream/stream-chat-angular/tree/master/projects/customizations-example/src/app) (see [README](https://github.com/GetStream/stream-chat-angular/blob/master/README.md#customization-examples) for instructions on how to start the application).
          */
         this.channelPreviewTemplate$ = new BehaviorSubject(undefined);
         /**
          * The message input template used when editing a message (instead of the [default message input](../components/MessageInputComponent.mdx))
          *
-         * For code examples to the different customizations see our [customizations example application](https://github.com/GetStream/stream-chat-angular/tree/master/projects/customizations-example), specifically the [AppComponent](https://github.com/GetStream/stream-chat-angular/tree/master/projects/customizations-example/src/app) (see [README](https://github.com/GetStream/stream-chat-angular/blob/master/README.md#customization-examples) for instructions on how to start the application).
          */
         this.messageInputTemplate$ = new BehaviorSubject(undefined);
         /**
          * The template used for displaying a [mention inside a message](../code-examples/mention-actions.mdx)
          *
-         * For code examples to the different customizations see our [customizations example application](https://github.com/GetStream/stream-chat-angular/tree/master/projects/customizations-example), specifically the [AppComponent](https://github.com/GetStream/stream-chat-angular/tree/master/projects/customizations-example/src/app) (see [README](https://github.com/GetStream/stream-chat-angular/blob/master/README.md#customization-examples) for instructions on how to start the application).
          */
         this.mentionTemplate$ = new BehaviorSubject(undefined);
         /**
          * The template for [emoji picker](../code-examples/emoji-picker.mdx)
          *
-         * For code examples to the different customizations see our [customizations example application](https://github.com/GetStream/stream-chat-angular/tree/master/projects/customizations-example), specifically the [AppComponent](https://github.com/GetStream/stream-chat-angular/tree/master/projects/customizations-example/src/app) (see [README](https://github.com/GetStream/stream-chat-angular/blob/master/README.md#customization-examples) for instructions on how to start the application).
          */
         this.emojiPickerTemplate$ = new BehaviorSubject(undefined);
         /**
          * The typing indicator template used in the [message list](../components/MessageListComponent.mdx)
          *
-         * For code examples to the different customizations see our [customizations example application](https://github.com/GetStream/stream-chat-angular/tree/master/projects/customizations-example), specifically the [AppComponent](https://github.com/GetStream/stream-chat-angular/tree/master/projects/customizations-example/src/app) (see [README](https://github.com/GetStream/stream-chat-angular/blob/master/README.md#customization-examples) for instructions on how to start the application).
          */
         this.typingIndicatorTemplate$ = new BehaviorSubject(undefined);
         /**
          * The template used to display a message in the [message list](../components/MessageListComponent.mdx) (instead of the [default message component](../components/MessageComponent.mdx))
          *
-         * For code examples to the different customizations see our [customizations example application](https://github.com/GetStream/stream-chat-angular/tree/master/projects/customizations-example), specifically the [AppComponent](https://github.com/GetStream/stream-chat-angular/tree/master/projects/customizations-example/src/app) (see [README](https://github.com/GetStream/stream-chat-angular/blob/master/README.md#customization-examples) for instructions on how to start the application).
          */
         this.messageTemplate$ = new BehaviorSubject(undefined);
         /**
          * The template for channel actions displayed in the [channel header](../components/ChannelHeaderComponent.mdx) (by default no channel action is displayed)
          *
-         * For code examples to the different customizations see our [customizations example application](https://github.com/GetStream/stream-chat-angular/tree/master/projects/customizations-example), specifically the [AppComponent](https://github.com/GetStream/stream-chat-angular/tree/master/projects/customizations-example/src/app) (see [README](https://github.com/GetStream/stream-chat-angular/blob/master/README.md#customization-examples) for instructions on how to start the application).
          */
         this.channelActionsTemplate$ = new BehaviorSubject(undefined);
         /**
          * The template used to display attachments of a [message](../components/MessageComponent.mdx) (instead of the [default attachment list](../components/AttachmentListComponent.mdx))
          *
-         * For code examples to the different customizations see our [customizations example application](https://github.com/GetStream/stream-chat-angular/tree/master/projects/customizations-example), specifically the [AppComponent](https://github.com/GetStream/stream-chat-angular/tree/master/projects/customizations-example/src/app) (see [README](https://github.com/GetStream/stream-chat-angular/blob/master/README.md#customization-examples) for instructions on how to start the application).
          */
         this.attachmentListTemplate$ = new BehaviorSubject(undefined);
         /**
          * The template used to display attachments in the [message input](../components/MessageInputComponent.mdx) component (instead of the [default attachment preview](../components/AttachmentPreviewListComponent.mdx))
          *
-         * For code examples to the different customizations see our [customizations example application](https://github.com/GetStream/stream-chat-angular/tree/master/projects/customizations-example), specifically the [AppComponent](https://github.com/GetStream/stream-chat-angular/tree/master/projects/customizations-example/src/app) (see [README](https://github.com/GetStream/stream-chat-angular/blob/master/README.md#customization-examples) for instructions on how to start the application).
          */
         this.attachmentPreviewListTemplate$ = new BehaviorSubject(undefined);
         /**
          * The template used to display avatars for channels and users (instead of the [default avatar](../components/AvatarComponent.mdx))
          *
-         * For code examples to the different customizations see our [customizations example application](https://github.com/GetStream/stream-chat-angular/tree/master/projects/customizations-example), specifically the [AppComponent](https://github.com/GetStream/stream-chat-angular/tree/master/projects/customizations-example/src/app) (see [README](https://github.com/GetStream/stream-chat-angular/blob/master/README.md#customization-examples) for instructions on how to start the application).
          */
         this.avatarTemplate$ = new BehaviorSubject(undefined);
         /**
          * Template for displaying icons (instead of the [default icon component](../components/IconComponent.mdx))
          *
-         * For code examples to the different customizations see our [customizations example application](https://github.com/GetStream/stream-chat-angular/tree/master/projects/customizations-example), specifically the [AppComponent](https://github.com/GetStream/stream-chat-angular/tree/master/projects/customizations-example/src/app) (see [README](https://github.com/GetStream/stream-chat-angular/blob/master/README.md#customization-examples) for instructions on how to start the application).
          */
         this.iconTemplate$ = new BehaviorSubject(undefined);
         /**
          * Template for displaying the loading indicator (instead of the [default loading indicator](../components/LoadingIndicatorComponent.mdx))
          *
-         * For code examples to the different customizations see our [customizations example application](https://github.com/GetStream/stream-chat-angular/tree/master/projects/customizations-example), specifically the [AppComponent](https://github.com/GetStream/stream-chat-angular/tree/master/projects/customizations-example/src/app) (see [README](https://github.com/GetStream/stream-chat-angular/blob/master/README.md#customization-examples) for instructions on how to start the application).
          */
         this.loadingIndicatorTemplate$ = new BehaviorSubject(undefined);
         /**
          * Template for displaying the message actions box (instead of the [default message actions box](../components/MessageActionsBoxComponent.mdx))
          *
-         * For code examples to the different customizations see our [customizations example application](https://github.com/GetStream/stream-chat-angular/tree/master/projects/customizations-example), specifically the [AppComponent](https://github.com/GetStream/stream-chat-angular/tree/master/projects/customizations-example/src/app) (see [README](https://github.com/GetStream/stream-chat-angular/blob/master/README.md#customization-examples) for instructions on how to start the application).
          */
         this.messageActionsBoxTemplate$ = new BehaviorSubject(undefined);
         /**
          * The template used for displaying an item in the [message actions box](../components/MessageActionsBoxComponent.mdx)
          *
-         * For code examples to the different customizations see our [customizations example application](https://github.com/GetStream/stream-chat-angular/tree/master/projects/customizations-example), specifically the [AppComponent](https://github.com/GetStream/stream-chat-angular/tree/master/projects/customizations-example/src/app) (see [README](https://github.com/GetStream/stream-chat-angular/blob/master/README.md#customization-examples) for instructions on how to start the application).
          */
         this.messageActionsBoxItemTemplate$ = new BehaviorSubject(undefined);
         /**
          * The template used to display the reactions of a [message](../components/MessageComponent.mdx), and the selector to add a reaction to a message (instead of the [default message reactions component](../components/MessageReactionsComponent.mdx))
          *
-         * For code examples to the different customizations see our [customizations example application](https://github.com/GetStream/stream-chat-angular/tree/master/projects/customizations-example), specifically the [AppComponent](https://github.com/GetStream/stream-chat-angular/tree/master/projects/customizations-example/src/app) (see [README](https://github.com/GetStream/stream-chat-angular/blob/master/README.md#customization-examples) for instructions on how to start the application).
          */
         this.messageReactionsTemplate$ = new BehaviorSubject(undefined);
         /**
          * The template used to display a modal window (instead of the [default modal](../components/ModalComponent.mdx))
          *
-         * For code examples to the different customizations see our [customizations example application](https://github.com/GetStream/stream-chat-angular/tree/master/projects/customizations-example), specifically the [AppComponent](https://github.com/GetStream/stream-chat-angular/tree/master/projects/customizations-example/src/app) (see [README](https://github.com/GetStream/stream-chat-angular/blob/master/README.md#customization-examples) for instructions on how to start the application).
          */
         this.modalTemplate$ = new BehaviorSubject(undefined);
         /**
          * The template used to override the [default notification component](../components/NotificationComponent.mdx)
          *
-         * For code examples to the different customizations see our [customizations example application](https://github.com/GetStream/stream-chat-angular/tree/master/projects/customizations-example), specifically the [AppComponent](https://github.com/GetStream/stream-chat-angular/tree/master/projects/customizations-example/src/app) (see [README](https://github.com/GetStream/stream-chat-angular/blob/master/README.md#customization-examples) for instructions on how to start the application).
          */
         this.notificationTemplate$ = new BehaviorSubject(undefined);
         /**
          * The template used for header of a [thread](../components/ThreadComponent.mdx)
          *
-         * For code examples to the different customizations see our [customizations example application](https://github.com/GetStream/stream-chat-angular/tree/master/projects/customizations-example), specifically the [AppComponent](https://github.com/GetStream/stream-chat-angular/tree/master/projects/customizations-example/src/app) (see [README](https://github.com/GetStream/stream-chat-angular/blob/master/README.md#customization-examples) for instructions on how to start the application).
          */
         this.threadHeaderTemplate$ = new BehaviorSubject(undefined);
         /**
@@ -2802,7 +2784,6 @@ class CustomTemplatesService {
          *
          * Displayed for the last message sent by the current user, if the message isn't yet read by anyone
          *
-         * For code examples to the different customizations see our [customizations example application](https://github.com/GetStream/stream-chat-angular/tree/master/projects/customizations-example), specifically the [AppComponent](https://github.com/GetStream/stream-chat-angular/tree/master/projects/customizations-example/src/app) (see [README](https://github.com/GetStream/stream-chat-angular/blob/master/README.md#customization-examples) for instructions on how to start the application).
          */
         this.deliveredStatusTemplate$ = new BehaviorSubject(undefined);
         /**
@@ -2810,7 +2791,6 @@ class CustomTemplatesService {
          *
          * Displayed for the last message sent by the current user, if the message is currently being sent
          *
-         * For code examples to the different customizations see our [customizations example application](https://github.com/GetStream/stream-chat-angular/tree/master/projects/customizations-example), specifically the [AppComponent](https://github.com/GetStream/stream-chat-angular/tree/master/projects/customizations-example/src/app) (see [README](https://github.com/GetStream/stream-chat-angular/blob/master/README.md#customization-examples) for instructions on how to start the application).
          */
         this.sendingStatusTemplate$ = new BehaviorSubject(undefined);
         /**
@@ -2818,25 +2798,21 @@ class CustomTemplatesService {
          *
          * Displayed for the last message sent by the current user, if the message is read at least by one user
          *
-         * For code examples to the different customizations see our [customizations example application](https://github.com/GetStream/stream-chat-angular/tree/master/projects/customizations-example), specifically the [AppComponent](https://github.com/GetStream/stream-chat-angular/tree/master/projects/customizations-example/src/app) (see [README](https://github.com/GetStream/stream-chat-angular/blob/master/README.md#customization-examples) for instructions on how to start the application).
          */
         this.readStatusTemplate$ = new BehaviorSubject(undefined);
         /**
          * Template to display custom metadata inside [message component](../components/MessageComponent.mdx)
          *
-         * For code examples to the different customizations see our [customizations example application](https://github.com/GetStream/stream-chat-angular/tree/master/projects/customizations-example), specifically the [AppComponent](https://github.com/GetStream/stream-chat-angular/tree/master/projects/customizations-example/src/app) (see [README](https://github.com/GetStream/stream-chat-angular/blob/master/README.md#customization-examples) for instructions on how to start the application).
          */
         this.customMessageMetadataTemplate$ = new BehaviorSubject(undefined);
         /**
          * The template used to display additional information about a channel under the channel name inside the [channel header component](../components/ChannelHeaderComponent.mdx)
          *
-         * For code examples to the different customizations see our [customizations example application](https://github.com/GetStream/stream-chat-angular/tree/master/projects/customizations-example), specifically the [AppComponent](https://github.com/GetStream/stream-chat-angular/tree/master/projects/customizations-example/src/app) (see [README](https://github.com/GetStream/stream-chat-angular/blob/master/README.md#customization-examples) for instructions on how to start the application).
          */
         this.channelHeaderInfoTemplate$ = new BehaviorSubject(undefined);
         /**
          * The template used for displaying file upload/attachment selector inside the [message input](../components/MessageInputComponent.mdx)
          *
-         * For code examples to the different customizations see our [customizations example application](https://github.com/GetStream/stream-chat-angular/tree/master/projects/customizations-example), specifically the [AppComponent](https://github.com/GetStream/stream-chat-angular/tree/master/projects/customizations-example/src/app) (see [README](https://github.com/GetStream/stream-chat-angular/blob/master/README.md#customization-examples) for instructions on how to start the application).
          */
         this.customAttachmentUploadTemplate$ = new BehaviorSubject(undefined);
         /**
@@ -2903,6 +2879,11 @@ class CustomTemplatesService {
          * The template used to display the [message bounce prompt](../components/MessageBouncePromptComponent.mdx)
          */
         this.messageBouncePromptTemplate$ = new BehaviorSubject(undefined);
+        /**
+         * Template used to display the channel information inside the [channel list item](../components/ChannelPreviewComponent.mdx)
+         *
+         */
+        this.channelPreviewInfoTemplate$ = new BehaviorSubject(undefined);
     }
 }
 CustomTemplatesService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.5", ngImport: i0, type: CustomTemplatesService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
@@ -4956,14 +4937,15 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.5", ngImpor
  * The `ChannelPreview` component displays a channel preview in the channel list, it consists of the image, name and latest message of the channel.
  */
 class ChannelPreviewComponent {
-    constructor(channelService, ngZone, chatClientService, messageService) {
+    constructor(channelService, ngZone, chatClientService, messageService, customTemplatesService) {
         this.channelService = channelService;
         this.ngZone = ngZone;
         this.chatClientService = chatClientService;
+        this.customTemplatesService = customTemplatesService;
         this.isActive = false;
         this.isUnreadMessageWasCalled = false;
         this.isUnread = false;
-        this.latestMessage = 'streamChat.Nothing yet...';
+        this.latestMessageText = 'streamChat.Nothing yet...';
         this.subscriptions = [];
         this.canSendReadEvents = true;
         this.displayAs = messageService.displayAs;
@@ -5023,7 +5005,8 @@ class ChannelPreviewComponent {
         this.ngZone.run(() => {
             var _a, _b, _c;
             if (((_a = this.channel) === null || _a === void 0 ? void 0 : _a.state.latestMessages.length) === 0) {
-                this.latestMessage = 'streamChat.Nothing yet...';
+                this.latestMessage = undefined;
+                this.latestMessageText = 'streamChat.Nothing yet...';
                 return;
             }
             if (!event.message ||
@@ -5035,15 +5018,16 @@ class ChannelPreviewComponent {
         });
     }
     setLatestMessage(message) {
+        this.latestMessage = message;
         if (message === null || message === void 0 ? void 0 : message.deleted_at) {
-            this.latestMessage = 'streamChat.Message deleted';
+            this.latestMessageText = 'streamChat.Message deleted';
         }
         else if (message === null || message === void 0 ? void 0 : message.text) {
-            this.latestMessage =
+            this.latestMessageText =
                 getMessageTranslation(message, this.channel, this.chatClientService.chatClient.user) || message.text;
         }
         else if ((message === null || message === void 0 ? void 0 : message.attachments) && message.attachments.length) {
-            this.latestMessage = 'streamChat.🏙 Attachment...';
+            this.latestMessageText = 'streamChat.🏙 Attachment...';
         }
     }
     updateUnreadState() {
@@ -5057,8 +5041,8 @@ class ChannelPreviewComponent {
         this.isUnread = !!this.unreadCount;
     }
 }
-ChannelPreviewComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.5", ngImport: i0, type: ChannelPreviewComponent, deps: [{ token: ChannelService }, { token: i0.NgZone }, { token: ChatClientService }, { token: MessageService }], target: i0.ɵɵFactoryTarget.Component });
-ChannelPreviewComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.5", type: ChannelPreviewComponent, selector: "stream-channel-preview", inputs: { channel: "channel" }, ngImport: i0, template: "<button\n  class=\"str-chat__channel-preview-messenger str-chat__channel-preview\"\n  [class.str-chat__channel-preview-messenger--active]=\"isActive\"\n  [class.str-chat__channel-preview--active]=\"isActive\"\n  [class.str-chat__channel-preview-messenger--unread]=\"isUnread\"\n  (click)=\"setAsActiveChannel()\"\n  data-testid=\"channel-preview-container\"\n>\n  <div class=\"str-chat__channel-preview-messenger--left\">\n    <stream-avatar-placeholder\n      name=\"{{ avatarName }}\"\n      imageUrl=\"{{ avatarImage }}\"\n      type=\"channel\"\n      [channel]=\"channel\"\n      location=\"channel-preview\"\n      [size]=\"49\"\n    ></stream-avatar-placeholder>\n  </div>\n  <div\n    class=\"\n      str-chat__channel-preview-messenger--right str-chat__channel-preview-end\n    \"\n  >\n    <div class=\"str-chat__channel-preview-end-first-row\">\n      <div class=\"str-chat__channel-preview-messenger--name\">\n        <span data-testid=\"channel-preview-title\">{{ title }}</span>\n      </div>\n      <div\n        data-testid=\"unread-badge\"\n        *ngIf=\"unreadCount\"\n        class=\"str-chat__channel-preview-unread-badge\"\n      >\n        {{ unreadCount }}\n      </div>\n    </div>\n    <div\n      data-testid=\"latest-message\"\n      class=\"str-chat__channel-preview-messenger--last-message\"\n    >\n      <ng-container *ngIf=\"displayAs === 'text'; else asHTML\">\n        {{ latestMessage | translate }}\n      </ng-container>\n      <ng-template #asHTML>\n        <span\n          data-testid=\"html-content\"\n          [innerHTML]=\"latestMessage | translate\"\n        ></span>\n      </ng-template>\n    </div>\n  </div>\n</button>\n", components: [{ type: AvatarPlaceholderComponent, selector: "stream-avatar-placeholder", inputs: ["name", "imageUrl", "size", "location", "channel", "user", "type", "initialsType", "showOnlineIndicator"] }], directives: [{ type: i8.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], pipes: { "translate": i6.TranslatePipe } });
+ChannelPreviewComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.5", ngImport: i0, type: ChannelPreviewComponent, deps: [{ token: ChannelService }, { token: i0.NgZone }, { token: ChatClientService }, { token: MessageService }, { token: CustomTemplatesService }], target: i0.ɵɵFactoryTarget.Component });
+ChannelPreviewComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.5", type: ChannelPreviewComponent, selector: "stream-channel-preview", inputs: { channel: "channel" }, ngImport: i0, template: "<button\n  class=\"str-chat__channel-preview-messenger str-chat__channel-preview\"\n  [class.str-chat__channel-preview-messenger--active]=\"isActive\"\n  [class.str-chat__channel-preview--active]=\"isActive\"\n  [class.str-chat__channel-preview-messenger--unread]=\"isUnread\"\n  (click)=\"setAsActiveChannel()\"\n  data-testid=\"channel-preview-container\"\n>\n  <div class=\"str-chat__channel-preview-messenger--left\">\n    <stream-avatar-placeholder\n      name=\"{{ avatarName }}\"\n      imageUrl=\"{{ avatarImage }}\"\n      type=\"channel\"\n      [channel]=\"channel\"\n      location=\"channel-preview\"\n      [size]=\"49\"\n    ></stream-avatar-placeholder>\n  </div>\n  <div\n    class=\"\n      str-chat__channel-preview-messenger--right str-chat__channel-preview-end\n    \"\n  >\n    <ng-container\n      *ngTemplateOutlet=\"\n        (customTemplatesService.channelPreviewInfoTemplate$ | async) ||\n          defaultChannelInfo;\n        context: {\n          channelDisplayTitle: title,\n          channel: channel,\n          unreadCount: unreadCount,\n          latestMessageText: latestMessageText,\n          latestMessage: latestMessage\n        }\n      \"\n    ></ng-container>\n    <ng-template\n      #defaultChannelInfo\n      let-channelDisplayTitle=\"channelDisplayTitle\"\n      let-unreadCount=\"unreadCount\"\n      let-latestMessageText=\"latestMessageText\"\n    >\n      <div class=\"str-chat__channel-preview-end-first-row\">\n        <div class=\"str-chat__channel-preview-messenger--name\">\n          <span data-testid=\"channel-preview-title\">{{\n            channelDisplayTitle\n          }}</span>\n        </div>\n        <div\n          data-testid=\"unread-badge\"\n          *ngIf=\"unreadCount\"\n          class=\"str-chat__channel-preview-unread-badge\"\n        >\n          {{ unreadCount }}\n        </div>\n      </div>\n      <div\n        data-testid=\"latest-message\"\n        class=\"str-chat__channel-preview-messenger--last-message\"\n      >\n        <ng-container *ngIf=\"displayAs === 'text'; else asHTML\">\n          {{ latestMessageText | translate }}\n        </ng-container>\n        <ng-template #asHTML>\n          <span\n            data-testid=\"html-content\"\n            [innerHTML]=\"latestMessageText | translate\"\n          ></span>\n        </ng-template>\n      </div>\n    </ng-template>\n  </div>\n</button>\n", components: [{ type: AvatarPlaceholderComponent, selector: "stream-avatar-placeholder", inputs: ["name", "imageUrl", "size", "location", "channel", "user", "type", "initialsType", "showOnlineIndicator"] }], directives: [{ type: i8.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i8.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], pipes: { "async": i8.AsyncPipe, "translate": i6.TranslatePipe } });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.5", ngImport: i0, type: ChannelPreviewComponent, decorators: [{
             type: Component,
             args: [{
@@ -5066,7 +5050,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.5", ngImpor
                     templateUrl: './channel-preview.component.html',
                     styles: [],
                 }]
-        }], ctorParameters: function () { return [{ type: ChannelService }, { type: i0.NgZone }, { type: ChatClientService }, { type: MessageService }]; }, propDecorators: { channel: [{
+        }], ctorParameters: function () { return [{ type: ChannelService }, { type: i0.NgZone }, { type: ChatClientService }, { type: MessageService }, { type: CustomTemplatesService }]; }, propDecorators: { channel: [{
                 type: Input
             }] } });