stream-chat-angular 4.13.0 → 4.14.0

package/assets/version.d.ts

@@ -1 +1 @@
-export declare const version = "4.13.0";
+export declare const version = "4.14.0";

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

@@ -355,7 +355,7 @@
         return (kind === "a" ? f.call(receiver, value) : f ? f.value = value : state.set(receiver, value)), value;
     }
 
-    var version = '4.13.0';
+    var version = '4.14.0';
 
     /**
      * The `NotificationService` can be used to add or remove notifications. By default the [`NotificationList`](../components/NotificationListComponent.mdx) component displays the currently active notifications.
@@ -2677,15 +2677,73 @@
      * 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) {
+        function AvatarComponent(chatClientService, ngZone) {
             this.chatClientService = chatClientService;
+            this.ngZone = ngZone;
             /**
              * The size in pixels of the avatar image.
              */
             this.size = 32;
+            /**
+             * If a channel avatar is displayed, and if the channel has exactly two members a green dot is displayed if the other member is online. Set this flag to `false` to turn off this behavior.
+             */
+            this.showOnlineIndicator = true;
             this.isLoaded = false;
             this.isError = false;
+            this.isOnline = false;
         }
+        AvatarComponent.prototype.ngOnChanges = function (changes) {
+            var _a, _b, _c;
+            return __awaiter(this, void 0, void 0, function () {
+                var otherMember_1, response, error_1;
+                var _this = this;
+                return __generator(this, function (_f) {
+                    switch (_f.label) {
+                        case 0:
+                            if (!changes['channel']) return [3 /*break*/, 8];
+                            if (!this.channel) return [3 /*break*/, 7];
+                            otherMember_1 = this.getOtherMemberIfOneToOneChannel();
+                            if (!otherMember_1) return [3 /*break*/, 5];
+                            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;
+                                    });
+                                }
+                            });
+                            _f.label = 1;
+                        case 1:
+                            _f.trys.push([1, 3, , 4]);
+                            return [4 /*yield*/, this.chatClientService.chatClient.queryUsers({
+                                    id: { $eq: otherMember_1.id },
+                                })];
+                        case 2:
+                            response = _f.sent();
+                            this.isOnline = ((_a = response.users[0]) === null || _a === void 0 ? void 0 : _a.online) || false;
+                            return [3 /*break*/, 4];
+                        case 3:
+                            error_1 = _f.sent();
+                            // Fallback if we can't query user -> for example due to permission problems
+                            this.isOnline = otherMember_1.online || false;
+                            return [3 /*break*/, 4];
+                        case 4: return [3 /*break*/, 6];
+                        case 5:
+                            (_b = this.isOnlineSubscription) === null || _b === void 0 ? void 0 : _b.unsubscribe();
+                            _f.label = 6;
+                        case 6: return [3 /*break*/, 8];
+                        case 7:
+                            this.isOnline = false;
+                            (_c = this.isOnlineSubscription) === null || _c === void 0 ? void 0 : _c.unsubscribe();
+                            _f.label = 8;
+                        case 8: return [2 /*return*/];
+                    }
+                });
+            });
+        };
         Object.defineProperty(AvatarComponent.prototype, "initials", {
             get: function () {
                 var _a, _b, _c, _d, _e;
@@ -2743,8 +2801,8 @@
         };
         return AvatarComponent;
     }());
-    AvatarComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.5", ngImport: i0__namespace, type: AvatarComponent, deps: [{ token: ChatClientService }], 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" }, 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: 'calc(var(--str-chat__spacing-px, 1px) * ' + size / 2 + ')',\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      isLoaded ? ' str-chat__avatar-image--loaded' : ''\n    }}\"\n    src=\"{{ imageUrl || fallbackChannelImage }}\"\n    alt=\"{{ initials }}\"\n    data-testid=\"avatar-img\"\n    (load)=\"isLoaded = true\"\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  />\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", styles: [""], directives: [{ type: i7__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
+    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.ɵ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" }, 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: 'calc(var(--str-chat__spacing-px, 1px) * ' + size / 2 + ')',\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      isLoaded ? ' str-chat__avatar-image--loaded' : ''\n    }}\"\n    src=\"{{ imageUrl || fallbackChannelImage }}\"\n    alt=\"{{ initials }}\"\n    data-testid=\"avatar-img\"\n    (load)=\"isLoaded = true\"\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  />\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    data-testid=\"online-indicator\"\n    *ngIf=\"isOnline\"\n    class=\"str-chat__avatar--online-indicator\"\n  ></div>\n</div>\n", styles: [""], directives: [{ type: i7__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,
                 args: [{
@@ -2752,7 +2810,7 @@
                         templateUrl: './avatar.component.html',
                         styleUrls: ['./avatar.component.scss'],
                     }]
-            }], ctorParameters: function () { return [{ type: ChatClientService }]; }, propDecorators: { name: [{
+            }], ctorParameters: function () { return [{ type: ChatClientService }, { type: i0__namespace.NgZone }]; }, propDecorators: { name: [{
                     type: i0.Input
                 }], imageUrl: [{
                     type: i0.Input
@@ -2766,6 +2824,8 @@
                     type: i0.Input
                 }], type: [{
                     type: i0.Input
+                }], showOnlineIndicator: [{
+                    type: i0.Input
                 }] } });
 
     /**
@@ -2946,7 +3006,7 @@
         return AvatarPlaceholderComponent;
     }());
     AvatarPlaceholderComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.5", ngImport: i0__namespace, type: AvatarPlaceholderComponent, deps: [{ token: CustomTemplatesService }], target: i0__namespace.ɵɵFactoryTarget.Component });
-    AvatarPlaceholderComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.5", type: AvatarPlaceholderComponent, selector: "stream-avatar-placeholder", inputs: { name: "name", imageUrl: "imageUrl", size: "size", location: "location", channel: "channel", user: "user", type: "type" }, ngImport: i0__namespace, template: "<ng-template\n  #defaultAvatar\n  let-name=\"name\"\n  let-imageUrl=\"imageUrl\"\n  let-size=\"size\"\n  let-type=\"type\"\n  let-channel=\"channel\"\n  let-user=\"user\"\n  let-location=\"location\"\n>\n  <stream-avatar\n    [name]=\"name\"\n    [imageUrl]=\"imageUrl\"\n    [size]=\"size\"\n    [type]=\"type\"\n    [channel]=\"channel\"\n    [user]=\"user\"\n    [location]=\"location\"\n  ></stream-avatar>\n</ng-template>\n<ng-container\n  *ngTemplateOutlet=\"\n    (customTemplatesService.avatarTemplate$ | async) || defaultAvatar;\n    context: getAvatarContext()\n  \"\n></ng-container>\n", components: [{ type: AvatarComponent, selector: "stream-avatar", inputs: ["name", "imageUrl", "size", "location", "channel", "user", "type"] }], directives: [{ type: i7__namespace.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }], pipes: { "async": i7__namespace.AsyncPipe } });
+    AvatarPlaceholderComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.5", type: AvatarPlaceholderComponent, selector: "stream-avatar-placeholder", inputs: { name: "name", imageUrl: "imageUrl", size: "size", location: "location", channel: "channel", user: "user", type: "type" }, ngImport: i0__namespace, template: "<ng-template\n  #defaultAvatar\n  let-name=\"name\"\n  let-imageUrl=\"imageUrl\"\n  let-size=\"size\"\n  let-type=\"type\"\n  let-channel=\"channel\"\n  let-user=\"user\"\n  let-location=\"location\"\n>\n  <stream-avatar\n    [name]=\"name\"\n    [imageUrl]=\"imageUrl\"\n    [size]=\"size\"\n    [type]=\"type\"\n    [channel]=\"channel\"\n    [user]=\"user\"\n    [location]=\"location\"\n  ></stream-avatar>\n</ng-template>\n<ng-container\n  *ngTemplateOutlet=\"\n    (customTemplatesService.avatarTemplate$ | async) || defaultAvatar;\n    context: getAvatarContext()\n  \"\n></ng-container>\n", components: [{ type: AvatarComponent, selector: "stream-avatar", inputs: ["name", "imageUrl", "size", "location", "channel", "user", "type", "showOnlineIndicator"] }], directives: [{ type: i7__namespace.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }], pipes: { "async": i7__namespace.AsyncPipe } });
     i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.5", ngImport: i0__namespace, type: AvatarPlaceholderComponent, decorators: [{
                 type: i0.Component,
                 args: [{