@cometchat/chat-uikit-angular 4.3.15 → 4.3.17

package/fesm2020/cometchat-chat-uikit-angular.mjs

@@ -1909,7 +1909,7 @@ class CometChatUIKit {
         if (window) {
             window.CometChatUiKit = {
                 name: "@cometchat/chat-uikit-angular",
-                version: "4.3.15",
+                version: "4.3.17",
             };
         }
         if (CometChatUIKitSharedSettings) {
@@ -3966,6 +3966,7 @@ class CometChatUsersComponent {
         this.connectionListenerId = "connection_" + new Date().getTime();
         this.previousSearchKeyword = "";
         this.isWebsocketReconnected = false;
+        this.selectedUsers = {};
         this.onScrolledToBottom = null;
         this.fetchUsersOnSearchKeyWordChange = () => {
             if (this.fetchingUsers) {
@@ -4045,10 +4046,18 @@ class CometChatUsersComponent {
         };
         this.addMembersToList = (user, event) => {
             let selected = event?.detail?.checked;
-            this.userChecked = user.getUid();
+            if (this.selectionMode === this.selectionmodeEnum.single) {
+                this.userChecked = user.getUid();
+            }
             if (this.onSelect) {
                 this.onSelect(user, selected);
             }
+            if (selected) {
+                this.selectedUsers[user.getUid()] = user;
+            }
+            else {
+                delete this.selectedUsers[user.getUid()];
+            }
         };
         this.fetchNextUsersList = (state = States.loading) => {
             this.onScrolledToBottom = null;
@@ -4227,7 +4236,8 @@ class CometChatUsersComponent {
         this.unsubscribeToEvents();
     }
     isUserSelected(user) {
-        return user.getUid() === this.userChecked;
+        return user.getUid() === this.userChecked
+            || this.selectedUsers?.[user.getUid()];
     }
     attachConnectionListeners() {
         CometChat.addConnectionListener(this.connectionListenerId, new CometChat.ConnectionListener({
@@ -4381,10 +4391,10 @@ class CometChatUsersComponent {
     }
 }
 CometChatUsersComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: CometChatUsersComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: CometChatThemeService }], target: i0.ɵɵFactoryTarget.Component });
-CometChatUsersComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: CometChatUsersComponent, selector: "cometchat-users", inputs: { usersRequestBuilder: "usersRequestBuilder", searchRequestBuilder: "searchRequestBuilder", subtitleView: "subtitleView", disableUsersPresence: "disableUsersPresence", listItemView: "listItemView", menu: "menu", options: "options", activeUser: "activeUser", hideSeparator: "hideSeparator", searchPlaceholder: "searchPlaceholder", hideError: "hideError", selectionMode: "selectionMode", searchIconURL: "searchIconURL", hideSearch: "hideSearch", title: "title", onError: "onError", emptyStateView: "emptyStateView", onSelect: "onSelect", errorStateView: "errorStateView", loadingIconURL: "loadingIconURL", showSectionHeader: "showSectionHeader", sectionHeaderField: "sectionHeaderField", loadingStateView: "loadingStateView", emptyStateText: "emptyStateText", errorStateText: "errorStateText", titleAlignment: "titleAlignment", usersStyle: "usersStyle", listItemStyle: "listItemStyle", statusIndicatorStyle: "statusIndicatorStyle", avatarStyle: "avatarStyle", onItemClick: "onItemClick", searchKeyword: "searchKeyword", onEmpty: "onEmpty", userPresencePlacement: "userPresencePlacement", disableLoadingState: "disableLoadingState" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"cc-users\" [ngStyle]=\"userStyle()\">\n  <div class=\"cc-menus\" *ngIf=\"menu\">\n\n    <ng-container *ngTemplateOutlet=\"menu\">\n    </ng-container>\n\n</div>\n  <cometchat-list [listItemView]=\"listItemView ? listItemView : listItem\" [onScrolledToBottom]=\"onScrolledToBottom\" [onSearch]=\"onSearch\"\n      [list]=\"usersList\" [searchText]=\"searchKeyword\" [searchPlaceholderText]=\"searchPlaceholder\"\n      [searchIconURL]=\"searchIconURL\" [hideSearch]=\"hideSearch\" [hideError]=\"hideError\" [title]=\"title\"\n      [sectionHeaderField]=\"sectionHeaderField\" [showSectionHeader]=\"showSectionHeader\"\n      [emptyStateText]=\"emptyStateText\" [loadingIconURL]=\"loadingIconURL\"\n      [titleAlignment]=\"titleAlignment\" [loadingStateView]=\"loadingStateView\" [emptyStateView]=\"emptyStateView\"\n      [errorStateText]=\"errorStateText\" [errorStateView]=\"errorStateView\" [listStyle]=\"listStyle\" [state]=\"state\">\n  </cometchat-list>\n  <ng-template #listItem let-user>\n      <cometchat-list-item [title]=\"user?.name\" [avatarURL]=\"user?.avatar\" [avatarName]=\"user?.name\"\n          [listItemStyle]=\"listItemStyle\" [avatarStyle]=\"avatarStyle\" [statusIndicatorStyle]=\"getStatusIndicatorStyle(user)\"\n          [statusIndicatorColor]=\"getStatusIndicatorColor(user)\" [hideSeparator]=\"hideSeparator\" (cc-listitem-clicked)=\"onClick(user)\" [isActive]=\"getActiveUser(user)\"\n          [userPresencePlacement]=\"userPresencePlacement\">\n          <div slot=\"subtitleView\" *ngIf=\"subtitleView\">\n              <ng-container  *ngTemplateOutlet=\"subtitleView;context:{ $implicit: user }\">\n              </ng-container>\n          </div>\n\n          <div slot=\"menuView\" class=\"cc-users__options\" *ngIf=\"options\">\n              <cometchat-menu-list [data]=\"options(user)\">\n\n              </cometchat-menu-list>\n        </div>\n        <div slot=\"tailView\"  *ngIf=\"selectionMode != selectionmodeEnum.none\" class=\"cc-users__tail-view\">\n          <ng-container *ngTemplateOutlet=\"tailView\">\n          </ng-container>\n      </div>\n      <ng-template #tailView>\n        <div  *ngIf=\"selectionMode == selectionmodeEnum.single\" class=\"cc-users__selection--single\">\n          <cometchat-radio-button  (cc-radio-button-checked)=\"addMembersToList(user,$event)\" [checked]=\"isUserSelected(user)\" ></cometchat-radio-button>\n\n        </div>\n        <div  *ngIf=\"selectionMode == selectionmodeEnum.multiple\" class=\"cc-users__selection--multiple\">\n          <cometchat-checkbox  (cc-checkbox-changed)=\"addMembersToList(user,$event)\"></cometchat-checkbox>\n\n        </div>\n      </ng-template>\n      </cometchat-list-item>\n\n  </ng-template>\n</div>\n\n", styles: [".cc-users{height:100%;width:100%;box-sizing:border-box}.cc-menus{position:absolute;right:12px;padding:12px;cursor:pointer}.cc-users__selection--multiple{width:65px}\n"], components: [{ type: CometchatListComponent, selector: "cometchat-list", inputs: ["listItemView", "onScrolledToBottom", "onScrolledToTop", "list", "onSearch", "getSectionHeader", "searchText", "searchIconURL", "listStyle", "searchPlaceholderText", "hideSearch", "hideError", "title", "titleAlignment", "errorStateView", "loadingStateView", "emptyStateView", "state", "errorStateText", "emptyStateText", "loadingIconURL", "showSectionHeader", "sectionHeaderField", "DateSeparatorPattern", "dateSeparatorStyle"] }], directives: [{ type: i3.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i3.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+CometChatUsersComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: CometChatUsersComponent, selector: "cometchat-users", inputs: { usersRequestBuilder: "usersRequestBuilder", searchRequestBuilder: "searchRequestBuilder", subtitleView: "subtitleView", disableUsersPresence: "disableUsersPresence", listItemView: "listItemView", menu: "menu", options: "options", activeUser: "activeUser", hideSeparator: "hideSeparator", searchPlaceholder: "searchPlaceholder", hideError: "hideError", selectionMode: "selectionMode", searchIconURL: "searchIconURL", hideSearch: "hideSearch", title: "title", onError: "onError", emptyStateView: "emptyStateView", onSelect: "onSelect", errorStateView: "errorStateView", loadingIconURL: "loadingIconURL", showSectionHeader: "showSectionHeader", sectionHeaderField: "sectionHeaderField", loadingStateView: "loadingStateView", emptyStateText: "emptyStateText", errorStateText: "errorStateText", titleAlignment: "titleAlignment", usersStyle: "usersStyle", listItemStyle: "listItemStyle", statusIndicatorStyle: "statusIndicatorStyle", avatarStyle: "avatarStyle", onItemClick: "onItemClick", searchKeyword: "searchKeyword", onEmpty: "onEmpty", userPresencePlacement: "userPresencePlacement", disableLoadingState: "disableLoadingState" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"cc-users\" [ngStyle]=\"userStyle()\">\n  <div class=\"cc-menus\" *ngIf=\"menu\">\n\n    <ng-container *ngTemplateOutlet=\"menu\">\n    </ng-container>\n\n</div>\n  <cometchat-list [listItemView]=\"listItemView ? listItemView : listItem\" [onScrolledToBottom]=\"onScrolledToBottom\" [onSearch]=\"onSearch\"\n      [list]=\"usersList\" [searchText]=\"searchKeyword\" [searchPlaceholderText]=\"searchPlaceholder\"\n      [searchIconURL]=\"searchIconURL\" [hideSearch]=\"hideSearch\" [hideError]=\"hideError\" [title]=\"title\"\n      [sectionHeaderField]=\"sectionHeaderField\" [showSectionHeader]=\"showSectionHeader\"\n      [emptyStateText]=\"emptyStateText\" [loadingIconURL]=\"loadingIconURL\"\n      [titleAlignment]=\"titleAlignment\" [loadingStateView]=\"loadingStateView\" [emptyStateView]=\"emptyStateView\"\n      [errorStateText]=\"errorStateText\" [errorStateView]=\"errorStateView\" [listStyle]=\"listStyle\" [state]=\"state\">\n  </cometchat-list>\n  <ng-template #listItem let-user>\n      <cometchat-list-item [title]=\"user?.name\" [avatarURL]=\"user?.avatar\" [avatarName]=\"user?.name\"\n          [listItemStyle]=\"listItemStyle\" [avatarStyle]=\"avatarStyle\" [statusIndicatorStyle]=\"getStatusIndicatorStyle(user)\"\n          [statusIndicatorColor]=\"getStatusIndicatorColor(user)\" [hideSeparator]=\"hideSeparator\" (cc-listitem-clicked)=\"onClick(user)\" [isActive]=\"getActiveUser(user)\"\n          [userPresencePlacement]=\"userPresencePlacement\">\n          <div slot=\"subtitleView\" *ngIf=\"subtitleView\">\n              <ng-container  *ngTemplateOutlet=\"subtitleView;context:{ $implicit: user }\">\n              </ng-container>\n          </div>\n\n          <div slot=\"menuView\" class=\"cc-users__options\" *ngIf=\"options\">\n              <cometchat-menu-list [data]=\"options(user)\">\n\n              </cometchat-menu-list>\n        </div>\n        <div slot=\"tailView\"  *ngIf=\"selectionMode != selectionmodeEnum.none\" class=\"cc-users__tail-view\">\n          <ng-container *ngTemplateOutlet=\"tailView\">\n          </ng-container>\n      </div>\n      <ng-template #tailView>\n        <div  *ngIf=\"selectionMode == selectionmodeEnum.single\" class=\"cc-users__selection--single\">\n          <cometchat-radio-button  (cc-radio-button-changed)=\"addMembersToList(user,$event)\" [checked]=\"isUserSelected(user)\" ></cometchat-radio-button>\n\n        </div>\n        <div  *ngIf=\"selectionMode == selectionmodeEnum.multiple\" class=\"cc-users__selection--multiple\">\n          <cometchat-checkbox  (cc-checkbox-changed)=\"addMembersToList(user,$event)\" [checked]=\"isUserSelected(user)\"></cometchat-checkbox>\n\n        </div>\n      </ng-template>\n      </cometchat-list-item>\n\n  </ng-template>\n</div>\n\n", styles: [".cc-users{height:100%;width:100%;box-sizing:border-box}.cc-menus{position:absolute;right:12px;padding:12px;cursor:pointer}.cc-users__selection--multiple{width:65px}\n"], components: [{ type: CometchatListComponent, selector: "cometchat-list", inputs: ["listItemView", "onScrolledToBottom", "onScrolledToTop", "list", "onSearch", "getSectionHeader", "searchText", "searchIconURL", "listStyle", "searchPlaceholderText", "hideSearch", "hideError", "title", "titleAlignment", "errorStateView", "loadingStateView", "emptyStateView", "state", "errorStateText", "emptyStateText", "loadingIconURL", "showSectionHeader", "sectionHeaderField", "DateSeparatorPattern", "dateSeparatorStyle"] }], directives: [{ type: i3.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i3.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: CometChatUsersComponent, decorators: [{
             type: Component,
-            args: [{ selector: "cometchat-users", changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"cc-users\" [ngStyle]=\"userStyle()\">\n  <div class=\"cc-menus\" *ngIf=\"menu\">\n\n    <ng-container *ngTemplateOutlet=\"menu\">\n    </ng-container>\n\n</div>\n  <cometchat-list [listItemView]=\"listItemView ? listItemView : listItem\" [onScrolledToBottom]=\"onScrolledToBottom\" [onSearch]=\"onSearch\"\n      [list]=\"usersList\" [searchText]=\"searchKeyword\" [searchPlaceholderText]=\"searchPlaceholder\"\n      [searchIconURL]=\"searchIconURL\" [hideSearch]=\"hideSearch\" [hideError]=\"hideError\" [title]=\"title\"\n      [sectionHeaderField]=\"sectionHeaderField\" [showSectionHeader]=\"showSectionHeader\"\n      [emptyStateText]=\"emptyStateText\" [loadingIconURL]=\"loadingIconURL\"\n      [titleAlignment]=\"titleAlignment\" [loadingStateView]=\"loadingStateView\" [emptyStateView]=\"emptyStateView\"\n      [errorStateText]=\"errorStateText\" [errorStateView]=\"errorStateView\" [listStyle]=\"listStyle\" [state]=\"state\">\n  </cometchat-list>\n  <ng-template #listItem let-user>\n      <cometchat-list-item [title]=\"user?.name\" [avatarURL]=\"user?.avatar\" [avatarName]=\"user?.name\"\n          [listItemStyle]=\"listItemStyle\" [avatarStyle]=\"avatarStyle\" [statusIndicatorStyle]=\"getStatusIndicatorStyle(user)\"\n          [statusIndicatorColor]=\"getStatusIndicatorColor(user)\" [hideSeparator]=\"hideSeparator\" (cc-listitem-clicked)=\"onClick(user)\" [isActive]=\"getActiveUser(user)\"\n          [userPresencePlacement]=\"userPresencePlacement\">\n          <div slot=\"subtitleView\" *ngIf=\"subtitleView\">\n              <ng-container  *ngTemplateOutlet=\"subtitleView;context:{ $implicit: user }\">\n              </ng-container>\n          </div>\n\n          <div slot=\"menuView\" class=\"cc-users__options\" *ngIf=\"options\">\n              <cometchat-menu-list [data]=\"options(user)\">\n\n              </cometchat-menu-list>\n        </div>\n        <div slot=\"tailView\"  *ngIf=\"selectionMode != selectionmodeEnum.none\" class=\"cc-users__tail-view\">\n          <ng-container *ngTemplateOutlet=\"tailView\">\n          </ng-container>\n      </div>\n      <ng-template #tailView>\n        <div  *ngIf=\"selectionMode == selectionmodeEnum.single\" class=\"cc-users__selection--single\">\n          <cometchat-radio-button  (cc-radio-button-checked)=\"addMembersToList(user,$event)\" [checked]=\"isUserSelected(user)\" ></cometchat-radio-button>\n\n        </div>\n        <div  *ngIf=\"selectionMode == selectionmodeEnum.multiple\" class=\"cc-users__selection--multiple\">\n          <cometchat-checkbox  (cc-checkbox-changed)=\"addMembersToList(user,$event)\"></cometchat-checkbox>\n\n        </div>\n      </ng-template>\n      </cometchat-list-item>\n\n  </ng-template>\n</div>\n\n", styles: [".cc-users{height:100%;width:100%;box-sizing:border-box}.cc-menus{position:absolute;right:12px;padding:12px;cursor:pointer}.cc-users__selection--multiple{width:65px}\n"] }]
+            args: [{ selector: "cometchat-users", changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"cc-users\" [ngStyle]=\"userStyle()\">\n  <div class=\"cc-menus\" *ngIf=\"menu\">\n\n    <ng-container *ngTemplateOutlet=\"menu\">\n    </ng-container>\n\n</div>\n  <cometchat-list [listItemView]=\"listItemView ? listItemView : listItem\" [onScrolledToBottom]=\"onScrolledToBottom\" [onSearch]=\"onSearch\"\n      [list]=\"usersList\" [searchText]=\"searchKeyword\" [searchPlaceholderText]=\"searchPlaceholder\"\n      [searchIconURL]=\"searchIconURL\" [hideSearch]=\"hideSearch\" [hideError]=\"hideError\" [title]=\"title\"\n      [sectionHeaderField]=\"sectionHeaderField\" [showSectionHeader]=\"showSectionHeader\"\n      [emptyStateText]=\"emptyStateText\" [loadingIconURL]=\"loadingIconURL\"\n      [titleAlignment]=\"titleAlignment\" [loadingStateView]=\"loadingStateView\" [emptyStateView]=\"emptyStateView\"\n      [errorStateText]=\"errorStateText\" [errorStateView]=\"errorStateView\" [listStyle]=\"listStyle\" [state]=\"state\">\n  </cometchat-list>\n  <ng-template #listItem let-user>\n      <cometchat-list-item [title]=\"user?.name\" [avatarURL]=\"user?.avatar\" [avatarName]=\"user?.name\"\n          [listItemStyle]=\"listItemStyle\" [avatarStyle]=\"avatarStyle\" [statusIndicatorStyle]=\"getStatusIndicatorStyle(user)\"\n          [statusIndicatorColor]=\"getStatusIndicatorColor(user)\" [hideSeparator]=\"hideSeparator\" (cc-listitem-clicked)=\"onClick(user)\" [isActive]=\"getActiveUser(user)\"\n          [userPresencePlacement]=\"userPresencePlacement\">\n          <div slot=\"subtitleView\" *ngIf=\"subtitleView\">\n              <ng-container  *ngTemplateOutlet=\"subtitleView;context:{ $implicit: user }\">\n              </ng-container>\n          </div>\n\n          <div slot=\"menuView\" class=\"cc-users__options\" *ngIf=\"options\">\n              <cometchat-menu-list [data]=\"options(user)\">\n\n              </cometchat-menu-list>\n        </div>\n        <div slot=\"tailView\"  *ngIf=\"selectionMode != selectionmodeEnum.none\" class=\"cc-users__tail-view\">\n          <ng-container *ngTemplateOutlet=\"tailView\">\n          </ng-container>\n      </div>\n      <ng-template #tailView>\n        <div  *ngIf=\"selectionMode == selectionmodeEnum.single\" class=\"cc-users__selection--single\">\n          <cometchat-radio-button  (cc-radio-button-changed)=\"addMembersToList(user,$event)\" [checked]=\"isUserSelected(user)\" ></cometchat-radio-button>\n\n        </div>\n        <div  *ngIf=\"selectionMode == selectionmodeEnum.multiple\" class=\"cc-users__selection--multiple\">\n          <cometchat-checkbox  (cc-checkbox-changed)=\"addMembersToList(user,$event)\" [checked]=\"isUserSelected(user)\"></cometchat-checkbox>\n\n        </div>\n      </ng-template>\n      </cometchat-list-item>\n\n  </ng-template>\n</div>\n\n", styles: [".cc-users{height:100%;width:100%;box-sizing:border-box}.cc-menus{position:absolute;right:12px;padding:12px;cursor:pointer}.cc-users__selection--multiple{width:65px}\n"] }]
         }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }, { type: CometChatThemeService }]; }, propDecorators: { usersRequestBuilder: [{
                 type: Input
             }], searchRequestBuilder: [{
@@ -4910,6 +4920,20 @@ class CometChatMessageHeaderComponent {
             else
                 return;
         };
+        this.handleGroupEvent = (group, user, hasJoined, newScope) => {
+            if (this.group.getGuid() !== group.getGuid()) {
+                return;
+            }
+            if (user.getUid() === this.loggedInUser?.getUid()) {
+                group.setHasJoined(hasJoined);
+                if (newScope) {
+                    group.setScope(newScope);
+                }
+            }
+            this.group = group;
+            this.ref.detectChanges();
+            this.updateSubtitle();
+        };
         this.setTypingIndicatorText = (typing) => {
             const sender = typing.getSender();
             const receiverId = typing.getReceiverId();
@@ -5177,45 +5201,20 @@ class CometChatMessageHeaderComponent {
             }
             CometChat.addGroupListener(this.groupsListenerId, new CometChat.GroupListener({
                 onGroupMemberScopeChanged: (message, changedUser, newScope, oldScope, changedGroup) => {
-                    if (changedUser.getUid() == this.loggedInUser?.getUid()) {
-                        changedGroup.setScope(newScope);
-                    }
-                    this.group = changedGroup;
-                    this.ref.detectChanges();
-                    this.updateSubtitle();
+                    this.handleGroupEvent(changedGroup, changedUser, true, newScope);
                 },
                 onGroupMemberKicked: (message, kickedUser, kickedBy, kickedFrom) => {
-                    if (kickedUser.getUid() == this.loggedInUser?.getUid()) {
-                        kickedFrom.setHasJoined(false);
-                    }
-                    this.group = kickedFrom;
-                    this.ref.detectChanges();
-                    this.updateSubtitle();
+                    this.handleGroupEvent(kickedFrom, kickedUser, false);
                 },
                 onMemberAddedToGroup: (message, userAdded, userAddedBy, userAddedIn) => {
-                    if (userAdded.getUid() == this.loggedInUser?.getUid()) {
-                        userAddedIn.setHasJoined(true);
-                    }
-                    this.group = userAddedIn;
-                    this.ref.detectChanges();
-                    this.updateSubtitle();
+                    this.handleGroupEvent(userAddedIn, userAdded, true);
                 },
                 onGroupMemberLeft: (message, leavingUser, group) => {
-                    if (leavingUser.getUid() == this.loggedInUser?.getUid()) {
-                        group.setHasJoined(false);
-                    }
-                    this.group = group;
-                    this.ref.detectChanges();
-                    this.updateSubtitle();
+                    this.handleGroupEvent(group, leavingUser, false);
                 },
                 onGroupMemberJoined: (message, joinedUser, joinedGroup) => {
-                    if (joinedUser.getUid() == this.loggedInUser?.getUid()) {
-                        joinedGroup.setHasJoined(true);
-                    }
-                    this.group = joinedGroup;
-                    this.ref.detectChanges();
-                    this.updateSubtitle();
-                },
+                    this.handleGroupEvent(joinedGroup, joinedUser, true);
+                }
             }));
         }
         catch (error) {
@@ -5872,7 +5871,13 @@ class CometChatConversationsComponent {
         this.title = localize("CHATS"); //Title of the component
         this.searchPlaceHolder = localize("SEARCH"); // placeholder text of search input
         this.disableUsersPresence = false;
+        /**
+         * @deprecated
+         *
+         * This property is deprecated as of version 4.3.16 due to newer property 'hideReceipt'. It will be removed in subsequent versions.
+         */
         this.disableReceipt = false;
+        this.hideReceipt = false;
         this.disableTyping = false;
         this.deliveredIcon = "assets/message-delivered.svg";
         this.readIcon = "assets/message-read.svg";
@@ -6250,16 +6255,7 @@ class CometChatConversationsComponent {
          * @param  {CometChat.BaseMessage} message
          */
         this.markMessageAsDelivered = (message) => {
-            const isGroupConversation = this.activeConversation?.getConversationType() ==
-                CometChatUIKitConstants.MessageReceiverType.group;
-            const isUserConversation = this.activeConversation?.getConversationType() ==
-                CometChatUIKitConstants.MessageReceiverType.user;
-            const isSameGroup = this.activeConversation?.getConversationWith() instanceof CometChat.Group && this.activeConversation?.getConversationWith()?.getGuid() === message?.getReceiverId();
-            const isSameUser = this.activeConversation?.getConversationWith() instanceof CometChat.User && this.activeConversation?.getConversationWith()?.getUid() === message?.getSender()?.getUid();
-            const shouldMarkAsDelivered = !this.activeConversation ||
-                (isGroupConversation && isSameGroup) ||
-                (isUserConversation && isSameUser);
-            if (shouldMarkAsDelivered && !message.hasOwnProperty("deliveredAt")) {
+            if (!message.hasOwnProperty("deliveredAt")) {
                 CometChat.markAsDelivered(message);
             }
         };
@@ -7089,7 +7085,7 @@ class CometChatConversationsComponent {
     isReceiptDisable(conversation) {
         let item = conversation.getConversationWith();
         let message = conversation.getLastMessage();
-        if (!this.disableReceipt &&
+        if (!(this.disableReceipt || this.hideReceipt) &&
             message &&
             !message?.getDeletedAt() &&
             message?.getCategory() !=
@@ -7239,7 +7235,9 @@ class CometChatConversationsComponent {
                         }
                         if (notification &&
                             this.loggedInUser?.getUid() != message?.getSender()?.getUid()) {
-                            this.playAudio();
+                            if (!this.disableSoundForMessages) {
+                                this.playAudio();
+                            }
                             this.ref.detectChanges();
                         }
                     }
@@ -7258,7 +7256,9 @@ class CometChatConversationsComponent {
                         this.ref.detectChanges();
                         if (notification &&
                             this.loggedInUser?.getUid() != message?.getSender()?.getUid()) {
-                            this.playAudio();
+                            if (!this.disableSoundForMessages) {
+                                this.playAudio();
+                            }
                             this.ref.detectChanges();
                         }
                     }
@@ -7510,7 +7510,7 @@ class CometChatConversationsComponent {
     }
 }
 CometChatConversationsComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: CometChatConversationsComponent, deps: [{ token: i0.NgZone }, { token: i0.ChangeDetectorRef }, { token: CometChatThemeService }, { token: i2.DomSanitizer }], target: i0.ɵɵFactoryTarget.Component });
-CometChatConversationsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: CometChatConversationsComponent, selector: "cometchat-conversations", inputs: { subtitleView: "subtitleView", title: "title", options: "options", searchPlaceHolder: "searchPlaceHolder", disableUsersPresence: "disableUsersPresence", disableReceipt: "disableReceipt", disableTyping: "disableTyping", deliveredIcon: "deliveredIcon", readIcon: "readIcon", errorIcon: "errorIcon", datePattern: "datePattern", onError: "onError", sentIcon: "sentIcon", privateGroupIcon: "privateGroupIcon", protectedGroupIcon: "protectedGroupIcon", passwordGroupIcon: "passwordGroupIcon", customSoundForMessages: "customSoundForMessages", activeConversation: "activeConversation", searchIconURL: "searchIconURL", hideSearch: "hideSearch", conversationsRequestBuilder: "conversationsRequestBuilder", emptyStateView: "emptyStateView", onSelect: "onSelect", loadingIconURL: "loadingIconURL", errorStateView: "errorStateView", loadingStateView: "loadingStateView", emptyStateText: "emptyStateText", errorStateText: "errorStateText", titleAlignment: "titleAlignment", listItemView: "listItemView", menu: "menu", hideSeparator: "hideSeparator", searchPlaceholder: "searchPlaceholder", hideError: "hideError", selectionMode: "selectionMode", disableSoundForMessages: "disableSoundForMessages", confirmDialogTitle: "confirmDialogTitle", confirmButtonText: "confirmButtonText", cancelButtonText: "cancelButtonText", confirmDialogMessage: "confirmDialogMessage", onItemClick: "onItemClick", deleteConversationDialogStyle: "deleteConversationDialogStyle", backdropStyle: "backdropStyle", badgeStyle: "badgeStyle", dateStyle: "dateStyle", conversationsStyle: "conversationsStyle", listItemStyle: "listItemStyle", statusIndicatorStyle: "statusIndicatorStyle", typingIndicatorText: "typingIndicatorText", threadIndicatorText: "threadIndicatorText", avatarStyle: "avatarStyle", receiptStyle: "receiptStyle", loggedInUser: "loggedInUser", disableMentions: "disableMentions", textFormatters: "textFormatters" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"cc-conversations\" [ngStyle]=\"styles.wrapperStyle()\">\n  <cometchat-backdrop [backdropStyle]=\"backdropStyle\" *ngIf=\"isDialogOpen\">\n    <cometchat-confirm-dialog [title]=\"confirmDialogTitle\"\n      [messageText]=\"confirmDialogMessage\" [cancelButtonText]=\"cancelButtonText\"\n      [confirmButtonText]=\"confirmButtonText\"\n      (cc-confirm-clicked)=\"onConfirmClick()\"\n      (cc-cancel-clicked)=\"onCancelClick()\"\n      [confirmDialogStyle]=\"deleteConversationDialogStyle\">\n    </cometchat-confirm-dialog>\n  </cometchat-backdrop>\n  <div class=\"cc-conversations__menus\" *ngIf=\"menu\">\n\n    <ng-container *ngTemplateOutlet=\"menu\">\n    </ng-container>\n\n  </div>\n  <cometchat-list [state]=\"state\" [searchIconURL]=\"searchIconURL\"\n    [hideError]=\"hideError\" [emptyStateText]=\"emptyStateText\"\n    [loadingIconURL]=\"loadingIconURL\" [titleAlignment]=\"titleAlignment\"\n    [loadingStateView]=\"loadingStateView\" [listStyle]=\"listStyle\"\n    [emptyStateView]=\"emptyStateView\" [errorStateText]=\"errorStateText\"\n    [errorStateView]=\"errorStateView\" [onScrolledToBottom]=\"getConversation\"\n    [list]=\"conversationList\"\n    [listItemView]=\"listItemView ? listItemView : listItem\" [title]=\"title\"\n    [hideSearch]=\"hideSearch\"></cometchat-list>\n</div>\n<ng-template #listItem let-conversation>\n  <cometchat-list-item [hideSeparator]=\"hideSeparator\"\n    [avatarStyle]=\"avatarStyle\"\n    [statusIndicatorStyle]=\"getStatusIndicatorStyle(conversation)\"\n    [id]=\"conversation?.conversationId\"\n    [isActive]=\"getActiveConversation(conversation)\"\n    (cc-listitem-clicked)=\"onClick(conversation)\"\n    [title]=\"conversation?.conversationWith?.name\"\n    [statusIndicatorIcon]=\"checkGroupType(conversation)\"\n    [statusIndicatorColor]=\"checkStatusType(conversation)\"\n    [listItemStyle]=\"listItemStyle\"\n    [avatarURL]=\"conversation?.conversationWith?.avatar || conversation?.conversationWith?.icon\"\n    [avatarName]=\"conversation?.conversationWith?.name\">\n    <div slot=\"subtitleView\" *ngIf=\"subtitleView;else conversationSubtitle\">\n      <ng-container *ngTemplateOutlet=\"subtitleView;context:{ $implicit: conversation }\">\n      </ng-container>\n    </div>\n    <ng-template #conversationSubtitle>\n\n      <div class=\"cc-conversations__subtitle-view \" slot=\"subtitleView\">\n        <div class=\"cc-conversations__threadview\"\n          *ngIf=\"conversation?.lastMessage?.parentMessageId\">\n          <cometchat-label [labelStyle]=\"itemThreadIndicatorStyle()\"\n            [text]=\"threadIndicatorText\"> </cometchat-label>\n          <cometchat-icon [URL]=\"threadIconURL\"\n            [iconStyle]=\"iconStyle\"></cometchat-icon>\n\n        </div>\n        <div class=\"cc-conversations__subtitle\">\n          <div class=\"cc-conversations__readreceipt\"\n            *ngIf=\"isReceiptDisable(conversation)\">\n            <cometchat-receipt [receipt]=\"getMessageReceipt(conversation)\"\n              [receiptStyle]=\"receiptStyle\" [sentIcon]=\"sentIcon\"\n              [errorIcon]=\"errorIcon\" [deliveredIcon]=\"deliveredIcon\"\n              [readIcon]=\"readIcon\"></cometchat-receipt>\n          </div>\n\n          <div [ngStyle]=\"subtitleStyle(conversation)\" class=\"cc-subtitle__text\"\n            [innerHTML]=\"setSubtitle(conversation)\"></div>\n        </div>\n\n      </div>\n    </ng-template>\n    <div slot=\"menuView\" class=\"cc-conversations__optionsview\"\n      *ngIf=\"selectionMode == selectionmodeEnum.none\">\n      <div *ngIf=\"options\">\n        <cometchat-menu-list [data]=\"options(conversation)\"\n          (cc-menu-clicked)=\"onOptionClick($event,conversation)\"\n          [menuListStyle]=\"menustyle\">\n\n        </cometchat-menu-list>\n      </div>\n      <div *ngIf=\"!options && conversationOptions\">\n        <cometchat-menu-list [data]=\"conversationOptions\"\n          (cc-menu-clicked)=\"onOptionClick($event,conversation)\"\n          [menuListStyle]=\"menustyle\">\n\n        </cometchat-menu-list>\n      </div>\n    </div>\n    <div slot=\"tailView\" class=\"cc-conversations__tail-view\">\n      <div class=\"tail__view\"\n        *ngIf=\"selectionMode == selectionmodeEnum.none && conversation?.lastMessage\">\n        <div class=\"cc-date\">\n          <cometchat-date *ngIf=\"conversation?.lastMessage\"\n            [dateStyle]=\"dateStyle\"\n            [timestamp]=\"conversation?.lastMessage?.sentAt\"\n            [pattern]=\"getDate()\"></cometchat-date>\n        </div>\n        <div class=\"cc-conversations__badge\">\n          <!-- <cometchat-icon *ngIf=\"conversation?.getUnreadMentionInMessageCount()\" [ngStyle]=\"getUnreadMentionsIconStyle()\" [iconStyle]=getMentionIconStyle() [URL]=\"mentionsIconURL\"></cometchat-icon> -->\n          <cometchat-badge [count]=\"conversation?.unreadMessageCount\"\n            [badgeStyle]=\"badgeStyle\"></cometchat-badge>\n        </div>\n      </div>\n      <div class=\"cc-conversations__selection-view\"\n        *ngIf=\"selectionMode != selectionmodeEnum.none\">\n        <ng-container *ngTemplateOutlet=\"tailView\">\n        </ng-container>\n      </div>\n    </div>\n  </cometchat-list-item>\n  <ng-template #tailView>\n    <div *ngIf=\"selectionMode == selectionmodeEnum.single\">\n      <cometchat-radio-button\n        (cc-radio-button-changed)=\"onConversationSelected(conversation,$event)\"></cometchat-radio-button>\n    </div>\n    <div *ngIf=\"selectionMode == selectionmodeEnum.multiple\">\n      <cometchat-checkbox\n        (cc-checkbox-changed)=\"onConversationSelected(conversation,$event)\"></cometchat-checkbox>\n    </div>\n  </ng-template>\n</ng-template>\n", styles: [".cc-conversations{height:100%;width:100%;box-sizing:border-box;margin-bottom:16px;position:relative}.cc-conversations__selection-view{position:relative}.tail__view{display:flex;flex-direction:column;justify-content:flex-start;align-items:center}.cc-subtitle__text{text-overflow:ellipsis;overflow:hidden;white-space:nowrap}.cc-conversations__menus{position:absolute;right:12px;padding:4px;cursor:pointer}.cc-menus__icon{height:24px;width:24px}.cc-conversations__subtitle-view{display:flex;align-items:center;width:90%;flex-direction:column;justify-content:flex-start}.cc-conversations__subtitle{display:flex;justify-content:flex-start;width:100%;align-items:center;min-height:22px}.cc-conversations__threadview{height:12px;display:flex;justify-content:flex-start;width:100%;align-items:center}.cc-conversations__badge{display:flex;align-items:flex-end;justify-content:flex-end;width:100%;padding-right:8px}cometchat-list-item{padding:0 8px}\n"], components: [{ type: CometchatListComponent, selector: "cometchat-list", inputs: ["listItemView", "onScrolledToBottom", "onScrolledToTop", "list", "onSearch", "getSectionHeader", "searchText", "searchIconURL", "listStyle", "searchPlaceholderText", "hideSearch", "hideError", "title", "titleAlignment", "errorStateView", "loadingStateView", "emptyStateView", "state", "errorStateText", "emptyStateText", "loadingIconURL", "showSectionHeader", "sectionHeaderField", "DateSeparatorPattern", "dateSeparatorStyle"] }], directives: [{ type: i3.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i3.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+CometChatConversationsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: CometChatConversationsComponent, selector: "cometchat-conversations", inputs: { subtitleView: "subtitleView", title: "title", options: "options", searchPlaceHolder: "searchPlaceHolder", disableUsersPresence: "disableUsersPresence", disableReceipt: "disableReceipt", hideReceipt: "hideReceipt", disableTyping: "disableTyping", deliveredIcon: "deliveredIcon", readIcon: "readIcon", errorIcon: "errorIcon", datePattern: "datePattern", onError: "onError", sentIcon: "sentIcon", privateGroupIcon: "privateGroupIcon", protectedGroupIcon: "protectedGroupIcon", passwordGroupIcon: "passwordGroupIcon", customSoundForMessages: "customSoundForMessages", activeConversation: "activeConversation", searchIconURL: "searchIconURL", hideSearch: "hideSearch", conversationsRequestBuilder: "conversationsRequestBuilder", emptyStateView: "emptyStateView", onSelect: "onSelect", loadingIconURL: "loadingIconURL", errorStateView: "errorStateView", loadingStateView: "loadingStateView", emptyStateText: "emptyStateText", errorStateText: "errorStateText", titleAlignment: "titleAlignment", listItemView: "listItemView", menu: "menu", hideSeparator: "hideSeparator", searchPlaceholder: "searchPlaceholder", hideError: "hideError", selectionMode: "selectionMode", disableSoundForMessages: "disableSoundForMessages", confirmDialogTitle: "confirmDialogTitle", confirmButtonText: "confirmButtonText", cancelButtonText: "cancelButtonText", confirmDialogMessage: "confirmDialogMessage", onItemClick: "onItemClick", deleteConversationDialogStyle: "deleteConversationDialogStyle", backdropStyle: "backdropStyle", badgeStyle: "badgeStyle", dateStyle: "dateStyle", conversationsStyle: "conversationsStyle", listItemStyle: "listItemStyle", statusIndicatorStyle: "statusIndicatorStyle", typingIndicatorText: "typingIndicatorText", threadIndicatorText: "threadIndicatorText", avatarStyle: "avatarStyle", receiptStyle: "receiptStyle", loggedInUser: "loggedInUser", disableMentions: "disableMentions", textFormatters: "textFormatters" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"cc-conversations\" [ngStyle]=\"styles.wrapperStyle()\">\n  <cometchat-backdrop [backdropStyle]=\"backdropStyle\" *ngIf=\"isDialogOpen\">\n    <cometchat-confirm-dialog [title]=\"confirmDialogTitle\"\n      [messageText]=\"confirmDialogMessage\" [cancelButtonText]=\"cancelButtonText\"\n      [confirmButtonText]=\"confirmButtonText\"\n      (cc-confirm-clicked)=\"onConfirmClick()\"\n      (cc-cancel-clicked)=\"onCancelClick()\"\n      [confirmDialogStyle]=\"deleteConversationDialogStyle\">\n    </cometchat-confirm-dialog>\n  </cometchat-backdrop>\n  <div class=\"cc-conversations__menus\" *ngIf=\"menu\">\n\n    <ng-container *ngTemplateOutlet=\"menu\">\n    </ng-container>\n\n  </div>\n  <cometchat-list [state]=\"state\" [searchIconURL]=\"searchIconURL\"\n    [hideError]=\"hideError\" [emptyStateText]=\"emptyStateText\"\n    [loadingIconURL]=\"loadingIconURL\" [titleAlignment]=\"titleAlignment\"\n    [loadingStateView]=\"loadingStateView\" [listStyle]=\"listStyle\"\n    [emptyStateView]=\"emptyStateView\" [errorStateText]=\"errorStateText\"\n    [errorStateView]=\"errorStateView\" [onScrolledToBottom]=\"getConversation\"\n    [list]=\"conversationList\"\n    [listItemView]=\"listItemView ? listItemView : listItem\" [title]=\"title\"\n    [hideSearch]=\"hideSearch\"></cometchat-list>\n</div>\n<ng-template #listItem let-conversation>\n  <cometchat-list-item [hideSeparator]=\"hideSeparator\"\n    [avatarStyle]=\"avatarStyle\"\n    [statusIndicatorStyle]=\"getStatusIndicatorStyle(conversation)\"\n    [id]=\"conversation?.conversationId\"\n    [isActive]=\"getActiveConversation(conversation)\"\n    (cc-listitem-clicked)=\"onClick(conversation)\"\n    [title]=\"conversation?.conversationWith?.name\"\n    [statusIndicatorIcon]=\"checkGroupType(conversation)\"\n    [statusIndicatorColor]=\"checkStatusType(conversation)\"\n    [listItemStyle]=\"listItemStyle\"\n    [avatarURL]=\"conversation?.conversationWith?.avatar || conversation?.conversationWith?.icon\"\n    [avatarName]=\"conversation?.conversationWith?.name\">\n    <div slot=\"subtitleView\" *ngIf=\"subtitleView;else conversationSubtitle\">\n      <ng-container *ngTemplateOutlet=\"subtitleView;context:{ $implicit: conversation }\">\n      </ng-container>\n    </div>\n    <ng-template #conversationSubtitle>\n\n      <div class=\"cc-conversations__subtitle-view \" slot=\"subtitleView\">\n        <div class=\"cc-conversations__threadview\"\n          *ngIf=\"conversation?.lastMessage?.parentMessageId\">\n          <cometchat-label [labelStyle]=\"itemThreadIndicatorStyle()\"\n            [text]=\"threadIndicatorText\"> </cometchat-label>\n          <cometchat-icon [URL]=\"threadIconURL\"\n            [iconStyle]=\"iconStyle\"></cometchat-icon>\n\n        </div>\n        <div class=\"cc-conversations__subtitle\">\n          <div class=\"cc-conversations__readreceipt\"\n            *ngIf=\"isReceiptDisable(conversation)\">\n            <cometchat-receipt [receipt]=\"getMessageReceipt(conversation)\"\n              [receiptStyle]=\"receiptStyle\" [sentIcon]=\"sentIcon\"\n              [errorIcon]=\"errorIcon\" [deliveredIcon]=\"deliveredIcon\"\n              [readIcon]=\"readIcon\"></cometchat-receipt>\n          </div>\n\n          <div [ngStyle]=\"subtitleStyle(conversation)\" class=\"cc-subtitle__text\"\n            [innerHTML]=\"setSubtitle(conversation)\"></div>\n        </div>\n\n      </div>\n    </ng-template>\n    <div slot=\"menuView\" class=\"cc-conversations__optionsview\"\n      *ngIf=\"selectionMode == selectionmodeEnum.none\">\n      <div *ngIf=\"options\">\n        <cometchat-menu-list [data]=\"options(conversation)\"\n          (cc-menu-clicked)=\"onOptionClick($event,conversation)\"\n          [menuListStyle]=\"menustyle\">\n\n        </cometchat-menu-list>\n      </div>\n      <div *ngIf=\"!options && conversationOptions\">\n        <cometchat-menu-list [data]=\"conversationOptions\"\n          (cc-menu-clicked)=\"onOptionClick($event,conversation)\"\n          [menuListStyle]=\"menustyle\">\n\n        </cometchat-menu-list>\n      </div>\n    </div>\n    <div slot=\"tailView\" class=\"cc-conversations__tail-view\">\n      <div class=\"tail__view\"\n        *ngIf=\"selectionMode == selectionmodeEnum.none && conversation?.lastMessage\">\n        <div class=\"cc-date\">\n          <cometchat-date *ngIf=\"conversation?.lastMessage\"\n            [dateStyle]=\"dateStyle\"\n            [timestamp]=\"conversation?.lastMessage?.sentAt\"\n            [pattern]=\"getDate()\"></cometchat-date>\n        </div>\n        <div class=\"cc-conversations__badge\">\n          <!-- <cometchat-icon *ngIf=\"conversation?.getUnreadMentionInMessageCount()\" [ngStyle]=\"getUnreadMentionsIconStyle()\" [iconStyle]=getMentionIconStyle() [URL]=\"mentionsIconURL\"></cometchat-icon> -->\n          <cometchat-badge [count]=\"conversation?.unreadMessageCount\"\n            [badgeStyle]=\"badgeStyle\"></cometchat-badge>\n        </div>\n      </div>\n      <div class=\"cc-conversations__selection-view\"\n        *ngIf=\"selectionMode != selectionmodeEnum.none\">\n        <ng-container *ngTemplateOutlet=\"tailView\">\n        </ng-container>\n      </div>\n    </div>\n  </cometchat-list-item>\n  <ng-template #tailView>\n    <div *ngIf=\"selectionMode == selectionmodeEnum.single\">\n      <cometchat-radio-button\n        (cc-radio-button-changed)=\"onConversationSelected(conversation,$event)\"></cometchat-radio-button>\n    </div>\n    <div *ngIf=\"selectionMode == selectionmodeEnum.multiple\">\n      <cometchat-checkbox\n        (cc-checkbox-changed)=\"onConversationSelected(conversation,$event)\"></cometchat-checkbox>\n    </div>\n  </ng-template>\n</ng-template>\n", styles: [".cc-conversations{height:100%;width:100%;box-sizing:border-box;margin-bottom:16px;position:relative}.cc-conversations__selection-view{position:relative}.tail__view{display:flex;flex-direction:column;justify-content:flex-start;align-items:center}.cc-subtitle__text{text-overflow:ellipsis;overflow:hidden;white-space:nowrap}.cc-conversations__menus{position:absolute;right:12px;padding:4px;cursor:pointer}.cc-menus__icon{height:24px;width:24px}.cc-conversations__subtitle-view{display:flex;align-items:center;width:90%;flex-direction:column;justify-content:flex-start}.cc-conversations__subtitle{display:flex;justify-content:flex-start;width:100%;align-items:center;min-height:22px}.cc-conversations__threadview{height:12px;display:flex;justify-content:flex-start;width:100%;align-items:center}.cc-conversations__badge{display:flex;align-items:flex-end;justify-content:flex-end;width:100%;padding-right:8px}cometchat-list-item{padding:0 8px}\n"], components: [{ type: CometchatListComponent, selector: "cometchat-list", inputs: ["listItemView", "onScrolledToBottom", "onScrolledToTop", "list", "onSearch", "getSectionHeader", "searchText", "searchIconURL", "listStyle", "searchPlaceholderText", "hideSearch", "hideError", "title", "titleAlignment", "errorStateView", "loadingStateView", "emptyStateView", "state", "errorStateText", "emptyStateText", "loadingIconURL", "showSectionHeader", "sectionHeaderField", "DateSeparatorPattern", "dateSeparatorStyle"] }], directives: [{ type: i3.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i3.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: CometChatConversationsComponent, decorators: [{
             type: Component,
             args: [{ selector: "cometchat-conversations", changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"cc-conversations\" [ngStyle]=\"styles.wrapperStyle()\">\n  <cometchat-backdrop [backdropStyle]=\"backdropStyle\" *ngIf=\"isDialogOpen\">\n    <cometchat-confirm-dialog [title]=\"confirmDialogTitle\"\n      [messageText]=\"confirmDialogMessage\" [cancelButtonText]=\"cancelButtonText\"\n      [confirmButtonText]=\"confirmButtonText\"\n      (cc-confirm-clicked)=\"onConfirmClick()\"\n      (cc-cancel-clicked)=\"onCancelClick()\"\n      [confirmDialogStyle]=\"deleteConversationDialogStyle\">\n    </cometchat-confirm-dialog>\n  </cometchat-backdrop>\n  <div class=\"cc-conversations__menus\" *ngIf=\"menu\">\n\n    <ng-container *ngTemplateOutlet=\"menu\">\n    </ng-container>\n\n  </div>\n  <cometchat-list [state]=\"state\" [searchIconURL]=\"searchIconURL\"\n    [hideError]=\"hideError\" [emptyStateText]=\"emptyStateText\"\n    [loadingIconURL]=\"loadingIconURL\" [titleAlignment]=\"titleAlignment\"\n    [loadingStateView]=\"loadingStateView\" [listStyle]=\"listStyle\"\n    [emptyStateView]=\"emptyStateView\" [errorStateText]=\"errorStateText\"\n    [errorStateView]=\"errorStateView\" [onScrolledToBottom]=\"getConversation\"\n    [list]=\"conversationList\"\n    [listItemView]=\"listItemView ? listItemView : listItem\" [title]=\"title\"\n    [hideSearch]=\"hideSearch\"></cometchat-list>\n</div>\n<ng-template #listItem let-conversation>\n  <cometchat-list-item [hideSeparator]=\"hideSeparator\"\n    [avatarStyle]=\"avatarStyle\"\n    [statusIndicatorStyle]=\"getStatusIndicatorStyle(conversation)\"\n    [id]=\"conversation?.conversationId\"\n    [isActive]=\"getActiveConversation(conversation)\"\n    (cc-listitem-clicked)=\"onClick(conversation)\"\n    [title]=\"conversation?.conversationWith?.name\"\n    [statusIndicatorIcon]=\"checkGroupType(conversation)\"\n    [statusIndicatorColor]=\"checkStatusType(conversation)\"\n    [listItemStyle]=\"listItemStyle\"\n    [avatarURL]=\"conversation?.conversationWith?.avatar || conversation?.conversationWith?.icon\"\n    [avatarName]=\"conversation?.conversationWith?.name\">\n    <div slot=\"subtitleView\" *ngIf=\"subtitleView;else conversationSubtitle\">\n      <ng-container *ngTemplateOutlet=\"subtitleView;context:{ $implicit: conversation }\">\n      </ng-container>\n    </div>\n    <ng-template #conversationSubtitle>\n\n      <div class=\"cc-conversations__subtitle-view \" slot=\"subtitleView\">\n        <div class=\"cc-conversations__threadview\"\n          *ngIf=\"conversation?.lastMessage?.parentMessageId\">\n          <cometchat-label [labelStyle]=\"itemThreadIndicatorStyle()\"\n            [text]=\"threadIndicatorText\"> </cometchat-label>\n          <cometchat-icon [URL]=\"threadIconURL\"\n            [iconStyle]=\"iconStyle\"></cometchat-icon>\n\n        </div>\n        <div class=\"cc-conversations__subtitle\">\n          <div class=\"cc-conversations__readreceipt\"\n            *ngIf=\"isReceiptDisable(conversation)\">\n            <cometchat-receipt [receipt]=\"getMessageReceipt(conversation)\"\n              [receiptStyle]=\"receiptStyle\" [sentIcon]=\"sentIcon\"\n              [errorIcon]=\"errorIcon\" [deliveredIcon]=\"deliveredIcon\"\n              [readIcon]=\"readIcon\"></cometchat-receipt>\n          </div>\n\n          <div [ngStyle]=\"subtitleStyle(conversation)\" class=\"cc-subtitle__text\"\n            [innerHTML]=\"setSubtitle(conversation)\"></div>\n        </div>\n\n      </div>\n    </ng-template>\n    <div slot=\"menuView\" class=\"cc-conversations__optionsview\"\n      *ngIf=\"selectionMode == selectionmodeEnum.none\">\n      <div *ngIf=\"options\">\n        <cometchat-menu-list [data]=\"options(conversation)\"\n          (cc-menu-clicked)=\"onOptionClick($event,conversation)\"\n          [menuListStyle]=\"menustyle\">\n\n        </cometchat-menu-list>\n      </div>\n      <div *ngIf=\"!options && conversationOptions\">\n        <cometchat-menu-list [data]=\"conversationOptions\"\n          (cc-menu-clicked)=\"onOptionClick($event,conversation)\"\n          [menuListStyle]=\"menustyle\">\n\n        </cometchat-menu-list>\n      </div>\n    </div>\n    <div slot=\"tailView\" class=\"cc-conversations__tail-view\">\n      <div class=\"tail__view\"\n        *ngIf=\"selectionMode == selectionmodeEnum.none && conversation?.lastMessage\">\n        <div class=\"cc-date\">\n          <cometchat-date *ngIf=\"conversation?.lastMessage\"\n            [dateStyle]=\"dateStyle\"\n            [timestamp]=\"conversation?.lastMessage?.sentAt\"\n            [pattern]=\"getDate()\"></cometchat-date>\n        </div>\n        <div class=\"cc-conversations__badge\">\n          <!-- <cometchat-icon *ngIf=\"conversation?.getUnreadMentionInMessageCount()\" [ngStyle]=\"getUnreadMentionsIconStyle()\" [iconStyle]=getMentionIconStyle() [URL]=\"mentionsIconURL\"></cometchat-icon> -->\n          <cometchat-badge [count]=\"conversation?.unreadMessageCount\"\n            [badgeStyle]=\"badgeStyle\"></cometchat-badge>\n        </div>\n      </div>\n      <div class=\"cc-conversations__selection-view\"\n        *ngIf=\"selectionMode != selectionmodeEnum.none\">\n        <ng-container *ngTemplateOutlet=\"tailView\">\n        </ng-container>\n      </div>\n    </div>\n  </cometchat-list-item>\n  <ng-template #tailView>\n    <div *ngIf=\"selectionMode == selectionmodeEnum.single\">\n      <cometchat-radio-button\n        (cc-radio-button-changed)=\"onConversationSelected(conversation,$event)\"></cometchat-radio-button>\n    </div>\n    <div *ngIf=\"selectionMode == selectionmodeEnum.multiple\">\n      <cometchat-checkbox\n        (cc-checkbox-changed)=\"onConversationSelected(conversation,$event)\"></cometchat-checkbox>\n    </div>\n  </ng-template>\n</ng-template>\n", styles: [".cc-conversations{height:100%;width:100%;box-sizing:border-box;margin-bottom:16px;position:relative}.cc-conversations__selection-view{position:relative}.tail__view{display:flex;flex-direction:column;justify-content:flex-start;align-items:center}.cc-subtitle__text{text-overflow:ellipsis;overflow:hidden;white-space:nowrap}.cc-conversations__menus{position:absolute;right:12px;padding:4px;cursor:pointer}.cc-menus__icon{height:24px;width:24px}.cc-conversations__subtitle-view{display:flex;align-items:center;width:90%;flex-direction:column;justify-content:flex-start}.cc-conversations__subtitle{display:flex;justify-content:flex-start;width:100%;align-items:center;min-height:22px}.cc-conversations__threadview{height:12px;display:flex;justify-content:flex-start;width:100%;align-items:center}.cc-conversations__badge{display:flex;align-items:flex-end;justify-content:flex-end;width:100%;padding-right:8px}cometchat-list-item{padding:0 8px}\n"] }]
@@ -7526,6 +7526,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImpo
                 type: Input
             }], disableReceipt: [{
                 type: Input
+            }], hideReceipt: [{
+                type: Input
             }], disableTyping: [{
                 type: Input
             }], deliveredIcon: [{
@@ -8249,8 +8251,6 @@ class CometChatMessageInformationComponent {
     ngOnDestroy() {
         this.onMessagesDelivered.unsubscribe();
         this.onMessagesRead.unsubscribe();
-        this.onMessagesReadByAll.unsubscribe();
-        this.onMessagesDeliveredToAll.unsubscribe();
     }
     addMessageEventListeners() {
         try {
@@ -8402,7 +8402,13 @@ class CometChatMessageListComponent {
         this.errorStateText = localize("SOMETHING_WRONG");
         this.emptyStateText = localize("NO_MESSAGES_FOUND");
         this.loadingIconURL = "assets/Spinner.svg";
+        /**
+         * @deprecated
+         *
+         * This property is deprecated as of version 4.3.16 due to newer property 'hideReceipt'. It will be removed in subsequent versions.
+         */
         this.disableReceipt = false;
+        this.hideReceipt = false;
         this.disableSoundForMessages = false;
         this.customSoundForMessages = "";
         this.readIcon = "assets/message-read.svg";
@@ -9053,15 +9059,7 @@ class CometChatMessageListComponent {
         this.fetchPreviousMessages = () => {
             if (this.reinitialized) {
                 if (this.messagesRequestBuilder) {
-                    this.requestBuilder = this.user
-                        ? this.messagesRequestBuilder
-                            .setUID(this.user?.getUid())
-                            .setMessageId(this.messagesList[0].getId())
-                            .build()
-                        : this.messagesRequestBuilder
-                            .setGUID(this.group?.getGuid())
-                            .setMessageId(this.messagesList[0].getId())
-                            .build();
+                    this.requestBuilder = CometChatUIKitUtility.clone(this.messagesRequestBuilder);
                 }
                 else {
                     this.requestBuilder = new CometChat.MessagesRequestBuilder()
@@ -9071,10 +9069,10 @@ class CometChatMessageListComponent {
                         .setCategories(this.categories)
                         .hideReplies(true);
                     if (this.user) {
-                        this.requestBuilder.setUID(this.user?.getUid()).build();
+                        this.requestBuilder = this.requestBuilder.setUID(this.user?.getUid()).build();
                     }
                     else if (this.group) {
-                        this.requestBuilder.setGUID(this.group?.getGuid()).build();
+                        this.requestBuilder = this.requestBuilder.setGUID(this.group?.getGuid()).build();
                     }
                 }
             }
@@ -9395,7 +9393,9 @@ class CometChatMessageListComponent {
                     }
                 }
             }
-            this.playAudio();
+            if (!this.disableSoundForMessages) {
+                this.playAudio();
+            }
             //handling dom lag - increment count only for main message list
             if (message.hasOwnProperty("parentMessageId") === false &&
                 this.parentMessageId) {
@@ -9561,7 +9561,9 @@ class CometChatMessageListComponent {
                     }
                 }
             }
-            this.playAudio();
+            if (!this.disableSoundForMessages) {
+                this.playAudio();
+            }
             //handling dom lag - increment count only for main message list
             if (message.hasOwnProperty("parentMessageId") === false &&
                 !this.parentMessageId) {
@@ -11330,25 +11332,23 @@ class CometChatMessageListComponent {
         if (this.user || this.group) {
             if (this.user) {
                 this.requestBuilder = this.messagesRequestBuilder
-                    ? this.messagesRequestBuilder.setUID(this.user?.getUid()).build()
+                    ? CometChatUIKitUtility.clone(this.messagesRequestBuilder)
                     : new CometChat.MessagesRequestBuilder()
-                        .setUID(this.user.getUid())
                         .setLimit(this.limit)
                         .setTypes(this.types)
                         .setCategories(this.categories)
-                        .hideReplies(true)
-                        .build();
+                        .hideReplies(true);
+                this.requestBuilder = this.requestBuilder.setUID(this.user.getUid()).build();
             }
             else {
                 this.requestBuilder = this.messagesRequestBuilder
-                    ? this.messagesRequestBuilder.setGUID(this.group?.getGuid()).build()
+                    ? CometChatUIKitUtility.clone(this.messagesRequestBuilder)
                     : new CometChat.MessagesRequestBuilder()
-                        .setGUID(this.group.getGuid())
                         .setLimit(this.limit)
                         .setTypes(this.types)
                         .hideReplies(true)
-                        .setCategories(this.categories)
-                        .build();
+                        .setCategories(this.categories);
+                this.requestBuilder = this.requestBuilder.setGUID(this.group?.getGuid()).build();
             }
             this.computeUnreadCount();
             this.fetchPreviousMessages();
@@ -11529,22 +11529,24 @@ class CometChatMessageListComponent {
                 });
             this.onMessagesDelivered =
                 CometChatMessageEvents.onMessagesDelivered.subscribe((messageReceipt) => {
-                    if (messageReceipt.getReceiptType() == CometChatUIKitConstants.MessageReceiverType.user) {
+                    if (messageReceipt.getReceiverType() == CometChatUIKitConstants.MessageReceiverType.user) {
                         this.messageUpdate(CometChatUIKitConstants.messages.MESSAGE_DELIVERED, messageReceipt);
                     }
                 });
             this.onMessagesRead = CometChatMessageEvents.onMessagesRead.subscribe((messageReceipt) => {
-                if (messageReceipt.getReceiptType() == CometChatUIKitConstants.MessageReceiverType.user) {
+                if (messageReceipt.getReceiverType() == CometChatUIKitConstants.MessageReceiverType.user) {
                     this.messageUpdate(CometChatUIKitConstants.messages.MESSAGE_READ, messageReceipt);
                 }
             });
             this.onMessagesReadByAll = CometChatMessageEvents.onMessagesReadByAll.subscribe((messageReceipt) => {
                 if (messageReceipt.getReceiverType() == CometChatUIKitConstants.MessageReceiverType.group) {
+                    this.messageReadAndDelivered(messageReceipt, true);
                     this.messageUpdate(CometChatUIKitConstants.messages.MESSAGE_READ, messageReceipt);
                 }
             });
             this.onMessagesDeliveredToAll = CometChatMessageEvents.onMessagesDeliveredToAll.subscribe((messageReceipt) => {
                 if (messageReceipt.getReceiverType() == CometChatUIKitConstants.MessageReceiverType.group) {
+                    this.messageReadAndDelivered(messageReceipt, true);
                     this.messageUpdate(CometChatUIKitConstants.messages.MESSAGE_DELIVERED, messageReceipt);
                 }
             });
@@ -11609,6 +11611,7 @@ class CometChatMessageListComponent {
             switch (key) {
                 case CometChatUIKitConstants.messages.TEXT_MESSAGE_RECEIVED:
                 case CometChatUIKitConstants.messages.MEDIA_MESSAGE_RECEIVED:
+                    this.markMessageAsDelivered(message);
                     if (this.isPartOfCurrentChatForSDKEvent(message)) {
                         this.messageReceived(message);
                     }
@@ -11702,7 +11705,6 @@ class CometChatMessageListComponent {
      * @param  {CometChat.BaseMessage} message
      */
     messageReceived(message) {
-        this.markMessageAsDelivered(message);
         try {
             if (message.getReceiverId() === this.group?.getGuid() ||
                 (message?.getSender().getUid() === this.user?.getUid() &&
@@ -11803,9 +11805,19 @@ class CometChatMessageListComponent {
         let receipt = MessageReceiptUtils.getReceiptStatus(message);
         return receipt;
     }
-    messageReadAndDelivered(message) {
+    messageReadAndDelivered(message, isGroupReceipt = false) {
         try {
-            if (message.getSender().getUid() == this.loggedInUser?.getUid()) {
+            if (isGroupReceipt) {
+                let messageKey = this.messagesList.findIndex((m) => m.getId() == Number(message.getMessageId()));
+                if (messageKey > -1) {
+                    this.messagesList[messageKey].setDeliveredAt(message.getDeliveredAt());
+                    this.ref.detectChanges();
+                }
+                console.log(message.getReceiptType());
+                message.getReceiptType() == message.RECEIPT_TYPE.DELIVERED_TO_ALL_RECEIPT && this.markAllMessagAsDelivered(messageKey);
+                message.getReceiptType() == message.RECEIPT_TYPE.READ_BY_ALL_RECEIPT && this.markAllMessagAsRead(messageKey);
+            }
+            else if (message.getSender().getUid() !== this.loggedInUser?.getUid()) {
                 if (message.getReceiptType() == CometChatUIKitConstants.messages.DELIVERY) {
                     //search for message
                     let messageKey = this.messagesList.findIndex((m) => m.getId() == Number(message.getMessageId()));
@@ -12183,7 +12195,9 @@ class CometChatMessageListComponent {
                     case MessageStatus.inprogress: {
                         if (this.isPartOfCurrentChatForUIEvent(message)) {
                             this.addMessage(message);
-                            this.playAudio();
+                            if (!this.disableSoundForMessages) {
+                                this.playAudio();
+                            }
                         }
                         break;
                     }
@@ -12248,6 +12262,13 @@ class CometChatMessageListComponent {
             return false;
         }
     }
+    shouldShowMessage(message, disableReceipt, hideReceipt) {
+        return (!message.getDeletedAt() &&
+            !(disableReceipt || hideReceipt) &&
+            (!message.getSender() || this.loggedInUser.getUid() === message.getSender()?.getUid()) &&
+            message.getCategory() !== this.MessageCategory.action &&
+            message.getCategory() !== this.MessageCategory.call);
+    }
     fetchConversationStarter() {
         this.showConversationStarter = true;
         this.conversationStarterState = States.loading;
@@ -12489,10 +12510,10 @@ class CometChatMessageListComponent {
     }
 }
 CometChatMessageListComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: CometChatMessageListComponent, deps: [{ token: i0.NgZone }, { token: i0.ChangeDetectorRef }, { token: CometChatThemeService }], target: i0.ɵɵFactoryTarget.Component });
-CometChatMessageListComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: CometChatMessageListComponent, selector: "cometchat-message-list", inputs: { hideError: "hideError", hideDateSeparator: "hideDateSeparator", errorStateView: "errorStateView", loadingStateView: "loadingStateView", emptyStateView: "emptyStateView", errorStateText: "errorStateText", emptyStateText: "emptyStateText", loadingIconURL: "loadingIconURL", user: "user", group: "group", disableReceipt: "disableReceipt", disableSoundForMessages: "disableSoundForMessages", customSoundForMessages: "customSoundForMessages", readIcon: "readIcon", deliveredIcon: "deliveredIcon", sentIcon: "sentIcon", waitIcon: "waitIcon", errorIcon: "errorIcon", aiErrorIcon: "aiErrorIcon", aiEmptyIcon: "aiEmptyIcon", alignment: "alignment", showAvatar: "showAvatar", datePattern: "datePattern", timestampAlignment: "timestampAlignment", DateSeparatorPattern: "DateSeparatorPattern", templates: "templates", messagesRequestBuilder: "messagesRequestBuilder", newMessageIndicatorText: "newMessageIndicatorText", scrollToBottomOnNewMessages: "scrollToBottomOnNewMessages", thresholdValue: "thresholdValue", unreadMessageThreshold: "unreadMessageThreshold", reactionsConfiguration: "reactionsConfiguration", disableReactions: "disableReactions", emojiKeyboardStyle: "emojiKeyboardStyle", apiConfiguration: "apiConfiguration", onThreadRepliesClick: "onThreadRepliesClick", headerView: "headerView", footerView: "footerView", parentMessageId: "parentMessageId", threadIndicatorIcon: "threadIndicatorIcon", avatarStyle: "avatarStyle", backdropStyle: "backdropStyle", dateSeparatorStyle: "dateSeparatorStyle", messageListStyle: "messageListStyle", onError: "onError", messageInformationConfiguration: "messageInformationConfiguration", disableMentions: "disableMentions", textFormatters: "textFormatters" }, viewQueries: [{ propertyName: "listScroll", first: true, predicate: ["listScroll"], descendants: true }, { propertyName: "bottom", first: true, predicate: ["bottom"], descendants: true }, { propertyName: "top", first: true, predicate: ["top"], descendants: true }, { propertyName: "textBubble", first: true, predicate: ["textBubble"], descendants: true }, { propertyName: "threadMessageBubble", first: true, predicate: ["threadMessageBubble"], descendants: true }, { propertyName: "fileBubble", first: true, predicate: ["fileBubble"], descendants: true }, { propertyName: "audioBubble", first: true, predicate: ["audioBubble"], descendants: true }, { propertyName: "videoBubble", first: true, predicate: ["videoBubble"], descendants: true }, { propertyName: "imageBubble", first: true, predicate: ["imageBubble"], descendants: true }, { propertyName: "formBubble", first: true, predicate: ["formBubble"], descendants: true }, { propertyName: "cardBubble", first: true, predicate: ["cardBubble"], descendants: true }, { propertyName: "stickerBubble", first: true, predicate: ["stickerBubble"], descendants: true }, { propertyName: "documentBubble", first: true, predicate: ["documentBubble"], descendants: true }, { propertyName: "whiteboardBubble", first: true, predicate: ["whiteboardBubble"], descendants: true }, { propertyName: "popoverRef", first: true, predicate: ["popoverRef"], descendants: true }, { propertyName: "directCalling", first: true, predicate: ["directCalling"], descendants: true }, { propertyName: "schedulerBubble", first: true, predicate: ["schedulerBubble"], descendants: true }, { propertyName: "pollBubble", first: true, predicate: ["pollBubble"], descendants: true }, { propertyName: "messageBubbleRef", predicate: ["messageBubbleRef"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div class=\"cc-message-list__wrapper\" [ngStyle]=\"wrapperStyle()\"\n  *ngIf=\"!openContactsView\">\n\n  <div class=\"cc-message-list__header-view\">\n    <div *ngIf=\"headerView\">\n      <ng-container *ngTemplateOutlet=\"headerView\">\n      </ng-container>\n    </div>\n  </div>\n  <div class=\"cc-message-list\" #listScroll\n    [ngStyle]=\"{height: showSmartReply || showConversationStarter || showConversationSummary ? '92%' : '100%'}\">\n    <div class=\"cc-message-list__top\" #top>\n    </div>\n    <div class=\"cc-message-list__decorator-message\"\n      *ngIf=\"state == states.loading || state == states.error  || state == states.empty \"\n      [ngStyle]=\"messageContainerStyle()\">\n      <div class=\"cc-message-list__loading-view\"\n        *ngIf=\"state == states.loading \">\n        <cometchat-loader [iconURL]=\"loadingIconURL\"\n          [loaderStyle]=\"loadingStyle\">\n        </cometchat-loader>\n        <span class=\"cc-message-list__customview--loading\"\n          *ngIf=\"state == states.loading  && loadingStateView\">\n          <ng-container *ngTemplateOutlet=\"loadingStateView\">\n          </ng-container>\n        </span>\n      </div>\n      <div class=\"cc-message-list__error-view\"\n        *ngIf=\"state == states.error  && !hideError \">\n        <cometchat-label [labelStyle]=\"errorStyle()\"\n          *ngIf=\"state == states.error && !errorStateView\"\n          [text]=\"errorStateText\">\n        </cometchat-label>\n        <span class=\"cc-message-list__custom-view--error\"\n          *ngIf=\"state == states.error  && errorStateView\">\n          <ng-container *ngTemplateOutlet=\"errorStateView\">\n          </ng-container>\n        </span>\n      </div>\n      <div class=\"cc-message-list__empty-view\" *ngIf=\"state == states.empty\">\n        <span class=\"cc-message-list__custom-view--empty\"\n          *ngIf=\"state == states.empty && emptyStateView\">\n          <ng-container *ngTemplateOutlet=\"emptyStateView\">\n          </ng-container>\n        </span>\n      </div>\n    </div>\n    <div class=\"cc-message-list__bubble\"\n      *ngFor=\"let message of messagesList; let i = index\">\n      <div class=\"cc-message-list__date-container\"\n        *ngIf=\"(i === 0) && message?.getSentAt() && !hideDateSeparator\">\n        <span class=\"cc-message-list__date\">\n          <cometchat-date [timestamp]=\"message!.getSentAt()\"\n            [pattern]=\"DateSeparatorPattern\" [dateStyle]=\"dateSeparatorStyle\">\n          </cometchat-date>\n        </span>\n      </div>\n      <div class=\"cc-message-list__date-container\"\n        *ngIf=\"(i > 0 && isDateDifferent(messagesList[i - 1]?.getSentAt(), messagesList[i]?.getSentAt())) && message?.getSentAt() && !hideDateSeparator\">\n        <span class=\"cc-message-list__date\">\n          <cometchat-date [timestamp]=\"message?.getSentAt()\"\n            [pattern]=\"DateSeparatorPattern\" [dateStyle]=\"dateSeparatorStyle\">\n          </cometchat-date>\n        </span>\n      </div>\n      <div *ngIf=\"getBubbleWrapper(message)\">\n        <ng-container\n          *ngTemplateOutlet=\"getBubbleWrapper(message);context:{ $implicit: message }\">\n        </ng-container>\n      </div>\n      <div *ngIf=\"!getBubbleWrapper(message)\" #messageBubbleRef\n        [id]=\"message?.getId()\">\n        <cometchat-message-bubble\n          [leadingView]=\" showAvatar ? leadingView : null\"\n          [bottomView]=\"getBottomView(message)\"\n          [statusInfoView]=\"showStatusInfo(message) ?  statusInfoView : null\"\n          [headerView]=\"getHeaderView(message) || message?.getCategory() != MessageCategory.action && showHeaderTitle(message) ? bubbleHeader : null\"\n          [footerView]=\"getFooterView(message) || reactionView\"\n          [contentView]=\"contentView\" [threadView]=\"threadView\"\n          [id]=\"message?.getId() || message?.getMuid()\"\n          [options]=\"setMessageOptions(message)\"\n          [messageBubbleStyle]=\"setMessageBubbleStyle(message)\"\n          [alignment]=\"setBubbleAlignment(message)\">\n          <ng-template #contentView>\n            <ng-container\n              *ngTemplateOutlet=\"getContentView(message);context:{ $implicit: message }\">\n            </ng-container>\n          </ng-template>\n          <ng-template #reactionView>\n            <cometchat-reactions\n              *ngIf=\"message.getReactions() && message.getReactions().length > 0 && !disableReactions\"\n              [messageObject]=\"getClonedReactionObject(message)\"\n              [alignment]=\"setBubbleAlignment(message)\"\n              [reactionsStyle]=\"getReactionsStyle()\"\n              [reactionClick]=\"addReactionOnClick\"\n              [reactionListConfiguration]=\"getReactionListConfiguration()\"\n              [reactionInfoConfiguration]=\"getReactionInfoConfiguration()\"></cometchat-reactions>\n          </ng-template>\n          <ng-template #statusInfoView>\n            <div class=\"cc-message-list__bubble-status-info\"\n              [ngStyle]=\"getStatusInfoStyle(message)\">\n              <div *ngIf=\"getStatusInfoView(message);else bubbleFooter\">\n                <ng-container\n                  *ngTemplateOutlet=\"getStatusInfoView(message);context:{ $implicit: message }\">\n                </ng-container>\n              </div>\n              <ng-template #bubbleFooter>\n                <div class=\"cc-message-list__bubble-date\"\n                  *ngIf=\"timestampAlignment == timestampEnum.bottom && message?.getCategory() != MessageCategory.action && !message.getDeletedAt() && message?.getCategory() != MessageCategory.call && message?.getSentAt()\">\n                  <cometchat-date [timestamp]=\"message?.getSentAt()\"\n                    [dateStyle]=\"getBubbleDateStyle(message)\"\n                    [pattern]=\"datePattern\">\n                  </cometchat-date>\n                </div>\n                <div\n                  *ngIf=\" !message?.getDeletedAt() &&  !disableReceipt && (!message?.getSender() || this.loggedInUser.getUid() == message?.getSender()?.getUid()) && message?.getCategory() != MessageCategory.action && message?.getCategory() != MessageCategory.call\"\n                  class=\"cc-message-list__receipt\">\n                  <cometchat-receipt [receipt]=\"getMessageReceipt(message)\"\n                    [receiptStyle]=\"getReceiptStyle(message)\"\n                    [waitIcon]=\"waitIcon\" [sentIcon]=\"sentIcon\"\n                    [deliveredIcon]=\"deliveredIcon\" [readIcon]=\"readIcon\"\n                    [errorIcon]=\"errorIcon\"></cometchat-receipt>\n                </div>\n              </ng-template>\n            </div>\n          </ng-template>\n          <ng-template #leadingView>\n            <div\n              *ngIf=\" message?.getCategory() != MessageCategory.action  && showHeaderTitle(message)\">\n              <cometchat-avatar [name]=\"message?.getSender()?.getName()\"\n                [avatarStyle]=\"avatarStyle\"\n                [image]=\"message?.getSender()?.getAvatar()\">\n              </cometchat-avatar>\n            </div>\n          </ng-template>\n          <ng-template #bubbleHeader>\n            <div *ngIf=\"getHeaderView(message);else defaultHeader\">\n              <ng-container\n                *ngTemplateOutlet=\"getHeaderView(message);context:{ $implicit: message }\">\n              </ng-container>\n            </div>\n            <ng-template #defaultHeader>\n              <div class=\"cc-message-list__bubble-header\"\n                *ngIf=\"message?.getCategory() != MessageCategory.action && showHeaderTitle(message) && message?.getCategory() != MessageCategory.call\">\n                <cometchat-label [text]=\"message?.getSender()?.getName()\"\n                  [labelStyle]=\"labelStyle\"></cometchat-label>\n                <cometchat-date [pattern]=\"datePattern\"\n                  [timestamp]=\"message?.getSentAt()\"\n                  [dateStyle]=\"getBubbleDateStyle(message)\"\n                  *ngIf=\"timestampAlignment == timestampEnum.top && message?.getSentAt()\"></cometchat-date>\n              </div>\n            </ng-template>\n          </ng-template>\n          <ng-template #threadView>\n            <div class=\"cc-message-list__threadreplies\"\n              *ngIf=\"message?.getReplyCount() && !message.getDeletedAt()\"\n              [ngStyle]=\"getThreadViewAlignment(message)\">\n              <cometchat-icon-button [iconURL]=\"threadIndicatorIcon\"\n                [mirrorIcon]=\"getThreadIconAlignment(message)\"\n                [buttonStyle]=\"getThreadViewStyle(message)\"\n                (cc-button-clicked)=\"openThreadView(message)\"\n                [text]='getThreadCount(message)'>\n                <!-- <span slot=\"buttonView\" [ngStyle]=\"getUnreadRepliesCountStyle()\"\n                  class=\"cc-message-list__unread-thread\"\n                  *ngIf=\"!message.getDeletedAt() && message.getUnreadReplyCount() > 0\">\n                  {{message.getUnreadReplyCount()}}\n                </span> -->\n\n              </cometchat-icon-button>\n            </div>\n          </ng-template>\n        </cometchat-message-bubble>\n      </div>\n    </div>\n    <div class=\"cc-message-list__bottom\" #bottom>\n    </div>\n\n  </div>\n  <div class=\"cc-message-list__message-indicator\"\n    *ngIf=\"UnreadCount && UnreadCount.length > 0 && !isOnBottom\"\n    [ngStyle]=\"{bottom: showSmartReply || footerView || showConversationStarter || showConversationSummary  ? '20%' : '13%'}\">\n    <cometchat-button [text]=\"newMessageCount\"\n      [buttonStyle]=\"unreadMessagesStyle\"\n      (cc-button-clicked)=\"scrollToBottom()\"></cometchat-button>\n  </div>\n  <div class=\"cc-message-list__footer-view\" [ngStyle]=\"{height:  'auto'}\">\n\n    <div *ngIf=\"footerView;else footer\">\n      <ng-container *ngTemplateOutlet=\"footerView\">\n      </ng-container>\n    </div>\n    <ng-template #footer>\n\n      <div class=\"cc-message-list__smart-replies\"\n        *ngIf=\"!showConversationStarter && showSmartReply && getReplies()\">\n        <smart-replies [smartReplyStyle]=\"smartReplyStyle\"\n          [replies]=\"getReplies()\" (cc-reply-clicked)=\"sendReply($event)\"\n          (cc-close-clicked)=\"closeSmartReply()\">\n        </smart-replies>\n      </div>\n\n\n      <div class=\"cc-message-list__conversation-starters\"\n        *ngIf=\"enableConversationStarter && showConversationStarter\">\n        <cometchat-ai-card [state]=\"conversationStarterState\"\n          [loadingStateText]=\"starterLoadingStateText\"\n          [emptyStateText]=\"starterEmptyStateText\"\n          [errorStateText]=\"errorStateText\">\n          <smart-replies\n            *ngIf=\"conversationStarterState == states.loaded && !parentMessageId\"\n            [smartReplyStyle]=\"conversationStarterStyle\"\n            [replies]=\"conversationStarterReplies\" slot=\"loadedView\"\n            (cc-reply-clicked)=\"sendConversationStarter($event)\"\n            [closeIconURL]=\"''\">\n          </smart-replies>\n        </cometchat-ai-card>\n      </div>\n\n      <div class=\"cc-message-list__conversation-summary\"\n        *ngIf=\"enableConversationSummary && showConversationSummary\">\n\n        <cometchat-ai-card [state]=\"conversationSummaryState\"\n          [loadingStateText]=\"summaryLoadingStateText\"\n          [emptyStateText]=\"summaryEmptyStateText\"\n          [errorStateText]=\"errorStateText\" [errorIconURL]=\"aiErrorIcon\"\n          [emptyIconURL]=\"aiEmptyIcon\">\n          <cometchat-panel\n            *ngIf=\"conversationSummaryState == states.loaded && !parentMessageId\"\n            slot=\"loadedView\" [panelStyle]=\"conversationSummaryStyle\"\n            title=\"Conversation Summary\" [text]=\"conversationSummary\"\n            (cc-close-clicked)=\"closeConversationSummary()\">\n          </cometchat-panel>\n        </cometchat-ai-card>\n\n      </div>\n\n    </ng-template>\n  </div>\n\n</div>\n<!-- default bubbles -->\n<ng-template #textBubble let-message>\n  <cometchat-text-bubble\n    *ngIf=\"message?.type == MessageTypesConstant.groupMember\"\n    [textStyle]=\"setTextBubbleStyle(message)\"\n    [text]=\"message?.message\"></cometchat-text-bubble>\n  <cometchat-text-bubble *ngIf=\"message?.getDeletedAt()\"\n    [textStyle]=\"setTextBubbleStyle(message)\"\n    [text]=\"localize('MESSAGE_IS_DELETED')\"></cometchat-text-bubble>\n  <cometchat-text-bubble\n    *ngIf=\"!isTranslated(message) && !getLinkPreview(message) && !message?.deletedAt && message?.type != MessageTypesConstant.groupMember\"\n    [textStyle]=\"setTextBubbleStyle(message)\" [text]=\"getTextMessage(message)\"\n    [textFormatters]=\"getTextFormatters(message)\"></cometchat-text-bubble>\n  <link-preview [linkPreviewStyle]=\"linkPreviewStyle\"\n    (cc-link-clicked)=\"openLinkURL($event)\"\n    *ngIf=\"!message?.getDeletedAt() && getLinkPreview(message) && enableLinkPreview\"\n    [title]=\"getLinkPreviewDetails('title',message)\"\n    [description]=\"getLinkPreviewDetails('description',message)\"\n    [URL]=\"getLinkPreviewDetails('url',message)\"\n    [image]=\"getLinkPreviewDetails('image',message)\"\n    [favIconURL]=\"getLinkPreviewDetails('favicon',message)\">\n    <cometchat-text-bubble\n      *ngIf=\"!isTranslated(message) && getLinkPreview(message) && !message?.deletedAt && message?.type != MessageTypesConstant.groupMember\"\n      [textStyle]=\"setTextBubbleStyle(message)\" [text]=\"getTextMessage(message)\"\n      [textFormatters]=\"getTextFormatters(message)\"></cometchat-text-bubble>\n  </link-preview>\n  <message-translation-bubble [alignment]=\"getBubbleAlignment(message)\"\n    *ngIf=\"isTranslated(message)\"\n    [messageTranslationStyle]=\"setTranslationStyle(message)\"\n    [translatedText]=\"isTranslated(message)\"\n    [textFormatters]=\"getTextFormatters(message)\">\n    <cometchat-text-bubble\n      *ngIf=\" !message?.deletedAt && message?.type != MessageTypesConstant.groupMember\"\n      [textStyle]=\"setTextBubbleStyle(message)\" [text]=\"message?.text\"\n      [textFormatters]=\"getTextFormatters(message)\"></cometchat-text-bubble>\n\n  </message-translation-bubble>\n</ng-template>\n<ng-template #fileBubble let-message>\n\n  <cometchat-file-bubble [fileStyle]=\"setFileBubbleStyle(message)\"\n    [downloadIconURL]=\"downloadIconURL\" [subtitle]=\"localize('SHARED_FILE')\"\n    [title]=\"message?.data?.attachments ? message?.data?.attachments[0]?.name: ''\"\n    [fileURL]=\"message?.data?.attachments ? message?.data?.attachments[0]?.url : ''\"></cometchat-file-bubble>\n</ng-template>\n<ng-template #audioBubble let-message>\n  <cometchat-icon-button [disabled]=\"true\"\n    *ngIf=\"message?.category == callConstant && message?.type == MessageTypesConstant.audio\"\n    [iconURL]=\"getCallTypeIcon(message)\"\n    [buttonStyle]=\"callStatusStyle(message)\"\n    [text]=\"getCallActionMessage(message)\"></cometchat-icon-button>\n  <cometchat-audio-bubble\n    *ngIf=\"!message.getDeletedAt() && message?.category != callConstant\"\n    [src]=\"message?.data?.attachments ? message?.data?.attachments[0]?.url : ''\">\n  </cometchat-audio-bubble>\n</ng-template>\n<ng-template #videoBubble let-message>\n  <cometchat-icon-button [disabled]=\"true\"\n    *ngIf=\"message?.category == callConstant && message?.type == MessageTypesConstant.video\"\n    [iconURL]=\"getCallTypeIcon(message)\"\n    [buttonStyle]=\"callStatusStyle(message)\"\n    [text]=\"getCallActionMessage(message)\"></cometchat-icon-button>\n\n  <cometchat-video-bubble\n    *ngIf=\"!message.getDeletedAt() && message?.category != callConstant\"\n    [videoStyle]=\"videoBubbleStyle\"\n    [src]=\"message?.data?.attachments ? message?.data?.attachments[0]?.url : ''\"\n    [poster]=\" getImageThumbnail(message)\"></cometchat-video-bubble>\n</ng-template>\n<ng-template #imageBubble let-message>\n  <image-moderation (cc-show-dialog)=\"openWarningDialog($event)\"\n    *ngIf=\"!message.getDeletedAt() && enableImageModeration\" [message]=\"message\"\n    [imageModerationStyle]=\"imageModerationStyle\">\n    <cometchat-image-bubble (cc-image-clicked)=\"openImageInFullScreen(message)\"\n      [imageStyle]=\"imageBubbleStyle\" [src]=\" getImageThumbnail(message)\"\n      [placeholderImage]=\"placeholderIconURL\"></cometchat-image-bubble>\n  </image-moderation>\n  <cometchat-image-bubble [imageStyle]=\"imageBubbleStyle\"\n    (cc-image-clicked)=\"openImageInFullScreen(message)\"\n    *ngIf=\"!message.getDeletedAt() && !enableImageModeration\"\n    [src]=\" getImageThumbnail(message)\"\n    [placeholderImage]=\"placeholderIconURL\"></cometchat-image-bubble>\n</ng-template>\n<ng-template #formBubble let-message>\n  <cometchat-form-bubble [message]=\"message\"\n    [formBubbleStyle]=\"getFormMessageBubbleStyle()\"></cometchat-form-bubble>\n</ng-template>\n<ng-template #cardBubble let-message>\n  <cometchat-card-bubble [message]=\"message\"\n    [cardBubbleStyle]=\"getCardMessageBubbleStyle()\"></cometchat-card-bubble>\n</ng-template>\n<ng-template #customTextBubble>\n</ng-template>\n<ng-template #stickerBubble let-message>\n  <cometchat-image-bubble [src]=\"getSticker(message)\"\n    [imageStyle]=\"imageBubbleStyle\"></cometchat-image-bubble>\n\n</ng-template>\n<ng-template #whiteboardBubble let-message>\n  <cometchat-document-bubble [hideSeparator]=\"false\"\n    [iconAlignment]=\"documentBubbleAlignment\"\n    [documentStyle]=\"documentBubbleStyle\" [URL]=\"getWhiteboardDocument(message)\"\n    [ccClicked]=\"launchCollaborativeWhiteboardDocument\"\n    [iconURL]=\"whiteboardIconURL\" [title]=\"whiteboardTitle\"\n    [buttonText]=\"whiteboardButtonText\"\n    [subtitle]=\"whiteboardSubitle\"></cometchat-document-bubble>\n\n</ng-template>\n<ng-template #documentBubble let-message>\n  <cometchat-document-bubble [hideSeparator]=\"false\"\n    [iconAlignment]=\"documentBubbleAlignment\"\n    [documentStyle]=\"documentBubbleStyle\" [URL]=\"getWhiteboardDocument(message)\"\n    [ccClicked]=\"launchCollaborativeWhiteboardDocument\"\n    [iconURL]=\"documentIconURL\" [title]=\"documentTitle\"\n    [buttonText]=\"documentButtonText\"\n    [subtitle]=\"documentSubitle\"></cometchat-document-bubble>\n\n</ng-template>\n<ng-template #directCalling let-message>\n  <cometchat-document-bubble [hideSeparator]=\"true\"\n    [iconAlignment]=\"callBubbleAlignment\"\n    [documentStyle]=\"getCallBubbleStyle(message)\" [URL]=\"getSessionId(message)\"\n    [ccClicked]=\"getStartCallFunction(message)\" [iconURL]=\"directCallIconURL\"\n    [title]=\"getCallBubbleTitle(message)\" [buttonText]=\"joinCallButtonText\"\n    *ngIf=\"message.category == 'custom'\"></cometchat-document-bubble>\n\n</ng-template>\n<ng-template #schedulerBubble let-message>\n  <cometchat-scheduler-bubble [schedulerMessage]=\"message\"\n    [loggedInUser]=\"loggedInUser\"\n    [schedulerBubbleStyle]=\"getSchedulerBubbleStyle(message)\"></cometchat-scheduler-bubble>\n\n</ng-template>\n<ng-template #pollBubble let-message>\n  <polls-bubble [pollStyle]=\"pollBubbleStyle\"\n    [pollQuestion]=\"getPollBubbleData(message,'question')\"\n    [pollId]=\"getPollBubbleData(message,'id')\" [loggedInUser]=\"loggedInUser\"\n    [senderUid]=\"getPollBubbleData(message)\"\n    [metadata]=\"message?.metadata\"></polls-bubble>\n\n</ng-template>\n\n<!-- thread bubble view -->\n<ng-template #threadMessageBubble let-message>\n  <div *ngIf=\"getBubbleWrapper(message)\">\n    <ng-container\n      *ngTemplateOutlet=\"getBubbleWrapper(message);context:{ $implicit: message }\">\n    </ng-container>\n  </div>\n  <cometchat-message-bubble *ngIf=\"!getBubbleWrapper(message)\"\n    [bottomView]=\"getBottomView(message)\"\n    [statusInfoView]=\"showStatusInfo(message) ?  statusInfoView : null\"\n    [leadingView]=\" showAvatar ? leadingView : null\" [headerView]=\"bubbleHeader\"\n    [footerView]=\"getFooterView(message)\" [contentView]=\"contentView\"\n    [id]=\"message?.getId() || message?.getMuid()\"\n    [messageBubbleStyle]=\"setMessageBubbleStyle(message)\"\n    [alignment]=\"threadedAlignment\">\n    <ng-template #contentView>\n      <ng-container\n        *ngTemplateOutlet=\"getContentView(message);context:{ $implicit: message }\">\n      </ng-container>\n    </ng-template>\n    <ng-template #statusInfoView>\n      <div class=\"cc-message-list__bubble-status-info\"\n        [ngStyle]=\"getStatusInfoStyle(message)\">\n        <div *ngIf=\"getStatusInfoView(message);else bubbleFooter\">\n          <ng-container\n            *ngTemplateOutlet=\"getStatusInfoView(message);context:{ $implicit: message }\">\n          </ng-container>\n        </div>\n        <ng-template #bubbleFooter>\n          <div class=\"cc-message-list__bubble-date\"\n            *ngIf=\"timestampAlignment == timestampEnum.bottom && message?.getCategory() != MessageCategory.action && message?.getCategory() != MessageCategory.call && message?.getSentAt()\">\n            <cometchat-date [timestamp]=\"message?.getSentAt()\"\n              [dateStyle]=\"getBubbleDateStyle(message)\" [pattern]=\"datePattern\">\n            </cometchat-date>\n          </div>\n          <div\n            *ngIf=\" !message?.getDeletedAt() &&  !disableReceipt && (!message?.getSender() || this.loggedInUser.getUid() == message?.getSender()?.getUid()) && message?.getCategory() != MessageCategory.action && message?.getCategory() != MessageCategory.call\"\n            class=\"cc-message-list__receipt\">\n            <cometchat-receipt [receipt]=\"getMessageReceipt(message)\"\n              [receiptStyle]=\"getReceiptStyle(message)\" [waitIcon]=\"waitIcon\"\n              [sentIcon]=\"sentIcon\" [deliveredIcon]=\"\"\n              [readIcon]=\"deliveredIcon\"\n              [errorIcon]=\"errorIcon\"></cometchat-receipt>\n          </div>\n        </ng-template>\n      </div>\n    </ng-template>\n    <ng-template #leadingView>\n      <div\n        *ngIf=\" message?.getCategory() != MessageCategory.action && showHeaderTitle(message)\">\n        <cometchat-avatar [name]=\"message?.getSender()?.getName()\"\n          [avatarStyle]=\"avatarStyle\"\n          [image]=\"message?.getSender()?.getAvatar()\">\n        </cometchat-avatar>\n      </div>\n    </ng-template>\n    <ng-template #bubbleHeader>\n      <div *ngIf=\"getHeaderView(message);else defaultHeader\">\n        <ng-container\n          *ngTemplateOutlet=\"getHeaderView(message);context:{ $implicit: message }\">\n        </ng-container>\n      </div>\n      <ng-template #defaultHeader>\n        <div class=\"cc-message-list__bubble-header\"\n          *ngIf=\"message?.getCategory() != MessageCategory.action && showHeaderTitle(message) && message?.getCategory() != MessageCategory.call\">\n          <cometchat-label [text]=\"message?.getSender()?.getName()\"\n            [labelStyle]=\"labelStyle\"></cometchat-label>\n          <cometchat-date [pattern]=\"datePattern\"\n            [timestamp]=\"message?.getSentAt()\"\n            [dateStyle]=\"getBubbleDateStyle(message)\"\n            *ngIf=\"timestampAlignment == timestampEnum.top && message?.getSentAt()\"></cometchat-date>\n        </div>\n      </ng-template>\n    </ng-template>\n  </cometchat-message-bubble>\n\n</ng-template>\n\n\n<!--  -->\n<cometchat-popover [popoverStyle]=\"popoverStyle\" #popoverRef\n  [placement]=\"keyboardAlignment\">\n  <cometchat-emoji-keyboard (cc-emoji-clicked)=\"addReaction($event)\"\n    slot=\"content\"\n    [emojiKeyboardStyle]=\"emojiKeyboardStyle\"></cometchat-emoji-keyboard>\n</cometchat-popover>\n<cometchat-backdrop *ngIf=\"openConfirmDialog\" [backdropStyle]=\"backdropStyle\">\n  <cometchat-confirm-dialog [title]=\"''\" [messageText]=\"warningText\"\n    (cc-confirm-clicked)=\"onConfirmClick()\" [cancelButtonText]=\"cancelText\"\n    [confirmButtonText]=\"confirmText\" (cc-cancel-clicked)=\"onCancelClick()\"\n    [confirmDialogStyle]=\"confirmDialogStyle\">\n\n  </cometchat-confirm-dialog>\n</cometchat-backdrop>\n<cometchat-full-screen-viewer (cc-close-clicked)=\"closeImageInFullScreen()\"\n  *ngIf=\"openFullscreenView\" [URL]=\"imageurlToOpen\"\n  [closeIconURL]=\"closeIconURL\" [fullScreenViewerStyle]=\"fullScreenViewerStyle\">\n\n</cometchat-full-screen-viewer>\n\n<!-- ongoing callscreen for direct call -->\n<cometchat-ongoing-call *ngIf=\"showOngoingCall\"\n  [callSettingsBuilder]=\"getCallBuilder()\" [ongoingCallStyle]=\"ongoingCallStyle\"\n  [sessionID]=\"sessionId\"></cometchat-ongoing-call>\n<!-- message information view -->\n<!-- thread bubble view -->\n<ng-template #messageinfoBubble let-message>\n  <div *ngIf=\"getBubbleWrapper(message)\">\n    <ng-container\n      *ngTemplateOutlet=\"getBubbleWrapper(message);context:{ $implicit: message }\">\n    </ng-container>\n  </div>\n  <cometchat-message-bubble *ngIf=\"!getBubbleWrapper(message)\"\n    [bottomView]=\"getBottomView(message)\"\n    [statusInfoView]=\"getStatusInfoView(message)\"\n    [footerView]=\"getFooterView(message)\"\n    [leadingView]=\"showAvatar ? leadingView : null\" [headerView]=\"bubbleHeader\"\n    [contentView]=\"contentView\" [id]=\"message?.getId() || message?.getMuid()\"\n    [messageBubbleStyle]=\"setMessageBubbleStyle(message)\"\n    [alignment]=\"messageInfoAlignment\">\n    <ng-template #contentView>\n      <ng-container\n        *ngTemplateOutlet=\"getContentView(message);context:{ $implicit: message }\">\n      </ng-container>\n    </ng-template>\n    <ng-template #leadingView>\n      <div\n        *ngIf=\" message?.getCategory() != MessageCategory.action && showHeaderTitle(message)\">\n        <cometchat-avatar [name]=\"message?.getSender()?.getName()\"\n          [avatarStyle]=\"avatarStyle\"\n          [image]=\"message?.getSender()?.getAvatar()\">\n        </cometchat-avatar>\n      </div>\n    </ng-template>\n    <ng-template #bubbleHeader>\n      <div *ngIf=\"getHeaderView(message);else defaultHeader\">\n        <ng-container\n          *ngTemplateOutlet=\"getHeaderView(message);context:{ $implicit: message }\">\n        </ng-container>\n      </div>\n      <ng-template #defaultHeader>\n        <div class=\"cc-message-list__bubble-header\"\n          *ngIf=\"message?.getCategory() != MessageCategory.action && showHeaderTitle(message) && message?.getCategory() != MessageCategory.call\">\n          <cometchat-label [text]=\"message?.getSender()?.getName()\"\n            [labelStyle]=\"labelStyle\"></cometchat-label>\n          <cometchat-date [pattern]=\"datePattern\"\n            [timestamp]=\"message?.getSentAt()\"\n            [dateStyle]=\"getBubbleDateStyle(message)\"\n            *ngIf=\"timestampAlignment == timestampEnum.top && message?.getSentAt()\"></cometchat-date>\n        </div>\n      </ng-template>\n    </ng-template>\n  </cometchat-message-bubble>\n\n</ng-template>\n<cometchat-backdrop *ngIf=\"openMessageInfoPage\" [backdropStyle]=\"backdropStyle\">\n  <cometchat-message-information\n    [closeIconURL]=\"messageInformationConfiguration.closeIconURL\"\n    [loadingStateView]=\"messageInformationConfiguration.loadingStateView\"\n    [errorStateView]=\"messageInformationConfiguration.errorStateView\"\n    [listItemStyle]=\"messageInformationConfiguration.listItemStyle\"\n    [emptyStateView]=\"messageInformationConfiguration.emptyStateView\"\n    [loadingIconURL]=\"messageInformationConfiguration.loadingIconURL\"\n    [readIcon]=\"messageInformationConfiguration.readIcon\"\n    [deliveredIcon]=\"messageInformationConfiguration.deliveredIcon\"\n    [onError]=\"messageInformationConfiguration.onError\"\n    [SubtitleView]=\"messageInformationConfiguration.subtitleView\"\n    [receiptDatePattern]=\"messageInformationConfiguration.receiptDatePattern\"\n    [listItemView]=\"messageInformationConfiguration.listItemView \"\n    [messageInformationStyle]=\"messageInformationConfiguration.messageInformationStyle\"\n    [onClose]=\"messageInformationConfiguration.onClose ??  closeMessageInfoPage\"\n    [bubbleView]=\"messageInformationConfiguration.bubbleView ?? messageinfoBubble\"\n    [message]=\"messageInfoObject\">\n\n  </cometchat-message-information>\n</cometchat-backdrop>\n", styles: [".cc-message-list{height:100%;width:100%;overflow-y:auto;overflow-x:hidden;position:relative}.cc-message-list__wrapper{height:100%;width:100%;display:flex;flex-direction:column;justify-content:space-between;overflow-y:hidden}.cc-message-list__bubble-status-info{display:flex;align-items:flex-end;width:100%;padding:0 8px 8px;box-sizing:border-box}cometchat-reactions{margin-top:-3px}.cc-message-list__unread-thread{margin-left:4px}.cc-message-list__date-container{text-align:center;margin:5px 0}.cc-message-list__smart-replies,.cc-message-list__conversation-starters{height:-moz-fit-content;height:fit-content;width:100%;position:absolute;bottom:0;z-index:1}.cc-message-list__conversation-summary{height:100%;position:relative;bottom:0;z-index:1;padding:.1px 14px}.cc-message-list__date{border-radius:10px;display:flex;justify-content:center}.cc-message-list__threadreplies{min-width:130px;width:100%;padding-top:4px;display:flex}.cc-message-list__message-indicator{height:25px;display:flex;align-items:center;justify-content:center;width:100%;bottom:10%;position:absolute}.cc-message-list__footer-view{z-index:1;position:relative;width:100%;box-sizing:border-box;margin-bottom:1px}.cc-message-list__decorator-message{margin:0;line-height:30px;word-wrap:break-word;padding:0 8px;width:100%;overflow:hidden;display:flex;align-items:center;justify-content:center;height:100%}.cc-message-list__footer__decorator-message{margin:0;line-height:30px;word-wrap:break-word;padding:0 8px 0 16px;width:100%;overflow:hidden;display:flex;align-items:center;justify-content:flex-start;height:100%}.cc-message-list::-webkit-scrollbar{background:transparent;width:8px}.cc-message-list::-webkit-scrollbar-thumb{background:#e8e5e5;border-radius:8px}.cc-message-list__footer-view-decorator{display:flex;flex-direction:row;column-gap:8px}.cc_panel_container{border:1px solid #6851d6}cometchat-scheduler-bubble{width:100%}.cc-message-list__bubble-reactions{width:100%;box-sizing:border-box}\n"], components: [{ type: CometChatMessageBubbleComponent, selector: "cometchat-message-bubble", inputs: ["messageBubbleStyle", "alignment", "options", "id", "leadingView", "headerView", "replyView", "contentView", "threadView", "footerView", "bottomView", "statusInfoView", "moreIconURL", "topMenuSize"] }, { type: CometChatOngoingCallComponent, selector: "cometchat-ongoing-call", inputs: ["ongoingCallStyle", "resizeIconHoverText", "sessionID", "minimizeIconURL", "maximizeIconURL", "callSettingsBuilder", "callWorkflow", "onError"] }, { type: CometChatMessageInformationComponent, selector: "cometchat-message-information", inputs: ["closeIconURL", "message", "title", "template", "bubbleView", "subtitleView", "listItemView", "receiptDatePattern", "onError", "messageInformationStyle", "readIcon", "deliveredIcon", "onClose", "listItemStyle", "emptyStateText", "errorStateText", "emptyStateView", "loadingIconURL", "loadingStateView", "errorStateView"] }], directives: [{ type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i3.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { type: i3.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+CometChatMessageListComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: CometChatMessageListComponent, selector: "cometchat-message-list", inputs: { hideError: "hideError", hideDateSeparator: "hideDateSeparator", errorStateView: "errorStateView", loadingStateView: "loadingStateView", emptyStateView: "emptyStateView", errorStateText: "errorStateText", emptyStateText: "emptyStateText", loadingIconURL: "loadingIconURL", user: "user", group: "group", disableReceipt: "disableReceipt", hideReceipt: "hideReceipt", disableSoundForMessages: "disableSoundForMessages", customSoundForMessages: "customSoundForMessages", readIcon: "readIcon", deliveredIcon: "deliveredIcon", sentIcon: "sentIcon", waitIcon: "waitIcon", errorIcon: "errorIcon", aiErrorIcon: "aiErrorIcon", aiEmptyIcon: "aiEmptyIcon", alignment: "alignment", showAvatar: "showAvatar", datePattern: "datePattern", timestampAlignment: "timestampAlignment", DateSeparatorPattern: "DateSeparatorPattern", templates: "templates", messagesRequestBuilder: "messagesRequestBuilder", newMessageIndicatorText: "newMessageIndicatorText", scrollToBottomOnNewMessages: "scrollToBottomOnNewMessages", thresholdValue: "thresholdValue", unreadMessageThreshold: "unreadMessageThreshold", reactionsConfiguration: "reactionsConfiguration", disableReactions: "disableReactions", emojiKeyboardStyle: "emojiKeyboardStyle", apiConfiguration: "apiConfiguration", onThreadRepliesClick: "onThreadRepliesClick", headerView: "headerView", footerView: "footerView", parentMessageId: "parentMessageId", threadIndicatorIcon: "threadIndicatorIcon", avatarStyle: "avatarStyle", backdropStyle: "backdropStyle", dateSeparatorStyle: "dateSeparatorStyle", messageListStyle: "messageListStyle", onError: "onError", messageInformationConfiguration: "messageInformationConfiguration", disableMentions: "disableMentions", textFormatters: "textFormatters" }, viewQueries: [{ propertyName: "listScroll", first: true, predicate: ["listScroll"], descendants: true }, { propertyName: "bottom", first: true, predicate: ["bottom"], descendants: true }, { propertyName: "top", first: true, predicate: ["top"], descendants: true }, { propertyName: "textBubble", first: true, predicate: ["textBubble"], descendants: true }, { propertyName: "threadMessageBubble", first: true, predicate: ["threadMessageBubble"], descendants: true }, { propertyName: "fileBubble", first: true, predicate: ["fileBubble"], descendants: true }, { propertyName: "audioBubble", first: true, predicate: ["audioBubble"], descendants: true }, { propertyName: "videoBubble", first: true, predicate: ["videoBubble"], descendants: true }, { propertyName: "imageBubble", first: true, predicate: ["imageBubble"], descendants: true }, { propertyName: "formBubble", first: true, predicate: ["formBubble"], descendants: true }, { propertyName: "cardBubble", first: true, predicate: ["cardBubble"], descendants: true }, { propertyName: "stickerBubble", first: true, predicate: ["stickerBubble"], descendants: true }, { propertyName: "documentBubble", first: true, predicate: ["documentBubble"], descendants: true }, { propertyName: "whiteboardBubble", first: true, predicate: ["whiteboardBubble"], descendants: true }, { propertyName: "popoverRef", first: true, predicate: ["popoverRef"], descendants: true }, { propertyName: "directCalling", first: true, predicate: ["directCalling"], descendants: true }, { propertyName: "schedulerBubble", first: true, predicate: ["schedulerBubble"], descendants: true }, { propertyName: "pollBubble", first: true, predicate: ["pollBubble"], descendants: true }, { propertyName: "messageBubbleRef", predicate: ["messageBubbleRef"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div class=\"cc-message-list__wrapper\" [ngStyle]=\"wrapperStyle()\"\n  *ngIf=\"!openContactsView\">\n\n  <div class=\"cc-message-list__header-view\">\n    <div *ngIf=\"headerView\">\n      <ng-container *ngTemplateOutlet=\"headerView\">\n      </ng-container>\n    </div>\n  </div>\n  <div class=\"cc-message-list\" #listScroll\n    [ngStyle]=\"{height: showSmartReply || showConversationStarter || showConversationSummary ? '92%' : '100%'}\">\n    <div class=\"cc-message-list__top\" #top>\n    </div>\n    <div class=\"cc-message-list__decorator-message\"\n      *ngIf=\"state == states.loading || state == states.error  || state == states.empty \"\n      [ngStyle]=\"messageContainerStyle()\">\n      <div class=\"cc-message-list__loading-view\"\n        *ngIf=\"state == states.loading \">\n        <cometchat-loader [iconURL]=\"loadingIconURL\"\n          [loaderStyle]=\"loadingStyle\">\n        </cometchat-loader>\n        <span class=\"cc-message-list__customview--loading\"\n          *ngIf=\"state == states.loading  && loadingStateView\">\n          <ng-container *ngTemplateOutlet=\"loadingStateView\">\n          </ng-container>\n        </span>\n      </div>\n      <div class=\"cc-message-list__error-view\"\n        *ngIf=\"state == states.error  && !hideError \">\n        <cometchat-label [labelStyle]=\"errorStyle()\"\n          *ngIf=\"state == states.error && !errorStateView\"\n          [text]=\"errorStateText\">\n        </cometchat-label>\n        <span class=\"cc-message-list__custom-view--error\"\n          *ngIf=\"state == states.error  && errorStateView\">\n          <ng-container *ngTemplateOutlet=\"errorStateView\">\n          </ng-container>\n        </span>\n      </div>\n      <div class=\"cc-message-list__empty-view\" *ngIf=\"state == states.empty\">\n        <span class=\"cc-message-list__custom-view--empty\"\n          *ngIf=\"state == states.empty && emptyStateView\">\n          <ng-container *ngTemplateOutlet=\"emptyStateView\">\n          </ng-container>\n        </span>\n      </div>\n    </div>\n    <div class=\"cc-message-list__bubble\"\n      *ngFor=\"let message of messagesList; let i = index\">\n      <div class=\"cc-message-list__date-container\"\n        *ngIf=\"(i === 0) && message?.getSentAt() && !hideDateSeparator\">\n        <span class=\"cc-message-list__date\">\n          <cometchat-date [timestamp]=\"message!.getSentAt()\"\n            [pattern]=\"DateSeparatorPattern\" [dateStyle]=\"dateSeparatorStyle\">\n          </cometchat-date>\n        </span>\n      </div>\n      <div class=\"cc-message-list__date-container\"\n        *ngIf=\"(i > 0 && isDateDifferent(messagesList[i - 1]?.getSentAt(), messagesList[i]?.getSentAt())) && message?.getSentAt() && !hideDateSeparator\">\n        <span class=\"cc-message-list__date\">\n          <cometchat-date [timestamp]=\"message?.getSentAt()\"\n            [pattern]=\"DateSeparatorPattern\" [dateStyle]=\"dateSeparatorStyle\">\n          </cometchat-date>\n        </span>\n      </div>\n      <div *ngIf=\"getBubbleWrapper(message)\">\n        <ng-container\n          *ngTemplateOutlet=\"getBubbleWrapper(message);context:{ $implicit: message }\">\n        </ng-container>\n      </div>\n      <div *ngIf=\"!getBubbleWrapper(message)\" #messageBubbleRef\n        [id]=\"message?.getId()\">\n        <cometchat-message-bubble\n          [leadingView]=\" showAvatar ? leadingView : null\"\n          [bottomView]=\"getBottomView(message)\"\n          [statusInfoView]=\"showStatusInfo(message) ?  statusInfoView : null\"\n          [headerView]=\"getHeaderView(message) || message?.getCategory() != MessageCategory.action && showHeaderTitle(message) ? bubbleHeader : null\"\n          [footerView]=\"getFooterView(message) || reactionView\"\n          [contentView]=\"contentView\" [threadView]=\"threadView\"\n          [id]=\"message?.getId() || message?.getMuid()\"\n          [options]=\"setMessageOptions(message)\"\n          [messageBubbleStyle]=\"setMessageBubbleStyle(message)\"\n          [alignment]=\"setBubbleAlignment(message)\">\n          <ng-template #contentView>\n            <ng-container\n              *ngTemplateOutlet=\"getContentView(message);context:{ $implicit: message }\">\n            </ng-container>\n          </ng-template>\n          <ng-template #reactionView>\n            <cometchat-reactions\n              *ngIf=\"message.getReactions() && message.getReactions().length > 0 && !disableReactions\"\n              [messageObject]=\"getClonedReactionObject(message)\"\n              [alignment]=\"setBubbleAlignment(message)\"\n              [reactionsStyle]=\"getReactionsStyle()\"\n              [reactionClick]=\"addReactionOnClick\"\n              [reactionListConfiguration]=\"getReactionListConfiguration()\"\n              [reactionInfoConfiguration]=\"getReactionInfoConfiguration()\"></cometchat-reactions>\n          </ng-template>\n          <ng-template #statusInfoView>\n            <div class=\"cc-message-list__bubble-status-info\"\n              [ngStyle]=\"getStatusInfoStyle(message)\">\n              <div *ngIf=\"getStatusInfoView(message);else bubbleFooter\">\n                <ng-container\n                  *ngTemplateOutlet=\"getStatusInfoView(message);context:{ $implicit: message }\">\n                </ng-container>\n              </div>\n              <ng-template #bubbleFooter>\n                <div class=\"cc-message-list__bubble-date\"\n                  *ngIf=\"timestampAlignment == timestampEnum.bottom && message?.getCategory() != MessageCategory.action && !message.getDeletedAt() && message?.getCategory() != MessageCategory.call && message?.getSentAt()\">\n                  <cometchat-date [timestamp]=\"message?.getSentAt()\"\n                    [dateStyle]=\"getBubbleDateStyle(message)\"\n                    [pattern]=\"datePattern\">\n                  </cometchat-date>\n                </div>\n                <div\n                  *ngIf=\"shouldShowMessage(message, disableReceipt, hideReceipt)\"\n                  class=\"cc-message-list__receipt\">\n                  <cometchat-receipt [receipt]=\"getMessageReceipt(message)\"\n                    [receiptStyle]=\"getReceiptStyle(message)\"\n                    [waitIcon]=\"waitIcon\" [sentIcon]=\"sentIcon\"\n                    [deliveredIcon]=\"deliveredIcon\" [readIcon]=\"readIcon\"\n                    [errorIcon]=\"errorIcon\"></cometchat-receipt>\n                </div>\n              </ng-template>\n            </div>\n          </ng-template>\n          <ng-template #leadingView>\n            <div\n              *ngIf=\" message?.getCategory() != MessageCategory.action  && showHeaderTitle(message)\">\n              <cometchat-avatar [name]=\"message?.getSender()?.getName()\"\n                [avatarStyle]=\"avatarStyle\"\n                [image]=\"message?.getSender()?.getAvatar()\">\n              </cometchat-avatar>\n            </div>\n          </ng-template>\n          <ng-template #bubbleHeader>\n            <div *ngIf=\"getHeaderView(message);else defaultHeader\">\n              <ng-container\n                *ngTemplateOutlet=\"getHeaderView(message);context:{ $implicit: message }\">\n              </ng-container>\n            </div>\n            <ng-template #defaultHeader>\n              <div class=\"cc-message-list__bubble-header\"\n                *ngIf=\"message?.getCategory() != MessageCategory.action && showHeaderTitle(message) && message?.getCategory() != MessageCategory.call\">\n                <cometchat-label [text]=\"message?.getSender()?.getName()\"\n                  [labelStyle]=\"labelStyle\"></cometchat-label>\n                <cometchat-date [pattern]=\"datePattern\"\n                  [timestamp]=\"message?.getSentAt()\"\n                  [dateStyle]=\"getBubbleDateStyle(message)\"\n                  *ngIf=\"timestampAlignment == timestampEnum.top && message?.getSentAt()\"></cometchat-date>\n              </div>\n            </ng-template>\n          </ng-template>\n          <ng-template #threadView>\n            <div class=\"cc-message-list__threadreplies\"\n              *ngIf=\"message?.getReplyCount() && !message.getDeletedAt()\"\n              [ngStyle]=\"getThreadViewAlignment(message)\">\n              <cometchat-icon-button [iconURL]=\"threadIndicatorIcon\"\n                [mirrorIcon]=\"getThreadIconAlignment(message)\"\n                [buttonStyle]=\"getThreadViewStyle(message)\"\n                (cc-button-clicked)=\"openThreadView(message)\"\n                [text]='getThreadCount(message)'>\n                <!-- <span slot=\"buttonView\" [ngStyle]=\"getUnreadRepliesCountStyle()\"\n                  class=\"cc-message-list__unread-thread\"\n                  *ngIf=\"!message.getDeletedAt() && message.getUnreadReplyCount() > 0\">\n                  {{message.getUnreadReplyCount()}}\n                </span> -->\n\n              </cometchat-icon-button>\n            </div>\n          </ng-template>\n        </cometchat-message-bubble>\n      </div>\n    </div>\n    <div class=\"cc-message-list__bottom\" #bottom>\n    </div>\n\n  </div>\n  <div class=\"cc-message-list__message-indicator\"\n    *ngIf=\"UnreadCount && UnreadCount.length > 0 && !isOnBottom\"\n    [ngStyle]=\"{bottom: showSmartReply || footerView || showConversationStarter || showConversationSummary  ? '20%' : '13%'}\">\n    <cometchat-button [text]=\"newMessageCount\"\n      [buttonStyle]=\"unreadMessagesStyle\"\n      (cc-button-clicked)=\"scrollToBottom()\"></cometchat-button>\n  </div>\n  <div class=\"cc-message-list__footer-view\" [ngStyle]=\"{height:  'auto'}\">\n\n    <div *ngIf=\"footerView;else footer\">\n      <ng-container *ngTemplateOutlet=\"footerView\">\n      </ng-container>\n    </div>\n    <ng-template #footer>\n\n      <div class=\"cc-message-list__smart-replies\"\n        *ngIf=\"!showConversationStarter && showSmartReply && getReplies()\">\n        <smart-replies [smartReplyStyle]=\"smartReplyStyle\"\n          [replies]=\"getReplies()\" (cc-reply-clicked)=\"sendReply($event)\"\n          (cc-close-clicked)=\"closeSmartReply()\">\n        </smart-replies>\n      </div>\n\n\n      <div class=\"cc-message-list__conversation-starters\"\n        *ngIf=\"enableConversationStarter && showConversationStarter\">\n        <cometchat-ai-card [state]=\"conversationStarterState\"\n          [loadingStateText]=\"starterLoadingStateText\"\n          [emptyStateText]=\"starterEmptyStateText\"\n          [errorStateText]=\"errorStateText\">\n          <smart-replies\n            *ngIf=\"conversationStarterState == states.loaded && !parentMessageId\"\n            [smartReplyStyle]=\"conversationStarterStyle\"\n            [replies]=\"conversationStarterReplies\" slot=\"loadedView\"\n            (cc-reply-clicked)=\"sendConversationStarter($event)\"\n            [closeIconURL]=\"''\">\n          </smart-replies>\n        </cometchat-ai-card>\n      </div>\n\n      <div class=\"cc-message-list__conversation-summary\"\n        *ngIf=\"enableConversationSummary && showConversationSummary\">\n\n        <cometchat-ai-card [state]=\"conversationSummaryState\"\n          [loadingStateText]=\"summaryLoadingStateText\"\n          [emptyStateText]=\"summaryEmptyStateText\"\n          [errorStateText]=\"errorStateText\" [errorIconURL]=\"aiErrorIcon\"\n          [emptyIconURL]=\"aiEmptyIcon\">\n          <cometchat-panel\n            *ngIf=\"conversationSummaryState == states.loaded && !parentMessageId\"\n            slot=\"loadedView\" [panelStyle]=\"conversationSummaryStyle\"\n            title=\"Conversation Summary\" [text]=\"conversationSummary\"\n            (cc-close-clicked)=\"closeConversationSummary()\">\n          </cometchat-panel>\n        </cometchat-ai-card>\n\n      </div>\n\n    </ng-template>\n  </div>\n\n</div>\n<!-- default bubbles -->\n<ng-template #textBubble let-message>\n  <cometchat-text-bubble\n    *ngIf=\"message?.type == MessageTypesConstant.groupMember\"\n    [textStyle]=\"setTextBubbleStyle(message)\"\n    [text]=\"message?.message\"></cometchat-text-bubble>\n  <cometchat-text-bubble *ngIf=\"message?.getDeletedAt()\"\n    [textStyle]=\"setTextBubbleStyle(message)\"\n    [text]=\"localize('MESSAGE_IS_DELETED')\"></cometchat-text-bubble>\n  <cometchat-text-bubble\n    *ngIf=\"!isTranslated(message) && !getLinkPreview(message) && !message?.deletedAt && message?.type != MessageTypesConstant.groupMember\"\n    [textStyle]=\"setTextBubbleStyle(message)\" [text]=\"getTextMessage(message)\"\n    [textFormatters]=\"getTextFormatters(message)\"></cometchat-text-bubble>\n  <link-preview [linkPreviewStyle]=\"linkPreviewStyle\"\n    (cc-link-clicked)=\"openLinkURL($event)\"\n    *ngIf=\"!message?.getDeletedAt() && getLinkPreview(message) && enableLinkPreview\"\n    [title]=\"getLinkPreviewDetails('title',message)\"\n    [description]=\"getLinkPreviewDetails('description',message)\"\n    [URL]=\"getLinkPreviewDetails('url',message)\"\n    [image]=\"getLinkPreviewDetails('image',message)\"\n    [favIconURL]=\"getLinkPreviewDetails('favicon',message)\">\n    <cometchat-text-bubble\n      *ngIf=\"!isTranslated(message) && getLinkPreview(message) && !message?.deletedAt && message?.type != MessageTypesConstant.groupMember\"\n      [textStyle]=\"setTextBubbleStyle(message)\" [text]=\"getTextMessage(message)\"\n      [textFormatters]=\"getTextFormatters(message)\"></cometchat-text-bubble>\n  </link-preview>\n  <message-translation-bubble [alignment]=\"getBubbleAlignment(message)\"\n    *ngIf=\"isTranslated(message)\"\n    [messageTranslationStyle]=\"setTranslationStyle(message)\"\n    [translatedText]=\"isTranslated(message)\"\n    [textFormatters]=\"getTextFormatters(message)\">\n    <cometchat-text-bubble\n      *ngIf=\" !message?.deletedAt && message?.type != MessageTypesConstant.groupMember\"\n      [textStyle]=\"setTextBubbleStyle(message)\" [text]=\"message?.text\"\n      [textFormatters]=\"getTextFormatters(message)\"></cometchat-text-bubble>\n\n  </message-translation-bubble>\n</ng-template>\n<ng-template #fileBubble let-message>\n\n  <cometchat-file-bubble [fileStyle]=\"setFileBubbleStyle(message)\"\n    [downloadIconURL]=\"downloadIconURL\" [subtitle]=\"localize('SHARED_FILE')\"\n    [title]=\"message?.data?.attachments ? message?.data?.attachments[0]?.name: ''\"\n    [fileURL]=\"message?.data?.attachments ? message?.data?.attachments[0]?.url : ''\"></cometchat-file-bubble>\n</ng-template>\n<ng-template #audioBubble let-message>\n  <cometchat-icon-button [disabled]=\"true\"\n    *ngIf=\"message?.category == callConstant && message?.type == MessageTypesConstant.audio\"\n    [iconURL]=\"getCallTypeIcon(message)\"\n    [buttonStyle]=\"callStatusStyle(message)\"\n    [text]=\"getCallActionMessage(message)\"></cometchat-icon-button>\n  <cometchat-audio-bubble\n    *ngIf=\"!message.getDeletedAt() && message?.category != callConstant\"\n    [src]=\"message?.data?.attachments ? message?.data?.attachments[0]?.url : ''\">\n  </cometchat-audio-bubble>\n</ng-template>\n<ng-template #videoBubble let-message>\n  <cometchat-icon-button [disabled]=\"true\"\n    *ngIf=\"message?.category == callConstant && message?.type == MessageTypesConstant.video\"\n    [iconURL]=\"getCallTypeIcon(message)\"\n    [buttonStyle]=\"callStatusStyle(message)\"\n    [text]=\"getCallActionMessage(message)\"></cometchat-icon-button>\n\n  <cometchat-video-bubble\n    *ngIf=\"!message.getDeletedAt() && message?.category != callConstant\"\n    [videoStyle]=\"videoBubbleStyle\"\n    [src]=\"message?.data?.attachments ? message?.data?.attachments[0]?.url : ''\"\n    [poster]=\" getImageThumbnail(message)\"></cometchat-video-bubble>\n</ng-template>\n<ng-template #imageBubble let-message>\n  <image-moderation (cc-show-dialog)=\"openWarningDialog($event)\"\n    *ngIf=\"!message.getDeletedAt() && enableImageModeration\" [message]=\"message\"\n    [imageModerationStyle]=\"imageModerationStyle\">\n    <cometchat-image-bubble (cc-image-clicked)=\"openImageInFullScreen(message)\"\n      [imageStyle]=\"imageBubbleStyle\" [src]=\" getImageThumbnail(message)\"\n      [placeholderImage]=\"placeholderIconURL\"></cometchat-image-bubble>\n  </image-moderation>\n  <cometchat-image-bubble [imageStyle]=\"imageBubbleStyle\"\n    (cc-image-clicked)=\"openImageInFullScreen(message)\"\n    *ngIf=\"!message.getDeletedAt() && !enableImageModeration\"\n    [src]=\" getImageThumbnail(message)\"\n    [placeholderImage]=\"placeholderIconURL\"></cometchat-image-bubble>\n</ng-template>\n<ng-template #formBubble let-message>\n  <cometchat-form-bubble [message]=\"message\"\n    [formBubbleStyle]=\"getFormMessageBubbleStyle()\"></cometchat-form-bubble>\n</ng-template>\n<ng-template #cardBubble let-message>\n  <cometchat-card-bubble [message]=\"message\"\n    [cardBubbleStyle]=\"getCardMessageBubbleStyle()\"></cometchat-card-bubble>\n</ng-template>\n<ng-template #customTextBubble>\n</ng-template>\n<ng-template #stickerBubble let-message>\n  <cometchat-image-bubble [src]=\"getSticker(message)\"\n    [imageStyle]=\"imageBubbleStyle\"></cometchat-image-bubble>\n\n</ng-template>\n<ng-template #whiteboardBubble let-message>\n  <cometchat-document-bubble [hideSeparator]=\"false\"\n    [iconAlignment]=\"documentBubbleAlignment\"\n    [documentStyle]=\"documentBubbleStyle\" [URL]=\"getWhiteboardDocument(message)\"\n    [ccClicked]=\"launchCollaborativeWhiteboardDocument\"\n    [iconURL]=\"whiteboardIconURL\" [title]=\"whiteboardTitle\"\n    [buttonText]=\"whiteboardButtonText\"\n    [subtitle]=\"whiteboardSubitle\"></cometchat-document-bubble>\n\n</ng-template>\n<ng-template #documentBubble let-message>\n  <cometchat-document-bubble [hideSeparator]=\"false\"\n    [iconAlignment]=\"documentBubbleAlignment\"\n    [documentStyle]=\"documentBubbleStyle\" [URL]=\"getWhiteboardDocument(message)\"\n    [ccClicked]=\"launchCollaborativeWhiteboardDocument\"\n    [iconURL]=\"documentIconURL\" [title]=\"documentTitle\"\n    [buttonText]=\"documentButtonText\"\n    [subtitle]=\"documentSubitle\"></cometchat-document-bubble>\n\n</ng-template>\n<ng-template #directCalling let-message>\n  <cometchat-document-bubble [hideSeparator]=\"true\"\n    [iconAlignment]=\"callBubbleAlignment\"\n    [documentStyle]=\"getCallBubbleStyle(message)\" [URL]=\"getSessionId(message)\"\n    [ccClicked]=\"getStartCallFunction(message)\" [iconURL]=\"directCallIconURL\"\n    [title]=\"getCallBubbleTitle(message)\" [buttonText]=\"joinCallButtonText\"\n    *ngIf=\"message.category == 'custom'\"></cometchat-document-bubble>\n\n</ng-template>\n<ng-template #schedulerBubble let-message>\n  <cometchat-scheduler-bubble [schedulerMessage]=\"message\"\n    [loggedInUser]=\"loggedInUser\"\n    [schedulerBubbleStyle]=\"getSchedulerBubbleStyle(message)\"></cometchat-scheduler-bubble>\n\n</ng-template>\n<ng-template #pollBubble let-message>\n  <polls-bubble [pollStyle]=\"pollBubbleStyle\"\n    [pollQuestion]=\"getPollBubbleData(message,'question')\"\n    [pollId]=\"getPollBubbleData(message,'id')\" [loggedInUser]=\"loggedInUser\"\n    [senderUid]=\"getPollBubbleData(message)\"\n    [metadata]=\"message?.metadata\"></polls-bubble>\n\n</ng-template>\n\n<!-- thread bubble view -->\n<ng-template #threadMessageBubble let-message>\n  <div *ngIf=\"getBubbleWrapper(message)\">\n    <ng-container\n      *ngTemplateOutlet=\"getBubbleWrapper(message);context:{ $implicit: message }\">\n    </ng-container>\n  </div>\n  <cometchat-message-bubble *ngIf=\"!getBubbleWrapper(message)\"\n    [bottomView]=\"getBottomView(message)\"\n    [statusInfoView]=\"showStatusInfo(message) ?  statusInfoView : null\"\n    [leadingView]=\" showAvatar ? leadingView : null\" [headerView]=\"bubbleHeader\"\n    [footerView]=\"getFooterView(message)\" [contentView]=\"contentView\"\n    [id]=\"message?.getId() || message?.getMuid()\"\n    [messageBubbleStyle]=\"setMessageBubbleStyle(message)\"\n    [alignment]=\"threadedAlignment\">\n    <ng-template #contentView>\n      <ng-container\n        *ngTemplateOutlet=\"getContentView(message);context:{ $implicit: message }\">\n      </ng-container>\n    </ng-template>\n    <ng-template #statusInfoView>\n      <div class=\"cc-message-list__bubble-status-info\"\n        [ngStyle]=\"getStatusInfoStyle(message)\">\n        <div *ngIf=\"getStatusInfoView(message);else bubbleFooter\">\n          <ng-container\n            *ngTemplateOutlet=\"getStatusInfoView(message);context:{ $implicit: message }\">\n          </ng-container>\n        </div>\n        <ng-template #bubbleFooter>\n          <div class=\"cc-message-list__bubble-date\"\n            *ngIf=\"timestampAlignment == timestampEnum.bottom && message?.getCategory() != MessageCategory.action && message?.getCategory() != MessageCategory.call && message?.getSentAt()\">\n            <cometchat-date [timestamp]=\"message?.getSentAt()\"\n              [dateStyle]=\"getBubbleDateStyle(message)\" [pattern]=\"datePattern\">\n            </cometchat-date>\n          </div>\n          <div\n          *ngIf=\"shouldShowMessage(message, disableReceipt, hideReceipt)\"\n            class=\"cc-message-list__receipt\">\n            <cometchat-receipt [receipt]=\"getMessageReceipt(message)\"\n              [receiptStyle]=\"getReceiptStyle(message)\" [waitIcon]=\"waitIcon\"\n              [sentIcon]=\"sentIcon\" [deliveredIcon]=\"\"\n              [readIcon]=\"deliveredIcon\"\n              [errorIcon]=\"errorIcon\"></cometchat-receipt>\n          </div>\n        </ng-template>\n      </div>\n    </ng-template>\n    <ng-template #leadingView>\n      <div\n        *ngIf=\" message?.getCategory() != MessageCategory.action && showHeaderTitle(message)\">\n        <cometchat-avatar [name]=\"message?.getSender()?.getName()\"\n          [avatarStyle]=\"avatarStyle\"\n          [image]=\"message?.getSender()?.getAvatar()\">\n        </cometchat-avatar>\n      </div>\n    </ng-template>\n    <ng-template #bubbleHeader>\n      <div *ngIf=\"getHeaderView(message);else defaultHeader\">\n        <ng-container\n          *ngTemplateOutlet=\"getHeaderView(message);context:{ $implicit: message }\">\n        </ng-container>\n      </div>\n      <ng-template #defaultHeader>\n        <div class=\"cc-message-list__bubble-header\"\n          *ngIf=\"message?.getCategory() != MessageCategory.action && showHeaderTitle(message) && message?.getCategory() != MessageCategory.call\">\n          <cometchat-label [text]=\"message?.getSender()?.getName()\"\n            [labelStyle]=\"labelStyle\"></cometchat-label>\n          <cometchat-date [pattern]=\"datePattern\"\n            [timestamp]=\"message?.getSentAt()\"\n            [dateStyle]=\"getBubbleDateStyle(message)\"\n            *ngIf=\"timestampAlignment == timestampEnum.top && message?.getSentAt()\"></cometchat-date>\n        </div>\n      </ng-template>\n    </ng-template>\n  </cometchat-message-bubble>\n\n</ng-template>\n\n\n<!--  -->\n<cometchat-popover [popoverStyle]=\"popoverStyle\" #popoverRef\n  [placement]=\"keyboardAlignment\">\n  <cometchat-emoji-keyboard (cc-emoji-clicked)=\"addReaction($event)\"\n    slot=\"content\"\n    [emojiKeyboardStyle]=\"emojiKeyboardStyle\"></cometchat-emoji-keyboard>\n</cometchat-popover>\n<cometchat-backdrop *ngIf=\"openConfirmDialog\" [backdropStyle]=\"backdropStyle\">\n  <cometchat-confirm-dialog [title]=\"''\" [messageText]=\"warningText\"\n    (cc-confirm-clicked)=\"onConfirmClick()\" [cancelButtonText]=\"cancelText\"\n    [confirmButtonText]=\"confirmText\" (cc-cancel-clicked)=\"onCancelClick()\"\n    [confirmDialogStyle]=\"confirmDialogStyle\">\n\n  </cometchat-confirm-dialog>\n</cometchat-backdrop>\n<cometchat-full-screen-viewer (cc-close-clicked)=\"closeImageInFullScreen()\"\n  *ngIf=\"openFullscreenView\" [URL]=\"imageurlToOpen\"\n  [closeIconURL]=\"closeIconURL\" [fullScreenViewerStyle]=\"fullScreenViewerStyle\">\n\n</cometchat-full-screen-viewer>\n\n<!-- ongoing callscreen for direct call -->\n<cometchat-ongoing-call *ngIf=\"showOngoingCall\"\n  [callSettingsBuilder]=\"getCallBuilder()\" [ongoingCallStyle]=\"ongoingCallStyle\"\n  [sessionID]=\"sessionId\"></cometchat-ongoing-call>\n<!-- message information view -->\n<!-- thread bubble view -->\n<ng-template #messageinfoBubble let-message>\n  <div *ngIf=\"getBubbleWrapper(message)\">\n    <ng-container\n      *ngTemplateOutlet=\"getBubbleWrapper(message);context:{ $implicit: message }\">\n    </ng-container>\n  </div>\n  <cometchat-message-bubble *ngIf=\"!getBubbleWrapper(message)\"\n    [bottomView]=\"getBottomView(message)\"\n    [statusInfoView]=\"getStatusInfoView(message)\"\n    [footerView]=\"getFooterView(message)\"\n    [leadingView]=\"showAvatar ? leadingView : null\" [headerView]=\"bubbleHeader\"\n    [contentView]=\"contentView\" [id]=\"message?.getId() || message?.getMuid()\"\n    [messageBubbleStyle]=\"setMessageBubbleStyle(message)\"\n    [alignment]=\"messageInfoAlignment\">\n    <ng-template #contentView>\n      <ng-container\n        *ngTemplateOutlet=\"getContentView(message);context:{ $implicit: message }\">\n      </ng-container>\n    </ng-template>\n    <ng-template #leadingView>\n      <div\n        *ngIf=\" message?.getCategory() != MessageCategory.action && showHeaderTitle(message)\">\n        <cometchat-avatar [name]=\"message?.getSender()?.getName()\"\n          [avatarStyle]=\"avatarStyle\"\n          [image]=\"message?.getSender()?.getAvatar()\">\n        </cometchat-avatar>\n      </div>\n    </ng-template>\n    <ng-template #bubbleHeader>\n      <div *ngIf=\"getHeaderView(message);else defaultHeader\">\n        <ng-container\n          *ngTemplateOutlet=\"getHeaderView(message);context:{ $implicit: message }\">\n        </ng-container>\n      </div>\n      <ng-template #defaultHeader>\n        <div class=\"cc-message-list__bubble-header\"\n          *ngIf=\"message?.getCategory() != MessageCategory.action && showHeaderTitle(message) && message?.getCategory() != MessageCategory.call\">\n          <cometchat-label [text]=\"message?.getSender()?.getName()\"\n            [labelStyle]=\"labelStyle\"></cometchat-label>\n          <cometchat-date [pattern]=\"datePattern\"\n            [timestamp]=\"message?.getSentAt()\"\n            [dateStyle]=\"getBubbleDateStyle(message)\"\n            *ngIf=\"timestampAlignment == timestampEnum.top && message?.getSentAt()\"></cometchat-date>\n        </div>\n      </ng-template>\n    </ng-template>\n  </cometchat-message-bubble>\n\n</ng-template>\n<cometchat-backdrop *ngIf=\"openMessageInfoPage\" [backdropStyle]=\"backdropStyle\">\n  <cometchat-message-information\n    [closeIconURL]=\"messageInformationConfiguration.closeIconURL\"\n    [loadingStateView]=\"messageInformationConfiguration.loadingStateView\"\n    [errorStateView]=\"messageInformationConfiguration.errorStateView\"\n    [listItemStyle]=\"messageInformationConfiguration.listItemStyle\"\n    [emptyStateView]=\"messageInformationConfiguration.emptyStateView\"\n    [loadingIconURL]=\"messageInformationConfiguration.loadingIconURL\"\n    [readIcon]=\"messageInformationConfiguration.readIcon\"\n    [deliveredIcon]=\"messageInformationConfiguration.deliveredIcon\"\n    [onError]=\"messageInformationConfiguration.onError\"\n    [SubtitleView]=\"messageInformationConfiguration.subtitleView\"\n    [receiptDatePattern]=\"messageInformationConfiguration.receiptDatePattern\"\n    [listItemView]=\"messageInformationConfiguration.listItemView \"\n    [messageInformationStyle]=\"messageInformationConfiguration.messageInformationStyle\"\n    [onClose]=\"messageInformationConfiguration.onClose ??  closeMessageInfoPage\"\n    [bubbleView]=\"messageInformationConfiguration.bubbleView ?? messageinfoBubble\"\n    [message]=\"messageInfoObject\">\n\n  </cometchat-message-information>\n</cometchat-backdrop>\n", styles: [".cc-message-list{height:100%;width:100%;overflow-y:auto;overflow-x:hidden;position:relative}.cc-message-list__wrapper{height:100%;width:100%;display:flex;flex-direction:column;justify-content:space-between;overflow-y:hidden}.cc-message-list__bubble-status-info{display:flex;align-items:flex-end;width:100%;padding:0 8px 8px;box-sizing:border-box}cometchat-reactions{margin-top:-3px}.cc-message-list__unread-thread{margin-left:4px}.cc-message-list__date-container{text-align:center;margin:5px 0}.cc-message-list__smart-replies,.cc-message-list__conversation-starters{height:-moz-fit-content;height:fit-content;width:100%;position:absolute;bottom:0;z-index:1}.cc-message-list__conversation-summary{height:100%;position:relative;bottom:0;z-index:1;padding:.1px 14px}.cc-message-list__date{border-radius:10px;display:flex;justify-content:center}.cc-message-list__threadreplies{min-width:130px;width:100%;padding-top:4px;display:flex}.cc-message-list__message-indicator{height:25px;display:flex;align-items:center;justify-content:center;width:100%;bottom:10%;position:absolute}.cc-message-list__footer-view{z-index:1;position:relative;width:100%;box-sizing:border-box;margin-bottom:1px}.cc-message-list__decorator-message{margin:0;line-height:30px;word-wrap:break-word;padding:0 8px;width:100%;overflow:hidden;display:flex;align-items:center;justify-content:center;height:100%}.cc-message-list__footer__decorator-message{margin:0;line-height:30px;word-wrap:break-word;padding:0 8px 0 16px;width:100%;overflow:hidden;display:flex;align-items:center;justify-content:flex-start;height:100%}.cc-message-list::-webkit-scrollbar{background:transparent;width:8px}.cc-message-list::-webkit-scrollbar-thumb{background:#e8e5e5;border-radius:8px}.cc-message-list__footer-view-decorator{display:flex;flex-direction:row;column-gap:8px}.cc_panel_container{border:1px solid #6851d6}cometchat-scheduler-bubble{width:100%}.cc-message-list__bubble-reactions{width:100%;box-sizing:border-box}\n"], components: [{ type: CometChatMessageBubbleComponent, selector: "cometchat-message-bubble", inputs: ["messageBubbleStyle", "alignment", "options", "id", "leadingView", "headerView", "replyView", "contentView", "threadView", "footerView", "bottomView", "statusInfoView", "moreIconURL", "topMenuSize"] }, { type: CometChatOngoingCallComponent, selector: "cometchat-ongoing-call", inputs: ["ongoingCallStyle", "resizeIconHoverText", "sessionID", "minimizeIconURL", "maximizeIconURL", "callSettingsBuilder", "callWorkflow", "onError"] }, { type: CometChatMessageInformationComponent, selector: "cometchat-message-information", inputs: ["closeIconURL", "message", "title", "template", "bubbleView", "subtitleView", "listItemView", "receiptDatePattern", "onError", "messageInformationStyle", "readIcon", "deliveredIcon", "onClose", "listItemStyle", "emptyStateText", "errorStateText", "emptyStateView", "loadingIconURL", "loadingStateView", "errorStateView"] }], directives: [{ type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i3.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { type: i3.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: CometChatMessageListComponent, decorators: [{
             type: Component,
-            args: [{ selector: "cometchat-message-list", changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"cc-message-list__wrapper\" [ngStyle]=\"wrapperStyle()\"\n  *ngIf=\"!openContactsView\">\n\n  <div class=\"cc-message-list__header-view\">\n    <div *ngIf=\"headerView\">\n      <ng-container *ngTemplateOutlet=\"headerView\">\n      </ng-container>\n    </div>\n  </div>\n  <div class=\"cc-message-list\" #listScroll\n    [ngStyle]=\"{height: showSmartReply || showConversationStarter || showConversationSummary ? '92%' : '100%'}\">\n    <div class=\"cc-message-list__top\" #top>\n    </div>\n    <div class=\"cc-message-list__decorator-message\"\n      *ngIf=\"state == states.loading || state == states.error  || state == states.empty \"\n      [ngStyle]=\"messageContainerStyle()\">\n      <div class=\"cc-message-list__loading-view\"\n        *ngIf=\"state == states.loading \">\n        <cometchat-loader [iconURL]=\"loadingIconURL\"\n          [loaderStyle]=\"loadingStyle\">\n        </cometchat-loader>\n        <span class=\"cc-message-list__customview--loading\"\n          *ngIf=\"state == states.loading  && loadingStateView\">\n          <ng-container *ngTemplateOutlet=\"loadingStateView\">\n          </ng-container>\n        </span>\n      </div>\n      <div class=\"cc-message-list__error-view\"\n        *ngIf=\"state == states.error  && !hideError \">\n        <cometchat-label [labelStyle]=\"errorStyle()\"\n          *ngIf=\"state == states.error && !errorStateView\"\n          [text]=\"errorStateText\">\n        </cometchat-label>\n        <span class=\"cc-message-list__custom-view--error\"\n          *ngIf=\"state == states.error  && errorStateView\">\n          <ng-container *ngTemplateOutlet=\"errorStateView\">\n          </ng-container>\n        </span>\n      </div>\n      <div class=\"cc-message-list__empty-view\" *ngIf=\"state == states.empty\">\n        <span class=\"cc-message-list__custom-view--empty\"\n          *ngIf=\"state == states.empty && emptyStateView\">\n          <ng-container *ngTemplateOutlet=\"emptyStateView\">\n          </ng-container>\n        </span>\n      </div>\n    </div>\n    <div class=\"cc-message-list__bubble\"\n      *ngFor=\"let message of messagesList; let i = index\">\n      <div class=\"cc-message-list__date-container\"\n        *ngIf=\"(i === 0) && message?.getSentAt() && !hideDateSeparator\">\n        <span class=\"cc-message-list__date\">\n          <cometchat-date [timestamp]=\"message!.getSentAt()\"\n            [pattern]=\"DateSeparatorPattern\" [dateStyle]=\"dateSeparatorStyle\">\n          </cometchat-date>\n        </span>\n      </div>\n      <div class=\"cc-message-list__date-container\"\n        *ngIf=\"(i > 0 && isDateDifferent(messagesList[i - 1]?.getSentAt(), messagesList[i]?.getSentAt())) && message?.getSentAt() && !hideDateSeparator\">\n        <span class=\"cc-message-list__date\">\n          <cometchat-date [timestamp]=\"message?.getSentAt()\"\n            [pattern]=\"DateSeparatorPattern\" [dateStyle]=\"dateSeparatorStyle\">\n          </cometchat-date>\n        </span>\n      </div>\n      <div *ngIf=\"getBubbleWrapper(message)\">\n        <ng-container\n          *ngTemplateOutlet=\"getBubbleWrapper(message);context:{ $implicit: message }\">\n        </ng-container>\n      </div>\n      <div *ngIf=\"!getBubbleWrapper(message)\" #messageBubbleRef\n        [id]=\"message?.getId()\">\n        <cometchat-message-bubble\n          [leadingView]=\" showAvatar ? leadingView : null\"\n          [bottomView]=\"getBottomView(message)\"\n          [statusInfoView]=\"showStatusInfo(message) ?  statusInfoView : null\"\n          [headerView]=\"getHeaderView(message) || message?.getCategory() != MessageCategory.action && showHeaderTitle(message) ? bubbleHeader : null\"\n          [footerView]=\"getFooterView(message) || reactionView\"\n          [contentView]=\"contentView\" [threadView]=\"threadView\"\n          [id]=\"message?.getId() || message?.getMuid()\"\n          [options]=\"setMessageOptions(message)\"\n          [messageBubbleStyle]=\"setMessageBubbleStyle(message)\"\n          [alignment]=\"setBubbleAlignment(message)\">\n          <ng-template #contentView>\n            <ng-container\n              *ngTemplateOutlet=\"getContentView(message);context:{ $implicit: message }\">\n            </ng-container>\n          </ng-template>\n          <ng-template #reactionView>\n            <cometchat-reactions\n              *ngIf=\"message.getReactions() && message.getReactions().length > 0 && !disableReactions\"\n              [messageObject]=\"getClonedReactionObject(message)\"\n              [alignment]=\"setBubbleAlignment(message)\"\n              [reactionsStyle]=\"getReactionsStyle()\"\n              [reactionClick]=\"addReactionOnClick\"\n              [reactionListConfiguration]=\"getReactionListConfiguration()\"\n              [reactionInfoConfiguration]=\"getReactionInfoConfiguration()\"></cometchat-reactions>\n          </ng-template>\n          <ng-template #statusInfoView>\n            <div class=\"cc-message-list__bubble-status-info\"\n              [ngStyle]=\"getStatusInfoStyle(message)\">\n              <div *ngIf=\"getStatusInfoView(message);else bubbleFooter\">\n                <ng-container\n                  *ngTemplateOutlet=\"getStatusInfoView(message);context:{ $implicit: message }\">\n                </ng-container>\n              </div>\n              <ng-template #bubbleFooter>\n                <div class=\"cc-message-list__bubble-date\"\n                  *ngIf=\"timestampAlignment == timestampEnum.bottom && message?.getCategory() != MessageCategory.action && !message.getDeletedAt() && message?.getCategory() != MessageCategory.call && message?.getSentAt()\">\n                  <cometchat-date [timestamp]=\"message?.getSentAt()\"\n                    [dateStyle]=\"getBubbleDateStyle(message)\"\n                    [pattern]=\"datePattern\">\n                  </cometchat-date>\n                </div>\n                <div\n                  *ngIf=\" !message?.getDeletedAt() &&  !disableReceipt && (!message?.getSender() || this.loggedInUser.getUid() == message?.getSender()?.getUid()) && message?.getCategory() != MessageCategory.action && message?.getCategory() != MessageCategory.call\"\n                  class=\"cc-message-list__receipt\">\n                  <cometchat-receipt [receipt]=\"getMessageReceipt(message)\"\n                    [receiptStyle]=\"getReceiptStyle(message)\"\n                    [waitIcon]=\"waitIcon\" [sentIcon]=\"sentIcon\"\n                    [deliveredIcon]=\"deliveredIcon\" [readIcon]=\"readIcon\"\n                    [errorIcon]=\"errorIcon\"></cometchat-receipt>\n                </div>\n              </ng-template>\n            </div>\n          </ng-template>\n          <ng-template #leadingView>\n            <div\n              *ngIf=\" message?.getCategory() != MessageCategory.action  && showHeaderTitle(message)\">\n              <cometchat-avatar [name]=\"message?.getSender()?.getName()\"\n                [avatarStyle]=\"avatarStyle\"\n                [image]=\"message?.getSender()?.getAvatar()\">\n              </cometchat-avatar>\n            </div>\n          </ng-template>\n          <ng-template #bubbleHeader>\n            <div *ngIf=\"getHeaderView(message);else defaultHeader\">\n              <ng-container\n                *ngTemplateOutlet=\"getHeaderView(message);context:{ $implicit: message }\">\n              </ng-container>\n            </div>\n            <ng-template #defaultHeader>\n              <div class=\"cc-message-list__bubble-header\"\n                *ngIf=\"message?.getCategory() != MessageCategory.action && showHeaderTitle(message) && message?.getCategory() != MessageCategory.call\">\n                <cometchat-label [text]=\"message?.getSender()?.getName()\"\n                  [labelStyle]=\"labelStyle\"></cometchat-label>\n                <cometchat-date [pattern]=\"datePattern\"\n                  [timestamp]=\"message?.getSentAt()\"\n                  [dateStyle]=\"getBubbleDateStyle(message)\"\n                  *ngIf=\"timestampAlignment == timestampEnum.top && message?.getSentAt()\"></cometchat-date>\n              </div>\n            </ng-template>\n          </ng-template>\n          <ng-template #threadView>\n            <div class=\"cc-message-list__threadreplies\"\n              *ngIf=\"message?.getReplyCount() && !message.getDeletedAt()\"\n              [ngStyle]=\"getThreadViewAlignment(message)\">\n              <cometchat-icon-button [iconURL]=\"threadIndicatorIcon\"\n                [mirrorIcon]=\"getThreadIconAlignment(message)\"\n                [buttonStyle]=\"getThreadViewStyle(message)\"\n                (cc-button-clicked)=\"openThreadView(message)\"\n                [text]='getThreadCount(message)'>\n                <!-- <span slot=\"buttonView\" [ngStyle]=\"getUnreadRepliesCountStyle()\"\n                  class=\"cc-message-list__unread-thread\"\n                  *ngIf=\"!message.getDeletedAt() && message.getUnreadReplyCount() > 0\">\n                  {{message.getUnreadReplyCount()}}\n                </span> -->\n\n              </cometchat-icon-button>\n            </div>\n          </ng-template>\n        </cometchat-message-bubble>\n      </div>\n    </div>\n    <div class=\"cc-message-list__bottom\" #bottom>\n    </div>\n\n  </div>\n  <div class=\"cc-message-list__message-indicator\"\n    *ngIf=\"UnreadCount && UnreadCount.length > 0 && !isOnBottom\"\n    [ngStyle]=\"{bottom: showSmartReply || footerView || showConversationStarter || showConversationSummary  ? '20%' : '13%'}\">\n    <cometchat-button [text]=\"newMessageCount\"\n      [buttonStyle]=\"unreadMessagesStyle\"\n      (cc-button-clicked)=\"scrollToBottom()\"></cometchat-button>\n  </div>\n  <div class=\"cc-message-list__footer-view\" [ngStyle]=\"{height:  'auto'}\">\n\n    <div *ngIf=\"footerView;else footer\">\n      <ng-container *ngTemplateOutlet=\"footerView\">\n      </ng-container>\n    </div>\n    <ng-template #footer>\n\n      <div class=\"cc-message-list__smart-replies\"\n        *ngIf=\"!showConversationStarter && showSmartReply && getReplies()\">\n        <smart-replies [smartReplyStyle]=\"smartReplyStyle\"\n          [replies]=\"getReplies()\" (cc-reply-clicked)=\"sendReply($event)\"\n          (cc-close-clicked)=\"closeSmartReply()\">\n        </smart-replies>\n      </div>\n\n\n      <div class=\"cc-message-list__conversation-starters\"\n        *ngIf=\"enableConversationStarter && showConversationStarter\">\n        <cometchat-ai-card [state]=\"conversationStarterState\"\n          [loadingStateText]=\"starterLoadingStateText\"\n          [emptyStateText]=\"starterEmptyStateText\"\n          [errorStateText]=\"errorStateText\">\n          <smart-replies\n            *ngIf=\"conversationStarterState == states.loaded && !parentMessageId\"\n            [smartReplyStyle]=\"conversationStarterStyle\"\n            [replies]=\"conversationStarterReplies\" slot=\"loadedView\"\n            (cc-reply-clicked)=\"sendConversationStarter($event)\"\n            [closeIconURL]=\"''\">\n          </smart-replies>\n        </cometchat-ai-card>\n      </div>\n\n      <div class=\"cc-message-list__conversation-summary\"\n        *ngIf=\"enableConversationSummary && showConversationSummary\">\n\n        <cometchat-ai-card [state]=\"conversationSummaryState\"\n          [loadingStateText]=\"summaryLoadingStateText\"\n          [emptyStateText]=\"summaryEmptyStateText\"\n          [errorStateText]=\"errorStateText\" [errorIconURL]=\"aiErrorIcon\"\n          [emptyIconURL]=\"aiEmptyIcon\">\n          <cometchat-panel\n            *ngIf=\"conversationSummaryState == states.loaded && !parentMessageId\"\n            slot=\"loadedView\" [panelStyle]=\"conversationSummaryStyle\"\n            title=\"Conversation Summary\" [text]=\"conversationSummary\"\n            (cc-close-clicked)=\"closeConversationSummary()\">\n          </cometchat-panel>\n        </cometchat-ai-card>\n\n      </div>\n\n    </ng-template>\n  </div>\n\n</div>\n<!-- default bubbles -->\n<ng-template #textBubble let-message>\n  <cometchat-text-bubble\n    *ngIf=\"message?.type == MessageTypesConstant.groupMember\"\n    [textStyle]=\"setTextBubbleStyle(message)\"\n    [text]=\"message?.message\"></cometchat-text-bubble>\n  <cometchat-text-bubble *ngIf=\"message?.getDeletedAt()\"\n    [textStyle]=\"setTextBubbleStyle(message)\"\n    [text]=\"localize('MESSAGE_IS_DELETED')\"></cometchat-text-bubble>\n  <cometchat-text-bubble\n    *ngIf=\"!isTranslated(message) && !getLinkPreview(message) && !message?.deletedAt && message?.type != MessageTypesConstant.groupMember\"\n    [textStyle]=\"setTextBubbleStyle(message)\" [text]=\"getTextMessage(message)\"\n    [textFormatters]=\"getTextFormatters(message)\"></cometchat-text-bubble>\n  <link-preview [linkPreviewStyle]=\"linkPreviewStyle\"\n    (cc-link-clicked)=\"openLinkURL($event)\"\n    *ngIf=\"!message?.getDeletedAt() && getLinkPreview(message) && enableLinkPreview\"\n    [title]=\"getLinkPreviewDetails('title',message)\"\n    [description]=\"getLinkPreviewDetails('description',message)\"\n    [URL]=\"getLinkPreviewDetails('url',message)\"\n    [image]=\"getLinkPreviewDetails('image',message)\"\n    [favIconURL]=\"getLinkPreviewDetails('favicon',message)\">\n    <cometchat-text-bubble\n      *ngIf=\"!isTranslated(message) && getLinkPreview(message) && !message?.deletedAt && message?.type != MessageTypesConstant.groupMember\"\n      [textStyle]=\"setTextBubbleStyle(message)\" [text]=\"getTextMessage(message)\"\n      [textFormatters]=\"getTextFormatters(message)\"></cometchat-text-bubble>\n  </link-preview>\n  <message-translation-bubble [alignment]=\"getBubbleAlignment(message)\"\n    *ngIf=\"isTranslated(message)\"\n    [messageTranslationStyle]=\"setTranslationStyle(message)\"\n    [translatedText]=\"isTranslated(message)\"\n    [textFormatters]=\"getTextFormatters(message)\">\n    <cometchat-text-bubble\n      *ngIf=\" !message?.deletedAt && message?.type != MessageTypesConstant.groupMember\"\n      [textStyle]=\"setTextBubbleStyle(message)\" [text]=\"message?.text\"\n      [textFormatters]=\"getTextFormatters(message)\"></cometchat-text-bubble>\n\n  </message-translation-bubble>\n</ng-template>\n<ng-template #fileBubble let-message>\n\n  <cometchat-file-bubble [fileStyle]=\"setFileBubbleStyle(message)\"\n    [downloadIconURL]=\"downloadIconURL\" [subtitle]=\"localize('SHARED_FILE')\"\n    [title]=\"message?.data?.attachments ? message?.data?.attachments[0]?.name: ''\"\n    [fileURL]=\"message?.data?.attachments ? message?.data?.attachments[0]?.url : ''\"></cometchat-file-bubble>\n</ng-template>\n<ng-template #audioBubble let-message>\n  <cometchat-icon-button [disabled]=\"true\"\n    *ngIf=\"message?.category == callConstant && message?.type == MessageTypesConstant.audio\"\n    [iconURL]=\"getCallTypeIcon(message)\"\n    [buttonStyle]=\"callStatusStyle(message)\"\n    [text]=\"getCallActionMessage(message)\"></cometchat-icon-button>\n  <cometchat-audio-bubble\n    *ngIf=\"!message.getDeletedAt() && message?.category != callConstant\"\n    [src]=\"message?.data?.attachments ? message?.data?.attachments[0]?.url : ''\">\n  </cometchat-audio-bubble>\n</ng-template>\n<ng-template #videoBubble let-message>\n  <cometchat-icon-button [disabled]=\"true\"\n    *ngIf=\"message?.category == callConstant && message?.type == MessageTypesConstant.video\"\n    [iconURL]=\"getCallTypeIcon(message)\"\n    [buttonStyle]=\"callStatusStyle(message)\"\n    [text]=\"getCallActionMessage(message)\"></cometchat-icon-button>\n\n  <cometchat-video-bubble\n    *ngIf=\"!message.getDeletedAt() && message?.category != callConstant\"\n    [videoStyle]=\"videoBubbleStyle\"\n    [src]=\"message?.data?.attachments ? message?.data?.attachments[0]?.url : ''\"\n    [poster]=\" getImageThumbnail(message)\"></cometchat-video-bubble>\n</ng-template>\n<ng-template #imageBubble let-message>\n  <image-moderation (cc-show-dialog)=\"openWarningDialog($event)\"\n    *ngIf=\"!message.getDeletedAt() && enableImageModeration\" [message]=\"message\"\n    [imageModerationStyle]=\"imageModerationStyle\">\n    <cometchat-image-bubble (cc-image-clicked)=\"openImageInFullScreen(message)\"\n      [imageStyle]=\"imageBubbleStyle\" [src]=\" getImageThumbnail(message)\"\n      [placeholderImage]=\"placeholderIconURL\"></cometchat-image-bubble>\n  </image-moderation>\n  <cometchat-image-bubble [imageStyle]=\"imageBubbleStyle\"\n    (cc-image-clicked)=\"openImageInFullScreen(message)\"\n    *ngIf=\"!message.getDeletedAt() && !enableImageModeration\"\n    [src]=\" getImageThumbnail(message)\"\n    [placeholderImage]=\"placeholderIconURL\"></cometchat-image-bubble>\n</ng-template>\n<ng-template #formBubble let-message>\n  <cometchat-form-bubble [message]=\"message\"\n    [formBubbleStyle]=\"getFormMessageBubbleStyle()\"></cometchat-form-bubble>\n</ng-template>\n<ng-template #cardBubble let-message>\n  <cometchat-card-bubble [message]=\"message\"\n    [cardBubbleStyle]=\"getCardMessageBubbleStyle()\"></cometchat-card-bubble>\n</ng-template>\n<ng-template #customTextBubble>\n</ng-template>\n<ng-template #stickerBubble let-message>\n  <cometchat-image-bubble [src]=\"getSticker(message)\"\n    [imageStyle]=\"imageBubbleStyle\"></cometchat-image-bubble>\n\n</ng-template>\n<ng-template #whiteboardBubble let-message>\n  <cometchat-document-bubble [hideSeparator]=\"false\"\n    [iconAlignment]=\"documentBubbleAlignment\"\n    [documentStyle]=\"documentBubbleStyle\" [URL]=\"getWhiteboardDocument(message)\"\n    [ccClicked]=\"launchCollaborativeWhiteboardDocument\"\n    [iconURL]=\"whiteboardIconURL\" [title]=\"whiteboardTitle\"\n    [buttonText]=\"whiteboardButtonText\"\n    [subtitle]=\"whiteboardSubitle\"></cometchat-document-bubble>\n\n</ng-template>\n<ng-template #documentBubble let-message>\n  <cometchat-document-bubble [hideSeparator]=\"false\"\n    [iconAlignment]=\"documentBubbleAlignment\"\n    [documentStyle]=\"documentBubbleStyle\" [URL]=\"getWhiteboardDocument(message)\"\n    [ccClicked]=\"launchCollaborativeWhiteboardDocument\"\n    [iconURL]=\"documentIconURL\" [title]=\"documentTitle\"\n    [buttonText]=\"documentButtonText\"\n    [subtitle]=\"documentSubitle\"></cometchat-document-bubble>\n\n</ng-template>\n<ng-template #directCalling let-message>\n  <cometchat-document-bubble [hideSeparator]=\"true\"\n    [iconAlignment]=\"callBubbleAlignment\"\n    [documentStyle]=\"getCallBubbleStyle(message)\" [URL]=\"getSessionId(message)\"\n    [ccClicked]=\"getStartCallFunction(message)\" [iconURL]=\"directCallIconURL\"\n    [title]=\"getCallBubbleTitle(message)\" [buttonText]=\"joinCallButtonText\"\n    *ngIf=\"message.category == 'custom'\"></cometchat-document-bubble>\n\n</ng-template>\n<ng-template #schedulerBubble let-message>\n  <cometchat-scheduler-bubble [schedulerMessage]=\"message\"\n    [loggedInUser]=\"loggedInUser\"\n    [schedulerBubbleStyle]=\"getSchedulerBubbleStyle(message)\"></cometchat-scheduler-bubble>\n\n</ng-template>\n<ng-template #pollBubble let-message>\n  <polls-bubble [pollStyle]=\"pollBubbleStyle\"\n    [pollQuestion]=\"getPollBubbleData(message,'question')\"\n    [pollId]=\"getPollBubbleData(message,'id')\" [loggedInUser]=\"loggedInUser\"\n    [senderUid]=\"getPollBubbleData(message)\"\n    [metadata]=\"message?.metadata\"></polls-bubble>\n\n</ng-template>\n\n<!-- thread bubble view -->\n<ng-template #threadMessageBubble let-message>\n  <div *ngIf=\"getBubbleWrapper(message)\">\n    <ng-container\n      *ngTemplateOutlet=\"getBubbleWrapper(message);context:{ $implicit: message }\">\n    </ng-container>\n  </div>\n  <cometchat-message-bubble *ngIf=\"!getBubbleWrapper(message)\"\n    [bottomView]=\"getBottomView(message)\"\n    [statusInfoView]=\"showStatusInfo(message) ?  statusInfoView : null\"\n    [leadingView]=\" showAvatar ? leadingView : null\" [headerView]=\"bubbleHeader\"\n    [footerView]=\"getFooterView(message)\" [contentView]=\"contentView\"\n    [id]=\"message?.getId() || message?.getMuid()\"\n    [messageBubbleStyle]=\"setMessageBubbleStyle(message)\"\n    [alignment]=\"threadedAlignment\">\n    <ng-template #contentView>\n      <ng-container\n        *ngTemplateOutlet=\"getContentView(message);context:{ $implicit: message }\">\n      </ng-container>\n    </ng-template>\n    <ng-template #statusInfoView>\n      <div class=\"cc-message-list__bubble-status-info\"\n        [ngStyle]=\"getStatusInfoStyle(message)\">\n        <div *ngIf=\"getStatusInfoView(message);else bubbleFooter\">\n          <ng-container\n            *ngTemplateOutlet=\"getStatusInfoView(message);context:{ $implicit: message }\">\n          </ng-container>\n        </div>\n        <ng-template #bubbleFooter>\n          <div class=\"cc-message-list__bubble-date\"\n            *ngIf=\"timestampAlignment == timestampEnum.bottom && message?.getCategory() != MessageCategory.action && message?.getCategory() != MessageCategory.call && message?.getSentAt()\">\n            <cometchat-date [timestamp]=\"message?.getSentAt()\"\n              [dateStyle]=\"getBubbleDateStyle(message)\" [pattern]=\"datePattern\">\n            </cometchat-date>\n          </div>\n          <div\n            *ngIf=\" !message?.getDeletedAt() &&  !disableReceipt && (!message?.getSender() || this.loggedInUser.getUid() == message?.getSender()?.getUid()) && message?.getCategory() != MessageCategory.action && message?.getCategory() != MessageCategory.call\"\n            class=\"cc-message-list__receipt\">\n            <cometchat-receipt [receipt]=\"getMessageReceipt(message)\"\n              [receiptStyle]=\"getReceiptStyle(message)\" [waitIcon]=\"waitIcon\"\n              [sentIcon]=\"sentIcon\" [deliveredIcon]=\"\"\n              [readIcon]=\"deliveredIcon\"\n              [errorIcon]=\"errorIcon\"></cometchat-receipt>\n          </div>\n        </ng-template>\n      </div>\n    </ng-template>\n    <ng-template #leadingView>\n      <div\n        *ngIf=\" message?.getCategory() != MessageCategory.action && showHeaderTitle(message)\">\n        <cometchat-avatar [name]=\"message?.getSender()?.getName()\"\n          [avatarStyle]=\"avatarStyle\"\n          [image]=\"message?.getSender()?.getAvatar()\">\n        </cometchat-avatar>\n      </div>\n    </ng-template>\n    <ng-template #bubbleHeader>\n      <div *ngIf=\"getHeaderView(message);else defaultHeader\">\n        <ng-container\n          *ngTemplateOutlet=\"getHeaderView(message);context:{ $implicit: message }\">\n        </ng-container>\n      </div>\n      <ng-template #defaultHeader>\n        <div class=\"cc-message-list__bubble-header\"\n          *ngIf=\"message?.getCategory() != MessageCategory.action && showHeaderTitle(message) && message?.getCategory() != MessageCategory.call\">\n          <cometchat-label [text]=\"message?.getSender()?.getName()\"\n            [labelStyle]=\"labelStyle\"></cometchat-label>\n          <cometchat-date [pattern]=\"datePattern\"\n            [timestamp]=\"message?.getSentAt()\"\n            [dateStyle]=\"getBubbleDateStyle(message)\"\n            *ngIf=\"timestampAlignment == timestampEnum.top && message?.getSentAt()\"></cometchat-date>\n        </div>\n      </ng-template>\n    </ng-template>\n  </cometchat-message-bubble>\n\n</ng-template>\n\n\n<!--  -->\n<cometchat-popover [popoverStyle]=\"popoverStyle\" #popoverRef\n  [placement]=\"keyboardAlignment\">\n  <cometchat-emoji-keyboard (cc-emoji-clicked)=\"addReaction($event)\"\n    slot=\"content\"\n    [emojiKeyboardStyle]=\"emojiKeyboardStyle\"></cometchat-emoji-keyboard>\n</cometchat-popover>\n<cometchat-backdrop *ngIf=\"openConfirmDialog\" [backdropStyle]=\"backdropStyle\">\n  <cometchat-confirm-dialog [title]=\"''\" [messageText]=\"warningText\"\n    (cc-confirm-clicked)=\"onConfirmClick()\" [cancelButtonText]=\"cancelText\"\n    [confirmButtonText]=\"confirmText\" (cc-cancel-clicked)=\"onCancelClick()\"\n    [confirmDialogStyle]=\"confirmDialogStyle\">\n\n  </cometchat-confirm-dialog>\n</cometchat-backdrop>\n<cometchat-full-screen-viewer (cc-close-clicked)=\"closeImageInFullScreen()\"\n  *ngIf=\"openFullscreenView\" [URL]=\"imageurlToOpen\"\n  [closeIconURL]=\"closeIconURL\" [fullScreenViewerStyle]=\"fullScreenViewerStyle\">\n\n</cometchat-full-screen-viewer>\n\n<!-- ongoing callscreen for direct call -->\n<cometchat-ongoing-call *ngIf=\"showOngoingCall\"\n  [callSettingsBuilder]=\"getCallBuilder()\" [ongoingCallStyle]=\"ongoingCallStyle\"\n  [sessionID]=\"sessionId\"></cometchat-ongoing-call>\n<!-- message information view -->\n<!-- thread bubble view -->\n<ng-template #messageinfoBubble let-message>\n  <div *ngIf=\"getBubbleWrapper(message)\">\n    <ng-container\n      *ngTemplateOutlet=\"getBubbleWrapper(message);context:{ $implicit: message }\">\n    </ng-container>\n  </div>\n  <cometchat-message-bubble *ngIf=\"!getBubbleWrapper(message)\"\n    [bottomView]=\"getBottomView(message)\"\n    [statusInfoView]=\"getStatusInfoView(message)\"\n    [footerView]=\"getFooterView(message)\"\n    [leadingView]=\"showAvatar ? leadingView : null\" [headerView]=\"bubbleHeader\"\n    [contentView]=\"contentView\" [id]=\"message?.getId() || message?.getMuid()\"\n    [messageBubbleStyle]=\"setMessageBubbleStyle(message)\"\n    [alignment]=\"messageInfoAlignment\">\n    <ng-template #contentView>\n      <ng-container\n        *ngTemplateOutlet=\"getContentView(message);context:{ $implicit: message }\">\n      </ng-container>\n    </ng-template>\n    <ng-template #leadingView>\n      <div\n        *ngIf=\" message?.getCategory() != MessageCategory.action && showHeaderTitle(message)\">\n        <cometchat-avatar [name]=\"message?.getSender()?.getName()\"\n          [avatarStyle]=\"avatarStyle\"\n          [image]=\"message?.getSender()?.getAvatar()\">\n        </cometchat-avatar>\n      </div>\n    </ng-template>\n    <ng-template #bubbleHeader>\n      <div *ngIf=\"getHeaderView(message);else defaultHeader\">\n        <ng-container\n          *ngTemplateOutlet=\"getHeaderView(message);context:{ $implicit: message }\">\n        </ng-container>\n      </div>\n      <ng-template #defaultHeader>\n        <div class=\"cc-message-list__bubble-header\"\n          *ngIf=\"message?.getCategory() != MessageCategory.action && showHeaderTitle(message) && message?.getCategory() != MessageCategory.call\">\n          <cometchat-label [text]=\"message?.getSender()?.getName()\"\n            [labelStyle]=\"labelStyle\"></cometchat-label>\n          <cometchat-date [pattern]=\"datePattern\"\n            [timestamp]=\"message?.getSentAt()\"\n            [dateStyle]=\"getBubbleDateStyle(message)\"\n            *ngIf=\"timestampAlignment == timestampEnum.top && message?.getSentAt()\"></cometchat-date>\n        </div>\n      </ng-template>\n    </ng-template>\n  </cometchat-message-bubble>\n\n</ng-template>\n<cometchat-backdrop *ngIf=\"openMessageInfoPage\" [backdropStyle]=\"backdropStyle\">\n  <cometchat-message-information\n    [closeIconURL]=\"messageInformationConfiguration.closeIconURL\"\n    [loadingStateView]=\"messageInformationConfiguration.loadingStateView\"\n    [errorStateView]=\"messageInformationConfiguration.errorStateView\"\n    [listItemStyle]=\"messageInformationConfiguration.listItemStyle\"\n    [emptyStateView]=\"messageInformationConfiguration.emptyStateView\"\n    [loadingIconURL]=\"messageInformationConfiguration.loadingIconURL\"\n    [readIcon]=\"messageInformationConfiguration.readIcon\"\n    [deliveredIcon]=\"messageInformationConfiguration.deliveredIcon\"\n    [onError]=\"messageInformationConfiguration.onError\"\n    [SubtitleView]=\"messageInformationConfiguration.subtitleView\"\n    [receiptDatePattern]=\"messageInformationConfiguration.receiptDatePattern\"\n    [listItemView]=\"messageInformationConfiguration.listItemView \"\n    [messageInformationStyle]=\"messageInformationConfiguration.messageInformationStyle\"\n    [onClose]=\"messageInformationConfiguration.onClose ??  closeMessageInfoPage\"\n    [bubbleView]=\"messageInformationConfiguration.bubbleView ?? messageinfoBubble\"\n    [message]=\"messageInfoObject\">\n\n  </cometchat-message-information>\n</cometchat-backdrop>\n", styles: [".cc-message-list{height:100%;width:100%;overflow-y:auto;overflow-x:hidden;position:relative}.cc-message-list__wrapper{height:100%;width:100%;display:flex;flex-direction:column;justify-content:space-between;overflow-y:hidden}.cc-message-list__bubble-status-info{display:flex;align-items:flex-end;width:100%;padding:0 8px 8px;box-sizing:border-box}cometchat-reactions{margin-top:-3px}.cc-message-list__unread-thread{margin-left:4px}.cc-message-list__date-container{text-align:center;margin:5px 0}.cc-message-list__smart-replies,.cc-message-list__conversation-starters{height:-moz-fit-content;height:fit-content;width:100%;position:absolute;bottom:0;z-index:1}.cc-message-list__conversation-summary{height:100%;position:relative;bottom:0;z-index:1;padding:.1px 14px}.cc-message-list__date{border-radius:10px;display:flex;justify-content:center}.cc-message-list__threadreplies{min-width:130px;width:100%;padding-top:4px;display:flex}.cc-message-list__message-indicator{height:25px;display:flex;align-items:center;justify-content:center;width:100%;bottom:10%;position:absolute}.cc-message-list__footer-view{z-index:1;position:relative;width:100%;box-sizing:border-box;margin-bottom:1px}.cc-message-list__decorator-message{margin:0;line-height:30px;word-wrap:break-word;padding:0 8px;width:100%;overflow:hidden;display:flex;align-items:center;justify-content:center;height:100%}.cc-message-list__footer__decorator-message{margin:0;line-height:30px;word-wrap:break-word;padding:0 8px 0 16px;width:100%;overflow:hidden;display:flex;align-items:center;justify-content:flex-start;height:100%}.cc-message-list::-webkit-scrollbar{background:transparent;width:8px}.cc-message-list::-webkit-scrollbar-thumb{background:#e8e5e5;border-radius:8px}.cc-message-list__footer-view-decorator{display:flex;flex-direction:row;column-gap:8px}.cc_panel_container{border:1px solid #6851d6}cometchat-scheduler-bubble{width:100%}.cc-message-list__bubble-reactions{width:100%;box-sizing:border-box}\n"] }]
+            args: [{ selector: "cometchat-message-list", changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"cc-message-list__wrapper\" [ngStyle]=\"wrapperStyle()\"\n  *ngIf=\"!openContactsView\">\n\n  <div class=\"cc-message-list__header-view\">\n    <div *ngIf=\"headerView\">\n      <ng-container *ngTemplateOutlet=\"headerView\">\n      </ng-container>\n    </div>\n  </div>\n  <div class=\"cc-message-list\" #listScroll\n    [ngStyle]=\"{height: showSmartReply || showConversationStarter || showConversationSummary ? '92%' : '100%'}\">\n    <div class=\"cc-message-list__top\" #top>\n    </div>\n    <div class=\"cc-message-list__decorator-message\"\n      *ngIf=\"state == states.loading || state == states.error  || state == states.empty \"\n      [ngStyle]=\"messageContainerStyle()\">\n      <div class=\"cc-message-list__loading-view\"\n        *ngIf=\"state == states.loading \">\n        <cometchat-loader [iconURL]=\"loadingIconURL\"\n          [loaderStyle]=\"loadingStyle\">\n        </cometchat-loader>\n        <span class=\"cc-message-list__customview--loading\"\n          *ngIf=\"state == states.loading  && loadingStateView\">\n          <ng-container *ngTemplateOutlet=\"loadingStateView\">\n          </ng-container>\n        </span>\n      </div>\n      <div class=\"cc-message-list__error-view\"\n        *ngIf=\"state == states.error  && !hideError \">\n        <cometchat-label [labelStyle]=\"errorStyle()\"\n          *ngIf=\"state == states.error && !errorStateView\"\n          [text]=\"errorStateText\">\n        </cometchat-label>\n        <span class=\"cc-message-list__custom-view--error\"\n          *ngIf=\"state == states.error  && errorStateView\">\n          <ng-container *ngTemplateOutlet=\"errorStateView\">\n          </ng-container>\n        </span>\n      </div>\n      <div class=\"cc-message-list__empty-view\" *ngIf=\"state == states.empty\">\n        <span class=\"cc-message-list__custom-view--empty\"\n          *ngIf=\"state == states.empty && emptyStateView\">\n          <ng-container *ngTemplateOutlet=\"emptyStateView\">\n          </ng-container>\n        </span>\n      </div>\n    </div>\n    <div class=\"cc-message-list__bubble\"\n      *ngFor=\"let message of messagesList; let i = index\">\n      <div class=\"cc-message-list__date-container\"\n        *ngIf=\"(i === 0) && message?.getSentAt() && !hideDateSeparator\">\n        <span class=\"cc-message-list__date\">\n          <cometchat-date [timestamp]=\"message!.getSentAt()\"\n            [pattern]=\"DateSeparatorPattern\" [dateStyle]=\"dateSeparatorStyle\">\n          </cometchat-date>\n        </span>\n      </div>\n      <div class=\"cc-message-list__date-container\"\n        *ngIf=\"(i > 0 && isDateDifferent(messagesList[i - 1]?.getSentAt(), messagesList[i]?.getSentAt())) && message?.getSentAt() && !hideDateSeparator\">\n        <span class=\"cc-message-list__date\">\n          <cometchat-date [timestamp]=\"message?.getSentAt()\"\n            [pattern]=\"DateSeparatorPattern\" [dateStyle]=\"dateSeparatorStyle\">\n          </cometchat-date>\n        </span>\n      </div>\n      <div *ngIf=\"getBubbleWrapper(message)\">\n        <ng-container\n          *ngTemplateOutlet=\"getBubbleWrapper(message);context:{ $implicit: message }\">\n        </ng-container>\n      </div>\n      <div *ngIf=\"!getBubbleWrapper(message)\" #messageBubbleRef\n        [id]=\"message?.getId()\">\n        <cometchat-message-bubble\n          [leadingView]=\" showAvatar ? leadingView : null\"\n          [bottomView]=\"getBottomView(message)\"\n          [statusInfoView]=\"showStatusInfo(message) ?  statusInfoView : null\"\n          [headerView]=\"getHeaderView(message) || message?.getCategory() != MessageCategory.action && showHeaderTitle(message) ? bubbleHeader : null\"\n          [footerView]=\"getFooterView(message) || reactionView\"\n          [contentView]=\"contentView\" [threadView]=\"threadView\"\n          [id]=\"message?.getId() || message?.getMuid()\"\n          [options]=\"setMessageOptions(message)\"\n          [messageBubbleStyle]=\"setMessageBubbleStyle(message)\"\n          [alignment]=\"setBubbleAlignment(message)\">\n          <ng-template #contentView>\n            <ng-container\n              *ngTemplateOutlet=\"getContentView(message);context:{ $implicit: message }\">\n            </ng-container>\n          </ng-template>\n          <ng-template #reactionView>\n            <cometchat-reactions\n              *ngIf=\"message.getReactions() && message.getReactions().length > 0 && !disableReactions\"\n              [messageObject]=\"getClonedReactionObject(message)\"\n              [alignment]=\"setBubbleAlignment(message)\"\n              [reactionsStyle]=\"getReactionsStyle()\"\n              [reactionClick]=\"addReactionOnClick\"\n              [reactionListConfiguration]=\"getReactionListConfiguration()\"\n              [reactionInfoConfiguration]=\"getReactionInfoConfiguration()\"></cometchat-reactions>\n          </ng-template>\n          <ng-template #statusInfoView>\n            <div class=\"cc-message-list__bubble-status-info\"\n              [ngStyle]=\"getStatusInfoStyle(message)\">\n              <div *ngIf=\"getStatusInfoView(message);else bubbleFooter\">\n                <ng-container\n                  *ngTemplateOutlet=\"getStatusInfoView(message);context:{ $implicit: message }\">\n                </ng-container>\n              </div>\n              <ng-template #bubbleFooter>\n                <div class=\"cc-message-list__bubble-date\"\n                  *ngIf=\"timestampAlignment == timestampEnum.bottom && message?.getCategory() != MessageCategory.action && !message.getDeletedAt() && message?.getCategory() != MessageCategory.call && message?.getSentAt()\">\n                  <cometchat-date [timestamp]=\"message?.getSentAt()\"\n                    [dateStyle]=\"getBubbleDateStyle(message)\"\n                    [pattern]=\"datePattern\">\n                  </cometchat-date>\n                </div>\n                <div\n                  *ngIf=\"shouldShowMessage(message, disableReceipt, hideReceipt)\"\n                  class=\"cc-message-list__receipt\">\n                  <cometchat-receipt [receipt]=\"getMessageReceipt(message)\"\n                    [receiptStyle]=\"getReceiptStyle(message)\"\n                    [waitIcon]=\"waitIcon\" [sentIcon]=\"sentIcon\"\n                    [deliveredIcon]=\"deliveredIcon\" [readIcon]=\"readIcon\"\n                    [errorIcon]=\"errorIcon\"></cometchat-receipt>\n                </div>\n              </ng-template>\n            </div>\n          </ng-template>\n          <ng-template #leadingView>\n            <div\n              *ngIf=\" message?.getCategory() != MessageCategory.action  && showHeaderTitle(message)\">\n              <cometchat-avatar [name]=\"message?.getSender()?.getName()\"\n                [avatarStyle]=\"avatarStyle\"\n                [image]=\"message?.getSender()?.getAvatar()\">\n              </cometchat-avatar>\n            </div>\n          </ng-template>\n          <ng-template #bubbleHeader>\n            <div *ngIf=\"getHeaderView(message);else defaultHeader\">\n              <ng-container\n                *ngTemplateOutlet=\"getHeaderView(message);context:{ $implicit: message }\">\n              </ng-container>\n            </div>\n            <ng-template #defaultHeader>\n              <div class=\"cc-message-list__bubble-header\"\n                *ngIf=\"message?.getCategory() != MessageCategory.action && showHeaderTitle(message) && message?.getCategory() != MessageCategory.call\">\n                <cometchat-label [text]=\"message?.getSender()?.getName()\"\n                  [labelStyle]=\"labelStyle\"></cometchat-label>\n                <cometchat-date [pattern]=\"datePattern\"\n                  [timestamp]=\"message?.getSentAt()\"\n                  [dateStyle]=\"getBubbleDateStyle(message)\"\n                  *ngIf=\"timestampAlignment == timestampEnum.top && message?.getSentAt()\"></cometchat-date>\n              </div>\n            </ng-template>\n          </ng-template>\n          <ng-template #threadView>\n            <div class=\"cc-message-list__threadreplies\"\n              *ngIf=\"message?.getReplyCount() && !message.getDeletedAt()\"\n              [ngStyle]=\"getThreadViewAlignment(message)\">\n              <cometchat-icon-button [iconURL]=\"threadIndicatorIcon\"\n                [mirrorIcon]=\"getThreadIconAlignment(message)\"\n                [buttonStyle]=\"getThreadViewStyle(message)\"\n                (cc-button-clicked)=\"openThreadView(message)\"\n                [text]='getThreadCount(message)'>\n                <!-- <span slot=\"buttonView\" [ngStyle]=\"getUnreadRepliesCountStyle()\"\n                  class=\"cc-message-list__unread-thread\"\n                  *ngIf=\"!message.getDeletedAt() && message.getUnreadReplyCount() > 0\">\n                  {{message.getUnreadReplyCount()}}\n                </span> -->\n\n              </cometchat-icon-button>\n            </div>\n          </ng-template>\n        </cometchat-message-bubble>\n      </div>\n    </div>\n    <div class=\"cc-message-list__bottom\" #bottom>\n    </div>\n\n  </div>\n  <div class=\"cc-message-list__message-indicator\"\n    *ngIf=\"UnreadCount && UnreadCount.length > 0 && !isOnBottom\"\n    [ngStyle]=\"{bottom: showSmartReply || footerView || showConversationStarter || showConversationSummary  ? '20%' : '13%'}\">\n    <cometchat-button [text]=\"newMessageCount\"\n      [buttonStyle]=\"unreadMessagesStyle\"\n      (cc-button-clicked)=\"scrollToBottom()\"></cometchat-button>\n  </div>\n  <div class=\"cc-message-list__footer-view\" [ngStyle]=\"{height:  'auto'}\">\n\n    <div *ngIf=\"footerView;else footer\">\n      <ng-container *ngTemplateOutlet=\"footerView\">\n      </ng-container>\n    </div>\n    <ng-template #footer>\n\n      <div class=\"cc-message-list__smart-replies\"\n        *ngIf=\"!showConversationStarter && showSmartReply && getReplies()\">\n        <smart-replies [smartReplyStyle]=\"smartReplyStyle\"\n          [replies]=\"getReplies()\" (cc-reply-clicked)=\"sendReply($event)\"\n          (cc-close-clicked)=\"closeSmartReply()\">\n        </smart-replies>\n      </div>\n\n\n      <div class=\"cc-message-list__conversation-starters\"\n        *ngIf=\"enableConversationStarter && showConversationStarter\">\n        <cometchat-ai-card [state]=\"conversationStarterState\"\n          [loadingStateText]=\"starterLoadingStateText\"\n          [emptyStateText]=\"starterEmptyStateText\"\n          [errorStateText]=\"errorStateText\">\n          <smart-replies\n            *ngIf=\"conversationStarterState == states.loaded && !parentMessageId\"\n            [smartReplyStyle]=\"conversationStarterStyle\"\n            [replies]=\"conversationStarterReplies\" slot=\"loadedView\"\n            (cc-reply-clicked)=\"sendConversationStarter($event)\"\n            [closeIconURL]=\"''\">\n          </smart-replies>\n        </cometchat-ai-card>\n      </div>\n\n      <div class=\"cc-message-list__conversation-summary\"\n        *ngIf=\"enableConversationSummary && showConversationSummary\">\n\n        <cometchat-ai-card [state]=\"conversationSummaryState\"\n          [loadingStateText]=\"summaryLoadingStateText\"\n          [emptyStateText]=\"summaryEmptyStateText\"\n          [errorStateText]=\"errorStateText\" [errorIconURL]=\"aiErrorIcon\"\n          [emptyIconURL]=\"aiEmptyIcon\">\n          <cometchat-panel\n            *ngIf=\"conversationSummaryState == states.loaded && !parentMessageId\"\n            slot=\"loadedView\" [panelStyle]=\"conversationSummaryStyle\"\n            title=\"Conversation Summary\" [text]=\"conversationSummary\"\n            (cc-close-clicked)=\"closeConversationSummary()\">\n          </cometchat-panel>\n        </cometchat-ai-card>\n\n      </div>\n\n    </ng-template>\n  </div>\n\n</div>\n<!-- default bubbles -->\n<ng-template #textBubble let-message>\n  <cometchat-text-bubble\n    *ngIf=\"message?.type == MessageTypesConstant.groupMember\"\n    [textStyle]=\"setTextBubbleStyle(message)\"\n    [text]=\"message?.message\"></cometchat-text-bubble>\n  <cometchat-text-bubble *ngIf=\"message?.getDeletedAt()\"\n    [textStyle]=\"setTextBubbleStyle(message)\"\n    [text]=\"localize('MESSAGE_IS_DELETED')\"></cometchat-text-bubble>\n  <cometchat-text-bubble\n    *ngIf=\"!isTranslated(message) && !getLinkPreview(message) && !message?.deletedAt && message?.type != MessageTypesConstant.groupMember\"\n    [textStyle]=\"setTextBubbleStyle(message)\" [text]=\"getTextMessage(message)\"\n    [textFormatters]=\"getTextFormatters(message)\"></cometchat-text-bubble>\n  <link-preview [linkPreviewStyle]=\"linkPreviewStyle\"\n    (cc-link-clicked)=\"openLinkURL($event)\"\n    *ngIf=\"!message?.getDeletedAt() && getLinkPreview(message) && enableLinkPreview\"\n    [title]=\"getLinkPreviewDetails('title',message)\"\n    [description]=\"getLinkPreviewDetails('description',message)\"\n    [URL]=\"getLinkPreviewDetails('url',message)\"\n    [image]=\"getLinkPreviewDetails('image',message)\"\n    [favIconURL]=\"getLinkPreviewDetails('favicon',message)\">\n    <cometchat-text-bubble\n      *ngIf=\"!isTranslated(message) && getLinkPreview(message) && !message?.deletedAt && message?.type != MessageTypesConstant.groupMember\"\n      [textStyle]=\"setTextBubbleStyle(message)\" [text]=\"getTextMessage(message)\"\n      [textFormatters]=\"getTextFormatters(message)\"></cometchat-text-bubble>\n  </link-preview>\n  <message-translation-bubble [alignment]=\"getBubbleAlignment(message)\"\n    *ngIf=\"isTranslated(message)\"\n    [messageTranslationStyle]=\"setTranslationStyle(message)\"\n    [translatedText]=\"isTranslated(message)\"\n    [textFormatters]=\"getTextFormatters(message)\">\n    <cometchat-text-bubble\n      *ngIf=\" !message?.deletedAt && message?.type != MessageTypesConstant.groupMember\"\n      [textStyle]=\"setTextBubbleStyle(message)\" [text]=\"message?.text\"\n      [textFormatters]=\"getTextFormatters(message)\"></cometchat-text-bubble>\n\n  </message-translation-bubble>\n</ng-template>\n<ng-template #fileBubble let-message>\n\n  <cometchat-file-bubble [fileStyle]=\"setFileBubbleStyle(message)\"\n    [downloadIconURL]=\"downloadIconURL\" [subtitle]=\"localize('SHARED_FILE')\"\n    [title]=\"message?.data?.attachments ? message?.data?.attachments[0]?.name: ''\"\n    [fileURL]=\"message?.data?.attachments ? message?.data?.attachments[0]?.url : ''\"></cometchat-file-bubble>\n</ng-template>\n<ng-template #audioBubble let-message>\n  <cometchat-icon-button [disabled]=\"true\"\n    *ngIf=\"message?.category == callConstant && message?.type == MessageTypesConstant.audio\"\n    [iconURL]=\"getCallTypeIcon(message)\"\n    [buttonStyle]=\"callStatusStyle(message)\"\n    [text]=\"getCallActionMessage(message)\"></cometchat-icon-button>\n  <cometchat-audio-bubble\n    *ngIf=\"!message.getDeletedAt() && message?.category != callConstant\"\n    [src]=\"message?.data?.attachments ? message?.data?.attachments[0]?.url : ''\">\n  </cometchat-audio-bubble>\n</ng-template>\n<ng-template #videoBubble let-message>\n  <cometchat-icon-button [disabled]=\"true\"\n    *ngIf=\"message?.category == callConstant && message?.type == MessageTypesConstant.video\"\n    [iconURL]=\"getCallTypeIcon(message)\"\n    [buttonStyle]=\"callStatusStyle(message)\"\n    [text]=\"getCallActionMessage(message)\"></cometchat-icon-button>\n\n  <cometchat-video-bubble\n    *ngIf=\"!message.getDeletedAt() && message?.category != callConstant\"\n    [videoStyle]=\"videoBubbleStyle\"\n    [src]=\"message?.data?.attachments ? message?.data?.attachments[0]?.url : ''\"\n    [poster]=\" getImageThumbnail(message)\"></cometchat-video-bubble>\n</ng-template>\n<ng-template #imageBubble let-message>\n  <image-moderation (cc-show-dialog)=\"openWarningDialog($event)\"\n    *ngIf=\"!message.getDeletedAt() && enableImageModeration\" [message]=\"message\"\n    [imageModerationStyle]=\"imageModerationStyle\">\n    <cometchat-image-bubble (cc-image-clicked)=\"openImageInFullScreen(message)\"\n      [imageStyle]=\"imageBubbleStyle\" [src]=\" getImageThumbnail(message)\"\n      [placeholderImage]=\"placeholderIconURL\"></cometchat-image-bubble>\n  </image-moderation>\n  <cometchat-image-bubble [imageStyle]=\"imageBubbleStyle\"\n    (cc-image-clicked)=\"openImageInFullScreen(message)\"\n    *ngIf=\"!message.getDeletedAt() && !enableImageModeration\"\n    [src]=\" getImageThumbnail(message)\"\n    [placeholderImage]=\"placeholderIconURL\"></cometchat-image-bubble>\n</ng-template>\n<ng-template #formBubble let-message>\n  <cometchat-form-bubble [message]=\"message\"\n    [formBubbleStyle]=\"getFormMessageBubbleStyle()\"></cometchat-form-bubble>\n</ng-template>\n<ng-template #cardBubble let-message>\n  <cometchat-card-bubble [message]=\"message\"\n    [cardBubbleStyle]=\"getCardMessageBubbleStyle()\"></cometchat-card-bubble>\n</ng-template>\n<ng-template #customTextBubble>\n</ng-template>\n<ng-template #stickerBubble let-message>\n  <cometchat-image-bubble [src]=\"getSticker(message)\"\n    [imageStyle]=\"imageBubbleStyle\"></cometchat-image-bubble>\n\n</ng-template>\n<ng-template #whiteboardBubble let-message>\n  <cometchat-document-bubble [hideSeparator]=\"false\"\n    [iconAlignment]=\"documentBubbleAlignment\"\n    [documentStyle]=\"documentBubbleStyle\" [URL]=\"getWhiteboardDocument(message)\"\n    [ccClicked]=\"launchCollaborativeWhiteboardDocument\"\n    [iconURL]=\"whiteboardIconURL\" [title]=\"whiteboardTitle\"\n    [buttonText]=\"whiteboardButtonText\"\n    [subtitle]=\"whiteboardSubitle\"></cometchat-document-bubble>\n\n</ng-template>\n<ng-template #documentBubble let-message>\n  <cometchat-document-bubble [hideSeparator]=\"false\"\n    [iconAlignment]=\"documentBubbleAlignment\"\n    [documentStyle]=\"documentBubbleStyle\" [URL]=\"getWhiteboardDocument(message)\"\n    [ccClicked]=\"launchCollaborativeWhiteboardDocument\"\n    [iconURL]=\"documentIconURL\" [title]=\"documentTitle\"\n    [buttonText]=\"documentButtonText\"\n    [subtitle]=\"documentSubitle\"></cometchat-document-bubble>\n\n</ng-template>\n<ng-template #directCalling let-message>\n  <cometchat-document-bubble [hideSeparator]=\"true\"\n    [iconAlignment]=\"callBubbleAlignment\"\n    [documentStyle]=\"getCallBubbleStyle(message)\" [URL]=\"getSessionId(message)\"\n    [ccClicked]=\"getStartCallFunction(message)\" [iconURL]=\"directCallIconURL\"\n    [title]=\"getCallBubbleTitle(message)\" [buttonText]=\"joinCallButtonText\"\n    *ngIf=\"message.category == 'custom'\"></cometchat-document-bubble>\n\n</ng-template>\n<ng-template #schedulerBubble let-message>\n  <cometchat-scheduler-bubble [schedulerMessage]=\"message\"\n    [loggedInUser]=\"loggedInUser\"\n    [schedulerBubbleStyle]=\"getSchedulerBubbleStyle(message)\"></cometchat-scheduler-bubble>\n\n</ng-template>\n<ng-template #pollBubble let-message>\n  <polls-bubble [pollStyle]=\"pollBubbleStyle\"\n    [pollQuestion]=\"getPollBubbleData(message,'question')\"\n    [pollId]=\"getPollBubbleData(message,'id')\" [loggedInUser]=\"loggedInUser\"\n    [senderUid]=\"getPollBubbleData(message)\"\n    [metadata]=\"message?.metadata\"></polls-bubble>\n\n</ng-template>\n\n<!-- thread bubble view -->\n<ng-template #threadMessageBubble let-message>\n  <div *ngIf=\"getBubbleWrapper(message)\">\n    <ng-container\n      *ngTemplateOutlet=\"getBubbleWrapper(message);context:{ $implicit: message }\">\n    </ng-container>\n  </div>\n  <cometchat-message-bubble *ngIf=\"!getBubbleWrapper(message)\"\n    [bottomView]=\"getBottomView(message)\"\n    [statusInfoView]=\"showStatusInfo(message) ?  statusInfoView : null\"\n    [leadingView]=\" showAvatar ? leadingView : null\" [headerView]=\"bubbleHeader\"\n    [footerView]=\"getFooterView(message)\" [contentView]=\"contentView\"\n    [id]=\"message?.getId() || message?.getMuid()\"\n    [messageBubbleStyle]=\"setMessageBubbleStyle(message)\"\n    [alignment]=\"threadedAlignment\">\n    <ng-template #contentView>\n      <ng-container\n        *ngTemplateOutlet=\"getContentView(message);context:{ $implicit: message }\">\n      </ng-container>\n    </ng-template>\n    <ng-template #statusInfoView>\n      <div class=\"cc-message-list__bubble-status-info\"\n        [ngStyle]=\"getStatusInfoStyle(message)\">\n        <div *ngIf=\"getStatusInfoView(message);else bubbleFooter\">\n          <ng-container\n            *ngTemplateOutlet=\"getStatusInfoView(message);context:{ $implicit: message }\">\n          </ng-container>\n        </div>\n        <ng-template #bubbleFooter>\n          <div class=\"cc-message-list__bubble-date\"\n            *ngIf=\"timestampAlignment == timestampEnum.bottom && message?.getCategory() != MessageCategory.action && message?.getCategory() != MessageCategory.call && message?.getSentAt()\">\n            <cometchat-date [timestamp]=\"message?.getSentAt()\"\n              [dateStyle]=\"getBubbleDateStyle(message)\" [pattern]=\"datePattern\">\n            </cometchat-date>\n          </div>\n          <div\n          *ngIf=\"shouldShowMessage(message, disableReceipt, hideReceipt)\"\n            class=\"cc-message-list__receipt\">\n            <cometchat-receipt [receipt]=\"getMessageReceipt(message)\"\n              [receiptStyle]=\"getReceiptStyle(message)\" [waitIcon]=\"waitIcon\"\n              [sentIcon]=\"sentIcon\" [deliveredIcon]=\"\"\n              [readIcon]=\"deliveredIcon\"\n              [errorIcon]=\"errorIcon\"></cometchat-receipt>\n          </div>\n        </ng-template>\n      </div>\n    </ng-template>\n    <ng-template #leadingView>\n      <div\n        *ngIf=\" message?.getCategory() != MessageCategory.action && showHeaderTitle(message)\">\n        <cometchat-avatar [name]=\"message?.getSender()?.getName()\"\n          [avatarStyle]=\"avatarStyle\"\n          [image]=\"message?.getSender()?.getAvatar()\">\n        </cometchat-avatar>\n      </div>\n    </ng-template>\n    <ng-template #bubbleHeader>\n      <div *ngIf=\"getHeaderView(message);else defaultHeader\">\n        <ng-container\n          *ngTemplateOutlet=\"getHeaderView(message);context:{ $implicit: message }\">\n        </ng-container>\n      </div>\n      <ng-template #defaultHeader>\n        <div class=\"cc-message-list__bubble-header\"\n          *ngIf=\"message?.getCategory() != MessageCategory.action && showHeaderTitle(message) && message?.getCategory() != MessageCategory.call\">\n          <cometchat-label [text]=\"message?.getSender()?.getName()\"\n            [labelStyle]=\"labelStyle\"></cometchat-label>\n          <cometchat-date [pattern]=\"datePattern\"\n            [timestamp]=\"message?.getSentAt()\"\n            [dateStyle]=\"getBubbleDateStyle(message)\"\n            *ngIf=\"timestampAlignment == timestampEnum.top && message?.getSentAt()\"></cometchat-date>\n        </div>\n      </ng-template>\n    </ng-template>\n  </cometchat-message-bubble>\n\n</ng-template>\n\n\n<!--  -->\n<cometchat-popover [popoverStyle]=\"popoverStyle\" #popoverRef\n  [placement]=\"keyboardAlignment\">\n  <cometchat-emoji-keyboard (cc-emoji-clicked)=\"addReaction($event)\"\n    slot=\"content\"\n    [emojiKeyboardStyle]=\"emojiKeyboardStyle\"></cometchat-emoji-keyboard>\n</cometchat-popover>\n<cometchat-backdrop *ngIf=\"openConfirmDialog\" [backdropStyle]=\"backdropStyle\">\n  <cometchat-confirm-dialog [title]=\"''\" [messageText]=\"warningText\"\n    (cc-confirm-clicked)=\"onConfirmClick()\" [cancelButtonText]=\"cancelText\"\n    [confirmButtonText]=\"confirmText\" (cc-cancel-clicked)=\"onCancelClick()\"\n    [confirmDialogStyle]=\"confirmDialogStyle\">\n\n  </cometchat-confirm-dialog>\n</cometchat-backdrop>\n<cometchat-full-screen-viewer (cc-close-clicked)=\"closeImageInFullScreen()\"\n  *ngIf=\"openFullscreenView\" [URL]=\"imageurlToOpen\"\n  [closeIconURL]=\"closeIconURL\" [fullScreenViewerStyle]=\"fullScreenViewerStyle\">\n\n</cometchat-full-screen-viewer>\n\n<!-- ongoing callscreen for direct call -->\n<cometchat-ongoing-call *ngIf=\"showOngoingCall\"\n  [callSettingsBuilder]=\"getCallBuilder()\" [ongoingCallStyle]=\"ongoingCallStyle\"\n  [sessionID]=\"sessionId\"></cometchat-ongoing-call>\n<!-- message information view -->\n<!-- thread bubble view -->\n<ng-template #messageinfoBubble let-message>\n  <div *ngIf=\"getBubbleWrapper(message)\">\n    <ng-container\n      *ngTemplateOutlet=\"getBubbleWrapper(message);context:{ $implicit: message }\">\n    </ng-container>\n  </div>\n  <cometchat-message-bubble *ngIf=\"!getBubbleWrapper(message)\"\n    [bottomView]=\"getBottomView(message)\"\n    [statusInfoView]=\"getStatusInfoView(message)\"\n    [footerView]=\"getFooterView(message)\"\n    [leadingView]=\"showAvatar ? leadingView : null\" [headerView]=\"bubbleHeader\"\n    [contentView]=\"contentView\" [id]=\"message?.getId() || message?.getMuid()\"\n    [messageBubbleStyle]=\"setMessageBubbleStyle(message)\"\n    [alignment]=\"messageInfoAlignment\">\n    <ng-template #contentView>\n      <ng-container\n        *ngTemplateOutlet=\"getContentView(message);context:{ $implicit: message }\">\n      </ng-container>\n    </ng-template>\n    <ng-template #leadingView>\n      <div\n        *ngIf=\" message?.getCategory() != MessageCategory.action && showHeaderTitle(message)\">\n        <cometchat-avatar [name]=\"message?.getSender()?.getName()\"\n          [avatarStyle]=\"avatarStyle\"\n          [image]=\"message?.getSender()?.getAvatar()\">\n        </cometchat-avatar>\n      </div>\n    </ng-template>\n    <ng-template #bubbleHeader>\n      <div *ngIf=\"getHeaderView(message);else defaultHeader\">\n        <ng-container\n          *ngTemplateOutlet=\"getHeaderView(message);context:{ $implicit: message }\">\n        </ng-container>\n      </div>\n      <ng-template #defaultHeader>\n        <div class=\"cc-message-list__bubble-header\"\n          *ngIf=\"message?.getCategory() != MessageCategory.action && showHeaderTitle(message) && message?.getCategory() != MessageCategory.call\">\n          <cometchat-label [text]=\"message?.getSender()?.getName()\"\n            [labelStyle]=\"labelStyle\"></cometchat-label>\n          <cometchat-date [pattern]=\"datePattern\"\n            [timestamp]=\"message?.getSentAt()\"\n            [dateStyle]=\"getBubbleDateStyle(message)\"\n            *ngIf=\"timestampAlignment == timestampEnum.top && message?.getSentAt()\"></cometchat-date>\n        </div>\n      </ng-template>\n    </ng-template>\n  </cometchat-message-bubble>\n\n</ng-template>\n<cometchat-backdrop *ngIf=\"openMessageInfoPage\" [backdropStyle]=\"backdropStyle\">\n  <cometchat-message-information\n    [closeIconURL]=\"messageInformationConfiguration.closeIconURL\"\n    [loadingStateView]=\"messageInformationConfiguration.loadingStateView\"\n    [errorStateView]=\"messageInformationConfiguration.errorStateView\"\n    [listItemStyle]=\"messageInformationConfiguration.listItemStyle\"\n    [emptyStateView]=\"messageInformationConfiguration.emptyStateView\"\n    [loadingIconURL]=\"messageInformationConfiguration.loadingIconURL\"\n    [readIcon]=\"messageInformationConfiguration.readIcon\"\n    [deliveredIcon]=\"messageInformationConfiguration.deliveredIcon\"\n    [onError]=\"messageInformationConfiguration.onError\"\n    [SubtitleView]=\"messageInformationConfiguration.subtitleView\"\n    [receiptDatePattern]=\"messageInformationConfiguration.receiptDatePattern\"\n    [listItemView]=\"messageInformationConfiguration.listItemView \"\n    [messageInformationStyle]=\"messageInformationConfiguration.messageInformationStyle\"\n    [onClose]=\"messageInformationConfiguration.onClose ??  closeMessageInfoPage\"\n    [bubbleView]=\"messageInformationConfiguration.bubbleView ?? messageinfoBubble\"\n    [message]=\"messageInfoObject\">\n\n  </cometchat-message-information>\n</cometchat-backdrop>\n", styles: [".cc-message-list{height:100%;width:100%;overflow-y:auto;overflow-x:hidden;position:relative}.cc-message-list__wrapper{height:100%;width:100%;display:flex;flex-direction:column;justify-content:space-between;overflow-y:hidden}.cc-message-list__bubble-status-info{display:flex;align-items:flex-end;width:100%;padding:0 8px 8px;box-sizing:border-box}cometchat-reactions{margin-top:-3px}.cc-message-list__unread-thread{margin-left:4px}.cc-message-list__date-container{text-align:center;margin:5px 0}.cc-message-list__smart-replies,.cc-message-list__conversation-starters{height:-moz-fit-content;height:fit-content;width:100%;position:absolute;bottom:0;z-index:1}.cc-message-list__conversation-summary{height:100%;position:relative;bottom:0;z-index:1;padding:.1px 14px}.cc-message-list__date{border-radius:10px;display:flex;justify-content:center}.cc-message-list__threadreplies{min-width:130px;width:100%;padding-top:4px;display:flex}.cc-message-list__message-indicator{height:25px;display:flex;align-items:center;justify-content:center;width:100%;bottom:10%;position:absolute}.cc-message-list__footer-view{z-index:1;position:relative;width:100%;box-sizing:border-box;margin-bottom:1px}.cc-message-list__decorator-message{margin:0;line-height:30px;word-wrap:break-word;padding:0 8px;width:100%;overflow:hidden;display:flex;align-items:center;justify-content:center;height:100%}.cc-message-list__footer__decorator-message{margin:0;line-height:30px;word-wrap:break-word;padding:0 8px 0 16px;width:100%;overflow:hidden;display:flex;align-items:center;justify-content:flex-start;height:100%}.cc-message-list::-webkit-scrollbar{background:transparent;width:8px}.cc-message-list::-webkit-scrollbar-thumb{background:#e8e5e5;border-radius:8px}.cc-message-list__footer-view-decorator{display:flex;flex-direction:row;column-gap:8px}.cc_panel_container{border:1px solid #6851d6}cometchat-scheduler-bubble{width:100%}.cc-message-list__bubble-reactions{width:100%;box-sizing:border-box}\n"] }]
         }], ctorParameters: function () { return [{ type: i0.NgZone }, { type: i0.ChangeDetectorRef }, { type: CometChatThemeService }]; }, propDecorators: { listScroll: [{
                 type: ViewChild,
                 args: ["listScroll", { static: false }]
@@ -12572,6 +12593,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImpo
                 type: Input
             }], disableReceipt: [{
                 type: Input
+            }], hideReceipt: [{
+                type: Input
             }], disableSoundForMessages: [{
                 type: Input
             }], customSoundForMessages: [{
@@ -14267,19 +14290,29 @@ class CometChatMessageComposerComponent {
         this.composerActions?.forEach((element) => {
             switch (element.id) {
                 case CometChatUIKitConstants.MessageTypes.audio:
-                    element.onClick = this.openAudioPicker;
+                    if (!element.onClick) {
+                        element.onClick = this.openAudioPicker;
+                    }
                     break;
                 case CometChatUIKitConstants.MessageTypes.video:
-                    element.onClick = this.openvideoPicker;
+                    if (!element.onClick) {
+                        element.onClick = this.openvideoPicker;
+                    }
                     break;
                 case CometChatUIKitConstants.MessageTypes.file:
-                    element.onClick = this.openFilePicker;
+                    if (!element.onClick) {
+                        element.onClick = this.openFilePicker;
+                    }
                     break;
                 case CometChatUIKitConstants.MessageTypes.image:
-                    element.onClick = this.openImagePicker;
+                    if (!element.onClick) {
+                        element.onClick = this.openImagePicker;
+                    }
                     break;
                 case "extension_poll":
-                    element.onClick = this.openCreatePolls;
+                    if (!element.onClick) {
+                        element.onClick = this.openCreatePolls;
+                    }
                     break;
             }
         });
@@ -14313,6 +14346,7 @@ class CometChatMessageComposerComponent {
         let messageTextWithMentionTags = this.checkForMentions(this.messageToBeEdited);
         this.text = "";
         this.inputRef?.nativeElement?.emptyInputField();
+        this.inputRef.nativeElement.text = "";
         this.text = this.messageToBeEdited.getText();
         this.editPreviewText = messageTextWithMentionTags;
         this.showPreview = true;
@@ -14623,11 +14657,13 @@ class CometChatMessageComposerComponent {
         return { receiverId: receiverId, receiverType: receiverType, isBlocked };
     }
     playAudio() {
-        if (this.customSoundForMessage) {
-            CometChatSoundManager.play(CometChatSoundManager.Sound.outgoingMessage, this.customSoundForMessage);
-        }
-        else {
-            CometChatSoundManager.play(CometChatSoundManager.Sound.outgoingMessage);
+        if (!this.disableSoundForMessages) {
+            if (this.customSoundForMessage) {
+                CometChatSoundManager.play(CometChatSoundManager.Sound.outgoingMessage, this.customSoundForMessage);
+            }
+            else {
+                CometChatSoundManager.play(CometChatSoundManager.Sound.outgoingMessage);
+            }
         }
     }
     /**
@@ -15623,10 +15659,10 @@ class CometChatThreadedMessagesComponent {
     }
 }
 CometChatThreadedMessagesComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: CometChatThreadedMessagesComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: CometChatThemeService }], target: i0.ɵɵFactoryTarget.Component });
-CometChatThreadedMessagesComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: CometChatThreadedMessagesComponent, selector: "cometchat-threaded-messages", inputs: { onClose: "onClose", onError: "onError", parentMessage: "parentMessage", title: "title", closeIconURL: "closeIconURL", bubbleView: "bubbleView", messageActionView: "messageActionView", messageListConfiguration: "messageListConfiguration", userMemberWrapperConfiguration: "userMemberWrapperConfiguration", messageComposerConfiguration: "messageComposerConfiguration", threadedMessagesStyle: "threadedMessagesStyle", hideMessageComposer: "hideMessageComposer", messageComposerView: "messageComposerView", messageListView: "messageListView", disableSoundForMessages: "disableSoundForMessages" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"cc-threaded-messages__wrapper\" [ngStyle]=\"wrapperStyle()\">\n  <div class=\"cc-threaded-messages__header\">\n    <div class=\"cc-threaded-messages__title\">\n      <cometchat-label [text]=\"title\"\n        [labelStyle]=\"titleStyle\"></cometchat-label>\n    </div>\n    <div class=\"cc-threaded-messages__close\">\n      <cometchat-button [iconURL]=\"closeIconURL\" [buttonStyle]=\"buttonStyle\"\n        (cc-button-clicked)=\"closeView()\"></cometchat-button>\n    </div>\n  </div>\n  <div class=\"cc-threaded-messages__bubble-view\">\n    <ng-container\n      *ngTemplateOutlet=\"bubbleView; context:{ $implicit: parentMessage }\">\n    </ng-container>\n  </div>\n  <div class=\"cc-threaded-messages__action-view\">\n    <ng-container\n      *ngTemplateOutlet=\"messageActionView; context:{ $implicit: parentMessage }\">\n    </ng-container>\n    <cometchat-button *ngIf=\"!messageActionView\" [text]=\"getThreadCount()\"\n      [buttonStyle]=\"actionButtonStyle\"></cometchat-button>\n  </div>\n  <div class=\"cc-threaded-messages__list\" *ngIf=\"!messageListView\">\n    <cometchat-message-list #messageListRef\n      [disableReactions]=\"messageListConfiguration?.disableReactions!\"\n      [emojiKeyboardStyle]=\"messageListConfiguration?.emojiKeyboardStyle!\"\n      [reactionsConfiguration]=\"messageListConfiguration?.reactionsConfiguration!\"\n      [threadIndicatorIcon]=\"messageListConfiguration?.threadIndicatorIcon!\"\n      [parentMessageId]=\"parentMessage?.getId()\"\n      [emptyStateView]=\"messageListConfiguration.emptyStateView\"\n      [loadingStateView]=\"messageListConfiguration.loadingStateView\"\n      [user]=\"user\" [group]=\"group\"\n      [errorStateView]=\"messageListConfiguration.errorStateView\"\n      [disableReceipt]=\"messageListConfiguration.disableReceipt\"\n      [readIcon]=\"messageListConfiguration.readIcon\"\n      [deliveredIcon]=\"messageListConfiguration.deliveredIcon\"\n      [sentIcon]=\"messageListConfiguration.sentIcon\"\n      [waitIcon]=\"messageListConfiguration.waitIcon\"\n      [loadingIconURL]=\"messageListConfiguration.loadingIconURL\"\n      [errorIcon]=\"messageListConfiguration.errorIcon\"\n      [alignment]=\"messageListConfiguration.alignment\"\n      [showAvatar]=\"messageListConfiguration.showAvatar\"\n      [datePattern]=\"messageListConfiguration.datePattern\"\n      [timestampAlignment]=\"messageListConfiguration.timestampAlignment\"\n      [DateSeparatorPattern]=\"messageListConfiguration.DateSeparatorPattern\"\n      [messageTypes]=\"messageListConfiguration.templates\"\n      [templates]=\"messageListConfiguration.templates\"\n      [messagesRequestBuilder]=\"messageListConfiguration.messagesRequestBuilder || requestBuilder\"\n      [thresholdValue]=\"messageListConfiguration.thresholdValue\"\n      [onThreadRepliesClick]=\"messageListConfiguration.onThreadRepliesClick\"\n      [headerView]=\"messageListConfiguration.headerView\"\n      [footerView]=\"messageListConfiguration.footerView\"\n      [avatarStyle]=\"messageListConfiguration.avatarStyle\"\n      [dateSeparatorStyle]=\"messageListConfiguration.dateSeparatorStyle\"\n      [messageListStyle]=\"messageListConfiguration.messageListStyle\"\n      [onError]=\"messageListConfiguration.onError\"\n      [hideError]=\"messageListConfiguration.hideError\"\n      [hideDateSeparator]=\"messageListConfiguration.hideDateSeparator\"\n      [disableSoundForMessages]=\"disableSoundForMessages\"\n      [disableMentions]=\"messageListConfiguration.disableMentions\"\n      [textFormatters]=\"messageListConfiguration?.textFormatters\">\n    </cometchat-message-list>\n  </div>\n  <ng-container *ngIf=\"messageListView\">\n    <ng-container\n      *ngTemplateOutlet=\"messageListView;context:{  user: user, group: group,parentMessage:parentMessage }\">\n    </ng-container>\n  </ng-container>\n  <div class=\"cc-threaded-messages__composer\"\n    *ngIf=\"!hideMessageComposer && !messageComposerView\">\n    <cometchat-message-composer #messageComposerRef\n      [parentMessageId]=\"parentMessage?.getId()\" [user]=\"user\" [group]=\"group\"\n      [text]=\"messageComposerConfiguration.text\"\n      [headerView]=\"messageComposerConfiguration.headerView\"\n      [onTextChange]=\"messageComposerConfiguration.onTextChange\"\n      [attachmentIconURL]=\"messageComposerConfiguration.attachmentIconURL\"\n      [attachmentOptions]=\"messageComposerConfiguration.attachmentOptions\"\n      [secondaryButtonView]=\"messageComposerConfiguration.secondaryButtonView\"\n      [auxilaryButtonView]=\"messageComposerConfiguration.auxilaryButtonView\"\n      [auxiliaryButtonsAlignment]=\"messageComposerConfiguration.auxiliaryButtonsAlignment\"\n      [sendButtonView]=\"messageComposerConfiguration.sendButtonView\"\n      [hideLiveReaction]=\"messageComposerConfiguration.hideLiveReaction\"\n      [LiveReactionIconURL]=\"messageComposerConfiguration.LiveReactionIconURL\"\n      [messageComposerStyle]=\"messageComposerConfiguration.messageComposerStyle\"\n      [onSendButtonClick]=\"messageComposerConfiguration.onSendButtonClick\"\n      [sendButtonIconURL]=\"messageComposerConfiguration.sendButtonIconURL\"\n      [onError]=\"messageComposerConfiguration.onError\"\n      [actionSheetStyle]=\"messageComposerConfiguration.actionSheetStyle\"\n      [userMemberWrapperConfiguration]=\"messageComposerConfiguration.userMemberWrapperConfiguration\"\n      [textFormatters]=\"messageComposerConfiguration?.textFormatters\"\n      [disableMentions]=\"messageComposerConfiguration.disableMentions\"\n      [mentionsWarningText]=\"messageComposerConfiguration?.mentionsWarningText\"\n      [mentionsWarningStyle]=\"messageComposerConfiguration?.mentionsWarningStyle\"\n      [emojiIconURL]=\"messageComposerConfiguration.emojiIconURL\"\n      [AIIconURL]=\"messageComposerConfiguration.AIIconURL\"\n      [hideVoiceRecording]=\"messageComposerConfiguration.hideVoiceRecording\"\n      [hideLayoutMode]=\"messageComposerConfiguration.hideLayoutMode\"\n      [AIOptionsStyle]=\"messageComposerConfiguration.AIOptionsStyle\"\n      [backdropStyle]=\"messageComposerConfiguration.backdropStyle\"\n      [mediaRecorderStyle]=\"messageComposerConfiguration.mediaRecorderStyle\"\n      [voiceRecordingCloseIconURL]=\"messageComposerConfiguration.voiceRecordingCloseIconURL\"\n      [voiceRecordingStartIconURL]=\"messageComposerConfiguration.voiceRecordingStartIconURL\"\n      [voiceRecordingStopIconURL]=\"messageComposerConfiguration.voiceRecordingStopIconURL\"\n      [voiceRecordingSubmitIconURL]=\"messageComposerConfiguration.voiceRecordingSubmitIconURL\"\n      [disableSoundForMessages]=\"disableSoundForMessages\"\n      >\n    </cometchat-message-composer>\n  </div>\n  <ng-container *ngIf=\"!hideMessageComposer && messageComposerView\">\n    <ng-container\n      *ngTemplateOutlet=\"messageComposerView;context:{  user: user, group: group,parentMessage:parentMessage }\">\n    </ng-container>\n  </ng-container>\n\n</div>\n", styles: ["*{box-sizing:border-box;margin:0;padding:0}.cc-threaded-messages__wrapper{display:flex;flex-direction:column;height:100%;overflow-y:auto}.cc-threaded-messages__header{height:8%;width:100%;display:flex;padding:16px;align-items:flex-start}.cc-threaded-messages__close{display:flex;align-items:center}.cc-threaded-messages__title{display:flex;align-items:center;justify-content:center;width:100%}.cc-threaded-messages__bubble-view{width:100%}.cc-threaded-messages__header{flex:0 0 auto}.cc-threaded-messages__list{flex:1 1 auto;min-height:65%}.cc-threaded-messages__composer{flex:0 0 auto;min-height:80px}\n"], components: [{ type: CometChatMessageListComponent, selector: "cometchat-message-list", inputs: ["hideError", "hideDateSeparator", "errorStateView", "loadingStateView", "emptyStateView", "errorStateText", "emptyStateText", "loadingIconURL", "user", "group", "disableReceipt", "disableSoundForMessages", "customSoundForMessages", "readIcon", "deliveredIcon", "sentIcon", "waitIcon", "errorIcon", "aiErrorIcon", "aiEmptyIcon", "alignment", "showAvatar", "datePattern", "timestampAlignment", "DateSeparatorPattern", "templates", "messagesRequestBuilder", "newMessageIndicatorText", "scrollToBottomOnNewMessages", "thresholdValue", "unreadMessageThreshold", "reactionsConfiguration", "disableReactions", "emojiKeyboardStyle", "apiConfiguration", "onThreadRepliesClick", "headerView", "footerView", "parentMessageId", "threadIndicatorIcon", "avatarStyle", "backdropStyle", "dateSeparatorStyle", "messageListStyle", "onError", "messageInformationConfiguration", "disableMentions", "textFormatters"] }, { type: CometChatMessageComposerComponent, selector: "cometchat-message-composer", inputs: ["user", "group", "disableSoundForMessages", "customSoundForMessage", "disableTypingEvents", "text", "placeholderText", "headerView", "onTextChange", "attachmentIconURL", "attachmentOptions", "secondaryButtonView", "auxilaryButtonView", "auxiliaryButtonsAlignment", "sendButtonView", "parentMessageId", "hideLiveReaction", "LiveReactionIconURL", "backButtonIconURL", "mentionsWarningText", "mentionsWarningStyle", "messageComposerStyle", "onSendButtonClick", "onError", "backdropStyle", "actionSheetStyle", "aiActionSheetStyle", "hideVoiceRecording", "mediaRecorderStyle", "aiOptionsStyle", "aiIconURL", "voiceRecordingIconURL", "voiceRecordingCloseIconURL", "voiceRecordingStartIconURL", "voiceRecordingStopIconURL", "voiceRecordingSubmitIconURL", "hideLayoutMode", "emojiIconURL", "userMemberWrapperConfiguration", "disableMentions", "textFormatters"], outputs: ["childEvent"] }], directives: [{ type: i3.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { type: i3.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+CometChatThreadedMessagesComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: CometChatThreadedMessagesComponent, selector: "cometchat-threaded-messages", inputs: { onClose: "onClose", onError: "onError", parentMessage: "parentMessage", title: "title", closeIconURL: "closeIconURL", bubbleView: "bubbleView", messageActionView: "messageActionView", messageListConfiguration: "messageListConfiguration", userMemberWrapperConfiguration: "userMemberWrapperConfiguration", messageComposerConfiguration: "messageComposerConfiguration", threadedMessagesStyle: "threadedMessagesStyle", hideMessageComposer: "hideMessageComposer", messageComposerView: "messageComposerView", messageListView: "messageListView", disableSoundForMessages: "disableSoundForMessages" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"cc-threaded-messages__wrapper\" [ngStyle]=\"wrapperStyle()\">\n  <div class=\"cc-threaded-messages__header\">\n    <div class=\"cc-threaded-messages__title\">\n      <cometchat-label [text]=\"title\"\n        [labelStyle]=\"titleStyle\"></cometchat-label>\n    </div>\n    <div class=\"cc-threaded-messages__close\">\n      <cometchat-button [iconURL]=\"closeIconURL\" [buttonStyle]=\"buttonStyle\"\n        (cc-button-clicked)=\"closeView()\"></cometchat-button>\n    </div>\n  </div>\n  <div class=\"cc-threaded-messages__bubble-view\">\n    <ng-container\n      *ngTemplateOutlet=\"bubbleView; context:{ $implicit: parentMessage }\">\n    </ng-container>\n  </div>\n  <div class=\"cc-threaded-messages__action-view\">\n    <ng-container\n      *ngTemplateOutlet=\"messageActionView; context:{ $implicit: parentMessage }\">\n    </ng-container>\n    <cometchat-button *ngIf=\"!messageActionView\" [text]=\"getThreadCount()\"\n      [buttonStyle]=\"actionButtonStyle\"></cometchat-button>\n  </div>\n  <div class=\"cc-threaded-messages__list\" *ngIf=\"!messageListView\">\n    <cometchat-message-list #messageListRef\n      [disableReactions]=\"messageListConfiguration?.disableReactions!\"\n      [emojiKeyboardStyle]=\"messageListConfiguration?.emojiKeyboardStyle!\"\n      [reactionsConfiguration]=\"messageListConfiguration?.reactionsConfiguration!\"\n      [threadIndicatorIcon]=\"messageListConfiguration?.threadIndicatorIcon!\"\n      [parentMessageId]=\"parentMessage?.getId()\"\n      [emptyStateView]=\"messageListConfiguration.emptyStateView\"\n      [loadingStateView]=\"messageListConfiguration.loadingStateView\"\n      [user]=\"user\" [group]=\"group\"\n      [errorStateView]=\"messageListConfiguration.errorStateView\"\n      [disableReceipt]=\"messageListConfiguration.disableReceipt\"\n      [hideReceipt]=\"messageListConfiguration.hideReceipt\"\n      [readIcon]=\"messageListConfiguration.readIcon\"\n      [deliveredIcon]=\"messageListConfiguration.deliveredIcon\"\n      [sentIcon]=\"messageListConfiguration.sentIcon\"\n      [waitIcon]=\"messageListConfiguration.waitIcon\"\n      [loadingIconURL]=\"messageListConfiguration.loadingIconURL\"\n      [errorIcon]=\"messageListConfiguration.errorIcon\"\n      [alignment]=\"messageListConfiguration.alignment\"\n      [showAvatar]=\"messageListConfiguration.showAvatar\"\n      [datePattern]=\"messageListConfiguration.datePattern\"\n      [timestampAlignment]=\"messageListConfiguration.timestampAlignment\"\n      [DateSeparatorPattern]=\"messageListConfiguration.DateSeparatorPattern\"\n      [messageTypes]=\"messageListConfiguration.templates\"\n      [templates]=\"messageListConfiguration.templates\"\n      [messagesRequestBuilder]=\"messageListConfiguration.messagesRequestBuilder || requestBuilder\"\n      [thresholdValue]=\"messageListConfiguration.thresholdValue\"\n      [onThreadRepliesClick]=\"messageListConfiguration.onThreadRepliesClick\"\n      [headerView]=\"messageListConfiguration.headerView\"\n      [footerView]=\"messageListConfiguration.footerView\"\n      [avatarStyle]=\"messageListConfiguration.avatarStyle\"\n      [dateSeparatorStyle]=\"messageListConfiguration.dateSeparatorStyle\"\n      [messageListStyle]=\"messageListConfiguration.messageListStyle\"\n      [onError]=\"messageListConfiguration.onError\"\n      [hideError]=\"messageListConfiguration.hideError\"\n      [hideDateSeparator]=\"messageListConfiguration.hideDateSeparator\"\n      [disableSoundForMessages]=\"disableSoundForMessages\"\n      [disableMentions]=\"messageListConfiguration.disableMentions\"\n      [textFormatters]=\"messageListConfiguration?.textFormatters\">\n    </cometchat-message-list>\n  </div>\n  <ng-container *ngIf=\"messageListView\">\n    <ng-container\n      *ngTemplateOutlet=\"messageListView;context:{  user: user, group: group,parentMessage:parentMessage }\">\n    </ng-container>\n  </ng-container>\n  <div class=\"cc-threaded-messages__composer\"\n    *ngIf=\"!hideMessageComposer && !messageComposerView\">\n    <cometchat-message-composer #messageComposerRef\n      [parentMessageId]=\"parentMessage?.getId()\" [user]=\"user\" [group]=\"group\"\n      [text]=\"messageComposerConfiguration.text\"\n      [headerView]=\"messageComposerConfiguration.headerView\"\n      [onTextChange]=\"messageComposerConfiguration.onTextChange\"\n      [attachmentIconURL]=\"messageComposerConfiguration.attachmentIconURL\"\n      [attachmentOptions]=\"messageComposerConfiguration.attachmentOptions\"\n      [secondaryButtonView]=\"messageComposerConfiguration.secondaryButtonView\"\n      [auxilaryButtonView]=\"messageComposerConfiguration.auxilaryButtonView\"\n      [auxiliaryButtonsAlignment]=\"messageComposerConfiguration.auxiliaryButtonsAlignment\"\n      [sendButtonView]=\"messageComposerConfiguration.sendButtonView\"\n      [hideLiveReaction]=\"messageComposerConfiguration.hideLiveReaction\"\n      [LiveReactionIconURL]=\"messageComposerConfiguration.LiveReactionIconURL\"\n      [messageComposerStyle]=\"messageComposerConfiguration.messageComposerStyle\"\n      [onSendButtonClick]=\"messageComposerConfiguration.onSendButtonClick\"\n      [sendButtonIconURL]=\"messageComposerConfiguration.sendButtonIconURL\"\n      [onError]=\"messageComposerConfiguration.onError\"\n      [actionSheetStyle]=\"messageComposerConfiguration.actionSheetStyle\"\n      [userMemberWrapperConfiguration]=\"messageComposerConfiguration.userMemberWrapperConfiguration\"\n      [textFormatters]=\"messageComposerConfiguration?.textFormatters\"\n      [disableMentions]=\"messageComposerConfiguration.disableMentions\"\n      [mentionsWarningText]=\"messageComposerConfiguration?.mentionsWarningText\"\n      [mentionsWarningStyle]=\"messageComposerConfiguration?.mentionsWarningStyle\"\n      [emojiIconURL]=\"messageComposerConfiguration.emojiIconURL\"\n      [AIIconURL]=\"messageComposerConfiguration.AIIconURL\"\n      [hideVoiceRecording]=\"messageComposerConfiguration.hideVoiceRecording\"\n      [hideLayoutMode]=\"messageComposerConfiguration.hideLayoutMode\"\n      [AIOptionsStyle]=\"messageComposerConfiguration.AIOptionsStyle\"\n      [backdropStyle]=\"messageComposerConfiguration.backdropStyle\"\n      [mediaRecorderStyle]=\"messageComposerConfiguration.mediaRecorderStyle\"\n      [voiceRecordingCloseIconURL]=\"messageComposerConfiguration.voiceRecordingCloseIconURL\"\n      [voiceRecordingStartIconURL]=\"messageComposerConfiguration.voiceRecordingStartIconURL\"\n      [voiceRecordingStopIconURL]=\"messageComposerConfiguration.voiceRecordingStopIconURL\"\n      [voiceRecordingSubmitIconURL]=\"messageComposerConfiguration.voiceRecordingSubmitIconURL\"\n      [disableSoundForMessages]=\"disableSoundForMessages\"\n      >\n    </cometchat-message-composer>\n  </div>\n  <ng-container *ngIf=\"!hideMessageComposer && messageComposerView\">\n    <ng-container\n      *ngTemplateOutlet=\"messageComposerView;context:{  user: user, group: group,parentMessage:parentMessage }\">\n    </ng-container>\n  </ng-container>\n\n</div>\n", styles: ["*{box-sizing:border-box;margin:0;padding:0}.cc-threaded-messages__wrapper{display:flex;flex-direction:column;height:100%;overflow-y:auto}.cc-threaded-messages__header{height:8%;width:100%;display:flex;padding:16px;align-items:flex-start}.cc-threaded-messages__close{display:flex;align-items:center}.cc-threaded-messages__title{display:flex;align-items:center;justify-content:center;width:100%}.cc-threaded-messages__bubble-view{width:100%}.cc-threaded-messages__header{flex:0 0 auto}.cc-threaded-messages__list{flex:1 1 auto;min-height:65%}.cc-threaded-messages__composer{flex:0 0 auto;min-height:80px}\n"], components: [{ type: CometChatMessageListComponent, selector: "cometchat-message-list", inputs: ["hideError", "hideDateSeparator", "errorStateView", "loadingStateView", "emptyStateView", "errorStateText", "emptyStateText", "loadingIconURL", "user", "group", "disableReceipt", "hideReceipt", "disableSoundForMessages", "customSoundForMessages", "readIcon", "deliveredIcon", "sentIcon", "waitIcon", "errorIcon", "aiErrorIcon", "aiEmptyIcon", "alignment", "showAvatar", "datePattern", "timestampAlignment", "DateSeparatorPattern", "templates", "messagesRequestBuilder", "newMessageIndicatorText", "scrollToBottomOnNewMessages", "thresholdValue", "unreadMessageThreshold", "reactionsConfiguration", "disableReactions", "emojiKeyboardStyle", "apiConfiguration", "onThreadRepliesClick", "headerView", "footerView", "parentMessageId", "threadIndicatorIcon", "avatarStyle", "backdropStyle", "dateSeparatorStyle", "messageListStyle", "onError", "messageInformationConfiguration", "disableMentions", "textFormatters"] }, { type: CometChatMessageComposerComponent, selector: "cometchat-message-composer", inputs: ["user", "group", "disableSoundForMessages", "customSoundForMessage", "disableTypingEvents", "text", "placeholderText", "headerView", "onTextChange", "attachmentIconURL", "attachmentOptions", "secondaryButtonView", "auxilaryButtonView", "auxiliaryButtonsAlignment", "sendButtonView", "parentMessageId", "hideLiveReaction", "LiveReactionIconURL", "backButtonIconURL", "mentionsWarningText", "mentionsWarningStyle", "messageComposerStyle", "onSendButtonClick", "onError", "backdropStyle", "actionSheetStyle", "aiActionSheetStyle", "hideVoiceRecording", "mediaRecorderStyle", "aiOptionsStyle", "aiIconURL", "voiceRecordingIconURL", "voiceRecordingCloseIconURL", "voiceRecordingStartIconURL", "voiceRecordingStopIconURL", "voiceRecordingSubmitIconURL", "hideLayoutMode", "emojiIconURL", "userMemberWrapperConfiguration", "disableMentions", "textFormatters"], outputs: ["childEvent"] }], directives: [{ type: i3.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { type: i3.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: CometChatThreadedMessagesComponent, decorators: [{
             type: Component,
-            args: [{ selector: "cometchat-threaded-messages", changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"cc-threaded-messages__wrapper\" [ngStyle]=\"wrapperStyle()\">\n  <div class=\"cc-threaded-messages__header\">\n    <div class=\"cc-threaded-messages__title\">\n      <cometchat-label [text]=\"title\"\n        [labelStyle]=\"titleStyle\"></cometchat-label>\n    </div>\n    <div class=\"cc-threaded-messages__close\">\n      <cometchat-button [iconURL]=\"closeIconURL\" [buttonStyle]=\"buttonStyle\"\n        (cc-button-clicked)=\"closeView()\"></cometchat-button>\n    </div>\n  </div>\n  <div class=\"cc-threaded-messages__bubble-view\">\n    <ng-container\n      *ngTemplateOutlet=\"bubbleView; context:{ $implicit: parentMessage }\">\n    </ng-container>\n  </div>\n  <div class=\"cc-threaded-messages__action-view\">\n    <ng-container\n      *ngTemplateOutlet=\"messageActionView; context:{ $implicit: parentMessage }\">\n    </ng-container>\n    <cometchat-button *ngIf=\"!messageActionView\" [text]=\"getThreadCount()\"\n      [buttonStyle]=\"actionButtonStyle\"></cometchat-button>\n  </div>\n  <div class=\"cc-threaded-messages__list\" *ngIf=\"!messageListView\">\n    <cometchat-message-list #messageListRef\n      [disableReactions]=\"messageListConfiguration?.disableReactions!\"\n      [emojiKeyboardStyle]=\"messageListConfiguration?.emojiKeyboardStyle!\"\n      [reactionsConfiguration]=\"messageListConfiguration?.reactionsConfiguration!\"\n      [threadIndicatorIcon]=\"messageListConfiguration?.threadIndicatorIcon!\"\n      [parentMessageId]=\"parentMessage?.getId()\"\n      [emptyStateView]=\"messageListConfiguration.emptyStateView\"\n      [loadingStateView]=\"messageListConfiguration.loadingStateView\"\n      [user]=\"user\" [group]=\"group\"\n      [errorStateView]=\"messageListConfiguration.errorStateView\"\n      [disableReceipt]=\"messageListConfiguration.disableReceipt\"\n      [readIcon]=\"messageListConfiguration.readIcon\"\n      [deliveredIcon]=\"messageListConfiguration.deliveredIcon\"\n      [sentIcon]=\"messageListConfiguration.sentIcon\"\n      [waitIcon]=\"messageListConfiguration.waitIcon\"\n      [loadingIconURL]=\"messageListConfiguration.loadingIconURL\"\n      [errorIcon]=\"messageListConfiguration.errorIcon\"\n      [alignment]=\"messageListConfiguration.alignment\"\n      [showAvatar]=\"messageListConfiguration.showAvatar\"\n      [datePattern]=\"messageListConfiguration.datePattern\"\n      [timestampAlignment]=\"messageListConfiguration.timestampAlignment\"\n      [DateSeparatorPattern]=\"messageListConfiguration.DateSeparatorPattern\"\n      [messageTypes]=\"messageListConfiguration.templates\"\n      [templates]=\"messageListConfiguration.templates\"\n      [messagesRequestBuilder]=\"messageListConfiguration.messagesRequestBuilder || requestBuilder\"\n      [thresholdValue]=\"messageListConfiguration.thresholdValue\"\n      [onThreadRepliesClick]=\"messageListConfiguration.onThreadRepliesClick\"\n      [headerView]=\"messageListConfiguration.headerView\"\n      [footerView]=\"messageListConfiguration.footerView\"\n      [avatarStyle]=\"messageListConfiguration.avatarStyle\"\n      [dateSeparatorStyle]=\"messageListConfiguration.dateSeparatorStyle\"\n      [messageListStyle]=\"messageListConfiguration.messageListStyle\"\n      [onError]=\"messageListConfiguration.onError\"\n      [hideError]=\"messageListConfiguration.hideError\"\n      [hideDateSeparator]=\"messageListConfiguration.hideDateSeparator\"\n      [disableSoundForMessages]=\"disableSoundForMessages\"\n      [disableMentions]=\"messageListConfiguration.disableMentions\"\n      [textFormatters]=\"messageListConfiguration?.textFormatters\">\n    </cometchat-message-list>\n  </div>\n  <ng-container *ngIf=\"messageListView\">\n    <ng-container\n      *ngTemplateOutlet=\"messageListView;context:{  user: user, group: group,parentMessage:parentMessage }\">\n    </ng-container>\n  </ng-container>\n  <div class=\"cc-threaded-messages__composer\"\n    *ngIf=\"!hideMessageComposer && !messageComposerView\">\n    <cometchat-message-composer #messageComposerRef\n      [parentMessageId]=\"parentMessage?.getId()\" [user]=\"user\" [group]=\"group\"\n      [text]=\"messageComposerConfiguration.text\"\n      [headerView]=\"messageComposerConfiguration.headerView\"\n      [onTextChange]=\"messageComposerConfiguration.onTextChange\"\n      [attachmentIconURL]=\"messageComposerConfiguration.attachmentIconURL\"\n      [attachmentOptions]=\"messageComposerConfiguration.attachmentOptions\"\n      [secondaryButtonView]=\"messageComposerConfiguration.secondaryButtonView\"\n      [auxilaryButtonView]=\"messageComposerConfiguration.auxilaryButtonView\"\n      [auxiliaryButtonsAlignment]=\"messageComposerConfiguration.auxiliaryButtonsAlignment\"\n      [sendButtonView]=\"messageComposerConfiguration.sendButtonView\"\n      [hideLiveReaction]=\"messageComposerConfiguration.hideLiveReaction\"\n      [LiveReactionIconURL]=\"messageComposerConfiguration.LiveReactionIconURL\"\n      [messageComposerStyle]=\"messageComposerConfiguration.messageComposerStyle\"\n      [onSendButtonClick]=\"messageComposerConfiguration.onSendButtonClick\"\n      [sendButtonIconURL]=\"messageComposerConfiguration.sendButtonIconURL\"\n      [onError]=\"messageComposerConfiguration.onError\"\n      [actionSheetStyle]=\"messageComposerConfiguration.actionSheetStyle\"\n      [userMemberWrapperConfiguration]=\"messageComposerConfiguration.userMemberWrapperConfiguration\"\n      [textFormatters]=\"messageComposerConfiguration?.textFormatters\"\n      [disableMentions]=\"messageComposerConfiguration.disableMentions\"\n      [mentionsWarningText]=\"messageComposerConfiguration?.mentionsWarningText\"\n      [mentionsWarningStyle]=\"messageComposerConfiguration?.mentionsWarningStyle\"\n      [emojiIconURL]=\"messageComposerConfiguration.emojiIconURL\"\n      [AIIconURL]=\"messageComposerConfiguration.AIIconURL\"\n      [hideVoiceRecording]=\"messageComposerConfiguration.hideVoiceRecording\"\n      [hideLayoutMode]=\"messageComposerConfiguration.hideLayoutMode\"\n      [AIOptionsStyle]=\"messageComposerConfiguration.AIOptionsStyle\"\n      [backdropStyle]=\"messageComposerConfiguration.backdropStyle\"\n      [mediaRecorderStyle]=\"messageComposerConfiguration.mediaRecorderStyle\"\n      [voiceRecordingCloseIconURL]=\"messageComposerConfiguration.voiceRecordingCloseIconURL\"\n      [voiceRecordingStartIconURL]=\"messageComposerConfiguration.voiceRecordingStartIconURL\"\n      [voiceRecordingStopIconURL]=\"messageComposerConfiguration.voiceRecordingStopIconURL\"\n      [voiceRecordingSubmitIconURL]=\"messageComposerConfiguration.voiceRecordingSubmitIconURL\"\n      [disableSoundForMessages]=\"disableSoundForMessages\"\n      >\n    </cometchat-message-composer>\n  </div>\n  <ng-container *ngIf=\"!hideMessageComposer && messageComposerView\">\n    <ng-container\n      *ngTemplateOutlet=\"messageComposerView;context:{  user: user, group: group,parentMessage:parentMessage }\">\n    </ng-container>\n  </ng-container>\n\n</div>\n", styles: ["*{box-sizing:border-box;margin:0;padding:0}.cc-threaded-messages__wrapper{display:flex;flex-direction:column;height:100%;overflow-y:auto}.cc-threaded-messages__header{height:8%;width:100%;display:flex;padding:16px;align-items:flex-start}.cc-threaded-messages__close{display:flex;align-items:center}.cc-threaded-messages__title{display:flex;align-items:center;justify-content:center;width:100%}.cc-threaded-messages__bubble-view{width:100%}.cc-threaded-messages__header{flex:0 0 auto}.cc-threaded-messages__list{flex:1 1 auto;min-height:65%}.cc-threaded-messages__composer{flex:0 0 auto;min-height:80px}\n"] }]
+            args: [{ selector: "cometchat-threaded-messages", changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"cc-threaded-messages__wrapper\" [ngStyle]=\"wrapperStyle()\">\n  <div class=\"cc-threaded-messages__header\">\n    <div class=\"cc-threaded-messages__title\">\n      <cometchat-label [text]=\"title\"\n        [labelStyle]=\"titleStyle\"></cometchat-label>\n    </div>\n    <div class=\"cc-threaded-messages__close\">\n      <cometchat-button [iconURL]=\"closeIconURL\" [buttonStyle]=\"buttonStyle\"\n        (cc-button-clicked)=\"closeView()\"></cometchat-button>\n    </div>\n  </div>\n  <div class=\"cc-threaded-messages__bubble-view\">\n    <ng-container\n      *ngTemplateOutlet=\"bubbleView; context:{ $implicit: parentMessage }\">\n    </ng-container>\n  </div>\n  <div class=\"cc-threaded-messages__action-view\">\n    <ng-container\n      *ngTemplateOutlet=\"messageActionView; context:{ $implicit: parentMessage }\">\n    </ng-container>\n    <cometchat-button *ngIf=\"!messageActionView\" [text]=\"getThreadCount()\"\n      [buttonStyle]=\"actionButtonStyle\"></cometchat-button>\n  </div>\n  <div class=\"cc-threaded-messages__list\" *ngIf=\"!messageListView\">\n    <cometchat-message-list #messageListRef\n      [disableReactions]=\"messageListConfiguration?.disableReactions!\"\n      [emojiKeyboardStyle]=\"messageListConfiguration?.emojiKeyboardStyle!\"\n      [reactionsConfiguration]=\"messageListConfiguration?.reactionsConfiguration!\"\n      [threadIndicatorIcon]=\"messageListConfiguration?.threadIndicatorIcon!\"\n      [parentMessageId]=\"parentMessage?.getId()\"\n      [emptyStateView]=\"messageListConfiguration.emptyStateView\"\n      [loadingStateView]=\"messageListConfiguration.loadingStateView\"\n      [user]=\"user\" [group]=\"group\"\n      [errorStateView]=\"messageListConfiguration.errorStateView\"\n      [disableReceipt]=\"messageListConfiguration.disableReceipt\"\n      [hideReceipt]=\"messageListConfiguration.hideReceipt\"\n      [readIcon]=\"messageListConfiguration.readIcon\"\n      [deliveredIcon]=\"messageListConfiguration.deliveredIcon\"\n      [sentIcon]=\"messageListConfiguration.sentIcon\"\n      [waitIcon]=\"messageListConfiguration.waitIcon\"\n      [loadingIconURL]=\"messageListConfiguration.loadingIconURL\"\n      [errorIcon]=\"messageListConfiguration.errorIcon\"\n      [alignment]=\"messageListConfiguration.alignment\"\n      [showAvatar]=\"messageListConfiguration.showAvatar\"\n      [datePattern]=\"messageListConfiguration.datePattern\"\n      [timestampAlignment]=\"messageListConfiguration.timestampAlignment\"\n      [DateSeparatorPattern]=\"messageListConfiguration.DateSeparatorPattern\"\n      [messageTypes]=\"messageListConfiguration.templates\"\n      [templates]=\"messageListConfiguration.templates\"\n      [messagesRequestBuilder]=\"messageListConfiguration.messagesRequestBuilder || requestBuilder\"\n      [thresholdValue]=\"messageListConfiguration.thresholdValue\"\n      [onThreadRepliesClick]=\"messageListConfiguration.onThreadRepliesClick\"\n      [headerView]=\"messageListConfiguration.headerView\"\n      [footerView]=\"messageListConfiguration.footerView\"\n      [avatarStyle]=\"messageListConfiguration.avatarStyle\"\n      [dateSeparatorStyle]=\"messageListConfiguration.dateSeparatorStyle\"\n      [messageListStyle]=\"messageListConfiguration.messageListStyle\"\n      [onError]=\"messageListConfiguration.onError\"\n      [hideError]=\"messageListConfiguration.hideError\"\n      [hideDateSeparator]=\"messageListConfiguration.hideDateSeparator\"\n      [disableSoundForMessages]=\"disableSoundForMessages\"\n      [disableMentions]=\"messageListConfiguration.disableMentions\"\n      [textFormatters]=\"messageListConfiguration?.textFormatters\">\n    </cometchat-message-list>\n  </div>\n  <ng-container *ngIf=\"messageListView\">\n    <ng-container\n      *ngTemplateOutlet=\"messageListView;context:{  user: user, group: group,parentMessage:parentMessage }\">\n    </ng-container>\n  </ng-container>\n  <div class=\"cc-threaded-messages__composer\"\n    *ngIf=\"!hideMessageComposer && !messageComposerView\">\n    <cometchat-message-composer #messageComposerRef\n      [parentMessageId]=\"parentMessage?.getId()\" [user]=\"user\" [group]=\"group\"\n      [text]=\"messageComposerConfiguration.text\"\n      [headerView]=\"messageComposerConfiguration.headerView\"\n      [onTextChange]=\"messageComposerConfiguration.onTextChange\"\n      [attachmentIconURL]=\"messageComposerConfiguration.attachmentIconURL\"\n      [attachmentOptions]=\"messageComposerConfiguration.attachmentOptions\"\n      [secondaryButtonView]=\"messageComposerConfiguration.secondaryButtonView\"\n      [auxilaryButtonView]=\"messageComposerConfiguration.auxilaryButtonView\"\n      [auxiliaryButtonsAlignment]=\"messageComposerConfiguration.auxiliaryButtonsAlignment\"\n      [sendButtonView]=\"messageComposerConfiguration.sendButtonView\"\n      [hideLiveReaction]=\"messageComposerConfiguration.hideLiveReaction\"\n      [LiveReactionIconURL]=\"messageComposerConfiguration.LiveReactionIconURL\"\n      [messageComposerStyle]=\"messageComposerConfiguration.messageComposerStyle\"\n      [onSendButtonClick]=\"messageComposerConfiguration.onSendButtonClick\"\n      [sendButtonIconURL]=\"messageComposerConfiguration.sendButtonIconURL\"\n      [onError]=\"messageComposerConfiguration.onError\"\n      [actionSheetStyle]=\"messageComposerConfiguration.actionSheetStyle\"\n      [userMemberWrapperConfiguration]=\"messageComposerConfiguration.userMemberWrapperConfiguration\"\n      [textFormatters]=\"messageComposerConfiguration?.textFormatters\"\n      [disableMentions]=\"messageComposerConfiguration.disableMentions\"\n      [mentionsWarningText]=\"messageComposerConfiguration?.mentionsWarningText\"\n      [mentionsWarningStyle]=\"messageComposerConfiguration?.mentionsWarningStyle\"\n      [emojiIconURL]=\"messageComposerConfiguration.emojiIconURL\"\n      [AIIconURL]=\"messageComposerConfiguration.AIIconURL\"\n      [hideVoiceRecording]=\"messageComposerConfiguration.hideVoiceRecording\"\n      [hideLayoutMode]=\"messageComposerConfiguration.hideLayoutMode\"\n      [AIOptionsStyle]=\"messageComposerConfiguration.AIOptionsStyle\"\n      [backdropStyle]=\"messageComposerConfiguration.backdropStyle\"\n      [mediaRecorderStyle]=\"messageComposerConfiguration.mediaRecorderStyle\"\n      [voiceRecordingCloseIconURL]=\"messageComposerConfiguration.voiceRecordingCloseIconURL\"\n      [voiceRecordingStartIconURL]=\"messageComposerConfiguration.voiceRecordingStartIconURL\"\n      [voiceRecordingStopIconURL]=\"messageComposerConfiguration.voiceRecordingStopIconURL\"\n      [voiceRecordingSubmitIconURL]=\"messageComposerConfiguration.voiceRecordingSubmitIconURL\"\n      [disableSoundForMessages]=\"disableSoundForMessages\"\n      >\n    </cometchat-message-composer>\n  </div>\n  <ng-container *ngIf=\"!hideMessageComposer && messageComposerView\">\n    <ng-container\n      *ngTemplateOutlet=\"messageComposerView;context:{  user: user, group: group,parentMessage:parentMessage }\">\n    </ng-container>\n  </ng-container>\n\n</div>\n", styles: ["*{box-sizing:border-box;margin:0;padding:0}.cc-threaded-messages__wrapper{display:flex;flex-direction:column;height:100%;overflow-y:auto}.cc-threaded-messages__header{height:8%;width:100%;display:flex;padding:16px;align-items:flex-start}.cc-threaded-messages__close{display:flex;align-items:center}.cc-threaded-messages__title{display:flex;align-items:center;justify-content:center;width:100%}.cc-threaded-messages__bubble-view{width:100%}.cc-threaded-messages__header{flex:0 0 auto}.cc-threaded-messages__list{flex:1 1 auto;min-height:65%}.cc-threaded-messages__composer{flex:0 0 auto;min-height:80px}\n"] }]
         }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }, { type: CometChatThemeService }]; }, propDecorators: { onClose: [{
                 type: Input
             }], onError: [{
@@ -16127,6 +16163,7 @@ class CometChatDetailsComponent {
         this.deleteGroupModal = false;
         this.subtitleText = "";
         this.userListenerId = "userlist_" + new Date().getTime();
+        this.membersListenerId = "memberlist_" + new Date().getTime();
         this.checkStatusType = () => {
             if (this.user) {
                 let userStatusVisibility = !this.disableUsersPresence && !new MessageUtils().getUserStatusVisibility(this.user);
@@ -16156,6 +16193,12 @@ class CometChatDetailsComponent {
             this.openBannedMembersPage = !this.openBannedMembersPage;
             this.ref.detectChanges();
         };
+        this.onBackForAddMembers = () => {
+            this.addMembers();
+            if (this.addMembersConfiguration?.onBack) {
+                this.addMembersConfiguration?.onBack();
+            }
+        };
         this.openTransferOwnership = () => {
             this.openTransferOwnershipModal = !this.openTransferOwnershipModal;
             this.confirmLeaveGroupModal = false;
@@ -16260,6 +16303,7 @@ class CometChatDetailsComponent {
     }
     removeListener() {
         CometChat.removeUserListener(this.userListenerId);
+        CometChat.removeGroupListener(this.membersListenerId);
     }
     ngOnDestroy() {
         this.removeListener();
@@ -16278,7 +16322,6 @@ class CometChatDetailsComponent {
         this.ccGroupMemberAdded = CometChatGroupEvents.ccGroupMemberAdded.subscribe((item) => {
             this.group = item?.userAddedIn;
             this.group = item?.userAddedIn;
-            this.openAddMembersPage = false;
             this.updateSubtitle();
             this.ref.detectChanges();
         });
@@ -16373,6 +16416,15 @@ class CometChatDetailsComponent {
                     },
                 }));
             }
+            CometChat.addGroupListener(this.membersListenerId, new CometChat.GroupListener({
+                onGroupMemberScopeChanged: (message, changedUser, newScope, oldScope, changedGroup) => {
+                    if (changedUser.getUid() == this.loggedInUser?.getUid()) {
+                        changedGroup.setScope(newScope);
+                        this.group = changedGroup;
+                        this.getTemplate();
+                    }
+                },
+            }));
         }
         catch (error) {
             if (this.onError) {
@@ -16662,10 +16714,10 @@ class CometChatDetailsComponent {
     }
 }
 CometChatDetailsComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: CometChatDetailsComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: CometChatThemeService }], target: i0.ɵɵFactoryTarget.Component });
-CometChatDetailsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: CometChatDetailsComponent, selector: "cometchat-details", inputs: { group: "group", user: "user", title: "title", closeButtonIconURL: "closeButtonIconURL", hideProfile: "hideProfile", subtitleView: "subtitleView", customProfileView: "customProfileView", data: "data", disableUsersPresence: "disableUsersPresence", privateGroupIcon: "privateGroupIcon", protectedGroupIcon: "protectedGroupIcon", passwordGroupIcon: "passwordGroupIcon", onError: "onError", onClose: "onClose", leaveGroupConfirmButtonText: "leaveGroupConfirmButtonText", leaveGroupCancelButtonText: "leaveGroupCancelButtonText", leaveGroupDialogMessage: "leaveGroupDialogMessage", leaveGroupDialogStyle: "leaveGroupDialogStyle", deleteGroupConfirmButtonText: "deleteGroupConfirmButtonText", deleteGroupDialogMessage: "deleteGroupDialogMessage", deleteGroupCancelButtonText: "deleteGroupCancelButtonText", deleteGroupDialogStyle: "deleteGroupDialogStyle", transferOwnershipConfirmButtonText: "transferOwnershipConfirmButtonText", transferOwnershipDialogMessage: "transferOwnershipDialogMessage", transferOwnershipCancelButtonText: "transferOwnershipCancelButtonText", transferOwnershipDialogStyle: "transferOwnershipDialogStyle", addMembersConfiguration: "addMembersConfiguration", bannedMembersConfiguration: "bannedMembersConfiguration", groupMembersConfiguration: "groupMembersConfiguration", transferOwnershipConfiguration: "transferOwnershipConfiguration", statusIndicatorStyle: "statusIndicatorStyle", backdropStyle: "backdropStyle", avatarStyle: "avatarStyle", detailsStyle: "detailsStyle", listItemStyle: "listItemStyle" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"cc-details__wrapper\" *ngIf=\"user || group\"\n  [ngStyle]=\"wrapperStyle()\">\n  <div class=\"cc-details__header\">\n    <cometchat-label [text]=\"title\"\n      [labelStyle]=\"getTitleStyle()\"></cometchat-label>\n    <cometchat-button [iconURL]=\"closeButtonIconURL\"\n      class=\"cc-details__close-button\" [buttonStyle]=\"closeButtonStyle\"\n      (cc-button-clicked)=\"onCloseDetails()\"></cometchat-button>\n  </div>\n  <div class=\"cc-details\" [ngStyle]=\"marginStyle()\">\n    <div class=\"cc-details__profile\" *ngIf=\"!hideProfile\">\n      <cometchat-list-item *ngIf=\"!customProfileView;else listitem\"\n        [avatarName]=\"user?.getName() ?? this.group?.getName()\"\n        [avatarURL]=\"this.user?.getAvatar() ?? this.group?.getIcon()\"\n        [listItemStyle]=\"listItemStyle\"\n        [statusIndicatorColor]=\"checkStatusType()\"\n        [statusIndicatorIcon]=\"checkGroupType()\"\n        [title]=\"this.user?.getName() ?? this.group?.getName()\"\n        [hideSeparator]=\"false\" [statusIndicatorStyle]=\"statusIndicatorStyle\"\n        [avatarStyle]=\"avatarStyle\">\n        <div slot=\"subtitleView\">\n          <div *ngIf=\"!subtitleView; else subtitle\">\n            <cometchat-label [text]=\"subtitleText\"\n              [labelStyle]=\"subtitleStyle()\">\n            </cometchat-label>\n          </div>\n          <ng-template #subtitle>\n            <ng-container\n              *ngTemplateOutlet=\"subtitleView;context:{ $implicit: user ?? group }\">\n            </ng-container>\n          </ng-template>\n        </div>\n      </cometchat-list-item>\n    </div>\n    <div class=\"cc-details__section-list\"\n      *ngIf=\"defaultTemplate && defaultTemplate.length > 0\">\n      <div class=\"cc-details__section\" *ngFor=\"let item of defaultTemplate\">\n        <div class=\"cc-details__section-separator\" *ngIf=\"item.title\">\n          <cometchat-label [text]=\"item.title\"\n            [labelStyle]=\"getSectionHeaderStyle(item)\"></cometchat-label>\n        </div>\n        <div class=\"cc-details__options-wrapper\"\n          *ngIf=\"getTemplateOptions(item)\">\n          <div class=\"cc-details__options\"\n            *ngFor=\"let option of getTemplateOptions(item)\">\n            <div class=\"cc-details__option\"\n              *ngIf=\"!getCustomOptionView(option);else customView\"\n              (click)=\"onOptionClick(option)\">\n              <div class=\"cc-details__option-title\">\n                <cometchat-button [text]=\"option.title\"\n                  [buttonStyle]=\"getButtonStyle(option)\"></cometchat-button>\n                <div class=\"cc-details__option-tail\" *ngIf=\"option?.tail\">\n                  <ng-container *ngTemplateOutlet=\"option?.tail\"></ng-container>\n                </div>\n              </div>\n              <cometchat-divider\n                [dividerStyle]=\"dividerStyle\"></cometchat-divider>\n            </div>\n            <ng-template #customView>\n              <ng-container *ngTemplateOutlet=\"getCustomOptionView(option)\">\n              </ng-container>\n            </ng-template>\n          </div>\n        </div>\n      </div>\n    </div>\n  </div>\n</div>\n<ng-template #listitem>\n  <ng-container *ngTemplateOutlet=\"customProfileView\">\n  </ng-container>\n</ng-template>\n<div class=\"cc-details__view\" *ngIf=\"openAddMembersPage\">\n  <cometchat-add-members\n    [titleAlignment]=\"addMembersConfiguration?.titleAlignment!\"\n    [listItemStyle]=\"addMembersConfiguration?.listItemStyle!\"\n    [addMembersStyle]=\"addMembersConfiguration?.addMembersStyle!\"\n    [avatarStyle]=\"addMembersConfiguration?.avatarStyle!\"\n    [statusIndicatorStyle]=\"addMembersConfiguration?.statusIndicatorStyle!\"\n    [loadingStateView]=\"addMembersConfiguration?.loadingStateView!\"\n    [loadingIconURL]=\"addMembersConfiguration?.loadingIconURL!\"\n    [errorStateView]=\"addMembersConfiguration?.errorStateView\"\n    [emptyStateView]=\"addMembersConfiguration?.emptyStateView\"\n    [onSelect]=\"addMembersConfiguration?.onSelect!\"\n    [onError]=\"addMembersConfiguration?.onError!\"\n    [hideError]=\"addMembersConfiguration?.hideError!\"\n    [hideSearch]=\"addMembersConfiguration?.hideSearch!\"\n    [searchIconURL]=\"addMembersConfiguration?.searchIconURL!\"\n    [selectionMode]=\"addMembersConfiguration?.selectionMode!\"\n    [hideSeparator]=\"addMembersConfiguration?.hideSeparator!\"\n    [showBackButton]=\"addMembersConfiguration?.showBackButton!\"\n    [showSectionHeader]=\"addMembersConfiguration?.showSectionHeader!\"\n    [onAddMembersButtonClick]=\"addMembersConfiguration?.onAddMembersButtonClick!\"\n    [usersConfiguration]=\"addMembersConfiguration?.usersConfiguration\"\n    [backButtonIconURL]=\"addMembersConfiguration?.backButtonIconURL!\"\n    [sectionHeaderField]=\"addMembersConfiguration?.sectionHeaderField!\"\n    [closeButtonIconURL]=\"addMembersConfiguration?.closeButtonIconURL!\"\n    [options]=\"addMembersConfiguration?.options!\"\n    [menu]=\"addMembersConfiguration?.menu\"\n    [disableUsersPresence]=\"addMembersConfiguration?.disableUsersPresence!\"\n    [subtitleView]=\"addMembersConfiguration?.subtitleView\" [group]=\"group\"\n    [selectionMode]=\"selectionmodeEnum\"\n    [onClose]=\"addMembersConfiguration?.onClose || onCloseDetails\"\n    [onBack]=\"addMembersConfiguration?.onBack || addMembers\"\n    [usersRequestBuilder]=\"addMembersConfiguration?.usersRequestBuilder!\"\n    [searchRequestBuilder]=\"addMembersConfiguration?.usersRequestBuilder!\"\n    [listItemView]=\"addMembersConfiguration?.listItemView\">\n  </cometchat-add-members>\n</div>\n<div class=\"cc-details__view\" *ngIf=\"openBannedMembersPage\">\n  <cometchat-banned-members\n    [listItemView]=\"bannedMembersConfiguration?.listItemView\"\n    [bannedMembersRequestBuilder]=\"bannedMembersConfiguration?.bannedMembersRequestBuilder!\"\n    [searchRequestBuilder]=\"bannedMembersConfiguration?.searchRequestBuilder!\"\n    [titleAlignment]=\"bannedMembersConfiguration.titleAlignment\"\n    [listItemStyle]=\"bannedMembersConfiguration.listItemStyle\"\n    [bannedMembersStyle]=\"bannedMembersConfiguration.bannedMembersStyle\"\n    [avatarStyle]=\"bannedMembersConfiguration.avatarStyle\"\n    [statusIndicatorStyle]=\"bannedMembersConfiguration.statusIndicatorStyle\"\n    [loadingStateView]=\"bannedMembersConfiguration.loadingStateView\"\n    [loadingIconURL]=\"bannedMembersConfiguration.loadingIconURL\"\n    [errorStateView]=\"bannedMembersConfiguration.errorStateView\"\n    [emptyStateView]=\"bannedMembersConfiguration.emptyStateView\"\n    [onSelect]=\"bannedMembersConfiguration.onSelect\"\n    [onError]=\"bannedMembersConfiguration.onError\"\n    [hideError]=\"bannedMembersConfiguration.hideError\"\n    [hideSearch]=\"bannedMembersConfiguration.hideSearch\"\n    [searchIconURL]=\"bannedMembersConfiguration.searchIconURL\"\n    [selectionMode]=\"bannedMembersConfiguration.selectionMode\"\n    [hideSeparator]=\"bannedMembersConfiguration.hideSeparator\"\n    [showBackButton]=\"bannedMembersConfiguration.showBackButton\"\n    [backButtonIconURL]=\"bannedMembersConfiguration.backButtonIconURL\"\n    [closeButtonIconURL]=\"bannedMembersConfiguration.closeButtonIconURL\"\n    [options]=\"bannedMembersConfiguration.options\"\n    [menu]=\"bannedMembersConfiguration.menu\"\n    [disableUsersPresence]=\"bannedMembersConfiguration.disableUsersPresence\"\n    [subtitleView]=\"bannedMembersConfiguration.subtitleView\" [group]=\"group\"\n    [onClose]=\"onCloseDetails\"\n    [onBack]=\"bannedMembersConfiguration.onBack || bannedMembers\">\n  </cometchat-banned-members>\n</div>\n<div class=\"cc-details__view\" *ngIf=\"openViewMembersPage\">\n  <cometchat-group-members\n    [groupMembersRequestBuilder]=\"groupMembersConfiguration?.groupMembersRequestBuilder!\"\n    [searchRequestBuilder]=\"groupMembersConfiguration?.searchRequestBuilder!\"\n    [titleAlignment]=\"groupMembersConfiguration.titleAlignment\"\n    [listItemStyle]=\"groupMembersConfiguration.listItemStyle\"\n    [groupMembersStyle]=\"groupMembersConfiguration.groupMembersStyle\"\n    [avatarStyle]=\"groupMembersConfiguration.avatarStyle\"\n    [statusIndicatorStyle]=\"groupMembersConfiguration.statusIndicatorStyle\"\n    [loadingStateView]=\"groupMembersConfiguration.loadingStateView\"\n    [loadingIconURL]=\"groupMembersConfiguration.loadingIconURL\"\n    [errorStateView]=\"groupMembersConfiguration.errorStateView\"\n    [emptyStateView]=\"groupMembersConfiguration.emptyStateView\"\n    [onSelect]=\"groupMembersConfiguration.onSelect\"\n    [onError]=\"groupMembersConfiguration.onError\"\n    [hideError]=\"groupMembersConfiguration.hideError\"\n    [hideSearch]=\"groupMembersConfiguration.hideSearch\"\n    [searchIconURL]=\"groupMembersConfiguration.searchIconURL\"\n    [selectionMode]=\"groupMembersConfiguration.selectionMode\"\n    [backdropStyle]=\"groupMembersConfiguration.backdropStyle\"\n    [hideSeparator]=\"groupMembersConfiguration.hideSeparator\"\n    [showBackButton]=\"groupMembersConfiguration.showBackButton\"\n    [backButtonIconURL]=\"groupMembersConfiguration.backButtonIconURL\"\n    [closeButtonIconURL]=\"groupMembersConfiguration.closeButtonIconURL\"\n    [options]=\"groupMembersConfiguration.options\"\n    [menu]=\"groupMembersConfiguration.menu\"\n    [disableUsersPresence]=\"groupMembersConfiguration.disableUsersPresence\"\n    [subtitleView]=\"groupMembersConfiguration.subtitleView\"\n    [groupScopeStyle]=\"groupMembersConfiguration.groupScopeStyle\"\n    [group]=\"group\"\n    [onClose]=\" groupMembersConfiguration.onClose || onCloseDetails\"\n    [onBack]=\"groupMembersConfiguration.onBack || viewMembers\">\n  </cometchat-group-members>\n</div>\n\n<cometchat-backdrop [backdropStyle]=\"backdropStyle\"\n  *ngIf=\"confirmLeaveGroupModal\">\n  <cometchat-confirm-dialog [title]=\"''\" [messageText]=\"leaveGroupDialogMessage\"\n    [cancelButtonText]=\"leaveGroupCancelButtonText\"\n    [confirmButtonText]=\"leaveGroupConfirmButtonText\"\n    (cc-confirm-clicked)=\"onLeaveClick()\" (cc-cancel-clicked)=\"onCancelClick()\"\n    [confirmDialogStyle]=\"leaveGroupDialogStyle\">\n  </cometchat-confirm-dialog>\n</cometchat-backdrop>\n<cometchat-backdrop [backdropStyle]=\"backdropStyle\" *ngIf=\"showTransferDialog\">\n  <cometchat-confirm-dialog [title]=\"''\"\n    [messageText]=\"transferOwnershipDialogMessage\"\n    [cancelButtonText]=\"transferOwnershipCancelButtonText\"\n    [confirmButtonText]=\"transferOwnershipConfirmButtonText\"\n    (cc-confirm-clicked)=\"onTransferClick()\"\n    (cc-cancel-clicked)=\"onCancelClick()\"\n    [confirmDialogStyle]=\"transferOwnershipDialogStyle\">\n  </cometchat-confirm-dialog>\n</cometchat-backdrop>\n<cometchat-backdrop [backdropStyle]=\"backdropStyle\"\n  *ngIf=\"openTransferOwnershipModal\">\n  <cometchat-transfer-ownership\n    [groupMembersRequestBuilder]=\"transferOwnershipConfiguration?.groupMembersRequestBuilder\"\n    [transferOwnershipStyle]=\"transferOwnershipConfiguration.transferOwnershipStyle\"\n    [onTransferOwnership]=\"transferOwnershipConfiguration.onTransferOwnership\"\n    [titleAlignment]=\"transferOwnershipConfiguration.titleAlignment\"\n    [listItemStyle]=\"transferOwnershipConfiguration.listItemStyle\"\n    [avatarStyle]=\"transferOwnershipConfiguration.avatarStyle\"\n    [statusIndicatorStyle]=\"transferOwnershipConfiguration.statusIndicatorStyle\"\n    [loadingStateView]=\"transferOwnershipConfiguration.loadingStateView\"\n    [loadingIconURL]=\"transferOwnershipConfiguration.loadingIconURL\"\n    [errorStateView]=\"transferOwnershipConfiguration.errorStateView\"\n    [emptyStateView]=\"transferOwnershipConfiguration.emptyStateView\"\n    [onError]=\"transferOwnershipConfiguration.onError\"\n    [hideSearch]=\"transferOwnershipConfiguration.hideSearch\"\n    [searchIconURL]=\"transferOwnershipConfiguration.searchIconURL\"\n    [hideSeparator]=\"transferOwnershipConfiguration.hideSeparator\"\n    [closeButtonIconURL]=\"transferOwnershipConfiguration.closeButtonIconURL\"\n    [options]=\"transferOwnershipConfiguration.options\"\n    [disableUsersPresence]=\"transferOwnershipConfiguration.disableUsersPresence\"\n    [subtitleView]=\"transferOwnershipConfiguration.subtitleView\" [group]=\"group\"\n    [onClose]=\"transferOwnershipConfiguration.onClose || openTransferOwnership\">\n  </cometchat-transfer-ownership>\n</cometchat-backdrop>\n<cometchat-backdrop [backdropStyle]=\"backdropStyle\" *ngIf=\"deleteGroupModal\">\n  <cometchat-confirm-dialog [title]=\"''\"\n    [messageText]=\"deleteGroupDialogMessage\"\n    [cancelButtonText]=\"deleteGroupCancelButtonText\"\n    [confirmButtonText]=\"deleteGroupConfirmButtonText\"\n    (cc-confirm-clicked)=\"deleteGroup()\" (cc-cancel-clicked)=\"onCancelClick()\"\n    [confirmDialogStyle]=\"deleteGroupDialogStyle\">\n  </cometchat-confirm-dialog>\n</cometchat-backdrop>\n", styles: ["*{box-sizing:border-box;margin:0;padding:0}.cc-details__wrapper{padding:8px;border-radius:5px;height:100%;overflow:hidden}.cc-details__profile{margin-bottom:50px;height:8%}.cc-details__section-list{height:84%;width:100%;overflow-y:auto;overflow-x:hidden}.cc-details__header{display:flex;justify-content:center;align-items:center;margin-bottom:30px}.cc-details__close-button{position:absolute;right:20px}.cc-details__section{margin-bottom:32px}.cc-details__section-separator{margin-bottom:16px;padding-left:6px;height:5%}.cc-details__options-wrapper{list-style:none;padding:0;display:flex;flex-direction:column;gap:8px}.cc-details__option{display:flex;flex-direction:column;justify-content:space-evenly;min-height:50px}.cc-details__option-title{padding-bottom:12px;display:flex;align-items:center;justify-content:space-between}.cc-details__view{position:absolute;top:0;left:0;height:100%;width:100%;max-height:100%;overflow-y:auto;overflow-x:hidden;max-width:100%;z-index:1}.cc-details__section-list::-webkit-scrollbar{background:transparent;width:8px}.cc-details__section-list::-webkit-scrollbar-thumb{background:#e8e5e5;border-radius:8px}.cc-details__leavedialog,.cc-details__transferownership{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);height:-moz-fit-content;height:fit-content;width:100%;z-index:2}\n"], components: [{ type: CometChatAddMembersComponent, selector: "cometchat-add-members", inputs: ["usersRequestBuilder", "searchRequestBuilder", "subtitleView", "listItemView", "disableUsersPresence", "menu", "options", "backButtonIconURL", "closeButtonIconURL", "showBackButton", "hideSeparator", "selectionMode", "searchPlaceholder", "hideError", "searchIconURL", "hideSearch", "title", "onError", "onBack", "onClose", "onSelect", "buttonText", "group", "emptyStateView", "errorStateView", "loadingIconURL", "listItemStyle", "showSectionHeader", "sectionHeaderField", "loadingStateView", "emptyStateText", "errorStateText", "onAddMembersButtonClick", "titleAlignment", "addMembersStyle", "StatusIndicatorStyle", "statusIndicatorStyle", "avatarStyle"] }, { type: CometChatBannedMembersComponent, selector: "cometchat-banned-members", inputs: ["bannedMembersRequestBuilder", "searchRequestBuilder", "subtitleView", "listItemView", "disableUsersPresence", "menu", "options", "backButtonIconURL", "closeButtonIconURL", "showBackButton", "hideSeparator", "selectionMode", "searchPlaceholder", "searchIconURL", "hideSearch", "title", "onError", "onSelect", "onBack", "onClose", "group", "emptyStateView", "errorStateView", "loadingIconURL", "loadingStateView", "emptyStateText", "errorStateText", "titleAlignment", "unbanIconURL", "statusIndicatorStyle", "avatarStyle", "bannedMembersStyle", "listItemStyle"] }, { type: CometChatGroupMembersComponent, selector: "cometchat-group-members", inputs: ["groupMemberRequestBuilder", "searchRequestBuilder", "subtitleView", "listItemView", "tailView", "disableUsersPresence", "menu", "options", "backButtonIconURL", "closeButtonIconURL", "showBackButton", "hideSeparator", "selectionMode", "searchPlaceholder", "searchIconURL", "hideSearch", "title", "onError", "backdropStyle", "onBack", "onClose", "onSelect", "group", "emptyStateView", "errorStateView", "loadingIconURL", "loadingStateView", "emptyStateText", "errorStateText", "titleAlignment", "dropdownIconURL", "statusIndicatorStyle", "avatarStyle", "groupMembersStyle", "groupScopeStyle", "listItemStyle", "onItemClick", "onEmpty", "userPresencePlacement", "disableLoadingState", "searchKeyword"] }, { type: CometChatTransferOwnershipComponent, selector: "cometchat-transfer-ownership", inputs: ["groupMemberRequestBuilder", "searchRequestBuilder", "subtitleView", "listItemView", "disableUsersPresence", "options", "closeButtonIconURL", "hideSeparator", "searchPlaceholder", "searchIconURL", "hideSearch", "title", "onError", "onClose", "onTransferOwnership", "group", "emptyStateView", "errorStateView", "loadingIconURL", "loadingStateView", "emptyStateText", "errorStateText", "statusIndicatorStyle", "transferOwnershipStyle", "transferButtonText", "cancelButtonText", "avatarStyle", "groupMembersStyle", "listItemStyle", "titleAlignment"] }], directives: [{ type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i3.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { type: i3.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+CometChatDetailsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: CometChatDetailsComponent, selector: "cometchat-details", inputs: { group: "group", user: "user", title: "title", closeButtonIconURL: "closeButtonIconURL", hideProfile: "hideProfile", subtitleView: "subtitleView", customProfileView: "customProfileView", data: "data", disableUsersPresence: "disableUsersPresence", privateGroupIcon: "privateGroupIcon", protectedGroupIcon: "protectedGroupIcon", passwordGroupIcon: "passwordGroupIcon", onError: "onError", onClose: "onClose", leaveGroupConfirmButtonText: "leaveGroupConfirmButtonText", leaveGroupCancelButtonText: "leaveGroupCancelButtonText", leaveGroupDialogMessage: "leaveGroupDialogMessage", leaveGroupDialogStyle: "leaveGroupDialogStyle", deleteGroupConfirmButtonText: "deleteGroupConfirmButtonText", deleteGroupDialogMessage: "deleteGroupDialogMessage", deleteGroupCancelButtonText: "deleteGroupCancelButtonText", deleteGroupDialogStyle: "deleteGroupDialogStyle", transferOwnershipConfirmButtonText: "transferOwnershipConfirmButtonText", transferOwnershipDialogMessage: "transferOwnershipDialogMessage", transferOwnershipCancelButtonText: "transferOwnershipCancelButtonText", transferOwnershipDialogStyle: "transferOwnershipDialogStyle", addMembersConfiguration: "addMembersConfiguration", bannedMembersConfiguration: "bannedMembersConfiguration", groupMembersConfiguration: "groupMembersConfiguration", transferOwnershipConfiguration: "transferOwnershipConfiguration", statusIndicatorStyle: "statusIndicatorStyle", backdropStyle: "backdropStyle", avatarStyle: "avatarStyle", detailsStyle: "detailsStyle", listItemStyle: "listItemStyle" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"cc-details__wrapper\" *ngIf=\"user || group\"\n  [ngStyle]=\"wrapperStyle()\">\n  <div class=\"cc-details__header\">\n    <cometchat-label [text]=\"title\"\n      [labelStyle]=\"getTitleStyle()\"></cometchat-label>\n    <cometchat-button [iconURL]=\"closeButtonIconURL\"\n      class=\"cc-details__close-button\" [buttonStyle]=\"closeButtonStyle\"\n      (cc-button-clicked)=\"onCloseDetails()\"></cometchat-button>\n  </div>\n  <div class=\"cc-details\" [ngStyle]=\"marginStyle()\">\n    <div class=\"cc-details__profile\" *ngIf=\"!hideProfile\">\n      <cometchat-list-item *ngIf=\"!customProfileView;else listitem\"\n        [avatarName]=\"user?.getName() ?? this.group?.getName()\"\n        [avatarURL]=\"this.user?.getAvatar() ?? this.group?.getIcon()\"\n        [listItemStyle]=\"listItemStyle\"\n        [statusIndicatorColor]=\"checkStatusType()\"\n        [statusIndicatorIcon]=\"checkGroupType()\"\n        [title]=\"this.user?.getName() ?? this.group?.getName()\"\n        [hideSeparator]=\"false\" [statusIndicatorStyle]=\"statusIndicatorStyle\"\n        [avatarStyle]=\"avatarStyle\">\n        <div slot=\"subtitleView\">\n          <div *ngIf=\"!subtitleView; else subtitle\">\n            <cometchat-label [text]=\"subtitleText\"\n              [labelStyle]=\"subtitleStyle()\">\n            </cometchat-label>\n          </div>\n          <ng-template #subtitle>\n            <ng-container\n              *ngTemplateOutlet=\"subtitleView;context:{ $implicit: user ?? group }\">\n            </ng-container>\n          </ng-template>\n        </div>\n      </cometchat-list-item>\n    </div>\n    <div class=\"cc-details__section-list\"\n      *ngIf=\"defaultTemplate && defaultTemplate.length > 0\">\n      <div class=\"cc-details__section\" *ngFor=\"let item of defaultTemplate\">\n        <div class=\"cc-details__section-separator\" *ngIf=\"item.title\">\n          <cometchat-label [text]=\"item.title\"\n            [labelStyle]=\"getSectionHeaderStyle(item)\"></cometchat-label>\n        </div>\n        <div class=\"cc-details__options-wrapper\"\n          *ngIf=\"getTemplateOptions(item)\">\n          <div class=\"cc-details__options\"\n            *ngFor=\"let option of getTemplateOptions(item)\">\n            <div class=\"cc-details__option\"\n              *ngIf=\"!getCustomOptionView(option);else customView\"\n              (click)=\"onOptionClick(option)\">\n              <div class=\"cc-details__option-title\">\n                <cometchat-button [text]=\"option.title\"\n                  [buttonStyle]=\"getButtonStyle(option)\"></cometchat-button>\n                <div class=\"cc-details__option-tail\" *ngIf=\"option?.tail\">\n                  <ng-container *ngTemplateOutlet=\"option?.tail\"></ng-container>\n                </div>\n              </div>\n              <cometchat-divider\n                [dividerStyle]=\"dividerStyle\"></cometchat-divider>\n            </div>\n            <ng-template #customView>\n              <ng-container *ngTemplateOutlet=\"getCustomOptionView(option)\">\n              </ng-container>\n            </ng-template>\n          </div>\n        </div>\n      </div>\n    </div>\n  </div>\n</div>\n<ng-template #listitem>\n  <ng-container *ngTemplateOutlet=\"customProfileView\">\n  </ng-container>\n</ng-template>\n<div class=\"cc-details__view\" *ngIf=\"openAddMembersPage\">\n  <cometchat-add-members\n    [titleAlignment]=\"addMembersConfiguration?.titleAlignment!\"\n    [listItemStyle]=\"addMembersConfiguration?.listItemStyle!\"\n    [addMembersStyle]=\"addMembersConfiguration?.addMembersStyle!\"\n    [avatarStyle]=\"addMembersConfiguration?.avatarStyle!\"\n    [statusIndicatorStyle]=\"addMembersConfiguration?.statusIndicatorStyle!\"\n    [loadingStateView]=\"addMembersConfiguration?.loadingStateView!\"\n    [loadingIconURL]=\"addMembersConfiguration?.loadingIconURL!\"\n    [errorStateView]=\"addMembersConfiguration?.errorStateView\"\n    [emptyStateView]=\"addMembersConfiguration?.emptyStateView\"\n    [onSelect]=\"addMembersConfiguration?.onSelect!\"\n    [onError]=\"addMembersConfiguration?.onError!\"\n    [hideError]=\"addMembersConfiguration?.hideError!\"\n    [hideSearch]=\"addMembersConfiguration?.hideSearch!\"\n    [searchIconURL]=\"addMembersConfiguration?.searchIconURL!\"\n    [selectionMode]=\"addMembersConfiguration?.selectionMode!\"\n    [hideSeparator]=\"addMembersConfiguration?.hideSeparator!\"\n    [showBackButton]=\"addMembersConfiguration?.showBackButton!\"\n    [showSectionHeader]=\"addMembersConfiguration?.showSectionHeader!\"\n    [onAddMembersButtonClick]=\"addMembersConfiguration?.onAddMembersButtonClick!\"\n    [usersConfiguration]=\"addMembersConfiguration?.usersConfiguration\"\n    [backButtonIconURL]=\"addMembersConfiguration?.backButtonIconURL!\"\n    [sectionHeaderField]=\"addMembersConfiguration?.sectionHeaderField!\"\n    [closeButtonIconURL]=\"addMembersConfiguration?.closeButtonIconURL!\"\n    [options]=\"addMembersConfiguration?.options!\"\n    [menu]=\"addMembersConfiguration?.menu\"\n    [disableUsersPresence]=\"addMembersConfiguration?.disableUsersPresence!\"\n    [subtitleView]=\"addMembersConfiguration?.subtitleView\" [group]=\"group\"\n    [selectionMode]=\"selectionmodeEnum\"\n    [onClose]=\"addMembersConfiguration?.onClose || onCloseDetails\"\n    [onBack]=\"onBackForAddMembers\"\n    [usersRequestBuilder]=\"addMembersConfiguration?.usersRequestBuilder!\"\n    [searchRequestBuilder]=\"addMembersConfiguration?.usersRequestBuilder!\"\n    [listItemView]=\"addMembersConfiguration?.listItemView\">\n  </cometchat-add-members>\n</div>\n<div class=\"cc-details__view\" *ngIf=\"openBannedMembersPage\">\n  <cometchat-banned-members\n    [listItemView]=\"bannedMembersConfiguration?.listItemView\"\n    [bannedMembersRequestBuilder]=\"bannedMembersConfiguration?.bannedMembersRequestBuilder!\"\n    [searchRequestBuilder]=\"bannedMembersConfiguration?.searchRequestBuilder!\"\n    [titleAlignment]=\"bannedMembersConfiguration.titleAlignment\"\n    [listItemStyle]=\"bannedMembersConfiguration.listItemStyle\"\n    [bannedMembersStyle]=\"bannedMembersConfiguration.bannedMembersStyle\"\n    [avatarStyle]=\"bannedMembersConfiguration.avatarStyle\"\n    [statusIndicatorStyle]=\"bannedMembersConfiguration.statusIndicatorStyle\"\n    [loadingStateView]=\"bannedMembersConfiguration.loadingStateView\"\n    [loadingIconURL]=\"bannedMembersConfiguration.loadingIconURL\"\n    [errorStateView]=\"bannedMembersConfiguration.errorStateView\"\n    [emptyStateView]=\"bannedMembersConfiguration.emptyStateView\"\n    [onSelect]=\"bannedMembersConfiguration.onSelect\"\n    [onError]=\"bannedMembersConfiguration.onError\"\n    [hideError]=\"bannedMembersConfiguration.hideError\"\n    [hideSearch]=\"bannedMembersConfiguration.hideSearch\"\n    [searchIconURL]=\"bannedMembersConfiguration.searchIconURL\"\n    [selectionMode]=\"bannedMembersConfiguration.selectionMode\"\n    [hideSeparator]=\"bannedMembersConfiguration.hideSeparator\"\n    [showBackButton]=\"bannedMembersConfiguration.showBackButton\"\n    [backButtonIconURL]=\"bannedMembersConfiguration.backButtonIconURL\"\n    [closeButtonIconURL]=\"bannedMembersConfiguration.closeButtonIconURL\"\n    [options]=\"bannedMembersConfiguration.options\"\n    [menu]=\"bannedMembersConfiguration.menu\"\n    [disableUsersPresence]=\"bannedMembersConfiguration.disableUsersPresence\"\n    [subtitleView]=\"bannedMembersConfiguration.subtitleView\" [group]=\"group\"\n    [onClose]=\"onCloseDetails\"\n    [onBack]=\"bannedMembersConfiguration.onBack || bannedMembers\">\n  </cometchat-banned-members>\n</div>\n<div class=\"cc-details__view\" *ngIf=\"openViewMembersPage\">\n  <cometchat-group-members\n    [groupMembersRequestBuilder]=\"groupMembersConfiguration?.groupMembersRequestBuilder!\"\n    [searchRequestBuilder]=\"groupMembersConfiguration?.searchRequestBuilder!\"\n    [titleAlignment]=\"groupMembersConfiguration.titleAlignment\"\n    [listItemStyle]=\"groupMembersConfiguration.listItemStyle\"\n    [groupMembersStyle]=\"groupMembersConfiguration.groupMembersStyle\"\n    [avatarStyle]=\"groupMembersConfiguration.avatarStyle\"\n    [statusIndicatorStyle]=\"groupMembersConfiguration.statusIndicatorStyle\"\n    [loadingStateView]=\"groupMembersConfiguration.loadingStateView\"\n    [loadingIconURL]=\"groupMembersConfiguration.loadingIconURL\"\n    [errorStateView]=\"groupMembersConfiguration.errorStateView\"\n    [emptyStateView]=\"groupMembersConfiguration.emptyStateView\"\n    [onSelect]=\"groupMembersConfiguration.onSelect\"\n    [onError]=\"groupMembersConfiguration.onError\"\n    [hideError]=\"groupMembersConfiguration.hideError\"\n    [hideSearch]=\"groupMembersConfiguration.hideSearch\"\n    [searchIconURL]=\"groupMembersConfiguration.searchIconURL\"\n    [selectionMode]=\"groupMembersConfiguration.selectionMode\"\n    [backdropStyle]=\"groupMembersConfiguration.backdropStyle\"\n    [hideSeparator]=\"groupMembersConfiguration.hideSeparator\"\n    [showBackButton]=\"groupMembersConfiguration.showBackButton\"\n    [backButtonIconURL]=\"groupMembersConfiguration.backButtonIconURL\"\n    [closeButtonIconURL]=\"groupMembersConfiguration.closeButtonIconURL\"\n    [options]=\"groupMembersConfiguration.options\"\n    [menu]=\"groupMembersConfiguration.menu\"\n    [disableUsersPresence]=\"groupMembersConfiguration.disableUsersPresence\"\n    [subtitleView]=\"groupMembersConfiguration.subtitleView\"\n    [groupScopeStyle]=\"groupMembersConfiguration.groupScopeStyle\"\n    [group]=\"group\"\n    [onClose]=\" groupMembersConfiguration.onClose || onCloseDetails\"\n    [onBack]=\"groupMembersConfiguration.onBack || viewMembers\">\n  </cometchat-group-members>\n</div>\n\n<cometchat-backdrop [backdropStyle]=\"backdropStyle\"\n  *ngIf=\"confirmLeaveGroupModal\">\n  <cometchat-confirm-dialog [title]=\"''\" [messageText]=\"leaveGroupDialogMessage\"\n    [cancelButtonText]=\"leaveGroupCancelButtonText\"\n    [confirmButtonText]=\"leaveGroupConfirmButtonText\"\n    (cc-confirm-clicked)=\"onLeaveClick()\" (cc-cancel-clicked)=\"onCancelClick()\"\n    [confirmDialogStyle]=\"leaveGroupDialogStyle\">\n  </cometchat-confirm-dialog>\n</cometchat-backdrop>\n<cometchat-backdrop [backdropStyle]=\"backdropStyle\" *ngIf=\"showTransferDialog\">\n  <cometchat-confirm-dialog [title]=\"''\"\n    [messageText]=\"transferOwnershipDialogMessage\"\n    [cancelButtonText]=\"transferOwnershipCancelButtonText\"\n    [confirmButtonText]=\"transferOwnershipConfirmButtonText\"\n    (cc-confirm-clicked)=\"onTransferClick()\"\n    (cc-cancel-clicked)=\"onCancelClick()\"\n    [confirmDialogStyle]=\"transferOwnershipDialogStyle\">\n  </cometchat-confirm-dialog>\n</cometchat-backdrop>\n<cometchat-backdrop [backdropStyle]=\"backdropStyle\"\n  *ngIf=\"openTransferOwnershipModal\">\n  <cometchat-transfer-ownership\n    [groupMembersRequestBuilder]=\"transferOwnershipConfiguration?.groupMembersRequestBuilder\"\n    [transferOwnershipStyle]=\"transferOwnershipConfiguration.transferOwnershipStyle\"\n    [onTransferOwnership]=\"transferOwnershipConfiguration.onTransferOwnership\"\n    [titleAlignment]=\"transferOwnershipConfiguration.titleAlignment\"\n    [listItemStyle]=\"transferOwnershipConfiguration.listItemStyle\"\n    [avatarStyle]=\"transferOwnershipConfiguration.avatarStyle\"\n    [statusIndicatorStyle]=\"transferOwnershipConfiguration.statusIndicatorStyle\"\n    [loadingStateView]=\"transferOwnershipConfiguration.loadingStateView\"\n    [loadingIconURL]=\"transferOwnershipConfiguration.loadingIconURL\"\n    [errorStateView]=\"transferOwnershipConfiguration.errorStateView\"\n    [emptyStateView]=\"transferOwnershipConfiguration.emptyStateView\"\n    [onError]=\"transferOwnershipConfiguration.onError\"\n    [hideSearch]=\"transferOwnershipConfiguration.hideSearch\"\n    [searchIconURL]=\"transferOwnershipConfiguration.searchIconURL\"\n    [hideSeparator]=\"transferOwnershipConfiguration.hideSeparator\"\n    [closeButtonIconURL]=\"transferOwnershipConfiguration.closeButtonIconURL\"\n    [options]=\"transferOwnershipConfiguration.options\"\n    [disableUsersPresence]=\"transferOwnershipConfiguration.disableUsersPresence\"\n    [subtitleView]=\"transferOwnershipConfiguration.subtitleView\" [group]=\"group\"\n    [onClose]=\"transferOwnershipConfiguration.onClose || openTransferOwnership\">\n  </cometchat-transfer-ownership>\n</cometchat-backdrop>\n<cometchat-backdrop [backdropStyle]=\"backdropStyle\" *ngIf=\"deleteGroupModal\">\n  <cometchat-confirm-dialog [title]=\"''\"\n    [messageText]=\"deleteGroupDialogMessage\"\n    [cancelButtonText]=\"deleteGroupCancelButtonText\"\n    [confirmButtonText]=\"deleteGroupConfirmButtonText\"\n    (cc-confirm-clicked)=\"deleteGroup()\" (cc-cancel-clicked)=\"onCancelClick()\"\n    [confirmDialogStyle]=\"deleteGroupDialogStyle\">\n  </cometchat-confirm-dialog>\n</cometchat-backdrop>\n", styles: ["*{box-sizing:border-box;margin:0;padding:0}.cc-details__wrapper{padding:8px;border-radius:5px;height:100%;overflow:hidden}.cc-details__profile{margin-bottom:50px;height:8%}.cc-details__section-list{height:84%;width:100%;overflow-y:auto;overflow-x:hidden}.cc-details__header{display:flex;justify-content:center;align-items:center;margin-bottom:30px}.cc-details__close-button{position:absolute;right:20px}.cc-details__section{margin-bottom:32px}.cc-details__section-separator{margin-bottom:16px;padding-left:6px;height:5%}.cc-details__options-wrapper{list-style:none;padding:0;display:flex;flex-direction:column;gap:8px}.cc-details__option{display:flex;flex-direction:column;justify-content:space-evenly;min-height:50px}.cc-details__option-title{padding-bottom:12px;display:flex;align-items:center;justify-content:space-between}.cc-details__view{position:absolute;top:0;left:0;height:100%;width:100%;max-height:100%;overflow-y:auto;overflow-x:hidden;max-width:100%;z-index:1}.cc-details__section-list::-webkit-scrollbar{background:transparent;width:8px}.cc-details__section-list::-webkit-scrollbar-thumb{background:#e8e5e5;border-radius:8px}.cc-details__leavedialog,.cc-details__transferownership{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);height:-moz-fit-content;height:fit-content;width:100%;z-index:2}\n"], components: [{ type: CometChatAddMembersComponent, selector: "cometchat-add-members", inputs: ["usersRequestBuilder", "searchRequestBuilder", "subtitleView", "listItemView", "disableUsersPresence", "menu", "options", "backButtonIconURL", "closeButtonIconURL", "showBackButton", "hideSeparator", "selectionMode", "searchPlaceholder", "hideError", "searchIconURL", "hideSearch", "title", "onError", "onBack", "onClose", "onSelect", "buttonText", "group", "emptyStateView", "errorStateView", "loadingIconURL", "listItemStyle", "showSectionHeader", "sectionHeaderField", "loadingStateView", "emptyStateText", "errorStateText", "onAddMembersButtonClick", "titleAlignment", "addMembersStyle", "StatusIndicatorStyle", "statusIndicatorStyle", "avatarStyle"] }, { type: CometChatBannedMembersComponent, selector: "cometchat-banned-members", inputs: ["bannedMembersRequestBuilder", "searchRequestBuilder", "subtitleView", "listItemView", "disableUsersPresence", "menu", "options", "backButtonIconURL", "closeButtonIconURL", "showBackButton", "hideSeparator", "selectionMode", "searchPlaceholder", "searchIconURL", "hideSearch", "title", "onError", "onSelect", "onBack", "onClose", "group", "emptyStateView", "errorStateView", "loadingIconURL", "loadingStateView", "emptyStateText", "errorStateText", "titleAlignment", "unbanIconURL", "statusIndicatorStyle", "avatarStyle", "bannedMembersStyle", "listItemStyle"] }, { type: CometChatGroupMembersComponent, selector: "cometchat-group-members", inputs: ["groupMemberRequestBuilder", "searchRequestBuilder", "subtitleView", "listItemView", "tailView", "disableUsersPresence", "menu", "options", "backButtonIconURL", "closeButtonIconURL", "showBackButton", "hideSeparator", "selectionMode", "searchPlaceholder", "searchIconURL", "hideSearch", "title", "onError", "backdropStyle", "onBack", "onClose", "onSelect", "group", "emptyStateView", "errorStateView", "loadingIconURL", "loadingStateView", "emptyStateText", "errorStateText", "titleAlignment", "dropdownIconURL", "statusIndicatorStyle", "avatarStyle", "groupMembersStyle", "groupScopeStyle", "listItemStyle", "onItemClick", "onEmpty", "userPresencePlacement", "disableLoadingState", "searchKeyword"] }, { type: CometChatTransferOwnershipComponent, selector: "cometchat-transfer-ownership", inputs: ["groupMemberRequestBuilder", "searchRequestBuilder", "subtitleView", "listItemView", "disableUsersPresence", "options", "closeButtonIconURL", "hideSeparator", "searchPlaceholder", "searchIconURL", "hideSearch", "title", "onError", "onClose", "onTransferOwnership", "group", "emptyStateView", "errorStateView", "loadingIconURL", "loadingStateView", "emptyStateText", "errorStateText", "statusIndicatorStyle", "transferOwnershipStyle", "transferButtonText", "cancelButtonText", "avatarStyle", "groupMembersStyle", "listItemStyle", "titleAlignment"] }], directives: [{ type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i3.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { type: i3.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: CometChatDetailsComponent, decorators: [{
             type: Component,
-            args: [{ selector: "cometchat-details", changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"cc-details__wrapper\" *ngIf=\"user || group\"\n  [ngStyle]=\"wrapperStyle()\">\n  <div class=\"cc-details__header\">\n    <cometchat-label [text]=\"title\"\n      [labelStyle]=\"getTitleStyle()\"></cometchat-label>\n    <cometchat-button [iconURL]=\"closeButtonIconURL\"\n      class=\"cc-details__close-button\" [buttonStyle]=\"closeButtonStyle\"\n      (cc-button-clicked)=\"onCloseDetails()\"></cometchat-button>\n  </div>\n  <div class=\"cc-details\" [ngStyle]=\"marginStyle()\">\n    <div class=\"cc-details__profile\" *ngIf=\"!hideProfile\">\n      <cometchat-list-item *ngIf=\"!customProfileView;else listitem\"\n        [avatarName]=\"user?.getName() ?? this.group?.getName()\"\n        [avatarURL]=\"this.user?.getAvatar() ?? this.group?.getIcon()\"\n        [listItemStyle]=\"listItemStyle\"\n        [statusIndicatorColor]=\"checkStatusType()\"\n        [statusIndicatorIcon]=\"checkGroupType()\"\n        [title]=\"this.user?.getName() ?? this.group?.getName()\"\n        [hideSeparator]=\"false\" [statusIndicatorStyle]=\"statusIndicatorStyle\"\n        [avatarStyle]=\"avatarStyle\">\n        <div slot=\"subtitleView\">\n          <div *ngIf=\"!subtitleView; else subtitle\">\n            <cometchat-label [text]=\"subtitleText\"\n              [labelStyle]=\"subtitleStyle()\">\n            </cometchat-label>\n          </div>\n          <ng-template #subtitle>\n            <ng-container\n              *ngTemplateOutlet=\"subtitleView;context:{ $implicit: user ?? group }\">\n            </ng-container>\n          </ng-template>\n        </div>\n      </cometchat-list-item>\n    </div>\n    <div class=\"cc-details__section-list\"\n      *ngIf=\"defaultTemplate && defaultTemplate.length > 0\">\n      <div class=\"cc-details__section\" *ngFor=\"let item of defaultTemplate\">\n        <div class=\"cc-details__section-separator\" *ngIf=\"item.title\">\n          <cometchat-label [text]=\"item.title\"\n            [labelStyle]=\"getSectionHeaderStyle(item)\"></cometchat-label>\n        </div>\n        <div class=\"cc-details__options-wrapper\"\n          *ngIf=\"getTemplateOptions(item)\">\n          <div class=\"cc-details__options\"\n            *ngFor=\"let option of getTemplateOptions(item)\">\n            <div class=\"cc-details__option\"\n              *ngIf=\"!getCustomOptionView(option);else customView\"\n              (click)=\"onOptionClick(option)\">\n              <div class=\"cc-details__option-title\">\n                <cometchat-button [text]=\"option.title\"\n                  [buttonStyle]=\"getButtonStyle(option)\"></cometchat-button>\n                <div class=\"cc-details__option-tail\" *ngIf=\"option?.tail\">\n                  <ng-container *ngTemplateOutlet=\"option?.tail\"></ng-container>\n                </div>\n              </div>\n              <cometchat-divider\n                [dividerStyle]=\"dividerStyle\"></cometchat-divider>\n            </div>\n            <ng-template #customView>\n              <ng-container *ngTemplateOutlet=\"getCustomOptionView(option)\">\n              </ng-container>\n            </ng-template>\n          </div>\n        </div>\n      </div>\n    </div>\n  </div>\n</div>\n<ng-template #listitem>\n  <ng-container *ngTemplateOutlet=\"customProfileView\">\n  </ng-container>\n</ng-template>\n<div class=\"cc-details__view\" *ngIf=\"openAddMembersPage\">\n  <cometchat-add-members\n    [titleAlignment]=\"addMembersConfiguration?.titleAlignment!\"\n    [listItemStyle]=\"addMembersConfiguration?.listItemStyle!\"\n    [addMembersStyle]=\"addMembersConfiguration?.addMembersStyle!\"\n    [avatarStyle]=\"addMembersConfiguration?.avatarStyle!\"\n    [statusIndicatorStyle]=\"addMembersConfiguration?.statusIndicatorStyle!\"\n    [loadingStateView]=\"addMembersConfiguration?.loadingStateView!\"\n    [loadingIconURL]=\"addMembersConfiguration?.loadingIconURL!\"\n    [errorStateView]=\"addMembersConfiguration?.errorStateView\"\n    [emptyStateView]=\"addMembersConfiguration?.emptyStateView\"\n    [onSelect]=\"addMembersConfiguration?.onSelect!\"\n    [onError]=\"addMembersConfiguration?.onError!\"\n    [hideError]=\"addMembersConfiguration?.hideError!\"\n    [hideSearch]=\"addMembersConfiguration?.hideSearch!\"\n    [searchIconURL]=\"addMembersConfiguration?.searchIconURL!\"\n    [selectionMode]=\"addMembersConfiguration?.selectionMode!\"\n    [hideSeparator]=\"addMembersConfiguration?.hideSeparator!\"\n    [showBackButton]=\"addMembersConfiguration?.showBackButton!\"\n    [showSectionHeader]=\"addMembersConfiguration?.showSectionHeader!\"\n    [onAddMembersButtonClick]=\"addMembersConfiguration?.onAddMembersButtonClick!\"\n    [usersConfiguration]=\"addMembersConfiguration?.usersConfiguration\"\n    [backButtonIconURL]=\"addMembersConfiguration?.backButtonIconURL!\"\n    [sectionHeaderField]=\"addMembersConfiguration?.sectionHeaderField!\"\n    [closeButtonIconURL]=\"addMembersConfiguration?.closeButtonIconURL!\"\n    [options]=\"addMembersConfiguration?.options!\"\n    [menu]=\"addMembersConfiguration?.menu\"\n    [disableUsersPresence]=\"addMembersConfiguration?.disableUsersPresence!\"\n    [subtitleView]=\"addMembersConfiguration?.subtitleView\" [group]=\"group\"\n    [selectionMode]=\"selectionmodeEnum\"\n    [onClose]=\"addMembersConfiguration?.onClose || onCloseDetails\"\n    [onBack]=\"addMembersConfiguration?.onBack || addMembers\"\n    [usersRequestBuilder]=\"addMembersConfiguration?.usersRequestBuilder!\"\n    [searchRequestBuilder]=\"addMembersConfiguration?.usersRequestBuilder!\"\n    [listItemView]=\"addMembersConfiguration?.listItemView\">\n  </cometchat-add-members>\n</div>\n<div class=\"cc-details__view\" *ngIf=\"openBannedMembersPage\">\n  <cometchat-banned-members\n    [listItemView]=\"bannedMembersConfiguration?.listItemView\"\n    [bannedMembersRequestBuilder]=\"bannedMembersConfiguration?.bannedMembersRequestBuilder!\"\n    [searchRequestBuilder]=\"bannedMembersConfiguration?.searchRequestBuilder!\"\n    [titleAlignment]=\"bannedMembersConfiguration.titleAlignment\"\n    [listItemStyle]=\"bannedMembersConfiguration.listItemStyle\"\n    [bannedMembersStyle]=\"bannedMembersConfiguration.bannedMembersStyle\"\n    [avatarStyle]=\"bannedMembersConfiguration.avatarStyle\"\n    [statusIndicatorStyle]=\"bannedMembersConfiguration.statusIndicatorStyle\"\n    [loadingStateView]=\"bannedMembersConfiguration.loadingStateView\"\n    [loadingIconURL]=\"bannedMembersConfiguration.loadingIconURL\"\n    [errorStateView]=\"bannedMembersConfiguration.errorStateView\"\n    [emptyStateView]=\"bannedMembersConfiguration.emptyStateView\"\n    [onSelect]=\"bannedMembersConfiguration.onSelect\"\n    [onError]=\"bannedMembersConfiguration.onError\"\n    [hideError]=\"bannedMembersConfiguration.hideError\"\n    [hideSearch]=\"bannedMembersConfiguration.hideSearch\"\n    [searchIconURL]=\"bannedMembersConfiguration.searchIconURL\"\n    [selectionMode]=\"bannedMembersConfiguration.selectionMode\"\n    [hideSeparator]=\"bannedMembersConfiguration.hideSeparator\"\n    [showBackButton]=\"bannedMembersConfiguration.showBackButton\"\n    [backButtonIconURL]=\"bannedMembersConfiguration.backButtonIconURL\"\n    [closeButtonIconURL]=\"bannedMembersConfiguration.closeButtonIconURL\"\n    [options]=\"bannedMembersConfiguration.options\"\n    [menu]=\"bannedMembersConfiguration.menu\"\n    [disableUsersPresence]=\"bannedMembersConfiguration.disableUsersPresence\"\n    [subtitleView]=\"bannedMembersConfiguration.subtitleView\" [group]=\"group\"\n    [onClose]=\"onCloseDetails\"\n    [onBack]=\"bannedMembersConfiguration.onBack || bannedMembers\">\n  </cometchat-banned-members>\n</div>\n<div class=\"cc-details__view\" *ngIf=\"openViewMembersPage\">\n  <cometchat-group-members\n    [groupMembersRequestBuilder]=\"groupMembersConfiguration?.groupMembersRequestBuilder!\"\n    [searchRequestBuilder]=\"groupMembersConfiguration?.searchRequestBuilder!\"\n    [titleAlignment]=\"groupMembersConfiguration.titleAlignment\"\n    [listItemStyle]=\"groupMembersConfiguration.listItemStyle\"\n    [groupMembersStyle]=\"groupMembersConfiguration.groupMembersStyle\"\n    [avatarStyle]=\"groupMembersConfiguration.avatarStyle\"\n    [statusIndicatorStyle]=\"groupMembersConfiguration.statusIndicatorStyle\"\n    [loadingStateView]=\"groupMembersConfiguration.loadingStateView\"\n    [loadingIconURL]=\"groupMembersConfiguration.loadingIconURL\"\n    [errorStateView]=\"groupMembersConfiguration.errorStateView\"\n    [emptyStateView]=\"groupMembersConfiguration.emptyStateView\"\n    [onSelect]=\"groupMembersConfiguration.onSelect\"\n    [onError]=\"groupMembersConfiguration.onError\"\n    [hideError]=\"groupMembersConfiguration.hideError\"\n    [hideSearch]=\"groupMembersConfiguration.hideSearch\"\n    [searchIconURL]=\"groupMembersConfiguration.searchIconURL\"\n    [selectionMode]=\"groupMembersConfiguration.selectionMode\"\n    [backdropStyle]=\"groupMembersConfiguration.backdropStyle\"\n    [hideSeparator]=\"groupMembersConfiguration.hideSeparator\"\n    [showBackButton]=\"groupMembersConfiguration.showBackButton\"\n    [backButtonIconURL]=\"groupMembersConfiguration.backButtonIconURL\"\n    [closeButtonIconURL]=\"groupMembersConfiguration.closeButtonIconURL\"\n    [options]=\"groupMembersConfiguration.options\"\n    [menu]=\"groupMembersConfiguration.menu\"\n    [disableUsersPresence]=\"groupMembersConfiguration.disableUsersPresence\"\n    [subtitleView]=\"groupMembersConfiguration.subtitleView\"\n    [groupScopeStyle]=\"groupMembersConfiguration.groupScopeStyle\"\n    [group]=\"group\"\n    [onClose]=\" groupMembersConfiguration.onClose || onCloseDetails\"\n    [onBack]=\"groupMembersConfiguration.onBack || viewMembers\">\n  </cometchat-group-members>\n</div>\n\n<cometchat-backdrop [backdropStyle]=\"backdropStyle\"\n  *ngIf=\"confirmLeaveGroupModal\">\n  <cometchat-confirm-dialog [title]=\"''\" [messageText]=\"leaveGroupDialogMessage\"\n    [cancelButtonText]=\"leaveGroupCancelButtonText\"\n    [confirmButtonText]=\"leaveGroupConfirmButtonText\"\n    (cc-confirm-clicked)=\"onLeaveClick()\" (cc-cancel-clicked)=\"onCancelClick()\"\n    [confirmDialogStyle]=\"leaveGroupDialogStyle\">\n  </cometchat-confirm-dialog>\n</cometchat-backdrop>\n<cometchat-backdrop [backdropStyle]=\"backdropStyle\" *ngIf=\"showTransferDialog\">\n  <cometchat-confirm-dialog [title]=\"''\"\n    [messageText]=\"transferOwnershipDialogMessage\"\n    [cancelButtonText]=\"transferOwnershipCancelButtonText\"\n    [confirmButtonText]=\"transferOwnershipConfirmButtonText\"\n    (cc-confirm-clicked)=\"onTransferClick()\"\n    (cc-cancel-clicked)=\"onCancelClick()\"\n    [confirmDialogStyle]=\"transferOwnershipDialogStyle\">\n  </cometchat-confirm-dialog>\n</cometchat-backdrop>\n<cometchat-backdrop [backdropStyle]=\"backdropStyle\"\n  *ngIf=\"openTransferOwnershipModal\">\n  <cometchat-transfer-ownership\n    [groupMembersRequestBuilder]=\"transferOwnershipConfiguration?.groupMembersRequestBuilder\"\n    [transferOwnershipStyle]=\"transferOwnershipConfiguration.transferOwnershipStyle\"\n    [onTransferOwnership]=\"transferOwnershipConfiguration.onTransferOwnership\"\n    [titleAlignment]=\"transferOwnershipConfiguration.titleAlignment\"\n    [listItemStyle]=\"transferOwnershipConfiguration.listItemStyle\"\n    [avatarStyle]=\"transferOwnershipConfiguration.avatarStyle\"\n    [statusIndicatorStyle]=\"transferOwnershipConfiguration.statusIndicatorStyle\"\n    [loadingStateView]=\"transferOwnershipConfiguration.loadingStateView\"\n    [loadingIconURL]=\"transferOwnershipConfiguration.loadingIconURL\"\n    [errorStateView]=\"transferOwnershipConfiguration.errorStateView\"\n    [emptyStateView]=\"transferOwnershipConfiguration.emptyStateView\"\n    [onError]=\"transferOwnershipConfiguration.onError\"\n    [hideSearch]=\"transferOwnershipConfiguration.hideSearch\"\n    [searchIconURL]=\"transferOwnershipConfiguration.searchIconURL\"\n    [hideSeparator]=\"transferOwnershipConfiguration.hideSeparator\"\n    [closeButtonIconURL]=\"transferOwnershipConfiguration.closeButtonIconURL\"\n    [options]=\"transferOwnershipConfiguration.options\"\n    [disableUsersPresence]=\"transferOwnershipConfiguration.disableUsersPresence\"\n    [subtitleView]=\"transferOwnershipConfiguration.subtitleView\" [group]=\"group\"\n    [onClose]=\"transferOwnershipConfiguration.onClose || openTransferOwnership\">\n  </cometchat-transfer-ownership>\n</cometchat-backdrop>\n<cometchat-backdrop [backdropStyle]=\"backdropStyle\" *ngIf=\"deleteGroupModal\">\n  <cometchat-confirm-dialog [title]=\"''\"\n    [messageText]=\"deleteGroupDialogMessage\"\n    [cancelButtonText]=\"deleteGroupCancelButtonText\"\n    [confirmButtonText]=\"deleteGroupConfirmButtonText\"\n    (cc-confirm-clicked)=\"deleteGroup()\" (cc-cancel-clicked)=\"onCancelClick()\"\n    [confirmDialogStyle]=\"deleteGroupDialogStyle\">\n  </cometchat-confirm-dialog>\n</cometchat-backdrop>\n", styles: ["*{box-sizing:border-box;margin:0;padding:0}.cc-details__wrapper{padding:8px;border-radius:5px;height:100%;overflow:hidden}.cc-details__profile{margin-bottom:50px;height:8%}.cc-details__section-list{height:84%;width:100%;overflow-y:auto;overflow-x:hidden}.cc-details__header{display:flex;justify-content:center;align-items:center;margin-bottom:30px}.cc-details__close-button{position:absolute;right:20px}.cc-details__section{margin-bottom:32px}.cc-details__section-separator{margin-bottom:16px;padding-left:6px;height:5%}.cc-details__options-wrapper{list-style:none;padding:0;display:flex;flex-direction:column;gap:8px}.cc-details__option{display:flex;flex-direction:column;justify-content:space-evenly;min-height:50px}.cc-details__option-title{padding-bottom:12px;display:flex;align-items:center;justify-content:space-between}.cc-details__view{position:absolute;top:0;left:0;height:100%;width:100%;max-height:100%;overflow-y:auto;overflow-x:hidden;max-width:100%;z-index:1}.cc-details__section-list::-webkit-scrollbar{background:transparent;width:8px}.cc-details__section-list::-webkit-scrollbar-thumb{background:#e8e5e5;border-radius:8px}.cc-details__leavedialog,.cc-details__transferownership{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);height:-moz-fit-content;height:fit-content;width:100%;z-index:2}\n"] }]
+            args: [{ selector: "cometchat-details", changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"cc-details__wrapper\" *ngIf=\"user || group\"\n  [ngStyle]=\"wrapperStyle()\">\n  <div class=\"cc-details__header\">\n    <cometchat-label [text]=\"title\"\n      [labelStyle]=\"getTitleStyle()\"></cometchat-label>\n    <cometchat-button [iconURL]=\"closeButtonIconURL\"\n      class=\"cc-details__close-button\" [buttonStyle]=\"closeButtonStyle\"\n      (cc-button-clicked)=\"onCloseDetails()\"></cometchat-button>\n  </div>\n  <div class=\"cc-details\" [ngStyle]=\"marginStyle()\">\n    <div class=\"cc-details__profile\" *ngIf=\"!hideProfile\">\n      <cometchat-list-item *ngIf=\"!customProfileView;else listitem\"\n        [avatarName]=\"user?.getName() ?? this.group?.getName()\"\n        [avatarURL]=\"this.user?.getAvatar() ?? this.group?.getIcon()\"\n        [listItemStyle]=\"listItemStyle\"\n        [statusIndicatorColor]=\"checkStatusType()\"\n        [statusIndicatorIcon]=\"checkGroupType()\"\n        [title]=\"this.user?.getName() ?? this.group?.getName()\"\n        [hideSeparator]=\"false\" [statusIndicatorStyle]=\"statusIndicatorStyle\"\n        [avatarStyle]=\"avatarStyle\">\n        <div slot=\"subtitleView\">\n          <div *ngIf=\"!subtitleView; else subtitle\">\n            <cometchat-label [text]=\"subtitleText\"\n              [labelStyle]=\"subtitleStyle()\">\n            </cometchat-label>\n          </div>\n          <ng-template #subtitle>\n            <ng-container\n              *ngTemplateOutlet=\"subtitleView;context:{ $implicit: user ?? group }\">\n            </ng-container>\n          </ng-template>\n        </div>\n      </cometchat-list-item>\n    </div>\n    <div class=\"cc-details__section-list\"\n      *ngIf=\"defaultTemplate && defaultTemplate.length > 0\">\n      <div class=\"cc-details__section\" *ngFor=\"let item of defaultTemplate\">\n        <div class=\"cc-details__section-separator\" *ngIf=\"item.title\">\n          <cometchat-label [text]=\"item.title\"\n            [labelStyle]=\"getSectionHeaderStyle(item)\"></cometchat-label>\n        </div>\n        <div class=\"cc-details__options-wrapper\"\n          *ngIf=\"getTemplateOptions(item)\">\n          <div class=\"cc-details__options\"\n            *ngFor=\"let option of getTemplateOptions(item)\">\n            <div class=\"cc-details__option\"\n              *ngIf=\"!getCustomOptionView(option);else customView\"\n              (click)=\"onOptionClick(option)\">\n              <div class=\"cc-details__option-title\">\n                <cometchat-button [text]=\"option.title\"\n                  [buttonStyle]=\"getButtonStyle(option)\"></cometchat-button>\n                <div class=\"cc-details__option-tail\" *ngIf=\"option?.tail\">\n                  <ng-container *ngTemplateOutlet=\"option?.tail\"></ng-container>\n                </div>\n              </div>\n              <cometchat-divider\n                [dividerStyle]=\"dividerStyle\"></cometchat-divider>\n            </div>\n            <ng-template #customView>\n              <ng-container *ngTemplateOutlet=\"getCustomOptionView(option)\">\n              </ng-container>\n            </ng-template>\n          </div>\n        </div>\n      </div>\n    </div>\n  </div>\n</div>\n<ng-template #listitem>\n  <ng-container *ngTemplateOutlet=\"customProfileView\">\n  </ng-container>\n</ng-template>\n<div class=\"cc-details__view\" *ngIf=\"openAddMembersPage\">\n  <cometchat-add-members\n    [titleAlignment]=\"addMembersConfiguration?.titleAlignment!\"\n    [listItemStyle]=\"addMembersConfiguration?.listItemStyle!\"\n    [addMembersStyle]=\"addMembersConfiguration?.addMembersStyle!\"\n    [avatarStyle]=\"addMembersConfiguration?.avatarStyle!\"\n    [statusIndicatorStyle]=\"addMembersConfiguration?.statusIndicatorStyle!\"\n    [loadingStateView]=\"addMembersConfiguration?.loadingStateView!\"\n    [loadingIconURL]=\"addMembersConfiguration?.loadingIconURL!\"\n    [errorStateView]=\"addMembersConfiguration?.errorStateView\"\n    [emptyStateView]=\"addMembersConfiguration?.emptyStateView\"\n    [onSelect]=\"addMembersConfiguration?.onSelect!\"\n    [onError]=\"addMembersConfiguration?.onError!\"\n    [hideError]=\"addMembersConfiguration?.hideError!\"\n    [hideSearch]=\"addMembersConfiguration?.hideSearch!\"\n    [searchIconURL]=\"addMembersConfiguration?.searchIconURL!\"\n    [selectionMode]=\"addMembersConfiguration?.selectionMode!\"\n    [hideSeparator]=\"addMembersConfiguration?.hideSeparator!\"\n    [showBackButton]=\"addMembersConfiguration?.showBackButton!\"\n    [showSectionHeader]=\"addMembersConfiguration?.showSectionHeader!\"\n    [onAddMembersButtonClick]=\"addMembersConfiguration?.onAddMembersButtonClick!\"\n    [usersConfiguration]=\"addMembersConfiguration?.usersConfiguration\"\n    [backButtonIconURL]=\"addMembersConfiguration?.backButtonIconURL!\"\n    [sectionHeaderField]=\"addMembersConfiguration?.sectionHeaderField!\"\n    [closeButtonIconURL]=\"addMembersConfiguration?.closeButtonIconURL!\"\n    [options]=\"addMembersConfiguration?.options!\"\n    [menu]=\"addMembersConfiguration?.menu\"\n    [disableUsersPresence]=\"addMembersConfiguration?.disableUsersPresence!\"\n    [subtitleView]=\"addMembersConfiguration?.subtitleView\" [group]=\"group\"\n    [selectionMode]=\"selectionmodeEnum\"\n    [onClose]=\"addMembersConfiguration?.onClose || onCloseDetails\"\n    [onBack]=\"onBackForAddMembers\"\n    [usersRequestBuilder]=\"addMembersConfiguration?.usersRequestBuilder!\"\n    [searchRequestBuilder]=\"addMembersConfiguration?.usersRequestBuilder!\"\n    [listItemView]=\"addMembersConfiguration?.listItemView\">\n  </cometchat-add-members>\n</div>\n<div class=\"cc-details__view\" *ngIf=\"openBannedMembersPage\">\n  <cometchat-banned-members\n    [listItemView]=\"bannedMembersConfiguration?.listItemView\"\n    [bannedMembersRequestBuilder]=\"bannedMembersConfiguration?.bannedMembersRequestBuilder!\"\n    [searchRequestBuilder]=\"bannedMembersConfiguration?.searchRequestBuilder!\"\n    [titleAlignment]=\"bannedMembersConfiguration.titleAlignment\"\n    [listItemStyle]=\"bannedMembersConfiguration.listItemStyle\"\n    [bannedMembersStyle]=\"bannedMembersConfiguration.bannedMembersStyle\"\n    [avatarStyle]=\"bannedMembersConfiguration.avatarStyle\"\n    [statusIndicatorStyle]=\"bannedMembersConfiguration.statusIndicatorStyle\"\n    [loadingStateView]=\"bannedMembersConfiguration.loadingStateView\"\n    [loadingIconURL]=\"bannedMembersConfiguration.loadingIconURL\"\n    [errorStateView]=\"bannedMembersConfiguration.errorStateView\"\n    [emptyStateView]=\"bannedMembersConfiguration.emptyStateView\"\n    [onSelect]=\"bannedMembersConfiguration.onSelect\"\n    [onError]=\"bannedMembersConfiguration.onError\"\n    [hideError]=\"bannedMembersConfiguration.hideError\"\n    [hideSearch]=\"bannedMembersConfiguration.hideSearch\"\n    [searchIconURL]=\"bannedMembersConfiguration.searchIconURL\"\n    [selectionMode]=\"bannedMembersConfiguration.selectionMode\"\n    [hideSeparator]=\"bannedMembersConfiguration.hideSeparator\"\n    [showBackButton]=\"bannedMembersConfiguration.showBackButton\"\n    [backButtonIconURL]=\"bannedMembersConfiguration.backButtonIconURL\"\n    [closeButtonIconURL]=\"bannedMembersConfiguration.closeButtonIconURL\"\n    [options]=\"bannedMembersConfiguration.options\"\n    [menu]=\"bannedMembersConfiguration.menu\"\n    [disableUsersPresence]=\"bannedMembersConfiguration.disableUsersPresence\"\n    [subtitleView]=\"bannedMembersConfiguration.subtitleView\" [group]=\"group\"\n    [onClose]=\"onCloseDetails\"\n    [onBack]=\"bannedMembersConfiguration.onBack || bannedMembers\">\n  </cometchat-banned-members>\n</div>\n<div class=\"cc-details__view\" *ngIf=\"openViewMembersPage\">\n  <cometchat-group-members\n    [groupMembersRequestBuilder]=\"groupMembersConfiguration?.groupMembersRequestBuilder!\"\n    [searchRequestBuilder]=\"groupMembersConfiguration?.searchRequestBuilder!\"\n    [titleAlignment]=\"groupMembersConfiguration.titleAlignment\"\n    [listItemStyle]=\"groupMembersConfiguration.listItemStyle\"\n    [groupMembersStyle]=\"groupMembersConfiguration.groupMembersStyle\"\n    [avatarStyle]=\"groupMembersConfiguration.avatarStyle\"\n    [statusIndicatorStyle]=\"groupMembersConfiguration.statusIndicatorStyle\"\n    [loadingStateView]=\"groupMembersConfiguration.loadingStateView\"\n    [loadingIconURL]=\"groupMembersConfiguration.loadingIconURL\"\n    [errorStateView]=\"groupMembersConfiguration.errorStateView\"\n    [emptyStateView]=\"groupMembersConfiguration.emptyStateView\"\n    [onSelect]=\"groupMembersConfiguration.onSelect\"\n    [onError]=\"groupMembersConfiguration.onError\"\n    [hideError]=\"groupMembersConfiguration.hideError\"\n    [hideSearch]=\"groupMembersConfiguration.hideSearch\"\n    [searchIconURL]=\"groupMembersConfiguration.searchIconURL\"\n    [selectionMode]=\"groupMembersConfiguration.selectionMode\"\n    [backdropStyle]=\"groupMembersConfiguration.backdropStyle\"\n    [hideSeparator]=\"groupMembersConfiguration.hideSeparator\"\n    [showBackButton]=\"groupMembersConfiguration.showBackButton\"\n    [backButtonIconURL]=\"groupMembersConfiguration.backButtonIconURL\"\n    [closeButtonIconURL]=\"groupMembersConfiguration.closeButtonIconURL\"\n    [options]=\"groupMembersConfiguration.options\"\n    [menu]=\"groupMembersConfiguration.menu\"\n    [disableUsersPresence]=\"groupMembersConfiguration.disableUsersPresence\"\n    [subtitleView]=\"groupMembersConfiguration.subtitleView\"\n    [groupScopeStyle]=\"groupMembersConfiguration.groupScopeStyle\"\n    [group]=\"group\"\n    [onClose]=\" groupMembersConfiguration.onClose || onCloseDetails\"\n    [onBack]=\"groupMembersConfiguration.onBack || viewMembers\">\n  </cometchat-group-members>\n</div>\n\n<cometchat-backdrop [backdropStyle]=\"backdropStyle\"\n  *ngIf=\"confirmLeaveGroupModal\">\n  <cometchat-confirm-dialog [title]=\"''\" [messageText]=\"leaveGroupDialogMessage\"\n    [cancelButtonText]=\"leaveGroupCancelButtonText\"\n    [confirmButtonText]=\"leaveGroupConfirmButtonText\"\n    (cc-confirm-clicked)=\"onLeaveClick()\" (cc-cancel-clicked)=\"onCancelClick()\"\n    [confirmDialogStyle]=\"leaveGroupDialogStyle\">\n  </cometchat-confirm-dialog>\n</cometchat-backdrop>\n<cometchat-backdrop [backdropStyle]=\"backdropStyle\" *ngIf=\"showTransferDialog\">\n  <cometchat-confirm-dialog [title]=\"''\"\n    [messageText]=\"transferOwnershipDialogMessage\"\n    [cancelButtonText]=\"transferOwnershipCancelButtonText\"\n    [confirmButtonText]=\"transferOwnershipConfirmButtonText\"\n    (cc-confirm-clicked)=\"onTransferClick()\"\n    (cc-cancel-clicked)=\"onCancelClick()\"\n    [confirmDialogStyle]=\"transferOwnershipDialogStyle\">\n  </cometchat-confirm-dialog>\n</cometchat-backdrop>\n<cometchat-backdrop [backdropStyle]=\"backdropStyle\"\n  *ngIf=\"openTransferOwnershipModal\">\n  <cometchat-transfer-ownership\n    [groupMembersRequestBuilder]=\"transferOwnershipConfiguration?.groupMembersRequestBuilder\"\n    [transferOwnershipStyle]=\"transferOwnershipConfiguration.transferOwnershipStyle\"\n    [onTransferOwnership]=\"transferOwnershipConfiguration.onTransferOwnership\"\n    [titleAlignment]=\"transferOwnershipConfiguration.titleAlignment\"\n    [listItemStyle]=\"transferOwnershipConfiguration.listItemStyle\"\n    [avatarStyle]=\"transferOwnershipConfiguration.avatarStyle\"\n    [statusIndicatorStyle]=\"transferOwnershipConfiguration.statusIndicatorStyle\"\n    [loadingStateView]=\"transferOwnershipConfiguration.loadingStateView\"\n    [loadingIconURL]=\"transferOwnershipConfiguration.loadingIconURL\"\n    [errorStateView]=\"transferOwnershipConfiguration.errorStateView\"\n    [emptyStateView]=\"transferOwnershipConfiguration.emptyStateView\"\n    [onError]=\"transferOwnershipConfiguration.onError\"\n    [hideSearch]=\"transferOwnershipConfiguration.hideSearch\"\n    [searchIconURL]=\"transferOwnershipConfiguration.searchIconURL\"\n    [hideSeparator]=\"transferOwnershipConfiguration.hideSeparator\"\n    [closeButtonIconURL]=\"transferOwnershipConfiguration.closeButtonIconURL\"\n    [options]=\"transferOwnershipConfiguration.options\"\n    [disableUsersPresence]=\"transferOwnershipConfiguration.disableUsersPresence\"\n    [subtitleView]=\"transferOwnershipConfiguration.subtitleView\" [group]=\"group\"\n    [onClose]=\"transferOwnershipConfiguration.onClose || openTransferOwnership\">\n  </cometchat-transfer-ownership>\n</cometchat-backdrop>\n<cometchat-backdrop [backdropStyle]=\"backdropStyle\" *ngIf=\"deleteGroupModal\">\n  <cometchat-confirm-dialog [title]=\"''\"\n    [messageText]=\"deleteGroupDialogMessage\"\n    [cancelButtonText]=\"deleteGroupCancelButtonText\"\n    [confirmButtonText]=\"deleteGroupConfirmButtonText\"\n    (cc-confirm-clicked)=\"deleteGroup()\" (cc-cancel-clicked)=\"onCancelClick()\"\n    [confirmDialogStyle]=\"deleteGroupDialogStyle\">\n  </cometchat-confirm-dialog>\n</cometchat-backdrop>\n", styles: ["*{box-sizing:border-box;margin:0;padding:0}.cc-details__wrapper{padding:8px;border-radius:5px;height:100%;overflow:hidden}.cc-details__profile{margin-bottom:50px;height:8%}.cc-details__section-list{height:84%;width:100%;overflow-y:auto;overflow-x:hidden}.cc-details__header{display:flex;justify-content:center;align-items:center;margin-bottom:30px}.cc-details__close-button{position:absolute;right:20px}.cc-details__section{margin-bottom:32px}.cc-details__section-separator{margin-bottom:16px;padding-left:6px;height:5%}.cc-details__options-wrapper{list-style:none;padding:0;display:flex;flex-direction:column;gap:8px}.cc-details__option{display:flex;flex-direction:column;justify-content:space-evenly;min-height:50px}.cc-details__option-title{padding-bottom:12px;display:flex;align-items:center;justify-content:space-between}.cc-details__view{position:absolute;top:0;left:0;height:100%;width:100%;max-height:100%;overflow-y:auto;overflow-x:hidden;max-width:100%;z-index:1}.cc-details__section-list::-webkit-scrollbar{background:transparent;width:8px}.cc-details__section-list::-webkit-scrollbar-thumb{background:#e8e5e5;border-radius:8px}.cc-details__leavedialog,.cc-details__transferownership{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);height:-moz-fit-content;height:fit-content;width:100%;z-index:2}\n"] }]
         }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }, { type: CometChatThemeService }]; }, propDecorators: { group: [{
                 type: Input
             }], user: [{
@@ -17119,10 +17171,10 @@ class CometChatMessagesComponent {
     }
 }
 CometChatMessagesComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: CometChatMessagesComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: CometChatThemeService }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
-CometChatMessagesComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: CometChatMessagesComponent, selector: "cometchat-messages", inputs: { user: "user", group: "group", currentAskAIBot: "currentAskAIBot", hideMessageComposer: "hideMessageComposer", disableTyping: "disableTyping", messageHeaderConfiguration: "messageHeaderConfiguration", messageListConfiguration: "messageListConfiguration", messageComposerConfiguration: "messageComposerConfiguration", threadedMessageConfiguration: "threadedMessageConfiguration", detailsConfiguration: "detailsConfiguration", customSoundForIncomingMessages: "customSoundForIncomingMessages", customSoundForOutgoingMessages: "customSoundForOutgoingMessages", disableSoundForMessages: "disableSoundForMessages", messagesStyle: "messagesStyle", messageHeaderView: "messageHeaderView", messageComposerView: "messageComposerView", messageListView: "messageListView", hideMessageHeader: "hideMessageHeader", hideDetails: "hideDetails", auxiliaryMenu: "auxiliaryMenu" }, viewQueries: [{ propertyName: "messageComposerRef", first: true, predicate: ["messageComposerRef"], descendants: true }, { propertyName: "messageListRef", first: true, predicate: ["messageListRef"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div class=\"cc-messages__wrapper\">\n  <cometchat-backdrop *ngIf=\"showAiBotChat\">\n    <aiassist-bot-message-list [user]=\"user\" [group]=\"group\"\n      [currentAskAIBot]=\"currentAskAIBot\"></aiassist-bot-message-list>\n  </cometchat-backdrop>\n  <div class=\"cc-messages\" [ngStyle]=\"chatListStyle()\" *ngIf=\"user || group\">\n    <div class=\"cc-messages__header\" *ngIf=\"!hideMessageHeader\">\n      <div *ngIf=\"messageHeaderView; else customHeaderView\"\n        class=\"cc-messages__header-customview\">\n        <ng-container\n          *ngTemplateOutlet=\"messageHeaderView;context:{  user: user, group: group }\">\n        </ng-container>\n      </div>\n      <ng-template #customHeaderView>\n        <cometchat-message-header [user]=\"user\" [group]=\"group\"\n          [subtitleView]=\"messageHeaderConfiguration.subtitleView\"\n          [disableUsersPresence]=\"messageHeaderConfiguration.disableUsersPresence\"\n          [protectedGroupIcon]=\"messageHeaderConfiguration.protectedGroupIcon\"\n          [passwordGroupIcon]=\"messageHeaderConfiguration.passwordGroupIcon\"\n          [privateGroupIcon]=\"messageHeaderConfiguration.privateGroupIcon\"\n          [menu]=\"headerMenu\"\n          [messageHeaderStyle]=\"messageHeaderConfiguration.messageHeaderStyle\"\n          [backButtonIconURL]=\"messageHeaderConfiguration.backButtonIconURL\"\n          [hideBackButton]=\"messageHeaderConfiguration.hideBackButton\"\n          [onError]=\"messageHeaderConfiguration.onError\"\n          [onBack]=\"messageHeaderConfiguration.onBack\"\n          [listItemStyle]=\"messageHeaderConfiguration.listItemStyle\"\n          [statusIndicatorStyle]=\"messageHeaderConfiguration.statusIndicatorStyle\"\n          [avatarStyle]=\"messageHeaderConfiguration.avatarStyle\">\n        </cometchat-message-header>\n      </ng-template>\n    </div>\n    <div class=\"cc-messages__list\" *ngIf=\"!messageListView\">\n      <cometchat-message-list #messageListRef\n        [disableReactions]=\"messageListConfiguration?.disableReactions!\"\n        [emojiKeyboardStyle]=\"messageListConfiguration?.emojiKeyboardStyle!\"\n        [threadIndicatorIcon]=\"messageListConfiguration?.threadIndicatorIcon!\"\n        [reactionsConfiguration]=\"messageListConfiguration?.reactionsConfiguration!\"\n        [messageInformationConfiguration]=\"\n        messageListConfiguration.messageInformationConfiguration\"\n        [disableSoundForMessages]=\"disableSoundForMessages\"\n        [customSoundForMessages]=\"customSoundForIncomingMessages\"\n        [emptyStateView]=\"messageListConfiguration.emptyStateView\"\n        [loadingIconURL]=\"messageListConfiguration?.loadingIconURL!\"\n        [loadingStateView]=\"messageListConfiguration.loadingStateView\"\n        [user]=\"user\" [group]=\"group\"\n        [errorStateView]=\"messageListConfiguration.errorStateView\"\n        [disableReceipt]=\"messageListConfiguration.disableReceipt\"\n        [readIcon]=\"messageListConfiguration.readIcon\"\n        [deliveredIcon]=\"messageListConfiguration.deliveredIcon\"\n        [sentIcon]=\"messageListConfiguration.sentIcon\"\n        [waitIcon]=\"messageListConfiguration.waitIcon\"\n        [errorIcon]=\"messageListConfiguration.errorIcon\"\n        [alignment]=\"messageListConfiguration.alignment\"\n        [showAvatar]=\"messageListConfiguration.showAvatar\"\n        [datePattern]=\"messageListConfiguration.datePattern\"\n        [timestampAlignment]=\"messageListConfiguration.timestampAlignment\"\n        [DateSeparatorPattern]=\"messageListConfiguration.DateSeparatorPattern\"\n        [templates]=\"messageListConfiguration.templates\"\n        [messagesRequestBuilder]=\"messageListConfiguration.messagesRequestBuilder\"\n        [thresholdValue]=\"messageListConfiguration.thresholdValue\"\n        [onThreadRepliesClick]=\"messageListConfiguration.onThreadRepliesClick || openThreadView\"\n        [headerView]=\"messageListConfiguration.headerView\"\n        [footerView]=\"messageListConfiguration.footerView\"\n        [avatarStyle]=\"messageListConfiguration.avatarStyle\"\n        [scrollToBottomOnNewMessages]=\"messageListConfiguration.scrollToBottomOnNewMessages\"\n        [backdropStyle]=\"messageListConfiguration.backdropStyle\"\n        [dateSeparatorStyle]=\"messageListConfiguration.dateSeparatorStyle\"\n        [messageListStyle]=\"messageListConfiguration.messageListStyle\"\n        [onError]=\"messageListConfiguration.onError\"\n        [hideError]=\"messageListConfiguration.hideError\"\n        [disableMentions]=\"messageListConfiguration.disableMentions\"\n        [textFormatters]=\"messageListConfiguration?.textFormatters\">\n      </cometchat-message-list>\n    </div>\n    <ng-container *ngIf=\"messageListView\">\n      <ng-container\n        *ngTemplateOutlet=\"messageListView;context:{  user: user, group: group }\">\n      </ng-container>\n    </ng-container>\n\n    <div class=\"cc-messages__composer\"\n      *ngIf=\"!messageComposerView && !hideMessageComposer\">\n      <cometchat-message-composer #messageComposerRef\n        [hideVoiceRecording]=\"messageComposerConfiguration.hideVoiceRecording\"\n        [disableSoundForMessages]=\"disableSoundForMessages\"\n        [voiceRecordingStopIconURL]=\"messageComposerConfiguration.voiceRecordingStopIconURL\"\n        [voiceRecordingStartIconURL]=\"messageComposerConfiguration.voiceRecordingStartIconURL\"\n        [voiceRecordingCloseIconURL]=\"messageComposerConfiguration.voiceRecordingCloseIconURL\"\n        [voiceRecordingSubmitIconURL]=\"messageComposerConfiguration.voiceRecordingSubmitIconURL\"\n        [mediaRecorderStyle]=\"messageComposerConfiguration.mediaRecorderStyle\"\n        [customSoundForMessages]=\"customSoundForOutgoingMessages\" [user]=\"user\"\n        [group]=\"group\" [text]=\"messageComposerConfiguration.text\"\n        [headerView]=\"messageComposerConfiguration.headerView\"\n        [onTextChange]=\"messageComposerConfiguration.onTextChange\"\n        [attachmentIconURL]=\"messageComposerConfiguration.attachmentIconURL\"\n        [attachmentOptions]=\"messageComposerConfiguration.attachmentOptions\"\n        [secondaryButtonView]=\"messageComposerConfiguration.secondaryButtonView\"\n        [auxilaryButtonView]=\"messageComposerConfiguration.auxilaryButtonView\"\n        [auxiliaryButtonsAlignment]=\"messageComposerConfiguration.auxiliaryButtonsAlignment\"\n        [sendButtonView]=\"messageComposerConfiguration.sendButtonView\"\n        [hideLiveReaction]=\"messageComposerConfiguration.hideLiveReaction\"\n        [LiveReactionIconURL]=\"messageComposerConfiguration.LiveReactionIconURL\"\n        [messageComposerStyle]=\"messageComposerConfiguration.messageComposerStyle\"\n        [onSendButtonClick]=\"messageComposerConfiguration.onSendButtonClick\"\n        [onSendButtonClick]=\"messageComposerConfiguration.onSendButtonClick\"\n        [onError]=\"messageComposerConfiguration.onError\"\n        [actionSheetStyle]=\"messageComposerConfiguration.actionSheetStyle\"\n        [aiOptionsStyle]=\"messageComposerConfiguration.AIOptionsStyle\"\n        [aiIconURL]=\"messageComposerConfiguration.AIIconURL\"\n        [userMemberWrapperConfiguration]=\"messageComposerConfiguration.userMemberWrapperConfiguration\"\n        [textFormatters]=\"messageComposerConfiguration?.textFormatters\"\n        [disableMentions]=\"messageComposerConfiguration.disableMentions\"\n        [mentionsWarningText]=\"messageComposerConfiguration?.mentionsWarningText\"\n        [mentionsWarningStyle]=\"messageComposerConfiguration?.mentionsWarningStyle\">\n      </cometchat-message-composer>\n    </div>\n    <div *ngIf=\"messageComposerView && !hideMessageComposer\"\n      class=\"cc-messages__composer--customview\">\n      <ng-container\n        *ngTemplateOutlet=\"messageComposerView;context:{  user: user, group: group }\">\n      </ng-container>\n    </div>\n  </div>\n  <div class=\"cc-messages__livereaction\">\n    <cometchat-live-reaction *ngIf=\"liveReaction\"\n      [reactionIconURL]=\"reactionName\"\n      [liveReactionStyle]=\"liveReactionStyle\"></cometchat-live-reaction>\n  </div>\n  <div *ngIf=\"openThreadedMessages\" class=\"cc-messages__threadedmessages\">\n    <cometchat-threaded-messages [onClose]=\"closeThreadView\"\n      [threadedMessagesStyle]=\"threadedMessageConfiguration.threadedMessagesStyle\"\n      [messageActionView]=\"threadedMessageConfiguration.messageActionView\"\n      [closeIconURL]=\"threadedMessageConfiguration.closeIconURL\"\n      [onError]=\"threadedMessageConfiguration.onError\"\n      [bubbleView]=\"threadedMessageConfiguration.bubbleView || parentBubbleView\"\n      [parentMessage]=\"threadMessageObject\" [user]=\"user\" [group]=\"group\"\n      [messageListConfiguration]=\"threadedMessageConfiguration.messageListConfiguration\"\n      [messageComposerView]=\"threadedMessageConfiguration.messageComposerView\"\n      [messageListView]=\"threadedMessageConfiguration.messageListView\"\n      [hideMessageComposer]=\"threadedMessageConfiguration.hideMessageComposer\"\n      [messageComposerConfiguration]=\"threadedMessageConfiguration.messageComposerConfiguration\"\n      [disableSoundForMessages]=\"threadedMessageConfiguration.disableSoundForMessages\"\n      ></cometchat-threaded-messages>\n  </div>\n\n  <div *ngIf=\"openDetails\" class=\"cc-messages__details\">\n    <cometchat-details\n      [protectedGroupIcon]=\"detailsConfiguration.protectedGroupIcon\"\n      [passwordGroupIcon]=\"detailsConfiguration.passwordGroupIcon\"\n      [privateGroupIcon]=\"detailsConfiguration.privateGroupIcon\"\n      [backdropStyle]=\"detailsConfiguration.backdropStyle\"\n      [disableUsersPresence]=\"detailsConfiguration?.disableUsersPresence!\"\n      [transferOwnershipConfiguration]=\"detailsConfiguration.transferOwnershipConfiguration\"\n      [groupMembersConfiguration]=\"detailsConfiguration.groupMembersConfiguration\"\n      [bannedMembersConfiguration]=\"detailsConfiguration.bannedMembersConfiguration\"\n      [addMembersConfiguration]=\"detailsConfiguration.addMembersConfiguration\"\n      [onClose]=\"detailsConfiguration.onClose || closeDetailsPage\"\n      [listItemStyle]=\"detailsConfiguration.listItemStyle\"\n      [detailsStyle]=\"detailsConfiguration.detailsStyle\"\n      [avatarStyle]=\"detailsConfiguration.avatarStyle\"\n      [statusIndicatorStyle]=\"detailsConfiguration.statusIndicatorStyle\"\n      [leaveDialogStyle]=\"detailsConfiguration.leaveDialogStyle\"\n      [data]=\"setDetailsTemplate()\"\n      [customProfileView]=\"detailsConfiguration.customProfileView\"\n      [subtitleView]=\"detailsConfiguration.subtitleView\"\n      [hideProfile]=\"detailsConfiguration.hideProfile\"\n      [onError]=\"detailsConfiguration.onError\"\n      [closeButtonIconURL]=\"detailsConfiguration.closeButtonIconURL\"\n      [user]=\"user\" [group]=\"group\"></cometchat-details>\n  </div>\n</div>\n<ng-template #headerMenu>\n  <div class=\"cc-messages__headermenu\">\n    <div class=\"cc-messages__auxiliarymenu\"\n      *ngIf=\"getAuxilaryView(); else elseBlock\">\n      <ng-container\n        *ngTemplateOutlet=\"getAuxilaryView();context:{  user: user, group: group }\">\n      </ng-container>\n    </div>\n    <ng-template #elseBlock>\n      <cometchat-call-buttons *ngIf=\"enableCalling\" voiceCallIconText=\"\"\n        videoCallIconText=\"\" [user]=\"user\" [group]=\"group\"\n        [callButtonsStyle]=\"callButtonsStyle\">\n      </cometchat-call-buttons>\n    </ng-template>\n    <cometchat-button *ngIf=\"!hideDetails\" [iconURL]=\"infoIconStyle\"\n      [buttonStyle]=\"detailsButtonStyle\"\n      (cc-button-clicked)=\"openDetailsPage()\"></cometchat-button>\n  </div>\n</ng-template>\n", styles: ["*{box-sizing:border-box;margin:0;padding:0}.cc-messages__wrapper{position:relative;height:100%;width:100%}.cc-messages{display:flex;flex-direction:column;position:relative;height:100%;width:100%;box-sizing:border-box;justify-content:space-between}.cc-messages__headermenu{display:flex;justify-content:center;align-items:center}.cc-messages__threadedmessages,.cc-messages__details{position:absolute;top:0;left:0;height:100%;width:100%;max-height:100%;overflow-y:auto;overflow-x:hidden;max-width:100%;z-index:1}.cc-messages__header{width:100%}.cc-messages__list{overflow:hidden;width:100%;height:100%}cometchat-threaded-messages{height:100%;display:flex}.cc-messages__composer{width:100%;display:flex;flex-direction:column;justify-content:flex-end}\n"], components: [{ type: AIAssistBotMessageListComponent, selector: "aiassist-bot-message-list", inputs: ["hideSearch", "footerView", "user", "group", "currentAskAIBot", "subtitleText", "sendIconUrl", "waitIcon", "errorIcon", "botFirstMessageText", "closeButtonIconURL", "sendButtonIconURL", "avatarStyle", "aiBotChatHeaderStyle", "aiBotChatContainerStyle", "datePattern", "alignment"] }, { type: CometChatMessageHeaderComponent, selector: "cometchat-message-header", inputs: ["avatarStyle", "statusIndicatorStyle", "messageHeaderStyle", "listItemStyle", "subtitleView", "disableUsersPresence", "disableTyping", "protectedGroupIcon", "passwordGroupIcon", "privateGroupIcon", "menu", "user", "group", "backButtonIconURL", "hideBackButton", "listItemView", "onError", "onBack"] }, { type: CometChatMessageListComponent, selector: "cometchat-message-list", inputs: ["hideError", "hideDateSeparator", "errorStateView", "loadingStateView", "emptyStateView", "errorStateText", "emptyStateText", "loadingIconURL", "user", "group", "disableReceipt", "disableSoundForMessages", "customSoundForMessages", "readIcon", "deliveredIcon", "sentIcon", "waitIcon", "errorIcon", "aiErrorIcon", "aiEmptyIcon", "alignment", "showAvatar", "datePattern", "timestampAlignment", "DateSeparatorPattern", "templates", "messagesRequestBuilder", "newMessageIndicatorText", "scrollToBottomOnNewMessages", "thresholdValue", "unreadMessageThreshold", "reactionsConfiguration", "disableReactions", "emojiKeyboardStyle", "apiConfiguration", "onThreadRepliesClick", "headerView", "footerView", "parentMessageId", "threadIndicatorIcon", "avatarStyle", "backdropStyle", "dateSeparatorStyle", "messageListStyle", "onError", "messageInformationConfiguration", "disableMentions", "textFormatters"] }, { type: CometChatMessageComposerComponent, selector: "cometchat-message-composer", inputs: ["user", "group", "disableSoundForMessages", "customSoundForMessage", "disableTypingEvents", "text", "placeholderText", "headerView", "onTextChange", "attachmentIconURL", "attachmentOptions", "secondaryButtonView", "auxilaryButtonView", "auxiliaryButtonsAlignment", "sendButtonView", "parentMessageId", "hideLiveReaction", "LiveReactionIconURL", "backButtonIconURL", "mentionsWarningText", "mentionsWarningStyle", "messageComposerStyle", "onSendButtonClick", "onError", "backdropStyle", "actionSheetStyle", "aiActionSheetStyle", "hideVoiceRecording", "mediaRecorderStyle", "aiOptionsStyle", "aiIconURL", "voiceRecordingIconURL", "voiceRecordingCloseIconURL", "voiceRecordingStartIconURL", "voiceRecordingStopIconURL", "voiceRecordingSubmitIconURL", "hideLayoutMode", "emojiIconURL", "userMemberWrapperConfiguration", "disableMentions", "textFormatters"], outputs: ["childEvent"] }, { type: CometChatThreadedMessagesComponent, selector: "cometchat-threaded-messages", inputs: ["onClose", "onError", "parentMessage", "title", "closeIconURL", "bubbleView", "messageActionView", "messageListConfiguration", "userMemberWrapperConfiguration", "messageComposerConfiguration", "threadedMessagesStyle", "hideMessageComposer", "messageComposerView", "messageListView", "disableSoundForMessages"] }, { type: CometChatDetailsComponent, selector: "cometchat-details", inputs: ["group", "user", "title", "closeButtonIconURL", "hideProfile", "subtitleView", "customProfileView", "data", "disableUsersPresence", "privateGroupIcon", "protectedGroupIcon", "passwordGroupIcon", "onError", "onClose", "leaveGroupConfirmButtonText", "leaveGroupCancelButtonText", "leaveGroupDialogMessage", "leaveGroupDialogStyle", "deleteGroupConfirmButtonText", "deleteGroupDialogMessage", "deleteGroupCancelButtonText", "deleteGroupDialogStyle", "transferOwnershipConfirmButtonText", "transferOwnershipDialogMessage", "transferOwnershipCancelButtonText", "transferOwnershipDialogStyle", "addMembersConfiguration", "bannedMembersConfiguration", "groupMembersConfiguration", "transferOwnershipConfiguration", "statusIndicatorStyle", "backdropStyle", "avatarStyle", "detailsStyle", "listItemStyle"] }, { type: CometChatCallButtonsComponent, selector: "cometchat-call-buttons", inputs: ["user", "group", "voiceCallIconURL", "voiceCallIconText", "voiceCallIconHoverText", "videoCallIconURL", "videoCallIconText", "videoCallIconHoverText", "onVoiceCallClick", "onVideoCallClick", "onError", "callButtonsStyle", "outgoingCallConfiguration", "ongoingCallConfiguration"] }], directives: [{ type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i3.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { type: i3.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+CometChatMessagesComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: CometChatMessagesComponent, selector: "cometchat-messages", inputs: { user: "user", group: "group", currentAskAIBot: "currentAskAIBot", hideMessageComposer: "hideMessageComposer", disableTyping: "disableTyping", messageHeaderConfiguration: "messageHeaderConfiguration", messageListConfiguration: "messageListConfiguration", messageComposerConfiguration: "messageComposerConfiguration", threadedMessageConfiguration: "threadedMessageConfiguration", detailsConfiguration: "detailsConfiguration", customSoundForIncomingMessages: "customSoundForIncomingMessages", customSoundForOutgoingMessages: "customSoundForOutgoingMessages", disableSoundForMessages: "disableSoundForMessages", messagesStyle: "messagesStyle", messageHeaderView: "messageHeaderView", messageComposerView: "messageComposerView", messageListView: "messageListView", hideMessageHeader: "hideMessageHeader", hideDetails: "hideDetails", auxiliaryMenu: "auxiliaryMenu" }, viewQueries: [{ propertyName: "messageComposerRef", first: true, predicate: ["messageComposerRef"], descendants: true }, { propertyName: "messageListRef", first: true, predicate: ["messageListRef"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div class=\"cc-messages__wrapper\">\n  <cometchat-backdrop *ngIf=\"showAiBotChat\">\n    <aiassist-bot-message-list [user]=\"user\" [group]=\"group\"\n      [currentAskAIBot]=\"currentAskAIBot\"></aiassist-bot-message-list>\n  </cometchat-backdrop>\n  <div class=\"cc-messages\" [ngStyle]=\"chatListStyle()\" *ngIf=\"user || group\">\n    <div class=\"cc-messages__header\" *ngIf=\"!hideMessageHeader\">\n      <div *ngIf=\"messageHeaderView; else customHeaderView\"\n        class=\"cc-messages__header-customview\">\n        <ng-container\n          *ngTemplateOutlet=\"messageHeaderView;context:{  user: user, group: group }\">\n        </ng-container>\n      </div>\n      <ng-template #customHeaderView>\n        <cometchat-message-header [user]=\"user\" [group]=\"group\"\n          [subtitleView]=\"messageHeaderConfiguration.subtitleView\"\n          [disableUsersPresence]=\"messageHeaderConfiguration.disableUsersPresence\"\n          [protectedGroupIcon]=\"messageHeaderConfiguration.protectedGroupIcon\"\n          [passwordGroupIcon]=\"messageHeaderConfiguration.passwordGroupIcon\"\n          [privateGroupIcon]=\"messageHeaderConfiguration.privateGroupIcon\"\n          [menu]=\"headerMenu\"\n          [messageHeaderStyle]=\"messageHeaderConfiguration.messageHeaderStyle\"\n          [backButtonIconURL]=\"messageHeaderConfiguration.backButtonIconURL\"\n          [hideBackButton]=\"messageHeaderConfiguration.hideBackButton\"\n          [onError]=\"messageHeaderConfiguration.onError\"\n          [onBack]=\"messageHeaderConfiguration.onBack\"\n          [listItemStyle]=\"messageHeaderConfiguration.listItemStyle\"\n          [statusIndicatorStyle]=\"messageHeaderConfiguration.statusIndicatorStyle\"\n          [avatarStyle]=\"messageHeaderConfiguration.avatarStyle\">\n        </cometchat-message-header>\n      </ng-template>\n    </div>\n    <div class=\"cc-messages__list\" *ngIf=\"!messageListView\">\n      <cometchat-message-list #messageListRef\n        [disableReactions]=\"messageListConfiguration?.disableReactions!\"\n        [emojiKeyboardStyle]=\"messageListConfiguration?.emojiKeyboardStyle!\"\n        [threadIndicatorIcon]=\"messageListConfiguration?.threadIndicatorIcon!\"\n        [reactionsConfiguration]=\"messageListConfiguration?.reactionsConfiguration!\"\n        [messageInformationConfiguration]=\"\n        messageListConfiguration.messageInformationConfiguration\"\n        [disableSoundForMessages]=\"disableSoundForMessages\"\n        [customSoundForMessages]=\"customSoundForIncomingMessages\"\n        [emptyStateView]=\"messageListConfiguration.emptyStateView\"\n        [loadingIconURL]=\"messageListConfiguration?.loadingIconURL!\"\n        [loadingStateView]=\"messageListConfiguration.loadingStateView\"\n        [user]=\"user\" [group]=\"group\"\n        [errorStateView]=\"messageListConfiguration.errorStateView\"\n        [disableReceipt]=\"messageListConfiguration.disableReceipt\"\n        [hideReceipt]=\"messageListConfiguration.hideReceipt\"\n        [readIcon]=\"messageListConfiguration.readIcon\"\n        [deliveredIcon]=\"messageListConfiguration.deliveredIcon\"\n        [sentIcon]=\"messageListConfiguration.sentIcon\"\n        [waitIcon]=\"messageListConfiguration.waitIcon\"\n        [errorIcon]=\"messageListConfiguration.errorIcon\"\n        [alignment]=\"messageListConfiguration.alignment\"\n        [showAvatar]=\"messageListConfiguration.showAvatar\"\n        [datePattern]=\"messageListConfiguration.datePattern\"\n        [timestampAlignment]=\"messageListConfiguration.timestampAlignment\"\n        [DateSeparatorPattern]=\"messageListConfiguration.DateSeparatorPattern\"\n        [templates]=\"messageListConfiguration.templates\"\n        [messagesRequestBuilder]=\"messageListConfiguration.messagesRequestBuilder\"\n        [thresholdValue]=\"messageListConfiguration.thresholdValue\"\n        [onThreadRepliesClick]=\"messageListConfiguration.onThreadRepliesClick || openThreadView\"\n        [headerView]=\"messageListConfiguration.headerView\"\n        [footerView]=\"messageListConfiguration.footerView\"\n        [avatarStyle]=\"messageListConfiguration.avatarStyle\"\n        [scrollToBottomOnNewMessages]=\"messageListConfiguration.scrollToBottomOnNewMessages\"\n        [backdropStyle]=\"messageListConfiguration.backdropStyle\"\n        [dateSeparatorStyle]=\"messageListConfiguration.dateSeparatorStyle\"\n        [messageListStyle]=\"messageListConfiguration.messageListStyle\"\n        [onError]=\"messageListConfiguration.onError\"\n        [hideError]=\"messageListConfiguration.hideError\"\n        [disableMentions]=\"messageListConfiguration.disableMentions\"\n        [textFormatters]=\"messageListConfiguration?.textFormatters\">\n      </cometchat-message-list>\n    </div>\n    <ng-container *ngIf=\"messageListView\">\n      <ng-container\n        *ngTemplateOutlet=\"messageListView;context:{  user: user, group: group }\">\n      </ng-container>\n    </ng-container>\n\n    <div class=\"cc-messages__composer\"\n      *ngIf=\"!messageComposerView && !hideMessageComposer\">\n      <cometchat-message-composer #messageComposerRef\n        [hideVoiceRecording]=\"messageComposerConfiguration.hideVoiceRecording\"\n        [disableSoundForMessages]=\"disableSoundForMessages\"\n        [voiceRecordingStopIconURL]=\"messageComposerConfiguration.voiceRecordingStopIconURL\"\n        [voiceRecordingStartIconURL]=\"messageComposerConfiguration.voiceRecordingStartIconURL\"\n        [voiceRecordingCloseIconURL]=\"messageComposerConfiguration.voiceRecordingCloseIconURL\"\n        [voiceRecordingSubmitIconURL]=\"messageComposerConfiguration.voiceRecordingSubmitIconURL\"\n        [mediaRecorderStyle]=\"messageComposerConfiguration.mediaRecorderStyle\"\n        [customSoundForMessages]=\"customSoundForOutgoingMessages\" [user]=\"user\"\n        [group]=\"group\" [text]=\"messageComposerConfiguration.text\"\n        [headerView]=\"messageComposerConfiguration.headerView\"\n        [onTextChange]=\"messageComposerConfiguration.onTextChange\"\n        [attachmentIconURL]=\"messageComposerConfiguration.attachmentIconURL\"\n        [attachmentOptions]=\"messageComposerConfiguration.attachmentOptions\"\n        [secondaryButtonView]=\"messageComposerConfiguration.secondaryButtonView\"\n        [auxilaryButtonView]=\"messageComposerConfiguration.auxilaryButtonView\"\n        [auxiliaryButtonsAlignment]=\"messageComposerConfiguration.auxiliaryButtonsAlignment\"\n        [sendButtonView]=\"messageComposerConfiguration.sendButtonView\"\n        [hideLiveReaction]=\"messageComposerConfiguration.hideLiveReaction\"\n        [LiveReactionIconURL]=\"messageComposerConfiguration.LiveReactionIconURL\"\n        [messageComposerStyle]=\"messageComposerConfiguration.messageComposerStyle\"\n        [onSendButtonClick]=\"messageComposerConfiguration.onSendButtonClick\"\n        [onSendButtonClick]=\"messageComposerConfiguration.onSendButtonClick\"\n        [onError]=\"messageComposerConfiguration.onError\"\n        [actionSheetStyle]=\"messageComposerConfiguration.actionSheetStyle\"\n        [aiOptionsStyle]=\"messageComposerConfiguration.AIOptionsStyle\"\n        [aiIconURL]=\"messageComposerConfiguration.AIIconURL\"\n        [userMemberWrapperConfiguration]=\"messageComposerConfiguration.userMemberWrapperConfiguration\"\n        [textFormatters]=\"messageComposerConfiguration?.textFormatters\"\n        [disableMentions]=\"messageComposerConfiguration.disableMentions\"\n        [mentionsWarningText]=\"messageComposerConfiguration?.mentionsWarningText\"\n        [mentionsWarningStyle]=\"messageComposerConfiguration?.mentionsWarningStyle\">\n      </cometchat-message-composer>\n    </div>\n    <div *ngIf=\"messageComposerView && !hideMessageComposer\"\n      class=\"cc-messages__composer--customview\">\n      <ng-container\n        *ngTemplateOutlet=\"messageComposerView;context:{  user: user, group: group }\">\n      </ng-container>\n    </div>\n  </div>\n  <div class=\"cc-messages__livereaction\">\n    <cometchat-live-reaction *ngIf=\"liveReaction\"\n      [reactionIconURL]=\"reactionName\"\n      [liveReactionStyle]=\"liveReactionStyle\"></cometchat-live-reaction>\n  </div>\n  <div *ngIf=\"openThreadedMessages\" class=\"cc-messages__threadedmessages\">\n    <cometchat-threaded-messages [onClose]=\"closeThreadView\"\n      [threadedMessagesStyle]=\"threadedMessageConfiguration.threadedMessagesStyle\"\n      [messageActionView]=\"threadedMessageConfiguration.messageActionView\"\n      [closeIconURL]=\"threadedMessageConfiguration.closeIconURL\"\n      [onError]=\"threadedMessageConfiguration.onError\"\n      [bubbleView]=\"threadedMessageConfiguration.bubbleView || parentBubbleView\"\n      [parentMessage]=\"threadMessageObject\" [user]=\"user\" [group]=\"group\"\n      [messageListConfiguration]=\"threadedMessageConfiguration.messageListConfiguration\"\n      [messageComposerView]=\"threadedMessageConfiguration.messageComposerView\"\n      [messageListView]=\"threadedMessageConfiguration.messageListView\"\n      [hideMessageComposer]=\"threadedMessageConfiguration.hideMessageComposer\"\n      [messageComposerConfiguration]=\"threadedMessageConfiguration.messageComposerConfiguration\"\n      [disableSoundForMessages]=\"threadedMessageConfiguration.disableSoundForMessages\"\n      ></cometchat-threaded-messages>\n  </div>\n\n  <div *ngIf=\"openDetails\" class=\"cc-messages__details\">\n    <cometchat-details\n      [protectedGroupIcon]=\"detailsConfiguration.protectedGroupIcon\"\n      [passwordGroupIcon]=\"detailsConfiguration.passwordGroupIcon\"\n      [privateGroupIcon]=\"detailsConfiguration.privateGroupIcon\"\n      [backdropStyle]=\"detailsConfiguration.backdropStyle\"\n      [disableUsersPresence]=\"detailsConfiguration?.disableUsersPresence!\"\n      [transferOwnershipConfiguration]=\"detailsConfiguration.transferOwnershipConfiguration\"\n      [groupMembersConfiguration]=\"detailsConfiguration.groupMembersConfiguration\"\n      [bannedMembersConfiguration]=\"detailsConfiguration.bannedMembersConfiguration\"\n      [addMembersConfiguration]=\"detailsConfiguration.addMembersConfiguration\"\n      [onClose]=\"detailsConfiguration.onClose || closeDetailsPage\"\n      [listItemStyle]=\"detailsConfiguration.listItemStyle\"\n      [detailsStyle]=\"detailsConfiguration.detailsStyle\"\n      [avatarStyle]=\"detailsConfiguration.avatarStyle\"\n      [statusIndicatorStyle]=\"detailsConfiguration.statusIndicatorStyle\"\n      [leaveDialogStyle]=\"detailsConfiguration.leaveDialogStyle\"\n      [data]=\"setDetailsTemplate()\"\n      [customProfileView]=\"detailsConfiguration.customProfileView\"\n      [subtitleView]=\"detailsConfiguration.subtitleView\"\n      [hideProfile]=\"detailsConfiguration.hideProfile\"\n      [onError]=\"detailsConfiguration.onError\"\n      [closeButtonIconURL]=\"detailsConfiguration.closeButtonIconURL\"\n      [user]=\"user\" [group]=\"group\"></cometchat-details>\n  </div>\n</div>\n<ng-template #headerMenu>\n  <div class=\"cc-messages__headermenu\">\n    <div class=\"cc-messages__auxiliarymenu\"\n      *ngIf=\"getAuxilaryView(); else elseBlock\">\n      <ng-container\n        *ngTemplateOutlet=\"getAuxilaryView();context:{  user: user, group: group }\">\n      </ng-container>\n    </div>\n    <ng-template #elseBlock>\n      <cometchat-call-buttons *ngIf=\"enableCalling\" voiceCallIconText=\"\"\n        videoCallIconText=\"\" [user]=\"user\" [group]=\"group\"\n        [callButtonsStyle]=\"callButtonsStyle\">\n      </cometchat-call-buttons>\n    </ng-template>\n    <cometchat-button *ngIf=\"!hideDetails\" [iconURL]=\"infoIconStyle\"\n      [buttonStyle]=\"detailsButtonStyle\"\n      (cc-button-clicked)=\"openDetailsPage()\"></cometchat-button>\n  </div>\n</ng-template>\n", styles: ["*{box-sizing:border-box;margin:0;padding:0}.cc-messages__wrapper{position:relative;height:100%;width:100%}.cc-messages{display:flex;flex-direction:column;position:relative;height:100%;width:100%;box-sizing:border-box;justify-content:space-between}.cc-messages__headermenu{display:flex;justify-content:center;align-items:center}.cc-messages__threadedmessages,.cc-messages__details{position:absolute;top:0;left:0;height:100%;width:100%;max-height:100%;overflow-y:auto;overflow-x:hidden;max-width:100%;z-index:1}.cc-messages__header{width:100%}.cc-messages__list{overflow:hidden;width:100%;height:100%}cometchat-threaded-messages{height:100%;display:flex}.cc-messages__composer{width:100%;display:flex;flex-direction:column;justify-content:flex-end}\n"], components: [{ type: AIAssistBotMessageListComponent, selector: "aiassist-bot-message-list", inputs: ["hideSearch", "footerView", "user", "group", "currentAskAIBot", "subtitleText", "sendIconUrl", "waitIcon", "errorIcon", "botFirstMessageText", "closeButtonIconURL", "sendButtonIconURL", "avatarStyle", "aiBotChatHeaderStyle", "aiBotChatContainerStyle", "datePattern", "alignment"] }, { type: CometChatMessageHeaderComponent, selector: "cometchat-message-header", inputs: ["avatarStyle", "statusIndicatorStyle", "messageHeaderStyle", "listItemStyle", "subtitleView", "disableUsersPresence", "disableTyping", "protectedGroupIcon", "passwordGroupIcon", "privateGroupIcon", "menu", "user", "group", "backButtonIconURL", "hideBackButton", "listItemView", "onError", "onBack"] }, { type: CometChatMessageListComponent, selector: "cometchat-message-list", inputs: ["hideError", "hideDateSeparator", "errorStateView", "loadingStateView", "emptyStateView", "errorStateText", "emptyStateText", "loadingIconURL", "user", "group", "disableReceipt", "hideReceipt", "disableSoundForMessages", "customSoundForMessages", "readIcon", "deliveredIcon", "sentIcon", "waitIcon", "errorIcon", "aiErrorIcon", "aiEmptyIcon", "alignment", "showAvatar", "datePattern", "timestampAlignment", "DateSeparatorPattern", "templates", "messagesRequestBuilder", "newMessageIndicatorText", "scrollToBottomOnNewMessages", "thresholdValue", "unreadMessageThreshold", "reactionsConfiguration", "disableReactions", "emojiKeyboardStyle", "apiConfiguration", "onThreadRepliesClick", "headerView", "footerView", "parentMessageId", "threadIndicatorIcon", "avatarStyle", "backdropStyle", "dateSeparatorStyle", "messageListStyle", "onError", "messageInformationConfiguration", "disableMentions", "textFormatters"] }, { type: CometChatMessageComposerComponent, selector: "cometchat-message-composer", inputs: ["user", "group", "disableSoundForMessages", "customSoundForMessage", "disableTypingEvents", "text", "placeholderText", "headerView", "onTextChange", "attachmentIconURL", "attachmentOptions", "secondaryButtonView", "auxilaryButtonView", "auxiliaryButtonsAlignment", "sendButtonView", "parentMessageId", "hideLiveReaction", "LiveReactionIconURL", "backButtonIconURL", "mentionsWarningText", "mentionsWarningStyle", "messageComposerStyle", "onSendButtonClick", "onError", "backdropStyle", "actionSheetStyle", "aiActionSheetStyle", "hideVoiceRecording", "mediaRecorderStyle", "aiOptionsStyle", "aiIconURL", "voiceRecordingIconURL", "voiceRecordingCloseIconURL", "voiceRecordingStartIconURL", "voiceRecordingStopIconURL", "voiceRecordingSubmitIconURL", "hideLayoutMode", "emojiIconURL", "userMemberWrapperConfiguration", "disableMentions", "textFormatters"], outputs: ["childEvent"] }, { type: CometChatThreadedMessagesComponent, selector: "cometchat-threaded-messages", inputs: ["onClose", "onError", "parentMessage", "title", "closeIconURL", "bubbleView", "messageActionView", "messageListConfiguration", "userMemberWrapperConfiguration", "messageComposerConfiguration", "threadedMessagesStyle", "hideMessageComposer", "messageComposerView", "messageListView", "disableSoundForMessages"] }, { type: CometChatDetailsComponent, selector: "cometchat-details", inputs: ["group", "user", "title", "closeButtonIconURL", "hideProfile", "subtitleView", "customProfileView", "data", "disableUsersPresence", "privateGroupIcon", "protectedGroupIcon", "passwordGroupIcon", "onError", "onClose", "leaveGroupConfirmButtonText", "leaveGroupCancelButtonText", "leaveGroupDialogMessage", "leaveGroupDialogStyle", "deleteGroupConfirmButtonText", "deleteGroupDialogMessage", "deleteGroupCancelButtonText", "deleteGroupDialogStyle", "transferOwnershipConfirmButtonText", "transferOwnershipDialogMessage", "transferOwnershipCancelButtonText", "transferOwnershipDialogStyle", "addMembersConfiguration", "bannedMembersConfiguration", "groupMembersConfiguration", "transferOwnershipConfiguration", "statusIndicatorStyle", "backdropStyle", "avatarStyle", "detailsStyle", "listItemStyle"] }, { type: CometChatCallButtonsComponent, selector: "cometchat-call-buttons", inputs: ["user", "group", "voiceCallIconURL", "voiceCallIconText", "voiceCallIconHoverText", "videoCallIconURL", "videoCallIconText", "videoCallIconHoverText", "onVoiceCallClick", "onVideoCallClick", "onError", "callButtonsStyle", "outgoingCallConfiguration", "ongoingCallConfiguration"] }], directives: [{ type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i3.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { type: i3.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: CometChatMessagesComponent, decorators: [{
             type: Component,
-            args: [{ selector: "cometchat-messages", changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"cc-messages__wrapper\">\n  <cometchat-backdrop *ngIf=\"showAiBotChat\">\n    <aiassist-bot-message-list [user]=\"user\" [group]=\"group\"\n      [currentAskAIBot]=\"currentAskAIBot\"></aiassist-bot-message-list>\n  </cometchat-backdrop>\n  <div class=\"cc-messages\" [ngStyle]=\"chatListStyle()\" *ngIf=\"user || group\">\n    <div class=\"cc-messages__header\" *ngIf=\"!hideMessageHeader\">\n      <div *ngIf=\"messageHeaderView; else customHeaderView\"\n        class=\"cc-messages__header-customview\">\n        <ng-container\n          *ngTemplateOutlet=\"messageHeaderView;context:{  user: user, group: group }\">\n        </ng-container>\n      </div>\n      <ng-template #customHeaderView>\n        <cometchat-message-header [user]=\"user\" [group]=\"group\"\n          [subtitleView]=\"messageHeaderConfiguration.subtitleView\"\n          [disableUsersPresence]=\"messageHeaderConfiguration.disableUsersPresence\"\n          [protectedGroupIcon]=\"messageHeaderConfiguration.protectedGroupIcon\"\n          [passwordGroupIcon]=\"messageHeaderConfiguration.passwordGroupIcon\"\n          [privateGroupIcon]=\"messageHeaderConfiguration.privateGroupIcon\"\n          [menu]=\"headerMenu\"\n          [messageHeaderStyle]=\"messageHeaderConfiguration.messageHeaderStyle\"\n          [backButtonIconURL]=\"messageHeaderConfiguration.backButtonIconURL\"\n          [hideBackButton]=\"messageHeaderConfiguration.hideBackButton\"\n          [onError]=\"messageHeaderConfiguration.onError\"\n          [onBack]=\"messageHeaderConfiguration.onBack\"\n          [listItemStyle]=\"messageHeaderConfiguration.listItemStyle\"\n          [statusIndicatorStyle]=\"messageHeaderConfiguration.statusIndicatorStyle\"\n          [avatarStyle]=\"messageHeaderConfiguration.avatarStyle\">\n        </cometchat-message-header>\n      </ng-template>\n    </div>\n    <div class=\"cc-messages__list\" *ngIf=\"!messageListView\">\n      <cometchat-message-list #messageListRef\n        [disableReactions]=\"messageListConfiguration?.disableReactions!\"\n        [emojiKeyboardStyle]=\"messageListConfiguration?.emojiKeyboardStyle!\"\n        [threadIndicatorIcon]=\"messageListConfiguration?.threadIndicatorIcon!\"\n        [reactionsConfiguration]=\"messageListConfiguration?.reactionsConfiguration!\"\n        [messageInformationConfiguration]=\"\n        messageListConfiguration.messageInformationConfiguration\"\n        [disableSoundForMessages]=\"disableSoundForMessages\"\n        [customSoundForMessages]=\"customSoundForIncomingMessages\"\n        [emptyStateView]=\"messageListConfiguration.emptyStateView\"\n        [loadingIconURL]=\"messageListConfiguration?.loadingIconURL!\"\n        [loadingStateView]=\"messageListConfiguration.loadingStateView\"\n        [user]=\"user\" [group]=\"group\"\n        [errorStateView]=\"messageListConfiguration.errorStateView\"\n        [disableReceipt]=\"messageListConfiguration.disableReceipt\"\n        [readIcon]=\"messageListConfiguration.readIcon\"\n        [deliveredIcon]=\"messageListConfiguration.deliveredIcon\"\n        [sentIcon]=\"messageListConfiguration.sentIcon\"\n        [waitIcon]=\"messageListConfiguration.waitIcon\"\n        [errorIcon]=\"messageListConfiguration.errorIcon\"\n        [alignment]=\"messageListConfiguration.alignment\"\n        [showAvatar]=\"messageListConfiguration.showAvatar\"\n        [datePattern]=\"messageListConfiguration.datePattern\"\n        [timestampAlignment]=\"messageListConfiguration.timestampAlignment\"\n        [DateSeparatorPattern]=\"messageListConfiguration.DateSeparatorPattern\"\n        [templates]=\"messageListConfiguration.templates\"\n        [messagesRequestBuilder]=\"messageListConfiguration.messagesRequestBuilder\"\n        [thresholdValue]=\"messageListConfiguration.thresholdValue\"\n        [onThreadRepliesClick]=\"messageListConfiguration.onThreadRepliesClick || openThreadView\"\n        [headerView]=\"messageListConfiguration.headerView\"\n        [footerView]=\"messageListConfiguration.footerView\"\n        [avatarStyle]=\"messageListConfiguration.avatarStyle\"\n        [scrollToBottomOnNewMessages]=\"messageListConfiguration.scrollToBottomOnNewMessages\"\n        [backdropStyle]=\"messageListConfiguration.backdropStyle\"\n        [dateSeparatorStyle]=\"messageListConfiguration.dateSeparatorStyle\"\n        [messageListStyle]=\"messageListConfiguration.messageListStyle\"\n        [onError]=\"messageListConfiguration.onError\"\n        [hideError]=\"messageListConfiguration.hideError\"\n        [disableMentions]=\"messageListConfiguration.disableMentions\"\n        [textFormatters]=\"messageListConfiguration?.textFormatters\">\n      </cometchat-message-list>\n    </div>\n    <ng-container *ngIf=\"messageListView\">\n      <ng-container\n        *ngTemplateOutlet=\"messageListView;context:{  user: user, group: group }\">\n      </ng-container>\n    </ng-container>\n\n    <div class=\"cc-messages__composer\"\n      *ngIf=\"!messageComposerView && !hideMessageComposer\">\n      <cometchat-message-composer #messageComposerRef\n        [hideVoiceRecording]=\"messageComposerConfiguration.hideVoiceRecording\"\n        [disableSoundForMessages]=\"disableSoundForMessages\"\n        [voiceRecordingStopIconURL]=\"messageComposerConfiguration.voiceRecordingStopIconURL\"\n        [voiceRecordingStartIconURL]=\"messageComposerConfiguration.voiceRecordingStartIconURL\"\n        [voiceRecordingCloseIconURL]=\"messageComposerConfiguration.voiceRecordingCloseIconURL\"\n        [voiceRecordingSubmitIconURL]=\"messageComposerConfiguration.voiceRecordingSubmitIconURL\"\n        [mediaRecorderStyle]=\"messageComposerConfiguration.mediaRecorderStyle\"\n        [customSoundForMessages]=\"customSoundForOutgoingMessages\" [user]=\"user\"\n        [group]=\"group\" [text]=\"messageComposerConfiguration.text\"\n        [headerView]=\"messageComposerConfiguration.headerView\"\n        [onTextChange]=\"messageComposerConfiguration.onTextChange\"\n        [attachmentIconURL]=\"messageComposerConfiguration.attachmentIconURL\"\n        [attachmentOptions]=\"messageComposerConfiguration.attachmentOptions\"\n        [secondaryButtonView]=\"messageComposerConfiguration.secondaryButtonView\"\n        [auxilaryButtonView]=\"messageComposerConfiguration.auxilaryButtonView\"\n        [auxiliaryButtonsAlignment]=\"messageComposerConfiguration.auxiliaryButtonsAlignment\"\n        [sendButtonView]=\"messageComposerConfiguration.sendButtonView\"\n        [hideLiveReaction]=\"messageComposerConfiguration.hideLiveReaction\"\n        [LiveReactionIconURL]=\"messageComposerConfiguration.LiveReactionIconURL\"\n        [messageComposerStyle]=\"messageComposerConfiguration.messageComposerStyle\"\n        [onSendButtonClick]=\"messageComposerConfiguration.onSendButtonClick\"\n        [onSendButtonClick]=\"messageComposerConfiguration.onSendButtonClick\"\n        [onError]=\"messageComposerConfiguration.onError\"\n        [actionSheetStyle]=\"messageComposerConfiguration.actionSheetStyle\"\n        [aiOptionsStyle]=\"messageComposerConfiguration.AIOptionsStyle\"\n        [aiIconURL]=\"messageComposerConfiguration.AIIconURL\"\n        [userMemberWrapperConfiguration]=\"messageComposerConfiguration.userMemberWrapperConfiguration\"\n        [textFormatters]=\"messageComposerConfiguration?.textFormatters\"\n        [disableMentions]=\"messageComposerConfiguration.disableMentions\"\n        [mentionsWarningText]=\"messageComposerConfiguration?.mentionsWarningText\"\n        [mentionsWarningStyle]=\"messageComposerConfiguration?.mentionsWarningStyle\">\n      </cometchat-message-composer>\n    </div>\n    <div *ngIf=\"messageComposerView && !hideMessageComposer\"\n      class=\"cc-messages__composer--customview\">\n      <ng-container\n        *ngTemplateOutlet=\"messageComposerView;context:{  user: user, group: group }\">\n      </ng-container>\n    </div>\n  </div>\n  <div class=\"cc-messages__livereaction\">\n    <cometchat-live-reaction *ngIf=\"liveReaction\"\n      [reactionIconURL]=\"reactionName\"\n      [liveReactionStyle]=\"liveReactionStyle\"></cometchat-live-reaction>\n  </div>\n  <div *ngIf=\"openThreadedMessages\" class=\"cc-messages__threadedmessages\">\n    <cometchat-threaded-messages [onClose]=\"closeThreadView\"\n      [threadedMessagesStyle]=\"threadedMessageConfiguration.threadedMessagesStyle\"\n      [messageActionView]=\"threadedMessageConfiguration.messageActionView\"\n      [closeIconURL]=\"threadedMessageConfiguration.closeIconURL\"\n      [onError]=\"threadedMessageConfiguration.onError\"\n      [bubbleView]=\"threadedMessageConfiguration.bubbleView || parentBubbleView\"\n      [parentMessage]=\"threadMessageObject\" [user]=\"user\" [group]=\"group\"\n      [messageListConfiguration]=\"threadedMessageConfiguration.messageListConfiguration\"\n      [messageComposerView]=\"threadedMessageConfiguration.messageComposerView\"\n      [messageListView]=\"threadedMessageConfiguration.messageListView\"\n      [hideMessageComposer]=\"threadedMessageConfiguration.hideMessageComposer\"\n      [messageComposerConfiguration]=\"threadedMessageConfiguration.messageComposerConfiguration\"\n      [disableSoundForMessages]=\"threadedMessageConfiguration.disableSoundForMessages\"\n      ></cometchat-threaded-messages>\n  </div>\n\n  <div *ngIf=\"openDetails\" class=\"cc-messages__details\">\n    <cometchat-details\n      [protectedGroupIcon]=\"detailsConfiguration.protectedGroupIcon\"\n      [passwordGroupIcon]=\"detailsConfiguration.passwordGroupIcon\"\n      [privateGroupIcon]=\"detailsConfiguration.privateGroupIcon\"\n      [backdropStyle]=\"detailsConfiguration.backdropStyle\"\n      [disableUsersPresence]=\"detailsConfiguration?.disableUsersPresence!\"\n      [transferOwnershipConfiguration]=\"detailsConfiguration.transferOwnershipConfiguration\"\n      [groupMembersConfiguration]=\"detailsConfiguration.groupMembersConfiguration\"\n      [bannedMembersConfiguration]=\"detailsConfiguration.bannedMembersConfiguration\"\n      [addMembersConfiguration]=\"detailsConfiguration.addMembersConfiguration\"\n      [onClose]=\"detailsConfiguration.onClose || closeDetailsPage\"\n      [listItemStyle]=\"detailsConfiguration.listItemStyle\"\n      [detailsStyle]=\"detailsConfiguration.detailsStyle\"\n      [avatarStyle]=\"detailsConfiguration.avatarStyle\"\n      [statusIndicatorStyle]=\"detailsConfiguration.statusIndicatorStyle\"\n      [leaveDialogStyle]=\"detailsConfiguration.leaveDialogStyle\"\n      [data]=\"setDetailsTemplate()\"\n      [customProfileView]=\"detailsConfiguration.customProfileView\"\n      [subtitleView]=\"detailsConfiguration.subtitleView\"\n      [hideProfile]=\"detailsConfiguration.hideProfile\"\n      [onError]=\"detailsConfiguration.onError\"\n      [closeButtonIconURL]=\"detailsConfiguration.closeButtonIconURL\"\n      [user]=\"user\" [group]=\"group\"></cometchat-details>\n  </div>\n</div>\n<ng-template #headerMenu>\n  <div class=\"cc-messages__headermenu\">\n    <div class=\"cc-messages__auxiliarymenu\"\n      *ngIf=\"getAuxilaryView(); else elseBlock\">\n      <ng-container\n        *ngTemplateOutlet=\"getAuxilaryView();context:{  user: user, group: group }\">\n      </ng-container>\n    </div>\n    <ng-template #elseBlock>\n      <cometchat-call-buttons *ngIf=\"enableCalling\" voiceCallIconText=\"\"\n        videoCallIconText=\"\" [user]=\"user\" [group]=\"group\"\n        [callButtonsStyle]=\"callButtonsStyle\">\n      </cometchat-call-buttons>\n    </ng-template>\n    <cometchat-button *ngIf=\"!hideDetails\" [iconURL]=\"infoIconStyle\"\n      [buttonStyle]=\"detailsButtonStyle\"\n      (cc-button-clicked)=\"openDetailsPage()\"></cometchat-button>\n  </div>\n</ng-template>\n", styles: ["*{box-sizing:border-box;margin:0;padding:0}.cc-messages__wrapper{position:relative;height:100%;width:100%}.cc-messages{display:flex;flex-direction:column;position:relative;height:100%;width:100%;box-sizing:border-box;justify-content:space-between}.cc-messages__headermenu{display:flex;justify-content:center;align-items:center}.cc-messages__threadedmessages,.cc-messages__details{position:absolute;top:0;left:0;height:100%;width:100%;max-height:100%;overflow-y:auto;overflow-x:hidden;max-width:100%;z-index:1}.cc-messages__header{width:100%}.cc-messages__list{overflow:hidden;width:100%;height:100%}cometchat-threaded-messages{height:100%;display:flex}.cc-messages__composer{width:100%;display:flex;flex-direction:column;justify-content:flex-end}\n"] }]
+            args: [{ selector: "cometchat-messages", changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"cc-messages__wrapper\">\n  <cometchat-backdrop *ngIf=\"showAiBotChat\">\n    <aiassist-bot-message-list [user]=\"user\" [group]=\"group\"\n      [currentAskAIBot]=\"currentAskAIBot\"></aiassist-bot-message-list>\n  </cometchat-backdrop>\n  <div class=\"cc-messages\" [ngStyle]=\"chatListStyle()\" *ngIf=\"user || group\">\n    <div class=\"cc-messages__header\" *ngIf=\"!hideMessageHeader\">\n      <div *ngIf=\"messageHeaderView; else customHeaderView\"\n        class=\"cc-messages__header-customview\">\n        <ng-container\n          *ngTemplateOutlet=\"messageHeaderView;context:{  user: user, group: group }\">\n        </ng-container>\n      </div>\n      <ng-template #customHeaderView>\n        <cometchat-message-header [user]=\"user\" [group]=\"group\"\n          [subtitleView]=\"messageHeaderConfiguration.subtitleView\"\n          [disableUsersPresence]=\"messageHeaderConfiguration.disableUsersPresence\"\n          [protectedGroupIcon]=\"messageHeaderConfiguration.protectedGroupIcon\"\n          [passwordGroupIcon]=\"messageHeaderConfiguration.passwordGroupIcon\"\n          [privateGroupIcon]=\"messageHeaderConfiguration.privateGroupIcon\"\n          [menu]=\"headerMenu\"\n          [messageHeaderStyle]=\"messageHeaderConfiguration.messageHeaderStyle\"\n          [backButtonIconURL]=\"messageHeaderConfiguration.backButtonIconURL\"\n          [hideBackButton]=\"messageHeaderConfiguration.hideBackButton\"\n          [onError]=\"messageHeaderConfiguration.onError\"\n          [onBack]=\"messageHeaderConfiguration.onBack\"\n          [listItemStyle]=\"messageHeaderConfiguration.listItemStyle\"\n          [statusIndicatorStyle]=\"messageHeaderConfiguration.statusIndicatorStyle\"\n          [avatarStyle]=\"messageHeaderConfiguration.avatarStyle\">\n        </cometchat-message-header>\n      </ng-template>\n    </div>\n    <div class=\"cc-messages__list\" *ngIf=\"!messageListView\">\n      <cometchat-message-list #messageListRef\n        [disableReactions]=\"messageListConfiguration?.disableReactions!\"\n        [emojiKeyboardStyle]=\"messageListConfiguration?.emojiKeyboardStyle!\"\n        [threadIndicatorIcon]=\"messageListConfiguration?.threadIndicatorIcon!\"\n        [reactionsConfiguration]=\"messageListConfiguration?.reactionsConfiguration!\"\n        [messageInformationConfiguration]=\"\n        messageListConfiguration.messageInformationConfiguration\"\n        [disableSoundForMessages]=\"disableSoundForMessages\"\n        [customSoundForMessages]=\"customSoundForIncomingMessages\"\n        [emptyStateView]=\"messageListConfiguration.emptyStateView\"\n        [loadingIconURL]=\"messageListConfiguration?.loadingIconURL!\"\n        [loadingStateView]=\"messageListConfiguration.loadingStateView\"\n        [user]=\"user\" [group]=\"group\"\n        [errorStateView]=\"messageListConfiguration.errorStateView\"\n        [disableReceipt]=\"messageListConfiguration.disableReceipt\"\n        [hideReceipt]=\"messageListConfiguration.hideReceipt\"\n        [readIcon]=\"messageListConfiguration.readIcon\"\n        [deliveredIcon]=\"messageListConfiguration.deliveredIcon\"\n        [sentIcon]=\"messageListConfiguration.sentIcon\"\n        [waitIcon]=\"messageListConfiguration.waitIcon\"\n        [errorIcon]=\"messageListConfiguration.errorIcon\"\n        [alignment]=\"messageListConfiguration.alignment\"\n        [showAvatar]=\"messageListConfiguration.showAvatar\"\n        [datePattern]=\"messageListConfiguration.datePattern\"\n        [timestampAlignment]=\"messageListConfiguration.timestampAlignment\"\n        [DateSeparatorPattern]=\"messageListConfiguration.DateSeparatorPattern\"\n        [templates]=\"messageListConfiguration.templates\"\n        [messagesRequestBuilder]=\"messageListConfiguration.messagesRequestBuilder\"\n        [thresholdValue]=\"messageListConfiguration.thresholdValue\"\n        [onThreadRepliesClick]=\"messageListConfiguration.onThreadRepliesClick || openThreadView\"\n        [headerView]=\"messageListConfiguration.headerView\"\n        [footerView]=\"messageListConfiguration.footerView\"\n        [avatarStyle]=\"messageListConfiguration.avatarStyle\"\n        [scrollToBottomOnNewMessages]=\"messageListConfiguration.scrollToBottomOnNewMessages\"\n        [backdropStyle]=\"messageListConfiguration.backdropStyle\"\n        [dateSeparatorStyle]=\"messageListConfiguration.dateSeparatorStyle\"\n        [messageListStyle]=\"messageListConfiguration.messageListStyle\"\n        [onError]=\"messageListConfiguration.onError\"\n        [hideError]=\"messageListConfiguration.hideError\"\n        [disableMentions]=\"messageListConfiguration.disableMentions\"\n        [textFormatters]=\"messageListConfiguration?.textFormatters\">\n      </cometchat-message-list>\n    </div>\n    <ng-container *ngIf=\"messageListView\">\n      <ng-container\n        *ngTemplateOutlet=\"messageListView;context:{  user: user, group: group }\">\n      </ng-container>\n    </ng-container>\n\n    <div class=\"cc-messages__composer\"\n      *ngIf=\"!messageComposerView && !hideMessageComposer\">\n      <cometchat-message-composer #messageComposerRef\n        [hideVoiceRecording]=\"messageComposerConfiguration.hideVoiceRecording\"\n        [disableSoundForMessages]=\"disableSoundForMessages\"\n        [voiceRecordingStopIconURL]=\"messageComposerConfiguration.voiceRecordingStopIconURL\"\n        [voiceRecordingStartIconURL]=\"messageComposerConfiguration.voiceRecordingStartIconURL\"\n        [voiceRecordingCloseIconURL]=\"messageComposerConfiguration.voiceRecordingCloseIconURL\"\n        [voiceRecordingSubmitIconURL]=\"messageComposerConfiguration.voiceRecordingSubmitIconURL\"\n        [mediaRecorderStyle]=\"messageComposerConfiguration.mediaRecorderStyle\"\n        [customSoundForMessages]=\"customSoundForOutgoingMessages\" [user]=\"user\"\n        [group]=\"group\" [text]=\"messageComposerConfiguration.text\"\n        [headerView]=\"messageComposerConfiguration.headerView\"\n        [onTextChange]=\"messageComposerConfiguration.onTextChange\"\n        [attachmentIconURL]=\"messageComposerConfiguration.attachmentIconURL\"\n        [attachmentOptions]=\"messageComposerConfiguration.attachmentOptions\"\n        [secondaryButtonView]=\"messageComposerConfiguration.secondaryButtonView\"\n        [auxilaryButtonView]=\"messageComposerConfiguration.auxilaryButtonView\"\n        [auxiliaryButtonsAlignment]=\"messageComposerConfiguration.auxiliaryButtonsAlignment\"\n        [sendButtonView]=\"messageComposerConfiguration.sendButtonView\"\n        [hideLiveReaction]=\"messageComposerConfiguration.hideLiveReaction\"\n        [LiveReactionIconURL]=\"messageComposerConfiguration.LiveReactionIconURL\"\n        [messageComposerStyle]=\"messageComposerConfiguration.messageComposerStyle\"\n        [onSendButtonClick]=\"messageComposerConfiguration.onSendButtonClick\"\n        [onSendButtonClick]=\"messageComposerConfiguration.onSendButtonClick\"\n        [onError]=\"messageComposerConfiguration.onError\"\n        [actionSheetStyle]=\"messageComposerConfiguration.actionSheetStyle\"\n        [aiOptionsStyle]=\"messageComposerConfiguration.AIOptionsStyle\"\n        [aiIconURL]=\"messageComposerConfiguration.AIIconURL\"\n        [userMemberWrapperConfiguration]=\"messageComposerConfiguration.userMemberWrapperConfiguration\"\n        [textFormatters]=\"messageComposerConfiguration?.textFormatters\"\n        [disableMentions]=\"messageComposerConfiguration.disableMentions\"\n        [mentionsWarningText]=\"messageComposerConfiguration?.mentionsWarningText\"\n        [mentionsWarningStyle]=\"messageComposerConfiguration?.mentionsWarningStyle\">\n      </cometchat-message-composer>\n    </div>\n    <div *ngIf=\"messageComposerView && !hideMessageComposer\"\n      class=\"cc-messages__composer--customview\">\n      <ng-container\n        *ngTemplateOutlet=\"messageComposerView;context:{  user: user, group: group }\">\n      </ng-container>\n    </div>\n  </div>\n  <div class=\"cc-messages__livereaction\">\n    <cometchat-live-reaction *ngIf=\"liveReaction\"\n      [reactionIconURL]=\"reactionName\"\n      [liveReactionStyle]=\"liveReactionStyle\"></cometchat-live-reaction>\n  </div>\n  <div *ngIf=\"openThreadedMessages\" class=\"cc-messages__threadedmessages\">\n    <cometchat-threaded-messages [onClose]=\"closeThreadView\"\n      [threadedMessagesStyle]=\"threadedMessageConfiguration.threadedMessagesStyle\"\n      [messageActionView]=\"threadedMessageConfiguration.messageActionView\"\n      [closeIconURL]=\"threadedMessageConfiguration.closeIconURL\"\n      [onError]=\"threadedMessageConfiguration.onError\"\n      [bubbleView]=\"threadedMessageConfiguration.bubbleView || parentBubbleView\"\n      [parentMessage]=\"threadMessageObject\" [user]=\"user\" [group]=\"group\"\n      [messageListConfiguration]=\"threadedMessageConfiguration.messageListConfiguration\"\n      [messageComposerView]=\"threadedMessageConfiguration.messageComposerView\"\n      [messageListView]=\"threadedMessageConfiguration.messageListView\"\n      [hideMessageComposer]=\"threadedMessageConfiguration.hideMessageComposer\"\n      [messageComposerConfiguration]=\"threadedMessageConfiguration.messageComposerConfiguration\"\n      [disableSoundForMessages]=\"threadedMessageConfiguration.disableSoundForMessages\"\n      ></cometchat-threaded-messages>\n  </div>\n\n  <div *ngIf=\"openDetails\" class=\"cc-messages__details\">\n    <cometchat-details\n      [protectedGroupIcon]=\"detailsConfiguration.protectedGroupIcon\"\n      [passwordGroupIcon]=\"detailsConfiguration.passwordGroupIcon\"\n      [privateGroupIcon]=\"detailsConfiguration.privateGroupIcon\"\n      [backdropStyle]=\"detailsConfiguration.backdropStyle\"\n      [disableUsersPresence]=\"detailsConfiguration?.disableUsersPresence!\"\n      [transferOwnershipConfiguration]=\"detailsConfiguration.transferOwnershipConfiguration\"\n      [groupMembersConfiguration]=\"detailsConfiguration.groupMembersConfiguration\"\n      [bannedMembersConfiguration]=\"detailsConfiguration.bannedMembersConfiguration\"\n      [addMembersConfiguration]=\"detailsConfiguration.addMembersConfiguration\"\n      [onClose]=\"detailsConfiguration.onClose || closeDetailsPage\"\n      [listItemStyle]=\"detailsConfiguration.listItemStyle\"\n      [detailsStyle]=\"detailsConfiguration.detailsStyle\"\n      [avatarStyle]=\"detailsConfiguration.avatarStyle\"\n      [statusIndicatorStyle]=\"detailsConfiguration.statusIndicatorStyle\"\n      [leaveDialogStyle]=\"detailsConfiguration.leaveDialogStyle\"\n      [data]=\"setDetailsTemplate()\"\n      [customProfileView]=\"detailsConfiguration.customProfileView\"\n      [subtitleView]=\"detailsConfiguration.subtitleView\"\n      [hideProfile]=\"detailsConfiguration.hideProfile\"\n      [onError]=\"detailsConfiguration.onError\"\n      [closeButtonIconURL]=\"detailsConfiguration.closeButtonIconURL\"\n      [user]=\"user\" [group]=\"group\"></cometchat-details>\n  </div>\n</div>\n<ng-template #headerMenu>\n  <div class=\"cc-messages__headermenu\">\n    <div class=\"cc-messages__auxiliarymenu\"\n      *ngIf=\"getAuxilaryView(); else elseBlock\">\n      <ng-container\n        *ngTemplateOutlet=\"getAuxilaryView();context:{  user: user, group: group }\">\n      </ng-container>\n    </div>\n    <ng-template #elseBlock>\n      <cometchat-call-buttons *ngIf=\"enableCalling\" voiceCallIconText=\"\"\n        videoCallIconText=\"\" [user]=\"user\" [group]=\"group\"\n        [callButtonsStyle]=\"callButtonsStyle\">\n      </cometchat-call-buttons>\n    </ng-template>\n    <cometchat-button *ngIf=\"!hideDetails\" [iconURL]=\"infoIconStyle\"\n      [buttonStyle]=\"detailsButtonStyle\"\n      (cc-button-clicked)=\"openDetailsPage()\"></cometchat-button>\n  </div>\n</ng-template>\n", styles: ["*{box-sizing:border-box;margin:0;padding:0}.cc-messages__wrapper{position:relative;height:100%;width:100%}.cc-messages{display:flex;flex-direction:column;position:relative;height:100%;width:100%;box-sizing:border-box;justify-content:space-between}.cc-messages__headermenu{display:flex;justify-content:center;align-items:center}.cc-messages__threadedmessages,.cc-messages__details{position:absolute;top:0;left:0;height:100%;width:100%;max-height:100%;overflow-y:auto;overflow-x:hidden;max-width:100%;z-index:1}.cc-messages__header{width:100%}.cc-messages__list{overflow:hidden;width:100%;height:100%}cometchat-threaded-messages{height:100%;display:flex}.cc-messages__composer{width:100%;display:flex;flex-direction:column;justify-content:flex-end}\n"] }]
         }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }, { type: CometChatThemeService }, { type: i0.ElementRef }]; }, propDecorators: { messageComposerRef: [{
                 type: ViewChild,
                 args: ["messageComposerRef", { static: false }]
@@ -17377,6 +17429,10 @@ class CometChatGroupsComponent {
             }
             return status;
         };
+        this.findGroupIndex = (groupToFind) => {
+            let groupIndex = this.groupsList.findIndex((g, k) => g.getGuid() === groupToFind.getGuid());
+            return groupIndex;
+        };
         this.fetchNextGroupList = (state = States.loading) => {
             this.onScrolledToBottom = null;
             this.state = state;
@@ -17633,48 +17689,110 @@ class CometChatGroupsComponent {
     attachListeners() {
         CometChat.addGroupListener(this.groupsListenerId, new CometChat.GroupListener({
             onGroupMemberScopeChanged: (message, changedUser, newScope, oldScope, changedGroup) => {
-                if (changedUser.getUid() == this.loggedInUser?.getUid()) {
-                    changedGroup.setScope(newScope);
+                const groupIndex = this.findGroupIndex(changedGroup);
+                if (groupIndex > -1) {
+                    let groupsList = [...this.groupsList];
+                    const groupFound = groupsList[groupIndex];
+                    if (changedUser.getUid() == this.loggedInUser?.getUid()) {
+                        groupFound.setScope(newScope);
+                        this.ref.detectChanges();
+                    }
+                    groupsList.splice(groupIndex, 1, groupFound);
+                    this.groupsList = groupsList;
                 }
-                this.updateGroup(changedGroup);
             },
             onGroupMemberKicked: (message, kickedUser, kickedBy, kickedFrom) => {
-                if (kickedUser.getUid() == this.loggedInUser?.getUid()) {
-                    kickedFrom.setHasJoined(false);
+                const groupIndex = this.findGroupIndex(kickedFrom);
+                if (groupIndex > -1) {
+                    let groupsList = [...this.groupsList];
+                    let groupFound = groupsList[groupIndex];
+                    if (kickedUser.getUid() === this.loggedInUser?.getUid()) {
+                        groupFound.setHasJoined(false);
+                    }
+                    groupFound.setMembersCount(kickedFrom.getMembersCount());
+                    groupsList.splice(groupIndex, 1, groupFound);
+                    this.groupsList = groupsList;
+                    this.ref.detectChanges();
                 }
-                this.updateGroup(kickedFrom);
             },
             onGroupMemberBanned: (message, bannedUser, bannedBy, bannedFrom) => {
-                if (bannedUser.getUid() == this.loggedInUser?.getUid()) {
-                    this.removeGroup(bannedFrom);
-                }
-                else {
-                    this.updateGroup(bannedFrom);
+                const groupIndex = this.findGroupIndex(bannedFrom);
+                if (groupIndex > -1) {
+                    let groupsList = [...this.groupsList];
+                    let groupFound = groupsList[groupIndex];
+                    if (bannedUser.getUid() === this.loggedInUser?.getUid()) {
+                        this.removeGroup(bannedFrom);
+                        return;
+                    }
+                    groupFound.setMembersCount(bannedFrom.getMembersCount());
+                    groupsList.splice(groupIndex, 1, groupFound);
+                    this.groupsList = groupsList;
+                    this.ref.detectChanges();
                 }
             },
             onGroupMemberUnbanned: (message, unbannedUser, unbannedBy, unbannedFrom) => {
-                if (unbannedUser.getUid() == this.loggedInUser?.getUid()) {
-                    unbannedFrom.setHasJoined(false);
+                const groupIndex = this.findGroupIndex(unbannedFrom);
+                if (groupIndex > -1) {
+                    let groupsList = [...this.groupsList];
+                    let groupFound = groupsList[groupIndex];
+                    if (unbannedUser.getUid() === this.loggedInUser?.getUid()) {
+                        groupFound.setHasJoined(false);
+                    }
+                    groupsList.splice(groupIndex, 1, groupFound);
+                    this.groupsList = groupsList;
                 }
-                this.addGroup(unbannedFrom);
+                else {
+                    this.addGroup(unbannedFrom);
+                }
+                this.ref.detectChanges();
             },
             onMemberAddedToGroup: (message, userAdded, userAddedBy, userAddedIn) => {
-                if (userAdded.getUid() == this.loggedInUser?.getUid()) {
+                if (this.searchKeyword)
+                    return;
+                const groupIndex = this.findGroupIndex(userAddedIn);
+                if (groupIndex > -1) {
+                    let groupsList = [...this.groupsList];
+                    let groupFound = groupsList[groupIndex];
+                    if (userAdded.getUid() === this.loggedInUser?.getUid()) {
+                        groupFound.setHasJoined(true);
+                    }
+                    groupFound.setMembersCount(userAddedIn.getMembersCount());
+                    groupsList.splice(groupIndex, 1, groupFound);
+                    this.groupsList = groupsList;
+                }
+                else {
                     userAddedIn.setHasJoined(true);
+                    this.addGroup(userAddedIn);
                 }
-                this.updateGroup(userAddedIn);
+                this.ref.detectChanges();
             },
             onGroupMemberLeft: (message, leavingUser, group) => {
-                if (leavingUser.getUid() == this.loggedInUser?.getUid()) {
-                    group.setHasJoined(false);
+                const groupIndex = this.findGroupIndex(group);
+                if (groupIndex > -1) {
+                    let groupsList = [...this.groupsList];
+                    let groupFound = groupsList[groupIndex];
+                    if (leavingUser.getUid() === this.loggedInUser?.getUid()) {
+                        groupFound.setHasJoined(false);
+                    }
+                    groupFound.setMembersCount(group.getMembersCount());
+                    groupsList.splice(groupIndex, 1, groupFound);
+                    this.groupsList = groupsList;
+                    this.ref.detectChanges();
                 }
-                this.updateGroup(group);
             },
             onGroupMemberJoined: (message, joinedUser, joinedGroup) => {
-                if (joinedUser.getUid() == this.loggedInUser?.getUid()) {
-                    joinedGroup.setHasJoined(true);
+                const groupIndex = this.findGroupIndex(joinedGroup);
+                if (groupIndex > -1) {
+                    let groupsList = [...this.groupsList];
+                    let groupFound = groupsList[groupIndex];
+                    if (joinedUser.getUid() === this.loggedInUser?.getUid()) {
+                        groupFound.setHasJoined(true);
+                    }
+                    groupFound.setMembersCount(joinedGroup.getMembersCount());
+                    groupsList.splice(groupIndex, 1, groupFound);
+                    this.groupsList = groupsList;
+                    this.ref.detectChanges();
                 }
-                this.updateGroup(joinedGroup);
             },
         }));
     }
@@ -18366,12 +18484,12 @@ class CometChatConversationsWithMessagesComponent {
             this.messagesConfiguration.detailsConfiguration.transferOwnershipConfiguration.transferOwnershipStyle.height = "650px";
             this.messagesConfiguration.detailsConfiguration.transferOwnershipConfiguration.transferOwnershipStyle.width = "360px";
         }
-        this.messagesConfiguration.messageListConfiguration.backdropStyle = backdropStyle;
-        this.conversationConfiguration.backdropStyle = backdropStyle;
-        this.messagesConfiguration.detailsConfiguration.backdropStyle = backdropStyle;
-        this.messagesConfiguration.messageComposerConfiguration.backdropStyle = backdropStyle;
-        this.messagesConfiguration.detailsConfiguration.backdropStyle = backdropStyle;
-        this.messagesConfiguration.detailsConfiguration.groupMembersConfiguration.backdropStyle = backdropStyle;
+        this.messagesConfiguration.messageListConfiguration.backdropStyle = this.messagesConfiguration.messageListConfiguration.backdropStyle || backdropStyle;
+        this.conversationConfiguration.backdropStyle = this.conversationConfiguration.backdropStyle || backdropStyle;
+        this.messagesConfiguration.detailsConfiguration.backdropStyle = this.messagesConfiguration.detailsConfiguration.backdropStyle || backdropStyle;
+        this.messagesConfiguration.messageComposerConfiguration.backdropStyle = this.messagesConfiguration.messageComposerConfiguration.backdropStyle || backdropStyle;
+        this.messagesConfiguration.detailsConfiguration.backdropStyle = this.messagesConfiguration.detailsConfiguration.backdropStyle || backdropStyle;
+        this.messagesConfiguration.detailsConfiguration.groupMembersConfiguration.backdropStyle = this.messagesConfiguration.detailsConfiguration.groupMembersConfiguration.backdropStyle || backdropStyle;
         this.ref.detectChanges();
     }
     setActiveChat() {
@@ -18510,10 +18628,10 @@ class CometChatConversationsWithMessagesComponent {
     }
 }
 CometChatConversationsWithMessagesComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: CometChatConversationsWithMessagesComponent, deps: [{ token: i0.ElementRef }, { token: i0.ChangeDetectorRef }, { token: CometChatThemeService }], target: i0.ɵɵFactoryTarget.Component });
-CometChatConversationsWithMessagesComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: CometChatConversationsWithMessagesComponent, selector: "cometchat-conversations-with-messages", inputs: { user: "user", group: "group", isMobileView: "isMobileView", messageText: "messageText", conversationsWithMessagesStyle: "conversationsWithMessagesStyle", messagesConfiguration: "messagesConfiguration", conversationConfiguration: "conversationConfiguration", onError: "onError", startNewConversationIconURL: "startNewConversationIconURL", hideStartNewConversation: "hideStartNewConversation", StartConversationConfiguration: "StartConversationConfiguration" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"cc-with-messages__wrapper\" [ngStyle]=\"chatsWrapperStyles()\">\n  <div class=\"cc-with-messages__sidebar\" [ngClass]=\"{mobile : isMobileView}\"\n    [ngStyle]=\"sideBarStyle\">\n    <cometchat-conversations #conversationRef\n      [activeConversation]=\"activeConversation\"\n      [onItemClick]=\"conversationConfiguration.onItemClick || onItemClick\"\n      [conversationsStyle]=\"conversationConfiguration.conversationsStyle\"\n      [statusIndicatorStyle]=\"conversationConfiguration?.statusIndicatorStyle\"\n      [avatarStyle]=\"conversationConfiguration?.avatarStyle!\"\n      [subtitleView]=\"conversationConfiguration.subtitleView\"\n      [options]=\"conversationConfiguration.options\"\n      [disableUsersPresence]=\"conversationConfiguration.disableUsersPresence\"\n      [disableReceipt]=\"conversationConfiguration.disableReceipt\"\n      [disableTyping]=\"conversationConfiguration.disableTyping\"\n      [deliveredIcon]=\"conversationConfiguration.deliveredIcon\"\n      [readIcon]=\"conversationConfiguration.readIcon\"\n      [waitIcon]=\"conversationConfiguration.waitIcon\"\n      [errorIcon]=\"conversationConfiguration.errorIcon\"\n      [datePattern]=\"conversationConfiguration.datePattern\"\n      [receiptStyle]=\"conversationConfiguration.receiptStyle\"\n      [sentIcon]=\"conversationConfiguration.sentIcon\"\n      [privateGroupIcon]=\"conversationConfiguration.privateGroupIcon\"\n      [protectedGroupIcon]=\"conversationConfiguration.protectedGroupIcon\"\n      [passwordGroupIcon]=\"conversationConfiguration.passwordGroupIcon\"\n      [customSoundForMessages]=\"conversationConfiguration.customSoundForMessages\"\n      [conversationsRequestBuilder]=\"conversationConfiguration.conversationsRequestBuilder\"\n      [emptyStateView]=\"conversationConfiguration.emptyStateView\"\n      [onSelect]=\"conversationConfiguration.onSelect\"\n      [loadingIconURL]=\"conversationConfiguration.loadingIconURL\"\n      [errorStateView]=\"conversationConfiguration.errorStateView\"\n      [loadingStateView]=\"conversationConfiguration.loadingStateView\"\n      [titleAlignment]=\"conversationConfiguration.titleAlignment\"\n      [listItemView]=\"conversationConfiguration.listItemView\"\n      [menu]=\"conversationConfiguration.menu || startConversationButton\"\n      [hideSeparator]=\"conversationConfiguration.hideSeparator\"\n      [hideError]=\"conversationConfiguration.hideError\"\n      [selectionMode]=\"conversationConfiguration.selectionMode\"\n      [disableSoundForMessages]=\"conversationConfiguration.disableSoundForMessages\"\n      [deleteConversationDialogStyle]=\"conversationConfiguration.deleteConversationDialogStyle\"\n      [badgeStyle]=\"conversationConfiguration.badgeStyle\"\n      [dateStyle]=\"conversationConfiguration.dateStyle\"\n      [listItemStyle]=\"conversationConfiguration.listItemStyle\"\n      [backdropStyle]=\"conversationConfiguration.backdropStyle\"\n      [textFormatters]=\"conversationConfiguration?.textFormatters\"\n      [disableMentions]=\"conversationConfiguration.disableMentions\"></cometchat-conversations>\n  </div>\n  <div class=\"cc-with-messages__main\" [ngClass]=\"{mobile : isMobileView}\"\n    *ngIf=\"!showStartConversation && (user || group)\">\n    <!--Message List Screen-->\n    <cometchat-messages #messagesRef [user]=\"user!\" [group]=\"group!\"\n      [messageHeaderConfiguration]=\"messagesConfiguration.messageHeaderConfiguration\"\n      [messageListConfiguration]=\"messagesConfiguration.messageListConfiguration\"\n      [messageComposerConfiguration]=\"messagesConfiguration.messageComposerConfiguration\"\n      [messagesStyle]=\"messagesConfiguration.messagesStyle\"\n      [customSoundForIncomingMessages]=\"messagesConfiguration.customSoundForIncomingMessages\"\n      [customSoundForOutgoingMessages]=\"messagesConfiguration.customSoundForOutgoingMessages\"\n      [detailsConfiguration]=\"messagesConfiguration.detailsConfiguration\"\n      [disableSoundForMessages]=\"messagesConfiguration.disableSoundForMessages\"\n      [disableTyping]=\"messagesConfiguration.disableTyping\"\n      [hideMessageComposer]=\"messagesConfiguration.hideMessageComposer\"\n      [hideMessageHeader]=\"messagesConfiguration.hideMessageHeader\"\n      [messageComposerView]=\"messagesConfiguration.messageComposerView\"\n      [messageHeaderView]=\"messagesConfiguration.messageHeaderView\"\n      [messageListView]=\"messagesConfiguration.messageListView\"\n      [hideDetails]=\"messagesConfiguration.hideDetails!\"\n      [threadedMessageConfiguration]=\"messagesConfiguration.threadedMessageConfiguration\">\n    </cometchat-messages>\n    <!--Message List Screen ENDS-->\n  </div>\n  <div class=\"cc-with-messages__start-conversation\"\n    [ngStyle]=\"contactsWrapperStyles()\"\n    [ngClass]=\"{mobile : isMobileView}\" *ngIf=\"showStartConversation\">\n\n    <cometchat-contacts [onItemClick]=\"onContactClicked\"\n      [usersConfiguration]=\"StartConversationConfiguration?.usersConfiguration!\"\n      [groupsConfiguration]=\"StartConversationConfiguration?.groupsConfiguration!\"\n      [closeIconURL]=\"StartConversationConfiguration?.closeIconURL!\"\n      [contactsStyle]=\"StartConversationConfiguration?.contactsStyle!\"\n      [selectionMode]=\"StartConversationConfiguration?.selectionMode!\"\n      [onClose]=\"closeStartConversation\"\n      [tabVisibility]=\"StartConversationConfiguration?.tabVisibility!\"\n      [selectionLimit]=\"StartConversationConfiguration?.selectionLimit!\"\n      [tabs]=\"StartConversationConfiguration?.tabs!\"\n      [hideSubmitButton]=\"StartConversationConfiguration?.hideSubmitButton!\"></cometchat-contacts>\n  </div>\n  <div class=\"cc-decorator__message--empty\"\n    *ngIf=\"!user && !group && !showStartConversation\"\n    [ngStyle]=\"emptyMessageStyle()\">\n    <cometchat-label [text]=\"messageText\"\n      [labelStyle]=\"labelStyle\"></cometchat-label>\n  </div>\n  <ng-template #startConversationButton>\n    <cometchat-button *ngIf=\"!hideStartNewConversation\"\n      [iconURL]=\"startNewConversationIconURL\"\n      [buttonStyle]=\"startConversationButtonStyle\"\n      (cc-button-clicked)=\"triggerStartConversation()\"></cometchat-button>\n\n  </ng-template>\n", styles: [".cc-with-messages__wrapper{display:flex;height:100%;width:100%;box-sizing:border-box;overflow:hidden}.cc-with-messages__sidebar{width:280px;height:100%;position:relative}.cc-with-messages__main,.cc-with-messages__start-conversation{width:calc(100% - 280px);height:100%}.mobile{width:100%!important;height:100%;position:absolute}.cc-decorator__message--empty{display:flex;justify-content:center;align-items:center}\n"], components: [{ type: CometChatConversationsComponent, selector: "cometchat-conversations", inputs: ["subtitleView", "title", "options", "searchPlaceHolder", "disableUsersPresence", "disableReceipt", "disableTyping", "deliveredIcon", "readIcon", "errorIcon", "datePattern", "onError", "sentIcon", "privateGroupIcon", "protectedGroupIcon", "passwordGroupIcon", "customSoundForMessages", "activeConversation", "searchIconURL", "hideSearch", "conversationsRequestBuilder", "emptyStateView", "onSelect", "loadingIconURL", "errorStateView", "loadingStateView", "emptyStateText", "errorStateText", "titleAlignment", "listItemView", "menu", "hideSeparator", "searchPlaceholder", "hideError", "selectionMode", "disableSoundForMessages", "confirmDialogTitle", "confirmButtonText", "cancelButtonText", "confirmDialogMessage", "onItemClick", "deleteConversationDialogStyle", "backdropStyle", "badgeStyle", "dateStyle", "conversationsStyle", "listItemStyle", "statusIndicatorStyle", "typingIndicatorText", "threadIndicatorText", "avatarStyle", "receiptStyle", "loggedInUser", "disableMentions", "textFormatters"] }, { type: CometChatMessagesComponent, selector: "cometchat-messages", inputs: ["user", "group", "currentAskAIBot", "hideMessageComposer", "disableTyping", "messageHeaderConfiguration", "messageListConfiguration", "messageComposerConfiguration", "threadedMessageConfiguration", "detailsConfiguration", "customSoundForIncomingMessages", "customSoundForOutgoingMessages", "disableSoundForMessages", "messagesStyle", "messageHeaderView", "messageComposerView", "messageListView", "hideMessageHeader", "hideDetails", "auxiliaryMenu"] }, { type: CometChatContactsComponent, selector: "cometchat-contacts", inputs: ["title", "usersTabTitle", "groupsTabTitle", "usersConfiguration", "groupsConfiguration", "onSubmitButtonClick", "closeIconURL", "contactsStyle", "selectionMode", "onClose", "onItemClick", "tabVisibility", "selectionLimit", "tabs", "hideSubmitButton", "submitButtonText"] }], directives: [{ type: i3.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+CometChatConversationsWithMessagesComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: CometChatConversationsWithMessagesComponent, selector: "cometchat-conversations-with-messages", inputs: { user: "user", group: "group", isMobileView: "isMobileView", messageText: "messageText", conversationsWithMessagesStyle: "conversationsWithMessagesStyle", messagesConfiguration: "messagesConfiguration", conversationConfiguration: "conversationConfiguration", onError: "onError", startNewConversationIconURL: "startNewConversationIconURL", hideStartNewConversation: "hideStartNewConversation", StartConversationConfiguration: "StartConversationConfiguration" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"cc-with-messages__wrapper\" [ngStyle]=\"chatsWrapperStyles()\">\n  <div class=\"cc-with-messages__sidebar\" [ngClass]=\"{mobile : isMobileView}\"\n    [ngStyle]=\"sideBarStyle\">\n    <cometchat-conversations #conversationRef\n      [activeConversation]=\"activeConversation\"\n      [onItemClick]=\"conversationConfiguration.onItemClick || onItemClick\"\n      [conversationsStyle]=\"conversationConfiguration.conversationsStyle\"\n      [statusIndicatorStyle]=\"conversationConfiguration?.statusIndicatorStyle\"\n      [avatarStyle]=\"conversationConfiguration?.avatarStyle!\"\n      [subtitleView]=\"conversationConfiguration.subtitleView\"\n      [options]=\"conversationConfiguration.options\"\n      [disableUsersPresence]=\"conversationConfiguration.disableUsersPresence\"\n      [disableReceipt]=\"conversationConfiguration.disableReceipt\"\n      [hideReceipt]=\"conversationConfiguration.hideReceipt\"\n      [disableTyping]=\"conversationConfiguration.disableTyping\"\n      [deliveredIcon]=\"conversationConfiguration.deliveredIcon\"\n      [readIcon]=\"conversationConfiguration.readIcon\"\n      [waitIcon]=\"conversationConfiguration.waitIcon\"\n      [errorIcon]=\"conversationConfiguration.errorIcon\"\n      [datePattern]=\"conversationConfiguration.datePattern\"\n      [receiptStyle]=\"conversationConfiguration.receiptStyle\"\n      [sentIcon]=\"conversationConfiguration.sentIcon\"\n      [privateGroupIcon]=\"conversationConfiguration.privateGroupIcon\"\n      [protectedGroupIcon]=\"conversationConfiguration.protectedGroupIcon\"\n      [passwordGroupIcon]=\"conversationConfiguration.passwordGroupIcon\"\n      [customSoundForMessages]=\"conversationConfiguration.customSoundForMessages\"\n      [conversationsRequestBuilder]=\"conversationConfiguration.conversationsRequestBuilder\"\n      [emptyStateView]=\"conversationConfiguration.emptyStateView\"\n      [onSelect]=\"conversationConfiguration.onSelect\"\n      [loadingIconURL]=\"conversationConfiguration.loadingIconURL\"\n      [errorStateView]=\"conversationConfiguration.errorStateView\"\n      [loadingStateView]=\"conversationConfiguration.loadingStateView\"\n      [titleAlignment]=\"conversationConfiguration.titleAlignment\"\n      [listItemView]=\"conversationConfiguration.listItemView\"\n      [menu]=\"conversationConfiguration.menu || startConversationButton\"\n      [hideSeparator]=\"conversationConfiguration.hideSeparator\"\n      [hideError]=\"conversationConfiguration.hideError\"\n      [selectionMode]=\"conversationConfiguration.selectionMode\"\n      [disableSoundForMessages]=\"conversationConfiguration.disableSoundForMessages\"\n      [deleteConversationDialogStyle]=\"conversationConfiguration.deleteConversationDialogStyle\"\n      [badgeStyle]=\"conversationConfiguration.badgeStyle\"\n      [dateStyle]=\"conversationConfiguration.dateStyle\"\n      [listItemStyle]=\"conversationConfiguration.listItemStyle\"\n      [backdropStyle]=\"conversationConfiguration.backdropStyle\"\n      [textFormatters]=\"conversationConfiguration?.textFormatters\"\n      [disableMentions]=\"conversationConfiguration.disableMentions\"></cometchat-conversations>\n  </div>\n  <div class=\"cc-with-messages__main\" [ngClass]=\"{mobile : isMobileView}\"\n    *ngIf=\"!showStartConversation && (user || group)\">\n    <!--Message List Screen-->\n    <cometchat-messages #messagesRef [user]=\"user!\" [group]=\"group!\"\n      [messageHeaderConfiguration]=\"messagesConfiguration.messageHeaderConfiguration\"\n      [messageListConfiguration]=\"messagesConfiguration.messageListConfiguration\"\n      [messageComposerConfiguration]=\"messagesConfiguration.messageComposerConfiguration\"\n      [messagesStyle]=\"messagesConfiguration.messagesStyle\"\n      [customSoundForIncomingMessages]=\"messagesConfiguration.customSoundForIncomingMessages\"\n      [customSoundForOutgoingMessages]=\"messagesConfiguration.customSoundForOutgoingMessages\"\n      [detailsConfiguration]=\"messagesConfiguration.detailsConfiguration\"\n      [disableSoundForMessages]=\"messagesConfiguration.disableSoundForMessages\"\n      [disableTyping]=\"messagesConfiguration.disableTyping\"\n      [hideMessageComposer]=\"messagesConfiguration.hideMessageComposer\"\n      [hideMessageHeader]=\"messagesConfiguration.hideMessageHeader\"\n      [messageComposerView]=\"messagesConfiguration.messageComposerView\"\n      [messageHeaderView]=\"messagesConfiguration.messageHeaderView\"\n      [messageListView]=\"messagesConfiguration.messageListView\"\n      [hideDetails]=\"messagesConfiguration.hideDetails!\"\n      [threadedMessageConfiguration]=\"messagesConfiguration.threadedMessageConfiguration\">\n    </cometchat-messages>\n    <!--Message List Screen ENDS-->\n  </div>\n  <div class=\"cc-with-messages__start-conversation\"\n    [ngStyle]=\"contactsWrapperStyles()\"\n    [ngClass]=\"{mobile : isMobileView}\" *ngIf=\"showStartConversation\">\n\n    <cometchat-contacts [onItemClick]=\"onContactClicked\"\n      [usersConfiguration]=\"StartConversationConfiguration?.usersConfiguration!\"\n      [groupsConfiguration]=\"StartConversationConfiguration?.groupsConfiguration!\"\n      [closeIconURL]=\"StartConversationConfiguration?.closeIconURL!\"\n      [contactsStyle]=\"StartConversationConfiguration?.contactsStyle!\"\n      [selectionMode]=\"StartConversationConfiguration?.selectionMode!\"\n      [onClose]=\"closeStartConversation\"\n      [tabVisibility]=\"StartConversationConfiguration?.tabVisibility!\"\n      [selectionLimit]=\"StartConversationConfiguration?.selectionLimit!\"\n      [tabs]=\"StartConversationConfiguration?.tabs!\"\n      [hideSubmitButton]=\"StartConversationConfiguration?.hideSubmitButton!\"></cometchat-contacts>\n  </div>\n  <div class=\"cc-decorator__message--empty\"\n    *ngIf=\"!user && !group && !showStartConversation\"\n    [ngStyle]=\"emptyMessageStyle()\">\n    <cometchat-label [text]=\"messageText\"\n      [labelStyle]=\"labelStyle\"></cometchat-label>\n  </div>\n  <ng-template #startConversationButton>\n    <cometchat-button *ngIf=\"!hideStartNewConversation\"\n      [iconURL]=\"startNewConversationIconURL\"\n      [buttonStyle]=\"startConversationButtonStyle\"\n      (cc-button-clicked)=\"triggerStartConversation()\"></cometchat-button>\n\n  </ng-template>\n", styles: [".cc-with-messages__wrapper{display:flex;height:100%;width:100%;box-sizing:border-box;overflow:hidden}.cc-with-messages__sidebar{width:280px;height:100%;position:relative}.cc-with-messages__main,.cc-with-messages__start-conversation{width:calc(100% - 280px);height:100%}.mobile{width:100%!important;height:100%;position:absolute}.cc-decorator__message--empty{display:flex;justify-content:center;align-items:center}\n"], components: [{ type: CometChatConversationsComponent, selector: "cometchat-conversations", inputs: ["subtitleView", "title", "options", "searchPlaceHolder", "disableUsersPresence", "disableReceipt", "hideReceipt", "disableTyping", "deliveredIcon", "readIcon", "errorIcon", "datePattern", "onError", "sentIcon", "privateGroupIcon", "protectedGroupIcon", "passwordGroupIcon", "customSoundForMessages", "activeConversation", "searchIconURL", "hideSearch", "conversationsRequestBuilder", "emptyStateView", "onSelect", "loadingIconURL", "errorStateView", "loadingStateView", "emptyStateText", "errorStateText", "titleAlignment", "listItemView", "menu", "hideSeparator", "searchPlaceholder", "hideError", "selectionMode", "disableSoundForMessages", "confirmDialogTitle", "confirmButtonText", "cancelButtonText", "confirmDialogMessage", "onItemClick", "deleteConversationDialogStyle", "backdropStyle", "badgeStyle", "dateStyle", "conversationsStyle", "listItemStyle", "statusIndicatorStyle", "typingIndicatorText", "threadIndicatorText", "avatarStyle", "receiptStyle", "loggedInUser", "disableMentions", "textFormatters"] }, { type: CometChatMessagesComponent, selector: "cometchat-messages", inputs: ["user", "group", "currentAskAIBot", "hideMessageComposer", "disableTyping", "messageHeaderConfiguration", "messageListConfiguration", "messageComposerConfiguration", "threadedMessageConfiguration", "detailsConfiguration", "customSoundForIncomingMessages", "customSoundForOutgoingMessages", "disableSoundForMessages", "messagesStyle", "messageHeaderView", "messageComposerView", "messageListView", "hideMessageHeader", "hideDetails", "auxiliaryMenu"] }, { type: CometChatContactsComponent, selector: "cometchat-contacts", inputs: ["title", "usersTabTitle", "groupsTabTitle", "usersConfiguration", "groupsConfiguration", "onSubmitButtonClick", "closeIconURL", "contactsStyle", "selectionMode", "onClose", "onItemClick", "tabVisibility", "selectionLimit", "tabs", "hideSubmitButton", "submitButtonText"] }], directives: [{ type: i3.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: CometChatConversationsWithMessagesComponent, decorators: [{
             type: Component,
-            args: [{ selector: "cometchat-conversations-with-messages", changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"cc-with-messages__wrapper\" [ngStyle]=\"chatsWrapperStyles()\">\n  <div class=\"cc-with-messages__sidebar\" [ngClass]=\"{mobile : isMobileView}\"\n    [ngStyle]=\"sideBarStyle\">\n    <cometchat-conversations #conversationRef\n      [activeConversation]=\"activeConversation\"\n      [onItemClick]=\"conversationConfiguration.onItemClick || onItemClick\"\n      [conversationsStyle]=\"conversationConfiguration.conversationsStyle\"\n      [statusIndicatorStyle]=\"conversationConfiguration?.statusIndicatorStyle\"\n      [avatarStyle]=\"conversationConfiguration?.avatarStyle!\"\n      [subtitleView]=\"conversationConfiguration.subtitleView\"\n      [options]=\"conversationConfiguration.options\"\n      [disableUsersPresence]=\"conversationConfiguration.disableUsersPresence\"\n      [disableReceipt]=\"conversationConfiguration.disableReceipt\"\n      [disableTyping]=\"conversationConfiguration.disableTyping\"\n      [deliveredIcon]=\"conversationConfiguration.deliveredIcon\"\n      [readIcon]=\"conversationConfiguration.readIcon\"\n      [waitIcon]=\"conversationConfiguration.waitIcon\"\n      [errorIcon]=\"conversationConfiguration.errorIcon\"\n      [datePattern]=\"conversationConfiguration.datePattern\"\n      [receiptStyle]=\"conversationConfiguration.receiptStyle\"\n      [sentIcon]=\"conversationConfiguration.sentIcon\"\n      [privateGroupIcon]=\"conversationConfiguration.privateGroupIcon\"\n      [protectedGroupIcon]=\"conversationConfiguration.protectedGroupIcon\"\n      [passwordGroupIcon]=\"conversationConfiguration.passwordGroupIcon\"\n      [customSoundForMessages]=\"conversationConfiguration.customSoundForMessages\"\n      [conversationsRequestBuilder]=\"conversationConfiguration.conversationsRequestBuilder\"\n      [emptyStateView]=\"conversationConfiguration.emptyStateView\"\n      [onSelect]=\"conversationConfiguration.onSelect\"\n      [loadingIconURL]=\"conversationConfiguration.loadingIconURL\"\n      [errorStateView]=\"conversationConfiguration.errorStateView\"\n      [loadingStateView]=\"conversationConfiguration.loadingStateView\"\n      [titleAlignment]=\"conversationConfiguration.titleAlignment\"\n      [listItemView]=\"conversationConfiguration.listItemView\"\n      [menu]=\"conversationConfiguration.menu || startConversationButton\"\n      [hideSeparator]=\"conversationConfiguration.hideSeparator\"\n      [hideError]=\"conversationConfiguration.hideError\"\n      [selectionMode]=\"conversationConfiguration.selectionMode\"\n      [disableSoundForMessages]=\"conversationConfiguration.disableSoundForMessages\"\n      [deleteConversationDialogStyle]=\"conversationConfiguration.deleteConversationDialogStyle\"\n      [badgeStyle]=\"conversationConfiguration.badgeStyle\"\n      [dateStyle]=\"conversationConfiguration.dateStyle\"\n      [listItemStyle]=\"conversationConfiguration.listItemStyle\"\n      [backdropStyle]=\"conversationConfiguration.backdropStyle\"\n      [textFormatters]=\"conversationConfiguration?.textFormatters\"\n      [disableMentions]=\"conversationConfiguration.disableMentions\"></cometchat-conversations>\n  </div>\n  <div class=\"cc-with-messages__main\" [ngClass]=\"{mobile : isMobileView}\"\n    *ngIf=\"!showStartConversation && (user || group)\">\n    <!--Message List Screen-->\n    <cometchat-messages #messagesRef [user]=\"user!\" [group]=\"group!\"\n      [messageHeaderConfiguration]=\"messagesConfiguration.messageHeaderConfiguration\"\n      [messageListConfiguration]=\"messagesConfiguration.messageListConfiguration\"\n      [messageComposerConfiguration]=\"messagesConfiguration.messageComposerConfiguration\"\n      [messagesStyle]=\"messagesConfiguration.messagesStyle\"\n      [customSoundForIncomingMessages]=\"messagesConfiguration.customSoundForIncomingMessages\"\n      [customSoundForOutgoingMessages]=\"messagesConfiguration.customSoundForOutgoingMessages\"\n      [detailsConfiguration]=\"messagesConfiguration.detailsConfiguration\"\n      [disableSoundForMessages]=\"messagesConfiguration.disableSoundForMessages\"\n      [disableTyping]=\"messagesConfiguration.disableTyping\"\n      [hideMessageComposer]=\"messagesConfiguration.hideMessageComposer\"\n      [hideMessageHeader]=\"messagesConfiguration.hideMessageHeader\"\n      [messageComposerView]=\"messagesConfiguration.messageComposerView\"\n      [messageHeaderView]=\"messagesConfiguration.messageHeaderView\"\n      [messageListView]=\"messagesConfiguration.messageListView\"\n      [hideDetails]=\"messagesConfiguration.hideDetails!\"\n      [threadedMessageConfiguration]=\"messagesConfiguration.threadedMessageConfiguration\">\n    </cometchat-messages>\n    <!--Message List Screen ENDS-->\n  </div>\n  <div class=\"cc-with-messages__start-conversation\"\n    [ngStyle]=\"contactsWrapperStyles()\"\n    [ngClass]=\"{mobile : isMobileView}\" *ngIf=\"showStartConversation\">\n\n    <cometchat-contacts [onItemClick]=\"onContactClicked\"\n      [usersConfiguration]=\"StartConversationConfiguration?.usersConfiguration!\"\n      [groupsConfiguration]=\"StartConversationConfiguration?.groupsConfiguration!\"\n      [closeIconURL]=\"StartConversationConfiguration?.closeIconURL!\"\n      [contactsStyle]=\"StartConversationConfiguration?.contactsStyle!\"\n      [selectionMode]=\"StartConversationConfiguration?.selectionMode!\"\n      [onClose]=\"closeStartConversation\"\n      [tabVisibility]=\"StartConversationConfiguration?.tabVisibility!\"\n      [selectionLimit]=\"StartConversationConfiguration?.selectionLimit!\"\n      [tabs]=\"StartConversationConfiguration?.tabs!\"\n      [hideSubmitButton]=\"StartConversationConfiguration?.hideSubmitButton!\"></cometchat-contacts>\n  </div>\n  <div class=\"cc-decorator__message--empty\"\n    *ngIf=\"!user && !group && !showStartConversation\"\n    [ngStyle]=\"emptyMessageStyle()\">\n    <cometchat-label [text]=\"messageText\"\n      [labelStyle]=\"labelStyle\"></cometchat-label>\n  </div>\n  <ng-template #startConversationButton>\n    <cometchat-button *ngIf=\"!hideStartNewConversation\"\n      [iconURL]=\"startNewConversationIconURL\"\n      [buttonStyle]=\"startConversationButtonStyle\"\n      (cc-button-clicked)=\"triggerStartConversation()\"></cometchat-button>\n\n  </ng-template>\n", styles: [".cc-with-messages__wrapper{display:flex;height:100%;width:100%;box-sizing:border-box;overflow:hidden}.cc-with-messages__sidebar{width:280px;height:100%;position:relative}.cc-with-messages__main,.cc-with-messages__start-conversation{width:calc(100% - 280px);height:100%}.mobile{width:100%!important;height:100%;position:absolute}.cc-decorator__message--empty{display:flex;justify-content:center;align-items:center}\n"] }]
+            args: [{ selector: "cometchat-conversations-with-messages", changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"cc-with-messages__wrapper\" [ngStyle]=\"chatsWrapperStyles()\">\n  <div class=\"cc-with-messages__sidebar\" [ngClass]=\"{mobile : isMobileView}\"\n    [ngStyle]=\"sideBarStyle\">\n    <cometchat-conversations #conversationRef\n      [activeConversation]=\"activeConversation\"\n      [onItemClick]=\"conversationConfiguration.onItemClick || onItemClick\"\n      [conversationsStyle]=\"conversationConfiguration.conversationsStyle\"\n      [statusIndicatorStyle]=\"conversationConfiguration?.statusIndicatorStyle\"\n      [avatarStyle]=\"conversationConfiguration?.avatarStyle!\"\n      [subtitleView]=\"conversationConfiguration.subtitleView\"\n      [options]=\"conversationConfiguration.options\"\n      [disableUsersPresence]=\"conversationConfiguration.disableUsersPresence\"\n      [disableReceipt]=\"conversationConfiguration.disableReceipt\"\n      [hideReceipt]=\"conversationConfiguration.hideReceipt\"\n      [disableTyping]=\"conversationConfiguration.disableTyping\"\n      [deliveredIcon]=\"conversationConfiguration.deliveredIcon\"\n      [readIcon]=\"conversationConfiguration.readIcon\"\n      [waitIcon]=\"conversationConfiguration.waitIcon\"\n      [errorIcon]=\"conversationConfiguration.errorIcon\"\n      [datePattern]=\"conversationConfiguration.datePattern\"\n      [receiptStyle]=\"conversationConfiguration.receiptStyle\"\n      [sentIcon]=\"conversationConfiguration.sentIcon\"\n      [privateGroupIcon]=\"conversationConfiguration.privateGroupIcon\"\n      [protectedGroupIcon]=\"conversationConfiguration.protectedGroupIcon\"\n      [passwordGroupIcon]=\"conversationConfiguration.passwordGroupIcon\"\n      [customSoundForMessages]=\"conversationConfiguration.customSoundForMessages\"\n      [conversationsRequestBuilder]=\"conversationConfiguration.conversationsRequestBuilder\"\n      [emptyStateView]=\"conversationConfiguration.emptyStateView\"\n      [onSelect]=\"conversationConfiguration.onSelect\"\n      [loadingIconURL]=\"conversationConfiguration.loadingIconURL\"\n      [errorStateView]=\"conversationConfiguration.errorStateView\"\n      [loadingStateView]=\"conversationConfiguration.loadingStateView\"\n      [titleAlignment]=\"conversationConfiguration.titleAlignment\"\n      [listItemView]=\"conversationConfiguration.listItemView\"\n      [menu]=\"conversationConfiguration.menu || startConversationButton\"\n      [hideSeparator]=\"conversationConfiguration.hideSeparator\"\n      [hideError]=\"conversationConfiguration.hideError\"\n      [selectionMode]=\"conversationConfiguration.selectionMode\"\n      [disableSoundForMessages]=\"conversationConfiguration.disableSoundForMessages\"\n      [deleteConversationDialogStyle]=\"conversationConfiguration.deleteConversationDialogStyle\"\n      [badgeStyle]=\"conversationConfiguration.badgeStyle\"\n      [dateStyle]=\"conversationConfiguration.dateStyle\"\n      [listItemStyle]=\"conversationConfiguration.listItemStyle\"\n      [backdropStyle]=\"conversationConfiguration.backdropStyle\"\n      [textFormatters]=\"conversationConfiguration?.textFormatters\"\n      [disableMentions]=\"conversationConfiguration.disableMentions\"></cometchat-conversations>\n  </div>\n  <div class=\"cc-with-messages__main\" [ngClass]=\"{mobile : isMobileView}\"\n    *ngIf=\"!showStartConversation && (user || group)\">\n    <!--Message List Screen-->\n    <cometchat-messages #messagesRef [user]=\"user!\" [group]=\"group!\"\n      [messageHeaderConfiguration]=\"messagesConfiguration.messageHeaderConfiguration\"\n      [messageListConfiguration]=\"messagesConfiguration.messageListConfiguration\"\n      [messageComposerConfiguration]=\"messagesConfiguration.messageComposerConfiguration\"\n      [messagesStyle]=\"messagesConfiguration.messagesStyle\"\n      [customSoundForIncomingMessages]=\"messagesConfiguration.customSoundForIncomingMessages\"\n      [customSoundForOutgoingMessages]=\"messagesConfiguration.customSoundForOutgoingMessages\"\n      [detailsConfiguration]=\"messagesConfiguration.detailsConfiguration\"\n      [disableSoundForMessages]=\"messagesConfiguration.disableSoundForMessages\"\n      [disableTyping]=\"messagesConfiguration.disableTyping\"\n      [hideMessageComposer]=\"messagesConfiguration.hideMessageComposer\"\n      [hideMessageHeader]=\"messagesConfiguration.hideMessageHeader\"\n      [messageComposerView]=\"messagesConfiguration.messageComposerView\"\n      [messageHeaderView]=\"messagesConfiguration.messageHeaderView\"\n      [messageListView]=\"messagesConfiguration.messageListView\"\n      [hideDetails]=\"messagesConfiguration.hideDetails!\"\n      [threadedMessageConfiguration]=\"messagesConfiguration.threadedMessageConfiguration\">\n    </cometchat-messages>\n    <!--Message List Screen ENDS-->\n  </div>\n  <div class=\"cc-with-messages__start-conversation\"\n    [ngStyle]=\"contactsWrapperStyles()\"\n    [ngClass]=\"{mobile : isMobileView}\" *ngIf=\"showStartConversation\">\n\n    <cometchat-contacts [onItemClick]=\"onContactClicked\"\n      [usersConfiguration]=\"StartConversationConfiguration?.usersConfiguration!\"\n      [groupsConfiguration]=\"StartConversationConfiguration?.groupsConfiguration!\"\n      [closeIconURL]=\"StartConversationConfiguration?.closeIconURL!\"\n      [contactsStyle]=\"StartConversationConfiguration?.contactsStyle!\"\n      [selectionMode]=\"StartConversationConfiguration?.selectionMode!\"\n      [onClose]=\"closeStartConversation\"\n      [tabVisibility]=\"StartConversationConfiguration?.tabVisibility!\"\n      [selectionLimit]=\"StartConversationConfiguration?.selectionLimit!\"\n      [tabs]=\"StartConversationConfiguration?.tabs!\"\n      [hideSubmitButton]=\"StartConversationConfiguration?.hideSubmitButton!\"></cometchat-contacts>\n  </div>\n  <div class=\"cc-decorator__message--empty\"\n    *ngIf=\"!user && !group && !showStartConversation\"\n    [ngStyle]=\"emptyMessageStyle()\">\n    <cometchat-label [text]=\"messageText\"\n      [labelStyle]=\"labelStyle\"></cometchat-label>\n  </div>\n  <ng-template #startConversationButton>\n    <cometchat-button *ngIf=\"!hideStartNewConversation\"\n      [iconURL]=\"startNewConversationIconURL\"\n      [buttonStyle]=\"startConversationButtonStyle\"\n      (cc-button-clicked)=\"triggerStartConversation()\"></cometchat-button>\n\n  </ng-template>\n", styles: [".cc-with-messages__wrapper{display:flex;height:100%;width:100%;box-sizing:border-box;overflow:hidden}.cc-with-messages__sidebar{width:280px;height:100%;position:relative}.cc-with-messages__main,.cc-with-messages__start-conversation{width:calc(100% - 280px);height:100%}.mobile{width:100%!important;height:100%;position:absolute}.cc-decorator__message--empty{display:flex;justify-content:center;align-items:center}\n"] }]
         }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.ChangeDetectorRef }, { type: CometChatThemeService }]; }, propDecorators: { user: [{
                 type: Input
             }], group: [{
@@ -18931,9 +19049,9 @@ class CometChatGroupsWithMessagesComponent {
                 this.ref.detectChanges();
                 return;
             }
-            CometChat.joinGroup(group).then(() => {
+            CometChat.joinGroup(group).then((groupJoined) => {
                 CometChatGroupEvents.ccGroupMemberJoined.next({
-                    joinedGroup: group,
+                    joinedGroup: groupJoined,
                     joinedUser: this.loggedInUser
                 });
                 group.setHasJoined(true);