stream-chat-angular 6.4.1 → 7.0.0

package/{fesm2020 → fesm2022}/stream-chat-angular.mjs

@@ -1,5 +1,5 @@
 import * as i0 from '@angular/core';
-import { Injectable, Component, Input, EventEmitter, Output, ViewChild, HostBinding, TemplateRef, ContentChild, ChangeDetectionStrategy, InjectionToken, Directive, NgModule, Inject, Optional } from '@angular/core';
+import { Injectable, Input, Component, EventEmitter, ViewChild, Output, HostBinding, TemplateRef, ContentChild, ChangeDetectionStrategy, InjectionToken, Directive, NgModule, Inject, Optional } from '@angular/core';
 import { BehaviorSubject, ReplaySubject, combineLatest, map as map$1, shareReplay as shareReplay$1, take as take$1, pairwise, Subject, timer, merge, switchMap, distinctUntilChanged as distinctUntilChanged$1, filter as filter$1, of } from 'rxjs';
 import { StreamChat, VotingVisibility, isVoteAnswer } from 'stream-chat';
 import { take, shareReplay, map, first, filter, distinctUntilChanged, tap, debounceTime, throttleTime } from 'rxjs/operators';
@@ -22,7 +22,7 @@ import { MentionModule } from 'angular-mentions';
 import * as i1$1 from '@angular/forms';
 import { FormGroup, FormControl, Validators, FormArray, ReactiveFormsModule } from '@angular/forms';
 
-const version = '6.4.1';
+const version = '7.0.0';
 
 /**
  * The `NotificationService` can be used to add or remove notifications. By default the [`NotificationList`](/chat/docs/sdk/angular/components/NotificationListComponent/) component displays the currently active notifications.
@@ -90,15 +90,15 @@ class NotificationService {
         notifications.splice(index, 1);
         this.notificationsSubject.next([...notifications]);
     }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: NotificationService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: NotificationService, providedIn: 'root' }); }
 }
-NotificationService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: NotificationService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-NotificationService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: NotificationService, providedIn: 'root' });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: NotificationService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: NotificationService, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root',
                 }]
-        }], ctorParameters: function () { return []; } });
+        }], ctorParameters: () => [] });
 
 /**
  * The `ChatClient` service connects the user to the Stream chat.
@@ -316,15 +316,15 @@ class ChatClientService {
             this.userSubject.next({ ...this.chatClient.user });
         }
     }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: ChatClientService, deps: [{ token: i0.NgZone }, { token: NotificationService }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: ChatClientService, providedIn: 'root' }); }
 }
-ChatClientService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: ChatClientService, deps: [{ token: i0.NgZone }, { token: NotificationService }], target: i0.ɵɵFactoryTarget.Injectable });
-ChatClientService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: ChatClientService, providedIn: 'root' });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: ChatClientService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: ChatClientService, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root',
                 }]
-        }], ctorParameters: function () { return [{ type: i0.NgZone }, { type: NotificationService }]; } });
+        }], ctorParameters: () => [{ type: i0.NgZone }, { type: NotificationService }] });
 
 const getMessageTranslation = (message, channel, user) => {
     const language = user?.language ||
@@ -452,6 +452,10 @@ class ChannelQuery {
  * The `ChannelService` provides data and interaction for the channel list and message list.
  */
 class ChannelService {
+    /**
+     * @internal
+     */
+    static { this.MAX_MESSAGE_REACTIONS_TO_FETCH = 1200; }
     constructor(chatClientService, ngZone, notificationService) {
         this.chatClientService = chatClientService;
         this.ngZone = ngZone;
@@ -1999,19 +2003,15 @@ class ChannelService {
             throw error;
         }
     }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: ChannelService, deps: [{ token: ChatClientService }, { token: i0.NgZone }, { token: NotificationService }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: ChannelService, providedIn: 'root' }); }
 }
-/**
- * @internal
- */
-ChannelService.MAX_MESSAGE_REACTIONS_TO_FETCH = 1200;
-ChannelService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: ChannelService, deps: [{ token: ChatClientService }, { token: i0.NgZone }, { token: NotificationService }], target: i0.ɵɵFactoryTarget.Injectable });
-ChannelService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: ChannelService, providedIn: 'root' });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: ChannelService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: ChannelService, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root',
                 }]
-        }], ctorParameters: function () { return [{ type: ChatClientService }, { type: i0.NgZone }, { type: NotificationService }]; } });
+        }], ctorParameters: () => [{ type: ChatClientService }, { type: i0.NgZone }, { type: NotificationService }] });
 
 /**
  * The `ThemeService` can be used to change the theme of the chat UI and to customize the theme. Our [theming guide](/chat/docs/sdk/angular/theming/themingv2/) gives a complete overview about the topic.
@@ -2023,15 +2023,15 @@ class ThemeService {
          */
         this.theme$ = new BehaviorSubject('light');
     }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: ThemeService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: ThemeService, providedIn: 'root' }); }
 }
-ThemeService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: ThemeService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-ThemeService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: ThemeService, providedIn: 'root' });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: ThemeService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: ThemeService, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root',
                 }]
-        }], ctorParameters: function () { return []; } });
+        }], ctorParameters: () => [] });
 
 const isImageFile = (file) => {
     // photoshop files begin with 'image/'
@@ -2105,15 +2105,15 @@ class MessageService {
                 attachment.type !== 'giphy');
         }
     }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: MessageService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: MessageService, providedIn: 'root' }); }
 }
-MessageService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: MessageService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-MessageService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: MessageService, providedIn: 'root' });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: MessageService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: MessageService, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root',
                 }]
-        }], ctorParameters: function () { return []; } });
+        }], ctorParameters: () => [] });
 
 /**
  * The `AttachmentService` manages the uploads of a message input.
@@ -2577,15 +2577,15 @@ class AttachmentService {
             return true;
         }
     }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: AttachmentService, deps: [{ token: ChannelService }, { token: NotificationService }, { token: ChatClientService }, { token: MessageService }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: AttachmentService, providedIn: 'root' }); }
 }
-AttachmentService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: AttachmentService, deps: [{ token: ChannelService }, { token: NotificationService }, { token: ChatClientService }, { token: MessageService }], target: i0.ɵɵFactoryTarget.Injectable });
-AttachmentService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: AttachmentService, providedIn: 'root' });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: AttachmentService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: AttachmentService, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root',
                 }]
-        }], ctorParameters: function () { return [{ type: ChannelService }, { type: NotificationService }, { type: ChatClientService }, { type: MessageService }]; } });
+        }], ctorParameters: () => [{ type: ChannelService }, { type: NotificationService }, { type: ChatClientService }, { type: MessageService }] });
 
 /**
  * The `AttachmentConfigurationService` provides customization for certain attributes of attachments displayed inside the message component. If you're using your own CDN, you can integrate resizing features of it by providing your own handlers.
@@ -2757,10 +2757,10 @@ class AttachmentConfigurationService {
     getValueRepresentationOfCSSProperty(property) {
         return Number(property.replace('px', '')) || undefined;
     }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: AttachmentConfigurationService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: AttachmentConfigurationService, providedIn: 'root' }); }
 }
-AttachmentConfigurationService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: AttachmentConfigurationService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-AttachmentConfigurationService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: AttachmentConfigurationService, providedIn: 'root' });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: AttachmentConfigurationService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: AttachmentConfigurationService, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root',
@@ -2939,28 +2939,21 @@ class StreamI18nService {
      */
     setTranslation(lang = 'en', overrides) {
         const translateService = this.translateService;
-        const defaultLang = 'getFallbackLang' in translateService
-            ? translateService.getFallbackLang?.()
-            : translateService.defaultLang;
+        const defaultLang = translateService.getFallbackLang();
         if (!defaultLang) {
-            if (typeof translateService.setDefaultLang !== 'undefined') {
-                translateService.setDefaultLang(lang);
-            }
-            else {
-                translateService.defaultLang = lang;
-            }
+            translateService.setFallbackLang(lang);
         }
         this.translateService.setTranslation(lang, { streamChat: { ...en.streamChat, ...overrides } }, true);
     }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: StreamI18nService, deps: [{ token: i6.TranslateService }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: StreamI18nService, providedIn: 'root' }); }
 }
-StreamI18nService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: StreamI18nService, deps: [{ token: i6.TranslateService }], target: i0.ɵɵFactoryTarget.Injectable });
-StreamI18nService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: StreamI18nService, providedIn: 'root' });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: StreamI18nService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: StreamI18nService, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root',
                 }]
-        }], ctorParameters: function () { return [{ type: i6.TranslateService }]; } });
+        }], ctorParameters: () => [{ type: i6.TranslateService }] });
 
 /**
  * The `Avatar` component displays the provided image, with fallback to the first letter of the optional name input.
@@ -3093,13 +3086,13 @@ class AvatarComponent {
             return undefined;
         }
     }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: AvatarComponent, deps: [{ token: ChatClientService }, { token: i0.NgZone }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: AvatarComponent, selector: "stream-avatar", inputs: { name: "name", imageUrl: "imageUrl", location: "location", channel: "channel", user: "user", type: "type", showOnlineIndicator: "showOnlineIndicator", initialsType: "initialsType" }, usesOnChanges: true, ngImport: i0, template: "<div\n  class=\"str-chat__avatar str-chat-angular__avatar str-chat__avatar--circle stream-chat__avatar--{{\n    location\n  }} stream-chat__avatar--{{\n    initialsType === 'first-letter-of-first-word'\n      ? 'one-letter'\n      : 'multiple-letters'\n  }}\"\n  title=\"{{ name }}\"\n>\n  <img\n    *ngIf=\"(imageUrl || fallbackChannelImage) && !isError; else fallback\"\n    class=\"str-chat__avatar-image\"\n    data-testid=\"avatar-img\"\n    fetchpriority=\"high\"\n    src=\"{{ imageUrl || fallbackChannelImage }}\"\n    alt=\"{{ initials }}\"\n    (error)=\"isError = true\"\n  />\n  <ng-template #fallback>\n    <div data-testid=\"fallback-img\" class=\"str-chat__avatar-fallback\">\n      {{ initials }}\n    </div>\n  </ng-template>\n  <div\n    *ngIf=\"isOnline && showOnlineIndicator\"\n    data-testid=\"online-indicator\"\n    class=\"str-chat__avatar--online-indicator\"\n  ></div>\n</div>\n", styles: [""], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] }); }
 }
-AvatarComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: AvatarComponent, deps: [{ token: ChatClientService }, { token: i0.NgZone }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-AvatarComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.4", type: AvatarComponent, selector: "stream-avatar", inputs: { name: "name", imageUrl: "imageUrl", location: "location", channel: "channel", user: "user", type: "type", showOnlineIndicator: "showOnlineIndicator", initialsType: "initialsType" }, usesOnChanges: true, ngImport: i0, template: "<div\n  class=\"str-chat__avatar str-chat-angular__avatar str-chat__avatar--circle stream-chat__avatar--{{\n    location\n  }} stream-chat__avatar--{{\n    initialsType === 'first-letter-of-first-word'\n      ? 'one-letter'\n      : 'multiple-letters'\n  }}\"\n  title=\"{{ name }}\"\n>\n  <img\n    *ngIf=\"(imageUrl || fallbackChannelImage) && !isError; else fallback\"\n    class=\"str-chat__avatar-image\"\n    data-testid=\"avatar-img\"\n    fetchpriority=\"high\"\n    src=\"{{ imageUrl || fallbackChannelImage }}\"\n    alt=\"{{ initials }}\"\n    (error)=\"isError = true\"\n  />\n  <ng-template #fallback>\n    <div data-testid=\"fallback-img\" class=\"str-chat__avatar-fallback\">\n      {{ initials }}\n    </div>\n  </ng-template>\n  <div\n    *ngIf=\"isOnline && showOnlineIndicator\"\n    data-testid=\"online-indicator\"\n    class=\"str-chat__avatar--online-indicator\"\n  ></div>\n</div>\n", styles: [""], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: AvatarComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: AvatarComponent, decorators: [{
             type: Component,
             args: [{ selector: 'stream-avatar', template: "<div\n  class=\"str-chat__avatar str-chat-angular__avatar str-chat__avatar--circle stream-chat__avatar--{{\n    location\n  }} stream-chat__avatar--{{\n    initialsType === 'first-letter-of-first-word'\n      ? 'one-letter'\n      : 'multiple-letters'\n  }}\"\n  title=\"{{ name }}\"\n>\n  <img\n    *ngIf=\"(imageUrl || fallbackChannelImage) && !isError; else fallback\"\n    class=\"str-chat__avatar-image\"\n    data-testid=\"avatar-img\"\n    fetchpriority=\"high\"\n    src=\"{{ imageUrl || fallbackChannelImage }}\"\n    alt=\"{{ initials }}\"\n    (error)=\"isError = true\"\n  />\n  <ng-template #fallback>\n    <div data-testid=\"fallback-img\" class=\"str-chat__avatar-fallback\">\n      {{ initials }}\n    </div>\n  </ng-template>\n  <div\n    *ngIf=\"isOnline && showOnlineIndicator\"\n    data-testid=\"online-indicator\"\n    class=\"str-chat__avatar--online-indicator\"\n  ></div>\n</div>\n" }]
-        }], ctorParameters: function () { return [{ type: ChatClientService }, { type: i0.NgZone }, { type: i0.ChangeDetectorRef }]; }, propDecorators: { name: [{
+        }], ctorParameters: () => [{ type: ChatClientService }, { type: i0.NgZone }, { type: i0.ChangeDetectorRef }], propDecorators: { name: [{
                 type: Input
             }], imageUrl: [{
                 type: Input
@@ -3362,15 +3355,15 @@ class CustomTemplatesService {
          */
         this.pollComposerTemplate$ = new BehaviorSubject(undefined);
     }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: CustomTemplatesService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: CustomTemplatesService, providedIn: 'root' }); }
 }
-CustomTemplatesService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: CustomTemplatesService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-CustomTemplatesService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: CustomTemplatesService, providedIn: 'root' });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: CustomTemplatesService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: CustomTemplatesService, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root',
                 }]
-        }], ctorParameters: function () { return []; } });
+        }], ctorParameters: () => [] });
 
 /**
  * The `AvatarPlaceholder` component displays the [default avatar](/chat/docs/sdk/angular/components/AvatarComponent/) unless a [custom template](/chat/docs/sdk/angular/services/CustomTemplatesService/) is provided. This component is used by the SDK internally, you likely won't need to use it.
@@ -3409,13 +3402,13 @@ class AvatarPlaceholderComponent {
             showOnlineIndicator: this.showOnlineIndicator,
         };
     }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: AvatarPlaceholderComponent, deps: [{ token: CustomTemplatesService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: AvatarPlaceholderComponent, selector: "stream-avatar-placeholder", inputs: { name: "name", imageUrl: "imageUrl", location: "location", channel: "channel", user: "user", type: "type", initialsType: "initialsType", showOnlineIndicator: "showOnlineIndicator" }, usesOnChanges: true, ngImport: i0, template: "<ng-template\n  #defaultAvatar\n  let-name=\"name\"\n  let-imageUrl=\"imageUrl\"\n  let-type=\"type\"\n  let-channel=\"channel\"\n  let-user=\"user\"\n  let-location=\"location\"\n  let-initialsType=\"initialsType\"\n  let-showOnlineIndicator=\"showOnlineIndicator\"\n>\n  <stream-avatar\n    [name]=\"name\"\n    [imageUrl]=\"imageUrl\"\n    [type]=\"type\"\n    [channel]=\"channel\"\n    [user]=\"user\"\n    [location]=\"location\"\n    [initialsType]=\"initialsType\"\n    [showOnlineIndicator]=\"showOnlineIndicator\"\n  />\n</ng-template>\n<ng-container\n  *ngTemplateOutlet=\"\n    (customTemplatesService.avatarTemplate$ | async) || defaultAvatar;\n    context: context\n  \"\n/>\n", dependencies: [{ kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: AvatarComponent, selector: "stream-avatar", inputs: ["name", "imageUrl", "location", "channel", "user", "type", "showOnlineIndicator", "initialsType"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }] }); }
 }
-AvatarPlaceholderComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: AvatarPlaceholderComponent, deps: [{ token: CustomTemplatesService }], target: i0.ɵɵFactoryTarget.Component });
-AvatarPlaceholderComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.4", type: AvatarPlaceholderComponent, selector: "stream-avatar-placeholder", inputs: { name: "name", imageUrl: "imageUrl", location: "location", channel: "channel", user: "user", type: "type", initialsType: "initialsType", showOnlineIndicator: "showOnlineIndicator" }, usesOnChanges: true, ngImport: i0, template: "<ng-template\n  #defaultAvatar\n  let-name=\"name\"\n  let-imageUrl=\"imageUrl\"\n  let-type=\"type\"\n  let-channel=\"channel\"\n  let-user=\"user\"\n  let-location=\"location\"\n  let-initialsType=\"initialsType\"\n  let-showOnlineIndicator=\"showOnlineIndicator\"\n>\n  <stream-avatar\n    [name]=\"name\"\n    [imageUrl]=\"imageUrl\"\n    [type]=\"type\"\n    [channel]=\"channel\"\n    [user]=\"user\"\n    [location]=\"location\"\n    [initialsType]=\"initialsType\"\n    [showOnlineIndicator]=\"showOnlineIndicator\"\n  ></stream-avatar>\n</ng-template>\n<ng-container\n  *ngTemplateOutlet=\"\n    (customTemplatesService.avatarTemplate$ | async) || defaultAvatar;\n    context: context\n  \"\n></ng-container>\n", dependencies: [{ kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: AvatarComponent, selector: "stream-avatar", inputs: ["name", "imageUrl", "location", "channel", "user", "type", "showOnlineIndicator", "initialsType"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: AvatarPlaceholderComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: AvatarPlaceholderComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'stream-avatar-placeholder', template: "<ng-template\n  #defaultAvatar\n  let-name=\"name\"\n  let-imageUrl=\"imageUrl\"\n  let-type=\"type\"\n  let-channel=\"channel\"\n  let-user=\"user\"\n  let-location=\"location\"\n  let-initialsType=\"initialsType\"\n  let-showOnlineIndicator=\"showOnlineIndicator\"\n>\n  <stream-avatar\n    [name]=\"name\"\n    [imageUrl]=\"imageUrl\"\n    [type]=\"type\"\n    [channel]=\"channel\"\n    [user]=\"user\"\n    [location]=\"location\"\n    [initialsType]=\"initialsType\"\n    [showOnlineIndicator]=\"showOnlineIndicator\"\n  ></stream-avatar>\n</ng-template>\n<ng-container\n  *ngTemplateOutlet=\"\n    (customTemplatesService.avatarTemplate$ | async) || defaultAvatar;\n    context: context\n  \"\n></ng-container>\n" }]
-        }], ctorParameters: function () { return [{ type: CustomTemplatesService }]; }, propDecorators: { name: [{
+            args: [{ selector: 'stream-avatar-placeholder', template: "<ng-template\n  #defaultAvatar\n  let-name=\"name\"\n  let-imageUrl=\"imageUrl\"\n  let-type=\"type\"\n  let-channel=\"channel\"\n  let-user=\"user\"\n  let-location=\"location\"\n  let-initialsType=\"initialsType\"\n  let-showOnlineIndicator=\"showOnlineIndicator\"\n>\n  <stream-avatar\n    [name]=\"name\"\n    [imageUrl]=\"imageUrl\"\n    [type]=\"type\"\n    [channel]=\"channel\"\n    [user]=\"user\"\n    [location]=\"location\"\n    [initialsType]=\"initialsType\"\n    [showOnlineIndicator]=\"showOnlineIndicator\"\n  />\n</ng-template>\n<ng-container\n  *ngTemplateOutlet=\"\n    (customTemplatesService.avatarTemplate$ | async) || defaultAvatar;\n    context: context\n  \"\n/>\n" }]
+        }], ctorParameters: () => [{ type: CustomTemplatesService }], propDecorators: { name: [{
                 type: Input
             }], imageUrl: [{
                 type: Input
@@ -3438,13 +3431,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImpor
  */
 class IconComponent {
     constructor() { }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: IconComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: IconComponent, selector: "stream-icon", inputs: { icon: "icon" }, ngImport: i0, template: "<div class=\"str-chat__icon str-chat__icon--{{ icon }}\"></div>\n" }); }
 }
-IconComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: IconComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-IconComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.4", type: IconComponent, selector: "stream-icon", inputs: { icon: "icon" }, ngImport: i0, template: "<div class=\"str-chat__icon str-chat__icon--{{ icon }}\"></div>\n" });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: IconComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: IconComponent, decorators: [{
             type: Component,
             args: [{ selector: 'stream-icon', template: "<div class=\"str-chat__icon str-chat__icon--{{ icon }}\"></div>\n" }]
-        }], ctorParameters: function () { return []; }, propDecorators: { icon: [{
+        }], ctorParameters: () => [], propDecorators: { icon: [{
                 type: Input
             }] } });
 
@@ -3461,13 +3454,13 @@ class IconPlaceholderComponent {
             icon: this.icon,
         };
     }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: IconPlaceholderComponent, deps: [{ token: CustomTemplatesService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: IconPlaceholderComponent, selector: "stream-icon-placeholder", inputs: { icon: "icon" }, usesOnChanges: true, ngImport: i0, template: "<ng-template #defaultIcon let-icon=\"icon\">\n  <stream-icon [icon]=\"icon\" />\n</ng-template>\n<ng-container\n  *ngTemplateOutlet=\"\n    (customTemplatesService.iconTemplate$ | async) || defaultIcon;\n    context: iconContext\n  \"\n/>\n", dependencies: [{ kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: IconComponent, selector: "stream-icon", inputs: ["icon"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }] }); }
 }
-IconPlaceholderComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: IconPlaceholderComponent, deps: [{ token: CustomTemplatesService }], target: i0.ɵɵFactoryTarget.Component });
-IconPlaceholderComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.4", type: IconPlaceholderComponent, selector: "stream-icon-placeholder", inputs: { icon: "icon" }, usesOnChanges: true, ngImport: i0, template: "<ng-template #defaultIcon let-icon=\"icon\">\n  <stream-icon [icon]=\"icon\"></stream-icon>\n</ng-template>\n<ng-container\n  *ngTemplateOutlet=\"\n    (customTemplatesService.iconTemplate$ | async) || defaultIcon;\n    context: iconContext\n  \"\n></ng-container>\n", dependencies: [{ kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: IconComponent, selector: "stream-icon", inputs: ["icon"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: IconPlaceholderComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: IconPlaceholderComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'stream-icon-placeholder', template: "<ng-template #defaultIcon let-icon=\"icon\">\n  <stream-icon [icon]=\"icon\"></stream-icon>\n</ng-template>\n<ng-container\n  *ngTemplateOutlet=\"\n    (customTemplatesService.iconTemplate$ | async) || defaultIcon;\n    context: iconContext\n  \"\n></ng-container>\n" }]
-        }], ctorParameters: function () { return [{ type: CustomTemplatesService }]; }, propDecorators: { icon: [{
+            args: [{ selector: 'stream-icon-placeholder', template: "<ng-template #defaultIcon let-icon=\"icon\">\n  <stream-icon [icon]=\"icon\" />\n</ng-template>\n<ng-container\n  *ngTemplateOutlet=\"\n    (customTemplatesService.iconTemplate$ | async) || defaultIcon;\n    context: iconContext\n  \"\n/>\n" }]
+        }], ctorParameters: () => [{ type: CustomTemplatesService }], propDecorators: { icon: [{
                 type: Input
             }] } });
 
@@ -3476,13 +3469,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImpor
  */
 class LoadingIndicatorComponent {
     constructor() { }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: LoadingIndicatorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: LoadingIndicatorComponent, selector: "stream-loading-indicator", ngImport: i0, template: "<div class=\"str-chat__loading-indicator\">\n  <svg\n    viewBox=\"0 0 30 30\"\n    data-testid=\"loading-indicator\"\n    xmlns=\"http://www.w3.org/2000/svg\"\n    height=\"30\"\n    width=\"30\"\n  >\n    <defs>\n      <linearGradient\n        x1=\"50%\"\n        x2=\"50%\"\n        y1=\"0%\"\n        y2=\"100%\"\n        id=\"stream-chat-loading-circle\"\n      >\n        <stop offset=\"0%\" stop-color=\"#FFF\" stop-opacity=\"0\" />\n        <stop data-testid=\"stop-color\" offset=\"100%\" stop-opacity=\"1\" />\n      </linearGradient>\n    </defs>\n    <path\n      d=\"M2.518 23.321l1.664-1.11A12.988 12.988 0 0 0 15 28c7.18 0 13-5.82 13-13S22.18 2 15 2V0c8.284 0 15 6.716 15 15 0 8.284-6.716 15-15 15-5.206 0-9.792-2.652-12.482-6.679z\"\n      fillRule=\"evenodd\"\n      fill=\"url(#stream-chat-loading-circle)\"\n    />\n  </svg>\n</div>\n" }); }
 }
-LoadingIndicatorComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: LoadingIndicatorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-LoadingIndicatorComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.4", type: LoadingIndicatorComponent, selector: "stream-loading-indicator", ngImport: i0, template: "<div class=\"str-chat__loading-indicator\">\n  <svg\n    viewBox=\"0 0 30 30\"\n    data-testid=\"loading-indicator\"\n    xmlns=\"http://www.w3.org/2000/svg\"\n    height=\"30\"\n    width=\"30\"\n  >\n    <defs>\n      <linearGradient\n        x1=\"50%\"\n        x2=\"50%\"\n        y1=\"0%\"\n        y2=\"100%\"\n        id=\"stream-chat-loading-circle\"\n      >\n        <stop offset=\"0%\" stop-color=\"#FFF\" stop-opacity=\"0\" />\n        <stop data-testid=\"stop-color\" offset=\"100%\" stop-opacity=\"1\" />\n      </linearGradient>\n    </defs>\n    <path\n      d=\"M2.518 23.321l1.664-1.11A12.988 12.988 0 0 0 15 28c7.18 0 13-5.82 13-13S22.18 2 15 2V0c8.284 0 15 6.716 15 15 0 8.284-6.716 15-15 15-5.206 0-9.792-2.652-12.482-6.679z\"\n      fillRule=\"evenodd\"\n      fill=\"url(#stream-chat-loading-circle)\"\n    />\n  </svg>\n</div>\n" });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: LoadingIndicatorComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: LoadingIndicatorComponent, decorators: [{
             type: Component,
             args: [{ selector: 'stream-loading-indicator', template: "<div class=\"str-chat__loading-indicator\">\n  <svg\n    viewBox=\"0 0 30 30\"\n    data-testid=\"loading-indicator\"\n    xmlns=\"http://www.w3.org/2000/svg\"\n    height=\"30\"\n    width=\"30\"\n  >\n    <defs>\n      <linearGradient\n        x1=\"50%\"\n        x2=\"50%\"\n        y1=\"0%\"\n        y2=\"100%\"\n        id=\"stream-chat-loading-circle\"\n      >\n        <stop offset=\"0%\" stop-color=\"#FFF\" stop-opacity=\"0\" />\n        <stop data-testid=\"stop-color\" offset=\"100%\" stop-opacity=\"1\" />\n      </linearGradient>\n    </defs>\n    <path\n      d=\"M2.518 23.321l1.664-1.11A12.988 12.988 0 0 0 15 28c7.18 0 13-5.82 13-13S22.18 2 15 2V0c8.284 0 15 6.716 15 15 0 8.284-6.716 15-15 15-5.206 0-9.792-2.652-12.482-6.679z\"\n      fillRule=\"evenodd\"\n      fill=\"url(#stream-chat-loading-circle)\"\n    />\n  </svg>\n</div>\n" }]
-        }], ctorParameters: function () { return []; } });
+        }], ctorParameters: () => [] });
 
 /**
  * The `LoadingInficatorPlaceholder` component displays the [default loading indicator](/chat/docs/sdk/angular/components/LoadingIndicatorComponent/) unless a [custom template](/chat/docs/sdk/angular/services/CustomTemplatesService/) is provided. This component is used by the SDK internally, you likely won't need to use it.
@@ -3491,13 +3484,13 @@ class LoadingIndicatorPlaceholderComponent {
     constructor(customTemplatesService) {
         this.customTemplatesService = customTemplatesService;
     }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: LoadingIndicatorPlaceholderComponent, deps: [{ token: CustomTemplatesService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: LoadingIndicatorPlaceholderComponent, selector: "stream-loading-indicator-placeholder", ngImport: i0, template: "<ng-template #defaultLoadingIndicator>\n  <stream-loading-indicator />\n</ng-template>\n<ng-container\n  *ngTemplateOutlet=\"\n    (customTemplatesService.loadingIndicatorTemplate$ | async) ||\n    defaultLoadingIndicator\n  \"\n/>\n", dependencies: [{ kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: LoadingIndicatorComponent, selector: "stream-loading-indicator" }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }] }); }
 }
-LoadingIndicatorPlaceholderComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: LoadingIndicatorPlaceholderComponent, deps: [{ token: CustomTemplatesService }], target: i0.ɵɵFactoryTarget.Component });
-LoadingIndicatorPlaceholderComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.4", type: LoadingIndicatorPlaceholderComponent, selector: "stream-loading-indicator-placeholder", ngImport: i0, template: "<ng-template #defaultLoadingIndicator>\n  <stream-loading-indicator></stream-loading-indicator>\n</ng-template>\n<ng-container\n  *ngTemplateOutlet=\"\n    (customTemplatesService.loadingIndicatorTemplate$ | async) ||\n    defaultLoadingIndicator\n  \"\n></ng-container>\n", dependencies: [{ kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: LoadingIndicatorComponent, selector: "stream-loading-indicator" }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: LoadingIndicatorPlaceholderComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: LoadingIndicatorPlaceholderComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'stream-loading-indicator-placeholder', template: "<ng-template #defaultLoadingIndicator>\n  <stream-loading-indicator></stream-loading-indicator>\n</ng-template>\n<ng-container\n  *ngTemplateOutlet=\"\n    (customTemplatesService.loadingIndicatorTemplate$ | async) ||\n    defaultLoadingIndicator\n  \"\n></ng-container>\n" }]
-        }], ctorParameters: function () { return [{ type: CustomTemplatesService }]; } });
+            args: [{ selector: 'stream-loading-indicator-placeholder', template: "<ng-template #defaultLoadingIndicator>\n  <stream-loading-indicator />\n</ng-template>\n<ng-container\n  *ngTemplateOutlet=\"\n    (customTemplatesService.loadingIndicatorTemplate$ | async) ||\n    defaultLoadingIndicator\n  \"\n/>\n" }]
+        }], ctorParameters: () => [{ type: CustomTemplatesService }] });
 
 /**
  * The message actions service provides customization options for the [message actions](/chat/docs/sdk/angular/components/MessageActionsBoxComponent)
@@ -3674,15 +3667,15 @@ class MessageActionsService {
         const isMine = message.user_id === currentUserId;
         return allActions.filter((item) => item.isVisible(enabledActions, isMine, message)).length;
     }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: MessageActionsService, deps: [{ token: ChatClientService }, { token: NotificationService }, { token: ChannelService }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: MessageActionsService, providedIn: 'root' }); }
 }
-MessageActionsService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: MessageActionsService, deps: [{ token: ChatClientService }, { token: NotificationService }, { token: ChannelService }], target: i0.ɵɵFactoryTarget.Injectable });
-MessageActionsService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: MessageActionsService, providedIn: 'root' });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: MessageActionsService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: MessageActionsService, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root',
                 }]
-        }], ctorParameters: function () { return [{ type: ChatClientService }, { type: NotificationService }, { type: ChannelService }]; } });
+        }], ctorParameters: () => [{ type: ChatClientService }, { type: NotificationService }, { type: ChannelService }] });
 
 /**
  * The `MessageReactionsService` provides customization options to message [reactions](/chat/docs/javascript/send_reaction/).
@@ -3739,15 +3732,15 @@ class MessageReactionsService {
             }
         }
     }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: MessageReactionsService, deps: [{ token: ChatClientService }, { token: NotificationService }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: MessageReactionsService, providedIn: 'root' }); }
 }
-MessageReactionsService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: MessageReactionsService, deps: [{ token: ChatClientService }, { token: NotificationService }], target: i0.ɵɵFactoryTarget.Injectable });
-MessageReactionsService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: MessageReactionsService, providedIn: 'root' });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: MessageReactionsService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: MessageReactionsService, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root',
                 }]
-        }], ctorParameters: function () { return [{ type: ChatClientService }, { type: NotificationService }]; } });
+        }], ctorParameters: () => [{ type: ChatClientService }, { type: NotificationService }] });
 
 /**
  * The `MessageReactionsSelectorComponent` makes it possible for users to react to a message, the reaction options can be set using the [`MessageReactionsService`](/chat/docs/sdk/angular/services/MessageReactionsService/). You can read more about [message reactions](/chat/docs/javascript/send_reaction/) in the platform documentation.
@@ -3793,13 +3786,13 @@ class MessageReactionsSelectorComponent {
             ? await this.channelService.removeReaction(this.messageId, type)
             : await this.channelService.addReaction(this.messageId, type);
     }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: MessageReactionsSelectorComponent, deps: [{ token: ChannelService }, { token: MessageReactionsService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: MessageReactionsSelectorComponent, selector: "stream-message-reactions-selector", inputs: { ownReactions: "ownReactions", messageId: "messageId" }, ngImport: i0, template: "<div\n  #selectorContainer\n  data-testid=\"reaction-selector\"\n  class=\"str-chat__reaction-selector str-chat-angular-v5__reaction-selector str-chat__message-reaction-selector\"\n>\n  <ul\n    class=\"str-chat__message-reactions-list str-chat__message-reactions-options\"\n  >\n    <li\n      *ngFor=\"\n        let reactionType of reactionOptions;\n        trackBy: trackByMessageReaction\n      \"\n      class=\"str-chat__message-reactions-option str-chat__message-reactions-list-item str-chat__emoji\"\n      data-testclass=\"emoji-option\"\n      [attr.data-testid]=\"reactionType\"\n      [class.str-chat__message-reactions-option-selected]=\"\n        isOwnReaction(reactionType)\n      \"\n      (click)=\"react(reactionType)\"\n      (keyup.enter)=\"react(reactionType)\"\n    >\n      <span\n        class=\"emoji str-chat__emoji-selector-emoji-angular str-chat__message-reaction-emoji\"\n      >\n        {{ getEmojiByReaction(reactionType) }}\n      </span>\n    </li>\n  </ul>\n</div>\n", dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }] }); }
 }
-MessageReactionsSelectorComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: MessageReactionsSelectorComponent, deps: [{ token: ChannelService }, { token: MessageReactionsService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-MessageReactionsSelectorComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.4", type: MessageReactionsSelectorComponent, selector: "stream-message-reactions-selector", inputs: { ownReactions: "ownReactions", messageId: "messageId" }, ngImport: i0, template: "<div\n  #selectorContainer\n  data-testid=\"reaction-selector\"\n  class=\"str-chat__reaction-selector str-chat-angular-v5__reaction-selector str-chat__message-reaction-selector\"\n>\n  <ul\n    class=\"str-chat__message-reactions-list str-chat__message-reactions-options\"\n  >\n    <li\n      *ngFor=\"\n        let reactionType of reactionOptions;\n        trackBy: trackByMessageReaction\n      \"\n      class=\"str-chat__message-reactions-option str-chat__message-reactions-list-item str-chat__emoji\"\n      data-testclass=\"emoji-option\"\n      [attr.data-testid]=\"reactionType\"\n      [class.str-chat__message-reactions-option-selected]=\"\n        isOwnReaction(reactionType)\n      \"\n      (click)=\"react(reactionType)\"\n      (keyup.enter)=\"react(reactionType)\"\n    >\n      <span\n        class=\"emoji str-chat__emoji-selector-emoji-angular str-chat__message-reaction-emoji\"\n      >\n        {{ getEmojiByReaction(reactionType) }}\n      </span>\n    </li>\n  </ul>\n</div>\n", dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: MessageReactionsSelectorComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: MessageReactionsSelectorComponent, decorators: [{
             type: Component,
             args: [{ selector: 'stream-message-reactions-selector', template: "<div\n  #selectorContainer\n  data-testid=\"reaction-selector\"\n  class=\"str-chat__reaction-selector str-chat-angular-v5__reaction-selector str-chat__message-reaction-selector\"\n>\n  <ul\n    class=\"str-chat__message-reactions-list str-chat__message-reactions-options\"\n  >\n    <li\n      *ngFor=\"\n        let reactionType of reactionOptions;\n        trackBy: trackByMessageReaction\n      \"\n      class=\"str-chat__message-reactions-option str-chat__message-reactions-list-item str-chat__emoji\"\n      data-testclass=\"emoji-option\"\n      [attr.data-testid]=\"reactionType\"\n      [class.str-chat__message-reactions-option-selected]=\"\n        isOwnReaction(reactionType)\n      \"\n      (click)=\"react(reactionType)\"\n      (keyup.enter)=\"react(reactionType)\"\n    >\n      <span\n        class=\"emoji str-chat__emoji-selector-emoji-angular str-chat__message-reaction-emoji\"\n      >\n        {{ getEmojiByReaction(reactionType) }}\n      </span>\n    </li>\n  </ul>\n</div>\n" }]
-        }], ctorParameters: function () { return [{ type: ChannelService }, { type: MessageReactionsService }, { type: i0.ChangeDetectorRef }]; }, propDecorators: { ownReactions: [{
+        }], ctorParameters: () => [{ type: ChannelService }, { type: MessageReactionsService }, { type: i0.ChangeDetectorRef }], propDecorators: { ownReactions: [{
                 type: Input
             }], messageId: [{
                 type: Input
@@ -3905,13 +3898,13 @@ class MessageActionsBoxComponent {
             ].filter((item) => item.isVisible(this.enabledActions, this.isMine, this.message));
         }
     }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: MessageActionsBoxComponent, deps: [{ token: CustomTemplatesService }, { token: MessageActionsService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: MessageActionsBoxComponent, selector: "stream-message-actions-box", inputs: { isMine: "isMine", message: "message", messageTextHtmlElement: "messageTextHtmlElement", enabledActions: "enabledActions" }, usesOnChanges: true, ngImport: i0, template: "<div\n  #actionBox\n  data-testid=\"action-box\"\n  class=\"str-chat__message-actions-box str-chat__message-actions-box-angular str-chat__message-actions-box--open\"\n>\n  <ul class=\"str-chat__message-actions-list\">\n    <ng-container\n      *ngFor=\"let item of visibleMessageActionItems; trackBy: trackByActionName\"\n    >\n      <ng-container [ngSwitch]=\"item.actionName\">\n        <ng-container *ngSwitchCase=\"'react'\">\n          <ng-container\n            *ngTemplateOutlet=\"\n              (customTemplatesService.messageReactionsSelectorTemplate$\n                | async) || defaultReactionSelector;\n              context: getReactionSelectorTemplateContext()\n            \"\n          />\n        </ng-container>\n        <ng-container *ngSwitchDefault>\n          <ng-container\n            *ngTemplateOutlet=\"\n              (customTemplatesService.messageActionsBoxItemTemplate$ | async) ||\n                defaultMessageActionItem;\n              context: getMessageActionTemplateContext(item)\n            \"\n          />\n        </ng-container>\n      </ng-container>\n    </ng-container>\n  </ul>\n</div>\n\n<ng-template\n  #defaultMessageActionItem\n  let-actionName=\"actionName\"\n  let-actionHandler=\"actionHandler\"\n  let-actionLabelOrTranslationKey=\"actionLabelOrTranslationKey\"\n  let-actionHandlerExtraParams=\"actionHandlerExtraParams\"\n>\n  <button\n    class=\"str-chat__message-actions-list-item-button\"\n    [attr.data-testid]=\"actionName + '-action'\"\n    (click)=\"actionHandler(message, actionHandlerExtraParams)\"\n  >\n    <li class=\"str-chat__message-actions-list-item\">\n      {{ getActionLabel(actionLabelOrTranslationKey) | translate }}\n    </li>\n  </button>\n</ng-template>\n\n<ng-template\n  #defaultReactionSelector\n  let-messageId=\"messageId\"\n  let-ownReactions=\"ownReactions\"\n>\n  <stream-message-reactions-selector\n    [messageId]=\"message?.id\"\n    [ownReactions]=\"message?.own_reactions || []\"\n  />\n</ng-template>\n", dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i1.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: i1.NgSwitchDefault, selector: "[ngSwitchDefault]" }, { kind: "component", type: MessageReactionsSelectorComponent, selector: "stream-message-reactions-selector", inputs: ["ownReactions", "messageId"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "pipe", type: i6.TranslatePipe, name: "translate" }] }); }
 }
-MessageActionsBoxComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: MessageActionsBoxComponent, deps: [{ token: CustomTemplatesService }, { token: MessageActionsService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-MessageActionsBoxComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.4", type: MessageActionsBoxComponent, selector: "stream-message-actions-box", inputs: { isMine: "isMine", message: "message", messageTextHtmlElement: "messageTextHtmlElement", enabledActions: "enabledActions" }, usesOnChanges: true, ngImport: i0, template: "<div\n  #actionBox\n  data-testid=\"action-box\"\n  class=\"str-chat__message-actions-box str-chat__message-actions-box-angular str-chat__message-actions-box--open\"\n>\n  <ul class=\"str-chat__message-actions-list\">\n    <ng-container\n      *ngFor=\"let item of visibleMessageActionItems; trackBy: trackByActionName\"\n    >\n      <ng-container [ngSwitch]=\"item.actionName\">\n        <ng-container *ngSwitchCase=\"'react'\">\n          <ng-container\n            *ngTemplateOutlet=\"\n              (customTemplatesService.messageReactionsSelectorTemplate$\n                | async) || defaultReactionSelector;\n              context: getReactionSelectorTemplateContext()\n            \"\n          ></ng-container>\n        </ng-container>\n        <ng-container *ngSwitchDefault>\n          <ng-container\n            *ngTemplateOutlet=\"\n              (customTemplatesService.messageActionsBoxItemTemplate$ | async) ||\n                defaultMessageActionItem;\n              context: getMessageActionTemplateContext(item)\n            \"\n          ></ng-container>\n        </ng-container>\n      </ng-container>\n    </ng-container>\n  </ul>\n</div>\n\n<ng-template\n  #defaultMessageActionItem\n  let-actionName=\"actionName\"\n  let-actionHandler=\"actionHandler\"\n  let-actionLabelOrTranslationKey=\"actionLabelOrTranslationKey\"\n  let-actionHandlerExtraParams=\"actionHandlerExtraParams\"\n>\n  <button\n    class=\"str-chat__message-actions-list-item-button\"\n    [attr.data-testid]=\"actionName + '-action'\"\n    (click)=\"actionHandler(message, actionHandlerExtraParams)\"\n  >\n    <li class=\"str-chat__message-actions-list-item\">\n      {{ getActionLabel(actionLabelOrTranslationKey) | translate }}\n    </li>\n  </button>\n</ng-template>\n\n<ng-template\n  #defaultReactionSelector\n  let-messageId=\"messageId\"\n  let-ownReactions=\"ownReactions\"\n>\n  <stream-message-reactions-selector\n    [messageId]=\"message?.id\"\n    [ownReactions]=\"message?.own_reactions || []\"\n  ></stream-message-reactions-selector>\n</ng-template>\n", dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i1.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: i1.NgSwitchDefault, selector: "[ngSwitchDefault]" }, { kind: "component", type: MessageReactionsSelectorComponent, selector: "stream-message-reactions-selector", inputs: ["ownReactions", "messageId"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "pipe", type: i6.TranslatePipe, name: "translate" }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: MessageActionsBoxComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: MessageActionsBoxComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'stream-message-actions-box', template: "<div\n  #actionBox\n  data-testid=\"action-box\"\n  class=\"str-chat__message-actions-box str-chat__message-actions-box-angular str-chat__message-actions-box--open\"\n>\n  <ul class=\"str-chat__message-actions-list\">\n    <ng-container\n      *ngFor=\"let item of visibleMessageActionItems; trackBy: trackByActionName\"\n    >\n      <ng-container [ngSwitch]=\"item.actionName\">\n        <ng-container *ngSwitchCase=\"'react'\">\n          <ng-container\n            *ngTemplateOutlet=\"\n              (customTemplatesService.messageReactionsSelectorTemplate$\n                | async) || defaultReactionSelector;\n              context: getReactionSelectorTemplateContext()\n            \"\n          ></ng-container>\n        </ng-container>\n        <ng-container *ngSwitchDefault>\n          <ng-container\n            *ngTemplateOutlet=\"\n              (customTemplatesService.messageActionsBoxItemTemplate$ | async) ||\n                defaultMessageActionItem;\n              context: getMessageActionTemplateContext(item)\n            \"\n          ></ng-container>\n        </ng-container>\n      </ng-container>\n    </ng-container>\n  </ul>\n</div>\n\n<ng-template\n  #defaultMessageActionItem\n  let-actionName=\"actionName\"\n  let-actionHandler=\"actionHandler\"\n  let-actionLabelOrTranslationKey=\"actionLabelOrTranslationKey\"\n  let-actionHandlerExtraParams=\"actionHandlerExtraParams\"\n>\n  <button\n    class=\"str-chat__message-actions-list-item-button\"\n    [attr.data-testid]=\"actionName + '-action'\"\n    (click)=\"actionHandler(message, actionHandlerExtraParams)\"\n  >\n    <li class=\"str-chat__message-actions-list-item\">\n      {{ getActionLabel(actionLabelOrTranslationKey) | translate }}\n    </li>\n  </button>\n</ng-template>\n\n<ng-template\n  #defaultReactionSelector\n  let-messageId=\"messageId\"\n  let-ownReactions=\"ownReactions\"\n>\n  <stream-message-reactions-selector\n    [messageId]=\"message?.id\"\n    [ownReactions]=\"message?.own_reactions || []\"\n  ></stream-message-reactions-selector>\n</ng-template>\n" }]
-        }], ctorParameters: function () { return [{ type: CustomTemplatesService }, { type: MessageActionsService }, { type: i0.ChangeDetectorRef }]; }, propDecorators: { isMine: [{
+            args: [{ selector: 'stream-message-actions-box', template: "<div\n  #actionBox\n  data-testid=\"action-box\"\n  class=\"str-chat__message-actions-box str-chat__message-actions-box-angular str-chat__message-actions-box--open\"\n>\n  <ul class=\"str-chat__message-actions-list\">\n    <ng-container\n      *ngFor=\"let item of visibleMessageActionItems; trackBy: trackByActionName\"\n    >\n      <ng-container [ngSwitch]=\"item.actionName\">\n        <ng-container *ngSwitchCase=\"'react'\">\n          <ng-container\n            *ngTemplateOutlet=\"\n              (customTemplatesService.messageReactionsSelectorTemplate$\n                | async) || defaultReactionSelector;\n              context: getReactionSelectorTemplateContext()\n            \"\n          />\n        </ng-container>\n        <ng-container *ngSwitchDefault>\n          <ng-container\n            *ngTemplateOutlet=\"\n              (customTemplatesService.messageActionsBoxItemTemplate$ | async) ||\n                defaultMessageActionItem;\n              context: getMessageActionTemplateContext(item)\n            \"\n          />\n        </ng-container>\n      </ng-container>\n    </ng-container>\n  </ul>\n</div>\n\n<ng-template\n  #defaultMessageActionItem\n  let-actionName=\"actionName\"\n  let-actionHandler=\"actionHandler\"\n  let-actionLabelOrTranslationKey=\"actionLabelOrTranslationKey\"\n  let-actionHandlerExtraParams=\"actionHandlerExtraParams\"\n>\n  <button\n    class=\"str-chat__message-actions-list-item-button\"\n    [attr.data-testid]=\"actionName + '-action'\"\n    (click)=\"actionHandler(message, actionHandlerExtraParams)\"\n  >\n    <li class=\"str-chat__message-actions-list-item\">\n      {{ getActionLabel(actionLabelOrTranslationKey) | translate }}\n    </li>\n  </button>\n</ng-template>\n\n<ng-template\n  #defaultReactionSelector\n  let-messageId=\"messageId\"\n  let-ownReactions=\"ownReactions\"\n>\n  <stream-message-reactions-selector\n    [messageId]=\"message?.id\"\n    [ownReactions]=\"message?.own_reactions || []\"\n  />\n</ng-template>\n" }]
+        }], ctorParameters: () => [{ type: CustomTemplatesService }, { type: MessageActionsService }, { type: i0.ChangeDetectorRef }], propDecorators: { isMine: [{
                 type: Input
             }], message: [{
                 type: Input
@@ -3926,13 +3919,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImpor
  */
 class NotificationComponent {
     constructor() { }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: NotificationComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: NotificationComponent, selector: "stream-notification", inputs: { type: "type", content: "content" }, ngImport: i0, template: "<div\n  data-testid=\"custom-notification\"\n  class=\"str-chat__custom-notification notification-{{\n    type\n  }} str-chat__notification\"\n>\n  <ng-container *ngIf=\"content; else elseContent\">\n    <ng-container *ngTemplateOutlet=\"content\" />\n  </ng-container>\n  <ng-template #elseContent>\n    <ng-content></ng-content>\n  </ng-template>\n</div>\n", dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }] }); }
 }
-NotificationComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: NotificationComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-NotificationComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.4", type: NotificationComponent, selector: "stream-notification", inputs: { type: "type", content: "content" }, ngImport: i0, template: "<div\n  data-testid=\"custom-notification\"\n  class=\"str-chat__custom-notification notification-{{\n    type\n  }} str-chat__notification\"\n>\n  <ng-container *ngIf=\"content; else elseContent\">\n    <ng-container *ngTemplateOutlet=\"content\"></ng-container>\n  </ng-container>\n  <ng-template #elseContent>\n    <ng-content></ng-content>\n  </ng-template>\n</div>\n", dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: NotificationComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: NotificationComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'stream-notification', template: "<div\n  data-testid=\"custom-notification\"\n  class=\"str-chat__custom-notification notification-{{\n    type\n  }} str-chat__notification\"\n>\n  <ng-container *ngIf=\"content; else elseContent\">\n    <ng-container *ngTemplateOutlet=\"content\"></ng-container>\n  </ng-container>\n  <ng-template #elseContent>\n    <ng-content></ng-content>\n  </ng-template>\n</div>\n" }]
-        }], ctorParameters: function () { return []; }, propDecorators: { type: [{
+            args: [{ selector: 'stream-notification', template: "<div\n  data-testid=\"custom-notification\"\n  class=\"str-chat__custom-notification notification-{{\n    type\n  }} str-chat__notification\"\n>\n  <ng-container *ngIf=\"content; else elseContent\">\n    <ng-container *ngTemplateOutlet=\"content\" />\n  </ng-container>\n  <ng-template #elseContent>\n    <ng-content></ng-content>\n  </ng-template>\n</div>\n" }]
+        }], ctorParameters: () => [], propDecorators: { type: [{
                 type: Input
             }], content: [{
                 type: Input
@@ -3958,13 +3951,13 @@ class NotificationListComponent {
             dismissFn: notification.dismissFn,
         };
     }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: NotificationListComponent, deps: [{ token: CustomTemplatesService }, { token: NotificationService }, { token: ThemeService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: NotificationListComponent, selector: "stream-notification-list", ngImport: i0, template: "<div\n  data-testid=\"notification-list\"\n  class=\"str-chat str-chat__theme-{{\n    theme$ | async\n  }} str-chat__list-notifications\"\n>\n  <ng-container\n    *ngFor=\"let notification of notifications$ | async; trackBy: trackById\"\n  >\n    <ng-template #notificationContent>\n      <div\n        *ngIf=\"notification.text !== undefined\"\n        data-testclass=\"notification-content\"\n      >\n        {{ notification.text | translate : notification.translateParams }}\n      </div>\n      <ng-container *ngIf=\"notification.template !== undefined\">\n        <ng-container\n          *ngTemplateOutlet=\"\n            notification.template;\n            context: getNotificationContentContext(notification)\n          \"\n        />\n      </ng-container>\n    </ng-template>\n    <ng-container\n      *ngTemplateOutlet=\"\n        (customTemplatesService.notificationTemplate$ | async) ||\n          defaultNotification;\n        context: { type: notification.type, content: notificationContent }\n      \"\n    />\n  </ng-container>\n</div>\n\n<ng-template #defaultNotification let-type=\"type\" let-content=\"content\">\n  <stream-notification [type]=\"type\" [content]=\"content\" />\n</ng-template>\n", dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: NotificationComponent, selector: "stream-notification", inputs: ["type", "content"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "pipe", type: i6.TranslatePipe, name: "translate" }] }); }
 }
-NotificationListComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: NotificationListComponent, deps: [{ token: CustomTemplatesService }, { token: NotificationService }, { token: ThemeService }], target: i0.ɵɵFactoryTarget.Component });
-NotificationListComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.4", type: NotificationListComponent, selector: "stream-notification-list", ngImport: i0, template: "<div\n  data-testid=\"notification-list\"\n  class=\"str-chat str-chat__theme-{{\n    theme$ | async\n  }} str-chat__list-notifications\"\n>\n  <ng-container\n    *ngFor=\"let notification of notifications$ | async; trackBy: trackById\"\n  >\n    <ng-template #notificationContent>\n      <div\n        *ngIf=\"notification.text !== undefined\"\n        data-testclass=\"notification-content\"\n      >\n        {{ notification.text | translate : notification.translateParams }}\n      </div>\n      <ng-container *ngIf=\"notification.template !== undefined\">\n        <ng-container\n          *ngTemplateOutlet=\"\n            notification.template;\n            context: getNotificationContentContext(notification)\n          \"\n        ></ng-container>\n      </ng-container>\n    </ng-template>\n    <ng-container\n      *ngTemplateOutlet=\"\n        (customTemplatesService.notificationTemplate$ | async) ||\n          defaultNotification;\n        context: { type: notification.type, content: notificationContent }\n      \"\n    ></ng-container>\n  </ng-container>\n</div>\n\n<ng-template #defaultNotification let-type=\"type\" let-content=\"content\">\n  <stream-notification [type]=\"type\" [content]=\"content\"></stream-notification>\n</ng-template>\n", dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: NotificationComponent, selector: "stream-notification", inputs: ["type", "content"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "pipe", type: i6.TranslatePipe, name: "translate" }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: NotificationListComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: NotificationListComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'stream-notification-list', template: "<div\n  data-testid=\"notification-list\"\n  class=\"str-chat str-chat__theme-{{\n    theme$ | async\n  }} str-chat__list-notifications\"\n>\n  <ng-container\n    *ngFor=\"let notification of notifications$ | async; trackBy: trackById\"\n  >\n    <ng-template #notificationContent>\n      <div\n        *ngIf=\"notification.text !== undefined\"\n        data-testclass=\"notification-content\"\n      >\n        {{ notification.text | translate : notification.translateParams }}\n      </div>\n      <ng-container *ngIf=\"notification.template !== undefined\">\n        <ng-container\n          *ngTemplateOutlet=\"\n            notification.template;\n            context: getNotificationContentContext(notification)\n          \"\n        ></ng-container>\n      </ng-container>\n    </ng-template>\n    <ng-container\n      *ngTemplateOutlet=\"\n        (customTemplatesService.notificationTemplate$ | async) ||\n          defaultNotification;\n        context: { type: notification.type, content: notificationContent }\n      \"\n    ></ng-container>\n  </ng-container>\n</div>\n\n<ng-template #defaultNotification let-type=\"type\" let-content=\"content\">\n  <stream-notification [type]=\"type\" [content]=\"content\"></stream-notification>\n</ng-template>\n" }]
-        }], ctorParameters: function () { return [{ type: CustomTemplatesService }, { type: NotificationService }, { type: ThemeService }]; } });
+            args: [{ selector: 'stream-notification-list', template: "<div\n  data-testid=\"notification-list\"\n  class=\"str-chat str-chat__theme-{{\n    theme$ | async\n  }} str-chat__list-notifications\"\n>\n  <ng-container\n    *ngFor=\"let notification of notifications$ | async; trackBy: trackById\"\n  >\n    <ng-template #notificationContent>\n      <div\n        *ngIf=\"notification.text !== undefined\"\n        data-testclass=\"notification-content\"\n      >\n        {{ notification.text | translate : notification.translateParams }}\n      </div>\n      <ng-container *ngIf=\"notification.template !== undefined\">\n        <ng-container\n          *ngTemplateOutlet=\"\n            notification.template;\n            context: getNotificationContentContext(notification)\n          \"\n        />\n      </ng-container>\n    </ng-template>\n    <ng-container\n      *ngTemplateOutlet=\"\n        (customTemplatesService.notificationTemplate$ | async) ||\n          defaultNotification;\n        context: { type: notification.type, content: notificationContent }\n      \"\n    />\n  </ng-container>\n</div>\n\n<ng-template #defaultNotification let-type=\"type\" let-content=\"content\">\n  <stream-notification [type]=\"type\" [content]=\"content\" />\n</ng-template>\n" }]
+        }], ctorParameters: () => [{ type: CustomTemplatesService }, { type: NotificationService }, { type: ThemeService }] });
 
 /**
  * The `Modal` component displays its content in an overlay. The modal can be closed with a close button, if the user clicks outside of the modal content, or if the escape button is pressed. The modal can also be closed from outside.
@@ -4014,13 +4007,13 @@ class ModalComponent {
     stopWatchForOutsideClicks() {
         window.removeEventListener('click', this.watchForOutsideClicks);
     }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: ModalComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: ModalComponent, selector: "stream-modal", inputs: { isOpen: "isOpen", content: "content" }, outputs: { isOpenChange: "isOpenChange" }, viewQueries: [{ propertyName: "innerContainer", first: true, predicate: ["modalInner"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div\n  data-testid=\"modal\"\n  class=\"str-chat__modal str-chat__modal--{{ isOpen ? 'open' : 'close' }}\"\n>\n  <div\n    data-testid=\"close\"\n    class=\"str-chat__modal__close-button\"\n    (click)=\"close()\"\n    (keyup.enter)=\"close()\"\n  >\n    <stream-icon-placeholder icon=\"close\" />\n  </div>\n  <div\n    #modalInner\n    class=\"str-chat__modal__inner\"\n    (click)=\"$event.stopPropagation()\"\n    (keyup.enter)=\"$event.stopPropagation()\"\n  >\n    <ng-container *ngIf=\"content; else elseContent\">\n      <ng-container *ngTemplateOutlet=\"content\" />\n    </ng-container>\n    <ng-template #elseContent>\n      <ng-content></ng-content>\n    </ng-template>\n  </div>\n</div>\n", dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: IconPlaceholderComponent, selector: "stream-icon-placeholder", inputs: ["icon"] }] }); }
 }
-ModalComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: ModalComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-ModalComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.4", type: ModalComponent, selector: "stream-modal", inputs: { isOpen: "isOpen", content: "content" }, outputs: { isOpenChange: "isOpenChange" }, viewQueries: [{ propertyName: "innerContainer", first: true, predicate: ["modalInner"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div\n  data-testid=\"modal\"\n  class=\"str-chat__modal str-chat__modal--{{ isOpen ? 'open' : 'close' }}\"\n>\n  <div\n    data-testid=\"close\"\n    class=\"str-chat__modal__close-button\"\n    (click)=\"close()\"\n    (keyup.enter)=\"close()\"\n  >\n    <stream-icon-placeholder icon=\"close\"></stream-icon-placeholder>\n  </div>\n  <div\n    #modalInner\n    class=\"str-chat__modal__inner\"\n    (click)=\"$event.stopPropagation()\"\n    (keyup.enter)=\"$event.stopPropagation()\"\n  >\n    <ng-container *ngIf=\"content; else elseContent\">\n      <ng-container *ngTemplateOutlet=\"content\"></ng-container>\n    </ng-container>\n    <ng-template #elseContent>\n      <ng-content></ng-content>\n    </ng-template>\n  </div>\n</div>\n", dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: IconPlaceholderComponent, selector: "stream-icon-placeholder", inputs: ["icon"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: ModalComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: ModalComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'stream-modal', template: "<div\n  data-testid=\"modal\"\n  class=\"str-chat__modal str-chat__modal--{{ isOpen ? 'open' : 'close' }}\"\n>\n  <div\n    data-testid=\"close\"\n    class=\"str-chat__modal__close-button\"\n    (click)=\"close()\"\n    (keyup.enter)=\"close()\"\n  >\n    <stream-icon-placeholder icon=\"close\"></stream-icon-placeholder>\n  </div>\n  <div\n    #modalInner\n    class=\"str-chat__modal__inner\"\n    (click)=\"$event.stopPropagation()\"\n    (keyup.enter)=\"$event.stopPropagation()\"\n  >\n    <ng-container *ngIf=\"content; else elseContent\">\n      <ng-container *ngTemplateOutlet=\"content\"></ng-container>\n    </ng-container>\n    <ng-template #elseContent>\n      <ng-content></ng-content>\n    </ng-template>\n  </div>\n</div>\n" }]
-        }], ctorParameters: function () { return []; }, propDecorators: { isOpen: [{
+            args: [{ selector: 'stream-modal', template: "<div\n  data-testid=\"modal\"\n  class=\"str-chat__modal str-chat__modal--{{ isOpen ? 'open' : 'close' }}\"\n>\n  <div\n    data-testid=\"close\"\n    class=\"str-chat__modal__close-button\"\n    (click)=\"close()\"\n    (keyup.enter)=\"close()\"\n  >\n    <stream-icon-placeholder icon=\"close\" />\n  </div>\n  <div\n    #modalInner\n    class=\"str-chat__modal__inner\"\n    (click)=\"$event.stopPropagation()\"\n    (keyup.enter)=\"$event.stopPropagation()\"\n  >\n    <ng-container *ngIf=\"content; else elseContent\">\n      <ng-container *ngTemplateOutlet=\"content\" />\n    </ng-container>\n    <ng-template #elseContent>\n      <ng-content></ng-content>\n    </ng-template>\n  </div>\n</div>\n" }]
+        }], ctorParameters: () => [], propDecorators: { isOpen: [{
                 type: Input
             }], content: [{
                 type: Input
@@ -4084,13 +4077,13 @@ class MessageBouncePromptComponent {
         this.message = undefined;
         this.channelService.bouncedMessage$.next(undefined);
     }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: MessageBouncePromptComponent, deps: [{ token: ChannelService }, { token: CustomTemplatesService }, { token: MessageActionsService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: MessageBouncePromptComponent, selector: "stream-message-bounce-prompt", host: { properties: { "class": "this.class" } }, ngImport: i0, template: "<ng-container\n  *ngTemplateOutlet=\"\n    (customTemplatesService.modalTemplate$ | async) || defaultModal;\n    context: {\n      message: message,\n      isOpen: isModalOpen,\n      isOpenChangeHandler: messageBounceModalOpenChanged,\n      content: modalContent\n    }\n  \"\n/>\n\n<ng-template\n  #defaultModal\n  let-isOpen=\"isOpen\"\n  let-isOpenChangeHandler=\"isOpenChangeHandler\"\n  let-content=\"content\"\n>\n  <stream-modal\n    *ngIf=\"isOpen\"\n    [isOpen]=\"isOpen\"\n    [content]=\"content\"\n    (isOpenChange)=\"isOpenChangeHandler($event)\"\n  />\n</ng-template>\n\n<ng-template #modalContent>\n  <div\n    class=\"str-chat__message-bounce-prompt\"\n    data-testid=\"message-bounce-prompt\"\n  >\n    <div class=\"str-chat__message-bounce-prompt-header\">\n      {{\n        \"streamChat.This message did not meet our content guidelines\"\n          | translate\n      }}\n    </div>\n    <div class=\"str-chat__message-bounce-actions\">\n      <button\n        class=\"str-chat__message-bounce-edit\"\n        data-testid=\"message-bounce-edit\"\n        type=\"button\"\n        (click)=\"editMessage()\"\n        (keyup.enter)=\"editMessage()\"\n      >\n        {{ \"streamChat.Edit Message\" | translate }}\n      </button>\n      <button\n        class=\"str-chat__message-bounce-send\"\n        data-testid=\"message-bounce-send\"\n        (click)=\"resendMessage()\"\n        (keyup.enter)=\"resendMessage()\"\n      >\n        {{ \"streamChat.Send Anyway\" | translate }}\n      </button>\n      <button\n        class=\"str-chat__message-bounce-delete\"\n        data-testid=\"message-bounce-delete\"\n        (click)=\"deleteMessage()\"\n        (keyup.enter)=\"deleteMessage()\"\n      >\n        {{ \"streamChat.Delete\" | translate }}\n      </button>\n    </div>\n  </div>\n</ng-template>\n", dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: ModalComponent, selector: "stream-modal", inputs: ["isOpen", "content"], outputs: ["isOpenChange"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "pipe", type: i6.TranslatePipe, name: "translate" }] }); }
 }
-MessageBouncePromptComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: MessageBouncePromptComponent, deps: [{ token: ChannelService }, { token: CustomTemplatesService }, { token: MessageActionsService }], target: i0.ɵɵFactoryTarget.Component });
-MessageBouncePromptComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.4", type: MessageBouncePromptComponent, selector: "stream-message-bounce-prompt", host: { properties: { "class": "this.class" } }, ngImport: i0, template: "<ng-container\n  *ngTemplateOutlet=\"\n    (customTemplatesService.modalTemplate$ | async) || defaultModal;\n    context: {\n      message: message,\n      isOpen: isModalOpen,\n      isOpenChangeHandler: messageBounceModalOpenChanged,\n      content: modalContent\n    }\n  \"\n></ng-container>\n\n<ng-template\n  #defaultModal\n  let-isOpen=\"isOpen\"\n  let-isOpenChangeHandler=\"isOpenChangeHandler\"\n  let-content=\"content\"\n>\n  <stream-modal\n    *ngIf=\"isOpen\"\n    [isOpen]=\"isOpen\"\n    [content]=\"content\"\n    (isOpenChange)=\"isOpenChangeHandler($event)\"\n  >\n  </stream-modal>\n</ng-template>\n\n<ng-template #modalContent>\n  <div\n    class=\"str-chat__message-bounce-prompt\"\n    data-testid=\"message-bounce-prompt\"\n  >\n    <div class=\"str-chat__message-bounce-prompt-header\">\n      {{\n        \"streamChat.This message did not meet our content guidelines\"\n          | translate\n      }}\n    </div>\n    <div class=\"str-chat__message-bounce-actions\">\n      <button\n        class=\"str-chat__message-bounce-edit\"\n        data-testid=\"message-bounce-edit\"\n        type=\"button\"\n        (click)=\"editMessage()\"\n        (keyup.enter)=\"editMessage()\"\n      >\n        {{ \"streamChat.Edit Message\" | translate }}\n      </button>\n      <button\n        class=\"str-chat__message-bounce-send\"\n        data-testid=\"message-bounce-send\"\n        (click)=\"resendMessage()\"\n        (keyup.enter)=\"resendMessage()\"\n      >\n        {{ \"streamChat.Send Anyway\" | translate }}\n      </button>\n      <button\n        class=\"str-chat__message-bounce-delete\"\n        data-testid=\"message-bounce-delete\"\n        (click)=\"deleteMessage()\"\n        (keyup.enter)=\"deleteMessage()\"\n      >\n        {{ \"streamChat.Delete\" | translate }}\n      </button>\n    </div>\n  </div>\n</ng-template>\n", dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: ModalComponent, selector: "stream-modal", inputs: ["isOpen", "content"], outputs: ["isOpenChange"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "pipe", type: i6.TranslatePipe, name: "translate" }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: MessageBouncePromptComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: MessageBouncePromptComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'stream-message-bounce-prompt', template: "<ng-container\n  *ngTemplateOutlet=\"\n    (customTemplatesService.modalTemplate$ | async) || defaultModal;\n    context: {\n      message: message,\n      isOpen: isModalOpen,\n      isOpenChangeHandler: messageBounceModalOpenChanged,\n      content: modalContent\n    }\n  \"\n></ng-container>\n\n<ng-template\n  #defaultModal\n  let-isOpen=\"isOpen\"\n  let-isOpenChangeHandler=\"isOpenChangeHandler\"\n  let-content=\"content\"\n>\n  <stream-modal\n    *ngIf=\"isOpen\"\n    [isOpen]=\"isOpen\"\n    [content]=\"content\"\n    (isOpenChange)=\"isOpenChangeHandler($event)\"\n  >\n  </stream-modal>\n</ng-template>\n\n<ng-template #modalContent>\n  <div\n    class=\"str-chat__message-bounce-prompt\"\n    data-testid=\"message-bounce-prompt\"\n  >\n    <div class=\"str-chat__message-bounce-prompt-header\">\n      {{\n        \"streamChat.This message did not meet our content guidelines\"\n          | translate\n      }}\n    </div>\n    <div class=\"str-chat__message-bounce-actions\">\n      <button\n        class=\"str-chat__message-bounce-edit\"\n        data-testid=\"message-bounce-edit\"\n        type=\"button\"\n        (click)=\"editMessage()\"\n        (keyup.enter)=\"editMessage()\"\n      >\n        {{ \"streamChat.Edit Message\" | translate }}\n      </button>\n      <button\n        class=\"str-chat__message-bounce-send\"\n        data-testid=\"message-bounce-send\"\n        (click)=\"resendMessage()\"\n        (keyup.enter)=\"resendMessage()\"\n      >\n        {{ \"streamChat.Send Anyway\" | translate }}\n      </button>\n      <button\n        class=\"str-chat__message-bounce-delete\"\n        data-testid=\"message-bounce-delete\"\n        (click)=\"deleteMessage()\"\n        (keyup.enter)=\"deleteMessage()\"\n      >\n        {{ \"streamChat.Delete\" | translate }}\n      </button>\n    </div>\n  </div>\n</ng-template>\n" }]
-        }], ctorParameters: function () { return [{ type: ChannelService }, { type: CustomTemplatesService }, { type: MessageActionsService }]; }, propDecorators: { class: [{
+            args: [{ selector: 'stream-message-bounce-prompt', template: "<ng-container\n  *ngTemplateOutlet=\"\n    (customTemplatesService.modalTemplate$ | async) || defaultModal;\n    context: {\n      message: message,\n      isOpen: isModalOpen,\n      isOpenChangeHandler: messageBounceModalOpenChanged,\n      content: modalContent\n    }\n  \"\n/>\n\n<ng-template\n  #defaultModal\n  let-isOpen=\"isOpen\"\n  let-isOpenChangeHandler=\"isOpenChangeHandler\"\n  let-content=\"content\"\n>\n  <stream-modal\n    *ngIf=\"isOpen\"\n    [isOpen]=\"isOpen\"\n    [content]=\"content\"\n    (isOpenChange)=\"isOpenChangeHandler($event)\"\n  />\n</ng-template>\n\n<ng-template #modalContent>\n  <div\n    class=\"str-chat__message-bounce-prompt\"\n    data-testid=\"message-bounce-prompt\"\n  >\n    <div class=\"str-chat__message-bounce-prompt-header\">\n      {{\n        \"streamChat.This message did not meet our content guidelines\"\n          | translate\n      }}\n    </div>\n    <div class=\"str-chat__message-bounce-actions\">\n      <button\n        class=\"str-chat__message-bounce-edit\"\n        data-testid=\"message-bounce-edit\"\n        type=\"button\"\n        (click)=\"editMessage()\"\n        (keyup.enter)=\"editMessage()\"\n      >\n        {{ \"streamChat.Edit Message\" | translate }}\n      </button>\n      <button\n        class=\"str-chat__message-bounce-send\"\n        data-testid=\"message-bounce-send\"\n        (click)=\"resendMessage()\"\n        (keyup.enter)=\"resendMessage()\"\n      >\n        {{ \"streamChat.Send Anyway\" | translate }}\n      </button>\n      <button\n        class=\"str-chat__message-bounce-delete\"\n        data-testid=\"message-bounce-delete\"\n        (click)=\"deleteMessage()\"\n        (keyup.enter)=\"deleteMessage()\"\n      >\n        {{ \"streamChat.Delete\" | translate }}\n      </button>\n    </div>\n  </div>\n</ng-template>\n" }]
+        }], ctorParameters: () => [{ type: ChannelService }, { type: CustomTemplatesService }, { type: MessageActionsService }], propDecorators: { class: [{
                 type: HostBinding
             }] } });
 
@@ -4119,13 +4112,13 @@ class ChannelComponent {
         this.theme$ = this.themeService.theme$;
         this.isActiveChannel$ = this.channelService.activeChannel$.pipe(map((c) => !!c));
     }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: ChannelComponent, deps: [{ token: ChannelService }, { token: ThemeService }, { token: CustomTemplatesService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: ChannelComponent, selector: "stream-channel", ngImport: i0, template: "<div\n  class=\"str-chat str-chat-channel messaging str-chat__channel str-chat__theme-{{\n    theme$ | async\n  }}\"\n>\n  <div\n    *ngIf=\"\n      (isError$ | async) === false &&\n        (isInitializing$ | async) === false &&\n        (isActiveChannel$ | async) === true;\n      else noChannel\n    \"\n    class=\"str-chat__container\"\n  >\n    <ng-container\n      *ngTemplateOutlet=\"\n        (customTemplatesService.messageBouncePromptTemplate$ | async) ||\n        defaultMessageBouncePrompt\n      \"\n    />\n    <ng-template #defaultMessageBouncePrompt>\n      <stream-message-bounce-prompt />\n    </ng-template>\n    <div class=\"str-chat__main-panel\">\n      <ng-content></ng-content>\n    </div>\n    <ng-content\n      *ngIf=\"isActiveThread$ | async\"\n      select='[name=\"thread\"]'\n    ></ng-content>\n  </div>\n  <ng-template #noChannel>\n    <div\n      *ngIf=\"\n        (isInitializing$ | async) === false &&\n        ((isError$ | async) === true || (isActiveChannel$ | async) === false)\n      \"\n      class=\"str-chat__empty-channel\"\n    >\n      <stream-icon icon=\"chat-bubble\" />\n      <p class=\"str-chat__empty-channel-text\">\n        {{ \"streamChat.No chats here yet\u2026\" | translate }}\n      </p>\n      <div class=\"str-chat__empty-channel-notifications\">\n        <stream-notification-list />\n      </div>\n    </div>\n    <div\n      *ngIf=\"\n        (isInitializing$ | async) === true &&\n        (isError$ | async) === false &&\n        (isActiveChannel$ | async) === false\n      \"\n      class=\"str-chat__loading-channel\"\n    >\n      <div class=\"str-chat__loading-channel-header\">\n        <div class=\"str-chat__loading-channel-header-avatar\"></div>\n        <div class=\"str-chat__loading-channel-header-end\">\n          <div class=\"str-chat__loading-channel-header-name\"></div>\n          <div class=\"str-chat__loading-channel-header-info\"></div>\n        </div>\n      </div>\n      <div class=\"str-chat__loading-channel-message-list\">\n        <div class=\"str-chat__loading-channel-message\">\n          <div class=\"str-chat__loading-channel-message-avatar\"></div>\n          <div class=\"str-chat__loading-channel-message-end\">\n            <div class=\"str-chat__loading-channel-message-sender\"></div>\n            <div class=\"str-chat__loading-channel-message-last-row\">\n              <div class=\"str-chat__loading-channel-message-text\"></div>\n              <div class=\"str-chat__loading-channel-message-date\"></div>\n            </div>\n          </div>\n        </div>\n        <div class=\"str-chat__loading-channel-message\">\n          <div class=\"str-chat__loading-channel-message-avatar\"></div>\n          <div class=\"str-chat__loading-channel-message-end\">\n            <div class=\"str-chat__loading-channel-message-sender\"></div>\n            <div class=\"str-chat__loading-channel-message-last-row\">\n              <div class=\"str-chat__loading-channel-message-text\"></div>\n              <div class=\"str-chat__loading-channel-message-date\"></div>\n            </div>\n          </div>\n        </div>\n        <div class=\"str-chat__loading-channel-message\">\n          <div class=\"str-chat__loading-channel-message-avatar\"></div>\n          <div class=\"str-chat__loading-channel-message-end\">\n            <div class=\"str-chat__loading-channel-message-sender\"></div>\n            <div class=\"str-chat__loading-channel-message-last-row\">\n              <div class=\"str-chat__loading-channel-message-text\"></div>\n              <div class=\"str-chat__loading-channel-message-date\"></div>\n            </div>\n          </div>\n        </div>\n      </div>\n      <div class=\"str-chat__loading-channel-message-input-row\">\n        <div class=\"str-chat__loading-channel-message-input\"></div>\n        <div class=\"str-chat__loading-channel-message-send\"></div>\n      </div>\n    </div>\n  </ng-template>\n</div>\n", dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: IconComponent, selector: "stream-icon", inputs: ["icon"] }, { kind: "component", type: NotificationListComponent, selector: "stream-notification-list" }, { kind: "component", type: MessageBouncePromptComponent, selector: "stream-message-bounce-prompt" }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "pipe", type: i6.TranslatePipe, name: "translate" }] }); }
 }
-ChannelComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: ChannelComponent, deps: [{ token: ChannelService }, { token: ThemeService }, { token: CustomTemplatesService }], target: i0.ɵɵFactoryTarget.Component });
-ChannelComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.4", type: ChannelComponent, selector: "stream-channel", ngImport: i0, template: "<div\n  class=\"str-chat str-chat-channel messaging str-chat__channel str-chat__theme-{{\n    theme$ | async\n  }}\"\n>\n  <div\n    *ngIf=\"\n      (isError$ | async) === false &&\n        (isInitializing$ | async) === false &&\n        (isActiveChannel$ | async) === true;\n      else noChannel\n    \"\n    class=\"str-chat__container\"\n  >\n    <ng-container\n      *ngTemplateOutlet=\"\n        (customTemplatesService.messageBouncePromptTemplate$ | async) ||\n        defaultMessageBouncePrompt\n      \"\n    ></ng-container>\n    <ng-template #defaultMessageBouncePrompt>\n      <stream-message-bounce-prompt></stream-message-bounce-prompt>\n    </ng-template>\n    <div class=\"str-chat__main-panel\">\n      <ng-content></ng-content>\n    </div>\n    <ng-content\n      *ngIf=\"isActiveThread$ | async\"\n      select='[name=\"thread\"]'\n    ></ng-content>\n  </div>\n  <ng-template #noChannel>\n    <div\n      *ngIf=\"\n        (isInitializing$ | async) === false &&\n        ((isError$ | async) === true || (isActiveChannel$ | async) === false)\n      \"\n      class=\"str-chat__empty-channel\"\n    >\n      <stream-icon icon=\"chat-bubble\"></stream-icon>\n      <p class=\"str-chat__empty-channel-text\">\n        {{ \"streamChat.No chats here yet\u2026\" | translate }}\n      </p>\n      <div class=\"str-chat__empty-channel-notifications\">\n        <stream-notification-list></stream-notification-list>\n      </div>\n    </div>\n    <div\n      *ngIf=\"\n        (isInitializing$ | async) === true &&\n        (isError$ | async) === false &&\n        (isActiveChannel$ | async) === false\n      \"\n      class=\"str-chat__loading-channel\"\n    >\n      <div class=\"str-chat__loading-channel-header\">\n        <div class=\"str-chat__loading-channel-header-avatar\"></div>\n        <div class=\"str-chat__loading-channel-header-end\">\n          <div class=\"str-chat__loading-channel-header-name\"></div>\n          <div class=\"str-chat__loading-channel-header-info\"></div>\n        </div>\n      </div>\n      <div class=\"str-chat__loading-channel-message-list\">\n        <div class=\"str-chat__loading-channel-message\">\n          <div class=\"str-chat__loading-channel-message-avatar\"></div>\n          <div class=\"str-chat__loading-channel-message-end\">\n            <div class=\"str-chat__loading-channel-message-sender\"></div>\n            <div class=\"str-chat__loading-channel-message-last-row\">\n              <div class=\"str-chat__loading-channel-message-text\"></div>\n              <div class=\"str-chat__loading-channel-message-date\"></div>\n            </div>\n          </div>\n        </div>\n        <div class=\"str-chat__loading-channel-message\">\n          <div class=\"str-chat__loading-channel-message-avatar\"></div>\n          <div class=\"str-chat__loading-channel-message-end\">\n            <div class=\"str-chat__loading-channel-message-sender\"></div>\n            <div class=\"str-chat__loading-channel-message-last-row\">\n              <div class=\"str-chat__loading-channel-message-text\"></div>\n              <div class=\"str-chat__loading-channel-message-date\"></div>\n            </div>\n          </div>\n        </div>\n        <div class=\"str-chat__loading-channel-message\">\n          <div class=\"str-chat__loading-channel-message-avatar\"></div>\n          <div class=\"str-chat__loading-channel-message-end\">\n            <div class=\"str-chat__loading-channel-message-sender\"></div>\n            <div class=\"str-chat__loading-channel-message-last-row\">\n              <div class=\"str-chat__loading-channel-message-text\"></div>\n              <div class=\"str-chat__loading-channel-message-date\"></div>\n            </div>\n          </div>\n        </div>\n      </div>\n      <div class=\"str-chat__loading-channel-message-input-row\">\n        <div class=\"str-chat__loading-channel-message-input\"></div>\n        <div class=\"str-chat__loading-channel-message-send\"></div>\n      </div>\n    </div>\n  </ng-template>\n</div>\n", dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: IconComponent, selector: "stream-icon", inputs: ["icon"] }, { kind: "component", type: NotificationListComponent, selector: "stream-notification-list" }, { kind: "component", type: MessageBouncePromptComponent, selector: "stream-message-bounce-prompt" }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "pipe", type: i6.TranslatePipe, name: "translate" }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: ChannelComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: ChannelComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'stream-channel', template: "<div\n  class=\"str-chat str-chat-channel messaging str-chat__channel str-chat__theme-{{\n    theme$ | async\n  }}\"\n>\n  <div\n    *ngIf=\"\n      (isError$ | async) === false &&\n        (isInitializing$ | async) === false &&\n        (isActiveChannel$ | async) === true;\n      else noChannel\n    \"\n    class=\"str-chat__container\"\n  >\n    <ng-container\n      *ngTemplateOutlet=\"\n        (customTemplatesService.messageBouncePromptTemplate$ | async) ||\n        defaultMessageBouncePrompt\n      \"\n    ></ng-container>\n    <ng-template #defaultMessageBouncePrompt>\n      <stream-message-bounce-prompt></stream-message-bounce-prompt>\n    </ng-template>\n    <div class=\"str-chat__main-panel\">\n      <ng-content></ng-content>\n    </div>\n    <ng-content\n      *ngIf=\"isActiveThread$ | async\"\n      select='[name=\"thread\"]'\n    ></ng-content>\n  </div>\n  <ng-template #noChannel>\n    <div\n      *ngIf=\"\n        (isInitializing$ | async) === false &&\n        ((isError$ | async) === true || (isActiveChannel$ | async) === false)\n      \"\n      class=\"str-chat__empty-channel\"\n    >\n      <stream-icon icon=\"chat-bubble\"></stream-icon>\n      <p class=\"str-chat__empty-channel-text\">\n        {{ \"streamChat.No chats here yet\u2026\" | translate }}\n      </p>\n      <div class=\"str-chat__empty-channel-notifications\">\n        <stream-notification-list></stream-notification-list>\n      </div>\n    </div>\n    <div\n      *ngIf=\"\n        (isInitializing$ | async) === true &&\n        (isError$ | async) === false &&\n        (isActiveChannel$ | async) === false\n      \"\n      class=\"str-chat__loading-channel\"\n    >\n      <div class=\"str-chat__loading-channel-header\">\n        <div class=\"str-chat__loading-channel-header-avatar\"></div>\n        <div class=\"str-chat__loading-channel-header-end\">\n          <div class=\"str-chat__loading-channel-header-name\"></div>\n          <div class=\"str-chat__loading-channel-header-info\"></div>\n        </div>\n      </div>\n      <div class=\"str-chat__loading-channel-message-list\">\n        <div class=\"str-chat__loading-channel-message\">\n          <div class=\"str-chat__loading-channel-message-avatar\"></div>\n          <div class=\"str-chat__loading-channel-message-end\">\n            <div class=\"str-chat__loading-channel-message-sender\"></div>\n            <div class=\"str-chat__loading-channel-message-last-row\">\n              <div class=\"str-chat__loading-channel-message-text\"></div>\n              <div class=\"str-chat__loading-channel-message-date\"></div>\n            </div>\n          </div>\n        </div>\n        <div class=\"str-chat__loading-channel-message\">\n          <div class=\"str-chat__loading-channel-message-avatar\"></div>\n          <div class=\"str-chat__loading-channel-message-end\">\n            <div class=\"str-chat__loading-channel-message-sender\"></div>\n            <div class=\"str-chat__loading-channel-message-last-row\">\n              <div class=\"str-chat__loading-channel-message-text\"></div>\n              <div class=\"str-chat__loading-channel-message-date\"></div>\n            </div>\n          </div>\n        </div>\n        <div class=\"str-chat__loading-channel-message\">\n          <div class=\"str-chat__loading-channel-message-avatar\"></div>\n          <div class=\"str-chat__loading-channel-message-end\">\n            <div class=\"str-chat__loading-channel-message-sender\"></div>\n            <div class=\"str-chat__loading-channel-message-last-row\">\n              <div class=\"str-chat__loading-channel-message-text\"></div>\n              <div class=\"str-chat__loading-channel-message-date\"></div>\n            </div>\n          </div>\n        </div>\n      </div>\n      <div class=\"str-chat__loading-channel-message-input-row\">\n        <div class=\"str-chat__loading-channel-message-input\"></div>\n        <div class=\"str-chat__loading-channel-message-send\"></div>\n      </div>\n    </div>\n  </ng-template>\n</div>\n" }]
-        }], ctorParameters: function () { return [{ type: ChannelService }, { type: ThemeService }, { type: CustomTemplatesService }]; } });
+            args: [{ selector: 'stream-channel', template: "<div\n  class=\"str-chat str-chat-channel messaging str-chat__channel str-chat__theme-{{\n    theme$ | async\n  }}\"\n>\n  <div\n    *ngIf=\"\n      (isError$ | async) === false &&\n        (isInitializing$ | async) === false &&\n        (isActiveChannel$ | async) === true;\n      else noChannel\n    \"\n    class=\"str-chat__container\"\n  >\n    <ng-container\n      *ngTemplateOutlet=\"\n        (customTemplatesService.messageBouncePromptTemplate$ | async) ||\n        defaultMessageBouncePrompt\n      \"\n    />\n    <ng-template #defaultMessageBouncePrompt>\n      <stream-message-bounce-prompt />\n    </ng-template>\n    <div class=\"str-chat__main-panel\">\n      <ng-content></ng-content>\n    </div>\n    <ng-content\n      *ngIf=\"isActiveThread$ | async\"\n      select='[name=\"thread\"]'\n    ></ng-content>\n  </div>\n  <ng-template #noChannel>\n    <div\n      *ngIf=\"\n        (isInitializing$ | async) === false &&\n        ((isError$ | async) === true || (isActiveChannel$ | async) === false)\n      \"\n      class=\"str-chat__empty-channel\"\n    >\n      <stream-icon icon=\"chat-bubble\" />\n      <p class=\"str-chat__empty-channel-text\">\n        {{ \"streamChat.No chats here yet\u2026\" | translate }}\n      </p>\n      <div class=\"str-chat__empty-channel-notifications\">\n        <stream-notification-list />\n      </div>\n    </div>\n    <div\n      *ngIf=\"\n        (isInitializing$ | async) === true &&\n        (isError$ | async) === false &&\n        (isActiveChannel$ | async) === false\n      \"\n      class=\"str-chat__loading-channel\"\n    >\n      <div class=\"str-chat__loading-channel-header\">\n        <div class=\"str-chat__loading-channel-header-avatar\"></div>\n        <div class=\"str-chat__loading-channel-header-end\">\n          <div class=\"str-chat__loading-channel-header-name\"></div>\n          <div class=\"str-chat__loading-channel-header-info\"></div>\n        </div>\n      </div>\n      <div class=\"str-chat__loading-channel-message-list\">\n        <div class=\"str-chat__loading-channel-message\">\n          <div class=\"str-chat__loading-channel-message-avatar\"></div>\n          <div class=\"str-chat__loading-channel-message-end\">\n            <div class=\"str-chat__loading-channel-message-sender\"></div>\n            <div class=\"str-chat__loading-channel-message-last-row\">\n              <div class=\"str-chat__loading-channel-message-text\"></div>\n              <div class=\"str-chat__loading-channel-message-date\"></div>\n            </div>\n          </div>\n        </div>\n        <div class=\"str-chat__loading-channel-message\">\n          <div class=\"str-chat__loading-channel-message-avatar\"></div>\n          <div class=\"str-chat__loading-channel-message-end\">\n            <div class=\"str-chat__loading-channel-message-sender\"></div>\n            <div class=\"str-chat__loading-channel-message-last-row\">\n              <div class=\"str-chat__loading-channel-message-text\"></div>\n              <div class=\"str-chat__loading-channel-message-date\"></div>\n            </div>\n          </div>\n        </div>\n        <div class=\"str-chat__loading-channel-message\">\n          <div class=\"str-chat__loading-channel-message-avatar\"></div>\n          <div class=\"str-chat__loading-channel-message-end\">\n            <div class=\"str-chat__loading-channel-message-sender\"></div>\n            <div class=\"str-chat__loading-channel-message-last-row\">\n              <div class=\"str-chat__loading-channel-message-text\"></div>\n              <div class=\"str-chat__loading-channel-message-date\"></div>\n            </div>\n          </div>\n        </div>\n      </div>\n      <div class=\"str-chat__loading-channel-message-input-row\">\n        <div class=\"str-chat__loading-channel-message-input\"></div>\n        <div class=\"str-chat__loading-channel-message-send\"></div>\n      </div>\n    </div>\n  </ng-template>\n</div>\n" }]
+        }], ctorParameters: () => [{ type: ChannelService }, { type: ThemeService }, { type: CustomTemplatesService }] });
 
 const listUsers = (users, displayRestCount = true, othersText = '') => {
     let outStr = '';
@@ -4207,13 +4200,13 @@ class ChannelHeaderComponent {
     get avatarName() {
         return this.activeChannel?.data?.name;
     }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: ChannelHeaderComponent, deps: [{ token: ChannelService }, { token: CustomTemplatesService }, { token: i0.ChangeDetectorRef }, { token: ChatClientService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: ChannelHeaderComponent, selector: "stream-channel-header", ngImport: i0, template: "<div class=\"str-chat__header-livestream str-chat__channel-header\">\n  <ng-content></ng-content>\n  <stream-avatar-placeholder\n    type=\"channel\"\n    location=\"channel-header\"\n    imageUrl=\"{{ activeChannel?.data?.image }}\"\n    name=\"{{ avatarName }}\"\n    [channel]=\"activeChannel\"\n  />\n  <div class=\"str-chat__header-livestream-left str-chat__channel-header-end\">\n    <p\n      data-testid=\"name\"\n      class=\"str-chat__header-livestream-left--title str-chat__channel-header-title\"\n    >\n      {{ displayText }}\n    </p>\n    <ng-container\n      *ngTemplateOutlet=\"\n        channelHeaderInfoTemplate || defaultChannelInfo;\n        context: getChannelInfoContext()\n      \"\n    />\n    <ng-template #defaultChannelInfo>\n      <p\n        data-testid=\"info\"\n        class=\"str-chat__header-livestream-left--members str-chat__channel-header-info\"\n      >\n        {{'streamChat.{{ memberCount }} members' | translate:memberCountParam}}\n        {{canReceiveConnectEvents ? ('streamChat.{{ watcherCount }} online' |\n        translate:watcherCountParam) : ''}}\n      </p>\n    </ng-template>\n  </div>\n  <ng-container *ngIf=\"channelActionsTemplate\">\n    <ng-container\n      *ngTemplateOutlet=\"\n        channelActionsTemplate;\n        context: getChannelActionsContext()\n      \"\n    />\n  </ng-container>\n</div>\n", dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: AvatarPlaceholderComponent, selector: "stream-avatar-placeholder", inputs: ["name", "imageUrl", "location", "channel", "user", "type", "initialsType", "showOnlineIndicator"] }, { kind: "pipe", type: i6.TranslatePipe, name: "translate" }] }); }
 }
-ChannelHeaderComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: ChannelHeaderComponent, deps: [{ token: ChannelService }, { token: CustomTemplatesService }, { token: i0.ChangeDetectorRef }, { token: ChatClientService }], target: i0.ɵɵFactoryTarget.Component });
-ChannelHeaderComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.4", type: ChannelHeaderComponent, selector: "stream-channel-header", ngImport: i0, template: "<div class=\"str-chat__header-livestream str-chat__channel-header\">\n  <ng-content></ng-content>\n  <stream-avatar-placeholder\n    type=\"channel\"\n    location=\"channel-header\"\n    imageUrl=\"{{ activeChannel?.data?.image }}\"\n    name=\"{{ avatarName }}\"\n    [channel]=\"activeChannel\"\n  ></stream-avatar-placeholder>\n  <div class=\"str-chat__header-livestream-left str-chat__channel-header-end\">\n    <p\n      data-testid=\"name\"\n      class=\"str-chat__header-livestream-left--title str-chat__channel-header-title\"\n    >\n      {{ displayText }}\n    </p>\n    <ng-container\n      *ngTemplateOutlet=\"\n        channelHeaderInfoTemplate || defaultChannelInfo;\n        context: getChannelInfoContext()\n      \"\n    ></ng-container>\n    <ng-template #defaultChannelInfo>\n      <p\n        data-testid=\"info\"\n        class=\"str-chat__header-livestream-left--members str-chat__channel-header-info\"\n      >\n        {{'streamChat.{{ memberCount }} members' | translate:memberCountParam}}\n        {{canReceiveConnectEvents ? ('streamChat.{{ watcherCount }} online' |\n        translate:watcherCountParam) : ''}}\n      </p>\n    </ng-template>\n  </div>\n  <ng-container *ngIf=\"channelActionsTemplate\">\n    <ng-container\n      *ngTemplateOutlet=\"\n        channelActionsTemplate;\n        context: getChannelActionsContext()\n      \"\n    ></ng-container>\n  </ng-container>\n</div>\n", dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: AvatarPlaceholderComponent, selector: "stream-avatar-placeholder", inputs: ["name", "imageUrl", "location", "channel", "user", "type", "initialsType", "showOnlineIndicator"] }, { kind: "pipe", type: i6.TranslatePipe, name: "translate" }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: ChannelHeaderComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: ChannelHeaderComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'stream-channel-header', template: "<div class=\"str-chat__header-livestream str-chat__channel-header\">\n  <ng-content></ng-content>\n  <stream-avatar-placeholder\n    type=\"channel\"\n    location=\"channel-header\"\n    imageUrl=\"{{ activeChannel?.data?.image }}\"\n    name=\"{{ avatarName }}\"\n    [channel]=\"activeChannel\"\n  ></stream-avatar-placeholder>\n  <div class=\"str-chat__header-livestream-left str-chat__channel-header-end\">\n    <p\n      data-testid=\"name\"\n      class=\"str-chat__header-livestream-left--title str-chat__channel-header-title\"\n    >\n      {{ displayText }}\n    </p>\n    <ng-container\n      *ngTemplateOutlet=\"\n        channelHeaderInfoTemplate || defaultChannelInfo;\n        context: getChannelInfoContext()\n      \"\n    ></ng-container>\n    <ng-template #defaultChannelInfo>\n      <p\n        data-testid=\"info\"\n        class=\"str-chat__header-livestream-left--members str-chat__channel-header-info\"\n      >\n        {{'streamChat.{{ memberCount }} members' | translate:memberCountParam}}\n        {{canReceiveConnectEvents ? ('streamChat.{{ watcherCount }} online' |\n        translate:watcherCountParam) : ''}}\n      </p>\n    </ng-template>\n  </div>\n  <ng-container *ngIf=\"channelActionsTemplate\">\n    <ng-container\n      *ngTemplateOutlet=\"\n        channelActionsTemplate;\n        context: getChannelActionsContext()\n      \"\n    ></ng-container>\n  </ng-container>\n</div>\n" }]
-        }], ctorParameters: function () { return [{ type: ChannelService }, { type: CustomTemplatesService }, { type: i0.ChangeDetectorRef }, { type: ChatClientService }]; } });
+            args: [{ selector: 'stream-channel-header', template: "<div class=\"str-chat__header-livestream str-chat__channel-header\">\n  <ng-content></ng-content>\n  <stream-avatar-placeholder\n    type=\"channel\"\n    location=\"channel-header\"\n    imageUrl=\"{{ activeChannel?.data?.image }}\"\n    name=\"{{ avatarName }}\"\n    [channel]=\"activeChannel\"\n  />\n  <div class=\"str-chat__header-livestream-left str-chat__channel-header-end\">\n    <p\n      data-testid=\"name\"\n      class=\"str-chat__header-livestream-left--title str-chat__channel-header-title\"\n    >\n      {{ displayText }}\n    </p>\n    <ng-container\n      *ngTemplateOutlet=\"\n        channelHeaderInfoTemplate || defaultChannelInfo;\n        context: getChannelInfoContext()\n      \"\n    />\n    <ng-template #defaultChannelInfo>\n      <p\n        data-testid=\"info\"\n        class=\"str-chat__header-livestream-left--members str-chat__channel-header-info\"\n      >\n        {{'streamChat.{{ memberCount }} members' | translate:memberCountParam}}\n        {{canReceiveConnectEvents ? ('streamChat.{{ watcherCount }} online' |\n        translate:watcherCountParam) : ''}}\n      </p>\n    </ng-template>\n  </div>\n  <ng-container *ngIf=\"channelActionsTemplate\">\n    <ng-container\n      *ngTemplateOutlet=\"\n        channelActionsTemplate;\n        context: getChannelActionsContext()\n      \"\n    />\n  </ng-container>\n</div>\n" }]
+        }], ctorParameters: () => [{ type: ChannelService }, { type: CustomTemplatesService }, { type: i0.ChangeDetectorRef }, { type: ChatClientService }] });
 
 const isOnSeparateDate = (date1, date2) => {
     if (date1.getDate() !== date2.getDate()) {
@@ -4288,15 +4281,15 @@ class DateParserService {
         }
         return parseDate(date, 'date-time');
     }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: DateParserService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: DateParserService, providedIn: 'root' }); }
 }
-DateParserService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: DateParserService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-DateParserService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: DateParserService, providedIn: 'root' });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: DateParserService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: DateParserService, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root',
                 }]
-        }], ctorParameters: function () { return []; } });
+        }], ctorParameters: () => [] });
 
 /**
  * The `ChannelPreview` component displays a channel preview in the channel list, it consists of the image, name and latest message of the channel.
@@ -4430,13 +4423,13 @@ class ChannelPreviewComponent {
         this.unreadCount = this.channel.countUnread();
         this.isUnread = !!this.unreadCount;
     }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: ChannelPreviewComponent, deps: [{ token: ChannelService }, { token: i0.NgZone }, { token: ChatClientService }, { token: MessageService }, { token: CustomTemplatesService }, { token: DateParserService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", 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  data-testid=\"channel-preview-container\"\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>\n  <div class=\"str-chat__channel-preview-messenger--left\">\n    <stream-avatar-placeholder\n      type=\"channel\"\n      location=\"channel-preview\"\n      name=\"{{ avatarName }}\"\n      imageUrl=\"{{ avatarImage }}\"\n      [channel]=\"channel\"\n    />\n  </div>\n  <div\n    class=\"str-chat__channel-preview-messenger--right str-chat__channel-preview-end\"\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          latestMessageStatus: latestMessageStatus,\n          latestMessageTime: latestMessageTime,\n          latestMessage: latestMessage\n        }\n      \"\n    />\n    <ng-template\n      #defaultChannelInfo\n      let-channelDisplayTitle=\"channelDisplayTitle\"\n      let-unreadCount=\"unreadCount\"\n      let-latestMessageText=\"latestMessageText\"\n      let-latestMessageStatus=\"latestMessageStatus\"\n      let-latestMessageTime=\"latestMessageTime\"\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          *ngIf=\"unreadCount\"\n          data-testid=\"unread-badge\"\n          class=\"str-chat__channel-preview-unread-badge\"\n        >\n          {{ unreadCount }}\n        </div>\n      </div>\n      <div class=\"str-chat__channel-preview-end-second-row\">\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        <div\n          *ngIf=\"latestMessageStatus\"\n          data-testid=\"latest-message-status\"\n          class=\"str-chat__channel-preview-messenger--status str-chat__channel-preview-messenger--status-{{\n            latestMessageStatus\n          }}\"\n        >\n          <stream-icon-placeholder\n            [icon]=\"latestMessageStatus === 'delivered' ? 'delivered' : 'read'\"\n          />\n        </div>\n        <div\n          *ngIf=\"latestMessageTime\"\n          data-testid=\"latest-message-time\"\n          class=\"str-chat__channel-preview-messenger--time\"\n        >\n          {{ latestMessageTime }}\n        </div>\n      </div>\n    </ng-template>\n  </div>\n</button>\n", dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: AvatarPlaceholderComponent, selector: "stream-avatar-placeholder", inputs: ["name", "imageUrl", "location", "channel", "user", "type", "initialsType", "showOnlineIndicator"] }, { kind: "component", type: IconPlaceholderComponent, selector: "stream-icon-placeholder", inputs: ["icon"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "pipe", type: i6.TranslatePipe, name: "translate" }] }); }
 }
-ChannelPreviewComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: ChannelPreviewComponent, deps: [{ token: ChannelService }, { token: i0.NgZone }, { token: ChatClientService }, { token: MessageService }, { token: CustomTemplatesService }, { token: DateParserService }], target: i0.ɵɵFactoryTarget.Component });
-ChannelPreviewComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.4", 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  data-testid=\"channel-preview-container\"\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>\n  <div class=\"str-chat__channel-preview-messenger--left\">\n    <stream-avatar-placeholder\n      type=\"channel\"\n      location=\"channel-preview\"\n      name=\"{{ avatarName }}\"\n      imageUrl=\"{{ avatarImage }}\"\n      [channel]=\"channel\"\n    ></stream-avatar-placeholder>\n  </div>\n  <div\n    class=\"str-chat__channel-preview-messenger--right str-chat__channel-preview-end\"\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          latestMessageStatus: latestMessageStatus,\n          latestMessageTime: latestMessageTime,\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      let-latestMessageStatus=\"latestMessageStatus\"\n      let-latestMessageTime=\"latestMessageTime\"\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          *ngIf=\"unreadCount\"\n          data-testid=\"unread-badge\"\n          class=\"str-chat__channel-preview-unread-badge\"\n        >\n          {{ unreadCount }}\n        </div>\n      </div>\n      <div class=\"str-chat__channel-preview-end-second-row\">\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        <div\n          *ngIf=\"latestMessageStatus\"\n          data-testid=\"latest-message-status\"\n          class=\"str-chat__channel-preview-messenger--status str-chat__channel-preview-messenger--status-{{\n            latestMessageStatus\n          }}\"\n        >\n          <stream-icon-placeholder\n            [icon]=\"latestMessageStatus === 'delivered' ? 'delivered' : 'read'\"\n          ></stream-icon-placeholder>\n        </div>\n        <div\n          *ngIf=\"latestMessageTime\"\n          data-testid=\"latest-message-time\"\n          class=\"str-chat__channel-preview-messenger--time\"\n        >\n          {{ latestMessageTime }}\n        </div>\n      </div>\n    </ng-template>\n  </div>\n</button>\n", dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: AvatarPlaceholderComponent, selector: "stream-avatar-placeholder", inputs: ["name", "imageUrl", "location", "channel", "user", "type", "initialsType", "showOnlineIndicator"] }, { kind: "component", type: IconPlaceholderComponent, selector: "stream-icon-placeholder", inputs: ["icon"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "pipe", type: i6.TranslatePipe, name: "translate" }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: ChannelPreviewComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: ChannelPreviewComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'stream-channel-preview', template: "<button\n  class=\"str-chat__channel-preview-messenger str-chat__channel-preview\"\n  data-testid=\"channel-preview-container\"\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>\n  <div class=\"str-chat__channel-preview-messenger--left\">\n    <stream-avatar-placeholder\n      type=\"channel\"\n      location=\"channel-preview\"\n      name=\"{{ avatarName }}\"\n      imageUrl=\"{{ avatarImage }}\"\n      [channel]=\"channel\"\n    ></stream-avatar-placeholder>\n  </div>\n  <div\n    class=\"str-chat__channel-preview-messenger--right str-chat__channel-preview-end\"\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          latestMessageStatus: latestMessageStatus,\n          latestMessageTime: latestMessageTime,\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      let-latestMessageStatus=\"latestMessageStatus\"\n      let-latestMessageTime=\"latestMessageTime\"\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          *ngIf=\"unreadCount\"\n          data-testid=\"unread-badge\"\n          class=\"str-chat__channel-preview-unread-badge\"\n        >\n          {{ unreadCount }}\n        </div>\n      </div>\n      <div class=\"str-chat__channel-preview-end-second-row\">\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        <div\n          *ngIf=\"latestMessageStatus\"\n          data-testid=\"latest-message-status\"\n          class=\"str-chat__channel-preview-messenger--status str-chat__channel-preview-messenger--status-{{\n            latestMessageStatus\n          }}\"\n        >\n          <stream-icon-placeholder\n            [icon]=\"latestMessageStatus === 'delivered' ? 'delivered' : 'read'\"\n          ></stream-icon-placeholder>\n        </div>\n        <div\n          *ngIf=\"latestMessageTime\"\n          data-testid=\"latest-message-time\"\n          class=\"str-chat__channel-preview-messenger--time\"\n        >\n          {{ latestMessageTime }}\n        </div>\n      </div>\n    </ng-template>\n  </div>\n</button>\n" }]
-        }], ctorParameters: function () { return [{ type: ChannelService }, { type: i0.NgZone }, { type: ChatClientService }, { type: MessageService }, { type: CustomTemplatesService }, { type: DateParserService }]; }, propDecorators: { channel: [{
+            args: [{ selector: 'stream-channel-preview', template: "<button\n  class=\"str-chat__channel-preview-messenger str-chat__channel-preview\"\n  data-testid=\"channel-preview-container\"\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>\n  <div class=\"str-chat__channel-preview-messenger--left\">\n    <stream-avatar-placeholder\n      type=\"channel\"\n      location=\"channel-preview\"\n      name=\"{{ avatarName }}\"\n      imageUrl=\"{{ avatarImage }}\"\n      [channel]=\"channel\"\n    />\n  </div>\n  <div\n    class=\"str-chat__channel-preview-messenger--right str-chat__channel-preview-end\"\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          latestMessageStatus: latestMessageStatus,\n          latestMessageTime: latestMessageTime,\n          latestMessage: latestMessage\n        }\n      \"\n    />\n    <ng-template\n      #defaultChannelInfo\n      let-channelDisplayTitle=\"channelDisplayTitle\"\n      let-unreadCount=\"unreadCount\"\n      let-latestMessageText=\"latestMessageText\"\n      let-latestMessageStatus=\"latestMessageStatus\"\n      let-latestMessageTime=\"latestMessageTime\"\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          *ngIf=\"unreadCount\"\n          data-testid=\"unread-badge\"\n          class=\"str-chat__channel-preview-unread-badge\"\n        >\n          {{ unreadCount }}\n        </div>\n      </div>\n      <div class=\"str-chat__channel-preview-end-second-row\">\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        <div\n          *ngIf=\"latestMessageStatus\"\n          data-testid=\"latest-message-status\"\n          class=\"str-chat__channel-preview-messenger--status str-chat__channel-preview-messenger--status-{{\n            latestMessageStatus\n          }}\"\n        >\n          <stream-icon-placeholder\n            [icon]=\"latestMessageStatus === 'delivered' ? 'delivered' : 'read'\"\n          />\n        </div>\n        <div\n          *ngIf=\"latestMessageTime\"\n          data-testid=\"latest-message-time\"\n          class=\"str-chat__channel-preview-messenger--time\"\n        >\n          {{ latestMessageTime }}\n        </div>\n      </div>\n    </ng-template>\n  </div>\n</button>\n" }]
+        }], ctorParameters: () => [{ type: ChannelService }, { type: i0.NgZone }, { type: ChatClientService }, { type: MessageService }, { type: CustomTemplatesService }, { type: DateParserService }], propDecorators: { channel: [{
                 type: Input
             }] } });
 
@@ -4505,13 +4498,13 @@ class PaginatedListComponent {
             });
         }
     }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: PaginatedListComponent, deps: [{ token: i0.NgZone }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: PaginatedListComponent, selector: "stream-paginated-list", inputs: { items: "items", isLoading: "isLoading", hasMore: "hasMore", trackBy: "trackBy" }, outputs: { loadMore: "loadMore" }, queries: [{ propertyName: "itemTempalteRef", first: true, predicate: TemplateRef, descendants: true }], viewQueries: [{ propertyName: "scrollContainer", first: true, predicate: ["container"], descendants: true }], ngImport: i0, template: "<div class=\"stream-chat__paginated-list\" #container>\n  <div\n    data-testid=\"item\"\n    class=\"stream-chat__paginated-list-item\"\n    *ngFor=\"let item of items; let index = index; trackBy: trackBy\"\n  >\n    <ng-template\n      *ngIf=\"itemTempalteRef\"\n      [ngTemplateOutlet]=\"itemTempalteRef\"\n      [ngTemplateOutletContext]=\"{ item: item, index: index }\"\n    ></ng-template>\n  </div>\n  <button\n    *ngIf=\"hasMore && !isScrollable\"\n    class=\"str-chat__load-more-button__button str-chat__cta-button\"\n    data-testid=\"load-more-button\"\n    [disabled]=\"isLoading\"\n    (click)=\"loadMore.emit()\"\n    (keyup.enter)=\"loadMore.emit()\"\n  >\n    <span>{{ \"Load more\" | translate }}</span>\n  </button>\n  <stream-loading-indicator-placeholder\n    data-testid=\"loading-indicator\"\n    *ngIf=\"isLoading\"\n  />\n</div>\n", dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: LoadingIndicatorPlaceholderComponent, selector: "stream-loading-indicator-placeholder" }, { kind: "pipe", type: i6.TranslatePipe, name: "translate" }] }); }
 }
-PaginatedListComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: PaginatedListComponent, deps: [{ token: i0.NgZone }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-PaginatedListComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.4", type: PaginatedListComponent, selector: "stream-paginated-list", inputs: { items: "items", isLoading: "isLoading", hasMore: "hasMore", trackBy: "trackBy" }, outputs: { loadMore: "loadMore" }, queries: [{ propertyName: "itemTempalteRef", first: true, predicate: TemplateRef, descendants: true }], viewQueries: [{ propertyName: "scrollContainer", first: true, predicate: ["container"], descendants: true }], ngImport: i0, template: "<div class=\"stream-chat__paginated-list\" #container>\n  <div\n    data-testid=\"item\"\n    class=\"stream-chat__paginated-list-item\"\n    *ngFor=\"let item of items; let index = index; trackBy: trackBy\"\n  >\n    <ng-template\n      *ngIf=\"itemTempalteRef\"\n      [ngTemplateOutlet]=\"itemTempalteRef\"\n      [ngTemplateOutletContext]=\"{ item: item, index: index }\"\n    ></ng-template>\n  </div>\n  <button\n    *ngIf=\"hasMore && !isScrollable\"\n    class=\"str-chat__load-more-button__button str-chat__cta-button\"\n    data-testid=\"load-more-button\"\n    [disabled]=\"isLoading\"\n    (click)=\"loadMore.emit()\"\n    (keyup.enter)=\"loadMore.emit()\"\n  >\n    <span>{{ \"Load more\" | translate }}</span>\n  </button>\n  <stream-loading-indicator-placeholder\n    data-testid=\"loading-indicator\"\n    *ngIf=\"isLoading\"\n  ></stream-loading-indicator-placeholder>\n</div>\n", dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: LoadingIndicatorPlaceholderComponent, selector: "stream-loading-indicator-placeholder" }, { kind: "pipe", type: i6.TranslatePipe, name: "translate" }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: PaginatedListComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: PaginatedListComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'stream-paginated-list', template: "<div class=\"stream-chat__paginated-list\" #container>\n  <div\n    data-testid=\"item\"\n    class=\"stream-chat__paginated-list-item\"\n    *ngFor=\"let item of items; let index = index; trackBy: trackBy\"\n  >\n    <ng-template\n      *ngIf=\"itemTempalteRef\"\n      [ngTemplateOutlet]=\"itemTempalteRef\"\n      [ngTemplateOutletContext]=\"{ item: item, index: index }\"\n    ></ng-template>\n  </div>\n  <button\n    *ngIf=\"hasMore && !isScrollable\"\n    class=\"str-chat__load-more-button__button str-chat__cta-button\"\n    data-testid=\"load-more-button\"\n    [disabled]=\"isLoading\"\n    (click)=\"loadMore.emit()\"\n    (keyup.enter)=\"loadMore.emit()\"\n  >\n    <span>{{ \"Load more\" | translate }}</span>\n  </button>\n  <stream-loading-indicator-placeholder\n    data-testid=\"loading-indicator\"\n    *ngIf=\"isLoading\"\n  ></stream-loading-indicator-placeholder>\n</div>\n" }]
-        }], ctorParameters: function () { return [{ type: i0.NgZone }, { type: i0.ChangeDetectorRef }]; }, propDecorators: { items: [{
+            args: [{ selector: 'stream-paginated-list', template: "<div class=\"stream-chat__paginated-list\" #container>\n  <div\n    data-testid=\"item\"\n    class=\"stream-chat__paginated-list-item\"\n    *ngFor=\"let item of items; let index = index; trackBy: trackBy\"\n  >\n    <ng-template\n      *ngIf=\"itemTempalteRef\"\n      [ngTemplateOutlet]=\"itemTempalteRef\"\n      [ngTemplateOutletContext]=\"{ item: item, index: index }\"\n    ></ng-template>\n  </div>\n  <button\n    *ngIf=\"hasMore && !isScrollable\"\n    class=\"str-chat__load-more-button__button str-chat__cta-button\"\n    data-testid=\"load-more-button\"\n    [disabled]=\"isLoading\"\n    (click)=\"loadMore.emit()\"\n    (keyup.enter)=\"loadMore.emit()\"\n  >\n    <span>{{ \"Load more\" | translate }}</span>\n  </button>\n  <stream-loading-indicator-placeholder\n    data-testid=\"loading-indicator\"\n    *ngIf=\"isLoading\"\n  />\n</div>\n" }]
+        }], ctorParameters: () => [{ type: i0.NgZone }, { type: i0.ChangeDetectorRef }], propDecorators: { items: [{
                 type: Input
             }], isLoading: [{
                 type: Input
@@ -4557,13 +4550,13 @@ class ChannelListComponent {
     trackByChannelId(_, item) {
         return item.cid;
     }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: ChannelListComponent, deps: [{ token: ChannelService }, { token: CustomTemplatesService }, { token: ThemeService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: ChannelListComponent, selector: "stream-channel-list", ngImport: i0, template: "<div\n  #container\n  data-testid=\"channel-list-container\"\n  class=\"str-chat str-chat-angular__channel-list str-chat__channel-list str-chat-channel-list messaging str-chat__theme-{{\n    theme$ | async\n  }}\"\n>\n  <div\n    *ngIf=\"\n      (isError$ | async) === false && (isInitializing$ | async) === false;\n      else statusIndicator\n    \"\n    class=\"str-chat__channel-list-messenger\"\n  >\n    <div class=\"str-chat__channel-list-messenger__main\">\n      <ng-content select=\"[channel-list-top]\"></ng-content>\n      <div\n        *ngIf=\"!(channels$ | async)?.length\"\n        class=\"str-chat__channel-list-empty\"\n      >\n        <stream-icon icon=\"chat-bubble\" />\n        <p data-testid=\"empty-channel-list-indicator\">\n          {{ \"streamChat.You have no channels currently\" | translate }}\n        </p>\n      </div>\n      <p\n        *ngIf=\"!(channels$ | async)?.length\"\n        class=\"str-chat__channel-list-empty-v1\"\n        data-testid=\"empty-channel-list-indicator\"\n      >\n        {{ \"streamChat.You have no channels currently\" | translate }}\n      </p>\n      <stream-paginated-list\n        [items]=\"(channels$ | async) ?? []\"\n        [hasMore]=\"(hasMoreChannels$ | async) ?? false\"\n        [isLoading]=\"isLoadingMoreChannels\"\n        (loadMore)=\"loadMoreChannels()\"\n        [trackBy]=\"trackByChannelId\"\n      >\n        <ng-template let-channel=\"item\">\n          <ng-template #defaultTemplate let-channelInput=\"channel\">\n            <stream-channel-preview\n              data-testclass=\"channel-preview\"\n              [channel]=\"channelInput\"\n            />\n          </ng-template>\n          <div>\n            <ng-container\n              *ngTemplateOutlet=\"\n                customChannelPreviewTemplate || defaultTemplate;\n                context: { channel: channel }\n              \"\n            />\n          </div>\n        </ng-template>\n      </stream-paginated-list>\n      <ng-content select=\"[channel-list-bottom]\"></ng-content>\n    </div>\n  </div>\n</div>\n\n<ng-template #statusIndicator>\n  <ng-container *ngIf=\"isError$ | async\">\n    <ng-container *ngTemplateOutlet=\"chatDown\" />\n  </ng-container>\n  <ng-container *ngIf=\"isInitializing$ | async\">\n    <ng-container *ngTemplateOutlet=\"loadingChannels\" />\n  </ng-container>\n</ng-template>\n\n<ng-template #chatDown>\n  <div data-testid=\"chatdown-container\" class=\"str-chat__down\">\n    <ng-container *ngTemplateOutlet=\"loadingChannels\" />\n  </div>\n</ng-template>\n\n<ng-template #loadingChannels>\n  <div\n    data-testid=\"loading-indicator-full-size\"\n    class=\"str-chat__loading-channels\"\n  >\n    <ng-container *ngTemplateOutlet=\"loadingChannel\" />\n    <ng-container *ngTemplateOutlet=\"loadingChannel\" />\n    <ng-container *ngTemplateOutlet=\"loadingChannel\" />\n  </div>\n</ng-template>\n\n<ng-template #loadingChannel>\n  <div\n    class=\"str-chat__loading-channels-item str-chat__channel-preview-loading\"\n  >\n    <div class=\"str-chat__loading-channels-avatar\"></div>\n    <div\n      class=\"str-chat__loading-channels-meta str-chat__channel-preview-end-loading\"\n    >\n      <div class=\"str-chat__loading-channels-username\"></div>\n      <div class=\"str-chat__loading-channels-status\"></div>\n    </div>\n  </div>\n</ng-template>\n", dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: IconComponent, selector: "stream-icon", inputs: ["icon"] }, { kind: "component", type: PaginatedListComponent, selector: "stream-paginated-list", inputs: ["items", "isLoading", "hasMore", "trackBy"], outputs: ["loadMore"] }, { kind: "component", type: ChannelPreviewComponent, selector: "stream-channel-preview", inputs: ["channel"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "pipe", type: i6.TranslatePipe, name: "translate" }] }); }
 }
-ChannelListComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: ChannelListComponent, deps: [{ token: ChannelService }, { token: CustomTemplatesService }, { token: ThemeService }], target: i0.ɵɵFactoryTarget.Component });
-ChannelListComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.4", type: ChannelListComponent, selector: "stream-channel-list", ngImport: i0, template: "<div\n  #container\n  data-testid=\"channel-list-container\"\n  class=\"str-chat str-chat-angular__channel-list str-chat__channel-list str-chat-channel-list messaging str-chat__theme-{{\n    theme$ | async\n  }}\"\n>\n  <div\n    *ngIf=\"\n      (isError$ | async) === false && (isInitializing$ | async) === false;\n      else statusIndicator\n    \"\n    class=\"str-chat__channel-list-messenger\"\n  >\n    <div class=\"str-chat__channel-list-messenger__main\">\n      <ng-content select=\"[channel-list-top]\"></ng-content>\n      <div\n        *ngIf=\"!(channels$ | async)?.length\"\n        class=\"str-chat__channel-list-empty\"\n      >\n        <stream-icon icon=\"chat-bubble\"></stream-icon>\n        <p data-testid=\"empty-channel-list-indicator\">\n          {{ \"streamChat.You have no channels currently\" | translate }}\n        </p>\n      </div>\n      <p\n        *ngIf=\"!(channels$ | async)?.length\"\n        class=\"str-chat__channel-list-empty-v1\"\n        data-testid=\"empty-channel-list-indicator\"\n      >\n        {{ \"streamChat.You have no channels currently\" | translate }}\n      </p>\n      <stream-paginated-list\n        [items]=\"(channels$ | async) ?? []\"\n        [hasMore]=\"(hasMoreChannels$ | async) ?? false\"\n        [isLoading]=\"isLoadingMoreChannels\"\n        (loadMore)=\"loadMoreChannels()\"\n        [trackBy]=\"trackByChannelId\"\n      >\n        <ng-template let-channel=\"item\">\n          <ng-template #defaultTemplate let-channelInput=\"channel\">\n            <stream-channel-preview\n              data-testclass=\"channel-preview\"\n              [channel]=\"channelInput\"\n            ></stream-channel-preview>\n          </ng-template>\n          <div>\n            <ng-container\n              *ngTemplateOutlet=\"\n                customChannelPreviewTemplate || defaultTemplate;\n                context: { channel: channel }\n              \"\n            ></ng-container>\n          </div>\n        </ng-template>\n      </stream-paginated-list>\n      <ng-content select=\"[channel-list-bottom]\"></ng-content>\n    </div>\n  </div>\n</div>\n\n<ng-template #statusIndicator>\n  <ng-container *ngIf=\"isError$ | async\">\n    <ng-container *ngTemplateOutlet=\"chatDown\"></ng-container>\n  </ng-container>\n  <ng-container *ngIf=\"isInitializing$ | async\">\n    <ng-container *ngTemplateOutlet=\"loadingChannels\"></ng-container>\n  </ng-container>\n</ng-template>\n\n<ng-template #chatDown>\n  <div data-testid=\"chatdown-container\" class=\"str-chat__down\">\n    <ng-container *ngTemplateOutlet=\"loadingChannels\"></ng-container>\n  </div>\n</ng-template>\n\n<ng-template #loadingChannels>\n  <div\n    data-testid=\"loading-indicator-full-size\"\n    class=\"str-chat__loading-channels\"\n  >\n    <ng-container *ngTemplateOutlet=\"loadingChannel\"></ng-container>\n    <ng-container *ngTemplateOutlet=\"loadingChannel\"></ng-container>\n    <ng-container *ngTemplateOutlet=\"loadingChannel\"></ng-container>\n  </div>\n</ng-template>\n\n<ng-template #loadingChannel>\n  <div\n    class=\"str-chat__loading-channels-item str-chat__channel-preview-loading\"\n  >\n    <div class=\"str-chat__loading-channels-avatar\"></div>\n    <div\n      class=\"str-chat__loading-channels-meta str-chat__channel-preview-end-loading\"\n    >\n      <div class=\"str-chat__loading-channels-username\"></div>\n      <div class=\"str-chat__loading-channels-status\"></div>\n    </div>\n  </div>\n</ng-template>\n", dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: IconComponent, selector: "stream-icon", inputs: ["icon"] }, { kind: "component", type: PaginatedListComponent, selector: "stream-paginated-list", inputs: ["items", "isLoading", "hasMore", "trackBy"], outputs: ["loadMore"] }, { kind: "component", type: ChannelPreviewComponent, selector: "stream-channel-preview", inputs: ["channel"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "pipe", type: i6.TranslatePipe, name: "translate" }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: ChannelListComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: ChannelListComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'stream-channel-list', template: "<div\n  #container\n  data-testid=\"channel-list-container\"\n  class=\"str-chat str-chat-angular__channel-list str-chat__channel-list str-chat-channel-list messaging str-chat__theme-{{\n    theme$ | async\n  }}\"\n>\n  <div\n    *ngIf=\"\n      (isError$ | async) === false && (isInitializing$ | async) === false;\n      else statusIndicator\n    \"\n    class=\"str-chat__channel-list-messenger\"\n  >\n    <div class=\"str-chat__channel-list-messenger__main\">\n      <ng-content select=\"[channel-list-top]\"></ng-content>\n      <div\n        *ngIf=\"!(channels$ | async)?.length\"\n        class=\"str-chat__channel-list-empty\"\n      >\n        <stream-icon icon=\"chat-bubble\"></stream-icon>\n        <p data-testid=\"empty-channel-list-indicator\">\n          {{ \"streamChat.You have no channels currently\" | translate }}\n        </p>\n      </div>\n      <p\n        *ngIf=\"!(channels$ | async)?.length\"\n        class=\"str-chat__channel-list-empty-v1\"\n        data-testid=\"empty-channel-list-indicator\"\n      >\n        {{ \"streamChat.You have no channels currently\" | translate }}\n      </p>\n      <stream-paginated-list\n        [items]=\"(channels$ | async) ?? []\"\n        [hasMore]=\"(hasMoreChannels$ | async) ?? false\"\n        [isLoading]=\"isLoadingMoreChannels\"\n        (loadMore)=\"loadMoreChannels()\"\n        [trackBy]=\"trackByChannelId\"\n      >\n        <ng-template let-channel=\"item\">\n          <ng-template #defaultTemplate let-channelInput=\"channel\">\n            <stream-channel-preview\n              data-testclass=\"channel-preview\"\n              [channel]=\"channelInput\"\n            ></stream-channel-preview>\n          </ng-template>\n          <div>\n            <ng-container\n              *ngTemplateOutlet=\"\n                customChannelPreviewTemplate || defaultTemplate;\n                context: { channel: channel }\n              \"\n            ></ng-container>\n          </div>\n        </ng-template>\n      </stream-paginated-list>\n      <ng-content select=\"[channel-list-bottom]\"></ng-content>\n    </div>\n  </div>\n</div>\n\n<ng-template #statusIndicator>\n  <ng-container *ngIf=\"isError$ | async\">\n    <ng-container *ngTemplateOutlet=\"chatDown\"></ng-container>\n  </ng-container>\n  <ng-container *ngIf=\"isInitializing$ | async\">\n    <ng-container *ngTemplateOutlet=\"loadingChannels\"></ng-container>\n  </ng-container>\n</ng-template>\n\n<ng-template #chatDown>\n  <div data-testid=\"chatdown-container\" class=\"str-chat__down\">\n    <ng-container *ngTemplateOutlet=\"loadingChannels\"></ng-container>\n  </div>\n</ng-template>\n\n<ng-template #loadingChannels>\n  <div\n    data-testid=\"loading-indicator-full-size\"\n    class=\"str-chat__loading-channels\"\n  >\n    <ng-container *ngTemplateOutlet=\"loadingChannel\"></ng-container>\n    <ng-container *ngTemplateOutlet=\"loadingChannel\"></ng-container>\n    <ng-container *ngTemplateOutlet=\"loadingChannel\"></ng-container>\n  </div>\n</ng-template>\n\n<ng-template #loadingChannel>\n  <div\n    class=\"str-chat__loading-channels-item str-chat__channel-preview-loading\"\n  >\n    <div class=\"str-chat__loading-channels-avatar\"></div>\n    <div\n      class=\"str-chat__loading-channels-meta str-chat__channel-preview-end-loading\"\n    >\n      <div class=\"str-chat__loading-channels-username\"></div>\n      <div class=\"str-chat__loading-channels-status\"></div>\n    </div>\n  </div>\n</ng-template>\n" }]
-        }], ctorParameters: function () { return [{ type: ChannelService }, { type: CustomTemplatesService }, { type: ThemeService }]; } });
+            args: [{ selector: 'stream-channel-list', template: "<div\n  #container\n  data-testid=\"channel-list-container\"\n  class=\"str-chat str-chat-angular__channel-list str-chat__channel-list str-chat-channel-list messaging str-chat__theme-{{\n    theme$ | async\n  }}\"\n>\n  <div\n    *ngIf=\"\n      (isError$ | async) === false && (isInitializing$ | async) === false;\n      else statusIndicator\n    \"\n    class=\"str-chat__channel-list-messenger\"\n  >\n    <div class=\"str-chat__channel-list-messenger__main\">\n      <ng-content select=\"[channel-list-top]\"></ng-content>\n      <div\n        *ngIf=\"!(channels$ | async)?.length\"\n        class=\"str-chat__channel-list-empty\"\n      >\n        <stream-icon icon=\"chat-bubble\" />\n        <p data-testid=\"empty-channel-list-indicator\">\n          {{ \"streamChat.You have no channels currently\" | translate }}\n        </p>\n      </div>\n      <p\n        *ngIf=\"!(channels$ | async)?.length\"\n        class=\"str-chat__channel-list-empty-v1\"\n        data-testid=\"empty-channel-list-indicator\"\n      >\n        {{ \"streamChat.You have no channels currently\" | translate }}\n      </p>\n      <stream-paginated-list\n        [items]=\"(channels$ | async) ?? []\"\n        [hasMore]=\"(hasMoreChannels$ | async) ?? false\"\n        [isLoading]=\"isLoadingMoreChannels\"\n        (loadMore)=\"loadMoreChannels()\"\n        [trackBy]=\"trackByChannelId\"\n      >\n        <ng-template let-channel=\"item\">\n          <ng-template #defaultTemplate let-channelInput=\"channel\">\n            <stream-channel-preview\n              data-testclass=\"channel-preview\"\n              [channel]=\"channelInput\"\n            />\n          </ng-template>\n          <div>\n            <ng-container\n              *ngTemplateOutlet=\"\n                customChannelPreviewTemplate || defaultTemplate;\n                context: { channel: channel }\n              \"\n            />\n          </div>\n        </ng-template>\n      </stream-paginated-list>\n      <ng-content select=\"[channel-list-bottom]\"></ng-content>\n    </div>\n  </div>\n</div>\n\n<ng-template #statusIndicator>\n  <ng-container *ngIf=\"isError$ | async\">\n    <ng-container *ngTemplateOutlet=\"chatDown\" />\n  </ng-container>\n  <ng-container *ngIf=\"isInitializing$ | async\">\n    <ng-container *ngTemplateOutlet=\"loadingChannels\" />\n  </ng-container>\n</ng-template>\n\n<ng-template #chatDown>\n  <div data-testid=\"chatdown-container\" class=\"str-chat__down\">\n    <ng-container *ngTemplateOutlet=\"loadingChannels\" />\n  </div>\n</ng-template>\n\n<ng-template #loadingChannels>\n  <div\n    data-testid=\"loading-indicator-full-size\"\n    class=\"str-chat__loading-channels\"\n  >\n    <ng-container *ngTemplateOutlet=\"loadingChannel\" />\n    <ng-container *ngTemplateOutlet=\"loadingChannel\" />\n    <ng-container *ngTemplateOutlet=\"loadingChannel\" />\n  </div>\n</ng-template>\n\n<ng-template #loadingChannel>\n  <div\n    class=\"str-chat__loading-channels-item str-chat__channel-preview-loading\"\n  >\n    <div class=\"str-chat__loading-channels-avatar\"></div>\n    <div\n      class=\"str-chat__loading-channels-meta str-chat__channel-preview-end-loading\"\n    >\n      <div class=\"str-chat__loading-channels-username\"></div>\n      <div class=\"str-chat__loading-channels-status\"></div>\n    </div>\n  </div>\n</ng-template>\n" }]
+        }], ctorParameters: () => [{ type: ChannelService }, { type: CustomTemplatesService }, { type: ThemeService }] });
 
 const isSafari = () => /^((?!chrome|android).)*safari/i.test(navigator.userAgent);
 
@@ -4746,13 +4739,13 @@ class VoiceRecordingWavebarComponent {
             }
         }
     }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: VoiceRecordingWavebarComponent, deps: [{ token: i0.NgZone }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: VoiceRecordingWavebarComponent, selector: "stream-voice-recording-wavebar", inputs: { audioElement: "audioElement", waveFormData: "waveFormData", duration: "duration" }, viewQueries: [{ propertyName: "container", first: true, predicate: ["container"], descendants: true, static: true }], usesOnChanges: true, ngImport: i0, template: "<!--eslint-disable @angular-eslint/template/click-events-have-key-events-->\n<div\n  #container\n  class=\"str-chat__wave-progress-bar__track\"\n  data-testid=\"wave-progress-bar-track\"\n  role=\"progressbar\"\n  (mousedown)=\"isDragging = true\"\n  (mouseup)=\"isDragging = false\"\n  (mouseleave)=\"isDragging = false\"\n  (mousemove)=\"isDragging ? seek($event) : null\"\n  (click)=\"seek($event)\"\n>\n  <!--eslint-enable @angular-eslint/template/click-events-have-key-events-->\n  <div\n    *ngFor=\"\n      let dataPoint of resampledWaveFormData;\n      let i = index;\n      trackBy: trackByIndex\n    \"\n    class=\"str-chat__wave-progress-bar__amplitude-bar\"\n    [class.str-chat__wave-progress-bar__amplitude-bar--active]=\"\n      progress > i / resampledWaveFormData.length\n    \"\n    [style.--str-chat__wave-progress-bar__amplitude-bar-height]=\"\n      dataPoint ? dataPoint * 100 + '%' : '0%'\n    \"\n  ></div>\n  <div\n    class=\"str-chat__wave-progress-bar__progress-indicator\"\n    data-testid=\"wave-progress-bar-progress-indicator\"\n    [ngStyle]=\"{ 'inset-inline-start': progress * 100 + '%' }\"\n  ></div>\n</div>\n", dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }] }); }
 }
-VoiceRecordingWavebarComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: VoiceRecordingWavebarComponent, deps: [{ token: i0.NgZone }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-VoiceRecordingWavebarComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.4", type: VoiceRecordingWavebarComponent, selector: "stream-voice-recording-wavebar", inputs: { audioElement: "audioElement", waveFormData: "waveFormData", duration: "duration" }, viewQueries: [{ propertyName: "container", first: true, predicate: ["container"], descendants: true, static: true }], usesOnChanges: true, ngImport: i0, template: "<!--eslint-disable @angular-eslint/template/click-events-have-key-events-->\n<div\n  #container\n  class=\"str-chat__wave-progress-bar__track\"\n  data-testid=\"wave-progress-bar-track\"\n  role=\"progressbar\"\n  (mousedown)=\"isDragging = true\"\n  (mouseup)=\"isDragging = false\"\n  (mouseleave)=\"isDragging = false\"\n  (mousemove)=\"isDragging ? seek($event) : null\"\n  (click)=\"seek($event)\"\n>\n  <!--eslint-enable @angular-eslint/template/click-events-have-key-events-->\n  <div\n    *ngFor=\"\n      let dataPoint of resampledWaveFormData;\n      let i = index;\n      trackBy: trackByIndex\n    \"\n    class=\"str-chat__wave-progress-bar__amplitude-bar\"\n    [class.str-chat__wave-progress-bar__amplitude-bar--active]=\"\n      progress > i / resampledWaveFormData.length\n    \"\n    [style.--str-chat__wave-progress-bar__amplitude-bar-height]=\"\n      dataPoint ? dataPoint * 100 + '%' : '0%'\n    \"\n  ></div>\n  <div\n    class=\"str-chat__wave-progress-bar__progress-indicator\"\n    data-testid=\"wave-progress-bar-progress-indicator\"\n    [ngStyle]=\"{ 'inset-inline-start': progress * 100 + '%' }\"\n  ></div>\n</div>\n", dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: VoiceRecordingWavebarComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: VoiceRecordingWavebarComponent, decorators: [{
             type: Component,
             args: [{ selector: 'stream-voice-recording-wavebar', template: "<!--eslint-disable @angular-eslint/template/click-events-have-key-events-->\n<div\n  #container\n  class=\"str-chat__wave-progress-bar__track\"\n  data-testid=\"wave-progress-bar-track\"\n  role=\"progressbar\"\n  (mousedown)=\"isDragging = true\"\n  (mouseup)=\"isDragging = false\"\n  (mouseleave)=\"isDragging = false\"\n  (mousemove)=\"isDragging ? seek($event) : null\"\n  (click)=\"seek($event)\"\n>\n  <!--eslint-enable @angular-eslint/template/click-events-have-key-events-->\n  <div\n    *ngFor=\"\n      let dataPoint of resampledWaveFormData;\n      let i = index;\n      trackBy: trackByIndex\n    \"\n    class=\"str-chat__wave-progress-bar__amplitude-bar\"\n    [class.str-chat__wave-progress-bar__amplitude-bar--active]=\"\n      progress > i / resampledWaveFormData.length\n    \"\n    [style.--str-chat__wave-progress-bar__amplitude-bar-height]=\"\n      dataPoint ? dataPoint * 100 + '%' : '0%'\n    \"\n  ></div>\n  <div\n    class=\"str-chat__wave-progress-bar__progress-indicator\"\n    data-testid=\"wave-progress-bar-progress-indicator\"\n    [ngStyle]=\"{ 'inset-inline-start': progress * 100 + '%' }\"\n  ></div>\n</div>\n" }]
-        }], ctorParameters: function () { return [{ type: i0.NgZone }, { type: i0.ChangeDetectorRef }]; }, propDecorators: { audioElement: [{
+        }], ctorParameters: () => [{ type: i0.NgZone }, { type: i0.ChangeDetectorRef }], propDecorators: { audioElement: [{
                 type: Input
             }], waveFormData: [{
                 type: Input
@@ -4833,13 +4826,13 @@ class VoiceRecordingComponent {
         }
         return prettybytes(Number(this.attachment.file_size || 0));
     }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: VoiceRecordingComponent, deps: [{ token: i0.NgZone }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: VoiceRecordingComponent, selector: "stream-voice-recording", inputs: { attachment: "attachment" }, viewQueries: [{ propertyName: "audioElement", first: true, predicate: ["audioElement"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div\n  class=\"str-chat__message-attachment__voice-recording-widget\"\n  data-testid=\"voice-recording-widget\"\n  [class.str-chat__message-attachment__voice-recording-widget--error]=\"isError\"\n>\n  <!-- Empty event handlers to trigger change detection -->\n  <audio\n    #audioElement\n    (play)=\"(null)\"\n    (pause)=\"(null)\"\n    (ended)=\"(null)\"\n    (error)=\"isError = true\"\n    (abort)=\"isError = true\"\n  >\n    <source\n      data-testid=\"audio-source\"\n      [src]=\"attachment?.asset_url\"\n      [type]=\"attachment?.mime_type\"\n    />\n  </audio>\n  <button\n    class=\"str-chat__message-attachment-audio-widget--play-button\"\n    data-testid=\"play-button\"\n    (click)=\"togglePlay()\"\n  >\n    <stream-icon-placeholder [icon]=\"audioElement?.paused ? 'play' : 'pause'\" />\n  </button>\n  <div class=\"str-chat__message-attachment__voice-recording-widget__metadata\">\n    <div class=\"str-chat__message-attachment-voice-recording-widget--first-row\">\n      <div\n        class=\"str-chat__message-attachment__voice-recording-widget__title\"\n        data-testid=\"voice-recording-title\"\n        [title]=\"attachment?.title\"\n      >\n        {{ attachment?.title }}\n      </div>\n    </div>\n\n    <ng-container *ngIf=\"isError; else state\">\n      <div\n        class=\"str-chat__message-attachment__voice-recording-widget__error-message\"\n      >\n        <stream-icon-placeholder icon=\"error\" />\n        <span data-testid=\"error-message\">{{\n          \"streamChat.Error playing audio\" | translate\n        }}</span>\n      </div>\n    </ng-container>\n    <ng-template #state>\n      <div\n        class=\"str-chat__message-attachment__voice-recording-widget__audio-state\"\n      >\n        <div\n          class=\"str-chat__message-attachment__voice-recording-widget__timer\"\n        >\n          <span\n            *ngIf=\"!!attachment?.duration; else fileSizeTemplate\"\n            data-testid=\"duration\"\n          >\n            {{\n              secondsElapsed > 0 || !audioElement.paused\n                ? secondsElapsedFormatted\n                : durationFormatted\n            }}</span\n          >\n          <ng-template #fileSizeTemplate>\n            <span\n              class=\"str-chat__message-attachment-file--item-size\"\n              data-testid=\"file-size-indicator\"\n            >\n              {{ fileSize }}\n            </span>\n          </ng-template>\n        </div>\n        <stream-voice-recording-wavebar\n          *ngIf=\"attachment?.waveform_data && attachment?.duration\"\n          [waveFormData]=\"attachment?.waveform_data || []\"\n          [duration]=\"attachment?.duration\"\n          [audioElement]=\"audioElement\"\n        />\n      </div>\n    </ng-template>\n  </div>\n  <div\n    class=\"str-chat__message-attachment__voice-recording-widget__right-section\"\n  >\n    <button\n      *ngIf=\"!audioElement?.paused; else fileIcon\"\n      class=\"str-chat__message_attachment__playback-rate-button\"\n      data-testid=\"playback-rate-button\"\n      (click)=\"setPlaybackRate()\"\n    >\n      {{ audioElement?.playbackRate | number : \"1.1-1\" }}x\n    </button>\n    <ng-template #fileIcon>\n      <stream-icon-placeholder\n        class=\"str-chat__attachment-type-icon\"\n        icon=\"audio-file\"\n      />\n    </ng-template>\n  </div>\n</div>\n", dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: IconPlaceholderComponent, selector: "stream-icon-placeholder", inputs: ["icon"] }, { kind: "component", type: VoiceRecordingWavebarComponent, selector: "stream-voice-recording-wavebar", inputs: ["audioElement", "waveFormData", "duration"] }, { kind: "pipe", type: i1.DecimalPipe, name: "number" }, { kind: "pipe", type: i6.TranslatePipe, name: "translate" }] }); }
 }
-VoiceRecordingComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: VoiceRecordingComponent, deps: [{ token: i0.NgZone }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-VoiceRecordingComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.4", type: VoiceRecordingComponent, selector: "stream-voice-recording", inputs: { attachment: "attachment" }, viewQueries: [{ propertyName: "audioElement", first: true, predicate: ["audioElement"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div\n  class=\"str-chat__message-attachment__voice-recording-widget\"\n  data-testid=\"voice-recording-widget\"\n  [class.str-chat__message-attachment__voice-recording-widget--error]=\"isError\"\n>\n  <!-- Empty event handlers to trigger change detection -->\n  <audio\n    #audioElement\n    (play)=\"(null)\"\n    (pause)=\"(null)\"\n    (ended)=\"(null)\"\n    (error)=\"isError = true\"\n    (abort)=\"isError = true\"\n  >\n    <source\n      data-testid=\"audio-source\"\n      [src]=\"attachment?.asset_url\"\n      [type]=\"attachment?.mime_type\"\n    />\n  </audio>\n  <button\n    class=\"str-chat__message-attachment-audio-widget--play-button\"\n    data-testid=\"play-button\"\n    (click)=\"togglePlay()\"\n  >\n    <stream-icon-placeholder\n      [icon]=\"audioElement?.paused ? 'play' : 'pause'\"\n    ></stream-icon-placeholder>\n  </button>\n  <div class=\"str-chat__message-attachment__voice-recording-widget__metadata\">\n    <div class=\"str-chat__message-attachment-voice-recording-widget--first-row\">\n      <div\n        class=\"str-chat__message-attachment__voice-recording-widget__title\"\n        data-testid=\"voice-recording-title\"\n        [title]=\"attachment?.title\"\n      >\n        {{ attachment?.title }}\n      </div>\n    </div>\n\n    <ng-container *ngIf=\"isError; else state\">\n      <div\n        class=\"str-chat__message-attachment__voice-recording-widget__error-message\"\n      >\n        <stream-icon-placeholder icon=\"error\"></stream-icon-placeholder>\n        <span data-testid=\"error-message\">{{\n          \"streamChat.Error playing audio\" | translate\n        }}</span>\n      </div>\n    </ng-container>\n    <ng-template #state>\n      <div\n        class=\"str-chat__message-attachment__voice-recording-widget__audio-state\"\n      >\n        <div\n          class=\"str-chat__message-attachment__voice-recording-widget__timer\"\n        >\n          <span\n            *ngIf=\"!!attachment?.duration; else fileSizeTemplate\"\n            data-testid=\"duration\"\n          >\n            {{\n              secondsElapsed > 0 || !audioElement.paused\n                ? secondsElapsedFormatted\n                : durationFormatted\n            }}</span\n          >\n          <ng-template #fileSizeTemplate>\n            <span\n              class=\"str-chat__message-attachment-file--item-size\"\n              data-testid=\"file-size-indicator\"\n            >\n              {{ fileSize }}\n            </span>\n          </ng-template>\n        </div>\n        <stream-voice-recording-wavebar\n          *ngIf=\"attachment?.waveform_data && attachment?.duration\"\n          [waveFormData]=\"attachment?.waveform_data || []\"\n          [duration]=\"attachment?.duration\"\n          [audioElement]=\"audioElement\"\n        ></stream-voice-recording-wavebar>\n      </div>\n    </ng-template>\n  </div>\n  <div\n    class=\"str-chat__message-attachment__voice-recording-widget__right-section\"\n  >\n    <button\n      *ngIf=\"!audioElement?.paused; else fileIcon\"\n      class=\"str-chat__message_attachment__playback-rate-button\"\n      data-testid=\"playback-rate-button\"\n      (click)=\"setPlaybackRate()\"\n    >\n      {{ audioElement?.playbackRate | number : \"1.1-1\" }}x\n    </button>\n    <ng-template #fileIcon>\n      <stream-icon-placeholder\n        class=\"str-chat__attachment-type-icon\"\n        icon=\"audio-file\"\n      ></stream-icon-placeholder>\n    </ng-template>\n  </div>\n</div>\n", dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: IconPlaceholderComponent, selector: "stream-icon-placeholder", inputs: ["icon"] }, { kind: "component", type: VoiceRecordingWavebarComponent, selector: "stream-voice-recording-wavebar", inputs: ["audioElement", "waveFormData", "duration"] }, { kind: "pipe", type: i1.DecimalPipe, name: "number" }, { kind: "pipe", type: i6.TranslatePipe, name: "translate" }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: VoiceRecordingComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: VoiceRecordingComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'stream-voice-recording', template: "<div\n  class=\"str-chat__message-attachment__voice-recording-widget\"\n  data-testid=\"voice-recording-widget\"\n  [class.str-chat__message-attachment__voice-recording-widget--error]=\"isError\"\n>\n  <!-- Empty event handlers to trigger change detection -->\n  <audio\n    #audioElement\n    (play)=\"(null)\"\n    (pause)=\"(null)\"\n    (ended)=\"(null)\"\n    (error)=\"isError = true\"\n    (abort)=\"isError = true\"\n  >\n    <source\n      data-testid=\"audio-source\"\n      [src]=\"attachment?.asset_url\"\n      [type]=\"attachment?.mime_type\"\n    />\n  </audio>\n  <button\n    class=\"str-chat__message-attachment-audio-widget--play-button\"\n    data-testid=\"play-button\"\n    (click)=\"togglePlay()\"\n  >\n    <stream-icon-placeholder\n      [icon]=\"audioElement?.paused ? 'play' : 'pause'\"\n    ></stream-icon-placeholder>\n  </button>\n  <div class=\"str-chat__message-attachment__voice-recording-widget__metadata\">\n    <div class=\"str-chat__message-attachment-voice-recording-widget--first-row\">\n      <div\n        class=\"str-chat__message-attachment__voice-recording-widget__title\"\n        data-testid=\"voice-recording-title\"\n        [title]=\"attachment?.title\"\n      >\n        {{ attachment?.title }}\n      </div>\n    </div>\n\n    <ng-container *ngIf=\"isError; else state\">\n      <div\n        class=\"str-chat__message-attachment__voice-recording-widget__error-message\"\n      >\n        <stream-icon-placeholder icon=\"error\"></stream-icon-placeholder>\n        <span data-testid=\"error-message\">{{\n          \"streamChat.Error playing audio\" | translate\n        }}</span>\n      </div>\n    </ng-container>\n    <ng-template #state>\n      <div\n        class=\"str-chat__message-attachment__voice-recording-widget__audio-state\"\n      >\n        <div\n          class=\"str-chat__message-attachment__voice-recording-widget__timer\"\n        >\n          <span\n            *ngIf=\"!!attachment?.duration; else fileSizeTemplate\"\n            data-testid=\"duration\"\n          >\n            {{\n              secondsElapsed > 0 || !audioElement.paused\n                ? secondsElapsedFormatted\n                : durationFormatted\n            }}</span\n          >\n          <ng-template #fileSizeTemplate>\n            <span\n              class=\"str-chat__message-attachment-file--item-size\"\n              data-testid=\"file-size-indicator\"\n            >\n              {{ fileSize }}\n            </span>\n          </ng-template>\n        </div>\n        <stream-voice-recording-wavebar\n          *ngIf=\"attachment?.waveform_data && attachment?.duration\"\n          [waveFormData]=\"attachment?.waveform_data || []\"\n          [duration]=\"attachment?.duration\"\n          [audioElement]=\"audioElement\"\n        ></stream-voice-recording-wavebar>\n      </div>\n    </ng-template>\n  </div>\n  <div\n    class=\"str-chat__message-attachment__voice-recording-widget__right-section\"\n  >\n    <button\n      *ngIf=\"!audioElement?.paused; else fileIcon\"\n      class=\"str-chat__message_attachment__playback-rate-button\"\n      data-testid=\"playback-rate-button\"\n      (click)=\"setPlaybackRate()\"\n    >\n      {{ audioElement?.playbackRate | number : \"1.1-1\" }}x\n    </button>\n    <ng-template #fileIcon>\n      <stream-icon-placeholder\n        class=\"str-chat__attachment-type-icon\"\n        icon=\"audio-file\"\n      ></stream-icon-placeholder>\n    </ng-template>\n  </div>\n</div>\n" }]
-        }], ctorParameters: function () { return [{ type: i0.NgZone }, { type: i0.ChangeDetectorRef }]; }, propDecorators: { attachment: [{
+            args: [{ selector: 'stream-voice-recording', template: "<div\n  class=\"str-chat__message-attachment__voice-recording-widget\"\n  data-testid=\"voice-recording-widget\"\n  [class.str-chat__message-attachment__voice-recording-widget--error]=\"isError\"\n>\n  <!-- Empty event handlers to trigger change detection -->\n  <audio\n    #audioElement\n    (play)=\"(null)\"\n    (pause)=\"(null)\"\n    (ended)=\"(null)\"\n    (error)=\"isError = true\"\n    (abort)=\"isError = true\"\n  >\n    <source\n      data-testid=\"audio-source\"\n      [src]=\"attachment?.asset_url\"\n      [type]=\"attachment?.mime_type\"\n    />\n  </audio>\n  <button\n    class=\"str-chat__message-attachment-audio-widget--play-button\"\n    data-testid=\"play-button\"\n    (click)=\"togglePlay()\"\n  >\n    <stream-icon-placeholder [icon]=\"audioElement?.paused ? 'play' : 'pause'\" />\n  </button>\n  <div class=\"str-chat__message-attachment__voice-recording-widget__metadata\">\n    <div class=\"str-chat__message-attachment-voice-recording-widget--first-row\">\n      <div\n        class=\"str-chat__message-attachment__voice-recording-widget__title\"\n        data-testid=\"voice-recording-title\"\n        [title]=\"attachment?.title\"\n      >\n        {{ attachment?.title }}\n      </div>\n    </div>\n\n    <ng-container *ngIf=\"isError; else state\">\n      <div\n        class=\"str-chat__message-attachment__voice-recording-widget__error-message\"\n      >\n        <stream-icon-placeholder icon=\"error\" />\n        <span data-testid=\"error-message\">{{\n          \"streamChat.Error playing audio\" | translate\n        }}</span>\n      </div>\n    </ng-container>\n    <ng-template #state>\n      <div\n        class=\"str-chat__message-attachment__voice-recording-widget__audio-state\"\n      >\n        <div\n          class=\"str-chat__message-attachment__voice-recording-widget__timer\"\n        >\n          <span\n            *ngIf=\"!!attachment?.duration; else fileSizeTemplate\"\n            data-testid=\"duration\"\n          >\n            {{\n              secondsElapsed > 0 || !audioElement.paused\n                ? secondsElapsedFormatted\n                : durationFormatted\n            }}</span\n          >\n          <ng-template #fileSizeTemplate>\n            <span\n              class=\"str-chat__message-attachment-file--item-size\"\n              data-testid=\"file-size-indicator\"\n            >\n              {{ fileSize }}\n            </span>\n          </ng-template>\n        </div>\n        <stream-voice-recording-wavebar\n          *ngIf=\"attachment?.waveform_data && attachment?.duration\"\n          [waveFormData]=\"attachment?.waveform_data || []\"\n          [duration]=\"attachment?.duration\"\n          [audioElement]=\"audioElement\"\n        />\n      </div>\n    </ng-template>\n  </div>\n  <div\n    class=\"str-chat__message-attachment__voice-recording-widget__right-section\"\n  >\n    <button\n      *ngIf=\"!audioElement?.paused; else fileIcon\"\n      class=\"str-chat__message_attachment__playback-rate-button\"\n      data-testid=\"playback-rate-button\"\n      (click)=\"setPlaybackRate()\"\n    >\n      {{ audioElement?.playbackRate | number : \"1.1-1\" }}x\n    </button>\n    <ng-template #fileIcon>\n      <stream-icon-placeholder\n        class=\"str-chat__attachment-type-icon\"\n        icon=\"audio-file\"\n      />\n    </ng-template>\n  </div>\n</div>\n" }]
+        }], ctorParameters: () => [{ type: i0.NgZone }, { type: i0.ChangeDetectorRef }], propDecorators: { attachment: [{
                 type: Input
             }], audioElement: [{
                 type: ViewChild,
@@ -5044,13 +5037,13 @@ class AttachmentListComponent {
             attachment.asset_url ||
             attachment.thumb_url);
     }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: AttachmentListComponent, deps: [{ token: CustomTemplatesService }, { token: ChannelService }, { token: AttachmentConfigurationService }, { token: MessageService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: AttachmentListComponent, selector: "stream-attachment-list", inputs: { messageId: "messageId", parentMessageId: "parentMessageId", attachments: "attachments" }, outputs: { imageModalStateChange: "imageModalStateChange" }, host: { properties: { "class": "this.class" } }, viewQueries: [{ propertyName: "modalContent", first: true, predicate: ["modalContent"], descendants: true, static: true }], usesOnChanges: true, ngImport: i0, template: "<div\n  *ngIf=\"\n    orderedAttachments.length > 0 ||\n    (customAttachments.length > 0 && customAttachmentsTemplate)\n  \"\n  class=\"str-chat__attachment-list\"\n>\n  <ng-container\n    *ngFor=\"let attachment of orderedAttachments; trackBy: trackByUrl\"\n  >\n    <div\n      data-testclass=\"attachment-container\"\n      class=\"str-chat__message-attachment str-chat__message-attachment--{{\n        attachment.type\n      }} str-chat__message-attachment-dynamic-size\"\n      [class.str-chat__message-attachment--card]=\"isCard(attachment)\"\n      [class.str-chat-angular__message-attachment-file-single]=\"\n        isFile(attachment)\n      \"\n      [class.str-chat__message-attachment--voice-recording]=\"\n        isVoiceMessage(attachment)\n      \"\n      [class.str-chat__message-attachment-with-actions]=\"\n        !isGalleryType(attachment) &&\n        attachment.actions &&\n        attachment.actions.length > 0\n      \"\n      [class.str-chat__message-attachment--svg-image]=\"isSvg(attachment)\"\n    >\n      <ng-container *ngIf=\"isImage(attachment)\">\n        <ng-container\n          *ngTemplateOutlet=\"\n            (customTemplatesService.imageAttachmentTemplate$ | async) ||\n              defaultImage;\n            context: getAttachmentContext(attachment)\n          \"\n        />\n        <ng-template #defaultImage let-attachmentContext=\"attachment\">\n          <img\n            #imgElement\n            class=\"str-chat__message-attachment--img\"\n            data-testclass=\"image\"\n            [src]=\"\n              getImageAttachmentConfiguration(\n                attachmentContext,\n                'single',\n                imgElement\n              ).url\n            \"\n            [alt]=\"attachmentContext?.fallback\"\n            [ngStyle]=\"{\n              height: getImageAttachmentConfiguration(\n                attachmentContext,\n                'single',\n                imgElement\n              ).height,\n              width: getImageAttachmentConfiguration(\n                attachmentContext,\n                'single',\n                imgElement\n              ).width,\n              '--original-height': getImageAttachmentConfiguration(\n                attachmentContext,\n                'single',\n                imgElement\n              ).originalHeight,\n              '--original-width': getImageAttachmentConfiguration(\n                attachmentContext,\n                'single',\n                imgElement\n              ).originalWidth\n            }\"\n            (click)=\"openImageModal([attachmentContext])\"\n            (keyup.enter)=\"openImageModal([attachmentContext])\"\n          />\n        </ng-template>\n      </ng-container>\n      <ng-container *ngIf=\"isGallery(attachment)\">\n        <ng-container\n          *ngTemplateOutlet=\"\n            (customTemplatesService.galleryAttachmentTemplate$ | async) ||\n              defaultGallery;\n            context: getAttachmentContext(attachment)\n          \"\n        />\n        <ng-template #defaultGallery let-attachmentContext=\"attachment\">\n          <div\n            class=\"str-chat__gallery\"\n            data-testid=\"image-gallery\"\n            [class.str-chat__gallery--square]=\"\n              (attachmentContext?.images)!.length > 3\n            \"\n            [class.str-chat__gallery-two-rows]=\"\n              (attachmentContext?.images)!.length > 2\n            \"\n          >\n            <ng-container\n              *ngFor=\"\n                let galleryImage of attachmentContext.images;\n                let index = index;\n                let isLast = last;\n                trackBy: trackByImageUrl\n              \"\n            >\n              <button\n                *ngIf=\"index < 3 || (index === 3 && isLast)\"\n                class=\"str-chat__gallery-image\"\n                data-testclass=\"gallery-image\"\n                [class.str-chat__message-attachment--svg-image]=\"\n                  isSvg(galleryImage)\n                \"\n                (click)=\"openImageModal(attachmentContext.images!, index)\"\n                (keyup.enter)=\"openImageModal(attachmentContext.images!, index)\"\n              >\n                <img\n                  #imgElement\n                  fetchpriority=\"low\"\n                  loading=\"lazy\"\n                  [src]=\"\n                    getImageAttachmentConfiguration(\n                      galleryImage,\n                      'gallery',\n                      imgElement\n                    ).url\n                  \"\n                  [alt]=\"galleryImage.fallback\"\n                  [style.--original-height]=\"\n                    getImageAttachmentConfiguration(\n                      galleryImage,\n                      'gallery',\n                      imgElement\n                    ).originalHeight\n                  \"\n                  [style.--original-width]=\"\n                    getImageAttachmentConfiguration(\n                      galleryImage,\n                      'gallery',\n                      imgElement\n                    ).originalWidth\n                  \"\n                  [ngStyle]=\"{\n                    height: getImageAttachmentConfiguration(\n                      galleryImage,\n                      'gallery',\n                      imgElement\n                    ).height,\n                    width: getImageAttachmentConfiguration(\n                      galleryImage,\n                      'gallery',\n                      imgElement\n                    ).width\n                  }\"\n                />\n              </button>\n              <button\n                *ngIf=\"index === 3 && !isLast\"\n                #element\n                class=\"str-chat__gallery-placeholder\"\n                data-testclass=\"gallery-image\"\n                data-testid=\"more-image-button\"\n                [class.str-chat__message-attachment--svg-image]=\"\n                  isSvg(galleryImage)\n                \"\n                [ngStyle]=\"{\n                  'background-image':\n                    'url(' +\n                    getImageAttachmentConfiguration(\n                      galleryImage,\n                      'gallery',\n                      element\n                    ).url +\n                    ')',\n                  height: getImageAttachmentConfiguration(\n                    galleryImage,\n                    'gallery',\n                    element\n                  ).height,\n                  width: getImageAttachmentConfiguration(\n                    galleryImage,\n                    'gallery',\n                    element\n                  ).width,\n                  '--original-height': getImageAttachmentConfiguration(\n                    galleryImage,\n                    'gallery',\n                    element\n                  ).originalHeight,\n                  '--original-width': getImageAttachmentConfiguration(\n                    galleryImage,\n                    'gallery',\n                    element\n                  ).originalWidth\n                }\"\n                (click)=\"openImageModal(attachmentContext.images!, index)\"\n                (keyup.enter)=\"openImageModal(attachmentContext.images!, index)\"\n              >\n                <p\n                  [innerHTML]=\"\n                    'streamChat.{{ imageCount }} more'\n                      | translate\n                        : { imageCount: attachmentContext!.images!.length - 4 }\n                  \"\n                ></p>\n              </button>\n            </ng-container>\n          </div>\n        </ng-template>\n      </ng-container>\n      <ng-container *ngIf=\"isVideo(attachment)\">\n        <ng-container\n          *ngTemplateOutlet=\"\n            (customTemplatesService.videoAttachmentTemplate$ | async) ||\n              defaultVideo;\n            context: getAttachmentContext(attachment)\n          \"\n        />\n        <ng-template #defaultVideo let-attachmentContext=\"attachment\">\n          <div\n            class=\"str-chat__player-wrapper\"\n            data-testclass=\"video-attachment-parent\"\n            [style.--original-height]=\"\n              getVideoAttachmentConfiguration(attachmentContext, videoElement)\n                .originalHeight\n            \"\n            [style.--original-width]=\"\n              getVideoAttachmentConfiguration(attachmentContext, videoElement)\n                .originalWidth\n            \"\n            [ngStyle]=\"{\n              height: getVideoAttachmentConfiguration(\n                attachmentContext,\n                videoElement\n              ).height,\n              width: getVideoAttachmentConfiguration(\n                attachmentContext,\n                videoElement\n              ).width\n            }\"\n          >\n            <video\n              #videoElement\n              class=\"str-chat__video-angular\"\n              controls\n              data-testclass=\"video-attachment\"\n              [src]=\"\n                getVideoAttachmentConfiguration(attachmentContext, videoElement)\n                  .url\n              \"\n              [poster]=\"\n                getVideoAttachmentConfiguration(attachmentContext, videoElement)\n                  .thumbUrl\n              \"\n            ></video>\n          </div>\n        </ng-template>\n      </ng-container>\n      <ng-container *ngIf=\"isFile(attachment)\">\n        <ng-container\n          *ngTemplateOutlet=\"\n            (customTemplatesService.fileAttachmentTemplate$ | async) ||\n              defaultFile;\n            context: getAttachmentContext(attachment)\n          \"\n        />\n        <ng-template #defaultFile let-attachmentContext=\"attachment\">\n          <div\n            class=\"str-chat__message-attachment-file--item str-chat-angular__message-attachment-file-single\"\n          >\n            <stream-icon-placeholder\n              class=\"str-chat__attachment-type-icon\"\n              icon=\"unspecified-filetype\"\n            />\n            <div class=\"str-chat__message-attachment-file--item-text\">\n              <a\n                class=\"str-chat__message-attachment-file--item-first-row\"\n                data-testclass=\"file-link\"\n                target=\"_blank\"\n                href=\"{{ attachmentContext.asset_url }}\"\n              >\n                <div\n                  data-testclass=\"file-title\"\n                  class=\"str-chat__message-attachment-file--item-name\"\n                >\n                  {{ attachmentContext.title }}\n                </div>\n                <stream-icon-placeholder\n                  class=\"str-chat__message-attachment-download-icon\"\n                  icon=\"download\"\n                />\n              </a>\n              <span\n                *ngIf=\"hasFileSize(attachmentContext)\"\n                class=\"str-chat__message-attachment-file--item-size\"\n                data-testclass=\"size\"\n                >{{ getFileSize(attachmentContext) }}</span\n              >\n            </div>\n          </div>\n        </ng-template>\n      </ng-container>\n      <ng-container *ngIf=\"isVoiceMessage(attachment)\">\n        <ng-container\n          *ngTemplateOutlet=\"\n            (customTemplatesService.voiceRecordingAttachmentTemplate$\n              | async) || defaultRecording;\n            context: getAttachmentContext(attachment)\n          \"\n        />\n        <ng-template #defaultRecording>\n          <stream-voice-recording\n            data-testclass=\"voice-recording\"\n            [attachment]=\"attachment\"\n          />\n        </ng-template>\n      </ng-container>\n      <ng-container\n        *ngIf=\"\n          isCard(attachment) &&\n          getCardAttachmentConfiguration(attachment) as attachmentConfiguration\n        \"\n      >\n        <ng-container\n          *ngTemplateOutlet=\"\n            (customTemplatesService.cardAttachmentTemplate$ | async) ||\n              defaultCard;\n            context: getAttachmentContext(attachment)\n          \"\n        />\n        <ng-template #defaultCard let-attachmentContext=\"attachment\">\n          <div\n            class=\"str-chat__message-attachment-card str-chat__message-attachment-card--{{\n              attachmentContext.type\n            }}\"\n          >\n            <div\n              *ngIf=\"attachmentConfiguration.url\"\n              class=\"str-chat__message-attachment-card--header\"\n            >\n              <a\n                *ngIf=\"attachmentContext.type === 'video'; else cardImage\"\n                [href]=\"\n                  attachmentContext.title_link ||\n                  attachmentContext.og_scrape_url\n                \"\n                target=\"_blank\"\n                data-testclass=\"scraped-video\"\n              >\n                <ng-content *ngTemplateOutlet=\"cardImage\"></ng-content>\n                <div\n                  class=\"str-chat__message-attachment-card--video-play\"\n                ></div>\n                <stream-icon-placeholder icon=\"play\" />\n              </a>\n              <ng-template #cardImage>\n                <img\n                  fetchpriority=\"low\"\n                  loading=\"lazy\"\n                  data-testclass=\"card-img\"\n                  alt=\"{{ attachmentConfiguration.url }}\"\n                  src=\"{{ attachmentConfiguration.url }}\"\n                  [ngStyle]=\"{\n                    height: attachmentConfiguration.height,\n                    width: attachmentConfiguration.width\n                  }\"\n                />\n              </ng-template>\n            </div>\n            <div class=\"str-chat__message-attachment-card--content\">\n              <div class=\"str-chat__message-attachment-card--flex\">\n                <div\n                  *ngIf=\"attachmentContext.title\"\n                  data-testclass=\"card-title\"\n                  class=\"str-chat__message-attachment-card--title\"\n                >\n                  {{ attachmentContext.title }}\n                </div>\n                <div\n                  *ngIf=\"attachmentContext.text\"\n                  class=\"str-chat__message-attachment-card--text\"\n                  data-testclass=\"card-text\"\n                >\n                  {{ attachmentContext.text }}\n                </div>\n                <a\n                  *ngIf=\"\n                    attachmentContext.title_link ||\n                    attachmentContext.og_scrape_url\n                  \"\n                  class=\"str-chat__message-attachment-card--url\"\n                  data-testclass=\"url-link\"\n                  noopener\n                  noreferrer\n                  target=\"_blank\"\n                  href=\"{{\n                    attachmentContext.title_link ||\n                      attachmentContext.og_scrape_url\n                  }}\"\n                >\n                  {{\n                    trimUrl(\n                      attachmentContext.title_link ||\n                        attachmentContext.og_scrape_url\n                    )\n                  }}\n                </a>\n              </div>\n            </div>\n          </div>\n        </ng-template>\n      </ng-container>\n      <ng-container\n        *ngIf=\"\n          !isGalleryType(attachment) &&\n          attachment.actions &&\n          attachment.actions.length > 0\n        \"\n      >\n        <ng-container\n          *ngTemplateOutlet=\"\n            (customTemplatesService.attachmentActionsTemplate$ | async) ||\n              defaultActions;\n            context: getAttachmentContext(attachment)\n          \"\n        />\n        <ng-template #defaultActions let-attachmentContext=\"attachment\">\n          <div class=\"str-chat__message-attachment-actions\">\n            <div class=\"str-chat__message-attachment-actions-form\">\n              <button\n                *ngFor=\"\n                  let action of attachmentContext.actions;\n                  trackBy: trackByActionValue\n                \"\n                data-testclass=\"attachment-action\"\n                class=\"str-chat__message-attachment-actions-button str-chat__message-attachment-actions-button--{{\n                  action.style\n                }}\"\n                (click)=\"sendAction(action)\"\n                (keyup.enter)=\"sendAction(action)\"\n              >\n                {{ action.text }}\n              </button>\n            </div>\n          </div>\n        </ng-template>\n      </ng-container>\n    </div>\n  </ng-container>\n  <ng-container *ngIf=\"customAttachmentsTemplate\">\n    <ng-template\n      *ngTemplateOutlet=\"\n        customAttachmentsTemplate;\n        context: {\n          messageId: messageId!,\n          parentMessageId: parentMessageId,\n          attachments: customAttachments\n        }\n      \"\n    ></ng-template>\n  </ng-container>\n\n  <ng-container *ngIf=\"imagesToView && imagesToView.length > 0\">\n    <ng-container\n      *ngTemplateOutlet=\"\n        (customTemplatesService.modalTemplate$ | async) || defaultModal;\n        context: getModalContext()\n      \"\n    />\n  </ng-container>\n</div>\n\n<ng-template\n  #defaultModal\n  let-isOpen=\"isOpen\"\n  let-isOpenChangeHandler=\"isOpenChangeHandler\"\n  let-content=\"content\"\n>\n  <stream-modal\n    class=\"stream-chat-angular__image-modal-host\"\n    [isOpen]=\"isOpen\"\n    [content]=\"content\"\n    (isOpenChange)=\"isOpenChangeHandler($event)\"\n  />\n</ng-template>\n\n<ng-template #modalContent>\n  <div class=\"stream-chat-angular__image-modal str-chat__image-carousel\">\n    <img\n      #imgElement\n      class=\"stream-chat-angular__image-modal-image str-chat__image-carousel-image\"\n      data-testid=\"modal-image\"\n      [src]=\"\n        getCarouselImageAttachmentConfiguration(\n          imagesToView[imagesToViewCurrentIndex],\n          imgElement\n        ).url\n      \"\n      [style.--original-height]=\"\n        getCarouselImageAttachmentConfiguration(\n          imagesToView[imagesToViewCurrentIndex],\n          imgElement\n        ).originalHeight\n      \"\n      [style.--original-width]=\"\n        getCarouselImageAttachmentConfiguration(\n          imagesToView[imagesToViewCurrentIndex],\n          imgElement\n        ).originalWidth\n      \"\n      [alt]=\"imagesToView[imagesToViewCurrentIndex].fallback\"\n      [ngStyle]=\"{\n        width: getCarouselImageAttachmentConfiguration(\n          imagesToView[imagesToViewCurrentIndex],\n          imgElement\n        ).width,\n        height: getCarouselImageAttachmentConfiguration(\n          imagesToView[imagesToViewCurrentIndex],\n          imgElement\n        ).height\n      }\"\n    />\n    <div>\n      <button\n        class=\"stream-chat-angular__image-modal-stepper str-chat__image-carousel-stepper str-chat__image-carousel-stepper-prev\"\n        data-testid=\"image-modal-prev\"\n        type=\"button\"\n        [ngStyle]=\"{\n          visibility: isImageModalPrevButtonVisible ? 'visible' : 'hidden'\n        }\"\n        (click)=\"stepImages(-1)\"\n        (keyup.enter)=\"stepImages(-1)\"\n      >\n        <stream-icon-placeholder icon=\"arrow-left\" />\n      </button>\n      <button\n        class=\"stream-chat-angular__image-modal-stepper str-chat__image-carousel-stepper str-chat__image-carousel-stepper-next\"\n        type=\"button\"\n        data-testid=\"image-modal-next\"\n        [ngStyle]=\"{\n          visibility: isImageModalNextButtonVisible ? 'visible' : 'hidden'\n        }\"\n        (click)=\"stepImages(1)\"\n        (keyup.enter)=\"stepImages(1)\"\n      >\n        <stream-icon-placeholder icon=\"arrow-right\" />\n      </button>\n    </div>\n  </div>\n</ng-template>\n", dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: VoiceRecordingComponent, selector: "stream-voice-recording", inputs: ["attachment"] }, { kind: "component", type: IconPlaceholderComponent, selector: "stream-icon-placeholder", inputs: ["icon"] }, { kind: "component", type: ModalComponent, selector: "stream-modal", inputs: ["isOpen", "content"], outputs: ["isOpenChange"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "pipe", type: i6.TranslatePipe, name: "translate" }] }); }
 }
-AttachmentListComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: AttachmentListComponent, deps: [{ token: CustomTemplatesService }, { token: ChannelService }, { token: AttachmentConfigurationService }, { token: MessageService }], target: i0.ɵɵFactoryTarget.Component });
-AttachmentListComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.4", type: AttachmentListComponent, selector: "stream-attachment-list", inputs: { messageId: "messageId", parentMessageId: "parentMessageId", attachments: "attachments" }, outputs: { imageModalStateChange: "imageModalStateChange" }, host: { properties: { "class": "this.class" } }, viewQueries: [{ propertyName: "modalContent", first: true, predicate: ["modalContent"], descendants: true, static: true }], usesOnChanges: true, ngImport: i0, template: "<div\n  *ngIf=\"\n    orderedAttachments.length > 0 ||\n    (customAttachments.length > 0 && customAttachmentsTemplate)\n  \"\n  class=\"str-chat__attachment-list\"\n>\n  <ng-container\n    *ngFor=\"let attachment of orderedAttachments; trackBy: trackByUrl\"\n  >\n    <div\n      data-testclass=\"attachment-container\"\n      class=\"str-chat__message-attachment str-chat__message-attachment--{{\n        attachment.type\n      }} str-chat__message-attachment-dynamic-size\"\n      [class.str-chat__message-attachment--card]=\"isCard(attachment)\"\n      [class.str-chat-angular__message-attachment-file-single]=\"\n        isFile(attachment)\n      \"\n      [class.str-chat__message-attachment--voice-recording]=\"\n        isVoiceMessage(attachment)\n      \"\n      [class.str-chat__message-attachment-with-actions]=\"\n        !isGalleryType(attachment) &&\n        attachment.actions &&\n        attachment.actions.length > 0\n      \"\n      [class.str-chat__message-attachment--svg-image]=\"isSvg(attachment)\"\n    >\n      <ng-container *ngIf=\"isImage(attachment)\">\n        <ng-container\n          *ngTemplateOutlet=\"\n            (customTemplatesService.imageAttachmentTemplate$ | async) ||\n              defaultImage;\n            context: getAttachmentContext(attachment)\n          \"\n        ></ng-container>\n        <ng-template #defaultImage let-attachmentContext=\"attachment\">\n          <img\n            #imgElement\n            class=\"str-chat__message-attachment--img\"\n            data-testclass=\"image\"\n            [src]=\"\n              getImageAttachmentConfiguration(\n                attachmentContext,\n                'single',\n                imgElement\n              ).url\n            \"\n            [alt]=\"attachmentContext?.fallback\"\n            [ngStyle]=\"{\n              height: getImageAttachmentConfiguration(\n                attachmentContext,\n                'single',\n                imgElement\n              ).height,\n              width: getImageAttachmentConfiguration(\n                attachmentContext,\n                'single',\n                imgElement\n              ).width,\n              '--original-height': getImageAttachmentConfiguration(\n                attachmentContext,\n                'single',\n                imgElement\n              ).originalHeight,\n              '--original-width': getImageAttachmentConfiguration(\n                attachmentContext,\n                'single',\n                imgElement\n              ).originalWidth\n            }\"\n            (click)=\"openImageModal([attachmentContext])\"\n            (keyup.enter)=\"openImageModal([attachmentContext])\"\n          />\n        </ng-template>\n      </ng-container>\n      <ng-container *ngIf=\"isGallery(attachment)\">\n        <ng-container\n          *ngTemplateOutlet=\"\n            (customTemplatesService.galleryAttachmentTemplate$ | async) ||\n              defaultGallery;\n            context: getAttachmentContext(attachment)\n          \"\n        ></ng-container>\n        <ng-template #defaultGallery let-attachmentContext=\"attachment\">\n          <div\n            class=\"str-chat__gallery\"\n            data-testid=\"image-gallery\"\n            [class.str-chat__gallery--square]=\"\n              (attachmentContext?.images)!.length > 3\n            \"\n            [class.str-chat__gallery-two-rows]=\"\n              (attachmentContext?.images)!.length > 2\n            \"\n          >\n            <ng-container\n              *ngFor=\"\n                let galleryImage of attachmentContext.images;\n                let index = index;\n                let isLast = last;\n                trackBy: trackByImageUrl\n              \"\n            >\n              <button\n                *ngIf=\"index < 3 || (index === 3 && isLast)\"\n                class=\"str-chat__gallery-image\"\n                data-testclass=\"gallery-image\"\n                [class.str-chat__message-attachment--svg-image]=\"\n                  isSvg(galleryImage)\n                \"\n                (click)=\"openImageModal(attachmentContext.images!, index)\"\n                (keyup.enter)=\"openImageModal(attachmentContext.images!, index)\"\n              >\n                <img\n                  #imgElement\n                  fetchpriority=\"low\"\n                  loading=\"lazy\"\n                  [src]=\"\n                    getImageAttachmentConfiguration(\n                      galleryImage,\n                      'gallery',\n                      imgElement\n                    ).url\n                  \"\n                  [alt]=\"galleryImage.fallback\"\n                  [style.--original-height]=\"\n                    getImageAttachmentConfiguration(\n                      galleryImage,\n                      'gallery',\n                      imgElement\n                    ).originalHeight\n                  \"\n                  [style.--original-width]=\"\n                    getImageAttachmentConfiguration(\n                      galleryImage,\n                      'gallery',\n                      imgElement\n                    ).originalWidth\n                  \"\n                  [ngStyle]=\"{\n                    height: getImageAttachmentConfiguration(\n                      galleryImage,\n                      'gallery',\n                      imgElement\n                    ).height,\n                    width: getImageAttachmentConfiguration(\n                      galleryImage,\n                      'gallery',\n                      imgElement\n                    ).width\n                  }\"\n                />\n              </button>\n              <button\n                *ngIf=\"index === 3 && !isLast\"\n                #element\n                class=\"str-chat__gallery-placeholder\"\n                data-testclass=\"gallery-image\"\n                data-testid=\"more-image-button\"\n                [class.str-chat__message-attachment--svg-image]=\"\n                  isSvg(galleryImage)\n                \"\n                [ngStyle]=\"{\n                  'background-image':\n                    'url(' +\n                    getImageAttachmentConfiguration(\n                      galleryImage,\n                      'gallery',\n                      element\n                    ).url +\n                    ')',\n                  height: getImageAttachmentConfiguration(\n                    galleryImage,\n                    'gallery',\n                    element\n                  ).height,\n                  width: getImageAttachmentConfiguration(\n                    galleryImage,\n                    'gallery',\n                    element\n                  ).width,\n                  '--original-height': getImageAttachmentConfiguration(\n                    galleryImage,\n                    'gallery',\n                    element\n                  ).originalHeight,\n                  '--original-width': getImageAttachmentConfiguration(\n                    galleryImage,\n                    'gallery',\n                    element\n                  ).originalWidth\n                }\"\n                (click)=\"openImageModal(attachmentContext.images!, index)\"\n                (keyup.enter)=\"openImageModal(attachmentContext.images!, index)\"\n              >\n                <p\n                  [innerHTML]=\"\n                    'streamChat.{{ imageCount }} more'\n                      | translate\n                        : { imageCount: attachmentContext!.images!.length - 4 }\n                  \"\n                ></p>\n              </button>\n            </ng-container>\n          </div>\n        </ng-template>\n      </ng-container>\n      <ng-container *ngIf=\"isVideo(attachment)\">\n        <ng-container\n          *ngTemplateOutlet=\"\n            (customTemplatesService.videoAttachmentTemplate$ | async) ||\n              defaultVideo;\n            context: getAttachmentContext(attachment)\n          \"\n        ></ng-container>\n        <ng-template #defaultVideo let-attachmentContext=\"attachment\">\n          <div\n            class=\"str-chat__player-wrapper\"\n            data-testclass=\"video-attachment-parent\"\n            [style.--original-height]=\"\n              getVideoAttachmentConfiguration(attachmentContext, videoElement)\n                .originalHeight\n            \"\n            [style.--original-width]=\"\n              getVideoAttachmentConfiguration(attachmentContext, videoElement)\n                .originalWidth\n            \"\n            [ngStyle]=\"{\n              height: getVideoAttachmentConfiguration(\n                attachmentContext,\n                videoElement\n              ).height,\n              width: getVideoAttachmentConfiguration(\n                attachmentContext,\n                videoElement\n              ).width\n            }\"\n          >\n            <video\n              #videoElement\n              class=\"str-chat__video-angular\"\n              controls\n              data-testclass=\"video-attachment\"\n              [src]=\"\n                getVideoAttachmentConfiguration(attachmentContext, videoElement)\n                  .url\n              \"\n              [poster]=\"\n                getVideoAttachmentConfiguration(attachmentContext, videoElement)\n                  .thumbUrl\n              \"\n            ></video>\n          </div>\n        </ng-template>\n      </ng-container>\n      <ng-container *ngIf=\"isFile(attachment)\">\n        <ng-container\n          *ngTemplateOutlet=\"\n            (customTemplatesService.fileAttachmentTemplate$ | async) ||\n              defaultFile;\n            context: getAttachmentContext(attachment)\n          \"\n        ></ng-container>\n        <ng-template #defaultFile let-attachmentContext=\"attachment\">\n          <div\n            class=\"str-chat__message-attachment-file--item str-chat-angular__message-attachment-file-single\"\n          >\n            <stream-icon-placeholder\n              class=\"str-chat__attachment-type-icon\"\n              icon=\"unspecified-filetype\"\n            ></stream-icon-placeholder>\n            <div class=\"str-chat__message-attachment-file--item-text\">\n              <a\n                class=\"str-chat__message-attachment-file--item-first-row\"\n                data-testclass=\"file-link\"\n                target=\"_blank\"\n                href=\"{{ attachmentContext.asset_url }}\"\n              >\n                <div\n                  data-testclass=\"file-title\"\n                  class=\"str-chat__message-attachment-file--item-name\"\n                >\n                  {{ attachmentContext.title }}\n                </div>\n                <stream-icon-placeholder\n                  class=\"str-chat__message-attachment-download-icon\"\n                  icon=\"download\"\n                ></stream-icon-placeholder>\n              </a>\n              <span\n                *ngIf=\"hasFileSize(attachmentContext)\"\n                class=\"str-chat__message-attachment-file--item-size\"\n                data-testclass=\"size\"\n                >{{ getFileSize(attachmentContext) }}</span\n              >\n            </div>\n          </div>\n        </ng-template>\n      </ng-container>\n      <ng-container *ngIf=\"isVoiceMessage(attachment)\">\n        <ng-container\n          *ngTemplateOutlet=\"\n            (customTemplatesService.voiceRecordingAttachmentTemplate$\n              | async) || defaultRecording;\n            context: getAttachmentContext(attachment)\n          \"\n        ></ng-container>\n        <ng-template #defaultRecording>\n          <stream-voice-recording\n            data-testclass=\"voice-recording\"\n            [attachment]=\"attachment\"\n          ></stream-voice-recording>\n        </ng-template>\n      </ng-container>\n      <ng-container\n        *ngIf=\"\n          isCard(attachment) &&\n          getCardAttachmentConfiguration(attachment) as attachmentConfiguration\n        \"\n      >\n        <ng-container\n          *ngTemplateOutlet=\"\n            (customTemplatesService.cardAttachmentTemplate$ | async) ||\n              defaultCard;\n            context: getAttachmentContext(attachment)\n          \"\n        ></ng-container>\n        <ng-template #defaultCard let-attachmentContext=\"attachment\">\n          <div\n            class=\"str-chat__message-attachment-card str-chat__message-attachment-card--{{\n              attachmentContext.type\n            }}\"\n          >\n            <div\n              *ngIf=\"attachmentConfiguration.url\"\n              class=\"str-chat__message-attachment-card--header\"\n            >\n              <a\n                *ngIf=\"attachmentContext.type === 'video'; else cardImage\"\n                [href]=\"\n                  attachmentContext.title_link ||\n                  attachmentContext.og_scrape_url\n                \"\n                target=\"_blank\"\n                data-testclass=\"scraped-video\"\n              >\n                <ng-content *ngTemplateOutlet=\"cardImage\"></ng-content>\n                <div\n                  class=\"str-chat__message-attachment-card--video-play\"\n                ></div>\n                <stream-icon-placeholder icon=\"play\"></stream-icon-placeholder>\n              </a>\n              <ng-template #cardImage>\n                <img\n                  fetchpriority=\"low\"\n                  loading=\"lazy\"\n                  data-testclass=\"card-img\"\n                  alt=\"{{ attachmentConfiguration.url }}\"\n                  src=\"{{ attachmentConfiguration.url }}\"\n                  [ngStyle]=\"{\n                    height: attachmentConfiguration.height,\n                    width: attachmentConfiguration.width\n                  }\"\n                />\n              </ng-template>\n            </div>\n            <div class=\"str-chat__message-attachment-card--content\">\n              <div class=\"str-chat__message-attachment-card--flex\">\n                <div\n                  *ngIf=\"attachmentContext.title\"\n                  data-testclass=\"card-title\"\n                  class=\"str-chat__message-attachment-card--title\"\n                >\n                  {{ attachmentContext.title }}\n                </div>\n                <div\n                  *ngIf=\"attachmentContext.text\"\n                  class=\"str-chat__message-attachment-card--text\"\n                  data-testclass=\"card-text\"\n                >\n                  {{ attachmentContext.text }}\n                </div>\n                <a\n                  *ngIf=\"\n                    attachmentContext.title_link ||\n                    attachmentContext.og_scrape_url\n                  \"\n                  class=\"str-chat__message-attachment-card--url\"\n                  data-testclass=\"url-link\"\n                  noopener\n                  noreferrer\n                  target=\"_blank\"\n                  href=\"{{\n                    attachmentContext.title_link ||\n                      attachmentContext.og_scrape_url\n                  }}\"\n                >\n                  {{\n                    trimUrl(\n                      attachmentContext.title_link ||\n                        attachmentContext.og_scrape_url\n                    )\n                  }}\n                </a>\n              </div>\n            </div>\n          </div>\n        </ng-template>\n      </ng-container>\n      <ng-container\n        *ngIf=\"\n          !isGalleryType(attachment) &&\n          attachment.actions &&\n          attachment.actions.length > 0\n        \"\n      >\n        <ng-container\n          *ngTemplateOutlet=\"\n            (customTemplatesService.attachmentActionsTemplate$ | async) ||\n              defaultActions;\n            context: getAttachmentContext(attachment)\n          \"\n        ></ng-container>\n        <ng-template #defaultActions let-attachmentContext=\"attachment\">\n          <div class=\"str-chat__message-attachment-actions\">\n            <div class=\"str-chat__message-attachment-actions-form\">\n              <button\n                *ngFor=\"\n                  let action of attachmentContext.actions;\n                  trackBy: trackByActionValue\n                \"\n                data-testclass=\"attachment-action\"\n                class=\"str-chat__message-attachment-actions-button str-chat__message-attachment-actions-button--{{\n                  action.style\n                }}\"\n                (click)=\"sendAction(action)\"\n                (keyup.enter)=\"sendAction(action)\"\n              >\n                {{ action.text }}\n              </button>\n            </div>\n          </div>\n        </ng-template>\n      </ng-container>\n    </div>\n  </ng-container>\n  <ng-container *ngIf=\"customAttachmentsTemplate\">\n    <ng-template\n      *ngTemplateOutlet=\"\n        customAttachmentsTemplate;\n        context: {\n          messageId: messageId,\n          parentMessageId: parentMessageId,\n          attachments: customAttachments\n        }\n      \"\n    ></ng-template>\n  </ng-container>\n\n  <ng-container *ngIf=\"imagesToView && imagesToView.length > 0\">\n    <ng-container\n      *ngTemplateOutlet=\"\n        (customTemplatesService.modalTemplate$ | async) || defaultModal;\n        context: getModalContext()\n      \"\n    ></ng-container>\n  </ng-container>\n</div>\n\n<ng-template\n  #defaultModal\n  let-isOpen=\"isOpen\"\n  let-isOpenChangeHandler=\"isOpenChangeHandler\"\n  let-content=\"content\"\n>\n  <stream-modal\n    class=\"stream-chat-angular__image-modal-host\"\n    [isOpen]=\"isOpen\"\n    [content]=\"content\"\n    (isOpenChange)=\"isOpenChangeHandler($event)\"\n  >\n  </stream-modal>\n</ng-template>\n\n<ng-template #modalContent>\n  <div class=\"stream-chat-angular__image-modal str-chat__image-carousel\">\n    <img\n      #imgElement\n      class=\"stream-chat-angular__image-modal-image str-chat__image-carousel-image\"\n      data-testid=\"modal-image\"\n      [src]=\"\n        getCarouselImageAttachmentConfiguration(\n          imagesToView[imagesToViewCurrentIndex],\n          imgElement\n        ).url\n      \"\n      [style.--original-height]=\"\n        getCarouselImageAttachmentConfiguration(\n          imagesToView[imagesToViewCurrentIndex],\n          imgElement\n        ).originalHeight\n      \"\n      [style.--original-width]=\"\n        getCarouselImageAttachmentConfiguration(\n          imagesToView[imagesToViewCurrentIndex],\n          imgElement\n        ).originalWidth\n      \"\n      [alt]=\"imagesToView[imagesToViewCurrentIndex].fallback\"\n      [ngStyle]=\"{\n        width: getCarouselImageAttachmentConfiguration(\n          imagesToView[imagesToViewCurrentIndex],\n          imgElement\n        ).width,\n        height: getCarouselImageAttachmentConfiguration(\n          imagesToView[imagesToViewCurrentIndex],\n          imgElement\n        ).height\n      }\"\n    />\n    <div>\n      <button\n        class=\"stream-chat-angular__image-modal-stepper str-chat__image-carousel-stepper str-chat__image-carousel-stepper-prev\"\n        data-testid=\"image-modal-prev\"\n        type=\"button\"\n        [ngStyle]=\"{\n          visibility: isImageModalPrevButtonVisible ? 'visible' : 'hidden'\n        }\"\n        (click)=\"stepImages(-1)\"\n        (keyup.enter)=\"stepImages(-1)\"\n      >\n        <stream-icon-placeholder icon=\"arrow-left\"></stream-icon-placeholder>\n      </button>\n      <button\n        class=\"stream-chat-angular__image-modal-stepper str-chat__image-carousel-stepper str-chat__image-carousel-stepper-next\"\n        type=\"button\"\n        data-testid=\"image-modal-next\"\n        [ngStyle]=\"{\n          visibility: isImageModalNextButtonVisible ? 'visible' : 'hidden'\n        }\"\n        (click)=\"stepImages(1)\"\n        (keyup.enter)=\"stepImages(1)\"\n      >\n        <stream-icon-placeholder icon=\"arrow-right\"></stream-icon-placeholder>\n      </button>\n    </div>\n  </div>\n</ng-template>\n", dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: VoiceRecordingComponent, selector: "stream-voice-recording", inputs: ["attachment"] }, { kind: "component", type: IconPlaceholderComponent, selector: "stream-icon-placeholder", inputs: ["icon"] }, { kind: "component", type: ModalComponent, selector: "stream-modal", inputs: ["isOpen", "content"], outputs: ["isOpenChange"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "pipe", type: i6.TranslatePipe, name: "translate" }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: AttachmentListComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: AttachmentListComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'stream-attachment-list', template: "<div\n  *ngIf=\"\n    orderedAttachments.length > 0 ||\n    (customAttachments.length > 0 && customAttachmentsTemplate)\n  \"\n  class=\"str-chat__attachment-list\"\n>\n  <ng-container\n    *ngFor=\"let attachment of orderedAttachments; trackBy: trackByUrl\"\n  >\n    <div\n      data-testclass=\"attachment-container\"\n      class=\"str-chat__message-attachment str-chat__message-attachment--{{\n        attachment.type\n      }} str-chat__message-attachment-dynamic-size\"\n      [class.str-chat__message-attachment--card]=\"isCard(attachment)\"\n      [class.str-chat-angular__message-attachment-file-single]=\"\n        isFile(attachment)\n      \"\n      [class.str-chat__message-attachment--voice-recording]=\"\n        isVoiceMessage(attachment)\n      \"\n      [class.str-chat__message-attachment-with-actions]=\"\n        !isGalleryType(attachment) &&\n        attachment.actions &&\n        attachment.actions.length > 0\n      \"\n      [class.str-chat__message-attachment--svg-image]=\"isSvg(attachment)\"\n    >\n      <ng-container *ngIf=\"isImage(attachment)\">\n        <ng-container\n          *ngTemplateOutlet=\"\n            (customTemplatesService.imageAttachmentTemplate$ | async) ||\n              defaultImage;\n            context: getAttachmentContext(attachment)\n          \"\n        ></ng-container>\n        <ng-template #defaultImage let-attachmentContext=\"attachment\">\n          <img\n            #imgElement\n            class=\"str-chat__message-attachment--img\"\n            data-testclass=\"image\"\n            [src]=\"\n              getImageAttachmentConfiguration(\n                attachmentContext,\n                'single',\n                imgElement\n              ).url\n            \"\n            [alt]=\"attachmentContext?.fallback\"\n            [ngStyle]=\"{\n              height: getImageAttachmentConfiguration(\n                attachmentContext,\n                'single',\n                imgElement\n              ).height,\n              width: getImageAttachmentConfiguration(\n                attachmentContext,\n                'single',\n                imgElement\n              ).width,\n              '--original-height': getImageAttachmentConfiguration(\n                attachmentContext,\n                'single',\n                imgElement\n              ).originalHeight,\n              '--original-width': getImageAttachmentConfiguration(\n                attachmentContext,\n                'single',\n                imgElement\n              ).originalWidth\n            }\"\n            (click)=\"openImageModal([attachmentContext])\"\n            (keyup.enter)=\"openImageModal([attachmentContext])\"\n          />\n        </ng-template>\n      </ng-container>\n      <ng-container *ngIf=\"isGallery(attachment)\">\n        <ng-container\n          *ngTemplateOutlet=\"\n            (customTemplatesService.galleryAttachmentTemplate$ | async) ||\n              defaultGallery;\n            context: getAttachmentContext(attachment)\n          \"\n        ></ng-container>\n        <ng-template #defaultGallery let-attachmentContext=\"attachment\">\n          <div\n            class=\"str-chat__gallery\"\n            data-testid=\"image-gallery\"\n            [class.str-chat__gallery--square]=\"\n              (attachmentContext?.images)!.length > 3\n            \"\n            [class.str-chat__gallery-two-rows]=\"\n              (attachmentContext?.images)!.length > 2\n            \"\n          >\n            <ng-container\n              *ngFor=\"\n                let galleryImage of attachmentContext.images;\n                let index = index;\n                let isLast = last;\n                trackBy: trackByImageUrl\n              \"\n            >\n              <button\n                *ngIf=\"index < 3 || (index === 3 && isLast)\"\n                class=\"str-chat__gallery-image\"\n                data-testclass=\"gallery-image\"\n                [class.str-chat__message-attachment--svg-image]=\"\n                  isSvg(galleryImage)\n                \"\n                (click)=\"openImageModal(attachmentContext.images!, index)\"\n                (keyup.enter)=\"openImageModal(attachmentContext.images!, index)\"\n              >\n                <img\n                  #imgElement\n                  fetchpriority=\"low\"\n                  loading=\"lazy\"\n                  [src]=\"\n                    getImageAttachmentConfiguration(\n                      galleryImage,\n                      'gallery',\n                      imgElement\n                    ).url\n                  \"\n                  [alt]=\"galleryImage.fallback\"\n                  [style.--original-height]=\"\n                    getImageAttachmentConfiguration(\n                      galleryImage,\n                      'gallery',\n                      imgElement\n                    ).originalHeight\n                  \"\n                  [style.--original-width]=\"\n                    getImageAttachmentConfiguration(\n                      galleryImage,\n                      'gallery',\n                      imgElement\n                    ).originalWidth\n                  \"\n                  [ngStyle]=\"{\n                    height: getImageAttachmentConfiguration(\n                      galleryImage,\n                      'gallery',\n                      imgElement\n                    ).height,\n                    width: getImageAttachmentConfiguration(\n                      galleryImage,\n                      'gallery',\n                      imgElement\n                    ).width\n                  }\"\n                />\n              </button>\n              <button\n                *ngIf=\"index === 3 && !isLast\"\n                #element\n                class=\"str-chat__gallery-placeholder\"\n                data-testclass=\"gallery-image\"\n                data-testid=\"more-image-button\"\n                [class.str-chat__message-attachment--svg-image]=\"\n                  isSvg(galleryImage)\n                \"\n                [ngStyle]=\"{\n                  'background-image':\n                    'url(' +\n                    getImageAttachmentConfiguration(\n                      galleryImage,\n                      'gallery',\n                      element\n                    ).url +\n                    ')',\n                  height: getImageAttachmentConfiguration(\n                    galleryImage,\n                    'gallery',\n                    element\n                  ).height,\n                  width: getImageAttachmentConfiguration(\n                    galleryImage,\n                    'gallery',\n                    element\n                  ).width,\n                  '--original-height': getImageAttachmentConfiguration(\n                    galleryImage,\n                    'gallery',\n                    element\n                  ).originalHeight,\n                  '--original-width': getImageAttachmentConfiguration(\n                    galleryImage,\n                    'gallery',\n                    element\n                  ).originalWidth\n                }\"\n                (click)=\"openImageModal(attachmentContext.images!, index)\"\n                (keyup.enter)=\"openImageModal(attachmentContext.images!, index)\"\n              >\n                <p\n                  [innerHTML]=\"\n                    'streamChat.{{ imageCount }} more'\n                      | translate\n                        : { imageCount: attachmentContext!.images!.length - 4 }\n                  \"\n                ></p>\n              </button>\n            </ng-container>\n          </div>\n        </ng-template>\n      </ng-container>\n      <ng-container *ngIf=\"isVideo(attachment)\">\n        <ng-container\n          *ngTemplateOutlet=\"\n            (customTemplatesService.videoAttachmentTemplate$ | async) ||\n              defaultVideo;\n            context: getAttachmentContext(attachment)\n          \"\n        ></ng-container>\n        <ng-template #defaultVideo let-attachmentContext=\"attachment\">\n          <div\n            class=\"str-chat__player-wrapper\"\n            data-testclass=\"video-attachment-parent\"\n            [style.--original-height]=\"\n              getVideoAttachmentConfiguration(attachmentContext, videoElement)\n                .originalHeight\n            \"\n            [style.--original-width]=\"\n              getVideoAttachmentConfiguration(attachmentContext, videoElement)\n                .originalWidth\n            \"\n            [ngStyle]=\"{\n              height: getVideoAttachmentConfiguration(\n                attachmentContext,\n                videoElement\n              ).height,\n              width: getVideoAttachmentConfiguration(\n                attachmentContext,\n                videoElement\n              ).width\n            }\"\n          >\n            <video\n              #videoElement\n              class=\"str-chat__video-angular\"\n              controls\n              data-testclass=\"video-attachment\"\n              [src]=\"\n                getVideoAttachmentConfiguration(attachmentContext, videoElement)\n                  .url\n              \"\n              [poster]=\"\n                getVideoAttachmentConfiguration(attachmentContext, videoElement)\n                  .thumbUrl\n              \"\n            ></video>\n          </div>\n        </ng-template>\n      </ng-container>\n      <ng-container *ngIf=\"isFile(attachment)\">\n        <ng-container\n          *ngTemplateOutlet=\"\n            (customTemplatesService.fileAttachmentTemplate$ | async) ||\n              defaultFile;\n            context: getAttachmentContext(attachment)\n          \"\n        ></ng-container>\n        <ng-template #defaultFile let-attachmentContext=\"attachment\">\n          <div\n            class=\"str-chat__message-attachment-file--item str-chat-angular__message-attachment-file-single\"\n          >\n            <stream-icon-placeholder\n              class=\"str-chat__attachment-type-icon\"\n              icon=\"unspecified-filetype\"\n            ></stream-icon-placeholder>\n            <div class=\"str-chat__message-attachment-file--item-text\">\n              <a\n                class=\"str-chat__message-attachment-file--item-first-row\"\n                data-testclass=\"file-link\"\n                target=\"_blank\"\n                href=\"{{ attachmentContext.asset_url }}\"\n              >\n                <div\n                  data-testclass=\"file-title\"\n                  class=\"str-chat__message-attachment-file--item-name\"\n                >\n                  {{ attachmentContext.title }}\n                </div>\n                <stream-icon-placeholder\n                  class=\"str-chat__message-attachment-download-icon\"\n                  icon=\"download\"\n                ></stream-icon-placeholder>\n              </a>\n              <span\n                *ngIf=\"hasFileSize(attachmentContext)\"\n                class=\"str-chat__message-attachment-file--item-size\"\n                data-testclass=\"size\"\n                >{{ getFileSize(attachmentContext) }}</span\n              >\n            </div>\n          </div>\n        </ng-template>\n      </ng-container>\n      <ng-container *ngIf=\"isVoiceMessage(attachment)\">\n        <ng-container\n          *ngTemplateOutlet=\"\n            (customTemplatesService.voiceRecordingAttachmentTemplate$\n              | async) || defaultRecording;\n            context: getAttachmentContext(attachment)\n          \"\n        ></ng-container>\n        <ng-template #defaultRecording>\n          <stream-voice-recording\n            data-testclass=\"voice-recording\"\n            [attachment]=\"attachment\"\n          ></stream-voice-recording>\n        </ng-template>\n      </ng-container>\n      <ng-container\n        *ngIf=\"\n          isCard(attachment) &&\n          getCardAttachmentConfiguration(attachment) as attachmentConfiguration\n        \"\n      >\n        <ng-container\n          *ngTemplateOutlet=\"\n            (customTemplatesService.cardAttachmentTemplate$ | async) ||\n              defaultCard;\n            context: getAttachmentContext(attachment)\n          \"\n        ></ng-container>\n        <ng-template #defaultCard let-attachmentContext=\"attachment\">\n          <div\n            class=\"str-chat__message-attachment-card str-chat__message-attachment-card--{{\n              attachmentContext.type\n            }}\"\n          >\n            <div\n              *ngIf=\"attachmentConfiguration.url\"\n              class=\"str-chat__message-attachment-card--header\"\n            >\n              <a\n                *ngIf=\"attachmentContext.type === 'video'; else cardImage\"\n                [href]=\"\n                  attachmentContext.title_link ||\n                  attachmentContext.og_scrape_url\n                \"\n                target=\"_blank\"\n                data-testclass=\"scraped-video\"\n              >\n                <ng-content *ngTemplateOutlet=\"cardImage\"></ng-content>\n                <div\n                  class=\"str-chat__message-attachment-card--video-play\"\n                ></div>\n                <stream-icon-placeholder icon=\"play\"></stream-icon-placeholder>\n              </a>\n              <ng-template #cardImage>\n                <img\n                  fetchpriority=\"low\"\n                  loading=\"lazy\"\n                  data-testclass=\"card-img\"\n                  alt=\"{{ attachmentConfiguration.url }}\"\n                  src=\"{{ attachmentConfiguration.url }}\"\n                  [ngStyle]=\"{\n                    height: attachmentConfiguration.height,\n                    width: attachmentConfiguration.width\n                  }\"\n                />\n              </ng-template>\n            </div>\n            <div class=\"str-chat__message-attachment-card--content\">\n              <div class=\"str-chat__message-attachment-card--flex\">\n                <div\n                  *ngIf=\"attachmentContext.title\"\n                  data-testclass=\"card-title\"\n                  class=\"str-chat__message-attachment-card--title\"\n                >\n                  {{ attachmentContext.title }}\n                </div>\n                <div\n                  *ngIf=\"attachmentContext.text\"\n                  class=\"str-chat__message-attachment-card--text\"\n                  data-testclass=\"card-text\"\n                >\n                  {{ attachmentContext.text }}\n                </div>\n                <a\n                  *ngIf=\"\n                    attachmentContext.title_link ||\n                    attachmentContext.og_scrape_url\n                  \"\n                  class=\"str-chat__message-attachment-card--url\"\n                  data-testclass=\"url-link\"\n                  noopener\n                  noreferrer\n                  target=\"_blank\"\n                  href=\"{{\n                    attachmentContext.title_link ||\n                      attachmentContext.og_scrape_url\n                  }}\"\n                >\n                  {{\n                    trimUrl(\n                      attachmentContext.title_link ||\n                        attachmentContext.og_scrape_url\n                    )\n                  }}\n                </a>\n              </div>\n            </div>\n          </div>\n        </ng-template>\n      </ng-container>\n      <ng-container\n        *ngIf=\"\n          !isGalleryType(attachment) &&\n          attachment.actions &&\n          attachment.actions.length > 0\n        \"\n      >\n        <ng-container\n          *ngTemplateOutlet=\"\n            (customTemplatesService.attachmentActionsTemplate$ | async) ||\n              defaultActions;\n            context: getAttachmentContext(attachment)\n          \"\n        ></ng-container>\n        <ng-template #defaultActions let-attachmentContext=\"attachment\">\n          <div class=\"str-chat__message-attachment-actions\">\n            <div class=\"str-chat__message-attachment-actions-form\">\n              <button\n                *ngFor=\"\n                  let action of attachmentContext.actions;\n                  trackBy: trackByActionValue\n                \"\n                data-testclass=\"attachment-action\"\n                class=\"str-chat__message-attachment-actions-button str-chat__message-attachment-actions-button--{{\n                  action.style\n                }}\"\n                (click)=\"sendAction(action)\"\n                (keyup.enter)=\"sendAction(action)\"\n              >\n                {{ action.text }}\n              </button>\n            </div>\n          </div>\n        </ng-template>\n      </ng-container>\n    </div>\n  </ng-container>\n  <ng-container *ngIf=\"customAttachmentsTemplate\">\n    <ng-template\n      *ngTemplateOutlet=\"\n        customAttachmentsTemplate;\n        context: {\n          messageId: messageId,\n          parentMessageId: parentMessageId,\n          attachments: customAttachments\n        }\n      \"\n    ></ng-template>\n  </ng-container>\n\n  <ng-container *ngIf=\"imagesToView && imagesToView.length > 0\">\n    <ng-container\n      *ngTemplateOutlet=\"\n        (customTemplatesService.modalTemplate$ | async) || defaultModal;\n        context: getModalContext()\n      \"\n    ></ng-container>\n  </ng-container>\n</div>\n\n<ng-template\n  #defaultModal\n  let-isOpen=\"isOpen\"\n  let-isOpenChangeHandler=\"isOpenChangeHandler\"\n  let-content=\"content\"\n>\n  <stream-modal\n    class=\"stream-chat-angular__image-modal-host\"\n    [isOpen]=\"isOpen\"\n    [content]=\"content\"\n    (isOpenChange)=\"isOpenChangeHandler($event)\"\n  >\n  </stream-modal>\n</ng-template>\n\n<ng-template #modalContent>\n  <div class=\"stream-chat-angular__image-modal str-chat__image-carousel\">\n    <img\n      #imgElement\n      class=\"stream-chat-angular__image-modal-image str-chat__image-carousel-image\"\n      data-testid=\"modal-image\"\n      [src]=\"\n        getCarouselImageAttachmentConfiguration(\n          imagesToView[imagesToViewCurrentIndex],\n          imgElement\n        ).url\n      \"\n      [style.--original-height]=\"\n        getCarouselImageAttachmentConfiguration(\n          imagesToView[imagesToViewCurrentIndex],\n          imgElement\n        ).originalHeight\n      \"\n      [style.--original-width]=\"\n        getCarouselImageAttachmentConfiguration(\n          imagesToView[imagesToViewCurrentIndex],\n          imgElement\n        ).originalWidth\n      \"\n      [alt]=\"imagesToView[imagesToViewCurrentIndex].fallback\"\n      [ngStyle]=\"{\n        width: getCarouselImageAttachmentConfiguration(\n          imagesToView[imagesToViewCurrentIndex],\n          imgElement\n        ).width,\n        height: getCarouselImageAttachmentConfiguration(\n          imagesToView[imagesToViewCurrentIndex],\n          imgElement\n        ).height\n      }\"\n    />\n    <div>\n      <button\n        class=\"stream-chat-angular__image-modal-stepper str-chat__image-carousel-stepper str-chat__image-carousel-stepper-prev\"\n        data-testid=\"image-modal-prev\"\n        type=\"button\"\n        [ngStyle]=\"{\n          visibility: isImageModalPrevButtonVisible ? 'visible' : 'hidden'\n        }\"\n        (click)=\"stepImages(-1)\"\n        (keyup.enter)=\"stepImages(-1)\"\n      >\n        <stream-icon-placeholder icon=\"arrow-left\"></stream-icon-placeholder>\n      </button>\n      <button\n        class=\"stream-chat-angular__image-modal-stepper str-chat__image-carousel-stepper str-chat__image-carousel-stepper-next\"\n        type=\"button\"\n        data-testid=\"image-modal-next\"\n        [ngStyle]=\"{\n          visibility: isImageModalNextButtonVisible ? 'visible' : 'hidden'\n        }\"\n        (click)=\"stepImages(1)\"\n        (keyup.enter)=\"stepImages(1)\"\n      >\n        <stream-icon-placeholder icon=\"arrow-right\"></stream-icon-placeholder>\n      </button>\n    </div>\n  </div>\n</ng-template>\n" }]
-        }], ctorParameters: function () { return [{ type: CustomTemplatesService }, { type: ChannelService }, { type: AttachmentConfigurationService }, { type: MessageService }]; }, propDecorators: { messageId: [{
+            args: [{ selector: 'stream-attachment-list', template: "<div\n  *ngIf=\"\n    orderedAttachments.length > 0 ||\n    (customAttachments.length > 0 && customAttachmentsTemplate)\n  \"\n  class=\"str-chat__attachment-list\"\n>\n  <ng-container\n    *ngFor=\"let attachment of orderedAttachments; trackBy: trackByUrl\"\n  >\n    <div\n      data-testclass=\"attachment-container\"\n      class=\"str-chat__message-attachment str-chat__message-attachment--{{\n        attachment.type\n      }} str-chat__message-attachment-dynamic-size\"\n      [class.str-chat__message-attachment--card]=\"isCard(attachment)\"\n      [class.str-chat-angular__message-attachment-file-single]=\"\n        isFile(attachment)\n      \"\n      [class.str-chat__message-attachment--voice-recording]=\"\n        isVoiceMessage(attachment)\n      \"\n      [class.str-chat__message-attachment-with-actions]=\"\n        !isGalleryType(attachment) &&\n        attachment.actions &&\n        attachment.actions.length > 0\n      \"\n      [class.str-chat__message-attachment--svg-image]=\"isSvg(attachment)\"\n    >\n      <ng-container *ngIf=\"isImage(attachment)\">\n        <ng-container\n          *ngTemplateOutlet=\"\n            (customTemplatesService.imageAttachmentTemplate$ | async) ||\n              defaultImage;\n            context: getAttachmentContext(attachment)\n          \"\n        />\n        <ng-template #defaultImage let-attachmentContext=\"attachment\">\n          <img\n            #imgElement\n            class=\"str-chat__message-attachment--img\"\n            data-testclass=\"image\"\n            [src]=\"\n              getImageAttachmentConfiguration(\n                attachmentContext,\n                'single',\n                imgElement\n              ).url\n            \"\n            [alt]=\"attachmentContext?.fallback\"\n            [ngStyle]=\"{\n              height: getImageAttachmentConfiguration(\n                attachmentContext,\n                'single',\n                imgElement\n              ).height,\n              width: getImageAttachmentConfiguration(\n                attachmentContext,\n                'single',\n                imgElement\n              ).width,\n              '--original-height': getImageAttachmentConfiguration(\n                attachmentContext,\n                'single',\n                imgElement\n              ).originalHeight,\n              '--original-width': getImageAttachmentConfiguration(\n                attachmentContext,\n                'single',\n                imgElement\n              ).originalWidth\n            }\"\n            (click)=\"openImageModal([attachmentContext])\"\n            (keyup.enter)=\"openImageModal([attachmentContext])\"\n          />\n        </ng-template>\n      </ng-container>\n      <ng-container *ngIf=\"isGallery(attachment)\">\n        <ng-container\n          *ngTemplateOutlet=\"\n            (customTemplatesService.galleryAttachmentTemplate$ | async) ||\n              defaultGallery;\n            context: getAttachmentContext(attachment)\n          \"\n        />\n        <ng-template #defaultGallery let-attachmentContext=\"attachment\">\n          <div\n            class=\"str-chat__gallery\"\n            data-testid=\"image-gallery\"\n            [class.str-chat__gallery--square]=\"\n              (attachmentContext?.images)!.length > 3\n            \"\n            [class.str-chat__gallery-two-rows]=\"\n              (attachmentContext?.images)!.length > 2\n            \"\n          >\n            <ng-container\n              *ngFor=\"\n                let galleryImage of attachmentContext.images;\n                let index = index;\n                let isLast = last;\n                trackBy: trackByImageUrl\n              \"\n            >\n              <button\n                *ngIf=\"index < 3 || (index === 3 && isLast)\"\n                class=\"str-chat__gallery-image\"\n                data-testclass=\"gallery-image\"\n                [class.str-chat__message-attachment--svg-image]=\"\n                  isSvg(galleryImage)\n                \"\n                (click)=\"openImageModal(attachmentContext.images!, index)\"\n                (keyup.enter)=\"openImageModal(attachmentContext.images!, index)\"\n              >\n                <img\n                  #imgElement\n                  fetchpriority=\"low\"\n                  loading=\"lazy\"\n                  [src]=\"\n                    getImageAttachmentConfiguration(\n                      galleryImage,\n                      'gallery',\n                      imgElement\n                    ).url\n                  \"\n                  [alt]=\"galleryImage.fallback\"\n                  [style.--original-height]=\"\n                    getImageAttachmentConfiguration(\n                      galleryImage,\n                      'gallery',\n                      imgElement\n                    ).originalHeight\n                  \"\n                  [style.--original-width]=\"\n                    getImageAttachmentConfiguration(\n                      galleryImage,\n                      'gallery',\n                      imgElement\n                    ).originalWidth\n                  \"\n                  [ngStyle]=\"{\n                    height: getImageAttachmentConfiguration(\n                      galleryImage,\n                      'gallery',\n                      imgElement\n                    ).height,\n                    width: getImageAttachmentConfiguration(\n                      galleryImage,\n                      'gallery',\n                      imgElement\n                    ).width\n                  }\"\n                />\n              </button>\n              <button\n                *ngIf=\"index === 3 && !isLast\"\n                #element\n                class=\"str-chat__gallery-placeholder\"\n                data-testclass=\"gallery-image\"\n                data-testid=\"more-image-button\"\n                [class.str-chat__message-attachment--svg-image]=\"\n                  isSvg(galleryImage)\n                \"\n                [ngStyle]=\"{\n                  'background-image':\n                    'url(' +\n                    getImageAttachmentConfiguration(\n                      galleryImage,\n                      'gallery',\n                      element\n                    ).url +\n                    ')',\n                  height: getImageAttachmentConfiguration(\n                    galleryImage,\n                    'gallery',\n                    element\n                  ).height,\n                  width: getImageAttachmentConfiguration(\n                    galleryImage,\n                    'gallery',\n                    element\n                  ).width,\n                  '--original-height': getImageAttachmentConfiguration(\n                    galleryImage,\n                    'gallery',\n                    element\n                  ).originalHeight,\n                  '--original-width': getImageAttachmentConfiguration(\n                    galleryImage,\n                    'gallery',\n                    element\n                  ).originalWidth\n                }\"\n                (click)=\"openImageModal(attachmentContext.images!, index)\"\n                (keyup.enter)=\"openImageModal(attachmentContext.images!, index)\"\n              >\n                <p\n                  [innerHTML]=\"\n                    'streamChat.{{ imageCount }} more'\n                      | translate\n                        : { imageCount: attachmentContext!.images!.length - 4 }\n                  \"\n                ></p>\n              </button>\n            </ng-container>\n          </div>\n        </ng-template>\n      </ng-container>\n      <ng-container *ngIf=\"isVideo(attachment)\">\n        <ng-container\n          *ngTemplateOutlet=\"\n            (customTemplatesService.videoAttachmentTemplate$ | async) ||\n              defaultVideo;\n            context: getAttachmentContext(attachment)\n          \"\n        />\n        <ng-template #defaultVideo let-attachmentContext=\"attachment\">\n          <div\n            class=\"str-chat__player-wrapper\"\n            data-testclass=\"video-attachment-parent\"\n            [style.--original-height]=\"\n              getVideoAttachmentConfiguration(attachmentContext, videoElement)\n                .originalHeight\n            \"\n            [style.--original-width]=\"\n              getVideoAttachmentConfiguration(attachmentContext, videoElement)\n                .originalWidth\n            \"\n            [ngStyle]=\"{\n              height: getVideoAttachmentConfiguration(\n                attachmentContext,\n                videoElement\n              ).height,\n              width: getVideoAttachmentConfiguration(\n                attachmentContext,\n                videoElement\n              ).width\n            }\"\n          >\n            <video\n              #videoElement\n              class=\"str-chat__video-angular\"\n              controls\n              data-testclass=\"video-attachment\"\n              [src]=\"\n                getVideoAttachmentConfiguration(attachmentContext, videoElement)\n                  .url\n              \"\n              [poster]=\"\n                getVideoAttachmentConfiguration(attachmentContext, videoElement)\n                  .thumbUrl\n              \"\n            ></video>\n          </div>\n        </ng-template>\n      </ng-container>\n      <ng-container *ngIf=\"isFile(attachment)\">\n        <ng-container\n          *ngTemplateOutlet=\"\n            (customTemplatesService.fileAttachmentTemplate$ | async) ||\n              defaultFile;\n            context: getAttachmentContext(attachment)\n          \"\n        />\n        <ng-template #defaultFile let-attachmentContext=\"attachment\">\n          <div\n            class=\"str-chat__message-attachment-file--item str-chat-angular__message-attachment-file-single\"\n          >\n            <stream-icon-placeholder\n              class=\"str-chat__attachment-type-icon\"\n              icon=\"unspecified-filetype\"\n            />\n            <div class=\"str-chat__message-attachment-file--item-text\">\n              <a\n                class=\"str-chat__message-attachment-file--item-first-row\"\n                data-testclass=\"file-link\"\n                target=\"_blank\"\n                href=\"{{ attachmentContext.asset_url }}\"\n              >\n                <div\n                  data-testclass=\"file-title\"\n                  class=\"str-chat__message-attachment-file--item-name\"\n                >\n                  {{ attachmentContext.title }}\n                </div>\n                <stream-icon-placeholder\n                  class=\"str-chat__message-attachment-download-icon\"\n                  icon=\"download\"\n                />\n              </a>\n              <span\n                *ngIf=\"hasFileSize(attachmentContext)\"\n                class=\"str-chat__message-attachment-file--item-size\"\n                data-testclass=\"size\"\n                >{{ getFileSize(attachmentContext) }}</span\n              >\n            </div>\n          </div>\n        </ng-template>\n      </ng-container>\n      <ng-container *ngIf=\"isVoiceMessage(attachment)\">\n        <ng-container\n          *ngTemplateOutlet=\"\n            (customTemplatesService.voiceRecordingAttachmentTemplate$\n              | async) || defaultRecording;\n            context: getAttachmentContext(attachment)\n          \"\n        />\n        <ng-template #defaultRecording>\n          <stream-voice-recording\n            data-testclass=\"voice-recording\"\n            [attachment]=\"attachment\"\n          />\n        </ng-template>\n      </ng-container>\n      <ng-container\n        *ngIf=\"\n          isCard(attachment) &&\n          getCardAttachmentConfiguration(attachment) as attachmentConfiguration\n        \"\n      >\n        <ng-container\n          *ngTemplateOutlet=\"\n            (customTemplatesService.cardAttachmentTemplate$ | async) ||\n              defaultCard;\n            context: getAttachmentContext(attachment)\n          \"\n        />\n        <ng-template #defaultCard let-attachmentContext=\"attachment\">\n          <div\n            class=\"str-chat__message-attachment-card str-chat__message-attachment-card--{{\n              attachmentContext.type\n            }}\"\n          >\n            <div\n              *ngIf=\"attachmentConfiguration.url\"\n              class=\"str-chat__message-attachment-card--header\"\n            >\n              <a\n                *ngIf=\"attachmentContext.type === 'video'; else cardImage\"\n                [href]=\"\n                  attachmentContext.title_link ||\n                  attachmentContext.og_scrape_url\n                \"\n                target=\"_blank\"\n                data-testclass=\"scraped-video\"\n              >\n                <ng-content *ngTemplateOutlet=\"cardImage\"></ng-content>\n                <div\n                  class=\"str-chat__message-attachment-card--video-play\"\n                ></div>\n                <stream-icon-placeholder icon=\"play\" />\n              </a>\n              <ng-template #cardImage>\n                <img\n                  fetchpriority=\"low\"\n                  loading=\"lazy\"\n                  data-testclass=\"card-img\"\n                  alt=\"{{ attachmentConfiguration.url }}\"\n                  src=\"{{ attachmentConfiguration.url }}\"\n                  [ngStyle]=\"{\n                    height: attachmentConfiguration.height,\n                    width: attachmentConfiguration.width\n                  }\"\n                />\n              </ng-template>\n            </div>\n            <div class=\"str-chat__message-attachment-card--content\">\n              <div class=\"str-chat__message-attachment-card--flex\">\n                <div\n                  *ngIf=\"attachmentContext.title\"\n                  data-testclass=\"card-title\"\n                  class=\"str-chat__message-attachment-card--title\"\n                >\n                  {{ attachmentContext.title }}\n                </div>\n                <div\n                  *ngIf=\"attachmentContext.text\"\n                  class=\"str-chat__message-attachment-card--text\"\n                  data-testclass=\"card-text\"\n                >\n                  {{ attachmentContext.text }}\n                </div>\n                <a\n                  *ngIf=\"\n                    attachmentContext.title_link ||\n                    attachmentContext.og_scrape_url\n                  \"\n                  class=\"str-chat__message-attachment-card--url\"\n                  data-testclass=\"url-link\"\n                  noopener\n                  noreferrer\n                  target=\"_blank\"\n                  href=\"{{\n                    attachmentContext.title_link ||\n                      attachmentContext.og_scrape_url\n                  }}\"\n                >\n                  {{\n                    trimUrl(\n                      attachmentContext.title_link ||\n                        attachmentContext.og_scrape_url\n                    )\n                  }}\n                </a>\n              </div>\n            </div>\n          </div>\n        </ng-template>\n      </ng-container>\n      <ng-container\n        *ngIf=\"\n          !isGalleryType(attachment) &&\n          attachment.actions &&\n          attachment.actions.length > 0\n        \"\n      >\n        <ng-container\n          *ngTemplateOutlet=\"\n            (customTemplatesService.attachmentActionsTemplate$ | async) ||\n              defaultActions;\n            context: getAttachmentContext(attachment)\n          \"\n        />\n        <ng-template #defaultActions let-attachmentContext=\"attachment\">\n          <div class=\"str-chat__message-attachment-actions\">\n            <div class=\"str-chat__message-attachment-actions-form\">\n              <button\n                *ngFor=\"\n                  let action of attachmentContext.actions;\n                  trackBy: trackByActionValue\n                \"\n                data-testclass=\"attachment-action\"\n                class=\"str-chat__message-attachment-actions-button str-chat__message-attachment-actions-button--{{\n                  action.style\n                }}\"\n                (click)=\"sendAction(action)\"\n                (keyup.enter)=\"sendAction(action)\"\n              >\n                {{ action.text }}\n              </button>\n            </div>\n          </div>\n        </ng-template>\n      </ng-container>\n    </div>\n  </ng-container>\n  <ng-container *ngIf=\"customAttachmentsTemplate\">\n    <ng-template\n      *ngTemplateOutlet=\"\n        customAttachmentsTemplate;\n        context: {\n          messageId: messageId!,\n          parentMessageId: parentMessageId,\n          attachments: customAttachments\n        }\n      \"\n    ></ng-template>\n  </ng-container>\n\n  <ng-container *ngIf=\"imagesToView && imagesToView.length > 0\">\n    <ng-container\n      *ngTemplateOutlet=\"\n        (customTemplatesService.modalTemplate$ | async) || defaultModal;\n        context: getModalContext()\n      \"\n    />\n  </ng-container>\n</div>\n\n<ng-template\n  #defaultModal\n  let-isOpen=\"isOpen\"\n  let-isOpenChangeHandler=\"isOpenChangeHandler\"\n  let-content=\"content\"\n>\n  <stream-modal\n    class=\"stream-chat-angular__image-modal-host\"\n    [isOpen]=\"isOpen\"\n    [content]=\"content\"\n    (isOpenChange)=\"isOpenChangeHandler($event)\"\n  />\n</ng-template>\n\n<ng-template #modalContent>\n  <div class=\"stream-chat-angular__image-modal str-chat__image-carousel\">\n    <img\n      #imgElement\n      class=\"stream-chat-angular__image-modal-image str-chat__image-carousel-image\"\n      data-testid=\"modal-image\"\n      [src]=\"\n        getCarouselImageAttachmentConfiguration(\n          imagesToView[imagesToViewCurrentIndex],\n          imgElement\n        ).url\n      \"\n      [style.--original-height]=\"\n        getCarouselImageAttachmentConfiguration(\n          imagesToView[imagesToViewCurrentIndex],\n          imgElement\n        ).originalHeight\n      \"\n      [style.--original-width]=\"\n        getCarouselImageAttachmentConfiguration(\n          imagesToView[imagesToViewCurrentIndex],\n          imgElement\n        ).originalWidth\n      \"\n      [alt]=\"imagesToView[imagesToViewCurrentIndex].fallback\"\n      [ngStyle]=\"{\n        width: getCarouselImageAttachmentConfiguration(\n          imagesToView[imagesToViewCurrentIndex],\n          imgElement\n        ).width,\n        height: getCarouselImageAttachmentConfiguration(\n          imagesToView[imagesToViewCurrentIndex],\n          imgElement\n        ).height\n      }\"\n    />\n    <div>\n      <button\n        class=\"stream-chat-angular__image-modal-stepper str-chat__image-carousel-stepper str-chat__image-carousel-stepper-prev\"\n        data-testid=\"image-modal-prev\"\n        type=\"button\"\n        [ngStyle]=\"{\n          visibility: isImageModalPrevButtonVisible ? 'visible' : 'hidden'\n        }\"\n        (click)=\"stepImages(-1)\"\n        (keyup.enter)=\"stepImages(-1)\"\n      >\n        <stream-icon-placeholder icon=\"arrow-left\" />\n      </button>\n      <button\n        class=\"stream-chat-angular__image-modal-stepper str-chat__image-carousel-stepper str-chat__image-carousel-stepper-next\"\n        type=\"button\"\n        data-testid=\"image-modal-next\"\n        [ngStyle]=\"{\n          visibility: isImageModalNextButtonVisible ? 'visible' : 'hidden'\n        }\"\n        (click)=\"stepImages(1)\"\n        (keyup.enter)=\"stepImages(1)\"\n      >\n        <stream-icon-placeholder icon=\"arrow-right\" />\n      </button>\n    </div>\n  </div>\n</ng-template>\n" }]
+        }], ctorParameters: () => [{ type: CustomTemplatesService }, { type: ChannelService }, { type: AttachmentConfigurationService }, { type: MessageService }], propDecorators: { messageId: [{
                 type: Input
             }], parentMessageId: [{
                 type: Input
@@ -5092,12 +5085,12 @@ class UserListComponent {
     trackByUserId(_, item) {
         return item.id;
     }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: UserListComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: UserListComponent, selector: "stream-user-list", inputs: { users: "users", isLoading: "isLoading", hasMore: "hasMore" }, outputs: { loadMore: "loadMore" }, ngImport: i0, template: "<stream-paginated-list\n  [items]=\"users\"\n  [hasMore]=\"hasMore\"\n  (loadMore)=\"loadMore.emit()\"\n  [isLoading]=\"isLoading\"\n  [trackBy]=\"trackByUserId\"\n>\n  <ng-template let-user=\"item\">\n    <div class=\"str-chat__user-list-item\">\n      <stream-avatar-placeholder\n        data-testclass=\"avatar\"\n        class=\"str-chat__avatar str-chat__avatar--circle\"\n        type=\"user\"\n        location=\"reaction\"\n        [imageUrl]=\"user.image\"\n        [name]=\"user.name\"\n        [user]=\"user\"\n      />\n      <span data-testclass=\"username\" class=\"str-chat__user-item--name\">{{\n        user.name\n      }}</span>\n    </div>\n  </ng-template>\n</stream-paginated-list>\n", dependencies: [{ kind: "component", type: AvatarPlaceholderComponent, selector: "stream-avatar-placeholder", inputs: ["name", "imageUrl", "location", "channel", "user", "type", "initialsType", "showOnlineIndicator"] }, { kind: "component", type: PaginatedListComponent, selector: "stream-paginated-list", inputs: ["items", "isLoading", "hasMore", "trackBy"], outputs: ["loadMore"] }] }); }
 }
-UserListComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: UserListComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-UserListComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.4", type: UserListComponent, selector: "stream-user-list", inputs: { users: "users", isLoading: "isLoading", hasMore: "hasMore" }, outputs: { loadMore: "loadMore" }, ngImport: i0, template: "<stream-paginated-list\n  [items]=\"users\"\n  [hasMore]=\"hasMore\"\n  (loadMore)=\"loadMore.emit()\"\n  [isLoading]=\"isLoading\"\n  [trackBy]=\"trackByUserId\"\n>\n  <ng-template let-user=\"item\">\n    <div class=\"str-chat__user-list-item\">\n      <stream-avatar-placeholder\n        data-testclass=\"avatar\"\n        class=\"str-chat__avatar str-chat__avatar--circle\"\n        type=\"user\"\n        location=\"reaction\"\n        [imageUrl]=\"user.image\"\n        [name]=\"user.name\"\n        [user]=\"user\"\n      ></stream-avatar-placeholder>\n      <span data-testclass=\"username\" class=\"str-chat__user-item--name\">{{\n        user.name\n      }}</span>\n    </div>\n  </ng-template>\n</stream-paginated-list>\n", dependencies: [{ kind: "component", type: AvatarPlaceholderComponent, selector: "stream-avatar-placeholder", inputs: ["name", "imageUrl", "location", "channel", "user", "type", "initialsType", "showOnlineIndicator"] }, { kind: "component", type: PaginatedListComponent, selector: "stream-paginated-list", inputs: ["items", "isLoading", "hasMore", "trackBy"], outputs: ["loadMore"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: UserListComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: UserListComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'stream-user-list', template: "<stream-paginated-list\n  [items]=\"users\"\n  [hasMore]=\"hasMore\"\n  (loadMore)=\"loadMore.emit()\"\n  [isLoading]=\"isLoading\"\n  [trackBy]=\"trackByUserId\"\n>\n  <ng-template let-user=\"item\">\n    <div class=\"str-chat__user-list-item\">\n      <stream-avatar-placeholder\n        data-testclass=\"avatar\"\n        class=\"str-chat__avatar str-chat__avatar--circle\"\n        type=\"user\"\n        location=\"reaction\"\n        [imageUrl]=\"user.image\"\n        [name]=\"user.name\"\n        [user]=\"user\"\n      ></stream-avatar-placeholder>\n      <span data-testclass=\"username\" class=\"str-chat__user-item--name\">{{\n        user.name\n      }}</span>\n    </div>\n  </ng-template>\n</stream-paginated-list>\n" }]
+            args: [{ selector: 'stream-user-list', template: "<stream-paginated-list\n  [items]=\"users\"\n  [hasMore]=\"hasMore\"\n  (loadMore)=\"loadMore.emit()\"\n  [isLoading]=\"isLoading\"\n  [trackBy]=\"trackByUserId\"\n>\n  <ng-template let-user=\"item\">\n    <div class=\"str-chat__user-list-item\">\n      <stream-avatar-placeholder\n        data-testclass=\"avatar\"\n        class=\"str-chat__avatar str-chat__avatar--circle\"\n        type=\"user\"\n        location=\"reaction\"\n        [imageUrl]=\"user.image\"\n        [name]=\"user.name\"\n        [user]=\"user\"\n      />\n      <span data-testclass=\"username\" class=\"str-chat__user-item--name\">{{\n        user.name\n      }}</span>\n    </div>\n  </ng-template>\n</stream-paginated-list>\n" }]
         }], propDecorators: { users: [{
                 type: Input
             }], isLoading: [{
@@ -5248,13 +5241,13 @@ class MessageReactionsComponent {
             return date1.getTime() - date2.getTime();
         });
     }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: MessageReactionsComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: MessageReactionsService }, { token: CustomTemplatesService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: MessageReactionsComponent, selector: "stream-message-reactions", inputs: { messageId: "messageId", messageReactionGroups: "messageReactionGroups", messageReactionCounts: "messageReactionCounts", latestReactions: "latestReactions", ownReactions: "ownReactions" }, viewQueries: [{ propertyName: "selectorContainer", first: true, predicate: ["selectorContainer"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div\n  *ngIf=\"existingReactions.length > 0\"\n  data-testid=\"reaction-list\"\n  class=\"str-chat__reaction-list str-chat__message-reactions-container\"\n  [class.str-chat__reaction-list--reverse]=\"true\"\n>\n  <ul class=\"str-chat__message-reactions\">\n    <li\n      *ngFor=\"\n        let reactionType of existingReactions;\n        trackBy: trackByMessageReaction\n      \"\n      class=\"str-chat__message-reaction\"\n      data-testclass=\"emoji\"\n      [class.str-chat__message-reaction-own]=\"isOwnReaction(reactionType)\"\n      (click)=\"reactionSelected(reactionType)\"\n      (keyup.enter)=\"reactionSelected(reactionType)\"\n    >\n      <span class=\"emoji str-chat__message-reaction-emoji\">\n        {{ getEmojiByReaction(reactionType) }}&nbsp;\n      </span>\n      <span\n        data-testclass=\"reaction-list-reaction-count\"\n        class=\"str-chat__message-reaction-count\"\n      >\n        {{ messageReactionGroups?.[reactionType]?.count ?? 0 }}\n      </span>\n    </li>\n  </ul>\n</div>\n\n<ng-container *ngIf=\"selectedReactionType\">\n  <ng-container\n    *ngTemplateOutlet=\"\n      (customTemplatesService.modalTemplate$ | async) || defaultModal;\n      context: {\n        isOpen: !!selectedReactionType,\n        messageId: messageId,\n        reactionType: selectedReactionType,\n        isOpenChangeHandler: isOpenChange,\n        content: modalContent\n      }\n    \"\n  />\n</ng-container>\n\n<ng-template\n  #defaultModal\n  let-isOpen=\"isOpen\"\n  let-messageId=\"messageId\"\n  let-reactionType=\"reactionType\"\n  let-isOpenChangeHandler=\"isOpenChangeHandler\"\n  let-content=\"content\"\n>\n  <stream-modal\n    class=\"str-chat__message-reactions-details-modal\"\n    [isOpen]=\"isOpen\"\n    [content]=\"content\"\n    (isOpenChange)=\"isOpenChangeHandler($event)\"\n  />\n</ng-template>\n\n<ng-template #modalContent>\n  <div class=\"str-chat__message-reactions-details\">\n    <div class=\"str-chat__message-reactions-details-reaction-types\">\n      <div\n        *ngFor=\"\n          let reactionType of existingReactions;\n          trackBy: trackByMessageReaction\n        \"\n        class=\"str-chat__message-reactions-details-reaction-type\"\n        attr.data-testid=\"reaction-details-selector-{{ reactionType }}\"\n        [class.str-chat__message-reactions-details-reaction-type--selected]=\"\n          reactionType === selectedReactionType\n        \"\n        (click)=\"reactionSelected(reactionType)\"\n        (keyup.enter)=\"reactionSelected(reactionType)\"\n      >\n        <span class=\"emoji str-chat__message-reaction-emoji\">\n          {{ getEmojiByReaction(reactionType) }}&nbsp;\n        </span>\n        <span class=\"str-chat__message-reaction-count\">\n          {{ messageReactionGroups?.[reactionType]?.count ?? 0 }}\n        </span>\n      </div>\n    </div>\n    <div\n      class=\"emoji str-chat__message-reaction-emoji str-chat__message-reaction-emoji-big\"\n    >\n      {{ getEmojiByReaction(selectedReactionType!) }}\n    </div>\n    <div\n      data-testid=\"all-reacting-users\"\n      class=\"str-chat__message-reactions-details-reacting-users\"\n    >\n      <ng-container\n        *ngFor=\"\n          let reactionType of existingReactions;\n          trackBy: trackByMessageReaction\n        \"\n      >\n        <stream-user-list\n          attr.data-testid=\"{{ reactionType }}-user-list\"\n          [style.display]=\"\n            selectedReactionType === reactionType ? 'block' : 'none'\n          \"\n          [users]=\"usersByReactions[reactionType]?.users || []\"\n          [isLoading]=\"isLoading\"\n          [hasMore]=\"!!usersByReactions[reactionType]?.next || false\"\n          (loadMore)=\"loadNextPageOfReactions()\"\n        />\n      </ng-container>\n    </div>\n  </div>\n</ng-template>\n", dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: ModalComponent, selector: "stream-modal", inputs: ["isOpen", "content"], outputs: ["isOpenChange"] }, { kind: "component", type: UserListComponent, selector: "stream-user-list", inputs: ["users", "isLoading", "hasMore"], outputs: ["loadMore"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }] }); }
 }
-MessageReactionsComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: MessageReactionsComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: MessageReactionsService }, { token: CustomTemplatesService }], target: i0.ɵɵFactoryTarget.Component });
-MessageReactionsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.4", type: MessageReactionsComponent, selector: "stream-message-reactions", inputs: { messageId: "messageId", messageReactionGroups: "messageReactionGroups", messageReactionCounts: "messageReactionCounts", latestReactions: "latestReactions", ownReactions: "ownReactions" }, viewQueries: [{ propertyName: "selectorContainer", first: true, predicate: ["selectorContainer"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div\n  *ngIf=\"existingReactions.length > 0\"\n  data-testid=\"reaction-list\"\n  class=\"str-chat__reaction-list str-chat__message-reactions-container\"\n  [class.str-chat__reaction-list--reverse]=\"true\"\n>\n  <ul class=\"str-chat__message-reactions\">\n    <li\n      *ngFor=\"\n        let reactionType of existingReactions;\n        trackBy: trackByMessageReaction\n      \"\n      class=\"str-chat__message-reaction\"\n      data-testclass=\"emoji\"\n      [class.str-chat__message-reaction-own]=\"isOwnReaction(reactionType)\"\n      (click)=\"reactionSelected(reactionType)\"\n      (keyup.enter)=\"reactionSelected(reactionType)\"\n    >\n      <span class=\"emoji str-chat__message-reaction-emoji\">\n        {{ getEmojiByReaction(reactionType) }}&nbsp;\n      </span>\n      <span\n        data-testclass=\"reaction-list-reaction-count\"\n        class=\"str-chat__message-reaction-count\"\n      >\n        {{ messageReactionGroups?.[reactionType]?.count ?? 0 }}\n      </span>\n    </li>\n  </ul>\n</div>\n\n<ng-container *ngIf=\"selectedReactionType\">\n  <ng-container\n    *ngTemplateOutlet=\"\n      (customTemplatesService.modalTemplate$ | async) || defaultModal;\n      context: {\n        isOpen: !!selectedReactionType,\n        messageId: messageId,\n        reactionType: selectedReactionType,\n        isOpenChangeHandler: isOpenChange,\n        content: modalContent\n      }\n    \"\n  ></ng-container>\n</ng-container>\n\n<ng-template\n  #defaultModal\n  let-isOpen=\"isOpen\"\n  let-messageId=\"messageId\"\n  let-reactionType=\"reactionType\"\n  let-isOpenChangeHandler=\"isOpenChangeHandler\"\n  let-content=\"content\"\n>\n  <stream-modal\n    class=\"str-chat__message-reactions-details-modal\"\n    [isOpen]=\"isOpen\"\n    [content]=\"content\"\n    (isOpenChange)=\"isOpenChangeHandler($event)\"\n  >\n  </stream-modal>\n</ng-template>\n\n<ng-template #modalContent>\n  <div class=\"str-chat__message-reactions-details\">\n    <div class=\"str-chat__message-reactions-details-reaction-types\">\n      <div\n        *ngFor=\"\n          let reactionType of existingReactions;\n          trackBy: trackByMessageReaction\n        \"\n        class=\"str-chat__message-reactions-details-reaction-type\"\n        attr.data-testid=\"reaction-details-selector-{{ reactionType }}\"\n        [class.str-chat__message-reactions-details-reaction-type--selected]=\"\n          reactionType === selectedReactionType\n        \"\n        (click)=\"reactionSelected(reactionType)\"\n        (keyup.enter)=\"reactionSelected(reactionType)\"\n      >\n        <span class=\"emoji str-chat__message-reaction-emoji\">\n          {{ getEmojiByReaction(reactionType) }}&nbsp;\n        </span>\n        <span class=\"str-chat__message-reaction-count\">\n          {{ messageReactionGroups?.[reactionType]?.count ?? 0 }}\n        </span>\n      </div>\n    </div>\n    <div\n      class=\"emoji str-chat__message-reaction-emoji str-chat__message-reaction-emoji-big\"\n    >\n      {{ getEmojiByReaction(selectedReactionType!) }}\n    </div>\n    <div\n      data-testid=\"all-reacting-users\"\n      class=\"str-chat__message-reactions-details-reacting-users\"\n    >\n      <ng-container\n        *ngFor=\"\n          let reactionType of existingReactions;\n          trackBy: trackByMessageReaction\n        \"\n      >\n        <stream-user-list\n          attr.data-testid=\"{{ reactionType }}-user-list\"\n          [style.display]=\"\n            selectedReactionType === reactionType ? 'block' : 'none'\n          \"\n          [users]=\"usersByReactions[reactionType]?.users || []\"\n          [isLoading]=\"isLoading\"\n          [hasMore]=\"!!usersByReactions[reactionType]?.next || false\"\n          (loadMore)=\"loadNextPageOfReactions()\"\n        ></stream-user-list>\n      </ng-container>\n    </div>\n  </div>\n</ng-template>\n", dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: ModalComponent, selector: "stream-modal", inputs: ["isOpen", "content"], outputs: ["isOpenChange"] }, { kind: "component", type: UserListComponent, selector: "stream-user-list", inputs: ["users", "isLoading", "hasMore"], outputs: ["loadMore"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: MessageReactionsComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: MessageReactionsComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'stream-message-reactions', template: "<div\n  *ngIf=\"existingReactions.length > 0\"\n  data-testid=\"reaction-list\"\n  class=\"str-chat__reaction-list str-chat__message-reactions-container\"\n  [class.str-chat__reaction-list--reverse]=\"true\"\n>\n  <ul class=\"str-chat__message-reactions\">\n    <li\n      *ngFor=\"\n        let reactionType of existingReactions;\n        trackBy: trackByMessageReaction\n      \"\n      class=\"str-chat__message-reaction\"\n      data-testclass=\"emoji\"\n      [class.str-chat__message-reaction-own]=\"isOwnReaction(reactionType)\"\n      (click)=\"reactionSelected(reactionType)\"\n      (keyup.enter)=\"reactionSelected(reactionType)\"\n    >\n      <span class=\"emoji str-chat__message-reaction-emoji\">\n        {{ getEmojiByReaction(reactionType) }}&nbsp;\n      </span>\n      <span\n        data-testclass=\"reaction-list-reaction-count\"\n        class=\"str-chat__message-reaction-count\"\n      >\n        {{ messageReactionGroups?.[reactionType]?.count ?? 0 }}\n      </span>\n    </li>\n  </ul>\n</div>\n\n<ng-container *ngIf=\"selectedReactionType\">\n  <ng-container\n    *ngTemplateOutlet=\"\n      (customTemplatesService.modalTemplate$ | async) || defaultModal;\n      context: {\n        isOpen: !!selectedReactionType,\n        messageId: messageId,\n        reactionType: selectedReactionType,\n        isOpenChangeHandler: isOpenChange,\n        content: modalContent\n      }\n    \"\n  ></ng-container>\n</ng-container>\n\n<ng-template\n  #defaultModal\n  let-isOpen=\"isOpen\"\n  let-messageId=\"messageId\"\n  let-reactionType=\"reactionType\"\n  let-isOpenChangeHandler=\"isOpenChangeHandler\"\n  let-content=\"content\"\n>\n  <stream-modal\n    class=\"str-chat__message-reactions-details-modal\"\n    [isOpen]=\"isOpen\"\n    [content]=\"content\"\n    (isOpenChange)=\"isOpenChangeHandler($event)\"\n  >\n  </stream-modal>\n</ng-template>\n\n<ng-template #modalContent>\n  <div class=\"str-chat__message-reactions-details\">\n    <div class=\"str-chat__message-reactions-details-reaction-types\">\n      <div\n        *ngFor=\"\n          let reactionType of existingReactions;\n          trackBy: trackByMessageReaction\n        \"\n        class=\"str-chat__message-reactions-details-reaction-type\"\n        attr.data-testid=\"reaction-details-selector-{{ reactionType }}\"\n        [class.str-chat__message-reactions-details-reaction-type--selected]=\"\n          reactionType === selectedReactionType\n        \"\n        (click)=\"reactionSelected(reactionType)\"\n        (keyup.enter)=\"reactionSelected(reactionType)\"\n      >\n        <span class=\"emoji str-chat__message-reaction-emoji\">\n          {{ getEmojiByReaction(reactionType) }}&nbsp;\n        </span>\n        <span class=\"str-chat__message-reaction-count\">\n          {{ messageReactionGroups?.[reactionType]?.count ?? 0 }}\n        </span>\n      </div>\n    </div>\n    <div\n      class=\"emoji str-chat__message-reaction-emoji str-chat__message-reaction-emoji-big\"\n    >\n      {{ getEmojiByReaction(selectedReactionType!) }}\n    </div>\n    <div\n      data-testid=\"all-reacting-users\"\n      class=\"str-chat__message-reactions-details-reacting-users\"\n    >\n      <ng-container\n        *ngFor=\"\n          let reactionType of existingReactions;\n          trackBy: trackByMessageReaction\n        \"\n      >\n        <stream-user-list\n          attr.data-testid=\"{{ reactionType }}-user-list\"\n          [style.display]=\"\n            selectedReactionType === reactionType ? 'block' : 'none'\n          \"\n          [users]=\"usersByReactions[reactionType]?.users || []\"\n          [isLoading]=\"isLoading\"\n          [hasMore]=\"!!usersByReactions[reactionType]?.next || false\"\n          (loadMore)=\"loadNextPageOfReactions()\"\n        ></stream-user-list>\n      </ng-container>\n    </div>\n  </div>\n</ng-template>\n" }]
-        }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }, { type: MessageReactionsService }, { type: CustomTemplatesService }]; }, propDecorators: { messageId: [{
+            args: [{ selector: 'stream-message-reactions', template: "<div\n  *ngIf=\"existingReactions.length > 0\"\n  data-testid=\"reaction-list\"\n  class=\"str-chat__reaction-list str-chat__message-reactions-container\"\n  [class.str-chat__reaction-list--reverse]=\"true\"\n>\n  <ul class=\"str-chat__message-reactions\">\n    <li\n      *ngFor=\"\n        let reactionType of existingReactions;\n        trackBy: trackByMessageReaction\n      \"\n      class=\"str-chat__message-reaction\"\n      data-testclass=\"emoji\"\n      [class.str-chat__message-reaction-own]=\"isOwnReaction(reactionType)\"\n      (click)=\"reactionSelected(reactionType)\"\n      (keyup.enter)=\"reactionSelected(reactionType)\"\n    >\n      <span class=\"emoji str-chat__message-reaction-emoji\">\n        {{ getEmojiByReaction(reactionType) }}&nbsp;\n      </span>\n      <span\n        data-testclass=\"reaction-list-reaction-count\"\n        class=\"str-chat__message-reaction-count\"\n      >\n        {{ messageReactionGroups?.[reactionType]?.count ?? 0 }}\n      </span>\n    </li>\n  </ul>\n</div>\n\n<ng-container *ngIf=\"selectedReactionType\">\n  <ng-container\n    *ngTemplateOutlet=\"\n      (customTemplatesService.modalTemplate$ | async) || defaultModal;\n      context: {\n        isOpen: !!selectedReactionType,\n        messageId: messageId,\n        reactionType: selectedReactionType,\n        isOpenChangeHandler: isOpenChange,\n        content: modalContent\n      }\n    \"\n  />\n</ng-container>\n\n<ng-template\n  #defaultModal\n  let-isOpen=\"isOpen\"\n  let-messageId=\"messageId\"\n  let-reactionType=\"reactionType\"\n  let-isOpenChangeHandler=\"isOpenChangeHandler\"\n  let-content=\"content\"\n>\n  <stream-modal\n    class=\"str-chat__message-reactions-details-modal\"\n    [isOpen]=\"isOpen\"\n    [content]=\"content\"\n    (isOpenChange)=\"isOpenChangeHandler($event)\"\n  />\n</ng-template>\n\n<ng-template #modalContent>\n  <div class=\"str-chat__message-reactions-details\">\n    <div class=\"str-chat__message-reactions-details-reaction-types\">\n      <div\n        *ngFor=\"\n          let reactionType of existingReactions;\n          trackBy: trackByMessageReaction\n        \"\n        class=\"str-chat__message-reactions-details-reaction-type\"\n        attr.data-testid=\"reaction-details-selector-{{ reactionType }}\"\n        [class.str-chat__message-reactions-details-reaction-type--selected]=\"\n          reactionType === selectedReactionType\n        \"\n        (click)=\"reactionSelected(reactionType)\"\n        (keyup.enter)=\"reactionSelected(reactionType)\"\n      >\n        <span class=\"emoji str-chat__message-reaction-emoji\">\n          {{ getEmojiByReaction(reactionType) }}&nbsp;\n        </span>\n        <span class=\"str-chat__message-reaction-count\">\n          {{ messageReactionGroups?.[reactionType]?.count ?? 0 }}\n        </span>\n      </div>\n    </div>\n    <div\n      class=\"emoji str-chat__message-reaction-emoji str-chat__message-reaction-emoji-big\"\n    >\n      {{ getEmojiByReaction(selectedReactionType!) }}\n    </div>\n    <div\n      data-testid=\"all-reacting-users\"\n      class=\"str-chat__message-reactions-details-reacting-users\"\n    >\n      <ng-container\n        *ngFor=\"\n          let reactionType of existingReactions;\n          trackBy: trackByMessageReaction\n        \"\n      >\n        <stream-user-list\n          attr.data-testid=\"{{ reactionType }}-user-list\"\n          [style.display]=\"\n            selectedReactionType === reactionType ? 'block' : 'none'\n          \"\n          [users]=\"usersByReactions[reactionType]?.users || []\"\n          [isLoading]=\"isLoading\"\n          [hasMore]=\"!!usersByReactions[reactionType]?.next || false\"\n          (loadMore)=\"loadNextPageOfReactions()\"\n        />\n      </ng-container>\n    </div>\n  </div>\n</ng-template>\n" }]
+        }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }, { type: MessageReactionsService }, { type: CustomTemplatesService }], propDecorators: { messageId: [{
                 type: Input
             }], messageReactionGroups: [{
                 type: Input
@@ -5392,13 +5385,13 @@ class MessageTextComponent {
         });
         return content;
     }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: MessageTextComponent, deps: [{ token: MessageService }, { token: CustomTemplatesService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: MessageTextComponent, selector: "stream-message-text", inputs: { message: "message", isQuoted: "isQuoted", shouldTranslate: "shouldTranslate" }, usesOnChanges: true, ngImport: i0, template: "<p\n  [class.str-chat__quoted-message-text-value]=\"isQuoted\"\n  [class.str-chat__message-text-value]=\"!isQuoted\"\n  *ngIf=\"message?.text\"\n  data-testid=\"text\"\n>\n  <ng-container *ngIf=\"messageTextParts; else defaultContent\">\n    <!-- eslint-disable-next-line @angular-eslint/template/use-track-by-function -->\n    <ng-container *ngFor=\"let part of messageTextParts\">\n      <span\n        *ngIf=\"part.type === 'text'; else mention\"\n        [innerHTML]=\"part.content\"\n      ></span>\n      <ng-template #mention>\n        <ng-template #defaultMention let-content=\"content\">\n          <span class=\"str-chat__message-mention\">{{ content }}</span>\n        </ng-template>\n        <ng-container\n          *ngTemplateOutlet=\"\n            (customTemplatesService.mentionTemplate$ | async) || defaultMention;\n            context: getMentionContext(part)\n          \"\n        />\n      </ng-template>\n    </ng-container>\n  </ng-container>\n  <ng-template #defaultContent>\n    <ng-container *ngIf=\"displayAs === 'text'; else asHTML\">\n      {{ messageText || \"\" }}\n    </ng-container>\n    <ng-template #asHTML\n      ><span data-testid=\"html-content\" [innerHTML]=\"messageText\"></span\n    ></ng-template>\n  </ng-template>\n</p>\n", dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }] }); }
 }
-MessageTextComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: MessageTextComponent, deps: [{ token: MessageService }, { token: CustomTemplatesService }], target: i0.ɵɵFactoryTarget.Component });
-MessageTextComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.4", type: MessageTextComponent, selector: "stream-message-text", inputs: { message: "message", isQuoted: "isQuoted", shouldTranslate: "shouldTranslate" }, usesOnChanges: true, ngImport: i0, template: "<p\n  [class.str-chat__quoted-message-text-value]=\"isQuoted\"\n  [class.str-chat__message-text-value]=\"!isQuoted\"\n  *ngIf=\"message?.text\"\n  data-testid=\"text\"\n>\n  <ng-container *ngIf=\"messageTextParts; else defaultContent\">\n    <!-- eslint-disable-next-line @angular-eslint/template/use-track-by-function -->\n    <ng-container *ngFor=\"let part of messageTextParts\">\n      <span\n        *ngIf=\"part.type === 'text'; else mention\"\n        [innerHTML]=\"part.content\"\n      ></span>\n      <ng-template #mention>\n        <ng-template #defaultMention let-content=\"content\">\n          <span class=\"str-chat__message-mention\">{{ content }}</span>\n        </ng-template>\n        <ng-container\n          *ngTemplateOutlet=\"\n            (customTemplatesService.mentionTemplate$ | async) || defaultMention;\n            context: getMentionContext(part)\n          \"\n        ></ng-container>\n      </ng-template>\n    </ng-container>\n  </ng-container>\n  <ng-template #defaultContent>\n    <ng-container *ngIf=\"displayAs === 'text'; else asHTML\">\n      {{ messageText || \"\" }}\n    </ng-container>\n    <ng-template #asHTML\n      ><span data-testid=\"html-content\" [innerHTML]=\"messageText\"></span\n    ></ng-template>\n  </ng-template>\n</p>\n", dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: MessageTextComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: MessageTextComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'stream-message-text', template: "<p\n  [class.str-chat__quoted-message-text-value]=\"isQuoted\"\n  [class.str-chat__message-text-value]=\"!isQuoted\"\n  *ngIf=\"message?.text\"\n  data-testid=\"text\"\n>\n  <ng-container *ngIf=\"messageTextParts; else defaultContent\">\n    <!-- eslint-disable-next-line @angular-eslint/template/use-track-by-function -->\n    <ng-container *ngFor=\"let part of messageTextParts\">\n      <span\n        *ngIf=\"part.type === 'text'; else mention\"\n        [innerHTML]=\"part.content\"\n      ></span>\n      <ng-template #mention>\n        <ng-template #defaultMention let-content=\"content\">\n          <span class=\"str-chat__message-mention\">{{ content }}</span>\n        </ng-template>\n        <ng-container\n          *ngTemplateOutlet=\"\n            (customTemplatesService.mentionTemplate$ | async) || defaultMention;\n            context: getMentionContext(part)\n          \"\n        ></ng-container>\n      </ng-template>\n    </ng-container>\n  </ng-container>\n  <ng-template #defaultContent>\n    <ng-container *ngIf=\"displayAs === 'text'; else asHTML\">\n      {{ messageText || \"\" }}\n    </ng-container>\n    <ng-template #asHTML\n      ><span data-testid=\"html-content\" [innerHTML]=\"messageText\"></span\n    ></ng-template>\n  </ng-template>\n</p>\n" }]
-        }], ctorParameters: function () { return [{ type: MessageService }, { type: CustomTemplatesService }]; }, propDecorators: { message: [{
+            args: [{ selector: 'stream-message-text', template: "<p\n  [class.str-chat__quoted-message-text-value]=\"isQuoted\"\n  [class.str-chat__message-text-value]=\"!isQuoted\"\n  *ngIf=\"message?.text\"\n  data-testid=\"text\"\n>\n  <ng-container *ngIf=\"messageTextParts; else defaultContent\">\n    <!-- eslint-disable-next-line @angular-eslint/template/use-track-by-function -->\n    <ng-container *ngFor=\"let part of messageTextParts\">\n      <span\n        *ngIf=\"part.type === 'text'; else mention\"\n        [innerHTML]=\"part.content\"\n      ></span>\n      <ng-template #mention>\n        <ng-template #defaultMention let-content=\"content\">\n          <span class=\"str-chat__message-mention\">{{ content }}</span>\n        </ng-template>\n        <ng-container\n          *ngTemplateOutlet=\"\n            (customTemplatesService.mentionTemplate$ | async) || defaultMention;\n            context: getMentionContext(part)\n          \"\n        />\n      </ng-template>\n    </ng-container>\n  </ng-container>\n  <ng-template #defaultContent>\n    <ng-container *ngIf=\"displayAs === 'text'; else asHTML\">\n      {{ messageText || \"\" }}\n    </ng-container>\n    <ng-template #asHTML\n      ><span data-testid=\"html-content\" [innerHTML]=\"messageText\"></span\n    ></ng-template>\n  </ng-template>\n</p>\n" }]
+        }], ctorParameters: () => [{ type: MessageService }, { type: CustomTemplatesService }], propDecorators: { message: [{
                 type: Input
             }], isQuoted: [{
                 type: Input
@@ -5416,10 +5409,10 @@ class MessageBlockedComponent {
          */
         this.isMyMessage = false;
     }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: MessageBlockedComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: MessageBlockedComponent, selector: "stream-message-blocked", inputs: { message: "message", isMyMessage: "isMyMessage" }, ngImport: i0, template: "<div\n  class=\"str-chat__message str-chat__message-simple str-chat__message--blocked\"\n  [class.str-chat__message--me]=\"isMyMessage\"\n  [class.str-chat__message-simple--me]=\"isMyMessage\"\n  [class.str-chat__message--other]=\"!isMyMessage\"\n  [attr.data-testid]=\"'message-blocked-component'\"\n>\n  <div class=\"str-chat__message--blocked-inner\">\n    {{ \"streamChat.Message was blocked by moderation policies\" | translate }}\n  </div>\n</div>\n", dependencies: [{ kind: "pipe", type: i6.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-MessageBlockedComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: MessageBlockedComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-MessageBlockedComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.4", type: MessageBlockedComponent, selector: "stream-message-blocked", inputs: { message: "message", isMyMessage: "isMyMessage" }, ngImport: i0, template: "<div\n  class=\"str-chat__message str-chat__message-simple str-chat__message--blocked\"\n  [class.str-chat__message--me]=\"isMyMessage\"\n  [class.str-chat__message-simple--me]=\"isMyMessage\"\n  [class.str-chat__message--other]=\"!isMyMessage\"\n  [attr.data-testid]=\"'message-blocked-component'\"\n>\n  <div class=\"str-chat__message--blocked-inner\">\n    {{ \"streamChat.Message was blocked by moderation policies\" | translate }}\n  </div>\n</div>\n", dependencies: [{ kind: "pipe", type: i6.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: MessageBlockedComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: MessageBlockedComponent, decorators: [{
             type: Component,
             args: [{ selector: 'stream-message-blocked', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div\n  class=\"str-chat__message str-chat__message-simple str-chat__message--blocked\"\n  [class.str-chat__message--me]=\"isMyMessage\"\n  [class.str-chat__message-simple--me]=\"isMyMessage\"\n  [class.str-chat__message--other]=\"!isMyMessage\"\n  [attr.data-testid]=\"'message-blocked-component'\"\n>\n  <div class=\"str-chat__message--blocked-inner\">\n    {{ \"streamChat.Message was blocked by moderation policies\" | translate }}\n  </div>\n</div>\n" }]
         }], propDecorators: { message: [{
@@ -5876,13 +5869,13 @@ class MessageComponent {
             this.showMessageMenuTimeout = undefined;
         }
     }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: MessageComponent, deps: [{ token: ChatClientService }, { token: ChannelService }, { token: CustomTemplatesService }, { token: i0.ChangeDetectorRef }, { token: DateParserService }, { token: MessageActionsService }, { token: i0.NgZone }, { token: i6.TranslateService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: MessageComponent, selector: "stream-message", inputs: { message: "message", enabledMessageActions: "enabledMessageActions", isLastSentMessage: "isLastSentMessage", mode: "mode", isHighlighted: "isHighlighted", scroll$: "scroll$" }, viewQueries: [{ propertyName: "messageMenuTrigger", first: true, predicate: ["messageMenuTrigger"], descendants: true }, { propertyName: "messageMenuFloat", first: true, predicate: ["messageMenuFloat"], descendants: true }, { propertyName: "messageTextElement", first: true, predicate: ["messageTextElement"], descendants: true }, { propertyName: "messageBubble", first: true, predicate: ["messageBubble"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<ng-container\n  *ngIf=\"\n    message?.type === 'error' &&\n      (message?.moderation_details?.action ===\n        'MESSAGE_RESPONSE_ACTION_REMOVE' ||\n        message?.moderation?.action === 'remove');\n    else notBlockedMessage\n  \"\n>\n  <ng-container\n    *ngTemplateOutlet=\"\n      (customTemplatesService.messageBlockedTemplate$ | async) ||\n        defaultBlockedMessage;\n      context: getMessageBlockedContext()\n    \"\n  />\n  <ng-template #defaultBlockedMessage>\n    <stream-message-blocked\n      [message]=\"message\"\n      [isMyMessage]=\"isSentByCurrentUser\"\n    />\n  </ng-template>\n</ng-container>\n<ng-template #notBlockedMessage>\n  <div\n    data-testid=\"message-container\"\n    class=\"str-chat__message-simple str-chat__message str-chat__message--{{\n      message?.type\n    }} str-chat__message--{{ message?.status }} {{\n      message?.text ? 'str-chat__message--has-text' : 'has-no-text'\n    }} str-chat__message-menu-{{ areMessageOptionsOpen ? 'opened' : 'closed' }}\"\n    [class.str-chat__message--me]=\"isSentByCurrentUser\"\n    [class.str-chat__message--other]=\"!isSentByCurrentUser\"\n    [class.str-chat__message-simple--me]=\"isSentByCurrentUser\"\n    [class.str-chat__message--has-attachment]=\"hasAttachment\"\n    [class.str-chat__message--with-reactions]=\"hasReactions\"\n    [class.str-chat__message--highlighted]=\"isHighlighted\"\n    [class.str-chat__message-with-thread-link]=\"shouldDisplayThreadLink\"\n    [class.str-chat__message-send-can-be-retried]=\"\n      (message?.status === 'failed' && message?.errorStatusCode !== 403) ||\n      (message?.type === 'error' && message?.moderation_details)\n    \"\n    [class.str-chat__message-with-touch-support]=\"hasTouchSupport\"\n    [class.str-chat__message-without-touch-support]=\"!hasTouchSupport\"\n  >\n    <ng-container *ngIf=\"!message?.deleted_at; else deletedMessage\">\n      <ng-container *ngIf=\"message?.type !== 'system'; else systemMessage\">\n        <stream-avatar-placeholder\n          data-testid=\"avatar\"\n          class=\"str-chat-angular__avatar-host str-chat__message-sender-avatar\"\n          type=\"user\"\n          location=\"message-sender\"\n          [imageUrl]=\"message?.user?.image\"\n          [name]=\"message?.user?.name || message?.user?.id\"\n          [user]=\"message?.user || undefined\"\n        />\n        <div class=\"str-chat__message-inner\">\n          <div\n            *ngIf=\"!hasTouchSupport && areOptionsVisible\"\n            class=\"str-chat__message-simple__actions str-chat__message-options\"\n            data-testid=\"message-options\"\n            [class.str-chat__message-actions-open]=\"areMessageOptionsOpen\"\n          >\n            <div\n              #messageActionsToggle\n              data-testid=\"message-actions-container\"\n              class=\"str-chat__message-actions-container str-chat__message-simple__actions__action str-chat__message-simple__actions__action--options\"\n              [floatUiLoose]=\"messageMenuFloat\"\n              [looseTrigger]=\"\n                messageActionsService.customActionClickHandler\n                  ? 'none'\n                  : 'click'\n              \"\n              [hideOnScroll]=\"false\"\n              [hideOnClickOutside]=\"true\"\n              [hideOnMouseLeave]=\"false\"\n              [disableAnimation]=\"false\"\n              [preventOverflow]=\"true\"\n              [positionFixed]=\"true\"\n              (onSHown)=\"areMessageOptionsOpen = true\"\n              (onHidden)=\"areMessageOptionsOpen = false\"\n            >\n              <div\n                *ngIf=\"visibleMessageActionsCount > 0\"\n                class=\"str-chat__message-actions-box-button\"\n                data-testid=\"message-options-button\"\n                (click)=\"messageOptionsButtonClicked()\"\n                (keyup.enter)=\"messageOptionsButtonClicked()\"\n              >\n                <stream-icon-placeholder\n                  icon=\"action\"\n                  class=\"str-chat__message-action-icon\"\n                />\n              </div>\n            </div>\n          </div>\n          <ng-container\n            *ngIf=\"\n              customTemplatesService.customMessageMetadataInsideBubbleTemplate$\n                | async\n            \"\n          >\n            <ng-template\n              *ngTemplateOutlet=\"\n                (customTemplatesService.customMessageMetadataInsideBubbleTemplate$\n                  | async)!;\n                context: { message: message }\n              \"\n            ></ng-template>\n          </ng-container>\n          <div class=\"str-chat__message-reactions-host\">\n            <ng-template\n              #defaultMessageReactions\n              let-messageReactionCounts=\"messageReactionCounts\"\n              let-latestReactions=\"latestReactions\"\n              let-messageId=\"messageId\"\n              let-ownReactions=\"ownReactions\"\n              let-messageReactionGroups=\"messageReactionGroups\"\n            >\n              <stream-message-reactions\n                [messageReactionCounts]=\"messageReactionCounts\"\n                [latestReactions]=\"latestReactions\"\n                [messageId]=\"messageId\"\n                [ownReactions]=\"ownReactions\"\n                [messageReactionGroups]=\"messageReactionGroups\"\n              />\n            </ng-template>\n            <ng-container\n              *ngTemplateOutlet=\"\n                (customTemplatesService.messageReactionsTemplate$ | async) ||\n                  defaultMessageReactions;\n                context: getMessageReactionsContext()\n              \"\n            />\n          </div>\n          <float-ui-content #messageMenuFloat>\n            <ng-template\n              #defaultMessageActionsBox\n              let-isMine=\"isMine\"\n              let-messageInput=\"message\"\n              let-enabledActions=\"enabledActions\"\n              let-messageTextHtmlElement=\"messageTextHtmlElement\"\n            >\n              <stream-message-actions-box\n                [isMine]=\"isMine\"\n                [message]=\"messageInput\"\n                [enabledActions]=\"enabledActions\"\n                [messageTextHtmlElement]=\"messageTextHtmlElement\"\n              />\n            </ng-template>\n            <ng-container>\n              <div\n                (click)=\"messageActionsBoxClicked(messageMenuFloat)\"\n                (keyup.enter)=\"messageActionsBoxClicked(messageMenuFloat)\"\n              >\n                <ng-container\n                  *ngTemplateOutlet=\"\n                    (customTemplatesService.messageActionsBoxTemplate$\n                      | async) || defaultMessageActionsBox;\n                    context: getMessageActionsBoxContext()\n                  \"\n                />\n              </div>\n            </ng-container>\n          </float-ui-content>\n          <div\n            class=\"str-chat__message-bubble str-chat-angular__message-bubble\"\n            [class.str-chat-angular__message-bubble--attachment-modal-open]=\"\n              nestedModalState === 'opened'\n            \"\n            data-testid=\"message-bubble\"\n            [floatUiLoose]=\"messageMenuFloat\"\n            #messageMenuTrigger=\"floatUiLoose\"\n            #messageBubble\n            looseTrigger=\"none\"\n            [hideOnScroll]=\"false\"\n            [hideOnClickOutside]=\"true\"\n            [hideOnMouseLeave]=\"false\"\n            [disableAnimation]=\"true\"\n            [preventOverflow]=\"true\"\n            (onShown)=\"areMessageOptionsOpen = true\"\n            (onHidden)=\"areMessageOptionsOpen = false\"\n            [positionFixed]=\"true\"\n          >\n            <ng-container *ngIf=\"hasAttachment && !message?.quoted_message\">\n              <div class=\"str-chat__attachments-container\">\n                <ng-container *ngTemplateOutlet=\"attachmentsTemplate\" />\n              </div>\n            </ng-container>\n            <ng-container\n              *ngIf=\"\n                message?.poll_id &&\n                (customTemplatesService.pollTemplate$ | async)\n              \"\n            >\n              <ng-container\n                *ngTemplateOutlet=\"\n                  (customTemplatesService.pollTemplate$ | async)!;\n                  context: {\n                    pollId: message!.poll_id!,\n                    messageId: message!.id,\n                    isQuote: false\n                  }\n                \"\n              />\n            </ng-container>\n            <div\n              *ngIf=\"\n                message?.text || (message?.quoted_message && hasAttachment)\n              \"\n              class=\"str-chat__message-text\"\n              tabindex=\"0\"\n              [class.str-chat__message-text--pointer-cursor]=\"\n                (message?.status === 'failed' &&\n                  message?.errorStatusCode !== 403) ||\n                (this.message?.type === 'error' &&\n                  this.message?.moderation_details) ||\n                message?.message_text_updated_at\n              \"\n              (click)=\"messageClicked()\"\n              (keyup.enter)=\"messageClicked()\"\n            >\n              <div\n                data-testid=\"inner-message\"\n                class=\"str-chat__message-text-inner str-chat__message-simple-text-inner\"\n                [class.str-chat__message-light-text-inner--has-attachment]=\"\n                  hasAttachment\n                \"\n              >\n                <ng-container *ngTemplateOutlet=\"quotedMessage\" />\n                <ng-container *ngIf=\"hasAttachment && message?.quoted_message\">\n                  <ng-container *ngTemplateOutlet=\"attachmentsTemplate\" />\n                </ng-container>\n                <div\n                  *ngIf=\"message?.type === 'error'\"\n                  data-testid=\"client-error-message\"\n                  class=\"str-chat__simple-message--error-message str-chat__message--error-message\"\n                >\n                  <ng-container *ngIf=\"!message?.moderation_details\">{{\n                    \"streamChat.Error \u00B7 Unsent\" | translate\n                  }}</ng-container>\n                </div>\n                <div\n                  *ngIf=\"message?.status === 'failed'\"\n                  data-testid=\"error-message\"\n                  class=\"str-chat__simple-message--error-message str-chat__message--error-message\"\n                >\n                  {{\n                    (message?.errorStatusCode === 403\n                      ? \"streamChat.Message Failed \u00B7 Unauthorized\"\n                      : \"streamChat.Message Failed \u00B7 Click to try again\"\n                    ) | translate\n                  }}\n                </div>\n                <ng-container\n                  *ngTemplateOutlet=\"\n                    (customTemplatesService.messageTextTemplate$ | async) ||\n                      defaultText;\n                    context: getMessageTextContext()\n                  \"\n                />\n                <ng-template\n                  #defaultText\n                  let-message=\"message\"\n                  let-isQuoted=\"isQuoted\"\n                  let-shouldTranslate=\"shouldTranslate\"\n                >\n                  <stream-message-text\n                    [message]=\"message\"\n                    [isQuoted]=\"isQuoted\"\n                    [shouldTranslate]=\"shouldTranslate\"\n                    data-testid=\"quoted-message-text\"\n                  />\n                </ng-template>\n              </div>\n            </div>\n            <stream-icon-placeholder\n              class=\"str-chat__message-error-icon\"\n              icon=\"error\"\n            />\n          </div>\n        </div>\n        <ng-container\n          *ngTemplateOutlet=\"replyCountButton; context: { message: message }\"\n        />\n\n        <ng-container *ngTemplateOutlet=\"messageDateAndSender\" />\n      </ng-container>\n    </ng-container>\n  </div>\n\n  <ng-template #deletedMessage>\n    <div data-testid=\"message-deleted-component\">\n      <div class=\"str-chat__message--deleted-inner\" translate>\n        streamChat.This message was deleted...\n      </div>\n    </div>\n  </ng-template>\n\n  <ng-template #systemMessage>\n    <ng-container\n      *ngTemplateOutlet=\"\n        (customTemplatesService.systemMessageTemplate$ | async) ||\n          defaultSystemMessage;\n        context: getMessageContext()\n      \"\n    />\n    <ng-template #defaultSystemMessage let-messageInput=\"message\">\n      <div data-testid=\"system-message\" class=\"str-chat__message--system\">\n        <div class=\"str-chat__message--system__text\">\n          <div class=\"str-chat__message--system__line\"></div>\n          <p>{{ messageInput?.text }}</p>\n          <div class=\"str-chat__message--system__line\"></div>\n        </div>\n        <div class=\"str-chat__message--system__date\">\n          {{ parsedDate }}\n        </div>\n      </div>\n    </ng-template>\n  </ng-template>\n\n  <ng-template #quotedMessage>\n    <div\n      *ngIf=\"message?.quoted_message\"\n      class=\"quoted-message str-chat__quoted-message-preview\"\n      data-testid=\"quoted-message-container\"\n      [class.mine]=\"isSentByCurrentUser\"\n      (click)=\"\n        jumpToMessage(\n          (message?.quoted_message)!.id,\n          message?.quoted_message?.parent_id\n        )\n      \"\n      (keyup.enter)=\"\n        jumpToMessage(\n          (message?.quoted_message)!.id,\n          message?.quoted_message?.parent_id\n        )\n      \"\n    >\n      <stream-avatar-placeholder\n        data-testid=\"qouted-message-avatar\"\n        class=\"str-chat-angular__avatar-host str-chat__message-sender-avatar\"\n        type=\"user\"\n        location=\"quoted-message-sender\"\n        [imageUrl]=\"message?.quoted_message?.user?.image\"\n        [name]=\"\n          message?.quoted_message?.user?.name ||\n          message?.quoted_message?.user?.id\n        \"\n        [user]=\"message?.quoted_message?.user || undefined\"\n      />\n      <div class=\"quoted-message-inner str-chat__quoted-message-bubble\">\n        <ng-container\n          *ngIf=\"\n            message?.quoted_message?.attachments &&\n            message?.quoted_message?.attachments?.length\n          \"\n        >\n          <ng-template\n            #defaultAttachments\n            let-messageId=\"messageId\"\n            let-attachments=\"attachments\"\n            let-parentMessageId=\"parentMessageId\"\n            let-imageModalStateChangeHandler=\"imageModalStateChangeHandler\"\n          >\n            <stream-attachment-list\n              [messageId]=\"messageId\"\n              [attachments]=\"attachments\"\n              [parentMessageId]=\"parentMessageId\"\n              (imageModalStateChange)=\"imageModalStateChangeHandler($event)\"\n            />\n          </ng-template>\n          <ng-container\n            *ngTemplateOutlet=\"\n              (customTemplatesService.attachmentListTemplate$ | async) ||\n                defaultAttachments;\n              context: getQuotedMessageAttachmentListContext()\n            \"\n          />\n        </ng-container>\n        <ng-container\n          *ngIf=\"\n            message?.quoted_message?.poll_id &&\n            (customTemplatesService.pollTemplate$ | async)\n          \"\n        >\n          <ng-container\n            *ngTemplateOutlet=\"\n              (customTemplatesService.pollTemplate$ | async)!;\n              context: {\n                pollId: message?.quoted_message?.poll_id,\n                messageId: message?.quoted_message?.id,\n                isQuote: true\n              }\n            \"\n          />\n        </ng-container>\n        <ng-container *ngIf=\"message?.quoted_message\">\n          <ng-container\n            *ngTemplateOutlet=\"\n              (customTemplatesService.messageTextTemplate$ | async) ||\n                defaultText;\n              context: getQuotedMessageTextContext()\n            \"\n          />\n          <ng-template\n            #defaultText\n            let-message=\"message\"\n            let-isQuoted=\"isQuoted\"\n            let-shouldTranslate=\"shouldTranslate\"\n          >\n            <stream-message-text\n              [message]=\"message\"\n              [isQuoted]=\"isQuoted\"\n              [shouldTranslate]=\"shouldTranslate\"\n              data-testid=\"quoted-message-text\"\n            />\n          </ng-template>\n        </ng-container>\n      </div>\n    </div>\n  </ng-template>\n\n  <ng-template #messageDateAndSender>\n    <ng-container>\n      <div\n        *ngIf=\"shouldDisplayTranslationNotice\"\n        class=\"str-chat__translation-notice\"\n        data-testid=\"translation-notice\"\n      >\n        <button\n          *ngIf=\"displayedMessageTextContent === 'translation'\"\n          data-testid=\"see-original\"\n          translate\n          (click)=\"displayOriginalMessage()\"\n          (keyup.enter)=\"displayOriginalMessage()\"\n        >\n          streamChat.See original (automatically translated)\n        </button>\n        <button\n          *ngIf=\"displayedMessageTextContent === 'original'\"\n          data-testid=\"see-translation\"\n          translate\n          (click)=\"displayTranslatedMessage()\"\n          (keyup.enter)=\"displayTranslatedMessage()\"\n        >\n          streamChat.See translation\n        </button>\n      </div>\n      <ng-container\n        *ngIf=\"customTemplatesService.customMessageMetadataTemplate$ | async\"\n      >\n        <div class=\"str-chat__custom-message-metadata\">\n          <ng-container\n            *ngTemplateOutlet=\"\n              (customTemplatesService.customMessageMetadataTemplate$ | async)!;\n              context: getMessageMetadataContext()\n            \"\n          />\n        </div>\n      </ng-container>\n      <div\n        class=\"str-chat__message-data str-chat__message-simple-data str-chat__message-metadata\"\n      >\n        <ng-container *ngTemplateOutlet=\"messageStatus\" />\n\n        <span\n          *ngIf=\"!isSentByCurrentUser\"\n          data-testid=\"sender\"\n          class=\"str-chat__message-simple-name str-chat__message-sender-name\"\n        >\n          {{ message?.user?.name ? message?.user?.name : message?.user?.id }}\n        </span>\n        <span\n          data-testid=\"date\"\n          class=\"str-chat__message-simple-timestamp str-chat__message-simple-time\"\n        >\n          {{ parsedDate }}\n        </span>\n        <ng-container *ngIf=\"message?.message_text_updated_at\">\n          <span\n            data-testid=\"edited-flag\"\n            class=\"str-chat__mesage-simple-edited\"\n            translate\n            >streamChat.Edited</span\n          >\n          <div\n            data-testid=\"edited-timestamp\"\n            class=\"str-chat__message-edited-timestamp\"\n            [ngClass]=\"{\n              'str-chat__message-edited-timestamp--open': isEditedFlagOpened,\n              'str-chat__message-edited-timestamp--collapsed':\n                !isEditedFlagOpened\n            }\"\n          >\n            <span translate>streamChat.Edited</span>\n            <time\n              dateTime=\"{{ message?.message_text_updated_at }}\"\n              title=\"{{ message?.message_text_updated_at }}\"\n            >\n              {{ pasedEditedDate }}\n            </time>\n          </div>\n        </ng-container>\n      </div>\n    </ng-container>\n  </ng-template>\n\n  <ng-template #messageStatus>\n    <ng-container\n      *ngIf=\"\n        isSentByCurrentUser &&\n        ((isLastSentMessage && message?.status === 'received') ||\n          message?.status === 'sending')\n      \"\n    >\n      <ng-container *ngIf=\"message?.status === 'sending'; else sentStatus\">\n        <ng-container *ngTemplateOutlet=\"sendingStatus\" />\n      </ng-container>\n      <ng-template #sentStatus>\n        <ng-container\n          *ngIf=\"\n            mode === 'main' &&\n              isMessageDeliveredAndRead &&\n              canDisplayReadStatus;\n            else deliveredStatus\n          \"\n        >\n          <ng-container *ngTemplateOutlet=\"readStatus\" />\n        </ng-container>\n      </ng-template>\n      <ng-template #deliveredStatus>\n        <ng-container\n          *ngTemplateOutlet=\"\n            (customTemplatesService.deliveredStatusTemplate$ | async) ||\n              defaultDeliveredStatus;\n            context: getDeliveredStatusContext()\n          \"\n        />\n      </ng-template>\n      <ng-template #defaultDeliveredStatus>\n        <span\n          *ngIf=\"mode === 'main'\"\n          class=\"str-chat__message-simple-status str-chat__message-simple-status-angular str-chat__message-status\"\n          data-testid=\"delivered-indicator\"\n          tabindex=\"0\"\n          [floatUiLoose]=\"floatingContent\"\n          loosePlacement=\"top\"\n          [looseTrigger]=\"hasTouchSupport ? 'click' : 'hover'\"\n          [disableAnimation]=\"true\"\n          [hideOnClickOutside]=\"true\"\n          [positionFixed]=\"true\"\n          [preventOverflow]=\"true\"\n        >\n          <float-ui-content #floatingContent>\n            <div class=\"str-chat__tooltip str-chat__tooltip-angular\">\n              {{ \"streamChat.Delivered\" | translate }}\n            </div>\n          </float-ui-content>\n          <stream-icon-placeholder\n            data-testid=\"delivered-icon\"\n            icon=\"delivered\"\n          />\n        </span>\n      </ng-template>\n      <ng-template #sendingStatus>\n        <ng-container\n          *ngTemplateOutlet=\"\n            (customTemplatesService.sendingStatusTemplate$ | async) ||\n              defaultSendingStatus;\n            context: getSendingStatusContext()\n          \"\n        />\n      </ng-template>\n      <ng-template #defaultSendingStatus>\n        <span\n          class=\"str-chat__message-simple-status str-chat__message-simple-status-angular str-chat__message-status\"\n          data-testid=\"sending-indicator\"\n          tabindex=\"0\"\n          [floatUiLoose]=\"floatingContent\"\n          loosePlacement=\"top\"\n          [looseTrigger]=\"hasTouchSupport ? 'click' : 'hover'\"\n          [disableAnimation]=\"true\"\n          [hideOnClickOutside]=\"true\"\n          [positionFixed]=\"true\"\n          [preventOverflow]=\"true\"\n        >\n          <float-ui-content #floatingContent>\n            <div class=\"str-chat__tooltip str-chat__tooltip-angular\">\n              {{ \"streamChat.Sending...\" | translate }}\n            </div>\n          </float-ui-content>\n          <stream-loading-indicator-placeholder\n            data-testid=\"loading-indicator\"\n          />\n        </span>\n      </ng-template>\n      <ng-template #readStatus>\n        <ng-container\n          *ngTemplateOutlet=\"\n            (customTemplatesService.readStatusTemplate$ | async) ||\n              defaultReadStatus;\n            context: getReadStatusContext()\n          \"\n        />\n      </ng-template>\n      <ng-template #defaultReadStatus let-readByText=\"readByText\">\n        <span\n          class=\"str-chat__message-simple-status str-chat__message-simple-status-angular str-chat__message-status\"\n          data-testid=\"read-indicator\"\n          tabindex=\"0\"\n          [floatUiLoose]=\"floatingContent\"\n          loosePlacement=\"top\"\n          [looseTrigger]=\"hasTouchSupport ? 'click' : 'hover'\"\n          [disableAnimation]=\"true\"\n          [hideOnClickOutside]=\"true\"\n          [positionFixed]=\"true\"\n          [preventOverflow]=\"true\"\n        >\n          <float-ui-content #floatingContent>\n            <div\n              class=\"str-chat__tooltip str-chat__tooltip-angular\"\n              data-testid=\"read-by-tooltip\"\n            >\n              {{ readByText }}\n            </div>\n          </float-ui-content>\n          <stream-icon-placeholder icon=\"read\" />\n        </span>\n      </ng-template>\n    </ng-container>\n  </ng-template>\n\n  <ng-template #replyCountButton>\n    <div\n      class=\"str-chat__message-simple-reply-button str-chat__message-replies-count-button-wrapper\"\n    >\n      <ng-container *ngIf=\"shouldDisplayThreadLink\">\n        <ng-template\n          *ngTemplateOutlet=\"\n            (customTemplatesService.threadLinkButton$ | async) || defaultButton;\n            context: { message: message }\n          \"\n        ></ng-template>\n      </ng-container>\n      <ng-template #defaultButton let-message=\"message\">\n        <button\n          class=\"str-chat__message-replies-count-button\"\n          data-testid=\"reply-count-button\"\n          (click)=\"setAsActiveParentMessage()\"\n        >\n          {{message?.reply_count === 1 ? ('streamChat.1 reply' | translate) : ('streamChat.{{ replyCount }}\n          replies' | translate:replyCountParam)}}\n        </button>\n      </ng-template>\n    </div>\n  </ng-template>\n\n  <ng-template #attachmentsTemplate>\n    <ng-template\n      #defaultAttachments\n      let-messageId=\"messageId\"\n      let-attachments=\"attachments\"\n      let-parentMessageId=\"parentMessageId\"\n      let-imageModalStateChangeHandler=\"imageModalStateChangeHandler\"\n    >\n      <stream-attachment-list\n        [messageId]=\"messageId\"\n        [attachments]=\"attachments\"\n        [parentMessageId]=\"parentMessageId\"\n        (imageModalStateChange)=\"imageModalStateChangeHandler($event)\"\n      />\n    </ng-template>\n    <ng-container\n      *ngTemplateOutlet=\"\n        (customTemplatesService.attachmentListTemplate$ | async) ||\n          defaultAttachments;\n        context: getAttachmentListContext()\n      \"\n    />\n  </ng-template>\n</ng-template>\n", dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i8.NgxFloatUiContentComponent, selector: "float-ui-content", exportAs: ["ngxFloatUiContent"] }, { kind: "directive", type: i8.NgxFloatUiLooseDirective, selector: "[floatUiLoose]", inputs: ["floatUiLoose", "loosePlacement", "looseTrigger"], exportAs: ["floatUiLoose"] }, { kind: "component", type: AvatarPlaceholderComponent, selector: "stream-avatar-placeholder", inputs: ["name", "imageUrl", "location", "channel", "user", "type", "initialsType", "showOnlineIndicator"] }, { kind: "directive", type: i6.TranslateDirective, selector: "[translate],[ngx-translate]", inputs: ["translate", "translateParams"] }, { kind: "component", type: IconPlaceholderComponent, selector: "stream-icon-placeholder", inputs: ["icon"] }, { kind: "component", type: LoadingIndicatorPlaceholderComponent, selector: "stream-loading-indicator-placeholder" }, { kind: "component", type: MessageActionsBoxComponent, selector: "stream-message-actions-box", inputs: ["isMine", "message", "messageTextHtmlElement", "enabledActions"] }, { kind: "component", type: AttachmentListComponent, selector: "stream-attachment-list", inputs: ["messageId", "parentMessageId", "attachments"], outputs: ["imageModalStateChange"] }, { kind: "component", type: MessageReactionsComponent, selector: "stream-message-reactions", inputs: ["messageId", "messageReactionGroups", "messageReactionCounts", "latestReactions", "ownReactions"] }, { kind: "component", type: MessageTextComponent, selector: "stream-message-text", inputs: ["message", "isQuoted", "shouldTranslate"] }, { kind: "component", type: MessageBlockedComponent, selector: "stream-message-blocked", inputs: ["message", "isMyMessage"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "pipe", type: i6.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-MessageComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: MessageComponent, deps: [{ token: ChatClientService }, { token: ChannelService }, { token: CustomTemplatesService }, { token: i0.ChangeDetectorRef }, { token: DateParserService }, { token: MessageActionsService }, { token: i0.NgZone }, { token: i6.TranslateService }], target: i0.ɵɵFactoryTarget.Component });
-MessageComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.4", type: MessageComponent, selector: "stream-message", inputs: { message: "message", enabledMessageActions: "enabledMessageActions", isLastSentMessage: "isLastSentMessage", mode: "mode", isHighlighted: "isHighlighted", scroll$: "scroll$" }, viewQueries: [{ propertyName: "messageMenuTrigger", first: true, predicate: ["messageMenuTrigger"], descendants: true }, { propertyName: "messageMenuFloat", first: true, predicate: ["messageMenuFloat"], descendants: true }, { propertyName: "messageTextElement", first: true, predicate: ["messageTextElement"], descendants: true }, { propertyName: "messageBubble", first: true, predicate: ["messageBubble"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<ng-container\n  *ngIf=\"\n    message?.type === 'error' &&\n      (message?.moderation_details?.action ===\n        'MESSAGE_RESPONSE_ACTION_REMOVE' ||\n        message?.moderation?.action === 'remove');\n    else notBlockedMessage\n  \"\n>\n  <ng-container\n    *ngTemplateOutlet=\"\n      (customTemplatesService.messageBlockedTemplate$ | async) ||\n        defaultBlockedMessage;\n      context: getMessageBlockedContext()\n    \"\n  ></ng-container>\n  <ng-template #defaultBlockedMessage>\n    <stream-message-blocked\n      [message]=\"message\"\n      [isMyMessage]=\"isSentByCurrentUser\"\n    ></stream-message-blocked>\n  </ng-template>\n</ng-container>\n<ng-template #notBlockedMessage>\n  <div\n    data-testid=\"message-container\"\n    class=\"str-chat__message-simple str-chat__message str-chat__message--{{\n      message?.type\n    }} str-chat__message--{{ message?.status }} {{\n      message?.text ? 'str-chat__message--has-text' : 'has-no-text'\n    }} str-chat__message-menu-{{ areMessageOptionsOpen ? 'opened' : 'closed' }}\"\n    [class.str-chat__message--me]=\"isSentByCurrentUser\"\n    [class.str-chat__message--other]=\"!isSentByCurrentUser\"\n    [class.str-chat__message-simple--me]=\"isSentByCurrentUser\"\n    [class.str-chat__message--has-attachment]=\"hasAttachment\"\n    [class.str-chat__message--with-reactions]=\"hasReactions\"\n    [class.str-chat__message--highlighted]=\"isHighlighted\"\n    [class.str-chat__message-with-thread-link]=\"shouldDisplayThreadLink\"\n    [class.str-chat__message-send-can-be-retried]=\"\n      (message?.status === 'failed' && message?.errorStatusCode !== 403) ||\n      (message?.type === 'error' && message?.moderation_details)\n    \"\n    [class.str-chat__message-with-touch-support]=\"hasTouchSupport\"\n    [class.str-chat__message-without-touch-support]=\"!hasTouchSupport\"\n  >\n    <ng-container *ngIf=\"!message?.deleted_at; else deletedMessage\">\n      <ng-container *ngIf=\"message?.type !== 'system'; else systemMessage\">\n        <stream-avatar-placeholder\n          data-testid=\"avatar\"\n          class=\"str-chat-angular__avatar-host str-chat__message-sender-avatar\"\n          type=\"user\"\n          location=\"message-sender\"\n          [imageUrl]=\"message?.user?.image\"\n          [name]=\"message?.user?.name || message?.user?.id\"\n          [user]=\"message?.user || undefined\"\n        ></stream-avatar-placeholder>\n        <div class=\"str-chat__message-inner\">\n          <div\n            *ngIf=\"!hasTouchSupport && areOptionsVisible\"\n            class=\"str-chat__message-simple__actions str-chat__message-options\"\n            data-testid=\"message-options\"\n            [class.str-chat__message-actions-open]=\"areMessageOptionsOpen\"\n          >\n            <div\n              #messageActionsToggle\n              data-testid=\"message-actions-container\"\n              class=\"str-chat__message-actions-container str-chat__message-simple__actions__action str-chat__message-simple__actions__action--options\"\n              [floatUiLoose]=\"messageMenuFloat\"\n              [looseTrigger]=\"\n                messageActionsService.customActionClickHandler\n                  ? 'none'\n                  : 'click'\n              \"\n              [hideOnScroll]=\"false\"\n              [hideOnClickOutside]=\"true\"\n              [hideOnMouseLeave]=\"false\"\n              [disableAnimation]=\"false\"\n              [preventOverflow]=\"true\"\n              [positionFixed]=\"true\"\n              (onSHown)=\"areMessageOptionsOpen = true\"\n              (onHidden)=\"areMessageOptionsOpen = false\"\n            >\n              <div\n                *ngIf=\"visibleMessageActionsCount > 0\"\n                class=\"str-chat__message-actions-box-button\"\n                data-testid=\"message-options-button\"\n                (click)=\"messageOptionsButtonClicked()\"\n                (keyup.enter)=\"messageOptionsButtonClicked()\"\n              >\n                <stream-icon-placeholder\n                  icon=\"action\"\n                  class=\"str-chat__message-action-icon\"\n                ></stream-icon-placeholder>\n              </div>\n            </div>\n          </div>\n          <ng-container\n            *ngIf=\"\n              customTemplatesService.customMessageMetadataInsideBubbleTemplate$\n                | async\n            \"\n          >\n            <ng-template\n              *ngTemplateOutlet=\"\n                (customTemplatesService.customMessageMetadataInsideBubbleTemplate$\n                  | async)!;\n                context: { message: message }\n              \"\n            ></ng-template>\n          </ng-container>\n          <div class=\"str-chat__message-reactions-host\">\n            <ng-template\n              #defaultMessageReactions\n              let-messageReactionCounts=\"messageReactionCounts\"\n              let-latestReactions=\"latestReactions\"\n              let-messageId=\"messageId\"\n              let-ownReactions=\"ownReactions\"\n              let-messageReactionGroups=\"messageReactionGroups\"\n            >\n              <stream-message-reactions\n                [messageReactionCounts]=\"messageReactionCounts\"\n                [latestReactions]=\"latestReactions\"\n                [messageId]=\"messageId\"\n                [ownReactions]=\"ownReactions\"\n                [messageReactionGroups]=\"messageReactionGroups\"\n              ></stream-message-reactions>\n            </ng-template>\n            <ng-container\n              *ngTemplateOutlet=\"\n                (customTemplatesService.messageReactionsTemplate$ | async) ||\n                  defaultMessageReactions;\n                context: getMessageReactionsContext()\n              \"\n            ></ng-container>\n          </div>\n          <float-ui-content #messageMenuFloat>\n            <ng-template\n              #defaultMessageActionsBox\n              let-isMine=\"isMine\"\n              let-messageInput=\"message\"\n              let-enabledActions=\"enabledActions\"\n              let-messageTextHtmlElement=\"messageTextHtmlElement\"\n            >\n              <stream-message-actions-box\n                [isMine]=\"isMine\"\n                [message]=\"messageInput\"\n                [enabledActions]=\"enabledActions\"\n                [messageTextHtmlElement]=\"messageTextHtmlElement\"\n              ></stream-message-actions-box>\n            </ng-template>\n            <ng-container>\n              <div\n                (click)=\"messageActionsBoxClicked(messageMenuFloat)\"\n                (keyup.enter)=\"messageActionsBoxClicked(messageMenuFloat)\"\n              >\n                <ng-container\n                  *ngTemplateOutlet=\"\n                    (customTemplatesService.messageActionsBoxTemplate$\n                      | async) || defaultMessageActionsBox;\n                    context: getMessageActionsBoxContext()\n                  \"\n                >\n                </ng-container>\n              </div>\n            </ng-container>\n          </float-ui-content>\n          <div\n            class=\"str-chat__message-bubble str-chat-angular__message-bubble\"\n            [class.str-chat-angular__message-bubble--attachment-modal-open]=\"\n              nestedModalState === 'opened'\n            \"\n            data-testid=\"message-bubble\"\n            [floatUiLoose]=\"messageMenuFloat\"\n            #messageMenuTrigger=\"floatUiLoose\"\n            #messageBubble\n            looseTrigger=\"none\"\n            [hideOnScroll]=\"false\"\n            [hideOnClickOutside]=\"true\"\n            [hideOnMouseLeave]=\"false\"\n            [disableAnimation]=\"true\"\n            [preventOverflow]=\"true\"\n            (onShown)=\"areMessageOptionsOpen = true\"\n            (onHidden)=\"areMessageOptionsOpen = false\"\n            [positionFixed]=\"true\"\n          >\n            <ng-container *ngIf=\"hasAttachment && !message?.quoted_message\">\n              <div class=\"str-chat__attachments-container\">\n                <ng-container\n                  *ngTemplateOutlet=\"attachmentsTemplate\"\n                ></ng-container>\n              </div>\n            </ng-container>\n            <ng-container\n              *ngIf=\"\n                message?.poll_id &&\n                (customTemplatesService.pollTemplate$ | async)\n              \"\n            >\n              <ng-container\n                *ngTemplateOutlet=\"\n                  (customTemplatesService.pollTemplate$ | async)!;\n                  context: {\n                    pollId: message?.poll_id,\n                    messageId: message?.id,\n                    isQuote: false\n                  }\n                \"\n              ></ng-container>\n            </ng-container>\n            <div\n              *ngIf=\"\n                message?.text || (message?.quoted_message && hasAttachment)\n              \"\n              class=\"str-chat__message-text\"\n              tabindex=\"0\"\n              [class.str-chat__message-text--pointer-cursor]=\"\n                (message?.status === 'failed' &&\n                  message?.errorStatusCode !== 403) ||\n                (this.message?.type === 'error' &&\n                  this.message?.moderation_details) ||\n                message?.message_text_updated_at\n              \"\n              (click)=\"messageClicked()\"\n              (keyup.enter)=\"messageClicked()\"\n            >\n              <div\n                data-testid=\"inner-message\"\n                class=\"str-chat__message-text-inner str-chat__message-simple-text-inner\"\n                [class.str-chat__message-light-text-inner--has-attachment]=\"\n                  hasAttachment\n                \"\n              >\n                <ng-container *ngTemplateOutlet=\"quotedMessage\"></ng-container>\n                <ng-container *ngIf=\"hasAttachment && message?.quoted_message\">\n                  <ng-container\n                    *ngTemplateOutlet=\"attachmentsTemplate\"\n                  ></ng-container>\n                </ng-container>\n                <div\n                  *ngIf=\"message?.type === 'error'\"\n                  data-testid=\"client-error-message\"\n                  class=\"str-chat__simple-message--error-message str-chat__message--error-message\"\n                >\n                  <ng-container *ngIf=\"!message?.moderation_details\">{{\n                    \"streamChat.Error \u00B7 Unsent\" | translate\n                  }}</ng-container>\n                </div>\n                <div\n                  *ngIf=\"message?.status === 'failed'\"\n                  data-testid=\"error-message\"\n                  class=\"str-chat__simple-message--error-message str-chat__message--error-message\"\n                >\n                  {{\n                    (message?.errorStatusCode === 403\n                      ? \"streamChat.Message Failed \u00B7 Unauthorized\"\n                      : \"streamChat.Message Failed \u00B7 Click to try again\"\n                    ) | translate\n                  }}\n                </div>\n                <ng-container\n                  *ngTemplateOutlet=\"\n                    (customTemplatesService.messageTextTemplate$ | async) ||\n                      defaultText;\n                    context: getMessageTextContext()\n                  \"\n                ></ng-container>\n                <ng-template\n                  #defaultText\n                  let-message=\"message\"\n                  let-isQuoted=\"isQuoted\"\n                  let-shouldTranslate=\"shouldTranslate\"\n                >\n                  <stream-message-text\n                    [message]=\"message\"\n                    [isQuoted]=\"isQuoted\"\n                    [shouldTranslate]=\"shouldTranslate\"\n                    data-testid=\"quoted-message-text\"\n                  ></stream-message-text>\n                </ng-template>\n              </div>\n            </div>\n            <stream-icon-placeholder\n              class=\"str-chat__message-error-icon\"\n              icon=\"error\"\n            ></stream-icon-placeholder>\n          </div>\n        </div>\n        <ng-container\n          *ngTemplateOutlet=\"replyCountButton; context: { message: message }\"\n        ></ng-container>\n\n        <ng-container *ngTemplateOutlet=\"messageDateAndSender\"></ng-container>\n      </ng-container>\n    </ng-container>\n  </div>\n\n  <ng-template #deletedMessage>\n    <div data-testid=\"message-deleted-component\">\n      <div class=\"str-chat__message--deleted-inner\" translate>\n        streamChat.This message was deleted...\n      </div>\n    </div>\n  </ng-template>\n\n  <ng-template #systemMessage>\n    <ng-container\n      *ngTemplateOutlet=\"\n        (customTemplatesService.systemMessageTemplate$ | async) ||\n          defaultSystemMessage;\n        context: getMessageContext()\n      \"\n    ></ng-container>\n    <ng-template #defaultSystemMessage let-messageInput=\"message\">\n      <div data-testid=\"system-message\" class=\"str-chat__message--system\">\n        <div class=\"str-chat__message--system__text\">\n          <div class=\"str-chat__message--system__line\"></div>\n          <p>{{ messageInput?.text }}</p>\n          <div class=\"str-chat__message--system__line\"></div>\n        </div>\n        <div class=\"str-chat__message--system__date\">\n          {{ parsedDate }}\n        </div>\n      </div>\n    </ng-template>\n  </ng-template>\n\n  <ng-template #quotedMessage>\n    <div\n      *ngIf=\"message?.quoted_message\"\n      class=\"quoted-message str-chat__quoted-message-preview\"\n      data-testid=\"quoted-message-container\"\n      [class.mine]=\"isSentByCurrentUser\"\n      (click)=\"\n        jumpToMessage(\n          (message?.quoted_message)!.id,\n          message?.quoted_message?.parent_id\n        )\n      \"\n      (keyup.enter)=\"\n        jumpToMessage(\n          (message?.quoted_message)!.id,\n          message?.quoted_message?.parent_id\n        )\n      \"\n    >\n      <stream-avatar-placeholder\n        data-testid=\"qouted-message-avatar\"\n        class=\"str-chat-angular__avatar-host str-chat__message-sender-avatar\"\n        type=\"user\"\n        location=\"quoted-message-sender\"\n        [imageUrl]=\"message?.quoted_message?.user?.image\"\n        [name]=\"\n          message?.quoted_message?.user?.name ||\n          message?.quoted_message?.user?.id\n        \"\n        [user]=\"message?.quoted_message?.user || undefined\"\n      ></stream-avatar-placeholder>\n      <div class=\"quoted-message-inner str-chat__quoted-message-bubble\">\n        <ng-container\n          *ngIf=\"\n            message?.quoted_message?.attachments &&\n            message?.quoted_message?.attachments?.length\n          \"\n        >\n          <ng-template\n            #defaultAttachments\n            let-messageId=\"messageId\"\n            let-attachments=\"attachments\"\n            let-parentMessageId=\"parentMessageId\"\n            let-imageModalStateChangeHandler=\"imageModalStateChangeHandler\"\n          >\n            <stream-attachment-list\n              [messageId]=\"messageId\"\n              [attachments]=\"attachments\"\n              [parentMessageId]=\"parentMessageId\"\n              (imageModalStateChange)=\"imageModalStateChangeHandler($event)\"\n            ></stream-attachment-list>\n          </ng-template>\n          <ng-container\n            *ngTemplateOutlet=\"\n              (customTemplatesService.attachmentListTemplate$ | async) ||\n                defaultAttachments;\n              context: getQuotedMessageAttachmentListContext()\n            \"\n          ></ng-container>\n        </ng-container>\n        <ng-container\n          *ngIf=\"\n            message?.quoted_message?.poll_id &&\n            (customTemplatesService.pollTemplate$ | async)\n          \"\n        >\n          <ng-container\n            *ngTemplateOutlet=\"\n              (customTemplatesService.pollTemplate$ | async)!;\n              context: {\n                pollId: message?.quoted_message?.poll_id,\n                messageId: message?.quoted_message?.id,\n                isQuote: true\n              }\n            \"\n          ></ng-container>\n        </ng-container>\n        <ng-container *ngIf=\"message?.quoted_message\">\n          <ng-container\n            *ngTemplateOutlet=\"\n              (customTemplatesService.messageTextTemplate$ | async) ||\n                defaultText;\n              context: getQuotedMessageTextContext()\n            \"\n          ></ng-container>\n          <ng-template\n            #defaultText\n            let-message=\"message\"\n            let-isQuoted=\"isQuoted\"\n            let-shouldTranslate=\"shouldTranslate\"\n          >\n            <stream-message-text\n              [message]=\"message\"\n              [isQuoted]=\"isQuoted\"\n              [shouldTranslate]=\"shouldTranslate\"\n              data-testid=\"quoted-message-text\"\n            ></stream-message-text>\n          </ng-template>\n        </ng-container>\n      </div>\n    </div>\n  </ng-template>\n\n  <ng-template #messageDateAndSender>\n    <ng-container>\n      <div\n        *ngIf=\"shouldDisplayTranslationNotice\"\n        class=\"str-chat__translation-notice\"\n        data-testid=\"translation-notice\"\n      >\n        <button\n          *ngIf=\"displayedMessageTextContent === 'translation'\"\n          data-testid=\"see-original\"\n          translate\n          (click)=\"displayOriginalMessage()\"\n          (keyup.enter)=\"displayOriginalMessage()\"\n        >\n          streamChat.See original (automatically translated)\n        </button>\n        <button\n          *ngIf=\"displayedMessageTextContent === 'original'\"\n          data-testid=\"see-translation\"\n          translate\n          (click)=\"displayTranslatedMessage()\"\n          (keyup.enter)=\"displayTranslatedMessage()\"\n        >\n          streamChat.See translation\n        </button>\n      </div>\n      <ng-container\n        *ngIf=\"customTemplatesService.customMessageMetadataTemplate$ | async\"\n      >\n        <div class=\"str-chat__custom-message-metadata\">\n          <ng-container\n            *ngTemplateOutlet=\"\n              (customTemplatesService.customMessageMetadataTemplate$ | async)!;\n              context: getMessageMetadataContext()\n            \"\n          ></ng-container>\n        </div>\n      </ng-container>\n      <div\n        class=\"str-chat__message-data str-chat__message-simple-data str-chat__message-metadata\"\n      >\n        <ng-container *ngTemplateOutlet=\"messageStatus\"></ng-container>\n\n        <span\n          *ngIf=\"!isSentByCurrentUser\"\n          data-testid=\"sender\"\n          class=\"str-chat__message-simple-name str-chat__message-sender-name\"\n        >\n          {{ message?.user?.name ? message?.user?.name : message?.user?.id }}\n        </span>\n        <span\n          data-testid=\"date\"\n          class=\"str-chat__message-simple-timestamp str-chat__message-simple-time\"\n        >\n          {{ parsedDate }}\n        </span>\n        <ng-container *ngIf=\"message?.message_text_updated_at\">\n          <span\n            data-testid=\"edited-flag\"\n            class=\"str-chat__mesage-simple-edited\"\n            translate\n            >streamChat.Edited</span\n          >\n          <div\n            data-testid=\"edited-timestamp\"\n            class=\"str-chat__message-edited-timestamp\"\n            [ngClass]=\"{\n              'str-chat__message-edited-timestamp--open': isEditedFlagOpened,\n              'str-chat__message-edited-timestamp--collapsed':\n                !isEditedFlagOpened\n            }\"\n          >\n            <span translate>streamChat.Edited</span>\n            <time\n              dateTime=\"{{ message?.message_text_updated_at }}\"\n              title=\"{{ message?.message_text_updated_at }}\"\n            >\n              {{ pasedEditedDate }}\n            </time>\n          </div>\n        </ng-container>\n      </div>\n    </ng-container>\n  </ng-template>\n\n  <ng-template #messageStatus>\n    <ng-container\n      *ngIf=\"\n        isSentByCurrentUser &&\n        ((isLastSentMessage && message?.status === 'received') ||\n          message?.status === 'sending')\n      \"\n    >\n      <ng-container *ngIf=\"message?.status === 'sending'; else sentStatus\">\n        <ng-container *ngTemplateOutlet=\"sendingStatus\"></ng-container>\n      </ng-container>\n      <ng-template #sentStatus>\n        <ng-container\n          *ngIf=\"\n            mode === 'main' &&\n              isMessageDeliveredAndRead &&\n              canDisplayReadStatus;\n            else deliveredStatus\n          \"\n        >\n          <ng-container *ngTemplateOutlet=\"readStatus\"></ng-container>\n        </ng-container>\n      </ng-template>\n      <ng-template #deliveredStatus>\n        <ng-container\n          *ngTemplateOutlet=\"\n            (customTemplatesService.deliveredStatusTemplate$ | async) ||\n              defaultDeliveredStatus;\n            context: getDeliveredStatusContext()\n          \"\n        ></ng-container>\n      </ng-template>\n      <ng-template #defaultDeliveredStatus>\n        <span\n          *ngIf=\"mode === 'main'\"\n          class=\"str-chat__message-simple-status str-chat__message-simple-status-angular str-chat__message-status\"\n          data-testid=\"delivered-indicator\"\n          tabindex=\"0\"\n          [floatUiLoose]=\"floatingContent\"\n          loosePlacement=\"top\"\n          [looseTrigger]=\"hasTouchSupport ? 'click' : 'hover'\"\n          [disableAnimation]=\"true\"\n          [hideOnClickOutside]=\"true\"\n          [positionFixed]=\"true\"\n          [preventOverflow]=\"true\"\n        >\n          <float-ui-content #floatingContent>\n            <div class=\"str-chat__tooltip str-chat__tooltip-angular\">\n              {{ \"streamChat.Delivered\" | translate }}\n            </div>\n          </float-ui-content>\n          <stream-icon-placeholder\n            data-testid=\"delivered-icon\"\n            icon=\"delivered\"\n          ></stream-icon-placeholder>\n        </span>\n      </ng-template>\n      <ng-template #sendingStatus>\n        <ng-container\n          *ngTemplateOutlet=\"\n            (customTemplatesService.sendingStatusTemplate$ | async) ||\n              defaultSendingStatus;\n            context: getSendingStatusContext()\n          \"\n        ></ng-container>\n      </ng-template>\n      <ng-template #defaultSendingStatus>\n        <span\n          class=\"str-chat__message-simple-status str-chat__message-simple-status-angular str-chat__message-status\"\n          data-testid=\"sending-indicator\"\n          tabindex=\"0\"\n          [floatUiLoose]=\"floatingContent\"\n          loosePlacement=\"top\"\n          [looseTrigger]=\"hasTouchSupport ? 'click' : 'hover'\"\n          [disableAnimation]=\"true\"\n          [hideOnClickOutside]=\"true\"\n          [positionFixed]=\"true\"\n          [preventOverflow]=\"true\"\n        >\n          <float-ui-content #floatingContent>\n            <div class=\"str-chat__tooltip str-chat__tooltip-angular\">\n              {{ \"streamChat.Sending...\" | translate }}\n            </div>\n          </float-ui-content>\n          <stream-loading-indicator-placeholder\n            data-testid=\"loading-indicator\"\n          ></stream-loading-indicator-placeholder>\n        </span>\n      </ng-template>\n      <ng-template #readStatus>\n        <ng-container\n          *ngTemplateOutlet=\"\n            (customTemplatesService.readStatusTemplate$ | async) ||\n              defaultReadStatus;\n            context: getReadStatusContext()\n          \"\n        ></ng-container>\n      </ng-template>\n      <ng-template #defaultReadStatus let-readByText=\"readByText\">\n        <span\n          class=\"str-chat__message-simple-status str-chat__message-simple-status-angular str-chat__message-status\"\n          data-testid=\"read-indicator\"\n          tabindex=\"0\"\n          [floatUiLoose]=\"floatingContent\"\n          loosePlacement=\"top\"\n          [looseTrigger]=\"hasTouchSupport ? 'click' : 'hover'\"\n          [disableAnimation]=\"true\"\n          [hideOnClickOutside]=\"true\"\n          [positionFixed]=\"true\"\n          [preventOverflow]=\"true\"\n        >\n          <float-ui-content #floatingContent>\n            <div\n              class=\"str-chat__tooltip str-chat__tooltip-angular\"\n              data-testid=\"read-by-tooltip\"\n            >\n              {{ readByText }}\n            </div>\n          </float-ui-content>\n          <stream-icon-placeholder icon=\"read\"></stream-icon-placeholder>\n        </span>\n      </ng-template>\n    </ng-container>\n  </ng-template>\n\n  <ng-template #replyCountButton>\n    <div\n      class=\"str-chat__message-simple-reply-button str-chat__message-replies-count-button-wrapper\"\n    >\n      <ng-container *ngIf=\"shouldDisplayThreadLink\">\n        <ng-template\n          *ngTemplateOutlet=\"\n            (customTemplatesService.threadLinkButton$ | async) || defaultButton;\n            context: { message: message }\n          \"\n        ></ng-template>\n      </ng-container>\n      <ng-template #defaultButton let-message=\"message\">\n        <button\n          class=\"str-chat__message-replies-count-button\"\n          data-testid=\"reply-count-button\"\n          (click)=\"setAsActiveParentMessage()\"\n        >\n          {{message?.reply_count === 1 ? ('streamChat.1 reply' | translate) : ('streamChat.{{ replyCount }}\n          replies' | translate:replyCountParam)}}\n        </button>\n      </ng-template>\n    </div>\n  </ng-template>\n\n  <ng-template #attachmentsTemplate>\n    <ng-template\n      #defaultAttachments\n      let-messageId=\"messageId\"\n      let-attachments=\"attachments\"\n      let-parentMessageId=\"parentMessageId\"\n      let-imageModalStateChangeHandler=\"imageModalStateChangeHandler\"\n    >\n      <stream-attachment-list\n        [messageId]=\"messageId\"\n        [attachments]=\"attachments\"\n        [parentMessageId]=\"parentMessageId\"\n        (imageModalStateChange)=\"imageModalStateChangeHandler($event)\"\n      ></stream-attachment-list>\n    </ng-template>\n    <ng-container\n      *ngTemplateOutlet=\"\n        (customTemplatesService.attachmentListTemplate$ | async) ||\n          defaultAttachments;\n        context: getAttachmentListContext()\n      \"\n    ></ng-container>\n  </ng-template>\n</ng-template>\n", dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i8.NgxFloatUiContentComponent, selector: "float-ui-content", exportAs: ["ngxFloatUiContent"] }, { kind: "directive", type: i8.NgxFloatUiLooseDirective, selector: "[floatUiLoose]", inputs: ["floatUiLoose", "loosePlacement", "looseTrigger"], exportAs: ["floatUiLoose"] }, { kind: "component", type: AvatarPlaceholderComponent, selector: "stream-avatar-placeholder", inputs: ["name", "imageUrl", "location", "channel", "user", "type", "initialsType", "showOnlineIndicator"] }, { kind: "directive", type: i6.TranslateDirective, selector: "[translate],[ngx-translate]", inputs: ["translate", "translateParams"] }, { kind: "component", type: IconPlaceholderComponent, selector: "stream-icon-placeholder", inputs: ["icon"] }, { kind: "component", type: LoadingIndicatorPlaceholderComponent, selector: "stream-loading-indicator-placeholder" }, { kind: "component", type: MessageActionsBoxComponent, selector: "stream-message-actions-box", inputs: ["isMine", "message", "messageTextHtmlElement", "enabledActions"] }, { kind: "component", type: AttachmentListComponent, selector: "stream-attachment-list", inputs: ["messageId", "parentMessageId", "attachments"], outputs: ["imageModalStateChange"] }, { kind: "component", type: MessageReactionsComponent, selector: "stream-message-reactions", inputs: ["messageId", "messageReactionGroups", "messageReactionCounts", "latestReactions", "ownReactions"] }, { kind: "component", type: MessageTextComponent, selector: "stream-message-text", inputs: ["message", "isQuoted", "shouldTranslate"] }, { kind: "component", type: MessageBlockedComponent, selector: "stream-message-blocked", inputs: ["message", "isMyMessage"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "pipe", type: i6.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: MessageComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: MessageComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'stream-message', changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-container\n  *ngIf=\"\n    message?.type === 'error' &&\n      (message?.moderation_details?.action ===\n        'MESSAGE_RESPONSE_ACTION_REMOVE' ||\n        message?.moderation?.action === 'remove');\n    else notBlockedMessage\n  \"\n>\n  <ng-container\n    *ngTemplateOutlet=\"\n      (customTemplatesService.messageBlockedTemplate$ | async) ||\n        defaultBlockedMessage;\n      context: getMessageBlockedContext()\n    \"\n  ></ng-container>\n  <ng-template #defaultBlockedMessage>\n    <stream-message-blocked\n      [message]=\"message\"\n      [isMyMessage]=\"isSentByCurrentUser\"\n    ></stream-message-blocked>\n  </ng-template>\n</ng-container>\n<ng-template #notBlockedMessage>\n  <div\n    data-testid=\"message-container\"\n    class=\"str-chat__message-simple str-chat__message str-chat__message--{{\n      message?.type\n    }} str-chat__message--{{ message?.status }} {{\n      message?.text ? 'str-chat__message--has-text' : 'has-no-text'\n    }} str-chat__message-menu-{{ areMessageOptionsOpen ? 'opened' : 'closed' }}\"\n    [class.str-chat__message--me]=\"isSentByCurrentUser\"\n    [class.str-chat__message--other]=\"!isSentByCurrentUser\"\n    [class.str-chat__message-simple--me]=\"isSentByCurrentUser\"\n    [class.str-chat__message--has-attachment]=\"hasAttachment\"\n    [class.str-chat__message--with-reactions]=\"hasReactions\"\n    [class.str-chat__message--highlighted]=\"isHighlighted\"\n    [class.str-chat__message-with-thread-link]=\"shouldDisplayThreadLink\"\n    [class.str-chat__message-send-can-be-retried]=\"\n      (message?.status === 'failed' && message?.errorStatusCode !== 403) ||\n      (message?.type === 'error' && message?.moderation_details)\n    \"\n    [class.str-chat__message-with-touch-support]=\"hasTouchSupport\"\n    [class.str-chat__message-without-touch-support]=\"!hasTouchSupport\"\n  >\n    <ng-container *ngIf=\"!message?.deleted_at; else deletedMessage\">\n      <ng-container *ngIf=\"message?.type !== 'system'; else systemMessage\">\n        <stream-avatar-placeholder\n          data-testid=\"avatar\"\n          class=\"str-chat-angular__avatar-host str-chat__message-sender-avatar\"\n          type=\"user\"\n          location=\"message-sender\"\n          [imageUrl]=\"message?.user?.image\"\n          [name]=\"message?.user?.name || message?.user?.id\"\n          [user]=\"message?.user || undefined\"\n        ></stream-avatar-placeholder>\n        <div class=\"str-chat__message-inner\">\n          <div\n            *ngIf=\"!hasTouchSupport && areOptionsVisible\"\n            class=\"str-chat__message-simple__actions str-chat__message-options\"\n            data-testid=\"message-options\"\n            [class.str-chat__message-actions-open]=\"areMessageOptionsOpen\"\n          >\n            <div\n              #messageActionsToggle\n              data-testid=\"message-actions-container\"\n              class=\"str-chat__message-actions-container str-chat__message-simple__actions__action str-chat__message-simple__actions__action--options\"\n              [floatUiLoose]=\"messageMenuFloat\"\n              [looseTrigger]=\"\n                messageActionsService.customActionClickHandler\n                  ? 'none'\n                  : 'click'\n              \"\n              [hideOnScroll]=\"false\"\n              [hideOnClickOutside]=\"true\"\n              [hideOnMouseLeave]=\"false\"\n              [disableAnimation]=\"false\"\n              [preventOverflow]=\"true\"\n              [positionFixed]=\"true\"\n              (onSHown)=\"areMessageOptionsOpen = true\"\n              (onHidden)=\"areMessageOptionsOpen = false\"\n            >\n              <div\n                *ngIf=\"visibleMessageActionsCount > 0\"\n                class=\"str-chat__message-actions-box-button\"\n                data-testid=\"message-options-button\"\n                (click)=\"messageOptionsButtonClicked()\"\n                (keyup.enter)=\"messageOptionsButtonClicked()\"\n              >\n                <stream-icon-placeholder\n                  icon=\"action\"\n                  class=\"str-chat__message-action-icon\"\n                ></stream-icon-placeholder>\n              </div>\n            </div>\n          </div>\n          <ng-container\n            *ngIf=\"\n              customTemplatesService.customMessageMetadataInsideBubbleTemplate$\n                | async\n            \"\n          >\n            <ng-template\n              *ngTemplateOutlet=\"\n                (customTemplatesService.customMessageMetadataInsideBubbleTemplate$\n                  | async)!;\n                context: { message: message }\n              \"\n            ></ng-template>\n          </ng-container>\n          <div class=\"str-chat__message-reactions-host\">\n            <ng-template\n              #defaultMessageReactions\n              let-messageReactionCounts=\"messageReactionCounts\"\n              let-latestReactions=\"latestReactions\"\n              let-messageId=\"messageId\"\n              let-ownReactions=\"ownReactions\"\n              let-messageReactionGroups=\"messageReactionGroups\"\n            >\n              <stream-message-reactions\n                [messageReactionCounts]=\"messageReactionCounts\"\n                [latestReactions]=\"latestReactions\"\n                [messageId]=\"messageId\"\n                [ownReactions]=\"ownReactions\"\n                [messageReactionGroups]=\"messageReactionGroups\"\n              ></stream-message-reactions>\n            </ng-template>\n            <ng-container\n              *ngTemplateOutlet=\"\n                (customTemplatesService.messageReactionsTemplate$ | async) ||\n                  defaultMessageReactions;\n                context: getMessageReactionsContext()\n              \"\n            ></ng-container>\n          </div>\n          <float-ui-content #messageMenuFloat>\n            <ng-template\n              #defaultMessageActionsBox\n              let-isMine=\"isMine\"\n              let-messageInput=\"message\"\n              let-enabledActions=\"enabledActions\"\n              let-messageTextHtmlElement=\"messageTextHtmlElement\"\n            >\n              <stream-message-actions-box\n                [isMine]=\"isMine\"\n                [message]=\"messageInput\"\n                [enabledActions]=\"enabledActions\"\n                [messageTextHtmlElement]=\"messageTextHtmlElement\"\n              ></stream-message-actions-box>\n            </ng-template>\n            <ng-container>\n              <div\n                (click)=\"messageActionsBoxClicked(messageMenuFloat)\"\n                (keyup.enter)=\"messageActionsBoxClicked(messageMenuFloat)\"\n              >\n                <ng-container\n                  *ngTemplateOutlet=\"\n                    (customTemplatesService.messageActionsBoxTemplate$\n                      | async) || defaultMessageActionsBox;\n                    context: getMessageActionsBoxContext()\n                  \"\n                >\n                </ng-container>\n              </div>\n            </ng-container>\n          </float-ui-content>\n          <div\n            class=\"str-chat__message-bubble str-chat-angular__message-bubble\"\n            [class.str-chat-angular__message-bubble--attachment-modal-open]=\"\n              nestedModalState === 'opened'\n            \"\n            data-testid=\"message-bubble\"\n            [floatUiLoose]=\"messageMenuFloat\"\n            #messageMenuTrigger=\"floatUiLoose\"\n            #messageBubble\n            looseTrigger=\"none\"\n            [hideOnScroll]=\"false\"\n            [hideOnClickOutside]=\"true\"\n            [hideOnMouseLeave]=\"false\"\n            [disableAnimation]=\"true\"\n            [preventOverflow]=\"true\"\n            (onShown)=\"areMessageOptionsOpen = true\"\n            (onHidden)=\"areMessageOptionsOpen = false\"\n            [positionFixed]=\"true\"\n          >\n            <ng-container *ngIf=\"hasAttachment && !message?.quoted_message\">\n              <div class=\"str-chat__attachments-container\">\n                <ng-container\n                  *ngTemplateOutlet=\"attachmentsTemplate\"\n                ></ng-container>\n              </div>\n            </ng-container>\n            <ng-container\n              *ngIf=\"\n                message?.poll_id &&\n                (customTemplatesService.pollTemplate$ | async)\n              \"\n            >\n              <ng-container\n                *ngTemplateOutlet=\"\n                  (customTemplatesService.pollTemplate$ | async)!;\n                  context: {\n                    pollId: message?.poll_id,\n                    messageId: message?.id,\n                    isQuote: false\n                  }\n                \"\n              ></ng-container>\n            </ng-container>\n            <div\n              *ngIf=\"\n                message?.text || (message?.quoted_message && hasAttachment)\n              \"\n              class=\"str-chat__message-text\"\n              tabindex=\"0\"\n              [class.str-chat__message-text--pointer-cursor]=\"\n                (message?.status === 'failed' &&\n                  message?.errorStatusCode !== 403) ||\n                (this.message?.type === 'error' &&\n                  this.message?.moderation_details) ||\n                message?.message_text_updated_at\n              \"\n              (click)=\"messageClicked()\"\n              (keyup.enter)=\"messageClicked()\"\n            >\n              <div\n                data-testid=\"inner-message\"\n                class=\"str-chat__message-text-inner str-chat__message-simple-text-inner\"\n                [class.str-chat__message-light-text-inner--has-attachment]=\"\n                  hasAttachment\n                \"\n              >\n                <ng-container *ngTemplateOutlet=\"quotedMessage\"></ng-container>\n                <ng-container *ngIf=\"hasAttachment && message?.quoted_message\">\n                  <ng-container\n                    *ngTemplateOutlet=\"attachmentsTemplate\"\n                  ></ng-container>\n                </ng-container>\n                <div\n                  *ngIf=\"message?.type === 'error'\"\n                  data-testid=\"client-error-message\"\n                  class=\"str-chat__simple-message--error-message str-chat__message--error-message\"\n                >\n                  <ng-container *ngIf=\"!message?.moderation_details\">{{\n                    \"streamChat.Error \u00B7 Unsent\" | translate\n                  }}</ng-container>\n                </div>\n                <div\n                  *ngIf=\"message?.status === 'failed'\"\n                  data-testid=\"error-message\"\n                  class=\"str-chat__simple-message--error-message str-chat__message--error-message\"\n                >\n                  {{\n                    (message?.errorStatusCode === 403\n                      ? \"streamChat.Message Failed \u00B7 Unauthorized\"\n                      : \"streamChat.Message Failed \u00B7 Click to try again\"\n                    ) | translate\n                  }}\n                </div>\n                <ng-container\n                  *ngTemplateOutlet=\"\n                    (customTemplatesService.messageTextTemplate$ | async) ||\n                      defaultText;\n                    context: getMessageTextContext()\n                  \"\n                ></ng-container>\n                <ng-template\n                  #defaultText\n                  let-message=\"message\"\n                  let-isQuoted=\"isQuoted\"\n                  let-shouldTranslate=\"shouldTranslate\"\n                >\n                  <stream-message-text\n                    [message]=\"message\"\n                    [isQuoted]=\"isQuoted\"\n                    [shouldTranslate]=\"shouldTranslate\"\n                    data-testid=\"quoted-message-text\"\n                  ></stream-message-text>\n                </ng-template>\n              </div>\n            </div>\n            <stream-icon-placeholder\n              class=\"str-chat__message-error-icon\"\n              icon=\"error\"\n            ></stream-icon-placeholder>\n          </div>\n        </div>\n        <ng-container\n          *ngTemplateOutlet=\"replyCountButton; context: { message: message }\"\n        ></ng-container>\n\n        <ng-container *ngTemplateOutlet=\"messageDateAndSender\"></ng-container>\n      </ng-container>\n    </ng-container>\n  </div>\n\n  <ng-template #deletedMessage>\n    <div data-testid=\"message-deleted-component\">\n      <div class=\"str-chat__message--deleted-inner\" translate>\n        streamChat.This message was deleted...\n      </div>\n    </div>\n  </ng-template>\n\n  <ng-template #systemMessage>\n    <ng-container\n      *ngTemplateOutlet=\"\n        (customTemplatesService.systemMessageTemplate$ | async) ||\n          defaultSystemMessage;\n        context: getMessageContext()\n      \"\n    ></ng-container>\n    <ng-template #defaultSystemMessage let-messageInput=\"message\">\n      <div data-testid=\"system-message\" class=\"str-chat__message--system\">\n        <div class=\"str-chat__message--system__text\">\n          <div class=\"str-chat__message--system__line\"></div>\n          <p>{{ messageInput?.text }}</p>\n          <div class=\"str-chat__message--system__line\"></div>\n        </div>\n        <div class=\"str-chat__message--system__date\">\n          {{ parsedDate }}\n        </div>\n      </div>\n    </ng-template>\n  </ng-template>\n\n  <ng-template #quotedMessage>\n    <div\n      *ngIf=\"message?.quoted_message\"\n      class=\"quoted-message str-chat__quoted-message-preview\"\n      data-testid=\"quoted-message-container\"\n      [class.mine]=\"isSentByCurrentUser\"\n      (click)=\"\n        jumpToMessage(\n          (message?.quoted_message)!.id,\n          message?.quoted_message?.parent_id\n        )\n      \"\n      (keyup.enter)=\"\n        jumpToMessage(\n          (message?.quoted_message)!.id,\n          message?.quoted_message?.parent_id\n        )\n      \"\n    >\n      <stream-avatar-placeholder\n        data-testid=\"qouted-message-avatar\"\n        class=\"str-chat-angular__avatar-host str-chat__message-sender-avatar\"\n        type=\"user\"\n        location=\"quoted-message-sender\"\n        [imageUrl]=\"message?.quoted_message?.user?.image\"\n        [name]=\"\n          message?.quoted_message?.user?.name ||\n          message?.quoted_message?.user?.id\n        \"\n        [user]=\"message?.quoted_message?.user || undefined\"\n      ></stream-avatar-placeholder>\n      <div class=\"quoted-message-inner str-chat__quoted-message-bubble\">\n        <ng-container\n          *ngIf=\"\n            message?.quoted_message?.attachments &&\n            message?.quoted_message?.attachments?.length\n          \"\n        >\n          <ng-template\n            #defaultAttachments\n            let-messageId=\"messageId\"\n            let-attachments=\"attachments\"\n            let-parentMessageId=\"parentMessageId\"\n            let-imageModalStateChangeHandler=\"imageModalStateChangeHandler\"\n          >\n            <stream-attachment-list\n              [messageId]=\"messageId\"\n              [attachments]=\"attachments\"\n              [parentMessageId]=\"parentMessageId\"\n              (imageModalStateChange)=\"imageModalStateChangeHandler($event)\"\n            ></stream-attachment-list>\n          </ng-template>\n          <ng-container\n            *ngTemplateOutlet=\"\n              (customTemplatesService.attachmentListTemplate$ | async) ||\n                defaultAttachments;\n              context: getQuotedMessageAttachmentListContext()\n            \"\n          ></ng-container>\n        </ng-container>\n        <ng-container\n          *ngIf=\"\n            message?.quoted_message?.poll_id &&\n            (customTemplatesService.pollTemplate$ | async)\n          \"\n        >\n          <ng-container\n            *ngTemplateOutlet=\"\n              (customTemplatesService.pollTemplate$ | async)!;\n              context: {\n                pollId: message?.quoted_message?.poll_id,\n                messageId: message?.quoted_message?.id,\n                isQuote: true\n              }\n            \"\n          ></ng-container>\n        </ng-container>\n        <ng-container *ngIf=\"message?.quoted_message\">\n          <ng-container\n            *ngTemplateOutlet=\"\n              (customTemplatesService.messageTextTemplate$ | async) ||\n                defaultText;\n              context: getQuotedMessageTextContext()\n            \"\n          ></ng-container>\n          <ng-template\n            #defaultText\n            let-message=\"message\"\n            let-isQuoted=\"isQuoted\"\n            let-shouldTranslate=\"shouldTranslate\"\n          >\n            <stream-message-text\n              [message]=\"message\"\n              [isQuoted]=\"isQuoted\"\n              [shouldTranslate]=\"shouldTranslate\"\n              data-testid=\"quoted-message-text\"\n            ></stream-message-text>\n          </ng-template>\n        </ng-container>\n      </div>\n    </div>\n  </ng-template>\n\n  <ng-template #messageDateAndSender>\n    <ng-container>\n      <div\n        *ngIf=\"shouldDisplayTranslationNotice\"\n        class=\"str-chat__translation-notice\"\n        data-testid=\"translation-notice\"\n      >\n        <button\n          *ngIf=\"displayedMessageTextContent === 'translation'\"\n          data-testid=\"see-original\"\n          translate\n          (click)=\"displayOriginalMessage()\"\n          (keyup.enter)=\"displayOriginalMessage()\"\n        >\n          streamChat.See original (automatically translated)\n        </button>\n        <button\n          *ngIf=\"displayedMessageTextContent === 'original'\"\n          data-testid=\"see-translation\"\n          translate\n          (click)=\"displayTranslatedMessage()\"\n          (keyup.enter)=\"displayTranslatedMessage()\"\n        >\n          streamChat.See translation\n        </button>\n      </div>\n      <ng-container\n        *ngIf=\"customTemplatesService.customMessageMetadataTemplate$ | async\"\n      >\n        <div class=\"str-chat__custom-message-metadata\">\n          <ng-container\n            *ngTemplateOutlet=\"\n              (customTemplatesService.customMessageMetadataTemplate$ | async)!;\n              context: getMessageMetadataContext()\n            \"\n          ></ng-container>\n        </div>\n      </ng-container>\n      <div\n        class=\"str-chat__message-data str-chat__message-simple-data str-chat__message-metadata\"\n      >\n        <ng-container *ngTemplateOutlet=\"messageStatus\"></ng-container>\n\n        <span\n          *ngIf=\"!isSentByCurrentUser\"\n          data-testid=\"sender\"\n          class=\"str-chat__message-simple-name str-chat__message-sender-name\"\n        >\n          {{ message?.user?.name ? message?.user?.name : message?.user?.id }}\n        </span>\n        <span\n          data-testid=\"date\"\n          class=\"str-chat__message-simple-timestamp str-chat__message-simple-time\"\n        >\n          {{ parsedDate }}\n        </span>\n        <ng-container *ngIf=\"message?.message_text_updated_at\">\n          <span\n            data-testid=\"edited-flag\"\n            class=\"str-chat__mesage-simple-edited\"\n            translate\n            >streamChat.Edited</span\n          >\n          <div\n            data-testid=\"edited-timestamp\"\n            class=\"str-chat__message-edited-timestamp\"\n            [ngClass]=\"{\n              'str-chat__message-edited-timestamp--open': isEditedFlagOpened,\n              'str-chat__message-edited-timestamp--collapsed':\n                !isEditedFlagOpened\n            }\"\n          >\n            <span translate>streamChat.Edited</span>\n            <time\n              dateTime=\"{{ message?.message_text_updated_at }}\"\n              title=\"{{ message?.message_text_updated_at }}\"\n            >\n              {{ pasedEditedDate }}\n            </time>\n          </div>\n        </ng-container>\n      </div>\n    </ng-container>\n  </ng-template>\n\n  <ng-template #messageStatus>\n    <ng-container\n      *ngIf=\"\n        isSentByCurrentUser &&\n        ((isLastSentMessage && message?.status === 'received') ||\n          message?.status === 'sending')\n      \"\n    >\n      <ng-container *ngIf=\"message?.status === 'sending'; else sentStatus\">\n        <ng-container *ngTemplateOutlet=\"sendingStatus\"></ng-container>\n      </ng-container>\n      <ng-template #sentStatus>\n        <ng-container\n          *ngIf=\"\n            mode === 'main' &&\n              isMessageDeliveredAndRead &&\n              canDisplayReadStatus;\n            else deliveredStatus\n          \"\n        >\n          <ng-container *ngTemplateOutlet=\"readStatus\"></ng-container>\n        </ng-container>\n      </ng-template>\n      <ng-template #deliveredStatus>\n        <ng-container\n          *ngTemplateOutlet=\"\n            (customTemplatesService.deliveredStatusTemplate$ | async) ||\n              defaultDeliveredStatus;\n            context: getDeliveredStatusContext()\n          \"\n        ></ng-container>\n      </ng-template>\n      <ng-template #defaultDeliveredStatus>\n        <span\n          *ngIf=\"mode === 'main'\"\n          class=\"str-chat__message-simple-status str-chat__message-simple-status-angular str-chat__message-status\"\n          data-testid=\"delivered-indicator\"\n          tabindex=\"0\"\n          [floatUiLoose]=\"floatingContent\"\n          loosePlacement=\"top\"\n          [looseTrigger]=\"hasTouchSupport ? 'click' : 'hover'\"\n          [disableAnimation]=\"true\"\n          [hideOnClickOutside]=\"true\"\n          [positionFixed]=\"true\"\n          [preventOverflow]=\"true\"\n        >\n          <float-ui-content #floatingContent>\n            <div class=\"str-chat__tooltip str-chat__tooltip-angular\">\n              {{ \"streamChat.Delivered\" | translate }}\n            </div>\n          </float-ui-content>\n          <stream-icon-placeholder\n            data-testid=\"delivered-icon\"\n            icon=\"delivered\"\n          ></stream-icon-placeholder>\n        </span>\n      </ng-template>\n      <ng-template #sendingStatus>\n        <ng-container\n          *ngTemplateOutlet=\"\n            (customTemplatesService.sendingStatusTemplate$ | async) ||\n              defaultSendingStatus;\n            context: getSendingStatusContext()\n          \"\n        ></ng-container>\n      </ng-template>\n      <ng-template #defaultSendingStatus>\n        <span\n          class=\"str-chat__message-simple-status str-chat__message-simple-status-angular str-chat__message-status\"\n          data-testid=\"sending-indicator\"\n          tabindex=\"0\"\n          [floatUiLoose]=\"floatingContent\"\n          loosePlacement=\"top\"\n          [looseTrigger]=\"hasTouchSupport ? 'click' : 'hover'\"\n          [disableAnimation]=\"true\"\n          [hideOnClickOutside]=\"true\"\n          [positionFixed]=\"true\"\n          [preventOverflow]=\"true\"\n        >\n          <float-ui-content #floatingContent>\n            <div class=\"str-chat__tooltip str-chat__tooltip-angular\">\n              {{ \"streamChat.Sending...\" | translate }}\n            </div>\n          </float-ui-content>\n          <stream-loading-indicator-placeholder\n            data-testid=\"loading-indicator\"\n          ></stream-loading-indicator-placeholder>\n        </span>\n      </ng-template>\n      <ng-template #readStatus>\n        <ng-container\n          *ngTemplateOutlet=\"\n            (customTemplatesService.readStatusTemplate$ | async) ||\n              defaultReadStatus;\n            context: getReadStatusContext()\n          \"\n        ></ng-container>\n      </ng-template>\n      <ng-template #defaultReadStatus let-readByText=\"readByText\">\n        <span\n          class=\"str-chat__message-simple-status str-chat__message-simple-status-angular str-chat__message-status\"\n          data-testid=\"read-indicator\"\n          tabindex=\"0\"\n          [floatUiLoose]=\"floatingContent\"\n          loosePlacement=\"top\"\n          [looseTrigger]=\"hasTouchSupport ? 'click' : 'hover'\"\n          [disableAnimation]=\"true\"\n          [hideOnClickOutside]=\"true\"\n          [positionFixed]=\"true\"\n          [preventOverflow]=\"true\"\n        >\n          <float-ui-content #floatingContent>\n            <div\n              class=\"str-chat__tooltip str-chat__tooltip-angular\"\n              data-testid=\"read-by-tooltip\"\n            >\n              {{ readByText }}\n            </div>\n          </float-ui-content>\n          <stream-icon-placeholder icon=\"read\"></stream-icon-placeholder>\n        </span>\n      </ng-template>\n    </ng-container>\n  </ng-template>\n\n  <ng-template #replyCountButton>\n    <div\n      class=\"str-chat__message-simple-reply-button str-chat__message-replies-count-button-wrapper\"\n    >\n      <ng-container *ngIf=\"shouldDisplayThreadLink\">\n        <ng-template\n          *ngTemplateOutlet=\"\n            (customTemplatesService.threadLinkButton$ | async) || defaultButton;\n            context: { message: message }\n          \"\n        ></ng-template>\n      </ng-container>\n      <ng-template #defaultButton let-message=\"message\">\n        <button\n          class=\"str-chat__message-replies-count-button\"\n          data-testid=\"reply-count-button\"\n          (click)=\"setAsActiveParentMessage()\"\n        >\n          {{message?.reply_count === 1 ? ('streamChat.1 reply' | translate) : ('streamChat.{{ replyCount }}\n          replies' | translate:replyCountParam)}}\n        </button>\n      </ng-template>\n    </div>\n  </ng-template>\n\n  <ng-template #attachmentsTemplate>\n    <ng-template\n      #defaultAttachments\n      let-messageId=\"messageId\"\n      let-attachments=\"attachments\"\n      let-parentMessageId=\"parentMessageId\"\n      let-imageModalStateChangeHandler=\"imageModalStateChangeHandler\"\n    >\n      <stream-attachment-list\n        [messageId]=\"messageId\"\n        [attachments]=\"attachments\"\n        [parentMessageId]=\"parentMessageId\"\n        (imageModalStateChange)=\"imageModalStateChangeHandler($event)\"\n      ></stream-attachment-list>\n    </ng-template>\n    <ng-container\n      *ngTemplateOutlet=\"\n        (customTemplatesService.attachmentListTemplate$ | async) ||\n          defaultAttachments;\n        context: getAttachmentListContext()\n      \"\n    ></ng-container>\n  </ng-template>\n</ng-template>\n" }]
-        }], ctorParameters: function () { return [{ type: ChatClientService }, { type: ChannelService }, { type: CustomTemplatesService }, { type: i0.ChangeDetectorRef }, { type: DateParserService }, { type: MessageActionsService }, { type: i0.NgZone }, { type: i6.TranslateService }]; }, propDecorators: { message: [{
+            args: [{ selector: 'stream-message', changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-container\n  *ngIf=\"\n    message?.type === 'error' &&\n      (message?.moderation_details?.action ===\n        'MESSAGE_RESPONSE_ACTION_REMOVE' ||\n        message?.moderation?.action === 'remove');\n    else notBlockedMessage\n  \"\n>\n  <ng-container\n    *ngTemplateOutlet=\"\n      (customTemplatesService.messageBlockedTemplate$ | async) ||\n        defaultBlockedMessage;\n      context: getMessageBlockedContext()\n    \"\n  />\n  <ng-template #defaultBlockedMessage>\n    <stream-message-blocked\n      [message]=\"message\"\n      [isMyMessage]=\"isSentByCurrentUser\"\n    />\n  </ng-template>\n</ng-container>\n<ng-template #notBlockedMessage>\n  <div\n    data-testid=\"message-container\"\n    class=\"str-chat__message-simple str-chat__message str-chat__message--{{\n      message?.type\n    }} str-chat__message--{{ message?.status }} {{\n      message?.text ? 'str-chat__message--has-text' : 'has-no-text'\n    }} str-chat__message-menu-{{ areMessageOptionsOpen ? 'opened' : 'closed' }}\"\n    [class.str-chat__message--me]=\"isSentByCurrentUser\"\n    [class.str-chat__message--other]=\"!isSentByCurrentUser\"\n    [class.str-chat__message-simple--me]=\"isSentByCurrentUser\"\n    [class.str-chat__message--has-attachment]=\"hasAttachment\"\n    [class.str-chat__message--with-reactions]=\"hasReactions\"\n    [class.str-chat__message--highlighted]=\"isHighlighted\"\n    [class.str-chat__message-with-thread-link]=\"shouldDisplayThreadLink\"\n    [class.str-chat__message-send-can-be-retried]=\"\n      (message?.status === 'failed' && message?.errorStatusCode !== 403) ||\n      (message?.type === 'error' && message?.moderation_details)\n    \"\n    [class.str-chat__message-with-touch-support]=\"hasTouchSupport\"\n    [class.str-chat__message-without-touch-support]=\"!hasTouchSupport\"\n  >\n    <ng-container *ngIf=\"!message?.deleted_at; else deletedMessage\">\n      <ng-container *ngIf=\"message?.type !== 'system'; else systemMessage\">\n        <stream-avatar-placeholder\n          data-testid=\"avatar\"\n          class=\"str-chat-angular__avatar-host str-chat__message-sender-avatar\"\n          type=\"user\"\n          location=\"message-sender\"\n          [imageUrl]=\"message?.user?.image\"\n          [name]=\"message?.user?.name || message?.user?.id\"\n          [user]=\"message?.user || undefined\"\n        />\n        <div class=\"str-chat__message-inner\">\n          <div\n            *ngIf=\"!hasTouchSupport && areOptionsVisible\"\n            class=\"str-chat__message-simple__actions str-chat__message-options\"\n            data-testid=\"message-options\"\n            [class.str-chat__message-actions-open]=\"areMessageOptionsOpen\"\n          >\n            <div\n              #messageActionsToggle\n              data-testid=\"message-actions-container\"\n              class=\"str-chat__message-actions-container str-chat__message-simple__actions__action str-chat__message-simple__actions__action--options\"\n              [floatUiLoose]=\"messageMenuFloat\"\n              [looseTrigger]=\"\n                messageActionsService.customActionClickHandler\n                  ? 'none'\n                  : 'click'\n              \"\n              [hideOnScroll]=\"false\"\n              [hideOnClickOutside]=\"true\"\n              [hideOnMouseLeave]=\"false\"\n              [disableAnimation]=\"false\"\n              [preventOverflow]=\"true\"\n              [positionFixed]=\"true\"\n              (onSHown)=\"areMessageOptionsOpen = true\"\n              (onHidden)=\"areMessageOptionsOpen = false\"\n            >\n              <div\n                *ngIf=\"visibleMessageActionsCount > 0\"\n                class=\"str-chat__message-actions-box-button\"\n                data-testid=\"message-options-button\"\n                (click)=\"messageOptionsButtonClicked()\"\n                (keyup.enter)=\"messageOptionsButtonClicked()\"\n              >\n                <stream-icon-placeholder\n                  icon=\"action\"\n                  class=\"str-chat__message-action-icon\"\n                />\n              </div>\n            </div>\n          </div>\n          <ng-container\n            *ngIf=\"\n              customTemplatesService.customMessageMetadataInsideBubbleTemplate$\n                | async\n            \"\n          >\n            <ng-template\n              *ngTemplateOutlet=\"\n                (customTemplatesService.customMessageMetadataInsideBubbleTemplate$\n                  | async)!;\n                context: { message: message }\n              \"\n            ></ng-template>\n          </ng-container>\n          <div class=\"str-chat__message-reactions-host\">\n            <ng-template\n              #defaultMessageReactions\n              let-messageReactionCounts=\"messageReactionCounts\"\n              let-latestReactions=\"latestReactions\"\n              let-messageId=\"messageId\"\n              let-ownReactions=\"ownReactions\"\n              let-messageReactionGroups=\"messageReactionGroups\"\n            >\n              <stream-message-reactions\n                [messageReactionCounts]=\"messageReactionCounts\"\n                [latestReactions]=\"latestReactions\"\n                [messageId]=\"messageId\"\n                [ownReactions]=\"ownReactions\"\n                [messageReactionGroups]=\"messageReactionGroups\"\n              />\n            </ng-template>\n            <ng-container\n              *ngTemplateOutlet=\"\n                (customTemplatesService.messageReactionsTemplate$ | async) ||\n                  defaultMessageReactions;\n                context: getMessageReactionsContext()\n              \"\n            />\n          </div>\n          <float-ui-content #messageMenuFloat>\n            <ng-template\n              #defaultMessageActionsBox\n              let-isMine=\"isMine\"\n              let-messageInput=\"message\"\n              let-enabledActions=\"enabledActions\"\n              let-messageTextHtmlElement=\"messageTextHtmlElement\"\n            >\n              <stream-message-actions-box\n                [isMine]=\"isMine\"\n                [message]=\"messageInput\"\n                [enabledActions]=\"enabledActions\"\n                [messageTextHtmlElement]=\"messageTextHtmlElement\"\n              />\n            </ng-template>\n            <ng-container>\n              <div\n                (click)=\"messageActionsBoxClicked(messageMenuFloat)\"\n                (keyup.enter)=\"messageActionsBoxClicked(messageMenuFloat)\"\n              >\n                <ng-container\n                  *ngTemplateOutlet=\"\n                    (customTemplatesService.messageActionsBoxTemplate$\n                      | async) || defaultMessageActionsBox;\n                    context: getMessageActionsBoxContext()\n                  \"\n                />\n              </div>\n            </ng-container>\n          </float-ui-content>\n          <div\n            class=\"str-chat__message-bubble str-chat-angular__message-bubble\"\n            [class.str-chat-angular__message-bubble--attachment-modal-open]=\"\n              nestedModalState === 'opened'\n            \"\n            data-testid=\"message-bubble\"\n            [floatUiLoose]=\"messageMenuFloat\"\n            #messageMenuTrigger=\"floatUiLoose\"\n            #messageBubble\n            looseTrigger=\"none\"\n            [hideOnScroll]=\"false\"\n            [hideOnClickOutside]=\"true\"\n            [hideOnMouseLeave]=\"false\"\n            [disableAnimation]=\"true\"\n            [preventOverflow]=\"true\"\n            (onShown)=\"areMessageOptionsOpen = true\"\n            (onHidden)=\"areMessageOptionsOpen = false\"\n            [positionFixed]=\"true\"\n          >\n            <ng-container *ngIf=\"hasAttachment && !message?.quoted_message\">\n              <div class=\"str-chat__attachments-container\">\n                <ng-container *ngTemplateOutlet=\"attachmentsTemplate\" />\n              </div>\n            </ng-container>\n            <ng-container\n              *ngIf=\"\n                message?.poll_id &&\n                (customTemplatesService.pollTemplate$ | async)\n              \"\n            >\n              <ng-container\n                *ngTemplateOutlet=\"\n                  (customTemplatesService.pollTemplate$ | async)!;\n                  context: {\n                    pollId: message!.poll_id!,\n                    messageId: message!.id,\n                    isQuote: false\n                  }\n                \"\n              />\n            </ng-container>\n            <div\n              *ngIf=\"\n                message?.text || (message?.quoted_message && hasAttachment)\n              \"\n              class=\"str-chat__message-text\"\n              tabindex=\"0\"\n              [class.str-chat__message-text--pointer-cursor]=\"\n                (message?.status === 'failed' &&\n                  message?.errorStatusCode !== 403) ||\n                (this.message?.type === 'error' &&\n                  this.message?.moderation_details) ||\n                message?.message_text_updated_at\n              \"\n              (click)=\"messageClicked()\"\n              (keyup.enter)=\"messageClicked()\"\n            >\n              <div\n                data-testid=\"inner-message\"\n                class=\"str-chat__message-text-inner str-chat__message-simple-text-inner\"\n                [class.str-chat__message-light-text-inner--has-attachment]=\"\n                  hasAttachment\n                \"\n              >\n                <ng-container *ngTemplateOutlet=\"quotedMessage\" />\n                <ng-container *ngIf=\"hasAttachment && message?.quoted_message\">\n                  <ng-container *ngTemplateOutlet=\"attachmentsTemplate\" />\n                </ng-container>\n                <div\n                  *ngIf=\"message?.type === 'error'\"\n                  data-testid=\"client-error-message\"\n                  class=\"str-chat__simple-message--error-message str-chat__message--error-message\"\n                >\n                  <ng-container *ngIf=\"!message?.moderation_details\">{{\n                    \"streamChat.Error \u00B7 Unsent\" | translate\n                  }}</ng-container>\n                </div>\n                <div\n                  *ngIf=\"message?.status === 'failed'\"\n                  data-testid=\"error-message\"\n                  class=\"str-chat__simple-message--error-message str-chat__message--error-message\"\n                >\n                  {{\n                    (message?.errorStatusCode === 403\n                      ? \"streamChat.Message Failed \u00B7 Unauthorized\"\n                      : \"streamChat.Message Failed \u00B7 Click to try again\"\n                    ) | translate\n                  }}\n                </div>\n                <ng-container\n                  *ngTemplateOutlet=\"\n                    (customTemplatesService.messageTextTemplate$ | async) ||\n                      defaultText;\n                    context: getMessageTextContext()\n                  \"\n                />\n                <ng-template\n                  #defaultText\n                  let-message=\"message\"\n                  let-isQuoted=\"isQuoted\"\n                  let-shouldTranslate=\"shouldTranslate\"\n                >\n                  <stream-message-text\n                    [message]=\"message\"\n                    [isQuoted]=\"isQuoted\"\n                    [shouldTranslate]=\"shouldTranslate\"\n                    data-testid=\"quoted-message-text\"\n                  />\n                </ng-template>\n              </div>\n            </div>\n            <stream-icon-placeholder\n              class=\"str-chat__message-error-icon\"\n              icon=\"error\"\n            />\n          </div>\n        </div>\n        <ng-container\n          *ngTemplateOutlet=\"replyCountButton; context: { message: message }\"\n        />\n\n        <ng-container *ngTemplateOutlet=\"messageDateAndSender\" />\n      </ng-container>\n    </ng-container>\n  </div>\n\n  <ng-template #deletedMessage>\n    <div data-testid=\"message-deleted-component\">\n      <div class=\"str-chat__message--deleted-inner\" translate>\n        streamChat.This message was deleted...\n      </div>\n    </div>\n  </ng-template>\n\n  <ng-template #systemMessage>\n    <ng-container\n      *ngTemplateOutlet=\"\n        (customTemplatesService.systemMessageTemplate$ | async) ||\n          defaultSystemMessage;\n        context: getMessageContext()\n      \"\n    />\n    <ng-template #defaultSystemMessage let-messageInput=\"message\">\n      <div data-testid=\"system-message\" class=\"str-chat__message--system\">\n        <div class=\"str-chat__message--system__text\">\n          <div class=\"str-chat__message--system__line\"></div>\n          <p>{{ messageInput?.text }}</p>\n          <div class=\"str-chat__message--system__line\"></div>\n        </div>\n        <div class=\"str-chat__message--system__date\">\n          {{ parsedDate }}\n        </div>\n      </div>\n    </ng-template>\n  </ng-template>\n\n  <ng-template #quotedMessage>\n    <div\n      *ngIf=\"message?.quoted_message\"\n      class=\"quoted-message str-chat__quoted-message-preview\"\n      data-testid=\"quoted-message-container\"\n      [class.mine]=\"isSentByCurrentUser\"\n      (click)=\"\n        jumpToMessage(\n          (message?.quoted_message)!.id,\n          message?.quoted_message?.parent_id\n        )\n      \"\n      (keyup.enter)=\"\n        jumpToMessage(\n          (message?.quoted_message)!.id,\n          message?.quoted_message?.parent_id\n        )\n      \"\n    >\n      <stream-avatar-placeholder\n        data-testid=\"qouted-message-avatar\"\n        class=\"str-chat-angular__avatar-host str-chat__message-sender-avatar\"\n        type=\"user\"\n        location=\"quoted-message-sender\"\n        [imageUrl]=\"message?.quoted_message?.user?.image\"\n        [name]=\"\n          message?.quoted_message?.user?.name ||\n          message?.quoted_message?.user?.id\n        \"\n        [user]=\"message?.quoted_message?.user || undefined\"\n      />\n      <div class=\"quoted-message-inner str-chat__quoted-message-bubble\">\n        <ng-container\n          *ngIf=\"\n            message?.quoted_message?.attachments &&\n            message?.quoted_message?.attachments?.length\n          \"\n        >\n          <ng-template\n            #defaultAttachments\n            let-messageId=\"messageId\"\n            let-attachments=\"attachments\"\n            let-parentMessageId=\"parentMessageId\"\n            let-imageModalStateChangeHandler=\"imageModalStateChangeHandler\"\n          >\n            <stream-attachment-list\n              [messageId]=\"messageId\"\n              [attachments]=\"attachments\"\n              [parentMessageId]=\"parentMessageId\"\n              (imageModalStateChange)=\"imageModalStateChangeHandler($event)\"\n            />\n          </ng-template>\n          <ng-container\n            *ngTemplateOutlet=\"\n              (customTemplatesService.attachmentListTemplate$ | async) ||\n                defaultAttachments;\n              context: getQuotedMessageAttachmentListContext()\n            \"\n          />\n        </ng-container>\n        <ng-container\n          *ngIf=\"\n            message?.quoted_message?.poll_id &&\n            (customTemplatesService.pollTemplate$ | async)\n          \"\n        >\n          <ng-container\n            *ngTemplateOutlet=\"\n              (customTemplatesService.pollTemplate$ | async)!;\n              context: {\n                pollId: message?.quoted_message?.poll_id,\n                messageId: message?.quoted_message?.id,\n                isQuote: true\n              }\n            \"\n          />\n        </ng-container>\n        <ng-container *ngIf=\"message?.quoted_message\">\n          <ng-container\n            *ngTemplateOutlet=\"\n              (customTemplatesService.messageTextTemplate$ | async) ||\n                defaultText;\n              context: getQuotedMessageTextContext()\n            \"\n          />\n          <ng-template\n            #defaultText\n            let-message=\"message\"\n            let-isQuoted=\"isQuoted\"\n            let-shouldTranslate=\"shouldTranslate\"\n          >\n            <stream-message-text\n              [message]=\"message\"\n              [isQuoted]=\"isQuoted\"\n              [shouldTranslate]=\"shouldTranslate\"\n              data-testid=\"quoted-message-text\"\n            />\n          </ng-template>\n        </ng-container>\n      </div>\n    </div>\n  </ng-template>\n\n  <ng-template #messageDateAndSender>\n    <ng-container>\n      <div\n        *ngIf=\"shouldDisplayTranslationNotice\"\n        class=\"str-chat__translation-notice\"\n        data-testid=\"translation-notice\"\n      >\n        <button\n          *ngIf=\"displayedMessageTextContent === 'translation'\"\n          data-testid=\"see-original\"\n          translate\n          (click)=\"displayOriginalMessage()\"\n          (keyup.enter)=\"displayOriginalMessage()\"\n        >\n          streamChat.See original (automatically translated)\n        </button>\n        <button\n          *ngIf=\"displayedMessageTextContent === 'original'\"\n          data-testid=\"see-translation\"\n          translate\n          (click)=\"displayTranslatedMessage()\"\n          (keyup.enter)=\"displayTranslatedMessage()\"\n        >\n          streamChat.See translation\n        </button>\n      </div>\n      <ng-container\n        *ngIf=\"customTemplatesService.customMessageMetadataTemplate$ | async\"\n      >\n        <div class=\"str-chat__custom-message-metadata\">\n          <ng-container\n            *ngTemplateOutlet=\"\n              (customTemplatesService.customMessageMetadataTemplate$ | async)!;\n              context: getMessageMetadataContext()\n            \"\n          />\n        </div>\n      </ng-container>\n      <div\n        class=\"str-chat__message-data str-chat__message-simple-data str-chat__message-metadata\"\n      >\n        <ng-container *ngTemplateOutlet=\"messageStatus\" />\n\n        <span\n          *ngIf=\"!isSentByCurrentUser\"\n          data-testid=\"sender\"\n          class=\"str-chat__message-simple-name str-chat__message-sender-name\"\n        >\n          {{ message?.user?.name ? message?.user?.name : message?.user?.id }}\n        </span>\n        <span\n          data-testid=\"date\"\n          class=\"str-chat__message-simple-timestamp str-chat__message-simple-time\"\n        >\n          {{ parsedDate }}\n        </span>\n        <ng-container *ngIf=\"message?.message_text_updated_at\">\n          <span\n            data-testid=\"edited-flag\"\n            class=\"str-chat__mesage-simple-edited\"\n            translate\n            >streamChat.Edited</span\n          >\n          <div\n            data-testid=\"edited-timestamp\"\n            class=\"str-chat__message-edited-timestamp\"\n            [ngClass]=\"{\n              'str-chat__message-edited-timestamp--open': isEditedFlagOpened,\n              'str-chat__message-edited-timestamp--collapsed':\n                !isEditedFlagOpened\n            }\"\n          >\n            <span translate>streamChat.Edited</span>\n            <time\n              dateTime=\"{{ message?.message_text_updated_at }}\"\n              title=\"{{ message?.message_text_updated_at }}\"\n            >\n              {{ pasedEditedDate }}\n            </time>\n          </div>\n        </ng-container>\n      </div>\n    </ng-container>\n  </ng-template>\n\n  <ng-template #messageStatus>\n    <ng-container\n      *ngIf=\"\n        isSentByCurrentUser &&\n        ((isLastSentMessage && message?.status === 'received') ||\n          message?.status === 'sending')\n      \"\n    >\n      <ng-container *ngIf=\"message?.status === 'sending'; else sentStatus\">\n        <ng-container *ngTemplateOutlet=\"sendingStatus\" />\n      </ng-container>\n      <ng-template #sentStatus>\n        <ng-container\n          *ngIf=\"\n            mode === 'main' &&\n              isMessageDeliveredAndRead &&\n              canDisplayReadStatus;\n            else deliveredStatus\n          \"\n        >\n          <ng-container *ngTemplateOutlet=\"readStatus\" />\n        </ng-container>\n      </ng-template>\n      <ng-template #deliveredStatus>\n        <ng-container\n          *ngTemplateOutlet=\"\n            (customTemplatesService.deliveredStatusTemplate$ | async) ||\n              defaultDeliveredStatus;\n            context: getDeliveredStatusContext()\n          \"\n        />\n      </ng-template>\n      <ng-template #defaultDeliveredStatus>\n        <span\n          *ngIf=\"mode === 'main'\"\n          class=\"str-chat__message-simple-status str-chat__message-simple-status-angular str-chat__message-status\"\n          data-testid=\"delivered-indicator\"\n          tabindex=\"0\"\n          [floatUiLoose]=\"floatingContent\"\n          loosePlacement=\"top\"\n          [looseTrigger]=\"hasTouchSupport ? 'click' : 'hover'\"\n          [disableAnimation]=\"true\"\n          [hideOnClickOutside]=\"true\"\n          [positionFixed]=\"true\"\n          [preventOverflow]=\"true\"\n        >\n          <float-ui-content #floatingContent>\n            <div class=\"str-chat__tooltip str-chat__tooltip-angular\">\n              {{ \"streamChat.Delivered\" | translate }}\n            </div>\n          </float-ui-content>\n          <stream-icon-placeholder\n            data-testid=\"delivered-icon\"\n            icon=\"delivered\"\n          />\n        </span>\n      </ng-template>\n      <ng-template #sendingStatus>\n        <ng-container\n          *ngTemplateOutlet=\"\n            (customTemplatesService.sendingStatusTemplate$ | async) ||\n              defaultSendingStatus;\n            context: getSendingStatusContext()\n          \"\n        />\n      </ng-template>\n      <ng-template #defaultSendingStatus>\n        <span\n          class=\"str-chat__message-simple-status str-chat__message-simple-status-angular str-chat__message-status\"\n          data-testid=\"sending-indicator\"\n          tabindex=\"0\"\n          [floatUiLoose]=\"floatingContent\"\n          loosePlacement=\"top\"\n          [looseTrigger]=\"hasTouchSupport ? 'click' : 'hover'\"\n          [disableAnimation]=\"true\"\n          [hideOnClickOutside]=\"true\"\n          [positionFixed]=\"true\"\n          [preventOverflow]=\"true\"\n        >\n          <float-ui-content #floatingContent>\n            <div class=\"str-chat__tooltip str-chat__tooltip-angular\">\n              {{ \"streamChat.Sending...\" | translate }}\n            </div>\n          </float-ui-content>\n          <stream-loading-indicator-placeholder\n            data-testid=\"loading-indicator\"\n          />\n        </span>\n      </ng-template>\n      <ng-template #readStatus>\n        <ng-container\n          *ngTemplateOutlet=\"\n            (customTemplatesService.readStatusTemplate$ | async) ||\n              defaultReadStatus;\n            context: getReadStatusContext()\n          \"\n        />\n      </ng-template>\n      <ng-template #defaultReadStatus let-readByText=\"readByText\">\n        <span\n          class=\"str-chat__message-simple-status str-chat__message-simple-status-angular str-chat__message-status\"\n          data-testid=\"read-indicator\"\n          tabindex=\"0\"\n          [floatUiLoose]=\"floatingContent\"\n          loosePlacement=\"top\"\n          [looseTrigger]=\"hasTouchSupport ? 'click' : 'hover'\"\n          [disableAnimation]=\"true\"\n          [hideOnClickOutside]=\"true\"\n          [positionFixed]=\"true\"\n          [preventOverflow]=\"true\"\n        >\n          <float-ui-content #floatingContent>\n            <div\n              class=\"str-chat__tooltip str-chat__tooltip-angular\"\n              data-testid=\"read-by-tooltip\"\n            >\n              {{ readByText }}\n            </div>\n          </float-ui-content>\n          <stream-icon-placeholder icon=\"read\" />\n        </span>\n      </ng-template>\n    </ng-container>\n  </ng-template>\n\n  <ng-template #replyCountButton>\n    <div\n      class=\"str-chat__message-simple-reply-button str-chat__message-replies-count-button-wrapper\"\n    >\n      <ng-container *ngIf=\"shouldDisplayThreadLink\">\n        <ng-template\n          *ngTemplateOutlet=\"\n            (customTemplatesService.threadLinkButton$ | async) || defaultButton;\n            context: { message: message }\n          \"\n        ></ng-template>\n      </ng-container>\n      <ng-template #defaultButton let-message=\"message\">\n        <button\n          class=\"str-chat__message-replies-count-button\"\n          data-testid=\"reply-count-button\"\n          (click)=\"setAsActiveParentMessage()\"\n        >\n          {{message?.reply_count === 1 ? ('streamChat.1 reply' | translate) : ('streamChat.{{ replyCount }}\n          replies' | translate:replyCountParam)}}\n        </button>\n      </ng-template>\n    </div>\n  </ng-template>\n\n  <ng-template #attachmentsTemplate>\n    <ng-template\n      #defaultAttachments\n      let-messageId=\"messageId\"\n      let-attachments=\"attachments\"\n      let-parentMessageId=\"parentMessageId\"\n      let-imageModalStateChangeHandler=\"imageModalStateChangeHandler\"\n    >\n      <stream-attachment-list\n        [messageId]=\"messageId\"\n        [attachments]=\"attachments\"\n        [parentMessageId]=\"parentMessageId\"\n        (imageModalStateChange)=\"imageModalStateChangeHandler($event)\"\n      />\n    </ng-template>\n    <ng-container\n      *ngTemplateOutlet=\"\n        (customTemplatesService.attachmentListTemplate$ | async) ||\n          defaultAttachments;\n        context: getAttachmentListContext()\n      \"\n    />\n  </ng-template>\n</ng-template>\n" }]
+        }], ctorParameters: () => [{ type: ChatClientService }, { type: ChannelService }, { type: CustomTemplatesService }, { type: i0.ChangeDetectorRef }, { type: DateParserService }, { type: MessageActionsService }, { type: i0.NgZone }, { type: i6.TranslateService }], propDecorators: { message: [{
                 type: Input
             }], enabledMessageActions: [{
                 type: Input
@@ -5968,15 +5961,15 @@ class TextareaDirective {
         this.componentRef.instance.ngOnChanges?.(changesToPropagate);
         this.unpropagatedChanges = [];
     }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: TextareaDirective, deps: [{ token: i0.ViewContainerRef }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.3.12", type: TextareaDirective, selector: "[streamTextarea]", inputs: { componentRef: "componentRef", areMentionsEnabled: "areMentionsEnabled", mentionScope: "mentionScope", inputMode: "inputMode", value: "value", placeholder: "placeholder", autoFocus: "autoFocus" }, outputs: { valueChange: "valueChange", send: "send", userMentions: "userMentions", pasteFromClipboard: "pasteFromClipboard" }, usesOnChanges: true, ngImport: i0 }); }
 }
-TextareaDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: TextareaDirective, deps: [{ token: i0.ViewContainerRef }], target: i0.ɵɵFactoryTarget.Directive });
-TextareaDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.0.4", type: TextareaDirective, selector: "[streamTextarea]", inputs: { componentRef: "componentRef", areMentionsEnabled: "areMentionsEnabled", mentionScope: "mentionScope", inputMode: "inputMode", value: "value", placeholder: "placeholder", autoFocus: "autoFocus" }, outputs: { valueChange: "valueChange", send: "send", userMentions: "userMentions", pasteFromClipboard: "pasteFromClipboard" }, usesOnChanges: true, ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: TextareaDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: TextareaDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[streamTextarea]',
                 }]
-        }], ctorParameters: function () { return [{ type: i0.ViewContainerRef }]; }, propDecorators: { componentRef: [{
+        }], ctorParameters: () => [{ type: i0.ViewContainerRef }], propDecorators: { componentRef: [{
                 type: Input
             }], areMentionsEnabled: [{
                 type: Input
@@ -6010,15 +6003,15 @@ class EmojiInputService {
          */
         this.emojiInput$ = new Subject();
     }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: EmojiInputService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: EmojiInputService, providedIn: 'root' }); }
 }
-EmojiInputService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: EmojiInputService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-EmojiInputService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: EmojiInputService, providedIn: 'root' });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: EmojiInputService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: EmojiInputService, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root',
                 }]
-        }], ctorParameters: function () { return []; } });
+        }], ctorParameters: () => [] });
 
 /**
  * The `VoiceRecorderService` provides a commincation outlet between the message input and voice recorder components.
@@ -6034,15 +6027,15 @@ class VoiceRecorderService {
          */
         this.recording$ = new BehaviorSubject(undefined);
     }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: VoiceRecorderService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: VoiceRecorderService, providedIn: NgModule }); }
 }
-VoiceRecorderService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: VoiceRecorderService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-VoiceRecorderService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: VoiceRecorderService, providedIn: NgModule });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: VoiceRecorderService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: VoiceRecorderService, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: NgModule,
                 }]
-        }], ctorParameters: function () { return []; } });
+        }], ctorParameters: () => [] });
 
 /**
  * The `MessageInputConfigService` is used to keep a consistent configuration among the different [`MessageInput`](/chat/docs/sdk/angular/components/MessageInputComponent/) components if your UI has more than one input component.
@@ -6081,15 +6074,15 @@ class MessageInputConfigService {
          */
         this.customAutocompletes$ = new BehaviorSubject([]);
     }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: MessageInputConfigService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: MessageInputConfigService, providedIn: 'root' }); }
 }
-MessageInputConfigService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: MessageInputConfigService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-MessageInputConfigService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: MessageInputConfigService, providedIn: 'root' });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: MessageInputConfigService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: MessageInputConfigService, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root',
                 }]
-        }], ctorParameters: function () { return []; } });
+        }], ctorParameters: () => [] });
 
 var MediaRecordingState;
 (function (MediaRecordingState) {
@@ -6388,13 +6381,13 @@ class TranscoderService {
         dataView.setUint32(HEADER.SUBCHUNK2_ID.offset, HEADER.SUBCHUNK2_ID.value); // "data"
         dataView.setUint32(HEADER.SUBCHUNK2_SIZE.offset, dataChunkSize, true);
     }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: TranscoderService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: TranscoderService, providedIn: NgModule }); }
 }
-TranscoderService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: TranscoderService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-TranscoderService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: TranscoderService, providedIn: NgModule });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: TranscoderService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: TranscoderService, decorators: [{
             type: Injectable,
             args: [{ providedIn: NgModule }]
-        }], ctorParameters: function () { return []; } });
+        }], ctorParameters: () => [] });
 
 const MAX_FREQUENCY_AMPLITUDE = 255;
 const rootMeanSquare = (values) => Math.sqrt(values.reduce((acc, val) => acc + Math.pow(val, 2), 0) / values.length);
@@ -6503,13 +6496,13 @@ class AmplitudeRecorderService {
             tag: ['AmplitudeRecorderService'],
         });
     }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: AmplitudeRecorderService, deps: [{ token: ChatClientService }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: AmplitudeRecorderService, providedIn: NgModule }); }
 }
-AmplitudeRecorderService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: AmplitudeRecorderService, deps: [{ token: ChatClientService }], target: i0.ɵɵFactoryTarget.Injectable });
-AmplitudeRecorderService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: AmplitudeRecorderService, providedIn: NgModule });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: AmplitudeRecorderService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: AmplitudeRecorderService, decorators: [{
             type: Injectable,
             args: [{ providedIn: NgModule }]
-        }], ctorParameters: function () { return [{ type: ChatClientService }]; } });
+        }], ctorParameters: () => [{ type: ChatClientService }] });
 
 /**
  * The `AudioRecorderService` can record an audio file, the SDK uses this to record a voice message
@@ -6574,13 +6567,13 @@ class AudioRecorderService extends MultimediaRecorder {
             this.amplitudeRecorder.stop();
         }
     }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: AudioRecorderService, deps: [{ token: NotificationService }, { token: ChatClientService }, { token: TranscoderService }, { token: AmplitudeRecorderService }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: AudioRecorderService, providedIn: NgModule }); }
 }
-AudioRecorderService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: AudioRecorderService, deps: [{ token: NotificationService }, { token: ChatClientService }, { token: TranscoderService }, { token: AmplitudeRecorderService }], target: i0.ɵɵFactoryTarget.Injectable });
-AudioRecorderService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: AudioRecorderService, providedIn: NgModule });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: AudioRecorderService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: AudioRecorderService, decorators: [{
             type: Injectable,
             args: [{ providedIn: NgModule }]
-        }], ctorParameters: function () { return [{ type: NotificationService }, { type: ChatClientService }, { type: TranscoderService }, { type: AmplitudeRecorderService }]; } });
+        }], ctorParameters: () => [{ type: NotificationService }, { type: ChatClientService }, { type: TranscoderService }, { type: AmplitudeRecorderService }] });
 
 /**
  * The `AttachmentPreviewList` component displays a preview of the attachments uploaded to a message. Users can delete attachments using the preview component, or retry upload if it failed previously.
@@ -6616,13 +6609,13 @@ class AttachmentPreviewListComponent {
     trackByFile(_, item) {
         return item.file;
     }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: AttachmentPreviewListComponent, deps: [{ token: CustomTemplatesService }, { token: AttachmentService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: AttachmentPreviewListComponent, selector: "stream-attachment-preview-list", inputs: { attachmentUploads$: "attachmentUploads$" }, outputs: { retryAttachmentUpload: "retryAttachmentUpload", deleteAttachment: "deleteAttachment" }, ngImport: i0, template: "<div\n  *ngIf=\"\n    (attachmentUploads$ | async)?.length ||\n    (customAttachments.length > 0 && customAttachmentsPreview)\n  \"\n  class=\"str-chat__attachment-preview-list\"\n>\n  <div class=\"str-chat__attachment-list-scroll-container\">\n    <ng-container\n      *ngFor=\"\n        let attachmentUpload of attachmentUploads$ | async;\n        trackBy: trackByFile\n      \"\n    >\n      <div\n        *ngIf=\"attachmentUpload.type === 'image'\"\n        class=\"str-chat__attachment-preview-image\"\n        data-testclass=\"attachment-image-preview\"\n      >\n        <ng-container\n          *ngTemplateOutlet=\"\n            deleteButton;\n            context: { attachmentUpload: attachmentUpload }\n          \"\n        />\n        <div\n          *ngIf=\"attachmentUpload.state === 'uploading'\"\n          class=\"str-chat__attachment-preview-image-loading\"\n        >\n          <stream-loading-indicator-placeholder\n            data-testclass=\"loading-indicator\"\n          />\n        </div>\n        <ng-container\n          *ngTemplateOutlet=\"\n            retryButton;\n            context: { attachmentUpload: attachmentUpload }\n          \"\n        />\n        <img\n          *ngIf=\"attachmentUpload.url || attachmentUpload.previewUri\"\n          class=\"str-chat__attachment-preview-thumbnail\"\n          data-testclass=\"attachment-image\"\n          src=\"{{\n            attachmentUpload.url\n              ? attachmentUpload.url\n              : attachmentUpload.previewUri\n          }}\"\n          alt=\"{{ attachmentUpload.file.name }}\"\n        />\n      </div>\n      <div\n        *ngIf=\"\n          attachmentUpload.type === 'file' ||\n          attachmentUpload.type === 'video' ||\n          attachmentUpload.type === 'voiceRecording'\n        \"\n        class=\"str-chat__attachment-preview-file str-chat__attachment-preview-type-{{\n          attachmentUpload.type\n        }}\"\n        data-testclass=\"attachment-file-preview\"\n      >\n        <stream-icon-placeholder\n          class=\"str-chat__attachment-preview-file-icon\"\n          icon=\"unspecified-filetype\"\n        />\n\n        <div class=\"str-chat__attachment-preview-file-end\">\n          <div\n            class=\"str-chat__attachment-preview-file-name\"\n            title=\"{{ attachmentUpload.file.name }}\"\n          >\n            {{ attachmentUpload.file.name }}\n          </div>\n          <a\n            *ngIf=\"attachmentUpload.state === 'success'\"\n            class=\"str-chat__attachment-preview-file-download\"\n            data-testclass=\"file-download-link\"\n            download\n            href=\"{{ attachmentUpload.url }}\"\n            (click)=\"attachmentUpload.url ? null : $event.preventDefault()\"\n            (keyup.enter)=\"\n              attachmentUpload.url ? null : $event.preventDefault()\n            \"\n          >\n            <stream-icon-placeholder icon=\"download\" />\n          </a>\n          <stream-loading-indicator-placeholder\n            *ngIf=\"attachmentUpload.state === 'uploading'\"\n            data-testclass=\"loading-indicator\"\n          />\n        </div>\n        <ng-container\n          *ngTemplateOutlet=\"\n            deleteButton;\n            context: { attachmentUpload: attachmentUpload }\n          \"\n        />\n        <ng-container\n          *ngTemplateOutlet=\"\n            retryButton;\n            context: { attachmentUpload: attachmentUpload }\n          \"\n        />\n      </div>\n    </ng-container>\n    <ng-container *ngIf=\"customAttachmentsPreview\">\n      <ng-template\n        *ngTemplateOutlet=\"\n          customAttachmentsPreview;\n          context: { service: attachmentService! }\n        \"\n      ></ng-template>\n    </ng-container>\n  </div>\n</div>\n\n<ng-template #deleteButton let-attachmentUpload=\"attachmentUpload\">\n  <div\n    class=\"str-chat__attachment-preview-delete\"\n    data-testclass=\"file-delete\"\n    role=\"button\"\n    (click)=\"attachmentDeleted(attachmentUpload)\"\n    (keyup.enter)=\"attachmentDeleted(attachmentUpload)\"\n  >\n    <stream-icon-placeholder icon=\"close\" />\n  </div>\n</ng-template>\n\n<ng-template #retryButton let-attachmentUpload=\"attachmentUpload\">\n  <div\n    *ngIf=\"attachmentUpload.state === 'error'\"\n    data-testclass=\"upload-retry\"\n    class=\"str-chat__attachment-preview-error str-chat__attachment-preview-error-{{\n      attachmentUpload.type === 'image' ? 'image' : 'file'\n    }}\"\n    (click)=\"attachmentUploadRetried(attachmentUpload.file)\"\n    (keyup.enter)=\"attachmentUploadRetried(attachmentUpload.file)\"\n  >\n    <stream-icon-placeholder icon=\"retry\" />\n  </div>\n</ng-template>\n", dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: IconPlaceholderComponent, selector: "stream-icon-placeholder", inputs: ["icon"] }, { kind: "component", type: LoadingIndicatorPlaceholderComponent, selector: "stream-loading-indicator-placeholder" }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }] }); }
 }
-AttachmentPreviewListComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: AttachmentPreviewListComponent, deps: [{ token: CustomTemplatesService }, { token: AttachmentService }], target: i0.ɵɵFactoryTarget.Component });
-AttachmentPreviewListComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.4", type: AttachmentPreviewListComponent, selector: "stream-attachment-preview-list", inputs: { attachmentUploads$: "attachmentUploads$" }, outputs: { retryAttachmentUpload: "retryAttachmentUpload", deleteAttachment: "deleteAttachment" }, ngImport: i0, template: "<div\n  *ngIf=\"\n    (attachmentUploads$ | async)?.length ||\n    (customAttachments.length > 0 && customAttachmentsPreview)\n  \"\n  class=\"str-chat__attachment-preview-list\"\n>\n  <div class=\"str-chat__attachment-list-scroll-container\">\n    <ng-container\n      *ngFor=\"\n        let attachmentUpload of attachmentUploads$ | async;\n        trackBy: trackByFile\n      \"\n    >\n      <div\n        *ngIf=\"attachmentUpload.type === 'image'\"\n        class=\"str-chat__attachment-preview-image\"\n        data-testclass=\"attachment-image-preview\"\n      >\n        <ng-container\n          *ngTemplateOutlet=\"\n            deleteButton;\n            context: { attachmentUpload: attachmentUpload }\n          \"\n        ></ng-container>\n        <div\n          *ngIf=\"attachmentUpload.state === 'uploading'\"\n          class=\"str-chat__attachment-preview-image-loading\"\n        >\n          <stream-loading-indicator-placeholder\n            data-testclass=\"loading-indicator\"\n          ></stream-loading-indicator-placeholder>\n        </div>\n        <ng-container\n          *ngTemplateOutlet=\"\n            retryButton;\n            context: { attachmentUpload: attachmentUpload }\n          \"\n        ></ng-container>\n        <img\n          *ngIf=\"attachmentUpload.url || attachmentUpload.previewUri\"\n          class=\"str-chat__attachment-preview-thumbnail\"\n          data-testclass=\"attachment-image\"\n          src=\"{{\n            attachmentUpload.url\n              ? attachmentUpload.url\n              : attachmentUpload.previewUri\n          }}\"\n          alt=\"{{ attachmentUpload.file.name }}\"\n        />\n      </div>\n      <div\n        *ngIf=\"\n          attachmentUpload.type === 'file' ||\n          attachmentUpload.type === 'video' ||\n          attachmentUpload.type === 'voiceRecording'\n        \"\n        class=\"str-chat__attachment-preview-file str-chat__attachment-preview-type-{{\n          attachmentUpload.type\n        }}\"\n        data-testclass=\"attachment-file-preview\"\n      >\n        <stream-icon-placeholder\n          class=\"str-chat__attachment-preview-file-icon\"\n          icon=\"unspecified-filetype\"\n        ></stream-icon-placeholder>\n\n        <div class=\"str-chat__attachment-preview-file-end\">\n          <div\n            class=\"str-chat__attachment-preview-file-name\"\n            title=\"{{ attachmentUpload.file.name }}\"\n          >\n            {{ attachmentUpload.file.name }}\n          </div>\n          <a\n            *ngIf=\"attachmentUpload.state === 'success'\"\n            class=\"str-chat__attachment-preview-file-download\"\n            data-testclass=\"file-download-link\"\n            download\n            href=\"{{ attachmentUpload.url }}\"\n            (click)=\"attachmentUpload.url ? null : $event.preventDefault()\"\n            (keyup.enter)=\"\n              attachmentUpload.url ? null : $event.preventDefault()\n            \"\n          >\n            <stream-icon-placeholder icon=\"download\"></stream-icon-placeholder>\n          </a>\n          <stream-loading-indicator-placeholder\n            *ngIf=\"attachmentUpload.state === 'uploading'\"\n            data-testclass=\"loading-indicator\"\n          ></stream-loading-indicator-placeholder>\n        </div>\n        <ng-container\n          *ngTemplateOutlet=\"\n            deleteButton;\n            context: { attachmentUpload: attachmentUpload }\n          \"\n        ></ng-container>\n        <ng-container\n          *ngTemplateOutlet=\"\n            retryButton;\n            context: { attachmentUpload: attachmentUpload }\n          \"\n        ></ng-container>\n      </div>\n    </ng-container>\n    <ng-container *ngIf=\"customAttachmentsPreview\">\n      <ng-template\n        *ngTemplateOutlet=\"\n          customAttachmentsPreview;\n          context: { service: attachmentService }\n        \"\n      ></ng-template>\n    </ng-container>\n  </div>\n</div>\n\n<ng-template #deleteButton let-attachmentUpload=\"attachmentUpload\">\n  <div\n    class=\"str-chat__attachment-preview-delete\"\n    data-testclass=\"file-delete\"\n    role=\"button\"\n    (click)=\"attachmentDeleted(attachmentUpload)\"\n    (keyup.enter)=\"attachmentDeleted(attachmentUpload)\"\n  >\n    <stream-icon-placeholder icon=\"close\"></stream-icon-placeholder>\n  </div>\n</ng-template>\n\n<ng-template #retryButton let-attachmentUpload=\"attachmentUpload\">\n  <div\n    *ngIf=\"attachmentUpload.state === 'error'\"\n    data-testclass=\"upload-retry\"\n    class=\"str-chat__attachment-preview-error str-chat__attachment-preview-error-{{\n      attachmentUpload.type === 'image' ? 'image' : 'file'\n    }}\"\n    (click)=\"attachmentUploadRetried(attachmentUpload.file)\"\n    (keyup.enter)=\"attachmentUploadRetried(attachmentUpload.file)\"\n  >\n    <stream-icon-placeholder icon=\"retry\"></stream-icon-placeholder>\n  </div>\n</ng-template>\n", dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: IconPlaceholderComponent, selector: "stream-icon-placeholder", inputs: ["icon"] }, { kind: "component", type: LoadingIndicatorPlaceholderComponent, selector: "stream-loading-indicator-placeholder" }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: AttachmentPreviewListComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: AttachmentPreviewListComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'stream-attachment-preview-list', template: "<div\n  *ngIf=\"\n    (attachmentUploads$ | async)?.length ||\n    (customAttachments.length > 0 && customAttachmentsPreview)\n  \"\n  class=\"str-chat__attachment-preview-list\"\n>\n  <div class=\"str-chat__attachment-list-scroll-container\">\n    <ng-container\n      *ngFor=\"\n        let attachmentUpload of attachmentUploads$ | async;\n        trackBy: trackByFile\n      \"\n    >\n      <div\n        *ngIf=\"attachmentUpload.type === 'image'\"\n        class=\"str-chat__attachment-preview-image\"\n        data-testclass=\"attachment-image-preview\"\n      >\n        <ng-container\n          *ngTemplateOutlet=\"\n            deleteButton;\n            context: { attachmentUpload: attachmentUpload }\n          \"\n        ></ng-container>\n        <div\n          *ngIf=\"attachmentUpload.state === 'uploading'\"\n          class=\"str-chat__attachment-preview-image-loading\"\n        >\n          <stream-loading-indicator-placeholder\n            data-testclass=\"loading-indicator\"\n          ></stream-loading-indicator-placeholder>\n        </div>\n        <ng-container\n          *ngTemplateOutlet=\"\n            retryButton;\n            context: { attachmentUpload: attachmentUpload }\n          \"\n        ></ng-container>\n        <img\n          *ngIf=\"attachmentUpload.url || attachmentUpload.previewUri\"\n          class=\"str-chat__attachment-preview-thumbnail\"\n          data-testclass=\"attachment-image\"\n          src=\"{{\n            attachmentUpload.url\n              ? attachmentUpload.url\n              : attachmentUpload.previewUri\n          }}\"\n          alt=\"{{ attachmentUpload.file.name }}\"\n        />\n      </div>\n      <div\n        *ngIf=\"\n          attachmentUpload.type === 'file' ||\n          attachmentUpload.type === 'video' ||\n          attachmentUpload.type === 'voiceRecording'\n        \"\n        class=\"str-chat__attachment-preview-file str-chat__attachment-preview-type-{{\n          attachmentUpload.type\n        }}\"\n        data-testclass=\"attachment-file-preview\"\n      >\n        <stream-icon-placeholder\n          class=\"str-chat__attachment-preview-file-icon\"\n          icon=\"unspecified-filetype\"\n        ></stream-icon-placeholder>\n\n        <div class=\"str-chat__attachment-preview-file-end\">\n          <div\n            class=\"str-chat__attachment-preview-file-name\"\n            title=\"{{ attachmentUpload.file.name }}\"\n          >\n            {{ attachmentUpload.file.name }}\n          </div>\n          <a\n            *ngIf=\"attachmentUpload.state === 'success'\"\n            class=\"str-chat__attachment-preview-file-download\"\n            data-testclass=\"file-download-link\"\n            download\n            href=\"{{ attachmentUpload.url }}\"\n            (click)=\"attachmentUpload.url ? null : $event.preventDefault()\"\n            (keyup.enter)=\"\n              attachmentUpload.url ? null : $event.preventDefault()\n            \"\n          >\n            <stream-icon-placeholder icon=\"download\"></stream-icon-placeholder>\n          </a>\n          <stream-loading-indicator-placeholder\n            *ngIf=\"attachmentUpload.state === 'uploading'\"\n            data-testclass=\"loading-indicator\"\n          ></stream-loading-indicator-placeholder>\n        </div>\n        <ng-container\n          *ngTemplateOutlet=\"\n            deleteButton;\n            context: { attachmentUpload: attachmentUpload }\n          \"\n        ></ng-container>\n        <ng-container\n          *ngTemplateOutlet=\"\n            retryButton;\n            context: { attachmentUpload: attachmentUpload }\n          \"\n        ></ng-container>\n      </div>\n    </ng-container>\n    <ng-container *ngIf=\"customAttachmentsPreview\">\n      <ng-template\n        *ngTemplateOutlet=\"\n          customAttachmentsPreview;\n          context: { service: attachmentService }\n        \"\n      ></ng-template>\n    </ng-container>\n  </div>\n</div>\n\n<ng-template #deleteButton let-attachmentUpload=\"attachmentUpload\">\n  <div\n    class=\"str-chat__attachment-preview-delete\"\n    data-testclass=\"file-delete\"\n    role=\"button\"\n    (click)=\"attachmentDeleted(attachmentUpload)\"\n    (keyup.enter)=\"attachmentDeleted(attachmentUpload)\"\n  >\n    <stream-icon-placeholder icon=\"close\"></stream-icon-placeholder>\n  </div>\n</ng-template>\n\n<ng-template #retryButton let-attachmentUpload=\"attachmentUpload\">\n  <div\n    *ngIf=\"attachmentUpload.state === 'error'\"\n    data-testclass=\"upload-retry\"\n    class=\"str-chat__attachment-preview-error str-chat__attachment-preview-error-{{\n      attachmentUpload.type === 'image' ? 'image' : 'file'\n    }}\"\n    (click)=\"attachmentUploadRetried(attachmentUpload.file)\"\n    (keyup.enter)=\"attachmentUploadRetried(attachmentUpload.file)\"\n  >\n    <stream-icon-placeholder icon=\"retry\"></stream-icon-placeholder>\n  </div>\n</ng-template>\n" }]
-        }], ctorParameters: function () { return [{ type: CustomTemplatesService }, { type: AttachmentService }]; }, propDecorators: { attachmentUploads$: [{
+            args: [{ selector: 'stream-attachment-preview-list', template: "<div\n  *ngIf=\"\n    (attachmentUploads$ | async)?.length ||\n    (customAttachments.length > 0 && customAttachmentsPreview)\n  \"\n  class=\"str-chat__attachment-preview-list\"\n>\n  <div class=\"str-chat__attachment-list-scroll-container\">\n    <ng-container\n      *ngFor=\"\n        let attachmentUpload of attachmentUploads$ | async;\n        trackBy: trackByFile\n      \"\n    >\n      <div\n        *ngIf=\"attachmentUpload.type === 'image'\"\n        class=\"str-chat__attachment-preview-image\"\n        data-testclass=\"attachment-image-preview\"\n      >\n        <ng-container\n          *ngTemplateOutlet=\"\n            deleteButton;\n            context: { attachmentUpload: attachmentUpload }\n          \"\n        />\n        <div\n          *ngIf=\"attachmentUpload.state === 'uploading'\"\n          class=\"str-chat__attachment-preview-image-loading\"\n        >\n          <stream-loading-indicator-placeholder\n            data-testclass=\"loading-indicator\"\n          />\n        </div>\n        <ng-container\n          *ngTemplateOutlet=\"\n            retryButton;\n            context: { attachmentUpload: attachmentUpload }\n          \"\n        />\n        <img\n          *ngIf=\"attachmentUpload.url || attachmentUpload.previewUri\"\n          class=\"str-chat__attachment-preview-thumbnail\"\n          data-testclass=\"attachment-image\"\n          src=\"{{\n            attachmentUpload.url\n              ? attachmentUpload.url\n              : attachmentUpload.previewUri\n          }}\"\n          alt=\"{{ attachmentUpload.file.name }}\"\n        />\n      </div>\n      <div\n        *ngIf=\"\n          attachmentUpload.type === 'file' ||\n          attachmentUpload.type === 'video' ||\n          attachmentUpload.type === 'voiceRecording'\n        \"\n        class=\"str-chat__attachment-preview-file str-chat__attachment-preview-type-{{\n          attachmentUpload.type\n        }}\"\n        data-testclass=\"attachment-file-preview\"\n      >\n        <stream-icon-placeholder\n          class=\"str-chat__attachment-preview-file-icon\"\n          icon=\"unspecified-filetype\"\n        />\n\n        <div class=\"str-chat__attachment-preview-file-end\">\n          <div\n            class=\"str-chat__attachment-preview-file-name\"\n            title=\"{{ attachmentUpload.file.name }}\"\n          >\n            {{ attachmentUpload.file.name }}\n          </div>\n          <a\n            *ngIf=\"attachmentUpload.state === 'success'\"\n            class=\"str-chat__attachment-preview-file-download\"\n            data-testclass=\"file-download-link\"\n            download\n            href=\"{{ attachmentUpload.url }}\"\n            (click)=\"attachmentUpload.url ? null : $event.preventDefault()\"\n            (keyup.enter)=\"\n              attachmentUpload.url ? null : $event.preventDefault()\n            \"\n          >\n            <stream-icon-placeholder icon=\"download\" />\n          </a>\n          <stream-loading-indicator-placeholder\n            *ngIf=\"attachmentUpload.state === 'uploading'\"\n            data-testclass=\"loading-indicator\"\n          />\n        </div>\n        <ng-container\n          *ngTemplateOutlet=\"\n            deleteButton;\n            context: { attachmentUpload: attachmentUpload }\n          \"\n        />\n        <ng-container\n          *ngTemplateOutlet=\"\n            retryButton;\n            context: { attachmentUpload: attachmentUpload }\n          \"\n        />\n      </div>\n    </ng-container>\n    <ng-container *ngIf=\"customAttachmentsPreview\">\n      <ng-template\n        *ngTemplateOutlet=\"\n          customAttachmentsPreview;\n          context: { service: attachmentService! }\n        \"\n      ></ng-template>\n    </ng-container>\n  </div>\n</div>\n\n<ng-template #deleteButton let-attachmentUpload=\"attachmentUpload\">\n  <div\n    class=\"str-chat__attachment-preview-delete\"\n    data-testclass=\"file-delete\"\n    role=\"button\"\n    (click)=\"attachmentDeleted(attachmentUpload)\"\n    (keyup.enter)=\"attachmentDeleted(attachmentUpload)\"\n  >\n    <stream-icon-placeholder icon=\"close\" />\n  </div>\n</ng-template>\n\n<ng-template #retryButton let-attachmentUpload=\"attachmentUpload\">\n  <div\n    *ngIf=\"attachmentUpload.state === 'error'\"\n    data-testclass=\"upload-retry\"\n    class=\"str-chat__attachment-preview-error str-chat__attachment-preview-error-{{\n      attachmentUpload.type === 'image' ? 'image' : 'file'\n    }}\"\n    (click)=\"attachmentUploadRetried(attachmentUpload.file)\"\n    (keyup.enter)=\"attachmentUploadRetried(attachmentUpload.file)\"\n  >\n    <stream-icon-placeholder icon=\"retry\" />\n  </div>\n</ng-template>\n" }]
+        }], ctorParameters: () => [{ type: CustomTemplatesService }, { type: AttachmentService }], propDecorators: { attachmentUploads$: [{
                 type: Input
             }], retryAttachmentUpload: [{
                 type: Output
@@ -7178,18 +7171,18 @@ class MessageInputComponent {
             this.pollId = undefined;
         }
     }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: MessageInputComponent, deps: [{ token: ChannelService }, { token: NotificationService }, { token: AttachmentService }, { token: MessageInputConfigService }, { token: textareaInjectionToken }, { token: i0.ComponentFactoryResolver }, { token: i0.ChangeDetectorRef }, { token: EmojiInputService }, { token: CustomTemplatesService }, { token: MessageActionsService }, { token: VoiceRecorderService }, { token: AudioRecorderService, optional: true }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: MessageInputComponent, selector: "stream-message-input", inputs: { isFileUploadEnabled: "isFileUploadEnabled", areMentionsEnabled: "areMentionsEnabled", mentionScope: "mentionScope", mode: "mode", isMultipleFileUploadEnabled: "isMultipleFileUploadEnabled", message: "message", sendMessage$: "sendMessage$", inputMode: "inputMode", autoFocus: "autoFocus", watchForMessageToEdit: "watchForMessageToEdit", displaySendButton: "displaySendButton", displayVoiceRecordingButton: "displayVoiceRecordingButton", displayPollCreateButton: "displayPollCreateButton" }, outputs: { messageUpdate: "messageUpdate", messageDraftChange: "messageDraftChange" }, host: { properties: { "class": "this.class" } }, providers: [AttachmentService, EmojiInputService, VoiceRecorderService], queries: [{ propertyName: "voiceRecorderRef", first: true, predicate: TemplateRef, descendants: true }], viewQueries: [{ propertyName: "fileInput", first: true, predicate: ["fileInput"], descendants: true }, { propertyName: "textareaAnchor", first: true, predicate: TextareaDirective, descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div\n  class=\"str-chat__message-input str-chat-angular__message-input\"\n  [style.display]=\"isVoiceRecording ? 'none' : 'flex'\"\n>\n  <div *ngIf=\"quotedMessage\" class=\"str-chat__quoted-message-preview-header\">\n    <div class=\"str-chat__quoted-message-reply-to-message\">\n      {{ \"streamChat.Reply to Message\" | translate }}\n    </div>\n    <button\n      class=\"str-chat__quoted-message-remove\"\n      data-testid=\"remove-quote\"\n      (click)=\"deselectMessageToQuote()\"\n      (keyup.enter)=\"deselectMessageToQuote()\"\n    >\n      <stream-icon-placeholder icon=\"close\" />\n    </button>\n  </div>\n  <div *ngIf=\"isUpdate\" class=\"str-chat__quoted-message-preview-header\">\n    <div class=\"str-chat__quoted-message-reply-to-message\">\n      {{ \"streamChat.Edit Message\" | translate }}\n    </div>\n    <button\n      class=\"str-chat__quoted-message-remove\"\n      data-testid=\"remove-quote\"\n      (click)=\"deselectMessageToEdit()\"\n      (keyup.enter)=\"deselectMessageToEdit()\"\n    >\n      <stream-icon-placeholder icon=\"close\" />\n    </button>\n  </div>\n  <ng-container *ngIf=\"canSendMessages; else notAllowed\">\n    <div\n      class=\"str-chat__message-input-inner str-chat-angular__message-input-inner\"\n    >\n      <ng-content select=\"[message-input-start]\"></ng-content>\n      <ng-container\n        *ngIf=\"isFileUploadEnabled && isFileUploadAuthorized && canSendMessages\"\n      >\n        <ng-container\n          *ngTemplateOutlet=\"\n            customAttachmentUploadTemplate || defaultAttachmentUpload;\n            context: getAttachmentUploadContext()\n          \"\n        />\n        <ng-template #defaultAttachmentUpload>\n          <div\n            class=\"str-chat__file-input-container\"\n            data-testid=\"file-upload-button\"\n          >\n            <input\n              #fileInput\n              type=\"file\"\n              class=\"str-chat__file-input\"\n              data-testid=\"file-input\"\n              [multiple]=\"isMultipleFileUploadEnabled\"\n              id=\"{{ fileInputId }}\"\n              [disabled]=\"\n                (attachmentService.attachmentsCounter$ | async)! >=\n                attachmentService.maxNumberOfAttachments\n              \"\n              (change)=\"filesSelected(fileInput.files)\"\n            />\n            <label class=\"str-chat__file-input-label\" for=\"{{ fileInputId }}\">\n              <stream-icon-placeholder icon=\"attach\" />\n            </label>\n          </div>\n        </ng-template>\n      </ng-container>\n      <ng-container\n        *ngIf=\"canSendPolls && displayPollCreateButton && mode !== 'thread'\"\n      >\n        <button\n          class=\"str-chat-angular__create-poll\"\n          (click)=\"openPollComposer()\"\n        >\n          <stream-icon-placeholder icon=\"poll\" />\n        </button>\n      </ng-container>\n      <div class=\"str-chat__message-textarea-container\">\n        <div\n          *ngIf=\"quotedMessage\"\n          data-testid=\"quoted-message-container\"\n          class=\"str-chat__quoted-message-preview\"\n        >\n          <stream-avatar-placeholder\n            data-testid=\"qouted-message-avatar\"\n            class=\"str-chat-angular__avatar-host str-chat__message-sender-avatar\"\n            type=\"user\"\n            location=\"quoted-message-sender\"\n            [imageUrl]=\"quotedMessage.user?.image\"\n            [name]=\"quotedMessage.user?.name || quotedMessage.user?.id\"\n            [user]=\"quotedMessage.user || undefined\"\n          />\n          <div\n            class=\"quoted-message-preview-content-inner str-chat__quoted-message-bubble\"\n          >\n            <stream-attachment-list\n              *ngIf=\"\n                quotedMessage?.attachments && quotedMessage?.attachments?.length\n              \"\n              [attachments]=\"quotedMessageAttachments\"\n              [messageId]=\"quotedMessage.id\"\n            />\n            <ng-container\n              *ngIf=\"\n                quotedMessage?.poll_id &&\n                (customTemplatesService.pollTemplate$ | async)\n              \"\n            >\n              <ng-container\n                *ngTemplateOutlet=\"\n                  (customTemplatesService.pollTemplate$ | async)!;\n                  context: {\n                    pollId: quotedMessage?.poll_id,\n                    messageId: quotedMessage?.id,\n                    isQuote: true\n                  }\n                \"\n              />\n            </ng-container>\n            <div class=\"str-chat__quoted-message-text\">\n              <ng-container\n                *ngTemplateOutlet=\"\n                  (customTemplatesService.messageTextTemplate$ | async) ||\n                    defaultText;\n                  context: getQuotedMessageTextContext()\n                \"\n              />\n              <ng-template\n                #defaultText\n                let-message=\"message\"\n                let-isQuoted=\"isQuoted\"\n                let-shouldTranslate=\"shouldTranslate\"\n              >\n                <stream-message-text\n                  [message]=\"message\"\n                  [isQuoted]=\"isQuoted\"\n                  [shouldTranslate]=\"shouldTranslate\"\n                  data-testid=\"quoted-message-text\"\n                />\n              </ng-template>\n            </div>\n          </div>\n        </div>\n        <ng-template\n          #defaultAttachmentsPreview\n          let-attachmentUploads$=\"attachmentUploads$\"\n          let-retryUploadHandler=\"retryUploadHandler\"\n          let-deleteUploadHandler=\"deleteUploadHandler\"\n        >\n          <stream-attachment-preview-list\n            class=\"str-chat__attachment-preview-list-angular-host\"\n            [attachmentUploads$]=\"attachmentUploads$\"\n            (retryAttachmentUpload)=\"retryUploadHandler($event)\"\n            (deleteAttachment)=\"deleteUploadHandler($event)\"\n          />\n        </ng-template>\n        <ng-container\n          *ngTemplateOutlet=\"\n            attachmentPreviewListTemplate || defaultAttachmentsPreview;\n            context: getAttachmentPreviewListContext()\n          \"\n        />\n        <div class=\"str-chat__message-textarea-with-emoji-picker\">\n          <ng-container\n            streamTextarea\n            [componentRef]=\"textareaRef\"\n            [areMentionsEnabled]=\"areMentionsEnabled\"\n            [mentionScope]=\"mentionScope\"\n            [inputMode]=\"inputMode\"\n            [autoFocus]=\"autoFocus\"\n            [placeholder]=\"textareaPlaceholder\"\n            [(value)]=\"textareaValue\"\n            (valueChange)=\"typingStart$.next(); updateMessageDraft()\"\n            (send)=\"messageSent()\"\n            (userMentions)=\"userMentionsChanged($event)\"\n            (pasteFromClipboard)=\"itemsPasted($event)\"\n          />\n          <ng-container *ngIf=\"emojiPickerTemplate\" data-testid=\"emoji-picker\">\n            <ng-container\n              *ngTemplateOutlet=\"\n                emojiPickerTemplate;\n                context: getEmojiPickerContext()\n              \"\n            />\n          </ng-container>\n        </div>\n      </div>\n      <button\n        *ngIf=\"canSendMessages && !isCooldownInProgress && displaySendButton\"\n        data-testid=\"send-button\"\n        class=\"str-chat__send-button\"\n        [disabled]=\"\n          (attachmentUploadInProgressCounter$ | async)! > 0 ||\n          (attachmentService.attachmentsCounter$ | async)! >\n            attachmentService.maxNumberOfAttachments ||\n          (!textareaValue &&\n            (attachmentUploads$ | async)!.length === 0 &&\n            (customAttachments$ | async)!.length === 0)\n        \"\n        (click)=\"messageSent()\"\n        (keyup.enter)=\"messageSent()\"\n      >\n        <stream-icon-placeholder icon=\"send\" />\n      </button>\n      <div\n        *ngIf=\"isCooldownInProgress\"\n        class=\"str-chat__message-input-cooldown\"\n        data-testid=\"cooldown-timer\"\n      >\n        {{ cooldown$ | async }}\n      </div>\n      <button\n        *ngIf=\"displayVoiceRecordingButton\"\n        class=\"str-chat__start-recording-audio-button\"\n        data-testid=\"start-voice-recording\"\n        [disabled]=\"\n          voiceRecorderService.isRecorderVisible$.value ||\n          audioRecorder?.isRecording ||\n          (attachmentService.attachmentsCounter$ | async)! >=\n            attachmentService.maxNumberOfAttachments\n        \"\n        (click)=\"startVoiceRecording()\"\n        (keyup.enter)=\"startVoiceRecording()\"\n      >\n        <stream-icon-placeholder icon=\"mic\" />\n      </button>\n      <ng-content select=\"[message-input-end]\"></ng-content>\n    </div>\n  </ng-container>\n  <ng-template #notAllowed>\n    <div\n      class=\"str-chat__message-input-not-allowed\"\n      data-testid=\"disabled-textarea\"\n    >\n      {{ disabledTextareaText | translate }}\n    </div>\n  </ng-template>\n</div>\n<ng-template\n  *ngIf=\"voiceRecorderRef\"\n  [ngTemplateOutlet]=\"voiceRecorderRef\"\n  [ngTemplateOutletContext]=\"{ service: voiceRecorderService }\"\n></ng-template>\n<ng-template\n  *ngIf=\"\n    isComposerOpen && (customTemplatesService.pollComposerTemplate$ | async)\n  \"\n  [ngTemplateOutlet]=\"(customTemplatesService.pollComposerTemplate$ | async)!\"\n  [ngTemplateOutletContext]=\"{\n    pollCompose: addPoll,\n    cancel: closePollComposer\n  }\"\n></ng-template>\n", dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: AvatarPlaceholderComponent, selector: "stream-avatar-placeholder", inputs: ["name", "imageUrl", "location", "channel", "user", "type", "initialsType", "showOnlineIndicator"] }, { kind: "component", type: IconPlaceholderComponent, selector: "stream-icon-placeholder", inputs: ["icon"] }, { kind: "component", type: AttachmentListComponent, selector: "stream-attachment-list", inputs: ["messageId", "parentMessageId", "attachments"], outputs: ["imageModalStateChange"] }, { kind: "component", type: AttachmentPreviewListComponent, selector: "stream-attachment-preview-list", inputs: ["attachmentUploads$"], outputs: ["retryAttachmentUpload", "deleteAttachment"] }, { kind: "directive", type: TextareaDirective, selector: "[streamTextarea]", inputs: ["componentRef", "areMentionsEnabled", "mentionScope", "inputMode", "value", "placeholder", "autoFocus"], outputs: ["valueChange", "send", "userMentions", "pasteFromClipboard"] }, { kind: "component", type: MessageTextComponent, selector: "stream-message-text", inputs: ["message", "isQuoted", "shouldTranslate"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "pipe", type: i6.TranslatePipe, name: "translate" }] }); }
 }
-MessageInputComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: MessageInputComponent, deps: [{ token: ChannelService }, { token: NotificationService }, { token: AttachmentService }, { token: MessageInputConfigService }, { token: textareaInjectionToken }, { token: i0.ComponentFactoryResolver }, { token: i0.ChangeDetectorRef }, { token: EmojiInputService }, { token: CustomTemplatesService }, { token: MessageActionsService }, { token: VoiceRecorderService }, { token: AudioRecorderService, optional: true }], target: i0.ɵɵFactoryTarget.Component });
-MessageInputComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.4", type: MessageInputComponent, selector: "stream-message-input", inputs: { isFileUploadEnabled: "isFileUploadEnabled", areMentionsEnabled: "areMentionsEnabled", mentionScope: "mentionScope", mode: "mode", isMultipleFileUploadEnabled: "isMultipleFileUploadEnabled", message: "message", sendMessage$: "sendMessage$", inputMode: "inputMode", autoFocus: "autoFocus", watchForMessageToEdit: "watchForMessageToEdit", displaySendButton: "displaySendButton", displayVoiceRecordingButton: "displayVoiceRecordingButton", displayPollCreateButton: "displayPollCreateButton" }, outputs: { messageUpdate: "messageUpdate", messageDraftChange: "messageDraftChange" }, host: { properties: { "class": "this.class" } }, providers: [AttachmentService, EmojiInputService, VoiceRecorderService], queries: [{ propertyName: "voiceRecorderRef", first: true, predicate: TemplateRef, descendants: true }], viewQueries: [{ propertyName: "fileInput", first: true, predicate: ["fileInput"], descendants: true }, { propertyName: "textareaAnchor", first: true, predicate: TextareaDirective, descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div\n  class=\"str-chat__message-input str-chat-angular__message-input\"\n  [style.display]=\"isVoiceRecording ? 'none' : 'flex'\"\n>\n  <div *ngIf=\"quotedMessage\" class=\"str-chat__quoted-message-preview-header\">\n    <div class=\"str-chat__quoted-message-reply-to-message\">\n      {{ \"streamChat.Reply to Message\" | translate }}\n    </div>\n    <button\n      class=\"str-chat__quoted-message-remove\"\n      data-testid=\"remove-quote\"\n      (click)=\"deselectMessageToQuote()\"\n      (keyup.enter)=\"deselectMessageToQuote()\"\n    >\n      <stream-icon-placeholder icon=\"close\"></stream-icon-placeholder>\n    </button>\n  </div>\n  <div *ngIf=\"isUpdate\" class=\"str-chat__quoted-message-preview-header\">\n    <div class=\"str-chat__quoted-message-reply-to-message\">\n      {{ \"streamChat.Edit Message\" | translate }}\n    </div>\n    <button\n      class=\"str-chat__quoted-message-remove\"\n      data-testid=\"remove-quote\"\n      (click)=\"deselectMessageToEdit()\"\n      (keyup.enter)=\"deselectMessageToEdit()\"\n    >\n      <stream-icon-placeholder icon=\"close\"></stream-icon-placeholder>\n    </button>\n  </div>\n  <ng-container *ngIf=\"canSendMessages; else notAllowed\">\n    <div\n      class=\"str-chat__message-input-inner str-chat-angular__message-input-inner\"\n    >\n      <ng-content select=\"[message-input-start]\"></ng-content>\n      <ng-container\n        *ngIf=\"isFileUploadEnabled && isFileUploadAuthorized && canSendMessages\"\n      >\n        <ng-container\n          *ngTemplateOutlet=\"\n            customAttachmentUploadTemplate || defaultAttachmentUpload;\n            context: getAttachmentUploadContext()\n          \"\n        ></ng-container>\n        <ng-template #defaultAttachmentUpload>\n          <div\n            class=\"str-chat__file-input-container\"\n            data-testid=\"file-upload-button\"\n          >\n            <input\n              #fileInput\n              type=\"file\"\n              class=\"str-chat__file-input\"\n              data-testid=\"file-input\"\n              [multiple]=\"isMultipleFileUploadEnabled\"\n              id=\"{{ fileInputId }}\"\n              [disabled]=\"\n                (attachmentService.attachmentsCounter$ | async)! >=\n                attachmentService.maxNumberOfAttachments\n              \"\n              (change)=\"filesSelected(fileInput.files)\"\n            />\n            <label class=\"str-chat__file-input-label\" for=\"{{ fileInputId }}\">\n              <stream-icon-placeholder icon=\"attach\"></stream-icon-placeholder>\n            </label>\n          </div>\n        </ng-template>\n      </ng-container>\n      <ng-container\n        *ngIf=\"canSendPolls && displayPollCreateButton && mode !== 'thread'\"\n      >\n        <button\n          class=\"str-chat-angular__create-poll\"\n          (click)=\"openPollComposer()\"\n        >\n          <stream-icon-placeholder icon=\"poll\"></stream-icon-placeholder>\n        </button>\n      </ng-container>\n      <div class=\"str-chat__message-textarea-container\">\n        <div\n          *ngIf=\"quotedMessage\"\n          data-testid=\"quoted-message-container\"\n          class=\"str-chat__quoted-message-preview\"\n        >\n          <stream-avatar-placeholder\n            data-testid=\"qouted-message-avatar\"\n            class=\"str-chat-angular__avatar-host str-chat__message-sender-avatar\"\n            type=\"user\"\n            location=\"quoted-message-sender\"\n            [imageUrl]=\"quotedMessage.user?.image\"\n            [name]=\"quotedMessage.user?.name || quotedMessage.user?.id\"\n            [user]=\"quotedMessage.user || undefined\"\n          ></stream-avatar-placeholder>\n          <div\n            class=\"quoted-message-preview-content-inner str-chat__quoted-message-bubble\"\n          >\n            <stream-attachment-list\n              *ngIf=\"\n                quotedMessage?.attachments && quotedMessage?.attachments?.length\n              \"\n              [attachments]=\"quotedMessageAttachments\"\n              [messageId]=\"quotedMessage.id\"\n            ></stream-attachment-list>\n            <ng-container\n              *ngIf=\"\n                quotedMessage?.poll_id &&\n                (customTemplatesService.pollTemplate$ | async)\n              \"\n            >\n              <ng-container\n                *ngTemplateOutlet=\"\n                  (customTemplatesService.pollTemplate$ | async)!;\n                  context: {\n                    pollId: quotedMessage?.poll_id,\n                    messageId: quotedMessage?.id,\n                    isQuote: true\n                  }\n                \"\n              ></ng-container>\n            </ng-container>\n            <div class=\"str-chat__quoted-message-text\">\n              <ng-container\n                *ngTemplateOutlet=\"\n                  (customTemplatesService.messageTextTemplate$ | async) ||\n                    defaultText;\n                  context: getQuotedMessageTextContext()\n                \"\n              ></ng-container>\n              <ng-template\n                #defaultText\n                let-message=\"message\"\n                let-isQuoted=\"isQuoted\"\n                let-shouldTranslate=\"shouldTranslate\"\n              >\n                <stream-message-text\n                  [message]=\"message\"\n                  [isQuoted]=\"isQuoted\"\n                  [shouldTranslate]=\"shouldTranslate\"\n                  data-testid=\"quoted-message-text\"\n                ></stream-message-text>\n              </ng-template>\n            </div>\n          </div>\n        </div>\n        <ng-template\n          #defaultAttachmentsPreview\n          let-attachmentUploads$=\"attachmentUploads$\"\n          let-retryUploadHandler=\"retryUploadHandler\"\n          let-deleteUploadHandler=\"deleteUploadHandler\"\n        >\n          <stream-attachment-preview-list\n            class=\"str-chat__attachment-preview-list-angular-host\"\n            [attachmentUploads$]=\"attachmentUploads$\"\n            (retryAttachmentUpload)=\"retryUploadHandler($event)\"\n            (deleteAttachment)=\"deleteUploadHandler($event)\"\n          ></stream-attachment-preview-list>\n        </ng-template>\n        <ng-container\n          *ngTemplateOutlet=\"\n            attachmentPreviewListTemplate || defaultAttachmentsPreview;\n            context: getAttachmentPreviewListContext()\n          \"\n        ></ng-container>\n        <div class=\"str-chat__message-textarea-with-emoji-picker\">\n          <ng-container\n            streamTextarea\n            [componentRef]=\"textareaRef\"\n            [areMentionsEnabled]=\"areMentionsEnabled\"\n            [mentionScope]=\"mentionScope\"\n            [inputMode]=\"inputMode\"\n            [autoFocus]=\"autoFocus\"\n            [placeholder]=\"textareaPlaceholder\"\n            [(value)]=\"textareaValue\"\n            (valueChange)=\"typingStart$.next(); updateMessageDraft()\"\n            (send)=\"messageSent()\"\n            (userMentions)=\"userMentionsChanged($event)\"\n            (pasteFromClipboard)=\"itemsPasted($event)\"\n          ></ng-container>\n          <ng-container *ngIf=\"emojiPickerTemplate\" data-testid=\"emoji-picker\">\n            <ng-container\n              *ngTemplateOutlet=\"\n                emojiPickerTemplate;\n                context: getEmojiPickerContext()\n              \"\n            ></ng-container>\n          </ng-container>\n        </div>\n      </div>\n      <button\n        *ngIf=\"canSendMessages && !isCooldownInProgress && displaySendButton\"\n        data-testid=\"send-button\"\n        class=\"str-chat__send-button\"\n        [disabled]=\"\n          (attachmentUploadInProgressCounter$ | async)! > 0 ||\n          (attachmentService.attachmentsCounter$ | async)! >\n            attachmentService.maxNumberOfAttachments ||\n          (!textareaValue &&\n            (attachmentUploads$ | async)!.length === 0 &&\n            (customAttachments$ | async)!.length === 0)\n        \"\n        (click)=\"messageSent()\"\n        (keyup.enter)=\"messageSent()\"\n      >\n        <stream-icon-placeholder icon=\"send\"></stream-icon-placeholder>\n      </button>\n      <div\n        *ngIf=\"isCooldownInProgress\"\n        class=\"str-chat__message-input-cooldown\"\n        data-testid=\"cooldown-timer\"\n      >\n        {{ cooldown$ | async }}\n      </div>\n      <button\n        *ngIf=\"displayVoiceRecordingButton\"\n        class=\"str-chat__start-recording-audio-button\"\n        data-testid=\"start-voice-recording\"\n        [disabled]=\"\n          voiceRecorderService.isRecorderVisible$.value ||\n          audioRecorder?.isRecording ||\n          (attachmentService.attachmentsCounter$ | async)! >=\n            attachmentService.maxNumberOfAttachments\n        \"\n        (click)=\"startVoiceRecording()\"\n        (keyup.enter)=\"startVoiceRecording()\"\n      >\n        <stream-icon-placeholder icon=\"mic\"></stream-icon-placeholder>\n      </button>\n      <ng-content select=\"[message-input-end]\"></ng-content>\n    </div>\n  </ng-container>\n  <ng-template #notAllowed>\n    <div\n      class=\"str-chat__message-input-not-allowed\"\n      data-testid=\"disabled-textarea\"\n    >\n      {{ disabledTextareaText | translate }}\n    </div>\n  </ng-template>\n</div>\n<ng-template\n  *ngIf=\"voiceRecorderRef\"\n  [ngTemplateOutlet]=\"voiceRecorderRef\"\n  [ngTemplateOutletContext]=\"{ service: voiceRecorderService }\"\n></ng-template>\n<ng-template\n  *ngIf=\"\n    isComposerOpen && (customTemplatesService.pollComposerTemplate$ | async)\n  \"\n  [ngTemplateOutlet]=\"(customTemplatesService.pollComposerTemplate$ | async)!\"\n  [ngTemplateOutletContext]=\"{\n    pollCompose: addPoll,\n    cancel: closePollComposer\n  }\"\n></ng-template>\n", dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: AvatarPlaceholderComponent, selector: "stream-avatar-placeholder", inputs: ["name", "imageUrl", "location", "channel", "user", "type", "initialsType", "showOnlineIndicator"] }, { kind: "component", type: IconPlaceholderComponent, selector: "stream-icon-placeholder", inputs: ["icon"] }, { kind: "component", type: AttachmentListComponent, selector: "stream-attachment-list", inputs: ["messageId", "parentMessageId", "attachments"], outputs: ["imageModalStateChange"] }, { kind: "component", type: AttachmentPreviewListComponent, selector: "stream-attachment-preview-list", inputs: ["attachmentUploads$"], outputs: ["retryAttachmentUpload", "deleteAttachment"] }, { kind: "directive", type: TextareaDirective, selector: "[streamTextarea]", inputs: ["componentRef", "areMentionsEnabled", "mentionScope", "inputMode", "value", "placeholder", "autoFocus"], outputs: ["valueChange", "send", "userMentions", "pasteFromClipboard"] }, { kind: "component", type: MessageTextComponent, selector: "stream-message-text", inputs: ["message", "isQuoted", "shouldTranslate"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "pipe", type: i6.TranslatePipe, name: "translate" }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: MessageInputComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: MessageInputComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'stream-message-input', providers: [AttachmentService, EmojiInputService, VoiceRecorderService], template: "<div\n  class=\"str-chat__message-input str-chat-angular__message-input\"\n  [style.display]=\"isVoiceRecording ? 'none' : 'flex'\"\n>\n  <div *ngIf=\"quotedMessage\" class=\"str-chat__quoted-message-preview-header\">\n    <div class=\"str-chat__quoted-message-reply-to-message\">\n      {{ \"streamChat.Reply to Message\" | translate }}\n    </div>\n    <button\n      class=\"str-chat__quoted-message-remove\"\n      data-testid=\"remove-quote\"\n      (click)=\"deselectMessageToQuote()\"\n      (keyup.enter)=\"deselectMessageToQuote()\"\n    >\n      <stream-icon-placeholder icon=\"close\"></stream-icon-placeholder>\n    </button>\n  </div>\n  <div *ngIf=\"isUpdate\" class=\"str-chat__quoted-message-preview-header\">\n    <div class=\"str-chat__quoted-message-reply-to-message\">\n      {{ \"streamChat.Edit Message\" | translate }}\n    </div>\n    <button\n      class=\"str-chat__quoted-message-remove\"\n      data-testid=\"remove-quote\"\n      (click)=\"deselectMessageToEdit()\"\n      (keyup.enter)=\"deselectMessageToEdit()\"\n    >\n      <stream-icon-placeholder icon=\"close\"></stream-icon-placeholder>\n    </button>\n  </div>\n  <ng-container *ngIf=\"canSendMessages; else notAllowed\">\n    <div\n      class=\"str-chat__message-input-inner str-chat-angular__message-input-inner\"\n    >\n      <ng-content select=\"[message-input-start]\"></ng-content>\n      <ng-container\n        *ngIf=\"isFileUploadEnabled && isFileUploadAuthorized && canSendMessages\"\n      >\n        <ng-container\n          *ngTemplateOutlet=\"\n            customAttachmentUploadTemplate || defaultAttachmentUpload;\n            context: getAttachmentUploadContext()\n          \"\n        ></ng-container>\n        <ng-template #defaultAttachmentUpload>\n          <div\n            class=\"str-chat__file-input-container\"\n            data-testid=\"file-upload-button\"\n          >\n            <input\n              #fileInput\n              type=\"file\"\n              class=\"str-chat__file-input\"\n              data-testid=\"file-input\"\n              [multiple]=\"isMultipleFileUploadEnabled\"\n              id=\"{{ fileInputId }}\"\n              [disabled]=\"\n                (attachmentService.attachmentsCounter$ | async)! >=\n                attachmentService.maxNumberOfAttachments\n              \"\n              (change)=\"filesSelected(fileInput.files)\"\n            />\n            <label class=\"str-chat__file-input-label\" for=\"{{ fileInputId }}\">\n              <stream-icon-placeholder icon=\"attach\"></stream-icon-placeholder>\n            </label>\n          </div>\n        </ng-template>\n      </ng-container>\n      <ng-container\n        *ngIf=\"canSendPolls && displayPollCreateButton && mode !== 'thread'\"\n      >\n        <button\n          class=\"str-chat-angular__create-poll\"\n          (click)=\"openPollComposer()\"\n        >\n          <stream-icon-placeholder icon=\"poll\"></stream-icon-placeholder>\n        </button>\n      </ng-container>\n      <div class=\"str-chat__message-textarea-container\">\n        <div\n          *ngIf=\"quotedMessage\"\n          data-testid=\"quoted-message-container\"\n          class=\"str-chat__quoted-message-preview\"\n        >\n          <stream-avatar-placeholder\n            data-testid=\"qouted-message-avatar\"\n            class=\"str-chat-angular__avatar-host str-chat__message-sender-avatar\"\n            type=\"user\"\n            location=\"quoted-message-sender\"\n            [imageUrl]=\"quotedMessage.user?.image\"\n            [name]=\"quotedMessage.user?.name || quotedMessage.user?.id\"\n            [user]=\"quotedMessage.user || undefined\"\n          ></stream-avatar-placeholder>\n          <div\n            class=\"quoted-message-preview-content-inner str-chat__quoted-message-bubble\"\n          >\n            <stream-attachment-list\n              *ngIf=\"\n                quotedMessage?.attachments && quotedMessage?.attachments?.length\n              \"\n              [attachments]=\"quotedMessageAttachments\"\n              [messageId]=\"quotedMessage.id\"\n            ></stream-attachment-list>\n            <ng-container\n              *ngIf=\"\n                quotedMessage?.poll_id &&\n                (customTemplatesService.pollTemplate$ | async)\n              \"\n            >\n              <ng-container\n                *ngTemplateOutlet=\"\n                  (customTemplatesService.pollTemplate$ | async)!;\n                  context: {\n                    pollId: quotedMessage?.poll_id,\n                    messageId: quotedMessage?.id,\n                    isQuote: true\n                  }\n                \"\n              ></ng-container>\n            </ng-container>\n            <div class=\"str-chat__quoted-message-text\">\n              <ng-container\n                *ngTemplateOutlet=\"\n                  (customTemplatesService.messageTextTemplate$ | async) ||\n                    defaultText;\n                  context: getQuotedMessageTextContext()\n                \"\n              ></ng-container>\n              <ng-template\n                #defaultText\n                let-message=\"message\"\n                let-isQuoted=\"isQuoted\"\n                let-shouldTranslate=\"shouldTranslate\"\n              >\n                <stream-message-text\n                  [message]=\"message\"\n                  [isQuoted]=\"isQuoted\"\n                  [shouldTranslate]=\"shouldTranslate\"\n                  data-testid=\"quoted-message-text\"\n                ></stream-message-text>\n              </ng-template>\n            </div>\n          </div>\n        </div>\n        <ng-template\n          #defaultAttachmentsPreview\n          let-attachmentUploads$=\"attachmentUploads$\"\n          let-retryUploadHandler=\"retryUploadHandler\"\n          let-deleteUploadHandler=\"deleteUploadHandler\"\n        >\n          <stream-attachment-preview-list\n            class=\"str-chat__attachment-preview-list-angular-host\"\n            [attachmentUploads$]=\"attachmentUploads$\"\n            (retryAttachmentUpload)=\"retryUploadHandler($event)\"\n            (deleteAttachment)=\"deleteUploadHandler($event)\"\n          ></stream-attachment-preview-list>\n        </ng-template>\n        <ng-container\n          *ngTemplateOutlet=\"\n            attachmentPreviewListTemplate || defaultAttachmentsPreview;\n            context: getAttachmentPreviewListContext()\n          \"\n        ></ng-container>\n        <div class=\"str-chat__message-textarea-with-emoji-picker\">\n          <ng-container\n            streamTextarea\n            [componentRef]=\"textareaRef\"\n            [areMentionsEnabled]=\"areMentionsEnabled\"\n            [mentionScope]=\"mentionScope\"\n            [inputMode]=\"inputMode\"\n            [autoFocus]=\"autoFocus\"\n            [placeholder]=\"textareaPlaceholder\"\n            [(value)]=\"textareaValue\"\n            (valueChange)=\"typingStart$.next(); updateMessageDraft()\"\n            (send)=\"messageSent()\"\n            (userMentions)=\"userMentionsChanged($event)\"\n            (pasteFromClipboard)=\"itemsPasted($event)\"\n          ></ng-container>\n          <ng-container *ngIf=\"emojiPickerTemplate\" data-testid=\"emoji-picker\">\n            <ng-container\n              *ngTemplateOutlet=\"\n                emojiPickerTemplate;\n                context: getEmojiPickerContext()\n              \"\n            ></ng-container>\n          </ng-container>\n        </div>\n      </div>\n      <button\n        *ngIf=\"canSendMessages && !isCooldownInProgress && displaySendButton\"\n        data-testid=\"send-button\"\n        class=\"str-chat__send-button\"\n        [disabled]=\"\n          (attachmentUploadInProgressCounter$ | async)! > 0 ||\n          (attachmentService.attachmentsCounter$ | async)! >\n            attachmentService.maxNumberOfAttachments ||\n          (!textareaValue &&\n            (attachmentUploads$ | async)!.length === 0 &&\n            (customAttachments$ | async)!.length === 0)\n        \"\n        (click)=\"messageSent()\"\n        (keyup.enter)=\"messageSent()\"\n      >\n        <stream-icon-placeholder icon=\"send\"></stream-icon-placeholder>\n      </button>\n      <div\n        *ngIf=\"isCooldownInProgress\"\n        class=\"str-chat__message-input-cooldown\"\n        data-testid=\"cooldown-timer\"\n      >\n        {{ cooldown$ | async }}\n      </div>\n      <button\n        *ngIf=\"displayVoiceRecordingButton\"\n        class=\"str-chat__start-recording-audio-button\"\n        data-testid=\"start-voice-recording\"\n        [disabled]=\"\n          voiceRecorderService.isRecorderVisible$.value ||\n          audioRecorder?.isRecording ||\n          (attachmentService.attachmentsCounter$ | async)! >=\n            attachmentService.maxNumberOfAttachments\n        \"\n        (click)=\"startVoiceRecording()\"\n        (keyup.enter)=\"startVoiceRecording()\"\n      >\n        <stream-icon-placeholder icon=\"mic\"></stream-icon-placeholder>\n      </button>\n      <ng-content select=\"[message-input-end]\"></ng-content>\n    </div>\n  </ng-container>\n  <ng-template #notAllowed>\n    <div\n      class=\"str-chat__message-input-not-allowed\"\n      data-testid=\"disabled-textarea\"\n    >\n      {{ disabledTextareaText | translate }}\n    </div>\n  </ng-template>\n</div>\n<ng-template\n  *ngIf=\"voiceRecorderRef\"\n  [ngTemplateOutlet]=\"voiceRecorderRef\"\n  [ngTemplateOutletContext]=\"{ service: voiceRecorderService }\"\n></ng-template>\n<ng-template\n  *ngIf=\"\n    isComposerOpen && (customTemplatesService.pollComposerTemplate$ | async)\n  \"\n  [ngTemplateOutlet]=\"(customTemplatesService.pollComposerTemplate$ | async)!\"\n  [ngTemplateOutletContext]=\"{\n    pollCompose: addPoll,\n    cancel: closePollComposer\n  }\"\n></ng-template>\n" }]
-        }], ctorParameters: function () { return [{ type: ChannelService }, { type: NotificationService }, { type: AttachmentService }, { type: MessageInputConfigService }, { type: i0.Type, decorators: [{
+            args: [{ selector: 'stream-message-input', providers: [AttachmentService, EmojiInputService, VoiceRecorderService], template: "<div\n  class=\"str-chat__message-input str-chat-angular__message-input\"\n  [style.display]=\"isVoiceRecording ? 'none' : 'flex'\"\n>\n  <div *ngIf=\"quotedMessage\" class=\"str-chat__quoted-message-preview-header\">\n    <div class=\"str-chat__quoted-message-reply-to-message\">\n      {{ \"streamChat.Reply to Message\" | translate }}\n    </div>\n    <button\n      class=\"str-chat__quoted-message-remove\"\n      data-testid=\"remove-quote\"\n      (click)=\"deselectMessageToQuote()\"\n      (keyup.enter)=\"deselectMessageToQuote()\"\n    >\n      <stream-icon-placeholder icon=\"close\" />\n    </button>\n  </div>\n  <div *ngIf=\"isUpdate\" class=\"str-chat__quoted-message-preview-header\">\n    <div class=\"str-chat__quoted-message-reply-to-message\">\n      {{ \"streamChat.Edit Message\" | translate }}\n    </div>\n    <button\n      class=\"str-chat__quoted-message-remove\"\n      data-testid=\"remove-quote\"\n      (click)=\"deselectMessageToEdit()\"\n      (keyup.enter)=\"deselectMessageToEdit()\"\n    >\n      <stream-icon-placeholder icon=\"close\" />\n    </button>\n  </div>\n  <ng-container *ngIf=\"canSendMessages; else notAllowed\">\n    <div\n      class=\"str-chat__message-input-inner str-chat-angular__message-input-inner\"\n    >\n      <ng-content select=\"[message-input-start]\"></ng-content>\n      <ng-container\n        *ngIf=\"isFileUploadEnabled && isFileUploadAuthorized && canSendMessages\"\n      >\n        <ng-container\n          *ngTemplateOutlet=\"\n            customAttachmentUploadTemplate || defaultAttachmentUpload;\n            context: getAttachmentUploadContext()\n          \"\n        />\n        <ng-template #defaultAttachmentUpload>\n          <div\n            class=\"str-chat__file-input-container\"\n            data-testid=\"file-upload-button\"\n          >\n            <input\n              #fileInput\n              type=\"file\"\n              class=\"str-chat__file-input\"\n              data-testid=\"file-input\"\n              [multiple]=\"isMultipleFileUploadEnabled\"\n              id=\"{{ fileInputId }}\"\n              [disabled]=\"\n                (attachmentService.attachmentsCounter$ | async)! >=\n                attachmentService.maxNumberOfAttachments\n              \"\n              (change)=\"filesSelected(fileInput.files)\"\n            />\n            <label class=\"str-chat__file-input-label\" for=\"{{ fileInputId }}\">\n              <stream-icon-placeholder icon=\"attach\" />\n            </label>\n          </div>\n        </ng-template>\n      </ng-container>\n      <ng-container\n        *ngIf=\"canSendPolls && displayPollCreateButton && mode !== 'thread'\"\n      >\n        <button\n          class=\"str-chat-angular__create-poll\"\n          (click)=\"openPollComposer()\"\n        >\n          <stream-icon-placeholder icon=\"poll\" />\n        </button>\n      </ng-container>\n      <div class=\"str-chat__message-textarea-container\">\n        <div\n          *ngIf=\"quotedMessage\"\n          data-testid=\"quoted-message-container\"\n          class=\"str-chat__quoted-message-preview\"\n        >\n          <stream-avatar-placeholder\n            data-testid=\"qouted-message-avatar\"\n            class=\"str-chat-angular__avatar-host str-chat__message-sender-avatar\"\n            type=\"user\"\n            location=\"quoted-message-sender\"\n            [imageUrl]=\"quotedMessage.user?.image\"\n            [name]=\"quotedMessage.user?.name || quotedMessage.user?.id\"\n            [user]=\"quotedMessage.user || undefined\"\n          />\n          <div\n            class=\"quoted-message-preview-content-inner str-chat__quoted-message-bubble\"\n          >\n            <stream-attachment-list\n              *ngIf=\"\n                quotedMessage?.attachments && quotedMessage?.attachments?.length\n              \"\n              [attachments]=\"quotedMessageAttachments\"\n              [messageId]=\"quotedMessage.id\"\n            />\n            <ng-container\n              *ngIf=\"\n                quotedMessage?.poll_id &&\n                (customTemplatesService.pollTemplate$ | async)\n              \"\n            >\n              <ng-container\n                *ngTemplateOutlet=\"\n                  (customTemplatesService.pollTemplate$ | async)!;\n                  context: {\n                    pollId: quotedMessage?.poll_id,\n                    messageId: quotedMessage?.id,\n                    isQuote: true\n                  }\n                \"\n              />\n            </ng-container>\n            <div class=\"str-chat__quoted-message-text\">\n              <ng-container\n                *ngTemplateOutlet=\"\n                  (customTemplatesService.messageTextTemplate$ | async) ||\n                    defaultText;\n                  context: getQuotedMessageTextContext()\n                \"\n              />\n              <ng-template\n                #defaultText\n                let-message=\"message\"\n                let-isQuoted=\"isQuoted\"\n                let-shouldTranslate=\"shouldTranslate\"\n              >\n                <stream-message-text\n                  [message]=\"message\"\n                  [isQuoted]=\"isQuoted\"\n                  [shouldTranslate]=\"shouldTranslate\"\n                  data-testid=\"quoted-message-text\"\n                />\n              </ng-template>\n            </div>\n          </div>\n        </div>\n        <ng-template\n          #defaultAttachmentsPreview\n          let-attachmentUploads$=\"attachmentUploads$\"\n          let-retryUploadHandler=\"retryUploadHandler\"\n          let-deleteUploadHandler=\"deleteUploadHandler\"\n        >\n          <stream-attachment-preview-list\n            class=\"str-chat__attachment-preview-list-angular-host\"\n            [attachmentUploads$]=\"attachmentUploads$\"\n            (retryAttachmentUpload)=\"retryUploadHandler($event)\"\n            (deleteAttachment)=\"deleteUploadHandler($event)\"\n          />\n        </ng-template>\n        <ng-container\n          *ngTemplateOutlet=\"\n            attachmentPreviewListTemplate || defaultAttachmentsPreview;\n            context: getAttachmentPreviewListContext()\n          \"\n        />\n        <div class=\"str-chat__message-textarea-with-emoji-picker\">\n          <ng-container\n            streamTextarea\n            [componentRef]=\"textareaRef\"\n            [areMentionsEnabled]=\"areMentionsEnabled\"\n            [mentionScope]=\"mentionScope\"\n            [inputMode]=\"inputMode\"\n            [autoFocus]=\"autoFocus\"\n            [placeholder]=\"textareaPlaceholder\"\n            [(value)]=\"textareaValue\"\n            (valueChange)=\"typingStart$.next(); updateMessageDraft()\"\n            (send)=\"messageSent()\"\n            (userMentions)=\"userMentionsChanged($event)\"\n            (pasteFromClipboard)=\"itemsPasted($event)\"\n          />\n          <ng-container *ngIf=\"emojiPickerTemplate\" data-testid=\"emoji-picker\">\n            <ng-container\n              *ngTemplateOutlet=\"\n                emojiPickerTemplate;\n                context: getEmojiPickerContext()\n              \"\n            />\n          </ng-container>\n        </div>\n      </div>\n      <button\n        *ngIf=\"canSendMessages && !isCooldownInProgress && displaySendButton\"\n        data-testid=\"send-button\"\n        class=\"str-chat__send-button\"\n        [disabled]=\"\n          (attachmentUploadInProgressCounter$ | async)! > 0 ||\n          (attachmentService.attachmentsCounter$ | async)! >\n            attachmentService.maxNumberOfAttachments ||\n          (!textareaValue &&\n            (attachmentUploads$ | async)!.length === 0 &&\n            (customAttachments$ | async)!.length === 0)\n        \"\n        (click)=\"messageSent()\"\n        (keyup.enter)=\"messageSent()\"\n      >\n        <stream-icon-placeholder icon=\"send\" />\n      </button>\n      <div\n        *ngIf=\"isCooldownInProgress\"\n        class=\"str-chat__message-input-cooldown\"\n        data-testid=\"cooldown-timer\"\n      >\n        {{ cooldown$ | async }}\n      </div>\n      <button\n        *ngIf=\"displayVoiceRecordingButton\"\n        class=\"str-chat__start-recording-audio-button\"\n        data-testid=\"start-voice-recording\"\n        [disabled]=\"\n          voiceRecorderService.isRecorderVisible$.value ||\n          audioRecorder?.isRecording ||\n          (attachmentService.attachmentsCounter$ | async)! >=\n            attachmentService.maxNumberOfAttachments\n        \"\n        (click)=\"startVoiceRecording()\"\n        (keyup.enter)=\"startVoiceRecording()\"\n      >\n        <stream-icon-placeholder icon=\"mic\" />\n      </button>\n      <ng-content select=\"[message-input-end]\"></ng-content>\n    </div>\n  </ng-container>\n  <ng-template #notAllowed>\n    <div\n      class=\"str-chat__message-input-not-allowed\"\n      data-testid=\"disabled-textarea\"\n    >\n      {{ disabledTextareaText | translate }}\n    </div>\n  </ng-template>\n</div>\n<ng-template\n  *ngIf=\"voiceRecorderRef\"\n  [ngTemplateOutlet]=\"voiceRecorderRef\"\n  [ngTemplateOutletContext]=\"{ service: voiceRecorderService }\"\n></ng-template>\n<ng-template\n  *ngIf=\"\n    isComposerOpen && (customTemplatesService.pollComposerTemplate$ | async)\n  \"\n  [ngTemplateOutlet]=\"(customTemplatesService.pollComposerTemplate$ | async)!\"\n  [ngTemplateOutletContext]=\"{\n    pollCompose: addPoll,\n    cancel: closePollComposer\n  }\"\n></ng-template>\n" }]
+        }], ctorParameters: () => [{ type: ChannelService }, { type: NotificationService }, { type: AttachmentService }, { type: MessageInputConfigService }, { type: i0.Type, decorators: [{
                     type: Inject,
                     args: [textareaInjectionToken]
                 }] }, { type: i0.ComponentFactoryResolver }, { type: i0.ChangeDetectorRef }, { type: EmojiInputService }, { type: CustomTemplatesService }, { type: MessageActionsService }, { type: VoiceRecorderService }, { type: AudioRecorderService, decorators: [{
                     type: Optional
-                }] }]; }, propDecorators: { isFileUploadEnabled: [{
+                }] }], propDecorators: { isFileUploadEnabled: [{
                 type: Input
             }], areMentionsEnabled: [{
                 type: Input
@@ -7314,13 +7307,13 @@ class TextareaComponent {
         this.messageInput.nativeElement.style.height = '';
         this.messageInput.nativeElement.style.height = `${this.messageInput.nativeElement.scrollHeight}px`;
     }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: TextareaComponent, deps: [{ token: EmojiInputService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: TextareaComponent, selector: "stream-textarea", inputs: { value: "value", placeholder: "placeholder", inputMode: "inputMode", autoFocus: "autoFocus" }, outputs: { valueChange: "valueChange", send: "send", pasteFromClipboard: "pasteFromClipboard" }, host: { properties: { "class": "this.class" } }, viewQueries: [{ propertyName: "messageInput", first: true, predicate: ["input"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<textarea\n  #input\n  data-testid=\"textarea\"\n  class=\"rta__textarea str-chat__textarea__textarea str-chat__angular-textarea str-chat__message-textarea\"\n  rows=\"1\"\n  [value]=\"value || ''\"\n  [autofocus]=\"autoFocus\"\n  placeholder=\"{{ placeholder | translate }}\"\n  (input)=\"inputChanged()\"\n  (keydown.enter)=\"enterHit($event)\"\n  (paste)=\"pasteFromClipboard.emit($event)\"\n></textarea>\n", dependencies: [{ kind: "pipe", type: i6.TranslatePipe, name: "translate" }] }); }
 }
-TextareaComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: TextareaComponent, deps: [{ token: EmojiInputService }], target: i0.ɵɵFactoryTarget.Component });
-TextareaComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.4", type: TextareaComponent, selector: "stream-textarea", inputs: { value: "value", placeholder: "placeholder", inputMode: "inputMode", autoFocus: "autoFocus" }, outputs: { valueChange: "valueChange", send: "send", pasteFromClipboard: "pasteFromClipboard" }, host: { properties: { "class": "this.class" } }, viewQueries: [{ propertyName: "messageInput", first: true, predicate: ["input"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<textarea\n  #input\n  data-testid=\"textarea\"\n  class=\"rta__textarea str-chat__textarea__textarea str-chat__angular-textarea str-chat__message-textarea\"\n  rows=\"1\"\n  [value]=\"value || ''\"\n  [autofocus]=\"autoFocus\"\n  placeholder=\"{{ placeholder | translate }}\"\n  (input)=\"inputChanged()\"\n  (keydown.enter)=\"enterHit($event)\"\n  (paste)=\"pasteFromClipboard.emit($event)\"\n></textarea>\n", dependencies: [{ kind: "pipe", type: i6.TranslatePipe, name: "translate" }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: TextareaComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: TextareaComponent, decorators: [{
             type: Component,
             args: [{ selector: 'stream-textarea', template: "<textarea\n  #input\n  data-testid=\"textarea\"\n  class=\"rta__textarea str-chat__textarea__textarea str-chat__angular-textarea str-chat__message-textarea\"\n  rows=\"1\"\n  [value]=\"value || ''\"\n  [autofocus]=\"autoFocus\"\n  placeholder=\"{{ placeholder | translate }}\"\n  (input)=\"inputChanged()\"\n  (keydown.enter)=\"enterHit($event)\"\n  (paste)=\"pasteFromClipboard.emit($event)\"\n></textarea>\n" }]
-        }], ctorParameters: function () { return [{ type: EmojiInputService }]; }, propDecorators: { class: [{
+        }], ctorParameters: () => [{ type: EmojiInputService }], propDecorators: { class: [{
                 type: HostBinding
             }], value: [{
                 type: Input
@@ -7354,13 +7347,13 @@ class TransliterationService {
     transliterate(s) {
         return transliterate(s);
     }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: TransliterationService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: TransliterationService, providedIn: 'root' }); }
 }
-TransliterationService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: TransliterationService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-TransliterationService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: TransliterationService, providedIn: 'root' });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: TransliterationService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: TransliterationService, decorators: [{
             type: Injectable,
             args: [{ providedIn: 'root' }]
-        }], ctorParameters: function () { return []; } });
+        }], ctorParameters: () => [] });
 
 /**
  * The `AutocompleteTextarea` component is used by the [`MessageInput`](/chat/docs/sdk/angular/components/MessageInputComponent/) component to display the input HTML element where users can type their message.
@@ -7648,13 +7641,13 @@ class AutocompleteTextareaComponent {
             this.autocompleteConfig = { ...this.autocompleteConfig };
         }
     }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: AutocompleteTextareaComponent, deps: [{ token: ChannelService }, { token: ChatClientService }, { token: TransliterationService }, { token: EmojiInputService }, { token: CustomTemplatesService }, { token: i0.ChangeDetectorRef }, { token: MessageInputConfigService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: AutocompleteTextareaComponent, selector: "stream-autocomplete-textarea", inputs: { value: "value", placeholder: "placeholder", areMentionsEnabled: "areMentionsEnabled", inputMode: "inputMode", mentionScope: "mentionScope", autoFocus: "autoFocus" }, outputs: { valueChange: "valueChange", send: "send", userMentions: "userMentions", pasteFromClipboard: "pasteFromClipboard" }, host: { properties: { "class": "this.class" } }, viewQueries: [{ propertyName: "messageInput", first: true, predicate: ["input"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<textarea\n  #input\n  data-testid=\"textarea\"\n  class=\"rta__textarea str-chat__textarea__textarea str-chat__angular-textarea str-chat__message-textarea\"\n  rows=\"1\"\n  [value]=\"value || ''\"\n  [autofocus]=\"autoFocus\"\n  placeholder=\"{{ placeholder | translate }}\"\n  [mentionConfig]=\"autocompleteConfig\"\n  [mentionListTemplate]=\"autocompleteItem\"\n  (input)=\"inputChanged()\"\n  (keydown.enter)=\"enterHit($event)\"\n  (searchTerm)=\"autcompleteSearchTermChanged($event)\"\n  (blur)=\"inputLeft()\"\n  (paste)=\"pasteFromClipboard.emit($event)\"\n></textarea>\n<ng-template #autocompleteItem let-item=\"item\">\n  <ng-container *ngIf=\"item.templateRef; else builtinItem\">\n    <ng-container\n      *ngTemplateOutlet=\"item.templateRef; context: { item: item }\"\n    />\n  </ng-container>\n  <ng-template #builtinItem>\n    <div\n      class=\"rta rta__item str-chat__emojisearch__item\"\n      [ngSwitch]=\"item.type\"\n    >\n      <div *ngSwitchCase=\"'mention'\" class=\"rta__entity\">\n        <ng-container\n          *ngTemplateOutlet=\"\n            mentionAutocompleteItemTemplate || defaultMentionTemplate;\n            context: { item: item }\n          \"\n        />\n      </div>\n      <div *ngSwitchCase=\"'command'\" class=\"rta__entity\">\n        <ng-container\n          *ngTemplateOutlet=\"\n            commandAutocompleteItemTemplate || defaultCommandTemplate;\n            context: { item: item }\n          \"\n        />\n      </div>\n    </div>\n  </ng-template>\n</ng-template>\n\n<ng-template #defaultCommandTemplate let-item=\"item\">\n  <div class=\"str-chat__slash-command\">\n    <span class=\"str-chat__slash-command-header\">\n      <strong\n        class=\"str-chat__slash-command-name\"\n        data-testclass=\"command-name\"\n        >{{ item.name }}</strong\n      >\n      <span class=\"str-chat__slash-command-args\"\n        >/{{ item.name }} {{ item.args }}</span\n      >\n    </span>\n    <br />\n  </div>\n</ng-template>\n\n<ng-template #defaultMentionTemplate let-item=\"item\">\n  <div class=\"str-chat__user-item\">\n    <stream-avatar-placeholder\n      data-testclass=\"avatar\"\n      class=\"str-chat__avatar str-chat__avatar--circle\"\n      type=\"user\"\n      location=\"autocomplete-item\"\n      [imageUrl]=\"item.image || item.user?.image\"\n      [name]=\"item.autocompleteLabel\"\n      [user]=\"item.user || item\"\n    />\n    <span data-testclass=\"username\" class=\"str-chat__user-item--name\">{{\n      item.autocompleteLabel\n    }}</span>\n  </div>\n</ng-template>\n", dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i1.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: i8$1.MentionDirective, selector: "[mention], [mentionConfig]", inputs: ["mention", "mentionConfig", "mentionListTemplate"], outputs: ["searchTerm", "itemSelected", "opened", "closed"] }, { kind: "component", type: AvatarPlaceholderComponent, selector: "stream-avatar-placeholder", inputs: ["name", "imageUrl", "location", "channel", "user", "type", "initialsType", "showOnlineIndicator"] }, { kind: "pipe", type: i6.TranslatePipe, name: "translate" }] }); }
 }
-AutocompleteTextareaComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: AutocompleteTextareaComponent, deps: [{ token: ChannelService }, { token: ChatClientService }, { token: TransliterationService }, { token: EmojiInputService }, { token: CustomTemplatesService }, { token: i0.ChangeDetectorRef }, { token: MessageInputConfigService }], target: i0.ɵɵFactoryTarget.Component });
-AutocompleteTextareaComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.4", type: AutocompleteTextareaComponent, selector: "stream-autocomplete-textarea", inputs: { value: "value", placeholder: "placeholder", areMentionsEnabled: "areMentionsEnabled", inputMode: "inputMode", mentionScope: "mentionScope", autoFocus: "autoFocus" }, outputs: { valueChange: "valueChange", send: "send", userMentions: "userMentions", pasteFromClipboard: "pasteFromClipboard" }, host: { properties: { "class": "this.class" } }, viewQueries: [{ propertyName: "messageInput", first: true, predicate: ["input"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<textarea\n  #input\n  data-testid=\"textarea\"\n  class=\"rta__textarea str-chat__textarea__textarea str-chat__angular-textarea str-chat__message-textarea\"\n  rows=\"1\"\n  [value]=\"value || ''\"\n  [autofocus]=\"autoFocus\"\n  placeholder=\"{{ placeholder | translate }}\"\n  [mentionConfig]=\"autocompleteConfig\"\n  [mentionListTemplate]=\"autocompleteItem\"\n  (input)=\"inputChanged()\"\n  (keydown.enter)=\"enterHit($event)\"\n  (searchTerm)=\"autcompleteSearchTermChanged($event)\"\n  (blur)=\"inputLeft()\"\n  (paste)=\"pasteFromClipboard.emit($event)\"\n></textarea>\n<ng-template #autocompleteItem let-item=\"item\">\n  <ng-container *ngIf=\"item.templateRef; else builtinItem\">\n    <ng-container\n      *ngTemplateOutlet=\"item.templateRef; context: { item: item }\"\n    ></ng-container>\n  </ng-container>\n  <ng-template #builtinItem>\n    <div\n      class=\"rta rta__item str-chat__emojisearch__item\"\n      [ngSwitch]=\"item.type\"\n    >\n      <div *ngSwitchCase=\"'mention'\" class=\"rta__entity\">\n        <ng-container\n          *ngTemplateOutlet=\"\n            mentionAutocompleteItemTemplate || defaultMentionTemplate;\n            context: { item: item }\n          \"\n        ></ng-container>\n      </div>\n      <div *ngSwitchCase=\"'command'\" class=\"rta__entity\">\n        <ng-container\n          *ngTemplateOutlet=\"\n            commandAutocompleteItemTemplate || defaultCommandTemplate;\n            context: { item: item }\n          \"\n        ></ng-container>\n      </div>\n    </div>\n  </ng-template>\n</ng-template>\n\n<ng-template #defaultCommandTemplate let-item=\"item\">\n  <div class=\"str-chat__slash-command\">\n    <span class=\"str-chat__slash-command-header\">\n      <strong\n        class=\"str-chat__slash-command-name\"\n        data-testclass=\"command-name\"\n        >{{ item.name }}</strong\n      >\n      <span class=\"str-chat__slash-command-args\"\n        >/{{ item.name }} {{ item.args }}</span\n      >\n    </span>\n    <br />\n  </div>\n</ng-template>\n\n<ng-template #defaultMentionTemplate let-item=\"item\">\n  <div class=\"str-chat__user-item\">\n    <stream-avatar-placeholder\n      data-testclass=\"avatar\"\n      class=\"str-chat__avatar str-chat__avatar--circle\"\n      type=\"user\"\n      location=\"autocomplete-item\"\n      [imageUrl]=\"item.image || item.user?.image\"\n      [name]=\"item.autocompleteLabel\"\n      [user]=\"item.user || item\"\n    ></stream-avatar-placeholder>\n    <span data-testclass=\"username\" class=\"str-chat__user-item--name\">{{\n      item.autocompleteLabel\n    }}</span>\n  </div>\n</ng-template>\n", dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i1.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: i8$1.MentionDirective, selector: "[mention], [mentionConfig]", inputs: ["mentionConfig", "mention", "mentionListTemplate"], outputs: ["searchTerm", "itemSelected", "opened", "closed"] }, { kind: "component", type: AvatarPlaceholderComponent, selector: "stream-avatar-placeholder", inputs: ["name", "imageUrl", "location", "channel", "user", "type", "initialsType", "showOnlineIndicator"] }, { kind: "pipe", type: i6.TranslatePipe, name: "translate" }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: AutocompleteTextareaComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: AutocompleteTextareaComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'stream-autocomplete-textarea', template: "<textarea\n  #input\n  data-testid=\"textarea\"\n  class=\"rta__textarea str-chat__textarea__textarea str-chat__angular-textarea str-chat__message-textarea\"\n  rows=\"1\"\n  [value]=\"value || ''\"\n  [autofocus]=\"autoFocus\"\n  placeholder=\"{{ placeholder | translate }}\"\n  [mentionConfig]=\"autocompleteConfig\"\n  [mentionListTemplate]=\"autocompleteItem\"\n  (input)=\"inputChanged()\"\n  (keydown.enter)=\"enterHit($event)\"\n  (searchTerm)=\"autcompleteSearchTermChanged($event)\"\n  (blur)=\"inputLeft()\"\n  (paste)=\"pasteFromClipboard.emit($event)\"\n></textarea>\n<ng-template #autocompleteItem let-item=\"item\">\n  <ng-container *ngIf=\"item.templateRef; else builtinItem\">\n    <ng-container\n      *ngTemplateOutlet=\"item.templateRef; context: { item: item }\"\n    ></ng-container>\n  </ng-container>\n  <ng-template #builtinItem>\n    <div\n      class=\"rta rta__item str-chat__emojisearch__item\"\n      [ngSwitch]=\"item.type\"\n    >\n      <div *ngSwitchCase=\"'mention'\" class=\"rta__entity\">\n        <ng-container\n          *ngTemplateOutlet=\"\n            mentionAutocompleteItemTemplate || defaultMentionTemplate;\n            context: { item: item }\n          \"\n        ></ng-container>\n      </div>\n      <div *ngSwitchCase=\"'command'\" class=\"rta__entity\">\n        <ng-container\n          *ngTemplateOutlet=\"\n            commandAutocompleteItemTemplate || defaultCommandTemplate;\n            context: { item: item }\n          \"\n        ></ng-container>\n      </div>\n    </div>\n  </ng-template>\n</ng-template>\n\n<ng-template #defaultCommandTemplate let-item=\"item\">\n  <div class=\"str-chat__slash-command\">\n    <span class=\"str-chat__slash-command-header\">\n      <strong\n        class=\"str-chat__slash-command-name\"\n        data-testclass=\"command-name\"\n        >{{ item.name }}</strong\n      >\n      <span class=\"str-chat__slash-command-args\"\n        >/{{ item.name }} {{ item.args }}</span\n      >\n    </span>\n    <br />\n  </div>\n</ng-template>\n\n<ng-template #defaultMentionTemplate let-item=\"item\">\n  <div class=\"str-chat__user-item\">\n    <stream-avatar-placeholder\n      data-testclass=\"avatar\"\n      class=\"str-chat__avatar str-chat__avatar--circle\"\n      type=\"user\"\n      location=\"autocomplete-item\"\n      [imageUrl]=\"item.image || item.user?.image\"\n      [name]=\"item.autocompleteLabel\"\n      [user]=\"item.user || item\"\n    ></stream-avatar-placeholder>\n    <span data-testclass=\"username\" class=\"str-chat__user-item--name\">{{\n      item.autocompleteLabel\n    }}</span>\n  </div>\n</ng-template>\n" }]
-        }], ctorParameters: function () { return [{ type: ChannelService }, { type: ChatClientService }, { type: TransliterationService }, { type: EmojiInputService }, { type: CustomTemplatesService }, { type: i0.ChangeDetectorRef }, { type: MessageInputConfigService }]; }, propDecorators: { class: [{
+            args: [{ selector: 'stream-autocomplete-textarea', template: "<textarea\n  #input\n  data-testid=\"textarea\"\n  class=\"rta__textarea str-chat__textarea__textarea str-chat__angular-textarea str-chat__message-textarea\"\n  rows=\"1\"\n  [value]=\"value || ''\"\n  [autofocus]=\"autoFocus\"\n  placeholder=\"{{ placeholder | translate }}\"\n  [mentionConfig]=\"autocompleteConfig\"\n  [mentionListTemplate]=\"autocompleteItem\"\n  (input)=\"inputChanged()\"\n  (keydown.enter)=\"enterHit($event)\"\n  (searchTerm)=\"autcompleteSearchTermChanged($event)\"\n  (blur)=\"inputLeft()\"\n  (paste)=\"pasteFromClipboard.emit($event)\"\n></textarea>\n<ng-template #autocompleteItem let-item=\"item\">\n  <ng-container *ngIf=\"item.templateRef; else builtinItem\">\n    <ng-container\n      *ngTemplateOutlet=\"item.templateRef; context: { item: item }\"\n    />\n  </ng-container>\n  <ng-template #builtinItem>\n    <div\n      class=\"rta rta__item str-chat__emojisearch__item\"\n      [ngSwitch]=\"item.type\"\n    >\n      <div *ngSwitchCase=\"'mention'\" class=\"rta__entity\">\n        <ng-container\n          *ngTemplateOutlet=\"\n            mentionAutocompleteItemTemplate || defaultMentionTemplate;\n            context: { item: item }\n          \"\n        />\n      </div>\n      <div *ngSwitchCase=\"'command'\" class=\"rta__entity\">\n        <ng-container\n          *ngTemplateOutlet=\"\n            commandAutocompleteItemTemplate || defaultCommandTemplate;\n            context: { item: item }\n          \"\n        />\n      </div>\n    </div>\n  </ng-template>\n</ng-template>\n\n<ng-template #defaultCommandTemplate let-item=\"item\">\n  <div class=\"str-chat__slash-command\">\n    <span class=\"str-chat__slash-command-header\">\n      <strong\n        class=\"str-chat__slash-command-name\"\n        data-testclass=\"command-name\"\n        >{{ item.name }}</strong\n      >\n      <span class=\"str-chat__slash-command-args\"\n        >/{{ item.name }} {{ item.args }}</span\n      >\n    </span>\n    <br />\n  </div>\n</ng-template>\n\n<ng-template #defaultMentionTemplate let-item=\"item\">\n  <div class=\"str-chat__user-item\">\n    <stream-avatar-placeholder\n      data-testclass=\"avatar\"\n      class=\"str-chat__avatar str-chat__avatar--circle\"\n      type=\"user\"\n      location=\"autocomplete-item\"\n      [imageUrl]=\"item.image || item.user?.image\"\n      [name]=\"item.autocompleteLabel\"\n      [user]=\"item.user || item\"\n    />\n    <span data-testclass=\"username\" class=\"str-chat__user-item--name\">{{\n      item.autocompleteLabel\n    }}</span>\n  </div>\n</ng-template>\n" }]
+        }], ctorParameters: () => [{ type: ChannelService }, { type: ChatClientService }, { type: TransliterationService }, { type: EmojiInputService }, { type: CustomTemplatesService }, { type: i0.ChangeDetectorRef }, { type: MessageInputConfigService }], propDecorators: { class: [{
                 type: HostBinding
             }], value: [{
                 type: Input
@@ -8078,6 +8071,9 @@ class VirtualizedMessageListService extends VirtualizedListService {
  * The `MessageList` component renders a scrollable list of messages.
  */
 class MessageListComponent {
+    get class() {
+        return `str-chat-angular__main-panel-inner str-chat-angular__message-list-host str-chat__main-panel-inner ${this.isEmpty ? 'str-chat-angular__message-list-host--empty' : ''}`;
+    }
     constructor(channelService, chatClientService, customTemplatesService, dateParser, ngZone, cdRef) {
         this.channelService = channelService;
         this.chatClientService = chatClientService;
@@ -8156,9 +8152,6 @@ class MessageListComponent {
         this.usersTypingInChannel$ = this.channelService.usersTypingInChannel$;
         this.usersTypingInThread$ = this.channelService.usersTypingInThread$;
     }
-    get class() {
-        return `str-chat-angular__main-panel-inner str-chat-angular__message-list-host str-chat__main-panel-inner ${this.isEmpty ? 'str-chat-angular__message-list-host--empty' : ''}`;
-    }
     ngOnInit() {
         this.subscriptions.push(this.forceRepaintSubject.pipe(throttleTime(1000)).subscribe(() => {
             this.forceRepaint();
@@ -8737,13 +8730,13 @@ class MessageListComponent {
         }
         return isOnSeparateDate(message.created_at, nextMessage.created_at);
     }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: MessageListComponent, deps: [{ token: ChannelService }, { token: ChatClientService }, { token: CustomTemplatesService }, { token: DateParserService }, { token: i0.NgZone }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: MessageListComponent, selector: "stream-message-list", inputs: { mode: "mode", direction: "direction", hideJumpToLatestButtonDuringScroll: "hideJumpToLatestButtonDuringScroll", displayDateSeparator: "displayDateSeparator", displayUnreadSeparator: "displayUnreadSeparator", dateSeparatorTextPos: "dateSeparatorTextPos", openMessageListAt: "openMessageListAt", hideUnreadCountForNotificationAndIndicator: "hideUnreadCountForNotificationAndIndicator", displayLoadingIndicator: "displayLoadingIndicator" }, host: { properties: { "class": "this.class" } }, viewQueries: [{ propertyName: "scrollContainer", first: true, predicate: ["scrollContainer"], descendants: true }, { propertyName: "parentMessageElement", first: true, predicate: ["parentMessageElement"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<ng-container\n  *ngIf=\"\n    lastReadMessageId &&\n    isUnreadNotificationVisible &&\n    openMessageListAt === 'last-message' &&\n    displayUnreadSeparator\n  \"\n>\n  <ng-container\n    *ngTemplateOutlet=\"\n      customnewMessagesNotificationTemplate ||\n        defaultUnreadMessagesNotification;\n      context: {\n        unreadCount: unreadCount,\n        onDismiss: messageNotificationDismissClicked,\n        onJump: messageNotificationJumpClicked\n      }\n    \"\n  />\n</ng-container>\n<ng-template\n  #defaultUnreadMessagesNotification\n  let-unreadCount=\"unreadCount\"\n  let-onDismiss=\"onDismiss\"\n  let-onJump=\"onJump\"\n>\n  <div\n    class=\"str-chat__unread-messages-notification\"\n    data-testid=\"unread-messages-notification\"\n  >\n    <button\n      data-testid=\"unread-messages-notification-jump-to-message\"\n      (click)=\"onJump()\"\n    >\n      <ng-container\n        *ngIf=\"\n          unreadCount > 0 && !hideUnreadCountForNotificationAndIndicator;\n          else noUnreadCount\n        \"\n      >\n        {{\n          (unreadCount === 1\n            ? \"streamChat.\\{\\{count\\}\\} unread message\"\n            : \"streamChat.\\{\\{count\\}\\} unread messages\"\n          ) | translate : { count: unreadCount }\n        }}\n      </ng-container>\n      <ng-template #noUnreadCount>\n        {{ \"streamChat.Unread messages\" | translate }}\n      </ng-template>\n    </button>\n    <button\n      data-testid=\"unread-messages-notification-dismiss\"\n      (click)=\"onDismiss()\"\n    >\n      <stream-icon-placeholder icon=\"close\" />\n    </button>\n  </div>\n</ng-template>\n<div #scrollContainer data-testid=\"scroll-container\" class=\"str-chat__list\">\n  <ng-container *ngIf=\"mode === 'main' && isEmpty && emptyListTemplate\">\n    <ng-container *ngTemplateOutlet=\"emptyListTemplate\" />\n  </ng-container>\n  <div class=\"str-chat__reverse-infinite-scroll str-chat__message-list-scroll\">\n    <ul class=\"str-chat__ul\">\n      <li\n        *ngIf=\"mode === 'thread' && parentMessage\"\n        #parentMessageElement\n        data-testid=\"parent-message\"\n        class=\"str-chat__parent-message-li\"\n      >\n        <ng-container\n          *ngTemplateOutlet=\"\n            messageTemplateContainer;\n            context: { message: parentMessage, index: 'parent' }\n          \"\n        />\n        <div data-testid=\"reply-count\" class=\"str-chat__thread-start\">\n          {{parentMessage.reply_count === 1 ? ('streamChat.1 reply' | translate) : ('streamChat.{{ replyCount }}\n          replies' | translate:replyCountParam)}}\n        </div>\n      </li>\n      <ng-container *ngIf=\"mode === 'thread' && isEmpty && emptyListTemplate\">\n        <ng-container *ngTemplateOutlet=\"emptyListTemplate\" />\n      </ng-container>\n      <stream-loading-indicator-placeholder\n        *ngIf=\"\n          ((loadingState === 'loading-top' && direction === 'bottom-to-top') ||\n            (loadingState === 'loading-bottom' &&\n              direction === 'top-to-bottom')) &&\n            displayLoadingIndicator;\n          else loadingIndicatorPlaceholder\n        \"\n        data-testid=\"top-loading-indicator\"\n      />\n      <ng-container *ngIf=\"messages$ | async as messages\">\n        <ng-container\n          *ngFor=\"\n            let message of messages;\n            let i = index;\n            let isFirst = first;\n            let isLast = last;\n            trackBy: trackByMessageId\n          \"\n        >\n          <ng-container *ngIf=\"isFirst\">\n            <ng-container\n              *ngTemplateOutlet=\"\n                dateSeparator;\n                context: {\n                  date: message.created_at,\n                  parsedDate: parseDate(message.created_at)\n                }\n              \"\n            />\n          </ng-container>\n          <li\n            tabindex=\"0\"\n            data-testclass=\"message\"\n            class=\"str-chat__li str-chat__li--{{ groupStyles[i] }}\"\n            id=\"{{ message.id }}\"\n          >\n            <ng-container\n              *ngTemplateOutlet=\"\n                messageTemplateContainer;\n                context: { message: message, index: i }\n              \"\n            />\n          </li>\n          <ng-container\n            *ngIf=\"\n              (lastReadMessageId === message?.id &&\n                direction === 'bottom-to-top') ||\n              (direction === 'top-to-bottom' &&\n                lastReadMessageId === messages[i + 1]?.id)\n            \"\n          >\n            <li\n              *ngIf=\"displayUnreadSeparator\"\n              id=\"stream-chat-new-message-indicator\"\n              data-testid=\"new-messages-indicator\"\n              class=\"str-chat__li str-chat__unread-messages-separator-wrapper\"\n            >\n              <ng-container\n                *ngTemplateOutlet=\"\n                  customnewMessagesIndicatorTemplate ||\n                    defaultNewMessagesIndicator;\n                  context: { unreadCount: unreadCount }\n                \"\n              />\n            </li>\n          </ng-container>\n          <ng-container *ngIf=\"isNextMessageOnSeparateDate[i]\">\n            <ng-container\n              *ngTemplateOutlet=\"\n                dateSeparator;\n                context: {\n                  date: messages[i + 1].created_at,\n                  parsedDate: parseDate(messages[i + 1].created_at)\n                }\n              \"\n            />\n          </ng-container>\n        </ng-container>\n      </ng-container>\n      <stream-loading-indicator-placeholder\n        *ngIf=\"\n          ((loadingState === 'loading-bottom' &&\n            direction === 'bottom-to-top') ||\n            (loadingState === 'loading-top' &&\n              direction === 'top-to-bottom')) &&\n            displayLoadingIndicator;\n          else loadingIndicatorPlaceholder\n        \"\n        data-testid=\"bottom-loading-indicator\"\n      />\n      <ng-template #loadingIndicatorPlaceholder>\n        <div class=\"str-chat__loading-indicator-placeholder\"></div>\n      </ng-template>\n    </ul>\n    <ng-template #defaultTypingIndicator let-usersTyping$=\"usersTyping$\">\n      <!-- eslint-disable-next-line @angular-eslint/template/no-any -->\n      <ng-container *ngIf=\"$any(usersTyping$ | async) as users\">\n        <div\n          *ngIf=\"users.length > 0\"\n          data-testid=\"typing-indicator\"\n          class=\"str-chat__typing-indicator str-chat__typing-indicator--typing\"\n        >\n          <div class=\"str-chat__typing-indicator__dots\">\n            <span class=\"str-chat__typing-indicator__dot\"></span>\n            <span class=\"str-chat__typing-indicator__dot\"></span>\n            <span class=\"str-chat__typing-indicator__dot\"></span>\n          </div>\n          <div\n            data-testid=\"typing-users\"\n            class=\"str-chat__typing-indicator__users\"\n          >\n            {{\n              users.length === 1\n                ? (\"streamChat.user is typing\"\n                  | translate : { user: getTypingIndicatorText(users) })\n                : (\"streamChat.users are typing\"\n                  | translate : { users: getTypingIndicatorText(users) })\n            }}\n          </div>\n        </div>\n      </ng-container>\n    </ng-template>\n    <ng-container\n      *ngTemplateOutlet=\"\n        typingIndicatorTemplate || defaultTypingIndicator;\n        context: getTypingIndicatorContext()\n      \"\n    />\n  </div>\n</div>\n<div class=\"str-chat__jump-to-latest-message\">\n  <button\n    *ngIf=\"isUserScrolled && isJumpToLatestButtonVisible\"\n    data-testid=\"scroll-to-latest\"\n    class=\"str-chat__message-notification-scroll-to-latest str-chat__message-notification-scroll-to-latest-right str-chat__circle-fab\"\n    (keyup.enter)=\"jumpToLatestMessage()\"\n    (click)=\"jumpToLatestMessage()\"\n  >\n    <stream-icon\n      class=\"str-chat__jump-to-latest-icon str-chat__circle-fab-icon\"\n      [icon]=\"direction === 'bottom-to-top' ? 'arrow-down' : 'arrow-up'\"\n    />\n    <div\n      *ngIf=\"newMessageCountWhileBeingScrolled > 0\"\n      class=\"str-chat__message-notification str-chat__message-notification-scroll-to-latest-unread-count str-chat__jump-to-latest-unread-count\"\n    >\n      {{ newMessageCountWhileBeingScrolled }}\n    </div>\n  </button>\n</div>\n\n<ng-template #messageTemplateContainer let-message=\"message\" let-index=\"index\">\n  <ng-template\n    #defaultMessageTemplate\n    let-messageInput=\"message\"\n    let-isLastSentMessage=\"isLastSentMessage\"\n    let-enabledMessageActions=\"enabledMessageActions\"\n    let-mode=\"mode\"\n    let-isHighlighted=\"isHighlighted\"\n    let-scroll$=\"scroll$\"\n  >\n    <stream-message\n      [message]=\"messageInput\"\n      [isLastSentMessage]=\"isLastSentMessage\"\n      [enabledMessageActions]=\"enabledMessageActions\"\n      [mode]=\"mode\"\n      [isHighlighted]=\"isHighlighted\"\n      [scroll$]=\"scroll$\"\n    />\n  </ng-template>\n  <ng-container\n    *ngTemplateOutlet=\"\n      messageTemplate || defaultMessageTemplate;\n      context: {\n        message: message,\n        isLastSentMessage: !!(\n          lastSentMessageId && message?.id === lastSentMessageId\n        ),\n        enabledMessageActions: enabledMessageActions,\n        mode: mode,\n        isHighlighted: message?.id === highlightedMessageId,\n        scroll$: scroll$\n      }\n    \"\n  />\n</ng-template>\n\n<ng-template #dateSeparator let-date=\"date\" let-parsedDate=\"parsedDate\">\n  <ng-container *ngIf=\"displayDateSeparator\">\n    <ng-container\n      *ngTemplateOutlet=\"\n        customDateSeparatorTemplate || defaultDateSeparator;\n        context: {\n          date: date,\n          parsedDate: parsedDate\n        }\n      \"\n    />\n  </ng-container>\n\n  <ng-template\n    #defaultDateSeparator\n    let-date=\"date\"\n    let-parsedDate=\"parsedDate\"\n  >\n    <div data-testid=\"date-separator\" class=\"str-chat__date-separator\">\n      <hr\n        *ngIf=\"\n          dateSeparatorTextPos === 'right' || dateSeparatorTextPos === 'center'\n        \"\n        class=\"str-chat__date-separator-line\"\n      />\n      <div class=\"str-chat__date-separator-date\">\n        {{ parsedDate }}\n      </div>\n      <hr\n        *ngIf=\"\n          dateSeparatorTextPos === 'left' || dateSeparatorTextPos === 'center'\n        \"\n        class=\"str-chat__date-separator-line\"\n      />\n    </div>\n  </ng-template>\n</ng-template>\n\n<ng-template #defaultNewMessagesIndicator let-unreadCount=\"unreadCount\">\n  <div class=\"str-chat__unread-messages-separator\">\n    <ng-container\n      *ngIf=\"\n        unreadCount > 0 && !hideUnreadCountForNotificationAndIndicator;\n        else noUnreadCount\n      \"\n    >\n      {{\n        (unreadCount === 1\n          ? \"streamChat.\\{\\{count\\}\\} unread message\"\n          : \"streamChat.\\{\\{count\\}\\} unread messages\"\n        ) | translate : { count: unreadCount }\n      }}\n    </ng-container>\n    <ng-template #noUnreadCount>\n      {{ \"streamChat.Unread messages\" | translate }}\n    </ng-template>\n  </div>\n</ng-template>\n", dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: IconComponent, selector: "stream-icon", inputs: ["icon"] }, { kind: "component", type: IconPlaceholderComponent, selector: "stream-icon-placeholder", inputs: ["icon"] }, { kind: "component", type: LoadingIndicatorPlaceholderComponent, selector: "stream-loading-indicator-placeholder" }, { kind: "component", type: MessageComponent, selector: "stream-message", inputs: ["message", "enabledMessageActions", "isLastSentMessage", "mode", "isHighlighted", "scroll$"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "pipe", type: i6.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-MessageListComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: MessageListComponent, deps: [{ token: ChannelService }, { token: ChatClientService }, { token: CustomTemplatesService }, { token: DateParserService }, { token: i0.NgZone }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-MessageListComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.4", type: MessageListComponent, selector: "stream-message-list", inputs: { mode: "mode", direction: "direction", hideJumpToLatestButtonDuringScroll: "hideJumpToLatestButtonDuringScroll", displayDateSeparator: "displayDateSeparator", displayUnreadSeparator: "displayUnreadSeparator", dateSeparatorTextPos: "dateSeparatorTextPos", openMessageListAt: "openMessageListAt", hideUnreadCountForNotificationAndIndicator: "hideUnreadCountForNotificationAndIndicator", displayLoadingIndicator: "displayLoadingIndicator" }, host: { properties: { "class": "this.class" } }, viewQueries: [{ propertyName: "scrollContainer", first: true, predicate: ["scrollContainer"], descendants: true }, { propertyName: "parentMessageElement", first: true, predicate: ["parentMessageElement"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<ng-container\n  *ngIf=\"\n    lastReadMessageId &&\n    isUnreadNotificationVisible &&\n    openMessageListAt === 'last-message' &&\n    displayUnreadSeparator\n  \"\n>\n  <ng-container\n    *ngTemplateOutlet=\"\n      customnewMessagesNotificationTemplate ||\n        defaultUnreadMessagesNotification;\n      context: {\n        unreadCount: unreadCount,\n        onDismiss: messageNotificationDismissClicked,\n        onJump: messageNotificationJumpClicked\n      }\n    \"\n  ></ng-container>\n</ng-container>\n<ng-template\n  #defaultUnreadMessagesNotification\n  let-unreadCount=\"unreadCount\"\n  let-onDismiss=\"onDismiss\"\n  let-onJump=\"onJump\"\n>\n  <div\n    class=\"str-chat__unread-messages-notification\"\n    data-testid=\"unread-messages-notification\"\n  >\n    <button\n      data-testid=\"unread-messages-notification-jump-to-message\"\n      (click)=\"onJump()\"\n    >\n      <ng-container\n        *ngIf=\"\n          unreadCount > 0 && !hideUnreadCountForNotificationAndIndicator;\n          else noUnreadCount\n        \"\n      >\n        {{\n          (unreadCount === 1\n            ? \"streamChat.\\{\\{count\\}\\} unread message\"\n            : \"streamChat.\\{\\{count\\}\\} unread messages\"\n          ) | translate : { count: unreadCount }\n        }}\n      </ng-container>\n      <ng-template #noUnreadCount>\n        {{ \"streamChat.Unread messages\" | translate }}\n      </ng-template>\n    </button>\n    <button\n      data-testid=\"unread-messages-notification-dismiss\"\n      (click)=\"onDismiss()\"\n    >\n      <stream-icon-placeholder icon=\"close\"></stream-icon-placeholder>\n    </button>\n  </div>\n</ng-template>\n<div #scrollContainer data-testid=\"scroll-container\" class=\"str-chat__list\">\n  <ng-container *ngIf=\"mode === 'main' && isEmpty && emptyListTemplate\">\n    <ng-container *ngTemplateOutlet=\"emptyListTemplate\"></ng-container>\n  </ng-container>\n  <div class=\"str-chat__reverse-infinite-scroll str-chat__message-list-scroll\">\n    <ul class=\"str-chat__ul\">\n      <li\n        *ngIf=\"mode === 'thread' && parentMessage\"\n        #parentMessageElement\n        data-testid=\"parent-message\"\n        class=\"str-chat__parent-message-li\"\n      >\n        <ng-container\n          *ngTemplateOutlet=\"\n            messageTemplateContainer;\n            context: { message: parentMessage, index: 'parent' }\n          \"\n        ></ng-container>\n        <div data-testid=\"reply-count\" class=\"str-chat__thread-start\">\n          {{parentMessage.reply_count === 1 ? ('streamChat.1 reply' | translate) : ('streamChat.{{ replyCount }}\n          replies' | translate:replyCountParam)}}\n        </div>\n      </li>\n      <ng-container *ngIf=\"mode === 'thread' && isEmpty && emptyListTemplate\">\n        <ng-container *ngTemplateOutlet=\"emptyListTemplate\"></ng-container>\n      </ng-container>\n      <stream-loading-indicator-placeholder\n        *ngIf=\"\n          ((loadingState === 'loading-top' && direction === 'bottom-to-top') ||\n            (loadingState === 'loading-bottom' &&\n              direction === 'top-to-bottom')) &&\n            displayLoadingIndicator;\n          else loadingIndicatorPlaceholder\n        \"\n        data-testid=\"top-loading-indicator\"\n      ></stream-loading-indicator-placeholder>\n      <ng-container *ngIf=\"messages$ | async as messages\">\n        <ng-container\n          *ngFor=\"\n            let message of messages;\n            let i = index;\n            let isFirst = first;\n            let isLast = last;\n            trackBy: trackByMessageId\n          \"\n        >\n          <ng-container *ngIf=\"isFirst\">\n            <ng-container\n              *ngTemplateOutlet=\"\n                dateSeparator;\n                context: {\n                  date: message.created_at,\n                  parsedDate: parseDate(message.created_at)\n                }\n              \"\n            ></ng-container>\n          </ng-container>\n          <li\n            tabindex=\"0\"\n            data-testclass=\"message\"\n            class=\"str-chat__li str-chat__li--{{ groupStyles[i] }}\"\n            id=\"{{ message.id }}\"\n          >\n            <ng-container\n              *ngTemplateOutlet=\"\n                messageTemplateContainer;\n                context: { message: message, index: i }\n              \"\n            ></ng-container>\n          </li>\n          <ng-container\n            *ngIf=\"\n              (lastReadMessageId === message?.id &&\n                direction === 'bottom-to-top') ||\n              (direction === 'top-to-bottom' &&\n                lastReadMessageId === messages[i + 1]?.id)\n            \"\n          >\n            <li\n              *ngIf=\"displayUnreadSeparator\"\n              id=\"stream-chat-new-message-indicator\"\n              data-testid=\"new-messages-indicator\"\n              class=\"str-chat__li str-chat__unread-messages-separator-wrapper\"\n            >\n              <ng-container\n                *ngTemplateOutlet=\"\n                  customnewMessagesIndicatorTemplate ||\n                    defaultNewMessagesIndicator;\n                  context: { unreadCount: unreadCount }\n                \"\n              ></ng-container>\n            </li>\n          </ng-container>\n          <ng-container *ngIf=\"isNextMessageOnSeparateDate[i]\">\n            <ng-container\n              *ngTemplateOutlet=\"\n                dateSeparator;\n                context: {\n                  date: messages[i + 1].created_at,\n                  parsedDate: parseDate(messages[i + 1].created_at)\n                }\n              \"\n            ></ng-container>\n          </ng-container>\n        </ng-container>\n      </ng-container>\n      <stream-loading-indicator-placeholder\n        *ngIf=\"\n          ((loadingState === 'loading-bottom' &&\n            direction === 'bottom-to-top') ||\n            (loadingState === 'loading-top' &&\n              direction === 'top-to-bottom')) &&\n            displayLoadingIndicator;\n          else loadingIndicatorPlaceholder\n        \"\n        data-testid=\"bottom-loading-indicator\"\n      ></stream-loading-indicator-placeholder>\n      <ng-template #loadingIndicatorPlaceholder>\n        <div class=\"str-chat__loading-indicator-placeholder\"></div>\n      </ng-template>\n    </ul>\n    <ng-template #defaultTypingIndicator let-usersTyping$=\"usersTyping$\">\n      <!-- eslint-disable-next-line @angular-eslint/template/no-any -->\n      <ng-container *ngIf=\"$any(usersTyping$ | async) as users\">\n        <div\n          *ngIf=\"users.length > 0\"\n          data-testid=\"typing-indicator\"\n          class=\"str-chat__typing-indicator str-chat__typing-indicator--typing\"\n        >\n          <div class=\"str-chat__typing-indicator__dots\">\n            <span class=\"str-chat__typing-indicator__dot\"></span>\n            <span class=\"str-chat__typing-indicator__dot\"></span>\n            <span class=\"str-chat__typing-indicator__dot\"></span>\n          </div>\n          <div\n            data-testid=\"typing-users\"\n            class=\"str-chat__typing-indicator__users\"\n          >\n            {{\n              users.length === 1\n                ? (\"streamChat.user is typing\"\n                  | translate : { user: getTypingIndicatorText(users) })\n                : (\"streamChat.users are typing\"\n                  | translate : { users: getTypingIndicatorText(users) })\n            }}\n          </div>\n        </div>\n      </ng-container>\n    </ng-template>\n    <ng-container\n      *ngTemplateOutlet=\"\n        typingIndicatorTemplate || defaultTypingIndicator;\n        context: getTypingIndicatorContext()\n      \"\n    ></ng-container>\n  </div>\n</div>\n<div class=\"str-chat__jump-to-latest-message\">\n  <button\n    *ngIf=\"isUserScrolled && isJumpToLatestButtonVisible\"\n    data-testid=\"scroll-to-latest\"\n    class=\"str-chat__message-notification-scroll-to-latest str-chat__message-notification-scroll-to-latest-right str-chat__circle-fab\"\n    (keyup.enter)=\"jumpToLatestMessage()\"\n    (click)=\"jumpToLatestMessage()\"\n  >\n    <stream-icon\n      class=\"str-chat__jump-to-latest-icon str-chat__circle-fab-icon\"\n      [icon]=\"direction === 'bottom-to-top' ? 'arrow-down' : 'arrow-up'\"\n    ></stream-icon>\n    <div\n      *ngIf=\"newMessageCountWhileBeingScrolled > 0\"\n      class=\"str-chat__message-notification str-chat__message-notification-scroll-to-latest-unread-count str-chat__jump-to-latest-unread-count\"\n    >\n      {{ newMessageCountWhileBeingScrolled }}\n    </div>\n  </button>\n</div>\n\n<ng-template #messageTemplateContainer let-message=\"message\" let-index=\"index\">\n  <ng-template\n    #defaultMessageTemplate\n    let-messageInput=\"message\"\n    let-isLastSentMessage=\"isLastSentMessage\"\n    let-enabledMessageActions=\"enabledMessageActions\"\n    let-mode=\"mode\"\n    let-isHighlighted=\"isHighlighted\"\n    let-scroll$=\"scroll$\"\n  >\n    <stream-message\n      [message]=\"messageInput\"\n      [isLastSentMessage]=\"isLastSentMessage\"\n      [enabledMessageActions]=\"enabledMessageActions\"\n      [mode]=\"mode\"\n      [isHighlighted]=\"isHighlighted\"\n      [scroll$]=\"scroll$\"\n    ></stream-message>\n  </ng-template>\n  <ng-container\n    *ngTemplateOutlet=\"\n      messageTemplate || defaultMessageTemplate;\n      context: {\n        message: message,\n        isLastSentMessage: !!(\n          lastSentMessageId && message?.id === lastSentMessageId\n        ),\n        enabledMessageActions: enabledMessageActions,\n        mode: mode,\n        isHighlighted: message?.id === highlightedMessageId,\n        scroll$: scroll$\n      }\n    \"\n  ></ng-container>\n</ng-template>\n\n<ng-template #dateSeparator let-date=\"date\" let-parsedDate=\"parsedDate\">\n  <ng-container *ngIf=\"displayDateSeparator\">\n    <ng-container\n      *ngTemplateOutlet=\"\n        customDateSeparatorTemplate || defaultDateSeparator;\n        context: {\n          date: date,\n          parsedDate: parsedDate\n        }\n      \"\n    ></ng-container>\n  </ng-container>\n\n  <ng-template\n    #defaultDateSeparator\n    let-date=\"date\"\n    let-parsedDate=\"parsedDate\"\n  >\n    <div data-testid=\"date-separator\" class=\"str-chat__date-separator\">\n      <hr\n        *ngIf=\"\n          dateSeparatorTextPos === 'right' || dateSeparatorTextPos === 'center'\n        \"\n        class=\"str-chat__date-separator-line\"\n      />\n      <div class=\"str-chat__date-separator-date\">\n        {{ parsedDate }}\n      </div>\n      <hr\n        *ngIf=\"\n          dateSeparatorTextPos === 'left' || dateSeparatorTextPos === 'center'\n        \"\n        class=\"str-chat__date-separator-line\"\n      />\n    </div>\n  </ng-template>\n</ng-template>\n\n<ng-template #defaultNewMessagesIndicator let-unreadCount=\"unreadCount\">\n  <div class=\"str-chat__unread-messages-separator\">\n    <ng-container\n      *ngIf=\"\n        unreadCount > 0 && !hideUnreadCountForNotificationAndIndicator;\n        else noUnreadCount\n      \"\n    >\n      {{\n        (unreadCount === 1\n          ? \"streamChat.\\{\\{count\\}\\} unread message\"\n          : \"streamChat.\\{\\{count\\}\\} unread messages\"\n        ) | translate : { count: unreadCount }\n      }}\n    </ng-container>\n    <ng-template #noUnreadCount>\n      {{ \"streamChat.Unread messages\" | translate }}\n    </ng-template>\n  </div>\n</ng-template>\n", dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: IconComponent, selector: "stream-icon", inputs: ["icon"] }, { kind: "component", type: IconPlaceholderComponent, selector: "stream-icon-placeholder", inputs: ["icon"] }, { kind: "component", type: LoadingIndicatorPlaceholderComponent, selector: "stream-loading-indicator-placeholder" }, { kind: "component", type: MessageComponent, selector: "stream-message", inputs: ["message", "enabledMessageActions", "isLastSentMessage", "mode", "isHighlighted", "scroll$"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "pipe", type: i6.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: MessageListComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: MessageListComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'stream-message-list', changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-container\n  *ngIf=\"\n    lastReadMessageId &&\n    isUnreadNotificationVisible &&\n    openMessageListAt === 'last-message' &&\n    displayUnreadSeparator\n  \"\n>\n  <ng-container\n    *ngTemplateOutlet=\"\n      customnewMessagesNotificationTemplate ||\n        defaultUnreadMessagesNotification;\n      context: {\n        unreadCount: unreadCount,\n        onDismiss: messageNotificationDismissClicked,\n        onJump: messageNotificationJumpClicked\n      }\n    \"\n  ></ng-container>\n</ng-container>\n<ng-template\n  #defaultUnreadMessagesNotification\n  let-unreadCount=\"unreadCount\"\n  let-onDismiss=\"onDismiss\"\n  let-onJump=\"onJump\"\n>\n  <div\n    class=\"str-chat__unread-messages-notification\"\n    data-testid=\"unread-messages-notification\"\n  >\n    <button\n      data-testid=\"unread-messages-notification-jump-to-message\"\n      (click)=\"onJump()\"\n    >\n      <ng-container\n        *ngIf=\"\n          unreadCount > 0 && !hideUnreadCountForNotificationAndIndicator;\n          else noUnreadCount\n        \"\n      >\n        {{\n          (unreadCount === 1\n            ? \"streamChat.\\{\\{count\\}\\} unread message\"\n            : \"streamChat.\\{\\{count\\}\\} unread messages\"\n          ) | translate : { count: unreadCount }\n        }}\n      </ng-container>\n      <ng-template #noUnreadCount>\n        {{ \"streamChat.Unread messages\" | translate }}\n      </ng-template>\n    </button>\n    <button\n      data-testid=\"unread-messages-notification-dismiss\"\n      (click)=\"onDismiss()\"\n    >\n      <stream-icon-placeholder icon=\"close\"></stream-icon-placeholder>\n    </button>\n  </div>\n</ng-template>\n<div #scrollContainer data-testid=\"scroll-container\" class=\"str-chat__list\">\n  <ng-container *ngIf=\"mode === 'main' && isEmpty && emptyListTemplate\">\n    <ng-container *ngTemplateOutlet=\"emptyListTemplate\"></ng-container>\n  </ng-container>\n  <div class=\"str-chat__reverse-infinite-scroll str-chat__message-list-scroll\">\n    <ul class=\"str-chat__ul\">\n      <li\n        *ngIf=\"mode === 'thread' && parentMessage\"\n        #parentMessageElement\n        data-testid=\"parent-message\"\n        class=\"str-chat__parent-message-li\"\n      >\n        <ng-container\n          *ngTemplateOutlet=\"\n            messageTemplateContainer;\n            context: { message: parentMessage, index: 'parent' }\n          \"\n        ></ng-container>\n        <div data-testid=\"reply-count\" class=\"str-chat__thread-start\">\n          {{parentMessage.reply_count === 1 ? ('streamChat.1 reply' | translate) : ('streamChat.{{ replyCount }}\n          replies' | translate:replyCountParam)}}\n        </div>\n      </li>\n      <ng-container *ngIf=\"mode === 'thread' && isEmpty && emptyListTemplate\">\n        <ng-container *ngTemplateOutlet=\"emptyListTemplate\"></ng-container>\n      </ng-container>\n      <stream-loading-indicator-placeholder\n        *ngIf=\"\n          ((loadingState === 'loading-top' && direction === 'bottom-to-top') ||\n            (loadingState === 'loading-bottom' &&\n              direction === 'top-to-bottom')) &&\n            displayLoadingIndicator;\n          else loadingIndicatorPlaceholder\n        \"\n        data-testid=\"top-loading-indicator\"\n      ></stream-loading-indicator-placeholder>\n      <ng-container *ngIf=\"messages$ | async as messages\">\n        <ng-container\n          *ngFor=\"\n            let message of messages;\n            let i = index;\n            let isFirst = first;\n            let isLast = last;\n            trackBy: trackByMessageId\n          \"\n        >\n          <ng-container *ngIf=\"isFirst\">\n            <ng-container\n              *ngTemplateOutlet=\"\n                dateSeparator;\n                context: {\n                  date: message.created_at,\n                  parsedDate: parseDate(message.created_at)\n                }\n              \"\n            ></ng-container>\n          </ng-container>\n          <li\n            tabindex=\"0\"\n            data-testclass=\"message\"\n            class=\"str-chat__li str-chat__li--{{ groupStyles[i] }}\"\n            id=\"{{ message.id }}\"\n          >\n            <ng-container\n              *ngTemplateOutlet=\"\n                messageTemplateContainer;\n                context: { message: message, index: i }\n              \"\n            ></ng-container>\n          </li>\n          <ng-container\n            *ngIf=\"\n              (lastReadMessageId === message?.id &&\n                direction === 'bottom-to-top') ||\n              (direction === 'top-to-bottom' &&\n                lastReadMessageId === messages[i + 1]?.id)\n            \"\n          >\n            <li\n              *ngIf=\"displayUnreadSeparator\"\n              id=\"stream-chat-new-message-indicator\"\n              data-testid=\"new-messages-indicator\"\n              class=\"str-chat__li str-chat__unread-messages-separator-wrapper\"\n            >\n              <ng-container\n                *ngTemplateOutlet=\"\n                  customnewMessagesIndicatorTemplate ||\n                    defaultNewMessagesIndicator;\n                  context: { unreadCount: unreadCount }\n                \"\n              ></ng-container>\n            </li>\n          </ng-container>\n          <ng-container *ngIf=\"isNextMessageOnSeparateDate[i]\">\n            <ng-container\n              *ngTemplateOutlet=\"\n                dateSeparator;\n                context: {\n                  date: messages[i + 1].created_at,\n                  parsedDate: parseDate(messages[i + 1].created_at)\n                }\n              \"\n            ></ng-container>\n          </ng-container>\n        </ng-container>\n      </ng-container>\n      <stream-loading-indicator-placeholder\n        *ngIf=\"\n          ((loadingState === 'loading-bottom' &&\n            direction === 'bottom-to-top') ||\n            (loadingState === 'loading-top' &&\n              direction === 'top-to-bottom')) &&\n            displayLoadingIndicator;\n          else loadingIndicatorPlaceholder\n        \"\n        data-testid=\"bottom-loading-indicator\"\n      ></stream-loading-indicator-placeholder>\n      <ng-template #loadingIndicatorPlaceholder>\n        <div class=\"str-chat__loading-indicator-placeholder\"></div>\n      </ng-template>\n    </ul>\n    <ng-template #defaultTypingIndicator let-usersTyping$=\"usersTyping$\">\n      <!-- eslint-disable-next-line @angular-eslint/template/no-any -->\n      <ng-container *ngIf=\"$any(usersTyping$ | async) as users\">\n        <div\n          *ngIf=\"users.length > 0\"\n          data-testid=\"typing-indicator\"\n          class=\"str-chat__typing-indicator str-chat__typing-indicator--typing\"\n        >\n          <div class=\"str-chat__typing-indicator__dots\">\n            <span class=\"str-chat__typing-indicator__dot\"></span>\n            <span class=\"str-chat__typing-indicator__dot\"></span>\n            <span class=\"str-chat__typing-indicator__dot\"></span>\n          </div>\n          <div\n            data-testid=\"typing-users\"\n            class=\"str-chat__typing-indicator__users\"\n          >\n            {{\n              users.length === 1\n                ? (\"streamChat.user is typing\"\n                  | translate : { user: getTypingIndicatorText(users) })\n                : (\"streamChat.users are typing\"\n                  | translate : { users: getTypingIndicatorText(users) })\n            }}\n          </div>\n        </div>\n      </ng-container>\n    </ng-template>\n    <ng-container\n      *ngTemplateOutlet=\"\n        typingIndicatorTemplate || defaultTypingIndicator;\n        context: getTypingIndicatorContext()\n      \"\n    ></ng-container>\n  </div>\n</div>\n<div class=\"str-chat__jump-to-latest-message\">\n  <button\n    *ngIf=\"isUserScrolled && isJumpToLatestButtonVisible\"\n    data-testid=\"scroll-to-latest\"\n    class=\"str-chat__message-notification-scroll-to-latest str-chat__message-notification-scroll-to-latest-right str-chat__circle-fab\"\n    (keyup.enter)=\"jumpToLatestMessage()\"\n    (click)=\"jumpToLatestMessage()\"\n  >\n    <stream-icon\n      class=\"str-chat__jump-to-latest-icon str-chat__circle-fab-icon\"\n      [icon]=\"direction === 'bottom-to-top' ? 'arrow-down' : 'arrow-up'\"\n    ></stream-icon>\n    <div\n      *ngIf=\"newMessageCountWhileBeingScrolled > 0\"\n      class=\"str-chat__message-notification str-chat__message-notification-scroll-to-latest-unread-count str-chat__jump-to-latest-unread-count\"\n    >\n      {{ newMessageCountWhileBeingScrolled }}\n    </div>\n  </button>\n</div>\n\n<ng-template #messageTemplateContainer let-message=\"message\" let-index=\"index\">\n  <ng-template\n    #defaultMessageTemplate\n    let-messageInput=\"message\"\n    let-isLastSentMessage=\"isLastSentMessage\"\n    let-enabledMessageActions=\"enabledMessageActions\"\n    let-mode=\"mode\"\n    let-isHighlighted=\"isHighlighted\"\n    let-scroll$=\"scroll$\"\n  >\n    <stream-message\n      [message]=\"messageInput\"\n      [isLastSentMessage]=\"isLastSentMessage\"\n      [enabledMessageActions]=\"enabledMessageActions\"\n      [mode]=\"mode\"\n      [isHighlighted]=\"isHighlighted\"\n      [scroll$]=\"scroll$\"\n    ></stream-message>\n  </ng-template>\n  <ng-container\n    *ngTemplateOutlet=\"\n      messageTemplate || defaultMessageTemplate;\n      context: {\n        message: message,\n        isLastSentMessage: !!(\n          lastSentMessageId && message?.id === lastSentMessageId\n        ),\n        enabledMessageActions: enabledMessageActions,\n        mode: mode,\n        isHighlighted: message?.id === highlightedMessageId,\n        scroll$: scroll$\n      }\n    \"\n  ></ng-container>\n</ng-template>\n\n<ng-template #dateSeparator let-date=\"date\" let-parsedDate=\"parsedDate\">\n  <ng-container *ngIf=\"displayDateSeparator\">\n    <ng-container\n      *ngTemplateOutlet=\"\n        customDateSeparatorTemplate || defaultDateSeparator;\n        context: {\n          date: date,\n          parsedDate: parsedDate\n        }\n      \"\n    ></ng-container>\n  </ng-container>\n\n  <ng-template\n    #defaultDateSeparator\n    let-date=\"date\"\n    let-parsedDate=\"parsedDate\"\n  >\n    <div data-testid=\"date-separator\" class=\"str-chat__date-separator\">\n      <hr\n        *ngIf=\"\n          dateSeparatorTextPos === 'right' || dateSeparatorTextPos === 'center'\n        \"\n        class=\"str-chat__date-separator-line\"\n      />\n      <div class=\"str-chat__date-separator-date\">\n        {{ parsedDate }}\n      </div>\n      <hr\n        *ngIf=\"\n          dateSeparatorTextPos === 'left' || dateSeparatorTextPos === 'center'\n        \"\n        class=\"str-chat__date-separator-line\"\n      />\n    </div>\n  </ng-template>\n</ng-template>\n\n<ng-template #defaultNewMessagesIndicator let-unreadCount=\"unreadCount\">\n  <div class=\"str-chat__unread-messages-separator\">\n    <ng-container\n      *ngIf=\"\n        unreadCount > 0 && !hideUnreadCountForNotificationAndIndicator;\n        else noUnreadCount\n      \"\n    >\n      {{\n        (unreadCount === 1\n          ? \"streamChat.\\{\\{count\\}\\} unread message\"\n          : \"streamChat.\\{\\{count\\}\\} unread messages\"\n        ) | translate : { count: unreadCount }\n      }}\n    </ng-container>\n    <ng-template #noUnreadCount>\n      {{ \"streamChat.Unread messages\" | translate }}\n    </ng-template>\n  </div>\n</ng-template>\n" }]
-        }], ctorParameters: function () { return [{ type: ChannelService }, { type: ChatClientService }, { type: CustomTemplatesService }, { type: DateParserService }, { type: i0.NgZone }, { type: i0.ChangeDetectorRef }]; }, propDecorators: { mode: [{
+            args: [{ selector: 'stream-message-list', changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-container\n  *ngIf=\"\n    lastReadMessageId &&\n    isUnreadNotificationVisible &&\n    openMessageListAt === 'last-message' &&\n    displayUnreadSeparator\n  \"\n>\n  <ng-container\n    *ngTemplateOutlet=\"\n      customnewMessagesNotificationTemplate ||\n        defaultUnreadMessagesNotification;\n      context: {\n        unreadCount: unreadCount,\n        onDismiss: messageNotificationDismissClicked,\n        onJump: messageNotificationJumpClicked\n      }\n    \"\n  />\n</ng-container>\n<ng-template\n  #defaultUnreadMessagesNotification\n  let-unreadCount=\"unreadCount\"\n  let-onDismiss=\"onDismiss\"\n  let-onJump=\"onJump\"\n>\n  <div\n    class=\"str-chat__unread-messages-notification\"\n    data-testid=\"unread-messages-notification\"\n  >\n    <button\n      data-testid=\"unread-messages-notification-jump-to-message\"\n      (click)=\"onJump()\"\n    >\n      <ng-container\n        *ngIf=\"\n          unreadCount > 0 && !hideUnreadCountForNotificationAndIndicator;\n          else noUnreadCount\n        \"\n      >\n        {{\n          (unreadCount === 1\n            ? \"streamChat.\\{\\{count\\}\\} unread message\"\n            : \"streamChat.\\{\\{count\\}\\} unread messages\"\n          ) | translate : { count: unreadCount }\n        }}\n      </ng-container>\n      <ng-template #noUnreadCount>\n        {{ \"streamChat.Unread messages\" | translate }}\n      </ng-template>\n    </button>\n    <button\n      data-testid=\"unread-messages-notification-dismiss\"\n      (click)=\"onDismiss()\"\n    >\n      <stream-icon-placeholder icon=\"close\" />\n    </button>\n  </div>\n</ng-template>\n<div #scrollContainer data-testid=\"scroll-container\" class=\"str-chat__list\">\n  <ng-container *ngIf=\"mode === 'main' && isEmpty && emptyListTemplate\">\n    <ng-container *ngTemplateOutlet=\"emptyListTemplate\" />\n  </ng-container>\n  <div class=\"str-chat__reverse-infinite-scroll str-chat__message-list-scroll\">\n    <ul class=\"str-chat__ul\">\n      <li\n        *ngIf=\"mode === 'thread' && parentMessage\"\n        #parentMessageElement\n        data-testid=\"parent-message\"\n        class=\"str-chat__parent-message-li\"\n      >\n        <ng-container\n          *ngTemplateOutlet=\"\n            messageTemplateContainer;\n            context: { message: parentMessage, index: 'parent' }\n          \"\n        />\n        <div data-testid=\"reply-count\" class=\"str-chat__thread-start\">\n          {{parentMessage.reply_count === 1 ? ('streamChat.1 reply' | translate) : ('streamChat.{{ replyCount }}\n          replies' | translate:replyCountParam)}}\n        </div>\n      </li>\n      <ng-container *ngIf=\"mode === 'thread' && isEmpty && emptyListTemplate\">\n        <ng-container *ngTemplateOutlet=\"emptyListTemplate\" />\n      </ng-container>\n      <stream-loading-indicator-placeholder\n        *ngIf=\"\n          ((loadingState === 'loading-top' && direction === 'bottom-to-top') ||\n            (loadingState === 'loading-bottom' &&\n              direction === 'top-to-bottom')) &&\n            displayLoadingIndicator;\n          else loadingIndicatorPlaceholder\n        \"\n        data-testid=\"top-loading-indicator\"\n      />\n      <ng-container *ngIf=\"messages$ | async as messages\">\n        <ng-container\n          *ngFor=\"\n            let message of messages;\n            let i = index;\n            let isFirst = first;\n            let isLast = last;\n            trackBy: trackByMessageId\n          \"\n        >\n          <ng-container *ngIf=\"isFirst\">\n            <ng-container\n              *ngTemplateOutlet=\"\n                dateSeparator;\n                context: {\n                  date: message.created_at,\n                  parsedDate: parseDate(message.created_at)\n                }\n              \"\n            />\n          </ng-container>\n          <li\n            tabindex=\"0\"\n            data-testclass=\"message\"\n            class=\"str-chat__li str-chat__li--{{ groupStyles[i] }}\"\n            id=\"{{ message.id }}\"\n          >\n            <ng-container\n              *ngTemplateOutlet=\"\n                messageTemplateContainer;\n                context: { message: message, index: i }\n              \"\n            />\n          </li>\n          <ng-container\n            *ngIf=\"\n              (lastReadMessageId === message?.id &&\n                direction === 'bottom-to-top') ||\n              (direction === 'top-to-bottom' &&\n                lastReadMessageId === messages[i + 1]?.id)\n            \"\n          >\n            <li\n              *ngIf=\"displayUnreadSeparator\"\n              id=\"stream-chat-new-message-indicator\"\n              data-testid=\"new-messages-indicator\"\n              class=\"str-chat__li str-chat__unread-messages-separator-wrapper\"\n            >\n              <ng-container\n                *ngTemplateOutlet=\"\n                  customnewMessagesIndicatorTemplate ||\n                    defaultNewMessagesIndicator;\n                  context: { unreadCount: unreadCount }\n                \"\n              />\n            </li>\n          </ng-container>\n          <ng-container *ngIf=\"isNextMessageOnSeparateDate[i]\">\n            <ng-container\n              *ngTemplateOutlet=\"\n                dateSeparator;\n                context: {\n                  date: messages[i + 1].created_at,\n                  parsedDate: parseDate(messages[i + 1].created_at)\n                }\n              \"\n            />\n          </ng-container>\n        </ng-container>\n      </ng-container>\n      <stream-loading-indicator-placeholder\n        *ngIf=\"\n          ((loadingState === 'loading-bottom' &&\n            direction === 'bottom-to-top') ||\n            (loadingState === 'loading-top' &&\n              direction === 'top-to-bottom')) &&\n            displayLoadingIndicator;\n          else loadingIndicatorPlaceholder\n        \"\n        data-testid=\"bottom-loading-indicator\"\n      />\n      <ng-template #loadingIndicatorPlaceholder>\n        <div class=\"str-chat__loading-indicator-placeholder\"></div>\n      </ng-template>\n    </ul>\n    <ng-template #defaultTypingIndicator let-usersTyping$=\"usersTyping$\">\n      <!-- eslint-disable-next-line @angular-eslint/template/no-any -->\n      <ng-container *ngIf=\"$any(usersTyping$ | async) as users\">\n        <div\n          *ngIf=\"users.length > 0\"\n          data-testid=\"typing-indicator\"\n          class=\"str-chat__typing-indicator str-chat__typing-indicator--typing\"\n        >\n          <div class=\"str-chat__typing-indicator__dots\">\n            <span class=\"str-chat__typing-indicator__dot\"></span>\n            <span class=\"str-chat__typing-indicator__dot\"></span>\n            <span class=\"str-chat__typing-indicator__dot\"></span>\n          </div>\n          <div\n            data-testid=\"typing-users\"\n            class=\"str-chat__typing-indicator__users\"\n          >\n            {{\n              users.length === 1\n                ? (\"streamChat.user is typing\"\n                  | translate : { user: getTypingIndicatorText(users) })\n                : (\"streamChat.users are typing\"\n                  | translate : { users: getTypingIndicatorText(users) })\n            }}\n          </div>\n        </div>\n      </ng-container>\n    </ng-template>\n    <ng-container\n      *ngTemplateOutlet=\"\n        typingIndicatorTemplate || defaultTypingIndicator;\n        context: getTypingIndicatorContext()\n      \"\n    />\n  </div>\n</div>\n<div class=\"str-chat__jump-to-latest-message\">\n  <button\n    *ngIf=\"isUserScrolled && isJumpToLatestButtonVisible\"\n    data-testid=\"scroll-to-latest\"\n    class=\"str-chat__message-notification-scroll-to-latest str-chat__message-notification-scroll-to-latest-right str-chat__circle-fab\"\n    (keyup.enter)=\"jumpToLatestMessage()\"\n    (click)=\"jumpToLatestMessage()\"\n  >\n    <stream-icon\n      class=\"str-chat__jump-to-latest-icon str-chat__circle-fab-icon\"\n      [icon]=\"direction === 'bottom-to-top' ? 'arrow-down' : 'arrow-up'\"\n    />\n    <div\n      *ngIf=\"newMessageCountWhileBeingScrolled > 0\"\n      class=\"str-chat__message-notification str-chat__message-notification-scroll-to-latest-unread-count str-chat__jump-to-latest-unread-count\"\n    >\n      {{ newMessageCountWhileBeingScrolled }}\n    </div>\n  </button>\n</div>\n\n<ng-template #messageTemplateContainer let-message=\"message\" let-index=\"index\">\n  <ng-template\n    #defaultMessageTemplate\n    let-messageInput=\"message\"\n    let-isLastSentMessage=\"isLastSentMessage\"\n    let-enabledMessageActions=\"enabledMessageActions\"\n    let-mode=\"mode\"\n    let-isHighlighted=\"isHighlighted\"\n    let-scroll$=\"scroll$\"\n  >\n    <stream-message\n      [message]=\"messageInput\"\n      [isLastSentMessage]=\"isLastSentMessage\"\n      [enabledMessageActions]=\"enabledMessageActions\"\n      [mode]=\"mode\"\n      [isHighlighted]=\"isHighlighted\"\n      [scroll$]=\"scroll$\"\n    />\n  </ng-template>\n  <ng-container\n    *ngTemplateOutlet=\"\n      messageTemplate || defaultMessageTemplate;\n      context: {\n        message: message,\n        isLastSentMessage: !!(\n          lastSentMessageId && message?.id === lastSentMessageId\n        ),\n        enabledMessageActions: enabledMessageActions,\n        mode: mode,\n        isHighlighted: message?.id === highlightedMessageId,\n        scroll$: scroll$\n      }\n    \"\n  />\n</ng-template>\n\n<ng-template #dateSeparator let-date=\"date\" let-parsedDate=\"parsedDate\">\n  <ng-container *ngIf=\"displayDateSeparator\">\n    <ng-container\n      *ngTemplateOutlet=\"\n        customDateSeparatorTemplate || defaultDateSeparator;\n        context: {\n          date: date,\n          parsedDate: parsedDate\n        }\n      \"\n    />\n  </ng-container>\n\n  <ng-template\n    #defaultDateSeparator\n    let-date=\"date\"\n    let-parsedDate=\"parsedDate\"\n  >\n    <div data-testid=\"date-separator\" class=\"str-chat__date-separator\">\n      <hr\n        *ngIf=\"\n          dateSeparatorTextPos === 'right' || dateSeparatorTextPos === 'center'\n        \"\n        class=\"str-chat__date-separator-line\"\n      />\n      <div class=\"str-chat__date-separator-date\">\n        {{ parsedDate }}\n      </div>\n      <hr\n        *ngIf=\"\n          dateSeparatorTextPos === 'left' || dateSeparatorTextPos === 'center'\n        \"\n        class=\"str-chat__date-separator-line\"\n      />\n    </div>\n  </ng-template>\n</ng-template>\n\n<ng-template #defaultNewMessagesIndicator let-unreadCount=\"unreadCount\">\n  <div class=\"str-chat__unread-messages-separator\">\n    <ng-container\n      *ngIf=\"\n        unreadCount > 0 && !hideUnreadCountForNotificationAndIndicator;\n        else noUnreadCount\n      \"\n    >\n      {{\n        (unreadCount === 1\n          ? \"streamChat.\\{\\{count\\}\\} unread message\"\n          : \"streamChat.\\{\\{count\\}\\} unread messages\"\n        ) | translate : { count: unreadCount }\n      }}\n    </ng-container>\n    <ng-template #noUnreadCount>\n      {{ \"streamChat.Unread messages\" | translate }}\n    </ng-template>\n  </div>\n</ng-template>\n" }]
+        }], ctorParameters: () => [{ type: ChannelService }, { type: ChatClientService }, { type: CustomTemplatesService }, { type: DateParserService }, { type: i0.NgZone }, { type: i0.ChangeDetectorRef }], propDecorators: { mode: [{
                 type: Input
             }], direction: [{
                 type: Input
@@ -8803,23 +8796,23 @@ class ThreadComponent {
         }
         return getChannelDisplayText(this.channel, this.chatClientService.chatClient.user);
     }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: ThreadComponent, deps: [{ token: CustomTemplatesService }, { token: ChannelService }, { token: ChatClientService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: ThreadComponent, selector: "stream-thread", host: { properties: { "class": "this.class" } }, ngImport: i0, template: "<div class=\"str-chat__thread-container\">\n  <ng-container\n    *ngTemplateOutlet=\"\n      (customTemplatesService.threadHeaderTemplate$ | async) ||\n        defaultThreadHeader;\n      context: getThreadHeaderContext()\n    \"\n  />\n  <ng-content></ng-content>\n</div>\n\n<ng-template\n  #defaultThreadHeader\n  let-parentMessage=\"parentMessage\"\n  let-closeThreadHandler=\"closeThreadHandler\"\n>\n  <div class=\"str-chat__thread-header\">\n    <div class=\"str-chat__thread-header-details\">\n      <div class=\"str-chat__thread-header-name\" translate>\n        streamChat.Thread\n      </div>\n      <div\n        class=\"str-chat__thread-header-channel-name\"\n        data-testid=\"channel-name\"\n      >\n        {{ channelName }}\n      </div>\n    </div>\n    <button\n      class=\"str-chat__square-button str-chat__close-thread-button\"\n      data-testid=\"close-button\"\n      (click)=\"closeThreadHandler()\"\n    >\n      <stream-icon-placeholder icon=\"close\" />\n    </button>\n  </div>\n</ng-template>\n", dependencies: [{ kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i6.TranslateDirective, selector: "[translate],[ngx-translate]", inputs: ["translate", "translateParams"] }, { kind: "component", type: IconPlaceholderComponent, selector: "stream-icon-placeholder", inputs: ["icon"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }] }); }
 }
-ThreadComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: ThreadComponent, deps: [{ token: CustomTemplatesService }, { token: ChannelService }, { token: ChatClientService }], target: i0.ɵɵFactoryTarget.Component });
-ThreadComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.4", type: ThreadComponent, selector: "stream-thread", host: { properties: { "class": "this.class" } }, ngImport: i0, template: "<div class=\"str-chat__thread-container\">\n  <ng-container\n    *ngTemplateOutlet=\"\n      (customTemplatesService.threadHeaderTemplate$ | async) ||\n        defaultThreadHeader;\n      context: getThreadHeaderContext()\n    \"\n  ></ng-container>\n  <ng-content></ng-content>\n</div>\n\n<ng-template\n  #defaultThreadHeader\n  let-parentMessage=\"parentMessage\"\n  let-closeThreadHandler=\"closeThreadHandler\"\n>\n  <div class=\"str-chat__thread-header\">\n    <div class=\"str-chat__thread-header-details\">\n      <div class=\"str-chat__thread-header-name\" translate>\n        streamChat.Thread\n      </div>\n      <div\n        class=\"str-chat__thread-header-channel-name\"\n        data-testid=\"channel-name\"\n      >\n        {{ channelName }}\n      </div>\n    </div>\n    <button\n      class=\"str-chat__square-button str-chat__close-thread-button\"\n      data-testid=\"close-button\"\n      (click)=\"closeThreadHandler()\"\n    >\n      <stream-icon-placeholder icon=\"close\"></stream-icon-placeholder>\n    </button>\n  </div>\n</ng-template>\n", dependencies: [{ kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i6.TranslateDirective, selector: "[translate],[ngx-translate]", inputs: ["translate", "translateParams"] }, { kind: "component", type: IconPlaceholderComponent, selector: "stream-icon-placeholder", inputs: ["icon"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: ThreadComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: ThreadComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'stream-thread', template: "<div class=\"str-chat__thread-container\">\n  <ng-container\n    *ngTemplateOutlet=\"\n      (customTemplatesService.threadHeaderTemplate$ | async) ||\n        defaultThreadHeader;\n      context: getThreadHeaderContext()\n    \"\n  ></ng-container>\n  <ng-content></ng-content>\n</div>\n\n<ng-template\n  #defaultThreadHeader\n  let-parentMessage=\"parentMessage\"\n  let-closeThreadHandler=\"closeThreadHandler\"\n>\n  <div class=\"str-chat__thread-header\">\n    <div class=\"str-chat__thread-header-details\">\n      <div class=\"str-chat__thread-header-name\" translate>\n        streamChat.Thread\n      </div>\n      <div\n        class=\"str-chat__thread-header-channel-name\"\n        data-testid=\"channel-name\"\n      >\n        {{ channelName }}\n      </div>\n    </div>\n    <button\n      class=\"str-chat__square-button str-chat__close-thread-button\"\n      data-testid=\"close-button\"\n      (click)=\"closeThreadHandler()\"\n    >\n      <stream-icon-placeholder icon=\"close\"></stream-icon-placeholder>\n    </button>\n  </div>\n</ng-template>\n" }]
-        }], ctorParameters: function () { return [{ type: CustomTemplatesService }, { type: ChannelService }, { type: ChatClientService }]; }, propDecorators: { class: [{
+            args: [{ selector: 'stream-thread', template: "<div class=\"str-chat__thread-container\">\n  <ng-container\n    *ngTemplateOutlet=\"\n      (customTemplatesService.threadHeaderTemplate$ | async) ||\n        defaultThreadHeader;\n      context: getThreadHeaderContext()\n    \"\n  />\n  <ng-content></ng-content>\n</div>\n\n<ng-template\n  #defaultThreadHeader\n  let-parentMessage=\"parentMessage\"\n  let-closeThreadHandler=\"closeThreadHandler\"\n>\n  <div class=\"str-chat__thread-header\">\n    <div class=\"str-chat__thread-header-details\">\n      <div class=\"str-chat__thread-header-name\" translate>\n        streamChat.Thread\n      </div>\n      <div\n        class=\"str-chat__thread-header-channel-name\"\n        data-testid=\"channel-name\"\n      >\n        {{ channelName }}\n      </div>\n    </div>\n    <button\n      class=\"str-chat__square-button str-chat__close-thread-button\"\n      data-testid=\"close-button\"\n      (click)=\"closeThreadHandler()\"\n    >\n      <stream-icon-placeholder icon=\"close\" />\n    </button>\n  </div>\n</ng-template>\n" }]
+        }], ctorParameters: () => [{ type: CustomTemplatesService }, { type: ChannelService }, { type: ChatClientService }], propDecorators: { class: [{
                 type: HostBinding,
                 args: ['class']
             }] } });
 
 class StreamAvatarModule {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: StreamAvatarModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.3.12", ngImport: i0, type: StreamAvatarModule, declarations: [AvatarComponent, AvatarPlaceholderComponent], imports: [CommonModule, TranslateModule], exports: [AvatarComponent, AvatarPlaceholderComponent] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: StreamAvatarModule, imports: [CommonModule, TranslateModule] }); }
 }
-StreamAvatarModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: StreamAvatarModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-StreamAvatarModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.0.4", ngImport: i0, type: StreamAvatarModule, declarations: [AvatarComponent, AvatarPlaceholderComponent], imports: [CommonModule, TranslateModule], exports: [AvatarComponent, AvatarPlaceholderComponent] });
-StreamAvatarModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: StreamAvatarModule, imports: [CommonModule, TranslateModule] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: StreamAvatarModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: StreamAvatarModule, decorators: [{
             type: NgModule,
             args: [{
                     declarations: [AvatarComponent, AvatarPlaceholderComponent],
@@ -8829,17 +8822,17 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImpor
         }] });
 
 class IconModule {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: IconModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.3.12", ngImport: i0, type: IconModule, declarations: [IconComponent,
+            IconPlaceholderComponent,
+            LoadingIndicatorComponent,
+            LoadingIndicatorPlaceholderComponent], imports: [CommonModule], exports: [IconComponent,
+            IconPlaceholderComponent,
+            LoadingIndicatorComponent,
+            LoadingIndicatorPlaceholderComponent] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: IconModule, imports: [CommonModule] }); }
 }
-IconModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: IconModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-IconModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.0.4", ngImport: i0, type: IconModule, declarations: [IconComponent,
-        IconPlaceholderComponent,
-        LoadingIndicatorComponent,
-        LoadingIndicatorPlaceholderComponent], imports: [CommonModule], exports: [IconComponent,
-        IconPlaceholderComponent,
-        LoadingIndicatorComponent,
-        LoadingIndicatorPlaceholderComponent] });
-IconModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: IconModule, imports: [CommonModule] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: IconModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: IconModule, decorators: [{
             type: NgModule,
             args: [{
                     declarations: [
@@ -8859,11 +8852,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImpor
         }] });
 
 class VoiceRecordingModule {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: VoiceRecordingModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.3.12", ngImport: i0, type: VoiceRecordingModule, declarations: [VoiceRecordingComponent, VoiceRecordingWavebarComponent], imports: [CommonModule, IconModule, TranslateModule], exports: [VoiceRecordingComponent, VoiceRecordingWavebarComponent] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: VoiceRecordingModule, imports: [CommonModule, IconModule, TranslateModule] }); }
 }
-VoiceRecordingModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: VoiceRecordingModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-VoiceRecordingModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.0.4", ngImport: i0, type: VoiceRecordingModule, declarations: [VoiceRecordingComponent, VoiceRecordingWavebarComponent], imports: [CommonModule, IconModule, TranslateModule], exports: [VoiceRecordingComponent, VoiceRecordingWavebarComponent] });
-VoiceRecordingModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: VoiceRecordingModule, imports: [CommonModule, IconModule, TranslateModule] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: VoiceRecordingModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: VoiceRecordingModule, decorators: [{
             type: NgModule,
             args: [{
                     declarations: [VoiceRecordingComponent, VoiceRecordingWavebarComponent],
@@ -8873,11 +8866,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImpor
         }] });
 
 class StreamModalModule {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: StreamModalModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.3.12", ngImport: i0, type: StreamModalModule, declarations: [ModalComponent], imports: [CommonModule, IconModule], exports: [ModalComponent] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: StreamModalModule, imports: [CommonModule, IconModule] }); }
 }
-StreamModalModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: StreamModalModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-StreamModalModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.0.4", ngImport: i0, type: StreamModalModule, declarations: [ModalComponent], imports: [CommonModule, IconModule], exports: [ModalComponent] });
-StreamModalModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: StreamModalModule, imports: [CommonModule, IconModule] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: StreamModalModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: StreamModalModule, decorators: [{
             type: NgModule,
             args: [{
                     declarations: [ModalComponent],
@@ -8887,11 +8880,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImpor
         }] });
 
 class StreamNotificationModule {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: StreamNotificationModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.3.12", ngImport: i0, type: StreamNotificationModule, declarations: [NotificationComponent, NotificationListComponent], imports: [CommonModule, TranslateModule], exports: [NotificationComponent, NotificationListComponent] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: StreamNotificationModule, imports: [CommonModule, TranslateModule] }); }
 }
-StreamNotificationModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: StreamNotificationModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-StreamNotificationModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.0.4", ngImport: i0, type: StreamNotificationModule, declarations: [NotificationComponent, NotificationListComponent], imports: [CommonModule, TranslateModule], exports: [NotificationComponent, NotificationListComponent] });
-StreamNotificationModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: StreamNotificationModule, imports: [CommonModule, TranslateModule] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: StreamNotificationModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: StreamNotificationModule, decorators: [{
             type: NgModule,
             args: [{
                     declarations: [NotificationComponent, NotificationListComponent],
@@ -8901,11 +8894,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImpor
         }] });
 
 class StreamPaginatedListModule {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: StreamPaginatedListModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.3.12", ngImport: i0, type: StreamPaginatedListModule, declarations: [PaginatedListComponent], imports: [CommonModule, TranslateModule, IconModule], exports: [PaginatedListComponent] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: StreamPaginatedListModule, imports: [CommonModule, TranslateModule, IconModule] }); }
 }
-StreamPaginatedListModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: StreamPaginatedListModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-StreamPaginatedListModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.0.4", ngImport: i0, type: StreamPaginatedListModule, declarations: [PaginatedListComponent], imports: [CommonModule, TranslateModule, IconModule], exports: [PaginatedListComponent] });
-StreamPaginatedListModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: StreamPaginatedListModule, imports: [CommonModule, TranslateModule, IconModule] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: StreamPaginatedListModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: StreamPaginatedListModule, decorators: [{
             type: NgModule,
             args: [{
                     declarations: [PaginatedListComponent],
@@ -8915,73 +8908,73 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImpor
         }] });
 
 class StreamChatModule {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: StreamChatModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.3.12", ngImport: i0, type: StreamChatModule, declarations: [ChannelComponent,
+            ChannelHeaderComponent,
+            ChannelListComponent,
+            ChannelPreviewComponent,
+            MessageComponent,
+            MessageInputComponent,
+            MessageListComponent,
+            MessageActionsBoxComponent,
+            AttachmentListComponent,
+            MessageReactionsComponent,
+            AttachmentPreviewListComponent,
+            TextareaDirective,
+            ThreadComponent,
+            MessageBouncePromptComponent,
+            MessageReactionsSelectorComponent,
+            UserListComponent,
+            MessageTextComponent,
+            MessageBlockedComponent], imports: [CommonModule,
+            NgxFloatUiModule,
+            StreamAvatarModule,
+            TranslateModule,
+            VoiceRecordingModule,
+            IconModule,
+            StreamModalModule,
+            StreamNotificationModule,
+            StreamPaginatedListModule], exports: [ChannelComponent,
+            ChannelHeaderComponent,
+            ChannelListComponent,
+            ChannelPreviewComponent,
+            MessageComponent,
+            MessageInputComponent,
+            MessageListComponent,
+            MessageActionsBoxComponent,
+            AttachmentListComponent,
+            MessageReactionsComponent,
+            NotificationComponent,
+            NotificationListComponent,
+            AttachmentPreviewListComponent,
+            StreamModalModule,
+            StreamAvatarModule,
+            ThreadComponent,
+            MessageBouncePromptComponent,
+            VoiceRecordingModule,
+            MessageReactionsSelectorComponent,
+            UserListComponent,
+            StreamPaginatedListModule,
+            IconModule,
+            MessageTextComponent,
+            MessageBlockedComponent,
+            StreamNotificationModule] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: StreamChatModule, providers: [VoiceRecorderService], imports: [CommonModule,
+            NgxFloatUiModule,
+            StreamAvatarModule,
+            TranslateModule,
+            VoiceRecordingModule,
+            IconModule,
+            StreamModalModule,
+            StreamNotificationModule,
+            StreamPaginatedListModule, StreamModalModule,
+            StreamAvatarModule,
+            VoiceRecordingModule,
+            StreamPaginatedListModule,
+            IconModule,
+            StreamNotificationModule] }); }
 }
-StreamChatModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: StreamChatModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-StreamChatModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.0.4", ngImport: i0, type: StreamChatModule, declarations: [ChannelComponent,
-        ChannelHeaderComponent,
-        ChannelListComponent,
-        ChannelPreviewComponent,
-        MessageComponent,
-        MessageInputComponent,
-        MessageListComponent,
-        MessageActionsBoxComponent,
-        AttachmentListComponent,
-        MessageReactionsComponent,
-        AttachmentPreviewListComponent,
-        TextareaDirective,
-        ThreadComponent,
-        MessageBouncePromptComponent,
-        MessageReactionsSelectorComponent,
-        UserListComponent,
-        MessageTextComponent,
-        MessageBlockedComponent], imports: [CommonModule,
-        NgxFloatUiModule,
-        StreamAvatarModule,
-        TranslateModule,
-        VoiceRecordingModule,
-        IconModule,
-        StreamModalModule,
-        StreamNotificationModule,
-        StreamPaginatedListModule], exports: [ChannelComponent,
-        ChannelHeaderComponent,
-        ChannelListComponent,
-        ChannelPreviewComponent,
-        MessageComponent,
-        MessageInputComponent,
-        MessageListComponent,
-        MessageActionsBoxComponent,
-        AttachmentListComponent,
-        MessageReactionsComponent,
-        NotificationComponent,
-        NotificationListComponent,
-        AttachmentPreviewListComponent,
-        StreamModalModule,
-        StreamAvatarModule,
-        ThreadComponent,
-        MessageBouncePromptComponent,
-        VoiceRecordingModule,
-        MessageReactionsSelectorComponent,
-        UserListComponent,
-        StreamPaginatedListModule,
-        IconModule,
-        MessageTextComponent,
-        MessageBlockedComponent,
-        StreamNotificationModule] });
-StreamChatModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: StreamChatModule, providers: [VoiceRecorderService], imports: [CommonModule,
-        NgxFloatUiModule,
-        StreamAvatarModule,
-        TranslateModule,
-        VoiceRecordingModule,
-        IconModule,
-        StreamModalModule,
-        StreamNotificationModule,
-        StreamPaginatedListModule, StreamModalModule,
-        StreamAvatarModule,
-        VoiceRecordingModule,
-        StreamPaginatedListModule,
-        IconModule,
-        StreamNotificationModule] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: StreamChatModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: StreamChatModule, decorators: [{
             type: NgModule,
             args: [{
                     declarations: [
@@ -9047,16 +9040,16 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImpor
         }] });
 
 class StreamAutocompleteTextareaModule {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: StreamAutocompleteTextareaModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.3.12", ngImport: i0, type: StreamAutocompleteTextareaModule, declarations: [AutocompleteTextareaComponent], imports: [CommonModule, TranslateModule, MentionModule, StreamAvatarModule], exports: [AutocompleteTextareaComponent] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: StreamAutocompleteTextareaModule, providers: [
+            {
+                provide: textareaInjectionToken,
+                useValue: AutocompleteTextareaComponent,
+            },
+        ], imports: [CommonModule, TranslateModule, MentionModule, StreamAvatarModule] }); }
 }
-StreamAutocompleteTextareaModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: StreamAutocompleteTextareaModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-StreamAutocompleteTextareaModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.0.4", ngImport: i0, type: StreamAutocompleteTextareaModule, declarations: [AutocompleteTextareaComponent], imports: [CommonModule, TranslateModule, MentionModule, StreamAvatarModule], exports: [AutocompleteTextareaComponent] });
-StreamAutocompleteTextareaModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: StreamAutocompleteTextareaModule, providers: [
-        {
-            provide: textareaInjectionToken,
-            useValue: AutocompleteTextareaComponent,
-        },
-    ], imports: [CommonModule, TranslateModule, MentionModule, StreamAvatarModule] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: StreamAutocompleteTextareaModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: StreamAutocompleteTextareaModule, decorators: [{
             type: NgModule,
             args: [{
                     declarations: [AutocompleteTextareaComponent],
@@ -9072,16 +9065,16 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImpor
         }] });
 
 class StreamTextareaModule {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: StreamTextareaModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.3.12", ngImport: i0, type: StreamTextareaModule, declarations: [TextareaComponent], imports: [CommonModule, TranslateModule], exports: [TextareaComponent] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: StreamTextareaModule, providers: [
+            {
+                provide: textareaInjectionToken,
+                useValue: TextareaComponent,
+            },
+        ], imports: [CommonModule, TranslateModule] }); }
 }
-StreamTextareaModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: StreamTextareaModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-StreamTextareaModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.0.4", ngImport: i0, type: StreamTextareaModule, declarations: [TextareaComponent], imports: [CommonModule, TranslateModule], exports: [TextareaComponent] });
-StreamTextareaModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: StreamTextareaModule, providers: [
-        {
-            provide: textareaInjectionToken,
-            useValue: TextareaComponent,
-        },
-    ], imports: [CommonModule, TranslateModule] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: StreamTextareaModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: StreamTextareaModule, decorators: [{
             type: NgModule,
             args: [{
                     declarations: [TextareaComponent],
@@ -9117,13 +9110,13 @@ class VoiceRecorderWavebarComponent {
     ngOnDestroy() {
         clearInterval(this.durationComputeInterval);
     }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: VoiceRecorderWavebarComponent, deps: [{ token: AmplitudeRecorderService }, { token: AudioRecorderService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: VoiceRecorderWavebarComponent, selector: "stream-voice-recorder-wavebar", ngImport: i0, template: "<div\n  class=\"str-chat__recording-timer\"\n  [class.str-chat__recording-timer--hours]=\"isLongerThanOneHour\"\n>\n  {{ formattedDuration }}\n</div>\n<div class=\"str-chat__waveform-box-container\">\n  <div class=\"str-chat__audio_recorder__waveform-box\">\n    <div\n      *ngFor=\"let amplitude of amplitudes$ | async; trackBy: trackByIndex\"\n      class=\"str-chat__wave-progress-bar__amplitude-bar\"\n      [style.--str-chat__wave-progress-bar__amplitude-bar-height]=\"\n        (amplitude ?? 0) * 100 + '%'\n      \"\n    ></div>\n  </div>\n</div>\n", dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }] }); }
 }
-VoiceRecorderWavebarComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: VoiceRecorderWavebarComponent, deps: [{ token: AmplitudeRecorderService }, { token: AudioRecorderService }], target: i0.ɵɵFactoryTarget.Component });
-VoiceRecorderWavebarComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.4", type: VoiceRecorderWavebarComponent, selector: "stream-voice-recorder-wavebar", ngImport: i0, template: "<div\n  class=\"str-chat__recording-timer\"\n  [class.str-chat__recording-timer--hours]=\"isLongerThanOneHour\"\n>\n  {{ formattedDuration }}\n</div>\n<div class=\"str-chat__waveform-box-container\">\n  <div class=\"str-chat__audio_recorder__waveform-box\">\n    <div\n      *ngFor=\"let amplitude of amplitudes$ | async; trackBy: trackByIndex\"\n      class=\"str-chat__wave-progress-bar__amplitude-bar\"\n      [style.--str-chat__wave-progress-bar__amplitude-bar-height]=\"\n        (amplitude ?? 0) * 100 + '%'\n      \"\n    ></div>\n  </div>\n</div>\n", dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: VoiceRecorderWavebarComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: VoiceRecorderWavebarComponent, decorators: [{
             type: Component,
             args: [{ selector: 'stream-voice-recorder-wavebar', template: "<div\n  class=\"str-chat__recording-timer\"\n  [class.str-chat__recording-timer--hours]=\"isLongerThanOneHour\"\n>\n  {{ formattedDuration }}\n</div>\n<div class=\"str-chat__waveform-box-container\">\n  <div class=\"str-chat__audio_recorder__waveform-box\">\n    <div\n      *ngFor=\"let amplitude of amplitudes$ | async; trackBy: trackByIndex\"\n      class=\"str-chat__wave-progress-bar__amplitude-bar\"\n      [style.--str-chat__wave-progress-bar__amplitude-bar-height]=\"\n        (amplitude ?? 0) * 100 + '%'\n      \"\n    ></div>\n  </div>\n</div>\n" }]
-        }], ctorParameters: function () { return [{ type: AmplitudeRecorderService }, { type: AudioRecorderService }]; } });
+        }], ctorParameters: () => [{ type: AmplitudeRecorderService }, { type: AudioRecorderService }] });
 
 /**
  * The `VoiceRecorderComponent` makes it possible to record audio, and then upload it as a voice recording attachment
@@ -9186,26 +9179,26 @@ class VoiceRecorderComponent {
         this.isLoading = true;
         this.voiceRecorderService?.recording$.next(this.recording);
     }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: VoiceRecorderComponent, deps: [{ token: AudioRecorderService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: VoiceRecorderComponent, selector: "stream-voice-recorder", inputs: { voiceRecorderService: "voiceRecorderService" }, providers: [], usesOnChanges: true, ngImport: i0, template: "<div\n  class=\"str-chat__audio_recorder-container\"\n  *ngIf=\"voiceRecorderService?.isRecorderVisible$ | async\"\n>\n  <div class=\"str-chat__audio_recorder\" data-testid=\"audio-recorder\">\n    <button\n      class=\"str-chat__audio_recorder__cancel-button\"\n      data-testid=\"cancel-recording-audio-button\"\n      [disabled]=\"isLoading\"\n      (click)=\"cancel()\"\n      (keyup.enter)=\"cancel()\"\n    >\n      <stream-icon-placeholder icon=\"bin\" />\n    </button>\n    <stream-voice-recorder-wavebar\n      *ngIf=\"\n        (recordState === MediaRecordingState.RECORDING ||\n          recordState === MediaRecordingState.PAUSED) &&\n        !recording\n      \"\n    />\n    <!-- eslint-disable @angular-eslint/template/no-any -->\n    <stream-voice-recording\n      [attachment]=\"$any(recording)\"\n      *ngIf=\"!!recording\"\n    />\n    <!-- eslint-enable @angular-eslint/template/no-any -->\n    <button\n      *ngIf=\"recordState === MediaRecordingState.PAUSED && !recording\"\n      class=\"str-chat__audio_recorder__resume-recording-button\"\n      (click)=\"resume()\"\n      (keyup.enter)=\"resume()\"\n    >\n      <stream-icon-placeholder icon=\"mic\" />\n    </button>\n    <button\n      *ngIf=\"recordState === MediaRecordingState.RECORDING && !recording\"\n      class=\"str-chat__audio_recorder__pause-recording-button\"\n      data-testid=\"pause-recording-audio-button\"\n      (click)=\"pause()\"\n      (keyup.enter)=\"pause()\"\n    >\n      <stream-icon-placeholder icon=\"pause\" />\n    </button>\n    <ng-container\n      *ngIf=\"recordState === MediaRecordingState.STOPPED; else stopButton\"\n    >\n      <button\n        class=\"str-chat__audio_recorder__complete-button\"\n        data-testid=\"audio-recorder-complete-button\"\n        [disabled]=\"!recording\"\n        (click)=\"uploadRecording()\"\n        (keyup.enter)=\"uploadRecording()\"\n      >\n        <stream-loading-indicator *ngIf=\"isLoading; else sendIcon\" />\n        <ng-template #sendIcon>\n          <stream-icon-placeholder icon=\"send\" />\n        </ng-template>\n      </button>\n    </ng-container>\n    <ng-template #stopButton>\n      <button\n        class=\"str-chat__audio_recorder__stop-button\"\n        data-testid=\"audio-recorder-stop-button\"\n        [disabled]=\"recordState === MediaRecordingState.STOPPED\"\n        (click)=\"stop()\"\n        (keyup.enter)=\"stop()\"\n      >\n        <stream-icon-placeholder icon=\"delivered\" />\n      </button>\n    </ng-template>\n  </div>\n</div>\n", dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: VoiceRecordingComponent, selector: "stream-voice-recording", inputs: ["attachment"] }, { kind: "component", type: IconPlaceholderComponent, selector: "stream-icon-placeholder", inputs: ["icon"] }, { kind: "component", type: LoadingIndicatorComponent, selector: "stream-loading-indicator" }, { kind: "component", type: VoiceRecorderWavebarComponent, selector: "stream-voice-recorder-wavebar" }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }] }); }
 }
-VoiceRecorderComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: VoiceRecorderComponent, deps: [{ token: AudioRecorderService }], target: i0.ɵɵFactoryTarget.Component });
-VoiceRecorderComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.4", type: VoiceRecorderComponent, selector: "stream-voice-recorder", inputs: { voiceRecorderService: "voiceRecorderService" }, providers: [], usesOnChanges: true, ngImport: i0, template: "<div\n  class=\"str-chat__audio_recorder-container\"\n  *ngIf=\"voiceRecorderService?.isRecorderVisible$ | async\"\n>\n  <div class=\"str-chat__audio_recorder\" data-testid=\"audio-recorder\">\n    <button\n      class=\"str-chat__audio_recorder__cancel-button\"\n      data-testid=\"cancel-recording-audio-button\"\n      [disabled]=\"isLoading\"\n      (click)=\"cancel()\"\n      (keyup.enter)=\"cancel()\"\n    >\n      <stream-icon-placeholder icon=\"bin\"></stream-icon-placeholder>\n    </button>\n    <stream-voice-recorder-wavebar\n      *ngIf=\"\n        (recordState === MediaRecordingState.RECORDING ||\n          recordState === MediaRecordingState.PAUSED) &&\n        !recording\n      \"\n    ></stream-voice-recorder-wavebar>\n    <!-- eslint-disable @angular-eslint/template/no-any -->\n    <stream-voice-recording\n      [attachment]=\"$any(recording)\"\n      *ngIf=\"!!recording\"\n    ></stream-voice-recording>\n    <!-- eslint-enable @angular-eslint/template/no-any -->\n    <button\n      *ngIf=\"recordState === MediaRecordingState.PAUSED && !recording\"\n      class=\"str-chat__audio_recorder__resume-recording-button\"\n      (click)=\"resume()\"\n      (keyup.enter)=\"resume()\"\n    >\n      <stream-icon-placeholder icon=\"mic\"></stream-icon-placeholder>\n    </button>\n    <button\n      *ngIf=\"recordState === MediaRecordingState.RECORDING && !recording\"\n      class=\"str-chat__audio_recorder__pause-recording-button\"\n      data-testid=\"pause-recording-audio-button\"\n      (click)=\"pause()\"\n      (keyup.enter)=\"pause()\"\n    >\n      <stream-icon-placeholder icon=\"pause\"></stream-icon-placeholder>\n    </button>\n    <ng-container\n      *ngIf=\"recordState === MediaRecordingState.STOPPED; else stopButton\"\n    >\n      <button\n        class=\"str-chat__audio_recorder__complete-button\"\n        data-testid=\"audio-recorder-complete-button\"\n        [disabled]=\"!recording\"\n        (click)=\"uploadRecording()\"\n        (keyup.enter)=\"uploadRecording()\"\n      >\n        <stream-loading-indicator\n          *ngIf=\"isLoading; else sendIcon\"\n        ></stream-loading-indicator>\n        <ng-template #sendIcon>\n          <stream-icon-placeholder icon=\"send\"></stream-icon-placeholder>\n        </ng-template>\n      </button>\n    </ng-container>\n    <ng-template #stopButton>\n      <button\n        class=\"str-chat__audio_recorder__stop-button\"\n        data-testid=\"audio-recorder-stop-button\"\n        [disabled]=\"recordState === MediaRecordingState.STOPPED\"\n        (click)=\"stop()\"\n        (keyup.enter)=\"stop()\"\n      >\n        <stream-icon-placeholder icon=\"delivered\"></stream-icon-placeholder>\n      </button>\n    </ng-template>\n  </div>\n</div>\n", dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: VoiceRecordingComponent, selector: "stream-voice-recording", inputs: ["attachment"] }, { kind: "component", type: IconPlaceholderComponent, selector: "stream-icon-placeholder", inputs: ["icon"] }, { kind: "component", type: LoadingIndicatorComponent, selector: "stream-loading-indicator" }, { kind: "component", type: VoiceRecorderWavebarComponent, selector: "stream-voice-recorder-wavebar" }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: VoiceRecorderComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: VoiceRecorderComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'stream-voice-recorder', providers: [], template: "<div\n  class=\"str-chat__audio_recorder-container\"\n  *ngIf=\"voiceRecorderService?.isRecorderVisible$ | async\"\n>\n  <div class=\"str-chat__audio_recorder\" data-testid=\"audio-recorder\">\n    <button\n      class=\"str-chat__audio_recorder__cancel-button\"\n      data-testid=\"cancel-recording-audio-button\"\n      [disabled]=\"isLoading\"\n      (click)=\"cancel()\"\n      (keyup.enter)=\"cancel()\"\n    >\n      <stream-icon-placeholder icon=\"bin\"></stream-icon-placeholder>\n    </button>\n    <stream-voice-recorder-wavebar\n      *ngIf=\"\n        (recordState === MediaRecordingState.RECORDING ||\n          recordState === MediaRecordingState.PAUSED) &&\n        !recording\n      \"\n    ></stream-voice-recorder-wavebar>\n    <!-- eslint-disable @angular-eslint/template/no-any -->\n    <stream-voice-recording\n      [attachment]=\"$any(recording)\"\n      *ngIf=\"!!recording\"\n    ></stream-voice-recording>\n    <!-- eslint-enable @angular-eslint/template/no-any -->\n    <button\n      *ngIf=\"recordState === MediaRecordingState.PAUSED && !recording\"\n      class=\"str-chat__audio_recorder__resume-recording-button\"\n      (click)=\"resume()\"\n      (keyup.enter)=\"resume()\"\n    >\n      <stream-icon-placeholder icon=\"mic\"></stream-icon-placeholder>\n    </button>\n    <button\n      *ngIf=\"recordState === MediaRecordingState.RECORDING && !recording\"\n      class=\"str-chat__audio_recorder__pause-recording-button\"\n      data-testid=\"pause-recording-audio-button\"\n      (click)=\"pause()\"\n      (keyup.enter)=\"pause()\"\n    >\n      <stream-icon-placeholder icon=\"pause\"></stream-icon-placeholder>\n    </button>\n    <ng-container\n      *ngIf=\"recordState === MediaRecordingState.STOPPED; else stopButton\"\n    >\n      <button\n        class=\"str-chat__audio_recorder__complete-button\"\n        data-testid=\"audio-recorder-complete-button\"\n        [disabled]=\"!recording\"\n        (click)=\"uploadRecording()\"\n        (keyup.enter)=\"uploadRecording()\"\n      >\n        <stream-loading-indicator\n          *ngIf=\"isLoading; else sendIcon\"\n        ></stream-loading-indicator>\n        <ng-template #sendIcon>\n          <stream-icon-placeholder icon=\"send\"></stream-icon-placeholder>\n        </ng-template>\n      </button>\n    </ng-container>\n    <ng-template #stopButton>\n      <button\n        class=\"str-chat__audio_recorder__stop-button\"\n        data-testid=\"audio-recorder-stop-button\"\n        [disabled]=\"recordState === MediaRecordingState.STOPPED\"\n        (click)=\"stop()\"\n        (keyup.enter)=\"stop()\"\n      >\n        <stream-icon-placeholder icon=\"delivered\"></stream-icon-placeholder>\n      </button>\n    </ng-template>\n  </div>\n</div>\n" }]
-        }], ctorParameters: function () { return [{ type: AudioRecorderService }]; }, propDecorators: { voiceRecorderService: [{
+            args: [{ selector: 'stream-voice-recorder', providers: [], template: "<div\n  class=\"str-chat__audio_recorder-container\"\n  *ngIf=\"voiceRecorderService?.isRecorderVisible$ | async\"\n>\n  <div class=\"str-chat__audio_recorder\" data-testid=\"audio-recorder\">\n    <button\n      class=\"str-chat__audio_recorder__cancel-button\"\n      data-testid=\"cancel-recording-audio-button\"\n      [disabled]=\"isLoading\"\n      (click)=\"cancel()\"\n      (keyup.enter)=\"cancel()\"\n    >\n      <stream-icon-placeholder icon=\"bin\" />\n    </button>\n    <stream-voice-recorder-wavebar\n      *ngIf=\"\n        (recordState === MediaRecordingState.RECORDING ||\n          recordState === MediaRecordingState.PAUSED) &&\n        !recording\n      \"\n    />\n    <!-- eslint-disable @angular-eslint/template/no-any -->\n    <stream-voice-recording\n      [attachment]=\"$any(recording)\"\n      *ngIf=\"!!recording\"\n    />\n    <!-- eslint-enable @angular-eslint/template/no-any -->\n    <button\n      *ngIf=\"recordState === MediaRecordingState.PAUSED && !recording\"\n      class=\"str-chat__audio_recorder__resume-recording-button\"\n      (click)=\"resume()\"\n      (keyup.enter)=\"resume()\"\n    >\n      <stream-icon-placeholder icon=\"mic\" />\n    </button>\n    <button\n      *ngIf=\"recordState === MediaRecordingState.RECORDING && !recording\"\n      class=\"str-chat__audio_recorder__pause-recording-button\"\n      data-testid=\"pause-recording-audio-button\"\n      (click)=\"pause()\"\n      (keyup.enter)=\"pause()\"\n    >\n      <stream-icon-placeholder icon=\"pause\" />\n    </button>\n    <ng-container\n      *ngIf=\"recordState === MediaRecordingState.STOPPED; else stopButton\"\n    >\n      <button\n        class=\"str-chat__audio_recorder__complete-button\"\n        data-testid=\"audio-recorder-complete-button\"\n        [disabled]=\"!recording\"\n        (click)=\"uploadRecording()\"\n        (keyup.enter)=\"uploadRecording()\"\n      >\n        <stream-loading-indicator *ngIf=\"isLoading; else sendIcon\" />\n        <ng-template #sendIcon>\n          <stream-icon-placeholder icon=\"send\" />\n        </ng-template>\n      </button>\n    </ng-container>\n    <ng-template #stopButton>\n      <button\n        class=\"str-chat__audio_recorder__stop-button\"\n        data-testid=\"audio-recorder-stop-button\"\n        [disabled]=\"recordState === MediaRecordingState.STOPPED\"\n        (click)=\"stop()\"\n        (keyup.enter)=\"stop()\"\n      >\n        <stream-icon-placeholder icon=\"delivered\" />\n      </button>\n    </ng-template>\n  </div>\n</div>\n" }]
+        }], ctorParameters: () => [{ type: AudioRecorderService }], propDecorators: { voiceRecorderService: [{
                 type: Input
             }] } });
 
 class VoiceRecorderModule {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: VoiceRecorderModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.3.12", ngImport: i0, type: VoiceRecorderModule, declarations: [VoiceRecorderComponent, VoiceRecorderWavebarComponent], imports: [CommonModule, VoiceRecordingModule, IconModule, TranslateModule], exports: [VoiceRecorderComponent, VoiceRecorderWavebarComponent] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: VoiceRecorderModule, providers: [
+            AudioRecorderService,
+            TranscoderService,
+            AmplitudeRecorderService,
+        ], imports: [CommonModule, VoiceRecordingModule, IconModule, TranslateModule] }); }
 }
-VoiceRecorderModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: VoiceRecorderModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-VoiceRecorderModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.0.4", ngImport: i0, type: VoiceRecorderModule, declarations: [VoiceRecorderComponent, VoiceRecorderWavebarComponent], imports: [CommonModule, VoiceRecordingModule, IconModule, TranslateModule], exports: [VoiceRecorderComponent, VoiceRecorderWavebarComponent] });
-VoiceRecorderModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: VoiceRecorderModule, providers: [
-        AudioRecorderService,
-        TranscoderService,
-        AmplitudeRecorderService,
-    ], imports: [CommonModule, VoiceRecordingModule, IconModule, TranslateModule] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: VoiceRecorderModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: VoiceRecorderModule, decorators: [{
             type: NgModule,
             args: [{
                     declarations: [VoiceRecorderComponent, VoiceRecorderWavebarComponent],
@@ -9404,13 +9397,13 @@ class PollComposerComponent {
             throw error;
         }
     }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: PollComposerComponent, deps: [{ token: CustomTemplatesService }, { token: ChatClientService }, { token: NotificationService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: PollComposerComponent, selector: "stream-poll-composer", outputs: { pollCompose: "pollCompose", cancel: "cancel" }, viewQueries: [{ propertyName: "formContent", first: true, predicate: ["formContent"], descendants: true }], ngImport: i0, template: "<ng-container>\n  <ng-container\n    *ngTemplateOutlet=\"\n      (customTemplatesService.modalTemplate$ | async) || defaultModal;\n      context: getModalContext()\n    \"\n  />\n</ng-container>\n\n<ng-template\n  #defaultModal\n  let-isOpen=\"isOpen\"\n  let-isOpenChangeHandler=\"isOpenChangeHandler\"\n  let-content=\"content\"\n>\n  <stream-modal\n    class=\"str-chat-angular__create-poll-modal str-chat__create-poll-modal\"\n    [isOpen]=\"isOpen\"\n    [content]=\"content\"\n    (isOpenChange)=\"isOpenChangeHandler($event)\"\n  />\n</ng-template>\n\n<ng-template #formContent>\n  <div\n    class=\"str-chat__dialog str-chat__poll-creation-dialog\"\n    data-testid=\"poll-creation-dialog\"\n  >\n    <div class=\"str-chat__modal-header\">\n      <div class=\"str-chat__modal-header__title\">\n        {{ \"streamChat.Create poll\" | translate }}\n      </div>\n    </div>\n    <div class=\"str-chat__dialog__body\">\n      <form [formGroup]=\"formGroup\" autocomplete=\"off\">\n        <div\n          class=\"str-chat__form__field str-chat__form__input-field str-chat__form__input-field--with-label\"\n          [class.str-chat__form__input-field--has-error]=\"\n            formGroup.get('name')?.errors && formGroup.get('name')?.touched\n          \"\n        >\n          <label class=\"str-chat__form__field-label\" htmlFor=\"name\">\n            {{ \"streamChat.Question\" | translate }}\n          </label>\n          <div class=\"str-chat__form__input-field__value\">\n            <div\n              class=\"str-chat__form-field-error str-chat__form__input-field__error\"\n            >\n              {{\n                (formGroup.get(\"name\")?.errors?.required &&\n                formGroup.get(\"name\")?.touched\n                  ? \"streamChat.Question is required\"\n                  : \"\"\n                ) | translate\n              }}\n            </div>\n            <input\n              id=\"name\"\n              type=\"text\"\n              formControlName=\"name\"\n              placeholder=\"{{ 'streamChat.Ask a question' | translate }}\"\n            />\n          </div>\n        </div>\n        <fieldset class=\"str-chat__form__field str-chat__form__input-fieldset\">\n          <legend class=\"str-chat__form__field-label\">\n            {{ \"streamChat.Options\" | translate }}\n          </legend>\n          <div\n            class=\"str-chat__form-field-error str-chat__form__input-field__error\"\n          >\n            {{\n              (formGroup.get(\"options\")?.errors?.atLeastOne &&\n              formGroup.get(\"options\")?.touched\n                ? \"streamChat.Provide at least one option\"\n                : \"\"\n              ) | translate\n            }}\n          </div>\n          <ng-container formArrayName=\"options\">\n            <div class=\"str-chat__form__input-fieldset__values\">\n              <!-- eslint-disable @angular-eslint/template/use-track-by-function -->\n              <ng-container\n                *ngFor=\"let option of options.controls; let i = index\"\n              >\n                <!-- eslint-enable @angular-eslint/template/use-track-by-function -->\n                <div class=\"str-chat__drag-and-drop-container__item\">\n                  <div class=\"str-chat__form__input-field\">\n                    <div class=\"str-chat__form__input-field__value\">\n                      <input\n                        id=\"option{{ i }}\"\n                        name=\"option{{ i }}\"\n                        type=\"text\"\n                        [formControl]=\"option\"\n                        (input)=\"optionChanged(i)\"\n                        placeholder=\"{{\n                          'streamChat.Add an option' | translate\n                        }}\"\n                      />\n                    </div>\n                  </div>\n                </div>\n              </ng-container>\n            </div>\n          </ng-container>\n        </fieldset>\n        <ng-container\n          *ngTemplateOutlet=\"\n            switch;\n            context: {\n              name: 'multiple_answers',\n              control: formGroup.get('multiple_answers'),\n              label: 'streamChat.Multiple answers' | translate\n            }\n          \"\n        />\n        <div\n          *ngIf=\"formGroup.get('multiple_answers')?.value\"\n          class=\"str-chat__form__field str-chat__form__input-field str-chat__form__input-field--with-label\"\n          [class.str-chat__form__input-field--has-error]=\"\n            formGroup.get('maximum_number_of_votes')?.errors &&\n            formGroup.get('maximum_number_of_votes')?.touched\n          \"\n        >\n          <label class=\"str-chat__form__field-label\" htmlFor=\"name\">\n            {{ \"streamChat.Maximum number of votes\" | translate }}\n          </label>\n          <div class=\"str-chat__form__input-field__value\">\n            <div\n              class=\"str-chat__form-field-error str-chat__form__input-field__error\"\n            >\n              {{\n                (formGroup.get(\"maximum_number_of_votes\")?.errors &&\n                formGroup.get(\"maximum_number_of_votes\")?.touched\n                  ? \"streamChat.Provide a value between {{ min }}\n              and {{ max }}\" : \"\" ) | translate: { min: 2, max: 10 } }}\n            </div>\n            <input\n              id=\"maximum_number_of_votes\"\n              type=\"text\"\n              formControlName=\"maximum_number_of_votes\"\n              placeholder=\"{{ 'streamChat.Provide a value between ' \n              + '{{ min }} and {{ max }}' | translate: { min: 2, max: 10 } }}\"\n            />\n          </div>\n        </div>\n        <ng-container\n          *ngTemplateOutlet=\"\n            switch;\n            context: {\n              name: 'is_anonymous',\n              control: formGroup.get('is_anonymous'),\n              label: 'streamChat.Anonymous poll' | translate\n            }\n          \"\n        />\n        <ng-container\n          *ngTemplateOutlet=\"\n            switch;\n            context: {\n              name: 'allow_user_suggested_options',\n              control: formGroup.get('allow_user_suggested_options'),\n              label: 'streamChat.Allow option suggestions' | translate\n            }\n          \"\n        />\n        <ng-container\n          *ngTemplateOutlet=\"\n            switch;\n            context: {\n              name: 'allow_answers',\n              control: formGroup.get('allow_answers'),\n              label: 'streamChat.Allow comments' | translate\n            }\n          \"\n        />\n      </form>\n    </div>\n    <stream-notification-list />\n    <div class=\"str-chat__dialog__controls\">\n      <button\n        class=\"str-chat__dialog__controls-button str-chat__dialog__controls-button--cancel\"\n        (click)=\"cancel.emit()\"\n        type=\"button\"\n      >\n        {{ \"streamChat.Cancel\" | translate }}\n      </button>\n      <button\n        class=\"str-chat__dialog__controls-button str-chat__dialog__controls-button--submit\"\n        (click)=\"createPoll()\"\n        [disabled]=\"formGroup.invalid\"\n        type=\"submit\"\n      >\n        {{ \"streamChat.Create\" | translate }}\n      </button>\n    </div>\n  </div>\n</ng-template>\n\n<ng-template #switch let-control=\"control\" let-label=\"label\" let-name=\"name\">\n  <div class=\"str-chat__form__field str-chat__form__switch-field\">\n    <label>\n      <div class=\"str-chat__form__field str-chat__form__switch-field-content\">\n        <div class=\"str-chat__form__field str-chat__form__switch-field__text\">\n          {{ label | translate }}\n        </div>\n      </div>\n      <input\n        type=\"checkbox\"\n        [checked]=\"control.value\"\n        id=\"{{ name }}\"\n        name=\"{{ name }}\"\n      />\n      <div\n        class=\"str-chat__form__switch-field__switch\"\n        [class.str-chat__form__switch-field__switch--on]=\"control.value\"\n        (click)=\"control.setValue(!control.value, { emitEvent: true })\"\n        (keyup.enter)=\"control.setValue(!control.value, { emitEvent: true })\"\n      >\n        <div class=\"str-chat__form__switch-field__switch-handle\"></div>\n      </div>\n    </label>\n  </div>\n</ng-template>\n", dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: ModalComponent, selector: "stream-modal", inputs: ["isOpen", "content"], outputs: ["isOpenChange"] }, { kind: "component", type: NotificationListComponent, selector: "stream-notification-list" }, { kind: "directive", type: i1$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: i1$1.FormArrayName, selector: "[formArrayName]", inputs: ["formArrayName"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "pipe", type: i6.TranslatePipe, name: "translate" }] }); }
 }
-PollComposerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: PollComposerComponent, deps: [{ token: CustomTemplatesService }, { token: ChatClientService }, { token: NotificationService }], target: i0.ɵɵFactoryTarget.Component });
-PollComposerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.4", type: PollComposerComponent, selector: "stream-poll-composer", outputs: { pollCompose: "pollCompose", cancel: "cancel" }, viewQueries: [{ propertyName: "formContent", first: true, predicate: ["formContent"], descendants: true }], ngImport: i0, template: "<ng-container>\n  <ng-container\n    *ngTemplateOutlet=\"\n      (customTemplatesService.modalTemplate$ | async) || defaultModal;\n      context: getModalContext()\n    \"\n  ></ng-container>\n</ng-container>\n\n<ng-template\n  #defaultModal\n  let-isOpen=\"isOpen\"\n  let-isOpenChangeHandler=\"isOpenChangeHandler\"\n  let-content=\"content\"\n>\n  <stream-modal\n    class=\"str-chat-angular__create-poll-modal str-chat__create-poll-modal\"\n    [isOpen]=\"isOpen\"\n    [content]=\"content\"\n    (isOpenChange)=\"isOpenChangeHandler($event)\"\n  >\n  </stream-modal>\n</ng-template>\n\n<ng-template #formContent>\n  <div\n    class=\"str-chat__dialog str-chat__poll-creation-dialog\"\n    data-testid=\"poll-creation-dialog\"\n  >\n    <div class=\"str-chat__modal-header\">\n      <div class=\"str-chat__modal-header__title\">\n        {{ \"streamChat.Create poll\" | translate }}\n      </div>\n    </div>\n    <div class=\"str-chat__dialog__body\">\n      <form [formGroup]=\"formGroup\" autocomplete=\"off\">\n        <div\n          class=\"str-chat__form__field str-chat__form__input-field str-chat__form__input-field--with-label\"\n          [class.str-chat__form__input-field--has-error]=\"\n            formGroup.get('name')?.errors && formGroup.get('name')?.touched\n          \"\n        >\n          <label class=\"str-chat__form__field-label\" htmlFor=\"name\">\n            {{ \"streamChat.Question\" | translate }}\n          </label>\n          <div class=\"str-chat__form__input-field__value\">\n            <div\n              class=\"str-chat__form-field-error str-chat__form__input-field__error\"\n            >\n              {{\n                (formGroup.get(\"name\")?.errors?.required &&\n                formGroup.get(\"name\")?.touched\n                  ? \"streamChat.Question is required\"\n                  : \"\"\n                ) | translate\n              }}\n            </div>\n            <input\n              id=\"name\"\n              type=\"text\"\n              formControlName=\"name\"\n              placeholder=\"{{ 'streamChat.Ask a question' | translate }}\"\n            />\n          </div>\n        </div>\n        <fieldset class=\"str-chat__form__field str-chat__form__input-fieldset\">\n          <legend class=\"str-chat__form__field-label\">\n            {{ \"streamChat.Options\" | translate }}\n          </legend>\n          <div\n            class=\"str-chat__form-field-error str-chat__form__input-field__error\"\n          >\n            {{\n              (formGroup.get(\"options\")?.errors?.atLeastOne &&\n              formGroup.get(\"options\")?.touched\n                ? \"streamChat.Provide at least one option\"\n                : \"\"\n              ) | translate\n            }}\n          </div>\n          <ng-container formArrayName=\"options\">\n            <div class=\"str-chat__form__input-fieldset__values\">\n              <!-- eslint-disable @angular-eslint/template/use-track-by-function -->\n              <ng-container\n                *ngFor=\"let option of options.controls; let i = index\"\n              >\n                <!-- eslint-enable @angular-eslint/template/use-track-by-function -->\n                <div class=\"str-chat__drag-and-drop-container__item\">\n                  <div class=\"str-chat__form__input-field\">\n                    <div class=\"str-chat__form__input-field__value\">\n                      <input\n                        id=\"option{{ i }}\"\n                        name=\"option{{ i }}\"\n                        type=\"text\"\n                        [formControl]=\"option\"\n                        (input)=\"optionChanged(i)\"\n                        placeholder=\"{{\n                          'streamChat.Add an option' | translate\n                        }}\"\n                      />\n                    </div>\n                  </div>\n                </div>\n              </ng-container>\n            </div>\n          </ng-container>\n        </fieldset>\n        <ng-container\n          *ngTemplateOutlet=\"\n            switch;\n            context: {\n              name: 'multiple_answers',\n              control: formGroup.get('multiple_answers'),\n              label: 'streamChat.Multiple answers' | translate\n            }\n          \"\n        ></ng-container>\n        <div\n          *ngIf=\"formGroup.get('multiple_answers')?.value\"\n          class=\"str-chat__form__field str-chat__form__input-field str-chat__form__input-field--with-label\"\n          [class.str-chat__form__input-field--has-error]=\"\n            formGroup.get('maximum_number_of_votes')?.errors &&\n            formGroup.get('maximum_number_of_votes')?.touched\n          \"\n        >\n          <label class=\"str-chat__form__field-label\" htmlFor=\"name\">\n            {{ \"streamChat.Maximum number of votes\" | translate }}\n          </label>\n          <div class=\"str-chat__form__input-field__value\">\n            <div\n              class=\"str-chat__form-field-error str-chat__form__input-field__error\"\n            >\n              {{\n                (formGroup.get(\"maximum_number_of_votes\")?.errors &&\n                formGroup.get(\"maximum_number_of_votes\")?.touched\n                  ? \"streamChat.Provide a value between {{ min }}\n              and {{ max }}\" : \"\" ) | translate: { min: 2, max: 10 } }}\n            </div>\n            <input\n              id=\"maximum_number_of_votes\"\n              type=\"text\"\n              formControlName=\"maximum_number_of_votes\"\n              placeholder=\"{{ 'streamChat.Provide a value between ' \n              + '{{ min }} and {{ max }}' | translate: { min: 2, max: 10 } }}\"\n            />\n          </div>\n        </div>\n        <ng-container\n          *ngTemplateOutlet=\"\n            switch;\n            context: {\n              name: 'is_anonymous',\n              control: formGroup.get('is_anonymous'),\n              label: 'streamChat.Anonymous poll' | translate\n            }\n          \"\n        ></ng-container>\n        <ng-container\n          *ngTemplateOutlet=\"\n            switch;\n            context: {\n              name: 'allow_user_suggested_options',\n              control: formGroup.get('allow_user_suggested_options'),\n              label: 'streamChat.Allow option suggestions' | translate\n            }\n          \"\n        ></ng-container>\n        <ng-container\n          *ngTemplateOutlet=\"\n            switch;\n            context: {\n              name: 'allow_answers',\n              control: formGroup.get('allow_answers'),\n              label: 'streamChat.Allow comments' | translate\n            }\n          \"\n        ></ng-container>\n      </form>\n    </div>\n    <stream-notification-list></stream-notification-list>\n    <div class=\"str-chat__dialog__controls\">\n      <button\n        class=\"str-chat__dialog__controls-button str-chat__dialog__controls-button--cancel\"\n        (click)=\"cancel.emit()\"\n        type=\"button\"\n      >\n        {{ \"streamChat.Cancel\" | translate }}\n      </button>\n      <button\n        class=\"str-chat__dialog__controls-button str-chat__dialog__controls-button--submit\"\n        (click)=\"createPoll()\"\n        [disabled]=\"formGroup.invalid\"\n        type=\"submit\"\n      >\n        {{ \"streamChat.Create\" | translate }}\n      </button>\n    </div>\n  </div>\n</ng-template>\n\n<ng-template #switch let-control=\"control\" let-label=\"label\" let-name=\"name\">\n  <div class=\"str-chat__form__field str-chat__form__switch-field\">\n    <label>\n      <div class=\"str-chat__form__field str-chat__form__switch-field-content\">\n        <div class=\"str-chat__form__field str-chat__form__switch-field__text\">\n          {{ label | translate }}\n        </div>\n      </div>\n      <input\n        type=\"checkbox\"\n        [checked]=\"control.value\"\n        id=\"{{ name }}\"\n        name=\"{{ name }}\"\n      />\n      <div\n        class=\"str-chat__form__switch-field__switch\"\n        [class.str-chat__form__switch-field__switch--on]=\"control.value\"\n        (click)=\"control.setValue(!control.value, { emitEvent: true })\"\n        (keyup.enter)=\"control.setValue(!control.value, { emitEvent: true })\"\n      >\n        <div class=\"str-chat__form__switch-field__switch-handle\"></div>\n      </div>\n    </label>\n  </div>\n</ng-template>\n", dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: ModalComponent, selector: "stream-modal", inputs: ["isOpen", "content"], outputs: ["isOpenChange"] }, { kind: "component", type: NotificationListComponent, selector: "stream-notification-list" }, { kind: "directive", type: i1$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: i1$1.FormArrayName, selector: "[formArrayName]", inputs: ["formArrayName"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "pipe", type: i6.TranslatePipe, name: "translate" }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: PollComposerComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: PollComposerComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'stream-poll-composer', template: "<ng-container>\n  <ng-container\n    *ngTemplateOutlet=\"\n      (customTemplatesService.modalTemplate$ | async) || defaultModal;\n      context: getModalContext()\n    \"\n  ></ng-container>\n</ng-container>\n\n<ng-template\n  #defaultModal\n  let-isOpen=\"isOpen\"\n  let-isOpenChangeHandler=\"isOpenChangeHandler\"\n  let-content=\"content\"\n>\n  <stream-modal\n    class=\"str-chat-angular__create-poll-modal str-chat__create-poll-modal\"\n    [isOpen]=\"isOpen\"\n    [content]=\"content\"\n    (isOpenChange)=\"isOpenChangeHandler($event)\"\n  >\n  </stream-modal>\n</ng-template>\n\n<ng-template #formContent>\n  <div\n    class=\"str-chat__dialog str-chat__poll-creation-dialog\"\n    data-testid=\"poll-creation-dialog\"\n  >\n    <div class=\"str-chat__modal-header\">\n      <div class=\"str-chat__modal-header__title\">\n        {{ \"streamChat.Create poll\" | translate }}\n      </div>\n    </div>\n    <div class=\"str-chat__dialog__body\">\n      <form [formGroup]=\"formGroup\" autocomplete=\"off\">\n        <div\n          class=\"str-chat__form__field str-chat__form__input-field str-chat__form__input-field--with-label\"\n          [class.str-chat__form__input-field--has-error]=\"\n            formGroup.get('name')?.errors && formGroup.get('name')?.touched\n          \"\n        >\n          <label class=\"str-chat__form__field-label\" htmlFor=\"name\">\n            {{ \"streamChat.Question\" | translate }}\n          </label>\n          <div class=\"str-chat__form__input-field__value\">\n            <div\n              class=\"str-chat__form-field-error str-chat__form__input-field__error\"\n            >\n              {{\n                (formGroup.get(\"name\")?.errors?.required &&\n                formGroup.get(\"name\")?.touched\n                  ? \"streamChat.Question is required\"\n                  : \"\"\n                ) | translate\n              }}\n            </div>\n            <input\n              id=\"name\"\n              type=\"text\"\n              formControlName=\"name\"\n              placeholder=\"{{ 'streamChat.Ask a question' | translate }}\"\n            />\n          </div>\n        </div>\n        <fieldset class=\"str-chat__form__field str-chat__form__input-fieldset\">\n          <legend class=\"str-chat__form__field-label\">\n            {{ \"streamChat.Options\" | translate }}\n          </legend>\n          <div\n            class=\"str-chat__form-field-error str-chat__form__input-field__error\"\n          >\n            {{\n              (formGroup.get(\"options\")?.errors?.atLeastOne &&\n              formGroup.get(\"options\")?.touched\n                ? \"streamChat.Provide at least one option\"\n                : \"\"\n              ) | translate\n            }}\n          </div>\n          <ng-container formArrayName=\"options\">\n            <div class=\"str-chat__form__input-fieldset__values\">\n              <!-- eslint-disable @angular-eslint/template/use-track-by-function -->\n              <ng-container\n                *ngFor=\"let option of options.controls; let i = index\"\n              >\n                <!-- eslint-enable @angular-eslint/template/use-track-by-function -->\n                <div class=\"str-chat__drag-and-drop-container__item\">\n                  <div class=\"str-chat__form__input-field\">\n                    <div class=\"str-chat__form__input-field__value\">\n                      <input\n                        id=\"option{{ i }}\"\n                        name=\"option{{ i }}\"\n                        type=\"text\"\n                        [formControl]=\"option\"\n                        (input)=\"optionChanged(i)\"\n                        placeholder=\"{{\n                          'streamChat.Add an option' | translate\n                        }}\"\n                      />\n                    </div>\n                  </div>\n                </div>\n              </ng-container>\n            </div>\n          </ng-container>\n        </fieldset>\n        <ng-container\n          *ngTemplateOutlet=\"\n            switch;\n            context: {\n              name: 'multiple_answers',\n              control: formGroup.get('multiple_answers'),\n              label: 'streamChat.Multiple answers' | translate\n            }\n          \"\n        ></ng-container>\n        <div\n          *ngIf=\"formGroup.get('multiple_answers')?.value\"\n          class=\"str-chat__form__field str-chat__form__input-field str-chat__form__input-field--with-label\"\n          [class.str-chat__form__input-field--has-error]=\"\n            formGroup.get('maximum_number_of_votes')?.errors &&\n            formGroup.get('maximum_number_of_votes')?.touched\n          \"\n        >\n          <label class=\"str-chat__form__field-label\" htmlFor=\"name\">\n            {{ \"streamChat.Maximum number of votes\" | translate }}\n          </label>\n          <div class=\"str-chat__form__input-field__value\">\n            <div\n              class=\"str-chat__form-field-error str-chat__form__input-field__error\"\n            >\n              {{\n                (formGroup.get(\"maximum_number_of_votes\")?.errors &&\n                formGroup.get(\"maximum_number_of_votes\")?.touched\n                  ? \"streamChat.Provide a value between {{ min }}\n              and {{ max }}\" : \"\" ) | translate: { min: 2, max: 10 } }}\n            </div>\n            <input\n              id=\"maximum_number_of_votes\"\n              type=\"text\"\n              formControlName=\"maximum_number_of_votes\"\n              placeholder=\"{{ 'streamChat.Provide a value between ' \n              + '{{ min }} and {{ max }}' | translate: { min: 2, max: 10 } }}\"\n            />\n          </div>\n        </div>\n        <ng-container\n          *ngTemplateOutlet=\"\n            switch;\n            context: {\n              name: 'is_anonymous',\n              control: formGroup.get('is_anonymous'),\n              label: 'streamChat.Anonymous poll' | translate\n            }\n          \"\n        ></ng-container>\n        <ng-container\n          *ngTemplateOutlet=\"\n            switch;\n            context: {\n              name: 'allow_user_suggested_options',\n              control: formGroup.get('allow_user_suggested_options'),\n              label: 'streamChat.Allow option suggestions' | translate\n            }\n          \"\n        ></ng-container>\n        <ng-container\n          *ngTemplateOutlet=\"\n            switch;\n            context: {\n              name: 'allow_answers',\n              control: formGroup.get('allow_answers'),\n              label: 'streamChat.Allow comments' | translate\n            }\n          \"\n        ></ng-container>\n      </form>\n    </div>\n    <stream-notification-list></stream-notification-list>\n    <div class=\"str-chat__dialog__controls\">\n      <button\n        class=\"str-chat__dialog__controls-button str-chat__dialog__controls-button--cancel\"\n        (click)=\"cancel.emit()\"\n        type=\"button\"\n      >\n        {{ \"streamChat.Cancel\" | translate }}\n      </button>\n      <button\n        class=\"str-chat__dialog__controls-button str-chat__dialog__controls-button--submit\"\n        (click)=\"createPoll()\"\n        [disabled]=\"formGroup.invalid\"\n        type=\"submit\"\n      >\n        {{ \"streamChat.Create\" | translate }}\n      </button>\n    </div>\n  </div>\n</ng-template>\n\n<ng-template #switch let-control=\"control\" let-label=\"label\" let-name=\"name\">\n  <div class=\"str-chat__form__field str-chat__form__switch-field\">\n    <label>\n      <div class=\"str-chat__form__field str-chat__form__switch-field-content\">\n        <div class=\"str-chat__form__field str-chat__form__switch-field__text\">\n          {{ label | translate }}\n        </div>\n      </div>\n      <input\n        type=\"checkbox\"\n        [checked]=\"control.value\"\n        id=\"{{ name }}\"\n        name=\"{{ name }}\"\n      />\n      <div\n        class=\"str-chat__form__switch-field__switch\"\n        [class.str-chat__form__switch-field__switch--on]=\"control.value\"\n        (click)=\"control.setValue(!control.value, { emitEvent: true })\"\n        (keyup.enter)=\"control.setValue(!control.value, { emitEvent: true })\"\n      >\n        <div class=\"str-chat__form__switch-field__switch-handle\"></div>\n      </div>\n    </label>\n  </div>\n</ng-template>\n" }]
-        }], ctorParameters: function () { return [{ type: CustomTemplatesService }, { type: ChatClientService }, { type: NotificationService }]; }, propDecorators: { pollCompose: [{
+            args: [{ selector: 'stream-poll-composer', template: "<ng-container>\n  <ng-container\n    *ngTemplateOutlet=\"\n      (customTemplatesService.modalTemplate$ | async) || defaultModal;\n      context: getModalContext()\n    \"\n  />\n</ng-container>\n\n<ng-template\n  #defaultModal\n  let-isOpen=\"isOpen\"\n  let-isOpenChangeHandler=\"isOpenChangeHandler\"\n  let-content=\"content\"\n>\n  <stream-modal\n    class=\"str-chat-angular__create-poll-modal str-chat__create-poll-modal\"\n    [isOpen]=\"isOpen\"\n    [content]=\"content\"\n    (isOpenChange)=\"isOpenChangeHandler($event)\"\n  />\n</ng-template>\n\n<ng-template #formContent>\n  <div\n    class=\"str-chat__dialog str-chat__poll-creation-dialog\"\n    data-testid=\"poll-creation-dialog\"\n  >\n    <div class=\"str-chat__modal-header\">\n      <div class=\"str-chat__modal-header__title\">\n        {{ \"streamChat.Create poll\" | translate }}\n      </div>\n    </div>\n    <div class=\"str-chat__dialog__body\">\n      <form [formGroup]=\"formGroup\" autocomplete=\"off\">\n        <div\n          class=\"str-chat__form__field str-chat__form__input-field str-chat__form__input-field--with-label\"\n          [class.str-chat__form__input-field--has-error]=\"\n            formGroup.get('name')?.errors && formGroup.get('name')?.touched\n          \"\n        >\n          <label class=\"str-chat__form__field-label\" htmlFor=\"name\">\n            {{ \"streamChat.Question\" | translate }}\n          </label>\n          <div class=\"str-chat__form__input-field__value\">\n            <div\n              class=\"str-chat__form-field-error str-chat__form__input-field__error\"\n            >\n              {{\n                (formGroup.get(\"name\")?.errors?.required &&\n                formGroup.get(\"name\")?.touched\n                  ? \"streamChat.Question is required\"\n                  : \"\"\n                ) | translate\n              }}\n            </div>\n            <input\n              id=\"name\"\n              type=\"text\"\n              formControlName=\"name\"\n              placeholder=\"{{ 'streamChat.Ask a question' | translate }}\"\n            />\n          </div>\n        </div>\n        <fieldset class=\"str-chat__form__field str-chat__form__input-fieldset\">\n          <legend class=\"str-chat__form__field-label\">\n            {{ \"streamChat.Options\" | translate }}\n          </legend>\n          <div\n            class=\"str-chat__form-field-error str-chat__form__input-field__error\"\n          >\n            {{\n              (formGroup.get(\"options\")?.errors?.atLeastOne &&\n              formGroup.get(\"options\")?.touched\n                ? \"streamChat.Provide at least one option\"\n                : \"\"\n              ) | translate\n            }}\n          </div>\n          <ng-container formArrayName=\"options\">\n            <div class=\"str-chat__form__input-fieldset__values\">\n              <!-- eslint-disable @angular-eslint/template/use-track-by-function -->\n              <ng-container\n                *ngFor=\"let option of options.controls; let i = index\"\n              >\n                <!-- eslint-enable @angular-eslint/template/use-track-by-function -->\n                <div class=\"str-chat__drag-and-drop-container__item\">\n                  <div class=\"str-chat__form__input-field\">\n                    <div class=\"str-chat__form__input-field__value\">\n                      <input\n                        id=\"option{{ i }}\"\n                        name=\"option{{ i }}\"\n                        type=\"text\"\n                        [formControl]=\"option\"\n                        (input)=\"optionChanged(i)\"\n                        placeholder=\"{{\n                          'streamChat.Add an option' | translate\n                        }}\"\n                      />\n                    </div>\n                  </div>\n                </div>\n              </ng-container>\n            </div>\n          </ng-container>\n        </fieldset>\n        <ng-container\n          *ngTemplateOutlet=\"\n            switch;\n            context: {\n              name: 'multiple_answers',\n              control: formGroup.get('multiple_answers'),\n              label: 'streamChat.Multiple answers' | translate\n            }\n          \"\n        />\n        <div\n          *ngIf=\"formGroup.get('multiple_answers')?.value\"\n          class=\"str-chat__form__field str-chat__form__input-field str-chat__form__input-field--with-label\"\n          [class.str-chat__form__input-field--has-error]=\"\n            formGroup.get('maximum_number_of_votes')?.errors &&\n            formGroup.get('maximum_number_of_votes')?.touched\n          \"\n        >\n          <label class=\"str-chat__form__field-label\" htmlFor=\"name\">\n            {{ \"streamChat.Maximum number of votes\" | translate }}\n          </label>\n          <div class=\"str-chat__form__input-field__value\">\n            <div\n              class=\"str-chat__form-field-error str-chat__form__input-field__error\"\n            >\n              {{\n                (formGroup.get(\"maximum_number_of_votes\")?.errors &&\n                formGroup.get(\"maximum_number_of_votes\")?.touched\n                  ? \"streamChat.Provide a value between {{ min }}\n              and {{ max }}\" : \"\" ) | translate: { min: 2, max: 10 } }}\n            </div>\n            <input\n              id=\"maximum_number_of_votes\"\n              type=\"text\"\n              formControlName=\"maximum_number_of_votes\"\n              placeholder=\"{{ 'streamChat.Provide a value between ' \n              + '{{ min }} and {{ max }}' | translate: { min: 2, max: 10 } }}\"\n            />\n          </div>\n        </div>\n        <ng-container\n          *ngTemplateOutlet=\"\n            switch;\n            context: {\n              name: 'is_anonymous',\n              control: formGroup.get('is_anonymous'),\n              label: 'streamChat.Anonymous poll' | translate\n            }\n          \"\n        />\n        <ng-container\n          *ngTemplateOutlet=\"\n            switch;\n            context: {\n              name: 'allow_user_suggested_options',\n              control: formGroup.get('allow_user_suggested_options'),\n              label: 'streamChat.Allow option suggestions' | translate\n            }\n          \"\n        />\n        <ng-container\n          *ngTemplateOutlet=\"\n            switch;\n            context: {\n              name: 'allow_answers',\n              control: formGroup.get('allow_answers'),\n              label: 'streamChat.Allow comments' | translate\n            }\n          \"\n        />\n      </form>\n    </div>\n    <stream-notification-list />\n    <div class=\"str-chat__dialog__controls\">\n      <button\n        class=\"str-chat__dialog__controls-button str-chat__dialog__controls-button--cancel\"\n        (click)=\"cancel.emit()\"\n        type=\"button\"\n      >\n        {{ \"streamChat.Cancel\" | translate }}\n      </button>\n      <button\n        class=\"str-chat__dialog__controls-button str-chat__dialog__controls-button--submit\"\n        (click)=\"createPoll()\"\n        [disabled]=\"formGroup.invalid\"\n        type=\"submit\"\n      >\n        {{ \"streamChat.Create\" | translate }}\n      </button>\n    </div>\n  </div>\n</ng-template>\n\n<ng-template #switch let-control=\"control\" let-label=\"label\" let-name=\"name\">\n  <div class=\"str-chat__form__field str-chat__form__switch-field\">\n    <label>\n      <div class=\"str-chat__form__field str-chat__form__switch-field-content\">\n        <div class=\"str-chat__form__field str-chat__form__switch-field__text\">\n          {{ label | translate }}\n        </div>\n      </div>\n      <input\n        type=\"checkbox\"\n        [checked]=\"control.value\"\n        id=\"{{ name }}\"\n        name=\"{{ name }}\"\n      />\n      <div\n        class=\"str-chat__form__switch-field__switch\"\n        [class.str-chat__form__switch-field__switch--on]=\"control.value\"\n        (click)=\"control.setValue(!control.value, { emitEvent: true })\"\n        (keyup.enter)=\"control.setValue(!control.value, { emitEvent: true })\"\n      >\n        <div class=\"str-chat__form__switch-field__switch-handle\"></div>\n      </div>\n    </label>\n  </div>\n</ng-template>\n" }]
+        }], ctorParameters: () => [{ type: CustomTemplatesService }, { type: ChatClientService }, { type: NotificationService }], propDecorators: { pollCompose: [{
                 type: Output
             }], cancel: [{
                 type: Output
@@ -9484,17 +9477,17 @@ class BasePollComponent {
             this.cdRef.detectChanges();
         }
     }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: BasePollComponent, deps: [{ token: CustomTemplatesService }, { token: ChatClientService }, { token: i0.ChangeDetectorRef }, { token: ChannelService }, { token: NotificationService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: BasePollComponent, selector: "stream-base-poll", inputs: { pollId: "pollId", messageId: "messageId" }, usesOnChanges: true, ngImport: i0, template: '', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-BasePollComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: BasePollComponent, deps: [{ token: CustomTemplatesService }, { token: ChatClientService }, { token: i0.ChangeDetectorRef }, { token: ChannelService }, { token: NotificationService }], target: i0.ɵɵFactoryTarget.Component });
-BasePollComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.4", type: BasePollComponent, selector: "stream-base-poll", inputs: { pollId: "pollId", messageId: "messageId" }, usesOnChanges: true, ngImport: i0, template: '', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: BasePollComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: BasePollComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'stream-base-poll',
                     template: '',
                     changeDetection: ChangeDetectionStrategy.OnPush,
                 }]
-        }], ctorParameters: function () { return [{ type: CustomTemplatesService }, { type: ChatClientService }, { type: i0.ChangeDetectorRef }, { type: ChannelService }, { type: NotificationService }]; }, propDecorators: { pollId: [{
+        }], ctorParameters: () => [{ type: CustomTemplatesService }, { type: ChatClientService }, { type: i0.ChangeDetectorRef }, { type: ChannelService }, { type: NotificationService }], propDecorators: { pollId: [{
                 type: Input
             }], messageId: [{
                 type: Input
@@ -9568,10 +9561,10 @@ class PollHeaderComponent extends BasePollComponent {
             count: undefined,
         };
     }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: PollHeaderComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: PollHeaderComponent, selector: "stream-poll-header", usesInheritance: true, ngImport: i0, template: "<div class=\"str-chat__poll-header\">\n  <div class=\"str-chat__poll-title\">{{ name }}</div>\n  <div class=\"str-chat__poll-subtitle\">\n    {{ selectionInstructions.text | translate : selectionInstructions }}\n  </div>\n</div>\n", dependencies: [{ kind: "pipe", type: i6.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-PollHeaderComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: PollHeaderComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-PollHeaderComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.4", type: PollHeaderComponent, selector: "stream-poll-header", usesInheritance: true, ngImport: i0, template: "<div class=\"str-chat__poll-header\">\n  <div class=\"str-chat__poll-title\">{{ name }}</div>\n  <div class=\"str-chat__poll-subtitle\">\n    {{ selectionInstructions.text | translate : selectionInstructions }}\n  </div>\n</div>\n", dependencies: [{ kind: "pipe", type: i6.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: PollHeaderComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: PollHeaderComponent, decorators: [{
             type: Component,
             args: [{ selector: 'stream-poll-header', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"str-chat__poll-header\">\n  <div class=\"str-chat__poll-title\">{{ name }}</div>\n  <div class=\"str-chat__poll-subtitle\">\n    {{ selectionInstructions.text | translate : selectionInstructions }}\n  </div>\n</div>\n" }]
         }] });
@@ -9692,12 +9685,12 @@ class PollOptionSelectorComponent extends BasePollComponent {
         });
         return unsubscribe;
     }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: PollOptionSelectorComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: PollOptionSelectorComponent, selector: "stream-poll-option-selector", inputs: { option: "option", displayAvatarCount: "displayAvatarCount", voteCountVerbose: "voteCountVerbose" }, usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<div\n  class=\"str-chat__poll-option\"\n  [class.str-chat__poll-option--votable]=\"\n    !isClosed &&\n    canVote &&\n    maxVoteAllowedCount &&\n    ownVoteCount < maxVoteAllowedCount &&\n    !ownVote\n  \"\n  (click)=\"toggleVote()\"\n  (keyup.enter)=\"toggleVote()\"\n>\n  <ng-container *ngIf=\"canVote\">\n    <ng-container *ngTemplateOutlet=\"checkmark\" />\n  </ng-container>\n  <div class=\"str-chat__poll-option-data\">\n    <p class=\"str-chat__poll-option-text\">{{ option?.text }}</p>\n    <ng-container *ngIf=\"displayAvatarCount && votingVisibility === 'public'\">\n      <div\n        *ngFor=\"let vote of latestVotes; trackBy: trackByVoteId\"\n        class=\"str-chat__poll-option-voters\"\n      >\n        <stream-avatar-placeholder\n          location=\"poll-voter\"\n          [user]=\"vote.user\"\n          [imageUrl]=\"vote.user?.image\"\n          [name]=\"vote.user?.name\"\n          type=\"user\"\n        />\n      </div>\n    </ng-container>\n    <div class=\"str-chat__poll-option-vote-count\">\n      <ng-container *ngIf=\"voteCountVerbose; else count\">\n        {{ 'streamChat.{{ count }} votes' | translate:{count: voteCount} }}\n      </ng-container>\n      <ng-template #count>\n        {{ voteCount }}\n      </ng-template>\n    </div>\n  </div>\n  <ng-container *ngTemplateOutlet=\"amountBar\" />\n</div>\n\n<ng-template #checkmark>\n  <div\n    class=\"str-chat__checkmark\"\n    [class.str-chat__checkmark--checked]=\"!!ownVote\"\n  ></div>\n</ng-template>\n\n<ng-template #amountBar>\n  <div\n    class=\"str-chat__amount-bar str-chat__poll-option__votes-bar\"\n    [class.str-chat__poll-option__votes-bar--winner]=\"isClosed && isWinner\"\n    role=\"progressbar\"\n    [ngStyle]=\"{\n      '--str-chat__amount-bar-fulfillment':\n        (winningOptionCount && voteCount / winningOptionCount) * 100 + '%'\n    }\"\n  ></div>\n</ng-template>\n", dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: AvatarPlaceholderComponent, selector: "stream-avatar-placeholder", inputs: ["name", "imageUrl", "location", "channel", "user", "type", "initialsType", "showOnlineIndicator"] }, { kind: "pipe", type: i6.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-PollOptionSelectorComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: PollOptionSelectorComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-PollOptionSelectorComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.4", type: PollOptionSelectorComponent, selector: "stream-poll-option-selector", inputs: { option: "option", displayAvatarCount: "displayAvatarCount", voteCountVerbose: "voteCountVerbose" }, usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<div\n  class=\"str-chat__poll-option\"\n  [class.str-chat__poll-option--votable]=\"\n    !isClosed &&\n    canVote &&\n    maxVoteAllowedCount &&\n    ownVoteCount < maxVoteAllowedCount &&\n    !ownVote\n  \"\n  (click)=\"toggleVote()\"\n  (keyup.enter)=\"toggleVote()\"\n>\n  <ng-container *ngIf=\"canVote\">\n    <ng-container *ngTemplateOutlet=\"checkmark\"></ng-container>\n  </ng-container>\n  <div class=\"str-chat__poll-option-data\">\n    <p class=\"str-chat__poll-option-text\">{{ option?.text }}</p>\n    <ng-container *ngIf=\"displayAvatarCount && votingVisibility === 'public'\">\n      <div\n        *ngFor=\"let vote of latestVotes; trackBy: trackByVoteId\"\n        class=\"str-chat__poll-option-voters\"\n      >\n        <stream-avatar-placeholder\n          location=\"poll-voter\"\n          [user]=\"vote.user\"\n          [imageUrl]=\"vote.user?.image\"\n          [name]=\"vote.user?.name\"\n          type=\"user\"\n        ></stream-avatar-placeholder>\n      </div>\n    </ng-container>\n    <div class=\"str-chat__poll-option-vote-count\">\n      <ng-container *ngIf=\"voteCountVerbose; else count\">\n        {{ 'streamChat.{{ count }} votes' | translate:{count: voteCount} }}\n      </ng-container>\n      <ng-template #count>\n        {{ voteCount }}\n      </ng-template>\n    </div>\n  </div>\n  <ng-container *ngTemplateOutlet=\"amountBar\"></ng-container>\n</div>\n\n<ng-template #checkmark>\n  <div\n    class=\"str-chat__checkmark\"\n    [class.str-chat__checkmark--checked]=\"!!ownVote\"\n  ></div>\n</ng-template>\n\n<ng-template #amountBar>\n  <div\n    class=\"str-chat__amount-bar str-chat__poll-option__votes-bar\"\n    [class.str-chat__poll-option__votes-bar--winner]=\"isClosed && isWinner\"\n    role=\"progressbar\"\n    [ngStyle]=\"{\n      '--str-chat__amount-bar-fulfillment':\n        (winningOptionCount && voteCount / winningOptionCount) * 100 + '%'\n    }\"\n  ></div>\n</ng-template>\n", dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: AvatarPlaceholderComponent, selector: "stream-avatar-placeholder", inputs: ["name", "imageUrl", "location", "channel", "user", "type", "initialsType", "showOnlineIndicator"] }, { kind: "pipe", type: i6.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: PollOptionSelectorComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: PollOptionSelectorComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'stream-poll-option-selector', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div\n  class=\"str-chat__poll-option\"\n  [class.str-chat__poll-option--votable]=\"\n    !isClosed &&\n    canVote &&\n    maxVoteAllowedCount &&\n    ownVoteCount < maxVoteAllowedCount &&\n    !ownVote\n  \"\n  (click)=\"toggleVote()\"\n  (keyup.enter)=\"toggleVote()\"\n>\n  <ng-container *ngIf=\"canVote\">\n    <ng-container *ngTemplateOutlet=\"checkmark\"></ng-container>\n  </ng-container>\n  <div class=\"str-chat__poll-option-data\">\n    <p class=\"str-chat__poll-option-text\">{{ option?.text }}</p>\n    <ng-container *ngIf=\"displayAvatarCount && votingVisibility === 'public'\">\n      <div\n        *ngFor=\"let vote of latestVotes; trackBy: trackByVoteId\"\n        class=\"str-chat__poll-option-voters\"\n      >\n        <stream-avatar-placeholder\n          location=\"poll-voter\"\n          [user]=\"vote.user\"\n          [imageUrl]=\"vote.user?.image\"\n          [name]=\"vote.user?.name\"\n          type=\"user\"\n        ></stream-avatar-placeholder>\n      </div>\n    </ng-container>\n    <div class=\"str-chat__poll-option-vote-count\">\n      <ng-container *ngIf=\"voteCountVerbose; else count\">\n        {{ 'streamChat.{{ count }} votes' | translate:{count: voteCount} }}\n      </ng-container>\n      <ng-template #count>\n        {{ voteCount }}\n      </ng-template>\n    </div>\n  </div>\n  <ng-container *ngTemplateOutlet=\"amountBar\"></ng-container>\n</div>\n\n<ng-template #checkmark>\n  <div\n    class=\"str-chat__checkmark\"\n    [class.str-chat__checkmark--checked]=\"!!ownVote\"\n  ></div>\n</ng-template>\n\n<ng-template #amountBar>\n  <div\n    class=\"str-chat__amount-bar str-chat__poll-option__votes-bar\"\n    [class.str-chat__poll-option__votes-bar--winner]=\"isClosed && isWinner\"\n    role=\"progressbar\"\n    [ngStyle]=\"{\n      '--str-chat__amount-bar-fulfillment':\n        (winningOptionCount && voteCount / winningOptionCount) * 100 + '%'\n    }\"\n  ></div>\n</ng-template>\n" }]
+            args: [{ selector: 'stream-poll-option-selector', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div\n  class=\"str-chat__poll-option\"\n  [class.str-chat__poll-option--votable]=\"\n    !isClosed &&\n    canVote &&\n    maxVoteAllowedCount &&\n    ownVoteCount < maxVoteAllowedCount &&\n    !ownVote\n  \"\n  (click)=\"toggleVote()\"\n  (keyup.enter)=\"toggleVote()\"\n>\n  <ng-container *ngIf=\"canVote\">\n    <ng-container *ngTemplateOutlet=\"checkmark\" />\n  </ng-container>\n  <div class=\"str-chat__poll-option-data\">\n    <p class=\"str-chat__poll-option-text\">{{ option?.text }}</p>\n    <ng-container *ngIf=\"displayAvatarCount && votingVisibility === 'public'\">\n      <div\n        *ngFor=\"let vote of latestVotes; trackBy: trackByVoteId\"\n        class=\"str-chat__poll-option-voters\"\n      >\n        <stream-avatar-placeholder\n          location=\"poll-voter\"\n          [user]=\"vote.user\"\n          [imageUrl]=\"vote.user?.image\"\n          [name]=\"vote.user?.name\"\n          type=\"user\"\n        />\n      </div>\n    </ng-container>\n    <div class=\"str-chat__poll-option-vote-count\">\n      <ng-container *ngIf=\"voteCountVerbose; else count\">\n        {{ 'streamChat.{{ count }} votes' | translate:{count: voteCount} }}\n      </ng-container>\n      <ng-template #count>\n        {{ voteCount }}\n      </ng-template>\n    </div>\n  </div>\n  <ng-container *ngTemplateOutlet=\"amountBar\" />\n</div>\n\n<ng-template #checkmark>\n  <div\n    class=\"str-chat__checkmark\"\n    [class.str-chat__checkmark--checked]=\"!!ownVote\"\n  ></div>\n</ng-template>\n\n<ng-template #amountBar>\n  <div\n    class=\"str-chat__amount-bar str-chat__poll-option__votes-bar\"\n    [class.str-chat__poll-option__votes-bar--winner]=\"isClosed && isWinner\"\n    role=\"progressbar\"\n    [ngStyle]=\"{\n      '--str-chat__amount-bar-fulfillment':\n        (winningOptionCount && voteCount / winningOptionCount) * 100 + '%'\n    }\"\n  ></div>\n</ng-template>\n" }]
         }], propDecorators: { option: [{
                 type: Input
             }], displayAvatarCount: [{
@@ -9730,12 +9723,12 @@ class PollOptionsListComponent extends BasePollComponent {
     trackByOptionId(_, option) {
         return option.id;
     }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: PollOptionsListComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: PollOptionsListComponent, selector: "stream-poll-options-list", inputs: { maxOptionsDisplayed: "maxOptionsDisplayed" }, usesInheritance: true, ngImport: i0, template: "<div\n  class=\"str-chat__poll-option-list\"\n  [class.str-chat__poll-option-list--full]=\"\n    !maxOptionsDisplayed || maxOptionsDisplayed === options.length\n  \"\n>\n  <ng-container\n    *ngFor=\"\n      let option of options | slice : 0 : maxOptionsDisplayed;\n      trackBy: trackByOptionId\n    \"\n  >\n    <stream-poll-option-selector\n      [option]=\"option\"\n      [messageId]=\"messageId\"\n      [pollId]=\"pollId\"\n    />\n  </ng-container>\n</div>\n", dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "component", type: PollOptionSelectorComponent, selector: "stream-poll-option-selector", inputs: ["option", "displayAvatarCount", "voteCountVerbose"] }, { kind: "pipe", type: i1.SlicePipe, name: "slice" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-PollOptionsListComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: PollOptionsListComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-PollOptionsListComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.4", type: PollOptionsListComponent, selector: "stream-poll-options-list", inputs: { maxOptionsDisplayed: "maxOptionsDisplayed" }, usesInheritance: true, ngImport: i0, template: "<div\n  class=\"str-chat__poll-option-list\"\n  [class.str-chat__poll-option-list--full]=\"\n    !maxOptionsDisplayed || maxOptionsDisplayed === options.length\n  \"\n>\n  <ng-container\n    *ngFor=\"\n      let option of options | slice : 0 : maxOptionsDisplayed;\n      trackBy: trackByOptionId\n    \"\n  >\n    <stream-poll-option-selector\n      [option]=\"option\"\n      [messageId]=\"messageId\"\n      [pollId]=\"pollId\"\n    ></stream-poll-option-selector>\n  </ng-container>\n</div>\n", dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "component", type: PollOptionSelectorComponent, selector: "stream-poll-option-selector", inputs: ["option", "displayAvatarCount", "voteCountVerbose"] }, { kind: "pipe", type: i1.SlicePipe, name: "slice" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: PollOptionsListComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: PollOptionsListComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'stream-poll-options-list', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div\n  class=\"str-chat__poll-option-list\"\n  [class.str-chat__poll-option-list--full]=\"\n    !maxOptionsDisplayed || maxOptionsDisplayed === options.length\n  \"\n>\n  <ng-container\n    *ngFor=\"\n      let option of options | slice : 0 : maxOptionsDisplayed;\n      trackBy: trackByOptionId\n    \"\n  >\n    <stream-poll-option-selector\n      [option]=\"option\"\n      [messageId]=\"messageId\"\n      [pollId]=\"pollId\"\n    ></stream-poll-option-selector>\n  </ng-container>\n</div>\n" }]
+            args: [{ selector: 'stream-poll-options-list', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div\n  class=\"str-chat__poll-option-list\"\n  [class.str-chat__poll-option-list--full]=\"\n    !maxOptionsDisplayed || maxOptionsDisplayed === options.length\n  \"\n>\n  <ng-container\n    *ngFor=\"\n      let option of options | slice : 0 : maxOptionsDisplayed;\n      trackBy: trackByOptionId\n    \"\n  >\n    <stream-poll-option-selector\n      [option]=\"option\"\n      [messageId]=\"messageId\"\n      [pollId]=\"pollId\"\n    />\n  </ng-container>\n</div>\n" }]
         }], propDecorators: { maxOptionsDisplayed: [{
                 type: Input
             }] } });
@@ -9757,13 +9750,13 @@ class PollVoteComponent {
     parseDate(date) {
         return this.dateParser.parseDateTime(new Date(date));
     }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: PollVoteComponent, deps: [{ token: i6.TranslateService }, { token: DateParserService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: PollVoteComponent, selector: "stream-poll-vote", inputs: { vote: "vote" }, ngImport: i0, template: "<div class=\"str-chat__poll-vote\">\n  <div class=\"str-chat__poll-vote__author\">\n    <stream-avatar-placeholder\n      location=\"poll-voter\"\n      [user]=\"vote?.user\"\n      [imageUrl]=\"vote?.user?.image\"\n      [name]=\"vote?.user?.name ?? anonymousTranslation\"\n      type=\"user\"\n    />\n    <div class=\"str-chat__poll-vote__author__name\">\n      {{ vote?.user?.name ?? anonymousTranslation }}\n    </div>\n  </div>\n  <div *ngIf=\"vote?.created_at\" class=\"str-chat__poll-vote__timestamp\">\n    {{ parseDate(vote!.created_at) }}\n  </div>\n</div>\n", dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: AvatarPlaceholderComponent, selector: "stream-avatar-placeholder", inputs: ["name", "imageUrl", "location", "channel", "user", "type", "initialsType", "showOnlineIndicator"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-PollVoteComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: PollVoteComponent, deps: [{ token: i6.TranslateService }, { token: DateParserService }], target: i0.ɵɵFactoryTarget.Component });
-PollVoteComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.4", type: PollVoteComponent, selector: "stream-poll-vote", inputs: { vote: "vote" }, ngImport: i0, template: "<div class=\"str-chat__poll-vote\">\n  <div class=\"str-chat__poll-vote__author\">\n    <stream-avatar-placeholder\n      location=\"poll-voter\"\n      [user]=\"vote?.user\"\n      [imageUrl]=\"vote?.user?.image\"\n      [name]=\"vote?.user?.name ?? anonymousTranslation\"\n      type=\"user\"\n    ></stream-avatar-placeholder>\n    <div class=\"str-chat__poll-vote__author__name\">\n      {{ vote?.user?.name ?? anonymousTranslation }}\n    </div>\n  </div>\n  <div *ngIf=\"vote?.created_at\" class=\"str-chat__poll-vote__timestamp\">\n    {{ parseDate(vote!.created_at) }}\n  </div>\n</div>\n", dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: AvatarPlaceholderComponent, selector: "stream-avatar-placeholder", inputs: ["name", "imageUrl", "location", "channel", "user", "type", "initialsType", "showOnlineIndicator"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: PollVoteComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: PollVoteComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'stream-poll-vote', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"str-chat__poll-vote\">\n  <div class=\"str-chat__poll-vote__author\">\n    <stream-avatar-placeholder\n      location=\"poll-voter\"\n      [user]=\"vote?.user\"\n      [imageUrl]=\"vote?.user?.image\"\n      [name]=\"vote?.user?.name ?? anonymousTranslation\"\n      type=\"user\"\n    ></stream-avatar-placeholder>\n    <div class=\"str-chat__poll-vote__author__name\">\n      {{ vote?.user?.name ?? anonymousTranslation }}\n    </div>\n  </div>\n  <div *ngIf=\"vote?.created_at\" class=\"str-chat__poll-vote__timestamp\">\n    {{ parseDate(vote!.created_at) }}\n  </div>\n</div>\n" }]
-        }], ctorParameters: function () { return [{ type: i6.TranslateService }, { type: DateParserService }]; }, propDecorators: { vote: [{
+            args: [{ selector: 'stream-poll-vote', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"str-chat__poll-vote\">\n  <div class=\"str-chat__poll-vote__author\">\n    <stream-avatar-placeholder\n      location=\"poll-voter\"\n      [user]=\"vote?.user\"\n      [imageUrl]=\"vote?.user?.image\"\n      [name]=\"vote?.user?.name ?? anonymousTranslation\"\n      type=\"user\"\n    />\n    <div class=\"str-chat__poll-vote__author__name\">\n      {{ vote?.user?.name ?? anonymousTranslation }}\n    </div>\n  </div>\n  <div *ngIf=\"vote?.created_at\" class=\"str-chat__poll-vote__timestamp\">\n    {{ parseDate(vote!.created_at) }}\n  </div>\n</div>\n" }]
+        }], ctorParameters: () => [{ type: i6.TranslateService }, { type: DateParserService }], propDecorators: { vote: [{
                 type: Input
             }] } });
 
@@ -9832,12 +9825,12 @@ class PollVoteResultsListComponent extends BasePollComponent {
         });
         return subscribe;
     }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: PollVoteResultsListComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: PollVoteResultsListComponent, selector: "stream-poll-vote-results-list", inputs: { option: "option" }, usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<div class=\"str-chat__poll-option str-chat__poll-option--full-vote-list\">\n  <div class=\"str-chat__poll-option__header\">\n    <div class=\"str-chat__poll-option__option-text\">{{ option?.text }}</div>\n    <div class=\"str-chat__poll-result-option-vote-counter\">\n      <div\n        *ngIf=\"isWinner\"\n        class=\"str-chat__poll-result-winning-option-icon\"\n      ></div>\n      <span class=\"str-chat__poll-result-option-vote-count\">\n        {{ 'streamChat.{{ count }} votes' | translate:{count: voteCount ?? 0} }}\n      </span>\n    </div>\n  </div>\n  <stream-paginated-list\n    class=\"str-chat__poll-vote-listing\"\n    [items]=\"votes\"\n    [hasMore]=\"next !== undefined\"\n    [isLoading]=\"isLoading\"\n    [trackBy]=\"trackByVoteId\"\n    (loadMore)=\"loadVotes()\"\n  >\n    <ng-template let-vote=\"item\">\n      <stream-poll-vote [vote]=\"vote\" />\n    </ng-template>\n  </stream-paginated-list>\n</div>\n", dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: PaginatedListComponent, selector: "stream-paginated-list", inputs: ["items", "isLoading", "hasMore", "trackBy"], outputs: ["loadMore"] }, { kind: "component", type: PollVoteComponent, selector: "stream-poll-vote", inputs: ["vote"] }, { kind: "pipe", type: i6.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-PollVoteResultsListComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: PollVoteResultsListComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-PollVoteResultsListComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.4", type: PollVoteResultsListComponent, selector: "stream-poll-vote-results-list", inputs: { option: "option" }, usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<div class=\"str-chat__poll-option str-chat__poll-option--full-vote-list\">\n  <div class=\"str-chat__poll-option__header\">\n    <div class=\"str-chat__poll-option__option-text\">{{ option?.text }}</div>\n    <div class=\"str-chat__poll-result-option-vote-counter\">\n      <div\n        *ngIf=\"isWinner\"\n        class=\"str-chat__poll-result-winning-option-icon\"\n      ></div>\n      <span class=\"str-chat__poll-result-option-vote-count\">\n        {{ 'streamChat.{{ count }} votes' | translate:{count: voteCount ?? 0} }}\n      </span>\n    </div>\n  </div>\n  <stream-paginated-list\n    class=\"str-chat__poll-vote-listing\"\n    [items]=\"votes\"\n    [hasMore]=\"next !== undefined\"\n    [isLoading]=\"isLoading\"\n    [trackBy]=\"trackByVoteId\"\n    (loadMore)=\"loadVotes()\"\n  >\n    <ng-template let-vote=\"item\">\n      <stream-poll-vote [vote]=\"vote\"></stream-poll-vote>\n    </ng-template>\n  </stream-paginated-list>\n</div>\n", dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: PaginatedListComponent, selector: "stream-paginated-list", inputs: ["items", "isLoading", "hasMore", "trackBy"], outputs: ["loadMore"] }, { kind: "component", type: PollVoteComponent, selector: "stream-poll-vote", inputs: ["vote"] }, { kind: "pipe", type: i6.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: PollVoteResultsListComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: PollVoteResultsListComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'stream-poll-vote-results-list', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"str-chat__poll-option str-chat__poll-option--full-vote-list\">\n  <div class=\"str-chat__poll-option__header\">\n    <div class=\"str-chat__poll-option__option-text\">{{ option?.text }}</div>\n    <div class=\"str-chat__poll-result-option-vote-counter\">\n      <div\n        *ngIf=\"isWinner\"\n        class=\"str-chat__poll-result-winning-option-icon\"\n      ></div>\n      <span class=\"str-chat__poll-result-option-vote-count\">\n        {{ 'streamChat.{{ count }} votes' | translate:{count: voteCount ?? 0} }}\n      </span>\n    </div>\n  </div>\n  <stream-paginated-list\n    class=\"str-chat__poll-vote-listing\"\n    [items]=\"votes\"\n    [hasMore]=\"next !== undefined\"\n    [isLoading]=\"isLoading\"\n    [trackBy]=\"trackByVoteId\"\n    (loadMore)=\"loadVotes()\"\n  >\n    <ng-template let-vote=\"item\">\n      <stream-poll-vote [vote]=\"vote\"></stream-poll-vote>\n    </ng-template>\n  </stream-paginated-list>\n</div>\n" }]
+            args: [{ selector: 'stream-poll-vote-results-list', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"str-chat__poll-option str-chat__poll-option--full-vote-list\">\n  <div class=\"str-chat__poll-option__header\">\n    <div class=\"str-chat__poll-option__option-text\">{{ option?.text }}</div>\n    <div class=\"str-chat__poll-result-option-vote-counter\">\n      <div\n        *ngIf=\"isWinner\"\n        class=\"str-chat__poll-result-winning-option-icon\"\n      ></div>\n      <span class=\"str-chat__poll-result-option-vote-count\">\n        {{ 'streamChat.{{ count }} votes' | translate:{count: voteCount ?? 0} }}\n      </span>\n    </div>\n  </div>\n  <stream-paginated-list\n    class=\"str-chat__poll-vote-listing\"\n    [items]=\"votes\"\n    [hasMore]=\"next !== undefined\"\n    [isLoading]=\"isLoading\"\n    [trackBy]=\"trackByVoteId\"\n    (loadMore)=\"loadVotes()\"\n  >\n    <ng-template let-vote=\"item\">\n      <stream-poll-vote [vote]=\"vote\" />\n    </ng-template>\n  </stream-paginated-list>\n</div>\n" }]
         }], propDecorators: { option: [{
                 type: Input
             }] } });
@@ -9887,12 +9880,12 @@ class PollResultsListComponent extends BasePollComponent {
     trackByVoteId(_, vote) {
         return vote.id;
     }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: PollResultsListComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: PollResultsListComponent, selector: "stream-poll-results-list", host: { properties: { "class": "this.class" } }, usesInheritance: true, ngImport: i0, template: "<div\n  class=\"str-chat__modal__poll-results\"\n  [class.str-chat__modal__poll-results--option-detail]=\"optionToView\"\n>\n  <div class=\"str-chat__modal-header\">\n    <!-- eslint-disable-next-line @angular-eslint/template/elements-content -->\n    <button\n      *ngIf=\"optionToView\"\n      class=\"str-chat__modal-header__go-back-button\"\n      (click)=\"optionToView = undefined\"\n    ></button>\n    <div class=\"str-chat__modal-header__title\" translate>\n      streamChat.Poll results\n    </div>\n  </div>\n  <ng-container *ngIf=\"optionToView; else allOptions\">\n    <div class=\"str-chat__modal__poll-results__body\">\n      <stream-poll-vote-results-list\n        [option]=\"optionToView\"\n        [messageId]=\"messageId\"\n        [pollId]=\"pollId\"\n      />\n    </div>\n  </ng-container>\n  <ng-template #allOptions>\n    <div class=\"str-chat__modal__poll-results__body\">\n      <div class=\"str-chat__modal__poll-results__title\">{{ name }}</div>\n      <div class=\"str-chat__modal__poll-results__option-list\">\n        <div\n          *ngFor=\"let option of options; trackBy: trackByOptionId\"\n          class=\"str-chat__poll-option\"\n        >\n          <div class=\"str-chat__poll-option__header\">\n            <div class=\"str-chat__poll-option__option-text\">\n              {{ option.text }}\n            </div>\n            <div class=\"str-chat__poll-result-option-vote-counter\">\n              <div\n                *ngIf=\"isWinner(option.id)\"\n                class=\"str-chat__poll-result-winning-option-icon\"\n              ></div>\n              <span class=\"str-chat__poll-result-option-vote-count\">\n                {{ 'streamChat.{{ count }} votes' | translate:{count:\n                voteCountsByOption[option.id] ?? 0} }}\n              </span>\n            </div>\n          </div>\n          <ng-container *ngIf=\"latestVotesByOption[option?.id ?? '']\">\n            <div class=\"str-chat__poll-vote-listing\">\n              <ng-container\n                *ngFor=\"\n                  let vote of latestVotesByOption[option?.id ?? '']\n                    | slice : 0 : votePreviewCount;\n                  trackBy: trackByVoteId\n                \"\n              >\n                <stream-poll-vote [vote]=\"vote\" />\n              </ng-container>\n            </div>\n          </ng-container>\n          <button\n            *ngIf=\"\n              voteCountsByOption[option?.id ?? ''] > votePreviewCount &&\n              canQueryVotes\n            \"\n            class=\"str-chat__poll-option__show-all-votes-button\"\n            translate\n            (click)=\"optionToView = option\"\n          >\n            streamChat.Show all\n          </button>\n        </div>\n      </div>\n    </div>\n  </ng-template>\n</div>\n", dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i6.TranslateDirective, selector: "[translate],[ngx-translate]", inputs: ["translate", "translateParams"] }, { kind: "component", type: PollVoteResultsListComponent, selector: "stream-poll-vote-results-list", inputs: ["option"] }, { kind: "component", type: PollVoteComponent, selector: "stream-poll-vote", inputs: ["vote"] }, { kind: "pipe", type: i1.SlicePipe, name: "slice" }, { kind: "pipe", type: i6.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-PollResultsListComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: PollResultsListComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-PollResultsListComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.4", type: PollResultsListComponent, selector: "stream-poll-results-list", host: { properties: { "class": "this.class" } }, usesInheritance: true, ngImport: i0, template: "<div\n  class=\"str-chat__modal__poll-results\"\n  [class.str-chat__modal__poll-results--option-detail]=\"optionToView\"\n>\n  <div class=\"str-chat__modal-header\">\n    <!-- eslint-disable-next-line @angular-eslint/template/accessibility-elements-content -->\n    <button\n      *ngIf=\"optionToView\"\n      class=\"str-chat__modal-header__go-back-button\"\n      (click)=\"optionToView = undefined\"\n    ></button>\n    <div class=\"str-chat__modal-header__title\" translate>\n      streamChat.Poll results\n    </div>\n  </div>\n  <ng-container *ngIf=\"optionToView; else allOptions\">\n    <div class=\"str-chat__modal__poll-results__body\">\n      <stream-poll-vote-results-list\n        [option]=\"optionToView\"\n        [messageId]=\"messageId\"\n        [pollId]=\"pollId\"\n      ></stream-poll-vote-results-list>\n    </div>\n  </ng-container>\n  <ng-template #allOptions>\n    <div class=\"str-chat__modal__poll-results__body\">\n      <div class=\"str-chat__modal__poll-results__title\">{{ name }}</div>\n      <div class=\"str-chat__modal__poll-results__option-list\">\n        <div\n          *ngFor=\"let option of options; trackBy: trackByOptionId\"\n          class=\"str-chat__poll-option\"\n        >\n          <div class=\"str-chat__poll-option__header\">\n            <div class=\"str-chat__poll-option__option-text\">\n              {{ option.text }}\n            </div>\n            <div class=\"str-chat__poll-result-option-vote-counter\">\n              <div\n                *ngIf=\"isWinner(option.id)\"\n                class=\"str-chat__poll-result-winning-option-icon\"\n              ></div>\n              <span class=\"str-chat__poll-result-option-vote-count\">\n                {{ 'streamChat.{{ count }} votes' | translate:{count:\n                voteCountsByOption[option.id] ?? 0} }}\n              </span>\n            </div>\n          </div>\n          <ng-container *ngIf=\"latestVotesByOption[option?.id ?? '']\">\n            <div class=\"str-chat__poll-vote-listing\">\n              <ng-container\n                *ngFor=\"\n                  let vote of latestVotesByOption[option?.id ?? '']\n                    | slice : 0 : votePreviewCount;\n                  trackBy: trackByVoteId\n                \"\n              >\n                <stream-poll-vote [vote]=\"vote\"></stream-poll-vote>\n              </ng-container>\n            </div>\n          </ng-container>\n          <button\n            *ngIf=\"\n              voteCountsByOption[option?.id ?? ''] > votePreviewCount &&\n              canQueryVotes\n            \"\n            class=\"str-chat__poll-option__show-all-votes-button\"\n            translate\n            (click)=\"optionToView = option\"\n          >\n            streamChat.Show all\n          </button>\n        </div>\n      </div>\n    </div>\n  </ng-template>\n</div>\n", dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i6.TranslateDirective, selector: "[translate],[ngx-translate]", inputs: ["translate", "translateParams"] }, { kind: "component", type: PollVoteResultsListComponent, selector: "stream-poll-vote-results-list", inputs: ["option"] }, { kind: "component", type: PollVoteComponent, selector: "stream-poll-vote", inputs: ["vote"] }, { kind: "pipe", type: i1.SlicePipe, name: "slice" }, { kind: "pipe", type: i6.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: PollResultsListComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: PollResultsListComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'stream-poll-results-list', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div\n  class=\"str-chat__modal__poll-results\"\n  [class.str-chat__modal__poll-results--option-detail]=\"optionToView\"\n>\n  <div class=\"str-chat__modal-header\">\n    <!-- eslint-disable-next-line @angular-eslint/template/accessibility-elements-content -->\n    <button\n      *ngIf=\"optionToView\"\n      class=\"str-chat__modal-header__go-back-button\"\n      (click)=\"optionToView = undefined\"\n    ></button>\n    <div class=\"str-chat__modal-header__title\" translate>\n      streamChat.Poll results\n    </div>\n  </div>\n  <ng-container *ngIf=\"optionToView; else allOptions\">\n    <div class=\"str-chat__modal__poll-results__body\">\n      <stream-poll-vote-results-list\n        [option]=\"optionToView\"\n        [messageId]=\"messageId\"\n        [pollId]=\"pollId\"\n      ></stream-poll-vote-results-list>\n    </div>\n  </ng-container>\n  <ng-template #allOptions>\n    <div class=\"str-chat__modal__poll-results__body\">\n      <div class=\"str-chat__modal__poll-results__title\">{{ name }}</div>\n      <div class=\"str-chat__modal__poll-results__option-list\">\n        <div\n          *ngFor=\"let option of options; trackBy: trackByOptionId\"\n          class=\"str-chat__poll-option\"\n        >\n          <div class=\"str-chat__poll-option__header\">\n            <div class=\"str-chat__poll-option__option-text\">\n              {{ option.text }}\n            </div>\n            <div class=\"str-chat__poll-result-option-vote-counter\">\n              <div\n                *ngIf=\"isWinner(option.id)\"\n                class=\"str-chat__poll-result-winning-option-icon\"\n              ></div>\n              <span class=\"str-chat__poll-result-option-vote-count\">\n                {{ 'streamChat.{{ count }} votes' | translate:{count:\n                voteCountsByOption[option.id] ?? 0} }}\n              </span>\n            </div>\n          </div>\n          <ng-container *ngIf=\"latestVotesByOption[option?.id ?? '']\">\n            <div class=\"str-chat__poll-vote-listing\">\n              <ng-container\n                *ngFor=\"\n                  let vote of latestVotesByOption[option?.id ?? '']\n                    | slice : 0 : votePreviewCount;\n                  trackBy: trackByVoteId\n                \"\n              >\n                <stream-poll-vote [vote]=\"vote\"></stream-poll-vote>\n              </ng-container>\n            </div>\n          </ng-container>\n          <button\n            *ngIf=\"\n              voteCountsByOption[option?.id ?? ''] > votePreviewCount &&\n              canQueryVotes\n            \"\n            class=\"str-chat__poll-option__show-all-votes-button\"\n            translate\n            (click)=\"optionToView = option\"\n          >\n            streamChat.Show all\n          </button>\n        </div>\n      </div>\n    </div>\n  </ng-template>\n</div>\n" }]
+            args: [{ selector: 'stream-poll-results-list', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div\n  class=\"str-chat__modal__poll-results\"\n  [class.str-chat__modal__poll-results--option-detail]=\"optionToView\"\n>\n  <div class=\"str-chat__modal-header\">\n    <!-- eslint-disable-next-line @angular-eslint/template/elements-content -->\n    <button\n      *ngIf=\"optionToView\"\n      class=\"str-chat__modal-header__go-back-button\"\n      (click)=\"optionToView = undefined\"\n    ></button>\n    <div class=\"str-chat__modal-header__title\" translate>\n      streamChat.Poll results\n    </div>\n  </div>\n  <ng-container *ngIf=\"optionToView; else allOptions\">\n    <div class=\"str-chat__modal__poll-results__body\">\n      <stream-poll-vote-results-list\n        [option]=\"optionToView\"\n        [messageId]=\"messageId\"\n        [pollId]=\"pollId\"\n      />\n    </div>\n  </ng-container>\n  <ng-template #allOptions>\n    <div class=\"str-chat__modal__poll-results__body\">\n      <div class=\"str-chat__modal__poll-results__title\">{{ name }}</div>\n      <div class=\"str-chat__modal__poll-results__option-list\">\n        <div\n          *ngFor=\"let option of options; trackBy: trackByOptionId\"\n          class=\"str-chat__poll-option\"\n        >\n          <div class=\"str-chat__poll-option__header\">\n            <div class=\"str-chat__poll-option__option-text\">\n              {{ option.text }}\n            </div>\n            <div class=\"str-chat__poll-result-option-vote-counter\">\n              <div\n                *ngIf=\"isWinner(option.id)\"\n                class=\"str-chat__poll-result-winning-option-icon\"\n              ></div>\n              <span class=\"str-chat__poll-result-option-vote-count\">\n                {{ 'streamChat.{{ count }} votes' | translate:{count:\n                voteCountsByOption[option.id] ?? 0} }}\n              </span>\n            </div>\n          </div>\n          <ng-container *ngIf=\"latestVotesByOption[option?.id ?? '']\">\n            <div class=\"str-chat__poll-vote-listing\">\n              <ng-container\n                *ngFor=\"\n                  let vote of latestVotesByOption[option?.id ?? '']\n                    | slice : 0 : votePreviewCount;\n                  trackBy: trackByVoteId\n                \"\n              >\n                <stream-poll-vote [vote]=\"vote\" />\n              </ng-container>\n            </div>\n          </ng-container>\n          <button\n            *ngIf=\"\n              voteCountsByOption[option?.id ?? ''] > votePreviewCount &&\n              canQueryVotes\n            \"\n            class=\"str-chat__poll-option__show-all-votes-button\"\n            translate\n            (click)=\"optionToView = option\"\n          >\n            streamChat.Show all\n          </button>\n        </div>\n      </div>\n    </div>\n  </ng-template>\n</div>\n" }]
         }], propDecorators: { class: [{
                 type: HostBinding,
                 args: ['class']
@@ -9960,12 +9953,12 @@ class PollAnswersListComponent extends BasePollComponent {
         });
         return unsubscribe;
     }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: PollAnswersListComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: PollAnswersListComponent, selector: "stream-poll-answers-list", outputs: { upsertOwnAnswer: "upsertOwnAnswer" }, host: { properties: { "class": "this.class" } }, usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<div class=\"str-chat__modal__poll-answer-list\">\n  <div class=\"str-chat__modal-header\">\n    <div class=\"str-chat__modal-header__title\" translate>\n      streamChat.Poll comments\n    </div>\n  </div>\n  <div class=\"str-chat__modal__poll-answer-list__body\">\n    <div class=\"str-chat__poll-answer-list\">\n      <stream-paginated-list\n        class=\"str-chat__poll-answer-list\"\n        [items]=\"answers\"\n        [hasMore]=\"next !== undefined\"\n        [isLoading]=\"isLoading\"\n        [trackBy]=\"trackByAnswerId\"\n        (loadMore)=\"queryAnswers()\"\n      >\n        <ng-template let-answer=\"item\">\n          <div class=\"str-chat__poll-answer\">\n            <p *ngIf=\"answer.answer_text\" class=\"str-chat__poll-answer__text\">\n              {{ answer.answer_text }}\n            </p>\n            <stream-poll-vote [vote]=\"answer\" />\n          </div>\n        </ng-template>\n      </stream-paginated-list>\n      <button\n        *ngIf=\"!isClosed\"\n        class=\"str-chat__poll-action\"\n        (click)=\"upsertOwnAnswer.emit()\"\n      >\n        {{\n          (ownAnswer\n            ? \"streamChat.Update your comment\"\n            : \"streamChat.Add a comment\"\n          ) | translate\n        }}\n      </button>\n    </div>\n  </div>\n</div>\n", dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i6.TranslateDirective, selector: "[translate],[ngx-translate]", inputs: ["translate", "translateParams"] }, { kind: "component", type: PaginatedListComponent, selector: "stream-paginated-list", inputs: ["items", "isLoading", "hasMore", "trackBy"], outputs: ["loadMore"] }, { kind: "component", type: PollVoteComponent, selector: "stream-poll-vote", inputs: ["vote"] }, { kind: "pipe", type: i6.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-PollAnswersListComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: PollAnswersListComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-PollAnswersListComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.4", type: PollAnswersListComponent, selector: "stream-poll-answers-list", outputs: { upsertOwnAnswer: "upsertOwnAnswer" }, host: { properties: { "class": "this.class" } }, usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<div class=\"str-chat__modal__poll-answer-list\">\n  <div class=\"str-chat__modal-header\">\n    <div class=\"str-chat__modal-header__title\" translate>\n      streamChat.Poll comments\n    </div>\n  </div>\n  <div class=\"str-chat__modal__poll-answer-list__body\">\n    <div class=\"str-chat__poll-answer-list\">\n      <stream-paginated-list\n        class=\"str-chat__poll-answer-list\"\n        [items]=\"answers\"\n        [hasMore]=\"next !== undefined\"\n        [isLoading]=\"isLoading\"\n        [trackBy]=\"trackByAnswerId\"\n        (loadMore)=\"queryAnswers()\"\n      >\n        <ng-template let-answer=\"item\">\n          <div class=\"str-chat__poll-answer\">\n            <p *ngIf=\"answer.answer_text\" class=\"str-chat__poll-answer__text\">\n              {{ answer.answer_text }}\n            </p>\n            <stream-poll-vote [vote]=\"answer\"></stream-poll-vote>\n          </div>\n        </ng-template>\n      </stream-paginated-list>\n      <button\n        *ngIf=\"!isClosed\"\n        class=\"str-chat__poll-action\"\n        (click)=\"upsertOwnAnswer.emit()\"\n      >\n        {{\n          (ownAnswer\n            ? \"streamChat.Update your comment\"\n            : \"streamChat.Add a comment\"\n          ) | translate\n        }}\n      </button>\n    </div>\n  </div>\n</div>\n", dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i6.TranslateDirective, selector: "[translate],[ngx-translate]", inputs: ["translate", "translateParams"] }, { kind: "component", type: PaginatedListComponent, selector: "stream-paginated-list", inputs: ["items", "isLoading", "hasMore", "trackBy"], outputs: ["loadMore"] }, { kind: "component", type: PollVoteComponent, selector: "stream-poll-vote", inputs: ["vote"] }, { kind: "pipe", type: i6.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: PollAnswersListComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: PollAnswersListComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'stream-poll-answers-list', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"str-chat__modal__poll-answer-list\">\n  <div class=\"str-chat__modal-header\">\n    <div class=\"str-chat__modal-header__title\" translate>\n      streamChat.Poll comments\n    </div>\n  </div>\n  <div class=\"str-chat__modal__poll-answer-list__body\">\n    <div class=\"str-chat__poll-answer-list\">\n      <stream-paginated-list\n        class=\"str-chat__poll-answer-list\"\n        [items]=\"answers\"\n        [hasMore]=\"next !== undefined\"\n        [isLoading]=\"isLoading\"\n        [trackBy]=\"trackByAnswerId\"\n        (loadMore)=\"queryAnswers()\"\n      >\n        <ng-template let-answer=\"item\">\n          <div class=\"str-chat__poll-answer\">\n            <p *ngIf=\"answer.answer_text\" class=\"str-chat__poll-answer__text\">\n              {{ answer.answer_text }}\n            </p>\n            <stream-poll-vote [vote]=\"answer\"></stream-poll-vote>\n          </div>\n        </ng-template>\n      </stream-paginated-list>\n      <button\n        *ngIf=\"!isClosed\"\n        class=\"str-chat__poll-action\"\n        (click)=\"upsertOwnAnswer.emit()\"\n      >\n        {{\n          (ownAnswer\n            ? \"streamChat.Update your comment\"\n            : \"streamChat.Add a comment\"\n          ) | translate\n        }}\n      </button>\n    </div>\n  </div>\n</div>\n" }]
+            args: [{ selector: 'stream-poll-answers-list', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"str-chat__modal__poll-answer-list\">\n  <div class=\"str-chat__modal-header\">\n    <div class=\"str-chat__modal-header__title\" translate>\n      streamChat.Poll comments\n    </div>\n  </div>\n  <div class=\"str-chat__modal__poll-answer-list__body\">\n    <div class=\"str-chat__poll-answer-list\">\n      <stream-paginated-list\n        class=\"str-chat__poll-answer-list\"\n        [items]=\"answers\"\n        [hasMore]=\"next !== undefined\"\n        [isLoading]=\"isLoading\"\n        [trackBy]=\"trackByAnswerId\"\n        (loadMore)=\"queryAnswers()\"\n      >\n        <ng-template let-answer=\"item\">\n          <div class=\"str-chat__poll-answer\">\n            <p *ngIf=\"answer.answer_text\" class=\"str-chat__poll-answer__text\">\n              {{ answer.answer_text }}\n            </p>\n            <stream-poll-vote [vote]=\"answer\" />\n          </div>\n        </ng-template>\n      </stream-paginated-list>\n      <button\n        *ngIf=\"!isClosed\"\n        class=\"str-chat__poll-action\"\n        (click)=\"upsertOwnAnswer.emit()\"\n      >\n        {{\n          (ownAnswer\n            ? \"streamChat.Update your comment\"\n            : \"streamChat.Add a comment\"\n          ) | translate\n        }}\n      </button>\n    </div>\n  </div>\n</div>\n" }]
         }], propDecorators: { class: [{
                 type: HostBinding,
                 args: ['class']
@@ -10012,10 +10005,10 @@ class UpsertAnswerComponent extends BasePollComponent {
     stateStoreSelector(_, __) {
         return () => { };
     }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: UpsertAnswerComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: UpsertAnswerComponent, selector: "stream-upsert-answer", inputs: { answer: "answer", closeModal: "closeModal" }, host: { properties: { "class": "this.class" } }, usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<div\n  class=\"str-chat__dialog str-chat__dialog--form str-chat__prompt-dialog str-chat__modal__poll-add-comment\"\n>\n  <div class=\"str-chat__dialog__body\">\n    <div class=\"str-chat__dialog__title\">\n      {{\n        (answer ? \"streamChat.Update your comment\" : \"streamChat.Add a comment\")\n          | translate\n      }}\n    </div>\n    <form [formGroup]=\"formGroup\" (ngSubmit)=\"addComment()\">\n      <div class=\"str-chat__dialog__field\">\n        <input formControlName=\"comment\" id=\"comment\" type=\"text\" />\n      </div>\n      <div class=\"str-chat__dialog__controls\">\n        <button\n          class=\"str-chat__dialog__controls-button str-chat__dialog__controls-button--cancel\"\n          onClick=\"{close}\"\n          type=\"button\"\n          (click)=\"closeModal()\"\n        >\n          {{ \"streamChat.Cancel\" | translate }}\n        </button>\n        <button\n          class=\"str-chat__dialog__controls-button str-chat__dialog__controls-button--submit\"\n          type=\"submit\"\n          [disabled]=\"formGroup.invalid\"\n        >\n          {{ \"streamChat.Send\" | translate }}\n        </button>\n      </div>\n    </form>\n  </div>\n</div>\n", dependencies: [{ kind: "directive", type: i1$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "pipe", type: i6.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-UpsertAnswerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: UpsertAnswerComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-UpsertAnswerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.4", type: UpsertAnswerComponent, selector: "stream-upsert-answer", inputs: { answer: "answer", closeModal: "closeModal" }, host: { properties: { "class": "this.class" } }, usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<div\n  class=\"str-chat__dialog str-chat__dialog--form str-chat__prompt-dialog str-chat__modal__poll-add-comment\"\n>\n  <div class=\"str-chat__dialog__body\">\n    <div class=\"str-chat__dialog__title\">\n      {{\n        (answer ? \"streamChat.Update your comment\" : \"streamChat.Add a comment\")\n          | translate\n      }}\n    </div>\n    <form [formGroup]=\"formGroup\" (ngSubmit)=\"addComment()\">\n      <div class=\"str-chat__dialog__field\">\n        <input formControlName=\"comment\" id=\"comment\" type=\"text\" />\n      </div>\n      <div class=\"str-chat__dialog__controls\">\n        <button\n          class=\"str-chat__dialog__controls-button str-chat__dialog__controls-button--cancel\"\n          onClick=\"{close}\"\n          type=\"button\"\n          (click)=\"closeModal()\"\n        >\n          {{ \"streamChat.Cancel\" | translate }}\n        </button>\n        <button\n          class=\"str-chat__dialog__controls-button str-chat__dialog__controls-button--submit\"\n          type=\"submit\"\n          [disabled]=\"formGroup.invalid\"\n        >\n          {{ \"streamChat.Send\" | translate }}\n        </button>\n      </div>\n    </form>\n  </div>\n</div>\n", dependencies: [{ kind: "directive", type: i1$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "pipe", type: i6.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: UpsertAnswerComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: UpsertAnswerComponent, decorators: [{
             type: Component,
             args: [{ selector: 'stream-upsert-answer', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div\n  class=\"str-chat__dialog str-chat__dialog--form str-chat__prompt-dialog str-chat__modal__poll-add-comment\"\n>\n  <div class=\"str-chat__dialog__body\">\n    <div class=\"str-chat__dialog__title\">\n      {{\n        (answer ? \"streamChat.Update your comment\" : \"streamChat.Add a comment\")\n          | translate\n      }}\n    </div>\n    <form [formGroup]=\"formGroup\" (ngSubmit)=\"addComment()\">\n      <div class=\"str-chat__dialog__field\">\n        <input formControlName=\"comment\" id=\"comment\" type=\"text\" />\n      </div>\n      <div class=\"str-chat__dialog__controls\">\n        <button\n          class=\"str-chat__dialog__controls-button str-chat__dialog__controls-button--cancel\"\n          onClick=\"{close}\"\n          type=\"button\"\n          (click)=\"closeModal()\"\n        >\n          {{ \"streamChat.Cancel\" | translate }}\n        </button>\n        <button\n          class=\"str-chat__dialog__controls-button str-chat__dialog__controls-button--submit\"\n          type=\"submit\"\n          [disabled]=\"formGroup.invalid\"\n        >\n          {{ \"streamChat.Send\" | translate }}\n        </button>\n      </div>\n    </form>\n  </div>\n</div>\n" }]
         }], propDecorators: { class: [{
@@ -10087,10 +10080,10 @@ class AddOptionComponent extends BasePollComponent {
         });
         return unsubscribe;
     }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: AddOptionComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: AddOptionComponent, selector: "stream-add-option", inputs: { closeModal: "closeModal" }, host: { properties: { "class": "this.class" } }, usesInheritance: true, ngImport: i0, template: "<div\n  class=\"str-chat__dialog str-chat__dialog--form str-chat__prompt-dialog str-chat__modal__suggest-poll-option\"\n>\n  <div class=\"str-chat__dialog__body\">\n    <div class=\"str-chat__dialog__title\">\n      {{ \"streamChat.Suggest an option\" | translate }}\n    </div>\n    <form [formGroup]=\"formGroup\">\n      <div class=\"str-chat__dialog__field\">\n        <input formControlName=\"text\" id=\"text\" type=\"text\" />\n        <div class=\"str-chat__form-field-error\">\n          {{\n            formGroup.get(\"text\")?.errors?.duplicate\n              ? (\"streamChat.Option already exists\" | translate)\n              : \"\"\n          }}\n        </div>\n      </div>\n      <div class=\"str-chat__dialog__controls\">\n        <button\n          class=\"str-chat__dialog__controls-button str-chat__dialog__controls-button--cancel\"\n          type=\"button\"\n          (click)=\"closeModal()\"\n          (keyup.enter)=\"closeModal()\"\n        >\n          {{ \"streamChat.Cancel\" | translate }}\n        </button>\n        <button\n          class=\"str-chat__dialog__controls-button str-chat__dialog__controls-button--submit\"\n          type=\"submit\"\n          (click)=\"addOption()\"\n          (keyup.enter)=\"addOption()\"\n          [disabled]=\"formGroup.invalid\"\n        >\n          {{ \"streamChat.Send\" | translate }}\n        </button>\n      </div>\n    </form>\n  </div>\n</div>\n", dependencies: [{ kind: "directive", type: i1$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "pipe", type: i6.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-AddOptionComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: AddOptionComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-AddOptionComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.4", type: AddOptionComponent, selector: "stream-add-option", inputs: { closeModal: "closeModal" }, host: { properties: { "class": "this.class" } }, usesInheritance: true, ngImport: i0, template: "<div\n  class=\"str-chat__dialog str-chat__dialog--form str-chat__prompt-dialog str-chat__modal__suggest-poll-option\"\n>\n  <div class=\"str-chat__dialog__body\">\n    <div class=\"str-chat__dialog__title\">\n      {{ \"streamChat.Suggest an option\" | translate }}\n    </div>\n    <form [formGroup]=\"formGroup\">\n      <div class=\"str-chat__dialog__field\">\n        <input formControlName=\"text\" id=\"text\" type=\"text\" />\n        <div class=\"str-chat__form-field-error\">\n          {{\n            formGroup.get(\"text\")?.errors?.duplicate\n              ? (\"streamChat.Option already exists\" | translate)\n              : \"\"\n          }}\n        </div>\n      </div>\n      <div class=\"str-chat__dialog__controls\">\n        <button\n          class=\"str-chat__dialog__controls-button str-chat__dialog__controls-button--cancel\"\n          type=\"button\"\n          (click)=\"closeModal()\"\n          (keyup.enter)=\"closeModal()\"\n        >\n          {{ \"streamChat.Cancel\" | translate }}\n        </button>\n        <button\n          class=\"str-chat__dialog__controls-button str-chat__dialog__controls-button--submit\"\n          type=\"submit\"\n          (click)=\"addOption()\"\n          (keyup.enter)=\"addOption()\"\n          [disabled]=\"formGroup.invalid\"\n        >\n          {{ \"streamChat.Send\" | translate }}\n        </button>\n      </div>\n    </form>\n  </div>\n</div>\n", dependencies: [{ kind: "directive", type: i1$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "pipe", type: i6.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: AddOptionComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: AddOptionComponent, decorators: [{
             type: Component,
             args: [{ selector: 'stream-add-option', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div\n  class=\"str-chat__dialog str-chat__dialog--form str-chat__prompt-dialog str-chat__modal__suggest-poll-option\"\n>\n  <div class=\"str-chat__dialog__body\">\n    <div class=\"str-chat__dialog__title\">\n      {{ \"streamChat.Suggest an option\" | translate }}\n    </div>\n    <form [formGroup]=\"formGroup\">\n      <div class=\"str-chat__dialog__field\">\n        <input formControlName=\"text\" id=\"text\" type=\"text\" />\n        <div class=\"str-chat__form-field-error\">\n          {{\n            formGroup.get(\"text\")?.errors?.duplicate\n              ? (\"streamChat.Option already exists\" | translate)\n              : \"\"\n          }}\n        </div>\n      </div>\n      <div class=\"str-chat__dialog__controls\">\n        <button\n          class=\"str-chat__dialog__controls-button str-chat__dialog__controls-button--cancel\"\n          type=\"button\"\n          (click)=\"closeModal()\"\n          (keyup.enter)=\"closeModal()\"\n        >\n          {{ \"streamChat.Cancel\" | translate }}\n        </button>\n        <button\n          class=\"str-chat__dialog__controls-button str-chat__dialog__controls-button--submit\"\n          type=\"submit\"\n          (click)=\"addOption()\"\n          (keyup.enter)=\"addOption()\"\n          [disabled]=\"formGroup.invalid\"\n        >\n          {{ \"streamChat.Send\" | translate }}\n        </button>\n      </div>\n    </form>\n  </div>\n</div>\n" }]
         }], propDecorators: { class: [{
@@ -10190,13 +10183,13 @@ class PollActionsComponent extends BasePollComponent {
             content: this[this.selectedAction],
         };
     }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: PollActionsComponent, deps: [{ token: CustomTemplatesService }, { token: ChatClientService }, { token: i0.ChangeDetectorRef }, { token: ChannelService }, { token: NotificationService }, { token: MessageActionsService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: PollActionsComponent, selector: "stream-poll-actions", inputs: { maxOptionsDisplayed: "maxOptionsDisplayed", maxPollOptions: "maxPollOptions" }, viewQueries: [{ propertyName: "allOptions", first: true, predicate: ["allOptions"], descendants: true }, { propertyName: "suggestOption", first: true, predicate: ["suggestOption"], descendants: true }, { propertyName: "addAnswer", first: true, predicate: ["addAnswer"], descendants: true }, { propertyName: "viewComments", first: true, predicate: ["viewComments"], descendants: true }, { propertyName: "viewResults", first: true, predicate: ["viewResults"], descendants: true }, { propertyName: "endVote", first: true, predicate: ["endVote"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"str-chat__poll-actions\">\n  <ng-container\n    *ngIf=\"maxOptionsDisplayed && options.length > maxOptionsDisplayed\"\n  >\n    <button class=\"str-chat__poll-action\" (click)=\"modalOpened('allOptions')\">\n      {{ \"streamChat.See all options ({{count}})\" | translate:{count:\n      options.length} }}\n    </button>\n  </ng-container>\n  <ng-container\n    *ngIf=\"\n      allowUserSuggestions &&\n      canVote &&\n      !isClosed &&\n      options.length < maxPollOptions\n    \"\n  >\n    <button\n      class=\"str-chat__poll-action\"\n      (click)=\"modalOpened('suggestOption')\"\n    >\n      {{ \"streamChat.Suggest an option\" | translate }}\n    </button>\n  </ng-container>\n  <ng-container *ngIf=\"allowAnswers && canVote && !isClosed\">\n    <button\n      class=\"str-chat__poll-action\"\n      (click)=\"modalOpened('addAnswer')\"\n      (keyup.enter)=\"modalOpened('addAnswer')\"\n    >\n      <ng-container *ngIf=\"ownAnwer; else newAnswer\">\n        {{ \"streamChat.Update your comment\" | translate }}\n      </ng-container>\n      <ng-template #newAnswer>\n        {{ \"streamChat.Add a comment\" | translate }}\n      </ng-template>\n    </button>\n  </ng-container>\n  <ng-container *ngIf=\"answerCount > 0 && canQueryVotes\">\n    <button class=\"str-chat__poll-action\" (click)=\"modalOpened('viewComments')\">\n      {{ (answerCount === 1 ? \"streamChat.View {{ count }} comment\" :\n      \"streamChat.View {{ count }} comments\") | translate:{count: answerCount}\n      }}\n    </button>\n  </ng-container>\n  <ng-container *ngIf=\"canQueryVotes\">\n    <button class=\"str-chat__poll-action\" (click)=\"modalOpened('viewResults')\">\n      {{ \"streamChat.View results\" | translate }}\n    </button>\n  </ng-container>\n  <ng-container *ngIf=\"isOwnPoll && !isClosed\">\n    <button class=\"str-chat__poll-action\" (click)=\"modalOpened('endVote')\">\n      {{ \"streamChat.End vote\" | translate }}\n    </button>\n  </ng-container>\n</div>\n\n<ng-container *ngIf=\"selectedAction\">\n  <ng-container\n    *ngTemplateOutlet=\"\n      (customTemplatesService.modalTemplate$ | async) || defaultModal;\n      context: getModalContext()\n    \"\n  />\n</ng-container>\n\n<ng-template\n  #defaultModal\n  let-isOpen=\"isOpen\"\n  let-isOpenChangeHandler=\"isOpenChangeHandler\"\n  let-content=\"content\"\n>\n  <stream-modal\n    class=\"str-chat__poll-actions str-chat-angular__poll-actions\"\n    [isOpen]=\"isOpen\"\n    [content]=\"content\"\n    (isOpenChange)=\"isOpenChangeHandler($event)\"\n  />\n</ng-template>\n\n<ng-template #allOptions>\n  <div class=\"str-chat__modal__poll-option-list str-chat-angular__poll-actions\">\n    <div class=\"str-chat__modal-header\">\n      <div class=\"str-chat__modal-header__title\">\n        {{ \"streamChat.Poll options\" | translate }}\n      </div>\n    </div>\n    <div class=\"str-chat__modal__poll-option-list__body\">\n      <div class=\"str-chat__modal__poll-option-list__title\">{{ name }}</div>\n      <stream-poll-options-list\n        [pollId]=\"pollId\"\n        [messageId]=\"messageId\"\n        [maxOptionsDisplayed]=\"undefined\"\n      />\n      <stream-notification-list />\n    </div>\n  </div>\n</ng-template>\n<ng-template #suggestOption>\n  <stream-add-option\n    [pollId]=\"pollId\"\n    [messageId]=\"messageId\"\n    [closeModal]=\"modalClosed\"\n  />\n  <stream-notification-list />\n</ng-template>\n<ng-template #addAnswer>\n  <stream-upsert-answer\n    [pollId]=\"pollId\"\n    [messageId]=\"messageId\"\n    [answer]=\"ownAnwer\"\n    [closeModal]=\"modalClosed\"\n  />\n  <stream-notification-list />\n</ng-template>\n<ng-template #viewComments>\n  <stream-poll-answers-list\n    (upsertOwnAnswer)=\"modalOpened('addAnswer')\"\n    [pollId]=\"pollId\"\n    [messageId]=\"messageId\"\n  />\n  <stream-notification-list />\n</ng-template>\n<ng-template #viewResults>\n  <stream-poll-results-list [messageId]=\"messageId\" [pollId]=\"pollId\" />\n  <stream-notification-list />\n</ng-template>\n<ng-template #endVote>\n  <div\n    class=\"str-chat__dialog str-chat__dialog--prompt str-chat__modal__end-vote\"\n  >\n    <div class=\"str-chat__dialog__body\">\n      <div class=\"str-chat__dialog__title\" translate>streamChat.End vote</div>\n      <div class=\"str-chat__dialog__prompt\" translate>\n        streamChat.After a poll is closed, no more votes can be cast\n      </div>\n      <stream-notification-list />\n      <div class=\"str-chat__dialog__controls\">\n        <button\n          class=\"str-chat__dialog__controls-button\"\n          (click)=\"modalClosed()\"\n        >\n          {{ \"streamChat.Cancel\" | translate }}\n        </button>\n        <button class=\"str-chat__dialog__controls-button\" (click)=\"closePoll()\">\n          {{ \"streamChat.End vote\" | translate }}\n        </button>\n      </div>\n    </div>\n  </div>\n</ng-template>\n", dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i6.TranslateDirective, selector: "[translate],[ngx-translate]", inputs: ["translate", "translateParams"] }, { kind: "component", type: ModalComponent, selector: "stream-modal", inputs: ["isOpen", "content"], outputs: ["isOpenChange"] }, { kind: "component", type: NotificationListComponent, selector: "stream-notification-list" }, { kind: "component", type: PollOptionsListComponent, selector: "stream-poll-options-list", inputs: ["maxOptionsDisplayed"] }, { kind: "component", type: PollResultsListComponent, selector: "stream-poll-results-list" }, { kind: "component", type: PollAnswersListComponent, selector: "stream-poll-answers-list", outputs: ["upsertOwnAnswer"] }, { kind: "component", type: UpsertAnswerComponent, selector: "stream-upsert-answer", inputs: ["answer", "closeModal"] }, { kind: "component", type: AddOptionComponent, selector: "stream-add-option", inputs: ["closeModal"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "pipe", type: i6.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-PollActionsComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: PollActionsComponent, deps: [{ token: CustomTemplatesService }, { token: ChatClientService }, { token: i0.ChangeDetectorRef }, { token: ChannelService }, { token: NotificationService }, { token: MessageActionsService }], target: i0.ɵɵFactoryTarget.Component });
-PollActionsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.4", type: PollActionsComponent, selector: "stream-poll-actions", inputs: { maxOptionsDisplayed: "maxOptionsDisplayed", maxPollOptions: "maxPollOptions" }, viewQueries: [{ propertyName: "allOptions", first: true, predicate: ["allOptions"], descendants: true }, { propertyName: "suggestOption", first: true, predicate: ["suggestOption"], descendants: true }, { propertyName: "addAnswer", first: true, predicate: ["addAnswer"], descendants: true }, { propertyName: "viewComments", first: true, predicate: ["viewComments"], descendants: true }, { propertyName: "viewResults", first: true, predicate: ["viewResults"], descendants: true }, { propertyName: "endVote", first: true, predicate: ["endVote"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"str-chat__poll-actions\">\n  <ng-container\n    *ngIf=\"maxOptionsDisplayed && options.length > maxOptionsDisplayed\"\n  >\n    <button class=\"str-chat__poll-action\" (click)=\"modalOpened('allOptions')\">\n      {{ \"streamChat.See all options ({{count}})\" | translate:{count:\n      options.length} }}\n    </button>\n  </ng-container>\n  <ng-container\n    *ngIf=\"\n      allowUserSuggestions &&\n      canVote &&\n      !isClosed &&\n      options.length < maxPollOptions\n    \"\n  >\n    <button\n      class=\"str-chat__poll-action\"\n      (click)=\"modalOpened('suggestOption')\"\n    >\n      {{ \"streamChat.Suggest an option\" | translate }}\n    </button>\n  </ng-container>\n  <ng-container *ngIf=\"allowAnswers && canVote && !isClosed\">\n    <button\n      class=\"str-chat__poll-action\"\n      (click)=\"modalOpened('addAnswer')\"\n      (keyup.enter)=\"modalOpened('addAnswer')\"\n    >\n      <ng-container *ngIf=\"ownAnwer; else newAnswer\">\n        {{ \"streamChat.Update your comment\" | translate }}\n      </ng-container>\n      <ng-template #newAnswer>\n        {{ \"streamChat.Add a comment\" | translate }}\n      </ng-template>\n    </button>\n  </ng-container>\n  <ng-container *ngIf=\"answerCount > 0 && canQueryVotes\">\n    <button class=\"str-chat__poll-action\" (click)=\"modalOpened('viewComments')\">\n      {{ (answerCount === 1 ? \"streamChat.View {{ count }} comment\" :\n      \"streamChat.View {{ count }} comments\") | translate:{count: answerCount}\n      }}\n    </button>\n  </ng-container>\n  <ng-container *ngIf=\"canQueryVotes\">\n    <button class=\"str-chat__poll-action\" (click)=\"modalOpened('viewResults')\">\n      {{ \"streamChat.View results\" | translate }}\n    </button>\n  </ng-container>\n  <ng-container *ngIf=\"isOwnPoll && !isClosed\">\n    <button class=\"str-chat__poll-action\" (click)=\"modalOpened('endVote')\">\n      {{ \"streamChat.End vote\" | translate }}\n    </button>\n  </ng-container>\n</div>\n\n<ng-container *ngIf=\"selectedAction\">\n  <ng-container\n    *ngTemplateOutlet=\"\n      (customTemplatesService.modalTemplate$ | async) || defaultModal;\n      context: getModalContext()\n    \"\n  ></ng-container>\n</ng-container>\n\n<ng-template\n  #defaultModal\n  let-isOpen=\"isOpen\"\n  let-isOpenChangeHandler=\"isOpenChangeHandler\"\n  let-content=\"content\"\n>\n  <stream-modal\n    class=\"str-chat__poll-actions str-chat-angular__poll-actions\"\n    [isOpen]=\"isOpen\"\n    [content]=\"content\"\n    (isOpenChange)=\"isOpenChangeHandler($event)\"\n  >\n  </stream-modal>\n</ng-template>\n\n<ng-template #allOptions>\n  <div class=\"str-chat__modal__poll-option-list str-chat-angular__poll-actions\">\n    <div class=\"str-chat__modal-header\">\n      <div class=\"str-chat__modal-header__title\">\n        {{ \"streamChat.Poll options\" | translate }}\n      </div>\n    </div>\n    <div class=\"str-chat__modal__poll-option-list__body\">\n      <div class=\"str-chat__modal__poll-option-list__title\">{{ name }}</div>\n      <stream-poll-options-list\n        [pollId]=\"pollId\"\n        [messageId]=\"messageId\"\n        [maxOptionsDisplayed]=\"undefined\"\n      ></stream-poll-options-list>\n      <stream-notification-list></stream-notification-list>\n    </div>\n  </div>\n</ng-template>\n<ng-template #suggestOption>\n  <stream-add-option\n    [pollId]=\"pollId\"\n    [messageId]=\"messageId\"\n    [closeModal]=\"modalClosed\"\n  ></stream-add-option>\n  <stream-notification-list></stream-notification-list>\n</ng-template>\n<ng-template #addAnswer>\n  <stream-upsert-answer\n    [pollId]=\"pollId\"\n    [messageId]=\"messageId\"\n    [answer]=\"ownAnwer\"\n    [closeModal]=\"modalClosed\"\n  ></stream-upsert-answer>\n  <stream-notification-list></stream-notification-list>\n</ng-template>\n<ng-template #viewComments>\n  <stream-poll-answers-list\n    (upsertOwnAnswer)=\"modalOpened('addAnswer')\"\n    [pollId]=\"pollId\"\n    [messageId]=\"messageId\"\n  ></stream-poll-answers-list>\n  <stream-notification-list></stream-notification-list>\n</ng-template>\n<ng-template #viewResults>\n  <stream-poll-results-list\n    [messageId]=\"messageId\"\n    [pollId]=\"pollId\"\n  ></stream-poll-results-list>\n  <stream-notification-list></stream-notification-list>\n</ng-template>\n<ng-template #endVote>\n  <div\n    class=\"str-chat__dialog str-chat__dialog--prompt str-chat__modal__end-vote\"\n  >\n    <div class=\"str-chat__dialog__body\">\n      <div class=\"str-chat__dialog__title\" translate>streamChat.End vote</div>\n      <div class=\"str-chat__dialog__prompt\" translate>\n        streamChat.After a poll is closed, no more votes can be cast\n      </div>\n      <stream-notification-list></stream-notification-list>\n      <div class=\"str-chat__dialog__controls\">\n        <button\n          class=\"str-chat__dialog__controls-button\"\n          (click)=\"modalClosed()\"\n        >\n          {{ \"streamChat.Cancel\" | translate }}\n        </button>\n        <button class=\"str-chat__dialog__controls-button\" (click)=\"closePoll()\">\n          {{ \"streamChat.End vote\" | translate }}\n        </button>\n      </div>\n    </div>\n  </div>\n</ng-template>\n", dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i6.TranslateDirective, selector: "[translate],[ngx-translate]", inputs: ["translate", "translateParams"] }, { kind: "component", type: ModalComponent, selector: "stream-modal", inputs: ["isOpen", "content"], outputs: ["isOpenChange"] }, { kind: "component", type: NotificationListComponent, selector: "stream-notification-list" }, { kind: "component", type: PollOptionsListComponent, selector: "stream-poll-options-list", inputs: ["maxOptionsDisplayed"] }, { kind: "component", type: PollResultsListComponent, selector: "stream-poll-results-list" }, { kind: "component", type: PollAnswersListComponent, selector: "stream-poll-answers-list", outputs: ["upsertOwnAnswer"] }, { kind: "component", type: UpsertAnswerComponent, selector: "stream-upsert-answer", inputs: ["answer", "closeModal"] }, { kind: "component", type: AddOptionComponent, selector: "stream-add-option", inputs: ["closeModal"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "pipe", type: i6.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: PollActionsComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: PollActionsComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'stream-poll-actions', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"str-chat__poll-actions\">\n  <ng-container\n    *ngIf=\"maxOptionsDisplayed && options.length > maxOptionsDisplayed\"\n  >\n    <button class=\"str-chat__poll-action\" (click)=\"modalOpened('allOptions')\">\n      {{ \"streamChat.See all options ({{count}})\" | translate:{count:\n      options.length} }}\n    </button>\n  </ng-container>\n  <ng-container\n    *ngIf=\"\n      allowUserSuggestions &&\n      canVote &&\n      !isClosed &&\n      options.length < maxPollOptions\n    \"\n  >\n    <button\n      class=\"str-chat__poll-action\"\n      (click)=\"modalOpened('suggestOption')\"\n    >\n      {{ \"streamChat.Suggest an option\" | translate }}\n    </button>\n  </ng-container>\n  <ng-container *ngIf=\"allowAnswers && canVote && !isClosed\">\n    <button\n      class=\"str-chat__poll-action\"\n      (click)=\"modalOpened('addAnswer')\"\n      (keyup.enter)=\"modalOpened('addAnswer')\"\n    >\n      <ng-container *ngIf=\"ownAnwer; else newAnswer\">\n        {{ \"streamChat.Update your comment\" | translate }}\n      </ng-container>\n      <ng-template #newAnswer>\n        {{ \"streamChat.Add a comment\" | translate }}\n      </ng-template>\n    </button>\n  </ng-container>\n  <ng-container *ngIf=\"answerCount > 0 && canQueryVotes\">\n    <button class=\"str-chat__poll-action\" (click)=\"modalOpened('viewComments')\">\n      {{ (answerCount === 1 ? \"streamChat.View {{ count }} comment\" :\n      \"streamChat.View {{ count }} comments\") | translate:{count: answerCount}\n      }}\n    </button>\n  </ng-container>\n  <ng-container *ngIf=\"canQueryVotes\">\n    <button class=\"str-chat__poll-action\" (click)=\"modalOpened('viewResults')\">\n      {{ \"streamChat.View results\" | translate }}\n    </button>\n  </ng-container>\n  <ng-container *ngIf=\"isOwnPoll && !isClosed\">\n    <button class=\"str-chat__poll-action\" (click)=\"modalOpened('endVote')\">\n      {{ \"streamChat.End vote\" | translate }}\n    </button>\n  </ng-container>\n</div>\n\n<ng-container *ngIf=\"selectedAction\">\n  <ng-container\n    *ngTemplateOutlet=\"\n      (customTemplatesService.modalTemplate$ | async) || defaultModal;\n      context: getModalContext()\n    \"\n  ></ng-container>\n</ng-container>\n\n<ng-template\n  #defaultModal\n  let-isOpen=\"isOpen\"\n  let-isOpenChangeHandler=\"isOpenChangeHandler\"\n  let-content=\"content\"\n>\n  <stream-modal\n    class=\"str-chat__poll-actions str-chat-angular__poll-actions\"\n    [isOpen]=\"isOpen\"\n    [content]=\"content\"\n    (isOpenChange)=\"isOpenChangeHandler($event)\"\n  >\n  </stream-modal>\n</ng-template>\n\n<ng-template #allOptions>\n  <div class=\"str-chat__modal__poll-option-list str-chat-angular__poll-actions\">\n    <div class=\"str-chat__modal-header\">\n      <div class=\"str-chat__modal-header__title\">\n        {{ \"streamChat.Poll options\" | translate }}\n      </div>\n    </div>\n    <div class=\"str-chat__modal__poll-option-list__body\">\n      <div class=\"str-chat__modal__poll-option-list__title\">{{ name }}</div>\n      <stream-poll-options-list\n        [pollId]=\"pollId\"\n        [messageId]=\"messageId\"\n        [maxOptionsDisplayed]=\"undefined\"\n      ></stream-poll-options-list>\n      <stream-notification-list></stream-notification-list>\n    </div>\n  </div>\n</ng-template>\n<ng-template #suggestOption>\n  <stream-add-option\n    [pollId]=\"pollId\"\n    [messageId]=\"messageId\"\n    [closeModal]=\"modalClosed\"\n  ></stream-add-option>\n  <stream-notification-list></stream-notification-list>\n</ng-template>\n<ng-template #addAnswer>\n  <stream-upsert-answer\n    [pollId]=\"pollId\"\n    [messageId]=\"messageId\"\n    [answer]=\"ownAnwer\"\n    [closeModal]=\"modalClosed\"\n  ></stream-upsert-answer>\n  <stream-notification-list></stream-notification-list>\n</ng-template>\n<ng-template #viewComments>\n  <stream-poll-answers-list\n    (upsertOwnAnswer)=\"modalOpened('addAnswer')\"\n    [pollId]=\"pollId\"\n    [messageId]=\"messageId\"\n  ></stream-poll-answers-list>\n  <stream-notification-list></stream-notification-list>\n</ng-template>\n<ng-template #viewResults>\n  <stream-poll-results-list\n    [messageId]=\"messageId\"\n    [pollId]=\"pollId\"\n  ></stream-poll-results-list>\n  <stream-notification-list></stream-notification-list>\n</ng-template>\n<ng-template #endVote>\n  <div\n    class=\"str-chat__dialog str-chat__dialog--prompt str-chat__modal__end-vote\"\n  >\n    <div class=\"str-chat__dialog__body\">\n      <div class=\"str-chat__dialog__title\" translate>streamChat.End vote</div>\n      <div class=\"str-chat__dialog__prompt\" translate>\n        streamChat.After a poll is closed, no more votes can be cast\n      </div>\n      <stream-notification-list></stream-notification-list>\n      <div class=\"str-chat__dialog__controls\">\n        <button\n          class=\"str-chat__dialog__controls-button\"\n          (click)=\"modalClosed()\"\n        >\n          {{ \"streamChat.Cancel\" | translate }}\n        </button>\n        <button class=\"str-chat__dialog__controls-button\" (click)=\"closePoll()\">\n          {{ \"streamChat.End vote\" | translate }}\n        </button>\n      </div>\n    </div>\n  </div>\n</ng-template>\n" }]
-        }], ctorParameters: function () { return [{ type: CustomTemplatesService }, { type: ChatClientService }, { type: i0.ChangeDetectorRef }, { type: ChannelService }, { type: NotificationService }, { type: MessageActionsService }]; }, propDecorators: { maxOptionsDisplayed: [{
+            args: [{ selector: 'stream-poll-actions', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"str-chat__poll-actions\">\n  <ng-container\n    *ngIf=\"maxOptionsDisplayed && options.length > maxOptionsDisplayed\"\n  >\n    <button class=\"str-chat__poll-action\" (click)=\"modalOpened('allOptions')\">\n      {{ \"streamChat.See all options ({{count}})\" | translate:{count:\n      options.length} }}\n    </button>\n  </ng-container>\n  <ng-container\n    *ngIf=\"\n      allowUserSuggestions &&\n      canVote &&\n      !isClosed &&\n      options.length < maxPollOptions\n    \"\n  >\n    <button\n      class=\"str-chat__poll-action\"\n      (click)=\"modalOpened('suggestOption')\"\n    >\n      {{ \"streamChat.Suggest an option\" | translate }}\n    </button>\n  </ng-container>\n  <ng-container *ngIf=\"allowAnswers && canVote && !isClosed\">\n    <button\n      class=\"str-chat__poll-action\"\n      (click)=\"modalOpened('addAnswer')\"\n      (keyup.enter)=\"modalOpened('addAnswer')\"\n    >\n      <ng-container *ngIf=\"ownAnwer; else newAnswer\">\n        {{ \"streamChat.Update your comment\" | translate }}\n      </ng-container>\n      <ng-template #newAnswer>\n        {{ \"streamChat.Add a comment\" | translate }}\n      </ng-template>\n    </button>\n  </ng-container>\n  <ng-container *ngIf=\"answerCount > 0 && canQueryVotes\">\n    <button class=\"str-chat__poll-action\" (click)=\"modalOpened('viewComments')\">\n      {{ (answerCount === 1 ? \"streamChat.View {{ count }} comment\" :\n      \"streamChat.View {{ count }} comments\") | translate:{count: answerCount}\n      }}\n    </button>\n  </ng-container>\n  <ng-container *ngIf=\"canQueryVotes\">\n    <button class=\"str-chat__poll-action\" (click)=\"modalOpened('viewResults')\">\n      {{ \"streamChat.View results\" | translate }}\n    </button>\n  </ng-container>\n  <ng-container *ngIf=\"isOwnPoll && !isClosed\">\n    <button class=\"str-chat__poll-action\" (click)=\"modalOpened('endVote')\">\n      {{ \"streamChat.End vote\" | translate }}\n    </button>\n  </ng-container>\n</div>\n\n<ng-container *ngIf=\"selectedAction\">\n  <ng-container\n    *ngTemplateOutlet=\"\n      (customTemplatesService.modalTemplate$ | async) || defaultModal;\n      context: getModalContext()\n    \"\n  />\n</ng-container>\n\n<ng-template\n  #defaultModal\n  let-isOpen=\"isOpen\"\n  let-isOpenChangeHandler=\"isOpenChangeHandler\"\n  let-content=\"content\"\n>\n  <stream-modal\n    class=\"str-chat__poll-actions str-chat-angular__poll-actions\"\n    [isOpen]=\"isOpen\"\n    [content]=\"content\"\n    (isOpenChange)=\"isOpenChangeHandler($event)\"\n  />\n</ng-template>\n\n<ng-template #allOptions>\n  <div class=\"str-chat__modal__poll-option-list str-chat-angular__poll-actions\">\n    <div class=\"str-chat__modal-header\">\n      <div class=\"str-chat__modal-header__title\">\n        {{ \"streamChat.Poll options\" | translate }}\n      </div>\n    </div>\n    <div class=\"str-chat__modal__poll-option-list__body\">\n      <div class=\"str-chat__modal__poll-option-list__title\">{{ name }}</div>\n      <stream-poll-options-list\n        [pollId]=\"pollId\"\n        [messageId]=\"messageId\"\n        [maxOptionsDisplayed]=\"undefined\"\n      />\n      <stream-notification-list />\n    </div>\n  </div>\n</ng-template>\n<ng-template #suggestOption>\n  <stream-add-option\n    [pollId]=\"pollId\"\n    [messageId]=\"messageId\"\n    [closeModal]=\"modalClosed\"\n  />\n  <stream-notification-list />\n</ng-template>\n<ng-template #addAnswer>\n  <stream-upsert-answer\n    [pollId]=\"pollId\"\n    [messageId]=\"messageId\"\n    [answer]=\"ownAnwer\"\n    [closeModal]=\"modalClosed\"\n  />\n  <stream-notification-list />\n</ng-template>\n<ng-template #viewComments>\n  <stream-poll-answers-list\n    (upsertOwnAnswer)=\"modalOpened('addAnswer')\"\n    [pollId]=\"pollId\"\n    [messageId]=\"messageId\"\n  />\n  <stream-notification-list />\n</ng-template>\n<ng-template #viewResults>\n  <stream-poll-results-list [messageId]=\"messageId\" [pollId]=\"pollId\" />\n  <stream-notification-list />\n</ng-template>\n<ng-template #endVote>\n  <div\n    class=\"str-chat__dialog str-chat__dialog--prompt str-chat__modal__end-vote\"\n  >\n    <div class=\"str-chat__dialog__body\">\n      <div class=\"str-chat__dialog__title\" translate>streamChat.End vote</div>\n      <div class=\"str-chat__dialog__prompt\" translate>\n        streamChat.After a poll is closed, no more votes can be cast\n      </div>\n      <stream-notification-list />\n      <div class=\"str-chat__dialog__controls\">\n        <button\n          class=\"str-chat__dialog__controls-button\"\n          (click)=\"modalClosed()\"\n        >\n          {{ \"streamChat.Cancel\" | translate }}\n        </button>\n        <button class=\"str-chat__dialog__controls-button\" (click)=\"closePoll()\">\n          {{ \"streamChat.End vote\" | translate }}\n        </button>\n      </div>\n    </div>\n  </div>\n</ng-template>\n" }]
+        }], ctorParameters: () => [{ type: CustomTemplatesService }, { type: ChatClientService }, { type: i0.ChangeDetectorRef }, { type: ChannelService }, { type: NotificationService }, { type: MessageActionsService }], propDecorators: { maxOptionsDisplayed: [{
                 type: Input
             }], maxPollOptions: [{
                 type: Input
@@ -10239,12 +10232,12 @@ class PollComponent extends BasePollComponent {
         });
         return unsubscribe;
     }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: PollComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: PollComponent, selector: "stream-poll", usesInheritance: true, ngImport: i0, template: "<div class=\"str-chat__poll\" [class.str-chat__poll--closed]=\"isClosed\">\n  <div #header><ng-content select=\"[poll-header]\"></ng-content></div>\n  <ng-container *ngIf=\"!header.hasChildNodes()\">\n    <stream-poll-header [pollId]=\"pollId\" [messageId]=\"messageId\" />\n  </ng-container>\n  <div #options><ng-content select=\"[poll-options-list]\"></ng-content></div>\n  <ng-container *ngIf=\"!options.hasChildNodes()\">\n    <stream-poll-options-list [pollId]=\"pollId\" [messageId]=\"messageId\" />\n  </ng-container>\n  <div #actions><ng-content select=\"[poll-actions]\"></ng-content></div>\n  <ng-container *ngIf=\"!actions.hasChildNodes()\">\n    <stream-poll-actions [pollId]=\"pollId\" [messageId]=\"messageId\" />\n  </ng-container>\n</div>\n", dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: PollHeaderComponent, selector: "stream-poll-header" }, { kind: "component", type: PollOptionsListComponent, selector: "stream-poll-options-list", inputs: ["maxOptionsDisplayed"] }, { kind: "component", type: PollActionsComponent, selector: "stream-poll-actions", inputs: ["maxOptionsDisplayed", "maxPollOptions"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-PollComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: PollComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-PollComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.4", type: PollComponent, selector: "stream-poll", usesInheritance: true, ngImport: i0, template: "<div class=\"str-chat__poll\" [class.str-chat__poll--closed]=\"isClosed\">\n  <div #header><ng-content select=\"[poll-header]\"></ng-content></div>\n  <ng-container *ngIf=\"!header.hasChildNodes()\">\n    <stream-poll-header [pollId]=\"pollId\" [messageId]=\"messageId\">\n    </stream-poll-header>\n  </ng-container>\n  <div #options><ng-content select=\"[poll-options-list]\"></ng-content></div>\n  <ng-container *ngIf=\"!options.hasChildNodes()\">\n    <stream-poll-options-list [pollId]=\"pollId\" [messageId]=\"messageId\">\n    </stream-poll-options-list>\n  </ng-container>\n  <div #actions><ng-content select=\"[poll-actions]\"></ng-content></div>\n  <ng-container *ngIf=\"!actions.hasChildNodes()\">\n    <stream-poll-actions [pollId]=\"pollId\" [messageId]=\"messageId\">\n    </stream-poll-actions>\n  </ng-container>\n</div>\n", dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: PollHeaderComponent, selector: "stream-poll-header" }, { kind: "component", type: PollOptionsListComponent, selector: "stream-poll-options-list", inputs: ["maxOptionsDisplayed"] }, { kind: "component", type: PollActionsComponent, selector: "stream-poll-actions", inputs: ["maxOptionsDisplayed", "maxPollOptions"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: PollComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: PollComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'stream-poll', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"str-chat__poll\" [class.str-chat__poll--closed]=\"isClosed\">\n  <div #header><ng-content select=\"[poll-header]\"></ng-content></div>\n  <ng-container *ngIf=\"!header.hasChildNodes()\">\n    <stream-poll-header [pollId]=\"pollId\" [messageId]=\"messageId\">\n    </stream-poll-header>\n  </ng-container>\n  <div #options><ng-content select=\"[poll-options-list]\"></ng-content></div>\n  <ng-container *ngIf=\"!options.hasChildNodes()\">\n    <stream-poll-options-list [pollId]=\"pollId\" [messageId]=\"messageId\">\n    </stream-poll-options-list>\n  </ng-container>\n  <div #actions><ng-content select=\"[poll-actions]\"></ng-content></div>\n  <ng-container *ngIf=\"!actions.hasChildNodes()\">\n    <stream-poll-actions [pollId]=\"pollId\" [messageId]=\"messageId\">\n    </stream-poll-actions>\n  </ng-container>\n</div>\n" }]
+            args: [{ selector: 'stream-poll', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"str-chat__poll\" [class.str-chat__poll--closed]=\"isClosed\">\n  <div #header><ng-content select=\"[poll-header]\"></ng-content></div>\n  <ng-container *ngIf=\"!header.hasChildNodes()\">\n    <stream-poll-header [pollId]=\"pollId\" [messageId]=\"messageId\" />\n  </ng-container>\n  <div #options><ng-content select=\"[poll-options-list]\"></ng-content></div>\n  <ng-container *ngIf=\"!options.hasChildNodes()\">\n    <stream-poll-options-list [pollId]=\"pollId\" [messageId]=\"messageId\" />\n  </ng-container>\n  <div #actions><ng-content select=\"[poll-actions]\"></ng-content></div>\n  <ng-container *ngIf=\"!actions.hasChildNodes()\">\n    <stream-poll-actions [pollId]=\"pollId\" [messageId]=\"messageId\" />\n  </ng-container>\n</div>\n" }]
         }] });
 
 /**
@@ -10267,56 +10260,56 @@ class PollPreviewComponent extends BasePollComponent {
         });
         return unsubscribe;
     }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: PollPreviewComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: PollPreviewComponent, selector: "stream-poll-preview", usesInheritance: true, ngImport: i0, template: "<div\n  class=\"str-chat__quoted-poll-preview\"\n  [class.str-chat__quoted-poll-preview--closed]=\"isClosed\"\n>\n  <div class=\"str-chat__quoted-poll-preview__icon\">\uD83D\uDCCA</div>\n  <div class=\"str-chat__quoted-poll-preview__name\">{{ name }}</div>\n</div>\n", changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-PollPreviewComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: PollPreviewComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-PollPreviewComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.4", type: PollPreviewComponent, selector: "stream-poll-preview", usesInheritance: true, ngImport: i0, template: "<div\n  class=\"str-chat__quoted-poll-preview\"\n  [class.str-chat__quoted-poll-preview--closed]=\"isClosed\"\n>\n  <div class=\"str-chat__quoted-poll-preview__icon\">\uD83D\uDCCA</div>\n  <div class=\"str-chat__quoted-poll-preview__name\">{{ name }}</div>\n</div>\n", changeDetection: i0.ChangeDetectionStrategy.OnPush });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: PollPreviewComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: PollPreviewComponent, decorators: [{
             type: Component,
             args: [{ selector: 'stream-poll-preview', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div\n  class=\"str-chat__quoted-poll-preview\"\n  [class.str-chat__quoted-poll-preview--closed]=\"isClosed\"\n>\n  <div class=\"str-chat__quoted-poll-preview__icon\">\uD83D\uDCCA</div>\n  <div class=\"str-chat__quoted-poll-preview__name\">{{ name }}</div>\n</div>\n" }]
         }] });
 
 class StreamPollsModule {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: StreamPollsModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.3.12", ngImport: i0, type: StreamPollsModule, declarations: [PollComposerComponent,
+            PollComponent,
+            PollHeaderComponent,
+            PollOptionsListComponent,
+            PollOptionSelectorComponent,
+            PollActionsComponent,
+            PollResultsListComponent,
+            PollVoteResultsListComponent,
+            PollVoteComponent,
+            PollAnswersListComponent,
+            UpsertAnswerComponent,
+            AddOptionComponent,
+            PollPreviewComponent], imports: [CommonModule,
+            TranslateModule,
+            StreamAvatarModule,
+            StreamModalModule,
+            StreamNotificationModule,
+            StreamPaginatedListModule,
+            ReactiveFormsModule], exports: [PollComposerComponent,
+            PollComponent,
+            PollHeaderComponent,
+            PollOptionsListComponent,
+            PollOptionSelectorComponent,
+            PollActionsComponent,
+            PollResultsListComponent,
+            PollVoteResultsListComponent,
+            PollVoteComponent,
+            PollAnswersListComponent,
+            UpsertAnswerComponent,
+            AddOptionComponent,
+            PollPreviewComponent] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: StreamPollsModule, imports: [CommonModule,
+            TranslateModule,
+            StreamAvatarModule,
+            StreamModalModule,
+            StreamNotificationModule,
+            StreamPaginatedListModule,
+            ReactiveFormsModule] }); }
 }
-StreamPollsModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: StreamPollsModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-StreamPollsModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.0.4", ngImport: i0, type: StreamPollsModule, declarations: [PollComposerComponent,
-        PollComponent,
-        PollHeaderComponent,
-        PollOptionsListComponent,
-        PollOptionSelectorComponent,
-        PollActionsComponent,
-        PollResultsListComponent,
-        PollVoteResultsListComponent,
-        PollVoteComponent,
-        PollAnswersListComponent,
-        UpsertAnswerComponent,
-        AddOptionComponent,
-        PollPreviewComponent], imports: [CommonModule,
-        TranslateModule,
-        StreamAvatarModule,
-        StreamModalModule,
-        StreamNotificationModule,
-        StreamPaginatedListModule,
-        ReactiveFormsModule], exports: [PollComposerComponent,
-        PollComponent,
-        PollHeaderComponent,
-        PollOptionsListComponent,
-        PollOptionSelectorComponent,
-        PollActionsComponent,
-        PollResultsListComponent,
-        PollVoteResultsListComponent,
-        PollVoteComponent,
-        PollAnswersListComponent,
-        UpsertAnswerComponent,
-        AddOptionComponent,
-        PollPreviewComponent] });
-StreamPollsModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: StreamPollsModule, imports: [CommonModule,
-        TranslateModule,
-        StreamAvatarModule,
-        StreamModalModule,
-        StreamNotificationModule,
-        StreamPaginatedListModule,
-        ReactiveFormsModule] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: StreamPollsModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: StreamPollsModule, decorators: [{
             type: NgModule,
             args: [{
                     declarations: [