@cometchat/chat-uikit-angular 4.3.23 → 4.3.25

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

@@ -1912,7 +1912,7 @@ class CometChatUIKit {
         if (window) {
             window.CometChatUiKit = {
                 name: "@cometchat/chat-uikit-angular",
-                version: "4.3.23",
+                version: "4.3.25",
             };
         }
         if (CometChatUIKitSharedSettings) {
@@ -3986,6 +3986,14 @@ class CometChatUsersComponent {
         this.previousSearchKeyword = "";
         this.isWebsocketReconnected = false;
         this.selectedUsers = {};
+        this.checkboxStyle = {
+            height: "24px",
+            width: "24px",
+            border: "none",
+            borderRadius: "4px",
+            checkedBackgroundColor: "#2196F3",
+            uncheckedBackgroundColor: "#ccc"
+        };
         this.onScrolledToBottom = null;
         this.fetchUsersOnSearchKeyWordChange = () => {
             if (this.fetchingUsers) {
@@ -4408,13 +4416,21 @@ class CometChatUsersComponent {
             searchTextFont: fontHelper(this.themeService.theme.typography.text3),
         });
         this.usersStyle = { ...defaultStyle, ...this.usersStyle };
+        this.checkboxStyle = {
+            height: "24px",
+            width: "24px",
+            border: "none",
+            borderRadius: "4px",
+            checkedBackgroundColor: this.themeService.theme.palette.getPrimary(),
+            uncheckedBackgroundColor: this.themeService.theme.palette.getAccent400()
+        };
     }
 }
 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-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 });
+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 [checkboxStyle]=\"checkboxStyle\"  (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", styles: [".cc-users{height:100%;width:100%;box-sizing:border-box}.cc-menus{position:absolute;right:12px;padding:12px;cursor:pointer}\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-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"] }]
+            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 [checkboxStyle]=\"checkboxStyle\"  (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", styles: [".cc-users{height:100%;width:100%;box-sizing:border-box}.cc-menus{position:absolute;right:12px;padding:12px;cursor:pointer}\n"] }]
         }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }, { type: CometChatThemeService }]; }, propDecorators: { usersRequestBuilder: [{
                 type: Input
             }], searchRequestBuilder: [{
@@ -5452,6 +5468,14 @@ class CometChatBannedMembersComponent {
         this.membersListenerId = "bannedMembers_" + new Date().getTime();
         this.membersList = [];
         this.onScrolledToBottom = null;
+        this.checkboxStyle = {
+            height: "24px",
+            width: "24px",
+            border: "none",
+            borderRadius: "4px",
+            checkedBackgroundColor: "#2196F3",
+            uncheckedBackgroundColor: "#ccc"
+        };
         /**
        * @param  {CometChat.GroupMember} member
        */
@@ -5745,6 +5769,14 @@ class CometChatBannedMembersComponent {
             searchTextFont: this.bannedMembersStyle.searchTextFont,
             searchTextColor: this.bannedMembersStyle.searchTextColor,
         };
+        this.checkboxStyle = {
+            height: "24px",
+            width: "24px",
+            border: "none",
+            borderRadius: "4px",
+            checkedBackgroundColor: this.themeService.theme.palette.getPrimary(),
+            uncheckedBackgroundColor: this.themeService.theme.palette.getAccent400()
+        };
     }
     setStatusStyle() {
         let defaultStyle = {
@@ -5786,10 +5818,10 @@ class CometChatBannedMembersComponent {
     }
 }
 CometChatBannedMembersComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: CometChatBannedMembersComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: CometChatThemeService }], target: i0.ɵɵFactoryTarget.Component });
-CometChatBannedMembersComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: CometChatBannedMembersComponent, selector: "cometchat-banned-members", inputs: { bannedMembersRequestBuilder: "bannedMembersRequestBuilder", searchRequestBuilder: "searchRequestBuilder", subtitleView: "subtitleView", listItemView: "listItemView", disableUsersPresence: "disableUsersPresence", menu: "menu", options: "options", backButtonIconURL: "backButtonIconURL", closeButtonIconURL: "closeButtonIconURL", showBackButton: "showBackButton", hideSeparator: "hideSeparator", selectionMode: "selectionMode", searchPlaceholder: "searchPlaceholder", searchIconURL: "searchIconURL", hideSearch: "hideSearch", title: "title", onError: "onError", onSelect: "onSelect", onBack: "onBack", onClose: "onClose", group: "group", emptyStateView: "emptyStateView", errorStateView: "errorStateView", loadingIconURL: "loadingIconURL", loadingStateView: "loadingStateView", emptyStateText: "emptyStateText", errorStateText: "errorStateText", titleAlignment: "titleAlignment", unbanIconURL: "unbanIconURL", statusIndicatorStyle: "statusIndicatorStyle", avatarStyle: "avatarStyle", bannedMembersStyle: "bannedMembersStyle", listItemStyle: "listItemStyle" }, ngImport: i0, template: "<div class=\"cc-banned-members\" [ngStyle]=\"wrapperStyle()\">\n  <div class=\"cc-banned-members__back\">\n    <cometchat-button [iconURL]=\"backButtonIconURL\" [buttonStyle]=\"backButtonStyle()\" *ngIf=\"showBackButton\"   (cc-button-clicked)=\"backClicked()\" >\n\n    </cometchat-button>\n  </div>\n  <div class=\"cc-banned-members__wrapper\" [ngStyle]=\"membersStyles()\">\n    <div class=\"cc-banned-members__menus\" *ngIf=\"menu\">\n      <ng-container *ngTemplateOutlet=\"menu\">\n      </ng-container>\n  </div>\n    <cometchat-list [listItemView]=\"listItemView ? listItemView : listItem\" [onScrolledToBottom]=\"onScrolledToBottom\" [onSearch]=\"onSearch\"\n        [list]=\"bannedMembers\" [searchText]=\"searchKeyword\" [searchPlaceholderText]=\"searchPlaceholder\"\n        [searchIconURL]=\"searchIconURL\" [hideSearch]=\"hideSearch\"  [title]=\"title\"\n\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-bannedMember>\n        <cometchat-list-item [statusIndicatorStyle]=\"statusIndicatorStyle\"\n        [statusIndicatorColor]=\"getStatusIndicatorColor(bannedMember)\" [title]=\"bannedMember?.name\" [avatarURL]=\"bannedMember?.avatar\" [avatarName]=\"bannedMember?.name\"\n            [listItemStyle]=\"listItemStyle\" [avatarStyle]=\"avatarStyle\"\n [hideSeparator]=\"hideSeparator\">\n            <div slot=\"subtitleView\" *ngIf=\"subtitleView\" class=\"cc-banned-members__subtitle-view\">\n                <ng-container *ngTemplateOutlet=\"subtitleView\">\n                </ng-container>\n            </div>\n            <div slot=\"menuView\"  *ngIf=\"options\">\n              <cometchat-menu-list [data]=\"options(bannedMember)\"  [menuListStyle]=\"menuListStyle\"></cometchat-menu-list>\n          </div>\n          <div slot=\"tailView\"  *ngIf=\"selectionMode != selectionmodeEnum.none; else changeScope\" class=\"cc-banned-members__tail-view\">\n            <ng-container *ngTemplateOutlet=\"tailView\">\n            </ng-container>\n        </div>\n        <ng-template  #changeScope>\n         <div  slot=\"tailView\">\n          <div class=\"cc-banned-members__unban\">\n            <cometchat-button [buttonStyle]=\"unbanIconStyle\" [iconURL]=\"unbanIconURL\" (click)=\"unBanMember(bannedMember)\">\n\n            </cometchat-button>\n          </div>\n         </div>\n        </ng-template>\n        </cometchat-list-item>\n        <ng-template #tailView>\n          <div  *ngIf=\"selectionMode == selectionmodeEnum.single\" class=\"cc-banned-members__selection--single\">\n            <cometchat-radio-button (cc-radio-button-changed)=\"onMembersSelected(bannedMember,$event)\"></cometchat-radio-button>\n          </div>\n          <div  *ngIf=\"selectionMode == selectionmodeEnum.multiple\" class=\"cc-banned-members__selection--multiple\">\n            <cometchat-checkbox (cc-checkbox-changed)=\"onMembersSelected(bannedMember,$event)\"></cometchat-checkbox>\n          </div>\n        </ng-template>\n    </ng-template>\n  </div>\n  <div class=\"cc-close-button\">\n    <cometchat-button [iconURL]=\"closeButtonIconURL\" [buttonStyle]=\"closeButtonStyle()\" (cc-button-clicked)=\"closeClicked()\">\n\n    </cometchat-button>\n  </div>\n</div>\n", styles: [".cc-banned-members{display:flex;height:100%;width:100%;overflow:hidden}.cc-banned-members__back{position:absolute;left:8px;padding:12px 8px 8px}.cc-banned-members__wrapper{height:100%;width:100%;padding:8px}.cc-close-button{position:absolute;right:8px;padding:12px 8px 8px}.cc-banned-members__tail-view{position:relative}.cc-banned-members__menus{position:absolute;right:12px;padding:12px;cursor:pointer}.cc-banned-members__unban{display:flex;align-items:center;justify-content:flex-end;width:100px}\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 });
+CometChatBannedMembersComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: CometChatBannedMembersComponent, selector: "cometchat-banned-members", inputs: { bannedMembersRequestBuilder: "bannedMembersRequestBuilder", searchRequestBuilder: "searchRequestBuilder", subtitleView: "subtitleView", listItemView: "listItemView", disableUsersPresence: "disableUsersPresence", menu: "menu", options: "options", backButtonIconURL: "backButtonIconURL", closeButtonIconURL: "closeButtonIconURL", showBackButton: "showBackButton", hideSeparator: "hideSeparator", selectionMode: "selectionMode", searchPlaceholder: "searchPlaceholder", searchIconURL: "searchIconURL", hideSearch: "hideSearch", title: "title", onError: "onError", onSelect: "onSelect", onBack: "onBack", onClose: "onClose", group: "group", emptyStateView: "emptyStateView", errorStateView: "errorStateView", loadingIconURL: "loadingIconURL", loadingStateView: "loadingStateView", emptyStateText: "emptyStateText", errorStateText: "errorStateText", titleAlignment: "titleAlignment", unbanIconURL: "unbanIconURL", statusIndicatorStyle: "statusIndicatorStyle", avatarStyle: "avatarStyle", bannedMembersStyle: "bannedMembersStyle", listItemStyle: "listItemStyle" }, ngImport: i0, template: "<div class=\"cc-banned-members\" [ngStyle]=\"wrapperStyle()\">\n  <div class=\"cc-banned-members__back\">\n    <cometchat-button [iconURL]=\"backButtonIconURL\" [buttonStyle]=\"backButtonStyle()\" *ngIf=\"showBackButton\"   (cc-button-clicked)=\"backClicked()\" >\n\n    </cometchat-button>\n  </div>\n  <div class=\"cc-banned-members__wrapper\" [ngStyle]=\"membersStyles()\">\n    <div class=\"cc-banned-members__menus\" *ngIf=\"menu\">\n      <ng-container *ngTemplateOutlet=\"menu\">\n      </ng-container>\n  </div>\n    <cometchat-list [listItemView]=\"listItemView ? listItemView : listItem\" [onScrolledToBottom]=\"onScrolledToBottom\" [onSearch]=\"onSearch\"\n        [list]=\"bannedMembers\" [searchText]=\"searchKeyword\" [searchPlaceholderText]=\"searchPlaceholder\"\n        [searchIconURL]=\"searchIconURL\" [hideSearch]=\"hideSearch\"  [title]=\"title\"\n\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-bannedMember>\n        <cometchat-list-item [statusIndicatorStyle]=\"statusIndicatorStyle\"\n        [statusIndicatorColor]=\"getStatusIndicatorColor(bannedMember)\" [title]=\"bannedMember?.name\" [avatarURL]=\"bannedMember?.avatar\" [avatarName]=\"bannedMember?.name\"\n            [listItemStyle]=\"listItemStyle\" [avatarStyle]=\"avatarStyle\"\n [hideSeparator]=\"hideSeparator\">\n            <div slot=\"subtitleView\" *ngIf=\"subtitleView\" class=\"cc-banned-members__subtitle-view\">\n                <ng-container *ngTemplateOutlet=\"subtitleView\">\n                </ng-container>\n            </div>\n            <div slot=\"menuView\"  *ngIf=\"options\">\n              <cometchat-menu-list [data]=\"options(bannedMember)\"  [menuListStyle]=\"menuListStyle\"></cometchat-menu-list>\n          </div>\n          <div slot=\"tailView\"  *ngIf=\"selectionMode != selectionmodeEnum.none; else changeScope\" class=\"cc-banned-members__tail-view\">\n            <ng-container *ngTemplateOutlet=\"tailView\">\n            </ng-container>\n        </div>\n        <ng-template  #changeScope>\n         <div  slot=\"tailView\">\n          <div class=\"cc-banned-members__unban\">\n            <cometchat-button [buttonStyle]=\"unbanIconStyle\" [iconURL]=\"unbanIconURL\" (click)=\"unBanMember(bannedMember)\">\n\n            </cometchat-button>\n          </div>\n         </div>\n        </ng-template>\n        </cometchat-list-item>\n        <ng-template #tailView>\n          <div  *ngIf=\"selectionMode == selectionmodeEnum.single\" class=\"cc-banned-members__selection--single\">\n            <cometchat-radio-button (cc-radio-button-changed)=\"onMembersSelected(bannedMember,$event)\"></cometchat-radio-button>\n          </div>\n          <div  *ngIf=\"selectionMode == selectionmodeEnum.multiple\" class=\"cc-banned-members__selection--multiple\">\n            <cometchat-checkbox [checkboxStyle]=\"checkboxStyle\" (cc-checkbox-changed)=\"onMembersSelected(bannedMember,$event)\"></cometchat-checkbox>\n          </div>\n        </ng-template>\n    </ng-template>\n  </div>\n  <div class=\"cc-close-button\">\n    <cometchat-button [iconURL]=\"closeButtonIconURL\" [buttonStyle]=\"closeButtonStyle()\" (cc-button-clicked)=\"closeClicked()\">\n\n    </cometchat-button>\n  </div>\n</div>\n", styles: [".cc-banned-members{display:flex;height:100%;width:100%;overflow:hidden}.cc-banned-members__back{position:absolute;left:8px;padding:12px 8px 8px}.cc-banned-members__wrapper{height:100%;width:100%;padding:8px}.cc-close-button{position:absolute;right:8px;padding:12px 8px 8px}.cc-banned-members__tail-view{position:relative}.cc-banned-members__menus{position:absolute;right:12px;padding:12px;cursor:pointer}.cc-banned-members__unban{display:flex;align-items:center;justify-content:flex-end;width:100px}\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: CometChatBannedMembersComponent, decorators: [{
             type: Component,
-            args: [{ selector: "cometchat-banned-members", changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"cc-banned-members\" [ngStyle]=\"wrapperStyle()\">\n  <div class=\"cc-banned-members__back\">\n    <cometchat-button [iconURL]=\"backButtonIconURL\" [buttonStyle]=\"backButtonStyle()\" *ngIf=\"showBackButton\"   (cc-button-clicked)=\"backClicked()\" >\n\n    </cometchat-button>\n  </div>\n  <div class=\"cc-banned-members__wrapper\" [ngStyle]=\"membersStyles()\">\n    <div class=\"cc-banned-members__menus\" *ngIf=\"menu\">\n      <ng-container *ngTemplateOutlet=\"menu\">\n      </ng-container>\n  </div>\n    <cometchat-list [listItemView]=\"listItemView ? listItemView : listItem\" [onScrolledToBottom]=\"onScrolledToBottom\" [onSearch]=\"onSearch\"\n        [list]=\"bannedMembers\" [searchText]=\"searchKeyword\" [searchPlaceholderText]=\"searchPlaceholder\"\n        [searchIconURL]=\"searchIconURL\" [hideSearch]=\"hideSearch\"  [title]=\"title\"\n\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-bannedMember>\n        <cometchat-list-item [statusIndicatorStyle]=\"statusIndicatorStyle\"\n        [statusIndicatorColor]=\"getStatusIndicatorColor(bannedMember)\" [title]=\"bannedMember?.name\" [avatarURL]=\"bannedMember?.avatar\" [avatarName]=\"bannedMember?.name\"\n            [listItemStyle]=\"listItemStyle\" [avatarStyle]=\"avatarStyle\"\n [hideSeparator]=\"hideSeparator\">\n            <div slot=\"subtitleView\" *ngIf=\"subtitleView\" class=\"cc-banned-members__subtitle-view\">\n                <ng-container *ngTemplateOutlet=\"subtitleView\">\n                </ng-container>\n            </div>\n            <div slot=\"menuView\"  *ngIf=\"options\">\n              <cometchat-menu-list [data]=\"options(bannedMember)\"  [menuListStyle]=\"menuListStyle\"></cometchat-menu-list>\n          </div>\n          <div slot=\"tailView\"  *ngIf=\"selectionMode != selectionmodeEnum.none; else changeScope\" class=\"cc-banned-members__tail-view\">\n            <ng-container *ngTemplateOutlet=\"tailView\">\n            </ng-container>\n        </div>\n        <ng-template  #changeScope>\n         <div  slot=\"tailView\">\n          <div class=\"cc-banned-members__unban\">\n            <cometchat-button [buttonStyle]=\"unbanIconStyle\" [iconURL]=\"unbanIconURL\" (click)=\"unBanMember(bannedMember)\">\n\n            </cometchat-button>\n          </div>\n         </div>\n        </ng-template>\n        </cometchat-list-item>\n        <ng-template #tailView>\n          <div  *ngIf=\"selectionMode == selectionmodeEnum.single\" class=\"cc-banned-members__selection--single\">\n            <cometchat-radio-button (cc-radio-button-changed)=\"onMembersSelected(bannedMember,$event)\"></cometchat-radio-button>\n          </div>\n          <div  *ngIf=\"selectionMode == selectionmodeEnum.multiple\" class=\"cc-banned-members__selection--multiple\">\n            <cometchat-checkbox (cc-checkbox-changed)=\"onMembersSelected(bannedMember,$event)\"></cometchat-checkbox>\n          </div>\n        </ng-template>\n    </ng-template>\n  </div>\n  <div class=\"cc-close-button\">\n    <cometchat-button [iconURL]=\"closeButtonIconURL\" [buttonStyle]=\"closeButtonStyle()\" (cc-button-clicked)=\"closeClicked()\">\n\n    </cometchat-button>\n  </div>\n</div>\n", styles: [".cc-banned-members{display:flex;height:100%;width:100%;overflow:hidden}.cc-banned-members__back{position:absolute;left:8px;padding:12px 8px 8px}.cc-banned-members__wrapper{height:100%;width:100%;padding:8px}.cc-close-button{position:absolute;right:8px;padding:12px 8px 8px}.cc-banned-members__tail-view{position:relative}.cc-banned-members__menus{position:absolute;right:12px;padding:12px;cursor:pointer}.cc-banned-members__unban{display:flex;align-items:center;justify-content:flex-end;width:100px}\n"] }]
+            args: [{ selector: "cometchat-banned-members", changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"cc-banned-members\" [ngStyle]=\"wrapperStyle()\">\n  <div class=\"cc-banned-members__back\">\n    <cometchat-button [iconURL]=\"backButtonIconURL\" [buttonStyle]=\"backButtonStyle()\" *ngIf=\"showBackButton\"   (cc-button-clicked)=\"backClicked()\" >\n\n    </cometchat-button>\n  </div>\n  <div class=\"cc-banned-members__wrapper\" [ngStyle]=\"membersStyles()\">\n    <div class=\"cc-banned-members__menus\" *ngIf=\"menu\">\n      <ng-container *ngTemplateOutlet=\"menu\">\n      </ng-container>\n  </div>\n    <cometchat-list [listItemView]=\"listItemView ? listItemView : listItem\" [onScrolledToBottom]=\"onScrolledToBottom\" [onSearch]=\"onSearch\"\n        [list]=\"bannedMembers\" [searchText]=\"searchKeyword\" [searchPlaceholderText]=\"searchPlaceholder\"\n        [searchIconURL]=\"searchIconURL\" [hideSearch]=\"hideSearch\"  [title]=\"title\"\n\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-bannedMember>\n        <cometchat-list-item [statusIndicatorStyle]=\"statusIndicatorStyle\"\n        [statusIndicatorColor]=\"getStatusIndicatorColor(bannedMember)\" [title]=\"bannedMember?.name\" [avatarURL]=\"bannedMember?.avatar\" [avatarName]=\"bannedMember?.name\"\n            [listItemStyle]=\"listItemStyle\" [avatarStyle]=\"avatarStyle\"\n [hideSeparator]=\"hideSeparator\">\n            <div slot=\"subtitleView\" *ngIf=\"subtitleView\" class=\"cc-banned-members__subtitle-view\">\n                <ng-container *ngTemplateOutlet=\"subtitleView\">\n                </ng-container>\n            </div>\n            <div slot=\"menuView\"  *ngIf=\"options\">\n              <cometchat-menu-list [data]=\"options(bannedMember)\"  [menuListStyle]=\"menuListStyle\"></cometchat-menu-list>\n          </div>\n          <div slot=\"tailView\"  *ngIf=\"selectionMode != selectionmodeEnum.none; else changeScope\" class=\"cc-banned-members__tail-view\">\n            <ng-container *ngTemplateOutlet=\"tailView\">\n            </ng-container>\n        </div>\n        <ng-template  #changeScope>\n         <div  slot=\"tailView\">\n          <div class=\"cc-banned-members__unban\">\n            <cometchat-button [buttonStyle]=\"unbanIconStyle\" [iconURL]=\"unbanIconURL\" (click)=\"unBanMember(bannedMember)\">\n\n            </cometchat-button>\n          </div>\n         </div>\n        </ng-template>\n        </cometchat-list-item>\n        <ng-template #tailView>\n          <div  *ngIf=\"selectionMode == selectionmodeEnum.single\" class=\"cc-banned-members__selection--single\">\n            <cometchat-radio-button (cc-radio-button-changed)=\"onMembersSelected(bannedMember,$event)\"></cometchat-radio-button>\n          </div>\n          <div  *ngIf=\"selectionMode == selectionmodeEnum.multiple\" class=\"cc-banned-members__selection--multiple\">\n            <cometchat-checkbox [checkboxStyle]=\"checkboxStyle\" (cc-checkbox-changed)=\"onMembersSelected(bannedMember,$event)\"></cometchat-checkbox>\n          </div>\n        </ng-template>\n    </ng-template>\n  </div>\n  <div class=\"cc-close-button\">\n    <cometchat-button [iconURL]=\"closeButtonIconURL\" [buttonStyle]=\"closeButtonStyle()\" (cc-button-clicked)=\"closeClicked()\">\n\n    </cometchat-button>\n  </div>\n</div>\n", styles: [".cc-banned-members{display:flex;height:100%;width:100%;overflow:hidden}.cc-banned-members__back{position:absolute;left:8px;padding:12px 8px 8px}.cc-banned-members__wrapper{height:100%;width:100%;padding:8px}.cc-close-button{position:absolute;right:8px;padding:12px 8px 8px}.cc-banned-members__tail-view{position:relative}.cc-banned-members__menus{position:absolute;right:12px;padding:12px;cursor:pointer}.cc-banned-members__unban{display:flex;align-items:center;justify-content:flex-end;width:100px}\n"] }]
         }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }, { type: CometChatThemeService }]; }, propDecorators: { bannedMembersRequestBuilder: [{
                 type: Input
             }], searchRequestBuilder: [{
@@ -6051,6 +6083,14 @@ class CometChatConversationsComponent {
         this.firstReload = false;
         this.isActive = true;
         this.contactsNotFound = false;
+        this.checkboxStyle = {
+            height: "24px",
+            width: "24px",
+            border: "none",
+            borderRadius: "4px",
+            checkedBackgroundColor: "#2196F3",
+            uncheckedBackgroundColor: "#ccc"
+        };
         /**
          * Properties for internal use
          */
@@ -6825,6 +6865,14 @@ class CometChatConversationsComponent {
             threadIndicatorTextColor: this.themeService.theme.palette.getAccent600(),
         });
         this.conversationsStyle = { ...defaultStyle, ...this.conversationsStyle };
+        this.checkboxStyle = {
+            height: "24px",
+            width: "24px",
+            border: "none",
+            borderRadius: "4px",
+            checkedBackgroundColor: this.themeService.theme.palette.getPrimary(),
+            uncheckedBackgroundColor: this.themeService.theme.palette.getAccent400()
+        };
     }
     setDateStyle() {
         let defaultStyle = new DateStyle({
@@ -7530,10 +7578,10 @@ 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", 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 });
+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 [checkboxStyle]=\"checkboxStyle\"\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"] }]
+            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 [checkboxStyle]=\"checkboxStyle\"\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"] }]
         }], ctorParameters: function () { return [{ type: i0.NgZone }, { type: i0.ChangeDetectorRef }, { type: CometChatThemeService }, { type: i2.DomSanitizer }]; }, propDecorators: { subtitleView: [{
                 type: Input
             }], title: [{
@@ -7690,7 +7738,7 @@ class CometChatMessageBubbleComponent {
             border: "1px solid #e8e8e8",
             borderRadius: "8px",
             submenuWidth: "100%",
-            submenuHeight: "100%",
+            submenuHeight: "inherit",
             submenuBorder: "1px solid #e8e8e8",
             submenuBorderRadius: "8px",
             moreIconTint: "grey"
@@ -7794,10 +7842,10 @@ class CometChatMessageBubbleComponent {
     }
 }
 CometChatMessageBubbleComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: CometChatMessageBubbleComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: CometChatThemeService }], target: i0.ɵɵFactoryTarget.Component });
-CometChatMessageBubbleComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: CometChatMessageBubbleComponent, selector: "cometchat-message-bubble", inputs: { messageBubbleStyle: "messageBubbleStyle", alignment: "alignment", options: "options", id: "id", leadingView: "leadingView", headerView: "headerView", replyView: "replyView", contentView: "contentView", threadView: "threadView", footerView: "footerView", bottomView: "bottomView", statusInfoView: "statusInfoView", moreIconURL: "moreIconURL", topMenuSize: "topMenuSize" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"cc-message-bubble__wrapper\" [ngStyle]=\"wrapperStyle()\">\n  <div class=\"cc-message-bubble__container\"\n    (mouseenter)=\"hideShowMenuOption($event)\"\n    (mouseleave)=\"hideShowMenuOption($event)\">\n    <div class=\"cc-message-bubble__avatar\" *ngIf=\"leadingView\">\n      <ng-container *ngTemplateOutlet=\"leadingView\">\n      </ng-container>\n    </div>\n    <div class=\"cc-message-bubble\" [ngStyle]=\"bubbleAlignmentStyle()\">\n      <div class=\"cc-message-bubble__title\" [ngStyle]=\"titleStyle()\"\n        *ngIf=\"headerView\">\n        <ng-container [ngTemplateOutlet]=\"headerView\">\n        </ng-container>\n      </div>\n      <div class=\"cc-messageoptions\"\n        *ngIf=\"options && options.length >= 1 && isHovering\"\n        [ngStyle]=\"optionsStyles()\">\n        <cometchat-menu-list [moreIconURL]=\"moreIconURL\"\n          [topMenuSize]=\"topMenuSize\" [menuListStyle]=\"optionsStyle\"\n          [data]=\"options\" (cc-menu-clicked)=\"onOptionClick($event)\">\n        </cometchat-menu-list>\n      </div>\n      <div class=\"cc-message-bubble__content\" [ngStyle]=\"bubbleStyle()\">\n        <ng-container *ngTemplateOutlet=\"replyView\">\n        </ng-container>\n        <ng-container *ngTemplateOutlet=\"contentView\">\n        </ng-container>\n\n        <ng-container *ngTemplateOutlet=\"statusInfoView\">\n        </ng-container>\n\n        <ng-container *ngTemplateOutlet=\"bottomView\">\n        </ng-container>\n\n        <div>\n        </div>\n      </div>\n      <ng-container *ngTemplateOutlet=\"footerView\">\n      </ng-container>\n      <ng-container *ngTemplateOutlet=\"threadView\">\n      </ng-container>\n\n    </div>\n  </div>\n</div>\n", styles: ["*{box-sizing:border-box}.cc-message-bubble__wrapper{position:relative}.cc-message-bubble__container{padding-right:8px;border-radius:inherit;display:flex;height:-moz-fit-content;height:fit-content;width:-moz-fit-content;width:fit-content;max-width:65%}.cc-message-bubble{flex:1 1 0;display:flex;flex-direction:column;justify-content:flex-start;align-items:flex-end;min-width:0;padding:8px 2px;border-radius:inherit;height:100%}.cc-message-bubble__avatar{position:relative;border-radius:inherit;display:flex;flex-direction:column;justify-content:flex-start;align-items:flex-end;padding:8px 4px;margin-top:5px}.cc-message-bubble__title:empty:before{display:none}.cc-message-bubble__title:empty:after{display:block;width:100%;height:20px;padding:0 8px}.cc-message-bubble__content{border-radius:8px;width:100%;overflow:hidden}.cc-message-bubble__content .ng-star-inserted{border-radius:inherit}.cc-messageoptions{position:absolute;top:-4px;display:flex;align-items:center;justify-content:flex-end;z-index:1}\n"], 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 });
+CometChatMessageBubbleComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: CometChatMessageBubbleComponent, selector: "cometchat-message-bubble", inputs: { messageBubbleStyle: "messageBubbleStyle", alignment: "alignment", options: "options", id: "id", leadingView: "leadingView", headerView: "headerView", replyView: "replyView", contentView: "contentView", threadView: "threadView", footerView: "footerView", bottomView: "bottomView", statusInfoView: "statusInfoView", moreIconURL: "moreIconURL", topMenuSize: "topMenuSize" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"cc-message-bubble__wrapper\" [ngStyle]=\"wrapperStyle()\">\n  <div class=\"cc-message-bubble__container\"\n    (mouseenter)=\"hideShowMenuOption($event)\"\n    (mouseleave)=\"hideShowMenuOption($event)\">\n    <div class=\"cc-message-bubble__avatar\" *ngIf=\"leadingView\">\n      <ng-container *ngTemplateOutlet=\"leadingView\">\n      </ng-container>\n    </div>\n    <div class=\"cc-message-bubble\" [ngStyle]=\"bubbleAlignmentStyle()\">\n      <div class=\"cc-message-bubble__title\" [ngStyle]=\"titleStyle()\"\n        *ngIf=\"headerView\">\n        <ng-container [ngTemplateOutlet]=\"headerView\">\n        </ng-container>\n      </div>\n      <div class=\"cc-messageoptions\"\n        *ngIf=\"options && options.length >= 1 && isHovering\"\n        [ngStyle]=\"optionsStyles()\">\n        <cometchat-menu-list [parentClassName]=\"'cc-message-list__wrapper'\" [moreIconURL]=\"moreIconURL\"\n          [topMenuSize]=\"topMenuSize\" [menuListStyle]=\"optionsStyle\"\n          [data]=\"options\" (cc-menu-clicked)=\"onOptionClick($event)\">\n        </cometchat-menu-list>\n      </div>\n      <div class=\"cc-message-bubble__content\" [ngStyle]=\"bubbleStyle()\">\n        <ng-container *ngTemplateOutlet=\"replyView\">\n        </ng-container>\n        <ng-container *ngTemplateOutlet=\"contentView\">\n        </ng-container>\n\n        <ng-container *ngTemplateOutlet=\"statusInfoView\">\n        </ng-container>\n\n        <ng-container *ngTemplateOutlet=\"bottomView\">\n        </ng-container>\n\n        <div>\n        </div>\n      </div>\n      <ng-container *ngTemplateOutlet=\"footerView\">\n      </ng-container>\n      <ng-container *ngTemplateOutlet=\"threadView\">\n      </ng-container>\n\n    </div>\n  </div>\n</div>\n", styles: ["*{box-sizing:border-box}.cc-message-bubble__wrapper{position:relative}.cc-message-bubble__container{padding-right:8px;border-radius:inherit;display:flex;height:-moz-fit-content;height:fit-content;width:-moz-fit-content;width:fit-content;max-width:65%}.cc-message-bubble{flex:1 1 0;display:flex;flex-direction:column;justify-content:flex-start;align-items:flex-end;min-width:0;padding:8px 2px;border-radius:inherit;height:100%}.cc-message-bubble__avatar{position:relative;border-radius:inherit;display:flex;flex-direction:column;justify-content:flex-start;align-items:flex-end;padding:8px 4px;margin-top:5px}.cc-message-bubble__title:empty:before{display:none}.cc-message-bubble__title:empty:after{display:block;width:100%;height:20px;padding:0 8px}.cc-message-bubble__content{border-radius:8px;width:100%;overflow:hidden}.cc-message-bubble__content .ng-star-inserted{border-radius:inherit}.cc-messageoptions{position:absolute;top:-4px;display:flex;align-items:center;justify-content:flex-end;z-index:1}\n"], 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: CometChatMessageBubbleComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'cometchat-message-bubble', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"cc-message-bubble__wrapper\" [ngStyle]=\"wrapperStyle()\">\n  <div class=\"cc-message-bubble__container\"\n    (mouseenter)=\"hideShowMenuOption($event)\"\n    (mouseleave)=\"hideShowMenuOption($event)\">\n    <div class=\"cc-message-bubble__avatar\" *ngIf=\"leadingView\">\n      <ng-container *ngTemplateOutlet=\"leadingView\">\n      </ng-container>\n    </div>\n    <div class=\"cc-message-bubble\" [ngStyle]=\"bubbleAlignmentStyle()\">\n      <div class=\"cc-message-bubble__title\" [ngStyle]=\"titleStyle()\"\n        *ngIf=\"headerView\">\n        <ng-container [ngTemplateOutlet]=\"headerView\">\n        </ng-container>\n      </div>\n      <div class=\"cc-messageoptions\"\n        *ngIf=\"options && options.length >= 1 && isHovering\"\n        [ngStyle]=\"optionsStyles()\">\n        <cometchat-menu-list [moreIconURL]=\"moreIconURL\"\n          [topMenuSize]=\"topMenuSize\" [menuListStyle]=\"optionsStyle\"\n          [data]=\"options\" (cc-menu-clicked)=\"onOptionClick($event)\">\n        </cometchat-menu-list>\n      </div>\n      <div class=\"cc-message-bubble__content\" [ngStyle]=\"bubbleStyle()\">\n        <ng-container *ngTemplateOutlet=\"replyView\">\n        </ng-container>\n        <ng-container *ngTemplateOutlet=\"contentView\">\n        </ng-container>\n\n        <ng-container *ngTemplateOutlet=\"statusInfoView\">\n        </ng-container>\n\n        <ng-container *ngTemplateOutlet=\"bottomView\">\n        </ng-container>\n\n        <div>\n        </div>\n      </div>\n      <ng-container *ngTemplateOutlet=\"footerView\">\n      </ng-container>\n      <ng-container *ngTemplateOutlet=\"threadView\">\n      </ng-container>\n\n    </div>\n  </div>\n</div>\n", styles: ["*{box-sizing:border-box}.cc-message-bubble__wrapper{position:relative}.cc-message-bubble__container{padding-right:8px;border-radius:inherit;display:flex;height:-moz-fit-content;height:fit-content;width:-moz-fit-content;width:fit-content;max-width:65%}.cc-message-bubble{flex:1 1 0;display:flex;flex-direction:column;justify-content:flex-start;align-items:flex-end;min-width:0;padding:8px 2px;border-radius:inherit;height:100%}.cc-message-bubble__avatar{position:relative;border-radius:inherit;display:flex;flex-direction:column;justify-content:flex-start;align-items:flex-end;padding:8px 4px;margin-top:5px}.cc-message-bubble__title:empty:before{display:none}.cc-message-bubble__title:empty:after{display:block;width:100%;height:20px;padding:0 8px}.cc-message-bubble__content{border-radius:8px;width:100%;overflow:hidden}.cc-message-bubble__content .ng-star-inserted{border-radius:inherit}.cc-messageoptions{position:absolute;top:-4px;display:flex;align-items:center;justify-content:flex-end;z-index:1}\n"] }]
+            args: [{ selector: 'cometchat-message-bubble', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"cc-message-bubble__wrapper\" [ngStyle]=\"wrapperStyle()\">\n  <div class=\"cc-message-bubble__container\"\n    (mouseenter)=\"hideShowMenuOption($event)\"\n    (mouseleave)=\"hideShowMenuOption($event)\">\n    <div class=\"cc-message-bubble__avatar\" *ngIf=\"leadingView\">\n      <ng-container *ngTemplateOutlet=\"leadingView\">\n      </ng-container>\n    </div>\n    <div class=\"cc-message-bubble\" [ngStyle]=\"bubbleAlignmentStyle()\">\n      <div class=\"cc-message-bubble__title\" [ngStyle]=\"titleStyle()\"\n        *ngIf=\"headerView\">\n        <ng-container [ngTemplateOutlet]=\"headerView\">\n        </ng-container>\n      </div>\n      <div class=\"cc-messageoptions\"\n        *ngIf=\"options && options.length >= 1 && isHovering\"\n        [ngStyle]=\"optionsStyles()\">\n        <cometchat-menu-list [parentClassName]=\"'cc-message-list__wrapper'\" [moreIconURL]=\"moreIconURL\"\n          [topMenuSize]=\"topMenuSize\" [menuListStyle]=\"optionsStyle\"\n          [data]=\"options\" (cc-menu-clicked)=\"onOptionClick($event)\">\n        </cometchat-menu-list>\n      </div>\n      <div class=\"cc-message-bubble__content\" [ngStyle]=\"bubbleStyle()\">\n        <ng-container *ngTemplateOutlet=\"replyView\">\n        </ng-container>\n        <ng-container *ngTemplateOutlet=\"contentView\">\n        </ng-container>\n\n        <ng-container *ngTemplateOutlet=\"statusInfoView\">\n        </ng-container>\n\n        <ng-container *ngTemplateOutlet=\"bottomView\">\n        </ng-container>\n\n        <div>\n        </div>\n      </div>\n      <ng-container *ngTemplateOutlet=\"footerView\">\n      </ng-container>\n      <ng-container *ngTemplateOutlet=\"threadView\">\n      </ng-container>\n\n    </div>\n  </div>\n</div>\n", styles: ["*{box-sizing:border-box}.cc-message-bubble__wrapper{position:relative}.cc-message-bubble__container{padding-right:8px;border-radius:inherit;display:flex;height:-moz-fit-content;height:fit-content;width:-moz-fit-content;width:fit-content;max-width:65%}.cc-message-bubble{flex:1 1 0;display:flex;flex-direction:column;justify-content:flex-start;align-items:flex-end;min-width:0;padding:8px 2px;border-radius:inherit;height:100%}.cc-message-bubble__avatar{position:relative;border-radius:inherit;display:flex;flex-direction:column;justify-content:flex-start;align-items:flex-end;padding:8px 4px;margin-top:5px}.cc-message-bubble__title:empty:before{display:none}.cc-message-bubble__title:empty:after{display:block;width:100%;height:20px;padding:0 8px}.cc-message-bubble__content{border-radius:8px;width:100%;overflow:hidden}.cc-message-bubble__content .ng-star-inserted{border-radius:inherit}.cc-messageoptions{position:absolute;top:-4px;display:flex;align-items:center;justify-content:flex-end;z-index:1}\n"] }]
         }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }, { type: CometChatThemeService }]; }, propDecorators: { messageBubbleStyle: [{
                 type: Input
             }], alignment: [{
@@ -11097,7 +11145,7 @@ class CometChatMessageListComponent {
                 var injectedObject = metadata?.[ThumbnailGenerationConstants.injected];
                 var extensionsObject = injectedObject?.extensions;
                 var thumbnailGenerationObject = extensionsObject[ThumbnailGenerationConstants.thumbnail_generation];
-                var imageToDownload = thumbnailGenerationObject?.url_small;
+                var imageToDownload = thumbnailGenerationObject?.url_medium;
                 if (imageToDownload) {
                     imageURL = imageToDownload;
                 }
@@ -12815,6 +12863,14 @@ class CometChatGroupMembersComponent {
         this.changeScope = false;
         this.fetchingGroups = false;
         this.previousSearchKeyword = "";
+        this.checkboxStyle = {
+            height: "24px",
+            width: "24px",
+            border: "none",
+            borderRadius: "4px",
+            checkedBackgroundColor: "#2196F3",
+            uncheckedBackgroundColor: "#ccc"
+        };
         this.memberScope = [];
         this.membersList = [];
         this.onClick = (groupMember) => {
@@ -13321,6 +13377,14 @@ class CometChatGroupMembersComponent {
             searchTextFont: this.groupMembersStyle.searchTextFont,
             searchTextColor: this.groupMembersStyle.searchTextColor,
         };
+        this.checkboxStyle = {
+            height: "24px",
+            width: "24px",
+            border: "none",
+            borderRadius: "4px",
+            checkedBackgroundColor: this.themeService.theme.palette.getPrimary(),
+            uncheckedBackgroundColor: this.themeService.theme.palette.getAccent400()
+        };
     }
     setListItemStyle() {
         let defaultStyle = new ListItemStyle({
@@ -13393,10 +13457,10 @@ class CometChatGroupMembersComponent {
     }
 }
 CometChatGroupMembersComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: CometChatGroupMembersComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: CometChatThemeService }], target: i0.ɵɵFactoryTarget.Component });
-CometChatGroupMembersComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: CometChatGroupMembersComponent, selector: "cometchat-group-members", inputs: { groupMemberRequestBuilder: "groupMemberRequestBuilder", searchRequestBuilder: "searchRequestBuilder", subtitleView: "subtitleView", listItemView: "listItemView", tailView: "tailView", disableUsersPresence: "disableUsersPresence", menu: "menu", options: "options", backButtonIconURL: "backButtonIconURL", closeButtonIconURL: "closeButtonIconURL", showBackButton: "showBackButton", hideSeparator: "hideSeparator", selectionMode: "selectionMode", searchPlaceholder: "searchPlaceholder", searchIconURL: "searchIconURL", hideSearch: "hideSearch", title: "title", onError: "onError", backdropStyle: "backdropStyle", onBack: "onBack", onClose: "onClose", onSelect: "onSelect", group: "group", emptyStateView: "emptyStateView", errorStateView: "errorStateView", loadingIconURL: "loadingIconURL", loadingStateView: "loadingStateView", emptyStateText: "emptyStateText", errorStateText: "errorStateText", titleAlignment: "titleAlignment", dropdownIconURL: "dropdownIconURL", statusIndicatorStyle: "statusIndicatorStyle", avatarStyle: "avatarStyle", groupMembersStyle: "groupMembersStyle", groupScopeStyle: "groupScopeStyle", listItemStyle: "listItemStyle", onItemClick: "onItemClick", onEmpty: "onEmpty", userPresencePlacement: "userPresencePlacement", disableLoadingState: "disableLoadingState", searchKeyword: "searchKeyword" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"cc-group-members\" [ngStyle]=\"wrapperStyle()\">\n  <div class=\"cc-group-members__back\">\n    <cometchat-button [iconURL]=\"backButtonIconURL\" [buttonStyle]=\"backButtonStyle()\" *ngIf=\"showBackButton\"\n      (cc-button-clicked)=\"backClicked()\">\n\n    </cometchat-button>\n  </div>\n  <div class=\"cc-group-members__wrapper\" [ngStyle]=\"membersStyle()\">\n    <div class=\"cc-group-members__menus\">\n      <ng-container *ngTemplateOutlet=\"menu\">\n      </ng-container>\n    </div>\n    <cometchat-list [listItemView]=\"listItemView ? listItemView : listItem\" [onScrolledToBottom]=\"onScrolledToBottom\"\n      [onSearch]=\"onSearch\" [list]=\"groupMembers\" [searchText]=\"searchKeyword\"\n      [searchPlaceholderText]=\"searchPlaceholder\" [searchIconURL]=\"searchIconURL\" [hideSearch]=\"hideSearch\"\n      [title]=\"title\" [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-groupMember>\n      <cometchat-list-item [title]=\"groupMember?.name\" [avatarURL]=\"groupMember?.avatar\"\n        [avatarName]=\"groupMember?.name\" [listItemStyle]=\"listItemStyle\" [avatarStyle]=\"avatarStyle\"\n        [statusIndicatorStyle]=\"getStatusIndicatorStyle(groupMember)\" [statusIndicatorColor]=\"getStatusIndicatorColor(groupMember)\"\n        [hideSeparator]=\"hideSeparator\" (cc-listitem-clicked)=\"onClick(groupMember)\"\n        [userPresencePlacement]=\"userPresencePlacement\">\n        <div slot=\"subtitleView\" *ngIf=\"subtitleView\" class=\"cc-group-members__subtitle-view\">\n          <ng-container *ngTemplateOutlet=\"subtitleView\">\n          </ng-container>\n        </div>\n        <div slot=\"menuView\" class=\"cc-group-members__options\" *ngIf=\" !tailView && options\">\n          <cometchat-menu-list [data]=\"options(groupMember)\" [menuListStyle]=\"menuListStyle\"\n            (cc-menu-clicked)=\"handleMenuAction($event, groupMember)\"></cometchat-menu-list>\n        </div>\n        <div slot=\"tailView\" class=\"cc-group-members__tail-view\">\n\n          <div *ngIf=\"tailView\">\n            <ng-container *ngTemplateOutlet=\"tailView;context:{ $implicit: groupMember }\">\n            </ng-container>\n\n          </div>\n          <div *ngIf=\"selectionMode != selectionmodeEnum.none\">\n            <div *ngIf=\"selectionMode == selectionmodeEnum.single\" class=\"cc-group-members__selection--single\">\n              <cometchat-radio-button (cc-radio-button-changed)=\"onMemberSelected(groupMember,$event)\">\n              </cometchat-radio-button>\n            </div>\n            <div *ngIf=\"selectionMode == selectionmodeEnum.multiple\" class=\"cc-group-members__selection--multiple\">\n              <cometchat-checkbox (cc-checkbox-changed)=\"onMemberSelected(groupMember,$event)\"></cometchat-checkbox>\n            </div>\n          </div>\n          <div *ngIf=\"!tailView\">\n            <div class=\"cc-group-members__scopechange\" slot=\"tailView\">\n\n              <cometchat-menu-list [moreIconURL]=\"moreIconURL\" *ngIf=\"isArray(getOptions(groupMember))\"\n                [topMenuSize]=\"0\" [data]=\"getOptions(groupMember)\"\n                (cc-menu-clicked)=\"handleMenuAction($event, groupMember)\" [menuListStyle]=\"menuListStyle\">\n              </cometchat-menu-list>\n              <cometchat-label *ngIf=\" isString(getOptions(groupMember))\" [text]=\"getOptions(groupMember)\"\n                [labelStyle]=\"getScopeStyle()\">\n\n              </cometchat-label>\n\n            </div>\n          </div>\n        </div>\n      </cometchat-list-item>\n\n    </ng-template>\n  </div>\n  <div class=\"cc-group-members__close\" *ngIf=\"closeButtonIconURL\">\n    <cometchat-button [iconURL]=\"closeButtonIconURL\" [buttonStyle]=\"closeButtonStyle()\"\n      (cc-button-clicked)=\"closeClicked()\">\n\n    </cometchat-button>\n  </div>\n</div>\n<cometchat-backdrop *ngIf=\"changeScope && memberScope.length > 0\" [backdropStyle]=\"backdropStyle\">\n  <cometchat-change-scope [changeScopeStyle]=\"groupScopeStyle\" [options]=\"memberScope\" [arrowIconURL]=\"dropdownIconURL\"\n    (cc-changescope-close-clicked)=\"changeScope = false;\" (cc-changescope-changed)=\"changeMemberScope($event)\">\n\n  </cometchat-change-scope>\n</cometchat-backdrop>", styles: [".cc-group-members{display:flex;height:100%;width:100%;overflow:hidden;box-sizing:border-box}.cc-group-members__back{position:absolute;left:8px;padding:12px 8px 8px}.cc-group-members__wrapper{height:100%;padding:8px;width:100%}.cc-group-members__close{position:absolute;right:8px;padding:8px}.cc-group-members__tail-view{position:relative;display:flex;gap:8px;justify-content:flex-end;align-items:center}.cc-group-members__menus{position:absolute;right:12px;padding:12px;cursor:pointer}.scope__changed{height:100%;width:-moz-fit-content;width:fit-content;position:absolute;right: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 });
+CometChatGroupMembersComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: CometChatGroupMembersComponent, selector: "cometchat-group-members", inputs: { groupMemberRequestBuilder: "groupMemberRequestBuilder", searchRequestBuilder: "searchRequestBuilder", subtitleView: "subtitleView", listItemView: "listItemView", tailView: "tailView", disableUsersPresence: "disableUsersPresence", menu: "menu", options: "options", backButtonIconURL: "backButtonIconURL", closeButtonIconURL: "closeButtonIconURL", showBackButton: "showBackButton", hideSeparator: "hideSeparator", selectionMode: "selectionMode", searchPlaceholder: "searchPlaceholder", searchIconURL: "searchIconURL", hideSearch: "hideSearch", title: "title", onError: "onError", backdropStyle: "backdropStyle", onBack: "onBack", onClose: "onClose", onSelect: "onSelect", group: "group", emptyStateView: "emptyStateView", errorStateView: "errorStateView", loadingIconURL: "loadingIconURL", loadingStateView: "loadingStateView", emptyStateText: "emptyStateText", errorStateText: "errorStateText", titleAlignment: "titleAlignment", dropdownIconURL: "dropdownIconURL", statusIndicatorStyle: "statusIndicatorStyle", avatarStyle: "avatarStyle", groupMembersStyle: "groupMembersStyle", groupScopeStyle: "groupScopeStyle", listItemStyle: "listItemStyle", onItemClick: "onItemClick", onEmpty: "onEmpty", userPresencePlacement: "userPresencePlacement", disableLoadingState: "disableLoadingState", searchKeyword: "searchKeyword" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"cc-group-members\" [ngStyle]=\"wrapperStyle()\">\n  <div class=\"cc-group-members__back\">\n    <cometchat-button [iconURL]=\"backButtonIconURL\" [buttonStyle]=\"backButtonStyle()\" *ngIf=\"showBackButton\"\n      (cc-button-clicked)=\"backClicked()\">\n\n    </cometchat-button>\n  </div>\n  <div class=\"cc-group-members__wrapper\" [ngStyle]=\"membersStyle()\">\n    <div class=\"cc-group-members__menus\">\n      <ng-container *ngTemplateOutlet=\"menu\">\n      </ng-container>\n    </div>\n    <cometchat-list [listItemView]=\"listItemView ? listItemView : listItem\" [onScrolledToBottom]=\"onScrolledToBottom\"\n      [onSearch]=\"onSearch\" [list]=\"groupMembers\" [searchText]=\"searchKeyword\"\n      [searchPlaceholderText]=\"searchPlaceholder\" [searchIconURL]=\"searchIconURL\" [hideSearch]=\"hideSearch\"\n      [title]=\"title\" [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-groupMember>\n      <cometchat-list-item [title]=\"groupMember?.name\" [avatarURL]=\"groupMember?.avatar\"\n        [avatarName]=\"groupMember?.name\" [listItemStyle]=\"listItemStyle\" [avatarStyle]=\"avatarStyle\"\n        [statusIndicatorStyle]=\"getStatusIndicatorStyle(groupMember)\" [statusIndicatorColor]=\"getStatusIndicatorColor(groupMember)\"\n        [hideSeparator]=\"hideSeparator\" (cc-listitem-clicked)=\"onClick(groupMember)\"\n        [userPresencePlacement]=\"userPresencePlacement\">\n        <div slot=\"subtitleView\" *ngIf=\"subtitleView\" class=\"cc-group-members__subtitle-view\">\n          <ng-container *ngTemplateOutlet=\"subtitleView\">\n          </ng-container>\n        </div>\n        <div slot=\"menuView\" class=\"cc-group-members__options\" *ngIf=\" !tailView && options\">\n          <cometchat-menu-list [data]=\"options(groupMember)\" [menuListStyle]=\"menuListStyle\"\n            (cc-menu-clicked)=\"handleMenuAction($event, groupMember)\"></cometchat-menu-list>\n        </div>\n        <div slot=\"tailView\" class=\"cc-group-members__tail-view\">\n\n          <div *ngIf=\"tailView\">\n            <ng-container *ngTemplateOutlet=\"tailView;context:{ $implicit: groupMember }\">\n            </ng-container>\n\n          </div>\n          <div *ngIf=\"selectionMode != selectionmodeEnum.none\">\n            <div *ngIf=\"selectionMode == selectionmodeEnum.single\" class=\"cc-group-members__selection--single\">\n              <cometchat-radio-button (cc-radio-button-changed)=\"onMemberSelected(groupMember,$event)\">\n              </cometchat-radio-button>\n            </div>\n            <div *ngIf=\"selectionMode == selectionmodeEnum.multiple\" class=\"cc-group-members__selection--multiple\">\n              <cometchat-checkbox [checkboxStyle]=\"checkboxStyle\" (cc-checkbox-changed)=\"onMemberSelected(groupMember,$event)\"></cometchat-checkbox>\n            </div>\n          </div>\n          <div *ngIf=\"!tailView\">\n            <div class=\"cc-group-members__scopechange\" slot=\"tailView\">\n\n              <cometchat-menu-list [moreIconURL]=\"moreIconURL\" *ngIf=\"isArray(getOptions(groupMember))\"\n                [topMenuSize]=\"0\" [data]=\"getOptions(groupMember)\"\n                (cc-menu-clicked)=\"handleMenuAction($event, groupMember)\" [menuListStyle]=\"menuListStyle\">\n              </cometchat-menu-list>\n              <cometchat-label *ngIf=\" isString(getOptions(groupMember))\" [text]=\"getOptions(groupMember)\"\n                [labelStyle]=\"getScopeStyle()\">\n\n              </cometchat-label>\n\n            </div>\n          </div>\n        </div>\n      </cometchat-list-item>\n\n    </ng-template>\n  </div>\n  <div class=\"cc-group-members__close\" *ngIf=\"closeButtonIconURL\">\n    <cometchat-button [iconURL]=\"closeButtonIconURL\" [buttonStyle]=\"closeButtonStyle()\"\n      (cc-button-clicked)=\"closeClicked()\">\n\n    </cometchat-button>\n  </div>\n</div>\n<cometchat-backdrop *ngIf=\"changeScope && memberScope.length > 0\" [backdropStyle]=\"backdropStyle\">\n  <cometchat-change-scope [changeScopeStyle]=\"groupScopeStyle\" [options]=\"memberScope\" [arrowIconURL]=\"dropdownIconURL\"\n    (cc-changescope-close-clicked)=\"changeScope = false;\" (cc-changescope-changed)=\"changeMemberScope($event)\">\n\n  </cometchat-change-scope>\n</cometchat-backdrop>", styles: [".cc-group-members{display:flex;height:100%;width:100%;overflow:hidden;box-sizing:border-box}.cc-group-members__back{position:absolute;left:8px;padding:12px 8px 8px}.cc-group-members__wrapper{height:100%;padding:8px;width:100%}.cc-group-members__close{position:absolute;right:8px;padding:8px}.cc-group-members__tail-view{position:relative;display:flex;gap:8px;justify-content:flex-end;align-items:center}.cc-group-members__menus{position:absolute;right:12px;padding:12px;cursor:pointer}.scope__changed{height:100%;width:-moz-fit-content;width:fit-content;position:absolute;right: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: CometChatGroupMembersComponent, decorators: [{
             type: Component,
-            args: [{ selector: "cometchat-group-members", changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"cc-group-members\" [ngStyle]=\"wrapperStyle()\">\n  <div class=\"cc-group-members__back\">\n    <cometchat-button [iconURL]=\"backButtonIconURL\" [buttonStyle]=\"backButtonStyle()\" *ngIf=\"showBackButton\"\n      (cc-button-clicked)=\"backClicked()\">\n\n    </cometchat-button>\n  </div>\n  <div class=\"cc-group-members__wrapper\" [ngStyle]=\"membersStyle()\">\n    <div class=\"cc-group-members__menus\">\n      <ng-container *ngTemplateOutlet=\"menu\">\n      </ng-container>\n    </div>\n    <cometchat-list [listItemView]=\"listItemView ? listItemView : listItem\" [onScrolledToBottom]=\"onScrolledToBottom\"\n      [onSearch]=\"onSearch\" [list]=\"groupMembers\" [searchText]=\"searchKeyword\"\n      [searchPlaceholderText]=\"searchPlaceholder\" [searchIconURL]=\"searchIconURL\" [hideSearch]=\"hideSearch\"\n      [title]=\"title\" [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-groupMember>\n      <cometchat-list-item [title]=\"groupMember?.name\" [avatarURL]=\"groupMember?.avatar\"\n        [avatarName]=\"groupMember?.name\" [listItemStyle]=\"listItemStyle\" [avatarStyle]=\"avatarStyle\"\n        [statusIndicatorStyle]=\"getStatusIndicatorStyle(groupMember)\" [statusIndicatorColor]=\"getStatusIndicatorColor(groupMember)\"\n        [hideSeparator]=\"hideSeparator\" (cc-listitem-clicked)=\"onClick(groupMember)\"\n        [userPresencePlacement]=\"userPresencePlacement\">\n        <div slot=\"subtitleView\" *ngIf=\"subtitleView\" class=\"cc-group-members__subtitle-view\">\n          <ng-container *ngTemplateOutlet=\"subtitleView\">\n          </ng-container>\n        </div>\n        <div slot=\"menuView\" class=\"cc-group-members__options\" *ngIf=\" !tailView && options\">\n          <cometchat-menu-list [data]=\"options(groupMember)\" [menuListStyle]=\"menuListStyle\"\n            (cc-menu-clicked)=\"handleMenuAction($event, groupMember)\"></cometchat-menu-list>\n        </div>\n        <div slot=\"tailView\" class=\"cc-group-members__tail-view\">\n\n          <div *ngIf=\"tailView\">\n            <ng-container *ngTemplateOutlet=\"tailView;context:{ $implicit: groupMember }\">\n            </ng-container>\n\n          </div>\n          <div *ngIf=\"selectionMode != selectionmodeEnum.none\">\n            <div *ngIf=\"selectionMode == selectionmodeEnum.single\" class=\"cc-group-members__selection--single\">\n              <cometchat-radio-button (cc-radio-button-changed)=\"onMemberSelected(groupMember,$event)\">\n              </cometchat-radio-button>\n            </div>\n            <div *ngIf=\"selectionMode == selectionmodeEnum.multiple\" class=\"cc-group-members__selection--multiple\">\n              <cometchat-checkbox (cc-checkbox-changed)=\"onMemberSelected(groupMember,$event)\"></cometchat-checkbox>\n            </div>\n          </div>\n          <div *ngIf=\"!tailView\">\n            <div class=\"cc-group-members__scopechange\" slot=\"tailView\">\n\n              <cometchat-menu-list [moreIconURL]=\"moreIconURL\" *ngIf=\"isArray(getOptions(groupMember))\"\n                [topMenuSize]=\"0\" [data]=\"getOptions(groupMember)\"\n                (cc-menu-clicked)=\"handleMenuAction($event, groupMember)\" [menuListStyle]=\"menuListStyle\">\n              </cometchat-menu-list>\n              <cometchat-label *ngIf=\" isString(getOptions(groupMember))\" [text]=\"getOptions(groupMember)\"\n                [labelStyle]=\"getScopeStyle()\">\n\n              </cometchat-label>\n\n            </div>\n          </div>\n        </div>\n      </cometchat-list-item>\n\n    </ng-template>\n  </div>\n  <div class=\"cc-group-members__close\" *ngIf=\"closeButtonIconURL\">\n    <cometchat-button [iconURL]=\"closeButtonIconURL\" [buttonStyle]=\"closeButtonStyle()\"\n      (cc-button-clicked)=\"closeClicked()\">\n\n    </cometchat-button>\n  </div>\n</div>\n<cometchat-backdrop *ngIf=\"changeScope && memberScope.length > 0\" [backdropStyle]=\"backdropStyle\">\n  <cometchat-change-scope [changeScopeStyle]=\"groupScopeStyle\" [options]=\"memberScope\" [arrowIconURL]=\"dropdownIconURL\"\n    (cc-changescope-close-clicked)=\"changeScope = false;\" (cc-changescope-changed)=\"changeMemberScope($event)\">\n\n  </cometchat-change-scope>\n</cometchat-backdrop>", styles: [".cc-group-members{display:flex;height:100%;width:100%;overflow:hidden;box-sizing:border-box}.cc-group-members__back{position:absolute;left:8px;padding:12px 8px 8px}.cc-group-members__wrapper{height:100%;padding:8px;width:100%}.cc-group-members__close{position:absolute;right:8px;padding:8px}.cc-group-members__tail-view{position:relative;display:flex;gap:8px;justify-content:flex-end;align-items:center}.cc-group-members__menus{position:absolute;right:12px;padding:12px;cursor:pointer}.scope__changed{height:100%;width:-moz-fit-content;width:fit-content;position:absolute;right:8px}\n"] }]
+            args: [{ selector: "cometchat-group-members", changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"cc-group-members\" [ngStyle]=\"wrapperStyle()\">\n  <div class=\"cc-group-members__back\">\n    <cometchat-button [iconURL]=\"backButtonIconURL\" [buttonStyle]=\"backButtonStyle()\" *ngIf=\"showBackButton\"\n      (cc-button-clicked)=\"backClicked()\">\n\n    </cometchat-button>\n  </div>\n  <div class=\"cc-group-members__wrapper\" [ngStyle]=\"membersStyle()\">\n    <div class=\"cc-group-members__menus\">\n      <ng-container *ngTemplateOutlet=\"menu\">\n      </ng-container>\n    </div>\n    <cometchat-list [listItemView]=\"listItemView ? listItemView : listItem\" [onScrolledToBottom]=\"onScrolledToBottom\"\n      [onSearch]=\"onSearch\" [list]=\"groupMembers\" [searchText]=\"searchKeyword\"\n      [searchPlaceholderText]=\"searchPlaceholder\" [searchIconURL]=\"searchIconURL\" [hideSearch]=\"hideSearch\"\n      [title]=\"title\" [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-groupMember>\n      <cometchat-list-item [title]=\"groupMember?.name\" [avatarURL]=\"groupMember?.avatar\"\n        [avatarName]=\"groupMember?.name\" [listItemStyle]=\"listItemStyle\" [avatarStyle]=\"avatarStyle\"\n        [statusIndicatorStyle]=\"getStatusIndicatorStyle(groupMember)\" [statusIndicatorColor]=\"getStatusIndicatorColor(groupMember)\"\n        [hideSeparator]=\"hideSeparator\" (cc-listitem-clicked)=\"onClick(groupMember)\"\n        [userPresencePlacement]=\"userPresencePlacement\">\n        <div slot=\"subtitleView\" *ngIf=\"subtitleView\" class=\"cc-group-members__subtitle-view\">\n          <ng-container *ngTemplateOutlet=\"subtitleView\">\n          </ng-container>\n        </div>\n        <div slot=\"menuView\" class=\"cc-group-members__options\" *ngIf=\" !tailView && options\">\n          <cometchat-menu-list [data]=\"options(groupMember)\" [menuListStyle]=\"menuListStyle\"\n            (cc-menu-clicked)=\"handleMenuAction($event, groupMember)\"></cometchat-menu-list>\n        </div>\n        <div slot=\"tailView\" class=\"cc-group-members__tail-view\">\n\n          <div *ngIf=\"tailView\">\n            <ng-container *ngTemplateOutlet=\"tailView;context:{ $implicit: groupMember }\">\n            </ng-container>\n\n          </div>\n          <div *ngIf=\"selectionMode != selectionmodeEnum.none\">\n            <div *ngIf=\"selectionMode == selectionmodeEnum.single\" class=\"cc-group-members__selection--single\">\n              <cometchat-radio-button (cc-radio-button-changed)=\"onMemberSelected(groupMember,$event)\">\n              </cometchat-radio-button>\n            </div>\n            <div *ngIf=\"selectionMode == selectionmodeEnum.multiple\" class=\"cc-group-members__selection--multiple\">\n              <cometchat-checkbox [checkboxStyle]=\"checkboxStyle\" (cc-checkbox-changed)=\"onMemberSelected(groupMember,$event)\"></cometchat-checkbox>\n            </div>\n          </div>\n          <div *ngIf=\"!tailView\">\n            <div class=\"cc-group-members__scopechange\" slot=\"tailView\">\n\n              <cometchat-menu-list [moreIconURL]=\"moreIconURL\" *ngIf=\"isArray(getOptions(groupMember))\"\n                [topMenuSize]=\"0\" [data]=\"getOptions(groupMember)\"\n                (cc-menu-clicked)=\"handleMenuAction($event, groupMember)\" [menuListStyle]=\"menuListStyle\">\n              </cometchat-menu-list>\n              <cometchat-label *ngIf=\" isString(getOptions(groupMember))\" [text]=\"getOptions(groupMember)\"\n                [labelStyle]=\"getScopeStyle()\">\n\n              </cometchat-label>\n\n            </div>\n          </div>\n        </div>\n      </cometchat-list-item>\n\n    </ng-template>\n  </div>\n  <div class=\"cc-group-members__close\" *ngIf=\"closeButtonIconURL\">\n    <cometchat-button [iconURL]=\"closeButtonIconURL\" [buttonStyle]=\"closeButtonStyle()\"\n      (cc-button-clicked)=\"closeClicked()\">\n\n    </cometchat-button>\n  </div>\n</div>\n<cometchat-backdrop *ngIf=\"changeScope && memberScope.length > 0\" [backdropStyle]=\"backdropStyle\">\n  <cometchat-change-scope [changeScopeStyle]=\"groupScopeStyle\" [options]=\"memberScope\" [arrowIconURL]=\"dropdownIconURL\"\n    (cc-changescope-close-clicked)=\"changeScope = false;\" (cc-changescope-changed)=\"changeMemberScope($event)\">\n\n  </cometchat-change-scope>\n</cometchat-backdrop>", styles: [".cc-group-members{display:flex;height:100%;width:100%;overflow:hidden;box-sizing:border-box}.cc-group-members__back{position:absolute;left:8px;padding:12px 8px 8px}.cc-group-members__wrapper{height:100%;padding:8px;width:100%}.cc-group-members__close{position:absolute;right:8px;padding:8px}.cc-group-members__tail-view{position:relative;display:flex;gap:8px;justify-content:flex-end;align-items:center}.cc-group-members__menus{position:absolute;right:12px;padding:12px;cursor:pointer}.scope__changed{height:100%;width:-moz-fit-content;width:fit-content;position:absolute;right:8px}\n"] }]
         }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }, { type: CometChatThemeService }]; }, propDecorators: { groupMemberRequestBuilder: [{
                 type: Input
             }], searchRequestBuilder: [{
@@ -13644,6 +13708,7 @@ class CometChatMessageComposerComponent {
         this.lastEmptySearchTerm = "";
         this.smartReplyState = States.loading;
         this.showMentionsCountWarning = false;
+        this.initialText = "";
         this.loadingStateText = localize("GENERATING_REPLIES");
         this.errorStateText = localize("SOMETHING_WRONG");
         this.emptyStateText = localize("NO_MESSAGES_FOUND");
@@ -13805,7 +13870,7 @@ class CometChatMessageComposerComponent {
             this.showMentionsCountWarning = false;
             this.showListForMentions = false;
             this.sendTextMessage(event.detail.value);
-            this.inputRef?.nativeElement?.emptyInputField();
+            this.clearComposer();
             this.showSendButton = false;
             this.disableSendButton();
         };
@@ -14422,8 +14487,7 @@ class CometChatMessageComposerComponent {
     }
     openEditPreview() {
         let messageTextWithMentionTags = this.checkForMentions(this.messageToBeEdited);
-        this.text = "";
-        this.inputRef?.nativeElement?.emptyInputField();
+        this.clearComposer();
         this.inputRef.nativeElement.text = "";
         this.text = this.messageToBeEdited.getText();
         this.editPreviewText = messageTextWithMentionTags;
@@ -14494,9 +14558,22 @@ class CometChatMessageComposerComponent {
             child: { showConversationSummaryView: true },
         });
     }
+    clearComposer() {
+        this.text = "";
+        this.messageText = "";
+        this.inputRef?.nativeElement?.emptyInputField();
+    }
     ngOnChanges(changes) {
         if (changes["user"] || changes["group"]) {
             this.userOrGroupChanged(changes);
+            if (this.initialText !== this.text) {
+                this.clearComposer();
+            }
+            this.text = this.initialText || "";
+        }
+        if (changes["text"]?.currentValue) {
+            this.initialText = changes["text"].currentValue;
+            this.text = this.initialText;
         }
     }
     userOrGroupChanged(changes) {
@@ -14614,8 +14691,7 @@ class CometChatMessageComposerComponent {
                 this.playAudio();
             }
             //clearing Message Input Box
-            this.messageText = "";
-            this.inputRef?.nativeElement?.emptyInputField();
+            this.clearComposer();
             this.messageSending = false;
             for (let i = 0; i < this.textFormatterList.length; i++) {
                 textMessage = this.textFormatterList[i].formatMessageForSending(textMessage);
@@ -15291,9 +15367,7 @@ class CometChatMessageComposerComponent {
         this.showPreview = false;
         this.editPreviewText = "";
         this.messageToBeEdited = null;
-        this.text = "";
-        this.messageText = "";
-        this.inputRef?.nativeElement?.emptyInputField();
+        this.clearComposer();
         this.disableSendButton();
         this.ref.detectChanges();
     }
@@ -15742,10 +15816,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      [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      [templates]=\"messageListConfiguration.templates\"\n      [scrollToBottomOnNewMessages]=\"messageListConfiguration.scrollToBottomOnNewMessages\"\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      [messageInformationConfiguration]=\"messageListConfiguration.messageInformationConfiguration\"\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", "customSoundForMessages", "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", "sendButtonIconURL"], 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      [templates]=\"messageListConfiguration.templates\"\n      [scrollToBottomOnNewMessages]=\"messageListConfiguration.scrollToBottomOnNewMessages\"\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      [messageInformationConfiguration]=\"messageListConfiguration.messageInformationConfiguration\"\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:hidden}.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%;max-height:15em;overflow:auto;min-height:60px}.cc-threaded-messages__action-view{height:36px}.cc-threaded-messages__header{flex:0 0 auto}.cc-threaded-messages__list{flex-grow:1;overflow:hidden;height:100%}.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", "customSoundForMessages", "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", "sendButtonIconURL"], 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      [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      [templates]=\"messageListConfiguration.templates\"\n      [scrollToBottomOnNewMessages]=\"messageListConfiguration.scrollToBottomOnNewMessages\"\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      [messageInformationConfiguration]=\"messageListConfiguration.messageInformationConfiguration\"\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      [templates]=\"messageListConfiguration.templates\"\n      [scrollToBottomOnNewMessages]=\"messageListConfiguration.scrollToBottomOnNewMessages\"\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      [messageInformationConfiguration]=\"messageListConfiguration.messageInformationConfiguration\"\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:hidden}.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%;max-height:15em;overflow:auto;min-height:60px}.cc-threaded-messages__action-view{height:36px}.cc-threaded-messages__header{flex:0 0 auto}.cc-threaded-messages__list{flex-grow:1;overflow:hidden;height:100%}.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: [{
@@ -17492,6 +17566,14 @@ class CometChatGroupsComponent {
         this.firstReload = false;
         this.connectionListenerId = "connection_" + new Date().getTime();
         this.onScrolledToBottom = null;
+        this.checkboxStyle = {
+            height: "24px",
+            width: "24px",
+            border: "none",
+            borderRadius: "4px",
+            checkedBackgroundColor: "#2196F3",
+            uncheckedBackgroundColor: "#ccc"
+        };
         /**
          * @param  {CometChat.Group} group
          */
@@ -18009,13 +18091,21 @@ class CometChatGroupsComponent {
             searchTextFont: fontHelper(this.themeService.theme.typography.text3)
         });
         this.groupsStyle = { ...defaultStyle, ...this.groupsStyle };
+        this.checkboxStyle = {
+            height: "24px",
+            width: "24px",
+            border: "none",
+            borderRadius: "4px",
+            checkedBackgroundColor: this.themeService.theme.palette.getPrimary(),
+            uncheckedBackgroundColor: this.themeService.theme.palette.getAccent400()
+        };
     }
 }
 CometChatGroupsComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: CometChatGroupsComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: CometChatThemeService }], target: i0.ɵɵFactoryTarget.Component });
-CometChatGroupsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: CometChatGroupsComponent, selector: "cometchat-groups", inputs: { groupsRequestBuilder: "groupsRequestBuilder", searchRequestBuilder: "searchRequestBuilder", subtitleView: "subtitleView", listItemView: "listItemView", menu: "menu", options: "options", activeGroup: "activeGroup", hideSeparator: "hideSeparator", selectionMode: "selectionMode", searchPlaceholder: "searchPlaceholder", hideError: "hideError", searchIconURL: "searchIconURL", hideSearch: "hideSearch", title: "title", onError: "onError", onSelect: "onSelect", emptyStateView: "emptyStateView", errorStateView: "errorStateView", loadingIconURL: "loadingIconURL", privateGroupIcon: "privateGroupIcon", protectedGroupIcon: "protectedGroupIcon", passwordGroupIcon: "passwordGroupIcon", loadingStateView: "loadingStateView", emptyStateText: "emptyStateText", errorStateText: "errorStateText", titleAlignment: "titleAlignment", statusIndicatorStyle: "statusIndicatorStyle", avatarStyle: "avatarStyle", groupsStyle: "groupsStyle", listItemStyle: "listItemStyle", onItemClick: "onItemClick" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"cc-groups\" [ngStyle]=\"groupStyle()\">\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]=\"groupsList\" [searchText]=\"searchKeyword\" [searchPlaceholderText]=\"searchPlaceholder\"\n      [searchIconURL]=\"searchIconURL\" [hideSearch]=\"hideSearch\" [hideError]=\"hideError\" [title]=\"title\"\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-group>\n      <cometchat-list-item [title]=\"group?.name\" [avatarURL]=\"group?.avatar\" [avatarName]=\"group?.name\"\n          [listItemStyle]=\"listItemStyle\" [avatarStyle]=\"avatarStyle\" [statusIndicatorStyle]=\"statusIndicatorStyle\"\n          [statusIndicatorColor]=\"getStatusIndicatorColor(group)\" [statusIndicatorIcon]=\"getGroupIcon(group)\" [hideSeparator]=\"hideSeparator\" (cc-listitem-clicked)=\"onClick(group)\" [isActive]=\"getActiveGroup(group)\">\n          <div slot=\"subtitleView\" class=\"cc-groups__subtitle-view\" *ngIf=\"subtitleView;else groupSubtitle\">\n              <ng-container *ngTemplateOutlet=\"subtitleView;context:{ $implicit: group }\">\n              </ng-container>\n          </div>\n          <ng-template #groupSubtitle>\n             <div slot=\"subtitleView\" [ngStyle]=\"subtitleStyle()\" class=\"cc-groups__subtitle-view\"> {{getMemberCount(group)}} </div>\n          </ng-template>\n\n          <div slot=\"menuView\" class=\"cc-groups__options\" *ngIf=\"options\">\n            <cometchat-menu-list [data]=\"options(group)\">\n\n            </cometchat-menu-list>\n        </div>\n        <div slot=\"tailView\" *ngIf=\"selectionMode != selectionmodeEnum.none\" class=\"cc-groups__tail-view\">\n          <ng-container *ngTemplateOutlet=\"tailView\">\n          </ng-container>\n      </div>\n      </cometchat-list-item>\n      <ng-template #tailView>\n        <div  *ngIf=\"selectionMode == selectionmodeEnum.single\">\n          <cometchat-radio-button (cc-radio-button-changed)=\"onGroupSelected(group,$event)\"></cometchat-radio-button>\n\n        </div>\n        <div  *ngIf=\"selectionMode == selectionmodeEnum.multiple\">\n          <cometchat-checkbox (cc-checkbox-changed)=\"onGroupSelected(group,$event)\"></cometchat-checkbox>\n\n        </div>\n      </ng-template>\n  </ng-template>\n</div>", styles: [".cc-groups{height:100%;width:100%;box-sizing:border-box}.cc-groups__tail-view{position:relative}.cc-menus{position:absolute;right:12px;top:6px}\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 });
+CometChatGroupsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: CometChatGroupsComponent, selector: "cometchat-groups", inputs: { groupsRequestBuilder: "groupsRequestBuilder", searchRequestBuilder: "searchRequestBuilder", subtitleView: "subtitleView", listItemView: "listItemView", menu: "menu", options: "options", activeGroup: "activeGroup", hideSeparator: "hideSeparator", selectionMode: "selectionMode", searchPlaceholder: "searchPlaceholder", hideError: "hideError", searchIconURL: "searchIconURL", hideSearch: "hideSearch", title: "title", onError: "onError", onSelect: "onSelect", emptyStateView: "emptyStateView", errorStateView: "errorStateView", loadingIconURL: "loadingIconURL", privateGroupIcon: "privateGroupIcon", protectedGroupIcon: "protectedGroupIcon", passwordGroupIcon: "passwordGroupIcon", loadingStateView: "loadingStateView", emptyStateText: "emptyStateText", errorStateText: "errorStateText", titleAlignment: "titleAlignment", statusIndicatorStyle: "statusIndicatorStyle", avatarStyle: "avatarStyle", groupsStyle: "groupsStyle", listItemStyle: "listItemStyle", onItemClick: "onItemClick" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"cc-groups\" [ngStyle]=\"groupStyle()\">\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]=\"groupsList\" [searchText]=\"searchKeyword\" [searchPlaceholderText]=\"searchPlaceholder\"\n      [searchIconURL]=\"searchIconURL\" [hideSearch]=\"hideSearch\" [hideError]=\"hideError\" [title]=\"title\"\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-group>\n      <cometchat-list-item [title]=\"group?.name\" [avatarURL]=\"group?.icon\" [avatarName]=\"group?.name\"\n          [listItemStyle]=\"listItemStyle\" [avatarStyle]=\"avatarStyle\" [statusIndicatorStyle]=\"statusIndicatorStyle\"\n          [statusIndicatorColor]=\"getStatusIndicatorColor(group)\" [statusIndicatorIcon]=\"getGroupIcon(group)\" [hideSeparator]=\"hideSeparator\" (cc-listitem-clicked)=\"onClick(group)\" [isActive]=\"getActiveGroup(group)\">\n          <div slot=\"subtitleView\" class=\"cc-groups__subtitle-view\" *ngIf=\"subtitleView;else groupSubtitle\">\n              <ng-container *ngTemplateOutlet=\"subtitleView;context:{ $implicit: group }\">\n              </ng-container>\n          </div>\n          <ng-template #groupSubtitle>\n             <div slot=\"subtitleView\" [ngStyle]=\"subtitleStyle()\" class=\"cc-groups__subtitle-view\"> {{getMemberCount(group)}} </div>\n          </ng-template>\n\n          <div slot=\"menuView\" class=\"cc-groups__options\" *ngIf=\"options\">\n            <cometchat-menu-list [data]=\"options(group)\">\n\n            </cometchat-menu-list>\n        </div>\n        <div slot=\"tailView\" *ngIf=\"selectionMode != selectionmodeEnum.none\" class=\"cc-groups__tail-view\">\n          <ng-container *ngTemplateOutlet=\"tailView\">\n          </ng-container>\n      </div>\n      </cometchat-list-item>\n      <ng-template #tailView>\n        <div  *ngIf=\"selectionMode == selectionmodeEnum.single\">\n          <cometchat-radio-button (cc-radio-button-changed)=\"onGroupSelected(group,$event)\"></cometchat-radio-button>\n\n        </div>\n        <div  *ngIf=\"selectionMode == selectionmodeEnum.multiple\">\n          <cometchat-checkbox [checkboxStyle]=\"checkboxStyle\" (cc-checkbox-changed)=\"onGroupSelected(group,$event)\"></cometchat-checkbox>\n\n        </div>\n      </ng-template>\n  </ng-template>\n</div>", styles: [".cc-groups{height:100%;width:100%;box-sizing:border-box}.cc-groups__tail-view{position:relative}.cc-menus{position:absolute;right:12px;top:6px}\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: CometChatGroupsComponent, decorators: [{
             type: Component,
-            args: [{ selector: "cometchat-groups", changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"cc-groups\" [ngStyle]=\"groupStyle()\">\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]=\"groupsList\" [searchText]=\"searchKeyword\" [searchPlaceholderText]=\"searchPlaceholder\"\n      [searchIconURL]=\"searchIconURL\" [hideSearch]=\"hideSearch\" [hideError]=\"hideError\" [title]=\"title\"\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-group>\n      <cometchat-list-item [title]=\"group?.name\" [avatarURL]=\"group?.avatar\" [avatarName]=\"group?.name\"\n          [listItemStyle]=\"listItemStyle\" [avatarStyle]=\"avatarStyle\" [statusIndicatorStyle]=\"statusIndicatorStyle\"\n          [statusIndicatorColor]=\"getStatusIndicatorColor(group)\" [statusIndicatorIcon]=\"getGroupIcon(group)\" [hideSeparator]=\"hideSeparator\" (cc-listitem-clicked)=\"onClick(group)\" [isActive]=\"getActiveGroup(group)\">\n          <div slot=\"subtitleView\" class=\"cc-groups__subtitle-view\" *ngIf=\"subtitleView;else groupSubtitle\">\n              <ng-container *ngTemplateOutlet=\"subtitleView;context:{ $implicit: group }\">\n              </ng-container>\n          </div>\n          <ng-template #groupSubtitle>\n             <div slot=\"subtitleView\" [ngStyle]=\"subtitleStyle()\" class=\"cc-groups__subtitle-view\"> {{getMemberCount(group)}} </div>\n          </ng-template>\n\n          <div slot=\"menuView\" class=\"cc-groups__options\" *ngIf=\"options\">\n            <cometchat-menu-list [data]=\"options(group)\">\n\n            </cometchat-menu-list>\n        </div>\n        <div slot=\"tailView\" *ngIf=\"selectionMode != selectionmodeEnum.none\" class=\"cc-groups__tail-view\">\n          <ng-container *ngTemplateOutlet=\"tailView\">\n          </ng-container>\n      </div>\n      </cometchat-list-item>\n      <ng-template #tailView>\n        <div  *ngIf=\"selectionMode == selectionmodeEnum.single\">\n          <cometchat-radio-button (cc-radio-button-changed)=\"onGroupSelected(group,$event)\"></cometchat-radio-button>\n\n        </div>\n        <div  *ngIf=\"selectionMode == selectionmodeEnum.multiple\">\n          <cometchat-checkbox (cc-checkbox-changed)=\"onGroupSelected(group,$event)\"></cometchat-checkbox>\n\n        </div>\n      </ng-template>\n  </ng-template>\n</div>", styles: [".cc-groups{height:100%;width:100%;box-sizing:border-box}.cc-groups__tail-view{position:relative}.cc-menus{position:absolute;right:12px;top:6px}\n"] }]
+            args: [{ selector: "cometchat-groups", changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"cc-groups\" [ngStyle]=\"groupStyle()\">\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]=\"groupsList\" [searchText]=\"searchKeyword\" [searchPlaceholderText]=\"searchPlaceholder\"\n      [searchIconURL]=\"searchIconURL\" [hideSearch]=\"hideSearch\" [hideError]=\"hideError\" [title]=\"title\"\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-group>\n      <cometchat-list-item [title]=\"group?.name\" [avatarURL]=\"group?.icon\" [avatarName]=\"group?.name\"\n          [listItemStyle]=\"listItemStyle\" [avatarStyle]=\"avatarStyle\" [statusIndicatorStyle]=\"statusIndicatorStyle\"\n          [statusIndicatorColor]=\"getStatusIndicatorColor(group)\" [statusIndicatorIcon]=\"getGroupIcon(group)\" [hideSeparator]=\"hideSeparator\" (cc-listitem-clicked)=\"onClick(group)\" [isActive]=\"getActiveGroup(group)\">\n          <div slot=\"subtitleView\" class=\"cc-groups__subtitle-view\" *ngIf=\"subtitleView;else groupSubtitle\">\n              <ng-container *ngTemplateOutlet=\"subtitleView;context:{ $implicit: group }\">\n              </ng-container>\n          </div>\n          <ng-template #groupSubtitle>\n             <div slot=\"subtitleView\" [ngStyle]=\"subtitleStyle()\" class=\"cc-groups__subtitle-view\"> {{getMemberCount(group)}} </div>\n          </ng-template>\n\n          <div slot=\"menuView\" class=\"cc-groups__options\" *ngIf=\"options\">\n            <cometchat-menu-list [data]=\"options(group)\">\n\n            </cometchat-menu-list>\n        </div>\n        <div slot=\"tailView\" *ngIf=\"selectionMode != selectionmodeEnum.none\" class=\"cc-groups__tail-view\">\n          <ng-container *ngTemplateOutlet=\"tailView\">\n          </ng-container>\n      </div>\n      </cometchat-list-item>\n      <ng-template #tailView>\n        <div  *ngIf=\"selectionMode == selectionmodeEnum.single\">\n          <cometchat-radio-button (cc-radio-button-changed)=\"onGroupSelected(group,$event)\"></cometchat-radio-button>\n\n        </div>\n        <div  *ngIf=\"selectionMode == selectionmodeEnum.multiple\">\n          <cometchat-checkbox [checkboxStyle]=\"checkboxStyle\" (cc-checkbox-changed)=\"onGroupSelected(group,$event)\"></cometchat-checkbox>\n\n        </div>\n      </ng-template>\n  </ng-template>\n</div>", styles: [".cc-groups{height:100%;width:100%;box-sizing:border-box}.cc-groups__tail-view{position:relative}.cc-menus{position:absolute;right:12px;top:6px}\n"] }]
         }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }, { type: CometChatThemeService }]; }, propDecorators: { groupsRequestBuilder: [{
                 type: Input
             }], searchRequestBuilder: [{