stream-chat-angular 4.56.0-perf-message-list.1 → 4.56.0

package/fesm2015/stream-chat-angular.js

@@ -20,7 +20,7 @@ import transliterate from '@stream-io/transliterate';
 import * as i8 from 'angular-mentions';
 import { MentionModule } from 'angular-mentions';
 
-const version = '4.56.0-perf-message-list.1';
+const version = '4.56.0';
 
 /**
  * The `NotificationService` can be used to add or remove notifications. By default the [`NotificationList`](../components/NotificationListComponent.mdx) component displays the currently active notifications.
@@ -2416,9 +2416,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.5", ngImpor
  * The `Avatar` component displays the provided image, with fallback to the first letter of the optional name input.
  */
 class AvatarComponent {
-    constructor(chatClientService, ngZone) {
+    constructor(chatClientService, ngZone, cdRef) {
         this.chatClientService = chatClientService;
         this.ngZone = ngZone;
+        this.cdRef = cdRef;
         /**
          * The size in pixels of the avatar image.
          */
@@ -2433,37 +2434,51 @@ class AvatarComponent {
         this.initialsType = 'first-letter-of-first-word';
         this.isError = false;
         this.isOnline = false;
+        this.initials = '';
+        this.isViewInited = false;
+        this.subscriptions = [];
     }
-    ngOnChanges(changes) {
-        var _a, _b;
-        if (changes['channel']) {
-            if (this.channel) {
-                const otherMember = this.getOtherMemberIfOneToOneChannel();
-                if (otherMember) {
-                    this.isOnline = otherMember.online || false;
-                    this.isOnlineSubscription = this.chatClientService.events$
-                        .pipe(filter((e) => e.eventType === 'user.presence.changed'))
-                        .subscribe((event) => {
-                        var _a;
-                        if (((_a = event.event.user) === null || _a === void 0 ? void 0 : _a.id) === otherMember.id) {
-                            this.ngZone.run(() => {
-                                var _a;
-                                this.isOnline = ((_a = event.event.user) === null || _a === void 0 ? void 0 : _a.online) || false;
-                            });
-                        }
-                    });
+    ngOnInit() {
+        this.subscriptions.push(this.chatClientService.user$.subscribe((u) => {
+            if ((u === null || u === void 0 ? void 0 : u.id) !== this.userId) {
+                this.userId = u === null || u === void 0 ? void 0 : u.id;
+                if (this.type || this.channel || this.name) {
+                    this.setInitials();
+                    this.setFallbackChannelImage();
+                    this.updateIsOnlineSubscription();
                 }
-                else {
-                    (_a = this.isOnlineSubscription) === null || _a === void 0 ? void 0 : _a.unsubscribe();
+                if (this.isViewInited) {
+                    this.cdRef.detectChanges();
                 }
             }
+        }));
+    }
+    ngOnChanges(changes) {
+        if (changes['channel']) {
+            this.updateIsOnlineSubscription();
+        }
+        if (changes.type || changes.name || changes.channel) {
+            this.setInitials();
+        }
+        if (changes.type || changes.channel) {
+            this.setFallbackChannelImage();
+        }
+    }
+    setFallbackChannelImage() {
+        if (this.type !== 'channel') {
+            this.fallbackChannelImage = undefined;
+        }
+        else {
+            const otherMember = this.getOtherMemberIfOneToOneChannel();
+            if (otherMember) {
+                this.fallbackChannelImage = otherMember.image;
+            }
             else {
-                this.isOnline = false;
-                (_b = this.isOnlineSubscription) === null || _b === void 0 ? void 0 : _b.unsubscribe();
+                this.fallbackChannelImage = undefined;
             }
         }
     }
-    get initials() {
+    setInitials() {
         var _a, _b, _c, _d, _e;
         let result = '';
         if (this.type === 'user') {
@@ -2491,25 +2506,41 @@ class AvatarComponent {
         else {
             initials = words[0].charAt(0) || '';
         }
-        return initials;
+        this.initials = initials;
     }
-    get fallbackChannelImage() {
-        if (this.type !== 'channel') {
-            return undefined;
-        }
-        else {
+    updateIsOnlineSubscription() {
+        var _a, _b;
+        if (this.channel) {
             const otherMember = this.getOtherMemberIfOneToOneChannel();
             if (otherMember) {
-                return otherMember.image;
+                this.isOnline = otherMember.online || false;
+                this.isOnlineSubscription = this.chatClientService.events$
+                    .pipe(filter((e) => e.eventType === 'user.presence.changed'))
+                    .subscribe((event) => {
+                    var _a;
+                    if (((_a = event.event.user) === null || _a === void 0 ? void 0 : _a.id) === otherMember.id) {
+                        this.ngZone.run(() => {
+                            var _a;
+                            this.isOnline = ((_a = event.event.user) === null || _a === void 0 ? void 0 : _a.online) || false;
+                        });
+                    }
+                });
             }
             else {
-                return undefined;
+                (_a = this.isOnlineSubscription) === null || _a === void 0 ? void 0 : _a.unsubscribe();
             }
         }
+        else {
+            this.isOnline = false;
+            (_b = this.isOnlineSubscription) === null || _b === void 0 ? void 0 : _b.unsubscribe();
+        }
+    }
+    ngAfterViewInit() {
+        this.isViewInited = true;
     }
     getOtherMemberIfOneToOneChannel() {
         var _a, _b;
-        const otherMembers = Object.values(((_b = (_a = this.channel) === null || _a === void 0 ? void 0 : _a.state) === null || _b === void 0 ? void 0 : _b.members) || {}).filter((m) => { var _a; return m.user_id !== ((_a = this.chatClientService.chatClient.user) === null || _a === void 0 ? void 0 : _a.id); });
+        const otherMembers = Object.values(((_b = (_a = this.channel) === null || _a === void 0 ? void 0 : _a.state) === null || _b === void 0 ? void 0 : _b.members) || {}).filter((m) => m.user_id !== this.userId);
         if (otherMembers.length === 1) {
             return otherMembers[0].user;
         }
@@ -2518,7 +2549,7 @@ class AvatarComponent {
         }
     }
 }
-AvatarComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.5", ngImport: i0, type: AvatarComponent, deps: [{ token: ChatClientService }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component });
+AvatarComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.5", ngImport: i0, type: AvatarComponent, deps: [{ token: ChatClientService }, { token: i0.NgZone }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
 AvatarComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.5", type: AvatarComponent, selector: "stream-avatar", inputs: { name: "name", imageUrl: "imageUrl", size: "size", 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__avatar--circle stream-chat__avatar--{{\n    location\n  }}\"\n  title=\"{{ name }}\"\n  [style]=\"{\n    flexBasis: 'calc(var(--str-chat__spacing-px, 1px) * ' + size + ')',\n    fontSize:\n      initialsType === 'first-letter-of-first-word'\n        ? 'calc(var(--str-chat__spacing-px, 1px) * ' + size / 2 + ')'\n        : 'calc(var(--str-chat__spacing-px, 1px) * ' + size / 3 + ')',\n    height: 'calc(var(--str-chat__spacing-px, 1px) * ' + size + ')',\n    lineHeight: 'calc(var(--str-chat__spacing-px, 1px) * ' + size + ')',\n    width: 'calc(var(--str-chat__spacing-px, 1px) * ' + size + ')'\n  }\"\n>\n  <img\n    *ngIf=\"(imageUrl || fallbackChannelImage) && !isError; else fallback\"\n    class=\"str-chat__avatar-image str-chat__avatar-image\"\n    src=\"{{ imageUrl || fallbackChannelImage }}\"\n    alt=\"{{ initials }}\"\n    data-testid=\"avatar-img\"\n    (error)=\"isError = true\"\n    [style]=\"{\n      flexBasis: 'calc(var(--str-chat__spacing-px, 1px) * ' + size + ')',\n      height: 'calc(var(--str-chat__spacing-px, 1px) * ' + size + ')',\n      objectFit: 'cover',\n      width: 'calc(var(--str-chat__spacing-px, 1px) * ' + size + ')'\n    }\"\n    fetchpriority=\"high\"\n  />\n  <ng-template #fallback>\n    <div\n      data-testid=\"fallback-img\"\n      style=\"overflow: hidden; white-space: nowrap; text-overflow: ellipsis\"\n      class=\"str-chat__avatar-fallback\"\n    >\n      {{ initials }}\n    </div>\n  </ng-template>\n  <div\n    data-testid=\"online-indicator\"\n    *ngIf=\"isOnline && showOnlineIndicator\"\n    class=\"str-chat__avatar--online-indicator\"\n  ></div>\n</div>\n", styles: [""], directives: [{ type: i9.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.5", ngImport: i0, type: AvatarComponent, decorators: [{
             type: Component,
@@ -2527,7 +2558,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.5", ngImpor
                     templateUrl: './avatar.component.html',
                     styleUrls: ['./avatar.component.scss'],
                 }]
-        }], ctorParameters: function () { return [{ type: ChatClientService }, { type: i0.NgZone }]; }, propDecorators: { name: [{
+        }], ctorParameters: function () { return [{ type: ChatClientService }, { type: i0.NgZone }, { type: i0.ChangeDetectorRef }]; }, propDecorators: { name: [{
                 type: Input
             }], imageUrl: [{
                 type: Input
@@ -4658,6 +4689,11 @@ class MessageReactionsComponent {
         this.isLoading = true;
         this.reactions = [];
         this.shouldHandleReactionClick = true;
+        this.existingReactions = [];
+        this.reactionsCount = 0;
+        this.reactionOptions = [];
+        this.subscriptions = [];
+        this.isViewInited = false;
         this.isOpenChange = (isOpen) => {
             this.selectedReactionType = isOpen ? this.selectedReactionType : undefined;
         };
@@ -4668,12 +4704,24 @@ class MessageReactionsComponent {
             }
         };
     }
+    ngOnInit() {
+        this.subscriptions.push(this.messageReactionsService.reactions$.subscribe((reactions) => {
+            this.reactionOptions = Object.keys(reactions);
+            this.setExistingReactions();
+            if (this.isViewInited) {
+                this.cdRef.detectChanges();
+            }
+        }));
+    }
     ngOnChanges(changes) {
         if (changes.isSelectorOpen) {
             this.isSelectorOpen
                 ? setTimeout(() => this.watchForOutsideClicks()) // setTimeout: wait for current click to bubble up, and only watch for clicks after that
                 : this.stopWatchForOutsideClicks();
         }
+        if (changes.messageReactionCounts) {
+            this.setExistingReactions();
+        }
         if (changes.messageReactionCounts && this.messageReactionCounts) {
             const reactionsCount = Object.keys(this.messageReactionCounts).reduce((acc, key) => acc + (this.messageReactionCounts[key] || 0), 0);
             this.shouldHandleReactionClick =
@@ -4681,22 +4729,17 @@ class MessageReactionsComponent {
                     !!this.messageReactionsService.customReactionClickHandler;
         }
     }
+    ngAfterViewInit() {
+        this.isViewInited = true;
+    }
     ngAfterViewChecked() {
         if (this.tooltipText && !this.tooltipPositions) {
             this.setTooltipPosition();
             this.cdRef.detectChanges();
         }
     }
-    get existingReactions() {
-        return Object.keys(this.messageReactionCounts)
-            .filter((k) => this.reactionOptions.indexOf(k) !== -1)
-            .filter((k) => this.messageReactionCounts[k] > 0);
-    }
-    get reactionsCount() {
-        return this.existingReactions.reduce((total, reaction) => total + this.messageReactionCounts[reaction], 0);
-    }
-    get reactionOptions() {
-        return Object.keys(this.messageReactionsService.reactions);
+    ngOnDestroy() {
+        this.subscriptions.forEach((s) => s.unsubscribe());
     }
     getLatestUserByReaction(reactionType) {
         var _a;
@@ -4826,9 +4869,15 @@ class MessageReactionsComponent {
             }
         });
     }
+    setExistingReactions() {
+        this.existingReactions = Object.keys(this.messageReactionCounts)
+            .filter((k) => this.reactionOptions.indexOf(k) !== -1)
+            .filter((k) => this.messageReactionCounts[k] > 0);
+        this.reactionsCount = this.existingReactions.reduce((total, reaction) => total + this.messageReactionCounts[reaction], 0);
+    }
 }
 MessageReactionsComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.5", ngImport: i0, type: MessageReactionsComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: ChannelService }, { token: MessageReactionsService }, { token: CustomTemplatesService }, { token: ThemeService }], target: i0.ɵɵFactoryTarget.Component });
-MessageReactionsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.5", type: MessageReactionsComponent, selector: "stream-message-reactions", inputs: { messageId: "messageId", messageReactionCounts: "messageReactionCounts", isSelectorOpen: "isSelectorOpen", latestReactions: "latestReactions", ownReactions: "ownReactions" }, outputs: { isSelectorOpenChange: "isSelectorOpenChange" }, viewQueries: [{ propertyName: "selectorContainer", first: true, predicate: ["selectorContainer"], descendants: true }, { propertyName: "selectorTooltip", first: true, predicate: ["selectorTooltip"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div\n  *ngIf=\"existingReactions.length > 0\"\n  class=\"str-chat__reaction-list str-chat__message-reactions-container\"\n  [class.str-chat__reaction-list--reverse]=\"true\"\n  [class.str-chat__reaction-list-hidden]=\"isSelectorOpen\"\n  data-testid=\"reaction-list\"\n>\n  <ul class=\"str-chat__message-reactions\">\n    <li\n      class=\"str-chat__message-reaction\"\n      *ngFor=\"\n        let reactionType of existingReactions;\n        trackBy: trackByMessageReaction\n      \"\n      [ngStyle]=\"{ cursor: shouldHandleReactionClick ? 'pointer' : 'default' }\"\n      [class.str-chat__message-reaction-own]=\"isOwnReaction(reactionType)\"\n      data-testclass=\"emoji\"\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        {{ messageReactionCounts[reactionType] }}\n      </span>\n    </li>\n    <li>\n      <span\n        data-testid=\"reactions-count\"\n        class=\"str-chat__reaction-list--counter\"\n        >{{ reactionsCount }}</span\n      >\n    </li>\n  </ul>\n</div>\n\n<div\n  #selectorContainer\n  class=\"str-chat__reaction-selector str-chat__message-reaction-selector\"\n  *ngIf=\"isSelectorOpen\"\n  data-testid=\"reaction-selector\"\n>\n  <div\n    *ngIf=\"tooltipText\"\n    data-testid=\"tooltip\"\n    #selectorTooltip\n    class=\"str-chat__reaction-selector-tooltip\"\n    [ngStyle]=\"{\n      left: tooltipPositions?.tooltip + 'px',\n      visibility: tooltipPositions ? 'visible' : 'hidden'\n    }\"\n  >\n    <div\n      class=\"arrow\"\n      [ngStyle]=\"{ left: tooltipPositions?.arrow + 'px' }\"\n    ></div>\n    <span class=\"latest-user-username\">\n      {{ tooltipText }}\n    </span>\n  </div>\n  <ul\n    class=\"str-chat__message-reactions-list str-chat__message-reactions-options\"\n  >\n    <li\n      class=\"\n        str-chat__message-reactions-option\n        str-chat__message-reactions-list-item\n        str-chat__emoji\n      \"\n      *ngFor=\"\n        let reactionType of reactionOptions;\n        trackBy: trackByMessageReaction\n      \"\n      [class.str-chat__message-reactions-option-selected]=\"\n        isOwnReaction(reactionType)\n      \"\n      data-testclass=\"emoji-option\"\n      (click)=\"react(reactionType)\"\n      (keyup.enter)=\"react(reactionType)\"\n    >\n      <div\n        *ngIf=\"getLatestUserByReaction(reactionType) as user\"\n        class=\"latest-user str-chat__message-reactions-last-user\"\n        (click)=\"hideTooltip()\"\n        (keyup.enter)=\"hideTooltip()\"\n        (mouseenter)=\"showTooltip($event, reactionType)\"\n        (mouseleave)=\"hideTooltip()\"\n        attr.data-testid=\"{{ reactionType }}-last-user\"\n      >\n        <stream-avatar-placeholder\n          attr.data-testid=\"{{ reactionType }}-avatar\"\n          [imageUrl]=\"user.image\"\n          [name]=\"user.name || user.id\"\n          [size]=\"20\"\n          location=\"reaction\"\n        ></stream-avatar-placeholder>\n      </div>\n      <span\n        class=\"\n          emoji\n          str-chat__emoji-selector-emoji-angular\n          str-chat__message-reaction-emoji\n        \"\n      >\n        {{ getEmojiByReaction(reactionType) }}\n      </span>\n      <span\n        *ngIf=\"\n          messageReactionCounts[reactionType] &&\n          messageReactionCounts[reactionType]! > 0\n        \"\n        class=\"str-chat__message-reactions-list-item__count\"\n        attr.data-testid=\"{{ reactionType }}-reaction-count\"\n      >\n        {{ messageReactionCounts[reactionType] }}\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      }\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>\n  <stream-modal\n    class=\"str-chat__message-reactions-details-modal\"\n    [isOpen]=\"isOpen\"\n    (isOpenChange)=\"isOpenChangeHandler($event)\"\n  >\n    <div class=\"str-chat__message-reactions-details\">\n      <div class=\"str-chat__message-reactions-details-reaction-types\">\n        <div\n          class=\"str-chat__message-reactions-details-reaction-type\"\n          *ngFor=\"\n            let reactionType of existingReactions;\n            trackBy: trackByMessageReaction\n          \"\n          [ngStyle]=\"{\n            cursor: shouldHandleReactionClick ? 'pointer' : 'default'\n          }\"\n          attr.data-testid=\"reaction-details-selector-{{ reactionType }}\"\n          [class.str-chat__message-reactions-details-reaction-type--selected]=\"\n            reactionType === selectedReactionType\n          \"\n          (click)=\"selectedReactionType = reactionType; allUsers.scrollTop = 0\"\n          (keyup.enter)=\"\n            selectedReactionType = reactionType; allUsers.scrollTop = 0\n          \"\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            {{ messageReactionCounts[reactionType] }}\n          </span>\n        </div>\n      </div>\n      <div\n        class=\"\n          emoji\n          str-chat__message-reaction-emoji str-chat__message-reaction-emoji-big\n        \"\n      >\n        {{ getEmojiByReaction(selectedReactionType!) }}\n      </div>\n      <div\n        #allUsers\n        data-testid=\"all-reacting-users\"\n        class=\"str-chat__message-reactions-details-reacting-users\"\n      >\n        <stream-loading-indicator\n          *ngIf=\"isLoading; else reactions\"\n        ></stream-loading-indicator>\n        <ng-template #reactions>\n          <div\n            class=\"str-chat__message-reactions-details-reacting-user\"\n            *ngFor=\"\n              let user of getAllUsersByReaction(selectedReactionType);\n              trackBy: trackByUserId\n            \"\n          >\n            <stream-avatar-placeholder\n              data-testclass=\"avatar\"\n              class=\"str-chat__avatar str-chat__avatar--circle\"\n              style=\"max-height: 100%; overflow-y: hidden\"\n              [size]=\"30\"\n              [imageUrl]=\"user.image\"\n              [name]=\"user.name\"\n              type=\"user\"\n              location=\"reaction\"\n              [user]=\"user\"\n            ></stream-avatar-placeholder>\n            <span\n              data-testclass=\"reaction-user-username\"\n              class=\"str-chat__user-item--name\"\n              >{{ user.name }}</span\n            >\n          </div>\n        </ng-template>\n      </div>\n    </div>\n  </stream-modal>\n</ng-template>\n", styles: [".emoji {position: relative; display: inline-block; }"], components: [{ type: AvatarPlaceholderComponent, selector: "stream-avatar-placeholder", inputs: ["name", "imageUrl", "size", "location", "channel", "user", "type", "initialsType", "showOnlineIndicator"] }, { type: ModalComponent, selector: "stream-modal", inputs: ["isOpen", "content"], outputs: ["isOpenChange"] }, { type: LoadingIndicatorComponent, selector: "stream-loading-indicator", inputs: ["size", "color"] }], directives: [{ type: i9.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i9.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i9.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { type: i9.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }], pipes: { "async": i9.AsyncPipe } });
+MessageReactionsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.5", type: MessageReactionsComponent, selector: "stream-message-reactions", inputs: { messageId: "messageId", messageReactionCounts: "messageReactionCounts", isSelectorOpen: "isSelectorOpen", latestReactions: "latestReactions", ownReactions: "ownReactions" }, outputs: { isSelectorOpenChange: "isSelectorOpenChange" }, viewQueries: [{ propertyName: "selectorContainer", first: true, predicate: ["selectorContainer"], descendants: true }, { propertyName: "selectorTooltip", first: true, predicate: ["selectorTooltip"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div\n  *ngIf=\"existingReactions.length > 0\"\n  class=\"str-chat__reaction-list str-chat__message-reactions-container\"\n  [class.str-chat__reaction-list--reverse]=\"true\"\n  [class.str-chat__reaction-list-hidden]=\"isSelectorOpen\"\n  data-testid=\"reaction-list\"\n>\n  <ul class=\"str-chat__message-reactions\">\n    <li\n      class=\"str-chat__message-reaction\"\n      *ngFor=\"\n        let reactionType of existingReactions;\n        trackBy: trackByMessageReaction\n      \"\n      [ngStyle]=\"{ cursor: shouldHandleReactionClick ? 'pointer' : 'default' }\"\n      [class.str-chat__message-reaction-own]=\"isOwnReaction(reactionType)\"\n      data-testclass=\"emoji\"\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        {{ messageReactionCounts[reactionType] }}\n      </span>\n    </li>\n    <li>\n      <span\n        data-testid=\"reactions-count\"\n        class=\"str-chat__reaction-list--counter\"\n        >{{ reactionsCount }}</span\n      >\n    </li>\n  </ul>\n</div>\n\n<div\n  #selectorContainer\n  class=\"str-chat__reaction-selector str-chat__message-reaction-selector\"\n  *ngIf=\"isSelectorOpen\"\n  data-testid=\"reaction-selector\"\n>\n  <div\n    *ngIf=\"tooltipText\"\n    data-testid=\"tooltip\"\n    #selectorTooltip\n    class=\"str-chat__reaction-selector-tooltip\"\n    [ngStyle]=\"{\n      left: tooltipPositions?.tooltip + 'px',\n      visibility: tooltipPositions ? 'visible' : 'hidden'\n    }\"\n  >\n    <div\n      class=\"arrow\"\n      [ngStyle]=\"{ left: tooltipPositions?.arrow + 'px' }\"\n    ></div>\n    <span class=\"latest-user-username\">\n      {{ tooltipText }}\n    </span>\n  </div>\n  <ul\n    class=\"str-chat__message-reactions-list str-chat__message-reactions-options\"\n  >\n    <li\n      class=\"\n        str-chat__message-reactions-option\n        str-chat__message-reactions-list-item\n        str-chat__emoji\n      \"\n      *ngFor=\"\n        let reactionType of reactionOptions;\n        trackBy: trackByMessageReaction\n      \"\n      [class.str-chat__message-reactions-option-selected]=\"\n        isOwnReaction(reactionType)\n      \"\n      data-testclass=\"emoji-option\"\n      (click)=\"react(reactionType)\"\n      (keyup.enter)=\"react(reactionType)\"\n    >\n      <div\n        *ngIf=\"getLatestUserByReaction(reactionType) as user\"\n        class=\"latest-user str-chat__message-reactions-last-user\"\n        (click)=\"hideTooltip()\"\n        (keyup.enter)=\"hideTooltip()\"\n        (mouseenter)=\"showTooltip($event, reactionType)\"\n        (mouseleave)=\"hideTooltip()\"\n        attr.data-testid=\"{{ reactionType }}-last-user\"\n      >\n        <stream-avatar-placeholder\n          attr.data-testid=\"{{ reactionType }}-avatar\"\n          [imageUrl]=\"user.image\"\n          [name]=\"user.name || user.id\"\n          [size]=\"20\"\n          location=\"reaction\"\n        ></stream-avatar-placeholder>\n      </div>\n      <span\n        class=\"\n          emoji\n          str-chat__emoji-selector-emoji-angular\n          str-chat__message-reaction-emoji\n        \"\n      >\n        {{ getEmojiByReaction(reactionType) }}\n      </span>\n      <span\n        *ngIf=\"\n          messageReactionCounts[reactionType] &&\n          messageReactionCounts[reactionType]! > 0\n        \"\n        class=\"str-chat__message-reactions-list-item__count\"\n        attr.data-testid=\"{{ reactionType }}-reaction-count\"\n      >\n        {{ messageReactionCounts[reactionType] }}\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    (isOpenChange)=\"isOpenChangeHandler($event)\"\n    [content]=\"content\"\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        class=\"str-chat__message-reactions-details-reaction-type\"\n        *ngFor=\"\n          let reactionType of existingReactions;\n          trackBy: trackByMessageReaction\n        \"\n        [ngStyle]=\"{\n          cursor: shouldHandleReactionClick ? 'pointer' : 'default'\n        }\"\n        attr.data-testid=\"reaction-details-selector-{{ reactionType }}\"\n        [class.str-chat__message-reactions-details-reaction-type--selected]=\"\n          reactionType === selectedReactionType\n        \"\n        (click)=\"selectedReactionType = reactionType; allUsers.scrollTop = 0\"\n        (keyup.enter)=\"\n          selectedReactionType = reactionType; allUsers.scrollTop = 0\n        \"\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          {{ messageReactionCounts[reactionType] }}\n        </span>\n      </div>\n    </div>\n    <div\n      class=\"\n        emoji\n        str-chat__message-reaction-emoji str-chat__message-reaction-emoji-big\n      \"\n    >\n      {{ getEmojiByReaction(selectedReactionType!) }}\n    </div>\n    <div\n      #allUsers\n      data-testid=\"all-reacting-users\"\n      class=\"str-chat__message-reactions-details-reacting-users\"\n    >\n      <stream-loading-indicator\n        *ngIf=\"isLoading; else reactions\"\n      ></stream-loading-indicator>\n      <ng-template #reactions>\n        <div\n          class=\"str-chat__message-reactions-details-reacting-user\"\n          *ngFor=\"\n            let user of getAllUsersByReaction(selectedReactionType);\n            trackBy: trackByUserId\n          \"\n        >\n          <stream-avatar-placeholder\n            data-testclass=\"avatar\"\n            class=\"str-chat__avatar str-chat__avatar--circle\"\n            style=\"max-height: 100%; overflow-y: hidden\"\n            [size]=\"30\"\n            [imageUrl]=\"user.image\"\n            [name]=\"user.name\"\n            type=\"user\"\n            location=\"reaction\"\n            [user]=\"user\"\n          ></stream-avatar-placeholder>\n          <span\n            data-testclass=\"reaction-user-username\"\n            class=\"str-chat__user-item--name\"\n            >{{ user.name }}</span\n          >\n        </div>\n      </ng-template>\n    </div>\n  </div>\n</ng-template>\n", styles: [".emoji {position: relative; display: inline-block; }"], components: [{ type: AvatarPlaceholderComponent, selector: "stream-avatar-placeholder", inputs: ["name", "imageUrl", "size", "location", "channel", "user", "type", "initialsType", "showOnlineIndicator"] }, { type: ModalComponent, selector: "stream-modal", inputs: ["isOpen", "content"], outputs: ["isOpenChange"] }, { type: LoadingIndicatorComponent, selector: "stream-loading-indicator", inputs: ["size", "color"] }], directives: [{ type: i9.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i9.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i9.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { type: i9.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }], pipes: { "async": i9.AsyncPipe } });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.5", ngImport: i0, type: MessageReactionsComponent, decorators: [{
             type: Component,
             args: [{