stream-chat-angular 2.19.0 → 2.20.0

package/fesm2015/stream-chat-angular.js

@@ -17,7 +17,7 @@ import transliterate from '@stream-io/transliterate';
 import * as i6$1 from 'angular-mentions';
 import { MentionModule } from 'angular-mentions';
 
-const version = '2.19.0';
+const version = '2.20.0';
 
 /**
  * The `NotificationService` can be used to add or remove notifications. By default the [`NotificationList`](../components/NotificationListComponent.mdx) component displays the currently active notifications.
@@ -29,40 +29,56 @@ class NotificationService {
     }
     /**
      * Displays a notification for the given amount of time.
-     * @param text The text of the notification
+     * @param content The text of the notification or the HTML template for the notification
      * @param type The type of the notification
      * @param timeout The number of milliseconds while the notification should be visible
-     * @param translateParams Translation parameters for the `text`
+     * @param translateParams Translation parameters for the `content` (for text notifications)
+     * @param templateContext The input of the notification template (for HTML notifications)
      * @returns A method to clear the notification (before the timeout).
      */
-    addTemporaryNotification(text, type = 'error', timeout = 5000, translateParams) {
-        this.addNotification(text, type, translateParams);
-        const id = setTimeout(() => this.removeNotification(text), timeout);
-        return () => {
+    addTemporaryNotification(content, type = 'error', timeout = 5000, translateParams, templateContext) {
+        const notification = this.createNotification(content, type, translateParams, templateContext);
+        const id = setTimeout(() => this.removeNotification(notification.id), timeout);
+        notification.dismissFn = () => {
             clearTimeout(id);
-            this.removeNotification(text);
+            this.removeNotification(notification.id);
         };
+        this.notificationsSubject.next([
+            ...this.notificationsSubject.getValue(),
+            notification,
+        ]);
+        return notification.dismissFn;
     }
     /**
      * Displays a notification, that will be visible until it's removed.
-     * @param text The text of the notification
+     * @param content The text of the notification or the HTML template for the notification
      * @param type The type of the notification
-     * @param translateParams Translation parameters for the `text`
+     * @param translateParams Translation parameters for the `content` (for text notifications)
+     * @param templateContext The input of the notification template (for HTML notifications)
      * @returns A method to clear the notification.
      */
-    addPermanentNotification(text, type = 'error', translateParams) {
-        this.addNotification(text, type, translateParams);
-        return () => this.removeNotification(text);
-    }
-    addNotification(text, type, translateParams) {
+    addPermanentNotification(content, type = 'error', translateParams, templateContext) {
+        const notification = this.createNotification(content, type, translateParams, templateContext);
         this.notificationsSubject.next([
             ...this.notificationsSubject.getValue(),
-            { text, type, translateParams },
+            notification,
         ]);
+        return notification.dismissFn;
+    }
+    createNotification(content, type, translateParams, templateContext) {
+        const id = new Date().getTime().toString() + Math.random().toString();
+        return {
+            id,
+            [typeof content === 'string' ? 'text' : 'template']: content,
+            type,
+            translateParams,
+            templateContext,
+            dismissFn: () => this.removeNotification(id),
+        };
     }
-    removeNotification(text) {
+    removeNotification(id) {
         const notifications = this.notificationsSubject.getValue();
-        const index = notifications.findIndex((n) => n.text === text);
+        const index = notifications.findIndex((n) => n.id === id);
         if (index === -1) {
             return;
         }
@@ -89,9 +105,11 @@ class ChatClientService {
         this.notificationSubject = new ReplaySubject(1);
         this.connectionStateSubject = new ReplaySubject(1);
         this.appSettingsSubject = new BehaviorSubject(undefined);
+        this.pendingInvitesSubject = new BehaviorSubject([]);
         this.notification$ = this.notificationSubject.asObservable();
         this.connectionState$ = this.connectionStateSubject.asObservable();
         this.appSettings$ = this.appSettingsSubject.asObservable();
+        this.pendingInvites$ = this.pendingInvitesSubject.asObservable();
     }
     /**
      * Creates a [`StreamChat`](https://github.com/GetStream/stream-chat-js/blob/668b3e5521339f4e14fc657834531b4c8bf8176b/src/client.ts#L124) instance using the provided `apiKey`, and connects a user with the given meta data and token. More info about [connecting users](https://getstream.io/chat/docs/javascript/init_and_users/?language=javascript) can be found in the platform documentation.
@@ -100,16 +118,20 @@ class ChatClientService {
      * @param userTokenOrProvider
      */
     init(apiKey, userOrId, userTokenOrProvider) {
+        var _a;
         return __awaiter(this, void 0, void 0, function* () {
             this.chatClient = StreamChat.getInstance(apiKey);
+            this.chatClient.devToken;
             yield this.ngZone.runOutsideAngular(() => __awaiter(this, void 0, void 0, function* () {
                 const user = typeof userOrId === 'string' ? { id: userOrId } : userOrId;
                 yield this.chatClient.connectUser(user, userTokenOrProvider);
                 this.chatClient.setUserAgent(`stream-chat-angular-${version}-${this.chatClient.getUserAgent()}`);
-                this.chatClient.getAppSettings;
             }));
+            const channels = yield this.chatClient.queryChannels({ invite: 'pending' }, {}, { user_id: (_a = this.chatClient.user) === null || _a === void 0 ? void 0 : _a.id });
+            this.pendingInvitesSubject.next(channels);
             this.appSettingsSubject.next(undefined);
             this.chatClient.on((e) => {
+                this.updatePendingInvites(e);
                 this.notificationSubject.next({
                     eventType: e.type,
                     event: e,
@@ -138,6 +160,7 @@ class ChatClientService {
      */
     disconnectUser() {
         return __awaiter(this, void 0, void 0, function* () {
+            this.pendingInvitesSubject.next([]);
             yield this.chatClient.disconnectUser();
         });
     }
@@ -182,6 +205,23 @@ class ChatClientService {
             return result.users;
         });
     }
+    updatePendingInvites(e) {
+        var _a, _b, _c;
+        if (((_b = (_a = e.member) === null || _a === void 0 ? void 0 : _a.user) === null || _b === void 0 ? void 0 : _b.id) === ((_c = this.chatClient.user) === null || _c === void 0 ? void 0 : _c.id) && e.channel) {
+            const pendingInvites = this.pendingInvitesSubject.getValue();
+            if (e.type === 'notification.invited') {
+                this.pendingInvitesSubject.next([...pendingInvites, e.channel]);
+            }
+            else if (e.type === 'notification.invite_accepted' ||
+                e.type === 'notification.invite_rejected') {
+                const index = pendingInvites.findIndex((i) => { var _a; return (i === null || i === void 0 ? void 0 : i.cid) === ((_a = e.channel) === null || _a === void 0 ? void 0 : _a.cid); });
+                if (index !== -1) {
+                    pendingInvites.splice(index, 1);
+                    this.pendingInvitesSubject.next([...pendingInvites]);
+                }
+            }
+        }
+    }
 }
 ChatClientService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.5", ngImport: i0, type: ChatClientService, deps: [{ token: i0.NgZone }, { token: NotificationService }], target: i0.ɵɵFactoryTarget.Injectable });
 ChatClientService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.5", ngImport: i0, type: ChatClientService, providedIn: 'root' });
@@ -244,7 +284,14 @@ class ChannelService {
         this.usersTypingInChannelSubject = new BehaviorSubject([]);
         this.usersTypingInThreadSubject = new BehaviorSubject([]);
         this.channelListSetter = (channels) => {
-            this.channelsSubject.next(channels);
+            const currentChannels = this.channelsSubject.getValue() || [];
+            const newChannels = channels.filter((c) => !currentChannels.find((channel) => channel.cid === c.cid));
+            const deletedChannels = currentChannels.filter((c) => !(channels === null || channels === void 0 ? void 0 : channels.find((channel) => channel.cid === c.cid)));
+            this.addChannelsFromNotification(newChannels);
+            this.removeChannelsFromChannelList(deletedChannels.map((c) => c.cid));
+            if (!newChannels.length && !deletedChannels.length) {
+                this.channelsSubject.next(channels);
+            }
         };
         this.messageListSetter = (messages) => {
             this.activeChannelMessagesSubject.next(messages);
@@ -641,75 +688,80 @@ class ChannelService {
         });
     }
     handleNotification(notification) {
-        return __awaiter(this, void 0, void 0, function* () {
-            switch (notification.eventType) {
-                case 'notification.message_new': {
-                    yield this.ngZone.run(() => __awaiter(this, void 0, void 0, function* () {
-                        if (this.customNewMessageNotificationHandler) {
-                            this.customNewMessageNotificationHandler(notification, this.channelListSetter);
-                        }
-                        else {
-                            yield this.handleNewMessageNotification(notification);
-                        }
-                    }));
-                    break;
-                }
-                case 'notification.added_to_channel': {
-                    yield this.ngZone.run(() => __awaiter(this, void 0, void 0, function* () {
-                        if (this.customAddedToChannelNotificationHandler) {
-                            this.customAddedToChannelNotificationHandler(notification, this.channelListSetter);
-                        }
-                        else {
-                            yield this.handleAddedToChannelNotification(notification);
-                        }
-                    }));
-                    break;
-                }
-                case 'notification.removed_from_channel': {
-                    this.ngZone.run(() => {
-                        if (this.customRemovedFromChannelNotificationHandler) {
-                            this.customRemovedFromChannelNotificationHandler(notification, this.channelListSetter);
-                        }
-                        else {
-                            this.handleRemovedFromChannelNotification(notification);
-                        }
-                    });
-                }
+        switch (notification.eventType) {
+            case 'notification.message_new': {
+                this.ngZone.run(() => {
+                    if (this.customNewMessageNotificationHandler) {
+                        this.customNewMessageNotificationHandler(notification, this.channelListSetter);
+                    }
+                    else {
+                        this.handleNewMessageNotification(notification);
+                    }
+                });
+                break;
             }
-        });
+            case 'notification.added_to_channel': {
+                this.ngZone.run(() => {
+                    if (this.customAddedToChannelNotificationHandler) {
+                        this.customAddedToChannelNotificationHandler(notification, this.channelListSetter);
+                    }
+                    else {
+                        this.handleAddedToChannelNotification(notification);
+                    }
+                });
+                break;
+            }
+            case 'notification.removed_from_channel': {
+                this.ngZone.run(() => {
+                    if (this.customRemovedFromChannelNotificationHandler) {
+                        this.customRemovedFromChannelNotificationHandler(notification, this.channelListSetter);
+                    }
+                    else {
+                        this.handleRemovedFromChannelNotification(notification);
+                    }
+                });
+            }
+        }
     }
     handleRemovedFromChannelNotification(notification) {
         const channelIdToBeRemoved = notification.event.channel.cid;
-        this.removeFromChannelList(channelIdToBeRemoved);
+        this.removeChannelsFromChannelList([channelIdToBeRemoved]);
     }
     handleNewMessageNotification(notification) {
-        return __awaiter(this, void 0, void 0, function* () {
-            yield this.addChannelFromNotification(notification);
-        });
+        if (notification.event.channel) {
+            this.addChannelsFromNotification([notification.event.channel]);
+        }
     }
     handleAddedToChannelNotification(notification) {
-        return __awaiter(this, void 0, void 0, function* () {
-            yield this.addChannelFromNotification(notification);
-        });
+        if (notification.event.channel) {
+            this.addChannelsFromNotification([notification.event.channel]);
+        }
     }
-    addChannelFromNotification(notification) {
-        var _a, _b;
-        return __awaiter(this, void 0, void 0, function* () {
-            const channel = this.chatClientService.chatClient.channel((_a = notification.event.channel) === null || _a === void 0 ? void 0 : _a.type, (_b = notification.event.channel) === null || _b === void 0 ? void 0 : _b.id);
-            yield channel.watch();
+    addChannelsFromNotification(channelResponses) {
+        const newChannels = [];
+        channelResponses.forEach((channelResponse) => {
+            const channel = this.chatClientService.chatClient.channel(channelResponse.type, channelResponse.id);
+            void channel.watch();
             this.watchForChannelEvents(channel);
-            this.channelsSubject.next([
-                channel,
-                ...(this.channelsSubject.getValue() || []),
-            ]);
+            newChannels.push(channel);
         });
+        this.channelsSubject.next([
+            ...newChannels,
+            ...(this.channelsSubject.getValue() || []),
+        ]);
     }
-    removeFromChannelList(cid) {
-        const channels = this.channels.filter((c) => c.cid !== cid);
+    removeChannelsFromChannelList(cids) {
+        var _a;
+        const channels = this.channels.filter((c) => !cids.includes(c.cid || ''));
         if (channels.length < this.channels.length) {
             this.channelsSubject.next(channels);
-            if (this.activeChannelSubject.getValue().cid === cid) {
-                this.setAsActiveChannel(channels[0]);
+            if (cids.includes(((_a = this.activeChannelSubject.getValue()) === null || _a === void 0 ? void 0 : _a.cid) || '')) {
+                if (channels.length > 0) {
+                    this.setAsActiveChannel(channels[0]);
+                }
+                else {
+                    this.activeChannelSubject.next(undefined);
+                }
             }
         }
     }
@@ -927,10 +979,10 @@ class ChannelService {
         this.channelsSubject.next([channel, ...this.channels]);
     }
     handleChannelHidden(event) {
-        this.removeFromChannelList(event.channel.cid);
+        this.removeChannelsFromChannelList([event.channel.cid]);
     }
     handleChannelDeleted(event) {
-        this.removeFromChannelList(event.channel.cid);
+        this.removeChannelsFromChannelList([event.channel.cid]);
     }
     handleChannelVisible(event, channel) {
         if (!this.channels.find((c) => c.cid === event.cid)) {
@@ -2354,12 +2406,15 @@ class NotificationListComponent {
         this.notificationService = notificationService;
         this.notifications$ = this.notificationService.notifications$;
     }
-    trackByItem(_, item) {
-        return item;
+    trackById(_, item) {
+        return item.id;
+    }
+    getTemplateContext(notification) {
+        return Object.assign(Object.assign({}, notification.templateContext), { dismissFn: notification.dismissFn });
     }
 }
 NotificationListComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.5", ngImport: i0, type: NotificationListComponent, deps: [{ token: NotificationService }], target: i0.ɵɵFactoryTarget.Component });
-NotificationListComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.5", type: NotificationListComponent, selector: "stream-notification-list", ngImport: i0, template: "<div class=\"str-chat__list-notifications\">\n  <stream-notification\n    *ngFor=\"let notification of notifications$ | async; trackBy: trackByItem\"\n    [type]=\"notification.type\"\n    ><div data-testclass=\"notification-content\">\n      {{ notification.text | translate: notification.translateParams }}\n    </div></stream-notification\n  >\n</div>\n", components: [{ type: NotificationComponent, selector: "stream-notification", inputs: ["type"] }], directives: [{ type: i6.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }], pipes: { "async": i6.AsyncPipe, "translate": i2.TranslatePipe } });
+NotificationListComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.5", type: NotificationListComponent, selector: "stream-notification-list", ngImport: i0, template: "<div class=\"str-chat__list-notifications\">\n  <stream-notification\n    *ngFor=\"let notification of notifications$ | async; trackBy: trackById\"\n    [type]=\"notification.type\"\n  >\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: getTemplateContext(notification)\n        \"\n      ></ng-container>\n    </ng-container>\n  </stream-notification>\n</div>\n", components: [{ type: NotificationComponent, selector: "stream-notification", inputs: ["type"] }], directives: [{ type: i6.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i6.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i6.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }], pipes: { "async": i6.AsyncPipe, "translate": i2.TranslatePipe } });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.5", ngImport: i0, type: NotificationListComponent, decorators: [{
             type: Component,
             args: [{
@@ -2660,7 +2715,7 @@ class ChannelHeaderComponent {
     }
 }
 ChannelHeaderComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.5", ngImport: i0, type: ChannelHeaderComponent, deps: [{ token: ChannelService }, { token: ChannelListToggleService }], target: i0.ɵɵFactoryTarget.Component });
-ChannelHeaderComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.5", type: ChannelHeaderComponent, selector: "stream-channel-header", ngImport: i0, template: "<div class=\"str-chat__header-livestream\">\n  <div\n    class=\"str-chat__header-hamburger\"\n    (click)=\"toggleMenu($event)\"\n    (keyup.enter)=\"toggleMenu($event)\"\n  >\n    <stream-icon icon=\"menu\"></stream-icon>\n  </div>\n  <stream-avatar\n    imageUrl=\"{{ activeChannel?.data?.image }}\"\n    name=\"{{ activeChannel?.data?.name }}\"\n  ></stream-avatar>\n  <div class=\"str-chat__header-livestream-left\">\n    <p data-testid=\"name\" class=\"str-chat__header-livestream-left--title\">\n      {{ activeChannel?.data?.name }}\n    </p>\n    <p data-testid=\"info\" class=\"str-chat__header-livestream-left--members\">\n      {{'streamChat.{{ memberCount }} members' | translate:memberCountParam}}\n      {{canReceiveConnectEvents ? ('streamChat.{{ watcherCount }} online' |\n      translate:watcherCountParam) : ''}}\n    </p>\n  </div>\n</div>\n", components: [{ type: IconComponent, selector: "stream-icon", inputs: ["icon", "size"] }, { type: AvatarComponent, selector: "stream-avatar", inputs: ["name", "imageUrl", "size"] }], pipes: { "translate": i2.TranslatePipe } });
+ChannelHeaderComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.5", type: ChannelHeaderComponent, selector: "stream-channel-header", inputs: { channelActionsTemplate: "channelActionsTemplate" }, ngImport: i0, template: "<div class=\"str-chat__header-livestream\">\n  <div\n    class=\"str-chat__header-hamburger\"\n    (click)=\"toggleMenu($event)\"\n    (keyup.enter)=\"toggleMenu($event)\"\n  >\n    <stream-icon icon=\"menu\"></stream-icon>\n  </div>\n  <stream-avatar\n    imageUrl=\"{{ activeChannel?.data?.image }}\"\n    name=\"{{ activeChannel?.data?.name }}\"\n  ></stream-avatar>\n  <div class=\"str-chat__header-livestream-left\">\n    <p data-testid=\"name\" class=\"str-chat__header-livestream-left--title\">\n      {{ activeChannel?.data?.name }}\n    </p>\n    <p data-testid=\"info\" class=\"str-chat__header-livestream-left--members\">\n      {{'streamChat.{{ memberCount }} members' | translate:memberCountParam}}\n      {{canReceiveConnectEvents ? ('streamChat.{{ watcherCount }} online' |\n      translate:watcherCountParam) : ''}}\n    </p>\n  </div>\n  <ng-container *ngIf=\"channelActionsTemplate\">\n    <ng-container\n      *ngTemplateOutlet=\"\n        channelActionsTemplate;\n        context: { channel: activeChannel }\n      \"\n    ></ng-container>\n  </ng-container>\n</div>\n", components: [{ type: IconComponent, selector: "stream-icon", inputs: ["icon", "size"] }, { type: AvatarComponent, selector: "stream-avatar", inputs: ["name", "imageUrl", "size"] }], directives: [{ type: i6.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i6.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }], pipes: { "translate": i2.TranslatePipe } });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.5", ngImport: i0, type: ChannelHeaderComponent, decorators: [{
             type: Component,
             args: [{
@@ -2668,7 +2723,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.5", ngImpor
                     templateUrl: './channel-header.component.html',
                     styles: [],
                 }]
-        }], ctorParameters: function () { return [{ type: ChannelService }, { type: ChannelListToggleService }]; } });
+        }], ctorParameters: function () { return [{ type: ChannelService }, { type: ChannelListToggleService }]; }, propDecorators: { channelActionsTemplate: [{
+                type: Input
+            }] } });
 
 /**
  * The `ChannelPreview` component displays a channel preview in the channel list, it consists of the image, name and latest message of the channel.