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

package/assets/version.d.ts

@@ -1 +1 @@
-export declare const version = "4.56.0-perf-message-list.2";
+export declare const version = "4.56.0";

package/bundles/stream-chat-angular.umd.js

@@ -356,7 +356,7 @@
         return (kind === "a" ? f.call(receiver, value) : f ? f.value = value : state.set(receiver, value)), value;
     }
 
-    var version = '4.56.0-perf-message-list.2';
+    var 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.
@@ -3116,9 +3116,10 @@
      * The `Avatar` component displays the provided image, with fallback to the first letter of the optional name input.
      */
     var AvatarComponent = /** @class */ (function () {
-        function AvatarComponent(chatClientService, ngZone) {
+        function AvatarComponent(chatClientService, ngZone, cdRef) {
             this.chatClientService = chatClientService;
             this.ngZone = ngZone;
+            this.cdRef = cdRef;
             /**
              * The size in pixels of the avatar image.
              */
@@ -3133,93 +3134,116 @@
             this.initialsType = 'first-letter-of-first-word';
             this.isError = false;
             this.isOnline = false;
+            this.initials = '';
+            this.isViewInited = false;
+            this.subscriptions = [];
         }
-        AvatarComponent.prototype.ngOnChanges = function (changes) {
+        AvatarComponent.prototype.ngOnInit = function () {
             var _this = this;
-            var _a, _b;
-            if (changes['channel']) {
-                if (this.channel) {
-                    var otherMember_1 = this.getOtherMemberIfOneToOneChannel();
-                    if (otherMember_1) {
-                        this.isOnline = otherMember_1.online || false;
-                        this.isOnlineSubscription = this.chatClientService.events$
-                            .pipe(operators.filter(function (e) { return e.eventType === 'user.presence.changed'; }))
-                            .subscribe(function (event) {
-                            var _a;
-                            if (((_a = event.event.user) === null || _a === void 0 ? void 0 : _a.id) === otherMember_1.id) {
-                                _this.ngZone.run(function () {
-                                    var _a;
-                                    _this.isOnline = ((_a = event.event.user) === null || _a === void 0 ? void 0 : _a.online) || false;
-                                });
-                            }
-                        });
+            this.subscriptions.push(this.chatClientService.user$.subscribe(function (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();
                     }
                 }
-                else {
-                    this.isOnline = false;
-                    (_b = this.isOnlineSubscription) === null || _b === void 0 ? void 0 : _b.unsubscribe();
-                }
+            }));
+        };
+        AvatarComponent.prototype.ngOnChanges = function (changes) {
+            if (changes['channel']) {
+                this.updateIsOnlineSubscription();
+            }
+            if (changes.type || changes.name || changes.channel) {
+                this.setInitials();
+            }
+            if (changes.type || changes.channel) {
+                this.setFallbackChannelImage();
             }
         };
-        Object.defineProperty(AvatarComponent.prototype, "initials", {
-            get: function () {
-                var _a, _b, _c, _d, _e;
-                var result = '';
-                if (this.type === 'user') {
-                    result = ((_a = this.name) === null || _a === void 0 ? void 0 : _a.toString()) || '';
-                }
-                else if (this.type === 'channel') {
-                    if ((_c = (_b = this.channel) === null || _b === void 0 ? void 0 : _b.data) === null || _c === void 0 ? void 0 : _c.name) {
-                        result = (_e = (_d = this.channel) === null || _d === void 0 ? void 0 : _d.data) === null || _e === void 0 ? void 0 : _e.name;
-                    }
-                    else {
-                        var otherMember = this.getOtherMemberIfOneToOneChannel();
-                        if (otherMember) {
-                            result = otherMember.name || otherMember.id || '';
-                        }
-                        else {
-                            result = '#';
-                        }
-                    }
-                }
-                var words = result.split(' ');
-                var initials;
-                if (this.initialsType === 'first-letter-of-each-word') {
-                    initials = words.map(function (w) { return w.charAt(0) || ''; }).join('');
+        AvatarComponent.prototype.setFallbackChannelImage = function () {
+            if (this.type !== 'channel') {
+                this.fallbackChannelImage = undefined;
+            }
+            else {
+                var otherMember = this.getOtherMemberIfOneToOneChannel();
+                if (otherMember) {
+                    this.fallbackChannelImage = otherMember.image;
                 }
                 else {
-                    initials = words[0].charAt(0) || '';
+                    this.fallbackChannelImage = undefined;
                 }
-                return initials;
-            },
-            enumerable: false,
-            configurable: true
-        });
-        Object.defineProperty(AvatarComponent.prototype, "fallbackChannelImage", {
-            get: function () {
-                if (this.type !== 'channel') {
-                    return undefined;
+            }
+        };
+        AvatarComponent.prototype.setInitials = function () {
+            var _a, _b, _c, _d, _e;
+            var result = '';
+            if (this.type === 'user') {
+                result = ((_a = this.name) === null || _a === void 0 ? void 0 : _a.toString()) || '';
+            }
+            else if (this.type === 'channel') {
+                if ((_c = (_b = this.channel) === null || _b === void 0 ? void 0 : _b.data) === null || _c === void 0 ? void 0 : _c.name) {
+                    result = (_e = (_d = this.channel) === null || _d === void 0 ? void 0 : _d.data) === null || _e === void 0 ? void 0 : _e.name;
                 }
                 else {
                     var otherMember = this.getOtherMemberIfOneToOneChannel();
                     if (otherMember) {
-                        return otherMember.image;
+                        result = otherMember.name || otherMember.id || '';
                     }
                     else {
-                        return undefined;
+                        result = '#';
                     }
                 }
-            },
-            enumerable: false,
-            configurable: true
-        });
+            }
+            var words = result.split(' ');
+            var initials;
+            if (this.initialsType === 'first-letter-of-each-word') {
+                initials = words.map(function (w) { return w.charAt(0) || ''; }).join('');
+            }
+            else {
+                initials = words[0].charAt(0) || '';
+            }
+            this.initials = initials;
+        };
+        AvatarComponent.prototype.updateIsOnlineSubscription = function () {
+            var _this = this;
+            var _a, _b;
+            if (this.channel) {
+                var otherMember_1 = this.getOtherMemberIfOneToOneChannel();
+                if (otherMember_1) {
+                    this.isOnline = otherMember_1.online || false;
+                    this.isOnlineSubscription = this.chatClientService.events$
+                        .pipe(operators.filter(function (e) { return e.eventType === 'user.presence.changed'; }))
+                        .subscribe(function (event) {
+                        var _a;
+                        if (((_a = event.event.user) === null || _a === void 0 ? void 0 : _a.id) === otherMember_1.id) {
+                            _this.ngZone.run(function () {
+                                var _a;
+                                _this.isOnline = ((_a = event.event.user) === null || _a === void 0 ? void 0 : _a.online) || false;
+                            });
+                        }
+                    });
+                }
+                else {
+                    (_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();
+            }
+        };
+        AvatarComponent.prototype.ngAfterViewInit = function () {
+            this.isViewInited = true;
+        };
         AvatarComponent.prototype.getOtherMemberIfOneToOneChannel = function () {
             var _this = this;
             var _a, _b;
-            var otherMembers = Object.values(((_b = (_a = this.channel) === null || _a === void 0 ? void 0 : _a.state) === null || _b === void 0 ? void 0 : _b.members) || {}).filter(function (m) { var _a; return m.user_id !== ((_a = _this.chatClientService.chatClient.user) === null || _a === void 0 ? void 0 : _a.id); });
+            var otherMembers = Object.values(((_b = (_a = this.channel) === null || _a === void 0 ? void 0 : _a.state) === null || _b === void 0 ? void 0 : _b.members) || {}).filter(function (m) { return m.user_id !== _this.userId; });
             if (otherMembers.length === 1) {
                 return otherMembers[0].user;
             }
@@ -3229,7 +3253,7 @@
         };
         return AvatarComponent;
     }());
-    AvatarComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.5", ngImport: i0__namespace, type: AvatarComponent, deps: [{ token: ChatClientService }, { token: i0__namespace.NgZone }], target: i0__namespace.ɵɵFactoryTarget.Component });
+    AvatarComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.5", ngImport: i0__namespace, type: AvatarComponent, deps: [{ token: ChatClientService }, { token: i0__namespace.NgZone }, { token: i0__namespace.ChangeDetectorRef }], target: i0__namespace.ɵɵFactoryTarget.Component });
     AvatarComponent.ɵcmp = i0__namespace.ɵɵ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__namespace, 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__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
     i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.5", ngImport: i0__namespace, type: AvatarComponent, decorators: [{
                 type: i0.Component,
@@ -3238,7 +3262,7 @@
                         templateUrl: './avatar.component.html',
                         styleUrls: ['./avatar.component.scss'],
                     }]
-            }], ctorParameters: function () { return [{ type: ChatClientService }, { type: i0__namespace.NgZone }]; }, propDecorators: { name: [{
+            }], ctorParameters: function () { return [{ type: ChatClientService }, { type: i0__namespace.NgZone }, { type: i0__namespace.ChangeDetectorRef }]; }, propDecorators: { name: [{
                     type: i0.Input
                 }], imageUrl: [{
                     type: i0.Input
@@ -5544,6 +5568,11 @@
             this.isLoading = true;
             this.reactions = [];
             this.shouldHandleReactionClick = true;
+            this.existingReactions = [];
+            this.reactionsCount = 0;
+            this.reactionOptions = [];
+            this.subscriptions = [];
+            this.isViewInited = false;
             this.isOpenChange = function (isOpen) {
                 _this.selectedReactionType = isOpen ? _this.selectedReactionType : undefined;
             };
@@ -5554,6 +5583,16 @@
                 }
             };
         }
+        MessageReactionsComponent.prototype.ngOnInit = function () {
+            var _this = this;
+            this.subscriptions.push(this.messageReactionsService.reactions$.subscribe(function (reactions) {
+                _this.reactionOptions = Object.keys(reactions);
+                _this.setExistingReactions();
+                if (_this.isViewInited) {
+                    _this.cdRef.detectChanges();
+                }
+            }));
+        };
         MessageReactionsComponent.prototype.ngOnChanges = function (changes) {
             var _this = this;
             if (changes.isSelectorOpen) {
@@ -5561,6 +5600,9 @@
                     ? setTimeout(function () { return _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) {
                 var reactionsCount = Object.keys(this.messageReactionCounts).reduce(function (acc, key) { return acc + (_this.messageReactionCounts[key] || 0); }, 0);
                 this.shouldHandleReactionClick =
@@ -5568,37 +5610,18 @@
                         !!this.messageReactionsService.customReactionClickHandler;
             }
         };
+        MessageReactionsComponent.prototype.ngAfterViewInit = function () {
+            this.isViewInited = true;
+        };
         MessageReactionsComponent.prototype.ngAfterViewChecked = function () {
             if (this.tooltipText && !this.tooltipPositions) {
                 this.setTooltipPosition();
                 this.cdRef.detectChanges();
             }
         };
-        Object.defineProperty(MessageReactionsComponent.prototype, "existingReactions", {
-            get: function () {
-                var _this = this;
-                return Object.keys(this.messageReactionCounts)
-                    .filter(function (k) { return _this.reactionOptions.indexOf(k) !== -1; })
-                    .filter(function (k) { return _this.messageReactionCounts[k] > 0; });
-            },
-            enumerable: false,
-            configurable: true
-        });
-        Object.defineProperty(MessageReactionsComponent.prototype, "reactionsCount", {
-            get: function () {
-                var _this = this;
-                return this.existingReactions.reduce(function (total, reaction) { return total + _this.messageReactionCounts[reaction]; }, 0);
-            },
-            enumerable: false,
-            configurable: true
-        });
-        Object.defineProperty(MessageReactionsComponent.prototype, "reactionOptions", {
-            get: function () {
-                return Object.keys(this.messageReactionsService.reactions);
-            },
-            enumerable: false,
-            configurable: true
-        });
+        MessageReactionsComponent.prototype.ngOnDestroy = function () {
+            this.subscriptions.forEach(function (s) { return s.unsubscribe(); });
+        };
         MessageReactionsComponent.prototype.getLatestUserByReaction = function (reactionType) {
             var _a;
             return (_a = this.latestReactions.find(function (r) { return r.type === reactionType && r.user; })) === null || _a === void 0 ? void 0 : _a.user;
@@ -5740,6 +5763,13 @@
                 });
             });
         };
+        MessageReactionsComponent.prototype.setExistingReactions = function () {
+            var _this = this;
+            this.existingReactions = Object.keys(this.messageReactionCounts)
+                .filter(function (k) { return _this.reactionOptions.indexOf(k) !== -1; })
+                .filter(function (k) { return _this.messageReactionCounts[k] > 0; });
+            this.reactionsCount = this.existingReactions.reduce(function (total, reaction) { return total + _this.messageReactionCounts[reaction]; }, 0);
+        };
         return MessageReactionsComponent;
     }());
     MessageReactionsComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.5", ngImport: i0__namespace, type: MessageReactionsComponent, deps: [{ token: i0__namespace.ChangeDetectorRef }, { token: ChannelService }, { token: MessageReactionsService }, { token: CustomTemplatesService }, { token: ThemeService }], target: i0__namespace.ɵɵFactoryTarget.Component });