stream-chat-angular 3.0.0-beta.6 → 3.0.0-beta.9

package/assets/version.d.ts

@@ -1 +1 @@
-export declare const version = "3.0.0-beta.6";
+export declare const version = "3.0.0-beta.9";

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

@@ -354,7 +354,7 @@
         return (kind === "a" ? f.call(receiver, value) : f ? f.value = value : state.set(receiver, value)), value;
     }
 
-    var version = '3.0.0-beta.6';
+    var version = '3.0.0-beta.9';
 
     /**
      * The `NotificationService` can be used to add or remove notifications. By default the [`NotificationList`](../components/NotificationListComponent.mdx) component displays the currently active notifications.
@@ -486,7 +486,8 @@
                                 }); })];
                         case 1:
                             _d.sent();
-                            return [4 /*yield*/, this.chatClient.queryChannels({ invite: 'pending' }, {}, { user_id: (_a = this.chatClient.user) === null || _a === void 0 ? void 0 : _a.id })];
+                            return [4 /*yield*/, this.chatClient.queryChannels({ invite: 'pending' }, // TODO: find out why we need this typecast
+                                {}, { user_id: (_a = this.chatClient.user) === null || _a === void 0 ? void 0 : _a.id })];
                         case 2:
                             channels = _d.sent();
                             this.pendingInvitesSubject.next(channels);
@@ -628,27 +629,13 @@
                     }]
             }], ctorParameters: function () { return [{ type: i0__namespace.NgZone }, { type: NotificationService }]; } });
 
-    var createMessagePreview = function (user, text, attachments, mentionedUsers, parentId, quotedMessageId) {
+    var createMessagePreview = function (user, text, attachments, mentionedUsers, parentId, quotedMessageId, customData) {
         if (attachments === void 0) { attachments = []; }
         if (mentionedUsers === void 0) { mentionedUsers = []; }
         if (parentId === void 0) { parentId = undefined; }
         if (quotedMessageId === void 0) { quotedMessageId = undefined; }
         var clientSideId = user.id + "-" + uuid.v4();
-        return {
-            __html: text,
-            created_at: new Date(),
-            html: text,
-            id: clientSideId,
-            reactions: [],
-            status: 'sending',
-            text: text,
-            type: 'regular',
-            user: user,
-            attachments: attachments,
-            mentioned_users: mentionedUsers,
-            parent_id: parentId,
-            quoted_message_id: quotedMessageId,
-        };
+        return Object.assign({ __html: text, created_at: new Date(), html: text, id: clientSideId, reactions: [], status: 'sending', text: text, type: 'regular', user: user, attachments: attachments, mentioned_users: mentionedUsers, parent_id: parentId, quoted_message_id: quotedMessageId }, customData);
     };
 
     var getReadBy = function (message, channel) {
@@ -914,15 +901,14 @@
          * Adds a reaction to a message.
          * @param messageId The id of the message to add the reaction to
          * @param reactionType The type of the reaction
+         * @param customData
          */
-        ChannelService.prototype.addReaction = function (messageId, reactionType) {
+        ChannelService.prototype.addReaction = function (messageId, reactionType, customData) {
             var _a;
             return __awaiter(this, void 0, void 0, function () {
                 return __generator(this, function (_h) {
                     switch (_h.label) {
-                        case 0: return [4 /*yield*/, ((_a = this.activeChannelSubject.getValue()) === null || _a === void 0 ? void 0 : _a.sendReaction(messageId, {
-                                type: reactionType,
-                            }))];
+                        case 0: return [4 /*yield*/, ((_a = this.activeChannelSubject.getValue()) === null || _a === void 0 ? void 0 : _a.sendReaction(messageId, Object.assign({ type: reactionType }, customData)))];
                         case 1:
                             _h.sent();
                             return [2 /*return*/];
@@ -956,22 +942,24 @@
          * @param mentionedUsers Mentioned users
          * @param parentId Id of the parent message (if sending a thread reply)
          * @param quotedMessageId Id of the message to quote (if sending a quote reply)
+         * @param customData
          */
-        ChannelService.prototype.sendMessage = function (text, attachments, mentionedUsers, parentId, quotedMessageId) {
+        ChannelService.prototype.sendMessage = function (text, attachments, mentionedUsers, parentId, quotedMessageId, customData) {
             if (attachments === void 0) { attachments = []; }
             if (mentionedUsers === void 0) { mentionedUsers = []; }
             if (parentId === void 0) { parentId = undefined; }
             if (quotedMessageId === void 0) { quotedMessageId = undefined; }
+            if (customData === void 0) { customData = undefined; }
             return __awaiter(this, void 0, void 0, function () {
                 var preview, channel;
                 return __generator(this, function (_h) {
                     switch (_h.label) {
                         case 0:
-                            preview = createMessagePreview(this.chatClientService.chatClient.user, text, attachments, mentionedUsers, parentId, quotedMessageId);
+                            preview = createMessagePreview(this.chatClientService.chatClient.user, text, attachments, mentionedUsers, parentId, quotedMessageId, customData);
                             channel = this.activeChannelSubject.getValue();
                             preview.readBy = [];
                             channel.state.addMessageSorted(preview, true);
-                            return [4 /*yield*/, this.sendMessageRequest(preview)];
+                            return [4 /*yield*/, this.sendMessageRequest(preview, customData)];
                         case 1:
                             _h.sent();
                             return [2 /*return*/];
@@ -1170,7 +1158,7 @@
         ChannelService.prototype.selectMessageToQuote = function (message) {
             this.messageToQuoteSubject.next(message);
         };
-        ChannelService.prototype.sendMessageRequest = function (preview) {
+        ChannelService.prototype.sendMessageRequest = function (preview, customData) {
             var _a;
             return __awaiter(this, void 0, void 0, function () {
                 var channel, isThreadReply, response, error_1, stringError, parsedError;
@@ -1185,14 +1173,7 @@
                             _h.label = 1;
                         case 1:
                             _h.trys.push([1, 3, , 4]);
-                            return [4 /*yield*/, channel.sendMessage({
-                                    text: preview.text,
-                                    attachments: preview.attachments,
-                                    mentioned_users: (_a = preview.mentioned_users) === null || _a === void 0 ? void 0 : _a.map(function (u) { return u.id; }),
-                                    id: preview.id,
-                                    parent_id: preview.parent_id,
-                                    quoted_message_id: preview.quoted_message_id,
-                                })];
+                            return [4 /*yield*/, channel.sendMessage(Object.assign({ id: preview.id, text: preview.text, attachments: preview.attachments, mentioned_users: (_a = preview.mentioned_users) === null || _a === void 0 ? void 0 : _a.map(function (u) { return u.id; }), parent_id: preview.parent_id, quoted_message_id: preview.quoted_message_id }, customData))];
                         case 2:
                             response = _h.sent();
                             if (response === null || response === void 0 ? void 0 : response.message) {
@@ -1907,7 +1888,7 @@
          */
         AttachmentService.prototype.deleteAttachment = function (upload) {
             return __awaiter(this, void 0, void 0, function () {
-                var attachmentUploads, error_1;
+                var attachmentUploads, result, index, error_1, index;
                 return __generator(this, function (_d) {
                     switch (_d.label) {
                         case 0:
@@ -1919,18 +1900,23 @@
                             return [4 /*yield*/, this.channelService.deleteAttachment(upload)];
                         case 2:
                             _d.sent();
-                            attachmentUploads.splice(attachmentUploads.indexOf(upload), 1);
+                            result = __spreadArray([], __read(attachmentUploads));
+                            index = attachmentUploads.indexOf(upload);
+                            result.splice(index, 1);
                             return [3 /*break*/, 4];
                         case 3:
                             error_1 = _d.sent();
+                            result = attachmentUploads;
                             this.notificationService.addTemporaryNotification('streamChat.Error deleting attachment');
                             return [3 /*break*/, 4];
                         case 4: return [3 /*break*/, 6];
                         case 5:
-                            attachmentUploads.splice(attachmentUploads.indexOf(upload), 1);
+                            result = __spreadArray([], __read(attachmentUploads));
+                            index = attachmentUploads.indexOf(upload);
+                            result.splice(index, 1);
                             _d.label = 6;
                         case 6:
-                            this.attachmentUploadsSubject.next(__spreadArray([], __read(attachmentUploads)));
+                            this.attachmentUploadsSubject.next(__spreadArray([], __read(result)));
                             return [2 /*return*/];
                     }
                 });
@@ -2013,16 +1999,16 @@
         };
         AttachmentService.prototype.uploadAttachments = function (uploads) {
             return __awaiter(this, void 0, void 0, function () {
-                var attachmentUploads, result;
+                var result, attachmentUploads;
                 var _this = this;
                 return __generator(this, function (_d) {
                     switch (_d.label) {
                         case 0:
-                            attachmentUploads = this.attachmentUploadsSubject.getValue();
                             this.attachmentUploadInProgressCounterSubject.next(this.attachmentUploadInProgressCounterSubject.getValue() + 1);
                             return [4 /*yield*/, this.channelService.uploadAttachments(uploads)];
                         case 1:
                             result = _d.sent();
+                            attachmentUploads = this.attachmentUploadsSubject.getValue();
                             result.forEach(function (r) {
                                 var upload = attachmentUploads.find(function (upload) { return upload.file === r.file; });
                                 if (!upload) {
@@ -2509,6 +2495,79 @@
                     type: i0.Input
                 }] } });
 
+    /**
+     * 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.
+     */
+    var ModalComponent = /** @class */ (function () {
+        function ModalComponent() {
+            var _this = this;
+            /**
+             * If `true` the modal will be displayed, if `false` the modal will be hidden
+             */
+            this.isOpen = false;
+            /**
+             * Emits `true` if the modal becomes visible, and `false` if the modal is closed.
+             */
+            this.isOpenChange = new i0.EventEmitter();
+            this.watchForEscPress = function (event) {
+                if (event.key === 'Escape') {
+                    _this.close();
+                }
+            };
+            this.stopWatchForEscPress = function () {
+                window.removeEventListener('keyup', _this.watchForEscPress);
+            };
+            this.watchForOutsideClicks = function (event) {
+                var _a;
+                if (!((_a = _this.innerContainer) === null || _a === void 0 ? void 0 : _a.nativeElement.contains(event.target))) {
+                    _this.close();
+                }
+            };
+        }
+        ModalComponent.prototype.ngOnChanges = function (changes) {
+            var _this = this;
+            if (changes.isOpen) {
+                if (this.isOpen) {
+                    window.addEventListener('keyup', this.watchForEscPress);
+                    setTimeout(function () { return window.addEventListener('click', _this.watchForOutsideClicks); }, 0);
+                }
+                else {
+                    this.stopWatchForOutsideClicks();
+                    this.stopWatchForEscPress();
+                }
+            }
+        };
+        ModalComponent.prototype.close = function () {
+            this.isOpen = false;
+            this.isOpenChange.emit(false);
+            this.stopWatchForOutsideClicks();
+            this.stopWatchForEscPress();
+        };
+        ModalComponent.prototype.stopWatchForOutsideClicks = function () {
+            window.removeEventListener('click', this.watchForOutsideClicks);
+        };
+        return ModalComponent;
+    }());
+    ModalComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.5", ngImport: i0__namespace, type: ModalComponent, deps: [], target: i0__namespace.ɵɵFactoryTarget.Component });
+    ModalComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.5", 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__namespace, 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    translate\n  >\n    streamChat.Close\n    <stream-icon-placeholder icon=\"close\"></stream-icon-placeholder>\n  </div>\n  <div class=\"str-chat__modal__inner\" #modalInner>\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", components: [{ type: IconPlaceholderComponent, selector: "stream-icon-placeholder", inputs: ["icon", "size"] }], directives: [{ type: i2__namespace.TranslateDirective, selector: "[translate],[ngx-translate]", inputs: ["translate", "translateParams"] }, { type: i3__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i3__namespace.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }] });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.5", ngImport: i0__namespace, type: ModalComponent, decorators: [{
+                type: i0.Component,
+                args: [{
+                        selector: 'stream-modal',
+                        templateUrl: './modal.component.html',
+                        styles: [],
+                    }]
+            }], ctorParameters: function () { return []; }, propDecorators: { isOpen: [{
+                    type: i0.Input
+                }], content: [{
+                    type: i0.Input
+                }], isOpenChange: [{
+                    type: i0.Output
+                }], innerContainer: [{
+                    type: i0.ViewChild,
+                    args: ['modalInner']
+                }] } });
+
     var textareaInjectionToken = new i0.InjectionToken('textareaInjectionToken');
 
     var TextareaDirective = /** @class */ (function () {
@@ -2656,79 +2715,6 @@
                     }]
             }], ctorParameters: function () { return []; } });
 
-    /**
-     * 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.
-     */
-    var ModalComponent = /** @class */ (function () {
-        function ModalComponent() {
-            var _this = this;
-            /**
-             * If `true` the modal will be displayed, if `false` the modal will be hidden
-             */
-            this.isOpen = false;
-            /**
-             * Emits `true` if the modal becomes visible, and `false` if the modal is closed.
-             */
-            this.isOpenChange = new i0.EventEmitter();
-            this.watchForEscPress = function (event) {
-                if (event.key === 'Escape') {
-                    _this.close();
-                }
-            };
-            this.stopWatchForEscPress = function () {
-                window.removeEventListener('keyup', _this.watchForEscPress);
-            };
-            this.watchForOutsideClicks = function (event) {
-                var _a;
-                if (!((_a = _this.innerContainer) === null || _a === void 0 ? void 0 : _a.nativeElement.contains(event.target))) {
-                    _this.close();
-                }
-            };
-        }
-        ModalComponent.prototype.ngOnChanges = function (changes) {
-            var _this = this;
-            if (changes.isOpen) {
-                if (this.isOpen) {
-                    window.addEventListener('keyup', this.watchForEscPress);
-                    setTimeout(function () { return window.addEventListener('click', _this.watchForOutsideClicks); }, 0);
-                }
-                else {
-                    this.stopWatchForOutsideClicks();
-                    this.stopWatchForEscPress();
-                }
-            }
-        };
-        ModalComponent.prototype.close = function () {
-            this.isOpen = false;
-            this.isOpenChange.emit(false);
-            this.stopWatchForOutsideClicks();
-            this.stopWatchForEscPress();
-        };
-        ModalComponent.prototype.stopWatchForOutsideClicks = function () {
-            window.removeEventListener('click', this.watchForOutsideClicks);
-        };
-        return ModalComponent;
-    }());
-    ModalComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.5", ngImport: i0__namespace, type: ModalComponent, deps: [], target: i0__namespace.ɵɵFactoryTarget.Component });
-    ModalComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.5", 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__namespace, 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    translate\n  >\n    streamChat.Close\n    <stream-icon-placeholder icon=\"close\"></stream-icon-placeholder>\n  </div>\n  <div class=\"str-chat__modal__inner\" #modalInner>\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", components: [{ type: IconPlaceholderComponent, selector: "stream-icon-placeholder", inputs: ["icon", "size"] }], directives: [{ type: i2__namespace.TranslateDirective, selector: "[translate],[ngx-translate]", inputs: ["translate", "translateParams"] }, { type: i3__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i3__namespace.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }] });
-    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.5", ngImport: i0__namespace, type: ModalComponent, decorators: [{
-                type: i0.Component,
-                args: [{
-                        selector: 'stream-modal',
-                        templateUrl: './modal.component.html',
-                        styles: [],
-                    }]
-            }], ctorParameters: function () { return []; }, propDecorators: { isOpen: [{
-                    type: i0.Input
-                }], content: [{
-                    type: i0.Input
-                }], isOpenChange: [{
-                    type: i0.Output
-                }], innerContainer: [{
-                    type: i0.ViewChild,
-                    args: ['modalInner']
-                }] } });
-
     /**
      * The `AttachmentList` compontent displays the attachments of a message
      */
@@ -3007,6 +2993,7 @@
             this.initTextarea();
         };
         MessageInputComponent.prototype.ngOnChanges = function (changes) {
+            var _this = this;
             if (changes.message) {
                 this.attachmentService.resetAttachmentUploads();
                 if (this.isUpdate) {
@@ -3030,8 +3017,19 @@
             if (changes.mode) {
                 this.setCanSendMessages();
             }
+            if (changes.sendMessage$) {
+                if (this.sendMessageSubcription) {
+                    this.sendMessageSubcription.unsubscribe();
+                }
+                if (this.sendMessage$) {
+                    this.sendMessageSubcription = this.sendMessage$.subscribe(function () { return void _this.messageSent(); });
+                }
+            }
         };
         MessageInputComponent.prototype.ngOnDestroy = function () {
+            if (this.sendMessageSubcription) {
+                this.sendMessageSubcription.unsubscribe();
+            }
             this.subscriptions.forEach(function (s) { return s.unsubscribe(); });
         };
         MessageInputComponent.prototype.messageSent = function () {
@@ -3292,7 +3290,7 @@
         return MessageInputComponent;
     }());
     MessageInputComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.5", ngImport: i0__namespace, type: MessageInputComponent, deps: [{ token: ChannelService }, { token: NotificationService }, { token: AttachmentService }, { token: MessageInputConfigService }, { token: textareaInjectionToken }, { token: i0__namespace.ComponentFactoryResolver }, { token: i0__namespace.ChangeDetectorRef }, { token: ChatClientService }, { token: EmojiInputService }, { token: CustomTemplatesService }], target: i0__namespace.ɵɵFactoryTarget.Component });
-    MessageInputComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.5", type: MessageInputComponent, selector: "stream-message-input", inputs: { isFileUploadEnabled: "isFileUploadEnabled", areMentionsEnabled: "areMentionsEnabled", mentionScope: "mentionScope", mode: "mode", isMultipleFileUploadEnabled: "isMultipleFileUploadEnabled", message: "message" }, outputs: { messageUpdate: "messageUpdate" }, providers: [AttachmentService, EmojiInputService], viewQueries: [{ propertyName: "fileInput", first: true, predicate: ["fileInput"], descendants: true }, { propertyName: "textareaAnchor", first: true, predicate: TextareaDirective, descendants: true }], usesOnChanges: true, ngImport: i0__namespace, template: "<div\n  class=\"{{\n    mode === 'main' ? 'str-chat__input-flat' : 'str-chat__small-message-input'\n  }}\"\n  [class.str-chat__input-flat-has-attachments]=\"\n    (attachmentUploads$ | async)!.length > 0\n  \"\n  [class.str-chat__input-flat-quoted]=\"!!quotedMessage\"\n>\n  <div\n    data-testid=\"quoted-message-container\"\n    class=\"quoted-message-preview\"\n    *ngIf=\"quotedMessage\"\n  >\n    <div class=\"quoted-message-preview-header\">\n      <div>{{ \"streamChat.Reply to Message\" | translate }}</div>\n      <button\n        class=\"str-chat__square-button\"\n        data-testid=\"remove-quote\"\n        (click)=\"deselectMessageToQuote()\"\n        (keyup.enter)=\"deselectMessageToQuote()\"\n      >\n        <stream-icon-placeholder\n          icon=\"close-no-outline\"\n          style=\"font-size: 10px; line-height: 10px\"\n        ></stream-icon-placeholder>\n      </button>\n    </div>\n    <div class=\"quoted-message-preview-content\">\n      <stream-avatar-placeholder\n        data-testid=\"qouted-message-avatar\"\n        class=\"str-chat-angular__avatar-host\"\n        [imageUrl]=\"quotedMessage?.user?.image\"\n        [name]=\"quotedMessage?.user?.name || quotedMessage?.user?.id\"\n        [size]=\"20\"\n      ></stream-avatar-placeholder>\n      <div class=\"quoted-message-preview-content-inner\">\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        <div\n          data-testid=\"quoted-message-text\"\n          [innerHTML]=\"quotedMessage?.html || quotedMessage?.text\"\n        ></div>\n      </div>\n    </div>\n  </div>\n  <div class=\"str-chat__input-flat-wrapper\" style=\"width: 100%\">\n    <div\n      class=\"{{\n        mode === 'main'\n          ? 'str-chat__input-flat--textarea-wrapper'\n          : 'str-chat__small-message-input--textarea-wrapper'\n      }}\"\n    >\n      <ng-template\n        #defaultAttachmentsPreview\n        let-attachmentUploads$=\"attachmentUploads$\"\n        let-retryUploadHandler=\"retryUploadHandler\"\n        let-deleteUploadHandler=\"deleteUploadHandler\"\n      >\n        <stream-attachment-preview-list\n          [attachmentUploads$]=\"attachmentUploads$\"\n          (retryAttachmentUpload)=\"retryUploadHandler($event)\"\n          (deleteAttachment)=\"deleteUploadHandler($event)\"\n          class=\"rfu-image-previewer-angular-host\"\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=\"rta str-chat__textarea str-chat-angular__textarea\">\n        <ng-container\n          *ngIf=\"emojiPickerTemplate && !isCooldownInProgress\"\n          data-testid=\"emoji-picker\"\n        >\n          <div\n            class=\"\n              str-chat__input-flat-emojiselect\n              str-chat-angular__emojiselect\n            \"\n          >\n            <ng-container\n              *ngTemplateOutlet=\"\n                emojiPickerTemplate;\n                context: getEmojiPickerContext()\n              \"\n            ></ng-container>\n          </div>\n        </ng-container>\n        <div\n          class=\"str-chat__input-flat-cooldown str-chat-angular__cooldown\"\n          *ngIf=\"isCooldownInProgress\"\n          data-testid=\"cooldown-timer\"\n        >\n          {{ cooldown$ | async }}\n        </div>\n        <ng-template\n          *ngIf=\"canSendMessages && !isCooldownInProgress; else notAllowed\"\n          streamTextarea\n          [(value)]=\"textareaValue\"\n          (valueChange)=\"typingStart$.next()\"\n          (send)=\"messageSent()\"\n          [componentRef]=\"textareaRef\"\n          (userMentions)=\"mentionedUsers = $event\"\n          [areMentionsEnabled]=\"areMentionsEnabled\"\n          [mentionScope]=\"mentionScope\"\n        ></ng-template>\n        <ng-template #notAllowed>\n          <textarea\n            disabled\n            rows=\"1\"\n            [value]=\"disabledTextareaText | translate\"\n            class=\"rta__textarea str-chat__textarea__textarea\"\n            data-testid=\"disabled-textarea\"\n          ></textarea>\n        </ng-template>\n      </div>\n      <div\n        *ngIf=\"\n          isFileUploadEnabled &&\n          isFileUploadAuthorized &&\n          canSendMessages &&\n          !isCooldownInProgress\n        \"\n        class=\"str-chat__fileupload-wrapper\"\n        data-testid=\"file-upload-button\"\n      >\n        <div class=\"str-chat__tooltip\">\n          {{ \"streamChat.Attach files\" | translate }}\n        </div>\n        <div class=\"rfu-file-upload-button\">\n          <label>\n            <input\n              #fileInput\n              type=\"file\"\n              class=\"rfu-file-input\"\n              data-testid=\"file-input\"\n              [multiple]=\"isMultipleFileUploadEnabled\"\n              (change)=\"filesSelected(fileInput.files)\"\n            />\n            <span class=\"str-chat__input-flat-fileupload\">\n              <stream-icon-placeholder\n                icon=\"file-upload\"\n              ></stream-icon-placeholder>\n            </span>\n          </label>\n        </div>\n      </div>\n    </div>\n    <button\n      *ngIf=\"canSendMessages\"\n      data-testid=\"send-button\"\n      class=\"str-chat__send-button\"\n      (click)=\"messageSent()\"\n      (keyup.enter)=\"messageSent()\"\n    >\n      <stream-icon-placeholder icon=\"send\"></stream-icon-placeholder>\n    </button>\n  </div>\n</div>\n", components: [{ type: IconPlaceholderComponent, selector: "stream-icon-placeholder", inputs: ["icon", "size"] }, { type: AvatarPlaceholderComponent, selector: "stream-avatar-placeholder", inputs: ["name", "imageUrl", "size"] }, { type: AttachmentListComponent, selector: "stream-attachment-list", inputs: ["messageId", "attachments"] }, { type: AttachmentPreviewListComponent, selector: "stream-attachment-preview-list", inputs: ["attachmentUploads$"], outputs: ["retryAttachmentUpload", "deleteAttachment"] }], directives: [{ type: i3__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i3__namespace.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: TextareaDirective, selector: "[streamTextarea]", inputs: ["componentRef", "areMentionsEnabled", "mentionScope", "value"], outputs: ["valueChange", "send", "userMentions"] }], pipes: { "async": i3__namespace.AsyncPipe, "translate": i2__namespace.TranslatePipe } });
+    MessageInputComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.5", type: MessageInputComponent, selector: "stream-message-input", inputs: { isFileUploadEnabled: "isFileUploadEnabled", areMentionsEnabled: "areMentionsEnabled", mentionScope: "mentionScope", mode: "mode", isMultipleFileUploadEnabled: "isMultipleFileUploadEnabled", message: "message", sendMessage$: "sendMessage$" }, outputs: { messageUpdate: "messageUpdate" }, providers: [AttachmentService, EmojiInputService], viewQueries: [{ propertyName: "fileInput", first: true, predicate: ["fileInput"], descendants: true }, { propertyName: "textareaAnchor", first: true, predicate: TextareaDirective, descendants: true }], usesOnChanges: true, ngImport: i0__namespace, template: "<div\n  class=\"{{\n    mode === 'main' ? 'str-chat__input-flat' : 'str-chat__small-message-input'\n  }}\"\n  [class.str-chat__input-flat-has-attachments]=\"\n    (attachmentUploads$ | async)!.length > 0\n  \"\n  [class.str-chat__input-flat-quoted]=\"!!quotedMessage\"\n>\n  <div\n    data-testid=\"quoted-message-container\"\n    class=\"quoted-message-preview\"\n    *ngIf=\"quotedMessage\"\n  >\n    <div class=\"quoted-message-preview-header\">\n      <div>{{ \"streamChat.Reply to Message\" | translate }}</div>\n      <button\n        class=\"str-chat__square-button\"\n        data-testid=\"remove-quote\"\n        (click)=\"deselectMessageToQuote()\"\n        (keyup.enter)=\"deselectMessageToQuote()\"\n      >\n        <stream-icon-placeholder\n          icon=\"close-no-outline\"\n          style=\"font-size: 10px; line-height: 10px\"\n        ></stream-icon-placeholder>\n      </button>\n    </div>\n    <div class=\"quoted-message-preview-content\">\n      <stream-avatar-placeholder\n        data-testid=\"qouted-message-avatar\"\n        class=\"str-chat-angular__avatar-host\"\n        [imageUrl]=\"quotedMessage?.user?.image\"\n        [name]=\"quotedMessage?.user?.name || quotedMessage?.user?.id\"\n        [size]=\"20\"\n      ></stream-avatar-placeholder>\n      <div class=\"quoted-message-preview-content-inner\">\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        <div\n          data-testid=\"quoted-message-text\"\n          [innerHTML]=\"quotedMessage?.html || quotedMessage?.text\"\n        ></div>\n      </div>\n    </div>\n  </div>\n  <div class=\"str-chat__input-flat-wrapper\" style=\"width: 100%\">\n    <div\n      class=\"{{\n        mode === 'main'\n          ? 'str-chat__input-flat--textarea-wrapper'\n          : 'str-chat__small-message-input--textarea-wrapper'\n      }}\"\n    >\n      <ng-template\n        #defaultAttachmentsPreview\n        let-attachmentUploads$=\"attachmentUploads$\"\n        let-retryUploadHandler=\"retryUploadHandler\"\n        let-deleteUploadHandler=\"deleteUploadHandler\"\n      >\n        <stream-attachment-preview-list\n          [attachmentUploads$]=\"attachmentUploads$\"\n          (retryAttachmentUpload)=\"retryUploadHandler($event)\"\n          (deleteAttachment)=\"deleteUploadHandler($event)\"\n          class=\"rfu-image-previewer-angular-host\"\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=\"rta str-chat__textarea str-chat-angular__textarea\">\n        <ng-container\n          *ngIf=\"emojiPickerTemplate && !isCooldownInProgress\"\n          data-testid=\"emoji-picker\"\n        >\n          <div\n            class=\"\n              str-chat__input-flat-emojiselect\n              str-chat-angular__emojiselect\n            \"\n          >\n            <ng-container\n              *ngTemplateOutlet=\"\n                emojiPickerTemplate;\n                context: getEmojiPickerContext()\n              \"\n            ></ng-container>\n          </div>\n        </ng-container>\n        <div\n          class=\"str-chat__input-flat-cooldown str-chat-angular__cooldown\"\n          *ngIf=\"isCooldownInProgress\"\n          data-testid=\"cooldown-timer\"\n        >\n          {{ cooldown$ | async }}\n        </div>\n        <ng-template\n          *ngIf=\"canSendMessages && !isCooldownInProgress; else notAllowed\"\n          streamTextarea\n          [(value)]=\"textareaValue\"\n          (valueChange)=\"typingStart$.next()\"\n          (send)=\"messageSent()\"\n          [componentRef]=\"textareaRef\"\n          (userMentions)=\"mentionedUsers = $event\"\n          [areMentionsEnabled]=\"areMentionsEnabled\"\n          [mentionScope]=\"mentionScope\"\n        ></ng-template>\n        <ng-template #notAllowed>\n          <textarea\n            disabled\n            rows=\"1\"\n            [value]=\"disabledTextareaText | translate\"\n            class=\"rta__textarea str-chat__textarea__textarea\"\n            data-testid=\"disabled-textarea\"\n          ></textarea>\n        </ng-template>\n      </div>\n      <div\n        *ngIf=\"\n          isFileUploadEnabled &&\n          isFileUploadAuthorized &&\n          canSendMessages &&\n          !isCooldownInProgress\n        \"\n        class=\"str-chat__fileupload-wrapper\"\n        data-testid=\"file-upload-button\"\n      >\n        <div class=\"str-chat__tooltip\">\n          {{ \"streamChat.Attach files\" | translate }}\n        </div>\n        <div class=\"rfu-file-upload-button\">\n          <label>\n            <input\n              #fileInput\n              type=\"file\"\n              class=\"rfu-file-input\"\n              data-testid=\"file-input\"\n              [multiple]=\"isMultipleFileUploadEnabled\"\n              (change)=\"filesSelected(fileInput.files)\"\n            />\n            <span class=\"str-chat__input-flat-fileupload\">\n              <stream-icon-placeholder\n                icon=\"file-upload\"\n              ></stream-icon-placeholder>\n            </span>\n          </label>\n        </div>\n      </div>\n    </div>\n    <button\n      *ngIf=\"canSendMessages\"\n      data-testid=\"send-button\"\n      class=\"str-chat__send-button\"\n      (click)=\"messageSent()\"\n      (keyup.enter)=\"messageSent()\"\n    >\n      <stream-icon-placeholder icon=\"send\"></stream-icon-placeholder>\n    </button>\n  </div>\n</div>\n", components: [{ type: IconPlaceholderComponent, selector: "stream-icon-placeholder", inputs: ["icon", "size"] }, { type: AvatarPlaceholderComponent, selector: "stream-avatar-placeholder", inputs: ["name", "imageUrl", "size"] }, { type: AttachmentListComponent, selector: "stream-attachment-list", inputs: ["messageId", "attachments"] }, { type: AttachmentPreviewListComponent, selector: "stream-attachment-preview-list", inputs: ["attachmentUploads$"], outputs: ["retryAttachmentUpload", "deleteAttachment"] }], directives: [{ type: i3__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i3__namespace.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: TextareaDirective, selector: "[streamTextarea]", inputs: ["componentRef", "areMentionsEnabled", "mentionScope", "value"], outputs: ["valueChange", "send", "userMentions"] }], pipes: { "async": i3__namespace.AsyncPipe, "translate": i2__namespace.TranslatePipe } });
     i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.5", ngImport: i0__namespace, type: MessageInputComponent, decorators: [{
                 type: i0.Component,
                 args: [{
@@ -3318,6 +3316,8 @@
                     type: i0.Input
                 }], message: [{
                     type: i0.Input
+                }], sendMessage$: [{
+                    type: i0.Input
                 }], messageUpdate: [{
                     type: i0.Output
                 }], fileInput: [{
@@ -3412,6 +3412,7 @@
             this.isEditModalOpen = false;
             this.subscriptions = [];
             this.visibleMessageActionItems = [];
+            this.sendMessageSubject = new rxjs.Subject();
             this.modalClosed = function () {
                 _this.isEditModalOpen = false;
                 _this.isEditing.emit(false);
@@ -3495,6 +3496,7 @@
                         enabledActions.indexOf('delete-any-message') !== -1; },
                 },
             ];
+            this.sendMessage$ = this.sendMessageSubject.asObservable();
         }
         MessageActionsBoxComponent.prototype.ngOnChanges = function (changes) {
             var _this = this;
@@ -3513,8 +3515,7 @@
                 : actionLabelOrTranslationKey();
         };
         MessageActionsBoxComponent.prototype.sendClicked = function () {
-            var _a;
-            (_a = this.messageInput) === null || _a === void 0 ? void 0 : _a.messageSent();
+            this.sendMessageSubject.next();
         };
         MessageActionsBoxComponent.prototype.getMessageInputContext = function () {
             return {
@@ -3525,6 +3526,7 @@
                 isMultipleFileUploadEnabled: undefined,
                 mentionScope: undefined,
                 mode: undefined,
+                sendMessage$: this.sendMessage$,
             };
         };
         MessageActionsBoxComponent.prototype.getEditModalContext = function () {
@@ -3546,7 +3548,7 @@
         return MessageActionsBoxComponent;
     }());
     MessageActionsBoxComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.5", ngImport: i0__namespace, type: MessageActionsBoxComponent, deps: [{ token: ChatClientService }, { token: NotificationService }, { token: ChannelService }, { token: CustomTemplatesService }], target: i0__namespace.ɵɵFactoryTarget.Component });
-    MessageActionsBoxComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.5", type: MessageActionsBoxComponent, selector: "stream-message-actions-box", inputs: { isOpen: "isOpen", isMine: "isMine", message: "message", enabledActions: "enabledActions" }, outputs: { displayedActionsCount: "displayedActionsCount", isEditing: "isEditing" }, viewQueries: [{ propertyName: "messageInput", first: true, predicate: MessageInputComponent, descendants: true }, { propertyName: "modalContent", first: true, predicate: ["modalContent"], descendants: true, static: true }], usesOnChanges: true, ngImport: i0__namespace, template: "<div\n  data-testid=\"action-box\"\n  class=\"str-chat__message-actions-box\"\n  [class.str-chat__message-actions-box--open]=\"isOpen\"\n  [class.str-chat__message-actions-box--mine]=\"isMine\"\n>\n  <ul class=\"str-chat__message-actions-list\">\n    <ng-container\n      *ngFor=\"let item of visibleMessageActionItems; trackBy: trackByActionName\"\n    >\n      <ng-container\n        *ngTemplateOutlet=\"\n          messageActionItemTemplate || defaultMessageActionItem;\n          context: item\n        \"\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>\n  <button [attr.data-testid]=\"actionName + '-action'\" (click)=\"actionHandler()\">\n    <li class=\"str-chat__message-actions-list-item\">\n      {{ getActionLabel(actionLabelOrTranslationKey) | translate }}\n    </li>\n  </button>\n</ng-template>\n\n<ng-container\n  *ngTemplateOutlet=\"\n    modalTemplate || defaultModal;\n    context: getEditModalContext()\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    [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__edit-message-form\" *ngIf=\"isEditModalOpen\">\n    <ng-template\n      #defaultInput\n      let-messageInput=\"message\"\n      let-messageUpdateHandler=\"messageUpdateHandler\"\n    >\n      <stream-message-input\n        [message]=\"messageInput\"\n        (messageUpdate)=\"messageUpdateHandler()\"\n      ></stream-message-input>\n    </ng-template>\n    <ng-container\n      *ngTemplateOutlet=\"\n        messageInputTemplate || defaultInput;\n        context: getMessageInputContext()\n      \"\n    >\n    </ng-container>\n\n    <stream-notification-list></stream-notification-list>\n    <div\n      class=\"\n        str-chat__message-team-form-footer\n        str-chat__message-team-form-footer-angular\n      \"\n    >\n      <div class=\"str-chat__edit-message-form-options\">\n        <button translate data-testid=\"cancel-button\" (click)=\"modalClosed()\">\n          streamChat.Cancel\n        </button>\n        <button\n          type=\"submit\"\n          translate\n          data-testid=\"send-button\"\n          (click)=\"sendClicked()\"\n          (keyup.enter)=\"sendClicked()\"\n        >\n          streamChat.Send\n        </button>\n      </div>\n    </div>\n  </div>\n</ng-template>\n", components: [{ type: ModalComponent, selector: "stream-modal", inputs: ["isOpen", "content"], outputs: ["isOpenChange"] }, { type: MessageInputComponent, selector: "stream-message-input", inputs: ["isFileUploadEnabled", "areMentionsEnabled", "mentionScope", "mode", "isMultipleFileUploadEnabled", "message"], outputs: ["messageUpdate"] }, { type: NotificationListComponent, selector: "stream-notification-list" }], directives: [{ type: i3__namespace.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i3__namespace.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i3__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2__namespace.TranslateDirective, selector: "[translate],[ngx-translate]", inputs: ["translate", "translateParams"] }], pipes: { "translate": i2__namespace.TranslatePipe } });
+    MessageActionsBoxComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.5", type: MessageActionsBoxComponent, selector: "stream-message-actions-box", inputs: { isOpen: "isOpen", isMine: "isMine", message: "message", enabledActions: "enabledActions" }, outputs: { displayedActionsCount: "displayedActionsCount", isEditing: "isEditing" }, viewQueries: [{ propertyName: "modalContent", first: true, predicate: ["modalContent"], descendants: true, static: true }], usesOnChanges: true, ngImport: i0__namespace, template: "<div\n  data-testid=\"action-box\"\n  class=\"str-chat__message-actions-box\"\n  [class.str-chat__message-actions-box--open]=\"isOpen\"\n  [class.str-chat__message-actions-box--mine]=\"isMine\"\n>\n  <ul class=\"str-chat__message-actions-list\">\n    <ng-container\n      *ngFor=\"let item of visibleMessageActionItems; trackBy: trackByActionName\"\n    >\n      <ng-container\n        *ngTemplateOutlet=\"\n          messageActionItemTemplate || defaultMessageActionItem;\n          context: item\n        \"\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>\n  <button [attr.data-testid]=\"actionName + '-action'\" (click)=\"actionHandler()\">\n    <li class=\"str-chat__message-actions-list-item\">\n      {{ getActionLabel(actionLabelOrTranslationKey) | translate }}\n    </li>\n  </button>\n</ng-template>\n\n<ng-container\n  *ngTemplateOutlet=\"\n    modalTemplate || defaultModal;\n    context: getEditModalContext()\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    [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__edit-message-form\" *ngIf=\"isEditModalOpen\">\n    <ng-template\n      #defaultInput\n      let-messageInput=\"message\"\n      let-messageUpdateHandler=\"messageUpdateHandler\"\n      let-sendMessage$Input=\"sendMessage$\"\n    >\n      <stream-message-input\n        [message]=\"messageInput\"\n        (messageUpdate)=\"messageUpdateHandler()\"\n        [sendMessage$]=\"sendMessage$Input\"\n      ></stream-message-input>\n    </ng-template>\n    <ng-container\n      *ngTemplateOutlet=\"\n        messageInputTemplate || defaultInput;\n        context: getMessageInputContext()\n      \"\n    >\n    </ng-container>\n\n    <stream-notification-list></stream-notification-list>\n    <div\n      class=\"\n        str-chat__message-team-form-footer\n        str-chat__message-team-form-footer-angular\n      \"\n    >\n      <div class=\"str-chat__edit-message-form-options\">\n        <button translate data-testid=\"cancel-button\" (click)=\"modalClosed()\">\n          streamChat.Cancel\n        </button>\n        <button\n          type=\"submit\"\n          translate\n          data-testid=\"send-button\"\n          (click)=\"sendClicked()\"\n          (keyup.enter)=\"sendClicked()\"\n        >\n          streamChat.Send\n        </button>\n      </div>\n    </div>\n  </div>\n</ng-template>\n", components: [{ type: ModalComponent, selector: "stream-modal", inputs: ["isOpen", "content"], outputs: ["isOpenChange"] }, { type: MessageInputComponent, selector: "stream-message-input", inputs: ["isFileUploadEnabled", "areMentionsEnabled", "mentionScope", "mode", "isMultipleFileUploadEnabled", "message", "sendMessage$"], outputs: ["messageUpdate"] }, { type: NotificationListComponent, selector: "stream-notification-list" }], directives: [{ type: i3__namespace.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i3__namespace.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i3__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2__namespace.TranslateDirective, selector: "[translate],[ngx-translate]", inputs: ["translate", "translateParams"] }], pipes: { "translate": i2__namespace.TranslatePipe } });
     i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.5", ngImport: i0__namespace, type: MessageActionsBoxComponent, decorators: [{
                 type: i0.Component,
                 args: [{
@@ -3566,9 +3568,6 @@
                     type: i0.Output
                 }], isEditing: [{
                     type: i0.Output
-                }], messageInput: [{
-                    type: i0.ViewChild,
-                    args: [MessageInputComponent]
                 }], modalContent: [{
                     type: i0.ViewChild,
                     args: ['modalContent', { static: true }]